/* まゆとまつげ ことのは — 白い地に、細長く切った写真の帯と、細い線だけで組む */
:root {
  --ink: #4A3B35;
  --ink-2: color-mix(in srgb, #4A3B35 74%, #fff);
  --ink-3: color-mix(in srgb, #4A3B35 52%, #fff);
  --lav: #B8B3C7;
  --lav-2: color-mix(in srgb, #B8B3C7 55%, #fff);
  --lav-ink: color-mix(in srgb, #B8B3C7 62%, #4A3B35);
  --mist: #F4F3F7;
  --white: #fff;
  --en: "Tenor Sans", "Noto Sans JP", sans-serif;
  --ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --wrap: 1160px;
  --gut: clamp(20px, 5vw, 56px);
  --hd: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--ja); font-weight: 400;
  font-size: clamp(14.5px, 0.35vw + 13.3px, 16.5px);
  line-height: 1.95; letter-spacing: .04em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
p + p { margin-top: .9em; }
.body, .note, .qa dd, .qa dt, .ask p, .before li, .curl__how, .curl__who, .figure__note, .tl-mini__list span, .info td, .tl__txt, .tl__ttl, .brow__keys span, .way__small, .staff__list p, .rods p, .menu-table th { word-break: auto-phrase; }
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.5; letter-spacing: .06em; font-feature-settings: "palt"; text-wrap: balance; word-break: auto-phrase; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.en { font-family: var(--en); letter-spacing: .14em; font-weight: 400; }
.nb { white-space: nowrap; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- ラベル（英字＋細い横線） ---------- */
.label { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-family: var(--en); font-size: 11.5px; letter-spacing: .28em; color: var(--lav-ink); line-height: 1; }
.label::after { content: ""; width: 40px; height: 1px; background: var(--lav); }
.label--c { justify-content: center; }
.label--c::before { content: ""; width: 40px; height: 1px; background: var(--lav); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 50px; padding: 12px 30px; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); text-decoration: none; font-size: 14px; letter-spacing: .12em; line-height: 1.5;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn .arw { display: inline-block; width: 22px; height: 1px; background: currentColor; position: relative; transition: transform .35s var(--ease); }
.btn .arw::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 1px; background: currentColor; transform: rotate(35deg); transform-origin: right center; }
.btn:hover { background: var(--ink); color: var(--white); }
.btn:hover .arw { transform: translateX(4px); }
.btn--fill { background: var(--ink); color: var(--white); }
.btn--fill:hover { background: color-mix(in srgb, var(--ink) 86%, #000); }
.btn--sm { min-height: 40px; padding: 8px 20px; font-size: 13px; }
.tlink { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 14px; letter-spacing: .1em; padding: 6px 0; border-bottom: 1px solid var(--lav); }
.tlink .arw { display: inline-block; width: 18px; height: 1px; background: currentColor; position: relative; transition: transform .35s var(--ease); }
.tlink .arw::after { content: ""; position: absolute; right: 0; top: 0; width: 6px; height: 1px; background: currentColor; transform: rotate(35deg); transform-origin: right center; }
.tlink:hover .arw { transform: translateX(4px); }

/* ---------- ヘッダー ---------- */
.hd { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid color-mix(in srgb, var(--lav) 45%, #fff); }
.hd__in { display: flex; align-items: center; gap: 18px; height: var(--hd); width: min(100% - var(--gut) * 2, 1320px); margin-inline: auto; }
.brand { display: block; line-height: 0; text-decoration: none; }
.logo { display: block; height: auto; }
.logo--hd { width: 150px; }
.logo__ink { fill: var(--ink); }
.logo__arc { fill: none; stroke: var(--lav-ink); stroke-width: 34; stroke-linecap: round; }
.logo__ja { fill: var(--ink-2); font-family: var(--ja); font-weight: 300; font-size: 330px; }
.demo { align-self: center; margin-left: -6px; padding: 1px 5px 0; border: 1px solid var(--lav); color: var(--lav-ink); font-family: var(--en); font-size: 8.5px; letter-spacing: .16em; line-height: 1.6; }
.gnav { margin-left: auto; }
.gnav ul { display: flex; gap: clamp(16px, 1.8vw, 30px); margin: 0; padding: 0; list-style: none; }
.gnav a { position: relative; display: block; padding: 6px 0; text-decoration: none; font-size: 13.5px; letter-spacing: .1em; color: var(--ink-2); transition: color .3s; }
.gnav a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 1px; margin-left: -9px; background: var(--ink); transform: scaleX(0); transition: transform .35s var(--ease); }
.gnav a:hover { color: var(--ink); }
.gnav a:hover::after, .gnav a[aria-current="page"]::after { transform: scaleX(1); }
.gnav a[aria-current="page"] { color: var(--ink); }
.hd__hours { margin: 0 0 0 clamp(8px, 1.4vw, 22px); font-size: 12px; line-height: 1.5; letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.hd__hours .en { font-size: 12.5px; letter-spacing: .08em; }
.hd__btn { min-height: 38px; padding: 6px 20px; font-size: 13px; }
.menu { display: none; }
.gnav__extra { display: none; }

@media (max-width: 1100px) {
  .hd__hours { display: none; }
}
@media (max-width: 960px) {
  :root { --hd: 64px; }
  .logo--hd { width: 124px; }
  .hd__btn { margin-left: auto; min-height: 36px; padding: 4px 14px; }
  .menu { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; }
  .menu__bars { position: relative; display: block; width: 24px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; transition: transform .3s var(--ease); }
  .menu__label { font-family: var(--en); font-size: 9px; letter-spacing: .2em; line-height: 1; }
  .gnav { position: fixed; inset: var(--hd) 0 auto 0; display: none; margin: 0; padding: 18px var(--gut) 34px; background: var(--white); border-bottom: 1px solid var(--lav-2); }
  .is-menu .gnav { display: block; }
  .gnav ul { flex-direction: column; gap: 0; }
  .gnav li { border-bottom: 1px solid color-mix(in srgb, var(--lav) 40%, #fff); }
  .gnav a { padding: 15px 0; font-size: 15px; }
  .gnav a::after { left: auto; right: 0; bottom: 50%; margin: 0; }
  .gnav__extra { display: block; margin-top: 18px; font-size: 13px; color: var(--ink-2); }
}

/* ---------- 区画 ---------- */
.sec { padding-block: clamp(76px, 10vw, 140px); }
.sec--mist { background: var(--mist); }
.sec + .sec:not(.sec--mist) { border-top: 0; }
.h2 { font-size: clamp(25px, 1.7vw + 18px, 38px); }
.h3 { font-size: clamp(19px, .6vw + 16px, 23px); margin-bottom: 18px; }
.lead { color: var(--ink); }
.note { margin-top: 18px; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.body { color: var(--ink); max-width: 36em; }
.body--w { max-width: 40em; }

/* ---------- 写真の帯（1:4・角は丸めない） ---------- */
.band { position: relative; overflow: hidden; background: var(--mist); }
.band img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; }
.band--3 img { aspect-ratio: 3.2 / 1; }
.band__veil { display: none; }
@media (max-width: 640px) {
  .band img { aspect-ratio: 2.6 / 1; }
  .band--3 img { aspect-ratio: 2.2 / 1; }
}

/* ---------- 最初の画面 ---------- */
.hero { padding: clamp(48px, 6vw, 80px) 0 0; text-align: center; }
.hero .label { margin-bottom: 26px; }
.hero__h { font-size: clamp(27px, 2.6vw + 16px, 52px); letter-spacing: .1em; line-height: 1.55; }
.hero__band { width: min(80%, 1280px); margin: clamp(34px, 4vw, 52px) auto 0; }
.hero__txt { width: min(100% - var(--gut) * 2, 30em); margin: clamp(28px, 3vw, 40px) auto 0; color: var(--ink); text-wrap: balance; word-break: auto-phrase; }
.hero__cta { margin-top: 28px; }
.ribbon { margin-top: clamp(56px, 7vw, 96px); background: var(--mist); }
.ribbon ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 0 auto; padding: 18px var(--gut); list-style: none; font-size: 13px; letter-spacing: .08em; color: var(--ink-2); }
.ribbon li { padding: 0 clamp(14px, 2vw, 30px); border-left: 1px solid var(--lav); line-height: 1.6; }
.ribbon li:first-child { border-left: 0; }
.ribbon .en { font-size: 15px; letter-spacing: .06em; color: var(--ink); margin-left: .4em; }
.ribbon__tax { color: var(--ink-3); }
@media (max-width: 640px) {
  .hero__band { width: calc(100% - var(--gut) * 2); }
  .ribbon ul { flex-direction: column; align-items: center; }
  .ribbon li { border-left: 0; }
}

/* ---------- トップ：はじめての方へ（文と小さな図を左右に） ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.split--r { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split__txt .h2 { margin-bottom: 26px; }
.split__txt .btn { margin-top: 34px; }
@media (max-width: 860px) { .split, .split--r { grid-template-columns: 1fr; } }

/* ---------- トップ：まつげ・眉（帯が左右の端に寄る） ---------- */
.menu-sec { overflow: hidden; }
.menu-sec--l { padding-top: 0; }
.menu-sec__band { width: calc(50vw + min(50vw - var(--gut), var(--wrap) / 2) - 9vw); }
.menu-sec--l .menu-sec__band { margin-right: auto; }
.menu-sec--r .menu-sec__band { margin-left: auto; }
.menu-sec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(36px, 4.5vw, 60px); align-items: start; }
.menu-sec--r .menu-sec__grid > :first-child { order: 2; }
.menu-sec__head .h2 { margin-bottom: 22px; }
.menu-sec__head .tlink { margin-top: 26px; }
@media (max-width: 860px) {
  .menu-sec__band { width: calc(100% - var(--gut)); }
  .menu-sec__grid { grid-template-columns: 1fr; }
  .menu-sec--r .menu-sec__grid > :first-child { order: 0; }
}

/* 値段の一覧（Tenor の数字・右に税込） */
.prices { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lav-2); }
.prices li { display: flex; align-items: baseline; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--lav-2); }
.prices__name { flex: 1; font-size: 14.5px; letter-spacing: .06em; }
.prices__yen { font-family: var(--en); font-size: clamp(19px, .5vw + 17px, 23px); letter-spacing: .04em; }
.prices__yen small { font-family: var(--ja); font-size: 12px; margin-left: 2px; letter-spacing: .04em; }
.tax { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }

/* ---------- 施術のあと（うすい地） ---------- */
.care-top .split__txt .body { max-width: 30em; }

/* ---------- サロン（帯＋右に寄せた文） ---------- */
.salon-top__txt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(36px, 4.5vw, 60px); }
.salon-top__txt .btn { margin-top: 30px; }
@media (max-width: 860px) { .salon-top__txt { grid-template-columns: 1fr; } }

/* ---------- よく聞かれること ---------- */
.qa { margin: 0; border-top: 1px solid var(--lav-2); }
.qa__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(24px, 5vw, 72px); padding: 26px 0; border-bottom: 1px solid var(--lav-2); }
.qa dt { position: relative; padding-left: 30px; font-weight: 400; letter-spacing: .05em; }
.qa dt::before { content: "Q"; position: absolute; left: 0; top: .05em; font-family: var(--en); color: var(--lav-ink); font-size: 15px; }
.qa dd { margin: 0; color: var(--ink-2); }
.qa__more { margin-top: 30px; }
.qa-head { margin-bottom: 40px; }
@media (max-width: 760px) { .qa__item { grid-template-columns: 1fr; } .qa dd { padding-left: 30px; } }

/* ---------- 場所の表 ---------- */
.info { width: 100%; border-collapse: collapse; border-top: 1px solid var(--lav-2); }
.info th, .info td { padding: 17px 4px; border-bottom: 1px solid var(--lav-2); text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.8; }
.info th { width: 10em; font-weight: 400; color: var(--ink-2); letter-spacing: .1em; }
@media (max-width: 560px) { .info th { width: 6.6em; } }
.place { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.place .btn { margin-top: 30px; }
@media (max-width: 860px) { .place { grid-template-columns: 1fr; } }

/* ---------- フッター ---------- */
.ft { padding: clamp(64px, 8vw, 100px) 0 30px; background: var(--mist); color: var(--ink-2); font-size: 13.5px; line-height: 1.9; }
.ft__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 96px); }
.logo--ft { width: 168px; margin-bottom: 26px; }
.ft__nav ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 48px; margin: 0; padding: 0; list-style: none; }
.ft__nav a { text-decoration: none; letter-spacing: .08em; }
.ft__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ft__copy { margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--lav-2); font-family: var(--en); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.ft__copy span { font-family: var(--ja); letter-spacing: .08em; }
@media (max-width: 760px) { .ft__in { grid-template-columns: 1fr; } .ft__nav ul { grid-template-columns: 1fr 1fr; gap: 6px 20px; } }

/* ---------- 下層ページの頭 ---------- */
.ph { padding: clamp(56px, 7vw, 96px) 0 0; }
.ph__h { font-size: clamp(30px, 2.4vw + 20px, 50px); letter-spacing: .1em; }
.ph__band { margin-top: clamp(36px, 4.5vw, 60px); }
.ph-sub { margin-top: 18px; color: var(--ink-2); }

/* 下層の本文の型：左に見出し、右に文 */
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px clamp(28px, 5vw, 80px); align-items: start; }
.row > .h2 { position: sticky; top: calc(var(--hd) + 30px); }
@media (max-width: 860px) { .row { grid-template-columns: 1fr; } .row > .h2 { position: static; margin-bottom: 8px; } }

.figure { margin: 40px 0 0; }
.figure__h { margin: 0 0 20px; font-size: 15px; letter-spacing: .14em; color: var(--ink-2); font-weight: 400; }
.figure__note { margin-top: 18px; font-size: 13px; color: var(--ink-2); }

/* 最初の15分：聞くことの札 */
.asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border: 1px solid var(--lav); }
.ask { position: relative; padding: 30px 26px 30px; }
.ask + .ask { border-left: 1px solid var(--lav); }
.ask__h { margin: 0 0 12px; font-size: 15.5px; font-weight: 400; letter-spacing: .1em; }
.ask__h::after { content: ""; display: block; width: 24px; height: 1px; margin-top: 12px; background: var(--lav); }
.ask p { font-size: 14px; color: var(--ink-2); line-height: 1.85; }
@media (max-width: 760px) { .asks { grid-template-columns: 1fr; } .ask + .ask { border-left: 0; border-top: 1px solid var(--lav); } }

/* 来る前に（1つずつ、細い線で区切る） */
.before { margin: 0; padding: 0; list-style: none; }
.before li { padding: 20px 0 20px 26px; border-bottom: 1px solid var(--lav-2); position: relative; }
.before li:first-child { border-top: 1px solid var(--lav-2); }
.before li::before { content: ""; position: absolute; left: 0; top: calc(20px + .95em); width: 10px; height: 1px; background: var(--lav-ink); }

/* LINE の区画（6ページで1か所だけ） */
.consult { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 30px clamp(28px, 5vw, 80px); align-items: center; padding: clamp(36px, 5vw, 64px); background: var(--white); border: 1px solid var(--lav-2); }
.consult__act { text-align: center; }
.consult__small { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.bubble { width: 17px; height: 15px; flex: none; }
@media (max-width: 860px) { .consult { grid-template-columns: 1fr; } .consult__act { text-align: left; } }
@media (max-width: 480px) { .consult { padding: 28px 22px; } .consult .btn { padding: 12px 16px; gap: 10px; font-size: 13.5px; letter-spacing: .06em; } }

/* 料金の表 */
.menu-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink-3); }
.menu-table th, .menu-table td { padding: 18px 6px; border-bottom: 1px solid var(--lav-2); text-align: left; font-weight: 400; vertical-align: baseline; }
.menu-table thead th { padding-block: 12px; font-size: 12px; letter-spacing: .12em; color: var(--ink-2); }
.menu-table .t, .menu-table .y { text-align: right; white-space: nowrap; }
.menu-table td.t { font-family: var(--en); font-size: 15px; letter-spacing: .06em; color: var(--ink-2); width: 6em; }
.menu-table td.t small, .menu-table td.y small { font-family: var(--ja); font-size: 12px; }
.menu-table td.y { font-family: var(--en); font-size: clamp(18px, .4vw + 16px, 21px); width: 7.5em; }
@media (max-width: 560px) { .menu-table th, .menu-table td { padding-inline: 2px; font-size: 14px; } .menu-table td.t { width: 4.4em; } .menu-table td.y { width: 6em; } }

/* 来る前の2〜3週間（大きめの見出しの帯） */
.wait { text-align: center; }
.wait .h2 { margin-bottom: 26px; }
.wait .body { margin-inline: auto; text-align: left; max-width: 32em; }

/* 夜と次の日（2列） */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--lav); }
.pair > div { padding: 40px clamp(0px, 3vw, 44px) 10px 0; }
.pair > div + div { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--lav-2); }
.pair .h2 { margin-bottom: 20px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } .pair > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--lav-2); } }

/* 店の名前 */
.name-sec { text-align: center; }
.name-sec__word { font-family: var(--en); font-size: clamp(40px, 5vw + 12px, 88px); letter-spacing: .2em; line-height: 1; color: var(--ink); margin: 0 0 26px; padding-left: .2em; }
.name-sec .h2 { margin-bottom: 30px; }
.name-sec .body { margin-inline: auto; max-width: 30em; text-align: left; }

/* スタッフ */
.staff { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.staff__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lav-2); }
.staff__list li { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px 20px; padding: 24px 0; border-bottom: 1px solid var(--lav-2); }
.staff__name { font-size: 18px; letter-spacing: .14em; }
.staff__name small { display: block; font-size: 12px; color: var(--ink-2); letter-spacing: .1em; }
.staff__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 760px) { .staff { grid-template-columns: 1fr; } .staff__list li { grid-template-columns: 1fr; } .staff__photo { width: 72%; margin-left: auto; } }

/* ご予約の2つの札 */
.ways { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--lav); margin-top: 34px; }
.way { padding: 30px clamp(22px, 3vw, 40px); }
.way + .way { border-left: 1px solid var(--lav); }
.way__h { margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; color: var(--ink-2); font-weight: 400; }
.way__big { font-family: var(--en); font-size: clamp(22px, 1vw + 18px, 28px); letter-spacing: .06em; line-height: 1.4; }
.way__big--ja { font-family: var(--ja); font-weight: 300; font-size: clamp(19px, .6vw + 16px, 22px); }
.way p.way__small { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.ways-act { margin-top: 30px; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } .way + .way { border-left: 0; border-top: 1px solid var(--lav); } }

.route { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 60px); align-items: start; margin-top: 40px; }
.route__photo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 640px) { .route { grid-template-columns: 1fr 34%; align-items: start; } }

.next-links { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: flex-end; padding-block: 50px; border-top: 1px solid var(--lav-2); }

/* =========================================================
   図解 — こげ茶の1pxの線と、ラベンダーグレーのうすい面だけ
   ========================================================= */
.dg { color: var(--ink); }
.dg svg { display: block; overflow: visible; }
.dg .ln { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dg .ln--soft { stroke: var(--ink-3); }
.dg .ln--lav { stroke: var(--lav-ink); }
.dg .dot { stroke: var(--lav-ink); stroke-dasharray: 2 4; }
.dg .face { fill: var(--lav-2); stroke: none; }
.dg .fill-ink { fill: var(--ink); stroke: none; }
.dg .num { font-family: var(--en); }

/* L-1 カールの選び方 */
.curls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lav); border-bottom: 1px solid var(--lav); }
.curl { padding: 26px clamp(10px, 2vw, 28px) 28px; }
.curl + .curl { border-left: 1px solid var(--lav-2); }
.curl svg { width: 100%; max-width: 230px; margin: 0 auto 14px; aspect-ratio: 200 / 130; }
.curl__name { margin: 0 0 6px; font-size: 18px; letter-spacing: .14em; font-weight: 300; }
.curl__how { font-size: 14px; }
.curl__who { margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.rods { display: grid; grid-template-columns: auto 1fr; gap: 18px 36px; align-items: center; padding: 26px clamp(10px, 2vw, 28px) 4px; }
.rods svg { width: 190px; aspect-ratio: 190 / 64; }
.rods p { font-size: 14px; }
@media (max-width: 760px) {
  .curls { grid-template-columns: 1fr; }
  .curl { display: grid; grid-template-columns: 42% 1fr; gap: 0 18px; align-items: center; padding: 20px 0; }
  .curl + .curl { border-left: 0; border-top: 1px solid var(--lav-2); }
  .curl svg { grid-row: span 3; margin: 0; }
  .rods { grid-template-columns: 1fr; padding-inline: 0; }
}

/* L-2 次に来る時期 */
.wk { --pad: 18px; }
.wk__lashes { position: relative; height: 74px; margin: 0 var(--pad) 6px calc(var(--rowh) + var(--pad)); }
.wk__lash { position: absolute; bottom: 0; width: 70px; transform: translateX(-50%); text-align: center; }
.wk__lash svg { width: 58px; height: 48px; margin: 0 auto; }
.wk__lash span { display: block; font-size: 10.5px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; }
.wk__lash span b { font-weight: 400; font-family: var(--en); margin-right: .5em; }
@media (max-width: 640px) { .wk__lashes { height: 84px; } .wk__lash b { display: block; margin: 0; } }
.wk__lash:first-child { transform: translateX(-20%); }
.wk { --rowh: 8.5em; }
.wk__row { display: grid; grid-template-columns: var(--rowh) 1fr; align-items: center; min-height: 70px; border-top: 1px solid var(--lav-2); }
.wk__row:last-of-type { border-bottom: 1px solid var(--lav-2); }
.wk__name { font-size: 13.5px; letter-spacing: .08em; }
.wk__track { position: relative; height: 70px; margin: 0 var(--pad); }
.wk__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-3); }
.wk__range { position: absolute; top: calc(50% - 9px); height: 18px; background: var(--lav); opacity: .55; transform-origin: left center; }
.wk__rlabel { position: absolute; top: calc(50% + 13px); font-size: 11.5px; line-height: 1.3; white-space: nowrap; color: var(--ink); }
.wk__dot { position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); }
.wk__dlabel { position: absolute; left: -4px; top: calc(50% - 30px); font-size: 11.5px; }
.wk__scale { position: relative; height: 34px; margin: 0 var(--pad) 0 calc(var(--rowh) + var(--pad)); }
.wk__tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--en); font-size: 12.5px; color: var(--ink-2); }
.wk__tick::before { content: ""; display: block; width: 1px; height: 6px; margin: 0 auto 2px; background: var(--ink-3); }
.wk__unit { position: static; display: block; text-align: right; margin: 0 var(--pad) 0 0; font-size: 11px; color: var(--ink-2); }
@media (max-width: 640px) {
  .wk { --rowh: 0px; --pad: 14px; }
  .wk__row { grid-template-columns: 1fr; padding-top: 10px; }
  .wk__name { font-size: 13px; }
  .wk__lash span { font-size: 10px; }
}
.wk--mini { --rowh: 7em; }
@media (max-width: 640px) { .wk--mini { --rowh: 0px; } }

/* L-3 はじめての日の75分（縦の時間の帯） */
.tl { position: relative; display: grid; grid-template-columns: 4.6em 1fr; max-width: 720px; }
.tl__step { display: contents; }
.tl__min { position: relative; padding-top: 0; font-family: var(--en); font-size: 14px; color: var(--ink-2); line-height: 1; transform: translateY(-.5em); }
.tl__min--end { grid-column: 1; }
.tl__box { position: relative; min-height: calc(var(--m) * 7.2px); padding: 16px 22px; border-top: 1px solid var(--ink-3); border-left: 1px solid var(--ink-3); }
.tl__box--work { background: color-mix(in srgb, var(--lav) 40%, #fff); }
.tl__box--soft { background: var(--mist); }
.tl__end { grid-column: 2; border-top: 1px solid var(--ink-3); height: 0; }
.tl__range { display: block; font-family: var(--en); font-size: 12px; letter-spacing: .1em; color: var(--ink-2); line-height: 1.5; }
.tl__ttl { display: block; font-size: 15.5px; letter-spacing: .08em; line-height: 1.6; }
.tl__txt { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; margin-top: 2px; }
.tl__eye { position: absolute; right: 22px; bottom: 18px; text-align: center; font-size: 12px; color: var(--ink); }
.tl__eye svg { width: 92px; height: 34px; margin: 0 auto 6px; }
.tl__box--short { min-height: 48px; padding-block: 10px; }
.tl__box--short .tl__range { display: inline; margin-right: 12px; }
.tl__box--short .tl__ttl { display: inline; }
@media (max-width: 640px) {
  .tl { grid-template-columns: 3.4em 1fr; }
  .tl__box { min-height: calc(var(--m) * 4.6px); padding: 12px 14px; }
  .tl__box--work { padding-bottom: 92px; }
  .tl__eye { right: auto; left: 14px; bottom: 14px; }
}

/* 小さな L-3（トップ用・横の帯） */
.tl-mini__bar { display: flex; height: 44px; border: 1px solid var(--ink-3); }
.tl-mini__seg { position: relative; flex: var(--m) 0 0; border-left: 1px solid var(--ink-3); transform-origin: left center; }
.tl-mini__seg:first-child { border-left: 0; }
.tl-mini__seg--soft { background: var(--mist); }
.tl-mini__seg--work { background: color-mix(in srgb, var(--lav) 45%, #fff); }
.tl-mini__ticks { position: relative; height: 26px; margin-top: 6px; }
.tl-mini__ticks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--en); font-size: 12px; color: var(--ink-2); }
.tl-mini__ticks span:first-child { transform: none; }
.tl-mini__ticks span:last-child { transform: translateX(-100%); }
.tl-mini__list { margin: 12px 0 0; padding: 0; list-style: none; }
.tl-mini__list li { display: grid; grid-template-columns: 6.4em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lav-2); font-size: 14px; }
.tl-mini__list .en { font-size: 12.5px; color: var(--ink-2); letter-spacing: .06em; padding-top: .2em; }
.tl-mini__list i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 1px solid var(--ink-3); vertical-align: 1px; }
.tl-mini__list i.soft { background: var(--mist); }
.tl-mini__list i.work { background: color-mix(in srgb, var(--lav) 45%, #fff); }

/* L-4 眉の形の決め方 */
.brow { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 30px clamp(24px, 4vw, 56px); align-items: center; }
.brow svg { width: 100%; aspect-ratio: 400 / 290; }
.brow__keys { margin: 0; padding: 0; list-style: none; counter-reset: k; border-top: 1px solid var(--lav-2); }
.brow__keys li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--lav-2); }
.brow__keys b { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--en); font-weight: 400; font-size: 12px; line-height: 1; }
.brow__keys strong { font-weight: 400; font-size: 15px; letter-spacing: .1em; }
.brow__keys span { font-size: 13.5px; color: var(--ink-2); }
.dg .pt { fill: var(--white); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dg .ptn { font-family: var(--en); font-size: 13px; fill: var(--ink); text-anchor: middle; }
.dg .tag { font-family: var(--ja); font-size: 11px; fill: var(--ink-2); }
@media (max-width: 760px) { .brow { grid-template-columns: 1fr; } }

/* =========================================================
   動き（transform と opacity だけ。JS がクラスを付けたときだけ隠す）
   ========================================================= */
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes veil { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

.js .band__veil { display: block; position: absolute; inset: 0; background: var(--white); transform: translateX(101%); }
.js .band.is-in .band__veil { animation: veil 1.9s var(--ease) both; }
.js .band.is-in img { animation: settle 2.6s var(--ease) both; }
.js .sec--mist .band__veil { background: var(--mist); }

.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.is-in { opacity: 1; transform: none; }

.js .hero .label, .js .hero__h, .js .hero__txt, .js .hero__cta, .js .ph .label, .js .ph__h, .js .ph-sub { animation: up 1s var(--ease) both; }
.js .hero__h, .js .ph__h { animation-delay: .12s; }
.js .hero__txt { animation-delay: 1.1s; }
.js .hero__cta { animation-delay: 1.25s; }
.js .ph-sub { animation-delay: .24s; }

/* 図の動き */
.js .dg .lash { transform-box: view-box; transition: transform 1.3s var(--ease); transition-delay: var(--d, 0s); }
.js .dg:not(.is-in) .lash { transform: rotate(var(--from, 24deg)); }
.js .dg .wk__range { transition: transform 1.2s var(--ease); transition-delay: var(--d, .3s); }
.js .dg:not(.is-in) .wk__range { transform: scaleX(0); }
.js .dg .wk__rlabel, .js .dg .wk__lash, .js .dg .tl__step > *, .js .dg .brow__keys li, .js .dg .pop, .js .dg .tl-mini__list li { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .dg:not(.is-in) .wk__rlabel, .js .dg:not(.is-in) .tl-mini__list li, .js .dg:not(.is-in) .brow__keys li { opacity: 0; transform: translateY(8px); }
.js .dg:not(.is-in) .wk__lash { opacity: 0; }
.js .dg:not(.is-in) .tl__step > * { opacity: 0; transform: translateY(10px); }
.js .dg .pop { transform-box: fill-box; transform-origin: center; }
.js .dg:not(.is-in) .pop { opacity: 0; transform: scale(.3); }
.js .dg .tl-mini__seg { transition: transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .dg:not(.is-in) .tl-mini__seg { transform: scaleX(0); }
.js .dg .fadeln { transition: opacity 1.2s var(--ease); transition-delay: var(--d, .6s); }
.js .dg:not(.is-in) .fadeln { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .dg .lash, .js .dg .wk__range, .js .dg .wk__rlabel, .js .dg .pop, .js .dg .tl-mini__seg, .js .dg .tl-mini__list li, .js .dg .brow__keys li, .js .dg .tl__box { opacity: 1 !important; transform: none !important; }
  .js .dg .wk__lash, .js .dg .fadeln, .js .dg .tl__min { opacity: 1 !important; }
  .js .band__veil { display: none !important; }
}