@charset "utf-8";
/* CSS Document */ :root {
  --yellow: #f7f41e;
  --black: #000;
  --grey: #a2a2a2;
  --green: #006837;
  --ugreen: #729a87;
  --red: #f00;
  --ore: #f1442c;
  --blue: #063779;
  --cream: #fafada;
  --f_sans: 'Noto Sans JP', sans-serif;
  --f_serif: 'Noto Serif JP', serif;
  --center_contain: no-repeat center center / contain;
}
img {
  max-width: 100%;
}
#nosp,.nosp,.br-pc{ display: block;}
#nopc,.nopc,.br-sp{ display: none;}

#mv {
  width: 100%;
  background-image: url(../img/main_bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  height: 600px;
  display: flex;
}
#mv .title { margin: 0 auto;}

section { margin-bottom: 5rem;}
#navi {
  background: var(--green);
  padding: 0.5rem;
}
#navi ul{
  max-width: 992px;
  margin: 1rem auto;
  text-align: center;
}
#navi ul li{
  display: inline-block;
  width: calc((100% - 20px) / 5);
  text-align: center;
}
#navi ul li a {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  width: 160px;
  height: 160px;
  line-height: 1.3;
  font-size: 1.5rem;
  border: double 4px #fff;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
  background: var(--green);
  font-weight: 900;
}
#navi ul li a:hover {
  transition: 1s;
  transform: rotateX(360deg);
  background: #fff;
  border: double 4px var(--green);
  color: var(--green);
  text-decoration: none;
}
#navi ul li a span{
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  margin: auto;
  right: 0;
}
h2 {
  text-align: center;
  margin: 3rem 3rem 0;
  font-size: 3rem;
  font-weight: 700;
}
#osusume h2,#room h2 { border-bottom: 1px dashed #000;}
#schedule h2,#other h2,#pusan h2{ border-bottom: 1px dashed #fff;}
#schedule,#other,#pusan,#other{
  background: var(--green);
  color: #fff;
  padding: 1rem 0 4rem;
}
#schedule ul,#other ul,#other .map{
  max-width: 992px;
  margin: 1% auto;
}
#osusume h3{
  font-size: 2em;
  line-height: 1.2;
  font-weight: bold;
  display: block;
  border-bottom: 3px double #111;
  margin: 1rem 0 0.5rem;
}
#other h3{
  font-size: 2em;
  line-height: 1.2;
  font-weight: bold;
  display: block;
  border-bottom: 3px double #fff;
  margin: 1rem 0 0.5rem;
}
#osusume ul.point,#other ul.point{
  max-width: 992px;
  margin: 1% auto;
  text-align: center;
}
#osusume ul.point li,#other ul.point li,#pusan ul.point li{
  display: inline-block;
  width: calc((100% - 15%) / 3);
  margin: 2%;
  border-radius: 50%;
}
/*運航スケジュール*/
#schedule ul li{ text-align:center;}

/*客室紹介*/
#room .tabs {
  max-width: 992px;
  margin: 1% auto;
}
.gridTab {
  font-size: 2rem;
  font-weight: bold;
  color: var(--green);
  text-decoration: none;
  display: block;
  padding: 0.5rem;
  text-align: center;
  width: 100%;
  border: 1px solid var(--green);
  background: #fff;
  border-bottom: solid 4px var(--green);
  border-radius: 3px;
}
.gridTab span{ font-size: 1.3rem;}
.gridTab:hover{
  background: var(--ugreen);
  color:#FFF;
}
.toggleControl--active .gridTab {
  background: var(--green);
  color: #FFF;
}
.roomdetail{
  max-width: 992px;
  margin: 1% auto;
}
.roomdetail h3,.map h4 {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 0 auto;
}
.roomdetail h3 span,.map h4 span{
  margin: 1%;
  font-size: 2rem;
}
.roomdetail ul li.leftimg,.roomdetail ul li.rightimg{
  float: left;
  width: 50%;
}
.roomdetail ul li.leftimg img{ width:95%;}
.roomdetail ul li.rightimg img{
  float: left;
  width: 46%;
  margin: 0 1% 2%;
}
.roomdetail ul li.rightimg.w100 img{
  width:95%;
  margin: 0 2%;
}
.roomdetail ul li.account{
  border-bottom: 1px var(--grey) dotted;
  padding: 0.5rem;
}
.roomdetail ul li.upgrade{
  margin: 1rem auto;
    border: var(--grey) solid 2px;
    padding: 1rem;
    text-align: center;
    font-size: 1.8rem;
}
.roomdetail ul li.upgrade span{
  color: var(--red);
  font-size: 2.5rem;
  font-weight: 900;
}
.grid-col5{
  width: 16%;
}
/*商品*/
#product{ padding: 1% 0;}
#product h2{
  text-align: center;
  margin-bottom: 2rem;
  font-size: 3rem;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 992px;
  margin: 0 auto 2rem;
}
#product dl.tour-box a {
  text-decoration: none;
  color: #000;
}
#product dl.tour-box {
  margin: 0.5rem;
  padding: 0.5rem;
  position: relative;
  border: 2px solid var(--green);
  background: #fff;
  width: calc((100% - 6%) / 4);
}
#product dl.tour-box .img{ 
  position: relative;
  height: 164px;
}
#product dl.tour-box .gentei {
  position: absolute;
  bottom: 0;
  background: var(--green);
  text-align: center;
  color: #fff;
  width: 100%;
}
#product dl.tour-box:empty {display: none;}
#product dl.tour-box:hover{ opacity:0.7;}
#product dl.tour-box .ttl {
  text-align: center;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.2;
  padding: 1rem 0;
}
#product dl.tour-box .point {
  background: var(--cream);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
#product dl.tour-box .price {
  text-align: center;
  font-weight: 900;
  color:var(--red);
  font-size: 1.2rem;
}
#product p.fuel {
  text-align: center;
  font-size: 0.8rem;
}
#product p.tour-btn {
  max-width: 992px;
  width: 40%;
  margin: 1% auto;
}
#product p.tour-btn a{
  position: relative;
  border: 3px solid var(--green);
  color: var(--green);
  font-size: 1.3rem;
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  font-weight: 900;
  transition : all 0.5s ease 0s;
}
#product p.tour-btn a:hover{
    background:var(--green);
    color:#fff;
}
#product p.tour-btn a:before,
#product p.tour-btn a:after{
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 11%;
  height: 2px;
  background:var(--green);
  transition : all 0.5s ease 0s;
}
#product p.tour-btn a:hover:before,
#product p.tour-btn a:hover:after{
    background:#fff;
}
#product p.tour-btn a:before{
  width: 60px;
  transform: translate(30px, 0px);
}
#product p.tour-btn a:after{
  width: 15px;
  transform-origin: right center;
  transform: translate(30px, 0px) rotate(25deg);
}
/*プサンの魅力*/
#pusan ul.point{
  max-width: 992px;
  margin: 1% auto;
}
/*ギャラリー箇所*/
li.slick-slide { padding: 1rem;}
section#gallery { margin-top: -3rem;}

/* 特集 */
#feature {
  background: #fff;
  max-width: 992px;
  margin: 3rem auto;
}
.tokushu_bnr p {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--blue);
  color: #fff;
  padding: 0.2rem 0;
}
.tokushu_bnr ul,
.is-ipad.headfoot-is-sp .tokushu_bnr ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 1%;
}
.headfoot-is-sp .tokushu_bnr ul { display: flex; flex-wrap: wrap;}
.headfoot-is-sp .tokushu_bnr ul li {
  width: 50%;
  flex-wrap: wrap;
  padding: 2%;
}
.tokushu_bnr ul li { padding: 1%;}
.tokushu_bnr .footbtn { text-align: center;}
.tokushu_bnr .footbtn a {
  background: #ffffff;
  padding: 1em 2em;
  color: var(--blue);
  border: var(--blue) solid 2px;
  border-radius: 7px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 2%;
}
.tokushu_bnr .footbtn a:hover {
  background: var(--blue);
  color: #fff;
}
/* ★スマホ用★ */
.headfoot-is-sp .section__container{ width: 100%;}
.headfoot-is-sp .goTop__img--pc {
  display: none;
}
.headfoot-is-sp #nopc,.headfoot-is-sp .nopc,.headfoot-is-sp .br-sp{ display: block;}
.headfoot-is-sp #nosp,.headfoot-is-sp .nosp,.headfoot-is-sp .br-pc{ display: none;}
.headfoot-is-sp .main-title img {
  zoom: 0.8;
}
.headfoot-is-sp #mv {
  background-image: url(../img/main_bg_sp.jpg); 
  height: 250px;
  background-size: 100%;
}
.headfoot-is-sp section { margin-bottom: 0;}
.headfoot-is-sp #navi ul{ max-width: 100%; margin: 1rem auto 0.5rem;}
.headfoot-is-sp #navi ul li{ 
  width: calc((100% - 2rem) / 3);
  padding: 0.3rem 0;
}
.headfoot-is-sp #navi ul li a {
  width: 110px;
  height: 110px;
  line-height: 1.3;
  font-size: 1.3rem;
  border: double 4px #fff;
  border-radius: 0;
  vertical-align: middle;
  overflow: hidden;
}
.headfoot-is-sp h2 {
  margin: 2rem 3rem 0;
  font-size: 1.8rem;
}
.headfoot-is-sp #schedule ul{
  max-width: 90%;
  margin: 4% auto;
}
.headfoot-is-sp #schedule,.headfoot-is-sp #other,.headfoot-is-sp #pusan,.headfoot-is-sp #other{ padding: 1rem 0 2rem;}
.headfoot-is-sp #other ul,.headfoot-is-sp #other .map{ max-width: 100%;}
.headfoot-is-sp #osusume ul.point,.headfoot-is-sp #other ul.point{ max-width: 100%;}
.headfoot-is-sp #osusume ul.point li{
  width: 65%;
  margin: 1.5rem 0 1rem;
}
.headfoot-is-sp #pusan ul.point li{
  width: 100%;
  margin: 1.5rem 0 1rem;
}
.headfoot-is-sp #other ul.point li{
  width: 90%;
  margin: 1.5rem 0 1rem;
}
/*客室紹介*/
.headfoot-is-sp #room .tabs { 
  max-width: 100%;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
}
.headfoot-is-sp .gridTab { padding: 0;}
.headfoot-is-sp .grid-col5:first-child { width: 50%;}
.headfoot-is-sp .grid-col5 { width: 50%;}
.headfoot-is-sp .grid-row--narrowGutter>.grid-col5{ padding: 0 4px 0px;}
.headfoot-is-sp .roomdetail{
  max-width: 100%;
  padding: 0 1rem 2rem;
}
.headfoot-is-sp .roomdetail h3 { 
  font-size: 2rem; 
  margin-bottom: 0.5rem;
}
.headfoot-is-sp .map h4 { 
  font-size: 2rem; 
  margin-bottom: 0.5rem;
  padding: 1rem 0 0 1rem
}
.headfoot-is-sp .map h4 span{ 
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.headfoot-is-sp .map h4 span{ 
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.headfoot-is-sp .roomdetail ul li.rightimg.w100 img { margin: 0;}
.headfoot-is-sp .roomdetail ul li.leftimg{
  float: none;
  width: 100%;
}
.headfoot-is-sp .roomdetail ul li.leftimg img{ width:100%;}
.headfoot-is-sp .roomdetail ul li.rightimg{
  float: none;
  width: 100%;
  margin-top: 0.5rem;
}
.headfoot-is-sp .roomdetail ul li.rightimg img{
  width: 48%;
  margin: 0 1% 2%;
}
.headfoot-is-sp .roomdetail ul li.rightimg.w100 img{ width:100%;}

/*商品*/
.headfoot-is-sp #product p.tour-btn { width: 90%; margin-bottom: 2rem;}
.headfoot-is-sp #product h2{
  margin-bottom: 0;
  font-size: 2rem;
  line-height: 1.3;
}
.headfoot-is-sp #product dl.tour-box { 
  width: 100%;
  margin: 1rem 2rem 0;
}
.headfoot-is-sp #product dl.tour-box .img{ height: auto;}
.headfoot-is-sp p.fuel { text-align: center;}
.headfoot-is-sp #product p.tour-btn a:before{ width: 35px;}

/*プサンの魅力*/
.headfoot-is-sp #pusan ul.point{
  width: 100%;
  padding: 0 2rem;
}
/*ギャラリー箇所*/
.headfoot-is-sp li.slick-slide { padding: 0;}
.headfoot-is-sp section#gallery { margin-top: -1.5rem;}

/* 特集 */
.headfoot-is-sp #feature { max-width: 100%;}

/* ★タブレット用★ */
.is-ipad .breadcrumb{width:100%;}
.is-ipad .spot__point_box li { width: calc(90% / 3);}
.is-ipad .spot__point_box li:nth-child(even) { margin: 0 auto 0.5rem; }

.is-ipad #mv { height: 680px;}
.is-ipad #navi ul { margin: 1rem 1rem 0.5rem;}
.is-ipad #navi ul li{ 
  width: calc((100% - 15rem) / 5);}
.is-ipad #navi ul li a {
  width: 150px;
  height: 150px;
  font-size: 1.5rem;
  border-radius: 50%;
}
.is-ipad h2 { font-size: 3rem;}
.is-ipad #osusume ul.point li,.is-ipad #other ul.point li,.is-ipad #pusan ul.point li{
  width: calc((100% - 15%) / 3);
  margin: 1%;
}
/*客室紹介*/
.is-ipad #room .tabs { width: 90%;}
.is-ipad .grid-col5:first-child { width: 16%;}
.is-ipad .grid-col5 { width: 16%;}
.is-ipad .roomdetail { max-width: 85%;}
.is-ipad .roomdetail ul li{padding: 1rem;}
.is-ipad .roomdetail ul li.leftimg,.is-ipad .roomdetail ul li.rightimg{
  float: left;
  width: 50%;
  margin: 0 0 0.5rem;
}
.is-ipad #other .map{ max-width: 80%;}
.is-ipad #product dl.tour-box { 
  width: calc((100% - 6%) / 4);
  margin: 1rem 0.5rem 0;
}
.is-ipad #product dl.tour-box .img {
  height: 159px;
}
.is-ipad .flex-container{ margin-top: 1rem;}

/*ギャラリー箇所*/
.is-ipad li.slick-slide { padding: 1rem;}
.is-ipad section#gallery { margin-top: -1rem; margin-bottom: 2rem;}

/* 特集 */
.is-ipad #feature { max-width: 80%;}
.is-ipad .tokushu_bnr ul li { padding: 1%;}

@media (orientation: portrait){
.is-ipad #navi ul li { width: calc((100% - 2rem) / 5);}
.is-ipad #navi ul li a {
  width: 145px;
  height: 145px;
  font-size: 1.5rem;
  border-radius: 50%;
}
#osusume h3 { font-size: 1.8em;}
.is-ipad .flex-container { padding: 0 1rem;}
.is-ipad #osusume ul.point li, .is-ipad #other ul.point li, .is-ipad #pusan ul.point li {
  width: calc((100% - 8%) / 3);
}
.headfoot-is-sp #other ul.point { max-width: 85%;}
.is-ipad #feature { max-width: 95%; margin: 2rem auto;}
}