@charset "utf-8";
/* =========================================================================
   はな&ミント / elecoloro-chiba
   方針：おしゃれでかっこよく、男女どちらにも。清潔感を最優先。
        ・ベース＝ディープインクブルー。差し色はカッパー（銅）1色だけ
        ・見出しは欧文 Outfit（細め・字間広め）＋和文はゴシック。明朝は使わない
        ・角は 2〜4px のごく浅いものだけ。装飾は 1px のヘアライン
        ・「1本ずつ」を縦の細線モチーフで表現する
        ・動きは入れるが、「動きを減らす」設定でも中身は必ず見える
   ブレークポイント： 768px / 1024px（モバイルファースト）
   ========================================================================= */

/* ---------- 1. トークン ---------- */
:root {
	--ink: #0a1620;
	--ink-2: #102330;
	--ink-3: #17323f;
	--ink-4: #23414f;

	--paper: #f8f6f3;
	--paper-2: #f0ebe4;
	--paper-3: #e5ddd3;

	--txt: #222a30;
	--txt-mute: #5f6c75;
	--txt-on-ink: #e9e5df;
	--txt-on-ink-mute: #9aa6ae;

	--copper: #b0714a;
	--copper-lt: #d49c72;
	--copper-dk: #8a5535;

	--line: rgba(34, 42, 48, .15);
	--line-soft: rgba(34, 42, 48, .08);
	--line-on-ink: rgba(233, 229, 223, .2);
	--line-on-ink-soft: rgba(233, 229, 223, .1);

	--sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
	--latin: "Outfit", "Helvetica Neue", Arial, sans-serif;

	--wrap: 1140px;
	--wrap-narrow: 800px;
	--gut: clamp(20px, 5.2vw, 56px);
	--sec-y: clamp(68px, 10vw, 136px);

	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur: .8s;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 76px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--txt);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 2;
	letter-spacing: .04em;
	font-feature-settings: "palt" 1;
	overflow-x: hidden;
}

/* 旧記事の px 指定 img がスマホで暴走しないように（必ず先に置く） */
img, picture, svg, iframe, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure, table { margin: 0; }
table { border-collapse: collapse; width: 100%; }

.sr,
.skip {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip:focus {
	position: fixed; top: 10px; left: 10px;
	width: auto; height: auto; margin: 0; padding: 10px 16px;
	clip: auto;
	background: var(--ink); color: var(--txt-on-ink);
	z-index: 300;
}

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gut) * 2);
	margin-inline: auto;
	padding-inline: var(--gut);
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gut) * 2); }

/* ---------- 3. 出現アニメーション ----------
   ★JSが動いているときだけ隠す。JS無効・reduce設定では最初から見えている。 */
.reveal { transition-delay: var(--d, 0ms); }

.elc-js .reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	transition-delay: var(--d, 0ms);
}
.elc-js .reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	/* ★中身は必ず見せる。止めるのは動きだけ */
	.elc-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- 4. 見出し ---------- */
.sec__head { margin-bottom: clamp(32px, 5vw, 56px); }

.sec__en {
	font-family: var(--latin);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: uppercase;
	/* ★--copper は紙色に対して比3.67でAAに届かない。12pxの小さい字なので copper-dk（5.48）にする */
	color: var(--copper-dk);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.sec__en::before {
	content: "";
	width: 26px; height: 1px;
	background: var(--copper);
	flex: none;
}

.sec__ja {
	font-size: clamp(23px, 5.4vw, 38px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .03em;
}
.sec__ja small {
	display: inline-block;
	font-size: .62em;
	font-weight: 500;
	letter-spacing: .02em;
}
.sec__lead {
	margin-top: 18px;
	max-width: 46em;
	color: var(--txt-mute);
	font-size: 14px;
}

.sec {
	padding-block: var(--sec-y);
	position: relative;
}
.sec--page { padding-top: clamp(104px, 16vw, 168px); }

/* ---------- 5. ヘッダー ---------- */
.hd {
	position: fixed;
	inset: 0 0 auto;
	z-index: 200;
	transition: transform .45s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
	border-bottom: 1px solid transparent;
}
.hd.is-solid {
	background: rgba(248, 246, 243, .93);
	border-bottom-color: var(--line-soft);
}
@supports (backdrop-filter: blur(6px)) {
	.hd.is-solid { background: rgba(248, 246, 243, .82); backdrop-filter: blur(10px); }
}
.hd.is-hide { transform: translate3d(0, -100%, 0); }

.hd__in {
	max-width: calc(var(--wrap) + var(--gut) * 2);
	margin-inline: auto;
	padding: 14px var(--gut);
	display: flex;
	align-items: center;
	gap: 20px;
}

.hd__logo a { display: block; line-height: 1.25; }
.hd__logo-en {
	display: block;
	font-family: var(--latin);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: .26em;
	color: var(--ink);
}
.hd__logo-ja {
	display: block;
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--txt-mute);
	margin-top: 2px;
}

.hd__nav { display: none; }

.hd__act { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.hd__tel { display: none; }

.hd__book {
	display: none;
	padding: 10px 20px;
	background: var(--ink);
	color: var(--txt-on-ink);
	font-size: 12px;
	letter-spacing: .12em;
	border-radius: 2px;
	transition: background-color .3s var(--ease);
}
.hd__book:hover { background: var(--copper); }

/* 読んだ量のインジケータ（動きではなく状態表示なので reduce でも出す） */
.hd__read {
	position: absolute;
	left: 0; bottom: -1px;
	height: 2px;
	width: 100%;
	transform: scaleX(var(--read, 0));
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--copper-dk), var(--copper-lt));
}

.burger {
	width: 44px; height: 44px;
	display: grid;
	place-content: center;
	gap: 5px;
	background: none; border: 0; padding: 0; cursor: pointer;
}
.burger span:not(.sr) {
	display: block;
	width: 22px; height: 1px;
	background: var(--ink);
	transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:not(.sr):nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:not(.sr):nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:not(.sr):nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. ドロワー ---------- */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: var(--ink);
	color: var(--txt-on-ink);
	padding: 96px var(--gut) 40px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -10px, 0);
	transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__nav li + li { border-top: 1px solid var(--line-on-ink-soft); }
.drawer__nav a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 16px 2px;
	font-size: 15px;
	letter-spacing: .06em;
}
.drawer__nav i {
	font-family: var(--latin);
	font-style: normal;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--copper-lt);
}
.drawer__cta { margin-top: 28px; }

/* ---------- 7. ボタン ---------- */
.cta-btns { display: grid; gap: 10px; }

.btn {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 4px 12px;
	padding: 15px 20px;
	border-radius: 3px;
	border: 1px solid transparent;
	line-height: 1.45;
	transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn .elc-ic { grid-row: 1 / 3; }
.btn span { font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.btn small { font-size: 10.5px; letter-spacing: .04em; opacity: .72; }
.btn:hover { transform: translateY(-2px); }

/* ★--copper（#b0714a）に白文字だとコントラスト比3.96でAAに届かない。
   予約ボタンはサイトで一番押してほしい場所なので、少しだけ濃い色を当てて4.61にする。
   単体で見て違いが分からない程度の差。ほかの用途の --copper は変えない。 */
.btn--primary { background: #a4663f; color: #fff; }
.btn--primary:hover { background: var(--copper-dk); }

.btn--line { background: var(--ink); color: var(--txt-on-ink); }
.btn--line:hover { background: var(--ink-3); }

.btn--tel { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--tel span { font-family: var(--latin); font-size: 17px; letter-spacing: .07em; }
.btn--tel:hover { border-color: var(--copper); color: var(--copper-dk); }

/* 濃い背景の上に置くとき */
.sec--contact .btn--tel,
.drawer .btn--tel { color: var(--txt-on-ink); border-color: var(--line-on-ink); }
.sec--contact .btn--tel:hover,
.drawer .btn--tel:hover { color: #fff; border-color: var(--copper-lt); }

/* ---------- 8. ヒーロー ---------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	padding-block: 120px 96px;
	background: var(--ink);
	color: var(--txt-on-ink);
	overflow: hidden;
}
.hero__media {
	position: absolute;
	inset: -8% 0 -8%;
	z-index: 0;
	will-change: transform;
}
.hero__media .hero__img,
.hero__media .ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 22, 32, .74) 0%, rgba(10, 22, 32, .46) 34%, rgba(10, 22, 32, .88) 100%);
}
.hero__in { position: relative; z-index: 2; width: 100%; }

.hero__en {
	font-family: var(--latin);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--copper-lt);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hero__en::before { content: ""; width: 34px; height: 1px; background: var(--copper-lt); flex: none; }

.hero__lead {
	font-size: clamp(30px, 8.4vw, 62px);
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: .02em;
	margin-bottom: 22px;
}
.hero__body {
	font-size: 14px;
	line-height: 2.05;
	color: var(--txt-on-ink);
	max-width: 34em;
	margin-bottom: 20px;
}
.hero__place {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .05em;
	color: var(--txt-on-ink-mute);
	margin-bottom: 28px;
}
.hero__place .elc-ic { flex: none; margin-top: 4px; color: var(--copper-lt); }

.hero__scroll {
	position: absolute;
	right: var(--gut);
	bottom: 0;
	z-index: 2;
	font-family: var(--latin);
	font-size: 9.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--txt-on-ink-mute);
	writing-mode: vertical-rl;
	padding-bottom: 66px;
	display: none;
}
.hero__scroll span {
	position: absolute;
	left: 50%; bottom: 0;
	width: 1px; height: 54px;
	background: var(--line-on-ink);
	overflow: hidden;
}
.hero__scroll span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--copper-lt);
	animation: elc-scroll 2.4s var(--ease) infinite;
}
@keyframes elc-scroll {
	0% { transform: translateY(-100%); }
	60%, 100% { transform: translateY(100%); }
}

/* ---------- 9. 3つの約束 ---------- */
.sec--promise {
	background: var(--ink);
	color: var(--txt-on-ink);
	padding-block: clamp(48px, 8vw, 86px);
}
.promise { display: grid; gap: 34px; }
.promise__item {
	position: relative;
	padding-left: 20px;
}
/* 「1本ずつ」の縦の細線モチーフ */
.promise__item::before {
	content: "";
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	width: 1px;
	background: linear-gradient(180deg, var(--copper) 0%, rgba(176, 113, 74, 0) 100%);
}
.promise__ic { color: var(--copper-lt); display: block; margin-bottom: 12px; }
.promise__no {
	font-family: var(--latin);
	font-size: 10.5px;
	letter-spacing: .24em;
	color: var(--txt-on-ink-mute);
	margin-bottom: 6px;
}
.promise__title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .04em;
	margin-bottom: 10px;
}
.promise__body { font-size: 13.5px; line-height: 1.95; color: var(--txt-on-ink-mute); }

/* ---------- 10. お困りごと ---------- */
.sec--worry { background: var(--paper-2); }
.worry { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.worry__item {
	background: var(--paper-2);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 4px;
	font-size: 14.5px;
	letter-spacing: .03em;
}
.worry__item .elc-ic { flex: none; margin-top: 6px; color: var(--copper); }

/* ---------- 11. 美容電気脱毛とは ---------- */
.about { display: grid; gap: 34px; }
.about__text p + p { margin-top: 1.5em; }
.about__text p { font-size: 14.5px; line-height: 2.1; }
.about__note {
	margin-top: 26px !important;
	padding: 18px 20px;
	border-left: 2px solid var(--copper);
	background: var(--paper-2);
	font-size: 13px !important;
	line-height: 1.95 !important;
	color: var(--txt-mute);
}
.about__media .about__img,
.about__media .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }

/* ---------- 12. 違いの表 ---------- */
.sec--compare { background: var(--paper-2); }
.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.cmp__table { min-width: 720px; font-size: 13px; }
.cmp__table th,
.cmp__table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
	border-bottom: 1px solid var(--line-soft);
	border-right: 1px solid var(--line-soft);
}
.cmp__table thead th {
	background: var(--ink);
	color: var(--txt-on-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	border-bottom-color: var(--ink);
	white-space: nowrap;
}
/* ★白文字を乗せる面は #a4663f に統一（--copper のままだと比3.96でAAに届かない） */
.cmp__table thead th.is-own { background: #a4663f; color: #fff; border-bottom-color: #a4663f; }
.cmp__table tbody th {
	background: var(--paper-2);
	font-weight: 600;
	white-space: nowrap;
	width: 7em;
}
.cmp__table td.is-own { background: rgba(176, 113, 74, .07); font-weight: 600; }
.cmp__table tr:last-child th,
.cmp__table tr:last-child td { border-bottom: 0; }
.cmp__table th:last-child,
.cmp__table td:last-child { border-right: 0; }

.cmp__note { margin-top: 16px; font-size: 12px; line-height: 1.9; color: var(--txt-mute); }

/* ---------- 13. 選ばれる理由 ---------- */
.reason { display: grid; gap: 1px; background: var(--line-soft); }
.reason__item { background: var(--paper); padding: 28px 4px; position: relative; }
.reason__no {
	font-family: var(--latin);
	font-size: 26px;
	font-weight: 200;
	letter-spacing: .1em;
	color: var(--copper);
	line-height: 1;
	margin-bottom: 12px;
}
.reason__title { font-size: 16.5px; font-weight: 600; line-height: 1.6; margin-bottom: 10px; }
.reason__body { font-size: 13.5px; line-height: 1.95; color: var(--txt-mute); }

/* ---------- 14. 部位 ---------- */
.sec--parts { background: var(--paper-2); }
.parts { display: grid; gap: 24px; }
.parts__item { background: var(--paper); border-radius: 3px; overflow: hidden; }
.parts__media .parts__img,
.parts__media .ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.parts__body { padding: 20px 20px 24px; }
.parts__title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-soft);
}
.parts__body p { font-size: 13.5px; line-height: 1.95; color: var(--txt-mute); }

/* ---------- 15. 男性の方へ ---------- */
.sec--mens { background: var(--ink); color: var(--txt-on-ink); }
.sec--mens .sec__ja { font-size: clamp(22px, 5vw, 34px); }
.mens { display: grid; gap: 30px; }
.mens__media .mens__img,
.mens__media .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.mens__text > p { font-size: 14px; line-height: 2.05; color: var(--txt-on-ink-mute); margin-top: 20px; }
.mens__list { margin-top: 22px; display: grid; gap: 10px; }
.mens__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.mens__list .elc-ic { flex: none; margin-top: 5px; color: var(--copper-lt); }
.mens__note {
	margin-top: 22px;
	font-size: 12px !important;
	color: var(--txt-on-ink-mute);
	padding-top: 16px;
	border-top: 1px solid var(--line-on-ink-soft);
}

/* ---------- 16. 料金 ---------- */
.price__block { margin-bottom: 26px; }
.price__h {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--ink);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}
.price__h small { font-family: var(--latin); font-size: 12px; font-weight: 400; letter-spacing: .1em; color: var(--copper-dk); }

.price__new { display: grid; gap: 1px; background: var(--line-soft); }
.price__new li {
	background: var(--paper);
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 2px 14px;
	padding: 15px 4px;
}
.price__name { font-size: 14px; font-weight: 600; }
.price__yen { font-family: var(--latin); font-size: 21px; font-weight: 300; letter-spacing: .04em; color: var(--copper-dk); }
.price__yen small { font-family: var(--sans); font-size: 11px; margin-left: 2px; }
.price__unit { grid-column: 1 / -1; font-size: 11.5px; color: var(--txt-mute); letter-spacing: .05em; }

.price__grid { display: grid; gap: 26px; }
.price__table th,
.price__table td {
	padding: 12px 4px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13.5px;
	line-height: 1.7;
	background: var(--paper);
}
.price__table th { text-align: left; font-weight: 500; }
.price__table td { text-align: right; font-family: var(--latin); font-size: 16px; font-weight: 300; letter-spacing: .04em; white-space: nowrap; }
.price__table td small { font-family: var(--sans); font-size: 11px; margin-left: 2px; }

.price__note { margin-top: 24px; font-size: 12px; line-height: 2; color: var(--txt-mute); }

/* ---------- 17. 流れ ---------- */
.sec--flow { background: var(--paper-2); }
.flow { display: grid; gap: 0; position: relative; }
.flow__item {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 0 16px;
	padding-bottom: 30px;
	position: relative;
}
.flow__item::before {
	content: "";
	position: absolute;
	left: 26px; top: 34px; bottom: 0;
	width: 1px;
	background: var(--line);
}
.flow__item:last-child { padding-bottom: 0; }
.flow__item:last-child::before { display: none; }
.flow__no {
	width: 54px; height: 54px;
	display: grid; place-content: center;
	border: 1px solid var(--copper);
	border-radius: 50%;
	background: var(--paper-2);
	font-family: var(--latin);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .08em;
	color: var(--copper-dk);
	position: relative;
	z-index: 1;
}
.flow__title { font-size: 16px; font-weight: 600; margin-bottom: 8px; padding-top: 12px; }
.flow__body p { font-size: 13.5px; line-height: 1.95; color: var(--txt-mute); }

/* ---------- 18. サロン ---------- */
.salon { display: grid; gap: 26px; }
.salon__media .salon__img,
.salon__media .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; margin-bottom: 14px; }
.salon__title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.salon__item p { font-size: 13px; line-height: 1.9; color: var(--txt-mute); }

/* ---------- 19. Q&A ---------- */
.sec--faq { background: var(--paper-2); }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.7;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .elc-ic { flex: none; margin-top: 5px; color: var(--copper); transition: transform .35s var(--ease); }
.faq__item[open] summary .elc-ic { transform: rotate(45deg); }
.faq__q { flex: 1 1 auto; }
.faq__a { padding: 0 2px 20px; }
.faq__a p { font-size: 13.5px; line-height: 2; color: var(--txt-mute); }

/* ---------- 20. アクセス ---------- */
.access { display: grid; gap: 28px; }
.access__map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 3px;
	overflow: hidden;
	background: var(--paper-2);
}
.access__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.access__info dl > div {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: 0 14px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line-soft);
}
.access__info dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--copper-dk); padding-top: 3px; }
.access__info dd { font-size: 13.5px; line-height: 1.85; }
.access__info dd small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.8; color: var(--txt-mute); }

.access__area {
	margin-top: 26px;
	padding: 18px 20px;
	background: var(--paper-2);
	border-radius: 3px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--txt-mute);
}
.access__area strong { display: block; color: var(--txt); font-size: 13px; margin-bottom: 4px; }

/* ---------- 21. お問い合わせ ---------- */
.sec--contact {
	background: var(--ink);
	color: var(--txt-on-ink);
	overflow: hidden;
}
.contact__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(70% 90% at 82% 8%, rgba(176, 113, 74, .3) 0%, rgba(176, 113, 74, 0) 62%),
		radial-gradient(60% 80% at 8% 96%, rgba(23, 50, 63, .8) 0%, rgba(23, 50, 63, 0) 60%);
	pointer-events: none;
}
.contact { position: relative; text-align: center; }
.contact .sec__en { justify-content: center; color: var(--copper-lt); }
.contact .sec__en::before { background: var(--copper-lt); }
.contact .sec__ja { margin-bottom: 20px; }
.contact__lead {
	font-size: 14px;
	line-height: 2.05;
	color: var(--txt-on-ink-mute);
	max-width: 34em;
	margin: 0 auto 30px;
}
.contact__note { margin-top: 20px; font-size: 11.5px; color: var(--txt-on-ink-mute); }

/* ---------- 22. フッター ---------- */
.ft {
	background: var(--ink-2);
	color: var(--txt-on-ink);
	padding: clamp(48px, 8vw, 76px) 0 100px;
}
.ft__in {
	max-width: calc(var(--wrap) + var(--gut) * 2);
	margin-inline: auto;
	padding-inline: var(--gut);
	display: grid;
	gap: 34px;
}
.ft__logo-en { display: block; font-family: var(--latin); font-size: 17px; font-weight: 300; letter-spacing: .26em; }
.ft__logo-ja { display: block; font-size: 11px; letter-spacing: .1em; color: var(--txt-on-ink-mute); margin-top: 4px; }
.ft__note { margin-top: 14px; font-size: 12px; color: var(--txt-on-ink-mute); }
.ft__sns { margin-top: 16px; display: flex; gap: 12px; }
.ft__sns a {
	width: 38px; height: 38px;
	display: grid; place-content: center;
	border: 1px solid var(--line-on-ink);
	border-radius: 50%;
	transition: border-color .3s var(--ease), color .3s var(--ease);
}
.ft__sns a:hover { border-color: var(--copper-lt); color: var(--copper-lt); }

.ft__info > div {
	display: grid;
	grid-template-columns: 5em 1fr;
	gap: 0 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-on-ink-soft);
	font-size: 12.5px;
	line-height: 1.8;
}
.ft__info dt { color: var(--txt-on-ink-mute); font-size: 11px; padding-top: 3px; }

.ft__nav ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ft__nav a { font-size: 12.5px; color: var(--txt-on-ink-mute); transition: color .3s var(--ease); }
.ft__nav a:hover { color: var(--copper-lt); }

.ft__disc {
	max-width: calc(var(--wrap) + var(--gut) * 2);
	margin: 34px auto 0;
	padding: 18px var(--gut) 0;
	border-top: 1px solid var(--line-on-ink-soft);
	font-size: 11px;
	line-height: 1.95;
	color: var(--txt-on-ink-mute);
}
.ft__copy {
	margin-top: 18px;
	text-align: center;
	font-family: var(--latin);
	font-size: 10.5px;
	letter-spacing: .12em;
	color: var(--txt-on-ink-mute);
}

/* ---------- 23. スマホ固定バー ---------- */
.bar {
	position: fixed;
	inset: auto 0 0;
	z-index: 180;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--ink);
	border-top: 1px solid var(--line-on-ink-soft);
	transform: translate3d(0, 100%, 0);
	transition: transform .4s var(--ease);
}
.bar.is-on { transform: none; }
.bar__item {
	display: grid;
	place-items: center;
	gap: 3px;
	padding: 9px 4px calc(9px + env(safe-area-inset-bottom, 0px));
	color: var(--txt-on-ink);
	font-size: 10.5px;
	letter-spacing: .04em;
}
.bar__item + .bar__item { border-left: 1px solid var(--line-on-ink-soft); }
/* ★予約ボタンと同じ理由（白文字の比3.96→4.61）。背景だけ濃くする */
.bar__item--book { background: #a4663f; color: #fff; }

/* ---------- 24. 画像プレースホルダー ---------- */
.ph {
	display: block;
	background:
		repeating-linear-gradient(45deg, var(--paper-3) 0 10px, var(--paper-2) 10px 20px);
	position: relative;
}
.ph i {
	position: absolute;
	inset: 0;
	border: 1px dashed var(--line);
}
.hero .ph { background: linear-gradient(160deg, var(--ink-4) 0%, var(--ink) 70%); }
.hero .ph i { border: 0; }

/* ---------- 25. 記事本文・一覧 ---------- */
.entry { font-size: 14.5px; line-height: 2.05; }
.entry p { margin-bottom: 1.6em; }
.entry h2 { font-size: 20px; font-weight: 600; margin: 2.2em 0 .9em; padding-bottom: .5em; border-bottom: 1px solid var(--line); }
.entry h3 { font-size: 17px; font-weight: 600; margin: 1.9em 0 .7em; }
.entry ul, .entry ol { margin: 0 0 1.6em 1.4em; }
.entry ul li { list-style: disc; }
.entry ol li { list-style: decimal; }
.entry li { margin-bottom: .4em; }
.entry a { color: var(--copper-dk); text-decoration: underline; text-underline-offset: 3px; }

.postlist { border-top: 1px solid var(--line); }
.postlist__item { border-bottom: 1px solid var(--line); }
.postlist__item a { display: grid; gap: 4px; padding: 18px 2px; }
.postlist__item time { font-family: var(--latin); font-size: 11.5px; letter-spacing: .12em; color: var(--copper-dk); }
.postlist__item span { font-size: 14.5px; font-weight: 600; line-height: 1.7; }

.empty { color: var(--txt-mute); font-size: 14px; }
.backlink { margin-top: 40px; }
.backlink a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--copper-dk); }
.backlink .elc-ic { transform: rotate(180deg); }

/* =========================================================================
   26. タブレット（768〜1023）
   ========================================================================= */
@media (min-width: 768px) {
	body { font-size: 15.5px; }

	.hero__scroll { display: block; }
	.hero { padding-block: 150px 110px; }

	.promise { grid-template-columns: repeat(3, 1fr); gap: 30px; }
	.worry { grid-template-columns: repeat(2, 1fr); }
	.worry__item { padding: 20px 22px; }

	.about { grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
	.about__media .about__img,
	.about__media .ph { aspect-ratio: 3 / 4; }

	.reason { grid-template-columns: repeat(2, 1fr); }
	.reason__item { padding: 30px 26px; }

	.parts { grid-template-columns: repeat(2, 1fr); }

	.mens { grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }

	.price__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }
	/* ★件数が変わっても空きマスが出ないように、列数を固定しない */
	.price__new { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; }
	.price__new li { padding: 16px 20px; }

	.flow { grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
	.flow__item { padding-bottom: 34px; }

	.salon { grid-template-columns: repeat(2, 1fr); gap: 30px; }

	.access { grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
	.access__map { aspect-ratio: 3 / 4; }

	.ft__in { grid-template-columns: 1fr 1.1fr; gap: 40px; }
	.ft__nav { grid-column: 1 / -1; }

	.cta-btns--hero,
	.cta-btns--wide { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   27. PC（1024〜）
   ========================================================================= */
@media (min-width: 1024px) {
	html { scroll-padding-top: 92px; }
	body { font-size: 16px; }

	.hd__in { padding-block: 18px; }
	.hd__logo-en { font-size: 17px; }
	.hd__logo-ja { font-size: 10.5px; }

	.hd__nav { display: block; margin-left: 32px; }
	.hd__nav ul { display: flex; gap: 22px; }
	.hd__nav a {
		font-size: 12.5px;
		letter-spacing: .06em;
		position: relative;
		padding-block: 6px;
	}
	.hd__nav a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 1px;
		background: var(--copper);
		transform: scaleX(0);
		transform-origin: 0 50%;
		transition: transform .35s var(--ease);
	}
	.hd__nav a:hover::after { transform: none; }

	.hd__tel {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		font-family: var(--latin);
		font-size: 15px;
		letter-spacing: .06em;
		color: var(--ink);
	}
	.hd__tel .elc-ic { color: var(--copper); }
	.hd__book { display: inline-block; }
	.burger { display: none; }
	.drawer { display: none; }

	/* スマホ用の固定バーはPCでは出さない */
	.bar { display: none; }
	.ft { padding-bottom: clamp(48px, 8vw, 76px); }

	.about { grid-template-columns: 1.2fr .8fr; gap: 64px; }
	.mens { gap: 60px; }

	.reason { grid-template-columns: repeat(3, 1fr); }
	.parts { grid-template-columns: repeat(3, 1fr); }
	.salon { grid-template-columns: repeat(4, 1fr); }
	.worry { grid-template-columns: repeat(3, 1fr); }

	.price__grid { grid-template-columns: repeat(3, 1fr); }
	.price__new { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

	.access { grid-template-columns: 1.05fr .95fr; gap: 48px; }
	.access__map { aspect-ratio: 4 / 3; }

	.cmp__table { min-width: 0; font-size: 13.5px; }

	.ft__in { grid-template-columns: 1fr 1.2fr .8fr; }
	.ft__nav { grid-column: auto; }
	.ft__nav ul { flex-direction: column; gap: 11px; }

	.btn:hover { transform: translateY(-3px); }
}

/* ---------- 28. ヒーローの h1（キーワード行＋キャッチ） ---------- */
.hero__h1 { margin-bottom: 22px; }
.hero__h1-sub {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.7;
	color: var(--copper-lt);
	margin-bottom: 12px;
}
.hero__h1 .hero__lead { display: block; margin-bottom: 0; }

/* ---------- 29. 先にお伝えすること ---------- */
.sec--risk { background: var(--paper-2); }
.risk { display: grid; gap: 1px; background: var(--line-soft); border-top: 1px solid var(--line-soft); }
.risk__item {
	background: var(--paper-2);
	padding: 22px 4px;
	position: relative;
}
.risk__title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 8px;
	padding-left: 16px;
	position: relative;
}
.risk__title::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: 7px; height: 1px;
	background: var(--copper);
}
.risk__item p { font-size: 13.5px; line-height: 1.95; color: var(--txt-mute); padding-left: 16px; }

@media (min-width: 768px) {
	.hero__h1-sub { font-size: 13px; }
	.risk__item { padding: 24px 22px; }
}

/* ---------- 30. ヒーローの上にいる間のヘッダー ----------
   トップページの最上部はヒーローの暗い暗幕の上に乗るので、文字を白側にする。
   下層ページにはヒーローが無いので、この指定は当てない。 */
/* ★★最初だけヘッダーの背景が透ける。その下が暗い帯なら文字を明るい側に。
   トップだけに当てていたので、下層ページでは濃紺の帯に濃い文字が乗って
   ロゴもナビも消えていた。判定は body クラス .elc-dark-head（elc_has_dark_head）。 */
.elc-dark-head .hd:not(.is-solid) .hd__logo-en,
.elc-dark-head .hd:not(.is-solid) .hd__tel { color: var(--txt-on-ink); }
.elc-dark-head .hd:not(.is-solid) .hd__logo-ja { color: var(--txt-on-ink-mute); }
.elc-dark-head .hd:not(.is-solid) .hd__nav a { color: var(--txt-on-ink); }
.elc-dark-head .hd:not(.is-solid) .hd__tel .elc-ic { color: var(--copper-lt); }
.elc-dark-head .hd:not(.is-solid) .burger span:not(.sr) { background: var(--txt-on-ink); }
.elc-dark-head .hd:not(.is-solid) .hd__book {
	background: transparent;
	color: var(--txt-on-ink);
	border: 1px solid var(--line-on-ink);
}
.elc-dark-head .hd:not(.is-solid) .hd__book:hover { background: var(--copper); border-color: var(--copper); color: #fff; }

/* ドロワーを開いている間は必ず白側（背景がインクなので） */
body.is-drawer .hd .hd__logo-en,
body.is-drawer .hd .hd__tel { color: var(--txt-on-ink); }
body.is-drawer .hd .burger span:not(.sr) { background: var(--txt-on-ink); }
body.is-drawer .hd.is-solid { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }

/* ---------- 31. スマホでヒーローを詰める ----------
   ボタンの3つ目（電話）が画面の折り目でちょうど切れていたので、上下の余白と行間を詰める。 */
@media (max-width: 767px) {
	.hero { padding-block: 104px 72px; }
	.hero__en { margin-bottom: 16px; }
	.hero__h1 { margin-bottom: 18px; }
	.hero__body { font-size: 13.5px; line-height: 1.95; margin-bottom: 16px; }
	.hero__place { margin-bottom: 22px; line-height: 1.75; }
	.hero .btn { padding: 13px 18px; }
	.hero .btn span { font-size: 13.5px; }
}

/* =========================================================================
   32. 実機で見て直したところ（2026-09-16）
   ========================================================================= */

/* ヒーローの暗幕が中央で薄く、写真の明るい部分に文字が負けていた */
.hero__veil {
	background: linear-gradient(180deg,
		rgba(10, 22, 32, .80) 0%,
		rgba(10, 22, 32, .60) 36%,
		rgba(10, 22, 32, .78) 72%,
		rgba(10, 22, 32, .94) 100%);
}
.hero__en { color: #e5b892; }

/* ヒーローの電話ボタンが背景なしで写真に溶けていた */
.hero .btn--tel {
	background: rgba(10, 22, 32, .48);
	border-color: rgba(233, 229, 223, .38);
	color: var(--txt-on-ink);
}
.hero .btn--tel small { opacity: .85; }
.hero .btn--tel:hover { background: rgba(10, 22, 32, .7); border-color: var(--copper-lt); color: #fff; }

/* 最後のCTAは背景がインクなので、LINEボタン（背景＝インク）が消えていた */
.hero .btn--line,
.sec--contact .btn--line,
.drawer .btn--line {
	background: rgba(233, 229, 223, .1);
	border-color: var(--line-on-ink);
}
.hero .btn--line:hover,
.sec--contact .btn--line:hover,
.drawer .btn--line:hover { background: rgba(233, 229, 223, .18); border-color: var(--copper-lt); }

@media (min-width: 768px) {
	/* 2列になると縦の連結線が「01→03」に見えて紛らわしいので消す */
	.flow__item::before { display: none; }
}

/* =========================================================================
   33. 動きを強くする層（2026-09-16 第2稿）
   ★ここから下は「見せ方」の層。JSが動かない環境・「動きを減らす」設定では
     すべて最初から表示済みになるようにしてある（中身が消えない）。
   ========================================================================= */

/* ---------- 33-1. 入場ローダー（JSが作る。HTMLには無い） ---------- */
.ld {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: var(--ink);
	display: grid;
	place-items: center;
	transition: opacity .6s var(--ease), visibility .6s;
}
.ld__logo {
	font-family: var(--latin);
	font-size: clamp(22px, 6vw, 40px);
	font-weight: 200;
	letter-spacing: .5em;
	padding-left: .5em;
	color: var(--txt-on-ink);
	overflow: hidden;
	white-space: nowrap;
}
.ld__logo span {
	display: inline-block;
	opacity: 0;
	transform: translateY(70%);
	animation: ld-in .7s var(--ease) forwards;
}
@keyframes ld-in { to { opacity: 1; transform: none; } }
.ld__bar {
	position: absolute;
	left: 50%; bottom: 34%;
	width: min(220px, 40vw); height: 1px;
	transform: translateX(-50%);
	background: var(--line-on-ink-soft);
	overflow: hidden;
}
.ld__bar i {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--copper-dk), var(--copper-lt));
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation: ld-bar 1s var(--ease) forwards;
}
@keyframes ld-bar { to { transform: scaleX(1); } }
.ld.is-out { opacity: 0; visibility: hidden; }
body.is-loading { overflow: hidden; }

/* ---------- 33-2. ヒーロー：スライドショー＋ゆっくり寄る ---------- */
.hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s var(--ease);
}
.hero__slide.is-on { opacity: 1; }

.hero__kb {
	position: absolute;
	inset: -6% -3%;
	display: block;
	will-change: transform;
}
.hero__kb picture, .hero__kb .ph { display: block; width: 100%; height: 100%; }
.hero__img, .hero__stage .ph { width: 100%; height: 100%; object-fit: cover; }

.elc-js .hero__slide.is-on .hero__img { animation: kb 11s linear forwards; }
@keyframes kb {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(0, -1.2%, 0); }
}

/* 砂目。写真の安っぽさを消して奥行きを出す */
.hero__grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .45;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
	background-size: 160px 160px;
}

/* 「1本ずつ」を表す縦の線 */
.hero__needle {
	position: absolute;
	left: var(--gut);
	bottom: 0;
	z-index: 3;
	width: 1px;
	height: clamp(56px, 12vh, 120px);
	background: linear-gradient(180deg, rgba(212, 156, 114, 0) 0%, var(--copper-lt) 100%);
	transform-origin: 50% 100%;
	transform: scaleY(var(--needle, 1));
}

/* 切り替えドット */
.hero__dots {
	position: absolute;
	left: var(--gut);
	bottom: 26px;
	z-index: 3;
	display: flex;
	gap: 10px;
}
.hero__dot {
	width: 26px; height: 22px;
	padding: 0; border: 0; background: none; cursor: pointer;
	display: grid; align-items: center;
}
.hero__dot i {
	display: block;
	height: 1px;
	background: rgba(233, 229, 223, .32);
	position: relative;
	overflow: hidden;
}
.hero__dot i::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--copper-lt);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
.hero__dot.is-on i::after { animation: dot 6s linear forwards; }
@keyframes dot { to { transform: scaleX(1); } }

/* ---------- 33-3. 行マスクの出現 ---------- */
.mask-line { display: block; overflow: hidden; }
.mask-line > i {
	display: block;
	font-style: normal;
	transform: translate3d(0, 110%, 0);
	transition: transform 1s var(--ease);
	transition-delay: var(--md, 0ms);
}
.is-shown .mask-line > i { transform: none; }

/* 欧文の1文字ずつ */
.ch {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, 40%, 0);
	transition: opacity .5s var(--ease), transform .5s var(--ease);
	transition-delay: var(--cd, 0ms);
}
.is-shown .ch { opacity: 1; transform: none; }

/* ヒーロー下部 */
.elc-js .hero [data-fade] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
	transition-delay: var(--fd, 0ms);
}
.elc-js .hero.is-shown [data-fade] { opacity: 1; transform: none; }

/* ---------- 33-4. 画像のワイプ出現 ----------
   ★★clip-path で高さ0に潰した要素は IntersectionObserver が「画面に入っていない」と
     判定するため、その要素自身を監視対象にすると永久に発火せず、画像が出てこない。
     監視するのは外側（[data-clip]）、クリップを掛けるのは内側の画像だけにする。 */
.elc-js [data-clip] { overflow: hidden; }
.elc-js [data-clip] > picture,
.elc-js [data-clip] > .ph,
.elc-js [data-clip] > img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s var(--ease);
	display: block;
}
.elc-js [data-clip].is-in > picture,
.elc-js [data-clip].is-in > .ph,
.elc-js [data-clip].is-in > img { clip-path: inset(0 0 0 0); }
.elc-js [data-clip] img,
.elc-js [data-clip] .ph { transform: scale(1.14); transition: transform 1.5s var(--ease); }
.elc-js [data-clip].is-in img,
.elc-js [data-clip].is-in .ph { transform: none; }

/* ---------- 33-5. 流れる帯 ---------- */
.mq {
	overflow: hidden;
	background: var(--ink);
	color: var(--txt-on-ink);
	border-block: 1px solid var(--line-on-ink-soft);
	padding-block: 16px;
}
.mq--2 { background: #a4663f; color: #fff; border-color: rgba(255, 255, 255, .22); }
.mq__track { display: flex; width: max-content; will-change: transform; }
.mq__row {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-right: 26px;
	white-space: nowrap;
}
.mq__w {
	font-size: clamp(20px, 4.6vw, 40px);
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.2;
}
.mq--1 .mq__w:nth-child(4n+1) {
	color: transparent;
	-webkit-text-stroke: 1px var(--copper-lt);
}
.mq__sep { color: var(--copper-lt); font-size: 14px; }
.mq--2 .mq__sep { color: rgba(255, 255, 255, .7); }

/* ---------- 33-6. ゴースト数字 ---------- */
.reason__item { overflow: hidden; }
.reason__ghost {
	position: absolute;
	right: 6px; top: -10px;
	font-family: var(--latin);
	font-size: clamp(76px, 12vw, 130px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: 0;
	color: transparent;
	-webkit-text-stroke: 1px rgba(176, 113, 74, .26);
	pointer-events: none;
	will-change: transform;
}

/* ---------- 33-7. 部位カード ---------- */
.parts__item { position: relative; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.parts__media { position: relative; overflow: hidden; }
.parts__no {
	position: absolute;
	left: 0; bottom: 0;
	z-index: 2;
	padding: 7px 13px;
	background: var(--ink);
	color: var(--copper-lt);
	font-family: var(--latin);
	font-size: 12px;
	letter-spacing: .16em;
}
.parts__title { position: relative; }
.parts__title::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: var(--copper);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .6s var(--ease);
}
@media (hover: hover) {
	.parts__img { transition: transform 1s var(--ease); }
	.parts__item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -26px rgba(10, 22, 32, .5); }
	.parts__item:hover .parts__img { transform: scale(1.07); }
	.parts__item:hover .parts__title::after { transform: none; }
}

/* ---------- 33-8. 流れの線をスクロールで伸ばす ---------- */
.flow { position: relative; }
.flow__rail {
	position: absolute;
	left: 26px; top: 28px; bottom: 28px;
	width: 1px;
	background: var(--line);
	overflow: hidden;
}
.flow__rail i {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--copper-lt), var(--copper-dk));
	transform: scaleY(var(--fill, 0));
	transform-origin: 50% 0;
}
.elc-js .flow__item::before { display: none; }
.flow__no { transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.flow__item.is-in .flow__no { border-color: var(--copper); background: var(--copper); color: #fff; }

/* ---------- 33-9. 比較表の行stagger ---------- */
.elc-js .cmp__table tbody tr {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
	transition-delay: var(--rd, 0ms);
}
.elc-js .cmp__table tbody tr.is-in { opacity: 1; transform: none; }
.cmp__table thead th.is-own { position: relative; overflow: hidden; }
.cmp__table thead th.is-own::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 70%);
	transform: translateX(-120%);
}
.cmp.is-in .cmp__table thead th.is-own::after { animation: shine 1.6s var(--ease) .4s forwards; }
@keyframes shine { to { transform: translateX(120%); } }

/* ---------- 33-10. カーソル（PCのマウス操作のときだけ） ---------- */
.cur {
	position: fixed;
	top: 0; left: 0;
	z-index: 400;
	width: 30px; height: 30px;
	margin: -15px 0 0 -15px;
	border: 1px solid var(--copper);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s var(--ease), width .3s var(--ease), height .3s var(--ease),
		margin .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.cur.is-on { opacity: 1; }
.cur.is-hot {
	width: 56px; height: 56px; margin: -28px 0 0 -28px;
	background: rgba(176, 113, 74, .16);
	border-color: var(--copper-lt);
}

/* ---------- 33-11. PCの縦の帯（サイドレール） ---------- */
.rail {
	position: fixed;
	z-index: 150;
	bottom: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	color: var(--txt-mute);
}
.rail--l { left: 0; width: 56px; }
.rail--r { right: 0; width: 56px; }
.rail__txt {
	writing-mode: vertical-rl;
	font-family: var(--latin);
	font-size: 10px;
	letter-spacing: .34em;
	text-transform: uppercase;
}
.rail__line { width: 1px; height: 84px; background: var(--line); }
.rail a { transition: color .3s var(--ease); }
.rail a:hover { color: var(--copper); }
body.home .rail { color: var(--txt-on-ink-mute); }
body.home .rail .rail__line { background: var(--line-on-ink); }
body.home.is-past-hero .rail { color: var(--txt-mute); }
body.home.is-past-hero .rail .rail__line { background: var(--line); }

/* ---------- 33-12. セクション見出しの罫を引く ---------- */
.elc-js .sec__en::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease) .1s; }
.elc-js .is-shown .sec__en::before,
.elc-js .sec__head.is-shown .sec__en::before { transform: none; }

/* ---------- 33-13. 「動きを減らす」設定では中身を必ず出す ---------- */
@media (prefers-reduced-motion: reduce) {
	.elc-js .mask-line > i { transform: none !important; transition: none !important; }
	.elc-js .ch { opacity: 1 !important; transform: none !important; }
	.elc-js .hero [data-fade] { opacity: 1 !important; transform: none !important; }
	.elc-js [data-clip] > picture,
	.elc-js [data-clip] > .ph,
	.elc-js [data-clip] > img { clip-path: none !important; }
	.elc-js [data-clip] img, .elc-js [data-clip] .ph { transform: none !important; }
	.elc-js .cmp__table tbody tr { opacity: 1 !important; transform: none !important; }
	.elc-js .sec__en::before { transform: none !important; }
	.hero__slide { transition: none; }
	.elc-js .hero__slide.is-on .hero__img { animation: none; }
	.hero__dot.is-on i::after { animation: none; transform: scaleX(1); }
	.mq__track { transform: none !important; }
	.ld { display: none; }
	.cur { display: none; }
}

/* ---------- 33-14. 追加ぶんのレスポンシブ ---------- */
@media (min-width: 1024px) {
	/* ★レールは画面の端の余白に置くだけにする。
	   .wrap の左右パディングを広げるとヘッダーのロゴと本文の左端がずれるので触らない。 */
	.rail { display: flex; }
	.mq { padding-block: 22px; }
}

/* =========================================================================
   34. アイコン（2026-09-16 第3稿）
   ★線画1種類で統一する。丸枠＝カッパーのヘアライン、中身はカッパー。
   ========================================================================= */

/* 共通の丸枠 */
.ic-badge,
.worry__ic,
.reason__ic,
.salon__ic,
.risk__ic,
.price__ic,
.faq__ic,
.access__ic {
	display: inline-grid;
	place-items: center;
	flex: none;
	color: var(--copper);
}

/* ---------- 34-1. 3つの約束 ---------- */
.promise__ic {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border: 1px solid var(--line-on-ink);
	border-radius: 50%;
	color: var(--copper-lt);
	margin-bottom: 16px;
	transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.promise__item.is-in .promise__ic { border-color: rgba(212, 156, 114, .55); }

/* ---------- 34-2. お困りごと ---------- */
.worry__item {
	align-items: center;
	gap: 14px;
}
.worry__ic {
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	transition: border-color .4s var(--ease), color .4s var(--ease);
}
.worry__item:hover .worry__ic { border-color: var(--copper); }
.worry__tx { font-size: 14px; line-height: 1.75; }

/* ---------- 34-3. 選ばれる理由 ---------- */
.reason__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.reason__ic {
	width: 40px; height: 40px;
	border: 1px solid var(--line);
	border-radius: 50%;
	transition: border-color .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease);
}
.reason__item.is-in .reason__ic { border-color: rgba(176, 113, 74, .5); }
.reason__no {
	font-family: var(--latin);
	font-size: 24px;
	font-weight: 200;
	letter-spacing: .1em;
	color: var(--copper);
	line-height: 1;
	margin: 0;
}

/* ---------- 34-4. 部位カード ---------- */
.parts__ic {
	position: absolute;
	right: 12px; bottom: 12px;
	z-index: 2;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(248, 246, 243, .92);
	color: var(--copper-dk);
	transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
@media (hover: hover) {
	.parts__item:hover .parts__ic { background: var(--copper); color: #fff; transform: scale(1.08); }
}

/* ---------- 34-5. 施術の流れ ---------- */
.flow__no {
	position: relative;
	overflow: hidden;
}
.flow__no span {
	display: block;
	transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.flow__no .elc-ic {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, 6px);
	opacity: 0;
	transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.flow__item.is-in .flow__no span { transform: translateY(-140%); opacity: 0; }
.flow__item.is-in .flow__no .elc-ic { transform: translate(-50%, -50%); opacity: 1; }

/* ---------- 34-6. 先にお伝えすること ---------- */
.risk__title {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-left: 0;
}
.risk__title::before { display: none; }
.risk__ic {
	width: 34px; height: 34px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	margin-top: -3px;
}
.risk__item p { padding-left: 44px; }

/* ---------- 34-7. サロン ---------- */
.salon__title {
	display: flex;
	align-items: center;
	gap: 9px;
}
.salon__ic { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; }

/* ---------- 34-8. 料金 ---------- */
.price__h { align-items: center; }
.price__ic {
	width: 32px; height: 32px;
	border: 1px solid var(--copper);
	border-radius: 50%;
	margin-right: 2px;
}

/* ---------- 34-9. Q&A ---------- */
.faq__item summary { align-items: center; gap: 12px; }
.faq__ic {
	width: 32px; height: 32px;
	border: 1px solid var(--line);
	border-radius: 50%;
	transition: border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.faq__item[open] .faq__ic {
	border-color: var(--copper);
	background: rgba(176, 113, 74, .12);
	color: var(--copper-dk);
}
.faq__a { padding-left: 44px; }

/* ---------- 34-10. アクセス ---------- */
.access__info dl > div { grid-template-columns: 7.2em 1fr; }
.access__info dt { display: flex; align-items: center; gap: 7px; padding-top: 2px; }
.access__ic { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; }
.access__area strong { display: flex; align-items: center; gap: 7px; }
.access__area strong .elc-ic { color: var(--copper); flex: none; }

/* ---------- 34-11. メンズのリスト ---------- */
.mens__list li { align-items: center; gap: 12px; }
.mens__list .elc-ic { margin-top: 0; }

/* ---------- 34-12. スマホ調整 ---------- */
@media (max-width: 767px) {
	.worry__ic { width: 38px; height: 38px; }
	.reason__ic { width: 36px; height: 36px; }
	.risk__item p { padding-left: 0; margin-top: 10px; }
	.faq__a { padding-left: 0; }
	.access__info dl > div { grid-template-columns: 1fr; gap: 6px; }
	.access__info dt { color: var(--copper-dk); }
}

/* =========================================================================
   35. ヒーロー 第2案（2026-09-16）
   ★素材写真が明るく平坦で「写真で殴る」のが難しいので、
     文字を主役にして、写真は縦パネルの寄りで効かせる編集的な組みに変える。
     35. は 8. と 33-2. の指定を上書きする（後ろに置くこと）。
   ========================================================================= */

.hero {
	position: relative;
	display: block;
	min-height: 0;
	padding: 0;
	background: var(--ink);
	color: var(--txt-on-ink);
	overflow: hidden;
}

/* 背景の巨大な抜き文字 */
.hero__ghost {
	position: absolute;
	left: -2%;
	bottom: -4%;
	z-index: 0;
	font-family: var(--latin);
	font-size: clamp(88px, 21vw, 300px);
	font-weight: 200;
	line-height: .82;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(233, 229, 223, .07);
	pointer-events: none;
	user-select: none;
}

/* 銅色のうすい光 */
.hero__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 46% at 78% 14%, rgba(176, 113, 74, .34) 0%, rgba(176, 113, 74, 0) 66%),
		radial-gradient(48% 44% at 6% 92%, rgba(35, 65, 79, .6) 0%, rgba(35, 65, 79, 0) 64%);
}

.hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0;
	padding-top: 92px;
}

/* ---------- 写真パネル ---------- */
.hero__panel { position: relative; }

.hero__stage {
	position: relative;
	width: 100%;
	/* ★元が縦3:4なので、スマホで横長に切ると主役（プローブ）が画面から外れる。
	   スマホは4:3・PCは3:4で持つ。 */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ink-3);
}
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s var(--ease); }
.hero__slide.is-on { opacity: 1; }
.hero__kb { position: absolute; inset: 0; display: block; }
.hero__kb picture, .hero__kb .ph { display: block; width: 100%; height: 100%; }
.hero__img, .hero__stage .ph { width: 100%; height: 100%; object-fit: cover; }

.elc-js .hero__slide.is-on .hero__img { animation: kb2 12s linear forwards; }
@keyframes kb2 {
	from { transform: scale(1.02); }
	to   { transform: scale(1.14); }
}

.hero__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: .38;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
	background-size: 160px 160px;
}

/* 銅のヘアラインを写真からずらして重ねる */
.hero__frame {
	position: absolute;
	inset: 14px -14px -14px 14px;
	border: 1px solid rgba(212, 156, 114, .5);
	pointer-events: none;
	z-index: 1;
}

.hero__dots {
	position: absolute;
	right: 0; bottom: -26px;
	z-index: 3;
	display: flex;
	gap: 9px;
}

/* ---------- 文字側 ---------- */
.hero__in { padding-block: 44px 64px; }

.hero__en {
	font-family: var(--latin);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #e5b892;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hero__en::before { content: ""; width: 34px; height: 1px; background: var(--copper-lt); flex: none; }

.hero__h1 { margin-bottom: 20px; }
.hero__h1-sub {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.7;
	color: var(--copper-lt);
	margin-bottom: 14px;
}
.hero__lead {
	display: block;
	font-size: clamp(31px, 8.6vw, 68px);
	font-weight: 600;
	line-height: 1.34;
	letter-spacing: .01em;
	margin-bottom: 0;
}
.hero__body {
	font-size: 13.5px;
	line-height: 2;
	color: var(--txt-on-ink);
	max-width: 30em;
	margin-bottom: 20px;
}

/* 取り扱いの札 */
.hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}
.hero__tags li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--line-on-ink);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--txt-on-ink);
}
.hero__tags .elc-ic { color: var(--copper-lt); flex: none; }

.hero__place {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--txt-on-ink-mute);
	margin-bottom: 24px;
	line-height: 1.75;
}
.hero__place .elc-ic { flex: none; margin-top: 3px; color: var(--copper-lt); }

/* 写真の上ではなく単色の上に乗るので、暗幕まわりの指定は要らない */
.hero__veil { display: none; }   /* PCは単色の上に文字が乗るので暗幕は要らない。スマホだけ 35-4 で出す */

.hero .btn--tel {
	background: transparent;
	border-color: var(--line-on-ink);
	color: var(--txt-on-ink);
}
.hero .btn--tel:hover { border-color: var(--copper-lt); color: #fff; background: rgba(233, 229, 223, .08); }

.hero__needle {
	position: absolute;
	left: var(--gut);
	bottom: 0;
	z-index: 3;
	width: 1px;
	height: clamp(40px, 8vh, 90px);
	background: linear-gradient(180deg, rgba(212, 156, 114, 0) 0%, var(--copper-lt) 100%);
	transform-origin: 50% 100%;
	transform: scaleY(var(--needle, 1));
}
.hero__scroll { display: none; }

/* =========================================================================
   35-2. PC：左に文字・右に縦パネル
   ========================================================================= */
@media (min-width: 900px) {
	.hero__grid {
		grid-template-columns: 1fr minmax(320px, 40%);
		gap: clamp(36px, 5vw, 76px);
		align-items: center;
		min-height: 100svh;
		padding-top: 104px;
		padding-bottom: 72px;
	}
	.hero__panel { order: 2; }
	.hero__in { order: 1; padding-block: 0; }

	.hero__stage { aspect-ratio: 3 / 4; }
	.hero__frame { inset: 20px -20px -20px 20px; }
	.hero__dots { right: -20px; bottom: -40px; }

	.hero__lead { font-size: clamp(38px, 4.6vw, 66px); }
	.hero__body { font-size: 14.5px; }

	.hero__scroll {
		display: block;
		position: absolute;
		left: var(--gut);
		bottom: 96px;
		z-index: 3;
		font-family: var(--latin);
		font-size: 9.5px;
		letter-spacing: .28em;
		text-transform: uppercase;
		color: var(--txt-on-ink-mute);
		writing-mode: vertical-rl;
	}
	.hero__scroll span { display: none; }
	.hero__needle { height: 84px; }
}

@media (min-width: 1200px) {
	.hero__grid { grid-template-columns: 1fr minmax(360px, 38%); }
}

/* 「動きを減らす」設定 */
@media (prefers-reduced-motion: reduce) {
	.elc-js .hero__slide.is-on .hero__img { animation: none; }
}

/* ---------- 35-3. ヒーローのCTAの組み ----------
   3つ横並びだと左カラムが狭くて「写真を送ってご相談いただ／けます」と割れるので、
   上段に予約とLINE、下段に電話を敷く。 */
@media (min-width: 900px) {
	.cta-btns--hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.cta-btns--hero .btn--tel { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (min-width: 1280px) {
	.cta-btns--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 35-4. スマホのヒーロー＝写真を背景に敷く ----------
   PCは「左に文字・右に縦パネル」のまま。スマホだけ、写真を画面いっぱいの背景にして
   その上に文字を乗せる（パネルを絶対配置にしてグリッドの流れから外す）。 */
@media (max-width: 899px) {
	.hero {
		min-height: 100svh;
		display: flex;
		align-items: flex-end;
	}

	/* 写真を背景に回す */
	.hero__panel {
		position: absolute;
		inset: 0;
		z-index: 0;
		margin: 0;
	}
	.hero__stage {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
	/* ★この写真は白いシーツと手袋で非常に明るい。暗幕だけでは文字が沈まないので、
	   写真そのものを落としてから重ねる（PCの縦パネルはそのままの明るさで使う）。 */
	.hero__img {
		object-position: 50% 40%;
		filter: brightness(.46) contrast(1.06) saturate(.85);
	}
	.hero__frame { display: none; }

	/* 文字が読めるだけの暗幕。写真は残す */
	.hero__veil {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(180deg,
			rgba(10, 22, 32, .80) 0%,
			rgba(10, 22, 32, .52) 36%,
			rgba(10, 22, 32, .74) 72%,
			rgba(10, 22, 32, .94) 100%);
	}

	/* ★.hero__grid を position:relative のままにすると、背景に回した .hero__panel の
	   基準がグリッドになり、内容が画面より低いタブレットで上に黒帯ができる。
	   基準を .hero に戻すため、ここでは static にして重なりは .hero__in 側で作る。 */
	.hero__grid {
		position: static;
		width: 100%;
		padding-top: 104px;
		padding-bottom: 64px;
	}
	.hero__in {
		order: 1;
		padding-block: 0;
		position: relative;
		z-index: 2;
	}

	/* ★写真の上に乗るので、PCで使っている沈んだ色のままだと読めない。
	   実測で 2.8:1 / 3.2:1 だった2行を明るい側に振る。 */
	/* ★4つの札が3＋1で折り返して、1つだけ下に落ちるのが不格好だったので
	   スマホは2×2で揃える（幅も揃うので、文字数の差が目立たなくなる）。 */

	.hero__h1-sub { color: #f0c9ab; }
	.hero__place { color: var(--txt-on-ink); }
	.hero__place .elc-ic { color: var(--copper-lt); }

	.hero__dots {
		left: auto;
		right: var(--gut);
		bottom: 22px;
	}
	.hero__ghost { bottom: 8%; font-size: clamp(76px, 26vw, 200px); }
	.hero__needle { height: 46px; }
}

/* ---------- 35-5. 札とヒーローCTAの折り返し（2026-09-16 実測して調整） ---------- */

/* 札：狭い画面だけ2×2で揃える。それ以上は文字幅なりに並べる
   （タブレットで2列にすると1枚370pxの間延びした札になるため） */
@media (max-width: 639px) {
	.hero__tags {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.hero__tags li { justify-content: center; padding-inline: 10px; }
}

/* ヒーローのCTA：3つ横並びだと幅が足りず小見出しが割れる。
   640px以上は「予約・LINE」＋「電話」の2段にする（PCと同じ組み） */
@media (min-width: 640px) {
	.cta-btns--hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.cta-btns--hero .btn--tel { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =========================================================================
   36. 仕上げ（2026-09-16 実測して詰めたところ）
   ========================================================================= */

/* ---------- 36-1. 小さすぎた補助文字を少し上げる ---------- */
.btn small { font-size: 11.5px; }
.promise__no { font-size: 11px; letter-spacing: .22em; }
.ft__copy { font-size: 11px; }
.hd__logo-ja { font-size: 10.5px; }
@media (min-width: 1024px) { .hd__logo-ja { font-size: 11px; } }

/* ---------- 36-2. 指で押す面積を確保する ----------
   見た目は変えずに、当たり判定だけ広げる。 */
.hero__dot { height: 40px; }            /* 線は中央に来るので見え方は同じ */

.access__info dd a,
.ft__info dd a {
	display: inline-block;
	padding-block: 5px;
}
.ft__nav a { display: inline-block; padding-block: 6px; }

@media (min-width: 1024px) {
	.hd__nav a { padding-block: 11px; }
}

/* ---------- 36-3. タブレット（768〜899）でヒーローの文字を少し大きく ----------
   横幅があるのに文字がスマホのままだと間が抜けて見える。 */
@media (min-width: 640px) and (max-width: 899px) {
	.hero__lead { font-size: clamp(40px, 6.4vw, 56px); }
	.hero__body { font-size: 15px; max-width: 32em; }
	.hero__h1-sub { font-size: 13px; }
	.hero__tags li { font-size: 12.5px; padding: 8px 15px; }
}

/* ---------- 36-4. 比較表の横スクロールに気づけるようにする ----------
   スマホでは表が画面より広く、スクロールできることが見た目で分からなかった。 */
.cmp__hint { display: none; }

@media (max-width: 900px) {
	.cmp { position: relative; }
	.cmp__hint {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 10px;
		font-size: 11.5px;
		letter-spacing: .04em;
		color: var(--copper-dk);
	}
	.cmp__hint .elc-ic { animation: nudge 1.8s var(--ease) infinite; }
	@keyframes nudge {
		0%, 60%, 100% { transform: translateX(0); }
		30% { transform: translateX(4px); }
	}
	/* 右端が切れていることを示すぼかし */
	.cmp::after {
		content: "";
		position: absolute;
		top: 1px; right: 1px; bottom: 1px;
		width: 34px;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(248, 246, 243, 0), rgba(248, 246, 243, .96));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmp__hint .elc-ic { animation: none; }
}

/* ---------- 36-5. 下の固定バーの文字を少し上げる ---------- */
.bar__item { font-size: 11px; }

/* ---------- 36-6. タブレットで3つの約束の行が細切れになるのを緩める ---------- */
@media (min-width: 640px) and (max-width: 899px) {
	.promise { gap: 22px; }
	.promise__body { font-size: 13px; letter-spacing: .02em; line-height: 1.9; }
	.promise__title { font-size: 16px; }
}

/* =========================================================================
   37. フッターをサイトマップ型に（2026-09-16）
   ★ページ数が増える前提の作り。存在するページだけがリンクになる。
     37. は 22. を上書きするので、必ず後ろに置く。
   ========================================================================= */

.ft {
	background: var(--ink-2);
	color: var(--txt-on-ink);
	padding: clamp(48px, 8vw, 84px) 0 100px;
}

.ft__top {
	max-width: calc(var(--wrap) + var(--gut) * 2);
	margin-inline: auto;
	padding-inline: var(--gut);
	display: grid;
	gap: 40px;
}

/* ---------- 左側（店の情報） ---------- */
.ft__logo-en { display: block; font-family: var(--latin); font-size: 17px; font-weight: 300; letter-spacing: .26em; }
.ft__logo-ja { display: block; font-size: 11px; letter-spacing: .1em; color: var(--txt-on-ink-mute); margin-top: 4px; }
.ft__note { margin-top: 14px; font-size: 12px; color: var(--txt-on-ink-mute); }

.ft__info { margin-top: 20px; }
.ft__info > div {
	display: grid;
	grid-template-columns: 5em 1fr;
	gap: 0 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-on-ink-soft);
	font-size: 12.5px;
	line-height: 1.8;
}
.ft__info dt { color: var(--txt-on-ink-mute); font-size: 11px; padding-top: 3px; }
.ft__info dd a { display: inline-block; padding-block: 5px; }

.ft__sns { margin-top: 18px; display: flex; gap: 12px; }
.ft__sns a {
	width: 40px; height: 40px;
	display: grid; place-content: center;
	border: 1px solid var(--line-on-ink);
	border-radius: 50%;
	transition: border-color .3s var(--ease), color .3s var(--ease);
}
.ft__sns a:hover { border-color: var(--copper-lt); color: var(--copper-lt); }

/* ---------- 右側（ページ一覧） ---------- */
.ft__map {
	display: grid;
	gap: 26px 28px;
	grid-template-columns: 1fr 1fr;
}

.ft__h {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--copper-lt);
	padding-bottom: 9px;
	margin-bottom: 9px;
	border-bottom: 1px solid var(--line-on-ink-soft);
}

.ft__col ul { display: grid; gap: 2px; }
.ft__col a {
	display: inline-block;
	padding-block: 5px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--txt-on-ink-mute);
	transition: color .3s var(--ease);
}
.ft__col a:hover { color: var(--copper-lt); }

/* まだ作っていないページ（制作中だけ出す） */
/* ★flexにすると文字とバッジが左右に分かれ、ラベルが2〜3行に折り返して読みにくかった。
   ふつうの行として流し、バッジは行末に置く。 */
.ft__soon {
	display: block;
	padding-block: 5px;
	font-size: 12.5px;
	line-height: 1.65;
	color: rgba(154, 166, 174, .55);
}
.ft__soon i {
	display: inline-block;
	margin-left: 6px;
	font-style: normal;
	font-size: 9.5px;
	letter-spacing: .06em;
	padding: 1px 5px;
	border: 1px solid rgba(154, 166, 174, .28);
	border-radius: 2px;
	white-space: nowrap;
	vertical-align: 1px;
}

/* ---------- 下段 ---------- */
.ft__disc {
	max-width: calc(var(--wrap) + var(--gut) * 2);
	margin: 36px auto 0;
	padding: 18px var(--gut) 0;
	border-top: 1px solid var(--line-on-ink-soft);
	font-size: 11px;
	line-height: 1.95;
	color: var(--txt-on-ink-mute);
}
.ft__copy {
	margin-top: 18px;
	text-align: center;
	font-family: var(--latin);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--txt-on-ink-mute);
}

@media (min-width: 768px) {
	.ft__top { grid-template-columns: minmax(240px, .85fr) 2fr; gap: 48px; }
	.ft__map { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.ft { padding-bottom: clamp(48px, 8vw, 84px); }
	.ft__top { grid-template-columns: minmax(260px, .8fr) 2.2fr; gap: 60px; }
	.ft__map { grid-template-columns: repeat(4, 1fr); gap: 30px 28px; }
}

/* トップへもどる（フッター最下段） */
.ft__home {
	max-width: calc(var(--wrap) + var(--gut) * 2);
	margin: 18px auto 0;
	padding-inline: var(--gut);
}
.ft__home a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-block: 6px;
	font-size: 12px;
	color: var(--txt-on-ink-mute);
	transition: color .3s var(--ease);
}
.ft__home a:hover { color: var(--copper-lt); }
.ft__home .elc-ic { transform: rotate(-90deg); }

/* =========================================================================
   38. 料金表（ホットペッパーのメニューに差し替え・2026-09-17）
   ========================================================================= */

.price__new li { align-items: baseline; }
.price__yen s {
	font-family: var(--sans);
	font-size: 12px;
	color: var(--txt-mute);
	margin-right: 6px;
	text-decoration-thickness: 1px;
}

/* 時間 × VIOあり/なし の表 */
.price__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price__grid-table { min-width: 420px; }
.price__grid-table th,
.price__grid-table td {
	padding: 13px 10px;
	border-bottom: 1px solid var(--line-soft);
	background: var(--paper);
	font-size: 14px;
	line-height: 1.5;
}
.price__grid-table thead th {
	background: var(--ink);
	color: var(--txt-on-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-align: right;
	white-space: nowrap;
}
.price__grid-table thead th:first-child { text-align: left; }
.price__grid-table tbody th {
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
	width: 8em;
}
.price__grid-table tbody td {
	text-align: right;
	font-family: var(--latin);
	font-size: 17px;
	font-weight: 300;
	letter-spacing: .03em;
	white-space: nowrap;
}
.price__grid-table tbody td small { font-family: var(--sans); font-size: 11px; margin-left: 2px; }
.price__grid-table tbody tr:last-child th,
.price__grid-table tbody tr:last-child td { border-bottom: 0; }
.price__none { color: var(--txt-mute); font-family: var(--sans); font-size: 13px; }

.price__tag {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 7px;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .06em;
	color: #fff;
	background: #a4663f;   /* ★白文字を乗せる面。--copper だと比3.96 */
	border-radius: 2px;
	vertical-align: 1px;
}

/* ご相談だけでも */
.price__free {
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--txt-mute);
	padding-top: 14px;
}
.price__free strong {
	display: block;
	font-size: 15px;
	color: var(--copper-dk);
	margin-bottom: 6px;
}

@media (min-width: 768px) {
	.price__grid-table { min-width: 0; }
	.price__grid-table th,
	.price__grid-table td { padding: 14px 16px; }
}

/* =========================================================================
   39. 総合エステとしての構成（2026-09-17）
   ========================================================================= */

/* ---------- 39-1. メニューのカテゴリカード ---------- */
.sec--menu { background: var(--paper-2); }
.mcat { display: grid; gap: 16px; }
.mcat__item { background: var(--paper); border-radius: 3px; }
.mcat__item a {
	display: block;
	height: 100%;
	padding: 26px 22px 24px;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mcat__ic {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--copper);
	margin-bottom: 16px;
	transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.mcat__en {
	font-family: var(--latin);
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	/* ★10.5pxの小さい字。--copper は紙色に対して比3.67なので copper-dk（5.48） */
	color: var(--copper-dk);
	margin-bottom: 7px;
}
.mcat__title { font-size: 17px; font-weight: 600; line-height: 1.5; margin-bottom: 10px; }
.mcat__body { font-size: 13.5px; line-height: 1.95; color: var(--txt-mute); }
.mcat__from {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
	font-size: 13px;
	font-weight: 600;
	color: var(--copper-dk);
}
.mcat__from .elc-ic { transition: transform .4s var(--ease); }
@media (hover: hover) {
	.mcat__item:hover a { transform: translateY(-5px); box-shadow: 0 18px 40px -26px rgba(10, 22, 32, .45); }
	.mcat__item:hover .mcat__ic { background: var(--copper); border-color: var(--copper); color: #fff; }
	.mcat__item:hover .mcat__from .elc-ic { transform: translateX(4px); }
}

/* ---------- 39-2. 肌とからだのメニュー ---------- */
.relax { display: grid; gap: 40px; }
.relax__item { display: grid; gap: 22px; }
.relax__media { position: relative; border-radius: 3px; overflow: hidden; }
.relax__img, .relax__media .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.relax__ic {
	position: absolute;
	left: 0; bottom: 0;
	z-index: 2;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: var(--ink);
	color: var(--copper-lt);
}
.relax__en {
	font-family: var(--latin);
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--copper-dk);
	margin-bottom: 8px;
}
.relax__title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.relax__lead { font-size: 14.5px; font-weight: 600; color: var(--copper-dk); margin-bottom: 12px; }
.relax__text { font-size: 14px; line-height: 2.05; color: var(--txt-mute); }
.relax__list { margin-top: 16px; display: grid; gap: 8px; }
.relax__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.75; }
.relax__list .elc-ic { flex: none; margin-top: 4px; color: var(--copper); }
.relax__note {
	margin-top: 16px;
	padding-top: 13px;
	border-top: 1px solid var(--line-soft);
	font-size: 12px;
	line-height: 1.9;
	color: var(--txt-mute);
}

/* ---------- 39-3. 料金の補足 ---------- */
.price__sub { margin-top: 12px; font-size: 12.5px; line-height: 1.9; color: var(--txt-mute); }

@media (min-width: 768px) {
	.mcat { grid-template-columns: repeat(2, 1fr); }
	.mcat__item:first-child { grid-column: span 2; }
	.relax__item { grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: center; }
	.relax__item:nth-child(even) .relax__media { order: 2; }
	.price__grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	/* ★5枚を3列にすると最後の1枚があぶれる。先頭を全幅にして、残り4枚を2×2で揃える */
	.mcat { grid-template-columns: repeat(2, 1fr); }
	.mcat__item:first-child { grid-column: span 2; }
	.mcat__item:first-child a { display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: start; }
	.mcat__item:first-child .mcat__ic { grid-row: 1 / 5; margin-bottom: 0; }
	.mcat__item:first-child .mcat__body { max-width: 62em; }
	.relax { gap: 56px; }
	.relax__item { gap: 48px; }
}

/* =========================================================================
   40. 下層ページ（2026-09-17）
   ========================================================================= */

/* ---------- 40-1. パンくず ---------- */
.crumb { margin-bottom: 20px; }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.crumb li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .03em; }
.crumb li + li::before { content: "／"; color: var(--txt-on-ink-mute); opacity: .6; }
.crumb a { color: var(--copper-lt); }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb span { color: var(--txt-on-ink-mute); }

/* ---------- 40-2. ページの見出し帯 ----------
   ★2026-09-18 吉田さん指示により、下層25ページとも**写真なし**（濃紺の帯だけ）で統一。
     入っているページと入っていないページが混ざるのが不揃いに見えるため。
   　 .phero--img / .phero__media / .phero__veil は、あとで写真を入れたくなったとき用に
     残してある（elc_page_hero の第4引数に画像キーを渡せば復活する）。 */
.phero {
	position: relative;
	background: var(--ink);
	color: var(--txt-on-ink);
	padding: 116px 0 clamp(44px, 7vw, 76px);
	overflow: hidden;
}
.phero .wrap { position: relative; z-index: 2; }
.phero__media { position: absolute; inset: 0; z-index: 0; display: block; }
.phero__img, .phero__media .ph { width: 100%; height: 100%; object-fit: cover; }
.phero__veil {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(10, 22, 32, .88) 0%, rgba(10, 22, 32, .74) 50%, rgba(10, 22, 32, .92) 100%);
}
.phero__en {
	font-family: var(--latin);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #e5b892;
	margin-bottom: 14px;
	display: flex; align-items: center; gap: 12px;
}
.phero__en::before { content: ""; width: 28px; height: 1px; background: var(--copper-lt); flex: none; }
.phero__ja {
	font-size: clamp(26px, 6vw, 44px);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .02em;
}
.phero__ja small { display: inline-block; font-size: .6em; font-weight: 500; }
.phero__lead {
	margin-top: 18px;
	max-width: 44em;
	font-size: 14px;
	line-height: 2;
	color: var(--txt-on-ink);
}

/* ---------- 40-3. 本文 ---------- */
.pbody {
	padding-block: clamp(48px, 8vw, 88px) clamp(40px, 6vw, 72px);
}
.pbody > .wrap > * + * { margin-top: clamp(34px, 5vw, 52px); }

.pblock__h {
	font-size: clamp(19px, 3.6vw, 26px);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: .02em;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	position: relative;
}
.pblock__h::after {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 56px; height: 1px;
	background: var(--copper);
}
.pblock p { font-size: 14.5px; line-height: 2.1; }
.pblock p + p { margin-top: 1.4em; }
.pblock > * + * { margin-top: 20px; }

.psub { margin-top: 26px; }
.psub__h {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 10px;
	padding-left: 15px;
	position: relative;
}
.psub__h::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: 8px; height: 1px;
	background: var(--copper);
}
.psub p { font-size: 14px; line-height: 2.05; color: var(--txt-mute); padding-left: 15px; }
.psub p + p { margin-top: 1.2em; }

/* リスト */
.plist { display: grid; gap: 9px; margin-top: 18px; }
.plist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.85; }
.plist .elc-ic { flex: none; margin-top: 5px; color: var(--copper); }

/* 手順 */
.psteps { display: grid; gap: 0; margin-top: 20px; }
.psteps li {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 0 16px;
	padding-bottom: 24px;
	position: relative;
}
.psteps li::before {
	content: "";
	position: absolute;
	left: 23px; top: 34px; bottom: 0;
	width: 1px; background: var(--line);
}
.psteps li:last-child { padding-bottom: 0; }
.psteps li:last-child::before { display: none; }
.psteps__no {
	width: 46px; height: 46px;
	display: grid; place-content: center;
	border: 1px solid var(--copper);
	border-radius: 50%;
	background: var(--paper);
	font-family: var(--latin);
	font-size: 13px; font-weight: 300;
	letter-spacing: .06em;
	color: var(--copper-dk);
	position: relative; z-index: 1;
}
.psteps h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 7px; padding-top: 11px; }
.psteps p { font-size: 13.5px; line-height: 1.95; color: var(--txt-mute); }

/* 表 */
.ptable { margin-top: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 3px; }
.ptable table { width: 100%; font-size: 13.5px; background: var(--paper); }
.ptable th, .ptable td {
	padding: 11px 11px;
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
	border-bottom: 1px solid var(--line-soft);
	border-right: 1px solid var(--line-soft);
}
.ptable thead th {
	background: var(--ink);
	color: var(--txt-on-ink);
	font-size: 12px; font-weight: 600;
	letter-spacing: .05em;
	border-bottom-color: var(--ink);
}
.ptable tbody th { background: var(--paper-2); font-weight: 600; }
.ptable tr:last-child th, .ptable tr:last-child td { border-bottom: 0; }
.ptable th:last-child, .ptable td:last-child { border-right: 0; }

/* ★スマホは横スクロールさせない。字と余白を詰めて3列を収める
   （overflow-x は保険。スクロールできることに気づかれず、右の列が読まれない事故を防ぐ） */
@media (max-width: 767px) {
	.ptable table { font-size: 12.5px; table-layout: fixed; }
	.ptable th, .ptable td { padding: 10px 9px; line-height: 1.7; word-break: break-word; }
	.ptable thead th { font-size: 11px; letter-spacing: 0; padding: 9px; }
	.ptable tbody th { width: 27%; }
}

/* 注意書き */
.pnote {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin-top: 22px;
	padding: 17px 19px;
	background: var(--paper-2);
	border-left: 2px solid var(--copper);
}
.pnote__ic { flex: none; color: var(--copper-dk); margin-top: 2px; }
.pnote p { font-size: 13px; line-height: 1.95; color: var(--txt-mute); }

/* ---------- 40-4. 関連リンク ---------- */
.prel { margin-top: clamp(44px, 6vw, 68px); }
.prel__h {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--ink);
}
.prel ul { display: grid; gap: 1px; background: var(--line-soft); }
.prel a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 3px 12px;
	padding: 15px 4px;
	background: var(--paper);
	transition: background-color .3s var(--ease), padding-left .3s var(--ease);
}
/* ★グリッドの置き場所を明示する。
   アイコンだけ grid-row: 2 を指定すると、自動配置の順番でアイコンが1列目に入り、
   ページ名が2列目（auto幅）に押し出されて右寄せに見える。3つとも位置を書く。 */
.prel__g { grid-column: 1 / -1; grid-row: 1; font-size: 10.5px; letter-spacing: .1em; color: var(--copper-dk); }
.prel__t { grid-column: 1; grid-row: 2; font-size: 14.5px; font-weight: 600; }
.prel .elc-ic { grid-column: 2; grid-row: 2; color: var(--copper); transition: transform .3s var(--ease); }
@media (hover: hover) {
	.prel a:hover { background: var(--paper-2); padding-left: 10px; }
	.prel a:hover .elc-ic { transform: translateX(4px); }
}

/* ---------- 40-5. ページ末尾のCTA ---------- */
.pcta {
	position: relative;
	background: var(--ink);
	color: var(--txt-on-ink);
	padding-block: clamp(56px, 9vw, 104px);
	overflow: hidden;
	text-align: center;
}
.pcta__bg {
	position: absolute; inset: 0;
	pointer-events: none;
	background:
		radial-gradient(70% 90% at 82% 8%, rgba(176, 113, 74, .3) 0%, rgba(176, 113, 74, 0) 62%),
		radial-gradient(60% 80% at 8% 96%, rgba(23, 50, 63, .8) 0%, rgba(23, 50, 63, 0) 60%);
}
.pcta .wrap { position: relative; z-index: 2; }
.pcta .sec__en { justify-content: center; color: var(--copper-lt); }
.pcta .sec__en::before { background: var(--copper-lt); }
.pcta .sec__ja { margin-bottom: 20px; }
.pcta__lead {
	font-size: 14px;
	line-height: 2.05;
	color: var(--txt-on-ink-mute);
	max-width: 34em;
	margin: 0 auto 30px;
}
.pcta__note { margin-top: 20px; font-size: 11.5px; color: var(--txt-on-ink-mute); }
.pcta .btn--line { background: rgba(233, 229, 223, .1); border-color: var(--line-on-ink); }
.pcta .btn--line:hover { background: rgba(233, 229, 223, .18); border-color: var(--copper-lt); }
.pcta .btn--tel { color: var(--txt-on-ink); border-color: var(--line-on-ink); }
.pcta .btn--tel:hover { color: #fff; border-color: var(--copper-lt); }

/* ---------- 40-6. 部位の一覧ページ ---------- */
.pgrid { display: grid; gap: 18px; margin-top: 24px; }
.pgrid__item { background: var(--paper); border-radius: 3px; overflow: hidden; }
.pgrid__item a { display: block; height: 100%; }
.pgrid__media { position: relative; overflow: hidden; }
.pgrid__img, .pgrid__media .ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pgrid__ic {
	position: absolute; right: 12px; bottom: 12px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(248, 246, 243, .92);
	color: var(--copper-dk);
	transition: background-color .4s var(--ease), color .4s var(--ease);
}
.pgrid__body { padding: 18px 20px 22px; }
.pgrid__t {
	font-size: 16px; font-weight: 600;
	margin-bottom: 8px; padding-bottom: 10px;
	border-bottom: 1px solid var(--line-soft);
}
.pgrid__b { font-size: 13.5px; line-height: 1.95; color: var(--txt-mute); }
@media (hover: hover) {
	.pgrid__item { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
	.pgrid__item:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -26px rgba(10, 22, 32, .45); }
	.pgrid__item:hover .pgrid__ic { background: var(--copper); color: #fff; }
	.pgrid__img { transition: transform 1s var(--ease); }
	.pgrid__item:hover .pgrid__img { transform: scale(1.06); }
}

/* ---------- 40-7. レスポンシブ ---------- */
@media (min-width: 768px) {
	.phero { padding-top: 138px; }
	.pbody > .wrap { max-width: calc(var(--wrap-narrow) + var(--gut) * 2); }
	.psteps li { grid-template-columns: 54px 1fr; gap: 0 20px; }
	.psteps__no { width: 54px; height: 54px; }
	.prel ul { grid-template-columns: repeat(2, 1fr); }
	.prel a { padding: 16px 18px; }
	.pgrid { grid-template-columns: repeat(2, 1fr); }
	.ptable th, .ptable td { padding: 13px 15px; }
	.ptable thead th { white-space: nowrap; }
}

@media (min-width: 1024px) {
	.phero { padding-top: 152px; }
	.pbody p { font-size: 15px; }
	.prel ul { grid-template-columns: repeat(3, 1fr); }
	/* ★部位は8枚。3列にすると最後の行が2枚になって間が抜ける。2列のまま大きく見せる */
}

/* =========================================================================
   41. ヘッダーのナビ（下層ページを足したときの折り返し対策・2026-09-17）
   ========================================================================= */
/* ★flexの既定は縮む。項目が増えると「美容電気脱毛と／は」のように2行に割れるので、
   縮ませず折り返さない。狭い幅では間隔のほうを詰める。 */
@media (min-width: 1024px) {
	.hd__nav ul { flex-wrap: nowrap; }
	.hd__nav li { flex: none; }
	.hd__nav a { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.hd__nav { margin-left: 22px; }
	.hd__nav ul { gap: 15px; }
	.hd__nav a { font-size: 12px; letter-spacing: .03em; }
}

/* =========================================================================
   42. トップ → 下層ページへの導線（2026-09-17）
   ========================================================================= */
.more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.more__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 17px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.4;
	transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.more__link .elc-ic { color: var(--copper); transition: transform .35s var(--ease), color .35s var(--ease); }
@media (hover: hover) {
	.more__link:hover { background: var(--ink); border-color: var(--ink); color: var(--txt-on-ink); }
	.more__link:hover .elc-ic { color: var(--copper-lt); transform: translateX(3px); }
}
/* 暗い面に置いたとき。
   ★★.sec--risk は暗く見えて実際は明るい面（paper-2）。ここに入れると
     明るい面に明るい文字＝比1.06で消える。見た目で決めず、実測で決める。 */
.sec--ink .more__link, .sec--mens .more__link {
	border-color: var(--line-on-ink);
	color: var(--txt-on-ink);
}
@media (hover: hover) {
	.sec--ink .more__link:hover, .sec--mens .more__link:hover {
		background: var(--copper); border-color: var(--copper); color: #fff;
	}
}
@media (max-width: 767px) {
	.more { gap: 8px; }
	.more__link { padding: 10px 14px; font-size: 12.5px; }
}

/* ★.sec__en を copper-dk にしたので、暗い面に置いているセクションだけ明るい側へ戻す。
   暗い面は .sec--promise / .sec--mens / .sec--contact の3つ（.contact と .pcta は上で指定済み）。
   ここを忘れると、暗い面に暗い文字が乗って読めなくなる。 */
.sec--promise .sec__en, .sec--mens .sec__en { color: var(--copper-lt); }
.sec--promise .sec__en::before, .sec--mens .sec__en::before { background: var(--copper-lt); }