@charset "UTF-8";
/* ============================================================
iina 新小岩 — 本番用スタイルシート
Design benchmark: CIECA.(表参道)
Author: —
Last updated: 2026-08-09
------------------------------------------------------------
設計原則
1. 固定背景 + 半透明パネルが上を流れる構造（CIECA.から継承）
2. 角丸ゼロ・暖色グレージュ・引き算で上質を出す
3. 本文16px / 行長720px（地域客層の可読性を優先しCIECA.から変更）
4. JS非依存で全コンテンツが表示されること（AIクローラー対策）
============================================================ */
/* ---------- Design tokens ---------- */
:root{
--c-text:#4A443D;
/* 補助テキスト。旧値 #8C857C は tint 背景(#EFE9DF)に対して 3.02:1 しかなく、
メニューの注記（「シャンプー・ブロー込」など）が読めなかった。
#6F675D で 4.60:1 となり WCAG AA を満たす。 */
--c-muted:#6F675D;
--c-muted-soft:#8C857C; /* 装飾・区切り用。本文には使わない */
--c-ground:#FBF9F6;
--c-tint-1:#EFE9DF;
--c-tint-2:#E4DDD2;
/* CIECA. の実測色に色相を合わせつつ、白文字で 4.5:1 を満たす濃度に落としてある。
（CIECA.実測 緑#6F8684=3.88:1 / トープ#AFA797=2.39:1 / グレー#898681=3.63:1 は
いずれも白文字だと基準割れ。docs/02-design-system.md の方針どおり濃度で調整） */
--c-trust:#5E7573; /* 技術・髪質改善（CIECA.の緑パネル） 白文字 4.92:1 */
--c-trust-d:#4E6462;
--c-taupe:#7A6E5C; /* MENU帯（CIECA.のトープ） 白文字 4.99:1 */
--c-gray:#6E6A64; /* ACCESS帯（CIECA.のグレー） 白文字 5.37:1 */
--c-action:#8F6B42;
--c-action-tint:#B69F7E;
--c-gold:#C0A24E;
--c-line:#DCD5CB;
--c-footer:#726C66; /* CIECA.実測どおり 白文字 5.18:1 */
--c-line-green:#06C755;
--f-sans:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
--f-mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
--f-en:"Cormorant Garamond",Georgia,serif;
--fs-body:1.6rem; --lh-body:1.9; --ls-body:.04em;
--fs-sec:3.0rem; --ls-sec:.14em;
--fs-lead:2.6rem; --lh-lead:1.85; --ls-lead:.08em;
--w-inner:1000px; --w-measure:720px;
--sp-sec-y:100px; --sp-sec-y-b:120px; --sp-gap:40px;
--btn-w:240px; --btn-h:64px;
--ease:.6s cubic-bezier(.22,.61,.36,1);
--header-h:64px;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
font-family:var(--f-sans); font-size:var(--fs-body);
line-height:var(--lh-body); letter-spacing:var(--ls-body);
color:var(--c-text); background:var(--c-ground);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--c-action);outline-offset:3px}
.visually-hidden{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
position:absolute;left:8px;top:-60px;z-index:9999;background:var(--c-action);
color:#fff;padding:12px 20px;transition:top .2s;
}
.skip-link:focus{top:8px}
/* ---------- 固定背景（写真 or 動画） ----------
CIECA.と同じく、背景を fixed で置き、半透明パネルがその上を流れる。
動画を使う場合も、静止画（poster）が必ず先に見えるようにする。
------------------------------------------------ */
.bg-fixed{
position:fixed;inset:0;z-index:-1;overflow:hidden;
background-color:#8d8175;
background-image:var(--bg-hero, none);
background-size:cover;background-position:center 38%;
}
.bg-fixed__video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 38%;
opacity:0;transition:opacity 1.2s ease;
}
.bg-fixed__video.is-ready{opacity:1}
.bg-fixed::after{
content:"";position:absolute;inset:0;
/* 白のKVコピーが載るため、中央帯のコントラスト比が 4.5:1 を下回らない濃さにする。
ブランドフィルム（明るいグレージュ基調）では 42% 地点が .10 だと 4.06:1 で不足したため .28 に上げた。
背景素材を差し替えたら scripts の計測をやり直すこと。 */
background:linear-gradient(180deg,rgba(60,52,44,.40) 0%,rgba(60,52,44,.28) 42%,rgba(60,52,44,.46) 100%);
}
/* 動きを減らす設定・省データ設定・低速回線では動画を出さない */
@media (prefers-reduced-motion:reduce){ .bg-fixed__video{display:none} }
@media (prefers-reduced-data:reduce){ .bg-fixed__video{display:none} }
/* 縦長の画面では、16:9の素材を cover すると横が大きく切られ、
映像に焼き込まれたロゴが中途半端に写り込む。スマホ用は縦位置(9:16)に
切り出した専用の静止画に差し替える（6KB / AVIF）。
ここはページ側の --bg-hero より後に来るので上書きされる。 */
@media (max-width:700px){
.bg-fixed{
background-image:image-set(
url("/assets/img/texture/hero-bg-sp.avif") type("image/avif"),
url("/assets/img/texture/hero-bg-sp.webp") type("image/webp"));
background-position:center;
}
.bg-fixed__video{object-position:30% 38%}
}
/* ---------- インライン動画（施術・店内紹介など） ---------- */
.video{position:relative;overflow:hidden;background:var(--c-tint-1)}
.video video{width:100%;height:100%;object-fit:cover;display:block}
/* ファサード方式：クリックするまで読み込まない（LCP/INP対策） */
.video-facade{position:relative;display:block;width:100%;cursor:pointer;border:0;padding:0;background:none}
.video-facade img{width:100%;height:auto;display:block}
.video-facade::after{
content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
border:1px solid rgba(255,255,255,.9);border-radius:50%;
background:rgba(60,52,44,.35) no-repeat center/14px 16px
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill='%23fff' d='M0 0l14 8-14 8z'/%3E%3C/svg%3E");
transition:background-color var(--ease);
}
.video-facade:hover::after{background-color:rgba(60,52,44,.55)}
.video-facade__label{
position:absolute;left:0;bottom:0;padding:10px 16px;
background:rgba(251,249,246,.92);font-size:1.2rem;letter-spacing:.06em;
}
/* ---------- Header ---------- */
.hd{
position:sticky;top:0;z-index:100;height:var(--header-h);
display:flex;align-items:center;justify-content:space-between;
padding:0 0 0 24px;background:rgba(251,249,246,.94);
border-bottom:1px solid var(--c-line);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hd__logo{font-family:var(--f-en);font-size:2.4rem;letter-spacing:.16em;line-height:1;white-space:nowrap}
/* 画像ロゴ（支給ロゴから生成した透過PNG）。テキストロゴ時代のサイズ感に合わせる */
.hd__logo img{height:22px;width:auto;display:block}
.hd__logo small{display:block;font-family:var(--f-sans);font-size:.9rem;letter-spacing:.24em;color:var(--c-muted);margin-top:3px}
.hd__nav ul{display:flex;gap:24px;font-family:var(--f-en);font-size:1.3rem;letter-spacing:.12em}
.hd__nav a{display:inline-block;padding:6px 0;border-bottom:1px solid transparent;transition:border-color var(--ease)}
.hd__nav a:hover,.hd__nav a[aria-current="page"]{border-color:var(--c-action-tint)}
/* 予約導線は LINE と電話の2本。ヘッダーでは電話番号をテキストで常時表示する */
.hd__actions{display:flex;align-items:center;gap:22px;height:var(--header-h)}
.hd__tel{
display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
line-height:1.2;font-family:var(--f-en);font-size:1.8rem;letter-spacing:.06em;white-space:nowrap;
}
.hd__tel span{font-family:var(--f-sans);font-size:1rem;letter-spacing:.16em;color:var(--c-muted);margin-bottom:3px}
.hd__tel:hover{color:var(--c-action)}
.hd__cta{display:flex;height:var(--header-h)}
.hd__cta a{display:flex;align-items:center;justify-content:center;padding:0 20px;color:#fff;font-size:1.35rem;letter-spacing:.08em;transition:opacity var(--ease)}
.hd__cta .is-trust{background:var(--c-trust)}
.hd__cta .is-action{background:var(--c-action)}
.hd__cta a:hover{opacity:.86}
.hd__burger{display:none;width:56px;height:var(--header-h);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.hd__burger span{display:block;width:22px;height:1px;background:var(--c-text);transition:transform .3s,opacity .3s}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* ---------- Section shell ----------
2026-08-12 CIECA. に寄せて構造を変更。
以前は「半透明パネルを左右96.87%・下40pxの隙間つきで固定背景の上に流す」
構造だったが、背景が人物のブランドフィルムになったことで、隙間から映像が
覗き、パネルも透けて全体が重く落ち着かない画になっていた。
CIECA. 本体は **白いページに全幅の色帯が入る** 構造なので、そちらに合わせる。
固定背景（映像）は、下の帯で覆われないトップのKVの後ろだけで見える。 */
.sec{width:100%;margin:0;padding:var(--sp-sec-y) 0 var(--sp-sec-y-b)}
.sec--light{background:var(--c-ground)}
.sec--tint {background:var(--c-tint-1)}
.sec--trust{background:var(--c-trust);color:#fff}
.sec--taupe{background:var(--c-taupe);color:#fff}
.sec--gray {background:var(--c-gray);color:#fff}
.sec--flush{padding:0}
/* 額縁のヘアラインは、暗い映像の上に薄いパネルが乗っていたときの
輪郭づけだった。白いページでは輪郭が不要になるので外す。 */
.sec__frame{border:0;padding:0;height:100%}
.inner{width:86%;max-width:var(--w-inner);margin:0 auto}
.measure{max-width:var(--w-measure)}
.measure--c{max-width:var(--w-measure);margin-inline:auto}
/* ---------- Typography ---------- */
.sec-title{font-family:var(--f-en);font-size:var(--fs-sec);font-weight:400;letter-spacing:var(--ls-sec);line-height:1.4;margin-bottom:36px}
.sec-title small{display:block;font-family:var(--f-sans);font-size:1.2rem;letter-spacing:.2em;color:var(--c-muted);margin-top:10px}
.sec--trust .sec-title small,.sec--taupe .sec-title small,.sec--gray .sec-title small{color:rgba(255,255,255,.72)}
.page-title{font-family:var(--f-mincho);font-size:3rem;letter-spacing:.06em;font-weight:500;line-height:1.6;margin-bottom:36px}
.page-title small{display:block;font-family:var(--f-sans);font-size:1.2rem;letter-spacing:.16em;color:var(--c-muted);margin-top:14px;font-weight:400}
.lead{font-family:var(--f-mincho);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:400}
.lead--sm{font-size:2.1rem}
.body{font-size:var(--fs-body);line-height:var(--lh-body)}
.body + .body{margin-top:1.7em}
.note{font-size:1.3rem;line-height:1.8;color:var(--c-muted)}
.sec--trust .note,.sec--taupe .note,.sec--gray .note{color:rgba(255,255,255,.8)}
.en-label{font-family:var(--f-en);font-size:1.3rem;letter-spacing:.16em;color:var(--c-muted)}
.link-u{border-bottom:1px solid var(--c-line);transition:border-color var(--ease)}
.link-u:hover{border-color:var(--c-action)}
/* CIECA. の見出しは罫線を持たず、余白だけで区切る */
.h2{font-family:var(--f-mincho);font-size:2.6rem;line-height:1.75;letter-spacing:.06em;font-weight:500;margin-bottom:32px}
.h3{font-size:1.85rem;letter-spacing:.05em;margin-bottom:16px;font-weight:500}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;
width:var(--btn-w);height:var(--btn-h);border-radius:0;
font-size:1.45rem;letter-spacing:.08em;transition:opacity var(--ease);
border:1px solid transparent;text-align:center;
}
.btn--white{background:#fff;color:var(--c-trust)}
.btn--trust{background:var(--c-trust);color:#fff}
.btn--action{background:var(--c-action);color:#fff}
.btn--ghost{background:transparent;color:var(--c-text);border-color:var(--c-line)}
.sec--trust .btn--ghost,.sec--taupe .btn--ghost,.sec--gray .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.btn--line{background:var(--c-line-green);color:#fff}
.btn:hover{opacity:.86}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.btn-row--c{justify-content:center}
/* ---------- Breadcrumb ---------- */
.bc{font-size:1.2rem;letter-spacing:.04em;color:var(--c-muted);padding:18px 0}
.bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bc li:not(:last-child)::after{content:"›";margin-left:8px;opacity:.6}
/* ---------- Main visual ---------- */
.mv{
width:100%;margin:0;
min-height:calc(100svh - var(--header-h));
position:relative;display:flex;flex-direction:column;
align-items:center;justify-content:center;padding:80px 0 120px;
}
.mv__inner{text-align:center;color:#fff;text-shadow:0 2px 24px rgba(60,50,40,.5)}
.mv__logo{font-family:var(--f-en);font-size:6.4rem;letter-spacing:.2em;line-height:1;font-weight:300}
.mv__logo img{height:76px;width:auto;display:block;margin-inline:auto;filter:drop-shadow(0 2px 18px rgba(60,50,40,.45))}
.mv__copy{font-family:var(--f-mincho);font-size:3.2rem;letter-spacing:.14em;line-height:1.9;margin-top:38px;font-weight:400}
.mv__sub{font-size:1.35rem;letter-spacing:.16em;margin-top:26px;line-height:2}
.mv__news{position:absolute;left:0;bottom:34px;background:rgba(251,249,246,.93);padding:14px 26px;display:flex;gap:20px;align-items:center;font-size:1.3rem;max-width:min(420px,92%)}
.mv__news time{font-family:var(--f-en);color:var(--c-muted);letter-spacing:.08em;white-space:nowrap}
.mv__scroll{position:absolute;right:8px;bottom:40px;color:#fff;font-family:var(--f-en);font-size:1.1rem;letter-spacing:.16em;writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.mv__scroll::after{content:"";width:1px;height:56px;background:rgba(255,255,255,.7);animation:scrollLine 2.4s ease-in-out infinite}
@keyframes scrollLine{
0%{transform:scaleY(.15);transform-origin:top}
50%{transform:scaleY(1);transform-origin:top}
51%{transform:scaleY(1);transform-origin:bottom}
100%{transform:scaleY(.15);transform-origin:bottom}
}
/* ---------- 下層ページの見出し帯 ----------
CIECA. の下層ページは、ヘッダーの直下に「左＝写真／右＝色パネル」の帯を置き、
そこにページ名と一文を載せる。本文はその下の白い面に流す。
写真が用意できないページ（料金・FAQ・プライバシー）はパネルだけの帯になる。 */
.phead{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--c-trust)}
.phead--solo{grid-template-columns:1fr}
.phead__media{position:relative;overflow:hidden;min-height:320px;background:var(--c-tint-1)}
.phead__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phead__panel{
display:flex;flex-direction:column;justify-content:center;
color:#fff;padding:72px 8% 72px 6%;
}
.phead--solo .phead__panel{align-items:center;text-align:center;padding:64px 8%}
.phead__en{font-family:var(--f-en);font-size:1.3rem;letter-spacing:.22em;opacity:.85}
.phead__en::after{content:"";display:block;width:56px;height:1px;background:rgba(255,255,255,.6);margin-top:14px}
.phead--solo .phead__en::after{margin-inline:auto}
.phead__t{
font-family:var(--f-mincho);font-size:3.4rem;font-weight:500;
letter-spacing:.08em;line-height:1.6;margin-top:22px;
}
.phead__s{font-size:1.45rem;line-height:1.95;margin-top:18px;color:rgba(255,255,255,.92);max-width:34em}
.phead__meta{font-size:1.2rem;letter-spacing:.06em;color:rgba(255,255,255,.75);margin-top:22px}
/* ---------- Grid & cards ---------- */
/* グリッド項目の既定の min-width は auto で、中の ![]()
の指定幅
（width属性やintrinsicサイズ）まで縮まなくなる。画像が未配置で
壊れている間はその指定幅がそのまま最小幅になり、列がビューポートを
突き破る。min-width:0 はそれを防ぐ定石。 */
.grid > *,.ba > *{min-width:0}
.grid{display:grid;gap:3.5%}
.grid--2{grid-template-columns:1fr 1fr;gap:56px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr);gap:2.6%}
.card__name{font-size:2rem;margin-top:18px;line-height:1.4}
.card__part{font-size:1.2rem;letter-spacing:.1em;color:var(--c-muted);margin-top:6px}
.card__txt{font-size:1.35rem;line-height:1.85;margin-top:12px}
.tag{display:inline-block;font-size:1.1rem;letter-spacing:.06em;border:1px solid var(--c-line);padding:3px 10px;margin:8px 6px 0 0;color:var(--c-muted)}
.sec--trust .tag,.sec--taupe .tag{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.85)}
.ratio{position:relative;overflow:hidden;background:var(--c-tint-1)}
/* AVIF/WebP を出すために ![]()
を で包んでいるので、
picture も枠いっぱいに広げないと画像が枠を埋めない。 */
.ratio > img,.ratio > picture{display:block;width:100%;height:100%}
.ratio > img,.ratio > picture > img{width:100%;height:100%;object-fit:cover}
.r-1x1{aspect-ratio:1/1}
.r-3x4{aspect-ratio:3/4}
.r-4x5{aspect-ratio:4/5}
.r-4x3{aspect-ratio:4/3}
.r-16x9{aspect-ratio:16/9}
.r-16x7{aspect-ratio:16/7}
/* 画像未配置時のプレースホルダ（本番で画像が入れば見えない） */
.ratio:empty::after,.ph{
content:attr(data-ph);position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;text-align:center;padding:16px;
background:repeating-linear-gradient(45deg,var(--c-tint-1),var(--c-tint-1) 10px,var(--c-tint-2) 10px,var(--c-tint-2) 20px);
border:1px solid var(--c-line);font-size:1.15rem;letter-spacing:.06em;color:#6f675d;line-height:1.7;
}
/* ---------- Stats ---------- */
/* 評価の数値は「選ばれている根拠」なので、細い装飾数字ではなく
読み取れる強さで出す。色は技術・信頼の trust を当てる。 */
.stat{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-end}
.stat__n{font-family:var(--f-en);font-size:5.6rem;line-height:1;font-weight:400;color:var(--c-trust)}
.stat__n span{font-size:1.5rem;letter-spacing:.06em;margin-left:6px;font-family:var(--f-sans);color:var(--c-muted)}
.stat__l{font-size:1.3rem;letter-spacing:.1em;color:var(--c-text);margin-top:10px}
.stat > div{border-left:2px solid var(--c-trust);padding-left:18px}
.sec--trust .stat__n,.sec--taupe .stat__n,.sec--gray .stat__n{color:#fff}
.sec--trust .stat__l,.sec--taupe .stat__l,.sec--gray .stat__l{color:rgba(255,255,255,.9)}
.sec--trust .stat > div,.sec--taupe .stat > div,.sec--gray .stat > div{border-left-color:rgba(255,255,255,.6)}
.bars{margin-top:40px;max-width:520px}
.bars__row{display:grid;grid-template-columns:70px 1fr 56px;gap:14px;align-items:center;font-size:1.35rem;margin-bottom:11px}
.bars__track{display:block;height:10px;background:#DCD5CB}
/* span のままだとインラインで width / height が効かず、
塗りが一切描画されない（トラックだけが見えている状態だった）。 */
.bars__fill{display:block;height:100%;background:var(--c-trust)}
.bars__v{text-align:right;color:var(--c-text);font-family:var(--f-en);font-size:1.45rem}
/* ---------- Table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:1.5rem}
/* グループ見出し。 は1つのテーブルに1つしか置けず、2つ目以降は
すべてテーブル冒頭にまとめて描画されてしまう（各グループの前に出ない）。
そのため見出しは行（tr.tbl__g）として持つ。 */
.tbl__g th{
text-align:left;font-family:var(--f-en);font-size:1.7rem;letter-spacing:.14em;
padding:34px 0 10px;border-bottom:1px solid var(--c-trust);line-height:1.9;
font-weight:500;color:var(--c-trust-d);
}
.tbl tbody:first-child .tbl__g th{padding-top:0}
.sec--trust .tbl__g th,.sec--taupe .tbl__g th,.sec--gray .tbl__g th{border-color:rgba(255,255,255,.4)}
.tbl caption{text-align:left;font-family:var(--f-en);font-size:1.5rem;letter-spacing:.14em;padding:30px 0 12px;border-bottom:1px solid var(--c-line);line-height:2}
.tbl th{font-weight:400;text-align:left;padding:13px 0;border-bottom:1px solid rgba(220,213,203,.55);vertical-align:top;line-height:1.7}
.tbl td{padding:13px 0;border-bottom:1px solid rgba(220,213,203,.55);text-align:right;white-space:nowrap;font-family:var(--f-en);font-size:1.55rem;letter-spacing:.04em;vertical-align:top}
.tbl tr.is-hero th,.tbl tr.is-hero td{background:rgba(94,117,115,.09);font-weight:500}
.sec--taupe .tbl th,.sec--taupe .tbl td,.sec--trust .tbl th,.sec--trust .tbl td{border-bottom-color:rgba(255,255,255,.28)}
.sec--taupe .tbl th .sub,.sec--trust .tbl th .sub{color:rgba(255,255,255,.78)}
.sec--taupe .tbl tr.is-hero th,.sec--taupe .tbl tr.is-hero td{background:rgba(255,255,255,.10)}
.sec--taupe .tbl__g th,.sec--trust .tbl__g th{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.tbl th .sub{display:block;font-size:1.25rem;color:var(--c-muted);margin-top:5px;line-height:1.7;font-family:var(--f-sans)}
/* ---------- Definition list ---------- */
.dl{display:grid;grid-template-columns:130px 1fr;gap:14px 0;font-size:1.45rem}
.dl dt{font-family:var(--f-en);font-size:1.25rem;letter-spacing:.12em;opacity:.8;padding-top:5px}
.dl dd{line-height:1.85}
/* ---------- TL;DR ---------- */
.tldr{border:1px solid var(--c-trust);background:rgba(100,117,107,.06);padding:26px 30px;margin:0 0 40px}
.tldr__t{font-family:var(--f-en);font-size:1.2rem;letter-spacing:.14em;color:var(--c-trust);margin-bottom:12px}
.tldr p{font-size:1.55rem;line-height:1.95}
.tldr dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:18px;font-size:1.4rem}
.tldr dt{color:var(--c-muted);white-space:nowrap}
.tldr dd{font-weight:500}
/* ---------- Article ---------- */
.art{max-width:var(--w-measure);margin:0 auto}
.art__meta{display:flex;gap:20px;flex-wrap:wrap;font-size:1.25rem;color:var(--c-muted);margin-bottom:18px}
.art h1{font-family:var(--f-mincho);font-size:3.2rem;line-height:1.6;letter-spacing:.05em;font-weight:500;margin-bottom:26px}
.art h2{font-family:var(--f-mincho);font-size:2.4rem;line-height:1.7;font-weight:500;margin:56px 0 24px;padding-bottom:18px;border-bottom:1px solid var(--c-line)}
.art h3{font-size:1.85rem;font-weight:500;margin:40px 0 16px}
.art p{margin-bottom:1.6em}
.art blockquote{border-left:3px solid var(--c-action-tint);padding:6px 0 6px 24px;margin:32px 0;font-family:var(--f-mincho);font-size:1.75rem;line-height:1.95;color:#5a5249}
.art blockquote cite{display:block;font-family:var(--f-sans);font-size:1.25rem;color:var(--c-muted);margin-top:12px;font-style:normal}
/* microCMSリッチエディタ由来の素の（class無し）にも下線リンクの見た目を与える */
.art a:not([class]){border-bottom:1px solid var(--c-line);transition:border-color var(--ease)}
.art a:not([class]):hover{border-color:var(--c-action)}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--c-line)}
.faq dt{font-size:1.55rem;padding:24px 0 10px;font-weight:500;line-height:1.7}
.faq dt::before{content:"Q. ";font-family:var(--f-en);color:var(--c-action-tint)}
.faq dd{font-size:1.45rem;line-height:1.95;padding-bottom:24px;border-bottom:1px solid var(--c-line);color:#5d564d}
.sec--trust .faq,.sec--taupe .faq{border-color:rgba(255,255,255,.4)}
.sec--trust .faq dd,.sec--taupe .faq dd{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.3)}
/* ---------- Before / after ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ba figcaption{font-size:1.3rem;line-height:1.85;margin-top:14px;color:var(--c-muted)}
.ba-item{margin-bottom:48px}
.ba-item:last-child{margin-bottom:0}
.ba-item .h3 .cat{font-size:1.2rem;letter-spacing:.1em;color:var(--c-trust);border:1px solid var(--c-trust);padding:3px 9px;margin-right:12px;vertical-align:2px;display:inline-block}
/* ---------- Cost box ---------- */
.cost{background:rgba(100,117,107,.07);border:1px solid var(--c-trust);padding:36px}
.sec--trust .cost,.sec--taupe .cost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.cost__n{font-family:var(--f-en);font-size:4.4rem;line-height:1;font-weight:300;color:var(--c-trust)}
.sec--trust .cost__n,.sec--taupe .cost__n{color:#fff}
.cost__n .u{font-size:1.5rem;font-family:var(--f-sans);margin-left:8px;letter-spacing:.06em}
/* ---------- 地図（静的画像 → Googleマップを開く） ----------
iframe埋め込みはLCP/INP/CLSを悪化させ、AIクローラーからも中身が
読めないため使わない（docs/03-seo-llmo.md）。 */
.map{position:relative;display:block}
.map__cta{
position:absolute;right:0;bottom:0;
background:var(--c-trust);color:#fff;
font-size:1.25rem;letter-spacing:.06em;padding:10px 16px;
transition:background-color var(--ease);
}
.map:hover .map__cta{background:var(--c-trust-d)}
/* ---------- LINE box ---------- */
.line-box{border:1px solid rgba(255,255,255,.45);padding:26px;display:flex;gap:24px;align-items:center}
.line-box__qr{width:104px;height:104px;flex-shrink:0;background:#fff}
/* ---------- Fixed bottom bar (SP) : LINE / 電話 の2分割 ---------- */
.fixed-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;grid-template-columns:1.4fr 1fr}
.fixed-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:62px;color:#fff;font-size:1.3rem;letter-spacing:.06em}
.fixed-bar .b-line{background:var(--c-line-green)}
.fixed-bar .b-tel{background:var(--c-action)}
.fixed-bar small{font-family:var(--f-en);font-size:.92rem;letter-spacing:.1em;opacity:.85}
/* ---------- Footer ---------- */
.ft{background:var(--c-footer);color:rgba(255,255,255,.9);padding:64px 0 0;width:100%;margin:0}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;font-size:1.35rem;line-height:2.1}
.ft__logo{font-family:var(--f-en);font-size:2.6rem;letter-spacing:.18em}
.ft__logo img{height:30px;width:auto;display:block}
.ft a:hover{text-decoration:underline}
/* フッターは濃色。--c-muted のままでは開示文が読めない */
.ft .note{color:rgba(255,255,255,.78)}
.ft__cr{margin-top:56px;padding:20px 0;border-top:1px solid rgba(255,255,255,.2);font-family:var(--f-en);font-size:1.1rem;letter-spacing:.1em;text-align:center;opacity:.7}
/* ---------- Scroll reveal（JSなしでも必ず表示される実装） ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease-out,transform .8s ease-out}
.js .reveal.is-in{opacity:1;transform:none}
/* ============================================================
Responsive
============================================================ */
@media (max-width:900px){
/* 本文は 16px を維持する。主要ターゲットが30〜50代で、
可読性のほうが情報量より優先されるため（設計原則3）。 */
:root{--sp-sec-y:64px;--sp-sec-y-b:72px;--fs-sec:2.2rem;--fs-lead:2rem;--fs-body:1.6rem}
.inner{width:88%}
.hd{padding:0 0 0 16px}
.hd__logo{font-size:1.9rem;display:flex;flex-direction:column;justify-content:center;height:var(--header-h)}
.hd__logo img{height:19px}
.hd__logo small{font-size:.8rem}
/* SPのヘッダーはロゴとメニューボタンだけにする。
予約導線は画面下の固定バー（LINE / 電話）が常時出ているので、
ヘッダーにも置くと同じ導線が二重になり、上部が窮屈になる。 */
.hd__actions{display:none}
.hd__burger{display:flex}
.hd__nav{
position:fixed;inset:var(--header-h) 0 0;background:rgba(251,249,246,.98);
padding:32px 8%;overflow-y:auto;transform:translateY(-8px);
opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
}
.hd__nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.hd__nav ul{flex-direction:column;gap:0;font-size:1.6rem}
.hd__nav li{border-bottom:1px solid var(--c-line)}
.hd__nav a{display:block;padding:18px 0}
/* 見出し帯は、狭い画面では写真を上・パネルを下に積む */
.phead{grid-template-columns:1fr}
.phead__media{min-height:0;aspect-ratio:16/10}
.phead__panel{padding:44px 6% 48px}
.phead__t{font-size:2.6rem;margin-top:18px}
.phead__s{font-size:1.4rem}
/* KVは1画面分の高さを保つ（背景映像を見せるため）。
下端は固定バー62px分だけ引く。 */
.mv{min-height:calc(100svh - var(--header-h) - 62px);padding:64px 0 88px}
.mv__logo{font-size:4.2rem}
.mv__logo img{height:48px}
.mv__copy{font-size:2.1rem;margin-top:26px;line-height:2}
.mv__sub{font-size:1.25rem;margin-top:22px}
.mv__news{position:static;width:88%;margin:48px auto 0;max-width:none;flex-direction:column;align-items:flex-start;gap:6px}
.mv__scroll{display:none}
.grid--3,.grid--4{grid-template-columns:1fr 1fr;gap:20px}
.grid--2{grid-template-columns:1fr;gap:36px}
.ft__grid{grid-template-columns:1fr;gap:26px}
.stat{gap:30px}
.stat__n{font-size:3.6rem}
.fixed-bar{display:grid}
body{padding-bottom:62px}
.dl{grid-template-columns:92px 1fr}
.h2{font-size:2.1rem}
.art h1{font-size:2.4rem}
.art h2{font-size:2rem}
.cost{padding:26px}
.ba{gap:8px}
.bars__row{grid-template-columns:60px 1fr 48px;gap:10px;font-size:1.2rem}
}
@media (max-width:520px){
.grid--4{grid-template-columns:1fr 1fr}
.tbl{font-size:1.4rem}
.tbl td{font-size:1.45rem}
.tbl__g th{font-size:1.35rem;padding-top:24px}
/* TL;DR の定義リストは 2カラムだと値側が 120px ほどしか残らず、
「¥20,900〜（ブリーチ毛は +¥6,600）」が3〜4行に折れる。縦積みにする。 */
.tldr{padding:22px 20px}
.tldr dl{grid-template-columns:1fr;gap:0}
.tldr dt{margin-top:14px}
.tldr dt:first-of-type{margin-top:0}
.tldr dd{margin-top:2px}
/* 本文中の定義リストも同様に縦積み */
.dl{grid-template-columns:1fr;gap:0}
.dl dt{margin-top:16px}
.dl dt:first-of-type{margin-top:0}
/* ボタンは片手で押せる幅に。240px固定だと余白が目立ち、
2つ並ぶと必ず折り返して左寄せになる。 */
.btn{width:100%;max-width:340px;height:58px}
.btn-row{flex-direction:column;align-items:center;gap:12px}
/* LINE案内はQRとテキストを縦に */
.line-box{flex-direction:column;align-items:flex-start;gap:18px;padding:22px}
/* ビフォーアフターは横2枚だと1枚 150px 程度になる。縦積みにして大きく見せる */
.ba{grid-template-columns:1fr;gap:16px}
.page-title{font-size:2.5rem}
.cost__n{font-size:3.6rem}
.art h1{font-size:2.2rem}
}
/* ---------- Print ---------- */
@media print{
.bg-fixed,.fixed-bar,.hd__cta,.mv__scroll{display:none}
body{background:#fff;color:#000}
.sec{background:none!important;color:#000!important}
}