/* template-parts/route-single.php（ツーリングルート記事）
   上部の写真の帯（ヒーロー）は置かず、タイトル → アイキャッチ → 目次 → 本文 の順に並べます。
   本文（.kbt-post__body）の幅 900px にそろえます。
   SWELL・mock.css の指定は @layer の中にあるので、ここはレイヤーの外に書いています。 */

/* ページの上の余白：サイト共通の帯の余白（112px／900px以下は72px）の約1/3 */
.site-main > section.kbt-post--route{ padding-top: 38px; }

.kbt-post--route .kbt-post__head{ max-width: 900px; margin: 0 auto 32px; }
.kbt-post--route .kbt-post__crumb{ color: var(--muted); margin: 0 0 18px; }
.kbt-post--route .kbt-post__crumb a{ color: var(--muted); }
.kbt-post--route .kbt-post__title{
  margin: 0;
  font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; color: var(--ink);
}

/* アイキャッチ（本文の中に同じ写真がないときだけ出します） */
.kbt-post--route .kbt-post__eyecatch{ max-width: 900px; margin: 0 auto 40px; }
.kbt-post--route .kbt-post__eyecatch img{ display: block; width: 100%; height: auto; }
.kbt-post--route .kbt-post__eyecatch figcaption{ margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }

/* 幅をそろえる：本文の中身（写真・文・見出し・目次）は、本文の枠 900px の内側の余白（SWELL の --swl-pad_post_content、16px）の内側に並びます。
   タイトル・道しるべ・アイキャッチも同じ余白を付け、SWELL では左右にはみ出す大見出し（h2）と、幅を絞る目次も、同じ幅にそろえます */
.kbt-post--route .kbt-post__head,
.kbt-post--route .kbt-post__eyecatch{
  box-sizing: border-box;
  padding-left: var(--swl-pad_post_content, 16px);
  padding-right: var(--swl-pad_post_content, 16px);
}
.kbt-post--route .kbt-post__body > h2{ margin-left: 0; margin-right: 0; }
.kbt-post--route .kbt-post__body .p-toc{ width: auto; max-width: none; margin-left: 0; margin-right: 0; }

@media (max-width: 900px){
  .site-main > section.kbt-post--route{ padding-top: 24px; }
  .kbt-post--route .kbt-post__head{ margin-bottom: 22px; }
  .kbt-post--route .kbt-post__title{ font-size: 25px; }
  .kbt-post--route .kbt-post__eyecatch{ margin-bottom: 28px; }
}

/* 「走り方は3通り」の料金の行：金額の部分は太字のまま（後ろの小さな文だけ mock.css の .w3 .pr span で薄くします） */
.w3 .pr .pr__main{ font-weight: inherit; font-size: inherit; opacity: 1; margin-left: 0; }