/**
 * MIWENO WORKS — コンポーネント層 CSS
 *
 * デザイントークン（色・余白・文字サイズ）は theme.json が出力します。
 * ここに書くのは theme.json で表現できないものだけ。
 *
 * ミニサイトごとの色は styles/section-*.json が
 * --miweno-accent などのカスタムプロパティを上書きします。
 * セクションスタイル未適用の場所ではフォールバック値が使われます。
 */

:root {
	--miweno-accent: var(--wp--preset--color--accent, #26457a);
	--miweno-accent-soft: var(--wp--preset--color--accent-soft, #eef1f7);
	--miweno-surface: var(--wp--preset--color--surface, #f6f6f3);
	--miweno-outline: var(--wp--preset--color--outline, #e3e3dd);
	--miweno-muted: var(--wp--preset--color--contrast-soft, #5b6270);
}

/* --------------------------------------------------------------
 * 1. アクセシビリティ
 * ----------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--miweno-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 本文リンクの下線を読みやすい位置に。 */
:where(.wp-block-post-content) a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

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

/* --------------------------------------------------------------
 * 2. カード（カード全体をクリック可能にする）
 *
 * 見出し内のリンクを擬似要素でカード全面に広げるため、
 * カード内に「詳しくはこちら」ボタンを置く必要がありません。
 * ----------------------------------------------------------- */

.miweno-card {
	position: relative;
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--lg, 18px);
	background-color: var(--miweno-surface);
	transition: transform var(--wp--custom--transition--base, 180ms ease), box-shadow var(--wp--custom--transition--base, 180ms ease), border-color var(--wp--custom--transition--base, 180ms ease);
}

.miweno-card:hover,
.miweno-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--miweno-accent);
	box-shadow: var(--wp--preset--shadow--lift, 0 18px 40px rgba(19, 22, 27, 0.09));
}

.miweno-card :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

.miweno-card :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* カード内の画像が角丸からはみ出さないように。 */
.miweno-card > figure:first-child img {
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
}

/* --------------------------------------------------------------
 * 3. ユーティリティ
 * ----------------------------------------------------------- */

/* セクション冒頭の小見出し（Eyebrow）。段落に追加クラスとして指定する。 */
.miweno-eyebrow {
	color: var(--miweno-muted);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* 免責・注意書きなど、本文より控えめに見せたいブロック。 */
.miweno-note {
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--md, 14px);
	color: var(--miweno-muted);
}

/* 画像の初期表示を安定させる。 */
img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------
 * 4. サイトヘッダー / サイトフッター
 * ----------------------------------------------------------- */

.miweno-site-header {
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--miweno-outline);
}

.miweno-wordmark__name {
	font-weight: 700;
	letter-spacing: 0.16em;
}

.miweno-wordmark__name a {
	color: inherit;
	text-decoration: none;
}

.miweno-wordmark__suffix {
	color: var(--miweno-muted);
	letter-spacing: 0.22em;
}

/* ヘッダー右側。リンク先ページが未作成のため、現時点はテキスト表示のみ。 */
.miweno-topnav p {
	color: var(--miweno-muted);
}

/* フッターは近黒背景。枠線と補足文だけ暗背景用の値に差し替える。 */
.miweno-site-footer {
	--miweno-outline: rgba(255, 255, 255, 0.16);
	--miweno-muted: rgba(255, 255, 255, 0.74);
}

.miweno-site-footer .wp-block-separator {
	border-color: var(--miweno-outline);
	color: var(--miweno-outline);
}

.miweno-footer-links p,
.miweno-footer-meta {
	color: var(--miweno-muted);
}

/* --------------------------------------------------------------
 * 5. ポータル TOP
 *
 * Hero → Five Worlds → Latest → Footer で背景を1段ずつ変え、
 * スクロールの区切りを色の差だけで伝える。
 * ----------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

.miweno-hero {
	position: relative;
	overflow: hidden; /* 装飾が外にはみ出して横スクロールを生まないように */
	background-image: linear-gradient(180deg, var(--wp--preset--color--accent-soft) 0%, var(--wp--preset--color--base) 62%);
}

/*
 * ブランドの記憶点。ヒーロー右側に極薄の同心円を1つだけ置く。
 * 画像・SVG・JavaScript は使わず、繰り返し放射グラデーションと
 * マスクだけで作る。本文より目立たせない（線は不透明度 7%）。
 */
.miweno-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: 50%;
	inset-inline-end: -9rem;
	width: min(40rem, 62vw);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background-image: repeating-radial-gradient(circle at center, rgba(19, 22, 27, 0.07) 0 1px, transparent 1px 3.25rem);
	-webkit-mask-image: radial-gradient(circle at center, #000 34%, transparent 72%);
	mask-image: radial-gradient(circle at center, #000 34%, transparent 72%);
	pointer-events: none;
}

.miweno-hero__inner {
	position: relative;
	z-index: 1;
}

.miweno-hero__en {
	color: var(--miweno-muted);
}

/* セクションの左端は wide(1280px) に揃え、文章だけ読みやすい幅で止める。 */
.miweno-hero__inner :is(h1, p) {
	max-width: 46rem;
}

#five-worlds {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

/* Five Worlds のグリッド。
 * ブロックのグリッドレイアウトを使わず CSS 側で組むことで、
 * 1カラムのときも横幅いっぱいのカードが列を増やさない。 */
.wp-block-group.miweno-worlds {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: 1fr;
}

.wp-block-group.miweno-worlds > * + * {
	margin-block-start: 0;
}

@media (min-width: 40em) {
	.wp-block-group.miweno-worlds {
		gap: var(--wp--preset--spacing--30);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.miweno-worlds .miweno-card--wide {
	grid-column: 1 / -1;
}

/* ミニサイトを示す小さな点。ポータル自体の配色は中立のまま保つ。 */
.miweno-worlds .miweno-card::before {
	content: "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-end: var(--wp--preset--spacing--40);
	width: 7px;
	height: 7px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--miweno-dot, var(--miweno-muted));
}

.miweno-card--focus { --miweno-dot: var(--wp--preset--color--focus-accent); }
.miweno-card--kendo { --miweno-dot: var(--wp--preset--color--kendo-accent); }
.miweno-card--japan-life { --miweno-dot: var(--wp--preset--color--japanlife-accent); }
.miweno-card--trading { --miweno-dot: var(--wp--preset--color--trading-accent); }
.miweno-card--from-japan { --miweno-dot: var(--wp--preset--color--fromjapan-accent); }

/*
 * クリックできることの手がかり。
 * 通常時は右下に小さな矢印だけを出し、hover / フォーカスで
 * 「Explore →」に入れ替える。どちらも絶対配置なので
 * カードの高さを増やさない（ボタンは追加しない）。
 */
.miweno-worlds .miweno-card::after {
	content: "→";
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--40);
	color: var(--miweno-muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1;
	transition: opacity var(--wp--custom--transition--base, 180ms ease);
}

.miweno-card:hover::after,
.miweno-card:focus-within::after {
	opacity: 0;
}

.miweno-card__cue {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--40);
	margin: 0;
	line-height: 1;
	color: var(--miweno-accent);
	font-weight: 600;
	opacity: 0;
	transform: translateX(-2px);
	transition: opacity var(--wp--custom--transition--base, 180ms ease), transform var(--wp--custom--transition--base, 180ms ease);
}

.miweno-card:hover .miweno-card__cue,
.miweno-card:focus-within .miweno-card__cue {
	opacity: 1;
	transform: none;
}

/* Latest：記事が入るまでの状態表示。中身はクエリループに差し替える前提。 */
.miweno-status {
	border: 1px dashed rgba(19, 22, 27, 0.09);
	border-radius: var(--wp--custom--radius--lg, 18px);
	color: var(--miweno-muted);
}

/* --------------------------------------------------------------
 * 6. スマートフォン（〜639px）の微調整
 * ----------------------------------------------------------- */

@media (max-width: 39.999em) {
	/* H1 を「Ideas. Tools. / Japan.」で必ず改行させ、意図した2行に見せる。 */
	.miweno-hero__inner h1 {
		max-width: 14ch;
		line-height: 1.1;
	}

	/* 装飾は小さくして画面外寄りに逃がす。 */
	.miweno-hero::before {
		width: min(22rem, 78vw);
		inset-inline-end: -7rem;
	}

	/* 5枚並ぶぶん、カードを少しコンパクトにする（窮屈にはしない）。 */
	.miweno-worlds .miweno-card {
		min-height: 8.5rem;
	}
}

/* --------------------------------------------------------------
 * 7. Focus Lab（/focus/）
 *
 * 配色は styles/section-focus.json（is-style-miweno-focus）が供給する。
 * ここに書くのはセクションスタイルで表現できない構造だけ。
 * ポータル側のクラスには一切触れない。
 * ----------------------------------------------------------- */

.miweno-focus-main {
	background-color: var(--wp--preset--color--focus-base);
}

/*
 * ヘッダー・本文・フッターの間にはサイト共通のブロック余白が入る。
 * Focus Lab は暗い面が続くため、その隙間に白が覗かないよう
 * body の背景色も暗い側に合わせる（このページにだけ効かせる）。
 */
body:has(.miweno-focus-main) {
	background-color: var(--wp--preset--color--focus-base);
}

#atmospheres,
#pomodoro,
#resources,
#youtube {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

.miweno-focus-muted {
	color: var(--miweno-muted);
}

/* ヘッダー / フッター --------------------------------------- */

.miweno-focus-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.miweno-focus-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.miweno-focus-wordmark__name {
	font-weight: 700;
	letter-spacing: 0.16em;
}

.miweno-focus-wordmark__suffix {
	color: var(--miweno-muted);
	letter-spacing: 0.1em;
}

.miweno-focus-nav a,
.miweno-focus-back a,
.miweno-focus-footer-links a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.miweno-focus-nav a:hover,
.miweno-focus-back a:hover,
.miweno-focus-footer-links a:hover {
	color: var(--wp--preset--color--focus-accent-soft);
	text-decoration: underline;
}

.miweno-focus-back a {
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* ヒーロー ---------------------------------------------------
 * 装飾は1種類だけ。月の地平線を思わせる大きな弧と、
 * その上のごく淡い光。星は散らさない。アニメーションもしない。
 * ----------------------------------------------------------- */

.miweno-focus-hero {
	position: relative;
	overflow: hidden;
}

.miweno-focus-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: 66%;
	inset-inline-start: 50%;
	width: 190vw;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	border-top: 1px solid rgba(169, 156, 247, 0.28);
	background-image: radial-gradient(60% 12% at 50% 0%, rgba(106, 85, 232, 0.18), rgba(106, 85, 232, 0) 70%);
	pointer-events: none;
}

.miweno-focus-hero__inner {
	position: relative;
	z-index: 1;
}

.miweno-focus-hero__inner :is(h1, p) {
	max-width: 46rem;
}

/* グリッド（ポータルの .miweno-worlds とは別。他ミニサイトでも再利用する） */

.wp-block-group.miweno-grid-2,
.wp-block-group.miweno-grid-3 {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
}

.wp-block-group.miweno-grid-2 > * + *,
.wp-block-group.miweno-grid-3 > * + * {
	margin-block-start: 0;
}

@media (min-width: 40em) {
	.wp-block-group.miweno-grid-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 40em) and (max-width: 63.999em) {
	.wp-block-group.miweno-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 3枚目が1枚だけ余るときは横幅いっぱいにして間延びを防ぐ。 */
	.wp-block-group.miweno-grid-3 > *:nth-child(3):last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64em) {
	.wp-block-group.miweno-grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Atmospheres カード ---------------------------------------- */

.miweno-atmo-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--lg, 18px);
}

.miweno-atmo-card h3 {
	padding-inline-end: 4rem;
}

/* 写真の代わりに置く、ごく小さな抽象記号。 */
.miweno-atmo-card::before {
	content: "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	width: 2.75rem;
	height: 2.75rem;
	opacity: 0.6;
	pointer-events: none;
}

.miweno-atmo-card--moon::before {
	border: 1px solid var(--wp--preset--color--focus-accent-soft);
	border-radius: 50%;
}

.miweno-atmo-card--sea::before {
	background-image: repeating-linear-gradient(180deg, rgba(169, 156, 247, 0.55) 0 1px, transparent 1px 0.7rem);
}

.miweno-atmo-card--rain::before {
	background-image: repeating-linear-gradient(72deg, rgba(169, 156, 247, 0.5) 0 1px, transparent 1px 0.6rem);
}

.miweno-pill {
	display: inline-block;
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.2em 0.9em;
	color: var(--miweno-muted);
	letter-spacing: 0.08em;
	line-height: 1.7;
	text-transform: uppercase;
}

/* Pomodoro カード -------------------------------------------- */

.miweno-pomo-card {
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--lg, 18px);
	background-color: var(--miweno-surface);
}

.miweno-pomo-card__value {
	letter-spacing: -0.02em;
}

/* Free Resources / YouTube ----------------------------------- */

.miweno-res-item {
	border-top: 1px solid var(--miweno-outline);
}

.miweno-focus-note {
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--lg, 18px);
	color: var(--miweno-muted);
}

/* スマートフォン ---------------------------------------------- */

@media (max-width: 39.999em) {
	/* ナビは窮屈になるため隠す。各セクションはスクロールで到達できる。
	   ポータルへ戻る導線（MIWENO →）だけは常に残す。
	   ブロックのフレックスレイアウトCSSに勝つため詳細度を上げている。 */
	.wp-block-group.miweno-focus-nav {
		display: none;
	}

	/* ヘッダーは1行に収める。「by MIWENO WORKS」は隠し、
	   FOCUS LAB を左、MIWENO → を右に置いたまま折り返させない。 */
	.miweno-focus-wordmark__suffix {
		display: none;
	}

	.miweno-focus-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	/* 文字サイズは変えずにタップ領域だけ確保する。 */
	.miweno-focus-back a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.miweno-focus-hero__inner h1 {
		line-height: 1.12;
	}

	.miweno-focus-hero::before {
		inset-block-start: 70%;
		width: 240vw;
	}
}

/* --------------------------------------------------------------
 * 8. Kendo Lab（/kendo/）
 *
 * 配色は styles/section-kendo.json（is-style-miweno-kendo）が供給する。
 * ここに書くのはセクションスタイルで表現できない構造だけ。
 * Focus Lab とポータルのクラスには一切触れない。
 *
 * 赤（kendo-accent）は面で使わず、eyebrow・小さなdot・hover の罫線に限る。
 * ----------------------------------------------------------- */

.miweno-kendo-main {
	/* ウォームベージュはこのページ専用。使う場所は Maintenance 1セクションだけ。 */
	--miweno-kendo-tint: #efe9e0;

	background-color: var(--wp--preset--color--kendo-base);
}

/*
 * ヘッダー・本文・フッターの間にはサイト共通のブロック余白が入る。
 * Kendo Lab は生成り色が続くため、その隙間に純白が覗かないよう
 * body の背景色も合わせる（このページにだけ効かせる）。
 */
body:has(.miweno-kendo-main) {
	background-color: var(--wp--preset--color--kendo-base);
}

#guides,
#beginner,
#bogu,
#shinai,
#maintenance,
#from-japan {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

.miweno-kendo-muted {
	color: var(--miweno-muted);
}

/* 赤を使う数少ない場所のひとつ。面ではなく文字にだけ載せる。 */
.miweno-kendo-eyebrow {
	color: var(--wp--preset--color--kendo-accent);
}

/* セクション間は色面ではなく細い罫線で区切る（図鑑的な整理感を出す）。 */
.miweno-kendo-section {
	border-top: 1px solid var(--miweno-outline);
}

/* セクションスタイルの背景より後に効かせるため詳細度を上げている。 */
.miweno-kendo-section.miweno-kendo-section--tint {
	background-color: var(--miweno-kendo-tint);
}

.miweno-kendo-section.miweno-kendo-section--paper {
	background-color: var(--wp--preset--color--base);
}

/* ヘッダー / フッター --------------------------------------- */

.miweno-kendo-header {
	border-bottom: 1px solid var(--miweno-outline);
}

.miweno-kendo-footer {
	border-top: 1px solid var(--miweno-outline);
}

.miweno-kendo-wordmark__name {
	font-weight: 700;
	letter-spacing: 0.16em;
}

.miweno-kendo-wordmark__suffix {
	color: var(--miweno-muted);
	letter-spacing: 0.1em;
}

/*
 * ナビは墨色のまま置く。セクションスタイルが供給するリンク色（深い赤）を
 * ここだけ打ち消す。赤はホバー時にだけ現れる。
 */
.miweno-kendo-nav a,
.miweno-kendo-back a,
.miweno-kendo-footer-links a {
	color: var(--wp--preset--color--kendo-ink);
	text-decoration: none;
}

.miweno-kendo-nav a:hover,
.miweno-kendo-back a:hover,
.miweno-kendo-footer-links a:hover {
	color: var(--wp--preset--color--kendo-accent);
	text-decoration: underline;
}

.miweno-kendo-back a {
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* ヒーロー ---------------------------------------------------
 * 装飾は1種類だけ。道場の床と間合いを思わせる細い縦線を下端に敷き、
 * 上に向かって消す。5本ごとに1本だけ濃くして規則性を見せる。
 * 面・竹刀・桜などは描かない。アニメーションもしない。
 * ----------------------------------------------------------- */

.miweno-kendo-hero {
	position: relative;
	overflow: hidden;
}

.miweno-kendo-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-inline: 0;
	inset-block-end: 0;
	height: clamp(88px, 14vw, 168px);
	background-image:
		repeating-linear-gradient(90deg, rgba(35, 38, 43, 0.22) 0 1px, transparent 1px 120px),
		repeating-linear-gradient(90deg, rgba(35, 38, 43, 0.08) 0 1px, transparent 1px 24px);
	-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.miweno-kendo-hero__inner {
	position: relative;
	z-index: 1;
}

.miweno-kendo-hero__inner :is(h1, p) {
	max-width: 46rem;
}

/* 4カード用グリッド。既存の miweno-grid-2 / -3 には手を入れない。
   スマートフォンでも2列にして、縦に伸びすぎないようにする。 */

.wp-block-group.miweno-grid-4 {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-block-group.miweno-grid-4 > * + * {
	margin-block-start: 0;
}

@media (min-width: 64em) {
	.wp-block-group.miweno-grid-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Guides カード ----------------------------------------------
 * ポータルのカード（角丸・面）とは変え、上罫線と番号だけで見せる。
 * カード全体がリンクになるのでボタンは置かない。
 * ----------------------------------------------------------- */

.miweno-kendo-guide {
	position: relative;
	border-top: 2px solid var(--wp--preset--color--kendo-ink);
	transition: transform var(--wp--custom--transition--base, 180ms ease), border-color var(--wp--custom--transition--base, 180ms ease);
}

.miweno-kendo-guide:hover,
.miweno-kendo-guide:focus-within {
	transform: translateY(-2px);
	border-top-color: var(--wp--preset--color--kendo-accent);
}

.miweno-kendo-guide__index {
	color: var(--miweno-muted);
	letter-spacing: 0.18em;
	font-variant-numeric: tabular-nums;
}

.miweno-kendo-guide__title {
	letter-spacing: 0.08em;
}

.miweno-kendo-guide__title a {
	color: inherit;
	text-decoration: none;
}

/* リンクをカード全面に広げる。 */
.miweno-kendo-guide__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* 小さな遷移の合図。常時は控えめ、ホバーで赤く一歩動く。
   擬似要素だと矢印がアクセシビリティツリーに載って読み上げられるため、
   見出しリンク内の実要素（aria-hidden="true"）として置き、
   位置と動きだけをここで指定する。見出しの字送り・太さは受け継がせない。 */
.miweno-kendo-guide__cue {
	position: absolute;
	inset-block-end: 0.35rem;
	inset-inline-start: 0;
	color: var(--miweno-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1;
	transition: transform var(--wp--custom--transition--base, 180ms ease), color var(--wp--custom--transition--base, 180ms ease);
}

.miweno-kendo-guide:hover .miweno-kendo-guide__cue,
.miweno-kendo-guide:focus-within .miweno-kendo-guide__cue {
	color: var(--wp--preset--color--kendo-accent);
	transform: translateX(3px);
}

/* 記事プレビュー / 手入れ / 購入 ------------------------------ */

.miweno-kendo-article {
	border-top: 1px solid var(--miweno-outline);
}

/* 状態表示。赤はこの小さな点だけ。 */
.miweno-kendo-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--miweno-muted);
	letter-spacing: 0.08em;
}

.miweno-kendo-status::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--kendo-accent);
}

/* Bogu / Shinai の2面 ---------------------------------------- */

.miweno-kendo-panel {
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 2px solid var(--wp--preset--color--kendo-ink);
}

@media (min-width: 40em) {
	.wp-block-group.miweno-kendo-split {
		gap: var(--wp--preset--spacing--50);
	}
}

ul.miweno-kendo-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
	color: var(--miweno-muted);
	font-size: var(--wp--preset--font-size--small);
}

ul.miweno-kendo-terms li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

ul.miweno-kendo-terms li::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(35, 38, 43, 0.38);
}

/* Free Guide -------------------------------------------------
 * 将来のコンバージョン地点。墨色の面で少し強くするが、
 * 広告バナーにしないため装飾・感嘆符・グラデーションは使わない。
 * CTA を足すときは .miweno-kendo-offer__action に wp:buttons を入れる。
 * ----------------------------------------------------------- */

.miweno-kendo-offer {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg, 18px);
	background-color: var(--wp--preset--color--kendo-ink);
	color: var(--wp--preset--color--kendo-base);
}

/* 深い赤は墨色の上ではAAに届かないため、暗面では明度を上げた赤を使う。 */
.miweno-kendo-offer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 48px;
	height: 2px;
	background-color: #d98b86;
}

.miweno-kendo-offer :is(h2, h3) {
	color: var(--wp--preset--color--kendo-base);
}

.miweno-kendo-offer__eyebrow {
	color: #d98b86;
}

.miweno-kendo-offer__lead {
	max-width: 42rem;
	color: rgba(247, 245, 241, 0.82);
}

.miweno-kendo-offer__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(247, 245, 241, 0.78);
	letter-spacing: 0.08em;
}

.miweno-kendo-offer__status::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #d98b86;
}

/* タブレット -------------------------------------------------- */

@media (min-width: 40em) and (max-width: 63.999em) {
	/* ナビ5項目を1行に収めるため、この幅だけ間隔を詰める。 */
	.wp-block-group.miweno-kendo-nav {
		gap: var(--wp--preset--spacing--20);
	}
}

/*
 * ナビが5項目あるため、1024px 未満では「by MIWENO WORKS」を外して
 * ヘッダーを1行に保つ（Focus Lab のヘッダーの高さと揃える）。
 */
@media (max-width: 63.999em) {
	.miweno-kendo-wordmark__suffix {
		display: none;
	}
}

/*
 * 極端に狭い端末（〜352px）。2列を保ったまま MAINTENANCE が
 * 桁あふれするのは字送りのぶんだけなので、そこだけ詰める。
 * 文字サイズ（17px）は下げない。360px 以上には影響しない。
 */
@media (max-width: 22em) {
	.miweno-kendo-guide__title {
		letter-spacing: 0.02em;
	}
}

/* スマートフォン ---------------------------------------------- */

@media (max-width: 39.999em) {
	/* Focus Lab で確定した設計を踏襲する。
	   ヘッダーは KENDO LAB と MIWENO → だけの1行にする。 */
	.wp-block-group.miweno-kendo-nav {
		display: none;
	}

	.miweno-kendo-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	/* 文字サイズは変えずにタップ領域だけ確保する。 */
	.miweno-kendo-back a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.miweno-kendo-hero__inner h1 {
		line-height: 1.12;
	}

	.miweno-kendo-hero::before {
		height: 84px;
	}
}

/* --------------------------------------------------------------
 * 9. Japan Life（/japan-life/）
 *
 * 配色は styles/section-japan-life.json（is-style-miweno-japan-life）が供給する。
 * ここに書くのはセクションスタイルで表現できない構造だけ。
 * Focus Lab・Kendo Lab・ポータルのクラスには一切触れない。
 *
 * オレンジは面で使わず、eyebrow・小さなdot・hover の枠線・状態表示に限る。
 * ----------------------------------------------------------- */

.miweno-japan-life-main {
	/* ページの地は「温かい白」。ベージュは節ごとの切り替えにだけ使う。 */
	--miweno-jl-base: #fbf8f4;
	--miweno-jl-sand: #efe6d9;

	/*
	 * プリセットのオレンジ（#b35a1f）はベージュ／サンドの上では
	 * コントラスト比が 4.2 / 3.9 までしか出ない。文字に使う分だけ
	 * 濃いテラコッタに置き換え、面・点・枠線にはプリセットを使う。
	 */
	--miweno-jl-accent-text: #9d4a17;

	background-color: var(--miweno-jl-base);
}

/*
 * ヘッダー・本文・フッターの間にはサイト共通のブロック余白が入る。
 * その隙間に純白が覗かないよう body の背景も温かい白に合わせる
 * （このページにだけ効かせる）。
 */
body:has(.miweno-japan-life-main) {
	background-color: #fbf8f4;
}

#categories,
#food,
#home,
#work-study,
#deals {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

.miweno-japan-life-muted {
	color: var(--miweno-muted);
}

/* オレンジを文字に使う数少ない場所。 */
.miweno-japan-life-eyebrow {
	color: var(--miweno-jl-accent-text, #9d4a17);
}

/*
 * 節の切り替えは罫線ではなく地色で行う（Kendo の図鑑的な罫線とは変える）。
 * 無指定の節はセクションスタイルのウォームベージュのまま。
 * セクションスタイルの背景より後に効かせるため詳細度を上げている。
 */
.miweno-japan-life-section.miweno-japan-life-section--plain {
	background-color: var(--miweno-jl-base, #fbf8f4);
}

.miweno-japan-life-section.miweno-japan-life-section--sand {
	background-color: var(--miweno-jl-sand, #efe6d9);
}

/* ヘッダー / フッター --------------------------------------- */

.miweno-japan-life-header {
	border-bottom: 1px solid var(--miweno-outline);
}

.miweno-japan-life-footer {
	border-top: 1px solid var(--miweno-outline);
}

.miweno-japan-life-wordmark__name {
	font-weight: 700;
	letter-spacing: 0.16em;
}

.miweno-japan-life-wordmark__suffix {
	color: var(--miweno-muted);
	letter-spacing: 0.1em;
}

/*
 * ナビは墨色のまま置く。セクションスタイルが供給するリンク色（オレンジ）を
 * ここだけ打ち消す。オレンジはホバー時にだけ現れる。
 */
.miweno-japan-life-nav a,
.miweno-japan-life-back a,
.miweno-japan-life-footer-links a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.miweno-japan-life-nav a:hover,
.miweno-japan-life-back a:hover,
.miweno-japan-life-footer-links a:hover {
	color: var(--miweno-jl-accent-text, #9d4a17);
	text-decoration: underline;
}

.miweno-japan-life-back a {
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* ヒーロー ---------------------------------------------------
 * 装飾は1種類だけ。長さの違う水平線を下端に積み、
 * 整理された棚の段を思わせる。いちばん上の短い線だけがアクセント。
 * ポータルの同心円・Focus の弧・Kendo の縦線とは軸も形も変えてある。
 * アニメーションはしない。
 * ----------------------------------------------------------- */

.miweno-japan-life-hero {
	position: relative;
	overflow: hidden;
}

.miweno-japan-life-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-inline: 0;
	inset-block-end: 0;
	height: clamp(92px, 12vw, 128px);
	background-repeat: no-repeat;
	background-image:
		linear-gradient(rgba(19, 22, 27, 0.16), rgba(19, 22, 27, 0.16)),
		linear-gradient(rgba(19, 22, 27, 0.13), rgba(19, 22, 27, 0.13)),
		linear-gradient(rgba(19, 22, 27, 0.10), rgba(19, 22, 27, 0.10)),
		linear-gradient(rgba(19, 22, 27, 0.07), rgba(19, 22, 27, 0.07));
	background-size: 100% 1px, 74% 1px, 52% 1px, 32% 1px;
	background-position:
		0 100%,
		0 calc(100% - 24px),
		0 calc(100% - 48px),
		0 calc(100% - 72px);
	pointer-events: none;
}

.miweno-japan-life-hero__inner {
	position: relative;
	z-index: 1;
}

.miweno-japan-life-hero__inner :is(h1, p) {
	max-width: 46rem;
}

/* Categories カード ------------------------------------------
 * Focus の枠線カード・Kendo の上罫線カードより角を丸め、
 * 影をごく薄く載せて日常寄りの柔らかさを出す。
 * カード全体がリンクになるのでボタンは置かない。
 * ----------------------------------------------------------- */

.miweno-japan-life-card {
	position: relative;
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--xl, 24px);
	background-color: var(--wp--preset--color--base);
	transition: transform var(--wp--custom--transition--base, 180ms ease), box-shadow var(--wp--custom--transition--base, 180ms ease), border-color var(--wp--custom--transition--base, 180ms ease);
}

.miweno-japan-life-card:hover,
.miweno-japan-life-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--japanlife-accent);
	box-shadow: 0 10px 26px rgba(19, 22, 27, 0.07);
}

.miweno-japan-life-card__title {
	letter-spacing: 0.06em;
}

.miweno-japan-life-card__title a {
	color: inherit;
	text-decoration: none;
}

/* リンクをカード全面に広げる。 */
.miweno-japan-life-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/*
 * 小さな遷移の合図。擬似要素だと矢印がアクセシビリティツリーに載って
 * 読み上げられるため、見出しリンク内の実要素（aria-hidden="true"）として置く。
 * 見出しの字送り・太さは受け継がせない。
 */
.miweno-japan-life-card__cue {
	margin-inline-start: 0.4rem;
	color: var(--miweno-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1;
	display: inline-block;
	transition: transform var(--wp--custom--transition--base, 180ms ease), color var(--wp--custom--transition--base, 180ms ease);
}

.miweno-japan-life-card:hover .miweno-japan-life-card__cue,
.miweno-japan-life-card:focus-within .miweno-japan-life-card__cue {
	color: var(--miweno-jl-accent-text, #9d4a17);
	transform: translateX(3px);
}

/* 各節の項目 -------------------------------------------------- */

.miweno-japan-life-item {
	border-top: 1px solid var(--miweno-outline);
}

/* Recommended。広告の羅列に見せないため、星・順位・価格・購入ボタンは持たない。 */
.miweno-japan-life-rec {
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--lg, 18px);
	background-color: var(--wp--preset--color--base);
}

/* 状態表示。オレンジはこの小さな点と文字だけ。 */
.miweno-japan-life-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--miweno-jl-accent-text, #9d4a17);
	letter-spacing: 0.06em;
}

.miweno-japan-life-status::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--japanlife-accent);
}

/* Focus Lab への橋渡し。ボタンにはしない。 */
.miweno-japan-life-crosslink {
	color: var(--miweno-muted);
}

.miweno-japan-life-crosslink a {
	color: var(--miweno-jl-accent-text, #9d4a17);
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

/* Deals ------------------------------------------------------
 * 掲載がまだ無い状態を、そのまま姿勢として見せる面。
 * 広告バナーにしないため、強い色面・感嘆符・ボタンは置かない。
 * 紹介カードと開示文は miweno-japan-life-offer__note に足す。
 * ----------------------------------------------------------- */

.miweno-japan-life-offer {
	border: 1px solid var(--miweno-outline);
	border-radius: var(--wp--custom--radius--xl, 24px);
	background-color: var(--wp--preset--color--base);
}

.miweno-japan-life-offer__lead {
	max-width: 46rem;
}

.miweno-japan-life-offer__note {
	max-width: 46rem;
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--miweno-outline);
}

/* スマートフォン ---------------------------------------------- */

@media (max-width: 39.999em) {
	/* Focus Lab・Kendo Lab で確定した設計を踏襲する。
	   ヘッダーは JAPAN LIFE と MIWENO → だけの1行にする。 */
	.wp-block-group.miweno-japan-life-nav {
		display: none;
	}

	.miweno-japan-life-wordmark__suffix {
		display: none;
	}

	.miweno-japan-life-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	/* 文字サイズは変えずにタップ領域だけ確保する。 */
	.miweno-japan-life-back a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.miweno-japan-life-hero__inner h1 {
		line-height: 1.12;
	}

	.miweno-japan-life-hero::before {
		height: 74px;
		background-position:
			0 100%,
			0 calc(100% - 20px),
			0 calc(100% - 40px),
			0 calc(100% - 60px);
	}

	/* 縦密度（Japan Life のみ） -----------------------------------
	 *
	 * Japan Life は Focus Lab より「日常的・実用的・テンポよく読める」
	 * 印象にしたいので、本文6節の縦の余白だけを一律 15% 詰める。
	 *
	 * 変えないもの: 文字サイズ / 行間 / 段組み（Categories・Home の2×2）/
	 * カード構造 / Hero / Header / Footer / 横方向の余白。
	 * Hero は :not() で除外する。他ページのクラスには一切触れない。
	 * ---------------------------------------------------------- */

	/*
	 * 節の上下 padding: 72px → 61.2px。
	 * padding はブロックのインラインスタイル（var() 参照）で入るため、
	 * 参照先のプリセット値をこの節の上だけ差し替える。
	 */
	.miweno-japan-life-section:not(.miweno-japan-life-hero) {
		--wp--preset--spacing--70: calc(4.5rem * 0.85);
	}

	/* 節の直下の間隔（見出し群 → グリッド → 補足文）: 40px → 34px。 */
	.miweno-japan-life-section:not(.miweno-japan-life-hero) > * + * {
		margin-block-start: calc(2.5rem * 0.85);
	}

	/* Deals は元が 32px なので同率で 27.2px に揃える。 */
	.miweno-japan-life-section#deals > * + * {
		margin-block-start: calc(2rem * 0.85);
	}

	/*
	 * カードの縦の間隔: 24px → 20.4px。
	 * row-gap だけを上書きし、column-gap（列幅と 2×2 の維持）には触れない。
	 * 共有クラス .miweno-grid-* の定義そのものは書き換えない。
	 */
	.miweno-japan-life-section:not(.miweno-japan-life-hero) :is(.miweno-grid-3, .miweno-grid-4) {
		row-gap: calc(1.5rem * 0.85);
	}

}

/* --------------------------------------------------------------
 * 10. Trading Tools（/trading/）
 *
 * 配色は styles/section-trading.json（is-style-miweno-trading）が供給する。
 * ここに書くのはセクションスタイルで表現できない構造だけ。
 * ポータル・Focus Lab・Kendo Lab・Japan Life のクラスには一切触れない。
 *
 * Focus Lab の「Atmospheric Dark」に対して、こちらは「Functional Dark」。
 * 面や光で語らず、罫線・等間隔・状態表示で語る。
 * Teal は eyebrow・状態のドット・hover の枠線・細い線だけに使い、面には使わない。
 * 損益の緑／赤、金色、チャート、ローソク足、矢印の多用はしない。
 * ----------------------------------------------------------- */

body:has(.miweno-trading-main) {
	/* 地はニアブラック。チャコールは節ごとの切り替えにだけ使う。 */
	--miweno-tr-base: #13161a;
	--miweno-tr-panel: #1b1f24;
	--miweno-tr-info: #171b22;

	/* カードは面を塗らず、ごく薄い明度差だけで持ち上げる。 */
	--miweno-tr-card: rgba(255, 255, 255, 0.03);

	--miweno-tr-line: rgba(255, 255, 255, 0.10);
	--miweno-tr-line-strong: rgba(255, 255, 255, 0.18);
	--miweno-tr-accent: var(--wp--preset--color--trading-accent, #1fb6ae);

	/* ヒーローのグリッド寸法。狭い画面では目を細かくしすぎない。 */
	--miweno-tr-grid: rgba(255, 255, 255, 0.075);
	--miweno-tr-cell: 72px;

	background-color: var(--miweno-tr-base);
}

.miweno-trading-main {
	background-color: var(--miweno-tr-base);
}

#tools,
#mt-platform,
#gold,
#resources,
#brokers,
#featured-tool {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

.miweno-trading-muted {
	color: var(--miweno-muted);
}

/*
 * 節の切り替えは罫線ではなく地色で行う。
 * セクションスタイルの背景より後に効かせるため詳細度を上げている。
 */
.miweno-trading-section.miweno-trading-section--base {
	background-color: var(--miweno-tr-base, #13161a);
}

.miweno-trading-section.miweno-trading-section--panel {
	background-color: var(--miweno-tr-panel, #1b1f24);
}

/*
 * Broker Information は Tools から視覚的に離す。
 * 地色を少し寒色へ振り、上端に細い区切りを1本だけ引く。
 * 広告バナーに見えないよう、面・枠・色は増やさない。
 */
.miweno-trading-section.miweno-trading-section--info {
	background-color: var(--miweno-tr-info, #171b22);
	border-top: 1px solid var(--miweno-tr-line-strong);
}

/* ヘッダー / フッター --------------------------------------- */

.miweno-trading-header.is-style-miweno-trading,
.miweno-trading-footer.is-style-miweno-trading {
	background-color: var(--miweno-tr-base, #13161a);
}

.miweno-trading-header {
	border-bottom: 1px solid var(--miweno-tr-line);
}

.miweno-trading-footer {
	border-top: 1px solid var(--miweno-tr-line);
}

.miweno-trading-wordmark__name {
	font-weight: 700;
	letter-spacing: 0.16em;
}

.miweno-trading-wordmark__suffix {
	color: var(--miweno-muted);
	letter-spacing: 0.1em;
}

/*
 * ナビは白のまま置く。セクションスタイルが供給するリンク色（teal）を
 * ここだけ打ち消し、teal はホバー時にだけ現れるようにする。
 */
.miweno-trading-nav a,
.miweno-trading-back a,
.miweno-trading-footer-links a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.miweno-trading-nav a:hover,
.miweno-trading-back a:hover,
.miweno-trading-footer-links a:hover {
	color: var(--miweno-tr-accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.miweno-trading-back a {
	letter-spacing: 0.08em;
}

/* Eyebrow ----------------------------------------------------
 * teal を使う数少ない場所。前に短い罫線を1本だけ置き、
 * 「目盛り」の気配を出す。
 * ----------------------------------------------------------- */

.miweno-trading-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--miweno-tr-accent);
}

.miweno-trading-eyebrow::before {
	content: "";
	flex: none;
	width: 18px;
	height: 1px;
	background-color: currentColor;
}

/* Broker Info の INFO だけは teal を使わず、無彩色で静かに置く。 */
.miweno-trading-eyebrow--info {
	color: var(--miweno-muted);
}

/* ヒーロー ----------------------------------------------------
 * 写真・チャート・ローソク足・矢印は使わない。
 * 縦横の極薄グリッドだけで「system panel / data alignment」を示す。
 * ポータルの同心円・Focus の弧・Kendo の縦線・Japan Life の水平棚線と
 * 重ならない表現にしてある。
 * ----------------------------------------------------------- */

.miweno-trading-hero {
	position: relative;
	overflow: hidden;
}

.miweno-trading-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image:
		repeating-linear-gradient(to right, var(--miweno-tr-grid) 0 1px, transparent 1px var(--miweno-tr-cell)),
		repeating-linear-gradient(to bottom, var(--miweno-tr-grid) 0 1px, transparent 1px var(--miweno-tr-cell));
	-webkit-mask-image: radial-gradient(130% 150% at 6% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 76%);
	mask-image: radial-gradient(130% 150% at 6% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 76%);
	pointer-events: none;
}

.miweno-trading-hero__inner {
	position: relative;
	z-index: 1;
}

.miweno-trading-hero__inner :is(h1, p) {
	max-width: 46rem;
}

/* Tools グリッド ----------------------------------------------
 * 共有クラス .miweno-grid-* とは別に持つ。
 * スマートフォンでも 2×2 を第一候補にし、360px 以下でだけ1列へ戻す。
 * ----------------------------------------------------------- */

.wp-block-group.miweno-trading-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-block-group.miweno-trading-grid > * + * {
	margin-block-start: 0;
}

@media (min-width: 64em) {
	.wp-block-group.miweno-trading-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Tools カード ------------------------------------------------
 * SaaS の feature card に近い構造。持たせるのは
 * category / title / 短い説明 / 状態 の4つだけ。
 * 価格・勝率・利益・星評価は置かない。
 * ----------------------------------------------------------- */

.miweno-trading-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--miweno-tr-line);
	border-radius: var(--wp--custom--radius--md, 14px);
	background-color: var(--miweno-tr-card);
	transition: transform var(--wp--custom--transition--base, 180ms ease), border-color var(--wp--custom--transition--base, 180ms ease), box-shadow var(--wp--custom--transition--base, 180ms ease);
}

.miweno-trading-card:hover,
.miweno-trading-card:focus-within {
	transform: translateY(-2px);
	border-color: rgba(31, 182, 174, 0.55);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.miweno-trading-card__cat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	color: var(--miweno-muted);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.miweno-trading-card__cat-label {
	white-space: nowrap;
}

/* Featured であることは、面ではなく細い輪郭だけで控えめに示す。 */
.miweno-trading-card__flag {
	border: 1px solid rgba(31, 182, 174, 0.45);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.08rem 0.45rem;
	color: var(--miweno-tr-accent);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.miweno-trading-card__title a {
	color: inherit;
	text-decoration: none;
}

/* カード全体をリンクにする。将来の詳細ページ化もこの1行で済む。 */
.miweno-trading-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.miweno-trading-card__cue {
	display: inline-block;
	margin-inline-start: 0.4rem;
	color: var(--miweno-tr-accent);
	opacity: 0;
	transform: translateX(-2px);
	transition: opacity var(--wp--custom--transition--base, 180ms ease), transform var(--wp--custom--transition--base, 180ms ease);
}

.miweno-trading-card:hover .miweno-trading-card__cue,
.miweno-trading-card:focus-within .miweno-trading-card__cue {
	opacity: 1;
	transform: none;
}

/* 状態表示 ----------------------------------------------------
 * 進捗を事実として示すだけ。煽らない。
 * ----------------------------------------------------------- */

.miweno-trading-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--miweno-muted);
	letter-spacing: 0.06em;
}

.miweno-trading-status::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.45;
}

.miweno-trading-status--active {
	color: var(--miweno-tr-accent);
}

.miweno-trading-status--active::before {
	opacity: 1;
}

/* カード内では状態を下端に揃え、カードの高さが違っても行が乱れないようにする。 */
.miweno-trading-card .miweno-trading-status {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

/* Featured Tool ----------------------------------------------
 * 「利益を増やす道具」ではなく「決めた条件どおりに執行を補助する道具」
 * として見せる。上端の短い teal 線以外に装飾は足さない。
 * ----------------------------------------------------------- */

.miweno-trading-featured {
	position: relative;
	border: 1px solid var(--miweno-tr-line);
	border-radius: var(--wp--custom--radius--lg, 18px);
	background-color: var(--miweno-tr-card);
}

.miweno-trading-featured::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: var(--wp--preset--spacing--50);
	width: 44px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--miweno-tr-accent);
}

.miweno-trading-featured__lead {
	max-width: 46rem;
}

/* 機能予定。等間隔に並べ、仕様書の項目のように見せる。 */
.miweno-trading-spec {
	border-inline-start: 2px solid var(--miweno-tr-line-strong);
	padding-inline-start: 0.75rem;
	padding-block: 0.1rem;
}

/* 一覧項目 ----------------------------------------------------
 * カードにせず上罫線だけで区切る。資料の索引に近い見え方にする。
 * ----------------------------------------------------------- */

.miweno-trading-item {
	border-top: 1px solid var(--miweno-tr-line);
}

/* Risk Notice ------------------------------------------------
 * フッター直前に静かに置く。小さくするが、読めない大きさにはしない。
 * ----------------------------------------------------------- */

.miweno-trading-notice {
	border-top: 1px solid var(--miweno-tr-line);
}

.miweno-trading-notice__title {
	color: var(--miweno-muted);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * constrained レイアウトの直下に max-width を置くと
 * margin-left/right: auto !important で中央に寄ってしまうため、
 * パターン側で flow レイアウトのグループに入れてから幅を絞る。
 */
.miweno-trading-notice__text {
	max-width: 62rem;
}

/* 免責全文への導線。新しいCTAにしないよう、文字リンクのまま置く。 */
.miweno-trading-notice__link a {
	color: var(--miweno-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--miweno-tr-line-strong);
}

.miweno-trading-notice__link a:hover {
	color: var(--miweno-tr-accent);
	border-bottom-color: currentColor;
}

/* タブレット -------------------------------------------------- */

@media (max-width: 63.999em) {
	/* ナビ5項目が窮屈になるため、Kendo Lab 同様に添え書きを畳む。 */
	.miweno-trading-wordmark__suffix {
		display: none;
	}
}

/* スマートフォン ---------------------------------------------- */

@media (max-width: 39.999em) {
	/* ヘッダーは TRADING TOOLS と MIWENO → だけの1行にする。 */
	.wp-block-group.miweno-trading-nav {
		display: none;
	}

	.miweno-trading-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	/* 文字サイズは変えずにタップ領域だけ確保する。 */
	.miweno-trading-back a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.miweno-trading-hero__inner h1 {
		line-height: 1.12;
	}

	/* グリッドの目が細かく見えすぎないようにする。 */
	body:has(.miweno-trading-main) {
		--miweno-tr-cell: 48px;
	}

	/* Free Tools -------------------------------------------------
	 *
	 * 2列では1枚あたり 159px しか取れず、説明文が5行に割れて読みにくい。
	 * モバイルだけ「主役1枚 ＋ これから作るツールの一覧」に組み替える。
	 *
	 *   Auto Close Manager … 横幅100%の Featured カード（枠・面は維持）
	 *   残り3つ            … 枠を解いた compact list（細い divider で区切る）
	 *
	 * 文字サイズ・行間・持たせる情報（category / title / 説明 / status）は変えない。
	 * ---------------------------------------------------------- */

	.wp-block-group.miweno-trading-grid {
		grid-template-columns: 1fr;
		/* 行どうしは divider で区切るので、グリッドの隙間は持たない。 */
		gap: 0;
	}

	/* 主役。横幅いっぱいになるぶん、内側は 20px まで戻して余裕を持たせる。 */
	.miweno-trading-card--featured {
		--wp--preset--spacing--40: 1.25rem;
		margin-block-end: var(--wp--preset--spacing--30);
	}

	/*
	 * 残り3つはカードを解いて行にする。
	 * min-height は持たせず、上下 padding も控えめにして縦に伸ばさない。
	 */
	.miweno-trading-card:not(.miweno-trading-card--featured) {
		--wp--preset--spacing--40: 1rem;
		border: 0;
		border-top: 1px solid var(--miweno-tr-line);
		border-radius: 0;
		background-color: transparent;

		/*
		 * 左右の padding はブロックのインラインスタイルで入るため、
		 * ここだけは !important でないと打ち消せない。
		 * 他節の一覧（.miweno-trading-item）と左端を揃えるために 0 にする。
		 */
		padding-inline: 0 !important;
	}

	/* 行になったので、持ち上げる動きと影は外す。 */
	.miweno-trading-card:not(.miweno-trading-card--featured):hover,
	.miweno-trading-card:not(.miweno-trading-card--featured):focus-within {
		transform: none;
		box-shadow: none;
	}

	/* 行では status を詰めて、1項目が間延びしないようにする。 */
	.miweno-trading-card:not(.miweno-trading-card--featured) .miweno-trading-status {
		padding-block-start: 0.35rem;
	}

	/*
	 * hover でしか出ない矢印は、タッチ環境では出番がない。
	 * 見えないまま1行分を食って見出しを余計に折るため畳む。
	 */
	.miweno-trading-card__cue {
		display: none;
	}

	/* 縦密度 -----------------------------------------------------
	 *
	 * 8節あって 390px の総高が 6098px あり、スクロールが長い。
	 * Hero・Header・Footer はそのままに、本文7節の上下余白だけ 15% 詰めて
	 * 技術ドキュメントのようにテンポよく読めるようにする。
	 * 文字サイズと行間は変えない。
	 * ---------------------------------------------------------- */

	/* 節の上下 padding: 72px → 61.2px。参照先のプリセット値を差し替える。 */
	.miweno-trading-section:not(.miweno-trading-hero) {
		--wp--preset--spacing--70: calc(4.5rem * 0.85);
	}

	/* Risk Notice だけ元が 48px なので、同率で 40.8px に揃える。 */
	.miweno-trading-notice {
		--wp--preset--spacing--60: calc(3rem * 0.85);
	}
}

/* --------------------------------------------------------------
 * 11. From Japan（/from-japan/）
 *
 * 配色は styles/section-from-japan.json（is-style-miweno-from-japan）が供給する。
 * ここに書くのはセクションスタイルで表現できない構造だけ。
 * ポータル・Focus Lab・Kendo Lab・Japan Life・Trading Tools の
 * クラスには一切触れない。
 *
 * 目指すのは「日本の商品カタログ」ではなく
 * 「日本から発信するモダンな編集メディア」。
 * 主役のアクセントは藍。朱はごく少量（eyebrow の小さな四角・状態のドット・
 * hover の枠線）に限り、面には使わない。
 * 日の丸・鳥居・富士山・桜・波・筆文字・金・和紙は使わない。
 * ----------------------------------------------------------- */

body:has(.miweno-from-japan-main) {
	/* 地は温かい白。切り替えは中間色のグレーで、ベージュ（Japan Life）とは分ける。 */
	--miweno-fj-paper: #fdfcfa;
	--miweno-fj-tint: #f1f0ec;

	/* Buying from Japan だけ藍を敷いた面にして、実務情報の節として際立たせる。 */
	--miweno-fj-indigo-tint: #eef1f6;

	--miweno-fj-indigo: var(--wp--preset--color--fromjapan-indigo, #1f3a67);
	--miweno-fj-vermilion: var(--wp--preset--color--fromjapan-accent, #c4462a);

	--miweno-fj-line: rgba(31, 58, 103, 0.14);
	--miweno-fj-line-strong: rgba(31, 58, 103, 0.26);

	background-color: var(--miweno-fj-paper);
}

.miweno-from-japan-main {
	background-color: var(--miweno-fj-paper);
}

#discover,
#products,
#kendo,
#study,
#daily-life,
#buying {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

.miweno-from-japan-muted {
	color: var(--miweno-muted);
}

/*
 * 節の切り替えは罫線ではなく地色で行う。
 * セクションスタイルの背景より後に効かせるため詳細度を上げている。
 */
.miweno-from-japan-section.miweno-from-japan-section--paper {
	background-color: var(--miweno-fj-paper, #fdfcfa);
}

.miweno-from-japan-section.miweno-from-japan-section--tint {
	background-color: var(--miweno-fj-tint, #f1f0ec);
}

.miweno-from-japan-section.miweno-from-japan-section--indigo {
	background-color: var(--miweno-fj-indigo-tint, #eef1f6);
	border-block: 1px solid var(--miweno-fj-line);
}

/* ヘッダー / フッター --------------------------------------- */

.miweno-from-japan-header.is-style-miweno-from-japan,
.miweno-from-japan-footer.is-style-miweno-from-japan {
	background-color: var(--miweno-fj-paper, #fdfcfa);
}

.miweno-from-japan-header {
	border-bottom: 1px solid var(--miweno-fj-line);
}

.miweno-from-japan-footer {
	border-top: 1px solid var(--miweno-fj-line);
}

.miweno-from-japan-wordmark__name {
	font-weight: 700;
	letter-spacing: 0.16em;
}

.miweno-from-japan-wordmark__suffix {
	color: var(--miweno-muted);
	letter-spacing: 0.1em;
}

/*
 * ナビは墨色のまま置く。セクションスタイルが供給するリンク色（藍）を
 * ここだけ打ち消し、藍はホバー時にだけ現れるようにする。
 */
.miweno-from-japan-nav a,
.miweno-from-japan-back a,
.miweno-from-japan-footer-links a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.miweno-from-japan-nav a:hover,
.miweno-from-japan-back a:hover,
.miweno-from-japan-footer-links a:hover {
	color: var(--miweno-fj-indigo);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.miweno-from-japan-back a {
	letter-spacing: 0.08em;
}

/* Eyebrow ----------------------------------------------------
 * 朱を使う数少ない場所。印刷のトンボを思わせる小さな四角を1つだけ置く
 * （Trading の罫線とは別の記号にしてある）。
 * ----------------------------------------------------------- */

.miweno-from-japan-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--miweno-fj-vermilion);
}

.miweno-from-japan-eyebrow::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background-color: currentColor;
}

/* ヒーロー ----------------------------------------------------
 * 写真・SVG・アニメーションは使わない。
 * 製品仕様書（product design board）を抽象化した
 *   ・入れ子の矩形（パッケージのラベル面）
 *   ・その下に引いた寸法線
 * の1組だけで構成する。
 * 日の丸・富士山・鳥居・波・桜・日本地図は使わない。
 * ----------------------------------------------------------- */

.miweno-from-japan-hero {
	position: relative;
	overflow: hidden;

	/* 図版の寸法。矩形と寸法線を同じ右端にそろえて1つの図として読ませる。 */
	--miweno-fj-fig-w: clamp(116px, 15vw, 196px);
	--miweno-fj-fig-top: clamp(2.5rem, 7vw, 5rem);
	--miweno-fj-fig-right: clamp(1rem, 5vw, 6rem);
}

/* 入れ子の矩形。border と outline-offset で1要素のまま二重枠にする。 */
.miweno-from-japan-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: var(--miweno-fj-fig-top);
	inset-inline-end: var(--miweno-fj-fig-right);
	width: var(--miweno-fj-fig-w);
	aspect-ratio: 3 / 4;
	border: 1px solid var(--miweno-fj-line);
	outline: 1px solid var(--miweno-fj-line);
	outline-offset: clamp(9px, 1.5vw, 18px);
	pointer-events: none;
}

/* 寸法線。横線1本と両端の短い縦線だけで寸法表記を示す。 */
.miweno-from-japan-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset-block-start: calc(var(--miweno-fj-fig-top) + var(--miweno-fj-fig-w) * 4 / 3 + clamp(26px, 3vw, 42px));
	inset-inline-end: var(--miweno-fj-fig-right);
	width: var(--miweno-fj-fig-w);
	height: 12px;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--miweno-fj-line-strong), var(--miweno-fj-line-strong)),
		linear-gradient(var(--miweno-fj-line-strong), var(--miweno-fj-line-strong)),
		linear-gradient(var(--miweno-fj-line-strong), var(--miweno-fj-line-strong));
	background-size: 100% 1px, 1px 12px, 1px 12px;
	background-position:
		0 50%,
		0 0,
		100% 0;
	pointer-events: none;
}

.miweno-from-japan-hero__inner {
	position: relative;
	z-index: 1;
}

.miweno-from-japan-hero__inner :is(h1, p) {
	max-width: 42rem;
}

.miweno-from-japan-hero__title {
	letter-spacing: -0.02em;
}

/* Discover カード --------------------------------------------
 * 角丸を他ミニサイトより小さくして印刷物寄りにし、
 * 左上に藍の短い縦線（索引のツメ）を1本だけ置く。
 * カード全体がリンクになるのでボタンは置かない。
 * ----------------------------------------------------------- */

.miweno-from-japan-card {
	position: relative;
	border: 1px solid var(--miweno-fj-line);
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
	transition: transform var(--wp--custom--transition--base, 180ms ease), border-color var(--wp--custom--transition--base, 180ms ease), box-shadow var(--wp--custom--transition--base, 180ms ease);
}

.miweno-from-japan-card::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: -1px;
	width: 2px;
	height: 34px;
	background-color: var(--miweno-fj-indigo);
}

.miweno-from-japan-card:hover,
.miweno-from-japan-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--miweno-fj-line-strong);
	box-shadow: 0 10px 26px rgba(31, 58, 103, 0.08);
}

.miweno-from-japan-card__title {
	letter-spacing: 0.08em;
}

.miweno-from-japan-card__title a {
	color: inherit;
	text-decoration: none;
}

/* カード全体をリンクにする。将来の詳細ページ化も href の差し替えで済む。 */
.miweno-from-japan-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.miweno-from-japan-card__cue {
	display: inline-block;
	margin-inline-start: 0.4rem;
	color: var(--miweno-fj-vermilion);
	opacity: 0;
	transform: translateX(-2px);
	transition: opacity var(--wp--custom--transition--base, 180ms ease), transform var(--wp--custom--transition--base, 180ms ease);
}

.miweno-from-japan-card:hover .miweno-from-japan-card__cue,
.miweno-from-japan-card:focus-within .miweno-from-japan-card__cue {
	opacity: 1;
	transform: none;
}

/* 一覧項目 ----------------------------------------------------
 * 他ミニサイトが上罫線で区切るのに対し、ここは左罫線で段を作る。
 * 雑誌の傍注のような見え方にして、カードにはしない。
 * ----------------------------------------------------------- */

.miweno-from-japan-item {
	border-inline-start: 2px solid var(--miweno-fj-line-strong);
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* クロスリンク ------------------------------------------------
 * 他ミニサイトへの導線。ボタンにはせず、地の文に続くテキストリンクに留める。
 * 1節につき1本だけ。
 * ----------------------------------------------------------- */

.miweno-from-japan-crosslink {
	color: var(--miweno-muted);
}

.miweno-from-japan-crosslink a {
	color: var(--miweno-fj-indigo);
	text-decoration: none;
	border-bottom: 1px solid var(--miweno-fj-line-strong);
}

.miweno-from-japan-crosslink a:hover {
	color: var(--miweno-fj-vermilion);
	border-bottom-color: currentColor;
}

/* 状態表示 ----------------------------------------------------
 * 準備中であることを事実として示すだけ。煽らない。
 * 朱はこの小さなドットにだけ使う。
 * ----------------------------------------------------------- */

.miweno-from-japan-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--miweno-muted);
	letter-spacing: 0.06em;
}

.miweno-from-japan-status::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--miweno-fj-vermilion);
}

/*
 * 360px 以下では 2列にすると説明文が 58px 幅まで潰れるため1列に戻す。
 * 共有クラス .miweno-grid-4 の定義そのものは書き換えない。
 */
@media (max-width: 22.5em) {
	.wp-block-group.miweno-from-japan-cards {
		grid-template-columns: 1fr;
	}
}

/* タブレット -------------------------------------------------- */

@media (max-width: 63.999em) {
	/* ナビ5項目（Buying from Japan が長い）が窮屈になるため添え書きを畳む。 */
	.miweno-from-japan-wordmark__suffix {
		display: none;
	}
}

/* スマートフォン ---------------------------------------------- */

@media (max-width: 39.999em) {
	/* ヘッダーは FROM JAPAN と MIWENO → だけの1行にする。 */
	.wp-block-group.miweno-from-japan-nav {
		display: none;
	}

	.miweno-from-japan-header > .wp-block-group {
		flex-wrap: nowrap;
	}

	/* 文字サイズは変えずにタップ領域だけ確保する。 */
	.miweno-from-japan-back a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/*
	 * H1 は「Made in Japan. / Explained from Japan.」の2行で読ませたい。
	 * 390px では2行目に 409px 必要なのに対し利用できるのは 342px しかなく、
	 * そのままだと3行に割れる。文言は変えられないので、
	 * 行が収まるところまで文字サイズを幅に比例させる。
	 *
	 * 3rem はルートの左右パディング（1.5rem × 2）。
	 * 除数 10.6 は「2行目の実測幅 ÷ 文字サイズ」に約7%の余裕を足した値。
	 * 下限 1.9rem は可読性の下限で、320px ではここで止まるため3行に戻る
	 *（狭い画面では行数より文字の大きさを優先する）。
	 *
	 * プリセットの font-size は has-display-font-size 側が !important で
	 * 当てているため、参照先の変数を差し替える形で上書きする。
	 */
	.miweno-from-japan-hero__title {
		--wp--preset--font-size--display: clamp(1.9rem, calc((100vw - 3rem) / 10.6), 2.5rem);

		line-height: 1.14;
	}

	/*
	 * 矩形は本文に重なるので畳み、寸法線だけを下端に残す。
	 * ヒーローが縦に伸びないよう、図版は本文の外側に置かない。
	 */
	.miweno-from-japan-hero::before {
		display: none;
	}

	.miweno-from-japan-hero::after {
		inset-block-start: auto;
		inset-block-end: clamp(1.25rem, 5vw, 2rem);
		inset-inline: 0 auto;
		width: min(220px, 60%);
	}

	/* hover でしか出ない矢印は、タッチ環境では出番がない。 */
	.miweno-from-japan-card__cue {
		display: none;
	}

	/*
	 * 2×2 を保ったまま説明文の行長を確保するため、
	 * カード内側だけ 32px → 20px に詰める（文字サイズは変えない）。
	 */
	.miweno-from-japan-card {
		--wp--preset--spacing--40: 1.25rem;
	}

	/* 索引のツメは、カードが小さくなるぶん少し短くする。 */
	.miweno-from-japan-card::before {
		height: 26px;
	}
}

/* --------------------------------------------------------------
 * 12. 共通ページ（About / Contact / 法務・情報）と Legal Links
 *
 * これらのページはミニサイトではなくポータル側のブランドで見せる。
 * 法務文書は読めることが最優先なので、装飾は足さず、
 * 余白と見出し階層だけで読みやすさを作る。
 * ----------------------------------------------------------- */

/* Legal Links ------------------------------------------------
 * 6つのフッター（ポータル＋5ミニサイト）から同じ
 * parts/legal-links.html を読み込む。地色が濃色・淡色・暗色と
 * バラバラなので、色は親から継承させて自動で馴染ませる。
 * ----------------------------------------------------------- */

.miweno-legal-links {
	row-gap: var(--wp--preset--spacing--10);
}

.miweno-legal-links a {
	color: inherit;
	text-decoration: none;
}

.miweno-legal-links a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ポータルのフッターでは、もともとの右上の位置にそのまま収める。 */
.miweno-footer-links > .wp-block-template-part {
	width: 100%;
}

/* 法務・情報ページ ------------------------------------------
 * 本文幅は theme.json の contentSize（800px）をそのまま使う。
 * ----------------------------------------------------------- */

.miweno-legal-eyebrow {
	color: var(--wp--preset--color--contrast-soft);
}

/* 見出しの前は広く、後ろは狭く。段落の塊が視覚的に分かれるようにする。 */
.miweno-legal-body > :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.miweno-legal-body > :is(h2, h3) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.miweno-legal-body :is(ul, ol) {
	padding-inline-start: 1.4rem;
}

.miweno-legal-body li + li {
	margin-block-start: 0.4rem;
}

/* 法務ページのリンクは本文中で見分けられるよう下線を保つ。 */
.miweno-legal-body a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.2em;
}

/*
 * 最終更新日は本文の最終行に書かれているため、テンプレート側の
 * 自動表示（post-date）は持たせない。本文から罫線1本で切り離すだけにとどめる。
 */
.miweno-legal-body > .miweno-legal-lastupdated {
	border-top: 1px solid var(--wp--preset--color--outline);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-soft);
}

/* 連絡先のメールアドレス。フォームを持たないので、ここだけ少し大きく置く。 */
.miweno-contact-email {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

/* ページ単位の開示表示 --------------------------------------
 * 記事側で広告・紹介リンクを使うときに本文冒頭へ差し込む。
 * 6つの主要TOPには置かない。
 * ----------------------------------------------------------- */

.miweno-affiliate-notice {
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--radius--md, 14px);
	color: var(--wp--preset--color--contrast-soft);
}

@media (max-width: 39.999em) {
	/* 法務ページは行長より読みやすさ優先。見出し前の余白だけ少し詰める。 */
	.miweno-legal-body > :is(h2, h3) {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------
 * 13. 言語切替（JP / EN）
 *
 * 日本語ページと英語ページの両方のヘッダーに置く。
 * 色は親から継承させ、ポータル（白地）・Focus/Trading（暗色）・
 * Kendo/Japan Life/From Japan（淡色）のどのヘッダーにも馴染ませる。
 * JavaScript は使わない。出力は inc/i18n.php がサーバー側で行う。
 * ----------------------------------------------------------- */

.miweno-langswitch {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
}

/* 2つの言語のあいだに細い区切りを置く。 */
.miweno-langswitch__item + .miweno-langswitch__item::before {
	content: "/";
	margin-inline-end: 0.5rem;
	color: var(--miweno-muted);
}

.miweno-langswitch a.miweno-langswitch__item {
	color: inherit;
	text-decoration: none;
	opacity: 0.72;
}

.miweno-langswitch a.miweno-langswitch__item:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* 現在の言語。リンクにせず、太さで現在地を示す。 */
.miweno-langswitch__item.is-current {
	font-weight: 700;
}

/* 対応ページが未公開のとき。リンクにしない。 */
.miweno-langswitch__item.is-unavailable {
	opacity: 0.38;
}

@media (max-width: 39.999em) {
	/* モバイルでも隠さない。タップ領域だけ確保する。 */
	.miweno-langswitch a.miweno-langswitch__item {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/*
 * 日本語ページの見出しは文節で折り返す（「わかりやす／く。」のような1文字落ちを防ぐ）。
 * auto-phrase 非対応のブラウザでは通常の折り返しになるだけで、崩れはしない。
 */
.miweno-lang-ja :is(h1, h2, h3) {
	word-break: auto-phrase;
}

/*
 * 320px 前後では Display（最小 2.5rem）だと日本語の1文節が1行に収まらない
 * （例:「わかりやすく。」）。日本語の H1 だけ少し下げる。
 */
@media (max-width: 22.5em) {
	/* コアの .has-display-font-size は !important のため、同じく !important で上書きする。
	   From Japan のヒーロー見出しは専用の小さめサイズを持つので対象外。 */
	.miweno-lang-ja h1.has-display-font-size:not(.miweno-from-japan-hero__title) {
		font-size: 2.25rem !important;
	}
}