@charset "UTF-8";
/*
    Theme Name: Media Base Child
    Template: swell
    Description: 新規メディア共通の SWELL 子テーマ。骨格（ヘッダー・トップ・サイドバー・フッター）は子テーマが持ち、SWELL は記事本文の部品として使う。
    Version: 2.0.0
    Author: pricey
*/

/*
 * このファイルはサイトごとに書き換えない。
 * サイト固有の値は variables.css が :root に流し込むので、ここでは var() を参照するだけにする。
 *
 * 見本: .claude/skills/launch-media/references/common-design/（base.css / article.css）
 * 条件: .claude/skills/launch-media/references/design-gates.md
 *
 * 🚨 装飾を足す方向で直さない。区切りは「背景色 / 線1本 / 余白」のどれか1つだけ。
 * 枠線と影を同時に使わない。ブランド色は線と文字に使い、面（ベタ塗りの帯）には使わない。
 * 12px 未満の文字を作らない。
 */

/* ===========================================================
   変数
   🚨 `:root` ではなく `:where(:root)` で書く。詳細度が 0 になるので、
   読み込み順に関係なく variables.css（サイト固有の :root）が勝つ。
   =========================================================== */
:where(:root) {
	/* サイト固有（variables.css が上書きする）。ここは未配置のときの既定値 */
	--color-primary: #1f6feb;
	--color-primary-dark: #1552b0;
	--color-accent: #f59f00;
	--color-text: #23282d;
	--color-text-muted: #5c6670;
	--color-bg: #ffffff;
	--color-bg-subtle: #f6f7f9;
	--color-border: #e3e6ea;

	/* 共通の無彩色。背景は無彩色にする（薄いブランド色にすると、どのサイトも同じパステルになる） */
	--lm-paper: #f7f6f3;   /* ページの地。生成り。純白だと白い面が浮かない */
	--lm-paper-2: #eceae4; /* サムネイルが無いときの枠 */
	--lm-line: #e2e0da;
	--lm-ink-2: #4a5259;
	--lm-ink-3: #7c868e;
	--lm-surface: #ffffff; /* ヘッダー・フッター・トップの導入 */

	/* H2 の面と、太字の下線だけに使う淡いブランド色 */
	--lm-brand-soft: color-mix(in srgb, var(--color-primary) 7%, #ffffff);

	/* 和文は system font のまま（Web フォントを読まない） */
	--lm-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;

	--lm-max: 1120px;
	--lm-gutter: 20px;

	/* 余白の刻み */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;

	--radius: 4px;
}

/* ===========================================================
   SWELL の変数を見本の値に合わせる
   🚨 SWELL は :root に直接書く（インラインの <style> と main.css のメディアクエリ）。
   html:root で詳細度を上げて上書きする。
   =========================================================== */
html:root {
	--color_bg: var(--lm-paper);
	--color_text: var(--color-text);
	--swl-font_family: var(--lm-font);
	--swl-font_weight: 400;
	--swl-pad_container: var(--lm-gutter);
	/* 🚨 H2 が本文の左右にはみ出す指定。量産型の SWELL を見分ける一番確実な指紋 */
	--swl-h2-margin--x: 0;
	/* 本文の左右の内側余白（PC で 16px）。本文幅が見本の 706px より 32px 狭くなる */
	--swl-pad_post_content: 0;
}

@media (min-width: 960px) {
	html:root {
		--lm-gutter: 24px;
		/* 見本: 最大 1120px − 左右 24px = 1072px。本文 728 + 間隔 64 + サイドバー 280 */
		--container_size: 1072px;
		--swl-sidebar_width: 280px;
		--swl-sidebar_margin: 64px;
	}
}

/* 見本の土台は 17px / 行間 1.9。SWELL の既定（16px / 1.6）のままだと、
   ヘッダー・フッター・一覧の高さが全部見本より詰まる */
body {
	font-family: var(--lm-font);
	font-size: 17px;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

/* ===========================================================
   ヘッダー（parts/header/header_contents.php）
   ベタ塗りの帯にしない。地は白、下に線1本
   =========================================================== */
/* 🚨 SWELL の .l-header は影（0 1px 4px）を持つ。線と影を同時に使わない */
#header.lm-hd {
	background: var(--lm-surface);
	border-bottom: 1px solid var(--lm-line);
	box-shadow: none;
	color: var(--color-text);
}

.lm-hd__in {
	max-width: var(--lm-max);
	margin: 0 auto;
	padding: 14px var(--lm-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.lm-logo {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.9;
	color: var(--color-text);
	text-decoration: none;
}

.lm-logo__dot {
	color: var(--color-primary);
}

.lm-hd__tag {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--lm-ink-3);
}

.lm-hd__nav {
	flex-basis: 100%;
	display: flex;
	gap: 16px;
	font-size: 13px;
}

.lm-hd__nav a {
	color: var(--lm-ink-2);
	text-decoration: none;
}

@media (min-width: 821px) {
	.lm-hd__in {
		flex-wrap: nowrap;
		gap: 14px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.lm-logo {
		font-size: 21px;
	}

	.lm-hd__nav {
		flex-basis: auto;
		margin-left: auto;
		gap: 20px;
	}
}

/* ===========================================================
   見出し（トップ・サイドバー）: 左の縦線
   =========================================================== */
.lm-h2 {
	margin: 0 0 18px;
	padding-left: 12px;
	border-left: 3px solid var(--color-primary);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--color-text);
}

/* サイドバーの見出し。本文の H2（左罫＋面）とは形を変えて、
   本文と区別がつくようにする。下にブランド色の太い線。 */
.lm-h2--side {
	font-size: 15px;
	padding: 0 0 10px;
	border-left: none;
	border-bottom: 3px solid var(--color-primary);
	margin-bottom: 4px;
}

/* ===========================================================
   🚨 詳細度で負けやすい。**負けても表示は崩れないので気づけない。**

   - SWELL は `.c-balloon .c-balloon__iconImg`（クラス2つ）や
     `#main_content .p-toc` のように、強いセレクタで書いている
   - このファイル自身にも `.lm-side__list a`（0,1,1）のような指定がある

   **新しく書くときは、当てたい要素に既に当たっている指定を先に探す。**
   `getComputedStyle` で実物を測るまで、効いているかは分からない。
   =========================================================== */

/* ===========================================================
   記事ページ
   🚨 SWELL は #main_content .p-toc など id 付きで指定している。
   クラスだけで書くと負けるので、記事ページの指定は #main_content から書く。
   数値は実在メディアの実測（価格.comマガジン・ライフハッカー）: 17px / 行間1.9 / 1行約40字
   =========================================================== */

/* SWELL の l-content は上に 4em の余白を持つ。見本は 36px（スマホ 26px） */
.single #content.l-content,
.page #content.l-content {
	padding-top: 26px;
}

@media (min-width: 960px) {
	.single #content.l-content,
	.page #content.l-content {
		padding-top: 36px;
	}
}

/* ── 記事の頭（parts/single/post_head.php） ── */
.lm-ahead__cat {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	text-decoration: none;
}

.lm-ahead__ttl {
	margin: 10px 0 14px;
	font-size: 25px;
	line-height: 1.5;
	font-weight: 800;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
	color: var(--color-text);
}

.lm-ahead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--lm-line);
	font-size: 13px;
	color: var(--lm-ink-3);
}

.lm-ahead__pr {
	margin-top: 12px;
	font-size: 13px;
}

/* アイキャッチ。SWELL は本文より広く出すことがある。本文の幅に収める */
#main_content .p-articleThumb {
	max-width: 706px;
	margin: 30px 0 0;
}

@media (min-width: 960px) {
	.lm-ahead__ttl {
		font-size: 32px;
	}
}

/* ── 本文。40字 × 17px ≒ 706px ── */
#main_content .post_content {
	max-width: 706px;
	margin-top: 30px;
	line-height: 1.9;
	--swl-block-margin: 24px;
}

#main_content .post_content p {
	margin: 0 0 24px;
}

/* 🚨 H2 は本文と同じ幅に収める（--swl-h2-margin--x を 0 にしてある）。
   h2_type を '' にしてあるので、SWELL の帯と ::before の線は出ない。念のため消す */
#main_content .post_content h2:not(.is-style-section_ttl) {
	margin: 48px 0 18px;
	padding: 12px 14px;
	background: var(--lm-brand-soft);
	border: none;
	border-left: 5px solid var(--color-primary);
	border-radius: 0 2px 2px 0;
	font-size: 19px;
	line-height: 1.55;
	font-weight: 800;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

#main_content .post_content h2:not(.is-style-section_ttl)::before,
#main_content .post_content h2:not(.is-style-section_ttl)::after,
#main_content .post_content h3::before,
#main_content .post_content h3::after {
	content: none;
}

/* SWELL の H3 は下線の左 29.3% だけ主色になる。途中で色が変わる線は使わない */
#main_content .post_content h3 {
	margin: 38px 0 14px;
	padding: 0 0 0 14px;
	background: none;
	border: none;
	border-left: 3px solid var(--color-primary);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 800;
	color: var(--color-text);
}

#main_content .post_content ul,
#main_content .post_content ol {
	margin: 0 0 24px;
	padding-left: 1.4em;
}

#main_content .post_content li {
	margin-bottom: 10px;
}

#main_content .post_content strong {
	font-weight: 800;
	background: linear-gradient(transparent 62%, var(--lm-brand-soft) 62%);
}

#main_content .post_content a:not([class]) {
	color: var(--color-primary);
}

@media (min-width: 960px) {
	#main_content .post_content h2:not(.is-style-section_ttl) {
		margin: 64px 0 22px;
		padding: 14px 18px;
		font-size: 22px;
	}

	#main_content .post_content h3 {
		margin: 48px 0 16px;
		font-size: 19px;
	}
}

/* ── 表。見出し行をベタ塗りしない。縦の罫を引かない ── */
#main_content .post_content table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	font-size: 15px;
}

#main_content .post_content th,
#main_content .post_content td {
	padding: 12px 14px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--lm-line);
	line-height: 1.9;
	color: var(--color-text);
	text-align: left;
}

#main_content .post_content th {
	font-weight: 800;
}

#main_content .post_content thead th,
#main_content .post_content thead td {
	border-bottom: 2px solid var(--color-text);
	white-space: nowrap;
}

/* ── 目次。上下の罫だけ。囲まない（SWELL の index_style は 'border' にしてある） ── */
#main_content .p-toc {
	width: auto;
	max-width: 706px;
	margin: 0 0 34px;
	padding: 18px 0;
	background: none;
	border: none;
	border-top: 1px solid var(--lm-line);
	border-bottom: 1px solid var(--lm-line);
	box-shadow: none;
}

#main_content .p-toc::before,
#main_content .p-toc::after,
#main_content .p-toc__ttl::before,
#main_content .p-toc__ttl::after {
	content: none;
}

#main_content .p-toc__ttl {
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	font-weight: 800;
	text-align: left;
	color: var(--color-text);
}

#main_content .p-toc__list {
	margin: 0;
	padding-left: 1.3em;
	font-size: 15px;
}

#main_content .p-toc__list li {
	margin-bottom: 8px;
}

#main_content .p-toc a {
	color: var(--lm-ink-2);
	text-decoration: none;
	border: none;
}

/* ===========================================================
   SWELL の本文部品のうち、配色を変えても残る指紋（design-gates.md の 4）
   =========================================================== */

/* 吹き出し: 80px の丸アイコン＋2px の薄い枠＋10px の名前 */
/* 吹き出しのアイコン。
   🚨 SWELL の指紋は「丸」ではなく **2px の薄グレー枠（#ececec）** のほう。
   丸のまま、枠を紙の色にして絵から浮かせる。四角にすると絵の背景が
   角まで届いて重くなる。大きさは本文2行ぶん（約65px）に収まる 56px。

   🚨 **クラス3つで書く。** SWELL は `.c-balloon .c-balloon__iconImg`（クラス2つ）と
   `.-circle > .c-balloon__iconImg` で指定しているので、クラス1つだと負ける。
   負けても表示は崩れないので気づきにくい（80px・灰色の枠のまま出ていた）。 */
.c-balloon .c-balloon__icon .c-balloon__iconImg {
	width: 56px;
	height: 56px;
	border: 3px solid var(--lm-paper);
	box-shadow: none;
}

.c-balloon__iconName {
	font-size: 12px;
}

/* キャプション付きの箱: 四方を囲まず、見本の「結論」と同じ左の太罫とラベルにする */
#main_content .post_content .cap_box {
	padding: 20px 0 20px 22px;
	border: none;
	border-left: 4px solid var(--color-primary);
	background: none;
	box-shadow: none;
}

#main_content .post_content .cap_box_ttl {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-primary);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-align: left;
}

#main_content .post_content .cap_box_ttl::before,
#main_content .post_content .cap_box_ttl::after {
	content: none;
}

#main_content .post_content .cap_box_content {
	padding: 0;
	border: none;
	background: none;
}

#main_content .post_content .cap_box_content > :last-child {
	margin-bottom: 0;
}

/* アイキャッチ: 影を付けない（浮かせる理由が無い） */
#main_content .p-articleThumb,
#main_content .p-articleThumb__img {
	box-shadow: none;
}

/* 一覧のカテゴリーラベル: 色の付いた帯にしない */
/* ⚠️ SWELL に `.-type-list .c-postThumb__cat`（クラス2つ）がある。
   一覧の型が -type-list / -type-list2 のときは、この指定が負ける。
   いまの一覧では使っていないが、型を変えたら確かめる。 */
.c-postThumb__cat {
	background: var(--lm-surface);
	color: var(--color-text);
	font-size: 12px;
}

/* ボタン: 80px の丸（ピル型）をやめる。SWELL は .is-style-btn_* に --the-btn-radius を
   エディター設定から書き出すので、詳細度を上げて変数ごと上書きする */
.post_content [class*="is-style-btn_"] {
	--the-btn-radius: var(--radius);
}

/* ボタン: 影と光るアニメーションを付けない */
.post_content [class*="is-style-btn_"] a,
.post_content .swell-block-button__link {
	box-shadow: none;
}

.post_content [class*="is-style-btn_"] a::before,
.post_content [class*="is-style-btn_"] a::after {
	display: none;
}

/* ===========================================================
   本文の部品（記事 HTML で使うクラス）
   =========================================================== */

/* 表とコードは、狭い画面でページ全体を横スクロールさせない */
.scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.base-button {
	display: inline-block;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius);
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.5;
}

.base-button:hover,
.base-button:focus {
	background: var(--color-primary-dark);
	color: #fff;
}

.base-button--accent {
	background: var(--color-accent);
	color: var(--color-text);
}

/* 🚨 ボタンを除く。本文のリンク色の指定は .base-button より詳細度が高く、
   ボタンの文字がリンク色で塗られて背景と同化する */
.article-body a:not(.base-button) {
	color: var(--color-primary);
}

.article-body img,
.article-body video,
.article-body iframe {
	max-width: 100%;
	height: auto;
}

/* ===========================================================
   サイドバー（sidebar.php）。記事ページだけ
   🚨 幅は SWELL の変数（--swl-sidebar_width）に合わせる。自前の幅で出すと
   本文との合計がはみ出し、flex-wrap で記事の下に回り込む
   =========================================================== */
.lm-side {
	width: 100%;
	margin-top: var(--space-xl);
}

@media (min-width: 960px) {
	.lm-side {
		width: var(--swl-sidebar_width, 280px);
		flex: none;
		margin-top: 0;
	}
}

.lm-side__sec + .lm-side__sec {
	margin-top: 32px;
}

/* サイドバーの先頭。記事が1本も無くても出る（見本 article-1.html と同じ形）。
   見出しは lm-h2--side の縦線ではなく、上下の罫で囲って先頭だと分かるようにする。 */
.lm-side__about {
	padding: 18px 0 20px;
	border-top: 2px solid var(--color-text);
	border-bottom: 1px solid var(--color-border);
}

/* 「このサイトについて」の見出しは下線を付けない。
   このブロック自体が上下の罫で囲まれているので、足すと線が重なる。
   下線を使うのは、罫で囲んでいない「新着記事」などの見出し。 */
.lm-side__aboutTtl {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
}

/* サイドバーの新着記事。左に横長のサムネ、右にタイトル。

   🚨 `.lm-side__list a`（クラス1つ＋要素 = 0,1,1）が同じファイルにあるので、
   `.lm-sidePost__link`（0,1,0）だけでは display:block に負ける。
   リストの中の a として書いて、同じ強さ以上にする。

   🚨 .lm-thumb は front.css（トップでだけ読む）にあるので記事ページでは
   当たらない。ここで自前で持つ。 */
.lm-side__list--posts a.lm-sidePost__link {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 14px 0;
}

.lm-sidePost .lm-thumb {
	/* 横長。正方形だと絵の情報が落ちるうえ、行が高くなる */
	aspect-ratio: 4 / 3;
	background: var(--lm-paper-2);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}

.lm-sidePost .lm-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lm-sidePost .lm-thumb__fallback {
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	color: var(--color-text-muted);
}

.lm-sidePost__title {
	font-size: 14px;
	line-height: 1.55;
}

.lm-side__aboutTxt {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--color-text-muted);
}

.lm-side__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.lm-side__list li {
	border-bottom: 1px solid var(--lm-line);
}

.lm-side__list a {
	display: block;
	padding: 10px 0;
	color: var(--color-text);
	text-decoration: none;
}

.lm-side__list--posts a {
	padding: 12px 0;
	line-height: 1.65;
}

/* ===========================================================
   フッター（footer.php）。地は白、上に線1本
   =========================================================== */
.lm-footer {
	margin-top: 72px;
	padding: 36px 0 28px;
	background: var(--lm-surface);
	border-top: 1px solid var(--lm-line);
}

/* SWELL は l-content の下に 6em の余白を持つ。フッターの余白と二重にしない */
#content.l-content {
	margin-bottom: 0;
}

.lm-footer__inner {
	max-width: var(--lm-max);
	margin: 0 auto;
	padding: 0 var(--lm-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.lm-footer__brand {
	flex: 1 1 240px;
}

.lm-footer__name {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	color: var(--color-text);
}

.lm-footer__desc {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--lm-ink-3);
}

.lm-footer__head {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--lm-ink-3);
}

.lm-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lm-footer__col li {
	margin-bottom: 6px;
	font-size: 13px;
}

.lm-footer__col a {
	color: var(--lm-ink-2);
	text-decoration: none;
}

.lm-footer__copy {
	max-width: var(--lm-max);
	margin: 26px auto 0;
	padding: 16px var(--lm-gutter) 0;
	border-top: 1px solid var(--lm-line);
	font-size: 12px;
	color: var(--lm-ink-3);
}

@media (min-width: 821px) {
	.lm-footer__name {
		font-size: 21px;
	}

	.lm-footer__inner {
		gap: 48px;
	}
}