/* =======================================================
   サウナ：究極の「ととのい」コース（タイムライン）
======================================================= */
/* 全体を包むラッパー（線を通す基準点） */
.p-sauna-steps {
    width: 100% !important;
    max-width: 800px !important;
    margin: clamp(80px, 10vw, 120px) auto !important;
    /* ★修正：左のパディングを0にして、縦線と文字の「座標の原点」を完全に一致させる */
    padding: 0 5% 0 0 !important;
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
    position: relative !important;
}

/* 縦に貫く極細の線（儀式の繋がり） */
.p-sauna-steps::before {
    content: "" !important;
    position: absolute !important;
    top: 40px !important; /* ★修正：線の始まりを少し下げて、間延びを防ぐ */
    bottom: 0 !important;
    left: clamp(30px, 6vw, 50px) !important;
    width: 1px !important;
    background-color: #dcdcdc !important;
    z-index: 1 !important;
}

/* 各ステップのグループ */
.c-sauna-step {
    position: relative !important;
    margin-bottom: clamp(60px, 8vw, 100px) !important;
    padding-left: clamp(70px, 12vw, 100px) !important;
    z-index: 2 !important;
    
    /* ★追加：WordPressの自動中央寄せを強制解除し、基準の左端を縦線と完全に一致させる */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 最後のステップの下余白を消す */
.c-sauna-step:last-child {
    margin-bottom: 0 !important;
}

/* Step 1 などのテキスト装飾 */
.c-sauna-step-num {
    position: absolute !important;
    top: 0 !important;
    left: clamp(30px, 6vw, 50px) !important;
    transform: translateX(-50%) !important;
    background-color: #ffffff !important;
    color: #8a1c1c !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    padding: 24px 0 !important; /* ★修正：上下の白余白を10px→24pxに広げ、上品な「間」を作る */
    margin: 0 !important;
    writing-mode: vertical-rl !important;
}

/* ステップのタイトル（見出し） */
.c-sauna-step-title {
    font-size: clamp(1.2rem, 2vw, 1.4rem) !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 0.15em !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* 画像のスペーシングと比率固定 */
.c-sauna-step .wp-block-image {
    margin: 0 0 20px 0 !important;
    max-width: 480px !important;
}
.c-sauna-step .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
}

/* ステップの説明文 */
.c-sauna-step-desc {
    font-size: 0.95rem !important;
    color: #333333 !important;
    line-height: 2.2 !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
    text-align: justify !important;
    text-justify: inter-ideograph !important;
}









/* =======================================================
   サウナ：サウナ＆ととのい設備（ジグザグレイアウト）
======================================================= */
/* 背景を画面幅いっぱいに広げる大枠（男湯・女湯共通） */
.p-sauna-facilities {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(80px, 10vw, 120px) 0 !important; /* 上下余白のみ。左右は中身で制御 */
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}

/* ★修正：男湯・女湯の【中身の幅をミリ単位で完全統一】する鉄壁の指定 */
.p-sauna-facilities > * {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
}

/* タイムラインのStep見出し（h2） */
.p-sauna-facilities h2 {
    font-size: clamp(1.8rem, 3vw, 2.2rem) !important;
    color: #1a1a1a !important;
    margin: 0 auto clamp(60px, 8vw, 80px) auto !important;
    text-align: center !important;
    letter-spacing: 0.2em !important;
}

/* 各設備の項目（カラムブロック） */
.c-facility-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: clamp(60px, 8vw, 100px) !important;
    gap: clamp(40px, 6vw, 80px) !important;
}

/* 最後の項目の下余白を消す */
.c-facility-item:last-child {
    margin-bottom: 0 !important;
}

/* 偶数番目の項目を反転（ジグザグ）させる */
.c-facility-item:nth-of-type(even) {
    flex-direction: row-reverse !important;
}

/* カラム幅の完全50:50強制（コンテンツ量による押し負けを絶対に防ぐ） */
.c-facility-item > .wp-block-column {
    flex-basis: 50% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: 50% !important;
    min-width: 0 !important;
}

/* 画像サイズの完全強制統一 */
.c-facility-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

/* テキストエリア */
.c-facility-item-text {
    width: 100% !important;
    padding-right: 5% !important;
}

/* 偶数番目（反転時）のテキストエリアは左に余裕を持たせる */
.c-facility-item:nth-of-type(even) .c-facility-item-text {
    padding-right: 0 !important;
    padding-left: 5% !important;
}

/* キャプション（タグ化） */
.c-facility-item-caption {
    display: inline-block !important;
    font-size: 0.75rem !important;
    color: #8a1c1c !important;
    border: 1px solid #8a1c1c !important;
    padding: 4px 12px !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 0.15em !important;
}

/* メイン見出し（下線付き） */
.c-facility-item-title {
    font-size: clamp(1.4rem, 2vw, 1.6rem) !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    letter-spacing: 0.15em !important;
    font-weight: 500 !important;
}

/* 説明文 */
.c-facility-item-desc {
    font-size: 0.95rem !important;
    color: #444444 !important;
    line-height: 2.2 !important;
    margin: 0 0 30px 0 !important;
    text-align: justify !important;
}

/* スペック情報のラッパー（情報ボックス） */
.c-facility-item-spec {
    background-color: #fafafa !important;
    border-left: 3px solid #8a1c1c !important;
    padding: 15px 20px !important;
    margin: 0 !important;
}

/* スペック情報のタイトル */
.c-facility-item-spec-title {
    color: #8a1c1c !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 8px 0 !important;
}

/* スペック情報のテキスト */
.c-facility-item-spec-text {
    font-size: 0.9rem !important;
    color: #333333 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* =======================================================
   女湯セクション専用のデザイン上書き（別世界の演出）
======================================================= */
/* 背景色を「はっきり違いが分かる灰桜色」へ再修正 */
.p-sauna-facilities.is-women {
    background-color: #f2e8e8 !important; /* 白（男湯）との違いが明確に出るトーン */
}

/* 画像に少しだけ柔らかい丸み（12px）を持たせる */
.p-sauna-facilities.is-women .c-facility-item img {
    border-radius: 12px !important;
}

/* タグのデザインを「塗りつぶし＋楕円の角丸」にして優美さを演出 */
.p-sauna-facilities.is-women .c-facility-item-caption {
    background-color: #8e354a !important; /* 蘇芳（すおう）色：深みのある紫赤 */
    color: #ffffff !important;
    border-color: #8e354a !important;
    border-radius: 20px !important;
}

/* スペック情報ボックスのアクセントカラー変更と、背景を白にして際立たせる調整 */
.p-sauna-facilities.is-women .c-facility-item-spec {
    border-left-color: #8e354a !important;
    background-color: #ffffff !important;
}

.p-sauna-facilities.is-women .c-facility-item-spec-title {
    color: #8e354a !important;
}









/* =======================================================
   サウナ：クールダウン ＆ 外気浴（カードレイアウト）
======================================================= */
/* セクション全体（ワイヤーに合わせた極薄いグレー背景） */
.p-sauna-cooldown {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(80px, 10vw, 120px) 0 !important;
    background-color: #fafafa !important; /* 空間を区切る極薄いグレー */
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}

/* 中身の幅をミリ単位で完全統一する鉄壁の指定 */
.p-sauna-cooldown > * {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
}

/* セクション見出し（h2） */
.p-sauna-cooldown h2 {
    font-size: clamp(1.8rem, 3vw, 2.2rem) !important;
    color: #1a1a1a !important;
    margin: 0 auto clamp(50px, 6vw, 70px) auto !important;
    text-align: center !important;
    letter-spacing: 0.2em !important;
}

/* カラム間（カード同士）の余白調整 */
.c-cooldown-grid {
    gap: clamp(30px, 4vw, 50px) !important;
}

/* ★デザインの核：カード全体の枠組み（額縁） */
.c-cooldown-card {
    background-color: #ffffff !important;
    border: 1px solid #e8e8e8 !important; /* 繊細で品のある極細枠 */
    border-radius: 8px !important; /* 和モダンに適した控えめな角丸 */
    overflow: hidden !important; /* 画像が角丸からはみ出さないようにする */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* 左右のカードでテキスト量が違っても高さを完璧に揃える */
    transition: box-shadow 0.4s ease !important;
}

/* ホバー時の微かな浮遊感（高級旅館の建具のような手触り） */
.c-cooldown-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

/* カード内の画像リセットと比率固定 */
.c-cooldown-card .wp-block-image {
    margin: 0 !important;
}

.c-cooldown-card .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important; /* ワイヤーに近い、少し横長の落ち着いた比率 */
    object-fit: cover !important;
    display: block !important; /* 画像の下にできる謎の隙間を消すプロの小技 */
}

/* カードのテキストエリア（余白の美） */
.c-cooldown-card-body {
    padding: clamp(30px, 4vw, 40px) clamp(25px, 3vw, 35px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* 高さを揃えるための魔法 */
}

/* カード内の見出し（h3） */
.c-cooldown-card-body h3 {
    font-size: clamp(1.2rem, 1.5vw, 1.4rem) !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #f0f0f0 !important; /* 見出しと本文を区切る極細の線 */
    padding-bottom: 15px !important;
}

/* カード内の説明文 */
.c-cooldown-card-body p {
    font-size: 0.95rem !important;
    color: #555555 !important;
    line-height: 2.0 !important;
    margin: 0 !important;
    text-align: justify !important;
}

/* =======================================================
   クールダウンセクション：見出しのベースライン統一（上書き）
======================================================= */
.c-cooldown-card-body h3 {
    /* ベースラインを揃えるためのプロのアプローチ */
    display: flex !important;
    align-items: flex-end !important; /* テキストを強制的に下揃えにする */
    min-height: 3em !important; /* 2行分の高さを確保 */
    line-height: 1.5 !important;
    text-align: left !important; /* エディターの中央揃えを左揃えに上書き */
    
    /* 既存の装飾 */
    font-size: clamp(1.2rem, 1.5vw, 1.4rem) !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 15px !important;
}

/* 説明文も左揃えにするための再掲（念のため） */
.c-cooldown-card-body p {
    text-align: left !important;
}









/* =======================================================
   サウナ：オリジナル・サウナグッズ販売（ギャラリー風4列）
======================================================= */
/* セクション全体（ギャラリーの展示室） */
.p-sauna-goods {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(80px, 10vw, 120px) 0 !important;
    background-color: #f7f7f7 !important; /* ワイヤーに合わせた極薄いグレー結界 */
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}

/* 中身の幅をミリ単位で完全統一する鉄壁の指定 */
.p-sauna-goods > * {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
}

/* セクション見出し（h2） */
.p-sauna-goods h2 {
    font-size: clamp(1.8rem, 3vw, 2.2rem) !important;
    color: #1a1a1a !important;
    margin: 0 auto clamp(50px, 6vw, 70px) auto !important;
    text-align: center !important;
    letter-spacing: 0.2em !important;
}

/* 4カラムの強制統制（画面幅が縮んでも絶対に25%をキープ） */
.c-goods-grid {
    flex-wrap: nowrap !important;
    gap: clamp(15px, 2vw, 30px) !important;
}

.c-goods-grid > .wp-block-column {
    flex-basis: 25% !important;
    width: 25% !important;
    min-width: 0 !important;
}

/* 展示台（カード本体） */
.c-goods-card {
    background-color: #ffffff !important;
    border: 1px solid #e8e8e8 !important; /* 品のある極細枠 */
    border-radius: 4px !important; /* クールダウンより少し角を立たせ、ソリッドな印象に */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: box-shadow 0.4s ease !important;
}

/* ホバー時の微かな浮遊感 */
.c-goods-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* 画像の完全正方形化（1:1） */
.c-goods-card .wp-block-image {
    margin: 0 !important;
}

.c-goods-card .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* どんな画像を入れても美しい正方形で統一 */
    object-fit: cover !important;
    display: block !important;
}

/* テキストエリア（余白） */
.c-goods-card-body {
    padding: 25px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 商品名（エディトリアルなベースライン一致と中央揃え） */
/* ※h3でもp（段落）でも同じように効くように設計しています */
.c-goods-card-body h3,
.c-goods-card-body p {
    display: flex !important;
    align-items: center !important; /* オロポが2行になった際も縦の中央に美しく配置 */
    justify-content: center !important; /* 横の中央揃え */
    font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
    color: #333333 !important;
    margin: 0 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.6 !important;
    min-height: 3.2em !important; /* 2行分の空間を強制確保して底を揃える */
    text-align: center !important;
    font-weight: 500 !important;
}