/*
 * Cyan Salon テーマのスタイル。
 *
 * 色の役割
 *   地の色（白と淡い色を交互に）約 70% / メインカラー（サロンは紺、アイラッシュは黒）約 25% / ポイント色のシアン 約 5%。
 *   1 ページの中でメインカラーは 1 色だけ。暗い面はフッターと特集カード 1 枚までにする。
 * テーマ: 海・波。欄の境目や見出しの下で波が流れ、写真は水滴が広がるように現れる（動きは assets/js/site.js）。
 *
 * 1. 色と文字  2. 基本  3. 部品  4. ヘッダー・メニュー  5. トップ  6. 下層ページ  7. ブログ  8. スタイル写真の一覧
 * 9. LP  10. フッター  11. 動きを減らす設定
 */

/* ===== 1. 色と文字 ===== */
:root {
	--foam: #F4F8FB;
	--surface: #FFFFFF;
	--abyss: #0A2238;
	--prussian: #1A4472;
	--cyan: #00AEEF;
	--ink: #10233A;
	--muted: #4A5F73;
	--line: #D6E4EE;
	--on-dark: #EAF4FA;
	--on-dark-muted: #A9C1D3;
	--accent: var(--prussian);
	--accent-soft: #E6EEF6;
	/* 波（canvas）の 3 層。最後の層は次の欄の地の色 */
	--wave-1: rgba(0, 174, 239, .22);
	--wave-2: rgba(26, 68, 114, .28);
	--wave-3: #FFFFFF;
	--font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	--font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
	--font-latin: "Nunito", "Helvetica Neue", Arial, sans-serif;
	/* 電話番号・住所・営業時間など、数字のまじる情報。数字と英字は Nunito、日本語は本文のフォントで出す
	   （本文のフォントの数字は幅が広く太く見え、日本語とつり合わないため） */
	--font-info: "Nunito", "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
	/* 字の大きさ：本文 16px を基準にした段階。数字を直接書かず、この中から選ぶ */
	--fs-xs: 12px;  /* ラベル・札（営業中・写真の上のカテゴリ）・コピーライト */
	--fs-sm: 14px;  /* 補足・日付・注記・メニューのリンク */
	--fs-md: 16px;  /* 本文・ボタン・表の値 */
	--fs-lg: 18px;  /* カードの見出し */
	--fs-xl: 20px;  /* 小見出し */
	--fs-2xl: 24px; /* 本文の中見出し */
	--fs-3xl: clamp(24px, 2.6vw, 32px); /* 欄の見出し（日本語） */
	--fs-4xl: clamp(26px, 3.2vw, 36px); /* ページの見出し（日本語） */
	/* 飾りの英字見出し（細く大きい英字）。画面の幅 360px → 1440px でなめらかに大きくする（l: 50 → 104 / m: 44 → 92） */
	--fs-display-l: clamp(48px, 5vw + 32px, 104px);
	--fs-display-m: clamp(44px, 4.4vw + 28px, 92px);
	--fs-display-s: clamp(32px, 5vw, 48px);
	--fs-display-xs: 32px;
	/* 英字見出しの下の日本語（16 → 18px）。英字との差が開きすぎないように、パソコンでは少し大きくする */
	--fs-label: clamp(16px, .2vw + 15.2px, 18px);
	/* 余白は 4 の倍数を基本に、画面の幅に合わせてなめらかに変える（決まった幅で急に変えない）。
	   欄の上下 --sec-pad: 48 → 112px / 見出しと中身のあいだ --head-gap: 28 → 56px / 下層ページの見出しの下の波 --wave-h: 56 → 96px。
	   スマホ（390px）で 48 / 28px。64 / 32px では、欄の境目に上下合わせて 128px の空きができ、画面の 1/6 が何もない帯になっていた（2026-10-28） */
	--sec-pad: clamp(48px, 6.3vw + 23.4px, 112px);
	--head-gap: clamp(28px, 2.8vw + 17px, 56px);
	--wave-h: clamp(56px, 3.7vw + 43px, 96px);
	/* 角の丸み：小さい部品 12 / 箱 20 / カード・写真 28 / 特集 36。ボタンと札は 999px（両端が丸い） */
	--r-s: 12px;
	--r-m: 20px;
	--r-l: 28px;
	--r-xl: 36px;
	/* アイコン：文字の横 20px / 単独 24px / 見出しの飾り 32px。線は見た目で 1.5px にそろえる */
	--icon-s: 20px;
	--icon-m: 24px;
	--icon-l: 32px;
	/* 左右の空き：スマホ 20px → タブレット 37px → パソコン 40px。中身の幅はいちばん広くて 1160px（.wrap） */
	--gl: max(clamp(20px, 4vw + 6px, 40px), env(safe-area-inset-left, 0px));
	--gr: max(clamp(20px, 4vw + 6px, 40px), env(safe-area-inset-right, 0px));
	--ease: cubic-bezier(.22, .8, .2, 1);
	color-scheme: light;
}

/* Cyan Eyelash：メインカラー（文字・ボタン・フッター）は黒。シアンの使い方・構成はサロンと共通。
   地の淡い色は淡いピンク（色相 345°。2026-10-23 に肌色・くすみピンクと見比べて決めた）。
   濃さは 3 段階（地 #FAEBEE / チップ・アイコンの地 #F5DBE2 / 罫線 #E7CFD5）。補足の文字も同じ色相の温かいグレーにする
   （白・地・チップのどの上でもコントラスト 5.6 以上）。波（写真の下・見出しの下）もシアンではなく淡いピンクにする */
body.shop-eyelash {
	--foam: #FAEBEE;
	--surface: #FFFFFF;
	--abyss: #141414;
	--prussian: #1A1A1A;
	--ink: #1A1A1A;
	--muted: #675156;
	--line: #E7CFD5;
	--on-dark: #F5F5F5;
	--on-dark-muted: #B8B8B8;
	--accent: #1A1A1A;
	--accent-soft: #F5DBE2;
	--wave-1: rgba(245, 219, 226, .7);
	--wave-2: rgba(230, 179, 191, .55);
}

/* ===== 2. 基本 ===== */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-behavior: smooth は使わない。ScrollTrigger が位置を測り間違える（ページ内リンクのなめらかな移動は site.js） */
html {
	scroll-padding-top: calc(var(--header-h, 68px) + 16px);
	-webkit-text-size-adjust: 100%;
}
/* ページの切り替えの動き（@view-transition）は使わない。「戻る」でスクロールの位置が戻る前の画面が重なり、写真がずれて見えたため */
body {
	margin: 0;
	background: var(--foam);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
/* iPhone のノッチ部分をヘッダーと同じ色で埋める */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: calc(1160px + var(--gl) + var(--gr)); margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
/* 見出しと短い文は、日本語の言葉の途中で改行しない（「あなた／の髪」のようにしない。対応ブラウザだけ）。行の長さもそろえる */
h1, h2, h3, h4, .page-lead, .reco-lead, .tokio_head_lead { word-break: auto-phrase; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
/* 住所などの、途中で折り返さないかたまり（inc/store.php の cs_theme_address_html） */
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--gl); top: -100px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px rgba(10, 34, 56, .18); }
.skip-link:focus { top: 12px; }
.site-main:focus { outline: none; }
.tone-foam { background: var(--foam) !important; }
.tone-surface { background: var(--surface) !important; }

/* ===== 3. 部品 ===== */

/* アイコン（inc/icons.php） */
.icon { width: var(--icon-m); height: var(--icon-m); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; shape-rendering: geometricPrecision; }
.icon.draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.icon.draw.pre { stroke-dashoffset: 1; }
/* 小さいアイコンは線を太く・大きいアイコンは細く指定して、見た目の太さを 1.5px にそろえる */
.btn .icon, .search-form button .icon, .notice .icon, .footer-news-more .icon, .style-card .meta .icon, .price-card-title .icon, .single-meta .icon, .post-navi-dir .icon, .pagination .icon { width: var(--icon-s); height: var(--icon-s); stroke-width: 1.8; }
.quick-item dt .icon, .booking-card > .icon { width: var(--icon-l); height: var(--icon-l); stroke-width: 1.25; }

/* ボタン */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500; line-height: 1.4; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 34, 56, .16); }
/* LINE は緑の塗りにしない（公式アイコンを緑の上に置けないため）。白地に公式アイコンを載せる */
.btn-line { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--prussian); }
/* LINE と Instagram のロゴは同じ大きさ・同じ位置に置く。
   LINE の決まりは「最小の高さ：スマホ 40px / PC 20px」（line.me/ja/logo）。スマホは 1px に 2〜3 個の点を使うので、
   CSS で 28px にすれば 56〜84 個の点になり、決まりを満たす（40px では大きすぎた）。ロゴの上・左・下の空きは同じ 10px */
.line-logo, .insta-logo { width: var(--icon-m); height: var(--icon-m); flex: none; }
@media (max-width: 900px) {
	.line-logo, .insta-logo { width: 28px; height: 28px; }
	.btn:has(.line-logo), .btn:has(.insta-logo) { min-height: 48px; padding-left: 10px; }
}
.btn-dark { background: var(--prussian); color: var(--on-dark); }
/* 電話番号のボタンも、数字は Nunito */
.btn[href^="tel:"] { font-family: var(--font-info); }
.btn-ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: var(--on-dark-muted); }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .25; transform: scale(0); pointer-events: none; animation: ripple .7s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* 見出し：大きな細い英字＋日本語 */
.eyebrow { margin: 0 0 16px; font-family: var(--font-latin); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .28em; color: var(--prussian); }
.sec { padding-block: var(--sec-pad); position: relative; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: var(--head-gap); }
.sec-title { margin: 0; display: flex; flex-direction: column; gap: 8px; font-weight: inherit; }
.sec-title .latin { font-family: var(--font-latin); font-weight: 300; font-size: var(--fs-display-l); line-height: .95; letter-spacing: .04em; color: var(--prussian); display: block; overflow: hidden; overflow-wrap: anywhere; }
.sec-title .latin span { display: inline-block; }
.sec-title .ja { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-label); letter-spacing: .12em; color: var(--muted); }

/* 絞り込みのボタン */
.chip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-sm); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.chip[aria-pressed="true"] { background: var(--prussian); color: var(--on-dark); border-color: var(--prussian); }

/* 営業中の表示 */
.open-badge { display: inline-flex; align-items: center; gap: 8px; padding: 2px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; text-decoration: none; }
.open-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.open-badge.is-open { background: #E3F6EA; color: #0B6B32; }
.open-badge.is-closed { background: var(--accent-soft); color: var(--muted); }

/* 波（canvas。site.js が描く） */
.waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 120px; display: block; z-index: 2; pointer-events: none; }

/* パンくずリスト */
.breadcrumbs ol { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-sm); color: var(--muted); }
.breadcrumbs li { min-width: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 12px; color: var(--line); }
.breadcrumbs a { display: inline-block; padding-block: 4px; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); }
@media (max-width: 700px) {
	.breadcrumbs li:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 検索フォーム */
.search-form { display: flex; align-items: center; max-width: 480px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 20px; }
.search-form:focus-within { outline: 3px solid var(--cyan); outline-offset: 2px; }
.search-form input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-md); }
.search-form input:focus { outline: none; }
.search-form button { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--prussian); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

.empty-note { margin: 0; padding: 32px; background: var(--foam); border-radius: var(--r-m); text-align: center; color: var(--muted); }
.staff-note { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 24px; border-radius: var(--r-m); background: var(--foam); color: var(--muted); font-size: var(--fs-sm); }
.staff-note .icon { color: var(--prussian); }
.staff-note strong { color: var(--ink); font-weight: 500; }

/* ===== 4. ヘッダー・メニュー ===== */
/* ヘッダーの地は白（サロンもアイラッシュも）。スクロールしたら少し透かして、下に線を出す */
.site-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; background: var(--surface); transition: transform .5s var(--ease), background .4s, box-shadow .4s; }
.site-header.is-solid { background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.notice { background: var(--prussian); color: var(--on-dark); font-size: var(--fs-sm); line-height: 1.6; }
.notice .wrap { display: flex; align-items: center; justify-content: center; gap: 8px; padding-block: 8px; text-align: center; }
.notice .icon { color: var(--cyan); }
.nav-row { display: flex; align-items: center; gap: 20px; padding-block: 8px; }
.brand { display: flex; align-items: center; text-decoration: none; }
/* ロゴは細い線画で周りに余白があるので、文字が読める大きさにする */
.brand img { width: 64px; height: 64px; }
@media (max-width: 900px) { .brand img { width: 56px; height: 56px; } }
.nav { display: flex; gap: 24px; margin-left: auto; font-family: var(--font-latin); font-size: var(--fs-sm); letter-spacing: .16em; font-weight: 600; }
.nav a { text-decoration: none; color: var(--ink); position: relative; padding-block: 8px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { min-height: 40px; padding: 0 20px; font-family: var(--font-latin); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .16em; color: var(--prussian); border-color: var(--prussian); transition: background .3s, color .3s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.nav-cta:hover, .nav-cta[aria-current="page"] { background: var(--prussian); color: var(--on-dark); }
.menu-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; align-items: center; justify-content: center; color: var(--prussian); }
@media (max-width: 900px) {
	.nav, .nav-cta { display: none; }
	.menu-toggle { display: inline-flex; }
}

/* スマホの全画面メニュー（右上のボタンから円が広がる） */
.overlay-menu { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--abyss); color: var(--on-dark); clip-path: circle(0% at calc(100% - 44px) 60px); transition: clip-path .7s var(--ease), visibility 0s .7s; visibility: hidden; display: flex; flex-direction: column; justify-content: center; padding: 80px var(--gr) 80px var(--gl); }
.overlay-menu.is-open { clip-path: circle(150% at calc(100% - 44px) 60px); visibility: visible; transition: clip-path .7s var(--ease); }
.overlay-nav { display: flex; flex-direction: column; gap: 8px; }
.overlay-menu a.big { font-family: var(--font-latin); font-size: clamp(36px, 10vw, 56px); font-weight: 300; letter-spacing: .08em; text-decoration: none; line-height: 1.3; }
.overlay-menu a.big small { font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: 0; color: var(--on-dark-muted); margin-left: 12px; }
.overlay-sub { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: var(--fs-md); }
.overlay-sub a { color: var(--on-dark-muted); text-decoration: none; padding-block: 8px; }
.overlay-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.overlay-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: var(--gr); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--on-dark-muted); background: transparent; color: var(--on-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
body.menu-open { overflow: hidden; }

/* ===== 5. トップ ===== */

/* 写真スライダー：今のサイトと同じ横長の写真（スマホは縦長）。写真はゆっくり寄り、下端で波が流れる */
.hero { position: relative; padding-top: var(--header-h, 68px); background: var(--foam); }
.hero-slider { position: relative; width: 100%; aspect-ratio: 1500 / 450; min-height: 340px; max-height: 620px; overflow: hidden; background: var(--abyss); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.hero-slide.is-on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 8s linear; }
.hero-slide.is-on img { transform: scale(1); }
.hero-controls { position: absolute; right: var(--gr); bottom: 92px; z-index: 3; display: flex; align-items: center; gap: 4px; }
.hero-dots { display: flex; gap: 8px; }
/* 見た目は細い線、押せる範囲は高さ 44px */
.hero-dot { width: 28px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.hero-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .5); transition: background .3s; }
.hero-dot[aria-current="true"] { width: 44px; transition: width .5s var(--ease); }
.hero-dot[aria-current="true"]::before { background: var(--surface); }
.hero-pause { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--prussian); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 700px) {
	.hero-slider { aspect-ratio: 550 / 650; max-height: none; }
	.hero-controls { bottom: 84px; }
}

/* 基本情報：スライダーに少し重なるカード */
.quick { background: var(--surface); }
.quick-grid { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; transform: translateY(-36px); position: relative; z-index: 3; }
.quick-item { position: relative; background: var(--surface); padding: 24px 24px 24px 72px; min-width: 0; }
.quick-item dt { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; }
.quick-item dt .icon { position: absolute; left: 24px; top: 24px; color: var(--prussian); }
.quick-item dd { margin: 4px 0 0; font-family: var(--font-info); font-size: var(--fs-md); font-weight: 500; line-height: 1.6; }
.quick-item dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
/* 電話番号・住所・地図のリンクは、見た目の位置を変えずに押せる範囲だけ上下に広げる（高さ 40px 前後） */
.quick-item dd a:not(.open-badge), .info-list dd a { display: inline-block; padding-block: 8px; margin-block: -8px; }
.quick-item dd a.open-badge { border: 0; }
@media (max-width: 900px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* スマホは 1 行に 1 つ、左に項目名・右に中身（2 列にすると「営業中 ・ 19:00 まで」や住所の番地が折り返す）。4 つで高さ 200px ほど */
@media (max-width: 520px) {
	.quick-grid { grid-template-columns: minmax(0, 1fr); }
	.quick-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
	.quick-item dt { flex: none; display: flex; align-items: center; gap: 8px; }
	.quick-item dt .icon { position: static; width: var(--icon-s); height: var(--icon-s); stroke-width: 1.8; }
	.quick-item dd { margin: 0; min-width: 0; font-size: var(--fs-sm); text-align: right; }
}

/* STYLE：写真を横に並べる（パソコンは縦スクロールで横に流れる） */
.style { background: var(--surface); }
.style-stage { background: var(--surface); }
.is-shop-top .style { padding-top: 40px; }
.style-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* スマホは 1 行に並べ、入りきらないぶんは横にスクロール（折り返すと最後の 1 つだけが 2 行目に落ちる） */
@media (max-width: 600px) {
	.style-tools { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding-inline: var(--gl) var(--gr); scrollbar-width: none; }
	.style-tools::-webkit-scrollbar { display: none; }
	.sec-head .style-tools { flex: 0 0 calc(100% + var(--gl) + var(--gr)); }
	.chip { flex: none; padding: 0 14px; }
}
/* 写真列の左端は本文の左端にそろえる（スナップの基準も同じ位置にしないと、読み込み時に余白ぶんずれる） */
.style-pin { --track-pad: var(--gl); }
@media (min-width: 1240px) { .style-pin { --track-pad: calc((100vw - 1160px) / 2); } }
.style-scroller { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--track-pad); scrollbar-width: thin; padding-bottom: 16px; }
.style-track { display: flex; gap: 24px; width: max-content; padding-left: var(--track-pad); padding-right: var(--gr); }
.style-card { width: clamp(240px, 26vw, 320px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.style-card figure { margin: 0; position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; background: var(--accent-soft); }
.style-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
/* アイラッシュの写真は正方形の組み写真（3 段など）なので、切り抜かずに正方形で見せる */
.style-card[data-shop="eyelash"] figure { aspect-ratio: 1 / 1; }
.style-card:hover figure img { transform: scale(1.06); }
.style-card .cat { position: absolute; left: 12px; top: 12px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: var(--fs-xs); padding: 2px 12px; border-radius: 999px; pointer-events: none; }
.style-card .cap { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .style-card .cap { font-size: var(--fs-md); } }
.style-card .meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.style-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* MENU */
.menu { background: var(--foam); }
.cat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.cat-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: var(--fs-sm); color: var(--ink); transition: border-color .3s, transform .3s var(--ease); }
.cat-link .icon { color: var(--accent); }
@media (max-width: 600px) {
	.cat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
	.cat-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.cat-link { padding: 0 14px; }
}
.cat-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.tone-surface .cat-link, .tone-surface .price-card { background: var(--foam); }
/* 料金のカードは枚数で列を決める（幅だけで決めると、1024px で「3 枚と 1 枚」、5 枚のときは「4 枚と 1 枚」に分かれる）。
   スマホ 1 列 → 2 列（奇数のときは最後の 1 枚を横いっぱい）→ 4 枚なら 4 列・3 / 5 / 6 枚なら 3 列 */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 600px) {
	.price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.price-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	.price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.price-grid > :last-child:nth-child(odd) { grid-column: auto; }
	.price-grid:has(> :nth-child(3):last-child), .price-grid:has(> :nth-child(5):last-child), .price-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.price-card { background: var(--surface); border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--header-h, 68px) + 24px); }
.price-card-title { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--font-latin); font-weight: 600; letter-spacing: .14em; font-size: var(--fs-md); color: var(--accent); }
.price-card-title .icon { width: 36px; height: 36px; padding: 8px; border-radius: var(--r-s); background: var(--accent-soft); }
.price-card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; font-size: var(--fs-md); }
.price-card dt { min-width: 0; }
.price-card dt small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.price-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-latin); font-weight: 600; white-space: nowrap; }
.price-note { max-width: 44em; margin-top: 24px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.price-note p { margin: 0; }
.price-note b { color: var(--ink); font-weight: 500; }
.menu-other { margin: 36px 0 0; }

/* おすすめ：髪の写真と製品を分けて見せる */
.recommend { background: var(--surface); }
.reco { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); overflow: hidden; background: var(--foam); color: var(--ink); }
.reco-img { position: relative; min-height: 420px; overflow: hidden; background: var(--foam); }
.reco-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; }
.reco-body { min-width: 0; padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.reco-body .eyebrow { color: var(--prussian); margin: 0 0 12px; font-size: var(--fs-xs); letter-spacing: .18em; }
.reco-title { margin: 0; color: var(--prussian); font-family: var(--font-latin); font-size: var(--fs-display-xs); line-height: 1.1; font-weight: 300; letter-spacing: .04em; }
.reco-body .reco-type { margin: 4px 0 20px; color: var(--prussian); font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: .14em; }
.reco-body .reco-lead { max-width: 17em; margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; line-height: 1.65; }
.reco-product { width: min(100%, 290px); height: auto; margin: 12px 0 20px; }
.reco-link { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--prussian); color: var(--prussian); font-size: var(--fs-sm); text-decoration: none; }
.reco-link:hover { color: var(--ink); border-color: var(--ink); }
.reco-link .icon { width: 16px; height: 16px; }
@media (max-width: 900px) { .reco { grid-template-columns: minmax(0, 1fr); } .reco-img { min-height: 0; aspect-ratio: 16 / 9; } .reco-body { padding: 32px 24px 40px; } .reco-product { width: min(100%, 240px); } }

/* もう一方のお店への案内：料金は載せず、相手の店のロゴと MENU へのリンクだけを置く明るいカード */
.shop-link-sec { background: var(--foam); padding-block: clamp(48px, 1.5vw + 42px, 64px); }
.shop-link { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(24px, 3vw, 32px); }
/* ロゴは配られたままの正方形で出す（角を丸めない） */
.shop-link-logo { width: 64px; height: 64px; flex: none; }
.shop-link-body { flex: 1 1 220px; min-width: 0; }
.shop-link-title { margin: 0; display: flex; flex-direction: column; gap: 4px; font-weight: inherit; }
.shop-link-title .latin { font-family: var(--font-latin); font-weight: 300; font-size: var(--fs-display-s); line-height: 1; letter-spacing: .06em; color: var(--prussian); }
.shop-link-title .ja { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); letter-spacing: .1em; color: var(--muted); }

/* ACCESS */
.access { background: var(--surface); }
.access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.access-photo { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 1000 / 650; }
.access-photo img { width: 100%; height: 100%; object-fit: cover; }
.info-list { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.info-list > div { position: relative; padding-left: 40px; }
.info-list dt { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; }
.info-list dt .icon { position: absolute; left: 0; top: 3px; color: var(--prussian); }
.info-list dd { margin: 0; font-family: var(--font-info); font-size: var(--fs-md); }
.hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; font-variant-numeric: tabular-nums; }
.hours span:nth-child(odd) { color: var(--muted); }
.access-map { margin-top: 40px; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 7; background: var(--accent-soft); }
.access-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .access-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 700px) { .access-map { aspect-ratio: 4 / 3; } }

/* ===== 6. 下層ページ ===== */
.page-hero { position: relative; background: var(--foam); padding: calc(var(--header-h, 68px) + clamp(24px, 1.5vw + 18px, 40px)) 0 calc(var(--wave-h) + clamp(24px, 1.5vw + 18px, 40px)); }
.page-hero + .sec { padding-top: calc(var(--sec-pad) / 2); }
.page-hero .sec-title .latin { font-size: var(--fs-display-m); }
.page-title-ja { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); line-height: 1.5; color: var(--prussian); }
.page-lead { margin-top: 24px; max-width: 560px; }
.page-hero-waves { height: var(--wave-h); }

/* ご予約 */
.booking { background: var(--foam); }
.booking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.booking-card { background: var(--surface); border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tone-surface .booking-card { background: var(--foam); }
.booking-title { margin: 0 0 32px; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--prussian); }
.booking-card > .icon { color: var(--prussian); }
.booking-card h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; }
.booking-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* サイトマップ */
.sitemap { background: var(--surface); }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.sitemap-group { background: var(--foam); border-radius: var(--r-m); padding: 24px; }
.sitemap-title { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--prussian); }
.sitemap-title a { text-decoration: none; }
.sitemap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sitemap li a { display: inline-flex; gap: 16px; text-decoration: none; padding-block: 4px; }
.sitemap li a:hover { text-decoration: underline; }
.sitemap-posts { margin-top: 56px; }
.sitemap-posts time { flex: none; font-family: var(--font-latin); font-size: var(--fs-sm); color: var(--muted); padding-top: 2px; }

/* 404 */
.not-found { background: var(--surface); }
.not-found-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* 固定ページの本文（プライバシーポリシーなど） */
.entry-sec { background: var(--surface); padding-block: 40px var(--sec-pad); }
/* 本文は 1 行 45 文字ほど（16px × 720px）。日本語はこれより長いと読みにくい */
.entry-wrap { max-width: calc(720px + var(--gl) + var(--gr)); }

/* 本文の文字組み（固定ページ・記事で共通） */
.entry-content { font-size: var(--fs-md); line-height: 2; overflow-wrap: anywhere; }
.entry-content > * { margin-top: 0; margin-bottom: 0; }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 { margin-top: 2.6em; padding-bottom: 12px; font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.6; font-weight: 700; color: var(--prussian); background: linear-gradient(var(--cyan), var(--cyan)) left bottom / 48px 2px no-repeat, linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat; }
.entry-content h3 { margin-top: 2.2em; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.6; font-weight: 700; color: var(--prussian); display: flex; gap: 12px; align-items: baseline; }
.entry-content h3::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); transform: translateY(-2px); }
.entry-content h4 { margin-top: 2em; font-size: var(--fs-lg); }
.entry-content a { color: var(--prussian); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content a:hover { text-decoration-thickness: 2px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .4em; }
.entry-content img { border-radius: var(--r-m); }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content blockquote { margin-left: 0; margin-right: 0; padding: 20px 24px; background: var(--foam); border-radius: var(--r-m); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.entry-content th, .entry-content td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry-content iframe { max-width: 100%; }
.entry-content hr { border: 0; height: 1px; background: var(--line); }
.entry-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.entry-content .wp-block-column { flex: 1 1 240px; min-width: 0; }
@media (min-width: 701px) {
	.entry-content .alignleft { float: left; margin: .4em 1.6em 1em 0; max-width: 50%; }
	.entry-content .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: 50%; }
	.entry-content::after { content: ""; display: block; clear: both; }
}

/* ===== 7. ブログ ===== */
.archive { background: var(--surface); }
.archive-sort { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 32px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.archive-sort button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.archive-sort button[aria-pressed="true"] { background: var(--prussian); color: var(--on-dark); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.post-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.post-card-link:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10, 34, 56, .1); }
.post-card-img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--accent-soft); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post-card-link:hover .post-card-img img { transform: scale(1.05); }
.post-card-noimage { display: flex; align-items: center; justify-content: center; height: 100%; }
.post-card-noimage img { width: 96px; height: 96px; opacity: .5; }
.post-card-link:hover .post-card-noimage img { transform: none; }
.post-card-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.post-card-date { font-family: var(--font-latin); font-size: var(--fs-sm); letter-spacing: .08em; color: var(--muted); }
.post-card-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.6; font-weight: 500; }
.post-card-excerpt { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.search-highlight { background: linear-gradient(transparent 60%, rgba(0, 174, 239, .35) 60%); }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 48px 0 0; padding: 0; }
.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-family: var(--font-latin); font-weight: 600; }
.pagination .page-numbers.current { background: var(--prussian); border-color: var(--prussian); color: var(--on-dark); }
.pagination .page-numbers.dots { border: 0; }

/* 記事ページ */
.single-head { position: relative; background: var(--foam); padding: calc(var(--header-h, 68px) + clamp(24px, 1.5vw + 18px, 40px)) 0 calc(var(--wave-h) + clamp(24px, 1.5vw + 18px, 40px)); }
.single-head .eyebrow { margin-bottom: 12px; }
.single-title { margin: 0; max-width: 860px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); line-height: 1.6; color: var(--prussian); }
.single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; font-size: var(--fs-sm); color: var(--muted); }
.single-meta time { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-latin); }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); text-decoration: none; }
.tag-list a:hover { border-color: var(--prussian); }
.single-body { background: var(--surface); padding-bottom: var(--sec-pad); }
.single-thumb { position: relative; z-index: 3; margin: -40px 0 48px; border-radius: var(--r-l); overflow: hidden; }
.single-thumb img { width: 100%; }
.single-body .entry-content { padding-top: 24px; }
.post-navi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 64px; }
.post-navi-link { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-m); text-decoration: none; transition: border-color .3s; }
.post-navi-link:hover { border-color: var(--prussian); }
.post-navi-link.is-next { align-items: flex-end; text-align: right; }
.post-navi-dir { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-latin); font-size: var(--fs-xs); letter-spacing: .12em; color: var(--muted); }
.post-navi-title { font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.single-back { margin: 40px 0 0; text-align: center; }
@media (max-width: 600px) {
	.post-navi { grid-template-columns: minmax(0, 1fr); }
	.post-navi-empty { display: none; }
}

/* ===== 8. スタイル写真の一覧 ===== */
.style-archive { background: var(--surface); }
.style-archive .style-tools { margin-bottom: 32px; }
/* お店の切り替え（ヘアサロン / まつげエクステ）。押すとそのお店の一覧ページへ移る */
.style-shops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-width: 480px; padding: 4px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.style-shops a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 999px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s; }
.style-shops a:hover { color: var(--ink); }
.style-shops a[aria-current="page"] { background: var(--prussian); color: var(--on-dark); }
.style-shops .icon { width: 18px; height: 18px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }
.style-grid .style-card { width: auto; }
.style-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
@media (max-width: 520px) { .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .style-grid .style-card .cap { font-size: var(--fs-md); } }
.style-dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 640px); overflow: visible; }
.style-dialog::backdrop { background: rgba(8, 18, 28, .84); }
.style-dialog[open] { animation: dialog-in .45s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: scale(.96); } }
.style-dialog img { width: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: var(--r-m); }
.style-dialog-cap { margin: 16px 0 0; color: #FFFFFF; text-align: center; }
.style-dialog-cap:empty { display: none; }
.style-dialog-close { position: absolute; top: -60px; right: 0; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #FFFFFF; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ===== 9. LP（TOKIO INKARAMI。LP 本体の見た目は tokio-inkarami.css） ===== */
.lp-tokio { padding-top: var(--header-h, 68px); background: var(--surface); }

/* ===== 10. フッター ===== */
.site-footer { position: relative; background: var(--abyss); color: var(--on-dark); padding: 96px 0 56px; }
/* スマホは画面下の予約ボタンに隠れないぶん空ける */
@media (max-width: 900px) { .site-footer { padding-bottom: 120px; } }
@media (max-width: 600px) { .site-footer { padding-top: 56px; } }
.footer-wave { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: 60px; display: block; fill: var(--abyss); }
.footer-news { margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-news-title { margin: 0 0 12px; font-family: var(--font-latin); font-weight: 300; font-size: var(--fs-display-xs); letter-spacing: .08em; }
.footer-news ul { list-style: none; margin: 0; padding: 0; }
.footer-news li a { display: flex; gap: 16px; padding-block: 8px; text-decoration: none; }
.footer-news li a:hover span { text-decoration: underline; }
.footer-news time { flex: none; font-family: var(--font-latin); color: var(--on-dark-muted); }
.footer-news-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--on-dark-muted); text-decoration: none; font-size: var(--fs-sm); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; align-items: center; gap: 16px; }
/* ロゴは配られたままの正方形で出す（丸く切り抜かない）。サロンのロゴは透明の地に黒い線なので、元の白い地を敷く */
.footer-brand img { width: 64px; height: 64px; flex: none; background: #FFFFFF; }
.shop-eyelash .footer-brand img { background: #000000; }
.footer-name { margin: 0; font-family: var(--font-latin); font-size: var(--fs-md); letter-spacing: .14em; font-weight: 600; }
.footer-name span { display: inline-block; }
.footer-address { margin: 4px 0 0; color: var(--on-dark-muted); font-family: var(--font-info); font-size: var(--fs-sm); line-height: 1.8; }
.footer-address a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; max-width: 560px; font-size: var(--fs-sm); }
.footer-links a { color: var(--on-dark-muted); text-decoration: none; padding-block: 8px; }
.footer-links a:hover { color: var(--on-dark); }
.footer-sns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.copy { margin: 48px 0 0; font-size: var(--fs-xs); color: var(--on-dark-muted); }
/* スマホ：ロゴを店名の上端にそろえ、リンクは 2 列にそろえる（成り行きで折り返すと「プライバシーポリシー」だけが 1 行に残る） */
@media (max-width: 600px) {
	.footer-grid { gap: 32px; }
	.footer-brand { align-items: flex-start; }
	.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; width: 100%; }
	.footer-sns { margin-top: 32px; }
	.copy { margin-top: 40px; }
}

/* スマホの画面下に固定する予約ボタン（少しスクロールしてから出る） */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 8px var(--gr) calc(8px + env(safe-area-inset-bottom, 0px)) var(--gl); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(10, 34, 56, .1); display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; transform: translateY(110%); transition: transform .5s var(--ease); }
.sticky-cta.is-shown { transform: translateY(0); }
/* 幅 360px のスマホでも 1 行に収まるよう、左右の空きは LINE のロゴの周りと同じ 10px にする */
.sticky-cta .btn { min-height: 48px; padding: 0 10px; font-size: var(--fs-md); }
@media (max-width: 900px) { .sticky-cta { display: grid; } }

/* ===== 11. 動きを減らす設定（OS の「視差効果を減らす」など） ===== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}