@charset "UTF-8";
/*
 * 記事冒頭の圧縮（2026-08-21）
 * 配布先: themes/swell_child/assets/css/article-head.css
 * 投稿ページ（is_singular('post')）でのみ読み込む＝**セレクタ側でページを絞る必要がない**。
 *
 * ■ なぜ
 * SP（390px幅）で本文が始まるまでに約528px使っていて、iPhone SE（可視約570px）では
 * 本文が1〜2行しか見えなかった。実測の内訳:
 *   固定ヘッダー 56 / パンくず 51 / H1 3行 82 / メタ行 27 / PR表記 46 / アイキャッチ 266
 *
 * ■ 方針（ユーザー選択＝C案「比率は変えず余白だけ詰める」）
 * アイキャッチの表示比率（16:9）と画像の見え方は変えない。効くのは余白で、
 *   ・アイキャッチの margin: 2em 0（＝上下64px）
 *   ・PR表記の margin: .8em 0（ブロック要素なので丸ごと高さになる）
 *   ・パンくずの margin-bottom: 20px（子テーマ style.css の指定）
 * の3つで大半を回収できる。合計およそ 95px＝本文開始が約528px → 約434px。
 *
 * ■ 触るときの注意
 * ・**パンくずは2026-08-22にページ下部へ移した**（SWELL標準の「パンくずリストの位置」＝
 *   カスタマイザー設定 `pos_breadcrumb: bottom`・保存先は `loos_customizer` オプション）。
 *   よって記事冒頭の内訳から**パンくず（約40px）が消えている**。下の実測値はその前の数字。
 *   下部の余白は `island-header.css` の「13) パンくずリスト」で site-wide に指定している。
 * ・`div#breadcrumb.p-breadcrumb.-bg-on` は子テーマ style.css に同じ詳細度の指定がある。
 *   このファイルは child_style を依存に持たせて**後に読ませて後勝ち**させている。
 *   セレクタを弱めると効かなくなる。
 * ・装飾日付（.c-postTitle__date）はSPで隠すが、**高さは減らない**（H1と同じflex行で
 *   H1のほうが高いため）。更新日はメタ行にあるので情報は失われない＝重複の解消が目的。
 */

/* ── パンくずの余白指定は撤去（2026-08-22）────────────────────
   パンくずをページ下部へ移したので、ここで上マージンを詰める意味がなくなった。
   下部での余白は island-header.css の「13) パンくずリスト」に site-wide で置いている
   （このファイルは投稿ページだけに読み込まれるため、全ページ共通の指定には使えない）。 */

/* ── タイトル ─────────────────────────────────── */
.c-postTitle__ttl {
	line-height: 1.35;
}

/* ── メタ行：更新日は左、PR表記は右（2026-08-21）────────────
   SWELL は大サイズのPR表記を `.p-articleMetas` の**外**に兄弟として出力する
   （`post_head.php` の `'l' === $pr_notation_size` 分岐が metas を閉じた後に echo）。
   共通の親が `article.l-mainContent__inner`＝記事全体なので、flex コンテナ化はできない。
   → メタ行をインラインレベルにし、PR表記を `float: right` で同じ行の右端へ寄せる。
   ⚠ float なので**次に来る要素に `clear: both` が必要**（下の `.p-articleThumb` で当てている）。
   ⚠ 幅が足りないとき（SPなど）は float が次の行に落ちて右寄せのまま2行になる。
     ボックスの中で割れることはないので崩れない。

   配色はサイトのトークンに揃えている（以前は #f6f8f8 / #e4e8ea / #5c676d という
   このサイトのどこにも無い独自色を使っていた＝統一感が無かった）:
     --color_main       #00bcd1        ターコイズ（アイコン）
     --color_main_dark  rgb(0,141,157) 濃いターコイズ（文字。淡いターコイズ地で約4.6:1）
   丸みはパンくずのチップに合わせたピル型。 */
/* ⚠ 更新日とPR表記の行を揃える仕組み。**片方だけ触ると必ずズレる。**
   理由: float の上端は「行ボックスの上端」に置かれる。一方メタ行は行のベースラインに乗るので、
   行ボックスがピルより高いとメタ行だけ下がって「1行なのにラインが揃わない」状態になる。
   → 両方に**同じ高さ（--acm-meta-h）**を与え、メタ行の行ボックスもその高さにして上端を一致させる。
   高さは1つの変数に集約してあるので、SP用に値を変えるときも**変数だけ**を書き換えれば両方に効く。
   以前は SP 側で height:auto に戻していて、この仕組みが無効になり実際にズレた（2026-08-21 修正）。
   ⚠ height ではなく min-height。狭い画面でピルが折り返しても中身が潰れないようにするため。
   26px = 文字12px × line-height1.5(=18) + padding 3+3 + border 1+1 ＝ピルの高さ。 */
.p-articleMetas.-top,
.c-prNotation[data-style=big] {
	--acm-meta-h: 26px;
}
.p-articleMetas.-top {
	display: inline-flex;
	align-items: center;
	min-height: var(--acm-meta-h);
	line-height: var(--acm-meta-h);
	/* 2026-08-22: 詰まり過ぎたので少し戻した（.7em → .9em）。
	   ⚠ margin-bottom はPR表記が無い記事のための保険。PR表記がある記事では
	   下の float（PR表記）の margin-bottom がクリアランスを作るので、大きい方が効く。 */
	margin-top: .9em;
	margin-bottom: .9em;
}

/* ⚠ display は inline-block。**inline-flex にしてはいけない。**
   inline-flex にすると箱の高さが中身と無関係に決まり（子を display:none にしても
   高さ38.4pxのまま変わらなかった）、**文字の下に12pxの余りが出る**。
   実測: inline-flex → 文字上6px / 文字下18.4px（非対称）
         inline-block + padding:3px 12px + line-height:1.5 → 上6px / 下6.6px（対称・高さ26.6px）
   アイコンとの間隔は flex の gap ではなく `> i` の margin-right で作る。 */
.c-prNotation[data-style=big] {
	float: right;
	display: inline-block;
	box-sizing: border-box;
	min-height: var(--acm-meta-h);   /* ← メタ行と同じ変数。片方だけ変えないこと */
	/* ⚠ 下マージンは float 側に持たせる。clear した要素の margin-top は
	   クリアランスに吸収されて効かないため（実測で 0px になった）。 */
	/* ⚠ この下マージンが**アイキャッチの上の余白そのもの**になる。
	   clear した要素（.p-articleThumb）の margin-top はクリアランスに吸収されて効かないため。
	   2026-08-22: 詰まり過ぎたので .35em → .9em に戻した。 */
	margin: .9em 0 .9em;
	padding: 3px 12px;
	border: 1px solid rgba(0, 188, 209, .22);
	border-radius: 999px;
	background: rgba(0, 188, 209, .07);
	color: var(--color_main_dark, #008d9d);
	font-size: 12px;
	/* ⚠ 行高は変数から逆算する。8px = padding(3+3) + border(1+1)。
	   これでピルの高さが --acm-meta-h と厳密に一致し、メタ行と文字中心がぴったり揃う。
	   固定値（1.5 等）にすると、変数を変えたときに 1px 単位でズレが出る（実測0.7px）。
	   padding の縦を変えるならこの 8px も直すこと。 */
	line-height: calc(var(--acm-meta-h) - 8px);
	font-weight: 500;
}
/* ⚠ アイコンは icomoon（アイコンフォント）で行ボックスがテキストより背が高く、
   ピルの高さを約1px押し広げる（メタ行との文字中心が0.7pxずれる）。
   `display:inline-block + line-height:1 + vertical-align:middle` で潰そうとしたが、
   middle が逆に行ボックスを広げてピルが30.6pxまで伸びた（2026-08-21 実測・差し戻し済み）。
   0.7px は知覚できない差なので**触らない**のが正解。 */
.c-prNotation[data-style=big] > i {
	color: var(--color_main, #00bcd1);
	font-size: 12px;
	margin-right: .4em;
	vertical-align: -.1em;
}

/* ── ★アイキャッチ下の隙間の本体：本文ブロックの上マージン ──────
   SWELL は `.l-mainContent__inner > .post_content { margin: 4em 0 }`（=60px）を持っている。
   隣接する `figure.p-articleThumb` の margin-bottom とは **マージン相殺**が起き、
   大きい方（60px）が勝つ。つまり figure 側をいくら削っても隙間は 60px のまま変わらない。
   （2026-08-21 にブラウザで実測して判明。figure margin-bottom 12.8px なのに実測ギャップ60px）
   ⚠ ここを 0 にして初めて下の figure の margin が効く。順序を逆にしないこと。
   ⚠ margin-bottom（本文→記事下の免責ボックス）は触らない。詰めると窮屈になる。
   詳細度は SWELL と同じ (0,2,0)。このファイルは style.css より後に読まれるので後勝ちする。 */
.l-mainContent__inner > .post_content {
	margin-top: 0;
}

/* ── アイキャッチ：SWELL既定の margin:2em 0（上下64px）を削る ────
   上の相殺を解除した結果、**この margin-bottom が本文1行目までの距離そのもの**になる。
   `.p-articleThumb__img` は display:block なのでインライン画像の baseline gap は無く、
   `.post_content > :first-child { margin-top: 0 !important }`（SWELL）で段落側も0。 */
.p-articleThumb {
	clear: both;          /* ← PR表記の float: right を解除する。外すと画像が横に回り込む */
	/* ⚠ margin-top を書いても効かない（clear のクリアランスに吸収される）。
	   画像の上の余白は上のPR表記／メタ行の margin-bottom で作る。
	   2026-08-22: 本文までの距離を .8em → 1em に戻した。 */
	margin: 0 0 1em;
}

/* 影を外す。SWELL既定の --swl-img_shadow は
     0 2px 8px rgba(0,0,0,.1), 0 4px 8px -4px rgba(0,0,0,.2)
   で下方向に8〜12pxぼやけて伸びるため、margin を削っても
   「まだ空いている」ように見えていた。輪郭を立てて隙間を margin の値どおりに見せる。
   ⚠ 記事のアイキャッチだけが対象。本文中の画像やカードの影は触らない。 */
.p-articleThumb__img {
	box-shadow: none;
}

/* ── 監修者バイライン → 目次 の間隔 ─────────────────────
   SWELL は `#main_content .p-toc { margin: 4em auto }`（=上下60px）を持っている。
   直前の `.supervisor-byline`（margin-bottom 10px）と**マージン相殺**して60pxが勝っていた
   （アイキャッチ下と同じ型。2026-08-21 にブラウザで実測）。
   → 目次の上マージンを 0 にし、**間隔の決定権をバイライン側の margin-bottom に集約**する。
   バイラインが無い記事では直前の段落の margin-bottom（2em=32px）が効くので詰まりすぎない。
   ⚠ 下マージン（目次→最初の見出し）は 60px のまま残してある。触るなら見出しの
     上マージンとの相殺を確認してから。
   詳細度は SWELL と同じ (1,1,0)。このファイルが後に読まれるので後勝ちする。 */
#main_content .p-toc {
	margin-top: 0;
}

/* ── SP ───────────────────────────────────── */
@media (max-width: 959px) {
	/* 装飾日付はメタ行の更新日と重複。隠してタイトルに横幅を返す */
	.c-postTitle__date {
		display: none;
	}
	.p-articleThumb {
		margin: 0 0 1em;
	}

	/* SPはPR表記を一段小さく（ユーザー要望 2026-08-21）。
	   ⚠ 11px を下限とする。景品表示法（ステマ規制）は広告であることを
	     「一般消費者が明瞭に認識できる」表示を求めるため、これ以下にしない。
	   ⚠ SPで更新日と1行に並べるのは**文字サイズでは解決しない**。実測（390px幅・
	     記事コンテナ320px）では 11px/padding8/アイコン無しでも28px超過する。
	     1行にするには文言を17文字以下にする必要がある（現在21文字）。 */
	/* ⚠ 高さは変数だけを書き換える。height:auto に戻すと行揃えの仕組みが壊れる。
	   24px = 文字11px × 1.5(=16.5) + padding 3+3 + border 1+1 ≒ ピルの高さ。 */
	.p-articleMetas.-top,
	.c-prNotation[data-style=big] {
		--acm-meta-h: 24px;
	}
	.c-prNotation[data-style=big] {
		padding: 3px 10px;
		font-size: 11px;
	}
	.c-prNotation[data-style=big] > i {
		font-size: 11px;
		margin-right: .35em;
	}
}

/* ── PC は余裕があるので少しだけ戻す ─────────────────── */
@media (min-width: 960px) {
	.p-articleThumb {
		margin: 0 0 1.2em;
	}
}