/* style.css: LP用のスタイルシート */

/* ルート変数 */
:root {
    /* 色 */
    --background-color: #ffffff;
    --border-color: #d9d9d9;
    --border-color-light: #f0f0f0;
    --color-pink: #e27d93;
    --color-pink-dark: #dc5875;
    --color-yellow: #fdfdd5;
    --color-blue: #248ead;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gold: #c09618;
    --color-silver: #acabab;
    --color-bronze: #c98557;
    
    /* スペーシング - モバイルファースト */
    --spacing-8: clamp(0.23rem, 1.03vw, 0.5rem);
    --spacing-10: clamp(0.29rem, 1.28vw, 0.625rem);
    --spacing-15: clamp(0.44rem, 1.92vw, 0.94rem);
    --spacing-16: clamp(0.46rem, 2.05vw, 1rem);
    --spacing-20: clamp(0.58rem, 2.56vw, 1.25rem);
    --spacing-24: clamp(0.69rem, 3.08vw, 1.5rem);
    --spacing-30: clamp(0.87rem, 3.85vw, 1.875rem);
    --spacing-32: clamp(0.93rem, 4.10vw, 2rem);
    --spacing-35: clamp(1.02rem, 4.49vw, 2.19rem);
    --spacing-48: clamp(1.39rem, 6.15vw, 3rem);
    --spacing-60: clamp(1.74rem, 7.69vw, 3.75rem);
    --spacing-80: clamp(2.33rem, 10.26vw, 5rem);
    
    /* ギャップ - モバイルファースト */
    --gap-16: clamp(0.46rem, 2.05vw, 1rem);
    --gap-48: clamp(1.39rem, 6.15vw, 3rem);
    
    /* フォントサイズ - モバイルファースト */
    --font-size-small: clamp(0.625rem, calc(0.5rem + 0.6vw), 1rem);
    --font-size-medium: clamp(0.81rem, calc(0.625rem + 1.2vw), 1.5rem);
    --font-size-large: clamp(1.25rem, calc(1rem + 1.5vw), 2rem);
    
    /* キャッチフレーズフォントサイズ */
    --font-size-catchphrase: clamp(0.6rem, calc(0.5rem + 2.24vw), 1.6rem);
    --font-size-catchphrase-highlight: clamp(0.7rem, calc(0.6rem + 3.68vw), 2.4rem);
    
    /* テーブル関連フォントサイズ */
    --font-size-category: clamp(0.8rem, calc(0.7rem + 1.84vw), 2rem);
    --font-size-small-text: clamp(0.6rem, calc(0.5rem + 1.44vw), 1.5rem);
    --font-size-detail-label: clamp(0.6rem, calc(0.5rem + 0.96vw), 1.5rem);
    --font-size-detail-content: clamp(0.6rem, calc(0.5rem + 1.2vw), 1.5rem);
    --font-size-time-large: clamp(0.8rem, calc(0.7rem + 1.84vw), 2rem);
    --font-size-time-unit: clamp(0.7rem, calc(0.6rem + 1.6vw), 1.5rem);
    
    /* 価格表示フォントサイズ */
    --font-size-price-large: clamp(1rem, calc(0.9rem + 2.4vw), 2.4rem);
    --font-size-price-medium: clamp(0.9rem, calc(0.8rem + 2vw), 2rem);
    --font-size-price-unit: clamp(0.6rem, calc(0.5rem + 1.44vw), 1.2rem);
    --font-size-price-small: clamp(0.5rem, calc(0.4rem + 1.6vw), 1.2rem);
    
    /* 高さとサイズ */
    --height-category: clamp(2.5rem, calc(1.875rem + 3.8vw), 3.75rem);
    --height-detail-row: clamp(5rem, calc(3.75rem + 8vw), 7.94rem);
    --height-detail-header: clamp(3.125rem, calc(2.5rem + 4vw), 5.44rem);
    --width-detail-label: clamp(3.75rem, 15vw, 7.5rem);
    --width-clinic-name: calc(8rem / 49.25rem * 100%);
    
    /* ボーダー幅 */
    --border-width-standard: 0.125rem;
    
    /* パディング値 */
    --padding-content: clamp(0.94rem, calc(0.75rem + 2.5vw), 1.875rem);
    --padding-clinic-name: clamp(1.25rem, calc(0.94rem + 2.5vw), 1.875rem);
    --padding-detail-header: clamp(0.75rem, calc(0.5rem + 1.5vw), 1.25rem);
    
    /* フォントファミリー */
    --font-family-base: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Avenir Next',sans-serif;;
    
    /* アニメーション */
    --transition-hover: transform 0.3s ease;
    --scale-hover-small: scale(1.02);
    --scale-hover-medium: scale(1.05);
    
    /* ボーダー */
    --border-standard: 0.0625rem solid var(--border-color);
    --border-radius-button: 1rem;
    --border-radius-header: 1.875rem 1.875rem 0 0;
    --border-radius-detail: clamp(0.25rem, 1.0vw, 0.5rem);
    
    /* シャドウ */
    --box-shadow-button: 0.125rem 0.125rem 0.125rem 0rem rgba(0,0,0,0.2);
}

/* ベーススタイル */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    line-height: 1.6;
    /* 背景グラデーションの適用 */
    background: linear-gradient(to right, #faaca866, #ddd6f366);
}

/* メインコンテナ */
.__wrapper {
    max-width: 780px;
    margin: 0 auto;
    background-color: var(--background-color);
    overflow: hidden;
}

/* ヘッダースタイル */
.__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(9px, 1.15vw, 9px) var(--spacing-16);
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color-light);
    position: sticky;
    top: 0;
    z-index: 100;
}

.__header_logo {
    margin: 0;
    padding: 0;
    align-items: center;
    width: calc(242 / 780 * 100%);
}

.__header_logoImg img {
    display: block;
    max-width: 242px;
    width: 100%;
    height: auto;
}

.__header_pr{
    width: calc(69 / 780 * 100%);
}
.__header_pr img {
    display: block;
    width: 100%;
    height: auto;
}
.__pickup {
    padding: var(--spacing-24) var(--spacing-32) var(--spacing-48);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.__pickup_text {
    margin-bottom: 1.5rem;
    text-align: center;
    width: calc(692 / 716 * 100%);
}

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

.__pickup_bnr {
    margin-bottom: var(--spacing-48);
    width: 100%;
    display: flex;
    justify-content: center;
}

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

.__pickup_cta {
    width: calc(600 / 716 * 100%);
}

.__pickup_cta a {
    display: block;
    transition: var(--transition-hover);
}

.__pickup_cta a:hover {
    transform: var(--scale-hover-small);
}

.__pickup_cta img {
    width: 100%;
    height: auto;
}

.__point01{
    .__point_text{
        margin: auto;
        width: calc(592 / 716 * 100%);
    }
    .__point_contents{
        display: flex;
        flex-direction: column;
        gap: var(--gap-48);
        padding: var(--spacing-48) var(--spacing-32) var(--spacing-60);
    }
}
.__point02{
    .__point_contents{
        padding: var(--spacing-48) var(--spacing-32);
        p:first-of-type {
            margin-bottom: var(--spacing-16);
        }
    }
}

/* Point03 ランキングテーブル */
.__point03 {
    .__point_contents {
        padding: var(--spacing-48) var(--spacing-32) var(--spacing-60);
    }
    
    /* ===== テーブル基本設定 ===== */
    .__ranking_table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: var(--spacing-32);
        table-layout: fixed;
        border: 0;
    }

    /* ===== ランキングヘッダー ===== */
    .__ranking_header th {
        width: 33.333%;
        border-radius: var(--border-radius-header);
        text-align: center;
        vertical-align: middle;
        padding: 20px 0;
    }

    .__ranking_1 {
        background-color: var(--color-gold);
    }

    .__ranking_2 {
        background-color: var(--color-silver);
    }

    .__ranking_3 {
        background-color: var(--color-bronze);
    }

    .__ranking_header img {
        width: 34.45%;
        height: auto;
    }

    /* ===== カテゴリヘッダー行 ===== */
    .__category_row td {
        background-color: var(--color-pink);
        color: var(--color-yellow);

        font-weight: bold;
        font-size: var(--font-size-category);
        text-align: center;
        line-height: var(--height-category);
        height: var(--height-category);
        border: none;
    }

    .__small_text {
        font-size: var(--font-size-small-text);
    }

    /* ===== コンテンツ行 ===== */
    .__content_row td {
        text-align: center;
        vertical-align: middle;
        border: var(--border-standard);
        border-top: none;
        padding: var(--padding-content) var(--spacing-15);
    }

    /* 診察料など行の特別なスタイル */
    .__consultation_fee_content_row td {
        vertical-align: top;
        padding-top: var(--spacing-35);
        padding-bottom: var(--spacing-20);
    }

    /* ===== セル基本設定 ===== */
    .__cell {
        text-align: center;
        vertical-align: middle;
        border: var(--border-standard);
        border-top: none;
        padding: var(--padding-content) var(--spacing-20);
    }

    /* セル背景色 */
    .__cell_1,
    .__clinic_1 {
        background-color: var(--color-yellow);
    }

    .__cell_2,
    .__cell_3,
    .__clinic_2,
    .__clinic_3 {
        background-color: var(--color-white);
    }
    .__cell_annotation {
        font-weight: normal;
        font-size: var(--font-size-small);
    }

    /* ===== クリニック名行 ===== */
    .__clinic_name_row td {
        text-align: center;
        vertical-align: top;
        border: var(--border-standard);
        border-top: none;
        padding: var(--padding-clinic-name) var(--spacing-20);
    }

    .__clinic_banner {
        margin-bottom: var(--spacing-16);
    }

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

    .__clinic_name {
        font-size: var(--font-size-medium);
        color: #248EAD;
        line-height: 1.5;
        text-decoration: underline;
        font-weight: bold;
    }

    /* ===== 評価アイコン ===== */
    .__evaluation_icon {
        margin-bottom: var(--spacing-20);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .__evaluation_icon img {
        width: clamp(2.5rem, calc(1.875rem + 4vw), 4rem);
        height: clamp(2.5rem, calc(1.875rem + 4vw), 4rem);
        max-width: clamp(2.5rem, calc(1.875rem + 4vw), 4rem);
        max-height: clamp(2.5rem, calc(1.875rem + 4vw), 4rem);
    }

    /* ===== セルコンテンツ ===== */
    .__cell_content {

        font-weight: bold;
        font-size: var(--font-size-medium);
        color: var(--color-black);
        line-height: 1.3;
    }

    .__cell_annotation {
        font-size: var(--font-size-small);
        display: inline-block;
    }

    /* ===== 価格表示 ===== */
    .__price_main {
        font-size: var(--font-size-medium);
    }

    .__price_unit,.__time_unit {
        font-size: var(--font-size-small);
    }

    .__price_tax {

        font-weight: normal;
        font-size: var(--font-size-small);
        display: inline-block;
    }

    .__fee_label {
        font-size: var(--font-size-small);
        display: block;
        margin-bottom: var(--spacing-8);
    }

    /* ===== CTAボタン行 ===== */
    .__cta_row td {
        background-color: var(--color-white);
        border: var(--border-standard);
        border-top: none;
        padding: var(--spacing-24);
        vertical-align: middle;
    }

    .__cta_row .__cell_1 {
        background-color: var(--color-yellow);
    }

    .__cta_button {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .__cta_button a {
        background-color: var(--color-pink-dark);
        color: var(--color-white);

        font-weight: bold;
        font-size: var(--font-size-medium);
        text-decoration: none;
        padding: var(--spacing-24);
        border-radius: var(--border-radius-button);
        box-shadow: var(--box-shadow-button);
        transition: var(--transition-hover);
        white-space: nowrap;
    }

    .__cta_button a:hover {
        transform: var(--scale-hover-medium);
    }

    /* ===== 注釈 ===== */
    .__ranking_notes {

        font-weight: normal;
        font-size: var(--font-size-small);
        color: var(--color-black);
        line-height: 1.6;
        margin-top: var(--spacing-32);
    }

    .__ranking_notes p {
        margin-bottom: var(--spacing-8);
    }

}

/* Clinic 詳細セクション */
.__clinic {

    /* ===== ヘッダー ===== */
    .__clinic_header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: var(--spacing-48);
        width: 100%;
        max-width: 780px;
        margin: 0 auto var(--spacing-48) auto;
    }

    .__clinic_header img {
        width: 100%;
        height: auto;
        display: block;
    }

    .__catchphrase {
        text-align: center;
        padding: 0 var(--spacing-32);
    }

    .__catchphrase p {
        font-size: var(--font-size-catchphrase);
        font-weight: bold;
        color: var(--color-blue);
        line-height: 1.5;
        margin: 0;
    }

    .__catchphrase .__highlight {
        font-size: var(--font-size-catchphrase-highlight);
        color: #E27D93;
    }

    /* ===== バナー ===== */
    .__banner {
        margin-bottom: var(--spacing-48);
        padding: 0 var(--spacing-32);
        max-width: 780px;
        margin-left: auto;
        margin-right: auto;
    }

    .__banner img {
        width: 100%;
        height: auto;
    }

    /* ===== テーブル ===== */
    .__details {
        padding: 0 var(--spacing-32);
        margin-bottom: var(--spacing-48);
    }

    .__detail_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1vw;
        max-width: 720px;
        margin: 0 auto;
    }

    .__detail {
        border: none;
        overflow: hidden;
        border-collapse: collapse;
        width: 100%;
    }

    .__detail_header th {
        background-color: #ab6ba6;
        padding: var(--padding-detail-header);
        text-align: center;
        color: var(--color-yellow);
        font-size: var(--font-size-category);
        font-weight: bold;
        border: none;
        height: var(--height-detail-header);
        border-radius: var(--border-radius-detail) var(--border-radius-detail) 0 0;
    }
    .__detail tbody{
        border-top: var(--border-width-standard) solid #D9D9D9;
        border-bottom: var(--border-width-standard) solid #D9D9D9;
    }
    .__detail_row {
        height: var(--height-detail-row);
        border-bottom: var(--border-width-standard) solid #D9D9D9;
    }

    .__detail_row td {
        border-top: none;
        vertical-align: middle;
        height: var(--height-detail-row);
    }

    .__detail_row:first-child td {
        border-top: none;
    }

    .__detail_row:last-child {
        border-bottom: none;
    }

    .__detail_label {
        color: #ab6ba6;
        font-weight: bold;
        font-size: var(--font-size-detail-label);
        padding: 0.1875rem 0;
        width: var(--width-detail-label);
        text-align: center;
        border-right: none;
        white-space: nowrap;
        line-height: 1.2;
        box-sizing: border-box;
    }

    .__detail_label_inner {
        background-color: #ffebfc;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.25rem;
    }

    .__detail_content {
        text-align: center;
        font-weight: bold;
        color: #ab6ba6;
        font-size: var(--font-size-detail-content);
        line-height: 1.2;
        word-break: keep-all;
        box-sizing: border-box;
        padding: 0.1875rem 0;
    }

    .__detail_content_inner {
        background-color: var(--color-white);
        padding: 0 0.25rem;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-right: var(--border-width-standard) solid #D9D9D9;
        gap: 0.125rem;
    }

    /* LINE予約の横並びレイアウト */
    .__line_booking {
        white-space: normal;
    }

    .__line_booking .__detail_content_inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2vw;
        flex-direction: row;
    }

    .__line_booking img {
        flex-shrink: 0;
        width: clamp(30px, 8vw, 60px);
        height: clamp(30px, 8vw, 60px);
    }

    .__line_booking span {
        font-size: clamp(0.875rem, calc(0.75rem + 1.5vw), 2rem);
        line-height: 1.2;
    }

    /* 時間表示の横並び */
    .__detail_content_inner {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* 時間専用のコンテナ（24時間やブロック時間用） */
    .__detail_content_inner:has(.__time_large) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    /* 時間表示のwrapper */
    .__time_wrapper {
        display: inline-block;
        align-items: baseline;
        gap: 0.25rem;
    }

    .__time_large {
        font-size: var(--font-size-time-large);
        font-weight: bold;
    }

    .__time_block {
        display: inline-block;
    }

    .__time_unit {
        font-size: var(--font-size-time-unit);
    }

    .__price_large {
        font-size: var(--font-size-price-large);
    }

    .__price_medium {
        font-size: var(--font-size-price-medium);
        line-height: 1.2;
    }

    .__price_unit {
        font-size: var(--font-size-price-unit);
    }

    .__price_range {
        font-size: var(--font-size-price-unit);
        margin-left: 0.125rem;
    }


    .__price_small {
        font-size: var(--font-size-price-small);
        font-weight: normal;
        line-height: 1.2;
        display: block;
        margin-top: 0.125rem;
    }

    /* 価格行のレイアウト調整 */
    .__detail_content_inner .price-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
    }

    .__detail_content_inner .price-main-line {
        display: flex;
        align-items: baseline;
        gap: 0.125rem;
    }

    .__ok_text {
        font-size: var(--font-size-price-large);
    }

    .__line_booking {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: clamp(0.5rem, 1.5vw, 0.94rem);
        justify-content: center;
    }

    .__line_booking img {
        width: clamp(2.5rem, 7vw, 3.75rem);
        height: clamp(2.5rem, 7vw, 3.75rem);
    }

    .__line_booking span {
        font-size: clamp(0.69rem, calc(0.56rem + 1.2vw), 1.5rem);
        line-height: 1.2;
    }

    /* ===== おすすめポイント ===== */
    .__goodpoints {
        padding: 0 var(--spacing-32);
        margin-bottom: var(--spacing-48);
    }

    .__goodpoints_container {
        border: 4px solid var(--color-pink);
        border-radius: var(--spacing-16);
        padding: var(--spacing-48) var(--spacing-24);
        position: relative;
        max-width: 720px;
        margin: 0 auto;
    }

    .__goodpoints_title {
        position: absolute;
        top: -1.25rem;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--color-white);
        color: var(--color-pink-dark);
        font-size: clamp(0.875rem, calc(0.75rem + 1.2vw), 2rem);
        font-weight: bold;
        padding: 0 var(--spacing-16);
        margin: 0;
        white-space: nowrap;
    }

    .__goodpoints_list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-24);
    }

    .__point_item {
        display: flex;
        align-items: flex-start;
        gap: clamp(0.625rem, 2.2vw, 1.375rem);
    }

    .__check_icon {
        background-color: transparent;
        width: clamp(1.25rem, 4.4vw, 2.5rem);
        height: clamp(1.25rem, 4.4vw, 2.5rem);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .__check_icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .__point_item p {
        margin: 0;
        font-family: "Yu Gothic", "Meiryo", sans-serif;
        font-size: clamp(0.75rem, calc(0.625rem + 1.4vw), 2rem);
        line-height: 1.5;
        color: #4d4d4d;
        flex: 1;
        min-width: 0;
    }    .__highlight_text {
        color: #dc5875;
        font-weight: bold;
        background: linear-gradient(transparent 60%, #fff0a6 60%);
    }

    .__annotation {
        font-size: var(--font-size-small);
    }

    .__goodpoints_notes {
        margin-top: var(--spacing-32);
        font-size: var(--font-size-small);
        color: var(--color-black);
        line-height: 1.6;
    }

    .__goodpoints_notes p {
        margin: 0 0 var(--spacing-8) 0;
    }

    /* ===== クリニック予約ボタン ===== */
    .__clinic_reservation {
        padding: 0 var(--spacing-32);
        text-align: center;
        margin-bottom: var(--spacing-80);
    }

    .__clinic_reservation_button {
        display: inline-block;
        transition: var(--transition-hover);
    }

    .__clinic_reservation_button:hover {
        transform: var(--scale-hover-small);
    }

    .__clinic_reservation_button img {
        width: 100%;
        height: auto;
    }

}

/* 780px以上でのレスポンシブ無効化 */
@media (min-width: 780px) {
    :root {
        /* スペーシング - 780px以上で固定 */
        --spacing-8: 0.5rem;
        --spacing-10: 0.625rem;
        --spacing-15: 0.94rem;
        --spacing-16: 1rem;
        --spacing-20: 1.25rem;
        --spacing-24: 1.5rem;
        --spacing-30: 1.875rem;
        --spacing-32: 2rem;
        --spacing-35: 2.19rem;
        --spacing-48: 3rem;
        --spacing-60: 3.75rem;
        --spacing-80: 5rem;
        
        /* ギャップ - 780px以上で固定 */
        --gap-16: 1rem;
        --gap-48: 3rem;
        
        /* フォントサイズ - 780px以上で固定 */
        --font-size-small: 1rem;
        --font-size-medium: 1.5rem;
        --font-size-large: 2rem;
        
        /* キャッチフレーズフォントサイズ - 780px以上で固定 */
        --font-size-catchphrase: 2rem;
        --font-size-catchphrase-highlight: 3rem;
        
        /* テーブル関連フォントサイズ - 780px以上で固定 */
        --font-size-category: 2rem;
        --font-size-small-text: 1.5rem;
        --font-size-detail-label: 1.5rem;
        --font-size-detail-content: 1.5rem;
        --font-size-time-large: 2rem;
        --font-size-time-unit: 1.5rem;
        
        /* 価格表示フォントサイズ - 780px以上で固定 */
        --font-size-price-large: 3rem;
        --font-size-price-medium: 2.5rem;
        --font-size-price-unit: 1.5rem;
        --font-size-price-small: 1.5rem;
        
        /* 高さとサイズ - 780px以上で固定 */
        --height-category: 3.75rem;
        --height-detail-row: 7.94rem;
        --height-detail-header: 5.44rem;
        --width-detail-label: 7.5rem;
        
        /* パディング値 - 780px以上で固定 */
        --padding-content: 1.875rem;
        --padding-clinic-name: 1.875rem;
        --padding-detail-header: 1.25rem;
    }

    .__header {
        padding: 0.56rem var(--spacing-16);
    }

    .__point03 {
        .__category_row td {
            font-size: var(--font-size-category);
            line-height: var(--height-category);
        }

        .__small_text {
            font-size: var(--font-size-small-text);
        }

        .__content_row td {
            padding: var(--padding-content) var(--spacing-15);
        }

        .__clinic_name_row td {
            padding: var(--padding-clinic-name) var(--spacing-20);
        }

        .__evaluation_icon img {
            width: 4rem;
            height: 4rem;
            max-width: 4rem;
            max-height: 4rem;
        }

        .__clinic_name {
            font-size: 1.5rem;
        }
    }

    .__clinic {
        .__catchphrase p {
            font-size: var(--font-size-catchphrase);
        }

        .__catchphrase .__highlight {
            font-size: var(--font-size-catchphrase-highlight);
        }

        .__detail_wrapper {
            gap: 1rem;
        }

        .__detail_header th {
            padding: var(--padding-detail-header);
            font-size: var(--font-size-category);
            height: var(--height-detail-header);
        }

        .__detail_row {
            height: var(--height-detail-row);
        }

        .__detail_row td {
            height: var(--height-detail-row);
        }

        .__detail_label {
            font-size: var(--font-size-detail-label);
            width: var(--width-detail-label);
        }

        .__detail_content {
            font-size: var(--font-size-detail-content);
        }

        .__line_booking {
            gap: 0.94rem;
        }

        .__line_booking img {
            width: 3.75rem;
            height: 3.75rem;
        }

        .__line_booking span {
            font-size: 2rem;
        }

        /* 時間表示の横並び（デスクトップ用） */
        .__detail_content_inner {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .__detail_content_inner:has(.__time_large) {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.125rem;
        }

        .__time_wrapper {
            display: inline-block;
            align-items: baseline;
            gap: 0.25rem;
        }

        .__time_large {
            font-size: var(--font-size-time-large);
            font-weight: bold;
        }

        .__time_block {
            display: inline-block;
        }

        .__time_unit {
            font-size: var(--font-size-time-unit);
        }

        .__price_large {
            font-size: var(--font-size-price-large);
        }

        .__price_medium {
            font-size: var(--font-size-price-medium);
        }

        .__price_unit {
            font-size: var(--font-size-price-unit);
        }

        .__price_range {
            font-size: var(--font-size-price-unit);
        }

        .__price_small {
            font-size: var(--font-size-price-small);
        }

        .__ok_text {
            font-size: var(--font-size-price-large);
        }

        .__price_small {
            font-size: 1.125rem;
        }

        .__ok_text {
            font-size: var(--font-size-price-large);
        }

        .__line_booking {
            gap: 0.94rem;
        }

        .__line_booking span {
            font-size: 1.5rem;
        }

        .__goodpoints_title {
            font-size: 2rem;
        }

        .__point_item {
            gap: 1.375rem;
        }

        .__check_icon {
            width: 2.5rem;
            height: 2.5rem;
        }

        .__point_item p {
            font-size: 2rem;
        }
    }
}