/* ==========================================================================
   Coffee Penguin — main.css
   v4.2.0 — ONIBUS COFFEE のカラーコード・タイポグラフィ仕様に準拠
   - 純白背景 #FFFFFF / 暖クリーム #F8F6F4 セクション地
   - 単一ブランドアクセント #847147（コーヒー褐色）
   - フォント: Manrope（欧文）+ Yu Gothic 系（和文）
   - 情報設計: moomin.com の IA をミラー
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — ONIBUS palette
   -------------------------------------------------------------------------- */
:root {
	/* Colors — ONIBUS COFFEE 実CSSから抽出した値 */
	--cp-bg:           #FFFFFF;        /* 主背景（純白） */
	--cp-bg-soft:      #F8F6F4;        /* セクション地（暖クリーム） */
	--cp-bg-deep:      #EFEBE6;        /* hover/区切り */
	--cp-ink:          #222222;        /* 本文テキスト */
	--cp-ink-soft:     #464646;        /* 補助テキスト */
	--cp-line:         #BFB7AF;        /* メイン罫線 */
	--cp-line-soft:    #E8E4DE;        /* ヘアライン */
	--cp-tape:         rgba(132, 113, 71, 0.18);
	--cp-white:        #FFFFFF;

	/* 旧アクセントトークンは ONIBUS 単色（茶）に統一。
	   既存 CSS の互換のため変数名は残し、値だけ褐色に揃える。 */
	--cp-accent-teal:    #847147;
	--cp-accent-lime:    #847147;
	--cp-accent-sky:     #847147;
	--cp-accent-butter:  #F8F6F4;
	--cp-accent-peach:   #847147;
	--cp-brown:          #847147;       /* THE accent（ONIBUS の褐色） */
	--cp-brown-deep:     #5C4A28;
	--cp-caramel:        #BFB7AF;

	/* Fonts — ONIBUS 準拠（Manrope = Tenon 相当） */
	--cp-font-display: "Manrope", "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
	--cp-font-heading: "Manrope", "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
	--cp-font-body:    "Manrope", "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
	--cp-font-script:  "Manrope", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Times New Roman", serif;

	/* Type scale */
	--text-xs:      clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	--text-sm:      clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--text-base:    clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
	--text-lg:      clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
	--text-xl:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--text-2xl:     clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--text-3xl:     clamp(2rem, 1.6rem + 2vw, 3rem);
	--text-display: clamp(3rem, 2rem + 5vw, 6rem);

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
	--space-6: 64px;
	--space-7: 96px;
	--space-8: 128px;

	/* Layout */
	--container-max:    1100px;
	--container-narrow: 680px;
	--container-wide:   1240px;

	/* Radius */
	--radius-card:   24px;
	--radius-image:  20px;
	--radius-pill:   999px;
	--radius-bar:    999px;
	--radius-circle: 50%;

	/* Shadow — ONIBUS の節度ある neutral 影 */
	--shadow-card:     0 1px 0 rgba(34, 34, 34, 0.04), 0 8px 24px rgba(34, 34, 34, 0.04);
	--shadow-card-h:   0 1px 0 rgba(34, 34, 34, 0.06), 0 12px 32px rgba(34, 34, 34, 0.08);
	--shadow-polaroid: 0 6px 20px rgba(34, 34, 34, 0.08);
	--shadow-btn:      0 2px 6px rgba(132, 113, 71, 0.18);

	/* Motion */
	--ease:     cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in:  cubic-bezier(0.4, 0, 0.2, 1);
	--dur:      600ms;
	--dur-fast: 250ms;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

html, body { margin: 0; padding: 0; }

body.cp-body {
	background: var(--cp-bg);
	color: var(--cp-ink);
	font-family: var(--cp-font-body);
	font-size: var(--text-base);
	line-height: 1.85;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	position: relative;
}

/* v4.2: ONIBUS は無テクスチャの清潔白紙。羊皮紙テクスチャは廃止。 */

img, svg, picture, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--cp-accent-teal); }

button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cp-font-heading);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin: 0;
	color: var(--cp-ink);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--cp-accent-teal);
	outline-offset: 3px;
	border-radius: 4px;
}

.cp-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	background: var(--cp-accent-teal);
	color: var(--cp-bg-soft);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	z-index: 1000;
}
.cp-skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. Layout containers
   -------------------------------------------------------------------------- */
.cp-container {
	width: min(100% - clamp(40px, 8vw, 96px), var(--container-max));
	margin-inline: auto;
	position: relative;
	z-index: 1;
}
.cp-container--wide {
	width: min(100% - clamp(40px, 8vw, 96px), var(--container-wide));
	margin-inline: auto;
}
.cp-container--narrow {
	width: min(100% - clamp(40px, 8vw, 96px), var(--container-narrow));
	margin-inline: auto;
}

.cp-main {
	display: block;
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   4. Site Header
   -------------------------------------------------------------------------- */
.cp-site-header {
	background: var(--cp-bg);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--dur-fast) var(--ease);
}
.cp-site-header[data-scrolled="true"] {
	box-shadow: 0 2px 12px rgba(122, 74, 43, 0.08);
}
/* WP admin bar (高さ 32/46px) がスティッキーヘッダーを覆わないようオフセット */
body.admin-bar .cp-site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .cp-site-header {
		top: 46px;
	}
}

/* v4.2.1: 3ゾーン構成（Left:nav / Center:logo / Right:utils） */
.cp-site-header__inner {
	width: min(100% - clamp(20px, 4vw, 56px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-4);
	min-height: 100px;
	padding: var(--space-3) 0;
}
.cp-site-header__nav    { justify-self: start; min-width: 0; }
.cp-site-header__brand  { justify-self: center; }
.cp-site-header__utils  { justify-self: end; display: flex; align-items: center; gap: var(--space-3); }

.cp-site-header__brand {
	display: flex;
	align-items: center;
	color: var(--cp-ink);
}
.cp-site-header__brand-wordmark-img {
	display: block;
	width: auto;
	height: 56px;
	max-height: 56px;
	transition: opacity var(--dur-fast) var(--ease);
}
.cp-site-header__brand:hover .cp-site-header__brand-wordmark-img { opacity: 0.78; }

/* Primary nav (横並び) */
.cp-primary-nav__list {
	display: flex;
	gap: clamp(var(--space-3), 2vw, var(--space-5));
	align-items: center;
}
.cp-primary-nav__item { position: relative; }
.cp-primary-nav__link {
	display: inline-flex;
	align-items: center;
	font-family: var(--cp-font-display);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cp-ink);
	padding: var(--space-2) 0;
	transition: color var(--dur-fast) var(--ease);
}
.cp-primary-nav__link:hover,
.cp-primary-nav__link.is-active { color: var(--cp-brown); }
.cp-primary-nav__link.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 2px;
	background: var(--cp-brown);
}

/* Utility buttons (Search / Language) */
.cp-util {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.cp-util__btn,
.cp-util--search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	font-family: var(--cp-font-display);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--cp-ink);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease);
}
.cp-util__btn:hover,
.cp-util--search:hover { color: var(--cp-brown); }
.cp-util__icon {
	width: 20px;
	height: 20px;
	display: block;
}
.cp-util__caret {
	font-size: 0.65em;
	margin-left: 2px;
	transition: transform var(--dur-fast) var(--ease);
}
.cp-util--lang.has-sub:hover .cp-util__caret,
.cp-util--lang.has-sub:focus-within .cp-util__caret { transform: rotate(180deg); }

/* Language sub */
.cp-util__sub {
	position: absolute;
	top: 100%;
	right: 0;
	transform: translateY(8px);
	min-width: 160px;
	background: var(--cp-bg);
	border: 1px solid var(--cp-line-soft);
	box-shadow: var(--shadow-card);
	padding: var(--space-2) 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	z-index: 200;
}
.cp-util.has-sub:hover .cp-util__sub,
.cp-util.has-sub:focus-within .cp-util__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.cp-util__sub-link {
	display: block;
	padding: 10px 20px;
	font-family: var(--cp-font-display);
	font-size: 0.88rem;
	color: var(--cp-ink);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-util__sub-link:hover { background: var(--cp-bg-soft); color: var(--cp-brown); }
.cp-util__sub-link.is-current { color: var(--cp-brown); font-weight: 600; }

/* Hamburger */
.cp-nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	color: var(--cp-ink);
	border: 0;
	cursor: pointer;
	gap: 4px;
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	line-height: 1;
}
.cp-nav-toggle__icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}
.cp-nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	will-change: transform, opacity, width;
	transition:
		transform 0.5s cubic-bezier(0.68, -0.4, 0.27, 1.4),
		opacity 0.25s ease,
		width 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bar:nth-child(2) {
	opacity: 0;
	width: 0;
}
.cp-nav-toggle[aria-expanded="true"] .cp-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
.cp-nav-toggle__label { display: none; }

/* Search overlay */
.cp-search-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--cp-bg);
	border-bottom: 1px solid var(--cp-line-soft);
	box-shadow: var(--shadow-card);
	padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 56px);
	transform: translateY(-12px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	z-index: 90;
}
.cp-search-overlay[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.cp-search-overlay__panel {
	width: min(100%, var(--container-narrow));
	margin-inline: auto;
	position: relative;
}
.cp-search-overlay__label {
	display: block;
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-2);
}
.cp-search-overlay__row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	border-bottom: 2px solid var(--cp-ink);
	padding-bottom: var(--space-2);
}
.cp-search-overlay__icon {
	width: 22px;
	height: 22px;
	color: var(--cp-ink-soft);
	flex-shrink: 0;
}
.cp-search-overlay__input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 8px 0;
	font-family: var(--cp-font-display);
	font-size: 1.1rem;
	color: var(--cp-ink);
	outline: none;
	min-width: 0;
}
.cp-search-overlay__input::placeholder { color: var(--cp-ink-soft); }
.cp-search-overlay__submit {
	font-family: var(--cp-font-display);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 10px 22px;
	background: var(--cp-ink);
	color: var(--cp-white);
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.cp-search-overlay__submit:hover { background: var(--cp-brown); }
.cp-search-overlay__close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--cp-ink-soft);
	border: 0;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease);
}
.cp-search-overlay__close:hover { color: var(--cp-brown); }
.cp-search-overlay__close svg { width: 22px; height: 22px; }

/* Mobile (≤960px): nav drawer + 簡略 utils */
@media (max-width: 960px) {
	.cp-site-header__inner {
		grid-template-columns: auto 1fr auto;
		min-height: 72px;
		gap: var(--space-2);
	}
	.cp-site-header__nav { display: contents; }
	.cp-site-header__brand { justify-self: center; }
	.cp-site-header__brand-wordmark-img { height: 36px; }

	.cp-primary-nav {
		position: fixed;
		inset: 0;
		background: var(--cp-bg);
		padding: 96px var(--space-5) var(--space-5);
		display: none;
		z-index: 90;
		overflow-y: auto;
		justify-self: stretch;
	}
	.cp-primary-nav[data-open="true"] { display: block; }
	.cp-primary-nav__list {
		flex-direction: column;
		gap: var(--space-4);
		text-align: center;
	}
	.cp-primary-nav__link { font-size: var(--text-xl); }

	/* デスクトップの utils ラベルを隠してアイコンだけ */
	.cp-util__label,
	.cp-util__caret { display: none; }
	.cp-util__btn,
	.cp-util--search {
		width: 40px;
		height: 40px;
		justify-content: center;
		padding: 0;
	}
	/* 言語ドロップダウンは右端から */
	.cp-util__sub { right: 0; }

	.cp-nav-toggle { display: flex; order: -1; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.cp-hero {
	position: relative;
	overflow: hidden;
	padding: var(--space-6) 0 var(--space-8);
	background: var(--cp-bg);
}

/* v4.0: 1枚絵Hero — シーン画像を背景的に配置し、テキストは左に乗せる */
.cp-hero__scene {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}
.cp-hero__scene-img {
	width: 60%;
	max-height: 100%;
	object-fit: contain;
	object-position: right center;
}
@media (max-width: 880px) {
	.cp-hero__scene { position: relative; height: 280px; }
	.cp-hero__scene-img { width: 100%; object-position: center; }
}

.cp-hero__inner {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
	min-height: 540px;
	position: relative;
	z-index: 2;
}
/* Hero scene があるときは visual エリアを潰す（scene が代替） */
.cp-hero__scene + .cp-hero__inner .cp-hero__visual {
	display: none;
}
.cp-hero__scene + .cp-hero__inner {
	grid-template-columns: 1fr;
}
.cp-hero__scene + .cp-hero__inner .cp-hero__text {
	max-width: 50%;
}
@media (max-width: 880px) {
	.cp-hero__scene + .cp-hero__inner .cp-hero__text {
		max-width: 100%;
		text-align: center;
	}
	.cp-hero__scene + .cp-hero__inner .cp-hero__cta { justify-content: center; display: flex; }
}

.cp-hero__text {
	position: relative;
	z-index: 2;
}
.cp-hero__title {
	font-family: var(--cp-font-display);
	font-size: var(--text-display);
	line-height: 0.95;
	letter-spacing: 0.03em;
	color: var(--cp-brown-deep);
	margin-bottom: var(--space-3);
	text-shadow: 0 2px 0 rgba(122, 74, 43, 0.06);
}
.cp-hero__title-jp {
	font-family: var(--cp-font-heading);
	font-size: var(--text-xl);
	color: var(--cp-ink-soft);
	letter-spacing: 0.18em;
	margin-bottom: var(--space-4);
}
.cp-hero__lead {
	font-family: var(--cp-font-body);
	font-size: var(--text-base);
	line-height: 2;
	color: var(--cp-ink);
	margin-bottom: var(--space-5);
}
.cp-hero__cta {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.cp-hero__visual {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cp-hero__character {
	max-width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: contain;
}

/* Hero decorations (small watercolor accents) */
.cp-hero__deco {
	position: absolute;
	pointer-events: none;
	opacity: 0.85;
}
.cp-hero__deco--cup {
	left: -4%;
	bottom: 8%;
	width: 140px;
	z-index: 2;
}
.cp-hero__deco--beans {
	left: 6%;
	bottom: 4%;
	width: 80px;
	z-index: 2;
}
.cp-hero__deco--special {
	right: 8%;
	bottom: 12%;
	width: 130px;
	z-index: 2;
	transform: rotate(-4deg);
}

@media (max-width: 880px) {
	.cp-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		min-height: auto;
		gap: var(--space-5);
	}
	.cp-hero__cta {
		justify-content: center;
	}
	.cp-hero__visual {
		order: -1;
	}
	.cp-hero__character {
		max-height: 360px;
	}
	.cp-hero__deco { display: none; }
}

/* --------------------------------------------------------------------------
   6. News bar (front-page pill)
   -------------------------------------------------------------------------- */
.cp-news-bar {
	margin: calc(var(--space-7) * -1) auto var(--space-7);
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	background: var(--cp-bg-soft);
	border-radius: var(--radius-bar);
	padding: var(--space-3) var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-4);
	box-shadow: var(--shadow-card);
	position: relative;
	z-index: 5;
}
.cp-news-bar__label {
	font-family: var(--cp-font-display);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	color: var(--cp-accent-teal);
	padding-right: var(--space-4);
	border-right: 1px solid var(--cp-line);
	flex-shrink: 0;
}
.cp-news-bar__date {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	flex-shrink: 0;
}
.cp-news-bar__title {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cp-news-bar__more {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-accent-teal);
	white-space: nowrap;
	flex-shrink: 0;
}
.cp-news-bar__more:hover { color: var(--cp-brown); }

@media (max-width: 720px) {
	.cp-news-bar {
		flex-wrap: wrap;
		border-radius: var(--radius-card);
	}
	.cp-news-bar__title {
		white-space: normal;
		flex-basis: 100%;
		order: 4;
	}
	.cp-news-bar__more {
		order: 5;
	}
}

/* --------------------------------------------------------------------------
   7. Section base
   -------------------------------------------------------------------------- */
.cp-section {
	padding: var(--space-7) 0;
	position: relative;
	z-index: 1;
}
.cp-section--lg { padding: var(--space-8) 0; }

.cp-section__head {
	text-align: center;
	margin-bottom: var(--space-6);
}
.cp-section__eyebrow {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.22em;
	color: var(--cp-accent-teal);
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}
.cp-section__title {
	font-family: var(--cp-font-heading);
	font-size: var(--text-2xl);
	color: var(--cp-ink);
	margin-bottom: var(--space-3);
}
.cp-section__lead {
	font-family: var(--cp-font-body);
	font-size: var(--text-lg);
	color: var(--cp-ink-soft);
	max-width: 640px;
	margin-inline: auto;
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   8. Card grid (4-up: ABOUT / MENU / GOODS / GALLERY)
   -------------------------------------------------------------------------- */
.cp-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin-inline: auto;
}
@media (max-width: 1024px) {
	.cp-card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 520px) {
	.cp-card-grid { grid-template-columns: 1fr; }
}

.cp-card {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-5) var(--space-4) var(--space-5);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	position: relative;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
	color: inherit;
}
.cp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-h);
	color: inherit;
}
.cp-card__title {
	font-family: var(--cp-font-display);
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	color: var(--cp-ink);
	margin: 0;
}
.cp-card__subtitle {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.18em;
	color: var(--cp-ink-soft);
	margin-top: -8px;
}
.cp-card__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--space-2) 0;
}
.cp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--radius-image);
}
.cp-card__desc {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	line-height: 1.85;
	flex: 1;
}
.cp-card__cta {
	margin-top: var(--space-3);
}

/* NEW ITEM badge */
.cp-card__badge {
	position: absolute;
	top: -16px;
	right: -8px;
	width: 64px;
	height: 64px;
	background: var(--cp-accent-teal);
	color: var(--cp-bg-soft);
	border-radius: var(--radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-family: var(--cp-font-display);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: center;
	box-shadow: var(--shadow-btn);
	transform: rotate(-8deg);
}

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
.cp-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--cp-accent-teal);
	color: var(--cp-bg-soft);
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.1em;
	padding: 12px 28px;
	border-radius: var(--radius-pill);
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-btn:hover {
	background: var(--cp-brown);
	color: var(--cp-bg-soft);
	transform: translateY(-2px);
	box-shadow: var(--shadow-btn);
}
.cp-btn__arrow {
	display: inline-block;
	transition: transform var(--dur-fast) var(--ease);
}
.cp-btn:hover .cp-btn__arrow {
	transform: translateX(4px);
}

.cp-btn--sm {
	padding: 8px 20px;
	font-size: 0.75rem;
}

.cp-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--cp-accent-teal);
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.05em;
}
.cp-link:hover {
	color: var(--cp-brown);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   10. FOLLOW US section
   -------------------------------------------------------------------------- */
.cp-follow {
	padding: var(--space-7) 0;
	background: var(--cp-bg);
}
.cp-follow__inner {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-6);
	align-items: center;
}
@media (max-width: 880px) {
	.cp-follow__inner { grid-template-columns: 1fr; }
}
.cp-follow__head {
	text-align: center;
}
.cp-follow__title {
	font-family: var(--cp-font-display);
	font-size: var(--text-2xl);
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}
.cp-follow__title::before,
.cp-follow__title::after {
	content: "";
	display: block;
	width: clamp(40px, 10vw, 80px);
	height: 1px;
	background: var(--cp-line);
}
.cp-follow__sub {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-5);
}
.cp-follow__icons {
	display: flex;
	gap: var(--space-5);
	justify-content: center;
}
.cp-follow__item {
	text-align: center;
}
.cp-follow__icon {
	display: flex;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-circle);
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-2);
	color: var(--cp-white);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-follow__icon:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.cp-follow__icon svg { width: 28px; height: 28px; fill: currentColor; }
.cp-follow__icon--instagram {
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.cp-follow__icon--x { background: #000000; }
.cp-follow__icon--line { background: #06C755; }
.cp-follow__icon--youtube { background: #FF0000; }
.cp-follow__handle {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	letter-spacing: 0.05em;
}
.cp-follow__handle--small {
	font-size: 0.65rem;
	color: var(--cp-ink-soft);
	margin-top: 2px;
}

/* Polaroid */
.cp-polaroid {
	background: var(--cp-white);
	padding: var(--space-3) var(--space-3) var(--space-5);
	box-shadow: var(--shadow-polaroid);
	border-radius: 4px;
	transform: rotate(-3deg);
	max-width: 240px;
	position: relative;
	transition: transform var(--dur) var(--ease);
}
.cp-polaroid:hover { transform: rotate(-1deg); }
.cp-polaroid::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%) rotate(-3deg);
	width: 70px;
	height: 24px;
	background: var(--cp-tape);
	border-radius: 2px;
}
.cp-polaroid__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-polaroid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-polaroid__caption {
	font-family: var(--cp-font-script);
	font-size: 1.6rem;
	color: var(--cp-brown-deep);
	text-align: right;
	margin-top: var(--space-2);
	transform: rotate(-2deg);
	margin-right: var(--space-2);
}

@media (max-width: 880px) {
	.cp-polaroid { margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   11. Site Footer
   -------------------------------------------------------------------------- */
.cp-site-footer {
	background: var(--cp-bg-soft);
	padding-top: var(--space-7);
	margin-top: var(--space-7);
	position: relative;
	z-index: 2;
}
.cp-site-footer__inner {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr) 1.4fr;
	gap: var(--space-5);
	padding-bottom: var(--space-7);
}
@media (max-width: 1024px) {
	.cp-site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.cp-site-footer__inner {
		grid-template-columns: 1fr;
	}
}

.cp-site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.cp-site-footer__brand-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.cp-site-footer__brand-mark { width: 56px; height: 56px; }
.cp-site-footer__wordmark {
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
	color: var(--cp-brown-deep);
	letter-spacing: 0.04em;
	line-height: 1.1;
}
.cp-site-footer__brand-wordmark-img {
	display: block;
	width: auto;
	height: 26px;
	max-height: 26px;
	margin-bottom: 4px;
}
.cp-site-footer__sub {
	font-family: var(--cp-font-body);
	font-size: 0.65rem;
	color: var(--cp-ink-soft);
	letter-spacing: 0.18em;
	margin-top: 4px;
}
.cp-site-footer__tagline {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	line-height: 1.85;
}

.cp-site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.cp-site-footer__col-title {
	font-family: var(--cp-font-display);
	font-size: 0.95rem;
	color: var(--cp-brown-deep);
	letter-spacing: 0.08em;
	margin-bottom: var(--space-2);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line);
}
.cp-site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.cp-site-footer__list a {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink);
}
.cp-site-footer__list a:hover { color: var(--cp-accent-teal); }

.cp-site-footer__shop {
	background: var(--cp-bg);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: stretch;
	text-align: center;
}
.cp-site-footer__shop-title {
	font-family: var(--cp-font-display);
	font-size: 1rem;
	color: var(--cp-brown-deep);
	letter-spacing: 0.06em;
}
.cp-site-footer__shop-sub {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	line-height: 1.7;
}
.cp-site-footer__shop-cta {
	margin-top: var(--space-2);
	align-self: center;
}

.cp-site-footer__base {
	background: var(--cp-brown-deep);
	color: var(--cp-bg-soft);
	padding: var(--space-3) 0;
}
.cp-site-footer__base-inner {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-wide));
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.05em;
}
.cp-site-footer__base-links {
	display: flex;
	gap: var(--space-4);
}
.cp-site-footer__base-links a:hover { color: var(--cp-bg); }

.cp-site-footer__newsletter {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.cp-site-footer__newsletter input[type="email"] {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--cp-line);
	border-radius: var(--radius-pill);
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	background: var(--cp-bg);
	color: var(--cp-ink);
}
.cp-site-footer__newsletter button {
	background: var(--cp-accent-teal);
	color: var(--cp-bg-soft);
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   12. Page hero (sub pages)
   -------------------------------------------------------------------------- */
.cp-page-hero {
	padding: var(--space-7) 0 var(--space-6);
	text-align: center;
	background: var(--cp-bg);
}
.cp-page-hero__inner {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-narrow));
	margin-inline: auto;
}
.cp-page-hero__eyebrow {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.22em;
	color: var(--cp-accent-teal);
	margin-bottom: var(--space-2);
}
.cp-page-hero__title {
	font-family: var(--cp-font-display);
	font-size: var(--text-3xl);
	color: var(--cp-ink);
	letter-spacing: 0.04em;
	margin-bottom: var(--space-3);
}
.cp-page-hero__subtitle {
	font-family: var(--cp-font-body);
	font-size: var(--text-lg);
	color: var(--cp-ink-soft);
	line-height: 1.9;
}

/* --------------------------------------------------------------------------
   13. Character strip / cards (sub pages still use)
   -------------------------------------------------------------------------- */
.cp-character-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin-inline: auto;
}
@media (max-width: 880px) { .cp-character-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cp-character-strip { grid-template-columns: 1fr; } }

.cp-character-strip__item {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	text-align: center;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
	box-shadow: var(--shadow-card);
	color: inherit;
}
.cp-character-strip__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-h);
	color: inherit;
}
.cp-character-strip__media {
	aspect-ratio: 3 / 4;
	margin-bottom: var(--space-3);
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-character-strip__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cp-character-strip__num {
	font-family: var(--cp-font-display);
	font-size: 0.8rem;
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}
.cp-character-strip__name {
	font-family: var(--cp-font-display);
	font-size: 1.4rem;
	color: var(--cp-ink);
	letter-spacing: 0.06em;
}
.cp-character-strip__role {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	letter-spacing: 0.1em;
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   14. Story / Shop / News listings (kept simple, card-style)
   -------------------------------------------------------------------------- */
.cp-story-grid,
.cp-shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin-inline: auto;
}
@media (max-width: 880px) { .cp-story-grid, .cp-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cp-story-grid, .cp-shop-grid { grid-template-columns: 1fr; } }

.cp-story-card,
.cp-shop-card {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	box-shadow: var(--shadow-card);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
	color: inherit;
}
.cp-story-card:hover,
.cp-shop-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-h);
	color: inherit;
}
.cp-story-card__media,
.cp-shop-card__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-story-card__media img,
.cp-shop-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-story-card__title,
.cp-shop-card__title {
	font-family: var(--cp-font-heading);
	font-size: var(--text-base);
	color: var(--cp-ink);
	padding: 0 var(--space-2);
}
.cp-story-card__date,
.cp-shop-card__meta {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	padding: 0 var(--space-2) var(--space-2);
	display: flex;
	gap: var(--space-3);
	justify-content: space-between;
}

.cp-news-list {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-narrow));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.cp-news-list__row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: var(--space-4);
	align-items: baseline;
	padding: var(--space-3) var(--space-4);
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	color: inherit;
	transition: background var(--dur-fast) var(--ease);
}
.cp-news-list__row:hover { background: var(--cp-bg-deep); color: inherit; }
.cp-news-list__issue {
	font-family: var(--cp-font-display);
	color: var(--cp-accent-teal);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
}
.cp-news-list__date {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
}
.cp-news-list__title {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink);
}
@media (max-width: 600px) {
	.cp-news-list__row {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
}

.cp-empty {
	text-align: center;
	color: var(--cp-ink-soft);
	font-size: var(--text-sm);
	padding: var(--space-5) 0;
}

/* --------------------------------------------------------------------------
   15. Reveal animation
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 1;
}
.cp-anim-js [data-reveal] {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.cp-anim-js [data-reveal] { opacity: 1; }
}

/* --------------------------------------------------------------------------
   16. Page-content (default WP content area)
   -------------------------------------------------------------------------- */
.cp-page-body {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-narrow));
	margin: var(--space-6) auto;
	font-family: var(--cp-font-body);
}
.cp-page-body h2 { font-size: var(--text-xl); margin: var(--space-5) 0 var(--space-3); }
.cp-page-body h3 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
.cp-page-body p { margin-bottom: var(--space-3); line-height: 1.85; }
.cp-page-body a { color: var(--cp-brown); text-decoration: underline; text-underline-offset: 3px; }
.cp-page-body img { border-radius: var(--radius-image); margin: var(--space-3) 0; }

/* --------------------------------------------------------------------------
   17. Compatibility classes (used by sub-page templates)
   下層ページ（World / Characters / Shop / Contact / Newsletter 等）の既存マークアップ
   が参照するクラス。新デザイン言語で再定義し、見た目をキャラIP路線に揃える。
   -------------------------------------------------------------------------- */

/* generic eyebrow */
.cp-eyebrow {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.22em;
	color: var(--cp-accent-teal);
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}

/* section body wrapper */
.cp-section__body {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin-inline: auto;
}

/* generic prose */
.cp-prose {
	max-width: var(--container-narrow);
	margin-inline: auto;
	font-family: var(--cp-font-body);
	font-size: var(--text-base);
	line-height: 1.95;
	color: var(--cp-ink);
}
.cp-prose p { margin-bottom: var(--space-3); }
.cp-prose a { color: var(--cp-brown); text-decoration: underline; text-underline-offset: 3px; }

/* World list */
.cp-world-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
@media (max-width: 720px) {
	.cp-world-list { grid-template-columns: 1fr; }
}
.cp-world-list__row {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
}
.cp-world-list__label {
	font-family: var(--cp-font-display);
	font-size: var(--text-lg);
	color: var(--cp-ink);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line);
}
.cp-world-list__items li {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink);
	padding: var(--space-2) 0 var(--space-2) var(--space-4);
	position: relative;
	line-height: 1.85;
}
.cp-world-list__items li::before {
	content: "•";
	position: absolute;
	left: var(--space-1);
	color: var(--cp-brown);
}

/* Characters hub */
.cp-characters-hub {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
@media (max-width: 720px) {
	.cp-characters-hub { grid-template-columns: 1fr; }
}
.cp-characters-hub__row {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--space-4);
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	box-shadow: var(--shadow-card);
	color: inherit;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-characters-hub__row:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-h);
	color: inherit;
}
.cp-characters-hub__media {
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-characters-hub__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cp-characters-hub__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2);
}
.cp-characters-hub__num {
	font-family: var(--cp-font-display);
	font-size: var(--text-xs);
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
}
.cp-characters-hub__name {
	font-family: var(--cp-font-display);
	font-size: var(--text-xl);
	color: var(--cp-brown-deep);
	letter-spacing: 0.06em;
}
.cp-characters-hub__tagline {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	line-height: 1.85;
}

/* Character detail */
.cp-character-detail {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin: var(--space-6) auto;
}
.cp-character-detail__hero {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-6);
}
.cp-character-detail__hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-5);
	align-items: center;
}
@media (max-width: 720px) {
	.cp-character-detail__hero-grid { grid-template-columns: 1fr; }
}
.cp-character-detail__hero-image {
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-character-detail__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cp-character-detail__num {
	font-family: var(--cp-font-display);
	font-size: var(--text-xs);
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-2);
}
.cp-character-detail__name {
	font-family: var(--cp-font-display);
	font-size: var(--text-3xl);
	color: var(--cp-ink);
	letter-spacing: 0.04em;
	margin-bottom: var(--space-2);
}
.cp-character-detail__name-jp {
	font-family: var(--cp-font-heading);
	font-size: var(--text-lg);
	color: var(--cp-ink-soft);
	letter-spacing: 0.18em;
	margin-bottom: var(--space-3);
}
.cp-character-detail__role {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-3);
}
.cp-character-detail__tagline {
	font-family: var(--cp-font-body);
	font-size: var(--text-base);
	color: var(--cp-ink);
	line-height: 1.95;
}
.cp-character-detail__profile,
.cp-character-detail__about,
.cp-character-detail__likes,
.cp-character-detail__canon,
.cp-character-detail__birthday,
.cp-character-detail__section {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-4);
}
.cp-character-detail__section-title {
	font-family: var(--cp-font-heading);
	font-size: var(--text-xl);
	color: var(--cp-ink);
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line);
}
.cp-character-detail__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-4) 0;
	margin-top: var(--space-5);
	border-top: 1px solid var(--cp-line);
}
.cp-character-detail__nav-prev,
.cp-character-detail__nav-next {
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cp-character-detail__nav-next { text-align: right; }
.cp-character-detail__nav-label {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
}
.cp-character-detail__nav-name {
	font-family: var(--cp-font-display);
	font-size: var(--text-base);
	color: var(--cp-brown-deep);
}
.cp-character-detail__nav-all {
	color: var(--cp-brown);
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
}

/* Canon block */
.cp-canon-block {
	background: var(--cp-bg);
	border-radius: var(--radius-image);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-2);
}
.cp-canon-block__label {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-1);
}

/* Shop headliner */
.cp-shop-headliner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin: 0 auto var(--space-6);
	align-items: center;
	color: inherit;
}
.cp-shop-headliner:hover { color: inherit; }
@media (max-width: 720px) {
	.cp-shop-headliner { grid-template-columns: 1fr; }
}
.cp-shop-headliner__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-shop-headliner__media img {
	width: 100%; height: 100%; object-fit: cover;
}
.cp-shop-headliner__label {
	font-family: var(--cp-font-display);
	font-size: var(--text-xs);
	color: var(--cp-accent-teal);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-2);
}
.cp-shop-headliner__title {
	font-family: var(--cp-font-display);
	font-size: var(--text-2xl);
	color: var(--cp-ink);
	margin-bottom: var(--space-3);
}
.cp-shop-headliner__meta {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-3);
}
.cp-shop-headliner__price {
	font-family: var(--cp-font-display);
	font-size: var(--text-lg);
	color: var(--cp-ink);
	margin-bottom: var(--space-3);
}

/* Contact */
.cp-contact {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-narrow));
	margin: var(--space-6) auto;
}
.cp-contact__intro {
	font-family: var(--cp-font-body);
	color: var(--cp-ink-soft);
	line-height: 1.9;
	margin-bottom: var(--space-4);
}
.cp-contact__form {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
}
.cp-contact__form input,
.cp-contact__form textarea,
.cp-contact__form select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--cp-line);
	border-radius: var(--radius-image);
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	background: var(--cp-bg);
	color: var(--cp-ink);
	margin-bottom: var(--space-3);
}
.cp-contact__form textarea { min-height: 160px; resize: vertical; }
.cp-contact__form label {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	letter-spacing: 0.1em;
}

/* Newsletter (footer / inline) */
.cp-newsletter {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	max-width: var(--container-narrow);
	margin: var(--space-5) auto;
	text-align: center;
}
.cp-newsletter__lead {
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	line-height: 1.85;
	margin-bottom: var(--space-3);
}
.cp-newsletter__embed {
	display: flex;
	gap: var(--space-2);
	max-width: 480px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}
.cp-newsletter__embed input[type="email"] {
	flex: 1;
	min-width: 200px;
	padding: 10px 16px;
	border: 1px solid var(--cp-line);
	border-radius: var(--radius-pill);
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	background: var(--cp-bg);
	color: var(--cp-ink);
}
.cp-newsletter__embed button {
	background: var(--cp-accent-teal);
	color: var(--cp-bg-soft);
	padding: 10px 24px;
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	transition: background var(--dur-fast) var(--ease);
}
.cp-newsletter__embed button:hover { background: var(--cp-brown); }

/* ==========================================================================
   18. v4.1 — jorganic 風縦長ブロック
   ========================================================================== */

/* ----- Hero v4.1（左テキスト・右ビジュアル / scene 配置は廃止） ----- */
.cp-hero--v41 .cp-hero__inner {
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
	align-items: center;
}
.cp-hero--v41 .cp-hero__inner .cp-hero__visual { display: block; }
.cp-hero--v41 .cp-hero__visual img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
}
.cp-hero--v41 .cp-hero__title {
	font-family: var(--cp-font-display);
	font-size: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
	letter-spacing: 0.02em;
	color: var(--cp-ink);
	line-height: 1.05;
	margin-bottom: var(--space-2);
}
.cp-hero--v41 .cp-hero__title-jp {
	font-family: var(--cp-font-heading);
	font-size: var(--text-lg);
	color: var(--cp-ink-soft);
	letter-spacing: 0.06em;
	margin-bottom: var(--space-4);
}
.cp-hero--v41 .cp-hero__eyebrow {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.22em;
	color: var(--cp-accent-teal);
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}
@media (max-width: 880px) {
	.cp-hero--v41 .cp-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: var(--space-5);
	}
	.cp-hero--v41 .cp-hero__cta { justify-content: center; display: flex; }
	.cp-hero--v41 .cp-hero__visual img { max-height: 320px; margin: 0 auto; }
}

/* Hero scene の旧フルブリード絵を v4.1 では使わないので念のため打ち消し */
.cp-hero--v41 .cp-hero__scene { display: none; }

/* ----- Block 共通 ----- */
.cp-block {
	padding: var(--space-7) 0;
	position: relative;
	z-index: 1;
}
.cp-block--lg { padding: var(--space-8) 0; }

.cp-block__inner {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-max));
	margin-inline: auto;
}
.cp-block__inner--narrow {
	width: min(100% - clamp(20px, 4vw, 48px), var(--container-narrow));
	margin-inline: auto;
	text-align: center;
}
.cp-block__inner--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-4), 5vw, var(--space-6));
	align-items: center;
}
.cp-block__inner--reverse .cp-block__media { order: 2; }
@media (max-width: 880px) {
	.cp-block__inner--split { grid-template-columns: 1fr; }
	.cp-block__inner--reverse .cp-block__media { order: 0; }
}

.cp-block__head {
	text-align: center;
	margin-bottom: var(--space-6);
}
.cp-block__eyebrow {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.22em;
	color: var(--cp-accent-teal);
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}
.cp-block__title {
	font-family: var(--cp-font-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	color: var(--cp-ink);
	line-height: 1.4;
	margin-bottom: var(--space-3);
	letter-spacing: 0.02em;
	font-weight: 600;
}
.cp-block__lead {
	font-family: var(--cp-font-body);
	font-size: var(--text-lg);
	color: var(--cp-ink-soft);
	line-height: 1.95;
	max-width: 600px;
	margin-inline: auto;
	margin-bottom: var(--space-4);
}
.cp-block__text {
	font-family: var(--cp-font-body);
	font-size: var(--text-base);
	color: var(--cp-ink);
	line-height: 1.95;
	margin-bottom: var(--space-4);
}
.cp-block__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-image);
}
.cp-block__more {
	text-align: center;
	margin-top: var(--space-5);
}

/* ----- Concept 専用 ----- */
.cp-block--concept .cp-block__title {
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	margin-bottom: var(--space-4);
}

/* ----- 個別ブロック背景の交互（読み物的なリズム） ----- */
.cp-block--concept    { background: var(--cp-bg); }
.cp-block--feature    { background: var(--cp-bg-soft); }
.cp-block--world      { background: var(--cp-bg); }
.cp-block--characters { background: var(--cp-bg-soft); }
.cp-block--enjoy      { background: var(--cp-bg); }
.cp-block--voices     { background: var(--cp-bg-soft); }
.cp-block--news       { background: var(--cp-bg); }

/* ----- キャラクターグリッド（jorganic ゼッケン番号付き商品カード調） ----- */
.cp-char-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}
@media (max-width: 1024px) { .cp-char-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .cp-char-grid { grid-template-columns: 1fr; } }

.cp-char-card {
	background: var(--cp-bg);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	box-shadow: var(--shadow-card);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
	color: inherit;
	position: relative;
}
.cp-char-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-h);
	color: inherit;
}
.cp-char-card__bib {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line);
	margin-bottom: var(--space-2);
}
.cp-char-card__bib-no {
	font-family: var(--cp-font-display);
	font-size: 1.4rem;
	color: var(--cp-accent-teal);
	letter-spacing: 0.04em;
	font-weight: 600;
	line-height: 1;
}
.cp-char-card__bib-type {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.18em;
	color: var(--cp-ink-soft);
	text-transform: uppercase;
}
.cp-char-card__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-char-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cp-char-card__name {
	font-family: var(--cp-font-display);
	font-size: 1.4rem;
	color: var(--cp-ink);
	letter-spacing: 0.04em;
	margin-top: var(--space-2);
}
.cp-char-card__name-jp {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	letter-spacing: 0.06em;
}
.cp-char-card__role {
	color: var(--cp-accent-teal);
}
.cp-char-card__desc {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	line-height: 1.85;
}

/* ----- 楽しみ方 enjoy グリッド（同じ調） ----- */
.cp-enjoy-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}
@media (max-width: 1024px) { .cp-enjoy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .cp-enjoy-grid { grid-template-columns: 1fr; } }

.cp-enjoy-card {
	background: var(--cp-bg-soft);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	box-shadow: var(--shadow-card);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
	color: inherit;
}
.cp-enjoy-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-h);
	color: inherit;
}
.cp-enjoy-card__bib {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line);
	margin-bottom: var(--space-2);
}
.cp-enjoy-card__bib-no {
	font-family: var(--cp-font-display);
	font-size: 1.3rem;
	color: var(--cp-accent-teal);
	letter-spacing: 0.04em;
	font-weight: 600;
	line-height: 1;
}
.cp-enjoy-card__bib-label {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.18em;
	color: var(--cp-ink-soft);
	text-transform: uppercase;
}
.cp-enjoy-card__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-enjoy-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-enjoy-card__title {
	font-family: var(--cp-font-heading);
	font-size: var(--text-lg);
	color: var(--cp-ink);
	margin-top: var(--space-2);
}
.cp-enjoy-card__desc {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	line-height: 1.85;
	flex: 1;
}
.cp-enjoy-card__cta {
	margin-top: var(--space-2);
	font-family: var(--cp-font-body);
	font-size: var(--text-sm);
	color: var(--cp-accent-teal);
	letter-spacing: 0.05em;
}

/* ----- 読者の声 ----- */
.cp-voice-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}
@media (max-width: 880px) { .cp-voice-grid { grid-template-columns: 1fr; } }

.cp-voice-card {
	background: var(--cp-bg);
	border-radius: var(--radius-card);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.cp-voice-card__text {
	font-family: var(--cp-font-body);
	font-size: var(--text-base);
	color: var(--cp-ink);
	line-height: 1.95;
	margin: 0;
	font-style: normal;
}
.cp-voice-card__meta {
	display: flex;
	gap: var(--space-3);
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	letter-spacing: 0.05em;
	padding-top: var(--space-3);
	border-top: 1px solid var(--cp-line);
}
.cp-voice-card__handle { color: var(--cp-accent-teal); font-weight: 500; }

/* ----- News list v4.1（jorganic ブログリスト調） ----- */
.cp-news-list-v41 {
	display: flex;
	flex-direction: column;
}
.cp-news-row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: var(--space-4);
	align-items: baseline;
	padding: var(--space-4) var(--space-2);
	border-bottom: 1px solid var(--cp-line);
	color: inherit;
	transition: background var(--dur-fast) var(--ease);
}
.cp-news-row:hover {
	background: var(--cp-bg);
	color: inherit;
}
.cp-news-row__date {
	font-family: var(--cp-font-display);
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	letter-spacing: 0.04em;
	min-width: 110px;
}
.cp-news-row__type {
	font-family: var(--cp-font-body);
	font-size: var(--text-xs);
	color: var(--cp-accent-teal);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid var(--cp-accent-teal);
	border-radius: var(--radius-pill);
	padding: 2px 12px;
	min-width: 80px;
	text-align: center;
}
.cp-news-row__title {
	font-family: var(--cp-font-body);
	font-size: var(--text-base);
	color: var(--cp-ink);
}
@media (max-width: 600px) {
	.cp-news-row {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
}

/* ==========================================================================
   §19 v4.2 — Moomin IA × ONIBUS aesthetic（front-page.php 新コンポーネント）
   prefix: .cp-m-* （moomin-style の意）
   ========================================================================== */

/* ---------- Section spacing ベース ---------- */
.cp-m-hero,
.cp-m-featured,
.cp-m-news,
.cp-m-shop,
.cp-m-navcards {
	background: var(--cp-bg);
	padding-block: clamp(48px, 7vw, 120px);
}
.cp-m-featured { background: var(--cp-bg-soft); }
.cp-m-shop     { background: var(--cp-bg-soft); }

/* ---------- 1. HERO ---------- */
.cp-m-hero { padding-block: clamp(40px, 6vw, 100px) clamp(48px, 7vw, 120px); }
.cp-m-hero__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.cp-m-hero__visual {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cp-m-hero__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin-bottom: var(--space-3);
}
.cp-m-hero__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--cp-ink);
	margin-bottom: var(--space-4);
}
.cp-m-hero__lead {
	font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
	line-height: 1.95;
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-5);
}
.cp-m-hero__cta {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
@media (max-width: 880px) {
	.cp-m-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}
	.cp-m-hero__visual { aspect-ratio: 16 / 10; order: -1; }
}

/* ---------- Buttons (Moomin/ONIBUS hybrid) ---------- */
.cp-m-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 28px;
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	border-radius: 999px;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	border: 1px solid transparent;
	line-height: 1;
}
.cp-m-btn--primary {
	background: var(--cp-ink);
	color: var(--cp-white);
}
.cp-m-btn--primary:hover {
	background: var(--cp-brown);
	color: var(--cp-white);
	transform: translateY(-2px);
}
.cp-m-btn--ghost {
	background: transparent;
	color: var(--cp-ink);
	border-color: var(--cp-ink);
}
.cp-m-btn--ghost:hover {
	background: var(--cp-ink);
	color: var(--cp-white);
	transform: translateY(-2px);
}
.cp-m-btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.cp-m-btn:hover .cp-m-btn__arrow { transform: translateX(3px); }

/* ---------- 2. FEATURED ---------- */
.cp-m-featured__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-featured__card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
	background: var(--cp-bg);
	padding: clamp(24px, 3vw, 48px);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-m-featured__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-h);
}
.cp-m-featured__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}
.cp-m-featured__card:hover .cp-m-featured__media img { transform: scale(1.03); }
.cp-m-featured__date {
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-2);
}
.cp-m-featured__eyebrow {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin-bottom: var(--space-3);
}
.cp-m-featured__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
	line-height: 1.35;
	color: var(--cp-ink);
	margin-bottom: var(--space-3);
}
.cp-m-featured__excerpt {
	font-size: 0.95rem;
	line-height: 1.95;
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-4);
}
.cp-m-featured__more {
	display: inline-flex;
	gap: var(--space-2);
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	color: var(--cp-brown);
}
@media (max-width: 880px) {
	.cp-m-featured__card { grid-template-columns: 1fr; }
}

/* ---------- Section head（共通） ---------- */
.cp-m-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: clamp(28px, 3vw, 56px);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-m-section-head__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2rem);
	letter-spacing: 0.01em;
	color: var(--cp-ink);
	margin: 0;
}
.cp-m-section-head__more {
	display: inline-flex;
	gap: var(--space-1);
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	color: var(--cp-ink-soft);
	white-space: nowrap;
}
.cp-m-section-head__more:hover { color: var(--cp-brown); }
@media (max-width: 600px) {
	.cp-m-section-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ---------- 3. NEWS GRID（3カード） ---------- */
.cp-m-news__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
}
.cp-m-news-card { display: block; }
.cp-m-news-card__media {
	margin: 0 0 var(--space-3);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}
.cp-m-news-card:hover .cp-m-news-card__media img { transform: scale(1.04); }
.cp-m-news-card__date {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-1);
}
.cp-m-news-card__title {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--cp-ink);
	margin: 0;
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-news-card:hover .cp-m-news-card__title { color: var(--cp-brown); }
@media (max-width: 880px) {
	.cp-m-news__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.cp-m-news__grid { grid-template-columns: 1fr; }
}

/* ---------- 4. SHOP GRID（4カード） ---------- */
.cp-m-shop__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 32px);
}
.cp-m-shop-card { display: block; }
.cp-m-shop-card__media {
	margin: 0 0 var(--space-3);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-m-shop-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}
.cp-m-shop-card:hover .cp-m-shop-card__media img { transform: scale(1.04); }
.cp-m-shop-card__title {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--cp-ink);
	margin: 0 0 var(--space-1);
}
.cp-m-shop-card__price {
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--cp-brown);
	margin: 0;
}
@media (max-width: 880px) {
	.cp-m-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 5-7. NAV CARDS（3 段） ---------- */
.cp-m-navcards__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 80px);
}
.cp-m-navcard {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	padding: clamp(20px, 3vw, 48px);
	background: var(--cp-bg);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-m-navcard--reverse { grid-template-columns: 1fr 1.05fr; }
.cp-m-navcard--reverse .cp-m-navcard__media { order: 2; }
.cp-m-navcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-h);
}
.cp-m-navcard__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-navcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}
.cp-m-navcard:hover .cp-m-navcard__media img { transform: scale(1.03); }
.cp-m-navcard__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin-bottom: var(--space-3);
}
.cp-m-navcard__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
	line-height: 1.2;
	color: var(--cp-ink);
	margin: 0 0 var(--space-3);
}
.cp-m-navcard__lead {
	font-size: 0.95rem;
	line-height: 1.95;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-4);
}
.cp-m-navcard__cta {
	display: inline-flex;
	gap: var(--space-2);
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	color: var(--cp-ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--cp-ink);
}
.cp-m-navcard:hover .cp-m-navcard__cta { color: var(--cp-brown); border-color: var(--cp-brown); }
@media (max-width: 880px) {
	.cp-m-navcard,
	.cp-m-navcard--reverse { grid-template-columns: 1fr; }
	.cp-m-navcard--reverse .cp-m-navcard__media { order: 0; }
}

/* ---------- ナビ submenu（ヘッダー drop down） ---------- */
.cp-primary-nav__item.has-sub { position: relative; }
.cp-primary-nav__caret {
	display: inline-block;
	margin-left: 4px;
	font-size: 0.7em;
	transition: transform var(--dur-fast) var(--ease);
}
.cp-primary-nav__item.has-sub:hover .cp-primary-nav__caret,
.cp-primary-nav__item.has-sub:focus-within .cp-primary-nav__caret {
	transform: rotate(180deg);
}
.cp-primary-nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 220px;
	background: var(--cp-bg);
	border: 1px solid var(--cp-line-soft);
	box-shadow: var(--shadow-card);
	padding: var(--space-2) 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	z-index: 200;
}
.cp-primary-nav__item.has-sub:hover .cp-primary-nav__sub,
.cp-primary-nav__item.has-sub:focus-within .cp-primary-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.cp-primary-nav__sub-link {
	display: block;
	padding: 10px 20px;
	font-family: var(--cp-font-display);
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	color: var(--cp-ink);
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-primary-nav__sub-link:hover {
	background: var(--cp-bg-soft);
	color: var(--cp-brown);
}
@media (max-width: 960px) {
	.cp-primary-nav__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding: var(--space-1) 0 var(--space-2) var(--space-3);
		background: transparent;
		min-width: 0;
	}
	.cp-primary-nav__sub-link {
		font-size: 0.95rem;
		padding: 8px 0;
		text-align: center;
	}
	.cp-primary-nav__caret { display: none; }
}

/* ==========================================================================
   §20 v4.2.2 — Sub-page templates (Moomin IA × ONIBUS)
   prefix: .cp-m-* （Phase 3a: Characters / World / Quotes / About / Experience）
   ========================================================================== */

/* ---------- 共通: Page hero ---------- */
.cp-m-pagehero {
	background: var(--cp-bg);
	padding-block: clamp(56px, 8vw, 140px) clamp(40px, 5vw, 80px);
}
.cp-m-pagehero__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-max));
	margin-inline: auto;
	text-align: center;
}
.cp-m-pagehero__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin-bottom: var(--space-3);
}
.cp-m-pagehero__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
	line-height: 1.25;
	color: var(--cp-ink);
	margin-bottom: var(--space-4);
}
.cp-m-pagehero__lead {
	font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
	line-height: 1.95;
	color: var(--cp-ink-soft);
	max-width: 640px;
	margin-inline: auto;
}

/* ---------- 共通: prose（読み物） ---------- */
.cp-m-prose p {
	font-size: 1rem;
	line-height: 2.05;
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-3);
}
.cp-m-prose p:last-child { margin-bottom: 0; }

/* ==========================================================================
   /characters/
   ========================================================================== */
.cp-m-charactergrid {
	background: var(--cp-bg);
	padding-block: clamp(40px, 5vw, 80px) clamp(48px, 7vw, 120px);
}
.cp-m-charactergrid__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-charactergrid__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
}
.cp-m-charactercard { display: block; text-align: center; }
.cp-m-charactercard__media {
	margin: 0 0 var(--space-3);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg-soft);
	border-radius: 50%;
}
.cp-m-charactercard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}
.cp-m-charactercard:hover .cp-m-charactercard__media img { transform: scale(1.05); }
.cp-m-charactercard__name {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--cp-ink);
	margin: 0 0 var(--space-1);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-charactercard:hover .cp-m-charactercard__name { color: var(--cp-brown); }
.cp-m-charactercard__role {
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	color: var(--cp-ink-soft);
	margin: 0;
}
@media (max-width: 880px) {
	.cp-m-charactergrid__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Character bio (long detail) */
.cp-m-bio {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 100px);
	border-top: 1px solid var(--cp-line-soft);
	scroll-margin-top: 120px;
}
.cp-m-bio--alt { background: var(--cp-bg-soft); border-top-color: transparent; }
.cp-m-bio__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.cp-m-bio__media {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-m-bio__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-m-bio__num {
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
}
.cp-m-bio__name {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
	line-height: 1.15;
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
}
.cp-m-bio__name-jp {
	display: inline-block;
	margin-left: var(--space-3);
	font-size: 0.5em;
	font-weight: 500;
	color: var(--cp-ink-soft);
	letter-spacing: 0.04em;
}
.cp-m-bio__tagline {
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--cp-brown-deep);
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-m-bio__text {
	font-size: 0.98rem;
	line-height: 2.05;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-3);
}
.cp-m-bio__meta {
	margin: var(--space-5) 0 0;
	display: grid;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-m-bio__meta > div {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--space-3);
}
.cp-m-bio__meta dt {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}
.cp-m-bio__meta dd {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--cp-ink);
}
@media (max-width: 880px) {
	.cp-m-bio__inner { grid-template-columns: 1fr; }
	.cp-m-bio__media { max-width: 360px; margin-inline: auto; }
}

/* ==========================================================================
   /world/
   ========================================================================== */
.cp-m-worldhero {
	position: relative;
	background: var(--cp-bg);
}
.cp-m-worldhero__visual {
	margin: 0;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-worldhero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-m-worldhero__caption {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-max));
	margin: clamp(-80px, -6vw, -40px) auto 0;
	background: var(--cp-bg);
	padding: clamp(28px, 3vw, 48px) clamp(24px, 4vw, 56px);
	text-align: center;
	position: relative;
	z-index: 2;
}
.cp-m-worldhero__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
}
.cp-m-worldhero__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
	line-height: 1.2;
	color: var(--cp-ink);
	margin: 0 0 var(--space-3);
}
.cp-m-worldhero__lead {
	font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
	line-height: 1.95;
	color: var(--cp-ink-soft);
	max-width: 620px;
	margin-inline: auto;
}

.cp-m-worldblocks {
	background: var(--cp-bg);
	padding-block: clamp(48px, 7vw, 120px);
}
.cp-m-worldblocks__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(28px, 4vw, 64px);
}
.cp-m-worldblock {
	background: var(--cp-bg-soft);
	padding: clamp(24px, 3vw, 48px);
}
.cp-m-worldblock__label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line);
}
.cp-m-worldblock__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
}
.cp-m-worldblock__items li {
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--cp-ink-soft);
	padding-left: 1.2em;
	position: relative;
}
.cp-m-worldblock__items li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--cp-brown);
}
@media (max-width: 720px) {
	.cp-m-worldblocks__inner { grid-template-columns: 1fr; }
}

.cp-m-worldcta {
	background: var(--cp-bg-soft);
	padding-block: clamp(56px, 7vw, 120px);
}
.cp-m-worldcta__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
	text-align: center;
}
.cp-m-worldcta__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
}
.cp-m-worldcta__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	color: var(--cp-ink);
	margin: 0 0 var(--space-4);
}
.cp-m-worldcta__text {
	font-size: 1rem;
	line-height: 2;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-5);
}

/* ==========================================================================
   /quotes/
   ========================================================================== */
.cp-m-quotes {
	background: var(--cp-bg-soft);
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-m-quotes__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-max));
	margin-inline: auto;
	display: grid;
	gap: clamp(28px, 3vw, 48px);
}
.cp-m-quote {
	margin: 0;
	background: var(--cp-bg);
	padding: clamp(24px, 3vw, 48px) clamp(28px, 4vw, 56px);
	display: grid;
	gap: var(--space-3);
}
.cp-m-quote__text {
	margin: 0;
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
	line-height: 1.7;
	color: var(--cp-ink);
	position: relative;
}
.cp-m-quote__mark {
	display: inline-block;
	color: var(--cp-brown);
	font-size: 1.6em;
	margin-right: 8px;
	line-height: 0;
	vertical-align: -0.18em;
}
.cp-m-quote__attr {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: baseline;
	padding-top: var(--space-3);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-m-quote__who {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--cp-ink);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-quote__who:hover { color: var(--cp-brown); }
.cp-m-quote__who-jp {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.85em;
	color: var(--cp-ink-soft);
	font-weight: 400;
}
.cp-m-quote__note {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}

/* ==========================================================================
   /about/
   ========================================================================== */
.cp-m-aboutintro {
	background: var(--cp-bg);
	padding-block: clamp(40px, 5vw, 80px) clamp(48px, 7vw, 120px);
}
.cp-m-aboutintro__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}
.cp-m-aboutcards {
	background: var(--cp-bg-soft);
	padding-block: clamp(48px, 7vw, 120px);
}
.cp-m-aboutcards__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
}
.cp-m-aboutcard {
	display: grid;
	grid-template-columns: 0.8fr 1fr;
	gap: clamp(16px, 2vw, 32px);
	background: var(--cp-bg);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-m-aboutcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-h);
}
.cp-m-aboutcard__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-aboutcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}
.cp-m-aboutcard:hover .cp-m-aboutcard__media img { transform: scale(1.04); }
.cp-m-aboutcard__body {
	padding: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cp-m-aboutcard__eyebrow {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-2);
}
.cp-m-aboutcard__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.45rem);
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
	line-height: 1.4;
}
.cp-m-aboutcard__lead {
	font-size: 0.92rem;
	line-height: 1.85;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-3);
}
.cp-m-aboutcard__cta {
	display: inline-flex;
	gap: var(--space-1);
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--cp-ink);
}
.cp-m-aboutcard:hover .cp-m-aboutcard__cta { color: var(--cp-brown); }
@media (max-width: 880px) {
	.cp-m-aboutcards__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.cp-m-aboutcard { grid-template-columns: 1fr; }
	.cp-m-aboutcard__body { padding: 0 var(--space-3) var(--space-3); }
}

/* ==========================================================================
   /experience/
   ========================================================================== */
.cp-m-explist {
	background: var(--cp-bg);
	padding-block: clamp(48px, 7vw, 120px);
}
.cp-m-explist__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 80px);
}
.cp-m-expcard {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	padding: clamp(20px, 3vw, 48px);
	background: var(--cp-bg);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-m-expcard--reverse { grid-template-columns: 1fr 1.1fr; }
.cp-m-expcard--reverse .cp-m-expcard__media { order: 2; }
.cp-m-expcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-h);
}
.cp-m-expcard__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-expcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}
.cp-m-expcard:hover .cp-m-expcard__media img { transform: scale(1.03); }
.cp-m-expcard__num {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
}
.cp-m-expcard__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
	line-height: 1.3;
	color: var(--cp-ink);
	margin: 0 0 var(--space-3);
}
.cp-m-expcard__lead {
	font-size: 0.95rem;
	line-height: 1.95;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-4);
}
.cp-m-expcard__cta {
	display: inline-flex;
	gap: var(--space-2);
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	color: var(--cp-ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--cp-ink);
}
.cp-m-expcard:hover .cp-m-expcard__cta { color: var(--cp-brown); border-color: var(--cp-brown); }
@media (max-width: 880px) {
	.cp-m-expcard,
	.cp-m-expcard--reverse { grid-template-columns: 1fr; }
	.cp-m-expcard--reverse .cp-m-expcard__media { order: 0; }
}

/* ==========================================================================
   §21 v4.2.3 — Single character page (template-character-detail.php)
   prefix: .cp-cd-* （Character Detail）
   各キャラの theme.bg/accent/soft が CSS変数 --char-* として注入される。
   ========================================================================== */

.cp-cd { color: var(--cp-ink); }

/* ---------- Hero ---------- */
.cp-cd-hero {
	padding-block: clamp(48px, 7vw, 120px);
}
.cp-cd-hero__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.cp-cd-hero__visual {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg-soft);
	border-radius: 50%;
}
.cp-cd-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-cd-hero__num {
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-3);
}
.cp-cd-hero__name {
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4.4rem);
	line-height: 1.1;
	color: var(--cp-ink);
	margin: 0 0 var(--space-3);
}
.cp-cd-hero__name-jp {
	display: block;
	margin-top: var(--space-1);
	font-size: 0.4em;
	font-weight: 500;
	color: var(--cp-ink-soft);
	letter-spacing: 0.08em;
}
.cp-cd-hero__tagline {
	font-family: var(--cp-font-display);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
	font-weight: 500;
	color: var(--char-accent, var(--cp-brown-deep));
	margin: 0 0 var(--space-5);
	line-height: 1.65;
}
.cp-cd-hero__meta {
	margin: 0;
	display: grid;
	gap: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(34,34,34,0.12);
}
.cp-cd-hero__meta > div {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--space-3);
}
.cp-cd-hero__meta dt {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}
.cp-cd-hero__meta dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--cp-ink);
}
@media (max-width: 880px) {
	.cp-cd-hero__inner { grid-template-columns: 1fr; }
	.cp-cd-hero__visual { max-width: 320px; margin-inline: auto; }
}

/* ---------- Voice ---------- */
.cp-cd-voice {
	background: var(--cp-bg);
	padding-block: clamp(56px, 7vw, 120px);
}
.cp-cd-voice__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
	text-align: center;
}
.cp-cd-voice__label {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-3);
}
.cp-cd-voice__text {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
	line-height: 1.85;
	color: var(--cp-ink);
	margin: 0 0 var(--space-5);
}
.cp-cd-voice__wave {
	width: 100%;
	height: 60px;
	color: var(--char-accent, var(--cp-brown));
	display: block;
}

/* ---------- Bio ---------- */
.cp-cd-bio {
	background: var(--cp-bg-soft);
	padding-block: clamp(56px, 7vw, 120px);
}
.cp-cd-bio__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}

/* ---------- Birthday ---------- */
.cp-cd-bday {
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-cd-bday__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
	text-align: center;
}
.cp-cd-bday__label {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-3);
}
.cp-cd-bday__date {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	color: var(--cp-ink);
	margin: 0 0 var(--space-3);
}
.cp-cd-bday__count {
	font-size: 1rem;
	color: var(--cp-ink-soft);
	margin: 0;
}
.cp-cd-bday__count strong {
	font-size: 1.4em;
	color: var(--char-accent, var(--cp-brown-deep));
	font-weight: 700;
	margin: 0 0.2em;
}

/* ---------- Likes / Dislikes ---------- */
.cp-cd-pref {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-cd-pref__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
}
.cp-cd-pref__col { background: var(--cp-bg-soft); padding: clamp(24px, 3vw, 48px); }
.cp-cd-pref__label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line);
}
.cp-cd-pref__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-2);
}
.cp-cd-pref__items li {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--cp-ink);
	padding-left: 1.2em;
	position: relative;
}
.cp-cd-pref__items li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--char-accent, var(--cp-brown));
}
@media (max-width: 720px) {
	.cp-cd-pref__inner { grid-template-columns: 1fr; }
}

/* ---------- Taste Canon ---------- */
.cp-cd-taste {
	background: var(--cp-bg-soft);
	padding-block: clamp(56px, 7vw, 120px);
}
.cp-cd-taste__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-cd-taste__head {
	text-align: center;
	margin-bottom: clamp(32px, 4vw, 64px);
}
.cp-cd-taste__eyebrow {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-2);
}
.cp-cd-taste__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	color: var(--cp-ink);
	margin: 0;
}
.cp-cd-taste__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
}
.cp-cd-taste__cell {
	background: var(--cp-bg);
	padding: clamp(20px, 2.4vw, 32px);
}
.cp-cd-taste__cell-label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-cd-taste__cell-items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}
.cp-cd-taste__cell-items li {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--cp-ink-soft);
}
@media (max-width: 880px) {
	.cp-cd-taste__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.cp-cd-taste__grid { grid-template-columns: 1fr; }
}

/* ---------- Prev/Next Nav ---------- */
.cp-cd-nav {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 100px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 1px solid var(--cp-line-soft);
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-cd-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: clamp(20px, 2.4vw, 40px) clamp(24px, 4vw, 64px);
	transition: background var(--dur-fast) var(--ease);
}
.cp-cd-nav__link:hover { background: var(--cp-bg-soft); }
.cp-cd-nav__link--prev { text-align: left; }
.cp-cd-nav__link--next {
	text-align: right;
	border-left: 1px solid var(--cp-line-soft);
}
.cp-cd-nav__dir {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}
.cp-cd-nav__name {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	color: var(--cp-ink);
	transition: color var(--dur-fast) var(--ease);
}
.cp-cd-nav__link:hover .cp-cd-nav__name { color: var(--cp-brown); }
.cp-cd-nav__role {
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--cp-ink-soft);
}
@media (max-width: 600px) {
	.cp-cd-nav { grid-template-columns: 1fr; }
	.cp-cd-nav__link--next { border-left: 0; border-top: 1px solid var(--cp-line-soft); }
}

/* ---------- Back to all ---------- */
.cp-cd-back {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 80px);
	text-align: center;
}

/* ---------- character card tagline (page-characters grid) ---------- */
.cp-m-charactercard__tagline {
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--cp-ink-soft);
	margin: 6px 0 0;
	max-width: 280px;
	margin-inline: auto;
}

/* ==========================================================================
   §22 v4.2.4 — Character card hover wave + Modal popup
   ========================================================================== */

/* ---------- Card hover: wave & lift ---------- */
.cp-m-charactercard {
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease);
}
.cp-m-charactercard__media {
	position: relative;
	overflow: hidden;
}
.cp-m-charactercard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 320ms var(--ease), transform 600ms cubic-bezier(.2,.8,.2,1);
	will-change: transform;
}
.cp-m-charactercard__img--wave {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* 1) wave 画像がある場合: ホバーで still→wave クロスフェード */
.cp-m-charactercard.has-wave:hover .cp-m-charactercard__img--still,
.cp-m-charactercard.has-wave:focus-visible .cp-m-charactercard__img--still { opacity: 0; }
.cp-m-charactercard.has-wave:hover .cp-m-charactercard__img--wave,
.cp-m-charactercard.has-wave:focus-visible .cp-m-charactercard__img--wave { opacity: 1; }

/* 2) wave 画像がない場合: still 画像を CSS で揺らす（"こっちに気づいた" 表現） */
@keyframes cp-wave-hi {
	0%   { transform: rotate(0)   translateY(0); }
	18%  { transform: rotate(-6deg) translateY(-2px); }
	38%  { transform: rotate(8deg)  translateY(-4px); }
	58%  { transform: rotate(-5deg) translateY(-3px); }
	78%  { transform: rotate(4deg)  translateY(-2px); }
	100% { transform: rotate(0)   translateY(0); }
}
.cp-m-charactercard:not(.has-wave):hover .cp-m-charactercard__img--still,
.cp-m-charactercard:not(.has-wave):focus-visible .cp-m-charactercard__img--still {
	animation: cp-wave-hi 1100ms var(--ease) forwards;
	transform-origin: 50% 80%;
}

/* 共通の card lift */
.cp-m-charactercard:hover { transform: translateY(-4px); }
.cp-m-charactercard:hover .cp-m-charactercard__name { color: var(--cp-brown); }

@media (prefers-reduced-motion: reduce) {
	.cp-m-charactercard:not(.has-wave):hover .cp-m-charactercard__img--still { animation: none; }
	.cp-m-charactercard:hover { transform: none; }
}

/* ==========================================================================
   Character Modal
   ========================================================================== */
.cp-cmodal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: grid;
	place-items: center;
	padding: clamp(8px, 2vw, 24px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms var(--ease), visibility 240ms var(--ease);
}
.cp-cmodal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}
.cp-cmodal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(34, 34, 34, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.cp-cmodal__panel {
	position: relative;
	width: min(100%, 920px);
	max-height: calc(100vh - clamp(16px, 4vw, 48px));
	background: var(--cp-bg);
	box-shadow: 0 30px 80px rgba(34, 34, 34, 0.25);
	display: flex;
	flex-direction: column;
	transform: translateY(12px) scale(0.99);
	transition: transform 320ms cubic-bezier(.2,.8,.2,1);
	overflow: hidden;
}
.cp-cmodal[aria-hidden="false"] .cp-cmodal__panel { transform: translateY(0) scale(1); }

.cp-cmodal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	background: var(--cp-bg);
	border: 1px solid var(--cp-line);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cp-ink);
	cursor: pointer;
	z-index: 5;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-cmodal__close:hover { background: var(--cp-ink); color: var(--cp-white); }
.cp-cmodal__close svg { width: 18px; height: 18px; }

.cp-cmodal__scroll {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Modal hero */
.cp-cmodal__hero {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(20px, 3vw, 48px);
	padding: clamp(24px, 4vw, 56px);
	align-items: center;
}
.cp-cmodal__visual {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg);
	border-radius: 50%;
}
.cp-cmodal__visual img { width: 100%; height: 100%; object-fit: cover; }
.cp-cmodal__num {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-2);
}
.cp-cmodal__name {
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
	line-height: 1.15;
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
}
.cp-cmodal__name-jp {
	display: inline-block;
	margin-left: var(--space-2);
	font-size: 0.5em;
	font-weight: 500;
	color: var(--cp-ink-soft);
	letter-spacing: 0.06em;
}
.cp-cmodal__tagline {
	font-family: var(--cp-font-display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--char-accent, var(--cp-brown-deep));
	margin: 0;
	line-height: 1.65;
}

/* Modal body */
.cp-cmodal__body {
	padding: clamp(20px, 3vw, 48px);
	display: grid;
	gap: clamp(24px, 3vw, 40px);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-cmodal__sub-label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 var(--space-2);
}
.cp-cmodal__meta {
	margin: 0;
	display: grid;
	gap: var(--space-2);
}
.cp-cmodal__meta > div {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--space-3);
	font-size: 0.92rem;
	line-height: 1.6;
}
.cp-cmodal__meta dt {
	font-family: var(--cp-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}
.cp-cmodal__meta dd { margin: 0; color: var(--cp-ink); }
.cp-cmodal__count { color: var(--cp-ink-soft); font-size: 0.85em; }

.cp-cmodal__voice-text {
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--cp-ink);
	margin: 0;
}

.cp-cmodal__pref {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 40px);
}
.cp-cmodal__chips {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cp-cmodal__chips li {
	font-size: 0.82rem;
	line-height: 1;
	padding: 7px 12px;
	background: var(--cp-bg-soft);
	color: var(--cp-ink);
	border-radius: 999px;
}
.cp-cmodal__chips--dislike li {
	background: transparent;
	border: 1px dashed var(--cp-line);
	color: var(--cp-ink-soft);
}

.cp-cmodal__taste-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}
.cp-cmodal__taste-label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--char-accent, var(--cp-brown));
	margin: 0 0 4px;
}
.cp-cmodal__taste-items {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--cp-ink-soft);
}

.cp-cmodal__footer {
	display: flex;
	justify-content: center;
	padding-top: var(--space-3);
	border-top: 1px solid var(--cp-line-soft);
}

@media (max-width: 720px) {
	.cp-cmodal__hero { grid-template-columns: 1fr; text-align: center; }
	.cp-cmodal__visual { max-width: 240px; margin-inline: auto; }
	.cp-cmodal__pref { grid-template-columns: 1fr; }
	.cp-cmodal__taste-grid { grid-template-columns: 1fr; }
	.cp-cmodal__meta > div { grid-template-columns: 80px 1fr; }
}

/* Body scroll lock (JS が cp-modal-open をボディに付与) */
body.cp-modal-open { overflow: hidden; }

/* ==========================================================================
   §23 v4.2.5 — News index / category / single (Phase 3c)
   ========================================================================== */

/* ---------- Category tabs ---------- */
.cp-m-newscats {
	background: var(--cp-bg);
	padding-block: 0 clamp(24px, 3vw, 48px);
}
.cp-m-newscats__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: center;
	border-bottom: 1px solid var(--cp-line-soft);
	padding-bottom: var(--space-3);
}
.cp-m-newscats__tab {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 10px 20px;
	font-family: var(--cp-font-display);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--cp-ink-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cp-m-newscats__tab:hover {
	background: var(--cp-bg-soft);
	color: var(--cp-brown);
}
.cp-m-newscats__tab.is-active {
	background: var(--cp-ink);
	color: var(--cp-white);
}
.cp-m-newscats__tab small {
	font-size: 0.7em;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* ---------- News grid (archive + taxonomy) ---------- */
.cp-m-newslist {
	background: var(--cp-bg);
	padding-block: clamp(32px, 4vw, 64px) clamp(56px, 8vw, 140px);
}
.cp-m-newslist__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-newslist__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px);
}
.cp-m-newscard { background: var(--cp-bg); }
.cp-m-newscard__link { display: block; }
.cp-m-newscard__media {
	margin: 0 0 var(--space-3);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-newscard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}
.cp-m-newscard:hover .cp-m-newscard__media img { transform: scale(1.04); }
.cp-m-newscard__meta {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-1);
}
.cp-m-newscard__cat {
	color: var(--cp-brown);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.72rem;
}
.cp-m-newscard__date { font-variant-numeric: tabular-nums; }
.cp-m-newscard__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-newscard:hover .cp-m-newscard__title { color: var(--cp-brown); }
.cp-m-newscard__excerpt {
	font-size: 0.9rem;
	line-height: 1.85;
	color: var(--cp-ink-soft);
	margin: 0;
}
@media (max-width: 880px) {
	.cp-m-newslist__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.cp-m-newslist__grid { grid-template-columns: 1fr; }
}

.cp-m-empty {
	text-align: center;
	color: var(--cp-ink-soft);
	font-size: 1rem;
	line-height: 1.85;
	padding-block: var(--space-7);
}

/* ---------- Pagination ---------- */
.cp-m-pagination {
	margin-top: clamp(40px, 5vw, 80px);
	display: flex;
	justify-content: center;
}
.cp-m-pagination .nav-links,
.cp-m-pagination .page-numbers {
	display: inline-flex;
	gap: var(--space-1);
	font-family: var(--cp-font-display);
	font-size: 0.92rem;
}
.cp-m-pagination ul.page-numbers {
	display: inline-flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cp-m-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	color: var(--cp-ink);
	border: 1px solid var(--cp-line-soft);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cp-m-pagination .page-numbers:hover {
	background: var(--cp-bg-soft);
	border-color: var(--cp-brown);
	color: var(--cp-brown);
}
.cp-m-pagination .page-numbers.current {
	background: var(--cp-ink);
	color: var(--cp-white);
	border-color: var(--cp-ink);
}

/* ---------- Single article ---------- */
.cp-m-article { color: var(--cp-ink); }
.cp-m-crumb {
	background: var(--cp-bg);
	padding-block: clamp(20px, 2.4vw, 32px) 0;
}
.cp-m-crumb__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
	color: var(--cp-ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.cp-m-crumb a { color: var(--cp-ink-soft); transition: color var(--dur-fast) var(--ease); }
.cp-m-crumb a:hover { color: var(--cp-brown); }
.cp-m-crumb__current { color: var(--cp-ink); font-weight: 500; }

.cp-m-articlehero {
	background: var(--cp-bg);
	padding-block: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 80px);
}
.cp-m-articlehero__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
	text-align: center;
}
.cp-m-articlehero__meta {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-3);
}
.cp-m-articlehero__date { font-variant-numeric: tabular-nums; }
.cp-m-articlehero__sep { color: var(--cp-line); }
.cp-m-articlehero__cat {
	color: var(--cp-brown);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.72rem;
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-articlehero__cat:hover { color: var(--cp-brown-deep); }
.cp-m-articlehero__title {
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 3rem);
	line-height: 1.3;
	color: var(--cp-ink);
	margin: 0 0 var(--space-4);
	letter-spacing: 0.005em;
}
.cp-m-articlehero__lead {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
	line-height: 1.95;
	color: var(--cp-ink-soft);
	margin: 0;
}
.cp-m-articlehero__visual {
	margin: 0;
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-articlehero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-m-articlebody {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 96px);
}
.cp-m-articlebody__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}
.cp-m-articlebody__inner h2 {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
	margin: var(--space-7) 0 var(--space-3);
	line-height: 1.4;
}
.cp-m-articlebody__inner h3 {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1.2rem;
	margin: var(--space-5) 0 var(--space-2);
}
.cp-m-articlebody__inner img {
	margin: var(--space-5) 0;
	width: 100%;
	height: auto;
}
.cp-m-articlebody__inner blockquote {
	border-left: 3px solid var(--cp-brown);
	padding: var(--space-2) 0 var(--space-2) var(--space-4);
	margin: var(--space-5) 0;
	color: var(--cp-ink);
	font-style: italic;
}
.cp-m-articlebody__inner ul,
.cp-m-articlebody__inner ol {
	margin: var(--space-3) 0 var(--space-3) var(--space-5);
	list-style: revert;
}
.cp-m-articlebody__inner ul li,
.cp-m-articlebody__inner ol li {
	font-size: 1rem;
	line-height: 2;
	color: var(--cp-ink-soft);
	margin-bottom: var(--space-1);
}
.cp-m-articlebody__inner a {
	color: var(--cp-brown);
	border-bottom: 1px solid var(--cp-brown);
	transition: opacity var(--dur-fast) var(--ease);
}
.cp-m-articlebody__inner a:hover { opacity: 0.7; }

.cp-m-articlefoot {
	background: var(--cp-bg);
	padding-block: clamp(32px, 4vw, 64px);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-m-articlefoot__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	text-align: center;
}

/* ---------- Related news ---------- */
.cp-m-related {
	background: var(--cp-bg-soft);
	padding-block: clamp(56px, 7vw, 120px);
}
.cp-m-related__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}

/* ==========================================================================
   §24 v4.2.6 — About sub-pages (History/Maker/Locations/Licensing) + Contact
   ========================================================================== */

/* ---------- Common: 共通 prose 拡張 ---------- */
.cp-m-prose strong { color: var(--cp-ink); font-weight: 600; }

/* ==========================================================================
   /about/history/ — Vertical timeline
   ========================================================================== */
.cp-m-timeline {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 100px) clamp(56px, 8vw, 140px);
}
.cp-m-timeline__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-max));
	margin-inline: auto;
}
.cp-m-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.cp-m-timeline__list::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--cp-line-soft);
}
.cp-m-timeline__item {
	position: relative;
	padding: 0 0 clamp(40px, 5vw, 72px) 56px;
}
.cp-m-timeline__item:last-child { padding-bottom: 0; }
.cp-m-timeline__marker {
	position: absolute;
	left: 6px;
	top: 8px;
	width: 18px;
	height: 18px;
	background: var(--cp-bg);
	border: 2px solid var(--cp-brown);
	border-radius: 50%;
	z-index: 1;
}
.cp-m-timeline__year {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	color: var(--cp-brown);
	margin: 0 0 var(--space-2);
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
}
.cp-m-timeline__tag {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
	background: var(--cp-bg-soft);
	padding: 3px 8px;
	border-radius: 999px;
}
.cp-m-timeline__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
	line-height: 1.45;
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
}
.cp-m-timeline__text {
	font-size: 0.95rem;
	line-height: 2;
	color: var(--cp-ink-soft);
	margin: 0;
}

/* ==========================================================================
   /about/maker/
   ========================================================================== */
.cp-m-makerhero {
	background: var(--cp-bg);
	padding-block: clamp(40px, 5vw, 80px);
}
.cp-m-makerhero__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.cp-m-makerhero__visual {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg-soft);
	border-radius: 50%;
	max-width: 360px;
}
.cp-m-makerhero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-m-makerhero__name-en {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-2);
}
.cp-m-makerhero__name {
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 1.6rem + 2vw, 3.6rem);
	line-height: 1.15;
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
}
.cp-m-makerhero__role {
	font-family: var(--cp-font-display);
	font-size: 1rem;
	color: var(--cp-brown);
	margin: 0 0 var(--space-5);
}
.cp-m-makerhero__meta {
	margin: 0;
	display: grid;
	gap: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-m-makerhero__meta > div {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--space-3);
}
.cp-m-makerhero__meta dt {
	font-family: var(--cp-font-display);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}
.cp-m-makerhero__meta dd { margin: 0; font-size: 0.92rem; color: var(--cp-ink); }
@media (max-width: 880px) {
	.cp-m-makerhero__inner { grid-template-columns: 1fr; }
	.cp-m-makerhero__visual { margin-inline: auto; }
}

.cp-m-makerbio {
	background: var(--cp-bg-soft);
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-m-makerbio__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}

.cp-m-makercompany {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-m-makercompany__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
	text-align: center;
}
.cp-m-makercompany__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-2);
}
.cp-m-makercompany__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
}
.cp-m-makercompany__sub {
	font-family: var(--cp-font-display);
	font-size: 0.88rem;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-4);
	letter-spacing: 0.04em;
}
.cp-m-makercompany__text {
	font-size: 0.95rem;
	line-height: 2;
	color: var(--cp-ink-soft);
	margin: 0 0 var(--space-5);
}

.cp-m-makerlinks {
	background: var(--cp-bg-soft);
	padding-block: clamp(48px, 7vw, 120px);
}
.cp-m-makerlinks__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-makerlinks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
}
.cp-m-makerlinks__item a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: var(--space-3);
	padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
	background: var(--cp-bg);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-m-makerlinks__item a:hover {
	background: var(--cp-ink);
	color: var(--cp-white);
}
.cp-m-makerlinks__label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1rem;
}
.cp-m-makerlinks__handle {
	font-family: var(--cp-font-display);
	font-size: 0.88rem;
	color: var(--cp-ink-soft);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-makerlinks__item a:hover .cp-m-makerlinks__handle { color: var(--cp-bg-soft); }
.cp-m-makerlinks__arrow {
	font-size: 1.1rem;
	color: var(--cp-ink-soft);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-makerlinks__item a:hover .cp-m-makerlinks__arrow { color: var(--cp-white); }
@media (max-width: 720px) {
	.cp-m-makerlinks__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   /about/locations/
   ========================================================================== */
.cp-m-locsplash {
	background: var(--cp-bg);
}
.cp-m-locsplash__visual {
	margin: 0;
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-locsplash__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-m-loccurrent,
.cp-m-locupcoming {
	background: var(--cp-bg);
	padding-block: clamp(56px, 7vw, 120px);
}
.cp-m-locupcoming { background: var(--cp-bg-soft); }
.cp-m-loccurrent__inner,
.cp-m-locupcoming__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-loclist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}
.cp-m-locitem__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-3);
	padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
	background: var(--cp-bg-soft);
	transition: background var(--dur-fast) var(--ease);
}
.cp-m-locitem__link:hover { background: var(--cp-bg-deep); }
.cp-m-locitem__kind {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-1);
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
}
.cp-m-locitem__tag {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--cp-ink-soft);
	background: var(--cp-bg);
	padding: 2px 8px;
	border-radius: 999px;
}
.cp-m-locitem__name {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--cp-ink);
	margin: 0 0 var(--space-1);
}
.cp-m-locitem__desc {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--cp-ink-soft);
	margin: 0;
}
.cp-m-locitem__arrow {
	font-size: 1.4rem;
	color: var(--cp-ink-soft);
}

.cp-m-locupcoming__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
.cp-m-locupcoming__list li {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-m-locupcoming__when {
	font-family: var(--cp-font-display);
	font-weight: 600;
	color: var(--cp-brown);
	font-size: 0.92rem;
}
.cp-m-locupcoming__what {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--cp-ink);
}
.cp-m-locupcoming__note {
	margin-top: var(--space-4);
	font-size: 0.82rem;
	color: var(--cp-ink-soft);
}
@media (max-width: 600px) {
	.cp-m-locupcoming__list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   /about/licensing/
   ========================================================================== */
.cp-m-licuses,
.cp-m-licflow,
.cp-m-licnote {
	background: var(--cp-bg);
	padding-block: clamp(56px, 7vw, 120px);
}
.cp-m-licflow { background: var(--cp-bg-soft); }
.cp-m-licuses__inner,
.cp-m-licflow__inner,
.cp-m-licnote__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-licnote__inner { max-width: var(--container-narrow); }
.cp-m-licuses__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
}
.cp-m-liccard {
	background: var(--cp-bg-soft);
	padding: clamp(24px, 3vw, 40px);
}
.cp-m-liccard__num {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
}
.cp-m-liccard__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
	color: var(--cp-ink);
	margin: 0 0 var(--space-2);
}
.cp-m-liccard__desc {
	font-size: 0.92rem;
	line-height: 1.85;
	color: var(--cp-ink-soft);
	margin: 0;
}
@media (max-width: 720px) {
	.cp-m-licuses__grid { grid-template-columns: 1fr; }
}

.cp-m-licflow__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3);
}
.cp-m-licflow__list li {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-m-licflow__list li:last-child { border-bottom: 0; }
.cp-m-licflow__no {
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
	color: var(--cp-brown);
}
.cp-m-licflow__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--cp-ink);
	margin: 0 0 var(--space-1);
}
.cp-m-licflow__text {
	font-size: 0.92rem;
	line-height: 1.85;
	color: var(--cp-ink-soft);
	margin: 0;
}

/* ==========================================================================
   /contact/
   ========================================================================== */
.cp-m-contactkinds {
	background: var(--cp-bg);
	padding-block: clamp(40px, 5vw, 80px);
}
.cp-m-contactkinds__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-contactkinds__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
}
.cp-m-contactkind {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--space-3);
	row-gap: var(--space-1);
	padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
	background: var(--cp-bg-soft);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-m-contactkind:hover {
	background: var(--cp-ink);
	color: var(--cp-white);
}
.cp-m-contactkind__label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1rem;
}
.cp-m-contactkind__note {
	grid-column: 1 / 2;
	font-size: 0.85rem;
	color: var(--cp-ink-soft);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-contactkind:hover .cp-m-contactkind__note { color: var(--cp-bg-soft); }
.cp-m-contactkind__arrow {
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	font-size: 1.4rem;
	color: var(--cp-ink-soft);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-contactkind:hover .cp-m-contactkind__arrow { color: var(--cp-white); }
@media (max-width: 720px) {
	.cp-m-contactkinds__grid { grid-template-columns: 1fr; }
}

.cp-m-contactform {
	background: var(--cp-bg-soft);
	padding-block: clamp(56px, 7vw, 120px);
	scroll-margin-top: 120px;
}
.cp-m-contactform__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}
.cp-m-contactform__head {
	text-align: center;
	margin-bottom: clamp(28px, 3vw, 48px);
}
.cp-m-contactform__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-2);
}
.cp-m-contactform__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	color: var(--cp-ink);
	margin: 0;
}
.cp-m-contactform__panel {
	background: var(--cp-bg);
	padding: clamp(28px, 3vw, 48px);
}

/* Form */
.cp-m-form { display: grid; gap: var(--space-4); }
.cp-m-form__row { display: grid; gap: var(--space-2); }
.cp-m-form__label {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--cp-ink);
}
.cp-m-form__label span {
	color: var(--cp-brown);
	margin-left: 4px;
}
.cp-m-form__input {
	font-family: var(--cp-font-display);
	font-size: 1rem;
	color: var(--cp-ink);
	padding: 12px 16px;
	border: 1px solid var(--cp-line);
	background: var(--cp-bg);
	width: 100%;
	transition: border-color var(--dur-fast) var(--ease);
	border-radius: 0;
}
.cp-m-form__input:focus {
	outline: none;
	border-color: var(--cp-brown);
}
textarea.cp-m-form__input { resize: vertical; min-height: 140px; }
select.cp-m-form__input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--cp-ink) 50%), linear-gradient(135deg, var(--cp-ink) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
}
.cp-m-form__actions {
	margin-top: var(--space-2);
	text-align: center;
}

.cp-m-contactmeta {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-m-contactmeta__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}
.cp-m-contactmeta dl {
	margin: 0;
	display: grid;
	gap: var(--space-3);
}
.cp-m-contactmeta dl > div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-m-contactmeta dt {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}
.cp-m-contactmeta dd {
	margin: 0;
	font-size: 0.95rem;
	color: var(--cp-ink);
}

/* ==========================================================================
   §25 v4.2.7 — Footer (Moomin準拠)
   prefix: .cp-m-footer__*
   ========================================================================== */

.cp-m-footer {
	background: var(--cp-bg);
	color: var(--cp-ink);
	border-top: 1px solid var(--cp-line-soft);
	margin-top: clamp(48px, 6vw, 96px);
}

/* ---------- Main: brand + columns ---------- */
.cp-m-footer__main {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 96px);
}
.cp-m-footer__main-inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: start;
}

/* Brand block */
.cp-m-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.cp-m-footer__brandlink {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.cp-m-footer__mark {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}
.cp-m-footer__wordmark {
	display: block;
	width: auto;
	height: 32px;
	max-height: 32px;
}
.cp-m-footer__statement {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--cp-ink);
	margin: 0;
}
.cp-m-footer__company {
	margin: 0;
	display: grid;
	gap: 6px;
	padding-top: var(--space-3);
	border-top: 1px solid var(--cp-line-soft);
	font-size: 0.85rem;
	line-height: 1.6;
}
.cp-m-footer__company > div {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: var(--space-2);
}
.cp-m-footer__company dt {
	font-family: var(--cp-font-display);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-ink-soft);
}
.cp-m-footer__company dd { margin: 0; color: var(--cp-ink); }
.cp-m-footer__company a {
	color: var(--cp-brown);
	border-bottom: 1px solid var(--cp-brown);
	transition: opacity var(--dur-fast) var(--ease);
}
.cp-m-footer__company a:hover { opacity: 0.7; }

/* Columns area */
.cp-m-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px);
}
.cp-m-footer__col-title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-m-footer__col-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.cp-m-footer__col-list a {
	font-family: var(--cp-font-display);
	font-size: 0.92rem;
	color: var(--cp-ink);
	transition: color var(--dur-fast) var(--ease);
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.cp-m-footer__col-list a:hover { color: var(--cp-brown); }
.cp-m-footer__ext {
	font-size: 0.85em;
	color: var(--cp-ink-soft);
}

/* Social column */
.cp-m-footer__sociallist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}
.cp-m-footer__sociallist a {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: var(--space-2);
	align-items: center;
	color: var(--cp-ink);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-footer__sociallist a:hover { color: var(--cp-brown); }
.cp-m-footer__socialicon {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cp-bg-soft);
	border-radius: 50%;
	transition: background var(--dur-fast) var(--ease);
}
.cp-m-footer__sociallist a:hover .cp-m-footer__socialicon {
	background: var(--cp-ink);
	color: var(--cp-white);
}
.cp-m-footer__socialicon svg {
	width: 18px;
	height: 18px;
}
.cp-m-footer__socialtext {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.cp-m-footer__sociallabel {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
}
.cp-m-footer__socialhandle {
	font-size: 0.78rem;
	color: var(--cp-ink-soft);
}

@media (max-width: 960px) {
	.cp-m-footer__main-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.cp-m-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.cp-m-footer__cols { grid-template-columns: 1fr; }
}

/* ---------- Newsletter strip ---------- */
.cp-m-footer__newsletter {
	background: var(--cp-bg-soft);
	padding-block: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-m-footer__newsletter-inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
}
.cp-m-footer__newsletter-eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 6px;
}
.cp-m-footer__newsletter-title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
	color: var(--cp-ink);
	margin: 0 0 6px;
}
.cp-m-footer__newsletter-lead {
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--cp-ink-soft);
	margin: 0;
}
.cp-m-footer__newsletter-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-2);
	background: var(--cp-bg);
	padding: 6px 6px 6px 16px;
	border: 1px solid var(--cp-line);
	align-items: center;
}
.cp-m-footer__newsletter-form input[type="email"] {
	border: 0;
	background: transparent;
	padding: 12px 0;
	font-family: var(--cp-font-display);
	font-size: 0.95rem;
	color: var(--cp-ink);
	outline: none;
	min-width: 0;
}
.cp-m-footer__newsletter-form input[type="email"]::placeholder {
	color: var(--cp-ink-soft);
}
.cp-m-footer__newsletter-form button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	background: var(--cp-ink);
	color: var(--cp-white);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.cp-m-footer__newsletter-form button:hover { background: var(--cp-brown); }

@media (max-width: 720px) {
	.cp-m-footer__newsletter-inner { grid-template-columns: 1fr; }
}

/* ---------- Base bar ---------- */
.cp-m-footer__base {
	background: var(--cp-bg);
	padding-block: var(--space-4);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-m-footer__base-inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.cp-m-footer__copy {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	color: var(--cp-ink-soft);
	margin: 0;
}
.cp-m-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: var(--space-4);
}
.cp-m-footer__legal a {
	font-family: var(--cp-font-display);
	font-size: 0.78rem;
	color: var(--cp-ink-soft);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-footer__legal a:hover { color: var(--cp-brown); }

@media (max-width: 600px) {
	.cp-m-footer__base-inner { flex-direction: column; align-items: flex-start; }
	.cp-m-footer__legal { flex-wrap: wrap; gap: var(--space-2); }
}

/* ==========================================================================
   §26 v4.2.8 — Quiz / Shop / Stories / Legal pages
   ========================================================================== */

/* ==========================================================================
   /which-penguin/ — Quiz
   ========================================================================== */
.cp-m-quiz {
	background: var(--cp-bg-soft);
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-m-quiz__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-max));
	margin-inline: auto;
}
.cp-m-quiz__form { display: grid; gap: clamp(20px, 3vw, 40px); }

.cp-m-quiz__q {
	background: var(--cp-bg);
	padding: clamp(24px, 3vw, 40px);
	border: 0;
	margin: 0;
}
.cp-m-quiz__q-title {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	line-height: 1.55;
	color: var(--cp-ink);
	margin-bottom: var(--space-4);
}
.cp-m-quiz__q-num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 32px;
	padding: 0 10px;
	background: var(--cp-brown);
	color: var(--cp-white);
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	border-radius: 999px;
}
.cp-m-quiz__a-list {
	display: grid;
	gap: var(--space-2);
}
.cp-m-quiz__a {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: 14px 18px;
	background: var(--cp-bg-soft);
	border: 1px solid var(--cp-line-soft);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cp-m-quiz__a:hover {
	border-color: var(--cp-brown);
	background: var(--cp-bg);
}
.cp-m-quiz__a input[type="radio"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--cp-brown);
	margin: 0;
}
.cp-m-quiz__a:has(input:checked) {
	border-color: var(--cp-brown);
	background: var(--cp-bg);
}
.cp-m-quiz__a-text {
	font-family: var(--cp-font-display);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--cp-ink);
}

.cp-m-quiz__submit-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-4);
}
.cp-m-quiz__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}
.cp-m-quiz__hint {
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
	color: var(--cp-ink-soft);
	margin: 0;
}

/* Quiz result */
.cp-m-quiz__result {
	background: var(--cp-bg);
	padding: clamp(28px, 4vw, 64px);
	text-align: center;
	display: grid;
	gap: var(--space-3);
	justify-items: center;
}
.cp-m-quiz__result-eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0;
}
.cp-m-quiz__result-image {
	margin: 0;
	width: clamp(180px, 28vw, 280px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg-soft);
	border-radius: 50%;
}
.cp-m-quiz__result-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cp-m-quiz__result-name {
	font-family: var(--cp-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
	line-height: 1.15;
	color: var(--cp-ink);
	margin: 0;
}
.cp-m-quiz__result-jp {
	display: block;
	margin-top: var(--space-1);
	font-size: 0.4em;
	color: var(--cp-ink-soft);
	letter-spacing: 0.06em;
	font-weight: 500;
}
.cp-m-quiz__result-tagline {
	font-family: var(--cp-font-display);
	font-size: 1.1rem;
	color: var(--cp-brown-deep);
	font-weight: 500;
	margin: 0;
}
.cp-m-quiz__result-body {
	font-size: 0.95rem;
	line-height: 1.95;
	color: var(--cp-ink-soft);
	max-width: 520px;
	margin: 0;
}
.cp-m-quiz__result-cta {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--space-3);
}
.cp-m-quiz__retry {
	margin-top: var(--space-3);
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
	color: var(--cp-ink-soft);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}
.cp-m-quiz__retry:hover { color: var(--cp-brown); }

/* ==========================================================================
   /shop/
   ========================================================================== */
.cp-m-shopfeatured {
	background: var(--cp-bg-soft);
	padding-block: clamp(40px, 5vw, 80px);
}
.cp-m-shopfeatured__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-shopfeatured__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	background: var(--cp-bg);
	padding: clamp(24px, 3vw, 56px);
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cp-m-shopfeatured__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-h);
}
.cp-m-shopfeatured__media {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-shopfeatured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}
.cp-m-shopfeatured__card:hover .cp-m-shopfeatured__media img { transform: scale(1.04); }
.cp-m-shopfeatured__eyebrow {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-2);
}
.cp-m-shopfeatured__title {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
	line-height: 1.3;
	color: var(--cp-ink);
	margin: 0 0 var(--space-3);
}
.cp-m-shopfeatured__meta {
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
	margin: 0 0 var(--space-4);
}
.cp-m-shopfeatured__type {
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--cp-ink-soft);
}
.cp-m-shopfeatured__price {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--cp-brown-deep);
}
.cp-m-shopfeatured__cta {
	display: inline-flex;
	gap: var(--space-1);
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--cp-ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--cp-ink);
}
.cp-m-shopfeatured__card:hover .cp-m-shopfeatured__cta {
	color: var(--cp-brown);
	border-color: var(--cp-brown);
}
@media (max-width: 880px) {
	.cp-m-shopfeatured__card { grid-template-columns: 1fr; }
}

.cp-m-shopall {
	background: var(--cp-bg);
	padding-block: clamp(48px, 6vw, 100px);
}
.cp-m-shopall__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-wide));
	margin-inline: auto;
}
.cp-m-shopall__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
}
.cp-m-shopcard { display: block; }
.cp-m-shopcard__media {
	margin: 0 0 var(--space-3);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--cp-bg-soft);
}
.cp-m-shopcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}
.cp-m-shopcard:hover .cp-m-shopcard__media img { transform: scale(1.05); }
.cp-m-shopcard__title {
	font-family: var(--cp-font-display);
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--cp-ink);
	margin: 0 0 var(--space-1);
	transition: color var(--dur-fast) var(--ease);
}
.cp-m-shopcard:hover .cp-m-shopcard__title { color: var(--cp-brown); }
.cp-m-shopcard__meta {
	display: flex;
	gap: var(--space-2);
	align-items: baseline;
	margin: 0;
	font-family: var(--cp-font-display);
	font-size: 0.82rem;
}
.cp-m-shopcard__type { color: var(--cp-ink-soft); }
.cp-m-shopcard__price { color: var(--cp-brown); font-weight: 600; }
@media (max-width: 880px) {
	.cp-m-shopall__grid { grid-template-columns: repeat(2, 1fr); }
}

.cp-m-shopnote {
	background: var(--cp-bg-soft);
	padding-block: clamp(40px, 5vw, 80px);
}
.cp-m-shopnote__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}

/* ==========================================================================
   single-story (vertical comic panels)
   ========================================================================== */
.cp-m-storypanels {
	background: var(--cp-bg);
	padding-block: clamp(32px, 4vw, 64px);
}
.cp-m-storypanels__inner {
	width: min(100% - clamp(24px, 5vw, 80px), 780px);
	margin-inline: auto;
	display: grid;
	gap: var(--space-3);
}
.cp-m-storypanels__panel {
	margin: 0;
	background: var(--cp-bg-soft);
}
.cp-m-storypanels__panel img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Legal pages (Privacy / 特商法 / Sitemap)
   ========================================================================== */
.cp-m-legalbody {
	background: var(--cp-bg);
	padding-block: clamp(40px, 5vw, 80px) clamp(48px, 6vw, 96px);
}
.cp-m-legalbody__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
}
.cp-m-legalbody__inner h2 {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
	color: var(--cp-ink);
	margin: var(--space-7) 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--cp-line-soft);
}
.cp-m-legalbody__inner h3 {
	font-family: var(--cp-font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--cp-ink);
	margin: var(--space-5) 0 var(--space-2);
}
.cp-m-legalbody__inner ul,
.cp-m-legalbody__inner ol {
	margin: var(--space-3) 0 var(--space-3) var(--space-5);
	list-style: revert;
}

.cp-m-legalmeta {
	background: var(--cp-bg-soft);
	padding-block: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--cp-line-soft);
}
.cp-m-legalmeta__inner {
	width: min(100% - clamp(24px, 5vw, 80px), var(--container-narrow));
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	color: var(--cp-ink-soft);
}
.cp-m-legalmeta__updated { margin: 0; }
.cp-m-legalmeta__contact { margin: 0; }
.cp-m-legalmeta a {
	color: var(--cp-brown);
	border-bottom: 1px solid var(--cp-brown);
}

/* ==========================================================================
   §27 v4.2.9 — Newsletter flash messages + form wrapper
   ========================================================================== */
.cp-m-footer__newsletter-formwrap {
	display: grid;
	gap: var(--space-2);
}
.cp-m-newsletter-flash {
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	line-height: 1.6;
	padding: 10px 14px;
	border-radius: 4px;
	scroll-margin-top: 120px;
}
.cp-m-newsletter-flash--ok {
	background: #EFF7F2;
	color: #1F5C3A;
	border: 1px solid #B8DCC4;
}
.cp-m-newsletter-flash--info {
	background: var(--cp-bg-soft);
	color: var(--cp-ink);
	border: 1px solid var(--cp-line);
}
.cp-m-newsletter-flash--err {
	background: #FAF0EE;
	color: #8B3A2E;
	border: 1px solid #E8C2BC;
}


/* ==========================================================================
   v5.0 — I.CINNAMOROLL IA リデザイン（2026-05-02）
   単一ページ構成: Hero / #concept / #characters / #links
   + Header simple override + Minimal footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header: --simple バリアント（I.CINNAMOROLL スタイル）
   構成: 黄色背景 / ロゴ左 / [CONCEPT CHARACTERS LINKS X IG YT] 右
   高さ: desktop 64px / mobile 56px
   -------------------------------------------------------------------------- */

/* スクロールオフセット */
html { scroll-padding-top: 88px; }

/* ====== ヘッダー色トークン ====== */
:root {
	--cp-header-bg:   #2A1508; /* ダークエスプレッソ */
	--cp-header-ink:  #FFFFFF; /* 白（濃い背景に合わせて反転） */
	--cp-header-line: rgba(255, 255, 255, 0.20);
}

/* コーヒーブラウンヘッダー */
.cp-site-header--simple {
	background: var(--cp-header-bg);
	box-shadow: none;
}
.cp-site-header--simple[data-scrolled="true"] {
	box-shadow: 0 2px 10px rgba(61, 43, 31, 0.18);
}

/* グリッド: ロゴ(auto) / ナビ(1fr, 右寄せ) / ハンバーガー(auto, mobile only) */
.cp-site-header--simple .cp-site-header__inner {
	grid-template-columns: auto 1fr auto;
	min-height: 88px;
	padding-block: 0;
	gap: 0;
}
.cp-site-header--simple .cp-site-header__brand {
	grid-column: 1;
	justify-self: start;
	padding-right: var(--space-5);
}
.cp-site-header--simple .cp-site-header__brand-wordmark-img {
	height: 80px; /* 5000x1428 / 余白あり → 高めに表示 */
	width: auto;
}
/* ナビ: 右カラム、右寄せ */
.cp-site-header--simple .cp-site-header__nav {
	grid-column: 2;
	justify-self: end;
}
/* ハンバーガーゾーン: デスクトップは非表示、モバイルで表示 */
.cp-site-header--simple .cp-site-header__utils {
	grid-column: 3;
	justify-self: end;
	display: none;
}

/* ナビリスト: 横並び（ナビ3項目 + SNS3アイコン） */
.cp-site-header--simple .cp-primary-nav__list {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0; padding: 0;
}
.cp-site-header--simple .cp-primary-nav__item {
	position: static;
}

/* ナビリンク: 高さ88px / 太字大文字 / hover でふわっと opacity フェード */
.cp-site-header--simple .cp-primary-nav__link {
	display: inline-flex;
	align-items: center;
	height: 88px;
	padding: 0 24px;
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	border: none;
	opacity: 1;
	transition: opacity 0.35s ease;
}
.cp-site-header--simple .cp-primary-nav__link:hover {
	color: #FFFFFF;
	opacity: 0.55;
	border: none;
	background: transparent;
}
.cp-site-header--simple .cp-primary-nav__link.is-active {
	color: #FFFFFF;
	opacity: 1;
	border: none;
}
.cp-site-header--simple .cp-primary-nav__link.is-active::after {
	display: none;
}

/* SNS アイコン li: ナビリスト内にインライン */
.cp-site-header--simple .cp-primary-nav__item--sns {
	list-style: none;
}
.cp-site-header__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 88px;
	color: #FFFFFF;
	text-decoration: none;
	opacity: 1;
	transition: opacity 0.35s ease;
}
.cp-site-header__social-link:hover { opacity: 0.55; }

/* ハンバーガーバーも白 */
.cp-site-header--simple .cp-nav-toggle__bar {
	background: #FFFFFF;
}

/* モバイルオーバーレイ: 同じブラウン背景 */
.cp-site-header--simple .cp-primary-nav {
	background: var(--cp-header-bg);
}

/* モバイルオーバーレイ内のナビリンク */
@media (max-width: 960px) {
	.cp-site-header--simple .cp-primary-nav__link {
		height: auto;
		padding: var(--space-4) var(--space-5);
		font-size: var(--text-xl);
		border: none;
		color: #FFFFFF;
		background: transparent;
	}
}

/* モバイルオーバーレイ内の SNS */
.cp-primary-nav__mobile-social {
	display: none;
	gap: var(--space-5);
	justify-content: center;
	margin-top: var(--space-6);
}
.cp-primary-nav__mobile-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--cp-header-ink);
	transition: opacity var(--dur-fast) var(--ease);
}
.cp-primary-nav__mobile-social a:hover { opacity: 0.6; }

/* オーバーレイ専用要素: デスクトップでは非表示 */
.cp-primary-nav__overlay-close,
.cp-primary-nav__overlay-logo,
.cp-primary-nav__overlay-char,
.cp-primary-nav__mobile-social { display: none; }

/* モバイル (<960px) */
@media (max-width: 960px) {
	html { scroll-padding-top: 76px; }

	/* ── ヘッダーバー: flex でロゴ完全中央揃え ── */
	.cp-site-header--simple .cp-site-header__inner {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		min-height: 76px;
		padding-inline: 0;
	}
	.cp-site-header--simple .cp-site-header__brand {
		grid-column: auto;
		justify-self: auto;
		padding-right: 0;
	}
	.cp-site-header--simple .cp-site-header__brand-wordmark-img {
		height: 56px;
		width: auto;
	}
	.cp-site-header--simple .cp-site-header__nav {
		grid-column: auto;
		justify-self: auto;
	}
	/* ハンバーガー: 右端に絶対配置 */
	.cp-site-header--simple .cp-site-header__utils {
		display: flex;
		position: absolute;
		right: clamp(12px, 4vw, 24px);
		top: 50%;
		transform: translateY(-50%);
	}
	.cp-site-header--simple .cp-primary-nav__item--sns { display: none; }

	/* ── ヘッダーから垂れ下がる / 上に吸い上がる オーバーレイ（モバイル） ──
	   キーフレームで border-radius を非対称に揺らしてコーヒー液体の sloshing を表現。 */
	.cp-site-header--simple .cp-primary-nav {
		background: var(--cp-header-bg);
		z-index: 90;
		position: fixed;
		top: 76px; left: 0; right: 0;
		bottom: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: var(--space-6) var(--space-5);
		overflow: hidden;
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);

		/* メニューターゲット高さ（モバイルブラウザのバー揺れに追従） */
		--menu-target-h: calc(100vh - 76px);            /* fallback */
		--menu-target-h: calc(100dvh - 76px);           /* 動的 viewport: バー出現時にも追従 */

		/* CLOSED デフォルト（アニメなし） */
		height: 0;
		border-radius: 0 0 55% 55% / 0 0 70px 70px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* OPEN: 下に垂れ落ちる sloshing（うねうね液体） */
	.cp-site-header--simple .cp-primary-nav[data-open="true"] {
		pointer-events: auto;
		visibility: visible;
		animation: cp-nav-pour 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}

	/* 保険: アニメ完走後は bottom:0 で下端ピッタリ固定（URLバーの伸縮にも追従）
	   border-radius: 0 で角を完全にフラット化し、白い隙間ゼロに。
	   animation は外さない（forwards が保持する opacity:1 を維持するため）。 */
	.cp-site-header--simple .cp-primary-nav.is-fully-open {
		height: auto !important;
		bottom: 0 !important;
		border-radius: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* CLOSE: JS が is-closing クラスを付けたら吸い上げアニメ
	   `both` = animation-delay 中も 0% キーフレーム（=フル展開状態）を保持して
	   遅延中の "閉じた状態への一瞬のフラッシュ" を防ぐ。 */
	.cp-site-header--simple .cp-primary-nav.is-closing {
		visibility: visible;
		animation: cp-nav-suck 1.2s cubic-bezier(0.45, 0, 0.55, 1) 0.18s both;
	}

	/* OPEN keyframes — 左右非対称に波打ちながら垂れる
	   全 height は --menu-target-h を基準に算出し、最終フレームと矛盾しないよう保証 */
	@keyframes cp-nav-pour {
		0% {
			height: 0;
			border-radius: 0 0 70% 30% / 0 0 130px 70px;
			opacity: 0;
		}
		18% {
			height: calc(var(--menu-target-h) * 0.18);
			border-radius: 0 0 32% 68% / 0 0 70px 140px;
			opacity: 1;
		}
		38% {
			height: calc(var(--menu-target-h) * 0.45);
			border-radius: 0 0 65% 35% / 0 0 130px 75px;
		}
		60% {
			height: calc(var(--menu-target-h) * 0.75);
			border-radius: 0 0 38% 58% / 0 0 80px 110px;
		}
		82% {
			height: calc(var(--menu-target-h) * 0.96);
			border-radius: 0 0 48% 42% / 0 0 60px 70px;
		}
		94% {
			height: calc(var(--menu-target-h) * 0.995);
			border-radius: 0 0 18% 18% / 0 0 18px 18px; /* じわっと平らに */
		}
		100% {
			height: var(--menu-target-h);
			border-radius: 0; /* 画面下端まで完全フラット */
			opacity: 1;
		}
	}

	/* CLOSE keyframes — 上に吸い上がりながら波打つ
	   メニュー本体は最後の最後まで不透明を維持、終盤一気に消える */
	@keyframes cp-nav-suck {
		0% {
			height: var(--menu-target-h);
			border-radius: 0; /* 開ききった状態と一致（フラット） */
			opacity: 1;
		}
		8% {
			height: calc(var(--menu-target-h) * 0.99);
			border-radius: 0 0 22% 22% / 0 0 24px 24px; /* 引っ張られて再び丸く */
			opacity: 1;
		}
		18% {
			height: calc(var(--menu-target-h) * 0.92);
			border-radius: 0 0 42% 38% / 0 0 70px 90px;
			opacity: 1;
		}
		40% {
			height: calc(var(--menu-target-h) * 0.70);
			border-radius: 0 0 55% 38% / 0 0 110px 70px;
			opacity: 1;
		}
		62% {
			height: calc(var(--menu-target-h) * 0.42);
			border-radius: 0 0 35% 65% / 0 0 75px 130px;
			opacity: 1;
		}
		82% {
			height: calc(var(--menu-target-h) * 0.16);
			border-radius: 0 0 65% 35% / 0 0 130px 80px;
			opacity: 1;
		}
		92% {
			height: calc(var(--menu-target-h) * 0.04);
			opacity: 0.92;
		}
		100% {
			height: 0;
			border-radius: 0 0 55% 55% / 0 0 70px 70px;
			opacity: 0;
		}
	}

	/* in-overlay クローズボタンは廃止（ヘッダーのハンバーガー→X で代替） */
	.cp-primary-nav__overlay-close { display: none !important; }

	/* 内部要素のステージャー
	   閉じる時：文字・SNSアイコンはサッと先に消える */
	.cp-site-header--simple .cp-primary-nav__list,
	.cp-primary-nav__mobile-social {
		opacity: 0;
		transform: translateY(-12px);
		transition:
			opacity 0.22s ease,                                /* サッと消える */
			transform 0.3s cubic-bezier(0.5, 0, 0.75, 0);     /* 軽く上にスライド */
	}
	.cp-site-header--simple .cp-primary-nav[data-open="true"] .cp-primary-nav__list,
	.cp-site-header--simple .cp-primary-nav[data-open="true"] .cp-primary-nav__mobile-social {
		opacity: 1;
		transform: translateY(0);
		transition:
			opacity 0.55s ease,
			transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
	}
	.cp-site-header--simple .cp-primary-nav[data-open="true"] .cp-primary-nav__list          { transition-delay: 0.65s; }
	.cp-site-header--simple .cp-primary-nav[data-open="true"] .cp-primary-nav__mobile-social { transition-delay: 0.80s; }

	/* オーバーレイ内ロゴ — 白を使用、垂れた直後の余白 */
	.cp-primary-nav__overlay-logo {
		display: block;
		margin-top: var(--space-4);
		margin-bottom: var(--space-7);
	}
	.cp-primary-nav__overlay-logo img {
		height: 56px;
		width: auto;
	}

	/* ナビリスト */
	.cp-site-header--simple .cp-primary-nav__list {
		flex-direction: column;
		align-items: center;
		gap: 0;
		text-align: center;
		width: 100%;
	}
	.cp-site-header--simple .cp-primary-nav__link {
		height: auto;
		padding: var(--space-4) var(--space-5);
		font-size: clamp(1.3rem, 5vw, 1.8rem);
		letter-spacing: 0.14em;
		color: #FFFFFF;
		border: none;
		background: transparent;
		opacity: 1;
		transition: opacity 0.25s ease;
	}
	.cp-site-header--simple .cp-primary-nav__link:hover { opacity: 0.6; }

	/* SNS アイコン行 — 白に */
	.cp-primary-nav__mobile-social {
		display: flex;
		gap: var(--space-5);
		justify-content: center;
		margin-top: var(--space-6);
	}
	.cp-primary-nav__mobile-social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		color: #FFFFFF;
		transition: opacity 0.25s ease;
		text-decoration: none;
	}
	.cp-primary-nav__mobile-social a:hover { opacity: 0.6; }

	/* キャラクター画像（下部） */
	.cp-primary-nav__overlay-char {
		display: flex;
		justify-content: center;
		margin-top: auto;
		padding-top: var(--space-6);
	}
	.cp-primary-nav__overlay-char img {
		width: clamp(100px, 35vw, 180px);
		height: auto;
		opacity: 0.95;
	}
}

/* --------------------------------------------------------------------------
   Hero: cp-s-hero
   -------------------------------------------------------------------------- */
.cp-s-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(480px, 60vw, 720px);
	display: flex;
	align-items: center;
}
.cp-s-hero__inner {
	width: min(100% - clamp(20px, 4vw, 56px), var(--container-wide));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
	padding-block: clamp(48px, 6vw, 96px);
}
.cp-s-hero__visual {
	order: 2;
	border-radius: var(--radius-image);
	overflow: hidden;
}
.cp-s-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-image);
	display: block;
}
.cp-s-hero__text { order: 1; }
.cp-s-hero__eyebrow {
	font-family: var(--cp-font-display);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
}
.cp-s-hero__title {
	font-family: var(--cp-font-display);
	font-size: var(--text-3xl);
	font-weight: 700;
	line-height: 1.25;
	color: var(--cp-ink);
	margin: 0 0 var(--space-4);
}
.cp-s-hero__lead {
	font-size: var(--text-base);
	color: var(--cp-ink-soft);
	line-height: 1.9;
	margin: 0 0 var(--space-5);
}
.cp-s-hero__scroll {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	color: var(--cp-ink-soft);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.cp-s-hero__scroll:hover { color: var(--cp-brown); }
.cp-s-hero__scroll-line {
	display: block;
	width: 1px;
	height: 40px;
	background: currentColor;
	animation: cp-scroll-line 1.8s var(--ease) infinite;
}
@keyframes cp-scroll-line {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 768px) {
	.cp-s-hero__inner {
		grid-template-columns: 1fr;
	}
	.cp-s-hero__visual { order: -1; }
	.cp-s-hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   Concept: cp-s-concept
   -------------------------------------------------------------------------- */
.cp-s-concept {
	background: var(--cp-bg-soft);
	padding-block: clamp(64px, 8vw, 120px);
}
.cp-s-concept__inner {
	width: min(100% - clamp(20px, 4vw, 56px), var(--container-max));
	margin-inline: auto;
	display: grid;
	gap: var(--space-7);
}
.cp-s-concept__header { text-align: center; }
.cp-s-concept__title {
	font-family: var(--cp-font-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--cp-ink);
	margin: 0 0 var(--space-5);
}
.cp-s-concept__tagline {
	font-family: var(--cp-font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 700;
	color: var(--cp-ink);
	line-height: 1.6;
	margin: 0 0 var(--space-4);
}
.cp-s-concept__lead {
	font-size: var(--text-lg);
	color: var(--cp-ink-soft);
	line-height: 2;
	max-width: 640px;
	margin-inline: auto;
}
.cp-s-concept__visual {
	border-radius: var(--radius-image);
	overflow: hidden;
	box-shadow: var(--shadow-polaroid);
}
.cp-s-concept__visual img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	display: block;
}
.cp-s-concept__blocks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
.cp-s-concept__block {
	background: var(--cp-bg);
	border-radius: var(--radius-card);
	padding: var(--space-5) var(--space-5);
	box-shadow: var(--shadow-card);
}
.cp-s-concept__block-label {
	font-family: var(--cp-font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cp-brown);
	margin: 0 0 var(--space-3);
	text-transform: uppercase;
}
.cp-s-concept__block-text {
	font-size: var(--text-base);
	color: var(--cp-ink-soft);
	line-height: 1.85;
	margin: 0;
}
@media (max-width: 640px) {
	.cp-s-concept__blocks { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Characters: cp-s-characters
   -------------------------------------------------------------------------- */
.cp-s-characters {
	background: var(--cp-bg);
	padding-block: clamp(64px, 8vw, 120px);
}
.cp-s-characters__inner {
	width: min(100% - clamp(20px, 4vw, 56px), var(--container-max));
	margin-inline: auto;
	display: grid;
	gap: var(--space-7);
}
.cp-s-characters__header { text-align: center; }
.cp-s-characters__title {
	font-family: var(--cp-font-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--cp-ink);
	margin: 0 0 var(--space-5);
}
.cp-s-characters__tagline {
	font-family: var(--cp-font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 700;
	color: var(--cp-ink);
	line-height: 1.6;
	margin: 0 0 var(--space-4);
}
.cp-s-characters__lead {
	font-size: var(--text-base);
	color: var(--cp-ink-soft);
	line-height: 2;
	max-width: 560px;
	margin-inline: auto;
}
/* Hint text */
.cp-s-characters__lead small {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--cp-caramel);
}

/* キャラ縦並びリスト（I.CINNAMOROLL風） */
.cp-s-characters__list {
	display: flex;
	flex-direction: column;
	gap: clamp(60px, 8vw, 120px);
	margin-top: var(--space-7);
}
.cp-s-character-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-5), 4vw, 64px);
	align-items: center;
}
.cp-s-character-row__media {
	margin: 0;
}
.cp-s-character-row__media img {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
	margin-inline: auto;
}
.cp-s-character-row__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.cp-s-character-row__head {
	margin: 0;
}
.cp-s-character-row__name-en {
	font-family: var(--cp-font-display);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--cp-ink);
	margin: 0 0 6px;
}
.cp-s-character-row__name-jp {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--cp-ink);
	margin: 0;
	letter-spacing: 0.04em;
}
.cp-s-character-row__tagline {
	font-size: var(--text-base);
	color: var(--cp-brown);
	font-weight: 600;
	margin: 0;
	line-height: 1.6;
}
.cp-s-character-row__bio p {
	color: var(--cp-ink-soft);
	line-height: 1.95;
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
}
.cp-s-character-row__bio p:last-child { margin-bottom: 0; }

.cp-s-character-row__divider {
	border: none;
	border-top: 1px solid var(--cp-line-soft);
	margin: var(--space-3) 0;
}
.cp-s-character-row__meta {
	display: grid;
	gap: 10px;
	margin: 0;
	font-size: var(--text-sm);
}
.cp-s-character-row__meta > div {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--space-3);
	align-items: baseline;
}
.cp-s-character-row__meta dt {
	font-weight: 700;
	color: var(--cp-ink);
	letter-spacing: 0.04em;
}
.cp-s-character-row__meta dd {
	color: var(--cp-ink-soft);
	margin: 0;
	line-height: 1.7;
}

@media (max-width: 768px) {
	.cp-s-character-row {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
	.cp-s-character-row__media {
		text-align: center;
	}
	.cp-s-character-row__media img {
		max-width: 280px;
		margin-inline: auto;
	}
	.cp-s-character-row__meta > div {
		grid-template-columns: 76px 1fr;
		gap: var(--space-2);
	}
}

/* --------------------------------------------------------------------------
   Links: cp-s-links
   -------------------------------------------------------------------------- */
.cp-s-links {
	background: var(--cp-bg-soft);
	padding-block: clamp(64px, 8vw, 120px);
}
.cp-s-links__inner {
	width: min(100% - clamp(20px, 4vw, 56px), var(--container-narrow));
	margin-inline: auto;
	display: grid;
	gap: var(--space-6);
}
.cp-s-links__header { text-align: center; }
.cp-s-links__title {
	font-family: var(--cp-font-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--cp-ink);
	margin: 0;
}
.cp-s-links__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* デスクトップ: 3列 × 2行 */
	gap: var(--space-3);
}
@media (max-width: 640px) {
	.cp-s-links__grid {
		grid-template-columns: repeat(2, 1fr); /* モバイル: 2列 × 3行 */
	}
}
.cp-s-link-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-5) var(--space-4);
	background: var(--cp-bg);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	color: var(--cp-ink);
	text-decoration: none;
	transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-s-link-card:hover {
	box-shadow: var(--shadow-card-h);
	transform: translateY(-4px);
	color: var(--cp-brown);
}
.cp-s-link-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--cp-bg-soft);
	border-radius: var(--radius-circle);
	color: var(--cp-ink);
	transition: background var(--dur-fast) var(--ease);
	overflow: hidden;
}
.cp-s-link-card:hover .cp-s-link-card__icon {
	background: var(--cp-bg-deep);
}
.cp-s-link-card__icon img {
	width: auto;
	height: 30px;
	object-fit: contain;
	display: block;
}
.cp-s-link-card__label {
	font-family: var(--cp-font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
}
.cp-s-link-card__handle {
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
}

/* Shop button */
.cp-s-links__shop { text-align: center; }
.cp-s-links__shop-label {
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	letter-spacing: 0.06em;
	margin: 0 0 var(--space-3);
}
.cp-s-links__shop-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-6);
	background: var(--cp-ink);
	color: var(--cp-bg);
	font-family: var(--cp-font-display);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cp-s-links__shop-link:hover {
	background: var(--cp-brown);
	transform: translateY(-2px);
}
.cp-s-links__shop-arrow { font-size: 1.1em; }

@media (max-width: 480px) {
	.cp-s-links__grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Minimal footer: cp-s-footer
   -------------------------------------------------------------------------- */
.cp-s-footer {
	background: var(--cp-bg-deep);
	border-top: 1px solid var(--cp-line-soft);
	padding-block: clamp(48px, 6vw, 80px);
}
.cp-s-footer__inner {
	width: min(100% - clamp(20px, 4vw, 56px), var(--container-narrow));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
}
.cp-s-footer__brand {
	display: inline-flex;
	transition: opacity var(--dur-fast) var(--ease);
}
.cp-s-footer__brand:hover { opacity: 0.7; }
.cp-s-footer__brand img { height: 36px; width: auto; display: block; }
.cp-s-footer__statement {
	font-size: var(--text-sm);
	color: var(--cp-ink-soft);
	margin: 0;
	letter-spacing: 0.04em;
}
.cp-s-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	justify-content: center;
	list-style: none;
	margin: 0; padding: 0;
}
.cp-s-footer__legal a {
	font-size: var(--text-xs);
	color: var(--cp-ink-soft);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color var(--dur-fast) var(--ease);
}
.cp-s-footer__legal a:hover { color: var(--cp-brown); }
.cp-s-footer__copy {
	font-size: var(--text-xs);
	color: var(--cp-caramel);
	margin: 0;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Hero Slideshow: cp-s-slideshow
   -------------------------------------------------------------------------- */
.cp-s-slideshow {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 720px;
	/* フローティングカード化 */
	width: calc(100% - clamp(24px, 4vw, 80px));
	max-width: 1280px;
	margin: clamp(20px, 3vw, 40px) auto 0;
	border-radius: clamp(20px, 3vw, 36px);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.cp-s-slideshow__list {
	position: relative;
	width: 100%;
	height: 100%;
}
.cp-s-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}
.cp-s-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* スライド背景（プレースホルダー）- ヒーロースライド1のみ使用 */
.cp-s-slide--1 { background: linear-gradient(135deg, #C4956A 0%, #A07040 100%); }

/* バナー版スライド: 画像がスライド全体を埋める */
.cp-s-slide--banner {
	background: transparent;
	justify-content: stretch;
	align-items: stretch;
}
.cp-s-slide__banner {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.4s ease;
}
.cp-s-slide__banner:hover {
	transform: scale(1.01);
}
.cp-s-slide__banner img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* スライド内容 */
.cp-s-slide__inner {
	width: min(100% - clamp(32px, 6vw, 80px), var(--container-max));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
}
.cp-s-slide__body { color: #fff; }
.cp-s-slide__tag {
	display: inline-block;
	font-family: var(--cp-font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: rgba(255,255,255,0.25);
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: var(--radius-pill);
	padding: 4px 14px;
	margin-bottom: var(--space-3);
}
.cp-s-slide__title {
	font-family: var(--cp-font-display);
	font-size: clamp(1.6rem, 3.5vw, 2.6rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--space-3);
}
.cp-s-slide__sub {
	font-size: var(--text-base);
	opacity: 0.88;
	line-height: 1.8;
	margin: 0 0 var(--space-5);
}
.cp-s-slide__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 12px 28px;
	background: #fff;
	color: #3D2B1F;
	font-family: var(--cp-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.cp-s-slide__cta:hover { opacity: 0.85; transform: translateY(-2px); }
.cp-s-slide__visual {
	display: flex;
	align-items: center;
	justify-content: center;
}
.cp-s-slide__visual img {
	max-height: clamp(180px, 30vw, 380px);
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
}

/* スライドショー底部のクリームウェーブ（コンセプトへ繋がる） */
.cp-s-slideshow__wave {
	position: absolute;
	left: 0; right: 0;
	bottom: -1px; /* sub-pixel ギャップ防止 */
	pointer-events: none;
	z-index: 4;
	line-height: 0;
}
.cp-s-slideshow__wave svg {
	display: block;
	width: 100%;
	height: clamp(64px, 8vw, 110px);
}

/* ナビ（ドット） */
.cp-s-slideshow__nav {
	position: absolute;
	bottom: clamp(20px, 3vw, 32px);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	z-index: 10;
}
.cp-s-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
	border: 0;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
	padding: 0;
}
.cp-s-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}
.cp-s-slide-prev,
.cp-s-slide-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 50%;
	color: #fff;
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease;
	z-index: 10;
}
.cp-s-slide-prev { left: clamp(12px, 2vw, 32px); }
.cp-s-slide-next { right: clamp(12px, 2vw, 32px); }
.cp-s-slide-prev:hover,
.cp-s-slide-next:hover { background: rgba(255,255,255,0.35); }

@media (max-width: 640px) {
	/* バナー画像の 16:9 を保持して切れない表示に */
	.cp-s-slideshow { aspect-ratio: 16 / 9; height: auto; max-height: none; }
	.cp-s-slide__inner { grid-template-columns: 1fr; gap: var(--space-4); }
	.cp-s-slide__visual { display: none; }
	.cp-s-slide-prev, .cp-s-slide-next { width: 32px; height: 32px; font-size: 0.9rem; }
}

/* ==========================================================================
   セクション区切り — カーブ & デコレーション
   ========================================================================== */

/* --------------------------------------------------------------------------
   汎用カーブウェーブ（セクション下端に配置）
   -------------------------------------------------------------------------- */
.cp-s-wave {
	position: relative;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
}
.cp-s-wave svg {
	display: block;
	width: 100%;
}
/* フローティングスライドショー → コンセプト 用ウェーブ */
.cp-s-wave--floating-to-concept svg {
	height: clamp(70px, 9vw, 120px);
}
.cp-s-wave--floating-to-concept {
	margin-top: clamp(20px, 3vw, 40px);
}
/* キャラがカーブに「乗る」装飾 */
.cp-s-wave__char {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(80px, 14vw, 160px);
	height: auto;
	pointer-events: none;
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}

/* --------------------------------------------------------------------------
   デコレーション帯（セクション間の仕切り）
   -------------------------------------------------------------------------- */
.cp-s-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(var(--space-4), 4vw, var(--space-7));
	padding: clamp(var(--space-5), 4vw, var(--space-7)) var(--space-5);
	overflow: hidden;
}
.cp-s-divider__img {
	max-height: clamp(48px, 8vw, 96px);
	width: auto;
	object-fit: contain;
	opacity: 0.88;
	/* 生成画像が届くまでのフォールバック */
	min-width: 80px;
}
/* 横長バナー用 */
.cp-s-divider--wide .cp-s-divider__img {
	max-height: clamp(40px, 6vw, 72px);
	max-width: min(480px, 80vw);
}

/* --------------------------------------------------------------------------
   コーヒー豆 inline SVG デコ（画像生成完了前の fallback も兼ねる）
   -------------------------------------------------------------------------- */
.cp-s-bean-deco {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 3vw, 32px);
	padding: clamp(var(--space-4), 3vw, var(--space-6)) 0;
	opacity: 0.65;
}
.cp-s-bean-deco svg {
	width: clamp(20px, 3vw, 36px);
	height: auto;
}