/* ひより野キッチン /d/ 専用CSS d.css v1.2（v1.1＋縦書き帯を2列固定・段差・カードと重ならない上限高）
   依存：../assets/site.css（共通部品・無変更）
   色は依頼文§3の確定値のみ。animation の一括指定は打ち消し（animation: none）以外で使わない。 */

/* ---- 上半分の地とタイポ ---- */
.d-top { background: #FFF8EE; overflow: hidden; }
.d-top .section { padding-block: var(--space-6); }
@media (min-width: 720px) { .d-top .section { padding-block: var(--space-8); } }

.d-h {
  font-family: "Hiragino Maru Gothic ProN", var(--font-sans);
  font-size: clamp(30px, 7.5vw, 44px);
  line-height: 1.3;
}
.d-kicker {
  display: flex; align-items: center; gap: 8px;
  color: #3F7A3A; font-weight: 700; font-size: 17px;
  margin: 0 0 6px; max-width: none;
}
.d-kicker::before {
  content: ""; flex: none; width: 13px; height: 13px;
  border-radius: 50%; background: #D6452A;
}

/* ---- 写真とカード ---- */
.d-photo { margin: 0; }
.d-photo img { width: 100%; height: auto; }
.d-photo--cover img { max-height: 64vh; object-fit: cover; }
.d-photo--sq { max-width: 680px; }
.d-photo--right { margin-left: auto; }
.d-card { position: relative; background: #FFFFFF; padding: var(--space-3); }
@media (min-width: 720px) { .d-card { padding: var(--space-4); } }
.d-card > :last-child { margin-bottom: 0; }
.d-card--pull { margin-top: -56px; }
.d-card--left { width: min(100%, 620px); margin-right: auto; }
.d-card--right { width: min(100%, 620px); margin-left: auto; }
.d-card + .d-card { margin-top: var(--space-3); }
.d-label { font-weight: 700; margin: 0 0 6px; }

/* ---- ヒーロー ---- */
.d-heroimg { position: relative; }
.d-heroimg img { width: 100%; height: min(128vw, 640px); object-fit: cover; }
.d-tate {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  /* 帯の高さ：写真の高さ − 上端 16px − 白カードの重なり 84px − カードとの間 32px。
     ただし上限 14.95em＋padding 40px（1列目8字＋2列目6字−重なり1字＝13字×字送り1.15em）。
     幅 430〜540px 付近で2列が縦に離れないための拘束 */
  height: min(calc(min(128vw, 640px) - 132px), calc(14.95em + 40px));
  display: flex; flex-direction: column;   /* 縦書きでは column が右→左の列の並び。列ごとに align-self で上下を揃える */
  writing-mode: vertical-rl;
  margin: 0; padding: 20px 14px; background: #FFFFFF;
  font-family: "Hiragino Maru Gothic ProN", var(--font-sans);
  font-weight: 700; font-size: clamp(20px, 5.5vw, 32px); line-height: 1.5;
  letter-spacing: 0.15em;
  word-break: keep-all; max-width: none;
}
/* 2列に固定。1列目は帯の上端、2列目は帯の下端に揃え、段差は帯の高さから決まる（右→左に読む） */
.d-tate span { display: block; align-self: flex-start; }
.d-tate .d-tate-2 { align-self: flex-end; }
@media (min-width: 720px) { .d-tate { right: 40px; } }
.d-herocard { margin-top: -84px; width: min(100%, 660px); margin-right: auto; }
.d-kind { font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.d-name {
  font-family: "Hiragino Maru Gothic ProN", var(--font-sans);
  font-size: clamp(40px, 11vw, 64px); line-height: 1.15; margin: 0 0 10px;
}
.d-addr { font-size: 17px; margin: 0 0 14px; }
.d-sub { font-weight: 700; font-size: clamp(18px, 4.8vw, 22px); line-height: 1.7; margin: 0; }

/* ---- 署名モーション（読み込み起点。演出領域はバナー直下〜約304px） ----
   共通側（.d-plate / .d-veg / .d-steam）に name / timing-function / fill-mode、
   要素ごとの規則（.d-p1 等）に duration / delay を個別指定で置く。 */
.d-sig {
  position: relative; height: 260px; max-width: 720px;
  margin-inline: auto; cursor: pointer;
}
@media (min-width: 720px) { .d-sig { height: 300px; } }
.d-table {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: #F4C542; border-top: 3px solid #000000;
}
.d-plate {
  position: absolute; bottom: 44px; opacity: 0;
  animation-timing-function: cubic-bezier(0.18, 0.85, 0.3, 1);
  animation-fill-mode: forwards;
}
.d-plate > svg { width: 100%; height: auto; display: block; }
.d-p1 { left: 3%;  width: 84px;  animation-name: d-fly-left;   animation-duration: 700ms; animation-delay: 0ms; }
.d-p2 { left: 25%; width: 124px; animation-name: d-fly-top;    animation-duration: 800ms; animation-delay: 100ms; }
.d-p3 { left: 56%; width: 92px;  animation-name: d-fly-right;  animation-duration: 700ms; animation-delay: 150ms; }
.d-p4 { left: 79%; width: 64px;  animation-name: d-fly-bottom; animation-duration: 600ms; animation-delay: 300ms; }
.d-veg {
  position: absolute; opacity: 0;
  animation-name: d-pop;
  animation-timing-function: cubic-bezier(0.34, 1.45, 0.6, 1);
  animation-fill-mode: forwards;
}
.d-veg svg { width: 100%; height: auto; display: block; }
.d-v1 { width: 24px; left: 46%; top: -12px; animation-duration: 350ms; animation-delay: 900ms; }
.d-v2 { width: 34px; left: 14%; top: -18px; animation-duration: 350ms; animation-delay: 950ms; }
.d-v3 { width: 26px; left: 46%; top: -21px; animation-duration: 350ms; animation-delay: 1000ms; }
.d-v4 { width: 22px; left: 72%; top: -13px; animation-duration: 350ms; animation-delay: 1050ms; }
.d-v5 { width: 28px; left: 38%; top: -15px; animation-duration: 350ms; animation-delay: 1100ms; }
.d-v6 { width: 20px; left: 32%; top: -11px; animation-duration: 350ms; animation-delay: 1150ms; }
.d-steam {
  position: absolute; opacity: 0;
  animation-name: d-waft;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.d-st1 { left: 33%; bottom: 112px; animation-duration: 2600ms; animation-delay: 1500ms; }
.d-st2 { left: 39%; bottom: 124px; animation-duration: 2200ms; animation-delay: 1700ms; }
.d-st3 { left: 45%; bottom: 106px; animation-duration: 3000ms; animation-delay: 1900ms; }

@keyframes d-fly-left   { from { opacity: 0; transform: translateX(-80vw); } to { opacity: 1; transform: none; } }
@keyframes d-fly-right  { from { opacity: 0; transform: translateX(80vw); }  to { opacity: 1; transform: none; } }
@keyframes d-fly-top    { from { opacity: 0; transform: translateY(-70vh); } to { opacity: 1; transform: none; } }
@keyframes d-fly-bottom { from { opacity: 0; transform: translateY(70vh); }  to { opacity: 1; transform: none; } }
@keyframes d-pop {
  0%   { opacity: 0; transform: translateY(-28px) scale(0.4); }
  60%  { opacity: 1; transform: translateY(3px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes d-waft {
  0%   { opacity: 0; }
  20%  { opacity: 0.65; }
  55%  { opacity: 0.25; }
  80%  { opacity: 0.6; }
  100% { opacity: 0; }
}

/* 最終状態（4経路で同一：皿が並び、野菜が載り、湯気が見える）
   forwards の打ち消しには animation: none を併記し、最終値を書く。 */
.d-sig.is-done .d-plate, .d-sig.is-done .d-veg,
html.no-js .d-plate, html.no-js .d-veg {
  animation: none; opacity: 1; transform: none;
}
.d-sig.is-done .d-steam { animation-delay: 0ms; }
html.no-js .d-steam { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .d-plate, .d-veg { animation: none; opacity: 1; transform: none; }
  .d-steam { animation: none; opacity: 1; }
}

/* ---- 78品タイル（設計箇所②） ---- */
.d-menuwrap { position: relative; padding-bottom: 44px; max-width: 840px; }
.d-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 720px) { .d-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d-tile {
  min-height: 108px; display: flex; align-items: center; justify-content: center;
  padding: 8px; font-weight: 700; font-size: 21px;
  word-break: keep-all; text-align: center;
}
.d-tile--teishoku { background: #D6452A; color: #000000; }
.d-tile--pasta    { background: #F4C542; color: #000000; }
.d-tile--curry    { background: #F08A24; color: #000000; }
.d-tile--dessert  { background: #E8788F; color: #000000; }
.d-tile--drink    { background: #3F86C7; color: #000000; }
.d-tile--bento    { background: #3F7A3A; color: #FFFFFF; }
.d-tile--hors     { background: #6E3F8C; color: #FFFFFF; }
.d-tile--kakou    { background: #2E9C8F; color: #000000; }

/* 画面外から流れ込む：初期 transform だけ上書き（transition は共通部品のまま 400ms） */
.d-tiles[data-reveal-stagger] > :nth-child(odd)  { transform: translateX(-60vw); }
.d-tiles[data-reveal-stagger] > :nth-child(even) { transform: translateX(60vw); }
.d-tiles[data-reveal-stagger].is-in > * { transform: none; }
/* 遅延を100ms刻みへ上書き：8枚目 700ms＋遷移400ms＝1.1秒で完了 */
.d-tiles[data-reveal-stagger].is-in > :nth-child(1) { transition-delay: 0ms; }
.d-tiles[data-reveal-stagger].is-in > :nth-child(2) { transition-delay: 100ms; }
.d-tiles[data-reveal-stagger].is-in > :nth-child(3) { transition-delay: 200ms; }
.d-tiles[data-reveal-stagger].is-in > :nth-child(4) { transition-delay: 300ms; }
.d-tiles[data-reveal-stagger].is-in > :nth-child(5) { transition-delay: 400ms; }
.d-tiles[data-reveal-stagger].is-in > :nth-child(6) { transition-delay: 500ms; }
.d-tiles[data-reveal-stagger].is-in > :nth-child(7) { transition-delay: 600ms; }
.d-tiles[data-reveal-stagger].is-in > :nth-child(8) { transition-delay: 700ms; }
html.no-js .d-tiles[data-reveal-stagger] > * { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .d-tiles[data-reveal-stagger] > * { transform: none; }
}

/* 「78」：壁の前に浮く白カード（stagger 容器の外） */
.d-big78 {
  position: absolute; z-index: 2; bottom: 0; left: 50%;
  transform: translateX(-50%);
  margin: 0; background: #FFFFFF; padding: 14px 30px;
  white-space: nowrap;
}
.d-big78 small:first-child { margin-left: 0; margin-right: 0.3em; }

/* ---- 店主のことば ---- */
.d-person { font-weight: 700; font-size: 20px; margin: 0 0 14px; }
.d-quote {
  margin: 0 0 var(--space-3); padding: 2px 0 2px 16px;
  border-left: 3px solid #D6452A;
  max-width: var(--measure);
}
.d-quote p { margin: 0; font-weight: 700; font-size: 19px; line-height: 1.8; max-width: none; }

/* ---- 箇条書き ---- */
.d-list { padding-left: 1.3em; max-width: var(--measure); margin: 0; }
.d-list li { margin-bottom: 0.6em; }
.d-list li:last-child { margin-bottom: 0; }

/* ---- 申込ボタン（共通部品の色だけ上書き。外枠なし） ---- */
.btn.d-apply { background: #B8341C; border-color: #B8341C; color: #FFFFFF; }
.btn.d-apply:hover { background: #B8341C; border-color: #B8341C; color: #FFFFFF; }