/* base.css — base + header + footer */

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

body {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-size: 16px;
  color: #0a0a0a;
  /* サイト全体の背景: 砂ベージュ #E7DECB（クライアント希望 2026-07-06。
     参考サイト recruit.pearl-idea.co.jp の見た目の実測色。白いカード類はそのまま浮かせる） */
  background-color: #e7decb;
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

select {
  font-family: inherit;
}

input,
textarea {
  font-family: inherit;
}

.site-header {
  width: 100%;
  /* 全幅のborder-bottomはメニュー(1280px)から左右にはみ出して見えるため廃止。
     下端のラインはメニュー帯(.site-nav)の金ラインが担う（ボス指示 2026-07-05） */
}

.site-header__top {
  width: 100%;
  /* バナー左右の余白もサイト背景と同じ砂ベージュに（クライアント希望 2026-07-06） */
  background-color: #e7decb;
}

.site-header__banner {
  max-width: 1280px;
  margin: 0 auto;
  display: block;
}

.site-header__banner a {
  display: block;
}

.site-header__banner-image,
/* the_custom_logo() が出す <img class="custom-logo"> にも同じスタイルを当てる */
.site-header__banner .custom-logo {
  width: 100%;
  display: block;
  height: auto;
}

/* the_custom_logo() の <a class="custom-logo-link"> もブロックに */
.site-header__banner .custom-logo-link {
  display: block;
}

/* ─────────────────────────────────────
   バナー画像の上に「現在のユーザー数」枠を重ねるための包み
   画像と枠を同じ位置基準にするため position: relative にする
───────────────────────────────────── */
.site-header__banner-inner {
  position: relative;
  width: 100%;
  /* バナー画像のアスペクト比 (1600x250 ≒ 6.4:1) を維持してレイアウトずれを防ぐ */
}

/* ─────────────────────────────────────
   「現在のユーザー数：◯◯人」枠
   バナー画像の中央下に絶対配置。画像のサイズが変わっても比率で追随する
───────────────────────────────────── */
.site-header__user-count {
  position: absolute;
  /* バナー全体に対する位置（画像の枠跡にちょうど重なる位置） */
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);

  /* 中身を横並び＋中央寄せ */
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 10px);

  /* 金色ダブルボーダーの角丸枠（背景は透明にしてバナーの緑をそのまま透かす） */
  padding: clamp(4px, 0.7vw, 10px) clamp(14px, 2vw, 32px);
  background: transparent;
  border: 1.5px solid #d4af37;
  outline: 1px solid #d4af37;
  outline-offset: 2px;
  border-radius: 999px;

  /* 文字色とフォント */
  color: #fdf6cf;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 22px);
  line-height: 1;
  white-space: nowrap;
}

/* 人型シルエットアイコン（金色） */
.site-header__user-count-icon {
  width: 1.4em;
  height: 1.4em;
  color: #fdf6cf;
  flex-shrink: 0;
}

/* 「現在のユーザー数：」の文字（やや控えめ） */
.site-header__user-count-label {
  font-weight: 700;
}

/* 数字部分（金色＋少し大きめ）。
   フォントは sans-serif 系を使う（旧称 Georgia は iOS Safari で
   lining-nums が効かず 9/3/4/5/7 がベースライン下にはみ出してしまうため）。
   sans-serif は基本的にすべての数字がベースラインに揃っている。 */
.site-header__user-count-num {
  color: #f5c842;
  font-size: 1.4em;
  font-weight: 800;
  font-family: 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', sans-serif;
  letter-spacing: 0.02em;

  /* tabular-nums: すべての数字を同じ幅に揃える（桁数が変わっても文字位置がブレない） */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';

  /* ユーザー数が4桁("9,999")になっても周辺レイアウトが動かないよう
     最低5文字分の幅を確保。text-align: right にして、桁数が少ない時は
     右寄せ（=「人」の文字に近い側）に詰めることで、数字と「人」が
     離れすぎて見えるのを防ぐ。 */
  display: inline-block;
  min-width: 4.5ch;
  text-align: right;
}

/* 「人」の字。数字との視覚的な距離を詰めるため、左に少し margin-left を
   負方向にかけて寄せる（親の gap で空きすぎるのを部分的に打ち消す）。 */
.site-header__user-count-unit {
  color: #f5c842;
  font-size: 1.1em;
  font-weight: 800;
  margin-left: -0.2em;
}

/* 左右の装飾の星 */
.site-header__user-count-star {
  color: #f5c842;
  font-size: 0.9em;
  flex-shrink: 0;
}

/* バナー画像未設定時のプレースホルダ（「画像差し込み可能」の案内表示） */
.site-header__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  border: 2px dashed #9ca3af;
  background-color: #f9fafb;
  color: #6a7282;
  font-size: 18px;
  font-weight: 500;
}


.site-nav {
  /* バナーと同じ幅(1280px)で中央寄せ。バナーの深緑×金に合わせた和モダンの帯にして
     バナーとメニューをひとつの塊に見せる（ボス指示 2026-07-05） */
  max-width: 1280px;
  margin: 0 auto;
  background-color: #17603a;
  border-bottom: 3px solid #c9a54b; /* 金の細ライン＝バナーの金文字と呼応 */
}

.site-nav__container {
  display: flex;
  align-items: stretch;
}

.site-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 16px;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.16); /* 項目間のうっすら区切り */
  font-size: 18px; /* 16 → 18px に底上げして読みやすく */
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.site-nav__item:last-child {
  border-right: none;
}

.site-nav__item:hover {
  background-color: #1e7947; /* ホバーはひとつ明るい緑 */
}

/* 出品するボタン（プライマリ）も通常時は同じ緑帯（ホバー時のみ明るく） */
.site-nav__item--primary {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

.site-nav__item--primary:hover {
  background-color: #1e7947;
}

/* 現在表示中のページ（active）: 金の下線＋淡い金文字で「今ここ」を示す */
.site-nav__item--active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #f3d98b;
  box-shadow: inset 0 -3px 0 #c9a54b;
}

/* ハンバーガーボタン本体: 初期は非表示（スマホでのみ有効化） */
.site-nav__hamburger {
  display: none;
}

/* ドロワー閉じるボタン(×): 初期は非表示（スマホドロワー時のみ表示） */
.site-nav__close {
  display: none;
}

/* 背景オーバーレイ: 初期は非表示 */
.site-nav__backdrop {
  display: none;
}

/* ─────────────────────────────────────────────
   スマホ専用の上部ストリップ: バナー直下に表示。
   3等分: トップ / マイページ(or ログイン) / ハンバーガー
   PC では非表示。
───────────────────────────────────────────── */
.site-mobile-strip {
  display: none;
}

.site-mobile-strip__item {
  /* トップ／マイページの2項目は残り幅を均等に分け合う */
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: 17px; /* 15 → 17px に底上げ */
  font-weight: 700;
  color: #0a0a0a;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.site-mobile-strip__item--active {
  /* 現在ページは文字色だけ変えて、背景は変えない */
  color: #008236;
}

.site-mobile-strip__hamburger {
  /* ハンバーガーは固定幅で控えめに（旧版は1/3幅で大きすぎたので 56px に固定） */
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 48px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}


@media (max-width: 768px) {
  .site-header__top {
    flex-direction: column;
  }

  /* スマホでも PC と同じくバナー画像内に「現在のユーザー数」枠を重ねる。
     高さ制限は外しておく（max-heightで切れて枠が画像からはみ出るのを避ける） */
  .site-header__banner {
    max-height: none;
  }
  /* PCと同じ位置（bottom: 6%）のまま、文字サイズと padding だけスマホ用に縮める。
     スマホは画像が小さくロゴと被るので、中心位置を少し右にずらす */
  .site-header__user-count {
    left: 53%;
    padding: 2px 10px;
    font-size: 9px;
    gap: 4px;
    border-width: 1px;
    outline-width: 1px;
    outline-offset: 1px;
  }
  .site-header__user-count-num {
    font-size: 1.25em;
  }

  .site-header__placeholder {
    height: 80px;
    font-size: 14px;
  }

  /* ── スマホ時のナビゲーション: 右からスライドインするドロワー ──
     上端は CSS 変数 --mikawa-header-h（バナー＋ストリップの実測値）の真下に置き、
     ヘッダーが隠れないようにする。JS が DOMContentLoaded・load・resize 時に値を更新。 */
  .site-nav {
    position: fixed;
    top: var(--mikawa-header-h, 0);
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    background-color: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    overflow-y: auto;
    border-top: 1px solid #e5e7eb;
    border-bottom: none;
  }

  body.site-nav-open .site-nav {
    transform: translateX(0);
  }

  .site-nav__container {
    flex-direction: column;
    /* × 閉じるボタンは drawer の外（バナー直下のストリップ位置）に出したので、
       drawer 内の上余白は最小限でOK */
    padding: 12px 0 20px;
    align-items: stretch;
  }

  .site-nav__item {
    flex: 0 0 auto;
    width: 100%;
    height: 56px;
    font-size: 17px; /* 15 → 17px に底上げ（ハンバーガーメニューの項目） */
    justify-content: flex-start;
    padding: 0 24px;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    /* ドロワーは白背景なので、デスクトップの緑帯用（白文字）を黒に戻す */
    color: #0a0a0a;
    letter-spacing: normal;
  }

  .site-nav__item:first-child {
    border-top: 1px solid #e5e7eb;
  }

  /* ドロワー内のホバー/アクティブ/プライマリも白背景向けに戻す */
  .site-nav__item:hover,
  .site-nav__item--primary:hover {
    background-color: #f3f4f6;
  }

  .site-nav__item--primary {
    color: #0a0a0a;
  }

  .site-nav__item--active {
    background-color: transparent;
    color: #0a0a0a;
    box-shadow: none;
  }

  /* drawer 内では「トップ・マイページ・ログイン」を非表示にする
     （これらはバナー直下のストリップに別途出ているので、drawer に出すと重複する） */
  .site-nav__item--home,
  .site-nav__item--mypage,
  .site-nav__item--login {
    display: none;
  }

  /* ── スマホ用ストリップを表示 ──
     ストリップ全体（ハンバーガーボタン含む）はバナー直下に固定。
     ハンバーガーボタン本体は site-mobile-strip__hamburger でスタイル指定済み。 */
  .site-mobile-strip {
    display: flex;
    align-items: stretch;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
  }

  /* drawer を開く前の通常ハンバーガーは strip 内のものだけ。
     旧版の浮き型ハンバーガーは廃止したので、絶対配置・固定サイズの旧スタイルは無効化 */
  .site-nav__hamburger {
    /* base.css の .site-mobile-strip__hamburger でスタイル指定済み（display: flex 等）
       何も追加で設定しない（旧仕様の display: flex / 絶対配置を上書きしない） */
    transition: background-color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .site-nav__hamburger:hover {
    background-color: #f3f4f6;
  }

  .site-nav__hamburger:focus,
  .site-nav__hamburger:active {
    outline: none;
  }

  /* キーボード操作時のみフォーカスリングを表示（マウス/タッチでは非表示） */
  .site-nav__hamburger:focus-visible {
    outline: 2px solid #00a63e;
    outline-offset: -2px;
  }

  .site-nav__hamburger-line {
    display: block;
    width: 18px;
    height: 2px;
    background-color: #0a0a0a;
  }

  /* ドロワー側に専用の × 閉じるボタンがあるので、ハンバーガーは
     開いている間も ☰ のまま（変換しない）。ストリップは画面に
     残るのでタップでも閉じられるが、視覚的には drawer 内の × が主役。 */

  /* ── × 閉じるボタン: 開いたときだけ表示 ──
     位置: バナー直下のモバイルストリップにある「ハンバーガー」セルの上にぴったり重ねる。
       縦: var(--mikawa-header-h) - 48px（=ストリップの上端）
       横: right: 0
       サイズ: 56x48 （ストリップのハンバーガーセル width: 56px / height: 48px と一致）
     z-index: 300 でドロワー(200)・バックドロップ(190)・ストリップ(通常 flow) より上。
     opaque な白背景＋左ボーダーでハンバーガーセルを完全に上書き表示。 */
  body.site-nav-open .site-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(var(--mikawa-header-h, 200px) - 48px);
    right: 0;
    width: 56px;
    height: 48px;
    background: #ffffff;
    border: none;
    border-left: 1px solid #e5e7eb;
    color: #0a0a0a;
    cursor: pointer;
    padding: 0;
    z-index: 300;
    -webkit-tap-highlight-color: transparent;
  }
  .site-nav__close svg {
    width: 30px;
    height: 30px;
  }
  .site-nav__close:focus-visible {
    outline: 2px solid #00a63e;
    outline-offset: -2px;
  }

  /* ── バックドロップもヘッダーを覆わないように、上端をヘッダー直下に ── */
  .site-nav__backdrop {
    top: var(--mikawa-header-h, 0) !important;
  }

  /* 背景オーバーレイ: 開いた時だけ表示（タップで閉じる） */
  .site-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 190;
  }

  body.site-nav-open .site-nav__backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* ドロワー展開中はページのスクロールを止める */
  body.site-nav-open {
    overflow: hidden;
  }
}

/* 戻るボタン・back-nav 関連スタイルは全廃止（2026-05-09）。
   入札成功後はサクセス通知と更新された商品情報の表示で完結する方針に変更。 */

.site-footer {
  border-top: 2px solid #d1d5dc;
  max-width: 1280px;
  margin: 0 auto;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 32px;
}

.site-footer__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-footer__nav-link {
  font-size: 18px; /* 旧16px → 18px に拡大、フッターメニューを読みやすく */
  color: #4a5565;
  line-height: 1.5;
  transition: color 0.2s;
}

.site-footer__nav-link:hover {
  color: #008236;
}

.site-footer__nav-divider {
  color: #d1d5dc;
  font-size: 18px; /* リンクと揃える */
}

.site-footer__copyright {
  font-size: 14px; /* 旧12px → 14px */
  color: #6a7282;
  line-height: 1.4;
  text-align: center;
}


@media (max-width: 768px) {
  .site-footer__inner {
    padding: 20px 12px;
    gap: 8px;
  }
  .site-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    text-align: center;
  }
  .site-footer__nav-link {
    font-size: 16px; /* 旧14px → 16px、スマホでも読みやすいサイズに */
  }
  .site-footer__nav-divider {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   2段ヘッダー（2026-07-08）: ①ブランド共通バー ②セクションヒーロー ③サブナビ
   深緑 #17603a / 金 #c9a54b / 砂 #e7decb の作法を継承
═══════════════════════════════════════════════════════════ */

/* ── ① ブランド共通バー ── */
.brandbar { background:#17603a; border-bottom:3px solid #c9a54b; }
.brandbar__inner { max-width:1280px; margin:0 auto; display:flex; align-items:stretch; gap:8px; padding:0 20px; min-height:60px; }
.brandbar__brand { display:flex; align-items:center; gap:9px; color:#fff; font-weight:800; font-size:19px; letter-spacing:.04em; white-space:nowrap; }
.brandbar__brand:hover { color:#f3d98b; }
.brandbar__mark { flex-shrink:0; }
.brandbar__nav { display:flex; align-items:stretch; margin-left:14px; }
.brandbar__link { display:inline-flex; align-items:center; padding:0 17px; color:#eaf3ec; font-weight:700; font-size:15.5px; letter-spacing:.03em; border-bottom:3px solid transparent; margin-bottom:-3px; transition:background-color .15s,color .15s; }
.brandbar__link:hover { color:#fff; background:#1e7947; }
.brandbar__link.is-active { color:#f3d98b; border-bottom-color:#c9a54b; background:rgba(255,255,255,.06); }
.brandbar__account { display:flex; align-items:center; gap:15px; margin-left:auto; }
.brandbar__acc-link { color:#eaf3ec; font-weight:700; font-size:14px; white-space:nowrap; }
.brandbar__acc-link:hover { color:#fff; }
.brandbar__acc-link--cta { background:#c9a54b; color:#173404; padding:7px 15px; border-radius:6px; }
.brandbar__acc-link--cta:hover { background:#d9b75f; color:#173404; }
.brandbar__acc-link--muted { color:#bcd3c3; font-size:13px; }
.brandbar__cart { position:relative; color:#fff; display:inline-flex; align-items:center; }
.brandbar__cart:hover { color:#f3d98b; }
.brandbar__cart-count { position:absolute; top:-7px; right:-9px; background:#c9a54b; color:#173404; font-size:11px; font-weight:800; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.brandbar__cart-count.hidden { display:none; }
.brandbar__burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; background:none; border:none; cursor:pointer; padding:0; }
.brandbar__burger span { display:block; width:24px; height:2px; background:#fff; margin:0 auto; border-radius:2px; }

/* ── ② セクション別ヒーロー ── */
.sechero--auction { background:#e7decb; }
.sechero__banner { max-width:1280px; margin:0 auto; position:relative; }
.sechero__banner .custom-logo, .sechero__banner .custom-logo-link { display:block; width:100%; height:auto; }
.sechero--shop { background:#173d2a; }
.sechero--shop .sechero__inner { max-width:1280px; margin:0 auto; padding:34px 20px; text-align:center; }
.sechero__eyebrow { color:#c9a54b; font-weight:700; letter-spacing:.24em; font-size:12px; margin:0 0 8px; }
.sechero--shop .sechero__title { color:#fff; font-size:30px; font-weight:800; margin:0; letter-spacing:.08em; }
.sechero--shop .sechero__lead { color:#d3e0d7; font-size:14.5px; margin:12px 0 0; }
.sechero--plain { background:#e7decb; }
.sechero--plain .sechero__inner { max-width:960px; margin:0 auto; padding:26px 20px; }
.sechero--plain .sechero__title { color:#14532d; font-size:26px; font-weight:800; margin:0; border-left:8px solid #17603a; padding-left:14px; }

/* ── ③ セクション別サブナビ ── */
.sectionnav { background:#ffffff; border-bottom:1px solid #d8cba8; }
.sectionnav__inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:4px; padding:0 20px; height:48px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sectionnav__badge { flex-shrink:0; font-size:11.5px; font-weight:800; color:#fff; padding:4px 11px; border-radius:20px; white-space:nowrap; margin-right:6px; }
.sectionnav__badge--auction { background:#17603a; }
.sectionnav__badge--shop { background:#b06d1f; }
.sectionnav__link { flex-shrink:0; color:#5b6b5e; font-weight:700; font-size:14px; padding:6px 13px; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; }
.sectionnav__link:hover { color:#17603a; }
.sectionnav__link.is-active { color:#17603a; border-bottom-color:#c9a54b; }

/* ── スマホ用ドロワー ── */
.mikawa-drawer { display:none; }
.mikawa-drawer-open .mikawa-drawer { display:block; }
.mikawa-drawer__backdrop { position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:1000; }
.mikawa-drawer__panel { position:fixed; top:0; right:0; height:100%; width:84%; max-width:330px; background:#fff; z-index:1001; overflow-y:auto; padding:16px 16px 48px; box-shadow:-6px 0 22px rgba(0,0,0,.22); }
.mikawa-drawer__close { position:absolute; top:10px; right:10px; background:none; border:none; color:#17603a; cursor:pointer; padding:4px; }
.mikawa-drawer__heading { color:#8a8272; font-size:11.5px; font-weight:800; letter-spacing:.14em; margin:18px 4px 6px; text-transform:none; }
.mikawa-drawer__heading:first-of-type { margin-top:30px; }
.mikawa-drawer__link { display:block; padding:12px 12px; font-size:16px; font-weight:700; color:#14532d; border-radius:8px; }
.mikawa-drawer__link:hover { background:#f1ede1; }
.mikawa-drawer__link.is-active { color:#b06d1f; background:#f7f0e2; }
.mikawa-drawer__link--sub { font-size:15px; font-weight:600; color:#4a5a4d; padding-left:22px; }

/* ── レスポンシブ: 820px以下はドロワーに集約 ── */
@media (max-width:820px) {
  .brandbar__inner { min-height:54px; padding:0 14px; gap:10px; }
  .brandbar__brand { font-size:17px; }
  .brandbar__nav { display:none; }
  .brandbar__account { gap:16px; }
  .brandbar__acc-link { display:none; }
  .brandbar__burger { display:flex; }
  .sechero--shop .sechero__inner { padding:24px 16px; }
  .sechero--shop .sechero__title { font-size:23px; }
  .sechero__eyebrow { font-size:11px; }
  .sectionnav__inner { height:44px; }
}

/* ═══════════════════════════════════════════════════════════
   ホームページ（玄関ハブ） 2026-07-08
═══════════════════════════════════════════════════════════ */
.home-wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.home-section { padding:58px 0; }
.home-section--tint { background:#efe7d4; }
.home-section--green { background:#15412b; }
.home-h2 { text-align:center; font-size:clamp(21px,3vw,27px); font-weight:800; color:#14532d; margin:0; letter-spacing:.04em; }
.home-h2::after { content:""; display:block; width:52px; height:3px; background:#c9a54b; margin:12px auto 0; border-radius:2px; }
.home-h2--left { text-align:left; }
.home-h2--left::after { margin-left:0; }
.home-h2--onGreen { color:#fff; }
.home-h2sub { text-align:center; color:#5b6b5e; font-size:14.5px; line-height:1.9; margin:16px 0 34px; }

/* ヒーロー */
.home-hero { background:#15412b; color:#fff; text-align:center; padding:64px 20px 72px; }
.home-hero__inner { max-width:840px; margin:0 auto; }
.home-hero__eyebrow { color:#e2c877; letter-spacing:.22em; font-size:13px; font-weight:700; margin:0 0 18px; }
.home-hero__title { font-size:clamp(27px,5vw,44px); font-weight:800; line-height:1.4; margin:0 0 22px; letter-spacing:.04em; }
.home-hero__lead { color:#d7e3da; font-size:clamp(14px,1.8vw,16px); line-height:2; margin:0 0 34px; }
.home-hero__actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.home-cta { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:236px; padding:16px 26px; border-radius:12px; font-weight:800; transition:transform .12s; }
.home-cta:hover { transform:translateY(-2px); }
.home-cta__label { font-size:18px; }
.home-cta__sub { font-size:12px; font-weight:600; opacity:.92; letter-spacing:.02em; }
.home-cta--auction { background:#c9a54b; color:#143d29; }
.home-cta--auction:hover { background:#d9b75f; }
.home-cta--shop { background:#fff; color:#15412b; }
.home-cta--shop:hover { background:#f2ecdd; }

/* 2つのお店 */
.home-stores { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.home-store { display:block; background:#fff; border:1px solid #e3d9c0; border-radius:16px; padding:28px 26px; transition:transform .14s, box-shadow .14s, border-color .14s; }
.home-store:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,60,40,.12); border-color:#c9a54b; }
.home-store__tag { display:inline-block; background:#17603a; color:#fff; font-size:12px; font-weight:800; padding:5px 13px; border-radius:20px; letter-spacing:.06em; }
.home-store__tag--shop { background:#b06d1f; }
.home-store__title { font-size:20px; font-weight:800; color:#14532d; margin:16px 0 10px; }
.home-store__desc { font-size:14.5px; line-height:1.95; color:#4a5248; margin:0 0 16px; }
.home-store__more { font-weight:800; color:#17603a; font-size:14.5px; }
.home-store__more--shop { color:#b06d1f; }

/* 園について */
.home-about { display:grid; grid-template-columns:1.6fr 1fr; gap:36px; align-items:center; }
.home-about__eyebrow { color:#b8983f; letter-spacing:.2em; font-size:12px; font-weight:800; margin:0 0 8px; }
.home-about__text { font-size:15px; line-height:2.05; color:#3f4a3f; margin:16px 0 18px; }
.home-about__text strong { color:#14532d; }
.home-textlink { font-weight:800; color:#17603a; }
.home-textlink:hover { color:#0f4a2a; }
.home-about__stats { display:flex; flex-direction:column; gap:14px; }
.home-stat { background:#fff; border:1px solid #e3d9c0; border-radius:12px; padding:18px 20px; text-align:center; }
.home-stat__num { display:block; font-size:26px; font-weight:800; color:#17603a; }
.home-stat__label { font-size:13px; color:#6a7268; }

/* 3つの特徴 */
.home-features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
.home-feature { text-align:center; padding:10px; }
.home-feature__icon { width:62px; height:62px; margin:0 auto 14px; border-radius:50%; background:#eef4ec; color:#17603a; font-size:25px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #c9a54b; }
.home-feature__title { font-size:16.5px; font-weight:800; color:#14532d; margin:0 0 8px; }
.home-feature__text { font-size:14px; line-height:1.85; color:#5b6b5e; margin:0; }

/* アクセス */
.home-access__info { max-width:640px; }
.home-access__dl { display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:22px 0 26px; }
.home-access__dl dt { color:#c9a54b; font-weight:800; font-size:14px; }
.home-access__dl dd { color:#e7efe9; font-size:14.5px; line-height:1.8; margin:0; }
.home-btn-line { display:inline-block; background:#c9a54b; color:#143d29; font-weight:800; padding:13px 28px; border-radius:8px; }
.home-btn-line:hover { background:#d9b75f; }

@media (max-width:820px) {
  .home-br-pc { display:none; }
  .home-hero { padding:46px 18px 54px; }
  .home-section { padding:42px 0; }
  .home-cta { min-width:0; width:100%; }
  .home-stores { grid-template-columns:1fr; gap:16px; }
  .home-about { grid-template-columns:1fr; gap:22px; }
  .home-about__stats { flex-direction:row; }
  .home-stat { flex:1; }
  .home-features { grid-template-columns:1fr; gap:12px; margin-top:26px; }
  .home-feature { display:flex; align-items:center; gap:14px; text-align:left; padding:6px; }
  .home-feature__icon { margin:0; flex-shrink:0; width:52px; height:52px; font-size:22px; }
}

/* ═══════════════════════════════════════════════════════════
   ATELIER — 和の植物アトリエ 2026-07-08
   明朝見出し・奥行きのある背景・金の額装・入場アニメで“作品”に引き上げる
═══════════════════════════════════════════════════════════ */
:root {
  --serif: "Noto Serif JP", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  --gold: #c9a54b;
  --gold-soft: #d9bd73;
  --cream: #f3ecd9;
  --ink-green: #123a22;
}

/* 見出しを明朝に（格が上がる） */
.brandbar__name,
.sechero__title,
.home-hero__title,
.home-h2,
.home-store__title,
.home-feature__title,
.home-stat__num,
.page-title,
.shop-card__title,
.shop-detail__title { font-family: var(--serif); }

@keyframes atelierUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ── ホームヒーロー：奥行き・微細な粒子・金の額装 ── */
.home-hero {
  position: relative;
  padding: 88px 20px 96px;
  overflow: hidden;
  background-color: #123a22;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(201,165,75,.07) 1px, transparent 0),
    radial-gradient(135% 105% at 82% 12%, #1f5233 0%, #143c24 52%, #0d2a19 100%);
  background-size: 22px 22px, 100% 100%;
}
.home-hero::before {                     /* 金の二重細枠（額装） */
  content:""; position:absolute; inset:16px; border:1px solid rgba(201,165,75,.45);
  outline:1px solid rgba(201,165,75,.18); outline-offset:6px; pointer-events:none;
}
.hero-botanical {                        /* 植物のシルエット（淡い金の気配） */
  position:absolute; right:-30px; bottom:-46px; width:300px; height:300px;
  color:var(--gold); opacity:.09; pointer-events:none; z-index:0;
}
.hero-botanical--tl { right:auto; bottom:auto; left:-56px; top:-56px; width:210px; height:210px; opacity:.07; transform:rotate(18deg); }
.home-hero__inner { position:relative; z-index:1; }
.home-hero__eyebrow {
  display:inline-flex; align-items:center; gap:14px; justify-content:center;
  color:var(--gold-soft); letter-spacing:.34em; font-size:12px; font-weight:600;
  animation: atelierUp .9s cubic-bezier(.2,.7,.2,1) both;
}
.home-hero__eyebrow::before, .home-hero__eyebrow::after { content:""; width:32px; height:1px; background:var(--gold); opacity:.65; }
.home-hero__title {
  font-family:var(--serif); font-weight:600; color:var(--cream);
  font-size:clamp(30px,5.2vw,50px); line-height:1.55; letter-spacing:.06em; margin:22px 0 24px;
  animation: atelierUp .9s cubic-bezier(.2,.7,.2,1) .12s both;
}
.home-hero__lead { color:#cdd9cf; animation: atelierUp .9s cubic-bezier(.2,.7,.2,1) .24s both; }
.home-hero__actions { animation: atelierUp .9s cubic-bezier(.2,.7,.2,1) .36s both; }

/* CTA：エディトリアルに（角を締め、金に発光） */
.home-cta { border-radius:3px; letter-spacing:.04em; }
.home-cta--auction { background:var(--gold); color:#12351f; box-shadow:0 10px 26px rgba(201,165,75,.26); }
.home-cta--auction:hover { background:var(--gold-soft); }
.home-cta--shop { background:transparent; color:var(--cream); border:1px solid rgba(217,189,115,.7); }
.home-cta--shop:hover { background:rgba(201,165,75,.12); }
.home-cta__label { font-family:var(--serif); font-weight:600; letter-spacing:.08em; }

/* 見出し：金の細棒 → 菱形の crest に */
.home-h2 { font-weight:600; letter-spacing:.08em; }
.home-h2::after { width:9px; height:9px; background:transparent; border:1px solid var(--gold); transform:rotate(45deg); border-radius:0; margin-top:16px; }
.home-h2--left::after { margin-left:1px; }
.home-h2sub { letter-spacing:.02em; }

/* ── 「2つのお店」カード：質感と余白 ── */
.home-store { border-radius:6px; border-color:#e2d6ba; padding:32px 30px; position:relative; }
.home-store::before { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--gold); opacity:0; transition:opacity .18s; }
.home-store:hover::before { opacity:1; }
.home-store__tag { border-radius:2px; letter-spacing:.12em; }
.home-store__title { font-weight:600; letter-spacing:.03em; font-size:21px; }

/* ── 特徴アイコン：金縁の円に明朝の一文字 ── */
.home-feature__icon { font-family:var(--serif); background:#12351f; color:var(--gold); border-color:var(--gold); }

/* ── ショップ・ヒーロー：ホームと同じアトリエ処理 ── */
.sechero--shop {
  position:relative; overflow:hidden;
  background-color:#123a22;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(201,165,75,.07) 1px, transparent 0),
    radial-gradient(140% 130% at 84% 8%, #1f5233 0%, #143c24 55%, #0f2f1d 100%);
  background-size: 22px 22px, 100% 100%;
}
.sechero--shop::before { content:""; position:absolute; inset:12px; border:1px solid rgba(201,165,75,.4); outline:1px solid rgba(201,165,75,.16); outline-offset:5px; pointer-events:none; }
.sechero--shop .sechero__inner { position:relative; z-index:1; padding:40px 20px; }
.sechero--shop .sechero__title { font-family:var(--serif); font-weight:600; letter-spacing:.18em; font-size:clamp(24px,4vw,34px); }
.sechero__eyebrow { display:inline-flex; align-items:center; gap:12px; }
.sechero__eyebrow::before, .sechero__eyebrow::after { content:""; width:26px; height:1px; background:var(--gold); opacity:.6; }

/* ── ブランド名も明朝で少し格上げ ── */
.brandbar__name { font-family:var(--serif); font-weight:600; letter-spacing:.08em; }