@charset "utf-8";
/* men's salon B-SHINE 採用LP v3
   方針: 派手にしない・煽らない・数字と実態で静かに強い */

:root{
  --ink:#14181b;
  --ink-2:#3d474d;
  --ink-3:#6b767d;
  --line:#e2e0da;
  --paper:#ffffff;
  --paper-2:#f7f6f3;
  --dark:#0e1418;
  --dark-2:#1b262d;
  --gold:#c9a452;
  --steel:#5b8fa8;
  --line-green:#06c755;
  --line-green-d:#05a948;
  --radius:10px;
  --wrap:1080px;
  --sticky-h:68px;
  --serif:"Shippori Mincho",'Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:"Noto Sans JP",system-ui,-apple-system,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.9;font-size:16px;letter-spacing:.02em;
  padding-bottom:var(--sticky-h);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.45;letter-spacing:.01em;margin:0}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 40px,780px);margin-inline:auto}
section{padding:72px 0}
section.tight{padding:56px 0}
.bg-paper{background:var(--paper-2)}
.bg-dark{background:var(--dark);color:#fff}
.bg-dark h2,.bg-dark h3{color:#fff}

/* ---------- 見出し ---------- */
.sec-head{margin-bottom:36px}
.sec-head .eyebrow{
  font-family:var(--sans);font-size:12px;letter-spacing:.18em;color:var(--gold);
  font-weight:600;margin-bottom:10px;
}
.sec-head h2{font-size:clamp(22px,4.6vw,32px)}
.sec-head h2 .em{
  background:linear-gradient(transparent 62%,rgba(201,164,82,.30) 62%);
}
.lead{color:var(--ink-2);font-size:15px}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);
}
.site-header .inner{
  display:flex;align-items:center;gap:14px;
  width:min(100% - 24px,var(--wrap));margin-inline:auto;height:60px;
}
.site-header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.site-header .brand img{height:26px;width:auto}
.site-header .brand .txt{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.hd-btn{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;
  border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;
}
.hd-btn.line{background:var(--line-green);color:#fff}
.hd-btn.tel{border:1px solid var(--line);color:var(--ink)}
@media (max-width:640px){
  .site-header .brand .txt{display:none}
  .hd-btn{padding:0 12px;font-size:12px}
}

/* ---------- FV ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.fv{position:relative;background:var(--dark);color:#fff;padding:0 0 34px}
.fv-visual{display:none;text-decoration:none}
.fv-visual img{width:100%;height:auto;display:block}
.fv .wrap{position:relative;z-index:2;margin-top:26px}

/* スマホ：文字組みのFV（背景は外観写真を暗く敷く） */
.fv-text{
  position:relative;padding:52px 0 26px;overflow:hidden;
}
.fv-text::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/fv-v3-wide.jpg") 72% center/cover no-repeat;opacity:.30;
}
.fv-text::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,20,24,.70),rgba(14,20,24,.94));
}
.fv-text .wrap{position:relative;z-index:2;margin-top:0}
.eyebrow-fv{
  font-size:12px;letter-spacing:.16em;color:var(--gold);font-weight:600;margin-bottom:14px;
  border-top:1px solid rgba(201,164,82,.6);border-bottom:1px solid rgba(201,164,82,.6);
  display:inline-block;padding:5px 10px;
}
.fv-copy{
  font-family:var(--serif);font-weight:700;font-size:clamp(34px,10vw,46px);line-height:1.28;
  margin-bottom:18px;text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.fv-copy .gold{color:var(--gold)}

@media (min-width:900px){
  .fv{padding-bottom:30px}
  .fv-visual{display:block}
  .fv-text{display:none}
}
.fv h1{
  font-size:clamp(30px,7.4vw,54px);line-height:1.32;margin-bottom:22px;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.fv .nashi{
  font-size:clamp(15px,3.4vw,19px);line-height:2.05;color:#e8e5df;margin-bottom:22px;font-weight:500;
}
.fv-figs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.fv-figs li{
  border:1px solid rgba(201,164,82,.55);color:#f2ead6;
  padding:7px 13px;border-radius:6px;font-size:clamp(13px,3vw,15px);font-weight:700;
  background:rgba(201,164,82,.10);
}
.fv .tenure{
  font-family:var(--serif);font-size:clamp(17px,4vw,22px);font-weight:700;
  color:#fff;margin-bottom:20px;
}
.fv .tenure b{color:var(--gold);font-size:1.18em}
.fv .stmt{
  border-left:3px solid var(--gold);padding-left:14px;
  font-size:clamp(14px,3.2vw,17px);line-height:1.95;color:#ded9d0;margin-bottom:28px;
}
.fv .stmt b{color:#fff}

/* ---------- ボタン ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:14px 20px;border-radius:var(--radius);
  font-weight:700;font-size:clamp(15px,3.4vw,17px);text-decoration:none;
  border:none;cursor:pointer;font-family:var(--sans);
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn.line{background:var(--line-green);color:#fff;box-shadow:0 4px 14px rgba(6,199,85,.28)}
.btn.line:hover{background:var(--line-green-d)}
.btn.solid{background:var(--gold);color:#1b1405;box-shadow:0 4px 14px rgba(201,164,82,.26)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;min-height:50px}
.btn.outline{background:#fff;border:1px solid var(--line);color:var(--ink);min-height:50px}
.btn .ico{flex:0 0 auto;display:inline-flex}

.cta-block{margin:34px 0 0}
.cta-block .btn{width:100%;max-width:520px;margin-inline:auto}
.cta-block .btn + .btn{margin-top:10px}
.micro{
  margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.8;
}
.bg-dark .micro,.fv .micro{color:#b9b3aa}

/* セクション末尾の埋め込みCTA */
.cta-inline{
  margin-top:40px;padding:26px 20px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:14px;text-align:center;
}
.bg-paper .cta-inline{background:#fff}
.cta-inline p{font-size:15px;font-weight:700;margin-bottom:16px}
.cta-inline .btn{width:100%;max-width:460px;margin-inline:auto}

/* ---------- 証拠バッジ帯 ---------- */
.proof{background:var(--dark-2);color:#fff;padding:44px 0}
.proof .hd{
  font-family:var(--serif);font-size:clamp(18px,4.2vw,26px);
  text-align:center;margin-bottom:26px;color:#fff;
}
.proof-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
}
.proof-grid li{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:18px 12px;text-align:center;
}
.proof-grid .num{
  display:block;font-family:var(--serif);font-weight:700;color:var(--gold);
  font-size:clamp(24px,6vw,34px);line-height:1.2;
}
.proof-grid .num small{font-size:.5em;margin-left:2px}
.proof-grid .lb{display:block;font-size:12.5px;color:#cfc9c0;margin-top:6px}
.proof-grid li.hero-stat{
  grid-column:1/-1;background:rgba(201,164,82,.14);border-color:rgba(201,164,82,.5);
}
.proof-grid li.hero-stat .num{font-size:clamp(38px,11vw,60px)}
.proof-grid li.hero-stat .lb{font-size:14px;color:#efe7d6}
.note{font-size:12px;color:var(--ink-3);margin-top:14px;line-height:1.75}
.bg-dark .note,.proof .note{color:#a9a29a}

/* ---------- 共感 ---------- */
.burden{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;
}
.burden li{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:8px 14px;font-size:14px;color:var(--ink-2);font-weight:500;
}
.pull{
  font-family:var(--serif);font-size:clamp(17px,4.2vw,23px);line-height:1.75;
  border-left:4px solid var(--gold);padding:4px 0 4px 16px;margin:26px 0;font-weight:700;
}

/* ---------- 3本柱 ---------- */
.pillar{border-top:1px solid var(--line);padding-top:14px;margin-bottom:34px}
.pillar .no{
  font-size:12px;letter-spacing:.16em;color:var(--gold);font-weight:700;margin-bottom:6px;
}
.pillar h3{font-size:clamp(19px,4.4vw,26px);margin-bottom:14px}
.facts li{
  position:relative;padding:12px 0 12px 30px;border-bottom:1px dashed var(--line);
  font-size:15px;line-height:1.8;
}
.facts li:last-child{border-bottom:none}
.facts li::before{
  content:"";position:absolute;left:6px;top:20px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);
}
.facts li b{font-weight:700}
.facts li span{display:block;color:var(--ink-2);font-size:14px;margin-top:2px}

.figure-note{
  margin-top:16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
}
.figure-note img{width:100%}
.figure-note figcaption{
  font-size:12.5px;color:var(--ink-3);padding:10px 14px;background:var(--paper-2);
}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tag-row li{
  border:1px solid var(--gold);color:#7a5f18;background:rgba(201,164,82,.10);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;
}

/* 給与カード */
.pay-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){.pay-grid{grid-template-columns:1fr 1fr}}
.pay-card{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff}
.pay-card .role{font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:8px}
.pay-card .amt{font-family:var(--serif);font-size:clamp(23px,5.4vw,30px);font-weight:700;margin-bottom:10px}
.pay-card .amt b{color:var(--gold)}
.pay-card p{font-size:14px;color:var(--ink-2);margin:0}

/* ---------- 数字テーブル ---------- */
.stat-table{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.stat-table tr{border-bottom:1px solid var(--line)}
.stat-table tr:last-child{border-bottom:none}
.stat-table th{
  text-align:left;padding:14px 16px;font-size:14px;font-weight:600;color:var(--ink-2);
  background:var(--paper-2);width:46%;
}
.stat-table td{padding:14px 16px;font-size:16px;font-weight:700;font-family:var(--serif)}
.stat-table td b{color:var(--gold);font-size:1.16em}

/* ---------- スタッフの声 ---------- */
.voice{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:20px;
}
.voice .ph{background:var(--paper-2);aspect-ratio:1/1;overflow:hidden;position:relative}
.voice .ph img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 12%;
}
.voice .bd{padding:22px}
.voice .who{font-size:13px;color:var(--ink-3);font-weight:600;margin-bottom:10px}
.voice .who b{color:var(--ink);font-size:15px;font-family:var(--serif)}
.voice .say{
  font-family:var(--serif);font-size:clamp(17px,4vw,21px);font-weight:700;
  line-height:1.65;margin-bottom:14px;
}
.voice p{font-size:14.5px;color:var(--ink-2);margin:0 0 .7em}
.voice p:last-child{margin-bottom:0}
@media (min-width:760px){
  .voice{display:grid;grid-template-columns:300px 1fr;align-items:stretch}
  /* 画像は行の高さに追従させる（画像の縦横比でカードが伸びないよう aspect-ratio を解除） */
  .voice .ph{aspect-ratio:auto;height:100%;min-height:290px}
  .voice .bd{display:flex;flex-direction:column;justify-content:center;padding:26px 30px}
}

/* ---------- 合う人・合わない人 ---------- */
.fit-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.fit-grid{grid-template-columns:1fr 1fr}}
.fit-card{border-radius:12px;padding:22px;border:1px solid var(--line);background:#fff}
.fit-card h3{font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.fit-card.yes{border-color:rgba(201,164,82,.6);background:rgba(201,164,82,.06)}
.fit-card li{
  padding:8px 0 8px 26px;position:relative;font-size:14.5px;line-height:1.75;
  border-bottom:1px dashed var(--line);
}
.fit-card li:last-child{border-bottom:none}
.fit-card.yes li::before{content:"○";position:absolute;left:2px;color:var(--gold);font-weight:700}
.fit-card.no li::before{content:"△";position:absolute;left:2px;color:var(--ink-3);font-weight:700}
.fit-close{
  margin-top:22px;padding:20px;border-left:4px solid var(--gold);background:var(--paper-2);
  font-size:15px;line-height:1.9;
}
.fit-close b{font-family:var(--serif);font-size:1.06em}

/* ---------- 代表メッセージ ---------- */
.owner p{font-size:15.5px;line-height:2.05;color:#ded9d0}
.owner p b{color:#fff}
.owner .sign{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);
  font-size:14px;color:#b9b3aa;
}
.owner .sign b{display:block;font-family:var(--serif);font-size:18px;color:#fff;margin-top:4px}

/* ---------- アクセス ---------- */
.access-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){.access-grid{grid-template-columns:1fr 1fr}}
.access-figs{display:grid;gap:16px;align-content:start}
.access-figs .figure-note{margin:0}
.access-card{border:1px solid var(--line);border-radius:12px;padding:24px;background:#fff}
.access-card .name{font-family:var(--serif);font-size:20px;font-weight:700;margin-bottom:10px}
.access-card .addr{font-size:17px;font-weight:700;margin-bottom:14px}
.access-card li{
  padding:7px 0 7px 20px;position:relative;font-size:14.5px;border-bottom:1px dashed var(--line);
}
.access-card li:last-child{border-bottom:none}
.access-card li::before{content:"";position:absolute;left:4px;top:16px;width:7px;height:7px;background:var(--steel);border-radius:50%}
.tel-row{margin-top:18px;display:grid;gap:8px}
.tel-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:12px 16px;text-decoration:none;
  min-height:52px;
}
.tel-btn .lb{font-size:12px;color:var(--ink-3)}
.tel-btn .no{font-family:var(--serif);font-size:19px;font-weight:700}

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:10px;overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;padding:17px 46px 17px 18px;position:relative;
  font-weight:700;font-size:15px;line-height:1.7;min-height:56px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 18px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.9}

/* ---------- 募集要項 ---------- */
.req-table{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.req-table tr{border-bottom:1px solid var(--line)}
.req-table tr:last-child{border-bottom:none}
.req-table th{
  text-align:left;padding:14px 16px;font-size:13.5px;font-weight:600;
  background:var(--paper-2);color:var(--ink-2);width:32%;vertical-align:top;
}
.req-table td{padding:14px 16px;font-size:14.5px;line-height:1.8}
@media (max-width:600px){
  .req-table th,.req-table td{display:block;width:100%}
  .req-table th{padding-bottom:4px}
  .req-table td{padding-top:4px}
}

/* ---------- 流れ ---------- */
.flow{counter-reset:st}
.flow li{
  position:relative;padding:0 0 26px 52px;counter-increment:st;
}
.flow li::before{
  content:counter(st);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:50%;background:var(--gold);color:#1b1405;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.flow li::after{
  content:"";position:absolute;left:17px;top:38px;bottom:0;width:1px;background:var(--line);
}
.flow li:last-child{padding-bottom:0}
.flow li:last-child::after{display:none}
.flow .t{font-weight:700;font-size:16px;margin-bottom:2px}
.flow .d{font-size:14px;color:var(--ink-2)}

/* ---------- フォーム ---------- */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px;
}
.form-card label{display:block;font-size:14px;font-weight:700;margin:18px 0 7px}
.form-card label:first-of-type{margin-top:0}
.req-badge{
  display:inline-block;background:#b4432f;color:#fff;font-size:10.5px;font-weight:700;
  border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:2px;letter-spacing:.04em;
}
.opt-badge{
  display:inline-block;background:var(--paper-2);color:var(--ink-3);border:1px solid var(--line);
  font-size:10.5px;border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:2px;
}
.form-card input,.form-card select,.form-card textarea{
  width:100%;min-height:52px;padding:13px 14px;font-size:16px;font-family:var(--sans);
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
}
.form-card textarea{min-height:110px;resize:vertical}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:2px solid rgba(91,143,168,.5);outline-offset:1px;border-color:var(--steel);
}
.form-note{font-size:12.5px;color:var(--ink-3);margin:16px 0 0;line-height:1.8}
.form-card .btn{width:100%;margin-top:20px}
.or-div{
  display:flex;align-items:center;gap:12px;margin:26px 0 16px;color:var(--ink-3);font-size:12.5px;
}
.or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- 追従CTA（1本のみ・60〜70px） ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--sticky-h);
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:6px;padding:0 10px;
  box-shadow:0 -4px 16px rgba(0,0,0,.07);
}
.sticky-cta .btn{
  min-height:48px;height:48px;flex:1 1 auto;font-size:15px;padding:0 12px;border-radius:8px;
}
.sticky-cta .tel-mini{
  flex:0 0 auto;width:48px;height:48px;border:1px solid var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);
}
@media (min-width:900px){
  .sticky-cta{justify-content:center}
  .sticky-cta .btn{max-width:420px;flex:0 1 420px}
}

/* ---------- フッター ---------- */
.site-footer{background:var(--dark);color:#9aa2a7;padding:40px 0 96px;font-size:13px}
.site-footer a{color:#cfd5d9}
.site-footer .fbrand{font-family:var(--serif);color:#fff;font-size:17px;margin-bottom:8px}
.site-footer .flinks{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0}

/* ---------- コラム ---------- */
.col-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.col-grid{grid-template-columns:1fr 1fr}}
.col-grid a{
  display:block;border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  text-decoration:none;background:#fff;font-size:14.5px;font-weight:600;line-height:1.7;
}
.col-grid a::after{content:" →";color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* 連絡方法の選択（希望する連絡方法＋その連絡先） */
.method-choice{display:flex;gap:10px;margin:0 0 4px}
.method-opt{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 14px;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  font-size:15px;font-weight:700;color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}
.method-opt:hover{border-color:var(--ink-3)}
.method-opt input{width:20px;height:20px;margin:0;accent-color:var(--gold,#C9A452)}
.method-opt:has(input:checked){border-color:var(--gold,#C9A452);background:#fffdf7}
.method-opt input:focus-visible{outline:2px solid var(--gold,#C9A452);outline-offset:2px}
.form-card .field-note{margin:7px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.7}