:root{
  --paper:#F4F6F5; --ink:#1D2329; --ink-2:#4A535C; --ai:#26487A; --hinoki:#C99A55;
  --night:#111A29; --night-ink:#E7ECF2; --night-2:#9AA8B8; --leaf:#5FD3BC;
  --rule:#D5DBDA;
  --jp-head:"Shippori Mincho B1","Yu Mincho",serif;
  --jp-body:"BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
  --en:"Bricolage Grotesque","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.85 var(--jp-body)}
a{color:var(--ai)}
a:focus-visible,button:focus-visible{outline:3px solid var(--hinoki);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}

/* header */
header{border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:28px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 19px/1 var(--jp-head);letter-spacing:.02em}
.brand svg{width:28px;height:28px}
nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none;font-size:15px}
nav a:hover{color:var(--ai);text-decoration:underline;text-underline-offset:5px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:72px 64px}
.hero h1{font:800 clamp(32px,4.6vw,50px)/1.35 var(--jp-head);margin:0 0 20px;letter-spacing:.01em;text-wrap:balance}
.hero p{margin:0 0 30px;max-width:34em;color:var(--ink-2);font-size:17px}
.doors{display:flex;gap:14px;flex-wrap:wrap}
.door{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;text-decoration:none;font-weight:700;border:2px solid var(--ai)}
.door.biz{background:var(--ai);color:#fff}
.door.cre{color:var(--night);border-color:var(--night);font-family:var(--en);font-weight:800}
.door:hover{filter:brightness(1.08)}
.joint{width:100%;max-width:560px;justify-self:end}
.joint .left{animation:slide 1.6s cubic-bezier(.2,.7,.1,1) .3s both}
@keyframes slide{from{transform:translateX(-70px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.joint .left{animation:none}}

/* business */
section{padding-block:64px}
h2{font:800 30px/1.4 var(--jp-head);margin:0 0 8px}
.sub{margin:0 0 28px;color:var(--ink-2)}
.biz-head{display:flex;justify-content:space-between;gap:24px;align-items:end;flex-wrap:wrap;border-top:3px solid var(--hinoki);padding-top:28px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.filters button{font:inherit;font-size:14px;padding:6px 14px;background:transparent;border:1px solid var(--rule);color:var(--ink);cursor:pointer;border-radius:999px}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;vertical-align:top;padding:14px 12px;border-bottom:1px solid var(--rule)}
th{font-size:13px;color:var(--ink-2);font-weight:700;border-bottom:2px solid var(--ink)}
td.name a{font-weight:700;text-decoration:none}
td.name a:hover{text-decoration:underline}
td.what{color:var(--ink-2);max-width:30em}
td.price{white-space:nowrap;font-size:14px}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border:1px solid var(--rule);margin-right:4px;color:var(--ink-2)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:44px}
.steps div{border-left:2px solid var(--hinoki);padding-left:16px}
.steps b{display:block;font-family:var(--jp-head);font-size:19px;margin-bottom:4px}
.steps p{margin:0;color:var(--ink-2);font-size:15px}
.note{margin-top:22px;font-size:14px;color:var(--ink-2)}

/* creators */
.creators{background:var(--night);color:var(--night-ink)}
.creators h2{font:800 40px/1.15 var(--en);letter-spacing:-.01em}
.creators .sub{color:var(--night-2);font-family:var(--en);font-size:17px}
.creators a{color:var(--leaf)}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.shelf a{display:block;text-decoration:none;color:var(--night-ink)}
.shelf img{display:block;width:100%;aspect-ratio:315/250;object-fit:cover;background:#1b2638}
.shelf span{display:block;font:500 15px/1.4 var(--en);margin-top:10px}
.shelf small{display:block;color:var(--night-2);font:400 13px/1.4 var(--en)}
.shelf a:hover span{color:var(--leaf)}
.row-label{font:800 15px/1 var(--en);color:var(--night-2);margin:36px 0 14px}
.allitch{display:inline-block;margin-top:36px;font:800 16px var(--en)}

/* articles + about */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:12px 0;border-bottom:1px solid var(--rule)}
.list .where{font-size:13px;color:var(--ink-2);display:block}
dl{margin:0;display:grid;grid-template-columns:8em 1fr;gap:10px 16px}
dt{color:var(--ink-2);font-size:14px}
dd{margin:0}
footer{border-top:1px solid var(--rule);padding-block:28px;font-size:13px;color:var(--ink-2)}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-block:44px}
  .joint{justify-self:start;max-width:420px}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:18px}
  nav{margin-left:0}
}

.skip{position:absolute;left:20px;top:-100px;background:var(--paper);padding:10px;z-index:5}.skip:focus{top:8px}
[hidden]{display:none!important}.lang{font-weight:700}.filters button{min-height:44px;border-radius:0}.count{color:var(--ink-2);margin:0 0 12px}
.product-list{width:100%;min-width:0}.product-list .name{width:30%}.product-list .price{width:23%}.product-list td{overflow-wrap:anywhere}.product-list .tag{margin-top:6px}
.product-list h3{font:700 16px/1.65 var(--jp-body);margin:0}.product-list .price a{display:block;font-size:13px}.badge{display:block;font-size:12px;color:var(--ink-2);font-weight:400}
.steps h3{font:700 20px/1.5 var(--jp-head);margin:0 0 8px}.shelf{margin-top:24px}.volume-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin:24px 0 0;padding:0;list-style:none}.volume-links li{max-width:32em}
.guide-list{columns:2;column-gap:32px;padding-left:20px}.guide-list li{break-inside:avoid;margin-bottom:10px}summary{cursor:pointer;min-height:44px;padding-top:8px}details{margin-top:22px}
html:lang(en) h1,html:lang(en) h2,html:lang(en) h3{font-family:var(--en)}.joint text{font-family:var(--jp-body)}
@media(max-width:600px){.bar{gap:18px;padding-block:18px}nav{gap:10px 18px}.hero{gap:24px}.hero h1{font-size:34px}.hero p{font-size:16px}.product-list thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.product-list tr{display:grid;grid-template-columns:minmax(0,1fr);padding-block:16px;border-bottom:1px solid var(--rule)}.product-list td{display:block;width:auto!important;border:0;padding:4px 0}.product-list .price{white-space:normal}.product-list .price a{display:inline-block;margin-left:16px}section{padding-block:44px}.shelf{gap:24px 16px}.creators h2{font-size:34px}.guide-list{columns:1}dl{grid-template-columns:1fr;gap:4px}dd{margin-bottom:12px}.cols{gap:40px}.doors .door{padding-inline:16px}}

.shelf img{object-fit:contain;background:#111A29}html:lang(ja) .hero h1{font-size:clamp(32px,3.6vw,46px)}

.hero h1{white-space:pre-line;text-wrap:initial}

.purchase-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}
.purchase-card{border:1px solid var(--rule);background:#fff;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.purchase-card h2{font:700 20px/1.5 var(--jp-body);margin:0}
.purchase-card p{margin:0;font-size:14px}.purchase-card .purchase-price,.purchase-price{font:700 28px/1.4 var(--jp-body);margin:14px 0}
.purchase-button{display:inline-block;background:var(--ai);color:#fff!important;border:0;padding:12px 20px;font:700 16px/1.5 var(--jp-body);text-decoration:none;cursor:pointer;min-height:48px;border-radius:4px}
.purchase-button:disabled{opacity:.45;cursor:default}.product-list .price a.purchase-button{display:inline-block;margin:12px 0;font-size:15px}
.commerce{padding-block:28px 48px}.commerce h1{font-size:32px;margin:0 0 16px}.commerce h2{font-family:var(--jp-body)}
.commerce>[data-purchase],.commerce>[data-address-panel]{max-width:680px}.commerce input{display:block;width:100%;padding:14px;font:inherit;border:1px solid var(--ink-2);border-radius:4px;min-height:48px}
.commerce label{display:block;font-weight:700;margin-top:28px}.commerce #address-hint{margin:8px 0;font-size:14px}.commerce #address-error{color:#a12a20}
.terms-summary{max-width:760px}.terms-summary section{padding-block:24px;border-bottom:1px solid var(--rule)}.terms-summary h2{font-size:24px}.terms-summary p+p{margin-top:16px}
.address-preview{background:#e1eee6;border:2px solid #28764a;padding:18px;margin:18px 0}.address-preview p{margin:0}.address-preview strong{font-size:clamp(22px,4vw,32px);overflow-wrap:anywhere}
.commerce details{border-block-end:1px solid var(--rule);padding-bottom:16px}.commerce summary{font-weight:700}.commerce details section{padding:28px 0}.commerce details .wrap{padding:0}.commerce details table{width:100%}.commerce details th,.commerce details td{padding:10px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}.commerce details .features{font-size:14px}.commerce details .features .product-row{background:#e1eee6}.commerce details .tag{margin-inline:8px;font-size:12px}
@media(max-width:700px){.purchase-plans{grid-template-columns:1fr}.commerce{padding-top:20px}.commerce h1{font-size:28px}.purchase-card{padding:18px}.purchase-card h2{font-size:20px}.commerce .purchase-plans{margin-top:16px}.commerce details .features tr{display:flex;flex-direction:column}.commerce details .features tr>*{width:100%}.commerce details .features thead{display:none}}