/* PANCRASE — PC 950 / SP 390. Shared semantic HTML; content grows naturally. */
@font-face{font-family:"Noto Sans JP";src:url("assets/fonts/NotoSansJP-Regular.woff2?v=20260920-legal") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url("assets/fonts/NotoSansJP-Bold.woff2?v=20260920-legal") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Oswald;src:url("assets/fonts/Oswald-Bold.woff2?v=20260920-legal") format("woff2");font-style:normal;font-weight:700;font-display:swap}
:root{--black:#000;--white:#fff;--red:#ec001a;--line:#3b3b3b;--page-width:950px;--gutter:20px;--section-space:48px;--block-gap:32px;--sticky-height:56px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-bottom:calc(var(--sticky-height) + env(safe-area-inset-bottom,0px) + 24px)}
body{margin:0;background:var(--black);color:var(--white);font-family:"Noto Sans JP",sans-serif;font-size:15px;font-weight:400;line-height:1.7333;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}h1,h2,h3{font-weight:700}h2{font-size:24px;line-height:34px}h3{font-size:17px;line-height:27px}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}a:focus-visible{outline:3px solid white;outline-offset:5px}section:focus{outline:none}
.site-shell{width:100%;max-width:var(--page-width);margin-inline:auto;padding-bottom:calc(var(--sticky-height) + env(safe-area-inset-bottom,0px))}
.section{position:relative;border-bottom:1px solid var(--line);padding:var(--section-space) var(--gutter);isolation:isolate;scroll-margin-top:24px}
.section-heading{display:grid;gap:8px}
.eyebrow{font-family:Oswald,sans-serif;font-size:18px;font-weight:700;line-height:26px;color:var(--red)}
.body-copy{overflow-wrap:anywhere}
.icon{width:32px;height:32px;object-fit:contain;flex:0 0 32px}
.arrow{width:10px;height:16px;object-fit:contain;flex:0 0 10px}
.button{min-height:56px;width:100%;display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;background:var(--red);font-size:15px;font-weight:700;line-height:24px;transition:background .15s ease}
.button>span{flex:1;text-align:center}.button:hover{background:#c90017}.button:active{background:#b60015}.cta-row{display:flex;justify-content:center}
.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:12px;background:white;color:black;clip-path:inset(100%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip-link:focus{clip-path:none;width:auto;height:auto;overflow:visible}
/* HERO */
.hero{padding:32px var(--gutter);overflow:hidden}
.hero-photo,.hero-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-photo{object-fit:cover;object-position:center}
.hero-shade{z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.1) 40%,rgba(0,0,0,.7) 65%,#000)}
.hero-content{display:flex;flex-direction:column;gap:24px}
.hero .eyebrow{margin-bottom:-16px}
.hero h1{font-size:30px;line-height:42px}
.brand-row{display:flex;align-items:center;gap:2px;margin-bottom:8px}
.brand{font-family:Oswald,sans-serif;font-size:42px;line-height:52px}.brand-particle{font-size:30px;line-height:44px}.hero-title{display:block;max-width:340px}
.hero-photo-space{height:112px;flex:none}
.hero-lead{font-size:15px;line-height:26px}
/* ABOUT */
.about{display:grid;gap:32px}.about-photo img{width:100%;height:224px;object-fit:cover}
.about-copy{display:grid;gap:32px}.about-copy h2{max-width:330px}
/* FEATURES */
.features{display:grid;gap:32px}.features-copy{display:grid;gap:32px}
.feature-grid{display:grid;gap:12px}.feature-card{display:grid;justify-items:center;align-content:center;gap:12px;border:1px solid var(--line);padding:20px;min-height:111px}
.feature-title{font-size:16px;line-height:25px;text-align:center}
/* PLAN */
.plan{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.plan-collage{display:grid;width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:144px 144px;gap:0}
.plan-collage img{width:100%;height:100%;object-fit:cover;min-width:0;min-height:0}
.plan-grid{display:grid;gap:20px}
.plan-card{padding:20px;border:1px solid var(--line);display:flex;flex-direction:column;gap:24px;min-width:0}
.plan-description{display:grid;gap:12px}.plan-name{font-size:30px;line-height:42px}.plan-tagline{font-size:16px;font-weight:700;line-height:25px}
.plan-terms{display:grid;gap:8px;font-size:14px;line-height:24px}
.price{display:flex;gap:8px;align-items:center;margin-top:auto;white-space:nowrap}.price-value{font:700 44px/54px Oswald,sans-serif}.price-tax{font-size:12px;line-height:20px}
/* HOW TO USE */
.use{display:grid;gap:32px;overflow:hidden}
.use h2{font-size:22px;line-height:32px}
.use-photo{position:absolute;z-index:-1;right:0;top:0;width:170px;height:170px;object-fit:cover;opacity:.18}
.use-grid{display:grid;gap:20px}
.use-card{display:grid;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
/* HOW IT WORKS */
.works{display:grid;gap:32px}
.steps{display:grid;gap:16px}
.step{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid var(--line);min-width:0}
.step-top{display:flex;align-items:center;gap:16px}
.step-number{font:700 30px/38px Oswald,sans-serif;color:var(--red)}
.step h3{font-size:18px;line-height:28px}.step-note{font-size:12px;line-height:20px}
/* CONTACT / FOOTER */
.contact{display:grid;gap:32px}
.contact-methods{display:grid;gap:12px}
.contact-method{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);min-height:62px}
.contact-method .icon{width:24px;height:24px;flex-basis:24px}
.phone{font-size:22px;line-height:30px}.mail{font-size:18px;line-height:30px;overflow-wrap:anywhere}
.footer{padding-top:24px;padding-bottom:24px}
.footer-links{display:flex;flex-direction:column;text-align:center}
.footer-link{padding:12px;min-height:46px;font-size:13px;line-height:22px;border-bottom:1px solid var(--line)}
.footer-link[href]:hover{text-decoration:underline;text-underline-offset:4px}
.bottom-cta{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:950px;background:var(--red);padding-bottom:env(safe-area-inset-bottom,0px)}
.bottom-cta .button{min-height:var(--sticky-height)}
/* Tablet: readable intermediate layouts, same document and source order. */
@media(min-width:768px){
:root{--gutter:40px;--sticky-height:95px}
h2{font-size:31px;line-height:40px;letter-spacing:-1px}
.eyebrow{font-size:21px;line-height:30px}
.hero{min-height:497px;padding:76px 60px}
.hero-content{max-width:650px;gap:24px}.hero h1{font-size:42px;line-height:54px}.brand{font-size:44px;line-height:56px}.brand-particle{font-size:42px;line-height:54px}.brand-row{margin:0}.hero-title{max-width:none;white-space:nowrap}.mobile-break{display:none}
.hero-photo-space{display:none}
.hero-lead{max-width:430px;font-size:14px;line-height:24.5px}
.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.02) 70%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 65%)}
.button{width:300px;min-height:50px;padding:12px 20px;font-size:16px;line-height:26px}.hero .button{margin-top:12px}
.about{grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.about-photo img{height:240px}.about-copy{gap:24px}.about-copy h2{max-width:none;font-size:28px;line-height:38px}
.about .body-copy{font-size:14px;line-height:24.5px}
.features{grid-template-columns:1.1fr 1fr;gap:30px}
.features-copy{gap:16px}.features-copy h2{font-size:27px;line-height:37px}.features-copy .body-copy{font-size:14px;line-height:24px}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feature-card{min-height:104px;padding:14px 10px;gap:8px}.feature-title{font-size:13px;line-height:20px}.feature-card .icon{width:28px;height:28px}
.plan{padding-top:28px;padding-bottom:50px;gap:0}
.plan .section-heading{margin-bottom:40px}.plan h2{font-size:35px;line-height:44px}
.plan-collage{grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:827/325;margin-bottom:50px}
.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-bottom:40px}
.plan-card{min-height:360px}.plan-name{font-size:40px;line-height:48px}.plan-tagline{font-size:18px;line-height:28px}.plan-card .body-copy{font-size:14px;line-height:24.5px}
.price-value{font-size:46px;line-height:70px}.price-tax{font-size:14px}
.use{padding-top:20px;padding-bottom:28px;gap:24px}.use h2{font-size:31px;line-height:40px;max-width:480px}.use-lead{max-width:620px;font-size:14px;line-height:23px;margin-top:-8px}
.use-photo{width:230px;height:250px;opacity:.5}
.use-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.use-card h3{font-size:16px;line-height:22px}.use-card p{font-size:13px;line-height:22px}
.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.works{padding-top:16px;padding-bottom:25px}
.contact{padding-top:22px;padding-bottom:40px;gap:20px}.contact>.body-copy{font-size:14px;line-height:24.5px}
.contact-methods{grid-template-columns:1fr 1fr}.contact-method{border:0;justify-content:center}.mail{order:-1}
.footer{padding-top:12px;padding-bottom:12px}
.footer-links{flex-direction:row;justify-content:center;gap:32px}.footer-link{font-size:12px;border:0}
.bottom-cta .button{width:100%;min-height:var(--sticky-height);font-size:24px}
}
/* PC composition: 950px design width, 60px gutters. */
@media(min-width:1024px){
:root{--gutter:60px;--sticky-height:85px}
.hero{overflow:visible}
.hero-photo,.hero-shade{left:50%;right:auto;width:100vw;max-width:none;transform:translateX(-50%)}
.features-copy h2{font-size:31px;line-height:40px}
.use-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.use-card{padding:0 18px 0 0;border-bottom:0;align-content:start}
.use-card+ .use-card{border-left:1px solid var(--line);padding-left:18px}
.use-card h3{min-height:44px}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.step{padding:0 14px;gap:0;border:0;min-height:300px}
.step:first-child{padding-left:0}.step:last-child{padding-right:0}.step+.step{border-left:1px solid var(--line)}
.step-top{position:relative;height:48px;justify-content:center;margin-bottom:8px}
.step-number{position:absolute;left:0;top:0;font-size:28px;line-height:37px;color:white}
.step h3{font-size:15px;line-height:24px;letter-spacing:-.7px;min-height:48px;text-align:center;margin-bottom:24px}
.step .body-copy{font-size:13px;line-height:22px}
.step-note{margin-top:16px;font-size:10px;line-height:16px}
}
@media(max-width:359px){
:root{--gutter:16px}.brand{font-size:38px}.hero h1{font-size:28px}.price-value{font-size:40px}.plan-tagline{font-size:15px}.button{font-size:14px}.step h3{font-size:17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}