/* ===== HIRR 共通CSS ===== */
/* theme_customize.css の代替 + カスタム拡張 */

:root {
    /* フォント */
    --font-shippori: "Shippori Mincho B1", "游明朝", "Yu Mincho", serif;
    --font-notoserif: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
    --font-cormorant: "Cormorant Garamond", serif;

    /* ブランドカラー */
    --color-black: #000000;
    --color-white: #ffffff;

    /* テーマ変数（theme_customize.css から移植） */
    --color-text-head: #ffffff;
    --color-text-body: #ffffff;
    --color-text-overlay: #FFFFFF;
    --color-text-link: #0b6d57;
    --color-btn-bg: #BF8C15;
    --color-btn-text: #FFFFFF;
    --color-input-text: #39413c;
    --color-input-border: #BDC1C2;
    --color-page-bg: #000000;
    --color-page-border: #D8DDDF;
    --color-page-accent: #0b6d57;

    --font-size-text-head: 24px;
    --font-size-text-subhead: 17px;
    --font-size-text-body: 13px;
    --font-size-text-link: 13px;

    --font-family-text-head: var(--font-shippori);
    --font-family-text-subhead: var(--font-shippori);
    --font-family-text-body: var(--font-shippori);

    /* セクション間隔 */
    --section-spacing: 120px;

    /* モーション共通イージング（参考サイト hirr-lilac の --ease と完全一致） */
    --hirr-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* sticky 重なり演出（about→product / story→story2→producer）の安全余白。
       各 sticky セクションは hold = sticky高 + この値、被せ要素は margin-top = -(sticky高 + この値) とする。
       → 被せ要素が上端に来るタイミング(見た目)は不変のまま、固定解除だけを後ろ倒しして
         「次要素が上端に来る前に固定が外れる」隙間を防ぐ。
       モバイルはブラウザchrome(URLバー)分 vh(=lvh) が実ビューポートを ~200px 上回り
       固定解除が早まるため、それを吸収できる固定px値にしている（SPの各セクションで使用）。
       隙間がまだ出る/出過ぎる場合はこの1箇所を増減すれば全セクションに反映される。 */
    --hirr-pin-safe: 320px;

    /* 国別カラー設定 地域が増えるごとに追加 バナーのベースカラー */
    --region-india: linear-gradient(5deg,#5E421B 0%,#9A6C2F 46%,#C89A57 100%);
    --region-taiwan: linear-gradient(5deg,#5E3F64 0%,#8D6494 46%,#A983B0 100%);
    --region-china: linear-gradient(5deg,#3A243D 0%,#5B3A5E 46%,#7A5A7E 100%);
    --region-vietnam: linear-gradient(5deg,#4F1E26 0%,#7A2E3A 46%,#9C4A56 100%);
    --region-sri-lanka: linear-gradient(5deg,#004A30 0%,#006F5A 46%,#008777 100%);

    /* 国別カラー設定 地域が増えるごとに追加 バナーの背景柄カラー */
    --region-pattern-india: #d2941a;
    --region-pattern-taiwan: #C672D3;
    --region-pattern-china: #94429B;
    --region-pattern-vietnam: #AB3D4E;
    --region-pattern-sri-lanka: #1F957E;
    
    /* 国別カラー設定 地域が増えるごとに追加 ラベル系の背景色 */
    --region-label-india: #9a6c2f;
    --region-label-taiwan: #8D6494;
    --region-label-china: #5B3A5E;
    --region-label-vietnam: #7A2E3A;
    --region-label-sri-lanka: #006F5A;
}


@media (max-width: 719px) {
    :root {
        --section-spacing: 80px;
    }
    /* SP: 本文ユーティリティ .u-text--body を 14px に。
       元定義(theme_customize.css の 13px!important)は無効化済みだが、bundle等の個別font-sizeにも勝つよう !important。 */
    .u-text--body {
        font-size: 14px !important;
    }
    /* SP: 決済確認サイドの請求リストに上余白 */
    .p-checkout_confirm__inner__side .c-billing_list {
        margin-top: 20px;
    }
}

/* ===== ユーティリティ上書き ===== */
/* AP修正: 背景ユーティリティ .u-color__bg--bg を HIRR ブランド色に。
   定義元は util.css(#F4F8FA)。hirr-common.css は最後に読まれるので同特異性で後勝ち（!important不要）。 */
.u-color__bg--bg {
    background: #CECBC8;
    color: #000;
}

body,
body .l-wrapper-none {
    font-family: var(--font-shippori);
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    color: var(--color-text-body);
}

/* bundle.css / theme.css の .l-wrapper / .l-wrapper-none に overflow:hidden が当たっており
   これが祖先要素になると position:sticky が完全に無効化される（仕様）
   → sticky を動かしつつ横スクロール（横揺れ）を防ぐ:
     - overflow-x: clip  … 横はみ出しをクリップ（clip はスクロールコンテナを作らないので sticky を壊さない）
     - overflow-y: visible … 縦は visible のまま → sticky が機能する
   ※ overflow:hidden だと sticky が無効化されるので clip を使うのがポイント */
html body .l-wrapper,
html body .l-wrapper-none {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* 念のためルート側でも横はみ出しを抑止（clip で sticky に影響を与えない） */
html,
body {
    overflow-x: clip;
}

/* ===== ユーティリティ（theme_customize.css から移植） ===== */

/* カラー */
.u-text--color--overlay { color: #FFFFFF; }
.u-color--head { color: var(--color-text-head); }
.u-color--body { color: var(--color-text-body); }
.u-color--input { color: var(--color-input-text); }

/* ボタン */
.u-color__btn--bg { background: var(--color-btn-bg); }
.u-color__btn--bg--overlay { background: var(--color-btn-bg); }
.u-color__btn--bg--reverse { background: #FFFFFF; }
.u-color__btn--bg--overlay--reverse { background: #FFFFFF; }
.u-color__btn { color: var(--color-btn-bg); }
.u-color__btn--text { color: #FFFFFF; }
.u-color__btn--text--bg { background: #FFFFFF; }
.u-text--btn { color: var(--color-btn-text); }
.u-text--btn--overlay { color: var(--color-btn-text); }
.u-text--btn--reverse {
    color: var(--color-btn-bg);
    border: 1px solid #BDC1C2;
}
.u-text--btn--overlay--reverse {
    color: var(--color-btn-bg);
    border: 1px solid #BDC1C2;
}

/* 入力 */
.u-text--input { color: var(--color-input-text); }
.u-color__input--bg { background: #FFFFFF; }
.u-color__border--input { border-color: #D7D9D8; }

/* 背景・ボーダー */
.u-color__bg--base { background: var(--color-page-bg); }
.u-color__bg--main { background: var(--color-page-bg); }
.u-color__border--border { border-color: var(--color-page-border); }
.u-color__border--main { border-color: var(--color-page-border); }

/* フォント */
.u-font--bold { font-weight: bold; }

/* プロダクト */
.c-product_info__details__icon::before,
.c-product_info__details__icon::after {
    background: var(--color-text-head);
}
.c-product_item__actions .c-product_item__form--favorite { display: none; } /* AP修正: お気に入りボタンを全カードで非表示 */
.c-product_item__actions .c-product_item__form--cart { display: none; }
/* AP修正: 「NEW」ラベルを全カードで非表示（現状ほぼ全商品が新着期間内で付いてしまうため） */
.c-product_item__inner__eyecatch__tags__new { display: none !important; }

/* テーマコンポーネント */
.c-steps_to_order--theme {
    --theme-color: var(--color-btn-bg);
    --text-color: var(--color-btn-text);
}
.p-movie--theme {
    --theme-color: var(--color-btn-bg);
}

/* ===== レスポンシブユーティリティ ===== */
.pc-only { display: block; }
.sp-only { display: none; }
a.pc-only, span.pc-only { display: inline-flex; }
@media (max-width: 719px) {
    .pc-only, a.pc-only, span.pc-only { display: none; }
    .sp-only { display: block; }
}


/* ===== ボタンコンポーネント ===== */
.hirr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 180px;
    height: 46px;
    background-color: var(--color-black);
    border-radius: 50px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.hirr-btn span {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 2px;
}
.hirr-btn__arrow {
    width: 8px;
    object-fit: contain;
}

.c-form_table > tbody > tr {
    border-top: 1px solid #D7D9D8;
}
/* AP修正箇所(2026-06) レビュー投稿フォーム(#product_review)だけ、行の上線(border-top)を消す。
   他フォーム（お問い合わせ・住所等）の線は残す。ID指定なので!important不要で勝つ。 */
#product_review .c-form_table > tbody > tr {
    border-top: none!important;
}
/* お問い合わせ（入力draft / 確認confirm = #contacts-form-view）だけ行の罫線を消す。
   draft は .c-form_table の border-top、confirm は .c-form_table--confirm の border-bottom(bundle.css)。
   注文確認など他フォームの区切り線は残す（ID指定で限定）。 */
#contacts-form-view .c-form_table > tbody > tr {
    border-top: none;
}
#contacts-form-view .c-form_table--confirm > tbody > tr {
    border-bottom: none;
}
/* 確認テーブル全般（注文確認 #confirm-view 等）の行下線(border-bottom)を消す。
   出どころは bundle.css:6501 の .c-form_table--confirm > tbody > tr { border-bottom:1px solid }。
   ※上の #contacts-form-view 限定指定はこれで冗長になるが無害。 */
.c-form_table--confirm > tbody > tr {
    border-bottom: none;
}
/* 注文確認の各フィールド行の下余白を広げる（bundle.css:840 の padding-bottom:10px を上書き） */
.p-order_confirmation .c-confirm_field__row {
    padding-bottom: 47px;
}
/* SP は 40px（上の47pxより後に置いて後勝ちさせる） */
@media (max-width: 719px) {
    .p-order_confirmation .c-confirm_field__row {
        padding-bottom: 40px;
    }
}
/* 決済ページ（orders/new = #new-view）だけ、フォーム行の上線(border-top)を消す。
   注文確認(confirm)など他フォームの区切り線は残す（ID指定で限定）。 */
#new-view .c-form_table > tbody > tr {
    border-top: none;
}
/* 決済ページ：受取方法等のブロック下線(border-bottom)も消す */
#new-view .p-checkout__list__block {
    border-bottom: none;
}
/* AP追記(2026-07) 決済ページ(#new-view) SP：全体的に縦余白が広いので詰める。
   既定 block: padding-bottom40+margin-bottom40(=約80px) / inner content: margin-bottom40 / title: margin-bottom20。 */
@media (max-width: 719px) {
    #new-view .p-checkout__list__block {
        padding-bottom: 24px;
        margin-bottom: 0;
    }
    #new-view .p-checkout__list__block__inner__content {
        margin-bottom: 24px;
    }
    #new-view .p-checkout__list__block__inner__title {
        margin-bottom: 14px;
    }
}

/* ===== カートのバッジを商品詳細のデザインに統一 ===== */
/* AP修正: カートページ(#cart-show-view)の c-cart_item__badges を、商品詳細(.p-product_content)と同じ
   塗りデザインに揃える。予約=塗り赤 / 配送グループ=塗り金。ID指定で bundle.css の既定(枠線版)に勝つ。
   商品一覧・カートモーダル等は現状維持（必要なら同様に拡張可）。 */
#cart-show-view .c-badge--preorder {
    background: transparent;     /* AP修正: 塗り赤→背景なし */
    border: 1px solid #fff;      /* AP修正: 白枠（数量更新ボタンと統一） */
    border-radius: 5px;
    color: #fff;
    padding: 6px 18px;
    font-weight: 500;
    line-height: 1.4;
}
#cart-show-view .c-badge--delivery-group {
    background: transparent;     /* AP修正: 塗り金→背景なし */
    border: 1px solid #fff;      /* AP修正: 白枠（予約バッジ・更新ボタンと統一） */
    border-radius: 5px;
    color: #fff;
    padding: 6px 18px;
    font-weight: 500;
    line-height: 1.4;
}
/* 定期便バッジ（カートが将来 c-badge--recurring を出す場合に備えて詳細と同じ金塗りで用意） */
#cart-show-view .c-badge--recurring {
    background: transparent;     /* AP修正: 塗り金→背景なし */
    border: 1px solid #fff;      /* AP修正: 白枠（予約バッジ・更新ボタンと統一） */
    border-radius: 5px;
    color: #fff;
    padding: 6px 18px;
    font-weight: 500;
    line-height: 1.4;
}

/* 数量の「更新」ボタンだけ、金塗り(u-color__btn--bg)を打ち消して 背景なし＋白枠（アウトライン）に。
   このボタン専用クラスを element+class で指定し u-color__btn--bg(.0,1,0) より確実に勝たせる。 */
button.c-cart_item__info__quantity__submit {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

/* カートのメッセージ文（※個数をご確認ください 等）の文字色をブランドゴールドに */
.p-cart_content__message-text {
    color: #BF8C15;
    font-weight: 500;
    font-size: 14px;
}
/* お問い合わせフォームのボタン背景をブランドゴールド #BF8C15 に（#contacts-form-view 限定）。
   対象: 「よくあるご質問」リンク / 「入力確認画面へ」「送信」ボタン。
   会員登録・パスワード等の同クラス(.p-account_form__inner__bottom__btn)には影響しない。
   hover は bundle の opacity:.4 のままでOK（背景色変更なし）。 */
#contacts-form-view .p-contact__link__btn,
#contacts-form-view .p-account_form__inner__bottom__btn {
    background: #BF8C15;
}
/* プライバシーポリシー同意のチェックマーク(✓)を #BF8C15 に。
   ✓は .c-form_table__checkbox__frame の border(currentColor)＝color依存なので color を上書き。 */
#contacts-form-view .c-form_table__checkbox__frame {
    color: #BF8C15;
}
/* AP修正(2026-07) チェックボックス行：ラベルが複数行の時にチェックを先頭行へ揃える（既定 align-items:center → flex-start） */
.c-form_table__checkbox {
    align-items: flex-start;
}
.c-form_table > tbody > tr > th, 
.c-form_table--confirm > tbody > tr > th {
    width: 280px;
    font-size: 16px;
    font-weight: 700;
    vertical-align: middle;
    white-space: normal;
    padding: 20px 40px 20px 0;
}
/* お届け先住所テーブル(確認)の th の下余白を無くす。
   bundle.css のSP(≤719px)で th が display:block＋margin-bottom:6px になるのを、
   この3クラス指定(高い特異性)で 0 に上書き。 */
.c-form_table.p-shipping_address_table.--confirm > tbody > tr > th {
    margin-bottom: 0;
}
/* SP: 確認テーブル(.c-form_table--confirm)の行(.u-color__border--border)を「ラベル｜値」の横並びに。
   bundle は SP で tr/th/td を縦積み(block)にするため、対象行だけ flex で横並びへ。ラベル幅(flex-basis)・gapは要調整。 */
@media (max-width: 719px) {
    .c-form_table--confirm > tbody > tr.u-color__border--border {
        display: flex;
        align-items: baseline;
        column-gap: 12px;
    }
    .c-form_table--confirm > tbody > tr.u-color__border--border > th {
        flex: 0 0 40%;
        margin-bottom: 0;
    }
    .c-form_table--confirm > tbody > tr.u-color__border--border > td {
        flex: 1 1 auto;
        min-width: 0;
    }
}
.u-color__text--alert {
    color: #E60012;
}
.c-form_table > tbody > tr > td, 
.c-form_table--confirm > tbody > tr > td {
    width: auto;
    padding: 20px 0;
}
.c-form_table > tbody > tr > td input[type=text], 
.c-form_table--confirm > tbody > tr > td input[type=text], 
.c-form_table > tbody > tr > td input[type=email], 
.c-form_table--confirm > tbody > tr > td input[type=email], 
.c-form_table > tbody > tr > td input[type=tel], 
.c-form_table--confirm > tbody > tr > td input[type=tel], 
.c-form_table > tbody > tr > td input[type=number], 
.c-form_table--confirm > tbody > tr > td input[type=number], 
.c-form_table > tbody > tr > td input[type=password], 
.c-form_table--confirm > tbody > tr > td input[type=password] {
    width: 100%;
    height: 48px;
    font-size: 15px;
    padding: 0 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    width: 100%;
}
.c-form_table__name input {
    max-width: calc((100% - 10px) / 2);
}
.c-form_table__tel input {
    max-width: 95px;
}

.c-form_table__select {
    max-width: 200px;
}
.c-form_table__select > * {
    height: 40px;
    font-size: 15px;
    padding: 0 40px 0 16px;
    border-radius: 4px;
}
.c-form_table__select:after {
    content: "\e901";
    color: #808080;
    font-size: 24px;
    position: absolute;
    right: 8px;
    top: calc(50% - 12px);
    transform: rotate(90deg);
    pointer-events: none;
}
.c-form_table__select::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: #F7F8F7;
    border: 1px solid #D7D9D8;
    border-radius: 0 4px 4px 0;
    pointer-events: none;
}

.p-account_form__inner {
    max-width: 960px;
}


.p-checkout__list__block__inner {
    max-width: 960px;
}
#view-payment-information > * {
    max-width: 960px;
}

@media screen and (max-width: 719px) {
    .p-account_form {
        padding-right: 20px;
        padding-left: 20px;
    }
    .c-form_table > tbody > tr {
        padding: 20px 0;
    }
    .c-form_table > tbody > tr:not(:last-child), 
    .c-form_table--confirm > tbody > tr:not(:last-child) {
        margin-bottom: 0;
    }
    .c-form_table > tbody > tr > th, 
    .c-form_table--confirm > tbody > tr > th {
        max-width: 100%;
        font-size: 16px;
        margin-bottom: 12px;
        padding: 0;
    }
    .c-form_table > tbody > tr > td, 
    .c-form_table--confirm > tbody > tr > td {
        padding: 0;
    }
}



/* ===== TOP セクション共通見出し ===== */




/* =============================================
   絢茶縁 商品リスト カスタムスタイル
   ============================================= */

/* --- 共通ベース --- */
.hirr-product-list {
    padding: 0;
}
/* 既存の p-new_product__title を非表示（aya-section-header に置換済み） */
.hirr-product-list .p-new_product__title {
    display: none;
}

/* --- gridレイアウト（bundle.css の flex + calc を上書き） --- */
.hirr-product-list .p-new_product__slider__track__list {
    display: grid;
    grid-template-columns: repeat(var(--aya-cols, 4), 1fr);
    gap: 60px 24px;
    max-width: 1260px;
    margin-inline: auto;
    padding-inline: 30px;
}
/* bundle.css の width / margin をリセット */
.hirr-product-list .p-new_product__slider__track__list__item {
    width: 100%;
    margin: 0;
}
.hirr-product-list .p-new_product__slider__track__list__item:nth-child(n) {
    margin-top: 0;
    margin-left: 0;
}
/* 管理画面の列数設定に対応 */
.hirr-product-list .medium-up--one-1 { width: 100%; max-width: none; margin: 0; }
.hirr-product-list .medium-up--one-2 { width: 100%; }
.hirr-product-list .medium-up--one-3 { width: 100%; }
.hirr-product-list .medium-up--one-4 { width: 100%; }
.hirr-product-list .medium-up--one-5 { width: 100%; }
.hirr-product-list .medium-up--one-2:not(:nth-child(2n+1)),
.hirr-product-list .medium-up--one-3:not(:nth-child(3n+1)),
.hirr-product-list .medium-up--one-4:not(:nth-child(4n+1)),
.hirr-product-list .medium-up--one-5:not(:nth-child(5n+1)) {
    margin-left: 0;
}
.hirr-product-list .medium-up--one-2:nth-child(n+3),
.hirr-product-list .medium-up--one-3:nth-child(n+4),
.hirr-product-list .medium-up--one-4:nth-child(n+5),
.hirr-product-list .medium-up--one-5:nth-child(n+6) {
    margin-top: 0;
}
.hirr-product-list.p-new_product .medium-up--one-4:not(.forced-single-row):nth-child(n+3) {
    margin-top: 0;
}
.hirr-product-list.p-new_product .medium-up--one-5:not(.forced-single-row):nth-child(n+3) {
    margin-top: 0;
}
@media screen and (max-width: 719px) {
    .hirr-product-list.p-new_product .medium-up--one-4.forced-single-row:not(:first-child) {
        margin-top: 0;
    }
    .hirr-product-list.p-new_product .medium-up--one-5.forced-single-row:not(:first-child) {
        margin-top: 0;
    }
    .hirr-product-list.p-new_product .medium-up--one-4:not(.forced-single-row):nth-child(n+3) {
        margin-top: 0;
    }
    .hirr-product-list.p-new_product .medium-up--one-5:not(.forced-single-row):nth-child(n+3) {
        margin-top: 0;
    }
    .hirr-product-list.p-new_product .medium-up--one-4:not(.forced-single-row):nth-child(even) {
        margin-left: 0;
    }
    .hirr-product-list.p-new_product .medium-up--one-5:not(.forced-single-row):nth-child(even) {
        margin-left: 0;
    }
}

/* --- 商品一覧ページ（p-product_list）のグリッド化 --- */
.hirr-product-list .p-product_list__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px 24px;
    max-width: 1260px;
    margin-inline: auto;
    padding-inline: 30px;
}
.hirr-product-list .p-product_list__list__item {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
/* bundle.css の flex 横並びレイアウトをリセット */
.hirr-product-list .p-product_list__list__item .c-product_item {
    display: block;
}
@media screen and (max-width: 719px) {
    .hirr-product-list .p-product_list__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding-inline: 20px;
    }
}

/* --- カート・お気に入りボタン非表示 --- */
.hirr-product-list .c-product_item__actions {
    display: none;
}

/* --- 閲覧履歴(hirr-browsing-history)：カートやお気に入りのアクション非表示＋商品一覧と同じ「丸枠ピル＋→」を表示 --- */
.hirr-browsing-history .c-product_item__actions {
    display: none;
}
.hirr-browsing-history .c-product_item__more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    margin: 14px 10px 0;
    border: 0.5px solid #9b9b9b;
    border-radius: 32px;
}
.hirr-browsing-history .c-product_item__more__arrow {
    display: block;
    width: 37px;
    height: 8px;
}

/* --- カートページの閲覧履歴(.js-browsing-histories：コアJS描画)：アクション非表示＋商品一覧と同じ「丸枠ピル＋→」
       矢印(.c-product_item__more)は carts/show.html.liquid のJSで注入。装飾はここ。 --- */
.js-browsing-histories .c-product_item__actions {
    display: none;
}
.js-browsing-histories .c-product_item__more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    margin: 14px 10px 0;
    border: 0.5px solid #9b9b9b;
    border-radius: 32px;
}
.js-browsing-histories .c-product_item__more__arrow {
    display: block;
    width: 37px;
    height: 8px;
}

/* --- 商品カード --- */
.hirr-product-list .c-product_item__inner__eyecatch {
    aspect-ratio: 1 / 1;
}
.hirr-product-list .c-product_item__inner__eyecatch__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    background: #fff;
}
.hirr-product-list .c-product_item__inner__title {
    font-family: var(--font-shippori);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-black);
}
.hirr-product-list .c-product_item__inner__category {
    display: none;
}
.hirr-product-list .c-product_item__inner__price {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-black);
    margin: 0;
}
.hirr-product-list .c-product_item__inner__price:has(.price) {
    margin-top: 20px;
}
.hirr-product-list .product_description {
    font-family: var(--font-notoserif);
    font-size: 14px;
    font-weight: 500;
    color: #888;
    margin-top: 2px;
}
.hirr-product-list .c-product_item__inner__eyecatch__img__primary,
.hirr-product-list .c-product_item__inner__eyecatch__img__hover {
    object-fit: cover;
}

/* --- ホバー画像があるときのレイアウト崩れ修正 ---
   原因1: グリッド/フレックス子の min-width: auto により、画像の
          自然幅（naturalWidth）がセル幅を押し広げてしまう。
   原因2: bundle.js がタッチ端末で imageContainer に style="width: 400%"
          を付与して横並びスワイプを実現するが、.hirr-product-list /
          .hirr-recommend のグリッドではセル幅を超えて崩れる。
   DevTools を開くとリフローで再計算され直るのは原因1に一致するため、
   各階層で min-width / max-width を固定し、touch-mode は重ね合わせに戻す。 */

/* 原因1対策: 各階層で min-width: 0 を宣言して、子の自然幅で
   親が押し広げられるのを防ぐ */
.hirr-product-list .p-new_product__slider__track__list__item,
.hirr-product-list .c-product_item,
.hirr-product-list .c-product_item__inner__eyecatch,
.hirr-product-list .c-product_item__inner__eyecatch__img,
.hirr-recommend .hirr-recommend__item,
.hirr-recommend .c-product_item,
.hirr-recommend .c-product_item__inner__eyecatch,
.hirr-recommend .c-product_item__inner__eyecatch__img {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* 原因2対策: bundle.js のインライン width:400% を上書き */
.hirr-product-list .c-product_item__inner__eyecatch__img,
.hirr-recommend .c-product_item__inner__eyecatch__img {
    width: 100% !important;
    transform: none !important;
    transition: none !important;
}
.hirr-product-list .c-product_item__inner__eyecatch__img > *,
.hirr-recommend .c-product_item__inner__eyecatch__img > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
}

/* touch-mode: スワイプ機能を無効化して重ね合わせ表示に固定 */
.hirr-product-list .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img,
.hirr-recommend .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img {
    display: block !important;
    height: 100% !important;
}
.hirr-product-list .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img > *,
.hirr-recommend .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img > * {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
}
.hirr-product-list .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img__primary,
.hirr-recommend .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img__primary {
    opacity: 1 !important;
    z-index: 2 !important;
}
.hirr-product-list .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img__hover,
.hirr-recommend .c-product_item.--touch-mode .c-product_item__inner__eyecatch__img__hover {
    opacity: 0 !important;
    z-index: 1 !important;
}

/* --- NEW / SOLD OUT タグ非表示 --- */
.hirr-product-list .c-product_item__inner__eyecatch__tags {
    display: none;
}
/* --- バッジ非表示 --- */
.hirr-product-list .c-product_item__inner__badge {
    display: none;
}

/* --- もっと見るボタン非表示（すべて見るリンクで代替） --- */
.hirr-product-list .p-new_product__more {
    display: none;
}

/* --- 番号バッジ (CSS counter) --- */
.hirr-product-list--numbered .p-new_product__slider__track__list {
    counter-reset: product-number;
}
.hirr-product-list--numbered .p-new_product__slider__track__list__item {
    counter-increment: product-number;
}
.hirr-product-list--numbered .c-product_item__inner__eyecatch {
    position: relative;
    overflow: hidden;
}
.hirr-product-list--numbered .c-product_item__inner__eyecatch::before {
    content: counter(product-number, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 70px;
    height: 70px;
    background: linear-gradient(45deg, #004A30 0%, #006F5A 46%, #008777 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.hirr-product-list--numbered .c-product_item__inner__eyecatch::after {
    content: counter(product-number, decimal-leading-zero);
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 3;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
}
/* ::before は三角形のみ、::after がテキスト */
.hirr-product-list--numbered .c-product_item__inner__eyecatch::before {
    content: "";
}

/* =============================================
   PC/SP レイアウト切り替え
   ============================================= */

/* --- PC用はPCのみ表示、SP用はSPのみ表示 --- */
.hirr-layout-sp { display: none; }
.hirr-layout-pc { display: block; }

/* --- 横スクロールレイアウト --- */
.hirr-product-list .hirr-layout--scroll .p-new_product__slider__track {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-black, #0b6d57) transparent;
    padding-bottom: 8px;
}
.hirr-product-list .hirr-layout--scroll .p-new_product__slider__track__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    max-width: none;
    padding-inline: 30px;
}
.hirr-product-list .hirr-layout--scroll .p-new_product__slider__track__list__item {
    flex: 0 0 260px;
    width: 260px;
    min-width: 0;
}
/* グリッドレイアウトは既存スタイルをそのまま使用 */

/* --- カスタムスクロールバー（Webkit） --- */
.hirr-product-list .hirr-layout--scroll .p-new_product__slider__track::-webkit-scrollbar {
    height: 4px;
}
.hirr-product-list .hirr-layout--scroll .p-new_product__slider__track::-webkit-scrollbar-track {
    background: transparent;
}
.hirr-product-list .hirr-layout--scroll .p-new_product__slider__track::-webkit-scrollbar-thumb {
    background: var(--color-black, #0b6d57);
    border-radius: 2px;
}

/* =============================================
   SP対応
   ============================================= */
@media screen and (max-width: 719px) {
    .hirr-layout-pc { display: none; }
    .hirr-layout-sp { display: block; }

    .hirr-product-list {
        padding: 0;
    }

    /* グリッド: SP時は2列 */
    .hirr-product-list .hirr-layout--grid .p-new_product__slider__track__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding-inline: 20px;
    }
    .hirr-product-list .hirr-layout--grid .p-new_product__slider__track__list__item {
        width: 100%;
    }

    /* 横スクロール: SP時の調整 */
    .hirr-product-list .hirr-layout--scroll .p-new_product__slider__track__list {
        padding-inline: 20px;
        gap: 16px;
    }
    .hirr-product-list .hirr-layout--scroll .p-new_product__slider__track__list__item {
        flex: 0 0 200px;
        width: 200px;
    }

    .hirr-product-list--numbered .c-product_item__inner__eyecatch::before {
        width: 60px;
        height: 60px;
    }
}


/* ===== 商品一覧ページ ヘッダー ===== */

/* ページタイトル */
.hirr-page-header {
    max-width: 1260px;
    margin: 0 auto;
    padding: 60px 30px 0;
}
.hirr-page-header__title {
    font-family: var(--font-shippori);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black);
    margin: 0;
}
.hirr-page-header__subtitle {
    font-family: var(--font-cormorant);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin: 2px 0 0;
}
.hirr-page-header__line {
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--color-black) 20%, transparent);
    margin: 80px 0 0;
}

/* パンくず（共通ラッパー .hirr-breadcrumbs に統一） */
.hirr-breadcrumbs {
    max-width: 1260px;
    margin: 0 auto 32px;
    padding: 24px 30px 0;
}
.hirr-breadcrumbs .c-breadcrumbs {
    flex-wrap: wrap;
    row-gap: 4px;
}
.hirr-breadcrumbs .c-breadcrumbs__item {
    font-size: 13px;
}
.hirr-breadcrumbs .c-breadcrumbs__item a,
.hirr-breadcrumbs .c-breadcrumbs__item a:hover {
    text-decoration: none;
}
.hirr-breadcrumbs .c-breadcrumbs__item__inner {
    font-family: var(--font-shippori);
    font-size: 13px;
    color: var(--color-black);
}
.hirr-breadcrumbs .c-breadcrumbs__item__inner.u-text--link {
    color: color-mix(in srgb, var(--color-black) 50%, transparent);
}
/* セパレーターは arrow-gray.svg を疑似要素の背景で自動挿入
   （bundle.css の icon-font と手動 <img> の両方を置き換え） */
.hirr-breadcrumbs .c-breadcrumbs__item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 8px;
    margin: 0 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8' fill='none'><path d='M3.429 4L0 0.745523L0.785501 0L5 4L0.785501 8L0 7.25448L3.429 4Z' fill='%2339413C' fill-opacity='0.5'/></svg>") no-repeat center / contain;
    vertical-align: middle;
}
/* 旧実装の手動矢印 <img> は疑似要素と重複するため非表示 */
.hirr-breadcrumbs .c-breadcrumbs__item__arrow {
    display: none;
}

/* AP追記(2026-06) パンくず（全ページ共通）：max-width 1240px・中央寄せ・12px・Noto Serif JP・400。
   ※ 上の .hirr-breadcrumbs スコープ指定は未使用（どのテンプレにも .hirr-breadcrumbs が無い）のため、
     実際に使われている .c-breadcrumbs 直接に当てる。bundle.css の後に読まれるので上書きされる。 */
.c-breadcrumbs {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}
.c-breadcrumbs,
.c-breadcrumbs .c-breadcrumbs__item,
.c-breadcrumbs .c-breadcrumbs__item__inner {
    font-size: 12px;
    font-weight: 400;
    font-family: "Noto Serif JP", serif;
}
/* AP追記(2026-07) セレクションページのパンくず（ラッパー）：SPは余白を top28/left15/bottom55 に。
   PCはHTML側インライン margin:80px 0 8px のまま。インラインに勝たせるため !important。 */
@media (max-width: 719px) {
    .hirr-selection-breadcrumb {
        margin: 28px 0 55px 15px !important;
    }
}

/* AP追記(2026-06) セレクション見出しブロックも 1240px・中央寄せに */
.p-show_selection {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* AP修正(2026-06) パンくず区切りを アイコンフォント(content:"\e901") から 通常の「＞」に置換。
   bundle.css の icon-font 指定(font-family)を通常書体で打ち消す。ダーク背景で見えるよう淡い白。 */
.c-breadcrumbs__item:not(:last-child)::after {
    content: "＞";
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 1em;
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.6);
}

/* 並び替えバー */
.hirr-sort-bar {
    max-width: 1260px;
    margin: 0 auto 32px;
    padding: 0 30px;
}
.hirr-sort-bar .c-list_tool {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin-left: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 20%, transparent);
}
.hirr-sort-bar .c-list_tool__num {
    display: none;
}
.hirr-sort-bar .c-list_tool__sort__wrap {
    width: 140px;
}
.hirr-sort-bar .c-list_tool__sort__label {
    color: color-mix(in srgb, var(--color-black) 50%, transparent);
    font-size: 13px;
    letter-spacing: 0;
    margin-right: 0;
}
.hirr-sort-bar .c-list_tool__sort__wrap__select {
    padding-left: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    border: none;
    cursor: pointer;
}

@media screen and (max-width: 599px) {
    .hirr-page-header {
        padding: 40px 20px 0;
    }
    .hirr-page-header__title {
        font-size: 22px;
    }
    .hirr-page-header__subtitle {
        font-size: 13px;
    }
    .hirr-page-header__line {
        margin: 28px 0 0;
    }
    .hirr-breadcrumbs {
        padding: 0 20px;
    }
    .hirr-breadcrumbs .c-breadcrumbs__item,
    .hirr-breadcrumbs .c-breadcrumbs__item__inner {
        font-size: 12px;
    }
    .hirr-sort-bar {
        padding: 16px 20px 0;
    }
    .hirr-sort-bar .c-list_tool {
        margin-inline: auto;
    }
}


/* ===== Footer ===== */


/* =========================================================
   タイトル 1文字ずつリビール（共通）
   参考サイト hirr-lilac 踏襲：140msスタッガー・translateY(0.35em)→0＋fade・0.9s
   - 使い方: タイトル要素に class="hirr-reveal" を付与し、
     セクション内 <script> で window.hirrTitleReveal(el) を呼ぶ
   - JS が各文字を <span class="char" style="--char-delay:..."> に分割
   - 画面内に入ると親に is-visible が付いて発火（IntersectionObserver）
   - 縦書き（about/producer）でも transform は画面座標なので共通でOK
   ========================================================= */
.hirr-reveal .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity 0.9s var(--hirr-ease), transform 0.9s var(--hirr-ease);
    transition-delay: var(--char-delay, 0ms);
}
.hirr-reveal.is-visible .char {
    opacity: 1;
    transform: translateY(0);
}
/* 半角スペースが潰れないように */
.hirr-reveal .char--space {
    white-space: pre;
}
@media (prefers-reduced-motion: reduce) {
    .hirr-reveal .char {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* AP追記 価格: 「10,000円（税込11,000円）」形式（全ページ共通）
   ============================================================
   詳細・一覧・カード・ランキング・レコメンド等で共通利用。
   値スパンには ecforce の価格更新JS用クラス(.sales_price 等)を併存させる。
   ============================================================ */
.c-product_info__price-tax {
    margin-left: 2px;
    font-size: 0.85em; /* （税込◯◯円）は少し小さめ */
    white-space: nowrap;
}
.c-product_info__price-list {
    margin-right: 6px;
    font-size: 0.85em;
    text-decoration: line-through; /* セール時の定価 */
}
/* AP追記ここまで */

/* AP追記 関連商品(RECOMMEND)を slick→静的な横並びグリッドで表示
   ============================================================
   .p-product_slider--grid は slick 未初期化のため、リストを自前で横並びにする。
   2件なら左右に並び、多数なら折り返す（中央寄せ）。予約商品の6ヶ月/12ヶ月定期を
   関連商品として横並び表示する用途（併売が使えない予約商品の代替）。
   ============================================================ */
.p-product_slider--grid .p-product_slider__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.p-product_slider--grid .p-product_slider__item {
    flex: 0 1 230px;
    max-width: 255px;
}
/* slick未使用なのでナビ(dots/arrows)領域は隠す */
.p-product_slider--grid .p-product_slider__nav {
    display: none;
}
@media screen and (max-width: 480px) {
    .p-product_slider--grid .p-product_slider__list {
        gap: 16px 12px;
    }
    .p-product_slider--grid .p-product_slider__item {
        flex-basis: 45%;
    }
}
/* AP追記ここまで */

/* AP修正箇所(2026-06): HIRRフッターの上端に出る白い線を消す。
   テーマ既定 .l-footer { border-top: 1px solid }（色未指定→currentColor=footerの#fff）が
   フッター上端に白い1px線として表示されるため、#hirr-footer(ID指定)で打ち消す。
   全ページ共通のためhirr-common.cssに記載。 */
#hirr-footer {
    border-top: none!important;
}

/* AP修正箇所(2026-06): 一旦非表示にしているセクション内リンクをここに集約。
   各セクションのCSS(#hirr-xxx .hirr-xxx__link)より !important で打ち消す。
   再表示する時は、対象セレクタの行を消す／コメントアウトするだけでOK。
   ・hirr-story2__link   … TOP「じいちゃんの物語」(story2.liquid)
   ・hirr-producer__link … TOP「生産者紹介」(producer.liquid)
   ・hirr-about__link    … TOP「利休宝園とは」(about.liquid) */
.hirr-story2__link,
.hirr-producer__link,
.hirr-about__link {
    display: none !important;
}

/* =========================================================
   HIRR 新着情報（information_design:news / information.liquid に hirr-news 付与）
   Figma PC node 338:822 / SP node 309:1299：黒背景・白文字・INFORMATION縦ラベル・
   日付＋タイトル（PC横並び／SP縦積み）・下線・「一覧はこちら」テキストリンク。
   実ニュースは ecforce の informations から動的描画（既存テンプレ構造を流用）。
   ========================================================= */
.hirr-news {
    position: relative;
    background: #000;
    color: #fff;
    padding: clamp(76px, 7.8vw, 113px) 40px clamp(64px, 7vw, 100px);
    overflow: hidden;
}
.hirr-news .p-news__inner { max-width: 840px; width: 100%; margin: 0 auto; }

/* 見出し「新着情報」(__en=head) */
.hirr-news .p-news__inner__title { text-align: center; margin-bottom: clamp(34px, 4vw, 56px); }
.hirr-news .p-news__inner__title__en {
    font-family: "Shippori Mincho B1", "Yu Mincho", "YuMincho", serif;
    font-size: clamp(20px, 2.22vw, 32px);   /* Figma SP20 / PC32 */
    letter-spacing: 0.1em;                   /* 3.2/32 */
    font-weight: 400;
    color: #fff;
    margin: 0;
}
/* INFORMATION 縦ラベル(__jp=subhead) */
.hirr-news .p-news__inner__title__jp {
    position: absolute;
    top: clamp(43px, 3.6vw, 52px);
    left: clamp(12px, 1.7vw, 24px);   /* SP(375px等)で12px固定 / PCは最大24pxまでスケール */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: clamp(15px, 1.4vw, 20px);     /* Figma SP15 / PC20 */
    letter-spacing: 0.16em;                  /* 3.2/20 */
    font-weight: 400;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

/* ニュース項目（下線は項目下のみ・白25%） */
.hirr-news .c-news_item { border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.hirr-news .c-news_item:first-child { border-top: 0; }
.hirr-news .c-news_item__inner {
    display: flex;
    align-items: baseline;
    gap: clamp(24px, 4vw, 60px);
    padding: clamp(16px, 1.6vw, 20px) 0;
    color: #fff;
}
.hirr-news .c-news_item__inner:hover { opacity: 0.6; }
.hirr-news .c-news_item__inner__date,
.hirr-news .c-news_item__inner__title {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;                  /* Figma 0.8/16 */
    line-height: 1.625;
    color: #fff;
}
.hirr-news .c-news_item__inner__date { flex: none; white-space: nowrap; }
.hirr-news .c-news_item__inner__title { flex: 1; padding-left: 0; }

/* 「一覧はこちら」：塗りボタン解除 → テキスト＋下線 */
.hirr-news .p-news__inner__more { margin-top: clamp(48px, 5.5vw, 74px); text-align: center; }
.hirr-news .p-news__inner__more__btn {
    display: inline-block;
    width: auto;
    max-width: none;
    height: auto;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 20px;                         /* Figma 20px */
    font-weight: 500;
    letter-spacing: 0.04em;                  /* Figma 0.8/20 */
    line-height: 1.3;
    color: #fff !important;
    transition: opacity .2s ease;
}
.hirr-news .p-news__inner__more__btn:hover { opacity: 0.7; }

/* SP（≤1023px）：日付を上・タイトルを下（左寄せ） */
@media (max-width: 1023px) {
    .hirr-news { padding-left: 0; padding-right: 0; }
    .hirr-news .p-news__inner { padding: 0 44px; }       /* Figma SP left 44 */
    .hirr-news .c-news_item__inner {
        display: block;
        padding: clamp(14px, 3.4vw, 18px) 0;
    }
    .hirr-news .c-news_item__inner__date { display: block; margin-bottom: 5px; }
    .hirr-news .c-news_item__inner__title { display: block; }
}

/* 本文枠の最大幅を 1040px に拡張（bundle.css の .p-page_content__inner max-width:720px を上書き）。
   bundle→theme→hirr-common の読込順で後勝ち。対象: フリーページ(pages/show=FAQ/送料 等)・
   利用規約(customer_terms)・プライバシー(privacies)・ガイド(guides)・配信停止(step_mails) 全て。 */
.p-page_content__inner { max-width: 1040px!important; }

/* =========================================================
   HIRR「FAQ / サポート」フリーページ（Figma node 343:1147 準拠）
   - 設置: 管理画面フリーページ(/shop/faq)本文に hirr/faq_freepage.html のマークアップを貼付
   - 挙動(タブ切替＋アコーディオン)は hirr/js/hirr-common.js の FAQ ブロック
   - 開いた質問は金色 #bf8c15
   ========================================================= */
.hirr-faq{
  --faq-gold:#bf8c15;                 /* Figma: 開いた質問の色 */
  --faq-line:rgba(255,255,255,.20);   /* 区切り線 */
  --faq-ans:rgba(255,255,255,.80);    /* 回答テキスト */
  --faq-dim:rgba(255,255,255,.55);    /* 非アクティブタブ */
  color:#fff; background:#000;
  font-family:"Noto Serif JP","Yu Mincho",serif;
  /* コンテンツ幅 1040px（=Figma）。max-width 1080 + 左右padding20(border-box) で実コンテンツ1040。
     上余白はパンくずの margin-top 側で管理。固定ヘッダーは下層ページの spacer が確保済み */
  max-width:1080px; margin:0 auto;
  padding:0 20px clamp(80px,9vw,120px);
  box-sizing:border-box;
}
.hirr-faq *{box-sizing:border-box;}

/* パンくず（Figma node 343:1184 / 12px・白） */
.hirr-faq__breadcrumb{
  margin-top:clamp(44px,5.5vw,79px);
  font-size:clamp(11px,.9vw,12px); line-height:1.33; letter-spacing:0; color:#fff; word-break:break-word;
}
.hirr-faq__breadcrumb a{color:inherit; text-decoration:none;}
.hirr-faq__breadcrumb a:hover{text-decoration:underline;}
.hirr-faq__breadcrumb .sep{margin:0 .55em;}

/* ページタイトル「FAQ / サポート」（Figma node 343:1185 / 中央・Medium 24px） */
.hirr-faq__title{
  text-align:center; font-size:clamp(20px,1.67vw,24px); font-weight:500; letter-spacing:.04em;
  margin:clamp(40px,5vw,63px) 0 clamp(28px,3.5vw,44px); line-height:1.35;
}

/* タブ（デザインに無いがトンマナ合わせ：中央・金色アクセント） */
.hirr-faq__tabs{
  display:flex; justify-content:center; flex-wrap:nowrap; gap:clamp(8px,2.2vw,36px);
  border-bottom:1px solid var(--faq-line); margin:0 auto clamp(36px,4.5vw,60px);
}
.hirr-faq__tab{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer; font-family:inherit;
  color:var(--faq-dim); font-size:clamp(13px,1.18vw,16px); font-weight:500; letter-spacing:.04em; line-height:1.5;
  padding:0 4px clamp(12px,1.4vw,18px); margin-bottom:-1px;
  border-bottom:2px solid transparent; transition:color .25s ease,border-color .25s ease; white-space:nowrap;
}
.hirr-faq__tab:hover{color:#fff;}
.hirr-faq__tab.is-active{color:var(--faq-gold); border-bottom-color:var(--faq-gold);}
.hirr-faq__br{display:none;}   /* タブ内の<br>はSPのみ有効（PCは1行表示） */

/* パネル（中央 1040px 幅＝Figmaのコンテンツ left200/right200） */
.hirr-faq__panel{display:none; max-width:1040px; margin:0 auto;}
.hirr-faq__panel.is-active{display:block; animation:hirrFaqFade .4s ease;}
@keyframes hirrFaqFade{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}

/* カテゴリ見出し（Figma node 343:1186 / Shippori Mincho Bold 20px・左） */
.hirr-faq__heading{
  font-family:"Shippori Mincho B1","Shippori Mincho","Yu Mincho",serif;
  font-weight:700; font-size:clamp(17px,1.4vw,20px); letter-spacing:.045em; line-height:1.4;
  margin:0 0 clamp(20px,2.6vw,36px);
}

/* アコーディオン項目 */
.hirr-faq__item{border-bottom:1px solid var(--faq-line);}
.hirr-faq__q{
  position:relative; width:100%; appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  text-align:left; color:#fff; font-family:inherit; font-size:clamp(16px,1.7vw,20px); font-weight:400;
  letter-spacing:.02em; line-height:1.5;
  display:flex; align-items:flex-start; gap:.45em;
  padding:clamp(20px,2.2vw,28px) clamp(34px,3vw,44px) clamp(20px,2.2vw,28px) 0;
  transition:color .2s ease;
}
.hirr-faq__q:hover{opacity:.8;}
.hirr-faq__q .lbl{flex:none;}                 /* 「Q.」 */
.hirr-faq__q .txt{flex:1;}
.hirr-faq__q[aria-expanded="true"]{color:var(--faq-gold);}

/* ＋ / − アイコン（Q行に縦位置合わせ・白） */
.hirr-faq__icon{
  position:absolute; right:2px; top:calc(clamp(20px,2.2vw,28px) + .75em);
  width:clamp(16px,1.5vw,22px); height:clamp(16px,1.5vw,22px); flex:none; pointer-events:none;
  transform:translateY(-50%);
}
.hirr-faq__icon::before,.hirr-faq__icon::after{
  content:""; position:absolute; background:rgba(255,255,255,.85);
}
.hirr-faq__icon::before{left:0; top:50%; width:100%; height:1px; transform:translateY(-50%);}              /* 横棒 */
.hirr-faq__icon::after{left:50%; top:0; width:1px; height:100%; transform:translateX(-50%);                /* 縦棒 */
  transition:transform .3s ease,opacity .3s ease;}
.hirr-faq__q[aria-expanded="true"] .hirr-faq__icon::after{transform:translateX(-50%) scaleY(0); opacity:0;} /* 開＝− */

/* 回答（height アニメで滑らかに開閉。JSが実寸pxへ補間→開いたらautoでリサイズ追従）
   ※ JS動作時(.is-js)のみ折りたたむ。JS未読込/失敗時は開いたまま表示され、回答が消えない。 */
.hirr-faq.is-js .hirr-faq__a{height:0; overflow:hidden; transition:height .42s var(--hirr-ease);}
/* 回答テキスト：bundle.css の .p-page_content__inner p(14px/lh2) を確実に上書きするため
   .hirr-faq スコープ付きで詳細度を上げる（FAQ回答のみ。他フリーページの p には影響させない） */
.hirr-faq .hirr-faq__a__inner{
  display:flex; gap:.45em;
  color:var(--faq-ans); font-size:18px; font-weight:400; letter-spacing:.02em; line-height:1.6; margin-top:10px;
  padding:0 clamp(34px,3vw,44px) clamp(20px,2.4vw,30px) 0;   /* 下paddingは常時。閉時は height:0 で隠れる */
}
.hirr-faq__a__inner .lbl{flex:none; color:var(--faq-ans);}   /* 「A.」 */
.hirr-faq__a__inner a{color:#fff; text-decoration:underline; text-underline-offset:2px;}
.hirr-faq__a__inner a:hover{opacity:.7;}

/* 「予約販売について詳しく」リンク（Figma node 343:1217 / Light 18px・中央・下線） */
/* bundle の .p-page_content__inner p(margin-top:10px) に勝つよう .hirr-faq スコープで詳細度UP */
.hirr-faq .hirr-faq__more{text-align:center; margin-top:clamp(48px,5.07vw,73px);}  /* PC(1440)=73px */
.hirr-faq__more a{
  display:inline-block; color:#fff; text-decoration:none; font-weight:300;
  font-size:clamp(15px,1.25vw,18px); letter-spacing:.045em; line-height:1.5;  /* PC(1440)=18px */
  padding-bottom:10px; border-bottom:1px solid #fff; transition:opacity .2s ease;  /* テキスト下10px＋純白下線 */
}
.hirr-faq__more a:hover{opacity:.65;}

/* =========================================================
   送料と配送について（Figma node 343:1220）
   - 設置: FAQフリーページ本文 .hirr-faq 内・末尾（予約販売リンクの下）の <section class="hirr-ship">
   - 料金表(.hirr-ship__table--fee)は SP で横スクロール：
     .hirr-ship__scroll が overflow-x:auto、表に min-width を与えて潰さずスクロールさせる
   - bundle.css の .p-page_content__inner p/td/table に勝つよう .hirr-ship スコープで詳細度UP
   ========================================================= */
.hirr-ship{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:clamp(64px,8vw,104px); padding-top:clamp(56px,7vw,90px);
  color:#fff; font-family:"Noto Serif JP","Yu Mincho",serif;
  scroll-margin-top:150px; /* AP追記: 商品詳細「配送方法や送料についてはこちら」(#hirr-ship)へのアンカー着地時、固定ヘッダーに隠れないようオフセット（120→150で余裕を追加） */
}
/* ページ見出し（Noto Serif Medium 24px・中央） */
.hirr-ship .hirr-ship__title{
  text-align:center; font-weight:500; font-size:clamp(20px,1.67vw,24px);
  letter-spacing:.04em; line-height:1.35; margin:0 0 clamp(36px,4.5vw,56px);
}
/* 各ブロック（配送業者 / 配送地域区分 / 各送料表） */
.hirr-ship .hirr-ship__block{margin-top:clamp(40px,5vw,64px);}
.hirr-ship .hirr-ship__block:first-of-type{margin-top:0;}
/* 小見出し（Shippori Mincho Bold 20px・左） */
.hirr-ship .hirr-ship__heading{
  font-family:"Shippori Mincho B1","Shippori Mincho","Yu Mincho",serif;
  font-weight:700; font-size:clamp(17px,1.4vw,20px); letter-spacing:.045em; line-height:1.4;
  margin:0 0 clamp(16px,2.2vw,28px);
}
/* リード文（配送業者） */
.hirr-ship .hirr-ship__lead{
  font-size:clamp(14px,1.18vw,16px); line-height:1.85; letter-spacing:.02em;
  color:rgba(255,255,255,.85); margin:0;
}
.hirr-ship .hirr-ship__lead-note{font-size:clamp(12px,1.05vw,14px);}

/* 横スクロールラッパ（表が幅を超えたら横スクロール＝SPの料金表） */
.hirr-ship .hirr-ship__scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.4) transparent;
}
.hirr-ship .hirr-ship__scroll::-webkit-scrollbar{height:6px;}
.hirr-ship .hirr-ship__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35); border-radius:3px;}

/* 共通テーブル
   ※ bundle.css の global `table{table-layout:fixed}` を必ず打ち消す。
      fixed のままだと width:1% の1列目が「テーブル幅の1%」に潰れ、地域名が隣の枠へ溢れて重なる。 */
.hirr-ship .hirr-ship__table{
  width:100%; table-layout:auto; border-collapse:collapse; color:#fff;
  font-family:"Noto Serif JP","Yu Mincho",serif; font-weight:400;
}
.hirr-ship .hirr-ship__table th,
.hirr-ship .hirr-ship__table td{font-weight:400; vertical-align:middle;}

/* 配送地域区分（地方名 ── 繋ぎ線 ── 都道府県名。Figma/docs/FAQ.png 準拠）
   行下線は引かず、地方名と都道府県名の「間」に横線を入れる。
   地方名カラムは固定幅＝都道府県名は常に同じ位置から開始。線(::after)は隙間を伸縮して埋める
   （地方名が短いほど線が長い）。table表示をflexに上書きしてCSSだけで実現（HTML変更不要）。 */
.hirr-ship .hirr-ship__table--area,
.hirr-ship .hirr-ship__table--area tbody{ display:block; width:100%; }
.hirr-ship .hirr-ship__table--area tr{
  display:flex; align-items:flex-start;   /* SPで都道府県が折返しても地方名は上端揃え */
  padding:clamp(7px,0.9vw,10px) 0;
}
.hirr-ship .hirr-ship__table--area th{
  flex:0 0 clamp(160px,18vw,205px);   /* 地方名カラム（固定幅） */
  display:flex; align-items:center;    /* 地方名テキストと繋ぎ線を縦中央で揃える */
  white-space:nowrap; font-weight:500; color:#fff; text-align:left;
  font-size:clamp(13px,1.1vw,14px); line-height:1.7;
}
.hirr-ship .hirr-ship__table--area th::after{   /* 繋ぎ線：地方名の後ろから都道府県名の手前まで */
  content:""; flex:1 1 auto; height:1px; background:rgba(255,255,255,.5);
  margin:0 clamp(12px,1.4vw,18px);
}
.hirr-ship .hirr-ship__table--area td{
  flex:1 1 auto; color:rgba(255,255,255,.9);
  font-size:clamp(13px,1.1vw,14px); line-height:1.7;
}

/* 送料表（料金グリッド・SP横スクロール対象）
   罫線はFigma準拠＝「箱型(四方囲み)にしない」：
     - 横罫線：全行の下線（border-bottom）。上端の外枠線は付けない。
     - 縦罫線：列と列の「間」だけ（先頭以外のセルに border-left）。左右の外枠縦線は無し。 */
.hirr-ship .hirr-ship__table--fee{min-width:680px;}
.hirr-ship .hirr-ship__table--fee th,
.hirr-ship .hirr-ship__table--fee td{
  font-size:clamp(14px,1.18vw,16px); line-height:1.4; text-align:center;
  padding:clamp(9px,1vw,13px) clamp(8px,1vw,14px);
  border:0; border-bottom:0.5px solid rgba(255,255,255,.5);   /* 既定＝細い：データ行(tbody tr)の下線。色を薄めにしてヘッダー(1px白実線)より細く見せる */
}
/* 種別行・数量行（ヘッダー2行）の下線だけ太く 1px #fff */
.hirr-ship .hirr-ship__table--fee thead th,
.hirr-ship .hirr-ship__table--fee thead td{
  border-bottom:1px solid #fff;
}
.hirr-ship .hirr-ship__table--fee th:not(:first-child),
.hirr-ship .hirr-ship__table--fee td:not(:first-child){
  border-left:0.5px solid #fff;   /* 列の間の縦罫線（短い縦線）＝細い */
}
/* 先頭列（種別/数量・地域名）は左寄せ＋内容幅 */
.hirr-ship .hirr-ship__table--fee th:first-child,
.hirr-ship .hirr-ship__table--fee td:first-child{
  text-align:left; white-space:nowrap; width:1%; padding-right:clamp(16px,2vw,28px);
}
/* 行ヘッダ（地域名）は中字 */
.hirr-ship .hirr-ship__table--fee tbody th{font-weight:500;}

/* ※税抜き注記（右寄せ・15px） */
.hirr-ship .hirr-ship__tax{
  text-align:right; font-size:clamp(13px,1.05vw,15px); line-height:1.6;
  letter-spacing:.045em; color:rgba(255,255,255,.85); margin:clamp(10px,1.4vw,16px) 0 0;
}

@media (max-width:767px){
  /* SP: 横スクロールをやめ、各タブを<br>で2行に折り返して4つを1行に収める */
  .hirr-faq__tabs{
    flex-wrap:nowrap; overflow:visible; justify-content:center; gap:6px; align-items:stretch;
  }
  .hirr-faq__tab{
    flex:1 1 0; min-width:0; white-space:normal; text-align:center;
    font-size:12px; line-height:1.4; padding:0 2px clamp(10px,2.5vw,14px);
  }
  .hirr-faq__br{display:inline;}   /* SP: 指定位置(<br>)で改行 */

  /* 送料表：SPはセルを詰めて横スクロール（min-widthはそのまま＝潰さずスクロール）／注記は左寄せ */
  .hirr-ship .hirr-ship__table--fee th,
  .hirr-ship .hirr-ship__table--fee td{padding:9px 12px; font-size:14px;}
  .hirr-ship .hirr-ship__table--area th{padding-right:16px;}
  .hirr-ship .hirr-ship__tax{text-align:left;}
}

/* ============================================================
   特別栽培農産物 表示ガイドライン（フリーページ本文）
   HTMLは hirr/tokusai_freepage.html を管理画面本文に貼り付け。
   ダーク地・白文字・Noto Serif JP、アクセント=ゴールド #bf8c15。
   ============================================================ */
.hirr-tokusai {
    color: #fff;
    font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
    line-height: 1.85;
    letter-spacing: 0.02em;
}
.hirr-tokusai__title {
    margin: 0 0 56px;
    font-size: clamp(21px, 2.6vw, 30px);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.06em;
}
.hirr-tokusai__sp-br { display: none; }

.hirr-tokusai__section,
.hirr-tokusai__variety {
    margin-bottom: 80px;
}
.hirr-tokusai__heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 600;
    line-height: 1.4;
}
.hirr-tokusai__num {
    color: #bf8c15;
    font-size: 1.05em;
}
.hirr-tokusai__text {
    margin: 0 0 14px;
    font-size: 15px;
}
.hirr-tokusai__note {
    margin: 0;
    font-size: 14px;
    color: #bf8c15;
    line-height: 1.7;
}

/* 品種ブロック：年度(小)→品種名(大・主役)→栽培責任者(中) を中央寄せ。
   重要度＝品種名 > 年度・栽培責任者 > 使用状況 になるようサイズで階層化。 */
.hirr-tokusai__variety-head {
    margin: 0 0 32px;
    text-align: center;
}
.hirr-tokusai__year {
    margin: 0 0 8px;
    font-size: 16px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.85);
}
.hirr-tokusai__variety-name {
    margin: 0;
    font-size: 20px;          /* 主役（年度・栽培責任者・使用状況の16pxより一段大きく） */
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #fff;
}
.hirr-tokusai__grower {
    margin: 12px 0 0;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.9);
}
/* 使用状況ラベル：品種名より目立たせない控えめな中央ラベル（旧 gold バー subheading を不使用） */
.hirr-tokusai__table-label {
    margin: 0 0 14px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
}
.hirr-tokusai__subheading {
    margin: 0 0 14px;
    padding-left: 12px;
    border-left: 4px solid #bf8c15;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

/* ラベル＋値（栽培責任者など）。既定は横並び */
.hirr-tokusai__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin: 0 0 26px;
    font-size: 14.5px;
}
.hirr-tokusai__meta dt {
    color: rgba(255, 255, 255, 0.65);
}
.hirr-tokusai__meta dd {
    margin: 0;
}
/* 連絡先ブロックは「ラベル→値」を縦積み */
.hirr-tokusai__meta--stack {
    display: block;
    margin: 0;
}
.hirr-tokusai__meta--stack dt {
    margin-top: 12px;
    font-size: 13px;
}
.hirr-tokusai__meta--stack dt:first-child {
    margin-top: 0;
}

/* 農薬の使用状況テーブル（SPは横スクロール） */
.hirr-tokusai__scroll {
    margin: 0 0 26px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hirr-tokusai__table {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}
.hirr-tokusai__table th,
.hirr-tokusai__table td {
    padding: 13px 16px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.25);
}
/* 縦線（列の区切り）：内側のみ。外側の左右には付けない */
.hirr-tokusai__table th:not(:first-child),
.hirr-tokusai__table td:not(:first-child) {
    border-left: 0.5px solid rgba(255, 255, 255, 0.25);
}
.hirr-tokusai__table thead th {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid #fff;
}
/* 用途(2列目)・使用回数(.is-num) の短い2列は中央寄せで統一（使用資材名のみ左寄せ） */
.hirr-tokusai__table th:nth-child(2),
.hirr-tokusai__table td:nth-child(2),
.hirr-tokusai__table .is-num {
    text-align: center;
}

/* 商品を見る（白枠アウトライン） */
.hirr-tokusai__btn {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;          /* 中央寄せ */
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 13px 30px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 0.1em;
    transition: background-color 0.25s ease, opacity 0.25s ease;
}
.hirr-tokusai__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
/* bundle.css の .p-page_content__inner a{text-decoration:underline}(0,1,1) を、ラッパー込み(0,2,0)で打ち消す＝ボタンは下線なし */
.hirr-tokusai .hirr-tokusai__btn {
    text-decoration: none;
}

/* リスト */
.hirr-tokusai__list {
    margin: 0;
    padding-left: 1.3em;
    font-size: 15px;
}
.hirr-tokusai__list li {
    margin-bottom: 8px;
}

/* 栽培責任者 / 確認責任者（2カラム） */
.hirr-tokusai__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 8px;
}
.hirr-tokusai__contact {
    flex: 1 1 280px;
}
.hirr-tokusai__org {
    margin: 0 0 6px;
    font-size: 15px;
}

@media (max-width: 719px) {
    .hirr-tokusai__sp-br { display: inline; }
    .hirr-tokusai__title { margin-bottom: 44px; }
    .hirr-tokusai__section,
    .hirr-tokusai__variety { margin-bottom: 56px; }
    .hirr-tokusai__table th,
    .hirr-tokusai__table td { padding: 11px 13px; }
    .hirr-tokusai__btn { width: 100%; }
    .hirr-tokusai__contacts { gap: 28px; }
}

/* ===== TOP 新米予約ポップアップ（Figma 425:1521）：固定オーバーレイ＋白枠ボックス。
   HTML/JSは shop/base/index.html.liquid。モバイルSafari対策：height:100%(≠100vh)/top-level配置/overlayはcursor:pointer/クラス開閉。 ===== */
.hirr-popup {
    display: none;                 /* JSが .is-open を付けるまで非表示（フラッシュ防止・JS無効時は出さない） */
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;                  /* iOSのvhズレ回避のため 100vh は使わない */
    z-index: 1000;                 /* ヘッダー(≈100)/既存モーダル(300)より上 */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.hirr-popup.is-open { display: flex; }
.hirr-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;               /* iOSで確実にタップ判定させる */
}
.hirr-popup__box {
    position: relative;
    width: 455px;
    max-width: 90vw;
    box-sizing: border-box;
    border: 1px solid #fff;
    padding: 52px 32px 54px;
    text-align: center;
    color: #fff;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
}
.hirr-popup__close {
    position: absolute;
    top: -40px;
    right: 0;
    display: inline-flex;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}
.hirr-popup__label {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.hirr-popup__title {
    margin: 14px 0 0;
    font-family: "Shippori Mincho B1", "Yu Mincho", serif;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.hirr-popup__title + .hirr-popup__title { margin-top: 40px; }  /* 新米 → 予約受付中 の間隔 */
.hirr-popup__until {
    margin: 20px 0 0;
    font-family: "Shippori Mincho B1", "Yu Mincho", serif;
    font-size: 24px;
    letter-spacing: -0.02em;
}
.hirr-popup__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
    min-width: 264px;
    padding: 12px 28px;
    border: 1px solid #fff;
    border-radius: 52px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.hirr-popup__btn:hover { background: rgba(255, 255, 255, .15); }

/* AP追記(2026-07) ページネーションの上下余白：SPは半分に（既定 上80/下100px → 上40/下50px）。
   :has() で「.c-pagination を内包する .l-container__row」だけを対象（他のl-container__rowには影響なし）。
   ※:has() 非対応の古い端末では既定値のまま（実害small）。 */
@media (max-width: 719px) {
    .l-container__row:has(> .c-pagination) {
        margin-top: 40px !important;
        margin-bottom: 50px !important;
    }
}
@media (max-width: 719px) {
    .hirr-popup__box { padding: 40px 22px 44px; }
    .hirr-popup__label { font-size: 16px; }
    .hirr-popup__title { font-size: 30px; }
    .hirr-popup__title + .hirr-popup__title { margin-top: 28px; }
    .hirr-popup__until { font-size: 18px; }
    .hirr-popup__btn { margin-top: 40px; min-width: 0; width: 100%; font-size: 16px; padding: 12px 20px; }
    .hirr-popup__close { top: -36px; }
}