@charset "UTF-8";
/*!
 * hiyo-theme-v1 — ひがしおおさか日和 の ds-core-v1 テーマ
 *
 * 役割は 3 つだけ。
 *  1. --ds-* トークンに、このサイトで実際に効いている色を割り当てる
 *  2. Blocksy と style.css（13層）に負けないよう、必要な箇所だけ特異度を上げて勝つ
 *  3. /kanko/ 専用テンプレート（page-kanko.php）でしか使わない小さな部品を足す
 *
 * カスケードの前提（FACTS-higashiosaka §4 実測）:
 *   wp_enqueue_style で足した CSS は、必ず Blocksy の
 *   <style id="ct-main-styles-inline-css"> より前に出る。
 *   Blocksy インラインは :root と body に書いてくるので、
 *   素の :root / body では勝てない。ここでは
 *     - トークンは html:root（0,0,2）で置く
 *     - 見た目は body.ds / .ds 配下（0,1,x 以上）で置く
 *   という二本立てにしている。
 */

/* ============================================================
   1. トークン
   ひがしおおさか日和の既存トークンをそのまま ds へ橋渡しする。
   新しい色は増やさない。
   ============================================================ */
html:root{
  /* 既存トークン（style.css L734-746 の実測値）をそのまま使う */
  --hiyo-k2-ink:#132a38;
  --hiyo-k2-paper:#f4efe5;
  --hiyo-k2-white:#fffdf8;
  --hiyo-k2-copper:#8b3e1e;
  --hiyo-k2-mint:#bcd1c7;
  --hiyo-k2-yellow:#e8c95d;
  --hiyo-k2-text:#18252c;
  --hiyo-k2-muted:#4d5961;

  /* ds トークンへの割り当て */
  --ds-ink:#132a38;
  --ds-ink-soft:#4d5961;
  --ds-paper:#f4efe5;
  --ds-surface:#fffdf8;
  --ds-line:rgba(19,42,56,.18);
  --ds-accent:#132a38;
  --ds-accent-ink:#fffdf8;
  --ds-gold:#8b3e1e;
  --ds-gold-on-dark:#e8c95d;   /* 濃色面の小さな文字は必ずこちら（DS-USAGE §5-4） */
  --ds-dark:#101f28;
  --ds-on-dark:#f4efe5;
  --ds-on-dark-soft:rgba(244,239,229,.76);

  /* 書体。実際に読み込まれているのは Shippori Mincho(600,700) /
     Noto Sans JP(400,500,700) / EB Garamond(500,600,700) の 3 本だけ。
     読み込んでいない weight は指定しない（フェイクボールドを作らない）。 */
  --ds-serif:"Shippori Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  --ds-sans:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ds-label:"Noto Sans JP",system-ui,sans-serif;

  --ds-max:1240px;
  --ds-max-narrow:780px;
}

/* ============================================================
   2. 既存レイヤに勝つための最小限の上書き
   ============================================================ */

/* body の地色。Blocksy インラインの body{background-color:var(--theme-palette-color-7)}
   と style.css L2265 の body{background:var(--h1-paper)} はどちらも (0,0,1)。
   .ds は (0,1,0) なので、後ろに来られても特異度で勝つ。 */
body.ds{
  background:var(--ds-paper);
  color:var(--ds-ink);
  font-family:var(--ds-sans);
  font-size:var(--ds-body);
  line-height:1.95;
  letter-spacing:.01em;
  /* overflow-x:hidden は入れない。はみ出しを隠して検出できなくなるうえ、
     body がスクロールコンテナ扱いになって position:sticky（フィルタバー・
     sticky シーン）の挙動が変わる危険がある。実測ではみ出しは 0。 */
}

/* style.css L2278-2281 の
   :where(.hiyo-main,.hiyo-article,.hiyo-home-v26) :where(h1..h4,strong){...!important}
   はクラス名が違うので当たらない。ただし L771 の
   :where(h1,h2,h3,h4,...){font-family:"Shippori Mincho"} は (0,0,0) なので、
   ここで明示しておけば確実に勝てる。 */
body.ds :where(h1,h2,h3,h4){
  font-family:var(--ds-serif);
  font-weight:600;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}

/* 既存の a{color:inherit}(0,0,1) / img{max-width:100%;height:auto}(0,0,1) は
   ds-core と同じ意図なので触らない。
   ただし .ds-btn 系の文字色だけは、事故（DS-USAGE §5-1）を避けて固定する。 */
body.ds .ds-btn--primary{ color:#fff; }
body.ds .ds-btn--dark{ color:var(--ds-accent-ink); }
body.ds .ds-btn--ghost{ color:#fff; }

/* ヘッダ・フッタ・安全バー・ボトムナビは全ページ共通の部品。
   このページだけ書体が変わって見えないよう、元の指定へ戻す。 */
body.ds > .hiyo-safety-bar,
body.ds > .hiyo-header,
body.ds > .hiyo-footer,
body.ds > .hiyo-bottom-nav{
  font-family:"Noto Sans JP",sans-serif;
  line-height:1.8;
  letter-spacing:.025em;
  font-size:14px;
}
body.ds > .hiyo-header .hiyo-brand__name{ font-family:"Shippori Mincho",serif; }
/* ヘッダより下に敷かれる固定ドット。ヒーローの黒に干渉しないよう z を保つ。 */
body.ds::before{ z-index:-2; }

/* prefers-reduced-motion で html{scroll-behavior:smooth}（style.css L262/L2260）が
   残っていた問題（FACTS §9）をここで止める。 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  body.ds *,body.ds *::before,body.ds *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   3. /kanko/ 専用の小さな部品
   ds-core にない、このページの意味に必要なものだけ足す。
   ============================================================ */

.hiyo-k2{ display:block; }

/* [hidden] は UA スタイル（display:none）だが特異度が 0 なので、
   .hiyo-k2-tabpanel{display:grid} のようなクラス指定に負ける。
   タブのパネルが全部同時に開いてしまうため、ここで必ず勝たせる。 */
.hiyo-k2 [hidden]{ display:none !important; }

/* --- 3-1. ヒーローの直下に置く「掲載方針」 --------------------- */
.hiyo-k2-policy{
  border-top:1px solid var(--ds-line);
  border-bottom:1px solid var(--ds-line);
  background:var(--ds-surface);
}
.hiyo-k2-policy__in{
  width:min(var(--ds-max),100% - var(--ds-gutter)*2);
  margin-inline:auto;
  padding-block:var(--ds-4);
  display:grid;
  grid-template-columns:minmax(0,15em) minmax(0,1fr);
  gap:var(--ds-3) var(--ds-5);
  align-items:start;
}
.hiyo-k2-policy h2{
  font-size:16px;
  line-height:1.7;
  letter-spacing:.04em;
}
.hiyo-k2-policy p{
  font-size:13px;
  line-height:2.05;
  color:var(--ds-ink-soft);
  max-width:46em;
}
.hiyo-k2-policy p + p{ margin-top:10px; }
@media (max-width:768px){
  .hiyo-k2-policy__in{ grid-template-columns:1fr; gap:12px; }
}

/* --- 3-2. 写真のクレジット行 ---------------------------------- */
.hiyo-k2-credit{
  margin-top:9px;
  font-size:10.5px;
  line-height:1.75;
  color:var(--ds-ink-soft);
  letter-spacing:.01em;
  /* 「CC BY-SA 4.0」「Wikimedia Commons」のような欧文が続くと
     日本語の折り返し規則では切れずにはみ出す。ここで必ず折る。 */
  overflow-wrap:anywhere;
  word-break:normal;
}
.hiyo-k2-credit a{ text-decoration:underline; text-underline-offset:.22em; }
.ds-section--dark .hiyo-k2-credit,
.hiyo-k2-credit--dark{ color:var(--ds-on-dark-soft); }
.ds-card .hiyo-k2-credit{ margin-top:0; padding:0 20px 16px; }

/* --- 3-2b. 半透明の「地」は必ず background-color で作る ---------
   グラデーション（＝background-image）の上に文字を置くと、
   コントラストが機械的に判定できない。判定できる作りにしておく。 */
.ds-card__panel{
  background:rgba(10,14,12,.90) !important;
  backdrop-filter:blur(3px);
}
/* style.css L2762-2767 に figcaption{color:var(--h1-muted)!important} がある。
   濃色の上に置く figcaption は !important で取り返さないと 3.56:1 まで落ちる。 */
.ds-scenes__shot figcaption{
  background:rgba(10,14,12,.86) !important;
  color:#fff !important;
  font-size:11px !important;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.ds-card__panel .ds-card__note{ color:#fff; }
@media (max-width:768px){
  .ds-card__panel{ background:none !important; backdrop-filter:none; }
  .ds-card__panel .ds-card__note{ color:var(--ds-ink-soft); }
}

/* --- 3-3. 数字と見出しの帯（ヒーロー直後） --------------------- */
.hiyo-k2-lead{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,80px);
  align-items:start;
}
.hiyo-k2-lead p{
  font-size:16px;
  line-height:2.15;
  color:var(--ds-ink-soft);
}
.hiyo-k2-lead p + p{ margin-top:1.6em; }
.hiyo-k2-lead__first::first-letter{
  float:left;
  font-family:var(--ds-serif);
  font-size:3.4em;
  line-height:.92;
  padding:.06em .12em 0 0;
  color:var(--ds-ink);
}
@media (max-width:900px){
  .hiyo-k2-lead{ grid-template-columns:1fr; }
}

/* --- 3-4. タブのパネル ---------------------------------------- */
.hiyo-k2-tabpanel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
.hiyo-k2-tabpanel h3{ font-size:clamp(22px,2.4vw,32px); line-height:1.45; }
.hiyo-k2-tabpanel p{ margin-top:18px; font-size:14.5px; line-height:2.1; color:var(--ds-ink-soft); }
.hiyo-k2-stations{ margin:0; border-top:1px solid var(--ds-line); }
.hiyo-k2-stations div{
  display:grid; grid-template-columns:9em minmax(0,1fr); gap:16px;
  padding:14px 0; border-bottom:1px solid var(--ds-line);
}
.hiyo-k2-stations dt{ font-size:12.5px; color:var(--ds-gold); letter-spacing:.03em; }
.hiyo-k2-stations dd{ margin:0; font-size:13px; line-height:1.95; color:var(--ds-ink-soft); }
@media (max-width:900px){
  .hiyo-k2-tabpanel{ grid-template-columns:1fr; }
  .hiyo-k2-stations div{ grid-template-columns:1fr; gap:4px; }
}

/* --- 3-5. 長文の読み物 ---------------------------------------- */
.hiyo-k2-prose{ max-width:42em; }
.hiyo-k2-prose h3{
  margin-top:var(--ds-6);
  font-size:clamp(21px,2.2vw,29px);
  line-height:1.55;
}
.hiyo-k2-prose h3:first-child{ margin-top:0; }
.hiyo-k2-prose p{
  margin-top:1.5em;
  font-size:15.5px;
  line-height:2.2;
  color:var(--ds-ink-soft);
}
.hiyo-k2-prose h3 + p{ margin-top:1.1em; }
.hiyo-k2-prose strong{ color:var(--ds-ink); font-weight:500; }
.hiyo-k2-aside{
  margin-top:var(--ds-5);
  padding:clamp(22px,3vw,32px);
  border-left:2px solid var(--ds-gold);
  background:var(--ds-surface);
}
.hiyo-k2-aside b{ display:block; font-family:var(--ds-serif); font-size:17px; font-weight:600; }
.hiyo-k2-aside p{ margin-top:12px; font-size:13.5px; line-height:2.05; color:var(--ds-ink-soft); }

/* --- 3-6. 関連リンク ------------------------------------------ */
/* 罫線は 1px の gap で作る。auto-fit にすると項目数（6）が
   列数で割り切れないとき、空セルが罫線色のまま残って見える。
   列数は 3 / 2 / 1 に固定して必ず埋まるようにする。 */
.hiyo-k2-next{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--ds-line);
  border:1px solid var(--ds-line);
}
@media (max-width:900px){ .hiyo-k2-next{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .hiyo-k2-next{ grid-template-columns:1fr; } }
.hiyo-k2-next a{
  display:flex; flex-direction:column; gap:9px; justify-content:space-between;
  min-height:132px; padding:24px 26px;
  background:var(--ds-surface);
  transition:background var(--ds-hover) var(--ds-ease), color var(--ds-hover) var(--ds-ease);
}
.hiyo-k2-next a:hover{ background:var(--ds-dark); color:var(--ds-on-dark); }
.hiyo-k2-next b{ font-family:var(--ds-serif); font-size:16px; font-weight:600; line-height:1.65; }
.hiyo-k2-next span{ font-size:11.5px; letter-spacing:.04em; color:var(--ds-ink-soft); }
.hiyo-k2-next a:hover span{ color:var(--ds-gold-on-dark); }

/* --- 3-7. 出典 ------------------------------------------------- */
.hiyo-k2-sources{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:10px 34px; margin:0; padding:0; list-style:none;
}
.hiyo-k2-sources li{
  padding:11px 0; border-bottom:1px solid rgba(244,239,229,.18);
  font-size:13px; line-height:1.8;
}
.hiyo-k2-sources a{ color:var(--ds-on-dark); }
.hiyo-k2-sources a:hover{ color:var(--ds-gold-on-dark); }
.hiyo-k2-sources + .ds-source{ margin-top:var(--ds-5); }

/* --- 3-8. 比較表の中のスポット名セル ---------------------------- */
.hiyo-k2-cell{ display:flex; align-items:center; gap:13px; min-width:210px; }
.hiyo-k2-cell img{ width:64px; height:48px; object-fit:cover; flex:0 0 auto; }
.hiyo-k2-cell b{ display:block; font-family:var(--ds-serif); font-weight:600; font-size:13.5px; line-height:1.55; }
.hiyo-k2-cell span{ display:block; margin-top:3px; font-size:11px; color:var(--ds-ink-soft); }
.ds-section--dark .hiyo-k2-cell span{ color:var(--ds-on-dark-soft); }

/* スマホでは ds-core が表をカードへ組み替える。
   濃色セクションの中でも地は明るいカードになるので、文字色を戻す。
   ここを忘れるとコントラストが落ちる（実際に踏んだ）。 */
@media (max-width:768px){
  .hiyo-k2-cell{ min-width:0; }
  .ds-section--dark .ds-table tbody tr{ background:var(--ds-surface); border-color:var(--ds-line); }
  .ds-section--dark .ds-table tbody td{ color:var(--ds-ink); }
  .ds-section--dark .ds-table tbody td::before{ color:var(--ds-ink-soft); }
  .ds-section--dark .hiyo-k2-cell span{ color:var(--ds-ink-soft); }
}

/* --- 3-9. ヒーローの微調整 ------------------------------------ */
body.ds .ds-hero{ min-height:min(88svh,860px); }
body.ds .ds-hero__title{ letter-spacing:.03em; max-width:14em; }
body.ds .ds-hero__credit{ color:rgba(255,255,255,.74); }
body.ds .ds-hero__eyebrow{ letter-spacing:.18em; }

/* --- 3-9b. ベントの暗幕を少し強くする -------------------------
   石切の参道（白い看板）や花園のナイトゲーム（照明）のように
   明るい部分の上に見出しが乗る写真がある。ds-core の既定より下を濃くする。 */
.ds-bento__cell::after{
  background:linear-gradient(180deg,
    rgba(8,10,8,.12) 0%,
    rgba(8,10,8,.20) 28%,
    rgba(8,10,8,.72) 68%,
    rgba(8,10,8,.90) 100%);
}

/* --- 3-10. 見出し組みの余白 ----------------------------------- */
body.ds .ds-head{ margin-bottom:var(--ds-6); }
body.ds .ds-kicker{ letter-spacing:.12em; font-size:11.5px; }

/* --- 3-11. カードの中の「基本情報」 --------------------------- */
.hiyo-k2-facts{ margin:0; display:grid; gap:0; border-top:1px solid var(--ds-line); }
.hiyo-k2-facts div{
  display:grid; grid-template-columns:6.5em minmax(0,1fr); gap:12px;
  padding:9px 0; border-bottom:1px solid var(--ds-line);
}
.hiyo-k2-facts dt{ font-size:11px; letter-spacing:.03em; color:var(--ds-gold); }
.hiyo-k2-facts dd{ margin:0; font-size:12.5px; line-height:1.85; color:var(--ds-ink-soft); }

/* --- 3-11b. レイアウトの小物 ---------------------------------- */
.hiyo-k2-gridwrap{ margin-top:var(--ds-5); }
.hiyo-k2-figure{ margin:0; overflow:hidden; }
.hiyo-k2-figure img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.hiyo-k2-bandcredit{ margin-top:var(--ds-4); text-align:center; }

/* --- 3-12. フィルタが 0 件のとき ------------------------------ */
.hiyo-k2-empty{
  padding:var(--ds-6) 0; text-align:center;
  font-size:14px; color:var(--ds-ink-soft);
}

/* --- 3-13. ドックの中身 --------------------------------------- */
body.ds .ds-dock__txt b{ font-family:var(--ds-serif); white-space:nowrap; }
body.ds .ds-dock .ds-btn{ white-space:nowrap; }
@media (max-width:430px){
  body.ds .ds-dock__txt{ font-size:11px; line-height:1.55; }
  body.ds .ds-dock .ds-btn{ padding:0 14px; font-size:12.5px; }
}
@media (max-width:700px){
  /* ボトムナビ（全ページ共通・防災導線）と重ならないよう、
     ドックはボトムナビの上に積む。ボトムナビは position:static なので
     ドックが被さることは無いが、余白だけ確保しておく。 */
  body.ds{ padding-bottom:0; }
}

/* --- 3-14. スマホ ---------------------------------------------- */
@media (max-width:768px){
  body.ds .ds-hero{ min-height:min(86svh,720px); }
  .hiyo-k2-prose p{ font-size:15px; line-height:2.1; }
  .hiyo-k2-lead p{ font-size:15px; }
}