/* SNSアイキャッチ原本の文字と形を保った背景透過ロゴ */
.site-header .brand{flex:none;width:204px;line-height:0}
.site-header .brand img{width:100%;height:auto}
.hero-product-logo{width:min(100%,540px);margin:31px 0 3px}
.hero-product-logo img{width:100%;height:auto;filter:drop-shadow(0 14px 25px rgba(0,8,34,.2))}
.hero-visual{min-width:0;text-align:center}
.hero-device-scene{position:relative;width:calc(100% + 38px);margin-left:-19px;isolation:isolate}
.hero-device-image{width:100%;height:auto;filter:drop-shadow(0 20px 30px rgba(0,5,17,.22))}
.device-logo{position:absolute;z-index:1;height:auto;pointer-events:none;opacity:.9;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.device-logo-pc{top:12.5%;left:42%;width:17%}
.device-logo-phone{top:39.2%;left:85.2%;width:7.5%;transform:rotate(-2.6deg);transform-origin:center center}
.device-glow{position:absolute;top:24%;width:20.5%;height:31%;border:2px solid rgba(103,203,255,.6);border-radius:14px;background:radial-gradient(ellipse at 50% 70%,rgba(80,181,255,.16),transparent 72%);box-shadow:0 0 28px rgba(43,152,255,.35),inset 0 0 28px rgba(46,157,255,.15);opacity:0;transition:opacity .45s ease;pointer-events:none;mix-blend-mode:screen}
.device-glow-one{left:17%}.device-glow-two{left:40%}.device-glow-three{left:62.5%;width:19%}
.hero-device-scene[data-active-step="1"] .device-glow-one,.hero-device-scene[data-active-step="2"] .device-glow-two,.hero-device-scene[data-active-step="3"] .device-glow-three{opacity:1;animation:device-shimmer 3.5s ease-in-out infinite}
.hero-visual-caption{position:relative;margin:-12px 0 14px;color:#f1f7ff;font-size:17px;font-weight:800;letter-spacing:.08em;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 auto;max-width:670px}
.hero-step{appearance:none;border:1px solid rgba(119,169,237,.28);border-top:2px solid rgba(100,159,231,.45);border-radius:13px;background:rgba(16,43,83,.7);color:#eaf3ff;text-align:left;padding:12px 12px 13px;min-width:0;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.hero-step small{font-size:10px;color:#81bbff;font-weight:900;letter-spacing:.08em}.hero-step strong{font-size:13px;white-space:nowrap;line-height:1.4}.hero-step span{grid-column:2;font-size:10px;color:#a9bfdc;line-height:1.5;white-space:nowrap}
.hero-step:hover,.hero-step:focus-visible,.hero-step.is-active{background:rgba(23,67,133,.83);border-color:rgba(120,205,255,.8);box-shadow:0 -3px 19px rgba(47,150,255,.24),inset 0 1px 12px rgba(69,154,250,.12);transform:translateY(-2px)}
.hero-step:focus-visible{outline:2px solid #b5e4ff;outline-offset:3px}
@keyframes device-shimmer{0%,100%{box-shadow:0 0 23px rgba(43,152,255,.28),inset 0 0 23px rgba(46,157,255,.13)}50%{box-shadow:0 0 36px rgba(73,185,255,.5),inset 0 0 36px rgba(73,185,255,.19)}}
@media(min-width:1101px){
  .hero{padding-top:70px}
  .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);column-gap:32px}
  .hero-copy{min-width:0}
  .hero h1{font-size:clamp(44px,4vw,55px);letter-spacing:-.055em}
  .hero-product-logo{margin-top:20px}
  .hero-lead{line-height:1.85;margin-bottom:17px}
  .hero-points{margin-bottom:22px}
  .hero-device-scene{width:calc(100% + 48px);margin-left:-24px}
}
@media(max-width:1100px){.site-header .brand{width:190px}.hero-device-scene{width:100%;margin-left:0}}
@media(max-width:860px){.hero-product-logo{margin:25px auto 0;width:min(82vw,540px)}.hero-visual{width:min(100%,720px)}.hero-visual-caption{margin-top:-10px}.hero-steps{max-width:650px}}
@media(max-width:640px){.site-header .brand{width:152px}.header-inner{gap:8px;justify-content:space-between}.header-inner .button-small{font-size:10px;line-height:1.2;text-align:center;max-width:176px}.hero-product-logo{width:min(87vw,400px);margin-top:19px}.hero-visual-caption{font-size:14px;margin:0 0 11px}.hero-steps{gap:5px}.hero-step{padding:8px 5px 9px;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}.hero-step small{font-size:9px}.hero-step strong{font-size:11px}.hero-step span{font-size:8px;white-space:normal}.hero-device-scene{width:calc(100% + 18px);margin-left:-9px}.device-glow{border-width:1px;border-radius:6px}}
@media(prefers-reduced-motion:reduce){.device-glow,.hero-step{animation:none!important;transition:none!important}.hero-step:hover,.hero-step.is-active{transform:none}}