/* DrawAlive 公式サイト
   配置の考え：アプリの作業台そのもの。生成りの紙に、紫と珊瑚のにじみ（アプリの題の下線）。
   主役は絵。文字は脇で支える。 */
:root{
  --paper:#efebe3;
  --paper-2:#f7f4ee;
  --sheet:#fffdf9;
  --ink:#34312b;
  --sub:#6b685f;
  --line:#dcd4c6;
  --accent:#6a5ae0;
  --accent-ink:#ffffff;
  --accent-soft:#e8e4fb;
  --coral:#d8653a;
  --good:#2b8a5e;
  --shadow:0 1px 2px rgba(60,48,30,.08), 0 18px 48px rgba(60,48,30,.14);
  --f-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
  --measure:38rem;
  --radius:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1d1b22; --paper-2:#24212b; --sheet:#2b2832; --ink:#efeae1; --sub:#aca69b; --line:#423d4b;
    --accent:#a596ff; --accent-ink:#17151c; --accent-soft:#322b55; --coral:#f08a5e; --good:#5cc495;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
*{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-family:var(--f-body); font-size:17px; line-height:1.85;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--f-display); line-height:1.3; margin:0; text-wrap:balance; font-weight:700; word-break:auto-phrase}
.nb{white-space:nowrap}
p{margin:0}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute; left:-999px; top:8px; background:var(--sheet); padding:8px 14px; border-radius:8px; z-index:20}
.skip:focus{left:8px}

/* ---- 上の帯 ---- */
.top{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent; transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; gap:20px; min-height:64px}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--f-display); font-weight:900; font-size:1.2rem; letter-spacing:.01em}
.mark img{width:38px; height:38px}
.top nav{margin-left:auto; display:flex; gap:22px; align-items:center; font-size:.92rem}
.top nav a{color:var(--ink); text-decoration:none}
.top nav a:hover{color:var(--accent)}
.lang{border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:.82rem}
@media (max-width:820px){ .top nav .navlink{display:none} }

/* ---- 表紙 ---- */
.hero{position:relative; padding-block:clamp(28px,6vw,72px) clamp(40px,7vw,96px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,5vw,64px); align-items:center}
.steam-chip{display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:999px; background:var(--sheet);
  border:1px solid var(--line); font-size:.88rem; font-weight:700}
.steam-chip b{background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:2px 10px; font-size:.78rem; letter-spacing:.04em}
.hero h1{font-size:clamp(2.2rem,5.4vw,4rem); font-weight:900; margin-top:22px; letter-spacing:-.005em}
.ink-line{background-image:linear-gradient(90deg,var(--accent),var(--coral)); background-size:100% .14em; background-repeat:no-repeat;
  background-position:0 92%; padding-bottom:.08em}
.hero .lead{margin-top:22px; font-size:clamp(1rem,1.6vw,1.12rem); color:var(--sub); max-width:var(--measure)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:700; text-decoration:none; font-size:.98rem;
  border:1.5px solid var(--accent); transition:transform .15s ease, background .15s ease}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.ghost{color:var(--accent); background:transparent}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){ .btn{transition:none} .btn:hover{transform:none} }

.stage{position:relative; aspect-ratio:4/5; max-width:480px; width:100%; justify-self:center; touch-action:pan-y}
.stage::before{content:""; position:absolute; inset:6% 4% 0; border-radius:48% 48% 22px 22px / 40% 40% 22px 22px;
  background:radial-gradient(120% 90% at 50% 20%, var(--sheet), var(--paper-2)); box-shadow:var(--shadow)}
.avatar{position:absolute; inset:0; background-repeat:no-repeat; background-size:700% 600%}
.avatar.first{background-size:contain; background-position:center}
.stage-note{position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); white-space:nowrap; font-size:.8rem; color:var(--sub)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  /* スマホでは小さめにして、見出しまで一画面に入れる。下の一言のぶん、下に余白を取る */
  .stage{max-width:min(260px, 62vw); order:-1; margin-bottom:34px}
  .stage-note{bottom:-30px; white-space:normal; width:max-content; max-width:88vw; text-align:center}
}

/* ---- 節 ---- */
section{padding-block:clamp(56px,8vw,104px)}
.alt{background:var(--paper-2)}
.eyebrow{font-family:var(--f-display); font-weight:700; color:var(--coral); letter-spacing:.14em; font-size:.82rem}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem); margin-top:8px}
.intro{color:var(--sub); margin-top:16px; max-width:var(--measure)}

/* 三つのこと */
.three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,28px); margin-top:40px}
.three article{display:grid; gap:12px; align-content:start}
.three h3{font-size:1.5rem}
.three h3 span{display:block; font-size:.8rem; color:var(--coral); letter-spacing:.14em; margin-bottom:2px}
.three p{color:var(--sub); font-size:.98rem}
.shot{border-radius:var(--radius); box-shadow:var(--shadow); background:var(--sheet); overflow:hidden}
.shot img{width:100%}
@media (max-width:820px){ .three{grid-template-columns:minmax(0,1fr)} }

/* 四歩：本当に順番がある */
.steps{list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,3vw,28px); counter-reset:s}
.steps li{counter-increment:s; border-top:2px solid var(--line); padding-top:16px; display:grid; gap:8px; align-content:start}
.steps li::before{content:counter(s); font-family:var(--f-display); font-weight:900; font-size:2.4rem; line-height:1; color:var(--accent)}
.steps b{font-family:var(--f-display); font-size:1.12rem}
.steps span{color:var(--sub); font-size:.95rem}
@media (max-width:820px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* 機能の紹介（絵と文が交互） */
.feature{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,5vw,64px); align-items:center}
.feature + .feature{margin-top:clamp(56px,8vw,96px)}
.feature.flip > .media{order:2}
.feature h3{font-size:clamp(1.45rem,2.8vw,2rem)}
.feature .text{display:grid; gap:16px; min-width:0}
.feature .text > p{color:var(--sub)}
.ticks{list-style:none; padding:0; margin:4px 0 0; display:grid; gap:8px}
.ticks li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; font-size:.97rem}
.ticks li::before{content:""; width:.55em; height:.55em; border-radius:50%; background:var(--accent); margin-top:.62em}
.media figcaption{font-size:.84rem; color:var(--sub); margin-top:10px}
.media figure{margin:0}
.media .tall{max-width:420px; margin-inline:auto}
@media (max-width:860px){ .feature{grid-template-columns:minmax(0,1fr)} .feature.flip > .media{order:0} }

/* PSD の札の推し当て（本物の対応の一部） */
.map{margin-top:8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--sheet); overflow:hidden}
.map div{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; padding:10px 16px; border-top:1px solid var(--line); font-size:.95rem; align-items:center}
.map div:first-child{border-top:0; font-size:.78rem; color:var(--sub); letter-spacing:.1em}
.map code{font-family:inherit; background:var(--accent-soft); padding:1px 8px; border-radius:6px}
.map .arrow{color:var(--coral)}

/* 安心 */
.privacy{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,5vw,64px); align-items:start; margin-top:36px}
.privacy blockquote{margin:0; font-family:var(--f-display); font-weight:700; font-size:clamp(1.25rem,2.4vw,1.65rem); line-height:1.7;
  border-left:4px solid var(--coral); padding-left:20px}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.checks li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px}
.checks li::before{content:"✓"; color:var(--good); font-weight:900}
@media (max-width:860px){ .privacy{grid-template-columns:minmax(0,1fr)} }

/* すべての機能 */
.all{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 40px; margin-top:40px}
.all section{padding:0}
.all h3{font-size:1.12rem; padding-bottom:8px; border-bottom:2px solid var(--line)}
.all ul{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:6px; font-size:.93rem}
.all li{color:var(--sub)}
.all li b{color:var(--ink); font-weight:700}
@media (max-width:900px){ .all{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .all{grid-template-columns:minmax(0,1fr)} }

/* Steam のお知らせ */
.launch{text-align:left}
.launch .card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:center;
  background:var(--sheet); border:1px solid var(--line); border-radius:24px; padding:clamp(24px,5vw,56px); box-shadow:var(--shadow)}
.launch img{width:clamp(120px,18vw,200px)}
.launch .when{font-family:var(--f-display); font-weight:900; font-size:clamp(2rem,5vw,3.4rem); line-height:1.2; margin-top:6px}
.launch p{color:var(--sub); margin-top:14px; max-width:var(--measure)}
@media (max-width:640px){ .launch .card{grid-template-columns:minmax(0,1fr)} .launch img{width:120px} }

/* よくある質問 */
.faq{margin-top:32px; display:grid; gap:10px; max-width:820px}
.faq details{background:var(--sheet); border:1px solid var(--line); border-radius:12px; padding:4px 20px}
.faq summary{cursor:pointer; font-weight:700; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; color:var(--accent); font-weight:900}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 16px; color:var(--sub)}

/* 足 */
footer{border-top:1px solid var(--line); padding-block:36px 48px; font-size:.86rem; color:var(--sub)}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center}
footer .fine{flex-basis:100%; font-size:.78rem}

/* 現れる時の動き（静止した姿でも読める。動きは足すだけ） */
@media (prefers-reduced-motion: no-preference){
  .rise{transition:opacity .6s ease, transform .6s ease}
  .js .rise:not(.seen){opacity:.001; transform:translateY(18px)}
}