/* =========================================================
   DOGGY'S ISLAND 会員制LP — sp.css（768px以下）
========================================================= */
/* SP専用改行：既定は非表示（PC）。SPでのみ表示に切り替える */
.br_sp {
    display: none;
}
@media (max-width: 768px) {
    /* SP専用改行を有効化 */
    .br_sp {
        display: inline;
    }
    /* 全体：コンテンツ幅を確保（左右余白を詰める） */
    .inner {
        padding: 0 20px;
    }
    /* タグライン：SPは非表示（情報は eyebrow が兼ねる／HV画像の見切れも防ぐ） */
    .tagline {
        display: none;
    }
    /* PC専用改行：SPでは非表示 */
    .br_pc_only {
        display: none;
    }
    /* ═══════════════════════════════════════════════════════
     HV（hero / mv）— SP独自レイアウト【完結型】
     
     ▼ 設計
     ・PCとは思想が異なるため、SP内で全要素を完結させる
     ・PC側の指定はすべて打ち消し、SPでの最終値を直接記述
     ・このブロックだけ読めば、SPのHVデザインが完全に把握できる
     
     ▼ 微調整ポイント
     ・帯位置・幅 → #mv のCSS変数 3つで完結
     ・各要素のサイズ → 各要素ブロック内のfont-size/padding
     ═══════════════════════════════════════════════════════ */
    /* ── 1. レイアウト基本：写真上・テキスト下の縦並び ── */
    #mv {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* MV写真〜募集の詳細・お問い合わせまでで100vhになるように */
        min-height: 100vh;
        background: linear-gradient(140deg,
                var(--ivory) 0%,
                #e4ece2 60%,
                var(--sand) 100%);
        overflow: hidden;
        /* 微調整変数（このHVブロック内でのみ使用）*/
        --hv-band-pad: 22px;
        /* 帯内の文字インデント */
        --hv-text-pad: 36px;
        /* 非帯テキスト（ロゴ/リード/ボタン）の左右余白 */
        --hv-band-right: 0px;
        /* タイトル帯の右側マージン（0=画面右端まで伸ばす）*/
    }
    /* ── 2. 写真：残り高さを埋め、MV＋ギャラリーで100vhに収まるよう自動調整 ── */
    .mv_photo {
        position: relative;
        /* PCのabsoluteを打ち消し */
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        flex: 1 1 auto;
        /* テキスト分を除いた残り高さを写真が吸収 */
        min-height: 320px;
        order: -1;
        /* テキストブロックの前に表示 */
    }
    .mv_photo .ph {
        height: 100%;
    }
    .mv_photo .ph img {
        object-position: 50% 25%;
    }
    /* ── 3. テキスト枠：左右paddingゼロ── */
    .mv_inner {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 0;
        /* PCの「0 50px 0 8vw」を打ち消し */
        flex: 0 0 auto;
    }
    .mv_body {
        padding: 16px 0 0;
        /* 天地を詰めて100vhに収める（ギャラリーとの間もさらに詰める）*/
        max-width: none;
        /* PCの「560px」を打ち消し */
    }
    /* ── 4. ロゴ（非帯要素：個別インデント）── */
    .mv_logo {
        margin-bottom: 16px;
        /* PCの「38px」を打ち消し */
        padding: 0 var(--hv-text-pad);
    }
    .mv_logo img {
        height: 45px;
    }
    /* ── 5. eyebrow（小見出し帯）：spanが帯本体、画面左端から開始 ── */
    .mv_eyebrow {
        margin-bottom: 10px;
        /* タイトルとの間をあける */
        margin-left: 0;
        padding: 0;
    }
    .mv_eyebrow span {
        /* spanの背景色・色・display:inline-blockはPCから継承 */
        font-size: 14px;
        line-height: 1.6;
        padding: 6px 8px 6px var(--hv-band-pad);
        /* spanの左paddingで文字を内側へ */
        min-width: min(84vw, 360px);
        /* タイトル帯と右端を揃える基準 */
        box-sizing: border-box;
        /* 緑下地の右側を少し透明にぼかす（タイトル白帯と同じ処理） */
        background: linear-gradient(to right, var(--green) 0%, var(--green) 70%, rgba(42, 138, 114, 0) 100%);
    }
    /* ── 6. タイトル帯 ×2：各行を個別の白帯にし、画面幅両端まで伸ばす ── */
    .mv_title {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* PCの flex-start を打ち消し、両帯を画面幅いっぱいに */
        gap: 4px;
        margin-bottom: 18px;
        padding-right: var(--hv-band-right);
        /* 0=画面右端まで伸ばす */
    }
    .mv_title_line {
        display: block;
        /* PCの inline-block を上書き（stretchを効かせる）*/
        padding: 6px 12px 6px var(--hv-band-pad);
        margin-left: 0;
        /* 白下地の右側を少し透明にぼかす */
        background: linear-gradient(to right, #fff 0%, #fff 70%, rgba(255, 255, 255, 0) 100%);
        box-shadow: none;
        /* 色・shadowはPCから継承しつつ背景のみ上書き */
    }
    .mv_title_sm {
        font-size: clamp(22px, 8.5vw, 28px);
        line-height: 1.2;
    }
    .mv_title_lg {
        font-size: clamp(32px, 12vw, 42px);
        line-height: 1.1;
    }
    /* ── 7. リード文（非帯要素）── */
    .mv_body .lead {
        font-size: 14px;
        line-height: 1.8;
        margin-top: 4px;
        /* リードを少し上に上げる（10→4）*/
        margin-bottom: 20px;
        padding: 0 var(--hv-text-pad);
        text-shadow: none;
    }
    .mv_body .lead .lead_gap {
        display: block;
        height: 6px;
    }
    /* ── 9. CTAボタン（HV内）：下部CTAと同様に横並び ── */
    .mv_btns {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 12px;
        margin-left: var(--hv-text-pad);
        margin-right: var(--hv-text-pad);
    }
    .mv_body .btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 8px 6px;
        font-size: 11px;
        letter-spacing: 0.02em;
        margin-bottom: 0;
        margin-left: 0;
    }
    .mv_btns .btn_gold {
        flex: 0.85 1 0;
        /* 入会を申し込む：少し幅狭く */
    }
    .mv_btns .btn_line {
        flex: 1.15 1 0;
        /* ルームツアーを予約する：少し幅広く（改行回避）*/
    }
    .mv_body .btn .arrow {
        margin-left: 6px;
    }
    .mv_detail_link {
        margin-left: var(--hv-text-pad);
        margin-bottom: 28px;
        /* 緑下地との間に余白 */
    }
    /* ═══════════════════════════════════════════════════════
     HV ブロックここまで
     ═══════════════════════════════════════════════════════ */
    /* section common：天地を全体的に詰める＋見出しは少し小さく（改行抑制） */
    .sec_title {
        font-size: 22px;
        margin-bottom: 24px;
    }
    .sec_lead {
        font-size: 12px;
        margin: 0 0 26px;
    }
    .sec_lead br {
        display: none;
    }
    /* SPは改行位置を成り行きに */
    section {
        padding: 48px 0;
    }
    /* benefits / facilities に効く */
    #moments {
        padding: 48px 0 60px;
    }
    /* PCの padding-bottom:100px を上書き */
    #cta {
        padding: 40px 0;
    }
    /* PCの 50px を上書き */
    /* #aerial は高さで管理（別途指定済み）／#price も別途指定済み */
    /* ── price：縦余白は詰め、各表（募集価格／内訳／プラン内容）の間はあける
        各コンテンツ内の行間も詰める ── */
    #price {
        padding: 40px 0;
        line-height: 1.55;
    }
    #price .inner {
        max-width: none;
    }
    #price .sec_title {
        font-size: 30px;
        margin-bottom: 18px;
    }
    .price_top h3 {
        margin-top: -10px;
        margin-bottom: 10px;
    }
    .price_main {
        line-height: 1;
    }
    .price_main .num {
        font-size: 76px;
        line-height: 1;
    }
    .price_main .unit {
        font-size: 26px;
        line-height: 1;
        margin-left: 1px;
    }
    .price_main .price_hontai {
        margin-top: 8px;
        margin-bottom: 4px;
    }
    .price_main .price_badge {
        width: 72px;
        height: 72px;
        margin-right: 12px;
        font-size: 13px;
        line-height: 1.35;
    }
    .price_note {
        margin-top: 8px;
        font-size: 11px;
    }
    /* 表内の余白は詰める */
    .price_grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 20px;
        align-items: start;
    }
    /* 各表の見出し↔中身は詰める */
    .price_col h3 {
        margin-top: 0;
        margin-bottom: 5px;
        margin-block-start: 0;
        margin-block-end: 5px;
    }
    /* PC用のflex高さ揃えをSPでは解除（.price_col下の余分な空きを消す） */
    .price_col {
        display: block;
        height: auto !important;
        min-height: 0;
        align-self: start;
    }
    .price_col .breakdown {
        flex: none;
        height: auto !important;
        width: auto;
        margin: 0 auto;
    }
    .price_col .breakdown tbody,
    .price_col .breakdown tr {
        height: auto !important;
    }
    .breakdown td {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .breakdown td:first-child,
    .breakdown td:last-child {
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        white-space: nowrap;
    }
    .breakdown td:first-child {
        text-align: right;
    }
    .breakdown td:last-child {
        text-align: left;
    }
    .breakdown .yen {
        font-size: 24px;
    }
    .price_points li {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
        padding: 3px 0;
    }
    .price_points dt,
    .price_points dd {
        text-align: center;
    }
    .pp_off .off_big strong {
        font-size: 32px;
    }
    .pp_fee dl {
        width: auto;
    }
    .pp_fee dd {
        text-align: center;
        padding-left: 0;
    }
    .price_accordion {
        margin-top: 24px;
    }
    .price_text {
        font-size: 13px;
        margin-top: 24px;
        margin-bottom: 12px;
    }
    .benefits_detail_link {
        margin-top: 0;
    }
    .price_note {
        margin-bottom: 10px;
    }
    .acc_head {
        font-size: 14px;
    }
    .acc_inner {
        font-size: 12px;
    }
    /* ── benefits：1カラム × 4行、幅75%でゆったり表示
    ▼ アプローチ
    2カラムを捨て、1カラムで縦に並べる。
    カード幅は75%で中央寄せ、写真はaspect-ratio 4:3で可変、
    本文は完全に表示される自然な高さに（高さ固定・overflow解除）── */
    #benefits .sec_title {
        margin-bottom: 26px;
    }
    .benefit_grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 30px !important;
        grid-template-columns: none !important;
    }
    .benefit_grid .benefit_card {
        display: flex !important;
        flex-direction: column !important;
        width: 75% !important;
        /* 写真を幅広く */
        height: auto !important;
        /* 高さ固定を解除（コンテンツに任せる）*/
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .benefit_card .ph {
        height: auto !important;
        aspect-ratio: 16/9;
        /* 幅広・やや低めの比率に変更 */
        flex: none !important;
        border-radius: 6px;
    }
    .benefit_card .body {
        height: auto !important;
        flex: none !important;
        padding: 8px 4px 0 !important;
        overflow: visible !important;
        border-bottom: none;
    }
    .benefit_card h4 {
        font-size: 19px;
        margin-bottom: 4px;
        white-space: normal !important;
        /* PCのnowrap、4枚目のnowrap指定を解除 */
        text-align: center;
    }
    .benefit_card p {
        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 0.03em;
        text-align: center;
    }
    .benefit_card p br {
        display: none;
    }
    /* ── facilities：写真の高さを小さく／見出しは1行に収まるサイズへ ── */
    #facilities .sec_title {
        margin-bottom: 14px;
        font-size: 17px;
        letter-spacing: 0.02em;
    }
    #facilities .sec_lead {
        font-size: 14px;
        letter-spacing: -0.04em;
    }
    /* 「多彩な滞在スタイル...」を字詰め */
    .facility_grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    /* カード間を広く */
    .slideshow {
        aspect-ratio: 16/10;
    }
    /* カード内の見出し：sec_titleより小さく抑える */
    .facility h4 {
        font-size: 16px;
        margin-bottom: 10px;
        letter-spacing: 0.02em;
    }
    /* カード内の隙間を詰める（特に facility_room と link の間） */
    .facility_copy {
        margin-top: -5px;
        margin-bottom: 10px;
        line-height: 1.6;
    }
    .facility_copy br {
        display: none;
    }
    /* SPは改行位置を成り行きに */
    .facility_room {
        margin-bottom: 8px;
        line-height: 1.6;
        letter-spacing: -0.04em;
    }
    /* ── aerial：写真の高さをもう少し大きく ── */
    #aerial {
        height: 330px;
        background-attachment: scroll;
    }
    /* ── moments：見出しを改行・少し小さく／SPは2カラム ── */
    #moments .sec_title {
        font-size: 19px;
        margin-bottom: 14px;
    }
    .moment_card {
        flex: 0 0 calc((100% - 14px) / 2);
    }
    .moment_card .caption h4 {
        font-size: 13px;
        line-height: 1.5;
    }
    /* キャプションを小さく */
    /* ── cta：見出しを改行・少し小さく ── */
    #cta h2 {
        font-size: 20px;
    }
    #cta .lead {
        letter-spacing: -0.03em;
    }
    /* 「ドギーズアイランドクラブ」を字詰め */
    #cta .copy {
        letter-spacing: 0.02em;
        /* 文字間を詰める */
    }
    .cta_btns {
        flex-wrap: nowrap;
        gap: 10px;
    }
    #cta .cta_btns .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 8px 6px;
        font-size: 10px;
        letter-spacing: 0.05em;
        justify-content: center;
    }
    #cta .cta_btns .btn_gold {
        flex: 0.85 1 0;
        /* 入会を申し込む：少し幅狭く */
    }
    #cta .cta_btns .btn_line {
        flex: 1.15 1 0;
        /* ルームツアーを予約する：少し幅広く（改行回避）*/
    }
    #cta .cta_btns .btn .arrow {
        margin-left: 6px;
    }
    /* ── 追従CTA：縦書きのまま右下に配置。本文との重なりを軽減 ── */
    .float_cta {
        top: auto;
        bottom: 16px;
        transform: none;
        font-size: 12px;
        letter-spacing: 0.16em;
        padding: 14px 6px;
        opacity: 0.88;
        box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.2);
        transition: opacity 0.3s;
    }
    /* 見出しが画面中央帯に来た間はさらに薄く（main.jsがトグル） */
    .float_cta.is-dimmed {
        opacity: 0.35;
    }
    /* ── 流れるギャラリー：SPは写真を小さく（画面に約2.5枚）── */
    .flow_gallery {
        padding: 0 0 16px;
        /* HVとの白い隙間を削除（緑下地とスライドショーをくっつける） */
    }
    .flow_gallery_inner {
        padding: 0 20px;
    }
    .flow_gallery_item {
        width: 180px;
        height: 155px;
        /* 天地を少し大きく */
    }
}