@charset "UTF-8";

/* ==========================================================================
   restaurant-scroll — 縦長1カラム・スクロールリビール型 飲食店LP
   デザイン調整はこの :root のトークンだけで大半が変わる
   ========================================================================== */

:root {
  /* --- 配色 --- */
  --c-bg: #af2121;
  --c-text: #fff;
  --c-accent: #850e0e;          /* 特集セクションの巨大数字 */
  --c-ink: #372b00;
  --c-overlay: rgba(0, 0, 0, .65);
  --c-invert-text: var(--c-bg); /* 白地に載る文字色 */

  /* --- 書体 --- */
  --f-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --f-en: "Barlow", sans-serif;
  --w-normal: 400;
  --w-bold: 700;

  /* --- 字間（em 指定：文字サイズを変えても比率が保たれる） --- */
  --ls-wide: .26em;
  --ls-body: .25em;
  --ls-desc: .23em;
  --ls-nav: .24em;
  --ls-cta: .1em;

  /* --- 行間 --- */
  --lh-tight: 1.4;
  --lh-loose: 2.16;

  /* --- 寸法 --- */
  --w-column: 390px;            /* 本文カラム幅 */
  --w-hero: 540px;              /* ヒーロー幅（PCではここまで広がる） */
  --ratio-hero: 540 / 1496;     /* ヒーローの縦横比。幅に追従して高さが決まる */
  --h-bar: 60px;                /* ヘッダー / 固定CTA の高さ */
  --w-figure: 362px;            /* 特集セクションの写真幅 */
  --h-figure: 287px;
  --w-thumb: 116px;             /* メニューのサムネイル */
  --r-map: 8px;
  --r-button: 6px;

  /* --- リビール（スクロール連動フェード） --- */
  --reveal-duration: 800ms;
  --reveal-delay: 0ms;
  --reveal-distance: 30px;
  --reveal-ease: cubic-bezier(.4, .4, 0, 1);

  /* --- すりガラス --- */
  --blur-bar: 20px;
}

/* ==========================================================================
   ベース
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-gothic);
  font-weight: var(--w-normal);
  font-feature-settings: "palt";  /* 日本語の詰め組み。外すと字面が緩む */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p, h1, h2, h3, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   スクロールリビール

   2種類ある。位置調整の transform を持つ要素には .reveal（不透明度のみ）を、
   持たない要素には .reveal--up（不透明度＋せり上がり）を当てる。
   両方に translate を書くと、クラスが外れた瞬間に位置が飛ぶ。

   タイミングは修飾クラスで変える:
     （なし）          遅延0ms   / 800ms
     .reveal--late     遅延400ms / 800ms   … メニュー以降のブロック
     .reveal--hero     遅延400ms / 1200ms  … ヒーロー
     .reveal--header   遅延1200ms/ 1200ms  … ヘッダー（最後に浮かび上がる）

   非表示の指定は .js 配下にのみ書く。main.js が読めなかった場合や JS 無効時は
   クラスが付かず全要素が表示されたままになる（無いと JS の404で真っ白になる）。
   ========================================================================== */

.reveal,
.reveal--up {
  transition: opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
              transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
}

.js .reveal:not(.is-visible),
.js .reveal--up:not(.is-visible) { opacity: 0; }

.js .reveal--up:not(.is-visible) { transform: translateY(var(--reveal-distance)); }

.reveal--late { --reveal-delay: 400ms; }
.reveal--hero { --reveal-delay: 400ms; --reveal-duration: 1200ms; }
.reveal--header { --reveal-delay: 1200ms; --reveal-duration: 1200ms; }

/* 視差を減らす設定では移動をやめ、フェードだけ残す（動きを完全に消さない） */
@media (prefers-reduced-motion: reduce) {
  .js .reveal--up:not(.is-visible) { transform: none; }
  .reveal,
  .reveal--up { --reveal-duration: 400ms; --reveal-delay: 0ms; }
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: var(--h-bar);
  background: transparent;
  -webkit-backdrop-filter: blur(var(--blur-bar));
  backdrop-filter: blur(var(--blur-bar));  /* 背景を透かしたすりガラス */
}

.header__link,
.header__sep {
  font-weight: var(--w-bold);
  font-size: 12px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-nav);
}

.header__sep { opacity: .9; }

/* ==========================================================================
   ヒーロー
   ========================================================================== */

.hero {
  position: relative;
  width: var(--w-hero);
  max-width: 100%;
  aspect-ratio: var(--ratio-hero);
  margin: 0 auto;
  transform: translateY(calc(var(--h-bar) * -1)); /* sticky ヘッダーの下に潜り込ませる */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ==========================================================================
   本文カラム（すべてのセクションはこの 390px の中に入る）
   ========================================================================== */

.main {
  width: var(--w-column);
  max-width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   コンセプト
   ========================================================================== */

.concept {
  padding: 0 20px;
  text-align: center;
}

.concept__body {
  transform: translateY(-140px);  /* 上の余白を詰めるための位置調整 */
  font-size: 13px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

/* ==========================================================================
   特集（巨大数字＋品名＋説明＋写真）
   ========================================================================== */

.feature {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 32px;
}

.feature--left { justify-content: flex-start; }
.feature--right { justify-content: flex-end; }

.feature--right { margin-top: 96px; }
.feature--left { margin-top: 142px; }
.concept + .feature { margin-top: 0; }  /* 1つ目だけは上余白なし */

/* 数字・品名・説明はすべて重なり合う。position を明示しないと z-index が効かない */
.feature__no {
  position: relative;
  transform: translateY(-50px);
  font-family: var(--f-mincho);
  font-weight: var(--w-bold);
  font-size: 164px;
  line-height: var(--lh-tight);
  color: var(--c-accent);
}

.feature__name {
  position: relative;
  z-index: 1;              /* 品名は必ず巨大数字の上に載せる */
  font-weight: var(--w-bold);
  font-size: 20px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  margin-bottom: 24px;
  white-space: nowrap;
}

/* 品名は数字に重ねる。左右で寄る向きが反転する */
.feature--left .feature__name { transform: translate(-58px, 30px); }
.feature--right .feature__name { transform: translate(58px, 30px); }
.feature--right .feature__no { order: 1; }

/* 説明文は数字の下に食い込ませる。transform ではなく負マージンで詰めることで
   セクションの高さも同じだけ縮み、次の写真までの間隔が原寸どおりになる */
.feature__body {
  position: relative;
  order: 2;
  flex: 0 0 100%;
  margin-top: -130px;
  padding: 0 24px;
  font-size: 12px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-desc);
}

.feature--right .feature__body {
  text-align: right;
  letter-spacing: var(--ls-body);
}

/* 写真 */
.feature-figure { display: flex; }

.feature-figure--left { justify-content: flex-start; }
.feature-figure--right { justify-content: flex-end; }

.feature-figure__img {
  width: var(--w-figure);
  height: var(--h-figure);
  object-fit: cover;
}

/* ==========================================================================
   愉しみ方
   ========================================================================== */

.style {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 142px;
  text-align: center;
}

.style__title {
  font-weight: var(--w-bold);
  font-size: 20px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.style__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 340px;
  max-width: 100%;
}

.style__lead {
  margin-top: 64px;
  font-weight: var(--w-bold);
  font-size: 15px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.style__block + .style__block .style__lead { margin-top: 128px; }

.style__img {
  width: 340px;
  max-width: 100%;
  height: 270px;
  margin-top: 16px;
  object-fit: cover;
}

.style__body {
  margin-top: 24px;
  font-size: 13px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
}

/* ==========================================================================
   メニュー
   ========================================================================== */

.menu-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.menu-head__title {
  margin-top: 256px;
  font-weight: var(--w-bold);
  font-size: 32px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.menu-head__note {
  margin-top: 24px;
  font-size: 13px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
}

.menu-head__rule {
  width: 1px;
  height: 30px;
  margin-top: 32px;
  background: var(--c-text);
}

.menu-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 128px;
  padding: 0 30px;
}

.menu-category__name {
  margin-bottom: 30px;
  font-weight: var(--w-bold);
  font-size: 20px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-align: center;
}

.menu-item + .menu-item { margin-top: 48px; }

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.menu-item__button {
  flex: 0 0 var(--w-thumb);   /* テキスト量に関わらずサムネイルを正方形に保つ */
  width: var(--w-thumb);
  height: var(--w-thumb);
}

.menu-item__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-item__text {
  flex: 1 1 auto;
  padding: 0 12px;
}

.menu-item__name {
  margin-bottom: 12px;
  font-weight: var(--w-bold);
  font-size: 15px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.menu-item__desc {
  font-size: 11px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
}

/* ==========================================================================
   狭山茶（写真＋説明＋ドリンク一覧）
   ========================================================================== */

.tea__title {
  margin-top: 128px;
  font-weight: var(--w-bold);
  font-size: 20px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-align: center;
}

.tea > .feature-figure { margin-top: 24px; }

.tea__body {
  margin-top: 32px;
  padding: 0 24px;
  font-size: 12px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-desc);
}

/* ==========================================================================
   アクセス
   ========================================================================== */

.access__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 141px;
  text-align: center;
}

.access__title,
.access__subtitle {
  font-weight: var(--w-bold);
  font-size: 20px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.shops {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
  margin-top: 48px;
  padding: 0 30px 50px;
}

.shop {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.shop__name {
  font-weight: var(--w-bold);
  font-size: 18px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-wide);
}

.shop__logo {
  width: 125px;
  height: 141px;
  margin-top: 4px;
  object-fit: contain;
}

.shop__note {
  margin-top: 8px;
  font-size: 11px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
}

.shop__date {
  margin-top: 8px;
  font-family: var(--f-en);
  font-size: 12px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
}

.shop__badge {
  padding: 0 8px;
  background: var(--c-text);
  color: var(--c-invert-text);
  font-family: var(--f-en);
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: var(--ls-body);
}

.shop__address,
.shop__tel {
  margin-top: 24px;
  font-size: 11px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
}

.shop__access {
  margin-top: 24px;
  font-weight: var(--w-bold);
  font-size: 14px;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
}

.shop__tel { margin-top: 12px; }

.shop__map {
  width: 100%;
  height: 180px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--r-map);
  overflow: hidden;
}

.shop__reserve {
  margin-top: 16px;
  padding: 6px 10px;
  background: var(--c-text);
  color: var(--c-invert-text);
  border-radius: var(--r-button);
  font-weight: var(--w-bold);
  font-size: 16px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
}

/* ==========================================================================
   固定CTA
   ========================================================================== */

.cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;               /* ビューポート高に依存させない */
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: var(--h-bar);
  background: var(--c-overlay);
  -webkit-backdrop-filter: blur(var(--blur-bar));
  backdrop-filter: blur(var(--blur-bar));
}

.cta__label {
  font-family: var(--f-mincho);
  font-weight: var(--w-bold);
  font-size: 14px;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-cta);
}

.cta__icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ==========================================================================
   写真モーダル（メニュー写真の拡大）
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
}

.modal.is-open { display: flex; }

.modal__close {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.modal__img {
  position: relative;
  width: 270px;
  height: 270px;
  background: var(--c-text);
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--reveal-duration) var(--reveal-ease);
}

.modal.is-visible .modal__img { opacity: 1; }

/* ==========================================================================
   モバイル
   ========================================================================== */

/* 390px より狭い端末でも横スクロールが出ないよう、固定幅を相対値に落とす */
@media (max-width: 390px) {
  :root { --w-figure: calc(100% - 28px); }
}