/* ==========================================================================
   HAND CLINIQUE — 土台の CSS
   1. トークン(theme.json の値を短い名前で使う)
   2. リセット・文字
   3. ボタン(core/button と、ヘッダー・フッターの .btn で共通)
   4. 追従ヘッダー・ふわっと表示・ふつうの固定ページ
   色・サイズは数値を直接書かず、トークンを通す。
   ========================================================================== */

/* 1. トークン ------------------------------------------------------------- */
:root,
body {
	/* 色 */
	--c-base: var(--wp--preset--color--base);
	--c-base-alt: var(--wp--preset--color--base-alt);
	--c-surface: var(--wp--preset--color--surface);
	--c-panel: var(--wp--preset--color--panel);
	--c-primary: var(--wp--preset--color--primary);
	--c-primary-strong: var(--wp--preset--color--primary-strong);
	--c-accent: var(--wp--preset--color--accent);
	--c-accent-deco: var(--wp--preset--color--accent-deco);
	--c-border: var(--wp--preset--color--border);
	--c-border-strong: var(--wp--preset--color--border-strong);
	--c-contrast: var(--wp--preset--color--contrast);
	--c-contrast-sub: var(--wp--preset--color--contrast-sub);
	--c-dark: var(--wp--preset--color--dark);
	--c-on-dark: var(--wp--preset--color--on-dark);
	--c-line: var(--wp--preset--color--line);
	--c-line-text: var(--wp--preset--color--line-text);
	--c-danger: var(--wp--preset--color--danger);
	--c-focus: var(--wp--preset--color--focus);
	--c-focus-ink: var(--wp--custom--color--focus-ink);

	/* 書体 */
	--ff-body: var(--wp--preset--font-family--body);
	--ff-heading: var(--wp--preset--font-family--heading);
	--ff-label: var(--wp--preset--font-family--label);

	/* 文字サイズ(SP の値は下の @media で入れ替える) */
	--fz-h1: var(--wp--preset--font-size--h-1);
	--fz-h2: var(--wp--preset--font-size--h-2);
	--fz-h3: var(--wp--preset--font-size--h-3);
	--fz-lead: var(--wp--preset--font-size--lead);
	--fz-body: var(--wp--preset--font-size--body);
	--fz-small: var(--wp--preset--font-size--small);
	--fz-note: var(--wp--preset--font-size--note);
	--fz-label: var(--wp--preset--font-size--label);
	--fz-label-s: var(--wp--preset--font-size--label-s);
	--fz-btn: var(--wp--custom--font-size-ui--button);
	--fz-btn-s: var(--wp--custom--font-size-ui--button-small);

	/* 余白(8px 刻み) */
	--s-1: var(--wp--preset--spacing--10);
	--s-2: var(--wp--preset--spacing--20);
	--s-3: var(--wp--preset--spacing--30);
	--s-4: var(--wp--preset--spacing--40);
	--s-5: var(--wp--preset--spacing--50);
	--s-6: var(--wp--preset--spacing--60);
	--s-8: var(--wp--preset--spacing--70);
	--s-10: var(--wp--preset--spacing--80);
	--s-12: var(--wp--preset--spacing--90);
	--s-16: var(--wp--preset--spacing--100);

	/* 幅・高さ */
	--content: var(--wp--style--global--content-size, 1000px);
	--narrow: var(--wp--custom--narrow);
	--gutter-pc: var(--wp--custom--gutter--pc);
	--gutter: var(--wp--custom--gutter--pc);
	--section-y: var(--wp--custom--section-y--pc);
	--head-gap: var(--wp--custom--head-gap--pc);
	--header-h: var(--wp--custom--header-h--pc);
	--btn-h: var(--wp--custom--button-h--pc);
	--btn-h-s: var(--wp--custom--button-h--pc-small);
	--btn-py: 14px;
	--btn-px: 32px;
}

/* ハンバーガーに切り替わる幅(1399px 以下)はヘッダーを 64px に */
@media (max-width: 1399px) {
	:root,
	body {
		--header-h: var(--wp--custom--header-h--menu);
	}
}

/* SP(767px 以下):文字サイズ・余白・ヘッダー・ボタンを入れ替える */
@media (max-width: 767px) {
	html body {
		--wp--preset--font-size--note: var(--wp--custom--font-size-sp--note);
		--wp--preset--font-size--small: var(--wp--custom--font-size-sp--small);
		--wp--preset--font-size--body: var(--wp--custom--font-size-sp--body);
		--wp--preset--font-size--lead: var(--wp--custom--font-size-sp--lead);
		--wp--preset--font-size--h-3: var(--wp--custom--font-size-sp--h-3);
		--wp--preset--font-size--h-2: var(--wp--custom--font-size-sp--h-2);
		--wp--preset--font-size--h-1: var(--wp--custom--font-size-sp--h-1);
		--wp--preset--font-size--label: var(--wp--custom--font-size-sp--label);
		--wp--preset--font-size--label-s: var(--wp--custom--font-size-sp--label-s);
		--wp--preset--font-size--price: var(--wp--custom--font-size-sp--price);
		--wp--preset--font-size--price-m: var(--wp--custom--font-size-sp--price-m);
		--wp--preset--font-size--price-card: var(--wp--custom--font-size-sp--price-card);
		--wp--preset--font-size--number: var(--wp--custom--font-size-sp--number);
	}
	:root,
	body {
		--gutter: var(--wp--custom--gutter--sp);
		--section-y: var(--wp--custom--section-y--sp);
		--head-gap: var(--wp--custom--head-gap--sp);
		--header-h: var(--wp--custom--header-h--sp);
		--btn-h: var(--wp--custom--button-h--sp);
		--btn-h-s: var(--wp--custom--button-h--sp-small);
		--fz-btn: var(--wp--custom--font-size-ui--button-sp);
		--fz-btn-s: var(--wp--custom--font-size-ui--button-small-sp);
		--btn-py: 10px;
		--btn-px: 20px;
	}
}

/* 2. リセット・文字 ------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--c-base);
	color: var(--c-contrast);
	font-family: var(--ff-body);
	font-size: var(--fz-body);
	line-height: 1.7;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) {
	margin: 0;
}

:where(.wp-site-blocks) :where(ul, ol) {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

p {
	text-wrap: pretty;
}

/* 改行位置の調整(書式「まとまり(改行しない)」) */
.ib {
	display: inline-block;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* フォーカス(DADS:黄色の輪+黒の内側線) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 4px solid var(--c-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--c-focus-ink);
	border-radius: var(--wp--custom--radius--s);
}

/* 3. ボタン --------------------------------------------------------------- */
/* 塗り(既定)。ホバーで白が左から流れ、文字はボタンの色に */
body .btn,
body .wp-block-button__link {
	--sweep: var(--c-surface);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: var(--btn-h);
	padding: var(--btn-py) var(--btn-px);
	border: 1px solid var(--c-primary);
	border-radius: var(--wp--custom--radius--button);
	background: var(--c-primary);
	color: var(--c-surface);
	font-family: var(--ff-body);
	font-size: var(--fz-btn);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.45s ease, border-color 0.45s ease;
}
body .btn::before,
body .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sweep);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body .btn:hover::before,
body .btn:focus-visible::before,
body .wp-block-button__link:hover::before,
body .wp-block-button__link:focus-visible::before {
	transform: scaleX(1);
}
body .btn--solid:hover,
body .btn--solid:focus-visible,
body .wp-block-button:not(.is-style-outline):not(.is-style-line):not(.is-style-text) .wp-block-button__link:hover,
body .wp-block-button:not(.is-style-outline):not(.is-style-line):not(.is-style-text) .wp-block-button__link:focus-visible {
	color: var(--c-primary);
}

/* 枠線 */
body .btn--outline,
body .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	--sweep: var(--c-primary);
	border: 1px solid var(--c-primary);
	background: var(--c-surface);
	color: var(--c-primary);
	padding: var(--btn-py) var(--btn-px);
}
body .btn--outline:hover,
body .btn--outline:focus-visible,
body .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
body .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	color: var(--c-surface);
}

/* LINE(#06C755 の塗り+白文字、左に LINE のマーク) */
body .btn--line,
body .wp-block-button.is-style-line > .wp-block-button__link {
	--sweep: var(--c-surface);
	border-color: var(--c-line);
	background: var(--c-line);
	color: var(--c-surface);
}
body .btn--line:hover,
body .btn--line:focus-visible,
body .wp-block-button.is-style-line > .wp-block-button__link:hover,
body .wp-block-button.is-style-line > .wp-block-button__link:focus-visible {
	color: var(--c-line-text);
}

/* 小さいボタン(高さ 48px / SP 44px) */
body .btn--m,
body .wp-block-button.is-size-small {
	--btn-py: 10px;
	--btn-px: 20px;
}
body .btn--m,
body .wp-block-button.is-size-small > .wp-block-button__link {
	min-height: var(--btn-h-s);
	font-size: var(--fz-btn-s);
}

/* テキストリンク */
body .wp-block-button.is-style-text > .wp-block-button__link {
	display: inline;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-accent);
	font-size: inherit;
	font-weight: 500;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	overflow: visible;
}
body .wp-block-button.is-style-text > .wp-block-button__link::before {
	content: none;
}
body .wp-block-button.is-style-text > .wp-block-button__link:hover {
	text-decoration-thickness: 2px;
}

/* 幅いっぱい */
.wp-block-button.is-width-full,
.wp-block-button.is-width-full > .wp-block-button__link {
	width: 100%;
}

/* アイコン:.btn は SVG、core/button は mask で付ける */
.btn svg {
	flex: none;
}
.btn .btn__arw {
	width: 18px;
	height: 18px;
	transition: transform 0.35s ease;
}
.btn:hover .btn__arw {
	transform: translateX(4px);
}
.btn .btn__line {
	width: 24px;
	height: 24px;
}

.wp-block-button.has-icon-arrow > .wp-block-button__link::after,
.wp-block-button.has-icon-ext > .wp-block-button__link::after,
.wp-block-button.has-icon-ig > .wp-block-button__link::after,
.wp-block-button.is-style-line > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
	transition: transform 0.35s ease;
}
.wp-block-button.has-icon-arrow > .wp-block-button__link {
	--icon: url(../icons/arw.svg);
}
.wp-block-button.has-icon-ext > .wp-block-button__link {
	--icon: url(../icons/ext.svg);
}
.wp-block-button.has-icon-arrow > .wp-block-button__link:hover::after,
.wp-block-button.has-icon-ext > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}
.wp-block-button.has-icon-ig > .wp-block-button__link {
	--icon: url(../icons/ig.svg);
}
.wp-block-button.has-icon-ig > .wp-block-button__link::after {
	order: -1;
	width: 22px;
	height: 22px;
}
.wp-block-button.is-style-line > .wp-block-button__link {
	--icon: url(../icons/line.svg);
}
.wp-block-button.is-style-line > .wp-block-button__link::after {
	order: -1;
	width: 24px;
	height: 24px;
}

@media (prefers-reduced-motion: reduce) {
	body .btn::before,
	body .wp-block-button__link::before,
	.btn .btn__arw,
	.wp-block-button__link::after {
		transition: none;
	}
}

/* 4. 追従ヘッダー -------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}
/* ドロワーを開いている間は、SP の固定ボタン・TOP ボタンより上に */
.is-drawer-open .site-header {
	z-index: 90;
}

/* ふわっと表示(JS が動くときだけ隠す。編集画面では動かさない) */
.hc-js [data-reveal] :is(.base-section-head, .base-card, .base-step, .wp-block-media-text, .base-banner-link, .is-style-double-frame, .is-style-form-card, .wp-block-table.is-style-info, .base-instagram, .is-style-serif-h3, .is-style-place) {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
.hc-js [data-reveal] :is(.base-section-head, .base-card, .base-step, .wp-block-media-text, .base-banner-link, .is-style-double-frame, .is-style-form-card, .wp-block-table.is-style-info, .base-instagram, .is-style-serif-h3, .is-style-place).is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.hc-js [data-reveal] :is(.base-section-head, .base-card, .base-step, .wp-block-media-text, .base-banner-link, .is-style-double-frame, .is-style-form-card, .wp-block-table.is-style-info, .base-instagram, .is-style-serif-h3, .is-style-place) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ふつうの固定ページ(プライバシーポリシーなど) */
.base-page {
	max-width: calc(var(--narrow) + var(--gutter-pc) * 2);
	margin-inline: auto;
	padding: var(--section-y) var(--gutter);
}
.base-page .wp-block-post-title {
	margin-bottom: var(--s-6);
	font-family: var(--ff-heading);
	font-size: var(--fz-h2);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.06em;
}
.base-page .wp-block-post-content > * + * {
	margin-top: 1em;
}
.base-page .wp-block-post-content :where(h2, h3) {
	margin-top: 2em;
	font-family: var(--ff-heading);
	font-weight: 600;
	line-height: 1.5;
}
.base-page .wp-block-post-content h2 {
	font-size: var(--fz-h3);
}
.base-page .wp-block-post-content :where(ul, ol) {
	padding-left: 1.5em;
	list-style: disc;
}
.base-page .wp-block-post-content ol {
	list-style: decimal;
}
.base-page .wp-block-post-content a {
	color: var(--c-accent);
	text-underline-offset: 4px;
}