/* =====================================================
   INTERESTING INNOVATION - BLOG DETAIL（ブログ詳細）
   style.css → sub.css → blog.css（記事カード）の後に読み込む
   見出し帯は sub.css の .page-head--thin（帯 144px）。記事は幅 1025 の中央 1 カラム。
   Helvetica Now Text（Prev / Next / Back to List）は Helvetica Neue（.en）で代用。
   基準幅: PC 1920 / TB 768 / SP 393（1rem = 基準幅で 10px）
   ===================================================== */

/* ---------- 記事ヘッダー（Blog 40px + 挑戦日記） ---------- */
.bd-head { display: flex; align-items: center; gap: 1.2rem; width: 102.5rem; margin: 26.1rem auto 0; }
.bd-head__en { font-size: 4rem; font-weight: 500; line-height: 1; letter-spacing: -.05em; color: var(--text); } /* Figma: baseStyle/#21 */
.bd-head__ja { padding-top: .4rem; font-size: 1.4rem; font-weight: 700; line-height: 1; }

.bd__inner { width: 102.5rem; margin: 2.5rem auto 0; }

/* ---------- タイトル / メタ / メイン画像 ---------- */
.bd-hero__ttl { font-size: 3.2rem; font-weight: 500; line-height: 1.6; }
.bd-hero__meta { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-top: 3.2rem; }
.bd-hero__tags li { padding: .8rem 2.4rem; font-size: 1.2rem; }
.bd-hero__date { flex: none; font-size: 1.6rem; font-weight: 400; letter-spacing: .05em; line-height: 1; }
.bd-hero__img { margin-top: 6.4rem; aspect-ratio: 1025 / 685; border-radius: .5rem; overflow: hidden; background: #000; }
.bd-hero__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 本文（見出し + 段落 × n） ---------- */
.bd-body { margin-top: 6.4rem; }
.bd-sec + .bd-sec { margin-top: 6.4rem; }
.bd-sec__h { padding: .8rem 0 .8rem 3.2rem; border-left: .8rem solid var(--orange); font-size: 3.2rem; font-weight: 500; line-height: 1.5; color: var(--text); } /* Figma: 左罫線 8px。色は IIColor/main */
.bd-sec__p { margin-top: 4rem; font-size: 1.6rem; font-weight: 400; line-height: 2.4; color: var(--text); overflow-wrap: anywhere; }
.bd-sec__p + .bd-sec__p { margin-top: 1.4em; } /* 見出しのない段落どうしは 1 行分 */

/* ---------- Prev / Back to List / Next ---------- */
.bd-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 9.6rem; }
.bd-nav__btn { display: flex; align-items: center; justify-content: center; gap: 3.2rem; width: 24rem; height: 6.4rem; padding: 0 4rem; background: var(--orange); color: #fff; border-radius: 10rem; font-size: 2rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .3s; }
.bd-nav__btn:hover { background: var(--black); }
.bd-nav__arrow { display: block; width: 3.2rem; height: .8rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1; overflow: visible; }
.bd-nav__btn--prev .bd-nav__arrow { transform: scaleX(-1); }

/* ---------- Latest Post ---------- */
.bd-latest { margin-top: 24rem; padding: 0 20rem; }
.bd-latest__head { display: flex; align-items: center; gap: 2.4rem; margin-left: -.4rem; }
.bd-latest__en { font-size: 4.8rem; font-weight: 700; line-height: 1; color: var(--orange); }
.bd-latest__ja { font-size: 2rem; font-weight: 600; line-height: 1; }
.bd-latest__grid { margin-top: 5.5rem; }

/* =====================================================
   TB / SP 共通（〜1199px）
   ===================================================== */
@media (max-width: 1199px) {
  .page-blog-detail .page-head--thin { height: var(--band); padding: 0; } /* 帯の中に見出しが無いので帯の高さだけ確保 */

  .bd-head { width: auto; gap: 1rem; margin: 3.2rem var(--pad-x) 0; }
  .bd-head__en { font-size: 2.8rem; }
  .bd-head__ja { padding-top: .3rem; font-size: 1.2rem; }
  .bd__inner { width: auto; margin: 1.6rem var(--pad-x) 0; }

  .bd-hero__ttl { font-size: 2rem; }
  .bd-hero__meta { margin-top: 1.6rem; }
  .bd-hero__tags li { padding: .5rem 1.4rem; font-size: 1rem; }
  .bd-hero__date { font-size: 1.3rem; }
  .bd-hero__img { margin-top: 2.4rem; }

  .bd-body { margin-top: 3.2rem; }
  .bd-sec + .bd-sec { margin-top: 4rem; }
  .bd-sec__h { padding: .4rem 0 .4rem 1.6rem; border-left-width: .5rem; font-size: 1.8rem; }
  .bd-sec__p { margin-top: 2rem; font-size: 1.5rem; line-height: 2; }

  .bd-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 4.8rem; }
  .bd-nav__btn { width: auto; height: 4.8rem; padding: 0 2rem; gap: 1.6rem; font-size: 1.5rem; }
  .bd-nav__btn--prev { grid-column: 1; grid-row: 1; }
  .bd-nav__btn--next { grid-column: 2; grid-row: 1; }
  .bd-nav__btn--list { grid-column: 1 / -1; grid-row: 2; justify-self: center; min-width: 20rem; }
  .bd-nav__arrow { width: 2.4rem; height: .6rem; }

  .bd-latest { margin-top: 6.4rem; padding: 0 var(--pad-x); }
  .bd-latest__head { gap: 1.6rem; margin-left: 0; }
  .bd-latest__en { font-size: 3.2rem; }
  .bd-latest__ja { font-size: 1.3rem; }
  .bd-latest__grid { margin-top: 2.4rem; }
}

/* =====================================================
   TB のみ（768〜1199px）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .bd-head { margin-top: 4.8rem; }
  .bd-head__en { font-size: 3.6rem; }
  .bd-head__ja { font-size: 1.4rem; }
  .bd__inner { margin-top: 2.4rem; }

  .bd-hero__ttl { font-size: 2.8rem; }
  .bd-hero__meta { margin-top: 2.4rem; }
  .bd-hero__tags li { padding: .6rem 1.8rem; font-size: 1.1rem; }
  .bd-hero__date { font-size: 1.5rem; }
  .bd-hero__img { margin-top: 4rem; }

  .bd-body { margin-top: 4.8rem; }
  .bd-sec + .bd-sec { margin-top: 5.6rem; }
  .bd-sec__h { padding: .6rem 0 .6rem 2.4rem; border-left-width: .6rem; font-size: 2.4rem; }
  .bd-sec__p { margin-top: 2.8rem; font-size: 1.7rem; line-height: 2.2; }

  .bd-nav { display: flex; justify-content: space-between; margin-top: 7.2rem; }
  .bd-nav__btn { width: 20rem; height: 5.6rem; gap: 2.4rem; font-size: 1.7rem; }
  .bd-nav__btn--list { min-width: 0; }

  .bd-latest { margin-top: 10rem; }
  .bd-latest__en { font-size: 4rem; }
  .bd-latest__ja { font-size: 1.7rem; }
  .bd-latest__grid { margin-top: 3.2rem; }
}
@media (max-width: 1199px) { .bd { padding-top: 4rem; } } /* TB/SP: ヘッダー（見出し帯）とタイトルのあいだに余白 */
/* SP: Prev / Back to List / Next を横 1 列に */
@media (max-width: 767px) {
  .bd-nav { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  .bd-nav__btn--prev, .bd-nav__btn--next, .bd-nav__btn--list { grid-row: 1; }
  .bd-nav__btn--prev { grid-column: 1; } .bd-nav__btn--list { grid-column: 2; min-width: 0; justify-self: stretch; } .bd-nav__btn--next { grid-column: 3; }
  .bd-nav__btn { height: 4.4rem; padding: 0 1.2rem; gap: .6rem; font-size: 1.3rem; white-space: nowrap; }
  .bd-nav__arrow { width: 1.6rem; }
}