/* ==========================================================================
   OMOtenashi スキン — cocoico テーマの設計トークンを「墨/朱/生成り」＋明朝/ゴシックへ上書き
   テンプレHTMLは変更せず、:root 変数の再定義で全体の色・書体を寄せる。
   読み込みは最後（functions.phpで優先度9999）なので、後勝ちでこの定義が効く。
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
  /* 書体：見出し＝明朝(Shippori Mincho)、本文＝ゴシック(Zen Kaku Gothic New) */
  --font-serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans:  "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* アクセント：朱(shu #b3452c) を primary スケールに */
  --color-primary-50:  #faf1ec;
  --color-primary-100: #f3dcd3;
  --color-primary-200: #e6b9a9;
  --color-primary-300: #d6917b;
  --color-primary-400: #c56b50;
  --color-primary-500: #b3452c; /* 朱 */
  --color-primary-600: #9c3a23;
  --color-primary-700: #8d3320; /* 朱深め */
  --color-primary-800: #732a1a;
  --color-primary-900: #5e2215;

  /* 背景・文字：生成り(kinari)〜墨(sumi) の暖色ニュートラル */
  --color-neutral-0:   #fffdf9;
  --color-neutral-50:  #f8f3ea;
  --color-neutral-100: #f5f0e7; /* 生成り */
  --color-neutral-200: #ece4d6; /* 生成り濃いめ */
  --color-neutral-300: #d8ccb9; /* 罫線 */
  --color-neutral-400: #b3a892;
  --color-neutral-500: #8a8073;
  --color-neutral-600: #5f574c;
  --color-neutral-700: #3c342d; /* 墨やわらか */
  --color-neutral-800: #2a2420;
  --color-neutral-900: #1b1714; /* 墨 */

  /* 角は立てて編集的に（丸みを抑える） */
  --radius-sm:   2px;
  --radius-md:   2px;
  --radius-lg:   3px;
  --radius-xl:   3px;
  --radius-2xl:  4px;
  --radius-full: 9999px; /* 丸バッジ等は維持 */

  /* 影は控えめ、罫線で見せる */
  --shadow-lg:    0 1px 0 rgba(27,23,20,0.04), 0 6px 18px rgba(27,23,20,0.06);
  --shadow-hover: 0 8px 22px rgba(27,23,20,0.10);

  --border-color: #d8ccb9;
}

/* ベースの地色を生成りに寄せる（白すぎを避ける） */
body {
  background-color: var(--color-neutral-100);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

/* 見出しは明朝で字間を少しゆとり */
h1, h2, h3, .heading, [class*="title"] {
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
}

/* 選択範囲も朱に */
::selection { background: var(--color-primary-500); color: #fff; }

/* ───────────────────────────────────────────────
   モバイル検索オーバーレイのレイアウト崩れ修正（cocoico由来の既存バグ）
   .site-header の backdrop-filter が、子孫の position:fixed（モバイル検索）を
   ヘッダー基準にしてしまい全画面で出ず、コンテンツに被っていた。
   backdrop-filter を無効化すると fixed が画面基準に戻り、全画面オーバーレイになる。
   （ヘッダーは rgba(255,255,255,.95) の地色を持つので見た目はほぼ維持）
   ─────────────────────────────────────────────── */
.site-header,
.site-header--transparent,
.site-header--scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* 念のためオーバーレイは最前面・不透明な地色・全画面で */
.site-header__mobile-nav {
  z-index: 99999 !important;
  background: #f6f1e8 !important;
}

/* ───────────────────────────────────────────────
   絞り込みの「ジャンル」「エリア」が縦にずらっと長くなるのを2列に。
   ジャンル本体＝scatチェックを含む body、エリア本体＝filter-area-group を含む body を対象。
   ─────────────────────────────────────────────── */
/* エリア（都道府県）だけ2列に。ジャンルは1列のまま（文字切れ防止）。 */
.filter-section__body:has(.filter-area-group) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px !important; /* インラインの gap:0 を上書き */
  row-gap: 8px !important;
  align-items: start;
}
/* 隣接セレクタの margin-top が2列だと先頭(北海道)だけ上にズレるので無効化し、row-gapで均等に */
.filter-section__body:has(.filter-area-group) .filter-area-group { margin-top: 0 !important; }
@media (max-width: 360px) {
  .filter-section__body:has(.filter-area-group) { grid-template-columns: 1fr; }
}