/* =========================================================
   GLORY+  Glory+plus / tabasa G&Co — v3.1 (2026-10-20)
   方針：ブランドが主役の全面ビジュアル／大きな欧文見出し＋小さな和文／
         見出しに句読点を置かず改行と余白で間をつくる／色の面で章を区切る
   レイアウトの規律
   - 幅は 4 トークンのみ（--w-wide / --w / --w-reserve / --w-narrow）
   - 左右余白は --pad で統一。主要コンテンツは Grid / Flex
   - position:absolute は装飾とオーバーレイのみ
   - overflow-x:hidden で隠さない
   ========================================================= */

:root{
  --ivory:#f6f3ee;        /* 紙の色（写真の木目・床と合わせた暖色） */
  --ivory-2:#ece7df;
  --white:#ffffff;
  --ink:#32373a;          /* コーポレート：主ボタン・フッター・暗い章 */
  --ink-2:#262a2c;
  --text:#3d3d3d;
  --text-2:#5c5c5c;
  --text-small:#646464;   /* 白・アイボリーとも 4.5:1 以上 */
  --muted:#8a8a8a;        /* 装飾専用 */
  --line:#e2ddd5;
  --line-strong:#c9c3b9;

  /* 店舗ブランド（実店舗写真から実測：引継05）と、その色相の淡い面 */
  --g:#629aa7; --g-ink:#406d77; --g-soft:#f2f7f8; --g-tint:#e6eef0;
  --t:#a27467; --t-ink:#775046; --t-soft:#f7f1f0; --t-tint:#f1e6e2;
  --k:#8f6472;

  --accent:var(--ink); --accent-ink:var(--ink); --accent-tint:var(--ivory-2);

  --w-wide:1200px; --w:1040px; --w-reserve:960px; --w-narrow:720px;
  --pad:20px;
  --header-h:60px;
  --bar-h:72px;

  --f-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-min:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-disp:"Cormorant Garamond","Shippori Mincho",serif;
  --f-label:"Jost","Noto Sans JP",sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:768px){ :root{ --pad:32px; --header-h:72px; } }
@media (min-width:1120px){ :root{ --pad:40px; } }

.is-g{ --accent:var(--g); --accent-ink:var(--g-ink); --accent-tint:var(--g-tint); }
.is-t{ --accent:var(--t); --accent-ink:var(--t-ink); --accent-tint:var(--t-tint); }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px); }
body{
  margin:0; background:var(--ivory); color:var(--text);
  font-family:var(--f-sans); font-size:16px; line-height:1.95; letter-spacing:.05em;
  padding-top:var(--header-h); padding-bottom:var(--bar-h);
  -webkit-font-smoothing:antialiased;
}
@media (min-width:901px){ body{ padding-bottom:0; } }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.dark :focus-visible,.hero :focus-visible,.kimono :focus-visible{ outline-color:#fff; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:8px; top:-60px; background:var(--ink); color:#fff; padding:10px 16px; z-index:200; }
.skip:focus{ top:8px; }

/* 和文の組み：約物を詰め、文節で折り返す */
.poem,.ttl__ja,.shop__catch,.step__t,.trouble li,.sheet__title{ font-feature-settings:"palt"; }
.phr{ word-break:keep-all; text-wrap:balance; }

/* ---------- 器 ---------- */
.wrap{ width:100%; max-width:calc(var(--w) + var(--pad) * 2); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:calc(var(--w-wide) + var(--pad) * 2); }
.wrap--reserve{ max-width:calc(var(--w-reserve) + var(--pad) * 2); }
.wrap--narrow{ max-width:calc(var(--w-narrow) + var(--pad) * 2); }

.sec{ padding-block:88px; }
.sec--white{ background:var(--white); }
.sec--ivory2{ background:var(--ivory-2); }
.dark{ background:var(--ink); color:#e7e9e9; }
@media (min-width:768px){ .sec{ padding-block:128px; } }

/* ---------- 章タイトル：大きな欧文＋小さな和文（中央） ---------- */
.ttl{ display:grid; justify-items:center; text-align:center; gap:14px; margin-bottom:48px; }
.ttl__en{ font-family:var(--f-disp); font-weight:300; font-size:clamp(44px,12.5vw,88px); line-height:.95; letter-spacing:.01em; color:var(--ink); }
.ttl__ja{ font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.24em; color:var(--text-2); line-height:1.8; }
.ttl__ja--big{ font-size:clamp(22px,6vw,30px); letter-spacing:.14em; color:var(--ink); line-height:1.7; }
.dark .ttl__en{ color:#fff; }
.dark .ttl__ja{ color:#cfd3d4; }
.dark .ttl__ja--big{ color:#fff; }
@media (min-width:768px){ .ttl{ margin-bottom:64px; } }

/* 毛先だけ丸い線（ブランドの印） */
.curl{ display:block; width:76px; height:16px; color:var(--accent); }
.curl path{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; }
.dark .curl{ color:#b9c0c2; }

/* 詩のように組む文 */
.poem{ font-family:var(--f-min); font-weight:500; font-size:16px; line-height:2.45; letter-spacing:.14em; color:var(--ink); text-align:center; }
.poem span{ display:block; }
.poem--lg{ font-size:clamp(19px,5.2vw,26px); line-height:2.2; letter-spacing:.16em; }
.dark .poem{ color:#fff; }
.body-c{ max-width:34em; margin-inline:auto; text-align:center; word-break:keep-all; text-wrap:pretty; color:var(--text); }
.dark .body-c{ color:#d9dcdc; }
.label{ font-family:var(--f-label); font-weight:400; font-size:16px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); line-height:1.4; }
.note{ font-size:16px; line-height:1.85; color:var(--text-small); }
.dark .note{ color:#c3c8c9; }
.gap-l{ display:grid; gap:40px; justify-items:center; }

/* ---------- ボタン：チャコールの横長＋小さい矢印（オーナー指定） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:56px; padding:14px 28px; width:100%; max-width:340px;
  font-size:16px; letter-spacing:.16em; line-height:1.5; text-align:center; text-decoration:none;
  border:1px solid var(--ink); border-radius:2px; background:transparent; color:var(--ink);
  white-space:normal; overflow-wrap:anywhere; min-width:0; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{ background:var(--ink); color:#fff; font-weight:500; }
.btn-primary::after{ content:"→"; font-size:12px; opacity:.75; transition:transform .3s var(--ease); }
.btn-primary:hover{ background:var(--ink-2); }
.btn-primary:hover::after{ transform:translateX(4px); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-sm{ min-height:48px; padding:10px 12px; font-size:16px; letter-spacing:.1em; gap:8px; }
.btn .ico{ width:16px; height:16px; flex:none; }
.dark .btn{ border-color:#fff; color:#fff; }
.dark .btn-primary{ background:#fff; color:var(--ink); }
.dark .btn-primary:hover{ background:#e9e6e0; }
.dark .btn-ghost:hover{ background:#fff; color:var(--ink); }
.btns{ display:grid; gap:12px; justify-items:center; }
.btns--pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.btns--pair .btn{ max-width:none; }
.more{ display:inline-flex; align-items:center; gap:12px; min-height:44px; font-family:var(--f-label); font-size:16px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.more::after{ content:""; width:36px; height:1px; background:currentColor; transition:width .3s var(--ease); }
.more:hover::after{ width:52px; }
.more-ja{ font-family:var(--f-sans); text-transform:none; letter-spacing:.14em; font-size:16px; }
.dark .more{ color:#fff; }
.ctr{ display:flex; justify-content:center; margin-top:44px; }

/* ---------- タグ ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.tag{ display:inline-block; font-size:16px; line-height:1.6; padding:2px 10px; border:1px solid var(--accent); color:var(--accent-ink); letter-spacing:.06em; }
.tag--en{ font-family:var(--f-label); letter-spacing:.12em; font-size:16px; }

/* ---------- ヘッダー ---------- */
.header{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h); background:rgba(246,243,238,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.header__in{ height:100%; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:4px; }
.icon-btn{ width:44px; height:44px; display:grid; place-items:center; border:0; background:none; cursor:pointer; color:var(--ink); padding:0; }
.icon-btn .ico{ width:20px; height:20px; }
.burger{ display:grid; gap:7px; width:24px; }
.burger i{ display:block; height:1px; background:var(--ink); }
.burger i:last-child{ width:60%; }
.brands{ display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; }
.brands a{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--f-disp); font-weight:500; font-size:19px; letter-spacing:.03em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brands i{ width:1px; height:16px; background:var(--line-strong); }
.gnav,.header__cta{ display:none; }
@media (min-width:901px){
  .header__in{ grid-template-columns:auto 1fr auto; gap:24px; }
  .header__in > .icon-btn{ display:none; }
  .brands{ justify-content:flex-start; }
  .brands a{ font-size:22px; }
  .gnav{ display:flex; justify-content:center; gap:4px; }
  .gnav a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding-inline:12px; font-size:16px; letter-spacing:.14em; text-decoration:none; color:var(--text); position:relative; }
  .gnav a::after{ content:""; position:absolute; left:12px; right:12px; bottom:8px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
  .gnav a:hover::after,.gnav a[aria-current="page"]::after{ transform:scaleX(1); }
  .gnav .ico{ width:14px; height:14px; }
  .header__cta{ display:inline-flex; width:auto; min-height:44px; padding:8px 24px; }
}

/* ---------- ドロワー ---------- */
.drawer{ position:fixed; inset:0; z-index:90; background:var(--ivory); overflow-y:auto; visibility:hidden; opacity:0; transition:opacity .35s var(--ease), visibility 0s linear .35s; }
.drawer.is-open{ visibility:visible; opacity:1; transition:opacity .35s var(--ease); }
.drawer__top{ height:var(--header-h); display:grid; grid-template-columns:44px 1fr 44px; align-items:center; border-bottom:1px solid var(--line); }
.drawer__logo{ text-align:center; font-family:var(--f-disp); font-size:22px; letter-spacing:.3em; color:var(--ink); }
.x{ position:relative; }
.x::before,.x::after{ content:""; position:absolute; left:11px; right:11px; top:50%; height:1px; background:var(--ink); transform:rotate(45deg); }
.x::after{ transform:rotate(-45deg); }
.drawer nav{ display:grid; padding-block:28px 12px; }
.drawer nav a{ display:grid; justify-items:center; gap:2px; padding-block:10px; min-height:56px; text-decoration:none; color:var(--ink); }
.drawer nav a b{ font-family:var(--f-disp); font-weight:400; font-size:30px; line-height:1.1; letter-spacing:.02em; }
.drawer nav a small{ font-size:16px; color:var(--text-small); letter-spacing:.16em; }
.drawer__shops{ display:grid; gap:12px; padding-block:24px 48px; }

/* ---------- 店舗ミニカード（シート・ドロワー・予約） ---------- */
.mini{ background:var(--white); border-top:3px solid var(--accent); padding:22px 16px 16px; display:grid; gap:12px; text-align:center; min-width:0; }
.mini__name{ font-family:var(--f-disp); font-weight:500; font-size:28px; line-height:1.1; letter-spacing:.02em; color:var(--ink); }
.mini__meta{ font-size:16px; line-height:1.8; color:var(--text-small); }
.mini__meta b{ display:block; color:var(--accent-ink); font-weight:500; letter-spacing:.1em; }
.dark .mini{ background:transparent; border:1px solid rgba(255,255,255,.3); border-top:3px solid var(--accent); }
.dark .mini__name{ color:#fff; }
.dark .mini__meta{ color:#d3d7d8; }
.dark .mini__meta b{ color:#fff; }

/* ---------- 予約シート ---------- */
.sheet{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; visibility:hidden; transition:visibility 0s linear .35s; }
.sheet.is-open{ visibility:visible; transition:none; }
.sheet__bg{ position:absolute; inset:0; background:rgba(28,31,33,.5); opacity:0; transition:opacity .35s var(--ease); border:0; padding:0; cursor:pointer; }
.sheet.is-open .sheet__bg{ opacity:1; }
.sheet__panel{ position:relative; width:100%; max-width:calc(var(--w-narrow) * .78); max-height:92vh; overflow-y:auto; background:var(--ivory); padding:28px var(--pad) 24px; transform:translateY(100%); transition:transform .4s var(--ease); text-align:center; }
.sheet.is-open .sheet__panel{ transform:none; }
.sheet__title{ font-family:var(--f-min); font-weight:500; font-size:20px; color:var(--ink); letter-spacing:.12em; }
.sheet__panel > .note{ margin:8px 0 20px; }
.sheet__list{ display:grid; gap:12px; }
.sheet__close{ margin-top:16px; max-width:none; }
@media (min-width:640px){ .sheet{ align-items:center; } }

/* ---------- 画面下固定バー（スマホ） ---------- */
.bar{ position:fixed; inset:auto 0 0 0; z-index:60; height:var(--bar-h); display:grid; grid-template-columns:1fr var(--bar-h); background:var(--ink); padding-bottom:env(safe-area-inset-bottom,0px); }
.bar .btn{ min-height:var(--bar-h); max-width:none; border:0; border-radius:0; font-size:16px; letter-spacing:.24em; }
.bar .btn-primary{ background:var(--ink); color:#fff; }
.bar .tel{ background:var(--white); color:var(--ink); padding:0; border-top:1px solid var(--line-strong); }
.bar .tel .ico{ width:22px; height:22px; }
@media (min-width:901px){ .bar{ display:none; } }

/* ---------- ヒーロー（全面写真＋縦書き） ---------- */
.hero{
  position:relative; isolation:isolate; color:#fff;
  min-height:max(560px, calc(100svh - var(--header-h) - var(--bar-h)));
  display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto;
  padding:28px var(--pad) 26px;
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:#5b5550; }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1.6s var(--ease); }
.hero__media img.is-on{ opacity:1; animation:kb 9s linear forwards; }
@keyframes kb{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(24,26,28,.34) 0%, rgba(24,26,28,.08) 32%, rgba(24,26,28,.14) 55%, rgba(24,26,28,.7) 100%); }
.hero__h1{ grid-column:2; grid-row:1; justify-self:end; align-self:start; writing-mode:vertical-rl; font-family:var(--f-min); font-weight:500; font-size:clamp(24px,6.6vw,40px); line-height:1.75; letter-spacing:.22em; text-shadow:0 1px 18px rgba(0,0,0,.3); font-feature-settings:"vpal"; }
.hero__h1 .ln{ display:block; }
.hero__h1 .ln + .ln{ padding-top:2.4em; }
.hero__foot{ grid-column:1 / -1; grid-row:2; display:grid; gap:14px; }
.hero__mark{ font-family:var(--f-disp); font-weight:300; font-size:clamp(64px,21vw,168px); line-height:.8; letter-spacing:.05em; }
.hero__mark sup{ font-size:.42em; vertical-align:.95em; margin-left:.02em; }
.hero__sub{ display:grid; gap:0; font-size:16px; letter-spacing:.16em; line-height:1.9; color:#f4f4f4; }
.hero__sub b{ font-family:var(--f-disp); font-weight:500; font-size:17px; letter-spacing:.06em; }
.hero__meta{ display:grid; gap:0; font-size:16px; line-height:1.9; letter-spacing:.14em; color:#ececec; }
.hero__count{ font-family:var(--f-label); font-size:16px; letter-spacing:.24em; color:#ececec; }
.hero .btns{ display:none; }
@media (min-width:901px){
  .hero{ min-height:calc(100vh - var(--header-h)); padding:56px max(var(--pad), calc((100vw - var(--w-wide)) / 2)) 56px; }
  .hero__h1{ font-size:clamp(30px,2.8vw,44px); }
  .hero__foot{ grid-template-columns:1fr auto; column-gap:48px; align-items:end; }
  .hero__foot > *{ grid-column:1; }
  .hero .btns{ display:grid; grid-template-columns:repeat(2,minmax(0,230px)); gap:12px; grid-column:2; grid-row:1 / span 4; align-self:end; }
  .hero .btn-primary{ background:#fff; color:var(--ink); border-color:#fff; }
  .hero .btn-ghost{ border-color:#fff; color:#fff; }
  .hero .btn-ghost:hover{ background:#fff; color:var(--ink); }
}

/* ---------- お悩み（暗い章） ---------- */
.trouble{ display:grid; max-width:30em; margin-inline:auto; counter-reset:tr; }
.trouble li{ counter-increment:tr; display:grid; justify-items:center; gap:10px; padding-block:22px; text-align:center; font-family:var(--f-min); font-weight:500; font-size:17px; line-height:1.9; letter-spacing:.12em; color:#fff; border-top:1px solid rgba(255,255,255,.18); }
.trouble li:last-child{ border-bottom:1px solid rgba(255,255,255,.18); }
.trouble li::before{ content:"0" counter(tr); font-family:var(--f-disp); font-style:italic; font-size:17px; letter-spacing:.06em; color:#b3babc; line-height:1; }
.trouble-end{ margin-top:56px; }

/* ---------- 悩みから選ぶ（タイル） ---------- */
.concerns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.concern{ background:var(--white); min-width:0; }
.concern[open]{ grid-column:1 / -1; }
.concern summary{ list-style:none; display:grid; align-content:space-between; gap:18px; min-height:156px; padding:18px 16px 16px; cursor:pointer; position:relative; transition:background-color .3s var(--ease); }
.concern summary::-webkit-details-marker{ display:none; }
.concern summary:hover{ background:#fbfaf7; }
.concern__no{ font-family:var(--f-disp); font-weight:300; font-size:42px; line-height:.9; color:var(--ink); }
.concern__q{ font-family:var(--f-min); font-weight:500; font-size:16px; line-height:1.8; letter-spacing:.04em; color:var(--ink); word-break:keep-all; font-feature-settings:"palt"; }
.concern__plus{ position:absolute; right:16px; top:22px; width:14px; height:14px; }
.concern__plus::before,.concern__plus::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ink); transition:transform .3s var(--ease); }
.concern__plus::after{ transform:rotate(90deg); }
.concern[open] .concern__plus::after{ transform:rotate(0); }
.concern[open] summary{ min-height:0; grid-template-columns:auto 1fr; align-items:center; gap:16px; padding-right:44px; border-bottom:1px solid var(--line); }
.concern__body{ padding:16px; display:grid; gap:12px; }
.pick{ background:var(--accent-tint); padding:22px 14px 14px; display:grid; gap:10px; justify-items:center; text-align:center; min-width:0; }
.pick__shop{ font-family:var(--f-disp); font-weight:500; font-size:26px; line-height:1.1; color:var(--ink); }
.pick__menu{ font-size:16px; line-height:1.75; color:var(--ink); word-break:keep-all; text-wrap:balance; }
.pick__price{ font-family:var(--f-disp); font-weight:500; font-size:24px; line-height:1.2; color:var(--ink); letter-spacing:.04em; }
.pick__staff{ font-size:16px; color:var(--text-small); line-height:1.75; word-break:keep-all; text-wrap:balance; }
.pick .btns--pair{ width:100%; margin-top:4px; }
@media (min-width:768px){
  .concerns{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .concern summary{ min-height:200px; padding:26px 24px 22px; }
  .concern__no{ font-size:54px; }
  .concern__q{ font-size:17px; }
  .concern__body{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); padding:24px; gap:16px; }
}

/* ---------- 自然な縮毛矯正（線の章） ---------- */
.line-art{ display:block; width:min(100%, 760px); height:auto; margin:0 auto 64px; color:var(--g); }
.line-art path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.line-art path + path{ color:var(--t); stroke:var(--t); }
.js .line-art path{ stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 2.6s var(--ease); }
.js .line-art path + path{ transition-delay:.35s; }
.js .line-art.is-in path{ stroke-dashoffset:0; }
.steps{ display:grid; gap:56px; margin-top:64px; }
.step{ display:grid; justify-items:center; gap:14px; text-align:center; }
.step__no{ font-family:var(--f-disp); font-weight:300; font-style:italic; font-size:58px; line-height:.9; color:var(--ink); }
.step__t{ font-family:var(--f-min); font-weight:500; font-size:19px; line-height:1.8; letter-spacing:.14em; color:var(--ink); }
.step p{ max-width:21em; word-break:keep-all; text-wrap:pretty; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; } }

/* ---------- スタイル（全幅の写真グリッド） ---------- */
.styles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.style-card{ min-width:0; background:var(--white); }
.style-card__img{ aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); }
.style-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.style-card:hover img{ transform:scale(1.04); }
.style-card__cap{ padding:12px 10px 16px; text-align:center; display:grid; gap:2px; }
.style-card__name{ font-family:var(--f-min); font-weight:500; font-size:16px; line-height:1.6; letter-spacing:.06em; color:var(--ink); word-break:keep-all; }
.style-card__by{ font-size:16px; line-height:1.6; color:var(--accent-ink); letter-spacing:.06em; }
@media (min-width:768px){ .styles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.after{ margin-top:44px; display:grid; gap:24px; justify-items:center; text-align:center; padding-inline:var(--pad); }

/* ---------- あなたには どちら？ ---------- */
.choose{ display:grid; gap:24px; }
@media (min-width:768px){ .choose{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
.shop{ display:grid; grid-template-rows:auto 1fr; background:var(--accent-tint); min-width:0; }
.shop__img{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.shop__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.shop:hover .shop__img img{ transform:scale(1.03); }
.shop__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,22,24,.6) 100%); }
.shop__name{ position:absolute; z-index:1; left:0; right:0; bottom:24px; display:grid; justify-items:center; gap:6px; color:#fff; text-align:center; }
.shop__name .nm{ font-family:var(--f-disp); font-weight:400; font-size:clamp(42px,11.5vw,60px); line-height:1; letter-spacing:.02em; }
.shop__name .kn{ font-size:16px; letter-spacing:.3em; }
.shop__body{ padding:36px 20px 28px; display:grid; gap:20px; justify-items:center; text-align:center; align-content:start; }
.shop__catch{ font-family:var(--f-min); font-weight:500; font-size:19px; line-height:1.9; letter-spacing:.12em; color:var(--ink); }
.shop__text{ font-size:16px; line-height:2; word-break:keep-all; text-wrap:pretty; max-width:25em; }
.facts{ display:grid; grid-template-columns:auto auto; justify-content:center; gap:4px 18px; font-size:16px; line-height:1.8; padding-top:18px; border-top:1px solid var(--accent); width:100%; max-width:22em; }
.facts dt{ color:var(--text-small); text-align:right; }
.facts dd{ text-align:left; color:var(--ink); }
.shop .btns--pair{ width:100%; margin-top:6px; }
@media (min-width:1120px){ .shop__body{ padding:44px 36px 36px; } }

/* ---------- スタイリスト ---------- */
.team + .team{ margin-top:80px; }
.team__head{ display:grid; justify-items:center; gap:6px; margin-bottom:32px; text-align:center; }
.team__name{ font-family:var(--f-disp); font-weight:400; font-size:38px; line-height:1.1; color:var(--ink); }
.team__meta{ font-size:16px; color:var(--accent-ink); letter-spacing:.14em; }
.team__head::after{ content:""; width:40px; height:2px; background:var(--accent); margin-top:8px; }
.staff-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px 10px; }
.staff{ flex:0 0 calc((100% - 20px) / 3); min-width:0; display:grid; gap:3px; align-content:start; text-align:center; text-decoration:none; color:inherit; }
.staff__img{ aspect-ratio:3/4; overflow:hidden; background:var(--ivory-2); margin-bottom:8px; }
.staff__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.staff:hover .staff__img img{ transform:scale(1.04); }
.staff__name{ font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.24em; color:var(--ink); line-height:1.5; margin-right:-.24em; }
.staff__role{ font-size:16px; line-height:1.6; color:var(--text-small); letter-spacing:.02em; word-break:keep-all; }
.staff__tag{ font-size:16px; line-height:1.6; color:var(--accent-ink); word-break:keep-all; }
@media (min-width:768px){ .staff-list{ gap:40px 20px; } .staff{ flex-basis:calc((100% - 60px) / 4); } }
@media (min-width:1120px){ .staff{ flex-basis:calc((100% - 100px) / 6); } }
.team__cta{ margin-top:36px; display:grid; gap:10px; justify-items:center; }
@media (min-width:640px){ .team__cta{ grid-template-columns:repeat(2,minmax(0,300px)); justify-content:center; } }

/* スタイリストページの詳しいカード */
.staff--full{ flex-basis:calc((100% - 10px) / 2); gap:6px; }
.staff--full .staff__msg{ font-size:16px; line-height:1.85; word-break:keep-all; text-wrap:pretty; }
.staff--full .tag{ font-size:16px; padding:1px 7px; }
.staff--full .more{ justify-self:center; font-family:var(--f-sans); text-transform:none; letter-spacing:.08em; font-size:16px; }
@media (min-width:768px){ .staff--full{ flex-basis:calc((100% - 40px) / 3); } }
@media (min-width:1120px){ .staff--full{ flex-basis:calc((100% - 60px) / 4); } }

/* ---------- メッセージ ---------- */
.message{ display:grid; justify-items:center; gap:32px; text-align:center; }
.message__sign{ font-family:var(--f-min); font-size:16px; letter-spacing:.2em; color:var(--ink); }
.message__sign small{ display:block; font-family:var(--f-label); font-size:16px; letter-spacing:.28em; color:var(--text-small); margin-bottom:4px; }

/* ---------- ヘア以外（行リスト） ---------- */
.rows{ border-top:1px solid var(--line-strong); }
.row{ display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center; padding-block:22px; border-bottom:1px solid var(--line-strong); }
.row__img{ aspect-ratio:1; overflow:hidden; }
.row__img img{ width:100%; height:100%; object-fit:cover; }
.row__t{ display:grid; gap:2px; margin-bottom:6px; }
.row__t b{ font-family:var(--f-disp); font-weight:400; font-size:28px; line-height:1.1; color:var(--ink); }
.row__t span{ font-family:var(--f-min); font-size:16px; letter-spacing:.14em; color:var(--text-2); }
.row p{ font-size:16px; line-height:1.9; }
@media (min-width:768px){ .row{ grid-template-columns:220px 1fr; gap:44px; padding-block:28px; } .row__t b{ font-size:38px; } .row p{ font-size:16px; } }

/* 着付け（色の面） */
.kimono{ background:var(--k); color:#fff; display:grid; }
.kimono__img{ aspect-ratio:4/3; overflow:hidden; }
.kimono__img img{ width:100%; height:100%; object-fit:cover; }
.kimono__body{ padding:56px var(--pad) 64px; display:grid; justify-items:center; gap:20px; text-align:center; }
.kimono .ttl{ margin-bottom:8px; }
.kimono .ttl__en{ color:#fff; font-size:clamp(48px,13vw,80px); }
.kimono .ttl__ja{ color:#f6ecef; }
.kimono .curl{ color:#f0dfe4; }
.kimono p{ color:#fdf6f8; }
.kimono .btn{ border-color:#fff; color:#fff; }
.kimono .btn-primary{ background:#fff; color:var(--ink); }
.kimono .btn-ghost:hover{ background:#fff; color:var(--k); }
.kimono .btns{ width:100%; }
@media (min-width:900px){ .kimono{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .kimono__img{ aspect-ratio:auto; } .kimono__body{ align-content:center; padding:96px 56px; } }

/* ---------- 初めての方へ ---------- */
.first{ display:grid; gap:72px; }
.sub-ttl{ font-family:var(--f-min); font-weight:500; font-size:19px; letter-spacing:.2em; color:var(--ink); text-align:center; margin-bottom:28px; }
.time{ max-width:30em; margin-inline:auto; border-top:1px solid var(--line-strong); }
.time li{ display:grid; justify-items:center; gap:2px; padding-block:20px; border-bottom:1px solid var(--line-strong); text-align:center; }
.time b{ font-family:var(--f-min); font-weight:500; font-size:20px; letter-spacing:.12em; color:var(--ink); line-height:1.5; }
.time span{ font-size:16px; word-break:keep-all; }
.flow{ display:grid; gap:10px; counter-reset:flow; }
.flow li{ counter-increment:flow; background:var(--white); padding:30px 22px 26px; display:grid; justify-items:center; gap:8px; text-align:center; }
.flow li::before{ content:"0" counter(flow); font-family:var(--f-disp); font-style:italic; font-weight:300; font-size:42px; line-height:.9; color:var(--ink); }
.flow h4{ font-family:var(--f-min); font-weight:500; font-size:17px; letter-spacing:.16em; color:var(--ink); }
.flow p{ font-size:16px; line-height:1.9; word-break:keep-all; text-wrap:pretty; }
@media (min-width:900px){ .flow{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---------- COTA ---------- */
.cota{ display:grid; justify-items:center; gap:20px; text-align:center; }
.cota__img{ width:100%; aspect-ratio:21/9; overflow:hidden; }
.cota__img img{ width:100%; height:100%; object-fit:cover; }
.cota__name{ font-family:var(--f-disp); font-weight:400; font-size:46px; letter-spacing:.32em; color:var(--ink); line-height:1; margin-right:-.32em; }

/* ---------- 口コミ・SNS ---------- */
.links{ display:grid; border-top:1px solid var(--line-strong); }
.linkrow{ display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:16px; min-height:78px; padding-block:12px; border-bottom:1px solid var(--line-strong); text-decoration:none; color:var(--ink); min-width:0; }
.linkrow .ico{ width:22px; height:22px; color:var(--accent-ink); }
.linkrow span{ display:grid; line-height:1.6; min-width:0; }
.linkrow b{ font-weight:500; font-size:16px; letter-spacing:.06em; }
.linkrow small{ font-family:var(--f-label); font-size:16px; letter-spacing:.14em; color:var(--text-small); overflow-wrap:anywhere; }
.arrow-c{ width:42px; height:42px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; font-size:16px; color:var(--ink); transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.linkrow:hover .arrow-c{ background:var(--ink); border-color:var(--ink); color:#fff; }
.links-h{ font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.2em; color:var(--ink); text-align:center; margin-bottom:18px; }
.links-group + .links-group{ margin-top:56px; }

/* ---------- 予約（暗い章） ---------- */
.reserve__grid{ display:grid; gap:16px; }
@media (min-width:768px){ .reserve__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.reserve .note{ margin-top:32px; text-align:center; }

/* ---------- 下層ページの見出し ---------- */
.page-head{ padding-block:64px 56px; text-align:center; }
.page-head .ttl{ margin-bottom:0; }
.crumb{ font-size:16px; color:var(--text-small); padding-block:14px 0; }
.crumb ol{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; }
.crumb li+li::before{ content:"/"; margin-right:10px; color:var(--line-strong); }
.crumb a{ display:inline-block; min-height:24px; }
.bleed img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:768px){ .bleed img{ aspect-ratio:21/9; } }

/* ---------- 店舗ページ ---------- */
.shop-hero{ position:relative; isolation:isolate; color:#fff; min-height:max(520px, calc(82svh - var(--header-h))); display:grid; align-content:end; justify-items:center; text-align:center; padding:48px var(--pad) 48px; }
.shop-hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.shop-hero__media img{ width:100%; height:100%; object-fit:cover; animation:kb 12s linear forwards; }
.shop-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(24,26,28,.12) 30%, rgba(24,26,28,.64) 100%); }
.shop-hero h1{ display:grid; justify-items:center; gap:10px; }
.shop-hero .nm{ font-family:var(--f-disp); font-weight:400; font-size:clamp(54px,15vw,128px); line-height:.95; letter-spacing:.01em; }
.shop-hero .kn{ font-size:16px; letter-spacing:.34em; }
.shop-hero .ds{ font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.2em; margin-top:4px; }
.shop-hero .curl{ color:#fff; margin-bottom:18px; }
.shop-intro{ display:grid; justify-items:center; gap:32px; text-align:center; }
.shop-intro .btns--pair{ width:100%; max-width:520px; }
.info{ display:grid; gap:40px; }
@media (min-width:901px){ .info{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; } }
.info dl{ display:grid; grid-template-columns:6.5em 1fr; border-top:1px solid var(--ink); }
.info dt,.info dd{ padding-block:15px; border-bottom:1px solid var(--line-strong); font-size:16px; line-height:1.8; }
.info dt{ color:var(--text-small); letter-spacing:.1em; }
.info dd a{ color:var(--accent-ink); display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; }
.map{ aspect-ratio:4/3; background:var(--ivory-2); filter:grayscale(.4); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.gallery li{ aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); }
.gallery img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:768px){ .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.another{ max-width:var(--w-narrow); margin-inline:auto; }

/* ---------- メニュー ---------- */
.tabs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:48px; position:sticky; top:var(--header-h); z-index:5; background:var(--ivory); padding-block:10px; }
.tab{ min-height:64px; border:1px solid var(--line-strong); background:transparent; cursor:pointer; font-family:var(--f-disp); font-weight:500; font-size:22px; letter-spacing:.02em; color:var(--text-2); padding:8px; transition:background-color .3s var(--ease), color .3s var(--ease); }
.tab[aria-selected="true"]{ background:var(--accent-tint); border-color:var(--accent); color:var(--ink); box-shadow:inset 0 -3px 0 var(--accent); }
.js .panel[hidden]{ display:none; }
.panel + .panel{ margin-top:72px; }
.js .panel + .panel{ margin-top:0; }
.panel__top{ display:grid; justify-items:center; gap:14px; margin-bottom:56px; padding:36px 18px 30px; background:var(--accent-tint); text-align:center; }
.panel__shop{ font-family:var(--f-disp); font-weight:400; font-size:46px; line-height:1; color:var(--ink); }
.panel__top .btns--pair{ width:100%; max-width:440px; }
.menu-cat{ margin-top:64px; }
.menu-cat:first-of-type{ margin-top:0; }
.menu-cat__h{ display:grid; justify-items:center; gap:4px; margin-bottom:18px; text-align:center; }
.menu-cat__h b{ font-family:var(--f-disp); font-weight:400; font-size:36px; line-height:1.1; color:var(--ink); }
.menu-cat__h span{ font-family:var(--f-min); font-size:16px; letter-spacing:.2em; color:var(--text-2); }
.menu-list{ border-top:1px solid var(--ink); }
.menu-list li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; padding-block:18px; border-bottom:1px solid var(--line-strong); }
.menu-list .nm{ font-size:16px; color:var(--ink); line-height:1.75; word-break:keep-all; }
.menu-list .pr{ font-family:var(--f-disp); font-weight:500; font-size:21px; color:var(--ink); white-space:nowrap; text-align:right; line-height:1.4; }
.menu-list .pr.ask{ font-family:var(--f-sans); font-size:16px; font-weight:400; color:var(--text-2); line-height:1.9; }
.menu-list .ds{ grid-column:1 / -1; font-size:16px; line-height:1.85; color:var(--text-small); }
.menu-list .tel{ grid-column:1 / -1; justify-self:start; width:auto; }
.netng{ display:inline-block; font-size:16px; border:1px solid var(--line-strong); padding:0 6px; margin-left:8px; color:var(--text-small); vertical-align:2px; white-space:nowrap; letter-spacing:.04em; }
.menu-notes{ margin-top:28px; display:grid; gap:2px; }
.src{ margin-top:14px; font-size:16px; color:var(--text-small); }

/* ---------- フッター ---------- */
.footer{ background:var(--ink-2); color:#e4e6e6; padding-block:80px 40px; overflow:clip; }
.footer a{ color:#e4e6e6; }
.footer__mark{ font-family:var(--f-disp); font-weight:300; font-size:clamp(84px,26vw,280px); line-height:.8; letter-spacing:.04em; color:#fff; text-align:center; }
.footer__mark sup{ font-size:.42em; vertical-align:.95em; }
.footer__shops{ margin-top:24px; text-align:center; font-family:var(--f-disp); font-size:20px; letter-spacing:.06em; color:#d6d9da; }
.footer nav ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 20px; margin-top:36px; }
.footer nav a{ display:inline-flex; align-items:center; min-height:44px; font-size:16px; letter-spacing:.12em; text-decoration:none; }
.footer nav a:hover{ text-decoration:underline; text-underline-offset:5px; }
.footer__co{ margin-top:28px; font-size:16px; color:#cfd3d4; text-align:center; letter-spacing:.12em; }
.footer__copy{ margin-top:8px; font-family:var(--f-label); font-size:16px; letter-spacing:.16em; color:#aeb4b6; text-align:center; }

/* ---------- 表示アニメーション ---------- */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation:none !important; }
  .js .reveal{ opacity:1; transform:none; }
  .js .line-art path{ stroke-dashoffset:0; }
  .hero__media img{ transform:none; }
}

/* ---------- PC の文字サイズとボタンの並び ---------- */
@media (min-width:768px){
  .poem{ font-size:18px; }
  .poem--lg{ font-size:clamp(24px,2.4vw,30px); }
  .ttl__ja{ font-size:16px; }
  .body-c{ font-size:16px; }
  .after .btns,.kimono .btns,.shop-intro ~ .btns{ grid-template-columns:repeat(2,minmax(0,300px)); justify-content:center; }
  .kimono .btns{ grid-template-columns:repeat(2,minmax(0,260px)); }
}

/* 長いカタカナ語でも枠を押し広げない */
.style-card__name,.style-card__by,.pick__menu,.menu-list .nm,.staff__role,.staff__tag,.concern__q{ overflow-wrap:anywhere; }
.footer__mark{ font-size:clamp(72px,21vw,240px); }
@media (max-width:767px){ .style-card__name{ font-size:16px; letter-spacing:.01em; } }

/* ---------- スタイリストページ：1 人ずつの紹介 ---------- */
.team-pro + .team-pro{ margin-top:96px; }
.team-pro__h{ display:grid; justify-items:center; gap:8px; text-align:center; margin-bottom:40px; }
.team-pro__h .nm{ font-family:var(--f-disp); font-weight:400; font-size:clamp(40px,11vw,64px); line-height:1; color:var(--ink); }
.team-pro__h .sub{ font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.14em; color:var(--accent-ink); word-break:keep-all; text-wrap:balance; }
.team-pro__h::after{ content:""; width:40px; height:2px; background:var(--accent); margin-top:6px; }
.pro{ display:grid; gap:24px; padding-block:40px; border-top:1px solid var(--line-strong); scroll-margin-top:calc(var(--header-h) + 16px); }
.pro:last-of-type{ border-bottom:1px solid var(--line-strong); }
.pro__img{ width:min(72%, 300px); margin-inline:auto; aspect-ratio:3/4; overflow:hidden; background:var(--ivory-2); }
.pro__img img{ width:100%; height:100%; object-fit:cover; }
.pro__body{ display:grid; justify-items:center; gap:14px; text-align:center; min-width:0; }
.pro__shop{ font-family:var(--f-label); font-size:16px; letter-spacing:.2em; color:var(--accent-ink); }
.pro__name{ font-family:var(--f-min); font-weight:500; font-size:30px; letter-spacing:.3em; line-height:1.3; color:var(--ink); margin-right:-.3em; display:grid; justify-items:center; }
.pro__name small{ font-family:var(--f-label); font-size:16px; letter-spacing:.3em; color:var(--text-small); margin-top:4px; }
.pro__role{ font-size:16px; letter-spacing:.08em; color:var(--text-2); }
.pro__msg{ font-family:var(--f-min); font-weight:500; font-size:16px; line-height:1.9; letter-spacing:.06em; color:var(--ink); word-break:keep-all; text-wrap:balance; }
.pro__text{ font-size:16px; line-height:2; max-width:34em; word-break:keep-all; text-wrap:pretty; overflow-wrap:anywhere; }
.pro__dl{ width:100%; max-width:34em; display:grid; border-top:1px solid var(--line); }
.pro__dl dt{ padding-top:14px; font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.2em; color:var(--accent-ink); }
.pro__dl dd{ padding:4px 0 14px; border-bottom:1px solid var(--line); font-size:16px; line-height:1.9; overflow-wrap:anywhere; word-break:keep-all; }
.pro__dl ul{ display:grid; gap:2px; }
.pro__works{ width:100%; max-width:34em; display:grid; gap:10px; justify-items:center; }
.pro__works ul{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%; }
.pro__works li{ display:grid; gap:4px; font-size:16px; line-height:1.5; color:var(--text-2); overflow-wrap:anywhere; }
.pro__works img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
.pro__btns{ display:grid; gap:8px; width:100%; max-width:340px; }
.pro__btns .btn{ max-width:none; }
.pro-note{ text-align:center; font-size:16px; padding-block:28px; border-bottom:1px solid var(--line-strong); }
.pro-note a,.pick__staff a,.style-card__by a{ color:inherit; text-underline-offset:3px; }
@media (min-width:900px){
  .pro{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px; align-items:start; padding-block:56px; }
  .pro__img{ width:100%; position:sticky; top:calc(var(--header-h) + 24px); }
  .pro__body{ justify-items:start; text-align:left; }
  .pro__name{ justify-items:start; margin-right:0; }
  .pro__body .tags{ justify-content:flex-start; }
  .pro__btns{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; }
}
.pro__works ul{ display:flex; flex-wrap:wrap; justify-content:center; }
.pro__works li{ flex:0 0 calc((100% - 12px) / 3); }
@media (min-width:900px){ .pro__works{ justify-items:start; } .pro__works ul{ justify-content:flex-start; } }

/* ---------- ヘッダー右上：店舗 Instagram ＋ メニュー（コーポレートカラーの四角） ---------- */
.header__in{ grid-template-columns:minmax(0,1fr) auto auto; gap:6px; }
.brands{ justify-content:flex-start; }
.brands a{ font-size:17px; }
.header__ig,.header__menu,.drawer__top .icon-btn{ background:var(--ink); color:#fff; border-radius:2px; transition:background-color .3s var(--ease); }
.header__ig:hover,.header__menu:hover{ background:var(--ink-2); }
.header__ig .ico{ width:20px; height:20px; }
.header__menu .burger i,.drawer__top .x::before,.drawer__top .x::after{ background:#fff; }
.header__menu .burger{ width:20px; gap:6px; }
.header__menu .burger i:last-child{ width:100%; }
.drawer__top{ grid-template-columns:minmax(0,1fr) auto auto; gap:6px; }
.drawer__logo{ text-align:left; }
@media (min-width:768px){ .brands a{ font-size:19px; } }
@media (min-width:901px){
  .header__in{ grid-template-columns:auto minmax(0,1fr) auto auto auto; gap:10px; }
  .header__in > .icon-btn{ display:grid; }
  .header__ig,.header__menu{ width:48px; height:48px; }
}

/* ---------- スタイリストの写真：右上に Instagram（押すと本人の Instagram へ） ---------- */
.has-ig{ position:relative; display:block; }
.ig-badge{ position:absolute; top:8px; right:8px; width:32px; height:32px; display:grid; place-items:center; background:var(--ink); color:#fff; border-radius:2px; transition:transform .3s var(--ease); }
.ig-badge .ico{ width:17px; height:17px; }
.has-ig:hover .ig-badge{ transform:scale(1.08); }
.pro__img .ig-badge{ top:12px; right:12px; width:40px; height:40px; }
.pro__img .ig-badge .ico{ width:21px; height:21px; }
.staff__link{ display:grid; gap:3px; text-decoration:none; color:inherit; min-height:44px; }
.staff__link:hover .staff__name{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
@media (max-width:767px){ .staff .ig-badge{ top:6px; right:6px; width:28px; height:28px; } .staff .ig-badge .ico{ width:15px; height:15px; } }
@media (max-width:767px){ .staff__role{ font-size:16px; letter-spacing:0; overflow-wrap:normal; word-break:keep-all; } }

/* ---------- スタイリスト：コンパクトな横長カード（スマホは左右 2 名） ---------- */
.sc-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sc{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; background:var(--white); padding:8px; min-width:0; }
.sec--white .sc{ background:var(--ivory); }
.sc__img{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); }
.sc__img img{ width:100%; height:100%; object-fit:cover; }
.sc .ig-badge{ top:3px; right:3px; width:20px; height:20px; }
.sc .ig-badge .ico{ width:12px; height:12px; }
.sc__link{ display:grid; gap:1px; min-height:44px; text-decoration:none; color:inherit; min-width:0; }
.sc__name{ font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.12em; color:var(--ink); line-height:1.4; }
.sc__role{ font-size:16px; line-height:1.5; color:var(--text-2); letter-spacing:0; }
.sc__yr{ font-size:16px; line-height:1.5; color:var(--text-small); }
.sc__tag{ font-size:16px; line-height:1.5; color:var(--accent-ink); overflow-wrap:anywhere; }
.sc__link:hover .sc__name{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
@media (min-width:768px){
  .sc-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .sc{ grid-template-columns:88px minmax(0,1fr); gap:16px; padding:10px; }
  .sc .ig-badge{ width:24px; height:24px; }
  .sc .ig-badge .ico{ width:14px; height:14px; }
  .sc__role,.sc__yr,.sc__tag{ font-size:16px; }
}
.team + .team{ margin-top:56px; }
.team__head{ margin-bottom:20px; }

/* ---------- スタイリスト一覧ページ：2 列のカード ---------- */
.dc-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 12px; }
.dc{ display:grid; gap:6px; align-content:start; justify-items:center; text-align:center; min-width:0; scroll-margin-top:calc(var(--header-h) + 16px); }
.dc__img{ position:relative; display:block; width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); margin-bottom:6px; }
.dc__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.dc__img:hover img{ transform:scale(1.04); }
.dc__name{ display:grid; justify-items:center; font-family:var(--f-min); font-weight:500; font-size:19px; letter-spacing:.24em; line-height:1.4; color:var(--ink); margin-right:-.24em; }
.dc__name a{ color:inherit; text-decoration:none; }
.dc__name small{ font-family:var(--f-label); font-size:16px; letter-spacing:.24em; color:var(--text-small); }
.dc__role{ font-size:16px; line-height:1.6; color:var(--text-2); word-break:keep-all; }
.dc .tags{ gap:4px; }
.dc .tag{ font-size:16px; padding:1px 6px; }
.dc__msg{ font-size:16px; line-height:1.8; word-break:keep-all; text-wrap:pretty; overflow-wrap:anywhere; }
@media (min-width:768px){ .dc-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 24px; } }
@media (min-width:1120px){ .dc-list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.team-pro .team__cta{ margin-top:40px; }

/* ---------- スタイリスト個別ページ ---------- */
.sp-hero{ padding-block:24px 72px; }
.sp-hero .wrap{ display:grid; gap:28px; }
.sp-hero__img{ position:relative; display:block; width:min(80%, 360px); margin-inline:auto; aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); }
.sp-hero__img img{ width:100%; height:100%; object-fit:cover; }
.sp-hero__img .ig-badge{ top:12px; right:12px; width:42px; height:42px; }
.sp-hero__img .ig-badge .ico{ width:22px; height:22px; }
.sp-hero__body{ display:grid; justify-items:center; gap:14px; text-align:center; min-width:0; }
.sp-hero__shop{ font-family:var(--f-label); font-size:16px; letter-spacing:.22em; color:var(--accent-ink); }
.sp-hero__name{ display:grid; justify-items:center; font-family:var(--f-min); font-weight:500; font-size:clamp(40px,11vw,60px); letter-spacing:.3em; line-height:1.2; color:var(--ink); margin-right:-.3em; }
.sp-hero__name small{ font-family:var(--f-label); font-size:16px; letter-spacing:.34em; color:var(--text-small); margin-top:8px; }
.sp-hero__role{ font-size:16px; letter-spacing:.12em; color:var(--text-2); }
.sp-hero__role span{ margin-left:12px; padding-left:12px; border-left:1px solid var(--line-strong); }
.sp-hero__msg{ font-family:var(--f-min); font-weight:500; font-size:18px; line-height:1.9; letter-spacing:.08em; color:var(--ink); word-break:keep-all; text-wrap:balance; }
.sp-hero__btns{ display:grid; gap:10px; width:100%; max-width:360px; }
.sp-hero__btns .btn{ max-width:none; }
@media (min-width:900px){
  .sp-hero{ padding-block:48px 112px; }
  .sp-hero .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px; align-items:center; }
  .sp-hero__img{ width:100%; }
}
.rec{ max-width:30em; margin-inline:auto; border-top:1px solid var(--ink); }
.rec li{ display:grid; grid-template-columns:48px 1fr; align-items:baseline; gap:12px; padding-block:18px; border-bottom:1px solid var(--line-strong); font-family:var(--f-min); font-weight:500; font-size:16px; letter-spacing:.06em; color:var(--ink); overflow-wrap:anywhere; }
.rec__no{ font-family:var(--f-disp); font-style:italic; font-weight:300; font-size:28px; color:var(--accent); line-height:1; }
.works{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:var(--w-narrow); margin-inline:auto; }
.works li{ display:grid; gap:8px; text-align:center; font-size:16px; }
.works__img{ aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); }
.works__img img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:768px){ .works{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cn{ display:grid; gap:10px; }
.cn li{ background:var(--ivory); padding:20px 18px; display:grid; gap:6px; text-align:center; }
.cn__q{ font-family:var(--f-min); font-weight:500; font-size:17px; letter-spacing:.08em; color:var(--ink); }
.cn__m{ font-size:16px; display:grid; gap:2px; word-break:keep-all; }
.cn__m b{ font-family:var(--f-disp); font-weight:500; font-size:22px; color:var(--ink); }
.menu-list .nm small{ display:block; font-size:16px; color:var(--text-small); }
@media (max-width:767px){ .sec{ padding-block:72px; } .ttl{ margin-bottom:36px; } }
.dc .more{ font-size:16px; letter-spacing:.06em; gap:8px; white-space:nowrap; }
.dc .more::after{ width:18px; }
@media (max-width:899px){ .pro__dl dt,.pro__dl dd{ text-align:center; } }
.sc__more{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:16px; letter-spacing:.04em; color:var(--ink); border-bottom:1px solid var(--line-strong); justify-self:start; }
.sc__more::after{ content:"→"; font-size:10px; }

/* ---------- 個別ページ：Q&A と施術事例（アンケート回答から自動生成） ---------- */
.qa{ display:grid; border-top:1px solid var(--ink); }
.qa__item{ padding-block:24px; border-bottom:1px solid var(--line-strong); display:grid; gap:12px; }
.qa__q,.qa__a{ display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:baseline; }
.qa__q{ font-family:var(--f-min); font-weight:500; font-size:16px; line-height:1.8; letter-spacing:.06em; color:var(--ink); }
.qa__a{ font-size:16px; line-height:2; overflow-wrap:anywhere; }
.qa__q span,.qa__a span{ font-family:var(--f-disp); font-size:26px; line-height:1; color:var(--accent); }
.qa__a span{ color:var(--text-small); }
.cases{ display:grid; gap:12px; }
@media (min-width:900px){ .cases{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.case{ background:var(--ivory); padding:24px 20px; display:grid; gap:10px; align-content:start; }
.case__no{ font-family:var(--f-disp); font-style:italic; font-size:24px; color:var(--accent); line-height:1; }
.case__row{ display:grid; grid-template-columns:4em 1fr; gap:8px; font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
.case__row b{ font-weight:500; color:var(--accent-ink); }
.case__pt{ font-size:16px; line-height:1.95; overflow-wrap:anywhere; }
.more .ico,.linkrow .ico{ flex:none; }
.more .ico{ width:16px; height:16px; }

/* =========================================================
   店名＝「店舗の色の四角」（全ページ共通のルール）
   Glory+plus：#406d77（白文字 5.72:1） / tabasa G&Co：#775046（白文字 6.95:1）
   ========================================================= */
.brand{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; min-height:44px; padding:4px 12px; border-radius:2px; color:#fff !important; text-decoration:none; font-family:var(--f-disp); font-weight:500; font-size:16px; line-height:1.15; letter-spacing:.03em; white-space:nowrap; transition:filter .3s var(--ease), transform .3s var(--ease); }
.brand--g{ background:var(--g-ink); }
.brand--t{ background:var(--t-ink); }
.brand:hover{ filter:brightness(1.12); }
.brand small{ font-family:var(--f-sans); font-size:16px; letter-spacing:.08em; margin-top:3px; opacity:.92; }
.brand[aria-current="page"]{ box-shadow:inset 0 -3px 0 rgba(255,255,255,.75); }
.brand--lg{ min-height:56px; padding:8px 16px; font-size:20px; }
.brands{ gap:6px; }
.brands .brand{ font-size:16px; padding:4px 10px; }
@media (min-width:768px){ .brands .brand{ font-size:18px; padding:4px 14px; } }

/* ヒーロー：2 店舗の四角 */
.hero__shops{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:440px; }
.hero__shops .brand{ white-space:normal; text-align:center; }
@media (max-width:374px){ .hero__shops .brand{ font-size:17px; padding:8px 8px; } }

/* 店舗カード：写真の下に店舗色の帯 */
.shop__band{ display:grid; justify-items:center; gap:4px; padding:20px 16px 18px; background:var(--accent-ink); color:#fff; text-align:center; }
.shop__band .nm{ font-family:var(--f-disp); font-weight:400; font-size:clamp(36px,10vw,52px); line-height:1; letter-spacing:.02em; }
.shop__band .kn{ font-size:16px; letter-spacing:.2em; }
.shop{ grid-template-rows:auto auto 1fr; }
.shop__img::after{ display:none; }

/* 店名を出す小見出しも同じ四角に */
.mini__name,.pick__shop,.team__name,.panel__shop,.sp-hero__shop,.pro__shop{ display:inline-block; justify-self:center; background:var(--accent-ink); color:#fff !important; padding:6px 16px; border-radius:2px; }
.mini__name{ font-size:24px; }
.pick__shop{ font-size:20px; padding:4px 14px; }
.team__name{ font-size:28px; padding:6px 20px; }
.panel__shop{ font-size:34px; padding:8px 22px; }
.sp-hero__shop,.pro__shop{ font-size:16px; padding:5px 12px; }
.team-pro__h .nm{ background:var(--accent-ink); color:#fff; padding:8px 24px; border-radius:2px; }
@media (min-width:900px){ .sp-hero__shop{ justify-self:start; } }
.dark .mini__name{ color:#fff; }

/* フッター：2 店舗の四角 */
.footer__shops{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.footer__shops .brand{ font-size:17px; }

/* 欧文の流れる帯（装飾） */
.marquee{ overflow:hidden; background:var(--ink); color:#e9e6e0; padding-block:14px; }
.marquee__in{ display:flex; gap:28px; width:max-content; animation:mq 38s linear infinite; font-family:var(--f-disp); font-style:italic; font-weight:300; font-size:24px; letter-spacing:.04em; white-space:nowrap; }
.marquee__in i{ font-style:normal; font-size:16px; opacity:.6; align-self:center; }
.marquee__in .mg{ color:#a9cbd3; }
.marquee__in .mt{ color:#e3b9ab; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (min-width:768px){ .marquee__in{ font-size:34px; gap:40px; } .marquee{ padding-block:20px; } }

/* ヒーロー 2 枚目（tabasa の外観）：隣の看板が入らない位置で切り取る */
.hero__media img:nth-child(2){ object-position:68% 50%; }

/* =========================================================
   文字 16px 以上（2026-10-20 オーナー指定）に合わせた組み直し
   ========================================================= */
body{ font-size:16px; line-height:1.9; }
.btn{ letter-spacing:.08em; }
.btn-sm{ padding:10px 10px; letter-spacing:.04em; }
.tag{ padding:2px 10px; letter-spacing:.02em; }
.label{ letter-spacing:.16em; }
.more{ letter-spacing:.14em; }
.hero__sub,.hero__meta,.hero__count{ letter-spacing:.08em; }
.brand small{ letter-spacing:.04em; }

/* パソコンの上部メニュー：16px で収まる 1280px 以上だけ表示（それ未満はメニューボタン） */
@media (min-width:901px) and (max-width:1279px){ .gnav{ display:none; } .header__in{ grid-template-columns:auto minmax(0,1fr) auto auto auto; } }
@media (min-width:1280px){ .gnav a{ padding-inline:10px; letter-spacing:.06em; } }

/* 悩みから選ぶ：スマホは 1 列の行（番号＋お悩み＋開閉） */
@media (max-width:767px){
  .concerns{ grid-template-columns:1fr; gap:8px; }
  .concern summary{ min-height:72px; grid-template-columns:auto 1fr; align-items:center; gap:16px; padding:14px 48px 14px 16px; align-content:center; }
  .concern__no{ font-size:34px; }
  .concern__plus{ top:50%; margin-top:-7px; }
  .concern__q br{ display:none; }
}

/* スタイリストのカード：縦型の 2 列（スマホ） */
.sc{ grid-template-columns:1fr; gap:10px; align-items:start; padding:0 0 14px; background:transparent; }
.sec--white .sc{ background:transparent; }
.sc__img{ aspect-ratio:1; }
.sc .ig-badge{ top:8px; right:8px; width:32px; height:32px; }
.sc .ig-badge .ico{ width:18px; height:18px; }
.sc__link{ justify-items:center; text-align:center; gap:2px; }
.sc__name{ font-size:19px; letter-spacing:.2em; margin-right:-.2em; }
.sc__role,.sc__yr,.sc__tag{ letter-spacing:0; overflow-wrap:anywhere; }
.sc__more{ justify-self:center; margin-top:6px; }
.sc-list{ gap:24px 12px; }
@media (min-width:768px){ .sc-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 20px; } .sc{ grid-template-columns:1fr; padding:0 0 16px; } }
@media (min-width:1120px){ .sc-list{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

/* 一覧ページのカード */
.dc__role,.dc__msg{ letter-spacing:0; }
.dc__name small{ letter-spacing:.12em; }

/* 店舗カードの帯：読み仮名と徒歩分数を 2 行に */
.shop__band .kn{ letter-spacing:.1em; }

/* スタイル名：決めた位置でだけ改行 */
.style-card__name{ word-break:keep-all; overflow-wrap:anywhere; letter-spacing:.02em; }
.style-card__by{ letter-spacing:0; }

/* メニュー表 */
.netng{ margin-left:0; margin-top:4px; display:inline-block; }
.menu-list .nm{ display:grid; justify-items:start; }

/* 長い欧文の行や記号も 16px */
.footer__copy{ letter-spacing:.04em; }
.crumb{ font-size:16px; }

/* ---------- トップを短く（スマホ） ---------- */
@media (max-width:767px){
  .sec{ padding-block:60px; }
  .ttl{ margin-bottom:32px; }
  /* スタイル写真：横にスワイプ（領域内のスクロール。ページの横スクロールではない） */
  .styles{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding-inline:var(--pad); gap:8px; scrollbar-width:none; }
  .styles::-webkit-scrollbar{ display:none; }
  .style-card{ scroll-snap-align:start; }
  .swipe-hint{ display:block; text-align:right; padding-inline:var(--pad); margin-bottom:10px; color:var(--text-small); }
  /* 店舗カードの写真は横長に */
  .shop__img{ aspect-ratio:16/10; }
  /* COTA は写真を省く */
  .cota__img{ display:none; }
}
.swipe-hint{ display:none; }
@media (max-width:767px){ .swipe-hint{ display:block; } }
.fold summary{ list-style:none; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:12px; min-height:56px; border:1px solid var(--line-strong); background:var(--white); margin-bottom:0; }
.fold summary::-webkit-details-marker{ display:none; }
.fold summary::after{ content:"＋"; font-family:var(--f-sans); }
.fold[open] summary{ margin-bottom:16px; }
.fold[open] summary::after{ content:"－"; }
@media (min-width:900px){ .fold summary{ pointer-events:none; border:0; background:none; } .fold summary::after{ display:none; } }

/* =========================================================
   第2回監査の差し戻し対応（2026-10-20）
   ========================================================= */
/* 改行：<wbr>（文節の区切り）でだけ折り返す。長すぎる語だけは最後の手段として折る */
body{ word-break:keep-all; overflow-wrap:anywhere; }
p,li,dd,dt,h1,h2,h3,h4,.btn{ text-wrap:pretty; }
.btn{ word-break:keep-all; }

/* 3 行を超える文章は左揃え（中央揃えは短い詩と見出しだけ） */
.body-c,.step p,.flow p,.pro__text,.shop__text,.dc__msg,.bcard p,.qa__a,.case__pt{ text-align:left; }
.body-c{ max-width:24em; }
.step p{ max-width:22em; }
.message{ justify-items:center; }

/* 明朝の字間を詰めて読みやすく */
.poem{ letter-spacing:.1em; }
.poem--lg{ letter-spacing:.12em; }
.ttl__ja{ letter-spacing:.16em; }
.trouble li{ letter-spacing:.08em; }

/* お悩みから選ぶ（Trouble と同じ暗い章の中） */
.find{ margin-top:72px; padding-top:56px; border-top:1px solid rgba(255,255,255,.2); }
.find__h{ display:grid; justify-items:center; gap:8px; text-align:center; font-family:var(--f-min); font-weight:500; font-size:22px; letter-spacing:.14em; color:#fff; margin-bottom:12px; }
.find__h span{ font-family:var(--f-disp); font-weight:300; font-size:clamp(34px,9vw,52px); letter-spacing:.01em; line-height:1; }
.find__lead{ text-align:center; color:#dfe2e2; margin-bottom:28px; }
.find__note{ margin-top:16px; color:#c9cecf; }
.dark .concern{ background:var(--white); }

/* Total Beauty：Glory+plus のみ／カード */
.only{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:-12px 0 32px; color:var(--text); }
.bcards{ display:grid; gap:16px; }
@media (min-width:900px){ .bcards{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; } }
.bcard{ background:var(--ivory); display:grid; }
.bcard__img{ aspect-ratio:16/9; overflow:hidden; }
.bcard__img img{ width:100%; height:100%; object-fit:cover; }
.bcard__body{ padding:24px 20px 26px; display:grid; gap:12px; }
.bcard__t{ display:grid; justify-items:center; gap:2px; text-align:center; }
.bcard__t b{ font-family:var(--f-disp); font-weight:400; font-size:40px; line-height:1; color:var(--ink); }
.bcard__t span{ font-family:var(--f-min); font-weight:500; font-size:17px; letter-spacing:.14em; color:var(--g-ink); }
.bcard__note{ color:var(--text-2); }
.bcard .btns{ margin-top:4px; }

/* スタイル：店舗の色の四角ラベル */
.style-card__img{ position:relative; }
.style-card__shop{ position:absolute; left:8px; top:8px; background:var(--accent-ink); color:#fff; font-family:var(--f-disp); font-weight:500; font-size:16px; line-height:1.2; padding:5px 10px; border-radius:2px; }
.styles--few{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-flow:row !important; max-width:var(--w-narrow); margin-inline:auto; padding-inline:var(--pad); }
@media (max-width:767px){ .styles--few{ grid-template-columns:minmax(0,1fr) !important; max-width:360px; } }

/* 店舗ページ：ヒーローの下に店舗色の帯 */
.shop-band{ display:grid; justify-items:center; gap:4px; padding:18px var(--pad); background:var(--accent-ink); color:#fff; text-align:center; }
.shop-band .nm{ font-family:var(--f-disp); font-size:30px; line-height:1.1; }
.shop-band .kn{ letter-spacing:.1em; }
.brand[aria-current="page"]{ outline:2px solid #fff; outline-offset:-5px; box-shadow:0 0 0 2px var(--ink); }

/* メニューのタブ：選択中は店舗の色で塗る */
.tab[aria-selected="true"]{ background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; box-shadow:none; }
.tab[aria-selected="false"]{ background:var(--white); }

/* パンくず：タップ領域 44px */
.crumb a{ display:inline-flex; align-items:center; min-height:44px; }

/* 2 列ボタン：狭い画面では縦 1 列 */
@media (max-width:399px){ .btns--stack{ grid-template-columns:1fr; } }

/* スタイリストのカードは名前と肩書だけ（詳しくは個別ページ） */
.sc__yr,.sc__tag{ display:none; }

/* 個別ページ：1 画面目に名前と指名ボタン */
@media (max-width:899px){
  .sp-hero{ padding-block:16px 56px; }
  .sp-hero .wrap{ gap:18px; }
  .sp-hero__img{ width:min(62%, 300px); }
  .sp-hero__name{ font-size:clamp(34px,9vw,52px); }
  .sp-hero__msg{ font-size:17px; }
}

/* PC：ヒーローを 1 画面に収める */
@media (min-width:901px){
  .hero{ padding-block:40px; }
  .hero__mark{ font-size:clamp(64px,8.4vw,132px); }
  .hero__foot{ gap:10px; }
  .hero__h1{ font-size:clamp(28px,2.4vw,40px); }
}

/* 動きを止めるボタン（WCAG 2.2.2） */
.hero__ctrl{ display:flex; align-items:center; gap:12px; }
.hero__pause{ width:44px; height:44px; border:1px solid rgba(255,255,255,.7); background:rgba(24,26,28,.35); border-radius:2px; cursor:pointer; display:grid; place-items:center; }
.hero__pause span{ width:12px; height:14px; border-left:3px solid #fff; border-right:3px solid #fff; }
.hero__pause[aria-pressed="true"] span{ width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; }
.is-paused .marquee__in{ animation-play-state:paused; }
.is-paused .hero__media img.is-on{ animation-play-state:paused; }
.marquee:hover .marquee__in{ animation-play-state:paused; }
/* 長い本文は一般的な日本語組版（1 文字単位の折り返し＋両端揃え＋禁則） */
.body-c,.step p,.flow p,.pro__text,.shop__text,.bcard p,.qa__a,.case__pt,.message .body-c,.staff__msg,.menu-list .ds,.dc__msg{ word-break:normal; line-break:strict; text-align:justify; text-justify:inter-character; }
/* スタイルの店舗ラベル：写真の文字と重ならないよう、写真の下に */
.style-card__shop{ position:static; justify-self:center; margin-bottom:4px; font-size:16px; padding:3px 10px; }
/* 店舗ページ：店舗色の帯をヒーローの下端に（1 画面目に必ず入る） */
.shop-hero{ min-height:max(480px, calc(100svh - var(--header-h) - var(--bar-h))); padding-bottom:calc(var(--band-h, 96px) + 32px); }
.shop-hero .shop-band{ position:absolute; inset:auto 0 0 0; z-index:1; --band-h:96px; min-height:var(--band-h); align-content:center; }
.shop-hero::after{ background:linear-gradient(180deg, rgba(24,26,28,.1) 30%, rgba(24,26,28,.55) 100%); }
@media (min-width:901px){ .shop-hero{ min-height:calc(100vh - var(--header-h)); } }
.nw{ white-space:nowrap; }
@media (min-width:901px){ .after .btns .btn{ min-width:320px; } }
/* パンくず（約 60px）の分も差し引いて、帯まで 1 画面目に収める */
.shop-hero{ min-height:max(440px, calc(100svh - var(--header-h) - var(--bar-h) - 62px)); }
@media (min-width:901px){ .shop-hero{ min-height:max(520px, calc(100vh - var(--header-h) - 62px)); } }

/* =========================================================
   トップ直下：2 店舗を左右半分ずつで比較（2026-10-20 依頼主指定）
   ========================================================= */
.sec--tight-top{ padding-top:48px; }
.choose2__lead{ text-align:center; margin:-8px auto 28px; max-width:34em; color:var(--text); }
.choose2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; }
.pick2{ display:grid; grid-template-rows:auto auto auto 1fr auto auto; gap:10px; background:var(--accent-tint); padding:0 0 12px; min-width:0; border-top:4px solid var(--accent-ink); }
.pick2__img{ display:block; aspect-ratio:1; overflow:hidden; }
.pick2__img img{ width:100%; height:100%; object-fit:cover; }
.pick2__name{ margin:0 10px; text-align:center; }
.pick2__name a{ display:flex; justify-content:center; align-items:center; min-height:48px; background:var(--accent-ink); color:#fff; text-decoration:none; font-family:var(--f-disp); font-weight:500; font-size:clamp(19px,5.4vw,30px); line-height:1.1; letter-spacing:.02em; border-radius:2px; white-space:nowrap; }
.pick2__catch{ margin:0 10px; text-align:center; font-family:var(--f-min); font-weight:500; line-height:1.7; letter-spacing:.04em; color:var(--ink); }
.pick2__pts{ margin:0 10px; display:grid; gap:6px; }
.pick2__pts li{ position:relative; padding-left:20px; line-height:1.6; color:var(--ink); }
.pick2__pts li::before{ content:""; position:absolute; left:2px; top:.5em; width:10px; height:6px; border-left:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink); transform:rotate(-45deg); }
.pick2__facts{ margin:0 10px; display:grid; gap:0; border-top:1px solid var(--accent); padding-top:8px; }
.pick2__facts dt{ color:var(--text-small); line-height:1.5; }
.pick2__facts dd{ color:var(--ink); line-height:1.6; margin-bottom:4px; }
.pick2__btns{ margin:0 10px; display:grid; gap:8px; }
.pick2__btns .btn{ max-width:none; min-height:48px; }
@media (min-width:768px){
  .choose2{ gap:20px; }
  .pick2{ gap:14px; padding-bottom:20px; }
  .pick2__img{ aspect-ratio:16/10; }
  .pick2__name,.pick2__catch,.pick2__pts,.pick2__facts,.pick2__btns{ margin-inline:24px; }
  .pick2__catch{ font-size:19px; }
  .pick2__facts{ grid-template-columns:auto 1fr; column-gap:16px; }
  .pick2__btns{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   ヘアスタイル：右から左へ流れる（触れている間・停止ボタンで止まる）
   ========================================================= */
.sflow-sec .ttl{ margin-bottom:28px; }
.sflow{ overflow:hidden; padding-block:4px; }
.sflow__track{ display:flex; gap:10px; width:max-content; animation:sflow 60s linear infinite; }
.flow-card{ width:200px; flex:none; display:grid; gap:4px; text-align:center; }
.flow-card__img{ aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); margin-bottom:4px; }
.flow-card__img img{ width:100%; height:100%; object-fit:cover; }
.flow-card__shop{ justify-self:center; background:var(--accent-ink); color:#fff; font-family:var(--f-disp); font-weight:500; padding:2px 10px; border-radius:2px; line-height:1.4; }
.flow-card__name{ font-family:var(--f-min); font-weight:500; color:var(--ink); line-height:1.5; }
.flow-card__by{ color:var(--accent-ink); line-height:1.5; }
@keyframes sflow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.sflow:hover .sflow__track,.sflow:focus-within .sflow__track,.sflow:active .sflow__track,.is-paused .sflow__track{ animation-play-state:paused; }
@media (min-width:768px){ .flow-card{ width:240px; } .sflow__track{ gap:16px; } }
@media (prefers-reduced-motion:reduce){
  .sflow{ overflow-x:auto; }
  .sflow__track{ animation:none; }
  .flow-card[aria-hidden="true"]{ display:none; }
}
.btns--row{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); justify-items:stretch; max-width:640px; margin-inline:auto; width:100%; }
.btns--row .btn{ max-width:none; }

/* =========================================================
   トップを全体にコンパクトに
   ========================================================= */
@media (max-width:767px){
  .sec{ padding-block:52px; }
  .ttl{ margin-bottom:26px; gap:10px; }
  .ttl__en{ font-size:clamp(40px,11vw,64px); }
  .steps{ gap:28px; margin-top:36px; }
  .step{ gap:8px; }
  .step__no{ font-size:40px; }
  .line-art{ margin-bottom:36px; }
  .find{ margin-top:48px; padding-top:40px; }
  .trouble li{ padding-block:16px; }
  .trouble-end{ margin-top:36px; }
  /* Total Beauty：写真を左、文を右の行に */
  .bcard{ grid-template-columns:104px minmax(0,1fr); gap:0; }
  .bcard__img{ aspect-ratio:1; height:100%; }
  .bcard__body{ padding:14px 14px 16px; gap:8px; }
  .bcard__t{ justify-items:start; text-align:left; }
  .bcard__t b{ font-size:30px; }
  .bcard .btns .btn{ max-width:none; }
  .links-group + .links-group{ margin-top:36px; }
  .message{ gap:20px; }
}
.pick2{ grid-template-rows:auto auto auto auto 1fr auto auto; }
.pick2__label{ margin:0 10px -4px; font-family:var(--f-min); font-weight:500; color:var(--accent-ink); letter-spacing:.1em; }
@media (max-width:767px){ .pick2__catch{ display:none; } .pick2{ grid-template-rows:auto auto auto 1fr auto auto; } .pick2__pts li{ letter-spacing:0; } }
@media (min-width:768px){ .pick2__label{ margin-inline:24px; } }
@media (max-width:767px){ .bcard__img{ width:104px; aspect-ratio:auto; height:auto; min-height:104px; align-self:stretch; } .bcard__img img{ height:100%; } }
.choose2__lead b{ font-weight:500; color:var(--ink); background:linear-gradient(transparent 62%, rgba(98,154,167,.22) 62%, rgba(162,116,103,.22) 100%); }
.sflow__ctrl{ display:flex; justify-content:flex-end; margin-top:-12px; margin-bottom:12px; }
.sflow__pause{ width:44px; height:44px; border:1px solid var(--line-strong); background:var(--white); border-radius:2px; cursor:pointer; display:grid; place-items:center; }
.sflow__pause span{ width:12px; height:14px; border-left:3px solid var(--ink); border-right:3px solid var(--ink); }
.sflow__pause[aria-pressed="true"] span{ width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--ink); }
/* 2 店舗共通の帯 */
.common2{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0 auto 14px; padding:12px 16px; background:var(--white); border:1px solid var(--line-strong); max-width:640px; text-align:center; color:var(--ink); font-family:var(--f-min); font-weight:500; letter-spacing:.06em; }
.common2__lb{ background:var(--ink); color:#fff; padding:2px 10px; border-radius:2px; font-family:var(--f-sans); letter-spacing:.04em; }
/* キャッチ：スマホでは 1 行目だけ */
.pick2__catch span{ display:block; }
@media (max-width:767px){ .pick2__catch{ display:block; letter-spacing:0; } .pick2__catch2{ display:none !important; } .pick2{ grid-template-rows:auto auto auto auto 1fr auto auto; } }
/* PC でも日本語の見出しを主に */
@media (min-width:768px){ #choose .ttl__ja--big{ font-size:clamp(28px,3vw,40px); } #choose .ttl__en{ font-size:clamp(40px,5vw,64px); } }
/* Total Beauty（スマホ）：正方形の写真＋ボタンは全幅 */
@media (max-width:767px){
  .bcard__img{ width:104px; aspect-ratio:1; min-height:0; align-self:start; height:auto; }
  .bcard__img img{ height:100%; }
  .bcard__btns{ grid-column:1 / -1; padding:0 14px 16px; }
  .bcard__btns .btn{ max-width:none; }
}
@media (min-width:768px){ .bcard__btns{ padding:0 20px 24px; } }
.sflow__pause{ border-color:var(--ink); }

/* トップ：Glory+plus だけのメニューは 1 行＋ボタン（詳しくは店舗ページ） */
.gonly{ text-align:center; }
.gonly__h{ display:flex; justify-content:center; align-items:center; gap:10px; font-family:var(--f-min); font-weight:500; font-size:18px; color:var(--ink); margin-bottom:10px; }
.gonly__txt{ margin-bottom:20px; }
.dark .find__lead{ margin:-8px auto 24px; max-width:34em; }

/* 写真準備中（画像の中の小さな文字ではなく 16px の文字で） */
.noimg{ display:grid; place-items:center; background:var(--ivory-2); color:var(--text-2); aspect-ratio:1; }
.dc__img.noimg,.sp-hero__img.noimg{ aspect-ratio:4/5; }
.noimg span{ font-size:16px; letter-spacing:.08em; }

/* ヒーロー B 案：2 店名を主役に（GLORY+ は小さく運営表記として） */
.hero-b .hero__mark{ font-size:22px; letter-spacing:.2em; line-height:1; opacity:.9; }
.hero-b .hero__mark sup{ vertical-align:.5em; }
.hero-b .hero__shops{ max-width:none; gap:10px; }
.hero-b .hero__shops .brand{ min-height:84px; font-size:clamp(26px,7.4vw,44px); padding:10px 12px; }
.hero-b .hero__shops .brand small{ font-size:16px; margin-top:6px; }
@media (min-width:901px){ .hero-b .hero__shops{ grid-template-columns:repeat(2,minmax(0,300px)); } }
.hero-b .hero__shops .brand{ white-space:nowrap; font-size:clamp(22px,6vw,44px); }
.hero-b .hero__mark{ font-size:26px; }
.hero-b .hero__mark sup{ font-size:.8em; vertical-align:.45em; margin-left:.08em; font-weight:500; }
@media (min-width:900px){ .is-g .bcards:has(.bcard:nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* ページ内リンクの飛び先：英字の見出しまで固定ヘッダーに隠れないように */
.ttl__ja[id]{ scroll-margin-top:calc(var(--header-h) + 80px); }

/* ===== よくあるご質問（AIO）：質問の一覧・答え・比較表 ===== */
.fl{ border-top:1px solid var(--ink); }
.fl li a{ display:grid; grid-template-columns:44px minmax(0,1fr) 42px; align-items:center; gap:12px; min-height:72px; padding-block:12px; border-bottom:1px solid var(--line-strong); color:var(--ink); text-decoration:none; }
.fl__no{ font-family:var(--f-label); font-size:16px; letter-spacing:.06em; display:grid; place-items:center; width:44px; height:44px; background:var(--ink); color:#fff; border-radius:2px; }
.fl__q{ font-family:var(--f-min); font-weight:500; font-size:17px; line-height:1.7; letter-spacing:.04em; word-break:keep-all; overflow-wrap:anywhere; }
.fl li a:hover .arrow-c{ background:var(--ink); border-color:var(--ink); color:#fff; }
.fl--idx{ margin-bottom:56px; }
.fl--idx li a{ grid-template-columns:44px minmax(0,1fr); min-height:64px; }

.ans{ background:var(--white); border-top:3px solid var(--ink); padding:24px 20px 16px; display:grid; gap:14px; justify-items:center; }
.sec--white .ans{ background:var(--ivory); }
.ans__q{ justify-self:stretch; display:grid; grid-template-columns:32px minmax(0,1fr); gap:8px; align-items:baseline; font-family:var(--f-min); font-weight:500; font-size:19px; line-height:1.6; color:var(--ink); word-break:keep-all; overflow-wrap:anywhere; }
.ans__q span{ font-family:var(--f-disp); font-size:28px; line-height:1; }
.ans__a{ justify-self:stretch; font-size:16px; line-height:2; word-break:normal; line-break:strict; text-align:justify; text-justify:inter-character; }

.faqs{ display:grid; }
.faq{ padding-block:44px; border-top:1px solid var(--line-strong); scroll-margin-top:calc(var(--header-h) + 16px); display:grid; gap:20px; }
.faq:first-child{ border-top:1px solid var(--ink); }
.faq__q{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:center; font-family:var(--f-min); font-weight:500; font-size:clamp(19px,2.4vw,23px); line-height:1.6; letter-spacing:.04em; color:var(--ink); word-break:keep-all; overflow-wrap:anywhere; }
.faq__no{ display:grid; place-items:center; width:44px; height:44px; background:var(--ink); color:#fff; font-family:var(--f-label); font-size:16px; border-radius:2px; }
.faq__a{ background:var(--white); padding:20px; font-size:16px; line-height:2; border-left:3px solid var(--ink); word-break:normal; line-break:strict; text-align:justify; text-justify:inter-character; }
.faq__more{ display:grid; gap:16px; }
.faq__more .ctr{ margin-top:8px; }
.faq__pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.faq__shop .btn{ width:100%; max-width:none; }
.faq__date{ text-align:center; margin-top:24px; }

.cmp-wrap{ max-width:100%; }
.cmp{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:16px; line-height:1.75; }
.cmp thead td{ width:5.5em; }
.cmp th,.cmp td{ padding:12px 6px; border-bottom:1px solid var(--line-strong); vertical-align:top; text-align:left; overflow-wrap:anywhere; word-break:normal; }
.cmp thead th{ padding-inline:2px; text-align:center; }
.cmp thead .brand{ width:100%; white-space:normal; font-size:16px; padding:4px 6px; }
.cmp tbody th{ color:var(--text-small); font-weight:400; }
@media (max-width:420px){ .cmp thead td{ width:4.6em; } .cmp th,.cmp td{ padding-inline:4px; } }

.faq__steps li{ display:grid; gap:4px; padding-block:14px; border-bottom:1px solid var(--line-strong); }
.faq__steps li:first-child{ border-top:1px solid var(--ink); }
.faq__steps b{ font-family:var(--f-min); font-weight:500; font-size:17px; color:var(--ink); }
.faq__steps span{ font-size:16px; line-height:1.9; word-break:normal; text-align:justify; }
.faq__menus{ display:grid; gap:28px; }
@media (min-width:768px){ .faq__menus{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.faq__menu{ display:grid; gap:10px; align-content:start; }
.faq__menu-h{ display:flex; }
.faq__menu .menu-list{ border-top-color:var(--accent-ink); }
.faq__ppl li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding-block:10px; border-bottom:1px solid var(--line-strong); font-size:16px; }
.faq__ppl a{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--f-min); font-size:18px; color:var(--accent-ink); }
.faq__ppl span{ color:var(--text-small); }
.faq__menu > .btn{ justify-self:stretch; max-width:none; }
.sec--tight{ padding-block:64px; }
@media (min-width:768px){ .sec--tight{ padding-block:88px; } }
/* 比較表：どの幅でも「項目名を上に1行・2店舗を左右に」 */
.cmp,.cmp thead,.cmp tbody{ display:block; }
.cmp tr{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:10px; border-bottom:1px solid var(--line-strong); padding-block:10px; }
.cmp thead tr{ border-bottom:0; padding-block:0 4px; }
.cmp thead td{ display:none; }
.cmp th,.cmp td{ display:block; border-bottom:0; padding:2px 0; }
.cmp thead th{ padding:0; }
.cmp tbody th{ grid-column:1 / -1; font-size:16px; letter-spacing:.06em; }
.cmp tbody td{ color:var(--ink); }
/* 答えの文章：数字（料金）の字間が広がらないよう両端揃えにしない */
.faq__a,.ans__a{ text-align:start; }
/* スマホ：質問の一覧を詰める（矢印は外し、質問文を2行以内に） */
@media (max-width:767px){
  .fl li a{ grid-template-columns:44px minmax(0,1fr); min-height:60px; padding-block:8px; gap:12px; }
  .fl .arrow-c{ display:none; }
  .fl__q{ font-size:16px; line-height:1.65; letter-spacing:.02em; }
  .sec--tight{ padding-block:52px; }
  .sec--tight .ttl{ margin-bottom:24px; }
  .sec--tight .ctr{ margin-top:20px; }
}
/* FAQ の注記の中のスタイリスト名：押しやすい高さに */
.faq__more .note a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; color:var(--accent-ink); }
/* 比較表：語の途中で改行しない（サイト共通の keep-all と <wbr> の区切りに戻す） */
.cmp th,.cmp td{ word-break:keep-all; overflow-wrap:normal; line-break:strict; }
.cmp th,.cmp td{ overflow-wrap:break-word; }
.faq__ppl .faq__src{ flex-basis:100%; font-size:16px; color:var(--text-small); }
/* 文中のスタイリスト名のリンク：押せる高さを 44px に（行の高さは変えない） */
.pick__staff a,.style-card__by a,.pro-note a,.dc__name a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; vertical-align:middle; }
.pick__cond{ display:block; font-size:16px; line-height:1.7; color:var(--text-small); font-family:var(--f-sans); font-weight:400; }
.faq__asrc{ margin-top:-8px; }
.ans .faq__asrc{ margin-top:-6px; justify-self:stretch; }