/* signature.css — 見た目の格上げ層（2026-09-23 Claude）。motion.css の後に読む
   ・ヒーローを全幅の暗いビジュアルに　・セクションに大きな英字の透かし　・暗い面に粒子感
   ・工事の流れはスクロールで線が伸びる　・対応エリアの県名をタイポで見せる */

:root{--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== ヒーロー：全幅の暗いビジュアル ===== */
.impact-hero{background:#0c1b2d;color:#fff}
.impact-hero h1{color:#fff}
.impact-hero-lead{color:#e3eaf2}
.impact-hero-support{color:#aebccd}
.hero-permit{color:#cfd9e5}
.impact-phone{color:#fff}
.impact-phone small{color:#aebccd}
.impact-eyebrow{color:#cfd9e5}
.impact-eyebrow>span{background:var(--orange);color:#0c1b2d;font-weight:800}
.impact-hero h1 .hero-topic{color:#cfd9e5}
.impact-primary{box-shadow:0 5px 0 #b3500c,0 18px 40px #f57b2640}

@media (min-width:701px){
  .impact-hero{display:block;min-height:clamp(640px,88vh,860px)}
  .impact-hero-visual{position:absolute;inset:0;z-index:-1;background:#0c1b2d}
  .impact-hero-visual>img{object-position:72% 50%}
  .visual-overlay{background:
    linear-gradient(90deg,#0c1b2df5 0%,#0c1b2de0 34%,#0c1b2d80 58%,#0c1b2d1a 80%),
    linear-gradient(0deg,#0c1b2dd9 0%,transparent 32%),
    var(--noise)}
  .impact-hero-copy{padding:clamp(70px,9vh,110px) max(35px,calc((100vw - 1180px)/2)) 150px;max-width:none}
  .impact-hero-copy>*{max-width:640px}
  .impact-hero h1{font-size:clamp(60px,6.9vw,112px)}
  /* RE:START. を右下に大きく */
  .hero-image-copy{left:auto;right:max(35px,calc((100vw - 1180px)/2));bottom:46px;text-align:right}
  .hero-image-copy>strong{font-size:clamp(70px,9.6vw,160px);color:transparent;-webkit-text-stroke:1.5px #ffffffd9;letter-spacing:-.05em}
  .hero-image-copy>span{color:#ffb178;letter-spacing:.14em}
  .hero-free-badge{top:34px;right:max(35px,calc((100vw - 1180px)/2))}
  .hero-vertical{right:12px}
  /* 左下にスクロールの合図 */
  .impact-hero::after{content:"SCROLL";position:absolute;left:max(35px,calc((100vw - 1180px)/2));bottom:34px;font:700 10px Arial,sans-serif;letter-spacing:.3em;color:#aebccd;padding-left:52px;background:linear-gradient(#f57b26,#f57b26) 0 50%/40px 1px no-repeat}
}
@media (min-width:701px) and (max-width:1000px){
  .impact-hero-copy{padding-bottom:200px}
  .impact-hero-copy>*{max-width:520px}
  .impact-actions{flex-direction:row;align-items:center}
}
/* スマホ：文字の面も暗くし、写真とつなげる */
@media (max-width:700px){
  .impact-hero-copy{background:#0c1b2d var(--noise);padding-bottom:40px}
  .impact-hero-visual::before{content:"";position:absolute;inset:0 0 auto;height:38%;background:linear-gradient(#0c1b2d,transparent);z-index:0;pointer-events:none}
}

/* ===== 暗い面に粒子感 ===== */
.service,.j-before,.proof-ribbon,.impact-marquee{background-image:var(--noise)}

/* ===== セクションの大きな英字の透かし ===== */
[data-wm]{position:relative;isolation:isolate;overflow:clip}
.wm{position:absolute;z-index:-1;top:clamp(20px,4vw,56px);right:-.04em;font:900 clamp(84px,15vw,240px)/.8 Arial,sans-serif;letter-spacing:-.06em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #14263c1c;pointer-events:none;user-select:none;translate:calc(var(--wmx,0) * 1px) 0}
.service .wm{-webkit-text-stroke-color:#ffffff1f}
.decision .wm{right:0}
.j-flow .wm,.faq-section .wm{right:auto;left:-.04em}
@supports not (-webkit-text-stroke:1px #000){.wm{color:#14263c0a}.service .wm{color:#ffffff0d}}

/* ===== 見出しの英字ラベルを少し強く ===== */
.eyebrow,.j-kicker,.closing-kicker{letter-spacing:.2em}

/* ===== 悩みカード：番号を大きく、上端にオレンジの線が走る ===== */
.decision-card{border:0;box-shadow:0 1px 0 #e4e9ee,0 18px 40px #0d20300d}
.decision-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:2}
.decision-card:hover::before{transform:scaleX(1)}
.decision-number{font-size:44px!important;line-height:1}

/* ===== 工事の流れ：縦の線がスクロールで伸び、通過した番号がオレンジに ===== */
.j-process-list{position:relative;border-top:0}
.j-process-list::before,.j-process-list::after{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:2px;background:#dfe5ec}
.j-process-list::after{background:linear-gradient(#f57b26,#ffb178);transform-origin:50% 0;transform:scaleY(var(--flow,1))}
.js-motion .j-process-list::after{transform:scaleY(var(--flow,0))}
.j-process-number{position:relative;z-index:1;background:#fff;text-align:center;font-weight:800!important;transition:color .4s}
.j-process-list>li.is-passed .j-process-number{color:#dc762d}
@media (max-width:600px){.j-process-list::before,.j-process-list::after{left:18px}}

/* ===== 対応エリア：県名を大きなタイポで、ホバーでオレンジが満ちる ===== */
.j-area-regions li>span{font-weight:900;letter-spacing:-.02em;background:linear-gradient(#f57b26,#f57b26) 0 100%/0 3px no-repeat;transition:background-size .5s cubic-bezier(.7,0,.2,1)}
.j-area-regions li:hover>span{background-size:100% 3px}

/* ===== 途中の相談帯：ベージュ → 写真＋紺で締める ===== */
.j-consult{background:#0c1b2d var(--noise);color:#fff}
.j-consult h2{color:#fff}
.j-consult p:not(.j-kicker){color:#cfd9e5!important}
.j-consult .j-button{background:var(--orange);color:#0c1b2d}
.j-consult-tel{color:#fff}
.j-consult-tel small{color:#ffb178}

/* 調整：RE:START. の添え書きは上の行に／ヒーローの見出しはマーカーなし（暗い面で茶色く濁るため） */
.hero-image-copy>span{display:block;margin-bottom:6px}
.impact-hero-copy h1 em{background:none!important}