/*
 * CareerPivot Media OS
 * 画面幅の区切り： 〜599px スマホ ／ 600〜1023px タブレット ／ 1024px〜 PC（ヘッダーのナビは 900px〜）
 * テーマ独自の部品は .cpmo- で始まるクラスに限定。記事本文の装飾は .cpmo-content の中だけに効かせる。
 */

/* ---------- Tokens ---------- */
:root {
	--cpmo-charcoal: #22262B;
	--cpmo-blue-gray: #667580;
	--cpmo-blue-gray-text: #56636D; /* 小さい文字用（白・オフホワイト上で 4.5:1 以上） */
	--cpmo-off-white: #F4F1EA;
	--cpmo-beige: #C8AA82;
	--cpmo-beige-hover: #BC9B6E;
	--cpmo-beige-text: #7A5C2E; /* 白地に置く文字用のベージュ（4.5:1 以上） */
	--cpmo-beige-line: #A68555; /* 本文リンクの下線用（白地で 3:1 以上） */
	--cpmo-line: #E3DDD1;
	--cpmo-white: #FFFFFF;
	--cpmo-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
	--cpmo-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", system-ui, sans-serif;
	--cpmo-latin-serif: Georgia, "Times New Roman", serif;
	--cpmo-gutter: 20px;
	--cpmo-wide: 1200px;
	--cpmo-text: 720px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.cpmo {
	margin: 0;
	background: var(--cpmo-white);
	color: var(--cpmo-charcoal);
	font-family: var(--cpmo-sans);
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

.cpmo img,
.cpmo svg,
.cpmo video,
.cpmo iframe {
	max-width: 100%;
}

.cpmo img {
	height: auto;
}

.cpmo a {
	color: inherit;
}

.cpmo [hidden] {
	display: none !important;
}

.cpmo :focus-visible {
	outline: 2px solid var(--cpmo-charcoal);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cpmo-skip {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white) !important;
	text-decoration: none;
}

.cpmo-skip:focus {
	top: 8px;
}

.cpmo-icon {
	display: block;
	flex: 0 0 auto;
}

/* ---------- Buttons ---------- */
.cpmo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 6px 22px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cpmo-btn .cpmo-icon {
	width: 18px;
	height: 18px;
}

/* ベージュ地には白文字ではなくチャコール文字（コントラスト約7:1） */
.cpmo-btn--primary {
	background: var(--cpmo-beige);
	color: var(--cpmo-charcoal) !important;
}

.cpmo-btn--primary:hover {
	background: var(--cpmo-beige-hover);
}

.cpmo-btn--outline {
	border-color: var(--cpmo-charcoal);
	background: transparent;
	color: var(--cpmo-charcoal) !important;
}

.cpmo-btn--outline:hover {
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white) !important;
}

/* ---------- Header ---------- */
.cpmo-header {
	position: relative;
	z-index: 50;
	background: var(--cpmo-white);
	border-bottom: 1px solid var(--cpmo-line);
}

.cpmo-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(var(--cpmo-wide) + var(--cpmo-gutter) * 2);
	height: 56px;
	margin: 0 auto;
	padding: 0 8px 0 var(--cpmo-gutter);
}

.cpmo-logo {
	margin: 0 auto 0 0;
	font-family: var(--cpmo-latin-serif);
	font-size: 21px;
	font-weight: 400; /* トップページでは h1 として出すので、太字にならないようにする */
	line-height: 1;
	letter-spacing: 0.01em;
}

.cpmo-logo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.cpmo-header__tools {
	display: flex;
	align-items: center;
}

.cpmo-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	text-decoration: none;
}

.cpmo-iconbtn:hover {
	background: var(--cpmo-off-white);
}

.cpmo-menu-toggle__close,
.cpmo-menu-toggle.is-open .cpmo-menu-toggle__open {
	display: none;
}

.cpmo-menu-toggle.is-open .cpmo-menu-toggle__close {
	display: block;
}

.cpmo-panel {
	border-top: 1px solid var(--cpmo-line);
	background: var(--cpmo-white);
}

.cpmo-panel__inner {
	max-width: calc(var(--cpmo-wide) + var(--cpmo-gutter) * 2);
	margin: 0 auto;
	padding: 16px var(--cpmo-gutter);
}

.cpmo-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpmo-drawer__list li + li {
	border-top: 1px solid var(--cpmo-line);
}

.cpmo-drawer__list a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 56px;
	padding: 8px 0;
	text-decoration: none;
}

.cpmo-drawer__list span {
	font-size: 16px;
	font-weight: 700;
}

.cpmo-drawer__list small {
	color: var(--cpmo-blue-gray-text);
	font-size: 12.5px;
	line-height: 1.5;
	text-wrap: balance;
	word-break: auto-phrase;
}

.cpmo-drawer__list a[aria-current="page"] span {
	text-decoration: underline;
	text-decoration-color: var(--cpmo-beige);
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

@media (min-width: 900px) {
	.cpmo-header__inner {
		height: 72px;
		padding: 0 var(--cpmo-gutter);
	}

	.cpmo-logo {
		font-size: 26px;
	}

	.cpmo-menu-toggle,
	.cpmo-drawer {
		display: none !important;
	}
}

/* ---------- Search form ---------- */
.cpmo-search {
	display: flex;
	max-width: 560px;
}

.cpmo-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #B9B1A2;
	border-right: 0;
	border-radius: 2px 0 0 2px;
	background: var(--cpmo-white);
	color: var(--cpmo-charcoal);
	font: inherit;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.cpmo-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.cpmo-search__submit .cpmo-icon {
	width: 18px;
	height: 18px;
}

/* ---------- Main ---------- */
.cpmo-main {
	display: block;
	min-height: 50vh;
}

.cpmo-section {
	max-width: calc(var(--cpmo-wide) + var(--cpmo-gutter) * 2);
	margin: 44px auto 0;
	padding: 0 var(--cpmo-gutter);
}

.cpmo-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.cpmo-section__title {
	margin: 0;
	font-family: var(--cpmo-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
}

.cpmo-more-link {
	display: none;
}

.cpmo-more-mobile {
	margin: 20px 0 0;
	text-align: center;
}

.cpmo-more-mobile .cpmo-btn {
	width: 100%;
	max-width: 360px;
}

@media (min-width: 600px) {
	.cpmo-more-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

	.cpmo-more-link:hover {
		text-decoration: underline;
		text-decoration-color: var(--cpmo-beige);
		text-underline-offset: 6px;
	}

	.cpmo-more-link .cpmo-icon {
		width: 18px;
		height: 18px;
	}

	.cpmo-more-mobile {
		display: none;
	}
}

@media (min-width: 1024px) {
	.cpmo-section {
		margin-top: 72px;
	}

	.cpmo-section__head {
		margin-bottom: 24px;
	}

	.cpmo-section__title {
		font-size: 26px;
	}
}

/* ---------- Hero slider ---------- */
/* スマホ：写真 268px ＋ 操作バー 44px。JSがないときは操作バーを出さないので写真だけになる。
   スライドは6カテゴリー（1.0.8 から）。写真は人物の顔が上のほうにあるので、
   スマホ・タブレットは写真の下側を暗くして文字を載せ、PC（900px以上）は左に文字・右に写真を並べて、写真に文字を重ねない。 */
.cpmo-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		"slides slides slides"
		"dots count pause";
	align-items: center;
	max-width: 1320px;
	margin: 0 auto;
}

.cpmo-js .cpmo-hero--multi {
	grid-template-rows: auto 44px;
}

/* 高さは固定せず最小値にする（文字を大きくする設定でも、見出しが切れずに枠のほうが伸びる） */
.cpmo-hero__slides {
	grid-area: slides;
	position: relative;
	display: grid;
	min-height: 268px;
	overflow: hidden;
	background: var(--cpmo-off-white);
	touch-action: pan-y pinch-zoom; /* 縦スクロールと拡大はブラウザに任せ、横の動きだけをスライド操作に使う */
}

/* スライドの中では、写真（と下地）を一番下、文字をその上、CTAリンクの当たり判定を最前面に重ねる */
.cpmo-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: flex-end;
	min-width: 0;
	isolation: isolate;
	visibility: hidden;
	transform: translateX(100%);
}

/* 切り替えの動き（1.0.11 から）：前のスライドが横へ出ていき、次のスライドが隣から入ってくる。
   2枚を同じ場所に重ねて透かす動き（フェード）だと、切り替えの途中に前の写真と見出しが残像のように見えるので、やめた。
   2枚は横に並んで動くだけで、重ならず、半透明にもならない。動きの長さは --cpmo-hero-move（自動切り替えの間隔 4秒とは別）。
   向きと開始位置のクラスは assets/js/slider.js が付ける。 */
.cpmo-hero {
	--cpmo-hero-move: 0.5s;
}

.cpmo-hero__slide.is-active {
	visibility: visible;
	transform: none;
	transition: transform var(--cpmo-hero-move) cubic-bezier(0.4, 0, 0.2, 1);
}

/* 入ってくるスライドを、動きなしで開始位置（右隣か左隣）に置く */
.cpmo-hero__slide.is-entering {
	visibility: visible;
	transition: none;
}

.cpmo-hero__slide.is-entering--next {
	transform: translateX(100%);
}

.cpmo-hero__slide.is-entering--prev {
	transform: translateX(-100%);
}

/* 出ていくスライド（動き終わったら、スクリプトがクラスを外して非表示に戻す） */
.cpmo-hero__slide.is-leaving {
	visibility: visible;
	transition: transform var(--cpmo-hero-move) cubic-bezier(0.4, 0, 0.2, 1);
}

.cpmo-hero__slide.is-leaving--next {
	transform: translateX(-100%);
}

.cpmo-hero__slide.is-leaving--prev {
	transform: translateX(100%);
}

.cpmo-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

.cpmo-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cpmo-focus, 50% 30%); /* 切り抜く位置は画像ごと（inc/categories.php の hero_focus） */
}

/* 900px未満（文字を写真の左下に重ねる並び）のときだけ、写真を左右反転して見せるスライド（inc/categories.php の hero_flip_narrow）。
   左下に人物がいる写真で、その人物が文字の下に隠れないよう右側へ出すため。画像ファイルは同じもので、PCのスライドとカードは反転しない。 */
@media (max-width: 899px) {
	.cpmo-hero__slide--flip-narrow .cpmo-hero__media img {
		transform: scaleX(-1);
	}
}

/* 文字を読みやすくするための下地（スマホ・タブレットは下から暗く。PCでは写真に文字を重ねないので下地なし） */
.cpmo-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(34, 38, 43, 0) 12%, rgba(34, 38, 43, 0.5) 50%, rgba(34, 38, 43, 0.84) 100%);
}

.cpmo-hero__body {
	width: 100%;
	padding: 64px var(--cpmo-gutter) 18px;
	color: var(--cpmo-white);
}

.cpmo-hero__cat {
	display: none;
}

.cpmo-hero__copy {
	margin: 0;
	font-family: var(--cpmo-serif);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	word-break: auto-phrase;
}

.cpmo-hero__sub {
	display: -webkit-box;
	margin: 6px 0 0;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.55;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
	word-break: auto-phrase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.cpmo-hero__cta {
	margin-top: 12px;
}

/* CTAリンクをスライド全体に広げる（メイン領域もCTAも同じ1つのリンク） */
.cpmo-hero__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cpmo-hero__cta:focus-visible {
	outline: 2px solid var(--cpmo-white);
	outline-offset: 3px;
}

.cpmo-hero__arrow {
	display: none;
}

.cpmo-hero__dots {
	grid-area: dots;
	display: flex;
	padding-left: 6px;
}

.cpmo-hero__dots button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.cpmo-hero__dots span {
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid var(--cpmo-charcoal);
	border-radius: 50%;
	background: transparent;
}

.cpmo-hero__dots [aria-current="true"] span {
	width: 22px;
	border-radius: 4px;
	background: var(--cpmo-charcoal);
}

.cpmo-hero__count {
	grid-area: count;
	margin: 0;
	padding: 0 4px;
	color: var(--cpmo-blue-gray-text);
	font-family: var(--cpmo-latin-serif);
	font-size: 13px;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* いちばん狭い画面（359px以下）：ドット6つ・カウンター・停止ボタンが1行に収まるように、ドットの横幅だけ詰める（高さ44pxはそのまま）。
   6枚にした 1.0.8 から、320px の画面では操作バーが画面の幅をはみ出していた（1.0.10 で修正）。 */
@media (max-width: 359px) {
	.cpmo-hero__dots button {
		width: 36px;
	}
}

.cpmo-hero__pause {
	grid-area: pause;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cpmo-charcoal);
	cursor: pointer;
}

.cpmo-hero__pause .cpmo-icon {
	width: 20px;
	height: 20px;
}

.cpmo-hero__pause-off,
.cpmo-hero__pause.is-stopped .cpmo-hero__pause-on {
	display: none;
}

.cpmo-hero__pause.is-stopped .cpmo-hero__pause-off {
	display: block;
}

@media (min-width: 600px) {
	.cpmo-hero,
	.cpmo-js .cpmo-hero--multi {
		display: block;
	}

	.cpmo-hero__slides {
		min-height: clamp(340px, 34vw, 460px);
	}

	/* タブレット：写真の下側に文字（スマホと同じ考え方で、文字を大きく） */
	.cpmo-hero__body {
		width: auto;
		max-width: 640px;
		margin-left: clamp(72px, 7vw, 96px); /* 左矢印（16px + 48px）と重ならない位置 */
		padding: 28px 24px 64px 0;
	}

	.cpmo-hero__cat {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 14px;
		color: var(--cpmo-blue-gray-text);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.14em;
	}

	.cpmo-hero__cat::before {
		content: "";
		width: 28px;
		height: 1px;
		background: var(--cpmo-beige);
	}

	.cpmo-hero__copy {
		font-size: clamp(30px, 3.5vw, 44px);
	}

	.cpmo-hero__sub {
		margin-top: 10px;
		font-size: clamp(15px, 1.5vw, 18px);
		line-height: 1.7;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.cpmo-hero__cta {
		min-height: 48px;
		margin-top: 20px;
		padding: 8px 28px;
	}

	.cpmo-hero__arrow {
		position: absolute;
		top: 50%;
		z-index: 3;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid var(--cpmo-line);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: var(--cpmo-charcoal);
		cursor: pointer;
		transform: translateY(-50%);
	}

	.cpmo-hero__arrow:hover {
		background: var(--cpmo-white);
	}

	.cpmo-hero__arrow--prev {
		left: 16px;
	}

	.cpmo-hero__arrow--next {
		right: 16px;
	}

	.cpmo-hero__dots {
		position: absolute;
		left: 50%;
		bottom: 10px;
		z-index: 3;
		padding: 0 6px;
		border-radius: 18px;
		background: rgba(255, 255, 255, 0.86);
		transform: translateX(-50%);
	}

	.cpmo-hero__dots button {
		width: 32px;
		height: 32px;
	}

	.cpmo-hero__count {
		position: absolute;
		right: 68px;
		bottom: 16px;
		z-index: 3;
		padding: 2px 10px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.86);
		color: var(--cpmo-charcoal);
	}

	.cpmo-hero__pause {
		position: absolute;
		right: 16px;
		bottom: 10px;
		z-index: 3;
		width: 40px;
		height: 40px;
		margin: 0;
		border: 1px solid var(--cpmo-line);
		background: rgba(255, 255, 255, 0.92);
	}
}

/* PC：左に文字、右に写真。写真（横16：縦9）をほぼそのまま見せ、文字は写真に重ねない */
@media (min-width: 900px) {
	.cpmo-hero__slide {
		display: grid;
		grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
		align-items: stretch;
	}

	.cpmo-hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		grid-column: 2;
		grid-row: 1;
	}

	.cpmo-hero__media img {
		position: absolute;
		inset: 0;
	}

	.cpmo-hero__media::after {
		content: none;
	}

	.cpmo-hero__body {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		max-width: none;
		margin-left: clamp(84px, 7vw, 96px); /* 左矢印（16px + 48px）から少し離す */
		padding: 28px 32px 56px 0;
		color: var(--cpmo-charcoal);
	}

	.cpmo-hero__copy,
	.cpmo-hero__sub {
		text-shadow: none;
	}

	.cpmo-hero__copy {
		font-size: clamp(30px, 3vw, 40px);
	}

	.cpmo-hero__cta:focus-visible {
		outline-color: var(--cpmo-charcoal);
	}
}

/* ---------- 6カテゴリーのカード（画像 → カテゴリー名 → 説明文。スマホ2列／タブレット・PC3列） ---------- */
.cpmo-cats {
	margin-top: 32px;
}

.cpmo-cats__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpmo-cat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"img img"
		"body arrow";
	grid-template-rows: auto 1fr;
	align-items: center;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--cpmo-line);
	border-radius: 4px;
	background: var(--cpmo-off-white);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

a.cpmo-cat:hover {
	border-color: var(--cpmo-beige);
}

.cpmo-cat__img {
	grid-area: img;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover; /* 枠に合わせて切り抜く位置は、画像ごとに style="object-position" で指定している（inc/categories.php の focus） */
}

.cpmo-cat__body {
	grid-area: body;
	display: block;
	align-self: start;
	min-width: 0;
	padding: 10px 12px 12px;
}

.cpmo-cat__name {
	display: block;
	font-family: var(--cpmo-serif);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	word-break: auto-phrase;
}

/* 説明文は、PCでもスマホでも常に表示する。幅が足りなければ、区切りのよい位置で折り返す */
.cpmo-cat__desc {
	display: block;
	margin-top: 3px;
	color: var(--cpmo-blue-gray-text);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
	text-wrap: balance;
	word-break: auto-phrase;
}

/* スマホの2列では幅が足りないので、矢印の丸は出さない（カード全体がリンクになっている） */
.cpmo-cat__arrow {
	display: none;
}

/* ---------- カテゴリーのチップ（一覧ページの上部・404） ---------- */
.cpmo-chips {
	margin: 20px calc(var(--cpmo-gutter) * -1) 0;
}

.cpmo-chips ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 4px var(--cpmo-gutter);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scroll-padding: 0 var(--cpmo-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cpmo-chips ul::-webkit-scrollbar {
	display: none;
}

.cpmo-chips li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.cpmo-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--cpmo-line);
	border-radius: 22px;
	background: var(--cpmo-off-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
}

.cpmo-chip[aria-current="page"] {
	border-color: var(--cpmo-charcoal);
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white);
}

@media (min-width: 600px) {
	.cpmo-cats {
		margin-top: 40px;
	}

	.cpmo-cats__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.cpmo-cat__body {
		padding: 12px 14px 14px;
	}

	.cpmo-cat__name {
		font-size: 16px;
		letter-spacing: 0.02em;
	}

	.cpmo-cat__desc {
		margin-top: 4px;
		font-size: 12.5px;
		line-height: 1.5;
		letter-spacing: 0.02em;
	}

	.cpmo-chips {
		margin: 24px 0 0;
	}

	.cpmo-chips ul {
		flex-wrap: wrap;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 900px) {
	.cpmo-cats {
		margin-top: 48px;
	}

	.cpmo-cats__list {
		gap: 20px;
	}

	.cpmo-cat__body {
		padding: 14px 8px 14px 16px;
	}

	.cpmo-cat--nolink .cpmo-cat__body {
		padding-right: 16px;
	}

	.cpmo-cat__name {
		font-size: 17px;
	}

	.cpmo-cat__arrow {
		grid-area: arrow;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin-right: 14px;
		border-radius: 50%;
		background: var(--cpmo-beige);
		color: var(--cpmo-charcoal);
	}

	.cpmo-cat__arrow .cpmo-icon {
		width: 14px;
		height: 14px;
	}
}

/* ---------- Cards ---------- */
.cpmo-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.cpmo-card {
	min-width: 0;
}

.cpmo-card__link {
	display: block;
	text-decoration: none;
}

.cpmo-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: var(--cpmo-off-white);
}

.cpmo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cpmo-card__link:hover .cpmo-card__media img {
	transform: scale(1.03);
}

.cpmo-card__body {
	display: block;
	padding: 10px 0 0;
}

.cpmo-card__cat {
	display: block;
	color: var(--cpmo-blue-gray-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.cpmo-card__title {
	display: -webkit-box;
	margin: 2px 0 0;
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.cpmo-card__link:hover .cpmo-card__title {
	text-decoration: underline;
	text-decoration-color: var(--cpmo-beige);
	text-underline-offset: 4px;
}

/* 説明はスマホでは出さない（要素を減らす）。出す幅では最大2行。 */
.cpmo-card__excerpt {
	display: none;
}

.cpmo-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin-top: 6px;
	color: var(--cpmo-blue-gray-text);
	font-size: 12.5px;
	line-height: 1.5;
}

.cpmo-cards--list {
	gap: 28px;
}

@media (max-width: 599px) {
	/* トップの新着はまず2件＋「もっと見る」 */
	.cpmo-cards--home .cpmo-card:nth-child(n + 3) {
		display: none;
	}
}

@media (min-width: 600px) {
	.cpmo-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}

	.cpmo-cards--related {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.cpmo-cards--related .cpmo-card__title {
		font-size: 14.5px;
	}

	.cpmo-card__excerpt {
		display: -webkit-box;
		margin-top: 6px;
		overflow: hidden;
		color: var(--cpmo-blue-gray-text);
		font-size: 13.5px;
		line-height: 1.6;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}

@media (min-width: 1024px) {
	.cpmo-cards--home {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	.cpmo-cards--list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 28px;
	}
}

/* ---------- Page head / archive ---------- */
.cpmo-archive {
	max-width: calc(var(--cpmo-wide) + var(--cpmo-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--cpmo-gutter);
}

.cpmo-pagehead {
	padding: 20px 0 28px;
}

.cpmo-pagehead__title {
	margin: 12px 0 0;
	font-family: var(--cpmo-serif);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.cpmo-pagehead__lead {
	max-width: 44em;
	margin: 10px 0 0;
	color: var(--cpmo-blue-gray-text);
	font-size: 15px;
	line-height: 1.8;
}

.cpmo-pagehead .cpmo-search {
	margin-top: 20px;
}

.cpmo-empty {
	margin: 0 0 24px;
	color: var(--cpmo-blue-gray-text);
}

.cpmo-notfound__code {
	margin: 24px 0 0;
	color: var(--cpmo-beige-text);
	font-family: var(--cpmo-latin-serif);
	font-size: 56px;
	line-height: 1;
	letter-spacing: 0.06em;
}

.cpmo-notfound__home {
	margin: 28px 0 0;
}

@media (min-width: 1024px) {
	.cpmo-pagehead {
		padding: 32px 0 44px;
	}

	.cpmo-pagehead__title {
		font-size: 36px;
	}

	.cpmo-pagehead__lead {
		font-size: 16px;
	}
}

/* ---------- Breadcrumb ---------- */
.cpmo-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 0;
	padding: 0;
	color: var(--cpmo-blue-gray-text);
	font-size: 12.5px;
	list-style: none;
}

.cpmo-breadcrumb li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.cpmo-breadcrumb li + li::before {
	content: "/";
	margin-right: 6px;
	color: var(--cpmo-line);
}

.cpmo-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.cpmo-breadcrumb li[aria-current="page"] {
	display: block;
	max-width: 100%;
	overflow: hidden;
	line-height: 32px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Pagination ---------- */
.cpmo-pagination,
.cpmo .comments-pagination {
	margin: 44px 0 0;
}

.cpmo-pagination .nav-links,
.cpmo .comments-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.cpmo-pagination .page-numbers,
.cpmo .comments-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--cpmo-line);
	border-radius: 2px;
	font-size: 14px;
	text-decoration: none;
}

.cpmo-pagination .page-numbers.current {
	border-color: var(--cpmo-charcoal);
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white);
}

.cpmo-pagination .page-numbers.dots {
	border-color: transparent;
}

.cpmo-pagination a.page-numbers:hover {
	border-color: var(--cpmo-beige);
	background: var(--cpmo-off-white);
}

/* ---------- Article ---------- */
.cpmo-single {
	max-width: calc(var(--cpmo-text) + var(--cpmo-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--cpmo-gutter);
}

.cpmo-article__header {
	padding-top: 16px;
}

.cpmo-article__cat {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.cpmo-article__cat a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--cpmo-beige-text);
	text-decoration: none;
}

.cpmo-article__cat a:hover {
	text-decoration: underline;
}

.cpmo-article__title {
	margin: 4px 0 0;
	font-family: var(--cpmo-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.cpmo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	margin: 14px 0 0;
	color: var(--cpmo-blue-gray-text);
	font-size: 13px;
}

.cpmo-meta__label {
	margin-right: 6px;
}

.cpmo-article__image {
	margin: 24px 0 0;
}

.cpmo-article__image img {
	display: block;
	width: 100%;
	border-radius: 4px;
}

.cpmo-article__lead {
	margin: 24px 0 0;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--cpmo-line);
	font-family: var(--cpmo-serif);
	font-size: 17px;
	line-height: 1.9;
}

@media (min-width: 1024px) {
	.cpmo-article__header {
		padding-top: 28px;
	}

	.cpmo-article__title {
		font-size: 34px;
	}

	.cpmo-article__image {
		margin-top: 32px;
	}

	.cpmo-article__lead {
		font-size: 19px;
	}
}

/* ---------- Article content（本文の中だけに効かせる） ----------
 * 既存記事の本文には、書かれた時期ごとに違う style 属性（背景色・文字色・余白など）が直接入っている。
 * 旧テーマは「追加CSS」の !important で見た目を1つにそろえていたので、ここでも同じ項目を !important で上書きする。
 * （これを外すと、暗い背景に暗い文字・明るい背景に明るい文字の組み合わせが出て読めなくなる記事がある）
 * 広告枠（.cp-adbox）と、フォームなどプラグインが出す部品には手を入れない。
 */
.cpmo-content {
	margin-top: 28px;
	counter-reset: cpmo-section;
	font-size: 16px;
	line-height: 1.85;
	letter-spacing: 0.015em;
}

.cpmo-content::after {
	content: "";
	display: block;
	clear: both;
}

.cpmo-content > *:first-child {
	margin-top: 0;
}

.cpmo-content p {
	margin: 0 0 1.6em;
}

.cpmo-content > p {
	margin: 0 0 1.6em !important;
	color: var(--cpmo-charcoal) !important;
	font-size: 16px !important;
	line-height: 1.85 !important;
}

.cpmo-content a {
	text-decoration: underline;
	text-decoration-color: var(--cpmo-beige-line);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

.cpmo-content a:hover {
	color: var(--cpmo-beige-text);
	text-decoration-color: currentColor;
}

.cpmo-content strong {
	font-weight: 700;
	background: linear-gradient(transparent 62%, rgba(200, 170, 130, 0.4) 62%);
}

.cpmo-content h2,
.cpmo-content h3,
.cpmo-content h4 {
	scroll-margin-top: 24px;
}

/* 本文直下の H2 だけを章見出しにする（囲みの中の H2 には番号を付けない） */
.cpmo-content > h2 {
	counter-increment: cpmo-section;
	margin: 3em 0 1.1em !important;
	padding: 0.75em 0 0 !important;
	border: 0 !important;
	border-top: 2px solid var(--cpmo-charcoal) !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--cpmo-charcoal) !important;
	font-family: var(--cpmo-serif) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.01em !important;
	text-align: left !important;
}

.cpmo-content > h2::before {
	content: counter(cpmo-section, decimal-leading-zero);
	display: block;
	margin-bottom: 0.8em;
	color: var(--cpmo-beige-text);
	font-family: var(--cpmo-latin-serif);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.3em;
}

.cpmo-content h3 {
	margin: 2.4em 0 0.9em !important;
	padding: 0 0 0 0.75em !important;
	border: 0 !important;
	border-left: 4px solid var(--cpmo-beige) !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--cpmo-charcoal) !important;
	font-size: 17.5px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
}

.cpmo-content h4 {
	margin: 2em 0 0.8em !important;
	color: var(--cpmo-charcoal) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.6;
}

.cpmo-content ul,
.cpmo-content ol {
	margin: 0 0 1.7em;
	padding-left: 1.4em;
}

.cpmo-content li {
	margin-bottom: 0.6em;
}

.cpmo-content li > ul,
.cpmo-content li > ol {
	margin: 0.6em 0 0;
}

.cpmo-content blockquote {
	margin: 2.2em 0 !important;
	padding: 0.4em 0 0.4em 1.4em !important;
	border: 0 !important;
	border-left: 3px solid var(--cpmo-charcoal) !important;
	background: none !important;
	color: #39404D !important;
	font-family: var(--cpmo-serif) !important;
	font-size: 16.5px !important;
	line-height: 1.9 !important;
}

.cpmo-content blockquote p:last-child {
	margin-bottom: 0;
}

.cpmo-content figure {
	margin: 2em 0;
}

.cpmo-content figcaption,
.cpmo-content .wp-caption-text {
	margin-top: 8px;
	color: var(--cpmo-blue-gray-text);
	font-size: 13px;
	line-height: 1.6;
}

.cpmo-content .wp-caption {
	max-width: 100%;
}

.cpmo-content .alignleft {
	float: left;
	margin: 0.4em 1.4em 1em 0;
}

.cpmo-content .alignright {
	float: right;
	margin: 0.4em 0 1em 1.4em;
}

.cpmo-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.cpmo-content hr {
	margin: 2.6em 0;
	border: 0;
	border-top: 1px solid var(--cpmo-line);
}

.cpmo-content pre {
	max-width: 100%;
	overflow-x: auto;
	padding: 1em;
	background: var(--cpmo-off-white);
	font-size: 14px;
	line-height: 1.6;
}

.cpmo-content iframe,
.cpmo-content embed,
.cpmo-content object {
	max-width: 100%;
}

/* 表：スマホでは枠の中だけ横スクロール（ページ全体は広がらない） */
.cpmo-table-scroll,
.cpmo-content .cp-table-wrap,
.cpmo-content .wp-block-table {
	max-width: 100%;
	margin: 2.2em 0 !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cpmo-content .cp-table-wrap {
	border: 1px solid var(--cpmo-line) !important;
	border-radius: 0 !important;
}

.cpmo-content table {
	width: 100% !important;
	margin: 0 !important;
	border-collapse: collapse !important;
	font-size: 14px !important;
	line-height: 1.7;
}

.cpmo-content th,
.cpmo-content td {
	min-width: 5.5em;
	padding: 0.8em 0.9em !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cpmo-line) !important;
	vertical-align: top;
}

/* 見出しセルは必ず「濃い背景＋明るい文字」の組にする（本文側の背景指定に左右されないように両方を固定） */
.cpmo-content th {
	background: var(--cpmo-charcoal) !important;
	color: #F2F3F6 !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-align: left !important;
}

.cpmo-content td {
	background: transparent !important;
	color: var(--cpmo-charcoal) !important;
	line-height: 1.8 !important;
}

.cpmo-content tr {
	background: transparent !important;
}

.cpmo-content tbody tr:nth-child(even) td {
	background: #FAF9F6 !important;
}

/* --- 既存記事で使っている囲み（旧テーマの追加CSSから引き継ぎ、配色だけ新パレットへ） --- */
.cpmo-content .cp-callout {
	margin: 2.2em 0 !important;
	padding: 1.4em 1.5em !important;
	border: 0 !important;
	border-left: 3px solid var(--cpmo-beige) !important;
	border-radius: 0 !important;
	background: var(--cpmo-off-white) !important;
	box-shadow: none !important;
	color: var(--cpmo-charcoal);
}

.cpmo-content .cp-points {
	margin: 2.2em 0 !important;
	padding: 1.3em 1.5em !important;
	border: 0 !important;
	border-top: 2px solid var(--cpmo-charcoal) !important;
	border-bottom: 1px solid var(--cpmo-line) !important;
	border-radius: 0 !important;
	background: var(--cpmo-white) !important;
}

.cpmo-content .cp-points > p:first-child,
.cpmo-content .cp-points-title,
.cpmo-content .cp-sources > p:first-child,
.cpmo-content .cp-sources-title,
.cpmo-content .cp-related-title {
	margin: 0 0 0.7em !important;
	color: var(--cpmo-beige-text) !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.cpmo-content .cp-lead {
	margin: 0 0 1.9em !important;
	color: var(--cpmo-charcoal) !important;
	font-family: var(--cpmo-serif) !important;
	font-size: 17px !important;
	line-height: 1.9 !important;
}

/* 目次も必ず「濃い背景＋明るい文字」の組にする */
.cpmo-content .cp-toc,
.cpmo-toc {
	margin: 2.4em 0 !important;
	padding: 1.4em 1.5em !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: var(--cpmo-charcoal) !important;
	color: #E9ECF2 !important;
}

.cpmo-content .cp-toc > p:first-child,
.cpmo-content .cp-toc-title,
.cpmo-toc__title {
	margin: 0 0 0.8em !important;
	color: var(--cpmo-beige) !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.cpmo-content .cp-toc strong {
	background: none;
	color: inherit;
}

.cpmo-content .cp-toc ol,
.cpmo-content .cp-toc ul,
.cpmo-toc ol {
	margin: 0 !important;
	padding-left: 1.3em !important;
	color: #E9ECF2 !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.cpmo-content .cp-toc li,
.cpmo-toc li {
	margin: 0 0 0.2em !important;
	color: #E9ECF2 !important;
}

.cpmo-content .cp-toc li:last-child,
.cpmo-toc li:last-child {
	margin-bottom: 0 !important;
}

.cpmo-content .cp-toc a,
.cpmo-content .cpmo-toc a {
	display: block;
	padding: 0.3em 0;
	color: #E9ECF2 !important;
	text-decoration-color: rgba(200, 170, 130, 0.7);
}

.cpmo-content .cp-toc a:hover,
.cpmo-content .cpmo-toc a:hover {
	color: #F0D9A3 !important;
}

.cpmo-content .cp-toc a:focus-visible,
.cpmo-content .cpmo-toc a:focus-visible {
	outline-color: var(--cpmo-white);
}

.cpmo-content .cp-hub,
.cpmo-content .cp-sources,
.cpmo-content .cp-related {
	margin: 2.4em 0 !important;
	padding: 1.3em 1.5em !important;
	border: 1px solid var(--cpmo-line) !important;
	border-radius: 0 !important;
	background: #FBFAF7 !important;
	color: var(--cpmo-charcoal) !important;
}

.cpmo-content .cp-sources h2,
.cpmo-content .cp-related h2,
.cpmo-content .cp-hub h2,
.cpmo-content .cp-points h2 {
	margin: 0 0 0.7em !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--cpmo-beige-text) !important;
	font-family: var(--cpmo-sans);
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.cpmo-content .cp-sources ul,
.cpmo-content .cp-related ul,
.cpmo-content .cp-hub ul {
	margin: 0 !important;
	padding-left: 1.2em !important;
}

.cpmo-content .cp-sources,
.cpmo-content .cp-sources li {
	color: #4F5663 !important;
	font-size: 13px !important;
	line-height: 1.8 !important;
}

/* PR表記は読める濃さにする */
.cpmo-content .cp-pr,
.cpmo-content .cp-pr-note,
.cpmo-content .cpPR {
	margin: 0 0 1.6em !important;
	padding: 0 !important;
	background: none !important;
	color: #5F6672 !important;
	font-size: 12.5px !important;
	letter-spacing: 0.04em;
	line-height: 1.7 !important;
}

.cpmo-content .cp-closing {
	margin: 2.8em 0 2.2em !important;
	padding: 1.2em 0 !important;
	border-top: 1px solid var(--cpmo-line) !important;
	border-bottom: 1px solid var(--cpmo-line) !important;
	color: var(--cpmo-charcoal) !important;
	font-family: var(--cpmo-serif) !important;
	font-size: 18px !important;
	line-height: 1.8 !important;
	text-align: center !important;
}

.cpmo-content .cp-cta {
	margin: 2.4em 0;
	padding: 1.5em;
	background: var(--cpmo-off-white);
	text-align: center;
}

.cpmo-content .cp-cta-btn {
	display: inline-block;
	padding: 0.8em 1.6em;
	border-radius: 2px;
	background: var(--cpmo-beige);
	color: var(--cpmo-charcoal);
	font-weight: 700;
	text-decoration: none;
}

/* よくある質問（旧子テーマが head に出していたスタイルを引き継ぎ、配色だけ新パレットへ） */
.cpmo-content .cp-faq {
	margin: 2.4em 0;
	padding: 1.5em 1.4em;
	border-radius: 4px;
	background: var(--cpmo-off-white);
}

.cpmo-content .cp-faq > h2 {
	margin-top: 0 !important;
}

.cpmo-content .cp-faq-item {
	padding: 1.1em 0;
	border-bottom: 1px solid var(--cpmo-line);
}

.cpmo-content .cp-faq-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.cpmo-content .cp-faq-item h3 {
	margin: 0 0 0.5em !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.02em !important;
}

.cpmo-content .cp-faq-item h3::before {
	content: "Q. ";
	color: var(--cpmo-beige-text);
	font-weight: 700;
}

.cpmo-content .cp-faq-item p {
	margin: 0;
}

.cpmo-content .cp-callout > *:last-child,
.cpmo-content .cp-points > *:last-child,
.cpmo-content .cp-hub > *:last-child,
.cpmo-content .cp-sources > *:last-child,
.cpmo-content .cp-related > *:last-child,
.cpmo-content .cp-cta > *:last-child {
	margin-bottom: 0 !important;
}

/* フォーム（Contact Form 7 など）は最低限だけ整える */
.cpmo-content .wpcf7 input[type="text"],
.cpmo-content .wpcf7 input[type="email"],
.cpmo-content .wpcf7 input[type="tel"],
.cpmo-content .wpcf7 input[type="url"],
.cpmo-content .wpcf7 select,
.cpmo-content .wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid #B9B1A2;
	border-radius: 2px;
	background: var(--cpmo-white);
	color: var(--cpmo-charcoal);
	font: inherit;
	font-size: 16px;
}

.cpmo-content .wpcf7 input[type="submit"] {
	min-height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: 2px;
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white);
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.cpmo-pagelinks {
	margin: 2em 0;
	font-size: 14px;
}

@media (min-width: 1024px) {
	.cpmo-content {
		margin-top: 36px;
		font-size: 17px;
	}

	.cpmo-content > p {
		font-size: 17px !important;
	}

	.cpmo-content > h2 {
		font-size: 27px !important;
	}

	.cpmo-content h3 {
		font-size: 19px !important;
	}

	.cpmo-content h4 {
		font-size: 17px !important;
	}

	.cpmo-content .cp-lead {
		font-size: 19px !important;
	}

	.cpmo-content .cp-closing {
		font-size: 21px !important;
	}
}

/* ---------- NEXT STEP ---------- */
.cpmo-next {
	margin: 56px 0 0;
	padding: 28px 20px;
	background: var(--cpmo-off-white);
}

.cpmo-next__eyebrow {
	margin: 0;
	color: var(--cpmo-beige-text);
	font-family: var(--cpmo-latin-serif);
	font-size: 12px;
	letter-spacing: 0.3em;
}

.cpmo-next__title {
	margin: 6px 0 0;
	font-family: var(--cpmo-serif);
	font-size: 20px;
	line-height: 1.5;
}

.cpmo-next__route {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.cpmo-next__route a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 4px 8px;
	border: 1px solid var(--cpmo-line);
	border-radius: 2px;
	background: var(--cpmo-white);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.cpmo-next__route a:hover {
	border-color: var(--cpmo-beige);
}

.cpmo-next__route .is-current a {
	border-color: var(--cpmo-charcoal);
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white);
}

.cpmo-next__text {
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.8;
}

.cpmo-next__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

@media (min-width: 600px) {
	.cpmo-next {
		padding: 36px 36px 40px;
	}

	.cpmo-next__title {
		font-size: 22px;
	}

	.cpmo-next__route {
		grid-template-columns: repeat(3, minmax(0, 1fr)); /* 6カテゴリーを3列×2行で並べる */
	}

	.cpmo-next__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---------- Post navigation / related / comments ---------- */
.cpmo .cpmo-postnav {
	margin: 40px 0 0;
	border-top: 1px solid var(--cpmo-line);
	border-bottom: 1px solid var(--cpmo-line);
}

.cpmo .cpmo-postnav .nav-links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cpmo .cpmo-postnav a {
	display: block;
	padding: 14px 0;
	text-decoration: none;
}

.cpmo .cpmo-postnav .nav-next {
	border-top: 1px solid var(--cpmo-line);
}

.cpmo-postnav__label {
	display: block;
	color: var(--cpmo-blue-gray-text);
	font-size: 12px;
	letter-spacing: 0.1em;
}

.cpmo-postnav__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.cpmo .cpmo-postnav a:hover .cpmo-postnav__title {
	text-decoration: underline;
	text-decoration-color: var(--cpmo-beige);
	text-underline-offset: 4px;
}

@media (min-width: 600px) {
	.cpmo .cpmo-postnav .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpmo .cpmo-postnav .nav-previous {
		padding-right: 20px;
	}

	.cpmo .cpmo-postnav .nav-next {
		grid-column: 2;
		padding-left: 20px;
		border-top: 0;
		border-left: 1px solid var(--cpmo-line);
		text-align: right;
	}
}

.cpmo-related,
.cpmo-comments {
	margin: 56px 0 0;
}

.cpmo-related .cpmo-section__title,
.cpmo-comments .cpmo-section__title {
	margin-bottom: 18px;
	font-size: 20px;
}

.cpmo-comments__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpmo-comments__list .children {
	margin: 0;
	padding-left: 20px;
	list-style: none;
}

.cpmo-comments .comment-body {
	padding: 16px 0;
	border-bottom: 1px solid var(--cpmo-line);
	font-size: 15px;
}

.cpmo-comments .comment-meta {
	color: var(--cpmo-blue-gray-text);
	font-size: 13px;
}

.cpmo-comments .avatar {
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: middle;
}

.cpmo-comments .comment-form label {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.cpmo-comments .comment-form input[type="text"],
.cpmo-comments .comment-form input[type="email"],
.cpmo-comments .comment-form input[type="url"],
.cpmo-comments .comment-form textarea {
	width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid #B9B1A2;
	border-radius: 2px;
	font: inherit;
	font-size: 16px;
}

.cpmo-comments .comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.cpmo-comments .comment-form input[type="submit"] {
	min-height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 2px;
	background: var(--cpmo-charcoal);
	color: var(--cpmo-white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Reading progress（スマホ・タブレットのみ） ---------- */
.cpmo-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 3px;
	pointer-events: none;
}

.cpmo-progress span {
	display: block;
	height: 100%;
	background: var(--cpmo-beige);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.admin-bar .cpmo-progress {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .cpmo-progress {
		top: 32px;
	}
}

@media (max-width: 600px) {
	/* 管理バーはこの幅ではスクロールで流れるので、画面上端に付ける */
	.admin-bar .cpmo-progress {
		top: 0;
	}
}

@media (min-width: 900px) {
	.cpmo-progress {
		display: none;
	}
}

/* ---------- Footer ---------- */
.cpmo-footer {
	margin-top: 64px;
	padding: 40px var(--cpmo-gutter) 20px;
	background: var(--cpmo-off-white);
}

.cpmo-footer__inner {
	display: grid;
	gap: 28px;
	max-width: var(--cpmo-wide);
	margin: 0 auto;
}

.cpmo-footer__logo {
	margin: 0;
	font-family: var(--cpmo-latin-serif);
	font-size: 22px;
	line-height: 1.2;
}

.cpmo-footer__logo a {
	text-decoration: none;
}

.cpmo-footer__copy {
	margin: 8px 0 0;
	color: var(--cpmo-blue-gray-text);
	font-family: var(--cpmo-serif);
	font-size: 14px;
	letter-spacing: 0.08em;
}

.cpmo-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.cpmo-footer__heading {
	margin: 0 0 4px;
	color: var(--cpmo-blue-gray-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.cpmo-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpmo-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-size: 14px;
	text-decoration: none;
}

.cpmo-footer__list a:hover {
	text-decoration: underline;
	text-decoration-color: var(--cpmo-beige);
	text-underline-offset: 5px;
}

/* 記事がまだ入っていないカテゴリー：名前だけ出す（リンクではない） */
.cpmo-footer__nolink {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--cpmo-blue-gray-text);
	font-size: 14px;
}

.cpmo-footer__legal {
	max-width: var(--cpmo-wide);
	margin: 28px auto 0;
	padding-top: 16px;
	border-top: 1px solid var(--cpmo-line);
	color: var(--cpmo-blue-gray-text);
	font-size: 12px;
	text-align: center;
}

@media (min-width: 768px) {
	.cpmo-footer {
		margin-top: 96px;
		padding-top: 56px;
	}

	.cpmo-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.cpmo *,
	.cpmo *::before,
	.cpmo *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	/* トップのスライダー：「動きを減らす」設定の端末（Windows の「アニメーション効果」オフなど）での動き。
	   ・4秒ごとの自動切り替えは、ほかの端末と同じ（1.0.11 から。ご指示による）。
	   ・切り替えの動きも、ほかの端末と同じ形：スライドが写真ごと横へ移り、次のスライドが隣から入ってくる（1.0.13 から。ご指示による）。
	     1.0.12 では「その場で消えてから現れる」形にしていたが、切り替えのたびに画面が白っぽく明滅して目にやさしくなかったので、やめた。
	   ・ただし、この設定の端末では、動きをゆっくり・なめらかにする（急に動き出さない・急に止まらない）。
	   assets/js/slider.js の respectReducedMotion が false のときに、スクリプトが cpmo-hero--motion を付ける。
	   スライダー以外の部分は、これまでどおり動きを止める。 */
	.cpmo .cpmo-hero--motion {
		--cpmo-hero-move-calm: 0.7s; /* ふつうの端末（--cpmo-hero-move：0.5秒）よりゆっくり */
	}

	.cpmo .cpmo-hero--motion .cpmo-hero__slide.is-active,
	.cpmo .cpmo-hero--motion .cpmo-hero__slide.is-leaving {
		transition-duration: var(--cpmo-hero-move-calm) !important;
		transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
	}
}