@charset "UTF-8";
/* niau group｜pages ── ページ固有ブロック */

/* ========== HUB：円形回転テキスト（現行 chorule-hair.com の作法を継承） ========== */
.circ{
  position:absolute;z-index:1;right:clamp(20px,5vw,84px);top:96px;
  width:clamp(112px,11vw,148px);aspect-ratio:1;opacity:.9;
}
.circ svg{width:100%;height:100%;animation:circ-spin 26s linear infinite}
.circ text{font-family:var(--ff-en);font-size:9.4px;letter-spacing:.28em;fill:rgba(255,255,255,.92)}
@keyframes circ-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .circ svg{animation:none} }
@media (max-width:700px){ .circ{display:none} }

/* ========== HUB：系統ナビ ========== */
.route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){ .route{grid-template-columns:minmax(0,1fr)} }
.route__i{
  display:flex;flex-direction:column;gap:8px;
  padding:26px 24px;border:1px solid var(--line);border-radius:2px;background:#fff;
  transition:border-color .3s var(--ease-io),transform .3s var(--ease);
}
.route__i:hover{transform:none}
.route__i--salon:hover{border-color:var(--pink)}
.route__i--studio:hover{border-color:var(--studio)}
.route__i--recruit:hover{border-color:var(--ink)}
.route__en{font-family:var(--ff-en);font-size:26px;line-height:1.1}
.route__ja{font-size:14px;color:var(--ink-2)}
.route__go{margin-top:6px;font-size:12px;letter-spacing:.14em;color:var(--ink-3)}

/* ========== SALON：クーポン（HPB連動枠） ========== */
.coupons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){ .coupons{grid-template-columns:minmax(0,1fr)} }
.coupon{
  border:1px solid var(--line);border-radius:2px;background:#fff;
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;
}
.coupon__badge{
  align-self:flex-start;font-size:11px;letter-spacing:.12em;
  background:var(--pink-soft);color:var(--pink-dd);padding:4px 12px;border-radius:2px;
}
.coupon__n{font-size:15.5px;font-weight:500;line-height:1.75}
.coupon__p{font-family:var(--ff-en);font-size:30px;color:var(--pink);line-height:1.1}
.coupon__p small{font-family:var(--ff-ja);font-size:.4em;color:var(--ink-2);margin-left:5px}
.coupon__src{font-size:11.5px;color:var(--ink-3);margin-top:auto;padding-top:8px}

/* データ差し込み位置を明示する枠（モック用の注記） */
.api-note{
  border:1px dashed var(--pink);border-radius:2px;
  padding:12px 16px;font-size:12px;color:var(--pink-dd);
  background:var(--pink-soft);line-height:1.8;
}

/* ========== SALON：スタイリスト ========== */
.staff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:760px){ .staff{grid-template-columns:repeat(2,minmax(0,1fr))} }
.staff__i{text-align:center;border:1px solid var(--line);padding:16px 16px 22px;background:#fff}
.staff__i img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0;margin:0 0 16px;background:var(--paper-2)}
.staff__n{font-family:var(--ff-ja-disp);font-weight:500;font-size:18px;letter-spacing:.08em;order:2}
.staff__r{font-size:11.5px;color:var(--ink-2);letter-spacing:.1em;margin-bottom:6px}
.staff__d{font-size:12.5px;color:var(--ink-2);margin-top:8px;line-height:1.8}

/* ========== SALON / STUDIO：情報テーブル ========== */
.info{border-top:1px solid var(--line)}
.info__r{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.info__k{font-size:13px;color:var(--ink-3);letter-spacing:.08em}
.info__v{font-size:14.5px;line-height:1.9}
@media (max-width:560px){
  .info__r{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ========== STUDIO：プラン ========== */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
.plan{
  border:1px solid var(--line);border-radius:2px;background:#fff;padding:24px 20px;
  transition:border-color .3s var(--ease-io),transform .3s var(--ease);
}
.plan:hover{border-color:var(--studio)}
.plan__en{font-family:var(--ff-en);font-size:13px;letter-spacing:.16em;color:var(--studio-d);display:block}
.plan__n{font-family:var(--ff-ja-disp);font-weight:500;font-size:17.5px;margin-top:8px;line-height:1.55}
.plan__d{font-size:12.5px;color:var(--ink-2);margin-top:9px;line-height:1.85}

/* ========== STUDIO：IG ========== */
.ig-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.ig-head__n{font-size:15px;font-weight:500}
.ig-head__f{font-family:var(--ff-en);font-size:22px;color:var(--studio-d)}
.ig-head__f small{font-family:var(--ff-ja);font-size:.5em;color:var(--ink-2);margin-left:4px}
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@media (max-width:900px){ .ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ig-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0}
.ig-ph{
  aspect-ratio:1;border-radius:0;
  border:1px dashed var(--studio);background:rgba(110,140,134,.07);
  display:flex;align-items:center;justify-content:center;
}
.ig-ph span{font-size:11.5px;color:var(--ink-2);letter-spacing:.08em}

/* ========== RECRUIT ========== */
.paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){ .paths{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .paths{grid-template-columns:minmax(0,1fr)} }
.path{
  border:1px solid var(--line);border-radius:2px;background:#fff;padding:26px 22px;
  display:flex;flex-direction:column;gap:9px;
  transition:border-color .3s var(--ease-io),transform .3s var(--ease);
}
.path:hover{border-color:var(--pink)}
.path__en{font-family:var(--ff-en);font-size:12px;letter-spacing:.18em;color:var(--pink-d)}
.path__n{font-family:var(--ff-ja-disp);font-weight:600;font-size:18px;line-height:1.55}
.path__p{font-family:var(--ff-en);font-size:23px;color:var(--ink)}
.path__p small{font-family:var(--ff-ja);font-size:.5em;color:var(--ink-2);margin-left:4px}
.path__d{font-size:12.5px;color:var(--ink-2);line-height:1.85}
.path__go{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--pink-d);letter-spacing:.08em}

/* キャリア段階フロー */
.flow{display:flex;gap:26px;flex-wrap:wrap}
.flow__s{
  flex:1;min-width:min(100%,160px);position:relative;text-align:center;
  border:1px solid var(--line);border-radius:2px;background:#fff;padding:24px 16px;
}
.flow__s:not(:last-child)::after{
  content:"";position:absolute;right:-22px;top:50%;
  width:17px;height:17px;border-top:2px solid var(--pink);border-right:2px solid var(--pink);
  transform:translateY(-50%) rotate(45deg);
}
.flow__k{font-family:var(--ff-en);font-size:11.5px;letter-spacing:.16em;color:var(--pink-d)}
.flow__t{font-family:var(--ff-ja-disp);font-weight:500;font-size:17px;margin:8px 0 6px}
.flow__d{font-size:12.5px;color:var(--ink-2);line-height:1.8}
@media (max-width:860px){
  .flow{flex-direction:column;gap:26px}
  .flow__s:not(:last-child)::after{right:50%;top:auto;bottom:-22px;transform:translateX(50%) rotate(135deg)}
}

/* 3つの財布 */
.wallets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){ .wallets{grid-template-columns:minmax(0,1fr)} }
.wallet{border:1px solid var(--line);border-radius:2px;background:#fff;padding:28px 22px;text-align:center}
.wallet__n{font-family:var(--ff-en);font-size:34px;color:var(--pink)}
.wallet__t{font-family:var(--ff-ja-disp);font-weight:500;font-size:17px;margin:8px 0 9px}
.wallet__d{font-size:12.5px;color:var(--ink-2);line-height:1.85}

/* 職安法・未記載項目の可視化（実装時に必ず埋める行） */
.js-req-todo{background:var(--pink-soft)}
th.js-req-todo{color:var(--pink-dd)}
td.js-req-todo{color:var(--pink-dd);font-weight:500}

/* 数値の出典注記（景表法対応） */
.src{
  margin-top:18px;padding:14px 18px;border-radius:2px;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:12px;color:var(--ink-2);line-height:1.9;
}
.sec--dark .src{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:var(--ink-paper-2)}

/* スタッフカードは「役職（小）→ 氏名（明朝）」の順で見せる（所沢店の作法） */
.staff__i{display:flex;flex-direction:column}
.staff__i img{order:0}
.staff__r{order:1}
.staff__n{order:2}
.staff__d{order:3;margin-top:10px}

/* メニュー行：現行は交互のグレー帯＋右端に価格 */
.menu-rows{border-top:1px solid var(--line)}
.menu-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:13px 16px;align-items:baseline}
.menu-row:nth-child(even){background:var(--paper-2)}
.menu-row__n{font-size:14.5px;font-weight:500}
.menu-row__d{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.menu-row__p{font-family:var(--ff-en);font-size:16px;white-space:nowrap}

/* ========== SIMULATOR（SALOWIN方式を4案比較へ拡張） ========== */
.sim{border:1px solid var(--line);background:#fff;padding:clamp(24px,3.2vw,40px)}
.sim__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:900px){ .sim__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .sim__grid{grid-template-columns:minmax(0,1fr)} }
.sim__f label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;letter-spacing:.04em}
.sim__f .u{display:flex;align-items:center;gap:8px}
.sim__f input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--ff-en);font-size:17px;text-align:right;background:var(--paper-2);color:var(--ink);
}
.sim__f input:focus{outline:2px solid var(--pink-d);outline-offset:1px;background:#fff}
.sim__f .un{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.sim__hint{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.75}

.sim__out{margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,34px)}
.sim__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:960px){ .sim__cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .sim__cards{grid-template-columns:minmax(0,1fr)} }
.simc{border:1px solid var(--line);padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px;background:#fff}
.simc.is-best{border-color:var(--pink);background:var(--pink-soft)}
.simc__t{font-family:var(--ff-ja-disp);font-weight:500;font-size:17px;letter-spacing:.04em}
.simc__badge{align-self:flex-start;font-size:11px;letter-spacing:.1em;padding:3px 10px;border-radius:2px;background:var(--pink-d);color:#fff}
.simc__n{font-family:var(--ff-en);font-size:clamp(28px,3.4vw,38px);line-height:1.05;color:var(--ink)}
.simc__n small{font-family:var(--ff-ja);font-size:.4em;color:var(--ink-2);margin-left:4px}
.simc__delta{font-size:13px;font-weight:500}
.simc__delta.up{color:var(--pink-dd)}
.simc__delta.down{color:var(--studio-d)}
.simc__bar{height:8px;background:var(--paper-2);overflow:hidden;margin-top:2px}
.simc__bar i{display:block;height:100%;background:var(--pink);transition:width .6s var(--ease)}
.simc.is-cur .simc__bar i{background:var(--ink-3)}
.simc__rows{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);display:grid;gap:5px}
.simc__row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);gap:10px}
.simc__row b{font-family:var(--ff-en);font-weight:400;color:var(--ink);font-size:14px}

.sim__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(24px,3vw,34px)}
@media (max-width:760px){ .sim__two{grid-template-columns:minmax(0,1fr)} }
.simb{border:1px solid var(--line);padding:24px 22px;text-align:center}
.simb__h{font-size:13.5px;font-weight:500;letter-spacing:.06em;margin-bottom:16px}
.simb__pct{font-family:var(--ff-en);font-size:clamp(32px,4.2vw,46px);line-height:1}
.simb__pct.up{color:var(--pink-dd)}
.simb__pct.down{color:var(--studio-d)}
.simb__cmp{display:flex;align-items:flex-end;justify-content:center;gap:34px;margin-top:18px;height:132px}
.simb__col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:82px}
.simb__col i{display:block;width:100%;background:var(--ink-3);transition:height .6s var(--ease)}
.simb__col.now i{background:var(--paper-3)}
.simb__col.aft i{background:var(--pink)}
.simb__col.aft.time i{background:var(--studio)}
.simb__lbl{font-size:11.5px;color:var(--ink-2);margin-top:9px;line-height:1.5}
.simb__val{font-family:var(--ff-en);font-size:19px;margin-top:3px}
.sim__note{margin-top:20px;padding:14px 18px;background:var(--paper-2);border:1px solid var(--line);font-size:12px;color:var(--ink-2);line-height:1.95}

/* ========== 集客LP（英日二層・スタイリッシュ） ========== */
.lp-hero{position:relative;min-height:min(88svh,780px);display:flex;align-items:center;overflow:hidden;color:#fff}
.lp-hero__bg{position:absolute;inset:0}
.lp-hero__bg img{width:100%;height:100%;object-fit:cover}
.lp-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(28,20,24,.66),rgba(28,20,24,.26))}
.lp-hero__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--side-pad)}
.lp-hero__en{display:block;font-family:var(--ff-en);font-size:clamp(40px,7.4vw,96px);line-height:1.02;letter-spacing:.01em}
.lp-hero__ja{display:block;font-family:var(--ff-ja-disp);font-weight:500;font-size:clamp(17px,2.3vw,26px);letter-spacing:.1em;margin-top:.7em;line-height:1.8}
.lp-hero__sub{margin-top:20px;max-width:28em;font-size:14.5px;line-height:2.05;color:rgba(255,255,255,.94)}

.lp-sec__h{text-align:center;margin-bottom:clamp(26px,3.2vw,44px)}
.lp-sec__en{display:block;font-family:var(--ff-en);font-size:clamp(30px,4.6vw,58px);line-height:1.08;color:var(--ink)}
.lp-sec__ja{display:block;font-family:var(--ff-ja-disp);font-weight:500;font-size:15px;letter-spacing:.16em;color:var(--ink-2);margin-top:.6em}

.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.ba figure{margin:0;position:relative}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ba figcaption{
  position:absolute;left:0;bottom:0;padding:6px 14px;
  font-family:var(--ff-en);font-size:12px;letter-spacing:.2em;
  background:rgba(54,42,51,.86);color:#fff;
}
.lp-price{border:1px solid var(--line);background:#fff;padding:clamp(22px,3vw,32px);text-align:center}
.lp-price__n{font-family:var(--ff-en);font-size:clamp(34px,5vw,56px);color:var(--pink);line-height:1}
.lp-price__n small{font-family:var(--ff-ja);font-size:.32em;color:var(--ink-2);margin-left:6px}
.lp-price__d{font-size:13px;color:var(--ink-2);margin-top:12px;line-height:1.9}

.flow__s--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.flow__s--dark .flow__t{color:#fff}
.flow__s--dark .flow__d{color:var(--ink-paper-2)}