/*
Theme Name: hair salon AZUNOA デモテーマ
Theme URI: https://coconala.com/users/4345715
Author: MAKAIZO Lab
Description: WordPressプラグイン機能デモ用に作成した、架空の美容室サイトのテーマです。会社情報はすべて架空のものです。
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: azunoa
*/

/* ==========================================================================
   Design tokens — hair salon AZUNOA
   ========================================================================== */

:root {
	--color-shell: #fffcfc;
	--color-shell-2: #fdf1f0;
	--color-ink: #1c1a17;
	--color-ink-2: #2a2723;
	--color-sumi: #2b2426;
	--color-stone: #6f6669;
	--color-gold: #b83a4e;
	--color-gold-deep: #932b3d;
	--color-sage: #9a9096;
	--color-line: #f6e3e1;
	--color-line-dark: #3a352e;

	--font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
	--font-display: "Cormorant Garamond", Georgia, serif;

	--ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

	--header-h: 4.5rem;
	color-scheme: light;
}

.tone-dark {
	--color-gold: #e0716b;
	--color-gold-deep: #eb8a84;
}

.tone-soft {
	--color-ink: #fbe7e5;
	--color-shell: #2b2426;
	--color-gold: #b23a52;
	--color-line-dark: #f5d5d2;
}

* { box-sizing: border-box; }

/*
 * フォームコントロールは、ブラウザ既定のフォント・行間を持ち込まずに親から継承させる。
 * （元サイトは Tailwind preflight で同じことをしている。これが無いと button 内の
 *   line-height が normal になり、ボタン高さが元サイトより数px低くなる）
 */
button, input, optgroup, select, textarea {
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}

/*
 * ブロック要素の既定マージンも持ち込まない（元サイトの Tailwind preflight と同じ）。
 * 余白は各コンポーネント側で明示する。
 */
h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ol, ul, pre, hr, fieldset {
	margin: 0;
}
fieldset, legend { padding: 0; border: 0; }
ol, ul { list-style: none; padding: 0; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-shell);
	color: var(--color-sumi);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	line-height: 1.9;
	letter-spacing: 0.02em;
}

@media (min-width: 768px) {
	body { font-size: 1rem; }
}

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

::selection { background: var(--color-gold); color: var(--color-shell); }

:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: 2px; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

a { color: inherit; text-decoration: none; }

/* ---------- layout ---------- */

/* hidden 属性は必ず効かせる（.btn 等の display 指定に負けないように） */
[hidden] { display: none !important; }

.wrap { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .wrap { padding-inline: 4rem; } }

.wrap-narrow { max-width: 46rem; margin-inline: auto; padding-inline: 1.5rem; }

.section { padding-block: 6rem; }
@media (min-width: 768px) { .section { padding-block: 10rem; } }

.section--alt { background: var(--color-shell-2); }

/*
 * .tone-soft redefines --color-ink/--color-shell on THIS element (see :root section).
 * Any descendant that wants "ink background / shell text" MUST read those variables
 * (never hardcode a literal color), otherwise it silently breaks when tone-soft flips
 * the palette. .az-ink-block is the one place background+text get set from the vars;
 * everything inside must inherit or use color-mix() against var(--color-shell).
 */
.az-ink-block { background: var(--color-ink); color: var(--color-shell); }
.section--dark { background: var(--color-ink); color: var(--color-shell); }

.hairline { height: 1px; background: var(--color-line); border: 0; margin: 0; }

/* ---------- typography ---------- */

.t-display { font-family: var(--font-mincho); font-size: clamp(2.75rem, 7vw, 6rem); line-height: 1.22; letter-spacing: 0.02em; font-weight: 400; margin: 0; }
.t-h1 { font-family: var(--font-mincho); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.45; letter-spacing: 0.04em; font-weight: 400; margin: 0; }
.t-h2 { font-family: var(--font-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; margin: 0; }
.t-h3 { font-family: var(--font-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 0; }
.t-lead { font-family: var(--font-mincho); font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 2.1; letter-spacing: 0.09em; margin: 0; }
.t-eyebrow { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--color-gold); margin: 0; }
.t-serif-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 300; }
.t-caption { font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--color-stone); margin: 0; }
.t-vertical { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-mincho); letter-spacing: 0.25em; }

.t-center { text-align: center; }

/*
 * プラグインが description="[shortcode]" で書き出すページの本文ラッパー。
 * .t-lead のような強い書体指定はしない — 各プラグインのCSSがそのまま効くようにするため。
 * (以前は .t-lead で包んでいたため、明朝体・広い字間がプラグインのUIに漏れて見た目が崩れていた)
 */
.az-page-body { font-size: 1rem; line-height: 1.9; }
.az-page-body > p { margin: 0 0 1.2em; }

/* 固定ページの上下余白。元サイトの pt-16 pb-24 / md:pt-24 md:pb-32 に合わせている */
.az-page { padding-top: 4rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .az-page { padding-top: 6rem; padding-bottom: 8rem; } }
/* 全幅の帯で終わるページは、下余白を持たせない（元サイトと同じ） */
.azunoa-page-menu .az-page,
.azunoa-page-simulator .az-page { padding-bottom: 0; }
@media (min-width: 768px) { .az-page { padding-top: 6rem; padding-bottom: 8rem; } }
.az-page__title { margin-bottom: 3rem; }

/*
 * プラグインのページ内セクションを画面幅いっぱいに広げるための逃がし。
 * .wrap の内側にいながら、背景帯だけを全幅にできる。
 */
.az-fullbleed { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }

/* ---------- buttons (square corners — no border-radius anywhere) ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3.25rem;
	padding-inline: 2rem;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	border: 1px solid transparent;
	transition: all 400ms var(--ease-quint);
	white-space: nowrap;
	cursor: pointer;
	background: none;
}

.btn-solid { background: var(--color-sumi); color: var(--color-shell); }
.btn-solid:hover { background: var(--color-gold-deep); }

.btn-gold { background: var(--color-gold); color: #fff; }
.btn-gold:hover { background: var(--color-gold-deep); }

.btn-outline { border-color: var(--color-sumi); color: var(--color-sumi); }
.btn-outline:hover { background: var(--color-sumi); color: var(--color-shell); }

.btn-outline-light { border-color: rgb(250 248 245 / 0.4); color: var(--color-shell); }
.btn-outline-light:hover { background: var(--color-shell); color: var(--color-sumi); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- reveal / scroll animations (data-inview architecture, matches source 1:1) ---------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo);
	transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal][data-inview="true"] { opacity: 1; transform: none; }

.mask-line { display: block; overflow: hidden; }
.mask-line > span {
	display: block;
	transform: translateY(110%);
	transition: transform 900ms var(--ease-expo);
	transition-delay: var(--reveal-delay, 0ms);
}
[data-inview="true"] .mask-line > span,
.mask-line[data-inview="true"] > span { transform: none; }

.img-zoom { overflow: hidden; }
.img-zoom > img, .img-zoom.zoom-self { transform: scale(1.08); transition: transform 1400ms var(--ease-expo); }
[data-inview="true"].img-zoom > img,
[data-inview="true"] .img-zoom > img,
[data-inview="true"].img-zoom.zoom-self,
[data-inview="true"] .img-zoom.zoom-self { transform: scale(1); }

.clip-open { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-expo); }
[data-inview="true"].clip-open,
[data-inview="true"] .clip-open { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.mask-line > span { transform: none !important; }
	.img-zoom { transform: none !important; }
	.clip-open { clip-path: none !important; }
}

/* 下線が伸びるリンク */
.link-underline { position: relative; display: inline-block; padding-bottom: 2px; }
.link-underline::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms var(--ease-quint);
}
.link-underline:hover::after { transform: scaleX(1); }

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- demo banner ---------- */

.az-demo-banner {
	position: relative;
	z-index: 50;
	background: #23262b;
	color: #c9ccd1;
}
.az-demo-banner__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 0.5rem;
}
@media (min-width: 768px) { .az-demo-banner__bar { flex-wrap: nowrap; } }
.az-demo-banner p { margin: 0; min-width: 0; font-size: 0.6875rem; line-height: 1.625; letter-spacing: 0.06em; }
.az-demo-banner strong { color: #fff; font-weight: 500; }
.az-demo-banner__exit {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	min-height: 1.75rem;
	padding-inline: 0.75rem;
	border: 1px solid rgb(255 255 255 / 0.28);
	border-radius: 3px;
	color: #fff;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: background-color 160ms, border-color 160ms;
}
.az-demo-banner__exit:hover { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.5); }
.az-demo-banner :focus-visible { outline-color: #fff; }

/* ---------- skip link ---------- */
.az-skip-link {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	background: var(--color-sumi);
	color: var(--color-shell);
	transform: translateY(-200%);
}
.az-skip-link:focus { transform: none; }

/* ---------- opening splash ---------- */
.az-opening {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-ink);
	pointer-events: none;
	opacity: 1;
	transition: opacity 700ms var(--ease-quint);
}
.az-opening.is-done { opacity: 0; visibility: hidden; }
html[data-opened="1"] .az-opening { display: none; }
.az-opening__mark {
	font-family: var(--font-display);
	font-size: 1.75rem;
	color: var(--color-shell);
	animation: az-opening-mark 1000ms var(--ease-expo) both;
}
@media (min-width: 768px) { .az-opening__mark { font-size: 2rem; } }
.az-opening__rule {
	display: block;
	margin-top: 1.25rem;
	height: 1px;
	width: 6rem;
	background: var(--color-gold);
	transform-origin: left;
	animation: az-opening-rule 900ms var(--ease-expo) 180ms both;
}
@keyframes az-opening-mark { from { opacity: 0; letter-spacing: 0.6em; } to { opacity: 1; letter-spacing: 0.22em; } }
@keyframes az-opening-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- header ---------- */

.az-header {
	position: sticky;
	top: 0;
	z-index: 40;
	transition: transform 500ms var(--ease-quint), background-color 500ms var(--ease-quint), box-shadow 500ms var(--ease-quint);
	background: transparent;
	border-bottom: 1px solid transparent;
}
.az-header.is-scrolled { background: rgb(255 252 252 / 0.85); backdrop-filter: blur(16px); border-bottom-color: var(--color-line); }
.az-header.is-hidden { transform: translateY(-100%); }

.az-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--header-h);
}

.az-logo { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.22em; color: var(--color-sumi); }
.az-logo-link { display: flex; align-items: baseline; gap: 0.625rem; }
.az-logo-tagline { display: none; }
@media (min-width: 640px) { .az-logo-tagline { display: inline; } }

.az-nav { display: none; gap: 1.75rem; }
@media (min-width: 1024px) { .az-nav { display: flex; } }
.az-nav a { font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--color-sumi); padding: 0.5rem 0; position: relative; transition: color 300ms var(--ease-quint); }
.az-nav a:hover { color: var(--color-gold); }
.az-nav a[aria-current="page"] { color: var(--color-gold); }
.az-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--color-gold); transition: right 300ms var(--ease-quint); }
.az-nav a:hover::after { right: 0; }

.az-header__actions { display: flex; align-items: center; gap: 0.75rem; }

.az-lang { position: relative; margin-right: 0.5rem; }
.az-lang__toggle {
	display: flex; align-items: center; gap: 0.375rem;
	min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
	font-size: 0.75rem; letter-spacing: 0.08em; color: var(--color-sumi);
	transition: color 300ms var(--ease-quint);
}
.az-lang__toggle:hover { color: var(--color-gold); }
.az-lang__caret {
	display: block; width: 0.375rem; height: 0.375rem;
	border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 300ms var(--ease-quint);
}
.az-lang__toggle[aria-expanded="true"] .az-lang__caret { transform: translateY(-1px) rotate(-135deg); }
.az-lang__menu {
	position: absolute; top: 100%; right: 0; z-index: 10; margin-top: 0.25rem;
	min-width: 9rem; border: 1px solid var(--color-line); background: var(--color-shell);
	padding-block: 0.25rem; box-shadow: 0 8px 24px -12px rgb(28 28 28 / 0.25);
}
.az-lang__menu a {
	display: flex; align-items: center; min-height: 2.75rem; padding-inline: 1rem;
	font-size: 0.8125rem; color: var(--color-sumi);
	transition: background-color 300ms var(--ease-quint), color 300ms var(--ease-quint);
}
.az-lang__menu a:hover { background: var(--color-shell-2); color: var(--color-gold); }
.az-header__cta { display: none; }
@media (min-width: 640px) { .az-header__cta { display: inline-flex; } }

.az-hamburger { position: relative; width: 2.75rem; height: 2.75rem; border: 0; background: none; cursor: pointer; }
@media (min-width: 1024px) { .az-hamburger { display: none; } }
.az-hamburger__box { position: relative; display: block; margin: 0 auto; height: 12px; width: 24px; }
.az-hamburger span {
	position: absolute;
	left: 0;
	display: block;
	height: 1px;
	width: 24px;
	background: var(--color-sumi);
	transition: all 400ms var(--ease-quint);
	top: 0;
}
.az-hamburger span:last-child { top: 12px; }
.az-hamburger[aria-expanded="true"] span { top: 6px; transform: rotate(45deg); }
.az-hamburger[aria-expanded="true"] span:last-child { top: 6px; transform: rotate(-45deg); }

.az-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--color-shell);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.az-drawer:not(.is-open) { display: none; }
.az-drawer__topbar { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); flex-shrink: 0; }
.az-drawer__inner { padding: 0.5rem 1.5rem 2.5rem; max-width: 28rem; width: 100%; margin-inline: auto; display: flex; flex-direction: column; flex: 1; justify-content: center; gap: 1rem; }
.az-drawer__close {
	display: flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; margin-right: -0.5rem;
	border: 0; background: none; cursor: pointer; color: var(--color-sumi);
}
.az-drawer__close-icon { position: relative; display: block; width: 1.5rem; height: 1.5rem; }
.az-drawer__close-icon span { position: absolute; top: 50%; left: 0; display: block; width: 1.5rem; height: 1px; background: var(--color-sumi); }
.az-drawer__close-icon span:first-child { transform: rotate(45deg); }
.az-drawer__close-icon span:last-child { transform: rotate(-45deg); }
.az-drawer__nav { display: flex; flex-direction: column; }
.az-drawer__nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-mincho); font-size: 1.1875rem; }
.az-drawer__nav a small { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-stone); }
.az-drawer__cta { width: 100%; margin-top: 2rem; }
.az-drawer__about { margin-top: 1.5rem; text-align: center; text-decoration: underline; }
.az-drawer__lang {
	margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-line);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.25rem;
}
.az-drawer__lang .t-eyebrow { margin: 0; color: var(--color-stone); display: inline-flex; align-items: center; min-height: 2.75rem; }
.az-drawer__lang a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.8125rem; color: var(--color-sumi); text-decoration: underline; }

/* ---------- hero ---------- */

.az-hero {
	position: relative;
	min-height: 88svh;
	display: flex;
	align-items: flex-end;
	color: var(--color-shell);
	overflow: hidden;
}
@media (min-width: 768px) { .az-hero { min-height: 92svh; } }
.az-hero__bg { position: absolute; inset: 0; z-index: 0; }
.az-hero__bg img { width: 100%; height: 112%; object-fit: cover; }
.az-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(28 26 23 / 0.72) 0%, rgb(28 26 23 / 0.28) 55%, rgb(28 26 23 / 0.12) 100%); }
/*
 * 下余白は「右下固定のAIスタッフ起動ボタン（高さ48px+下から20px+セーフエリア）」の
 * 2倍以上を確保する。スマホはボタンが折り返して2段になることがあるため、
 * PC(6rem)よりかなり広めに取っている。env(safe-area-inset-bottom) は
 * ホームインジケーターのある端末（iPhone X以降）向け。
 */
.az-hero__content { position: relative; z-index: 1; width: 100%; padding-bottom: calc(11rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .az-hero__content { padding-bottom: 6rem; } }
.az-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.az-hero__main { max-width: 48rem; }
.az-hero__eyebrow {
	font-family: var(--font-display); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgb(255 252 252 / 0.7);
	opacity: 0; transition: opacity 900ms var(--ease-expo);
}
.az-hero[data-inview="true"] .az-hero__eyebrow { opacity: 1; }
.az-hero h1 { margin: 1.5rem 0 0; }
.az-hero__body {
	max-width: 28rem; margin-top: 2rem; font-size: 0.875rem; line-height: 2; color: rgb(255 252 252 / 0.75);
	opacity: 0; transform: translateY(16px); transition: opacity 900ms var(--ease-expo) 420ms, transform 900ms var(--ease-expo) 420ms;
}
.az-hero[data-inview="true"] .az-hero__body { opacity: 1; transform: none; }
.az-hero .btn-row {
	margin-top: 2.5rem; gap: 0.75rem;
	opacity: 0; transform: translateY(16px); transition: opacity 900ms var(--ease-expo) 560ms, transform 900ms var(--ease-expo) 560ms;
}
.az-hero[data-inview="true"] .btn-row { opacity: 1; transform: none; }
.az-hero__vertical {
	display: none; margin-bottom: 7rem; font-size: 0.8125rem; color: rgb(255 252 252 / 0.55);
	opacity: 0; transition: opacity 1200ms var(--ease-expo) 700ms;
}
.az-hero[data-inview="true"] .az-hero__vertical { opacity: 1; }
@media (min-width: 1024px) { .az-hero__vertical { display: block; } }
.az-hero__scroll {
	position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 0.5rem;
	opacity: 0; transition: opacity 1000ms var(--ease-expo) 900ms;
}
.az-hero[data-inview="true"] .az-hero__scroll { opacity: 1; }
@media (min-width: 768px) { .az-hero__scroll { display: flex; } }
.az-hero__scroll span.label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgb(255 252 252 / 0.5); }
.az-hero__scroll-track { position: relative; display: block; height: 2.5rem; width: 1px; overflow: hidden; background: rgb(255 252 252 / 0.25); }
.az-hero__scroll-track span { position: absolute; inset-inline: 0; top: 0; height: 1rem; background: var(--color-gold); animation: az-hero-line 2s ease-in-out infinite; }
/*
 * 線が上から入って下へ抜ける。トラック40px・バー16pxなので、
 * 250% (=40px) まで動かすと下端から完全に出きる。
 * （元サイトは 150% で止めており、下端に貼り付いたまま消えなかった）
 */
@keyframes az-hero-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(250%); } }

/* ---------- concept ---------- */

.az-concept { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 768px) { .az-concept { grid-template-columns: 1fr 0.85fr; gap: 5rem; } }
.az-concept__text p:not(.t-eyebrow):not(.az-concept__seats) { margin: 1.5rem 0 0; font-size: 0.9375rem; line-height: 2; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }
.az-concept__text .t-h1 { margin-top: 2rem; color: var(--color-shell); }
.az-concept__seats { margin: 2.5rem 0 0; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.2em; color: var(--color-gold); }
.az-concept__image { overflow: hidden; }
.az-concept__image img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }

/* ---------- stats ---------- */

.az-stats { display: grid; grid-template-columns: 1fr; }
.az-stats__item { text-align: center; padding: 2rem 0; border-top: 1px solid var(--color-line); }
.az-stats__item:first-child { border-top: 0; }
@media (min-width: 640px) {
	.az-stats { grid-template-columns: repeat(3, 1fr); }
	.az-stats__item { padding: 0.5rem 1.5rem; border-top: 0; border-left: 1px solid var(--color-line); }
	.az-stats__item:first-child { border-left: 0; }
}
.az-stats__num { margin: 0; font-size: 3rem; font-weight: 300; line-height: 1; }
@media (min-width: 768px) { .az-stats__num { font-size: 3.75rem; } }
.az-stats__num .suffix { font-size: 0.5em; margin-left: 0.1em; }
.az-stats__label { margin: 0; }

/* ---------- section head ---------- */

.az-section-head { max-width: 48rem; margin-bottom: 3rem; }
.az-section-head h2 { margin-top: 1.25rem; }
.az-section-head--center { max-width: 42rem; margin-inline: auto; text-align: center; }

/* セクション見出しのリード文。
   .t-lead(明朝・字間0.09em)ではなく本文書体で組む。元実装の SectionHead も
   t-lead を使わず text-[0.9375rem] leading-loose を直接当てている。 */
.az-lead { margin: 1.75rem 0 0; font-size: 0.9375rem; line-height: 2; color: var(--color-stone); }
.tone-soft .az-lead, .az-ink-block .az-lead { color: color-mix(in srgb, var(--color-shell) 65%, transparent); }

/* ---------- menu teaser ---------- */

.az-menu-grid { display: grid; margin-bottom: 0; padding: 0; list-style: none; column-gap: 2rem; row-gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .az-menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .az-menu-grid { grid-template-columns: repeat(5, 1fr); column-gap: 1rem; } }
.az-menu-card { background: var(--color-shell); }
.az-menu-card__img { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 1.5rem; }
.az-menu-card__img img { width: 100%; height: 100%; object-fit: cover; }
.az-menu-card .t-eyebrow { margin-bottom: 0; }
.az-menu-card h3 { margin-top: 0.5rem; }
.az-menu-card__price { color: var(--color-gold); font-size: 0.8125rem; margin: 0.75rem 0 0; }
.az-menu-card ul { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.75rem; line-height: 1.625; color: var(--color-stone); }
.az-menu-card li { padding: 0; }
.az-menu-card li + li { margin-top: 0.25rem; }
.az-menu-card__items li + li { margin-top: 0.25rem; }

/* ---------- before/after section layout (SectionHead beside the slider on desktop) ---------- */
.az-ba-layout { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .az-ba-layout { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; } }

/* FAQは「見出し | 質問リスト」の2カラム。列指定が抜けていて縦積みになっていた */
.az-faq-layout { display: grid; gap: 3.5rem; }
@media (min-width: 768px) { .az-faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
.az-faq-layout .az-section-head { margin-bottom: 0; }

/* ---------- before/after (home widget) ---------- */

.az-ba { position: relative; overflow: hidden; user-select: none; aspect-ratio: 4/3; max-width: 52rem; margin-inline: auto; }
.az-ba img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.az-ba__before-wrap { position: absolute; inset: 0; overflow: hidden; }
.az-ba__divider { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(255 252 252 / 0.9); box-shadow: 0 0 12px rgb(0 0 0 / 0.3); pointer-events: none; }
.az-ba__handle { position: absolute; top: 50%; width: 44px; height: 44px; margin-left: -22px; margin-top: -22px; border-radius: 50%; border: 1px solid rgb(255 252 252 / 0.8); background: rgb(28 26 23 / 0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; }
.az-ba__label { position: absolute; top: 1rem; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0.75rem; pointer-events: none; }
.az-ba__label--before { left: 1rem; background: rgb(28 26 23 / 0.7); color: #fff; }
.az-ba__label--after { right: 1rem; background: rgb(184 58 78 / 0.85); color: #fff; }
.az-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; appearance: none; }
.az-ba__caption { text-align: center; margin-top: 1.5rem; }

/* ---------- gallery teaser (masonry) — matches .masonry in source exactly ---------- */

.az-gallery-grid { columns: 2; column-gap: 0.75rem; }
.az-gallery-grid figure { break-inside: avoid; margin: 0 0 0.75rem; }
@media (min-width: 768px) { .az-gallery-grid { columns: 3; column-gap: 1.25rem; } .az-gallery-grid figure { margin-bottom: 1.25rem; } }
@media (min-width: 1280px) { .az-gallery-grid { columns: 4; } }
.az-gallery-grid a { display: block; overflow: hidden; }
.az-gallery-grid img { width: 100%; transition: transform 700ms var(--ease-quint); }
.az-gallery-grid a:hover img { transform: scale(1.04); }
.az-gallery-grid figcaption { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.4; color: var(--color-sumi); }

/* ---------- stylists (mobile: horizontal snap scroll / desktop: asymmetric grid) ---------- */

.az-stylists { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.az-stylists .az-stylist-card { flex: 0 0 72%; scroll-snap-align: start; }
/* 元実装は md: = 768px で横スクロールから4カラムに切り替わる。
   ここを 900px にしていたため、768〜899px の間だけカードが巨大なままだった。 */
@media (min-width: 768px) {
	.az-stylists { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; overflow: visible; }
	.az-stylists .az-stylist-card { flex: initial; }
	.az-stylists .az-stylist-card:nth-child(2n) { margin-top: 2.5rem; }
}
.az-stylist-card__img { aspect-ratio: 3/4; overflow: hidden; }
.az-stylist-card__img img { width: 100%; height: 100%; object-fit: cover; }
.az-stylist-card__rank { margin: 1.25rem 0 0; }
.az-stylist-card__name { margin: 0.5rem 0 0; color: var(--color-shell); }
.az-stylist-card__meta { margin: 0.25rem 0 0; font-size: 0.75rem; letter-spacing: 0.06em; color: color-mix(in srgb, var(--color-shell) 75%, transparent); }
.az-stylist-card__title { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.625; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }

/* ---------- interior scroll ---------- */

.az-interior-scroll { display: flex; gap: 1rem; overflow-x: auto; padding: 0 1.5rem; scroll-snap-type: x mandatory; }
@media (min-width: 1024px) { .az-interior-scroll { padding: 0 4rem; } }
.az-interior-scroll > div { flex: 0 0 78%; scroll-snap-align: center; }
.az-interior-scroll > div:nth-child(2n) { margin-top: 3rem; }
@media (min-width: 640px) { .az-interior-scroll > div { flex-basis: 48%; } }
@media (min-width: 1024px) { .az-interior-scroll > div { flex-basis: 32%; } }
.az-interior-scroll img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* ---------- testimonials ---------- */

.az-testimonials { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
@media (min-width: 768px) { .az-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; overflow: visible; } }
.az-testimonial { flex: 0 0 82%; scroll-snap-align: center; border: 1px solid var(--color-line); background: var(--color-shell); padding: 2rem; }
@media (min-width: 768px) { .az-testimonial { flex: initial; } }
.az-testimonial__mark { display: block; font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: rgb(184 58 78 / 0.5); }
.az-testimonial blockquote { margin: 1rem 0 0; font-size: 0.875rem; line-height: 2; color: var(--color-sumi); }
.az-testimonial footer { margin-top: 1.75rem; border-top: 1px solid var(--color-line); padding-top: 1rem; }
.az-testimonial footer p:first-child { margin: 0; font-size: 0.8125rem; line-height: 1.9; }
.az-testimonial footer .age { color: var(--color-stone); }

/* ---------- access ---------- */

.az-access { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 768px) { .az-access { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.az-access dl { margin: 3rem 0 0; border-top: 1px solid var(--color-line); }
.az-access dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--color-line); }
.az-access dt { color: var(--color-stone); font-size: 0.75rem; letter-spacing: 0.08em; padding-top: 0.1rem; }
.az-access dd { margin: 0; font-size: 0.875rem; line-height: 1.7; }
.az-access__note { margin-top: 1.5rem; font-size: 0.75rem; color: var(--color-stone); }

/* ---------- faq (native details/summary accordion, matches FaqList.tsx) ---------- */

.az-faq { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.az-faq details { border-top: 1px solid var(--color-line); }
.az-faq details:first-child { border-top: 0; }
.az-faq summary {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	cursor: pointer;
	list-style: none;
	padding: 1.5rem 0;
}
.az-faq summary::-webkit-details-marker { display: none; }
.az-faq summary .q-mark {
	flex-shrink: 0;
	margin-top: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	color: var(--color-gold);
}
.az-faq summary .q-text { flex: 1; font-size: 0.9375rem; line-height: 1.625; color: var(--color-sumi); }
.az-faq summary .q-toggle { position: relative; flex-shrink: 0; margin-top: 0.625rem; width: 0.75rem; height: 0.75rem; }
.az-faq summary .q-toggle span { position: absolute; top: 50%; left: 0; height: 1px; width: 0.75rem; background: var(--color-sumi); }
.az-faq summary .q-toggle span:last-child { transform: rotate(90deg); transition: transform 400ms var(--ease-quint); }
.az-faq details[open] summary .q-toggle span:last-child { transform: rotate(0deg); }
.az-faq .az-faq-a { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding-bottom: 1.75rem; animation: az-faq-in 500ms var(--ease-expo); }
.az-faq .az-faq-a .a-mark { font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--color-stone); }
.az-faq .az-faq-a p { margin: 0; font-size: 0.875rem; line-height: 2; color: var(--color-stone); }
.az-faq .az-faq-a .source { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; }
@keyframes az-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- final cta ---------- */

.az-final-cta { position: relative; text-align: center; overflow: hidden; }
.az-final-cta__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.3; }
.az-final-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
/* 見出しを wrap の幅いっぱいに使わせる。ここを 40rem に絞っていたせいで
   「そのまま確認できます。」が中途半端に折り返していた。
   幅を制限するのはリード文だけ（元実装も max-w-xl はリード文にしか付いていない）。 */
.az-final-cta__inner { position: relative; z-index: 1; }
.az-final-cta__inner h2 { margin-top: 1.5rem; }
.az-final-cta__lead { max-width: 36rem; margin: 2rem auto 0; font-size: 0.875rem; line-height: 2; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }
.az-final-cta .btn-row { justify-content: center; margin-top: 3rem; }

/* ---------- footer ---------- */

.az-footer { padding-block: 5rem; }
.az-footer .az-logo { display: block; font-size: 1.5rem; line-height: 1.3333; }
@media (min-width: 768px) { .az-footer { padding-block: 7rem; } }
.az-footer__grid { display: grid; gap: 3.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .az-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.az-footer__tagline { margin: 1.25rem 0 0; max-width: 24rem; font-size: 0.8125rem; line-height: 2; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }
.az-footer__info { margin: 2.25rem 0 0; display: grid; grid-template-columns: 4rem 1fr; gap: 0.625rem 1rem; font-size: 0.8125rem; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }
.az-footer__info dt { color: color-mix(in srgb, var(--color-shell) 75%, transparent); }
.az-footer__info dd { margin: 0; }
.az-footer__col h3 { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-gold); margin: 0; }
.az-footer__col ul { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.az-footer__col li + li { margin-top: 0.875rem; }
.az-footer__col a { display: inline-block; padding-bottom: 2px; font-size: 0.8125rem; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }
.az-footer__col a:hover { color: var(--color-gold); }
.az-footer__lang {
	margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-line-dark);
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem;
}
.az-footer__lang-title { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.6875rem; letter-spacing: 0.1em; color: color-mix(in srgb, var(--color-shell) 60%, transparent); }
.az-footer__lang a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.75rem; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }
.az-footer__bottom { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-line-dark); }
.az-footer__bottom-row { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) { .az-footer__bottom-row { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.az-footer__bottom-links { display: flex; flex-shrink: 0; align-items: center; gap: 1.25rem; font-size: 0.6875rem; color: color-mix(in srgb, var(--color-shell) 85%, transparent); }
.az-footer__bottom-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.az-footer__disclaimer { margin: 0; font-size: 0.6875rem; line-height: 2; max-width: 42rem; color: color-mix(in srgb, var(--color-shell) 75%, transparent); }

/* ---------- responsive base tweaks ---------- */
/* (旧ヒーロー実装の名残で .az-hero__content の下余白を上書きしていたバグを削除済み。
   現在は下の「hero mobile-safe area」ブロックが唯一の定義) */

/* ---------- about（このデモでできること） ---------- */

.az-about-head { padding-block: 4rem 3rem; }
@media (min-width: 768px) { .az-about-head { padding-block: 6rem 4rem; } }

.az-about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 768px) { .az-about-list { gap: 6rem; } }
.az-about-item { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .az-about-item { grid-template-columns: 4rem 1fr; gap: 2.5rem; } }
.az-about-item__no { margin: 0; font-size: 1.875rem; color: var(--color-gold); }
.az-about-item__body { margin: 1.5rem 0 0; max-width: 48rem; font-size: 0.9375rem; line-height: 2; color: var(--color-stone); }
.az-about-item__note { margin-top: 1.5rem; max-width: 48rem; border-left: 2px solid color-mix(in srgb, var(--color-gold) 40%, transparent); background: var(--color-shell); padding: 1.25rem 1.5rem; }
.az-about-item__note p { margin: 0; font-size: 0.8125rem; line-height: 2; color: var(--color-sumi); }
.az-about-item__link { margin-top: 1.5rem; display: inline-block; font-size: 0.8125rem; color: var(--color-sumi); }

.az-about-notes { margin: 3.5rem 0 0; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .az-about-notes { grid-template-columns: repeat(3, 1fr); } }
.az-about-notes dd { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 2; color: var(--color-stone); }

.az-about-cta { padding-block: 5rem; }
@media (min-width: 768px) { .az-about-cta { padding-block: 7rem; } }
.az-about-cta__lead { margin: 1.5rem auto 0; max-width: 36rem; font-size: 0.875rem; line-height: 2; color: var(--color-stone); }