/* コラム記事ページ（scenes 暖色トーンで最小構成） */
.c-columnBody { background: var(--color-base); color: var(--color-font-bk); }
.c-columnHeader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2rem 8rem; border-bottom: 1px solid var(--color-gray);
}
.c-columnHeader_logo img { width: 12rem; height: auto; object-fit: contain; }
.c-columnHeader_back { font-size: 1.3rem; letter-spacing: .06em; color: var(--color-main); }
/* 上余白はヘッダー(position:fixed)の高さを避けるために要る。6rem では実測で
   320px:60px / 390px:65px / 768px:89px のヘッダーに対してパンくずが潜り込み、
   ロゴと重なっていた（2026-08-07）。一覧側 .c-artPage と同じ 12rem / SP 9rem に揃える。 */
.c-column { max-width: 82rem; margin: 0 auto; padding: 12rem 2.4rem 8rem; }
.c-column_breadcrumb { font-size: 1.2rem; color: #8a8073; letter-spacing: .06em; margin-bottom: 3rem; }
.c-column_breadcrumb a { color: var(--color-assort); }
.c-column_eyebrow { font-family: "Jost",sans-serif; font-size: 1.2rem; letter-spacing: .2em; color: var(--color-assort); margin-bottom: 1.4rem; }
.c-column_title { font-family: "Noto Sans JP",serif; font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.5; letter-spacing: .04em; margin-bottom: 3.2rem; }
.c-column_hero { margin: 0 0 4rem; border-radius: .6rem; overflow: hidden; }
.c-column_hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.c-column_body p { font-size: 1.6rem; line-height: 2.1; letter-spacing: .03em; margin-bottom: 2.4rem; }
.c-column_body h2 {
  font-family: "Noto Sans JP",serif; font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.4rem);
  line-height: 1.5; letter-spacing: .04em; margin: 5rem 0 2rem; padding-left: 1.6rem;
  border-left: 3px solid var(--color-assort);
}
.c-column_body strong { font-weight: 400; color: var(--color-assort); }
.c-column_body ul { margin: 0 0 2.4rem; padding-left: 0; }
.c-column_body li { position: relative; font-size: 1.55rem; line-height: 1.9; letter-spacing: .03em; padding-left: 1.8rem; margin-bottom: .8rem; }
.c-column_body li::before { content: ""; position: absolute; left: 0; top: .9rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-assort); }
.c-column_cta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 5rem; }
.c-column_cta_btn {
  display: inline-flex; align-items: center; padding: 1.3rem 3.2rem; border-radius: 999px;
  background: var(--color-main); color: var(--color-base); font-size: 1.4rem; letter-spacing: .08em;
  transition: opacity var(--transition-default);
}
.c-column_cta_btn.is-ghost { background: transparent; color: var(--color-main); border: 1px solid var(--color-main); }
.c-column_cta_btn:hover { opacity: .82; }
.c-columnFoot { border-top: 1px solid var(--color-gray); padding: 3.2rem 2.4rem; text-align: center; }
.c-columnFoot p { font-size: 1.25rem; line-height: 1.9; color: #8a8073; letter-spacing: .04em; }
.c-columnFoot a { color: var(--color-assort); }
@media screen and (max-width: 48em){
  .c-columnHeader { padding: 1.6rem 2rem; }
  .c-column { padding: 9rem 2rem 6rem; }
}

/* 関連記事リンク */
.c-column_related { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--color-gray); }
.c-column_related_lead { font-family: "Jost",sans-serif; font-size: 1.2rem; letter-spacing: .18em; color: var(--color-assort); margin-bottom: 1.6rem; }
.c-column_related ul { display: grid; gap: .8rem; }
.c-column_related li a { font-size: 1.5rem; letter-spacing: .03em; color: var(--color-main); border-bottom: 1px solid transparent; transition: border-color var(--transition-default); }
.c-column_related li a:hover { border-bottom-color: var(--color-assort); }

/* 著者バイライン(EEAT) */
.c-column_byline { font-size: 1.25rem; letter-spacing: .04em; color: #726a5e; margin: -1.6rem 0 3.2rem; }
.c-column_byline a { color: var(--color-assort); }

/* =========================================================================
   記事一覧ページ（column.html）と、Stem が差し込む記事詳細
   カードは画像なしで成立させる。Stem の記事は画像フィールドを持たず、
   {{image}} は空に潰れるため（stem-ssr-inject.ts:169 で確認 / 2026-08-07）。
   ========================================================================= */
.c-artPage { padding-top: 12rem; padding-bottom: 12rem; }
.c-artPage_lead {
  max-width: 62rem; margin-top: 2.4rem;
  font-size: 1.5rem; line-height: 2.1; opacity: .82;
}
.c-artPage_sub {
  margin-top: 7.2rem; margin-bottom: 2.4rem;
  font-family: "Jost","Zen Kaku Gothic New",sans-serif;
  font-size: 1.9rem; font-weight: 300; letter-spacing: .1em;
  padding-bottom: 1.2rem; border-bottom: 1px solid rgba(58,50,42,.16);
}
.c-artPage_foot { margin-top: 8rem; font-size: 1.4rem; }
.c-artPage_foot a { text-decoration: underline; text-underline-offset: .3em; }

/* 一覧グリッド。SSRは data-stem-column-list の内側だけを埋めるので、
   マウントが空でもレイアウトが崩れないよう gap のみで組む。 */
.c-artList {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.c-artList:empty { display: none; }
.c-artCard { display: flex; }
.c-artCard_link {
  display: flex; flex-direction: column; gap: 1rem;
  width: 100%; padding: 2.8rem 2.4rem 2.4rem;
  border: 1px solid rgba(58,50,42,.16); border-radius: .8rem;
  background: rgba(255,255,255,.5);
  text-decoration: none; color: inherit;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background-color .3s ease;
}
.c-artCard_link:hover {
  transform: translateY(-.4rem);
  border-color: var(--color-accent, rgba(58,50,42,.4));
  background: rgba(255,255,255,.85);
}
.c-artCard_meta { font-family: "Jost",sans-serif; font-size: 1.2rem; letter-spacing: .1em; opacity: .6; }
.c-artCard_title { font-size: 1.7rem; font-weight: 400; line-height: 1.65; }
.c-artCard_excerpt {
  font-size: 1.35rem; line-height: 1.95; opacity: .72;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.c-artCard_more {
  margin-top: auto; padding-top: 1.2rem;
  font-family: "Jost",sans-serif; font-size: 1.25rem; letter-spacing: .1em; opacity: .9;
}
.c-artCard_more::after { content: " →"; }

/* 記事詳細（Stem が data-stem-column-detail-mount に差し込む） */
.c-artDetail { margin-top: 4rem; }
.c-artDetail_back { margin-top: 6rem; font-size: 1.4rem; }
.c-artDetail_back a { text-decoration: underline; text-underline-offset: .3em; }
/* 詳細が出ているときは一覧側の見出しを引っ込める（重複した見出しが並ばないように） */
.c-artStem:has([data-stem-column-detail-mount] .c-artDetail) .c-artPage_sub,
.c-artStem:has([data-stem-column-detail-mount] .c-artDetail) [data-stem-column-list] { display: none; }

@media screen and (max-width: 48em) {
  .c-artPage { padding-top: 9rem; padding-bottom: 9rem; }
  .c-artList { grid-template-columns: 1fr; }
  .c-artPage_sub { margin-top: 5.6rem; font-size: 1.7rem; }
}

/* 共通フッターの直前に置く言語/トップ導線（コラム・記事詳細のみ） */
.c-column_pageNav { margin: 6rem auto 0; max-width: 72rem; padding: 0 2rem; font-size: 1.4rem; }
.c-column_pageNav a { text-decoration: underline; text-underline-offset: .3em; }

/* ── 記事本文：h3 と h4 の階調を作る（h2 は既存の左ボーダー付き意匠のまま） ──
   before: h3 が本文と同じ 14.2px で、見出しに見えていなかった。
   h2 が font-weight:400 の意匠なので、太さではなく大きさで階調をつける。 */
.c-column_body { overflow-wrap: anywhere; }
.c-column_body h3 { font-family: "Noto Sans JP",serif; font-weight: 400; font-size: 2.05rem;
  line-height: 1.7; letter-spacing: .06em; margin: 3.6rem 0 1.4rem; }
.c-column_body h4 { font-family: "Noto Sans JP",serif; font-size: 1.7rem;
  line-height: 1.8; letter-spacing: .04em; margin: 3rem 0 1.2rem; }
.c-column_body ol { margin: 0 0 2.4rem; padding-left: 1.8rem; list-style: decimal; }
.c-column_body ol li { padding-left: 0; }
.c-column_body ol li::before { content: none; }
.c-column_body table { display: block; overflow-x: auto; max-width: 100%; }
@media screen and (max-width: 48em) {
  /* SP は h2 が 1.9rem 下限で止まるので、h3 が追い越さないよう下げる */
  .c-column_body h3 { font-size: 1.72rem; margin: 3rem 0 1.2rem; }
  .c-column_body h4 { font-size: 1.6rem; }
}