/* トップページだけのスタイル（body.top の中だけに効かせる）。共通の style.css は変えない */
body.top {
  --dim: #B5ACA3;
  --hair: rgba(26, 22, 19, .08);
  --tint: #FFF1E8;
  --done: #2E9E6B;
  --done-t: #E6F4EC;
  --warn: #C99A1E;
  --warn-t: #FBF3DD;
  --seg: #EAE4DA;
  --shadow: 0 4px 12px rgba(26, 22, 19, .06);
  --float: 0 8px 20px rgba(26, 22, 19, .12);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --soft: cubic-bezier(.22, 1, .36, 1);
  overflow-x: hidden;
}
html:has(body.top) { overflow-x: clip; }
:where(body.top) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.top svg { overflow: visible; }
body.top .site-header .wrap, body.top .site-footer .wrap { max-width: 1080px; }
@media (min-width: 600px) { body.top .site-header .wrap, body.top .site-footer .wrap { padding: 0 24px; } }

.num, .roll { font-family: Inter, "Noto Sans JP", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ink { color: var(--ink); }

.tw { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .tw { padding: 0 24px; } }
.t-main { padding: 8px 0 0; }

/* ---------- 登場（スクロールで一度だけ） ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--soft), transform .7s var(--spring); transition-delay: calc(var(--i, 0) * 80ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- 見出し・本文 ---------- */
.t-eyebrow { font-size: 13px; font-weight: 700; color: var(--link); letter-spacing: .04em; margin: 0 0 10px; }
.t-h1 { font-size: clamp(30px, 8.4vw, 50px); line-height: 1.32; letter-spacing: -.005em; margin: 0 0 18px; font-weight: 700; }
.t-h2 { font-size: clamp(26px, 6.6vw, 38px); line-height: 1.38; margin: 0 0 16px; font-weight: 700; letter-spacing: 0; }
.t-lead { font-size: 17px; color: var(--sub); margin: 0 0 28px; max-width: 30em; }
.t-p { color: var(--sub); margin: 0 0 18px; max-width: 30em; }
.sp { display: inline; }
@media (min-width: 860px) { .sp { display: none; } }

.t-badge { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 14px; background: var(--ink); color: #fff; }
.t-badge svg { width: 24px; height: 24px; }
.t-badge span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 16px; }
.t-badge small { font-size: 11px; font-weight: 500; opacity: .75; letter-spacing: .02em; }
.t-store { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.t-note { font-size: 13px; color: var(--sub); }

/* ---------- 1. ファーストビュー ---------- */
.t-hero { display: grid; gap: 40px; padding-top: 24px; padding-bottom: 72px; align-items: center; }
@media (min-width: 860px) { .t-hero { grid-template-columns: 1fr 360px; gap: 56px; padding-top: 48px; padding-bottom: 112px; } }
.t-hero-phone { display: flex; justify-content: center; }

/* iPhone の枠 */
.phone { width: 340px; max-width: 100%; border-radius: 50px; background: var(--ink); padding: 10px; box-shadow: 0 30px 60px -28px rgba(26, 22, 19, .45); }
.screen { position: relative; height: 660px; border-radius: 40px; background: var(--paper); overflow: hidden; padding: 0 16px; font-size: 13px; line-height: 1.45; letter-spacing: 0; }
@media (max-width: 380px) { .screen { height: 620px; padding: 0 12px; } }
.sb { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 12px; font-size: 14px; }
.sb-r { display: flex; gap: 2px; align-items: flex-end; }
.sb-r i { width: 3px; background: var(--ink); border-radius: 1px; }
.sb-r i:nth-child(1) { height: 5px; } .sb-r i:nth-child(2) { height: 7px; } .sb-r i:nth-child(3) { height: 9px; }
.sb-r b { width: 20px; height: 10px; border: 1.5px solid var(--ink); border-radius: 3px; margin-left: 5px; position: relative; }
.sb-r b::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: var(--ink); border-radius: 1px; }
.ph-top { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.ph-logo { font-size: 20px; padding-top: 3px; }
.ph-top-r { display: flex; gap: 8px; align-items: center; }
.avs { display: flex; }
.avs .av + .av { margin-left: -7px; }
.av { --c: #F2661F; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; border: 2px solid var(--paper); flex: none; line-height: 1; }
.av.sm { width: 24px; height: 24px; border-color: #fff; font-size: 10px; }
.av.lg { width: 48px; height: 48px; font-size: 18px; border: 0; }
.gear { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.gear svg { width: 16px; height: 16px; color: var(--sub); }
.ph-dog { display: flex; gap: 12px; align-items: center; margin: 12px 0 0; }
.ph-dog b { display: block; font-size: 19px; line-height: 1.3; }
.ph-dog small { color: var(--sub); font-size: 11px; }
.dogav { width: 46px; height: 46px; border-radius: 50%; background: #F6E3CF; color: #B8571B; display: grid; place-items: center; font-weight: 700; font-size: 18px; }

/* 数字3つ */
.stats { display: flex; margin: 16px 0 0; }
.st { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.st-l { font-size: 10px; font-weight: 700; color: var(--sub); letter-spacing: .04em; white-space: nowrap; }
.st-n { display: flex; align-items: baseline; gap: 2px; font-size: 32px; line-height: 1.1; white-space: nowrap; }
.st-u { font-size: 13px; color: var(--sub); font-weight: 700; }
.st-u.num { font-size: 14px; font-weight: 500; }
.st-c { font-size: 9px; color: var(--dim); white-space: nowrap; }
.st-sep { width: 1px; height: 32px; background: var(--hair); margin: 18px 10px 0; flex: none; }
.st-n .roll { transition: color .5s ease; }
.st-n .roll.ok { color: var(--done); }

/* 数字の縦ロール */
.roll { display: inline-flex; line-height: 1.1; white-space: nowrap; }
.roll .rd { display: inline-block; height: 1.1em; overflow: hidden; }
.roll .rs { display: flex; flex-direction: column; transition: transform .62s cubic-bezier(.2, .9, .25, 1.12); }
.roll .rs span, .roll .rc { display: block; height: 1.1em; line-height: 1.1em; }
.roll.bump { animation: bump .38s var(--spring); transform-origin: 50% 100%; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* アイコンの丸 */
.ic { --c: #F2661F; position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: #fff; display: inline-grid; place-items: center; flex: none; }
.ic > svg { width: 18px; height: 18px; }
.ic.tint { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.ic .badge { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--done); border: 2px solid #fff; display: grid; place-items: center; color: #fff; }
.ic .badge svg { width: 11px; height: 11px; }

/* 「つぎ」カード */
.next { position: relative; margin-top: 16px; background: #fff; border: 1px solid var(--hair); border-radius: 22px; padding: 14px; box-shadow: var(--shadow); transition: background-color .5s ease; }
.next.done { background: var(--done-t); }
.next-h { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); }
.next-lab, .next-t { display: grid; }
.next-lab > span, .next-t > span { grid-area: 1 / 1; transition: opacity .3s ease; }
.next-lab { font-weight: 700; letter-spacing: .04em; }
.next-lab .a { color: var(--link); }
.next-lab .b, .next-t .b { color: var(--done); opacity: 0; }
.next-t { justify-items: end; }
.next.done .a { opacity: 0; }
.next.done .b { opacity: 1; }
.next-b { display: flex; gap: 12px; align-items: center; margin: 10px 0 12px; }
.next-b b { display: block; font-size: 18px; line-height: 1.35; }
.next-b small { color: var(--sub); font-size: 11px; }
.next-ic { position: relative; width: 44px; height: 44px; flex: none; }
.next-ic .ic { width: 44px; height: 44px; transition: transform .35s var(--spring), opacity .25s; }
.next-ic .ic > svg { width: 21px; height: 21px; }
.ckd { position: absolute; inset: 0; width: 44px; height: 44px; opacity: 0; }
.next.done .ckd { opacity: 1; }
.ckd circle { fill: var(--done); fill-opacity: 0; stroke: var(--done); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
.ckd path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.next.done .next-ic .ic { transform: scale(.6); opacity: 0; }
.next.done .ckd circle { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset .3s cubic-bezier(.65, 0, .35, 1), fill-opacity .2s .22s; }
.next.done .ckd path { stroke-dashoffset: 0; transition: stroke-dashoffset .28s cubic-bezier(.65, 0, .35, 1) .24s; }
.next-cta { position: relative; height: 40px; display: grid; }
.next-cta > * { grid-area: 1 / 1; }

/* 主ボタン（✓ に変形する） */
.cta { position: relative; justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; transition: width .38s var(--spring), background-color .3s ease, transform .18s var(--spring); overflow: hidden; }
.cta.big { height: 52px; font-size: 15px; }
.cta:active, .cta.press { transform: scale(.97); }
.cta-l { transition: opacity .15s; white-space: nowrap; }
.cta-ck { position: absolute; width: 24px; height: 24px; left: 50%; top: 50%; margin: -12px 0 0 -12px; }
.cta-ck path { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cta.ok { width: 40px; background: var(--done); }
.cta.big.ok { width: 52px; }
.cta.ok .cta-l { opacity: 0; }
.cta.ok .cta-ck path { stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease .18s; }
.undo-b { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); font-weight: 700; font-size: 13px; opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .25s, transform .35s var(--spring); }
.undo-b svg { width: 14px; height: 14px; }
.next.undo .undo-b { opacity: 1; transform: none; }
.next.undo .cta { opacity: 0; }

/* タップの印（デモが自動で押すところ） */
.tap { width: 34px; height: 34px; border-radius: 50%; background: rgba(26, 22, 19, .22); border: 2px solid rgba(255, 255, 255, .9); place-self: center; opacity: 0; transform: scale(1.6); pointer-events: none; }
.tap.go { animation: tap .7s ease forwards; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.1); } }

/* リスト */
.ph-sec { display: flex; gap: 6px; margin: 16px 0 6px 4px; font-size: 11px; font-weight: 700; color: var(--sub); }
.ph-sec .num { color: var(--dim); font-weight: 500; }
.list { background: #fff; border: 1px solid var(--hair); border-radius: 20px; padding: 4px 0; overflow: hidden; }
.row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; min-height: 52px; }
.row .ic { width: 32px; height: 32px; }
.row .ic > svg { width: 16px; height: 16px; }
.r-t { width: 38px; font-size: 13px; flex: none; }
.r-m { flex: 1; min-width: 0; }
.r-m b { display: block; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-m small { display: block; font-size: 10.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--tint); color: var(--link); font-weight: 700; font-size: 12px; flex: none; }
.rec svg { width: 11px; height: 11px; }
.row.overdue .rec { background: var(--accent); color: #fff; }
.row.overdue .r-t, .row.overdue small { color: var(--link); }

/* ヒーローの新しい行：高さ0から滑り込み、緑がじわっと差して引く */
#hNew { display: flex; max-height: 0; opacity: 0; min-height: 0; padding-top: 0; padding-bottom: 0; transition: max-height .45s var(--soft), opacity .3s, padding .45s var(--soft), background-color 1s ease; }
#hNew.show { max-height: 60px; min-height: 52px; opacity: 1; padding-top: 7px; padding-bottom: 7px; background-color: var(--done-t); }
#hNew.show.fade { background-color: #fff; }
#hNew .badge { transform: scale(0); }
#hNew.show .badge { animation: popin .45s var(--spring) .25s forwards; }
@keyframes popin { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

.fab { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--float); z-index: 6; transition: background-color .25s, transform .2s var(--spring); }
.fab svg { width: 22px; height: 22px; transition: transform .32s var(--spring); }
.ph-fab { right: 16px; bottom: 86px; }
.tabbar { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 56px; border-radius: 28px; background: #fff; box-shadow: var(--float); display: flex; justify-content: space-around; align-items: center; padding: 0 6px; z-index: 5; }
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; font-weight: 700; color: var(--dim); width: 84px; height: 44px; justify-content: center; border-radius: 22px; }
.tabbar svg { width: 19px; height: 19px; }
.tabbar .on { background: var(--tint); color: var(--link); }

/* トースト */
.toast { position: absolute; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 6px 8px 10px; border-radius: 999px; background: #fff; box-shadow: var(--float); z-index: 9; opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; transition: opacity .25s ease, transform .45s var(--spring); overflow: hidden; }
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast .ic { width: 30px; height: 30px; }
.toast .ic > svg { width: 15px; height: 15px; }
.toast.show .ic { animation: popin .45s var(--spring) .1s both; }
.toast .tt { flex: 1; min-width: 0; line-height: 1.35; }
.toast .tt b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast .tt small { display: block; font-size: 10.5px; color: var(--sub); }
.toast .tu { color: var(--link); font-weight: 700; font-size: 13px; padding: 0 12px; min-height: 40px; display: grid; place-items: center; flex: none; }
.toast .life { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(242, 102, 31, .35); transform-origin: left; transform: scaleX(1); }
.toast.show .life { transform: scaleX(0); transition: transform 5s linear; }
.ph-toast { bottom: 84px; }

/* ---------- セクション共通 ---------- */
.t-sec { padding-top: 72px; padding-bottom: 72px; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .t-sec { padding-top: 112px; padding-bottom: 112px; } }
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split.rev .t-copy { order: 2; }
}
.t-stage { display: flex; justify-content: center; min-width: 0; }
.t-hint { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.hint-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(.55); } }
.t-hint.done { color: var(--sub); }
.t-hint.done .hint-dot { animation: none; background: var(--done); }

/* ---------- 2. 触れるデモ ---------- */
.demo { position: relative; width: 360px; max-width: 100%; height: 560px; background: var(--paper); border: 1px solid var(--line); border-radius: 32px; overflow: hidden; padding: 20px 16px 0; box-shadow: 0 1px 0 rgba(26, 22, 19, .02), var(--shadow); font-size: 13px; line-height: 1.45; letter-spacing: 0; }
.demo-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.demo-title { font-size: 22px; font-weight: 700; }
.demo-count { font-size: 15px; color: var(--sub); }
.demo-count .roll { color: var(--ink); }
.demo-count .roll.ok { color: var(--done); }
.demo-body .ph-sec { margin-top: 14px; }
.demo-body .row { overflow: hidden; }
.demo-body .row.enter { animation: rowin .55s var(--spring) both, freshbg 1.8s ease .2s both; }
.demo-body .row.enter .badge { animation: popin .45s var(--spring) .25s both; }
.demo-body .row.leave { animation: rowout .28s ease forwards; }
@keyframes rowin { 0% { opacity: 0; transform: translateY(-14px); max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; } 100% { opacity: 1; transform: none; max-height: 70px; } }
@keyframes rowout { 0% { opacity: 1; max-height: 70px; } 100% { opacity: 0; max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; transform: scale(.96); } }
@keyframes freshbg { 0% { background: var(--done-t); } 55% { background: var(--done-t); } 100% { background: #fff; } }
.demo-body .empty { padding: 14px; text-align: center; color: var(--dim); font-size: 12px; }
.demo-body .sec-wrap { transition: opacity .3s; }
.demo-fab { right: 16px; bottom: 18px; }
.demo-fab.open { background: var(--ink); }
.demo-fab.open svg { transform: rotate(135deg); }
.demo-fab:active { transform: scale(.9); }
.demo-fab.nudge { animation: nudge 1s ease 2; }
@keyframes nudge { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.12); } 55% { transform: scale(.96); } }
.scrim { position: absolute; inset: 0; background: rgba(26, 22, 19, .45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 5; }
.scrim.on { opacity: 1; pointer-events: auto; }
.pills { position: absolute; right: 16px; bottom: 82px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 6; pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 8px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-weight: 700; font-size: 15px; color: var(--ink); opacity: 0; transform: translateY(24px) scale(.85); transform-origin: 100% 100%; transition: opacity .12s ease, transform .12s ease; }
.pill .ic { width: 34px; height: 34px; }
.pill .ic > svg { width: 17px; height: 17px; }
.pills.open { pointer-events: auto; }
.pills.open .pill { opacity: 1; transform: none; transition: opacity .2s ease calc(var(--d) * 60ms), transform .5s var(--spring) calc(var(--d) * 60ms); }
.pill:active { transform: scale(.97) !important; }

/* シート */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 28px 28px 0 0; padding: 8px 18px 20px; z-index: 8; transform: translateY(105%); transition: transform .42s var(--soft); box-shadow: 0 -6px 24px rgba(26, 22, 19, .08); }
.sheet.open { transform: none; }
.grabber { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--seg); margin: 0 auto 12px; }
.sh-title { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.4; }
.sh-sub { font-size: 12px; color: var(--sub); margin: 0 0 14px; }
.sh-body { display: flex; flex-direction: column; gap: 8px; }
.sh-body.two { flex-direction: row; }
.sh-body.two .opt { flex: 1; flex-direction: column; justify-content: center; text-align: center; min-height: 96px; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--hair); text-align: left; transition: background-color .25s, transform .2s var(--spring); }
.opt b { display: block; font-size: 14px; }
.opt small { display: block; font-size: 11px; color: var(--sub); }
.opt .ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; }
.opt .ring { opacity: 0; }
.opt.sel .ring { opacity: 1; }
.opt .ring rect { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.opt.sel { background: var(--tint); }
.opt.sel .ring rect { stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease; }
.opt .okb { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; transform: scale(0); }
.opt .okb svg { width: 13px; height: 13px; }
.opt.sel .okb { animation: popin .4s var(--spring) .12s forwards; }
.opt:active { transform: scale(.98); }
.opt[disabled] { opacity: .5; cursor: default; }
.opt[disabled] small { color: var(--done); }
.sh-time { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(26, 22, 19, .06); margin: 14px 0 14px; padding-top: 12px; font-size: 13px; font-weight: 700; }
.sh-time span:last-child { display: inline-flex; align-items: center; gap: 2px; color: var(--sub); font-weight: 500; }
.sh-time svg { width: 13px; height: 13px; color: var(--dim); }
.sheet .cta { display: flex; margin: 0 auto; }
.demo-toast { bottom: 82px; z-index: 7; }
.demo-toast.over { z-index: 9; }

/* ---------- 3. 二重投与 ---------- */
.fam { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.fam-m { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.fam-line { width: 64px; height: 2px; background: var(--seg); position: relative; overflow: hidden; margin-bottom: 22px; border-radius: 2px; }
.fam-line i { position: absolute; top: 0; left: 0; width: 16px; height: 2px; background: var(--accent); border-radius: 2px; animation: flow 1.8s ease-in-out infinite; }
@keyframes flow { 0% { transform: translateX(-16px); } 100% { transform: translateX(64px); } }
.fam-cap { font-size: 12px; color: var(--sub); width: 100%; }
.dupe { position: relative; width: 360px; max-width: 100%; height: 470px; background: var(--paper); border: 1px solid var(--line); border-radius: 32px; overflow: hidden; padding: 72px 16px 0; box-shadow: var(--shadow); font-size: 13px; line-height: 1.45; letter-spacing: 0; }
.dupe .next { margin-top: 30px; }
.dupe .next-cta .cta { width: 100%; }
.notif { position: absolute; left: 12px; right: 12px; top: 14px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 20px; background: rgba(255, 255, 255, .96); border: 1px solid var(--hair); box-shadow: var(--float); transform: translateY(-140%); transition: transform .5s var(--spring); z-index: 4; }
.notif img { width: 34px; height: 34px; padding: 4px; border-radius: 9px; background: var(--paper); flex: none; }
.notif span { font-size: 12.5px; line-height: 1.45; min-width: 0; }
.notif b { display: flex; justify-content: space-between; font-family: "Baloo 2", sans-serif; font-weight: 500; font-size: 13px; }
.notif em { font-style: normal; font-family: "Noto Sans JP", sans-serif; font-size: 11px; color: var(--sub); font-weight: 400; }
.notif.show { transform: none; }
.notif.wig { animation: wig .45s ease; }
@keyframes wig { 0%, 100% { transform: none; } 25% { transform: rotate(-1.5deg); } 60% { transform: rotate(1.2deg); } }
.dsheet { padding-bottom: 14px; }
.warn { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--warn-t); margin-bottom: 16px; }
.warn .ic { width: 34px; height: 34px; }
.warn b { display: block; font-size: 14px; line-height: 1.45; }
.warn small { display: block; font-size: 11px; color: var(--sub); }
.warn.shake { animation: shake .42s linear; }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translateX(-8px); } 35% { transform: translateX(7px); } 55% { transform: translateX(-5px); } 75% { transform: translateX(3px); } 90% { transform: translateX(-1px); } }
.textbtn { display: block; margin: 8px auto 0; min-height: 40px; padding: 0 12px; font-size: 13px; color: var(--sub); font-weight: 500; }
.replay { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 10px); display: inline-flex; gap: 6px; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--spring); z-index: 3; }
.replay svg { width: 14px; height: 14px; }
.replay.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* ---------- 4. 散歩 ---------- */
.walk-head { max-width: 640px; }
.walk-grid { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 860px) { .walk-grid { grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: stretch; } }
.mapcard { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.map { display: block; width: 100%; height: auto; aspect-ratio: 360 / 260; }
.map-chip { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; box-shadow: var(--shadow); }
.dotlive { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: hint 1.4s ease-in-out infinite; }
.walk-stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 16px 18px 18px; border-top: 1px solid rgba(26, 22, 19, .06); }
.walk-stats > div { display: flex; flex-direction: column; min-width: 0; }
.ws-l { font-size: 11px; font-weight: 700; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-n { display: flex; align-items: baseline; gap: 3px; font-size: clamp(26px, 8vw, 44px); line-height: 1.15; }
.ws-n small { font-family: Inter, sans-serif; font-size: 15px; color: var(--sub); font-weight: 500; }
.pin { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); }
.pin.up { animation: pinup .5s var(--spring) forwards; }
@keyframes pinup { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.holdcard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fff; border: 1px solid var(--hair); border-radius: 24px; padding: 64px 20px 24px; box-shadow: var(--shadow); overflow: hidden; min-height: 360px; }
.hold-cap { font-size: 12px; color: var(--sub); margin: 0 0 18px; font-weight: 500; }
.hold { position: relative; width: 168px; height: 168px; display: grid; place-items: center; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hold-face { position: relative; z-index: 2; width: 128px; height: 128px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: var(--float); transition: transform .35s var(--spring), background-color .3s; }
.hold-face svg { width: 26px; height: 26px; }
.hold-face b { font-size: 19px; }
.hold-time { font-size: 13px; font-weight: 500; display: none; }
.hold.pressing .hold-face { transform: scale(.94); }
.hold.launch .hold-face { transform: scale(1.08); }
.hold.active .hold-face { background: var(--ink); }
.hold.active .hold-face b { font-size: 14px; }
.hold.active .hold-time { display: block; }
.hold-ring { position: absolute; inset: 9px; width: 150px; height: 150px; transform: rotate(-90deg); z-index: 1; opacity: 0; transition: opacity .2s ease .3s; }
.hold.pressing .hold-ring, .hold.launch .hold-ring { opacity: 1; transition: none; }
.hold-ring circle { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hold.active .hold-ring circle { stroke: var(--ink); }
.pulse { position: absolute; left: 20px; top: 20px; width: 128px; height: 128px; border-radius: 50%; border: 2px solid rgba(242, 102, 31, .35); animation: pulse 1.6s ease-out infinite; pointer-events: none; }
.pulse.p2 { animation-delay: .8s; }
.hold.pressing .pulse, .hold.active .pulse { display: none; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.hold.nudge { animation: shake .36s linear; }
.hold-why { font-size: 12px; color: var(--sub); margin: 18px 0 0; max-width: 22em; }
.top-toast { top: 14px; bottom: auto; transform: translateY(-24px) scale(.96); }
.top-toast.show { transform: none; }

/* ---------- 5. 振り返り ---------- */
.streak { display: inline-flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); border-radius: 22px; padding: 16px 18px; box-shadow: var(--shadow); margin-top: 6px; }
.streak-n { display: flex; align-items: baseline; gap: 4px; font-size: 56px; line-height: 1.1; }
.streak-n .u { font-size: 17px; font-weight: 700; color: var(--sub); }
.streak-days { display: flex; gap: 8px; margin-top: 8px; }
.streak-days span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--sub); }
.streak-days i { width: 20px; height: 20px; border-radius: 50%; background: var(--seg); transition: background-color .3s, transform .4s var(--spring); }
.streak-days span.on i { background: var(--ink); animation: popin .4s var(--spring); }
.streak-days span.today.on i { background: var(--accent); }
.streak-days span.today { color: var(--link); font-weight: 700; }

.report { width: 400px; max-width: 100%; background: #fff; border: 1px solid var(--hair); border-radius: 24px; padding: 18px; box-shadow: var(--shadow); font-size: 13px; letter-spacing: 0; }
.rp-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--seg); }
.seg button { position: relative; z-index: 1; height: 32px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--sub); transition: color .2s; white-space: nowrap; }
.seg button.on { color: var(--ink); }
.seg-k { position: absolute; top: 3px; left: 3px; height: 32px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(26, 22, 19, .1); transition: transform .4s var(--spring), width .4s var(--spring); }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--tint); color: var(--link); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.rp-range { margin: 14px 0 0; color: var(--sub); font-size: 12px; }
.rp-dist { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: clamp(48px, 15vw, 60px); line-height: 1.1; }
.rp-dist small { font-family: Inter, sans-serif; font-size: 18px; color: var(--sub); font-weight: 500; margin-right: 8px; }
.up { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 9px 0 6px; border-radius: 999px; background: var(--done-t); color: var(--done); font-family: "Noto Sans JP", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0; align-self: center; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .45s var(--spring); }
.up svg { width: 12px; height: 12px; transform: rotate(-90deg); }
.up.show { opacity: 1; transform: none; }
.bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 150px; margin: 18px 0 6px; }
.bars span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bars i { display: block; width: 100%; max-width: 30px; height: calc(var(--h) * 120px + 4px); border-radius: 8px; background: var(--ink); transform: scaleY(0); transform-origin: bottom; }
.bars .today i { background: var(--accent); }
.bars .fut i { background: var(--seg); height: 4px; }
.bars em { font-style: normal; font-size: 11px; color: var(--sub); }
.bars .today em { color: var(--link); font-weight: 700; }
.report.go .bars i { transform: scaleY(1); transition: transform .6s var(--spring); }
.report.go .bars span:nth-child(1) i { transition-delay: 0ms; }
.report.go .bars span:nth-child(2) i { transition-delay: 40ms; }
.report.go .bars span:nth-child(3) i { transition-delay: 80ms; }
.report.go .bars span:nth-child(4) i { transition-delay: 120ms; }
.report.go .bars span:nth-child(5) i { transition-delay: 160ms; }
.report.go .bars span:nth-child(6) i { transition-delay: 200ms; }
.report.go .bars span:nth-child(7) i { transition-delay: 240ms; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; margin: 18px 0 6px; justify-items: center; min-height: 176px; align-content: start; }
.cal b { font-size: 10px; font-weight: 500; color: var(--sub); line-height: 1; }
.cal i { width: 24px; height: 24px; border-radius: 50%; background: rgba(26, 22, 19, .06); opacity: 0; transform: scale(.4); }
.cal i.d { background: rgba(242, 102, 31, var(--a)); }
.cal i.t { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.cal i.e { visibility: hidden; }
.cal i.in { opacity: 1; transform: none; transition: opacity .25s, transform .4s var(--spring); }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid rgba(26, 22, 19, .06); padding-top: 14px; margin-top: 10px; }
.rp-stats > div { display: flex; flex-direction: column; }
.rp-stats b { font-size: 20px; line-height: 1.3; }
.who { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.who-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--seg); gap: 2px; }
.who-bar i { display: block; height: 100%; flex: 0 0 auto; width: 0; transition: width .8s var(--soft) .3s; }
.who-bar .w1 { background: var(--accent); }
.who-bar .w2 { background: var(--done); }
.report.go .who-bar i { width: calc(var(--w) * 100% - 1px); }
.who-leg { display: flex; gap: 16px; font-size: 12px; color: var(--sub); }
.who-leg span { display: inline-flex; align-items: center; gap: 6px; }
.who-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.who-leg b { color: var(--ink); font-size: 12px; }

/* ---------- 6. 共有カード ---------- */
.privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 700; margin: 0 0 22px; }
.privacy svg { width: 18px; height: 18px; color: var(--done); flex: none; margin-top: 3px; }
.share-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.swatches { display: inline-flex; gap: 10px; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; background: var(--s); border: 1px solid rgba(26, 22, 19, .14); position: relative; transition: transform .3s var(--spring); }
.swatches button::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .35s var(--spring); }
.swatches button.on::after { opacity: 1; transform: none; }
.swatches button:active { transform: scale(.88); }
.sharewrap { perspective: 900px; width: 340px; max-width: 100%; }
.sharecard { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; padding: 26px 26px 24px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--fg); box-shadow: 0 24px 48px -24px rgba(26, 22, 19, .35), 0 0 0 1px rgba(26, 22, 19, .06); transition: background-color .35s ease, color .35s ease, transform .5s var(--spring); letter-spacing: 0; }
.js .rv:not(.in) .sharecard { transform: translateY(40px) rotate(-3deg); }
.rv.in .sharecard { transform: none; animation: floaty 6s ease-in-out .9s infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sharecard.paper { --bg: #F7F3EE; --fg: #1A1613; --sub2: #6F675F; --hi: #F2661F; --base: #1A1613; --empty: rgba(26, 22, 19, .08); }
.sharecard.orange { --bg: #F2661F; --fg: #fff; --sub2: rgba(255, 255, 255, .82); --hi: #fff; --base: rgba(255, 255, 255, .5); --empty: rgba(255, 255, 255, .22); }
.sharecard.peach { --bg: #FFF1E8; --fg: #1A1613; --sub2: #6F675F; --hi: #F2661F; --base: #1A1613; --empty: rgba(26, 22, 19, .08); }
.sc-logo { display: flex; align-items: center; gap: 8px; }
.sc-logo img { width: 24px; height: 30px; object-fit: contain; }
.sharecard.orange .sc-logo img { width: 30px; height: 30px; padding: 5px 6px; background: #fff; border-radius: 50%; object-fit: contain; }
.sc-logo .wordmark { font-size: 21px; }
.sc-tpl { position: absolute; left: 26px; right: 26px; bottom: 24px; top: 74px; display: flex; flex-direction: column; justify-content: flex-end; transition: opacity .2s ease, transform .35s var(--spring); }
.sharecard[data-tpl="streak"] .sc-week, .sharecard[data-tpl="week"] .sc-streak { opacity: 0; transform: translateY(8px); pointer-events: none; }
.sc-l { margin: 0; font-size: 15px; font-weight: 700; color: var(--sub2); }
.sc-big { margin: 0; display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.sc-big .num { font-size: clamp(88px, 30vw, 124px); letter-spacing: -.04em; }
.sc-big .u { font-size: 24px; font-weight: 700; }
.sc-dots, .sc-bars { display: flex; justify-content: space-between; margin: 18px 0 16px; }
.sc-dots span, .sc-bars span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--sub2); flex: 1; }
.sc-dots i { width: 26px; height: 26px; border-radius: 50%; background: var(--base); transition: background-color .35s; }
.sc-dots .hi i { background: var(--hi); }
.sc-bars { align-items: flex-end; height: 92px; }
.sc-bars span { justify-content: flex-end; height: 100%; }
.sc-bars i { width: 22px; height: calc(var(--h) * 66px + 4px); border-radius: 6px; background: var(--base); transition: background-color .35s; }
.sc-bars span[style*="--h:0"] i { background: var(--empty); }
.sc-bars .hi i { background: var(--hi); }
.sc-foot { margin: 0; font-size: 14px; font-weight: 700; color: var(--sub2); }
.sc-foot b { color: var(--fg); font-size: 16px; }

/* ---------- 7. 締め ---------- */
.t-end { text-align: center; padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.end-mark { width: 92px; transform: scale(0); }
.end-mark svg { display: block; width: 100%; height: auto; }
.end-mark .em-eye { transform-box: fill-box; transform-origin: center; }
.end-mark .em-ear { transform-box: view-box; transform-origin: 705px 267px; transform: scaleY(0); }
.t-end.in .end-mark { animation: markpop .6s var(--spring) forwards; }
.t-end.in .em-ear { animation: ear .45s var(--spring) .55s forwards; }
.t-end.in .em-eye { animation: blink 4.5s ease 1.1s infinite; }
@keyframes markpop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ear { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes blink { 0%, 5%, 100% { transform: scaleY(1); } 2.5% { transform: scaleY(.1); } }
.end-word { font-size: 52px; margin: 14px 0 6px; height: 56px; display: flex; justify-content: center; letter-spacing: -.02em; }
.end-word span { display: inline-block; opacity: 0; transform: translateY(18px); }
.t-end.in .end-word span { opacity: 1; transform: none; transition: opacity .3s ease, transform .55s var(--spring); transition-delay: calc(.5s + var(--k) * 40ms); }
.end-lead { font-size: 17px; font-weight: 700; margin: 8px 0 4px; }
.end-sub { color: var(--sub); margin: 0 0 22px; }
.end-links { list-style: none; padding: 0; margin: 36px 0 0; width: 100%; max-width: 420px; border-top: 1px solid var(--line); text-align: left; }
.end-links li { margin: 0; border-bottom: 1px solid var(--line); }
.end-links a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; color: var(--ink); text-decoration: none; transition: padding .3s var(--spring), color .2s; }
.end-links a svg { width: 16px; height: 16px; color: var(--dim); transition: transform .3s var(--spring); }
.end-links a:hover { color: var(--link); padding-left: 10px; }
.end-links a:hover svg { transform: translateX(4px); color: var(--link); }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  body.top *, body.top *::before, body.top *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
  .pulse, .hint-dot, .dotlive, .fam-line i { animation: none !important; }
  .rv.in .sharecard, .sharecard, .js .rv:not(.in) .sharecard { animation: none !important; transform: none; }
  .t-end .end-mark { transform: none; }
  .end-mark .em-ear { transform: none; }
  .end-word span { opacity: 1; transform: none; }
}