/* =======================================================
   温泉ページ専用：露天風呂 左右交互ブロークングリッド（100点満点・重なり修正版）
   ※親クラスのみで制御するため、中身のブロックへの個別クラス付与は不要です
======================================================= */

/* ---------------------------------------------------
   全体ラッパー
--------------------------------------------------- */
.p-onsen-broken-grid {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: clamp(80px, 10vw, 120px) 5% !important; 
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}

/* ---------------------------------------------------
   各行（Row）：強制的に横並び
--------------------------------------------------- */
.p-onsen-broken-grid .c-broken-row {
    display: flex !important;
    align-items: flex-start !important; 
    justify-content: space-between !important;
    flex-direction: row !important;
    margin-bottom: clamp(100px, 15vw, 180px) !important;
    position: relative !important;
}

.p-onsen-broken-grid .c-broken-row:last-child {
    margin-bottom: 0 !important;
}

.p-onsen-broken-grid .c-broken-row:nth-child(even) {
    flex-direction: row-reverse !important;
}

/* ---------------------------------------------------
   画像ブロック（全体の56%）
--------------------------------------------------- */
.p-onsen-broken-grid .c-broken-row > .wp-block-image {
    display: block !important;
    width: 56% !important; 
    max-width: none !important;
    margin: 0 !important;
    flex: none !important; /* ★追加：ブラウザの勝手な縮小を防ぎ、サイズを絶対死守する */
    position: relative !important;
    z-index: 1 !important;
}

.p-onsen-broken-grid .c-broken-row > .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important; 
    object-fit: cover !important;
    border-radius: 0 !important; 
}

/* ---------------------------------------------------
   テキストのグループブロック（全体の48%）
--------------------------------------------------- */
.p-onsen-broken-grid .c-broken-row > .wp-block-group {
    display: block !important;
    width: 48% !important; 
    max-width: none !important;
    flex: none !important; /* ★追加：ブラウザの勝手な縮小を防ぎ、重なりを復活させる */
    
    /* ★重なり調整：上からのズレを少し浅くし、画像へ8%だけ重ねる */
    margin: 6% 0 -3% -8% !important; 
    
    background-color: rgba(255, 255, 255, 0.96) !important; 
    backdrop-filter: blur(8px) !important; 
    padding: clamp(40px, 5vw, 55px) clamp(40px, 4.5vw, 55px) !important; 
    
    position: relative !important;
    z-index: 2 !important;
    border: none !important; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.04) !important; 
    box-sizing: border-box !important;
}

/* 偶数行はマイナスマージンの向きを反転 */
.p-onsen-broken-grid .c-broken-row:nth-child(even) > .wp-block-group {
    margin: 6% -8% -3% 0 !important;
}

/* ---------------------------------------------------
   テキストエリア内の各要素を自動指定
--------------------------------------------------- */
/* マイクロコピー */
.p-onsen-broken-grid .c-broken-row > .wp-block-group > p:first-of-type {
    display: block !important;
    font-size: 0.85rem !important;
    color: #8a1c1c !important;
    letter-spacing: 0.2em !important; 
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-weight: 400 !important;
}

/* 見出し（H2・H3） */
.p-onsen-broken-grid .c-broken-row > .wp-block-group > h2,
.p-onsen-broken-grid .c-broken-row > .wp-block-group > h3 {
    display: block !important;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important; 
    color: #1a1a1a !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    word-break: keep-all !important; 
    overflow-wrap: break-word !important;
}

/* 最後の段落（本文） */
.p-onsen-broken-grid .c-broken-row > .wp-block-group > p:last-of-type {
    display: block !important;
    font-size: 0.95rem !important;
    color: #333333 !important; 
    margin: 0 !important;
    line-height: 2 !important; 
    letter-spacing: 0.08em !important;
}

/* ---------------------------------------------------
   レスポンシブ対応（スマホ表示）
--------------------------------------------------- */
@media screen and (max-width: 820px) {
    .p-onsen-broken-grid {
        padding: clamp(60px, 8vw, 100px) 0 !important;
    }

    .p-onsen-broken-grid .c-broken-row,
    .p-onsen-broken-grid .c-broken-row:nth-child(even) {
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 80px !important;
    }

    .p-onsen-broken-grid .c-broken-row > .wp-block-image {
        width: 100% !important;
    }

    .p-onsen-broken-grid .c-broken-row > .wp-block-group,
    .p-onsen-broken-grid .c-broken-row:nth-child(even) > .wp-block-group {
        width: 92% !important;
        margin: -50px auto 0 auto !important; 
        padding: 35px 25px !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05) !important;
    }
}









/* =======================================================
   温泉ページ専用：内湯（大浴場） スタンダード2カラム（プロ品質・完全妥協なし版）
======================================================= */

/* =======================================================
   スタンダードグリッド（内湯など）全体ラッパー
======================================================= */
.p-onsen-standard-grid {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    /* ↓ 上の余白を見出しに合わせて縮め、下は次のセクションのために広く残します */
    padding: clamp(20px, 4vw, 40px) 5% clamp(80px, 10vw, 120px) !important;
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}

/* ---------------------------------------------------
   各行（Row）：強制的に横並び ＋ 垂直中央揃え
--------------------------------------------------- */
.p-onsen-standard-grid .c-standard-row {
    display: flex !important;
    align-items: center !important; 
    justify-content: space-between !important;
    flex-direction: row !important;
    margin-bottom: clamp(100px, 15vw, 180px) !important;
}

.p-onsen-standard-grid .c-standard-row:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------
   画像ブロック（全体の52%：テキストの改行を美しくするため少し絞る）
--------------------------------------------------- */
.p-onsen-standard-grid .c-standard-row > .wp-block-image {
    display: block !important;
    width: 52% !important; /* ★55%から微調整 */
    margin: 0 !important;
}

.p-onsen-standard-grid .c-standard-row > .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important; 
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* ---------------------------------------------------
   テキストのグループブロック（全体の43%：1行の文字数を最適化）
--------------------------------------------------- */
.p-onsen-standard-grid .c-standard-row > .wp-block-group {
    display: block !important;
    width: 43% !important; /* ★40%から微調整して改行位置を改善 */
    padding: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ---------------------------------------------------
   テキストエリア内の各要素を自動指定
--------------------------------------------------- */
/* マイクロコピー（タグ） */
.p-onsen-standard-grid .c-standard-row > .wp-block-group > p:first-of-type {
    display: inline-block !important; 
    font-size: 0.75rem !important;
    color: #ffffff !important; 
    background-color: #8a1c1c !important; 
    letter-spacing: 0.25em !important; 
    margin-top: 0 !important;
    
    /* ★見出しとの距離を取り、タグ内の上下余白を増やして高級感を出す */
    margin-bottom: 30px !important; 
    padding: 10px 18px 10px 22px !important; 
    
    font-weight: 400 !important;
    border: none !important;
}

/* 見出し（H2・H3） */
.p-onsen-standard-grid .c-standard-row > .wp-block-group > h2,
.p-onsen-standard-grid .c-standard-row > .wp-block-group > h3 {
    display: block !important;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important; 
    color: #1a1a1a !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    
    /* ★漢字の詰まりを解消するため、文字間隔をゆったりと広げる */
    letter-spacing: 0.18em !important; 
    
    line-height: 1.5 !important;
    font-weight: 500 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

/* 最後の段落（本文） */
.p-onsen-standard-grid .c-standard-row > .wp-block-group > p:last-of-type {
    display: block !important;
    font-size: 0.95rem !important;
    color: #333333 !important;
    margin: 0 !important;
    line-height: 2.3 !important; /* ★行間をほんの少し広げて優雅に */
    letter-spacing: 0.08em !important;
    
    /* ★和文の改行ルールを厳格化し、変な位置での折り返しを防ぐ */
    line-break: strict !important; 
}

/* ---------------------------------------------------
   レスポンシブ対応（スマホ表示）
--------------------------------------------------- */
@media screen and (max-width: 820px) {
    .p-onsen-standard-grid {
        padding: clamp(60px, 8vw, 100px) 5% !important;
    }
    .p-onsen-standard-grid .c-standard-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 80px !important;
    }
    .p-onsen-standard-grid .c-standard-row > .wp-block-image {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    .p-onsen-standard-grid .c-standard-row > .wp-block-group {
        width: 100% !important;
    }
}









/* テキストエリア（左右の余白を少し減らし、文字の入る幅を確保） */
.p-onsen-catalog .wp-block-group {
    padding: clamp(25px, 3vw, 35px) clamp(20px, 2vw, 25px) !important;
}

/* マイクロコピー */
.p-onsen-catalog .wp-block-group > p:first-of-type {
    display: block !important;
    font-size: 0.75rem !important;
    color: #888888 !important; 
    letter-spacing: 0.15em !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* 見出し */
.p-onsen-catalog .wp-block-group > h2,
.p-onsen-catalog .wp-block-group > h3 {
    display: block !important;
    font-size: clamp(1.2rem, 1.8vw, 1.4rem) !important; 
    color: #1a1a1a !important;
    letter-spacing: 0.15em !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 15px !important;
}

/* 本文 */
.p-onsen-catalog .wp-block-group > p:last-of-type {
    display: block !important;
    font-size: 0.9rem !important;
    color: #555555 !important;
    line-height: 2 !important;
    margin: 0 !important;
    
    /* ★修正：狭い箱に合わせて文字間隔を締め、句読点の無駄な隙間を詰める */
    letter-spacing: 0.02em !important; 
    font-feature-settings: "palt" 1 !important; /* プロポーショナルメトリクス（自動文字詰め） */
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

/* =======================================================
   カタロググリッド（3カラムの風呂一覧など）
======================================================= */
.p-onsen-catalog {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    /* 上は直前の要素との連続性を持たせるため「中」の余白 */
    /* 下は次の「洗い場など」の見出しへ向けて「特大」の余白 */
    padding: clamp(40px, 6vw, 60px) 5% clamp(100px, 12vw, 160px) !important;
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}







/* =======================================================
   4. 洗い場・館内設備（2カラムカード・干渉完全ねじ伏せ版）
======================================================= */
/* 全体ラッパー：どこにクラスがあっても強制的に全幅グレー背景にする */
.p-onsen-facility,
[class*="p-onsen-facility"] {
    width: 100% !important;
    max-width: none !important; 
    background-color: #f8f8f8 !important; /* 薄グレー背景 */
    padding: clamp(80px, 10vw, 120px) 5% !important;
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
    margin-bottom: clamp(100px, 15vw, 180px) !important;
}

/* カラムのラッパー：中央に1100pxで固定 */
.p-onsen-facility .wp-block-columns,
[class*="p-onsen-facility"] .wp-block-columns {
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: clamp(30px, 5vw, 60px) !important; 
}

/* 個別のカード：強制的に「白背景」と「影」を付与 */
.p-onsen-facility .wp-block-column,
[class*="p-onsen-facility"] .wp-block-column {
    flex: 1 !important;
    background-color: #ffffff !important; /* 白いカード */
    margin: 0 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03) !important; 
    border-radius: 2px !important;
    overflow: hidden !important;
}

/* 画像比率の固定（16:9） */
.p-onsen-facility .wp-block-image,
.p-onsen-facility .wp-block-image img,
[class*="p-onsen-facility"] .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; 
    object-fit: cover !important;
    margin: 0 !important;
}

/* テキストエリア：何があっても「中央揃え」を強制する */
.p-onsen-facility .wp-block-group,
[class*="p-onsen-facility"] .wp-block-group {
    padding: clamp(30px, 4vw, 50px) clamp(20px, 3vw, 40px) !important;
    text-align: center !important; /* 中央揃え */
    background: transparent !important;
    box-shadow: none !important;
}

/* 見出し：前回の「下線」を完全に消去し、中央に配置 */
.p-onsen-facility .wp-block-group h2,
.p-onsen-facility .wp-block-group h3,
[class*="p-onsen-facility"] .wp-block-group h2,
[class*="p-onsen-facility"] .wp-block-group h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
    color: #1a1a1a !important;
    letter-spacing: 0.15em !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
    text-align: center !important;
    border-bottom: none !important; /* 前回の線を強制削除 */
    padding-bottom: 0 !important;
}

/* 本文：文字詰めと中央揃え */
.p-onsen-facility .wp-block-group p,
[class*="p-onsen-facility"] .wp-block-group p {
    font-size: 0.95rem !important;
    color: #555555 !important;
    line-height: 2 !important;
    margin: 0 !important;
    letter-spacing: 0.05em !important;
    font-feature-settings: "palt" 1 !important;
    text-align: center !important;
}

/* 注意書き（※シャンプーなど）：文字を小さくしてグレーに */
.p-onsen-facility .wp-block-group p:last-of-type,
[class*="p-onsen-facility"] .wp-block-group p:last-of-type {
    margin-top: 15px !important;
    font-size: 0.85rem !important;
    color: #888888 !important;
}

/* レスポンシブ */
@media screen and (max-width: 820px) {
    .p-onsen-facility .wp-block-columns,
    [class*="p-onsen-facility"] .wp-block-columns {
        flex-direction: column !important;
        gap: 40px !important;
    }
}


/* =======================================================
   5. 温泉成分表（高級和モダンテーブル）
======================================================= */
/* テーブル全体を包むラッパー */
.p-onsen-table-wrapper {
    width: 100% !important;
    max-width: 900px !important; /* 画面幅いっぱいにせず、少し絞って品を出す */
    margin: 0 auto clamp(80px, 12vw, 150px) !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}

/* テーブル本体の線引き */
.p-onsen-table-wrapper table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    border-top: 1px solid #1a1a1a !important; /* 表の上を引き締める墨線 */
    border-bottom: 1px solid #1a1a1a !important; /* 表の下を引き締める墨線 */
}

/* セル共通の余白と線 */
.p-onsen-table-wrapper th,
.p-onsen-table-wrapper td {
    border: none !important;
    border-bottom: 1px solid #eaeaea !important; /* 中は極細の薄い線のみ */
    padding: clamp(20px, 3vw, 30px) clamp(15px, 2vw, 25px) !important;
    vertical-align: top !important;
    text-align: left !important;
    background-color: transparent !important;
}

/* 一番下のセルの下線を消す（tableのbottom線に任せる） */
.p-onsen-table-wrapper tr:last-child th,
.p-onsen-table-wrapper tr:last-child td {
    border-bottom: none !important; 
}

/* 左側の項目名（th） */
.p-onsen-table-wrapper th {
    width: 25% !important; /* 項目名の幅を固定して整然とさせる */
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    color: #1a1a1a !important;
    letter-spacing: 0.15em !important;
    white-space: nowrap !important; 
}

/* 右側の内容（td） */
.p-onsen-table-wrapper td {
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    color: #333333 !important;
    line-height: 2 !important;
    letter-spacing: 0.05em !important;
    font-feature-settings: "palt" 1 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

/* テーブル下の注記 */
.p-onsen-table-wrapper .c-table-note {
    margin-top: 20px !important;
    font-size: 0.85rem !important;
    color: #888888 !important;
    text-align: right !important; /* 注記は右下にひっそりと配置 */
    letter-spacing: 0.05em !important;
}

/* レスポンシブ対応（スマホで縦積みに切り替え） */
@media screen and (max-width: 768px) {
    .p-onsen-table-wrapper th,
    .p-onsen-table-wrapper td {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
    }
    .p-onsen-table-wrapper th {
        border-bottom: none !important;
        padding-bottom: 5px !important;
        color: #8a1c1c !important; /* スマホでは項目名に少し和の赤色を付けて視認性を上げる */
    }
    .p-onsen-table-wrapper td {
        padding-top: 0 !important;
        border-bottom: 1px solid #eaeaea !important;
    }
    .p-onsen-table-wrapper tr:last-child td {
        border-bottom: none !important;
    }
}



/* =======================================================
   6. 温泉の恵み（フィーチャーセクション）
======================================================= */
.p-onsen-benefit {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto clamp(100px, 15vw, 180px) !important; /* マージン上部は0に戻す */
    padding: clamp(100px, 12vw, 160px) 5% 0 !important; /* ★ここを変更：paddingを使って内側から上部を押し下げる */
    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
}

/* 見出し：堂々とした中央配置とゆとりのある文字間隔 */
.p-onsen-benefit h2,
.p-onsen-benefit h3 {
    text-align: center !important;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important;
    color: #1a1a1a !important;
    letter-spacing: 0.15em !important;
    margin-top: 0 !important;
    margin-bottom: clamp(40px, 6vw, 60px) !important;
    font-weight: 500 !important;
}

/* 画像：16:9の比率でダイナミックに配置 */
.p-onsen-benefit .wp-block-image {
    width: 100% !important;
    margin: 0 0 clamp(40px, 6vw, 60px) 0 !important;
}

.p-onsen-benefit .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; 
    object-fit: cover !important;
}

/* 本文：幅を絞り、両端揃えで雑誌のような端正な文字組みに */
.p-onsen-benefit p {
    max-width: 840px !important; /* ★テキストが横に広がりすぎるのを防ぐ */
    margin: 0 auto !important; /* 中央寄せ */
    font-size: 0.95rem !important;
    color: #333333 !important;
    line-height: 2.2 !important;
    letter-spacing: 0.08em !important;
    text-align: justify !important; /* 両端揃え */
    text-justify: inter-ideograph !important; /* 和文の美しい両端揃え */
    font-feature-settings: "palt" 1 !important;
}

/* =======================================================
   4. 洗い場・館内設備（全体ラッパー）
======================================================= */
.p-onsen-facility,
[class*="p-onsen-facility"] {
    width: 100% !important;
    max-width: none !important; 
    background-color: #f8f8f8 !important; 
    padding: clamp(20px, 4vw, 40px) 5% clamp(80px, 10vw, 120px) !important;    box-sizing: border-box !important;
    font-family: "Noto Serif JP", serif !important;
    margin-bottom: 0 !important; /* ← ここを clamp(...) から 0 に変更しました */
}



/* =======================================================
   追加修正：露天風呂セクションの上下余白の最適化
======================================================= */
.p-onsen-broken-grid {
    padding-top: clamp(20px, 4vw, 40px) !important;
    padding-bottom: clamp(80px, 10vw, 120px) !important;
}






/* =======================================================
   ブロークングリッド（露天風呂など）の各行の設定
======================================================= */
.p-onsen-broken-grid .c-broken-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    /* ↓ 項目の連続性を保つため、余白を「特大」から「中〜大」へ引き締めました */
    margin-bottom: clamp(60px, 8vw, 100px) !important;
    position: relative !important;
}

/* 最後の項目の下には余白を作らない（親ブロックの余白に任せる） */
.p-onsen-broken-grid .c-broken-row:last-child {
    margin-bottom: 0 !important;
}