/* ==========================================================================
   0. RESET & BASE
   ========================================================================== */
:root{
  --dark-1:#0E1114;
  --dark-2:#16191E;
  --light:#F6F5F1;
  --white:#FFFFFF;
  --gold-1:#8A6D1F;
  --gold-2:#C9A227;
  --gold-3:#E6C766;
  --gold-gradient:linear-gradient(120deg,var(--gold-1) 0%,var(--gold-2) 50%,var(--gold-3) 100%);
  --red:#C8102E;
  --red-bright:#E51A3B;
  --text-onDark:#FFFFFF;
  --text-onDark-sub:#C6CBD2;
  --text-onLight:#1A1D21;
  --text-onLight-sub:#565C63;
  --container:1160px;
  --pad-y-desktop:84px;
  --pad-y-mobile:52px;
  --radius-sm:4px;
  --radius-md:8px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--dark-1);
  color:var(--text-onDark);
  font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
  overflow-x:hidden;
}
html{overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
table{border-collapse:collapse;width:100%;}
.oswald{font-family:'Oswald',sans-serif;}

/* Global gold gradient defs (shared by all inline SVG bolts / icons) */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ==========================================================================
   1. LAYOUT HELPERS
   ========================================================================== */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:28px;min-width:0;}
.section{padding-block:var(--pad-y-desktop);position:relative;scroll-margin-top:88px;}

/* 同系統の背景色が連続する境目は余白が二重になるため詰める（間延び防止） */
.section--light + .section--light,
.section--white + .section--white,
.section--light + .section--white,
.section--white + .section--light,
.section--dark + .section--dark,
.section--dark2 + .section--dark2,
.section--dark + .section--dark2,
.section--dark2 + .section--dark{
  padding-top:calc(var(--pad-y-desktop) * .45);
}
.section--light + .section--light::before,
.section--white + .section--white::before{content:none;}
@media (max-width:768px){
  .section--light + .section--light,
  .section--white + .section--white,
  .section--light + .section--white,
  .section--white + .section--light,
  .section--dark + .section--dark,
  .section--dark2 + .section--dark2,
  .section--dark + .section--dark2,
  .section--dark2 + .section--dark{
    padding-top:calc(var(--pad-y-mobile) * .5);
  }
}
.section--dark{background:var(--dark-1);color:var(--text-onDark);}
.section--dark2{background:var(--dark-2);color:var(--text-onDark);}
.section--light{background:var(--light);color:var(--text-onLight);}
.section--white{background:var(--white);color:var(--text-onLight);}

@media (max-width:900px){
  .section{padding-block:var(--pad-y-mobile);}
  .wrap{padding-inline:20px;}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Oswald',sans-serif;font-weight:600;
  letter-spacing:.14em;font-size:13px;
  color:var(--gold-3);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:11px;height:18px;flex-shrink:0;display:inline-block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M14 0 L2 22 H11 L8 40 L24 15 H14 L18 0 Z' fill='%23C9A227'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;background-position:center;
}

.section-title{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.5;
}
.section-title.on-light{color:var(--text-onLight);}
.section-title .accent{
  background:var(--gold-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-sub{
  margin-top:18px;
  font-size:clamp(.95rem,1.6vw,1.05rem);
  max-width:640px;
}
.section-sub.on-dark{color:var(--text-onDark-sub);}
.section-sub.on-light{color:var(--text-onLight-sub);}

.section-head{margin-bottom:56px;}
.section-head.center{text-align:center;}
.section-head.center .section-sub{margin-inline:auto;}

/* ==========================================================================
   2. LOGO
   ========================================================================== */
.logo{display:inline-flex;align-items:center;gap:10px;}
.logo-img{height:44px;width:auto;display:block;}
.logo-img--footer{height:52px;margin-inline:auto;}
@media (max-width:768px){.logo-img{height:36px;}}
.logo-text{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:26px;letter-spacing:.03em;
  display:inline-flex;align-items:baseline;
  background:var(--gold-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-bolt{width:15px;height:26px;margin:0 1px;transform:translateY(2px);}
.logo-sub{
  display:block;font-family:'Noto Sans JP',sans-serif;font-size:9.5px;
  letter-spacing:.16em;color:var(--text-onDark-sub);margin-top:2px;font-weight:500;
}
.logo-block{display:flex;flex-direction:column;}
@media (max-width:480px){
  .logo-text{font-size:20px;}
  .logo-bolt{width:12px;height:20px;}
  .logo-sub{display:none;}
}
@media (max-width:400px){
  .logo-text{font-size:17px;}
  .logo-bolt{width:10px;height:17px;}
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(12,14,17,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,162,39,.18);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;gap:16px;
}
@media (max-width:600px){.site-header .wrap{height:64px;gap:10px;}}
@media (max-width:400px){.site-header .wrap{padding-inline:16px;gap:8px;}}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;border-radius:6px;border:none;cursor:pointer;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
  white-space:nowrap;
  max-width:100%;
}
@media (max-width:420px){
  .btn-red{white-space:normal;text-align:center;line-height:1.4;}
}
.btn-red{
  background:var(--red);color:#fff;
  padding:20px 46px;font-size:17px;letter-spacing:.02em;
  box-shadow:0 10px 30px rgba(200,16,46,.38);
}
.btn-red:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 14px 34px rgba(200,16,46,.48);}
.btn-red-sm{
  background:var(--red);color:#fff;padding:12px 26px;font-size:14px;
  box-shadow:0 6px 18px rgba(200,16,46,.35);
}
.btn-red-sm:hover{background:var(--red-bright);transform:translateY(-1px);}
.cta-catch{font-size:18px;font-weight:900;margin-bottom:14px;letter-spacing:.02em;}
.section--light .cta-catch{color:var(--text-onLight);}
.section--dark .cta-catch{color:#fff;}
.btn-header{
  background:var(--red);color:#fff;
  padding:11px 20px;font-size:clamp(11px,2.6vw,13.5px);
  border-radius:5px;box-shadow:0 4px 14px rgba(200,16,46,.4);
  flex-shrink:0;line-height:1.3;text-align:center;
}
@media (max-width:400px){
  .btn-header{padding:8px 12px;font-size:10.5px;}
}
.btn-header:hover{background:var(--red-bright);}
.btn-wrap-center{text-align:center;margin-top:48px;}
.arrow{font-family:'Oswald',sans-serif;}

/* ==========================================================================
   5. FIRST VIEW
   ========================================================================== */
#fv{
  position:relative;
  padding-top:calc(76px + 72px);
  padding-bottom:80px;
  overflow:hidden;
  min-height:100vh;
  display:flex;align-items:center;
}
.fv-bg{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(180deg,rgba(6,7,9,.86) 0%,rgba(6,7,9,.9) 60%,rgba(6,7,9,.95) 100%),url('images/fv-bg.jpeg');
  background-size:cover;background-position:center 30%;
}
.fv-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
@media (max-width:900px){
  #fv{padding-top:calc(64px + 40px);}
  .fv-inner{grid-template-columns:1fr;gap:40px;}
}
.fv-label{
  display:inline-block;
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-3);
  border:1px solid rgba(230,199,102,.4);
  padding:8px 16px;border-radius:99px;
  margin-bottom:26px;
  background:rgba(230,199,102,.06);
}
.fv-h1{
  font-size:clamp(2.5rem,5.6vw,4.4rem);
  font-weight:900;line-height:1.35;letter-spacing:.01em;
  margin-bottom:22px;
}
.fv-h1 .gold{
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.fv-sub{
  font-size:clamp(1.05rem,2vw,1.3rem);
  color:var(--text-onDark-sub);font-weight:500;
  margin-bottom:34px;
}
.fv-badge{
  display:flex;align-items:center;gap:8px;
  border:1px solid rgba(201,162,39,.4);
  background:rgba(255,255,255,.03);
  padding:11px 18px;border-radius:99px;
  font-size:14px;font-weight:700;color:#fff;
}
.fv-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-gradient);flex-shrink:0;}
.fv-note{font-size:11.5px;color:#7d838b;margin-top:10px;margin-bottom:34px;}
.fv-strip{
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-block:18px;margin-bottom:32px;
}
.fv-strip-row{display:flex;align-items:center;gap:12px;}
.fv-strip .num{font-size:22px;}
.fv-strip p{font-size:14.5px;color:var(--text-onDark-sub);font-weight:500;}
.fv-strip-note{font-size:12.5px;color:var(--gold-3);font-weight:700;letter-spacing:.02em;}
.fv-price{margin-bottom:34px;}
.fv-price .label{font-size:12.5px;color:var(--text-onDark-sub);letter-spacing:.05em;margin-bottom:6px;}
.fv-price .amount{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;}
.fv-price .amount .unit{font-size:.42em;font-weight:600;margin-left:4px;color:var(--text-onDark-sub);}
.fv-price .note{font-size:12.5px;color:#8a9099;margin-top:6px;}

.fv-visual{display:flex;justify-content:center;}
.fv-product-card{
  position:relative;width:100%;max-width:340px;
  border:1px solid rgba(201,162,39,.35);
  border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  padding:34px 28px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.fv-product-card::before{
  content:"";position:absolute;inset:-40px;z-index:-1;
  background:radial-gradient(circle at 50% 45%,rgba(201,162,39,.28),transparent 65%);
}
.fv-product-card img{margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));}
.fv-product-card .tag{
  text-align:center;margin-top:18px;font-size:12px;color:var(--text-onDark-sub);
  letter-spacing:.04em;
}

/* ==========================================================================
   6. TESTIMONIALS
   ========================================================================== */
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
@media (max-width:800px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,20,20,.06);
  border:1px solid rgba(0,0,0,.05);
}
.testi-photo{width:100%;aspect-ratio:4/3;overflow:hidden;background:#ddd;}
.testi-photo img{width:100%;height:100%;object-fit:cover;}
.testi-body{padding:30px 30px 34px;}
.testi-who{font-size:13px;color:var(--text-onLight-sub);margin-bottom:10px;font-weight:500;}
.testi-quote{
  font-size:19px;font-weight:900;line-height:1.6;margin-bottom:16px;
  color:var(--text-onLight);
}
.testi-quote::before{content:"“";color:var(--gold-2);}
.testi-text{font-size:14.5px;color:var(--text-onLight-sub);}
.testi-note{
  margin-top:36px;font-size:12.5px;color:var(--text-onLight-sub);text-align:center;
}
.voices-badges{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:22px;
}
.voices-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--gold-2);
  background:rgba(201,162,39,.07);
  padding:10px 22px;border-radius:99px;
  font-size:14px;font-weight:700;color:var(--text-onLight);
}
.voices-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-gradient);flex-shrink:0;}
.voices-badge--primary{
  border:1.5px solid var(--gold-2);
  background:var(--gold-gradient);
  color:#1A1D21;
  font-size:16px;
  font-weight:900;
  padding:11px 24px 11px 20px;
  box-shadow:0 8px 22px rgba(201,162,39,.4);
}
.voices-badge--primary .dot{display:none;}
.voices-badge--primary::before{
  content:"";
  width:10px;height:17px;flex-shrink:0;display:inline-block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M14 0 L2 22 H11 L8 40 L24 15 H14 L18 0 Z' fill='%231A1D21'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;background-position:center;
}

/* ==========================================================================
   7. MEDIA COVERAGE
   ========================================================================== */
.media-lead{
  text-align:center;max-width:720px;margin:0 auto 44px;
  font-size:14.5px;color:var(--text-onLight-sub);
}
.media-capture-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:52px;
}
@media (max-width:700px){.media-capture-grid{grid-template-columns:1fr;}}
.media-capture-card{
  background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;
  box-shadow:0 8px 24px rgba(20,20,20,.05);
}
.media-capture-photo{width:100%;aspect-ratio:16/9;overflow:hidden;background:#ddd;}
.media-capture-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.media-capture-caption{padding:12px 18px;font-size:11.5px;color:var(--text-onLight-sub);}
.media-list-title{
  text-align:center;font-size:13.5px;font-weight:700;color:var(--text-onLight);
  letter-spacing:.06em;margin-bottom:20px;
}
.media-list{
  max-width:820px;margin:0 auto 30px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px 32px;
}
@media (max-width:640px){.media-list{grid-template-columns:1fr;}}
.media-list-item{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;color:var(--text-onLight);font-weight:500;
  padding:11px 0;border-bottom:1px solid rgba(0,0,0,.06);
}
.media-list-item .dot{
  flex-shrink:0;width:7px;height:11px;margin-top:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M14 0 L2 22 H11 L8 40 L24 15 H14 L18 0 Z' fill='%23C9A227'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
.media-note{font-size:11.5px;color:#8a9099;text-align:center;max-width:760px;margin-inline:auto;}

/* ==========================================================================
   8. CONCERNS
   ========================================================================== */
#concerns{position:relative;overflow:hidden;}
.concerns-bg{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(180deg,rgba(9,10,12,.92),rgba(9,10,12,.96)),url('images/concerns-bg.jpeg');
  background-size:cover;background-position:center;
}
#concerns .wrap{position:relative;z-index:1;}
.concern-list{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;
  margin-bottom:52px;
}
@media (max-width:700px){.concern-list{grid-template-columns:1fr;}}
.concern-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;background:rgba(255,255,255,.03);
  font-size:15.5px;font-weight:700;
}
.concern-check{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  color:#141414;font-size:13px;font-weight:900;
}
.concerns-close{
  max-width:720px;margin-inline:auto;text-align:center;
  border-top:1px solid rgba(255,255,255,.15);padding-top:36px;
}
.concerns-close p{font-size:15px;color:var(--text-onDark-sub);margin-bottom:10px;}
.concerns-close p:first-child{font-size:18px;font-weight:700;color:#fff;margin-bottom:18px;}

/* ==========================================================================
   9. SOLUTION
   ========================================================================== */
#solution{position:relative;}
#solution::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold-gradient);
}
.solution-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.solution-head .lead{
  font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:900;line-height:1.6;
}
.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.solution-grid{grid-template-columns:1fr;gap:36px;}}
.solution-points{display:flex;flex-direction:column;gap:22px;margin-bottom:28px;}
.solution-point{display:flex;gap:16px;}
.solution-point .idx{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(201,162,39,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:600;color:var(--gold-3);
}
.solution-point p{font-size:15px;color:var(--text-onDark-sub);}
.solution-point strong{display:block;color:#fff;font-size:16px;margin-bottom:4px;font-weight:700;}
.solution-summary{
  font-size:14.5px;color:var(--text-onDark-sub);
  border-left:3px solid var(--gold-2);padding-left:18px;
}
.solution-diagram{background:#fff;border-radius:12px;padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.4);}

/* ==========================================================================
   10. FEATURES (5 cards)
   ========================================================================== */
.feature-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:48px 28px;margin:34px 0 20px;
}
.feature-grid > *{flex:0 1 calc((100% - 56px) / 3);min-width:0;}
@media (max-width:1100px){.feature-grid > *{flex:0 1 calc((100% - 28px) / 2);max-width:340px;}}
@media (max-width:560px){.feature-grid > *{flex:0 1 100%;}}
.feature-card{
  position:relative;
  background:#fff;border-radius:50%;aspect-ratio:1/1;
  padding:62px 30px 28px;
  max-width:266px;margin-inline:auto;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 28px rgba(20,20,20,.07);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.feature-card > *{width:100%;}
.feature-card .fnum{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:transparent;border:none;box-shadow:none;border-radius:0;
  font-family:'Oswald',sans-serif;font-size:52px;font-weight:700;line-height:1;
  color:#A98C33;letter-spacing:.04em;margin:0;padding:4px 14px;
}
.feature-card .fnum::before,
.feature-card .fnum::after{
  content:"";height:1px;width:30px;flex:0 0 30px;
  background:linear-gradient(90deg,rgba(201,162,39,0),rgba(201,162,39,.8));
}
.feature-card .fnum::after{background:linear-gradient(90deg,rgba(201,162,39,.8),rgba(201,162,39,0));}
.feature-card h3{font-size:18px;font-weight:900;margin-bottom:9px;color:var(--text-onLight);line-height:1.45;letter-spacing:0;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance;}
.feature-card h3 .wbrk{display:inline-block;}
.feature-card p{font-size:12px;color:var(--text-onLight-sub);line-height:1.7;margin-inline:auto;word-break:auto-phrase;text-wrap:pretty;}
@media (max-width:900px){
  .feature-card h3{font-size:17.5px;}
  .feature-card p{font-size:12px;}
}
@media (max-width:1100px){
  .feature-card{padding:62px 30px 28px;max-width:274px;}
}
@media (max-width:560px){
  .feature-card{padding:58px 34px 28px;max-width:286px;}
  .feature-card .fnum{font-size:44px;padding:4px 12px;}
  .feature-card h3{font-size:17px;}
  .feature-card p{font-size:12px;}
}
.feature-trust{
  margin-top:36px;text-align:center;padding:20px;border-radius:8px;
  background:#fff;border:1px solid rgba(201,162,39,.35);
  font-size:15px;font-weight:700;color:var(--text-onLight);
}
.feature-trust .num-inline{
  font-family:'Oswald',sans-serif;font-weight:600;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================================
   11. BELL COMPARISON (climax)
   ========================================================================== */
.stat-hero{
  display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;
  margin:52px 0 40px;
}
@media (max-width:760px){.stat-hero{grid-template-columns:1fr;text-align:center;}}
.stat-card{
  border-radius:12px;padding:34px 28px;text-align:center;
}
.stat-card.ikazuchi{
  border:1px solid rgba(201,162,39,.55);
  background:linear-gradient(160deg,rgba(201,162,39,.12),rgba(255,255,255,.02));
}
.stat-card.bell{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
}
.stat-card .name{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.06em;font-size:14px;margin-bottom:14px;color:var(--text-onDark-sub);}
.stat-card.ikazuchi .name{color:var(--gold-3);}
.stat-number{
  font-family:'Oswald',sans-serif;font-weight:700;line-height:1;
  font-size:clamp(2.6rem,6vw,3.8rem);
}
.stat-card.ikazuchi .stat-number{
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-card .unit{font-size:.4em;font-weight:600;margin-left:4px;}
.stat-card .sub-num{margin-top:10px;font-size:14px;color:var(--text-onDark-sub);}
.stat-card .src-note{margin-top:14px;font-size:11px;color:#767c84;}
.stat-vs{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:'Oswald',sans-serif;
}
.stat-vs .diff{font-size:13px;color:var(--text-onDark-sub);letter-spacing:.05em;white-space:nowrap;}
.stat-vs .times{
  font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.energy-box{
  max-width:720px;margin:0 auto 48px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:26px 28px;text-align:center;
}
.energy-box h4{font-size:14px;color:var(--gold-3);margin-bottom:10px;letter-spacing:.04em;}
.energy-box p{font-size:14px;color:var(--text-onDark-sub);}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare-table{min-width:560px;}
.compare-table th,.compare-table td{
  padding:16px 18px;text-align:center;font-size:14.5px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.compare-table th{
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.04em;
  color:var(--text-onDark-sub);font-size:13px;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.compare-table td:first-child,.compare-table th:first-child{text-align:left;font-weight:700;color:#fff;}
.compare-table .col-ikazuchi{background:rgba(201,162,39,.08);font-weight:700;color:var(--gold-3);}
.compare-table th.col-ikazuchi{color:var(--gold-3);background:rgba(201,162,39,.14);}
/* -- IKAZUCHI列を主役として強調 -------------------------------------------- */
.compare-table th.col-ikazuchi{
  font-size:19px;font-weight:700;letter-spacing:.06em;
  padding-top:20px;padding-bottom:20px;
  border-bottom:2px solid var(--gold-2);
}
.compare-table td.col-ikazuchi{
  font-size:17px;font-weight:700;
}
/* ◎○△×などの記号セルはさらに大きく */
.compare-table td.col-ikazuchi.sym-good,
.compare-table td.col-ikazuchi.sym-ok,
.compare-table td.col-ikazuchi.sym-mid,
.compare-table td.col-ikazuchi.sym-no{
  font-size:26px;line-height:1;
}
.compare-table th.col-ikazuchi,
.compare-table td.col-ikazuchi{
  border-left:1px solid rgba(201,162,39,.35);
  border-right:1px solid rgba(201,162,39,.35);
}
.compare-table tr:last-child td.col-ikazuchi{border-bottom:2px solid rgba(201,162,39,.45);}
@media (max-width:768px){
  .compare-table th.col-ikazuchi{font-size:16px;}
  .compare-table td.col-ikazuchi{font-size:15px;}
  .compare-table td.col-ikazuchi.sym-good,
  .compare-table td.col-ikazuchi.sym-ok,
  .compare-table td.col-ikazuchi.sym-mid,
  .compare-table td.col-ikazuchi.sym-no{font-size:21px;}
}

.compare-foot{margin-top:22px;font-size:12px;color:#767c84;max-width:820px;}

/* light-theme version of compare table (section 10) */
.section--light .table-scroll,.section--white .table-scroll{}
.compare-table.on-light th,.compare-table.on-light td{border-color:rgba(0,0,0,.08);}
.compare-table.on-light th{color:var(--text-onLight-sub);border-bottom-color:rgba(0,0,0,.15);}
.compare-table.on-light td:first-child,.compare-table.on-light th:first-child{color:var(--text-onLight);}
.compare-table.on-light .col-ikazuchi{background:rgba(201,162,39,.09);color:#8A6D1F;}
.compare-table.on-light th.col-ikazuchi{background:rgba(201,162,39,.16);color:#8A6D1F;}
.sym-good{color:#8A6D1F;font-weight:900;}
.sym-ok{color:#8A6D1F;}
.sym-mid{color:#9AA0A6;}
.sym-no{color:#B4373F;}
.section--dark .sym-mid,.section--dark2 .sym-mid{color:#6d7278;}
.section--dark .sym-ok,.section--dark2 .sym-ok{color:var(--gold-3);}
.section--dark .sym-good,.section--dark2 .sym-good{color:var(--gold-3);}

/* ==========================================================================
   12. USAGE SCENES
   ========================================================================== */
.usage-gallery{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:52px;
}
.usage-gallery > *{flex:0 1 calc((100% - 40px) / 3);min-width:0;}
@media (max-width:900px){.usage-gallery > *{flex:0 1 calc((100% - 20px) / 2);}}
@media (max-width:560px){.usage-gallery > *{flex:0 1 100%;}}
.usage-item{display:flex;flex-direction:column;}
.usage-photo{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#ddd;}
.usage-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.usage-caption{font-size:12.5px;color:var(--text-onLight-sub);margin-top:10px;flex-shrink:0;}
.usage-lead{text-align:center;font-size:15px;color:var(--text-onLight-sub);margin-bottom:32px;}
.scene-frame{background:#fff;border:1px solid #eee;border-radius:10px;padding:8px;max-width:900px;margin-inline:auto;}
.scene-frame img{display:block;width:100%;height:auto;}
.usage-note{font-size:11.5px;color:#8a9099;text-align:center;margin-top:20px;}

/* ==========================================================================
   12.5 PRODUCT GALLERY（製品ディテール・付属ハードケース）
   ========================================================================== */
.product-gallery{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
@media (max-width:760px){.product-gallery{grid-template-columns:repeat(2,1fr);gap:14px;}}
.product-gallery-item{
  background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;
  box-shadow:0 8px 24px rgba(20,20,20,.05);
}
.product-gallery-photo{width:100%;aspect-ratio:4/3;overflow:hidden;background:#ddd;}
.product-gallery-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.product-gallery-caption{
  padding:10px 12px;font-size:12.5px;color:var(--text-onLight-sub);
  text-align:center;font-weight:500;
}

/* ==========================================================================
   13. DEVELOPER MESSAGE
   ========================================================================== */
.dev-wrap{max-width:760px;margin-inline:auto;}
.dev-wrap p{font-size:15.5px;color:var(--text-onDark-sub);margin-bottom:22px;}
.dev-wrap .gold-line{
  font-size:clamp(1.8rem,4.4vw,2.5rem);font-weight:900;line-height:1.6;
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:36px 0;text-align:center;
}
.dev-wrap .signoff{text-align:right;font-size:15px;color:#fff;font-weight:700;margin-top:36px;}

/* ==========================================================================
   14. SUMMARY CTA
   ========================================================================== */
.summary-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
@media (max-width:900px){.summary-grid{grid-template-columns:1fr;}}
.summary-grid .fv-visual{order:2;}
/* まとめセクションの製品写真を大きく見せる（内側カードの入れ子をやめる） */
.summary-grid .fv-product-card{background:transparent;border:none;padding:0;box-shadow:none;max-width:none;width:100%;}
.summary-grid .fv-product-card img{
  width:100%;height:auto;display:block;border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.summary-grid .fv-product-card .tag{
  margin-top:14px;text-align:center;font-size:12.5px;color:var(--text-onDark-sub);
}
@media (max-width:900px){.summary-grid .fv-visual{order:-1;}}
.summary-specs{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px;}
.summary-final{font-size:15px;color:var(--text-onDark-sub);margin-top:8px;}
.summary-final strong{color:#fff;}

/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;
  padding:20px 54px 20px 24px;position:relative;
  font-weight:700;font-size:15.5px;color:var(--text-onLight);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"Q";
  font-family:'Oswald',sans-serif;color:var(--gold-2);margin-right:12px;font-weight:700;
}
.faq-item summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--gold-2);font-weight:400;transition:transform .2s;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-item .faq-a{
  padding:0 24px 24px 24px;font-size:14.5px;color:var(--text-onLight-sub);
  display:flex;gap:12px;
}
.faq-item .faq-a .amark{font-family:'Oswald',sans-serif;color:var(--gold-2);font-weight:700;flex-shrink:0;}
.faq-qr{
  display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap;
}
.faq-qr img{width:180px;border-radius:6px;border:1px solid #eee;}

/* ==========================================================================
   16. WARRANTY
   ========================================================================== */
.warranty-box{
  max-width:760px;margin-inline:auto;background:#fff;border-radius:10px;
  padding:44px 40px;border:1px solid rgba(201,162,39,.3);
  text-align:center;
}
.warranty-box .eyebrow{margin-bottom:16px;}
.warranty-box p{font-size:14.5px;color:var(--text-onLight-sub);margin-bottom:14px;}
.warranty-box p.note{font-size:12px;color:#8a9099;margin-top:18px;}

/* ==========================================================================
   17. FLOW STEPS
   ========================================================================== */
.flow-steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:start;
  position:relative;
}
@media (max-width:900px){
  .flow-steps{grid-template-columns:1fr;gap:0;}
}
.flow-step{position:relative;padding:0 16px;text-align:center;}
.flow-step:not(:last-child)::after{
  content:"";position:absolute;top:32px;left:calc(50% + 40px);right:calc(-50% + 40px);
  height:2px;background:linear-gradient(90deg,var(--gold-2),rgba(201,162,39,.15));
}
@media (max-width:900px){
  .flow-step{text-align:left;padding:0 0 40px 68px;display:flex;flex-direction:column;}
  .flow-step:not(:last-child)::after{
    top:16px;left:31px;right:auto;width:2px;height:calc(100% + 8px);
    background:linear-gradient(180deg,var(--gold-2),rgba(201,162,39,.15));
  }
}
.flow-num{
  width:64px;height:64px;border-radius:50%;
  background:var(--white);border:2px solid var(--gold-2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:22px;color:var(--gold-2);
  margin:0 auto 18px;position:relative;z-index:1;
}
@media (max-width:900px){
  .flow-num{position:absolute;left:0;top:0;margin:0;width:56px;height:56px;font-size:19px;}
}
.flow-step h4{font-size:15.5px;font-weight:700;margin-bottom:8px;color:var(--text-onLight);}
.flow-step p{font-size:13px;color:var(--text-onLight-sub);}

/* ==========================================================================
   18. COMPANY
   ========================================================================== */
.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:800px){.company-grid{grid-template-columns:1fr;}}
.company-card{border-top:2px solid var(--gold-2);padding-top:26px;}
.company-card .role{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:.1em;color:var(--gold-3);margin-bottom:10px;}
.company-card h3{font-size:20px;font-weight:900;margin-bottom:16px;}
.company-card p{font-size:14.5px;color:var(--text-onDark-sub);}

/* ==========================================================================
   19. FINAL CTA
   ========================================================================== */
.final-cta{text-align:center;}
.final-cta h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:900;margin-bottom:36px;line-height:1.5;}

/* ==========================================================================
   20. DISCLAIMER
   ========================================================================== */
.disclaimer{font-size:11.5px;color:#767c84;line-height:2;}
.disclaimer p{margin-bottom:10px;}
.disclaimer .seller{margin-top:20px;font-size:12.5px;color:var(--text-onDark-sub);font-weight:700;}

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.site-footer{padding:56px 0 40px;text-align:center;background:var(--dark-1);border-top:1px solid rgba(255,255,255,.08);}
.site-footer .logo{justify-content:center;margin-bottom:14px;}
.site-footer .copyright{font-size:11.5px;color:#5c6167;margin-top:18px;}

/* misc */
.checklist-icon{color:var(--gold-3);}


/* ==========================================================================
   Contact Form 7 (最終CTAセクション内)
   ========================================================================== */
.final-cta-lead{color:#C6CBD2;font-size:15px;margin:14px 0 28px;}
.contact-form-card{
  max-width:640px;margin:0 auto;text-align:left;
  background:#fff;border-radius:10px;padding:36px 32px;
}
.contact-form-card .wpcf7 p{margin-bottom:16px;font-size:14px;color:#1A1D21;font-weight:700;}
.contact-form-card .wpcf7 input[type="text"],
.contact-form-card .wpcf7 input[type="email"],
.contact-form-card .wpcf7 input[type="tel"],
.contact-form-card .wpcf7 textarea{
  width:100%;box-sizing:border-box;margin-top:6px;
  border:1px solid #C9CDD3;border-radius:6px;
  padding:12px 14px;font-size:15px;font-family:inherit;
  background:#FAFAFA;font-weight:400;
}
.contact-form-card .wpcf7 input:focus,
.contact-form-card .wpcf7 textarea:focus{outline:2px solid #C9A227;border-color:#C9A227;background:#fff;}
.contact-form-card .wpcf7 input[type="submit"]{
  display:block;width:100%;margin-top:8px;
  background:#C8102E;color:#fff;border:none;border-radius:6px;
  padding:16px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;
}
.contact-form-card .wpcf7 input[type="submit"]:hover{background:#E01535;}
.contact-form-card .wpcf7-not-valid-tip{color:#C8102E;font-size:12px;font-weight:400;}
.contact-form-card .wpcf7-response-output{border-radius:6px;font-weight:400;font-size:13px;}
@media (max-width:768px){.contact-form-card{padding:28px 20px;}}
/* ==========================================================================
   22. SECTION DIVIDERS（セクション境目のなじませ演出）
   クライアント要望：各ブロックの境目をグラデーションか▽で区切りをわかりづらくする
   - 異系統（ダーク⇄ライト/白）の境目：前セクションの背景色による下向き▽シェブロン
   - 同系統（ライト⇄白）の境目：縦グラデーションで前色→自色へなじませる
   - ダーク⇄ダーク2（背景がほぼ同色）の境目：何もしない
   HTML構造・クラスは変更せず、隣接セレクタ(+)と::before疑似要素のみで実装
   ========================================================================== */

/* ---- ▽ シェブロン（異系統の境目） -------------------------------------- */
.section--dark + .section--light::before,
.section--dark + .section--white::before,
#fv + .section--light::before,
#fv + .section--white::before,
.section--dark2 + .section--light::before,
.section--dark2 + .section--white::before,
.section--light + .section--dark::before,
.section--light + .section--dark2::before,
.section--white + .section--dark::before,
.section--white + .section--dark2::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:36px solid transparent;
  border-right:36px solid transparent;
  border-top:28px solid transparent;
  z-index:2;
  pointer-events:none;
}
/* 前セクションの背景色をシェブロン色として指定 */
.section--dark + .section--light::before,
.section--dark + .section--white::before,
#fv + .section--light::before,
#fv + .section--white::before{
  border-top-color:var(--dark-1);
}
.section--dark2 + .section--light::before,
.section--dark2 + .section--white::before{
  border-top-color:var(--dark-2);
}
.section--light + .section--dark::before,
.section--light + .section--dark2::before{
  border-top-color:var(--light);
}
.section--white + .section--dark::before,
.section--white + .section--dark2::before{
  border-top-color:var(--white);
}

@media (max-width:768px){
  .section--dark + .section--light::before,
  .section--dark + .section--white::before,
  #fv + .section--light::before,
  #fv + .section--white::before,
  .section--dark2 + .section--light::before,
  .section--dark2 + .section--white::before,
  .section--light + .section--dark::before,
  .section--light + .section--dark2::before,
  .section--white + .section--dark::before,
  .section--white + .section--dark2::before{
    border-left-width:24px;
    border-right-width:24px;
    border-top-width:18px;
  }
}

/* ---- グラデーション（同系統：ライト⇄白の境目） -------------------------- */
.section--light + .section--white::before,
.section--white + .section--light::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:70px;
  z-index:2;
  pointer-events:none;
}
.section--light + .section--white::before{
  background:linear-gradient(180deg,var(--light) 0%,rgba(246,245,241,0) 100%);
}
.section--white + .section--light::before{
  background:linear-gradient(180deg,var(--white) 0%,rgba(255,255,255,0) 100%);
}
@media (max-width:768px){
  .section--light + .section--white::before,
  .section--white + .section--light::before{
    height:40px;
  }
}

/* ==========================================================================
   23. P1-P6 ENHANCEMENTS (added — design/index.html only)
   ========================================================================== */

/* -- CTA button left bolt icon ------------------------------------------- */
.btn-red::before,.btn-red-sm::before{
  content:"";
  width:11px;height:18px;flex-shrink:0;display:inline-block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M14 0 L2 22 H11 L8 40 L24 15 H14 L18 0 Z' fill='white'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
.btn-red-sm::before{width:9px;height:15px;}

/* -- Section title scale variants (P3) ------------------------------------ */
.section-title--xl{font-size:48px;font-weight:900;line-height:1.4;}
.section-title--sm{font-size:30px;font-weight:900;}
@media (max-width:768px){
  .section-title--xl{font-size:32px;}
  .section-title--sm{font-size:23px;}
}

/* -- FV product cutout (P1) ------------------------------------------------ */
.fv-visual--hero{position:relative;display:flex;justify-content:center;align-items:center;padding-block:12px;min-height:280px;}
.fv-product-cutout{position:relative;z-index:2;width:100%;max-width:480px;max-height:70vh;object-fit:contain;margin-inline:auto;filter:drop-shadow(0 30px 55px rgba(0,0,0,.55));}
.fv-product-glow{position:absolute;z-index:1;inset:-14%;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(201,162,39,.25),transparent 68%);}
.fv-bolt-watermark{position:absolute;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);width:120%;max-width:620px;height:auto;opacity:.05;fill:none;stroke:var(--gold-3);stroke-width:.5;pointer-events:none;}
@media (max-width:900px){
  .fv-product-cutout{max-width:320px;max-height:50vh;}
}

.fv-badge{padding:8px 15px;font-size:12.5px;}

/* -- FV ambient glow variance (P5) ----------------------------------------- */
#contact-cta{position:relative;overflow:hidden;}
#contact-cta::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 85% 25%,rgba(201,162,39,.16),transparent 55%);
  pointer-events:none;
}
#contact-cta .wrap{position:relative;z-index:1;}

/* -- Stat band (P2) --------------------------------------------------------- */
.stat-band{padding-block:64px;position:relative;}
.stat-band-kicker{
  text-align:center;font-family:'Oswald',sans-serif;font-weight:600;
  letter-spacing:.16em;font-size:12.5px;color:var(--gold-3);margin-bottom:36px;
}
.stat-band-grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;}
.stat-band-item{flex:1 1 200px;min-width:150px;max-width:260px;text-align:center;padding:16px 12px;}
.stat-band-divider{flex:0 0 auto;width:24px;display:flex;align-items:center;justify-content:center;}
.stat-band-divider svg{width:16px;height:auto;fill:var(--gold-2);}
.stat-band-num{
  white-space:nowrap;
  font-family:'Oswald',sans-serif;font-weight:700;line-height:1;
  font-size:clamp(2.6rem,6vw,5.5rem);
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;
}
.stat-band-num .unit{font-size:.38em;font-weight:600;margin-left:3px;}
.stat-band-label{font-size:12.5px;color:var(--text-onDark-sub);line-height:1.5;font-weight:500;}
.stat-band-label .sub{display:block;font-size:11px;color:#7d838b;margin-top:3px;}
.stat-band-note{margin-top:34px;text-align:center;font-size:11.5px;color:#767c84;max-width:760px;margin-inline:auto;}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}
@media (max-width:700px){
  .stat-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 12px;}
  .stat-band-item{flex:none;max-width:none;padding:0;}
  .stat-band-divider{display:none;}
}

/* -- bell-compare climax treatment (P3 / P5) -------------------------------- */
#bell-compare{
  position:relative;overflow:hidden;
  padding-block:calc(var(--pad-y-desktop) * 1.4);
  background:radial-gradient(circle at 15% 15%,rgba(201,162,39,.18),transparent 55%),var(--dark-1);
}
@media (max-width:900px){
  #bell-compare{padding-block:calc(var(--pad-y-mobile) * 1.4);}
}
#bell-compare .wrap{position:relative;z-index:1;}
#bell-compare::after{
  content:"250×";
  position:absolute;z-index:0;
  right:-3%;bottom:-8%;
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(9rem,26vw,20rem);line-height:1;
  color:rgba(201,162,39,.05);
  pointer-events:none;user-select:none;white-space:nowrap;
}
#bell-compare::before{
  filter:drop-shadow(0 0 4px rgba(230,199,102,.85));
}

/* -- Testimonial alternating layout (P4) ------------------------------------ */
.testi-grid{display:flex;flex-direction:column;gap:32px;}
.testi-card--row{display:flex;flex-direction:row;align-items:stretch;}
.testi-card--row.testi-card--reverse{flex-direction:row-reverse;}
.testi-card--row .testi-photo{width:40%;flex:0 0 40%;aspect-ratio:auto;height:auto;}
.testi-card--row .testi-body{flex:1;display:flex;flex-direction:column;justify-content:center;}
@media (max-width:800px){
  .testi-card--row,.testi-card--row.testi-card--reverse{flex-direction:column;}
  .testi-card--row .testi-photo{width:100%;flex:none;aspect-ratio:4/3;}
}

/* -- Full-bleed scene band (P4) ---------------------------------------------- */
.scene-band{position:relative;height:340px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow:hidden;}
.scene-band-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.scene-band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.46));}
.scene-band-inner{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;padding-inline:24px;}
.scene-band-copy{color:#fff;font-size:clamp(1.4rem,3.2vw,2.1rem);font-weight:900;text-align:center;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.55);}
@media (max-width:700px){.scene-band{height:220px;}}

/* -- Divider chevrons enlarged (P5) ------------------------------------------ */
.section--dark + .section--light::before,
.section--dark + .section--white::before,
#fv + .section--light::before,
#fv + .section--white::before,
.section--dark2 + .section--light::before,
.section--dark2 + .section--white::before,
.section--light + .section--dark::before,
.section--light + .section--dark2::before,
.section--white + .section--dark::before,
.section--white + .section--dark2::before{
  border-left-width:70px;
  border-right-width:70px;
  border-top-width:44px;
}
@media (max-width:768px){
  .section--dark + .section--light::before,
  .section--dark + .section--white::before,
  #fv + .section--light::before,
  #fv + .section--white::before,
  .section--dark2 + .section--light::before,
  .section--dark2 + .section--white::before,
  .section--light + .section--dark::before,
  .section--light + .section--dark2::before,
  .section--white + .section--dark::before,
  .section--white + .section--dark2::before{
    border-left-width:40px;
    border-right-width:40px;
    border-top-width:26px;
  }
}

/* -- Dark section subtle vignette (P5) ---------------------------------------- */
.section--dark,.section--dark2{
  box-shadow:
    inset 0 46px 34px -34px rgba(0,0,0,.3),
    inset 0 -46px 34px -34px rgba(0,0,0,.3);
}

/* -- Scroll reveal (P6) -------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ==========================================================================
   24. DEMO VIDEO（実機の作動音・発光デモ）
   ========================================================================== */
.demo-warning{
  max-width:640px;margin:0 auto 40px;
  border:1px solid rgba(200,16,46,.45);
  border-left:4px solid var(--red);
  background:rgba(200,16,46,.1);
  border-radius:8px;
  padding:18px 22px;
  text-align:center;
}
.demo-warning strong{display:block;font-size:14.5px;color:#fff;font-weight:700;margin-bottom:6px;letter-spacing:.02em;}
.demo-warning p{font-size:13.5px;color:var(--text-onDark-sub);margin:0;}
.demo-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
  max-width:1000px;margin-inline:auto;
}
@media (max-width:768px){
  .demo-grid{grid-template-columns:1fr;}
}
.demo-card{
  border:1px solid rgba(201,162,39,.25);
  border-radius:10px;
  padding:20px;
  background:rgba(255,255,255,.02);
  min-width:0;
}
.demo-mode-label{
  font-size:16px;font-weight:700;color:var(--gold-3);margin-bottom:6px;
}
.demo-mode-desc{
  font-size:13px;color:var(--text-onDark-sub);margin-bottom:14px;
}
.demo-video{
  width:100%;height:auto;aspect-ratio:16/9;
  display:block;border-radius:10px;background:#000;
  object-fit:contain;
}
.demo-note{
  margin-top:34px;text-align:center;font-size:11.5px;color:#767c84;
  max-width:760px;margin-inline:auto;
}
.demo-tagline{
  text-align:center;margin-top:14px;font-size:14px;font-weight:700;color:var(--gold-3);
}
.demo-subhead{
  text-align:center;font-size:19px;font-weight:900;color:#fff;
  margin:48px 0 24px;letter-spacing:.01em;
}
.demo-grid--vertical{
  grid-template-columns:repeat(2,300px);
  justify-content:center;
}
.demo-grid--vertical .demo-card{max-width:300px;width:100%;}
.demo-grid--vertical .demo-video{aspect-ratio:9/16;object-fit:cover;}
@media (max-width:768px){
  .demo-grid--vertical{grid-template-columns:1fr;justify-items:center;}
}

/* ==========================================================================
   25. FV REDESIGN — client design 2026-07-29（クマ夜間写真／スペックアイコン／活躍シーン）
   ========================================================================== */

/* -- Background: bear night photo (replaces signboard fv-bg.jpeg) ---------- */
.fv-bg{
  background-image:
    linear-gradient(100deg, rgba(6,7,9,.95) 0%, rgba(6,7,9,.93) 34%, rgba(6,7,9,.84) 48%, rgba(6,7,9,.42) 60%, rgba(6,7,9,.30) 74%, rgba(6,7,9,.55) 100%),
    url('images/fv-bear-night.jpg?v=1.2.2');
  background-position:52% 40%;
}
@media (max-width:900px){
  .fv-bg{
    background-image:
      linear-gradient(180deg, rgba(6,7,9,.62) 0%, rgba(6,7,9,.88) 34%, rgba(6,7,9,.94) 62%, rgba(6,7,9,.95) 100%),
      url('images/fv-bear-night.jpg?v=1.2.2');
    background-position:54% 22%;
  }
}

/* -- Lead copy（新規リード文） ---------------------------------------------- */
.fv-lead{
  font-size:clamp(.92rem,1.6vw,1.02rem);
  color:var(--text-onDark-sub);
  font-weight:500;
  line-height:1.9;
  max-width:560px;
  margin-bottom:28px;
}

/* -- Spec icon row（4項目・クライアント案の目玉） --------------------------- */
.fv-specs{
  display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;
  margin-bottom:22px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding-block:24px;
}
.fv-spec{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding-inline:18px;
}
.fv-spec:first-child{padding-left:0;}
.fv-spec:last-child{padding-right:0;}
.fv-spec-icon{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(230,199,102,.55);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-3);
}
.fv-spec-icon svg{width:22px;height:22px;display:block;}
.fv-spec-title{font-size:14.5px;font-weight:700;color:#fff;line-height:1.4;letter-spacing:.01em;}
.fv-spec-desc{font-size:11.5px;color:var(--text-onDark-sub);line-height:1.55;}
.fv-spec-divider{
  flex:0 0 auto;width:1px;align-self:stretch;
  background:linear-gradient(180deg,rgba(230,199,102,0),rgba(230,199,102,.4),rgba(230,199,102,0));
}
@media (max-width:768px){
  .fv-specs{
    display:grid;grid-template-columns:1fr 1fr;
    gap:24px 18px;padding-block:22px;
  }
  .fv-spec{padding-inline:0;}
  .fv-spec-divider{display:none;}
  .fv-spec-icon{width:42px;height:42px;}
  .fv-spec-icon svg{width:20px;height:20px;}
  .fv-spec-title{font-size:14px;}
}

/* -- Usage scenes strip（FV下部・控えめ） ------------------------------------ */
.fv-inner{row-gap:40px;}
.fv-scenes{
  grid-column:1 / -1;
  position:relative;z-index:1;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
}
.fv-scenes-title{
  font-size:12px;font-weight:700;color:var(--text-onDark-sub);
  letter-spacing:.08em;margin-bottom:16px;
}
.fv-scenes-grid{display:flex;flex-wrap:wrap;gap:24px 30px;}
.fv-scene-item{display:flex;align-items:center;gap:9px;}
.fv-scene-icon{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(230,199,102,.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-3);
}
.fv-scene-icon svg{width:15px;height:15px;display:block;}
.fv-scene-label{font-size:12px;font-weight:600;color:var(--text-onDark-sub);white-space:nowrap;}
@media (max-width:640px){
  .fv-scenes-grid{gap:14px 20px;}
  .fv-scene-label{font-size:11px;}
  .fv-scene-icon{width:27px;height:27px;}
  .fv-scene-icon svg{width:13px;height:13px;}
}


/* -- FVメタ情報（実績＋価格を1行に集約してFVを締める） --------------------- */
.fv-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
  margin:20px 0 22px;padding:16px 0;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.fv-meta-left{flex:1 1 300px;min-width:0;}
.fv-meta-line{font-size:13px;color:var(--text-onDark-sub);line-height:1.7;}
.fv-meta-line.sub{font-size:12.5px;color:#9aa1aa;}
.fv-meta-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;}
.fv-meta-price .label{font-size:11.5px;color:#9aa1aa;letter-spacing:.06em;}
.fv-meta-price .amount{
  font-family:'Noto Sans JP',sans-serif;font-size:26px;font-weight:900;color:#fff;line-height:1.1;
}
.fv-meta-price .amount .unit{font-size:.6em;font-weight:700;margin-left:2px;}
.fv-meta-price .note{font-size:11.5px;color:#9aa1aa;width:100%;}
@media (max-width:768px){
  .fv-meta{gap:12px;margin:16px 0 18px;padding:14px 0;}
  .fv-meta-price .amount{font-size:23px;}
}

/* -- FVレイアウト再構成（スマホで見出し直後に製品を出す） ------------------- */
.fv-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-areas:
    "head   visual"
    "body   visual"
    "meta   visual"
    "track  track"
    "actions actions";
  column-gap:56px;row-gap:0;
  align-items:start;
}
.fv-head{grid-area:head;}
.fv-body{grid-area:body;}
.fv-inner > .fv-visual{grid-area:visual;align-self:center;}
.fv-inner > .fv-actions{grid-area:actions;}

@media (max-width:900px){
  .fv-inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "visual"
      "body"
      "meta"
      "track"
      "actions";
    row-gap:0;
  }
  /* スマホでは製品を見出し直後にコンパクト表示（1画面目に収める） */
  .fv-inner > .fv-visual{
    margin:18px auto 4px;
    max-width:260px;
  }
  .fv-visual--hero .fv-product-cutout{
    max-height:270px;width:auto;
  }
  .fv-bolt-watermark{opacity:.05;}
}
@media (max-width:560px){
  .fv-inner > .fv-visual{max-width:225px;margin:14px auto 2px;}
  .fv-visual--hero .fv-product-cutout{max-height:235px;}
}

/* -- FV左右バランス調整（左カラムの間延びを解消し、製品を大きく） ---------- */
@media (min-width:901px){
  .fv-label{margin-bottom:16px;}
  .fv-h1{margin-bottom:14px;}
  .fv-sub{margin-bottom:20px;}
  .fv-lead{margin-bottom:22px;}
  .fv-specs{margin-bottom:16px;}
  .fv-note{margin-top:4px;margin-bottom:18px;}
  .fv-meta{margin-top:14px;margin-bottom:18px;padding-block:14px;}
  .fv-scenes{margin-top:22px;}
  /* 製品を右カラムいっぱいに大きく見せる */
  .fv-visual--hero .fv-product-cutout{max-width:560px;max-height:none;}
  .fv-inner > .fv-visual{align-self:stretch;}
  .fv-visual--hero{min-height:100%;padding-block:0;}
}

/* ==========================================================================
   アクセシビリティ・UI改善（LP内で完結。既存サイトのフォーム本体は無改変）
   ========================================================================== */

/* -- Contact Form 7 の必須／任意バッジ（LP内の表示のみ整える） -------------- */
.contact-form-card .wpcf7 dl{margin:0;}
.contact-form-card .wpcf7 dt{
  font-size:14px;font-weight:700;color:#1A1D21;
  margin-bottom:6px;display:flex;align-items:center;gap:8px;
}
.contact-form-card .wpcf7 dd{margin:0 0 18px;}
.contact-form-card .wpcf7 .required,
.contact-form-card .wpcf7 .any{
  display:inline-block;flex-shrink:0;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.04em;
  padding:5px 8px;border-radius:3px;
}
.contact-form-card .wpcf7 .required{background:#C8102E;color:#fff;}
.contact-form-card .wpcf7 .any{background:#E4E6E9;color:#5A616B;}
.contact-form-card .wpcf7 .formMessage01{
  font-size:13px;line-height:1.8;color:var(--text-onLight-sub);margin-bottom:22px;
}
.contact-form-card .wpcf7 .formMessage01 p{margin-bottom:8px;}
.contact-form-card .wpcf7 .c-form__consent{font-size:12.5px;line-height:1.8;margin-top:4px;}
.contact-form-card .wpcf7 .consent{margin:10px 0 18px;font-size:13.5px;}

/* -- ヘッダーCTAのタップ領域を44px以上に（WCAG 2.5.5 / Apple HIG） --------- */
.btn-header{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
@media (max-width:400px){
  .btn-header{padding:8px 12px;font-size:10.5px;min-height:44px;}
}

/* -- キーボード操作時のフォーカス表示（マウス操作時は出さない） ------------- */
.btn:focus-visible,
.site-header .logo:focus-visible,
.faq-item summary:focus-visible,
.contact-form-card .wpcf7 input:focus-visible,
.contact-form-card .wpcf7 textarea:focus-visible{
  outline:3px solid var(--gold-3);
  outline-offset:3px;
  border-radius:4px;
}

/* -- お問い合わせ窓口をフォームに集約（クライアント指示 2026-08-01） -------
   CF7側の定型文は既存サイト（トップページ）向けの内容で、
   ・「ご予約」など本LPに該当しない文言を含む
   ・「お急ぎの方は直接お電話を」とあるが、本LPには電話番号を掲載しない方針
   LPには直上に専用のリード文があるため、この定型文ブロックはLP上でのみ非表示にする。
   ※フォーム本体（CF7 ID:1953）は既存サイトと共有のため無改変。 */
.contact-form-card .formMessage01{display:none;}

/* -- FV下部アクション行：CTA群＋活躍シーンを横並びにして余白を活用 --------
   従来はCTAボタンの右側が空き、シーン一覧は下に段落ちしていた。 */
.fv-actions{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:48px;
  flex-wrap:wrap;
  padding-top:26px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.1);
}
.fv-cta-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
/* アクション行に内包したのでシーン側の区切り線は不要 */
.fv-actions .fv-scenes{
  grid-column:auto;padding-top:0;border-top:none;
}

/* セカンダリCTA（資料請求） */
.btn-outline{
  background:rgba(255,255,255,.04);
  color:var(--text-onDark);
  border:1.5px solid rgba(255,255,255,.34);
  padding:18px 30px;font-size:15.5px;letter-spacing:.02em;
}
.btn-outline svg{width:18px;height:18px;flex-shrink:0;color:var(--gold-3);}
.btn-outline:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--gold-3);
  transform:translateY(-2px);
}

/* 1行に収めるための微調整（PC時のみ） */
@media (min-width:901px){
  .fv-actions{gap:32px;}
  .fv-cta-group .btn-red{padding:19px 34px;font-size:16.5px;}
  .fv-actions .fv-scenes-grid{gap:14px 22px;}
  .fv-actions .fv-scenes-title{margin-bottom:12px;}
}
@media (max-width:1100px){
  .fv-actions{gap:18px;}
  .fv-cta-group{gap:10px;}
  .fv-cta-group .btn-red{padding:17px 20px;font-size:14.5px;}
  .btn-outline{padding:15px 16px;font-size:13.5px;}
  .fv-actions .fv-scenes-grid{gap:10px 14px;}
  .fv-actions .fv-scene-label{font-size:11px;}
  .fv-actions .fv-scene-icon{width:26px;height:26px;}
}
@media (max-width:1240px){
  .fv-actions{gap:24px;}
  .fv-cta-group .btn-red{padding:18px 26px;font-size:15.5px;}
  .btn-outline{padding:16px 20px;font-size:14.5px;}
  .fv-actions .fv-scenes-grid{gap:12px 18px;}
  .fv-actions .fv-scene-label{font-size:11.5px;}
}
@media (max-width:900px){
  .fv-actions{
    flex-direction:column;align-items:stretch;gap:24px;
    padding-top:22px;
  }
  .fv-cta-group{flex-direction:column;align-items:stretch;gap:12px;}
  .fv-cta-group .btn{width:100%;}
  .fv-actions .fv-scenes{margin-left:0;}
}

/* -- CTA群のボタン高さを厳密に揃える ---------------------------------------
   フォントサイズと余白が異なるため高さが自然計算でズレていた（0.8〜2.9px）。
   stretch で行の高さに揃え、border-box で枠線分の差も吸収する。 */
.fv-cta-group{align-items:stretch;}
.fv-cta-group .btn{box-sizing:border-box;}
@media (min-width:901px){
  .fv-cta-group .btn{min-height:68px;padding-top:0;padding-bottom:0;}
}
@media (max-width:1240px){
  .fv-cta-group .btn{min-height:62px;}
}
@media (max-width:1100px){
  .fv-cta-group .btn{min-height:56px;}
}
@media (max-width:900px){
  .fv-cta-group .btn{min-height:58px;padding-top:14px;padding-bottom:14px;}
}

/* -- 実績と料金を左右に振り分け（全幅行に昇格） -----------------------------
   従来は左カラム内に収まりきらず、実績の下に料金が段落ちしていた。
   行を全幅にすることで「実績＝左 / 料金＝右」の横並びが成立する。 */
.fv-inner > .fv-meta{grid-area:meta;}
@media (min-width:901px){
  .fv-inner > .fv-meta{
    justify-content:space-between;gap:24px 48px;
    margin:18px 0 0;padding:16px 0;
  }
  .fv-meta-left{flex:0 1 auto;}
  .fv-meta-price{
    flex:0 0 auto;justify-content:flex-end;text-align:right;
    align-items:baseline;gap:4px 12px;
  }
  .fv-meta-price .note{width:100%;text-align:right;}
  /* 直下のアクション行と線が重なるため、上側の線に統一 */
  .fv-inner > .fv-meta{border-bottom:none;}
  .fv-actions{border-top:1px solid rgba(255,255,255,.1);}
}
@media (max-width:900px){
  .fv-inner > .fv-meta{margin:18px 0 0;}
}

/* -- 見出し〜本文の間に空く余白の解消 ---------------------------------------
   製品画像が head/body の2行にまたがるため、余剰高さが両行に分配され
   「スイッチひとつで…」と本文の間が大きく空いていた。
   上2行を内容ベース（min-content）に固定し、製品側を行高に追従させる。 */
@media (min-width:901px){
  .fv-inner{
    grid-template-rows:min-content min-content auto auto;
    align-items:start;
  }
  .fv-inner > .fv-visual{align-self:stretch;min-height:0;}
  /* 製品画像を絶対配置にして、グリッドの行高計算に影響させない。
     これにより上2行はテキスト量ぴったりの高さになり、余分な余白が出ない。
     画像は object-fit:contain で領域内に比率を保って収まる。 */
  .fv-visual--hero{position:relative;min-height:0;height:100%;padding-block:0;}
  .fv-visual--hero .fv-product-cutout{
    position:absolute;inset:0;margin:auto;
    width:100%;height:100%;max-width:none;max-height:none;
    object-fit:contain;
  }
}

/* -- スマホの製品画像を大きく ------------------------------------------------
   従来は幅260px・高さ235pxと小さく、製品の存在感が出ていなかった。
   1画面目に収まる範囲で最大化する（見出し直後の配置は維持）。 */
@media (max-width:900px){
  .fv-inner > .fv-visual{max-width:none;margin:14px auto 6px;}
  .fv-visual--hero{padding-block:0;}
  .fv-visual--hero .fv-product-cutout{
    max-height:390px;max-width:84vw;width:auto;height:auto;
  }
  .fv-product-glow{inset:-18%;background:radial-gradient(circle at 50% 45%,rgba(201,162,39,.3),transparent 66%);}
  .fv-bolt-watermark{opacity:.07;}
}
@media (max-width:560px){
  .fv-inner > .fv-visual{margin:12px auto 4px;}
  .fv-visual--hero .fv-product-cutout{max-height:370px;max-width:86vw;}
}
@media (max-height:700px){
  /* 画面の低い端末では1画面目を優先して控えめに */
  .fv-visual--hero .fv-product-cutout{max-height:290px;}
}

/* -- リード文2行目の折り返し解消 --------------------------------------------
   max-width:560px の制限で「…対策機器。」の「器。」だけが3行目に落ちていた。
   必要幅は実測618px。左カラムには余裕があるため上限を広げて2行に収める。 */
@media (min-width:901px){
  .fv-lead{max-width:660px;}
}
@media (min-width:901px) and (max-width:1240px){
  .fv-lead{max-width:none;font-size:15.5px;}
}

/* -- スペック説明文を1行に収める --------------------------------------------
   「夜間や暗所でも威嚇効果」「持ち運びやすく繰り返し使える」が2行に折り返して
   いた。左カラムを広げ、説明文を詰めて1行に収める。
   製品画像は高さ基準で描画されているため、右カラムを狭めても実寸は変わらない。 */
@media (min-width:901px){
  .fv-inner{grid-template-columns:1.38fr .62fr;}
  .fv-specs{gap:0 18px;}
  .fv-spec-desc{font-size:12px;white-space:nowrap;letter-spacing:0;}
  .fv-spec-title{white-space:nowrap;}
}
@media (min-width:901px) and (max-width:1240px){
  .fv-specs{gap:0 12px;}
  .fv-spec-desc{font-size:11px;}
  .fv-spec-title{font-size:13.5px;}
}

/* -- 見出しの改行位置を固定 --------------------------------------------------
   左カラムを広げたことで「遭遇してからでは、遅／い。」と崩れたため、
   ゴールド部分をブロック化して必ず改行させる。 */
.fv-h1 .gold{display:block;}

/* -- LP専用フォーム: ラベル要素に対応 ---------------------------------------
   項目名を <label for> で囲んだため、バッジとの横並びを label 側で行う。 */
.contact-form-card .wpcf7 dt label{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:14px;font-weight:700;color:#1A1D21;
}

/* -- 製品画像を再拡大 --------------------------------------------------------
   一連の調整（料金の全幅化・リード2行化・左カラム拡張）の副作用で
   製品が881→644pxまで縮小していた。以下3点で高さと幅を取り戻す。
   ・右カラムを拡張（左は説明文1行を維持できる下限まで戻す）
   ・右カラム上部の空きスペースへ製品をせり出させる
   ・本文ブロック下に余白を持たせ、製品の描画領域の高さを確保 */
@media (min-width:901px){
  .fv-inner{grid-template-columns:1.26fr .74fr;}
  .fv-specs{gap:0 12px;}
  .fv-spec-desc{font-size:11px;}
  /* 本文下に余白を持たせて製品の描画領域（＝上2行の高さ）を稼ぐ */
  .fv-body{padding-bottom:0;}
  /* 画像側は inset:0 のまま（置換要素は width:auto にすると実寸になり破綻するため）。
     描画枠の拡張は親要素のネガティブマージンで行う。 */
  .fv-inner > .fv-visual{margin:-66px -56px -8px -20px;}
  .fv-visual--hero .fv-product-cutout{
    width:100%;height:100%;top:0;left:0;right:0;bottom:0;
  }
  /* 背景のクマを左へ寄せ、右側に製品のスペースを空ける */
  .fv-bg{background-position:42% 40%;}
}
@media (min-width:1280px){
  .fv-inner > .fv-visual{margin:-66px -70px -8px -20px;}
  .fv-bg{background-position:38% 40%;}
}
@media (min-width:901px) and (max-width:1240px){
  .fv-spec-desc{font-size:10.5px;}
  .fv-body{padding-bottom:64px;}
}

/* 料金を実績のすぐ右に置き、メタ行の右側を製品のスペースとして空ける */
@media (min-width:901px){
  .fv-inner > .fv-meta{justify-content:flex-start;gap:16px 28px;flex-wrap:nowrap;}
  .fv-meta-price{flex:0 0 auto;text-align:left;justify-content:flex-start;max-width:none;white-space:nowrap;}
  .fv-meta-price .note{width:100%;text-align:left;}
}

/* -- メタ行の余白ムラを解消 --------------------------------------------------
   .fv-meta-price を flex のままにすると max-content 幅が
   「ラベル＋金額＋注記」を一列に並べた幅(約394px)で確定してしまい、
   実績側が圧迫されて3行に折り返していた。ブロック表示にして実幅で確定させる。 */
@media (min-width:901px){
  .fv-meta-left{flex:0 0 auto;}
  .fv-meta-line{white-space:nowrap;}
  .fv-meta-price{
    display:block;flex:0 0 auto;white-space:normal;
    max-width:none;text-align:left;
  }
  .fv-meta-price .label{margin-right:10px;}
  .fv-meta-price .amount{white-space:nowrap;}
  .fv-meta-price .note{display:block;width:auto;margin-top:2px;text-align:left;}
}

/* -- PC: KV（ファーストビュー）をフルサイズ表示 -------------------------------
   従来はコンテナ幅1160pxに収めていたため、1920px環境で左右に約380pxずつ
   未使用の余白が出ていた。FVのみ画面幅いっぱいに広げ、
   ・製品画像をさらに大きく
   ・CTA行（ボタン＋活躍シーン）の折り返しを解消（シーン左の余白585pxを解消）
   ・スペック説明の文字サイズを読みやすい水準に戻す */
@media (min-width:1400px){
  #fv .fv-inner{
    /* #fv は display:flex のため、幅指定が無いと内容幅（約1225px）で止まる */
    width:100%;
    max-width:min(1720px, calc(100vw - 120px));
    padding-inline:0;
  }
  .fv-specs{gap:0 20px;}
  .fv-spec-desc{font-size:12.5px;}
  .fv-spec-title{font-size:15px;}
  .fv-actions{gap:40px;}
  .fv-actions .fv-scenes-grid{gap:14px 26px;}
  .fv-actions .fv-scene-label{font-size:12px;}
  /* 横幅が広がるぶん、リード文は読みやすい行長で止める */
  .fv-lead{max-width:720px;}
}
/* ※ 1700px以上で max-width:1720px を上書きする指定を撤去。
   左右余白が4pxしか残らず、製品画像のはみ出し分が #fv の overflow:hidden で
   切れていたため。min(1720px, calc(100vw - 120px)) だけで上限は担保できる。 */

/* -- スマホのFEATURES: 円形カード→横型カードに変更 ---------------------------
   円形(aspect-ratio:1/1・最大286px)が5枚縦に並び、セクションが約1,620pxと
   縦に間延びしていた。番号を左に置く横型カードにして高さを圧縮する。 */
@media (max-width:560px){
  .feature-grid{gap:12px;margin:26px 0 16px;}
  .feature-card{
    aspect-ratio:auto;border-radius:14px;max-width:none;
    padding:18px 18px 18px 70px;
    text-align:left;display:block;
    box-shadow:0 4px 14px rgba(20,20,20,.06);
  }
  .feature-card .fnum{
    position:absolute;top:16px;left:16px;transform:none;
    font-size:30px;padding:0;gap:0;line-height:1;
    color:#C9A227;
  }
  /* 円形時の装飾線は横型では不要 */
  .feature-card .fnum::before,
  .feature-card .fnum::after{display:none;}
  .feature-card h3{
    font-size:16px;margin-bottom:5px;line-height:1.4;
    text-align:left;text-wrap:pretty;
  }
  .feature-card h3 .wbrk{display:inline;}
  .feature-card p{font-size:12.5px;line-height:1.65;text-align:left;margin-inline:0;}
}

/* -- KV全幅化に伴う「製品が相対的に小さく見える」問題の解消 -------------------
   全幅化で内容幅が1160→1720pxに広がった結果、製品の幅比が33%→22%へ低下し
   実寸(754px)は増えていても小さく見える状態だった。
   製品は描画枠の「高さ」で頭打ちになっているため、FV上部の余白を増やして
   その分だけ製品を上へ伸ばす（＝内部に隙間を作らずに縦方向を稼ぐ）。 */
@media (min-width:1400px){
  /* 枠(グリッド行)経由では高さが確保できないため、画像に直接サイズを指定する。
     aspect-ratio があるので height だけ決めれば幅は比率で決まる。 */
  #fv{padding-top:calc(76px + 190px);}
  .fv-visual--hero .fv-product-cutout{
    position:absolute;
    /* 親(.fv-visual)は margin-top:-66px のぶん上にずれているため、その分を加味 */
    top:-110px;right:-40px;left:auto;bottom:auto;
    aspect-ratio:708 / 1400;
    /* FVは縦スクロール前提のセクションなので、画面の高さ(vh)には連動させない。
       vh連動にすると900px高のノートPCで逆に小さくなるため固定値とする。 */
    height:900px;
    width:auto;max-width:none;max-height:none;
    margin:0;
  }
}

/* 電話番号欄の注記（ハイフンなし・半角数字） */
.contact-form-card .wpcf7 dt .hint{
  font-size:11.5px;font-weight:500;color:var(--text-onLight-sub);margin-left:2px;
}

/* -- フォームの応答メッセージが白背景に白文字で読めない問題を修正 -------------
   セクションがダークテーマのため文字色#fffを継承し、白いフォームカード上で
   完全に不可視になっていた（送信完了・エラーとも）。 */
.contact-form-card .wpcf7-response-output{
  color:#1A1D21;
  background:#F4F6F8;
  border:1px solid #C9CED4;
  border-radius:8px;
  padding:14px 16px;
  margin:18px 0 0;
  font-size:13.5px;line-height:1.7;
  text-align:center;
}
/* 送信成功 */
.contact-form-card .wpcf7 form.sent .wpcf7-response-output{
  color:#0F5132;background:#E8F5EC;border-color:#46A06A;
}
/* 入力エラー・送信失敗 */
.contact-form-card .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-card .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-card .wpcf7 form.failed .wpcf7-response-output,
.contact-form-card .wpcf7 form.aborted .wpcf7-response-output{
  color:#8A0B22;background:#FDECEF;border-color:#C8102E;
}
/* 項目ごとのエラー文言 */
.contact-form-card .wpcf7-not-valid-tip{
  color:#C8102E;font-size:12.5px;font-weight:700;margin-top:6px;display:block;
}
.contact-form-card .wpcf7-not-valid{border-color:#C8102E !important;}
/* 送信中の表示 */
.contact-form-card .wpcf7-spinner{margin-inline:10px;}

/* -- 製品画像の右端が見切れる問題を修正 --------------------------------------
   .fv-visual の margin-right:-70px と画像の right:-60px が加算され、
   .fv-inner の外側へ計130pxはみ出していた。一方 .fv-inner の左右余白は
   最小60px（max-width:calc(100vw - 120px)）しかないため、#fv の
   overflow:hidden で右端が最大70px切れていた。
   画像は絶対配置＋高さ固定で枠幅に依存しないため、枠側のはみ出しは解除する。 */
@media (min-width:1400px){
  .fv-inner > .fv-visual{margin-right:0;}
}

/* -- 製品画像を画面幅に連動させ、段差なく縮小させる ---------------------------
   従来は 901〜1279px で右カラム幅（0.74fr）に収める方式だったため、
   製品だけが細くなっていた（実測: 901pxで206px幅・占有率23%）。
   さらに900px以下では390px固定で、境界に大きな段差があった。
   画面幅に比例する計算式へ統一し、全体が縮むのに合わせて製品も縮むようにする。

   ・高さ  : clamp(430px, 62vw, 900px)   → 占有率が概ね33〜38%で一定
   ・上余白: clamp(72px, 14vw, 190px)    → 画面幅に応じてFV上部の余白も連動
   ・画像上端: 上余白と連動させ、ヘッダー直下から一定距離に保つ */
@media (min-width:901px){
  #fv{padding-top:calc(76px + clamp(72px, 14vw, 190px));}
  .fv-inner > .fv-visual{margin-right:0;}
  .fv-visual--hero .fv-product-cutout{
    position:absolute;
    top:calc(79px - clamp(72px, 14vw, 190px));
    right:-40px;left:auto;bottom:auto;
    aspect-ratio:708 / 1400;
    height:clamp(430px, 62vw, 900px);
    width:auto;max-width:none;max-height:none;
    margin:0;
  }
}
/* タブレット（縦積みレイアウト）でも画面幅に連動させる */
@media (min-width:601px) and (max-width:900px){
  .fv-inner > .fv-visual{max-width:none;margin:14px auto 6px;}
  .fv-visual--hero .fv-product-cutout{
    max-height:clamp(390px, 52vw, 470px);
    max-width:62vw;
  }
}

/* -- 中間幅でスペック欄が左カラムからはみ出し、製品と重なる問題を修正 ---------
   説明文を1行に保つ(white-space:nowrap)ため、4カラム横並びの最小幅が
   左カラム幅を超え、はみ出した部分が製品画像と重なっていた
   （実測: 901pxで56px、1200pxで14pxの重なり）。
   この範囲のみ2×2配置にして必要幅を半分にする。説明文は1行のまま。 */
@media (min-width:901px) and (max-width:1279px){
  .fv-specs{
    display:grid;grid-template-columns:1fr 1fr;
    gap:20px 22px;
  }
  .fv-spec-divider{display:none;}
  .fv-spec-desc{font-size:11.5px;}
  .fv-spec-title{font-size:14px;}
}

/* -- はみ出し量を画面幅ごとの余白に合わせる -----------------------------------
   1400px未満はコンテナ左右余白が28pxしかなく、40pxのはみ出しでは
   #fv の overflow:hidden で12px切れていた（実測: 950px・1024px）。 */
@media (min-width:901px) and (max-width:1399px){
  .fv-visual--hero .fv-product-cutout{right:-8px;}
}
@media (min-width:1400px){
  .fv-visual--hero .fv-product-cutout{right:-40px;}
}

/* 901〜999pxではスペック2×2でも左カラム幅をわずかに超えるため、さらに詰める */
@media (min-width:901px) and (max-width:999px){
  .fv-specs{gap:16px 14px;}
  .fv-spec-title{font-size:13px;}
  .fv-spec-desc{font-size:10.5px;}
  .fv-spec-icon{width:26px;height:26px;}
  .fv-spec-icon svg{width:13px;height:13px;}
}

/* ==========================================================================
   MONITOR REPORT（モニター使用結果）
   既存の VOICE セクションと同じライト面・ゴールド基調に合わせ、
   「声」は黒タグ＋グレー面、「対応・見解」はゴールドタグ＋白面で対比させる。
   ========================================================================== */
.monitor-lede{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:14.5px;font-weight:700;color:var(--gold-1);
  letter-spacing:.02em;margin:6px 0 10px;
}
.monitor-lede::before,.monitor-lede::after{
  content:"";width:26px;height:1.5px;background:var(--gold-2);
  transform:skewX(-20deg);
}
.monitor-sep{margin:0 14px;color:var(--gold-2);font-weight:400;}

.monitor-list{display:flex;flex-direction:column;gap:14px;margin-top:34px;}
.monitor-row{
  display:grid;grid-template-columns:190px 1fr;align-items:center;gap:0 26px;
  background:var(--white);
  border:1px solid rgba(0,0,0,.06);
  border-left:4px solid var(--gold-2);
  border-radius:12px;
  padding:22px 26px;
  box-shadow:0 4px 16px rgba(20,20,20,.05);
}
.monitor-topic{position:relative;}
.monitor-topic span{
  display:block;font-size:17px;font-weight:900;color:var(--text-onLight);
  line-height:1.4;letter-spacing:.01em;
}
.monitor-topic::after{
  content:"";display:block;width:30px;height:3px;border-radius:2px;
  background:var(--gold-2);margin-top:10px;
}
.monitor-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}
.monitor-col{position:relative;padding-left:0;}
.monitor-col--reply{
  border-left:1px solid rgba(0,0,0,.08);padding-left:26px;
}
.monitor-tag{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:5px 12px;border-radius:5px;margin-bottom:10px;
}
.monitor-tag--voice{background:var(--text-onLight);color:#fff;}
.monitor-tag--reply{background:var(--gold-2);color:#231B04;}
.monitor-col p{
  font-size:13.5px;line-height:1.85;color:var(--text-onLight-sub);
  word-break:auto-phrase;text-wrap:pretty;
}
.monitor-col--reply p{color:var(--text-onLight);}
.monitor-col p b{font-weight:900;color:var(--text-onLight);font-size:15px;}
.monitor-col p em{font-style:normal;font-weight:700;color:var(--gold-1);}

.monitor-foot{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:30px;font-size:14px;font-weight:700;color:var(--text-onLight);
  text-align:center;
}
.monitor-foot::before,.monitor-foot::after{
  content:"";flex:0 1 90px;height:1px;background:rgba(0,0,0,.18);
}

@media (max-width:1100px){
  .monitor-row{grid-template-columns:150px 1fr;gap:0 20px;padding:20px 22px;}
  .monitor-topic span{font-size:16px;}
  .monitor-cols{gap:0 20px;}
  .monitor-col--reply{padding-left:20px;}
}
@media (max-width:820px){
  /* 3カラムを縦積みに。項目名は上部の見出しとして扱う */
  .monitor-row{grid-template-columns:1fr;gap:14px;padding:18px 18px;}
  .monitor-topic{display:flex;align-items:center;gap:12px;}
  .monitor-topic::after{margin-top:0;width:24px;}
  .monitor-cols{grid-template-columns:1fr;gap:14px;}
  .monitor-col--reply{
    border-left:none;padding-left:0;
    border-top:1px dashed rgba(0,0,0,.14);padding-top:14px;
  }
  .monitor-foot::before,.monitor-foot::after{flex-basis:30px;}
}
@media (max-width:560px){
  .monitor-list{gap:12px;margin-top:26px;}
  .monitor-row{padding:16px 16px;border-radius:10px;}
  .monitor-topic span{font-size:15px;}
  .monitor-col p{font-size:13px;line-height:1.8;}
  .monitor-lede{font-size:13px;gap:10px;}
  .monitor-lede::before,.monitor-lede::after{width:18px;}
  .monitor-sep{margin:0 8px;}
  .monitor-foot{font-size:13px;gap:10px;}
}

/* 見出しの改行位置を制御（語中で切れないように） */
#monitor .section-title .accent{display:inline-block;}
@media (max-width:640px){
  #monitor .monitor-sep{display:none;}
  #monitor .section-title .accent{display:block;margin-top:2px;}
}

/* -- スマホの縦長感を圧縮 ------------------------------------------------------
   タグが独立行を占め、1項目あたり253〜280px・セクション計2,348pxと縦長だった。
   タグを本文の1行目に回り込ませ（float）、余白と行間も詰める。 */
@media (max-width:560px){
  .monitor-list{gap:10px;margin-top:22px;}
  .monitor-row{padding:14px 14px;border-left-width:3px;}
  .monitor-topic{gap:10px;}
  .monitor-topic span{font-size:14.5px;}
  .monitor-topic::after{width:20px;height:2px;}
  .monitor-cols{gap:10px;}
  .monitor-col--reply{padding-top:10px;}
  .monitor-tag{
    margin:0 0 6px;
    font-size:10.5px;padding:3px 8px;border-radius:4px;
  }
  .monitor-col p{font-size:12.5px;line-height:1.72;}
  .monitor-col p b{font-size:13.5px;}
  .monitor-foot{margin-top:22px;font-size:12.5px;line-height:1.7;}
}

/* -- スマホ: 初期表示を3件に絞り、残りは展開式に -------------------------------
   7項目すべてを常時展開すると約1,900pxとなり縦長感が強いため、
   初期は3件＋ボタンに（約900px）。内容はDOM上に残るのでSEO・検索性は維持。 */
.monitor-more{display:none;}
/* 縦積みになる820px以下に適用（タブレット768pxでも2,146pxと長いため） */
@media (max-width:820px){
  .monitor-list:not(.is-open) .monitor-row:nth-child(n+4){display:none;}
  .monitor-more{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;margin-top:14px;padding:14px 16px;
    background:#fff;border:1.5px solid var(--gold-2);border-radius:10px;
    font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text-onLight);
    cursor:pointer;min-height:48px;
  }
  .monitor-more::after{
    content:"";width:8px;height:8px;flex:0 0 8px;
    border-right:2px solid var(--gold-1);border-bottom:2px solid var(--gold-1);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s ease;
  }
  .monitor-more[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px);}
  .monitor-more:focus-visible{outline:3px solid var(--gold-3);outline-offset:2px;}
}

/* -- PCの強弱を強化（モニター使用結果） ---------------------------------------
   従来は7行が同じ濃度で並び単調だった。以下で視線の起点と結論を明確にする。
   ・各行にゴールドの通し番号（01〜07、FEATURESと同じOswald）をCSSカウンタで付与
   ・項目名を17→20pxに拡大
   ・「声」は引用符の装飾＋やや控えめの色で"問い"として見せる
   ・「対応・見解」はゴールドの薄い面で"答え"として持ち上げ、
     数値・強調語を19pxまで拡大して斜め読みで要点が拾えるようにする */
@media (min-width:821px){
  .monitor-list{counter-reset:monitor;}
  .monitor-row{counter-increment:monitor;padding:26px 30px;gap:0 30px;
    transition:transform .18s ease, box-shadow .18s ease;}
  .monitor-row:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,20,20,.09);}
  .monitor-topic{display:flex;align-items:center;gap:14px;}
  .monitor-topic::before{
    content:counter(monitor,decimal-leading-zero);
    font-family:'Oswald',sans-serif;font-size:34px;font-weight:700;line-height:1;
    color:#A98C33;letter-spacing:.03em;flex:0 0 auto;
  }
  .monitor-topic::after{display:none;}
  .monitor-topic span{font-size:20px;line-height:1.35;}

  /* 声＝引用 */
  .monitor-col--voice{padding-left:16px;position:relative;}
  .monitor-col--voice::before{
    content:"\201C";position:absolute;left:-6px;top:26px;
    font-family:Georgia,serif;font-size:52px;line-height:1;color:rgba(201,162,39,.35);
  }
  .monitor-col--voice p{font-size:14px;}

  /* 見解＝結論の面 */
  .monitor-col--reply{
    border-left:none;
    background:linear-gradient(135deg, rgba(201,162,39,.10), rgba(201,162,39,.045));
    border:1px solid rgba(201,162,39,.28);
    border-radius:10px;padding:16px 20px;
  }
  .monitor-col--reply p{font-size:14.5px;line-height:1.8;}
  .monitor-col p b{font-size:19px;letter-spacing:.01em;}
  .monitor-col p em{font-size:15.5px;}
  .monitor-tag{font-size:12px;}
  .monitor-tag--reply{box-shadow:0 2px 8px rgba(201,162,39,.35);}
}

/* -- 高さの統一 ---------------------------------------------------------------
   行ごとに高さが不揃い（113〜141px）で、行内でも「声」と「見解」の下端が
   ずれていた。全行を同一の高さに固定し、行内の2面もストレッチで揃える。 */
@media (min-width:821px){
  /* 最も文章量の多い行(実測190px)に合わせ、全行を同一高さに固定 */
  .monitor-row{min-height:190px;}
  .monitor-cols{align-items:stretch;}
  .monitor-col{display:flex;flex-direction:column;justify-content:center;}
  .monitor-tag{align-self:flex-start;}
  .monitor-col--voice::before{top:50%;transform:translateY(-8px);}
}

/* 項目名は文節単位でのみ折り返す（「使いや/すさ」のような語中切れを防ぐ） */
.monitor-topic .wbrk{display:inline-block;}
.monitor-topic span{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;}

/* -- VOICE: 見出しの視認性を強化 ----------------------------------------------
   引用見出しが19pxで本文との差が小さく埋もれていた。
   肩書は小さなラベル扱いに、引用は26pxのゴールド下線付き見出しに格上げする。 */
@media (min-width:821px){
  .testi-body{padding:38px 40px 40px;}
  .testi-who{
    display:inline-block;font-size:12.5px;letter-spacing:.02em;
    background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.3);
    color:var(--gold-1);font-weight:700;
    padding:5px 12px;border-radius:99px;margin-bottom:16px;
  }
  .testi-quote{
    font-size:26px;line-height:1.5;margin-bottom:14px;
    padding-bottom:14px;position:relative;
  }
  .testi-quote::after{
    content:"";position:absolute;left:0;bottom:0;
    width:44px;height:3px;border-radius:2px;background:var(--gold-2);
  }
  .testi-text{font-size:15px;line-height:2.0;}
}
@media (max-width:820px){
  .testi-quote{font-size:20px;line-height:1.55;}
  .testi-who{font-size:12px;}
}

/* 見出し内の改行指定はPCのみ有効化（スマホは自然折り返しに任せる） */
@media (max-width:820px){
  .testi-quote br{display:none;}
}

/* 最終CTA見出しの「今すぐ。」をFVの「遅い。」と同じゴールドグラデで強調 */
.final-cta h2 .gold-em{
  background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* MONITOR REPORT の導入文はPCでは1行で表示（幅制限を解除） */
@media (min-width:901px){
  #monitor .section-sub{max-width:none;white-space:nowrap;}
}

/* -- SOLUTION: 「携帯型クマ対策製品「IKAZUCHI（イカズチ）」です。」を1行に -----
   .solution-head の max-width:760px より必要幅が広く「で/す。」と折れていた。
   PCでは見出しのみ幅制限を外して1行を保証。スマホは文節単位で折り返し、
   600px以下は文字を一段落として2行で収める。 */
.solution-head .lead .wbrk{display:inline-block;}
@media (min-width:901px){
  .solution-head .lead{max-width:none;margin-inline:calc((760px - 100vw)/2 + 28px);}
  .solution-head .lead .nobr{white-space:nowrap;}
}
@media (max-width:600px){
  .solution-head .lead{font-size:1.3rem;}
}

/* -- SUMMARY: CTAをセクション中央に -------------------------------------------
   従来はテキスト列の中にあり左寄りだった。グリッド全幅の行に出して中央へ。 */
/* order:3 は全幅で必要。テキスト(0)と画像(order:2)の後に置かないと、
   全幅行のCTAが2カラムの間に割り込み、画像が下段へ落ちてしまう。 */
.summary-cta{grid-column:1 / -1;order:3;text-align:center;margin-top:8px;}

/* -- FVスペック: 新文言（最長21字）は4列×1行に収まらないため、PCも2×2に -----
   説明文の1行表示は維持。区切り線は2×2では不要。 */
@media (min-width:901px){
  .fv-specs{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:16px 46px;}
  .fv-spec-divider{display:none;}
  .fv-spec-desc{white-space:nowrap;}
}

/* 2×2グリッドでは旧4列用の区切り余白(2個目以降のpadding-left)が
   左下項目だけの字下げになってしまうため打ち消す */
@media (min-width:901px){
  .fv-specs .fv-spec{padding-left:0;padding-right:0;}
}

/* -- FVテキストの開始位置を引き上げ ------------------------------------------
   上余白 clamp(72,14vw,190) は製品画像の位置決めと連動しているが、
   テキスト側には過大（1440pxで見出しラベルが y=286 から開始）だった。
   ・上余白を clamp(56,7vw,96) に縮小 → ラベルが y≈152〜172 から始まる
   ・画像の top も同じ変数で連動させ、ページ上の絶対位置(89px)は不変
   ・縮めた差分は .fv-actions の margin-top で吸収し、
     CTA行の位置＝製品下端とのクリアランス(34px)を維持する */
@media (min-width:901px){
  #fv{padding-top:calc(76px + clamp(56px, 7vw, 96px));}
  .fv-visual--hero .fv-product-cutout{top:calc(79px - clamp(56px, 7vw, 96px));}
  .fv-actions{margin-top:calc(4px + clamp(72px, 14vw, 190px) - clamp(56px, 7vw, 96px));}
}

/* -- 導入実績: 全幅スライド（マーキー） --------------------------------------
   メタ行から独立させ、画面端から端まで流れる帯に。項目が3件のため
   グループを4連結して切れ目なくループさせる。reduce-motion時は静止・中央。 */
.fv-track{
  grid-area:track;
  margin-inline:calc(50% - 50vw);
  overflow:hidden;
  border-block:1px solid rgba(230,199,102,.22);
  background:rgba(255,255,255,.02);
  padding-block:14px;
  margin-top:26px;
}
.fv-track-inner{display:flex;width:max-content;animation:fv-ticker 26s linear infinite;}
.fv-track-group{display:flex;align-items:center;gap:40px;padding-right:40px;}
.fv-track-label{
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold-3);
  border:1px solid rgba(230,199,102,.45);border-radius:99px;padding:4px 14px;
  flex:0 0 auto;
}
.fv-track-item{
  position:relative;font-size:14px;font-weight:700;color:var(--text-onDark);
  white-space:nowrap;padding-left:16px;flex:0 0 auto;
}
.fv-track-item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold-2);
}
@keyframes fv-ticker{from{transform:translateX(0);}to{transform:translateX(-25%);}}
@media (prefers-reduced-motion: reduce){
  .fv-track-inner{animation:none;justify-content:center;width:100%;}
  .fv-track-group[aria-hidden="true"]{display:none;}
}

/* -- CTA行: ボタン群を中央へ、活躍シーンはその下に中央揃えで積む -------------- */
@media (min-width:901px){
  /* 文字引き上げ用の余白補正はスライド帯が入ったため撤回 */
  .fv-actions{
    margin-top:0;padding-top:24px;
    flex-direction:column;align-items:center;gap:22px;
    border-top:none;
  }
  .fv-cta-group{justify-content:center;}
  .fv-actions .fv-scenes{margin-left:0;}
  .fv-actions .fv-scenes-title{text-align:center;}
  .fv-actions .fv-scenes-grid{justify-content:center;}
}
@media (max-width:560px){
  .fv-track{margin-top:18px;padding-block:11px;}
  .fv-track-item{font-size:12.5px;}
  .fv-track-label{font-size:10.5px;padding:3px 10px;}
}

/* 「導入実績」ラベルはスライドの上に固定表示（流れる列には組織名のみ） */
.fv-track-head{display:flex;justify-content:center;margin-bottom:10px;}
.fv-track{padding-block:12px 14px;}
@media (max-width:560px){
  .fv-track-head{margin-bottom:8px;}
}

/* -- FV: 紐の下の空きに「使い方写真」をポラロイド風に重ねる -------------------
   位置は製品画像と同じ式（top/高さのclamp）から導出し、全PC幅で
   ストラップ下の空きに追従させる。1200px未満は空きが無いため非表示。 */
.fv-usage-shots{display:none;}
@media (min-width:901px){
  .fv-usage-shots{
    position:absolute;z-index:3;
    display:flex;gap:16px;align-items:flex-start;
    /* 注記ブロック（実測 y=858〜887・全PC幅でほぼ一定）の横に並べる。
       製品比率ではなく注記帯基準の固定値でセンターを合わせる。 */
    /* 横長化でカード幅が広がり注記テキストに重なるため、
       注記帯(上端858px)より上に収まる位置へ（下端≈830pxで8px以上のクリア） */
    top:535px;
    right:calc(-40px + clamp(430px, 62vw, 900px)*0.5057*0.42);
  }
  .fv-usage-shots figure{
    margin:0;background:#fff;padding:6px 6px 20px;
    border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.5);
    transform:rotate(-3.5deg);
  }
  .fv-usage-shots figure:last-child{transform:rotate(2.5deg) translateY(16px);}
  .fv-usage-shots img{width:190px;height:120px;object-fit:cover;display:block;border-radius:2px;}
  .fv-usage-shots figcaption{
    font-size:10.5px;font-weight:700;color:#3A3F45;text-align:center;
    margin-top:6px;letter-spacing:.02em;
  }
}

/* -- 料金の注記を金額の横へ・下余白を圧縮 ------------------------------------
   「※詳細はお問い合わせください」を月額の横に並べ（1101px以上）、
   料金行と導入実績帯の間の余白を詰める。 */
@media (min-width:1101px){
  .fv-meta-price .note{
    display:inline;width:auto;margin:0 0 0 12px;text-align:left;
    font-size:12px;
  }
}
@media (min-width:901px){
  .fv-inner > .fv-meta{padding-bottom:4px;}
  .fv-track{margin-top:10px;}
}
@media (max-width:560px){
  .fv-track{margin-top:12px;}
}

/* -- 使い方写真: 拡大・横長(16:9)化＋スマホ表示対応 ---------------------------
   ①PCはカードを拡大し、比率を4:3→16:9の横長に
   ②スマホ(900px以下)は「空きが無く非表示」だった仕様を変更し、
     製品写真の直下に2枚横並びの通常フローで表示する
   （901〜1199pxのタブレット横は従来どおり非表示のまま） */
@media (min-width:1200px){
  /* 絶対配置のshrink-to-fitで親枠幅にカードが潰されるため、実寸で確定させる */
  .fv-usage-shots{width:max-content;}
  .fv-usage-shots figure{flex:0 0 auto;}
  .fv-usage-shots img{width:170px;height:96px;}
}
@media (min-width:1400px){
  .fv-usage-shots img{width:256px;height:144px;}
  .fv-usage-shots{gap:18px;}
}
@media (max-width:900px){
  .fv-visual--hero{flex-direction:column;}
  .fv-usage-shots{
    position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px;
    width:100%;max-width:430px;margin:16px auto 0;padding-inline:4px;
  }
  .fv-usage-shots figure{
    transform:none;margin:0;background:#fff;padding:5px 5px 16px;
    border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  .fv-usage-shots figure:last-child{transform:none;}
  .fv-usage-shots img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:2px;}
  .fv-usage-shots figcaption{
    font-size:9.5px;font-weight:700;color:#3A3F45;text-align:center;margin-top:4px;
  }
}

/* -- 使い方写真: 1400px以上はさらに拡大し、右の空き（ストラップ手前）まで使う */
@media (min-width:1400px){
  .fv-usage-shots{
    gap:20px;
    right:calc(-40px + clamp(430px, 62vw, 900px)*0.5057*0.18);
  }
  .fv-usage-shots img{width:320px;height:180px;}
}

/* -- 使い方写真: 限界まで拡大 ------------------------------------------------
   上限の制約: 上=製品ホーン下端 / 下=注記帯上端(887px) / 左=スペック文右端。
   1400px台は左の文字までの幅が、1700px以上は縦の残り空間が上限になる。
   傾きを浅くしてバウンディングの無駄も削減。 */
@media (min-width:1400px){
  .fv-usage-shots{top:515px;}
  .fv-usage-shots img{width:336px;height:189px;}
  .fv-usage-shots figure{transform:rotate(-2.5deg);}
  .fv-usage-shots figure:last-child{transform:rotate(1.5deg) translateY(12px);}
}
@media (min-width:1700px){
  .fv-usage-shots{top:500px;}
  .fv-usage-shots img{width:400px;height:225px;}
}

/* -- 使い方写真: 製品への被さり許可を受けて再拡大（文字の可読性のみ守る） ----
   制約を「スペック/リード/注記のテキストに掛からないこと」だけに緩和。
   製品ホーンへの重なりは許容し、上方向へ拡大。 */
@media (min-width:1400px){
  .fv-usage-shots img{width:356px;height:200px;}
}
@media (min-width:1700px){
  .fv-usage-shots{top:440px;}
  .fv-usage-shots img{width:460px;height:259px;}
}

/* -- 使い方写真: 位置を下へ（注記帯の手前まで） ------------------------------ */
@media (min-width:1400px){
  .fv-usage-shots{top:530px;}
}
@media (min-width:1700px){
  .fv-usage-shots{top:475px;}
}

/* -- 使い方写真: 下端を注記下の罫線(y=987)に一致させる ----------------------- */
@media (min-width:1400px){
  .fv-usage-shots{top:629px;}
}
@media (min-width:1700px){
  .fv-usage-shots{top:570px;}
}

/* -- 使い方写真: クライアント修正案(2026-08-10 docx)に合わせ上部配置へ --------
   「現状(罫線下端揃え) → ヘッダー直下寄りの高い位置」という画像指示。
   下端揃え(top:629/570)を上書きし、ページ上 約500px から開始する位置に統一。 */
@media (min-width:1400px){
  /* 1400〜1699はリード文（実測で下端596px）に掛かるため、その直下から */
  .fv-usage-shots{top:507px;}
}
/* 1700〜1739pxはリード文字まで-10pxとなるため、高配置は1740px以上に限定 */
@media (min-width:1740px){
  .fv-usage-shots{top:403px;}
}

/* -- 使い方写真: 右端・罫線スナップ＋連続縮小（PC/タブレット横） --------------
   ・幅は 25vw（上限460px）で画面と一緒に縮む
   ・位置はJS（下記）で「右端から16px / 下端＝料金上の罫線」に毎回整列
     （罫線Yやコンテナ右端が幅により変動するため、計測ベースで確実に合わせる） */
@media (min-width:901px){
  .fv-usage-shots img{width:min(25vw, 460px);height:auto;aspect-ratio:16/9;}
}

/* -- 使い方写真: PC/タブレットでは傾きなしの水平配置に（ご指定対応） ---------- */
@media (min-width:901px){
  .fv-usage-shots figure{transform:none;}
  .fv-usage-shots figure:last-child{transform:none;}
  .fv-usage-shots{align-items:flex-end;}
}