:root{color-scheme:light;--p:#134A47;--s:#E4DAC6;--a:#F0A024;--t:#1F2A29;--b:#FBF7EF;--m:#55615F;--rule:18px;--head:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--rule) + var(--head) + 16px)}
body{margin:0;background:var(--b);color:var(--t);font:400 17px/1.95 "Noto Sans JP",sans-serif}
img{max-width:100%;display:block}
h1,h2,h3,.lead,.ask p{word-break:auto-phrase;text-wrap:pretty}
h1,h2,h3{font-family:"Zen Maru Gothic",sans-serif;font-weight:900;line-height:1.4;margin:0}
h2{color:var(--p);font-size:clamp(28px,4.4vw,44px)}
h3{color:var(--p);font-size:21px;font-weight:700}
p{margin:0}
a:focus-visible{outline:3px solid var(--a);outline-offset:3px;border-radius:6px}
.w{max-width:1120px;margin:auto;padding:0 40px}
.skip{position:absolute;left:-999px;background:#fff;padding:8px 14px;z-index:20}.skip:focus{left:12px;top:24px}

/* ものさし */
.ruler{position:fixed;inset:0 0 auto;height:var(--rule);background:var(--b);border-bottom:2px solid var(--p);z-index:12;
 background-image:repeating-linear-gradient(90deg,var(--p) 0 2px,transparent 2px 10vw),repeating-linear-gradient(90deg,var(--p) 0 1px,transparent 1px 2vw);
 background-size:100% 11px,100% 6px;background-repeat:no-repeat}
.ruler i{position:absolute;top:-1px;left:0;width:8px;height:24px;background:var(--a);border-radius:4px;transform:translateX(calc(var(--pos,.7)*(100vw - 8px)))}

header{position:sticky;top:var(--rule);z-index:10;background:var(--b);height:var(--head);border-bottom:1px solid var(--s)}
header .w{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
header img{height:46px;width:auto}
.btn{display:inline-block;background:var(--a);color:var(--t);font-weight:700;border-radius:999px;padding:9px 24px;text-decoration:none;line-height:1.5;transition:transform .18s ease,box-shadow .18s ease;font-family:"Zen Maru Gothic",sans-serif}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(19,74,71,.22)}
.btn.big{font-size:20px;padding:15px 38px}

/* 最初の画面 */
.hero{background:var(--p);color:var(--b);padding:clamp(56px,9vw,112px) 0}
.hero .w{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{font-size:min(4.6vw,56px);color:var(--b)}
.nb{display:inline-block}
.hero p{margin:28px 0 32px;font-size:clamp(17px,2vw,20px);max-width:32em}

section{padding:clamp(64px,9vw,120px) 0}
.lead{margin-top:18px;max-width:42em}

/* 困りごと */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px}
.card{background:#fff;border:1px solid var(--s);border-radius:18px;padding:22px 24px 26px}
.card img{margin:0 auto 12px;width:100%;max-width:280px}
.card p{margin-top:6px;font-size:16px}

/* すること */
.doing{background:var(--s)}
.doing .w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.doing p{font-size:18px}

/* 進め方 */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:52px 0 0;padding:0}
.steps li{position:relative;padding:34px 24px 0 0}
.steps li::before{content:"";position:absolute;top:8px;left:0;width:16px;height:16px;border-radius:50%;background:var(--p);z-index:1}
.steps li:last-child::before{background:var(--a)}
.steps li::after{content:"";position:absolute;top:15px;left:16px;right:0;border-top:3px dashed var(--p);transform-origin:left;transition:transform .8s ease}
.steps li:last-child::after{display:none}
.js .steps li:not(.on)::after{transform:scaleX(0)}
.steps p{font-size:16px;margin-top:6px}

/* 作り手 */
.maker{border-top:1px dashed #b9ad95}
.maker .w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:center}
.maker p{margin-top:16px}
.who{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;color:var(--p);margin-top:18px}

/* 相談 */
.ask{background:var(--s);text-align:center}
.ask p{margin:18px auto 30px;max-width:30em}
footer{padding:28px 0;font-size:14px;color:var(--m)}

@media (max-width:760px){
 body{font-size:16px}
 .w{padding:0 16px}
 :root{--head:56px}
 header img{height:38px}
 .btn{padding:7px 18px}
 .btn.big{font-size:18px;padding:13px 28px}
 .hero h1{font-size:8.4vw}
 .hero .w,.doing .w,.maker .w{grid-template-columns:1fr;gap:28px}
 .hero img{max-width:240px;margin:auto}
 .cards{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr}
 .steps li{padding:0 0 30px 36px}
 .steps li::before{top:6px}
 .steps li::after{top:22px;left:6.5px;right:auto;bottom:-6px;border-top:0;border-left:3px dashed var(--p);transform-origin:top}
 .js .steps li:not(.on)::after{transform:scaleY(0)}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .btn,.steps li::after{transition:none}
 .btn:hover{transform:none}
 .js .steps li:not(.on)::after{transform:none}
}

/* 作ったアプリ */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px}
.app{background:#fff;border:1px solid var(--s);border-radius:18px;padding:24px}
.app img,.tile{width:64px;height:64px;border-radius:15px;margin-bottom:14px}
.tile{display:flex;align-items:center;justify-content:center;background:var(--p);color:var(--b);font:900 20px "Zen Maru Gothic",sans-serif}
.app p{font-size:16px;margin-top:6px}
.app .go{margin-top:12px}
.app a{color:var(--p);font-weight:500;margin-right:14px}
.note{font-size:14px;color:var(--m)}
/* やらないこと */
.not{background:var(--p);color:var(--b)}
.not h2{color:var(--b)}
.not ul{list-style:none;margin:32px 0 0;padding:0;max-width:46em}
.not li{padding:18px 0;border-top:2px dashed rgba(251,247,239,.45);font-size:clamp(17px,2vw,20px)}
/* 運営者 */
footer{padding:44px 0;font-size:15px;color:var(--t);border-top:1px solid var(--s)}
footer h2{font-size:18px;font-weight:700}
footer p{margin-top:6px}
footer a{color:var(--p);margin-right:18px;display:inline-block}
/* 法的なページ */
.doc{padding:clamp(44px,7vw,80px) 0}
.doc h1{color:var(--p);font-size:clamp(26px,4vw,38px);margin-bottom:28px;word-break:auto-phrase}
.doc h2{font-size:20px;font-weight:700;margin-top:30px}
.doc .w{max-width:860px}
.doc table{border-collapse:collapse;width:100%}
.doc th,.doc td{text-align:left;vertical-align:top;padding:13px 10px;border-bottom:1px solid var(--s);font-size:16px}
.doc th{width:12em;color:var(--p);font-family:"Zen Maru Gothic",sans-serif;font-weight:700}
.doc p{margin-top:8px}
.doc ul{margin:8px 0 0;padding-left:1.3em}
.doc a{color:var(--p)}
@media (max-width:760px){.apps{grid-template-columns:1fr}.doc th,.doc td{display:block;width:auto;border:0;padding:3px 0}.doc td{padding-bottom:14px;border-bottom:1px solid var(--s)}}