@charset "UTF-8";
/*
 * WARP Balance — メインスタイル
 *
 * 色・文字サイズ・余白は theme.json のプリセット変数を使う。
 * ここに数値を直接書くのは、プリセットで表現できない装飾だけにすること。
 */

/* ==========================================================================
   1. 土台
   ========================================================================== */

:root {
	--wb-header-h: 76px;
	--wb-ease: cubic-bezier(.22, .61, .36, 1);

	/* --- 余白の基準。ここ以外に数値を散らさないこと --- */

	/* 画面の左右に必ず残す余白。theme.json のルートパディングと同じ値にしてある。
	   ここがズレると、自前セクションと WP ブロックの左端が揃わなくなる。 */
	--wb-gutter: clamp(1.25rem, 5vw, 3rem);

	/* コンテンツの最大幅。theme.json の wideSize と同じ */
	--wb-max: 1200px;

	/* セクションの上下。3段階だけ使う */
	--wb-section: clamp(3.5rem, 6.5vw, 5.5rem);     /* 通常のセクション */
	--wb-section-sm: clamp(2.5rem, 4.5vw, 3.5rem);  /* 詰めたいセクション */
	--wb-block: clamp(1.75rem, 3vw, 2.5rem);        /* セクション見出しと中身の間 */
	--wb-item: clamp(2.5rem, 5vw, 4rem);            /* 並んだ項目どうしの間 */
}

/* WordPress は最上位ブロックの間に既定の隙間（--wp--style--block-gap）を入れる。
   そのせいでヘッダーと本文の間、色帯と色帯の間に 24px の白い線が出ていた。
   このテーマでは余白をセクション側の padding で管理するので、ここでは足さない。 */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* 下層ページの本文ブロックなど、上下に同じ余白を持たせたい箱 */
.wb-section { padding-block: var(--wb-section); }

/* すべてのセクションの中身はこの器に入れる */
.wb-container {
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
}

@media (max-width: 781px) {
	:root { --wb-header-h: 64px; }
}

/* WordPress はブロックの要素にしか border-box を当てない。
   テーマが素で書いた要素（ボタン・フォーム等）で width:100% + padding が
   はみ出す原因になるため、全体に効かせる。 */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wb-header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	font-feature-settings: "palt" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* 日本語は行末の約物が詰まって見えるので、見出しだけ字間を締める */
h1, h2, h3, h4 {
	font-feature-settings: "palt" 1;
	text-wrap: pretty;
}

/* 「ご相談くだ／さい」のような不自然な折り返しを防ぐ。
   対応していないブラウザでは従来どおりの折り返しになる。 */
h1, h2, h3, h4,
.wb-hero__title, .wb-hero__text,
.wb-cta p, .wb-srv__ja, .wb-srv__lead,
.wb-about__title, .wb-steps__ja, .wb-tagline__ja, .wb-quote p,
.wb-example__rows dd, .wb-content td {
	word-break: auto-phrase;
}

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

::selection {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 3px;
}

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

.wb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* 半透明＋ぼかしだと、スクロール中に下の文字やフッターのロゴが透けて二重に見えた */
	background: #fff;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms var(--wb-ease), box-shadow 200ms var(--wb-ease);
}

/* スクロールすると境界を出す（main.js が付与） */
.wb-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 6px 24px rgba(31, 42, 46, .05);
}

.wb-header .wp-block-site-logo img {
	width: auto;
	height: clamp(22px, 2.2vw, 27px);
	transition: opacity 200ms var(--wb-ease);
}

.wb-header .wp-block-site-logo a:hover img { opacity: .72; }

/* グローバルナビ */
.wb-nav .wp-block-navigation__container {
	gap: clamp(1rem, 2.2vw, 2rem);
}

.wb-nav .wp-block-navigation-item__content {
	position: relative;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--wp--preset--color--ink);
	padding-block: .4rem;
	text-decoration: none;
}

/* 下線をホバーで伸ばす。現行サイトの「現在地に下線」を洗練させたもの */
.wb-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 240ms var(--wb-ease);
}

.wb-nav .wp-block-navigation-item__content:hover::after,
.wb-nav .current-menu-item > .wp-block-navigation-item__content::after,
.wb-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.wb-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary-dark); }

/* サブメニュー */
.wb-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: .5rem;
	min-width: 15rem;
	background: var(--wp--preset--color--base);
}

.wb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--sm);
	padding: .6rem .9rem;
}

.wb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }

.wb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
}

/* ヘッダー内のCTAボタン */
.wb-header .wp-block-button__link {
	font-size: var(--wp--preset--font-size--xs);
	padding: .75em 1.6em;
	box-shadow: 0 4px 14px rgba(70, 153, 166, .28);
	transition: transform 200ms var(--wb-ease), box-shadow 200ms var(--wb-ease), background-color 200ms var(--wb-ease);
}

.wb-header .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(70, 153, 166, .34);
}

/* モバイルメニュー（オーバーレイ）
   ヒーロー上では通常のナビ文字を白にしているため、
   開いたメニューの中では必ず濃い色へ戻す。白背景に白文字になる。 */

.wb-nav .wp-block-navigation__responsive-container-open {
	padding: .4rem;
	color: var(--wp--preset--color--ink);
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background: var(--wp--preset--color--base);
	align-items: stretch;
	justify-content: flex-start;
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
	padding-block: 1rem clamp(2rem, 8vh, 3.5rem);
	max-width: none;
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
	padding: .4rem;
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
}

/* 親項目 */
.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: .04em;
	text-shadow: none;
	padding-block: 1.05rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* サブメニューは枠を外して字下げで表す */
.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0;
	background: transparent;
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--text);
	padding: .85rem 0 .85rem 1.25rem;
	border-radius: 0;
	position: relative;
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: .5rem;
	height: 1px;
	background: var(--wp--preset--color--primary-soft);
}

.wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
}

/* 開いている間はロゴを通常色に戻す（ヒーロー上の白抜きを解除） */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wb-header .wp-block-site-logo img { opacity: 1; }
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wb-header .wp-block-site-logo a { background-image: none; }

/* ==========================================================================
   4. ページ見出し（下層の共通ヘッダー）
   ========================================================================== */

.wb-pagehead {
	position: relative;
	background: var(--wp--preset--color--primary-tint);
	padding-block: clamp(3rem, 8vw, 5.5rem);
	text-align: center;
	overflow: hidden;
}

/* 背景にブランドの円弧をうっすら置く */
.wb-pagehead::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -8%;
	width: 46rem;
	height: 46rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(70, 153, 166, .13) 0%, rgba(70, 153, 166, 0) 68%);
	pointer-events: none;
}

.wb-pagehead__title {
	position: relative;
	font-size: var(--wp--preset--font-size--xxl);
	color: var(--wp--preset--color--primary-deep);
	margin: 0;
	max-width: 24em;
	margin-inline: auto;
	line-height: 1.45;
}

.wb-pagehead__sub {
	position: relative;
	margin: .75rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .2em;
	text-transform: uppercase;
	/* 淡い帯の上では primary(2.92) だと薄すぎるので濃い方を使う */
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
}

/* パンくず */
.wb-breadcrumb {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wb-breadcrumb__inner {
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
	padding-block: .85rem;
}

.wb-breadcrumb ol {
	display: flex;
	flex-wrap: nowrap;
	min-width: 0;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.8;
}

/* 長いページ名でも1行に収める。親は縮めず、今いるページ名だけ末尾を「…」で切る
   （折り返すと区切りの「／」が行頭に来て崩れて見えた） */
.wb-breadcrumb li { flex: none; white-space: nowrap; }
.wb-breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.wb-breadcrumb li + li::before {
	content: "／";
	margin-right: .5rem;
	color: var(--wp--preset--color--line);
}

	.wb-breadcrumb a { color: inherit; text-decoration: none; }
.wb-breadcrumb a:hover { color: var(--wp--preset--color--primary-dark); text-decoration: underline; }

/* 今いるページは色を落とさず、リンクと区別する */
.wb-breadcrumb [aria-current="page"] { color: var(--wp--preset--color--ink); font-weight: 700; }

/* ==========================================================================
   5. セクション見出し
   ========================================================================== */

.wb-sectionhead {
	text-align: center;
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.wb-sectionhead__en {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	/* 小さい文字なので AA は 4.5 必要。primary(3.30) では足りない */
	color: var(--wp--preset--color--primary-dark);
	margin-bottom: .6rem;
}

.wb-sectionhead__ja {
	font-size: var(--wp--preset--font-size--xxl);
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* ブロックスタイル: セクション見出し（中央・下線） */
.is-style-wb-section {
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1.75rem;
}

.is-style-wb-section::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
}

/* ブロックスタイル: 左バー見出し */
.is-style-wb-bar {
	position: relative;
	padding-left: .95rem;
	border-left: 4px solid var(--wp--preset--color--primary);
	line-height: 1.5;
}

/* ==========================================================================
   6. 本文まわり
   ========================================================================== */

.wb-content > * + * { margin-block-start: 1.5rem; }

.wb-content p { line-height: 2.05; }

.wb-content h2 { margin-block-start: clamp(2.75rem, 6vw, 4rem); }
.wb-content h3 { margin-block-start: clamp(2rem, 4vw, 2.75rem); }
.wb-content h4 { margin-block-start: 1.75rem; }

/* リスト */
.wb-content ul, .wb-content ol { padding-left: 1.4em; }
.wb-content li { margin-block: .5rem; line-height: 1.95; }
.wb-content li::marker { color: var(--wp--preset--color--primary); }

/* ブロックスタイル: チェックリスト */
.is-style-wb-check { list-style: none; padding-left: 0; }

.is-style-wb-check li {
	position: relative;
	padding-left: 2rem;
	margin-block: .85rem;
}

.is-style-wb-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-tint);
}

.is-style-wb-check li::after {
	content: "";
	position: absolute;
	left: .34rem;
	top: .82em;
	width: .48rem;
	height: .26rem;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* ブロックスタイル: 記号なしリスト */
.is-style-wb-plain { list-style: none; padding-left: 0; }
.is-style-wb-plain li { margin-block: 1rem; padding-left: 1rem; border-left: 2px solid var(--wp--preset--color--primary-soft); }

/* 引用 */
.wb-content blockquote {
	border-left: 3px solid var(--wp--preset--color--primary-soft);
	padding: .25rem 0 .25rem 1.5rem;
	color: var(--wp--preset--color--primary-deep);
}

/* 区切り線 */
.wp-block-separator { border-color: var(--wp--preset--color--line); opacity: 1; }
.wp-block-separator.is-style-wide { border-top-width: 1px; }

/* 画像 */
/* ギャラリーは入れ子の画像に角丸が届かないので、ここで当てる */
.wp-block-gallery.is-style-wb-rounded img,
.wb-content .wp-block-gallery img { border-radius: var(--wp--custom--radius--md); }

.wp-block-column .wp-block-image,
.wp-block-column .wp-block-image img { width: 100%; }

.is-style-wb-rounded img,
.wb-content .wp-block-image img { border-radius: var(--wp--custom--radius--md); }

.wb-content figcaption {
	margin-top: .75rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ==========================================================================
   7. テーブル / 料金表
   ========================================================================== */

.wp-block-table { overflow-x: auto; }

.wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-table th,
.wp-block-table td {
	padding: .95rem 1.15rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: middle;
	line-height: 1.7;
}

.wp-block-table tr:last-child th,
.wp-block-table tr:last-child td { border-bottom: 0; }

.wp-block-table thead th {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-deep);
	font-weight: 700;
	letter-spacing: .04em;
}

.wp-block-table tbody th {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	width: 34%;
	white-space: nowrap;
}

.wp-block-table tbody tr:hover td { background: rgba(234, 243, 244, .5); }

/* ブロックスタイル: 料金表（金額を右寄せ・大きく） */
.is-style-wb-price td:last-child {
	text-align: right;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--primary-deep);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.wp-block-table th,
	.wp-block-table td { padding: .75rem .85rem; }
	.wp-block-table tbody th { width: 40%; white-space: normal; }
}

/* ==========================================================================
   8. カード / ボックス
   ========================================================================== */

.is-style-wb-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--wp--preset--shadow--soft);
}

.is-style-wb-note {
	background: var(--wp--preset--color--base-alt);
	border-left: 4px solid var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--sm);
	padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.25rem, 3vw, 1.75rem);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
}

.is-style-wb-note > *:first-child { margin-top: 0; }
.is-style-wb-note > *:last-child { margin-bottom: 0; }

/* カード並び: 高さを揃える */
.wb-cardgrid .wp-block-column { display: flex; }

@media (max-width: 781px) {
	.wb-cardgrid { gap: var(--wp--preset--spacing--30); }
}

/* ==========================================================================
   9. お知らせ一覧
   ========================================================================== */

.wb-newslist { list-style: none; margin: 0; padding: 0; }

.wb-newslist li { border-bottom: 1px solid var(--wp--preset--color--line); }
.wb-newslist li:first-child { border-top: 1px solid var(--wp--preset--color--line); }

.wb-newsitem {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: baseline;
	gap: 1.25rem;
	padding: 1.4rem .5rem;
	text-decoration: none;
	color: inherit;
	transition: background-color 220ms var(--wb-ease), padding-left 220ms var(--wb-ease);
}

.wb-newsitem:hover {
	background: var(--wp--preset--color--base-alt);
	padding-left: 1rem;
}

.wb-newsitem__date {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wb-newsitem__cat {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-tint);
	border-radius: 999px;
	padding: .3em 1em;
	white-space: nowrap;
}

.wb-newsitem__title {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	line-height: 1.7;
	transition: color 200ms var(--wb-ease);
}

.wb-newsitem:hover .wb-newsitem__title { color: var(--wp--preset--color--primary-dark); }

@media (max-width: 600px) {
	.wb-newsitem {
		grid-template-columns: auto 1fr;
		gap: .5rem .85rem;
		padding-block: 1.15rem;
	}
	.wb-newsitem__title { grid-column: 1 / -1; }
}

/* クエリループ側（記事カード） */
.wb-postcard {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: clamp(1.25rem, 3vw, 1.75rem) 1rem;
	margin-inline: -1rem;
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color 220ms var(--wb-ease);
}

/* 行のどこかにカーソルがあることを示す。押せるのはタイトルだけだが、
   行として認識できたほうが一覧を追いやすい。 */
.wb-postcard:hover { background: var(--wp--preset--color--base-alt); }

.wb-postcard .wp-block-post-title a { text-decoration: none; }
.wb-postcard .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

.wb-postcard .wp-block-post-date,
.wb-postcard .wp-block-post-terms,
.wb-postcard .wp-block-post-terms a {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	letter-spacing: .06em;
}

.wb-postcard .wp-block-post-terms a:hover { color: var(--wp--preset--color--primary); }

/* ==========================================================================
   10. CTA / フッター
   ========================================================================== */

.wb-cta {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--primary-dark);
	background-image: var(--wp--preset--gradient--primary-fade);
	color: #fff;
	text-align: center;
	padding-block: var(--wb-section);
}

.wb-cta::before {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -60%;
	width: 34rem;
	height: 34rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	pointer-events: none;
}

.wb-cta__inner {
	position: relative;
	width: min(100% - var(--wb-gutter) * 2, 880px);
	margin-inline: auto;
}

.wb-cta__label {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}

.wb-cta__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	line-height: 1.45;
	color: #fff;
}

.wb-cta__text {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 2;
	color: rgba(255, 255, 255, .9);
}

.wb-cta__btn {
	background: #fff;
	color: var(--wp--preset--color--primary-deep);
	box-shadow: 0 10px 30px rgba(15, 40, 46, .22);
}

.wb-cta__btn:hover {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-deep);
}

.wb-footer {
	background: var(--wp--preset--color--base-alt);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wb-section-sm);
	font-size: var(--wp--preset--font-size--sm);
}

.wb-footer .wp-block-site-logo img { height: 26px; width: auto; }

/* 3列を等幅で並べる。折り返したときも左端が揃う */
.wb-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 781px) {
	.wb-footer__cols { grid-template-columns: 1fr; gap: 2.5rem; }
}

.wb-footer__heading {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* 淡い背景の上では primary(3.11) だと薄いので濃い方 */
	color: var(--wp--preset--color--primary-dark);
	margin: 0 0 1rem;
}

.wb-footer .is-style-wb-plain li {
	margin-block: 0;
	padding-left: 0;
	border-left: 0;
}

.wb-footer .is-style-wb-plain li + li { margin-top: .55rem; }

.wb-footer a { color: var(--wp--preset--color--text); text-decoration: none; }
.wb-footer a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

.wb-footer__copy {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	letter-spacing: .06em;
}

/* アイコンだけのリンクは押しやすい大きさを確保する */
.wb-footer .wp-social-link {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.wb-footer .wp-social-link .wp-block-social-link-anchor {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.wb-footer .wp-social-link:hover { color: var(--wp--preset--color--primary); }

/* ==========================================================================
   11. スクロール表示アニメーション（撤去済み）
   ==========================================================================
   以前は画面に入った要素を translateY で持ち上げて出していたが、
   スクロール中に位置がずれ、カードが次のセクションに食い込む・
   見出しとカードの間に巨大な空白ができる、といった崩れが出た。
   計測にも影響して原因の特定を難しくしたため、丸ごとやめる。
   クラス自体はマークアップに残っているので、無効化だけしておく。 */

.wb-reveal {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   12. ページ遷移（SPA風）
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: wb-fade-out 180ms var(--wb-ease) both; }
::view-transition-new(root) { animation: wb-fade-in 280ms var(--wb-ease) both; }

@keyframes wb-fade-out { to { opacity: 0; } }
@keyframes wb-fade-in { from { opacity: 0; transform: translateY(8px); } }

/* 読み込み中の細いバー */
.wb-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--wp--preset--color--primary);
	z-index: 999;
	opacity: 0;
	transition: width 200ms linear, opacity 200ms linear;
}

.wb-progress.is-active { opacity: 1; }

/* ==========================================================================
   13. フォーム（Contact Form 7 / MW WP Form 共通）
   ========================================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea,
.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form input[type="tel"],
.mw_wp_form select,
.mw_wp_form textarea {
	width: 100%;
	padding: .85rem 1rem;
	font-size: 16px; /* iOSで拡大されないように16px以上を保つ */
	font-family: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	transition: border-color 200ms var(--wb-ease), box-shadow 200ms var(--wb-ease);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.mw_wp_form input:focus,
.mw_wp_form select:focus,
.mw_wp_form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(70, 153, 166, .16);
}

.wpcf7 textarea, .mw_wp_form textarea { min-height: 11rem; resize: vertical; }

.wpcf7 input[type="submit"],
.mw_wp_form input[type="submit"],
.mw_wp_form button[type="submit"] {
	appearance: none;
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 1em 3em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .08em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(70, 153, 166, .28);
	transition: background-color 200ms var(--wb-ease), transform 200ms var(--wb-ease);
}

.wpcf7 input[type="submit"]:hover,
.mw_wp_form input[type="submit"]:hover,
.mw_wp_form button[type="submit"]:hover {
	background: var(--wp--preset--color--primary-deep);
	transform: translateY(-1px);
}

.wpcf7 .wpcf7-list-item { margin-left: 0; margin-right: 1.25rem; }

.wpcf7-not-valid-tip {
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--xs);
	margin-top: .4rem;
}

.wpcf7 form .wpcf7-response-output {
	border-radius: var(--wp--custom--radius--sm);
	border-width: 1px;
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--sm);
}

/* 必須の印。何が必須か、送信する前に分かるようにする */
.wb-required {
	display: inline-block;
	margin-left: .6em;
	padding: .2em .65em;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.6;
	color: #fff;
	background: var(--wp--preset--color--danger);
	border-radius: 3px;
	vertical-align: 2px;
}

/* ==========================================================================
   14. VKブロックの見た目をテーマに合わせる
   ========================================================================== */

.vk_button .vk_button_link {
	border-radius: 999px !important;
	font-weight: 700;
	letter-spacing: .06em;
}

.vk_ancestorPageList,
.vk_childPageList {
	border-radius: var(--wp--custom--radius--md);
	border-color: var(--wp--preset--color--line);
	overflow: hidden;
}

.vk_ancestorPageList_title {
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

/* ==========================================================================
   15. 印刷
   ========================================================================== */

@media print {
	.wb-header, .wb-footer, .wb-cta, .wb-progress { display: none !important; }
	body { font-size: 11pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* ==========================================================================
   16. お問い合わせページの連絡手段ボタン
   ========================================================================== */

.wb-linebtn, .wb-telbtn, .wb-formbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .85em 1.2em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background-color 200ms var(--wb-ease), color 200ms var(--wb-ease), transform 200ms var(--wb-ease);
}

.wb-linebtn:hover, .wb-telbtn:hover, .wb-formbtn:hover { transform: translateY(-1px); }

/* LINE の緑。公式色 #06c755 は白文字とのコントラストが 2.26 しかないため、
   同系統で AA(4.5) を満たす濃さに落としている。 */
.wb-linebtn { background: #0a7f3a; color: #fff; }
.wb-linebtn:hover { background: #097434; color: #fff; }

.wb-telbtn {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.wb-telbtn:hover { background: var(--wp--preset--color--primary-deep); color: #fff; }

.wb-formbtn {
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
}
.wb-formbtn:hover { background: var(--wp--preset--color--primary); color: #fff; }

/* カードを縦に伸ばして高さを揃える */
.wb-cardgrid .wp-block-column > .is-style-wb-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	/* 列(display:flex)の中で中身の幅まで縮み、カードの幅が不揃いになっていた */
	flex: 1 1 auto;
	min-width: 0;
}

/* WordPress の constrained レイアウトは子に margin-inline:auto を !important 付きで当てる。
   カードを flex にすると、この auto マージンが「中央寄せ」として効いてしまい、
   見出しとリンクだけが中央に寄っていた（本文だけ左揃えでちぐはぐだった）。
   コア側が !important なので、こちらも同じ強さで打ち消す。 */
.wb-cardgrid .wp-block-column > .is-style-wb-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}

.wb-cardgrid .wp-block-column > .is-style-wb-card > *:nth-last-child(2) { margin-bottom: auto; }

/* ==========================================================================
   17. MW WP Form のレイアウト
   ==========================================================================
   このプラグインは <dl><dt>ラベル</dt><dd>入力欄</dd></dl> で出力する。
   dd にブラウザ既定の左マージン(40px)が付き、ラベルと入力欄がズレていた。 */

.mw_wp_form dl {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.mw_wp_form dt {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--wp--preset--color--ink);
}

.mw_wp_form dd {
	margin: 0;
}

/* ラジオ・チェックボックスを押しやすい大きさにする */
.mw_wp_form .horizontal-item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: .25rem 1.5rem .25rem 0;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.mw_wp_form input[type="radio"],
.mw_wp_form input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.mw_wp_form .horizontal-item + .horizontal-item { margin-left: 0; }

/* 送信ボタンまわり */
.mw_wp_form .wb-submit,
.mw_wp_form input[type="submit"],
.mw_wp_form button[type="submit"] {
	min-width: 14rem;
	padding: 1.05em 3em;
}

.mw_wp_form input[type="submit"] + input[type="submit"] { margin-left: .75rem; }

/* 送信ボタンの行だけ上に余白を足して区切る */
.mw_wp_form form > input[type="submit"],
.mw_wp_form form > .wb-submitrow {
	margin-top: var(--wp--preset--spacing--40);
}

/* エラー表示 */
.mw_wp_form .error {
	display: block;
	margin-top: .45rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--danger);
}

/* 確認画面 */
.mw_wp_form_confirm dd {
	padding: .75rem 1rem;
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--sm);
}

.wb-formnote {
	display: block;
	margin-top: .4rem;
	font-size: var(--wp--preset--font-size--xs);
}

.wb-formnote a { color: var(--wp--preset--color--muted); text-decoration: underline; }
.wb-formnote a:hover { color: var(--wp--preset--color--primary); }

/* ==========================================================================
   18. ページ送り
   ========================================================================== */

.wp-block-query-pagination {
	gap: .4rem;
	align-items: center;
}

.wp-block-query-pagination-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: .7rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: background-color 200ms var(--wb-ease), color 200ms var(--wb-ease);
}

.wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-query-pagination .current {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
}

/* 前後の記事へのリンク */
.wp-block-post-navigation-link {
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-post-navigation-link a { text-decoration: none; font-weight: 700; }
.wp-block-post-navigation-link a:hover { text-decoration: underline; }

/* ==========================================================================
   19. ヘッダーのCTAを画面幅で出し分ける
   ==========================================================================
   「ご予約・お問い合わせ」はスマートフォンでは2行に折り返して
   ヘッダーが極端に高くなっていたため、狭い画面では短いラベルにする。 */

.wb-header__cta .wp-block-button__link,
.wb-header__cta-sp .wp-block-button__link { white-space: nowrap; }

/* .wp-block-buttons の display:flex と同じ強さだと読み込み順で負けるため、
   .wb-header を前置して確実に勝たせる */
.wb-header .wb-header__cta-sp { display: none; }

@media (max-width: 782px) {
	.wb-header .wb-header__cta { display: none; }
	.wb-header .wb-header__cta-sp { display: flex; }
	.wb-header .wb-header__cta-sp .wp-block-button__link { padding: .7em 1.4em; }
}

/* ==========================================================================
   20. ナビがハンバーガーに変わる幅を広げる
   ==========================================================================
   コアの navigation ブロックは 600px でハンバーガーに切り替わるが、
   このサイトは項目名が長く、600〜900px ではナビが2〜3行に折り返して
   ヘッダーが 144px まで伸びていた。切り替えを 900px に引き上げる。 */

@media (min-width: 600px) and (max-width: 900px) {
	.wb-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.wb-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wb-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 200;
	}
}

/* ==========================================================================
   21. ギャラリーの列数
   ==========================================================================
   コアの既定は3列のままなので、スマートフォンでは1枚が極端に小さくなる。 */

@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 1rem) / 2);
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image {
		width: 100%;
	}
}

/* 表が狭い画面で潰れないように、横スクロールできることを示す。
   ただし本文の幅が 20rem を下回る端末では、10px ほどのためだけに
   横スクロールが出て使いにくい。枠に収まる分は折り返させる。 */
@media (max-width: 600px) {
	.wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.wp-block-table table { min-width: min(20rem, 100%); }
}

/* ==========================================================================
   22. 記事の前後リンク
   ==========================================================================
   ただのテキストリンクが並ぶだけで、どちらへ進むのか分かりにくかった。 */

.wb-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.wb-postnav .wp-block-post-navigation-link {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.wb-postnav .wp-block-post-navigation-link a {
	display: block;
	padding: 1.1rem 1.35rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	line-height: 1.7;
	transition: border-color 200ms var(--wb-ease), background-color 200ms var(--wb-ease);
}

.wb-postnav .wp-block-post-navigation-link a:hover {
	border-color: var(--wp--preset--color--primary-soft);
	background: var(--wp--preset--color--base-alt);
}

/* 「前のお知らせ」「次のお知らせ」の見出し部分を小さく置く */
.wb-postnav .wp-block-post-navigation-link__label {
	display: block;
	margin-bottom: .35rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wp--preset--color--primary-dark);
}

.wb-postnav__next { text-align: right; }

/* 片方しか無いときも列が崩れないように */
.wb-postnav__next:only-child { grid-column: 2; }

@media (max-width: 600px) {
	.wb-postnav { grid-template-columns: minmax(0, 1fr); }
	.wb-postnav__next { text-align: left; }
	.wb-postnav__next:only-child { grid-column: 1; }
}

/* サブメニューの開閉ボタンが 10x10 しかなく押しづらかった */
.wb-nav .wp-block-navigation__submenu-icon {
	padding: .5rem;
	margin-left: -.2rem;
}

/* ==========================================================================
   タップ領域の確保（2026-09-05）

   指で押す操作は、見た目が小さくても押せる範囲は 44px 欲しい。
   見た目を変えずに、疑似要素で当たり判定だけを広げる。
   ========================================================================== */

/* お知らせ一覧の記事タイトル。文字の高さは 22px しかなく、指では狙いにくい。
   カード全体を押せるようにする（見た目は変えない）。 */
.wb-postcard { position: relative; }

.wb-postcard .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* カード内のカテゴリリンクは、上に乗せて個別に押せるようにする */
.wb-postcard .wp-block-post-terms a { position: relative; z-index: 1; }

/* ロゴのリンク。画像の高さがそのまま当たり判定になるので、上下に余白を足して
   24px を割らないようにする（見た目の位置は変わらない） */
.wp-block-site-logo a {
	display: inline-block;
	padding-block: 6px;
	margin-block: -6px;
}

/* フッターの SNS アイコン。アイコン自体は 16px */
.wb-footer .wp-social-link { position: relative; }

.wb-footer .wp-social-link a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -14px;
	padding: 14px;
}

/* 本文中のリンク以外は、押せる高さを 44px 以上にする */
@media (pointer: coarse) {
	.wb-arrowlink,
	.wp-block-button.is-style-wb-arrow .wp-block-button__link {
		min-height: 44px;
	}
}

/* メニューの「▾」ボタン。中身が 16px しかなく指で狙えないので 24px 以上にする。
   見た目の矢印は変えず、押せる範囲だけ広げる。 */
.wb-header .wp-block-navigation__submenu-icon {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}