/*
  WP-LOAD ブロックテーマ用スタイル
  デザイントークンは theme.json 側。ここは路線図（シグネチャ）と各コンポーネント。
*/

:root {
  --wpl-radius: 10px;
  --wpl-shadow: 0 8px 24px rgba(27, 32, 50, 0.08);
}

html {
  scroll-behavior: smooth;
}

/* ルート直下（ヘッダー・main・フッター）に入るWP標準のブロック間マージンを無効化。
   セクション間の余白は各セクションのpaddingで管理する */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* ---- 共通セクション ---- */
.wpl-section,
.wpl-roadmap,
.wpl-hero,
.wpl-cta {
  padding: 96px 24px;
}

.wpl-section--mist {
  background: var(--wp--preset--color--mist);
}

.wpl-section__inner,
.wpl-roadmap__inner,
.wpl-hero__inner {
  max-width: 1140px;
  margin: 0 auto;
}

.wpl-section__eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--signal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.wpl-section__title {
  font-size: var(--wp--preset--font-size--x-large);
  margin: 0 0 48px;
}

.wpl-section__more {
  text-align: center;
  margin: 48px 0 0;
}

/* ---- ボタン ---- */
.wpl-button {
  display: inline-block;
  background: var(--wp--preset--color--signal);
  color: var(--wp--preset--color--paper);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.wpl-button:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

/* キラキラ（光が定期的に走る）ボタン */
.wpl-button--shine {
  position: relative;
  overflow: hidden;
}

.wpl-button--shine::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 36%;
  height: 220%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: wpl-shine 3.2s ease-in-out infinite;
}

@keyframes wpl-shine {
  0% {
    left: -70%;
  }

  45%,
  100% {
    left: 140%;
  }
}

.wpl-button--ghost {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 2px solid var(--wp--preset--color--line);
}

.wpl-button--ghost:hover {
  background: transparent;
  color: var(--wp--preset--color--signal);
  border-color: var(--wp--preset--color--signal);
}

/* ---- ヘッダー ---- */
.wpl-header {
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding-left: 24px;
  padding-right: 24px;
}

.wpl-brand a {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.wpl-nav a {
  text-decoration: none;
}

.wpl-nav a:hover {
  color: var(--wp--preset--color--signal);
}

/* モバイルのオーバーレイメニューに余白を持たせる */
.wpl-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 72px 24px 24px;
}

/* ---- ヒーロー（夜の路線図） ---- */
.wpl-hero {
  position: relative;
  background: linear-gradient(160deg, var(--wp--preset--color--night) 0%, var(--wp--preset--color--ink) 100%);
  color: var(--wp--preset--color--paper);
  padding-top: 72px;
  padding-bottom: 72px;
}

/* 星屑（旧デザインの名残）。
   タイルサイズの異なる繰り返しレイヤーを重ねて、MV全体に不規則に散らす */
.wpl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 75px 110px, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1.4px 1.4px at 130px 60px, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1.2px 1.2px at 180px 140px, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1.6px 1.6px at 55px 170px, rgba(255, 255, 255, 0.33), transparent),
    radial-gradient(1.2px 1.2px at 150px 15px, rgba(255, 255, 255, 0.27), transparent),
    radial-gradient(1.4px 1.4px at 100px 85px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.2px 1.2px at 210px 45px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.6px 1.6px at 40px 65px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.2px 1.2px at 170px 100px, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(1.4px 1.4px at 15px 135px, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1.2px 1.2px at 120px 160px, rgba(255, 255, 255, 0.31), transparent),
    radial-gradient(1.1px 1.1px at 85px 20px, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.3px 1.3px at 195px 120px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.1px 1.1px at 60px 95px, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1.8px 1.8px at 65px 45px, rgba(208, 47, 47, 0.5), transparent),
    radial-gradient(1.8px 1.8px at 155px 125px, rgba(208, 47, 47, 0.45), transparent),
    radial-gradient(1.6px 1.6px at 30px 100px, rgba(208, 47, 47, 0.4), transparent);
  background-size:
    227px 193px,
    261px 223px,
    307px 233px,
    191px 263px,
    273px 177px,
    239px 293px,
    211px 229px,
    321px 209px,
    177px 153px,
    287px 251px,
    223px 199px,
    253px 283px,
    199px 173px,
    311px 241px,
    167px 217px,
    331px 271px,
    283px 313px,
    251px 197px;
}

/* MV内ブランド（PCはヘッダーにWP-LOADが出るためSPのみ表示） */
.wpl-hero__brand {
  display: none;
}

.wpl-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 48px;
  align-items: center;
}

.wpl-hero .wpl-hero__inner {
  max-width: 1200px;
}

.wpl-hero__eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--signal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.wpl-hero__title {
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 24px;
}

.wpl-hero__lead {
  color: #b9c0cf;
  max-width: 40em;
  margin: 0 0 40px;
}

.wpl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.wpl-hero__actions .wpl-button:hover {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

/* ---- ルートSVG ---- */
.wpl-route {
  display: block;
  width: 100%;
  height: auto;
}

.wpl-route__line {
  stroke: var(--wp--preset--color--signal);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: wpl-route-draw 1.6s ease-out 0.3s forwards;
}

.wpl-route__station {
  opacity: 0;
  animation: wpl-route-appear 0.5s ease-out var(--d, 0.6s) forwards;
}

.wpl-route__dot {
  fill: var(--wp--preset--color--night);
  stroke: var(--wp--preset--color--signal);
  stroke-width: 3;
}

.wpl-route__dot--goal {
  fill: var(--wp--preset--color--signal);
  stroke: var(--wp--preset--color--paper);
}

.wpl-route__label {
  fill: #c8cdd8;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.wpl-route__label--goal {
  fill: var(--wp--preset--color--paper);
  font-weight: 700;
  font-size: 14px;
}

@keyframes wpl-route-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes wpl-route-appear {
  to {
    opacity: 1;
  }
}

/* ---- 路線図（シグネチャ） ---- */
.wpl-roadmap {
  padding-top: 72px;
}

.wpl-road {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 760px;
}

.wpl-station {
  position: relative;
  padding: 0 0 56px 76px;
}

/* 一本の赤いルートライン（駅ごとに次の駅までの区間を描く） */
.wpl-station:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 23px;
  bottom: -23px;
  width: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--signal);
}

.wpl-station:last-child {
  padding-bottom: 0;
}

/* 駅ナンバリング */
.wpl-station__code {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--wp--preset--color--paper);
  border: 3px solid var(--wp--preset--color--signal);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700;
  font-size: 15px;
  display: grid;
  place-items: center;
  z-index: 1;
}

/* 記事準備中の駅は破線 */
.wpl-station--soon .wpl-station__code {
  border-style: dashed;
  border-color: #b6bcc8;
  color: var(--wp--preset--color--muted);
}

/* 終着駅（公開）は赤で塗る */
.wpl-station:last-child .wpl-station__code {
  background: var(--wp--preset--color--signal);
  border-color: var(--wp--preset--color--signal);
  border-style: solid;
  color: var(--wp--preset--color--paper);
}

.wpl-station__name {
  margin: 0 0 6px;
  font-size: 20px;
}

.wpl-station__name a {
  text-decoration: none;
}

.wpl-station__name a:hover {
  color: var(--wp--preset--color--signal);
}

.wpl-station__desc {
  margin: 0 0 8px;
  color: var(--wp--preset--color--muted);
}

.wpl-station__meta {
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.wpl-station:not(.wpl-station--soon) .wpl-station__meta {
  color: var(--wp--preset--color--signal);
}

/* ---- 記事カード ---- */
.wpl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.wpl-card {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wpl-radius);
  overflow: hidden;
  background: var(--wp--preset--color--paper);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.wpl-card:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--signal);
  box-shadow: var(--wpl-shadow);
}

.wpl-card__link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.wpl-card__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--wp--preset--color--mist);
}

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

.wpl-card__body {
  padding: 16px 18px 18px;
}

.wpl-card__cat {
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--signal);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 0 10px;
}

.wpl-card__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.wpl-card__time {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: var(--wp--preset--color--muted);
}

/* ---- アーカイブ ---- */
.wpl-cards--archive {
  margin-top: 40px;
}

.wpl-pagination {
  margin-top: 64px;
  font-family: var(--wp--preset--font-family--mono);
}

.wpl-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wpl-pagination .page-numbers {
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
}

.wpl-pagination .page-numbers.current {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

.wpl-pagination a.page-numbers:hover {
  background: var(--wp--preset--color--mist);
}

/* スクリーンリーダー専用テキスト（コアのナビゲーション見出しなど） */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---- 記事ページ ---- */
.wpl-single,
.wpl-archive,
.wpl-404 {
  padding-left: 24px;
  padding-right: 24px;
}

.wpl-single__head {
  margin-bottom: 32px;
}

.wpl-single__cats {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.wpl-single__cats a {
  color: var(--wp--preset--color--signal);
  text-decoration: none;
}

.wpl-single__meta {
  margin-top: 12px;
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--mono);
}

/* 2つ目の日付は更新日として（）付きで表示する */
.wpl-single__meta .wp-block-post-date:nth-of-type(2)::before {
  content: "（更新日：";
}

.wpl-single__meta .wp-block-post-date:nth-of-type(2)::after {
  content: "）";
}

.wpl-single__eyecatch img {
  border-radius: var(--wpl-radius);
}

/* 本文の見出し（赤バーは旧デザインからの継承） */
.wp-block-post-content h2 {
  position: relative;
  padding-left: 18px;
  margin-top: 2.6em;
}

.wp-block-post-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 5px;
  border-radius: 3px;
  background: var(--wp--preset--color--signal);
}

.wp-block-post-content h3 {
  border-bottom: 2px solid var(--wp--preset--color--line);
  padding-bottom: 0.3em;
  margin-top: 2em;
}

/* ---- テーブル（幅が収まらない場合は横スクロール） ---- */
.wp-block-post-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

/* コアのテーブルブロックはfigure側が横スクロールを担う */
.wp-block-post-content .wp-block-table {
  overflow-x: auto;
}

.wp-block-post-content .wp-block-table table {
  display: table;
  width: 100%;
}

.wp-block-post-content th,
.wp-block-post-content td {
  border: 1px solid var(--wp--preset--color--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.wp-block-post-content th {
  background: var(--wp--preset--color--mist);
  font-weight: 700;
}

/* ---- 目次（the_contentフィルター出力） ---- */
.toc {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wpl-radius);
  background: var(--wp--preset--color--mist);
  padding: 20px 24px;
  margin: 2em 0;
}

.toc__title {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 開閉はJS廃止に伴い常時展開 */
.toc__button {
  display: none;
}

.toc__list,
.toc__list_child {
  margin: 10px 0 0;
  padding-left: 1.5em;
}

.toc__link {
  text-decoration: none;
}

.toc__link:hover {
  color: var(--wp--preset--color--signal);
}

/* ---- CTA ---- */
.wpl-cta {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  text-align: center;
}

.wpl-cta__inner {
  max-width: 760px;
  margin: 0 auto;
}

.wpl-cta__catch {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 900;
  margin: 0 0 16px;
}

.wpl-cta__desc {
  color: var(--wp--preset--color--line);
  margin: 0 0 32px;
}

/* ---- フッター ---- */
.wpl-footer {
  padding-left: 24px;
  padding-right: 24px;
}

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

.wpl-footer a:hover {
  color: var(--wp--preset--color--signal);
}

.wpl-footer__links {
  gap: 24px;
}

.wpl-footer__credit {
  margin: 48px 0 0;
  text-align: center;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: #8a90a0;
}

/* ---- SP専用の改行ユーティリティ ---- */
.wpl-sp-br {
  display: none;
}

@media (max-width: 640px) {
  .wpl-sp-br {
    display: inline;
  }

  .wpl-sp-hide {
    display: none;
  }
}

/* ---- アクセシビリティ・モーション ---- */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--signal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wpl-card,
  .wpl-button {
    transition: none;
  }

  .wpl-card:hover {
    transform: none;
  }

  .wpl-button--shine::after {
    animation: none;
    display: none;
  }

  .wpl-route__line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .wpl-route__station {
    animation: none;
    opacity: 1;
  }

  header.wp-block-template-part {
    transition: none;
  }
}

/* ---- レスポンシブ ---- */
@media (max-width: 640px) {
  /* ベース文字サイズはSPで15px（PCは16px、theme.jsonのmediumトークン） */
  :root {
    --wp--preset--font-size--medium: 15px;
  }

  .wpl-section,
  .wpl-roadmap,
  .wpl-hero,
  .wpl-cta {
    padding: 64px 16px;
  }

  .wpl-header,
  .wpl-footer,
  .wpl-single,
  .wpl-archive,
  .wpl-404 {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* MV（ヒーロー）はヘッダー分を差し引いた1画面に収める */
  .wpl-hero {
    min-height: calc(100svh - 70px);
    display: flex;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .wpl-hero__inner {
    width: 100%;
    gap: 24px;
  }

  .wpl-hero__title {
    margin-bottom: 16px;
  }

  .wpl-hero__lead {
    margin-bottom: 24px;
  }

  .wpl-hero__route {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  /* 画面が低い端末では路線図を縮めてMVを1画面に収める */
  .wpl-hero__route .wpl-route {
    width: 100%;
    height: auto;
    max-height: 32svh;
  }

  /* MVの一番上にブランドを表示（フッターと同じテキストロゴ） */
  .wpl-hero__brand {
    display: block;
    position: absolute;
    top: 20px;
    left: 16px;
    margin: 0;
  }

  .wpl-hero__brand a {
    color: var(--wp--preset--color--paper);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  /* SPのテーブルはセルを折り返さず横スクロールで見せる */
  .wp-block-post-content th,
  .wp-block-post-content td {
    white-space: nowrap;
  }

  /* SVGごと縮小されて文字が読めなくなるため、SPはラベル・線・駅を拡大する */
  .wpl-route__line {
    stroke-width: 7;
  }

  .wpl-route__label {
    font-size: 19px;
  }

  .wpl-route__label--goal {
    font-size: 23px;
  }

  .wpl-route__dot {
    r: 10;
  }

  .wpl-route__dot--goal {
    r: 14;
  }

  /* SPのヘッダーはスリムに */
  .wpl-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .wpl-brand a {
    font-size: 19px;
  }

  /* MVがあるページ（theme.jsがbodyにクラス付与）：
     ヘッダーはMVの上では非表示、MVを抜けたらブラー付きで固定表示 */
  body.wpl-overlay-header header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  body.wpl-overlay-header header.wp-block-template-part.is-past-mv {
    transform: translateY(0);
  }

  body.wpl-overlay-header .wpl-header {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }

  /* ヘッダーがオーバーレイになるのでMVは1画面まるごと使う */
  body.wpl-overlay-header .wpl-hero {
    min-height: 100svh;
  }

  .wpl-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .wpl-station:not(:last-child)::before {
    left: 17px;
  }

  .wpl-station {
    padding-left: 60px;
    padding-bottom: 48px;
  }

  .wpl-station__code {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
}