@charset "utf-8";
/*
	Description: initial setting
	Version: 1.0
	Author: idealgrow
*/
/*
===== CONTENTS ===========================================

	1: BASE LAYOUT

==========================================================
*/
/*
===== 1: BASE LAYOUT =====================================
*/
#wrapper {
  width: 100%;
  overflow: hidden !important;
  position: relative;
}
header {
  height: 60px;
  position: relative;
}
header #seo {
  display: none;
}
header #logo {
  padding: 15px;
}
header #logo img {
  height: 30px;
  width: auto;
}
header #headSearch {
  display: none;
}
aside {
  background: #e5f5f8;
  padding: 20px;
  position: relative;
}
#planBanar {
  position: absolute;
  right: 60px;
  top: 0;
}
#planBanar a {
  background: url("../img/shared/bg_reserve.png");
  display: block;
  height: 60px;
  width: 60px;
  color: #fff;
  font-size: 10px;
  text-align: center;
  padding-top: 35px;
  position: relative;
}
#planBanar a:before {
  font-family: 'icf' !important;
  content: "\e91c";
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 8px;
  font-size: 18px;
}
#planBanar span {
  display: none;
}
#toggleNav {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  padding-top: 35px;
  z-index: 110;
}
#toggleNav:before {
  content: "MENU";
}
#toggleNav.open:before {
  content: "CLOSE";
}
#toggleNav .drawer, #toggleNav .drawer:before, #toggleNav .drawer:after {
  content: "";
  display: block;
  position: absolute;
  background: #000;
  width: 16px;
  height: 2px;
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
  transition: all 0.2s ease;
}
#toggleNav .drawer:before {
  top: 5px;
}
#toggleNav .drawer:after {
  top: 10px;
}
#toggleNav.open .drawer {
  background: #fff;
  top: 25px;
}
#toggleNav.open .drawer:before {
  top: 60%;
  transform: translateX(-50%) rotate(-45deg);
}
#toggleNav.open .drawer:after {
  top: 60%;
  transform: translateX(-50%) rotate(45deg);
}
#globalNav {
  width: 100vw;
  height: 100vh;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  z-index: 100;
  background: #fff;
  padding: 20px;
}
#globalNav li {
  border-bottom: solid 1px #ccc;
}
#globalNav li a {
  display: inline-block;
  padding: 8px 10px;
}
/** news **/
#news {
  position: absolute;
  width: 100%;
  bottom: 211px;
  height: 78px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
}
#news dl {
  display: flex;
  padding: 10px
}
#news dt {
  color: #fff;
  border-right: solid 1px #fff;
  padding-right: 10px;
  width: 34%;
}
#news dd {
  color: #fff;
  padding-left: 10px;
  overflow: hidden;
  width: 66%;
}
#news dd span {
  display: none;
}
/** searchBox **/
	.topSlide{
		position: relative;
	}
.topSearch #searchBox {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 20;
  height: 211px;
}
#searchBox {
  background: url("../img/shared/bg_search_box.png");
  padding: 20px;
}
#searchBox ul li {
  margin-bottom: 10px;
}
#searchBox ul li:last-of-type {
  margin-bottom: 0;
}
#searchBox ul li.tit {
  display: none;
}
#searchBox ul li.ship {
  display: flex;
}
#searchBox ul li.ship label {
  width: 50%;
}
#searchBox ul li ul.keywordList, #searchBox ul li ul.stationList {
  display: flex;
  flex-wrap: wrap;
}
#searchBox ul li ul.keywordList li, #searchBox ul li ul.stationList li {
  width: 49%;
  margin-right: 2%;
}
#searchBox ul li ul.keywordList li:nth-of-type(even), #searchBox ul li ul.stationList li:nth-of-type(even) {
  margin-right: 0;
}
#searchBox ul li ul.keywordList.exfood li:nth-of-type(8),#searchBox ul li ul.keywordList.exfood li:nth-of-type(10){
	margin-right: 2%;
}
#searchBox ul li ul.keywordList.exfood li:nth-of-type(9),#searchBox ul li ul.keywordList.exfood li:nth-of-type(11){
	margin-right: 0;
}
#searchBox ul li ul li.fullWidth {
  width: 100% !important;
  margin-right: 0;
}
#searchBox ul li.optionToggle .toggleBtn {
  border: solid 1px #ddd;
  border-radius: 3px;
  padding: 10px;
  background: #fff;
  display: block;
  position: relative;
  cursor: pointer;
  transition: all .3s ease;
  box-sizing: border-box;
}
#searchBox ul li.optionToggle .toggleBtn:after {
  font-family: 'icf' !important;
  speak: none;
  content: "\e915";
  color: #adadad;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all .3s ease;
}
#searchBox ul li.optionToggle .toggleBtn.selected:after {
  transform: translateY(-50%) rotate(-45deg);
  color: #fff;
}
#searchBox ul li.optionToggle .toggleBtn.selected {
  border-top: solid 1px #ddd;
  padding: 5px 10px;
  background: #bbb;
  color: #fff;
}
#searchBox ul li .toggleSubBtn, #searchBox ul li .toggleTit {
  color: #14b1c2;
  font-weight: bold;
  margin: 10px 0 5px 0;
  position: relative;
  padding-left: 15px;
}
#searchBox ul li .toggleSubBtn:before, #searchBox ul li .toggleTit:before {
  content: "";
  width: 10px;
  height: 3px;
  background: #14b1c2;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#searchBox ul li .toggleSubBtn:after {
  content: "";
  width: 10px;
  height: 3px;
  background: #14b1c2;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: all .3s ease;
}
#searchBox ul li .toggleSubBtn.selected:after {
  transform: translateY(-50%) rotate(180deg);
}
/** breadcrumb **/
.breadcrumb {
  border-top: solid 1px #e5e5e5;
  padding: 10px 20px;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}
.breadcrumb ol {
  display: table;
}
.breadcrumb ol li {
  display: table-cell;
  white-space: nowrap;
  padding-right: 26px;
  position: relative;
  font-size: 14px;
}
.breadcrumb ol li:last-child {
  padding-right: 0;
  color: #00a0b8;
}
.breadcrumb ol li:last-child:after {
  display: none;
}
.breadcrumb ol li:after {
  position: absolute;
  display: block;
  font-family: 'icf' !important;
  speak: none;
  content: "\e91a";
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}
.breadcrumb ol li a{
text-decoration:underline;
}
/** footer **/
footer {
  padding: 20px;
  background: url("../img/shared/footer_logo.svg") center 50px no-repeat;
  background-size: auto 50px;
  padding-top: 140px;
}
footer .ninja_onebutton_output_horizontal {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
footer .ninja_onebutton_output_horizontal div {
  float: none;
  margin: 0 2px;
}
footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}
footer ul li {
  margin: 0 10px;
}
footer ul li a {
  display: block;
  padding: 5px 5px 5px 10px;
  position: relative;
}
footer ul li a:before {
  font-family: 'icf' !important;
  content: "\e91a";
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
footer #copy {
  text-align: center;
  font-size: 14px;
}
@media screen and (min-width: 1159px) {
  #wrapper {
    flex: 1 auto;
  }
  header {
    height: 185px;
    position: relative;
    padding-top: 36px;
  }
  header:before {
    content: "";
    width: 100%;
    height: 15px;
    background: url("../img/shared/header_bar.png");
    position: absolute;
    top: 0;
    left: 0;
  }
  header #headerIn {
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  header #headerIn:after {
    display: block;
    content: "";
    clear: both;
  }
  header #seo {
    display: block;
    color: #00a0b8;
    font-weight: bold;
    line-height: 50px;
    padding-top: 10px;
    font-size:16px;
  }
  header #logo {
    padding: 0;
    float: left;
    margin-right: 15px;
    padding-top: 10px;
  }
  header #logo img {
    height: 50px;
    width: auto;
  }
  header #headSearch {
    display: block;
    width: 280px;
    position: absolute;
    right: 220px;
    top: 0;
  }
  header #headSearch ul {
    display: flex;
    flex-wrap: wrap;
	  margin-top: 10px;
  }
	/**
	
  header #headSearch ul li:first-of-type {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    padding-top: 5px;
  }
  header #headSearch ul li:first-of-type span {
    font-size: 27px;
    font-weight: bold;
    color: #009FB9;
    width: 65%;
    line-height: 1;
  }
  header #headSearch ul li:first-of-type p{
    width: 35%;
    font-size: 12px;
    color: #009FB9;
    line-height: 1;
  }
  header #headSearch ul li:first-of-type dl {
    display: flex;
    flex-wrap: wrap;
    width: 35%;
  }
  header #headSearch ul li:first-of-type dl dt {
    width: 45%;
    font-size: 10px;
    color: #009FB9;
    line-height: 1;
  }
  header #headSearch ul li:first-of-type dl dd {
    width: 55%;
    font-size: 10px;
    color: #009FB9;
    line-height: 1;
  }
  header #headSearch ul li:first-of-type:after, header #headSearch ul li:last-of-type:after {
    display: none;
  }
	**/
  header #headSearch ul li {
    position: relative;
    width: 30%;
  }
  header #headSearch ul li:nth-of-type(2) {
    text-align: center;
  }
  header #headSearch ul li:nth-of-type(3) {
    width: 40%;
    text-align: right;
  }
  header #headSearch ul li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 50%;
    width: 1px;
    background: #adadad;
  }
  header #headSearch ul li a {
    font-size: 14px;
    color: #333;
    display: block;
  }
  header #headSearch ul li a:hover {
    color: #aaa;
  }
  .cse .gsc-control-cse, .gsc-control-cse {
    padding: 0 !important;
    border: none !important;
  }
  .gsc-input-box {
    border: none !important;
  }
  form.gsc-search-box {
    margin-bottom: 0 !important;
  }
  .cse .gsc-search-button-v2, .gsc-search-button-v2 {
    font-size: 0px;
    padding: 6px 10px !important;
    width: auto;
    vertical-align: middle;
    border: none !important;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-color: none !important;
    background-color: #fff !important;
    background-image: none !important;
  }
  .gsc-search-button-v2 path {
    fill: #42AFE3;
  }
  table.gsc-search-box {
    margin-bottom: 0 !important;
  }
  .gsib_a {
    padding: 0;
  }
  .gsib_b {
    display: none !important;
  }
  aside {
    background: #f3f3f3;
    padding: 40px 0;
    position: relative;
  }
  #planBanar {
    right: 0;
    top: -36px;
    z-index: 130;
    transition: all .3s ease;
  }
  #planBanar a {
    background: url("../img/shared/head_banar_reserve.png") no-repeat;
    display: block;
    height: 162px;
    width: 190px;
    font-size: 20px;
    padding-top: 55px;
  }
  #planBanar:hover {
    top: -46px;
  }
  #planBanar a:before {
    display: none;
  }
  #planBanar span {
    display: block;
    line-height: 1.2;
  }
  #toggleNav {
    display: none;
  }
  #globalNav {
    width: calc(100% - 220px);
    height: auto;
    position: relative;
    display: flex;
    overflow: hidden;
    top: 30px;
    padding: 0;
    z-index: 1;
  }
  #globalNav:before {
    content: "";
    background: url("../img/shared/global_split.png")left top no-repeat;
    width: 3px;
    height: 12px;
    top: 20px;
    left: 0;
    position: absolute;
  }
  #globalNav li {
    border-bottom: none;
    width: 20%;
    position: relative;
  }
  #globalNav li:after {
    content: "";
    background: url("../img/shared/global_split.png")left top no-repeat;
    width: 3px;
    height: 12px;
    position: absolute;
    top: 20px;
    right: 0;
  }
  #globalNav li:nth-of-type(5) ~ li {
    display: none;
  }
  #globalNav li a {
    text-align: center;
    display: block;
    color: #00a0b8;
    font-weight: bold;
  }
  #globalNav li a span {
    width: 95%;
    position: relative;
    display: inline-block;
  }
  #globalNav li a span:before {
    background: #dbf7fb;
    content: "";
    width: 100%;
    height: 28px;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
    transform-origin: center center;
    transform: scale(0, 1);
    transition: transform .3s;
  }
  #globalNav li a:hover span:before {
    transform: scale(1, 1);
  }
  /** news **/
  #news {
    position: absolute;
    width: 100%;
    bottom: 80px;
    height: 60px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.4);
  }
  #news dl {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 16px 0;
  }
  #news dt {
    color: #fff;
    padding-right: 0;
    width: 200px;
  }
  #news dd {
    color: #fff;
    padding-left: 20px;
    width: 1000px;
  }
  #news dd span {
    display: inline-block;
    margin-right: 20px;
  }
  /** searchBox **/
  .swiper-container .picker--opened .picker__frame {
    top: 240px;
  }
  .topSearch #searchBox {
    width: 100%;
    z-index: 20;
    height: 80px;
    background: url("../img/shared/bg_search.png");
    padding: 15px 0;
  }
  .topSearch #searchBox ul {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 50px;
  }
  .topSearch #searchBox ul li {
    margin-bottom: 0;
  }
  #searchBox ul li.tit {
    display: block;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    width: 260px;
    position: relative;
    line-height: 50px;
  }
  .topSearch #searchBox li.ship {
    width: 350px;
    margin-right: 20px;
  }
  .topSearch #searchBox li.calendarInput {
    width: 330px;
    margin-right: 20px;
  }
  .topSearch #searchBox li.calendarInput input {
    height: 50px;
  }
  .topSearch #searchBox li.searchBtn {
    width: 220px;
  }
  #searchBox ul li.tit:after {
    font-family: 'icf' !important;
    speak: none;
    content: "\e919";
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
  }
  #searchBox ul li.ship label {
    text-align: center;
    padding-right: 30px;
  }
  section.titArea #searchBox ul, #searchBox.flat ul {
    position: relative;
  }
  section.titArea #searchBox ul:after, #searchBox.flat ul:after {
    content: "";
    display: block;
    clear: both;
  }
  section.titArea #searchBox .ship, #searchBox.flat .ship {
    float: left;
    width: 30%;
    margin-right: 2%;
    margin-bottom: 20px;
  }
  section.titArea #searchBox .calendarInput, #searchBox.flat .calendarInput {
    float: left;
    width: 40%;
    margin-bottom: 20px;
  }
  section #searchBox .optionToggle, #searchBox.flat .optionToggle {
    border: solid 1px #ddd;
    border-radius: 3px;
    padding: 10px;
    background: #fff;
    clear: both;
  }
  section.titArea #searchBox .optionToggle, #searchBox.flat .optionToggle {
    margin-bottom: 0;
  }
  section.titArea #searchBox .pickupSelect, #searchBox.flat .pickupSelect {
    padding-bottom: 0;
    margin-bottom: 20px;
  }
  section.titArea #searchBox .optionToggle:after, #searchBox.flat .optionToggle:after {
    content: "";
    display: block;
    clear: both;
  }
  section.titArea #searchBox .searchBtn, #searchBox.flat .searchBtn {
    position: absolute;
    right: 0;
    top: 0;
    width: 26%;
    margin-bottom: 20px;
  }
  #searchBox ul li.optionToggle .toggleBtn {
    border: none;
    padding: 0;
  }
  #searchBox ul li .toggleSubBtn:after {
    display: none;
  }
  #searchBox ul li.optionToggle .routeSelect {
    width: 49%;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
  }
  #searchBox ul li.optionToggle .routeSelect.fullSize {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  #searchBox ul li.optionToggle .budgetSelect {
    float: left;
    width: 49%;
    margin-bottom: 20px;
  }
  #searchBox ul li.optionToggle .keywordSelect {
    clear: both;
    margin-bottom: 20px;
  }
  #searchBox ul li.optionToggle.pickupSelect .keywordSelect {
    margin-bottom: 0;
  }
  #searchBox ul li.optionToggle .keywordSelect li {
    width: 19.2% !important;
    margin-right: 1% !important;
  }
  #searchBox ul li.optionToggle .keywordSelect li:nth-of-type(5n) {
    margin-right: 0 !important;
  }
  #searchBox ul li.optionToggle .stationSelect li {
    width: 19.2% !important;
    margin-right: 1% !important;
  }
  #searchBox ul li.optionToggle .stationSelect li:nth-of-type(5n) {
    margin-right: 0 !important;
  }
  /** breadcrumb **/
  .breadcrumb {
    padding: 10px 0;
    overflow-x: hidden;
  }
  .breadcrumb ol {
    display: block;
    width: 1200px;
    margin: 0 auto;
  }
  /** footer **/
  footer {
    padding: 0;
    background: none;
    padding-top: 40px;
    position: relative;
    padding-bottom: 19px;
    height: 142px;
  }
  footer#booking {
    height: 120px;
  }
  footer:after {
    content: "";
    width: 100%;
    background: url("../img/shared/footer_bar.png")left top;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 19px;
  }
  footer #footerIn {
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  footer .ninja_onebutton_output_horizontal {
    position: absolute;
    right: 0;
    justify-content: flex-end;
  }
  footer .ninja_onebutton_output_horizontal div {
    float: none;
    margin: 0 0 0 2px;
  }
  footer .ninja_onebutton_clear {
    display: none;
  }
  footer .ninja_onebutton_output > div {
    padding: 0 0 5px 5px;
  }
  .ninja_onebutton_output .wrap-omatome-icnfont-button.icon.medium .omatome-icnfont::before {
    font-size: 14px !important;
  }
  footer ul {
    width: 60%;
    justify-content: flex-start;
    margin-bottom: 0;
  }
  footer ul li {
    margin: 0 10px;
  }
  footer ul li a {
    font-size: 14px;
    color: #6f6f6f !important;
  }
  footer ul li a:hover {
    text-decoration: underline;
  }
  footer #copy {
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}