@charset "UTF-8";
/*
 * 御歳暮 特設ページ（固定ページ スラッグ: oseibo）専用スタイル
 * 第5版デザイン：「出水酒造のお歳暮ギフト特集.png」（2026-10-14）
 *   和紙の生成り・松の深緑・梅と水引の紅・金の4色で、和の贈答品らしさを出す（赤一色の中華風に見せない）
 *
 * ・すべて .osb の中に閉じ、サイト共通のスタイルに影響させない
 * ・テーマの html は font-size が画面幅連動（calc(1000vw / 1400)）のため rem は使わず px / clamp() で指定する
 * ・リセットは :where() で詳細度0にし、部品側の margin 指定を打ち消さないようにする
 * ・書体はサイトが読み込み済みの Typekit（ひな明朝・Adobe Garamond）だけを使う
 */

.osb {
    --osb-red: #a3161c;        /* 紅（見出しの強調・ボタン・価格） */
    --osb-red-deep: #7c0e13;   /* 紅の濃い側（ボタンのグラデーション） */
    --osb-gold: #b88d3f;       /* 金（罫・飾り） */
    --osb-gold-pale: #e9d5a6;  /* 淡い金（深緑・紅地の上の文字） */
    --osb-ivory: #f8f2e6;      /* 地の生成り */
    --osb-card: #fffdf8;       /* カードの白 */
    --osb-ink: #2b211b;        /* 本文の焦げ茶黒 */
    --osb-sub: #6b5d52;        /* 補足文字 */
    --osb-line: #e2cf9f;       /* カードの金の罫 */
    --osb-green: #1d4a33;      /* 松の深緑（見出し・締めの帯。ECサイトの瓶の緑に寄せる） */
    --osb-green-deep: #133526; /* 深緑の濃い側（お問い合わせ帯） */
    --osb-mincho: hina-mincho, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    --osb-garamond: adobe-garamond-pro, "EB Garamond", Georgia, serif;

    color: var(--osb-ink);
    font-family: var(--osb-mincho);
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: .06em;
    background: var(--osb-ivory) url("../images/oseibo/washi_bg.webp") repeat center top / 900px auto;
    overflow: hidden; /* 飾りの松・梅を画面の端で切るため（横スクロールも出さない） */
    /* ページ全体を1つの重なりのまとまりにする。中の水引（z-index:2）などが、
       サイト共通の固定ヘッダー（zi-2）より上に描かれないようにするため */
    position: relative; z-index: 0;
}

/* ---------- リセット（詳細度0） ---------- */
:where(.osb) h1, :where(.osb) h2, :where(.osb) h3, :where(.osb) p,
:where(.osb) ul, :where(.osb) figure, :where(.osb) dl, :where(.osb) dd { margin: 0; padding: 0; }
:where(.osb) ul { list-style: none; }
:where(.osb) img { display: block; max-width: 100%; height: auto; }
:where(.osb) a { color: inherit; }
.osb *, .osb *::before, .osb *::after { box-sizing: border-box; }

/* 文のかたまりごとにだけ改行する（span を行として扱う） */
.osb-hero__lead span, .osb-about__text span, .osb-desc span, .osb-cta__ttl span,
.osb-feature__tag span, .osb-eto__text span, .osb-service__body p span { display: block; }

.osb-wrap { position: relative; z-index: 1; width: min(1080px, 100% - 32px); margin-inline: auto; }
.osb-wrap--narrow { width: min(760px, 100% - 32px); }

/* キーボード操作時の位置がわかるよう、フォーカスは常に見せる */
.osb a:focus-visible, .osb summary:focus-visible { outline: 2px solid var(--osb-gold); outline-offset: 3px; }

/* ---------- ボタン ---------- */
.osb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    min-height: 44px; padding: 10px 24px;
    color: #fff; text-decoration: none; font-size: 14px; letter-spacing: .1em;
    background: linear-gradient(180deg, #b81d23, var(--osb-red-deep));
    border-radius: 3px;
    box-shadow: 0 2px 0 rgba(80, 8, 10, .3);
    transition: filter .2s;
}
.osb-btn::after { content: ""; flex: none; width: 6px; height: 6px; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); }
.osb-btn:hover { filter: brightness(1.12); color: #fff; }
.osb-btn--lg { min-width: min(100%, 360px); min-height: 52px; font-size: 16px; }
.osb-btn--gold { color: var(--osb-ink); background: linear-gradient(180deg, #f6e5b5, #cfa457); min-width: min(100%, 340px); min-height: 52px; font-size: 16px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.osb-btn--gold:hover { color: var(--osb-ink); }
.osb-btn.is-closed { color: #fff; background: #9a9088; box-shadow: none; cursor: default; }
.osb-btn.is-closed::after { display: none; }

/* ---------- 価格・商品番号・仕様 ---------- */
.osb-price { color: var(--osb-red); font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.osb-price__num { font-family: var(--osb-garamond); font-size: 30px; font-weight: 600; line-height: 1; margin-right: 1px; }
.osb-price small { font-size: 12px; }
/* 会員価格と通常価格を2段で出す（会員価格を上に大きく。見出しの札でどちらの値段か分かるようにする） */
.osb-price--member { display: grid; gap: 4px; }
.osb-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 0; line-height: 1.2; }
.osb-price__val { white-space: nowrap; }
.osb-price__label {
    flex: none; align-self: center; margin-right: 8px; padding: 3px 8px 2px;
    color: #fff; background: var(--osb-red); font-size: 12px; line-height: 1.3; letter-spacing: .08em; border-radius: 2px;
}
/* 通常価格は本文色で小さく。札は枠線だけにして会員価格より控えめにする */
.osb-price__row--regular { color: var(--osb-sub); font-size: 14px; }
.osb-price__row--regular .osb-price__label { color: var(--osb-sub); background: none; border: 1px solid currentColor; padding: 2px 7px 1px; }

/* 「商品番号 [MT]」：番号を深緑の札にする */
.osb-code { display: flex; align-items: center; gap: 10px; color: var(--osb-sub); font-size: 12px; line-height: 1; }
.osb-code span { padding: 4px 10px 3px; color: #fff; background: var(--osb-green); font-family: var(--osb-garamond); font-size: 17px; letter-spacing: .04em; border-radius: 2px; }

.osb-specs { font-size: 13px; line-height: 1.7; color: #4a3f37; }
.osb-specs li { padding-left: 1em; text-indent: -1em; }
.osb-specs li::before { content: "・"; }
.osb-specs li span { display: block; text-indent: 0; padding-left: 1em; }

.osb-desc { font-size: 14px; line-height: 1.95; }
.osb-kana { font-size: .5em; letter-spacing: .1em; }
.osb-note { font-size: 12px; line-height: 1.8; color: var(--osb-sub); }
/* 商品名・銘柄名は言葉の途中で折り返さない（「・」の後ろの wbr と句読点でだけ改行。収まらない時だけ途中で折る） */
.osb-card__name, .osb-feature__name, .osb-specs span, .osb-eto__name { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- セクション共通 ---------- */
.osb-sec { position: relative; padding-block: clamp(56px, 7vw, 88px); }

/* 見出し：深緑の明朝を、梅の花または金の水引ではさむ */
.osb-h2 {
    display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px);
    margin-bottom: clamp(28px, 4vw, 44px);
    color: var(--osb-green); font-size: clamp(22px, 3.2vw, 34px); font-weight: 400; line-height: 1.4; letter-spacing: .12em; text-align: center;
    -webkit-text-stroke: .4px currentColor;
}
.osb-h2 span { word-break: keep-all; overflow-wrap: anywhere; }
.osb-h2--knot { font-size: clamp(19px, 2.4vw, 25px); }
.osb-ume { flex: none; width: clamp(18px, 2.4vw, 26px); height: auto; color: #c6283a; }
.osb-knot { flex: none; width: clamp(40px, 6vw, 64px); height: auto; color: var(--osb-gold); }
.osb-h2 .osb-knot:last-child { transform: scaleX(-1); }

/* 松・梅の飾り（白地の生成画像を透過にしたもの）。枝元を画面の端に付け、枝先を内側へ向ける */
.osb-deco { position: absolute; z-index: 0; height: auto; pointer-events: none; }

/* ===================================================================
 * ファーストビュー
 * =================================================================== */
.osb-hero {
    position: relative;
    background: #f1e6d1 url("../images/oseibo/hero_bg.webp") no-repeat center / cover;
}
.osb-hero__inner {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
    width: min(1240px, 100% - 32px); margin-inline: auto;
    min-height: clamp(560px, 46vw, 680px); padding-block: 48px 64px;
}
/* 左上の梅の枝に見出しが重ならないよう、文字のかたまりを内側へ寄せる */
.osb-hero__copy { padding: clamp(40px, 6vw, 80px) 0 0 clamp(8px, 7vw, 110px); }
.osb-hero__ttl { font-weight: 400; line-height: 1.35; letter-spacing: .08em; }
/* 1行目は松の深緑、2行目を紅で大きく。ひな明朝は1ウェイトのため、細い縁取りで太さを補う */
.osb-hero__ttl span { display: block; color: var(--osb-green); font-size: clamp(30px, 4.2vw, 54px); -webkit-text-stroke: .7px currentColor; }
.osb-hero__ttl em { display: block; color: var(--osb-red); font-style: normal; font-size: clamp(36px, 5.2vw, 68px); -webkit-text-stroke: .8px currentColor; }
/* H1「出水酒造のお歳暮2026 鹿児島・出水の芋焼酎ギフト」（2026-10-24 SEO 担当の依頼）
 * 大きなコピーの上に小さく置き、左に金の罫を付けて見出しの札に見せる。狭い画面では2つ目のかたまりの前でだけ改行する */
.osb-hero__h1 {
    margin-bottom: clamp(10px, 1.4vw, 16px); padding: 3px 0 3px 12px;
    color: var(--osb-green); font-size: clamp(13px, 1.25vw, 16px); font-weight: 400; line-height: 1.7; letter-spacing: .1em;
    border-left: 3px solid var(--osb-gold);
}
.osb-hero__h1 span { display: inline-block; }
.osb-hero__lead { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(14px, 1.35vw, 17px); line-height: 2; }
.osb-hero__term {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; width: fit-content;
    /* 左下の松の絵に重なるため、生成りを薄く敷いて読みやすくする */
    margin-top: 20px; padding: 6px 12px; font-size: 14px; background: rgba(248, 242, 230, .85);
    border-top: 1px solid var(--osb-gold); border-bottom: 1px solid var(--osb-gold);
}
.osb-hero__term-label { font-size: 13px; }
.osb-hero__term strong { font-family: var(--osb-garamond); font-size: 24px; font-weight: 600; letter-spacing: .02em; }
.osb-hero__copy .osb-btn { display: flex; width: fit-content; margin-top: 20px; }

.osb-hero__photo { justify-self: center; width: min(100%, 400px); }
/* 切抜（透過）画像のため、枠ではなく輪郭に沿った影で卓に置いたように見せる */
.osb-hero__photo img { filter: drop-shadow(0 22px 22px rgba(40, 18, 8, .45)); }

/* 右上の赤い縦書きの札（2枚）。縦書きの並びで1つ目が右に来る */
.osb-hero__tags { position: absolute; top: 28px; right: 0; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px; }
.osb-hero__tags span {
    padding: 14px 9px 18px; color: #fff; background: linear-gradient(180deg, #b31d23, var(--osb-red-deep));
    writing-mode: vertical-rl; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.4; letter-spacing: .2em;
    box-shadow: 0 6px 14px -6px rgba(60, 0, 0, .5);
}
.osb-hero__tags span:last-child { margin-top: 36px; }

/* 紅と金の水引の区切り。ファーストビューの下端に重ね、次の帯とのつなぎにする */
.osb-hero__mizuhiki {
    position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(1100px, 100%);
    transform: translate(-50%, 50%); pointer-events: none;
}

/* ===================================================================
 * 出水酒造のお歳暮（右に贈答品の写真）
 * =================================================================== */
.osb-about {
    /* 背景画像は 3:1。左 約45%は生成りの和紙なので、文章は左に置く */
    position: relative; display: flex; align-items: center;
    /* 画像（1916×735 ≒ 横幅の 38.4%）を上下で切らずに見せるため、帯の高さを画像の比率に合わせる */
    min-height: clamp(300px, 38.4vw, 740px); padding-block: clamp(56px, 7vw, 80px) clamp(44px, 6vw, 64px);
    /* 2026-10-14 ユーザー提供のイメージ（2本セットのギフト箱・ぐい呑・梅）に変更。焼き込みの文字と上端の水引は除去済み */
    background: #f6efe1 url("../images/oseibo/about_gift.webp") no-repeat right center / cover;
}
.osb-about__ttl { color: var(--osb-red); font-size: clamp(28px, 4vw, 46px); font-weight: 400; line-height: 1.3; letter-spacing: .1em; -webkit-text-stroke: .7px currentColor; }
.osb-about__ttl small { margin-inline: .05em; font-size: .62em; }
.osb-about__text { margin-top: 18px; font-size: clamp(13px, 1.3vw, 15px); line-height: 2.1; }

/* ===================================================================
 * 特別な方への上質な贈り物（紅の帯）
 * =================================================================== */
.osb-feature {
    position: relative; padding-block: clamp(36px, 5vw, 56px);
    background: #8e1a1f url("../images/oseibo/red_bg.webp") no-repeat center / cover;
}
.osb-feature__inner {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .75fr) auto; align-items: center; gap: clamp(20px, 3vw, 40px);
    width: min(1120px, 100% - 32px); margin-inline: auto;
}
/* 生成りのカード。金の細い二重罫で額装の雰囲気を出す */
.osb-feature__card {
    padding: clamp(26px, 3.4vw, 44px);
    background: linear-gradient(100deg, #fffaf0 55%, rgba(255, 250, 240, .92));
    border: 1px solid var(--osb-gold-pale); outline: 1px solid rgba(184, 141, 63, .55); outline-offset: -8px;
    box-shadow: 0 20px 40px -20px rgba(30, 0, 0, .6);
}
.osb-feature__eyebrow { color: var(--osb-red); font-size: clamp(14px, 1.5vw, 17px); letter-spacing: .14em; }
.osb-feature__name { margin-top: 2px; color: var(--osb-red); font-family: var(--osb-garamond); font-size: clamp(36px, 4.6vw, 58px); font-weight: 600; line-height: 1.2; letter-spacing: .02em; }
.osb-feature__name .osb-kana { margin-left: .2em; font-family: var(--osb-mincho); font-weight: 400; }
.osb-feature__card .osb-desc { margin-top: 12px; }
.osb-feature__spec { margin-top: 10px; color: var(--osb-sub); font-size: 12px; }
.osb-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 18px; }
.osb-buy .osb-price__num { font-size: clamp(30px, 3.4vw, 40px); }
.osb-buy .osb-btn { min-width: 220px; }
.osb-feature__photo { justify-self: center; width: min(100%, 340px); }
.osb-feature__photo img { filter: drop-shadow(0 26px 24px rgba(30, 0, 0, .6)); }
.osb-feature__tag {
    display: flex; flex-direction: column; gap: 10px;
    color: #fff; writing-mode: vertical-rl; font-size: clamp(17px, 2vw, 24px); line-height: 1.6; letter-spacing: .26em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* ===================================================================
 * おすすめのギフト（2列）
 * =================================================================== */
/* 左は松（枝元を画面の左端に）、右は梅（左右反転し、枝元を画面の右端に） */
.osb-deco--pine-l { left: 0; top: 40px; width: clamp(180px, 24vw, 360px); }
.osb-deco--ume-r { right: 0; top: 0; width: clamp(200px, 28vw, 420px); transform: scaleX(-1); }

.osb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.osb-card {
    /* 文字を左、商品写真を右。下段に価格とボタン */
    /* 行：①文字と写真 ②商品説明（伸ばして、隣のカードと価格・ボタンの高さをそろえる） ③マイクロコピー ④価格とボタン */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-rows: auto 1fr auto auto; gap: 12px 18px;
    padding: clamp(16px, 2vw, 24px);
    background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-radius: 6px;
    box-shadow: 0 10px 24px -18px rgba(70, 40, 10, .45);
}
.osb-card__body { display: flex; flex-direction: column; gap: 10px; }
.osb-card__name { color: var(--osb-ink); font-size: clamp(17px, 1.9vw, 22px); font-weight: 400; line-height: 1.45; letter-spacing: .06em; -webkit-text-stroke: .3px currentColor; }
/* 写真は金の箱の中に納めたように見せる（化粧箱の内張りを思わせる淡い金） */
.osb-card__img {
    display: grid; place-items: center; align-self: stretch;
    padding: 12px; background: linear-gradient(180deg, #f3e6c4, #e6d2a1); border: 1px solid #d9bf84; border-radius: 2px;
}
.osb-card__img img { width: auto; max-height: 220px; }
/* 商品説明。セットの紹介文の下に、銘柄ごとの説明を金の細線で区切って並べる */
.osb-card__text { grid-column: 1 / -1; padding-top: 12px; border-top: 1px dashed var(--osb-line); }
.osb-card__text .osb-desc { font-size: 13.5px; line-height: 1.85; }
.osb-notes { display: grid; gap: 8px; margin-top: 10px; }
.osb-notes div { padding-left: 10px; border-left: 2px solid var(--osb-gold); }
.osb-notes dt { color: var(--osb-green); font-size: 13.5px; letter-spacing: .06em; }
.osb-notes dd { color: #4a3f37; font-size: 12.5px; line-height: 1.75; }
/* マイクロコピー。ボタンの直上に「＼ 〜 ／」の形で添える（ネット通販でなじみのある吹き出しの書き方） */
.osb-micro { grid-column: 1 / -1; margin-bottom: -6px; color: var(--osb-red); font-size: 13.5px; line-height: 1.5; letter-spacing: .04em; text-align: center; }
.osb-micro::before { content: "＼"; margin-right: .5em; }
.osb-micro::after { content: "／"; margin-left: .5em; }
.osb-card__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
/* 価格は仕様（アルコール度数）の下。ボタンは下段に単独で置き、カード幅いっぱいにする */
.osb-card__body .osb-price { margin-top: 2px; }
.osb-card__body .osb-price__num { font-size: clamp(26px, 2.8vw, 34px); }
.osb-card__foot .osb-btn { flex: 1 1 100%; font-size: 13px; }

/* ===================================================================
 * 季節限定 干支ボトル
 * =================================================================== */
.osb-eto {
    position: relative; padding-block: clamp(40px, 6vw, 72px) clamp(48px, 6vw, 80px);
    background: url("../images/oseibo/eto_bg.webp") no-repeat center top / 100% auto;
    border-top: 3px solid var(--osb-red);
}
.osb-eto__head { text-align: center; }
.osb-eto__ttl { display: flex; align-items: baseline; justify-content: center; gap: .6em; color: var(--osb-red); font-size: clamp(30px, 4.4vw, 50px); font-weight: 400; line-height: 1.3; letter-spacing: .14em; -webkit-text-stroke: .7px currentColor; }
.osb-eto__ttl small { font-size: .5em; letter-spacing: .2em; -webkit-text-stroke: .4px currentColor; }
.osb-eto__lead { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
/* 販売期限「11/30／まで」の朱の丸印（販売は11/30までのため「新春限定」はやめた） */
.osb-eto__badge {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px;
    color: #fff; background: radial-gradient(circle at 40% 35%, #c42a2f, #8c1015); border-radius: 50%;
    font-size: 14px; line-height: 1.25; letter-spacing: .1em; text-align: center;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 4px rgba(184, 141, 63, .7);
}
/* 日付は欧文書体で少し大きく（ファーストビューのお申込み期間と同じ扱い） */
.osb-eto__badge span:first-child { font-family: var(--osb-garamond); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.osb-eto__text { font-size: clamp(13px, 1.3vw, 15px); line-height: 1.9; text-align: left; }
.osb-eto__term { margin-top: 4px; color: var(--osb-red); font-size: 14px; text-align: left; }
.osb-eto__term strong { font-weight: 400; -webkit-text-stroke: .3px currentColor; }
.osb-eto__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(24px, 3vw, 36px); }
.osb-eto__card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 18px;
    padding: clamp(16px, 2vw, 24px);
    background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-radius: 6px;
    box-shadow: 0 10px 24px -18px rgba(70, 40, 10, .45);
}
.osb-eto__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.osb-eto__name { color: var(--osb-red); font-size: clamp(17px, 1.7vw, 21px); letter-spacing: .02em; font-weight: 400; line-height: 1.4; -webkit-text-stroke: .4px currentColor; }
.osb-eto__spec { font-size: 15px; line-height: 1.7; }
.osb-eto__body .osb-btn { width: 100%; font-size: 13px; }
/* 実物の写真は朱の背景で撮られているため、角を少し丸めて額のように置く */
.osb-eto__img img { width: 100%; border-radius: 4px; box-shadow: 0 10px 20px -12px rgba(60, 0, 0, .5); }
/* 干支ボトルの注意（受注生産・キャンセル不可・同梱と送料）。複数行になるため左揃えで「※」をぶら下げる */
.osb-eto__notes { display: grid; gap: 4px; max-width: 860px; margin: 16px auto 0; }
.osb-eto__notes .osb-note { padding-left: 1em; text-indent: -1em; }
/* 「受注生産・12月10日以降に順次発送」は、ボタンより前に目に入るよう細い朱の枠で示す */
.osb-eto__mto { display: inline-block; margin-top: 6px; padding: 2px 10px; color: var(--osb-red); font-size: 13px; border: 1px solid currentColor; border-radius: 2px; }
/* 干支ボトル特設ページへのリンク（2026-10-24）。購入ボタンと見分けられるよう、朱の線だけの控えめな形にする */
.osb-eto__more { margin-top: 22px; text-align: center; }
.osb-link {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    min-height: 44px; padding: 8px 22px;
    color: var(--osb-red); font-size: 14px; letter-spacing: .08em; text-decoration: none;
    background: rgba(255, 253, 248, .92); border: 1px solid currentColor; border-radius: 3px;
    transition: background .2s;
}
.osb-link::after { content: ""; flex: none; width: 6px; height: 6px; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); }
.osb-link:hover { color: var(--osb-red); background: #fff; }

/* ===================================================================
 * ギフトサービスのご案内
 * =================================================================== */
/* 干支ボトルの帯の下に余白が重なって間延びしないよう、上の余白を詰める */
.osb-service { padding-top: clamp(24px, 3vw, 40px); padding-bottom: 0; }
.osb-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.osb-service__item {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: center; gap: 14px;
    padding: 18px clamp(14px, 1.8vw, 22px);
    background: rgba(255, 253, 248, .9); border: 1px solid var(--osb-line); border-radius: 6px;
}
/* のし包装・紙袋は白地の画像のため、乗算でカードの生成りに溶かす（白地が四角く浮かないように） */
.osb-service__img img { width: 100%; max-height: 140px; object-fit: contain; mix-blend-mode: multiply; }
.osb-service__body h3 { color: var(--osb-green); font-size: clamp(16px, 1.6vw, 19px); font-weight: 400; line-height: 1.5; letter-spacing: .08em; -webkit-text-stroke: .3px currentColor; }
.osb-service__body p { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--osb-sub); }
.osb-service__note { margin-top: 12px; text-align: center; }

/* ===================================================================
 * よくあるご質問
 * =================================================================== */
/* 左下は松（枝元を左端に）、右は梅（反転して枝元を右端に） */
.osb-deco--pine-faq { left: 0; bottom: 0; width: clamp(160px, 22vw, 320px); }
.osb-deco--ume-faq { right: 0; bottom: 20px; width: clamp(180px, 24vw, 340px); transform: scaleX(-1); }

.osb-faq__list { display: grid; gap: 8px; }
.osb-faq details { background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-radius: 4px; }
.osb-faq summary {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 11px 48px 11px 12px; font-size: 14px; line-height: 1.6; cursor: pointer; list-style: none;
}
.osb-faq summary::-webkit-details-marker { display: none; }
/* 開閉の向きを示す山形。開いたら上向き */
.osb-faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.osb-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.osb-faq__q { flex: none; display: grid; place-items: center; width: 28px; height: 26px; color: #fff; background: #6b4a2b; font-family: var(--osb-garamond); font-size: 16px; line-height: 1; border-radius: 3px; }
.osb-faq details p { padding: 0 20px 16px 54px; font-size: 14px; line-height: 1.9; color: var(--osb-sub); }
.osb-faq details p a { color: var(--osb-red); }

/* ===================================================================
 * 締めの誘導（深緑の帯）
 * =================================================================== */
.osb-cta {
    padding-block: clamp(40px, 5vw, 60px); color: #fff;
    background: var(--osb-green) url("../images/oseibo/cta_green.webp") no-repeat right center / cover;
}
.osb-cta .osb-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(24px, 4vw, 56px); }
.osb-cta__ttl { font-size: clamp(19px, 2.4vw, 27px); font-weight: 400; line-height: 1.7; letter-spacing: .1em; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }

/* ===================================================================
 * お電話・FAXでのご注文（濃い深緑の帯）
 * =================================================================== */
.osb-contact { padding-block: clamp(40px, 5vw, 56px); color: #fff; background: var(--osb-green-deep); text-align: center; border-top: 1px solid rgba(233, 213, 166, .35); }
.osb-contact__ttl { font-size: clamp(17px, 2vw, 21px); font-weight: 400; letter-spacing: .12em; }
.osb-contact__nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(28px, 5vw, 64px); margin-top: 20px; }
.osb-num { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; color: #fff; text-decoration: none; }
.osb-num__label { padding: 2px 8px; border: 1px solid var(--osb-gold-pale); font-family: var(--osb-garamond); font-size: 13px; letter-spacing: .14em; }
.osb-num__val { font-family: var(--osb-garamond); font-size: clamp(28px, 3.4vw, 36px); letter-spacing: .04em; line-height: 1.2; }
.osb-num__note { font-size: 12px; color: var(--osb-gold-pale); }
.osb-contact__info { margin-top: 18px; font-size: 13px; line-height: 1.9; }
.osb-contact__age { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); color: #f1d98b; font-size: 12px; line-height: 1.9; }

.osb-closed { margin-top: 20px; padding: 14px 18px; background: rgba(255, 253, 248, .9); border-left: 3px solid var(--osb-red); font-size: 14px; }

/* ===================================================================
 * 干支ボトル 特設ページ（固定ページ eto-bottle。_eto-bottle.php）2026-10-24
 * お歳暮ページの部品（ボタン・価格・干支ボトルのカード・お問い合わせ）をそのまま使い、ここではこのページだけの部分を足す
 * =================================================================== */
/* ファーストビュー：梅と羊の和紙（eto_bg）。左の文字の下だけ生成りを薄くかぶせて読みやすくする */
.etb-hero {
    position: relative;
    background:
        linear-gradient(90deg, rgba(248, 242, 230, .82) 0, rgba(248, 242, 230, .6) 50%, rgba(248, 242, 230, 0) 72%),
        url("../images/oseibo/eto_bg.webp") no-repeat center / cover,
        var(--osb-ivory);
    border-bottom: 3px solid var(--osb-red);
}
/* 2026-10-27 見出し（head）・写真（photo）・購入（buy）の3つに分けた。PC は左上に見出し・左下に購入・右に写真 */
.etb-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "head photo" "buy photo";
    grid-template-rows: auto auto; align-content: center; column-gap: clamp(24px, 4vw, 56px); row-gap: 0;
    min-height: clamp(520px, 44vw, 640px); padding-block: clamp(40px, 5vw, 64px);
}
.etb-hero__head { grid-area: head; align-self: end; }
.etb-hero__buy { grid-area: buy; align-self: start; margin-top: clamp(14px, 1.8vw, 22px); }
.etb-hero__photo { grid-area: photo; align-self: center; }
.etb-hero__label {
    display: inline-block; padding: 2px 12px; color: var(--osb-red); font-size: 13px; letter-spacing: .14em;
    background: rgba(255, 253, 248, .85); border: 1px solid currentColor; border-radius: 2px;
}
/* H1：「赤鶴」（小）→「干支ボトル」（紅で大きく）→「2027（未）」（欧文の数字＋深緑） */
.etb-hero__ttl { margin-top: 14px; font-weight: 400; line-height: 1.25; letter-spacing: .08em; }
.etb-hero__ttl small { display: block; color: var(--osb-green); font-size: clamp(18px, 2vw, 24px); letter-spacing: .2em; -webkit-text-stroke: .4px currentColor; }
.etb-hero__ttl span { display: block; color: var(--osb-red); font-size: clamp(44px, 6.4vw, 80px); -webkit-text-stroke: .9px currentColor; }
/* 2026-10-27 「干支ボトル」と「2027（未）」の間が詰まって見えるとの指摘で、4px → 0.5em に広げた */
.etb-hero__ttl em { display: block; margin-top: .5em; color: var(--osb-green); font-family: var(--osb-garamond); font-style: normal; font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; letter-spacing: .06em; }
.etb-hero__lead { margin-top: clamp(16px, 2vw, 22px); font-size: clamp(15px, 1.45vw, 18px); line-height: 1.9; }
.etb-hero__text { margin-top: 10px; color: var(--osb-sub); font-size: clamp(13px, 1.2vw, 15px); line-height: 1.9; }
.etb-hero__lead span, .etb-hero__text span, .etb-gift__ttl span { display: block; }
.etb-hero__buy .osb-btn { display: flex; width: fit-content; margin-top: 20px; }
/* 実物の写真（朱の背景で撮影）は、金の細い枠を内側に付けた額のように置く */
.etb-hero__photo { justify-self: center; width: min(100%, 460px); }
.etb-hero__photo img {
    width: 100%; border-radius: 6px;
    outline: 1px solid rgba(233, 213, 166, .9); outline-offset: -10px;
    box-shadow: 0 24px 40px -22px rgba(60, 0, 0, .6);
}

/* 360°回転ビュー（2026-10-27）：PC は左に回る写真・右に見出しとリード文と札。写真の後ろに淡い金の光、足もとに影 */
.etb-spin-sec__inner { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-areas: "spin body"; align-items: center; gap: clamp(24px, 4vw, 64px); max-width: 1080px; }
.etb-spin-sec__body { grid-area: body; }
.etb-spin { grid-area: spin; margin: 0; }
.etb-spin-sec__eyebrow { color: var(--osb-gold); font-family: var(--osb-garamond); font-size: 15px; font-weight: 600; letter-spacing: .3em; }
.etb-spin-sec__ttl { margin-top: 4px; color: var(--osb-green); font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.5; letter-spacing: .1em; -webkit-text-stroke: .5px currentColor; }
/* 2行目（27字）の末尾「す。」だけが折り返さないよう、字間を詰めて右の列に収める */
.etb-spin-sec__lead { margin-top: 14px; font-size: clamp(15px, 1.4vw, 16.5px); line-height: 2; letter-spacing: .03em; }
.etb-spin-sec { padding-bottom: clamp(32px, 4vw, 48px); }
.etb-spin-sec__lead span { display: block; }
.etb-spin__stage {
    position: relative; aspect-ratio: 1 / 1; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
    background: radial-gradient(ellipse 56% 46% at 50% 52%, rgba(233, 213, 166, .55), rgba(233, 213, 166, 0) 70%);
}
.etb-spin.is-ready .etb-spin__stage:active { cursor: grabbing; }
/* 足もとの影（写真の台の下端は枠の下から 3%） */
.etb-spin__stage::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: 1%; height: 5%; background: radial-gradient(closest-side, rgba(70, 35, 10, .3), rgba(70, 35, 10, 0)); }
.etb-spin__stage img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.etb-spin__ui { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.etb-spin__ui[hidden] { display: none; }
.etb-spin__hint { color: var(--osb-sub); font-size: 13.5px; letter-spacing: .08em; }
.etb-spin__hint::before { content: "⇆"; margin-right: 6px; color: var(--osb-red); }
.etb-spin__range { width: min(80%, 320px); accent-color: var(--osb-red); cursor: pointer; }

/* このボトルの特徴（3つ）。2026-10-27 一度付けた写真をユーザー依頼で外したため、上の余白は写真を付ける前の 28px に戻した
   （上端の丸い番号がカードの上に半分はみ出すので、その分を空ける）。文は一言になったので中央寄せ */
.etb-about { padding-bottom: clamp(40px, 5vw, 64px); }
.etb-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.etb-point {
    --px: clamp(16px, 2vw, 24px);
    position: relative; padding: 28px var(--px) 22px;
    background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-radius: 6px; text-align: center;
}
/* 2026-10-27 写真を付け直した札：写真をカードの上端・左右いっぱいに敷く（--px の分だけ外へ広げる） */
.etb-point--photo { padding-top: 0; }
.etb-point__img { aspect-ratio: 4 / 3; margin: 0 calc(var(--px) * -1) 18px; overflow: hidden; border-radius: 5px 5px 0 0; }
.etb-point__img img { display: block; width: 100%; height: 100%; }
.etb-point__img--cover img { object-fit: cover; }
/* 透明の切り抜きは、生成りの丸い光の上に余白を取って置く */
.etb-point__img--contain { padding: 6% 8% 4%; background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(233, 213, 166, .5), rgba(244, 236, 220, .6) 75%); }
.etb-point__img--contain img { object-fit: contain; }
/* 2026-10-28 白地の写真（手提げ紙袋）は、白の上に余白を取って置く（生成りの光の上だと白い四角が浮くため） */
.etb-point__img--white { padding: 5% 8%; background: #fff; }
.etb-point__img--white img { object-fit: contain; }
.etb-point__num {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    display: grid; place-items: center; width: 32px; height: 32px;
    color: #fff; background: radial-gradient(circle at 40% 35%, #c42a2f, #8c1015); border-radius: 50%;
    font-family: var(--osb-garamond); font-size: 17px; line-height: 1;
}
.etb-point__ttl { color: var(--osb-green); font-size: clamp(16px, 1.6vw, 19px); font-weight: 400; line-height: 1.5; letter-spacing: .08em; -webkit-text-stroke: .3px currentColor; }
.etb-point__text { margin-top: 10px; color: var(--osb-sub); font-size: 13.5px; line-height: 1.85; }

/* ひとつの羊ができるまで（2026-10-24）：工程4つを左から右へ。画像は透過の切抜きが多いため、淡い生成りの丸い光の上に置く */
.etb-story { padding-top: 0; }
.etb-story__lead { margin-top: -12px; color: var(--osb-sub); font-size: clamp(14px, 1.4vw, 16px); line-height: 2; text-align: center; }
.etb-story__lead span { display: block; }
.etb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; counter-reset: none; }
.etb-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 工程の間を金の細い線でつなぐ（最後の工程の右には引かない） */
.etb-step:not(:last-child)::after {
    content: ""; position: absolute; top: 34%; right: calc(clamp(14px, 2vw, 24px) / -2 - 6px); width: 12px; height: 12px;
    border-top: 1.5px solid var(--osb-gold); border-right: 1.5px solid var(--osb-gold); transform: rotate(45deg);
}
.etb-step__img {
    position: relative; width: 100%; aspect-ratio: 4 / 5;
    background: radial-gradient(circle at 50% 55%, #fffdf8 0, #f3e8d2 62%, rgba(243, 232, 210, 0) 72%);
}
/* 画像の縦横比が工程ごとに違っても枠の大きさ（＝見出しの高さ）がそろうよう、枠の内側に絶対配置して収める */
.etb-step__img img {
    position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(60, 40, 20, .25));
}
/* 原画（1枚目）だけは紙ごとの画像のため、紙の白を乗算で背景に溶かし、紙の縁をぼかして消す（四角く浮かないように） */
.etb-step:first-child .etb-step__img img {
    mix-blend-mode: multiply; filter: none;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.etb-step__num { margin-top: 8px; color: var(--osb-red); font-family: var(--osb-garamond); font-size: 13px; letter-spacing: .16em; }
.etb-step__num span { font-size: 22px; font-weight: 600; }
.etb-step__ttl { margin-top: 2px; color: var(--osb-green); font-size: clamp(16px, 1.6vw, 19px); font-weight: 400; line-height: 1.5; letter-spacing: .1em; -webkit-text-stroke: .3px currentColor; }
.etb-step__text { margin-top: 8px; color: #4a3f37; font-size: 13.5px; line-height: 1.85; text-align: left; }
.etb-story__note { margin-top: 18px; text-align: right; }

/* 仕上がりと縁起：深緑の帯に、朱の背景の完成写真を置いて目を引く */
.etb-craft { padding-block: clamp(48px, 6vw, 80px); color: #fff; background: var(--osb-green) linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .18)); }
.etb-craft__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.etb-craft__photo img { width: 100%; border-radius: 6px; outline: 1px solid rgba(233, 213, 166, .8); outline-offset: -10px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); }
.etb-craft__eyebrow { color: var(--osb-gold-pale); font-size: 14px; letter-spacing: .2em; }
.etb-craft__ttl { margin-top: 6px; font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.5; letter-spacing: .08em; -webkit-text-stroke: .5px currentColor; }
.etb-craft__ttl span { display: block; }
.etb-craft__text { margin-top: 14px; font-size: clamp(14px, 1.3vw, 15.5px); line-height: 2; color: rgba(255, 255, 255, .92); }
.etb-engi { display: grid; gap: 10px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(233, 213, 166, .35); }
.etb-engi div { padding-left: 12px; border-left: 2px solid var(--osb-gold); }
.etb-engi dt { color: var(--osb-gold-pale); font-size: 14.5px; letter-spacing: .1em; }
.etb-engi dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .88); }

/* 「※写真はイメージです。」（2026-10-25 ユーザー依頼）。ファーストビューの写真のすぐ下に右寄せで出す */
/* 背景の羊・雲の絵に重なっても読めるよう、生成りを薄く敷く */
.etb-photo-note { width: fit-content; margin: 10px 0 0 auto; padding: 0 8px; background: rgba(248, 242, 230, .88); }
/* 「仕上がりと縁起」は深緑の帯なので、生成りは敷かず淡い色の文字にする */
.etb-craft .etb-photo-note { padding: 0; color: rgba(255, 255, 255, .72); background: none; }

/* カードのサイズごとのおすすめ文 */
.etb-item__desc { color: #4a3f37; font-size: 13px; line-height: 1.8; }

/* ---------- 2026-10-24 改訂：50〜70代男性向けに、ブランドと品質を前に出す ---------- */
/* 文字を全体に一回り大きくする（このページだけ。お歳暮ページは変えない） */
.osb--etb { font-size: 16px; }
.osb--etb .osb-note { font-size: 13.5px; }
.osb--etb .osb-btn { min-height: 50px; font-size: 15px; }
.osb--etb .osb-eto__spec { font-size: 16px; }
.osb--etb .osb-faq summary { font-size: 15.5px; }
.osb--etb .osb-faq details p { font-size: 15px; }
.osb--etb .etb-step__text, .osb--etb .etb-point__text { font-size: 15px; }
.osb--etb .etb-craft__text { font-size: 16px; }
.osb--etb .etb-engi dd { font-size: 15px; }
.osb--etb .etb-item__desc { font-size: 14.5px; }

/* ファーストビュー：ブランドの組み合わせの札、キャッチ、信頼の手がかり、電話番号 */
.etb-hero__label { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 0; background: none; border: 0; }
.etb-hero__label span { padding: 3px 12px; color: var(--osb-red); font-size: 13.5px; letter-spacing: .12em; background: rgba(255, 253, 248, .9); border: 1px solid currentColor; }
.etb-hero__label span:first-child { color: #fff; background: var(--osb-red); border-color: var(--osb-red); }
.etb-hero__catch { margin-top: clamp(12px, 1.6vw, 18px); color: var(--osb-ink); font-size: clamp(19px, 2.1vw, 26px); line-height: 1.6; letter-spacing: .1em; -webkit-text-stroke: .4px currentColor; }
.etb-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.etb-badges li {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    color: var(--osb-green); font-size: 14px; letter-spacing: .06em; background: rgba(255, 253, 248, .92); border: 1px solid var(--osb-gold); border-radius: 2px;
}
/* 札の頭に小さな金の菱（目印） */
.etb-badges li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--osb-gold); transform: rotate(45deg); }
.etb-hero__tel { margin-top: 12px; font-size: 15px; }
/* 電話番号と受付時間はひとかたまりにして、番号の途中や時間の途中で折り返さない */
.etb-tel { display: inline-block; white-space: nowrap; }
.etb-hero__tel a { color: var(--osb-red); font-family: var(--osb-garamond); font-size: 22px; font-weight: 600; letter-spacing: .03em; text-decoration: none; }

/* 信楽焼というブランド：見出しと説明の下に、3つの事実を大きな文字で並べる */
.etb-brand { padding-bottom: clamp(32px, 4vw, 48px); }
.etb-brand__head { max-width: 760px; margin-inline: auto; text-align: center; }
.etb-brand__eyebrow { color: var(--osb-gold); font-size: 14px; letter-spacing: .24em; }
.etb-brand__ttl { margin-top: 6px; color: var(--osb-green); font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; line-height: 1.45; letter-spacing: .1em; -webkit-text-stroke: .6px currentColor; }
.etb-brand__ttl span { display: block; }
.etb-brand__ttl span:last-child { color: var(--osb-red); }
/* 2026-10-27 説明文を一言のコピーにしたので、折り返すときは行の長さをそろえ、最後の1〜2文字だけが次の行に落ちないようにする
   （text-wrap: balance に対応しないブラウザでは普通の折り返しになるだけ） */
.etb-brand__text, .etb-fact__text, .etb-point__text, .etb-step__text, .etb-scene__text, .etb-sake__steps p, .etb-engi dd { text-wrap: balance; }
/* 2026-10-27 本文を1行のコピーにしたので、見出しと同じく中央に置く */
.etb-brand__text { margin-top: 16px; font-size: clamp(15px, 1.4vw, 17px); line-height: 2.05; }
/* 2026-10-28 本文の下の画像（透明の切り抜き）。見出しの幅より狭くし、中央に置く */
.etb-brand__photo { max-width: 560px; margin: clamp(12px, 2vw, 20px) auto 0; }
.etb-brand__photo img { display: block; width: 100%; height: auto; }
.etb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); margin: clamp(28px, 3.4vw, 40px) 0 0; padding: 0; list-style: none; }
.etb-fact {
    padding: 22px clamp(14px, 2vw, 24px); text-align: center;
    background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-top: 3px solid var(--osb-red); border-radius: 4px;
}
.etb-fact__big { color: var(--osb-red); font-size: clamp(26px, 3vw, 34px); line-height: 1.3; letter-spacing: .1em; -webkit-text-stroke: .6px currentColor; }
.etb-fact__small { margin-top: 4px; color: var(--osb-green); font-size: 14px; letter-spacing: .08em; }
/* 2026-10-27 文を一言にしたので中央寄せ（左寄せだと短い文が片側に寄って見える） */
.etb-fact__text { margin-top: 10px; color: #4a3f37; font-size: 14.5px; line-height: 1.85; }

/* 3つのこだわり：番号を漢数字（壱・弐・参）にし、器・中身・仕立ての札を添える */
.etb-point__num { width: 40px; height: 40px; top: -20px; font-family: var(--osb-mincho); font-size: 19px; }
.etb-point__label { margin-top: 4px; color: var(--osb-gold); font-size: 13.5px; letter-spacing: .3em; }
.etb-point__ttl { margin-top: 4px; }
/* 見出しは「、」「・」の位置でだけ改行させる（「ご／挨拶」のような語の途中で折り返さない） */
.etb-point__ttl, .etb-scene__ttl, .etb-brand__ttl, .etb-cta__ttl { word-break: keep-all; overflow-wrap: anywhere; }

/* こんな方に：左に紅の罫を引いたカードを3つ */
.etb-scenes { padding-top: clamp(24px, 3vw, 40px); }
.etb-scene-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); margin: 0; padding: 0; list-style: none; }
.etb-scene { padding: 20px clamp(16px, 2vw, 24px); background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-left: 4px solid var(--osb-red); border-radius: 4px; }
.etb-scene__ttl { color: var(--osb-green); font-size: clamp(17px, 1.7vw, 19px); font-weight: 400; line-height: 1.55; letter-spacing: .06em; -webkit-text-stroke: .3px currentColor; }
.etb-scene__text { margin-top: 10px; color: #4a3f37; font-size: 15px; line-height: 1.9; }

/* 途中のご注文の誘導：紅の帯に金のボタン */
.etb-cta { padding-block: clamp(32px, 4vw, 48px); color: #fff; background: linear-gradient(180deg, #a3161c, var(--osb-red-deep)); }
.etb-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.etb-cta__ttl { font-size: clamp(20px, 2.4vw, 27px); font-weight: 400; line-height: 1.6; letter-spacing: .08em; -webkit-text-stroke: .4px currentColor; }
.etb-cta__ttl span { display: block; }
.etb-cta__text { margin-top: 8px; color: var(--osb-gold-pale); font-size: 15px; }
.etb-cta__text a { color: #fff; font-family: var(--osb-garamond); font-size: 22px; font-weight: 600; text-decoration: none; }

/* 中身の焼酎「赤鶴」（2026-10-24 追加）：左に背景透明の瓶のアニメーション、右に説明とつくりの3段、下に味わいと表示 */
/* 2026-10-27 瓶の動画をやめ、見出し → 木樽蒸留器の写真（横いっぱい）→ 説明｜つくりの3段 → 味わいと表示 の順にした */
.etb-sake__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px) clamp(20px, 3.4vw, 56px); align-items: start; max-width: 1080px; }
.etb-sake__head, .etb-sake__photo { grid-column: 1 / -1; }
.etb-sake__head { text-align: center; }
.etb-sake__photo { margin: 0; }
.etb-sake__photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 40px -26px rgba(40, 20, 0, .55); }
.etb-sake__photo figcaption { margin-top: 8px; color: var(--osb-sub); font-size: 13.5px; letter-spacing: .06em; text-align: right; }
.etb-sake__body .etb-sake__text:first-child { margin-top: 0; }
.etb-sake__body .etb-sake__steps { margin-top: 0; }
/* 瓶の後ろに淡い金の光を置き、和紙の上で瓶が浮かないようにする */
.etb-sake__media { margin: 0; padding: 10px 0 0; text-align: center; background: radial-gradient(ellipse 60% 48% at 50% 46%, rgba(233, 213, 166, .55), rgba(233, 213, 166, 0) 70%); }
.etb-sake__media img, .etb-sake__media video { display: block; width: auto; max-width: 100%; height: min(520px, 62vw); margin-inline: auto; object-fit: contain; }
.etb-sake__eyebrow { color: var(--osb-gold); font-size: 14px; letter-spacing: .24em; }
.etb-sake__ttl { margin-top: 6px; color: var(--osb-green); font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.5; letter-spacing: .08em; -webkit-text-stroke: .5px currentColor; word-break: keep-all; overflow-wrap: anywhere; }
.etb-sake__ttl span { display: block; }
.etb-sake__ttl span:last-child { color: var(--osb-red); }
.etb-sake__name { display: inline-block; margin-top: 12px; padding: 3px 14px; color: #fff; background: var(--osb-green); font-size: 15px; letter-spacing: .1em; border-radius: 2px; }
.etb-sake__text { margin-top: 14px; font-size: 16px; line-height: 2; }
/* つくりの3段：番号付きで縦に並べ、金の縦罫でつなぐ */
.etb-sake__steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: etb-sake; }
.etb-sake__steps li { position: relative; padding: 0 0 18px 52px; counter-increment: etb-sake; }
.etb-sake__steps li::before {
    content: counter(etb-sake); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px;
    color: #fff; background: var(--osb-red); font-family: var(--osb-garamond); font-size: 18px; border-radius: 50%;
}
.etb-sake__steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; border-left: 1.5px solid var(--osb-gold); }
.etb-sake__steps h3 { color: var(--osb-green); font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: .08em; -webkit-text-stroke: .3px currentColor; }
.etb-sake__steps p { margin-top: 4px; color: #4a3f37; font-size: 15px; line-height: 1.9; }
/* 味わい・飲み方と表示：2列のカード */
.etb-sake__foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: start; }
.etb-taste, .etb-spec { margin: 0; background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-top: 3px solid var(--osb-gold); border-radius: 4px; }
.etb-taste { padding: 8px 22px; }
.etb-taste div { padding: 12px 0; }
.etb-taste div + div { border-top: 1px dashed var(--osb-line); }
.etb-taste dt { color: var(--osb-red); font-size: 15px; letter-spacing: .12em; }
.etb-taste dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.85; }
.etb-spec { width: 100%; border-collapse: separate; border-spacing: 0; padding: 8px 18px 12px; }
.etb-spec caption { padding: 0 0 6px; color: var(--osb-green); font-size: 15px; letter-spacing: .12em; text-align: left; caption-side: top; }
.etb-spec th, .etb-spec td { padding: 9px 0; font-size: 15px; line-height: 1.6; text-align: left; vertical-align: top; border-top: 1px dashed var(--osb-line); }
.etb-spec th { width: 7.5em; padding-right: 10px; color: var(--osb-sub); font-weight: 400; white-space: nowrap; }
.etb-sake__note { grid-column: 1 / -1; }

/* 飾った場面の写真（2026-10-27。背景は生成・羊は実写の合成） */
.etb-scenes__photo { max-width: 960px; margin: 0 auto clamp(20px, 3vw, 32px); }
.etb-scenes__photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 40px -26px rgba(40, 20, 0, .55); }
.etb-scenes__photo figcaption { margin-top: 8px; text-align: right; }

/* 商品概要の写真（大きさの比較・セットの中身）。表の上に2枚並べる */
/* 写真が表より目立たないよう、高さを 220px までに抑える（台座の写真は元が小さく、大きく伸ばすとぼやけるため） */
/* 2026-10-27 写真の下（表との間）が詰まって見えるとの指摘で、下の余白を 10px → clamp(28px〜44px) に広げた */
.etb-outline__photos { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; gap: 14px 20px; max-width: 680px; margin: 8px auto clamp(28px, 3.5vw, 44px); }
.etb-outline__photo { margin: 0; text-align: center; }
.etb-outline__photo img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; }
.etb-outline__photo figcaption { margin-top: 6px; color: var(--osb-sub); font-size: 13.5px; letter-spacing: .08em; }

/* 商品概要（2026-10-27）。赤鶴の表示（.etb-spec）と同じ生成りの紙・金の上線で、900ml と 1800ml を横に並べて比べられるようにする */
.etb-outline { max-width: 860px; margin: 28px auto 0; padding: 10px 22px 14px; background: rgba(255, 253, 248, .96); border: 1px solid var(--osb-line); border-top: 3px solid var(--osb-gold); border-radius: 4px; }
.etb-outline__table { width: 100%; border-collapse: collapse; }
.etb-outline__ttl { padding: 4px 0 10px; color: var(--osb-green); font-size: clamp(17px, 1.8vw, 20px); letter-spacing: .14em; text-align: center; -webkit-text-stroke: .3px currentColor; }
/* 表の caption は読み上げ用（画面では上の .etb-outline__ttl を見せる） */
.etb-outline__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etb-outline__table th, .etb-outline__table td { padding: 11px 10px; font-size: 15px; line-height: 1.7; text-align: left; vertical-align: top; border-top: 1px dashed var(--osb-line); }
/* 列見出し（900ml・1800ml）は朱の文字で中央に置き、下に実線を引いて表の頭と分かるようにする */
.etb-outline__table thead th, .etb-outline__table thead td { padding-block: 4px 8px; color: var(--osb-red); font-size: 16px; letter-spacing: .1em; text-align: center; border-top: 0; border-bottom: 1px solid var(--osb-gold); }
.etb-outline__table tbody tr:first-child > * { border-top: 0; }
.etb-outline__table tbody th { width: 9em; padding-left: 0; color: var(--osb-sub); font-weight: 400; white-space: nowrap; }
/* 1行＝1項目（全高・幅・奥行き、内容物の各品）で改行する */
.etb-outline__table td span { display: block; }

/* 900ml・1800ml の帯は、ファーストビューと同じ背景が続かないよう和紙のままにする */
.osb--etb .osb-eto { background: none; }

/* お歳暮ページへの誘導。上の注意書きとの間が間延びしないよう、上の余白を詰める */
.etb-gift-sec { padding-top: clamp(24px, 3vw, 40px); }
.etb-gift { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.etb-gift__ttl { color: var(--osb-green); font-size: clamp(19px, 2.2vw, 25px); font-weight: 400; line-height: 1.6; letter-spacing: .1em; -webkit-text-stroke: .3px currentColor; }

/* ===================================================================
 * タブレット以下
 * =================================================================== */
@media (max-width: 960px) {
    .osb-feature__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
    .osb-feature__tag { display: none; }
    .osb-services { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .osb-service__item { grid-template-columns: 120px minmax(0, 1fr); }
    .osb-card { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
}

/* ===================================================================
 * スマートフォン
 * =================================================================== */
@media (max-width: 699px) {
    .osb { font-size: 14px; background-size: 600px auto; }

    /* ファーストビュー：文字→写真の縦積み。背景は梅と和紙のある左側を見せ、下は卓の色でつなぐ */
    /* 見出し「一年の感謝を、」が背景の山・松に重なって読みづらいため、梅の枝の下（約110px）から生成りをかぶせ、
       見出しの位置（160px〜）では背景の絵がほぼ見えないようにする（梅と札は見せたまま） */
    .osb-hero {
        background:
            linear-gradient(180deg, rgba(244, 236, 220, 0) 0, rgba(244, 236, 220, 0) 100px, rgba(244, 236, 220, .94) 160px, #efe2c9 calc(100vw + 40px)),
            url("../images/oseibo/hero_bg.webp") no-repeat left top / 240% auto,
            #efe2c9;
    }
    .osb-hero__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 0 60px; gap: 26px; }
    /* 梅の枝と右上の札より下から文字を始める */
    .osb-hero__copy { padding: 170px 0 0; }
    /* 生成りの境目にかかっても文字の輪郭が背景に溶けないよう、生成りの淡い光彩を付ける */
    .osb-hero__ttl, .osb-hero__h1 { text-shadow: 0 0 6px rgba(248, 242, 230, .95), 0 0 2px rgba(248, 242, 230, .95); }
    .osb-hero__h1 { font-size: 13px; letter-spacing: .06em; }
    .osb-hero__ttl span { font-size: 27px; }
    .osb-hero__ttl em { font-size: 32px; }
    .osb-hero__copy .osb-btn { width: 100%; }
    .osb-hero__term strong { font-size: 20px; }
    .osb-hero__photo { width: min(72%, 300px); }
    /* 見出しは途中で折り返さないよう、小さくして1行に収める */
    .osb-h2 { font-size: 20px; letter-spacing: .06em; }
    .osb-h2--knot { font-size: 19px; }
    .osb-hero__tags { top: 14px; right: -6px; gap: 6px; }
    .osb-hero__tags span { padding: 10px 6px 14px; font-size: 13px; }
    .osb-hero__tags span:last-child { margin-top: 24px; }

    /* スマホは文章の下に、贈答品の写真を帯状に見せる（画像を横 260%に広げ、右下に寄せる） */
    /* 画像は横 260%（高さ約 370px）で下に寄せる。ギフト箱の上端が本文に重ならないよう、本文の下に画像の高さ以上（390px）空け、
       画像の上端（箱より上の部屋の背景）だけを生成りでぼかしてつなぐ */
    .osb-about { display: block; min-height: 0; padding-bottom: 390px; background-size: 260% auto; background-position: 70% bottom; }
    .osb-about::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 239, 225, .97) 0, rgba(246, 239, 225, .97) calc(100% - 380px), rgba(246, 239, 225, 0) calc(100% - 330px)); }
    .osb-about .osb-wrap { position: relative; }

    .osb-feature__inner { grid-template-columns: 1fr; }
    .osb-feature__photo { order: -1; width: min(66%, 280px); }
    .osb-buy .osb-btn { width: 100%; }

    .osb-cards, .osb-eto__cards { grid-template-columns: 1fr; }
    .osb-card { grid-template-columns: minmax(0, 1fr) 128px; }
    .osb-card__img img { max-height: 180px; }
    .osb-card__foot .osb-btn { max-width: none; flex-basis: 100%; }
    .osb-eto__lead { flex-direction: column; gap: 12px; }
    .osb-eto__text, .osb-eto__term { text-align: center; }
    /* 2行目（25字）の末尾「す。」だけが折り返さないよう、少し小さくして1行に収める */
    .osb-eto__text { font-size: 12.5px; letter-spacing: .02em; }
    .osb-eto { background-size: 220% auto; }
    /* ボタンの文言が2行にならないよう、写真の幅を固定して文字側を広げる */
    .osb-eto__card { grid-template-columns: minmax(0, 1fr) 124px; gap: 14px; }
    .osb-eto__body .osb-btn { padding-inline: 10px; font-size: 12px; letter-spacing: .04em; }

    .osb-faq summary { font-size: 13.5px; }
    .osb-faq details p { padding-left: 20px; }
    /* 飾りは小さくして見出し・カードにかからないようにする */
    .osb-deco--pine-l { width: 110px; top: 10px; opacity: .85; }
    .osb-deco--ume-r { width: 130px; opacity: .85; }
    .osb-deco--pine-faq, .osb-deco--ume-faq { width: 110px; opacity: .7; }

    /* 文字の下に注ぐ場面が来るため、上から深緑をかぶせて読みやすくする */
    .osb-cta { background-position: 78% center; box-shadow: inset 0 0 0 2000px rgba(19, 53, 38, .5); }
    .osb-cta .osb-btn { width: 100%; }
    .osb-cta__ttl { font-size: 18px; letter-spacing: .04em; }
    /* 見出しは wbr・句読点の位置でだけ改行させる */
    .osb-cta__ttl, .osb-contact__ttl { word-break: keep-all; overflow-wrap: anywhere; }

    /* 干支ボトル特設ページ：文字→写真の縦積み。背景は上を生成りでぼかし、右下の羊と梅だけを見せる */
    .etb-hero {
        background:
            linear-gradient(180deg, rgba(248, 242, 230, .9) 0, rgba(248, 242, 230, .8) 60%, rgba(248, 242, 230, .3) 100%),
            url("../images/oseibo/eto_bg.webp") no-repeat 85% bottom / 300% auto,
            var(--osb-ivory);
    }
    /* 2026-10-27 スマホの1画面目（375×667）に商品写真とボタンまで入るよう、札 → 見出し → 写真 → 期限とボタン → キャッチ の順に詰める */
    .etb-hero__inner { grid-template-columns: 1fr; grid-template-areas: "label" "ttl" "photo" "buy" "catch"; min-height: 0; gap: 0; padding-block: 14px 36px; }
    .etb-hero__head { display: contents; }
    .etb-hero__label { grid-area: label; justify-self: start; }
    .etb-hero__label span { padding: 2px 8px; font-size: 11.5px; letter-spacing: .06em; }
    .etb-hero__ttl { grid-area: ttl; margin-top: 8px; }
    .etb-hero__ttl small { font-size: 15px; }
    .etb-hero__ttl em { font-size: 22px; }
    .etb-hero__photo { margin-top: 12px; }
    .etb-hero__buy { margin-top: 8px; }
    .etb-hero__buy .osb-btn { margin-top: 10px; }
    .etb-hero__catch { grid-area: catch; margin-top: 18px; text-align: center; }
    .etb-hero__ttl span { font-size: 40px; }
    .etb-hero__lead { font-size: 14px; }
    .etb-hero__lead span { display: inline; }
    /* 2行目（25字）の末尾「す。」だけが折り返さないよう、お歳暮ページの干支ボトル欄と同じ大きさにして1行に収める */
    .etb-hero__text { font-size: 12.5px; letter-spacing: .02em; }
    .etb-hero__buy .osb-btn { width: 100%; }
    /* 写真の注記は写真の右下に重ね、ボタンが画面下の「こだわり検索」の帯に隠れないよう高さを詰める */
    .etb-hero__photo { position: relative; width: min(66%, 236px); }
    .etb-hero__photo .etb-photo-note { position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 0 6px; font-size: 10.5px; }
    .etb-points { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin-inline: auto; }
    /* 工程は縦に積み、写真を左・文を右に並べる（矢印は下向きにして次の工程へつなぐ） */
    .etb-story__lead span { display: inline; }
    .etb-steps { grid-template-columns: 1fr; gap: 22px; }
    .etb-step { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; text-align: left; }
    .etb-step__img { grid-row: 1 / 4; padding: 6%; }
    .etb-step__num { margin-top: 4px; }
    .etb-step__text { margin-top: 4px; font-size: 13px; }
    .etb-step:not(:last-child)::after { top: auto; bottom: -16px; left: 50px; right: auto; transform: rotate(135deg); }
    .etb-story__note { text-align: left; }
    .etb-craft__inner { grid-template-columns: 1fr; }
    .etb-craft__photo { width: min(88%, 360px); margin-inline: auto; }
    /* 2026-10-24 改訂分：事実・場面は縦に積む。誘導の帯はボタンを横幅いっぱいに */
    .etb-hero__catch { font-size: 18px; letter-spacing: .04em; }
    .etb-badges li { font-size: 13px; padding: 4px 10px; }
    .etb-brand__ttl span { display: inline; }
    .etb-facts, .etb-scene-list { grid-template-columns: 1fr; }
    .etb-cta .osb-btn { width: 100%; }
    /* 赤鶴：瓶 → 説明 → 味わい → 表示 の縦積み。瓶は高さを抑えて文章が早く読めるようにする */
    .etb-sake__inner, .etb-sake__foot { grid-template-columns: 1fr; }
    .etb-sake__media img, .etb-sake__media video { height: 380px; }
    .etb-sake__ttl span { display: inline; }
    .etb-sake__text { font-size: 15px; }
    .etb-sake__steps li { padding-left: 46px; }
    .etb-taste { padding: 6px 16px; }
    .etb-spec { padding: 6px 14px 10px; }
    /* 商品概要：項目名を行の上に出し、900ml・1800ml の2列に横幅をすべて使う（3列では値が細切れに折り返すため） */
    .etb-outline { padding: 8px 10px 10px; }
    .etb-outline__table thead tr, .etb-outline__table tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
    .etb-outline__table thead td { display: none; }
    .etb-outline__table tbody tr { padding: 10px 0; border-top: 1px dashed var(--osb-line); }
    .etb-outline__table tbody tr:first-child { border-top: 0; }
    .etb-outline__table th, .etb-outline__table td { padding: 0; font-size: 13px; letter-spacing: .04em; border-top: 0; }
    .etb-outline__table thead th { padding-bottom: 6px; font-size: 14px; }
    .etb-outline__table tbody th { grid-column: 1 / -1; width: auto; margin-bottom: 4px; font-size: 13px; }
    .etb-outline__table td[colspan] { grid-column: 1 / -1; }
    .etb-outline__photos { gap: 10px; }
    .etb-outline__photo figcaption { font-size: 12px; letter-spacing: .02em; }

    /* 360°ビュー：見出し → 回る写真 → リード文と札 の順（写真を先に見せる） */
    .etb-spin-sec__inner { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "ttl" "spin" "lead" "badges"; gap: 0; }
    .etb-spin-sec__body { display: contents; }
    .etb-spin-sec__eyebrow { grid-area: eyebrow; text-align: center; }
    .etb-spin-sec__ttl { grid-area: ttl; font-size: 22px; text-align: center; }
    .etb-spin { width: min(100%, 360px); margin: 6px auto 0; }
    /* 2026-10-27 リード文を「器は〜／中身は〜」の対のコピーにしたので、スマホでも1行ずつ中央に並べる */
    .etb-spin-sec__lead { grid-area: lead; margin-top: 18px; font-size: 16px; text-align: center; }
    .etb-spin-sec__lead span { display: block; }
    .etb-spin-sec .etb-badges { grid-area: badges; }

    /* 赤鶴の写真の説明は中央に寄せ、「出水酒造の蔵」が途中で折り返さないようにする */
    .etb-sake__photo figcaption { font-size: 12.5px; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
}

/* ===================================================================
 * 干支ボトル特設ページ：PC の広い画面（1400px 以上）（2026-10-25 ユーザー依頼「ワイドモニタで各セクションの文字が小さく読みづらい。枠なども合わせて」）
 * clamp() は画面幅 1100px 前後で上限に達し、ワイドモニタでは文字が小さく枠も 1080px のままになるため、
 * 文字を一回り（約 1.15〜1.2 倍）大きくし、枠の幅・余白・写真・ボタンも合わせて広げる。
 * .osb--etb（干支ボトルのページ）だけに効かせ、お歳暮ページと 1399px 以下の見た目は変えない
 * =================================================================== */
@media (min-width: 1400px) {
    .osb--etb { font-size: 18px; }
    .osb--etb .osb-wrap { width: min(1280px, 100% - 64px); }
    .osb--etb .osb-wrap--narrow { width: min(940px, 100% - 64px); }
    .osb--etb .osb-sec { padding-block: 104px; }
    .osb--etb .osb-note { font-size: 15px; }

    /* ボタン・価格・見出し */
    .osb--etb .osb-btn { min-height: 56px; padding: 12px 30px; font-size: 17px; }
    .osb--etb .osb-btn::after { width: 7px; height: 7px; }
    .osb--etb .osb-btn--lg, .osb--etb .osb-btn--gold { min-width: min(100%, 420px); min-height: 64px; font-size: 19px; }
    .osb--etb .osb-price { font-size: 16px; }
    .osb--etb .osb-price__num { font-size: 40px; }
    .osb--etb .osb-price small { font-size: 14px; }
    .osb--etb .osb-h2 { gap: 26px; margin-bottom: 52px; font-size: 41px; }
    .osb--etb .osb-h2--knot { font-size: 31px; }
    .osb--etb .osb-knot { width: 78px; }

    /* ファーストビュー */
    .osb--etb .etb-hero__inner { min-height: 720px; }
    .osb--etb .etb-hero__label span { padding: 4px 14px; font-size: 16px; }
    .osb--etb .etb-hero__ttl small { font-size: 28px; }
    .osb--etb .etb-hero__ttl span { font-size: 92px; }
    .osb--etb .etb-hero__ttl em { font-size: 40px; }
    .osb--etb .etb-hero__catch { font-size: 30px; }
    .osb--etb .etb-hero__lead { font-size: 21px; }
    .osb--etb .etb-badges { gap: 10px; margin-top: 20px; }
    .osb--etb .etb-badges li { padding: 6px 14px; font-size: 16.5px; }
    .osb--etb .osb-hero__term { margin-top: 24px; padding: 8px 16px; font-size: 16.5px; }
    .osb--etb .osb-hero__term-label { font-size: 15.5px; }
    .osb--etb .osb-hero__term strong { font-size: 29px; }
    .osb--etb .etb-hero__buy .osb-btn { margin-top: 24px; }
    .osb--etb .etb-hero__tel { margin-top: 14px; font-size: 17.5px; }
    .osb--etb .etb-hero__tel a { font-size: 26px; }
    .osb--etb .etb-hero__photo { width: min(100%, 540px); }

    /* 信楽焼というブランド */
    .osb--etb .etb-brand__head { max-width: 900px; }
    .osb--etb .etb-brand__eyebrow { font-size: 16px; }
    .osb--etb .etb-brand__ttl { font-size: 46px; }
    .osb--etb .etb-brand__text { margin-top: 20px; font-size: 19.5px; }
    .osb--etb .etb-facts { gap: 24px; margin-top: 48px; }
    .osb--etb .etb-fact { padding: 28px 30px; }
    .osb--etb .etb-fact__big { font-size: 40px; }
    .osb--etb .etb-fact__small { font-size: 16px; }
    .osb--etb .etb-fact__text { margin-top: 12px; font-size: 17px; }

    /* 3つのこだわり */
    .osb--etb .etb-points { gap: 24px; }
    .osb--etb .etb-point { --px: 28px; padding: 38px var(--px) 30px; }
    .osb--etb .etb-point--photo { padding-top: 0; }
    .osb--etb .etb-point__num { top: -24px; width: 48px; height: 48px; font-size: 22px; }
    .osb--etb .etb-point__label { font-size: 15.5px; }
    .osb--etb .etb-point__ttl { font-size: 23px; }
    .osb--etb .etb-point__text { margin-top: 12px; font-size: 17.5px; }

    /* ひとつの羊ができるまで */
    .osb--etb .etb-story__lead { font-size: 18.5px; }
    .osb--etb .etb-steps { gap: 30px; margin-top: 44px; }
    .osb--etb .etb-step__num { margin-top: 10px; font-size: 15px; }
    .osb--etb .etb-step__num span { font-size: 26px; }
    .osb--etb .etb-step__ttl { font-size: 22px; }
    .osb--etb .etb-step__text { margin-top: 10px; font-size: 17px; }

    /* 仕上がりと縁起（深緑の帯） */
    .osb--etb .etb-craft { padding-block: 96px; }
    .osb--etb .etb-craft__inner { gap: 64px; }
    .osb--etb .etb-craft__eyebrow { font-size: 16px; }
    .osb--etb .etb-craft__ttl { font-size: 42px; }
    .osb--etb .etb-craft__text { margin-top: 16px; font-size: 18.5px; }
    .osb--etb .etb-engi { gap: 12px; margin-top: 26px; padding-top: 22px; }
    .osb--etb .etb-engi dt { font-size: 17px; }
    .osb--etb .etb-engi dd { font-size: 17.5px; }

    /* 中身の焼酎「赤鶴」 */
    .osb--etb .etb-sake__inner { gap: 44px 64px; max-width: 1180px; }
    /* 360°ビュー：写真を一回り大きく、文字も合わせる */
    .osb--etb .etb-spin-sec__inner { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); max-width: 1200px; }
    .osb--etb .etb-spin-sec__ttl { font-size: 42px; }
    .osb--etb .etb-spin-sec__lead { font-size: 18.5px; }
    .osb--etb .etb-spin__hint { font-size: 15.5px; }
    .osb--etb .etb-outline__photos { max-width: 800px; }
    .osb--etb .etb-outline__photo img { max-height: 260px; }
    .osb--etb .etb-sake__media img, .osb--etb .etb-sake__media video { height: 620px; }
    .osb--etb .etb-sake__eyebrow { font-size: 16px; }
    .osb--etb .etb-sake__ttl { font-size: 42px; }
    .osb--etb .etb-sake__name { margin-top: 14px; padding: 4px 16px; font-size: 17px; }
    .osb--etb .etb-sake__text { margin-top: 16px; font-size: 18.5px; }
    .osb--etb .etb-sake__steps { margin-top: 26px; }
    .osb--etb .etb-sake__steps li { padding: 0 0 22px 60px; }
    .osb--etb .etb-sake__steps li::before { width: 42px; height: 42px; font-size: 21px; }
    .osb--etb .etb-sake__steps li:not(:last-child)::after { left: 20px; top: 46px; }
    .osb--etb .etb-sake__steps h3 { font-size: 21px; }
    .osb--etb .etb-sake__steps p { margin-top: 6px; font-size: 17px; }
    .osb--etb .etb-sake__foot { gap: 28px; }
    .osb--etb .etb-taste { padding: 10px 28px; }
    .osb--etb .etb-taste div { padding: 14px 0; }
    .osb--etb .etb-taste dt { font-size: 17px; }
    .osb--etb .etb-taste dd { font-size: 18px; }
    .osb--etb .etb-spec { padding: 10px 24px 14px; }
    .osb--etb .etb-spec caption { font-size: 17px; }
    .osb--etb .etb-spec th, .osb--etb .etb-spec td { padding: 11px 0; font-size: 17px; }

    /* こんな方に、こんな場面に */
    .osb--etb .etb-scene-list { gap: 24px; }
    .osb--etb .etb-scene { padding: 26px 28px; }
    .osb--etb .etb-scene__ttl { font-size: 22px; }
    .osb--etb .etb-scene__text { margin-top: 12px; font-size: 17.5px; }

    /* 途中のご注文の誘導（紅の帯） */
    .osb--etb .etb-cta { padding-block: 56px; }
    .osb--etb .etb-cta__ttl { font-size: 31px; }
    .osb--etb .etb-cta__text { font-size: 17px; }
    .osb--etb .etb-cta__text a { font-size: 26px; }

    /* 900ml・1800ml のご注文 */
    .osb--etb .osb-eto { padding-block: 84px 96px; }
    .osb--etb .osb-eto__ttl { font-size: 58px; }
    .osb--etb .osb-eto__lead { gap: 24px; margin-top: 18px; }
    .osb--etb .osb-eto__badge { width: 96px; height: 96px; font-size: 16px; }
    .osb--etb .osb-eto__badge span:first-child { font-size: 26px; }
    .osb--etb .osb-eto__term { font-size: 17px; }
    .osb--etb .osb-eto__mto { padding: 3px 12px; font-size: 15.5px; }
    .osb--etb .osb-eto__cards { gap: 28px; margin-top: 44px; }
    .osb--etb .osb-eto__card { gap: 24px; padding: 30px; }
    .osb--etb .osb-eto__body { gap: 12px; }
    .osb--etb .osb-eto__name { font-size: 25px; }
    .osb--etb .osb-eto__spec { font-size: 18px; }
    .osb--etb .etb-item__desc { font-size: 16.5px; }
    .osb--etb .osb-eto__body .osb-btn { font-size: 16px; }
    .osb--etb .osb-eto__notes { max-width: 1080px; margin-top: 20px; }
    /* 商品概要：注意書きと同じ幅に広げ、文字を一回り大きくする */
    .osb--etb .etb-outline { max-width: 1080px; margin-top: 34px; padding: 14px 32px 18px; }
    .osb--etb .etb-outline__ttl { font-size: 23px; }
    .osb--etb .etb-outline__table th, .osb--etb .etb-outline__table td { padding: 13px 14px; font-size: 17.5px; }
    .osb--etb .etb-outline__table thead th { font-size: 19px; }

    /* よくあるご質問 */
    .osb--etb .osb-faq__list { gap: 10px; }
    .osb--etb .osb-faq summary { gap: 16px; padding: 16px 56px 16px 16px; font-size: 18px; }
    .osb--etb .osb-faq summary::after { right: 24px; width: 10px; height: 10px; }
    .osb--etb .osb-faq__q { width: 34px; height: 32px; font-size: 19px; }
    .osb--etb .osb-faq details p { padding: 0 24px 20px 66px; font-size: 17.5px; }

    /* お歳暮ページへ・お電話とFAX */
    .osb--etb .etb-gift { gap: 22px; }
    .osb--etb .etb-gift__ttl { font-size: 29px; }
    .osb--etb .osb-contact { padding-block: 68px; }
    .osb--etb .osb-contact__ttl { font-size: 25px; }
    .osb--etb .osb-contact__nums { margin-top: 24px; }
    .osb--etb .osb-num__label { padding: 3px 10px; font-size: 15px; }
    .osb--etb .osb-num__val { font-size: 43px; }
    .osb--etb .osb-num__note { font-size: 14px; }
    .osb--etb .osb-contact__info { margin-top: 22px; font-size: 15.5px; }
    .osb--etb .osb-contact__age { margin-top: 22px; padding-top: 20px; font-size: 14px; }
}

/* 動きを減らす設定のときは開閉アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
    .osb-btn, .osb-faq summary::after { transition: none; }
}

/* ファーストビューの見出し2行と BONHEUR の写真を、読み込み時に順番にふわっと浮かび上がらせる（2026-10-19 ユーザー依頼）
 * 「動きを減らす」設定の人には動かさず、最初から表示する（no-preference のときだけ適用）
 * fill-mode を both にして、開始前は透明のまま待たせる（遅れて出る要素が一瞬見えてしまうのを防ぐ） */
@media (prefers-reduced-motion: no-preference) {
    .osb-hero__ttl span { animation: osb-fuwa 1.6s cubic-bezier(.22, .61, .36, 1) .2s both; }
    .osb-hero__ttl em   { animation: osb-fuwa 1.6s cubic-bezier(.22, .61, .36, 1) .7s both; }
    .osb-hero__photo    { animation: osb-fuwa-photo 1.8s cubic-bezier(.22, .61, .36, 1) .4s both; }
    /* 初回訪問で年齢確認（.js-age-verification.active）が出ている間は止めておき、
       「はい」で閉じたところから始める（裏で終わってしまわないように）。:has() 非対応のブラウザではそのまま再生される */
    body:has(.js-age-verification.active) :is(.osb-hero__ttl span, .osb-hero__ttl em, .osb-hero__photo) { animation-play-state: paused; }
    /* フォント待ちでページが透明の間（header.php が html に fonts-wait を付ける。最長3秒）も止めておき、見えてから始める */
    html.fonts-wait :is(.osb-hero__ttl span, .osb-hero__ttl em, .osb-hero__photo) { animation-play-state: paused; }

    /* ファーストビューの残り（説明文・申込期間・ボタン・赤い縦札）も、見出しと写真に続けて順に出す（2026-10-21 ユーザー依頼） */
    .osb-hero__tags span:first-child { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1s both; }
    .osb-hero__tags span:last-child  { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.15s both; }
    .osb-hero__lead                  { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.1s both; }
    .osb-hero__term, .osb-closed     { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.3s both; }
    .osb-hero .osb-btn--lg           { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.45s both; }
    body:has(.js-age-verification.active) :is(.osb-hero__tags span, .osb-hero__lead, .osb-hero__term, .osb-closed, .osb-hero .osb-btn--lg) { animation-play-state: paused; }
    html.fonts-wait :is(.osb-hero__tags span, .osb-hero__lead, .osb-hero__term, .osb-closed, .osb-hero .osb-btn--lg) { animation-play-state: paused; }

    /* H1（2026-10-24）はコピーより先に、すっと出す */
    .osb-hero__h1 { animation: osb-fuwa-photo 1.2s cubic-bezier(.22, .61, .36, 1) .05s both; }
    /* 干支ボトル特設ページのファーストビュー（お歳暮ページと同じ順番の考え方：見出し→写真→文→期限→ボタン） */
    .etb-hero__label      { animation: osb-fuwa-photo 1.2s cubic-bezier(.22, .61, .36, 1) .05s both; }
    .etb-hero__ttl small  { animation: osb-fuwa 1.4s cubic-bezier(.22, .61, .36, 1) .15s both; }
    .etb-hero__ttl span   { animation: osb-fuwa 1.6s cubic-bezier(.22, .61, .36, 1) .35s both; }
    .etb-hero__ttl em     { animation: osb-fuwa 1.4s cubic-bezier(.22, .61, .36, 1) .7s both; }
    .etb-hero__photo      { animation: osb-fuwa-photo 1.8s cubic-bezier(.22, .61, .36, 1) .4s both; }
    .etb-hero__lead       { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1s both; }
    .etb-hero__text       { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.1s both; }
    /* 2026-10-24 改訂で足したキャッチ・信頼の札・電話番号 */
    .etb-hero__catch      { animation: osb-fuwa 1.4s cubic-bezier(.22, .61, .36, 1) .85s both; }
    .etb-badges           { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.15s both; }
    .etb-hero__tel        { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.5s both; }
    body:has(.js-age-verification.active) :is(.etb-hero__catch, .etb-badges, .etb-hero__tel) { animation-play-state: paused; }
    html.fonts-wait :is(.etb-hero__catch, .etb-badges, .etb-hero__tel) { animation-play-state: paused; }
    .etb-hero .osb-hero__term, .etb-hero .osb-closed { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.25s both; }
    .etb-hero .osb-btn--lg { animation: osb-fuwa-photo 1.4s cubic-bezier(.22, .61, .36, 1) 1.4s both; }
    /* 年齢確認中・フォント待ちの間は止めておく（お歳暮ページと同じ） */
    body:has(.js-age-verification.active) :is(.osb-hero__h1, .etb-hero__label, .etb-hero__ttl small, .etb-hero__ttl span, .etb-hero__ttl em, .etb-hero__photo, .etb-hero__lead, .etb-hero__text, .etb-hero .osb-hero__term, .etb-hero .osb-closed, .etb-hero .osb-btn--lg) { animation-play-state: paused; }
    html.fonts-wait :is(.osb-hero__h1, .etb-hero__label, .etb-hero__ttl small, .etb-hero__ttl span, .etb-hero__ttl em, .etb-hero__photo, .etb-hero__lead, .etb-hero__text, .etb-hero .osb-hero__term, .etb-hero .osb-closed, .etb-hero .osb-btn--lg) { animation-play-state: paused; }

    /* 2つ目以降のセクションは、画面に入ったところでふわっと出す（_oseibo.php 末尾のスクリプトが .osb-rv と is-in を付ける）
     * .osb に is-rv が付いたときだけ隠すので、スクリプトが動かない環境では最初から全部見える
     * 遅らせる秒数（--osb-rv-delay）は、横に並ぶカードを少しずつずらすためにスクリプトが入れる */
    .osb.is-rv .osb-rv {
        opacity: 0; transform: translateY(28px);
        transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1);
        transition-delay: var(--osb-rv-delay, 0s);
    }
    .osb.is-rv .osb-rv.is-in { opacity: 1; transform: none; }
}
/* 印刷では隠したままにしない */
@media print {
    .osb.is-rv .osb-rv { opacity: 1; transform: none; }
}
@keyframes osb-fuwa {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}
/* 写真はぼかさず、少し下から浮かせるだけにする（瓶のラベルが崩れて見えないように） */
@keyframes osb-fuwa-photo {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}