/* =====================================================================
   言ノ葉珈琲 自社サイト① 共通CSS
   ---------------------------------------------------------------------
   ・:root は実装指示書§2の完成形そのまま（ブランド.md実測色が正）。
     色を勝手に足さない・変えない。真っ黒#000は使わない。
   ・縛り：ティール=1画面1〜2箇所（導線/CTAのみ）／金=焙煎日と地図の灯りだけ
     ／画面の6割は生成りの余白。
   ===================================================================== */

:root {
  /* ── 色（ブランド実測・2026-06-21確定） ── */
  --paper:      #f4f1e8; /* 地＝生成り。画面の6割はこの余白 */
  --ink:        #3a4a4e; /* 文字・線＝珈琲の青灰。#000は使わない */
  --ink-soft:   #6a787c; /* 副次テキスト（青灰を淡く） */
  --teal:       #3d7a8a; /* 進む導線＝ティール。連発しない・1画面1〜2箇所 */
  --gold:       #a6822f; /* 灯り・焙煎日の一点強調＝金。数を絞る */
  --line:       #d8d2c4; /* 罫線・区切り（生成りに馴染む薄線） */
  --paper-pure: #f9f9f7; /* ロゴ地（ほぼ白）。カード等でごく稀に */

  /* ── タイポ ── */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif; /* 見出し＝明朝 */
  --sans:  "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif; /* 本文＝ゴシック */
  --lh:    1.8;   /* 本文行間＝間 */
  --lh-head: 1.5; /* 見出し行間 */

  /* ── 余白・寸法 ── */
  --tap: 44px;         /* 最小タップ対象（44×44px以上） */
  --measure: 34rem;    /* 本文の1行最大幅（読みやすさ） */
  --gap: clamp(1rem, 4vw, 2rem);
  --pad-page: clamp(1.25rem, 6vw, 4rem);

  /* ── 演出 ── */
  --ripple-dur: 3s;   /* 墨の波紋の尺（上限3秒） */
  --ease-quiet: cubic-bezier(.22,.61,.36,1); /* 静かな減衰 */
}

/* 基本 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: var(--lh);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); line-height: var(--lh-head); font-weight: 600; }
a { color: var(--teal); }
p, li { max-width: var(--measure); }
img, svg { max-width: 100%; height: auto; }

/* 進む導線＝ティール下線テキスト（トップの唯一の導線） */
.lead-link {
  display: inline-block; color: var(--teal); text-decoration: none;
  border-bottom: 1px solid var(--teal); padding: .3em .1em;
  min-height: var(--tap);
}
.lead-link:hover, .lead-link:focus { border-bottom-width: 2px; }

/* 唯一のCTA（豆ページの購入＝STORESへ） */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 2rem;
  background: var(--teal); color: var(--paper);
  border: none; border-radius: 4px;
  font-family: var(--sans); font-size: 1.05rem; text-decoration: none;
}
.cta:hover, .cta:focus { filter: brightness(1.08); }

/* 焙煎日＝金の細線で囲む（背骨・主役） */
.roast-date {
  display: inline-block;
  border: 1px solid var(--gold); border-radius: 3px;
  padding: .6em 1em; color: var(--ink);
  font-family: var(--serif);
}
.roast-date .rel { color: var(--gold); margin-left: .6em; font-size: .9em; }

/* reduced-motion：演出を止める（全ページ共通で最優先） */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   ここから共通レイアウト（§3）＝ヘッダ極薄・フッタ軽く
   ===================================================================== */

.site-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap); flex-wrap: wrap;
  padding: .9rem var(--pad-page);
  border-bottom: 1px solid var(--line); /* 下線1本のみ＝極薄 */
}
.site-head .logo {
  font-family: var(--serif); font-size: 1.15rem; color: var(--ink);
  text-decoration: none; letter-spacing: .06em;
}
.site-head .logo span { /* "coffee"はごく控えめに */
  font-family: var(--sans); font-size: .7rem; color: var(--ink-soft);
  margin-left: .5em; letter-spacing: .18em; text-transform: lowercase;
}
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; } /* 窮屈なら折り返すだけ（凝った実装はしない） */
.site-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .92rem;
  padding: .3em 0; min-height: auto;
}
.site-nav a:hover, .site-nav a:focus { color: var(--ink); }

.site-foot {
  border-top: 1px solid var(--line);
  padding: 1.6rem var(--pad-page) 2.2rem;
  font-size: .85rem; color: var(--ink-soft);
}
.site-foot a { color: var(--ink-soft); }
.site-foot .fine { font-size: .78rem; }

/* =====================================================================
   トップのヒーロー（§4①・v1-F：重心1つ＝タグライン）
   ・4ブロック均等置き禁止。ロゴ・一文はタグラインに近接させ1つの塊に。
   ・塊は画面の上から約42%（ど真ん中centeringは仮置きに見える＝禁止）。
   ・導線は塊から離して下部へ。
   ===================================================================== */

.hero {
  min-height: calc(100vh - 64px); /* ヘッダを引いたほぼ全画面＝6割は余白 */
  display: flex; flex-direction: column;
  padding: 0 var(--pad-page) 3rem;
  max-width: 64rem;               /* 左寄せを"意図した柱"に＝広い画面でも塊の右端が決まる（A案・様式化） */
}
.hero .core {
  /* 塊の重心＝画面の上から約42%（ど真ん中禁止）。ヘッダ約4rem分を差し引く */
  margin-top: calc(42vh - 4rem);
  transform: translateY(-50%);    /* 塊自身の中心を42%線に合わせる */
}
.hero .brand {
  font-family: var(--serif); font-size: .95rem; color: var(--ink-soft);
  letter-spacing: .2em; margin: 0 0 1.1rem;
}
.hero .tagline {
  font-family: var(--serif); color: var(--ink);
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  letter-spacing: .08em; line-height: var(--lh-head);
  margin: 0;
}
.hero .whatwedo {
  font-size: .95rem; color: var(--ink-soft);
  margin: 1.2rem 0 0; max-width: var(--measure);
}
.hero .leads {
  margin-top: auto;               /* 導線は塊から離して画面下部へ */
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-start;
}
.hero .leads .sub { font-size: .9rem; } /* 豆一覧＝控えめな2本目 */

/* トップの演出＝静止が基本。入りはopacityのみ0.6s（reduced-motionで自動停止） */
.hero .core, .hero .leads { animation: quiet-in .6s var(--ease-quiet) both; }
@keyframes quiet-in { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   診断ページ（shindan.html・§4②）
   ===================================================================== */

.shindan { padding: 2.5rem var(--pad-page) 4rem; max-width: 64rem; } /* 全ページ共通の左コラム幅（A案・一貫性） */
.sd-title { font-size: clamp(1.3rem, 5vw, 1.9rem); margin: 1.5rem 0 .6rem; }
.sd-note { color: var(--ink-soft); font-size: .92rem; }
.skip-link { color: var(--ink-soft); font-size: .88rem; }

/* 進捗＝細い横線1本だけ（--ink薄） */
.progress { height: 2px; background: var(--line); margin: 2rem 0 2.2rem; }
#progressBar { height: 100%; width: 0; background: var(--ink); opacity: .55; transition: width .3s var(--ease-quiet); }

.sd-q { font-size: clamp(1.15rem, 4.5vw, 1.5rem); margin: 0 0 1.2rem; }
.q-chips { display: flex; flex-direction: column; gap: .7rem; max-width: var(--measure); }
.chip-opt {
  min-height: var(--tap); padding: .7em 1.1em; text-align: left;
  background: var(--paper-pure); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--sans); font-size: 1rem; cursor: pointer;
}
.chip-opt.on, .chip-opt:active { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.back-btn {
  background: transparent; border: none; color: var(--ink-soft);
  font-size: .9rem; min-height: var(--tap); cursor: pointer; padding: 0;
}

/* ---- 墨の波紋（§5-A・文字なし・スキップ可） ---- */
.ripple-overlay {
  position: fixed; inset: 0; background: var(--paper);
  display: grid; place-items: center; z-index: 50;
}
.ripple-overlay[hidden] { display: none; } /* displayを持つ要素はhidden属性が効かない＝明示して隠す */
.ripple-c {
  transform-origin: center;
  /* 墨は"落ちた瞬間は速く・滲みは長く尾を引く"＝非対称イージング */
  animation: ripple var(--ripple-dur) cubic-bezier(.12,.7,.2,1) forwards;
  opacity: 0;
}
/* "広がって定着し薄れる"（膨張スピナー化を禁止） */
@keyframes ripple {
  0%   { transform: scale(.4);  opacity: 0; }
  18%  { opacity: .92; }
  55%  { transform: scale(1.15); opacity: .55; }
  100% { transform: scale(1.3);  opacity: 0; }
}
.ripple-skip {
  position: fixed; right: 1rem; bottom: 1rem;
  min-height: var(--tap); padding: 0 1.2em;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 4px; font-family: var(--sans);
}

/* ---- 旅路（§5-B）＝地図は淡い舞台・金は軌跡と着地だけ ---- */
.journey-line {
  font-family: var(--serif); color: var(--ink);
  font-size: clamp(1.05rem, 4vw, 1.4rem); letter-spacing: .06em;
  min-height: 1.6em; margin: 1.2rem 0;
  opacity: 0; transition: opacity .8s var(--ease-quiet);
}
.journey-line.show { opacity: 1; }
.map-wrap { position: relative; }
.map-wrap svg { display: block; width: 100%; height: auto; }

/* 産地名＝ズーム完了後にHTMLで固定サイズ表示（SVG textだと拡大で巨大化する）。
   位置はJSがズーム後に国bboxへ合わせて置く。既定は非表示（.name-showで出す）。 */
.origin-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 1s var(--ease-quiet);
}
.origin-label.name-show { opacity: 1; }
.origin-country-name {
  font-family: var(--serif); color: var(--ink);
  font-size: clamp(1.3rem, 5vw, 1.9rem); letter-spacing: .1em;
  /* 範囲円の上でも読めるよう、生成りの滲みを後ろに敷く（和・静謐を壊さない） */
  padding: .12em .7em; border-radius: 5px;
  background: radial-gradient(ellipse at center, rgba(244,241,232,.96) 68%, rgba(244,241,232,0) 100%);
}
.origin-hint {
  font-family: var(--sans); color: var(--ink-soft);
  font-size: clamp(.72rem, 2.6vw, .85rem); letter-spacing: .04em;
  margin-top: .3em; padding: .12em .7em; border-radius: 5px;
  background: radial-gradient(ellipse at center, rgba(244,241,232,.94) 62%, rgba(244,241,232,0) 100%);
}

/* 演出は .play / .landed が付いてから動く（付くまで静止＝JSが進行を握る） */
.map-wrap .route   { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-opacity 1s var(--ease-quiet); }
.map-wrap.play .route { animation: draw 2.6s var(--ease-quiet) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* ズームで寄った後は弧を淡く引かせ、産地名と重ならない静けさに（軌跡は残す） */
.map-wrap.zoomed .route { stroke-opacity: .22; }
.map-wrap .flyhead { stroke-dasharray: 5 3000; stroke-dashoffset: 0; opacity: 0; }
.map-wrap.play .flyhead { opacity: 1; animation: fly 2.6s var(--ease-quiet) forwards; }
@keyframes fly { to { stroke-dashoffset: -1000; } }
.map-wrap.landed .flyhead { opacity: 0; transition: opacity .6s; } /* 移動しきったら着地へ受け渡し */
.map-wrap .origin-country { fill-opacity: 0; stroke-opacity: 0; }
.map-wrap.landed .origin-country { animation: land 1.2s var(--ease-quiet) .1s forwards; }
@keyframes land { 0% { fill-opacity: 0; stroke-opacity: 0; } 45% { fill-opacity: .16; stroke-opacity: 1; } 100% { fill-opacity: .10; stroke-opacity: 1; } }
/* 産地の「このあたり」＝淡い金の円（ピンでなく範囲）。半径・座標はJSが差す。 */
.map-wrap .origin-area { fill-opacity: 0; stroke-opacity: 0; }
.map-wrap.landed .origin-area { animation: area 1.2s var(--ease-quiet) .3s forwards; }
@keyframes area { 0% { fill-opacity: 0; stroke-opacity: 0; } 100% { fill-opacity: .14; stroke-opacity: .33; } }
.map-wrap .origin-core { fill-opacity: 0; }
.map-wrap.landed .origin-core { animation: core 1s var(--ease-quiet) .4s forwards; }
@keyframes core { to { fill-opacity: .55; } }

/* reduced-motion＝完成形で静止（軌跡引き終わり・国光り・範囲円と名前は即表示＝§8-2） */
@media (prefers-reduced-motion: reduce) {
  .map-wrap .route { stroke-dashoffset: 0; stroke-opacity: .22; }
  .map-wrap .flyhead { opacity: 0; }
  .map-wrap .origin-country { fill-opacity: .10; stroke-opacity: 1; }
  .map-wrap .origin-area { fill-opacity: .14; stroke-opacity: .33; }
  .map-wrap .origin-core { fill-opacity: .55; }
  .origin-label { opacity: 1; }
  .journey-line { opacity: 1; }
}

/* ---- 結果カード＝焙煎日の金枠が主役（灯りの受け渡し） ---- */
.bean-name { font-size: clamp(1.4rem, 5.5vw, 2rem); margin: .2rem 0 .3rem; }
.bean-origin { color: var(--ink-soft); margin: 0 0 1rem; }
.bean-story { margin-top: 1rem; }
.result-links { display: flex; flex-direction: column; gap: .5rem; margin: 1.6rem 0 0; align-items: flex-start; }
.plain-link { color: var(--ink-soft); font-size: .92rem; }

/* =====================================================================
   一般ページ（豆一覧・豆詳細・物語・会社情報）
   ===================================================================== */
.page { padding: 2.2rem var(--pad-page) 4rem; max-width: 64rem; } /* 全ページ共通の左コラム幅（A案・一貫性） */
.page h1 { font-size: clamp(1.35rem, 5vw, 1.9rem); margin: .5rem 0 .4rem; }
.sec-h { font-size: 1.05rem; margin: 2rem 0 .5rem; }

.bean-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); margin-top: 1.6rem; }
.bean-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-pure);
  padding: 1.1rem 1.3rem 1.3rem;
}
.bean-card:hover { transform: translateY(-2px); transition: transform .2s var(--ease-quiet); }
.bc-name { font-size: 1.1rem; margin: 0 0 .2rem; }
.bc-origin { color: var(--ink-soft); font-size: .9rem; margin: 0 0 .8rem; }

/* 差別化3枚の枠（中身は再現性が出てから＝断定文は書かない） */
.karte-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; margin-top: .8rem; }
.karte { border: 1px dashed var(--line); border-radius: 10px; padding: .8rem 1rem; }
.karte h3 { font-size: .95rem; margin: 0 0 .3rem; }

/* 写真スロット（§0-0-I）：width/height属性でアスペクト比を予約＝CLS防止 */
.bean-photo { margin: 1.4rem 0 0; max-width: var(--measure); }
.bean-photo img { border-radius: 10px; display: block; }

/* 購入エリア：URLが無い間は正直な"焙煎待ち"（偽の在庫・押せない偽ボタンを出さない） */
.buy-area { margin-top: 2.2rem; }
.waiting {
  display: inline-block; border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-soft); padding: .8em 1.4em; font-size: .95rem;
}

/* ---- 名簿メール登録（§7・任意・押しつけない） ---- */
.mail-box { border-top: 1px solid var(--line); margin-top: 2.4rem; padding-top: 1.4rem; max-width: var(--measure); }
.mail-lead { font-family: var(--serif); margin: 0 0 .3rem; }
.mail-fine { font-size: .82rem; color: var(--ink-soft); margin: .2rem 0; }
.mail-row { display: flex; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.mail-row input {
  flex: 1 1 200px; min-height: 48px; padding: 0 .9em;
  font-size: 1rem; color: var(--ink);
  background: var(--paper-pure); border: 1.5px solid var(--line); border-radius: 6px;
}
.mail-btn { min-height: 48px; }