/*
 * 武蔵野台ワークテラス 子テーマの見た目
 *
 * 決まりごと
 * - 色・文字の大きさ・余白は theme.json の値（var(--wp--preset--…)）を使う。色コードを直接書かない。
 * - 強制的な上書き指定は使わない。効かないときは、親のクラスを付けて指定を強める。
 * - 特定のページだけに効く指定は作らない。部品（クラス名）単位で書く。
 *
 * 目次
 *  1. 全体
 *  2. ヘッダー
 *  3. ブロックスタイル（編集画面で選べる見た目）
 *  4. 部品（最初の画面、ページの見出し、相談内容を選ぶ、安心材料、写真と説明、手順、
 *          1日の流れ、問い合わせフォーム、電話・LINEの囲み、よくある質問、相談の呼びかけ）
 *     写真付きのカードは「3. ブロックスタイル」のカード（白）の続きにある。
 *  5. フッター
 *  6. スマホの画面下のボタン
 */

/* ---------- 1. 全体 ---------- */

html {
	scroll-padding-top: 6rem;
}

/* ヘッダー・本文・フッターのあいだに余計なすき間を作らない（各節が自分の余白を持つ） */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/*
 * 見出しは単語の途中で折り返さない。
 * 句読点や空白でだけ折り返し、行の長さをそろえる。収まらないときだけ単語の途中で折り返す。
 */
h1,
h2,
h3,
h4,
summary,
.wp-block-site-title {
	word-break: keep-all;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * 日本語のページでは、見出しも本文も「文節」（意味のまとまり）で折り返す。
 * 「お知／らせ」「確／認します」のような切れ方を防ぐ。対応ブラウザ（Chrome・Edge）のみ。
 */
:lang(ja) :is(h1, h2, h3, h4, .wp-block-site-title, p, li, dt, dd, figcaption, summary, .wp-block-button__link, .wt-mobile-bar a) {
	word-break: auto-phrase;
	overflow-wrap: break-word;
}

/* 本文の最後の行が1〜2文字だけにならないようにする（対応ブラウザのみ） */
p,
li,
figcaption {
	text-wrap: pretty;
}

/*
 * お知らせの題名は職員が書くので、区切りの印（<wbr>）は inc/blocks.php で自動で入れている。
 * WordPress が題名に付ける「どこでも折り返す」指定を打ち消し、印の所で折り返すようにする。
 * 行の長さはそろえない（そろえようとして、言葉の途中を選んで切ることがあるため）。
 * Chrome と Edge では、上の「文節で折り返す」指定のほうが優先される。
 */
.wp-block-post-title {
	word-break: keep-all;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

/*
 * 「wt-keep」を付けた見出しと、フッターの最後の1行は、句読点や空白の後でだけ折り返す
 * （「徒歩約／6分」「東陽／福祉会」のような切れ方を防ぐ）
 */
:lang(ja) .wt-keep,
.wt-keep,
:lang(ja) .wt-footer__copy,
.wt-footer__copy {
	word-break: keep-all;
}

/* 電話番号と、「wt-nobr」で囲んだ言葉（問い合わせ、手続き など）は途中で折り返さない */
.wt-phone,
[data-wt-tel],
.wt-nobr {
	white-space: nowrap;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-dark);
	outline-offset: 3px;
}

.has-primary-dark-background-color :focus-visible,
.wp-block-cover:not(.is-light) :focus-visible,
.is-style-wt-panel :focus-visible {
	outline-color: var(--wp--custom--focus);
}

img {
	height: auto;
}

/*
 * 相談ボタン（イエロー）の縁取り
 * 白や淡い背景の上では、濃い金色の縁で輪郭を見分けやすくする（theme.json で指定）。
 * 濃い背景の上では、背景との差で十分に見分けられるので縁を目立たせない。
 */
:is(.wp-block-cover:not(.is-light), .is-style-wt-panel, .has-primary-dark-background-color) .wp-block-button:not(.is-style-outline) .wp-element-button {
	border-color: var(--wp--preset--color--accent);
}

/* 写真の説明（キャプション） */
.wp-block-image figcaption {
	margin-top: 0.5rem;
	text-align: left;
}

/* ---------- 2. ヘッダー ---------- */

.wt-topbar__inner {
	gap: 0.25rem 1.5rem;
	min-height: var(--wp--custom--topbar-height);
	padding-block: 0.25rem;
	align-items: center;
}

.wt-topbar p,
.wt-topbar ul {
	margin: 0;
}

.wt-topbar__notice {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.wt-topbar__phone {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--small);
}

.wt-topbar__phone a {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}

.wt-topbar__hours {
	margin-left: 0.5rem;
	color: var(--wp--preset--color--primary-light);
}

.wt-topbar__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.wt-topbar__links a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.wt-topbar__links a:hover,
.wt-topbar__phone a:hover {
	text-decoration: underline;
}

.wt-header {
	background: var(--wp--preset--color--paper);
}

.wt-header > * + * {
	margin-block-start: 0;
}

.wt-header__bar {
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wt-header__main {
	gap: 0.75rem 2rem;
	padding-block: 0.75rem;
}

.wt-brand {
	gap: 0.75rem;
	align-items: center;
}

.wt-brand__mark {
	flex: none;
	color: var(--wp--preset--color--primary);
}

.wt-brand .wp-block-site-title {
	margin: 0;
}

.wt-brand__en {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.2;
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--muted);
}

.wt-header__nav {
	gap: 1.5rem;
	align-items: center;
}

.wt-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-block: 0.375rem;
}

.wt-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* 「見学・相談」「支援者の皆様へ」などは、スマホのメニューの中だけに出す。パソコンでは上部の帯とボタンにある。 */
.wt-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wt-nav-utility {
	display: none;
}

/* スマホのメニュー（背景色はメニューのブロックの設定で「背景」にしている） */
.wt-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.wt-nav .is-menu-open .wp-block-navigation__container {
	gap: 0.375rem;
	width: 100%;
	font-size: 1.125rem;
}

/* 主なページと、目的別のページのあいだに区切り線を入れる */
.wt-nav .is-menu-open .wp-block-navigation-item:not(.wt-nav-utility) + .wt-nav-utility {
	margin-top: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	width: 100%;
}

.wt-header__cta .wp-block-button__link {
	padding: 0.625rem 1.125rem;
	font-size: 0.9375rem;
}

/* パソコン: スクロールしても、メニューと相談ボタンの段を画面上部に残す（上部の帯だけ先に隠れる） */
@media (min-width: 782px) {
	.wt-header .wp-block-group.wt-topbar__inner {
		height: var(--wp--custom--topbar-height);
		min-height: 0;
		padding-block: 0;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: calc(-1 * var(--wp--custom--topbar-height));
		z-index: 40;
	}

	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: calc(32px - var(--wp--custom--topbar-height));
	}
}

/* タブレット幅: メニューを2段目に下ろす。 */
@media (min-width: 600px) and (max-width: 1099px) {
	.wt-header .wp-block-group.wt-header__nav {
		flex-basis: 100%;
		justify-content: space-between;
	}
}

/* スマホ幅: 上部の帯の電話番号とリンクは隠す（メニューと画面下のボタンにある）。 */
@media (max-width: 781px) {
	.wt-topbar__links,
	.wt-topbar__phone {
		display: none;
	}

	.wt-header .wp-block-group.wt-topbar__inner {
		justify-content: center;
	}
}

/* 編集画面の並べ方の指定（.is-layout-flex など）より優先させるため、親のクラスを付けて指定する */
@media (max-width: 599px) {
	.wt-header .wp-block-buttons.wt-header__cta {
		display: none;
	}

	.wt-header .wp-block-group.wt-header__main {
		flex-wrap: nowrap;
	}

	.wt-brand .wp-block-site-title {
		font-size: 1.125rem;
		letter-spacing: 0.04em;
	}

	.wt-brand__mark {
		width: 36px;
		height: 36px;
	}
}

/* ---------- 3. ブロックスタイル ---------- */

/* 見出しの上のラベル */
.is-style-wt-eyebrow {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--accent-dark);
}

.is-style-wt-eyebrow + .wp-block-heading {
	margin-block-start: 0.375rem;
}

.has-primary-dark-background-color .is-style-wt-eyebrow,
.wp-block-cover:not(.is-light) .is-style-wt-eyebrow,
.is-style-wt-panel .is-style-wt-eyebrow {
	color: var(--wp--preset--color--primary-light);
}

/* ブランドメッセージ（トップの「MESSAGE」の節。呼びかけの帯の一言は「見出しの上のラベル」の見た目のまま） */
.wt-message .wt-message__pair {
	margin-block-end: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--primary);
}

/* 注記 */
.is-style-wt-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* 次へ進むリンク */
.is-style-wt-more a {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 0.125rem;
}

.is-style-wt-more a::after {
	content: "\00a0→";
}

.is-style-wt-more a:hover {
	border-bottom-color: transparent;
}

/* カード（白） */
.is-style-wt-card {
	--wt-card-pad: clamp(1.25rem, 3vw, 1.75rem);
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	padding: var(--wt-card-pad);
}

/* 写真付きのカード: 最初の写真をカードの縁まで広げる */
.is-style-wt-card.wt-media-card {
	overflow: hidden;
}

.wt-media-card > .wp-block-image:first-child {
	margin: calc(-1 * var(--wt-card-pad)) calc(-1 * var(--wt-card-pad)) 1.25rem;
}

.is-style-wt-card > :first-child {
	margin-top: 0;
}

.is-style-wt-card > :last-child {
	margin-bottom: 0;
}

.is-style-wt-card .is-style-wt-eyebrow + .wp-block-heading {
	margin-block-start: 0.25rem;
}

/* 見出しにリンクがあるカードは、カード全体を押せるようにする。 */
.is-style-wt-card h3 a {
	color: inherit;
	text-decoration: none;
}

.is-style-wt-card h3 a::after {
	content: "\00a0→";
	color: var(--wp--preset--color--primary);
}

.is-style-wt-card h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-wt-card:has(h3 a):hover {
	border-color: var(--wp--preset--color--primary);
}

/* 囲み（濃い緑） */
.is-style-wt-panel {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius);
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.is-style-wt-panel :where(h2, h3, h4) {
	color: var(--wp--preset--color--white);
	margin-top: 0;
}

.is-style-wt-panel a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--white);
}

/* チェック付きの箇条書き */
.is-style-wt-check {
	list-style: none;
	padding-left: 0;
}

.is-style-wt-check li {
	position: relative;
	padding-left: 1.875em;
	margin-block: 0.625rem;
}

.is-style-wt-check li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.5em;
	width: 1em;
	height: 0.55em;
	border-left: 3px solid var(--wp--preset--color--primary);
	border-bottom: 3px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

.is-style-wt-panel .is-style-wt-check li::before {
	border-color: var(--wp--preset--color--primary-light);
}

/* 短い情報を横に並べる */
.is-style-wt-chips {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.is-style-wt-chips li {
	margin: 0;
	padding: 0.25rem 0.875rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* リンクの一覧（印なし） */
.is-style-wt-links {
	list-style: none;
	padding-left: 0;
}

.is-style-wt-links li {
	margin-block: 0.375rem;
}

/* ---------- 4. 部品 ---------- */

/* 見出しまわり: 説明文は読みやすい長さで折り返す */
.wt-section-head > p:not(.is-style-wt-eyebrow) {
	max-width: 44em;
}

/* --- 最初の画面（カバー。写真を動画に差し替えてもよい） --- */

/* 高さと余白はここで決める（画面の高さの82%、最大760px） */
.wt-hero.wp-block-cover {
	min-height: min(82vh, 760px);
	padding-block: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--white);
}

/* 文字の後ろだけを濃くし、写真の右側は明るく見せる */
.wt-hero.wp-block-cover > .wp-block-cover__background.has-background-dim {
	background-color: transparent;
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--primary-dark) 94%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--primary-dark) 80%, transparent) 36%,
		color-mix(in srgb, var(--wp--preset--color--primary-dark) 20%, transparent) 70%,
		transparent 100%
	);
	opacity: 1;
}

.wt-hero__inner {
	width: 100%;
}

.wt-hero__content {
	max-width: 36rem;
}

.wt-hero__content > :first-child {
	margin-top: 0;
}

.wt-hero__title {
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
	line-height: 1.3;
	text-shadow: 0 2px 16px color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent);
}

.wt-hero__lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.75;
}

.wt-hero .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

.wt-hero .is-style-wt-chips li {
	background: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent);
	border-color: transparent;
}

.wt-hero__note {
	margin-top: var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
}

/* スマホ: 写真は上の帯に収めて全体を見せ、その下の濃い緑に文字を置く */
@media (max-width: 781px) {
	.wt-hero.wp-block-cover {
		min-height: 0;
		padding-top: 15.5rem;
		padding-bottom: var(--wp--preset--spacing--50);
		align-items: flex-end;
		background-color: var(--wp--preset--color--primary-dark);
	}

	.wt-hero.wp-block-cover > .wp-block-cover__image-background {
		height: 15rem;
		bottom: auto;
	}

	.wt-hero.wp-block-cover > .wp-block-cover__background.has-background-dim {
		background-image: linear-gradient(
			180deg,
			transparent 0,
			transparent 9rem,
			var(--wp--preset--color--primary-dark) 15rem,
			var(--wp--preset--color--primary-dark) 100%
		);
	}
}

/* --- ページの見出し（トップ以外のページの最初の帯） --- */

.wt-page-head__inner > :first-child {
	margin-top: 0;
}

.wt-page-head .wt-page-head__title {
	margin-block: 0.375rem 0;
	color: var(--wp--preset--color--primary-dark);
	/* スマホでは少し小さくし、1文が1行に収まりやすくする */
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
}

.wt-page-head__lead {
	max-width: 40em;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.8;
}

/* 写真を横に置く見出し（初めての方へ など） */
.wt-page-head .wt-page-head__cols {
	gap: var(--wp--preset--spacing--50);
}

/* 写真と並べると列が狭くなるので、見出しの1文目が1行に収まる大きさにする */
.wt-page-head__cols .wt-page-head__title {
	font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
}

/* お知らせの記事の題名は、長くても読みやすいよう、ページの見出しより小さくする */
.wt-page-head .wt-page-head__title--post {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
}

.wt-page-head .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

.wt-page-head .wp-block-image {
	margin: 0;
}

/* 見出しの帯の下に置く横長の写真（施設・スタッフ など） */
.wt-page-head .wp-block-image.alignwide {
	margin-top: var(--wp--preset--spacing--50);
}

/* 住所（アクセス など） */
.wt-address {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.7;
}

/* --- 相談内容を選ぶ（同じページの窓口へ移るカード） --- */

.wt-routes-wrap {
	margin-top: var(--wp--preset--spacing--50);
}

.wt-routes__label {
	margin-bottom: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

/* 4枚を、スマホは1列、タブレットは2列、パソコンは4列に並べる（3枚と1枚に分かれないように） */
.wp-block-group.wt-routes {
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 600px) {
	.wp-block-group.wt-routes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wp-block-group.wt-routes {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 3枚のときは、タブレットとパソコンで3列にする（よくある質問 など） */
@media (min-width: 600px) {
	.wp-block-group.wt-routes:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- このページの内容（同じページの節へ移るリンクの並び） --- */

.wt-jump-links-wrap {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-list.wt-jump-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.wt-jump-links li {
	margin: 0;
}

.wt-jump-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 1.125rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
	text-decoration: none;
}

/* 下向きの印（同じページの下へ移ることを示す） */
.wt-jump-links a::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-25%) rotate(45deg);
}

.wt-jump-links a:hover {
	border-color: var(--wp--preset--color--primary);
}

/* 「次へ進むリンク」を横に並べる */
.wp-block-group.wt-link-row {
	gap: 0.75rem 2rem;
}

.wp-block-group.wt-route {
	position: relative;
	padding: 1rem 3rem 1rem 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
}

.wp-block-group.wt-route > * {
	margin-block: 0;
}

/* 右端の下向きの印（同じページの下へ移ることを示す） */
.wt-route::after {
	content: "";
	position: absolute;
	right: 1.375rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-75%) rotate(45deg);
}

.wt-route__who {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wt-route__link a {
	color: var(--wp--preset--color--primary-dark);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
}

/* カードのどこを押しても移れるようにする */
.wt-route__link a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.wt-route:hover {
	border-color: var(--wp--preset--color--primary);
}

@supports selector(:has(a)) {
	.wt-route:has(a:focus-visible) {
		outline: 3px solid var(--wp--preset--color--accent-dark);
		outline-offset: 2px;
	}

	.wt-route a:focus-visible {
		outline: none;
	}
}

/* --- 安心材料の帯 --- */

.wt-assure-band {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-group.wt-assure {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: 1rem 2rem;
}

.wt-assure__item > * {
	margin-block: 0;
}

.wt-assure__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.wt-assure__title::before {
	content: "✓";
	display: grid;
	place-items: center;
	flex: none;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 0.875rem;
	line-height: 1;
}

.wt-assure__text {
	margin-top: 0.25rem;
	padding-left: 2.125rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --- 写真と説明を並べる --- */

.wt-split {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.wt-num-list {
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-group.wt-num-item {
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: 1rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wt-num-item > * {
	grid-column: 2;
	margin-block: 0;
}

.wt-num-item > * + * {
	margin-top: 0.375rem;
}

.wt-num-item .wt-num-item__num {
	grid-column: 1;
	grid-row: 1 / span 2;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--accent-dark);
}

/* 写真を2枚並べる */
.wp-block-group.wt-photo-pair {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}

.wt-photo-pair .wp-block-image {
	margin: 0;
}

/* カードの並び: カードの数に合わせて、横幅いっぱいに均等に広げる */
.wp-block-group.wt-cards,
.wp-block-group.wt-steps {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/*
 * 3つ並べるとき（手順、3枚のカード）は、タブレットの幅でも1段に収める。
 * 2つと1つに分かれると、並びが途中で切れて見えるため。
 */
.wp-block-group.wt-steps {
	grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
}

/* 「:has」が使えないブラウザでも上の指定が消えないよう、分けて書く */
.wp-block-group.wt-cards:not(.wt-cards--long):has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
}

/*
 * 文章の長いカードの並び（クラス「wt-cards--long」を足す）。
 * 狭い列に長い文章を詰めると読みにくいので、パソコン以外では1列にする。
 */
.wp-block-group.wt-cards.wt-cards--long {
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.wp-block-group.wt-cards.wt-cards--long {
		grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	}

	/* 4枚のときは2枚ずつ2段にする（4列だと1列が狭く、長い文章が読みにくい） */
	.wp-block-group.wt-cards.wt-cards--long:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 6枚のカードは、パソコンで3枚ずつ2段、タブレットで2枚ずつ3段にする */
.wp-block-group.wt-cards:has(> :nth-child(6):last-child) {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* 4つの手順は、タブレットで2つずつ2段、パソコンで横1列にする（3つと1つに分かれないように） */
@media (min-width: 600px) {
	.wp-block-group.wt-steps:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wp-block-group.wt-steps:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 5つ以上の手順は、パソコンでは横1列、それより狭い幅では縦に並べる */
.wp-block-group.wt-steps:has(> :nth-child(5)) {
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.wp-block-group.wt-steps:has(> :nth-child(5)) {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 1023px) {
	.wt-steps:has(> :nth-child(5)) .wp-block-group.wt-step {
		display: grid;
		grid-template-columns: 2.75rem 1fr;
		column-gap: 1rem;
		padding-top: 1rem;
	}

	.wt-steps:has(> :nth-child(5)) .wt-step > * {
		grid-column: 2;
		margin-block: 0;
	}

	.wt-steps:has(> :nth-child(5)) .wt-step > * + * {
		margin-top: 0.25rem;
	}

	.wt-steps:has(> :nth-child(5)) .wt-step .wt-step__num {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
}

/* 補足の囲み */
.wt-callout {
	background: var(--wp--preset--color--silver);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius-small);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.wt-callout > :first-child,
.wt-callout .wp-block-column > :first-child {
	margin-top: 0;
}

.wt-callout .wp-block-image {
	margin: 0;
}

/* 写真と文章が縦に並ぶ幅では、写真が大きくなりすぎないよう高さを抑える */
@media (max-width: 781px) {
	.wt-callout .wp-block-image img {
		width: 100%;
		max-height: 15rem;
	}
}

/* 手順 */
.wt-step {
	border-top: 3px solid var(--wp--preset--color--primary);
	padding-top: 1.25rem;
}

.wt-step__num {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.wt-step h3 {
	margin-block-start: 0.75rem;
}

.wt-step p:last-child {
	margin-bottom: 0;
}

/* --- 1日の流れ（時刻と内容を、縦の線でつないで並べる） --- */
/* 時刻の列の幅と点の位置は、文字の大きさ（em）に合わせる。スマホで文字を大きくする設定にしても、時刻が「10:0／0」のように折り返さないようにするため */

.wt-timeline {
	margin-top: var(--wp--preset--spacing--40);
}

/* 行と行のあいだは、各行の下の余白だけにする（線が次の点まで届くように） */
.wp-block-group.wt-timeline > * + * {
	margin-block-start: 0;
}

.wp-block-group.wt-timeline__row {
	position: relative;
	display: grid;
	grid-template-columns: 3.5em 1fr;
	column-gap: 2rem;
	padding-bottom: 1.5rem;
}

.wp-block-group.wt-timeline__row > * {
	grid-column: 2;
	margin-block: 0;
}

.wp-block-group.wt-timeline__row > * + * {
	margin-top: 0.25rem;
}

.wt-timeline__row .wt-timeline__time {
	grid-column: 1;
	grid-row: 1 / span 2;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wt-timeline__row h3 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

/* 時刻の横の点と、次の時刻へつながる線 */
.wt-timeline__row::before {
	content: "";
	position: absolute;
	left: calc(3.5em + 1rem);
	top: calc(0.8em - 0.375rem);
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	transform: translateX(-50%);
}

.wt-timeline__row::after {
	content: "";
	position: absolute;
	left: calc(3.5em + 1rem);
	top: calc(0.8em + 0.5rem);
	bottom: -0.5rem;
	width: 2px;
	background: var(--wp--preset--color--line);
	transform: translateX(-50%);
}

.wt-timeline__row:last-child::after {
	display: none;
}

/* パソコンの幅では、写真の列をスクロールしても画面に残す */
@media (min-width: 782px) {
	.wp-block-column.wt-sticky {
		position: sticky;
		top: 7rem;
		align-self: flex-start;
	}
}

/* 相談ボタンと電話番号を横に並べる */
.wt-action-row {
	gap: 1rem 2rem;
	margin-top: var(--wp--preset--spacing--50);
}

.wt-action-row .wt-phone-line {
	margin: 0;
}

/* --- 問い合わせフォーム（Fluent Forms）。部品「wt-form」で囲んだ中だけを整える --- */

.wt-form-area {
	margin-top: var(--wp--preset--spacing--70);
}

.wt-form-cols {
	gap: var(--wp--preset--spacing--50);
}

/* フォームの色は、Fluent Forms の色の変数を theme.json の色に置き換えて合わせる */
.wt-form {
	--fluentform-primary: var(--wp--preset--color--primary);
	--fluentform-secondary: var(--wp--preset--color--ink);
	--fluentform-danger: var(--wp--custom--danger);
	--fluentform-border-color: var(--wp--custom--field-border);
	--fluentform-border-radius: var(--wp--custom--radius-small);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

.wt-form .fluentform {
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	line-height: 1.7;
}

.wt-form .fluentform .ff-el-group {
	margin-bottom: 1.5rem;
}

.wt-form .fluentform .ff-el-input--label {
	margin-bottom: 0.5rem;
}

.wt-form .fluentform .ff-el-input--label label {
	font-weight: 700;
}

/* 入力欄。文字を16px以上にして、スマホで画面が勝手に拡大されないようにする */
.wt-form .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.75rem 0.875rem;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.wt-form .fluentform textarea.ff-el-form-control {
	min-height: 10rem;
	resize: vertical;
}

.wt-form .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* 入力中の欄をはっきり示す（Fluent Forms は枠線の色を変えるだけで、囲みの線を消すため） */
.wt-form .fluentform .ff-el-form-control:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--accent-dark);
	outline-offset: 2px;
}

/* 選択肢と同意欄。押せる範囲を広げる */
.wt-form .fluentform .ff-el-form-check {
	margin-bottom: 0.25rem;
}

.wt-form .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding-block: 0.375rem;
	cursor: pointer;
}

.wt-form .fluentform .ff-el-form-check-label .ff-el-form-check-input {
	flex: none;
	top: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.25rem 0 0;
	accent-color: var(--wp--preset--color--primary);
}

.wt-form .fluentform .ff-el-is-error .text-danger {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * 送信ボタン。Fluent Forms がフォームごとに青い色を書き込むため、
 * それより強い指定で、サイトの相談ボタンと同じイエローにそろえる。
 */
.wt-form form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	min-width: min(100%, 16rem);
	min-height: 3.25rem;
	padding: 0.75rem 1.75rem;
	border: 2px solid var(--wp--preset--color--accent-dark);
	border-radius: var(--wp--custom--radius-small);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	opacity: 1;
}

.wt-form form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--wp--preset--color--accent-hover);
	opacity: 1;
}

/* 送信が終わったときのお知らせ */
.wt-form .ff-message-success {
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius-small);
	box-shadow: none;
}

.wt-form-area .is-style-wt-note {
	margin-top: 1rem;
}

.wp-block-column.wt-form-aside > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* --- 電話・LINEの囲み（[wt_contact_methods]） --- */

.wt-methods {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

.wt-methods p {
	margin: 0;
}

.wt-methods__title {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
}

.wt-methods__item {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wt-methods__label {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.wt-methods__tel a {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	text-decoration: none;
}

.wt-methods__hours,
.wt-methods__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wt-methods__line {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.625rem 1.25rem;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius-small);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}

/* よくある質問（開閉） */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 1rem;
}

.wp-block-details summary {
	position: relative;
	padding-right: 2.25rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "＋";
	position: absolute;
	right: 0.25rem;
	top: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.wp-block-details[open] summary::after {
	content: "－";
}

.wp-block-details > :not(summary) {
	margin-block-start: 0.75rem;
	color: var(--wp--preset--color--muted);
}

.wt-faq-list {
	max-width: 52rem;
}

.wt-faq-list .wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* 電話番号の1行（[wt_phone_line]）。明るい背景でも濃い背景でも使える */
.wt-phone-line {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.wt-phone-line a {
	color: inherit;
}

.wt-phone-line__hours {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.wp-block-cover:not(.is-light) .wt-phone-line__hours,
.has-primary-dark-background-color .wt-phone-line__hours {
	color: var(--wp--preset--color--primary-light);
}

/* 相談の呼びかけ（写真の帯） */
.wt-cta-band {
	text-align: center;
	color: var(--wp--preset--color--white);
}

.wt-cta-band .wp-block-buttons {
	justify-content: center;
}

/* 最後の呼びかけの帯は、直前の節にすき間なく続ける（色の付いた節のあとに、細い帯が見えないように） */
.wp-block-post-content > .wt-cta-band,
.wt-main > .wt-cta-band {
	margin-block-start: 0;
}

.wt-cover-note {
	margin-top: var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--primary-light);
}

/* お知らせの一覧 */
.wt-news-item {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wt-news-item .wp-block-post-title {
	margin-block: 0.25rem;
}

.wt-news-item .wp-block-post-title a {
	text-decoration: none;
}

/* ---------- 5. フッター ---------- */

.wt-footer a {
	text-decoration: none;
}

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

.wt-footer__name {
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	letter-spacing: 0.08em;
}

.wt-footer__heading {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary-light);
}

.wt-footer__copy {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-light);
}

/* 連絡先の一覧（[wt_contact_list]） */
.wt-contact-list {
	list-style: none;
	padding-left: 0;
	margin: 1rem 0 0;
}

.wt-contact-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.625rem;
	margin-block: 0.5rem;
}

.wt-contact-list__label {
	padding: 0 0.5rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
}

.wt-contact-list__item--tel a {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.wt-contact-list__hours {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- 6. スマホの画面下のボタン ---------- */

.wt-mobile-bar {
	display: none;
}

@media (max-width: 781px) {
	.wt-mobile-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: flex;
		gap: 0.5rem;
		padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--paper);
		border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 -4px 16px color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	}

	.wt-mobile-bar a {
		flex: 1;
		padding: 0.75rem 0.5rem;
		border-radius: var(--wp--custom--radius-small);
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.wt-mobile-bar__tel {
		background: var(--wp--preset--color--white);
		border: 2px solid var(--wp--preset--color--primary);
		color: var(--wp--preset--color--primary);
	}

	/* 申し込みのボタンを電話より広くとる（目立たせ、狭い画面でも「予約」だけが2行目に落ちないように） */
	.wt-mobile-bar .wt-mobile-bar__visit {
		flex-grow: 1.5;
	}

	.wt-mobile-bar__visit {
		background: var(--wp--preset--color--accent);
		border: 2px solid var(--wp--preset--color--accent-dark);
		color: var(--wp--preset--color--ink);
	}

	body {
		padding-bottom: 4.75rem;
	}
}