@charset "utf-8";
body{
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
}

.sp{
  display: none;
}

h2{
  text-align: center;
}

p{
  line-height: 30px;
}
header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
}

.header_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_container .logo_a{
  width: 15%;
  margin: 20px;
}

.logo{
  width: 100%;
  object-fit: cover;
}

.header_container nav{
  padding: 20px;
}

.header_container ul{
  display: flex;
}

.header_container li{
  margin-right: 30px;
}

.header_container li a{
  color: #fff;
  text-decoration: none;
}

.instagram_icon{
  vertical-align: baseline;
}

.img_1{
  width: 100%;
}

.fv {
  width: 100%;
  height: 100vh;
}

.fv_img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.fv .slick-list,
.fv .slick-track,
.fv .slick-slide {
  height: 100vh !important;
}

.lang_globe{
  width: 17px;
  margin-right: 5px;
}

.lang {
  position: absolute;
  top: 150px;
  right: 0;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  display: inline-block;
  text-align: left;
}

.lang-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.lang_globe {
  width: 17px;
  margin-right: 5px;
}

.lang-list {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 5px 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 100;
  width: 100%;
  min-width: 120px; /* 最低幅指定、LANGより小さくならないように */
  box-sizing: border-box;
}

.lang-list li {
  white-space: nowrap;
  color: #000;
  text-decoration: none;
}

.lang-list li a {
  color: #000;
  text-decoration: none;
  width: 100%;
  display: block;
  padding: 16px 10px 10px;
}

.lang-list li:hover {
  background-color: #f0f0f0;
}

.lang:hover .lang-list {
  display: contents;
}




/* conceptセクション */
.concept {
  background-image: url("../img/bg_concept.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 200px 0;
}

.concept_title{
  padding: 0 0 50px;
  font-size: 25px;
}

.concept p{
  text-align: center;
  line-height: 30px;
  font-weight: bold;
}

/* aboutセクション */
.about {
  background-image: url("../img/bg_about.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 200px 0 100px;
}

.about h2{
  padding: 0 0 50px;
}

.about_text{
  width: fit-content;
  margin: 0 auto;
}

.about_text2{
  width: fit-content;
  margin: 30px auto 0;
  font-size: 25px;
}

/* particularセクション */
.particular {
  background-image: url("../img/bg_particular.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 0;
}

.particular_container{
  max-width: 1200px;
  margin: 0 auto;
}

.particular h2{
  margin-bottom: 50px;
}

.particular_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.particular_content{
  width: 30%;
}

.particular_content h3{
  text-align: center;
}

.particular_content img{
  width: 100%;
}

.particular_content3{
  position: relative;
}

.particular_person{
  position: absolute;
  width: 13% !important;
  bottom: 100%;
}

/* roomセクション */
.room {
  background-image: url("../img/bg_room.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 0;
}

.room h2{
  margin-bottom: 100px;
}

.room .slide {
  display: flex;
  width: 200%; /* 2セット並べるため */
  animation: scroll 40s linear infinite;
  gap: 20px;
}

.room .slide > div {
  flex-shrink: 0;
  width: 25vw;
  aspect-ratio: 4 / 3; /* 画像比率 例：4:3 */
  overflow: hidden;
  position: relative;
}

.room .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を枠内でカット＆フィット */
  display: block;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.room {
  overflow: hidden;
  width: 100%;
}

.btn_box{
  width: fit-content;
  margin: 50px auto 0;
}

.btn_box a{
  background-color: #30324A;
  color: #fff;
  padding: 15px 50px;
  display: inline-block;
  text-decoration: none;
  width: 250px;
  text-align: center;
}

/* serviceセクション */
.service {
  background-image: url("../img/bg_service.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 0 0;
}

.service_container{
  max-width: 1200px;
  margin: 0 auto;
}

.service h2 {
  padding: 0 0 50px;
}

.service_container p{
  width: fit-content;
  margin: 0 auto 80px;
}

.service_list_box{
  display: flex;
  justify-content: center;
}

.service_list{
  position: relative;
  width: 30%;
}

.service_list img{
  width: 100%;
}

.service_list h3{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  width: 100%;
  text-align: center;
}

/* featureセクション */
.feature {
  background-image: url("../img/bg_feature.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 0;
}

.festure_container{
  max-width: 1200px;
  margin: 0 auto;
}

.feature_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.feature_content{
  width: 30%;
}

.feature_content img{
  width: 100%;
}

.feature_content1{
  position: relative;
}

.feature_content3{
  position: relative;
}

.feature_person1{
  position: absolute;
  width: 13% !important;
  bottom: 100%;
  right: 0;
}

.feature_person2{
  position: absolute;
  width: 20% !important;
  bottom: 86%;
}


/* newsセクション */
.news{
  position: relative;
  height: auto;
  padding: 100px 0;
}

.news_container{
  max-width: 1200px;
  margin: 0 auto;
}

.news span{
  margin-left: 100px;
}

.news .news_box{
  margin: 50px 0;
  width: 70%;
  margin: 0 auto;
}

.news_left_img{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 13vw;
}

.news_right_img{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 13vw;
}


/* blogセクション */
.blog{
  background-color: #FBFAF8;
  padding: 100px 0;
}

/* faqセクション */
.faq{
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0;
}

.faq h2{
  padding: 0px 0px 50px;
}

.faq dl{
  width: fit-content;
  margin: 0 auto;
}

.faq dt,.faq dd{
  margin-bottom: 20px;
}

/* reservationセクション */
.reservation{
  position: relative;
  height: auto;
  background-image: url("../img/bg_reservation.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.reservation_img{
  width: 100%;
}

.reservation_btn{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 20vw;
}

.reservation_container{
  padding: 100px 0;
}

.reservation_container img{
  margin: 50px auto;
  display: block;
}

.reservation_container p{
  text-align: center;
}

.reservation .btn_box a{
  border-radius: 30px;
}

/* フッター */

footer{
  background-color: #fff;
}

.footer_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_container .logo_a{
  width: 15%;
  margin: 20px;
}

.footer_container nav{
  padding: 20px;
}

.footer_container ul{
  display: flex;
}

.footer_container li{
  margin-right: 30px;
}

.footer_container li a{
  color: #000;
  text-decoration: none;
}

/* お部屋ページ */
.body_room{
  background-image: url("../img/bg_roompage.png");
}
.body_room main{
  margin-top: 150px
}

.body_room main img{
  display: block;
  margin: 0 auto;
}

.header_lower li a{
  color: #000
}

.room-slider h3{
  text-align: center;
}

.roompage_roomimg{
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
  border-bottom: solid 1px #CCCCCC;
}

.roompage_roomimg h2{
  background-color: #fff;
  border: solid 1px #000;
  border-radius: 30px;
  width: 40%;
  padding: 5px 0;
  margin: 50px auto;
}

.roompage_roomimg_box {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.room-slider {
  width: 30%;
}

.room-slider .slider {
  display: block !important;
}

.room-slider .slider img {
  width: 100%;
  display: block;
}

.equipment{
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
}

.equipment_content_box{
  width: 30%;
  background-color: #fff;
}

.equipment_content_box img{
  width: 100%;
}

.equipment h2{
  background-color: #fff;
  border: solid 1px #000;
  border-radius: 30px;
  width: 40%;
  padding: 5px 0;
  margin: 50px auto;
}

.equipment_box{
  display: flex;
  justify-content: center;
  gap:20px;
}

.equipment_content_box div{
  padding: 0 20px 20px;
}

.equipment_content_box div p{
  font-size: 14px;
  width: fit-content;
  margin: 0 auto;
}

.equipment_content_box h3{
  text-align: center;
}

/* 通常方向 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 逆方向 */
@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}


.gallery{
  overflow: hidden;
  background-color: #FBFAF8;
}

.gallery .slide:nth-of-type(1) {
  display: flex;
  width: 200%;
  animation: scroll-left 80s linear infinite;
  gap: 20px;
}

.gallery .slide:nth-of-type(2) {
  display: flex;
  width: 200%;
  animation: scroll-right 80s linear infinite;
  gap: 20px;
}

.gallery .slide:nth-of-type(3) {
  display: flex;
  width: 200%;
  animation: scroll-left 80s linear infinite;
  gap: 20px;
}

.gallery .slide > div {
  flex-shrink: 0;
  width: 25vw;
  aspect-ratio: 4 / 4;
  overflow: hidden;
  position: relative;
}

.gallery .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery h2{
  padding: 100px 0;
}

.detail{
  background-color: #fff;
  padding: 80px 0;
}

.detail_box{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.body_room table tr td:nth-child(1){
  background-color: #F1F1F1;
  width: 20%;
}

.body_room table td{
  padding: 20px;
}

.body_room table tr {
  border-bottom: solid 1px #ccc;
}

.body_room table tr:nth-child(1) {
  border-top: solid 1px #ccc;
}

.roomtour{
  background-image: url("../img/bg_roomtour.png");
  padding: 50px 0 100px;
  position: relative;
}

.roomtour h2{
  padding: 0 0 50px;
}
.roomtour_video{
  width: fit-content;
  margin: 0 auto;
}

.roomtour_left{
  position: absolute;
  top: 5%;
  left: 0;
  width: 5vw;
}

.roomtour_right{
  position: absolute;
  top: -10%;
  right: 0;
  width: 8vw;
}



/* クルージングページ */
.body_cruising{
  background-image: url("../img/bg_cruisingpage.png");
  background-size: cover;
}
.body_cruising main{
  margin-top: 100px
}
.body_cruising main img{
  display: block;
}
.header_lower li a{
  color: #000
}

.cruisingpage_concept{
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}

.cruisingpage_concept h2{
  background-color: #fff;
  border: solid 1px #000;
  border-radius: 30px;
  width: 50%;
  padding: 5px 10px;
  margin: 50px auto;
}

.cruising_concept_box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.cruising_concept_box p:nth-child(1){
  font-size: 22px;
  text-align: center;
}
.cruising_concept_box p:nth-child(2){
  text-align: center;
}

.cruising_type{
  max-width: 1200px;
  margin:0 auto;
  padding: 20px 0;
}

.cruising_type h2{
  margin-bottom: 50px;
}

.cruising_type_container{
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cruising_type_box{
  width: 30%;
  background-color: #fff;
}

.cruising_type_box img{
  width: 100%;
}

.cruising_type_box h3{
  text-align: center;
}

.cruising_type_box p{
  padding: 0 20px 20px;
}

.cruising_form{
  background-color: #fff;
  padding: 100px 0;
}

.access{
  padding: 50px 0;
  background-color: #FBFAF8;
}

.access_container_box{
  max-width: 1200px;
  margin: 0 auto;

}

.access h2{
  padding: 0 0 50px;
}
.access_container{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
  padding-bottom: 100px;
}

.body_toppage table tr td:nth-child(1){
  width: 30%;
}

.body_toppage table td{
  padding: 10px;
}

.table_title{
  font-size: 22px;
}

.access_video{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

@media screen and (max-width:768px) {
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
  .sp_header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo_a{
    width: 100px;
    margin-left: 10px;
  }
  .hamburger-menu {
    width: 50px;
    height: 50px;
    position: relative;
    border: none;
    background: transparent;
    appearance: none;
    padding: 0;
    cursor: pointer;
  }
  .hamburger-menu__bar {
    display: inline-block;
    width: 44%;
    height: 2px;
    background: #242424;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: .5s;
  }
  .hamburger-menu__bar:first-child {
    top: 16px;
  }
  .hamburger-menu__bar:nth-child(2) {
    top: 24px;
  }
  .hamburger-menu__bar:last-child {
    top: 32px;
  }
  .hamburger-menu--open .hamburger-menu__bar {
    top: 50%;
  }
  .hamburger-menu--open .hamburger-menu__bar:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  .hamburger-menu--open .hamburger-menu__bar:last-child {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  }
  .hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
    display: none;
  }
  .navigation {
    display: none;
    background: #242424;
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 9999;
  }
  .navigation__list {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .navigation__list-item {
    border-bottom: solid 1px #474747;
  }
  .navigation__list-item:first-child {
    border-top: solid 1px #474747;
  }
  .navigation__link {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    display: block;
    padding: 24px 0;
    transition: .5s;
  }
  @media (hover: hover) and (pointer: fine) {
    .navigation__link:hover {
      background: #333;
    }
  }

  .concept{
    padding: 70px 20px;
  }
  .about{
    padding: 70px 20px 70px;
  }

  .particular_box{
    padding: 0 20px;
  }
  .particular_content{
    width: 80%;
    margin: 0 auto;
  }
  .particular_person{
    display: none;
  }
  .room h2{
    margin-bottom: 45px;
  }

  .room .slide > div{
    width: 40vw;
  }
  .service{
    padding: 50px 20px 0;
  }
  .service_list{
    width: 40%;
  }
  .service_list_box{
    flex-wrap: wrap;
  }
  .feature_box{
    display: block;
    padding: 0 20px;
  }
  .feature_content {
    width: 90%;
    margin: 0 auto;
  }
  .feature_person2{
    display: none;
  }
  .news span{
    margin-left: 0;
  }

  .access_container{
    display: block;
  }
  .access_container iframe{
    width: 100%;
  }
  .news_left_img{
    top: 13%;
    width: 80px;
  }
  .news_right_img{
    top: 13%;
    width: 80px;
  }
  .faq dl{
    padding: 0 20px;
  }
  .faq dd {
    margin-left: 0;
  }
  footer{
    display: none;
  }

  /* お部屋ページ */
  .detail_box{
    display: block;
  }
  .detail{
    padding: 80px 20px;
  }
  .body_room main img{
    width: 100%;
  }
  .roompage_roomimg_box{
    display: block;
    padding: 0 20px;
  }
  .room-slider {
    width: 80%;
    margin: 0 auto;
  }
  .equipment_box{
    display: block;
    padding: 0 20px;
  }
  .equipment_content_box {
    width: 90%;
    margin: 20px auto;
  }
  .gallery h2 {
    padding: 50px 0;
  }
  .gallery .slide > div{
    width: 35vw;
  }
  .cruisingpage_concept h2{
    width: 80%;
    font-size: 22px;
  }
  .cruising_concept_box{
    display: block;
    padding: 0 20px;
  }
  .body_cruising main img{
    margin: 0 auto;
  }
  .cruising_type_container{
    display: block;
    padding: 0 20px;
  }
  .cruising_type_box{
    width: 90%;
    margin: 0 auto;
  }
  .roomtour_left{
    width: 15vw !important;
    top: 5%;
  }
  .roomtour_right{
    width: 15vw !important;
    top: -2%;
  }
}