/* ============================================================
   能勢べ〜びーる / BASE ショップのスタイル
   LP（nose-bebe）から色・書体・余白を移したもの

   置き方: BASE のテーマエディタ →「ファイルアップローダー」から
   このファイルを上げ、発行されたURLを theme.html の <link> に貼る。
   ⚠️ 上げ直すとURLが変わることがあるので、差し替えたら <link> も確認すること。

   ⚠️ LP 側（app/globals.css）と値がずれたら、こちらも直すこと。
   2つのサイトで深緑が微妙に違うと、行き来したときに一番気づかれる。
   ============================================================ */

/* ------------------------------------------------------------
   1. トークン。LP の app/globals.css からそのまま移した値
   ------------------------------------------------------------ */
:root {
  --satoyama: #16302a;      /* 里山の深緑（地の色） */
  --satoyama-deep: #0f231e; /* さらに深い陰 */
  --card: #1c3a33;
  --rice: #f0ebdc;          /* 米の白（文字） */
  --muted: #b9c3ba;         /* 弱い文字 */
  --ho: #c68f2c;            /* 稲穂（アクセント・ボタン） */
  --line: rgba(240, 235, 220, 0.14);

  --radius: 0.5rem;
  --ease: cubic-bezier(0.4, 0.4, 0, 1);

  /* LP と同じ2書体。明朝は見出しとロゴだけに使う。
     ⚠️ Shippori Mincho B1 は 800 だけ読んでいるので、
     当てるときは font-weight: 800 を必ず添えること */
  --font-sans: 'Zen Kaku Gothic Antique', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Shippori Mincho B1', var(--font-sans);
}

/* ------------------------------------------------------------
   2. 土台
   ------------------------------------------------------------ */
body {
  margin: 0;
  background: var(--satoyama);
  color: var(--rice);
  font-family: var(--font-sans);
  line-height: 1.9;
  /* LP と同じ日本語の折り方。語の途中で割れるのを防ぐ */
  line-break: strict;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* 🚨 .wrap の左右の余白は、ここ以外で padding を**ショートハンドで**上書きしないこと。
   `.wrap.section` のように重ねて使っている要素で `padding: 64px 0` と書くと、
   左右の 20px が 0 に潰れて、スマホで文字が画面の端に張り付く
   （2026-08-19 に実際に起きた。PCでは max-width の外側の余白で隠れて気づかない）。
   上下を足したいときは padding-top / padding-bottom で書く */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
}

/* ------------------------------------------------------------
   3. ヘッダー / フッター
   ------------------------------------------------------------ */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 48, 42, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.siteHeader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

/* ------------------------------------------------------------
   ロゴ。LP のヘッダー（components/site-header.tsx + logotype.tsx）と同じ見え方にする
   （2026-08-19 本人指示）。明朝 800・「べ〜」だけ稲穂の色・スマホ 1.25rem / PC 1.5rem。

   ⚠️ 「べ〜」だけ色を変えるには文字を分けて書く必要があるので、
      見えているのは theme.html に直書きした .siteHeader__logotype のほう。
      必須タグの LogoTag は .siteHeader__logoTag に入れて**見えない位置に置いてある**
      （display:none にはしていない。読み上げには LogoTag のほうを使う）。
   ⚠️ そのため、管理画面の「デザイン設定」でロゴ画像や色を変えても**見た目には出ない**。
      ロゴを画像にしたくなったら .siteHeader__logotype を消して .siteHeader__logoTag の
      隠しを外すこと。
   ------------------------------------------------------------ */
.siteHeader__logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: var(--rice);
  /* ロゴの縦が 64px のヘッダーの中で少し詰まって見えないように */
  flex-shrink: 0;
}

.siteHeader__logotype {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;   /* LP: text-xl */
  line-height: 1;
  white-space: nowrap;
  color: var(--rice);
}

@media (min-width: 768px) {
  .siteHeader__logotype { font-size: 1.5rem; }   /* LP: md:text-2xl */
}

.siteHeader__logotype-accent { color: var(--ho); }

/* 必須タグの LogoTag はここに入れて、場所を取らずに置いておく（いわゆる visually-hidden） */
.siteHeader__logoTag {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.siteHeader__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.875rem;
  color: var(--muted);
  /* ロゴ側を縮めず、こちらが詰まる */
  min-width: 0;
}

.siteHeader__nav a {
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.siteHeader__nav a:hover { color: var(--rice); }

/* スマホ（LP の sm 未満 = 640px 未満）。
   ロゴ 1.25rem の7文字 ≒ 140px に、「商品」「お問い合わせ」とカートのアイコンを
   1行に並べると 375px では収まらず、ヘッダーが折り返していた。
   「商品」はロゴと行き先が同じ（トップ）なので、狭いときは出さない。
   フッターには残っているので、辿れなくなるわけではない */
@media (max-width: 639px) {
  .siteHeader__inner { gap: 12px; }
  .siteHeader__nav { gap: 14px; font-size: 0.8125rem; }
  .siteHeader__nav .siteHeader__navIndex,
  .siteHeader__nav .siteHeader__navSite { display: none; }   /* 公式サイトはフッターに任せる */
}

/* 320px 幅（古い iPhone SE など）だけ、ロゴを一段落として収める。375px 以上はこれ無しで入る */
@media (max-width: 359px) {
  .siteHeader__logotype { font-size: 1.125rem; }
  .siteHeader__nav { gap: 12px; }
}

/* ------------------------------------------------------------
   BASEMenuTag（カートと BASE へのリンク）

   🚨 詳細度で勝たないと効かない。
   BASE 側のCSS（BASEshop-*.css）は、このファイルより **後** に読み込まれる。
   しかも中で #baseMenu を使っているので、
     こちら .siteHeader__nav ul   = (0,1,1)
     向こう #baseMenu ul          = (1,0,1)   ← 勝つ
   となって当たらない。同点でも後勝ちで向こうが取る。
   なので **.siteHeader__nav #baseMenu ...** と重ねて (1,1,1) 以上にしてある。
   ⚠️ セレクタから .siteHeader__nav や #baseMenu を外さないこと。外すと戻る。

   素のままだと、リストの黒点が出て、アイコンが height="30" の原寸で並ぶ
   ------------------------------------------------------------ */
.siteHeader__nav #baseMenu {
  display: flex;
  align-items: center;
}

.siteHeader__nav #baseMenu ul {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.siteHeader__nav #baseMenu li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  float: none;
}

.siteHeader__nav #baseMenu li::marker,
.siteHeader__nav #baseMenu li::before {
  content: '';
  display: none;
}

.siteHeader__nav #baseMenu a {
  display: inline-flex;
  align-items: center;
}

/* img には height="30" が属性で入っている。CSS のほうが強いので上書きできる */
.siteHeader__nav #baseMenu img {
  width: auto;
  height: 22px;
  max-height: 22px;
  object-fit: contain;
}

/* BASE の宣伝リンク（「ネットショップを開設するならBASE」）は必須タグの一部なので
   消さない。ただし主役ではないので、少し引いた見え方にする */
.siteHeader__nav #baseMenu li.base img {
  height: 18px;
  max-height: 18px;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}

.siteHeader__nav #baseMenu li.base a:hover img { opacity: 1; }

.siteFooter {
  margin-top: 80px;
  border-top: 1px solid var(--line);
  background: var(--satoyama);
}

.siteFooter__inner { padding-top: 56px; padding-bottom: 40px; }

.siteFooter__lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.siteFooter__place {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--ho);
  margin: 0 0 40px;
}

.siteFooter__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  padding: 0;
  list-style: none;
}

.siteFooter__links a { text-decoration: none; }
.siteFooter__links a:hover { color: var(--rice); }

/* 酒類なので必ず出す。LP のフッターと同じ扱い */
.siteFooter__age {
  margin-top: 32px;
  border: 1px solid rgba(198, 143, 44, 0.4);
  border-radius: 2px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.siteFooter__copy {
  margin-top: 24px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ------------------------------------------------------------
   4. 見出し
   ------------------------------------------------------------ */
.eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--ho);
  margin: 0 0 12px;
}

.heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .heading { font-size: 2.5rem; }
}

/* ⚠️ padding-top / padding-bottom で書く（.wrap の左右を潰さないため。理由は .wrap の上） */
.section { padding-top: 64px; padding-bottom: 64px; }

@media (min-width: 768px) {
  .section { padding-top: 88px; padding-bottom: 88px; }
}

/* ------------------------------------------------------------
   5. 商品一覧
   ------------------------------------------------------------ */
.items {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

@media (min-width: 640px) {
  .items { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.item a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.item a:hover { border-color: rgba(198, 143, 44, 0.6); }

.item__thumb {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

.item__body { padding: 20px 22px 24px; }

/* ⚠️ 画像が無い商品でもカードが潰れないよう、本文側に最低限の高さを持たせる。
   商品未登録のプレビューで、枠だけが並んで見えるのを防ぐ */
.item__body { min-height: 96px; }

.item__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
}

.item__price {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.item__soldout {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ho);
}

.items__empty {
  margin: 40px 0 0;
  color: var(--muted);
}

/* ------------------------------------------------------------
   6. 商品詳細
   ------------------------------------------------------------ */
.detail {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  padding-top: 48px;
}

@media (min-width: 900px) {
  .detail {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding-top: 72px;
  }
}

.detail__gallery { display: grid; gap: 12px; }

.detail__main {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.detail__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.detail__thumbs img { border-radius: 2px; aspect-ratio: 1 / 1; object-fit: cover; }

.detail__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.4;
  margin: 0;
}

@media (min-width: 768px) {
  .detail__title { font-size: 2.25rem; }
}

.detail__price {
  margin: 16px 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ho);
}

.detail__proper {
  margin-left: 10px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}

.detail__body {
  margin: 28px 0 0;
  color: var(--muted);
  line-height: 2;
}

/* ------------------------------------------------------------
   7. 購入ボタン
   ⚠️ 中身は {PurchaseButton} が吐くので、こちらは器だけを整える。
      ボタンの文字（SOLD OUT / 再入荷通知 等）は BASE 側で自動で変わる
   ------------------------------------------------------------ */
.purchase { margin-top: 32px; }

.purchase select,
.purchase input[type='text'] {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--satoyama-deep);
  color: var(--rice);
  font-family: inherit;
  font-size: 1rem;
}

.purchase button,
.purchase input[type='submit'] {
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--ho);
  color: var(--satoyama);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

.purchase button:hover:not(:disabled),
.purchase input[type='submit']:hover:not(:disabled) {
  background: rgba(198, 143, 44, 0.85);
}

.purchase button:disabled,
.purchase input[type='submit']:disabled {
  background: var(--card);
  color: var(--muted);
  cursor: not-allowed;
}

/* 注意書き（{ItemAttentionTag}）と通報リンク（{IllegalReportTag}） */
.detail__attention,
.detail__report {
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ------------------------------------------------------------
   8. 固定ページ（お問い合わせ / プライバシー / 特商法）
   {PageContents} が中身を吐くので、そこだけ読めるように整える

   お問い合わせの中身は BASE が吐く次の形（2026-08-20 に実物で確認）:
     .page__contents > .main > section.inquirySection
       h1 "contact" / p / form > dl > dt + dd > input / textarea
       .control-panel > input[type=submit]
   🚨 スマホで入力欄が右に突き抜けていた（2026-08-20 に踏んだ）。原因は3つ重なっていて、
     - dd にブラウザ既定の margin-left 40px が付いている
     - その中で width:100% の input に padding 28px が足され（content-box）、さらに右へ出る
     - dd の中にもう1つ dd.error が入れ子になっていて、さらに 40px 下がる
   なので dd の余白を消し、入力欄は box-sizing: border-box で幅に収める。
   ------------------------------------------------------------ */
.page { padding-top: 56px; }

.page__contents {
  margin-top: 32px;
  color: var(--muted);
  line-height: 2;
}

.page__contents a { color: var(--rice); }

/* BASE が出す "contact" の h1 は、すぐ上にテーマの見出し「お問い合わせ」があるので重複する。
   見た目だけ引っ込める（テーマ側の h1 が残るので、見出しが無くなるわけではない） */
.page__contents .inquirySection > h1 { display: none; }

.page__contents table {
  width: 100%;
  border-collapse: collapse;
}

.page__contents th,
.page__contents td {
  border-bottom: 1px solid var(--line);
  padding: 14px 8px;
  text-align: left;
  vertical-align: top;
}

.page__contents th {
  width: 34%;
  color: var(--rice);
  font-weight: 700;
  white-space: nowrap;
}

/* 特商法の表はスマホで th の nowrap が効くと詰まるので、狭いときは折り返しを許す */
@media (max-width: 639px) {
  .page__contents th { white-space: normal; width: 38%; }
}

/* ---- お問い合わせフォーム ---- */
.page__contents dl { margin: 0; }

.page__contents dt {
  margin-top: 20px;
  color: var(--rice);
  font-weight: 700;
}

/* 「(必須)」の印 */
.page__contents dt span {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ho);
}

.page__contents dd {
  margin: 8px 0 0;   /* ← 既定の margin-left 40px を消す。突き抜けの主因 */
}

.page__contents dd.error {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ho);
}

.page__contents input[type='text'],
.page__contents input[type='email'],
.page__contents input[type='tel'],
.page__contents input:not([type]),
.page__contents textarea,
.page__contents select {
  box-sizing: border-box;   /* ← padding 込みで 100% に収める */
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--satoyama-deep);
  color: var(--rice);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

.page__contents textarea {
  min-height: 180px;
  resize: vertical;
}

.page__contents input:focus,
.page__contents textarea:focus {
  outline: 2px solid var(--ho);
  outline-offset: 2px;
}

/* 送信ボタン。.purchase のボタンと同じ見た目に */
.page__contents .control-panel { margin-top: 28px; }

.page__contents input[type='submit'],
.page__contents button {
  box-sizing: border-box;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--ho);
  color: var(--satoyama);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

.page__contents input[type='submit']:hover,
.page__contents button:hover {
  background: rgba(198, 143, 44, 0.85);
}

@media (min-width: 640px) {
  .page__contents form { max-width: 640px; }
  .page__contents input[type='submit'],
  .page__contents button { width: auto; min-width: 240px; }
}

/* ------------------------------------------------------------
   9. 購入モーダル
   ⚠️ 再入荷通知・年齢確認・販売予告のモーダルは BASE 側が出す。
      親要素に「App名 + Modal」の id が付くので、必要なら個別に足す。
      ここでは共通の見た目だけ、地の色に合わせておく
   ------------------------------------------------------------ */
.purchaseButtonModal__wrapper {
  color: var(--satoyama);
}