/* =========================================================
   トレカ盗難情報共有データベース  theft.css v1
   ・テーマが「リスク回避・コンプライアンス」なので、LP本体の
     明るいグラデではなく、紙面に近い落ち着いたトーンで組む
   ・共通で使うのは header / footer / 固定CTA のみ
   ========================================================= */
.tf{
  --t-ink:#101828;
  --t-navy:#0f1b33;
  --t-sub:#5b6476;
  --t-line:#e3e8f0;
  --t-paper:#f5f8fd;
  --t-blue:#2563eb;
  --t-blue-bg:#eaf1ff;
  --t-alert:#dc2626;
  --t-alert-bg:#fdecec;
  --t-deep:#1b3a8f;        /* 法令・注記など、本文より一段強い青 */
  --t-deep-bg:#eef3fe;
  --t-sky:#dbe8ff;
  /* 本体LPは紫寄りの淡色なので、このページ内だけブルー寄りに上書きする */
  --tint:#f5f8ff;
  --grad-text:linear-gradient(95deg,#2f6bf0 0%,#3b82f6 48%,#4fb0f5 100%);  /* 本体は青→紫→ピンク。このページはブルーで統一 */
  --line:#e4eaf6;
  --lav:#eaf1ff;
  background:#fff; color:var(--t-ink);
}
.tf-br{ display:inline; }


/* ---------- ボタン ---------- */
/* 形・サイズはPOS本体の .f-hero__btn（style.css）をそのまま使い、色だけこのページのブルーにする */
.tf .tf-fv__cta .f-hero__btn{ padding:0 18px; font-size:16.5px; gap:10px; }
.tf .f-hero__btn.is-primary{
  background:var(--t-blue); box-shadow:0 14px 30px rgba(37,99,235,.30);
}
.tf .f-hero__btn.is-primary:hover{ background:#1d4fd8; box-shadow:0 18px 38px rgba(37,99,235,.38); }
.tf .f-hero__btn.is-sub{
  color:var(--t-ink); border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#74a0f2,#2563eb) border-box;
}
.tf .f-header__actions .tf-navcta{
  background:var(--t-navy); box-shadow:none; border-radius:999px; padding:0 26px;
}

/* ---------- ① FV ---------- */
.tf-fv{ position:relative; overflow:hidden; background:#fff; }
.tf-fv__bg{ position:absolute; inset:0; pointer-events:none; }
.tf-fv__bg span{ position:absolute; display:block; }
.tf-fv__bg .b1{
  right:-4%; top:-28%; width:58%; height:156%; transform:skewX(-13deg);
  background:linear-gradient(185deg,#eef4ff 0%,#dbe7fc 55%,#cadcfa 100%);
}
.tf-fv__bg .b2{
  right:-5%; top:-28%; width:17%; height:156%; transform:skewX(-13deg);
  background:linear-gradient(185deg,#82a8f2,#3f6fdf);
}
.tf-fv__bg .b3{
  left:0; right:0; bottom:0; height:22%;
  background:linear-gradient(180deg,rgba(234,241,255,0),#e8f0fd);
}
.tf-fv__inner{
  position:relative; z-index:2;
  width:min(1320px, calc(100% - 64px)); margin-inline:auto;
  min-height:720px; box-sizing:border-box;
  padding:calc(var(--header-h) + 48px) 0 56px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.98fr);
  column-gap:64px; align-items:center;
}
.tf-fv__copy{ width:100%; }
.tf-fv__kicker{
  margin:0 0 26px; display:inline-flex; align-items:center; gap:11px;
  padding:10px 22px 10px 18px; border-radius:999px;
  background:var(--t-blue-bg); color:#1d4fd8;
  font-size:15px; font-weight:700; letter-spacing:.02em;
}
.tf-fv__kicker i{
  width:9px; height:9px; border-radius:50%; background:var(--t-blue); flex:none;
}
.tf-fv__h1{
  margin:0 0 26px; font-family:var(--font); font-weight:900; color:var(--fv-ink);
  font-size:clamp(30px,3.1vw,48px); line-height:1.32; letter-spacing:.005em;
}
.tf-fv__h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#2f6bf0,#3b9bf5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tf-nw{ display:inline-block; }
.tf-fv__lead{ margin:0; font-size:clamp(15px,1.05vw,17px); font-weight:500; line-height:1.9; color:#2b2c40; }
.tf-fv__cta{ width:100%; margin-top:36px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }

/* FV：ノートPCの管理画面モック（実機の盗品アラート画面） */
.tf-fv__mock{
  position:relative; z-index:1; width:100%;
}
.tf-laptop{ width:100%; transform:perspective(2600px) rotateY(-6deg) rotateX(1.2deg); transform-origin:left center; }
.tf-laptop__screen{
  padding:14px 14px 16px; background:linear-gradient(165deg,#4b5264,#272d3c);
  border-radius:17px 17px 5px 5px; box-shadow:0 48px 90px rgba(18,34,80,.3);
}
.tf-laptop__base{
  display:block; width:calc(100% + 54px); height:19px; margin:0 0 0 -27px;
  border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#e4e8ef,#aeb7c6);
  position:relative;
}
.tf-laptop__base::after{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:118px; height:7px; border-radius:0 0 8px 8px; background:#919aad;
}

.tf-laptop__img{ display:block; width:100%; height:auto; border-radius:4px; }

/* ⑤：アラートを実機の画面として見せる小さめのPC枠 */
.tf-laptop.is-sm{ transform:none; }
.tf-laptop.is-sm .tf-laptop__screen{ padding:11px 11px 13px; border-radius:14px 14px 4px 4px; box-shadow:0 26px 52px rgba(18,30,70,.2); }
.tf-laptop.is-sm .tf-laptop__base{ width:calc(100% + 44px); margin-left:-22px; height:15px; }
.tf-laptop.is-sm .tf-laptop__base::after{ width:88px; height:6px; }

/* ---------- ② 実績（本体LPの .f-proof をそのまま流用） ---------- */
.tf .f-proof{ margin-top:-72px; }
.tf-proof__tx{
  margin:26px auto 0; text-align:center;
  font-size:15px; line-height:1.95; color:var(--t-sub);
}

/* ---------- ③ 検知します（課題カード＋対比） ---------- */
.tf-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.tf-cards li{
  padding:34px 26px 30px; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:24px;
}
.tf-cards__ic{
  width:82px; height:82px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #fff 0%, #eef4ff 55%, #e3edff 100%);
  box-shadow:0 6px 18px rgba(60,110,220,.10);
}
.tf-cards__ic svg{ width:34px; height:34px; fill:none; stroke:url(#tfIcGrad); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tf-cards li b{ margin-top:18px; font-family:var(--head); font-size:17px; font-weight:900; line-height:1.7; }
.tf-cards li p{ margin:12px 0 0; font-size:13.5px; line-height:1.95; color:var(--t-sub); }

/* 課題→解決の対比ブロック */
.tf-answer{
  margin-top:40px; display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1.22fr); align-items:center;
}
.tf-answer__col{ border-radius:22px; }
.tf-answer__label{
  margin:0 0 14px; display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:800; letter-spacing:.04em;
}
.tf-answer .is-bad{
  padding:32px 30px; background:#fff; border:1px solid var(--t-line);
}
.tf-answer .is-bad .tf-answer__label{
  padding:6px 14px; border-radius:999px; background:#eef1f6; color:#5b6476;
}
.tf-answer__tx{ margin:0; font-size:14.5px; line-height:2; color:var(--t-sub); }
.tf-answer__tx b{ color:var(--t-ink); font-weight:800; }

.tf-answer__arrow{
  justify-self:center; width:46px; height:46px; border-radius:50%; position:relative;
  background:#fff; border:1px solid var(--t-line); box-shadow:0 8px 18px rgba(16,24,40,.08);
}
.tf-answer__arrow::before{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:12px;
  margin:-6px 0 0 -8px; transform:rotate(45deg);
  border-top:2.5px solid var(--t-blue); border-right:2.5px solid var(--t-blue); border-radius:2px;
}

.tf-answer .is-good{
  position:relative; overflow:hidden; padding:40px 38px; color:#fff;
  background:linear-gradient(135deg,#0f1b33 0%,#17294a 60%,#1c3156 100%);
  box-shadow:0 26px 52px rgba(15,27,51,.26);
}
.tf-answer .is-good::after{
  content:""; position:absolute; right:-70px; top:-90px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle, rgba(59,120,255,.40), transparent 68%);
}
.tf-answer .is-good > *{ position:relative; z-index:1; }
.tf-answer .is-good .tf-answer__label{ color:#8db6ff; }
.tf-answer .is-good .tf-answer__label i{
  width:9px; height:9px; border-radius:50%; background:#4d8bff; flex:none;
  box-shadow:0 0 0 5px rgba(77,139,255,.26);
}
.tf-answer__main{
  margin:0; font-family:var(--head); font-weight:900;
  font-size:clamp(19px,1.9vw,26px); line-height:1.66; letter-spacing:.01em;
}
.tf-answer__main em{ font-style:normal; color:#7fd3ff; }
.tf-answer__sub{ margin:16px 0 0; font-size:13.5px; line-height:1.9; color:rgba(255,255,255,.76); }
.tf .f-head h2{ margin-top:0; }
.tf-reg__ic{
  width:48px; height:48px; margin-bottom:14px; display:grid; place-items:center;
  border-radius:13px; background:var(--t-blue-bg);
}
.tf-reg__ic svg{ width:24px; height:24px; fill:none; stroke:var(--t-blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tf-form{ margin-top:22px; padding:26px 26px 22px; background:#fff; border:1px solid var(--t-line); border-radius:14px; }
.tf-form__h{ margin:0 0 18px; font-size:16px; font-weight:900; }

/* ---------- ④ アラートのデモ ---------- */
.tf-demo{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 50% 72%, #e9f1ff 0%, rgba(233,241,255,0) 70%),
    #fff;
}
.tf-demo > *{ position:relative; z-index:1; }
.tf-demo__wrap{ max-width:820px; margin:0 auto; }
.tf-laptop.is-demo{ transform:none; }
.tf-laptop.is-demo .tf-laptop__screen{ padding:12px 12px 14px; border-radius:15px 15px 4px 4px; box-shadow:0 30px 58px rgba(18,30,70,.22); }
.tf-laptop.is-demo .tf-laptop__base{ width:calc(100% + 50px); margin-left:-25px; height:16px; }
.tf-demo__cap{ margin:16px 0 0; text-align:center; font-size:11.5px; color:#8d8f98; }

.tf-demo__app{
  position:relative; overflow:hidden; border-radius:5px; background:#fff;
  aspect-ratio:16/10; display:flex; flex-direction:column;
  font-size:clamp(7px, 1.42vw, 13px); line-height:1.5; color:#2a3242;
}
.tf-demo__bar{ flex:none; display:flex; align-items:center; gap:.8em; padding:.8em 1.2em; background:#d6382c; }
.tf-demo__bar span{ width:1.4em; height:.95em; border-radius:.15em; background:rgba(255,255,255,.85); }
.tf-demo__bar b{ color:#fff; font-size:1.1em; font-weight:900; }
.tf-demo__body{ flex:1; min-height:0; padding:1.5em 1.7em; background:#f5f7fa; }

.tf-demo__field{ margin-bottom:1.2em; }
.tf-demo__field small{ display:block; margin-bottom:.45em; font-size:.85em; color:#8992a5; }
.tf-demo__type{
  position:relative; margin:0; padding:.6em .8em; height:2.6em; box-sizing:border-box;
  background:#fff; border:1px solid #d9dfe9; border-radius:.35em;
  font-size:.95em; font-weight:700; white-space:nowrap; overflow:hidden;
}
.tf-demo__type i{
  display:inline-block; font-style:normal; overflow:hidden; white-space:nowrap;
  vertical-align:bottom; width:0; animation:tfType 9s linear infinite;
}
.tf-demo__type::after{
  content:""; position:absolute; top:.6em; bottom:.6em; width:1.5px; background:var(--t-blue);
  left:.8em; animation:tfCaret 9s linear infinite;
}
@keyframes tfType{ 0%,4%{width:0} 22%{width:8.4em} 96%{width:8.4em} 100%{width:0} }
@keyframes tfCaret{
  0%,3%{ opacity:0; transform:translateX(0) }
  4%{ opacity:1 }
  22%{ opacity:1; transform:translateX(8.4em) }
  30%{ opacity:0; transform:translateX(8.4em) }
  100%{ opacity:0; transform:translateX(8.4em) }
}

.tf-demo__rows{ list-style:none; margin:0; padding:0; display:grid; gap:.6em; }
.tf-demo__row{
  display:flex; align-items:center; gap:.9em; padding:.7em .85em;
  background:#fff; border:1px solid #e9edf4; border-radius:.4em;
  opacity:0; transform:translateY(.6em); animation:tfRow 9s ease infinite;
}
.tf-demo__row.is-2{ animation-delay:.35s; }
.tf-demo__row.is-3{ animation-delay:.7s; }
.tf-demo__row.is-4{ animation-delay:1.05s; }
@keyframes tfRow{ 0%,24%{opacity:0;transform:translateY(.6em)} 30%,96%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(.6em)} }
.tf-demo__th{
  width:1.9em; height:2.6em; border-radius:.2em; flex:none;
  background:linear-gradient(150deg,#9db4ec,#5f7fd4 52%,#3d59ac);
}
.tf-demo__th.is-b{ background:linear-gradient(150deg,#ffd7a8,#ff9f6e 45%,#e4643a); }
.tf-demo__th.is-c{ background:linear-gradient(150deg,#ffe6a8,#ffc44f 45%,#e0981e); }
.tf-demo__th.is-d{ background:linear-gradient(150deg,#d6f3dd,#8ed6a4 45%,#4da773); }
.tf-demo__row em{ flex:1; font-style:normal; font-size:.9em; font-weight:700; }
.tf-demo__row b{ font-size:.9em; font-weight:900; }

.tf-demo__scan{
  margin:1em 0 0; display:flex; align-items:center; gap:.5em;
  font-size:.85em; font-weight:700; color:var(--t-blue); opacity:0;
  animation:tfScan 9s ease infinite;
}
.tf-demo__scan i{
  width:.9em; height:.9em; border-radius:50%; flex:none;
  border:1.5px solid rgba(37,99,235,.3); border-top-color:var(--t-blue);
  animation:tfSpin .8s linear infinite;
}
@keyframes tfScan{ 0%,32%{opacity:0} 36%,44%{opacity:1} 48%,100%{opacity:0} }
@keyframes tfSpin{ to{ transform:rotate(360deg) } }

.tf-demo__veil{
  position:absolute; inset:0; background:rgba(28,38,66,.38); opacity:0;
  animation:tfVeil 9s ease infinite;
}
@keyframes tfVeil{ 0%,48%{opacity:0} 53%,92%{opacity:1} 97%,100%{opacity:0} }

.tf-demo__alert{
  position:absolute; left:50%; top:50%; z-index:2; width:76%; padding:1.5em 1.7em 1.4em;
  box-sizing:border-box; background:#fff; border-radius:.8em;
  box-shadow:0 1.8em 3.6em rgba(18,30,70,.3);
  opacity:0; transform:translate(-50%,-44%) scale(.94);
  animation:tfAlert 9s cubic-bezier(.2,.9,.3,1) infinite;
}
@keyframes tfAlert{
  0%,48%{ opacity:0; transform:translate(-50%,-44%) scale(.94) }
  54%,92%{ opacity:1; transform:translate(-50%,-50%) scale(1) }
  97%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.98) }
}
.tf-demo__alerth{
  position:relative; margin:0 0 .8em; padding-left:1.8em;
  font-size:1.1em; font-weight:900; line-height:1.55; color:var(--t-alert);
}
.tf-demo__alerth svg{ position:absolute; left:0; top:.12em; width:1.3em; height:1.3em; fill:none; stroke:var(--t-alert); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tf-demo__alerttx{ margin:0 0 .9em; font-size:.88em; line-height:1.85; color:#3b4253; }
.tf-demo__dl{ margin:0; padding:.8em .95em; display:grid; gap:.4em; background:#f1f4f8; border-radius:.45em; }
.tf-demo__dl > div{ display:grid; grid-template-columns:5em minmax(0,1fr); gap:.6em; }
.tf-demo__dl dt{ font-size:.8em; color:#6b7488; }
.tf-demo__dl dd{ margin:0; font-size:.85em; font-weight:700; }
.tf-demo__btn{ margin:1.1em 0 0; display:flex; justify-content:flex-end; gap:.6em; }
.tf-demo__btn span,.tf-demo__btn em{
  min-width:6.8em; padding:.6em .8em; text-align:center; border-radius:.35em;
  font-style:normal; font-size:.85em; font-weight:800;
}
.tf-demo__btn span{ border:1px solid #d9dfe8; color:var(--t-ink); }
.tf-demo__btn em{ background:var(--t-alert); color:#fff; }

@media (prefers-reduced-motion: reduce){
  .tf-demo__type i{ width:8.4em; animation:none; }
  .tf-demo__type::after,.tf-demo__scan{ display:none; }
  .tf-demo__row,.tf-demo__veil,.tf-demo__alert{ animation:none; opacity:1; }
  .tf-demo__row{ transform:none; }
  .tf-demo__alert{ transform:translate(-50%,-50%); }
}

/* ---------- ⑦ 登録 ---------- */
.tf-reg__steps{ list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tf-reg__steps li{ padding:24px 22px 26px; border:1px solid var(--t-line); border-radius:8px; }
.tf-reg__steps b{
  display:inline-block; margin-bottom:12px; font-family:var(--num); font-size:12.5px;
  font-weight:800; letter-spacing:.1em; color:#fff; background:var(--t-blue);
  padding:3px 10px; border-radius:4px;
}
.tf-reg__steps strong{ display:block; margin-bottom:8px; font-size:17px; font-weight:900; }
.tf-reg__steps span{ font-size:13.5px; line-height:1.85; color:var(--t-sub); }
.tf-reg__box{ padding:30px 32px 32px; background:var(--t-paper); border:1px solid var(--t-line); border-radius:8px; }
.tf-reg__boxh{ margin:0 0 16px; font-family:var(--head); font-size:17px; font-weight:900; }
.tf-reg__need{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.tf-reg__need li{ position:relative; padding-left:26px; font-size:14.5px; font-weight:700; line-height:1.7; }
.tf-reg__need li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:8px;
  border-left:2.5px solid var(--t-blue); border-bottom:2.5px solid var(--t-blue);
  transform:rotate(-45deg);
}
.tf-reg__police{ margin:24px 0 0; font-size:13.5px; line-height:1.95; color:var(--t-sub); }
.tf-reg__police b{ color:var(--t-ink); }

/* 見出しを左、補足を右に置く2カラムの導入部（⑥で使用） */
.tf-split{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px; align-items:start; margin-bottom:52px;
}
.tf-split__h{
  margin:0; font-family:var(--head); font-weight:900;
  font-size:clamp(26px,2.9vw,40px); line-height:1.4; letter-spacing:.01em;
}
.tf-split__lead{
  margin:8px 0 0; padding-left:26px; border-left:2px solid #c6d4ea;
  font-size:15px; line-height:2.05; color:var(--t-sub);
}
.tf-split__lead b{ color:var(--t-ink); font-weight:800; }

/* ---------- ⑥ 業界で守る ---------- */
.tf-ally__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.tf-ally__list li{ padding:32px 28px 30px; background:#fff; border:1px solid var(--t-line); border-radius:18px; }
.tf-ally__ic{
  width:56px; height:56px; margin-bottom:18px; display:grid; place-items:center;
  border-radius:15px; background:var(--t-blue-bg);
}
.tf-ally__ic svg{ width:27px; height:27px; fill:none; stroke:var(--t-blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tf-ally__list b{ display:block; margin-bottom:11px; font-family:var(--head); font-size:18px; font-weight:900; line-height:1.6; }
.tf-ally__list p{ margin:0; font-size:13.8px; line-height:1.95; color:var(--t-sub); }
.tf-ally__note{
  margin:34px 0 0; padding:22px 26px; border-radius:12px;
  background:var(--t-deep-bg); font-size:14px; line-height:1.95; color:var(--t-deep); text-align:center;
}

/* ---------- ⑧ メッセージ ---------- */
.tf-msg{
  position:relative; overflow:hidden; color:#fff;
  padding:120px 0;
  background:
    radial-gradient(1100px 700px at 12% 10%, #0d2449 0%, rgba(13,36,73,0) 62%),
    linear-gradient(140deg,#061428 0%,#07182f 45%,#061225 100%);
}

/* 右側の光：青い円を暗い円で欠けさせて三日月をつくる */
.tf-msg__glow{
  position:absolute; right:-9%; top:50%; transform:translateY(-50%);
  width:min(880px,58vw); aspect-ratio:1; pointer-events:none;
}
.tf-msg__glow::before{
  content:""; position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle at 60% 50%, #7cb6ff 0%, #3b86ff 26%, #1f5ddb 44%, #10367f 60%, rgba(8,26,56,0) 76%);
}
.tf-msg__glow::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  transform:translateX(-17%);
  background:radial-gradient(circle at 54% 50%, #061428 62%, rgba(6,20,40,.9) 82%, rgba(6,20,40,0) 100%);
}
.tf-msg__arc{
  position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:min(760px,54vw); aspect-ratio:.82; border-radius:50%;
  border:1.5px solid rgba(120,175,255,.22);
  border-right-color:transparent; border-bottom-color:transparent;
  pointer-events:none;
}
.tf-msg__arc.is-2{
  right:-4%; width:min(960px,66vw); aspect-ratio:.88;
  border-color:rgba(120,175,255,.12);
  border-right-color:transparent; border-top-color:transparent;
}

.tf-msg__inner{ position:relative; z-index:1; }
.tf-msg__label{
  margin:0 0 26px; display:inline-block; padding:10px 24px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.05);
  font-size:13.5px; font-weight:700; letter-spacing:.03em;
}
.tf-msg__h{
  margin:0 0 42px; font-family:var(--head); font-weight:900;
  font-size:clamp(30px,3.6vw,50px); line-height:1.3; letter-spacing:.005em;
}
.tf-msg__h em{ font-style:normal; color:#59a2ff; }

.tf-msg__body{
  max-width:720px; padding-left:28px; border-left:1px solid rgba(255,255,255,.16);
}
.tf-msg__tx{ margin:0 0 26px; font-size:15.5px; line-height:2.1; color:rgba(255,255,255,.76); }
.tf-msg__strong{
  margin:0 0 26px; font-size:16.5px; font-weight:800; line-height:2; color:#fff;
}
.tf-msg__lead{
  margin:42px 0 20px; font-family:var(--head);
  font-size:clamp(21px,2.1vw,28px); font-weight:900; line-height:1.6; color:#fff;
}
.tf-msg__lead em{ font-style:normal; color:#59a2ff; }
.tf-msg__sign{
  position:relative; margin:64px 0 0; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--head); font-size:16px; font-weight:900; text-align:right;
}

/* ---------- ⑩ FAQ ---------- */
.tf-faq__list{ border-top:1px solid var(--t-line); }
.tf-faq__list details{ border-bottom:1px solid var(--t-line); }
.tf-faq__list summary{
  list-style:none; cursor:pointer; position:relative; padding:20px 44px 20px 0;
  font-size:15.5px; font-weight:800; line-height:1.65;
}
.tf-faq__list summary::-webkit-details-marker{ display:none; }
.tf-faq__list summary i{
  position:absolute; right:8px; top:26px; width:11px; height:11px;
  border-right:2px solid var(--t-sub); border-bottom:2px solid var(--t-sub);
  transform:rotate(45deg); transition:transform .2s ease;
}
.tf-faq__list details[open] summary i{ transform:rotate(-135deg); }
.tf-faq__list p{ margin:0; padding:0 0 22px; font-size:14.5px; line-height:2; color:var(--t-sub); }

/* ---------- ⑮ クロージング ---------- */
.tf-last{ padding:80px 0; background:var(--t-ink); color:#fff; text-align:center; }
.tf-last__h{ margin:0 0 16px; font-family:var(--head); font-size:clamp(26px,3.4vw,38px); font-weight:900; line-height:1.45; }
.tf-last__tx{ margin:0 0 32px; font-size:15px; line-height:2; color:#b4b8c2; }
.tf-last__cta{ width:min(470px,100%); margin-inline:auto; display:flex; flex-direction:column; gap:16px; }
.tf-last__tel{ margin:22px 0 0; font-size:12.5px; color:#8d929c; }

/* =========================================================
   タブレット
   ========================================================= */
@media (max-width:1300px){
  /* 2カラムだとコピーとPCが窮屈になるので縦積みにする */
  .tf-fv__bg .b1{ right:-26%; top:auto; bottom:-12%; width:118%; height:54%; transform:skewY(-8deg); }
  .tf-fv__bg .b2{ right:-42%; top:auto; bottom:-26%; width:118%; height:24%; transform:skewY(-8deg); }
  .tf-fv__inner{ min-height:0; padding:calc(var(--header-h) + 36px) 0 0; }
  /* CTAは .tf-fv__copy の中、PC画面はその外。display:contents で
     コピーの子を .tf-fv__inner の直接の子に昇格させ、order で並べ替える */
  .tf-fv__inner{ display:flex; flex-direction:column; align-items:flex-start; }
  .tf-fv__copy{ display:contents; }
  .tf-fv__kicker{ order:1; }
  .tf-fv__h1{ order:2; }
  .tf-fv__lead{ order:3; }
  .tf-fv__mock{ order:4; }
  .tf-fv__cta{ order:5; }
  .tf-fv__h1, .tf-fv__lead, .tf-fv__cta{ width:100%; max-width:660px; }
  .tf-fv__mock{
    position:static; transform:none;
    width:min(900px, calc(100% - 44px)); margin:36px auto 52px;
  }
  .tf-laptop{ transform:none; }
}

@media (max-width:1000px){
  .tf-reg__ic{ width:42px; height:42px; margin-bottom:11px; }
  .tf-form{ padding:20px 16px 18px; }
}

/* =========================================================
   スマホ
   ========================================================= */
@media (max-width:860px){
  body.tf{ padding-bottom:64px; }
  .tf-fv__inner{ width:calc(100% - 32px); padding-top:calc(var(--header-h) + 24px); }
  .tf-fv__kicker{ margin-bottom:16px; padding:7px 14px 7px 12px; gap:8px; font-size:11.5px; }
  .tf-fv__kicker i{ width:7px; height:7px; }
  .tf-fv__h1{ margin-bottom:16px; font-size:clamp(23px,6.6vw,29px); line-height:1.46; }
  .tf-nw{ display:inline; }
  .tf-fv__lead{ margin-bottom:22px; font-size:13.8px; line-height:1.95; }
  .tf-fv__lead br{ display:none; }
  .tf-fv__cta{ grid-template-columns:1fr; margin-top:28px; gap:12px; }
  .tf-fv__mock{ width:calc(100% - 32px); margin:28px auto 40px; }
  .tf-laptop__screen{ padding:7px 7px 8px; border-radius:10px 10px 3px 3px; box-shadow:0 20px 38px rgba(18,34,80,.24); }
  .tf-laptop__base{ width:calc(100% + 30px); margin-left:-15px; height:11px; }
  .tf-laptop__base::after{ width:56px; height:4px; }
  /* .is-sm / .is-demo の指定が詳細度で勝つので、底面の張り出しを個別に抑える */
  .tf-laptop.is-demo .tf-laptop__base{ width:calc(100% + 26px); margin-left:-13px; height:11px; }
  .tf-laptop.is-demo .tf-laptop__base::after{ width:56px; height:4px; }
  .tf-laptop.is-demo .tf-laptop__screen{ padding:8px 8px 9px; border-radius:11px 11px 3px 3px; }
  .tf-demo__wrap{ margin-bottom:0; }
  .tf-laptop.is-sm .tf-laptop__base{ width:calc(100% + 26px); margin-left:-13px; height:11px; }
  .tf-laptop.is-sm .tf-laptop__base::after{ width:56px; height:4px; }
  .tf-laptop.is-sm .tf-laptop__screen{ padding:8px 8px 9px; border-radius:11px 11px 3px 3px; }
  .tf-br{ display:none; }
    



  .tf-reg__steps{ grid-template-columns:1fr; gap:12px; margin-bottom:24px; }
  .tf-reg__steps li{ display:block; position:relative; padding:20px 18px 20px 84px; border-radius:14px; }
  .tf-reg__ic{ position:absolute; left:18px; top:20px; width:48px; height:48px; margin:0; }
  .tf-reg__steps b{ margin-bottom:6px; }
  .tf-reg__steps strong{ font-size:16px; }
  .tf-reg__box{ padding:22px 18px 24px; }
  .tf-reg__need li{ font-size:13.8px; }
  .tf-reg__police{ font-size:12.8px; }

  .tf-faq__list summary{ padding:16px 36px 16px 0; font-size:14.5px; }
  .tf-faq__list summary i{ top:22px; width:9px; height:9px; }
  .tf-faq__list p{ padding-bottom:18px; font-size:13.8px; line-height:1.9; }

  .tf-last{ padding:52px 0; }
  .tf-last__tx{ margin-bottom:26px; font-size:14px; }
  .tf-last__cta{ flex-direction:column; }

  .tf .f-header__actions .tf-navcta{ display:inline-flex; min-height:40px; padding:0 14px; font-size:12px; }
  .tf .f-mobile-cta.tf-mcta{ grid-template-columns:1fr; }
  .tf .f-mobile-cta.tf-mcta a:first-child{
    color:#fff; border:0; background:var(--t-blue);
    box-shadow:0 8px 20px rgba(37,99,235,.3);
  }
}

@media (max-width:860px){
  /* 課題カードは縦積み＋アイコン左置きに */
  .tf-msg{ padding:70px 0; }
  .tf-msg__glow{ right:-40%; top:14%; width:min(560px,120vw); transform:none; }
  .tf-msg__arc, .tf-msg__arc.is-2{ display:none; }
  .tf-msg__h{ font-size:clamp(23px,6vw,30px); line-height:1.45; margin-bottom:28px; }
  .tf-msg__label{ margin-bottom:18px; padding:8px 18px; font-size:12px; }
  .tf-msg__body{ padding-left:16px; }
  .tf-msg__tx{ font-size:14px; line-height:1.95; margin-bottom:20px; }
  .tf-msg__strong{ font-size:15px; line-height:1.9; margin-bottom:20px; }
  .tf-msg__lead{ margin:30px 0 16px; font-size:19px; line-height:1.6; }
  .tf-msg__sign{ margin-top:44px; padding-top:20px; font-size:14.5px; }
  .tf-split{ grid-template-columns:1fr; gap:18px; margin-bottom:32px; }
  .tf-split__h{ font-size:clamp(22px,5.8vw,27px); line-height:1.5; }
  .tf-split__lead{ padding-left:16px; font-size:13.8px; line-height:1.95; }
  .tf-split__lead br{ display:none; }
  .tf-ally__list{ grid-template-columns:1fr; gap:14px; }
  .tf-ally__list li{ display:block; position:relative; padding:20px 20px 20px 88px; border-radius:16px; }
  .tf-ally__ic{ position:absolute; left:20px; top:20px; width:52px; height:52px; margin:0; border-radius:13px; }
  .tf-ally__ic svg{ width:24px; height:24px; }
  .tf-ally__list b{ margin-bottom:7px; font-size:15.5px; }
  .tf-ally__list b br{ display:none; }
  .tf-ally__list p{ font-size:13px; }
  .tf-ally__note{ margin-top:24px; padding:18px 16px; font-size:13px; text-align:left; }
  .tf-cards{ grid-template-columns:1fr; gap:14px; }
  .tf-cards li{ display:block; position:relative; padding:20px 20px 20px 88px; text-align:left; border-radius:18px; }
  .tf-cards__ic{ position:absolute; left:20px; top:20px; width:52px; height:52px; }
  .tf-cards__ic svg{ width:24px; height:24px; }
  .tf-cards li b{ margin-top:0; font-size:15.5px; line-height:1.6; }
  .tf-cards li b br{ display:none; }
  .tf-cards li p{ margin-top:7px; font-size:13px; line-height:1.9; }
  .tf-answer{ grid-template-columns:1fr; margin-top:28px; }
  .tf-answer__arrow{ transform:rotate(90deg); margin:12px 0; }
  .tf-answer .is-bad{ padding:24px 22px; border-radius:18px; }
  .tf-answer .is-good{ padding:28px 24px; border-radius:18px; }
  .tf-answer__tx{ font-size:13.5px; line-height:1.95; }
  .tf-answer__main{ font-size:18px; line-height:1.6; }
  .tf-answer__main br{ display:none; }
  .tf-answer__sub{ font-size:12.5px; }
}

@media (max-width:640px){
}

@media (max-width:430px){
  /* 画面比を保ったまま入りきらないので、最下行を畳む */
  .tf-demo__row.is-4{ display:none; }
}


/* 実績セクション(.f-proof)は margin-top:-72px でFVに重なる設計。
   640px以下ではFVのCTAが最下端まで来るため、2つ目のボタン
   「照合の仕組みを見る」が覆われて押せなくなっていた。
   重なり分の余白をFVの下に確保する。 */
@media (max-width:640px){
  .tf-fv{ padding-bottom:84px; }
}