:root{color-scheme:light;--ink:#163431;--muted:#586d69;--green:#007f7b;--paper:#fafbf8;--line:#dce5df}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;line-height:1.85;letter-spacing:.02em}a{color:var(--green);text-underline-offset:5px}a:hover{text-decoration-thickness:2px}a:focus-visible{outline:3px solid #bd8e28;outline-offset:5px}img{max-width:100%;height:auto}.header,main,footer{width:min(1120px,calc(100% - 64px));margin:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:750;text-decoration:none;white-space:nowrap}.brand img{border-radius:10px}nav{display:flex;gap:26px;flex-wrap:wrap}nav a{font-size:13px;text-decoration:none;color:var(--muted)}.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;padding:96px 0 110px}.eyebrow{font-size:12px;color:var(--green);font-weight:700;letter-spacing:.13em}h1,h2,h3{line-height:1.45;letter-spacing:.025em}h1{font-size:clamp(36px,5vw,60px);margin:24px 0}h2{font-size:28px}h3{font-size:20px}.lead{font-size:18px;color:var(--muted)}.badge{display:inline-block;background:#e5efeb;padding:6px 13px;border-radius:6px;font-size:12px;margin:12px 0}.actions{display:flex;align-items:center;gap:24px;margin-top:28px;font-size:14px}.button{display:inline-flex;gap:24px;background:var(--green);color:white;padding:13px 22px;border-radius:10px;text-decoration:none;font-weight:650}.hero-art{padding:36px 24px 12px;text-align:center;background:#e6f0e9;border-radius:44% 44% 24px 24px}.hero-art img{width:280px;border-radius:23%;box-shadow:0 22px 45px #006b6230;transform:rotate(-5deg)}.hero-art p{font-weight:650;margin-top:32px}#features{padding:0 0 72px;border-top:1px solid var(--line)}#features>.eyebrow{margin-top:34px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}.cards article{padding:28px;background:white;border:1px solid var(--line);border-radius:18px}.number{font-size:11px;color:var(--green);font-weight:700;letter-spacing:.12em}.cards p,.privacy-note p{font-size:14px;color:var(--muted)}.privacy-note{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;background:#eef3ec;padding:44px;border-radius:20px;margin:0 0 80px}.requirements{border-left:1px solid #cbdad1;padding-left:32px}.requirements h3{font-size:16px}footer{border-top:1px solid var(--line);padding:34px 0 40px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}footer nav{flex:1}footer small{font-size:11px;color:var(--muted)}.document{max-width:760px;padding:56px 0 80px;min-height:65vh}.document h1{font-size:clamp(28px,4vw,38px)}.document h2{font-size:21px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}.document h3{font-size:17px;margin-top:28px}.document p,.document li{font-size:15px}.document .meta{color:var(--muted);font-size:13px}.document a{overflow-wrap:anywhere}.contact{background:#e7f1eb;border-radius:16px;padding:24px;margin:32px 0}.contact span,.contact small{color:var(--muted);font-size:12px}.contact p{font-size:19px;font-weight:650;margin:8px 0}@media(max-width:700px){.header,main,footer{width:calc(100% - 40px)}.header{padding:18px 0;flex-wrap:wrap;gap:12px}.header nav{gap:20px}.hero{grid-template-columns:1fr;gap:36px;padding:42px 0 56px}.hero-art{width:100%;max-width:360px;justify-self:center}.hero-art img{width:200px}.hero-art p{margin-top:24px}.lead{font-size:16px}.cards{grid-template-columns:1fr;gap:14px}.cards article{padding:24px}.cards h3{margin:10px 0}.cards p{margin-bottom:0}h2{font-size:23px}.privacy-note{grid-template-columns:1fr;gap:20px;padding:26px;margin-bottom:46px}.requirements{border-left:0;border-top:1px solid #cbdad1;padding:12px 0 0}footer{display:block}footer nav{margin:20px 0;gap:14px}.document{padding-top:30px}.actions{gap:18px}.button{padding:12px 16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 実際の描画・アプリ画面を中心にした紹介 */
.hero{grid-template-columns:1fr 1.1fr;gap:44px;padding:66px 0 82px}.hero h1{font-size:clamp(34px,3.7vw,48px);letter-spacing:-.015em}.product-stage{position:relative;min-height:460px;padding:0 0 84px}.product-stage figure{margin:0;border:1px solid #d2ddd7;overflow:hidden;box-shadow:0 18px 44px #16343112;background:white}.product-stage figcaption{padding:12px 18px;font-size:12px;font-weight:650;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}.view-tag{background:#e1f1eb;color:var(--green);padding:1px 10px;border-radius:20px;font-size:11px}.scene-card{border-radius:20px;width:92%}.scene-card img{display:block;width:100%;height:300px;object-fit:cover}.plan-card{position:absolute;right:0;bottom:26px;width:54%;border-radius:16px;transform:rotate(3deg)}.plan-card img{display:block;width:100%;height:194px;object-fit:cover}.sample-caption{font-size:11px;color:var(--muted);margin:18px 0 0;line-height:1.7}.product-stage>.sample-caption{position:absolute;bottom:0;left:0}.screens-section{padding:36px 0 70px;border-top:1px solid var(--line)}.section-intro{color:var(--muted);font-size:15px}.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:32px}.screen-heading h3{margin:10px 0}.screen-heading p{font-size:13px;color:var(--muted);margin-bottom:22px}.phone-frame{border:5px solid #233c39;border-radius:32px;overflow:hidden;background:#f2f2f7;box-shadow:0 16px 30px #16343112;max-width:310px;margin:auto}.phone-frame img{display:block;width:100%;height:auto}.screens-section>.sample-caption{text-align:center;margin-top:28px}@media(max-width:700px){.hero{grid-template-columns:1fr;gap:28px;padding:30px 0 50px}.hero h1{font-size:34px}.product-stage{min-height:340px;padding-bottom:90px}.scene-card img{height:220px}.plan-card img{height:135px}.product-stage figcaption{padding:9px 12px;font-size:11px}.screen-grid{grid-template-columns:1fr;gap:44px}.screen-heading{text-align:center}.phone-frame{max-width:290px}.screens-section{padding-top:24px}.screen-heading p{margin-bottom:18px}}@media(min-width:701px) and (max-width:1000px){.screen-grid{gap:18px}.screen-heading p{min-height:48px}.hero h1{font-size:36px}.product-stage{min-height:390px}.scene-card img{height:260px}}
@media(max-width:700px){.hero h1{font-size:clamp(25px,7.2vw,32px)}.hero .lead{font-size:15px}.hero .actions{margin-top:18px}}
.drawing-section{padding:34px 0 58px;border-top:1px solid var(--line)}.drawing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.drawing-grid figure{margin:0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}.drawing-grid figcaption{padding:24px 24px 0}.drawing-grid h3{margin:12px 0 6px}.drawing-grid p{font-size:14px;color:var(--muted);margin:0}.drawing-grid img{display:block;width:100%;height:auto}@media(max-width:700px){.drawing-grid{grid-template-columns:1fr;gap:20px}.drawing-grid figcaption{padding:20px 20px 0}.drawing-section{padding-top:24px}.drawing-section .section-intro br{display:none}}

/* コピーの1行目が途中で折れないよう、文字サイズを本文カラム幅に合わせる。 */
.hero>div:first-child{container-type:inline-size;min-width:0}
.hero .hero-title{font-size:clamp(20px,8cqi,48px)}
.hero-title>span{display:block;white-space:nowrap}

/* 上部のダウンロード導線は、狭い画面で行を分ける。 */
.hero .actions{flex-wrap:wrap}
/* 公式バッジは高さ48px。actionsの間隔18px以上で必要な余白12pxを確保。 */
.app-store-badge{display:inline-flex;flex-shrink:0}
.app-store-badge img{display:block;width:auto;height:48px}
footer .trademark{flex-basis:100%;display:block}

/* 短い紹介動画を、操作して再生できるプレイヤーで表示。 */
.videos-section{padding:34px 0 66px;border-top:1px solid var(--line)}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:32px;max-width:900px;margin-inline:auto}
.video-grid article{min-width:0;padding:28px;background:#fff;border:1px solid var(--line);border-radius:20px}
.video-heading h3{font-size:20px;margin:10px 0}
.video-heading p{font-size:14px;color:var(--muted);margin:0 0 24px}
.video-grid video{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:9/16;margin:auto;background:#163431;border-radius:14px;overflow:hidden}
.videos-section>.sample-caption{text-align:center;margin-top:24px}
@media(max-width:700px){.videos-section{padding-top:24px;padding-bottom:44px}.video-grid{grid-template-columns:1fr;gap:24px;margin-top:24px}.video-grid article{padding:24px}.video-grid video{max-width:280px}.video-heading h3{font-size:19px}}