/*
 Theme Name: Kadence Child
 Template: kadence
 Text Domain: kadence-child
*/
#kt-scroll-up{
cursor: pointer;
}
.single-post .kadence-post-title-wrap {
  display: none !important;
}
.single-post .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.site-topbar {
  display: none !important;
}
div.breadcrumbs {
  max-width: 1000px;
  margin:20px auto;
}
.breadcrumbs {
  font-size: 0.85em;
  margin: 1em 0;
  color: #444;
}
.breadcrumbs a {
  text-decoration: none;
  color: #cc6600;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
/* パンくず・タグ */
.eyecatch-area {
  position: relative;
  /* お好みでwidth/height */
}
.eyecatch-img {
  width: 100%;
  display: block;
}
.eyecatch-gradient {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%; /* グラデの高さ調整 */
  background: linear-gradient(to top, #fff 70%, transparent 100%);
  pointer-events: none;
}
.breadcrumb {
  position: absolute;
  left: 20px; top: 20px;
  z-index: 2;
  background: rgba(255,255,255,0.7); /* 見やすさ向上 */
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.eyecatch-content {
  position: absolute;
  left: 0; bottom: 0;
  padding: 40px;
  z-index: 2;
  color: #222;
}
 /* 例：JR九州レッド */
.category.route-kyushu {
  display: inline-block;
  background: #e60012;
  color: #fff;
  padding: 2px 14px;
  border-radius: 16px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.1em;
  vertical-align: middle;
  margin-bottom: 8px;
}
/* Details ブロックの全体枠 */
details.wp-block-details {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 1.5rem 0;
  background: #f9fafb;
  padding: 0;
}
/* タイトル行（駅名のところ） */
details.wp-block-details > summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;          /* デフォルトの三角を消したい場合 */
}
/* 開いているときのタイトルの見た目 */
details.wp-block-details[open] > summary {
  border-bottom: 1px solid #ddd;
  background: #fff;
}
/* 中身の余白（写真＋テキスト部分） */
details.wp-block-details > *:not(summary) {
  padding: 1rem 1.25rem 1.25rem;
}
/* roadカテゴリの記事内 H3 にラインを出す */
article.category-road .entry-content h3.wp-block-heading{
  position: relative;
  padding-bottom: 16px;
}
article.category-road .entry-content h3.wp-block-heading::after{
  content:"";
  display:block;
  width:220px;
  height:6px;
  margin-top:10px;
  border-radius:3px;
  background: repeating-linear-gradient(
    135deg,
    #e63946 0 10px,
    #ffffff 10px 20px,
    #1d4ed8 20px 30px,
    #ffffff 30px 40px
  );
}
article.category-jreast .entry-content h3.wp-block-heading{
  position: relative;
  padding-bottom: 16px;
}
article.category-jreast .entry-content h3.wp-block-heading::after{
  content:"";
  display:block;
  width:220px;
  height:6px;
  margin-top:10px;
  border-radius:3px;
  background: repeating-linear-gradient(
    135deg,
    #16a34a 0 10px,
    #ffffff 10px 20px,
    #facc15 20px 30px,
    #ffffff 30px 40px
  );
}
/* =========================
   カテゴリカラー設定（TOP + 投稿）
   ========================= */
/* ---------- TOP/一覧：category-link-xxx が付く側 ---------- */
/* 鉄道系：駅名標図鑑（青） */
a.category-link-machinami,
a.category-link-munekyun,
a.category-link-stationstory,
a.category-link-statravel,
a.category-link-ekimeihyo{
  color: #1f5aa6 !important;
}
a.category-link-machinami:hover,
a.category-link-munekyun:hover,
a.category-link-stationstory:hover,
a.category-link-statravel:hover,
a.category-link-ekimeihyo:hover{
  color: #163f7a !important;
}
/* 雑記：ゆんたく（緑） */
a.category-link-yuntaku{
  color: #008f72 !important;
}
a.category-link-yuntaku:hover{
  color: #2e7d6d !important;
}
/* ---------- 投稿ページ：entry-taxonomies 側（hrefで判定） ---------- */
/* ゆんたく（緑） */
.single .entry-taxonomies .category-links a[href*="/category/yuntaku/"],
.single .entry-taxonomies .category-links a[href*="/category/yuntaku/"]:visited{
  color: #008f72 !important;
}
.single .entry-taxonomies .category-links a[href*="/category/yuntaku/"]:hover{
  color: #2e7d6d !important;
}
/* 駅名標図鑑（青） */
.single .entry-taxonomies .category-links a[href*="/category/ekimeihyo/"],
.single .entry-taxonomies .category-links a[href*="/category/ekimeihyo/"]:visited{
  color: #1f5aa6 !important;
}
.single .entry-taxonomies .category-links a[href*="/category/ekimeihyo/"]:hover{
  color: #163f7a !important;
}
/* 鉄道系（青） */
.single .entry-taxonomies .category-links a[href*="/category/machinami/"],
.single .entry-taxonomies .category-links a[href*="/category/machinami/"]:visited{
  color: #1f5aa6 !important;
}
.single .entry-taxonomies .category-links a[href*="/category/machinami"]:hover{
  color: #163f7a !important;
}
/* 鉄道系（青） */
.single .entry-taxonomies .category-links a[href*="/category/munekyun/"],
.single .entry-taxonomies .category-links a[href*="/category/munekyun/"]:visited{
  color: #1f5aa6 !important;
}
.single .entry-taxonomies .category-links a[href*="/category/munekyun"]:hover{
  color: #163f7a !important;
}
/* 鉄道系（青） */
.single .entry-taxonomies .category-links a[href*="/category/stationstory/"],
.single .entry-taxonomies .category-links a[href*="/category/stationstory/"]:visited{
  color: #1f5aa6 !important;
}
.single .entry-taxonomies .category-links a[href*="/category/stationstory"]:hover{
  color: #163f7a !important;
}
/* 鉄道系（青） */
.single .entry-taxonomies .category-links a[href*="/category/statravel/"],
.single .entry-taxonomies .category-links a[href*="/category/statravel/"]:visited{
  color: #1f5aa6 !important;
}
.single .entry-taxonomies .category-links a[href*="/category/statravel"]:hover{
  color: #163f7a !important;
}
/* =========================================
   Kadence 投稿前後ナビ：中央寄せ（前/次だけ表示）
   - 両方あるときだけ中央に棒
   - タイトルは非表示
   ========================================= */

/* 既存の区切り線・疑似要素・ボーダーを全殺し */
.post-navigation .nav-links::before,
.post-navigation .nav-links::after,
.post-navigation .nav-previous::before,
.post-navigation .nav-previous::after,
.post-navigation .nav-next::before,
.post-navigation .nav-next::after {
  content: none !important;
  display: none !important;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  border: 0 !important;
}

/* レイアウト：中央に寄せる（1個でも中央） */
.post-navigation .nav-links{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2.2rem !important;          /* ←寄せ具合はここだけ調整 */
  position: relative !important;
}

/* “棒”はデフォルト非表示（=片側しかない時は出ない） */
.post-navigation .nav-links::before{
  content: "" !important;
  display: none !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1.2em;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.25);
}

/* 両方あるときだけ棒を出す（JSが付けるクラス） */
.post-navigation .nav-links.has-both::before{
  display: block !important;
}

/* タイトルは消す：a の直下テキストを消して small だけ生かす */
.post-navigation .nav-previous a,
.post-navigation .nav-next a{
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .2rem .4rem !important;
  text-decoration: none;
}

/* 「前」「次」だけ復活 */
.post-navigation .post-navigation-sub,
.post-navigation .post-navigation-sub small{
  font-size: 16px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* ================================
  timeline（これ1本で管理：丸ごと入れ替え版）
================================ */

/* =====================
  1. 変数（ここだけ触る）
===================== */
.timeline{
  --tl-line: #0CDAED;
  --tl-accent: #0CDAED;
  --tl-text: #222;

  --tl-timeSize: 60px;   /* ●の直径 */
  --tl-timeR: 30px;      /* ●の半径（timeSizeの半分に合わせる） */

  --tl-lineW: 3px;       /* 縦棒の太さ */
  --tl-gap: 28px;        /* 左右カードとの間隔 */

  --tl-lineExtend: 60px; /* 各行で上下に伸ばす量 */
  --tl-capOut: 16px;     /* 先頭/末尾の突き抜け量 */

  /* カード見た目 */
  --tl-cardBg: #fff;
  --tl-cardBd: rgba(0,0,0,.10);     /* 白が見えにくい問題の解決 */
  --tl-cardShadow: 0 12px 28px rgba(0,0,0,.06);

  /* しっぽ（◇） */
  --tl-tailSize: 18px;   /* ◇の外側サイズ */
  --tl-tailInset: 2px;   /* 枠線分、内側を小さく */
  --tl-tailShift: 1px;   /* 中心ズレ微調整（0〜2px） */
  --tl-tailOut: 10px;    /* カードから外に出す量 */
}


/* =====================
  2. 行レイアウト（grid）
===================== */
.timeline .timeline-item > .kt-row-column-wrap{
  display: grid !important;
  grid-template-columns: 1fr var(--tl-timeSize) 1fr !important;
  column-gap: var(--tl-gap) !important;
  align-items: stretch !important;
}


/* =====================
  3. レール（中央列）
===================== */
.timeline .timeline-item .timeline-rail{
  grid-column: 2;
  width: var(--tl-timeSize);
  align-self: stretch;
  min-height: 150px; /* 行間の基本高さ（詰めたい時はここを下げる） */

  position: relative;
  overflow: visible !important;

  /* ★勝因：●をレールの中央に固定 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* =====================
  4. 縦棒（基本）
===================== */
.timeline .timeline-item .timeline-rail::before{
  content:"";
  position:absolute;
  left:50%;
  top: calc(-1 * var(--tl-lineExtend));
  bottom: calc(-1 * var(--tl-lineExtend));
  width: var(--tl-lineW);
  transform: translateX(-50%);
  background: var(--tl-line);
  z-index: 0;
}

/* 先頭：上を●の外＋少し突き抜け */
.timeline .timeline-item:first-of-type .timeline-rail::before{
  top: calc(50% - var(--tl-timeR) - var(--tl-capOut));
}

/* 最後：下を●の外＋少し突き抜け */
.timeline .timeline-item:last-of-type .timeline-rail::before{
  bottom: calc(50% - var(--tl-timeR) - var(--tl-capOut));
}


/* =====================
  5. ●（時間）※線より前
===================== */
.timeline .timeline-item .timeline-rail p.timeline-time{
  width: var(--tl-timeSize);
  height: var(--tl-timeSize);
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 !important;
  line-height:1 !important;

  background: var(--tl-accent) !important;
  color: var(--tl-text);
  font-weight:700;
  font-size:18px;

  position: relative;
  z-index: 2;
}


/* =====================
  6. カード配置
===================== */
.timeline .timeline-item.is-right .timeline-cardcol{
  grid-column: 3;
  justify-self: start;
  align-self: center;
}

.timeline .timeline-item.is-left .timeline-cardcol{
  grid-column: 1;
  justify-self: end;
  align-self: center;
}


/* =====================
  7. カード本体＋しっぽ（◇）
===================== */
.timeline .timeline-card{
  width: 380px;                 /* ← 基本のカード幅（ここを調整） */
  max-width: 100%;
  min-width: 380px;             /* ← 内容が少なくても縮まない */

  background: var(--tl-cardBg);
  border: 1px solid var(--tl-cardBd);
  border-radius: 16px;
  box-shadow: var(--tl-cardShadow);
  padding: 18px 22px;

  position: relative;
  z-index: 2;
  overflow: visible;
}


/* 余白リセット */
.timeline .timeline-card :first-child{ margin-top: 0 !important; }
.timeline .timeline-card :last-child{ margin-bottom: 0 !important; }

/* しっぽ共通（◇） */
.timeline .timeline-card::before,
.timeline .timeline-card::after{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(-50%) rotate(45deg);
  width: var(--tl-tailSize);
  height: var(--tl-tailSize);
  border-radius: 2px;
  pointer-events: none;
}

/* 下：枠＋影（外側） */
.timeline .timeline-card::before{
  background: var(--tl-cardBg);
  border: 1px solid var(--tl-cardBd);
  box-shadow: var(--tl-cardShadow);
  z-index: 1;
}

/* 上：カード色（内側）＝少し小さくして枠線を見せる */
.timeline .timeline-card::after{
  background: var(--tl-cardBg);
  width: calc(var(--tl-tailSize) - var(--tl-tailInset));
  height: calc(var(--tl-tailSize) - var(--tl-tailInset));
  z-index: 3;
}

/* 右側カード（is-right）＝左にしっぽ */
.timeline .timeline-item.is-right .timeline-card::before{
  left: calc(-1 * var(--tl-tailOut) + var(--tl-tailShift));
}
.timeline .timeline-item.is-right .timeline-card::after{
  left: calc(-1 * var(--tl-tailOut) + var(--tl-tailShift) + (var(--tl-tailInset) * 0.5));
}

/* 左側カード（is-left）＝右にしっぽ */
.timeline .timeline-item.is-left .timeline-card::before{
  right: calc(-1 * var(--tl-tailOut) + var(--tl-tailShift));
}
.timeline .timeline-item.is-left .timeline-card::after{
  right: calc(-1 * var(--tl-tailOut) + var(--tl-tailShift) + (var(--tl-tailInset) * 0.5));
}


/* =====================
  8. 切り抜き対策（保険）
===================== */
.timeline,
.timeline .timeline-item,
.timeline .timeline-item > .kt-row-column-wrap,
.timeline .timeline-item .timeline-rail{
  overflow: visible !important;
}

/* ===== Kadenceラッパーが前に出てしまう問題を強制修正 ===== */

/* ❶ 行（3列グリッド）を同じ土俵にする */
.timeline .timeline-item > .kt-row-column-wrap{
  position: relative !important;
  z-index: 0 !important;
}

/* ❷ 中央レール（線＋丸）を最前面に固定 */
.timeline .timeline-item .timeline-rail{
  position: relative !important;
  z-index: 50 !important;
}

/* ❸ カード側（ラッパー）を“レールより下”に落とす */
.timeline .timeline-card{
  position: relative !important;
  z-index: 10 !important;

  /* ←これが犯人。isolateしてるとレイヤーが別世界になる */
  isolation: auto !important;
}

/* ❹ しっぽ（疑似要素）はカードよりさらに一段後ろへ */
.timeline .timeline-card::before,
.timeline .timeline-card::after{
  z-index: 0 !important;
}
/* =========================
  タイムラインセクションだけ全幅
========================= */
.timeline-fullwidth{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 中身が端に張り付かないようにする */
.timeline-fullwidth > .kt-row-column-wrap{
  padding-left: clamp(16px, 4vw, 60px);
  padding-right: clamp(16px, 4vw, 60px);
}
/* =========================
  スマホ：ズレない統一版（これ1本）
  ※スマホ用はこの@mediaだけ残す
========================= */
@media (max-width: 700px){

  /* 念のため：全体線方式が残ってたら殺す */
  .timeline::before{ display:none !important; }

  /* ① 行（timeline-item）を「左余白 + 丸列 + カード列」の3列に固定 */
.timeline .timeline-item{
  display: grid !important;
  grid-template-columns: 8px var(--tl-timeSize) 1fr !important; /* ←ここだけ */
  column-gap: 16px !important;
  row-gap: 10px !important;
  align-items: start !important;
  margin: 0 0 10px 0 !important;
}

  /* ② Kadenceの中ラッパーは無視して、中身をtimeline-itemのgridに流す */
  .timeline .timeline-item .kt-row-column-wrap{
    display: contents !important;
  }

  /* ③ レール（丸+線）は必ず2列目 */
  .timeline .timeline-item .timeline-rail{
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;

    justify-self: center !important;
    align-self: start !important;

    width: var(--tl-timeSize) !important;
    min-height: 120px !important; /* 行間：90〜140で調整 */
    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;

    position: relative !important;
    overflow: visible !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 線は丸の中心に固定 */
  .timeline .timeline-item .timeline-rail::before{
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* ④ カード列は必ず3列目（左右交互はスマホでは無効化） */
  .timeline .timeline-item .timeline-cardcol{
    grid-column: 3 !important;
    justify-self: start !important;
    width: 100% !important;
    min-width: 0 !important;   /* ←はみ出し防止に超重要 */
    margin: 0 !important;

    /* 右に余白を作りたいならここ */
    padding-right: 10px !important; /* 12〜24pxで好み調整 */
  }

  /* ⑤ カード本体も可変にする（PCの固定幅を殺す） */
  .timeline .timeline-card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ⑥ 画像のはみ出し対策 */
  .timeline .timeline-card img{
    max-width: 100% !important;
    height: auto !important;
  }

  /* ⑦ しっぽはスマホで一旦OFF（崩れやすいので） */
  .timeline .timeline-card::before,
  .timeline .timeline-card::after{
    display: none !important;
  }
}

  /* 次ここから */