@charset "UTF-8";

/* =========================================================
   土台：リセット & ベース
   ※ 既存のコンポーネントCSSは rem=10px 前提（1.4rem=14px 等）。
     html を 62.5% にしないと全サイズが約1.6倍に膨らむため必須。
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1.5rem;
    color: var(--color-text);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, figure, dl, dd, dt, ul, ol {
    margin: 0;
    padding: 0;
}
ul, ol {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   土台：デザイントークン
   ========================================================= */
:root {
    --color-red: #e60013;
    --color-red-dark: #b3251e;
    --color-text: #222222;
    --color-gray: #666666;
    --color-line: #e2e2e2;
    --color-bg-light: #f9f8f6;
    --color-bg-gray: #ededed;
    --font-en: "Poppins", "Noto Sans JP", sans-serif;
}

/* =========================================================
   土台：レイアウト（コンテンツ幅・セクション余白）
   ========================================================= */
.container-ebulk-orders {
    width: 100%;
    max-width: 120rem;
    margin-inline: auto;
    padding-inline: 2.4rem;
}
.section {
    padding: 10.0rem 0;
}

/* =========================================================
   土台：共通見出し
   ========================================================= */
.section-title {
    text-align: center;
    color: var(--color-red);
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
}
.section-lead {
    margin-top: 3rem;
    text-align: center;
    font-size: 1.7rem;
    color: var(--color-text);
    line-height: 1.9;
}

/* =========================================================
   土台：表示切替ユーティリティ（既定＝PC）
   ========================================================= */
.u-sp {
    display: none;
}
.u-pc {
    display: inline;
}

/* =========================================================
   スクロール連動フェードイン（下からふわっと・about ページ準拠）
   ※ .js-fade は index.js が主要ブロックへ付与、is-inview で表示
   ========================================================= */
.js-fade {
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
/* JSが .js-fade を付与する前（描画直後）から対象を隠し、ファーストビューのチカつきを防ぐ。
   is-inview が付いたら解除（＝表示アニメへ）。 */
.js-anim .intro__title:not(.is-inview),
.js-anim .intro__text:not(.is-inview),
.js-anim .intro__images:not(.is-inview),
.js-anim .reason .section-title:not(.is-inview),
.js-anim .reason .section-lead:not(.is-inview),
.js-anim .reason__box:not(.is-inview),
.js-anim .reason__merit:not(.is-inview),
.js-anim .usage .section-title:not(.is-inview),
.js-anim .usage .section-lead:not(.is-inview),
.js-anim .products .section-title:not(.is-inview),
.js-anim .products__carousel:not(.is-inview),
.js-anim .flow .section-title:not(.is-inview),
.js-anim .flow__list:not(.is-inview),
.js-anim .flow .cta-band:not(.is-inview),
.js-anim .faq .section-title:not(.is-inview),
.js-anim .block-goods-comment6 > dd:not(.is-inview),
.js-anim .contact .section-title:not(.is-inview),
.js-anim .contact__lead:not(.is-inview),
.js-anim .contact__privacy:not(.is-inview),
.js-anim .contact-form:not(.is-inview),
.js-anim .reason__list > .reason__card:not(.is-inview),
.js-anim .merit__list > .merit__card:not(.is-inview),
.js-anim .usage__list > .usage__card:not(.is-inview),
.js-fade:not(.is-inview) {
    opacity: 0;
    transform: translateY(6.0rem);
}
.js-fade.is-inview {
    opacity: 1;
    transform: none;
}

/* CTAメッセージ：下（ボタン側）から縮小→等倍にふわっと拡大 */
.js-pop {
    transform-origin: bottom center;
    transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
    will-change: opacity, transform;
}
.js-anim .cta-band__text:not(.is-inview),
.js-pop:not(.is-inview) {
    opacity: 0;
    transform: translateY(2.6rem) scale(.7);
}
.js-pop.is-inview {
    opacity: 1;
    transform: scale(1);
}

/* ギャラリー：アイテムを一個ずつ順番にフェードイン（hoverのscaleと干渉しないようopacityのみ） */
.js-anim .gallery__marquee:not(.is-inview) .gallery__item {
    opacity: 0;
}

/* =========================================================
   ヒーロー ロード演出
   ========================================================= */
.hero__bg-img {
    transition: opacity 1s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
/* タイトル：下からマスクでニョキっと出るリビール（span=マスク, i=下からスライド） */
.hero__title-char {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .1em;
    margin-bottom: -.1em;
}
.hero__title-char i {
    display: inline-block;
    font-style: normal;
    transition: transform .65s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}
.hero__tag,
.hero__lead,
.hero__badges {
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}
.hero__cta {
    /* CTA は translateY(50%) で位置決めしているため opacity のみでフェード */
    transition: opacity .8s ease;
}
/* 初期状態（描画時から隠す：チカつき防止） */
.js-anim .hero:not(.is-loaded) .hero__bg-img {
    opacity: 0;
    transform: scale(1.12);
}
/* 白カード背景：写真の後にフェードイン */
.js-anim .hero:not(.is-loaded) .hero__card::before {
    opacity: 0;
}
/* タイトルは JS が span 化するまで見えないように（アニメ前のチラ見え防止） */
.js-anim .hero:not(.is-loaded) .hero__title {
    visibility: hidden;
}
.js-anim .hero:not(.is-loaded) .hero__title-char i {
    transform: translateY(110%);
}
.js-anim .hero:not(.is-loaded) .hero__tag,
.js-anim .hero:not(.is-loaded) .hero__lead,
.js-anim .hero:not(.is-loaded) .hero__badges {
    opacity: 0;
    transform: translateY(2.8rem);
}
.js-anim .hero:not(.is-loaded) .hero__cta {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .js-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.container {
    padding: 0;
    width: 100%;
}

/* プレビュー用ヘッダー・フッターダミー */
.site-header-placeholder {
    padding: 1.4rem;
    text-align: center;
    font-size: 1.3rem;
    color: #999;
    background: #fafafa;
    border-bottom: 1px solid var(--color-line);
}
.site-footer-placeholder {
    padding: 6.0rem 2.0rem;
    text-align: center;
    font-size: 1.3rem;
    color: #999;
    background: #f0eeec;
}
.site-footer-placeholder__head {
    margin-bottom: 1.0rem;
    color: var(--color-red);
    font-size: 2.0rem;
    font-weight: 700;
}

/* =========================================================
   共通ボタン（赤・角丸 CTA）
   ========================================================= */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.0rem;
    min-width: 30rem;
    padding: 1.6rem 4.0rem;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    background: var(--color-red);
    border-radius: 5rem;
    box-shadow: 0 0.4rem 1.2rem rgba(208, 44, 36, .25);
    transition: background .3s, transform .2s;
}
.btn-cta::after {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translateY(-.2rem);
}
.btn-cta:hover {
    /* サイト共通CSSの a:hover{opacity:.7} で透けるのを打ち消す */
    opacity: 1;
    background: var(--color-red-dark);
    transform: translateY(-.2rem);
}
.btn-cta--lg {
    min-width: 60rem;
    padding: 2.8rem 4.0rem;
    font-size: 1.8rem;
}
/* CTA帯（ご注文の流れ下）のボタンは、ヘッダーナビ同様の「透過ロールオーバー」に。
   ＝ホバーで背景を濃くせず opacity:.7 でふわっと透ける（サイト共通 a:hover と同挙動）。 */
.cta-band .btn-cta {
    transition: opacity .3s, background .3s, transform .2s;
}
.cta-band .btn-cta:hover {
    opacity: .7;
    background: var(--color-red);
    transform: none;
}

/* =========================================================
   ヒーロー / メインビジュアル
   ========================================================= */
.hero {
    position: relative;
    overflow: hidden;
}
.hero__bg {
    position: relative;
    width: 100%;
    aspect-ratio: 1510 / 540;
    background: #d8d8da;
}
/* picture はボックスを作らず img を .hero__bg の直子として扱う（PC cover / SP 全体表示を維持） */
.hero__bg picture {
    display: contents;
}
.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__card {
    position: absolute;
    left: 50%;
    top: 50%;
    /* straddle しているCTAの分、全体を上へ寄せて写真の高さに対し視覚的に中央化 */
    transform: translate(-50%, calc(-50% - 3.3rem));
    width: min(56rem, 88%);
    padding: 3.6rem 3.6rem 7.0rem;
    text-align: center;
}
/* 白カード背景は疑似要素に分離（写真の後にフェードインさせるため） */
.hero__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(2px);
    border-radius: .8rem;
    transition: opacity .8s ease .4s;
}
.hero__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    font-size: 2.0rem;
    font-weight: 500;
}
.hero__tag-label {
    padding: .4rem 1.4rem;
    color: #fff;
    font-size: 1.7rem;
    background: var(--color-red);
    border-radius: .3rem;
}
.hero__title {
    margin: 1.4rem 0 1.6rem;
    color: var(--color-text);
    font-size: 6.0rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
}
.hero__lead {
    font-size: 1.5rem;
    line-height: 1.8;
}
.hero__badges {
    display: flex;
    justify-content: center;
    gap: 8.2rem;
    margin: 3.6rem 0 2.4rem;
}
.hero__badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.0rem;
    font-size: 1.7rem;
    font-weight: bold;
}
.hero__badge + .hero__badge::before {
    content: '';
    position: absolute;
    left: -4.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 3.4rem;
    background: #5c5c5c;
}
.hero__badge-icon {
    width: auto;
    height: 3.0rem;
}
.hero__cta {
    position: absolute;
    left: 3.6rem;
    right: 3.6rem;
    bottom: 0;
    transform: translateY(50%);
    display: flex;
    justify-content: center;
    padding: 1.6rem 2.4rem 2.0rem;
    /* 白い枠（中に赤文字＋赤ボタン） */
    background: #fff;
    border: 1px solid var(--color-red);
    border-radius: 1.2rem;
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .12);
}
.hero__cta-inner {
    width: max-content;
    max-width: 100%;
}
.hero__cta-text {
    margin-bottom: 1.2rem;
    color: var(--color-red);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .2em;
}
.hero__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    width: 100%;
    padding: 1.4rem 2.4rem;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: .2em;
    background: var(--color-red);
    border: 2px solid var(--color-red);
    border-radius: 5rem;
    box-shadow: 0 .4rem 1.2rem rgba(208, 44, 36, .25);
    transition: opacity .3s, background .3s, color .3s, border-color .3s;
}
.hero__cta-btn::after {
    content: '';
    width: 1.4rem;
    height: .9rem;
    background: #fff;
    transition: background .3s;
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
.hero__cta-btn:hover {
    /* ヘッダーナビ同様の透過ロールオーバー（背景は濃くせず opacity:.7 で透ける） */
    opacity: .7;
    background: var(--color-red);
    border-color: var(--color-red);
    color: #fff;
}
.hero__cta-btn:hover::after {
    background: #fff;
}

/* =========================================================
   イントロ
   ========================================================= */
.intro {
    padding: 8rem 0;
    text-align: center;
}
.intro__title {
    color: var(--color-red);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.5;
}
.intro__text {
    margin-top: 4.0rem;
    font-size: 2rem;
    color: #333333;
    line-height: 2.54;
}
.intro__images {
    display: flex;
    gap: 2.4rem;
    margin-top: 10.0rem;
}
.intro__img {
    flex: 1;
    overflow: hidden;
    border-radius: .8rem;
}
.intro__img img {
    width: 100%;
    aspect-ratio: 560 / 360;
    object-fit: cover;
}

/* =========================================================
   追従ナビ（ヘッダー追従タイプ）
   ========================================================= */
.scroll-nav {
    display: flex;
    justify-content: center;
    /* 追従前は goods ページ同様に白背景 */
    background: #fff;
    transition: padding .3s;
}
.scroll-nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(237, 237, 237, .96);
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .08);
    /* 共通ヘッダーの出現/退避(.5s)に合わせて top を連動アニメ */
    transition: padding .3s, top .5s ease;
}
.scroll-nav__list {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 97.6rem;
}
.scroll-nav__item {
    position: relative;
    flex: 1;
}
/* 縦の赤い区切り線（両端＋各項目間）＝ goods ページ同様 */
.scroll-nav__item::before,
.scroll-nav__item:last-child::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-red);
}
.scroll-nav__item::before {
    left: 0;
}
.scroll-nav__item:last-child::after {
    right: 0;
}
.scroll-nav__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 7.2rem;
    color: var(--color-red);
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    transition: opacity .2s;
}
/* 追従時は現状のまま：横並び・矢印は右・低め・区切りは中央短め */
.scroll-nav.is-fixed .scroll-nav__item a {
    flex-direction: row;
    gap: 1.2rem;
    height: 4.6rem;
}
.scroll-nav.is-fixed .scroll-nav__item::before,
.scroll-nav.is-fixed .scroll-nav__item:last-child::after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    height: 2.8rem;
}
.scroll-nav.is-fixed .scroll-nav__item:first-child::before {
    display: none;
}
.scroll-nav.is-fixed .scroll-nav__item:last-child::after {
    display: none;
}
.scroll-nav__item a::after {
    content: '';
    width: 1.2rem;
    height: .8rem;
    background: var(--color-red);
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
.scroll-nav__item a:hover {
    opacity: .55;
}
/* 追従時に下のコンテンツがずれないようスペーサーをJSで挿入 */
.scroll-nav-spacer {
    display: block;
}

/* アンカー到達位置を追従ナビ分ずらす */
[id] {
    scroll-margin-top: 6.0rem;
}

/* =========================================================
   ReDが選ばれる理由（アーチ型カード）
   ========================================================= */
.reason {
    margin: 5.0rem 5.0rem 0;
    background: var(--color-bg-light);
    border-radius: .8rem;
}
.reason__box {
    position: relative;
    margin-top: 5rem;
    padding: 7rem 5rem;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: .8rem;
    box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, .06);
}
.reason__label {
    width: fit-content;
    margin: 0 auto 4.0rem;
    padding: .2rem 2rem;
    color: var(--color-red);
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: .1em;
    border-top: 3px solid var(--color-red);
    border-bottom: 3px solid var(--color-red);
}
.reason__list {
    display: flex;
    justify-content: center;
    gap: 4.0rem;
}
.reason__card {
    display: flex;
    flex-direction: column;
    flex: 0 1 28rem;
    padding: 4.0rem 2.4rem 2.4rem;
    text-align: center;
    border-radius: 50rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-line);
}
.reason__card-num {
    margin-top: 2.0rem;
    font-family: var(--font-en);
    font-size: 1.5rem;
    color: var(--color-text);
    letter-spacing: .04em;
}
.reason__card-num::after {
    content: '';
    display: block;
    width: 2.4rem;
    height: 2px;
    margin: 2rem auto;
    background: var(--color-red);
}
.reason__card-title {
    min-height: 5.6rem;
    color: var(--color-text);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.5;
}
.reason__card-text {
    margin-top: 1.2rem;
    font-size: 1.5rem;
    color: var(--color-gray);
    text-align: left;
    line-height: 1.9;
}
.reason__card-img {
    width: 100%;
    margin: 2.0rem auto 0;
    margin-top: auto;
    padding-top: 3.0rem;
}
.reason__card-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

/* PICK UP */
.reason__pickup {
    display: flex;
    align-items: center;
    gap: 4.0rem;
    /* 上の3カード列(28rem×3 + gap4rem×2)と同じ幅・中央寄せで区切り線を引く */
    width: calc(28rem * 3 + 4rem * 2);
    max-width: 100%;
    margin: 5.0rem auto 0;
    padding: 5.0rem 0 0;
    border-top: 1px solid var(--color-line);
}
.reason__pickup-body {
    flex: 1;
    padding-left: 4.0rem;
}
.reason__pickup-label {
    color: var(--color-red);
    font-family: var(--font-en);
    font-size: 1.4rem;
    letter-spacing: .1em;
    font-weight: 700;
}
.reason__pickup-title {
    margin: 1.0rem 0 1.4rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
}
.reason__pickup-text {
    font-size: 1.5rem;
    color: var(--color-gray);
    line-height: 1.9;
}
.reason__pickup-text strong {
    font-weight: 700;
}
.reason__pickup-img {
    width: 50%;
    flex-shrink: 0;
}
.reason__pickup-img img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: .4rem;
}

/* =========================================================
   導入メリット（ReDが選ばれる理由 内に格納）
   ========================================================= */
.reason__merit {
    margin-top: 6.0rem;
    padding: 7rem 5rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: .8rem;
    box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, .06);
}
.merit__list {
    display: flex;
    gap: 3.4rem;
    margin-top: 4.0rem;
}
.merit__card {
    flex: 1;
    padding: 0 3.4rem 4.0rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 1rem;
    box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, .06);
}
.merit__icon {
    width: 100%;
    margin: 0 auto 0;
}
.merit__icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.merit__card-title {
    margin-top: 0;
    padding-top: 2.4rem;
    margin-bottom: 1.7rem;
    /* アイコンと見出しの間に、詳細文と同じ全幅の赤ライン */
    border-top: 3px solid var(--color-red);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
}
.merit__card-text {
    font-size: 1.5rem;
    color: var(--color-gray);
    text-align: left;
    line-height: 1.9;
}

/* =========================================================
   CTAバンド
   ========================================================= */
.cta-band {
    margin-top: 7rem;
    text-align: center;
}
.cta-band__text {
    position: relative;
    width: fit-content;
    margin: 0 auto 2.0rem;
    color: var(--color-red);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .1em;
}
/* 左右の斜め赤ライン（最初のデザイン準拠：左＝＼／右＝／） */
.cta-band__text::before,
.cta-band__text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 6.7rem;
    background: var(--color-red);
}
.cta-band__text::before {
    left: -3.6rem;
    transform: translateY(-50%) rotate(-20deg);
}
.cta-band__text::after {
    right: -3.6rem;
    transform: translateY(-50%) rotate(20deg);
}

/* =========================================================
   様々な用途
   ========================================================= */
.usage__list {
    position: relative;
    z-index: 0;
    display: flex;
    gap: 3.4rem;
    max-width: 103rem;
    margin: 4.0rem auto 0;
}
/* カードの縦中央あたりから下へ、上と同じベージュ背景を少し伸ばす（ベースデザイン準拠） */
.usage__list::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    bottom: -10rem;
    /* 上のセクション(reason)のベージュ帯と同じ幅＝ビューポート左右5rem inset */
    left: 50%;
    width: calc(100vw - 10rem);
    transform: translateX(-50%);
    background: var(--color-bg-light);
    border-radius: 0 0 .8rem .8rem;
}
.usage__card {
    flex: 1;
    padding: 0.8em;
    background: #fff;
    border-radius: .8rem;
    overflow: hidden;
    box-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .05);
}
.usage__img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.usage__card-title {
    position: relative;
    margin: 2.0rem 2rem 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 1.9rem;
    font-weight: 700;
    text-align: center;
}
.usage__card-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 2.8rem;
    height: 3px;
    background: var(--color-red);
}
.usage__card-text {
    padding: 0 1.0rem 2.4rem;
    font-size: 1.5rem;
    color: var(--color-gray);
    text-align: center;
}

/* =========================================================
   おすすめ商品（動的・独自タグ）
   ========================================================= */
.products {
    padding-bottom: 6.0rem;
}
.products__carousel {
    margin-top: 4.0rem;
    /* container-ebulk-orders の左右padding(2.4rem)を打ち消し、本家 shop トップと同じ
       コンテナ幅(=120rem)にしてスライド幅・間隔を一致させる */
    margin-inline: -2.4rem;
}
/* swiper-bundle.css は遅延読み込み(media=print→all)のため、初期化時に横並びCSSが
   未適用だとスライドが縦積みで全件表示される。コアレイアウトを遅延しない側で明示する。 */
.products__carousel .block-thumbnail-t.swiper {
    position: relative;
    overflow: hidden;
}
.products__carousel .block-thumbnail-t--items.swiper-wrapper {
    display: flex;
    box-sizing: content-box;
    flex-wrap: nowrap;
    /* 共通CSSの gap:4rem を打ち消す（swiper の spaceBetween:28 と二重になり4件目がはみ出るため） */
    gap: 0;
}
.products__carousel .block-thumbnail-t--goods.swiper-slide {
    flex-shrink: 0;
    height: auto;
}
/* 本家 shop トップのカードと算出スタイルを一致させる
   （LP の body font-size:1.5rem / line-height:1.8 の継承や page-top 文脈差を打ち消す） */
.products__carousel .block-thumbnail-t--goods {
    font-size: 1.4rem;
    line-height: 1.5;
}
.products__carousel .block-thumbnail-t--price {
    font-size: 2.6rem;
}
.block-thumbnail-t--goods .block-thumbnail-t--price-infos {
    font-size: 1.1rem;
    font-weight: 700;
}
/* 万一 swiper 未初期化のときも縦積み/横伸びしないよう 4-up グリッドにフォールバック */
.products__carousel .block-thumbnail-t:not(.swiper-initialized) {
    overflow: hidden;
}
.products__carousel .block-thumbnail-t:not(.swiper-initialized) .block-thumbnail-t--items {
    display: flex;
    flex-wrap: wrap;
}
.products__carousel .block-thumbnail-t:not(.swiper-initialized) .block-thumbnail-t--goods {
    width: 25%;
    min-width: 25%;
    box-sizing: border-box;
}
/* スクロールインジケーターはSPの横スクロール時のみ表示（PCのswiperでは不要） */
.products__scrollbar {
    display: none;
}

.products__import {
    margin-top: 4.0rem;
    padding: 6.0rem 2.0rem;
    text-align: center;
    color: #999;
    font-size: 1.4rem;
    background: var(--color-bg-light);
    border: 1px dashed var(--color-line);
    border-radius: .8rem;
}

/* =========================================================
   ご注文の流れ
   ========================================================= */
.flow {
    position: relative;
    /* CTAボタン下の余白を 8rem に（ベージュもここまで） */
    padding-bottom: 8.0rem;
}
/* 下部に敷くベージュ背景（パネル中ほど〜CTAボタン下 8rem まで、上のセクション同様の幅） */
.flow::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    top: 34rem;
    bottom: 0;
    width: calc(100vw - 10rem);
    background: var(--color-bg-light);
    border-radius: .8rem;
}
.flow .container-ebulk-orders,
.flow .cta-band {
    position: relative;
    z-index: 1;
}
/* 赤枠の1枚パネル */
.flow__list {
    display: flex;
    margin-top: 4.0rem;
    background: #fff;
    border: 1px solid var(--color-red);
    border-radius: 1.2rem;
}
.flow__step {
    position: relative;
    flex: 1;
    padding: 4.0rem 3.0rem 4.4rem;
    text-align: center;
}
/* 区切りの縦赤ライン */
.flow__step + .flow__step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-red);
}
/* 区切り中央の > シェブロン（白背景でラインを抜き、赤の上・右ボーダーで矢印） */
.flow__step + .flow__step::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2.2rem;
    height: 2.2rem;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #fff;
    border-top: 1px solid var(--color-red);
    border-right: 1px solid var(--color-red);
}
/* STEPラベル（赤・下線） */
.flow__step-num {
    display: inline-block;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-red);
    color: var(--color-red);
    font-family: var(--font-en);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: .1em;
}
.flow__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.4rem;
    margin: 4.4rem auto 3.8rem;
}
.flow__icon img {
    width: auto;
    height: 100%;
    object-fit: contain;
}
.flow__step-text {
    font-size: 1.6rem;
    color: var(--color-gray);
    text-align: center;
    line-height: 1.9;
}

/* =========================================================
   角丸タイル 無限自動スライド（左流れ）
   ========================================================= */
.gallery {
    padding: 10.0rem 0;
    overflow: hidden;
}
.gallery__marquee {
    width: 100%;
    overflow: hidden;
}
.gallery__track {
    display: flex;
    width: max-content;
    animation: gallery-scroll 40s linear infinite;
}
.gallery__item {
    flex-shrink: 0;
    /* 間隔は margin にして各アイテムに内包（可変幅でも -50% でシームレスにループ） */
    margin-right: 2.0rem;
    border-radius: 1.6rem;
    overflow: hidden;
    /* フェードイン用に opacity のみトランジション（ホバー演出なし） */
    transition: opacity .6s ease;
}
.gallery__item img {
    display: block;
    width: auto;
    height: 46rem;
    /* 画像本来の比率で表示（トリミングなし）・少し大きく */
    pointer-events: none;
}
@keyframes gallery-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* 複製1セット分（トラックの半分）移動＝アイテム幅に依存せずシームレス */
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .gallery__track {
        animation: none;
    }
}

/* =========================================================
   よくあるご質問（mtgec.jp 準拠：faq_section / faq_question / faq_answer）
   ========================================================= */
/* ベージュ地の角丸セクション（reason 等と同じフォーマット） */
.faq {
    margin: 0 5.0rem;
    background: var(--color-bg-light);
    border-radius: .8rem;
}
.block-goods-comment6 {
    max-width: 115.2rem;
    margin: 0 auto;
}
.block-goods-comment6 > dt {
    margin-bottom: 4.0rem;
}
/* mtgec共通CSSの .block-goods-comment6 h2{font-size:1.8rem} を打ち消し、
   ご注文の流れ等と同じ .section-title スタイルに戻す */
.faq .block-goods-comment6 .section-title {
    margin: 0;
    padding: 0;
    font-size: 3.6rem;
}
/* 白パネル（他セクションと同じ角丸カード） */
.block-goods-comment6 > dd {
    padding: 5.0rem;
    background: #fff;
    border-radius: .8rem;
    box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, .04);
}
.faq__group {
    margin: 4.0rem 0 1.6rem;
    color: var(--color-text);
    font-size: 2.0rem;
    font-weight: 700;
}
.faq__group:first-of-type {
    margin-top: 0;
}
.block-goods-comment6 .faq_section {
    margin-top: 1.2rem;
    color: var(--color-gray);
}
.block-goods-comment6 .faq_section .faq_question {
    position: relative;
    margin: 0;
    padding: 2.0rem 5.0rem 2.0rem 2.4rem;
    background: #f2f2f2;
    color: var(--color-text);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    border-radius: .4rem;
    transition: background .2s;
}
.block-goods-comment6 .faq_section .faq_question:hover {
    background: #ececec;
}
.block-goods-comment6 .faq_section > .faq_question::before,
.block-goods-comment6 .faq_section > .faq_question::after {
    display: block;
    content: '';
    width: 1.6rem;
    height: 2px;
    background: var(--color-gray);
    position: absolute;
    right: 2.4rem;
    top: calc(50% - 1px);
    transition: transform .3s;
}
.block-goods-comment6 .faq_section > .faq_question::after {
    transform: rotate(90deg);
}
.block-goods-comment6 .faq_section > .faq_question.active::after {
    transform: rotate(0deg);
}
.block-goods-comment6 .faq_section .faq_answer {
    overflow: hidden;
    max-height: 0;
    padding: 0 2.4rem;
    font-size: 1.5rem;
    color: var(--color-gray);
    line-height: 1.9;
    transition: max-height .4s ease, padding .4s ease;
}
.block-goods-comment6 .faq_section .faq_answer.is-open {
    max-height: 60rem;
    padding: 2.0rem 2.4rem 1.0rem;
}
.block-goods-comment6 .faq_answer ul {
    margin-top: 1.0rem;
}
.block-goods-comment6 .faq_answer p + p {
    margin-top: 1.0rem;
}

/* =========================================================
   ご注文・お問い合わせフォーム（formrun）
   ========================================================= */
.contact {
    margin: 5.0rem 5.0rem 0;
    background: var(--color-bg-light);
    border-radius: .8rem;
    padding-bottom: 8.0rem;
}
.contact__lead {
    margin-top: 3rem;
    text-align: center;
    font-size: 1.7rem;
}
.contact__privacy {
    margin-top: 1.6rem;
    text-align: center;
    font-size: 1.4rem;
}
.contact__privacy a {
    color: var(--color-red);
    text-decoration: underline;
}
/* formrun バリデーションのエラーメッセージ（data-formrun-show-if-error）。通常は非表示 */
.contact-form__error {
    display: none;
    margin-top: .6rem;
    color: var(--color-red);
    font-size: 1.3rem;
    line-height: 1.5;
}
.contact-form__error.is-error,
[data-formrun-show-if-error].is-show {
    display: block;
}
/* formrun のボット対策ハニーポット（CMSが inline style を除去しても隠れるよう保険） */
._formrun_gotcha {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
/* 個人情報利用同意チェックボックス */
.contact-form__consent {
    display: flex;
    align-items: center;
    gap: .8rem;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1.6;
}
.contact-form__consent input {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    accent-color: var(--color-red);
}
.contact-form__consent a {
    color: var(--color-red);
    text-decoration: underline;
}
.contact-form {
    max-width: 115.2rem;
    margin: 4.0rem auto 0;
    /* QA と同様に白パネルを敷く（内側余白も QA の白パネル(dd)と同じ 5rem に） */
    padding: 5.0rem;
    background: #fff;
    border-radius: .8rem;
    box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, .05);
}
.contact-form__row {
    display: flex;
    align-items: center;
    padding: 3rem 4.0rem;
    margin-bottom: 3px;
}
/* ストライプ行のかたまりを角丸に（白パネルの中で綺麗に見せる） */
.contact-form__row:first-child {
    border-radius: .4rem .4rem 0 0;
}
.contact-form__row:last-of-type {
    border-radius: 0 0 .4rem .4rem;
}
.contact-form__row:nth-child(odd) {
    background: #f9f8f6;
}
.contact-form__row:nth-child(even) {
    background: #f2f2f2;
}
.contact-form__label {
    width: 26rem;
    flex-shrink: 0;
    padding-right: 2.0rem;
    text-align: right;
    font-size: 1.5rem;
    font-weight: 500;
}
.req {
    display: inline-block;
    margin-left: .6rem;
    color: var(--color-red);
    font-size: 1.1rem;
    vertical-align: top;
}
.contact-form__field {
    flex: 1;
}
.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field input[type="tel"],
.contact-form__field input[type="date"],
.contact-form__field textarea {
    width: 100%;
    padding: 1.2rem 1.4rem;
    font-family: inherit;
    font-size: 1.5rem;
    color: var(--color-text);
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: .4rem;
}
.contact-form__field--sm input {
    max-width: 24rem;
}
.contact-form__field textarea {
    resize: vertical;
    line-height: 1.7;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
    outline: none;
    border-color: var(--color-red);
    box-shadow: 0 0 0 .2rem rgba(208, 44, 36, .12);
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: #b5b5b5;
}
.contact-form__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
    padding-left: 10px;
}
/* ご利用目的「その他」選択時のみ表示される自由入力欄 */
.contact-form__other {
    margin-top: 1.2rem;
}
.contact-form__other[hidden] {
    display: none;
}

/* 希望商品名・数量：入力欄＋「商品を追加」ボタンの横並び／追加欄 */
.contact-form__addrow {
    display: flex;
    align-items: stretch;
    gap: 1.0rem;
}
.contact-form__addrow input[type="text"] {
    flex: 1 1 auto;
}
/* 商品名は伸縮、数量は固定幅の小さめボックス（横並び） */
.contact-form__addrow .js-product-name {
    flex: 1 1 auto;
    min-width: 0;
}
/* 属性セレクタ .contact-form__addrow input[type="text"] より詳細度を上げて確実に効かせる */
.contact-form__addrow input[type="text"].js-product-qty {
    flex: 0 0 8rem;
    width: 8rem;
    min-width: 0;
    text-align: center;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
.js-product-extra .contact-form__addrow {
    margin-top: 1.0rem;
    /* 「商品を追加」で挿入された瞬間にふわっとフェードイン */
    animation: addrowFadeIn .38s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes addrowFadeIn {
    from {
        opacity: 0;
        transform: translateY(-.8rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .js-product-extra .contact-form__addrow {
        animation: none;
    }
}
.contact-form__add {
    flex: 0 0 auto;
    padding: 0 1.6rem;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-red);
    background: #fff;
    border: 1px solid var(--color-red);
    border-radius: .4rem;
    cursor: pointer;
    transition: opacity .3s;
}
.contact-form__add:hover {
    opacity: .7;
}
.contact-form__add--remove {
    color: var(--color-gray);
    border-color: #cfcfcf;
}
/* 入力欄の下の補足注記（※商品名は正式名称で…） */
.contact-form__note {
    margin-top: .8rem;
    font-size: 1.3rem;
    color: var(--color-gray);
    line-height: 1.6;
}
.contact-form__note a {
    display: inline-flex;
    align-items: center;
    gap: 0 5px;
    color: #e60013;
    text-decoration: underline;
}
.contact-form__note a::after {
    content: '';
    background-image: url(/red/event/bulk-orders/img/icon_link_external.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 11px;
    margin-top: 2px;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
}
.contact-form__radios label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    font-size: 1.5rem;
}
.contact-form__radios input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 .6rem 0 0;
    border: 1px solid #c8c8c8;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .3s ease;
}
/* チェック時に内側の赤ドットがふわっとフェードイン */
.contact-form__radios input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.0rem;
    height: 1.0rem;
    border-radius: 50%;
    background: var(--color-red);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-form__radios input[type="radio"]:checked {
    border-color: var(--color-red);
}
.contact-form__radios input[type="radio"]:checked::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.contact-form__submit {
    padding: 4.0rem;
    text-align: center;
}
.btn-submit {
    width: 40rem;
    max-width: 100%;
    padding: 1.8rem;
    color: #fff;
    font-family: inherit;
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--color-red);
    border: none;
    border-radius: 5rem;
    cursor: pointer;
    box-shadow: 0 .4rem 1.2rem rgba(208, 44, 36, .25);
    transition: background .3s, transform .2s;
}
.btn-submit:hover {
    background: var(--color-red-dark);
    transform: translateY(-.2rem);
}
/* 必須未入力・形式不正のときはグレー表示（押下は可能：押すと未入力項目へスクロール） */
.btn-submit.is-disabled,
.btn-submit.is-disabled:hover {
    background: #c8c8c8;
    box-shadow: none;
    transform: none;
}

/* ===== 入力内容の確認画面（ページ遷移なし・JS生成） ===== */
.contact-confirm {
    display: none;
}
/* 確認モード中は入力欄と確認ボタンを隠し、確認パネルを表示 */
.contact-form.is-confirming .contact-form__row,
.contact-form.is-confirming .contact-form__submit {
    display: none;
}
.contact-form.is-confirming .contact-confirm {
    display: block;
}
.contact-confirm__title {
    margin-bottom: 3.0rem;
    text-align: center;
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--color-text);
}
/* 確認タイトルの2行目（案内文）は少し小さめに */
.contact-confirm__subnote {
    display: inline-block;
    margin-top: 0.8rem;
    font-size: 1.5rem;
    font-weight: 400;
}
.contact-confirm__list {
    margin: 0 0 3.6rem;
    border-top: 1px solid var(--color-line);
}
.contact-confirm__row {
    display: grid;
    grid-template-columns: 24rem 1fr;
    gap: 1.6rem;
    padding: 1.8rem 1.2rem;
    border-bottom: 1px solid var(--color-line);
    font-size: 1.5rem;
    line-height: 1.7;
}
.contact-confirm__row dt {
    font-weight: 700;
    color: var(--color-text);
}
.contact-confirm__row dd {
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.contact-confirm__actions {
    display: flex;
    justify-content: center;
    gap: 2.0rem;
}
.contact-confirm__actions .btn-submit {
    width: auto;
    flex: 0 1 28rem;
}
.btn-cancel {
    flex: 0 1 20rem;
    max-width: 100%;
    padding: 1.8rem;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 5rem;
    cursor: pointer;
    transition: background .3s;
}
.btn-cancel:hover {
    background: #f2f2f2;
}

/* =========================================================
   右上の追従お問い合わせボタン
   ========================================================= */
.fixed-contact {
    position: fixed;
    top: 17rem;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.0rem;
    padding: 1.6rem 1.2rem 2.0rem;
    color: #fff;
    text-decoration: none;
    background: var(--color-red);
    border-radius: 1.2rem 0 0 1.2rem;
    box-shadow: -.2rem .2rem 1.2rem rgba(0, 0, 0, .2);
    /* 初期は右へ退避して非表示。ヒーローを過ぎたら is-visible でスライドイン */
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, background .3s;
}
.fixed-contact.is-visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
/* 追従お問い合わせも、ヘッダーナビ同様の透過ロールオーバー（背景は濃くせず opacity:.7）。
   表示中(.is-visible)のみ効くようスコープし、非表示時の opacity:0 と競合させない。 */
.fixed-contact.is-visible:hover {
    background: var(--color-red);
    opacity: .7;
}
.fixed-contact__icon {
    width: 2.2rem;
    height: auto;
    /* 赤いバブルアイコンを白く表示 */
    filter: brightness(0) invert(1);
}
.fixed-contact__text {
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
}

/* 最近見た商品 */
.pane-right-menu{
    margin: 0 auto;
    padding: 0 20px;
    width: min(calc(1280px + 40px), var(--fullWindowSize));
}

/* =========================================================
   サンクスページ（送信完了）
   ========================================================= */
.hero--thanks {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48rem;
    padding: 6.0rem 2.0rem;
    /* 写真の下（カードがはみ出す領域）に敷くグレー背景 */
    background: var(--color-bg-gray);
    overflow: hidden;
}
.hero--thanks .hero__bg {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    z-index: 0;
}
.hero--thanks .hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thanks__card {
    position: relative;
    z-index: 1;
    width: min(64rem, 100%);
    padding: 5.0rem 4.0rem;
    text-align: center;
    background: rgba(255, 255, 255, .92);
    border-radius: .8rem;
    box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, .12);
    backdrop-filter: blur(2px);
}
.thanks__title {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-red);
}
.thanks__text {
    margin-top: 2.4rem;
    font-size: 1.6rem;
    line-height: 2;
    color: var(--color-text);
}
.thanks__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 3.6rem;
    min-width: 28rem;
    padding: 1.6rem 3.2rem;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    background: var(--color-red);
    border-radius: 5rem;
    box-shadow: 0 .4rem 1.2rem rgba(208, 44, 36, .25);
    transition: background .3s, transform .2s;
}
.thanks__home:hover {
    background: var(--color-red-dark);
    transform: translateY(-.2rem);
}

/* =========================================================
   レスポンシブ（SP：〜767px）
   ※各セレクタ直下に記述（ガイドライン準拠）
   ========================================================= */
@media screen and (max-width: 767px) {
    body {
        font-size: 1.4rem;
    }
    .u-sp {
        display: inline;
    }
    .u-pc {
        display: none;
    }
    .container-ebulk-orders {
        padding-inline: 1.6rem;
    }
    .section {
        padding: 2.8rem 0;
    }
    .section-title {
        font-size: 2.2rem;
    }
    .section-lead {
        font-size: 1.3rem;
        text-align: left;
    }
    /* 「ReDは、健やかな毎日を…」のリード文はSPでも中央揃え */
    .reason .section-lead {
        text-align: center;
    }

    .btn-cta {
        min-width: 0;
        width: 100%;
        max-width: 36rem;
        font-size: 1.5rem;
    }
    .btn-cta--lg {
        min-width: 0;
        font-size: 1.6rem;
    }

    /* ヒーロー：SPは写真を全体表示（上）、テキストエリアを下に配置 */
    .hero {
        display: flex;
        flex-direction: column;
    }
    .hero__bg {
        /* 写真をトリミングせず全体表示（natural比 1510/540） */
        aspect-ratio: auto;
    }
    .hero__bg-img {
        height: auto;
    }
    .hero__card {
        position: static;
        transform: none;
        width: 100%;
        padding: 3.2rem 2.0rem 3.0rem;
        /* テキストエリアの背景をベージュ(--color-bg-light)に */
        background: var(--color-bg-light);
    }
    .hero__card::before {
        display: none;
    }
    .hero__tag {
        flex-direction: column;
        gap: .8rem;
        font-size: 1.3rem;
    }
    .hero__tag-label {
        font-size: 1.3rem;
    }
    .hero__title {
        font-size: 3.2rem;
        margin: 1.0rem 0 1.2rem;
    }
    .hero__lead {
        font-size: 1.3rem;
    }
    .hero__badges {
        gap: 4.0rem;
        margin: 2.0rem 0 1.2rem;
    }
    .hero__badge {
        font-size: 1.4rem;
    }
    .hero__badge + .hero__badge::before {
        left: -2.0rem;
        height: 2.4rem;
    }
    .hero__badge-icon {
        height: 2.6rem;
    }
    .hero__cta {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        margin-top: 2.4rem;
        padding: 1.4rem 1.6rem 1.8rem;
    }
    .hero__cta-text {
        font-size: 1.2rem;
        letter-spacing: .1em;
    }
    .hero__cta-btn {
        padding: 1.2rem 1.6rem;
        letter-spacing: .1em;
    }

    /* イントロ */
    .intro {
        padding: 4rem 0;
        text-align: center;
    }
    .intro__title {
        font-size: 2.2rem;
    }
    /* メインキャプション下の詳細文：iPhone SE 等の狭い幅でも各行(<br>)が
       2行に折り返さないよう、幅に応じてフォントをスケール（clamp+vw）。
       white-space:nowrap で <br> の位置以外では折り返さない。 */
    .intro__text {
        margin-top: 3.0rem;
        /* SP専用の改行(u-sp)で行が短くなった分、少し大きめに。
           それでも最長行が折り返さないよう幅連動(clamp+vw)で収める。 */
        font-size: clamp(1.2rem, 4.3vw, 1.7rem);
        line-height: 2.2;
        white-space: nowrap;
    }
    .intro__images {
        flex-direction: column;
        gap: 1.6rem;
        margin-top: 3.0rem;
    }

    /* 追従ナビ：本家 商品ページ(.block-product-scroll-link)に倣い、
       4項目を1行に等幅で収める（縦積み：ラベル＋赤下矢印、項目間は赤1px区切り）。
       ラベルは小さめフォントで2行まで折返し可。 */
    .scroll-nav {
        margin-bottom: 2.4rem;
    }
    .scroll-nav__list {
        flex-wrap: nowrap;
    }
    .scroll-nav__item {
        flex: 1 1 0;
        min-width: 0;
    }
    .scroll-nav__item a {
        flex-direction: column;
        justify-content: center;
        height: 5.6rem;
        gap: .4rem;
        padding: .8rem .3rem .9rem;
        /* 本家 .block-product-scroll-link と同じ vw 可変フォント */
        font-size: calc(14 / 596 * 100 * 1vw);
        line-height: 1.3;
    }
    /* 2行になる項目に合わせ、1行ラベルも縦センター揃え（<br>折返し可） */
    .scroll-nav__item a span {
        display: block;
        width: 100%;
        text-align: center;
    }
    /* 両端（左端・右端）の赤い縦線は消し、項目間の区切りだけ残す */
    .scroll-nav__item:first-child::before,
    .scroll-nav__item:last-child::after {
        display: none;
    }
    /* 追従時も1行・縦積みを維持（横並びだと4項目＋矢印が収まらないため） */
    .scroll-nav.is-fixed .scroll-nav__item a {
        flex-direction: column;
        justify-content: center;
        height: 5.0rem;
        gap: .4rem;
    }
    /* 追従時も区切りは縦フル、両端は非表示のまま */
    .scroll-nav.is-fixed .scroll-nav__item::before {
        top: 0;
        bottom: 0;
        height: auto;
        transform: none;
    }
    .scroll-nav__item a::after {
        width: 1.0rem;
        height: .7rem;
    }
    .scroll-nav__item a::after {
        width: 1.0rem;
        height: .7rem;
    }

    /* ベージュ枠の左右インセットを小さく */
    .reason {
        margin: 0 1.6rem;
    }
    .faq {
        margin: 0;
    }
    /* contact は左右余白なしで全幅に */
    .contact {
        margin: 3.0rem 0 0;
    }
    .contact__lead {
        font-size: 1.3rem;
    }
    /* 個人情報の注記は、上のリード文（1.3rem）より小さめに */
    .contact__privacy {
        font-size: 1.15rem;
    }

    /* 選ばれる理由 */
    .reason__box {
        margin-top: 2.5rem;
        padding: 4.0rem 1.6rem 3.0rem;
    }
    .reason__list {
        flex-direction: column;
        gap: 2.4rem;
    }
    .reason__card {
        flex-basis: auto;
        border-radius: 2.4rem;
        padding: 3.0rem 2.0rem;
    }
    .reason__card-title {
        min-height: 0;
    }
    .reason__card-img {
        width: 68%;
        padding-top: 2.0rem;
    }
    /* PICK UP：幅固定(92rem)がSPで溢れるので解除して縦積み */
    .reason__pickup {
        width: auto;
        max-width: none;
        flex-direction: column;
        gap: 2.0rem;
        margin: 4.0rem auto 0;
        padding: 3.0rem 0 0;
    }
    .reason__pickup-body {
        padding-left: 0;
        /* PICK UP ラベル・見出しはSPでは中央揃え */
        text-align: center;
    }
    /* 説明文（全国1,000以上…）はSPでは左寄せ */
    .reason__pickup-text {
        text-align: left;
    }
    .reason__pickup-img {
        width: 100%;
    }
    .reason__pickup-title {
        font-size: 2.0rem;
    }
    /* 導入メリット */
    .reason__merit {
        margin-top: 4.0rem;
        padding: 4.0rem 1.6rem;
    }

    /* メリット・用途 */
    .merit__list,
    .usage__list {
        flex-direction: column;
        gap: 1.6rem;
    }
    .merit__card {
        padding: 0 2.4rem 3.0rem;
    }
    .usage__list {
        max-width: none;
        margin-top: 2.5rem;
    }
    .usage__list::before {
        display: none;
    }
    /* #usage の中身も #reason/#flow 同様、左右marginの角丸ベージュパネルに。
       .container-ebulk-orders は width:100% を持つため、margin を足すと右にはみ出す。
       width:auto にして左右marginの内側に収める。 */
    #usage > div {
        width: auto;
        margin: 0 1.6rem;
        padding: 3.0rem 1.6rem;
        background: var(--color-bg-light);
        border-radius: .8rem;
    }

    /* ご注文の流れ：縦積み・横区切り＋下向き矢印 */
    .flow {
        padding-bottom: 5.0rem;
        /* スマホは #reason 同様、左右marginを空けた角丸ベージュパネルに */
        margin: 0 1.6rem;
        background: var(--color-bg-light);
        border-radius: .8rem;
    }
    /* 全体がベージュになるので、下部だけの部分ベージュ帯は不要 */
    .flow::before {
        display: none;
    }
    .flow__list {
        flex-direction: column;
    }
    .flow__step {
        padding: 3.2rem 2.0rem 3.6rem;
    }
    .flow__icon {
        margin: 2.4rem auto 2.0rem;
    }
    .flow__step + .flow__step::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        transform: none;
    }
    .flow__step + .flow__step::after {
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%) rotate(135deg);
    }
    .cta-band__text {
        font-size: 1.6rem;
    }
    .cta-band__text::before,
    .cta-band__text::after {
        height: 5.2rem;
    }

    /* おすすめ商品：SPは2列（gap込みで幅計算） */
    .products {
        padding-bottom: 4.0rem;
    }
    /* SP：本家 shop トップ #block_of_event と同じ挙動に合わせる。
       本家は mode='S' で swiper を破棄し、素の .block-thumbnail-t--items を
       横スクロール（overflow-x:auto／gap0／カード幅15.6rem＝rem可変で実機375pxで156px）にする。
       当ブロックは __noslide 付きでサイトのSP用CSSが効かず、rem固定(62.5%)のため、
       同じ見た目になるよう vw 換算(156/375≒41.6vw)で再現する。
       ・カード幅は親レイアウトに依存しない vw 固定、スクロールは幅が確定する
         .products__carousel 側へ（items 側だと親の shrink-fit で破綻する）。 */
    .products__carousel {
        margin-top: 3.2rem;
        margin-inline: -1.6rem;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        /* ネイティブバーはモバイルで自動的に隠れるため非表示にし、
           下の自前インジケーター(.products__scrollbar)で常時提示する */
        scrollbar-width: none;
    }
    .products__carousel::-webkit-scrollbar {
        display: none;
    }
    /* 横スクロール位置インジケーター（常時表示のスクロールバー） */
    .products__scrollbar {
        display: block;
        position: relative;
        height: 0.4rem;
        margin: 1.6rem 0 0;
        border-radius: 999px;
        background: #ededed;
        overflow: hidden;
    }
    .products__scrollbar-thumb {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        min-width: 4rem;
        border-radius: 999px;
        background: #b5b5b5;
    }
    #products .products__carousel .block-thumbnail-t:not(.swiper-initialized),
    #products .products__carousel .block-top-event,
    #products .products__carousel .block-top-event--goods,
    #products .products__carousel .block-thumbnail-t-wrap {
        overflow: visible !important;
    }
    #products .products__carousel .block-thumbnail-t:not(.swiper-initialized) .block-thumbnail-t--items {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: max-content !important;
        padding: 0 1.0rem !important;
    }
    #products .products__carousel .block-thumbnail-t:not(.swiper-initialized) .block-thumbnail-t--goods {
        flex: 0 0 41.6vw !important;
        width: 41.6vw !important;
        max-width: 41.6vw !important;
        min-width: 41.6vw !important;
        margin: 0 !important;
        padding: 0 0.5rem !important;
    }
    /* 価格：本家 #block_of_event のSP（1.8rem）に合わせて縮小 */
    .products__carousel .block-thumbnail-t--price {
        font-size: 1.8rem;
    }
    .products__carousel .block-thumbnail-t--goods .block-thumbnail-t--price-infos {
        font-size: 1.0rem;
    }

    /* よくあるご質問 */
    .block-goods-comment6 > dt {
        margin-bottom: 2.4rem;
    }
    /* FAQタイトルも他セクションの section-title と同じSPサイズに揃える */
    .faq .block-goods-comment6 .section-title {
        font-size: 2.2rem;
    }
    .block-goods-comment6 > dd {
        padding: 2.0rem 1.6rem;
    }
    .faq__group {
        font-size: 1.7rem;
    }
    .block-goods-comment6 .faq_section .faq_question {
        padding: 1.6rem 4.3rem 1.6rem 1.6rem;
        font-size: 1.3rem;
    }
    .block-goods-comment6 .faq_section .faq_answer {
        font-size: 1.3rem;
    }

    /* ギャラリー */
    .gallery {
        padding: 4.8rem 0;
    }
    .gallery__item {
        margin-right: 1.2rem;
        border-radius: 1.2rem;
    }
    .gallery__item img {
        width: auto;
        height: 24rem;
    }

    /* フォーム */
    .contact-confirm__subnote {
        font-size: 1.4rem;
        line-height: 1.5;
    }
    .contact-form {
        padding: 1.6rem;
    }
    .contact-form__row {
        display: block;
        padding: 1.6rem;
        font-size: 1.3rem;
    }
    /* 入力欄は独自font-sizeを持つので、行に合わせて1.3remに */
    .contact-form__field input,
    .contact-form__field textarea {
        font-size: 1.3rem;
    }
    /* 確認画面：SPは項目もボタンも縦積み */
    .contact-confirm__title {
        font-size: 1.7rem;
        margin-bottom: 2.4rem;
    }
    .contact-confirm__row {
        grid-template-columns: 1fr;
        gap: .4rem;
        padding: 1.4rem .4rem;
        font-size: 1.3rem;
    }
    .contact-confirm__actions {
        flex-direction: column-reverse;
        align-items: center;
        gap: 1.2rem;
    }
    .contact-confirm__actions .btn-submit,
    .btn-cancel {
        width: 100%;
        flex: none;
    }
    .contact-form__label {
        width: 100%;
        margin-bottom: .8rem;
        padding-right: 0;
        text-align: left;
    }
    .contact-form__radios {
        gap: 1.0rem 1.6rem;
    }
    .contact-form__submit {
        padding: 2.4rem 0 .8rem;
    }
    .btn-submit {
        width: 100%;
        font-size: 1.6rem;
    }

    /* 追従ボタン（SPも右端の縦タブ／サイズを縮小） */
    .fixed-contact {
        gap: .8rem;
        padding: 1.2rem .8rem 1.6rem;
        border-radius: 1.0rem 0 0 1.0rem;
    }
    .fixed-contact__icon {
        width: 1.9rem;
    }
    .fixed-contact__text {
        font-size: 1.3rem;
        letter-spacing: .12em;
    }

    /* サンクスページ：SPは写真は40rem固定のまま、カードを下へはみ出して配置 */
    .hero--thanks {
        align-items: flex-start;
        min-height: 40rem;
        /* 左右paddingを広めにして白枠(カード)を少し狭く。上paddingで縦位置調整 */
        padding: 16rem 3.2rem 4.0rem;
    }
    /* 背景写真は上部に固定高さ（コンテンツで伸びない）。カードは写真下へ溢れる */
    .hero--thanks .hero__bg {
        inset: 0 0 auto 0;
        height: 40rem;
    }
    .thanks__card {
        padding: 3.2rem 2.0rem;
    }
    .thanks__title {
        font-size: 2.4rem;
    }
    .thanks__text {
        margin-top: 1.8rem;
        font-size: 1.3rem;
        line-height: 1.9;
        text-align: left;
    }
    .thanks__home {
        margin-top: 2.8rem;
        min-width: 0;
        width: 100%;
    }
}