/* 記事ページ。**差別化の本体（「社内で使う」）を構造として持つ。**
   競合5媒体の型は「ニュース／解説／インタビュー」の3つしかなく、
   担当者の最大の困りごと——社内を動かす——を扱う枠がどこにも無い
   （docs/competition.md 2章①）。ここを毎回置くのが Springl の形 */

/* **記事の幅は1つだけ**（2026-09-22 編集長のご指摘
   「本文とアイキャッチの幅が違う？」）。本文だけ 34em（544px）で止めて
   いたので、アイキャッチ（712px）と段差ができていた。**実測 712 vs 544。**

   読みやすい行の長さ（和文で35〜45字）は、本文だけでなく**記事全体の幅**で
   作る。740px − 左右の余白48px ＝ 692px ＝ 16px で約43字。

   **一度 680px（約39字）にしたが、編集長のご指摘で少し広げた**
   （2026-09-22「気持ちもう少しだけ横幅が広くても良い」）。
   上限は45字まで——これを超えると次の行の頭を見失う。
   広げるのは `.art` だけ（本文側で止めないのは上のとおり） */
.art { max-width: 740px; margin-inline: auto; }
.art__head { padding-block: var(--sp-s7) 0; }
/* 固定ページ（About・規約など）。記事と違って本文の後に何も続かないので、
   最後の段落がフッターに付いて見えた（2026-10-10 編集長のご指摘・/about/）。
   節の間と同じ幅（--sp-s8）を下に取る */
.art--page { padding-block-end: var(--sp-s8); }
.acrumb {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label);
  color: var(--sp-text-soft);
  margin: 0 0 var(--sp-s4);
}
/* 押し所を 24px 以上に（WCAG 2.5.8）。行内の <a> は箱が文字の高さ（14px）しか無い。
   フッターの目次と同じく inline-block にして高さを持たせる（2026-09-23 テーマの検査で発見） */
.acrumb a { color: var(--sp-link); display: inline-block; min-height: 24px; min-width: 24px; padding-block: 4px; }
.art__title {
  font-size: calc(30px * var(--sp-scale));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--sp-ink);
  margin: var(--sp-s4) 0 var(--sp-s4);
  /* 右端まで詰める（balance にすると1行目から右に空きができる。prototype.css の注記を参照） */
}
/* スマホでは 23px（トップのリードの題名と同じ大きさ）。30px のままだと題名だけで画面が埋まった（2026-10-05 編集長のご指摘） */
@media (max-width: 600px) {
  .art__title { font-size: calc(23px * var(--sp-scale)); line-height: 1.55; }
}
.art__byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s2) var(--sp-s4);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label);
  color: var(--sp-text-soft);
  padding-bottom: var(--sp-s5);
  border-bottom: 1px solid var(--sp-line);
}
.art__thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow);
  margin-block: var(--sp-s6);
  overflow: hidden;
}
.art__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 本文の写真。WordPress の <img> は width/height 属性（例 1693×1134）を持つので、幅だけ縮めると
   縦が属性のまま残って伸びる。**縦は幅に合わせる**（2026-10-04 CEHub の記事の本文の写真を写したとき） */
.art__body img { height: auto; margin-block: var(--sp-s4); border-radius: var(--sp-radius); }
/* WordPress の写真の枠（wp-caption）は style="width: 1693px" を直に持ってくる。読み幅で止める（2026-10-04 Loop の記事で写真が画面の外まで広がった） */
.art__body figure, .art__body .wp-caption { width: auto !important; max-width: 100%; margin: var(--sp-s4) 0; }
.art__body figure img, .art__body .wp-caption img { display: block; width: 100%; max-width: 100%; margin-block: 0 var(--sp-s2); }
.art__body figcaption, .art__body .wp-caption-text { font-size: var(--sp-fs-list); line-height: 1.6; color: var(--sp-text-soft); }
.art__body img { max-width: 100%; }

/* 本文。**幅は .art が決める**（ここで止めない。止めると絵と段差ができる） */
.art__body { font-size: var(--sp-fs-body); line-height: 2; color: var(--sp-text); }
.art__body p { margin: 0 0 var(--sp-s5); }
.art__body h2 {
  font-size: calc(20px * var(--sp-scale));
  font-weight: 700; color: var(--sp-ink);
  line-height: 1.6;
  margin: var(--sp-s8) 0 var(--sp-s4);
}
.art__body ul { margin: 0 0 var(--sp-s5); padding-left: 1.3em; }
.art__body li { margin-bottom: var(--sp-s2); }
.art__body a { color: var(--sp-link); text-decoration: underline; text-underline-offset: 2px; }

/* --- 社内で使う（この媒体の差別化の本体）---------------------------------
   **記事の一部であって、広告でも囲み記事でもない。**
   だから地の色は変えず、太い線で「ここから別の役割」とだけ示す。
   薄い箱に入れるとスポンサー枠に見える（他媒体のPR記事がその形） */
.inhouse {
  margin: var(--sp-s8) 0;
  padding-top: var(--sp-s5);
  border-top: 3px solid var(--sp-blue);
}
.inhouse__h {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-s2) var(--sp-s3);
  margin: 0 0 var(--sp-s5);
}
.inhouse__h b {
  font-size: calc(19px * var(--sp-scale));
  font-weight: 700; color: var(--sp-ink);
}
.inhouse__h span {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label);
  color: var(--sp-text-soft);
}
/* **3ブロックから質問だけに絞った**（2026-09-21 編集長のご指摘
   「アイデアは良いが運用が厳しい」）。
   「役員に説明するなら」は読者の社内事情を知らないと書けないので、
   枠だけ用意すると当たり障りのない文章で埋まる。
   質問なら**書き手が実際に知っている**（取材や制度を読めば分かる）。

   面（背景）も外した。箱に入れるとスポンサー枠に見えるうえ、
   1種類しか入らないのに箱があると中身が薄く見える */
.qa details {
  border-bottom: 1px solid var(--sp-line);
  padding-block: var(--sp-s3);
}
.qa details:first-of-type { border-top: 1px solid var(--sp-line); }
.qa summary {
  cursor: pointer;
  font-size: calc(14px * var(--sp-scale));
  font-weight: 700;
  color: var(--sp-ink);
  line-height: 1.8;
}
.qa summary::marker { color: var(--sp-link); }
.qa details p {
  font-size: calc(14px * var(--sp-scale));
  line-height: 1.95;
  margin: var(--sp-s3) 0 var(--sp-s2);
  color: var(--sp-text);
  padding-left: var(--sp-s4);
  border-left: 2px solid var(--sp-blue-soft);
}
.ih__note { margin-top: var(--sp-s4); }

/* ニュース版とコラム版を行き来する（試作だけの導線。実装時に消す） */
.art__switch {
  margin: var(--sp-s7) 0 0;
  font-size: calc(13px * var(--sp-scale));
}
.art__switch a { color: var(--sp-link); text-decoration: underline; text-underline-offset: 2px; }
.ih__note {
  font-size: calc(12px * var(--sp-scale));
  color: var(--sp-text-soft);
  margin: 0;
}

/* --- 一次情報（必ず出す）--------------------------------------------------- */
.asrc {
  margin: var(--sp-s7) 0 0;
  padding-top: var(--sp-s5);
  border-top: 1px solid var(--sp-line);
  font-size: calc(13px * var(--sp-scale));
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.asrc__h {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label);
  color: var(--sp-text-soft);
  margin: 0 0 var(--sp-s3);
}
.asrc ul { margin: 0; padding-left: 1.2em; }
.asrc a { color: var(--sp-link); text-decoration: underline; text-underline-offset: 2px;
          display: inline-block; min-height: 24px; padding-block: 3px; word-break: break-all; }

/* --- 関連 ------------------------------------------------------------------ */
.arel { margin-block: var(--sp-s8); }

/* --- 記事の末尾（2026-09-22 編集長のご指摘「SNSシェアボタンや、
   ライターズプロフィールなども何もない」）-------------------------------- */

/* シェア。**押せる図形は白黒**（配色を絞ったので各社の色は使わない）。
   各社のロゴの形はそのまま使う（描き起こさない） */
.ashare {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s4);
  margin-top: var(--sp-s7);
  padding-top: var(--sp-s5);
  border-top: 1px solid var(--sp-line);
}
.ashare__l {
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta); font-weight: 700;
  letter-spacing: var(--sp-ls-label); color: var(--sp-text-soft);
}
.ashare__list { display: flex; gap: var(--sp-s3); list-style: none; margin: 0; padding: 0; }
.ashare__list a, .ashare__copy {
  display: grid; place-items: center;
  width: 40px; height: 40px;              /* 指で押せる大きさ */
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-pill);
  background: none; color: var(--sp-text);
  cursor: pointer; font-family: inherit;
}
.ashare__list a:hover, .ashare__copy:hover {
  background: var(--sp-link); border-color: var(--sp-link); color: var(--sp-on-link);
}
.ashare__i { width: 16px; height: 16px; }
.ashare__note { font-size: var(--sp-fs-meta); color: var(--sp-text-soft); margin: 0; }

/* 書いた人。**個人名は出さない**——本人の同意が確認できるまでは
   「Springl編集部」で出す（社の決まり）。本番で書き手ごとに出すときも、
   同意の取れた人だけ */
/* --- 他媒体（CEHub）から取り込んだ記事 ------------------------------------
   **どこの記事かを隠さない**（正規URLも元記事。inc/syndication.php）。
   会員限定は本文を持っていないので、抜粋のあとに「続きは CEHub で」を置く */
.asource {
  margin: var(--sp-s5) 0 0;
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label); color: var(--sp-text-soft);
}
.asource a { color: var(--sp-link); display: inline-block; min-height: 24px; padding-block: 4px; }
/* 元の記事へ送る箱（inc/syndication.php の springl_read_on）。2026-10-05 編集長のご指摘「ダサい。洗練させて」。
   **箱ごと1つのリンク**。札 → 媒体名 → どこで読めるか、右に丸い矢印。色は持たない（差し色は札だけ） */
.aread {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-s5);
  margin-top: var(--sp-s6);
  padding: var(--sp-s5) var(--sp-pad);
  background: var(--sp-card);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-lg);
  color: var(--sp-ink); text-decoration: none;
  transition: border-color 0.2s var(--sp-ease), box-shadow 0.2s var(--sp-ease);
}
.aread__text { display: grid; gap: var(--sp-s1); min-width: 0; }
.aread__l {
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label); text-transform: uppercase; color: var(--sp-link);
}
.aread__name {
  font-family: var(--sp-font-display); font-size: calc(22px * var(--sp-scale)); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--sp-ink);
}
.aread__d { font-size: calc(13px * var(--sp-scale)); line-height: 1.7; color: var(--sp-text-soft); }
.aread__go {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border: 1px solid var(--sp-line-strong); border-radius: 50%; color: var(--sp-ink);
  transition: background 0.2s var(--sp-ease), color 0.2s var(--sp-ease), border-color 0.2s var(--sp-ease), transform 0.2s var(--sp-ease);
}
@media (hover: hover) {
  .aread:hover { border-color: var(--sp-ink); box-shadow: var(--sp-shadow); }
  .aread:hover .aread__go { background: var(--sp-ink); border-color: var(--sp-ink); color: var(--sp-card); transform: translate(2px, -2px); }
}
@media (max-width: 480px) {
  .aread { gap: var(--sp-s4); padding: var(--sp-s5) var(--sp-s5); }
  .aread__name { font-size: calc(19px * var(--sp-scale)); }
  .aread__go { width: 40px; height: 40px; }
}

.aprof {
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-s5); align-items: start;
  margin-top: var(--sp-s6);
  padding: var(--sp-pad);
  background: var(--sp-card);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow);
}
.aprof__ph { width: 64px; height: 64px; border-radius: var(--sp-radius-pill); }
.aprof__l {
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta);
  letter-spacing: var(--sp-ls-label); color: var(--sp-text-soft); margin: 0;
}
.aprof__n { font-size: calc(17px * var(--sp-scale)); font-weight: 700; color: var(--sp-ink); margin: var(--sp-s2) 0 0; }
.aprof__d { font-size: calc(13px * var(--sp-scale)); line-height: 1.9; color: var(--sp-text); margin: var(--sp-s3) 0 0; }
.aprof__more {
  display: inline-block; margin-top: var(--sp-s3);
  font-family: var(--sp-font-mono); font-size: var(--sp-fs-meta); font-weight: 700;
  letter-spacing: var(--sp-ls-label); color: var(--sp-link);
}
.aprof__more:hover { text-decoration: underline; }
@media (max-width: 560px) { .aprof { grid-template-columns: minmax(0, 1fr); } }

/* --- 関連（2026-09-22 編集長のご要望・cehub.jp を参考に）-------------------
   **3組 × 5本。** 大きなカード3枚では、次に読むものが3つしか出ない。
   記事を読み終えた人の行き先は3通りある——
     新着       とりあえず新しいものを見る
     同じカテゴリ いま調べていることを続ける
     関連       この記事の周辺を掘る
   **列で分けて、どれを選んでいるかが分かるようにする**（混ぜて15本並べると、
   なぜその記事が出ているのか読めない）。
   1本は写真を小さく・題名を主役にする（15本ぶんの大きな絵は重い） */
.rel {
  display: grid;
  /* auto-fill: 組が1つ・2つの日も1列の幅を保つ（auto-fit だと全幅に伸びる） */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-s6) var(--sp-s7);
}
.rel__h {
  font-family: var(--sp-font-display);
  font-size: calc(15px * var(--sp-scale));
  font-weight: 700; letter-spacing: 0.01em; color: var(--sp-ink);
  margin: 0 0 var(--sp-s3);
  padding-bottom: var(--sp-s3);
  border-bottom: 1px solid var(--sp-line-strong);
}
.rel__list { list-style: none; margin: 0; padding: 0; }
.rel__list li + li { border-top: 1px solid var(--sp-line); }
.rel__list a {
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-s4); align-items: start; padding-block: var(--sp-s4);
}
.rel__thumb { aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--sp-radius); }
.rel__t {
  font-size: calc(13.5px * var(--sp-scale)); font-weight: 700; line-height: 1.6;
  color: var(--sp-ink); margin: 3px 0 0;
}
.rel__list a:hover .rel__t { color: var(--sp-link); }