/* モノクロの地に、アプリごとの差し色1つ。上部の切替で3ページを行き来する */
:root{
  --bg:#FFFFFF; --fg:#0B0B0C; --sub:#6E6E73; --line:#E5E5EA; --soft:#F4F4F6;
  --accent:#0B0B0C; --on-accent:#FFFFFF;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",sans-serif;
  --f-num:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --fg:#F2F2F7; --sub:#8E8E93; --line:#2C2C2E; --soft:#121214; --on-accent:#000000; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#000000; --fg:#F2F2F7; --sub:#8E8E93; --line:#2C2C2E; --soft:#121214; --on-accent:#000000; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);-webkit-font-smoothing:antialiased;font-feature-settings:"palt";font-size:16px;line-height:1.75;margin:0}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* 切替バー */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.switch{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.switch .wrap{display:flex;align-items:center;gap:8px;padding-block:10px;overflow-x:auto}
.switch .label{font-family:var(--f-num);font-size:12px;color:var(--sub);letter-spacing:.08em;margin-right:6px;white-space:nowrap}
.switch a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:6px 14px 6px 6px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;border:1px solid transparent}
.switch a img{width:28px;height:28px;border-radius:7px;display:block}
.switch a:hover{background:var(--soft)}
.switch a[aria-current="page"]{border-color:var(--fg)}
.switch a:focus-visible,.btn:focus-visible,.peer:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* 冒頭 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding-block:56px 40px}
.hero .icon{width:88px;height:88px;border-radius:20px;box-shadow:0 0 0 1px var(--line);display:block}
.hero h1{font-size:clamp(40px,7vw,64px);line-height:1.05;margin:20px 0 4px;letter-spacing:-.025em;text-wrap:balance}
.hero .store{color:var(--sub);font-size:14px;margin:0 0 20px}
.hero .lead{font-size:clamp(20px,2.6vw,26px);font-weight:700;line-height:1.5;margin:0 0 24px;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--f-num);font-size:13px;color:var(--sub);margin-bottom:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:52px;padding:0 26px;border-radius:26px;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:700}
.btn:hover{opacity:.88}

/* 画面 */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-block:8px 56px}
.shots img{width:100%;border-radius:18px;display:block;box-shadow:0 0 0 1px var(--line)}

section.block{padding-block:48px;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--f-num);font-size:12px;letter-spacing:.1em;color:var(--sub);margin:0 0 8px}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.3;margin:0 0 28px;text-wrap:balance}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 32px;margin:0;padding:0;list-style:none}
.feats li{min-width:0}
.feats b{display:block;font-size:17px;margin-bottom:4px}
.feats span{color:var(--sub);font-size:14px}
.feats .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px}

/* つながり */
.peers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.peer{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:20px;background:var(--soft);text-decoration:none;min-width:0}
.peer:hover{outline:1px solid var(--fg)}
.peer .head{display:flex;align-items:center;gap:12px}
.peer .head img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px var(--line)}
.peer .head b{font-size:20px}
.peer .head small{display:block;color:var(--sub);font-size:13px;font-weight:400}
.flow{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;font-size:14px}
.flow li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline}
.flow .dir{font-family:var(--f-num);font-size:12px;color:var(--sub);white-space:nowrap}
.peer .go{margin-top:auto;font-weight:700;font-size:14px}

.shared{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px;font-size:14px;color:var(--sub)}
.shared b{color:var(--fg)}

footer{padding-block:32px 48px;border-top:1px solid var(--line);color:var(--sub);font-size:13px}

@media (max-width:720px){
  .hero{grid-template-columns:minmax(0,1fr);padding-block:36px 28px;gap:24px}
  .hero .art{display:none}
  .shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .shots img{border-radius:10px}
  .peers{grid-template-columns:minmax(0,1fr)}
  .switch .label{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero .art{animation:rise .6s ease-out both}
  @keyframes rise{from{transform:translateY(8px)}to{transform:none}}
}


.page[data-app="task"]{--accent:#F4421E}
.tl{width:300px;max-width:100%;padding:20px;border-radius:24px;background:var(--soft);font-size:14px}
.tl .d{font-family:var(--f-num);font-size:12px;color:var(--sub);margin:10px 0 6px}
.tl .row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0}
.tl .ck{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--fg)}
.tl .ck.done{background:var(--fg)}
.tl .row.done span{text-decoration:line-through;color:var(--sub)}
.tl .tag{width:8px;height:8px;border-radius:50%}
/* 開いた時、日付と行が上から1つずつ順に出る。済みの行は出た後にチェックが入る */
@media (prefers-reduced-motion:no-preference){
.tl>*{animation:tlIn .45s cubic-bezier(.2,.7,.2,1) both}
.tl>:nth-child(1){animation-delay:.15s}.tl>:nth-child(2){animation-delay:.35s}.tl>:nth-child(3){animation-delay:.55s}
.tl>:nth-child(4){animation-delay:.75s}.tl>:nth-child(5){animation-delay:.95s}.tl>:nth-child(6){animation-delay:1.15s}
.tl .ck.done{animation:tlCheck .3s ease-out 1.5s both}
.tl .row.done span{animation:tlStrike .3s ease-out 1.6s both}
@keyframes tlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tlCheck{from{background:transparent;transform:scale(.7)}to{background:var(--fg);transform:none}}
@keyframes tlStrike{from{text-decoration-color:transparent;color:var(--fg)}to{text-decoration-color:currentColor;color:var(--sub)}}
/* the route：見出し→合計→経路を上から1つずつ */
.sum>.cap,.sum>.big,.sum li{animation:tlIn .45s cubic-bezier(.2,.7,.2,1) both}
.sum>.cap{animation-delay:.15s}.sum>.big{animation-delay:.3s}
.sum li:nth-child(1){animation-delay:.55s}.sum li:nth-child(2){animation-delay:.75s}
.sum li:nth-child(3){animation-delay:.95s}.sum li:nth-child(4){animation-delay:1.15s}
/* oshi：日付と予定を上から1つずつ、最後に推し色が1色ずつ */
.cal>*{animation:tlIn .45s cubic-bezier(.2,.7,.2,1) both}
.cal>:nth-child(1){animation-delay:.15s}.cal>:nth-child(2){animation-delay:.35s}.cal>:nth-child(3){animation-delay:.55s}
.cal>:nth-child(4){animation-delay:.75s}.cal>:nth-child(5){animation-delay:.95s}.cal>:nth-child(6){animation-delay:1.15s}
.cal>.swatches{animation:none}
.swatches i{animation:swPop .35s cubic-bezier(.3,1.8,.5,1) both}
.swatches i:nth-child(1){animation-delay:1.30s}.swatches i:nth-child(2){animation-delay:1.36s}.swatches i:nth-child(3){animation-delay:1.42s}.swatches i:nth-child(4){animation-delay:1.48s}.swatches i:nth-child(5){animation-delay:1.54s}.swatches i:nth-child(6){animation-delay:1.60s}.swatches i:nth-child(7){animation-delay:1.66s}.swatches i:nth-child(8){animation-delay:1.72s}.swatches i:nth-child(9){animation-delay:1.78s}.swatches i:nth-child(10){animation-delay:1.84s}.swatches i:nth-child(11){animation-delay:1.90s}
@keyframes swPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
}

.page[data-app="route"]{--accent:#1A73E8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page[data-app="route"]{--accent:#8AB4F8}}
:root[data-theme="dark"] .page[data-app="route"]{--accent:#8AB4F8}
.sum{width:300px;max-width:100%;padding:24px;border-radius:24px;background:var(--soft)}
.sum .cap{font-size:12px;color:var(--sub)}
.sum .big{font-family:var(--f-num);font-weight:700;font-variant-numeric:tabular-nums;font-size:56px;line-height:1;letter-spacing:-.02em}
.sum .big small{font-family:var(--f-body);font-size:18px;font-weight:700;margin-left:4px}
.sum ol{list-style:none;margin:18px 0 0;padding:0;font-size:14px}
.sum li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.sum li:first-child{border-top:0}
.sum .n{font-family:var(--f-num);font-weight:600}
.sum .leg{display:block;font-family:var(--f-num);font-size:12px;color:var(--sub)}
.sum .here{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}

.page[data-app="oshi"]{--accent:#F0C419}
.cal{width:300px;max-width:100%;padding:22px;border-radius:24px;background:var(--soft);font-size:14px}
.cal h3{font-size:22px;margin:0 0 8px}
.cal h3:not(:first-child){margin-top:14px}
.cal .ev{display:grid;grid-template-columns:44px 10px minmax(0,1fr);gap:10px;align-items:center;padding:6px 0}
.cal .t{font-family:var(--f-num);font-size:13px}
.cal .c{width:10px;height:10px;border-radius:50%}
.cal .ok{font-size:11px;color:var(--sub);margin-left:4px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.swatches i{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{padding:22px;border-radius:20px;border:1px solid var(--line);min-width:0}
.plan .nm{font-weight:700}
.plan .pr{font-family:var(--f-num);font-weight:600;font-size:28px;margin:6px 0 2px}
.plan .pr small{font-family:var(--f-body);font-size:13px;font-weight:400;color:var(--sub)}
.plan .cnt{color:var(--sub);font-size:14px}
.note{color:var(--sub);font-size:13px;margin-top:14px}
@media (max-width:720px){.plans{grid-template-columns:minmax(0,1fr)}}
/* 読み進めた量を、そのアプリの差し色で上部に */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.page[data-app="task"] .progress{background:var(--fg)}
/* --p（0〜1）はスクロール位置そのもの。戻せば同じ道を逆にたどる。JS無しなら .pre が付かず全部見える */
.pre{--p:0;--q:0;opacity:var(--p);transform:translateY(calc((1 - var(--p)) * 40px));transition:opacity .12s linear,transform .12s linear,clip-path .12s linear;will-change:transform,opacity}
.shots img.pre{transform:translateY(calc((1 - var(--p)) * 90px)) rotate(calc((1 - var(--p)) * var(--tilt,0deg))) scale(calc(.92 + .08 * var(--p)))}
.feats li.pre .dot{transform:scale(var(--q))}
.peer.pre.from-l{transform:translateX(calc((1 - var(--p)) * -56px))}
.peer.pre.from-r{transform:translateX(calc((1 - var(--p)) * 56px))}
.flow li.pre{transform:translateX(calc((1 - var(--p)) * -16px))}
.plan.pre{transform:translateY(calc((1 - var(--p)) * 44px)) scale(calc(.95 + .05 * var(--p)))}
/* 左右から入るカードで横にはみ出さないように */
main{overflow-x:clip}
/* 見出しはタイピング風：1文字ずつ打たれ、打った位置にカーソルが点滅 */
h2.pre{opacity:1;transform:none;transition:none}
h2 .ch{visibility:hidden;position:relative}
h2 .ch.on{visibility:visible}
h2 .ch.cur::after,h2.pre.empty .ch:first-child::before{content:"";position:absolute;top:.12em;bottom:.08em;width:.09em;background:var(--accent);visibility:visible;animation:blink 1s steps(1) infinite}
h2 .ch.cur::after{right:-.12em}
h2.pre.empty .ch:first-child::before{left:0}
.page[data-app="task"] h2 .ch.cur::after,.page[data-app="task"] h2.pre.empty .ch:first-child::before{background:var(--fg)}
@keyframes blink{50%{opacity:0}}
.peer .go{display:inline-block;transition:transform .3s}
.peer:hover .go{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){.pre{opacity:1!important;transform:none!important;clip-path:none!important}}