/* components.css — 共通コンポーネント。命名は BEM 風、値は theme.json のトークンを参照する */

/* 1. ヘッダー */

.site-header {
	position: relative;
	z-index: 10;
	background-color: var(--wp--preset--color--base);
}

.site-header__inner {
	min-height: var(--wp--custom--header-height);
	/* ナビ項目を天地いっぱいに伸ばす */
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
	/* 左右の余白は本文と同じ値を参照する（独自の値だとずれる） */
	padding-inline: var(--wp--style--root--padding-left)
		var(--wp--style--root--padding-right);
	margin-inline: auto;
	/* 余白を外側に足し、中身の幅をちょうど wideSize にする */
	max-width: calc(
		var(--wp--style--global--wide-size) +
			var(--wp--style--root--padding-left) +
			var(--wp--style--root--padding-right)
	);
}

.site-header__logo {
	display: flex;
	align-items: center;
}

.site-header__logo img {
	width: var(--wp--custom--logo-width--header);
	height: auto;
}

/* --- グローバルナビゲーション --- */

.site-nav {
	align-items: stretch;
}

/* ナビは4層のラッパーを挟むため、全層に高さを通す */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
.site-nav
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	:where(
		.wp-block-navigation__responsive-close,
		.wp-block-navigation__responsive-dialog,
		.wp-block-navigation__responsive-container-content
	) {
	height: 100%;
}

.site-nav
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__responsive-container-content {
	align-items: stretch;
}

.site-nav .wp-block-navigation__container {
	height: 100%;
	align-items: stretch;
	gap: 0;
}

.site-nav .wp-block-navigation-item {
	display: flex;
	align-items: stretch;
}

/* ラベルは1行に保ち、折るときはメニュー側の <wbr> の位置だけで折る */
.site-nav .wp-block-navigation-item__label {
	word-break: keep-all;
}

.site-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding-inline: var(--wp--custom--nav-item-padding);
	color: var(--wp--preset--color--contrast);
	/* ラベルが2行になる項目があるため中央で揃える */
	text-align: center;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* 開いたオーバーレイ（濃紺地）で濃紺にすると文字が消えるため、閉じた状態に限る */
.site-nav
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand);
}

/* 開くボタンのアイコンを上下中央に置く */
.site-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
}

/* 現在のページ: デザインに表示はないが、文字を濃紺にして示す */
.site-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand);
}

/* 2. ヒーロー */

/* --- 下層ページの帯（パターン ys/page-banner）。英字をページごとに書けるよう本文側に置く --- */

/* コアの min-height: 430px を上書きする */
.wp-block-cover.page-banner {
	min-height: var(--wp--custom--hero-height--page);
	margin-block: 0 var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--20);
}

.wp-block-cover.page-banner .wp-block-cover__image-background {
	opacity: var(--wp--custom--opacity--hero);
}

/* アイキャッチ未設定でも帯が真っ白にならないよう、淡い地色を敷く */
.wp-block-cover.page-banner:not(:has(.wp-block-cover__image-background)) {
	background-color: var(--wp--preset--color--base-alt);
}

/* 写真の上でゴールドの文字を浮かせる白い光彩（デザインどおり） */
.page-banner :where(.page-banner__title, .page-banner__en) {
	margin-block: 0;
	color: var(--wp--preset--color--accent);
	text-align: center;
	text-shadow:
		0 0 0.3em rgb(255 255 255 / 0.9),
		0 0 0.8em rgb(255 255 255 / 0.7);
}

.wp-block-heading.page-banner__title {
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

.page-banner__en {
	font-family: var(--wp--preset--font-family--latin);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

.page-banner .page-banner__title + .page-banner__en {
	margin-block-start: 0.4em;
}

/* --- トップページ: 全幅の写真にゴールドのキャッチコピーを重ねる --- */

/* コアの min-height: 430px と padding を上書きする */
.wp-block-cover.hero-front {
	min-height: var(--wp--custom--hero-height--front);
	padding: 0;
}

.hero-front .wp-block-cover__inner-container {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* theme.json の見出しの既定に勝つためクラスを重ねる */
.wp-block-heading.hero-front__lead {
	margin-block: 0;
	padding-inline-start: var(--wp--custom--text-inset);
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.42;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--preset--color--accent);
	/* 明るい空の上で輪郭を立てる影（デザインどおり） */
	text-shadow: 0 0.06em 0.3em rgb(0 0 0 / 0.35);
}

/* 3. セクション */

.section {
	padding-block: var(--wp--preset--spacing--60);
}

/*
 * blockGap の上マージンを消す。:root の前置は編集画面でも詳細度で勝つため
 * （.wp-site-blocks は編集画面の iframe にない）。以下の :root も同じ
 */
:root .section,
:root .philosophy,
:root .company {
	margin-block-start: 0;
}

.section--alt {
	background-color: var(--wp--preset--color--base-alt);
}

/* 全幅ブロック内での本文の端（1440px で 120px）。vw はスクロールバー分ずれるため cqw で求める */
.philosophy,
.company {
	container-type: inline-size;
	--ys-edge: max(
		var(--wp--style--root--padding-left),
		(100cqw - var(--wp--style--global--content-size)) / 2
	);
}

/* --- 英字ラベル（PHILOSOPHY など） --- */

/* 白地ではデザインのゴールドが AA に届かないため一段濃い色 */
.label-en {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--latin);
	font-size: var(--wp--custom--label-en-size);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--widest);
	line-height: 1.4;
	color: var(--wp--preset--color--accent-text);
}

/* 濃紺地ではデザインのゴールドで AA を満たす */
.site-footer .label-en,
.philosophy .label-en {
	color: var(--wp--preset--color--accent);
}

/* --- セクション見出し: 英字ラベル＋見出し（＋補足文） --- */

.heading-block {
	padding-inline-start: var(--wp--custom--text-inset);
}

/* 子の間隔は blockGap ではなくここで決める */
:root .heading-block > * {
	margin-block: 0;
}

.heading-block .heading-block__title {
	margin-block-start: 0.2em;
	font-size: var(--wp--preset--font-size--xx-large);
}

.heading-block .heading-block__sub {
	margin-block-start: 0.5em;
}

/* --- 経営理念: グラデーションの地に、斜めに切った写真を右から重ねる --- */

.philosophy {
	position: relative;
	/* 写真の上下に帯の地が見える */
	padding-block: var(--wp--custom--philosophy--inset);
	color: var(--wp--preset--color--base);
	/* 写真の切り口の傾き。帯と地のグラデーションも同じ角度にし、色の境目を切り口と平行にする */
	--ys-slope: calc(
		90deg +
			atan2(
				var(--wp--custom--philosophy--notch) * var(--wp--custom--philosophy--media-width),
				var(--wp--custom--philosophy--height)
			)
	);
}

/* 帯のグラデーション。cqw を帯の幅で解決させるため、帯の中の疑似要素に描く */
.philosophy::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		var(--ys-slope),
		var(--wp--custom--philosophy--band-from) 0%,
		var(--wp--custom--philosophy--band-to) 100%
	);
}

.philosophy__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--wp--custom--philosophy--height);
	padding-inline-start: calc(var(--ys-edge) + var(--wp--custom--text-inset));
	/*
	 * 地のグラデーションは、写真に隠れない範囲だけで変化させる。
	 * 始まり: 左下の角を通る線。終わり: 写真の切り欠きの右上角を通る線。
	 * 要素の幅で位置が決まるため、theme.json のプリセットにはできない
	 */
	--ys-panel-start: calc(var(--wp--custom--philosophy--height) * -1 * cos(var(--ys-slope)));
	--ys-panel-end: calc(
		(100cqw - var(--wp--custom--philosophy--media-width) * (1 - var(--wp--custom--philosophy--notch))) *
			sin(var(--ys-slope))
	);
	background: linear-gradient(
		var(--ys-slope),
		var(--wp--custom--philosophy--panel-from) var(--ys-panel-start),
		var(--wp--custom--philosophy--panel-to) var(--ys-panel-end)
	);
}

:root .philosophy__body > * {
	margin-block: 0;
}

.philosophy .philosophy__title {
	margin-block: 0 1.05em;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--base);
}

/* デザインの1行21字に合わせた幅 */
.philosophy__text {
	max-width: 22.5em;
}

/* 編集画面がブロックの外枠に付ける position: relative に勝つ強さにする */
:root .philosophy .philosophy__media {
	position: absolute;
	/* 全幅の地（z-index: 1）より手前に出す */
	z-index: 2;
	inset-block: var(--wp--custom--philosophy--inset);
	inset-inline-end: 0;
	width: var(--wp--custom--philosophy--media-width);
	margin: 0;
	/* 左辺を斜めに切る */
	clip-path: polygon(
		calc(var(--wp--custom--philosophy--notch) * 100%) 0,
		100% 0,
		100% 100%,
		0 100%
	);
}

/* 編集画面がインラインで付ける height: auto に勝つため !important */
.philosophy__media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/* --- カードを3列に並べるグリッド（行動指針・選ばれる理由） --- */

.card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--card-gap);
}

/* flow レイアウトの blockGap を消し、カードの天を揃える */
:root .card-grid > * {
	margin-block: 0;
}

/* --- 行動指針のカード --- */

.wp-block-cover.value-card {
	/* デザインの縦横比。本文が収まらなければ縦に伸びる */
	min-height: auto;
	aspect-ratio: 375 / 383;
	padding: 0;
	align-items: stretch;
}

.value-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

:root .value-card .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.value-card__head {
	padding: 1.25rem 2.3rem;
}

:root .value-card__head > * {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--latin);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--accent);
}

.value-card__num {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: var(--wp--custom--letter-spacing--widest);
}

.value-card__en {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--wider);
}

/* XD の背景のぼかし（ぼかし 5・明るさ −27・不透明度 51%）を再現する */
.value-card__body {
	/* カード間で帯の高さを揃える */
	min-height: 54%;
	padding: 0.25rem 1.25rem;
	background: var(--wp--custom--card-overlay);
	-webkit-backdrop-filter: var(--wp--custom--card-overlay-filter);
	backdrop-filter: var(--wp--custom--card-overlay-filter);
	color: var(--wp--preset--color--base);
	/* 1行20字に収まる字間（行数がずれると帯の高さもずれる） */
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

:root .value-card__body > * {
	margin-block: 0;
}

.value-card .value-card__title {
	margin-block-end: 0.3em;
	font-size: var(--wp--custom--card-title-size);
	text-align: center;
	color: var(--wp--preset--color--base);
}

/* --- 会社概要: 左に見出しと写真（画面の左端まで）、右に一覧 --- */

.wp-block-group.company {
	padding-block: var(--wp--preset--spacing--20);
}

.company__inner {
	display: grid;
	grid-template-columns: 37% minmax(0, 1fr);
	column-gap: var(--wp--custom--card-gap);
	padding-inline-end: var(--ys-edge);
}

:root .company__intro > * {
	margin-block: 0;
}

.company__intro .heading-block {
	padding-inline-start: calc(var(--ys-edge) + var(--wp--custom--text-inset));
}

.company__media {
	margin-block-start: 1rem !important;
}

.company__media img {
	display: block;
	width: 100%;
	aspect-ratio: 533 / 257;
	object-fit: cover;
}

/* 一覧: 項目名と内容の2列 */
.profile {
	align-self: start;
	padding-block-start: 2.5rem;
}

.profile__row {
	display: grid;
	grid-template-columns: 8.3rem minmax(0, 1fr);
	padding-block: 0.3em;
	border-block-end: 1px solid var(--wp--preset--color--border);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

.profile__row:last-child {
	border-block-end: 0;
}

/* 行内は flow レイアウトの blockGap を使わない */
:root .profile__row,
:root .profile__row > * {
	margin-block: 0;
}

.profile__label {
	color: var(--wp--preset--color--accent-text);
}

/* 行頭の「・」をぶら下げる */
.profile__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.profile__list li {
	position: relative;
	padding-inline-start: 1.5em;
}

.profile__list li::before {
	content: "・";
	position: absolute;
	inset-inline-start: 0.2em;
}

/* --- 選ばれる理由 --- */

.strength .heading-block {
	margin-block-end: var(--wp--preset--spacing--40);
}

:root .strength-item > * {
	margin-block: 0;
}

/* アイコンは2倍密度。原寸の半分で表示する */
.strength-item__icon {
	display: flex;
	justify-content: center;
}

.strength-item__icon img {
	width: auto;
	height: 2.75rem;
}

.strength-item .strength-item__en {
	margin-block: 0.6rem 0.9rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	text-align: center;
}

.strength-item__media img {
	display: block;
	width: 100%;
	aspect-ratio: 375 / 113;
	object-fit: cover;
}

.strength-item .strength-item__title,
.strength-item__text {
	padding-inline: 2.375rem;
}

.strength-item .strength-item__title {
	margin-block: 1.2rem 0.9rem;
	font-size: var(--wp--custom--card-title-size);
}

/* 4. フッター */

.site-footer {
	margin-block-start: auto;
	padding-block: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

/* 濃紺地なのでフォーカスリングも白にする */
.site-footer :where(a):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* メッセージとロゴを本文の端より内側から始める（constrained の margin は上書きできないため padding） */
.site-footer__message,
.site-footer__bottom {
	padding-inline-start: var(--wp--custom--text-inset);
}

.site-footer__copy {
	margin-block-start: 0.4em;
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

.site-footer__copy + .site-footer__lead {
	margin-block-start: 0.6em;
}

/* 文節で折り返す（未対応の Safari は従来どおり） */
.site-footer__copy,
.site-footer__lead {
	word-break: auto-phrase;
}

.site-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* 濃紺地でロゴが沈むため白い台紙に載せる */
.site-footer__logo {
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--base);
}

/* インライン画像の下の隙間をなくす */
.site-footer__logo img {
	display: block;
	width: var(--wp--custom--logo-width--footer);
	height: auto;
}

.site-footer__contact {
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

.site-footer__contact-label {
	display: inline-block;
	padding-inline: 0.2em;
	border: 1px solid currentColor;
	line-height: 1.4;
}

.site-footer__sep {
	margin-inline: 1em;
}

/* 5. 下層ページの本文（勧誘方針・権限明示・プライバシーポリシー） */

/* 本文とフッターの間。page.html に限る（ほかは中のセクションが余白を持つ） */
.site-main--page {
	padding-block-end: var(--wp--preset--spacing--60);
}

/* --- ページ見出し: 左に濃紺の縦線 --- */

.wp-block-heading.policy-title {
	margin-block-end: 1em;
	padding-inline-start: 0.5em;
	border-inline-start: 5px solid var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xx-large);
	/* SP で2行に折れても詰まりすぎない行間 */
	line-height: 1.3;
}

.policy-title + .policy-lead {
	margin-block-start: 0;
}

/* --- 見出し下の区切り線（濃紺 3px） --- */

/* コアの幅 100px と透過を打ち消す（max-width は constrained に任せる） */
.wp-block-separator.policy-rule {
	width: 100%;
	margin-block: 1.5rem 2.5rem;
	border: 0;
	border-block-start: 3px solid var(--wp--preset--color--brand);
	opacity: 1;
}

.policy-title + .policy-rule {
	margin-block-start: 0;
}

/* --- 番号付きの見出し・章（濃紺）と、条の見出し（灰・字下げ） --- */

.wp-block-heading.policy-heading {
	margin-block: 2.75rem 0;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

.policy-rule + .policy-heading {
	margin-block-start: 0;
}

.wp-block-heading.policy-article {
	margin-block: 2rem 0;
	padding-inline-start: var(--wp--custom--policy-indent);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
	color: var(--wp--preset--color--contrast);
}

.policy-heading + .policy-article {
	margin-block-start: 0.75rem;
}

/* --- 本文: 見出しより一段字下げ。段落の間は1行あける --- */

.policy-text {
	padding-inline-start: var(--wp--custom--policy-indent);
	letter-spacing: var(--wp--custom--letter-spacing--normal);
}

.policy-text + .policy-text {
	margin-block-start: 1lh;
}

:where(.policy-heading, .policy-article) + .policy-text {
	margin-block-start: 0.5em;
}

/* --- 署名（代理店名など） --- */

.policy-sign {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--brand);
}

/* --- 表（権限明示）: 見出し行は濃紺、セルは灰の罫線 --- */

/* constrained の中央寄せ（!important）に勝ち、本文の端＋字下げに置く */
.wp-block-table.policy-table {
	max-width: 38rem;
	margin-block-start: 1.25rem;
	margin-inline: calc(
			max(0px, (100% - var(--wp--style--global--content-size)) / 2) +
				var(--wp--custom--policy-indent)
		)
		auto !important;
}

.wp-block-table.policy-table table {
	border-collapse: collapse;
	table-layout: fixed;
}

.wp-block-table.policy-table :where(th, td) {
	padding: 1.1em 1.1em;
	border: 1px solid var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	letter-spacing: var(--wp--custom--letter-spacing--normal);
	vertical-align: middle;
}

.wp-block-table.policy-table thead {
	border-block-end: 0;
}

.wp-block-table.policy-table th {
	padding-block: 0.3em;
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-align: center;
}

/* 1列目（保険会社名）は中央揃え */
.wp-block-table.policy-table td:first-child {
	width: 41%;
	text-align: center;
}