@charset "UTF-8";
/**
 * o-dinary.css — /o-dinary（O-DINARY メディアトップ）
 *
 * 一次資料:
 *   設計ツリー specs/pageviews/a3efd0a4-259b-460a-b8d1-183e5c0d163c.json
 *   実測仕様書 抽出データ/static_pages/specs/F_media.md §4
 * 値はすべて設計ツリーの style から逐語。丸めや「だいたい同じ」で置き換えない。
 *
 * ブレークポイント（specs/index.json の breakPoints 実測・全ページ共通）:
 *   small ~1140px / tablet ~840px / mobile ~540px / mini ~320px
 *   ベース幅 1280px
 *   4本ともすべて max-width 単独なので、狭い断面ほど複数のクエリが同時に効く。
 *   例) 375px では 1140 / 840 / 540 の3本が適用される。
 *   ＝ @small の width:70% は @tablet・@mobile でも生き続ける（上書きが無いため）。
 *
 * ────────────────────────────────────────────────
 * ★ このファイルは自己完結させてある（article.css に依存しない）
 *   inc/article.php の ordinary_enqueue_article_assets() は
 *   is_singular('post') / アーカイブ系でしか article.css を読まず、
 *   固定ページである /o-dinary では読まれない。
 *   そのため記事カード・絞り込みピルのスタイルをここに持たせている
 *   （クラス名も od- 名前空間にして .o-card-article 等と衝突させない）。
 *
 * ★ 和文ウェイトの底上げ（CEO指示 2026-09-01・400→500 / 500→700）について
 *   絞り込みピルと記事カードは theme/archive.php（＝ /category/* /tag/* 等）と
 *   同じ見た目の部品で、article.css 側では既に底上げ済み。
 *   同じ部品が2ページで違う太さになるのを避けるため、
 *   **article.css が底上げした箇所と同じ箇所だけ**同じ値で底上げした（下に個別注記）。
 *   それ以外は設計ツリーの実値のままにしてある（現行再現を優先）。
 * ────────────────────────────────────────────────
 */

/* ============================================================
 * 0. ページ土台
 * ============================================================ */

.od-main {
	/* ピックアップの器を画面幅いっぱいに広げているため、ページ側に横スクロールを作らせない。
	   clip は hidden と違いスクロールコンテナを作らない（sticky 等を壊さない）。2026-09-17 */
	overflow-x: clip;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ============================================================
 * === S1 === ヒーロー ＋ ピックアップ記事カルーセル
 *   設計ツリー /1
 *     Section: width:1080px / margin:80px 0 0 0 / padding:100px 0px
 *              gap:10px 0px / flex-direction:column / 中央寄せ / background:transparent
 * ============================================================ */

.od-hero {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 10px 0;
	width: 1080px;
	/* 設計ツリーは固定幅。狭い画面ではみ出さないよう max-width で受ける
	   （characters.css と同じ扱い。現行も親側で縮む） */
	max-width: 100%;
	height: auto;
	margin: 80px 0 0;
	padding: 100px 0;
	background: transparent;
}

/* 設計ツリー /1/0: gap:15px 0px / margin:0 0 30px 0 / padding:0 */
.od-hero__head {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 15px 0;
	margin: 0 0 30px;
	padding: 0;
}

/* 24px / 500 / #14314a / letter-spacing .08em / line-height normal（設計ツリー実値） */
.od-hero__catch {
	width: auto;
	height: auto;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 24px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: normal;
	letter-spacing: 0.08em;
	text-align: left;
}

/* 設計ツリー /1/0/1: width:600px / height:auto / padding:0 0 25px 0 / margin:0 */
.od-hero__logo {
	flex: none;
	width: 600px;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 25px;
}

/* ------------------------------------------------------------
 * ピックアップ記事カルーセル
 *   設計ツリー /1/1: width:1080px / flex-direction:row / 中央寄せ / overflow:visible
 *
 * ★ 実装方式の違い（page-o-dinary.php docblock C 参照）
 *   原文は STUDIO 独自の transform ベース（carouselVersion 2.2）。
 *   ここは CSS スクロールスナップ＋小さなインラインJSに置き換えてある。
 *   これに伴い、カードの margin:0 48px（＝左右の余白）は
 *   **スライド側の padding** に置き換えた。カードの実寸は原文と同じ
 *   （base: 1080 − 48×2 ＝ 984px）。
 *
 * ★ @small 以下（≤1140px）のカード幅について（2026-09-14 訂正）
 *   設計ツリー @small「width:70% / margin:0 24px」は **スライド外形＝70%** で、
 *   カード＝70% − 左右 margin。現行実測: 768→ x=139 w=490（=537.6−48）/
 *   375→ x=68 w=239（=262.5−24）/ 1024→ x=178 w=669。
 *   以前の calc(70% + 48px) はカードを 70% にしていたため 24〜48px 広く、
 *   さらに先頭スライドを中央へ置く余白が無く左端に張り付いていた。
 *   先頭・末尾スライドに (100% − 70%) / 2 ＝ 15% の margin を付け、
 *   scroll-snap-align:center で両端のカードも画面中央に止まるようにした。
 * ---------------------------------------------------------- */

.od-pickup {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 1080px;
	max-width: 100%;
	height: auto;
}

/*
 * ★ 2026-09-17 修正 — 前後のスライドが左右に見えるようにした（CEO指示）。
 *
 * それまではスクロールの器が .od-pickup と同じ1080pxだったため、
 * 前後のカードは器の外で切り取られ、中央の1枚しか見えなかった。
 *
 * 設計ツリー（specs/pageviews/a3efd0a4….json）を読むと、
 *   ピックアップ記事 (CMS) … width:1080px
 *     └ 記事            … width:100%（＝1080px）
 * で、カルーセルの器は1080px・スライドは器と同幅・器に overflow の指定なし。
 * つまり前後のカードは **1080pxの外側の余白に見えていた**。その形に合わせる。
 *
 * やり方: スクロールの器だけを画面幅いっぱいに広げ、同じ量を padding で戻す。
 *   margin-inline : calc(50% - 50vw)  → 器から左右へはみ出す
 *   padding-inline: calc(50vw - 50%)  → 先頭・末尾スライドは中央に止まったまま
 * 50% は .od-pickup（1080px または画面幅）を指すので、
 *   1440px: margin -180px / padding 180px → ちょうど画面幅いっぱい
 *   375px : .od-pickup が375pxなので margin 0 / padding 0（＝従来どおり・変化なし）
 * となり、狭い画面では何も変わらない。スライド幅・カード寸法は1pxも変えていない。
 *
 * 100vw は縦スクロールバーの幅を含むため、環境によってはページに横スクロールが
 * 出る。それを防ぐために .od-main に overflow-x: clip を置いてある（下記）。
 * clip は hidden と違いスクロールコンテナを作らないので、sticky 等を壊さない。
 */
.od-pickup__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: auto;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* スクロールバーは原文に存在しない要素なので隠す */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.od-pickup__track::-webkit-scrollbar {
	display: none;
}

/* base: カード幅100% ＋ 左右48px（原文 margin:0px 48px） */
.od-pickup__slide {
	display: flex;
	flex: 0 0 100%;
	padding: 0 48px;
	scroll-snap-align: center;
}

/*
 * 設計ツリー /1/1/0「記事」
 *   border-radius:20px / box-shadow:3px 3px 20px 0px rgba(0,0,0,0.2)
 *   overflow:hidden / outline-offset:-4px / :focus-visible{outline:2px solid black}
 */
.od-pickup__card {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;
	height: auto;
	overflow: hidden;
	border-radius: 20px;
	outline-offset: -4px;
	box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, 0.2);
}

.od-pickup__card:focus-visible {
	outline: 2px solid black;
}

/*
 * 設計ツリー /1/1/0/0「インナー」
 *   background:#FFFFFF / border-radius:4px / justify-content:space-between
 *   align-items:stretch / padding:0 / transition-duration:600ms
 *   in:hover { translate: 8px 8px }（＝祖先hoverで動く）
 *
 * ★ 原文の z-index:-1 は再現しない。
 *   親（カード）に背景が無いため、そのまま当てるとページ背景の後ろへ潜って
 *   内容が見えなくなる。STUDIO 実行環境固有の積み重ね前提に依存した値と判断した。
 */
.od-pickup__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	align-content: stretch;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 0;
	background: #ffffff;
	border-radius: 4px;
	transition: translate 600ms;
}

.od-pickup__card:hover .od-pickup__inner {
	translate: 8px 8px;
}

/* 設計ツリー /1/1/0/0/0「内容」: flex:1 / gap:5px 0 / padding:36px 24px / border-radius:12px */
.od-pickup__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 5px 0;
	width: auto;
	padding: 36px 24px;
	border-radius: 12px;
}

/* 設計ツリー /1/1/0/0/0/0 <group>: flex:none / row / width:100% / padding:0 */
.od-pickup__genre-row {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	align-content: stretch;
	justify-content: flex-start;
	width: 100%;
	padding: 0;
}

/*
 * ジャンルバッジ。
 * 設計ツリーでは Group（背景・角丸・padding）と p（文字）の2階層だが、
 * 中身が1行のテキストだけなので1要素にまとめた。見た目は同じ。
 *   枠  background:var(--s-color-5993f4bc) / border-radius:32px / padding:4px 16px
 *   文字 16px / 600 / #ffffffff / line-height:1.4 / --s-font-3d9f8c45
 */
.od-pickup__genre {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	align-content: stretch;
	justify-content: flex-start;
	padding: 4px 16px;
	color: #ffffffff;
	font-family: var(--s-font-3d9f8c45);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	background: var(--s-color-5993f4bc);
	border-radius: 32px;
}

/* 20px / 600 / var(--s-color-e89cf142) / line-height 1.50 / margin-top 12px */
.od-pickup__title {
	flex: none;
	width: 100%;
	height: auto;
	margin: 12px 0 0;
	color: var(--s-color-e89cf142);
	font-family: var(--s-font-3d9f8c45);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.50;
	text-align: left;
}

/* in:hover（祖先hover）: color #545454 ＋ underline */
.od-pickup__card:hover .od-pickup__title {
	color: #545454;
	text-decoration: underline;
}

/*
 * 公開日。設計ツリー上のノード名は「ライター」だが content は
 * formatDate(_meta.publishedAt,'YYYY/M/D') ＝ 日付。
 * 12px / 600 / #6b6b6b / line-height 1.60 / margin-top 24px
 * @mobile・@mini は display:none（部分非表示なので実装して CSS で隠す）
 */
.od-pickup__date {
	flex: none;
	width: 100%;
	height: auto;
	margin: 24px 0 0;
	color: #6b6b6b;
	font-family: var(--s-font-3d9f8c45);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.60;
	text-align: left;
}

/* 設計ツリー /1/1/0/0/0/3 List: row wrap / gap:0px 5px / padding:10px 10px 10px 0px */
.od-pickup__writers {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 5px;
	margin: 0;
	padding: 10px 10px 10px 0;
	list-style: none;
}

/*
 * 灰チップ（ライター）。
 * 設計ツリーは li（背景・padding:0）＋ p（margin:6px）の2階層。
 * 背景付きの外側に対する 6px の内側余白は padding と等価なので1要素にまとめた。
 *   14px / 500 / #6b6b6b / line-height 1.4 / background #eeeeeeff
 */
.od-pickup__writer {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 6px;
	color: #6b6b6b;
	font-family: var(--s-font-3d9f8c45);
	font-size: 14px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
	background: #eeeeeeff;
}

/* 設計ツリー /1/1/0/0/0/4 List: flex:none / row wrap / margin:12px 0 0 / padding:0 / width:100% */
.od-pickup__tags {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* 11px / 500 / #6b6b6b / line-height 1.4 / li margin:0 6px 0 0 */
.od-pickup__tag {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0 6px 0 0;
	padding: 0;
	color: #6b6b6b;
	font-family: var(--s-font-3d9f8c45);
	font-size: 11px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/*
 * カバー画像。設計ツリー /1/1/0/0/1 Image: flex:none / width:738px / height:auto
 * ★ height について
 *   インナーが align-items:stretch のため枠は本文と同じ高さまで伸びる。
 *   原文の height:auto をそのまま当てると画像の下に白が残るので、
 *   row レイアウトのときだけ object-fit:cover で枠を埋める。
 *   column-reverse になる @small 以下は原文どおり height:auto に戻す。
 */
.od-pickup__cover {
	display: flex;
	flex: none;
	width: 738px;
	max-width: 100%;
	height: auto;
}

.od-pickup__cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 前後ボタン群。設計ツリー /1/1/1
 *   position:absolute / bottom:-75px（@mobile -64px） / left:0 / width:100% / z-index:3
 *   中央の「Toggle Auto Play」は5断面すべて display:none のため実装しない。
 */
.od-pickup__nav {
	position: absolute;
	right: auto;
	bottom: -75px;
	left: 0;
	z-index: 3;
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
}

/* 48×48 / border-radius:40px / background var(--s-color-e89cf142) / margin:0 12px */
.od-pickup__nav-btn {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 12px;
	background: var(--s-color-e89cf142);
	border-radius: 40px;
	cursor: pointer;
}

.od-pickup__nav-btn:hover {
	background: #e1e1e1;
}

.od-pickup__nav-icon {
	color: #ffffff;
	font-size: 24px;
}

/* ============================================================
 * === S2 === 新着記事（id="article"）
 *   設計ツリー /2
 *     Section: width:1920px / background:#FFFFFF / padding:0
 *     /2/0   : width:100% / padding:100px 48px 48px 48px / gap:40px 0
 *              border-top:1px solid #d1d1d1 / background:rgba(0,0,0,0.0)
 * ============================================================ */

.od-articles {
	flex: none;
	width: 1920px;
	max-width: 100%;
	height: auto;
	padding: 0;
	background: #ffffff;
}

.od-articles__inner {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 40px 0;
	width: 100%;
	margin: 0;
	padding: 100px 48px 48px;
	background: rgba(0, 0, 0, 0);
	border-top: 1px solid #d1d1d1;
	border-right: 0 solid #d1d1d1;
	border-bottom: 0 solid #d1d1d1;
	border-left: 0 solid #d1d1d1;
}

/* 設計ツリー /2/0/0 title area: width:1180px / row / justify-content:center */
.od-articles__head {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	width: 1180px;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.od-articles__head-group {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	padding: 0;
}

/* 24px / 700 / var(--s-color-e89cf142) / letter-spacing .05em / line-height 1.4 / 中央寄せ */
.od-articles__title {
	width: auto;
	height: auto;
	margin: 0;
	color: var(--s-color-e89cf142);
	font-family: var(--s-font-3d9f8c45);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-align: center;
}

/* 設計ツリー /2/0/0/0/1 Box: #f0620f / 14×5px / border-radius:4px / margin-top:6px */
.od-articles__bar {
	display: block;
	flex: none;
	width: 14px;
	height: 5px;
	margin: 6px 0 0;
	background: #f0620f;
	border-radius: 4px;
}

/* ------------------------------------------------------------
 * 絞り込みフィルター
 *   設計ツリー /2/0/1 nav: width:992px / column / gap:30px / background:transparent
 * ---------------------------------------------------------- */

.od-filter {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: stretch;
	justify-content: flex-start;
	gap: 30px;
	width: 992px;
	max-width: 100%;
	height: auto;
	margin: 0;
	background: transparent;
}

/* 設計ツリー /2/0/1/0: row / flex:1 / gap:10px / align-items:flex-start */
.od-filter__row {
	display: flex;
	flex: 1;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 10px;
	width: auto;
	padding: 0;
}

/* 15px / 700 / #333333 / line-height 1.40 / width:150px / height:28px */
.od-filter__label {
	flex: none;
	width: 150px;
	height: 28px;
	margin: 0;
	color: #333333;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.40;
	letter-spacing: 0;
	text-align: left;
}

/* 設計ツリー /2/0/1/0/1 ul: flex:1 / row wrap / gap:20px 20px / padding:0 */
.od-filter__pills {
	display: flex;
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * ピル外枠。設計ツリー /2/0/1/0/1/0
 *   background:#ffffffff / border:1px solid #fcfcfcff / border-radius:40px / padding:0
 *   :hover { scale: 1.02 1.02 }（transition の指定は原文に無い。
 *            article.css と揃えて 300ms ease-in-out を当てる）
 */
.od-filter__pill {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: #ffffffff;
	border: 1px solid #fcfcfcff;
	border-radius: 40px;
	transition: scale 300ms ease-in-out;
}

.od-filter__pill:hover {
	scale: 1.02 1.02;
}

/* 内側 Box: border-radius:24px / padding:10px 20px 10px / box-shadow:0 2px 5px rgba(0,0,0,0.4) */
.od-filter__pill-link {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	padding: 10px 20px 10px;
	border-radius: 24px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4);
}

/* 15px / var(--s-color-e89cf142) / line-height 1.00 / 中央寄せ */
.od-filter__pill-text {
	width: auto;
	height: auto;
	margin: 0;
	color: var(--s-color-e89cf142);
	font-family: var(--s-font-3d9f8c45);
	font-size: 15px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01・article.css と同値） */
	line-height: 1.00;
	text-align: center;
	background: rgba(0, 0, 0, 0);
}

/* 選択中。原文の &url-query-partial / in&url-query-partial 相当 */
.od-filter__pill.is-active {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

.od-filter__pill.is-active .od-filter__pill-link {
	background: var(--s-color-e89cf142);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

.od-filter__pill.is-active .od-filter__pill-text {
	color: #ffffffff;
}

/* ------------------------------------------------------------
 * 記事グリッド（id="articles"）
 *   設計ツリー /2/0/2: row wrap / gap:40px 30px / width:100% / border-radius:24px
 *                      border:0px solid transparent / padding:0 / flex:none
 *
 * ★ card 幅は calc((100% - 90px) / 4)。gap は 40px（行）/ 30px（列）。
 *
 * ★ gap を差し引いた等分幅にする（2026-09-13 訂正）
 *   設計ツリーの % をそのまま書くと、% x 枚数 ＋ gap が枠幅を超えて1枚少なく折り返す。
 *   flex の wrap は「縮小」より「折り返し」が先に効くため、flex-shrink では直らない。
 *   /comingout のご利用の流れ（33.3% x 3 ＋ gap 20px x 2）で現行サイトを実測したところ、
 *   カード幅は 253px = (800 - 40) / 3、x座標は 313 / 586 / 859 で、
 *   現行は **gap を引いた等分** で意図どおりの枚数が並んでいた。同じ式をここにも当てる。
 *   ここは列gap:30px / 1行4枚なので calc((100% - 90px) / 4)。
 *   現行サイトの /o-dinary は記事が1件も描画されていないため、この枠自体は実測できない。
 *   同じ式を article.css の .o-card-article にも当てている。
 * ---------------------------------------------------------- */

.od-grid {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 40px 30px;
	width: 100%;
	height: auto;
	padding: 0;
	border: 0 solid transparent;
	border-radius: 24px;
}

/* 0件時。逐語「No Content」。20px / 900 / #333 / 中央寄せ / margin:10px 0 */
.od-grid__empty {
	width: 100%;
	height: auto;
	margin: 10px 0;
	color: #333;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
}

/*
 * 記事カード。設計ツリー /2/0/2/1
 *   width:25% / height:421px / background:#FFFFFF / border:2px solid #ebebebff
 *   border-radius:16px / box-shadow:3px 3px 3px rgba(0,0,0,0.2) / overflow:hidden
 *   :hover { scale:1.05 1.05 / 600ms }
 */
.od-card {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: calc((100% - 90px) / 4);
	height: 421px;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	background: #ffffff;
	border: 2px solid #ebebebff;
	border-radius: 16px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
	transition: scale 600ms ease-in-out;
}

.od-card:hover {
	scale: 1.05 1.05;
}

.od-card__link {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
}

.od-card__thumb-wrap {
	flex: none;
	width: 100%;
}

.od-card__thumb {
	width: 100%;
	height: auto;
}

/* 設計ツリー /2/0/2/1/1 <group>: flex:1 / gap:8px 0 / padding:16px 16px（@mobile 15px） */
.od-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	gap: 8px 0;
	height: auto;
	margin: 0;
	padding: 16px;
}

/*
 * ジャンルバッジ。border-radius:24px / padding:3px 8px
 * 文字 13px / 600 / var(--s-color-e89cf142)
 * 背景は {{EiU3pyUy.A5TPqojl}} ＝ ジャンルごとの色。PHP側で inline style に出す
 * （term meta `color`。未設定時は inc/article.php のフォールバック #eeeeee）。
 */
.od-card__genre {
	margin: 0;
	padding: 3px 8px;
	color: var(--s-color-e89cf142);
	font-family: var(--s-font-f88553ee);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	border-radius: 24px;
}

/* 16px / 700 / #333333 / line-height 1.2 / margin:5px 0 10px */
.od-card__title {
	margin: 5px 0 10px;
	color: #333333;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

/* 設計ツリー List: flex:none / row wrap / gap:5px 5px / width:100% */
.od-card__tags {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	gap: 5px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 12px / #666666 */
.od-card__tag {
	width: auto;
	height: auto;
	margin: 0;
	color: #666666;
	font-family: var(--s-font-f88553ee);
	font-size: 12px;
	font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01・article.css と同値） */
}

/* ------------------------------------------------------------
 * もっと見る
 *   設計ツリー /2/0/2/2: column / 中央寄せ / width:100% / flex:none
 *   ボタン: width:282px / height:40px / background var(--s-color-5993f4bc)
 *           border-radius:20px / margin:4px / :hover{scale:1.1 / 300ms / ease-in-out}
 *   ★ ボタン自身の color/size（#333 / 15px / 400）は、中の span
 *     （#ffffffff / 16px / 600 / padding-bottom:2px / 中央寄せ）に上書きされる。
 *     1要素にまとめ、見えている側＝span の値を採った。
 * ---------------------------------------------------------- */

.od-more {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: auto;
}

.od-more__btn {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 282px;
	max-width: 100%;
	height: 40px;
	margin: 4px;
	padding: 0 0 2px;
	color: #ffffffff;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	background: var(--s-color-5993f4bc);
	border-radius: 20px;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
	transition: scale 300ms ease-in-out;
}

.od-more__btn:hover {
	scale: 1.1 1.1;
}

/* ============================================================
 * レスポンシブ
 *   ソース順は 1140 → 840 → 540 → 320（base.css R1）。
 *   display の切替は狭い側にも明示的に書く（base.css R2）。
 * ============================================================ */

@media screen and (max-width: 1140px) {

	/*
	 * 設計ツリー /1/1/0 @small: width:70% / margin:0px 24px
	 * スライド外形＝70%、カード＝70% − 24px×2（現行実測 768: x=139 w=490）。
	 * 2026-09-14: calc(70% + 48px) → 70%（冒頭コメント参照）。
	 */
	.od-pickup__slide {
		flex: 0 0 70%;
		padding: 0 24px;
	}

	/*
	 * 先頭・末尾スライドを画面中央に止めるための余白。(100% − 70%) / 2 ＝ 15%。
	 * 現行は transform 式カルーセルで常に表示カードが中央（375: x=68 / 430: x=77 / 768: x=139）。
	 * スクロールスナップ式では端のスライドがトラック端に張り付くため、この margin で同じ位置にする。
	 * 2026-09-14
	 */
	.od-pickup__slide:first-child {
		margin-left: 15%;
	}

	.od-pickup__slide:last-child {
		margin-right: 15%;
	}

	/* 設計ツリー /1/1/0/0 @small: flex-direction:column-reverse */
	.od-pickup__inner {
		flex-direction: column-reverse;
		flex-wrap: nowrap;
	}

	/* 設計ツリー /1/1/0/0/1 @small: width:100%（縦積みになるので height も原文どおり auto） */
	.od-pickup__cover {
		width: 100%;
	}

	.od-pickup__cover-img {
		height: auto;
	}

	/* 設計ツリー /2/0 @small: padding:48px 48px */
	.od-articles__inner {
		padding: 48px;
	}

	/*
	 * 設計ツリー /2/0/2/1 @small: flex:none / height:300px
	 * 2026-09-14: height:300px → height:auto + min-height:300px。
	 *   841〜1140px の帯（4列 × 固定高 300px）では 4行タイトルのカードで
	 *   中身 332px ＞ 箱 296px となり、タグ行の2つ目が下に切れていた
	 *   （900px「同性パートナーシップ制度…」でタグ行が 18px はみ出し・現行も同症状）。
	 *   base の overflow:hidden は残すのでスクロールバーは出ない。
	 */
	.od-card {
		flex: none;
		height: auto;
		min-height: 300px;
	}

	/*
	 * 上の height:auto 化の副作用をここで打ち消す（2026-09-14 追補）。
	 *
	 * なぜ: カードが中身なりの高さになったため、同じ行でタイトルの行数が違うと
	 *   カードの下端が揃わずガタついていた。ローカル実測（修正前）
	 *     768px  行1: 356 / 331px（差 25px）・行4: 331 / 356px
	 *     841px  行1: 343 / 300 / 300 / 300px（差 43px）
	 *     1024px 行1: 317 / 300 / 300 / 300px（差 17px）
	 *     1140px 行2: 300 / 300 / 300 / 334px（差 34px）
	 * 根拠: base（>1140px）は height:421px 固定で1行4枚すべて同じ高さに揃っており、
	 *   現行サイトの 1440px 実測も 8枚すべて 421px。その見た目に合わせる。
	 * align-items:stretch は flex の「行ごとの最大高」まで伸ばすだけなので、
	 *   高さを固定し直すことなく下端だけが揃う（中身が切れる方向には働かない）。
	 *   @mobile（≤540px）は1行1枚なので影響しない。
	 */
	.od-grid {
		align-items: stretch;
	}

	/* 設計ツリー /2/0/2/1/1/1 @small: font-size:14px */
	.od-card__title {
		font-size: 14px;
	}
}

@media screen and (max-width: 840px) {

	/* 設計ツリー /1/1 @tablet: flex:none / height:auto */
	.od-pickup {
		flex: none;
		height: auto;
	}

	/* 設計ツリー /1/1/0 @tablet: margin:0px 24px（width は @small の 70% が生きたまま）
	   2026-09-14: calc(70% + 48px) → 70%（@small と同じ訂正・現行実測 768: x=139 w=490） */
	.od-pickup__slide {
		flex: 0 0 70%;
		padding: 0 24px;
	}

	/* 設計ツリー /1/1/0/0 @tablet: flex:none / flex-direction:column-reverse / height:auto */
	.od-pickup__inner {
		flex: none;
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		height: auto;
	}

	/* 設計ツリー /2/0 @tablet: margin:96px 0 0 0 / padding:48px 24px */
	.od-articles__inner {
		margin: 96px 0 0;
		padding: 48px 24px;
	}

	/*
	 * 設計ツリー /2/0/0 @tablet: margin:0px 12px
	 * max-width は親からのはみ出し止め（margin は max-width:100% の外側に付くため）。
	 * campain.css の cp-fixed-width-guard と同じ趣旨の保険。
	 */
	.od-articles__head {
		max-width: calc(100% - 24px);
		margin: 0 12px;
	}

	/* 設計ツリー /2/0/0/0/0 @tablet: font-size:20px */
	.od-articles__title {
		font-size: 20px;
	}

	/*
	 * ★ 設計ツリーにあるのは「ラベルの @mobile: width:100%」だけで、
	 *   行そのものの向きは base の row / nowrap のまま。
	 *   ただし nowrap のままラベルを 100% にするとピル列が潰れて破綻する。
	 *   article.css（/category/* など同じ部品を出すアーカイブ側）が
	 *   @tablet で縦積みにしているので、同じ見た目になるよう揃えた。
	 */
	.od-filter__row {
		flex-direction: column;
	}

	.od-filter__label {
		width: auto;
		margin-bottom: 10px;
	}

	/* 設計ツリー /2/0/2 @tablet: margin:0px 0px */
	.od-grid {
		margin: 0;
	}

	/*
	 * 設計ツリー /2/0/2/1 @tablet:
	 *   width:50% / height:331.19px / flex:none / flex-direction:column
	 *   margin:0px 10px 0px / overflow-x:hidden / overflow-y:auto
	 *
	 * ★ width は gap と margin を差し引いた等分にする（2026-09-14 訂正）
	 *   50% のままだと 50%×2 ＋ margin 10px×4 ＋ 列gap 30px ＝ 100% + 70px で
	 *   枠を超え、1行1枚に折り返して右半分が空白のまま縦一列になっていた
	 *   （768px でページが現行より約 1,460px 長かった）。
	 *   現行実測 768: カード x=34 / 409・w=325 ＝ (720 − 70) / 2 と一致。
	 *   base の calc((100% - 90px) / 4) と同じ考え方。
	 *
	 * ★ height は固定 331.19px → min-height（2026-09-14）
	 *   設計ツリーは固定高＋overflow-y:auto だが、3〜4行タイトルのカード
	 *   （LiteBlue 第4回・同性パートナーシップ制度）で中身 352px ＞ 箱 327px となり、
	 *   カードの内側だけがスクロールする箱になっていた（現行 768 でも同症状・sh 345 > ch 327）。
	 *   overflow-y は hidden に戻す（中身が収まるので内部スクロールは不要）。
	 */
	.od-card {
		flex: none;
		flex-direction: column;
		width: calc((100% - 70px) / 2);
		height: auto;
		min-height: 331.19px;
		margin: 0 10px 0;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	/* 設計ツリー /2/0/2/1/0 @tablet: flex:none / height:150px / width:100% */
	.od-card__thumb {
		height: 150px;
		object-fit: cover;
	}

	/* 設計ツリー /2/0/2/1/1/1 @tablet: font-size:20px */
	.od-card__title {
		font-size: 20px;
	}
}

@media screen and (max-width: 540px) {

	/* 設計ツリー /1/0/0 @mobile: font-size:12px */
	.od-hero__catch {
		font-size: 12px;
	}

	/* 設計ツリー /1/0/1 @mobile: flex:none / width:80% / padding:0 */
	.od-hero__logo {
		flex: none;
		width: 80%;
		padding: 0;
	}

	/* 設計ツリー /1/1/0 @mobile: margin:0px 12px（width は @small の 70% が生きたまま）
	   2026-09-14: calc(70% + 24px) → 70%（現行実測 375: x=68 w=239 / 430: x=77 w=277） */
	.od-pickup__slide {
		flex: 0 0 70%;
		padding: 0 12px;
	}

	/* 設計ツリー /1/1/0/0/0 @mobile: padding:24px 24px */
	.od-pickup__body {
		padding: 24px;
	}

	/* 設計ツリー /1/1/0/0/0/1 @mobile: font-size:18px */
	.od-pickup__title {
		font-size: 18px;
	}

	/* 設計ツリー /1/1/0/0/0/2 @mobile: display:none（部分非表示） */
	.od-pickup__date {
		display: none;
	}

	/* 設計ツリー /1/1/1 @mobile: bottom:-64px */
	.od-pickup__nav {
		bottom: -64px;
	}

	/* 設計ツリー /2/0 @mobile: padding:48px 24px */
	.od-articles__inner {
		padding: 48px 24px;
	}

	/* 設計ツリー /2/0/0 @mobile: margin:0px 0px / padding:0px 0px（@tablet の保険も戻す） */
	.od-articles__head {
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	/* 設計ツリー /2/0/1 @mobile: width:100% */
	.od-filter {
		width: 100%;
	}

	.od-filter__row {
		flex-direction: column;
	}

	/* 設計ツリー /2/0/1/0/0 @mobile: width:100% */
	.od-filter__label {
		width: 100%;
	}

	/*
	 * 設計ツリー /2/0/2/1 @mobile:
	 *   flex:none / width:100% / height:auto / margin:0px 0px 0px
	 *   overflow-x:hidden / overflow-y:auto
	 * min-height:0 は @small / @tablet で足した min-height（300px / 331.19px）を
	 * 戻すため（2026-09-14）。@mobile は原文どおり中身なりの高さ（現行実測 375: h=299〜347）。
	 */
	.od-card {
		flex: none;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}

	/* 設計ツリー /2/0/2/1/1 @mobile: padding:15px */
	.od-card__body {
		padding: 15px;
	}
}

@media screen and (max-width: 320px) {

	/* 設計ツリー /1/1/0/0/0/2 @mini: display:none（@mobile と同じ。狭い側にも明示） */
	.od-pickup__date {
		display: none;
	}

	/* 設計ツリー /2/0/2 @mini: border-radius:16px */
	.od-grid {
		border-radius: 16px;
	}
}

/* ============================================================
 * モーション配慮（原文には無いがアクセシビリティ上必要。
 * characters.css と同じ扱い）
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.od-card,
	.od-filter__pill,
	.od-more__btn,
	.od-pickup__inner {
		transition: none;
	}

	.od-card:hover,
	.od-filter__pill:hover,
	.od-more__btn:hover {
		scale: 1 1;
	}

	.od-pickup__card:hover .od-pickup__inner {
		translate: 0 0;
	}

	.od-pickup__track {
		scroll-behavior: auto;
	}
}