/*
Theme Name: モトネタツーシン 自動車
Theme URI: https://car.netamoto.news/
Description: モトネタツーシンのAutomotiveニュースサイト専用ブロックテーマ。
Version: 0.2.0
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.3
Text Domain: netamoto-car
*/

/*
 * Hallmark · genre: editorial · macrostructure: dense news index · design-system: design.md
 *
 * ------------------------------------------------------------------------
 * この 1 枚で面ごとの見た目を決め切る。上書きの層を重ねない。
 * ------------------------------------------------------------------------
 *
 * 以前の版は「前段の指定を後段が打ち消す」層が 4 重に積まれており、直したい箇所を
 * 直すたびに、どの層が最後に勝つかを追う作業が必要だった。層が増えるほど、次の修正が
 * 前の修正を戻す。だから**面ごとに決める場所を 1 か所だけ**にする。
 *
 * 幅の作りは 2 状態しかない（ITmedia・PC Watch と同じ）。
 *
 *   - 768px 以上： 1080px の**固定**。画面を狭めても縮まない（横スクロールになる）
 *   - 768px 未満： 画面幅に合わせた 1 カラム
 *
 * 中間の伸縮帯を持たないことが要点である。伸縮帯があると、幅ごとに崩れ方が違う無数の
 * 状態が生まれ、それを個別に塞ぐ層が積み上がる。前の版で起きていたのはこれだった。
 */

/* ==========================================================================
   1. 下地
   ========================================================================== */

body {
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	line-height: 1.55;
	padding-inline: 0;
}

/*
 * 面の幅は**この 1 か所**で決める。ヘッダもジャンルの帯も本文もフッタも同じ枠に乗る
 * ので、左端が揃う（以前はヘッダ 1280・本文 1200 で 40px ずれていた）。
 */
body :is(
	.netamoto-car-header,
	.netamoto-car-header__categories,
	.netamoto-car-footer__inner,
	.netamoto-car-front-page,
	.netamoto-car-category-archive,
	.netamoto-car-tag-archive,
	.netamoto-car-archive,
	.netamoto-car-fallback,
	.netamoto-car-search,
	.netamoto-car-single
),
.netamoto-car-network-bar .netamoto-car-site-network-nav {
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: 0;
	width: var(--wp--custom--layout--site-width);
}

/*
 * 帯（サイト群・ジャンル・フッタ）は画面の端から端まで伸ばす。中身だけが枠に収まる。
 */
body :is(.netamoto-car-network-bar, .netamoto-car-category-bar, .netamoto-car-footer) {
	margin-inline: 0;
	max-width: none;
	padding-inline: 0;
	width: 100%;
}

/*
 * WordPress の constrained レイアウトは、直下の子を contentSize へ押し込む。面は自分で
 * 幅を持っているので、その中の組み立ては面いっぱいを使わせる。
 */
body :is(
	.netamoto-car-header,
	.netamoto-car-front-page,
	.netamoto-car-index__columns,
	.netamoto-car-index__main,
	.netamoto-car-category-archive,
	.netamoto-car-single
) > * {
	max-width: none;
	width: 100%;
}

.netamoto-car-content {
	min-height: 50vh;
}

/* ==========================================================================
   2. 最上部のサイト群バー
   ========================================================================== */

.netamoto-car-network-bar {
	background: var(--wp--preset--color--shell);
	color: var(--wp--preset--color--base);
}

.netamoto-car-site-network-nav__list {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.netamoto-car-site-network-nav__link,
.netamoto-car-site-network-nav__current {
	align-items: center;
	display: flex;
	font-size: 0.75rem;
	font-weight: 700;
	gap: 0.375rem;
	padding: 0.4375rem 0.75rem;
}

/*
 * 縦ごとのイメージカラーは、その縦の名札として四角で示す（AI は青、自動車は赤）。
 * 色は描画側が `--netamoto-site-mark` に載せてくる。ここは置き場所だけを決める。
 */
.netamoto-car-site-network-nav__link::before,
.netamoto-car-site-network-nav__current::before {
	background: var(--netamoto-site-mark, var(--wp--custom--color--site-accent));
	block-size: 0.5rem;
	content: "";
	display: block;
	inline-size: 0.5rem;
}

.netamoto-car-site-network-nav__link,
.netamoto-car-site-network-nav__link:visited {
	color: var(--wp--preset--color--border);
}

.netamoto-car-site-network-nav__link:hover,
.netamoto-car-site-network-nav__link:active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.netamoto-car-site-network-nav__link:focus-visible {
	outline: var(--wp--custom--presentation--focus--width) solid var(--wp--custom--color--site-focus);
	outline-offset: var(--wp--custom--presentation--focus--offset);
}

/* 今いる縦は、自分の色の下線で示す。 */
.netamoto-car-site-network-nav__current {
	box-shadow: inset 0 -3px 0 var(--netamoto-site-mark, var(--wp--custom--color--site-accent));
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   3. ヘッダ
   ========================================================================== */

.netamoto-car-header {
	background: var(--wp--preset--color--base);
}

.netamoto-car-header__primary {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	justify-content: space-between;
	padding-block: 0.75rem;
}

.netamoto-car-header__identity {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.875rem;
	min-width: 0;
}

.netamoto-car-site-brand {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.netamoto-car-site-brand__home {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.625rem;
	max-width: 100%;
	white-space: nowrap;
}

.netamoto-car-site-brand__logo {
	display: block;
	flex: 0 1 auto;
	max-width: 100%;
}

/* 板の色は color から来る。縦を増やしてもこの 1 行だけが効く。 */
.netamoto-car-site-brand__logo svg {
	color: var(--wp--preset--color--contrast);
	display: block;
	height: 2rem;
	width: auto;
}

.netamoto-car-site-brand--wordmark .netamoto-car-site-brand__logo svg {
	height: 1.375rem;
}

.netamoto-car-site-brand__name {
	color: var(--wp--preset--color--contrast);
	font-size: 1.75rem;
	font-weight: 900;
	letter-spacing: -0.06em;
	min-width: 0;
}

.netamoto-car-site-brand__field {
	color: var(--wp--custom--color--site-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	min-width: 0;
	text-transform: uppercase;
}

.netamoto-car-header__tagline {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	margin: 0;
	min-width: 0;
	white-space: nowrap;
}

/*
 * 検索。ボタンは絶対配置にしない。
 *
 * 以前は狭い画面向けにボタンだけを `left` の実数で置いており、画面がその実数より
 * 広いと**入力欄のど真ん中にボタンが取り残された**。並べたい物は並べる指定で並べる。
 */
.netamoto-car-header__search {
	flex: 0 0 auto;
	margin: 0;
	max-width: 16rem;
	width: 16rem;
}

.netamoto-car-header__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: nowrap;
	padding: 0;
}

.netamoto-car-header__search .wp-block-search__input {
	border: 0;
	flex: 1 1 auto;
	font-size: 0.8125rem;
	min-width: 0;
	padding: 0.375rem 0.5rem;
}

.netamoto-car-header__search .wp-block-search__button {
	background: var(--wp--preset--color--shell);
	border: 0;
	color: var(--wp--preset--color--base);
	flex: 0 0 auto;
	font-size: 0.75rem;
	margin: 0;
	padding: 0.375rem 0.75rem;
}

/* ==========================================================================
   4. ジャンルの帯（カテゴリ）
   ========================================================================== */

/*
 * ジャンルの切り替えは、その縦のイメージカラーの帯で示す。ここが画面のなかで
 * 最も色の面積が大きい場所であり、自動車版ではこの帯ごと赤になる。
 */
.netamoto-car-category-bar {
	background: var(--wp--custom--color--site-accent);
}

.netamoto-car-category-nav {
	box-sizing: border-box;
	max-width: 100%;
	position: relative;
}

.netamoto-car-category-nav__list {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * 縮ませない。1 行に収まらないときは**はみ出させて隠す**のが正しく、縮めると
 * 名前が潰れて読めなくなる（収まらなかったことは「すべて」で受ける）。
 */
.netamoto-car-category-nav__item {
	flex: 0 0 auto;
	min-width: 0;
}

.netamoto-car-category-nav__link {
	display: block;
	font-size: 0.8125rem;
	padding: 0.5625rem 0.875rem;
	white-space: nowrap;
}

/*
 * 未読・既読で表現を変えない。`a:visited`（0,1,1）は単一クラス（0,1,0）より詳細度で
 * 勝つため、状態を並べて明示しないと訪問済みのカテゴリだけ色が変わる。
 *
 * 色と太さ**だけ**をこの並びで指定する。padding のような寸法を混ぜると `:hover`
 * だけが寸法を上書きし、カーソルを載せた瞬間に位置がずれる。
 */
.netamoto-car-category-nav__link,
.netamoto-car-category-nav__link:visited,
.netamoto-car-category-nav__link:hover,
.netamoto-car-category-nav__link:active {
	color: var(--wp--custom--color--on-site-accent);
	font-weight: 600;
}

.netamoto-car-category-nav__link:hover,
.netamoto-car-category-nav__link:active {
	background: var(--wp--custom--color--site-accent-strong);
}

/* 選択中は、帯を抜いた白地で示す。 */
.netamoto-car-category-nav__link--current,
.netamoto-car-category-nav__link--current:visited,
.netamoto-car-category-nav__link--current:hover,
.netamoto-car-category-nav__link--current:active {
	background: var(--wp--preset--color--base);
	color: var(--wp--custom--color--site-accent);
	font-weight: 700;
}

.netamoto-car-category-nav__link:focus-visible {
	outline: var(--wp--custom--presentation--focus--width) solid var(--wp--custom--color--site-focus);
	outline-offset: var(--wp--custom--presentation--focus--offset);
}

/*
 * 「すべて」は、カテゴリが 1 行に収まらなかったときだけスクリプトが出す。
 * 収まっている限り現れないので、広い画面には無い。
 */
.netamoto-car-category-nav__more {
	background: var(--wp--custom--color--site-accent-strong);
	border: 0;
	color: var(--wp--custom--color--on-site-accent);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.5625rem 0.75rem;
}

.netamoto-car-category-nav__more[hidden] {
	display: none;
}

.netamoto-car-category-nav__more::after {
	content: " ▾";
}

[data-netamoto-category-nav][data-expanded="true"] .netamoto-car-category-nav__more::after {
	content: " ▴";
}

/* ==========================================================================
   5. TOP STORIES
   ========================================================================== */

.netamoto-car-hero-stories {
	box-sizing: border-box;
	max-width: 100%;
}

/*
 * TOP STORIES と新着ニュースは**対になる節**なので、同じ寸法・同じ罫で見出しを出す
 * （運営者判断 2026-08-08）。片方だけ大きいと、上下関係のある入れ子に見える。
 * ここへイメージカラーを使うのはこの 2 つと脇の欄までで、それ以外の罫は黒で引く。
 */
.netamoto-car-front-page__section-label,
.netamoto-car-front-page__latest-heading,
.netamoto-car-popular-stories__heading {
	border-bottom: 2px solid var(--wp--custom--color--site-accent);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	padding-bottom: 0.25rem;
}

.netamoto-car-front-page__section-label {
	letter-spacing: 0.08em;
}

/*
 * 節と節を分ける線は黒（運営者判断 2026-08-08）。見出しの罫まで含めて青にすると
 * 画面の中で青が増えすぎ、ジャンルの帯という**本当に色で示したい場所**が埋もれる。
 */
.netamoto-car-front-page__hero {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	margin-block: 0.75rem 1rem;
	padding-bottom: 1rem;
}

/*
 * 間隔は枠の割り付けの一部である（660 + 380 + 40 = 1080）。余白の目盛りから借りると、
 * 目盛りが変わった日に合計が枠に合わなくなる。だから幅と同じトークンから取る。
 */
.netamoto-car-hero-stories__grid {
	display: grid;
	gap: var(--wp--custom--layout--column-gap);
	grid-template-columns: minmax(0, 1fr);
}

/*
 * 3 件の箱は**中身より先に決まる**。画像は 16:9 に固定して切り抜き、見出しは行数で
 * 切る。どんな画像・どんな長さの見出しが来ても、枠の形は動かない。
 *
 * 広い画面では画像を**見出しの横**に置く（運営者判断 2026-08-08）。画像の上に見出しを
 * 積むと、右 2 件が「16:9 の画像＋文字」を 2 段重ねる形になり、それだけで 600px を
 * 超えていた。横に置けば箱の高さは画像 1 枚ぶんで決まり、節全体が半分以下になる。
 *
 * 高さを実数で決め打ちにはしない。左は右 2 件ぶんの高さを与えられる側なので、行を
 * 等分（`1fr`）にすれば釣り合いは自動的に取れる。
 */
.netamoto-car-hero-stories__story {
	background: var(--wp--preset--color--base);
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
	overflow: hidden;
}

.netamoto-car-hero-stories__media {
	align-self: start;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.netamoto-car-hero-stories__media a {
	display: block;
	height: 100%;
}

/*
 * 枠を埋めるため切り抜く。上端を残すのは、本サイトが生成する図版が見出しを上に置く
 * ためで、縦を削るときに見出しから消えないようにする。
 *
 * なお、切り抜きが起きること自体が本来おかしい。生成される画像の縦横比が 1.0〜2.89 と
 * ばらついているのが元であり、直す場所は生成側である（枠に合わせて作れば切り抜きは
 * 何も削らなくなる）。ここは、そうなるまでの受け止めでしかない。
 */
.netamoto-car-hero-stories__image {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

/*
 * カテゴリと日付は**同じ 1 行**に置く（左にカテゴリ、右に日付）。日付を下端へ落とすと
 * その分だけ箱が高くなり、右 2 件の合計が先頭記事の高さを追い越して、先頭記事の中に
 * 空白が残る。行を減らすことが、そのまま高さの釣り合いになる。
 */
.netamoto-car-hero-stories__content {
	align-content: start;
	display: grid;
	gap: 0.25rem 0.5rem;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0.5rem 0 0;
}

.netamoto-car-hero-stories__categories {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	grid-column: 1;
	grid-row: 1;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	white-space: nowrap;
}

.netamoto-car-hero-stories__categories a {
	font-size: 0.6875rem;
	font-weight: 800;
}

.netamoto-car-hero-stories__title {
	font-size: 1rem;
	grid-column: 1 / -1;
	grid-row: 2;
	line-height: 1.4;
	margin: 0;
	overflow-wrap: anywhere;
}

/* 見出しの箱ぜんぶを押せる面にする。 */
.netamoto-car-hero-stories__title a,
.netamoto-car-day-archive__title a {
	display: block;
	overflow: hidden;
}

/* そのうえで、行数で切って高さを固定する。 */
.netamoto-car-hero-stories__title a {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
}

.netamoto-car-hero-stories__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	font-size: 0.8125rem;
	grid-column: 1 / -1;
	grid-row: 3;
	line-height: 1.6;
	margin: 0.25rem 0 0;
	overflow: hidden;
}

.netamoto-car-hero-stories__date {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	grid-column: 2;
	grid-row: 1;
	white-space: nowrap;
}

.netamoto-car-hero-stories__story--lead .netamoto-car-hero-stories__title {
	font-size: 1.4375rem;
}

.netamoto-car-hero-stories__story--lead .netamoto-car-hero-stories__title a {
	-webkit-line-clamp: 3;
}

/* ==========================================================================
   6. 新着ニュース（日付別一覧）
   ========================================================================== */

.netamoto-car-front-page__intro {
	margin-block: var(--wp--preset--spacing--40);
}

.netamoto-car-front-page__description {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/*
 * 一覧の面はトップもカテゴリも、記事の面も同じ 2 段組にする。1 段で 1080px を使うと
 * 右側が大きく空く。脇の欄を置けばその幅が埋まり、読者が次に読むものへも移れる。
 */
.netamoto-car-index__columns {
	display: grid;
	gap: var(--wp--custom--layout--column-gap);
	grid-template-columns: var(--wp--custom--layout--main-column) var(--wp--custom--layout--side-column);
}

.netamoto-car-front-page__latest-heading {
	margin-block: 0 0.5rem;
}

.netamoto-car-category-archive {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.netamoto-car-category-heading {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	margin-block: 0 var(--wp--preset--spacing--40);
	padding-bottom: 0.375rem;
}

.netamoto-car-category-heading__title {
	font-size: 1.25rem;
	margin: 0;
}

.netamoto-car-category-heading__description {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	margin-top: 0.25rem;
}

.netamoto-car-day-archive,
.netamoto-car-day-archive__day,
.netamoto-car-day-archive__stories {
	display: block;
	min-width: 0;
}

/*
 * 日付は黒の細い罫線で区切る（運営者判断 2026-08-08）。色板の帯にしたところ、同じ青が
 * 一覧の全長にわたって何度も現れ、ジャンルの帯より目立ってしまった。
 */
.netamoto-car-day-archive__date {
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	font-weight: 700;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-bottom: 0.25rem;
}

.netamoto-car-day-archive__day:first-child .netamoto-car-day-archive__date {
	margin-top: 0;
}

.netamoto-car-day-archive__story {
	align-items: start;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 0.875rem;
	grid-template-columns: 7rem minmax(0, 1fr);
	padding: 0.625rem 0;
}

.netamoto-car-day-archive__media {
	overflow: hidden;
}

.netamoto-car-day-archive__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.netamoto-car-day-archive__content {
	display: grid;
	gap: 0.125rem;
	grid-template-columns: minmax(0, 1fr) auto;
	min-width: 0;
}

.netamoto-car-day-archive__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	grid-column: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.netamoto-car-day-archive__categories a {
	font-size: 0.6875rem;
	font-weight: 700;
}

.netamoto-car-day-archive__time {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	grid-column: 2;
	grid-row: 1 / span 2;
}

.netamoto-car-day-archive__title {
	font-size: 0.9375rem;
	grid-column: 1;
	line-height: 1.45;
	margin: 0;
}

.netamoto-car-day-archive__title a {
	color: var(--wp--preset--color--contrast);
}

.netamoto-car-day-archive__empty {
	color: var(--wp--preset--color--muted);
	padding-block: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   7. 脇の欄（アクセスランキング）
   ========================================================================== */

/*
 * 読み終えた読者が次を探す場所なので、本文に付いて動く。以前は 5 本で終わり、
 * そこから下が数千 px の空白だった。
 */
.netamoto-car-popular-stories {
	align-self: start;
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: var(--wp--preset--spacing--40);
	position: sticky;
	top: 0.75rem;
}



.netamoto-car-popular-stories__list {
	counter-reset: rank;
	list-style: none;
	margin: 0;
	padding: 0;
}

.netamoto-car-popular-stories__item {
	border-bottom: 1px solid var(--wp--preset--color--border);
	counter-increment: rank;
}

.netamoto-car-popular-stories__link {
	align-items: start;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1.25rem 5rem minmax(0, 1fr);
	padding: 0.5rem 0;
}

.netamoto-car-popular-stories__media {
	display: block;
}

.netamoto-car-popular-stories__link::before {
	color: var(--wp--custom--color--site-accent);
	content: counter(rank);
	font-size: 0.875rem;
	font-weight: 800;
	text-align: center;
}

.netamoto-car-popular-stories__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.netamoto-car-popular-stories__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
	font-size: 0.75rem;
	line-height: 1.45;
	overflow: hidden;
}

.netamoto-car-popular-stories__empty {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
}

/* ==========================================================================
   8. ページ送り
   ========================================================================== */

/*
 * 何ページ目かは**常に画面の中央**に出す（運営者判断 2026-08-08）。
 *
 * 左右に振り分けた並びだと、片方のボタンが無いページで余白の取り方が変わり、位置が
 * 動く。3 列に切って真ん中の列へ置けば、ボタンが 0 個でも 2 個でも中央から動かない。
 */
.netamoto-car-pager {
	align-items: center;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr auto 1fr;
	padding-block: var(--wp--preset--spacing--50);
}

.netamoto-car-pager__link--previous,
.netamoto-car-pager .wp-block-query-pagination-previous {
	grid-column: 1;
	justify-self: start;
}

.netamoto-car-pager__position,
.netamoto-car-pager .wp-block-query-pagination-numbers {
	grid-column: 2;
	justify-self: center;
}

.netamoto-car-pager__link--next,
.netamoto-car-pager .wp-block-query-pagination-next {
	grid-column: 3;
	justify-self: end;
}

.netamoto-car-pager__link,
.netamoto-car-pager__link:visited {
	align-items: center;
	border: 1px solid var(--wp--custom--color--site-accent);
	color: var(--wp--custom--color--site-accent);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 0.375rem;
	padding: 0.4375rem 0.875rem;
}

.netamoto-car-pager__link:hover,
.netamoto-car-pager__link:active {
	background: var(--wp--custom--color--site-accent);
	color: var(--wp--custom--color--on-site-accent);
}

.netamoto-car-pager__position {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	white-space: nowrap;
}

/* ==========================================================================
   9. 記事ページ
   ========================================================================== */

/*
 * 記事の面は一覧と同じ 2 段組（主欄＋脇の欄）に乗せたので、本文の各部は主欄
 * いっぱいを使う。以前は 1080px の面に 760px の本文を中央置きしており、左右の
 * 空白が目立った。幅は欄の側（--main-column）が決める。
 */
body :is(
	.netamoto-car-single__title,
	.netamoto-car-single__meta,
	.netamoto-car-single__body,
	.netamoto-car-single__tags,
	.netamoto-car-single__source,
	.gensen-provenance
) {
	box-sizing: border-box;
	margin-inline: auto;
	width: 100%;
}

/*
 * 注目画像は主欄の 8 割に抑えて本文より一回り小さく見せる。引用画像の出典は画像の
 * 真下に置くため、本文の幅ではなく**画像の幅**に揃える。
 */
body :is(.netamoto-car-single__featured-image, .netamoto-car-single__image-credit) {
	box-sizing: border-box;
	margin-inline: auto;
	width: 80%;
}

.netamoto-car-single__article {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
	padding-block: var(--wp--preset--spacing--50);
	width: 100%;
}

.netamoto-car-single__title,
.netamoto-car-single__meta,
.netamoto-car-single__featured-image,
.netamoto-car-single__body,
.netamoto-car-single__tags,
.gensen-provenance {
	margin-block: 0;
}

/* 主欄が 1080px → 740px に狭まった分、見出しも一回り小さく（28px 相当 → 24px）。 */
.netamoto-car-single__title {
	font-size: 1.5rem;
}

.netamoto-car-single__meta {
	align-items: center;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	gap: var(--wp--preset--spacing--30);
}

/*
 * 単記事の注目画像は**原寸比のまま**見せる。一覧と違って縦の余裕があり、行の高さを
 * 揃える必要も無い。枠に押し込めて切り抜く（内容が欠ける）より、画像そのものの形で。
 */
.netamoto-car-single__featured-image {
	aspect-ratio: auto;
}

.netamoto-car-single__featured-image img {
	display: block;
	height: auto;
	width: 100%;
}

/*
 * 出典は画像の説明なので、画像の真下へ密着させる。記事グリッドの gap（1rem）が
 * 行間に必ず入るため、負マージンでそれを打ち消して 0.25rem だけ残す。
 */
.netamoto-car-single__image-credit {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.5;
	margin: calc(0.25rem - var(--wp--preset--spacing--40)) 0 0;
	overflow-wrap: anywhere;
	text-align: center;
}

/*
 * 画像と本文の間は行間の余白（グリッドの gap）だけだと詰まって見えるので、本文側に
 * 上マージンを足して離す。画像の下ではなく本文の上に置くのは、間に入る画像出典
 * （引用時のみ）と画像の間隔を崩さないため。
 */
.netamoto-car-single__body {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* 記事末尾の一次情報は「発表元: {URL}」の 1 行だけ（運営者判断 2026-08-07）。 */
.netamoto-car-single__source {
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.8125rem;
	line-height: 1.6;
	margin-block: var(--wp--preset--spacing--40) 0;
	overflow-wrap: anywhere;
	padding-top: 0.75rem;
}

.netamoto-car-single__source-label {
	color: var(--wp--preset--color--muted);
	margin-right: 0.375rem;
}

.netamoto-car-single__tags,
.gensen-provenance {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.netamoto-car-single__tags a {
	color: inherit;
}

.gensen-provenance {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
}

.gensen-provenance h2 {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.gensen-provenance p {
	margin-block: var(--wp--preset--spacing--20) 0;
}

/*
 * 検索結果と一覧の 1 件は「見出し・日時・要約 1 行」に詰める（運営者判断 2026-08-08）。
 * 以前は 1 件ずつが厚い箱で、画面に 4 件しか入らなかった。
 */
.netamoto-car-page-heading {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	padding-bottom: 0.25rem;
}

.netamoto-car-results {
	display: grid;
	gap: 1px;
}

.netamoto-car-result {
	align-items: start;
	box-sizing: border-box;
	display: grid;
	gap: 0.125rem 0.75rem;
	grid-template-columns: minmax(0, 1fr) auto;
	min-width: 0;
}

.netamoto-car-result :where(h2, p) {
	overflow-wrap: anywhere;
}

/*
 * WordPress は流し込みの組み方に「前の要素との間隔」を配る（`> * { margin-block-start }`）。
 * 升目で位置を決めるここでは、その間隔が升の中へ入り込み、同じ行に置いたはずの日時だけが
 * 1 行ぶん下へずれていた。位置は升目が決めるので、配られた間隔は受け取らない。
 */
.netamoto-car-result > * {
	margin-block-start: 0;
}

.netamoto-car-result__title {
	font-size: 0.9375rem;
	grid-column: 1;
	line-height: 1.45;
	margin: 0;
}

.netamoto-car-result__title a {
	color: var(--wp--preset--color--contrast);
	display: block;
}

.netamoto-car-result__title a:hover {
	text-decoration: underline;
}

.netamoto-car-result__date {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	grid-column: 2;
	grid-row: 1;
	white-space: nowrap;
}

.netamoto-car-result__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	font-size: 0.75rem;
	grid-column: 1 / -1;
	margin: 0;
	overflow: hidden;
}

.netamoto-car-results__empty {
	color: var(--wp--preset--color--muted);
	padding-block: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   10. フッタ
   ========================================================================== */

/*
 * フッタは**横 1 行**（運営者判断 2026-08-08）。ロゴは置かない。導線と著作権表示だけを
 * 左右に振り分ける。
 */
.netamoto-car-footer {
	background: var(--wp--preset--color--shell);
	color: var(--wp--preset--color--border);
	margin-top: var(--wp--preset--spacing--60);
}

.netamoto-car-footer__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem var(--wp--preset--spacing--50);
	justify-content: space-between;
	padding-block: 0.875rem;
}

.netamoto-car-info-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.netamoto-car-info-links__link,
.netamoto-car-info-links__link:visited {
	color: var(--wp--preset--color--border);
	font-size: 0.75rem;
	font-weight: 600;
}

.netamoto-car-info-links__link:hover,
.netamoto-car-info-links__link:active {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.netamoto-car-footer__copyright {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	margin: 0;
}

/* ==========================================================================
   11. 共通の決めごと
   ========================================================================== */

/*
 * 本サイトが作る画像は背景が白のため、枠が無いと地の色へ溶けて輪郭が消える。
 * 薄い枠で境界を示し、枠が高さを決める以上、中身のはみ出しは許さない。
 */
.netamoto-car-media-frame {
	aspect-ratio: var(--wp--custom--presentation--image--ratio);
	border: 1px solid var(--wp--preset--color--border);
	box-sizing: border-box;
	overflow: hidden;
}

/*
 * 下線は**本文の中のリンクにだけ**引く（運営者指摘 2026-08-08）。
 *
 * 以前は theme.json が `a` 全部に下線を指定し、見出し・カテゴリ・ページ送りが個別に
 * それを打ち消していた。打ち消し漏れた場所に意図しない下線が出る。既定を「引かない」
 * にすれば、引きたい場所だけを言えばよく、打ち消しが要らない。
 */
.netamoto-car-single__body a,
.netamoto-car-single__source a {
	text-decoration: underline;
}

.netamoto-car-hero-stories__title a:hover,
.netamoto-car-day-archive__title a:hover,
.netamoto-car-popular-stories__link:hover .netamoto-car-popular-stories__title,
.netamoto-car-hero-stories__categories a:hover,
.netamoto-car-day-archive__categories a:hover {
	text-decoration: underline;
}

.screen-reader-text {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

:where(
	.netamoto-car-header__primary,
	.netamoto-car-header__identity,
	.netamoto-car-site-network-nav__list,
	.netamoto-car-category-nav__list,
	.netamoto-car-hero-stories__grid,
	.netamoto-car-hero-stories__categories,
	.netamoto-car-hero-stories__content,
	.netamoto-car-day-archive,
	.netamoto-car-day-archive__stories,
	.netamoto-car-day-archive__story,
	.netamoto-car-day-archive__categories,
	.netamoto-car-index__columns,
	.netamoto-car-footer__inner,
	.netamoto-car-single__article,
	.netamoto-car-single__meta
) > * {
	min-width: 0;
}

:where(
	.netamoto-car-content,
	.netamoto-car-header,
	.netamoto-car-footer,
	.netamoto-car-site-brand,
	.netamoto-car-site-network-nav,
	.netamoto-car-category-nav,
	.netamoto-car-hero-stories,
	.netamoto-car-day-archive,
	.netamoto-car-popular-stories,
	.netamoto-car-single__article,
	.gensen-provenance
) {
	box-sizing: border-box;
	overflow-wrap: anywhere;
}

:where(img, video, iframe, svg) {
	height: auto;
	max-width: 100%;
}

a {
	color: var(--wp--custom--color--site-accent);
}

a:hover,
a:active,
a:visited {
	color: var(--wp--custom--color--site-accent-strong);
}

/*
 * 一覧の見出しは既読で色を変えない。
 *
 * `a:visited`（0,1,1）は「クラス＋要素」（0,1,1）と**同じ詳細度**なので、後ろに書かれた
 * 側が勝つ。上の一括指定より後ろで、状態を並べて明示しないと、読んだ記事の見出しだけが
 * 青くなる。一覧の中で色が混ざると、既読の印ではなく「別の種類の項目」に見える。
 */
.netamoto-car-hero-stories__title a,
.netamoto-car-hero-stories__title a:visited,
.netamoto-car-day-archive__title a,
.netamoto-car-day-archive__title a:visited,
.netamoto-car-result__title a,
.netamoto-car-result__title a:visited,
.netamoto-car-popular-stories__link,
.netamoto-car-popular-stories__link:visited {
	color: var(--wp--preset--color--contrast);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--wp--custom--presentation--focus--width) solid var(--wp--custom--color--site-focus);
	outline-offset: var(--wp--custom--presentation--focus--offset);
}

/* ==========================================================================
   12. 幅の 2 状態
   ========================================================================== */

/*
 * 768px 以上は固定の紙面。画面を狭めても縮まず、枠の外側に必ず余白が残るよう
 * 最小幅を持たせる（それより狭い画面では横スクロールになる。ITmedia と同じ）。
 */
@media (min-width: 768px) {
	body {
		min-width: 70rem;
	}

	.netamoto-car-hero-stories__grid--3 {
		grid-template-areas:
			"lead right-top"
			"lead right-bottom";
		grid-template-columns: var(--wp--custom--layout--hero-main) var(--wp--custom--layout--hero-side);
		grid-template-rows: repeat(2, 1fr);
	}

	/* 画像は見出しの横。列の幅がそのまま画像の大きさを決める。 */
	.netamoto-car-hero-stories__story--lead {
		grid-area: lead;
		grid-template-columns: 24rem minmax(0, 1fr);
		grid-template-rows: auto;
	}

	.netamoto-car-hero-stories__story--right-top {
		grid-area: right-top;
	}

	.netamoto-car-hero-stories__story--right-bottom {
		grid-area: right-bottom;
	}

	.netamoto-car-hero-stories__story--right-top,
	.netamoto-car-hero-stories__story--right-bottom {
		grid-template-columns: 9.375rem minmax(0, 1fr);
		grid-template-rows: auto;
	}

	.netamoto-car-hero-stories__content {
		padding: 0 0 0 0.75rem;
	}

	.netamoto-car-hero-stories__grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * 768px 未満は画面幅に従う 1 カラム。ここから下には固定の寸法を持ち込まない。
 */
@media (max-width: 767px) {
	body :is(
		.netamoto-car-header,
		.netamoto-car-header__categories,
		.netamoto-car-footer__inner,
		.netamoto-car-front-page,
		.netamoto-car-category-archive,
		.netamoto-car-tag-archive,
		.netamoto-car-archive,
		.netamoto-car-fallback,
		.netamoto-car-search,
		.netamoto-car-single
	),
	.netamoto-car-network-bar .netamoto-car-site-network-nav {
		margin-inline: auto;
		width: calc(100% - 2rem);
	}

	body :is(
		.netamoto-car-single__title,
		.netamoto-car-single__meta,
		.netamoto-car-single__body,
		.netamoto-car-single__tags,
		.netamoto-car-single__source,
		.netamoto-car-single__featured-image,
		.netamoto-car-single__image-credit,
		.gensen-provenance
	) {
		width: 100%;
	}

	.netamoto-car-header__primary {
		flex-wrap: wrap;
		gap: 0.625rem;
	}

	.netamoto-car-header__identity {
		flex: 1 1 auto;
	}

	.netamoto-car-header__tagline {
		display: none;
	}

	.netamoto-car-header__search {
		flex: 1 1 100%;
		max-width: none;
		width: 100%;
	}

	.netamoto-car-site-brand__logo svg {
		height: 1.625rem;
	}

	.netamoto-car-site-brand__name {
		font-size: 1.375rem;
	}

	/*
	 * カテゴリは 1 行に押し込み、はみ出しは隠す。入りきらなかったことはスクリプトが
	 * 測り、そのときは**並びごと引っ込めて**「カテゴリ」だけを出す。
	 */
	.netamoto-car-category-nav {
		display: flex;
		flex-wrap: nowrap;
	}

	.netamoto-car-category-nav__list {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	[data-netamoto-category-nav][data-overflowing="true"] .netamoto-car-category-nav__list {
		display: none;
	}

	/* 開いたら、同じ一覧が帯の下へ折り返して全部出る。 */
	[data-netamoto-category-nav][data-expanded="true"] .netamoto-car-category-nav__list {
		background: var(--wp--custom--color--site-accent);
		border-bottom: 3px solid var(--wp--preset--color--shell);
		display: flex;
		flex-wrap: wrap;
		inset-inline: 0;
		overflow: visible;
		position: absolute;
		top: 100%;
		z-index: 20;
	}

	.netamoto-car-index__columns {
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: minmax(0, 1fr);
	}

	.netamoto-car-popular-stories {
		border-left: 0;
		padding-left: 0;
		position: static;
	}

	/* 狭い画面では 1 件あたりの余白を薄くして、見える本数を増やす。 */
	.netamoto-car-day-archive__story {
		padding-block: 0.5rem;
	}

	.netamoto-car-day-archive__date {
		margin-top: var(--wp--preset--spacing--40);
	}

	.netamoto-car-popular-stories__link {
		gap: 0.375rem;
		padding-block: 0.375rem;
	}

	.netamoto-car-hero-stories__grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.netamoto-car-hero-stories__story--lead .netamoto-car-hero-stories__title {
		font-size: 1.1875rem;
	}

	.netamoto-car-day-archive__story {
		gap: 0.625rem;
		grid-template-columns: 5.5rem minmax(0, 1fr);
	}

	.netamoto-car-footer__inner {
		justify-content: flex-start;
	}
}

/* No Image プレースホルダ（画像未確保の記事。2026-08-12 運営者決定）。
 * 寸法・枠線は media-frame が与える。ここは中身（配置と表示）だけを持つ。 */
.netamoto-car-no-image {
	align-items: center;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--surface) 0%,
		var(--wp--preset--color--base) 100%
	);
	display: flex;
	justify-content: center;
}

.netamoto-car-no-image__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}