/* ========== /sauna 専用（/about準用・完全版） ========== */

/* 右側写真の共通高さ（PC/Tabletで統一） */
.page-sauna { --side-h: clamp(280px, 30vw, 380px); }

/* ヒーロー直下キャッチ（harvia-catchクラスに依存しない） */
.page-sauna .catch-main,
.page-sauna .catch-sub { display:block; text-align:center; }
.page-sauna .catch-main {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 10px;
}
.page-sauna .catch-sub  { font-size: 1rem; line-height: 1.9; color:#333; margin:0; }

/* 共通セクション（/aboutトーン） */
.page-sauna .company-section { padding:56px 0; background:#fff; }
.page-sauna .section-title { font-size:2rem; font-weight:800; text-align:center; margin:0 0 26px; }

/* 2カラム：左右を同じ“器”に（行の高さ＝--side-h） */
.page-sauna .greeting-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:28px;
  align-items:stretch;
  height:var(--side-h);
}

/* 左カラム：上=本文 / 下=付加要素（4枚 or CTA）— 下端吸着を効かせる器 */
.page-sauna .greeting-text{
  display:flex;
  flex-direction:column;
  height:100%;
  row-gap:16px;
}
.page-sauna .greeting-text p{ margin:0; line-height:1.9; }

/* 右カラム（大画像）— サイズ統一・上端揃え */
.page-sauna .greeting-photo{
  align-self:start;
  height:100%;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.page-sauna .greeting-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 下4枚グリッド — 左カラムの“下端”に固定し、幅いっぱい4等分 */
.page-sauna .greeting-text .instagram-photos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  width:100%;
  margin-top:auto !important;   /* 下端吸着を最優先（mt-16の競合対策） */
  margin-bottom:0;
}

/* サウナ用Instagramタイル（他ページ非干渉のためスコープ付け） */
.page-sauna .instagram-photos {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.page-sauna .instagram-photos > li { list-style:none; }
.page-sauna .instagram-photos > li::marker { content:""; }
.page-sauna .instagram-photos img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  aspect-ratio:1 / 1;
  object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ===== CTA（/about と同デザイン） ===== */
.page-sauna .cta-box{
  text-align:center;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:28px 20px;
  margin-top:auto;              /* 右画像の下端に合わせる */
  box-shadow:none;
}
.page-sauna .cta-tel{ font-size:28px; font-weight:800; letter-spacing:1px; margin:0 0 6px; }
.page-sauna .cta-hours{ margin:0 0 16px; color:#333; }
.page-sauna .btn-primary{
  display:inline-block; padding:12px 22px; border-radius:8px;
  background:#000; color:#fff; text-decoration:none; transition:opacity .2s ease;
}
.page-sauna .btn-primary:hover{ opacity:.85; }
.page-sauna .cta-note{ margin-top:10px; font-size:12px; color:#555; }

/* ===== ブランド紹介（/about準用・安定表示） ===== */
.page-sauna .brand-box .brand-intro{
  display:grid;
  grid-template-columns:minmax(200px,220px) 1fr; /* 左ロゴは最大220px */
  gap:20px;
  align-items:center;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.page-sauna .brand-box .brand-logo{
  width:100%;
  max-width:220px;
  justify-self:start;           /* 左寄せ固定（中央寄せの崩れ防止） */
}
.page-sauna .brand-box .brand-logo img{
  display:block;
  width:100%;
  height:auto;
}
.page-sauna .brand-box .brand-copy{ align-self:center; }
.page-sauna .brand-box .brand-copy .brand-lead{ font-weight:800; margin:0 0 6px; }

/* 余白ユーティリティ（!importantは使わない） */
.page-sauna .mt-16{ margin-top:16px; }

/* ① アクセス行だけ：地図を広めに（住所｜地図 = 1.2 : 1.6） */
.page-sauna .greeting-wrap.access-compact{
  grid-template-columns: minmax(0,1.2fr) minmax(0,1.6fr);
  gap:16px;
}

/* ② 見た目の中央に微調整（任意） */
@media (min-width: 1025px){
  .page-sauna .greeting-wrap.access-compact{ transform: translateX(-3%); }
}

/* 住所＝右寄せ / 地図＝列幅いっぱい */
.page-sauna .greeting-wrap.access-compact .greeting-text{
  align-items:flex-end;
  text-align:right;
}
.page-sauna .greeting-wrap.access-compact .greeting-photo{ justify-self:stretch; }
.page-sauna .greeting-wrap.access-compact .greeting-photo iframe{
  display:block; width:100%; height:100%;
}
/* === /sauna：各セクションの段落を中央寄せ（例外あり） === */

/* セクション直下にあるリード段落（タイトルの下に単独で置く <p>） */
.page-sauna .company-section > .container > p {
  text-align: center;
  margin: 0 auto 18px;
  line-height: 1.9;
  max-width: 820px; /* 読みやすい行幅 */
}

/* グリッド本文（左カラム）も中央寄せ */
.page-sauna .greeting-text p {
  text-align: center;
}

/* 例外：アクセスセクションの住所系は左寄せを維持 */
.page-sauna .company-section .greeting-wrap.access-compact .greeting-text p {
  text-align: left !important;
}

/* =========================================================
   /sauna モバイル統合ブロック（PC/タブレットは非干渉）
   ========================================================= */
@media screen and (max-width: 768px) {
  /* 横幅を広く（左右余白のみ圧縮） */
  .page-sauna .container { padding-left:16px; padding-right:16px; }

  /* キャッチ（ヒーロー直下の最初の h2）を必ず1行に・軽く縮小 */
  .page-sauna > .company-section:first-of-type .container > h2 {
    white-space: nowrap;
    font-size: clamp(16px, 4.6vw, 18px);
    line-height: 1.25;
    letter-spacing: 0.3px;
  }
  /* 既存の .catch-main が残っている場合の後方互換（あれば効く） */
  .page-sauna .catch-main {
    white-space: nowrap;
    font-size: clamp(16px, 4.6vw, 18px);
    line-height: 1.25;
    letter-spacing: 0.3px;
  }

  /* 各セクション見出し（.section-title）も1行固定に統一 */
  .page-sauna h2.section-title,
  .page-sauna .section-title {
    white-space: nowrap;
    font-size: clamp(16px, 4.6vw, 18px);
    line-height: 1.25;
    letter-spacing: 0.3px;
  }

  /* === 重なりの主因を解除：固定高さ/自動下寄せを無効化 === */
  .page-sauna .greeting-wrap{
    grid-template-columns:1fr;
    gap:18px;
    height:auto !important;            /* ← var(--side-h) を無効化 */
  }
  .page-sauna .greeting-text,
  .page-sauna .greeting-photo{
    min-height:auto !important;
    height:auto !important;
  }
  /* PCで「下端に吸着」させていた指定を通常の余白へ */
  .page-sauna .cta-box{ margin-top:12px !important; }
  .page-sauna .greeting-text .instagram-photos{ margin-top:8px !important; }

  /* 画像/地図が親の高さに依存しないように */
  .page-sauna .greeting-photo img{ height:auto !important; }
  /* 画像/地図（アクセス“以外”）の既定 */
  .page-sauna .greeting-wrap:not(.access-compact) .greeting-photo iframe{
    position:static;
    display:block;
    width:100%;
    height:320px;
    border:0;
  }

  /* ブランド紹介：1カラム＋中央寄せ */
  .page-sauna .brand-box .brand-intro{ grid-template-columns:1fr; text-align:center; }
  .page-sauna .brand-box .brand-logo { max-width:280px; margin:0 auto; justify-self:center; }

  /* Instagram（4枚）をスマホで 2列×2段にする（強いセレクタ＋!important） */
  .page-sauna .greeting-text .instagram-photos{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
    margin-top: 8px;    /* 任意：上のテキストとの間隔 */
  }
  /* ===== アクセス専用：住所→地図の2段（他へ非干渉） ===== */
  .page-sauna .company-section .greeting-wrap.access-compact{
    display:block !important;      /* グリッド指定を無効化して縦積み */
    margin:0;
  }
  /* 住所＝上・左寄せ */
  .page-sauna .company-section .greeting-wrap.access-compact .greeting-text{
    text-align:left !important;
    margin:0 0 12px !important;
  }
  .page-sauna .company-section .greeting-wrap.access-compact .greeting-text p{
    margin:0 0 6px !important;
    text-align:left !important;
  }
  /* 地図＝下（親に高さ→iframeをフィット） */
  .page-sauna .company-section .greeting-wrap.access-compact .greeting-photo{
    position:relative !important;
    width:100% !important;
    aspect-ratio:16 / 9;           /* 器の高さを作る */
    border-radius:8px;
    overflow:hidden;
  }
  .page-sauna .company-section .greeting-wrap.access-compact .greeting-photo iframe{
    position:absolute !important;  /* 先の position: static を局所上書き */
    inset:0 !important;
    width:100% !important;
    height:100% !important;        /* 先の height:320px を上書き */
    border:0 !important;
    display:block !important;
  }
  /* CTA見出しをSPで一行固定 */
  .page-sauna .cta-box .cta-tel {
    white-space: nowrap;                 /* 改行禁止（必須） */
    font-size: clamp(18px, 4.4vw, 20px); /* 28px→縮小して収まり優先 */
    letter-spacing: 0.2px;               /* 字間を少し詰める */
    line-height: 1.2;
  }
}


/* ≤640px：さらに余白を軽く（PC側は非変更） */
@media screen and (max-width: 640px) {
  .page-sauna .company-section { padding:52px 0; }
}