/* Components CSS */

/* -------------------------------------------------------------------------- */
/* jp-title（縦積みタイトルユニット。content-body 見出しと隔離）                  */
/* H2 = 小ラベル ／ H3 = 主役タイトル                                           */
/* -------------------------------------------------------------------------- */

.jp-title {
  text-align: center;
  margin: 55px auto 45px;
}

/* content-body 内でも本文 h2/h3 に勝つよう !important で完結させる */
.jp-title h2,
.content-body .jp-title h2 {
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: normal !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.12em !important;
  margin: 0 !important;
  opacity: 0.6 !important;
  text-transform: none !important;
}

.jp-title h3,
.content-body .jp-title h3 {
  font-family: inherit !important;
  font-size: clamp(24px, 4vw, 40px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  opacity: 1 !important;
  text-transform: none !important;
}

@media (min-width: 769px) {
  .jp-title {
    margin: 120px auto 72px;
  }

  .jp-title h2,
  .content-body .jp-title h2 {
    margin-bottom: 12px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Section Title（独立コンポーネント。content-body 見出しと隔離）                 */
/* H2 = 主役（Playwrite）／ H3 = サブタイトル                                   */
/* -------------------------------------------------------------------------- */

.section-title {
  text-align: center;
  margin: 60px auto 45px;
}

/* content-body 内でも本文 h2/h3 に勝つよう !important で完結させる */
.section-title h2,
.content-body .section-title h2 {
  font-family: "Playwrite GB J", cursive !important;
  font-size: clamp(32px, 5.2vw, 48px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 10px !important;
  opacity: 1 !important;
  text-transform: none !important;
}

.section-title h3,
.content-body .section-title h3 {
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.1em !important;
  margin: 0 !important;
  opacity: 0.65 !important;
  text-transform: none !important;
}

@media (min-width: 769px) {
  .section-title {
    text-align: center;
    margin: 60px auto 80px;
    padding-top: 30px;
  }

  .section-title h2,
  .content-body .section-title h2 {
    font-size: clamp(36px, 4vw, 48px) !important;
    margin-bottom: 12px !important;
  }

  .section-title h3,
  .content-body .section-title h3 {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  /*
   * section-title は is-layout-flex。H2/H3 の前後順に関係なく
   * 間隔の本体は flex gap（実測で約29pxがマージン以外に残っていた）。
   * マージンは0、gap を半分程度（10px）に揃えて一ユニットに見せる。
   */
  .section-title,
  .wp-block-group.section-title,
  .content-body .section-title,
  .section-title.is-layout-flex,
  .wp-block-group.section-title.is-layout-flex {
    gap: 10px !important;
    row-gap: 10px !important;
    column-gap: 0 !important;
    --wp--style--block-gap: 10px;
  }

  .section-title h2,
  .content-body .section-title h2 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .section-title h3,
  .content-body .section-title h3 {
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Button｜Secondary（theme.json styles.css より複製）                          */
/* -------------------------------------------------------------------------- */

/* Secondary Button リンクボタン */

.secondary-button .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--contrast) !important;

  border: 1px solid rgba(0,0,0,.2) !important;
  border-radius: 999px !important;

  padding: 14px 28px !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  text-decoration: none !important;

  transition: all .25s ease;
}

.secondary-button .wp-block-button__link:hover {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.4) !important;
}

/* -------------------------------------------------------------------------- */
/* Header / Navigation                                                        */
/* Desktop ≥1025 ｜ Tablet 768–1024 ｜ Mobile ≤767                                */
/* スコープ: .site-logo-top（グローバルヘッダーのみ）                             */
/* -------------------------------------------------------------------------- */

/* Logo: always 100px, never flex-shrink */
.site-logo-top .wp-block-site-logo {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 100px !important;
  max-width: 100px !important;
}

.site-logo-top .wp-block-site-logo a {
  display: block !important;
  width: 100px !important;
  max-width: 100px !important;
  flex-shrink: 0 !important;
}

.site-logo-top .wp-block-site-logo img,
.site-logo-top .custom-logo {
  width: 100px !important;
  max-width: 100px !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Desktop ≥1025: 一列 — ロゴ + Navigation + 常時表示検索フォーム               */
/* （Navigation 内の既存 Search ブロックのみ。二重生成しない）                    */
/* -------------------------------------------------------------------------- */

@media (min-width: 1025px) {

  /* Force horizontal menu (override core 600px hamburger rules) */
  .site-logo-top .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* Header row: always single line; logo / nav items do not shrink */
  .site-logo-top .wp-block-group.alignwide {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .site-logo-top .wp-block-group.is-content-justification-right {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .site-logo-top .wp-block-navigation {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    background-color: inherit !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /*
   * メニュー項目 gap:
   * core の .wp-block-navigation__container は gap: inherit。
   * content 側のナビ↔検索 gap(12px) を継承しないよう、theme.json の
   * styles.spacing.blockGap（1.8rem）を明示復元する。
   */
  .site-logo-top .wp-block-navigation__container {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: var(--wp--style--block-gap, 1.8rem) !important;
  }

  .site-logo-top .wp-block-navigation-item {
    flex-shrink: 0 !important;
  }

  .site-logo-top .wp-block-navigation-item__content {
    font-family: "Playwrite GB J" !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    white-space: nowrap !important;
  }

  /*
   * 検索: Navigation 内の WP Search を常時表示。
   * 可変幅 — ロゴ・ナビは縮めず、検索側だけ縮む。
   * max-width: 旧280px の約2/3。高さ・角丸・虫眼鏡は据え置き。
   */
  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-search {
    display: block !important;
    flex: 1 1 107px !important;
    min-width: 64px !important;
    max-width: calc(280px * 2 / 3) !important;
    width: auto !important;
    margin: 0 !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-search__inside-wrapper {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-search__input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 34px !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  /* 虫眼鏡: 黒丸 + 白アイコン（検索実行 = submit） */
  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-search__button {
    flex: 0 0 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-search__button svg,
  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-search__button .search-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    fill: currentColor !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-search__button svg path {
    fill: currentColor !important;
  }

}

/* -------------------------------------------------------------------------- */
/* Tablet + Mobile ≤1024: hamburger (override core 600px)                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  /*
   * Hamburger: keep in the header band (not viewport-fixed top).
   * Center on .site-logo-top so it matches the logo row vertically.
   */
  .site-logo-top .wp-block-navigation__responsive-container-open {
    display: flex !important;
    position: absolute !important;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    background: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .site-logo-top .wp-block-navigation__responsive-container-open svg {
    width: 18px;
    height: 18px;
  }

  /* Hide nav strip unless modal is open */
  .site-logo-top .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  /* Overlay open: menu type sizes only inside open modal */
  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-family: "Playwrite GB J" !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    font-style: italic !important;
  }

  /* Suppress residual mouse focus only; keyboard uses global focus-visible rules */
  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open *:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
    width: 100% !important;
    max-width: none !important;
    margin-top: 100px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__inside-wrapper {
    width: 100% !important;
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__input,
  .search .wp-block-search__input {
    height: 56px !important;
    font-size: 18px !important;
    padding: 0 24px !important;
    border-radius: 32px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .site-logo-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__button,
  .search .wp-block-search__button {
    width: 72px !important;
    height: 56px !important;
    min-width: 72px !important;
    flex: 0 0 72px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    margin-left: 0 !important;
  }

}

/* -------------------------------------------------------------------------- */
/* Mobile ≤767: ハンバーガーをビューポート固定（Tablet の absolute を上書き）      */
/* Tablet 768–1024 は上記 absolute + ヘッダー帯中央のまま変更しない              */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /*
   * ページ最上部の見え方は Tablet と同じく「ロゴと横一列・縦中央揃え」。
   * Tablet: position:absolute; top:50%; transform:translateY(-50%) on .site-logo-top
   * Mobile: 同じ初期位置を fixed の top で再現し、スクロール後もその画面座標に残す。
   * top はロゴ行（padding + ロゴ高さ）の縦中央から 34px ボタンを中心合わせする。
   * ロゴ幅 100px・アセット比（約418×155）→ 表示高 ≈ 37px。padding = spacing|30。
   */
  .site-logo-top .wp-block-navigation__responsive-container-open {
    --site-logo-top-pad-y: var(--wp--preset--spacing--30, 20px);
    --site-logo-display-h: 37px;
    --ham-size: 34px;

    position: fixed !important;
    top: calc(
      var(--site-logo-top-pad-y)
      + (var(--site-logo-display-h) / 2)
      - (var(--ham-size) / 2)
    );
    right: 12px;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: 99999;
  }

  /*
   * admin-bar（WP mobile: 46px）あり時も、ずらされたロゴ行と同じ高さへ。
   * stacking で admin bar 背面になるのを避け、かつロゴと横一列を維持。
   */
  body.admin-bar .site-logo-top .wp-block-navigation__responsive-container-open {
    top: calc(
      46px
      + var(--site-logo-top-pad-y)
      + (var(--site-logo-display-h) / 2)
      - (var(--ham-size) / 2)
    );
  }

}

/* -------------------------------------------------------------------------- */
/* Card（theme.json styles.css より複製・共通カードのみ）                        */
/* -------------------------------------------------------------------------- */

/*
 * カード一覧 → その一覧への CTA（View All 等）
 * blockGap(1.8rem)だけだと近すぎるため、直下 Buttons の margin-block-start で呼吸。
 * セレクタ: .card-grid.archive-grid 直後のみ（race-news / ENTRY / トピック群は除外）。
 * カード側 margin・CTA下（次セクション）・ボタン見た目は触らない。
 */
.content-body .wp-block-query.card-grid.archive-grid + .wp-block-buttons {
  margin-block-start: 40px !important;
  margin-top: 40px !important;
}

@media (min-width: 768px) {
  .content-body .wp-block-query.card-grid.archive-grid + .wp-block-buttons {
    margin-block-start: 48px !important;
    margin-top: 48px !important;
  }
}

@media (min-width: 1025px) {
  .content-body .wp-block-query.card-grid.archive-grid + .wp-block-buttons {
    margin-block-start: 56px !important;
    margin-top: 56px !important;
  }
}

.content-body .card-grid .wp-block-post-title,
.content-body .card-grid .wp-block-post-title a {
  font-size: 16px !important;
  line-height: 1.6 !important;
  line-break: loose;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: auto;
}

/*
 * 共通カードメタ（通常カード / ヒーロー / 関連・一覧）
 * 表示: ✎ 投稿者 ｜ カテゴリー ｜ YYYY.MM.DD（タイトル直下）
 */
.trails-card-meta {
  display: block;
  color: inherit;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.trails-card-meta a {
  color: inherit;
  text-decoration: none;
}

.trails-card-meta__sep {
  opacity: 0.7;
}

/* タイトル直後の余白は通常カードと同じ */
.card-grid .wp-block-post-date,
.card-grid .trails-card-meta,
.hero-carousel .trails-card-meta {
  margin-top: -8px !important;
  margin-bottom: -5px !important;
}

/* ヒーロー: メタは1系統。SP タイトル左右 20px に揃える */
.hero-carousel .trails-card-meta {
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 769px) {
  .hero-carousel .trails-card-meta {
    padding-left: 0;
    padding-right: 0;
  }
}

.archive-meta .trails-card-meta,
.issue-list-author-meta .trails-card-meta {
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Archive 左メタ欄（.archive-meta）
 * PC: ✎投稿者 / カテゴリー / 日付 の3行（｜なし）・row-gap で均等間隔
 * Mobile: ✎投稿者 ｜ カテゴリー ｜ 日付 の1行
 * 左カラム幅・中央・右は変更しない。
 */
@media (min-width: 769px) {
  .archive-meta .trails-card-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    /* 均等な行間。個別 margin に頼らない */
    row-gap: 7px !important;
    column-gap: 0 !important;
    gap: 7px !important;
  }

  /* block-gap / p margin / time 既定余白を無効化 */
  .archive-meta .trails-card-meta > *,
  .archive-meta .trails-card-meta a,
  .archive-meta .trails-card-meta time {
    margin: 0 !important;
    padding: 0 !important;
  }

  .archive-meta .trails-card-meta__sep {
    display: none !important;
  }

  .archive-meta .trails-card-meta__author,
  .archive-meta .trails-card-meta__cats,
  .archive-meta .trails-card-meta__date {
    display: flex !important;
    align-items: flex-start !important;
    font-size: inherit !important;
    /* 行高を揃え、間隔源は親の row-gap のみ */
    line-height: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .archive-meta .trails-card-meta__pencil {
    display: inline-block !important;
    line-height: 18px !important;
    font-size: 1em !important;
  }
}

/* SP: 通常カードメタからカテゴリーを非表示（ヒーローは除く） */
@media (max-width: 768px) {
  .trails-card-meta__sep:has(+ .trails-card-meta__cats),
  .trails-card-meta__cats,
  .trails-card-meta__cats + .trails-card-meta__sep {
    display: none !important;
  }

  .hero-carousel .trails-card-meta__sep:has(+ .trails-card-meta__cats),
  .hero-carousel .trails-card-meta__cats,
  .hero-carousel .trails-card-meta__cats + .trails-card-meta__sep {
    display: inline !important;
  }

  /* Archive 左メタは SP でも 投稿者｜カテゴリー｜日付 を維持 */
  .archive-meta .trails-card-meta {
    display: block !important;
  }

  .archive-meta .trails-card-meta__sep:has(+ .trails-card-meta__cats),
  .archive-meta .trails-card-meta__cats,
  .archive-meta .trails-card-meta__cats + .trails-card-meta__sep,
  .archive-meta .trails-card-meta__sep,
  .archive-meta .trails-card-meta__author,
  .archive-meta .trails-card-meta__date {
    display: inline !important;
  }
}

.archive-grid .wp-block-post-featured-image img {
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  width: 100% !important;
  display: block !important;
}

.archive-grid .wp-block-post-featured-image,
.card-grid .wp-block-post-featured-image {
  margin: 0 !important;
}

@media (max-width: 768px) {
  .archive-grid .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 4px !important;
    row-gap: 6px !important;
  }

  .content-body .archive-grid .wp-block-post-title,
  .content-body .archive-grid .wp-block-post-title a,
  .content-body .card-grid .wp-block-post-title,
  .content-body .card-grid .wp-block-post-title a {
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  .archive-grid .wp-block-post-date,
  .archive-grid .trails-card-meta,
  .card-grid .wp-block-post-date,
  .card-grid .trails-card-meta {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }

  /* 1/2カード: メタ下だけ広め（次カードの写真との分離） */
  .archive-grid .trails-card-meta,
  .archive-grid .wp-block-post-date {
    margin-bottom: 5px !important;
  }

    /* 追加 */
  .archive-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

    .archive-grid.is-layout-constrained {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .archive-grid.is-layout-flow {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
  }
}

@media (max-width: 768px) {
  .archive-grid .wp-block-post-title,
  .archive-grid .wp-block-post-date,
  .archive-grid .wp-block-post-author {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (min-width: 769px) {
  .card-grid .wp-block-post-title,
  .card-grid .wp-block-post-title a {
    font-size: 22px !important;
    line-height: 1.55 !important;
  }

  /*
   * ヒーロー記事タイトル: PC は h2 グローバル line-height:1.25 が効いて2行が詰まる。
   * Mobile（site.css max-width:768 / lh 1.5）は触らず、PC のみ通常カードと同水準 1.55 に。
   * font-size / margin は変更しない。
   */
  .hero-carousel .wp-block-post-title,
  .hero-carousel .wp-block-post-title a {
    line-height: 1.55 !important;
  }

  /* PC: アイキャッチ→タイトルを写真とひとまとまりに（メタとの間隔は変更しない） */
  .card-grid .wp-block-post-title,
  .hero-carousel .wp-block-post-title {
    margin-top: 12px !important;
  }
}

@media (max-width: 768px) {

  .archive-grid .wp-block-columns {
    display: block !important;
  }

  .archive-grid .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

}

/* -------------------------------------------------------------------------- */
/* Header shell（最前面。ロゴ幅は上の .site-logo-top ブロック側で指定）            */
/* -------------------------------------------------------------------------- */

.site-logo-top {
  position: relative !important;
  z-index: 9999 !important;
}

/* -------------------------------------------------------------------------- */
/* Footer｜サイト終端・本体（parts/footer.html = site-footer）                   */
/* コンテンツ終了 → 共通1px罫線 → Footer。page固有のFooter CSSは置かない。      */
/* -------------------------------------------------------------------------- */

/*
 * main 終端 → Footer 上罫線
 * root blockGap(1.8rem) の兄弟 margin を上書きし、PC56 / SP40 に統一。
 */
.wp-site-blocks > footer.wp-block-template-part,
footer.wp-block-template-part {
  margin-block-start: 56px !important;
  margin-top: 56px !important;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .wp-site-blocks > footer.wp-block-template-part,
  footer.wp-block-template-part {
    margin-block-start: 40px !important;
    margin-top: 40px !important;
  }
}

/* 外側 group：背景はサイト共通のまま。左右は global padding に従う */
.site-footer {
  margin-top: 0 !important;
  border-top: 0 !important; /* 罫線は template-part 側（1回だけ） */
  /* 上罫線 → タグライン：従来 30px(spacing|40) から +18 → 48px */
  padding-top: 48px !important;
}

/* Footer ロゴ：Header（.site-logo-top）と 100px で統一 */
.site-footer .wp-block-site-logo {
  width: 100px !important;
  max-width: 100px !important;
}

.site-footer .wp-block-site-logo a,
.site-footer .wp-block-site-logo img,
.site-footer .custom-logo {
  width: 100px !important;
  max-width: 100px !important;
  height: auto !important;
}

/* 内側：一律 blockGap を切り、要素間は個別に制御 */
.site-footer .site-footer__inner,
.site-footer__inner {
  gap: 0 !important;
  row-gap: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* タグライン：font/size は従来どおり */
.site-tagline {
  font-family: "Playwrite GB J" !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.3 !important;
}

.site-footer .site-tagline,
.site-footer .wp-block-site-tagline {
  margin: 0 0 40px 0 !important;
  text-align: center !important;
}

.site-footer .wp-block-site-logo {
  margin: 0 0 9px 0 !important;
  line-height: 0 !important;
}

.site-footer .site-footer__copy {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* ABOUT ｜ CONTACT（Footer 専用。グローバル nav には追加しない） */
.site-footer .site-footer__nav {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  color: inherit !important;
}

.site-footer .site-footer__nav a {
  color: inherit !important;
  text-decoration: none !important;
}

.site-footer .site-footer__nav a:hover,
.site-footer .site-footer__nav a:focus-visible {
  color: var(--wp--preset--color--accent-3, #503aa8) !important;
  text-decoration: none !important;
}

/* SNS：黒ベタ正円・白抜き・やや小さめ */
.site-footer .site-footer__social.wp-block-social-links,
.site-footer .wp-block-social-links.site-footer__social {
  margin: 0 !important;
  padding: 0 !important;
  gap: 9px !important;
  --wp--style--block-gap: 9px !important;
  justify-content: center !important;
}

.site-footer .site-footer__social .wp-social-link {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #000 !important;
  color: #fff !important;
}

.site-footer .site-footer__social .wp-social-link a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  color: #fff !important;
}

.site-footer .site-footer__social .wp-social-link svg {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* 終端の偶発的な空ボックス整理（本文デザイン・意図的余白は触らない）            */
/* -------------------------------------------------------------------------- */

/*
 * 1ページのみ等で pagination ブロック自体が出力されず、
 * pt/pb だけの空 group が残る場合は隠す（magazine 行一覧・固定一覧など）。
 */
.wp-block-query > .wp-block-group:not(:has(*)),
.wp-block-query > .wp-block-group:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* pagination ありだが prev/next/数字が一切ないときも同様 */
.wp-block-query > .wp-block-group:has(> .wp-block-query-pagination):not(:has(.wp-block-query-pagination a)):not(:has(.wp-block-query-pagination .page-numbers)) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/*
 * 最終コントロール → Footer 罫線が 56/40 に近づくよう、
 * pagination ラップの下方向 padding のみゼロ（上 padding は一覧との間に維持）。
 */
.wp-block-query > .wp-block-group:has(> .wp-block-query-pagination) {
  padding-bottom: 0 !important;
}

/* Query 直後の 0 高さ spacer（blockGap だけ残るものを落とす） */
.wp-block-query > .wp-block-spacer[style*="height:0"],
.wp-block-query > .wp-block-spacer[style*="height: 0"] {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
}

/* 一覧最終行の下 margin（行間用）が Footer 直前に残らないようにする */
.wp-block-post-template > .wp-block-post:last-child > .wp-block-columns {
  margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 関連記事リスト .post-more-list（theme.json styles.css より複製）              */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .post-more-list {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .post-more-list > .wp-block-post-title {
    width: 100% !important;
    margin: 0 !important;
  }

  .post-more-list > .wp-block-post-date {
    width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }
}

@media (max-width: 768px) {

  .post-more-list .wp-block-post-title {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }

}

/* -------------------------------------------------------------------------- */
/* ページタイトル共通（.page-heading）                                             */
/* Archive/List・page-no-title 冒頭見出しなど。幅は各テンプレの layout に従う。    */
/* 注: .page-title は main / 入口（Playwrite 大見出し）用のため別名を採用。       */
/* .list-page-title は後方互換のエイリアス。                                      */
/* -------------------------------------------------------------------------- */

.page-heading,
.list-page-title {
  font-size: 30px !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 29px !important;
  /* main.page-title h1（入口 Playwrite）との競合を避ける */
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-align: start !important;
  text-transform: none !important;
}

/* 本文 h2 規格（content-body）よりページ見出しが優先 */
.content-body h2.page-heading,
.content-body h2.list-page-title,
.content-body .page-heading.wp-block-heading,
.content-body .list-page-title.wp-block-heading {
  font-size: 30px !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 29px !important;
  font-weight: 700 !important;
}

/*
 * page-no-title 冒頭帯:
 * - SP の .content-top-space { margin-top: 101px } を無効化し
 * - Archive の main 上余白（約 1.8rem）に揃える
 */
main.page-title > .content-body > .content-top-space:has(.page-heading),
main.page-title > .content-body > .content-top-space:has(.list-page-title) {
  margin-top: 1.8rem !important;
}

@media (max-width: 768px) {

  .page-heading,
  .list-page-title,
  .content-body h2.page-heading,
  .content-body h2.list-page-title,
  .content-body .page-heading.wp-block-heading,
  .content-body .list-page-title.wp-block-heading {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

}

/* -------------------------------------------------------------------------- */
/* 一覧メタ .archive-meta（theme.json styles.css より複製）                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .archive-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
  }

  .archive-meta > * {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

}

@media (max-width: 768px) {

  .archive-meta {
    margin-bottom: 5px !important;
  }

}

/* -------------------------------------------------------------------------- */
/* 検索結果タイトル（theme.json styles.css より複製）                            */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .search h1,
  .search .wp-block-query-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Pagination 正円（共通）                                                       */
/* Archive/List Query Pagination と Article 改ページ（wp_link_pages）を共有。    */
/* 直径は桁数で変えない。2桁前提。3桁は円を大きくせず収まる範囲で許容。          */
/* -------------------------------------------------------------------------- */

.wp-block-query-pagination,
.article-page-links {
  --trails-pag-size: 40px;
  --trails-pag-font: 12px;
  --trails-pag-purple: var(--wp--preset--color--accent-3, #503aa8);
  --trails-pag-gap: 12px;
}

@media (max-width: 768px) {
  .wp-block-query-pagination,
  .article-page-links {
    --trails-pag-size: 34px;
    --trails-pag-font: 12px;
    --trails-pag-gap: 6px;
  }
}

/* 正円セル：番号 / Archive Prev·Next */
.wp-block-query-pagination .page-numbers:not(.dots),
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.article-page-links .post-page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: var(--trails-pag-size) !important;
  height: var(--trails-pag-size) !important;
  min-width: var(--trails-pag-size) !important;
  min-height: var(--trails-pag-size) !important;
  max-width: var(--trails-pag-size) !important;
  max-height: var(--trails-pag-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--trails-pag-purple) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--trails-pag-purple) !important;
  font-size: var(--trails-pag-font) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

/* 現在ページ：紫ベタ / 白抜き / 同じ文字サイズ */
.wp-block-query-pagination .page-numbers.current,
.article-page-links .post-page-numbers.current {
  background: var(--trails-pag-purple) !important;
  border-color: var(--trails-pag-purple) !important;
  color: #fff !important;
  font-size: var(--trails-pag-font) !important;
  font-weight: 500 !important;
  cursor: default !important;
}

/* ホバー（リンクのみ） */
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination a.page-numbers:focus-visible,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-next:focus-visible,
.article-page-links a.post-page-numbers:hover,
.article-page-links a.post-page-numbers:focus-visible {
  background: color-mix(in srgb, var(--trails-pag-purple) 8%, transparent) !important;
}

/* 省略記号 …：円にしない */
.wp-block-query-pagination .page-numbers.dots,
.article-page-links .post-page-numbers.dots {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--trails-pag-size) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 2px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--trails-pag-purple) 70%, transparent) !important;
  font-size: var(--trails-pag-font) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

/* -------------------------------------------------------------------------- */
/* Archive/List Query Pagination（レイアウト・Prev/Next）                        */
/* -------------------------------------------------------------------------- */

.wp-block-query-pagination {
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.wp-block-query-pagination-numbers {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--trails-pag-gap) !important;
}

/*
 * Previous / Next: ラベル文を消し矢印のみ。
 * 構造: 新しい投稿<span class="…-arrow">←</span>
 */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: nowrap !important;
}

.wp-block-query-pagination-previous .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next .wp-block-query-pagination-next-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .wp-block-query-pagination {
    gap: 12px !important;
    justify-content: center !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Article 改ページ（wp_link_pages）— 配置のみ。正円見た目は共通ルール。          */
/* -------------------------------------------------------------------------- */

.article-page-links {
  gap: var(--trails-pag-gap) !important;
}

/* -------------------------------------------------------------------------- */
/* FAQ（共通コンポーネント）                                                      */
/*
 * 紙面的な Q/A。カード・角丸・影・Accordion・JS なし。
 * セクション全体は通常本文幅。Q/A 円だけが質問・回答本文の左へ飛び出す。
 * 罫線は通常本文の左右端まで（#8d7ac8 = Race LP download-nav / SCHEDULE と同系）。
 */
/* -------------------------------------------------------------------------- */

.faq-list {
  --faq-mark-size: 36px;
  --faq-mark-gap: 12px;
  --faq-text-indent: calc(var(--faq-mark-size) + var(--faq-mark-gap));
  --faq-rule: #8d7ac8;
  --faq-q-bg: var(--wp--preset--color--accent-3, #503aa8);
  --faq-a-bg: var(--wp--preset--color--contrast, #111111);
  --faq-mark-fg: var(--wp--preset--color--base, #ffffff);
  /* 独自狭幅にしない。親 / constrained の contentSize（760）に従う */
  box-sizing: border-box;
}

@media (max-width: 1024px) and (min-width: 768px) {
  .faq-list {
    --faq-mark-size: 34px;
    --faq-mark-gap: 11px;
  }
}

@media (max-width: 767px) {
  .faq-list {
    --faq-mark-size: 30px;
    --faq-mark-gap: 8px;
  }
}

.faq-list > .faq-category,
.faq-list > h3.faq-category {
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}

.faq-list > .faq-category:first-of-type,
.faq-list > h3.faq-category:first-of-type {
  margin-top: 2.25rem;
}

.faq-item {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  /* 通常本文幅いっぱい（contentSize）。左右へはみ出さない */
  border-bottom: 1px solid var(--faq-rule);
  margin: 0;
  padding: 1rem 0 1.05rem;
  box-sizing: border-box;
}

/* item 内の Q/A 行は item 幅いっぱいにする（item 自体は contentSize 維持） */
.faq-item > .faq-question,
.faq-item > .faq-answer {
  max-width: none;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--faq-rule);
}

/*
 * Q/A 行: 丸は通常本文左端、質問・回答本文だけ丸分右へ。
 * セクション全体を右インデントしない。
 */
.faq-question,
.faq-answer {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  margin: 0;
  max-width: none;
  width: 100%;
  align-items: flex-start;
  box-sizing: border-box;
}

.faq-question {
  margin-bottom: 0.7rem;
}

.faq-answer {
  margin-bottom: 0;
}

.faq-list .faq-question.is-layout-flex,
.faq-list .faq-answer.is-layout-flex {
  gap: var(--faq-mark-gap);
  flex-wrap: nowrap;
}

.faq-mark {
  flex: 0 0 var(--faq-mark-size);
  box-sizing: border-box;
  width: var(--faq-mark-size);
  height: var(--faq-mark-size);
  min-width: var(--faq-mark-size);
  min-height: var(--faq-mark-size);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--faq-mark-fg);
  text-align: center;
  padding-top: 0.05em;
}

.faq-mark.is-q {
  background: var(--faq-q-bg);
}

.faq-mark.is-a {
  background: var(--faq-a-bg);
}

.faq-list .faq-question > p:not(.faq-mark),
.faq-list .faq-answer > p:not(.faq-mark),
.faq-list .faq-question-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.faq-list .faq-question > p:not(.faq-mark),
.faq-list .faq-question-text {
  font-weight: 600;
  font-size: 1em;
  line-height: 1.55;
}

/*
 * 回答: Race LP 読み物本文に整合。情報量のため PC は 19px / 1.6。
 * Mobile は body 流体サイズを維持。
 */
@media (min-width: 768px) {
  .faq-list .faq-answer > p:not(.faq-mark) {
    font-size: 19px;
    line-height: 1.6;
  }

  .faq-list .faq-question > p:not(.faq-mark),
  .faq-list .faq-question-text {
    font-size: 19px;
    line-height: 1.55;
  }
}

@media (max-width: 767px) {
  .faq-item {
    padding-top: 0.9rem;
    padding-bottom: 0.95rem;
  }

  .faq-question {
    margin-bottom: 0.6rem;
  }

  .faq-mark {
    font-size: 0.75rem;
  }

  .faq-list > .faq-category,
  .faq-list > h3.faq-category {
    margin-top: 2.25rem;
  }
}

/* FAQ 後の問い合わせ導線（見出しなし・mailto。フォームは作らない） */
.faq-contact-followup {
  margin-top: 2.5rem;
}

.faq-contact-followup .wp-block-buttons {
  margin-top: 1.25rem;
}