*{box-sizing:border-box}
.slp-page{margin:0;background:#f4f5f2;color:#151515;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",sans-serif}
.slp-shell{min-height:100vh}
.slp-header{height:82px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:5px solid #ffd400}
.slp-header a{display:flex;align-items:center;gap:12px;color:#151515;text-decoration:none;font-size:21px}
.slp-header a b{display:flex;align-items:center;gap:5px}
.slp-header .slp-link{padding:3px 9px;border-radius:5px;background:#ffd400;color:#111;font-size:.78em}
.slp-header .slp-logo{display:block;width:52px;height:52px;object-fit:cover;border-radius:10px}
.slp-header i{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#ffd400;color:#111;font-style:normal;font-weight:900}
.slp-header>span{color:#62676d}
.slp-shell main{width:min(1100px,calc(100% - 32px));margin:0 auto;padding:64px 0}
.slp-intro{text-align:center;max-width:760px;margin:0 auto 42px}
.slp-intro>small,.slp-card>small{color:#916f00;font-weight:900;letter-spacing:.16em}
.slp-intro h1,.slp-card h1{font-size:clamp(30px,5vw,50px);margin:12px 0}
.slp-intro p{font-size:17px;color:#5f6670}
.slp-intro .slp-extension-note{margin:12px auto 0;padding:12px 14px;border-left:5px solid #ffd400;background:#fff8d6;color:#222;text-align:left;font-size:14px;font-weight:700}
.slp-plans{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:900px;margin:auto}
.slp-plans article{position:relative;padding:40px;background:#fff;border:1px solid #d9ddd5;border-radius:18px;box-shadow:0 18px 60px #11111110}
.slp-plans article.recommended{border:3px solid #ffd400}
.slp-plans em{position:absolute;top:-17px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 22px;border-radius:20px;background:#ffd400;color:#111;font-style:normal;font-weight:900}
.slp-plans>article>span{font-size:20px;font-weight:900}
.slp-plans h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:38px;margin:18px 0}
.slp-plans .slp-monthly{color:#5f6670;font-size:15px;font-weight:700;white-space:nowrap}
.slp-plans p{color:#616872}
.slp-plans p b{color:#111}
.slp-period-preview{display:grid;gap:5px;margin:18px 0;padding:15px;border:1px solid #ead27a;border-radius:9px;background:#fff9dc;color:#222}
.slp-period-preview small{font-weight:800;color:#6e5900}
.slp-period-preview b{font-size:15px}
.slp-period-preview span{font-size:12px;color:#4f5660}
.slp-plans ul{padding-left:22px;line-height:2}
.slp-plans button,.slp-button{display:flex;width:100%;min-height:58px;align-items:center;justify-content:center;border:2px solid #111;border-radius:8px;background:#111;color:#fff;font-size:16px;font-weight:900;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease}
.slp-plans article.recommended button{background:#ffd400;color:#111}
.slp-plans button:hover,.slp-button:hover{transform:translateY(-1px)}
.slp-plans button:disabled{border-color:#aeb3b7;background:#c9ced2;color:#fff;cursor:not-allowed;transform:none}
.slp-plans button[aria-busy="true"]{opacity:.68;cursor:wait}
.slp-agree{display:flex;align-items:flex-start;gap:10px;margin:24px 0 14px;padding:14px;border:1px solid #d9ddd5;border-radius:8px;background:#fafbf8;font-size:13px;line-height:1.6}
.slp-agree input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:#111}
.slp-notes,.slp-card{max-width:900px;margin:35px auto 0;padding:34px;background:#fff;border:1px solid #e0e2de;border-radius:16px}
.slp-notes li{margin:10px 0;line-height:1.7}
.slp-notes a,.slp-text-link{color:#0b5cab;font-weight:800}
.slp-warning,.slp-error{max-width:900px;margin:25px auto;padding:18px;border-radius:10px;background:#fff4c2;color:#574600;border-left:5px solid #ffd400}
.slp-error{background:#fff0f0;color:#9d1515;border-left-color:#c62828}
.slp-payment-status{text-align:center}
.slp-payment-status.paid{border:2px solid #18864b}
.slp-payment-status.review{border:2px solid #e49a00}
.slp-payment-status .slp-button{max-width:340px;margin:25px auto 0}
.slp-payment-status .slp-text-link{display:inline-block;margin-top:12px}
.slp-pending-resume{border:2px solid #e49a00;text-align:center}
.slp-pending-resume .slp-button{max-width:420px;margin:22px auto 0}
.slp-shell footer{text-align:center;padding:40px;background:#111;color:#fff}
@media(max-width:700px){.slp-header{height:72px;padding-inline:18px}
.slp-header>span{display:none}
.slp-header .slp-logo{width:46px;height:46px}
.slp-shell main{padding:45px 0}
.slp-plans{grid-template-columns:1fr}
.slp-plans article{padding:32px 24px}
.slp-intro h1,.slp-card h1{font-size:32px}
.slp-plans h2{font-size:32px}
.slp-plans .slp-monthly{flex-basis:100%;font-size:14px}
}