/* posts.css — posts 系（News / Blog）の一覧・詳細で共用するブランチ CSS
   ------------------------------------------------------------------
   方針（IMPLEMENTATION_GUIDE §2・CODING_RULES §4）:
   ・components.css は import しない。実体クラスを同名のまま複製する
   ・複製元は各ブロックのコメントに明記する
   ・読み込み順は common.css → posts.css
   ・News と Blog で共用する。Blog でのみ使う定義も先行収録している
     （先行収録の対象: article-eyecatch / article-tags /
       article-share / article-related。News の HTML では使用しない）
   ・post-blog はアイキャッチ設定記事の一覧カード（画像+テキスト）として
     News（list.twig / category.twig）でも使用する
   ================================================================== */

/* ============================================================
   1. 共通レイアウト・見出しパーツ
   works.css の同名パーツと同一実装（common.css 未収録のため複製）
   ============================================================ */

/* ---------- sec-head: セクション見出し（EN大 + JP小）
   top.css の .sec-head と同一実装（common.css 未収録のためこちらに複製） ---------- */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 4rem;
}
.sec-head__sub {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-text-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.sec-head__sub::before {
  content: "";
  display: inline-block;
  width: 2.4rem; height: 0.1rem;
  background: var(--c-accent);
}
.sec-head__en {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  text-transform: uppercase;
}

/* ---------- sec-badge: 見出し上の丸ピル型バッジ（英字ラベル） ---------- */
.sec-badge {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  margin-bottom: 1.2rem;
  background: var(--c-bg-muted);
  border-radius: 999px;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-text-mute);
  text-transform: uppercase;
  transform: scaleY(0.8);
  transform-origin: left top;
}

/* ---------- sec-title: プレーンな罫線付きh2（カタログ K2「プレーン版」と同一） ---------- */
.sec-title {
  position: relative;
  margin: 0 0 4rem;
  padding-top: 2.2rem;
  font-size: 3.2rem;
  line-height: 1.35;
}
.sec-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6rem;
  height: 1rem;
  background:
    radial-gradient(at 20% 30%, #eab308 0%, transparent 55%),
    radial-gradient(at 75% 25%, #ff7519 0%, transparent 60%),
    radial-gradient(at 50% 80%, #ff8c42 0%, transparent 55%),
    #eb6100;
  border-radius: 0.2rem;
}
/* --heavy: バッジと組み合わせる見出し。罫線は使わず、文字を詰めて見せる */
.sec-title--heavy {
  padding-top: 0;
  font-weight: 500;
  transform: scaleY(1.3);
  transform-origin: left top;
}
.sec-title--heavy::before { content: none; }
@media (min-width: 768px) {
  .sec-title { margin-bottom: 6rem; }
  .sec-head { margin-bottom: 6rem; }
  .sec-head__en { font-size: 6.4rem; }
}

/* ---------- sec-lead: 見出し直下の補足リード文（A6）
   components.css の該当実装を複製（common.css 未収録のため） ---------- */
.sec-lead {
  max-width: 72rem;
  margin: -2rem 0 4rem;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--c-text-mute);
}

/* ---------- lead-quote（K11: リード文ブロック・引用符あしらい）
   works.css の該当実装を複製（common.css 未収録のため） ---------- */
.lead-quote {
  position: relative;
  max-width: 84rem;
  margin: 0 auto;
  padding: 4.8rem 3.2rem;
  text-align: center;
}
.lead-quote__mark {
  position: absolute;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(235, 97, 0, 0.18);
  pointer-events: none;
}
.lead-quote__mark--open { top: 0; left: 0; }
.lead-quote__mark--close { bottom: 0; right: 0; }
.lead-quote__text p {
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--c-text);
}
.lead-quote__text p + p { margin-top: 1.2rem; }
@media (max-width: 767px) {
  .lead-quote { padding: 4rem 2rem; }
  .lead-quote__mark { font-size: 5.6rem; }
  .lead-quote__text p { font-size: 1.4rem; }
}

/* --inline: page-hero--split内でタイトル横に並べる用 */
.lead-quote--inline {
  margin: 0;
  max-width: 100%;
  width: fit-content;
  justify-self: start;
  padding: 0.8rem 3.6rem;
  text-align: left;
}
.lead-quote--inline .lead-quote__mark { font-size: 4.8rem; color: rgba(8, 16, 32, 0.45); }
.lead-quote--inline .lead-quote__mark--open { top: -0.6rem; left: 0; }
.lead-quote--inline .lead-quote__mark--close { bottom: -0.6rem; right: 0; }
@media (max-width: 767px) {
  .lead-quote--inline { padding: 0.4rem 1.6rem; }
  .lead-quote--inline .lead-quote__mark { font-size: 2.8rem; }
}
.lead-quote--inline .lead-quote__text p { font-size: 1.4rem; }

/* ============================================================
   2. 一覧ページ（G5 フィルター / 記事リスト / D8 ページネーション）
   ============================================================ */

/* ---------- filter-bar（G5: フィルタリングUI）
   works.css の該当実装を複製。本ページでも視覚UIのみ使用し、
   絞り込みの JS は持たない（非機能スタブ） ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.filter-bar__btn {
  padding: 0.9rem 2rem;
  background: var(--c-bg-muted);
  border: 0;
  border-radius: 10rem;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.3rem;
  color: var(--c-text-mute);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.filter-bar__btn.is-active {
  background: var(--c-accent);
  color: #ffffff;
}

/* ---------- 記事リストの器 ---------- */
.posts__list { display: flex; flex-direction: column; }

/* ---------- post-news（D9: お知らせ一覧カード）
   top.css の実装を複製。__excerpt のみ components.css から複製 ---------- */
.post-news {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.8rem 0;
  min-height: 9.85rem;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-subtle);
  transition: background-color .25s ease;
}
@media (min-width: 768px) {
  .post-news { padding: 2rem 0; min-height: 12.75rem; }
}
.post-news:hover { background: var(--c-bg-subtle); }
.post-news__meta {
  display: flex; align-items: center; gap: 1rem;
}
.post-news__date {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
}
.post-news__cat {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--c-bg-muted);
  padding: 0.3rem 0.7rem;
  border-radius: 0.2rem;
  color: var(--c-text-mute);
  line-height: 1.3;
}
.post-news__title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
  transition: color .25s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-news__title { font-size: 1.4rem; }
}
.post-news:hover .post-news__title { color: var(--c-accent); }
.post-news__excerpt {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--c-text-mute);
  display: -webkit-box;
  /* SP は1行あたりの文字数が少なく、2行だと2文目が丸ごと隠れるため3行まで見せる */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-news__excerpt {
    font-size: 1.4rem;
    -webkit-line-clamp: 2;
  }
}

/* ---------- post-blog（画像つき記事行）
   top.css の実装を複製。アイキャッチ設定記事は News 一覧・カテゴリ一覧でも使用する ---------- */
.post-blog {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: 1.8rem 0;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-subtle);
  transition: background-color .25s ease;
}
@media (min-width: 768px) {
  .post-blog { grid-template-columns: 14rem 1fr; gap: 2rem; padding: 2rem 0; }
}
.post-blog:hover { background: var(--c-bg-subtle); }
.post-blog__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.3rem;
  background: var(--c-bg-muted);
}
.post-blog__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.post-blog:hover .post-blog__media img { transform: scale(1.06); }
.post-blog__text {
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;
}
.post-blog__meta {
  display: flex; align-items: center; gap: 1rem;
  font-size: 1.05rem;
  color: var(--c-text-mute);
}
.post-blog__date {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.post-blog__cat {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  background: var(--c-bg-muted);
  padding: 0.3rem 0.7rem;
  border-radius: 0.2rem;
  line-height: 1.3;
}
.post-blog__title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-blog__title { font-size: 1.4rem; }
}
.post-blog:hover .post-blog__title { color: var(--c-accent); }
/* post-news__excerpt と同一実装を複製（News 一覧のアイキャッチ設定記事で使用） */
.post-blog__excerpt {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--c-text-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .post-blog__excerpt { font-size: 1.4rem; }
}

/* ---------- pagination（D8）
   components.css の該当実装を複製 ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  color: var(--c-text);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination__item:hover { background: var(--c-bg-muted); }
.pagination__item.is-current {
  background: var(--c-accent);
  color: #ffffff;
}
.pagination__item--arrow { color: var(--c-text-mute); }
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  color: var(--c-text-sub);
}

/* ============================================================
   3. 詳細ページ（記事MV / D2 記事メタ / D3 本文 / D6 前後記事）
   components.css の該当実装を複製
   ============================================================ */

/* ---------- 記事MV（お知らせ用・ブログ用 専用ヒーロー） ---------- */
.article-mv {
  padding: 6rem var(--pad-pc) 4rem;
}
.article-mv__label {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  background: var(--c-bg-muted);
  padding: 0.3rem 0.7rem;
  border-radius: 0.2rem;
  line-height: 1.3;
}
.article-mv__title {
  margin-top: 1.6rem;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text);
}
.article-mv__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2rem;
}
.article-mv__date {
  font-family: "Oswald", sans-serif;
  font-size: 1.3rem;
  color: var(--c-text-mute);
  letter-spacing: 0.04em;
}
.article-mv__author {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.3rem;
  color: var(--c-text-mute);
}
.article-mv__author-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-muted);
}
.article-mv__author-icon img { width: 100%; height: 100%; object-fit: cover; }
/* ブログ用: サムネあり */
.article-mv__media {
  width: 100%;
  margin: 3.2rem 0 0;
  overflow: hidden;
  border-radius: 0.4rem;
  background: var(--c-bg-muted);
}
.article-mv__media img { width: 100%; height: auto; display: block; }
/* article-mv--has-media: PCはテキスト+サムネの2カラム（ブログ用）。newsは付与しないため縦積みのまま */
@media (min-width: 768px) {
  .article-mv--has-media {
    display: grid;
    grid-template-columns: 1fr minmax(24rem, 34%);
    column-gap: 3.2rem;
  }
  .article-mv--has-media .article-mv__label,
  .article-mv--has-media .article-mv__title,
  .article-mv--has-media .article-mv__meta {
    grid-column: 1;
  }
  .article-mv--has-media .article-mv__label {
    justify-self: start;
  }
  .article-mv--has-media .article-mv__media {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
  }
}
@media (max-width: 767px) {
  .article-mv { padding: 4rem var(--pad-sp) 3rem; }
  .article-mv__title { font-size: 2.2rem; }
}

/* ---------- D1: アイキャッチ
   **Blog専用で News の HTML では未使用**（原稿 §5-6: 記事本文中の画像はブログ詳細のみ） ---------- */
.article-eyecatch {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.4rem;
  background: var(--c-bg-muted);
  margin-bottom: 3.2rem;
}
.article-eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- D2: 記事メタ ---------- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.article-meta__date {
  font-family: "Oswald", sans-serif;
  font-size: 1.3rem;
  color: var(--c-text-mute);
  letter-spacing: 0.04em;
}
.article-meta__cat {
  display: inline-flex;
  align-items: center;
  height: 2.4rem;
  padding: 0 1.2rem;
  background: var(--c-bg-muted);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
  border-radius: 0.2rem;
}
.article-meta__author {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--c-text-mute);
}
.article-meta__author-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-muted);
}
.article-meta__author-icon img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- D3: リッチテキスト本文 ---------- */
.article-body {
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--c-text);
}
.article-body > * + * { margin-top: 2.4rem; }
.article-body h2 {
  margin-top: 5.6rem;
  padding-bottom: 1.2rem;
  font-size: 2.2rem;
  border-bottom: 0.2rem solid var(--c-accent);
}
.article-body h3 {
  margin-top: 4rem;
  font-size: 1.9rem;
}
.article-body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
.article-body ul,
.article-body ol {
  padding-left: 2.2rem;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.8rem; }
.article-body img {
  width: 100%;
  border-radius: 0.4rem;
}
.article-body .video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.4rem;
  overflow: hidden;
}
.article-body .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.article-body blockquote {
  padding: 2.4rem 2.8rem;
  background: var(--c-bg-muted);
  border-radius: 0.4rem;
  font-size: 1.4rem;
  color: var(--c-text-mute);
  line-height: 1.8;
}
.article-body figcaption {
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color: var(--c-text-mute);
  text-align: center;
}

/* ---------- D4: タグリスト
   **Blog専用で News の HTML では未使用** ---------- */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 3.2rem;
}
.article-tags__item {
  display: inline-flex;
  align-items: center;
  height: 3.2rem;
  padding: 0 1.4rem;
  background: var(--c-bg-muted);
  color: var(--c-text-mute);
  font-size: 1.2rem;
  border-radius: 0.3rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.article-tags__item:hover {
  background: var(--c-accent);
  color: #ffffff;
}

/* ---------- D5: SNSシェアボタン
   **Blog専用で News の HTML では未使用** ---------- */
.article-share {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.article-share__label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text-mute);
}
.article-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--c-bg-muted);
  color: var(--c-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.article-share__btn svg { width: 1.8rem; height: 1.8rem; }
.article-share__btn:hover {
  background: var(--c-accent);
  color: #ffffff;
}

/* ---------- D6: 前後記事リンク ---------- */
.article-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.article-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2.4rem;
  background: var(--c-bg-muted);
  border-radius: 0.4rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}
.article-pager__link:hover { background: rgba(235, 97, 0, 0.08); }
.article-pager__link--next { text-align: right; align-items: flex-end; }
.article-pager__dir {
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--c-accent);
}
.article-pager__title {
  font-size: 1.4rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 767px) {
  .article-pager { grid-template-columns: 1fr; }
}

/* ---------- D7: 関連記事
   **Blog専用で News の HTML では未使用** ---------- */
.article-related__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

/* ============================================================
   4. 本ページ固有のレイアウト（news 一覧・詳細）
   ============================================================ */

/* 一覧セクションの外枠 */
.posts-index {
  padding: 6rem 0;
}
@media (min-width: 768px) {
  .posts-index { padding: 8rem 0; }
}
.posts-index__filter { margin-bottom: 4rem; }
.posts-index__list { margin-bottom: 5.6rem; }

/* 詳細記事の本文コンテナ（読みやすい行長に絞る） */
.post-detail {
  padding: 2.4rem 0 6rem;
}
@media (min-width: 768px) {
  .post-detail { padding: 3.2rem 0 8rem; }
}
.post-detail__inner {
  max-width: 76rem;
  margin: 0 auto;
}
.post-detail__foot {
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.post-detail__back {
  display: flex;
  justify-content: center;
}