/* 制作サンプル（架空の店舗です）— 洋食 とおあかり（v2）。JavaScript なし。 */
@font-face{font-family:"TA Decol";src:url(fonts/kaisei-decol-700-subset.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--green:#1F3B34;--brass:#D9A441;--ink:#1A1A1A;--white:#FFFFFF;--gap:clamp(64px,10vw,128px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--green) var(--white)}
body{margin:0;background:var(--white);color:var(--ink);font-family:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-size:1rem;line-height:1.85;letter-spacing:.04em}
h1,h2,h3,p,ul,figure{margin:0}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--green);color:var(--white)}
.on-green ::selection,.on-green::selection{background:var(--brass);color:var(--green)}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:.28em}
a:hover{text-decoration:none}
a:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.on-green a{color:var(--white)}
h1,h2,h3,.wordmark,.catch,.big{font-family:"TA Decol","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;font-weight:700;line-height:1.45;letter-spacing:.06em;text-wrap:balance}

/* M-1 ページの切り替え（同じ店の4ページの間・段階的強化） */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:250ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.site-head{view-transition-name:site-head}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 上下の帯：本文の組の反転・本文と同じ大きさ・太字・固定しない */
.band{margin:0;padding:8px 24px;background:var(--ink);color:var(--white);font-size:1rem;font-weight:700}
.foot-band{padding:24px 24px 40px;background:var(--ink);color:var(--white)}
.foot-band p{margin:0}
.foot-band .label{font-weight:700}
.foot-band .label+p{margin-top:8px}
.foot-band .back{margin-top:24px}
.foot-band a{color:inherit;display:inline-flex;align-items:center;min-height:44px}
.foot-band a:focus-visible{outline-color:var(--white)}

/* ヘッダー：店名の看板と案内。375 でも4つとも見せる */
.site-head{background:var(--green);color:var(--white);padding:16px 24px 8px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:32px}
.wordmark{font-size:1.375rem;letter-spacing:.1em}
.wordmark a{color:var(--brass);text-decoration:none}
.nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;column-gap:4px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--white);text-decoration:none}
/* M-4：案内に指を乗せたとき、下の線が左から伸びる（transform だけ） */
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:3px;background:var(--brass);transform:scaleX(0);transform-origin:left center;transition:transform 180ms cubic-bezier(.16,1,.3,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:700}
@media (prefers-reduced-motion:reduce){.nav a::after{transition:none}}

/* 画像と、その真下の注記（本文と同じ大きさ・同じ濃さ） */
.gen img{width:100%;object-fit:cover}
.gen-note{margin-top:8px;font-size:1rem;line-height:1.6}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:var(--gap) 0}
.on-green{background:var(--green);color:var(--white)}
h2{font-size:clamp(1.75rem,4vw,2.5rem)}
.sec h2+p{margin-top:24px}
.sec p+p{margin-top:16px}
.more{margin-top:32px}
.more a{display:inline-flex;align-items:center;min-height:44px}

/* トップ 区切り1：375 は写真が上・店名の面が下。1280 は左4割の深緑の面に縦組みの店名・右6割に写真 */
.fv{display:grid;background:var(--green);color:var(--white)}
.fv-photo{order:-1}
.fv-photo img{aspect-ratio:4/5;object-position:50% 50%}
.fv-photo .gen-note{margin:0;padding:8px 24px 0}
.fv-panel{padding:32px 24px 56px}
.fv h1 span{display:block}
.fv h1 .s{font-size:1.25rem;color:var(--white)}
.fv h1 .l{font-size:clamp(2.75rem,13vw,4.5rem);color:var(--brass);line-height:1.2}
.catch{margin-top:24px;font-size:1.25rem;line-height:1.7}
.catch span{display:block}

/* 区切り2：本文と夜の入口の写真 */
.split{display:grid;gap:40px}
.split .text{max-width:30em}
.split .gen img{aspect-ratio:4/5}

/* 区切り3：お品書きから（大きさに差をつける） */
.dishes{display:grid;gap:48px;margin-top:48px}
.dish h3{font-size:1.375rem}
.dish h3+p{margin-top:8px}
.dish .gen{margin-bottom:20px}
.dish-lead h3{font-size:clamp(2.25rem,7vw,3.5rem);color:var(--brass)}
.dish-lead p{font-size:1.125rem}
.dish-big .gen img{aspect-ratio:4/5}
.dish-small .gen img{aspect-ratio:1/1}

/* 区切り4：大きな1文 */
.big{font-size:clamp(1.5rem,4.4vw,2.5rem);line-height:1.6;max-width:22em}
.sec h2+.big{margin-top:24px}

/* ページの頭（お品書き・仕込みのこと・店のこと） */
.page-head{padding-block:56px 64px}
.page-head h1{font-size:clamp(2.5rem,8vw,4.5rem);color:var(--brass)}
.page-head p{margin-top:16px}

/* お品書き：部ごと。写真のある部と無い部が交互 */
.course{display:grid;gap:40px}
.course h2{font-size:clamp(2rem,5vw,3rem)}
.course .items h3{margin-top:32px;font-size:1.375rem}
.course .items h2+h3{margin-top:24px}
.course .items h3+p{margin-top:4px}
.course .gen img{aspect-ratio:4/5}
/* 写真の無い部：品名を大きく、2列に並べる（1280） */
.dish-grid{display:grid;gap:32px}
.dish-grid h3{font-size:clamp(1.625rem,4vw,2.25rem)}
.dish-grid h3+p{margin-top:8px}
.course-noimg .more{margin-top:48px}

/* 仕込みのこと */
.wide-photo{margin-top:32px}
.wide-photo img{aspect-ratio:3/2;object-position:40% 45%}
.work-photo img{aspect-ratio:1/1}

.closing{margin:0}

/* フッター：店名と案内をもう一度 */
.site-foot{padding:48px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 32px;border-top:1px solid #D7DDDB}
.site-foot .wordmark a{color:var(--green)}
.site-foot .nav a{color:var(--green)}

@media (min-width:768px){
  .site-head{padding:20px 40px 12px}
  .wrap{padding:0 40px}
  .fv{grid-template-columns:2fr 3fr;min-height:min(78vh,760px)}
  .fv-photo{order:0}
  .fv-photo img{aspect-ratio:auto;height:calc(100% - 48px);min-height:520px}
  .fv-photo .gen-note{padding:12px 16px 0}
  .fv-panel{display:flex;flex-direction:row-reverse;justify-content:center;gap:40px;padding:64px 40px}
  .fv h1{writing-mode:vertical-rl;letter-spacing:.14em}
  .fv h1 .s{font-size:1.5rem}
  .fv h1 .l{font-size:clamp(3.5rem,6vw,5.5rem);line-height:1.15}
  .catch{margin-top:0;writing-mode:horizontal-tb;align-self:flex-end;font-size:1.375rem}
  .split{grid-template-columns:1fr 1fr;align-items:center;gap:64px}
  .dishes{grid-template-columns:1.1fr 1.3fr .9fr;align-items:start;gap:40px}
  .dish-small{margin-top:120px}
  .course{grid-template-columns:1fr 1fr;align-items:start;gap:64px}
  .course-noimg{grid-template-columns:1fr;gap:40px}
  .dish-grid{grid-template-columns:1fr 1fr;gap:40px 64px}
  .wide-photo img{aspect-ratio:auto;height:480px;object-position:45% 62%}
  .page-head{padding-block:80px}
  .site-foot{padding:56px 40px}
}
h1,h2,h3,.big,.catch{word-break:auto-phrase}
.wordmark a{display:inline-flex;align-items:center;min-height:44px}