:root {
  /* ── Brand ── */
  --color-amber: rgba(242, 146, 24, 1);
  --color-amber-hover: rgba(217, 127, 14, 1);
  --color-amber-pale: rgba(252, 238, 219, 1);
  --color-amber-border: rgba(246, 214, 166, 1);
  --color-amber-light: rgba(255, 242, 225, 1);

  /* ── Ink / dark ── */
  --color-ink-deep: rgba(13, 14, 17, 1);
  --color-ink: rgba(21, 23, 28, 1);
  --color-ink-card: rgba(22, 24, 29, 1);
  --color-ink-slot: rgba(30, 32, 40, 1);
  --color-ink-border: rgba(42, 45, 54, 1);
  --color-ink-text: rgba(44, 51, 63, 1);
  --color-ink-nav: rgba(61, 66, 80, 1);
  --color-ink-slot-text: rgba(74, 79, 94, 1);

  /* ── Text ── */
  --color-text: rgba(82, 90, 104, 1);
  --color-text-muted: rgba(107, 114, 128, 1);
  --color-text-dim: rgba(122, 129, 141, 1);
  --color-text-light: rgba(138, 145, 160, 1);
  --color-text-lighter: rgba(154, 160, 172, 1);
  --color-text-pale: rgba(164, 171, 184, 1);
  --color-text-pale2: rgba(170, 176, 187, 1);
  --color-text-silver: rgba(205, 210, 218, 1);
  --color-text-silver2: rgba(207, 211, 218, 1);

  /* ── Border ── */
  --color-border: rgba(236, 238, 241, 1);
  --color-border-btn: rgba(212, 216, 223, 1);
  --color-border-hover: rgba(223, 227, 232, 1);
  --color-border-subtle: rgba(226, 229, 234, 1);

  /* ── Background ── */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-bg-alt: rgba(250, 250, 250, 1);
  --color-bg-slot: rgba(232, 234, 237, 1);
  --color-bg-chip: rgba(244, 245, 247, 1);

  /* ── Hero overlay ── */
  --color-overlay-88: rgba(13,14,17,.88);
  --color-overlay-60: rgba(13,14,17,.6);
  --color-overlay-28: rgba(13,14,17,.28);

  /* ── Shadow ── */
  --color-shadow-sm: rgba(21,23,28,.08);
  --color-shadow-md: rgba(21,23,28,.1);
  --color-shadow-lg: rgba(21,23,28,.14);

  /* ── White opacity ── */
  --color-white-06: rgba(255,255,255,.06);
  --color-white-10: rgba(255,255,255,.1);
  --color-white-12: rgba(255,255,255,.12);
  --color-white-14: rgba(255,255,255,.14);
  --color-white-22: rgba(255,255,255,.22);
  --color-white-30: rgba(255,255,255,.3);
  --color-white-40: rgba(255,255,255,.4);
  --color-white-55: rgba(255,255,255,.55);
  --color-white-80: rgba(255,255,255,.8);
  --color-white-82: rgba(255,255,255,.82);
  --color-white-84: rgba(255,255,255,.84);
  --color-white-85: rgba(255,255,255,.85);
  --color-white-88: rgba(255,255,255,.88);

  /* ── Black opacity ── */
  --color-black-30: rgba(0,0,0,.3);
  --color-black-35: rgba(0,0,0,.35);
}

/* ---- reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Noto Sans JP','Zen Kaku Gothic New',sans-serif;color:var(--color-ink);-webkit-font-smoothing:antialiased;background:var(--color-white)}
a{color:inherit;text-decoration:none}

/* ---- navbar ---- */
.navbar{background:none}
.navbar-item{padding-left:.75rem;padding-right:.75rem}
.navbar-item:hover,.navbar-item:focus{background:transparent}
.navlink{color:var(--color-ink-nav);font-weight:500;font-size:0.875rem;white-space:nowrap;transition:color .2s}
.navlink:hover{color:var(--color-ink)}
.navlink.active{color:var(--color-ink);font-weight:700}
.navbar-sticky{position:sticky;top:0;z-index:60;background:var(--color-white-88);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.brand-logo{font-family:'Schibsted Grotesk';font-weight:900;font-size:1.44rem;letter-spacing:-.01em}
.navbar-end-center{align-items:center}

/* ---- buttons ---- */
.btn-primary{background:var(--color-ink);color:var(--color-white);border-radius:9px;font-weight:700;transition:transform .15s,background .2s}
.btn-primary:hover{background:var(--color-black);transform:translateY(-1px)}
.btn-amber{background:var(--color-amber);color:var(--color-white);border-radius:9px;font-weight:700;transition:transform .15s,background .2s}
.btn-amber:hover{background:var(--color-amber-hover);transform:translateY(-1px)}
.btn-cta{padding:0.6875rem 1.375rem;font-size:0.84rem;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:7px}
.btn-lg{padding:1rem 1.875rem;font-size:0.94rem}
.btn-xl{padding:1.0625rem 2.125rem;font-size:0.97rem}
.btn-ig{padding:0.8125rem 1.5rem;font-size:0.875rem}
.btn-form{display:inline-block;padding:1.125rem 2.5rem;font-size:1rem}
.btn-ghost-light{padding:1rem 1.875rem;font-size:0.94rem;font-weight:700;border-radius:9px;border:1.5px solid var(--color-white-40);color:var(--color-white);backdrop-filter:blur(4px)}

/* ---- CTA dropdown ---- */
.cta-menu{position:relative}
.cta-pop{position:absolute;right:0;top:calc(100% + 10px);background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 16px 44px var(--color-shadow-lg);padding:0.5rem;min-width:252px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none;z-index:70}
.cta-menu.open .cta-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.cta-menu.open .cta-caret{transform:rotate(180deg)}
.cta-caret{transition:transform .18s;opacity:.85}
.cta-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0.75rem 0.875rem;border-radius:8px;font-size:0.875rem;font-weight:700;color:var(--color-ink);transition:background .15s,color .15s}
.cta-item:hover{background:var(--color-amber-pale);color:var(--color-amber)}
.text-amber{color:var(--color-amber)}

/* ---- social icons ---- */
.sns{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:transparent;border:1px solid var(--color-ink-border);color:var(--color-white);transition:transform .15s,background .2s}
.sns svg{width:19px;height:19px}
.sns:hover{background:var(--color-amber);border-color:var(--color-amber);transform:translateY(-2px)}

/* ---- language switcher ---- */
.langseg{display:inline-flex;border:1px solid var(--color-border-subtle);border-radius:8px;overflow:hidden;background:var(--color-white)}
.langopt{font-family:'Schibsted Grotesk';font-size:0.75rem;font-weight:700;letter-spacing:.04em;color:var(--color-text-lighter);border:none;padding:0.4375rem 0.75rem;cursor:pointer;background:transparent;transition:all .18s}
.langopt:not(.active):hover{color:var(--color-ink)}
.langopt.active{background:var(--color-ink);color:var(--color-white)}

/* ---- image placeholder ---- */
.img-slot{background:var(--color-bg-slot);display:flex;align-items:center;justify-content:center;color:var(--color-text-lighter);font-size:0.78rem;font-weight:500;text-align:center;padding:0.75rem;width:100%;height:100%}
.img-slot--dark{background:var(--color-ink-slot);color:var(--color-ink-slot-text)}

/* ---- hero shared ---- */
.hero-dark{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--color-ink-deep);color:var(--color-white)}
.hero-overlay{position:absolute;inset:0;z-index:0}
.hero-inner{position:absolute;inset:0}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;pointer-events:none}
.hero-gradient{position:absolute;inset:0;background:linear-gradient(90deg,var(--color-overlay-88) 0%,var(--color-overlay-60) 42%,var(--color-overlay-28) 100%);pointer-events:none}
.hero-content{position:relative;z-index:2;padding:5.5rem 2rem;width:100%;max-width:1200px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--color-white-12);backdrop-filter:blur(6px);border:1px solid var(--color-white-22);color:var(--color-white);border-radius:999px;padding:0.5rem 1rem;font-size:0.78rem;font-weight:700;margin-bottom:1.5rem}
.hero-title{font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-weight:900;font-size:3.875rem;line-height:1.14;letter-spacing:-.015em;max-width:840px;margin-bottom:1.5rem;color:var(--color-white);text-shadow:0 2px 30px var(--color-black-35)}
.hero-sub{font-size:1.06rem;line-height:1.95;color:var(--color-white-84);max-width:620px;margin-bottom:2.125rem;text-shadow:0 1px 16px var(--color-black-30)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-vidnote{position:absolute;right:24px;bottom:18px;z-index:2;font-size:0.69rem;color:var(--color-white-55)}

/* ---- section typography ---- */
.eyebrow{font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-amber);margin-bottom:0.875rem}
.eyebrow-sm{font-family:'Schibsted Grotesk';font-size:0.81rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-amber);margin-bottom:0.75rem}
.sec-title{font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-weight:900;letter-spacing:-.01em}
.sec-sub{color:var(--color-text)}

/* ---- section variants ---- */
.sec-dark{background:var(--color-ink);color:var(--color-white)}
.sec-alt{background:var(--color-bg-alt);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.scroll-anchor{scroll-margin-top:5rem}

/* ---- container widths ---- */
.container{max-width:1200px}
.container-lg{max-width:1000px}

/* ---- access section ---- */
.acc-info{display:flex;flex-direction:column;gap:18px;font-size:0.94rem;line-height:1.7;color:var(--color-ink-nav)}
.acc-row{display:flex;gap:16px}
.acc-label{flex:none;width:84px;font-size:0.78rem;font-weight:700;color:var(--color-text-light);padding-top:0.125rem}
.acc-link{color:var(--color-ink);font-weight:700;border-bottom:1px solid var(--color-ink);padding-bottom:0.0625rem}
.map-wrap{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--color-border);height:100%;min-height:300px}
.map-wrap iframe{border:0;display:block;min-height:300px}

/* ---- instagram section ---- */
.ig-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:2.125rem}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ig-cell{aspect-ratio:1/1;border-radius:12px;overflow:hidden}
.ig-note{font-size:0.78rem;color:var(--color-text-muted);margin-top:1rem}

/* ---- form / contact ---- */
.form-note{font-size:0.78rem;color:var(--color-text-light);margin-top:1.125rem}

/* ---- footer ---- */
.footer-dark{background:var(--color-ink-deep);color:var(--color-text-silver2);padding:4rem 2rem 2.5rem}
.footer-brand{font-family:'Schibsted Grotesk';font-weight:900;font-size:1.5rem;color:var(--color-white);letter-spacing:-.01em;margin-bottom:0.875rem}
.footer-tagline{font-size:0.84rem;line-height:1.85;color:var(--color-text-light);max-width:260px}
.footer-col-head{font-size:0.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:1rem}
.footer-links{display:flex;flex-direction:column;gap:11px;font-size:0.875rem}
.footer-navlink{color:var(--color-text-silver2)}
.footer-navlink:hover{color:var(--color-white)}
/* タブレット幅（769〜1023px）では、フッターのリンクだけ折り返しを許す。.navlink はナビ用に nowrap で、フッターの列（flex）は中身の幅より縮めない。
   769px では「お客さま情報のお取扱いについて ↗」（227px）だけで 4 列の余裕がゼロになり、Service 列にリンクを 1 本足しただけで画面の外へはみ出した
   （実測 2026-09-20: JA 13px / EN 2px。/guide/ の EN ラベルが入ると 66px）。keep-all + strict で、日本語は語の途中では折り返さず「・」や空白で折り返す。
   1024px 以上は列に余裕があり（長いラベルを足しても収まることを実測済み）、768px 以下は列が縦積みなので、どちらも nowrap のまま。
   フッターにリンクを足す時は 769px で横スクロールが出ないか測ること。ナビ側の幅の調整は b2b.css にある。 */
@media screen and (min-width:769px) and (max-width:1023px){
  .footer-navlink{white-space:normal;word-break:keep-all;line-break:strict}
  /* ブランド列（is-4 = 33%・固定幅）を 25% にして、リンクの列に幅を回す。従来型スクロールバー（15px）の環境では、折り返しを許しても
     JA の「お客さま情報のお取扱いについて ↗」（keep-all で 210px より縮まない）が収まらず、769〜799px で 13〜14px はみ出していた（実測 2026-09-20。B2B 作業前は 31px）。 */
  .footer .columns > .column.is-4{flex:none;width:25%}
}
.footer-sns{display:flex;gap:10px;flex-wrap:wrap}
.footer-lic{margin-top:3rem;padding:1.5rem;background:var(--color-ink-card);border-radius:12px;font-size:0.75rem;line-height:1.85;color:var(--color-text-dim)}
.footer-lic-title{font-weight:700;color:var(--color-text-pale2);font-size:0.84rem;line-height:1.6;margin-bottom:0.875rem}
.footer-lic-head{font-weight:700;color:var(--color-text-dim);font-size:0.75rem;letter-spacing:.04em;margin-bottom:0.875rem}
.footer-lic-items{display:flex;flex-direction:column;gap:6px;max-width:820px}
.footer-bottom{margin-top:1.75rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.78rem;color:var(--color-text-muted)}

/* ---- global section padding ---- */
.section{padding:5.25rem 2rem}

/* ---- section header block ---- */
.sec-header{margin-bottom:2.75rem}

/* ---- partial: instagram ---- */
.sec-instagram .sec-title{font-size:2rem}

/* ---- partial: access ---- */
.sec-access .sec-title{font-size:2.125rem;margin-bottom:1.5rem}
.sec-access .columns{--bulma-column-gap:24px}

/* ---- partial: contact form ---- */
.sec-contact-form{background:var(--color-white)}
.sec-contact-form .sec-title{font-size:2.5rem;line-height:1.3;margin-bottom:1rem}
.sec-contact-form .sec-sub{font-size:1rem;line-height:1.9;margin-bottom:2.125rem}

/* ---- footer column gap ---- */
.footer-dark .columns{--bulma-column-gap:20px}

/* ---- brewery events (shared: /brewery-events/ and top-page teaser) ---- */
.ev-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:16px;padding:2rem 2.125rem;transition:transform .2s,box-shadow .2s,border-color .2s}
.ev-card+.ev-card{margin-top:1.25rem}
.ev-card[hidden]{display:none}
.ev-card:hover{box-shadow:0 14px 40px var(--color-shadow-sm);border-color:var(--color-border-hover)}
.ev-card-featured{border-color:var(--color-amber-border);box-shadow:0 14px 40px var(--color-shadow-sm)}
.ev-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:0.875rem}
.ev-head .ev-links{margin-left:auto}
.ev-badge{font-family:'Schibsted Grotesk';font-size:0.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:0.3rem 0.75rem;line-height:1.2}
.ev-badge-upcoming{background:var(--color-amber);color:var(--color-white)}
.ev-badge-ongoing{background:var(--color-ink);color:var(--color-white)}
.ev-badge-past{background:var(--color-bg-chip);color:var(--color-text-muted)}
.ev-type{font-size:0.81rem;font-weight:700;color:var(--color-text-light)}
.ev-title{font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-size:1.5rem;font-weight:900;letter-spacing:-.01em;line-height:1.3;margin-bottom:1rem}
.ev-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem;font-size:0.94rem;color:var(--color-ink-nav)}
.ev-meta-row{display:flex;gap:16px;flex-wrap:wrap}
.ev-meta-l{flex:none;width:84px;font-size:0.78rem;font-weight:700;color:var(--color-text-light);padding-top:0.125rem}
.ev-meta-v{font-weight:500}
.ev-img-wrap{border-radius:12px;overflow:hidden;margin-bottom:1rem}
.ev-img-wrap img{width:100%;display:block}
.ev-desc{font-size:0.91rem;line-height:1.9;margin-bottom:1.125rem}
.ev-links{display:flex;flex-wrap:wrap;gap:8px}
.ev-link{font-size:0.84rem;font-weight:700;color:var(--color-ink);border:1.5px solid var(--color-border-btn);border-radius:9px;padding:0.5rem 0.875rem;transition:border-color .2s,background .2s}
.ev-link:hover{border-color:var(--color-ink);background:var(--color-bg-alt)}
.ev-note{font-size:0.81rem;color:var(--color-text-muted);margin-top:1.5rem}
.sec-ev-teaser .sec-title{font-size:2rem}
.ev-teaser-cta{margin-top:1.75rem}
@media screen and (max-width:768px){.ev-card{padding:1.5rem}.ev-title{font-size:1.25rem}.ev-meta-l{width:100%}}

/* ---- brewery logo on the event card (left of the title) ---- */
.ev-main{display:flex;gap:1.5rem;align-items:flex-start}
.ev-logo{flex:none;width:132px;border-radius:12px;overflow:hidden;background:var(--color-ink-deep)}
.ev-logo img{width:100%;display:block}
.ev-body{flex:1;min-width:0}
@media screen and (max-width:768px){.ev-main{flex-direction:column;gap:1rem}.ev-logo{width:112px}}

/* ---- official SNS section (partial: instagram.html → SNS hub) ---- */
.sns-pills{display:flex;flex-wrap:wrap;gap:10px}
.sns-pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:1 1 auto;min-width:150px;padding:0.8125rem 1.125rem;border-radius:11px;border:1px solid var(--color-amber);background:var(--color-amber);color:var(--color-white);font-family:'Schibsted Grotesk';font-size:0.875rem;font-weight:700;transition:transform .15s,background .2s,border-color .2s}
.sns-pill svg{width:18px;height:18px;flex:none}
.sns-pill:hover{background:var(--color-amber-hover);border-color:var(--color-amber-hover);transform:translateY(-2px)}
@media screen and (max-width:768px){.sns-pill{flex:1 1 calc(50% - 5px);min-width:0}}

/* ---- filters shown above the featured event ---- */
.sec-ev-next .ev-filters{align-items:center;margin-bottom:2rem}
.sec-ev-next .ev-filter-group{text-align:center}
.sec-ev-next .ev-chips{justify-content:center}

/* ======== 2026-10 期間限定スポット .hero-spot（Let's Beer Works Tap Takeover・8 周年・03 モード A → D31 で index.css から移動・全ページ共通）: ここから下は追記のみ。
   値は Claude Design の spot.css（02 INTAKE §2.2）、配置は D25（1216〜1407px は absolute で重ねる・1408px 以上は grid）、チップは D30（104px / ≤768 は 88px）。
   DOM は layouts/partials/hero_spot.html（トップ + catering / party / brewery-events / benefits / guide / english・D31）。色は既存の var(--color-*) のみ。
   .hero-spot は hidden で起動し js/spot.js が hidden を外して .hero-content に has-spot を付ける。has-spot が無い時（JS 前・JS 無効・期間外）は
   下の 1216px 以上の規則が一切当たらない = 現行の 1 カラムと同一。[hidden] を先に書く（上の .ev-card[hidden] の前例）。
   .hero-spot--flow（party / english・D31）: 1216〜1407px で見出しがカードに触れるので、その帯でも 769〜1215px と同じ CTA 下の横長のまま。1408px 以上は右列。 ======== */
.hero-spot[hidden]{display:none}
/* カード（案 1 ガラス = hero-badge と同じ白 12% + ぼかし + 白 22% の境界）。<a> 1 個・縦積み・gap 12px */
.hero-spot{display:flex;flex-direction:column;gap:12px;margin-top:1.5rem;max-width:620px;border-radius:16px;padding:18px 20px;color:var(--color-white);background:var(--color-white-12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--color-white-22);transition:border-color .2s,background .2s,transform .15s,box-shadow .2s}
.hero-spot:hover{border-color:var(--color-white-40);background:var(--color-white-14);transform:translateY(-2px)}
.hero-spot:focus-visible{outline:3px solid var(--color-amber);outline-offset:3px}
/* 強調チップ（eyebrow / 日付 2 つ / 8 周年見出し）: 写真が透けるので ink の不透明チップに amber（7.3:1・ヒーロー見出しの amber と同じ組）。display:table で文字幅ぴったり・縦積み */
.hero-spot-eyebrow{display:table;font-family:'Schibsted Grotesk';font-size:0.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;color:var(--color-amber);background:var(--color-ink);border-radius:6px;padding:4px 8px}
.hero-spot-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
.hero-spot-row--anniv{grid-template-columns:auto minmax(0,1fr);padding-top:12px;border-top:1px solid var(--color-white-22)}
.hero-spot-text{display:block;min-width:0}
.hero-spot-date{display:table;font-family:'Schibsted Grotesk','Zen Kaku Gothic New';font-size:0.81rem;font-weight:700;letter-spacing:.02em;line-height:1.2;color:var(--color-amber);background:var(--color-ink);border-radius:6px;padding:4px 8px}
.hero-spot-title{display:block;font-size:1rem;font-weight:700;line-height:1.5;margin-top:6px;text-wrap:balance}
.hero-spot-row--anniv .hero-spot-title{display:table;font-size:1.125rem;line-height:1.3;color:var(--color-amber);background:var(--color-ink);border-radius:6px;padding:3px 10px}
/* 「Let's Beer Works タップテイクオーバー」は空白でだけ折り返す（「タ / ップ」の泣き別れを防ぐ）。固有名詞の表記は変えない */
.hero-spot-title:lang(ja){word-break:keep-all;overflow-wrap:anywhere}
.hero-spot-body{display:block;font-size:0.78rem;line-height:1.7;color:var(--color-white);margin-top:4px}
.hero-spot-cta{display:inline-flex;align-items:center;gap:6px;font-size:0.84rem;font-weight:700;color:var(--color-white);text-decoration:underline;text-underline-offset:4px}
.hero-spot-arrow{font-family:'Schibsted Grotesk'}
/* ロゴの白チップ: 改変不可のロゴ PNG（白地・640×456）を縮小のみ・原寸比で置く。幅は Claude Design の値 104px（≥769px）/ 88px（≤768px・下の media）= D30（160px / 120px では「タップテイクオーバー」が列幅に入らず語中で割れた） */
.hero-spot-chip{display:block;width:104px;border-radius:12px;overflow:hidden;background:var(--color-white);border:1px solid var(--color-border);padding:.5rem}
.hero-spot-chip img{display:block;width:100%;height:auto}
/* マスコット（FAM333 の犬・webp 732×820）: 幅 72px・原寸比・背景なし。ロゴとは別の行（重ねない） */
img.hero-spot-mascot{display:block;width:72px;height:auto}
/* 769〜1215px: CTA の直下・横長。カード内を 2 列（左 = タップテイクオーバー / 右 = 8 周年・縦の区切り線）、CTA は右端。右に置くと見出しが折り返しヒーローが伸びる（00 §2.1-8 の実測） */
@media screen and (min-width:769px) and (max-width:1215px){
  .hero-spot{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eyebrow eyebrow" "tt anniv" "cta cta";gap:10px 28px;padding:1rem 1.25rem;align-items:start}
  .hero-spot-eyebrow{grid-area:eyebrow}
  .hero-spot-row--tt{grid-area:tt}
  .hero-spot-row--anniv{grid-area:anniv;padding-top:0;border-top:0;padding-left:28px;border-left:1px solid var(--color-white-22)}
  .hero-spot-cta{grid-area:cta;justify-self:end}
}
/* 1216〜1407px の --flow（party / english・D31）: 上と同じ横長（見出しの 2 行目がカードの帯に入るので重ねない。1408px 以上は下の grid で右列へ） */
@media screen and (min-width:1216px) and (max-width:1407px){
  .hero-spot--flow{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eyebrow eyebrow" "tt anniv" "cta cta";gap:10px 28px;padding:1rem 1.25rem;align-items:start}
  .hero-spot--flow .hero-spot-eyebrow{grid-area:eyebrow}
  .hero-spot--flow .hero-spot-row--tt{grid-area:tt}
  .hero-spot--flow .hero-spot-row--anniv{grid-area:anniv;padding-top:0;border-top:0;padding-left:28px;border-left:1px solid var(--color-white-22)}
  .hero-spot--flow .hero-spot-cta{grid-area:cta;justify-self:end}
}
/* 768px 以下: CTA の直下・1 列に積む（eyebrow → タップテイクオーバー → 8 周年 → CTA）。見出し・CTA の位置は変えない（D10） */
@media screen and (max-width:768px){
  .hero-spot{max-width:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "tt" "anniv" "cta";gap:12px;padding:1rem 1.125rem;margin-top:1.25rem}
  .hero-spot-eyebrow{grid-area:eyebrow}
  .hero-spot-row--tt{grid-area:tt}
  .hero-spot-row--anniv{grid-area:anniv}
  .hero-spot-cta{grid-area:cta;justify-self:start}
  .hero-spot-chip{width:88px}
}
/* 1216〜1407px（D25）: 右の縦カード 320px を absolute で重ねる（上下中央・.hero-content は上で position:relative 済み）。左の要素はカードが無い時と 1px も変わらない。
   この帯の .hero-content は 1152px（Bulma container）で内側 1088px。トップの JA 見出し 1 行 780px → 列を分けると折り返すので重ねる。見出しを長くするとカードに触れる（見出し変更時は要計測・--flow は除外）。この帯に限定する: :not() で詳細度が上がるので 1408px 以上の grid 規則（下）に勝ってしまわないように */
@media screen and (min-width:1216px) and (max-width:1407px){
  .hero-content.has-spot > .hero-spot:not(.hero-spot--flow){position:absolute;right:2rem;top:50%;transform:translateY(-50%);width:320px;max-width:none;margin-top:0}
  .hero-content.has-spot > .hero-spot:not(.hero-spot--flow):hover{transform:translateY(calc(-50% - 2px))}
}
/* 1408px 以上: 内側 1280px に余裕があるので 2 カラム grid（左 minmax(0,1fr) / 右 352px・gap 48px）。カードは左の要素ぶんの行を跨ぎ（最大 6 行: english は badge / h1 / sub / ctas / note の 5）、左の要素は DOM 順のまま自動配置で 1 列目に並ぶ */
@media screen and (min-width:1408px){
  .hero-content.has-spot{display:grid;grid-template-columns:minmax(0,1fr) 352px;column-gap:48px;align-items:center}
  .hero-content.has-spot > .hero-badge{justify-self:start}
  .hero-content.has-spot > .hero-spot{position:static;transform:none;grid-column:2;grid-row:1 / span 6;align-self:center;width:100%;max-width:none;margin-top:0}
  .hero-content.has-spot > .hero-spot:hover{transform:translateY(-2px)}
}