/* ==================================================================
   --- CSS Reset ---
   ================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: #333;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #fff;
}


/* ==================================================================
   --- Common / Utitlity ---
   ================================================================== */

.container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.container--narrow {
    max-width: 784px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.section {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (min-width: 767px) {
    .section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.section-heading {
    width:230px;
    height:163px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
}

.section-heading::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 0px;
    left: 0px;
    z-index: -1;
}


.section-heading__en {
    font-size: 24px;
    font-weight: bold;
}
.section-heading__ja {
    font-size: 16px;
}

/* 次に、PC表示用の大きいサイズをメディアクエリで指定 */
@media (min-width: 767px) {
  .section-heading {
    width: 317px;
    height: 206px;
  }

  .section-heading__en {
    font-size: 32px;
  }

  .section-heading__ja {
    font-size: 20px;
  }
}

.section-heading--information { background-image: url('../images/heading-shape-information.svg');transform: translateY(-20px); }
.section-heading--about { background-image: url('../images/heading-shape-about.svg'); }
.section-heading--room { background-image: url('../images/heading-shape-room.svg'); }
.section-heading--facility { background-image: url('../images/heading-shape-facility.svg'); }
.section-heading--access { background-image: url('../images/heading-shape-access.svg'); }
.section-heading--contact { background-image: url('../images/heading-shape-contact.svg'); }

.divider {
    line-height: 0;
    position: relative;
    z-index: auto;
    background-repeat: no-repeat;
    margin-bottom: 0;
    height: 100px;
}

.divider2 {
    width: 100%;
    height: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 5;
}

.divider__image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

.divider--01 { 
    background-image: url('../images/divider-01-sp.svg');
    background-position: top center;
    background-color:#fff;
    background-size: 100% auto;
}

.divider--02 { 
    background-image: url('../images/divider-02-sp.svg');
    background-position: bottom center;
    padding-bottom: 65%; /* ▼▼▼ この行を追加 ▼▼▼ */
    margin-top:-80px;
}

@media (min-width: 767px) {
    .divider {
         height: 250px;
    }

    .divider__image {
         position: static;
         width: 100%;
         height: auto;
    }

    .divider--01 { 
         background-image: url('../images/divider-01-pc.svg');
    }

    .divider--02 { 
      background-image: url('../images/divider-02-pc.svg');
      padding-bottom: 20.83%;
      margin-top:0px;
    }
}

/* ==================================================================
   --- つなぎ目下のセクションの調整 ---
   ================================================================== */

.room, .facility, .access {
    padding-top: 0;
}
.room__inner, .facility__inner, .access__inner {
    margin-top: -100px;
}
@media (min-width: 1024px) {
    .room__inner, .facility__inner, .access__inner {
        margin-top: -150px;
        padding-bottom:30px;
    }
}

/* ==================================================================
   --- コンテンツの重なり順を最上位にする最終調整 ---
   ================================================================== */

.about__inner,
.room__inner,
.facility__inner,
.access__inner {
    position: relative;
    z-index: 10;
}

/* ==================================================================
   --- Page Top Button ---
   ================================================================== */

.page-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #16a6bd;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.page-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ==================================================================
   Layout: Header
   ================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #16a6bd;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 15px;
}

.header__pc-content {
  display: none;
}

.header__mobile-content {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo--mobile img {
  width: 125px;
  height: auto;
}

.header__mobile-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header__booking-btn--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 84px;
  padding-top:19px;
  background-color: #d71327;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  align-self: flex-start;
  position: relative;
  z-index: 1002;
}

.header__booking-btn--mobile i {
  font-size: 20px;
  margin-left: 8px;
}

/* ハンバーガーボタン (Flexbox版) */
.header__hamburger {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: #fff;
  transition: background-color 0.3s 0.1s ease-in-out;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 上の線 (::before) */
.header__hamburger span::before {
  content: '';
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: #fff;
  position: absolute;
  top: -9px;
  transition: top 0.3s 0.1s ease-in-out, transform 0.3s ease-in-out;
}

/* 下の線 (::after) */
.header__hamburger span::after {
  content: '';
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: #fff;
  position: absolute;
  top: 9px;
  transition: top 0.3s 0.1s ease-in-out, transform 0.3s ease-in-out;
}

/* is-open時のXアニメーション */
.header__hamburger.is-open span {
  background-color: transparent;
}

.header__hamburger.is-open span::before {
  top: 0;
  transform: rotate(45deg);
  height: 2px;
}

.header__hamburger.is-open span::after {
  top: 0;
  transform: rotate(-45deg);
  height: 2px;
}

/* モバイル用ナビゲーションパネル */
.header__nav-mobile {
  position: fixed;
  top: 50px;
  right: 0;
  width: 50%;
  height: calc(100vh - 50px);
  background-color: rgba(22, 166, 189, 0.90);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 40px;
  z-index: 1001;
}

.header__nav-mobile.is-open {
  transform: translateX(0);
}

.header__nav-mobile-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.header__nav-mobile-item a {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

@media (max-width: 766px) {
    .header__nav-mobile-item a {
        font-size: 18px;
    }
}

@media (max-width: 320px) {

    .header__logo--mobile img {
        width: 105px;
    }

    .header__mobile-controls {
        gap: 8px;
    }

}

/* =============================================
   PC用のスタイル (1024px以上) 
   ============================================= */

@media (min-width: 1024px) {
  .header {
    height: 63px;
  }
  
  .header__inner {
    height: 100%;
    padding: 0 40px;
  }

  .header__mobile-content,
  .header__nav-mobile {
    display: none;
  }

  .header__pc-content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .header__logo img {
    width: 181px;
    height: 44px;
    display: block;
  }
  
  .header__nav {
    margin-left: auto;
    margin-right: 30px;
  }

  .header__nav-list {
    display: flex;
    gap: 24px;
  }

  .header__nav-item a {
    color: #fff;
    font-size: 16px;
  }

  .header__booking-btn--desktop {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 84px;
    background-color: #d71327;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    padding-top: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .header__booking-btn--desktop br {
    display: none;
  }

  .header__booking-btn--desktop i {
    font-size: 28px;
    margin-left: 8px;
  }
}

/* ==================================================================
   --- Layout: Footer ---
   ================================================================== */

.footer {
    background-color: #16a6bd;
    color: #fff;
    padding: 40px 0;
    text-align: left;
}
.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.footer__logo img { width: 280px; margin: 0 auto; }
.footer__info {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0px;
}

.footer__address { margin-top:-5px; }
.footer__name { font-weight: bold; }
.footer__links { display: flex; flex-direction: column; gap: 5px; }
.footer__links a { text-decoration: none; }
.footer__copyright { margin-top: 30px; margin-left:20px; font-size: 15px; }

@media (min-width: 767px) and (max-width: 1023px) {

    .footer__inner {
        align-items: center;
    }

    .footer__info {
        text-align: center;
    }

    .footer__links {
        align-items: center;
    }

    .footer__copyright {
        text-align: center;
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .footer {
        padding-top: 50px;
        padding-bottom: 20px;
        text-align: center;
    }
    .footer__inner {
        max-width: 1280px;  
        height: 240px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 60px;
        align-items: center;
        text-align: left;
    }
    .footer__logo {
        margin: 0;
    }
    .footer__logo img {
        width: 372px;
    }
    .footer__info {
        padding: 0;
        text-align: left;
        gap: 20px;
        display: flex;
        flex-direction: column;
    }

    .footer__info p {
        margin: 0;
    }

    .footer__address { 
        margin-top:0px; 
    }
    .footer__links {
        flex-direction: row;
        gap: 40px;
    }
    .footer__links a {
        text-decoration: none;
    }
    .footer__copyright {
        text-align: right;
        padding-right: 100px;
        margin-left:0px;
        font-size: 13px;
    }
}

/* ==================================================================
   --- Sections ---
   ================================================================== */

/* Main Visual */
.main-visual {
    padding-top: 40px;
    background-color: #f7f8f9;
}
.main-visual__image-wrapper {
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .main-visual {
        padding-top: 68px;
    }
    .main-visual__image-wrapper {
        max-width: 1440px;
    }
}

/* Information */
.information {
    background-color:#f7f8f9;
    padding-bottom:0px;
}

.information.section {
    padding-top: 10px;
    padding-bottom: 60px;
    margin-bottom:0px;
}

.information__list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top:-60px;
}
.information__item a {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.information__item a::after {
    content: '';
    display: block;
    width: 30px;
    height: 12px;
    background-image: url('../images/icon-arrow-news.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    flex-shrink: 0;
}
.information__more-link {
    display: block;
    text-align: left;
    margin-top: 20px;
    text-decoration: underline;
}

@media (min-width: 767px) and (max-width: 1023px) {

    .information__list {
        margin-top: -20px;
    }

    .information__content {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 1024px) {

    .information.section {
        padding-top: 80px;
        padding-bottom: 70px;
        margin-bottom:0px;
    }

    .information__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 0;
        gap: 60px;
    }

   .information__list {
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-top:0px;
    }

    .information__inner .section-heading {
        margin: 0;
        flex-shrink: 0;
    }
    .information__content {
        margin-top: 0;
        width: 573px;
        flex-shrink: 0;
    }
}

/* About */
#about {
 z-index:10;
}

.about.section {
  margin-top:-70px;
  padding-bottom: 0px;
  padding-top:0px;
}

.about {
  background-color: #ffffff;
}

.section-heading--about {
  margin-bottom: 20px; /* 見出しと小見出しの間の余白 */
}

.about .container {
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
}

.about__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; /* 写真と見出しの間の距離 */
}

.about__image-wrapper {
    width: 100%;
}

.about__image-wrapper img {
    width: 100%;
}
.about__content {
    order: 0;
    margin-top:-20px;
    margin-bottom:0px;
}
.about__text-content {
    text-align: center;
    margin-top:-10px;
    padding-left:20px;
    padding-right:20px;
}
.about__title {
    color: #c3a54c;
    font-size: 23px; /* 小見出しフォントサイズ */
    font-weight: bold;
    line-height: 1.5;
}
.about__description {
    margin-top: 20px;
    margin-bottom:20px;
    font-size: 16px;
    text-align: left;
}

@media (max-width: 320px) {

   .about__title {
        font-size: 20px;
    }

    .divider--02 {
        padding-bottom: 75%;
    }

    .about.section {
        padding-bottom: 10px;
    }
}

@media (min-width: 767px) and (max-width: 1023px) {
    .about.section {
        margin-top: -150px;
        padding-bottom: 80px;
    }

    .about__image-wrapper {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .about__text-content {
        padding-left: 90px;
        padding-right: 90px;
    }
}

@media (min-width: 1024px) {
    .about.section {
        margin-top:-90px;
        padding-top: 0px;
        padding-bottom:50px;
    }
    .about {
        padding-top: 0px;
    }
    .about__inner {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start; 
        gap: 0px;
    }
    .about__image-wrapper {
        width: 600px;
        flex-shrink: 0;
        transform: translateY(-20px);
    }
    .about__content {
        order: 0;
        width: 520px;
        transform: translateY(20px);
        margin-top:0px;
    }

    .about__title {
        font-size: 30px;
        font-weight:bold;
    }

    .about__title-cross {
        display: inline-block;
        font-size: 38px;
        line-height: 1;
    }
}



.room {
    padding-left: 0;
    padding-right: 0;
    background-color: #f7f8f9;
}

.room::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7f8f9;
    z-index: -1; 
}

.room.section {
  padding-bottom: 50px;
}

.section-heading--room {
  margin-bottom: 0px;
}

.room__inner {
  margin-top: -100px;
}

.room-item {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

.room-item:first-of-type {
    margin-top: 25px !important;
}

.room .room-item {
    margin-top: 35px;
}

.room-item__slider-wrapper {
    position: relative;
    box-shadow: 0 20px 0 0 #cae7ed;
}

.room-item__text-content {
    padding: 10px 20px　0px　20px; 
    margin-top:10px;
}

.room-item__floor {
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px; /* 「1F」の右横の横線*/
}
.room-item__floor::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: #333;
    margin-right: 200px;
}
.room-item__title { 
    font-size: 24px; 
    font-weight: bold; 
    margin-top: -25px; /* 「1F」と「キッズスペース」の間の行間 */
}
.room-item__description { 
    margin-top: 10px; 
}

.room-slider .swiper-button-prev,
.room-slider .swiper-button-next {
    color: #fff;
    top: 48%;
}
.room-slider .swiper-pagination {
    bottom: 20px;
}
.room-slider .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.7;
    width: 8px;
    height: 8px;
    transition: width 0.3s ease;
}
.room-slider .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}

@media (max-width: 320px) {

    .room-item:first-of-type {
        margin-top: 25px !important;
    }
    .room .room-item {
        margin-top: 30px !important;
    }
}

@media (min-width: 767px) and (max-width: 1023px) {

    .room.section {
        padding-bottom: 40px;
    }

    .section-heading--room {
        margin-top: 40px;
        margin-bottom: 0;
    }

    .room-item {
        margin-top: 50px;
    }

    .room-item__text-content {
        padding-top:30px;
        padding-left: 60px;
        padding-right: 60px;
    }

    .room-item:first-of-type {
        margin-top: 40px !important;
    }
    .room .room-item {
        margin-top: 30px !important;
        margin-bottom:50px !important;
    }

}

@media (min-width: 1024px) {
    .room {
        position: relative; 
        padding-left: 0;
        padding-right: 0;
    }
    .room::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #f7f8f9;
        z-index: -1; 
    }

    .room__inner {
        margin-top: -170px;
    }

    .room-item:first-of-type {
        margin-top: 80px !important;
    }

    .room .room-item {
        margin-top: 150px;
    }

    .room-slider.swiper {
        height: 100%;
    }

    .room-item__slider-wrapper::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #cae7ed;
        z-index:-1;
    }

    .room-slider .swiper-slide {
        height: 100%;
    }
    .room-slider .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .room-slider .swiper-button-prev,
    .room-slider .swiper-button-next {
        color: #fff;
        top: 50%;
        transform: translateY(-50%);
    }
    .room-slider .swiper-pagination {
        bottom: 20px;
    }
    .room-slider .swiper-pagination-bullet {
        background-color: #fff;
        opacity: 0.7;
        width: 8px;
        height: 8px;
        transition: width 0.3s ease;
    }
    .room-slider .swiper-pagination-bullet-active {
        opacity: 1;
        width: 24px;
        border-radius: 4px;
    }
    .room-item {
        margin-top: 100px;
        flex-direction: row;
        align-items: center;
    }
    .room-item__slider-wrapper {
        width: 60%;
        height: 560px;
        position: relative;
        z-index: 2;
    }

    .room-item--image-left .room-item__slider-wrapper {
        position: relative;
        box-shadow: 
        0 15px 0 0 #cae7ed,
        15px 15px 0 0 #cae7ed;
    }

    .room-item--image-right .room-item__slider-wrapper {
        position: relative;
        box-shadow: 
        0 15px 0 0 #cae7ed,
        -15px 15px 0 0 #cae7ed;
    }

    .room-item__slider-wrapper .swiper {
        position: relative;
        z-index: 2;
        background-color: #fff;
    }

    .room-item__text-content {
        width: 370px;
        flex-shrink: 0;
        padding: 0;
        position: relative;
        z-index: 1;
        margin-top:0px;        
    }
    .room-item--image-left .room-item__slider-wrapper {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        overflow: hidden;
    }
    .room-item--image-left .room-item__slider-wrapper::before {
        top: 15px;
        left: 15px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .room-item__floor::after {
        content: '';
        flex-grow: 1;
        height: 1px;
        background-color: #333;
        margin-right: 0px;
    }
    .room-item--image-left .room-item__text-content { margin-left: 5%; }

    .room-item--image-right { flex-direction: row-reverse; }
    .room-item--image-right .room-item__slider-wrapper {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        overflow: hidden;
    }
    .room-item--image-right .room-item__slider-wrapper::before {
        top: 15px;
        right: -15px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .room-item--image-right .room-item__text-content { margin-right: 5%; }
}  

/* Facility */
.facility {
    background-color: #ffffff;
}

.facility.section {
  padding-bottom: 40px;
}

.facility__inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: -60px;
}
.facility__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom:20px;
    margin-top:-50px;
}

.facility__info p, .facility__sub-heading {
    padding-left: 15px;
    border-left: 8px solid #ef972d;
    text-align: left;
    font-weight: bold;
}
.facility__floormap-slider-wrapper {
    position: relative;
    padding: 0 30px;
    margin-top:-20px;
}

.facility-slider {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.facility-slider__pagination {
    position: static;
    margin-top: 20px;
}
.facility-slider__pagination .swiper-pagination-bullet {
    background-color: #333;
}
.facility-slider__pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    transition: width 0.3s;
}
.facility-slider__prev, .facility-slider__next {
    color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.facility-slider__prev {
    left: 0;
}
.facility-slider__next {
    right: 0;
}

.facility__grid {
    display: grid;
    row-gap: 20px;
    column-gap: 10px;
    margin-bottom: 0px;
}
.facility__grid:last-of-type {
    margin-bottom: 0;
}
.facility__grid--2col {
    grid-template-columns: repeat(2, 1fr);
}
.facility__grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.facility__grid-item {
    margin: 0;
}
.facility__grid-item img {
    border-radius: 0px;
    width: 100%;
    height: auto;
    display: block;
}
.facility__grid-item figcaption {
    margin-top: 8px;
    font-size: 14px;
    text-align: left;
}
.facility__amenities {
    text-align: left;
    line-height: 1.8;
    margin-top: -10px;
    margin-bottom:0px;
}

@media (min-width: 767px) and (max-width: 1023px) {

    .facility__inner {
        margin-top: -140px;
        margin-bottom:30px;
    }

}

@media (min-width: 1024px) {
    .facility__floormap-slider-wrapper {
        padding: 0;
        padding-bottom:50px;
        margin-top:0px;
    }

    .facility__info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding-bottom:20px;
        margin-top:-30px;
    }

    .facility-slider {
        width: 100%;
    }

    .facility-slider__prev {
        left: -40px;
    }
    .facility-slider__next {
        right: -40px;
    }
    .facility__grid {
        row-gap: 30px;
        padding-left: 0;
        column-gap: 20px;
        margin-bottom: 20px;
    }

    .facility__grid-item img {
        border-radius: 10px;
    }  
    .facility__amenities {
        text-align: left;
        line-height: 1.8;
        margin-top: -30px;
        margin-bottom:0px;
    }
}

/* Access */
.access {
    background-color: #f7f8f9;
    margin-top: -100px;
    padding-top: 0px;
}
.access__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.access__info-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top:-20px;
}
.access__info {
    position: relative;
    padding-left: 25px;
    display: inline-block;
}

.access__info::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 80%;
    background-color: #b44092;
}

.access__address { margin-bottom: 10px; }
.access__station { white-space: nowrap; }
.access__map {
    margin-top: 40px;
    width: 100%;
    height: 400px;
}
.access__map iframe { width: 100%; height: 100%; }

@media (min-width: 767px) and (max-width: 1023px) {

    .section-heading--access {
        margin-top: 30px;
        margin-bottom: 50px;
    }
}

@media (min-width: 1024px) {
    .access {
        margin-top:  0px;
        padding-top: 0px;
    }

    .access__inner {
        margin-top: -170px;
    }

    .access__info-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top:-10px;
    }

    .access__train br { display: none; }
    .access__map { height: 590px; }
    }

/* =================================================
  Contact Form 7 お問い合わせフォーム スタイル
==================================================== */

/* セクション全体の背景色など */
.contact {
    background-color: #f7f8f9;
	margin-top:-120px;
	padding-bottom: 120px;
}

/* フォーム全体 */
.wpcf7-form {
    margin-top: -20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 各フォーム項目 */
.wpcf7-form .contact-form__item {
    display: flex;
    flex-direction: column;
}

/* ラベル */
.wpcf7-form .contact-form__label {
    margin-bottom: 8px;
}

/* 入力欄（input, textarea） */
.wpcf7-form .contact-form__input,
.wpcf7-form .contact-form__textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    box-sizing: border-box;
}

.wpcf7-form .contact-form__textarea {
    height: 150px;
    resize: vertical;
}

/* --------------------------------------------------
   ★★★ 送信ボタンとアイコン表示（新方式）★★★
----------------------------------------------------- */

/* 送信ボタンの【外側のコンテナ】 */
/* このコンテナをFlexboxにして、中身を確実に中央寄せします */
.wpcf7-form .contact-form__submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

/* 【重要】アイコン用のラッパー(span)をボタンそのものに見せる */
.wpcf7-form .contact-form__submit .submit-icon-wrapper {
    position: relative; /* アイコンを配置する基準点 */
    display: inline-block; /* ブロック要素として振る舞わせる */
    
    /* ボタンの見た目をspanに適用 */
    background-color: #ff5353;
    border-radius: 30px;
    padding: 8px 20px 12px 70px; /* アイコン用のスペースも確保 */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wpcf7-form .contact-form__submit .submit-icon-wrapper:hover {
    background-color: #e64a4a;
}

/* 【アイコン本体】を疑似要素(::after)で表示 */
/* このspanがボタンなので、アイコンは確実に内側に表示されます */
.wpcf7-form .contact-form__submit .submit-icon-wrapper::after {
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 27px;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 【重要】本来の送信ボタン(input)は「透明」にする */
.wpcf7-form .contact-form__submit-btn {
    /* 見た目を完全に消す */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    
    /* テキストの色とフォントサイズは残す */
    color: #fff;
    font-size: 20px;
    
    /* OSのデフォルトスタイルを無効化 */
    -webkit-appearance: none;
    appearance: none;
    
    /* 親要素(span)のcursorを継承 */
    cursor: pointer;
}


/* --------------------------------------------------
  レスポンシブ対応
----------------------------------------------------- */
@media (min-width: 1024px) {
    .contact {
        padding-bottom: 180px;
    }  
	.wpcf7-form {
        margin-top: 60px;
    }
    .wpcf7-form .contact-form__item {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    .wpcf7-form .contact-form__label {
        width: 152px;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .wpcf7-form .contact-form__item .wpcf7-form-control-wrap {
        flex-grow: 1;
    }
}

/* ==================================================================
   --- Common Page Layout ---
   ================================================================== */

.page-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 120px 40px 100px;
}

.breadcrumbs {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.breadcrumbs a {
    text-decoration: underline;
    color: #333;
}
.breadcrumbs a:hover {
    text-decoration: none;
}

.page-title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    /* ▼ 修正1: パンくずメニューとの距離を広げるため、上のマージンを追加 ▼ */
    margin-top: 30px;
    margin-bottom: 30px;
}

.page-divider {
    border: none;
    /* ▼ 修正2: 罫線の色を黒色に変更 ▼ */
    border-top: 1px solid #000;
    margin-bottom: 50px;
}


/* ==================================================================
   --- Page Content ---
   ================================================================== */
.page-content {
    line-height: 1.8;
}

.page-content p,
.page-content ol,
.page-content ul {
    margin-bottom: 2em;
}

.page-content h2 {
    font-size: 22px;
    font-weight: bold;
    /* ▼ 修正5: 各小見出し項目間の余白を狭める ▼ */
    margin-top: 2em;
    /* ▼ 修正4: 小見出しと下の文章の間の余白を狭める ▼ */
    margin-bottom: 0.5em;
    /* ▼ 修正3: 下の罫線を削除 ▼ */
    border-bottom: none;
    padding-bottom: 0;
}

.page-content h3 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 1em;
}

.page-content ol,
.page-content ul {
    padding-left: 2em;
}

.page-content ol {
    list-style-type: none;
    counter-reset: item;
}

.page-content ol > li {
    margin-bottom: 1em;
}

.page-content ul > li {
    list-style-type: disc;
    margin-bottom: 1em;
}


/* ==================================================================
   --- Responsive (for Smartphone) ---
   ================================================================== */
@media (max-width: 767px) {
    .page-container {
        padding: 80px 20px 60px;
    }

    .page-title {
        font-size: 24px;
    }

    .page-divider {
        margin-bottom: 30px;
    }

    .page-content h2 {
        font-size: 20px;
    }

    .page-content h3 {
        font-size: 16px;
    }
}

/* ==================================================================
   --- News List Page ---
   ================================================================== */

.news-list {
    margin-bottom: 60px;
}

.news-item a {
    display: block;
    padding: 15px 10px;
    transition: background-color 0.2s;
}

.news-item a:hover {
    background-color: transparent;
}

.news-item__date {
    display: block;
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.news-item__title {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

.news-item__divider {
    border: none;
    border-top: 1px solid #000;
    margin: 0;
}


/* ==================================================================
   --- Pagination (お知らせ一覧ページ送り) ---
   ================================================================== */

/* ページネーション全体のラッパー */
.pagination {
    margin-top: 60px;
    /* この要素はFlexコンテナである必要はない */
}

/* ★★★ ここが最重要ポイント ★★★ */
/* WordPressが生成するFlexコンテナ */
.pagination .nav-links {
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: center;
}

/* ページ番号の共通スタイル */
.pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #333;
    border: none;
    border-radius: 0;
    background-color: transparent;
    margin: 0;
    text-decoration: none; /* aタグの下線を消す */
}

/* 項目間のマージンはgapプロパティがモダンでおすすめです */
.pagination .nav-links {
    gap: 0px; /* お好みの距離に調整してください */
}
/* もしgapが使えない古いブラウザをサポートする場合、以下のmarginを使います */
/*
.pagination .page-numbers + .page-numbers {
    margin-left: 0px;
}
*/

/* ホバーエフェクトは無効化 */
.pagination .page-numbers:hover {
    background-color: transparent;
}

/* 現在表示中のページ番号 */
.pagination .page-numbers.current {
    background-color: transparent;
    border: none;
    color: #6b95ad;
    font-weight: bold;
}

/* 「...」のスタイル */
.pagination .page-numbers.dots {
    color: #333;
    font-weight: bold;
}

/* 矢印（次へ・前へ）のラッパー */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
    width: auto;
    height: auto;
}

/* 矢印の画像 */
.pagination .next img {
    width: 30px;
    height: 12px;
}
/* 前への矢印も同様に設定（必要に応じて） */
.pagination .prev img {
    width: 30px;
    height: 12px;
}

/* ==================================================================
   --- PC Only Adjustments ---
   ================================================================== */
@media (min-width: 768px) {
    .page-divider {
        margin-bottom: 0px;
    }

    .news-item a {
        padding-top: 40px;
        padding-bottom: 60px;
    }
}


/* ==================================================================
   --- Responsive (for Smartphone) ---
   ================================================================== */
@media (max-width: 767px) {

    .page-title {
        margin-bottom: 20px;
    }
    .page-divider {
        margin-bottom: 0px;
    }      
    .news-item__title {
        font-size: 16px;
    }
    .pagination .page-numbers {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

}

/* ==================================================================
   --- News Single Page: Article (Base Styles for PC) ---
   ================================================================== */

.news-article {
    margin-top: 60px;
}

.news-article__date {
    font-size: 16px;
    margin-bottom: 15px;
    display: block;
}

.news-article__title {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.6;
}

.news-article__divider {
    border: none;
    border-top: 1px solid #000;
    margin: 40px 0;
}

.news-article__body {
    font-size: 16px;
    line-height: 2.2;
}
.news-article__body p {
    margin-bottom: 2em;
}

/* 1. 「ご予約はこちらから」下の距離を空ける */
.news-article__body p:last-child {
    margin-bottom: 4em;
}

/* 2. 「お知らせ一覧へ」の上下の余白を狭める */
.news-article__back-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    padding: 10px 0;
}
.news-article__back-link img {
    width: 30px;
    height: auto;
    flex-shrink: 0;
}

/* ==================================================================
   --- News Single Page: Other News (Base Styles for PC) ---
   ================================================================== */
.other-news {
    background-color: #f7f8f9;
    padding: 80px 0;
}

.other-news__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.other-news__title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}

/* 4. グレー背景内の記事一覧の罫線を消す */
.other-news-item {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 15px 0;
    border-bottom: none;
}
.other-news-item:first-of-type {
    border-top: none;
}

.other-news-item:hover .other-news-item__title {
    text-decoration: underline;
}

.other-news-item__date {
    font-size: 16px;
    flex-shrink: 0;
}
.other-news-item__title {
    font-size: 16px;
    line-height: 1.6;
}


/* ==================================================================
   --- Spacing Adjustments ---
   ================================================================== */

/* 3. お知らせ一覧へ下の罫線からグレー背景までの余白を狭める */
/* page.cssの指定を上書きするため、このファイルで再定義します */
.page-container {
    padding-bottom: 60px;
}


/* ==================================================================
   --- Responsive (for Smartphone) ---
   ================================================================== */
@media (max-width: 767px) {
    .news-article {
        margin-top: 40px;
    }

    .news-article__title {
        font-size: 22px;
    }
    
    .news-article__divider {
        margin: 25px 0;
    }
    
    .news-article__body {
        line-height: 2;
    }

    /* 3. スマホ表示での余白調整 */
    .page-container {
        padding-bottom: 40px;
    }

    .other-news {
        padding: 60px 0;
    }
    .other-news__inner {
        padding: 0 20px;
    }
    .other-news__title {
        font-size: 18px;
    }

    .other-news-item {
        gap: 15px;
        padding: 10px 0;
    }
    .other-news-item__date {
        font-size: 14px;
    }
    .other-news-item__title {
        font-size: 14px;
    }
}

/* =================================================
  確認画面機能のための追加CSS
==================================================== */

/* --- 1. 入力欄の間の余白を確保 --- */
.form-step1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-step2 {
    display: none;
}

/* --- 2. フォームとボタンの間の距離を調整 --- */
.wpcf7-form .contact-form__submit {
    margin-top: 0px;
}

/* --- 3. 「修正する」ボタンの初期状態とデザイン --- */
.btn-back {
    display: none;
}
.wpcf7-form.is-confirm .btn-back {
    display: inline-block;
}
.btn-back {
    position: relative;
    background-color: #888;
    border-radius: 30px;
    color: #fff;
    font-size: 20px;
    padding: 10px 40px; /* テキストが短いため、送信ボタンと幅を合わせるためにpaddingを調整 */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
}
.btn-back:hover {
    background-color: #666;
}

/* --- 4. 確認モード時の表示切り替え --- */
.wpcf7-form.is-confirm .form-step1 {
    display: none;
}
.wpcf7-form.is-confirm .form-step2 {
    display: block;
}

/* --- 5. PC表示の確認画面でボタン間に余白を追加 --- */
.wpcf7-form.is-confirm .contact-form__submit {
    gap: 25px; /* is-confirmモードの時だけボタン間に25pxの余白を設ける */
}

/* --- 6. スマホ表示の調整 (767px以下) --- */
@media screen and (max-width: 767px) {
    /* is-confirmモードの時だけ、ボタンの親コンテナを縦並びにする */
    .wpcf7-form.is-confirm .contact-form__submit {
        flex-direction: column; /* アイテムを縦方向に配置 */
        align-items: center;    /* アイテムを中央揃えにする */
        gap: 15px;              /* 縦に並んだボタンの間の隙間 */
    }
	
.btn-back {
	    padding: 10px 80px;
	}
    /*
     * これが今回の最重要ポイントです。
     * 確認画面のボタンに `width` を指定しないことで、
     * 各ボタンが自身のコンテンツとpaddingに基づいた「自然な幅」を保ちます。
     * これにより、最初の画面のボタンの幅と視覚的に完全に揃います。
     */
}