@charset "utf-8";

/* ロゴ画像サイズ調整 */
.logo-img {
  width: 100px;
  height: 100px;
}

/* SPのみ */
@media screen and (max-width: 768px) {
  .logo-img {
    width: 40px !important;
    height: 40px !important;
  }
}


/*==========================
common
==========================*/
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Zen Maru Gothic','Tsukushi A Round Gothic';
    font-style: normal;
    color: #2F2F2F;
    background-color: #fff;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- layout guard: prevent horizontal overflow --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

@keyframes fadeDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}



/*==========================
header/pc
==========================*/
/* 下のコンテンツが隠れないように調整 */

@media screen and (min-width:769px) {
.body {
  padding-top: 120px;  /* headerの高さ分を確保（実際の高さに合わせて調整） */
}
  .header {
        max-width: 1440px;
        margin: 0 auto;
        padding: 10px 60px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;   /* 画面に固定 */
        top: 0;            /* 上にぴったり */
        left: 0;
        right: 0;
        z-index: 1000;     /* コンテンツより前に出す */
        background: #fff;  /* 背景色（必須、透け防止） */
        max-width: 1440px; /* 中央寄せを残したいなら */

    }

.header__topic{
    color: #000;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1;
    }

.nav {
     position: static !important;
    transform: none !important;
    transition: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: auto !important;
    display: flex !important; /* 念のため */
    align-items: center;
    justify-content: flex-start;
    }

  .nav__header { display: none !important; }
  .nav__list { 
    margin-top: 0 !important;
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

.nav__list::after{
    display: none !important;
    content: "";
    width: 100%;
    height: 1px;
    margin: 16px 0;
  }
    
.nav__item {
    align-items: center; 
    font-weight: 700;
    color: #2F2F2F;
    display: flex;
    width: auto ;
    margin-top: 0;
    line-height: 1.3;
    margin-left: 32px;
    vertical-align: middle;
    gap: 10px;
  }

.nav__item a {
  color: #2F2F2F; /* 通常時の文字色 */
  text-decoration: none; /* 必要なら下線を消す */
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.03em; /* わずかに間隔を広げて視認性UP */
  font-size: clamp(1.2rem, 1.25vw, 2rem);}

.nav__item a:hover {
  color: #C5956B; /* ホバー時の文字色 */
}

.nav__item--reserve a {
  text-shadow: none;
}

.nav__item--reserve a:hover {
  text-shadow: none;
}

  .nav.active { transform: none !important; }


.mainImg__sp {
  display: none;
 }

.mainImg__pc {
  position: relative;
  z-index: 1;
 }

.btn--reserve {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 175px;
  height: 105px;
  background: url(../images/reservebox.png) center/cover no-repeat;
  text-decoration: none;
  color: #fff;
  position: relative; /* absoluteを解除 */
  z-index: 1;         /* 必要ならば */
}

.nav .nav__item--reserve .btn--reserve:hover {
    background-color: #8B5A2B; /* 好きな茶色に変更可能 */
    transition: background-color 0.3s ease; /* なめらかに変化 */
  }

.nav__item img {
    display: none;
  }

.btn--reserve:hover {
  background: #C5956B; /* 背景色変更 */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15)
}

.reserve-en {
  font-size: 2rem;
  color:#ffffff ;
}

.reserve-ja {
  font-size: 1.6rem;
  color:#ffffff ;
}

 .header__btn { display: none !important; }

.mainImg {
    position: relative;
}

.mainImg img {
  position: relative;
  margin-top: 115px;
}

.mainImg__wrapper {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  z-index: 999;        /* 画像(1)より前に */
  pointer-events: none;
  transform: none;   
}

.mainImg__copysub {
  position: absolute;
  font-family: "Zen Maru Gothic";
  font-weight: bold;
  text-align: right;
  color: #ffffff;
  line-height: 1.4;
  z-index: 1000; /* 確実に画像より前 */
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeDown 1800ms ease-out 250ms forwards;
  top: 72%;
  right: 62%;
  font-size: clamp(1.8rem, 2.5vw, 4.5rem);
}

.mainImg__copy {
  position: absolute;
  font-family: "Zen Maru Gothic";
  font-weight: bold;
  text-align: right;
  color: #ffffff;
  line-height: 1.4;
  z-index: 1000; /* 確実に画像より前 */
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeDown 1800ms ease-out 250ms forwards;
  top: 74%;
  right: 9%;
  font-size: clamp(5rem, 11vw, 16rem);
}
}

/* ==========================
   1440px以上は 1440px時の見た目で固定
   ========================== */
@media screen and (min-width: 1440px) {

  /* レイアウト幅を固定して中央寄せ */
  .header,
  .container,
  .info-card,
  .section--lineUp,
  .lineUp,
  .container--price,
  .outer-border,
  .content-wrapper,
  .main-card {
    width: 1440px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ヘッダー（固定配置は維持） */
  .header {
    left: 0;
    right: 0;
  }

  /* 見出し・サブ見出し（clampの最大値で固定） */
  .main-header2 h1 { font-size: 100px; line-height: 111px; }
  .main-header2 .subtitle2 { font-size: 30px; }

  /* ナビ：1440px時の基準サイズで固定 */
  .nav__item a { font-size: 2rem; }

  /* トップコピー（clampの最大値で固定） */
  .mainImg__copy    { font-size: 16rem; }
  .mainImg__copysub { font-size: 4.5rem; }

  /* ルーム一覧カードのテキスト */
  .lineUp__name { font-size: 1.9rem; }
  .lineUp__txt  { font-size: 1.3rem; }

  /* 情報カード内のタイトル/本文（流体→固定） */
  .section-title   { font-size: 17px; line-height: 30px; }
  .section-content { font-size: 18px; line-height: 30px; }

  /* セクション別の位置・幅も1440px時点で固定 */
  .section-1 { margin-left: 90px; }
  .section-1 .section-title  { width: 137px; left: -10px;}
  .section-1 .section-content{ left: 121px; width: 340px; }

  .section-2 .section-title  { width: 91px;  }
  .section-2 .section-content{ left: 119px; width: 326px; font-size: 18px; }

  .section-3 .section-title  { width: 66px;  }
  .section-3 .section-content{ left: 93px;  width: 326px; font-size: 18px; }

  /* 料金ボード（clampの最大値で固定） */
  .prices-title     { font-size: 70px;  letter-spacing: 0.15em; line-height: 111px; }
  .description-text { font-size: 30px;  line-height: 1.5; }
  .button-text      { font-size: 22px; }

  /* 画像コピーなど絶対配置の位置指定が%でも拡大はしない
     必要なら top/right を固定値に変えるが、現状の%指定でOK */
}


/*==========================
header/pc
==========================*/
/*==========================
header/sp
==========================*/
@media screen and (max-width: 768px) {
.header {
    max-width: none;
    width: 100vw ;
    margin: 0 ;
    padding-left: 0;
    padding-right: 0 ;
}

.header__topic,
.nav__topic {
    color: #000;
    font-weight: 700;
    font-size: 2.4rem;
}

.header__topic {
    padding-left: 6.4%;
  }

/* .nav初期表示 */
.nav {
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100vh;
    padding: 24px 6.4%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
    display: block; /* メニュー全体を1カラム表示 */
  }

.nav__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 左ロゴ／右×ボタン */
    padding: 12px 6.4%;
  }

.nav__list { display: block; margin-top: 43px;}
.header__btn {
    display: block;
    width: 18px;
    height: 12px;
    cursor: pointer;
    position: absolute;
    top: 37px;
    right: 6.4%;
  }

.nav__item:first-child {
    margin-top: 50px; /* 小さめの値に調整 */
}


.nav__item {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: #2F2F2F;
    margin-top: 24px;
}

.nav__item img {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 24px;
     width: 22px;     /* 好きなサイズに調整 */
    height: 25px;    /* 縦横をそろえる */
    object-fit: contain; /* アイコンの比率を維持しつつ収める */
    margin-right: 22px;  /* テキストとの間隔 */
    vertical-align: middle;
}

/* .nav.active表示 */
.nav.active {
    transform: translateX(0);
}

.nav__logo {
    position: absolute;
  top: -16px;
  left: -3.5%;
  width: 43px;
  height: auto;
  }

.nav.active + .header__btn {
  display: none !important;
}

.nav__btn{
   position: absolute;
   width: 18px;
   height: 25px;
   flex: 0 0 auto;
   z-index: 2; 
   top: -4px;
   right: 0.4%;
}

.mainImg {
  position: relative;
    display: flex;
    flex-direction: column;
    margin-top: -20px;  /* 好きな分だけ上へ */
    padding-top: 0;
  }

.mainImg__wrapper {
    position: static;      
    display: flex;
    flex-direction: column; 
  }

.mainImg__pc {
  display: none;
 }

 .mainImg__sp {
     position: relative;
    width: 100%;
    max-width: 100vw;
    aspect-ratio: 1 / 1; /* 幅:高さ = 1:1 */
    height: auto;
    margin: 0 auto;
    z-index: 1;
    top: 0;
    transform: translateY(4px);
    object-fit: cover;
 }

 .mainImg__copysub{
  display: none;
 }

 .mainImg__copy{
  order: 2;
  font-family: 'Zen Maru Gothic', Helvetica, sans-serif;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.24);
  font-size: 100px;
  text-align: center;
  line-height: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 5%;
  position: absolute;
  z-index: 2;
  text-align: center;
  transform: translateX(50%);
  bottom: -39px;
  transform: translateY(28%); 
  margin: 0 auto;                 /* 中央寄せ */
  padding: 0;
  width: auto; 
  opacity: 1;
  animation: none;                    /* 固定幅を外す */
  max-width: 92vw;
  height: auto;                    /* 固定高さを外すのが重要！ */
  font-size: clamp(48px, 22vw, 96px);
 }

  .header {
    padding: 0 !important;
  }
  .header__topic {
    padding: 12px 12px;          /* ロゴがギリ触れない程度の最小余白（不要なら0に） */
  }
  .header__btn {
    top: 24px !important;
    right: 24px !important;
  }

  .nav .nav__item--reserve {
    margin-top: 24px;
    text-align: left; /* 左寄せにしたい場合。中央なら center */
    margin-left: 0px;
  }

  .nav .nav__item--reserve .btn--reserve {
    display: inline-flex;          /* 中身に合わせる */
    align-items: center;
    justify-content: center;
    width: auto !important;        /* 横幅100%を解除 */
    min-width: auto;
    height: auto;
    padding: 10px 16px;             /* ボタン内の余白 */
    border-radius: 9999px;          /* 丸みを強調 */
    white-space: nowrap;            /* 改行防止 */
    font-size: 1.6rem;
  }

  .nav .nav__item--reserve .btn--reserve:hover {
    background-color: #8B5A2B; 
    transition: background-color 0.3s ease; /* なめらかに変化 */
  }

  .nav .nav__item--reserve .reserve-en {
    display: none; /* 英語表記を隠す */
  }

  .nav .nav__item--reserve .reserve-ja {
    font-size: 1.6rem;
  }

  /* a に width:100% が既存で当たっている場合の保険 */
  .nav .nav__item--reserve a {
    width: auto !important;
  }
}

/* === SPナビのリンク色を #375D3D に固定（visitedも含めて） === */
@media screen and (max-width: 768px) {
  /* 予約ボタン以外のリンクを #375D3D に固定 */
  .nav__list a:not(.btn--reserve),
  .nav__list a:not(.btn--reserve):link,
  .nav__list a:not(.btn--reserve):visited,
  .nav__list a:not(.btn--reserve):hover,
  .nav__list a:not(.btn--reserve):active {
    color: #594650 !important;
    text-decoration: none;
  }

  /* 予約ボタンは白文字を維持 */
  .nav__item--reserve a.btn--reserve {
    color: #fff !important;
  }
}

/* ===== PC：431〜768px===== */
@media (min-width:431px) and (max-width:768px) {
       .mainImg__copy {
        transform: translateY(8%);
        font-size: clamp(48px, 22vw, 145px);
    }
  }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__item a {
  text-decoration: none;
}

/*==========================
header/sp
==========================*/

/*==========================
about/pc
==========================*/
.frame {
  position: relative;
  width: 100%;
  max-width: 1347px;
  margin: 0 auto;
}

.about-scale { width: 1260px; margin: 0 auto; }

/* 769–1260px：そのまま縮小表示 */
@media (max-width:1260px) and (min-width:769px){
  .about-scale-wrap{
    position: relative;
  }
  .about-scale{
    transform: none; /* ← scaleを無効化 */
    width: min(100%, 1260px);
    margin: 0 auto;
  }
}

.main-header {
  position: relative;
  width: 566px;
  height: auto; /* 高さは内容に合わせる */
  top: auto;
  margin-top: 60px;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
  margin-left: 50px;
}

.main-header h1 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 100px);
  letter-spacing: 7px;
  line-height: 111px;
  margin: 0;
}

.main-header .subtitle {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: clamp(18px, 2vw, 30px); 
  margin-top: 10px; /* 適度な余白 */
  margin-left: 5px;
}

/* about1 */

.section-01-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  left: 54px;
  position: relative;
  padding-right: 60px;
  box-sizing: border-box;
  margin-top: 60px;
  transform: none;
}

.section-01 {
  position: relative;
  width: 432px;
  height: 331px;
}

.section-number {
  position: absolute;
  width: 336px;
  height: 100px;
  top: 0;
  left: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  font-size: clamp(80px, 9vw, 130px);
  letter-spacing: 9.1px;
  line-height: 79px;
}

.section-title1 {
  position: absolute;
  width: 424px;
  height: 140px;
  top: 115px;
  left: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: clamp(30px, 4vw, 55px);
  letter-spacing: 3.85px;
  line-height: 70px;
  margin: 0;
}

.separator {
  position: absolute;
  width: 400px;
  height: 5px;
  top: 288px;
  left: 5px;
  background-color: #e5e7eb;
}

.description {
  position: absolute;
  width: 505px;
  height: 99px;
  top: 326px;
  left: 14px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  color: black;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.5;
  margin: 0;
}

.section-01-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 190px;
  object-fit: cover;
}

@media (max-width: 1400px) {
  .frame {
    max-width: 100%;
    padding: 0 20px;
  }
  }

/* about2 */

.section-02-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px; /* テキストと画像の間隔 */
  left: 8px;
  padding-right: 60px; /* 右端に空白 */
  box-sizing: border-box;
  margin-top: 96px;
  transform: none;
}

.section-02 {
  position: relative;
  width: 432px;
  height: 331px;
  transform: translateY(-80px);
}

.section-two {
  position: absolute;
  width: 336px;
  height: 100px;
  top: 0;
  left: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  font-size: clamp(80px, 9vw, 130px);
  letter-spacing: 9.1px;
  line-height: 79px;
}

.section-title2 {
  position: absolute;
  width: 424px;
  height: 140px;
  top: 115px;
  left: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: clamp(30px, 4vw, 49px);
  letter-spacing: 3.85px;
  line-height: 70px;
  margin: 0;
}

.separator2 {
  position: absolute;
  width: 400px;
  height: 5px;
  top: 288px;
  left: 5px;
  background-color: #e5e7eb;
}

.description2 {
  position: absolute;
  width: 505px;
  height: 99px;
  top: 326px;
  left: 14px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  color: black;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.5;
  margin: 0;
}

.section-02-image {
  width: 750px;
  transform: translateY(-170px); /* ← 上方向に移動 */
}

.section-02-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 190px;
  object-fit: cover;
}

@media (max-width: 1400px) {
  .frame {
    max-width: 100%;
    padding: 0 20px;
  }
  }

  /* about3 */
.section-03-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px; /* テキストと画像の間隔 */
  left: 54px;
  padding-right: 60px; /* 右端に空白 */
  box-sizing: border-box;
  transform: none;
  position: relative;
}

.section-03 {
  position: relative;
  width: 432px;
  height: 331px;
}

.section-three {
  position: absolute;
  width: 336px;
  height: 100px;
  top: 0;
  left: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
  font-size: clamp(80px, 9vw, 130px);
  letter-spacing: 9.1px;
  line-height: 79px;
}

.section-title3 {
  position: absolute;
  width: 424px;
  height: 140px;
  top: 115px;
  left: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: clamp(30px, 4vw, 55px);
  letter-spacing: 3.85px;
  line-height: 70px;
  margin: 0;
}

.separator3 {
  position: absolute;
  width: 400px;
  height: 5px;
  top: 288px;
  left: 5px;
  background-color: #e5e7eb;
}

.description3 {
  position: absolute;
  width: 505px;
  height: 99px;
  top: 326px;
  left: 14px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  color: black;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.5;
  margin: 0;
}

.section-03-image {
  width: 750px;
  transform: translateY(0);
}

.section-03-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 190px;
  object-fit: cover;
}

@media (max-width: 1400px) {
  .frame {
    max-width: 100%;
    padding: 0 20px;
  }
  }
  

/* デザイン崩れ防止 */
.section-01-image {
  /* 横幅：750/1440 = 0.520833... → 52.0833vw */
  width: clamp(400px, 52.0833vw, 750px);

  /* 調整用のカスタムプロパティ（必要な時だけ上書き） */
  --x-adjust: 0vw;   /* 例: 0.5vw で少し右へ、-0.5vw で少し左へ */
  --y-adjust: 0px;   /* 例: 8px で下へ、-8px で上へ */
}

.section-01-image img {
  width: 100%;     /* 親幅に追従 */
  height: auto;
  display: block;
  border-radius: clamp(80px, 13.2vw, 190px); /* 190px ÷ 1440px ≒ 13.2% */
  object-fit: cover;
}

/* =========================
   固定値を当てたいブレイクポイント
   ========================= */

/* 1024pxのとき */
@media (min-width: 769px) and (max-width: 1024px) {
  .section-01-image {
    --x-adjust: -5px;
    --y-adjust: 117px;
  }
}

/* 1280pxのとき */
@media (min-width: 1025px) and (max-width: 1280px) {
  .section-01-image {
    --x-adjust: 75px;
    --y-adjust: 75px;
  }
}

/* 1440pxのとき */
@media (min-width: 1281px) and (max-width: 1440px) {
  .section-01-image {
    --x-adjust: 150px;
    --y-adjust: 48px;
  }
}

/* 1441px以上は固定サイズ（1440px時の値で止める） */
@media (min-width: 1440px) {
  .section-01-image {
   width: 750px;
        transform: translateX(-30px);
        margin-top: -170px;
  }
  .section-01-image img {
    border-radius: 190px; /* 1440px時と同じ角丸 */
  }
}

.section-02-image {
  /* 横幅：750/1440 = 0.520833... → 52.0833vw */
  width: clamp(400px, 52.0833vw, 750px);

  /* 調整用のカスタムプロパティ（必要な時だけ上書き） */
  --x-adjust: 0vw;   /* 例: 0.5vw で少し右へ、-0.5vw で少し左へ */
  --y-adjust: 0px;   /* 例: 8px で下へ、-8px で上へ */

  /* 位置：比率 + 任意の微調整 */
  transform:
    translateX(calc(-8.3333vw + var(--x-adjust)))  /* 120/1440*100 = 8.3333 */
    translateY(calc(-11.8056vw + var(--y-adjust)));/* 170/1440*100 = 11.8056 */
}

.section-02-image img {
  width: 100%;     /* 親幅に追従 */
  height: auto;
  display: block;
  border-radius: clamp(80px, 13.2vw, 190px); /* 190px ÷ 1440px ≒ 13.2% */
  object-fit: cover;
}

/* =========================
   固定値を当てたいブレイクポイント
   ========================= */

/* 1024pxのとき */
@media (min-width: 769px) and (max-width: 1024px) {
  .section-02-image {
    --x-adjust: 95px;
    --y-adjust: 70px;
    margin-top: 40px;
  }

  .section-02 {
    position: relative;
    width: 432px;
    height: 331px;
    transform: translateY(-58px);
  }
}

/* 1280pxのとき */
@media (min-width: 1025px) and (max-width: 1280px) {
  .section-02-image {
    --x-adjust: 110px;
    --y-adjust: 90px;
  }
  .section-02{
    transform: translateY(-55px);
  }
}

/* 1440pxのとき */
@media (min-width: 1281px) and (max-width: 1440px) {
  .section-02-image {
    --x-adjust: 40px;
    --y-adjust: 48px;
        transform: translateX(calc(-9.3333vw + var(--x2-adjust, 8vw)));
    margin-top: calc(-3.8056vw + var(--y2-adjust, 0px));
  }
  .section-02{
    margin-top: 38px;
    
  }
}

/* 1441px以上は固定サイズ（1440px時の値で止める） */
@media (min-width: 1440px) {
  .section-02-image {
    width: 750px;
        transform: translateX(-29px);
        margin-top: -40px;
  }
  .section-02 {
    margin-top: 38px;
    transform: translateY(-55px); /* 1440px時と同じ */
  }
  .section-02-image img {
    border-radius: 190px;
  }
}

.section-03-image {
  /* 横幅：750/1440 = 0.520833... → 52.0833vw */
  width: clamp(400px, 52.0833vw, 750px);

  /* 調整用のカスタムプロパティ（必要な時だけ上書き） */
  --x-adjust: 0vw;   /* 例: 0.5vw で少し右へ、-0.5vw で少し左へ */
  --y-adjust: 0px;   /* 例: 8px で下へ、-8px で上へ */

  /* 位置：比率 + 任意の微調整 */
  transform:
    translateX(calc(-8.3333vw + var(--x-adjust)))  /* 120/1440*100 = 8.3333 */
    translateY(calc(-11.8056vw + var(--y-adjust)));/* 170/1440*100 = 11.8056 */
}

.section-03-image img {
  width: 100%;     /* 親幅に追従 */
  height: auto;
  display: block;
  border-radius: clamp(80px, 13.2vw, 190px); /* 190px ÷ 1440px ≒ 13.2% */
  object-fit: cover;
}

/* =========================
   固定値を当てたいブレイクポイント
   ========================= */

/* 1024pxのとき */
@media (min-width: 769px) and (max-width: 1024px) {
  .section-03-image {
    --x-adjust: 90px;
    --y-adjust: 225px;
  }
}

/* 1280pxのとき */
@media (min-width: 1025px) and (max-width: 1280px) {
  .section-03-image {
    --x-adjust: 75px;
    --y-adjust: 175px;
  }
}

/* 1440pxのとき */
@media (min-width: 1281px) and (max-width: 1440px) {
  .section-03-image {
    --x-adjust: 150px;
    --y-adjust: 200px;
  }
  .section-03{
    transform: translateY(55px);
    
  }
}

/* 1441px以上は固定サイズ（1440px時の値で止める） */
@media (min-width: 1440px) {
  .section-03-image {
    width: 750px;
    transform: translateX(-18px);
    margin-top: 54px;
  }
  .section-03 {
    transform: translateY(55px);
  }
  .section-03-image img {
    border-radius: 190px;
  }
}

/*==========================
about/pc
==========================*/

/*==========================
about/sp
==========================*/
@media screen and (max-width: 768px) {
 .main-header h1 {
    line-height: 42px;
    font-size: clamp(37px, 6vw, 100px);
    margin-left: 29px;
    letter-spacing: 6px;
    margin-top: 56px;
}

 .main-header .subtitle {
    font-size: clamp(13px, 2vw, 30px);
    margin-top: 7px;
    margin-left: 34px;
    letter-spacing: 0.5px;
}

/* about1 */
 .section-01-wrapper {
    flex-direction: column;  /* 横並び → 縦並び */
    align-items: center;     /* 中央寄せ */
    gap: 14px;               /* 縦の間隔 */
    left: 0;                 /* 位置調整 */
    padding-right: 0;
    margin-top: 27px;
  }

  .section-01 {
    position: static; /* 絶対配置解除で自然に縦並び */
    width: 100%;       /* スマホ幅に合わせる */
    height: auto;
    text-align: center;
  }

  .section-01-image {
    width: 100%;
    transform: none;   /* 画像のずらし解除 */
    order: -1;
    padding: 0 20px;
    box-sizing: border-box; 
  }

  .section-01-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 47px;
    object-fit: cover;
  }

  .description {
    max-width: 90%;
    margin: 0 ;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
    margin-top: 10px;
  }

  .section-title1{
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
    line-height: 1.3;
  }

  .section-number{
    height: 84px;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
  }

  @media (max-width: 768px) {
  .description     { font-size: 15px; }
  .section-number  { font-size: 72px; }
  .section-title1  { font-size: 30px; }
}

/* 375px未満でだけ縮む（375px以上では拡大しない） */
  @media (max-width: 375px) {
  .description     { font-size: clamp(12px, 4vw, 15px); }   /* 15/375*100 = 4vw */
  .section-number  { font-size: clamp(48px, 19.2vw, 72px); }/* 72/375*100 = 19.2vw */
  .section-title1  { font-size: clamp(24px, 8vw, 30px); }   /* 30/375*100 = 8vw */
}

  .separator{
    height: 3px;
    position: static;  /* 全部自然な流れで縦に */
    width: 85%;
    text-align: left;
    margin: -45px auto 0;
    left: auto;
    top: auto;
  }

  /* about2 */
 .section-02-wrapper {
    flex-direction: column;  /* 横並び → 縦並び */
    align-items: center;     /* 中央寄せ */
    gap: 14px;               /* 縦の間隔 */
    left: 0;                 /* 位置調整 */
    padding-right: 0;
    margin-top: 40px;
  }

  .section-02 {
    position: static; /* 絶対配置解除で自然に縦並び */
    width: 100%;       /* スマホ幅に合わせる */
    height: auto;
    text-align: center;
    transform: translateY(-116px);
  }

  .section-02-image {
    width: 100%;
    transform: none;   /* 画像のずらし解除 */
    order: -1;
    padding: 0 20px;
    box-sizing: border-box; 
  }

  .section-02-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 47px;
    object-fit: cover;
    margin-top: -26px;
  }

  .description2 {
    max-width: 90%;
    margin: 0 ;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
    margin-top: 10px;
  }

  .section-title2{
    line-height: 41px;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
  }

  .section-two{
    height: 84px;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
    font-size: clamp(72px, 9vw, 130px);
    margin-top: 132px;
  }

  .separator2{
    height: 3px;
    position: static;  /* 全部自然な流れで縦に */
    width: 85%;
    text-align: left;
    margin: -45px auto 0;
    left: auto;
    top: auto;
  }

    @media (max-width: 768px) {
  .description2     { font-size: 15px; }
  .section-two  { font-size: 72px; }
  .section-title2  { font-size: 30px; }
}

/* 375px未満でだけ縮む（375px以上では拡大しない） */
  @media (max-width: 375px) {
  .description2    { font-size: clamp(12px, 4vw, 15px); }   /* 15/375*100 = 4vw */
  .section-two  { font-size: clamp(48px, 19.2vw, 72px); }/* 72/375*100 = 19.2vw */
  .section-title2  { font-size: clamp(24px, 8vw, 30px); }   /* 30/375*100 = 8vw */
}

    /* about3 */
 .section-03-wrapper {
    flex-direction: column;  /* 横並び → 縦並び */
    align-items: center;     /* 中央寄せ */
    gap: 14px;               /* 縦の間隔 */
    left: 0;                 /* 位置調整 */
    padding-right: 0;
    margin-top: 10px;
  }

  .section-03 {
    position: static; /* 絶対配置解除で自然に縦並び */
    width: 100%;       /* スマホ幅に合わせる */
    height: auto;
    text-align: center;
  }

  .section-03-image {
    width: 100%;
    transform: none;   /* 画像のずらし解除 */
    order: -1;
    padding: 0 20px;
    box-sizing: border-box; 
  }

  .section-03-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 47px;
    object-fit: cover;
    margin-top: -86px;
  }

  .description3 {
    max-width: 90%;
    margin: 0 ;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
    margin-top: 10px;
  }

  .section-title3{
    line-height: 41px;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
  }

  .section-three{
    height: 84px;
    position: static;  /* 全部自然な流れで縦に */
    width: 100%;
    text-align: left;
    margin-left: 30px;
    left: auto;
    top: auto;
    font-size: clamp(72px, 9vw, 130px);
    margin-top: -21px;
  }

  .separator3{
    height: 3px;
    position: static;  /* 全部自然な流れで縦に */
    width: 85%;
    text-align: left;
    margin: -45px auto 0;
    left: auto;
    top: auto;
  }

    @media (max-width: 768px) {
  .description3     { font-size: 15px; }
  .section-three  { font-size: 72px; }
  .section-title3  { font-size: 30px; }
}

/* 375px未満でだけ縮む（375px以上では拡大しない） */
  @media (max-width: 375px) {
  .description3    { font-size: clamp(12px, 4vw, 15px); }   /* 15/375*100 = 4vw */
  .section-three  { font-size: clamp(48px, 19.2vw, 72px); }/* 72/375*100 = 19.2vw */
  .section-title3  { font-size: clamp(24px, 8vw, 30px); }   /* 30/375*100 = 8vw */
}
  
}
/*==========================
about/sp
==========================*/
/*==========================
room/pc
==========================*/
.main-header2 {
  width: 100%;
  max-width: 1440px;
  margin: 150px auto 0;         /* 中央に配置 */
  text-align: center;     /* 中のテキストも中央寄せ */
  padding: 40px 0;        /* 上下の余白 */
}

.main-header2 h1 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 100px);
  letter-spacing: 7px;
  line-height: 111px;
  margin: 0;
}

.main-header2 .subtitle2 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: clamp(18px, 2vw, 30px); 
  margin-top: 10px; /* 適度な余白 */
  margin-left: 5px;
}

.news__topic--highlight {
  background-color: #FFF4E0;   /* やさしいアイボリー背景 */
  border-left: 6px solid #FF7000; /* 左に強調バー */
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #FF7000;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.Style {
  display: flex;
  gap: 48px;
  justify-content: center;
  align-items: stretch; 
  grid-template-columns: repeat(2, 1fr);     /* 常に2枚横並び */
  width: min(92vw, 1280px);                 /* 画面幅に追従しつつ上限を設定 */
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.RoomStyle__item {
  width: calc((1061px - 24px) / 2); 
  box-sizing: border-box;
  height: 100%;
  display: flex;                /* 中身の縦伸び調整用 */
  align-items: stretch;
}

.RoomStyle__item--tall {
  height: 100%;
}

/* 画像側の正方形枠 */
.RoomStyle__img{
  width: 100%;
  aspect-ratio: 1 / 1;          /* ← 正方形！ */
  border-radius: 8px;           /* 角丸は枠側へ */
}


/* テキストカード側も“枠ごと”正方形 */
.RoomStyle__content{
  width: 100%;
  aspect-ratio: 1 / 1;          /* ← 正方形！ */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* 中のテキストを中央寄せ（好みで変更） */
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  border-radius: 8px;
  background-color: #fff;
  padding: clamp(12px, 1.8vw, 16px);
  margin: 0;                    /* 余白はグリッドの gap で管理 */
  box-sizing: border-box;
  text-align: center;
}

/* タイトル/本文、少し抑えめに可変 */
.RoomStyle__name{ 
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  text-align: center;
  font-weight: 900;
  padding: 8px 0 6px;
  margin: 0;
}
.RoomStyle__txt{
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  margin-top: 8px;
}


.RoomStyle__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* 正方形に綺麗にフィット */
  display: block;
  border-radius: 0; 
}

.detail__location p {
  display: block !important;
  text-align: left !important;
  margin-bottom: 1.5em;
}

.detail__location {
  font-size: 1.3rem;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #2F2F2F;
  font-weight: normal;
  text-align: center;
  position: relative;
  padding-top: 16px; /* 線との余白 */
  padding-left: 0 !important; 
}

.detail__location::before{
  content: "";
  display: block;
  height: 1.1px; /* ✅ 細い線に調整 */
  background-color: #e5e7eb;
  position: absolute;
  top: 0;
  border-radius: 1px;
  width: 80% !important;
  left: 10% 
}

/* room/lineup */
.section--lineUp-bg {
    width: 100%;
    }

.section--lineUp {
    padding: 48px 4.2%;
    text-align: center; /* ボタンを中央寄せ */
    max-width: 1160px;
    display: flex;
    gap: 48px;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    list-style: none;
  }

  .lineUp {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 32px;
    list-style: none;
    padding: 0;
    max-width: 1280px;
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
    margin-left: auto;
    margin-right: auto;
  }

  .lineUp__item {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 ;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .lineUp__item > *:first-child {
    margin-top: 0;
  }

  .lineUp__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    width: 100% ;
    padding: 0 ;
    box-sizing: border-box;
  }

.lineUp__img {
  width: 100%;
  height: 210px;
  overflow: hidden;
  position: relative;
}

.lineUp__slider {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-type: none;
}

.lineUp__slider::-webkit-scrollbar {
  display: none;
}

.lineUp__slider img {
  position: absolute;
  inset: 0;                  /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease; /* ふわっと */
  border-radius: inherit; 
}

.lineUp__slider img.is-active {
  opacity: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lineUp__slider img { transition: none; }
}

  .lineUp__content {
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 ;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

  .lineUp__name {
    font-weight: 500;
    font-size: 1.9rem;         /* ✅ サイズUP */
    text-align: center;        /* ✅ 中央揃え */
    margin-top: 10px;
}

  .lineUp__txt {
    font-size: 1.3rem;
    margin-top: 16px;
 }

  .detail {
    margin-top: auto;
    font-size: 0.95rem;
    color: #666;
    margin-top: 16px;
  }

  /* room/注意事項 */

       .container {
        width: 1440px;
        margin: 0 auto;
      }

      .info-card {
        display: flex;
        width: 1440px;
        align-items: flex-start;
        gap: 73px;
        padding: 27px;
        top: 0;
        left: 0;
        border-radius: 5px;
        overflow: hidden;
        background-color: transparent;
      }

      .card-content {
        display: flex;
        width: 100%;
        padding: 0;
        gap: 0;
      }

      .info-section {
        position: relative;
        height: 65px;
      }

      .info-section:first-child {
        width: 278px;
      }

      .info-section:not(:first-child) {
        flex: 1;
      }

      .section-inner {
        position: relative;
        width: 100%;
        height: 65px;
        top: -1px;
      }

      .section-content {
        position: absolute;
        height: 65px;
        top: 0;
        font-family: 'Tsukushi A Round Gothic', Helvetica, sans-serif;
        font-weight: normal;
        color: rgba(47, 47, 47, 1);
        letter-spacing: 0;
        white-space: pre-line;
      }

      .section-title {
        position: absolute;
        height: 62px;
        top: 1px;
        left: -10px;
        font-family: 'Zen Maru Gothic', Helvetica, sans-serif;
        font-weight: bold;
        font-size: clamp(13px, 1vw, 17px);
        line-height: 30px;
        color: rgba(47, 47, 47, 1);
        letter-spacing: 0;
        white-space: pre-line;
        margin-left: 23px;
      }

      /* First section styles */
      .section-1 .section-content {
        width: 233px;
        left: 121px;
        font-size: clamp(14px, 1.2vw, 18px);
        line-height: 30px;
      }

      /* .section-1 .section-title {
        width: 137px;
      } */

      /* Second section styles */
      .section-2 .section-content {
        width: 326px;
        left: 119px;
        font-size: clamp(14px, 0.2vw, 18px);
        line-height: 23.8px;
      }

      .section-2 .section-title {
        width: 91px;
      }

      /* Third section styles */
      .section-3 .section-content {
        width: 326px;
        left: 93px;
        font-size: clamp(14px, 0.2vw, 18px);
        line-height: 23.8px;
      }

      .section-3 .section-title {
        width: 66px;
      }

      /* Responsive adjustments */
      @media (max-width: 1440px) {
        .container,
        .info-card {
          width: 100%;
          max-width: 1440px;
        }
        
        .info-card {
          position: relative;
          left: auto;
          top: auto;
        }
      }

      /* room/料金表 */

      .container--price {
        height: 360px;
        position: relative;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
      }

      .outer-border {
        height: 360px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
      }

      .content-wrapper {
        position: relative;
        height: 294px;
        top: 33px;
      }

      .main-card {
        position: relative;
        width: calc(100% - 110px);
        height: 238px;
        top: 1px;
        background-color: #375d3d;
        border-radius: 40px;
        overflow: hidden;
      }

      @media (min-width: 769px) and (max-width: 1440px) {
      .main-card {
        position: relative;
        margin: 0 auto;                 /* 中央寄せ */
        width: 90%;
        max-width: 1200px;
        min-width: 800px;
        padding: clamp(24px, 3vw, 40px);
        display: grid;
        grid-template-columns: 1fr 1.2fr auto;  /* 左：タイトル / 中：説明 / 右：ボタン */
        align-items: center;
        gap: clamp(12px, 2.5vw, 32px);
        overflow: hidden;
      }
    }

      .prices-title {
        position: absolute;
        width: 299px;
        height: 111px;
        top: 59px;
        left: 87px;
        font-family: 'Zen Maru Gothic', Helvetica;
        font-weight: 1000;
        color: white;
        font-size: clamp(32px, 5vw, 70px);
        letter-spacing: 0.15em;
        line-height: 111px;
      }

      .description-text {
        position: absolute;
        width: 442px;
        height: 111px;
        top: 73px;
        left: 456px;
        font-family: 'Zen Maru Gothic', Helvetica;
        color: white;
        font-size: clamp(16px, 1.4vw, 30px);
        line-height: 1.5;
        letter-spacing: 0;
      }

      .button-container {
        position: absolute;
        width: 329px;
        height: 79px;
        top: 85px;
        left: 918px;
      }

      .reservation-button {
        position: relative;
        width: 327px;
        height: 79px;
        background-color: white;
        border-radius: 58px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
        text-decoration: none;
      }

      .reservation-button:hover {
        background-color: #C5956B; /* ← ホバー時の背景色（例：緑） */
        text-decoration: none;
      }

      .reservation-button:hover .button-text {
        color: white; /* ← ホバー時の文字色（例：白） */
      }

      .button-text {
        width: 224px;
        height: 50px;
        font-family: 'Zen Maru Gothic', Helvetica;
        color: #375d3d;
        font-size: 19px;
        line-height: 23.4px;
        font-weight: bold;
        letter-spacing: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .pcbr-time{
        display: block;
      }

      /* Responsive adjustments */
      @media (max-width: 1440px) {
        .container,
        .outer-border {
          width: 100%;
          max-width: 1440px;
        }
        
        .main-card {
          width: calc(100% - 110px);
        }
      }

      /* =========================
   固定値を当てたいブレイクポイント
   ========================= */
      
/* 可変領域 */
/* 1441px以上は“1440px時の見た目”で固定 */
@media (min-width:1440px){
  .Style{ width: 1280px; gap: 48px; }  /* 上の max と同じに固定 */
  .RoomStyle__name{ font-size: 1.8rem; }
  .RoomStyle__txt { font-size: 1.3rem; }
  .info-card {
    width: 1440px;          /* 常に1440px幅に固定 */
    max-width: 1440px;
    margin: 0 auto;         /* 中央寄せ */
    padding: 27px;          /* 1440px時と同じ余白 */
    gap: 73px;              /* 既存の間隔も維持 */
  }

  .container {
    width: 1440px;
    max-width: 1440px;
    margin: 0 auto;
  }

  .outer-border,
  .container--price {
    width: 1440px;
    max-width: 1440px;
    margin: 0 auto;
  }

  .main-card{
    width: calc(100% - 110px);  /* 既存デザイン踏襲 */
    max-width: 1330px;          /* 1440pxキャンバス内で中央に */
    margin: 0 auto;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;
    align-items: center;
    gap: 32px;
  }
  .prices-title,
  .description-text,
  .button-container{
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  .button-container{ justify-self: end; }
}

/* タブレット帯(～1024/1280)も2枚ピッタリに */
@media (max-width:1280px){
  .Style{ width: min(92vw, 1200px); }
}
@media (max-width:1024px){
  .Style{ width: min(94vw, 1000px); gap: clamp(20px, 3vw, 32px); }
}

/* SPは従来どおり縦積みでOK（必要なら調整） */
@media (max-width:768px){
  .Style{
    grid-template-columns: 1fr;   /* 縦1列 */
    width: 100%;
    gap: 16px;
  }
  .RoomStyle__img,
  .RoomStyle__content{
    aspect-ratio: unset;          /* SPは高さ自由でもOKなら解除 */
    border-radius: 12px;
  }
}

/* PCで .section-inner を横並び＆折り返し対応にする */

@media (min-width: 769px) {
  /* 内側ラッパーをフレックス行に */
  .section-inner{
    position: relative;
    flex-direction: row-reverse; /* ← 横並びを逆順にする */
    display: flex;
    align-items: flex-start;
    gap: 18px;              /* タイトルと本文の間隔 */
    width: 100%;
    height: auto;           /* 固定高さを解除 */
  }

  /* まず既存の絶対配置・固定寸法を無効化 */
  .section-title,
  .section-content{
    position: static;       /* absolute → static */
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    white-space: normal;    /* 折り返し可 */
  }

  /* セクションごとの個別 left/width 指定を打ち消し */
  .section-2 .section-title,
  .section-3 .section-title,
  .section-2 .section-content,
  .section-3 .section-content{
    position: static !important;
    left: auto !important;
    width: auto !important;
  }

    .section-1 .section-title,
  .section-1 .section-content{
    position: static !important;
    left: auto !important;
  }

  /* タイトル列は固定幅寄り、本文は可変に */
  .section-title{
    flex: 0 0 clamp(120px, 16%, 180px); /* 画面に応じた見出し幅 */
    margin: 0;               /* 余白はgapで管理 */
  }

  .section-content{
    flex: 1 1 auto;          /* 残り幅で可変 */
    min-width: 0;            /* はみ出し防止（重要） */
    line-height: 1.6;
  }
}

/* 好みで文字サイズの可変（PC） */
@media (min-width:769px){
  .section-title   { font-size: clamp(13px, 1vw, 17px); text-align: center; }
  .section-content { font-size: clamp(14px, 1.1vw, 18px); }
}
/* button-containerに文字を含める */
/* ===== PC：769〜1440px は .main-card の中身をグリッドで自動調整 ===== */
@media (min-width:769px) and (max-width:1440px) {
  .main-card{
    position: relative;
    margin: 0 auto;                 /* 中央寄せ */
    width: 90%;
    max-width: 1200px;
    min-width: 800px;
    padding: clamp(24px, 3vw, 40px);
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;  /* 左：タイトル / 中：説明 / 右：ボタン */
    align-items: center;
    gap: clamp(12px, 2.5vw, 32px);
    overflow: hidden;               /* 念のため */
  }

  /* 既存の absolute 由来の指定を打ち消し */
  .prices-title,
  .description-text,
  .button-container{
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0;
    white-space: normal;
    text-align: center;
  }

  .prices-title{
    font-size: clamp(28px, 4vw, 56px);  /* 可変でも枠内に収める */
    line-height: 1.2;
  }

  .description-text{
    font-size: clamp(14px, 1.4vw, 24px);
    line-height: 1.6;
  }

  .button-container{
    justify-self: end;               /* 右端に寄せる */
  }

  .reservation-button{
    width: clamp(220px, 22vw, 327px);
    height: clamp(48px, 6vw, 79px);
    border-radius: 58px;
  }
}
/* 1441px~は1440px同様 */
/* ===== 1441px以上：料金表(.main-card)を1440pxと同じに固定 ===== */
@media (min-width: 1441px) {

  /* 1440pxキャンバス中央固定（料金表の器） */
  .container--price,
  .outer-border {
    width: 1440px;
    max-width: 1440px;
    margin: 0 auto;
  }

  /* 1440px時のグリッド・余白をそのまま固定 */
  .main-card{
    position: relative;
    margin: 0 auto;                     /* 中央寄せ */
    width: calc(100% - 110px);          /* 1440px時と同じ器内幅 */
    max-width: 1330px;                  /* = 1440 - 110 */
    min-width: unset;                   /* 可変最小幅は解除 */
    padding: 40px;                      /* clamp の最大値で固定 */
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;  /* 左：タイトル / 中：説明 / 右：ボタン */
    align-items: center;
    gap: 32px;                           /* clamp の最大値で固定 */
    overflow: hidden;
  }

  /* 旧absolute指定を無効化（グリッド内で自然配置） */
  .prices-title,
  .description-text,
  .button-container{
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0;
    white-space: normal;
    text-align: center;                  /* 769–1440pxと同様 */
  }

  /* 文字サイズも1440px時の“最大値”で固定 */
  .prices-title{
    font-size: 70px;                     /* clampの上限 */
    line-height: 111px;
    letter-spacing: 0.15em;
  }
  .description-text{
    font-size: 1.4vw;                     /* clampの上限 */
    line-height: 1.5;
  }

  .button-container{ justify-self: end; }

  .reservation-button{
    width: 327px;                        /* clampの上限 */
    height: 79px;                        /* clampの上限 */
    border-radius: 58px;
  }
  .button-text{
    font-size: 22px;
  }
}

/*==========================
room/pc
==========================*/

/*==========================
room/sp
==========================*/
@media screen and (max-width: 768px) {
.main-header2 h1 {
    letter-spacing: 5px;
    line-height: 40px;
    margin: -17px 0 0;
    font-size: clamp(40px, 6vw, 100px);
}

.RoomStyle__img2{
  display: none;
}
  .pcbr-time{
    display: none;
  }

.RoomStyle__img img {
    object-fit: cover;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    margin: -19px 0 0 !important;
    border-radius: 0 !important;
}

.RoomStyle__content{
  display: none;
}

.section--lineUp {
    padding: 0;
}

.lineUp {
  display: flex;
  flex-direction: column; 
  gap: 20px; 
}

.lineUp__item {
    display: flex;
    flex-direction: row;       /* ← 横並び */
    align-items: stretch;
    gap: 12px;
    box-sizing: border-box;
    box-shadow: none;
  }

.lineUp__item:first-child {
  margin-top: 20px;
}

 .lineUp__img {
    flex: 5 2 0;             /* 左半分 */
    overflow: hidden;
    aspect-ratio: 3 / 2.5; 
    border-radius: 12px;
    height: 160px;
  }
 .lineUp__slider {
    width: 100%;
    height: 100%;
    object-fit: cover;   
  }
 .lineUp__slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }


  .lineUp__content {
    flex: 5 3 0;
    aspect-ratio: 3 / 3.5;  
    height: 160px;
    display: flex;
    flex-direction: column;
    padding: 0 3px;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .lineUp__name { font-size: 1.3rem; margin-top: 10px; text-align: left;}
  .lineUp__txt  { font-size: 1rem; margin-top: 3px; text-align: left; }

  .detail__location {
    display: none;
  }

    .detail__location::before{
    display: none;
    }

      /* room/注意事項 */
  .card-content {
    display: flex;
    flex-direction: column;  /* 横並び→縦並び */
  }

  .container, .info-card { 
    width: 100% !important; 
    max-width: none !important; 
  }

  .info-section {
    width: 100% !important;  /* 幅を100%に */
    height: auto!important;  /* 高さ自動に */
  }

  .section-inner {
    height: auto;
    position: static;
    width: 100% !important;  /* 幅を100%に */
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-start;
  }

  .section-content{
    position: static;   /* 絶対配置を解除して自然な縦並びに */
    margin: 0 0 8px 0;  /* 下に余白を追加 */
    width: 100% !important;
    line-height: 1.6;
    font-size: 14px;
  }

  .info-card{
    padding: 30px 35px 0;
    margin-bottom: 0
  }

  .section-title {
    position: static;   /* 絶対配置を解除して自然な縦並びに */
    margin: 0 0 8px 0;  /* 下に余白を追加 */
    width: 100% !important;
    line-height: 1.6;
    font-size: 14px;     
    margin-bottom: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
    height: auto !important;
    font-size: clamp(13px, 3.8vw, 16px);
  }

  /* もしmargin-leftなど固定指定が邪魔ならリセット */
  .section-1,
  .section-2,
  .section-3 {
    margin-left: 0;
    font-size: clamp(13px, 1.2vw, 18px);
  }

  .section-3{
    margin-top: 10px;
  }

  .section-1 .section-title,
  .section-2 .section-title,
  .section-3 .section-title,
  .section-1 .section-content,
  .section-2 .section-content,
  .section-3 .section-content {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    white-space: normal; /* pre-lineが不要ならnormalに */
  }

  .section-2 .section-content,
  .section-3 .section-content {
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: 1.7;
  }

  .section-1 .section-content {
    position: relative;
    font-size: 0;            /* ← 透明文字の行ボックスを消す */
    line-height: 0;          /* ← 継承を避けるため下で明示 */
    margin: 0 0 10px 0;
    color: transparent;       /* 元文字は見えない */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .section-1 .section-content::before {
    content: "チェックイン 14:00〜16:00\Aチェックアウト 〜11:00";
    display: block;
    white-space: pre-line;
    color: #2F2F2F;                  /* ← ここがポイント：透明を上書き */
    font-size: 14px;                 /* 必要なら調整 */
    line-height: 1.6;
    font-size: clamp(12px, 3.6vw, 15px);
  }
  .section-1 .section-content {
    color: transparent; /* 元の文字を隠す */
  }
  .section-1 .section-content::selection {
    color: black; /* コピペ時も消えないように */
  }

  @media screen and (max-width: 768px) {
    .section-2 .section-content {
        margin: 0 0 40px 0;
    }
    /* “注意事項”ブロック（.container / .info-card）も端まで */
  .container,
  .info-card {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 料金表 */
  .container {
    height: auto;
    }
        
  .outer-border {
    margin-top: -30px;
  }
  
  .content-wrapper {
    height: auto;
    top: 20px;
  }
  
  .main-card {
    width: calc(100% - 40px);
    height: auto;
    left: 20px;
    padding: 40px ;
  }
  
  .prices-title {
    position: static;
    width: 100%;
    height: auto;
    font-size: clamp(42px, 5vw, 41px);
    text-align: center;
    line-height: 1.3;
    margin-bottom: 20px;
  }
  
  .description-text {
    position: static;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 30px;
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.6;
    letter-spacing: 0.5px;
  }
  
  .button-container {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
  }
  
  .reservation-button {
    width: 280px;
    height: 60px;
  }
  
  .button-text {
    font-size: clamp(16px, 1.6vw, 22px);
    width: auto;
    height: auto;
  }

  .container--price {
    margin-top: 16px !important; /* 0 でもOK。好みで調整 */
  }
}
}

  /* ===== PC：431〜768px===== */
@media (min-width:431px) and (max-width:768px) {
        .main-header2 {
          margin: 100px auto 0;
        }

        .main-header h1 {
        line-height: 60px;
        font-size: clamp(37px, 7vw, 100px);
    }
        .main-header2 h1{
    font-size: clamp(37px, 7vw, 100px);
  }
  .subtitle2 {
    margin-top: 15px;
}
}

/*==========================
room/sp
==========================*/
/*==========================
nearbyspot/pc
==========================*/
.frame--nearby {
  position: relative;
  width: 100%;
  max-width: 1347px;
  margin: 0 auto;
}

.main-header--nearby {
  width: 566px;
  height: auto; /* 高さは内容に合わせる */
  margin-left: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
}

.sp-only-nearby{
  display: block;
}
.maintitle--nearby {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 6vw, 100px);
    letter-spacing: 7px;
    line-height: 111px;
    margin: 0;
}


.subtitle--nearby {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: clamp(18px, 2vw, 30px);
    margin-top: 10px;
    margin-left: 5px;
}

.section-nearby {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  left: 0;
  position: relative;
  padding-right: 60px;
  box-sizing: border-box;
  margin-top: 60px;
  transform: none;
}

.section-nearby-01 {
  position: relative;
  width: 432px;
  height: 331px;
}

.section-title--nearby {
  position: absolute;
  width: 424px;
  height: 140px;
  top: 115px;
  left: 8px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: clamp(30px, 4vw, 55px);
  letter-spacing: 3.85px;
  line-height: 70px;
  margin: 0;
}

.separator--nearby {
  position: absolute;
  width: 400px;
  height: 5px;
  top: 288px;
  left: 5px;
  background-color: #e5e7eb;
}

.description--nearby {
  position: absolute;
  width: 505px;
  height: 99px;
  top: 326px;
  left: 14px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  color: black;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.7;
  margin: 0;
}

.section-01-image--nearby {
  width: 750px;
  transform: none; /* ← 上方向に移動 */
}

.section-01-image--nearby img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 40px;
  object-fit: cover;
}

@media (max-width: 1400px) {
  .frame--nearby {
    max-width: 100%;
    padding: 0 20px;
  }
  }


/* Container */
.container--attractions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: auto;
  height: auto;
  max-width: 1347px;
  margin: 0 auto;
}

/* Attractions grid */
.attractions-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  flex-wrap: nowrap;
  max-width: 1391px;
  gap: 20px;
}

/* Individual attraction card */
.attraction-card {
  height: auto;
  flex: 0 0 auto;               /* モバイル指定の上書き */
  max-width: none;
}

.card-content--attractions {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Attraction image */
.attraction-image {
  width: 370px;
  height: 450px;
  border-radius: 40px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin: 0 auto;
}

/* Attraction title */
.attraction-title {
  font-size: 27px;
  width: 402px;
  height: 25px;
  margin-top: 25px;
  margin-left: 36.5px;
  margin-right: auto;
  font-family: 'Zen Maru Gothic', Helvetica;
  font-weight: 500;
  color: #2f2f2f;
  text-align: left;
  letter-spacing: 0;
  line-height: 28.5px;
  white-space: nowrap;
}

/* Attraction description */
.attraction-description {
  width: 443px;
  height: 96px;
  margin-top: 23px;
  margin-left: 36.5px;
  font-family: 'Zen Maru Gothic', Helvetica;
  font-weight: 400;
  color: #2f2f2f;
  font-size: 17px;
  text-align: left;
  letter-spacing: 0;
  line-height: 28.5px;
}

@media (min-width: 769px) {
  .attractions-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.2vw, 16px);     /* ← 間隔を狭める（可変） */
    width: 100%;
    max-width: 1347px;                /* .section-nearby と同じ器 */
    margin: 0 auto;
    padding: 0 10px;                  /* ← 外側の余白も少し削る */
    box-sizing: border-box;
  }
  .slider-nav {
    display: none;                 /* PCでは非表示でOK */
  }
   .container--attractions {
  max-width: 1347px;        /* ← 同じ */
  margin: 30px auto;           /* ← 同じ */
  padding: 0 20px;       /* ← 同じ */
  box-sizing: border-box;
  }

  .attractions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3等分 */
    gap: 20px;                              /* 既存gapに合わせる */
    max-width: 100%;
    width: 100%;
    justify-items: stretch;
  }

  /* 各カードは列幅いっぱいに */
  .attraction-card {
    display: flex;                /* フレックス化 */
  justify-content: center;      /* 中央寄せ（横方向） */
  align-items: flex-start;  
  }

  .card-content--attractions {
    width: 85%;
    max-width: none;
    margin: 0 auto;                   /* ← 中央に配置 */
    display:flex;
    flex-direction:column;
    align-items:center;               /* 中身も中央 */
    text-align:center;
  }

  /* 画像は列幅にフィット、比率で高さ確保 */
  .attraction-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;       /* 縦横比で見た目安定 */
    border-radius: 40px;
    margin: 0 !important;            /* 既存の中央寄せは残してOK */
  }

  /* タイトル＆説明：固定幅/左マージンをやめ、列幅で揃える */
  .attraction-title,
  .attraction-description {
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 8px;                   /* 少しだけ内側余白 */
    white-space: normal;              /* 折り返し許可 */
    text-align: center;
  }

  /* 既存の固定指定を打ち消す */
  .attraction-title { 
   font-size: clamp(18px, 1.6vw, 24px);             /* お好みで少し小さめにも調整可 */
  }
  .attraction-description {
    font-size: clamp(12px, 1.2vw, 16px);           /* テキスト小さめ要望に合わせる */
    line-height: 1.7;
  }
}

/* Responsive design */
@media (max-width: 1440px) {
  .attractions-grid {
    flex-direction: row;       /* 常に横並びを保つ */
    flex-wrap: wrap;           /* 必要に応じて折り返す */
    justify-content: center;   /* 中央寄せ */
    gap: 20px;
  }
  
  .attraction-card {
    flex-direction: row;       /* 常に横並びを保つ */
    flex-wrap: wrap;           /* 必要に応じて折り返す */
    justify-content: center;   /* 中央寄せ */
    gap: 20px;
    flex: 0 0 auto;               /* モバイル指定の上書き */
    max-width: none;
  }
  
  .container--attractions {
    min-height: auto;
    padding: 20px 20px;
  }

  .pc-only-attractions{
    display: inline;
  }
}

@media (min-width: 769px) {

  /* 親コンテナ：下の .container--attractions と同じ横幅 */
  .section-nearby {
    display: flex;
    align-items: flex-end;         /* 下揃え */
    justify-content: center;       /* 中央寄せ */
    max-width: 1347px;             /* .container--attractions と同じ */
    margin: 60px auto 0;
    gap: 20px;                     /* .attractions-grid と同じ間隔 */
    padding: 0 20px;               /* .container--attractions と揃える */
    box-sizing: border-box;
  }

  /* テキスト側（カード1枚分） */
  .section-nearby-01 {
    position: relative;
    flex: 0 0 370px;               /* 1カード分の幅 */
    max-width: 370px;
    min-height: 580px;             /* attraction-image と高さを揃える */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* 画像側（カード2枚分） */
  .section-01-image--nearby {
    flex: 0 0 calc(370px * 2 + 20px); /* 2カード分＋gap */
    max-width: calc(370px * 2 + 95px);
    min-height: 450px;               /* attraction-image と高さを揃える */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: none;                 /* translateY を解除 */
  }

  .section-01-image--nearby img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    display: block;
  }
}

@media (min-width:769px) and (max-width:1279px) {
  .separator--nearby {
    position: absolute;
    width: 339px;
    margin: -20px auto -60px;
  }
    .container--attractions {
      margin: 30px auto;
}
}

@media (min-width:769px) and (max-width:1300px) {
    .container--attractions {
      margin: -15px auto;
}
}


/*==========================
nearbyspot/pc
==========================*/
/*==========================
nearbyspot/sp
==========================*/

@media (max-width: 768px) {

  .main-header--nearby {
    margin-top: 80px;
  }
  .frame--nearby{
    margin-top: -60px;
    margin-left: 0 !important;    /* 100vwと相性の悪い左マージンを排除（右側の空白の原因） */
  }

  .sp-only-nearby{
    display: inline;
  }

  .maintitle--nearby {
    line-height: 40px;
    font-size: clamp(37px, 6vw, 100px);
    letter-spacing: 5px;
    margin-left: -35px;
  }

  .subtitle--nearby{
    font-size: clamp(13px, 2vw, 30px);
    margin-top: 5px;
    margin-left: -31px;
    letter-spacing: 0.5px;
  }

  .section-nearby {
    display: flex;
    flex-direction: column;   /* 縦並び */
    gap: 16px;                /* 好みで余白 */
  }

  .separator--nearby {
    margin-left: 29px;
    width: 290px;
    height: 3px;
    top: 0px;
    left: 5px;
}
  
  .description--nearby {
    height: 99px;
    top: 18px;
    left: 36px;
    font-size: clamp(13px, 1.5vw, 24px);
}

.section-nearby {
    margin-top: 0px;
  }

  /* テキスト側（h3 など）は後ろへ */
  .section-nearby-01 {
    order: 2;
    height: 116px;
    margin-top: 90px;
  }

  /* 画像ブロックを先頭へ */
  .section-01-image--nearby {
    order: 1;
    width: 100%;
    height: auto;
  }

  .section-01-image--nearby img {
    width: 100%;       
    height: auto;       
    display: block;    
    border-radius: 0; 
    margin: 20px 23px 0;
  }

  .section-title--nearby {
    top: -95px;
    left: 32px;
    font-size: clamp(26px, 4vw, 55px);
    letter-spacing: 2.85px;
    line-height: 40px;
  }

  .container--attractions {
    position: relative; 
    padding-bottom: 40px;
    margin-top: 10px;
  }

  .attractions-slider {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
    touch-action: pan-y;
  }

  .attraction-wrapper {
    display: flex;            /* 横並び */
    align-items: flex-start;  /* 上揃え */
    gap: 12px;                /* 画像とテキストの間隔 */
  }

  .attraction-card {
    flex: 0 0 100% !important;  /* 1画面に1枚 */
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .attraction-image {
    grid-column: 1;
    width: 100%;
    aspect-ratio: 3 / 4;           /* 縦長比率を維持 */
    height: auto;                   /* 明示の高さは持たせない */
    border-radius: 12px;
    background-size: cover;
    background-position: center;
  }

  .attraction-text {
    display: flex;
    flex-direction: column;   /* タイトルと説明を縦並び */
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    aspect-ratio: 3 / 4;      /* 比率で高さを作る */
    height: auto;             /* 明示（競合予防） */
    border-radius: 12px;
    background-size: cover;
    background-position: center;
  }
  
  
  .attraction-title {
    width: 100%;
    max-width: 350px;
    font-size: 18px;
    height: auto;
    white-space: normal;
    margin-bottom: 4px;
    grid-row: 1;
    margin: 13px 0 6px;
    font-size: clamp(16px, 4.2vw, 18px);
    line-height: 1.3;
    grid-column: 2;
  }
  
  
  .attraction-description {
    width: 100%;
    max-width: 380px;
    grid-row: 2;
    margin: 0;
    font-size: clamp(11px, 3vw, 15px);
    line-height: 1.6;
    grid-column: 2;
    margin-top: -125px;
    margin-left: -4px;
  }

  .card-content--attractions {
    display: grid;
    grid-template-columns: 40% 1fr;  /* 左42%が画像、右がテキスト */
    column-gap: 12px;
    align-items: start;
  }

  .pc-only-attractions{
    display: none;
  }

  /* スライダーナビ */
.slider-nav{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;                 /* 丸の間隔 */
  z-index: 10;
}

.slider-btn{
  appearance: none;
  border: none;
  width: 10px;              /* 丸のサイズ */
  height: 10px;
  border-radius: 50%;
  background: #cfcfcf;      /* グレー */
  cursor: pointer;
  padding: 0;
}

.slider-btn.active{
  background: #375d3d;      /* 深緑 */
}

.slider-btn:active { transform: scale(.96); }
}

@media (min-width: 769px) {

  /* section-nearby をflexboxにして横並び */
  .section-nearby {
    display: flex;
    justify-content: space-around; 
    align-items: flex-end;          /* ← 高さを下揃えに */
    max-width: 1347px;              /* container--attractions と同じ幅 */
    margin: -25px auto -15px;                /* 中央寄せ */
    gap: 40px;                      /* カードと画像の間隔 */
    padding: 0 20px;                /* 余白 */
    box-sizing: border-box;
  }

  /* 左側（テキストボックス） */
  .section-nearby-01 {
    height: auto;        /* 高さは中身に合わせる */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 内部も下揃えに */
  }

  /* 右側（画像ボックス） */
  .section-01-image--nearby {
    display: flex;
    justify-content: unset;
    align-items: flex-end;
    transform: none;
    flex: 0 0 calc(370px * 2 + 20px);
    max-width: calc(350px * 2 + 20px);
    margin-top: 0;
    align-self: flex-start;
  }

  .section-01-image--nearby img {
    width: clamp(510px, 50vw, 1110px);
    height: auto;
    border-radius: 40px;
    object-fit: cover;
    display: block;
  }
}

@media (min-width:570px) and (max-width:768px) {
    .attraction-description {
        margin-top: -230px;
    }
}

  /* ===== PC：431〜768px===== */
@media (min-width:431px) and (max-width:768px) {
       .frame--nearby {
        margin-top: 0px;
    }
    .section-nearby {
        gap: 36px;
    }
        .container--attractions {
        padding: 40px 20px;
    }    
     .section-03 {
        margin-top: 30px;
    }
}

/*==========================
nearbyspot/sp
==========================*/

/*==========================
access/pc
==========================*/

.main-header2--access {
  width: 100%;
  max-width: 1440px;
  margin: 40px auto 0;         /* 中央に配置 */
  text-align: center;     /* 中のテキストも中央寄せ */
  padding: 15px 0;        /* 上下の余白 */
}

.main-header2--access h1 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 100px);
  letter-spacing: 7px;
  line-height: 111px;
  margin: 0;
}

.main-header2--access .subtitle2--access {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: clamp(18px, 2vw, 30px); 
  margin-top: 10px; /* 適度な余白 */
  margin-left: 5px;
}

.section--access {
    padding: 0 60px 96px;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.map {
    width: 100%;
    margin-top: 32px;
    height: 400px;
    border-radius: 40px;
}

.directions {
    padding: 24px 0 0;
    display: flex;
    justify-content: space-between;
  }
.directions__item {
    width: 48%;
    }

.directions__item:last-of-type {
    margin-top: 0;
    }

.directions__topic {
    font-weight: bold;
    font-size: 2.1rem;
    line-height: 1;
    }

.directions__txt {
    font-size: 1.6rem;
    line-height: 1.3;
    margin-top: 16px;
    }

.container--access {
  width: 100%;
  height: 191px;
}

.card--access {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 1375px;
  height: auto; /* コンテンツに合わせる */
  margin: 0 auto 40px; /* ヘッダーとの間隔を調整 */
  background: white;
  border-radius: 40px;
  border: 5px solid #375d3d;
}

.label {
  position: absolute;
  left: 0;
  width: 147px;
  height: 53px;
  background: #375d3d;
  border-radius: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  line-height: 23.4px;
}

.address-label {
  top: 15px;
}

.tel-label {
  top: 87px;
}

.address-text {
  position: absolute;
  width: 636px;
  height: 25px;
  top: 30px;
  left: 178px;
  font-weight: 500;
  color: black;
  font-size: 24px;
  line-height: 30px;
  white-space: nowrap;
}

.tel-text {
  position: absolute;
  width: 558px;
  height: 19px;
  top: 110px;
  left: 185px;
  font-weight: 500;
  color: black;
  font-size: 24px;
  line-height: 30px;
  white-space: nowrap;
}

/* Responsive adjustments */

@media (max-width: 1400px) {
  .card--access {
    position: relative;
    left: 0;
    transform: none;
    margin: 0 auto;
  }
  .card--access {
    position: relative;
    left: 0;
    transform: none;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .content-access {
    width: 90%;
    left: 5%;
  }
  
  .address-text,
  .tel-text {
    font-size: 18px;
    left: 160px;
    width: auto;
    right: 20px;
  }
}


/* ===== 769px〜1279px：カードを画面幅100%に固定 ===== */
@media (min-width:769px) and (max-width:1279px) {
  .card--access {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 40px;
  }
}

/* ===== PC: 769〜1440px で中央・平行レイアウト ===== */
@media (min-width:769px) and (max-width:1440px){

  /* カードは中央・少し内側に余白 */
  .card--access{
    max-width: 1375px;
    margin: 0 auto 40px;
    padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 48px);
  }

  /* 中身のラッパーを通常フローに＆中央幅 */
  .content--access{
    position: static;
    width: min(92vw, 1060px);
    height: auto;
    margin: 0 auto;
    display: grid;
    row-gap: clamp(10px, 1.6vw, 18px); /* 住所行とTEL行の間隔 */
  }

  /* 各行（住所／TEL）は「ラベル + テキスト」の2カラムで中央寄せ */
  .address-section,
  .tel-section{
    position: static;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;   /* 左：ラベル／右：本文 */
    align-items: center;
    column-gap: clamp(12px, 2vw, 24px);
    width: 100%;
    max-width: 1000px;                 /* 行の最大幅（お好みで） */
  }

  /* ラベルは固定幅の“ピル”として並べる */
  .label{
    position: static;                  /* ← absolute を解除 */
    min-width: 147px;                  /* 既存サイズを踏襲 */
    height: 53px;
  }

  /* テキストは可変幅・折り返しON・左寄せ */
  .address-text,
  .tel-text{
    position: static;                  /* ← absolute を解除 */
    width: auto;
    height: auto;
    white-space: normal;               /* 折り返し許可 */
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.6;
    text-align: left;
  }
}

/* ===== 1441px以上は“1440px時”の見た目で固定 ===== */
@media (min-width:1440px){
  .card--access {
    margin: 0 auto 40px;
    padding: 32px 48px;          /* clampの最大値で固定 */
  }

  .content--access {
    width: 1060px;               /* 1440px時の最大幅で固定 */
    margin: 0 auto;
    display: grid;
    row-gap: 18px;
    position: static;
    height: auto;
  }

  .address-section,
  .tel-section{
    display: grid;
    grid-template-columns: auto 1fr;   /* ラベル + 本文 */
    align-items: center;
    column-gap: 24px;                 /* clampの最大値で固定 */
    margin: 0 auto;
    max-width: 1000px;                /* 1440px時と同じ */
  }

  .address-label,
  .tel-label,
  .address-text,
  .tel-text{
    position: static !important;  /* ← absolute を解除してフロー配置 */
  }

  .address-text,
  .tel-text{
    white-space: normal;          /* 折り返し許可 */
    font-size: 24px;              /* 1440px時と同じ */
    line-height: 1.6;
    text-align: left;
  }
}

/* 既存の absolute 指定を確実に打ち消したい場合は必要に応じて */
@media (min-width:769px){
  .address-label,.tel-label,
  .address-text,.tel-text{
    top:auto !important; left:auto !important;
  }
}
/* 終わり */

/*==========================
access/pc
==========================*/

/*==========================
access/sp
==========================*/
@media (max-width: 768px) {
  .main-header2--access h1 {
    font-size: clamp(37px, 6vw, 100px);
    line-height: 27px;
    letter-spacing: 5px;
  }

  .subtitle2--access {
    font-size: clamp(13px, 2vw, 30px) !important;
  }

  .card--access {
    max-width: calc(100% - 24px);
    padding: 20px 20px 4px;
    margin: 0 auto;   /* ← 左右に12pxずつ余白をつける */
    border-radius: 8px;
    width: 100%;
  }
  
  .content--access {
    position: static;
    width: 100%;
    height: auto;
  }
  
  .address-section,
  .tel-section {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    justify-content: flex-start;
  }
  
  .label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: bold;
    width: 70px;
    height: 28px;
    position: static;
  }
  
  .address-text,
  .tel-text {
    position: static;
    font-size: 10px;
    flex: 1;
    white-space: nowrap;     /* ← これが効く */
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .map {
    margin-top: -49px;
}
  .directions{
    display: flex;            
    flex-direction: column;    /* 縦並び */
    gap: 16px;    
    padding: 24px 12px;             
    margin-left: 9px;
    box-sizing: border-box;
  }

  .directions__item {
    width: 100% !important;
  }

  .directions__topic,
  .directions__txt {
    display: block;
    width: 100%;     /* 横幅いっぱい */
    box-sizing: border-box;
    text-align: left;
    margin-left: 17px;
    white-space: normal !important;   
    word-wrap: break-word;
    overflow-wrap: anywhere;
    margin: 0 0 8px 0; 
  }

  .directions__topic {
    line-height: 1.4;
    font-weight: bold;
    font-size: 13px;
  }

  .directions__txt {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 0;
    display: block;          /* ← flexアイテムでも block化でOK */
    width: 100% !important;  /* ← 強制的に横幅いっぱい */
    white-space: normal !important;  /* ← nowrap を上書き */
    word-break: break-word;          /* ← 単語が長い時に折る */
    overflow-wrap: anywhere;
  }

  .section--access {
    padding: 0 60px;
}
}

    /* ===== PC：431〜768px===== */
@media (min-width:431px) and (max-width:768px) {    
  .main-header2--access {
    width: 100%;
    max-width: 1440px;
    margin: 70px auto 10px;
  }
  .address-text, .tel-text {
    font-size: clamp(13px, 2vw, 21px);
    }

  .directions__topic {
    font-size: clamp(13px, 2.3vw, 21px);
    }
  }

/*==========================
access/sp
==========================*/

/*==========================
Q&A/pc
==========================*/

.main-header2--questions {
  width: 100%;
  max-width: 1440px;
  margin: 40px auto 0;         /* 中央に配置 */
  text-align: center;     /* 中のテキストも中央寄せ */
  padding: 15px 0;        /* 上下の余白 */
}

.main-header2--questions h1 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 100px);
  letter-spacing: 7px;
  line-height: 111px;
  margin: 0;
}

.main-header2--questions .subtitle2--questions {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: clamp(18px, 2vw, 30px); 
  margin-top: 10px; /* 適度な余白 */
  margin-left: 5px;
}

.section--questions {
    padding: 0 60px 96px;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}


.container--questions {
    position: relative;
    width: 100%;
    max-width: 1413px;
    margin: 0 auto;
    padding: 20px;
}

.content--questions {
    width: 100%;
}

.faq-section {
    margin-bottom: 40px;
}

.section-titlesub {
    margin-left: 0;                 /* ← 負のマージンを廃止 */
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 40px;
    letter-spacing: 3.5px;
    line-height: 79px;
    text-align: left;               /* ← セクション全体の center を上書き */
}

.accordion-item {
    margin-bottom: 20px;
}

.accordion-item:last-child {
    margin-bottom: 0;
}

  /* 親セクションは中央寄せのまま、内部は左寄せに */
  .faq-section{ 
    max-width: 1280px;            /* .section--questions と同じ器幅 */
    margin: 0 auto 40px;          /* 中央寄せ */
    text-align: left;             /* 内部を左寄せ */
  }
  /* 見出しは常に左端から開始 */
  .section-titlesub{ 
    margin: 0 0 12px 0;           /* 左端0から開始 */
    text-align: left;             
  }
  /* 質問リストの外側余白・内側余白をリセットして左端を一致 */
  .questions-container{ 
    padding-left: 0; 
    padding-right: 0; 
    margin-left: 0; 
    margin-right: 0; 
  }
  /* ボタンは幅100%なので、見出しと同じ左端に揃う */
  .accordion-trigger{ width: 100%; }

.accordion-trigger {
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px;
    border: 4px solid #375d3d;
    padding: 24px 64px;
    min-height: 86px;         /* 元の高さを最低値とする */
    font-family: 'Zen Maru Gothic', sans-serif;
    color: #000000;
    font-size: 30px;
    line-height: 1.2;         /* 行間を少し広げると折り返しやすい */
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;  /* 上寄せにして折り返し後も自然に */
    flex-wrap: wrap;          /* テキストを折り返し可能に */
    white-space: normal;      /* デフォルトで折り返しを許可 */
    transition: all 0.2s ease;
}

.accordion-trigger:hover {
    background-color: #f8f9fa;
    border-color: #C5956B;
}

.accordion-trigger:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(55, 93, 61, 0.2);
}

.accordion-trigger.active {
    min-height: calc(86px * 2); /* 172px相当 */
}

.accordion-icon {
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 16px;
    align-self: flex-start; 
}

.accordion-trigger.active .accordion-icon {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion-content.active {
    max-height: 200px; /* Adjust based on content */
}

.accordion-content-inner {
    padding: 16px 0;
    color: #666;
}

.accordion-trigger .accordion-content-inner {
  display: none;
  width: 100%;
  margin-top: 8px; /* 質問文との間に少し間隔 */
}

/* active 状態では回答を表示 */
.accordion-trigger.active .accordion-content-inner {
  display: block;
}

/*==========================
Q&A/pc
==========================*/
/*==========================
Q&A/sp
==========================*/
@media (max-width: 768px) {
.maintitle2--questions{
  font-size: clamp(37px, 6vw, 100px);
  line-height: 27px;
  margin-top: -23px;
  margin-left: -4px;
}

.subtitle2--questions{
  font-size: clamp(13px, 2vw, 30px) !important;
  margin-top: -23px !important;
  margin-left: -4px !important;
}

.main-header2--questions {
  margin: 0;
  padding: 0;
}

.container--questions {
  padding: 10px;
  margin-top: 25px;
}

  .section-titlesub {
      font-size: 21px;
      letter-spacing: 2px;
      line-height: 50px;
      text-align: left;  
      padding-left: 29px;           /* 左寄せ */
  }

.questions-container {
    padding: 0 15px;
}

.accordion-trigger {
    width: 100%;
    text-align: left;
    padding: 20px 11px;
    font-size: 11px;
    min-height: 62px;
    line-height: 1.5;
}

.accordion-icon{
  font-size: 13px;
}

.accordion-content-inner {
    padding:  0;
}

.accordion-trigger .accordion-content-inner {
  margin-top: 0; 
}

.accordion-trigger.active {
    min-height: calc(64px * 2) !important;
}

.section--questions {
    padding: 0 60px;
}
}

    /* ===== PC：431〜768px===== */
@media (min-width:431px) and (max-width:768px) {    
      .section--questions {
        padding: 60px 60px;
    }
  .accordion-trigger  {
    font-size: clamp(13px, 2.3vw, 21px);
    }
  }


/*==========================
Q&A/sp
==========================*/

/*==========================
footer/pc
==========================*/
.footer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 288px;    
  border-radius: 40px; 
}

.footer-wrapper {
  background-color: #375d3d;
  width: 100%;
}

.container--footer {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.footer-content {
  position: relative;
  height: 100%;
  padding: 30px 60px; /* 10 * 4px = 40px, 6 * 4px = 24px */
}

.logo {
  width: 120px;
  height: 121px;
  object-fit: cover;
}

.contact-info {
  position: absolute;
  bottom: 40px; /* 10 * 4px = 40px */
  left: 75px;
  font-family: 'Zen Maru Gothic', Helvetica;
  font-weight: normal;
  font-size: 12px; /* text-xs */
}

.phone-link {
  font-weight: bold;
  color: white;
  line-height: 18px;
  text-decoration: underline;
  display: block;
}

.phone-link:hover {
  opacity: 0.8;
}

.address {
  font-weight: bold;
  color: white;
  line-height: 18px;
  margin-top: 4px; /* mt-1 */
}

.tel {
  font-weight: bold;
  color: white;
  line-height: 18px;
  margin-top: 4px; /* mt-1 */
}

.hours {
  font-weight: bold;
  color: white;
  line-height: 18px;
  margin-top: 4px; /* mt-1 */
}

.copyright {
  font-weight: bold;
  color: white;
  line-height: 18px;
  margin-top: 4px; /* mt-1 */
}

/* Responsive design */
@media (max-width: 768px) {
  .footer {
    margin: 0 16px;
    max-width: calc(100% - 32px);
  }
  
  .contact-info {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
  
  .footer-content {
    padding: 24px;
  }
}


/*==========================
footer/pc
==========================*/


/* sp仮 */
/* ===== SPフルブリード用 追加CSS（393px想定） ===== */
@media screen and (max-width: 768px) {
  html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;          /* 横スクロール防止 */
  }

  /* 横幅を制限している max-width/margin を無効化して全面表示に */
  .container,
  .header,
  .main,
  .article,
  .frame,
  .section,
  .section--RoomStyle,
  .section--lineUp,
  .section--lineUp-bg,
  .section--lineUp-bg--compact,
  .section--access,
  .section--questions,
  .main-header,
  .main-header2,
  .main-header2--access,
  .main-header2--questions,
  .container--price,
  .outer-border,
  .container--footer,
  .footer,
  .footer-wrapper {
    width: 100vw !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .frame--nearby{
    width: 100vw !important;
    max-width: none !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* ヘッダー：左右の余白もゼロで“端まで” */


  /* ナビ（ドロワー）は幅100%でOK（既にwidth:100%なので念のため） */
  .nav {
    width: 100vw !important;
    left: 0 !important;
  }

  /* メイン画像：SPは画像のみ全面表示、角丸もオフ */
  .mainImg__pc { display: none !important; }
  .mainImg__sp {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* メインビジュアルのテキストレイヤーがある場合は端寄せに合わせて位置を微調整 */
  .mainImg__wrapper {
    inset: 0 !important;
    width: 100vw !important;
  }

  /* Google Mapやカード等も端まで */
  .map {
    width: 100vw !important;
    border-radius: 0 !important;
  }

  /* 罫線や囲いの左右パディングを削る（必要に応じて） */
  .section--news-sub .news__item,
  .section--question .question__list {
    width: 100vw !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }



  /* lineupの外側ラッパーも端まで */
  .section--lineUp-bg,
  .section--lineUp-bg--compact {
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}