/* ==========================================================================
   ブログ専用CSS(一覧・記事詳細・タグ絞り込み)
   数値はすべてcms/BLOG_DESIGN_SPEC.md(元Studioサイト実測)のとおり。
   デザイントークンはcss/style.cssの:rootをそのまま使う。style.css自体は変更しない。
   ブレークポイントはLPと同じ840px / 540pxのみを使用する。
   「width:○○px」の固定値は、幅が狭いビューポートで横スクロールが出ないよう
   width:100%; max-width:○○px; の可変幅パターンに置き換えている(唯一の意図的な差異)。
   ========================================================================== */

/* ---- BLOG見出し帯(SPEC §1。一覧・詳細・タグページ共通) ---- */
.blog-heading-band {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #FFFFFF;
  padding: 40px 144px;
  overflow: hidden;
}

.blog-heading-band__ellipse,
.blog-heading-band__title,
.blog-heading-band__union {
  flex: none;
  max-width: 100%;
}

.blog-heading-band__ellipse {
  width: 123px;
  height: 117px;
  margin: 0 -50px 0 0;
}

.blog-heading-band__title {
  width: auto;
  height: auto;
}

.blog-heading-band__union {
  width: 101px;
  height: 99px;
  margin: -60px 0 0 -20px;
}

@media screen and (max-width: 840px) {
  .blog-heading-band {
    padding: 24px 72px;
  }

  .blog-heading-band__ellipse {
    width: 101px;
    height: 103px;
    margin: 0 -50px 0 0;
  }

  .blog-heading-band__union {
    margin: 0 0 0 -20px;
  }
}

@media screen and (max-width: 540px) {
  .blog-heading-band {
    padding: 56px 16px;
  }

  .blog-heading-band__ellipse {
    width: 96px;
    height: 91px;
  }

  .blog-heading-band__union {
    width: 89px;
    height: 87px;
    margin: -60px 0 0 -10px;
  }
}

/* ---- ブログ一覧・タグ絞り込みページの外枠(SPEC §2-1) ---- */
.blog-list {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  /* SPECはpadding:0だが、元サイト1280幅の実測ではピルの上・カードの下に80pxずつ空く(10/2再計測) */
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

.blog-list__main {
  width: 100%;
  max-width: 985px;
  margin: 0 auto;
  background: #fff;
  padding: 0 16px;
}

.blog-list__group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0;
}

@media screen and (max-width: 840px) {
  .blog-list {
    padding: 24px 0;
  }

  .blog-list__main {
    padding: 16px 0;
  }

  .blog-list__group {
    padding: 0 16px;
  }
}

@media screen and (max-width: 540px) {
  .blog-list__group {
    gap: 24px;
    padding: 0 16px;
  }
}

/* ---- タグ絞り込みピル(SPEC §2-2) ---- */
.blog-tags {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  padding: 0;
  background: transparent;
  flex-wrap: wrap;
}

.blog-tags__item {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 0;
}

.blog-tags__link {
  display: inline-block;
  line-height: 1;
  background: #F5F5F5;
  border-radius: 8px;
  color: #222222;
  font-size: 15px;
  padding: 16px 24px;
  text-align: center;
  width: auto;
  font-family: var(--font-body);
  font-weight: 800;
}

.blog-tags__link:hover {
  rotate: 2deg;
  transition: 300ms ease-in-out;
}

.blog-tags__link--active {
  background: #212121;
  color: #ffffff;
}

@media screen and (max-width: 840px) {
  .blog-tags {
    width: auto;
  }

  .blog-tags__item {
    gap: 8px;
  }
}

@media screen and (max-width: 540px) {
  .blog-tags {
    gap: 8px;
    width: auto;
  }

  .blog-tags__link {
    font-size: 14px;
  }
}

/* ---- 記事カード一覧(SPEC §2-3。タグ絞り込みページ§4でも共用) ---- */
.blog-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
  width: 100%;
  max-width: 960px;
  padding: 0;
}

.blog-card {
  width: calc(50% - 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  padding: 0;
}

.blog-card:hover {
  opacity: 0.5;
}

.blog-card__cover {
  width: 100%;
  /* height:autoが無いとimgのheight属性がCSS高さとして効き、aspect-ratioが無視される */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.blog-card__cover:hover {
  rotate: 2deg;
  transition: 300ms ease-in-out;
}

.blog-card__body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.blog-card__title {
  margin: 0;
  font-size: 24px;
  color: #333333;
  line-height: 1.4;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 800;
}

.blog-card__excerpt {
  margin: 0;
  font-size: 15px;
  color: #666666;
  line-height: 1.5;
  font-family: var(--font-body);
  font-weight: 400;
}

/* 元サイトは著者データが空でも24pxの丸枠だけ描画され、抜粋とタグの間に16px+24px+16pxの段ができる */
.blog-card__avatar {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  border: 1px solid #ebebeb;
  border-radius: 50%;
}

.blog-card__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.blog-card__tag {
  display: inline-block;
  line-height: 1;
  background: #F5F5F5;
  border-radius: 8px;
  color: #222222;
  font-size: 15px;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-weight: 800;
}

@media screen and (max-width: 840px) {
  .blog-cards {
    gap: 24px;
  }

  .blog-card {
    width: calc(50% - 12px);
  }
}

@media screen and (max-width: 540px) {
  .blog-cards {
    gap: 40px;
  }

  .blog-card {
    width: 100%;
  }

  .blog-card__body {
    gap: 8px;
  }

  .blog-card__title {
    font-size: 18px;
  }

  .blog-card__excerpt {
    font-size: 14px;
  }

  .blog-card__tag {
    font-size: 13px;
  }
}

/* ---- 記事0件のタグページ用の文言(元サイトには該当ページが無いため独自) ---- */
.blog-empty {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #666666;
  font-family: var(--font-body);
  font-weight: 400;
}

/* ---- タグ絞り込み中の見出しグループ(元サイトのタグページ実測。10/2再計測) ----
   元サイトの一覧ページには見出しが無いので、絞り込み無しのときは見た目から外す
   (h1は読み上げ・検索向けに残す)。絞り込みの有無は[data-blog-filtered]で判定し、
   タグページはテンプレートで、その場絞り込みはjs/blog.jsで付け外しする。 */
.blog-tag-heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.blog-list:not([data-blog-filtered]) .blog-tag-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.blog-tag-heading__title {
  margin: 0;
  font-size: 64px;
  line-height: 1;
  color: #222222;
  font-family: var(--font-heading);
  font-weight: 700;
}

.blog-tag-heading__sub {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  color: #222222;
  font-family: var(--font-heading);
  font-weight: 400;
}

/* 元サイトのタグページはカード内タグが背景なし・左右padding16px(一覧ページは#F5F5F5・32px) */
.blog-list[data-blog-filtered] .blog-card__tag {
  padding: 16px;
  background: transparent;
}

/* 元サイトのタグページはカードの下が一覧ページより80px広い */
@media screen and (min-width: 841px) {
  .blog-list[data-blog-filtered] {
    padding-bottom: 160px;
  }
}

@media screen and (max-width: 840px) {
  .blog-tag-heading {
    margin-bottom: 0;
    padding-left: 24px;
  }

  .blog-tag-heading__title {
    font-size: 30px;
  }
}

@media screen and (max-width: 540px) {
  .blog-tag-heading {
    gap: 16px;
    /* 元サイトは「─ Blog」の直下にカードが接する */
    margin-bottom: -24px;
    padding-left: 0;
  }

  .blog-tag-heading__title {
    font-size: 36px;
  }

  .blog-tag-heading__sub {
    font-size: 16px;
  }

  .blog-list[data-blog-filtered] .blog-cards {
    padding: 0 16px;
  }

  .blog-list[data-blog-filtered] .blog-list__main {
    padding-bottom: 0;
  }
}

/* ---- 記事詳細: 戻るバー(SPEC §3-1) ---- */
.article-backbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 80px;
  background: #FFFFFF;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.article-backbar__link {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.article-backbar__icon {
  font-size: 24px;
  padding: 10px;
  color: #333333;
}

.article-backbar__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: #222222;
  font-family: var(--font-heading);
}

@media screen and (max-width: 540px) {
  .article-backbar__text {
    font-size: 15px;
  }
}

/* ---- 記事詳細: 記事本体(SPEC §3-2) ---- */
.article-section {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}

.article-main {
  width: 100%;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: #fff;
}

.article-cover {
  width: 100%;
  height: auto;
}

.article-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.article-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.article-tags__item {
  display: inline-block;
  line-height: 1;
  background: #F5F5F5;
  border-radius: 8px;
  color: #222222;
  font-size: 18px;
  padding: 16px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 800;
}

.article-title {
  margin: 0;
  font-size: 40px;
  color: #222222;
  line-height: 1.5;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 800;
}

.article-date-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 20px;
}

.article-date {
  margin: 0;
  /* 元サイトはline-height未指定＝1.0。継承させるとタイトル部が14px高くなる */
  line-height: 1;
  font-size: 18px;
  color: #666666;
  font-family: var(--font-body);
  font-weight: 400;
}

@media screen and (max-width: 540px) {
  .article-main {
    padding: 0 16px;
  }

  .article-tags__item {
    font-size: 15px;
  }

  .article-title {
    font-size: 28px;
  }

  .article-date {
    font-size: 15px;
  }
}

/* ---- 記事詳細: 本文リッチテキスト(SPEC §3-2の3) ---- */
.article-body {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  color: #222222;
  padding: 16px 0 64px 0;
  font-family: var(--font-body);
  font-weight: 400;
}

.article-body p {
  margin: 10px 0;
}

.article-body h1 {
  font-size: 32px;
  margin: 48px 0 20px 0;
}

.article-body h2 {
  font-size: 24px;
  margin: 40px 0 10px 0;
  font-family: var(--font-body);
  font-weight: 800;
}

.article-body h3 {
  font-size: 18px;
  margin: 32px 0 10px 0;
}

@media screen and (max-width: 540px) {
  .article-body {
    margin-bottom: 40px;
  }

  .article-body h1 {
    font-size: 24px;
  }

  .article-body h2 {
    font-size: 20px;
  }

  .article-body h3 {
    font-size: 16px;
  }
}

/* ---- タグピルによるその場絞り込み(ページ遷移なし。js/blog.js) ---- */
.blog-card[hidden] { display: none; }
.blog-cards { transition: opacity 200ms ease; }
.blog-cards.is-swapping { opacity: 0; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .blog-cards { transition: none; }
}