*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:#EEF2F8;color:#3A3A3A;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;font-size:16px;line-height:1.8}
.lp{max-width:560px;margin:0 auto;background:#fff;box-shadow:0 0 40px rgba(23,41,77,.08);padding-bottom:72px}
.part{position:relative}
.part img{display:block;width:100%;height:auto}
.hit{position:absolute;display:block;border-radius:14px;font-size:0;color:transparent}
.hit:focus-visible{outline:3px solid #FF6A2B;outline-offset:2px}
.price{padding:40px 6% 48px;background:#fff}
.price h2{color:#17294D;font-weight:400;font-size:24px;margin-bottom:16px;word-break:keep-all}
.price table{width:100%;border-collapse:collapse}
.price th,.price td{border:1px solid #CBD5E3;padding:14px 16px;text-align:left;font-weight:400}
.price th{background:#17294D;color:#fff;width:42%}
.price td{color:#17294D;font-size:18px}
.price .note{font-size:14px;margin-top:12px}
.foot{background:#17294D;color:#fff;text-align:center;padding:28px 6%}
.foot .small{font-size:13px;opacity:.8}
.sticky{position:fixed;left:50%;bottom:12px;transform:translate(-50%,120%);width:min(92vw,520px);min-height:52px;display:flex;align-items:center;justify-content:center;background:#FF6A2B;color:#fff;text-decoration:none;font-weight:600;border-radius:12px;box-shadow:0 6px 18px rgba(23,41,77,.25);transition:transform .3s;z-index:10}
.sticky.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky{transition:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.note.center{text-align:center}
/* 登場の動き */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
#top img{animation:fvIn 1.6s ease both}
@keyframes fvIn{from{transform:scale(1.05);filter:blur(4px);opacity:.3}to{transform:none;filter:none;opacity:1}}
.hit.shine{overflow:hidden}
.hit.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3.2s ease-in-out 1.8s infinite}
@keyframes shine{0%{left:-60%}35%,100%{left:130%}}
.sticky.show{animation:pulse 2.4s ease-in-out 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px rgba(23,41,77,.25)}50%{box-shadow:0 6px 26px rgba(255,106,43,.55)}}
/* プラン */
.plans{background:linear-gradient(#17294D 0 62%,#fff 62%)}
.plans-head{display:block;width:100%;height:auto}
.plans-wrap{padding:0 0 36px}
.plan-track{list-style:none;padding:8px 6% 20px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.plan-track::-webkit-scrollbar{display:none}
.plan{flex:0 0 78%;scroll-snap-align:center;background:#fff;border:1px solid #CBD5E3;border-top:5px solid #FF6A2B;border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(23,41,77,.12);transition:transform .4s}
.plan>img{display:block;width:100%;height:auto;aspect-ratio:372/300;object-fit:cover}
.plan-body{padding:16px 18px 20px}
.plan h3{color:#17294D;font-weight:400;font-size:26px;letter-spacing:.04em}
.plan-body>p{font-size:14px;line-height:1.7;margin:4px 0 10px}
.plan ul{list-style:none;padding:10px 0 0;border-top:1px solid #CBD5E3}
.plan ul li{padding-left:26px;position:relative;font-size:15px}
.plan ul li::before{content:"✓";position:absolute;left:4px;color:#FF6A2B;font-weight:700}
.plan-price{margin-top:12px;color:#17294D;font-size:22px}
.plan-price span{font-size:14px}
.plan-nav{display:flex;align-items:center;justify-content:center;gap:18px}
.pbtn{width:44px;height:44px;border-radius:50%;border:1px solid #17294D;background:#fff;color:#17294D;font-size:18px;cursor:pointer}
.pbtn:hover{background:#17294D;color:#fff}
.dots{display:flex;gap:8px}.dots i{width:8px;height:8px;border-radius:50%;background:#CBD5E3;transition:all .3s}.dots i.on{background:#17294D;width:22px;border-radius:4px}
.plans .note{text-align:center;font-size:13px;margin-top:10px;padding:0 6%}
.plan-track.hint{animation:nudge 1.4s ease .3s 1}
@keyframes nudge{0%,100%{transform:none}40%{transform:translateX(-36px)}}
/* スマホのサンプル */
.phones{background:#17294D;color:#fff;padding:44px 0 40px;overflow:hidden}
.phones .eyebrow{text-align:center;color:#FF6A2B;letter-spacing:.3em;font-size:13px}
.phones h2{text-align:center;font-weight:400;font-size:28px;line-height:1.5;margin:6px 0 8px;word-break:keep-all}
.phones .lead{text-align:center;font-size:14px;opacity:.85;padding:0 6%;word-break:keep-all}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:18px 6% 6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:14px;cursor:pointer;transition:all .3s}
.tab[aria-selected=true]{background:#FF6A2B;border-color:#FF6A2B}
.phone-track{list-style:none;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px calc(50% - 130px) 22px;scrollbar-width:none}
.phone-track::-webkit-scrollbar{display:none}
.phone{flex:0 0 260px;scroll-snap-align:center;transition:transform .5s,opacity .5s;transform:scale(.88);opacity:.55}
.phone.active{transform:none;opacity:1}
.frame{position:relative;width:260px;height:540px;border-radius:40px;background:#0b1222;padding:12px;box-shadow:0 24px 48px rgba(0,0,0,.45),inset 0 0 0 2px #2a3550}
.frame::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:80px;height:22px;border-radius:12px;background:#0b1222;z-index:2}
.screen{width:100%;height:100%;border-radius:30px;overflow-y:auto;background:#fff;scrollbar-width:none;overscroll-behavior:contain}
.screen::-webkit-scrollbar{display:none}
.screen img{display:block;width:100%;height:auto}
.phone .cap{text-align:center;font-size:14px;margin-top:12px}
.scroll-hint{position:absolute;right:-6px;bottom:60px;background:#FF6A2B;color:#fff;font-size:11px;padding:4px 8px;border-radius:10px;animation:bob 1.6s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* 動きを止める */
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
.still .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

.foot-name{font-size:18px;letter-spacing:.08em;margin-bottom:4px}
.foot-mail a{color:#fff;text-decoration:underline;word-break:break-all}
.foot p+p{margin-top:4px}
.foot-mail a{display:inline-block;padding:12px 4px;min-height:44px}

.included{margin:22px 6% 0;padding:20px 18px;border:1px solid #CBD5E3;border-radius:14px;background:#F7F9FC}
.included h3{color:#17294D;font-weight:400;font-size:18px;margin-bottom:10px}
.included ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.included li{position:relative;padding-left:22px;font-size:14px;line-height:1.6}
.included li::before{content:"✓";position:absolute;left:2px;color:#FF6A2B;font-weight:700}
.options{margin-top:14px;border-top:1px solid #CBD5E3;padding-top:10px}
.options div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px;border-bottom:1px dashed #CBD5E3}
.options dd{color:#17294D;white-space:nowrap}
.included .note{text-align:left;padding:0;margin-top:12px;font-size:12.5px;line-height:1.7}
@media (max-width:360px){.included ul{grid-template-columns:1fr}}
.plans{background:#fff}
.plans-wrap{background:linear-gradient(#17294D 0 150px,#fff 150px)}
.plan-price{font-size:28px;letter-spacing:.02em;line-height:1.3}
.plan-price span{font-size:13px;margin-left:2px}
@media (max-width:600px){.included ul{grid-template-columns:1fr}}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;font-size:13px}.foot-links a{color:#fff;display:inline-block;min-height:44px;line-height:44px}
.plan-scope{margin-top:4px;font-size:13px;color:#4A5468;line-height:1.6}