/* =========================================================
   C案「暖簾」― washoku-kappo-multipage のトップ違い（トップページのみ）
   参照：徐福寿司（生成り×藍、民芸・和レトロ寄り）
   生成りの地・藍の文字。朱は価格と小見出しの一点だけ。横書き中心で、名物を前に出す
   ========================================================= */
:root {
  --kinari:  #E7E3D2;   /* 生成り */
  --kinari-2:#DDD7C2;
  --ai:      #0B3A5C;   /* 藍（文字と暖簾） */
  --ai-2:    #4B6378;   /* 補足文字 */
  --line:    rgba(11, 58, 92, .2);
  --shu:     #A2332F;   /* 朱：価格・小見出しだけ */

  --f-display: "Shippori Antique B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body:    "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --gutter: clamp(20px, 5vw, 72px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kinari); color: var(--ai); font-family: var(--f-body); font-size: 16px; line-height: 2; letter-spacing: .06em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.n-proposal { position: fixed; left: 16px; bottom: 16px; z-index: 30; padding: 6px 14px; background: var(--kinari); border: 1px solid var(--line); font-size: 11.5px; letter-spacing: .14em; color: var(--ai-2); }

/* ---------- ヘッダー ---------- */
.n-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px var(--gutter); border-bottom: 1px solid var(--line); }
.n-mark { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-display); font-size: 22px; letter-spacing: .2em; }
.n-mark small { font-family: var(--f-body); font-size: 11.5px; letter-spacing: .3em; color: var(--ai-2); }
.n-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; font-family: var(--f-display); font-size: 14px; letter-spacing: .16em; }
.n-nav-tel { padding: 8px 18px; background: var(--ai); color: var(--kinari); letter-spacing: .1em; }

/* ---------- ヒーロー：藍の暖簾＋写真 ---------- */
.n-hero { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: calc(100vh - 80px); }
.n-noren {
  position: relative; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: clamp(28px, 4vw, 64px);
  padding: clamp(56px, 10vh, 110px) var(--gutter) 0;
  background: var(--ai); color: var(--kinari);
  /* 暖簾の切れ目：下から 45% の高さまで、縦に2本 */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 55% no-repeat,
                linear-gradient(90deg, #000 0 calc(33.3% - 3px), transparent 0 calc(33.3% + 3px), #000 0 calc(66.6% - 3px), transparent 0 calc(66.6% + 3px), #000 0) bottom / 100% 45% no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% 55% no-repeat,
                linear-gradient(90deg, #000 0 calc(33.3% - 3px), transparent 0 calc(33.3% + 3px), #000 0 calc(66.6% - 3px), transparent 0 calc(66.6% + 3px), #000 0) bottom / 100% 45% no-repeat;
}
.n-noren-name { writing-mode: vertical-rl; font-family: var(--f-display); font-weight: 400; font-size: clamp(56px, 6.6vw, 104px); letter-spacing: .2em; line-height: 1; white-space: nowrap; }
.n-noren-catch { writing-mode: vertical-rl; font-family: var(--f-body); font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: .3em; line-height: 1.9; padding-top: 2.4em; }
.n-noren-catch span { display: block; white-space: nowrap; }
.n-noren-catch span + span { padding-inline-start: 2em; }
.n-hero-photos { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); padding: clamp(28px, 4vw, 56px); gap: 0; }
.n-ph img { width: 100%; height: 100%; object-fit: cover; }
.n-ph-1 { grid-column: 1 / 10; grid-row: 1 / 9; }
.n-ph-2 { grid-column: 6 / 13; grid-row: 7 / 13; border: 10px solid var(--kinari); }

/* ---------- 店の一文と、すぐ要る情報 ---------- */
.n-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding: clamp(80px, 12vh, 140px) var(--gutter); }
.n-statement { font-family: var(--f-display); font-size: clamp(20px, 2vw, 28px); line-height: 2; letter-spacing: .1em; max-width: 22em; text-wrap: pretty; }
.n-quick { align-self: end; border-top: 2px solid var(--ai); }
.n-quick > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.9; }
.n-quick dt { color: var(--shu); letter-spacing: .3em; }

/* ---------- セクション共通 ---------- */
.n-sec { padding: 0 var(--gutter) clamp(96px, 14vh, 160px); }
.n-sec-head { display: grid; gap: 10px; max-width: 34em; margin-bottom: 40px; }
.n-kicker { font-family: var(--f-display); font-size: 13px; letter-spacing: .4em; color: var(--shu); }
.n-kicker-light { color: #E3A49C; }
.n-h { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: .14em; line-height: 1.4; }

/* 名物：写真を大きく、品名は藍の線で囲んで並べる */
.n-oden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); }
.n-oden .n-sec-head { grid-column: 1 / -1; }
.n-oden-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.n-groups { display: grid; gap: 28px; align-content: start; }
.n-group h3 { font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .3em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ai); }
.n-group ul { display: flex; flex-wrap: wrap; gap: 8px; }
.n-group li { padding: 4px 12px; border: 1px solid var(--ai); font-size: 14px; letter-spacing: .1em; line-height: 1.8; }

/* コース：横に並べる（スマホは縦） */
.n-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.n-courses li { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ai); }
.n-courses figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.n-courses h3 { font-family: var(--f-display); font-weight: 400; font-size: 19px; letter-spacing: .12em; line-height: 1.6; }
.n-price { font-family: var(--f-display); font-size: 26px; letter-spacing: .04em; color: var(--shu); line-height: 1.2; }
.n-price small { font-family: var(--f-body); font-size: 11px; color: var(--ai-2); margin-left: .4em; }
.n-items { font-size: 13.5px; line-height: 1.9; color: var(--ai-2); }

/* 店について・空間：大小をつけて2つ並べる */
.n-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.n-pair-item { display: grid; gap: 14px; }
.n-pair-item + .n-pair-item { margin-top: clamp(48px, 10vh, 120px); }
.n-pair-item figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.n-pair-item p:last-child { font-size: 15px; max-width: 26em; }

/* ご予約：藍の帯 */
.n-reserve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); padding: clamp(64px, 10vh, 110px) var(--gutter); background: var(--ai); color: var(--kinari); }
.n-tel { font-family: var(--f-display); font-size: clamp(40px, 4.6vw, 64px); letter-spacing: .06em; line-height: 1.3; margin-top: 8px; }
.n-small { font-size: 13px; opacity: .8; }
.n-facts > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(231, 227, 210, .25); font-size: 14.5px; line-height: 1.9; }
.n-facts dt { opacity: .7; letter-spacing: .3em; }

.n-foot { display: grid; gap: 4px; padding: 48px var(--gutter) 64px; font-size: 13px; color: var(--ai-2); }
.n-foot-name { font-family: var(--f-display); font-size: 20px; letter-spacing: .24em; color: var(--ai); }
.n-copy { padding-top: 12px; }
.n-spbar { display: none; }

/* ---------- スマホ（960px未満） ---------- */
@media (max-width: 959px) {
  body { font-size: 15.5px; }
  .n-nav span { display: none; }
  .n-mark small { display: none; }
  .n-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .n-noren { min-height: 72vh; padding-top: 48px; }
  .n-hero-photos { aspect-ratio: 1 / 1; padding: 20px; }
  .n-intro, .n-oden, .n-pair, .n-reserve { grid-template-columns: minmax(0, 1fr); }
  .n-pair-item + .n-pair-item { margin-top: 0; }
  .n-oden .n-groups { margin-top: 28px; }
  .n-proposal { bottom: auto; top: 76px; left: auto; right: 12px; font-size: 10.5px; }
  .n-foot { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .n-spbar {
    display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    padding: 15px; text-align: center; background: var(--ai); color: var(--kinari);
    font-family: var(--f-display); font-size: 14px; letter-spacing: .16em;
  }
  .n-nav-tel { display: none; }
}