@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#13213b;--muted:#657187;--line:#e6e9ef;--green:#12b49b;--paper:#f7f9fc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans JP",system-ui,sans-serif;line-height:1.75}a{color:inherit;text-decoration:none}.shell{width:min(1160px,calc(100% - 44px));margin:auto}.hero{background:radial-gradient(circle at 85% 12%,#203c64 0,transparent 40%),linear-gradient(120deg,#101d35,#162b48);color:white;padding:36px 0 100px;overflow:hidden}.brand{display:flex;align-items:center;gap:12px}.brandmark{display:grid;place-items:center;background:#18c0a5;border-radius:15px;width:50px;height:50px;font-size:28px;font-weight:900;color:white;letter-spacing:-5px;padding-right:5px}.brandmark span{font-size:19px}.brand strong{display:block;font-size:25px;letter-spacing:.03em;line-height:1.25}.brand small{display:block;font-size:11px;color:#bdd0e0;letter-spacing:.15em}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.18em;color:#1aa994}.hero .eyebrow{color:#66e0c9;margin-top:75px}.hero h1{font-size:clamp(31px,5.4vw,62px);letter-spacing:-.045em;line-height:1.45;margin:15px 0 23px;font-weight:900}.hero h1 em{font-style:normal;color:#71e7d3}.lead{color:#d4e1ec;font-size:clamp(14px,1.5vw,17px);line-height:2}.hero-link{display:inline-block;margin-top:25px;border:1px solid #68829e;padding:12px 22px;border-radius:999px;font-weight:700;font-size:13px}.hero-link span{margin-left:16px}.section-head{padding:70px 0 34px}.section-head .eyebrow{margin:0}.section-head h2{font-size:clamp(27px,3vw,38px);margin:5px 0 10px}.section-head>p:last-child{color:var(--muted);margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;margin-bottom:85px}.panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 15px 45px #1220390b;display:flex;flex-direction:column}.panel-top{display:flex;align-items:center;justify-content:space-between;padding:25px 30px 0}.number{font-size:13px;letter-spacing:.12em;color:#99a5b3;font-weight:900}.status{background:#e0f9f1;color:#0d806c;border-radius:99px;padding:4px 12px;font-size:11px;font-weight:800}.status.muted{background:#f0f2f6;color:#738094}.panel-copy{padding:14px 30px 24px}.category{color:#008c83;font-size:12px;font-weight:800;letter-spacing:.04em;margin:0 0 8px}.panel h3{font-size:clamp(24px,2.6vw,34px);line-height:1.4;letter-spacing:-.035em;margin:0 0 12px;font-weight:900}.plus{color:#11bfa1}.panel-copy>p:not(.category){font-size:14px;color:#566277;line-height:1.95;margin:0 0 10px}.manga{position:relative;margin:0 30px 25px;overflow:hidden;border:2px solid #1b2331;background:#f4f4f4;display:block}.manga img{width:100%;display:block;height:440px;object-fit:cover;object-position:top;transition:transform .3s}.manga:hover img{transform:scale(1.02)}.manga span{position:absolute;right:12px;bottom:12px;background:#101c36e8;color:white;font-size:12px;font-weight:700;padding:6px 12px}.cta{display:flex;align-items:center;justify-content:space-between;background:#142b48;color:white;margin:auto 30px 30px;padding:15px 20px;font-weight:800;font-size:14px;border-radius:8px}.hitotsumu .cta{background:#008c78}.cta span{font-size:20px}.future{background:#f8f8ff}.future-art{position:relative;height:285px;display:grid;place-items:center;overflow:hidden;margin:22px 30px 0;background:linear-gradient(130deg,#e3e7ff,#f4edff);border-radius:12px}.future-art>span{font-size:150px;font-weight:900;color:#7075b4;text-shadow:9px 10px 0 #ffffff91;z-index:1;line-height:1}.orb{position:absolute;border-radius:50%;filter:blur(3px)}.orb1{width:250px;height:250px;background:#cad3ff;left:-70px;top:-100px}.orb2{width:200px;height:200px;background:#d5c4fa;right:-70px;bottom:-100px}.future .panel-copy{padding-top:25px}.coming{margin:auto 30px 30px;padding:14px 0;border-top:1px solid #e0e3ee;color:#7776b2;font-weight:900;letter-spacing:.16em;font-size:13px}.coming span{float:right}.about{background:#f5fffc}.about-art{height:285px;margin:22px 30px 0;background:linear-gradient(135deg,#d9f6ed,#eff9fc);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.about-art span{font-size:clamp(28px,4vw,52px);font-weight:900;letter-spacing:-.06em;color:#13304b}.about-art i{font-size:13px;font-weight:800;letter-spacing:.18em;color:#0ca78f;font-style:normal}.about .panel-copy{padding-top:25px}footer{background:#101d35;color:white}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:30px 0;font-size:12px;color:#b8c9db}.footer-inner strong{font-size:18px;color:white}.footer-inner small{font-size:11px;font-weight:400}@media(max-width:760px){.shell{width:min(100% - 30px,520px)}.hero{padding:25px 0 65px}.hero .eyebrow{margin-top:58px}.hero h1{font-size:clamp(28px,8vw,43px)}.lead br{display:none}.section-head{padding:48px 0 26px}.grid{grid-template-columns:1fr;gap:20px;margin-bottom:55px}.panel-top{padding:22px 22px 0}.panel-copy{padding:14px 22px 20px}.manga{margin:0 22px 20px}.manga img{height:390px}.cta{margin:0 22px 24px}.future-art,.about-art{margin:20px 22px 0;height:235px}.coming{margin:25px 22px}.footer-inner{flex-direction:column;align-items:flex-start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.manga img{transition:none}}
/* Portal-first layout: small header, apps immediately visible */
.topbar{background:#14243c;color:white}.topbar-inner{display:flex;justify-content:space-between;align-items:center;min-height:94px;padding:16px 0}.topbar-note{font-size:13px;color:#c6d7e6;font-weight:600}.section-head{padding:37px 0 25px}.section-head h1{font-size:clamp(24px,3vw,34px);line-height:1.45;margin:5px 0 5px;font-weight:900}.section-head>p:last-child{font-size:14px}.grid{align-items:stretch}@media(max-width:760px){.topbar-inner{min-height:75px;padding:12px 0}.topbar-note{font-size:11px}.brand strong{font-size:21px}.brandmark{width:42px;height:42px}.section-head{padding:27px 0 20px}}
/* v3: airy editorial-style application directory */
:root{--ink:#263445;--muted:#77818d;--line:#e9edf0;--paper:#fff}
body{background:#fff;color:var(--ink)}
.topbar{background:#fff;color:var(--ink);border-bottom:1px solid #edf0f1}
.topbar-inner{min-height:76px;padding:12px 0}
.topbar-note{color:#7d8992;font-weight:500}
.brand strong{font-size:23px;letter-spacing:0;font-weight:800}
.brand small{color:#8c959c}
.brandmark{background:#2bb8a5;border-radius:11px;width:43px;height:43px;font-size:25px}
.section-head{padding:34px 0 28px}
.section-head .eyebrow{font-size:10px;letter-spacing:.16em;color:#3eaf9e}
.section-head h1{font-size:clamp(23px,2.6vw,31px);font-weight:800;letter-spacing:0;margin:6px 0}
.section-head>p:last-child{color:#879099}
.grid{gap:26px;margin-bottom:64px}
.panel{border:1px solid #edf0f1;border-radius:10px;box-shadow:none;background:#fff}
.panel-top{padding:22px 25px 0}
.panel-copy{padding:13px 25px 20px}
.panel h3{font-size:clamp(23px,2.3vw,30px);font-weight:800}
.panel-copy>p:not(.category){color:#697580}
.category{color:#469e92;font-weight:700}
.number{color:#b1b9be}
.status{background:#eaf7f2;color:#368b77;font-weight:700}
.status.muted{background:#f2f4f5;color:#8b949b}
.manga{margin:0 25px 22px;border:1px solid #e5e8ea;background:#fafafa}
.manga img{height:400px}
.manga span{background:#fff;color:#51616a;border:1px solid #e8ebed;right:10px;bottom:10px}
.cta,.hitotsumu .cta{margin:0 25px 25px;background:#fff;color:#217d72;border:1px solid #c7e5dd;border-radius:7px;padding:12px 16px;font-weight:700}
.cta:hover{background:#f1faf7}
.future,.about{background:#fff}
.future-art{background:#f7f8fb;height:245px;border-radius:8px;margin:20px 25px 0}
.future-art>span{color:#b1b9c9;text-shadow:none;font-size:115px}
.orb1{background:#e8edf4}.orb2{background:#edf0f5}
.about-art{background:#f4faf8;height:245px;border-radius:8px;margin:20px 25px 0}
.about-art span{color:#54746e;font-size:clamp(27px,3vw,39px)}
.about-art i{color:#78a59b}
.coming{margin:15px 25px 25px;color:#9aa3ae;border-top:1px solid #eceff1}
footer{background:#f7f9f9;border-top:1px solid #e9edef;color:#7b858e}
.footer-inner{padding:24px 0;color:#89939a}
.footer-inner strong{color:#58656d}
@media(max-width:760px){.topbar-inner{min-height:67px}.topbar-note{display:none}.section-head{padding:26px 0 22px}.grid{gap:19px}.panel-top{padding:19px 20px 0}.panel-copy{padding:12px 20px 18px}.manga{margin:0 20px 20px}.manga img{height:350px}.cta,.hitotsumu .cta{margin:0 20px 21px}.future-art,.about-art{margin:19px 20px 0;height:220px}.coming{margin:15px 20px 23px}}

/* v4: compact creator introduction; keep app cards unchanged */
.topbar{background:#fff;border-bottom:1px solid #e9edf0}
.topbar .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:114px;padding-top:5px;padding-bottom:5px;overflow:hidden}
.portal-identity{flex:0 0 auto;position:relative;z-index:1}
.topbar .brand{display:flex;align-items:center;gap:9px}
.topbar .brandmark{width:36px;height:36px;font-size:23px;border-radius:10px}
.topbar .brandmark span{font-size:13px}
.topbar .brand strong{font-size:21px}
.topbar .brand small{color:#8a99a9;font-size:10px}
.topbar .topbar-note{display:block!important;font-size:12px;color:#596779;line-height:1.65;margin:5px 0 0}
.developer-art{display:block;width:min(560px,57%);height:108px;object-fit:contain;object-position:right bottom;flex:0 1 auto}
.section-head{padding-top:28px!important}
@media(max-width:760px){.topbar .topbar-inner{min-height:91px;gap:5px}.topbar .brand strong{font-size:17px}.topbar .brandmark{width:31px;height:31px;font-size:19px}.topbar .topbar-note{font-size:10px}.developer-art{width:43%;height:84px;object-fit:cover;object-position:46% bottom}.section-head{padding-top:22px!important}}

/* v8: secondary guide to LINE Official Account (not an OtoWoLab app) */
.line-guide{grid-column:1/-1;display:flex;align-items:center;gap:23px;padding:23px 28px;background:#f7fbf9;border:1px solid #e4eee9;border-radius:10px}
.line-guide-icon{flex:0 0 68px;width:68px;height:68px;border-radius:15px;background:#e7f5ed;display:grid;place-items:center}
.line-guide-copy{flex:1;min-width:0}
.line-guide-label{font-size:11px;font-weight:700;color:#538c77;margin:0 0 3px}
.line-guide-copy h2{font-size:clamp(17px,2vw,22px);font-weight:800;line-height:1.5;margin:0 0 5px;letter-spacing:0}
.line-guide-copy>p:last-child{font-size:13px;line-height:1.85;color:#697580;margin:0}
.line-guide-link{flex:0 0 auto;display:flex;gap:18px;align-items:center;border:1px solid #c5ded2;border-radius:7px;padding:11px 15px;background:white;color:#27775d;font-weight:700;font-size:13px;white-space:nowrap}
.line-guide-link:hover{background:#eff9f4}
@media(max-width:760px){.line-guide{flex-wrap:wrap;gap:12px;padding:19px 20px}.line-guide-icon{flex-basis:51px;width:51px;height:51px;border-radius:12px}.line-guide-icon svg{width:36px;height:36px}.line-guide-copy{flex:1 1 calc(100% - 65px)}.line-guide-copy h2{font-size:17px}.line-guide-link{margin-left:auto}}

/* v9: Yobirin introduction; LP link will be added when ready */
.yobirin h3 small{display:block;font-size:14px;letter-spacing:.04em;font-weight:600;margin-top:4px;color:#697580}
.yobirin-pending{margin:auto 25px 25px;padding:13px 16px;border:1px solid #e5e8ea;border-radius:7px;background:#f8faf9;color:#697580;font-size:13px;text-align:center}
@media(max-width:760px){.yobirin-pending{margin:0 20px 21px}}

/* Readability update shared across the OtoWoLab portal */
body{font-size:17px;line-height:1.75}
.topbar .topbar-note,.section-head>p:last-child,.panel-copy>p:not(.category),
.category,.line-guide-copy>p:last-child,.line-guide-label,.line-guide-link,
.yobirin h3 small,.yobirin-pending,.footer-inner,.footer-inner small,
.status,.number,.manga span,.cta,.coming{font-size:clamp(15px,1.3vw,17px)}
@media(max-width:760px){
body{font-size:16px}
.topbar .topbar-note,.panel-copy>p:not(.category),.category,
.line-guide-copy>p:last-child,.line-guide-link,.yobirin-pending{font-size:15px}
}

/* v10: layout balance after readability changes */
.topbar .topbar-inner{height:auto!important;max-height:none!important;min-height:142px!important;padding-block:18px!important;overflow:visible!important;align-items:center!important}
.portal-identity{min-width:0}
.topbar .topbar-note{font-size:16px!important;line-height:1.65!important;margin:10px 0 0!important;overflow-wrap:anywhere}
.topbar .developer-art{height:116px!important;max-height:116px!important;object-fit:contain!important;object-position:right center!important}
.panel,.panel-copy,.panel-top{min-width:0}
.panel-copy>p:not(.category){overflow-wrap:anywhere;line-height:1.8}
.about .panel-copy{padding-bottom:28px}
.about .panel-copy>p:not(.category){max-width:100%;white-space:normal;word-break:normal;overflow-wrap:anywhere}
.panel h3{overflow-wrap:anywhere}
@media(max-width:760px){
 .topbar .topbar-inner{height:auto!important;min-height:128px!important;max-height:none!important;padding-block:14px!important;gap:12px!important}
 .portal-identity{flex:1 1 55%!important;min-width:0}
 .topbar .topbar-note{font-size:14px!important;line-height:1.55!important}
 .topbar .developer-art{flex:0 1 40%!important;width:40%!important;height:100px!important;max-height:100px!important;object-fit:contain!important;object-position:center!important}
}
@media(max-width:430px){
 .topbar .topbar-inner{align-items:center!important;min-height:145px!important}
 .topbar .topbar-note{font-size:14px!important}
 .topbar .developer-art{width:34%!important;flex-basis:34%!important;height:90px!important}
 .about .panel-copy>p:not(.category){font-size:16px;line-height:1.8}
}

.footer-contact{font-size:16px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:4px}.footer-inner{flex-wrap:wrap;gap:14px 26px}

/* Contact link is a quiet utility, beside copyright */
.footer-inner{justify-content:space-between}
.footer-meta{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,2.5vw,32px);flex-wrap:wrap;margin-left:auto}
.footer-inner .footer-contact{font-size:14px;font-weight:400;letter-spacing:0;color:#718087;text-decoration:none}
.footer-inner .footer-contact:hover,.footer-inner .footer-contact:focus-visible{text-decoration:underline;text-underline-offset:4px;color:#286e62}
@media(max-width:760px){.footer-meta{margin-left:0;justify-content:flex-start;gap:12px 22px}.footer-inner .footer-contact{font-size:14px}}