*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#111;background:#f3efdf}
button,a{font:inherit}
a{color:inherit}
.article-toc ol[hidden]{display:none!important}
main.article-demo{background:#f3efdf;color:#111}
main.article-demo .article-hero{position:relative;background:#111;color:#f3efdf;min-height:720px;padding:145px 6vw 60px;overflow:hidden}
.article-hero__meta,.article-hero__bottom{display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:900;letter-spacing:.08em;position:relative;z-index:2}
.article-hero h1{position:relative;z-index:2;font-size:clamp(65px,10.8vw,165px);line-height:.98;letter-spacing:-.075em;font-weight:1000;margin:80px 0 35px;transform:rotate(-1.5deg)}
.article-hero h1 em{font-style:normal;color:#ff5b3d}
.article-hero h1 span{color:#dfff00}
.article-hero>p{position:relative;z-index:2;max-width:600px;font-size:clamp(17px,2.1vw,27px);font-weight:800;line-height:1.5;margin:0 0 65px}
.article-hero__sticker{position:absolute;right:8%;top:160px;transform:rotate(12deg);padding:25px 32px;background:#dfff00;color:#111;font-size:clamp(20px,3vw,43px);font-weight:1000;line-height:1.1;box-shadow:12px 12px 0 #8b62ff;z-index:1}
.article-layout{display:grid;grid-template-columns:minmax(0,850px) minmax(180px,1fr);gap:clamp(25px,5vw,80px);width:min(1380px,88%);margin:0 auto;padding:clamp(70px,8vw,125px) 0}
.article-paper{min-width:0}
.article-intro{position:relative;border-top:7px solid #111;border-bottom:3px solid #111;padding:40px 0 40px 90px;margin-bottom:60px}
.article-intro p{font-size:clamp(21px,2.4vw,32px);font-weight:850;line-height:1.8;margin:0}
.article-intro__stamp{position:absolute;left:0;top:38px;font-weight:1000;font-size:23px;line-height:.9;transform:rotate(-12deg);color:#ff5b3d}
.article-toc{border:3px solid #111;background:#dfff00;margin:0 0 70px;box-shadow:8px 8px 0 #111}
.article-toc__button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;border:0;background:transparent;color:#111;padding:23px 28px;text-align:left;cursor:pointer}
.article-toc__button b{display:block;font-size:clamp(30px,4vw,55px);line-height:1;letter-spacing:-.05em}
.article-toc__button small{display:block;font-size:13px;margin-top:7px;font-weight:900}
.article-toc__sign{font-size:45px;font-weight:800;line-height:1}
.article-toc ol{border-top:3px solid #111;margin:0;padding:24px 25px 25px 55px;font-weight:800;line-height:2.1}
.article-toc a{color:#111;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.article-content{font-size:clamp(16px,1.35vw,19px);line-height:2.1}
.article-content h2{font-size:clamp(39px,5vw,73px);letter-spacing:-.06em;line-height:1.18;font-weight:1000;margin:100px 0 35px;padding-top:25px;border-top:6px solid #111;scroll-margin-top:120px}
.article-content h2 span{display:block;color:#ff5b3d;font-size:17px;letter-spacing:0;margin-bottom:12px}
.article-content h3{font-size:clamp(24px,2.5vw,35px);margin:60px 0 20px;line-height:1.4;border-left:10px solid #8b62ff;padding-left:20px}
.article-content p{margin:0 0 30px}
.article-content blockquote{background:#8b62ff;color:#fff;padding:35px;transform:rotate(-1deg);font-size:clamp(23px,3vw,43px);font-weight:1000;line-height:1.5;margin:55px 0}
.article-note{background:#ffb4d6;padding:30px;border:3px solid #111;margin:40px 0}
.article-note b{font-size:38px;letter-spacing:-.05em}
.article-note p{margin:10px 0 0}
.article-aside{position:relative;padding-top:8px}
.article-aside__block{position:sticky;top:105px;border-top:6px solid #111;padding-top:25px}
.article-aside__block span{font-size:12px;font-weight:900}
.article-aside__block strong{display:block;font-size:clamp(25px,2.6vw,42px);line-height:1.25;margin:25px 0}
.article-aside__block p{font-size:14px;line-height:1.7}
.article-aside__scribble{font-size:clamp(80px,12vw,170px);line-height:1;font-weight:1000;transform:rotate(12deg);color:#ff5b3d;opacity:.6;margin-top:100px}
.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-top:3px solid #111;padding:35px 0;margin-top:75px}
.article-tags span{font-size:28px;font-weight:1000;margin-right:10px}
.article-tags a{color:#111;text-decoration:none;border:2px solid #111;padding:10px 17px;border-radius:100px;font-weight:900;font-size:13px}
.article-cta{position:relative;background:#ff5b3d;color:#111;border:4px solid #111;padding:clamp(28px,5vw,65px);overflow:hidden;margin-top:40px}
.article-cta__eyebrow{font-weight:1000;font-size:13px}
.article-cta h2{position:relative;z-index:2;font-size:clamp(53px,7vw,100px);line-height:.95;letter-spacing:-.075em;margin:40px 0 28px}
.article-cta p{position:relative;z-index:2;font-weight:800;line-height:1.7;font-size:17px;max-width:430px}
.article-cta a{position:relative;z-index:2;display:inline-block;margin-top:25px;background:#111;color:#dfff00;text-decoration:none;font-weight:1000;padding:18px 26px}
.article-cta__deco{position:absolute;right:-.1em;bottom:-.35em;font-size:350px;font-weight:1000;opacity:.16;pointer-events:none}
.article-related{background:#111;color:#f3efdf;padding:clamp(75px,9vw,135px) 6vw}
.article-related__head span{font-size:13px;font-weight:900}
.article-related__head h2{font-size:clamp(60px,11vw,160px);letter-spacing:-.08em;line-height:.95;margin:30px 0 70px}
.article-related__head h2 i{color:#dfff00;font-style:normal}
.article-related .zine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.article-related .zine-card{min-width:0;min-height:400px;display:flex;flex-direction:column;justify-content:space-between;padding:25px;position:relative;background:#dfff00;color:#111;border:3px solid #fff;text-decoration:none;overflow:hidden}
.article-related .zine-card:nth-child(2){background:#ff5b3d}
.article-related .zine-card:nth-child(3){background:#8b62ff;color:#fff}
.article-related .zine-card__top,.article-related .zine-card__bottom{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;position:relative;z-index:2}
.article-related .zine-card strong{font-size:clamp(24px,2.6vw,40px);line-height:1.18;letter-spacing:-.04em;position:relative;z-index:2}
.article-related .zine-card__scribble{position:absolute;top:15%;right:-.1em;font-size:180px;opacity:.15;font-weight:1000;pointer-events:none}
.article-related .zine-card__bottom span{border:2px solid currentColor;border-radius:100px;padding:8px}
.article-back{display:block;width:fit-content;margin:55px auto 0;color:#dfff00;font-size:17px;font-weight:900;text-decoration:none;border-bottom:2px solid}
@media (max-width:900px){.article-layout{grid-template-columns:1fr}
.article-aside{display:none}
.article-related .zine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.article-related .zine-card:last-child{grid-column:1/-1;min-height:280px}}
@media (max-width:600px){main.article-demo .article-hero{padding:125px 6vw 45px;min-height:620px}
.article-hero h1{font-size:clamp(54px,12vw,90px);margin:145px 0 35px}
.article-hero__sticker{top:120px;right:10%;padding:16px;font-size:22px}
.article-hero__bottom{display:block;line-height:2}
.article-layout{width:88%;padding:65px 0}
.article-intro{padding:90px 0 30px}
.article-intro__stamp{top:25px}
.article-intro p{font-size:20px}
.article-content h2{margin-top:75px}
.article-related .zine-grid{grid-template-columns:1fr}
.article-related .zine-card,.article-related .zine-card:last-child{grid-column:auto;min-height:310px}
.article-related .zine-card strong{font-size:30px}
.article-cta__deco{font-size:240px}}
.article-content{counter-reset:feature-section;overflow-wrap:anywhere}
.article-content>h2{position:relative;isolation:isolate;border-top:9px solid #111;padding:36px 0 0;margin:105px 0 38px;font-size:clamp(38px,5.6vw,76px);line-height:1.13;letter-spacing:-.075em;text-wrap:pretty}
.article-content>h2::before{counter-increment:feature-section;content:counter(feature-section,decimal-leading-zero) " / READ THIS";display:block;width:max-content;max-width:100%;font-size:12px;letter-spacing:.06em;line-height:1.2;background:#dfff00;color:#111;padding:9px 13px;transform:rotate(-2deg);margin:0 0 25px;font-weight:1000;border:2px solid #111}
.article-content>h2::after{content:"↗";position:absolute;right:0;top:29px;color:#ff5b3d;font-size:clamp(50px,8vw,105px);line-height:1;opacity:.28;z-index:-1;transform:rotate(-13deg)}
.article-content>h3{position:relative;isolation:isolate;border-left:0;padding:12px 12px 12px 23px;margin:68px 0 26px;font-size:clamp(25px,3vw,41px);font-weight:1000;letter-spacing:-.055em;line-height:1.35}
.article-content>h3::before{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;background:#8b62ff;transform:skewY(-12deg)}
.article-content>h3::after{content:"!";position:absolute;right:0;top:-.4em;font-size:3.1em;color:#ffb4d6;opacity:.8;z-index:-1;transform:rotate(16deg)}
.article-content>h4{display:table;position:relative;font-size:clamp(21px,2.3vw,29px);line-height:1.4;letter-spacing:-.035em;font-weight:1000;margin:52px 0 23px;padding:0 5px 8px 0;background:linear-gradient(transparent 70%,#dfff00 70%)}
.article-content>ul,.article-content>ol{padding:28px 27px 28px 35px;margin:35px 0 55px;border:3px solid #111;background:#fff;box-shadow:9px 9px 0 #111;list-style:none}
.article-content>ul>li,.article-content>ol>li{position:relative;padding:15px 0 15px 47px;font-weight:750;line-height:1.7;border-bottom:2px dashed #d8d5cd}
.article-content>ul>li:last-child,.article-content>ol>li:last-child{border-bottom:0}
.article-content>ul>li::before{content:"✳";position:absolute;left:0;top:13px;color:#ff5b3d;font-size:29px;line-height:1}
.article-content>ol{counter-reset:big-list;background:#dfff00;transform:rotate(-.5deg)}
.article-content>ol>li{counter-increment:big-list}
.article-content>ol>li::before{content:counter(big-list,decimal-leading-zero);position:absolute;left:-3px;top:11px;font-weight:1000;font-size:27px;line-height:1;color:#111;letter-spacing:-.08em}
.article-content li ul{margin:12px 0 0;padding-left:22px;list-style:disc;font-size:.92em;font-weight:500}
.article-content li ul li{padding:3px 0}
.article-content>blockquote{position:relative;padding:65px 38px 42px;box-shadow:10px 10px 0 #111;border:3px solid #111;overflow:hidden}
.article-content>blockquote::before{content:"“";position:absolute;top:-45px;left:12px;font-size:155px;line-height:1;color:#dfff00;font-family:Georgia,serif;opacity:.9}
.article-content>blockquote::after{content:"QUOTE!";position:absolute;top:13px;right:18px;font-size:13px;letter-spacing:.08em;background:#dfff00;color:#111;padding:6px 9px;transform:rotate(6deg)}
.article-content>table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;margin:35px 0 55px;border:3px solid #111;box-shadow:8px 8px 0 #111;font-size:clamp(13px,1.35vw,17px);line-height:1.55}
.article-content>table th,.article-content>table td{padding:16px 12px;text-align:left;overflow-wrap:anywhere;border-right:2px solid #111;border-bottom:2px solid #111}
.article-content>table tr>*:last-child{border-right:0}
.article-content>table tr:last-child>*{border-bottom:0}
.article-content>table thead th{background:#111;color:#dfff00;font-size:1.08em;font-weight:1000}
.article-content>table tbody th{background:#ffb4d6;font-weight:1000}
.article-content>table tbody td{background:#fff}
.article-content>table tbody tr:nth-child(even) td{background:#f4f0e4}
.article-content>figure{margin:55px 0;position:relative}
.article-content>figure::before{content:"FIG. / LOOK!";display:block;width:max-content;background:#ff5b3d;color:#111;padding:7px 12px;font-size:12px;font-weight:1000;transform:rotate(-3deg);margin-bottom:12px}
.article-content>figure img{display:block;max-width:100%;height:auto;border:3px solid #111}
.article-content>figure figcaption{text-align:left!important;border-left:5px solid #111;padding:9px 0 9px 14px;margin-top:17px;font-size:13px;font-weight:700}
.article-content a{color:inherit;text-decoration:underline;text-decoration-color:#ff5b3d;text-decoration-thickness:4px;text-underline-offset:5px;font-weight:850}
.article-content strong{font-weight:1000;background:linear-gradient(transparent 64%,#dfff00 64%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.article-content>hr{border:0;height:9px;background:repeating-linear-gradient(90deg,#111 0 25px,transparent 25px 36px);margin:75px 0;transform:rotate(-1deg)}
.article-content code{background:#dfff00;padding:3px 7px;font-size:.85em;border:1px solid #111}
.article-content>pre{max-width:100%;overflow-x:auto;background:#111;color:#dfff00;padding:25px;border-left:9px solid #ff5b3d;font-size:14px;line-height:1.8}
.article-content>pre code{background:none;border:0;padding:0;color:inherit}
@media (max-width:600px){.article-content>h2{margin-top:75px;padding-top:25px}
.article-content>h2::after{opacity:.16}
.article-content>ul,.article-content>ol{padding:16px 16px 16px 13px;box-shadow:5px 5px 0 #111}
.article-content>ul>li,.article-content>ol>li{padding-left:38px}
.article-content>blockquote{padding:65px 22px 32px;box-shadow:5px 5px 0 #111}
.article-content>table th,.article-content>table td{padding:11px 7px}}
.article-aside{display:flex;flex-direction:column;gap:30px;align-self:start;padding-top:0}
.article-parent-categories{background:#f3efdf;border-top:7px solid #111}
.article-side-eyebrow{font-size:11px;font-weight:1000;letter-spacing:.12em}
.article-parent-categories>.article-side-eyebrow{display:block;margin-top:22px}
.article-parent-categories h2{font-size:clamp(28px,2.7vw,42px);letter-spacing:-.07em;line-height:1.15;margin:16px 0 25px;font-weight:1000}
.article-parent-categories h2 span{color:#ff5b3d}
.article-parent-categories ul{list-style:none;margin:0;padding:0;border-top:2px solid #111}
.article-parent-categories li{border-bottom:2px solid #111}
.article-parent-categories li a{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#111;text-decoration:none;font-weight:900;font-size:clamp(14px,1.2vw,18px);padding:17px 3px;transition:padding .18s,background .18s}
.article-parent-categories li a:hover{padding-left:12px;background:#dfff00}
.article-parent-categories li b{font-size:22px}
.article-side-note{font-size:11px;line-height:1.65;opacity:.65;margin-top:18px}
.article-service-banner{position:relative;isolation:isolate;min-height:365px;background:#dfff00;color:#111;border:4px solid #111;padding:24px;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;text-decoration:none;box-shadow:8px 8px 0 #111}
.article-service-banner strong{font-size:clamp(46px,4.8vw,75px);line-height:.97;letter-spacing:-.08em;margin:40px 0 20px;position:relative;z-index:2}
.article-service-banner__name{font-weight:1000;font-size:17px;position:relative;z-index:2}
.article-service-banner__button{display:block;margin-top:auto;padding:13px 15px;background:#111;color:#dfff00;font-weight:900;font-size:13px;position:relative;z-index:2}
.article-service-banner__doodle{position:absolute;top:30px;right:-12px;font-size:165px;line-height:1;transform:rotate(15deg);opacity:.23;font-weight:1000;pointer-events:none}
.article-service-banner__doodle i{position:absolute;font-size:85px;right:55px;top:100px;font-style:normal}
@media (max-width:900px){.article-aside{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;margin-top:10px}
.article-service-banner{min-height:350px}
.article-service-banner strong{font-size:clamp(42px,7vw,68px)}}
@media (max-width:620px){.article-aside{grid-template-columns:1fr;gap:35px}
.article-service-banner{min-height:320px}
.article-service-banner strong{font-size:65px}}
.article-content h4{font-size:clamp(21px,2.1vw,28px);font-weight:950;line-height:1.45;margin:42px 0 18px;padding:0 0 8px;border-bottom:7px solid #dfff00}
.article-content ul,.article-content ol{padding:0;margin:25px 0 45px;list-style:none;counter-reset:item}
.article-content li{position:relative;padding:14px 16px 14px 62px;margin:9px 0;background:#fff;border-left:4px solid #111;font-weight:700;line-height:1.7;min-width:0}
.article-content ul>li:before{content:"●";position:absolute;left:22px;top:15px;font-size:20px;color:#ff5b3d}
.article-content ol>li{counter-increment:item}
.article-content ol>li:before{content:counter(item,decimal-leading-zero);position:absolute;left:12px;top:14px;font-size:21px;font-weight:1000;letter-spacing:-.05em;color:#8b62ff}
.article-content li ul,.article-content li ol{margin:15px 0 0}
.article-content li li{padding:10px 10px 10px 38px;margin:5px 0;background:#f3efdf;border-left:2px solid #111}
.article-content li li:before{left:10px;font-size:13px}
.article-content a{color:#111;text-decoration:underline;text-decoration-color:#ff5b3d;text-decoration-thickness:3px;text-underline-offset:5px}
.article-content a:hover{background:#dfff00}
.article-content strong{font-weight:950;box-shadow:inset 0 -.35em #dfff00}
.article-content table{width:100%;border-collapse:collapse;margin:30px 0 55px;font-size:clamp(13px,1.25vw,17px);line-height:1.6;table-layout:fixed}
.article-content th,.article-content td{border:2px solid #111;padding:15px 12px;overflow-wrap:anywhere;text-align:left}
.article-content thead th{background:#111;color:#dfff00;font-weight:950}
.article-content tbody th{background:#ffb4d6;font-weight:900}
.article-content tbody tr:nth-child(even) td{background:#fff}
.article-content figure{margin:40px 0}
.article-content img{display:block;max-width:100%;height:auto}
.article-content figcaption{text-align:center;font-size:13px;line-height:1.6;margin-top:12px;color:#444}
.article-sample-image{min-height:240px;display:flex;align-items:center;justify-content:center;background:#dfff00;border:3px solid #111;font-size:clamp(18px,3vw,32px);font-weight:1000;padding:25px;text-align:center}
.article-content :not(pre)>code{background:#dfff00;padding:3px 7px;border:1px solid #111;font-size:.85em}
.article-content pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#111;color:#fff;padding:22px;margin:25px 0 40px;line-height:1.7;font-size:14px}
.article-content hr{border:0;border-top:5px dashed #111;margin:55px 0}
@media (max-width:600px){.article-content li{padding-left:50px}
.article-content ul>li:before{left:16px}
.article-content ol>li:before{left:10px;font-size:17px}
.article-content th,.article-content td{padding:10px 7px}}
.article-toc ol[hidden]{display:none!important}