/**
 * ============================================================
 * 着物ことはじめ（kkj-） LP共通スタイル
 * ============================================================
 *
 * 対象：投稿タイプ「LP」のページのみで読み込まれる
 * 読み込み設定：functions.php の wp_enqueue_scripts フックを参照
 *
 * 使用箇所：振袖LP・（今後）留袖LP・お宮参りLP 等、
 *           「着物ことはじめ」ブランドの各LPで共通利用
 */

/* ----- ヒーロービジュアル：右側背景（各LP共通） ----- */

.kkj-hero-bg-pattern {
    background-color: #FAF7F0;
    background-image: url("images/kkj-bg.jpg");
    background-repeat: repeat;
    background-size: 120px 120px; /* 1マス25px（400pxにすると1マス50px） */
    background-position: 0 0;
    opacity: 1;
}

/* ----- ヒーロービジュアル：型（各LP共通） ----- */
.kkj-lp-hero {
    width: 100%;
    background-color: #FAF7F0;
    display: flex;
    position: relative;
}

.kkj-lp-hero picture {
    display: block;
    overflow: hidden;
    flex: 0 0 60%;
    /* height / max-width は写真の縦横比に応じてLP専用CSS側で指定 */
}

.kkj-lp-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kkj-lp-hero-overlay {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex: 1 1 40%;
    position: relative;
}

/* ----- ヒーロービジュアル：コーナー装飾（菊柄イラスト） ----- */
.kkj-lp-hero-overlay::before,
.kkj-lp-hero-overlay::after {
    content: '';
    position: absolute;
    width: clamp(140px, 22vw, 280px);
    aspect-ratio: 566 / 535;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(2px 3px 4px rgba(90, 74, 58, 0.25)); /* ← 追加：影（2か所から1か所に集約） */
}

.kkj-lp-hero-overlay::before {
    top: 0;
    left: 0;
    background-image: url("images/hero_illust_02.png");
}

.kkj-lp-hero-overlay::after {
    bottom: 0;
    right: 0;
    background-image: url("images/hero_illust_01.png");
}

/* ----- ヒーロービジュアル：ロゴ（着物ことはじめ＋大福屋） ----- */
.kkj-lp-hero-logo {
    grid-column: 2;
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.kkj-lp-hero-logo .brand-title-svg {
    display: block;
    width: auto;
    height: 470px;
}

.kkj-hero-title-daifukuya-link {
    color: #2b2b2b;
    cursor: pointer;
}

.kkj-hero-title-daifukuya-link:hover {
    opacity: 0.8;
}

/* ----- ヒーロービジュアル：バッジ（予約案内など） ----- */
.kkj-lp-hero-badge {
    grid-column: 1;
    justify-self: end;
    margin-right: 32px;
    writing-mode: vertical-rl;
    font-size: 22px;
    letter-spacing: 0.2em;
    color: #ffffff;
    font-weight: 500;
    background-color: #AAC387;
    padding: 24px 6px;
    border-radius: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
    transform: translateY(25px);
}

@media (max-width: 768px) {
    .kkj-lp-hero {
        display: block;
    }

    .kkj-lp-hero picture {
        height: auto;
        overflow: visible;
        flex: none;
    }

    .kkj-lp-hero-img {
        height: auto;
        width: 100%;
    }

    /* 重ねる部分の枠を、画像全体に広げる
       ・縦ロゴは右上、バッジは左上に、それぞれ位置を指定する
       ・モデルの上に文字を重ねない（2026/10/01） */
    .kkj-lp-hero-overlay {
        display: block;
        position: absolute;
        inset: 0;
        flex: none;
    }

    .kkj-lp-hero-overlay::before,
    .kkj-lp-hero-overlay::after {
        display: none;
    }

    /* 縦ロゴ：右上に配置（最大320px） */
    .kkj-lp-hero-logo {
        position: absolute;
        top: 6%;
        right: 6%;
    }

    .kkj-lp-hero-logo .brand-title-svg {
        height: clamp(220px, 72vw, 360px);
    }

    /* バッジ：縦書きのまま、モデルの左側（左上）に配置
       ・左下にはタレントのロゴがあるため、上から下へ伸ばしてロゴより上で止める
       ・文字の大きさは画面幅に合わせて変える（最大18px） */
    .kkj-lp-hero-badge {
        position: absolute;
        top: 12%;
        left: 5%;
        writing-mode: vertical-rl;
        white-space: nowrap;
        font-size: clamp(14px, 4.8vw, 20px);
        letter-spacing: 0.15em;
        padding: 0.6em 0.3em;
        margin-right: 0;
        transform: none;
    }
}

/* ----- セクションタイトル枠 ----- */
.kkj-title-band {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ----- お問い合わせ3点セット ----- */
.kkj-contact-box {
    display: block;
    background-color: #FAF3E4;
    border: 1px solid #e5d9b8;
    border-radius: var(--ds-radius-md);
    padding: 20px;
    text-align: center;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.kkj-contact-box:hover {
    opacity: 0.8;
}

.kkj-contact-box__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: bold;
    margin: 0 0 12px;
}

.kkj-contact-box__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.kkj-contact-box__btn {
    display: inline-block;
    background-color: #8FAD6E;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none;
}

.kkj-contact-box__tel {
    display: block;
    font-size: 22px;
    font-weight: bold;
    color: #3A3A2E;
    text-decoration: none;
    margin-bottom: 4px;
}

.kkj-contact-box__hours {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.kkj-contact-box__sub {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px;
}

/* ----- GoogleMap（白カード浮遊演出） ----- */
.kkj-map-widget {
    background-color: #ffffff;
    padding: 12px;
    border-radius: var(--ds-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.kkj-map-widget iframe {
    border-radius: calc(var(--ds-radius-md) - 8px);
    display: block;
}

/* ----- GoogleMap（フッターへの食い込み） -----
   ・マップのブロックにマイナスの下余白を付け、フッターの上に重ねる
   ・SWELL本体（main.css）の「.post_content div:last-child { margin-bottom: 0 !important }」が
     ブログパーツ内の最後のdivの下余白を0にするため、!important＋クラス3つのセレクタで上書きする
   ・2026/10/01 本番移植時に発覚。空の段落ブロックに頼らない形に修正 */
.post_content .swell-block-fullWide.kkj-map-overlap {
    position: relative;
    z-index: 2;
    margin-bottom: -140px !important;
}

/* ----- フッター：ナビボタン ----- */
.kkj-footer-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 420px;
    margin: 0 auto;
}

.kkj-footer-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    color: #3A3A2E;
    padding: 14px 20px;
    border-radius: var(--ds-radius-md);
    text-decoration: none;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s, transform 0.2s;
}

.kkj-footer-btn:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

.kkj-footer-btn span {
    flex: 1;
}

.kkj-footer-btn__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.kkj-footer-btn__ext {
    width: 1em;
    flex-shrink: 0;
}

/* ----- フッター：ロゴ・店舗情報 ----- */
.kkj-footer-info {
    text-align: center;
    color: #ffffff;
    line-height: 1.8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.kkj-footer-catch {
    font-size: 14px;
    margin: 0;
}

/* フッターのキャッチコピーとロゴの間を広げる */
.kkj-footer-logo {
    margin-top: 14px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

/* フッターのロゴと住所の間を広げる */
.kkj-footer-address {
    margin-top: 18px;
}
/* フッターの住所と電話番号の間を広げる */
.kkj-footer-tel {
    margin-top: 6px;
}
/* フッターの電話番号と定休日の間を広げる */
.kkj-footer-hours {
    margin-top: 12px;
}




/**
 * ============================================================
 * 着物ことはじめ（kkj-） 振袖LP用CSS
 * ============================================================
 *
 * 対象：投稿タイプ「LP」のページのうち、振袖LPのみで読み込まれる
 * 読み込み設定：functions.php の wp_enqueue_scripts フックを参照
 *
 * ヒーロービジュアルの型・ロゴ・バッジのデザインは
 * 上記の「LP共通スタイル」セクション（.kkj-lp-hero*）に統合済み。
 * ここには「写真の実寸」だけを残しています。
 */

@media (min-width: 769px) {
    .kkj-lp-hero picture {
        height: 1000px;
        max-width: 742px; /* marune-606-hero-pc.jpg の縦横比（742:1000）に合わせた上限 */
    }
}

/* =========================================================
   振袖 安心サービス（振袖LP用）
   ========================================================= */

   /* ----- 注記（※の補足文） ----- */
.kkj-lp-anshin .kkj-lp-anshin__card-note {
    font-size: 0.75rem;
    line-height: 1.7;
    color: #6b6259;
    margin: -8px 0 18px;
}

/* 注記の中のタグ（お支払いカードのレンタル補足） */
.kkj-lp-anshin .kkj-lp-anshin__card-note .kkj-lp-anshin__tag {
    display: table; /* タグを1行目に置き、補足文を次の行から始める */
    margin-bottom: 6px;
}

.kkj-lp-anshin {
    /* 色の設定（ここを変えれば全体の色味が変わる） */
    --kkj-anshin-bg: transparent;      /* セクション背景：なし */
    --kkj-anshin-card-bg: #FFFDF8;     /* カード背景：生成り */
    --kkj-anshin-gold: #C9A86A;        /* アクセント：金 */
    --kkj-anshin-text: #2b2b2b;        /* 文字色 */

    background-color: var(--kkj-anshin-bg);
    color: var(--kkj-anshin-text);
    padding: 40px 24px 48px;
}

/* ----- 凡例 ----- */
.kkj-lp-anshin .kkj-lp-anshin__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin: 32px 0 0;
    font-size: 0.875rem;
}

.kkj-lp-anshin .kkj-lp-anshin__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ----- カード一覧：PCは3列 ----- */
.kkj-lp-anshin .kkj-lp-anshin__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 最後の段の2枚を中央にそろえる */
    gap: 20px;
}

/* ----- カード ----- */
.kkj-lp-anshin .kkj-lp-anshin__card {
    display: flex;
    flex-direction: column;
    width: calc((100% - 60px) / 4); /* 4列（すき間20px×3を引いて4等分） */
    background-color: var(--kkj-anshin-card-bg);
    border-top: 3px solid var(--kkj-anshin-gold);
    border-radius: 12px;
    padding: 16px 22px 22px;
    box-shadow: 0 2px 12px rgba(90, 74, 58, 0.08);
    box-sizing: border-box;
}

.kkj-lp-anshin .kkj-lp-anshin__card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-align: center; /* ← 追加：タイトルを中央揃え */
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(201, 168, 106, 0.4);
}

.kkj-lp-anshin .kkj-lp-anshin__card-text {
    font-size: 0.875rem;
    line-height: 1.85;
    margin: 0 0 18px;
    flex-grow: 1; /* タグをカードの下端にそろえる */
}

/* ----- 対象タグ ----- */
.kkj-lp-anshin .kkj-lp-anshin__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kkj-lp-anshin .kkj-lp-anshin__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.kkj-lp-anshin .kkj-lp-anshin__tag--buy {
    background-color: #EEF3E8;
    color: #4F6B37;
}

.kkj-lp-anshin .kkj-lp-anshin__tag--rental {
    background-color: #F5EEDD;
    color: #8A6A2F;
}

.kkj-lp-anshin .kkj-lp-anshin__tag--mama {
    background-color: #F6E9E8;
    color: #9A5A5A;
}

/* ----- タブレット：2列 ----- */
@media (max-width: 1100px) {
    .kkj-lp-anshin .kkj-lp-anshin__card {
        width: calc((100% - 20px) / 2);
    }
}

/* ----- スマホ：横スクロール（1枚ずつ止まる） ----- */
@media (max-width: 768px) {
    .kkj-lp-anshin {
        padding: 32px 0 40px;
    }

    .kkj-lp-anshin .kkj-lp-anshin__legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin: 16px 0 0;
        padding: 0 24px;
    }

    .kkj-lp-anshin .kkj-lp-anshin__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 4px 24px 16px;
        -webkit-overflow-scrolling: touch;
    }

    .kkj-lp-anshin .kkj-lp-anshin__card {
        flex: 0 0 85%;
        width: auto;
        scroll-snap-align: center;
    }
}

/* =========================================================
   選べるプラン：概要カード（暫定共通：現在は振袖LPのみで使用）
   ========================================================= */
.kkj-lp-plan {
    --kkj-plan-text: #2b2b2b;
    --kkj-plan-sub: #6b6259;
    --kkj-plan-card-bg: #FFFDF8;
    --kkj-plan-gold: #C9A86A;

    color: var(--kkj-plan-text);
    padding: 40px 24px 48px;
}

/* プランごとの色（安心サービスのタグとそろえる） */
.kkj-lp-plan .kkj-lp-plan__card--buy,
.kkj-lp-modal--buy {
    --kkj-plan-color: #4F6B37;
    --kkj-plan-line: #8fad6e;
    --kkj-plan-tint: #EEF3E8;
}

.kkj-lp-plan .kkj-lp-plan__card--rental,
.kkj-lp-modal--rental {
    --kkj-plan-color: #8A6A2F;
    --kkj-plan-line: #C9A86A;
    --kkj-plan-tint: #F5EEDD;
}

.kkj-lp-plan .kkj-lp-plan__card--mama,
.kkj-lp-modal--mama {
    --kkj-plan-color: #9A5A5A;
    --kkj-plan-line: #C98F8F;
    --kkj-plan-tint: #F6E9E8;
}

/* ----- リード文・注記 ----- */
.kkj-lp-plan .kkj-lp-plan__lead {
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.9;
    margin: 0 0 32px;
}

.kkj-lp-plan .kkj-lp-plan__note {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--kkj-plan-sub);
    margin: 28px 0 0;
}

/* ----- カード一覧：PCは3列 ----- */
.kkj-lp-plan .kkj-lp-plan__list {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* ----- カード ----- */
.kkj-lp-plan .kkj-lp-plan__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% - 40px) / 3);
    background-color: var(--kkj-plan-card-bg);
    border-top: 4px solid var(--kkj-plan-line);
    border-radius: 12px;
    padding: 28px 24px 24px;
    box-shadow: 0 2px 12px rgba(90, 74, 58, 0.08);
    box-sizing: border-box;
    text-align: center;
}

.kkj-lp-plan .kkj-lp-plan__name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--kkj-plan-color);
    margin: 0 0 12px;
}

.kkj-lp-plan .kkj-lp-plan__name-sub {
    display: block;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.kkj-lp-plan .kkj-lp-plan__catch {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--kkj-plan-sub);
    margin: 0 0 20px;
    flex-grow: 1; /* 価格とボタンをカードの下側にそろえる */
}

/* 価格：税抜（メイン） */
.kkj-lp-plan .kkj-lp-plan__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 6px;
    line-height: 1.2;
}

.kkj-lp-plan .kkj-lp-plan__price-num {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.kkj-lp-plan .kkj-lp-plan__price-unit {
    font-size: 1rem;
    font-weight: 700;
    margin-left: 2px;
}

.kkj-lp-plan .kkj-lp-plan__price-label {
    font-size: 0.8125rem;
    color: var(--kkj-plan-sub);
    margin-left: 4px;
}

/* 価格：税込（メインの約6割の大きさ） */
.kkj-lp-plan .kkj-lp-plan__price-tax {
    font-size: 1.2rem;
    font-weight: 600;
    background-color: var(--kkj-plan-tint);
    border-radius: 999px;
    padding: 4px 16px;
    margin: 0 0 20px;
}

/* ボタン */
.kkj-lp-plan .kkj-lp-plan__btn {
    appearance: none;
    width: 100%;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--kkj-plan-color);
    background-color: #fff;
    border: 1px solid var(--kkj-plan-line);
    border-radius: 999px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.kkj-lp-plan .kkj-lp-plan__btn:hover,
.kkj-lp-plan .kkj-lp-plan__btn:focus-visible {
    background-color: var(--kkj-plan-line);
    color: #fff;
}

/* ----- スマホ：縦並び（お買い上げ→レンタル→ママ振袖の順・左右中央） ----- */
@media (max-width: 768px) {
    .kkj-lp-plan {
        padding: 32px 0 40px;
    }

    .kkj-lp-plan .kkj-lp-plan__lead,
    .kkj-lp-plan .kkj-lp-plan__note {
        padding: 0 24px;
        text-align: left;
    }

    .kkj-lp-plan .kkj-lp-plan__list {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 4px 24px 16px;
    }

    .kkj-lp-plan .kkj-lp-plan__card {
        width: 100%;
        max-width: 420px; /* タブレット幅で横に広がりすぎないように */
    }
}


/* =========================================================
   ポップアップ（ブランド共通）
   ========================================================= */
/* ポップアップ表示中は背面のページをスクロールさせない
   ・html.kkj-modal-open：JavaScriptが付けるクラスで判定
   ・html:has(...)：開いているポップアップがあるかをCSSで直接判定（JavaScriptに頼らない） */
html.kkj-modal-open,
html:has(.kkj-lp-modal[open]) {
    overflow: hidden;
    scrollbar-gutter: stable; /* スクロールバーが消えて背面が横にずれるのを防ぐ */
}

.kkj-lp-plan .kkj-lp-modal {
    position: fixed;          /* 画面に固定 */
    inset: 0;                 /* 上下左右を画面の端に合わせる */
    margin: auto;             /* SWELLのリセットで0になるのを防ぎ、中央に配置 */
    width: min(760px, calc(100% - 32px));
    max-width: none;
    height: fit-content;      /* 上下の中央そろえを確実にする */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: none;
    border-top: 4px solid var(--kkj-plan-line, #C9A86A);
    border-radius: 16px;
    background-color: #FFFDF8;
    color: #2b2b2b;
    box-shadow: 0 12px 40px rgba(43, 43, 43, 0.25);
    overflow: hidden;
}

.kkj-lp-modal::backdrop {
    background-color: rgba(43, 43, 43, 0.55);
}

/* ← 修正：全体はスクロールさせず、「タイトル／中身／閉じるボタン」の縦3段にする */
.kkj-lp-modal .kkj-lp-modal__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    padding: 32px 32px 28px;
    box-sizing: border-box;
}

/* 閉じるボタン（右上の×） */
.kkj-lp-modal .kkj-lp-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;            /* ×を丸の中央に置く */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;               /* SWELLのボタン余白を打ち消す */
    appearance: none;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b6259;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;               /* ← 追加：スクロール部分より手前に表示 */
}

.kkj-lp-modal .kkj-lp-modal__close:hover {
    background-color: rgba(201, 168, 106, 0.15);
}

/* フォーカス枠を丸に合わせてプランの色で表示 */
.kkj-lp-modal .kkj-lp-modal__close:focus-visible {
    background-color: rgba(201, 168, 106, 0.15);
    outline: 2px solid var(--kkj-plan-line, #C9A86A);
    outline-offset: 2px;
}

/* プラン名 */
.kkj-lp-modal .kkj-lp-modal__title {
    flex-shrink: 0;           /* ← 追加：高さが足りなくても縮めない */
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--kkj-plan-color, #2b2b2b);
    margin: 0 40px;           /* ← 修正：下の余白は__bodyの上の余白に移した */
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(201, 168, 106, 0.4);
}

/* ← 追加：スクロールする部分（ご衣装〜その他） */
.kkj-lp-modal .kkj-lp-modal__body {
    flex: 1 1 auto;
    min-height: 0;            /* これがないと中身が縮まず、スクロールが効かない */
    overflow-y: auto;
    overscroll-behavior: contain; /* スクロールし切っても後ろのページを動かさない */
    padding: 24px 0 16px;
    border-bottom: 1px solid rgba(201, 168, 106, 0.4); /* スクロール部分の下端の区切り線 */
}

/* 分類（ご衣装・成人式当日など） */
.kkj-lp-modal .kkj-lp-modal__group {
    margin: 0 0 24px;
}

/* ← 追加：最後の分類の下の余白は__bodyの余白で取る */
.kkj-lp-modal .kkj-lp-modal__group:last-child {
    margin-bottom: 0;
}

.kkj-lp-modal .kkj-lp-modal__group-title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--kkj-plan-line, #C9A86A);
}

/* 項目：PCは3列 */
.kkj-lp-modal .kkj-lp-modal__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.kkj-lp-modal .kkj-lp-modal__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    border: 1px solid rgba(201, 168, 106, 0.4);
    border-radius: 10px;
    padding: 14px 10px;
}

/* オプション項目は点線の枠 */
.kkj-lp-modal .kkj-lp-modal__item--option {
    border-style: dashed;
    border-color: #C98F8F;
    background-color: #FFFBFA;
}

.kkj-lp-modal .kkj-lp-modal__option {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #9A5A5A;
    background-color: #F6E9E8;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
}

/* アイコンの置き場所（空のときは表示しない） */
.kkj-lp-modal .kkj-lp-modal__icon {
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    color: var(--kkj-plan-color, #2b2b2b);
}

.kkj-lp-modal .kkj-lp-modal__icon:empty {
    display: none;
}

.kkj-lp-modal .kkj-lp-modal__icon svg {
    width: 100%;
    height: 100%;
}

.kkj-lp-modal .kkj-lp-modal__item-name {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

.kkj-lp-modal .kkj-lp-modal__item-sub {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #6b6259;
    margin: 4px 0 0;
}

/* 下の閉じるボタン */
.kkj-lp-modal .kkj-lp-modal__close-bottom {
    flex-shrink: 0;           /* ← 追加：高さが足りなくても縮めない */
    display: block;
    width: min(240px, 100%);
    margin: 20px auto 0;      /* ← 修正：区切り線との間隔 */
    appearance: none;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #6b6259;
    background-color: #fff;
    border: 1px solid rgba(201, 168, 106, 0.6);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
}

/* ----- スマホ ----- */
@media (max-width: 768px) {
    .kkj-lp-plan .kkj-lp-modal {   /* 上の指定と優先度をそろえる */
        width: calc(100% - 24px);
    }

    .kkj-lp-modal .kkj-lp-modal__inner {
        padding: 28px 16px 24px;
    }

    .kkj-lp-modal .kkj-lp-modal__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   選べるプラン：ポップアップのアイコン（複数並べる場合）
   ・HTML側で .kkj-lp-modal__icon に --multi を付けた枠だけに効く
   ・アイコン1個の大きさは通常と同じ48px
   ===================================================== */
.kkj-lp-plan .kkj-lp-modal__icon.kkj-lp-modal__icon--multi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: none;
    height: 48px;
}

.kkj-lp-plan .kkj-lp-modal__icon.kkj-lp-modal__icon--multi svg {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

/* ＋と組み合わせるアイコン（別の振袖が着れちゃう）：＋の余白分を詰める */
.kkj-lp-plan .kkj-lp-modal__icon--multi.kkj-lp-modal__icon--plus {
    gap: 0;
}
.kkj-lp-plan .kkj-lp-modal__icon--plus > :first-child {
    margin: 0 -12px 0 -5px;
}