/* 光風の淡｜お品書きと淡のこと
   世界観＝黒田さんWEB案（2026-09-25）を踏襲：生成りの地・明朝・欧文イタリック・茶のフッター。
   色は淡の実装トークン（謹色 #A17E46 系）。面で塗らず、線と文字で効かせる。 */
:root{
  --kinari:#e9e3d8;      /* WEB案の地 #E6E0D6 寄り */
  --kinari-2:#f3efe6;
  --kin:#9c7842;
  --kin-d:#6b4f27;
  --sumi:#2b2824;
  --sumi-2:#5e574e;
  --line:#cfc5b2;
  --brown-1:#a37b53;
  --brown-2:#604831;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--kinari);color:var(--sumi);font-family:'Shippori Mincho','Yu Mincho','Hiragino Mincho ProN',serif;font-weight:400;line-height:1.9;letter-spacing:.06em;font-feature-settings:"palt" 0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.en{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;letter-spacing:.08em;color:var(--kin-d)}
small{font-size:.85em;color:var(--sumi-2)}

/* ナビ */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:rgba(233,227,216,.92);backdrop-filter:blur(6px);border-bottom:1px solid rgba(156,120,66,.25)}
.nav-logo img{width:34px;height:auto}
.nav nav{display:flex;gap:18px}
.nav nav a{display:flex;flex-direction:column;align-items:center;font-size:12px;letter-spacing:.18em;line-height:1.2}
.nav nav a .en{font-size:10px;margin-top:2px}

/* ヒーロー */
.hero{position:relative;height:72vh;min-height:420px;max-height:640px;overflow:hidden}
.hero picture img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.hero-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 24px}
.hero-logo{width:96px;margin-bottom:28px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.25))}
.hero-copy{font-size:15px;letter-spacing:.42em;text-indent:.42em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;letter-spacing:.14em;margin-top:10px;opacity:.9}

/* ステートメント */
.statement{padding:72px 24px 64px;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.statement .v{font-size:20px;font-weight:500;letter-spacing:.3em;text-indent:.3em;color:var(--kin-d)}
.statement-body{max-width:560px;font-size:14px;line-height:2.3;display:flex;flex-direction:column;gap:22px}

/* 見出し共通 */
.ttl{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:22px;font-weight:500;letter-spacing:.32em;text-indent:.32em;color:var(--sumi);margin-bottom:28px}
.ttl .en{font-size:14px;letter-spacing:.12em;text-indent:0}

/* お品書き */
.menu{padding:56px 0 24px;background:var(--kinari-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.menu-note{text-align:center;font-size:12px;color:var(--sumi-2);padding:0 24px;margin:-10px 0 34px}
.course-grid{display:grid;grid-template-columns:1fr;gap:56px;padding:0 20px;max-width:1120px;margin:0 auto}
.course img{width:100%;aspect-ratio:4/3;object-fit:cover}
.course-txt{padding:22px 4px 0}
.course h3{display:flex;align-items:baseline;gap:12px;font-size:20px;font-weight:500;letter-spacing:.3em}
.course h3 .en{font-size:14px;letter-spacing:.08em}
.time{font-size:13px;color:var(--kin-d);margin-top:8px;line-height:1.8}
.time b{font-weight:500;font-size:16px;letter-spacing:.04em}
.sep{border:0;height:1px;width:40px;background:var(--kin);opacity:.7;margin:16px 0 18px}
.dish{display:block}
.dish .row{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.dish dt{font-size:17px;font-weight:500;letter-spacing:.16em;white-space:nowrap}
.dish .row::after{content:"";order:2;flex:1;border-bottom:1px dotted rgba(107,79,39,.55);transform:translateY(-5px)}
.dish dd{order:3;font-size:17px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.dish .ds{font-size:12.5px;line-height:1.9;color:var(--sumi-2);margin-top:4px}
.lead{font-size:14px;line-height:2.1}
.lead.small{font-size:12.5px;color:var(--sumi-2);margin-top:14px}
.drink{font-size:12.5px;line-height:2;color:var(--sumi-2);margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.drink .lb{display:block;font-size:12px;letter-spacing:.2em;color:var(--kin-d);margin-bottom:2px}
.drink b{font-weight:500;color:var(--sumi);margin-left:4px}

/* 淡の品々 */
.items{padding:64px 0 40px}
.items-lead{text-align:center;font-size:14px;line-height:2.2;padding:0 24px;margin:-8px 0 36px}
.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;padding:0 16px;max-width:1120px;margin:0 auto}
.item-grid img{width:100%;aspect-ratio:1;object-fit:cover}
.item-grid figcaption{font-size:12px;line-height:1.8;color:var(--sumi-2);padding:10px 2px 0}
.item-grid figcaption b{display:block;font-weight:500;font-size:14px;letter-spacing:.14em;color:var(--sumi);margin-bottom:2px}

/* 場 */
.place{padding:56px 0 48px;background:var(--kinari-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.place-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:0 16px;max-width:1120px;margin:0 auto}
.place-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.place-copy{text-align:center;font-size:14px;line-height:2.3;letter-spacing:.14em;margin-top:34px;padding:0 24px}

/* ご予約・ご案内 */
.info{padding:64px 20px 56px;max-width:760px;margin:0 auto}
.links{display:flex;flex-direction:column;gap:12px}
.btn{display:flex;flex-direction:column;align-items:center;padding:16px 18px;border:1px solid var(--kin);color:var(--kin-d);font-size:15px;letter-spacing:.22em;text-indent:.22em;background:rgba(255,255,255,.35);transition:background .2s}
.btn:hover{background:rgba(156,120,66,.12)}
.btn .en{font-size:11.5px;letter-spacing:.08em;text-indent:0;font-style:normal;font-family:inherit;color:var(--sumi-2);margin-top:4px}
.gift{text-align:center;font-size:13px;line-height:2;margin:22px 0 40px;color:var(--sumi)}
.facts{display:flex;flex-direction:column}
.facts div{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.9}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{color:var(--kin-d);letter-spacing:.18em;font-weight:500}
.facts a{text-decoration:underline;text-underline-offset:3px}

/* フッター */
.foot{background:linear-gradient(180deg,var(--brown-1),var(--brown-2));color:#fff;text-align:center;padding:64px 24px 40px}
.foot-logo{width:120px;margin:0 auto 26px}
.foot-copy{font-size:13px;letter-spacing:.36em;text-indent:.36em;margin-bottom:26px}
.foot-addr{font-size:12px;letter-spacing:.08em;line-height:2;opacity:.95}
.foot-sns{font-size:12px;letter-spacing:.1em;margin-top:8px;opacity:.95}
.foot-co{font-size:11px;letter-spacing:.2em;margin-top:30px;opacity:.75}

@media (max-width:699px){.statement-body br,.items-lead br,.place-copy br{display:none}}

/* タブレット以上 */
@media (min-width:700px){
  .nav{padding:14px 32px}
  .nav nav{gap:30px}
  .nav nav a{font-size:13px}
  .hero{height:78vh;max-height:760px}
  .hero-logo{width:120px}
  .hero-copy{font-size:18px}
  .statement{padding:110px 24px 96px}
  .statement .v{font-size:24px}
  .statement-body{font-size:15px}
  .ttl{font-size:26px}
  .menu{padding:88px 0 40px}
  .course-grid{grid-template-columns:repeat(3,1fr);gap:28px;padding:0 32px}
  .course img{aspect-ratio:4/5}
  .course h3{font-size:21px}
  .item-grid{grid-template-columns:repeat(4,1fr);gap:28px 20px;padding:0 32px}
  .place-grid{grid-template-columns:repeat(3,1fr);padding:0 32px}
  .links{flex-direction:row}
  .btn{flex:1}
  .facts div{grid-template-columns:120px 1fr;font-size:14px}
}
