/* v4.0 補助レイヤー: 背景・挿絵・ゆっくりした動き。配色トークンは site-v4.css を継承 */
body{overflow-x:clip}
.hero{position:relative}
.hero-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,.85) 38%,#000 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,.85) 38%,#000 70%)}
.hero-fx canvas{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;mix-blend-mode:multiply;will-change:transform,opacity}
.hero-fx .fx-map{opacity:.8;animation:fxmap 40s ease-in-out infinite alternate,fxa 20s ease-in-out infinite}
.hero-fx .fx-draw{opacity:0;animation:fxdraw 40s ease-in-out infinite alternate,fxb 20s ease-in-out infinite}
@keyframes fxmap{from{transform:scale(1.04) translate3d(-1.5%,0,0)}to{transform:scale(1.12) translate3d(1.5%,-1%,0)}}
@keyframes fxdraw{from{transform:scale(1.1) translate3d(1.5%,0,0)}to{transform:scale(1.03) translate3d(-1.5%,1%,0)}}
@keyframes fxa{0%,38%{opacity:.8}50%,88%{opacity:0}100%{opacity:.8}}
@keyframes fxb{0%,38%{opacity:0}50%,88%{opacity:.7}100%{opacity:0}}
.hero-fx{opacity:0;transition:opacity .35s}.hero-fx.is-ready{opacity:1}
.hero-fx.is-paused canvas{animation-play-state:paused}
.hero>.hero-layout{position:relative;z-index:1}
.hero-copy{position:relative}
.hero-copy:before{content:'';position:absolute;inset:-18px -28px -18px -40px;z-index:-1;background:radial-gradient(ellipse at 35% 50%,rgba(242,245,248,.9) 0,rgba(242,245,248,.7) 58%,rgba(242,245,248,0) 100%)}
@media(max-width:640px){.hero-fx .fx-map{animation:fxa 20s ease-in-out infinite}.hero-fx .fx-draw{animation:fxb 20s ease-in-out infinite}.hero-fx{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.55) 60%,#000 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.55) 60%,#000 100%)}.hero-fx canvas{object-position:60% 100%}}
@media(prefers-reduced-motion:reduce){.hero-fx{transition:none}.hero-fx canvas{animation:none!important}.hero-fx .fx-map{opacity:.7}.hero-fx .fx-draw{opacity:0}}

/* 面の単調さを崩す背景 */
.products-section,.company-section{position:relative;isolation:isolate}
.products-section:before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;
 background-image:linear-gradient(rgba(23,101,193,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,101,193,.055) 1px,transparent 1px);background-size:32px 32px;
 -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.3) 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.3) 45%,transparent 100%)}
.consultation-section{position:relative;overflow:hidden;isolation:isolate}
.consultation-section:before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360' fill='none' stroke='%231765c1' stroke-opacity='.11'%3E%3Cpath d='M-20 300C80 240 150 330 260 270S430 200 520 250 640 220 680 190'/%3E%3Cpath d='M-20 250C70 195 160 280 260 225S430 150 520 200 640 170 680 140'/%3E%3Cpath d='M-20 200C60 150 160 230 260 180S430 100 520 150 640 120 680 90'/%3E%3Cpath d='M-20 150C50 105 160 180 260 135S430 50 520 100 640 70 680 40'/%3E%3Cpath d='M-20 100C40 60 160 130 260 90S430 0 520 50 640 20 680-10'/%3E%3C/svg%3E") right top/640px 360px repeat}
.company-section:before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;
 background-image:radial-gradient(rgba(23,101,193,.17) 1.2px,transparent 1.5px);background-size:18px 18px;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 45%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 45%,#000 100%)}

/* 挿絵 */
.fx-ill{margin:0}.fx-ill img{width:100%;height:auto;mix-blend-mode:multiply;filter:brightness(1.035);-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 70%,transparent 100%)}
.fx-band{padding-block:20px 0;display:flex;justify-content:center}
.fx-band .fx-ill{width:100%}.fx-band .fx-ill img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.consultation-layout .fx-ill{margin-top:24px;max-width:440px}
.product-masthead{position:relative;overflow:hidden}
.product-masthead>.wrap{position:relative}
.product-masthead .fx-ill{margin:16px 0 0;max-width:420px}
@media(min-width:900px){.product-masthead .fx-ill{position:absolute;right:0;top:0;bottom:0;width:min(46%,560px);max-width:none;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end}.product-masthead .fx-ill img{height:100%;width:auto;max-width:100%;object-fit:contain}.product-masthead .product-title-row{min-height:190px;align-items:center}}
@media(max-width:640px){.fx-band{padding-block:8px 0}.consultation-section:before{opacity:.6}}
@media(max-width:640px){.product-masthead .fx-ill{max-width:300px;margin-inline:auto}}
@media(max-width:640px){.fx-band{padding-block:12px 0}.fx-band .fx-ill img{height:200px;object-fit:cover;object-position:66% 50%;-webkit-mask-image:none;mask-image:none}}