@charset "UTF-8";

/* =========================================================
   user_data ページ共通ベース（color / font / box-sizing / a / img）
   対象: member-guide / entry-personal / entry-business / terms-personal /
         terms-business / first-visit / express-delivery / privacy-policy /
         terms-of-sale / shopping-guide
   ※ max-width / margin / padding / font-size などページ固有値は
     各ページのセクション内で個別に上書きする。
   ========================================================= */

.member-guide,
.entry-personal,
.entry-business,
.terms-personal,
.terms-business,
.first-visit,
.express-delivery,
.privacy-policy,
.terms-of-sale,
.shopping-guide {
    color: #000;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    box-sizing: border-box;
}

.member-guide *, .member-guide *::before, .member-guide *::after,
.entry-personal *, .entry-personal *::before, .entry-personal *::after,
.entry-business *, .entry-business *::before, .entry-business *::after,
.terms-personal *, .terms-personal *::before, .terms-personal *::after,
.terms-business *, .terms-business *::before, .terms-business *::after,
.first-visit *, .first-visit *::before, .first-visit *::after,
.express-delivery *, .express-delivery *::before, .express-delivery *::after,
.privacy-policy *, .privacy-policy *::before, .privacy-policy *::after,
.terms-of-sale *, .terms-of-sale *::before, .terms-of-sale *::after,
.shopping-guide *, .shopping-guide *::before, .shopping-guide *::after {
    box-sizing: border-box;
}

.member-guide a,
.entry-personal a,
.entry-business a,
.terms-personal a,
.terms-business a,
.first-visit a,
.express-delivery a,
.privacy-policy a,
.terms-of-sale a,
.shopping-guide a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s;
}

.member-guide a:hover,
.entry-personal a:hover,
.entry-business a:hover,
.terms-personal a:hover,
.terms-business a:hover,
.first-visit a:hover,
.express-delivery a:hover,
.privacy-policy a:hover,
.terms-of-sale a:hover,
.shopping-guide a:hover {
    opacity: .7;
}

.member-guide img,
.entry-personal img,
.entry-business img,
.terms-personal img,
.terms-business img,
.first-visit img,
.express-delivery img,
.privacy-policy img,
.terms-of-sale img,
.shopping-guide img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   新規会員登録のご案内 (member-guide)
   対応:
     - PC: Figma node 791:1573
     - SP: Figma node 995:3560
   テンプレ: app/template/user_data/member-guide.twig
   ========================================================= */

.member-guide {
    max-width: 1440px;
    margin: 0 auto;
}

/* ページヘッダーは L2994 以降の共通定義（member-guide__pageHeader を含む）に統合済み */

/* ---------- パンくず（member-guide / privacy-policy / terms-of-sale 共通） ----------
   font-size 12px / flex / hover #000 を共有。padding と margin はページ固有。 */
.member-guide__breadcrumb,
.privacy-policy__breadcrumb,
.terms-of-sale__breadcrumb {
    list-style: none;
    margin: 24px 0 32px;
    font-size: 12px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.6;
}

.member-guide__breadcrumb li,
.privacy-policy__breadcrumb li,
.terms-of-sale__breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.member-guide__breadcrumb a,
.privacy-policy__breadcrumb a,
.terms-of-sale__breadcrumb a {
    color: #888;
}

.member-guide__breadcrumb a:hover,
.privacy-policy__breadcrumb a:hover,
.terms-of-sale__breadcrumb a:hover {
    color: #000;
}

.member-guide__breadcrumb {
    padding: 0 108px;
}

.privacy-policy__breadcrumb,
.terms-of-sale__breadcrumb {
    padding: 0 137px;
}

/* ---------- リード文 ---------- */
.member-guide__lead {
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto 56px;
    padding: 0 108px;
    max-width: 1416px;
}

.member-guide__lead p {
    margin: 0;
}

/* ---------- 会員区分ボタン ---------- */
.member-guide__entryList {
    list-style: none;
    padding: 30px 108px;
    margin: 0 108px 80px;
    display: flex;
    gap: 40px;
    justify-content: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.member-guide__entryList-item {
    flex: 1;
    max-width: 381px;
    text-align: center;
}

.member-guide__entryList-caption {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    margin: 0 0 16px;
    color: #000;
}

.member-guide__entryList-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    background: #ffee06;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: center;
    border-radius: 10px;
    transition: background .2s, transform .2s;
}

.member-guide__entryList-btn:hover {
    background: #fde500;
    opacity: 1;
    transform: translateY(-2px);
}

/* ---------- セクション共通 ---------- */
.member-guide__section {
    margin: 0 auto 80px;
    padding: 0 108px;
    max-width: 1416px;
}

.member-guide__sectionTitle {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    color: #000;
    margin: 0;
    line-height: 1.4;
    letter-spacing: .02em;
}

.member-guide__sectionTitle small {
    font-size: 24px;
    font-weight: 500;
}

.member-guide__sectionTitle-decor {
    display: block;
    width: 137px;
    height: 35px;
    margin: 4px auto 24px;
    background: url('/html/user_data/assets/img/member-guide/sen.png') center/contain no-repeat;
    transform: rotate(5.11deg);
}

.member-guide__sectionTitle-decor--onMenu {
    margin-top: 0;
}

.member-guide__sectionLead {
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto 56px;
    color: #000;
}

/* ---------- 特典 3カラム ---------- */
.member-guide__featureList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    justify-items: center;
}

.member-guide__featureList-item {
    text-align: center;
    max-width: 312px;
}

.member-guide__featureList-img {
    width: 270px;
    height: 270px;
    margin: 0 auto 24px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
}

.member-guide__featureList-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-guide__featureList-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 16px;
    color: #000;
    line-height: 1.4;
}

.member-guide__featureList-text {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    color: #000;
    text-align: center;
}

/* ---------- マイページのメニュー ---------- */
.member-guide__menu {
    background: #ededed;
    padding: 56px 60px 64px;
    margin: 0 108px 80px;
    max-width: calc(1416px - 216px);
    margin-left: auto;
    margin-right: auto;
}

.member-guide__menu-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    line-height: 1.4;
    color: #000;
}

.member-guide__menu-list {
    margin: 24px 0 0;
    padding: 0 60px;
    display: grid;
    grid-template-columns: 165px 1fr;
    row-gap: 24px;
    column-gap: 24px;
    align-items: start;
}

.member-guide__menu-list dt {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    line-height: 1.7;
}

.member-guide__menu-list dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #000;
}

/* ---------- 会員登録・変更等について ---------- */
.member-guide__section .member-guide__sectionTitle + .member-guide__noteList {
    margin-top: 56px;
}

.member-guide__noteList {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 56px;
}

.member-guide__noteList-item {
    border-left: 2px solid #000;
    padding-left: 9px;
}

.member-guide__noteList-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.7;
    color: #000;
}

.member-guide__noteList-item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #000;
}

.member-guide__noteList-item a {
    color: #000;
    text-decoration: underline;
}

/* =========================================================
   タブレット (max-width: 1024px)
   ========================================================= */
@media screen and (max-width: 1024px) {
    .member-guide__breadcrumb,
    .member-guide__lead,
    .member-guide__section {
        padding-left: 32px;
        padding-right: 32px;
    }

    .member-guide__entryList {
        margin: 0 32px 60px;
        padding: 24px 0;
        gap: 24px;
    }

    .member-guide__featureList {
        gap: 24px;
    }

    .member-guide__featureList-img {
        width: 220px;
        height: 220px;
    }

    .member-guide__menu {
        margin: 0 32px 60px;
        padding: 40px 30px 48px;
    }

    .member-guide__menu-list {
        padding: 0;
        grid-template-columns: 140px 1fr;
        column-gap: 18px;
    }
}

/* =========================================================
   スマートフォン (max-width: 767px)
   ========================================================= */
@media screen and (max-width: 767px) {
    .member-guide {
        font-size: 14px;
    }

    /* パンくず */
    .member-guide__breadcrumb {
        font-size: 12px;
        padding: 0 21px;
        margin: 16px 0 24px;
    }

    /* リード */
    .member-guide__lead {
        font-size: 14px;
        padding: 0 21px;
        margin-bottom: 40px;
        text-align: left;
    }

    /* 会員区分ボタン */
    .member-guide__entryList {
        flex-direction: column;
        gap: 24px;
        padding: 24px 0;
        margin: 0 21px 60px;
    }

    .member-guide__entryList-item {
        max-width: none;
    }

    .member-guide__entryList-caption {
        font-size: 14px;
        margin-bottom: 12px;
        letter-spacing: .04em;
    }

    .member-guide__entryList-btn {
        height: 60px;
        font-size: 14px;
        letter-spacing: .04em;
    }

    /* セクション */
    .member-guide__section {
        padding: 0 21px;
        margin-bottom: 60px;
    }

    .member-guide__sectionTitle {
        font-size: 22px;
    }

    .member-guide__sectionTitle small {
        font-size: 18px;
    }

    .member-guide__sectionTitle-decor {
        width: 128px;
        height: 33px;
    }

    .member-guide__sectionLead {
        font-size: 14px;
        margin-bottom: 40px;
        text-align: left;
    }

    .member-guide__sectionLead br {
        display: none;
    }

    /* 特典 */
    .member-guide__featureList {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .member-guide__featureList-item {
        max-width: none;
    }

    .member-guide__featureList-img {
        width: 270px;
        height: 270px;
    }

    .member-guide__featureList-title {
        font-size: 20px;
    }

    .member-guide__featureList-text {
        font-size: 14px;
        text-align: left;
    }

    /* マイページのメニュー */
    .member-guide__menu {
        margin: 0 0 60px;
        padding: 40px 21px 48px;
        max-width: none;
    }

    .member-guide__menu-title {
        font-size: 21px;
    }

    .member-guide__menu-list {
        margin-top: 32px;
        padding: 0;
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .member-guide__menu-list dt {
        font-size: 16px;
        margin-top: 16px;
    }

    .member-guide__menu-list dt:first-of-type {
        margin-top: 0;
    }

    .member-guide__menu-list dd {
        font-size: 14px;
    }

    /* 注意事項 */
    .member-guide__noteList {
        gap: 32px;
        margin-top: 40px;
    }

    .member-guide__noteList-title {
        font-size: 14px;
    }

    .member-guide__noteList-item p {
        font-size: 14px;
    }

}

/* =========================================================
   user_data ページ 共通ベース
   対応:
     app/template/user_data/entry-personal.twig
     app/template/user_data/entry-business.twig
     app/template/user_data/terms-personal.twig
     app/template/user_data/terms-business.twig
     app/template/user_data/first-visit.twig
     app/template/user_data/express-delivery.twig
   ========================================================= */

.entry-personal,
.entry-business,
.terms-personal,
.terms-business,
.first-visit,
.express-delivery {
    color: #333;
    line-height: 1.8;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* ---------- ページヘッダー（entry / terms 共通） ---------- */
.entry-personal__pageHeader,
.entry-business__pageHeader,
.terms-personal__pageHeader,
.terms-business__pageHeader {
    text-align: center;
    padding: 50px 20px 40px;
    margin: 0 -20px 0;
    background: linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
    border-bottom: 8px solid #fbe100;
}

.entry-personal__pageHeader-en,
.entry-business__pageHeader-en,
.terms-personal__pageHeader-en,
.terms-business__pageHeader-en {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: .12em;
    margin: 0 0 8px;
    color: #333;
}

.entry-personal__pageHeader-ja,
.entry-business__pageHeader-ja,
.terms-personal__pageHeader-ja,
.terms-business__pageHeader-ja {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0;
    line-height: 1.4;
}

/* ---------- パンくず（共通） ---------- */
.entry-personal__breadcrumb,
.entry-business__breadcrumb,
.terms-personal__breadcrumb,
.terms-business__breadcrumb,
.first-visit__breadcrumb,
.express-delivery__breadcrumb {
    list-style: none;
    padding: 14px 0;
    margin: 0 0 30px;
    font-size: 13px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.entry-personal__breadcrumb li,
.entry-business__breadcrumb li,
.terms-personal__breadcrumb li,
.terms-business__breadcrumb li,
.first-visit__breadcrumb li,
.express-delivery__breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.entry-personal__breadcrumb a,
.entry-business__breadcrumb a,
.terms-personal__breadcrumb a,
.terms-business__breadcrumb a,
.first-visit__breadcrumb a,
.express-delivery__breadcrumb a {
    color: #888;
}

.entry-personal__breadcrumb a:hover,
.entry-business__breadcrumb a:hover,
.terms-personal__breadcrumb a:hover,
.terms-business__breadcrumb a:hover,
.first-visit__breadcrumb a:hover,
.express-delivery__breadcrumb a:hover {
    color: #333;
}

/* =========================================================
   会員登録フォーム（entry-personal / entry-business）
   フォーム本体は EC-CUBE 標準クラス（ec-registerRole / ec-borderedDefs
   / ec-input / ec-select 等）の style.css に委譲。ここでは
   ページ固有の追加要素（必須ラベル・注釈・説明文）だけを定義する。
   ========================================================= */

/* 必須ラベル（ec-label 末尾の小バッジ） */
.entry-personal .ec-required,
.entry-business .ec-required {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #d33;
    line-height: 1;
    vertical-align: middle;
}

/* メールアドレス下の赤い注釈 */
.entry-personal__form-note,
.entry-business__form-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #d33;
}

/* メールマガジン等の説明文 */
.entry-personal__form-text,
.entry-business__form-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: #555;
}

/* =========================================================
   利用規約（terms-personal / terms-business）
   ========================================================= */

.terms-personal__body,
.terms-business__body {
    max-width: 960px;
    margin: 0 auto 60px;
    font-size: 14px;
    line-height: 1.95;
    color: #333;
}

.terms-personal__article,
.terms-business__article {
    margin-bottom: 36px;
}

.terms-personal__article-title,
.terms-business__article-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    padding-left: 12px;
    border-left: 3px solid #fbe100;
    line-height: 1.5;
}

.terms-personal__article p,
.terms-business__article p {
    margin: 0 0 10px;
}

.terms-personal__article-list,
.terms-business__article-list {
    list-style: decimal;
    padding-left: 22px;
    margin: 0 0 6px;
}

.terms-personal__article-list > li,
.terms-business__article-list > li {
    margin-bottom: 6px;
    padding-left: 4px;
}

.terms-personal__article-sublist,
.terms-business__article-sublist {
    list-style: none;
    padding-left: 0;
    margin: 6px 0 10px;
    counter-reset: terms-sub;
}

.terms-personal__article-sublist > li,
.terms-business__article-sublist > li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 4px;
    counter-increment: terms-sub;
}

.terms-personal__article-sublist > li::before,
.terms-business__article-sublist > li::before {
    content: "(" counter(terms-sub) ")";
    position: absolute;
    left: 0;
    top: 0;
    color: #555;
}

/* =========================================================
   For visitor 共通ブロック (.ec-blockVisitorGuide)
   対応 twig: app/template/default/Block/visitor_guide_cards.twig
   呼び出し例: {% include 'Block/visitor_guide_cards.twig' %}
   ※ 旧 .entry-personal__visitor-* / .entry-business__visitor-* / .terms-*__visitor-* /
     .first-visit__visitor-* / .express-delivery__visitor-* 等のページスコープ
     セレクタは 2026-05-21 にブロックスコープへ移行・削除済み。
     ハードコード側は CSS が当たらなくなる前提（順次ブロック化していく）。
   ========================================================= */

.ec-blockVisitorGuide {
    /* section を viewport 全幅まで「ブレイクアウト」させる。親 (main.ec-layoutRole__main) の
       内側に max-width 制限がある場合でも、width: 100vw + 負のマージンで viewport 端まで広げる。
       内部は 5 カラム Grid:
         [col 1] 左ガター (1fr, 最低 20px) … Guide マークの teal 枠がここまで伸びる
         [col 2] Guide マークの可視幅 (240px)
         [col 3] 中央ガター (40px)
         [col 4] 右カラム = タイトル + カード + リンク (最大 760px)
         [col 5] 右ガター (1fr, 最低 20px)
       Guide マークは col 1〜2 + 上 2 行を貫通。タイトル/カード/リンクは col 4 で同じ幅。 */
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    margin: 80px 0 0;
    margin-left: calc(50% - 50vw);
    padding: 0;
    display: grid;
    grid-template-columns:
        minmax(20px, 1fr)
        minmax(0, 240px)
        40px
        minmax(0, 760px)
        minmax(20px, 1fr);
    grid-template-rows: auto auto auto auto;
    row-gap: 24px;
    align-items: start;
    color: #333;
    font-size: 16px;
    line-height: 1.8;
}

.ec-blockVisitorGuide *,
.ec-blockVisitorGuide *::before,
.ec-blockVisitorGuide *::after {
    box-sizing: border-box;
}

.ec-blockVisitorGuide a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s;
}

.ec-blockVisitorGuide a:hover {
    opacity: .7;
}

.ec-blockVisitorGuide img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ec-blockVisitorGuide__head {
    /* head の子 (mark / title) を親グリッドの直接の grid item として扱う */
    display: contents;
}

.ec-blockVisitorGuide__mark {
    /* 左ガター (col 1) + 可視マーク (col 2) を横断、行はタイトル + カードの 2 行ぶん縦断。
       左辺の border は viewport 外になるため非表示、角丸は右側だけ。
       Guide ロゴは flex で右寄せして、可視マーク (col 2) の中央付近に置く。 */
    grid-column: 1 / 3;
    grid-row: 1 / span 2;
    align-self: auto;
    margin: 0;
    width: auto;
    padding: 45px 60px;
    background: #fff;
    border: 3px solid #00b7b7;
    border-left: 0;
    border-radius: 0 16px 16px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ec-blockVisitorGuide__mark img {
    width: 100%;
    max-width: 183px;
    height: auto;
    display: block;
}

.ec-blockVisitorGuide__title {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: .04em;
}

.ec-blockVisitorGuide__cards {
    grid-column: 4;
    grid-row: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ec-blockVisitorGuide__cards li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 2px solid #1a1a1a;
    color: #1a1a1a;
    padding: 22px 28px;
    min-height: 96px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.ec-blockVisitorGuide__cards li a:hover {
    background: #fafafa;
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.ec-blockVisitorGuide__cardLabel {
    flex: 1;
    font-weight: 700;
}

.ec-blockVisitorGuide__cards img {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
}

.ec-blockVisitorGuide__lineCta {
    /* 4 カードと 4 リンクの間に挟むフル幅 CTA。col 4 に配置し row 3 を占める */
    grid-column: 4;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #1a1a1a;
    color: #1a1a1a;
    padding: 18px 20px;
    margin: 14px 0 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.ec-blockVisitorGuide__lineCta:hover {
    background: #fafafa;
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.ec-blockVisitorGuide__links {
    /* カードと同じ右コンテンツ列 (col 4) に揃える */
    grid-column: 4;
    grid-row: 4;
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ec-blockVisitorGuide__links a {
    display: block;
    background: #f4f4f4;
    text-align: center;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    transition: background .2s;
}

.ec-blockVisitorGuide__links a:hover {
    background: #ececec;
    opacity: 1;
}

/* =========================================================
   初めてのお客様（first-visit）
   対応: app/template/user_data/first-visit.twig
   ========================================================= */

/* ---------- セクション見出し（共通） ---------- */
.first-visit__sectionHead {
    text-align: center;
    margin: 0 0 40px;
}

.first-visit__sectionHead-en {
    font-family: "Allura", "Brush Script MT", "Lato", cursive;
    font-style: italic;
    font-size: 40px;
    letter-spacing: .04em;
    color: #333;
    margin: 0 0 8px;
    line-height: 1;
    position: relative;
    display: inline-block;
}

.first-visit__sectionHead-en::after {
    display: none;
}

.first-visit__sectionHead-en img {
    max-height: 64px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.first-visit__sectionHead-ja {
    font-size: 18px;
    font-weight: 700;
    margin: 18px 0 0;
    letter-spacing: .04em;
    line-height: 1.5;
}

/* ---------- Intro（窓辺が変われば） ---------- */
.first-visit__intro {
    margin: 0 0 90px;
}

.first-visit__intro-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.first-visit__intro-hero > img {
    display: block;
    width: 100%;
    height: auto;
}

.first-visit__intro-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 42%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.88);
}

.first-visit__intro-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px;
    line-height: 1.65;
    letter-spacing: .04em;
}

.first-visit__intro-text p {
    margin: 0 0 1em;
    font-size: 14px;
    line-height: 1.95;
    text-align: left;
}

.first-visit__intro-text p:last-child {
    margin-bottom: 0;
}

/* ---------- Why Choose Us ---------- */
.first-visit__why {
    margin: 0 0 90px;
}

.first-visit__why-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}

.first-visit__why-item:last-child {
    margin-bottom: 0;
}

.first-visit__why-item--imgRight .first-visit__why-image {
    order: 2;
}

.first-visit__why-image img {
    width: 100%;
    border-radius: 4px;
}

.first-visit__why-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px;
    line-height: 1.6;
}

.first-visit__why-text p {
    margin: 0 0 1em;
    font-size: 15px;
    line-height: 1.9;
}

.first-visit__why-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}

.first-visit__why-list li {
    position: relative;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.9;
}

.first-visit__why-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #fbe100;
}

/* ---------- Service ---------- */
.first-visit__service {
    margin: 0 0 90px;
}

.first-visit__service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.first-visit__service-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    min-height: 130px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    transition: background .2s, border-color .2s;
}

.first-visit__service-list li a:hover {
    background: #fafafa;
    border-color: #fbe100;
    opacity: 1;
}

.first-visit__service-list img {
    width: 44px;
    height: 44px;
}

/* ---------- Warranty ---------- */
.first-visit__warranty {
    margin: 0 0 90px;
}

.first-visit__warranty-body {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 50px;
    align-items: center;
}

.first-visit__warranty-visual {
    position: relative;
    text-align: center;
}

.first-visit__warranty-visual img {
    width: 100%;
    border-radius: 4px;
}

.first-visit__warranty-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #fbe100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.first-visit__warranty-badge-years {
    font-size: 32px;
    line-height: 1;
    color: #333;
}

.first-visit__warranty-badge-years small {
    font-size: 16px;
    margin: 0 2px 0 1px;
}

.first-visit__warranty-badge-target {
    font-size: 13px;
    margin-top: 6px;
    color: #333;
    border-top: 1px solid #333;
    padding-top: 5px;
    width: 70%;
    text-align: center;
}

.first-visit__warranty-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px;
    padding-left: 14px;
    border-left: 4px solid #fbe100;
    line-height: 1.5;
}

.first-visit__warranty-text p {
    margin: 0 0 1em;
    font-size: 15px;
    line-height: 1.9;
}

.first-visit__warranty-text p:last-child {
    margin-bottom: 0;
}

/* ---------- How to Measure ---------- */
.first-visit__measure {
    margin: 0 0 90px;
}

.first-visit__measure-item {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 40px;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

.first-visit__measure-item:first-of-type {
    border-top: 1px solid #eee;
}

.first-visit__measure-image img {
    width: 100%;
    border-radius: 4px;
}

.first-visit__measure-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.5;
}

.first-visit__measure-text p {
    margin: 0 0 .8em;
    font-size: 15px;
    line-height: 1.85;
}

.first-visit__measure-text p:last-child {
    margin-bottom: 0;
}

/* ---------- Flow ---------- */
.first-visit__flow {
    margin: 0 0 90px;
}

.first-visit__flow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
    position: relative;
}

.first-visit__flow-list li {
    text-align: center;
    position: relative;
}

.first-visit__flow-list li:not(:last-child)::after {
    content: "▶";
    position: absolute;
    top: 60px;
    right: -18px;
    color: #fbe100;
    font-size: 18px;
    line-height: 1;
}

.first-visit__flow-image {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
}

.first-visit__flow-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.first-visit__flow-label {
    font-size: 14px;
    font-weight: 700;
    display: block;
}

/* ---------- Search（カーテンを探す） ---------- */
.first-visit__search {
    margin: 0 0 90px;
}

.first-visit__search-tabs {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin: 0 0 32px;
    border-bottom: 2px solid #e5e5e5;
}

.first-visit__search-tab {
    padding: 10px 28px;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .2s;
    position: relative;
}

.first-visit__search-tab::before,
.first-visit__search-tab::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #ccc;
}

.first-visit__search-tab::before {
    left: 0;
}

.first-visit__search-tab:first-child::before {
    display: none;
}

.first-visit__search-tab.is-active {
    color: #333;
    font-weight: 700;
    background: #fbe100;
    border-radius: 4px 4px 0 0;
    border-bottom-color: #fbe100;
}

.first-visit__search-tab.is-active::before,
.first-visit__search-tab.is-active::after {
    display: none;
}

.first-visit__search-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    align-items: start;
}

.first-visit__search-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.first-visit__search-circle {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.first-visit__search-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.first-visit__search-more a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    background: #fbe100;
    border-radius: 50%;
    margin: 0 auto 10px;
    font-size: 16px;
    font-weight: 700;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    gap: 0;
    padding: 0;
}

/* ---------- Contact ---------- */
.first-visit__contact {
    margin: 0 0 90px;
    padding: 60px 40px;
    background: #fafaf6 url("../img/first-visit/contact-bg.jpg") center/cover no-repeat;
    border-radius: 6px;
    text-align: center;
}

.first-visit__contact .first-visit__sectionHead {
    margin-bottom: 24px;
}

.first-visit__contact-lead {
    font-size: 15px;
    margin: 0 0 20px;
    color: #555;
}

.first-visit__contact-tel {
    margin: 0 auto 28px;
}

.first-visit__contact-tel a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: #333;
}

.first-visit__contact-tel-icon {
    font-size: 22px;
}

.first-visit__contact-tel-number {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-size: 32px;
    letter-spacing: .04em;
    line-height: 1;
}

.first-visit__contact-tel-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: #777;
}

.first-visit__contact-mail-note {
    margin: 0 0 12px;
    font-size: 13px;
    color: #777;
}

.first-visit__contact-mail-btn {
    display: inline-block;
    min-width: 220px;
    padding: 14px 28px;
    background: #fbe100;
    color: #333;
    border-radius: 4px;
    font-weight: 700;
    transition: background .2s;
}

.first-visit__contact-mail-btn:hover {
    background: #f5d800;
    opacity: 1;
}

/* =========================================================
   エクスプレス便について（express-delivery）
   対応: app/template/user_data/express-delivery.twig
   ========================================================= */

/* ---------- セクション共通見出し ---------- */
.express-delivery__sectionHead {
    text-align: center;
    margin-bottom: 36px;
}

.express-delivery__sectionHead-en {
    font-family: "Allura", "Brush Script MT", "Apple Chancery", cursive;
    font-size: 40px;
    font-weight: 400;
    color: #333;
    margin: 0 0 10px;
    line-height: 1;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

.express-delivery__sectionHead-en::after {
    content: "";
    display: block;
    width: 100%;
    height: 8px;
    background: #fbe100;
    position: absolute;
    left: 0;
    bottom: 6px;
    z-index: -1;
    opacity: .85;
    border-radius: 4px;
}

.express-delivery__sectionHead-ja {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: .06em;
}

/* ---------- Intro ---------- */
.express-delivery__intro {
    margin: 0 0 70px;
}

.express-delivery__intro-body {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 40px;
    align-items: start;
}

.express-delivery__intro-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
    line-height: 1.6;
    letter-spacing: .04em;
}

.express-delivery__intro-text p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.95;
}

.express-delivery__intro-text p:last-child {
    margin-bottom: 0;
}

.express-delivery__intro-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(100%, 424px);
    justify-self: end;
    align-items: start;
}

.express-delivery__intro-gallery-column {
    display: grid;
    gap: 14px;
}

.express-delivery__intro-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #ececec;
}

.express-delivery__intro-gallery-item--large {
    aspect-ratio: 1 / 1.21;
}

.express-delivery__intro-gallery-item--short {
    aspect-ratio: 1 / .88;
}

.express-delivery__intro-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.express-delivery__intro-gallery-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #d33;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 4px 10px;
    border-radius: 2px;
    line-height: 1;
}

/* ---------- Conditions（利用可能な条件） ---------- */
.express-delivery__conditions {
    margin: 0 -20px 0;
    padding: 60px 20px 70px;
    background: #f7f7f7;
}

.express-delivery__conditions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.express-delivery__conditions-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.express-delivery__conditions-icon {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.express-delivery__conditions-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}


.express-delivery__conditions-label {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

/* ---------- Notes（ご注意） ---------- */
.express-delivery__notes {
    position: relative;
    margin: 0 -20px 70px;
    padding: 60px 20px;
    background: #fff;
    overflow: hidden;
}

.express-delivery__notes::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: #fbe100;
    transform: rotate(45deg);
    opacity: .35;
    border-radius: 30px;
    z-index: 0;
}

.express-delivery__notes::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: #fbe100;
    transform: rotate(45deg);
    opacity: .25;
    border-radius: 30px;
    z-index: 0;
}

.express-delivery__notes-title {
    position: relative;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: .06em;
    z-index: 1;
}

.express-delivery__notes-list {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 760px;
    z-index: 1;
}

.express-delivery__notes-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.85;
}

.express-delivery__notes-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

/* ---------- Recommended（こんな時におすすめ） ---------- */
.express-delivery__recommended {
    margin: 0 0 70px;
}

.express-delivery__recommended-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 24px;
}

.express-delivery__recommended-list li {
    display: flex;
    flex-direction: column;
}

.express-delivery__recommended-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: #ececec;
    margin: 0 0 14px;
}

.express-delivery__recommended-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.express-delivery__recommended-label {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

/* ---------- Search（カーテンを探す） ---------- */
.express-delivery__search {
    margin: 0 -20px 0;
    padding: 60px 20px 70px;
    background: #f7f7f7;
}

.express-delivery__search-tabs {
    max-width: 820px;
    margin: 0 auto 40px;
}

.express-delivery__search-tabs ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.express-delivery__search-tabs li {
    flex: 1;
    position: relative;
    text-align: center;
}

.express-delivery__search-tabs li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: #333;
}

.express-delivery__search-tabs a {
    display: inline-block;
    padding: 4px 8px;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    text-decoration: none;
    background: transparent;
}

.express-delivery__search-tabs .is-active a {
    background: linear-gradient(transparent 35%, #00CCCC 35%);
}

.express-delivery__search-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 18px;
}

.express-delivery__search-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.express-delivery__search-list img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.express-delivery__search-list span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.express-delivery__search-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background: #fbe100;
    border-radius: 50%;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    transition: background .2s;
}

.express-delivery__search-more a:hover {
    background: #f5d800;
    opacity: 1;
}

.express-delivery__search-more span {
    font-size: 16px;
}

/* ---------- Contact ---------- */
.express-delivery__contact {
    margin: 0 -20px 0;
    padding: 70px 20px;
    text-align: center;
    background-image: url("../img/express-delivery/contact-bg.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
}

.express-delivery__contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
}

.express-delivery__contact > * {
    position: relative;
}

.express-delivery__contact-lead {
    margin: 0 0 24px;
    font-size: 14px;
    color: #555;
}

.express-delivery__contact-tel {
    margin: 0 0 36px;
}

.express-delivery__contact-tel a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}

.express-delivery__contact-tel-icon {
    font-size: 24px;
}

.express-delivery__contact-tel-number {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-size: 32px;
    letter-spacing: .04em;
    line-height: 1;
}

.express-delivery__contact-tel-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: #777;
}

.express-delivery__contact-mail-note {
    margin: 0 0 12px;
    font-size: 13px;
    color: #777;
}

.express-delivery__contact-mail-btn {
    display: inline-block;
    min-width: 220px;
    padding: 14px 28px;
    background: #fbe100;
    color: #333;
    border-radius: 4px;
    font-weight: 700;
    transition: background .2s;
}

.express-delivery__contact-mail-btn:hover {
    background: #f5d800;
    opacity: 1;
}

/* =========================================================
   タブレット (max-width: 1024px) — entry / terms
   ========================================================= */
@media screen and (max-width: 1024px) {
    .entry-personal__pageHeader-ja,
    .entry-business__pageHeader-ja,
    .terms-personal__pageHeader-ja,
    .terms-business__pageHeader-ja {
        font-size: 28px;
    }
}

/* =========================================================
   スマートフォン (max-width: 767px) — entry / terms / first-visit 共通
   ========================================================= */
@media screen and (max-width: 767px) {
    .entry-personal,
    .entry-business,
    .terms-personal,
    .terms-business,
    .first-visit {
        font-size: 15px;
        padding: 0 16px 60px;
    }

    /* ページヘッダー */
    .entry-personal__pageHeader,
    .entry-business__pageHeader,
    .terms-personal__pageHeader,
    .terms-business__pageHeader {
        padding: 36px 16px 28px;
        margin: 0 -16px 0;
        border-bottom-width: 6px;
    }

    .entry-personal__pageHeader-en,
    .entry-business__pageHeader-en,
    .terms-personal__pageHeader-en,
    .terms-business__pageHeader-en {
        font-size: 14px;
    }

    .entry-personal__pageHeader-ja,
    .entry-business__pageHeader-ja,
    .terms-personal__pageHeader-ja,
    .terms-business__pageHeader-ja {
        font-size: 22px;
    }

    /* パンくず */
    .entry-personal__breadcrumb,
    .entry-business__breadcrumb,
    .terms-personal__breadcrumb,
    .terms-business__breadcrumb,
    .first-visit__breadcrumb {
        font-size: 12px;
        padding: 10px 0;
        margin-bottom: 20px;
    }

    /* 利用規約 */
    .terms-personal__article,
    .terms-business__article {
        margin-bottom: 28px;
    }

    .terms-personal__article-title,
    .terms-business__article-title {
        font-size: 15px;
    }

    .terms-personal__article-list,
    .terms-business__article-list {
        padding-left: 20px;
    }

    /* For visitor 共通ブロック — SP
       Figma SP デザイン (node 1786:23557) に合わせて Guide マーク領域を
       「左辺ブリード + シアン3px枠 + 角丸右側のみ」のロゴ枠として再現。
       それ以外（タイトル / カード / LINE CTA / リンク）は viewport 内で左右 16px の padding。 */
    .ec-blockVisitorGuide {
        display: block;
        width: auto;
        margin: 50px 0 0;
        padding: 0;
    }

    .ec-blockVisitorGuide__head {
        display: block;
        margin: 0 0 24px;
    }

    .ec-blockVisitorGuide__mark {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        margin: 0 0 24px 0;
        width: 55%;
        max-width: 220px;
        padding: 28px 24px;
        background: #fff;
        border: 2px solid #00b7b7;
        border-left: 0;
        border-radius: 0 12px 12px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ec-blockVisitorGuide__mark img {
        width: 100%;
        max-width: 87px;
        height: auto;
        display: block;
    }

    .ec-blockVisitorGuide__title {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        margin: 0 16px 18px;
        font-size: 20px;
    }

    .ec-blockVisitorGuide__cards {
        grid-column: auto;
        grid-row: auto;
        margin: 0 16px 14px;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ec-blockVisitorGuide__cards li a {
        padding: 14px 12px;
        min-height: 70px;
        font-size: 12px;
        gap: 8px;
    }

    .ec-blockVisitorGuide__cards img {
        width: 44px;
        height: 44px;
    }

    .ec-blockVisitorGuide__lineCta {
        grid-column: auto;
        grid-row: auto;
        margin: 0 16px 14px;
        padding: 12px 16px;
        font-size: 12px;
        border-radius: 5px;
    }

    .ec-blockVisitorGuide__links {
        grid-column: auto;
        grid-row: auto;
        margin: 0 16px;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ec-blockVisitorGuide__links a {
        padding: 14px 16px;
        font-size: 12px;
    }
}

/* =========================================================
   タブレット (max-width: 1024px) — first-visit
   ========================================================= */
@media screen and (max-width: 1024px) {
    .first-visit__sectionHead-en {
        font-size: 34px;
    }

    .first-visit__intro-content {
        width: 46%;
        padding: 32px 24px;
    }

    .first-visit__intro-title {
        font-size: 18px;
    }

    .first-visit__why-item {
        gap: 32px;
    }

    .first-visit__service-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .first-visit__warranty-body {
        grid-template-columns: 280px 1fr;
        gap: 32px;
    }

    .first-visit__warranty-badge {
        width: 120px;
        height: 120px;
    }

    .first-visit__warranty-badge-years {
        font-size: 26px;
    }

    .first-visit__measure-item {
        grid-template-columns: 340px 1fr;
        gap: 28px;
    }

    .first-visit__search-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .first-visit__search-circle {
        width: 90px;
        height: 90px;
    }

    .first-visit__search-more a {
        width: 90px;
        height: 90px;
    }
}

/* =========================================================
   スマートフォン (max-width: 767px) — first-visit 固有
   ========================================================= */
@media screen and (max-width: 767px) {
    /* セクション見出し */
    .first-visit__sectionHead {
        margin-bottom: 28px;
    }

    .first-visit__sectionHead-en {
        font-size: 30px;
    }

    .first-visit__sectionHead-ja {
        font-size: 16px;
        margin-top: 14px;
    }

    /* Intro */
    .first-visit__intro {
        margin: 0 0 60px;
    }

    .first-visit__intro-content {
        position: static;
        width: 100%;
        height: auto;
        padding: 24px 16px;
        background: transparent;
        text-align: left;
    }

    .first-visit__intro-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .first-visit__intro-text p {
        font-size: 14px;
    }

    /* Why Choose Us */
    .first-visit__why,
    .first-visit__service,
    .first-visit__warranty,
    .first-visit__measure,
    .first-visit__flow,
    .first-visit__search,
    .first-visit__contact {
        margin-bottom: 60px;
    }

    .first-visit__why-item {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 40px;
    }

    .first-visit__why-item--imgRight .first-visit__why-image {
        order: 0;
    }

    .first-visit__why-title {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .first-visit__why-text p,
    .first-visit__why-list li {
        font-size: 14px;
    }

    /* Service */
    .first-visit__service-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .first-visit__service-list li a {
        min-height: 110px;
        padding: 18px 10px;
        font-size: 12px;
    }

    .first-visit__service-list img {
        width: 36px;
        height: 36px;
    }

    /* Warranty */
    .first-visit__warranty-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .first-visit__warranty-visual {
        max-width: 360px;
        margin: 0 auto;
    }

    .first-visit__warranty-badge {
        width: 110px;
        height: 110px;
    }

    .first-visit__warranty-badge-years {
        font-size: 24px;
    }

    .first-visit__warranty-title {
        font-size: 17px;
    }

    .first-visit__warranty-text p {
        font-size: 14px;
    }

    /* How to Measure */
    .first-visit__measure-item {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 0;
    }

    .first-visit__measure-title {
        font-size: 16px;
    }

    .first-visit__measure-text p {
        font-size: 14px;
    }

    /* Flow */
    .first-visit__flow-list {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .first-visit__flow-list li:not(:last-child)::after {
        content: "▼";
        top: auto;
        right: auto;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .first-visit__flow-image {
        width: 100px;
        height: 100px;
    }

    /* Search */
    .first-visit__search-tabs {
        flex-wrap: wrap;
    }

    .first-visit__search-tab {
        padding: 8px 14px;
        font-size: 13px;
    }

    .first-visit__search-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .first-visit__search-circle {
        width: 72px;
        height: 72px;
    }

    .first-visit__search-more a {
        width: 72px;
        height: 72px;
        font-size: 13px;
    }

    /* Contact */
    .first-visit__contact {
        padding: 40px 20px;
    }

    .first-visit__contact-tel-number {
        font-size: 26px;
    }

    .first-visit__contact-mail-btn {
        min-width: 0;
        width: 100%;
        max-width: 320px;
        padding: 14px 16px;
    }
}

/* =========================================================
   タブレット (max-width: 1024px) — express-delivery
   ========================================================= */
@media screen and (max-width: 1024px) {
    .express-delivery__sectionHead-en {
        font-size: 34px;
    }

    .express-delivery__sectionHead-ja {
        font-size: 20px;
    }

    .express-delivery__intro-body {
        grid-template-columns: 1fr 360px;
        gap: 28px;
    }

    .express-delivery__intro-title {
        font-size: 20px;
    }

    .express-delivery__conditions-list {
        gap: 20px;
    }

    .express-delivery__conditions-icon {
        width: 110px;
        height: 110px;
    }

    .express-delivery__conditions-label {
        font-size: 13px;
    }

    .express-delivery__recommended-list {
        gap: 24px 18px;
    }

    .express-delivery__recommended-label {
        font-size: 14px;
    }

    .express-delivery__search-list {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px 14px;
    }

    .express-delivery__search-list img {
        width: 60px;
        height: 60px;
    }

    .express-delivery__search-more a {
        width: 76px;
        height: 76px;
    }
}

/* =========================================================
   スマートフォン (max-width: 767px) — express-delivery
   ========================================================= */
@media screen and (max-width: 767px) {
    /* セクション見出し */
    .express-delivery__sectionHead {
        margin-bottom: 24px;
    }

    .express-delivery__sectionHead-en {
        font-size: 30px;
    }

    .express-delivery__sectionHead-en::after {
        height: 6px;
        bottom: 4px;
    }

    .express-delivery__sectionHead-ja {
        font-size: 16px;
    }

    /* Intro */
    .express-delivery__intro {
        margin-bottom: 50px;
    }

    .express-delivery__intro-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .express-delivery__intro-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .express-delivery__intro-text p {
        font-size: 14px;
    }

    .express-delivery__intro-gallery {
        gap: 10px;
    }

    .express-delivery__intro-gallery-tag {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* Conditions */
    .express-delivery__conditions {
        padding: 40px 20px 50px;
    }

    .express-delivery__conditions-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .express-delivery__conditions-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 14px;
    }

    .express-delivery__conditions-label {
        font-size: 13px;
    }

    /* Notes */
    .express-delivery__notes {
        margin-bottom: 50px;
        padding: 40px 20px;
    }

    .express-delivery__notes::before {
        width: 140px;
        height: 140px;
        top: -30px;
        right: -30px;
    }

    .express-delivery__notes::after {
        width: 170px;
        height: 170px;
        bottom: -50px;
        left: -50px;
    }

    .express-delivery__notes-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .express-delivery__notes-list li {
        font-size: 13px;
    }

    /* Recommended */
    .express-delivery__recommended {
        margin-bottom: 50px;
    }

    .express-delivery__recommended-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }

    .express-delivery__recommended-label {
        font-size: 13px;
    }

    /* Search */
    .express-delivery__search {
        padding: 40px 20px 50px;
    }

    .express-delivery__search-tabs ul {
        flex-wrap: wrap;
    }

    .express-delivery__search-tabs li {
        flex: 0 0 50%;
    }

    .express-delivery__search-tabs li:nth-child(3)::before {
        display: none;
    }

    .express-delivery__search-tabs li:nth-child(3),
    .express-delivery__search-tabs li:nth-child(4) {
        margin-top: 12px;
    }

    .express-delivery__search-tabs a {
        font-size: 13px;
    }

    .express-delivery__search-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 12px;
    }

    .express-delivery__search-list img {
        width: 50px;
        height: 50px;
    }

    .express-delivery__search-list span {
        font-size: 12px;
    }

    .express-delivery__search-more a {
        width: 64px;
        height: 64px;
        font-size: 13px;
    }

    .express-delivery__search-more span {
        font-size: 13px;
    }

    /* Contact */
    .express-delivery__contact {
        padding: 40px 20px;
    }

    .express-delivery__contact-tel-number {
        font-size: 26px;
    }

    .express-delivery__contact-mail-btn {
        min-width: 0;
        width: 100%;
        max-width: 320px;
        padding: 14px 16px;
    }
}

/* =========================================================
   新規会員登録(法人様向け／CurtainOptions B2B)
   対応: app/template/default/CurtainOptions/Resource/template/default/B2B/index.twig
   twig のフォーム関連クラス(ec-registerRole / ec-pageHeader / ec-input 等)は
   変更せず、:has() でこの B2B ページだけをスコープして
   entry-business と同等の見た目を当てる。
   ※ :has() の対応: Chrome 105+ / Safari 15.4+ / Firefox 121+
   ========================================================= */

/* ---------- ページ全体ベース ---------- */
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 80px;
    box-sizing: border-box;
}

.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) *,
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) *::before,
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) *::after {
    box-sizing: border-box;
}

/* ---------- ページタイトル領域（プレーン）----------
   2026-05-21: ec-pageHeader の「ヘッダー扱い」を廃止し、
   H1 をプレーンな見出しとして表示する。
   PC: DOM 順 (H1 → breadcrumb) = 視覚順
   SP: flex order でパンくず → H1 に入れ替え（後段の SP メディアクエリで定義）
*/
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-business__intro,
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__intro {
    display: block;
    margin: 24px 0 32px;
}
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-business__title,
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 16px;
    color: #333;
    letter-spacing: .04em;
    text-align: center;
}
/* breadcrumb 自体の見た目は既存 .entry-business__breadcrumb / .entry-personal__breadcrumb
   ベースルール(659〜737) に委譲。intro 配下では下罫線を消し、上下マージンを詰める */
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-business__breadcrumb,
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__breadcrumb {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

/* ---------- 必須バッジ ---------- */
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-required {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #d33;
    line-height: 1;
    vertical-align: middle;
}

/* ---------- For visitor セクション(ec-registerRole の直後の兄弟) ----------
   2026-05-20: 旧スコープ用上書きを撤去。.entry-business__visitor 系のベースルール
   (line 861〜) で viewport 全幅ブレイクアウト + 5 カラム Grid を組むため、
   ここで再度 max-width / margin: auto / padding を上書きすると Grid が解除される。
   B2B ページでも標準ベースに任せる。 */

/* ---------- 送信 / 同意しないボタン (PC + SP 共通) ----------
   2026-05-21: PC でも SP と同じ黄色 (#FFEE06) / グレー (#888) / h60 / radius10 を
   適用する。EC-CUBE 標準 (style.css) の赤系ボタンを :has() スコープで上書き。
   width: 100% は親 .ec-off4Grid__cell の幅に追従する（PC=cell 幅 / SP=画面幅）。
*/
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-blockBtn--action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 68px;
    padding: 0 12px;
    margin: 0 0 16px;
    border: none;
    border-radius: 10px;
    background-color: #FFEE06;
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-blockBtn--cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 68px;
    padding: 0 12px;
    margin: 0;
    border: none;
    border-radius: 10px;
    background-color: #888;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* ---------- form-note (メールアドレス下の注記) ---------- */
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__form-note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: #de4848;
}

/* ---------- form-text (メールマガジン説明文) ---------- */
.ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__form-text {
    font-size: 16px;
    line-height: 2;
    color: #000;
    margin: 0;
}

/* ---------- タブレット (768px〜1024px) ----------
   2026-05-21: ec-pageHeader 撤去に伴い旧タブレット h1 縮小ルールは削除。
   .entry-business__title は PC ベース 28px のままタブレットでも維持する。
   ただし EC-CUBE 標準の .ec-off4Grid__cell は 768px 以上で width: 33.33% に
   なるため、790px 付近で「同意して登録する（確認画面へ）」のテキストが
   18px ボタン内に収まらない。中間サイズだけセルを広げて溢れを防ぐ。
*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-off4Grid {
        display: block;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-off4Grid__cell {
        width: 70%;
        margin-left: 15%;
    }
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 767px) {
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) {
        font-size: 15px;
        padding: 0 16px 60px;
    }

    /* SP: パンくず → H1 の順に視覚並び替え。
       HTML 順は H1 → breadcrumb (SEO 優先) なので flex order で入れ替える */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-business__intro,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__intro {
        display: flex;
        flex-direction: column;
        margin: 16px 0 24px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-business__title,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__title {
        order: 2;
        font-size: 20px;
        margin: 8px 0 0;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-business__breadcrumb,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__breadcrumb {
        order: 1;
    }
    /* 2026-05-20: For visitor の SP 上書きも撤去（ベース SP メディアクエリで処理）。 */

    /* =========================================================
       2026-05-21: Figma SP デザイン(node 1000:4233)に追従する
       B2B 法人会員登録フォームの SP オーバーライド。
       すべて :has() で B2B ページのみにスコープし、EC-CUBE 標準の
       .ec-input / .ec-halfInput / .ec-zipInput / .ec-telInput /
       .ec-birth / .ec-radio / .ec-select / .ec-blockBtn--*
       の SP デフォルトに必要な差分だけを上書きする。
       ========================================================= */

    /* グリッド外枠の余白詰め */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-off1Grid,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-off1Grid__cell {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    /* 各 dl 行に下罫線・上下パディング */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-borderedDefs {
        border-top: none;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-borderedDefs dl {
        display: block;
        padding: 16px 0;
        margin: 0;
        border-bottom: 1px solid #e5e5e5;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-borderedDefs dt {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 0 8px;
        font-size: 14px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        background: transparent;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-borderedDefs dd {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 必須バッジ: Figma の赤 #DE5D50 で小さくインライン */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-required {
        margin-left: 6px;
        padding: 0;
        background: transparent;
        color: #DE5D50;
        font-size: 11px;
        font-weight: 400;
    }

    /* 入力枠ベース (ec-input / ec-telInput / ec-zipInput 等の入力要素) */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-input input,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-input textarea,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-halfInput input,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-zipInput input,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-telInput input,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-birth select,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-select select {
        height: 40px;
        padding: 0 12px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        background-color: #fff;
        font-size: 16px;
        line-height: 1.4;
        color: #000;
        box-shadow: none;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-input textarea {
        height: auto;
        min-height: 96px;
        padding: 10px 12px;
        line-height: 1.6;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) input::placeholder,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) textarea::placeholder {
        color: #c3c3c3;
    }

    /* select 共通: 薄グレー背景 (Figma の #f8f8f8) */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-select select,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-birth select {
        background-color: #f8f8f8;
    }

    /* お名前 / カナ — 2 カラム */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-halfInput {
        display: flex;
        gap: 7px;
        width: 100%;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-halfInput input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    /* 住所 — 〒 + 郵便番号 + 検索リンクが 1 行 */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-zipInput {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        margin: 0 0 12px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-zipInput > span {
        font-size: 14px;
        color: #000;
        margin: 0;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-zipInput input {
        width: 129px;
        flex: 0 0 auto;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-zipInputHelp {
        flex: 0 0 auto;
        margin: 0;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-zipInputHelp a {
        display: inline-block;
        padding: 0;
        background: transparent;
        color: #0cc;
        font-size: 14px;
        text-decoration: none;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-zipInputHelp a:hover {
        text-decoration: underline;
    }

    /* 住所内の都道府県 select は短め */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) dd > .ec-select {
        margin: 0 0 12px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) dd > .ec-select select {
        max-width: 200px;
    }

    /* 住所 1 行目 / 2 行目 input の余白 */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) dd > .ec-input {
        margin: 0 0 12px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) dd > .ec-input:last-child {
        margin-bottom: 0;
    }

    /* 電話番号 / FAX — 短め */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-telInput input {
        max-width: 143px;
    }

    /* 生年月日 — year/month/day を 1 行に並べる */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-birth {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-birth select:nth-of-type(1) {
        width: 105px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-birth select:nth-of-type(2),
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-birth select:nth-of-type(3) {
        width: 62px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-birth span {
        font-size: 14px;
        color: #000;
    }

    /* 性別 — ラジオ横並び */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-radio {
        display: flex;
        align-items: center;
        gap: 24px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-radio label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #000;
        cursor: pointer;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-radio input[type="radio"] {
        width: 22px;
        height: 22px;
        margin: 0;
    }

    /* 職業 select はやや短め */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) dd > .ec-select select[name*="job"],
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) dd > .ec-select select[id*="job"] {
        max-width: 252px;
    }

    /* メール下注釈 */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-business__form-note,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__form-note {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.7;
        color: #de4848;
    }

    /* メールマガジン説明文 SP */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .entry-personal__form-text {
        font-size: 14px;
    }

    /* アクション領域 */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-registerRole__actions {
        padding: 24px 0 0;
    }

    /* 同意 checkbox */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-checkbox {
        margin: 0 0 20px;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-checkbox label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        line-height: 1.7;
        color: #000;
        cursor: pointer;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-checkbox input[type="checkbox"] {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin: 2px 0 0;
        border: 1px solid #4a4a4a;
        accent-color: #4a4a4a;
    }
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-checkbox a {
        color: #0cc;
        text-decoration: underline;
    }

    /* 4 カラムグリッドは SP では全幅にする */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-off4Grid,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-off4Grid__cell {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 送信ボタン / 同意しないボタン SP オーバーライド（PC 68px/24px → SP 60px/20px） */
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-blockBtn--action,
    .ec-registerRole:has(.entry-business__intro, .entry-personal__intro) .ec-blockBtn--cancel {
        height: 60px;
        font-size: 20px;
    }
}

/* =========================================================
   user_data ページ共通ヘッダー刷新（Figma 準拠）
   対応:
     - .express-delivery (Figma 573:765 / 898:2245)
     - .first-visit       (Figma 580:1242 / 809:2293)
     - .privacy-policy   (Figma 672:696  / 809:2074)
     - .terms-of-sale    (Figma 672:1447 / 809:1665)
   各 .{page}__pageHeader* を黄色背景画像 + cyan バーに統一する。
   既存スタイルを後勝ちで上書きする（specificity 同等）。
   ========================================================= */

.member-guide__pageHeader,
.first-visit__pageHeader,
.express-delivery__pageHeader,
.privacy-policy__pageHeader,
.terms-of-sale__pageHeader {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 150px 20px 60px;
    text-align: center;
    overflow: hidden;
    background: none;
    border: none;
}

.member-guide__pageHeader-bg,
.first-visit__pageHeader-bg,
.express-delivery__pageHeader-bg,
.privacy-policy__pageHeader-bg,
.terms-of-sale__pageHeader-bg {
    position: absolute;
    inset: 0;
    background: url('/html/user_data/assets/img/member-guide/header-bg.jpg') center/cover no-repeat;
    z-index: 0;
}

.member-guide__pageHeader-bg::after,
.first-visit__pageHeader-bg::after,
.express-delivery__pageHeader-bg::after,
.privacy-policy__pageHeader-bg::after,
.terms-of-sale__pageHeader-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 252, 215, 0.1);
}

.member-guide__pageHeader::after,
.first-visit__pageHeader::after,
.express-delivery__pageHeader::after,
.privacy-policy__pageHeader::after,
.terms-of-sale__pageHeader::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15px;
    background: #0cc;
    z-index: 1;
}

.member-guide__pageHeader-inner,
.first-visit__pageHeader-inner,
.express-delivery__pageHeader-inner,
.privacy-policy__pageHeader-inner,
.terms-of-sale__pageHeader-inner {
    position: relative;
    z-index: 2;
}

.member-guide__pageHeader-en,
.first-visit__pageHeader-en,
.express-delivery__pageHeader-en,
.privacy-policy__pageHeader-en,
.terms-of-sale__pageHeader-en {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.7;
    letter-spacing: 0;
    color: #000;
    margin: 0 0 8px;
}

.member-guide__pageHeader-ja,
.first-visit__pageHeader-ja,
.express-delivery__pageHeader-ja,
.privacy-policy__pageHeader-ja,
.terms-of-sale__pageHeader-ja {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.3;
    letter-spacing: 0;
    color: #000;
    margin: 0;
}

/* =========================================================
   プライバシーポリシー (privacy-policy)
   対応: app/template/user_data/privacy-policy.twig
   ========================================================= */

.privacy-policy {
    max-width: 1440px;
    margin: 0 auto;
}

/* パンくずは冒頭の member-guide__breadcrumb 系共通定義に統合済み */

/* 本文 */
.privacy-policy__article {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 137px;
    color: #000;
}

.privacy-policy__lead {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 32px;
}

.privacy-policy__section {
    margin: 0 0 24px;
}

.privacy-policy__section-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    margin: 24px 0 8px;
    color: #000;
}

.privacy-policy__section p {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.7;
}

.privacy-policy__section-list {
    margin: 8px 0 12px;
    padding-left: 1.5em;
    line-height: 1.7;
}

.privacy-policy__section-list li {
    margin-bottom: 4px;
}

.privacy-policy__section-list--dotted {
    list-style: none;
    padding-left: 0;
}

.privacy-policy__section-list--dotted li {
    position: relative;
    padding-left: 1em;
}

.privacy-policy__section-list--dotted li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.privacy-policy__section-contact {
    margin: 16px 0 0;
    padding: 0;
    line-height: 1.7;
}

.privacy-policy__section-contact dt {
    font-weight: 700;
    margin-bottom: 4px;
}

.privacy-policy__section-contact dd {
    margin: 0;
    font-size: 16px;
}

/* ご相談・お問い合わせ CTA */
.privacy-policy__contact {
    position: relative;
    margin: 0 0 80px;
    padding: 80px 137px 100px;
    overflow: hidden;
}

.privacy-policy__contact-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%),
                url('/html/user_data/assets/img/member-guide/header-bg.jpg') center/cover no-repeat;
    z-index: 0;
}

.privacy-policy__contact-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.privacy-policy__contact-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.7;
    color: #000;
    margin: 0 0 8px;
}

.privacy-policy__contact-lead {
    font-size: 18px;
    line-height: 1.7;
    color: #000;
    margin: 0 0 40px;
}

.privacy-policy__contact-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 880px;
    margin: 0 auto;
}

.privacy-policy__contact-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
}

.privacy-policy__contact-card-label {
    font-size: 18px;
    line-height: 1.7;
    color: #000;
    margin: 0 0 16px;
}

.privacy-policy__contact-card-tel {
    display: inline-block;
    font-family: "Noto Sans", "Noto Sans JP", sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.4;
    color: #000;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.privacy-policy__contact-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    height: 56px;
    padding: 0 24px;
    background: #ffee06;
    color: #000;
    font-size: 24px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

.privacy-policy__contact-card-btn:hover {
    background: #fde500;
    opacity: 1;
    transform: translateY(-2px);
}

/* TB (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .member-guide__pageHeader,
    .first-visit__pageHeader,
    .express-delivery__pageHeader,
    .privacy-policy__pageHeader,
    .terms-of-sale__pageHeader {
        padding: 100px 20px 40px;
    }

    .member-guide__pageHeader-en,
    .first-visit__pageHeader-en,
    .express-delivery__pageHeader-en,
    .privacy-policy__pageHeader-en,
    .terms-of-sale__pageHeader-en {
        font-size: 20px;
    }

    .member-guide__pageHeader-ja,
    .first-visit__pageHeader-ja,
    .express-delivery__pageHeader-ja,
    .privacy-policy__pageHeader-ja,
    .terms-of-sale__pageHeader-ja {
        font-size: 32px;
    }

    .privacy-policy__breadcrumb,
    .privacy-policy__article {
        padding-left: 32px;
        padding-right: 32px;
    }

    .privacy-policy__contact {
        padding: 60px 32px 80px;
    }

    .privacy-policy__contact-cards {
        gap: 20px;
    }

    .privacy-policy__contact-card-tel {
        font-size: 36px;
    }
}

/* SP (max-width: 767px) */
@media screen and (max-width: 767px) {
    .member-guide__pageHeader,
    .first-visit__pageHeader,
    .express-delivery__pageHeader,
    .privacy-policy__pageHeader,
    .terms-of-sale__pageHeader {
        padding: 40px 16px 28px;
    }

    .member-guide__pageHeader::after,
    .first-visit__pageHeader::after,
    .express-delivery__pageHeader::after,
    .privacy-policy__pageHeader::after,
    .terms-of-sale__pageHeader::after {
        height: 6px;
    }

    .member-guide__pageHeader-en,
    .first-visit__pageHeader-en,
    .express-delivery__pageHeader-en,
    .privacy-policy__pageHeader-en,
    .terms-of-sale__pageHeader-en {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .member-guide__pageHeader-ja,
    .first-visit__pageHeader-ja,
    .express-delivery__pageHeader-ja,
    .privacy-policy__pageHeader-ja,
    .terms-of-sale__pageHeader-ja {
        font-size: 20px;
    }

    .privacy-policy {
        font-size: 14px;
    }

    .privacy-policy__breadcrumb {
        font-size: 12px;
        padding: 0 21px;
        margin: 16px 0 24px;
    }

    .privacy-policy__article {
        padding: 0 21px;
        margin-bottom: 60px;
    }

    .privacy-policy__lead,
    .privacy-policy__section p,
    .privacy-policy__section-list,
    .privacy-policy__section-contact dd {
        font-size: 14px;
    }

    .privacy-policy__section-title {
        font-size: 14px;
    }

    .privacy-policy__contact {
        padding: 48px 21px 64px;
        margin-bottom: 60px;
    }

    .privacy-policy__contact-title {
        font-size: 20px;
    }

    .privacy-policy__contact-lead {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .privacy-policy__contact-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .privacy-policy__contact-card {
        padding: 24px 16px;
    }

    .privacy-policy__contact-card-label {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .privacy-policy__contact-card-tel {
        font-size: 28px;
    }

    .privacy-policy__contact-card-btn {
        min-width: 0;
        width: 100%;
        height: 48px;
        font-size: 18px;
    }
}

/* =========================================================
   特定商取引法表記 (terms-of-sale)
   対応: app/template/user_data/terms-of-sale.twig
   ========================================================= */

.terms-of-sale {
    max-width: 1440px;
    margin: 82px auto;
}

/* パンくずは冒頭の member-guide__breadcrumb 系共通定義に統合済み */

/* 本文 */
.terms-of-sale__article {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 137px;
    color: #000;
}

.terms-of-sale__dl {
    margin: 0;
    padding: 0;
}

.terms-of-sale__row {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 24px;
    padding: 24px 0;
    border-top: 1px solid #e5e5e5;
}

.terms-of-sale__row:last-child {
    border-bottom: 1px solid #e5e5e5;
}

.terms-of-sale__row dt {
    font-weight: 700;
    line-height: 1.7;
    margin: 0;
}

.terms-of-sale__row dd {
    margin: 0;
    line-height: 1.7;
}

.terms-of-sale__row dd p {
    margin: 0;
}

.terms-of-sale__row dd p + p {
    margin-top: 0.25em;
}

/* Contact CTA は共通ブロック .ec-blockContact を利用（contact_info.twig） */

/* TB (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .terms-of-sale__breadcrumb,
    .terms-of-sale__article {
        padding-left: 32px;
        padding-right: 32px;
    }

    .terms-of-sale__row {
        grid-template-columns: 200px 1fr;
        column-gap: 16px;
    }
}

/* SP (max-width: 767px) */
@media screen and (max-width: 767px) {
    .terms-of-sale {
        font-size: 14px;
    }

    .terms-of-sale__breadcrumb {
        font-size: 12px;
        padding: 0 21px;
        margin: 16px 0 24px;
    }

    .terms-of-sale__article {
        padding: 0 21px;
        margin-bottom: 60px;
    }

    .terms-of-sale__row {
        display: block;
        padding: 12px 0;
    }

    .terms-of-sale__row dt {
        font-size: 12px;
        line-height: 26px;
        margin-bottom: 0;
    }

    .terms-of-sale__row dd {
        font-size: 14px;
        line-height: 23px;
    }
}

/* =========================================================
   ご利用ガイド (shopping-guide)
   対応デザイン: Figma PC 1786:16984 / SP 1390:5163
   ========================================================= */
.shopping-guide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 80px;
    line-height: 2;
}

/* ページヘッダー（黄色背景 + cyan バー） */
.shopping-guide__pageHeader {
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw) 0;
    padding: 80px 16px 60px;
    background: rgba(255, 252, 215, 0.4);
    border-bottom: 15px solid #0cc;
    text-align: center;
}

.shopping-guide__pageHeader-bg {
    display: none;
}

.shopping-guide__pageHeader-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.shopping-guide__pageHeader-en {
    margin: 0 0 12px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.7;
}

.shopping-guide__pageHeader-ja {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.4;
}

/* パンくず */
.shopping-guide__breadcrumb {
    list-style: none;
    margin: 0 0 40px;
    padding: 24px 0 0;
    font-size: 12px;
    color: #888;
}

.shopping-guide__breadcrumb li {
    display: inline;
}

.shopping-guide__breadcrumb a {
    color: #888;
    text-decoration: none;
}

.shopping-guide__breadcrumb a:hover {
    text-decoration: underline;
}

/* カテゴリアンカーナビ */
.shopping-guide__categoryNav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 0 0 80px;
}

.shopping-guide__categoryNav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 8px 28px 8px 16px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    position: relative;
    transition: background .2s, color .2s;
}

.shopping-guide__categoryNav-item::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
}

.shopping-guide__categoryNav-item:hover {
    background: #f6f6f6;
    opacity: 1;
}

/* セクション */
.shopping-guide__section {
    margin: 0 0 80px;
    scroll-margin-top: 100px;
}

.shopping-guide__sectionTitle {
    margin: 0 0 32px;
    padding: 0 0 16px;
    border-bottom: 1px solid #000;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6;
}

/* サブセクション（h3 + 縦バー） */
.shopping-guide__sub {
    margin: 0 0 48px;
}

.shopping-guide__subTitle {
    margin: 0 0 24px;
    padding: 0 0 0 14px;
    border-left: 3px solid #0cc;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

.shopping-guide__sub > p {
    margin: 0 0 16px;
}

.shopping-guide__sub > p:last-child {
    margin-bottom: 0;
}

.shopping-guide__note {
    color: #555;
    font-size: 15px;
}

/* STEP（ご注文について） */
.shopping-guide__step {
    margin: 0 0 56px;
}

.shopping-guide__stepHeader {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin: 0 0 24px;
}

.shopping-guide__stepNo {
    flex: none;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0cc;
    letter-spacing: .04em;
}

.shopping-guide__stepTitle {
    font-size: 20px;
    font-weight: 500;
}

.shopping-guide__stepBody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.shopping-guide__stepText > p {
    margin: 0 0 16px;
}

.shopping-guide__stepText > p:last-child {
    margin-bottom: 0;
}

.shopping-guide__stepImage {
    aspect-ratio: 631 / 374;
    background: #d9d9d9;
}

/* インライン CTA（STEP 03 の「会員情報について詳しくはこちら」） */
.shopping-guide__inlineCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 381px;
    height: 64px;
    margin: 20px 0 0;
    padding: 0 24px;
    background: #efefef;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    transition: background .2s;
}

.shopping-guide__inlineCta:hover {
    background: #e3e3e3;
    opacity: 1;
}

/* クレジットカードロゴ */
.shopping-guide__cardLogos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.shopping-guide__cardLogos img {
    height: 60px;
    width: auto;
    display: block;
}

/* 銀行振込先テーブル（dl） */
.shopping-guide__bankInfo {
    margin: 24px 0;
    padding: 16px 28px;
    border: 1px solid #000;
    max-width: 569px;
}

.shopping-guide__bankInfo-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 4px 0;
    margin: 0;
}

.shopping-guide__bankInfo-row dt,
.shopping-guide__bankInfo-row dd {
    margin: 0;
    line-height: 2;
}

/* テーブル（送料 / 時間指定 / 在庫確保） */
.shopping-guide__table {
    width: 100%;
    max-width: 757px;
    margin: 16px 0;
    border-collapse: collapse;
    border: 1px solid #000;
    font-size: 16px;
}

.shopping-guide__table th,
.shopping-guide__table td {
    padding: 16px 18px;
    border: none;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    text-align: left;
    vertical-align: middle;
    line-height: 1.6;
}

.shopping-guide__table tr:last-child th,
.shopping-guide__table tr:last-child td {
    border-bottom: none;
}

.shopping-guide__table td:last-child {
    border-right: none;
}

.shopping-guide__table th {
    width: 244px;
    background: #f6f6f6;
    font-weight: 500;
    white-space: nowrap;
}

.shopping-guide__table--stock th {
    width: 158px;
}

.shopping-guide__tableNote {
    margin: 4px 0 0;
    color: #e02020;
    font-size: 15px;
}

/* 受付不可事例（リスト） */
.shopping-guide__bulletList {
    margin: 0 0 16px;
    padding-left: 1.2em;
    list-style: none;
}

.shopping-guide__bulletList > li {
    position: relative;
    padding-left: 0;
    margin-bottom: 8px;
}

.shopping-guide__bulletList > li::before {
    content: "・";
    position: absolute;
    left: -1em;
}

.shopping-guide__bulletList .shopping-guide__note {
    margin-top: 4px;
}

/* =========================================================
   Recommended Services Block (.ec-blockRecommendedServices)
   対応デザイン: Figma PC 1213:4297 / SP 1390:6835 内「おすすめサービス」セクション
   ========================================================= */
.ec-blockRecommendedServices {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0;
}

.ec-blockRecommendedServices__title {
    margin: 0 0 36px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    letter-spacing: -.02em;
}

.ec-blockRecommendedServices__tabs {
    display: flex;
    gap: 19px;
    list-style: none;
    margin: 0 0 -1px;
    padding: 0 28px;
}

.ec-blockRecommendedServices__tab {
    flex: 0 0 241px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    border-radius: 10px 10px 0 0;
    background: #fff;
    color: #000;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
    cursor: default;
}

.ec-blockRecommendedServices__tab.is-active {
    background: #00CCCC;
    font-weight: 500;
}

.ec-blockRecommendedServices__panel {
    display: grid;
    grid-template-columns: minmax(0, 473px) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 36px 56px;
    border: 1px solid #000;
    border-radius: 15px;
    background: #fff;
}

.ec-blockRecommendedServices__image {
    aspect-ratio: 473 / 258;
    background: #d9d9d9;
    border-radius: 15px;
    overflow: hidden;
}

.ec-blockRecommendedServices__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-blockRecommendedServices__heading {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.6;
}

.ec-blockRecommendedServices__desc {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -.02em;
}

.ec-blockRecommendedServices__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 381px;
    height: 64px;
    padding: 0 24px;
    background: #efefef;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    transition: background .2s;
}

.ec-blockRecommendedServices__cta:hover {
    background: #e3e3e3;
    opacity: 1;
}

/* =========================================================
   タブレット (max-width: 1024px) — shopping-guide / Recommended
   ========================================================= */
@media screen and (max-width: 1024px) {
    .shopping-guide {
        padding: 0 24px 60px;
    }

    .shopping-guide__pageHeader-ja {
        font-size: 28px;
    }

    .shopping-guide__categoryNav {
        grid-template-columns: repeat(3, 1fr);
    }

    .shopping-guide__stepBody {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .shopping-guide__stepImage {
        max-width: 631px;
    }

    .ec-blockRecommendedServices {
        padding: 0 24px;
    }

    .ec-blockRecommendedServices__panel {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px;
    }

    .ec-blockRecommendedServices__image {
        max-width: 473px;
        margin: 0 auto;
        width: 100%;
    }
}

/* =========================================================
   スマートフォン (max-width: 767px) — shopping-guide / Recommended
   対応デザイン: Figma SP 1390:5163 / 1390:6835
   ========================================================= */
@media screen and (max-width: 767px) {
    .shopping-guide {
        padding: 0 16px 60px;
        font-size: 14px;
    }

    .shopping-guide__pageHeader {
        padding: 36px 16px 28px;
        border-bottom-width: 6px;
    }

    .shopping-guide__pageHeader-en {
        font-size: 10px;
    }

    .shopping-guide__pageHeader-ja {
        font-size: 20px;
    }

    .shopping-guide__breadcrumb {
        padding: 16px 0 0;
        margin-bottom: 28px;
        font-size: 12px;
    }

    .shopping-guide__categoryNav {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 50px;
    }

    .shopping-guide__categoryNav-item {
        min-height: 40px;
        font-size: 14px;
        padding: 6px 24px 6px 10px;
    }

    .shopping-guide__categoryNav-item::after {
        right: 10px;
        width: 6px;
        height: 6px;
    }

    .shopping-guide__section {
        margin-bottom: 60px;
    }

    .shopping-guide__sectionTitle {
        font-size: 20px;
        margin-bottom: 24px;
        padding-bottom: 12px;
    }

    .shopping-guide__subTitle {
        font-size: 18px;
        margin-bottom: 18px;
    }

    .shopping-guide__step {
        margin-bottom: 40px;
    }

    .shopping-guide__stepHeader {
        gap: 14px;
        margin-bottom: 16px;
    }

    .shopping-guide__stepNo,
    .shopping-guide__stepTitle {
        font-size: 18px;
    }

    .shopping-guide__stepBody {
        gap: 18px;
    }

    .shopping-guide__inlineCta {
        min-width: 0;
        width: 100%;
        height: 50px;
        font-size: 14px;
        letter-spacing: .04em;
    }

    .shopping-guide__cardLogos {
        gap: 12px;
    }

    .shopping-guide__cardLogos img {
        height: 32px;
    }

    .shopping-guide__bankInfo {
        padding: 12px 20px;
    }

    .shopping-guide__bankInfo-row {
        grid-template-columns: 96px 1fr;
        gap: 12px;
    }

    .shopping-guide__table {
        font-size: 14px;
    }

    .shopping-guide__table th,
    .shopping-guide__table td {
        padding: 12px 12px;
        line-height: 1.5;
    }

    .shopping-guide__table th {
        width: 140px;
        white-space: normal;
    }

    .shopping-guide__table--stock th {
        width: 140px;
    }

    .shopping-guide__tableNote {
        font-size: 13px;
    }

    .shopping-guide__note {
        font-size: 14px;
    }

    /* Recommended Block SP */
    .ec-blockRecommendedServices {
        margin: 40px auto;
        padding: 0 16px;
    }

    .ec-blockRecommendedServices__title {
        font-size: 20px;
        margin-bottom: 24px;
    }

    .ec-blockRecommendedServices__tabs {
        gap: 8px;
        padding: 0;
    }

    .ec-blockRecommendedServices__tab {
        flex: 1 1 0;
        min-height: 44px;
        font-size: 13px;
    }

    .ec-blockRecommendedServices__panel {
        padding: 24px 16px;
        gap: 20px;
    }

    .ec-blockRecommendedServices__heading {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .ec-blockRecommendedServices__desc {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .ec-blockRecommendedServices__cta {
        min-width: 0;
        width: 100%;
        height: 50px;
        font-size: 14px;
    }
}

/* =========================================================
   Contact お問い合わせ Block (.ec-blockContact)
   対応デザイン: Figma PC 1213:4297 / SP 1390:6835 内「お問い合わせ」セクション
   ========================================================= */
.ec-blockContact {
    position: relative;
    width: 100vw;
    margin: 80px calc(50% - 50vw) 0;
    padding: 80px 24px 100px;
    overflow: hidden;
    isolation: isolate;
}

.ec-blockContact__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.ec-blockContact__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-blockContact__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.7) 36%,
        rgba(255, 255, 255, 0) 100%
    );
}

.ec-blockContact__inner {
    max-width: 1200px;
    margin: 0 auto;
}

header.ec-blockContact__head {
    text-align: center;
    margin: 0 0 56px;
}

p.ec-blockContact__head {
    margin: 0 auto 16px;
    max-width: 234px;
}

.ec-blockContact__head img {
    width: 100%;
    height: auto;
    display: block;
}

.ec-blockContact__title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    color: #000;
}

.ec-blockContact__lead {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    color: #000;
}

.ec-blockContact__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

.ec-blockContact__card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 36px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.ec-blockContact__cardLabel {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.7;
    color: #000;
}

.ec-blockContact__tel {
    margin: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
}

.ec-blockContact__tel a {
    color: #000;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 42px;
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
    text-decoration: none;
}

.ec-blockContact__mailBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    padding: 12px 100px;
    background: #ffee06;
    border-radius: 10px;
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    text-decoration: none;
    transition: background .2s, opacity .2s;
}

.ec-blockContact__mailBtn:hover {
    background: #f6e000;
    opacity: 1;
}

/* タブレット */
@media screen and (max-width: 1024px) {
    .ec-blockContact {
        padding: 60px 24px 80px;
    }

    .ec-blockContact__cards {
        gap: 18px;
    }

    .ec-blockContact__card {
        padding: 28px 20px;
    }

    .ec-blockContact__tel {
        font-size: 34px;
    }

    .ec-blockContact__mailBtn {
        min-width: 220px;
        padding: 12px 48px;
        font-size: 20px;
    }
}

/* スマートフォン
   対応デザイン: Figma SP 1390:6835 内「お問い合わせ」セクション
   2 ボックスは縦積み、タイポは縮小。 */
@media screen and (max-width: 767px) {
    .ec-blockContact {
        margin-top: 50px;
        padding: 48px 16px 60px;
    }

    header.ec-blockContact__head {
        margin-bottom: 32px;
    }

    p.ec-blockContact__head {
        max-width: 180px;
        margin-bottom: 12px;
    }

    .ec-blockContact__title {
        font-size: 18px;
    }

    .ec-blockContact__lead {
        font-size: 14px;
    }

    .ec-blockContact__cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ec-blockContact__card {
        padding: 24px 16px;
        min-height: 0;
    }

    .ec-blockContact__cardLabel {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .ec-blockContact__tel {
        font-size: 24px;
    }

    .ec-blockContact__tel a {
        font-size: 24px;
    }

    .ec-blockContact__mailBtn {
        min-width: 0;
        width: 100%;
        padding: 10px 24px;
        border-radius: 6px;
        font-size: 16px;
    }
}

/* =========================================================
   サンプル請求ページ (p-sampleRequest / nk-sub-mv--sample-request)
   対応 twig: app/template/default/CurtainOptions/Resource/template/default/Sample/request.twig
   ========================================================= */

.nk-sub-mv--sample-request {
    background-image: url('../img/sample-request/mv.png');
}

/* =========================================================
   商品一覧ページ (Product/list.twig)
   対応 twig: app/template/default/Product/list.twig
   ========================================================= */

.nk-sub-mv--product-list {
    background-image: url('../img/tashiro/page/product-list-mv.jpg');
}

/* 商品一覧ページではヘッダー (position:absolute top:18px) と被らないように
   パンくずの上余白を広げる */
#page_product_list .nk-breadcrumb {
    margin-top: 100px;
}

/* ----- パンくず下のページタイトル + 装飾線 (member-guide__sectionTitle 風) ----- */
.nk-product-list-header {
    text-align: center;
    margin: 32px 0 0;
    padding: 0 20px;
}

.nk-product-list-header__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: #000;
    margin: 0;
    line-height: 1.4;
    letter-spacing: .02em;
}

.nk-product-list-header__decor {
    display: block;
    width: 137px;
    height: 35px;
    margin: 4px auto 0;
    background: url('/html/user_data/assets/img/member-guide/sen.png') center/contain no-repeat;
    transform: rotate(5.11deg);
}

/* ----- 動的カテゴリボタン ----- */
.nk-product-list-categories {
    margin: 40px 0 0;
}

.nk-product-list-categories__inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.nk-product-list-categories__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nk-product-list-categories__item {
    flex-shrink: 0;
    list-style: none;
}

.nk-product-list-categories__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 14px 28px;
    border: 1.5px solid #0CC;
    border-radius: 999px;
    background-color: #FFFFFF;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.nk-product-list-categories__link:hover,
.nk-product-list-categories__link.is-active {
    background-color: #0CC;
    color: #FFFFFF;
}

/* ----- ツールバー (件数 + ソート) ----- */
.nk-product-list-toolbar {
    margin: 0 0 24px;
}

.nk-product-list-toolbar__inner {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nk-product-list-toolbar__counter {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

.nk-product-list-toolbar__actions {
    display: flex;
    gap: 12px;
}

/* ----- カスタムセレクト (件数/並び順) ----- */
.nk-select {
    position: relative;
    display: inline-block;
}

.nk-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 9px;
    height: 6px;
    background-color: #333;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateY(-50%);
    pointer-events: none;
}

.nk-select__field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    min-width: 140px;
    padding: 0 36px 0 14px;
    border: 2px solid #333;
    border-radius: 0;
    background-color: #FFFFFF;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.nk-select--sm .nk-select__field {
    min-width: 96px;
}

.nk-select__field:focus {
    outline: 2px solid #0CC;
    outline-offset: 1px;
}

/* ----- 2 カラムレイアウト ----- */
.nk-product-list-layout {
    margin: 32px 0 80px;
}

.nk-product-list-layout__inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 20px 0;
    border-top: 1px solid #DDD;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: flex-start;
}

/* ----- フィルタサイドバー (PC) ----- */
.nk-product-list-filter {
    position: relative;
    background-color: #FFFFFF;
}

.nk-product-list-filter__header {
    display: none;
}

.nk-filter-group {
    padding: 18px 0;
    border-bottom: 1px solid #E0E0E0;
}

.nk-filter-group:first-child {
    padding-top: 0;
}

.nk-filter-group__title {
    margin: 0 0 12px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}

.nk-filter-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nk-filter-group__list--colors {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.nk-filter-group__list--nav {
    flex-direction: column;
    gap: 8px;
}

.nk-filter-group__nav-link {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    background: #EFEFEF;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.5;
    transition: background-color .2s ease, color .2s ease;
}

.nk-filter-group__nav-link:hover {
    background: #DCDCDC;
}

.nk-filter-group__nav-link.is-active {
    background: #4A4A4A;
    color: #FFFFFF;
}

.nk-filter-group__nav-link.is-active:hover {
    background: #4A4A4A;
}

.nk-filter-group__item {
    list-style: none;
    padding: 0;
}

.nk-filter-group__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    user-select: none;
}

.nk-filter-group__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid #999;
    border-radius: 3px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.nk-filter-group__checkbox:checked {
    border-color: #0CC;
    background-color: #0CC;
}

.nk-filter-group__checkbox:checked::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg);
}

.nk-filter-group__label--color {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 52px;
    text-align: center;
    position: relative;
}

.nk-filter-group__label--color .nk-filter-group__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nk-filter-group__swatch {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #DDD;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nk-filter-group__label--color .nk-filter-group__checkbox:checked ~ .nk-filter-group__swatch {
    border-color: #0CC;
    box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.25);
}

.nk-filter-group__label--color .nk-filter-group__text {
    font-size: 12px;
    color: #555;
    line-height: 1.3;
}

.nk-product-list-filter-toggle,
.nk-product-list-filter-overlay {
    display: none;
}

/* ----- 商品グリッド ----- */
.nk-product-list-main {
    min-width: 0;
}

.nk-shelfGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nk-shelfGrid__item {
    list-style: none;
}

.nk-shelfGrid__link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}

.nk-shelfGrid__link:hover {
    opacity: .85;
}

.nk-shelfGrid__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background-color: #F4F4F4;
}

.nk-shelfGrid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nk-shelfGrid__category {
    margin: 12px 0 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.nk-shelfGrid__name {
    margin: 6px 0 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.nk-shelfGrid__price {
    margin: 8px 0 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
}

.nk-shelfGrid__tags {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.nk-shelfGrid__tag {
    list-style: none;
    padding: 3px 8px;
    border: 1px solid #DDD;
    border-radius: 3px;
    background-color: #F8F8F8;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    color: #555;
    line-height: 1.4;
}

/* ----- ページャ ----- */
.nk-product-list-pager {
    margin: 48px 0 0;
    display: flex;
    justify-content: center;
}

.nk-product-list-pager .ec-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.nk-product-list-pager .ec-pager__item,
.nk-product-list-pager .ec-pager__item--active {
    list-style: none;
    margin: 0;
}

.nk-product-list-pager .ec-pager__item a,
.nk-product-list-pager .ec-pager__item--active a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #DDD;
    border-radius: 999px;
    background-color: #FFFFFF;
    color: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.nk-product-list-pager .ec-pager__item a:hover {
    background-color: #F4F4F4;
}

.nk-product-list-pager .ec-pager__item--active a {
    background-color: #0CC;
    border-color: #0CC;
    color: #FFFFFF;
    font-weight: 700;
}

.nk-product-list-error {
    width: 1200px;
    max-width: 100%;
    margin: 40px auto 0;
    padding: 0 20px;
}

/* ----- SP 専用 Search セクション (PC では非表示) ----- */
.nk-product-list-search-wrap {
    display: none;
}

/* ----- SP (768px 以下) ----- */
@media (max-width: 768px) {
    /* SP は .nk-header が position:relative で被らないので
       PC 用の margin-top: 100px を戻す */
    #page_product_list .nk-breadcrumb {
        margin-top: 20px;
    }

    .nk-product-list-header {
        margin: 24px 0 0;
        padding: 0 16px;
    }

    .nk-product-list-header__title {
        font-size: 22px;
    }

    .nk-product-list-header__decor {
        width: 128px;
        height: 33px;
    }

    .nk-product-list-categories {
        margin: 24px 0 0;
    }

    .nk-product-list-categories__inner {
        padding: 0 16px;
    }

    .nk-product-list-categories__list {
        gap: 10px;
    }

    .nk-product-list-categories__link {
        min-width: 0;
        flex: 1 1 calc(50% - 5px);
        padding: 12px 16px;
        font-size: 14px;
    }

    .nk-product-list-toolbar {
        margin: 0 0 16px;
    }

    .nk-product-list-toolbar__inner {
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .nk-product-list-toolbar__counter {
        font-size: 14px;
    }

    .nk-product-list-toolbar__actions {
        width: 100%;
        justify-content: flex-end;
        gap: 12px;
    }

    .nk-select__field {
        height: 36px;
        min-width: 130px;
        font-size: 13px;
    }

    .nk-select--sm .nk-select__field {
        min-width: 90px;
    }

    .nk-product-list-layout {
        margin: 24px 0 40px;
    }

    .nk-product-list-layout__inner {
        padding: 24px 16px 0;
        display: block;
    }

    /* PC サイドバーフィルタは SP では非表示 (代わりに後述の Search セクションを利用) */
    .nk-product-list-filter {
        display: none;
    }

    /* SP では Search タブセクションを表示 */
    .nk-product-list-search-wrap {
        display: block;
        margin: 32px 0 0;
    }

    .nk-shelfGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 12px;
    }

    .nk-shelfGrid__image {
        border-radius: 8px;
    }

    .nk-shelfGrid__category {
        font-size: 11px;
        margin-top: 8px;
    }

    .nk-shelfGrid__name {
        font-size: 13px;
        margin-top: 4px;
    }

    .nk-shelfGrid__price {
        font-size: 16px;
        margin-top: 6px;
    }

    .nk-shelfGrid__tag {
        font-size: 10px;
        padding: 2px 6px;
    }

    .nk-product-list-pager {
        margin: 32px 0 0;
    }

    .nk-product-list-pager .ec-pager__item a,
    .nk-product-list-pager .ec-pager__item--active a {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .nk-product-list-error {
        padding: 0 16px;
        margin-top: 24px;
    }
}

@media (max-width: 480px) {
    .nk-product-list-categories__link {
        flex: 1 1 100%;
    }
}