/* ==========================================================================
   core ブロックのブロックスタイル(inc/block-styles.php で登録)と、
   セクションの中での並び・余白(LP の値。上書きを重ねた後の値)
   色・サイズはトークン(base.css)を通す。
   ========================================================================== */

/* 段落 ------------------------------------------------------------------ */
.is-style-lead {
	font-size: var(--fz-lead);
	line-height: 1.9;
	color: var(--c-contrast-sub);
}
.is-style-lead + .is-style-lead {
	margin-top: var(--s-2);
}
@media (max-width: 767px) {
	.is-style-lead {
		line-height: 1.85;
	}
}

.is-style-label {
	font-family: var(--ff-label);
	font-size: var(--fz-label-s);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c-accent);
}

.is-style-label-l {
	margin-top: 4px;
	font-family: var(--ff-label);
	font-size: 18px;
	letter-spacing: 0.2em;
	color: var(--c-accent);
}

.is-style-tag {
	align-self: flex-start;
	width: fit-content;
	padding: 4px 12px;
	background: var(--c-primary);
	color: var(--c-surface);
	font-size: var(--fz-note);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.is-style-strong {
	margin-top: var(--s-1);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.is-style-serif-lead {
	margin-top: var(--s-3);
	font-family: var(--ff-heading);
	font-size: var(--fz-lead);
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.is-style-serif {
	font-family: var(--ff-heading);
	line-height: 1.6;
}

.is-style-serif-h3 {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	font-family: var(--ff-heading);
	font-size: var(--fz-h3);
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: center;
}
.is-style-serif-h3 + .wp-block-buttons {
	margin-top: var(--s-3);
}

.is-style-sub {
	font-size: 16px;
	color: var(--c-contrast-sub);
}

.is-style-note {
	margin-top: var(--s-2);
	font-size: var(--fz-note);
	line-height: 1.8;
	color: var(--c-contrast-sub);
}

.is-style-name {
	margin-top: 4px;
	font-family: var(--ff-heading);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
}

.is-style-quote {
	font-family: var(--ff-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--c-contrast);
}

/* 所在地(ピン・横並び。SP は駅からの道のりを2行目へ) */
.is-style-place {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 10px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
}
.is-style-place::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--c-accent);
	-webkit-mask: url(../icons/pin.svg) center / contain no-repeat;
	mask: url(../icons/pin.svg) center / contain no-repeat;
}
.is-style-place small {
	margin-left: 6px;
	font-size: 16px;
	font-weight: 400;
	color: var(--c-contrast-sub);
}
.is-style-place + .is-style-note {
	margin-top: 11px; /* LP は所在地が inline-flex のため、行の高さぶん 3px 広い */
	line-height: 1.7;
	text-align: center;
}

@media (max-width: 767px) {
	.is-style-name {
		font-size: 24px;
	}
	.is-style-quote {
		font-size: 17px;
	}
	.is-style-place {
		font-size: 16px;
	}
	.is-style-place + .is-style-note {
		margin-top: 8px;
	}
	.is-style-place small {
		flex-basis: 100%;
		margin-left: 0;
		font-size: 14px;
	}
}

/* リスト ---------------------------------------------------------------- */
.wp-block-list.is-style-check {
	margin-top: var(--s-4);
	padding: 0;
	border-top: 1px solid var(--c-border);
	list-style: none;
}
.wp-block-list.is-style-check > li {
	position: relative;
	padding: 16px 0 16px 40px;
	border-bottom: 1px solid var(--c-border);
}
.wp-block-list.is-style-check > li::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--c-accent);
	-webkit-mask: url(../icons/chk.svg) center / contain no-repeat;
	mask: url(../icons/chk.svg) center / contain no-repeat;
}
.wp-block-list.is-style-check strong {
	display: block;
	font-weight: 700;
}

.wp-block-list.is-style-diamond {
	margin-top: var(--s-2);
	padding: 0;
	border-top: 1px solid var(--c-border);
	list-style: none;
}
.wp-block-list.is-style-diamond > li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-border);
}
.wp-block-list.is-style-diamond > li::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border: 1px solid var(--c-accent-deco);
	transform: rotate(45deg) translateY(-2px);
}

/* 表 [会社情報](SP は縦に積む) ------------------------------------------ */
.wp-block-table.is-style-info {
	max-width: 640px;
	margin: 0 auto;
	overflow: visible;
}
.wp-block-table.is-style-info table,
.wp-block-table.is-style-info tbody {
	display: block;
	width: 100%;
	border: 0;
}
.wp-block-table.is-style-info table {
	border-top: 1px solid var(--c-border);
}
.wp-block-table.is-style-info tr {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--c-border);
}
.wp-block-table.is-style-info td,
.wp-block-table.is-style-info th {
	padding: 0;
	border: 0;
	text-align: left;
	font-weight: 400;
}
.wp-block-table.is-style-info td:first-child {
	font-weight: 700;
}
@media (max-width: 767px) {
	.wp-block-table.is-style-info tr {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 16px 0;
	}
}

/* メディアとテキスト(既定=About/プロフィール/コース/道具/バナー) ------------- */
body .wp-block-media-text {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	column-gap: var(--s-12);
	align-items: stretch;
}
body .wp-block-media-text > .wp-block-media-text__content {
	align-self: start;
	padding: 0 0 var(--s-5);
}
body .wp-block-media-text > .wp-block-media-text__media {
	align-self: stretch;
	position: relative;
	height: 100%;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	background: var(--c-base-alt);
}
body .wp-block-media-text > .wp-block-media-text__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* プロフィール(講師) */
body .wp-block-media-text.is-style-profile {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important;
	align-items: center;
}
body .wp-block-media-text.is-style-profile > .wp-block-media-text__content {
	align-self: center;
	padding: 0;
}
body .wp-block-media-text.is-style-profile > .wp-block-media-text__media {
	align-self: center;
	height: auto;
	aspect-ratio: 4 / 5;
}

/* コース(講習・インストラクター) */
body .wp-block-media-text.is-style-course {
	column-gap: var(--s-6);
}
body .wp-block-media-text.is-style-course > .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 0;
}
body .wp-block-media-text.is-style-course > .wp-block-media-text__media {
	min-height: 560px;
}
.is-style-course .wp-block-media-text__content > .wp-block-heading {
	margin-top: var(--s-2);
	font-family: var(--ff-heading);
	font-size: var(--fz-h3);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
}
.is-style-course .wp-block-media-text__content > p.wp-block-paragraph:not([class*="is-style-"]) {
	margin-top: var(--s-2);
	line-height: 1.9;
}
.is-style-course .wp-block-media-text__content > .is-style-label {
	margin-top: var(--s-2);
	font-size: 14px;
	line-height: 1.6;
}
.is-style-course .wp-block-media-text__content > .wp-block-buttons {
	margin-top: var(--s-4);
}
.is-style-course .wp-block-media-text__content .wp-block-button__link {
	min-width: 320px;
}

/* 道具 */
body .wp-block-media-text.is-style-tools {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important;
	column-gap: var(--s-10);
}
body .wp-block-media-text.is-style-tools > .wp-block-media-text__content {
	padding: 0;
}
body .wp-block-media-text.is-style-tools > .wp-block-media-text__media {
	min-height: 360px;
}
.is-style-tools .wp-block-media-text__content > .wp-block-buttons {
	margin-top: var(--s-4);
}

/* バナー(フランチャイズ・導入店舗募集) */
body .wp-block-media-text.is-style-banner {
	column-gap: 0;
	min-height: 440px;
	margin-top: var(--s-4);
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
}
body .wp-block-media-text.is-style-banner > .wp-block-media-text__content {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--s-8);
}
.is-style-banner .wp-block-media-text__content > .wp-block-heading {
	margin-top: var(--s-1);
	font-family: var(--ff-heading);
	font-size: var(--fz-h3);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
}
.is-style-banner .wp-block-media-text__content > p.wp-block-paragraph:not([class*="is-style-"]) {
	margin-top: var(--s-2);
	line-height: 1.9;
	color: var(--c-contrast-sub);
}
.is-style-banner .wp-block-media-text__content > .wp-block-buttons {
	margin-top: var(--s-4);
}

@media (max-width: 1024px) {
	body .wp-block-media-text,
	body .wp-block-media-text.is-style-tools {
		column-gap: var(--s-6);
	}
	body .wp-block-media-text.is-style-banner {
		column-gap: 0;
	}
	body .wp-block-media-text.is-style-banner > .wp-block-media-text__content {
		padding: var(--s-6) var(--s-5);
	}
	.is-style-banner .wp-block-button__link {
		padding-inline: 16px;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	/* core の「モバイルでは縦に並べる」(600px 以下)より強く、767px 以下で縦に並べる */
	html body .wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
		row-gap: var(--s-5);
	}
	html body .wp-block-media-text.is-stacked-on-mobile.is-style-profile,
	html body .wp-block-media-text.is-stacked-on-mobile.is-style-tools {
		row-gap: var(--s-4);
	}
	html body .wp-block-media-text.is-stacked-on-mobile.is-style-course {
		row-gap: var(--s-3);
	}
	html body .wp-block-media-text.is-stacked-on-mobile.is-style-banner {
		row-gap: 0;
		min-height: 0;
	}
	/* 既定(About)はテキストが先、ほかは画像が先 */
	html body .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 1;
		padding-bottom: 0;
	}
	html body .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 2;
		/* Safari(iPhone)は aspect-ratio のある grid の子を幅いっぱいに広げず幅0にするため、幅を明示する */
		justify-self: stretch;
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
	html body .wp-block-media-text.is-stacked-on-mobile[class*="is-style-"] > .wp-block-media-text__media {
		grid-row: 1;
	}
	html body .wp-block-media-text.is-stacked-on-mobile[class*="is-style-"] > .wp-block-media-text__content {
		grid-row: 2;
	}
	html body .wp-block-media-text.is-stacked-on-mobile.is-style-profile > .wp-block-media-text__media {
		aspect-ratio: 4 / 3;
	}
	html body .wp-block-media-text.is-stacked-on-mobile.is-style-banner > .wp-block-media-text__content {
		padding: var(--s-4) 20px var(--s-5);
	}
	.is-style-course .wp-block-media-text__content .wp-block-button,
	.is-style-course .wp-block-media-text__content .wp-block-button__link,
	.is-style-banner .wp-block-media-text__content .wp-block-button,
	.is-style-banner .wp-block-media-text__content .wp-block-button__link {
		width: 100%;
		min-width: 0;
	}
	.is-style-banner .wp-block-button__link {
		padding-inline: 12px;
		white-space: normal;
	}
}

/* グループ ---------------------------------------------------------------- */
/* 二重枠(お申し込み) */
.wp-block-group.is-style-double-frame {
	position: relative;
	padding: var(--s-12) var(--s-8);
	border: 1px solid var(--c-accent-deco);
	background: var(--c-base);
	text-align: center;
}
.wp-block-group.is-style-double-frame::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid var(--c-border);
	pointer-events: none;
}
.is-style-double-frame > .base-section-head {
	margin-bottom: 0;
}
.is-style-double-frame > .wp-block-buttons {
	position: relative;
	justify-content: center;
	margin-top: var(--s-4);
}
.is-style-double-frame > .wp-block-buttons .wp-block-button {
	width: calc((100% - 32px) / 3);
}
.is-style-double-frame > .wp-block-buttons .wp-block-button__link {
	width: 100%;
	min-height: 56px;
	padding-inline: 10px;
	font-size: 15px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* CTA 3列(お申し込み) */
body .wp-block-columns.is-style-cta-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-2);
	align-items: start;
	margin: var(--s-6) 0 0;
}
body .wp-block-columns.is-style-cta-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	margin: 0;
}
.is-style-cta-grid .wp-block-button,
.is-style-cta-grid .wp-block-button__link {
	width: 100%;
}
.is-style-cta-grid .wp-block-button__link {
	min-height: 56px;
	padding: 12px 14px;
	font-size: 16px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.is-style-cta-grid p {
	margin: 0;
	font-size: 15px;
	color: var(--c-contrast-sub);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	body .wp-block-columns.is-style-cta-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
	.is-style-double-frame > .wp-block-buttons .wp-block-button {
		width: 100%;
		max-width: 420px;
	}
}
@media (max-width: 767px) {
	.wp-block-group.is-style-double-frame {
		margin: 0 -4px;
		padding: var(--s-8) 20px;
	}
	body .wp-block-columns.is-style-cta-grid {
		gap: var(--s-3);
		margin-top: var(--s-4);
	}
	.is-style-cta-grid .wp-block-button__link {
		min-height: 52px;
		font-size: 15px;
		white-space: normal;
	}
	.is-style-cta-grid p {
		font-size: 13px;
	}
	.is-style-double-frame > .wp-block-buttons .wp-block-button {
		max-width: none;
	}
	.is-style-double-frame > .wp-block-buttons .wp-block-button__link {
		min-height: 52px;
	}
}

/* フォームの枠 */
.wp-block-group.is-style-form-card {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--s-6) var(--s-8) var(--s-8);
	border: 1px solid var(--c-border);
	border-radius: var(--wp--custom--radius--form);
	background: var(--c-surface);
}
@media (max-width: 767px) {
	.wp-block-group.is-style-form-card {
		margin: 0 -4px;
		padding: var(--s-4) 20px;
	}
}

/* LINE の箱 */
.wp-block-group.is-style-line-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-6);
	padding: var(--s-4);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-base-alt);
	text-align: center;
}
.wp-block-group.is-style-line-box p {
	font-weight: 700;
	color: var(--c-contrast);
}
@media (max-width: 767px) {
	.wp-block-group.is-style-line-box {
		align-items: stretch;
		padding: var(--s-3) var(--s-2);
	}
	.is-style-line-box .wp-block-button,
	.is-style-line-box .wp-block-button__link {
		width: 100%;
	}
}

/* 上線区切り(講師のことば) */
.wp-block-group.is-style-divided {
	display: grid;
	gap: var(--s-2);
	margin-top: var(--s-5);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-border);
	line-height: 1.9;
}

/* ボタンの並び [見出しの下](Instagram のフォローボタン) -------------------- */
.wp-block-buttons.is-style-under-head {
	justify-content: center;
	margin-top: calc(var(--s-3) - var(--head-gap));
	margin-bottom: var(--s-6);
}
@media (max-width: 767px) {
	.wp-block-buttons.is-style-under-head {
		margin-bottom: var(--s-4);
	}
}

/* セクションの中の並び ---------------------------------------------------- */
/* 6つのケアの見出し(H3 の見出しセット) */
.base-section-head.is-level-3 {
	margin-top: var(--s-16);
	margin-bottom: var(--s-6);
}
@media (max-width: 767px) {
	.base-section-head.is-level-3 {
		margin-top: var(--s-10);
		margin-bottom: var(--s-4);
	}
}

/* 実店舗:メニューの下の「すべて見る」 */
.base-card-grid.is-menu + .wp-block-buttons {
	justify-content: center;
	margin-top: var(--s-4);
}

/* 中央に並べるボタン(LINE 相談など) */
.base-section__inner > .wp-block-buttons {
	justify-content: center;
}

/* お問い合わせフォーム(Contact Form 7) ------------------------------------ */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}
.wpcf7 .input,
.wpcf7 .textarea {
	display: block;
}
.wpcf7 .field {
	display: grid;
	gap: 12px;
	margin-bottom: var(--s-5);
}
.wpcf7 .field__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}
.wpcf7 .req {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-danger);
}
.wpcf7 .opt {
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--c-contrast-sub);
}
.wpcf7 .field__help {
	font-size: var(--fz-small);
	color: var(--c-contrast-sub);
}
.wpcf7 .input,
.wpcf7 .textarea {
	width: 100%;
	min-height: 64px;
	padding: 12px 20px;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	color: var(--c-contrast);
	font: inherit;
	font-size: 16px;
}
.wpcf7 .input:hover,
.wpcf7 .textarea:hover {
	border-color: var(--c-contrast);
}
.wpcf7 .textarea {
	height: 220px;
	min-height: 220px;
	padding-top: 16px;
	line-height: 1.7;
	resize: vertical;
}
.wpcf7 .radios {
	margin: 0 0 var(--s-5);
	padding: 0;
	border: 0;
}
.wpcf7 .radios legend {
	margin-bottom: 8px;
	padding: 0;
}
.wpcf7 .radios .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0;
}
.wpcf7 .radios .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 16px;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-surface);
	cursor: pointer;
}
.wpcf7 .radios .wpcf7-list-item label:hover {
	background: var(--c-base);
}
.wpcf7 .radios .wpcf7-list-item label:has(input:checked) {
	border-color: var(--c-primary);
	background: var(--c-base-alt);
	box-shadow: inset 0 0 0 1px var(--c-primary);
}
.wpcf7 .radios input,
.wpcf7 .check input {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--c-primary);
}
.wpcf7 .check {
	padding: 16px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-base);
}
.wpcf7 .check label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}
.wpcf7 .check input {
	margin-top: 3px;
}
.wpcf7 .check .req {
	margin-left: 8px;
}
.wpcf7 .text-link {
	color: var(--c-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.wpcf7 .form__submit {
	margin-top: var(--s-6);
	text-align: center;
}
.wpcf7 .form__submit .btn {
	min-width: 360px;
}
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 14px;
	color: var(--c-danger);
}
.wpcf7 form .wpcf7-response-output {
	margin: var(--s-3) 0 0;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--card);
}
.wpcf7 .wpcf7-spinner {
	display: none;
}
.wpcf7 form.submitting .wpcf7-spinner {
	display: inline-block;
}
@media (max-width: 767px) {
	.wpcf7 .field,
	.wpcf7 .radios {
		margin-bottom: var(--s-4);
	}
	.wpcf7 .radios .wpcf7-radio {
		grid-template-columns: 1fr;
	}
	.wpcf7 .form__submit .btn {
		width: 100%;
		min-width: 0;
	}
}

/* 道具:購入ボタンは幅いっぱい */
.is-style-tools .wp-block-media-text__content .wp-block-button,
.is-style-tools .wp-block-media-text__content .wp-block-button__link {
	width: 100%;
}