@charset "UTF-8";
/*
 * WARP Balance — ブランド表現のスタイル
 *
 * main.css が「土台と部品」、こちらが「トップページの見せ場」。
 * ロゴの構造（ジグザグ＝乱れた動き → なめらかな弧 → 到達点の円）を
 * サイト全体の装飾言語として使っている。
 */

/* ==========================================================================
   1. ブランドマーク
   ========================================================================== */

.wb-mark { display: block; width: 100%; height: auto; }

/* マークは実データの画像。以前はSVGで描き起こして線を描くアニメーションを
   付けていたが、そもそも形が本物と違っていたので画像に戻した。 */

/* ==========================================================================
   2. 共通パーツ（ラベル・矢印リンク・ボタン・タグ）
   ========================================================================== */

.wb-label {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 0 1.1rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	/* primary は白背景でも 3.30 しかない。ラベルは小さい文字なので濃い方を使う */
	color: var(--wp--preset--color--primary-dark);
}

.wb-label__num {
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--wp--preset--color--muted);
	padding-right: .85rem;
	border-right: 1px solid var(--wp--preset--color--line);
}

/* 番号を持たないラベル */
.wb-label--plain { gap: 0; }

.wb-label--light { color: rgba(255, 255, 255, .92); }
.wb-label--light .wb-label__num { color: rgba(255, 255, 255, .6); border-right-color: rgba(255, 255, 255, .28); }

/* 矢印つきのテキストリンク */
.wb-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--primary-deep);
	text-decoration: none;
	padding-bottom: .4rem;
	position: relative;
}

.wb-arrowlink span {
	position: relative;
	display: block;
	width: 2.2rem;
	height: 1px;
	background: currentColor;
	transition: width 320ms var(--wb-ease);
}

.wb-arrowlink span::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.wb-arrowlink:hover { color: var(--wp--preset--color--primary); }
.wb-arrowlink:hover span { width: 3.2rem; }

/* ボタン（ブロックエディタ外で使う素のボタン） */
.wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1.05em 2.6em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	transition: transform 240ms var(--wb-ease), background-color 240ms var(--wb-ease), box-shadow 240ms var(--wb-ease), color 240ms var(--wb-ease);
}

/* 白文字にブランド色(#4699a6)を敷くとコントラストが 3.30 しかなく AA(4.5) に
   届かない。1段濃い primary-dark(5.80) を既定にする。 */
.wb-btn--primary {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
	box-shadow: 0 10px 30px rgba(15, 40, 46, .28);
}

.wb-btn--primary:hover {
	background: var(--wp--preset--color--primary-deep);
	color: #fff;
	transform: translateY(-2px);
}

.wb-btn--ghost {
	border: 1.5px solid rgba(255, 255, 255, .8);
	color: #fff;
}

.wb-btn--ghost:hover {
	background: #fff;
	color: var(--wp--preset--color--primary-deep);
	transform: translateY(-2px);
}

/* 料金などの小さいタグ */
.wb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.wb-tags li {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .04em;
	color: var(--wp--preset--color--primary-deep);
	background: var(--wp--preset--color--primary-tint);
	border-radius: 999px;
	padding: .45em 1.1em;
	margin: 0;
}

/* ==========================================================================
   3. ヒーロー
   ========================================================================== */

.wb-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #fff;
}

.wb-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.wb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% 32%;
	/* ゆっくり寄っていく。動きを止めたい人には効かせない */
	animation: wb-kenburns 24s ease-out both;
}

@keyframes wb-kenburns {
	from { transform: scale(1.06); }
	to   { transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
	.wb-hero__media img { animation: none; transform: none; }
}

.wb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(96deg, rgba(14, 44, 51, .82) 0%, rgba(14, 44, 51, .56) 32%, rgba(14, 44, 51, .08) 66%),
		linear-gradient(180deg, rgba(14, 44, 51, .46) 0%, rgba(14, 44, 51, 0) 34%, rgba(14, 44, 51, .55) 100%);
	pointer-events: none;
}

/* 背後に薄く重ねる大きなマーク */
.wb-hero__mark {
	position: absolute;
	right: 0;
	top: 16%;
	width: min(42vw, 560px);
	max-width: calc(100% - var(--wb-gutter));
	color: rgba(255, 255, 255, .17);
	z-index: -1;
	pointer-events: none;
}

.wb-hero__inner {
	position: relative;
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
	padding-block: 0 clamp(5.5rem, 13vh, 8rem);
}

.wb-hero__lead {
	display: flex;
	flex-direction: column;
	margin: 0 0 clamp(1.25rem, 3vh, 2rem);
	font-size: clamp(.75rem, 1.1vw, .8125rem);
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
	line-height: 2.2;
}

.wb-hero__title {
	margin: 0 0 clamp(1.25rem, 3vh, 1.9rem);
	font-size: clamp(2.5rem, 6.4vw, 5.25rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: .01em;
	color: #fff;
	text-shadow: 0 2px 40px rgba(8, 30, 36, .35);
}

/* 行ごとに下から立ち上げる */
.wb-hero__line {
	display: block;
	overflow: hidden;
}

.wb-hero__line > span {
	display: block;
	transform: translateY(110%);
	animation: wb-riseup 1000ms var(--wb-ease) forwards;
}

.wb-hero__line:nth-child(1) > span { animation-delay: 180ms; }
.wb-hero__line:nth-child(2) > span { animation-delay: 320ms; }

@keyframes wb-riseup { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	.wb-hero__line > span { transform: none; animation: none; }
}

.wb-hero__text {
	margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
	max-width: 34em;
	font-size: clamp(.9rem, 1.2vw, 1.0625rem);
	line-height: 2.1;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 20px rgba(8, 30, 36, .4);
}

.wb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
}

/* 画面下の細い情報バー。
   flex の流れに置くと内容量によって 100svh を超えて切れてしまうため、底に固定する。 */
.wb-hero__meta {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	align-items: center;
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	padding: 1.05rem 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

/* スクロール誘導 */
.wb-hero__scroll {
	position: absolute;
	right: max(var(--wb-gutter), calc((100% - var(--wb-max)) / 2));
	bottom: 8.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	text-decoration: none;
	color: rgba(255, 255, 255, .8);
}

.wb-hero__scrolltext {
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

.wb-hero__scrollline {
	position: relative;
	width: 1px;
	height: 4.5rem;
	background: rgba(255, 255, 255, .3);
	overflow: hidden;
}

.wb-hero__scrollline::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 45%;
	background: #fff;
	animation: wb-scrollcue 2s var(--wb-ease) infinite;
}

@keyframes wb-scrollcue {
	0%   { transform: translateY(-100%); }
	60%  { transform: translateY(240%); }
	100% { transform: translateY(240%); }
}

@media (max-width: 900px) {
	.wb-hero__mark { top: auto; bottom: 24%; right: -12%; width: 70vw; }
	.wb-hero__scroll { display: none; }
	.wb-hero__meta { font-size: 12px; letter-spacing: .12em; }

	/* 狭い画面では折り返して「—」が行末に取り残される。
	   区切りは隠して、項目を素直に縦に並べる。 */
	.wb-hero__meta { flex-direction: column; align-items: flex-start; gap: .35rem; }
	.wb-hero__meta > span[aria-hidden] { display: none; }
}

/* ==========================================================================
   4. About
   ========================================================================== */

.wb-about {
	position: relative;
	padding-block: var(--wb-section);
}

.wb-about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
}

.wb-about__figures {
	position: relative;
	padding-bottom: clamp(3rem, 8vw, 5.5rem);
	padding-left: clamp(1.5rem, 5vw, 4rem);
}

.wb-about__fig { margin: 0; overflow: hidden; border-radius: var(--wp--custom--radius--lg); }

.wb-about__fig img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Safari は aspect-ratio と height:100% の組み合わせで高さを誤って計算し、
   写真が伸びて次のセクションに食い込む。padding で比率を作る方式に統一する。 */
.wb-about__fig--main {
	position: relative;
	box-shadow: var(--wp--preset--shadow--lifted);
}

.wb-about__fig--main::before { content: ""; display: block; padding-top: 125%; } /* 4:5 */

/* 2枚目を重ねてリズムを出す */
.wb-about__fig--sub::before { content: ""; display: block; padding-top: 100%; } /* 1:1 */

.wb-about__fig--sub {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48%;
	border: 6px solid var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.wb-about__watermark {
	position: absolute;
	right: 2%;
	top: 2%;
	width: 40%;
	color: var(--wp--preset--color--primary-soft);
	opacity: .5;
	z-index: -1;
	pointer-events: none;
}

.wb-about__title {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
}

.wb-about__title em {
	font-style: normal;
	position: relative;
	color: var(--wp--preset--color--primary-dark);
}

/* 手書き風の下線ではなく、ブランドカラーの帯を文字の足元に敷く */
.wb-about__title em::after {
	content: "";
	position: absolute;
	left: -.1em;
	right: -.1em;
	bottom: .08em;
	height: .34em;
	background: var(--wp--preset--color--primary-soft);
	opacity: .55;
	z-index: -1;
	border-radius: 2px;
}

.wb-about__text {
	margin: 0 0 1.25rem;
	line-height: 2.1;
	color: var(--wp--preset--color--text);
}

/* 事実の列 */
.wb-facts {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wb-facts__item {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1rem;
	padding-block: .8rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wb-facts dt {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--wp--preset--color--muted);
	padding-top: .25em;
}

.wb-facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

@media (max-width: 900px) {
	.wb-about__inner { grid-template-columns: 1fr; }
	.wb-about__figures { padding-left: 0; max-width: 34rem; }
	.wb-about__watermark { display: none; }
	.wb-facts__item { grid-template-columns: 6rem 1fr; }

	/* 2枚を重ねる構図は、そのままだと小さい方が
	   大きい方の被写体に重なってしまう。大きい方を右へ寄せて逃がす。 */
	.wb-about__fig--main { margin-left: 16%; }
	.wb-about__fig--sub { width: 42%; }
}

/* ==========================================================================
   5. Approach（3つの視点）
   ========================================================================== */

.wb-approach {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--primary-deep);
	color: rgba(255, 255, 255, .86);
	padding-block: var(--wb-section);
}

/* 背景にブランドの弧をうっすら流す */
.wb-approach::before {
	content: "";
	position: absolute;
	left: -12%;
	top: -30%;
	width: 60rem;
	height: 60rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(70, 153, 166, .30) 0%, rgba(70, 153, 166, 0) 62%);
	pointer-events: none;
}

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

.wb-approach__head { margin-bottom: var(--wb-block); }

.wb-approach__title {
	margin: 0;
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	line-height: 1.5;
	color: #fff;
}

.wb-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.wb-steps__item {
	position: relative;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(255, 255, 255, .22);
}

/* 各項目の頭に小さな点を置く。ロゴの到達点と対応させている */
.wb-steps__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: -5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

.wb-steps__no {
	display: block;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .18);
	margin-bottom: .75rem;
}

.wb-steps__en {
	margin: 0 0 .35rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-soft);
}

.wb-steps__ja {
	margin: 0 0 .9rem;
	font-size: var(--wp--preset--font-size--lg);
	color: #fff;
	line-height: 1.55;
}

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

@media (max-width: 900px) {
	.wb-steps { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ==========================================================================
   6. Service
   ========================================================================== */

.wb-service { padding-block: var(--wb-section); }

.wb-service__inner {
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
}

.wb-service__head { margin-bottom: var(--wb-block); }

.wb-service__title {
	margin: 0;
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	line-height: 1.5;
}

.wb-service__list {
	display: flex;
	flex-direction: column;
	gap: var(--wb-item);
}

.wb-srv {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* 写真を左右交互に。スクロールするとロゴのジグザグをなぞる形になる */
.wb-srv:nth-child(even) .wb-srv__fig { order: 2; }

.wb-srv__fig {
	position: relative;
	margin: 0;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--soft);
}

.wb-srv__fig::before { content: ""; display: block; padding-top: 80%; } /* 5:4 */

.wb-srv__fig img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 900ms var(--wb-ease);
}

.wb-srv:hover .wb-srv__fig img { transform: scale(1.05); }

/* 番号は写真の明るさに左右されるので、後ろに薄い影を敷いて読めるようにする。
   ジムや室内の写真は上部が明るく、白文字だけだとほぼ見えなかった。 */
.wb-srv__fig::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 45%;
	height: 40%;
	background: linear-gradient(150deg, rgba(8, 30, 36, .55) 0%, rgba(8, 30, 36, 0) 75%);
	pointer-events: none;
	z-index: 1;
}

.wb-srv__no {
	position: absolute;
	left: 1.25rem;
	top: .6rem;
	z-index: 2;
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-shadow: 0 2px 16px rgba(8, 30, 36, .5);
	pointer-events: none;
}

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

.wb-srv__ja {
	margin: 0 0 1rem;
	font-size: clamp(1.375rem, 2.3vw, 1.875rem);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.wb-srv__lead {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.85;
	color: var(--wp--preset--color--primary-dark);
}

.wb-srv__text {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 2.05;
	color: var(--wp--preset--color--text);
}

@media (max-width: 900px) {
	.wb-srv { grid-template-columns: 1fr; gap: 1.75rem; }
	.wb-srv:nth-child(even) .wb-srv__fig { order: 0; }
}

/* ==========================================================================
   7. タグライン帯
   ========================================================================== */

.wb-tagline {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
	padding-block: var(--wb-section);
	text-align: center;
}

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

.wb-tagline__mark {
	display: block;
	width: clamp(4.5rem, 9vw, 7rem);
	margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
	color: var(--wp--preset--color--primary);
}

.wb-tagline__en {
	margin: 0 0 1.25rem;
	font-size: clamp(1.5rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--wp--preset--color--primary-deep);
}

.wb-tagline__ja {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: .12em;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   8. News
   ========================================================================== */

.wb-news { padding-block: var(--wb-section); }

.wb-news__head {
	align-items: flex-end;
	margin-bottom: var(--wb-block);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wb-news__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.4;
}

.wb-newsloop { --wp--style--block-gap: 0; }
.wb-newsloop > li + li { margin-top: 0; }

.wb-newsrow {
	gap: 1.25rem !important;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: padding-left 260ms var(--wb-ease), background-color 260ms var(--wb-ease);
}

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

.wb-newsrow__date {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .1em;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.wb-newsrow__cat {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

.wb-newsrow__cat a {
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-tint);
	border-radius: 999px;
	padding: .35em 1.05em;
	text-decoration: none;
}

.wb-newsrow__body {
	flex: 1 1 20rem;
	min-width: 0;
}

.wb-newsrow__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}

/* 抜粋は1行だけ。行が伸びると一覧としての見通しが悪くなる。 */
.wb-newsrow__excerpt {
	margin: .2rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wb-newsrow__excerpt a { display: none; }

.wb-newsrow__title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.wb-newsrow:hover .wb-newsrow__title a { color: var(--wp--preset--color--primary-dark); }

@media (max-width: 600px) {
	.wb-newsrow { gap: .5rem 1rem !important; }
	.wb-newsrow__body { flex-basis: 100%; }
	.wb-newsrow__excerpt { display: none; }
}

/* ==========================================================================
   9. ヒーローがあるページのヘッダー
   ==========================================================================
   トップは写真の上にヘッダーを重ねる。スクロールすると白い帯に戻る。 */

body:has(.wb-hero) .wb-header {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* 空や明るい被写体の上だと白文字が読みづらくなる。
   上端から下へ薄く暗い膜を敷いて、写真の見え方を損なわずに読めるようにする。
   （文字だけに影を足すやり方では、明るい空の上で足りなかった） */
body:has(.wb-hero) .wb-header::before {
	content: "";
	position: absolute;
	inset: 0;
	bottom: -2.5rem;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(8, 30, 36, .42), rgba(8, 30, 36, 0));
	transition: opacity 260ms var(--wb-ease);
}

body:has(.wb-hero) .wb-header.is-stuck::before { opacity: 0; }

/* 中身は膜より前に出す */
body:has(.wb-hero) .wb-header > * { position: relative; z-index: 1; }

/* 開いているモバイルメニューの中は白背景なので、そこは白文字にしない */
body:has(.wb-hero) .wb-header:not(.is-stuck) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	color: #fff;
	text-shadow: 0 1px 12px rgba(8, 30, 36, .35);
}

body:has(.wb-hero) .wb-header:not(.is-stuck) .wp-block-navigation__responsive-container-open { color: #fff; }

/* ドロップダウンは箱の幅を中身に合わせ、1項目を1行に（「サポ／ート」と語の途中で切れていた） */
.wb-header .wp-block-navigation__submenu-container { min-width: max-content !important; }
.wb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; }

/* ドロップダウンの中も白い箱なので白文字にしない（白い箱に白文字で読めなかった） */
body:has(.wb-hero) .wb-header:not(.is-stuck) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
	text-shadow: none;
}

/* 写真の上では白抜きロゴに差し替える。
   元ロゴは背景が白のJPEGなので、CSSフィルタでは白い箱になってしまう。
   assets/img/logo-white.png は元画像から余白を除いて白抜き透過にしたもの。 */
body:has(.wb-hero) .wb-header:not(.is-stuck) .wp-block-site-logo img {
	opacity: 0;
}

body:has(.wb-hero) .wb-header:not(.is-stuck) .wp-block-site-logo a,
body:has(.wb-hero) .wb-header:not(.is-stuck) .wp-block-site-logo > .components-resizable-box__container {
	background-image: url("../img/logo-white.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	/* 押せる範囲を広げるための余白に、ロゴまで広がらないようにする */
	background-origin: content-box;
	display: block;
}

/* フッターの列見出しをロゴの高さ位置に合わせる */
.wb-footer__cols > *:first-child { padding-top: 2px; }

body:has(.wb-hero) .wb-header.is-stuck {
	background: #fff;
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 6px 24px rgba(31, 42, 46, .05);
}

/* ヘッダーが重なるぶん、ヒーロー内の文字は下寄せのままで良い */
body:has(.wb-hero) .wb-hero { margin-top: 0; }

/* ==========================================================================
   10. ページ先頭へ戻るボタン（VK All in One Expansion Unit）
   ==========================================================================
   プラグインの既定デザインが浮くので、テーマの見た目に合わせる。 */

.page_top_btn {
	border-radius: 999px !important;
	/* background の一括指定だと矢印（背景画像）まで消えるので色だけ指定する */
	background-color: var(--wp--preset--color--primary-deep) !important;
	border: 0 !important;
	box-shadow: 0 8px 24px rgba(15, 40, 46, .22) !important;
	opacity: .9;
	transition: opacity 200ms var(--wb-ease), transform 200ms var(--wb-ease);
}

.page_top_btn:hover { opacity: 1; transform: translateY(-2px); }
.page_top_btn::before, .page_top_btn i { color: #fff !important; }

/* ==========================================================================
   11. スマートフォンの詰め
   ========================================================================== */

@media (max-width: 600px) {
	/* 本文が画面の端まで届いて窮屈だったので、右側に余白を残す */
	.wb-hero__text { max-width: 27em; padding-right: 1rem; }

	/* ボタンは幅を揃えて縦に並べる。押しやすさを優先 */
	.wb-hero__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
	.wb-hero__actions .wb-btn { width: 100%; padding-inline: 1.5em; }

	/* 重ねた2枚目の写真が小さくなりすぎるので比率を上げる */
	.wb-about__fig--sub { width: 54%; border-width: 5px; }

	/* サービスの番号は写真が小さいぶん控えめに */
	.wb-srv__no { font-size: 2.5rem; left: 1rem; }
}

/* ==========================================================================
   12. 他のサービス（サービスページの末尾）
   ========================================================================== */

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

.wb-others__inner {
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
}

.wb-others__title {
	margin: 0 0 var(--wb-block);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.5;
}

.wb-others__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
}

.wb-othercard {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 300ms var(--wb-ease), box-shadow 300ms var(--wb-ease), border-color 300ms var(--wb-ease);
}

.wb-othercard:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lifted);
	border-color: var(--wp--preset--color--primary-soft);
}

.wb-othercard__fig { margin: 0; overflow: hidden; }

.wb-othercard__fig { position: relative; }
.wb-othercard__fig::before { content: ""; display: block; padding-top: 56.25%; } /* 16:9 */

.wb-othercard__fig img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--wb-ease);
}

.wb-othercard:hover .wb-othercard__fig img { transform: scale(1.04); }

.wb-othercard__body {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	flex: 1;
}

.wb-othercard__en {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.wb-othercard__ja {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.wb-othercard__lead {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.9;
	color: var(--wp--preset--color--text);
	flex: 1;
}

@media (max-width: 700px) {
	.wb-others__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. 下層ページの2カラム（目次＋本文）
   ==========================================================================
   下層が縦に流れるだけで、全体像も現在地も掴めなかった。
   本文の横に目次を出して、構造が見えるようにする。 */

.wb-doc {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	margin-inline: auto;
}

/* 目次が無いページ（見出しが1つ以下）は1カラムに戻す */
.wb-doc:not(:has(.wb-toc)) { grid-template-columns: minmax(0, 1fr); }

/* 器の幅は width で決めているので、グループが持つ左右の余白(has-global-padding)は要らない。
   残っていると本文だけヘッダー・フッターより内側に入る（スマホで左右40px）。 */
.wb-doc { padding-inline: 0 !important; }

/* 本文側は器の幅いっぱいに使う */
.wb-doc > .entry-content {
	max-width: none !important;
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}

.wb-doc > .entry-content > * { max-width: none !important; }

/* 目次が無いページは本文を 880px に絞り、ページ題・パンくずと同じ左端に置く。
   上の「器の幅いっぱい」が !important なので、同じ強さで後から当てる。 */
.wb-doc:not(:has(.wb-toc)) > .entry-content {
	max-width: 880px !important;
	margin-inline: 0 auto !important;
}

/* リードの中身だけ constrained の中央寄せが効いて、本文の左端とずれていた */
.wb-doc .wb-lead > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wb-toc {
	position: sticky;
	top: calc(var(--wb-header-h) + 1.5rem);
}

.wb-toc__inner {
	border-left: 2px solid var(--wp--preset--color--line);
	padding-left: 1.25rem;
}

.wb-toc__title {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--wp--preset--color--muted);
}

.wb-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.wb-toc__list li + li { margin-top: .2rem; }

.wb-toc__list a {
	display: grid;
	grid-template-columns: 1.9rem 1fr;
	align-items: baseline;
	gap: .2rem;
	padding: .5rem 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 200ms var(--wb-ease);
}

.wb-toc__num {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--primary-dark);
}

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

/* 今読んでいる見出し（main.js が付ける） */
.wb-toc__list a.is-current { color: var(--wp--preset--color--primary-deep); font-weight: 700; }
.wb-toc__list a.is-current .wb-toc__num { color: var(--wp--preset--color--primary-deep); }

@media (max-width: 900px) {
	.wb-doc { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

	/* 狭い画面では折りたたんだ一覧として本文の上に置く */
	.wb-toc { position: static; width: 100%; margin-inline: 0 !important; }
	.wb-toc__inner {
		border-left: 0;
		padding: 1.25rem 1.4rem;
		background: var(--wp--preset--color--base-alt);
		border-radius: var(--wp--custom--radius--md);
	}
	.wb-toc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.5rem; }
}

/* ==========================================================================
   14. 下層ページの部品
   ==========================================================================
   本文が段落の羅列になりがちなので、要所で見せ方を変える。 */

/* ページ冒頭のリード */
.wb-lead { margin-bottom: var(--wb-block); }

.wb-lead__catch {
	margin: 0 0 1rem;
	font-size: clamp(1.375rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .01em;
	color: var(--wp--preset--color--primary-deep);
}

.wb-lead__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 2.05;
	color: var(--wp--preset--color--text);
}

/* 本文より広く出したい写真 */
.wb-widefig { margin-block: var(--wb-block) !important; }
.wb-widefig img { width: 100%; border-radius: var(--wp--custom--radius--lg); }

/* 声・ひとことのカード */
.wb-voice {
	display: flex;
	align-items: center;
	min-height: 100%;
	padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.25rem, 3vw, 1.75rem) !important;
	background: var(--wp--preset--color--primary-tint) !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.wb-voice p {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.8;
	color: var(--wp--preset--color--primary-deep);
}

/* 引用のように置く一文 */
.wb-quote {
	margin-block: var(--wb-block);
	padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
	/* 単色を敷いてからグラデーションを重ねる。
	   background ショートハンドだけだと、編集画面でプリセット変数が
	   解決されずに透明になることがある。 */
	background-color: var(--wp--preset--color--primary-dark);
	background-image: var(--wp--preset--gradient--primary-fade);
	border-radius: var(--wp--custom--radius--lg);
	color: #fff;
}

.wb-quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 2;
	color: #fff;
}

/* 料金プランのカード */
.wb-plan {
	text-align: center;
	min-height: 100%;
	padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem) !important;
}

.wb-plan__name {
	margin: 0 0 .75rem !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--wp--preset--color--muted);
}

.wb-plan__price {
	margin: 0 0 .85rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--primary-deep);
	line-height: 1.2;
}

.wb-plan__num {
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}

.wb-plan__unit { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }

.wb-plan__sub {
	margin: 0;
	padding-top: .85rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.8;
	color: var(--wp--preset--color--text);
}

.wb-plan__sub strong { color: var(--wp--preset--color--primary-deep); }

/* 3枚並びは狭い画面で1列に */
@media (max-width: 700px) {
	.wb-voices .wp-block-column,
	.wb-plans .wp-block-column { flex-basis: 100% !important; }
}

/* 年代別のカード */
.wb-age { min-height: 100%; }

.wb-age__label {
	margin: 0 0 .4rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.wb-age__name {
	margin: 0 0 1rem !important;
	font-size: var(--wp--preset--font-size--lg) !important;
	color: var(--wp--preset--color--ink);
}

/* カードの中で使うタグ（折り返し前提） */
.wb-tags--block { margin-block: .25rem 1rem; }

/* 依頼例のカード */
.wb-example { margin-block: var(--wb-block); }

.wb-example__label {
	margin: 0 0 .4rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.wb-example__name {
	margin: 0 0 1.25rem !important;
	font-size: var(--wp--preset--font-size--lg) !important;
}

.wb-example__rows { margin: 0; }

.wb-example__rows > div {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 1rem;
	padding-block: .75rem;
	border-top: 1px solid var(--wp--preset--color--line);
	align-items: baseline;
}

.wb-example__rows dt {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wp--preset--color--muted);
}

.wb-example__rows dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--wp--preset--color--ink);
}

.wb-example__price {
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	font-weight: 700;
	color: var(--wp--preset--color--primary-deep);
	font-variant-numeric: tabular-nums;
}

.wb-example__unit { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin-left: .25rem; }

@media (max-width: 700px) {
	.wb-ages .wp-block-column { flex-basis: 100% !important; }
	.wb-example__rows > div { grid-template-columns: 4.5rem 1fr; }
}

/* チェックリストを2列に（項目が短いとき） */
@media (min-width: 700px) {
	.wb-check2 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 clamp(1.5rem, 3vw, 2.5rem);
	}
}

/* 説明図はカードの上に置いて主張しすぎないように */
.wb-diagram {
	margin-block: var(--wb-block) !important;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--wp--custom--radius--lg);
}

.wb-diagram img { max-width: min(420px, 100%); margin-inline: auto; display: block; }

/* 料金カードに説明が入る版は左揃えにする */
.wb-plan--wide { text-align: left; }
.wb-plan--wide .wb-plan__name { color: var(--wp--preset--color--primary-dark); }
.wb-plan--wide .wb-plan__sub { text-align: left; }

/* 初回限定体験 */
.wb-trial {
	margin-block: var(--wb-block);
	padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--primary-tint);
	border-radius: var(--wp--custom--radius--lg);
}

.wb-trial__label {
	margin: 0 0 .5rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

/* 中身はカラムブロックになったので、grid 指定は不要になった。
   flex のまま、右の料金だけ幅を内容に合わせる。 */
.wb-trial__row { gap: clamp(1rem, 3vw, 2.5rem); }

.wb-trial__name {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wb-trial__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.95;
	color: var(--wp--preset--color--text);
}

.wb-trial__price {
	margin: 0;
	white-space: nowrap;
	color: var(--wp--preset--color--primary-deep);
	font-size: var(--wp--preset--font-size--sm);
}

.wb-trial__num {
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wb-trial__unit { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text); margin-left: .3rem; }

@media (max-width: 700px) {
	.wb-trial__price { margin-top: .5rem; }
}

/* ==========================================================================
   ブロックエディタから選べる装飾（is-style-wb-◯◯）

   下層ページの装飾は以前「カスタムHTML」ブロックに生のHTMLで書いていた。
   編集する人がHTMLを触らずに済むよう、同じ見た目をコアブロックの
   スタイル（サイドバーの「スタイル」）で出せるようにしたもの。
   クラス名の実体は inc/blocks.php で登録している。
   ========================================================================== */

/* ---- 段落：料金（数字だけ大きく見せる。span はテーマが表示時に付ける） ---- */
.is-style-wb-price {
	margin: 0 0 .85rem !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	color: var(--wp--preset--color--primary-deep);
	line-height: 1.2;
}

/* ---- 段落：料金の下の補足（上に区切り線） ---- */
.is-style-wb-sub {
	margin: 0 !important;
	padding-top: .85rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--sm) !important;
	line-height: 1.8;
	color: var(--wp--preset--color--text);
}

.is-style-wb-sub strong { color: var(--wp--preset--color--primary-deep); }

/* ---- 段落：英字の小見出し ---- */
.is-style-wb-label {
	margin: 0 0 .4rem !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

/* ---- 段落：リード文 ---- */
.is-style-wb-lead {
	font-size: var(--wp--preset--font-size--md) !important;
	line-height: 2;
	color: var(--wp--preset--color--ink);
}

/* ---- リスト：タグ ---- */
ul.is-style-wb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: .25rem 0 1rem;
	padding: 0;
}

ul.is-style-wb-tags li {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .04em;
	color: var(--wp--preset--color--primary-deep);
	background: var(--wp--preset--color--primary-tint);
	border-radius: 999px;
	padding: .45em 1.1em;
	margin: 0;
}

/* ---- 表：項目と内容の一覧（見た目は定義リストと同じ） ---- */
.wp-block-table.is-style-wb-rows { margin: 0; overflow: visible; }

.wp-block-table.is-style-wb-rows table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

.wp-block-table.is-style-wb-rows td,
.wp-block-table.is-style-wb-rows th {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	padding: .75rem 0;
	text-align: left;
	vertical-align: baseline;
	word-break: break-word;
}

/* 1列目は項目名。幅を固定して内容の頭を揃える */
.wp-block-table.is-style-wb-rows td:first-child,
.wp-block-table.is-style-wb-rows th:first-child {
	width: 6.5rem;
	padding-right: 1rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--wp--preset--color--muted);
}

.wp-block-table.is-style-wb-rows td:last-child {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--wp--preset--color--ink);
}

/* 強調した部分は金額として大きく見せる（**5,000円〜** のように書く） */
.wp-block-table.is-style-wb-rows td strong {
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	font-weight: 700;
	color: var(--wp--preset--color--primary-deep);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

@media (max-width: 700px) {
	.wp-block-table.is-style-wb-rows td:first-child,
	.wp-block-table.is-style-wb-rows th:first-child { width: 4.5rem; }
}

/* 列の多い表は狭い画面で横スクロールさせている（min-width 20rem）。
   この2列の一覧は折り返して収まるべきなので、その指定から外す。 */
@media (max-width: 600px) {
	.wp-block-table.is-style-wb-rows { overflow-x: visible; }
	.wp-block-table.is-style-wb-rows table { min-width: 0; }
}

/* ---- ボタン：矢印リンク（線も背景も持たないテキストリンク） ---- */
.wp-block-button.is-style-wb-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	background: none !important;
	border: 0;
	border-radius: 0;
	padding: 0 0 .4rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--primary-deep) !important;
	text-decoration: none;
}

/* 矢印は疑似要素で描く。書き手に span を書かせないため */
.wp-block-button.is-style-wb-arrow .wp-block-button__link::after {
	content: "";
	display: block;
	width: 2.2rem;
	height: 1px;
	background: currentColor;
	position: relative;
	transition: width 320ms var(--wb-ease);
}

.wp-block-button.is-style-wb-arrow .wp-block-button__link::before {
	content: "";
	position: absolute;
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateY(-4px) rotate(45deg);
}

.wp-block-button.is-style-wb-arrow { position: relative; }
.wp-block-button.is-style-wb-arrow .wp-block-button__link { position: relative; }
.wp-block-button.is-style-wb-arrow .wp-block-button__link:hover { color: var(--wp--preset--color--primary) !important; }
.wp-block-button.is-style-wb-arrow .wp-block-button__link:hover::after { width: 3.2rem; }

/* ---- ボタン：連絡手段（LINE・電話・フォーム） ---- */
.wp-block-button.is-style-wb-line .wp-block-button__link,
.wp-block-button.is-style-wb-tel .wp-block-button__link,
.wp-block-button.is-style-wb-form .wp-block-button__link {
	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);
}

.wp-block-button.is-style-wb-line .wp-block-button__link:hover,
.wp-block-button.is-style-wb-tel .wp-block-button__link:hover,
.wp-block-button.is-style-wb-form .wp-block-button__link:hover { transform: translateY(-1px); }

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

.wp-block-button.is-style-wb-tel .wp-block-button__link {
	background: var(--wp--preset--color--primary-dark) !important;
	color: #fff !important;
	border: 0;
	font-variant-numeric: tabular-nums;
}
.wp-block-button.is-style-wb-tel .wp-block-button__link:hover { background: var(--wp--preset--color--primary-deep) !important; }

.wp-block-button.is-style-wb-form .wp-block-button__link {
	background: none !important;
	border: 1.5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark) !important;
}
.wp-block-button.is-style-wb-form .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}

/* ボタンを縦に積むときは間隔を詰める（連絡手段カードの中） */
.wb-contactcard .wp-block-buttons { width: 100%; }
.wb-contactcard .wp-block-button { width: 100%; }

/* 初回限定体験。中身をコアブロックにしたので、その並びに合わせる */
.wb-trial .wp-block-columns.wb-trial__row {
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-block: 0;
}

.wb-trial h3.wb-trial__name {
	margin: 0 0 .5rem !important;
	font-size: var(--wp--preset--font-size--lg) !important;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wb-trial .is-style-wb-price {
	margin: 0 !important;
	white-space: nowrap;
	color: var(--wp--preset--color--primary-deep);
}

.wb-trial .is-style-wb-price .wb-plan__num { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.wb-trial .is-style-wb-price .wb-plan__unit { color: var(--wp--preset--color--text); margin-left: .3rem; }

@media (max-width: 700px) {
	.wb-trial .wp-block-columns.wb-trial__row { flex-wrap: wrap !important; }
	.wb-trial .wp-block-columns.wb-trial__row > .wp-block-column { flex-basis: 100% !important; }
	.wb-trial .is-style-wb-price { margin-top: .5rem !important; }
}

/* カードの中のボタンは横幅いっぱいに（連絡手段の3枚） */
.is-style-wb-card .wp-block-buttons { width: 100%; margin-bottom: 0; }
.is-style-wb-card .wp-block-button.is-style-wb-line,
.is-style-wb-card .wp-block-button.is-style-wb-tel,
.is-style-wb-card .wp-block-button.is-style-wb-form { width: 100%; }

/* 矢印リンクを入れたカードは、下に余計な余白を作らない */
.is-style-wb-card .wp-block-buttons:last-child { margin-top: auto; }

/* 左は残り幅いっぱい、右の料金は内容の幅で止める。
   カラムブロックの既定（両方 flex-basis:0）だと料金側が伸びてしまうので、
   flex を両方まとめて指定して打ち消す。 */
.wb-trial .wp-block-columns.wb-trial__row > .wp-block-column {
	flex: 1 1 auto !important;
	min-width: 0;
}

.wb-trial .wp-block-columns.wb-trial__row > .wp-block-column:last-child {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* スクロールを促す表示。縦書きで幅が 21px しかないので、押せる範囲だけ広げる */
.wb-hero__scroll {
	padding-inline: 12px;
	margin-inline: -12px;
}

/* ==========================================================================
   16. 仕上げ（2026-10-14）
   ==========================================================================
   「既製テンプレートに見える」原因を形で消す。
   角丸と影は theme.json の値（radius 4/6/8・影なし）で全体を下げたうえで、
   ここでは個別の部品の形を変える。足す装飾はロゴの「弧と点」に沿った細い線だけ。 */

/* ---- ページ題の帯: 左寄せ・薄く。本文と同じ左端に揃える ---- */
.wb-pagehead {
	text-align: left;
	padding-block: clamp(2.25rem, 5vw, 4rem);
	padding-inline: 0 !important;
}

.wb-pagehead > * {
	width: min(100% - var(--wb-gutter) * 2, var(--wb-max));
	max-width: none !important;
	margin-inline: auto !important;
	text-align: left !important;
}

.wb-pagehead__title {
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	letter-spacing: .02em;
}

.wb-pagehead__sub { margin: 0 auto .5rem !important; order: -1; }
.wb-pagehead:has(.wb-pagehead__sub) { display: flex; flex-direction: column; }

/* 装飾: ぼかした丸をやめ、ロゴの弧と点を細い線で置く */
.wb-pagehead::before {
	top: 50%;
	right: -6rem;
	width: 26rem;
	height: 26rem;
	transform: translateY(-50%);
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%234699a6' stroke-opacity='.32' stroke-width='.35'/%3E%3Ccircle cx='15.4' cy='84.6' r='1.3' fill='%234699a6'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 600px) {
	.wb-pagehead::before { width: 12rem; height: 12rem; right: -7rem; }
}

/* ---- 下層の見出し: 下の太い短線をやめ、上に「● —」の印 ---- */
.wb-doc .entry-content > h2.is-style-wb-section { padding-bottom: 0; }

.wb-doc .entry-content > h2.is-style-wb-section::after { display: none; }

.wb-doc .entry-content > h2.is-style-wb-section::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 7px;
	margin-bottom: 1rem;
	background:
		radial-gradient(circle 3.5px at 3.5px 50%, var(--wp--preset--color--primary) 98%, transparent) no-repeat,
		linear-gradient(var(--wp--preset--color--primary-soft), var(--wp--preset--color--primary-soft)) 13px 50% / calc(100% - 13px) 1px no-repeat;
}

/* ---- 目次: 畳める箱（狭い画面は閉じて始まる。main.js） ---- */
.wb-toc__title { list-style: none; cursor: default; }
.wb-toc__title::-webkit-details-marker { display: none; }
.wb-toc__count { display: none; }

@media (max-width: 900px) {
	.wb-toc__title {
		display: flex;
		align-items: center;
		gap: .6rem;
		margin: 0 !important;
		cursor: pointer;
	}
	.wb-toc__count {
		display: inline-block;
		font-weight: 500;
		color: var(--wp--preset--color--muted);
		letter-spacing: 0;
	}
	.wb-toc__count::before { content: "（"; }
	.wb-toc__count::after { content: "）"; }
	/* 開閉の印は右端の「＋／−」 */
	.wb-toc__title::after {
		content: "";
		margin-left: auto;
		width: 11px;
		height: 11px;
		background:
			linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
			linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
		color: var(--wp--preset--color--primary-dark);
		transition: transform 200ms var(--wb-ease);
	}
	.wb-toc__inner[open] .wb-toc__title::after { transform: rotate(45deg); }
	.wb-toc__inner[open] .wb-toc__list { margin-top: .75rem; }
	.wb-toc__inner { padding: 1rem 1.25rem; }
}

/* ---- 料金: 狭い画面では箱を積まず、1枚の表の行にする（見比べやすく） ---- */
@media (max-width: 700px) {
	.wb-plans { gap: 0 !important; border-top: 1px solid var(--wp--preset--color--line); }
	.wb-cardgrid.wb-plans .wp-block-column > .wb-plan {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0 1rem;
		text-align: left;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
		border-radius: 0;
		padding: 1.1rem 0 !important;
	}
	.wb-cardgrid.wb-plans .wp-block-column > .wb-plan > * { margin-block: 0 !important; }
	.wb-plan .is-style-wb-price { margin-left: auto !important; text-align: right; }
	.wb-plan .is-style-wb-sub,
	.wb-plan .wb-plan__sub {
		flex-basis: 100%;
		border-top: 0;
		padding-top: .4rem;
		margin-bottom: 0 !important;
	}
}

/* ---- トップのサービス: 写真の上の大きな番号をやめ、角の小さなつまみに ---- */
.wb-srv__fig::after { display: none; }

.wb-srv__no {
	left: 0;
	top: 0;
	padding: .55rem .85rem;
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--wp--preset--color--primary-deep);
	background: #fff;
	text-shadow: none;
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
}

@media (max-width: 600px) {
	.wb-srv__no { font-size: 12px; left: 0; }
}

/* ---- トップのサービスの料金: 丸い札をやめ、縦線で区切った1行に ---- */
.wb-srv .wb-tags { gap: .35rem 0; }

.wb-srv .wb-tags li {
	background: none;
	border-radius: 0;
	padding: 0 .9em;
	border-left: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

.wb-srv .wb-tags li:first-child { padding-left: 0; border-left: 0; }

@media (max-width: 600px) {
	.wb-srv .wb-tags li { padding: 0 .6em; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0; }
}

/* ---- ヒーロー（スマホ）: ボタンは1本だけ強く、2本目は文字のリンクに ---- */
@media (max-width: 600px) {
	.wb-hero__actions { align-items: flex-start; gap: 1.25rem; }
	.wb-hero__actions .wb-btn--ghost {
		width: auto;
		padding: 0 0 .2rem;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .6);
		border-radius: 0;
	}
	.wb-hero__actions .wb-btn--ghost:hover { background: none; color: #fff; transform: none; }
	/* 背後のマークは本文に重ねず、空いている右上へ */
	.wb-hero__mark { top: 10%; bottom: auto; right: -18%; width: 62vw; color: rgba(255, 255, 255, .1); }
}

/* ---- 一言: グラデーションの箱をやめ、明朝の一文を細い線で挟む ---- */
.wb-quote {
	padding: clamp(1.5rem, 4vw, 2rem) 0;
	background: none;
	border-radius: 0;
	border-block: 1px solid var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-deep);
}

.wb-quote p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	color: var(--wp--preset--color--primary-deep);
}

/* ---- 声: 吹き出しの箱をやめ、左の線で揃えた列に ---- */
.wb-voice {
	padding: .25rem 0 .25rem 1rem !important;
	background: none !important;
	border: 0 !important;
	border-left: 2px solid var(--wp--preset--color--primary-soft) !important;
	border-radius: 0 !important;
}

.wb-voice p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
}

/* ---- 必須の印: 赤い塗りは「誤り」の色なので、線の札に ---- */
.wb-required {
	padding: 0 .5em;
	font-weight: 700;
	color: var(--wp--preset--color--primary-deep);
	background: none;
	border: 1px solid currentColor;
	border-radius: 2px;
	vertical-align: 1px;
}

/* ---- お知らせ: 分類の丸い札をやめ、日付の横の地の文字に ---- */
.wb-newsrow__cat a,
.wb-newsitem__cat {
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	font-weight: 500;
	color: var(--wp--preset--color--muted) !important;
}

@media (max-width: 781px) {
	/* 行の箱が外へはみ出し、左端が2本あった */
	.wb-postcard { margin-inline: 0; padding-inline: 0; border-radius: 0; }
	.wb-postcard:hover { background: none; }
}

/* ---- 他のサービス: 浮き上がりをやめ、線の色だけ変える ---- */
.wb-othercard:hover { transform: none; box-shadow: none; }

/* ---- CTA の帯: 塗りの丸をやめ、二重の細い弧に ---- */
.wb-cta::before {
	background: none;
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 0 0 2.5rem transparent, 0 0 0 calc(2.5rem + 1px) rgba(255, 255, 255, .08);
}

/* ---- フッター: Instagram のアイコンが 16px で小さすぎた ---- */
.wb-footer .wp-social-link svg { width: 20px; height: 20px; }

/* ---- 本文の行末に1〜2文字だけ残る改行（「しています／す。」）を避ける ---- */
.wb-content p, .wb-content li, .wb-content td, .wb-content dd,
.wb-about p, .wb-srv p, .wb-plan p, .wb-toc__label {
	text-wrap: pretty;
}

/* ---- お知らせ: 分類が「お知らせ」1つだけなので、各行の札は出さない ---- */
.wb-newsrow__cat,
.wb-postcard .wp-block-post-terms { display: none; }

/* ---- トップへ戻るボタン ----
   スマホでは小さく端に寄せる。最後の行（著作権表記）と重ならないよう、
   フッターの下にボタンぶんの余白を取る。濃い帯の上では白い輪で見分けられるようにする（main.js） */
@media (max-width: 600px) {
	.page_top_btn { width: 40px !important; height: 40px !important; right: 12px !important; bottom: 12px !important; }
	.wb-footer { padding-bottom: 64px; }
}

.page_top_btn.is-over-dark { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7) !important; }