@charset "UTF-8";
/* =========================================================================
   blog-post.css — Blog Post（Figma 実体フレーム 16069:21525・1440×4229）
   縦方向はローカル差（次要素Y −（前要素Y＋高さ））で積む。値は Figma px ÷ 10 = rem。
   ========================================================================= */

/* ---------- 記事ヒーロー（1420×498.25・hero-bg.svg＝紺＋曲線＋角丸13込み） ---------- */
.post-hero {
  position: relative; z-index: 1;               /* 下の白い本文エリアより前面（写真が白地にはみ出す） */
  width: 142rem; height: 49.825rem; margin: 1rem auto 0;
  background: url("../img/blog-post/hero-bg.svg") center / 100% 100% no-repeat;
  border-radius: 1.3rem;
}
.post-hero__body { padding-left: 17.5rem; }
.post-hero__date {
  margin-top: 9.1rem;                              /* ヘッダー下端 95 → 日付 186 */
  font-size: 1.4rem; line-height: 1.6rem; font-weight: 500; color: var(--color-primary-400);
}
.post-hero__title {
  width: 45.24rem; margin-top: 1.7rem;             /* 日付 186+16 → 見出し 219 */
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; color: var(--color-neutral-100);
}
.post-hero__lead {
  width: 46.94rem; margin-top: 1.208rem;           /* 363 → 375.08 */
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-on-dark);
}
.post-hero__photo {
  position: absolute; left: 72.46rem; top: 14.515rem;   /* page (735.16,155.15) − hero (10.56,10) */
  width: 52.034rem; height: 44.585rem;
  border-radius: var(--radius-card); overflow: hidden;
}
.post-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 白いピルのタグ（Treatments / カテゴリ）：14/16 Medium・#1d273f・角丸6・高さ33 */
.post-tag {
  position: absolute; display: flex; align-items: center;
  padding: 0.85rem 1.3rem; background: var(--color-neutral-100); border-radius: 0.6rem;
  font-size: 1.4rem; line-height: 1.6rem; font-weight: 500; color: var(--color-neutral-800);
  white-space: nowrap; text-align: right;
}
.post-hero__tag { top: 1.385rem; right: 1.383rem; }

/* ---------- 白い本文エリア（y=279.39〜2915・1440幅・角丸なし） ---------- */
.post-main {
  margin-top: -22.886rem;                          /* ヒーロー下端 508.25 → 白地の上端 279.39 */
  padding: 39.15rem 0 12rem;                       /* 白地上端 → 著者欄 670.89 ／ 本文末 2795 → 2915 */
  background: var(--color-neutral-100);
}
.post-main > * { width: 107rem; margin-inline: auto; }

.post-intro { display: flex; align-items: flex-start; }
.post-author { display: flex; align-items: flex-start; width: 50rem; flex-shrink: 0; }
.post-author__img { width: 6rem; height: 6rem; border-radius: 50%; }
.post-author__text { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.9rem 0 0 1.4rem; font-weight: 500; }
.post-author__label { font-size: 1.4rem; line-height: 1.6rem; color: var(--color-neutral-400); }
.post-author__name { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-neutral-800); }
.post-quote { width: 55.362rem; margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; color: var(--color-neutral-800); }

.post-rule {                                       /* Line 11：1070×1・#D1D9E7・不透明度0.5 */
  height: 0; margin-top: 6.19rem; margin-bottom: 0;
  border: 0; border-top: 1px solid rgba(209, 217, 231, 0.5);
}

.post-columns { display: flex; align-items: flex-start; margin-top: 6.989rem; }

/* 左：Recent articles */
.post-recent { width: 50rem; flex-shrink: 0; }
.post-recent__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; color: var(--color-neutral-800); }
.post-recent__list { display: flex; flex-direction: column; gap: 2.6rem; margin-top: 1.6rem; }
.recent-item { display: flex; align-items: flex-start; gap: 1.6rem; }
.recent-item__img { width: 8.5771rem; height: 8.5771rem; border-radius: 0.8rem; flex-shrink: 0; object-fit: cover; }
.recent-item__text { display: flex; flex-direction: column; width: 18.21rem; min-height: 8.5771rem; font-weight: 500; }
.recent-item__text--wide { width: 21.3rem; }
.recent-item__title { font-size: 1.8rem; line-height: 1.8rem; font-weight: 500; color: var(--color-neutral-800); }
.recent-item__title a:hover { color: var(--color-primary-400); }
.recent-item__date { margin-top: auto; font-size: 1.4rem; line-height: 1.6rem; color: var(--color-primary-400); }

/* 右：記事本文（見出し 36→36→24→22→20→18→16） */
.post-article { width: 56.91rem; }
.post-sec + .post-sec { margin-top: 3.2rem; }
.post-h { width: 55.362rem; font-weight: 500; color: var(--color-neutral-800); }
.post-h--36 { font-size: 3.6rem; line-height: 3.8rem; }
.post-h--24 { font-size: 2.4rem; line-height: 3rem; }
.post-h--22 { font-size: 2.2rem; line-height: 2.6rem; }
.post-h--20 { font-size: 2rem; line-height: 2.5rem; }
.post-h--18 { font-size: 1.8rem; line-height: 1.8rem; }
.post-h--16 { font-size: 1.6rem; line-height: 1.8rem; }
.post-p {
  width: 56.783rem; margin: 0.8rem 0 0 0.127rem;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text);
}
.post-h--24 + .post-p { margin-top: 0.817rem; }
.post-figure { width: 56.91rem; height: 34.415rem; margin-top: 3.7rem; border-radius: var(--radius-card); overflow: hidden; }
.post-figure img { width: 100%; height: 100%; object-fit: cover; }
.post-sec--after-figure { margin-top: 4.3rem; }

/* ---------- Latest articles（ページ地色） ---------- */
.latest { width: 107rem; margin: 11.857rem auto 0; }
.latest__head { display: flex; align-items: flex-start; justify-content: space-between; }
.latest__title { width: 41.78rem; }
.latest__head .btn { margin-top: 0.3rem; }
.latest__list { display: flex; gap: 3rem; margin-top: 2.443rem; }

/* 横長の記事カード（Group 15651:1125 / 1126・520×300・白・角丸16） */
.post-card { position: relative; width: 52rem; height: 30rem; flex-shrink: 0; background: var(--color-neutral-100); border-radius: var(--radius-card); }
.post-card__img { position: absolute; left: 1.362rem; top: 1.185rem; width: 24.8826rem; height: 27.6303rem; border-radius: 1.4rem; overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.post-card__tag { top: 1.425rem; right: 1.4rem; }
.post-card__body { position: absolute; left: 28.7rem; top: 4.527rem; width: 21.3rem; }
.post-card__title { font-size: 1.8rem; line-height: 1.8rem; font-weight: 500; color: var(--color-neutral-800); }
.post-card__title a:hover { color: var(--color-primary-400); }
.post-card__excerpt { margin-top: 0.673rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); }
.post-card__author { position: absolute; left: 0; top: 19.038rem; display: flex; align-items: flex-start; gap: 0.804rem; }  /* 235.65 − 45.27 */
.post-card__author img { width: 4rem; height: 4rem; border-radius: 50%; }
.post-card__author p { display: flex; flex-direction: column; padding-top: 0.051rem; font-size: 1.4rem; font-weight: 500; white-space: nowrap; }
.post-card__name { line-height: 2.2rem; color: var(--color-neutral-800); }
.post-card__date { line-height: 1.6rem; color: var(--color-neutral-400); }

/* フッター：カード下端 3406 → フッター 3526 */
main + .site-footer { margin-top: 12rem; }

/* =========================================================================
   SP（<1024px）— SP カンプなし：index の SP 規約に合わせた1カラム
   ========================================================================= */
@media (max-width: 1023px) {
  .post-hero { width: auto; height: auto; margin: 0.8rem 1.2rem 0; padding-bottom: 3.2rem; background: var(--color-neutral-800) url("../img/blog-post/hero-bg.svg") center top / cover no-repeat; }
  .post-hero .site-header { margin-inline: 1.6rem; }
  .post-hero__body { max-width: 72rem; margin-inline: auto; padding: 0 1.6rem; }
  .post-hero__date { margin-top: 3.2rem; }
  .post-hero__title { width: auto; margin-top: 1.2rem; }
  .post-hero__lead { width: auto; margin-top: 1.2rem; }
  .post-hero__photo { position: relative; left: auto; top: auto; width: auto; max-width: 52rem; height: auto; aspect-ratio: 520.339 / 445.848; margin: 2.4rem 1.6rem 0; }
  @supports (margin-inline: max(1px, 2px)) {
    .post-hero__photo { margin-inline: max(1.6rem, calc((100% - 52rem) / 2)); }
  }

  .post-main { margin-top: 0; padding: 4.8rem var(--sp-inset) var(--space-section); }
  .post-main > * { width: auto; }
  .post-intro { flex-direction: column; gap: 2.4rem; }
  .post-author { width: auto; }
  .post-quote { width: auto; font-size: 2rem; line-height: 2.6rem; }
  .post-rule { margin-top: 3.2rem; }
  .post-columns { flex-direction: column; margin-top: 3.2rem; }
  .post-recent { order: 2; width: 100%; margin-top: 4.8rem; }
  .recent-item__text, .recent-item__text--wide { width: auto; flex: 1; min-width: 0; }
  .recent-item__date { margin-top: 1.2rem; }
  .post-article { width: 100%; }
  .post-h, .post-p { width: auto; }
  .post-p { margin-left: 0; }
  .post-h--36 { font-size: 2.8rem; line-height: 3.2rem; }
  .post-figure { width: 100%; height: auto; aspect-ratio: 569.104 / 344.152; }

  .latest { width: auto; margin: var(--space-section) var(--sp-inset) 0; }
  .latest__head { flex-direction: column; gap: 2rem; }
  .latest__title { width: auto; }
  .latest__head .btn { margin-top: 0; }
  .latest__list { flex-direction: column; gap: 1.6rem; margin-top: 2.4rem; }
  .post-card { width: 100%; height: auto; padding: 1.2rem 1.2rem 2rem; }
  /* Figma's forced line breaks are for PC width → wrap naturally on SP (a space is placed before each <br> in the HTML) */
  .recent-item__title br, .post-card__title br { display: none; }
  .recent-item__title, .post-card__title { line-height: 2.4rem; }
  .post-card__img { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .post-card__body { position: static; width: auto; padding: 2rem 0.8rem 0; }
  .post-card__author { position: static; margin-top: 2rem; }

  main + .site-footer { margin-top: var(--space-section); }
}

/* Tablet (600–1023px): Latest articles in 2 columns (same layout as blog) */
@media (min-width: 600px) and (max-width: 1023px) {
  .latest__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
}