/* カフェルナカルド

   姉妹サイト（工房・アカデミー・入口）と同じ骨格で、地の色だけ反転させている。
   あちらは夜、こちらは朝。余白の取り方・明朝の見出し・1枚で完結する構成は
   そのまま揃えているので、色が違っても同じ一族に見える。

   暗い画面は「静かな大人の店」を語ってしまい、
   「お子さん連れでも過ごしやすい」という店のいちばんの強みと逆を向く。
   だからここだけは明るい地で組んでいる。 */

:root {
  color-scheme: light;

  --ground:   #FBF7F0;   /* 生成り。純白より少し温かい */
  --ground-2: #DBC29F;   /* 木の天板。ここに縞を重ねて木目にする */
  --ink:      #2E241C;   /* 濃い茶。黒よりやわらかい */
  --ink-2:    #443729;   /* リード文。木目と落ち葉が重なった最悪の地でも 5.11:1 */
  --muted:    #463829;   /* 添えの文字。木目と落ち葉が重なった最悪の地でも 5.07:1 */

  /* 月あかり色は4サイト共通のアクセントだが、明るい地の上ではそのままだと
     文字として読めない（入口サイトの #E8C98F は生成りの上で 1.49:1 しかない）。
     そこで用途ごとに濃さを変えている。数値は実測したコントラスト比。 */
  --moon:      #57390C;  /* 文字として使う金。木目と落ち葉が重なった最悪の地でも 4.72:1 */
  --moon-fill: #8A5F1A;  /* 塗りボタンの地。白文字を載せて 5.49:1 */
  --moon-deep: #4E330B;  /* 塗りボタンに触れたとき */
  --moon-lit:  #E8C98F;  /* 濃い地（足もと）の上でだけ使う。#2E241C の上で 9.52:1 */
  /* 木と緑。店にある材料をそのまま色にしている。
     木＝テーブルの天板、緑＝窓辺の植物。どちらも主役ではないので、
     木目はごく薄い縞、緑は小さな印と見出しにだけ使う。 */
  --wood:      #C8A57A;
  --wood-deep: #8B6A45;
  --leaf:      #2E4624;  /* 木目と落ち葉が重なった最悪の地でも 4.67:1 */
  --leaf-soft: rgba(46, 70, 36, .12);

  --hair:      rgba(46, 36, 28, .16);
  --hair-lit:  rgba(110, 74, 18, .42);

  --mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
            YuMincho, "Noto Serif JP", "MS PMincho", serif;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
            "Yu Gothic", "Noto Sans JP", Meiryo, system-ui, sans-serif;
  --latin:  "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 62rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--ground);
  padding: .8em 1.2em;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap {
  width: min(100% - clamp(1.5rem, 6vw, 3rem), var(--wrap));
  margin-inline: auto;
}

/* ---------- 見出しの型 ---------- */
.eyebrow {
  margin: 0;
  font-family: var(--latin);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--moon);
}

.section__title {
  margin: .5em 0 0;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: .14em;
  line-height: 1.6;
}

.section__lead {
  margin: 1.4em auto 0;
  max-width: 34em;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 金は「予約・購入」、緑は「子ども・食べもの」。
   小見出しの色で、その節が何の話かを先に伝えている */
.eyebrow--leaf { color: var(--leaf); }

/* 見出しの下に小枝を一本。店の窓辺に置いた植物から採った意匠で、
   節の変わり目を「線」ではなく「草」で示している。
   画像ではなく SVG を CSS に埋めているので、追加の読み込みは発生しない */
.section__title + .sprig,
.sprig {
  display: block;
  width: clamp(6.5rem, 20vw, 9rem);
  height: 1.5rem;
  margin: 1.1rem auto 0;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' fill='none' stroke='%232E4624' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M4 12h48M108 12h48'/%3E%3Cpath d='M80 3c-5.5 3.2-8 6-8 9s2.5 5.8 8 9c5.5-3.2 8-6 8-9s-2.5-5.8-8-9z'/%3E%3Cpath d='M80 3v18'/%3E%3Cpath d='M66 7c-4.5.6-7 2.6-7.6 5 2.4.6 5.4-.4 7.6-5z'/%3E%3Cpath d='M94 17c4.5-.6 7-2.6 7.6-5-2.4-.6-5.4.4-7.6 5z'/%3E%3Cpath d='M66 17c-4.5-.6-7-2.6-7.6-5 2.4-.6 5.4.4 7.6 5z' opacity='.55'/%3E%3Cpath d='M94 7c4.5.6 7 2.6 7.6 5-2.4.6-5.4-.4-7.6-5z' opacity='.55'/%3E%3C/svg%3E");
}
.sprig--gold {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' fill='none' stroke='%2357390C' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M4 12h48M108 12h48'/%3E%3Cpath d='M80 3c-5.5 3.2-8 6-8 9s2.5 5.8 8 9c5.5-3.2 8-6 8-9s-2.5-5.8-8-9z'/%3E%3Cpath d='M80 3v18'/%3E%3Cpath d='M66 7c-4.5.6-7 2.6-7.6 5 2.4.6 5.4-.4 7.6-5z'/%3E%3Cpath d='M94 17c4.5-.6 7-2.6 7.6-5-2.4-.6-5.4.4-7.6 5z'/%3E%3C/svg%3E");
}

.section {
  position: relative;
  overflow: hidden;          /* 端からはみ出す植物を切り取る */
  padding: clamp(3.5rem, 10vw, 6rem) 0;
}
/* 中身は必ず植物より前に出す */
.section > .wrap { position: relative; z-index: 1; }

/* 植物を置いた節は、その分だけ余白を広げる。
   植物は必ずこの広げた余白の中に収まるので、
   節の中身がどう変わっても文字に重なることがない。 */
.section:has(.deco--branch),
.section:has(.deco--pothos) { padding-top: clamp(6rem, 15vw, 9.5rem); }
.section:has(.deco--palm) { padding-bottom: clamp(6.5rem, 16vw, 10.5rem); }

/* 色つきの植物。tools/make_plants.py が deco/ に描き出したもの。
   店に実際に置いてある鉢から起こしている。
   文字にかからない縁だけに置き、狭い画面では引っ込める。 */
.deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: center / contain no-repeat;
}
/* いずれも節の内側に収める。端からはみ出させると切り取られ、
   植物が途中で断ち切られたように見えてしまう */
.deco--branch {
  top: .4rem; left: 0;
  width: clamp(10rem, 25vw, 20rem);
  aspect-ratio: 340 / 210;
  background-image: url("../deco/branch.svg");
}
.deco--palm {
  right: .5rem; bottom: 0;
  width: clamp(6.5rem, 16vw, 12rem);
  aspect-ratio: 300 / 380;
  background-image: url("../deco/palm.svg");
}
.deco--pothos {
  right: 1.5rem; top: 0;
  width: clamp(6rem, 14vw, 10.5rem);
  aspect-ratio: 300 / 380;
  background-image: url("../deco/pothos.svg");
}
@media (max-width: 820px) {
  /* 狭い画面では本文が端まで来るので、文字に重なる鉢は隠す。
     枝だけは上の余白に収まるので残す */
  .deco--palm, .deco--pothos { display: none; }
  .deco--branch { left: 0; top: .4rem; width: 9rem; }
}
/* 一段沈めた節は、木の天板に置いた紙のように見せる。
   縞の幅をわざと不揃いにして、規則正しい縞ではなく木目に近づけている。
   濃度は最大でも 5% 弱。文字の読みやすさを一切損なわない範囲に留める。 */
.section--tint {
  background-color: var(--ground-2);
  background-image:
    /* 木の板に落ちた葉。まばらに、うっすらと */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%232E4624' stroke-opacity='.1' stroke-width='1.2' stroke-linecap='round'%3E%3Cg transform='translate(34 40) rotate(-18)'%3E%3Cpath d='M0 0c-9 5-13 10-13 15s4 10 13 15c9-5 13-10 13-15S9 5 0 0z'/%3E%3Cpath d='M0 0v30'/%3E%3C/g%3E%3Cg transform='translate(178 96) rotate(34)'%3E%3Cpath d='M0 0c-7 4-10 8-10 12s3 8 10 12c7-4 10-8 10-12S7 4 0 0z'/%3E%3Cpath d='M0 0v24'/%3E%3C/g%3E%3Cg transform='translate(96 186) rotate(-62)'%3E%3Cpath d='M0 0c-8 4.5-11.5 9-11.5 13.5S-8 22.5 0 27c8-4.5 11.5-9 11.5-13.5S8 4.5 0 0z'/%3E%3Cpath d='M0 0v27'/%3E%3C/g%3E%3Cg transform='translate(222 214) rotate(12)'%3E%3Cpath d='M0 0c-6 3.5-9 7-9 10.5S-6 17.5 0 21c6-3.5 9-7 9-10.5S6 3.5 0 0z'/%3E%3Cpath d='M0 0v21'/%3E%3C/g%3E%3Cpath d='M120 34c14 6 22 14 26 26' stroke-opacity='.05'/%3E%3Cpath d='M40 152c-10 8-14 17-13 28' stroke-opacity='.05'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,
      rgba(110, 79, 48, .05) 0 5px, transparent 5px 26px),
    repeating-linear-gradient(90deg,
      rgba(110, 79, 48, .035) 0 3px, transparent 3px 63px),
    repeating-linear-gradient(90deg,
      rgba(110, 79, 48, .028) 0 8px, transparent 8px 127px);
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 260px 260px, auto, auto, auto;
}
.section__head { text-align: center; }

/* 木の板の小口。節と節のあいだに1本だけ渡す */
.wood-rule {
  height: 7px;
  border: 0;
  margin: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(46, 36, 28, .16) 0 3px, transparent 3px 17px),
    repeating-linear-gradient(90deg,
      rgba(46, 36, 28, .1) 0 5px, transparent 5px 51px),
    linear-gradient(180deg, var(--wood) 0%, var(--wood-deep) 100%);
}

/* ---------- 上の帯 ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 247, 240, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.head__in {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .7rem 0;
}
.head__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
/* ロゴは白地のまま置く。透過にすると月とカップの隙間から
   帯の色や木目が透けて絵が濁るため */
.head__mark {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--hair);
}
.head__name {
  font-family: var(--mincho);
  font-size: .98rem;
  letter-spacing: .1em;
  white-space: nowrap;
}
.head__nav {
  display: flex;
  gap: clamp(.8rem, 2.4vw, 1.6rem);
  font-size: .8rem;
  letter-spacing: .06em;
}
.head__nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.head__nav a:hover { color: var(--moon); }
/* 店名と案内の切れ目。同じ帯に文字が並ぶと一続きの一文に見えるので、
   縦の細い線と間合いで、名前と行き先を分けている */
.head__nav::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin-right: clamp(.2rem, 1vw, .6rem);
  background: var(--hair);
}
.head__in { padding: .55rem 0; }
@media (max-width: 700px) {
  .head__nav [data-optional] { display: none; }
}
/* 縦画面では店名と案内で幅を使い切ってしまい、切れ目の間合いが取れない。
   店名は帯の主役なので消さず、ロゴ・文字・字間・案内の間隔を少しずつ削って、
   切れ目のぶんの幅をひねり出している。数値は 360px で測って決めた */
@media (max-width: 560px) {
  .head__in { gap: .7rem; }
  .head__mark { width: 30px; height: 30px; }
  .head__brand { gap: .45rem; }
  .head__name { font-size: .82rem; letter-spacing: .01em; }
  .head__nav { gap: .95rem; font-size: .78rem; }
}
/* ここまで狭いと、詰めても店名と案内が触れてしまう。
   ロゴが同じ場所で同じ役目（トップへ戻る）を果たすので、文字の店名だけ畳む */
@media (max-width: 339px) {
  .head__name { display: none; }
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  min-height: clamp(26rem, 78vh, 40rem);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(251, 247, 240, .96) 0%,
      rgba(251, 247, 240, .92) 38%,
      rgba(251, 247, 240, .62) 56%,
      rgba(251, 247, 240, .18) 74%,
      rgba(251, 247, 240, .04) 100%);
}
.hero__in { position: relative; z-index: 2; padding: clamp(3rem, 9vw, 5rem) 0; }
.hero__copy {
  margin: .6em 0 0;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.55rem, 5.6vw, 2.5rem);
  line-height: 1.85;
  letter-spacing: .1em;
  max-width: 15em;
}
.hero__sub {
  margin: 1.6em 0 0;
  max-width: 26em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__hours {
  margin: 2em 0 0;
  padding: 1em 1.2em;
  display: inline-grid;
  gap: .2em;
  background: rgba(251, 247, 240, .82);
  border-left: 3px solid var(--moon);
  font-size: .84rem;
  line-height: 1.9;
}
.hero__hours b { font-weight: 600; letter-spacing: .08em; }
.hero__hours span { color: var(--ink-2); }

@media (max-width: 860px) {
  /* 縦画面では文字がヒーローのほぼ全高を占めるので、写真の見える場所を
     上に確保してから、文字が始まる高さでヴェールを一気に濃くする。
     濃度は文字の位置で実測して決めている（下の数値を動かすなら測り直すこと） */
  .hero {
    align-items: end;
    min-height: clamp(34rem, 97vh, 50rem);
  }
  .hero__veil {
    background: linear-gradient(180deg,
      rgba(251, 247, 240, 0) 0%,
      rgba(251, 247, 240, .04) 38%,
      rgba(251, 247, 240, .62) 46%,
      rgba(251, 247, 240, .93) 53%,
      rgba(251, 247, 240, .96) 100%);
  }
  /* 文字の塊を薄く畳んで、そのぶんを写真に返す。
     行間と余白を詰めた数値なので、ここを緩めると写真がまた隠れる */
  .hero__in { padding-bottom: clamp(1.4rem, 4.5vw, 2.2rem); }
  .hero__copy { font-size: clamp(1.45rem, 5.3vw, 2rem); line-height: 1.7; }
  .hero__hours { margin-top: 1.4em; }
  .hero .btns { margin-top: 1.4em; }
  /* 縦画面では文字の塊がヒーローのほぼ全高を占めてしまい、写真の居場所がない。
     説明文はすぐ下の「私たちの想い」で同じことを述べているので、
     ここでは省いて、空いた分を写真に回している（文章は HTML には残る） */
  .hero__sub { display: none; }
}

/* ---------- ボタン ---------- */
.btns {
  margin: 2.2em 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.5em;
  border: 1px solid var(--hair-lit);
  border-radius: 2px;
  font-size: .84rem;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover, .btn:focus-visible { background: rgba(122, 82, 20, .09); border-color: var(--moon); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* 塗りは「席を予約する」だけ。ページで唯一の塗りボタンにして、
   電話より先に目が行くようにしている */
.btn--main {
  background: var(--moon-fill);
  border-color: var(--moon-fill);
  color: #FFFCF6;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(122, 82, 20, .22);
}
.btn--main:hover, .btn--main:focus-visible { background: var(--moon-deep); border-color: var(--moon-deep); }

/* ---------- 想い ---------- */
.story {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) { .story { grid-template-columns: 1fr 1fr; } }
.story p { margin: 0 0 1.4em; text-wrap: pretty; }
.story p:last-child { margin-bottom: 0; }
/* p.〜 と書いているのは優先度のため。.story p の指定に負けないようにする */
p.story__quote {
  font-family: var(--mincho);
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  line-height: 2;
  letter-spacing: .1em;
  border-left: 3px solid var(--moon);
  padding-left: 1.2em;
  /* 改行は入れない。手で入れると画面幅ごとに折り返しと噛み合わず、
     「環境が／なかっただけ。」のような不自然な切れ方になる。
     balance は各行の長さを揃えて折り返してくれる */
  text-wrap: balance;
}

/* ---------- できること（設備） ---------- */
.cares {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* 項目数が列数で割り切れないと、最終行の空きに下地（--hair）がそのまま帯で出る。
   自動配置は広い画面で4列になるため、6項目の一覧は3列に決め打ちして 3×2 に収める。
   760px 未満は自動配置のまま（1列か2列になり、6項目はどちらでも割り切れる） */
@media (min-width: 760px) {
  .cares--3 { grid-template-columns: repeat(3, 1fr); }
}
.cares li {
  background: var(--ground);
  padding: 1.6rem 1.4rem;
}
.cares b {
  display: flex;
  align-items: baseline;
  gap: .6em;
  font-family: var(--mincho);
  font-size: 1.02rem;
  letter-spacing: .1em;
  font-weight: 600;
}
/* 窓辺の植物から借りた若葉。項目ごとの印 */
.cares b::before {
  content: "";
  flex: none;
  width: 1em; height: 1em;
  transform: translateY(.12em);
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4624' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 2C6.5 5.5 4 9 4 12.5S6.5 19.5 12 23c5.5-3.5 8-7 8-10.5S17.5 5.5 12 2z'/%3E%3Cpath d='M12 2v21'/%3E%3Cpath d='M12 9l4.5-2.5M12 15l4.5-2.5M12 9L7.5 6.5M12 15l-4.5-2.5' stroke-opacity='.6'/%3E%3C/svg%3E");
}
.cares span {
  display: block;
  margin-top: .5em;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.9;
}

/* ---------- 人 ---------- */
.staff {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.staff figure { margin: 0; }
.staff img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
}
/* 写真がまだ届いていない人の枠。写真と同じ正方形で場所を取るので、
   届いたときに並びが動かない。中身を picture に差し替えるだけでよい */
.staff__noimg {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px dashed var(--hair-lit);
  border-radius: 2px;
  background: rgba(219, 194, 159, .3);
  font-family: var(--latin);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--muted);
}
.staff figcaption { margin-top: 1em; }
.staff__name {
  font-family: var(--mincho);
  font-size: 1.05rem;
  letter-spacing: .1em;
  font-weight: 600;
}
.staff__role {
  margin: .3em 0 0;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--moon);
  line-height: 1.8;
}
.staff__note {
  margin: .8em 0 0;
  font-size: .8rem;
  color: var(--ink-2);
  line-height: 1.95;
  text-wrap: pretty;
}
/* 縦画面では5人が縦一列に並び、スタッフ紹介だけで画面5枚ぶん
   スクロールすることになるので、2人ずつ横に並べて畳む */
@media (max-width: 560px) {
  .staff { gap: 1.5rem 1rem; grid-template-columns: 1fr 1fr; }
  .staff figcaption { margin-top: .75em; }
  .staff__name { font-size: .95rem; letter-spacing: .06em; }
  .staff__role { font-size: .68rem; line-height: 1.7; }
  .staff__note { margin-top: .6em; font-size: .74rem; line-height: 1.85; }
}

/* ---------- 二段組（駐車場・アクセス） ---------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
.split img { border-radius: 2px; }
.split__map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 2px;
}

/* ---------- 表（メニューの文字） ---------- */
.dish {
  margin: 1.6em 0 0;
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.dish caption {
  text-align: left;
  font-family: var(--mincho);
  font-size: 1.1rem;
  letter-spacing: .12em;
  font-weight: 600;
  padding-bottom: .6em;
}
.dish th, .dish td {
  border-bottom: 1px solid var(--hair);
  padding: .75em .4em;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.dish td:last-child {
  text-align: right;
  white-space: nowrap;
  font-family: var(--latin);
  letter-spacing: .04em;
}
.dish .dish__note { color: var(--muted); font-size: .78rem; }

.menu-card {
  margin: 0 0 clamp(3rem, 8vw, 4.5rem);
}
.menu-card:last-child { margin-bottom: 0; }
/* お品書きは、木のテーブルに置いた紙のように見せる。
   元の画像が 724px しかないので、板を本文の幅いっぱいに広げると
   紙が左に寄って右側に板だけが残る。板を紙の大きさに合わせて中央に置く。 */
.menu-card__sheet {
  margin: 1.8em auto 0;
  max-width: calc(724px + clamp(1.2rem, 4vw, 2rem));
  display: flex;
  justify-content: center;
  padding: clamp(.6rem, 2vw, 1rem);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(46, 36, 28, .07) 0 6px, transparent 6px 32px),
    repeating-linear-gradient(90deg,
      rgba(46, 36, 28, .05) 0 3px, transparent 3px 79px),
    linear-gradient(170deg, var(--wood) 0%, var(--wood-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(46, 36, 28, .1);
}
.menu-card__sheet img {
  border-radius: 1px;
  box-shadow: 0 6px 18px rgba(46, 36, 28, .22);
}

/* ---------- よくあるご質問 ---------- */
.faq { margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 44rem; }
.faq details {
  border-bottom: 1px solid var(--hair);
  padding: 0 1em;
  border-radius: 2px;
  transition: background .3s var(--ease);
}
/* 開いている質問だけ、木の天板の色をうっすら敷いて見分けられるようにする。
   節の地が生成りなので、白で持ち上げてもほとんど差が出ない。逆に暖色側へ振っている。
   差の付け方は「地の色」と「左の金の筋」と「問いの文字色」の3つ。
   色が見分けにくい人にも、筋の有無でどれを開いたかが分かる */
.faq details[open] {
  background: rgba(219, 194, 159, .38);
  box-shadow: inset 3px 0 0 var(--moon);
  border-bottom-color: transparent;
}
.faq details[open] + details { border-top: 1px solid var(--hair); }
.faq details[open] summary { color: var(--moon-deep); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.2em 2.2em 1.2em 0;
  position: relative;
  font-family: var(--mincho);
  font-size: 1rem;
  letter-spacing: .08em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .4em; top: 50%;
  width: .55em; height: .55em;
  border-right: 1px solid var(--moon);
  border-bottom: 1px solid var(--moon);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq p {
  margin: 0;
  padding: 0 0 1.5em;
  font-size: .88rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- 姉妹の入口 ---------- */
.family {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
/* マス目は同じ高さに伸びるが、中のリンクは文章の分しか高さを持たない。
   そのままだと文章の短いカードの下に隙間が空き、マス目の間の罫が透ける。
   リンク側をマス目いっぱいに伸ばして塞ぐ */
.family li { display: flex; }
.family a {
  flex: 1;
  background: var(--ground);
  padding: 1.6rem 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: background .4s var(--ease);
}
.family a:hover { background: var(--ground-2); }
.family b {
  display: block;
  font-family: var(--mincho);
  font-size: 1.02rem;
  letter-spacing: .1em;
  font-weight: 600;
}
.family span {
  display: block;
  margin-top: .5em;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.9;
}
.family em {
  display: block;
  margin-top: .8em;
  font-family: var(--latin);
  font-size: .72rem;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--moon);
}

/* ---------- 足もと ---------- */
.foot {
  position: relative;
  background: var(--ink);
  color: #E9E0D3;
  padding: clamp(3.5rem, 8vw, 4.5rem) 0 clamp(2.5rem, 7vw, 3.5rem);
  font-size: .8rem;
}
/* 足もとの縁を這う蔓。濃い地なので、月あかり色の線で描く */
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.4rem;
  pointer-events: none;
  background: left top / 300px 2.4rem repeat-x
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' fill='none' stroke='%23E8C98F' stroke-opacity='.42' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 8c26 0 42 10 62 10s34-10 60-10 42 10 62 10 34-10 60-10 42 10 56 10'/%3E%3Cg transform='translate(40 18) rotate(24)'%3E%3Cpath d='M0 0c-6 3.5-9 7-9 10.5S-6 17.5 0 21c6-3.5 9-7 9-10.5S6 3.5 0 0z'/%3E%3Cpath d='M0 0v21'/%3E%3C/g%3E%3Cg transform='translate(104 16) rotate(-20)'%3E%3Cpath d='M0 0c-5 3-7.5 6-7.5 9S-5 15 0 18c5-3 7.5-6 7.5-9S5 3 0 0z'/%3E%3Cpath d='M0 0v18'/%3E%3C/g%3E%3Cg transform='translate(166 18) rotate(18)'%3E%3Cpath d='M0 0c-6 3.5-9 7-9 10.5S-6 17.5 0 21c6-3.5 9-7 9-10.5S6 3.5 0 0z'/%3E%3Cpath d='M0 0v21'/%3E%3C/g%3E%3Cg transform='translate(232 16) rotate(-26)'%3E%3Cpath d='M0 0c-5 3-7.5 6-7.5 9S-5 15 0 18c5-3 7.5-6 7.5-9S5 3 0 0z'/%3E%3Cpath d='M0 0v18'/%3E%3C/g%3E%3C/svg%3E");
}
.foot__in {
  display: grid;
  gap: clamp(1.8rem, 5vw, 3rem);
}
@media (min-width: 700px) { .foot__in { grid-template-columns: 1.35fr 1fr; } }
.foot p { margin: 0 0 .35em; line-height: 1.95; }
.foot a { color: var(--moon-lit); text-decoration: none; border-bottom: 1px solid rgba(232, 201, 143, .35); }
.foot a:hover { border-bottom-color: var(--moon-lit); }

/* ロゴは白地の札のまま置く。透過にすると月とカップの隙間から
   地の色が透けて絵が濁るため */
.foot__brand { display: flex; align-items: start; gap: clamp(1rem, 3vw, 1.4rem); }
.foot__mark {
  width: clamp(56px, 12vw, 72px);
  height: clamp(56px, 12vw, 72px);
  flex: none;
  border-radius: 8px;
}
.foot__name {
  font-family: var(--mincho);
  font-size: 1.12rem;
  letter-spacing: .12em;
  margin-bottom: .7em;
}
.foot__copy {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(233, 224, 211, .18);
  font-size: .72rem;
  color: #B5A895;
}

/* ---------- スマホ下部の固定ボタン ---------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  gap: 1px;
  background: var(--hair);
  border-top: 1px solid var(--hair);
  box-shadow: 0 -6px 20px rgba(46, 36, 28, .1);
}
.dock a {
  flex: 1;
  background: var(--ground);
  padding: .95em .4em;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink);
}
.dock a.is-main { background: var(--moon-fill); color: #FFFCF6; font-weight: 600; }
@media (min-width: 768px) { .dock { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 3.6rem; } }

/* ---------- 読み込み時の演出 ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(1.1rem); }
  to   { opacity: 1; transform: none; }
}
.hero__in > * { animation: rise .9s var(--ease) both; }
.hero__in > *:nth-child(1) { animation-delay: .1s; }
.hero__in > *:nth-child(2) { animation-delay: .22s; }
.hero__in > *:nth-child(3) { animation-delay: .34s; }
.hero__in > *:nth-child(4) { animation-delay: .46s; }
.hero__in > *:nth-child(5) { animation-delay: .58s; }

@media (prefers-reduced-motion: reduce) {
  .hero__in > * { animation: none; opacity: 1; transform: none; }
  .btn, .family a, .faq summary::after { transition: none; }
}