/* ==========================================================
   Y's Vision サービス詳細ページ 共通CSS
   2026/8/13 新設。会社案内LP（index.html）のトークン・NAV・FOOTERを
   そのまま引き継ぐ。brand.md v2.1 準拠（陰=墨紺 / 光=紙白・金は線のみ）
   ========================================================== */
:root{
  --sumi:   #0A1526;
  --navy:   #001F5B;
  --navy-d: #00153d;
  --gold:   #C9A84C;
  --paper:  #FAF8F3;
  --shu:    #C7472B;
  --ink:    #1c2333;
  --ink-soft:#5a6175;
  --line:   #e6e1d5;
  --line-green:#06C755;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --serif:  "Shippori Mincho", serif;
  --sans:   "Noto Sans JP", sans-serif;
  --num:    "Cormorant Garamond", serif;
  --en:     "Poppins", sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; font-feature-settings:"palt";
  overflow-x:hidden; line-height:1.9;
}
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(22px, 6vw, 48px); }
.br-sp{ display:inline; }
.br-pc{ display:none; }
@media (min-width:768px){ .br-sp{ display:none; } .br-pc{ display:inline; } }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; }

.eyebrow{
  font-family:var(--en); font-size:11px; font-weight:500;
  letter-spacing:0.28em; color:var(--gold); text-transform:uppercase;
  display:flex; align-items:center; gap:14px;
}
.eyebrow .hl{
  display:inline-block; width:44px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease);
}
.on .eyebrow .hl, .eyebrow.on .hl{ transform:scaleX(1); }

.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0s);
}
.reveal.on{ opacity:1; transform:translateY(0); }

/* ---------- NAV（LPと同一） ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s ease, box-shadow .3s ease; }
.nav .inner{
  max-width:1120px; margin:0 auto; padding:16px clamp(22px, 6vw, 48px);
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:0.12em; color:#fff; transition:color .3s ease; }
.logo .ap{ color:var(--gold); }
.nav-links{ display:none; align-items:center; gap:36px; font-size:13px; color:#fff; transition:color .3s ease; }
.nav-links a:not(.btn-line){ position:relative; padding-bottom:4px; }
.nav-links a:not(.btn-line)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .35s ease;
}
.nav-links a:not(.btn-line):hover::after{ transform:scaleX(1); transform-origin:left; }
@media (min-width:768px){ .nav-links{ display:flex; } .nav .m-cta{ display:none; } }
.nav.scrolled{ background:rgba(250,248,243,.94); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(0,31,91,.08); }
.nav.scrolled .logo{ color:var(--navy); }
.nav.scrolled .nav-links{ color:var(--navy); }

.btn-line{
  background:var(--line-green); color:#fff !important;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 22px; font-size:12.5px; font-weight:500; letter-spacing:0.1em;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-line:hover{ background:#05B048; transform:translateY(-1px); box-shadow:0 10px 24px rgba(6,199,85,.25); }
.btn-line svg{ width:16px; height:16px; flex:none; }
.btn-line.lg{ padding:17px 34px; font-size:14px; }

/* ==========================================================
   HERO — 陰の舞台（サービス名を掲げるだけの静かな見出し）
   ========================================================== */
.sd-hero{
  position:relative; background:var(--sumi); color:#fff; overflow:hidden;
  padding:clamp(126px, 19vw, 178px) 0 clamp(64px, 10vw, 96px);
}
.sd-hero-bg{ position:absolute; inset:0; opacity:.20; }
.sd-hero-bg img{ width:100%; height:100%; object-fit:cover; }
.sd-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--sumi) 30%, rgba(10,21,38,.55) 100%);
}
.sd-hero .wrap{ position:relative; z-index:2; }
.sd-hero .ghost-n{
  position:absolute; right:-2vw; top:8vw; z-index:1;
  font-family:var(--num); font-weight:500; font-size:clamp(200px, 34vw, 400px);
  line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(201,168,76,.14);
  pointer-events:none; user-select:none;
}
.sd-back{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:0.14em; color:rgba(250,248,243,.62);
  transition:color .25s ease;
}
.sd-back:hover{ color:var(--gold); }
.sd-hero .eyebrow{ margin-top:34px; }
.sd-hero h1{
  margin-top:20px; font-size:clamp(30px, 7.4vw, 54px); line-height:1.35;
  letter-spacing:0.06em; color:#fff;
}
.sd-hero .sd-tag{
  margin-top:26px; font-family:var(--serif); font-weight:600;
  font-size:clamp(16px, 3.4vw, 22px); line-height:1.9; letter-spacing:0.05em;
  color:rgba(250,248,243,.86);
}
.sd-hero .sd-tag .em{ color:var(--gold); }
.sd-hero .sd-who{
  margin-top:30px; padding-top:20px; border-top:1px solid rgba(250,248,243,.14);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  font-size:12.5px; color:rgba(250,248,243,.66);
}
.sd-hero .sd-who .en{ font-family:var(--en); font-size:10px; letter-spacing:0.26em; color:var(--gold); }

/* ==========================================================
   本文 — 光の舞台
   ========================================================== */
section{ padding:clamp(70px, 11vw, 118px) 0; }
.sd-lede{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(18px, 4vw, 25px); line-height:1.85; letter-spacing:0.05em;
  color:var(--navy); max-width:760px;
}
.sd-body{ margin-top:clamp(26px, 4vw, 38px); max-width:760px; display:grid; gap:1.5em; }
.sd-body p{ font-size:14.5px; line-height:2.15; letter-spacing:0.05em; color:var(--ink); }
.sd-body strong{ font-weight:700; color:var(--navy); }
.sd-note{
  margin-top:clamp(26px, 4vw, 34px); max-width:760px;
  padding:18px 22px; background:#fff; border-left:3px solid var(--gold);
  font-size:12.5px; line-height:2; letter-spacing:0.04em; color:var(--ink-soft);
}
.sd-chips{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.sd-chips span{
  font-size:11.5px; letter-spacing:0.08em; color:var(--navy);
  border:1px solid rgba(0,31,91,.22); padding:7px 15px; background:#fff;
}

/* ---- セクション見出し ---- */
.sd-h{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.sd-h h2{ font-size:clamp(21px, 4.6vw, 30px); letter-spacing:0.07em; color:var(--navy); }
.sd-h .en{ font-family:var(--en); font-size:10px; letter-spacing:0.26em; color:var(--gold); }

/* ---- ステップ（縦の道筋） ---- */
.sd-steps{ margin-top:clamp(30px, 5vw, 46px); list-style:none; display:grid; gap:0; max-width:820px; }
.sd-step{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:20px; padding:0 0 26px 0; }
.sd-step:last-child{ padding-bottom:0; }
.sd-step .no{
  position:relative; z-index:1; flex:none;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(0,31,91,.2);
  font-family:var(--num); font-size:17px; color:var(--navy);
}
.sd-step::before{
  content:''; position:absolute; left:18px; top:36px; bottom:0;
  width:1px; background:rgba(0,31,91,.14);
}
.sd-step:last-child::before{ display:none; }
.sd-step.is-after .no{ background:var(--navy); border-color:var(--navy); color:var(--gold); }
.sd-step h3{ font-size:15.5px; letter-spacing:0.05em; color:var(--navy); line-height:1.7; }
.sd-step p{ margin-top:5px; font-size:13px; line-height:1.95; color:var(--ink-soft); }

/* ---- 事例・提供物のグリッド ---- */
.sd-grid{ margin-top:clamp(30px, 5vw, 46px); display:grid; gap:14px; }
@media (min-width:760px){ .sd-grid{ grid-template-columns:repeat(2, 1fr); gap:16px 20px; } }
.sd-item{
  background:#fff; border:1px solid rgba(0,31,91,.1); border-left:3px solid var(--gold);
  padding:22px 24px;
}
.sd-item h3{ font-size:14.5px; line-height:1.75; letter-spacing:0.05em; color:var(--navy); }
.sd-item p{ margin-top:8px; font-size:12.5px; line-height:1.95; color:var(--ink-soft); }
.sd-item .sd-eg{
  margin-top:12px; padding-top:11px; border-top:1px dashed rgba(0,31,91,.16);
  font-size:12px; line-height:1.9; color:var(--ink);
}
.sd-item .sd-eg span{
  display:inline-block; margin-right:8px; padding:2px 7px;
  font-family:var(--en); font-size:9.5px; letter-spacing:0.12em;
  color:var(--gold); border:1px solid rgba(201,168,76,.5); vertical-align:1px;
}
/* 実物がまだ無い領域は、実例と区別できるラベルにする */
.sd-item .sd-eg-maybe{ color:var(--ink-soft); }
.sd-item .sd-eg-maybe span{ color:var(--ink-soft); border-color:rgba(0,31,91,.22); }

.sd-sub-lead{
  margin-top:clamp(18px, 2.6vw, 24px); max-width:760px;
  font-size:14px; line-height:2.1; letter-spacing:0.04em; color:var(--ink-soft);
}
.sd-sub-lead strong{ color:var(--navy); font-weight:700; }
@media (min-width:900px){ .sd-grid.sd-grid-3{ grid-template-columns:repeat(3, 1fr); } }

/* ---- 暗転セクション（How it works） ---- */
.sd-dark{ background:var(--sumi); color:rgba(250,248,243,.82); }
.sd-dark .sd-h h2{ color:#fff; }
.sd-dark .sd-item{ background:rgba(250,248,243,.04); border-color:rgba(250,248,243,.12); border-left-color:var(--gold); }
.sd-dark .sd-item h3{ color:#fff; }
.sd-dark .sd-item p{ color:rgba(250,248,243,.62); }
.sd-dark .sd-step .no{ background:transparent; border-color:rgba(201,168,76,.5); color:var(--gold); }
.sd-dark .sd-step::before{ background:rgba(250,248,243,.16); }
.sd-dark .sd-step h3{ color:#fff; }
.sd-dark .sd-step p{ color:rgba(250,248,243,.62); }
.sd-dark .sd-note{ background:rgba(250,248,243,.05); color:rgba(250,248,243,.7); }

/* ---- スタンス（言いにくいことを言う、の宣言） ---- */
.sd-stance{
  margin-top:clamp(40px, 6vw, 62px); max-width:820px;
  padding:clamp(26px, 3.8vw, 34px) clamp(24px, 3.6vw, 36px);
  background:rgba(250,248,243,.05); border-left:3px solid var(--gold);
}
.sd-stance h3{ font-size:clamp(16.5px, 3.4vw, 21px); line-height:1.75; letter-spacing:0.05em; color:#fff; }
.sd-stance p{ margin-top:15px; font-size:13.5px; line-height:2.15; letter-spacing:0.04em; color:rgba(250,248,243,.74); }
.sd-stance p + p{ margin-top:1.1em; color:rgba(250,248,243,.9); }
section:not(.sd-dark) .sd-stance{ background:#fff; border:1px solid rgba(0,31,91,.1); border-left:3px solid var(--gold); }
section:not(.sd-dark) .sd-stance h3{ color:var(--navy); }
section:not(.sd-dark) .sd-stance p{ color:var(--ink); }

/* ---- 費用 ---- */
.sd-price{
  margin-top:clamp(30px, 5vw, 46px); max-width:820px;
  background:#fff; border:1px solid rgba(0,31,91,.12); padding:clamp(24px, 4vw, 34px);
}
.sd-price .lbl{ font-family:var(--en); font-size:10px; letter-spacing:0.26em; color:var(--gold); }
.sd-price p{ margin-top:14px; font-size:14px; line-height:2.05; letter-spacing:0.04em; color:var(--ink); }
.sd-price .fine{ margin-top:12px; font-size:12px; color:var(--ink-soft); line-height:1.95; }

/* ---- よくあるご質問（アコーディオン） ---- */
.sd-faq{ background:#fff; border-top:1px solid var(--line); }
.faq-list{ margin-top:clamp(28px, 4.5vw, 44px); max-width:880px; border-top:1px solid rgba(0,31,91,.1); }
.faq-item{ border-bottom:1px solid rgba(0,31,91,.1); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; gap:16px; align-items:flex-start;
  padding:20px 40px 20px 0; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q{
  font-family:var(--num); font-size:19px; line-height:1; color:var(--gold); flex:none; padding-top:1px;
}
.faq-item summary .qt{
  font-family:var(--serif); font-weight:700; font-size:15px; line-height:1.7;
  letter-spacing:0.04em; color:var(--navy);
}
.faq-item summary::after{
  content:''; position:absolute; right:8px; top:28px;
  width:9px; height:9px; border-right:1px solid var(--navy); border-bottom:1px solid var(--navy);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(-135deg); }
.faq-item summary:hover .qt{ color:var(--gold); }
.faq-a{ display:flex; gap:16px; padding:0 40px 24px 0; }
.faq-a .a{ font-family:var(--num); font-size:19px; line-height:1; color:var(--ink-soft); flex:none; padding-top:2px; }
.faq-a p{ font-size:13.5px; line-height:2.15; letter-spacing:0.04em; color:var(--ink); }

/* ---- 他のサービス ---- */
.sd-others{ background:#fff; border-top:1px solid var(--line); }
.sd-others .list{ margin-top:clamp(26px, 4vw, 38px); display:grid; gap:12px; }
@media (min-width:768px){ .sd-others .list{ grid-template-columns:repeat(3, 1fr); gap:16px; } }
.sd-other{
  display:block; padding:22px 24px; background:var(--paper);
  border:1px solid rgba(0,31,91,.1); border-left:3px solid var(--gold);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sd-other:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,31,91,.07); }
.sd-other .en{ font-family:var(--en); font-size:10px; letter-spacing:0.24em; color:var(--gold); }
.sd-other h3{ margin-top:8px; font-size:15px; letter-spacing:0.05em; color:var(--navy); line-height:1.7; }
.sd-other p{ margin-top:6px; font-size:12px; color:var(--ink-soft); line-height:1.9; }

/* ---- 代表の声（CTA直前・一人称の回収） ---- */
.sd-voice{ background:#fff; border-top:1px solid var(--line); padding:clamp(58px, 9vw, 96px) 0; }
.sd-voice blockquote{ max-width:720px; margin:0 auto; position:relative; padding-left:clamp(20px, 3vw, 34px); }
.sd-voice blockquote::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--gold);
}
.sd-voice p{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(16px, 3.2vw, 21px); line-height:2.05; letter-spacing:0.05em; color:var(--navy);
}
.sd-voice cite{
  display:block; margin-top:20px; font-style:normal;
  font-size:12px; letter-spacing:0.08em; color:var(--ink-soft);
}

/* ---- CTA ---- */
.sd-cta{ background:var(--sumi); color:#fff; text-align:center; }
.sd-cta h2{ font-size:clamp(23px, 5.4vw, 36px); line-height:1.5; letter-spacing:0.06em; color:#fff; }
.sd-cta p{ margin-top:22px; font-size:14px; line-height:2.1; color:rgba(250,248,243,.72); }
.sd-cta .actions{ margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px; }
@media (min-width:600px){ .sd-cta .actions{ flex-direction:row; justify-content:center; gap:24px; } }
.sd-cta .sub{ font-size:12.5px; letter-spacing:0.06em; color:rgba(250,248,243,.6); border-bottom:1px solid rgba(201,168,76,.45); padding-bottom:3px; }
.sd-cta .sub:hover{ color:var(--gold); }
.sd-cta .cta-note{
  margin:clamp(34px, 5vw, 46px) auto 0; max-width:640px;
  padding-top:22px; border-top:1px solid rgba(250,248,243,.14);
  font-size:12.5px; line-height:2.05; letter-spacing:0.03em;
  color:rgba(250,248,243,.6); text-align:left;
}
.sd-cta .cta-note a{ color:var(--gold); border-bottom:1px solid rgba(201,168,76,.45); padding-bottom:1px; }
.sd-cta .cta-note a:hover{ border-bottom-color:var(--gold); }

/* ---------- FOOTER（LPと同一） ---------- */
footer{ background:var(--sumi); color:rgba(250,248,243,.8); padding:clamp(56px, 9vw, 80px) 0 40px; }
footer .grid{ display:grid; gap:40px; }
@media (min-width:768px){ footer .grid{ grid-template-columns:1.4fr 1fr 1fr; } }
footer .logo{ font-size:24px; }
footer .corp{ margin-top:16px; font-size:13px; letter-spacing:0.08em; color:rgba(250,248,243,.7); }
footer .corp-sub{ margin-top:4px; font-size:11px; color:rgba(250,248,243,.5); }
footer .ai-note{
  margin-top:14px; max-width:34em;
  font-size:11px; line-height:1.95; letter-spacing:0.02em;
  color:rgba(250,248,243,.42);
}
footer .col-title{ font-family:var(--en); font-size:10px; letter-spacing:0.3em; color:var(--gold); margin-bottom:16px; }
footer ul{ list-style:none; display:grid; gap:9px; font-size:13px; }
footer ul a{ transition:color .25s ease; }
footer ul a:hover{ color:var(--gold); }
footer .bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(250,248,243,.1);
  display:flex; flex-direction:column; gap:8px; font-size:10.5px; color:rgba(250,248,243,.4);
}
@media (min-width:768px){ footer .bottom{ flex-direction:row; justify-content:space-between; } }
footer .bottom .en{ font-family:var(--en); letter-spacing:0.3em; }

/* ---------- reduced motion（brand.md §5 必須対応） ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .eyebrow .hl{ transform:none; }
}