@charset "UTF-8";
/**
 * KSB QUICK テキスト版 — フロントページ専用スタイル（新聞型 / テキストファースト）
 *
 * デザインシステム（緑＋セージ、Saira Condensed / Zen Kaku Gothic / Noto Sans JP）に準拠。
 * PC=多段組みの新聞紙面、スマホ=1カラムのテキストファーストへレスポンシブに変化する。
 * フロントページでのみ読み込むため、汎用クラス名でも内部ページに影響しない。
 */
:root {
  --g-deep:#2f5733;
  --g:#50874b;
  --g-mid:#6f9f68;
  --sage:#cbdbc9;
  --sage-soft:#e8efe5;
  --sage-line:#dce6d8;
  --ink:#1b271c;
  --ink-mid:#41513f;
  --ink-soft:#71806e;
  --ink-faint:#9aa897;
  --line:#e4e8e0;
  --line-soft:#e1e1e1;
  --paper:#fbfcf9;
  --card:#fff;
  --cal-line:#bcc7b3; /* カレンダー罫線（--line では薄すぎるため濃いめ） */
  --okayama:#4a6fa5;
  --kagawa:#50874b;
  --accent:#d98b3c;
  --disp:'Saira Condensed','Zen Kaku Gothic New',sans-serif;
  --jp:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  --body:'Noto Sans JP',system-ui,sans-serif;
}

body.kqx {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.7;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* リセット：元デザインの *{box-sizing;margin:0;padding:0} を踏襲。フロント専用 .kqx 配下に限定。
   詳細度を低く（クラス1個ぶん）保つことで、後続のコンポーネント指定が正しく上書きする。
   管理バー(#wpadminbar)は自身のID詳細度スタイルが勝つため、このリセットでは崩れない。 */
.kqx * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.kqx img {
  max-width: 100%;
  height: auto;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* slash motif */
.slash-bars {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}

.slash-bars i {
  width: 6px;
  height: 20px;
  background: var(--g);
  transform: skewX(-18deg);
  display: block;
}

.slash-bars i:nth-child(2) {
  background: var(--sage);
}

/* kicker */
.kicker {
  display: inline-block;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--g);
  padding: 4px 11px 3px;
  transform: skewX(-12deg);
}

.kicker > span {
  display: inline-block;
  transform: skewX(12deg);
}

.kicker.warm {
  background: var(--accent);
}

.kicker.ka {
  background: var(--kagawa);
}

.kicker.ink {
  background: var(--ink);
}

/* image placeholder（グルメ等の意図的画像セクション） */
.ph {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eae5 0%, #d4d8cf 100%);
  display: block;
}

.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 13px, rgba(0, 0, 0, 0.025) 13px, rgba(0, 0, 0, 0.025) 14px);
}

.ph.v2 {
  background: linear-gradient(135deg, #e6e8ec 0%, #d2d6dc 100%);
}

.ph.v3 {
  background: linear-gradient(135deg, #eae7e2 0%, #d9d4cb 100%);
}

.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.5px;
  z-index: 1;
}

.gcard-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.gcard {
  cursor: pointer;
}

.gcard .ph {
  height: 150px;
  margin-bottom: 11px;
}

.gcard .kicker {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.gcard h4 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.gcard:hover h4 {
  color: var(--g-deep);
}

.gcard .g-sub {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ===== masthead ===== */
.mast {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.mast .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
}

.mast-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.mast-logo p {
  font-size: 12px;
  margin-top: 4px;
}

.mast-r {
  display: flex;
  align-items: center;
  gap: 14px;
}

.area-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--sage-line);
  background: var(--sage-soft);
  padding: 8px 14px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 13px;
  color: var(--g-deep);
  cursor: pointer;
}

.area-pick svg {
  color: var(--g);
}

/* ヘッダー検索フォーム。WordPress が検索結果ページの body へ付与する .search と
   衝突しないよう .mast 配下に限定する（body.search に当たるとレイアウトが壊れる）。 */
.mast .search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 9px 14px;
  width: 200px;
  color: var(--ink-soft);
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  font-family: var(--body);
  text-align: left;
}

.mast .search:hover {
  border-color: var(--sage-line);
  background: var(--sage-soft);
  color: var(--g-deep);
}

.mast .search .search-ph {
  flex: 1;
}

.mast .search input {
  border: none;
  outline: none;
  flex: 1;
  font-family: var(--body);
  font-size: 13px;
  background: none;
  color: var(--ink);
}

/* ===== nav ===== */
.nav {
  background: var(--g-deep);
  position: sticky;
  top: 0;
  z-index: 30;
}

.nav .wrap {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.nav a {
  position: relative;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
  color: #cfe0cc;
  padding: 15px 22px;
  letter-spacing: 0.02em;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.nav a.on {
  color: #fff;
}

.nav a.on::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  background: var(--sage);
  transform: skewX(-18deg);
}

.nav-spacer {
  flex: 1;
}

/* メニュー並び替え：ナビ右端の編集ボタン */
.nav-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #cfe0cc;
  padding: 0 18px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: stretch;
}

.nav-edit:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.nav-edit svg {
  width: 26px;
  height: 26px;
  display: block;
}

.nav-edit svg circle {
  fill: var(--g-deep);
} /* ノブはナビ背景色で塗り、線の上に乗って見える（スライダー表現） */
/* 並び替えモーダルの項目（タップ順に番号） */
.kq-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  padding: 12px 14px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.kq-order-item.sel {
  border-color: var(--g);
  background: var(--sage-soft);
}

.kq-order-num {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  background: var(--sage-soft);
  border: 1px solid var(--line);
}

.kq-order-item.sel .kq-order-num {
  color: #fff;
  background: var(--g);
  border-color: var(--g);
}

.kq-order-name {
  flex: 1;
  font-family: var(--jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.kq-order-actions {
  padding: 6px 22px 22px;
}

.kq-order-save {
  width: 100%;
  height: 50px;
  border: none;
  background: var(--g);
  color: #fff;
  font-family: var(--jp);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.kq-order-save:hover {
  background: var(--g-deep);
}

.kq-order-save:active {
  transform: scale(0.99);
}

.nav .nav-live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 15px 0;
  text-transform: uppercase;
}

.nav .nav-live .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: kqpulse 1.6s infinite;
}

@keyframes kqpulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* ================= リード記事 =================
   本文カラム（main）の先頭に置く 1 件（編集部ピック or 新着の先頭）。
   以前は 2 カラム HERO の左側だったが、サイド枠を廃止して新着記事に集約したため、
   本文幅いっぱいの単一カラムになり、下線で新着記事と区切る。 */
.hero-lead {
  position: relative;
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--line);
}

/* リード全体をクリック可能に：見出しリンクを疑似要素でカード全面へ拡張（署名はリンク化していないので入れ子リンクにならない）。 */
.hero-lead > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-lead .lead-cats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.hero-lead h1 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.24;
  letter-spacing: 0.01em;
}

.hero-lead a:hover h1 {
  color: var(--g-deep);
}

.hero-lead .dek {
  font-size: 15.5px;
  color: var(--ink-mid);
  margin-top: 16px;
  line-height: 1.85;
}

.hero-lead .byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.hero-lead .byline .area {
  font-weight: 700;
  color: var(--ink);
} /* トップは色分けしない（黒） */
.hero-lead .byline a.area:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-lead .pull {
  margin-top: 22px;
  padding: 16px 0 4px 22px;
  border-left: 4px solid var(--sage);
  font-family: var(--jp);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  color: var(--g-deep);
}

/* ================= section head ================= */
.sec {
  padding: 34px 0;
}

.sec-latest {
  padding-top: 6px;
} /* リード記事の直後なので上を詰める（PC）。SPは下のメディアクエリで広げる */
.sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}

.sec-head h2 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 23px;
  letter-spacing: 0.01em;
}

.sec-head .en {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* 単体ボタンと分かる縁取り＋背景。矢印がサイドのランキングを指して見える誤解を避ける。 */
/* 各セクション下部の「記事一覧を見る」。セクション末尾にセンター配置する。
   一覧の区切りとして目立たせるため、緑ベタ塗り＋白文字のボタンにする。 */
.sec-more {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.sec-more .more {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 280px;
  border: 1.5px solid var(--g);
  background: var(--g);
  padding: 14px 30px;
  box-shadow: 0 1px 2px rgba(47, 87, 51, 0.18);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.sec-more .more::after {
  content: "→";
  font-family: var(--disp);
  font-weight: 700;
}

.sec-more .more:hover {
  background: var(--g-deep);
  border-color: var(--g-deep);
  box-shadow: 0 3px 8px rgba(47, 87, 51, 0.26);
}

/* ================= body ================= */
.body-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding-bottom: 30px;
}

/* グリッド子の min-width:auto による横はみ出し（gcard 横スクロール等が main を押し広げる）を防ぐ */
.body-grid > main, .body-grid > aside {
  min-width: 0;
}

/* headline grid — newspaper columns */
.hl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 28px;
  position: relative;
}

.hl-col:not(:last-child) {
  border-right: 1px solid var(--line);
  padding-right: 28px;
}

.hl {
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
  display: block;
}

.hl.tophead {
  border-top: none;
}

.hl .kicker {
  margin-bottom: 9px;
}

.hl h3 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.46;
  letter-spacing: 0.005em;
}

.hl:hover h3 {
  color: var(--g-deep);
}

.hl p {
  font-size: 12.5px;
  color: var(--ink-mid);
  margin-top: 7px;
  line-height: 1.6;
}

.hl .hl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-soft);
}

.hl .hl-meta .area {
  font-weight: 700;
} /* 色はテンプレ側でエリア色をインライン指定（親エリア色を踏襲） */
.hl .hl-meta .kq-src {
  color: var(--g);
}

/* category headline list (two-up) */
.cat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
}

.cl-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
  align-items: baseline;
}

.cl-item:first-child, .cl-item:nth-child(2) {
  border-top: none;
}

.cl-item .cl-no {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 20px;
  color: var(--sage);
  width: 26px;
  flex-shrink: 0;
  line-height: 1;
  font-feature-settings: "tnum";
}

.cl-item .cl-body {
  min-width: 0;
}

.cl-item .cl-cat {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11px;
  color: var(--g);
}

.cl-item h4 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  margin-top: 3px;
  letter-spacing: 0.005em;
}

.cl-item:hover h4 {
  color: var(--g-deep);
}

/* ===== フロント：アイキャッチ有無での出し分け（front-page.php） =====
   新規クラス（.mlist/.mfig/.ncard 等）＋既存への .has-photo/.txt/.noimg 修飾。 */
/* --- リード記事：アイキャッチ有りのみ上に大画像（無しはテキストのみ） --- */
.hero-lead.has-photo .lead-ph {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eae5, #d4d8cf);
}

.hero-lead.has-photo .lead-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-lead.has-photo .lead-ph .lead-cats {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1;
  margin: 0;
}

.hero-lead.has-photo h1 {
  font-size: clamp(24px, 3vw, 38px);
}

/* --- 新着記事：2カラムカード（有り＝写真上／無し＝サージュ地テキストカード） --- */
.ncard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;
}

.ncard {
  cursor: pointer;
}

.ncard .nc-ph {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 13px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eae5, #d4d8cf);
}

.ncard .nc-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ncard .kicker {
  margin-bottom: 9px;
}

.ncard h3 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.44;
  letter-spacing: 0.005em;
}

.ncard:hover h3 {
  color: var(--g-deep);
}

.ncard .nc-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 9px;
  font-size: 11px;
  color: var(--ink-soft);
}

.ncard .nc-meta .area {
  font-weight: 700;
  color: var(--ink);
} /* クリック不可のため色分けせず黒 */
.ncard .nc-meta .kq-src {
  color: var(--g);
  font-weight: 700;
}

.ncard.txt {
  background: var(--sage-soft);
  padding: 22px 24px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ncard.txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--g);
}

.ncard.txt .kicker {
  margin-bottom: 12px;
  width: fit-content;
}

.ncard.txt h3 {
  font-size: 18px;
  line-height: 1.42;
}

.ncard.txt .nc-meta {
  margin-top: auto;
  padding-top: 13px;
}

/* サムネ無しリンク記事：出典はエリア・日付の下の行に */
.ncard .nc-src-line {
  margin-top: 5px;
  font-size: 11px;
}

.ncard .nc-src-line .kq-src {
  color: var(--g);
  font-weight: 700;
}

/* --- 各カテゴリー一覧：混在リスト（有り＝左サムネ／無し＝緑の左アクセント） --- */
.mlist .mrow {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}

.mlist .mrow:first-child {
  border-top: none;
  padding-top: 2px;
}

.mlist .mrow:hover h3 {
  color: var(--g-deep);
}

.mfig {
  width: 132px;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eae5, #d4d8cf);
}

.mfig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mfig .kicker {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  margin: 0;
}

.mbody {
  flex: 1;
  min-width: 0;
  border-left: 3px solid var(--sage);
  padding-left: 16px;
} /* サムネ有無に関わらず左に sage アクセント */
.mbody .mcat {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11px;
  color: var(--g);
  margin-bottom: 5px;
}

.mbody h3 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.005em;
}

.mbody .mm {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 7px;
  font-size: 11px;
  color: var(--ink-soft);
}

.mbody .mm .area {
  font-weight: 700;
  color: var(--ink);
} /* クリック不可のため色分けせず黒 */
.mbody .mm .kq-src {
  color: var(--g);
  font-weight: 700;
}

.mbody .mm-src {
  margin-top: 5px;
}

.mbody .mm-src .kq-src {
  color: var(--g);
  font-weight: 700;
  font-size: 11px;
}

/* グルメ：アイキャッチ無しはテキストカード（空プレースホルダを出さない） */
.gcard.txt {
  background: var(--sage-soft);
  padding: 18px 18px 16px;
  position: relative;
}

.gcard.txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--g);
}

.gcard.txt .kicker {
  position: static;
  display: inline-block;
  margin: 0 0 10px;
}

.gcard.txt h4 {
  font-size: 17px;
}

/* グルメ画像カードのサムネも 16:9 に統一（既定 front-page.php の .gcard は据え置き） */
.gcard-row.gcard-16x9 .ph {
  aspect-ratio: 16/9;
  height: auto;
  margin-bottom: 11px;
}

/* 注目のお店一覧（画像カード）の下に余白（続く混在リストと分離） */
.gcard-row.gcard-16x9 {
  margin-bottom: 30px;
}

@media (max-width: 1080px) {
  .ncard-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .mfig {
    width: 104px;
  }
}
/* ===== /フロント：アイキャッチ有無での出し分け ===== */
/* external news link rows */
.linkrow {
  border-top: 1px solid var(--line);
}

.linkrow a {
  display: block;
  padding: 14px 0;
  cursor: pointer;
  border-top: 1px solid var(--line-soft);
}

.linkrow a:first-child {
  border-top: none;
}

.linkrow a:hover h4 {
  color: var(--g-deep);
}

.lr-body {
  min-width: 0;
}

.linkrow h4 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.lr-meta {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lr-time {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

.lr-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-basis: 100%;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11px;
  color: var(--g);
}

.lr-src svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* リンク出典「〇〇で読む」は時刻の下に単体行で出す（全セクション共通）。 */
.kq-src {
  display: block;
  flex-basis: 100%;
  width: 100%;
  margin-top: 2px;
  font-weight: 700;
  color: var(--g);
}

.cl-meta {
  display: flex;
  gap: 4px 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* イベント見出しの開催期間（タイトル後ろ・小さめ）。 */
.kq-ev-period {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 0.4em;
  letter-spacing: 0.01em;
}

/* ===== sidebar ===== */
.side-block {
  margin-bottom: 38px;
  margin-top: 36px;
}

.side-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.side-title h3 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.seg {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--sage-line);
  background: #fff;
}

.seg button {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 5px 12px 4px;
  cursor: pointer;
  text-transform: uppercase;
}

.seg button.on {
  background: var(--g);
  color: #fff;
}

.rk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
}

.rk:first-child {
  border-top: none;
}

.rk .n {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 30px;
  line-height: 0.9;
  color: var(--sage);
  width: 34px;
  flex-shrink: 0;
  font-feature-settings: "tnum";
}

.rk:nth-child(-n+3) .n {
  color: var(--g);
}

.rk .rk-cat {
  font-family: var(--jp);
  font-size: 11px;
  font-weight: 700;
  color: var(--g);
  margin-bottom: 2px;
}

.rk h4 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.rk:hover h4 {
  color: var(--g-deep);
}

.kq-rk-panel[hidden] {
  display: none;
}

.cal-promo {
  background: var(--g-deep);
  color: #fff;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
}

.cal-promo .bars {
  position: absolute;
  top: -10px;
  right: -6px;
  display: flex;
  gap: 6px;
  opacity: 0.22;
}

.cal-promo .bars i {
  width: 18px;
  height: 120px;
  background: var(--sage);
  transform: skewX(-18deg);
  display: block;
}

.cal-promo .bars i:nth-child(2) {
  height: 96px;
  margin-top: 14px;
}

.cal-promo .bars i:nth-child(3) {
  height: 72px;
  margin-top: 28px;
}

.cal-promo .en {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.cal-promo h3 {
  font-family: var(--jp);
  font-weight: 900;
  color: #ffffff;
  font-size: 21px;
  margin: 8px 0 6px;
  position: relative;
}

.cal-promo p {
  font-size: 12.5px;
  color: #cfe0cc;
  position: relative;
}

.cal-promo .go {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 13px;
  background: var(--sage);
  color: var(--g-deep);
  padding: 9px 16px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

.ev {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
}

.ev:first-child {
  border-top: none;
}

.ev .ev-date {
  text-align: center;
  flex-shrink: 0;
  width: 46px;
}

.ev .ev-mon {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--g);
  text-transform: uppercase;
}

.ev .ev-day {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}

.ev .ev-wk {
  font-size: 10px;
  color: var(--ink-soft);
}

.ev .ev-body {
  min-width: 0;
}

.ev .ev-cat {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
}

.ev h4 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  margin: 3px 0;
  letter-spacing: 0.005em;
}

.ev:hover h4 {
  color: var(--g-deep);
}

.ev .ev-where {
  font-size: 11px;
  color: var(--ink-soft);
}

.kqx-empty {
  padding: 16px 0;
  color: var(--ink-soft);
  font-size: 13px;
}

/* ===== footer ===== */
.foot {
  background: var(--g-deep);
  color: rgba(255, 255, 255, 0.9);
  margin-top: 30px;
  padding: 46px 0 30px;
}

.foot .wrap {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.foot-brand img {
  height: 26px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.foot-brand p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 14px;
  line-height: 1.7;
}

.foot-cols {
  display: flex;
  gap: 54px;
  flex-wrap: wrap;
}

.foot-col h5 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}

.foot-col a {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  padding: 5px 0;
}

.foot-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.foot-base {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 34px;
  padding-top: 18px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== responsive ===== */
@media (max-width: 1080px) {
  .body-grid {
    grid-template-columns: 1fr;
  }
  .hl-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hl-col:nth-child(2) {
    border-right: none;
    padding-right: 0;
  }
  .gcard-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .wrap {
    padding: 0 18px;
  }
  .mast .wrap {
    padding: 16px 14px;
  }
  .mast-logo img {
    height: 26px;
  }
  .mast-logo p {
    font-size: 10px;
  }
  .mast-r {
    gap: 10px;
  }
  /* スマホは検索をアイコンのみのボタンに（プレースホルダ文字は隠す） */
  .mast .search {
    width: auto;
    padding: 9px;
    gap: 0;
  }
  .mast .search .search-ph {
    display: none;
  }
  /* nav → App版 .tabs に準拠：緑バーをやめ白地タブ化（文字=ink-soft、アクティブ=緑文字＋緑スキュー下線）。LIVEは非表示。 */
  .nav {
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .nav .wrap {
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
    padding-right: 0;
  }
  .nav .wrap::-webkit-scrollbar {
    display: none;
  }
  /* 端のフェード演出は撤去（右端は常時表示の編集ボタンでスクロールに気づけるため不要。
     フェードは緑ナビ上で帯として悪目立ちし、iOS で固定ボタンにも干渉していた）。 */
  .nav a {
    font-family: var(--jp);
    font-size: 13.5px;
    padding: 13px 15px;
    color: var(--ink-soft);
  }
  .nav a:hover {
    background: none;
    color: var(--g-deep);
  }
  .nav a.on {
    color: var(--g-deep);
  }
  .nav a.on::after {
    left: 11px;
    right: 11px;
    height: 3px;
    background: var(--g);
  }
  .nav-spacer, .nav .nav-live {
    display: none;
  }
  /* 設定ボタンは緑背景で右端に固定。タブが左側（ボタンの背後）をスクロールし
     「スライドできる」ことが分かる。SPは .nav .wrap の右パディングを 0 にして密着。 */
  .nav-edit {
    position: sticky;
    right: 0;
    z-index: 3;
    background: var(--g-deep);
    color: #fff;
    padding: 0 18px;
    box-shadow: -14px 0 14px -8px rgba(0, 0, 0, 0.22);
  }
  .nav-edit:hover {
    background: var(--g-deep);
    color: #fff;
  }
  /* セクションをアプリ風に8pxの区切りで分割。
     SPはファーストビューに記事を多く見せるため、文字・余白を全体に詰める。 */
  .hero-lead {
    padding: 12px 0;
  }
  .hero-lead h1 {
    font-size: 18px;
    line-height: 1.35;
  }
  .hero-lead .dek {
    font-size: 12.5px;
    line-height: 1.7;
    margin-top: 6px;
  }
  .hero-lead .pull {
    display: none;
  }
  .hero-lead .byline {
    margin-top: 6px;
    font-size: 11px;
  }
  .lead-ph {
    margin-bottom: 8px;
  }
  /* セクションの区切りは維持しつつ上下を圧縮 */
  .sec {
    padding: 40px 0 14px;
    border-top: 4px solid var(--line-soft);
  }
  .sec-latest {
    padding-top: 40px;
  } /* 先頭の PC 用 6px を SP でも他セクションと揃える */
  .sec-head {
    margin-bottom: 14px;
    padding-bottom: 9px;
  }
  /* 記事タイトルが16pxのため、セクション見出しはそれより一段大きくして階層を保つ */
  .sec-head h2 {
    font-size: 19px;
  }
  .sec-head .en {
    display: none;
  }
  /* 混在リスト：タイトルはアーカイブ（.acard h3 = 16px）と同じサイズに統一 */
  .mlist .mrow {
    padding: 11px 0;
    gap: 12px;
  }
  .mbody {
    padding-left: 12px;
  }
  .mbody h3 {
    font-size: 16px;
    line-height: 1.45;
  }
  .mbody .mm {
    margin-top: 5px;
    font-size: 10.5px;
  }
  .mfig {
    width: 96px;
  }
  /* 2カラムカード（最新情報）。SPは1カラムなので、写真カード・テキストカードとも詰める。
     .ncard 自体には padding を持たせない（.txt のみ内側余白を持つ構造のため）。 */
  .ncard-grid {
    gap: 14px;
  }
  .ncard h3, .ncard.txt h3 {
    font-size: 16px;
    line-height: 1.45;
  }
  .ncard .nc-ph {
    margin-bottom: 8px;
  }
  .ncard .nc-meta {
    margin-top: 6px;
    font-size: 10.5px;
    gap: 8px;
  }
  .ncard .nc-src-line {
    margin-top: 4px;
    font-size: 10.5px;
  }
  .ncard.txt {
    padding: 13px 14px 12px;
  }
  .ncard.txt::before {
    width: 4px;
  }
  .ncard.txt .nc-meta {
    padding-top: 9px;
  }
  /* kicker（カテゴリーチップ）：SPは一回り小さくして下余白も詰める */
  .kicker {
    font-size: 10px;
    padding: 3px 9px 2px;
  }
  .ncard .kicker {
    margin-bottom: 6px;
  }
  .ncard.txt .kicker {
    margin-bottom: 8px;
  }
  .hl .kicker {
    margin-bottom: 6px;
  }
  .mfig .kicker {
    top: 5px;
    left: 5px;
  }
  /* 下部ボタンも詰める（塗りは維持） */
  .sec-more {
    margin-top: 18px;
  }
  .sec-more .more {
    min-width: 0;
    width: 100%;
    padding: 12px 18px;
    font-size: 13.5px;
  }
  .hl-grid, .cat-list {
    grid-template-columns: 1fr;
  }
  .hl-col {
    border-right: none !important;
    padding-right: 0 !important;
  }
  .hl-col:not(:last-child) .hl:last-child {
    border-bottom: none;
  }
  .hl h3 {
    font-size: 16px;
  }
  .gcard-row {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -18px;
    padding: 0 18px;
  }
  .gcard-row::-webkit-scrollbar {
    display: none;
  }
  .gcard {
    flex: 0 0 172px;
  }
  .gcard .ph {
    height: 116px;
  }
  /* 1カラム時、サイドバー（ランキング等）が前のコンテンツと密着しないよう行間を確保。
     列間は1カラムなので0でよい。 */
  .body-grid {
    gap: 34px 0;
  }
  .foot .wrap {
    flex-direction: column;
    gap: 24px;
  }
  .area-pick {
    padding: 8px 6px;
    font-weight: 600;
    font-size: 12px;
  }
  .side-block {
    margin-top: 0;
  }
}
/* =================================================================
   下層ページ（記事詳細／イベント詳細／人物紹介／カレンダー／
   アーカイブ／検索）。共通チャーム（.mast/.nav/.foot/.kicker/
   .slash-bars/.ph/.rk）はフロントと共有し、ここでは本文系を追加。
   ================================================================= */
/* パンくず */
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 18px 0 0;
  flex-wrap: wrap;
}

.crumb a:hover {
  color: var(--g);
}

.crumb .sep {
  color: var(--ink-faint);
}

.crumb .cur {
  color: var(--ink);
  font-weight: 700;
}

/* 画像/テキスト出し分け（記事・アーカイブ） */
.only-image, .only-text {
  display: none;
}

body.mode-image .only-image {
  display: block;
}

body.mode-text .only-text {
  display: block;
}

.inline-image.only-image {
  display: inline-block;
}

/* ページ内セクション見出し（下罫） */
.sech {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 50px 0 22px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--ink);
}

.sech h2 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 21px;
}

.sech .en {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ===== 記事詳細 ===== */
.art {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 54px;
  padding: 20px 0 60px;
}

/* PC：サイドバーはスクロールに追随（スティッキー）。スクロール時、固定ナビ(top:0)の
   下＝72px の位置で貼り付き、本文を読む間も見え続ける。スマホでは解除（下で reset）。 */
.art > aside {
  position: sticky;
  align-self: start;
  top: 72px;
}

.art-main {
  min-width: 0;
  max-width: 720px;
}

.art-head .kicker {
  margin-bottom: 16px;
}

.art-title {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.art-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.art-meta .area {
  font-weight: 700;
  color: var(--g);
} /* 色はテンプレ側でエリア色をインライン指定（親エリア色を踏襲） */
.art-meta a.area:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.art-meta .sp {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.art-meta .sp a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mid);
}

.art-meta .sp a:hover {
  background: var(--sage-soft);
  color: var(--g-deep);
}

/* URLコピー：完了時に「コピーしました」を吹き出し表示 */
.art-meta .sp a.kq-copy-url {
  position: relative;
}

.kq-copy-url.is-copied::after {
  content: "コピーしました";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 9px;
  pointer-events: none;
  z-index: 5;
}

.art-hero {
  margin: 24px 0 6px;
  display: block;
}

.art-hero img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

.art-hero-cap, .art-body .wp-element-caption {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 26px;
  padding-top: 0;
}

.art-body p {
  font-size: 15.5px;
  line-height: 2;
  color: var(--ink-mid);
  margin-bottom: 22px;
}

.art-body h2 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 20px;
  color: var(--ink);
  margin: 34px 0 16px;
}

.art-body h3 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  margin: 28px 0 12px;
}

.art-body ul, .art-body ol {
  margin: 0 0 0 0;
  color: var(--ink-mid);
  line-height: 2;
}

.art-body img {
  max-width: 100%;
  height: auto;
  margin: 24px 0 0;
}

.art-body .wp-block-image {
  margin-bottom: 24px;
}

/* 埋め込み（YouTube等）はコンテンツ幅いっぱい・16:9 レスポンシブ。
   YouTube が返す固定寸法(width/height)やコアCSSに依存せず確実に全幅化する。 */
.art-body .wp-block-embed {
  margin: 24px 0;
}

.art-body .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.art-body .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.art-body a {
  color: #1a66c0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.art-body a:hover {
  color: #0f4e97;
}

.art-h {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 34px 0 16px;
}

.art-h h2 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 20px;
  margin: 0;
}

.art-pull {
  margin: 30px 0;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--sage);
  font-family: var(--jp);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.7;
  color: var(--g-deep);
}

.art-fig {
  margin: 30px 0;
}

.art-fig .ph {
  height: 300px;
}

.art-fig figcaption {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* 本文下の著者クレジット */
.art-byline {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 34px 0;
  padding: 16px 18px;
  background: var(--sage-soft);
  border-left: 4px solid var(--g);
}

.art-byline-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--g);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jp);
  font-weight: 900;
  font-size: 17px;
  flex-shrink: 0;
  overflow: hidden;
}

.art-byline-avatar--img {
  background: none;
}

.art-byline-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.art-byline-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.art-byline-label {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.art-byline-name {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  margin-top: 2px;
}

.art-byline-bio {
  font-size: 12.5px;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-top: 4px;
}

.art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0;
}

.art-tag {
  font-size: 12px;
  color: var(--ink-mid);
  background: var(--sage-soft);
  padding: 5px 13px;
}

.art-tag::before {
  content: "#";
  color: var(--g);
  font-weight: 700;
  margin-right: 2px;
}

/* サイドバー（記事右） */
.art aside .side-block {
  margin-bottom: 34px;
}

.art aside .side-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.art aside .side-title h3 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 16px;
}

/* 関連（行・グリッド） */
.rel {
  display: flex;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}

.rel:first-child {
  border-top: none;
}

.rel .ph {
  width: 84px;
  height: 60px;
  flex-shrink: 0;
}

.rel .rc {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 10px;
  color: var(--g);
}

.rel h4 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.4;
  margin-top: 4px;
}

.rel:hover h4 {
  color: var(--g-deep);
}

.rel > div {
  min-width: 0;
}

/* ===== イベント詳細 ===== */
.evd {
  max-width: 840px;
  margin: 0 auto;
  padding: 18px 0 60px;
}

.carousel {
  position: relative;
  margin: 24px 0;
}

.ctrack {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ctrack::-webkit-scrollbar {
  display: none;
}

.cslide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  max-height: 500px;
}

.cslide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cslide.ph {
  background: linear-gradient(135deg, #e8eae5, #d4d8cf);
}

/* 単一画像：figure を画像の実寸にフィット（幅は画像に一致）させ中央寄せ。
   これで著作権表記（figcaption）を画像サイズに関わらず写真の右隅へ揃えられる。 */
.evd-figure {
  width: fit-content;
  max-width: 100%;
  margin: 24px auto;
}

.evd-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 500px;
}

/* 画像著作権表記（EBのpic_copyright）：写真に被らないよう画像の下・右寄せの小さいグレー。 */
.carousel-credit {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-faint);
  text-align: right;
}

.ccount {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  letter-spacing: 0.06em;
}

.cdots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.cdot {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}

.cdot.on {
  width: 20px;
  background: #fff;
}

.cnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.cnav:hover {
  background: rgba(0, 0, 0, 0.72);
}

.cnav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cprev {
  left: 12px;
}

.cnext {
  right: 12px;
}

.evd-title {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.4;
  margin: 24px 0 12px;
}

.evd-stamp {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-soft);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.evd-lead {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink-mid);
  margin: 24px 0;
}

.evd-desc {
  margin: 24px 0;
}

.evd-desc > p:first-child {
  margin-top: 0;
}

.evd-desc > p:last-child {
  margin-bottom: 0;
}

/* 関連記事（詳細表の下）。詳細表と同じ枠意匠でまとめ、中身はカード型リンク。 */
.evd-related {
  border: 1px solid #c4cdb6;
  margin: 24px 0;
}

.evd-related .art-detail-head {
  margin: 0;
}

.rel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rel-list > li {
  border-bottom: 1px solid #d7ddcb;
}

.rel-list > li:last-child {
  border-bottom: none;
}

.rel-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
}

.rel-item:hover .rel-ttl {
  color: var(--g-deep);
}

.rel-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 64px;
  overflow: hidden;
  background: var(--line-soft);
}

.rel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rel-body {
  flex: 1;
  min-width: 0;
}

.rel-cat {
  display: block;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11px;
  color: var(--g);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}

.rel-ttl {
  display: block;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
}

.rel-meta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-soft);
}

.rel-src {
  margin-left: 8px;
}

@media (max-width: 600px) {
  .rel-item {
    gap: 12px;
    padding: 12px 14px;
  }
  .rel-thumb {
    width: 80px;
    height: 56px;
  }
  .rel-ttl {
    font-size: 14px;
  }
}
.evd-actions {
  display: flex;
  gap: 12px;
  margin-top: 40px;
}

.evd-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px 12px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--sage-soft);
  border: 1px solid #c4cdb6;
  text-decoration: none;
  transition: background 0.2s;
}

.evd-btn:hover {
  background: #e3e8da;
}

/* 詳細テーブル（イベント詳細・店舗情報ブロック共通。kq_dl_row 出力クラス） */
/* 罫線は --line / --line-soft だと薄すぎて見えないため、詳細テーブル（イベント詳細・
   店舗情報ブロック）は視認できる濃さの罫線にする。 */
.art-detail {
  border: 1px solid #c4cdb6;
  margin: 24px 0;
}

.art-detail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--jp);
  font-weight: 900;
  font-size: 15px;
  padding: 14px 18px;
  background: var(--sage-soft);
  border-bottom: 1px solid #c4cdb6;
}

.art-detail-head svg {
  color: var(--g);
  flex-shrink: 0;
}

.art-dl-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid #d7ddcb;
}

.art-dl-row:last-child {
  border-bottom: none;
}

.art-dl-key {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
}

.art-dl-val {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}

.art-dl-val .line {
  display: block;
}

.art-dl-val a {
  color: var(--g);
  border-bottom: 1px solid var(--sage);
  word-break: break-all;
}

/* 「カテゴリー」行の値はリンクではないため、押せそうに見えるピル装飾はせず
   他の行（.art-dl-val）と同じ本文体裁で並べる。 */
.art-dl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}

.art-dl-cat-pill {
  display: inline-block;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}

/* 出典＋注釈：.art-detail の枠外・右寄せ。出典→注釈の順。
   注釈は全イベント共通、出典は情報提供の入力／EB取り込みがある記事のみ。 */
.art-dl-credit {
  margin: 8px 0 0;
  text-align: right;
}

.art-dl-source {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
}

.art-dl-source a {
  color: var(--g);
  border-bottom: 1px solid var(--sage);
}

.art-dl-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
}

.evd-map {
  height: 240px;
  margin: 26px 0 0;
}

/* ===== 人物紹介（kq_article＋ksb/people ブロック。本文内の people-grid を再スキン） ===== */
.ppl {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 0 60px;
}

/* 固定ページ（page.php）：サイドバー無しの1カラム。
   ブロックエディタで組んだ表・画像・カラムが使えるよう .wrap の幅いっぱいに広げる。 */
.page-single {
  padding: 20px 0 60px;
}

/* 見出し（.arch-hd）は下罫線で本文と区切るため、本文側で間隔を取る。 */
.page-single .art-body {
  margin-top: 28px;
}

.art-section-head {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--jp);
  font-weight: 900;
  font-size: 20px;
  color: var(--ink);
  margin: 34px 0 18px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--ink);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 26px;
  margin: 18px 0 30px;
}

.person-card .person-photo {
  width: 74%;
  aspect-ratio: 1/1;
  margin-bottom: 12px;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eae5, #d4d8cf);
}

.person-card .person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-card .person-photo .kq-ph {
  display: block;
  width: 100%;
  height: 100%;
}

.person-role {
  display: inline-block;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 10px;
  color: var(--g-deep);
  background: var(--sage-soft);
  padding: 3px 9px;
  margin-bottom: 7px;
}

.person-name {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.01em;
  margin-bottom: 7px;
}

.person-text {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-mid);
  white-space: pre-line;
}

/* ===== カレンダー ===== */
.cal {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 0 60px;
}

/* ページ切替タブ（イベントカレンダー ⇔ イベント記事一覧）。
   現在地は塗りつぶし＋リンクにしない（span）ため、色だけで区別せず要素も変える。 */
.pgtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0 0;
}

.pgtab {
  display: inline-flex;
  align-items: center;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
  padding: 11px 22px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

a.pgtab:hover {
  background: #fff;
  color: var(--g-deep);
  border-color: var(--g);
}

.pgtab.is-active {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
  cursor: default;
}

.cal-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 18px;
  flex-wrap: wrap;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-nav a, .cal-nav button, .cal-nav .is-disabled {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mid);
  cursor: pointer;
}

.cal-nav a:hover, .cal-nav button:hover {
  background: var(--sage-soft);
}

/* 当月より前は閲覧不可。押せないことが分かるよう淡色＋カーソル無効にする。 */
.cal-nav .is-disabled {
  color: var(--ink-faint);
  background: var(--line-soft);
  cursor: not-allowed;
  opacity: 0.6;
}

.cal-title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 22px;
  min-width: 130px;
  text-align: center;
}

.cal-seg {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--sage-line);
}

.cal-seg button {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 7px 15px;
  cursor: pointer;
}

.cal-seg button.on {
  background: var(--ink);
  color: #fff;
}

.cal-seg button[data-ca=ok].on {
  background: var(--okayama);
}

.cal-seg button[data-ca=ka].on {
  background: var(--kagawa);
}

.cgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--cal-line);
  border-bottom: none;
}

.cgrid .cdh {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--cal-line);
  background: var(--sage-soft);
}

.cgrid .cdh.sun {
  color: #c04848;
}

.cgrid .cdh.sat {
  color: #4a6fa5;
} /* 土曜は暦慣習の青（エリア色スワップの影響を受けない固定値） */
.cell {
  min-height: 96px;
  border-bottom: 1px solid var(--cal-line);
  border-right: 1px solid var(--cal-line);
  padding: 7px 8px;
}

.cell:nth-child(7n) {
  border-right: none;
}

.cell.out {
  background: #f4f6f1;
  color: var(--ink-faint);
}

.cell .dn {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.cell.today .dn {
  background: var(--ink);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cell.sel {
  background: var(--sage-soft);
}

/* 同日に複数イベントが入る想定。名称は出さず、岡山=青/香川=緑のドットで
   件数とエリアを示す（詳細は日付クリックで下の一覧に表示）。 */
.emarks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* 「岡山2件」のように県名＋件数を入れるため、幅は内容なりに伸ばす（折り返さない）。 */
.echip {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 6px;
  border-radius: 3px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 10.5px;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.echip.ok {
  background: var(--okayama);
}

.echip.ka {
  background: var(--kagawa);
}

.cal-day {
  margin-top: 24px;
  scroll-margin-top: 68px;
} /* 日付タップ時のスクロール位置。固定ヘッダー(.nav)に隠れない分だけ確保 */
.cal-day h3 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.cal-ev {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: flex-start;
}

.cal-ev .bar {
  width: 3px;
  align-self: stretch;
  min-height: 40px;
}

.cal-ev .bar.ok {
  background: var(--okayama);
}

.cal-ev .bar.ka {
  background: var(--kagawa);
}

.cal-ev .ab {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}

.cal-ev .ab.ok {
  background: #eef2f7;
  color: var(--okayama);
} /* 岡山=青 */
.cal-ev .ab.ka {
  background: var(--sage-soft);
  color: var(--g-deep);
} /* 香川=緑 */
.cal-ev .et {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-mid);
  margin-left: 8px;
}

.cal-ev h4 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 15px;
  margin: 5px 0 3px;
}

.cal-ev .ew {
  font-size: 11px;
  color: var(--ink-soft);
}

/* 関連記事あり（カレンダー日別一覧）：一覧カードと同じ緑チップ意匠。 */
.cal-ev-rel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 1px 8px 1px 6px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--g-deep);
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
  border-radius: 11px;
}

.cal-ev-rel svg {
  color: var(--g);
}

.cal-ev:hover .cal-ev-rel {
  background: #fff;
  border-color: var(--g);
}

/* 日別一覧のサムネイル。持つ記事だけ右側に出す（無い記事は本文が全幅のまま）。 */
.cal-ev-body {
  flex: 1;
  min-width: 0;
}

.cal-ev-fig {
  flex-shrink: 0;
  width: 112px;
  height: 74px;
  overflow: hidden;
  background: var(--line-soft);
  align-self: center;
}

.cal-ev-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cal-ev:hover h4 {
  color: var(--g-deep);
}

/* ===== アーカイブ＆検索 ===== */
.arch {
  padding: 6px 0 60px;
}

.arch-hd {
  padding: 26px 0;
  border-bottom: 2px solid var(--g);
  margin-bottom: 8px;
}

/* パンくずと差別化：緑のスラッシュ意匠＋見出し色でページタイトルらしく見せる。 */
.arch-hd h1 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 30px;
  color: var(--g-deep);
  display: flex;
  align-items: center;
  gap: 14px;
}

.arch-hd h1::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 1em;
  background: var(--g);
  transform: skewX(-18deg);
}

/* エリアから探す（/area/）：県ごとに市区町村をグループ表示 */
.area-idx {
  margin-top: 40px;
  margin-bottom: 34px;
}

/* 見出しはサイト共通のスキュー・バー意匠（.arch-hd h1 と同系）＋下罫線で統一。
   色は県色（岡山=青/香川=緑）を h2 に指定し、バー(currentColor)と文字(inherit)へ踏襲。 */
.area-idx-h {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--jp);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.area-idx-h::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 22px;
  background: currentColor;
  transform: skewX(-18deg);
}

.area-idx-h a {
  color: inherit;
}

.area-idx-h a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.area-idx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.area-idx-grid a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 14px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.area-idx-grid a:hover {
  border-color: var(--g);
  background: var(--sage-soft);
  color: var(--g-deep);
}

.area-idx-count {
  flex-shrink: 0;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.area-idx-count::after {
  content: "件";
  margin-left: 2px;
  font-family: var(--jp);
  font-weight: 400;
  font-size: 0.9em;
}

.area-idx-grid a:hover .area-idx-count {
  color: var(--g-deep);
}

.arch-hd p {
  font-size: 13.5px;
  color: var(--ink-mid);
  margin-top: 8px;
  max-width: 62ch;
}

.filt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.filt .fl {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-soft);
  margin-right: 4px;
}

.chip2 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-mid);
  border: 1px solid var(--line);
  padding: 6px 13px;
  cursor: pointer;
  background: #fff;
}

.chip2.on {
  background: var(--g);
  color: #fff;
  border-color: var(--g);
}

.filt .sort {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* アーカイブ一覧：横並び行（サムネイルは任意）。写真が無くても空き枠が出ず、
   テキストファースト（新聞型）として自然に見える。写真がある記事だけ右に小さく添える。 */
.acards {
  display: block;
  border-top: 1px solid var(--line);
}

.acard {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.acard-body {
  flex: 1;
  min-width: 0;
}

.acard-cat {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11px;
  color: var(--g);
  margin-bottom: 9px;
  letter-spacing: 0.02em;
}

.acard h3 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.46;
  letter-spacing: 0.005em;
}

.acard:hover h3 {
  color: var(--g-deep);
}

.acard .am {
  margin-top: 9px;
  font-size: 11px;
  color: var(--ink-soft);
}

.acard .am .area {
  font-weight: 700;
  color: var(--ink);
} /* クリック不可のため色分けせず黒 */
/* 関連記事あり（イベント一覧）：件数バッジ。テーマ緑で「読み物が付く」ことを示す。 */
.acard-rel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 8px 1px 6px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--g-deep);
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
  border-radius: 11px;
  vertical-align: middle;
}

.acard-rel svg {
  color: var(--g);
}

.acard:hover .acard-rel {
  background: #fff;
  border-color: var(--g);
}

.acard-thumb {
  flex-shrink: 0;
  width: 150px;
  height: 100px;
  overflow: hidden;
  background: var(--line-soft);
  align-self: center;
}

.acard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trow {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  align-items: flex-start;
}

.trow:first-child {
  border-top: none;
}

.trow .tthumb {
  width: 150px;
  height: 96px;
  flex-shrink: 0;
}

.trow .tb {
  flex: 1;
  min-width: 0;
}

.trow .kicker {
  margin-bottom: 8px;
}

.trow h3 {
  font-family: var(--jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
}

.trow:hover h3 {
  color: var(--g-deep);
}

.trow h3 mark {
  background: var(--sage);
  color: inherit;
}

.trow p {
  font-size: 13px;
  color: var(--ink-mid);
  margin-top: 7px;
  line-height: 1.65;
}

.trow .tm {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 9px;
  font-size: 11px;
  color: var(--ink-soft);
}

.trow .tm .area {
  font-weight: 700;
} /* 色はテンプレ側でエリア色をインライン指定（親エリア色を踏襲） */
.trow .src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11px;
  color: var(--g);
  margin-top: 8px;
}

.trow .src svg {
  width: 11px;
  height: 11px;
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.pager a, .pager span.current {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-mid);
  background: #fff;
  padding: 0 6px;
}

.pager span.current, .pager a.on {
  background: var(--g);
  color: #fff;
  border-color: var(--g);
}

.pager a:hover {
  background: var(--sage-soft);
}

.srch-hd {
  padding: 26px 0 18px;
}

.srch-hd .lbl {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.srch-hd h1 {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 28px;
  margin: 8px 0 6px;
}

.srch-hd h1 em {
  font-style: normal;
  color: var(--g);
}

.srch-hd .cnt {
  font-size: 13px;
  color: var(--ink-soft);
}

.kqx-empty {
  padding: 40px 0;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ================= 404 ================= */
.kq404 {
  text-align: center;
  padding: 56px 0 84px;
}

.kq404-code {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(72px, 15vw, 132px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--sage);
}

.kq404-title {
  font-family: var(--jp);
  font-weight: 900;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--ink);
  margin-top: 6px;
}

.kq404-lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-mid);
  margin-top: 14px;
}

.kq404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  margin-top: 32px;
}

/* 均等な2ボタン：主＝塗り、副＝アウトライン。どちらも同じ高さ・字面で対等に見せる。 */
.kq404-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kq404-btn svg {
  flex-shrink: 0;
}

/* 色は2クラスで指定（リセットの .kqx a{color:inherit} に特異度で勝たせ、白/緑を確実に効かせる）。 */
.kq404-btn.kq404-btn-primary {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
}

.kq404-btn.kq404-btn-primary:hover {
  background: var(--g-deep);
  border-color: var(--g-deep);
  color: #fff;
}

.kq404-btn.kq404-btn-ghost {
  background: #fff;
  border-color: var(--sage-line);
  color: var(--g);
}

.kq404-btn.kq404-btn-ghost:hover {
  background: var(--sage-soft);
  border-color: var(--g);
  color: var(--g-deep);
}

@media (max-width: 680px) {
  .kq404-actions {
    flex-direction: column;
  }
  .kq404-btn {
    width: 100%;
  }
}
/* 下層ページのレスポンシブ */
@media (max-width: 1000px) {
  .art {
    grid-template-columns: 1fr;
  }
  /* スマホ・タブレットでは1カラムなのでサイドバー追随を解除（通常フロー） */
  .art > aside {
    position: static;
  }
  .people-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .art-title {
    font-size: 24px;
  }
  .art-lead {
    font-size: 16px;
  }
  .evd-title {
    font-size: 23px;
  }
  .cslide {
    height: 260px;
  }
  .art-dl-row {
    grid-template-columns: 96px 1fr;
    gap: 10px;
    padding: 11px 14px;
  }
  .people-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
  }
  .acard {
    gap: 14px;
    padding: 16px 0;
  }
  .acard h3 {
    font-size: 16px;
  }
  .acard-thumb {
    width: 104px;
    height: 74px;
  }
  .sech {
    margin: 34px 0 18px;
  }
  .cal-day {
    scroll-margin-top: 58px;
  }
  .pgtab {
    flex: 1;
    justify-content: center;
    font-size: 13px;
    padding: 10px 12px;
  }
  .cell {
    min-height: 62px;
    padding: 4px 4px;
  }
  .cell .dn {
    font-size: 12px;
  }
  .emarks {
    gap: 3px;
    margin-top: 4px;
  }
  .echip {
    height: 15px;
    padding: 0 4px;
    font-size: 9.5px;
  }
  .cal-ev {
    gap: 12px;
  }
  .cal-ev-fig {
    width: 96px;
    height: 66px;
  }
  .trow .tthumb {
    width: 104px;
    height: 72px;
  }
  .trow h3 {
    font-size: 16px;
  }
  .arch-hd h1, .srch-hd h1 {
    font-size: 23px;
  }
}
/* =================================================================
   モーダル（検索 / エリア選択）。ヘッダーの検索アイコン・エリアピルから開く。
   トップの新テキストデザインに準拠：スラッシュ見出し・緑/セージ・スキューボタン。
   PC=中央オーバーレイ、スマホ=ボトムシート。
   ================================================================= */
.kqx-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 12, 0.46);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: kqx-fade 0.18s ease;
}

.kqx-overlay[hidden] {
  display: none;
}

@keyframes kqx-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.kqx-modal {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  border-top: 3px solid var(--ink);
  padding: 0 0 26px;
  animation: kqx-pop 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes kqx-pop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.kqx-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.kqx-modal-close:hover {
  color: var(--g-deep);
}

.kqx-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.kqx-modal-head .slash-bars {
  margin-top: 4px;
}

.kqx-modal-title {
  font-family: var(--jp);
  font-weight: 900;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.kqx-modal-sub {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: 5px;
}

/* エリア選択 */
.kqx-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 4px;
}

.kqx-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 13px 15px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.kqx-modal-item:hover {
  border-color: var(--sage-line);
  background: var(--sage-soft);
}

.kqx-modal-item.sel {
  border-color: var(--g);
  background: var(--sage-soft);
}

.kqx-item-name {
  flex: 1;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.kqx-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
}

.kqx-modal-item.sel .kqx-check {
  background: var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color: var(--g);
}

/* 検索フォーム */
.kqx-search-form {
  padding: 18px 22px 20px;
}

.kqx-field {
  margin-bottom: 14px;
}

.kqx-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.kqx-label {
  display: block;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.kqx-inputwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 10px 13px;
}

.kqx-inputwrap:focus-within {
  border-color: var(--g);
}

.kqx-search-icon {
  color: var(--ink-soft);
  flex-shrink: 0;
}

.kqx-inputwrap input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}

/* iOS Safari は select を角丸＋独自意匠で描くため、appearance を消して Android と同じ四角に統一。
   ネイティブの矢印も消えるので SVG の矢印を背景で付与する。 */
.kqx-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2371806e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;
  padding: 10px 34px 10px 13px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.kqx-select:focus {
  outline: none;
  border-color: var(--g);
}

/* 検索モーダル：市区町村（エリア）索引ページ /area/ への誘導リンク */
.kqx-submit {
  margin-top: 6px;
  width: 100%;
  border: none;
  cursor: pointer;
  background: var(--g);
  color: #fff;
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  padding: 13px;
  transform: skewX(-10deg);
}

.kqx-submit:hover {
  background: var(--g-deep);
}

.kqx-submit > span {
  display: inline-block;
  transform: skewX(10deg);
}

/* 検索ボタンの下：1px の区切り線（上下に余白）＋ 送信ボタンと同型のセカンダリボタンで
   エリア索引（/area/）へ誘導。緑塗りの送信と区別するため塗りは控えめ（セージ）。 */
.kqx-more {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.kqx-more .kqx-arealink {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  background: var(--sage-soft);
  border: 1.5px solid var(--sage-line);
  color: var(--g-deep);
  font-family: var(--jp);
  font-weight: 700;
  font-size: 14px;
  padding: 11px;
  transform: skewX(-10deg);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kqx-more .kqx-arealink:hover {
  background: var(--g);
  border-color: var(--g);
  color: #fff;
}

.kqx-more .kqx-arealink > span {
  display: inline-block;
  transform: skewX(10deg);
}

@media (max-width: 680px) {
  .kqx-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .kqx-modal {
    max-width: 100%;
    max-height: 92vh;
    border-top: 3px solid var(--g);
    animation: kqx-up 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  @keyframes kqx-up {
    from {
      opacity: 0.4;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/* 横スクロール領域：タッチ慣性＋マウスドラッグ中のカーソル/選択制御 */
.nav .wrap, .gcard-row {
  -webkit-overflow-scrolling: touch;
}

.nav .wrap.kqx-dragging, .gcard-row.kqx-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.gcard-row.kqx-dragging a {
  pointer-events: none;
}