@charset "UTF-8";
/* =========================================================================
   blog.css — Blog V1（Figma 実体フレーム 16069:20752・1440×3215）
   縦方向はローカルギャップ（次要素Y −（前要素Y＋高さ））で積む。
   ========================================================================= */

/* ページ固有トークン（Figma 裸値・役割名） */
:root {
  --fs-tag-filter: 1.8rem; --lh-tag-filter: 1.8rem;       /* カテゴリタグ Medium 18/18 */
  --fs-news-label: 2.4rem; --lh-news-label: 3rem;         /* 「Subscribe to our newsletter」Medium 24/30 */
  --shadow-page-arrow: 0 0.2rem 0.6rem rgba(29, 39, 63, 0.1); /* ページ送りボタン（Figma 描画の影） */
}

/* ---------- ヒーロー（1420×522.359・top 10。hero-bg.svg＝紺＋曲線＋角丸13込み） ---------- */
.blog-hero {
  position: relative; width: 142rem; height: 52.2359rem; margin: 1rem auto 0;
  background: url("../img/blog/hero-bg.svg") center / 100% 100% no-repeat;
  border-radius: 1.3rem;
}
.blog-hero__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.blog-hero__title { width: 62.6262rem; margin-top: 5.7rem; }      /* ヘッダー下端 95 → 152 */
.blog-hero__desc { width: 59.35rem; margin-top: 0.9rem; color: var(--color-text-on-dark); }  /* 214 → 223 */
.blog-hero__tags { margin-top: 2.456rem; }                        /* 271 → 295.56 */

/* カテゴリタグ（h40・pad 12/13・角丸10・gap 12） */
.blog-tags { display: flex; align-items: center; gap: 1.2rem; }
.blog-tag {
  display: flex; align-items: center; height: 4rem; padding: 1.2rem 1.3rem; border-radius: 1rem;
  background: var(--color-neutral-100); color: var(--color-neutral-800);
  font-size: var(--fs-tag-filter); line-height: var(--lh-tag-filter); font-weight: 500; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.blog-tag:hover { color: var(--color-primary-400); }
.blog-tag.is-active { background: var(--color-primary-400); color: var(--color-neutral-100); }

/* ---------- 注目記事（381.93 = パネル下端 532.359 − 150.429。カード間 21.475） ---------- */
.blog-featured {
  position: relative; display: flex; gap: 2.1475rem;
  width: 106.9765rem; margin: -15.0429rem 0 0 calc(50% - 53.453rem);   /* x 185.47 */
}

/* ---------- ニュースレター（注目記事下端 681.93 → 761.93 = 80。1070.109×373.193） ---------- */
.blog-news {
  width: 107.0109rem; height: 37.3193rem; margin: 8rem auto 0;
  padding: 11.757rem 0 0 4.698rem;
  background: url("../img/blog/newsletter-bg.svg") center / 100% 100% no-repeat;
  border-radius: 2.2rem;
}
.blog-news__head { display: flex; align-items: flex-start; }
.blog-news__title { width: 32.6104rem; }
.blog-news__title .em { color: var(--color-primary-400); }        /* 強調 #AA6EFF（暗背景でも Figma 値） */
.blog-news__desc {
  width: 37.1793rem; margin: 2.4rem 0 0 28.077rem;                  /* x 838.98 / y 903.5 */
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-neutral-100);
}
/* 紫の帯（232.11, 1006.27：見出し下端 975.5 → 30.77） */
.blog-news__band {
  display: flex; align-items: center; justify-content: space-between;
  width: 97.8661rem; height: 9.027rem; margin-top: 3.077rem; padding: 0 1.773rem 0 1.895rem;
  background: var(--color-primary-400); border-radius: 1.3rem;
}
.blog-news__label {
  width: 32.6104rem;
  font-size: var(--fs-news-label); line-height: var(--lh-news-label); font-weight: 500; color: var(--color-neutral-100);
}
/* 入力欄 412×54・白・枠 #E9EDF3・角丸8・pl16 pr6 */
.blog-news__form {
  display: flex; align-items: center; width: 41.2rem; height: 5.4rem; padding: 0 0.5rem 0 1.5rem; /* border 1 + 15 = Figma pl16 */
  background: var(--color-neutral-100); border: 1px solid var(--color-input-border); border-radius: 0.8rem;
  box-shadow: var(--shadow-input);
}
.blog-news__form input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline-offset: -2px;
  font-size: 1.4rem; line-height: 1.25; letter-spacing: 0; color: var(--color-neutral-800);
}
.blog-news__form input::placeholder { color: var(--color-neutral-600); opacity: 1; }
/* Subscribe ボタン（地 #C399FF・角丸6・pad 4/10/4/4・gap 6） */
.blog-news__submit {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 1rem 0.4rem 0.4rem; flex-shrink: 0;
  background: var(--color-primary-100); border-radius: 0.6rem;
  font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: 600; color: var(--color-neutral-800); white-space: nowrap;
  transition: background-color .2s;
}
.blog-news__submit:hover { background: var(--color-primary-200); }
.blog-news__icon { display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 0.8rem; background: var(--color-neutral-800); }
.blog-news__icon img { width: 1.7rem; height: 1.4655rem; }

/* ---------- 最新記事（ニュースレター下端 1135.123 → 1255.13 = 120） ---------- */
.blog-latest { width: 107rem; margin: 12rem auto 0; }
.blog-latest__head { display: flex; align-items: center; justify-content: space-between; }
.blog-latest__title { white-space: nowrap; }
.blog-latest__head .blog-tags { margin-right: 0.179rem; }   /* タグ群の右端 1253.2 */
/* カード 2列×3段（524.145×300、列 185.06 / 730.92、段間 30。見出し下端 1303.13 → 1349.5） */
/* 3段目右（15753:36782）だけ Figma のタイトル枠が広い（右 inset 52.04% → 幅 226.15。他は 219.7） */
.article-card--wide-title .article-card__title { width: 22.615rem; }
.blog-latest__list { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 3rem; margin-top: 4.637rem; }
/* ページ送り（最終段下端 2309.5 → 2345.5 = 36。x 185.47 / 1207.86） */
.blog-latest__nav { display: flex; justify-content: space-between; margin-top: 3.6rem; padding: 0 0.114rem 0 0.047rem; }
.blog-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.6rem; height: 4.6rem; border-radius: 1.2rem; background: var(--color-neutral-100);
  box-shadow: var(--shadow-page-arrow);
}
.blog-arrow img { width: 2.4508rem; height: 2.4508rem; }
.blog-arrow:hover { background: var(--color-primary-300); }

/* ---------- フッター（ページ送り下端 2391.5 → 2511.5 = 120） ---------- */
main + .site-footer { margin-top: 12rem; }

/* =========================================================================
   SP（<1024px）— 自作レイアウト（Figma に SP カンプなし）
   ========================================================================= */
@media (max-width: 1023px) {
  :root { --fs-tag-filter: 1.5rem; --lh-tag-filter: 1.8rem; --fs-news-label: 2rem; --lh-news-label: 2.6rem; }

  .blog-hero {
    width: auto; height: auto; margin: 0.8rem 1.2rem 0; padding-bottom: 12rem;
    background: var(--color-neutral-800) url("../img/blog/hero-bg.svg") center top / cover no-repeat;
  }
  .blog-hero .site-header { margin-inline: 1.6rem; }
  .blog-hero__body { padding: 0 1.6rem; max-width: 72rem; margin-inline: auto; }
  .blog-hero__title, .blog-hero__desc { width: auto; }
  .blog-hero__title { margin-top: 3.2rem; }
  .blog-hero__desc { margin-top: 1.2rem; }
  .blog-hero__tags { margin-top: 2.4rem; }
  .blog-tags { flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
  .blog-tag { height: 3.6rem; padding: 0 1.2rem; border-radius: 0.8rem; }

  .blog-featured {
    flex-direction: column; gap: 1.6rem; width: auto; max-width: 72rem;
    margin: -8rem var(--sp-inset) 0;
  }

  .blog-news {
    width: auto; height: auto; max-width: 72rem; margin: 6.4rem var(--sp-inset) 0; padding: 3.2rem 2rem;
    background: var(--color-neutral-800) url("../img/blog/newsletter-bg.svg") center / cover no-repeat;
    border-radius: 1.6rem;
  }
  .blog-news__head { flex-direction: column; gap: 1.6rem; }
  .blog-news__title, .blog-news__desc { width: auto; }
  .blog-news__desc { margin: 0; }
  .blog-news__band { flex-direction: column; align-items: stretch; gap: 1.6rem; width: auto; height: auto; margin-top: 2.4rem; padding: 2rem 1.6rem; }
  .blog-news__label { width: auto; }
  .blog-news__form { width: 100%; }

  .blog-latest { width: auto; max-width: 72rem; margin: 6.4rem var(--sp-inset) 0; }
  .blog-latest__head { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .blog-latest__head .blog-tags { justify-content: flex-start; }
  .blog-latest__title { white-space: normal; }
  .blog-latest__list { flex-direction: column; flex-wrap: nowrap; row-gap: 1.6rem; margin-top: 2.4rem; }
  .blog-latest__nav { margin-top: 2.4rem; padding: 0; }
  .article-card--wide-title .article-card__title { width: auto; }

  main + .site-footer { margin-top: 6.4rem; }
}

/* SP 幅の広い側（640〜1023）：記事カードを2列に（1列だと画像が巨大化するため） */
@media (min-width: 640px) and (max-width: 1023px) {
  .blog-featured, .blog-latest__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
}