/* ===== トップページ専用 ===== */

/* ---- ヒーロー ---- */
.hero {
  display: grid; grid-template-columns: 24% 1fr 27%;
  min-height: calc(100dvh - var(--header-h)); max-height: 900px;
}
.hero__copy { position: relative; display: flex; flex-direction: row-reverse; justify-content: center; gap: 28px; padding: 40px 16px; }
.hero__copy h1 { writing-mode: vertical-rl; font-size: clamp(30px, 2.8vw, 44px); font-weight: 600; line-height: 1.6; letter-spacing: 0.16em; }
.hero__side { writing-mode: vertical-rl; margin-top: 90px; font-size: 13px; line-height: 2.1; }
.hero__visual { position: relative; overflow: hidden; }
.hero__overlay {
  position: absolute; top: 40px; right: 40px; writing-mode: vertical-rl;
  color: #fff; font-size: 17px; line-height: 2; letter-spacing: 0.2em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.hero__info { display: flex; flex-direction: column; gap: 28px; padding: 32px 28px; }
.hero__meta { display: grid; gap: 18px; }
.hero__meta dt { margin-bottom: 4px; color: var(--gold); font-size: 11px; }
.hero__meta dd { font-size: 13px; line-height: 1.7; }
.hero__meta b { display: block; font-size: 20px; font-weight: 500; }
.hero__meta small { font-size: 11px; }
.hero__cta { display: grid; gap: 10px; }
.hero__cta .btn { min-height: 50px; font-size: 14px; }
.hero__scenes h2 { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; font-size: 13px; font-weight: 500; }
.hero__scenes h2::before, .hero__scenes h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hero__scenes ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; text-align: center; font-size: 12px; }
.hero__scenes img { aspect-ratio: 1; height: auto; margin-bottom: 8px; border-radius: 50%; }

/* ---- コンセプト ---- */
.concept { display: grid; grid-template-columns: 120px 1fr 1fr; align-items: center; gap: 48px; padding: 120px 6% 120px 3%; }
.concept__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.concept__name { font-size: 34px; font-weight: 800; line-height: 1.3; }
.concept__brand .en { font-size: 8px; letter-spacing: 0.3em; }
.concept__media { aspect-ratio: 4 / 5; }
.concept__copy { display: grid; gap: 40px; justify-items: center; }
.concept__head { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 28px; }
.concept__head h2 { writing-mode: vertical-rl; font-size: clamp(30px, 2.6vw, 42px); font-weight: 600; line-height: 1.6; letter-spacing: 0.16em; }
.concept__sub { writing-mode: vertical-rl; margin-top: 120px; font-size: 12px; line-height: 2; }
.concept__label { writing-mode: vertical-rl; color: var(--gold); font-size: 9px; }
.concept__body { max-width: 30em; font-size: 14px; line-height: 2.2; }

/* ---- おすすめ料理 ---- */
.recommended { padding: 40px 0 100px; }
.dish { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 56px; margin-bottom: 28px; }
.dish:nth-of-type(even) .dish__media { order: -1; }
.dish:nth-of-type(odd) .dish__media { order: 2; }
.dish__media { aspect-ratio: 16 / 7; }
.dish__type { display: flex; align-items: center; gap: 12px; color: var(--sub); font-size: 12px; }
.dish__type::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.dish h3 { margin: 10px 0 14px; font-size: 26px; font-weight: 600; line-height: 1.4; }
.dish__copy > p:not([class]) { color: var(--sub); font-size: 13px; line-height: 2; }
.dish__price { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font-size: 13px; }
.dish__price::before { content: ""; width: 70px; height: 1px; background: var(--line); align-self: center; }
.dish__price strong { font-size: 24px; font-weight: 500; }
.recommended__more { width: min(100%, 420px); margin: 48px auto 0; }

/* ---- 店内・ご利用シーン ---- */
.scene { padding: 40px 0 100px; }
.scene__lead { margin: -20px 0 40px; text-align: center; font-size: 14px; line-height: 2; }
.scene__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.seat img { aspect-ratio: 16 / 10; height: auto; }
.seat h3 { margin: 14px 0 6px; font-size: 19px; font-weight: 600; }
.seat p { color: var(--sub); font-size: 13px; line-height: 1.9; }
.seat--main { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 40px; }
.seat--main img { aspect-ratio: 16 / 8; }

/* ---- 店舗情報 ---- */
.shop { padding: 40px 0 100px; }
.shop__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 24px; }
.shop__data div { display: grid; grid-template-columns: 6em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.shop__data dt { color: var(--sub); }
.shop__photo, .shop__map { min-height: 340px; }

/* =================== タブレット・スマホ =================== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; max-height: none; }
  .hero__visual { order: -1; aspect-ratio: 4 / 3; }
  .hero__overlay { top: 20px; right: auto; left: 22px; font-size: 15px; }
  .hero__copy { flex-direction: column; align-items: center; gap: 14px; padding: 32px 16px 8px; text-align: center; }
  .hero__copy h1 { writing-mode: horizontal-tb; font-size: clamp(26px, 7.4vw, 38px); line-height: 1.55; }
  .hero__lead { font-size: 13px; line-height: 2; }
  .hero__info { gap: 24px; padding: 20px 16px 40px; }
  .hero__meta { grid-template-columns: 1fr 0.8fr 1.3fr; gap: 0; }
  .hero__meta > div { padding: 0 10px; border-left: 1px solid var(--line); }
  .hero__meta > div:first-child { padding-left: 0; border-left: 0; }
  .hero__meta dd { font-size: 12px; }
  .hero__meta b { font-size: 15px; }
  .hero__cta { grid-template-columns: 1fr 1fr; }
  .hero__cta .btn { padding: 0 12px; gap: 8px; font-size: 13px; }
  .hero__scenes ul { gap: 16px; padding: 0 4%; }

  .concept { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 24px 0 64px; }
  .concept__media { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .concept__copy { gap: 20px; padding-right: 16px; }
  .concept__head { gap: 14px; }
  .concept__head h2 { font-size: clamp(22px, 6vw, 30px); }
  .concept__sub { margin-top: 70px; font-size: 11px; }
  .concept__body { grid-column: 1 / -1; padding: 0 16px; font-size: 13px; line-height: 2.1; }
  .concept__copy { display: contents; }
  .concept__head { justify-self: center; align-self: center; }

  .recommended, .scene, .shop { padding: 24px 0 64px; }
  .dish { grid-template-columns: 1.1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .dish:nth-of-type(n) .dish__media { order: -1; aspect-ratio: auto; height: 100%; min-height: 150px; }
  .dish h3 { margin: 6px 0 8px; font-size: 17px; }
  .dish__type { font-size: 11px; }
  .dish__copy > p:not([class]) { font-size: 12px; line-height: 1.8; }
  .dish__price { margin-top: 8px; }
  .dish__price::before { display: none; }
  .dish__price strong { font-size: 19px; }
  .recommended__more { margin-top: 28px; }

  .scene__lead { margin: -8px 0 24px; font-size: 13px; }
  .scene__grid { gap: 20px 12px; }
  .seat--main { grid-template-columns: 1.4fr 1fr; gap: 14px; }
  .seat--main img { aspect-ratio: auto; height: 100%; min-height: 180px; }
  .seat h3 { margin-top: 10px; font-size: 16px; }
  .seat p { font-size: 12px; line-height: 1.8; }

  .shop__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .shop__data { grid-column: 1 / -1; }
  .shop__data div { grid-template-columns: 5.5em 1fr; padding: 9px 0; font-size: 12px; }
  .shop__photo, .shop__map { min-height: 0; aspect-ratio: 1; }
}

@media (max-width: 480px) {
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .hero__meta > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .seat--main { grid-template-columns: 1fr; }
  .seat--main img { aspect-ratio: 16 / 10; min-height: 0; }
}