/* サイト全体で使う色（CSS変数）。ここを変えると全ページの配色が一括で変わる */
:root {
  --paper: #faf7f1; /* 背景の生成り色 */
  --ink: #2e2620; /* 本文の文字色 */
  --sub: #6b5d50; /* 補足文字（薄めの茶色） */
  --line: #e3dacb; /* 枠線・区切り線 */
  --brand: #5a2a0b; /* ブランドカラー（ヘッダー・ボタンの濃い茶色） */
  --accent: #b4622c; /* アクセント色（見出し左線・価格文字など） */
  --card: #ffffff; /* カード類の背景 */
  --amz: #f6a623; /* 目立たせたいボタン（カートへ等）のオレンジ */
  --sec-gap: 350px; /* セクション間の余白。ここの数字だけ変えれば全ページのセクション余白が一括で変わる */
  --header-h: 80px; /* 貼り付きヘッダーの高さ。実際の値はcommon.jsが測って上書きする（これはJSが動かないときの保険） */
  --anchor-gap: 24px; /* ヘッダー内リンクで飛んだとき、ヘッダーと見出しの間に残す余白 */
  --page-top-gap: 40px; /* ヘッダーの真下に見出しが来るページ（商品一覧など）の、冒頭の余白 */
}
/* 全要素の幅・高さにpadding/borderを含める（サイズ計算をわかりやすくする定番設定） */
* {
  box-sizing: border-box;
}
/* ページ全体のベースの文字・背景・フォント設定 */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  overflow-x: hidden; /* スマホ幅での横スクロール防止 */
}
img,
svg {
  max-width: 100%;
}
a {
  color: var(--brand);
}
/* 各セクション共通の中央寄せ・最大幅コンテナ（レイアウトの基準） */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  font-weight: 500;
}
/* ヘッダー：ページ上部に貼り付く（sticky）濃い茶色のバー */
header.site {
  background: linear-gradient(135deg, #b97c42 0%, var(--brand) 100%);
  color: #fff;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
header.site a {
  color: #fff;
  text-decoration: none;
}
.logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.logo small {
  display: block;
  margin-left: 25px; /* 上の見出しの幅の中で中央に揃える */
  font-size: 11px;
  opacity: 0.8;
  letter-spacing: 0.2em;
}
nav.main {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 15px;
  margin-left: auto;
}
nav.main a {
  padding: 6px 20px;
  border-bottom: 2px solid transparent;
}
nav.main a:hover {
  border-color: #ffffff88;
}
/* ヘッダー右のカートボタン（id="cartbadge"、JSが「カート n点/¥金額」に文言を書き換える） */
.cartbtn {
  background: #ffffff1f;
  border-radius: 999px;
  padding: 6px 20px;
  font-size: 15px;
  white-space: nowrap;
  margin-left: 20px;
}
/* トップページ最上部のヒーロー：背景に豆の写真＋暗いグラデーションを重ねる */
.hero {
  position: relative;
  overflow: hidden;
  background: #26382f;
  color: #fff;
  padding: 700px 0 50px;
}
/* 写真を横一列に並べた「フィルム」。これ全体を左へずらして切り替える */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex; /* 子要素（.hero-slide）を横一列に並べる */
  transition: transform 0.8s ease-in-out; /* ずらす動きを0.8秒かけてなめらかにする */
}
.hero-slide {
  position: relative; /* absoluteで重ねるのをやめ、横並びの「1コマ」にする */
  flex: 0 0 100%; /* 1コマの幅＝ヒーローの幅ぴったり。伸びも縮みもしない */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 一周して1枚目へ瞬間移動させる間だけ、アニメを切るためのクラス（JSが一瞬だけ付ける） */
.hero-slides.no-anim {
  transition: none;
}

/* セクション見出し（「味わいフローチャート」等）：左にアクセント色の縦線を出す */
h2.sec {
  font-size: 22px;
  margin: var(--sec-gap) 0 32px; /* 上＝セクション間の余白（変数）／下32px＝見出しと中身のすき間 */
  padding-left: 12px;
  border-left: 6px solid var(--accent);
  /* ヘッダーの「味わい診断」などで飛んだとき、見出しが貼り付きヘッダーの裏に隠れないようにする。
     scroll-margin-top はスクロールの停止位置だけをずらす指定で、
     セクションごとの間隔（margin）やレイアウトには一切影響しない */
  scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}

/* 各ページの冒頭に来る見出しだけ、上の余白を小さくする。
   商品一覧・カート・ご注文手続き・各雛形ページが対象（ヘッダーのすぐ下に見出しが来るページ） */
.wrap > h2.sec:first-child {
  margin-top: var(--page-top-gap);
}
/* ただしトップページはヒーロー写真の下に見出しが来るので、通常のセクション余白のまま保つ */
.hero + .wrap > h2.sec:first-child {
  margin-top: var(--sec-gap);
}

.story p {
  font-weight: 500;
}

/* 見出し直下の説明文 */
.lead {
  color: var(--sub);
  margin: 0 0 18px;
}
/* 商品カードを並べるグリッド：画面幅に応じて自動で列数が変わる（最小250px） */
.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(265px, 100%), 1fr)
  ); /* 画面が265pxより狭い端末でもはみ出さないよう min() で上限をかける */
  gap: 40px;
}
/* 商品カード本体の枠（common.jsのcardHTML()が生成するHTMLに対応） */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 商品画像がない場合のプレースホルダー枠（--cで背景色を商品ごとに変える） */
.ph {
  height: 250px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 12px;
  color: #fff;
  background:
    repeating-linear-gradient(135deg, #0000 0 14px, #ffffff14 14px 28px),
    var(--c, #7a5230);
}
.ph b {
  font-size: 13px;
  background: #00000040;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.ph-img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* カード内の文字エリア（商品名・産地・説明文・価格・ボタン） */
.card .body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.card h3 {
  font-size: 17px;
  margin: 0;
}
.card .org {
  font-size: 13px;
  color: var(--sub);
  margin: 0;
}
.card .note {
  font-size: 14px;
  color: var(--sub);
  margin: 0;
  flex: 1;
}
/* 価格表示（common.jsのyen()が作る「¥1,280」のような文字列に適用） */
.price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.price span {
  font-size: 12px;
  color: var(--sub);
  font-weight: 400;
}
/* ボタンの基本形。.amz / .ghost はこの上に重ねて使う見た目のバリエーション */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 16px;
  cursor: pointer;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  text-align: center;
}
/* 「カートへ」「レジに進む」など、一番押してほしい主要アクション用の目立つ色。
   .btn-lg も同じ配色なので、セレクタをカンマでつないで1箇所にまとめている */
.btn.amz,
.btn.btn-lg {
  background: var(--amz);
  color: #3a2b10;
  font-weight: 700;
}
/* 「削除」「空にする」など、控えめに見せたい操作用の白抜きボタン */
.btn.ghost {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 20px;
}
/* 特定のボタンだけ一回り大きくしたい時に追加するクラス（.btnと一緒に使う）。
   配色は上の .btn.amz と共通なので、ここはサイズだけ指定する */
.btn.btn-lg {
  padding: 12px 30px; /* 元は11px 12pxなので少し余白を増やす */
  font-size: 18px; /* 元は16pxなので少し文字を大きく */
}
.btn:hover {
  opacity: 0.8;
}
/* ボタンを横並びにする行（カード下部・カートの操作列など） */
.btnrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btnrow .btn {
  flex: 1;
  min-width: 120px;
}
/* 商品カードの「酸味／苦み／コク」の3本バー全体 */
.bars {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--sub);
}
/* バー1本分：左にラベル、右にメーター */
.bar {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 8px;
}
/* メーターの土台（グレーの背景バー） */
.bar i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
/* メーターの塗りつぶし部分。common.jsのbars()がwidth（%）をインラインで指定して数値を表現する */
.bar i b {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
/* 商品一覧ページの絞り込み・並べ替え用のツールバー */
.tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0 20px;
}
.tools button,
.tools select {
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}
/* 現在選択中の絞り込みボタンを強調表示 */
.tools button.on {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
/* 商品詳細のモーダル（common.jsのopenItem()が表示する<dialog id="dlg">の外枠） */
dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  max-width: 560px;
  width: 92%;
  background: var(--card);
}
/* モーダル表示中の背後の暗いオーバーレイ */
dialog::backdrop {
  background: #00000077;
}
/* モーダル内側の余白 */
.dlg {
  padding: 18px;
}
/* モーダル右上の閉じる（×）ボタン */
.close {
  position: absolute;
  right: 10px;
  top: 8px;
  background: #0006;
  color: #fff;
  border: 0;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 18px;
  cursor: pointer;
}
/* cart.htmlの商品一覧テーブル */
table.cart {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
table.cart th,
table.cart td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  font-size: 15px;
}
/* 数量・小計など数字列は右寄せ */
table.cart td.r,
table.cart th.r {
  text-align: right;
}
/* 数量入力欄（cart.htmlのchg()で変更を検知する<input>） */
.qty {
  width: 62px;
  font-size: 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* カート下部の「合計」ボックス（小計・送料・合計金額をまとめる白い枠） */
.total {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
}
/* 合計ボックス内の1行（ラベルと金額を左右に配置） */
.total div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
/* 「合計（税込）」の行だけ大きく・上に区切り線をつけて強調 */
.total .big {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 10px;
}
/* order.htmlの入力フォーム：1項目（ラベル＋入力欄）の単位 */
.field {
  margin: 14px 0;
}
.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 15px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-size: 16px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
/* 「デモサイトです」等の注意喚起ボックス（黄色系） */
.notice {
  background: #fff5e6;
  border: 1px solid #f0d9a8;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: #6a4f18;
}
/* 「お店の想い」「産地の物語」などの読み物ブロック（白い枠） */
.story {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  font-size: 15px;
  color: var(--sub);
}
/* 全ページ共通のフッター（濃い茶色の帯） */
footer.site {
  margin-top: var(
    --sec-gap
  ); /* 最後のセクション（お買い物について）とフッターの間も同じ余白にそろえる */
  background: linear-gradient(180deg, #b97c42 0%, var(--brand) 100%);
  color: #d9cfc2;
  padding: 26px 0;
  font-size: 14px;
}
footer.site a {
  color: #e8ddcd;
}
/* 「カートに入れました」等を画面下に一瞬出すトースト通知（common.jsのtoast()が.onを付け外しする） */
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #2e2620;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 99;
}
.toast.on {
  opacity: 1;
  bottom: 32px;
}
/* index.htmlの「味わいフローチャート」全体の枠（質問文・選択肢がこの中に描画される） */
.flow {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
.flow .q {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 4px;
}
/* 「STEP 1/3」のような進行状況の表示 */
.flow .step {
  font-size: 13px;
  color: var(--sub);
}
/* 選択肢ボタンを並べる行 */
.flow .opts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.flow .opts button {
  flex: 1;
  min-width: 150px;
  padding: 14px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid var(--brand);
  background: #fff;
  color: var(--brand);
  cursor: pointer;
}
.flow .opts button:hover {
  background: var(--brand);
  color: #fff;
}
/* 用語説明カードや産地カードなど、2列で並べる汎用グリッド */
.map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 50px;
}

/* 「産地をめぐる」の写真付きカード（写真の上に文字を重ねる） */
.map-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-height: 180px;
  background: #7a5230;
}
.map-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}
/* 写真下部に重ねる、産地名の帯（下から黒くグラデーションして文字を読みやすくする） */
.map-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(to top, #000000b3, #00000000);
}
.map-text b {
  display: block;
  font-size: 16px;
}
/* 「酸味・苦み・コク」の説明カードを並べるグリッド（画面幅に応じて自動で列数が変わる） */
.taste-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 100px;
}

.taste-circle {
  display: flex;
  flex-direction: column; /* ラベルと説明文を縦に並べる */
  align-items: center;
  justify-content: center;
  width: min(
    250px,
    100%
  ); /* 説明文が入る分、円を大きく（列幅より大きくはしない） */
  aspect-ratio: 1 / 1; /* 幅に合わせて高さも決め、常に正円にする */
  margin: 0 auto 60px;
  padding: 20px; /* 端に文字がくっつかないよう内側の余白 */
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #e0bd85 0%,
    var(--brand) 100%
  ); /* ミルク色→ブランドの茶色へのグラデーション */
  color: #fff;
  text-align: center;
  line-height: 1.4;
  font-size: 18px; /* 説明文が長いので小さめの文字サイズに */
}
.taste-circle b {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 25px;
}
/* お買い物について：4枚のカードを並べる外枠 */
.info-grid {
  display: grid; /* 子要素（.info-card）を格子状に並べるモードにする */
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  ); /* 常に2列・同じ幅で固定（送料とお届けの横幅を揃えるため） */
  gap: 18px; /* カード同士のすき間 */
  margin-top: 50px; /* 上の見出しとの余白 */
}
/* カード1枚の見た目（白背景＋枠線＋角丸） */
.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 16px; /* 内側の余白（上下20px・左右16px） */
  font-size: 14px;
  color: var(--sub); /* 補足情報らしい薄い茶色の文字 */
}
/* カード内の見出し（送料／お届け…）を本文より目立たせる */
.info-card b {
  display: block; /* インライン要素のbを1行の見出しとして独立させる */
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
}

.info-card p {
  font-weight: 700;
}

/* ===== ここから画面幅ごとの調整（パソコン表示は上の設定のまま） ===== */

/* タブレット幅（900px以下）：大きすぎる文字と余白を縮め、ナビをロゴの下の段に回す */
@media (max-width: 900px) {
  :root {
    --sec-gap: 150px; /* タブレット幅ではセクション余白を少し詰める（h2.secとfooterに同時に効く） */
  }
  nav.main {
    width: 100%;
    margin-left: 0;
    gap: 6px;
  }
  nav.main a {
    padding: 6px 12px;
  }
  .cartbtn {
    margin-left: 0;
  }
  .taste-grid {
    margin-top: 48px;
  }
  /* 味わいの円：一回り小さくして、縦に間延びするのを抑える（高さは aspect-ratio が追従する） */
  .taste-circle {
    width: min(210px, 100%);
    padding: 16px;
    margin-bottom: 32px;
    font-size: 15px;
  }
  .taste-circle b {
    font-size: 21px;
    margin-bottom: 10px;
  }
  .map,
  .info-grid {
    margin-top: 32px;
  }
}

/* スマホ幅（600px以下）：1列表示にし、ナビは横にスワイプできる1行にしてヘッダーを低く保つ */
@media (max-width: 600px) {
  :root {
    --sec-gap: 160px; /* スマホ幅ではさらに詰める（パソコン幅のままだとスクロールが長くなりすぎる） */
  }
  body {
    font-size: 16px;
  }
  .logo {
    font-size: 17px;
  }
  nav.main {
    flex-wrap: nowrap; /* 折り返さずに1行で並べる */
    overflow-x: auto; /* はみ出た分は指で横にスワイプして見る */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 14px;
    gap: 4px;
    margin: 0 -16px; /* 画面の端までスワイプ領域を広げる */
    padding: 0 16px 2px;
  }
  nav.main::-webkit-scrollbar {
    display: none;
  }
  nav.main a,
  nav.main .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }
  nav.main a {
    padding: 6px 10px;
  }
  .hero {
    padding: 36px 0;
  }
  h2.sec {
    font-size: 20px;
    margin: var(--sec-gap) 0 16px; /* 上は変数まかせ。下16px＝スマホでは見出しと中身を近づける */
  }

  .grid {
    gap: 20px;
  }
  .ph-img {
    height: 240px;
  }
  /* 酸味・苦み・コクの円は横3つ並びにする（画面幅を3等分し、円は列幅に合わせて縮む） */
  .taste-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 48px;
  }
  .taste-circle {
    width: 100%; /* 列の幅いっぱい。固定pxにしないので狭い機種でも自動で縮む */
    padding: 14px;
    font-size: clamp(9px, 2.4vw, 12px); /* 画面幅に連動（最小9px・最大12px） */
  }
  .taste-circle b {
    font-size: clamp(12px, 3.4vw, 16px);
    margin-bottom: 4px;
  }
  /* 産地カードは1列にして写真と文字を大きく見せる */
  .map {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 20px;
  }
  /* お買い物についての4枚は1列に切り替えて読みやすくする */
  .info-grid {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
  /* iPhoneで入力欄をタップしたとき画面が勝手に拡大されないよう16pxにそろえる */
  .tools select {
    font-size: 16px;
  }
  /* カート表：「単価」列を隠し、セルの余白を詰めて横スクロールを防ぐ */
  table.cart th:nth-child(2),
  table.cart td:nth-child(2) {
    display: none;
  }
  table.cart th,
  table.cart td {
    padding: 8px 6px;
    font-size: 14px;
  }
  .qty {
    width: 52px;
  }
  .toast {
    max-width: calc(100% - 32px);
    text-align: center;
  }
}