/* =========================================================
   カナタ 集客LP
   メタファー：「彼方へ続く、一本の線」＝導線そのもの
   属するギミックだけを入れる（K1通し線／K2断線→再接続／K3流れて消える帯／
   K4数字が跳ねる折れ線／K5既読ハイライト）
   規範：絵文字ゼロ／動かすのはtransform・opacityのみ／依存ゼロ
   ========================================================= */

:root{
  --void:#0B0F1E;        /* 深藍（Dawgのニュートラル黒と色相で分離） */
  --void2:#111731;
  --void3:#161E3D;
  --paper:#F4F6FB;       /* 論理パートの白面（青みの紙） */
  --paper-tx:#151B2C;
  --paper-tx2:#4E5772;
  --paper-ln:rgba(21,27,44,.14);
  --sig:#4DE8C2;         /* 線＝信号の色。全店初のミント系 */
  --sig-d:#1F7A66;       /* 白面上で使う濃いミント */
  --cut:#FF5A8C;         /* 断線の表示のみに使う */
  --tx:#E8EDF5;
  --tx2:#9AA6BF;
  --tx3:#6B769B;
  --ln:rgba(232,237,245,.13);
  --head:'IBM Plex Sans JP',-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --grid-ln:rgba(232,237,245,.055);   /* グリッド地紋（design-pm案から接ぎ木） */
  --tick:rgba(232,237,245,.22);       /* 基準点マーク */
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1120px;
  --spine-x:clamp(14px,3.2vw,44px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;background:var(--void)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--head);background:var(--void);color:var(--tx);
  font-size:16px;line-height:1.92;letter-spacing:.01em;font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
::selection{background:var(--sig);color:#04140F}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.paper :focus-visible{outline-color:var(--sig-d)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-56px;z-index:300;background:var(--sig);color:#04140F;font-size:13px;font-weight:700;padding:11px 20px;transition:top .2s}
.skip:focus{top:16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(50px,8vw,110px)}
.wrap.narrow{max-width:980px}
/* 和文の行長は本文側で抑える（narrowを広げても1行が伸びすぎないように） */
.rinkaku p,.read-p,.naze p,.anshin p,.faq-b p,.koe li{max-width:34em}
[id]{scroll-margin-top:80px}

/* ---------- グリッド地紋（design-pm案から接ぎ木。方眼＝線の集合なので比喩に属する） ----------
   手で配置しないので面が増えても崩れない。白面には出さない（読ませる場は無地にする） */
.sec:not(.paper),.fv,.cta{
  background-image:
    repeating-linear-gradient(to right,var(--grid-ln) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(to bottom,var(--grid-ln) 0 1px,transparent 1px 88px);
}
.sec2{background-color:var(--void2)}
.cta{background-color:var(--void2)}
@media (max-width:600px){
  .sec:not(.paper),.fv,.cta{
    background-image:
      repeating-linear-gradient(to right,var(--grid-ln) 0 1px,transparent 1px 56px),
      repeating-linear-gradient(to bottom,var(--grid-ln) 0 1px,transparent 1px 56px);
  }
}

/* ---------- 基準点マーク（design-pm案から接ぎ木。交差する線＝比喩に属する） ----------
   セクション見出しの左肩に十字の基準点を1つだけ置く。transformを使わない静的な合図 */
.lbl{position:relative}
.lbl::before,.lbl::after{content:"";position:absolute;background:var(--tick);pointer-events:none}
.lbl::before{left:-18px;top:50%;width:9px;height:1px}
.lbl::after{left:calc(-18px + 4px);top:calc(50% - 4px);width:1px;height:9px}
.paper .lbl::before,.paper .lbl::after{background:rgba(21,27,44,.28)}
@media (max-width:600px){.lbl::before,.lbl::after{display:none}}

/* ---------- K1 通し線（背骨）＝この比喩の本体 ---------- */
.spine{position:fixed;left:var(--spine-x);top:0;bottom:0;width:2px;z-index:60;pointer-events:none}
.spine-rail,.spine-fill{position:absolute;left:0;width:2px;display:block}
.spine-rail{top:0;bottom:0;background:var(--ln)}
.spine-fill{
  top:0;height:100%;background:var(--sig);
  box-shadow:0 0 14px rgba(77,232,194,.55);
  transform:scaleY(var(--p,0));transform-origin:top;
  transition:box-shadow .6s ease;
}
/* K2 断線：悩みパートを通っている間だけ、線が破線になって隙間が桃色に光る */
.spine.is-cut .spine-fill{
  background:repeating-linear-gradient(to bottom,var(--cut) 0 7px,transparent 7px 15px);
  box-shadow:0 0 16px rgba(255,90,140,.5);
}
.spine.is-cut .spine-rail{background:rgba(255,90,140,.25)}
html.no-js .spine-fill,html.js-fallback .spine-fill{transform:scaleY(1)}

/* ---------- ヘッダー ---------- */
.hd{
  position:absolute;top:0;left:0;right:0;z-index:70;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(20px,4vw,44px) 20px calc(var(--spine-x) + 22px);
}
.logo{font-weight:700;font-size:16px;letter-spacing:.06em;display:flex;align-items:baseline;gap:9px}
.logo i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.24em;color:var(--tx3)}
.hd-cta{
  font-size:13px;font-weight:600;padding:9px 18px;border:1px solid var(--ln);
  transition:border-color .35s ease,color .35s ease,background .35s ease;
}
.hd-cta:hover{border-color:var(--sig);color:var(--sig)}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;padding:15px 30px;border:1px solid var(--ln);
  font-family:var(--head);font-weight:600;font-size:15px;color:var(--tx);
  position:relative;overflow:hidden;
  transition:transform .12s ease-out,border-color .35s ease,color .35s ease,background .35s ease;
}
.btn:hover{border-color:var(--tx2)}
.btn:active{transform:scale(.97)}
.btn-sig{background:var(--sig);border-color:var(--sig);color:#04140F;font-weight:700}
.btn-sig:hover{background:#6BF0D2;border-color:#6BF0D2;color:#04140F}
.btn-lg{padding:19px 42px;font-size:16.5px}
.paper .btn{border-color:var(--paper-ln);color:var(--paper-tx)}
.paper .btn-sig{background:var(--sig-d);border-color:var(--sig-d);color:#fff}

/* ---------- ヒーロー（新型：線の起点） ---------- */
.fv{position:relative;min-height:100svh;display:grid;align-content:center;padding:130px 0 120px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--sig)}
.fv h1{
  margin-top:28px;font-weight:700;font-size:clamp(31px,6.6vw,68px);
  line-height:1.28;letter-spacing:-.015em;word-break:auto-phrase;
}
.fv-sub{margin-top:30px;max-width:32em;color:var(--tx2);font-size:15.5px}
.fv-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px}
.fv-scroll{
  position:absolute;left:calc(var(--spine-x) + 22px);bottom:34px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--tx3);
}
/* 彼方へ抜ける線：見出しの高さから右端へ、細くなって消える。屋号の可視化 */
.horizon{position:absolute;right:0;top:46%;width:min(46vw,620px);height:1px;pointer-events:none}
.horizon-line{
  position:absolute;right:52px;left:0;top:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(77,232,194,.15) 30%,var(--sig));
}
.horizon-node{
  position:absolute;right:44px;top:-3.5px;width:7px;height:7px;border-radius:50%;
  background:var(--sig);box-shadow:0 0 14px rgba(77,232,194,.85);
}
.horizon-lbl{
  position:absolute;right:44px;top:16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--tx3);
  white-space:nowrap;
}
@media (max-width:900px){.horizon{display:none}}

/* ---------- セクション共通 ---------- */
.sec{padding-block:clamp(96px,13vw,168px);position:relative}
.sec2{background:var(--void2)}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--tx3);display:flex;align-items:center;gap:12px}
.lbl i{font-style:normal;color:var(--sig);font-weight:700}
.paper .lbl{color:var(--paper-tx2)}
.paper .lbl i{color:var(--sig-d)}
h2{
  margin-top:22px;font-weight:700;font-size:clamp(25px,4.8vw,44px);
  line-height:1.38;letter-spacing:-.01em;word-break:auto-phrase;
}
.note-lead{margin-top:34px;font-size:15.5px;color:var(--tx2);max-width:34em}
.note-lead b{color:var(--tx);font-weight:700}
.dark-on-paper{color:var(--paper-tx2)}
.dark-on-paper b{color:var(--paper-tx)}
.src{margin-top:26px;font-size:12px;line-height:1.85;color:var(--paper-tx2)}
.sec:not(.paper) .src{color:var(--tx3)}

/* ---------- 白面（論理パート・数字） ---------- */
.paper{background:var(--paper);color:var(--paper-tx)}
/* 境界ブリッジ：白面の内側上端に前の面色が溶け込む帯（外側に置くと前面の本文が薄くなる） */
.paper::before,.paper::after{content:"";position:absolute;left:0;right:0;height:64px;pointer-events:none;z-index:1}
.paper::before{top:0;background:linear-gradient(to bottom,var(--void),transparent)}
.paper::after{bottom:0;background:linear-gradient(to top,var(--void),transparent)}
.paper h2{color:var(--paper-tx)}
.paper .wrap{position:relative;z-index:2}

/* ---------- 02 問題の輪郭 ---------- */
.rinkaku{margin-top:40px;border-top:1px solid var(--ln)}
.rinkaku p{padding:20px 2px;border-bottom:1px solid var(--ln);color:var(--tx2);font-size:clamp(15px,2.3vw,17.5px)}

/* ---------- K5 既読ハイライト ---------- */
.read{margin-top:38px;display:grid;gap:20px}
.read-p{
  font-size:clamp(15.5px,2.4vw,18px);line-height:1.95;
  color:rgba(21,27,44,.34);transition:color .5s ease;
}
.read-p b{font-family:var(--mono);font-weight:700;font-size:.98em;letter-spacing:-.02em}
.read-p.is-read{color:var(--paper-tx)}
html.no-js .read-p,html.js-fallback .read-p{color:var(--paper-tx)}

/* ---------- 役割分担の対比 ---------- */
.yaku{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:44px;background:var(--paper-ln)}
@media (max-width:600px){.yaku{grid-template-columns:1fr}}
.yaku-col{background:var(--paper);padding:clamp(20px,3vw,30px)}
.yaku-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--paper-tx2)}
.yaku-v{margin-top:12px;font-weight:700;font-size:clamp(16px,2.6vw,20px);line-height:1.5;word-break:auto-phrase}
.yaku-d{margin-top:10px;font-size:13.5px;color:var(--paper-tx2)}
.yaku-hp{background:#E9F6F2;box-shadow:inset 3px 0 0 var(--sig-d)}

/* ---------- K3 流れて消える帯（SNSは流れる／HPは残る） ---------- */
.flow{padding-block:clamp(56px,8vw,96px);overflow:hidden;background:var(--void);border-block:1px solid var(--ln)}
.flow-row{overflow:hidden;white-space:nowrap;padding-block:6px}
.flow-track{
  display:inline-block;white-space:nowrap;
  font-weight:700;font-size:clamp(26px,6.4vw,64px);letter-spacing:-.01em;
  will-change:transform;transform:translate3d(var(--x,0px),0,0);
}
.flow-row:first-of-type .flow-track{color:transparent;-webkit-text-stroke:1px rgba(232,237,245,.34)}
.flow-row:last-of-type .flow-track{color:var(--sig);opacity:.9}
html.no-js .flow-track,html.js-fallback .flow-track{transform:none}

/* ---------- 05 悩み（断線ゾーン） ---------- */
.nayami{margin-top:42px;display:grid;gap:1px;background:var(--ln)}
.nayami li{background:var(--void);padding:22px clamp(14px,2.4vw,26px);display:flex;gap:18px;align-items:flex-start}
.nayami .n{font-family:var(--mono);font-size:11px;color:var(--cut);padding-top:.35em;flex:0 0 auto}
.nayami p{color:var(--tx2);font-size:15.5px;line-height:1.8}
.cut-note{margin-top:34px;font-size:15.5px;color:var(--tx2);max-width:34em}
.cut-note b{color:var(--cut);font-weight:700}

/* ---------- 06 解決 ---------- */
.kai{margin-top:42px;display:grid;gap:1px;background:var(--ln)}
.kai-i{background:var(--void);padding:24px clamp(14px,2.4vw,26px)}
.kai dt{font-weight:700;font-size:16px;line-height:1.55;display:flex;gap:14px;align-items:flex-start;word-break:auto-phrase}
.kai dt .n{font-family:var(--mono);font-size:11px;color:var(--sig);padding-top:.4em;flex:0 0 auto}
.kai dd{margin-top:10px;padding-left:calc(11px + 14px);color:var(--tx2);font-size:14.5px}
@media (max-width:520px){.kai dd{padding-left:0}}
.mid-cta{
  margin-top:44px;padding:26px clamp(18px,3vw,30px);border:1px solid var(--ln);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.mid-cta p{font-weight:600;font-size:16px}

/* ---------- 07 向き不向き ---------- */
.muki{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,26px);margin-top:42px}
@media (max-width:700px){.muki{grid-template-columns:1fr}}
.muki-c{padding:clamp(20px,3vw,30px);border:1px solid var(--ln)}
.muki-ok{box-shadow:inset 3px 0 0 var(--sig)}
.muki-no{box-shadow:inset 3px 0 0 var(--tx3)}
.muki-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--tx2)}
.muki-ok .muki-k{color:var(--sig)}
.muki-c ul{margin-top:16px;display:grid;gap:12px}
.muki-c li{padding-left:1.2em;position:relative;font-size:14.5px;color:var(--tx2)}
.muki-c li::before{content:"";position:absolute;left:0;top:.82em;width:8px;height:1.5px;background:var(--tx3)}
.muki-ok li::before{background:var(--sig)}

/* ---------- 08 差別化 ---------- */
.naze{margin-top:40px;display:grid;gap:16px;max-width:34em}
.naze p{color:var(--tx2);font-size:15.5px}
.naze-lead{font-size:clamp(18px,3vw,24px)!important;font-weight:700;color:var(--tx)!important;line-height:1.6}
.naze-lead b{font-family:var(--mono);color:var(--sig);font-size:1.06em;letter-spacing:-.02em}
.naze-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;background:var(--ln)}
@media (max-width:760px){.naze-3{grid-template-columns:1fr}}
.naze-3>div{background:var(--void2);padding:clamp(20px,2.6vw,26px)}
.naze-3 .k{font-weight:700;font-size:15.5px;color:var(--sig);word-break:auto-phrase}
.naze-3 .v{margin-top:10px;font-size:14px;color:var(--tx2)}

/* ---------- 09 K4 数字が跳ねる折れ線 ---------- */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,28px);margin-top:44px}
@media (max-width:700px){.cases{grid-template-columns:1fr}}
.case{border:1px solid var(--paper-ln);padding:clamp(18px,2.6vw,26px);background:#fff}
.case figcaption{font-weight:700;font-size:15px;line-height:1.5;word-break:auto-phrase}
.case figcaption span{display:block;margin-top:5px;font-weight:400;font-size:12.5px;color:var(--paper-tx2)}
.case-fig{margin-top:18px}
.jump{width:100%;height:auto;overflow:visible}
.jump-base{stroke:var(--paper-ln);stroke-width:1}
.jump-line{
  fill:none;stroke:var(--sig-d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  /* pathLengthは使わない（Safari16未満で壊れる）。実測に足る固定長を自分で決める */
  stroke-dasharray:260;stroke-dashoffset:260;
  transition:stroke-dashoffset 1.5s var(--ease);
}
.case.is-in .jump-line{stroke-dashoffset:0}
.jump-dot{opacity:0;transition:opacity .5s ease .9s}
.jump-a{fill:var(--paper-tx2)}
.jump-b{fill:var(--sig-d)}
.case.is-in .jump-dot{opacity:1}
html.no-js .jump-line,html.js-fallback .jump-line{stroke-dashoffset:0}
html.no-js .jump-dot,html.js-fallback .jump-dot{opacity:1}
.case-num{margin-top:14px;display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-weight:700}
.case-num .was{font-size:clamp(19px,3vw,24px);color:var(--paper-tx2)}
.case-num em{font-style:normal;color:var(--paper-tx2);font-size:14px}
.case-num .now{font-size:clamp(31px,5.4vw,46px);color:var(--sig-d);letter-spacing:-.03em}
.case-num i{font-style:normal;font-size:.5em;margin-left:2px}

/* ---------- 10 声 ---------- */
.koe{margin-top:42px;display:grid;gap:1px;background:var(--ln)}
.koe li{background:var(--void);padding:20px clamp(14px,2.4vw,26px) 20px calc(clamp(14px,2.4vw,26px) + 20px);position:relative;color:var(--tx2);font-size:15px}
.koe li::before{content:"";position:absolute;left:clamp(14px,2.4vw,26px);top:1.55em;width:11px;height:1.5px;background:var(--sig)}

/* ---------- 11 FAQ（details+name＝JS不要の排他アコーディオン） ---------- */
.faq{margin-top:40px;border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 2px;position:relative;
  font-weight:600;font-size:15.5px;line-height:1.6;word-break:auto-phrase;
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sig)}
.faq summary::after{
  content:"";position:absolute;right:12px;top:calc(1.55em);
  width:11px;height:11px;border-right:1.5px solid var(--sig);border-bottom:1.5px solid var(--sig);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq-b{padding:0 12px 22px 2px}
.faq-b p{color:var(--tx2);font-size:14.5px}

/* ---------- 12 相談の流れ ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,28px);margin-top:44px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{padding-top:18px;border-top:2px solid var(--sig)}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--sig)}
.steps .k{margin-top:10px;font-weight:700;font-size:16.5px;word-break:auto-phrase}
.steps .v{margin-top:9px;font-size:14px;color:var(--tx2)}

/* ---------- 13 最終CTA（線の着地点） ---------- */
.cta{padding-block:clamp(100px,14vw,180px) clamp(120px,16vw,200px);position:relative;background:var(--void2)}
.cta h2{font-size:clamp(27px,5.4vw,52px)}
.anshin{margin-top:38px;display:grid;gap:14px;max-width:34em}
.anshin p{color:var(--tx2);font-size:15px}
.anshin-price b{color:var(--tx);font-weight:700}
.cta .btn-lg{margin-top:38px}
.cta-cap{margin-top:18px;font-size:13px;color:var(--tx3)}

/* ---------- フッター ---------- */
.ft{padding:40px 0 120px;border-top:1px solid var(--ln);font-size:13px;color:var(--tx2)}
.ft-logo{font-weight:700;font-size:15px;color:var(--tx);display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.ft-logo i{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.24em;color:var(--tx3)}
.ft p+p{margin-top:6px}
.ft-sub a{color:var(--sig);border-bottom:1px solid rgba(77,232,194,.4);padding-bottom:1px}

/* ---------- スマホ固定CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,15,30,.92);border-top:1px solid var(--ln);
  backdrop-filter:blur(8px);
}
.sticky-cta a{
  display:block;text-align:center;background:var(--sig);color:#04140F;
  font-weight:700;font-size:15.5px;padding:15px;
  transition:transform .12s ease-out;
}
.sticky-cta a:active{transform:scale(.98)}
@media (max-width:760px){
  .sticky-cta{display:block}
  .ft{padding-bottom:130px}
  :root{--spine-x:11px}
  .wrap{padding-inline:34px}
  .hd{padding-left:33px}
}

/* ---------- リビール（R1・プログレッシブ） ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv2{transition-delay:.08s}.rv3{transition-delay:.16s}
html.no-js .rv,html.js-fallback .rv{opacity:1;transform:none}

/* ---------- reduced-motion（穏やかな代替。動きは全部止めるが情報は全部見える） ---------- */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .spine-fill{transform:scaleY(1);transition:none}
  .flow-track{transform:none!important}
  .read-p{color:var(--paper-tx);transition:none}
  .jump-line{stroke-dashoffset:0;transition:none}
  .jump-dot{opacity:1;transition:none}
  .btn,.hd-cta,.faq summary,.faq summary::after{transition:none}
}