@charset "UTF-8";
/* ============================================================
   森の喫茶室 Daydream ― 共通スタイル
   全ページ（index.html / 404.html / pages/story1〜9.html）が
   このファイル1つを読み込んで見た目を決めています。

   目次（Ctrl+Fで見出し番号を検索すると早いです）
   1.  変数（色・サイズなど、あとで使い回す値のリスト）
   2.  ベース（全要素に共通の初期設定）
   3.  ヘッダー（固定の上部バー：ベル・ナビ・検索・ハンバーガー）
   4.  レイアウト（ページ全体の土台・中身の幅）
   5.  index専用（スライドショー・About/Menu/Access）
   6.  汎用ページ専用（story1〜9.html の見出し・本文まわり）
   7.  404ページ専用
   8.  どんぐりアイコン（出現・拾ったときのアニメーション）
   9.  フッター（RESETボタンなど下部の帯）
   10. モーダル・トースト（確認ダイアログ・短い通知）
   ============================================================ */

/* ============================================================
   1. 変数
   ここで決めた値を var(--変数名) の形で全体から呼び出しています。
   色を変えたいときは、まずこのブロックの値を変更してください。
   ============================================================ */
:root{
  --bg:#f0e1cb;              /* ページの背景色（クリーム） */
  --bg-soft:#fdf7e8;         /* 少し明るい背景色（404ボタン・モーダルの下地など） */
  --brown:#6b4a30;           /* メインの茶色（ヘッダー・線・ボタン枠） */
  --brown-deep:#4e3421;      /* 濃い茶色（フッター・ドロワー・モーダルの背景） */
  --ink:#5c3e2c;             /* 本文の文字色 */
  --ink-soft:#5c4a35;        /* やや薄い文字色（補足テキストなど） */
  --line:#2f2417;            /* 見出し下線・区切り線の色 */
  --ph:#bdbdbd;              /* 画像プレースホルダーの背景（グレー） */
  --gold:#e3b04b;            /* どんぐり・金色ベルに使う金色 */
  --white:#f1ebd0;           /* オフホワイト（検索ボックスの背景など） */
  --shadow:rgba(47,36,23,.18);/* 影の色（ヘッダーの下・どんぐりの落ち影） */
  --header-h:56px;           /* ヘッダーの高さ（スマホ幅のとき） */
}
/* PC幅（800px以上）ではヘッダーを少し高くする */
@media (min-width:800px){ :root{ --header-h:64px; } }



/* ============================================================
   2. ベース
   個別のパーツではなく、サイト全体に効く初期設定です。
   ============================================================ */
*{ box-sizing:border-box; }         /* パディング込みでサイズ計算する（レイアウト崩れ防止） */
html{ scroll-behavior:smooth; }     /* ページ内リンクでスクロールした時になめらかに動かす */
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:15px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;    /* iPhoneなどで文字が勝手に拡大されるのを防ぐ */
}
img{ max-width:100%; display:block; }               /* 画像がはみ出さないようにする */
a{ color:inherit; }                                  /* リンクの文字色は親要素に合わせる */
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } /* ボタンの初期装飾を消す */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } /* キーボード操作時のフォーカス枠 */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* 画面には見せず読み上げ機だけに伝える用（現状未使用） */

/* ============================================================
   3. ヘッダー（固定）
   対応するHTML： <header class="site-header"> …ベル・ナビ・検索・ハンバーガー
                  <div class="drawer">          …ハンバーガーで開く右側メニュー
   ============================================================ */

/* ヘッダー本体。position:fixed でスクロールしても常に画面上部に残る */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;   /* inset:0 0 auto 0 = 上下左右のうち「上・左・右」を0に固定 */
  height:var(--header-h); background:var(--brown);
  display:flex; align-items:center; gap:12px;      /* 中の要素を横並びにする */
  padding:0 12px; box-shadow:0 1px 10px var(--shadow);
}
@media (min-width:800px){ .site-header{ padding:0 24px; gap:22px; } }

/* --- ベルのアイコン（左端） --- */
.bell{ position:relative; width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%; }
.bell svg{ width:26px; height:26px; fill:#fdf7e8; transition:fill .5s ease, filter .5s ease; } /* 普段のベルの色 */
.bell.is-gold svg{ fill:var(--gold); filter:drop-shadow(0 0 6px rgba(227,176,75,.85)); }       /* どんぐり10個集まると金色に */
.bell-count{ /* ベルの右下に出る「3/10」のような小さいバッジ */
  position:absolute; right:-2px; bottom:-2px;
  font-size:10px; line-height:1; padding:2px 4px; border-radius:8px;
  background:var(--gold); color:#3a2a10; font-weight:700;
}

/* --- PC幅で表示するナビ（About / Menu / Access） --- */
.nav-main{ display:none; gap:18px; font-weight:700; color:var(--white); font-size:15px; } /* スマホ幅では非表示 */
.nav-main a:hover{ color:var(--gold); }
.nav-main a{ text-decoration:none; }
@media (min-width:800px){ .nav-main{ display:flex; } } /* PC幅になったら表示に切り替え */

.spacer{ flex:1; } /* 左側の要素と右側の要素を押し広げる余白（見えない伸縮スペース） */

/* --- 検索フォーム --- */
.search{ display:flex; align-items:center; background:var(--white); height:30px; width:200px; max-width:38vw; }
.search input{ border:none; background:none; width:100%; height:100%; padding:0 8px; font:inherit; font-size:14px; color:var(--ink); }
.search input:focus{ outline:none; }
.search button{ padding:0 6px; display:grid; place-items:center; } /* 検索アイコンのボタン */
.search svg{ width:16px; height:16px; fill:none; stroke:var(--ink-soft); stroke-width:2; }
@media (min-width:800px){ .search{ width:220px; max-width:none; height:30px; } } /* PC幅では横に広げる */

/* 検索フォームに表示される「×」を非表示 */
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* --- ハンバーガーメニュー（スマホ幅のみ表示、CSSではなくHTML/JS側で出し分け） --- */
.burger{ width:34px; height:34px; flex:none; display:grid; place-items:center; }
.burger span{ display:block; width:20px; height:2px; background:var(--white); margin:2.5px 0; transition:transform .25s, opacity .2s; } /* 3本線 */
/* JSが .is-open クラスを付け外しして、3本線を「✕」の形に変形させる */
.burger.is-open span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }

/* --- ハンバーガーで開く右側のドロワー（引き出しメニュー） --- */
.drawer{
  position:fixed; z-index:55; top:var(--header-h); right:0;
  width:min(290px,80vw); max-height:calc(100vh - var(--header-h)); overflow:auto;
  background:var(--brown-deep); color:var(--white);
  transform:translateX(105%); transition:transform .28s ease; /* 普段は画面右外に隠しておく */
  padding:16px 22px 26px; box-shadow:-6px 0 20px var(--shadow);
}
.drawer.is-open{ transform:translateX(0); } /* JSがこのクラスを付けると画面内にスライドイン */
.drawer a{ display:block; padding:10px 0; font-weight:700; font-size:13.5px; text-decoration:none; border-bottom:1px solid rgba(255,253,246,.2); }
.drawer .note{ margin-top:18px; font-size:12px; line-height:1.8; opacity:.75; }   /* 「検索してください」の説明文 */
.drawer .count{ margin-top:14px; font-size:12px; opacity:.8; }                    /* どんぐり進捗の表示 */

/* ============================================================
   4. レイアウト
   ページ全体の土台となる部分（headerの下の余白・本文の横幅）
   対応するHTML： <main class="site-main" id="main"> と <div class="wrap">
   ============================================================ */

/* 固定ヘッダーの分だけ、本文の上に余白を確保する */
.site-main{ position:relative; padding-top:var(--header-h); min-height:calc(100vh - var(--header-h)); overflow:hidden; }
/* 404ページはヘッダー・フッターを表示しないため、その分の余白を打ち消す */
.site-main.no-chrome{ padding-top:0; min-height:100vh; }

/* 本文コンテンツの横幅を制限して中央寄せするための共通ラッパー */
.wrap{ max-width:760px; margin:0 auto; padding:0 20px; }
@media (min-width:800px){ .wrap{ max-width:980px; padding:0 32px; } } /* PC幅では少し広げる */

/* ============================================================
   5. indexページ専用
   対応するHTML： index.html の <div class="hero">〜<section>各種
   ============================================================ */

/* --- ヒーロー画像（ページ最上部、5枚の画像がフェードで切り替わる部分） --- */
.hero{ position:relative; height:190px; background:#b9b9b9; overflow:hidden; display:grid; place-items:center; }
@media (min-width:800px){ .hero{ height:380px; } }
.hero .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; } /* 5枚とも同じ場所に重ねて置く */
.hero .slide.is-on{ opacity:1; } /* JSがこのクラスを1枚ずつ付け替えて、切り替わって見せている */
.hero-copy{ /* ヒーロー画像の上に重ねる「霧の晴れ間に…」のコピー */
  position:relative; text-align:center; font-weight:700; font-size:15px; line-height:2;
  color:#241b10; text-shadow:0 1px 5px rgba(255, 255, 255,.99);
}
@media (min-width:800px){ .hero-copy{ font-size:22px; } }
.hero-copy .en{ /* コピー内の英語サブタイトル部分 */
  display:block; font-family:"Cormorant Garamond",serif; font-style:italic;
  font-weight:500; font-size:.85em; letter-spacing:.04em; opacity:.85;
}

/* --- About / Menu / Access 共通の「セクション」と「見出し」 --- */
.section{ padding:40px 0 10px; }
.section-title{ /* 「About Daydream」のような画像付き中央見出し */
  margin:0 auto 10px;
  text-align:center;
  font-size:30px;
  font-weight:700;
  width:fit-content;
  padding:0 26px 6px;
  position:relative;
  border-bottom:none;
}

.section-title::after{
  content:"";
  display:block;
  width:min(500px, 90vw);
  aspect-ratio:9 / 1;
  margin:1px auto 0;
  background:url("../img/line.png") center / contain no-repeat;
}

.section-title .en{ font-family:"Cormorant Garamond",serif; font-weight:600; letter-spacing:.03em; }
@media (min-width:800px){ .section-title{ font-size:24px; } }
.lead{ text-align:center; font-size:15px; margin:0 0 22px; color:var(--ink-soft); } /* 見出し直下の一言説明 */

/* --- About セクションの画像・文章 --- */
.figure{ background:var(--ph); width:100%; aspect-ratio:16/11; object-fit:cover; } /* 画像の共通スタイル（読み込み中はグレー） */
.about-fig{ max-width:470px; margin:0 auto; }
.about-copy{ max-width:470px; margin:16px auto 0; font-size:15px; }

/* --- Menu セクション（商品カードの並び） --- */
.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 20px; } /* スマホ幅：2列 */
@media (min-width:800px){ .menu-grid{ grid-template-columns:repeat(4,1fr); gap:32px 26px; } } /* PC幅：4列 */
.menu-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--ph); }
.menu-item h3{ margin:9px 0 3px; font-size:17px; font-weight:700; }  /* 商品名 */
.menu-item p{ margin:0; font-size:15px; line-height:1.75; color:var(--ink-soft); } /* 商品説明 */
.price{ display:block; text-align:right; font-weight:700; font-size:12.5px; margin-top:4px; } /* 価格 */
.rule{ border:none; border-top:2px dashed var(--line); opacity:.5; margin:32px 0; } /* Menu内の点線区切り */

/* --- Access セクション --- */
.access-copy{ text-align:center; font-size:13.5px; }
.hours{ display:grid; grid-template-columns:auto auto; gap:2px 16px; width:fit-content; margin:18px auto 0; font-size:13px; } /* 営業時間の2列表（項目名／内容） */
.hours dt{ font-weight:700; }
.hours dd{ margin:0; color:var(--ink-soft); }

/* ============================================================
   6. 汎用ページ専用
   対応するHTML： pages/story1.html 〜 story9.html
   ============================================================ */
.page-head{ font-size:23px; font-weight:700; margin:30px 0 0; padding-bottom:8px; border-bottom:2px solid var(--line); } /* ページ大見出し */
.sub-head{ font-size:16px; font-weight:700; margin:40px 0 0; padding-bottom:6px; border-bottom:2px solid var(--line); max-width:60%; } /* ページ内の小見出し */
.page-fig{ margin:22px auto 0; max-width:640px; }          /* 大見出し直下の大きい画像 */
.page-copy{ max-width:60em; margin:18px auto 0; font-size:16px; } /* 大見出し直下の本文 */
.body-copy{ font-size:15px; margin:14px 0 10; }            /* 小見出しセクションの本文 */
.split{ display:grid; gap:16px; margin-top:22px; align-items:start; } /* 小見出しセクション＝画像＋文章の2分割エリア */
@media (min-width:640px){ .split{ grid-template-columns:1fr 1fr; gap:24px; } } /* 横幅があるときだけ左右2列にする */
.split img{ width:100%; background:var(--ph); aspect-ratio:4/3; object-fit:cover; }
.page-foot{ margin:46px 0 50px; font-size:12.5px; color:var(--ink-soft); } /* ページ最下部の「ホームへ戻る」案内文 */
.page-foot a{ font-weight:700; color:var(--ink); }

/* ============================================================
   7. 404ページ専用
   対応するHTML： 404.html の <div class="notfound">
   ============================================================ */
.notfound{ min-height:100vh; display:grid; place-content:center; text-align:center; padding:40px 24px; gap:4px; } /* 画面いっぱいに中央寄せ表示 */
.nf-code{ font-family:"Cormorant Garamond",serif; font-size:74px; line-height:1; font-weight:600; margin:0; color:var(--brown); } /* 大きな「404」の文字 */
@media (min-width:800px){ .nf-code{ font-size:110px; } }
.nf-title{ font-size:16px; font-weight:700; margin:6px 0 0; }
.nf-text{ font-size:13.5px; color:var(--ink-soft); margin:10px 0 0; max-width:34em; }
.nf-btn{ /* 「更新する」ボタン */
  margin:24px auto 0; border:2px solid var(--line); padding:9px 26px;
  font-weight:700; font-size:13.5px; background:var(--bg-soft); text-decoration:none;
  transition:background .2s, color .2s;
}
.nf-btn:hover{ background:var(--brown); color:var(--white); border-color:var(--brown); }
.nf-hint{ font-size:11.5px; color:var(--ink-soft); margin-top:14px; opacity:.85; } /* 「更新するたび霧が…」の小さい注意書き */

/* ============================================================
   8. どんぐりアイコン
   対応するJS： assets/js/gimmicks.js の placeAcorn() が
   このクラスを持つ<button>を各ページに1個だけ動的に追加します。
   ============================================================ */
.acorn{ position:absolute; z-index:20; width:32px; height:32px; padding:0; filter:drop-shadow(0 2px 3px var(--shadow)); } /* JSが計算した座標(left/top)にこのボタンを置く */
.acorn svg{ width:100%; height:100%; display:block; }

/* 拾う前：震える動き（15%→90%で左右に細かく回転） */
@keyframes dd-shake{
  0%,100%{ transform:rotate(0); }
  15%{ transform:rotate(-13deg); } 30%{ transform:rotate(11deg); }
  45%{ transform:rotate(-9deg); }  60%{ transform:rotate(8deg); }
  75%{ transform:rotate(-5deg); }  90%{ transform:rotate(3deg); }
}
/* 震えたあと：ポンと跳ねて小さくなりながら消える動き */
@keyframes dd-pop{
  0%{ transform:scale(1) translateY(0); opacity:1; }
  45%{ transform:scale(1.45) translateY(-16px); opacity:1; }
  100%{ transform:scale(.55) translateY(-34px); opacity:0; }
}
.acorn.is-shaking{ animation:dd-shake .5s ease-in-out; }               /* JSがクリック直後にこのクラスを付ける */
.acorn.is-popping{ animation:dd-pop .42s cubic-bezier(.3,-0.3,.5,1) forwards; } /* 震え終わったらJSがこちらに切り替える */

/* ============================================================
   9. フッター
   対応するHTML： <footer class="site-footer"> …注意書き＋<RESET>
   ============================================================ */
.site-footer{
  background:var(--brown-deep); color:#f2e6d0; text-align:center;
  font-size:11.5px; padding:14px 16px 18px; line-height:1.9; position:relative; z-index:30;
}
.site-footer p{ margin:0; }
.reset-btn{ display:block; margin:2px auto 0; font-size:11.5px; letter-spacing:.06em; } /* <RESET> ボタン */
.reset-btn:hover{ color:var(--gold); }

/* ============================================================
   10. モーダル・トースト
   対応するHTML： <div class="veil">…確認ダイアログ（RESETやどんぐり達成時）
                  <div class="toast">…画面下に一瞬出る通知メッセージ
   対応するJS：   gimmicks.js の showModal() / toast()
   ============================================================ */

/* --- モーダル（画面全体を覆う半透明の幕＋中央のダイアログ） --- */
.veil{ position:fixed; inset:0; z-index:100; background:rgba(30,22,12,.55); display:none; place-items:center; padding:24px; } /* 普段は非表示 */
.veil.is-on{ display:grid; } /* JSがこのクラスを付けると表示される */
.modal{ background:var(--bg-soft); max-width:340px; width:100%; padding:24px 22px 18px; border:2px solid var(--brown); text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.modal p{ margin:0 0 18px; font-size:13.5px; font-weight:700; line-height:1.9; } /* メッセージ文（JSがtextContentで差し替え） */
.modal .row{ display:flex; gap:10px; justify-content:center; }                   /* ボタンを横並びにするエリア */
.modal .row button{ border:2px solid var(--brown); padding:7px 24px; font-weight:700; font-size:13px; min-width:88px; }
.modal .ok{ background:var(--brown); color:var(--white); }   /* OKボタン（塗りつぶし） */
.modal .no{ background:transparent; }                        /* NOボタン（枠線のみ） */

/* --- トースト（画面下に一瞬出る小さな通知） --- */
.toast{
  position:fixed; z-index:110; left:50%; bottom:26px; transform:translate(-50%,16px);
  background:var(--brown-deep); color:#f6ecd8; font-size:12.5px; padding:9px 18px; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; max-width:88vw; text-align:center; /* 普段は透明かつ下にずらして隠す */
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); } /* JSがこのクラスを付けると浮かび上がって表示される */

/* ============================================================
   おまけ：アニメーションを少なくしたい設定（アクセシビリティ対応）
   端末側で「視差効果を減らす」等を設定している人には、
   アニメーションをほぼ一瞬で終わらせて負担を減らす
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* エーコンのサイズを制御 */
.acorn-img{ width:100%; height:100%; object-fit:contain; display:block; }

/* 文字崩し */
.glitch{
  position:relative;
  display:inline-block;
}

/* 複製した文字を重ねる */
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  color:inherit;
  white-space:nowrap;
  pointer-events:none;
}

.glitch::before{
  left:4px;
  clip-path:polygon(
    0 8%,
    100% 8%,
    100% 18%,
    0 18%,

    0 42%,
    100% 42%,
    100% 48%,
    0 48%
  );
}

/* 下側を少し左にズラす */
.glitch::after{
  left:-3px;
  clip-path:inset(60% 0 0 0);
}

/* ========================================
   ページカウンター
   ======================================== */

.page-counter {
  position: fixed;
  right: 20px;
  bottom: 70px;
  z-index: 1000;

  padding: 8px 14px;

  border-radius: 8px;

  background: #6b4a32;
  color: #ead9bd;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  white-space: nowrap;
}

/* ========================================
   スマホ用ページカウンター位置調整
   ======================================== */
@media (max-width: 600px) {
  .page-counter {
    bottom: 110px;
    right: 12px;
  }
}