/* v2 base — ページの地と、キービジュアルの帯だけ。
   値は tokens.css のものだけを使う(GENERAL-RULES.md §0)。
   ⚠️ tokens.css に無い値をここで使ったら、下の「ガイドラインに無い値」に必ず書く。 */
*{box-sizing:border-box}
body{margin:0;background:var(--washi);color:var(--fukamidori);
  font-family:var(--font-ja);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased}
img{max-width:100%}

/* キービジュアル — 1440×816 の帯(IMAGE-RULES.md §2)。画像は 2560×1600 を cover で切る。
   40% の黒い膜は CSS の層で、画像には焼かない(GENERAL-RULES.md §1)。 */
.o-kv{position:relative;aspect-ratio:1440/816;overflow:hidden;background:var(--fukamidori)}
.o-kv > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.o-kv::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:1}
.o-kv > .o-header{z-index:20}
.o-kv__inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:var(--white);
  padding-inline:var(--gutter)}
@media (max-width:768px){
  /* スマホでは帯が縦に伸びる(IMAGE-RULES.md §2「the band is proportionally much taller on a phone」)。
     ガイドラインに具体値が無いため、画面の高さいっぱいにしている → ナターシャに確認(PLAN §7) */
  .o-kv{aspect-ratio:auto;height:100svh}
}
.o-footer--wide .inner{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1024px){.o-footer--wide .inner{grid-template-columns:minmax(0,1fr)}}

/* 日英で文面を出し分ける(2026-11-04 ナターシャ指摘 #2・#6)。
   英語版は Worker の実行時翻訳だが、字数が収まらない所・口コミの原文だけは英語を固定で持つ。
   .i18n-en には translate="no" を付ける(翻訳に回さない)。<html lang> は Worker が訳先の言語に書き換える。 */
html:not([lang="en"]) .i18n-en{display:none!important}
html[lang="en"] .i18n-ja{display:none!important}