@charset "utf-8";
/* ==========================================================================
   Previento 製品ページ（refs #1031）
   色はロゴ（シールドの緑→青）に合わせる。文字色は白地・濃色地それぞれで AA を満たす濃さに寄せてある
   ========================================================================== */

:root{
  --pv-blue:#3DB8F0;
  --pv-green:#7CC242;
  --pv-alert:#E5484D;
  --pv-dark:#0a0f18;
  --pv-dark2:#111a27;
  --pv-txt:#1f2937;
  --pv-sub:#4b5563;
  --pv-mute:#6b7280;
  --pv-bgl:#F6F8FB;
  --pv-line:#e3e8ef;
  --pv-ink:#1a6489;      /* 白地の強調文字（7.0:1） */
  --pv-ink-g:#3f6c1a;    /* 白地の緑系文字 */
  --pv-grad:linear-gradient(120deg,#7CC242,#3DB8F0);
  /* 白文字で AA を満たす濃いめのグラデーション */
  --pv-grad-deep:linear-gradient(120deg,#3f6c1a,#1a6489);
}

.pv *{box-sizing:border-box}
.pv{
  font-family:'M PLUS 1','Noto Sans JP',sans-serif;
  color:var(--pv-txt);
  line-height:1.9;
  overflow-wrap:break-word;
  line-break:strict;
}
.pv img{max-width:100%;height:auto;display:block}
.pv small{display:inline;font-size:inherit;margin:0}
.pv a{color:inherit;text-decoration:none}
.pv-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.pv-nw{white-space:nowrap}

/* --- セクション見出し ------------------------------------------------- */
.pv-sec{padding:88px 0}
.pv-sec--alt{background:var(--pv-bgl)}
.pv-lbl{
  display:block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pv-ink);margin-bottom:12px;
}
.pv-h2{
  word-break:keep-all;
  font-size:clamp(25px,3.4vw,38px);font-weight:800;line-height:1.45;
  letter-spacing:.01em;margin:0 0 18px;color:var(--pv-txt);
}
.pv-h2 em{font-style:normal;color:var(--pv-ink)}
.pv-lead{font-size:16px;color:var(--pv-sub);margin:0 0 46px;max-width:760px}

/* --- ヒーロー ---------------------------------------------------------- */
.pv-hero{position:relative;background:var(--pv-dark);color:#fff;overflow:hidden}
.pv-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:.55}
.pv-hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,15,24,.97) 0%,rgba(10,15,24,.9) 48%,rgba(10,15,24,.35) 100%);
}
.pv-hero__inner{position:relative;padding:96px 0 92px;max-width:680px}
.pv-hero__logo{width:300px;margin:0 0 28px}
.pv-hero__badge{
  display:inline-flex;align-items:center;gap:8px;background:rgba(124,194,66,.16);
  border:1px solid rgba(124,194,66,.5);border-radius:24px;padding:7px 17px;
  font-size:12.5px;font-weight:700;color:#b5e08a;margin-bottom:22px;letter-spacing:.04em;
}
.pv-hero__h1{word-break:keep-all;font-size:clamp(30px,4.6vw,52px);font-weight:800;line-height:1.34;margin:0 0 22px;letter-spacing:.005em}
.pv-hero__h1 em{font-style:normal;color:#7fd0ea}
.pv-hero__p{font-size:16px;line-height:2;color:#d3dae4;margin:0 0 32px;max-width:580px}
.pv-hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:42px}
.pv-btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:50px;
  font-weight:700;font-size:14.5px;transition:transform .18s,box-shadow .18s,background .18s;
}
.pv-btn:hover{transform:translateY(-2px)}
.pv a.pv-btn--p{background:var(--pv-grad-deep);color:#fff;box-shadow:0 6px 22px rgba(26,100,137,.42)}
.pv a.pv-btn--o{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.pv-btn--o:hover{background:rgba(255,255,255,.1)}
.pv-hero__stats{display:flex;flex-wrap:wrap;gap:36px}
.pv-hstat{display:flex;flex-direction:column}
.pv-hstat__n{
  display:block;font-family:'Montserrat',sans-serif;font-size:32px;font-weight:800;
  line-height:1.2;color:#9fd66b;white-space:nowrap;
}
.pv-hstat__n small{display:inline;font-size:15px;font-weight:700;margin:0 0 0 3px}
.pv-hstat__l{font-size:12.5px;color:#aab4c2;letter-spacing:.04em;white-space:nowrap}

/* --- 統計（濃色） ------------------------------------------------------ */
.pv-dark-sec{background:var(--pv-dark2);color:#fff;padding:88px 0}
.pv-dark-sec .pv-h2{color:#fff}
.pv-dark-sec .pv-h2 em{color:#ff8a80}
.pv-dark-sec .pv-lead{color:#c3ccd8}
.pv-dark-sec .pv-lbl{color:#7fd0ea}
.pv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pv-stat{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:26px 22px;border-top:3px solid var(--pv-alert);
}
.pv-stat__n{
  display:block;font-family:'Montserrat',sans-serif;font-size:40px;font-weight:800;line-height:1.15;
  color:#ff8a80;white-space:nowrap;
}
.pv-stat__n small{font-size:16px;font-weight:700;margin-left:4px;color:#ffb3ad}
.pv-stat__l{display:block;font-size:14px;font-weight:700;color:#fff;margin:10px 0 4px;word-break:keep-all}
.pv-stat__s{display:block;font-size:12.5px;color:#aab4c2;line-height:1.75}
.pv-src{font-size:12.5px;color:#aab4c2;margin:22px 0 0}
.pv-src a{color:#9ad7ec;text-decoration:underline}

/* --- 事故類型カード ---------------------------------------------------- */
.pv-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pv-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.pv-case{background:#fff;border:1px solid var(--pv-line);border-radius:12px;overflow:hidden}
.pv-case img{aspect-ratio:4/3;object-fit:cover;width:100%}
.pv-case__body{padding:24px 24px 26px}
.pv-case__tag{
  display:inline-block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:#b42318;background:#fdecea;border-radius:4px;padding:3px 9px;margin-bottom:12px;
}
.pv-case__t{word-break:keep-all;font-size:17.5px;font-weight:700;margin:0 0 8px;line-height:1.6}
.pv-case__p{font-size:14px;color:var(--pv-sub);margin:0;line-height:1.95}

/* --- 仕組み（3ステップ・画像付き） ------------------------------------- */
.pv-step{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
.pv-step:last-child{margin-bottom:0}
.pv-step--rev .pv-step__img{order:2}
.pv-step__img img{border-radius:14px;box-shadow:0 18px 44px rgba(10,15,24,.18);width:100%}
.pv-step__img--tall img{max-height:460px;width:auto;margin:0 auto}
.pv-step__no{
  display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-size:12px;
  font-weight:800;letter-spacing:.2em;color:var(--pv-ink);margin-bottom:10px;
}
.pv-step__no b{
  width:32px;height:32px;border-radius:50%;background:var(--pv-grad-deep);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:0;
}
.pv-step__t{word-break:keep-all;overflow-wrap:anywhere;font-size:clamp(21px,2.6vw,27px);font-weight:800;margin:0 0 14px;line-height:1.5}
.pv-step__p{font-size:15px;color:var(--pv-sub);margin:0 0 14px;line-height:2}
.pv-step__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pv-step__list li{display:flex;gap:10px;font-size:14px;color:var(--pv-txt);line-height:1.8}
.pv-step__list i{color:var(--pv-ink-g);margin-top:6px;flex:0 0 auto}

/* --- 構成図（HTML/CSS。画像にすると小さい画面で読めなくなるため） ------ */
.pv-diagram{background:#fff;border:1px solid var(--pv-line);border-radius:14px;padding:30px;margin-top:8px}
.pv-diagram__cap{font-size:13px;color:var(--pv-mute);margin:16px 0 0;text-align:center}
.pv-dg{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center}
.pv-dg__col{background:var(--pv-bgl);border:1px solid var(--pv-line);border-radius:11px;padding:20px 18px}
.pv-dg__col--hi{background:#f2f9ec;border-color:#9fd66b;box-shadow:0 0 0 3px rgba(124,194,66,.16)}
.pv-dg__ttl{
  display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:#3d4a5c;
  margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--pv-line);word-break:keep-all;
}
.pv-dg__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pv-dg__list li{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--pv-line);
  border-radius:8px;padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--pv-txt);word-break:keep-all;
}
.pv-dg__list li i{color:var(--pv-ink);width:18px;text-align:center}
.pv-dg__link{text-align:center;min-width:110px}
.pv-dg__arrow{display:block;height:3px;background:var(--pv-grad);border-radius:2px;position:relative;margin-bottom:10px}
.pv-dg__arrow::after{
  content:'';position:absolute;right:-2px;top:-5px;border-left:11px solid #3DB8F0;
  border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;
}
.pv-dg__linktxt{font-size:12px;line-height:1.7;color:#4b5563;font-weight:600;word-break:keep-all}

/* --- 料金 -------------------------------------------------------------- */
.pv-price{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:#fff;border:1px solid var(--pv-line);
  border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(10,15,24,.07);
}
.pv-price__main{background:var(--pv-dark);color:#fff;padding:44px 40px}
.pv-price__lbl{display:block;font-size:13px;font-weight:700;color:#9ad7ec;letter-spacing:.08em;margin-bottom:8px}
.pv-price__row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.pv-price__big{font-family:'Montserrat',sans-serif;font-size:52px;font-weight:800;line-height:1.1;color:#fff;white-space:nowrap}
.pv-price__unit{font-size:15px;font-weight:700;color:#d3dae4;white-space:nowrap}
.pv-price__note{font-size:13.5px;color:#c3ccd8;margin:0;line-height:1.9}
.pv-price__side{padding:36px 36px;display:flex;flex-direction:column;gap:18px}
.pv-price__item{display:flex;gap:14px}
.pv-price__ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--pv-grad-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.pv-price__t{font-size:15.5px;font-weight:700;margin:2px 0 4px;word-break:keep-all}
.pv-price__p{font-size:13.5px;color:var(--pv-sub);margin:0;line-height:1.85}

/* --- 導入の流れ -------------------------------------------------------- */
.pv-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:pf;margin-top:44px}
.pv-flow__i{position:relative;background:#fff;border:1px solid var(--pv-line);border-radius:12px;padding:34px 26px 26px}
.pv-flow__i::before{
  counter-increment:pf;content:counter(pf);
  position:absolute;top:-17px;left:26px;width:34px;height:34px;border-radius:50%;
  background:var(--pv-grad-deep);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;
}
.pv-flow__t{word-break:keep-all;font-size:16.5px;font-weight:700;margin:0 0 8px}
.pv-flow__p{font-size:13.8px;color:var(--pv-sub);margin:0;line-height:1.95}

/* --- CTA --------------------------------------------------------------- */
.pv-cta{position:relative;background:var(--pv-dark);color:#fff;padding:84px 0;text-align:center;overflow:hidden}
.pv-cta__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.25}
.pv-cta .pv-wrap{position:relative}
.pv-cta__h2{word-break:keep-all;font-size:clamp(23px,3.2vw,34px);font-weight:800;line-height:1.5;margin:0 0 16px}
.pv-cta__p{font-size:15.5px;margin:0 0 32px;line-height:2;color:#d3dae4}
.pv-cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.pv-cta__note{font-size:12.5px;margin:22px 0 0;color:#c3ccd8}
.pv-cta__note a{color:#9ad7ec;text-decoration:underline}

/* --- 関連記事 ---------------------------------------------------------- */
.pv-related{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--pv-line);border-radius:12px;padding:18px;max-width:760px}
.pv-related img{width:180px;aspect-ratio:1200/630;object-fit:cover;border-radius:8px;flex:0 0 auto}
.pv-related__k{display:block;font-size:12px;font-weight:700;color:var(--pv-ink);letter-spacing:.06em;margin-bottom:4px}
.pv-related__t{font-size:15.5px;font-weight:700;line-height:1.7;margin:0;color:var(--pv-txt)}
.pv-related:hover .pv-related__t{text-decoration:underline}

/* --- パンくず ---------------------------------------------------------- */
.pv-bc{background:var(--pv-bgl);border-bottom:1px solid var(--pv-line);padding:11px 0;font-size:12.5px}
.pv-bc ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;color:var(--pv-mute)}
.pv-bc li+li::before{content:"›";margin-right:8px;color:#9aa4b2}
.pv-bc a{color:var(--pv-ink)}
.pv-bc a:hover{text-decoration:underline}

/* --- レスポンシブ ------------------------------------------------------ */
@media(max-width:1000px){
  .pv-dg{grid-template-columns:1fr;gap:14px}
  .pv-dg__link{min-width:0}
  .pv-dg__arrow{width:3px;height:40px;margin:0 auto 10px}
  .pv-dg__arrow::after{right:auto;left:-5.5px;top:auto;bottom:-2px;
    border-left:6.5px solid transparent;border-right:6.5px solid transparent;
    border-top:11px solid #3DB8F0;border-bottom:none}
}
@media(max-width:900px){
  .pv-stats{grid-template-columns:repeat(2,1fr)}
  .pv-grid3,.pv-flow{grid-template-columns:1fr}
  .pv-grid2{grid-template-columns:1fr}
  .pv-step{grid-template-columns:1fr;gap:26px;margin-bottom:54px}
  .pv-step--rev .pv-step__img{order:0}
  .pv-price{grid-template-columns:1fr}
}
@media(max-width:768px){
  .pv-sec,.pv-dark-sec{padding:62px 0}
  .pv-wrap{padding:0 18px}
  .pv-hero__inner{padding:64px 0 60px}
  .pv-hero__logo{width:230px}
  .pv-hero__bg{opacity:.4}
  .pv-hero__stats{gap:24px}
  .pv-hstat__n{font-size:27px}
  .pv-btn{padding:14px 24px;font-size:14px}
  .pv-hero__btns .pv-btn,.pv-cta__btns .pv-btn{width:100%;justify-content:center}
  .pv-stats{grid-template-columns:1fr}
  .pv-stat__n{font-size:36px}
  .pv-diagram{padding:18px}
  .pv-price__main{padding:34px 24px}
  .pv-price__big{font-size:44px}
  .pv-price__side{padding:28px 22px}
  .pv-related{flex-direction:column;align-items:flex-start}
  .pv-related img{width:100%}
}