*{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:clip}
body{margin:0;background:#fff;font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#111318;text-decoration:none}a:hover{color:#6B3DE8}
@keyframes textRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes diagIn{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}to{clip-path:polygon(-40% 0,100% 0,100% 100%,-40% 100%)}}
@keyframes drift{0%{transform:scale(1.06) translate3d(0,0,0)}25%{transform:scale(1.12) translate3d(-2.5%,-1.5%,0)}50%{transform:scale(1.14) translate3d(-1%,-3%,0)}75%{transform:scale(1.09) translate3d(1.5%,-1%,0)}100%{transform:scale(1.06) translate3d(0,0,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes wipeShape{from{transform:translateX(18%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes slashGrow{from{transform:skewX(15deg) scaleY(0)}to{transform:skewX(15deg) scaleY(1)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes lineGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#siteHeader a,#siteHeader span{white-space:nowrap}
[data-nav-toggle]{display:none}
@media (max-width:1180px){[data-nav-desktop]{display:none!important}[data-nav-toggle]{display:inline-flex!important}}
@keyframes revUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes revLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes revRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes revMask{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes revScale{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes revClipDown{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes revLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes revEmph{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes revFaded{from{opacity:0;transform:translateY(10px)}to{opacity:.16;transform:none}}
[data-reveal].is-in{animation:revUp 1s cubic-bezier(.22,1,.36,1) .1s both}
[data-reveal="left"].is-in{animation:revLeft 1.7s cubic-bezier(.22,1,.36,1) both}
[data-reveal="right"].is-in{animation:revRight 1.7s cubic-bezier(.22,1,.36,1) both}
[data-reveal="mask"].is-in{animation:revMask 1.1s cubic-bezier(.22,1,.36,1) .1s both}
[data-reveal="scale"].is-in{animation:revScale 1s cubic-bezier(.22,1,.36,1) .2s both}
[data-reveal="clip"].is-in{animation:revClipDown .95s cubic-bezier(.22,1,.36,1) .22s both}
[data-reveal="line"].is-in{animation:revLine 1.2s cubic-bezier(.22,1,.36,1) .24s both;transform-origin:left}
[data-reveal="emph"].is-in{animation:revEmph 1.05s cubic-bezier(.22,1,.36,1) .18s both}
[data-reveal="faded"].is-in{animation:revFaded 1s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes q2SlideL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes q2SlideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes q2Fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#q2Desktop [data-reveal="left"].is-in,#q2Desktop [data-reveal="mask"].is-in,#q2Mobile [data-reveal="left"].is-in{animation:q2SlideL 1.7s cubic-bezier(.22,1,.36,1) both!important}
#q2Desktop [data-reveal="right"].is-in,#q2Mobile [data-reveal="right"].is-in{animation:q2SlideR 1.7s cubic-bezier(.22,1,.36,1) both!important}
#q2Desktop h2 [data-reveal].is-in,#q2Mobile h2 [data-reveal].is-in{animation:q2Fade 1.1s cubic-bezier(.22,1,.36,1) .12s both!important}
#q2Desktop p[data-reveal].is-in,#q2Mobile p[data-reveal].is-in{animation:q2Fade 1s cubic-bezier(.22,1,.36,1) .26s both!important}
#q2Desktop [data-reveal="clip"].is-in,#q2Mobile [data-reveal="clip"].is-in{animation:q2Fade .95s cubic-bezier(.22,1,.36,1) .34s both!important}
@media (max-width:640px){
@keyframes q2SlideL{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes q2SlideR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
#q2Desktop [data-reveal="left"].is-in,#q2Desktop [data-reveal="mask"].is-in,#q2Mobile [data-reveal="left"].is-in,#q2Desktop [data-reveal="right"].is-in,#q2Mobile [data-reveal="right"].is-in{animation-duration:1.5s!important}
@keyframes revUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes revLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes revRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes revMask{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[data-reveal].is-in{animation-duration:.9s}
[data-reveal="left"].is-in,[data-reveal="right"].is-in{animation-duration:1.35s}
[data-reveal="mask"].is-in{animation-duration:1s}
[data-reveal="scale"].is-in,[data-reveal="clip"].is-in,[data-reveal="emph"].is-in,[data-reveal="faded"].is-in{animation-duration:.85s}
[data-reveal="line"].is-in{animation-duration:1s}
}
#fvMobile,#q2Mobile,#processMobile{display:none}
#fvDesktop,#q2Desktop,#processDesktop{display:block}
@media (max-width:640px){
#contact a[data-cta="contact"]{width:84%;max-width:360px}
#contact h2{font-size:clamp(28px,7.6vw,38px)!important}
#flowGrid{grid-template-columns:minmax(0,1fr)!important;padding-left:30px}
#flowConnector{display:block!important}
#flowGrid > div{padding:24px 0 28px!important}
#whyPhoto{height:clamp(380px,86vw,520px)!important}
#riskGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(40px,7vw,64px) clamp(16px,4vw,24px)!important}
#riskGrid > div{padding:28px 0 0!important;min-width:0}
#riskGrid > div > p:nth-of-type(1){font-size:34px!important;margin-bottom:18px!important}
#riskGrid > div > p:nth-of-type(2){font-size:clamp(17px,4.6vw,19px)!important}
#fvMobile,#q2Mobile,#processMobile{display:block!important}
#fvDesktop,#q2Desktop,#processDesktop{display:none!important}
#siteHeader{height:76px!important}
#philoHeadline{font-size:min(6.2vw,30px)!important;line-height:1.3!important;letter-spacing:-.05em!important;white-space:nowrap!important;max-width:100%!important}
#philoPhoto{opacity:.4!important;filter:brightness(.7) saturate(.88) blur(1px)!important}
#philoImg{object-position:70% 34%!important}
#philoScrim{background:linear-gradient(115deg,rgba(7,21,37,.78) 0%,rgba(7,21,37,.52) 55%,rgba(7,21,37,.3) 100%)!important}
#philoBand{background:linear-gradient(180deg,rgba(7,21,37,.12),rgba(7,21,37,.6) 42%,rgba(7,21,37,.74))!important}
#bizImprovePhoto{order:2!important;margin-top:8px}
}
@media (min-width:641px) and (max-width:1024px){
#q2Desktop h2{font-size:40px!important}
}
@media (min-width:1025px) and (max-width:1379px){
#fvDesktop h1 > span{font-size:clamp(42px,4.3vw,58px)!important}
}
@media (max-width:640px){
#fvMobile h1{font-size:clamp(32px,8.6vw,46px)!important}
#faq > div{grid-template-columns:minmax(0,1fr)!important}
#faq > div > div:last-child{grid-column:span 1!important}
#ucGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(48px,8vw,72px) clamp(16px,3vw,24px)!important}
#ucGrid > div{padding-top:clamp(24px,4vw,40px)!important}
#ucGrid > div > div:nth-child(2){justify-content:flex-start!important;height:clamp(96px,17vw,150px)!important}
#ucGrid > div > div:nth-child(2) > div{width:100%!important;margin-left:0!important}
}
@media (min-width:1100px){
#flowGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(56px,5vw,80px) clamp(32px,3.2vw,48px)!important}
}
@media (min-width:641px) and (max-width:1199px){
#processDesktop > div:nth-child(2){grid-template-columns:repeat(3,minmax(0,1fr))!important}
#riskGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (min-width:641px) and (max-width:1099px){
#faq > div{grid-template-columns:minmax(0,1fr)!important}
#faq > div > div:last-child{grid-column:span 1!important}
#flowGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#ucGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(48px,8vw,72px) clamp(16px,3vw,24px)!important}
#ucGrid > div{padding-top:clamp(24px,4vw,40px)!important;min-width:0}
#ucGrid > div > div:nth-child(2){justify-content:flex-start!important;height:clamp(96px,17vw,150px)!important}
#ucGrid > div > div:nth-child(2) > div{width:100%!important;margin-left:0!important}
}
@media (max-width:640px){
#ucGrid > div > div:first-child > span:first-child{font-size:26px!important}
#ucGrid p:first-of-type{font-size:clamp(17px,4.8vw,21px)!important}
#ucGrid p + p{font-size:13px!important;line-height:1.85!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* インラインstyleの hover / focus 状態（元デザインの style-hover を CSS 化） */
.hv1:hover{border-bottom-color:#6B3DE8!important;color:#111318!important}
.hv2:hover{filter:brightness(1.08)!important;color:#fff!important}
.hv3:hover{gap:20px!important;color:#111318!important}
.hv4:hover{transform:translateY(-3px)!important;color:#6B3DE8!important}
.hv5:hover{color:#fff!important}

/* ===== Section reveal: horizontal slide-in (FV excluded) ===== */
@keyframes rvSlide{from{opacity:0;translate:var(--rv-dx) 0}to{opacity:1;translate:0 0}}
@keyframes rvSlideF{from{opacity:0;translate:var(--rv-dx) 0}to{opacity:.16;translate:0 0}}
html.rvx [data-rv="wait"]{opacity:0}
html.rvx [data-rv="l"]{--rv-dx:-32px}
html.rvx [data-rv="r"]{--rv-dx:32px}
html.rvx [data-rv="l"][data-rv-m]{--rv-dx:-56px}
html.rvx [data-rv="r"][data-rv-m]{--rv-dx:56px}
html.rvx [data-rv].is-in:not(#_):not(#_){animation:rvSlide 1.1s cubic-bezier(.22,1,.36,1) var(--rv-delay,0s) both!important}
html.rvx [data-rv][data-rv-m].is-in:not(#_):not(#_){animation-duration:1.4s!important}
html.rvx [data-reveal="faded"][data-rv].is-in:not(#_):not(#_){animation-name:rvSlideF!important}
@media (max-width:640px){
html.rvx [data-rv="l"]{--rv-dx:-20px}
html.rvx [data-rv="r"]{--rv-dx:20px}
html.rvx [data-rv="l"][data-rv-m]{--rv-dx:-32px}
html.rvx [data-rv="r"][data-rv-m]{--rv-dx:32px}
html.rvx [data-rv].is-in:not(#_):not(#_){animation-duration:.95s!important}
html.rvx [data-rv][data-rv-m].is-in:not(#_):not(#_){animation-duration:1.2s!important}
}