/* D ひより野キッチン d.css v2.0（WS-02）：どこかにありそうな農家レストラン風。生成りの地、葉の緑、トマトの赤、丸ゴシック、黒板のメニュー */
@font-face { font-family: "D Display"; src: url("fonts/d-zenmaru.woff2") format("woff2"); font-weight: 700; font-display: optional; }
.co-d { --cream: #FFF8EE; --tomato: #D6452A; --tomato-t: #B23A1E; --leaf: #3F7A3A; --leaf-t: #2F5E2B; --soil: #2B2118; --board: #22322A; --chalk: #F6F2E6;
  --round: "D Display", var(--font-ui); background: var(--cream); color: var(--soil); }
.d-hero-img { padding: 12px 12px 0; }
.d-hero-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.d-hero-text { padding: 26px var(--gutter) 8px; text-align: center; }
.d-tag { font-family: var(--round); font-weight: 700; color: var(--leaf-t); font-size: clamp(21px, 5.8vw, 30px); line-height: 1.5; margin: 0 0 8px; }
.d-name { font-family: var(--round); font-weight: 700; color: var(--tomato-t); font-size: clamp(34px, 9.8vw, 76px); line-height: 1.2; }
.d-kind { font-size: 16px; font-weight: 700; margin: 12px 0 2px; }
.d-loc { font-size: 16px; margin: 0 0 14px; }
.d-lead { font-size: 18px; max-width: 26em; margin-inline: auto; }
@media (min-width: 960px) {
  .d-hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; max-width: 1280px; margin: 0 auto; }
  .d-hero-img { padding: 24px; } .d-hero-text { text-align: left; padding: 24px 48px 24px 16px; } .d-lead { margin-inline: 0; }
  .d-name { font-size: clamp(40px, 4.2vw, 60px); }
}
.d-sec { padding: 64px 0 8px; }
.d-two { display: grid; gap: 20px; align-items: center; }
@media (min-width: 960px) { .d-two { grid-template-columns: 1fr 1.15fr; gap: 56px; } }
.d-fig { margin: 0; } .d-fig img { width: 100%; border-radius: 20px; aspect-ratio: 4 / 3; object-fit: cover; }
.d-h2 { font-family: var(--round); font-weight: 700; color: var(--leaf-t); font-size: clamp(27px, 7.4vw, 40px); line-height: 1.35; margin: 4px 0 16px; }
.d-h3 { font-family: var(--round); font-weight: 700; color: var(--tomato-t); font-size: 21px; margin: 24px 0 8px; }
.d-list { list-style: none; padding: 0; }
.d-list li { position: relative; padding-left: 1.5em; margin-bottom: 0.6em; }
.d-list li::before { content: ""; position: absolute; left: 0.25em; top: 0.72em; width: 0.6em; height: 0.6em; background: var(--leaf); border-radius: 0 60% 0 60%; }
.d-list .cat-label { font-weight: 700; }
.d-board { position: relative; background: var(--board); color: var(--chalk); border: 12px solid #7A4E26; border-radius: 14px; padding: 26px 18px 30px; max-width: 760px; margin: 0 auto; }
.d-board .d-h2 { color: var(--chalk); text-align: center; margin-top: 0; }
.d-menu { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-family: var(--round); font-weight: 700; font-size: 21px; text-align: center; }
.d-total { font-family: var(--round); font-weight: 700; font-size: 32px; text-align: center; margin: 20px 0 0; }
.d-chalk { display: block; width: 56%; height: 4px; margin: 4px auto 0; background: var(--chalk); border-radius: 2px; transform-origin: left center; }
.js-motion .d-board .d-chalk { transform: scaleX(0); transition: transform 900ms ease-out 250ms; }
.js-motion .d-board.is-in .d-chalk { transform: none; }
.d-menu-note { max-width: 36em; margin: 24px auto 0; }
.d-gallery { list-style: none; padding: 0; margin: 56px auto 0; width: min(100% - 24px, 960px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }