:root{
  --ink:#0a0b0d;        /* 画面のベース。参考画像の黒 */
  --panel:#121417;
  --line:#23262b;
  --text:#e8eaed;
  --muted:#8a9099;
  --glow:#f5f7fa;       /* 六角照明の白。これが唯一の"アクセント" */
  --display:"Michroma", sans-serif;
  --body:"Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--body);line-height:1.9;letter-spacing:.04em}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* ---------- 共通ヘッダー ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1em}
.logo{font-family:var(--display);font-size:clamp(15px,1.6vw,19px);letter-spacing:.35em;color:var(--glow)}
.logo small{display:block;font-size:.45em;letter-spacing:.6em;color:var(--muted);margin-top:.5em}
.topbar nav{display:flex;gap:2.2em;font-size:13px;color:var(--muted)}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--text)}
.site-head{padding:clamp(20px,4vw,48px)}                 /* 下層ページ用 */

/* ---------- hero(トップ) ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,11,13,.92) 0%, rgba(10,11,13,.25) 38%, rgba(10,11,13,.35) 100%)}
.hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  padding:clamp(20px,4vw,48px)}
.hero-copy{margin-top:auto;max-width:640px}
.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.5em;color:var(--muted);margin-bottom:1.4em}
h1{font-size:clamp(34px,6vw,64px);font-weight:700;line-height:1.35;letter-spacing:.08em}
.hero-copy p{margin-top:1.2em;color:var(--muted);font-size:clamp(13px,1.4vw,15px);max-width:36em}
.cta{display:inline-block;margin-top:2em;padding:1em 2.6em;border:1px solid var(--glow);
  color:var(--glow);font-size:13px;letter-spacing:.3em;transition:background .3s,color .3s;
  background:none;font-family:var(--body);cursor:pointer}
.cta:hover{background:var(--glow);color:var(--ink)}
.scroll-cue{position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,48px);z-index:2;
  font-family:var(--display);font-size:10px;letter-spacing:.4em;color:var(--muted);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:1em}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--muted),transparent);
  animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}
  56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 下層ページの見出し帯 ---------- */
.page-head{padding:clamp(40px,7vw,90px) clamp(20px,6vw,80px) 0;max-width:1200px;margin:0 auto}
.page-head h1{font-size:clamp(28px,4.4vw,48px)}
.page-head .lede{margin-top:1.4em}

/* ---------- セクション共通 ---------- */
section{padding:clamp(80px,12vw,150px) clamp(20px,6vw,80px);max-width:1200px;margin:0 auto}
section.tight{padding-top:clamp(48px,7vw,90px)}
.sec-head{margin-bottom:clamp(48px,6vw,80px)}
h2{font-size:clamp(24px,3.4vw,38px);font-weight:700;letter-spacing:.1em;line-height:1.5}
h3{letter-spacing:.12em}
.lede{margin-top:1.4em;color:var(--muted);max-width:38em;font-size:15px}

/* ---------- 六角マーカー(天井照明のモチーフ) ---------- */
.hex{width:58px;height:58px;display:grid;place-items:center;flex:none;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0% 50%);
  background:var(--panel);border:1px solid var(--line);
  font-family:var(--display);font-size:13px;color:var(--glow)}

/* トップの工程3列 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.step{border-top:1px solid var(--line);padding-top:2em}
.step .hex{margin-bottom:1.6em}
.step h3{font-size:17px;font-weight:700;margin-bottom:.8em}
.step h3 span{display:block;font-family:var(--display);font-size:10px;letter-spacing:.4em;
  color:var(--muted);margin-bottom:1em}
.step p{font-size:13.5px;color:var(--muted)}

/* ---------- 施工の流れ(詳細ページ) ---------- */
.flow{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.flow-step{display:grid;grid-template-columns:58px 1fr;gap:clamp(20px,3vw,40px);
  border-top:1px solid var(--line);padding-top:2.4em}
.flow-step h3{font-size:19px;font-weight:700;margin-bottom:.9em}
.flow-step h3 span{display:block;font-family:var(--display);font-size:10px;letter-spacing:.4em;
  color:var(--muted);margin-bottom:1em}
.flow-step .desc{color:var(--muted);font-size:14px;max-width:46em}
.kodawari{margin-top:1.6em;padding:1.4em 1.8em;background:var(--panel);border-left:1px solid var(--glow);
  font-size:13.5px}
.kodawari b{display:block;font-family:var(--display);font-size:10px;letter-spacing:.4em;
  color:var(--glow);margin-bottom:.9em;font-weight:400}
.kodawari p{color:var(--muted)}
.term{border-bottom:1px dotted var(--muted);cursor:help}

/* ---------- ビフォー&アフター ---------- */
.case{margin-bottom:clamp(64px,9vw,110px)}
.case-meta{display:flex;flex-wrap:wrap;gap:1em 3em;margin-top:1.6em;color:var(--muted);font-size:13px}
.case-meta b{color:var(--text);font-weight:500;margin-right:.8em;font-size:12px;letter-spacing:.2em}
.ba{position:relative;overflow:hidden;user-select:none;touch-action:none;margin-top:2em;
  border:1px solid var(--line)}
.ba img{width:100%;height:auto;pointer-events:none;display:block}
.ba .after-wrap{position:absolute;inset:0;overflow:hidden;width:50%;border-right:1px solid var(--glow)}
.ba .after-wrap img{position:absolute;top:0;left:0;width:auto;height:100%;max-width:none}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:44px;margin-left:-22px;cursor:ew-resize;
  display:grid;place-items:center}
.ba .handle::before{content:"◂ ▸";font-size:11px;letter-spacing:2px;color:var(--ink);
  background:var(--glow);padding:.5em .6em;border-radius:2px;white-space:nowrap}
.ba .tag{position:absolute;top:14px;font-family:var(--display);font-size:10px;letter-spacing:.35em;
  padding:.6em 1em;background:rgba(10,11,13,.72);color:var(--glow);z-index:2;pointer-events:none}
.ba .tag.before{right:14px}
.ba .tag.after{left:14px}

/* ---------- 料金表 ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.plan{border:1px solid var(--line);padding:2.2em 1.8em;display:flex;flex-direction:column;background:var(--panel)}
.plan.featured{border-color:var(--glow)}
.plan h3{font-size:16px;font-weight:700}
.plan h3 span{display:block;font-family:var(--display);font-size:9px;letter-spacing:.4em;color:var(--muted);margin-bottom:1em}
.plan .price{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);color:var(--glow);margin:1em 0 .2em}
.plan .price small{font-size:.45em;color:var(--muted);letter-spacing:.2em}
.plan .note{font-size:11.5px;color:var(--muted);margin-bottom:1.2em}
.plan ul{list-style:none;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:1.2em;margin-top:auto}
.plan li{padding:.35em 0}
.plan li::before{content:"⬡ ";color:var(--glow);font-size:.8em}
.price-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:2em}
.price-table caption{text-align:left;font-size:12px;color:var(--muted);margin-bottom:1em}
.price-table th,.price-table td{border:1px solid var(--line);padding:.9em 1em;text-align:right}
.price-table th{font-weight:500;color:var(--muted);text-align:left;letter-spacing:.1em;background:var(--panel)}
.price-table thead th{text-align:right;font-family:var(--display);font-size:10px;letter-spacing:.2em}

/* ---------- フォーム ---------- */
form{max-width:640px}
.field{margin-bottom:1.8em}
.field label{display:block;font-size:12.5px;letter-spacing:.2em;margin-bottom:.7em}
.field label small{color:var(--muted);letter-spacing:.1em;margin-left:1em}
.field input,.field select,.field textarea{width:100%;padding:.9em 1em;background:var(--panel);
  border:1px solid var(--line);color:var(--text);font-family:var(--body);font-size:14px;border-radius:0;
  -webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 16px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--glow)}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:.5em}
fieldset{border:none;margin-bottom:1.8em}
legend{font-size:12.5px;letter-spacing:.2em;margin-bottom:.7em}
.radio-row{display:flex;flex-wrap:wrap;gap:.8em}
.radio-row label{display:flex;align-items:center;gap:.5em;border:1px solid var(--line);
  padding:.7em 1.2em;font-size:13px;cursor:pointer}
.radio-row label:has(:checked){border-color:var(--glow);color:var(--glow)}
.radio-row input{accent-color:var(--glow)}
.form-done{display:none;border:1px solid var(--glow);padding:2.4em;max-width:640px}
.form-done h3{color:var(--glow);margin-bottom:1em;font-size:16px}
.form-done p{font-size:13.5px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-cat{margin-bottom:clamp(48px,6vw,72px)}
.faq-cat h2{font-size:clamp(18px,2.2vw,24px);margin-bottom:1.2em;display:flex;align-items:center;gap:.9em}
.faq-cat h2::before{content:"⬡";color:var(--glow);font-size:.8em}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:baseline;gap:1.2em;padding:1.5em .4em;cursor:pointer;
  font-size:15px;font-weight:500;letter-spacing:.06em;list-style:none;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--glow)}
.faq summary::before{content:"Q";font-family:var(--display);font-size:12px;color:var(--glow);flex:none}
.faq summary::after{content:"+";font-family:var(--display);margin-left:auto;color:var(--muted);
  flex:none;transition:transform .3s}
.faq details[open] summary::after{content:"−"}
.faq .a{display:flex;gap:1.2em;padding:.2em .4em 1.8em}
.faq .a::before{content:"A";font-family:var(--display);font-size:12px;color:var(--muted);flex:none;line-height:2.2}
.faq .a p{color:var(--muted);font-size:13.5px;max-width:44em}

/* ---------- 予約・フッター ---------- */
.book{text-align:center;border-top:1px solid var(--line)}
footer{border-top:1px solid var(--line);margin-top:clamp(60px,8vw,100px);
  padding:48px clamp(20px,6vw,80px);color:var(--muted);font-size:11.5px;line-height:2.1}
.foot-grid{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2em 6em;justify-content:space-between}
.foot-grid .logo{font-size:14px}
.foot-note{max-width:1200px;margin:2.5em auto 0;font-size:10.5px;color:#5a6068;letter-spacing:.15em}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .plans{grid-template-columns:1fr}
}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start;gap:1.3em}
  .topbar nav{gap:1.5em;font-size:11.5px;flex-wrap:wrap;letter-spacing:.06em}
  .topbar nav a[href^="#"]{display:none}          /* ページ内アンカーはスマホでは省く */
  .hero-inner{padding-top:24px}
  .scroll-cue{display:none}                       /* モバイルは自然にスクロールするので誘導不要 */
  .flow-step{grid-template-columns:1fr}
  .kodawari{padding:1.2em 1.3em}
  .ba .handle::before{content:"◂ ▸";padding:.7em .8em}  /* 指で掴みやすく */
  .case-meta{gap:.6em 2em}
  .price-table{font-size:11.5px}
  .price-table th,.price-table td{padding:.7em .6em}
  .faq summary{font-size:14px;gap:.9em}
  .faq .a{gap:.9em}
  footer{padding:40px 20px}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-cue::after{animation:none}
  html{scroll-behavior:auto}
}