/*
 * RiceCake Studio サイト共通のスタイル（ガイドを除く全ページ）。
 * 設計書: docs/superpowers/specs/2026-10-22-ricecakestudio-site-redesign-design.md
 *
 * 色は :root のトークンだけで指定し、各所で値を直接書かない。
 * 隠れた状態は、JavaScript が付けるクラス（is-waiting）の下と、キーフレームの中にだけ書く。
 * JavaScript が無い・読み込めないときも、内容は最初から見えている。
 */

:root {
    --paper: oklch(14.5% 0.022 258);
    --paper-2: oklch(19.5% 0.026 258);
    --paper-3: oklch(24% 0.03 256);
    --bloom: oklch(30% 0.075 232);
    --rule: oklch(32% 0.03 255);
    --rule-soft: oklch(25% 0.026 256);
    --ink: oklch(95.5% 0.01 240);
    --text: oklch(86% 0.014 242);
    --muted: oklch(74% 0.02 245);
    --faint: oklch(60% 0.022 248);
    --accent: oklch(85% 0.115 205);
    --danger: oklch(66% 0.19 20);
    --focus: var(--accent);

    --font-head-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", sans-serif;
    --font-head-latin: "Geist", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    --font-body: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
    --font-ui: "Geist", "IBM Plex Sans JP", "Hiragino Sans", sans-serif;
    /* 和文のラベルが OS の等幅書体に落ちないよう、和文の代わりを挟む */
    --font-mono: "Geist Mono", "IBM Plex Sans JP", ui-monospace, monospace;

    --gutter: clamp(16px, 6vw, 88px);
    --max: 1264px;
    --ease: cubic-bezier(.2, .7, .1, 1);

    color-scheme: dark;
}

/* ---- 基本 ---- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 横方向は clip（hidden にすると body がスクロールの箱になり、sticky が効かなくなる） */
html,
body {
    overflow-x: clip;
}

html {
    background: var(--paper);
    /* 固定のナビに見出しが隠れないように */
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ページ内の移動は、読み込みと文字の差し替えが済んでから（site.js が is-loaded を付ける）なめらかにする。
   深いリンクで開いたときの最初の移動までなめらかにすると、動いている途中で文字が差し替わり、着地がずれる */
@media (prefers-reduced-motion: no-preference) {
    html.is-loaded {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.85;
    word-break: auto-phrase;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

p {
    text-wrap: pretty;
}

img {
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 6px;
}

.wrap {
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---- ナビ ---- */

.nav {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 8px 8px 22px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transform: translateX(-50%);
}

.nav .brand {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.nav .links {
    display: flex;
    gap: 2px;
}

.nav .links a {
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s, background-color .2s;
}

.nav .links a:hover,
.nav .links a.is-current {
    background: var(--paper-3);
    color: var(--ink);
}

/* ---- ヒーロー ---- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: max(720px, 100vh);
    min-height: max(720px, 100svh);
    padding: 140px 0 clamp(200px, 26vh, 300px);
    background: radial-gradient(42% 50% at 74% 76%, var(--bloom), transparent 72%), var(--paper);
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
}

/* 指で線を弾けるあいだ（signal-line.js が is-pluckable を付ける）は、横の指の動きを線に渡す。
   縦のスクロールと拡大縮小は止めない。拡大しているとき・動きを減らす設定・スクリプトが動かないときは
   付かないので、拡大した画面をヒーローの上から横へ動かせる */
.hero.is-pluckable {
    touch-action: pan-y pinch-zoom;
}

.hero .wrap {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-brand {
    display: none;
    margin: 0 0 20px;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
}

.headline {
    min-width: 0;
    margin: 0;
    font-family: var(--font-head-jp);
    font-size: clamp(34px, 10.4vw, 148px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-feature-settings: "palt";
    overflow-wrap: anywhere;
}

.headline .ln {
    display: block;
    padding-bottom: .06em;
    overflow: hidden;
    overflow: clip;
}

/* 隠れた状態はキーフレームの最初にだけ置き、fill-mode both で待ち時間にも当てる */
.headline .ln > span {
    display: inline-block;
    animation: rise 1.15s var(--ease) both;
}

.headline .ln:nth-child(2) > span {
    animation-delay: .13s;
}

@keyframes rise {
    from {
        transform: translateY(108%);
    }
    to {
        transform: none;
    }
}

.hero .lede {
    max-width: 33em;
    margin: 36px 0 0;
    color: var(--muted);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.95;
    text-wrap: balance;
    animation: fade .9s .55s var(--ease) both;
}

.hero .ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 30px;
    margin-top: 40px;
    animation: fade .9s .7s var(--ease) both;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.signal {
    position: absolute;
    right: 0;
    bottom: 5%;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(170px, 30vh, 320px);
    pointer-events: none;
}

/* ---- ボタンと文字リンク ---- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s, color .25s, box-shadow .25s;
}

.btn:hover {
    background: var(--accent);
    color: var(--paper);
    box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 14%, transparent);
}

.btn .arr {
    display: inline-block;
    transition: transform .3s var(--ease);
}

.btn:hover .arr {
    transform: translateX(3px);
}

.btn.down:hover .arr {
    transform: translateY(3px);
}

.tlink {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .25s;
}

.tlink:hover {
    border-color: var(--accent);
}

/* ---- セクション ---- */

.sec {
    position: relative;
    padding: clamp(88px, 12vw, 168px) 0;
}

.sec-head {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0 0 clamp(40px, 6vw, 80px);
}

.sec-head h2 {
    margin: 0;
    font-family: var(--font-head-latin);
    font-size: clamp(40px, 6.4vw, 96px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.sec-head .rule {
    position: relative;
    flex: 1;
    min-width: 24px;
    height: 1px;
    background: var(--rule);
    overflow: hidden;
    overflow: clip;
}

/* 見出しの横線: 画面に入ったとき、光が一度だけ左から右へ走る */
.sec .sec-head .rule::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 160px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transform: translateX(-170px);
}

.sec.is-in .sec-head .rule::after {
    animation: pulse 2s .25s var(--ease) forwards;
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: translateX(-170px);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(1400px);
    }
}

/* スクロールで現れる演出: 隠すのは JavaScript が画面より下の要素に付ける is-waiting の間だけ */
.rv {
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.rv.d1 {
    transition-delay: .08s;
}

.rv.d2 {
    transition-delay: .16s;
}

.rv.is-waiting {
    opacity: 0;
    transform: translateY(18px);
    transition: none;
}

/* ---- About ---- */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
}

.statement {
    margin: 0;
    font-size: clamp(19px, 2.1vw, 29px);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .01em;
    font-feature-settings: "palt";
    text-wrap: balance;
}

.spec {
    margin: 0;
    border-top: 1px solid var(--rule);
}

.spec .row {
    position: relative;
    display: grid;
    grid-template-columns: var(--label-width, 6.5em) minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.spec dt {
    padding-top: 3px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .06em;
}

.spec dd {
    margin: 0;
    color: var(--text);
    font-size: 15.5px;
    line-height: 1.8;
}

/* 郵便番号・番地・電話番号など、数字とハイフンの並びは途中で折らない。
   文節で折る指定（word-break: auto-phrase）は、行に収まらないと数字の並びの途中でも折る */
.spec .num {
    white-space: nowrap;
}

/* About の項目一覧: 画面に入ったとき、各行の下線を光が順に走る（トップだけ） */
.sec .spec .row::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: var(--accent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.sec .spec.is-in .row::after {
    animation: scan 1.3s var(--ease) forwards;
}

.sec .spec.is-in .row:nth-child(2)::after {
    animation-delay: .12s;
}

.sec .spec.is-in .row:nth-child(3)::after {
    animation-delay: .24s;
}

.sec .spec.is-in .row:nth-child(4)::after {
    animation-delay: .36s;
}

@keyframes scan {
    0% {
        opacity: .9;
        transform: scaleX(0);
    }
    65% {
        opacity: .9;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* ---- Products ---- */

.app {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
    padding: clamp(28px, 4.5vw, 64px);
    border: 1px solid var(--rule);
    border-radius: 28px;
    background:
        radial-gradient(70% 90% at 0% 100%, color-mix(in oklch, var(--bloom) 75%, transparent), transparent 70%),
        var(--paper-2);
}

/* 縦長の動画ポスター。画像が取れなくても、枠と再生の印とラベルで成り立つ */
.product-video-link {
    position: relative;
    display: block;
    justify-self: center;
    width: min(100%, 264px);
    aspect-ratio: 9 / 16;
    border: 1px solid var(--rule);
    border-radius: 22px;
    background: radial-gradient(80% 60% at 50% 70%, var(--bloom), transparent 75%), var(--paper);
    color: var(--muted);
    text-decoration: none;
    box-shadow: 0 40px 90px -40px color-mix(in oklch, var(--accent) 45%, transparent);
    overflow: hidden;
    overflow: clip;
}

.product-video-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    font-size: 12px;
    transition: transform .9s var(--ease);
}

.product-video-link:hover img {
    transform: scale(1.04);
}

.product-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
    padding-left: 4px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: color-mix(in oklch, var(--paper) 62%, transparent);
    color: var(--accent);
    font-size: 19px;
    line-height: 1;
    font-variant-emoji: text;
    transition: background-color .3s, color .3s, box-shadow .3s;
}

.product-video-link:hover .product-video-play {
    background: var(--accent);
    color: var(--paper);
    box-shadow: 0 0 0 12px color-mix(in oklch, var(--accent) 16%, transparent);
}

.product-video-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 7px 11px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.app-title {
    margin: 0;
    font-family: var(--font-head-latin);
    font-size: clamp(44px, 6.6vw, 104px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.app-tag {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.75;
}

.app-body .btn {
    margin-top: 36px;
}

/* ---- News ---- */

.news {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    list-style: none;
}

.news li {
    display: grid;
    grid-template-columns: 10em minmax(0, 1fr);
    gap: 24px;
    padding: 30px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.news time {
    padding-top: 5px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .04em;
}

.news h3 {
    margin: 0;
    font-family: var(--font-head-jp);
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.02em;
    font-feature-settings: "palt";
}

.news p {
    max-width: 46em;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.95;
}

/* ---- Contact ---- */

.contact-lead {
    margin: 0;
    color: var(--muted);
}

.mail {
    position: relative;
    display: inline-block;
    margin: 26px 0 0;
    color: var(--ink);
    font-family: var(--font-head-latin);
    font-size: clamp(18px, 5.4vw, 72px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-decoration: none;
    /* 入りきらないとき（文字の間隔を広げた・画面が狭い）は @ の後ろ（wbr）で折り返し、それでも長い部分は
       途中で折り返す。html と body は横を clip しているので、はみ出した分は読めない */
    overflow-wrap: anywhere;
}

.mail::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(.16);
    transform-origin: left;
    transition: transform .7s var(--ease);
}

.mail:hover::after,
.mail:focus-visible::after {
    transform: scaleX(1);
}

.notes {
    margin: 44px 0 0;
    padding: 0;
    color: var(--faint);
    font-size: 14px;
    line-height: 1.95;
    list-style: none;
}

/* ---- フッター ---- */

.foot {
    padding: 56px 0 44px;
    border-top: 1px solid var(--rule);
}

.foot-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
}

.foot .brand {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 600;
}

.foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.foot nav a {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.foot nav a:hover {
    color: var(--ink);
}

.copy {
    margin: 40px 0 0;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ---- 法務ページ（プライバシーポリシー・特商法・アカウント削除） ---- */

.sub-head {
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--font-ui);
}

.sub-head .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.sub-head .brand {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.sub-head .back {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.sub-head .back:hover {
    color: var(--ink);
}

.sub {
    padding-bottom: clamp(80px, 10vw, 128px);
}

.sub-title {
    padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 5vw, 64px);
}

/* 片仮名だけのページ名（プライバシーポリシー）は文節の区切りが無く、収まらないと語の途中で折れる。
   狭い幅では最小の大きさも画面の幅に合わせて縮め、1 行に収める */
.sub-title h1 {
    min-width: 0;
    margin: 0;
    font-family: var(--font-head-jp);
    font-size: clamp(min(32px, 8.8vw), 5vw, 64px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-feature-settings: "palt";
    overflow-wrap: anywhere;
}

/* アプリ名の小札 */
.sub-title .app-name {
    display: inline-block;
    margin: 18px 0 0;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
}

/* 目次のあるページ（プライバシーポリシー）だけ、左に目次・右に本文の 2 列にする */
.doc.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
}

/* 目次はスクロールに追従する。画面の低いウィンドウでも最後の項目まで届くよう、中でスクロールさせる */
.toc {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    font-size: 13.5px;
}

.toc ol {
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--rule-soft);
    list-style: none;
}

/* 現在地の印は、目次の縦線に重ねる */
.toc a {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    gap: 6px;
    margin-left: -1px;
    padding: 7px 0 7px 15px;
    border-left: 2px solid transparent;
    color: var(--faint);
    line-height: 1.55;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}

.toc a:hover {
    color: var(--ink);
}

.toc a.is-current {
    border-left-color: var(--accent);
    color: var(--ink);
}

/* スクロールする箱の縁で切れないよう、フォーカス枠を内側に描く */
.toc a:focus-visible {
    outline-offset: -2px;
}

.toc .n {
    padding-top: 1px;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* 本文: 1 行が約 42 字になる幅 */
.doc-body {
    max-width: 42em;
}

.art + .art {
    margin-top: 56px;
}

/* 条の見出し。h2 には属性も子要素も足さない（アプリの照合が読む）ので、四角は疑似要素で付ける */
.doc-body h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 18px;
    font-family: var(--font-head-jp);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.02em;
    font-feature-settings: "palt";
}

.doc-body h2::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
    transform: translateY(-3px);
}

.doc-body p {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 16px;
    line-height: 2;
}

.doc-body .subsection {
    margin-top: 26px;
    color: var(--ink);
    font-weight: 700;
}

.doc-body strong {
    color: var(--ink);
    font-weight: 700;
}

.doc-body a {
    color: var(--accent);
    text-underline-offset: 3px;
}

.doc-body ul,
.doc-body ol {
    margin: 0 0 16px;
    color: var(--text);
}

.doc-body li {
    margin: 0 0 8px;
    line-height: 1.9;
}

.doc-body ul {
    padding: 0;
    list-style: none;
}

.doc-body ul > li {
    position: relative;
    padding-left: 22px;
}

.doc-body ul > li::before {
    content: "";
    position: absolute;
    top: .95em;
    left: 2px;
    width: 10px;
    height: 1px;
    background: var(--faint);
}

.doc-body ol {
    padding-left: 1.75em;
}

.doc-body ol > li {
    padding-left: 4px;
}

.doc-body ol > li::marker {
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 13px;
}

.doc-body .last-updated {
    margin: 56px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rule-soft);
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.8;
}

/* 特商法の項目一覧: About と同じ見せ方で、ラベルの列は最長の項目名が 1 行に収まる幅にする */
.legal-list {
    --label-width: 10.5em;
}

/* 特商法ページ: 本文の文字の選択を止める（コピーの操作は js/tokushoho.js が止める） */
.copy-guard,
.copy-guard * {
    -webkit-user-select: none;
    user-select: none;
}

/* ---- アカウント削除 ---- */

/* 副題（アプリ名とページの用途） */
.sub-title .page-sub {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

/* 同じ節の中の 2 つ目からの見出し（削除の確認）は、前の内容から離す */
.doc-body h2:not(:first-child) {
    margin-top: 48px;
}

/* 注意書き: danger の枠線と、danger をごく薄く混ぜた面。本文は text の色のまま、強調と三角の記号を danger にする */
.warning {
    position: relative;
    margin: 0 0 20px;
    padding: 14px 18px 14px 48px;
    border: 1px solid var(--danger);
    border-radius: 10px;
    background: color-mix(in oklch, var(--danger) 9%, var(--paper));
    color: var(--text);
    font-size: 15px;
    line-height: 1.9;
}

.doc-body .warning strong {
    color: var(--danger);
}

/* 記号は飾り（疑似要素なので読み上げない）。形は SVG をマスクにして切り抜き、色は文字の色で塗る */
.warning::before,
.error-msg::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/* 1 行目の中央に置く（上の余白 + 行の高さの半分 − 記号の半分） */
.warning::before {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 1 21h22zM11 9v6h2V9zm0 8v2h2v-2z'/%3E%3C/svg%3E");
    top: calc(14px + .95em - 9px);
    left: 18px;
    color: var(--danger);
}

/* 確認の入力欄: 16px 以上の文字（スマートフォンで拡大されない）。枠線は周りの面と欄の面の両方に 3:1 以上の
   faint にする（rule では欄の範囲が見えない）。フォーカスでは枠線もアクセントにする */
.confirm-input {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--faint);
    border-radius: 10px;
    background: var(--paper-2);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
}

.confirm-input::placeholder {
    color: var(--faint);
    opacity: 1;
}

.confirm-input:focus-visible {
    border-color: var(--focus);
}

/* 削除ボタン: 押せる状態は danger の塗りに paper の文字。押せない状態は danger を使わず、点線の枠と faint の文字 */
.btn-delete {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px 18px;
    border: 1px solid var(--danger);
    border-radius: 10px;
    background: var(--danger);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.btn-delete:hover:not(:disabled) {
    background: color-mix(in oklch, var(--danger) 88%, var(--ink));
}

.btn-delete:disabled {
    border: 1px dashed var(--rule);
    background: transparent;
    color: var(--faint);
    cursor: not-allowed;
}

/* エラー文: danger の文字と、丸に感嘆符の記号。文が空のときは記号ごと出さない */
.doc-body .error-msg {
    position: relative;
    margin: 12px 0 0;
    padding-left: 26px;
    color: var(--danger);
    font-size: 14px;
    line-height: 1.8;
}

/* 1 行目の中央に置く（行の高さの半分 − 記号の半分） */
.error-msg::before {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1 5v8h2V6zm0 10v2h2v-2z'/%3E%3C/svg%3E");
    top: calc(.9em - 9px);
    left: 0;
}

.error-msg:empty {
    display: none;
}

/* 削除の結果（完了と一部失敗の両方で使うので、成功だけを示す印は付けない） */
.done-title {
    margin: 0 0 14px;
    color: var(--ink);
    font-family: var(--font-head-jp);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

/* 結果の文には改行が入る（js/account-deletion.js） */
.done-desc {
    white-space: pre-line;
}

.doc-body .done-note {
    color: var(--muted);
    font-size: 14px;
}

/* js/account-deletion.js は hidden の付け外しで節を切り替える */
.hidden {
    display: none !important;
}

/* ---- 幅ごとの指定 ---- */

@media (max-width: 900px) {
    .about-grid,
    .app {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-video-link {
        justify-self: start;
    }

    .doc.has-toc {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc {
        display: none;
    }
}

@media (max-width: 640px) {
    .nav {
        gap: 0;
        padding: 6px;
    }

    .nav .brand {
        display: none;
    }

    .nav .links a {
        padding: 7px 11px;
        font-size: 13px;
    }

    .hero {
        padding-top: 104px;
    }

    .hero-brand {
        display: block;
    }

    .sec-head {
        gap: 18px;
    }

    .spec .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .news li {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/* ---- 動きを減らす設定: すべての動きを止める ---- */

@media (prefers-reduced-motion: reduce) {
    .headline .ln > span,
    .hero .lede,
    .hero .ctas,
    .sec.is-in .sec-head .rule::after,
    .sec .spec.is-in .row::after {
        animation: none;
    }

    .rv,
    .rv.is-waiting {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn:hover .arr,
    .btn.down:hover .arr,
    .product-video-link:hover img {
        transform: none;
    }

    .nav .links a,
    .btn,
    .btn .arr,
    .tlink,
    .product-video-link img,
    .product-video-play,
    .mail::after,
    .foot nav a,
    .sub-head .back,
    .toc a {
        transition: none;
    }
}

/* ---- 強制カラー（Windows のコントラスト テーマなど）: 塗りと色の差が消えても、印と現在地を見せる ---- */

@media (forced-colors: active) {
    /* 箇条書きの印は塗りで描いているので、線で描く */
    .doc-body ul > li::before {
        height: 0;
        border-top: 1px solid CanvasText;
        background: none;
    }

    /* 記号は塗りをマスクで切り抜いているので、強制カラーの文字の色で塗る */
    .warning::before,
    .error-msg::before {
        forced-color-adjust: none;
        background-color: CanvasText;
    }

    /* 現在地は塗りと色の差で示しているので、下線を引く */
    .nav .links a.is-current,
    .toc a.is-current {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* ---- 印刷: 白地に黒文字にし、画面のための部品と動きを出さない ---- */

@media print {
    /* ブラウザは既定で背景を印刷しないので、色はトークンごと紙の色に置き換える */
    :root {
        --paper: white;
        --paper-2: white;
        --paper-3: white;
        --bloom: white;
        --rule: silver;
        --rule-soft: silver;
        --ink: black;
        --text: black;
        --muted: black;
        --faint: black;
        --accent: black;
        --danger: black;
        color-scheme: light;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .nav,
    .toc,
    .signal,
    .sub-head .back {
        display: none;
    }

    .rv,
    .rv.is-waiting {
        opacity: 1;
        transform: none;
    }

    /* 画面いっぱいの高さと、信号の線のための下の余白を解く */
    .hero {
        min-height: 0;
        padding: 24px 0 32px;
    }

    /* ナビを出さないので、ブランド名はヒーローの上の小さな表示で出す */
    .hero-brand {
        display: block;
    }

    .sec {
        padding: 32px 0;
    }

    .product-video-link {
        box-shadow: none;
    }

    .doc.has-toc {
        display: block;
    }

    /* 箇条書きの印は塗りで描いているので、紙の上では同じ色の線で描く */
    .doc-body ul > li::before {
        height: 0;
        border-top: 1px solid var(--faint);
        background: none;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
    }

    .spec .row,
    .news li,
    .app {
        break-inside: avoid;
    }

    /* 塗りは印刷されないので、削除ボタンの文字を紙の上で読める色にする */
    .btn-delete {
        background: none;
        color: var(--ink);
    }
}