/* ==================================================================
   アンバーワイン 第 2 版(/guide/amber-wine-v2/ サンプル、2026-09-29)。main.amber の中だけ。
   main の class は pdx-apple aud gd info amber。style.css の main.info / main.gd.info の決まりをそのまま使う:
     ボックスは枠線なし・3 段の影(--box-shadow)。白い帯の上は薄灰、灰の帯の上は白(--box-bg)。中の小さな面は反対の色(--box-inner)。
     ボタンは白地・黒枠(btn--outline、他ページへは btn--nav でホバー青)。
   ここで足すもの: 大きな h1 のヒーロー / 画像の仮枠(.amb-ph)/ 見出しとリードの大きさ / 節ごとの見せ場の部品 / 黒い帯(07)。
   動きは CSS の scroll-driven だけ。固定(sticky)なし。「動きを減らす」設定と非対応ブラウザでは静止して全部見える。
   ================================================================== */

main.amber {
  --amb-1: #fdf0d5; --amb-2: #f9d58a; --amb-3: #f5ac3c; --amb-4: #ef8a17; --amb-5: #e0620a;
  --amb-ink: #b84e00;            /* 小さな文字の強調(深いオレンジ。白 5.09:1・薄灰 4.67:1) */
  --amb-hi: #e8650a;             /* 大きな文字の単色(グラデーションが使えないとき) */
  --amb-glow: linear-gradient(135deg, #f9b233 0%, #f39016 38%, #ec6f0e 72%, #dc560a 100%); /* 大きな文字のグラデーション */
  --amb-grad: linear-gradient(120deg, #f9b233 0%, #f08a12 50%, #e2620a 100%);
}

/* ---------- 共通: 節の見出し・リード・本文 ---------- */
main.amber .sec-no { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--amb-ink); margin-bottom: 14px; }
main.amber h2.text-heading-sm { font-size: clamp(34px, 5.4vw, 72px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; }
main.amber .amb-head { max-width: 980px; margin-bottom: clamp(40px, 6vw, 72px); }
main.amber .amb-head p.lede { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.6; max-width: 34em; margin-top: 22px; color: var(--color-deep-gray); text-wrap: pretty; }
main.amber .amb-head--center { text-align: center; margin-left: auto; margin-right: auto; }
main.amber .amb-head--center p.lede { margin-left: auto; margin-right: auto; text-align: center; }
main.amber .band { padding: clamp(80px, 11vw, 150px) 0; }
main.amber .amb-h3 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: clamp(64px, 8vw, 104px) 0 22px; text-wrap: balance; }
main.amber .amb-h3--first { margin-top: 0; }
main.amber .amb-h3--center { text-align: center; }
main.amber .amb-p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.85; color: var(--color-deep-gray); max-width: 36em; margin: 0 0 28px; }
main.amber .amb-micro { margin-top: 18px; max-width: 760px; }
main.amber .info-actions { margin-top: 40px; }
main.amber .amb-actions--center { justify-content: center; }
main.amber .text-title, main.amber h3 { text-wrap: balance; }

/* 大きな数字(8000 年・9 つ・12〜14℃・3〜5 日・全量 / 4〜6%) */
main.amber .amb-big { font-family: var(--font-display); font-weight: 800; letter-spacing: -.05em; line-height: .95; color: var(--amb-hi); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(64px, 11vw, 150px); }
main.amber .amb-big small { font-size: .3em; font-weight: 700; letter-spacing: 0; margin-left: .08em; color: var(--color-primary-ink); }
main.amber .amb-big--center { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); font-size: clamp(96px, 20vw, 260px); }
main.amber .amb-num { display: inline-block; transform-origin: 50% 100%; }

/* ---------- ヒーロー: サイト最大級の h1(字間を詰める)→ 定義の 2 行 → 最終更新 → チップ → 全幅の画像 ---------- */
main.amber .amb-hero { padding-bottom: 0; overflow: hidden; }
main.amber .amb-hero__in { text-align: center; margin: clamp(40px, 7vw, 88px) auto 0; max-width: 1040px; }
main.amber .amb-eyebrow { font-size: clamp(14px, 1.4vw, 17px); font-weight: 600; color: var(--amb-ink); letter-spacing: .02em; }
main.amber h1.amb-h1 { font-size: clamp(40px, 9.6vw, 150px) !important; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-top: 18px; word-break: keep-all; overflow-wrap: normal; }
main.amber .amb-def { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 760px; background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: 26px; padding: clamp(20px, 3vw, 30px) clamp(22px, 3.4vw, 40px); }
main.amber .amb-def p { font-size: clamp(17px, 2vw, 23px); line-height: 1.6; color: var(--color-deep-gray); text-wrap: pretty; }
main.amber .amb-def p + p { margin-top: 6px; font-size: clamp(15px, 1.5vw, 18px); }
main.amber .amb-def strong { color: var(--color-primary-ink); font-weight: 700; }
main.amber .amb-hero .info-updated { margin-top: 18px; }
main.amber .amb-chips { justify-content: center; margin-top: 28px; max-width: 980px; margin-left: auto; margin-right: auto; }

/* ---------- 画像の仮枠(.amb-ph)。figure の中に <img> を入れるだけで写真に変わる ---------- */
main.amber .amb-ph { position: relative; margin: 0; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--radius-cards); overflow: hidden; display: grid; place-items: center; isolation: isolate; }
main.amber .amb-ph--amber { background: radial-gradient(120% 90% at 30% 20%, #fbf3e0 0%, #efd9a8 42%, #d8a95c 78%, #b7843f 100%); }
main.amber .amb-ph--gray { background: linear-gradient(160deg, #fafafc 0%, #e8e8ed 100%); }
main.amber .amb-ph--dark { background: radial-gradient(60% 70% at 50% 55%, #b7782c 0%, #6e4415 38%, #22160a 70%, #000 100%); }
main.amber .band--white .amb-ph--gray { background: linear-gradient(160deg, #f5f5f7 0%, #e3e3e8 100%); }
main.amber .amb-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
main.amber .amb-ph:has(> img) { background: var(--color-canvas); }
main.amber .amb-ph--bleed { margin-top: clamp(32px, 5vw, 56px); }
main.amber .container > .amb-ph--bleed { margin-left: calc(-1 * clamp(0px, 2vw, 24px)); margin-right: calc(-1 * clamp(0px, 2vw, 24px)); }
@media (max-width: 599px) { main.amber .amb-ph--bleed { aspect-ratio: 4 / 3; } }

/* 🔍 仮の本文(出典を確かめてから入れる箇所)。目立つ見た目で「仮」と分かるように */

/* ---------- 数字の箱(ヒーローの下の灰の帯) ---------- */
main.amber .amb-facts-band { padding: clamp(56px, 7vw, 88px) 0; }
main.amber .info-facts .fact-value { color: var(--amb-ink); }
main.amber .info-facts .fact-value small { color: var(--color-deep-gray); }

/* ---------- 2 段組み(文と画像) ---------- */
main.amber .amb-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  main.amber .amb-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main.amber .amb-split--regions { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
}

/* ---------- 01: 大きな式と、3 つの要点 ---------- */
main.amber .amb-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: .12em .32em; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 7.6vw, 108px); letter-spacing: -.045em; line-height: 1.05; margin: 0 0 clamp(48px, 7vw, 88px); }
main.amber .amb-eq__op { color: var(--color-mid-gray); font-weight: 300; }
main.amber .amb-eq__a { color: #9a9a58; }
main.amber .amb-eq__b { color: var(--color-primary-ink); }
main.amber .amb-eq__c { background: var(--amb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
main.amber .amb-points { display: grid; gap: 36px; }
main.amber .amb-point h3 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 25px); font-weight: 700; letter-spacing: -.015em; line-height: 1.35; margin-bottom: 10px; }
main.amber .amb-point p { font-size: 16.5px; line-height: 1.85; color: var(--color-deep-gray); max-width: 32em; }
main.amber .amb-point + .amb-point { padding-top: 32px; border-top: 1px solid rgba(0, 0, 0, .08); }

/* ---------- 02: 2 つの名前と「＝」、4 つのグラス ---------- */
main.amber .amb-names { display: grid; gap: 16px; align-items: center; }
@media (min-width: 900px) { main.amber .amb-names { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; } }
main.amber .amb-name { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); padding: clamp(26px, 4vw, 44px); }
main.amber .amb-name__k { font-size: 13px; font-weight: 600; color: var(--color-mid-gray); letter-spacing: .04em; }
main.amber .amb-name__v { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-size: clamp(38px, 5vw, 64px); margin-top: 8px; color: var(--amb-hi); }
main.amber .amb-name:nth-child(3) .amb-name__v { color: #e8590c; }
main.amber .amb-name__v span { font-size: .45em; letter-spacing: 0; margin-left: .1em; color: var(--color-primary-ink); }
main.amber .amb-name__d { margin-top: 14px; font-size: 15.5px; line-height: 1.75; color: var(--color-deep-gray); }
main.amber .amb-names__eq { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); font-weight: 300; color: var(--color-mid-gray); text-align: center; line-height: 1; }
main.amber .amb-glasses { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
main.amber .amb-glass { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: 24px; padding: 28px 20px 22px; text-align: center; }
main.amber .amb-glass svg { display: block; width: 64px; height: 107px; margin: 0 auto 14px; overflow: visible; }
main.amber .amb-glass .bowl { fill: none; stroke: #1d1d1f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
main.amber .amb-glass .liq { transform-box: fill-box; transform-origin: 50% 100%; }
main.amber .amb-glass--w .liq { fill: #ece5b8; }
main.amber .amb-glass--a .liq { fill: #f39a26; }
main.amber .amb-glass--r .liq { fill: #eaa7a3; }
main.amber .amb-glass--k .liq { fill: #6d0f24; }
main.amber .amb-glass__n { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
main.amber .amb-glass.is-key .amb-glass__n { color: var(--amb-ink); }
main.amber .amb-glass dl { margin: 14px 0 0; display: grid; gap: 0; text-align: left; background: var(--box-inner); border-radius: 14px; padding: 6px 14px; }
main.amber .amb-glass dl div { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 8px; padding: 7px 0; }
main.amber .amb-glass dl div + div { border-top: 1px solid rgba(0, 0, 0, .06); }
main.amber .amb-glass dt { font-size: 12px; color: var(--color-mid-gray); line-height: 1.5; }
main.amber .amb-glass dd { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; }
@media (min-width: 900px) { main.amber .amb-glass.is-key { transform: translateY(-12px); box-shadow: var(--box-shadow-up); } }
@media (max-width: 899px) { main.amber .amb-glasses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 380px) { main.amber .amb-glass { padding: 22px 12px 16px; } main.amber .amb-glass dl { padding: 4px 10px; } main.amber .amb-glass dl div { grid-template-columns: 1fr; gap: 0; } }

/* ---------- 03: 縦の年表(左に年、線が伸び、丸が琥珀色に点く) ---------- */
main.amber .amb-time { list-style: none; margin: clamp(48px, 7vw, 88px) auto 0; padding: 0; max-width: 980px; position: relative; }
main.amber .amb-time::before, main.amber .amb-time::after { content: ""; position: absolute; top: 12px; bottom: 12px; left: var(--rail-x, 9px); width: 2px; background: var(--color-hairline); }
main.amber .amb-time::after { background: var(--amb-4); transform-origin: top; }
main.amber .amb-time > li { position: relative; display: grid; gap: 6px 40px; padding: 0 0 48px 44px; }
main.amber .amb-time > li:last-child { padding-bottom: 0; }
main.amber .amb-time > li::before { content: ""; position: absolute; left: calc(var(--rail-x, 9px) - 9px); top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--amb-4); box-shadow: 0 0 0 6px var(--color-paper); z-index: 1; }
main.amber .amb-time__when { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--amb-hi); font-variant-numeric: tabular-nums; }
main.amber .amb-time__body { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: 22px; padding: clamp(20px, 3vw, 30px); }
main.amber .amb-time__body h3 { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
main.amber .amb-time__body p { font-size: 15.5px; line-height: 1.85; color: var(--color-deep-gray); }
@media (min-width: 900px) {
  main.amber .amb-time { --rail-x: 229px; }
  main.amber .amb-time > li { grid-template-columns: 200px minmax(0, 1fr); padding-left: 0; }
  main.amber .amb-time > li > .amb-time__body { margin-left: 30px; }
  main.amber .amb-time__when { text-align: right; padding-top: 2px; }
}

/* ---------- 05: 期間の横棒と、開く 4 枚の手順カード ---------- */
main.amber .amb-period { margin: 0 0 clamp(48px, 6vw, 72px); background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); padding: clamp(22px, 3.6vw, 40px); }
main.amber .amb-period__chart { display: grid; gap: 16px; }
main.amber .amb-period__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 18px; }
main.amber .amb-period__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--color-primary-ink); }
main.amber .amb-period__name small { display: block; font-family: var(--font-text); font-weight: 400; font-size: 12.5px; color: var(--color-mid-gray); margin-top: 2px; }
main.amber .amb-period__scale, main.amber .amb-period__track { display: grid; grid-template-columns: 1fr 2fr .8fr; }
main.amber .amb-period__scale span { font-size: 13px; font-weight: 600; color: var(--color-deep-gray); padding: 0 8px 8px; border-left: 1px solid rgba(0, 0, 0, .12); line-height: 1.3; }
main.amber .amb-period__scale small { display: block; font-weight: 400; font-size: 12px; color: var(--color-mid-gray); }
main.amber .amb-period__track { position: relative; height: 26px; border-radius: 99px; background: var(--box-inner); overflow: hidden; }
main.amber .amb-period__none { grid-column: 1 / -1; align-self: center; padding-left: 12px; font-size: 12.5px; color: var(--color-mid-gray); }
main.amber .amb-bar { display: block; height: 100%; border-radius: 99px; transform-origin: 0 50%; }
main.amber .amb-bar--red { grid-column: 1 / 2; background: #7a1030; }
main.amber .amb-bar--light { grid-column: 1 / 2; width: 55%; background: var(--amb-2); }
main.amber .amb-bar--amber { grid-column: 1 / 3; background: linear-gradient(90deg, var(--amb-3), var(--amb-4) 70%, var(--amb-5)); }
main.amber .amb-period__row--key .amb-period__name { color: var(--amb-ink); }
main.amber .amb-period__cap { margin-top: 18px; font-size: var(--fs-small); line-height: 1.7; color: var(--color-mid-gray); }
@media (max-width: 640px) {
  main.amber .amb-period__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  main.amber .amb-period__row--head .amb-period__name { display: none; }
  main.amber .amb-period__scale span { padding: 0 5px 6px; font-size: 12px; }
  main.amber .amb-period__scale small { font-size: 11px; }
}
main.amber .amb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
main.amber .amb-steps > li { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: 26px; padding: 28px 24px 30px; }
main.amber .amb-steps__no { font-family: var(--font-display); font-size: clamp(44px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--amb-hi); margin-bottom: 20px; }
main.amber .amb-steps h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
main.amber .amb-steps p:not(.amb-steps__no) { font-size: 15px; line-height: 1.75; color: var(--color-deep-gray); }
main.amber .amb-steps strong { display: block; color: var(--color-primary-ink); font-weight: 600; margin-bottom: 4px; }
@media (max-width: 1099px) { main.amber .amb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { main.amber .amb-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; } main.amber .amb-steps > li { padding: 24px 22px 26px; } }

/* ---------- 06: 写真つきの 2 枚と、果皮の量の比較 ---------- */
main.amber .amb-duo-cards { display: grid; gap: 24px; }
@media (min-width: 900px) { main.amber .amb-duo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main.amber .amb-style { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); overflow: hidden; display: flex; flex-direction: column; }
main.amber .amb-style > .amb-ph { border-radius: 0; }
main.amber .amb-style__txt { padding: clamp(24px, 3.4vw, 36px); }
main.amber .amb-style__k { font-size: 13px; font-weight: 600; color: var(--amb-ink); letter-spacing: .04em; }
main.amber .amb-style h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin: 6px 0 4px; }
main.amber .amb-dl { margin: 14px 0 0; display: grid; }
main.amber .amb-dl > div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
main.amber .amb-dl dt { font-size: 13px; color: var(--color-mid-gray); line-height: 1.6; }
main.amber .amb-dl dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-primary-ink); }

/* ---------- 07: 黒い帯(琥珀色の画像を見せる場面)。文字は白、ボタンは白地・黒枠のまま ---------- */
main.amber .amb-dark { background: #000; color: #f5f5f7; }
main.amber .amb-dark .sec-no { color: #e2b56a; }
main.amber .amb-dark h2.text-heading-sm { color: #fff; }
main.amber .amb-dark .amb-head p.lede { color: rgba(255, 255, 255, .78); }
main.amber .amb-dark .amb-h3 { color: #fff; }
main.amber .amb-aromas { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .5em; max-width: 1000px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; font-size: clamp(38px, 6.4vw, 88px); }
main.amber .amb-aromas li { background: linear-gradient(135deg, #fbe3a2 0%, #eeb443 50%, #e0901f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
main.amber .amb-aromas li:nth-child(n+4) { font-size: .62em; align-self: center; background: none; color: rgba(255, 255, 255, .72); }
main.amber .amb-dark__p { max-width: 34em; margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.8; color: rgba(255, 255, 255, .78); }
main.amber .amb-taste > .band--white { padding-top: clamp(80px, 10vw, 130px); }

/* 07 味わいのバー(辛口白と、クヴェヴリで醸したものを 2 本で比べる) */
/* 07 醸す期間と色: 4 つの色の帯(ワインそのものの色を面に) */
main.amber .amb-shades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
main.amber .amb-shade { border-radius: 24px; padding: 26px 22px 24px; min-height: 220px; display: flex; flex-direction: column; box-shadow: var(--box-shadow); }
main.amber .amb-shade--1 { background: #fbf3d6; }
main.amber .amb-shade--2 { background: #f9d58a; }
main.amber .amb-shade--3 { background: #f5ac3c; }
main.amber .amb-shade--4 { background: #b84e00; color: #fff; }
main.amber .amb-shade__t { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
main.amber .amb-shade__n { margin-top: auto; padding-top: 28px; font-weight: 700; font-size: 17px; }
main.amber .amb-shade__d { margin-top: 4px; font-size: 14px; line-height: 1.6; opacity: .82; }
@media (max-width: 899px) { main.amber .amb-shades { grid-template-columns: repeat(2, minmax(0, 1fr)); } main.amber .amb-shade { min-height: 180px; } }
@media (max-width: 420px) { main.amber .amb-shade { padding: 20px 16px; } }

/* ---------- 08: 8 枚の品種カード ---------- */
main.amber .amb-grapes { list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
main.amber .amb-grapes .grape-card { height: 100%; padding: 26px 24px 26px; }
main.amber .amb-grapes .grape-color { width: 34px; height: 38px; margin-bottom: 10px; }
main.amber .amb-grapes .grape-color[data-color="white"] .b { fill: #d6b25a; }
main.amber .amb-grapes__rg { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--amb-ink); }
main.amber .amb-grapes .grape-name { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 2px 0 0; }
main.amber .amb-grapes .grape-name::after { content: " →"; color: var(--color-electric-blue); font-weight: 600; }
main.amber .amb-grapes .grape-latin { font-size: 13px; color: var(--color-mid-gray); }
main.amber .amb-grapes .grape-meta { font-size: 14.5px; line-height: 1.7; color: var(--color-deep-gray); margin-top: 6px; }
@media (max-width: 1099px) { main.amber .amb-grapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { main.amber .amb-grapes { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---------- 09: 3 つの産地と、大きな「9」 ---------- */
main.amber .amb-regions { display: grid; gap: 16px; }
main.amber .amb-region { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: 24px; padding: 24px 26px; display: grid; gap: 6px; justify-items: start; }
main.amber .amb-region__k { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--amb-ink); }
main.amber .amb-region h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
main.amber .amb-region p:not(.amb-region__k) { font-size: 15.5px; line-height: 1.75; color: var(--color-deep-gray); }
main.amber .amb-region .btn { margin-top: 10px; padding: 9px 16px; font-size: 14px; }
main.amber .amb-pdo-head { display: grid; gap: 8px 40px; align-items: center; margin: clamp(72px, 9vw, 120px) 0 28px; scroll-margin-top: 72px; }
main.amber .amb-pdo-head .amb-p { margin-bottom: 0; }
@media (min-width: 900px) { main.amber .amb-pdo-head { grid-template-columns: auto minmax(0, 1fr); } }
main.amber .amb-table td a { color: var(--color-link-blue); }
@media (min-width: 1000px) { main.amber .amb-table .data-table th:last-child, main.amber .amb-table .data-table td:last-child { white-space: nowrap; } }

/* ---------- 10: ベントーのタイル ---------- */
main.amber .amb-bento { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
main.amber .amb-tile { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px; }
main.amber .amb-tile h3 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
main.amber .amb-tile p { font-size: 15.5px; line-height: 1.8; color: var(--color-deep-gray); }
main.amber .amb-tile .amb-big { font-size: clamp(64px, 8vw, 112px); color: var(--amb-hi); margin: 6px 0 4px; }
main.amber .amb-tile--temp { grid-column: span 2; }
main.amber .amb-bento > .amb-ph { grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
main.amber .amb-temp { margin: 4px 0 6px; }
main.amber .amb-temp__bar { display: grid; grid-template-columns: 4fr 2fr 4fr; gap: 4px; height: 14px; }
main.amber .amb-temp__bar i { border-radius: 99px; background: var(--box-inner); transform-origin: 0 50%; }
main.amber .amb-temp__bar .t-a { background: var(--amb-grad); }
main.amber .amb-temp__lbl { display: grid; grid-template-columns: 4fr 2fr 4fr; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--color-mid-gray); }
main.amber .amb-temp__lbl .is-a { color: var(--amb-ink); font-weight: 700; text-align: center; white-space: nowrap; }
main.amber .amb-temp__lbl span:last-child { text-align: right; }
@media (max-width: 1099px) {
  main.amber .amb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.amber .amb-bento > .amb-ph { grid-row: span 1; aspect-ratio: 3 / 4; min-height: 0; }
  main.amber .amb-tile--temp { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  main.amber .amb-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  main.amber .amb-bento > .amb-ph { aspect-ratio: 4 / 3; }
  main.amber .amb-temp__lbl { font-size: 11.5px; }
}

/* ---------- 11: 3 つの理由と、写真つきの料理カード ---------- */
main.amber .amb-why3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
main.amber .amb-why3 li { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: 24px; padding: 26px 24px; }
main.amber .amb-why3__k { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--amb-hi); }
main.amber .amb-why3__v { font-weight: 700; font-size: 17px; margin-top: 12px; }
main.amber .amb-why3__d { font-size: 15px; line-height: 1.75; color: var(--color-deep-gray); margin-top: 6px; }
@media (max-width: 799px) { main.amber .amb-why3 { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
main.amber .amb-foods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 6vw, 72px); }
main.amber .amb-food { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); overflow: hidden; display: flex; flex-direction: column; }
main.amber .amb-food > .amb-ph { border-radius: 0; }
main.amber .amb-food__txt { padding: 24px 24px 28px; }
main.amber .amb-food h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 12px; }
main.amber .amb-dishes { list-style: none; margin: 0; padding: 0; display: grid; }
main.amber .amb-dishes li { font-size: 14.5px; line-height: 1.7; color: var(--color-deep-gray); padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
main.amber .amb-dishes b { display: block; font-size: 15.5px; color: var(--color-primary-ink); }
@media (max-width: 999px) { main.amber .amb-foods { grid-template-columns: minmax(0, 1fr); } main.amber .amb-food { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } main.amber .amb-food > .amb-ph { aspect-ratio: auto; min-height: 100%; } }
@media (max-width: 639px) { main.amber .amb-food { display: flex; } main.amber .amb-food > .amb-ph { aspect-ratio: 4 / 3; min-height: 0; } }

/* ---------- 12: 軽やか ↔ 力強い の帯、ラベルの見本 ---------- */
main.amber .amb-range { background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); padding: clamp(24px, 3.6vw, 40px); }
main.amber .amb-range__bar { height: 16px; border-radius: 99px; background: linear-gradient(90deg, #fbf3d6 0%, #f9d58a 28%, #f5ac3c 56%, #ef8a17 78%, #dc560a 100%); transform-origin: 0 50%; }
main.amber .amb-range__ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
main.amber .amb-range__end:last-child { text-align: right; }
main.amber .amb-range__k { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--amb-ink); }
main.amber .amb-range__t { font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin-top: 4px; }
main.amber .amb-range__d { font-size: 15px; line-height: 1.75; color: var(--color-deep-gray); margin-top: 6px; }
@media (max-width: 639px) { main.amber .amb-range__ends { grid-template-columns: minmax(0, 1fr); } main.amber .amb-range__end:last-child { text-align: left; } }
main.amber .amb-label-split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { main.amber .amb-label-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; } }
main.amber .amb-label { margin: 0; background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); padding: clamp(24px, 3.4vw, 40px); }
main.amber .amb-label__paper { background: var(--box-inner); border-radius: 18px; padding: 34px 24px 28px; text-align: center; font-family: var(--font-display); }
main.amber .amb-label__ka { font-size: 22px; color: var(--color-deep-gray); }
main.amber .amb-label__v { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: .12em; margin: 4px 0 18px; }
main.amber .amb-label__line { font-size: 17px; letter-spacing: .08em; margin-top: 10px; color: var(--color-deep-gray); }
main.amber .amb-label mark { position: relative; background: none; color: var(--amb-ink); font-weight: 800; padding: 0 2px; box-shadow: inset 0 -.42em 0 rgba(249, 178, 51, .4); }
main.amber .amb-label mark::before { content: attr(data-n); position: absolute; left: -26px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; border-radius: 50%; background: var(--amb-ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; display: grid; place-items: center; }
main.amber .amb-label__foot { margin-top: 22px; font-size: 11px; letter-spacing: .14em; color: var(--color-mid-gray); }
main.amber .amb-label figcaption { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--color-mid-gray); }
main.amber .amb-terms { list-style: none; margin: 0; padding: 0; counter-reset: term; display: grid; gap: 0; }
main.amber .amb-terms li { counter-increment: term; position: relative; padding: 18px 0 18px 44px; border-top: 1px solid rgba(0, 0, 0, .08); }
main.amber .amb-terms li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .08); }
main.amber .amb-terms li::before { content: counter(term); position: absolute; left: 0; top: 19px; width: 26px; height: 26px; border-radius: 50%; background: var(--amb-ink); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
main.amber .amb-terms li:nth-child(4)::before { background: var(--color-mid-gray); content: "+"; }
main.amber .amb-terms__t { font-weight: 700; font-size: 17px; }
main.amber .amb-terms__d { font-size: 15px; line-height: 1.75; color: var(--color-deep-gray); margin-top: 4px; }

/* ---------- 13・14・15 ---------- */
main.amber .amb-faq { max-width: 880px; }
main.amber .faq-body .faq-more { margin-top: 10px; font-size: var(--fs-small); }
main.amber .faq-body .faq-more a { color: var(--color-link-blue); }
main.amber #drink .amb-ph--bleed { margin-top: 0; margin-bottom: clamp(32px, 5vw, 56px); }
main.amber .amb-related .card { display: flex; flex-direction: column; }

/* ---------- スマホの縦積みの表: 1 列目も左寄せ。広い画面: 2 列目以降は折り返す ---------- */
@media (max-width: 734px) { main.amber .data-table.aud-stack td { text-align: left; } }
@media (min-width: 1000px) { main.amber .info-table .data-table th:nth-child(n+2), main.amber .info-table .data-table td:nth-child(n+2) { white-space: normal; } }

/* ==================================================================
   動き(scroll-driven だけ)。見出し・リードのせり上がりは style.css の .pdx-apple .section-header。
   ここで足す: 画像の拡大・フェード / 横いっぱいの画像は切り抜きが開く / 式と香りの言葉がにじみから現れる /
   カードが順に開く・上がる / 数字が奥から浮かび上がる(F3)/ 棒と帯が伸びる / 年表の線が伸びて丸が点く / グラスが満ちる
   ================================================================== */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  /* 画像の仮枠: 少し縮んだ状態から手前へ。横いっぱいのものは左右の切り抜きが開く */
  main.amber .amb-ph { animation: ambPhIn linear both; animation-timeline: view(); animation-range: entry 0% cover 36%; }
  main.amber .amb-ph--bleed { animation: ambPhBleed linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  main.amber .amb-ph > img { animation: ambPhZoom linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  main.amber .amb-style > .amb-ph, main.amber .amb-food > .amb-ph, main.amber .amb-bento > .amb-ph { animation: none; }
  @keyframes ambPhIn { from { scale: .92; opacity: .35; } to { scale: 1; opacity: 1; } }
  @keyframes ambPhBleed { from { clip-path: inset(0 7% round 40px); scale: .98; } to { clip-path: inset(0 0 round 0); scale: 1; } }
  @keyframes ambPhZoom { from { scale: 1.14; } to { scale: 1; } }
  /* ヒーローの画像: 読み込み時にすでに見えているので、スクロールで角が開きながら広がる */
  

  /* 01 の式・07 の香りの言葉: 1 語ずつ、にじみから焦点を結ぶ */
  main.amber .amb-eq > *, main.amber .amb-aromas li { animation: ambWordIn linear both; animation-timeline: view(); animation-range: entry 10% cover 34%; }
  main.amber .amb-eq > :nth-child(2), main.amber .amb-aromas li:nth-child(2) { animation-range: entry 16% cover 38%; }
  main.amber .amb-eq > :nth-child(3), main.amber .amb-aromas li:nth-child(3) { animation-range: entry 22% cover 42%; }
  main.amber .amb-eq > :nth-child(4), main.amber .amb-aromas li:nth-child(4) { animation-range: entry 28% cover 46%; }
  main.amber .amb-eq > :nth-child(5), main.amber .amb-aromas li:nth-child(n+5) { animation-range: entry 34% cover 50%; }
  @keyframes ambWordIn { from { opacity: 0; translate: 0 .35em; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: none; } }

  /* 大きな数字: F3「奥から、浮かび上がる」の値の動き(大きく・にじんだ状態から定位置へ) */
  main.amber .amb-num { animation: ambNumIn linear both; animation-timeline: view(); animation-range: entry 20% cover 38%; }
  @keyframes ambNumIn { from { scale: 1.6; opacity: 0; filter: blur(10px); } to { scale: 1; opacity: 1; filter: none; } }

  /* ボックスが下から少し縮んだ状態で上がる(横並びは左から順に) */
  main.amber .amb-point, main.amber .amb-name, main.amber .amb-glass, main.amber .amb-style, main.amber .amb-period, main.amber .amb-shade, main.amber .amb-grapes > li, main.amber .amb-region, main.amber .amb-tile, main.amber .amb-why3 li, main.amber .amb-food, main.amber .amb-range, main.amber .amb-label, main.amber .amb-terms li, main.amber .amb-time__body, main.amber .amb-def {
    animation: ambRise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
  }
  main.amber :is(.amb-glasses, .amb-shades, .amb-grapes, .amb-why3, .amb-foods, .amb-duo-cards, .amb-names, .amb-bento) > :nth-child(2) { animation-range: entry 6% cover 32%; }
  main.amber :is(.amb-glasses, .amb-shades, .amb-grapes, .amb-why3, .amb-foods, .amb-duo-cards, .amb-names, .amb-bento) > :nth-child(3) { animation-range: entry 12% cover 36%; }
  main.amber :is(.amb-glasses, .amb-shades, .amb-grapes, .amb-bento) > :nth-child(4) { animation-range: entry 18% cover 40%; }
  main.amber .amb-hero .amb-def { animation: none; }
  @keyframes ambRise { from { opacity: 0; translate: 0 40px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }

  /* 05 の手順カード: 上の辺を軸に、左から順に開く */
  main.amber .amb-steps { perspective: 1400px; }
  main.amber .amb-steps > li { transform-origin: 50% 0; animation: ambOpen linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  main.amber .amb-steps > li:nth-child(2) { animation-range: entry 6% cover 40%; }
  main.amber .amb-steps > li:nth-child(3) { animation-range: entry 12% cover 46%; }
  main.amber .amb-steps > li:nth-child(4) { animation-range: entry 18% cover 52%; }
  @keyframes ambOpen { from { rotate: x -58deg; opacity: 0; } 55% { opacity: 1; } to { rotate: x 0deg; opacity: 1; } }

  /* 棒・帯が左から伸びる */
  main.amber .amb-bar, main.amber .amb-range__bar, main.amber .amb-temp__bar i { animation: ambGrow linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
  main.amber .amb-period__row:nth-child(4) .amb-bar { animation-range: entry 45% cover 50%; }
  main.amber .amb-period__row:nth-child(5) .amb-bar { animation-range: entry 50% cover 55%; }
  @keyframes ambGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* 02 のグラス: 液面が下から満ちる */
  main.amber .amb-glass .liq { animation: ambFill linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
  @keyframes ambFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* 03 の年表: 線が上から伸び、丸が琥珀色に点く */
  main.amber .amb-time::after { animation: ambRail linear both; animation-timeline: view(); animation-range: entry 20% cover 70%; }
  main.amber .amb-time > li::before { animation: ambDot linear both; animation-timeline: view(); animation-range: entry 50% cover 30%; }
  main.amber .amb-time__when { animation: ambRise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  @keyframes ambRail { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes ambDot { 0%, 50% { background: var(--color-hairline); scale: 1; } 75% { background: var(--amb-4); scale: 1.35; } 100% { background: var(--amb-4); scale: 1; } }

  /* スマホ: 画面に入ってから動くのが見えるように、開始を少し遅めに */
  @media (max-width: 734px) {
    main.amber .amb-ph { animation-range: entry 15% cover 40%; }
    main.amber .amb-point, main.amber .amb-name, main.amber .amb-glass, main.amber .amb-style, main.amber .amb-period, main.amber .amb-shade, main.amber .amb-grapes > li, main.amber .amb-region, main.amber .amb-tile, main.amber .amb-why3 li, main.amber .amb-food, main.amber .amb-range, main.amber .amb-label, main.amber .amb-terms li, main.amber .amb-time__body, main.amber :is(.amb-glasses, .amb-shades, .amb-grapes, .amb-why3, .amb-foods, .amb-duo-cards, .amb-names, .amb-bento) > :nth-child(n) { animation-range: entry 18% cover 34%; }
    main.amber .amb-glasses > :nth-child(even), main.amber .amb-shades > :nth-child(even) { animation-range: entry 26% cover 38%; }
    main.amber .amb-steps > li, main.amber .amb-steps > li:nth-child(n) { animation-range: entry 20% cover 40%; }
    main.amber .amb-num { animation-range: entry 35% cover 42%; }
    main.amber .amb-eq > *, main.amber .amb-aromas li { animation-range: entry 20% cover 42%; }
  }
} }

/* 10 のタイルの並び: 最後の「熟成」のタイルは 2 マス(空きを作らない) */

/* ヒーローに横長の写真(IMG-01: 舞う琥珀色のワイン)が入ったとき: スマホでも横長(4:3)にして、流れ全体を見せる。縦長(4:5)はグラスの縦写真用 */

/* ---------- ヒーローの背景画像(IMG-01: 舞う琥珀色のワイン、2026-10-01 ユーザー指示「TOPの背景画像に」)
   画像の背景は白なので、白いヒーローにそのままなじむ。流れは下寄せで、見出しの下から湧き上がるように。
   文字・ボタンの読みやすさ: 上(見出し〜目次)には白いグラデーションを重ね、画像は下半分でだけはっきり見せる ---------- */
/* 白いグラデーションを「文字の終わり」に合わせる: 下の余白(--pb)の少し上までは白(.92)、余白の中で透明に */
/* 広い画面(1420px 超)でも画像の端が見えないよう、いつも画面より広く敷く */

/* ---------- ファーストビューをダイナミックに(2026-10-01 ユーザー指示「背景が薄く、メインのオレンジが目立たない」)
   ・ヒーローは画面の高さほど。画像は全面・白い膜なし・少し鮮やかに
   ・白い光は見出しと定義文の後ろだけ(楕円)。目次と最終更新はヒーローの外(.amb-toc)へ
   ・開いたとき画像がわずかに大きい状態から落ち着く/スクロールで背景がゆっくり動く。動きを減らす設定では静止 ---------- */
/* 目次と最終更新(ヒーローのすぐ下) */
main.amber .amb-toc { padding-block: clamp(28px, 4vw, 44px); text-align: center; }
main.amber .amb-toc .info-updated { margin: 0 0 18px; }
main.amber .amb-toc .amb-chips { justify-content: center; }
/* 白い光を見出しの文字の後ろだけに絞り、流れの中央の鮮やかさを残す */
/* 背景の流れに重なる小さな文字(パンくず・見出しの上の 1 行)は白くふちどって読みやすく */
/* スマホ: 高さは中身に合わせ、上下の空きをなくす。流れは見出し〜定義文の下まで */
@media (max-width: 599px) { main.amber .amb-toc { padding-top: 20px; } }

/* ---------- ヒーローの文字を読みやすく(2026-10-01): 見出しと定義文を「すりガラス」のパネルにまとめる
   背景の流れを白くぼかして透かし、文字の後ろは均一に。白い楕円の光は外し、パネルの外の流れをはっきり見せる。
   すりガラスが使えないブラウザでは、白(88%)のパネルになる ---------- */
/* パネルの中では、定義文の灰色の箱をやめて二重の箱をなくす。区切りは細い線 1 本 */
/* パネルの上ではふちどりは不要 */
/* スマホ: パネルの下に流れを見せる余白 */

/* ---------- パネルはやめる(2026-10-01 ユーザー「背景の美しさがなくなる」)。画像の上に面を置かず、文字そのものに白い光のふち
   ヒーローには見出しの上の 1 行と見出しだけ。定義文はヒーローのすぐ下(白い帯)へ ---------- */
/* 定義文: 白い帯で、箱を使わず大きめの文字で */
main.amber .amb-toc .amb-def { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0 auto clamp(20px, 3vw, 32px); max-width: 760px; }
main.amber .amb-toc .amb-def p { color: #3a3a3c; }
main.amber .amb-toc .amb-def p:first-child { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.5; }
main.amber .amb-toc .amb-def strong { color: #1d1d1f; }
/* いちばん上の細い帯(パンくずの高さ)だけ白をうっすら。流れの本体にはかけない */
/* パンくずはヒーローの上端(白い帯の中)、見出しだけを残りの高さの中央に */

/* ---------- ヒーロー(2026-10-01 ユーザー指示): 見出し「アンバーワインとは？」を 1 行・琥珀色のグラデーションの文字に。
   画像は背景ではなく見出しのすぐ下に大きく(画像の背景は白なので白いヒーローになじむ)。文字の色と画像の色をつなげて一体感を ---------- */
main.amber .amb-hero--stack { padding-bottom: 0; overflow: hidden; }
main.amber .amb-hero--stack .amb-hero__in { margin: clamp(28px, 5vw, 64px) auto 0; max-width: none; }
main.amber .amb-hero--stack h1.amb-h1 {
  font-size: min(8.6vw, 112px) !important; white-space: nowrap; letter-spacing: -.045em; line-height: 1.12; padding-bottom: .06em;
  background: linear-gradient(100deg, #e0700a 0%, #f39016 28%, #f9b233 52%, #f08a12 74%, #dc560a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
}
main.amber .amb-hero--stack .amb-eyebrow { text-shadow: none; color: var(--amb-ink); }
main.amber .amb-hero__visual { margin: clamp(8px, 2vw, 24px) auto 0; max-width: 1680px; position: relative; }
main.amber .amb-hero__visual img { display: block; width: 100%; height: auto; }
@media (max-width: 599px) {
  /* スマホは流れを大きく見せる(横を少し切り抜く) */
  main.amber .amb-hero__visual { aspect-ratio: 4 / 3; overflow: hidden; }
  main.amber .amb-hero__visual img { height: 100%; object-fit: cover; object-position: 46% 50%; }
}
@media (prefers-reduced-motion: no-preference) {
  main.amber .amb-hero__visual img { animation: ambVisualIn 1.6s cubic-bezier(.2, .8, .2, 1) both .15s; }
  @keyframes ambVisualIn { from { opacity: 0; transform: scale(1.06) translateY(16px); } to { opacity: 1; transform: none; } }
}

/* ---------- 数字の箱を Apple 風に(2026-10-01): 大きな数字、桁がスロットのように回って止まる(amber-facts.js)、
   箱は順に浮かび上がり、下の琥珀色の線が左から伸びる。動きを減らす設定・JS なしでは静止(今の表示) ---------- */
main.amber .amb-facts-band .fact { position: relative; overflow: hidden; padding-bottom: clamp(26px, 3vw, 34px); }
main.amber .amb-facts-band .fact-value { font-size: clamp(44px, 5.4vw, 76px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--amb-hi); white-space: nowrap; }
main.amber .amb-facts-band .fact-value small { font-size: .32em; letter-spacing: 0; margin-left: .12em; font-weight: 700; }
main.amber .amb-facts-band .fact-label { font-weight: 600; }
/* 回る数字 */
main.amber .odo { display: inline-flex; height: 1em; line-height: 1; vertical-align: -.08em; overflow: hidden; }
main.amber .odo-d, main.amber .odo-c { display: inline-block; height: 1em; line-height: 1; }
main.amber .odo-d { overflow: hidden; }
main.amber .odo-s { display: flex; flex-direction: column; transform: translateY(0); }
main.amber .odo-s > span { display: block; height: 1em; line-height: 1; text-align: center; }
main.amber .is-in .odo-s { transform: translateY(calc(var(--to) * -1em)); transition: transform 1.9s cubic-bezier(.16, .84, .12, 1) var(--delay, 0s); }
/* 下の琥珀色の線 */
main.amber .amb-facts-band .fact::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #e8650a, #f39016 50%, #f9b233); transform: scaleX(0); transform-origin: left; }
main.amber .amb-facts-band.is-in .fact::after { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .35s; }
main.amber .amb-facts-band.is-in .fact:nth-child(2)::after { transition-delay: .47s; }
main.amber .amb-facts-band.is-in .fact:nth-child(3)::after { transition-delay: .59s; }
main.amber .amb-facts-band.is-in .fact:nth-child(4)::after { transition-delay: .71s; }
main.amber .amb-facts-band.is-in .fact:nth-child(5)::after { transition-delay: .83s; }
/* 箱が順に浮かび上がる(JS が準備できたときだけ。準備前・JS なしは最初から見える) */
main.amber .amb-facts-band.odo-ready .fact { opacity: 0; transform: translateY(28px) scale(.96); }
main.amber .amb-facts-band.odo-ready.is-in .fact { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); }
main.amber .amb-facts-band.odo-ready.is-in .fact:nth-child(2) { transition-delay: .12s; }
main.amber .amb-facts-band.odo-ready.is-in .fact:nth-child(3) { transition-delay: .24s; }
main.amber .amb-facts-band.odo-ready.is-in .fact:nth-child(4) { transition-delay: .36s; }
main.amber .amb-facts-band.odo-ready.is-in .fact:nth-child(5) { transition-delay: .48s; }
/* 既存の scroll-driven の動き(F3)とは重ねない */
main.amber .amb-facts-band.odo-ready .fact, main.amber .amb-facts-band.odo-ready .fact * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { main.amber .amb-facts-band .fact::after { transform: none; } }
/* 数字の大きさは箱の幅に合わせる(5 つ並びでも「12〜14℃」が収まる) */
main.amber .amb-facts-band .fact { container-type: inline-size; }
main.amber .amb-facts-band .fact-value { font-size: min(24cqw, 76px); }

/* 写真が入るまで: 2 列の枠に 1 つだけのときは全幅に。01 の 3 項目と産地のカードは横に並べる(2026-10-01) */
main.amber .amb-split:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  main.amber .amb-split:not(:has(> :nth-child(2))) > .amb-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  main.amber .amb-split:not(:has(> :nth-child(2))) > .amb-points > .amb-point + .amb-point { padding-top: 0; border-top: 0; }
  main.amber .amb-split:not(:has(> :nth-child(2))) > .amb-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 数字の箱の動き(2026-10-01 b): 奥から傾いて立ち上がり、ぼかしが晴れる。止まったあとは、
   マウスに合わせて少し傾き、光が指先を追う(amber-facts.js が --rx/--ry/--mx/--my を渡す)。タッチは押すと少し沈む。
   動きを減らす設定では JS が何もしないので、どれも動かない ---------- */
main.amber .amb-facts-band .fact-strip { perspective: 1400px; }
main.amber .amb-facts-band .odo { -webkit-user-select: none; user-select: none; }
main.amber .amb-facts-band.odo-ready .fact { transform: translateY(64px) rotateX(16deg) scale(.9); transform-origin: 50% 100%; filter: blur(10px); }
main.amber .amb-facts-band.odo-ready.is-in .fact { filter: blur(0); transition: opacity 1s ease, transform 1.5s cubic-bezier(.16, 1, .3, 1), filter 1.1s ease; }
main.amber .amb-facts-band.odo-ready.is-in.is-settled .fact { filter: none; transform: translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease; transition-delay: 0s; will-change: transform; }
main.amber .amb-facts-band.odo-ready.is-in.is-settled .fact > * { position: relative; z-index: 1; }
main.amber .amb-facts-band.odo-ready.is-in.is-settled .fact::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(240, 169, 74, .2), rgba(240, 169, 74, 0) 55%); }
@media (hover: hover) and (pointer: fine) {
  main.amber .amb-facts-band.odo-ready.is-in.is-settled .fact:hover { transform: translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: var(--box-shadow-up); transition: transform .25s ease-out, box-shadow .6s ease; }
  main.amber .amb-facts-band.odo-ready.is-in.is-settled .fact:hover::before { opacity: 1; }
}
main.amber .amb-facts-band.odo-ready.is-in.is-settled .fact:active { transform: scale(.97); transition-duration: .2s; }

/* 黒い帯の写真: 角に白い縁が出ないよう、枠の地も黒に(2026-10-01) */
main.amber .amb-ph--dark[data-img]:has(> img) { background: #000; }

/* ---------- 大きな文字を、光るオレンジに(2026-10-02 b)。ゴールド → オレンジのグラデーションを文字の形で切り抜く。
   単位(年・℃・% など)や「ワイン」は黒のまま。.amb-num は自分の幅なので、そのまま切り抜く ---------- */
main.amber .amb-num, main.amber .amb-name__v, main.amber .amb-time__when, main.amber .amb-steps__no, main.amber .amb-why3__k { background-image: var(--amb-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
main.amber .amb-name__v, main.amber .amb-time__when, main.amber .amb-steps__no, main.amber .amb-why3__k { width: fit-content; max-width: 100%; }
@media (min-width: 900px) { main.amber .amb-time__when { justify-self: end; } }
main.amber .amb-big--center .amb-num { padding-inline: .02em; }
/* 「アンバー」はゴールド寄り、「オレンジ」はオレンジ寄り */
main.amber .amb-name:nth-child(1) .amb-name__v { background-image: linear-gradient(135deg, #f9c043 0%, #f5a020 50%, #ec7f10 100%); color: transparent; }
main.amber .amb-name:nth-child(3) .amb-name__v { background-image: linear-gradient(135deg, #fba040 0%, #f2711c 50%, #e04e0c 100%); color: transparent; }
/* 数字の箱: 1 桁ずつ、上がゴールド・下がオレンジ */
main.amber .amb-facts-band .fact-value { color: var(--amb-hi); }
main.amber .amb-facts-band .odo-s > span, main.amber .amb-facts-band .odo-c { background-image: linear-gradient(180deg, #f9b233 0%, #f39016 45%, #e2620a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 写真の枠の地は白(背景を抜いた料理やブドウが、白の上に浮かぶ)。黒い帯の写真だけは黒のまま(2026-10-02) */
main.amber .amb-ph[data-img]:has(> img) { background: #fff; }
main.amber .amb-ph--dark[data-img]:has(> img) { background: #000; }

/* 背景を抜いた写真は余白なしで枠いっぱいに。料理のカード 3 枚だけは、皿全体が見えるよう少しの余白で収める(2026-10-02) */
main.amber .amb-food > .amb-ph > img.amb-cutout { object-fit: contain; padding: 3%; }

/* 08 産地: 地図(IMG-10、SVG)はページ幅いっぱいに置き、その下に産地のカード 3 枚。地図は切らず、寄る動きも付けない(2026-10-02) */
main.amber .amb-map { margin-bottom: clamp(28px, 4vw, 48px); }
main.amber .amb-map > img { object-fit: contain; animation: none; }
/* スマホ: 地図の左右の余白を少し切り、3:2 の枠で大きく見せる(黒海から東のカヘティまで入る位置) */
@media (max-width: 599px) { main.amber .amb-map { aspect-ratio: 3 / 2; } main.amber .amb-map > img { object-fit: cover; object-position: 80% 50%; } }

/* ---------- 13 飲んでみる: ストアのアンバーワイン 5 本(IMG-16、2026-10-02)。白い箱に、淡い色から濃い色へ並べる。
   ボトルはストアの商品写真(白地・正方形)を縦長に切り出して大きく。選ぶと商品ページへ。スマホは横にスワイプ ---------- */
main.amber .amb-shelf { margin: 0 0 clamp(32px, 5vw, 56px); background: var(--box-bg); box-shadow: var(--box-shadow); border-radius: var(--radius-cards); padding: clamp(24px, 3.4vw, 44px) clamp(16px, 3vw, 40px) clamp(20px, 2.6vw, 30px); }
main.amber .amb-bottles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 24px); }
main.amber .amb-bottle a { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: inherit; border-radius: 18px; padding-bottom: 6px; }
main.amber .amb-bottle__img { display: block; width: 100%; aspect-ratio: 1 / 2; overflow: hidden; background: #fff; border-radius: 14px; }
main.amber .amb-bottle__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(var(--z, 1.02)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
main.amber .amb-bottle__n { margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; color: var(--color-primary-ink); }
main.amber .amb-bottle__n span { font-weight: 600; color: var(--color-deep-gray); }
main.amber .amb-bottle__p { font-size: 13px; font-weight: 600; color: var(--amb-ink); text-align: center; }
main.amber .amb-bottle a:focus-visible { outline: 2px solid var(--amb-ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main.amber .amb-bottle a:hover .amb-bottle__img img { transform: translateY(-10px) scale(calc(var(--z, 1.02) + .04)); }
}
main.amber .amb-shelf__cap { margin-top: clamp(14px, 2vw, 22px); text-align: center; font-size: 14px; color: var(--color-deep-gray); }
@media (max-width: 699px) {
  main.amber .amb-shelf { padding-inline: 0; }
  main.amber .amb-bottles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px; gap: 12px; scrollbar-width: none; }
  main.amber .amb-bottles::-webkit-scrollbar { display: none; }
  main.amber .amb-bottle { flex: 0 0 40%; scroll-snap-align: center; }
  main.amber .amb-shelf__cap { padding-inline: 16px; }
}

/* ---------- 09 飲み方を組み直し(2026-10-02)。広い画面: 左に「温度」(横 2 枠)、その下に「澱」「開けたら」、右に縦長の「グラス」。
   「グラス」は注ぐ写真(IMG-11、背景透過)を、文の下に背景のように敷く。どの幅でも空きの枠を作らない ---------- */
main.amber .amb-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "temp temp glass" "decant days glass"; }
main.amber .amb-bento > .amb-tile--temp { grid-area: temp; }
main.amber .amb-bento > .amb-tile--glass { grid-area: glass; }
main.amber .amb-bento > .amb-tile--decant { grid-area: decant; }
main.amber .amb-bento > .amb-tile--days { grid-area: days; }
main.amber .amb-tile--glass { position: relative; overflow: hidden; padding-bottom: 0; background: #fff; }
main.amber .amb-tile--glass .amb-tile__photo { display: block; flex: 1 1 auto; min-height: 280px; width: calc(100% + 2 * clamp(24px, 3vw, 34px)); max-width: none; height: 0; margin: 4px calc(-1 * clamp(24px, 3vw, 34px)) 0; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 1099px) {
  main.amber .amb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "temp temp" "glass decant" "glass days"; }
}
@media (max-width: 699px) {
  main.amber .amb-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "temp" "glass" "decant" "days"; }
  main.amber .amb-tile--glass .amb-tile__photo { flex: none; height: auto; min-height: 0; aspect-ratio: 3 / 4; }
}

/* 見出し(h2)は語のまとまりで改行する: 文中の <wbr> の位置でだけ折り返し、語の途中では切らない(入りきらないときだけ例外)。
   スマホでは最小の大きさを少し下げて、まとまりが 1 行に収まるように(2026-10-02) */
main.amber h2.text-heading-sm { word-break: keep-all; overflow-wrap: anywhere; font-size: clamp(30px, 5.4vw, 72px); }

/* ---------- 09 飲み方を黒の帯に(2026-10-02)。濃いグレーのタイルの上で、オレンジの数字と注ぐ写真を際立たせる ---------- */
main.amber .amb-serve { --box-bg: #1c1c1e; --box-inner: #3a3a3c; --box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }
main.amber .amb-dark .sec-no { color: #f7a13a; }
main.amber .amb-serve .amb-tile { background: #1c1c1e; }
main.amber .amb-serve .amb-tile h3 { color: #f5f5f7; }
main.amber .amb-serve .amb-tile p { color: rgba(255, 255, 255, .72); }
main.amber .amb-serve .amb-big small { color: #f5f5f7; }
main.amber .amb-serve .amb-num { filter: drop-shadow(0 0 22px rgba(243, 144, 22, .45)); }
main.amber .amb-serve .amb-temp__lbl { color: rgba(255, 255, 255, .6); }
main.amber .amb-serve .amb-temp__lbl .is-a { color: #f9a43a; }
main.amber .amb-serve .amb-temp__bar .t-a { box-shadow: 0 0 16px rgba(243, 144, 22, .55); }
main.amber .amb-serve .amb-tile--glass { background: #1c1c1e; }
main.amber .amb-serve .amb-tile--glass .amb-tile__photo { filter: drop-shadow(0 18px 40px rgba(243, 144, 22, .18)); }
/* 注ぐ写真はグラスの左右を切らない: 枠の中に全体を収め、下にそろえる(2026-10-02) */
main.amber .amb-tile--glass .amb-tile__photo { object-fit: contain; object-position: 50% 100%; }
/* 「グラス」は写真をタイル全体の背景にし、文を重ねる(上だけ暗いグラデーションで読みやすく)。グラスの左右は切らない(2026-10-02) */
main.amber .amb-tile--glass { position: relative; padding-bottom: clamp(24px, 3vw, 34px); }
main.amber .amb-tile--glass > :not(.amb-tile__photo) { position: relative; z-index: 2; }
main.amber .amb-tile--glass::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, #1c1c1e 0%, rgba(28, 28, 30, .88) 22%, rgba(28, 28, 30, 0) 46%); }
main.amber .amb-tile--glass .amb-tile__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; min-height: 0; flex: none; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 699px) {
  main.amber .amb-tile--glass { aspect-ratio: 3 / 4; }
  main.amber .amb-tile--glass .amb-tile__photo { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 1100px) { main.amber .amb-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); } }

/* 飲み方のタイル(2026-10-02 c): 大きな数字の行の高さを詰める(段落の 1.8 を受け継いでいたため、余白が大きすぎた) */
main.amber .amb-tile .amb-big { line-height: 1; }
/* 「グラス」: 見出しと文をひとまとめにし、その下で消える暗い地を敷く(文の長さに合わせて、文字の下だけが暗くなる) */
main.amber .amb-tile--glass::before { content: none; }
main.amber .amb-tile--glass .amb-tile__text { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(to bottom, #1c1c1e calc(100% - 64px), rgba(28, 28, 30, 0)); padding-bottom: 64px; margin-bottom: -64px; }
/* スマホ: 写真は文の下に置き、ボトルの口だけを文の暗い地の下に少し潜らせる */
@media (max-width: 699px) {
  main.amber .amb-tile--glass { aspect-ratio: auto; padding-bottom: 0; }
  main.amber .amb-tile--glass .amb-tile__photo { position: relative; inset: auto; width: calc(100% + 2 * clamp(24px, 3vw, 34px)); max-width: none; height: auto; aspect-ratio: 3 / 4; margin: 0 calc(-1 * clamp(24px, 3vw, 34px)); }
}

/* 05: 関連ボタンはカヘティ式・イメレティ式の箱の下部に(2 枚の箱でボタンの高さをそろえる)(2026-10-02) */
main.amber .amb-style__txt { flex: 1 1 auto; display: flex; flex-direction: column; }
main.amber .amb-style__actions { margin-top: auto; padding-top: 22px; }