/* ============================================================
Jotslot ランディングページ スタイル
------------------------------------------------------------
方針:「紙とインク」。地は暖かい紙の色、文字はインクの黒、
差し色はインクブルー1色だけ。装飾で盛るのではなく、
**実際のノートの見た目（等幅・チェックボックス・日付）** を
そのまま見せて、何ができる道具かを伝える。
ただし1つ前の版は、地の色が最初から最後まで同じで、
**どこを読んでいるか分からない一本道**になっていた。
なので節ごとに地を交互に変え、いちばん大事な1節（feat--hero）
だけは色面ごと変えている。目が止まる場所を作るのが狙い。
外部から取ってくるものは0件（フォント・画像・ライブラリを含む）。
============================================================ */
/* ============================================================
1. 色と寸法のトークン
------------------------------------------------------------
明るい側を既定にして、暗い側は **OS の設定に従うときだけ**
値を差し替える。頁の中に外観の切り替えは持たない
（持つと、同じ割り当てを2箇所へ書くことになる）。
============================================================ */
:root {
color-scheme: light dark;
/* ---- 明るい側（既定） ---- */
--paper: #fbfaf7; /* 地。紙の色。真っ白にはしない */
--paper-2: #f0ece1; /* 節ごとの帯 */
--paper-3: #e6e3f2; /* 第3の地。帯よりさらに暗く、色みも寒い側へ振る */
--panel: #ffffff; /* カード・モック窓の中 */
--panel-2: #f7f5f0; /* 副パネル */
--ink: #15171c; /* 本文 */
--ink-2: #4e545e; /* 補足 */
--ink-3: #5e646e; /* 注記・番号・単位だけ。本文には使わない */
--line: #d6d1c3; /* 罫 */
--line-2: #c6c1b4; /* 濃い罫 */
--shade: #15171c; /* 濃淡（月カレンダー）の元色 */
--accent: #4a4be0; /* 差し色。リンクと強調はこれ1色 */
--accent-2: #7a4fe8; /* 差し色の相方。面のグラデーションだけに使う */
--accent-ink: #ffffff; /* 差し色の上に載る文字 */
--accent-soft: rgba(74, 75, 224, .09);
--warm: #9a4d19; /* 「残っている」側の色。使う場所は少ない */
--good: #20684a; /* 「済んだ」側の色 */
--btn-bg: #15171c;
--btn-fg: #fbfaf7;
--focus: #4a4be0;
/*
* 数字の帯（.stats）だけは、地の続きではなく **明暗を裏返した1本の帯**
* にする。明るい側では黒く、暗い側では逆にいちばん明るく。
* ヒーローの直後に「ここで話が変わる」印が1つ要る。
*/
--strip-bg: #14161c;
--strip-fg: #f6f5f1;
--strip-fg-2: #a7adb8;
--strip-line: #2c313c;
--strip-accent: #a5a6ff;
/*
* ここまでの4色（--ink-2 / --ink-3 / --warm / --good）は、
* **どの地の上でもコントラスト比 4.5:1 以上**になるように選んである。
* 比較表の ◎ △ × は飾りではなく中身そのものなので、薄くすると
* そこだけ読めない人が出る。色を触るときは必ず測り直すこと。
*
* **2026-08-27 に、明るい側の地と文字をまとめて動かした。**
* それまで --paper-2 と --paper-3 は **L* が 95.1 で完全に同じ**で、
* 色みだけ寒暖に振ってあった。暗い側は 4→11→13→19 と開けてあるのに、
* 明るい側は 98.3→95.1→95.1。**節が替わったことが見えていなかった。**
*
* ところが地を暗くするだけでは済まなかった。動かす前の時点で
* --ink-3 / --warm / --good は帯の上で 4.54 / 4.50 / 4.52 と
* **4.5 のすぐ上に張り付いていて**、地を暗くした瞬間に6箇所が割れる。
* だから地と一緒に、この3色も濃くしてある。**地だけ動かすと落ちる。**
*
* 今の値（最小コントラスト 4.72、ΔL* は paper→帯 4.8 / paper→第3 7.4）。
*/
--shadow-sm: 0 1px 2px rgba(20, 22, 28, .05), 0 2px 8px -4px rgba(20, 22, 28, .12);
--shadow: 0 1px 2px rgba(20, 22, 28, .05), 0 18px 44px -28px rgba(20, 22, 28, .38);
--shadow-lg: 0 2px 4px rgba(20, 22, 28, .05), 0 44px 90px -46px rgba(20, 22, 28, .5);
/* ---- 寸法 ---- */
--w: 1180px;
--w-narrow: 780px;
--r: 16px;
--r-lg: 22px;
--r-sm: 10px;
/* ナビの高さ。**中の CTA が入る大きさで決まる。** ボタンを大きくしたら
ここも上げないと、上下の余白が無くなって窮屈に見える。
ヒーローはこの値ぶん食い込ませてあるので、変えれば自動で追従する */
--nav-h: 68px;
--mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas,
"Hiragino Sans", "Noto Sans JP", monospace;
--sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans",
"Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", Meiryo,
system-ui, sans-serif;
}
/* 暗い側。**値を書くのはここだけ。** 上の明るい側と同じ並び順にしてある */
@media (prefers-color-scheme: dark) {
:root {
/*
* **地の明るさの幅を広げてある。** 1つ前の版は paper / paper-2 / panel が
* L* で 6 → 10 → 13 しか離れておらず、暗いときに節の変わり目が見えず、
* 頁の最初から最後まで1枚の黒い壁に見えた（実際にそう言われた）。
* 今は L* で 4 → 11 → 13 → 19 まで開いてある。
* ここを詰めると、また壁に戻る。
*/
--paper: #0b0d13; /* 黒にはしない。真っ黒は「暗い」ではなく「何も無い」に見える */
--paper-2: #191d28;
--paper-3: #1c2030; /* 第3の地。paper-2 より少しだけ明るく、色みも寒い側 */
--panel: #272d3b; /* カードは地からはっきり浮かせる。暗いと影が効かない */
--panel-2: #1b202b;
--ink: #eceef2;
--ink-2: #a5adba;
--ink-3: #9098a5; /* 地が明るくなったぶん、こちらも上げないと 4.5:1 を割る */
--line: #333c4c;
--line-2: #4a5468;
--shade: #eceef2;
--accent: #8f90ff;
--accent-2: #b18cff;
--accent-ink: #10111a;
--accent-soft: rgba(143, 144, 255, .14);
--warm: #e9a063;
--good: #4fbe8c;
--btn-bg: #eceef2;
--btn-fg: #0f1117;
--focus: #8f90ff;
/* 数字の帯は、暗いときは「いちばん明るい面」として出す */
--strip-bg: #333c4c;
--strip-fg: #f2f4f8;
--strip-fg-2: #b6bec9;
--strip-line: #4a5468;
--strip-accent: #b0b1ff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -4px rgba(0, 0, 0, .5);
--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 44px -26px rgba(0, 0, 0, .9);
--shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 44px 90px -44px rgba(0, 0, 0, 1);
}
}
/* ============================================================
2. 土台
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.85;
letter-spacing: .012em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
code { font-family: var(--mono); font-size: .9em; }
b, strong { font-weight: 700; color: var(--ink); }
kbd {
font-family: var(--mono); font-size: .78em; line-height: 1;
padding: .34em .52em; border: 1px solid var(--line-2); border-radius: 6px;
color: var(--ink-2); background: var(--panel); white-space: nowrap;
box-shadow: 0 1.5px 0 var(--line-2);
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* 貼りついたナビの下へ見出しが潜らないようにする */
section[id], article[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }
.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: var(--w-narrow); }
.center { text-align: center; }
/* 読み上げにだけ渡す文字 */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 本文へ飛ばすリンク（キーボード操作用） */
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--btn-bg); color: var(--btn-fg);
padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; text-decoration: none;
}
.skip:focus { left: 0; }
/* ============================================================
3. 見出しと本文
============================================================ */
/* 日本語は語の途中で折れると読みにくい。文節で折る指示を出しておく
（解さないブラウザでは、ただの折り返しに落ちるだけ）*/
.h2, .h3, .h4, .hero__title {
word-break: auto-phrase;
text-wrap: balance;
}
.h2, .h3, .h4 { margin: 0; font-weight: 700; letter-spacing: -.018em; }
/*
* いちばん持ち帰ってほしい語だけ差し色にする（見出しと、節の締め）。
* **1文に1箇所だけ。** 2箇所以上塗ると、どちらも目立たなくなり、
* 塗っていない語のほうが逆に浮く。色は差し色1色（--accent）で、
* どの地の上でも 4.5:1 を満たしている（§1 の測り直しを参照）。
*/
.hi { color: var(--accent); }
/*
* **日本語には、語の途中で折らないための仕組みが無い。**
* 放っておくと「迷う隙もな／く今日のノート」のように、意味の切れない
* ところで折れる。かといって
で固定すると、**その幅でだけ正しく、
* ほかの幅ではおかしい**という直し方になる。
*
* 句をひとまとまりにして、**折れてよい場所を句の間だけにする。**
* どこで折るかは browser が幅に応じて決めるので、端末ごとの分岐が要らない。
*
* 英語には付けない。**空白のところで自然に折れるうえ**、長い句を
* inline-block にすると折れずに溢れる。
*/
.nw { display: inline-block; }
/* 札を .74rem → .95rem（日本語）に上げたので、見出しも一緒に上げないと
ジャンプ率が落ちて、頁全体の起伏が平らになる。**片方だけ動かさない。** */
.h2 {
font-size: clamp(1.8rem, 5.8vw, 3.1rem);
line-height: 1.32; margin-bottom: 22px;
}
.h2--wide { max-width: 26ch; }
.center .h2--wide, .center .h2 { margin-left: auto; margin-right: auto; }
.h3 { font-size: clamp(1.3rem, 3.8vw, 1.85rem); line-height: 1.48; margin-bottom: 15px; }
.h4 { font-size: 1.05rem; line-height: 1.6; margin-bottom: 8px; }
/*
* 節の頭の小さな札。**ここが節の始まりだと、読む前に分かるようにする。**
* 1つ前の版は本文と同じ灰色で、流し読みでは見出しの上の余白に沈んでいた。
* 短い罫を1本前に置き、差し色を当てる。差し色はこの頁で1色しか無いので、
* 「これが出てきたら新しい話」がそのまま覚えられる。
*/
/*
* 節の札。**この頁で「いま何の話か」を言う唯一の場所。**
*
* 前は .74rem（11.8px）＋ 字間 .17em だった。**英大文字むけの数字。**
* FEATURES / PRICING のような綴りなら、その大きさと字間で締まって見える。
* ところが原本は日本語で、出るのは「他のやり方との違い」「使いどころ」。
* **漢字を 11.8px で .17em 空けると、一字ずつバラバラに見えて、
* 小さいうえに読みにくいという二重の負けになる。** 実際、流し読みで
* まったく目に入らないと言われた（2026-08-27）。
*
* なので言語で分ける。字間は日本語と英語で要る量が違う。
*/
.eyebrow {
margin: 0 0 14px; font-size: .8rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
display: flex; align-items: center; gap: 12px;
}
/* 日本語は字面がもともと詰まっている。英大文字と同じだけ空けない */
html[lang="ja"] .eyebrow { font-size: .95rem; letter-spacing: .04em; }
.eyebrow::before {
content: ""; flex: 0 0 auto; width: 26px; height: 2px;
background: currentColor; opacity: .85; border-radius: 2px;
}
/*
* **中央寄せの節では、線を左右に置く。**
* 線が左だけだと、flex の中身（線＋文字）は正しく中央にあるのに、
* 目が中心と見なすのは**文字**なので、線のぶん文字が右へずれて見える。
* 節の札は9つが中央寄せなので、ここが揃っていないと頁ぜんぶが右に傾く。
*/
.center .eyebrow::after {
content: ""; flex: 0 0 auto; width: 26px; height: 2px;
background: currentColor; opacity: .85; border-radius: 2px;
}
.center .eyebrow { justify-content: center; }
.lead { font-size: clamp(1.02rem, 2.5vw, 1.16rem); color: var(--ink-2); margin: 0 0 30px; }
.center .lead { margin-left: auto; margin-right: auto; max-width: 52ch; }
.body { font-size: 1rem; color: var(--ink-2); margin: 0 0 18px; }
.small { font-size: .93rem; color: var(--ink-2); margin: 0; line-height: 1.8; }
/* 印つきの箇条書き。チェック済みの記法を模した「—」を使う */
/*
* 渡したあとに訊けること。**「渡せます」で終わると、渡して何が起きるか
* が読む人の想像任せになる。** 実際に打つ言葉をそのまま並べる。
* 「1ヶ月分のノートを持っている自分」にしか訊けないものだけを選ぶこと ——
* どの AI にでも訊けることを並べると、記録がある意味が消える。
*/
.asks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.asks li {
position: relative; padding: 11px 15px 11px 36px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--panel-2); color: var(--ink);
font-size: clamp(.85rem, 2.4vw, .92rem); line-height: 1.7;
}
.asks li::before {
content: "›"; position: absolute; left: 15px; top: 10px;
color: var(--accent); font-weight: 700; font-size: 1.05em; line-height: 1.6;
}
.ticks { list-style: none; margin: 18px 0 0; padding: 0; }
.ticks li {
position: relative; padding-left: 27px; margin-bottom: 10px;
font-size: .95rem; color: var(--ink-2);
}
.ticks li::before {
content: ""; position: absolute; left: 1px; top: .62em;
width: 13px; height: 13px; border-radius: 4px;
border: 1.5px solid var(--line-2);
}
.ticks li::after {
content: ""; position: absolute; left: 4.5px; top: .86em;
width: 6px; height: 3px; border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
/* ============================================================
4. ナビ
============================================================ */
/*
* **開いた瞬間は、地のまま。** 一番上に居るあいだ、ナビの下には
* ファーストビューの続きしか無い。そこに面を1枚敷くと、**まだ何も
* 隠していないのに横一文字の帯が入る。** 帯は「上に何かが乗っている」
* という合図なので、乗っていないうちは出さない。
*
* 動かした瞬間に出す（`is-stuck`、8px から）。ここから先は本文が下を
* 通るので、面が無いと文字が重なって両方読めなくなる。
*
* **ぼかしも一緒に付け外しする。** 敷いていない面をぼかしても意味が
* 無いうえ、後ろ全部を合成させ続けることになる。
*/
.nav {
position: sticky; top: 0; z-index: 50;
background: transparent;
border-bottom: 1px solid transparent;
transition: background-color .22s, border-color .2s, box-shadow .2s;
}
.nav.is-stuck {
background: var(--paper); /* color-mix を解さない環境向け */
background: color-mix(in srgb, var(--paper) 82%, transparent);
backdrop-filter: saturate(1.5) blur(14px);
-webkit-backdrop-filter: saturate(1.5) blur(14px);
border-bottom-color: var(--line);
box-shadow: 0 1px 14px -8px rgba(0,0,0,.3);
}
.nav__inner { display: flex; align-items: center; gap: 16px; height: var(--nav-h); }
/* どこまで読んだか。長い頁は残りが見えないと離脱する */
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.nav__progress span {
display: block; height: 100%; width: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0); transform-origin: 0 50%;
}
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
/*
* アプリのアイコンそのものを出す（apple-touch-icon.png）。
* **別の絵を描き起こさない。** 探しているのは Dock や App Store で見た絵で、
* ここだけ似て非なる印を出すと、同じものだと分からない。
* 元は角の無い正方形（面いっぱい・透明なし）なので、角丸はここで付ける。
*/
.logo__mark {
display: block; border-radius: 22.4%; /* macOS のアイコンと同じ丸み */
box-shadow: 0 1px 2px rgba(20, 22, 28, .18);
}
.logo__text { font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; }
.logo--sm .logo__text { font-size: .96rem; }
.nav__links { display: flex; gap: 22px; margin-left: 28px; }
.nav__links a {
font-size: .89rem; color: var(--ink-2); text-decoration: none;
padding: 4px 0; border-bottom: 1.5px solid transparent; transition: color .15s, border-color .15s;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--accent); }
/*
* いま読んでいる節。**進捗の線は「あとどれくらいか」しか言わない。**
* 「いまどこか」は別の情報で、長い頁ではこちらのほうが要る
* （頁の組み立てが頭に入らない、と言われた 2026-08-27）。
* main.js が付ける。JS が動かなければ、今までどおり何も光らないだけ。
*/
.nav__links a.is-here { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
/* 節リンクを畳むスマホでも右端に寄るよう、押し出しは常にこちらが持つ */
/* 言語ボタンと CTA の間は広めに取る。**役割が違うものを、押し間違える
距離で並べない。** ここを詰めると、EN を押したい指が CTA に当たる */
.nav__right { position: relative; display: flex; align-items: center; gap: 16px; margin-left: auto; }
/*
* ナビの「無料で使う」を押したときに、その場で開く一覧。
*
* **前は末尾の #download へ飛んでいた。** ヒーローを見ている人が押すと、
* 頁のいちばん下まで一気に運ばれて、何が起きたのか分からなくなる
* （実際にそう言われた 2026-08-28）。**押した場所の近くで答える。**
*
* 中身は main.js がヒーローの一覧を複製して入れる。**HTML に3枚目の
* 複製を置かない** —— 3箇所に同じボタンがあると、必ず1箇所だけ古くなる。
*/
/*
* **中身はヒーロー・末尾と同じ組みにする。** 同じものが3箇所にあるので、
* ここだけ1列だったり、大きいボタンだけ平らだったりすると、
* **同じものだと分からない。**
* 幅は 2つ並んだボタン（212 + 12 + 212 = 436）＋ 内側の余白 28 で 464。
*/
.dlpop {
position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
width: min(94vw, 464px); padding: 14px 14px 18px;
background: var(--panel); border: 1px solid var(--line-2);
border-radius: var(--r); box-shadow: var(--shadow-lg);
/*
* **押した場所（右上）から開く。** 中央から出したり、ただ現れたり
* すると、どこから出たものか分からず、押したことと結びつかない。
*
* hidden ではなく visibility で隠す。**hidden（display:none）は
* 途中の姿を持てない**ので、消えるときが一瞬になる。visibility なら
* 出るときは即座に見え、消えるときは最後まで残る。
* 読み上げからも外れるのは hidden と同じ。
*
* 動きを減らす設定の人には一瞬で出る（§24 の一括指定が効く）。
*/
transform-origin: top right;
opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96);
transition: opacity .18s ease, transform .2s cubic-bezier(.2, .8, .3, 1), visibility .2s;
}
.dlpop.is-open { opacity: 1; visibility: visible; transform: none; }
.dlpop .dl__head { margin: 2px 0 14px; max-width: none; }
.dlpop .dl__item--alt { padding: 4px 2px; }
/*
* 言語ボタン。**外観（明/暗）の切り替えは置かない。**
* この頁の仕事はダウンロード1つで、変換に効かないボタンを CTA の隣に
* 並べると、唯一の押させたいものと注意を取り合う。暗い側は OS の設定に
* 従うだけにしてある。
*/
.langpick { position: relative; display: flex; }
.langbtn {
display: inline-flex; align-items: center; gap: 7px;
font: inherit; font-size: .82rem; font-weight: 700;
background: none; border: 1px solid var(--line-2); color: var(--ink-2);
border-radius: 100px; padding: 9px 13px; cursor: pointer; line-height: 1.3;
transition: color .15s, border-color .15s, background .15s;
}
.langbtn svg { fill: none; flex: 0 0 auto; }
.langbtn__caret { transition: transform .18s; opacity: .7; }
.langbtn[aria-expanded="true"] .langbtn__caret { transform: rotate(180deg); }
/*
* 言語の一覧。**押すと入れ替わる作りをやめた**（2言語でしか成り立たず、
* 3つ目が入った瞬間に破綻する）。中身は main.js が LANGS から組み立てる。
*
* 出方はダウンロードの一覧（.dlpop）と同じ —— **押した場所から開く。**
* 同じナビの中に、違う出方の板を2つ置かない。
*/
.langmenu {
position: absolute; top: calc(100% + 9px); right: 0; z-index: 60;
min-width: 172px; margin: 0; padding: 6px; list-style: none;
background: var(--panel); border: 1px solid var(--line-2);
border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
transform-origin: top right;
opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
transition: opacity .16s ease, transform .18s cubic-bezier(.2, .8, .3, 1), visibility .18s;
}
.langmenu.is-open { opacity: 1; visibility: visible; transform: none; }
.langmenu button {
display: flex; align-items: center; width: 100%;
font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
background: none; border: 0; color: var(--ink);
padding: 9px 12px; border-radius: 8px;
transition: background .14s, color .14s;
}
.langmenu button:hover { background: var(--accent-soft); }
/* いま出ている言語。**印を付ける。** 一覧に自分の言語が並ぶだけだと、
どれが今なのか分からず、同じものをもう一度押すことになる */
.langmenu button[aria-current="true"] { color: var(--accent); font-weight: 700; }
.langmenu button[aria-current="true"]::after { content: "✓"; margin-left: auto; padding-left: 12px; }
.langbtn:hover { color: var(--ink); border-color: var(--ink-3); background: var(--panel); }
/* 指で押す端末では、44px 角を下回らせない（縁は見た目のまま広げる） */
@media (hover: none) {
.langbtn { position: relative; }
.langbtn::after { content: ""; position: absolute; inset: -8px -6px; }
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
background: var(--btn-bg); color: var(--btn-fg);
font-weight: 700; font-size: .93rem; text-decoration: none;
padding: 11px 22px; border-radius: 100px; white-space: nowrap;
transition: transform .16s, box-shadow .16s, opacity .16s;
}
/*
* ナビの CTA。**頁を通してずっと出ている、唯一の押させたいもの。**
* 小さいと、言語ボタンと同じ「ついでの飾り」に見える。
*
* line-height を指定しているのは、**本文の 1.85 のままだと高さが
* 効きすぎる**ため。文字を大きくしたぶんが、そのまま縦にも効いて
* ナビからはみ出す。
*/
.btn--sm { font-size: .92rem; padding: 13px 26px; line-height: 1.45; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); opacity: .92; }
.btn--ghost {
background: transparent; color: var(--ink);
border: 1px solid var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink-3); background: var(--panel); }
/* ============================================================
5. ヒーロー
============================================================ */
/*
* **ナビの下まで、この節を伸ばす。**
*
* ナビを透かしただけでは足りない。透けた先に**地しか無い**ので、
* 上から 62px だけ別の色の帯が残る。ここを1枚の面にするには、
* 節そのものをナビの下へ潜らせる（負の余白）。潜らせたぶんは
* 内側の余白で戻すので、中身の位置は変わらない。
*
* **ここ（.hero）に書くこと。** ナビ側に書くと、ヒーローを持たない
* 規約やサポートの頁でも本文がナビの下へ潜る。
*/
.hero {
position: relative; overflow: hidden;
margin-top: calc(-1 * var(--nav-h));
/* **最初の画面は詰めない。** 見出しが 3.1rem まで育つので、周りを
16〜22px で切ると、字の大きさに対して息が詰まって見える */
padding: calc(var(--nav-h) + clamp(44px, 6vw, 76px)) 0 clamp(64px, 9vw, 104px);
}
/*
* 地に色を1つだけ置く。真っ平らな地面が最後まで続くのを避けるため。
*
* **重なりは数字で決めきる。** 地の絵 0 → 中身 1。書かないでおくと、
* 兄弟どうしの並びが `filter` や画面幅で入れ替わることがある。
*/
.hero__glow {
position: absolute; inset: -20% -10% auto -10%; height: 780px;
z-index: 0; pointer-events: none;
background:
radial-gradient(46% 52% at 18% 22%, var(--accent-soft), transparent 70%),
radial-gradient(40% 44% at 86% 8%, color-mix(in srgb, var(--warm) 12%, transparent), transparent 70%);
}
/*
* 暗いときは、端末が地に沈む。**絵の裏だけを明るくすると、そこだけ
* 切り抜いたように見えて、境目が出る。** ヒーロー全体を、ゆるく
* 明るいところと暗いところのある一枚の面にする。
* 階調の止め方は、途中に段を1つ入れて長い尾を引かせること。
* `色 → transparent` の一直線だと、終わりぎわに輪郭が出る。
*/
@media (prefers-color-scheme: dark) {
.hero__glow {
inset: -26% -12% auto -12%; height: 1220px;
background:
/* 文の側は、隅をかすめるだけ。**ここが一番明るいと、目が絵へ行かない** */
radial-gradient(50% 44% at 4% 8%,
color-mix(in srgb, var(--accent) 34%, transparent) 0%,
color-mix(in srgb, var(--accent) 10%, transparent) 40%,
transparent 76%),
/* いちばん強い光は、絵の後ろ */
radial-gradient(50% 48% at 72% 42%,
color-mix(in srgb, var(--accent) 40%, transparent) 0%,
color-mix(in srgb, var(--accent) 15%, transparent) 42%,
transparent 80%),
radial-gradient(44% 40% at 88% 74%,
color-mix(in srgb, var(--accent-2) 28%, transparent) 0%,
color-mix(in srgb, var(--accent-2) 10%, transparent) 44%,
transparent 82%);
}
}
/*
* 狭い画面では、文を中央に寄せて絵を下に置く。
* 広い画面では左右に分ける（下の 900px の節）。
*/
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); align-items: center; }
.hero__copy { text-align: center; }
.hero__visual { position: relative; }
.hero__title {
margin: 0 0 clamp(20px, 2.4vw, 28px); font-weight: 700;
font-size: clamp(2.05rem, 7.4vw, 3.55rem);
line-height: 1.24; letter-spacing: -.035em;
}
.hero__title { margin-left: auto; margin-right: auto; max-width: 22ch; }
.hero__title span { display: block; }
/*
* 2行目は「1行目の続き」ではなく **カテゴリの名乗り**（何のアプリか）。
* 役割が違うので、大きさも変える。1行目は言い切り、2行目は定義。
*
* **同じ大きさにすると崩れる。** 2行目は 1行目の倍近い長さがあり、
* 3.55rem のままだと半分の幅しかないヒーロー左段で2行に折れて、
* 見出しが4行になる。大きさを落とすのは装飾ではなく、収めるため。
*/
.hero__title-2 {
font-size: .5em; line-height: 1.5; letter-spacing: -.012em;
margin-top: .5em;
background: linear-gradient(96deg, var(--accent), var(--accent-2));
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
}
/* グラデーション文字を解さない環境では、ただの差し色に落ちる */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero__title-2 { color: var(--accent); -webkit-text-fill-color: currentColor; }
}
.hero .lead { max-width: 50ch; margin: 0 auto clamp(26px, 3.2vw, 36px); }
/* 狭い画面では中央（hero__copy が中央寄せ）。**広い画面では左** ——
すぐ上の「無料でダウンロード」の見出しが左端から始まるので、
ボタンだけ中央にあると、2つの塊が違う軸に乗って見える */
.hero .dl { justify-content: center; }
/* 押す直前の不安を、押す場所のすぐ下で消す */
.assure {
list-style: none; margin: 18px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.assure li {
position: relative; padding-left: 21px;
font-size: .84rem; color: var(--ink-2);
}
/*
* 端末の条件と公証。**✓ を付けない。**
* 押す理由（登録なし・カード不要）と同じ顔で並べると、本当の理由が
* ぼやける。ここは「知っておく事実」なので、小さく、印を付けずに置く。
*/
.assure li::before {
content: ""; position: absolute; left: 2px; top: .58em;
width: 9px; height: 5px; border-left: 2px solid var(--good);
border-bottom: 2px solid var(--good); transform: rotate(-45deg);
}
.assure { justify-content: center; }
.assure--center { margin-top: 26px; }
/* ============================================================
ヒーローの絵 —— アプリがやることを、そのまま順に見せる
------------------------------------------------------------
1. ホットキーが押される
2. 画面の左端にサイドバーが出る（今日のページ）
3. ビューを切り替えると、横へ伸びる（週）
4. 同じノートが、スマホにも出ている
**寸法は実物と同じ割合。** src/main/windows.ts の applyMainBounds が、
ウィンドウを作業領域の左端に全高で置き、幅だけビューごとに変える。
mainWidths は 今日 460 / 週 1180。1440 の画面に対して 32% と 82%。
ここで勝手な比率を使うと、**動きは格好よくても別のアプリの絵になる。**
動きは CSS だけで作ってある。JS が動かなくても、最後の姿で止まる。
============================================================ */
.hero__stage { position: relative; }
.stage {
position: relative;
aspect-ratio: 1440 / 900; /* 画面に見立てた台（13インチの MacBook の論理解像度）*/
container-type: inline-size;
}
/* ------------------------------------------------------------------
ひとまわり 19 秒。**1回だけ流して、最後は止める。**
ずっと動いていると、隣の文章が読めない。終わりは週の画面と
スマホが並んだ「製品の姿」で止め、もう一度見たい人のために
下にボタンを出す（押して効くと分かってから出す）。
0.2s キーが出る 7.6s 月へ（光がさっと1度なでる）
0.5s 押される・2拍 10.2s 細く戻る
1.2s 左からサイドバー 11.4s 今日とスマホが並ぶ
3.4s 横へ伸び始める 12.0s 行き来する印が往復
4.6s 伸びきる → 週へ 13.8s 寄りながら薄くなって重なる
16.4s 週とスマホで現れて、止まる
**止まった姿（.stage に .is-playing が付いていないとき）が基本。**
最後のキーフレームと同じにしてあるので、動きが終わっても飛ばない。
JS が動かない環境では、最初からこの姿で出る。
------------------------------------------------------------------ */
:root {
--stage-loop: 19s;
/* 窓の伸び縮み。行って戻るので、加速も減速も同じ形にする */
--stage-ease: cubic-bezier(.4, 0, .2, 1);
}
/* ---- 止まっている姿 ---- */
.stage__win {
/*
* **重なりの順を数字で決めきる。** 窓だけ z-index を書かずにいたら、
* 後ろに敷いた光（.stage::before）が窓の上に乗って、信号機ごと
* 塗り潰された。薄いうちは気づかないので「濃くしたら急に窓が消えた」
* という直り方をする。窓 1 → 行き来の印 2 → スマホ 3 → 札 4。
*/
position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
width: 94.4%; /* 1360 / 1440 */
border-radius: 6px; overflow: hidden;
background: var(--panel);
border: 1px solid var(--line);
box-shadow: var(--shadow);
will-change: width;
}
/*
* 暗い外観では、**ページの地・窓の背景・スマホの筐体がぜんぶ同じ黒**で、
* ファーストビュー全体が1枚の暗い板に見える。縁を立てるだけでは足りない
* （その縁も暗いので）。**窓の上端にだけ白を1本乗せる。** 上から光が
* 当たった縁になるので、平らな面ではなく厚みのある物として読める。
*
* 裏に敷く光のほうは `.hero__glow` に持たせてある。**ここ（.stage::before）
* には置かない。** 置いたら、窓の上に乗って Mac がまるごと消えた。
* しかも**画面幅で出方が変わる**（1280 では正しく後ろ、1440 では前）。
* 兄弟どうしの重なりは、`z-index` を書いても `filter` や層の作られ方で
* ひっくり返る。**地の絵にすれば、必ず中身より先に描かれる。**
*/
@media (prefers-color-scheme: dark) {
.stage__win {
border-color: rgba(255, 255, 255, .15);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18),
0 2px 10px rgba(0, 0, 0, .6),
0 34px 64px -26px rgba(0, 0, 0, .95);
}
}
.stage__shot {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: left top;
border: 0; border-radius: 0; box-shadow: none;
}
/*
* 今日の画面だけ `contain` にする。
* **窓が横に伸びるあいだ、中身は伸びない。** 実際のアプリも幅を広げてから
* 中身を差し替える（windows.ts の setMainView）。`cover` にすると
* 今日の画面が引き伸ばされて、別の絵になってしまう。
*/
.stage__shot--narrow { object-fit: contain; object-position: left top; opacity: 0; }
.stage__shot--month { opacity: 0; }
.stage__key, .stage__skel, .stage__link { opacity: 0; }
/*
* 信号機ボタン。**画面写真には写らない。**
* ブラウザで撮っているので、Electron が描くこの3つだけが入らない。
* アプリ側は左上に 88px 空けてある（`--titlebar-left`）ので、そこへ描く。
*
* **入れ物を正方形にして、その中を割合で置く。** 窓の幅はビューで変わるが
* 高さは変わらないので、高さと同じ辺を持つ正方形の中なら、縦も横も同じ
* 縮尺で決まる。窓の幅に対する % で置くと、伸びるたびに横へ流れる。
*/
.stage__lights {
position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1;
z-index: 3; pointer-events: none;
}
.stage__lights i {
position: absolute; top: 1.78%; /* 16px / 900 */
width: 1.33%; aspect-ratio: 1; /* 12px */
border-radius: 50%; display: block;
}
.stage__lights i:nth-child(1) { left: 1.56%; background: #ff5f57; } /* 14px */
.stage__lights i:nth-child(2) { left: 3.78%; background: #febc2e; } /* 34px */
.stage__lights i:nth-child(3) { left: 6.00%; background: #28c840; } /* 54px */
/*
* 伸びるあいだに敷く骨組み。実際のアプリは、そこに列を組み上げてから
* 中身を出す。**何も無い面が広がるだけだと、伸びていること自体が伝わらない。**
*/
.stage__skel {
position: absolute; inset: 0; overflow: hidden;
background:
linear-gradient(180deg, var(--panel-2) 0 5.5%, transparent 5.5% 12%, var(--panel-2) 12% 12.4%, transparent 12.4%),
repeating-linear-gradient(90deg,
transparent 0 calc(100% / 7 - 1px),
var(--line) calc(100% / 7 - 1px) calc(100% / 7));
}
.stage__skel::after {
content: ""; position: absolute; inset: -20% -40%;
background: linear-gradient(105deg,
transparent 38%, rgba(255, 255, 255, .62) 50%, transparent 62%);
opacity: 0;
}
/*
* 週 → 月 が替わった合図。
*
* **週と月は幅が変わらない**（どちらも 1360）ので、黙って中身だけ
* 入れ替えると、変わったことに気づかないまま通り過ぎる。
*
* 最初は「斜めの光が全面をなでる」形にしていたが、**暗い外観では
* 背景に馴染んで消える。** 明るさで気づかせようとすると、明るい外観では
* 今度は眩しくなる。**明るさではなく、動きで気づかせる。**
*
* 月は左から右へ**拭き出す**（`monthPlay` の `clip-path`）。この光は
* その拭き出しの**先端そのもの**で、境目を走る1本の線になる。
* 拭き出しと同じ刻み・同じ緩急にしてあるので、ぴたりと重なって進む。
* ずれると「光が通ったあとから絵が変わる」ように見えて、かえって怪しい。
*/
.stage__glint {
position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
}
/*
* **消すのは `::after` の側。** 親にも `opacity: 0` を掛けていたせいで、
* `::after` をいくら光らせても親ごと透明のまま、一度も見えていなかった。
* 動かす相手と、消しておく相手は同じ要素にする。
*/
.stage__glint::after {
content: ""; position: absolute; top: -1%; bottom: -1%; opacity: 0;
left: 0; width: 5.5%; margin-left: -2.75%;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--accent) 34%, transparent) 32%,
rgba(255, 255, 255, .96) 50%,
color-mix(in srgb, var(--accent) 34%, transparent) 68%,
transparent 100%);
}
@media (prefers-color-scheme: dark) {
.stage__skel::after {
background: linear-gradient(105deg,
transparent 38%, rgba(255, 255, 255, .14) 50%, transparent 62%);
}
/* 暗い外観では、線のまわりににじみを足す。細い線だけだと見落とす */
.stage__glint::after {
box-shadow: 0 0 26px 5px color-mix(in srgb, var(--accent) 42%, transparent);
}
}
/* ---- ホットキーの札 ---- */
/*
* **左端には置かない。** そこはサイドバーが出てくる場所で、重なると
* 「押した札の上に窓が乗る」という妙な絵になる。右寄りに置くと
* 「別の作業をしているところへ、左から出てくる」に見える。
*/
.stage__key {
position: absolute; z-index: 4; left: 56%; top: 38%;
display: inline-flex; gap: 4px;
padding: 10px 12px; border-radius: 14px;
background: var(--panel); border: 1px solid var(--line-2);
box-shadow: var(--shadow);
}
.stage__key kbd {
box-shadow: none; background: transparent; border-color: var(--line);
font-size: .86rem; padding: .38em .5em;
}
/*
* 押した瞬間の波紋。**2回打つ動きにはしない。**
* 既定の ⌃⌥N は1つの組み合わせなので、二度押しに見せると
* 間違った操作を教えることになる。1回の押しが2拍で響く形にする。
*/
.stage__ripple {
position: absolute; inset: -2px; border-radius: 16px;
border: 2.5px solid var(--accent); pointer-events: none; opacity: 0;
}
/* ---- 2台のあいだを行き来する印 ---- */
/*
* **一方通行にしない。** このアプリの同期は双方向で、
* 片道の矢印にすると「Mac からスマホへ送る道具」に見える。
*/
.stage__link {
position: absolute; z-index: 2;
left: 41%; right: 32%; top: 49%; height: 2px;
background: repeating-linear-gradient(90deg,
var(--accent) 0 5px, transparent 5px 11px);
}
.stage__link-dot {
position: absolute; top: 50%; left: 0;
width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
@media (max-width: 639px) { .stage__link { display: none; } }
/* ---- スマホ。枠は CSS で描く（画像は中身の画面だけ） ---- */
/*
* **大きさが変わるのは一度だけ。Mac が細くなるのと同時に育つ。**
*
* まずは「Mac の画面の上に置いた、ふつうの大きさのスマホ」として出す。
* 窓が全画面のあいだもスマホを同じ高さにすると**巨大な板**に見えて、
* 手に持つものだと伝わらない。窓が今日の幅へ戻るところで肩の高さが
* 揃うまで育てる。並べて見せるのは、そこから先だけでいい。
*
* 育て方は `scale()`。幅を動かすと枠の余白（padding）だけが取り残されて、
* 小さいときの縁が不自然に太くなる。倍率なら縁も角も同じ割合で動く。
* **起点は右下。** 右端と下端に貼りついたまま、左上へ向かって育つ。
*
* **止め絵は、肩を揃えた大きさより少し低い**（`--phone-rest`）。動きの
* 途中で一度きっちり揃えておけば「同じものが両方にある」は伝わる。
* 止まった絵でも同じ高さにすると、スマホが Mac と同じ大きさの板に見えて、
* 写真として不自然になる。
*/
.stage__phone {
--phone-rest: .88;
position: absolute; z-index: 3; display: block;
right: 0.5%; bottom: 0; transform-origin: 100% 100%;
transform: scale(var(--phone-rest));
width: 29.7%; padding: 5px;
background: #101116;
border-radius: 24px;
box-shadow:
0 0 0 1px rgba(255, 255, 255, .10) inset,
0 2px 6px rgba(20, 22, 28, .35),
0 24px 46px -20px rgba(20, 22, 28, .6);
}
.stage__phone .stage__shot { position: relative; inset: auto; height: auto; border-radius: 19px; object-fit: fill; }
/*
* ノッチ（Dynamic Island）。**px で置かない。**
* 大きさを変えるたびに、中の文字へ被るかどうかが変わる。
* 画面写真の側は上を 56px 空けて撮ってあるので、比率で置けば必ず余白に収まる。
*/
.stage__island {
position: absolute; z-index: 4; top: 2.4%; left: 50%; transform: translateX(-50%);
width: 25%; aspect-ratio: 3.5 / 1; border-radius: 100px; background: #101116;
}
@media (max-width: 639px) { .stage__phone { display: none; } }
@media (min-width: 1160px) {
.stage__phone { padding: 6px; border-radius: 28px; }
.stage__phone .stage__shot { border-radius: 22px; }
}
/* ---- もう一度見るボタン ---- */
/*
* **札が出ても、下が動かないようにする。** 流れ終わってから出すので、
* 場所を空けておかないと、その瞬間にページ全体が数十 px ずれる。
*/
/* 絵とボタンの間は広めに。**絵の一部に見えると、押すものだと分からない** */
.stage__replay { margin: clamp(26px, 3.5vw, 40px) 0 0; text-align: center; min-height: 34px; }
.stage__replay-btn {
display: inline-flex; align-items: center; gap: 7px;
font: inherit; font-size: .8rem; color: var(--ink-3);
background: none; border: 1px solid var(--line); border-radius: 100px;
padding: 6px 14px; cursor: pointer; line-height: 1.5;
transition: color .15s, border-color .15s;
}
.stage__replay-btn:hover { color: var(--ink-2); border-color: var(--line-2); }
.stage__replay-btn svg { fill: none; }
/* ==================================================================
ここから下が「1回だけ流す」ぶん。**.is-playing が付いている間だけ動く。**
================================================================== */
.stage.is-playing .stage__win { animation: winPlay var(--stage-loop) var(--stage-ease) 1 both; }
.stage.is-playing .stage__shot--narrow { animation: todayPlay var(--stage-loop) ease-in-out 1 both; }
.stage.is-playing .stage__shot--wide { animation: weekPlay var(--stage-loop) ease-in-out 1 both; }
.stage.is-playing .stage__shot--month { animation: monthPlay var(--stage-loop) ease-in-out 1 both; }
.stage.is-playing .stage__skel { animation: skelPlay var(--stage-loop) ease-in-out 1 both; }
.stage.is-playing .stage__skel::after { animation: sheenPlay var(--stage-loop) cubic-bezier(.35,.05,.2,1) 1 both; }
.stage.is-playing .stage__glint::after { animation: glintPlay var(--stage-loop) cubic-bezier(.2,.5,.4,1) 1 both; }
.stage.is-playing .stage__key { animation: keyPlay var(--stage-loop) ease-out 1 both; }
.stage.is-playing .stage__ripple { animation: ripplePlay var(--stage-loop) ease-out 1 both; }
.stage.is-playing .stage__ripple--2 { animation-name: ripplePlay2; }
.stage.is-playing .stage__link { animation: linkPlay var(--stage-loop) ease-in-out 1 both; }
.stage.is-playing .stage__link-dot { animation: linkDotPlay var(--stage-loop) ease-in-out 1 both; }
.stage.is-playing .stage__phone { animation: phonePlay var(--stage-loop) var(--stage-ease) 1 both; }
@keyframes winPlay {
0%, 6.3% { width: 38.9%; opacity: 0; transform: translateX(-14%); } /* 560 / 1440 */
10.5% { width: 38.9%; opacity: 1; transform: translateX(0); }
/*
* **今日のまま止めておく間は、短く。**
* 19s の輪では 10.5% = 2.0秒、17.9% = 3.4秒。**1.4秒も動かないと、
* 絵が止まったように見える**（実際にそう言われた 2026-08-27）。
* 13.2% = 2.5秒にして、止まりを 0.5秒まで詰めた。
* かわりに伸びる時間そのものを長くしてある（1.2秒 → 1.6秒）ので、
* 早く動き出すのに、慌ただしくはならない。
*
* **ここを動かしたら、todayPlay / weekPlay / skelPlay / sheenPlay /
* phonePlay の刻みも一緒に動かすこと。** 片方だけだと、絵が入れ替わる
* 前に骨組みが消えたり、光だけが先に走ったりする。
*/
13.2% { width: 38.9%; opacity: 1; transform: translateX(0); } /* 今日を読む間 */
21.5% { width: 94.4%; opacity: 1; transform: translateX(0); } /* 1360 / 1440 */
53.7% { width: 94.4%; opacity: 1; transform: translateX(0); }
60% { width: 38.9%; opacity: 1; transform: translateX(0); } /* また細く */
72.6% { width: 38.9%; opacity: 1; transform: translateX(0); } /* 並んで、行き来する */
/* **寄りながら薄くなる。** 寄りきってから消すと、重なった一瞬だけ
絵が2枚ぶん濃くなり、そこで動きが止まって見える */
76% { width: 38.9%; opacity: .8; transform: translateX(30%); }
80% { width: 38.9%; opacity: .3; transform: translateX(55%); }
82.1% { width: 38.9%; opacity: 0; transform: translateX(68%); }
/* 見えていないあいだに、止まる姿へ戻しておく */
86.3% { width: 94.4%; opacity: 0; transform: translateX(0); }
92.6%,100% { width: 94.4%; opacity: 1; transform: translateX(0); }
}
@keyframes todayPlay {
0%, 21.5% { opacity: 1; }
23.5%, 56% { opacity: 0; }
60%, 82.1% { opacity: 1; }
86.3%,100% { opacity: 0; }
}
/*
* 週は、月が拭き終わるまで下に敷いたままにする。先に消すと、
* 拭いている途中の右半分が**空っぽの面**になる。
*/
@keyframes weekPlay {
0%, 21.5% { opacity: 0; }
23.5%, 43.5% { opacity: 1; }
45%, 84% { opacity: 0; }
86.3%,100% { opacity: 1; }
}
/*
* 月は左から右へ拭き出す。**重ねて薄く入れ替えない。**
* 同じ幅・同じ枠の絵どうしを薄く入れ替えても、変わったことが分からない。
* 拭き出しなら、明るさに頼らずに「いま替わった」が伝わる。
* 刻みと緩急は `glintPlay`（先端の光）と揃えること。
*/
@keyframes monthPlay {
0%, 38.9% { opacity: 0; clip-path: inset(0 100% 0 0); }
39% { opacity: 1; clip-path: inset(0 100% 0 0);
animation-timing-function: cubic-bezier(.25, .55, .3, 1); }
43.5% { opacity: 1; clip-path: inset(0 0 0 0); }
53.7% { opacity: 1; clip-path: inset(0 0 0 0); }
57%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes skelPlay {
0%, 13.2% { opacity: 0; }
15%, 19% { opacity: .8; }
23.5%,100% { opacity: 0; }
}
@keyframes sheenPlay {
0%, 13.7% { transform: translateX(-75%); opacity: 0; }
15.2% { opacity: 1; }
21.5% { transform: translateX(75%); opacity: 1; }
23.5%,100% { transform: translateX(75%); opacity: 0; }
}
/*
* 拭き出しの先端を走る光。**`monthPlay` と同じ刻み・同じ緩急にする。**
* 片方だけ直すと光と境目がずれて、絵が変わる前後に光だけが通る。
*
* `left` で動かすのは、拭き出しの `inset()` と**同じ入れ物に対する割合**
* だから。`translateX` の % は自分の幅が基準なので、ぴたりと重ならない。
*/
@keyframes glintPlay {
0%, 38.9% { left: 0; opacity: 0; }
39% { left: 0; opacity: 1;
animation-timing-function: cubic-bezier(.25, .55, .3, 1); }
43.5% { left: 100%; opacity: 1; }
44.8%,100% { left: 100%; opacity: 0; }
}
@keyframes keyPlay {
0% { opacity: 0; transform: scale(.82); }
1.2% { opacity: 1; transform: scale(1.06); } /* パッと出る */
1.9% { opacity: 1; transform: scale(1); }
2.4% { opacity: 1; transform: scale(1); }
2.9% { opacity: 1; transform: scale(.9); } /* 押される */
3.5% { opacity: 1; transform: scale(1); }
4.4% { opacity: 1; transform: scale(1); }
5.3%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes ripplePlay {
0%, 2.7% { opacity: 0; transform: scale(1); }
3.2% { opacity: .9; transform: scale(1); }
6.0%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes ripplePlay2 {
0%, 3.9% { opacity: 0; transform: scale(1); }
4.3% { opacity: .55; transform: scale(1); }
7.3%, 100% { opacity: 0; transform: scale(2.1); }
}
@keyframes linkPlay {
0%, 62% { opacity: 0; }
64%, 71% { opacity: .8; }
72.6%,100% { opacity: 0; }
}
@keyframes linkDotPlay {
0%, 63% { left: 0%; opacity: 0; }
64.5% { left: 0%; opacity: 1; }
68% { left: 100%; opacity: 1; }
71.5% { left: 0%; opacity: 1; }
72.6%,100% { left: 0%; opacity: 0; }
}
@keyframes phonePlay {
0%, 23.5% { opacity: 0; transform: translate(0, 8%) scale(.7); }
30.5% { opacity: 1; transform: translate(0, 0) scale(.7); }
/* ここまでは、広げた画面の上に置いたふつうの大きさのスマホ */
53.7% { opacity: 1; transform: translate(0, 0) scale(.7); }
/* 窓が今日の幅へ戻るのと同時に、肩の高さが揃うまで育つ */
60% { opacity: 1; transform: translate(0, 0) scale(1); }
72.6% { opacity: 1; transform: translate(0, 0) scale(1); }
/* 窓と同じ速さで、同じだけ薄くなる。互いに溶けて1つに見える */
76% { opacity: .8; transform: translate(-48%, 0) scale(1); }
80% { opacity: .3; transform: translate(-82%, 0) scale(1); }
82.1% { opacity: 0; transform: translate(-100%, 0) scale(1); }
/* 重なって消えているあいだに、止め絵の大きさへ戻す（変わる瞬間は見えない） */
86.3% { opacity: 0; transform: translate(0, 0) scale(var(--phone-rest)); }
92.6%,100% { opacity: 1; transform: translate(0, 0) scale(var(--phone-rest)); }
}
/* 暗い外観では、黒い筐体がアプリの黒い画面に溶けて**枠が消える。**
枠が消えると、ただの四角い切り抜きにしか見えない。縁を1本立てる。 */
@media (prefers-color-scheme: dark) {
.stage__phone {
background: #000;
box-shadow:
0 0 0 1px rgba(255, 255, 255, .24),
0 2px 8px rgba(0, 0, 0, .7),
0 26px 50px -18px rgba(0, 0, 0, .95);
}
.stage__island { background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
}
/* 狭い画面ではスマホを出さない。重ねるとどちらも読めなくなる */
@media (max-width: 639px) { .stage__phone { display: none; } }
@media (min-width: 1160px) {
/* **幅は変えない。** 肩を揃える計算（32%）が幅に乗っている */
.stage__phone { padding: 6px; border-radius: 28px; }
.stage__phone .stage__shot { border-radius: 22px; }
}
/*
* **動きを減らす設定では、順番を見せずに最後の姿だけ出す。**
* 一段ずつ現れるのは、酔う人には毒になる。
*/
@media (prefers-reduced-motion: reduce) {
/* **順番を見せず、止まった姿だけ出す。**
.is-playing は main.js が付けないので、ここは念のための止め。 */
.stage.is-playing * { animation: none !important; }
.stage__key, .stage__skel, .stage__glint, .stage__link { display: none; }
}
/* ============================================================
6. 画像の差し替え口（.ph）
------------------------------------------------------------
![]()
が読めるまで／読めないときは、中の .ph__fb（CSS で組んだモック）
をそのまま出す。**画像が1枚も無くてもページは完成して見える。**
img は最初 opacity:0 で重ねてあり、読めたときだけ前に出る。
============================================================ */
.ph { position: relative; margin: 0; }
.ph__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0; z-index: 2;
border-radius: var(--r); border: 1px solid var(--line);
box-shadow: var(--shadow);
transition: opacity .3s;
}
/* 実写が来たら、縦横比は写真そのものに任せる。
置く前の枠に合わせて切り取ると、**撮った画面の端が消える。** */
.ph.is-ready .ph__img {
position: relative; opacity: 1; height: auto;
aspect-ratio: auto; object-fit: fill;
}
.ph.is-ready .ph__fb { display: none; }
/* 読めなかったことがはっきり分かるようにする。
埋め忘れたまま公開されるのが一番まずい（法務ページの .todo と同じ考え方）*/
.ph.is-empty .ph__img { display: none; }
/*
* 動画の差し替え口。**img とまったく同じ場所に重ねる。**
* 使い方の3手だけは、静止画では示せないものを見せる ——
* 「切り替わっていない」「保存を押していない」は、前後が繋がって
* 初めて分かる。docs/landing.md が「再現では埋まらない」と書いている穴。
*/
.ph__vid {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0; z-index: 2;
border-radius: var(--r); border: 1px solid var(--line);
box-shadow: var(--shadow); transition: opacity .3s;
}
.ph.is-ready .ph__vid { position: relative; opacity: 1; height: auto; aspect-ratio: auto; }
.ph.is-empty .ph__vid { display: none; }
.ph--step .ph__vid { aspect-ratio: 8 / 5; }
/*
* 差し替え待ちの札。**CSS モックには出さない。**
* モックはそれ自体で完成した絵として通用するので、札を出すと
* 出来上がっているものまで未完成に見える。写真が要る枠にだけ出す。
*/
.ph.is-empty .ph__fb--key::after,
.ph.is-empty .ph__fb--use::after {
content: "画像未設定";
position: absolute; z-index: 4; right: 10px; bottom: 10px;
padding: 2px 9px; border-radius: 100px;
font-size: .6rem; font-weight: 700; letter-spacing: .08em;
background: var(--panel); color: var(--ink-3); border: 1px dashed var(--line-2);
pointer-events: none;
}
.ph__fb { position: relative; }
/* 画像が来る場所に、絵の代わりの面だけ置くもの（写真枠） */
.ph__fb--key, .ph__fb--key { aspect-ratio: 8 / 5; }
.keycap { display: inline-flex; gap: 6px; transform: scale(1.35); }
.keycap kbd { font-size: .82rem; padding: .5em .6em; }
.keycap--wide { min-width: 4.6em; text-align: center; }
/* ============================================================
7. 数字の帯
============================================================ */
/*
* **ここだけ明暗を裏返す。** 明るい側では黒い帯、暗い側ではいちばん明るい帯。
* ヒーローの直後に置く「話が変わった」印で、頁で最初に目が止まる場所になる。
*
* 色は .feat--hero と同じやり方で、**この節の中だけトークンを差し替える**。
* 個々の部品（.stat / .stat__n / .stat__l）の色指定は 1 行も触らない。
* 触ると、同じ割り当てが2箇所に散る。
*/
.stats {
border-top: 1px solid var(--strip-line); border-bottom: 1px solid var(--strip-line);
background: var(--strip-bg);
color: var(--strip-fg);
--panel: var(--strip-bg);
--panel-2: var(--strip-bg);
--ink: var(--strip-fg);
--ink-2: var(--strip-fg-2);
--ink-3: var(--strip-fg-2);
--line: var(--strip-line);
--line-2: var(--strip-line);
--accent: var(--strip-accent);
/* 明るい側の accent-soft は白地むけの薄さで、この暗い帯では消える */
--accent-soft: rgba(255, 255, 255, .09);
}
/* 3つ。**狭い画面では縦に積む。** 3列のまま詰めると、
数字の下の説明が1語ずつ折れて読めなくなる */
.stats__grid {
display: grid; grid-template-columns: 1fr;
gap: 0; padding: 0;
}
/*
* 仕切りは罫として引く。**隙間から下地を覗かせない。**
* 覗かせる作りだと、中身が現れる前（.rv がまだ隠れている間）に
* 灰色の板が1枚出てしまう。
*/
/*
* **絵は数字の左。上ではない。**
* 上下に積むと、(1) 1マスが 120px を超えて「帯」に見えなくなる、
* (2) 絵と数字が別々の飾りに見えて、絵が数字を説明している関係が切れる。
* 横に置くと、狭い画面で縦1列に積んだときも 1行 = 1項目になって読みやすい。
*/
/*
* 1段目に **絵と数字を肩の高さで並べ**、2段目の説明は
* **絵の下から**始める。
*
* 説明を数字の真下（＝絵の右）から始めると、絵のぶんだけ字下げされた
* 帯ができて、**3マスの左端が揃わない。** 説明は左端まで使わせる。
*/
.stat {
display: grid; grid-template-columns: auto 1fr;
align-items: center; column-gap: 13px; row-gap: 7px;
background: var(--panel); padding: 20px 22px; text-align: left;
border-right: 0; border-bottom: 1px solid var(--line);
}
.stat__l { grid-column: 1 / -1; }
.stat:last-child { border-bottom: 0; }
/*
* **数字だけでは、何を測った数字なのか分からない**（実際にそう言われた
* 2026-08-27）。絵と、平たい言葉と、数字の3つで言う。**どれか1つでも
* 伝われば意味が届く**ようにしてある。
*/
.stat__icon {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
background: var(--accent-soft); color: var(--accent);
}
.stat__icon svg { fill: none; }
.stat__n {
margin: 0; font-family: var(--mono); font-weight: 700;
font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -.03em; line-height: 1.2;
color: var(--ink); display: flex; align-items: baseline; gap: 2px;
}
.stat__u { font-size: .62em; color: var(--ink-3); font-weight: 700; }
.stat__u--lead { margin-right: 0; }
.stat__l { margin: 0; font-size: .78rem; color: var(--ink-3); line-height: 1.6; }
/* ============================================================
8. 節の土台
============================================================ */
/* 節の切れ目は、地の色（§1）と**この余白**の2つで出している。
詰めると、色を替えても「次の話が始まった」に見えない */
.section { position: relative; padding: clamp(72px, 9vw, 124px) 0; }
.section--tight { padding-top: clamp(50px, 6vw, 78px); }
/* 次の節へ話が続くとき、間を空けすぎない（課題 → その答え、など）*/
.section--tight-b { padding-bottom: clamp(28px, 4vw, 46px); }
/*
* 次の節へ話が**そのまま続く**ところに置く印。
*
* 課題の締め（…今日のノートを開きます）と、その次の「使い方」は
* 続き物なのに、**地の色が変わった時点で、そこで話も切れて見える。**
* 上の節の地を三角で下へ伸ばして、続いていることを面で言う。
*
* 色は `--paper`（上の節の地）。**下の節の色にしない** ——
* 下の色で描くと「次の節がせり上がってきた」に見えて、向きが逆になる。
* 言いたいのは「上の話が、下へ入っていく」ほう。
*
* 罫（border）ではなく三角を作れる古い書き方にしてある。clip-path より
* 通る先が広く、**この頁は外から何も取ってこない**方針とも合う。
*/
/*
* **2枚重ねる。** 地どうしの明るさの差は ΔL* で 5 程度しかないので、
* 面だけだと小さいうちは色の滲みに見える。後ろに1回り大きい罫色の
* 三角を敷いて、斜めの2辺に髪の毛ほどの線を出す。**線が出た瞬間に、
* 色の差ではなく「形」として読まれる。**
*/
.section--tip::before,
.section--tip::after {
content: ""; position: absolute; left: 50%; bottom: 0;
width: 0; height: 0; transform: translate(-50%, 100%);
border-left-style: solid; border-right-style: solid; border-top-style: solid;
border-left-color: transparent; border-right-color: transparent;
}
.section--tip::before {
z-index: 2;
border-left-width: clamp(28px, 4.7vw, 42px);
border-right-width: clamp(28px, 4.7vw, 42px);
border-top-width: clamp(24px, 3.8vw, 36px);
border-top-color: var(--line-2);
}
.section--tip::after {
z-index: 3;
border-left-width: clamp(27px, 4.55vw, 40px);
border-right-width: clamp(27px, 4.55vw, 40px);
border-top-width: clamp(22px, 3.6vw, 34px);
border-top-color: var(--paper);
}
/*
* **地の色だけに頼らない。** 節の変わり目には必ず罫を引く。
* 暗いときは地の差が数％しか無く、罫が無いと境目が消える。
* 罫があれば、色の差が小さくても「ここで部屋が変わった」は伝わる。
*/
.section--band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 帯が続くときは、直前の帯の下罫がそのまま仕切りになる。2本引かない */
.section--band + .section--band { border-top: 0; }
/*
* 第3の地。**A / B の2色だけだと、長い頁は交互というだけで単調になる。**
* 明るさは帯と同じにして、色みだけ寒い側へ振ってある（明るさで差をつけると、
* 明るい側で文字のコントラストが 4.5:1 を割る余地がもう無い）。
* 使うのは「比較」と「価格」の2節だけ。増やすと、また平らになる。
*/
.section--tint { background: var(--paper-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tint + .section--tint { border-top: 0; }
/* ============================================================
9. 課題提起
============================================================ */
/* 摩擦を「時間が溶けていく道のり」として横に見せる */
.path {
list-style: none; margin: clamp(34px, 5vw, 52px) 0 clamp(44px, 6vw, 64px); padding: 0;
display: grid; grid-template-columns: 1fr; gap: 10px;
counter-reset: none;
}
/*
* **問いを太く、状況を細く。** 問いだけ並べても、読む人は
* 「そんなに困ってないけど」で通り過ぎる。何秒か止まるのは、
* その下の状況（タブの山、フォルダをたどる）に見覚えがあるとき。
*/
.path__step {
position: relative; display: flex; flex-direction: column; gap: 9px;
padding: 18px 20px 20px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--panel);
}
/* 番号のすぐ横に問いを置く。**番号だけの行を作らない** ——
1枚のうち何を読めばいいかが、目を落とした瞬間に決まる */
.path__head { display: flex; align-items: center; gap: 11px; }
.path__head .path__t { flex: 1 1 auto; }
.path__head .path__c { flex: 0 0 auto; }
.path__t {
font-size: clamp(1.02rem, 2.9vw, 1.16rem); font-weight: 700;
line-height: 1.55; color: var(--ink);
}
.path__d { font-size: .82rem; line-height: 1.8; color: var(--ink-3); }
.path__n {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: .72rem; font-weight: 700;
background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line);
}
.path__c {
flex: 0 0 auto; font-family: var(--mono); font-size: .74rem;
color: var(--warm); font-weight: 700;
}
/*
* 4つ目は、並びから外して1枚で置く。**1〜3 はアプリが訊いてくること、
* 4つ目は、その結果あなたが自分に訊くこと**で、種類が違う。
* 同じ列に4つ並べると「ただの4段目」に見えて、落ちにならない。
*/
.path__then {
margin: clamp(26px, 3.6vw, 38px) 0 14px; text-align: center;
font-size: clamp(1rem, 2.8vw, 1.14rem); font-weight: 700;
line-height: 1.7; color: var(--ink);
}
.path__lost {
display: flex; align-items: center; justify-content: center;
gap: clamp(12px, 2.5vw, 20px); flex-wrap: wrap;
margin: 0 auto; max-width: 620px; padding: 20px 24px;
border: 1px dashed var(--line-2); border-radius: var(--r-sm);
color: var(--ink-3); font-size: clamp(.95rem, 2.6vw, 1.06rem);
}
.path__lost .path__t { font-style: italic; }
.path__lost .path__c { font-style: normal; }
.turn {
margin: clamp(38px, 5vw, 54px) 0 0; text-align: center;
font-size: clamp(1.25rem, 4vw, 1.7rem);
font-weight: 700; line-height: 1.55; letter-spacing: -.02em;
}
/* ============================================================
11. 使い方は3手
============================================================ */
.steps {
display: grid; grid-template-columns: 1fr; gap: 22px;
margin-top: clamp(38px, 5vw, 56px);
}
.step {
position: relative; padding: 26px 24px 24px;
border-radius: var(--r); border: 1px solid var(--line); background: var(--panel);
box-shadow: var(--shadow-sm);
}
.step__n {
margin: 0 0 12px; font-family: var(--mono); font-size: .78rem; font-weight: 700;
letter-spacing: .12em; color: var(--accent);
}
.step .ph { margin-top: 20px; }
.step .ph__img, .step .ph__fb--key { border-radius: var(--r-sm); }
.ph--step .ph__img { aspect-ratio: 8 / 5; }
/* 最後の CTA の、いま押す理由。煽らないので、小さく1行だけ */
.cta__why {
margin: -14px 0 26px; font-size: .92rem; font-weight: 700; color: var(--accent);
}
/* ============================================================
12. 機能
============================================================ */
.feat { position: relative; padding: clamp(42px, 6vw, 74px) 0; }
.feat--alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat__inner { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
/* 絵のすぐ下に置く1行。**絵の説明ではなく、絵の中で何が起きたかを言う。**
ここでは「同じ1枚に3種類あること」と「もう向こうにも入っていること」 */
.feat__cap {
margin: 12px 0 0; text-align: center;
font-size: clamp(.78rem, 2.3vw, .86rem); line-height: 1.75; color: var(--ink-2);
}
.feat__kicker {
margin: 22px 0 0; padding: 15px 18px; border-radius: var(--r-sm);
border-left: 3px solid var(--accent);
background: var(--accent-soft);
font-size: .95rem; color: var(--ink-2);
}
/*
* 03 だけ地と文字を反転させる。ここがこのアプリの核なので、
* 節そのものを別の色面にして、流し読みでも目が止まるようにしている。
* **明暗どちらの外観でも同じ濃紺**にする。ここは「地の続き」ではなく、
* ページの中の別の部屋であってほしいため。
*/
.feat--hero {
position: relative; overflow: hidden;
padding: clamp(56px, 8vw, 104px) 0;
background: linear-gradient(152deg, #191c3d 0%, #16182f 46%, #201a3c 100%);
color: #eceef6;
--paper: #191c3d; --paper-2: #191c3d; --panel: #22254a; --panel-2: #1c1f3f;
--ink: #f4f5fb; --ink-2: #b8bdd8; --ink-3: #8990b4;
--line: #2e3260; --line-2: #444a80; --shade: #eceef6;
--accent: #a5a6ff; --accent-2: #c5a8ff; --accent-soft: rgba(165,166,255,.14);
--btn-bg: #f4f5fb; --btn-fg: #191c3d;
--shadow: 0 2px 4px rgba(0,0,0,.4), 0 40px 80px -44px rgba(0,0,0,1);
--shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px -5px rgba(0,0,0,.6);
}
.feat__hero-glow {
position: absolute; inset: auto -10% -40% -10%; height: 560px; pointer-events: none;
background:
radial-gradient(40% 60% at 22% 100%, rgba(165,166,255,.20), transparent 70%),
radial-gradient(36% 56% at 82% 0%, rgba(197,168,255,.16), transparent 70%);
}
.feat--hero .wrap { position: relative; z-index: 1; }
.feat--hero .h2 { max-width: 16ch; }
/*
* 見出しの右の空きに、渡せる相手を浮かべる。
*
* **ロゴではなく名前。** 各社のロゴは公式の配布物を使う決まりがあり、
* こちらで描いた近似を出すのは、公式のふりをすることになる
* （App Store / Google Play のバッジと同じ話）。公式の SVG を
* images/ai/ に置けるようになったら、 の中身を ![]()
に替える。
*
* ふわふわ動くのは、**相手が1つに決まっていないことを動きで言う**ため。
* 動きを減らす設定の人には止まる（§ 冒頭の一括指定が効く）。
*/
.feat__head { margin-bottom: 22px; }
.feat__head .h2 { margin-bottom: 0; }
@media (min-width: 900px) {
.feat__head {
display: grid; grid-template-columns: auto minmax(0, 1fr);
gap: clamp(24px, 4vw, 52px); align-items: center;
}
}
.orbit { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 11px 12px; }
@media (min-width: 900px) { .orbit { margin: 0; justify-content: center; } }
.orbit li {
padding: 8px 16px; border-radius: 100px; white-space: nowrap;
border: 1px solid var(--line-2); background: var(--panel);
color: var(--ink); font-size: .84rem; font-weight: 700;
box-shadow: var(--shadow-sm);
animation: drift 6.5s var(--d, 0s) ease-in-out infinite alternate;
}
@keyframes drift {
from { transform: translateY(calc(var(--o, 0px) - 7px)); }
to { transform: translateY(calc(var(--o, 0px) + 7px)); }
}
/*
* 部品図。**画面を1枚見せて「便利です」と言っても、どこを見ればいいか
* 分からない。** 意味のまとまりごとに区切って、左から引き出す。
*
* 段どうしは**隙間なく積む**（row-gap: 0、上の罫を消す）ので、
* 3つで1枚の画面に見える。**離すと、別々の絵が3つ並んでいるだけになる。**
* 引き出し線は説明の右端から出す。広い画面のときだけ引く ——
* 縦に積んだときは、説明のすぐ下にその部分が来るので線が要らない。
*/
.parts {
display: grid; gap: 0;
border-radius: var(--r); overflow: hidden;
border: 1px solid var(--line-2); background: var(--panel);
box-shadow: var(--shadow);
}
.parts__row { display: grid; grid-template-columns: 1fr; }
.parts__label {
margin: 0; padding: 14px 16px 4px;
font-size: .78rem; line-height: 1.75; color: var(--ink-3);
}
.parts__label b {
display: block; margin-bottom: 3px;
font-size: .82rem; color: var(--accent); letter-spacing: .02em;
}
.parts__part { padding: 4px 16px 14px; }
.parts__part--sub { background: var(--panel-2); }
@media (min-width: 760px) {
/* 説明を左の欄に出し、画面は右に積む。**左右の欄を跨いで背景を割らない**
ため、罫は部品の側だけに引く */
.parts { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.parts__row { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; column-gap: 30px; }
.parts__label {
position: relative; padding: 0; text-align: right;
font-size: .8rem; color: var(--ink-2);
}
/* 引き出し線。**説明と部品が同じ段にあることを、線で確かめられるようにする** */
.parts__label::after {
content: ""; position: absolute; right: -30px; top: 50%;
width: 30px; height: 1px; background: var(--line-2);
}
.parts__label::before {
content: ""; position: absolute; right: -33px; top: 50%; z-index: 1;
width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
background: var(--accent);
}
.parts__part {
padding: 12px 16px; border: 1px dashed var(--line-2); border-top-width: 0;
background: var(--panel);
}
.parts__row:first-child .parts__part { border-top-width: 1px; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.parts__row:last-child .parts__part { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.parts__part--main { min-height: 108px; }
}
/* 日付の横の小さな札と、残りの数。実物（TodayView.tsx）にあるものだけ出す */
.parts__tag {
font-size: .62rem; font-weight: 700; letter-spacing: .04em;
padding: 2px 7px; border-radius: 100px;
background: var(--accent-soft); color: var(--accent);
}
.parts__n { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
/* 使える相手を名前で並べる。抽象語より固有名詞のほうが信じられる */
/*
* まとまりの名前。**丸が並んでいるだけでは、何の一覧なのか分からない。**
* 読み上げには aria-label で名前が付いていたのに、**目で読む人には
* 付いていなかった**（2026-08-28）。見える見出しにして、
* aria-labelledby で結び直した —— 名前を2箇所に書かずに済む。
*/
.chips__head {
display: flex; align-items: center; gap: 14px;
margin: clamp(30px, 4vw, 44px) 0 14px;
font-size: .84rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
}
/* 左右に罫を伸ばして、**ここから下がひとまとまり**だと面で言う。
ダウンロードの見出し（.dl__head）と同じ手。あちらは幅を 448px で
止めているが、こちらは丸が段いっぱいに並ぶので罫も端まで伸ばす */
.chips__head::before,
.chips__head::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--line-2);
}
.chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips__head + .chips { margin-top: 0; }
.chips li {
font-size: .8rem; color: var(--ink-2);
padding: 5px 13px; border-radius: 100px;
border: 1px solid var(--line-2); background: var(--panel);
}
.chips--on-dark li { background: rgba(255,255,255,.05); }
.chips--wide { margin-top: clamp(34px, 5vw, 48px); justify-content: center; }
.chips--wide li { font-size: .82rem; padding: 7px 15px; background: var(--panel); }
/* ============================================================
13. まとめて並べる機能カード
============================================================ */
.cards {
display: grid; grid-template-columns: 1fr; gap: 20px;
margin-top: clamp(38px, 5vw, 56px);
}
.card {
display: flex; flex-direction: column;
padding: 26px 24px 0; overflow: hidden;
border-radius: var(--r); border: 1px solid var(--line); background: var(--panel);
box-shadow: var(--shadow-sm);
transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* 絵はカードの下端に貼る（margin: auto で下へ寄せる）。**横に並ぶ2枚の
カードで、絵の高さを揃えるため。** そのぶん本文が短いカードほど上が
空くので、本文の長さは左右で揃えておくこと（揃っていないと片方だけ
間延びする）。padding-top はその空きの下限 */
.card .ph { margin: auto -1px -1px; padding-top: 16px; }
.ph--card .ph__img { aspect-ratio: 9 / 5.6; border-radius: var(--r-sm) var(--r-sm) 0 0; border-bottom: 0; }
.ph--card .ph__fb .shot { border-radius: var(--r-sm) var(--r-sm) 0 0; border-bottom: 0; box-shadow: none; }
/*
* 週ビューだけは、カードを横幅いっぱいにして扱う（.card--wide）。
* **7列は3分の1の幅には入らない。** 詰めると、どの列の字も切れて
* 読めないものが並ぶだけになり、何の絵なのか伝わらなくなる。
*/
.card--wide { padding: 26px 24px 26px; }
.card--wide .ph { margin: 20px 0 0; padding-top: 0; }
.card--wide .ph--card .ph__img { border-radius: var(--r-sm); border-bottom: 1px solid var(--line); }
.card--wide .ph--card .ph__fb .shot { border-radius: var(--r-sm); border-bottom: 1px solid var(--line); }
.card--wide .h3 { margin-bottom: 12px; }
/* ============================================================
14. 比較表
============================================================ */
/* 列が5本（Jotslot ＋ 相手4つ）ある。**画面が狭いと必ず溢れる**ので、
頁ごと横に流さず、表の中だけで流す。畳んだ表示に切り替わるのは
もっと狭くなってから（下の媒体クエリ） */
.cmp__wrap { margin-top: clamp(34px, 5vw, 50px); overflow-x: auto; }
.cmp {
width: 100%; border-collapse: separate; border-spacing: 0;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
overflow: hidden; font-size: .88rem;
}
.cmp th, .cmp td { padding: 13px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
/* **見出しを nowrap にしない。** 列名が「ローカル Markdown 型」まで
伸びたので、折り返せないと 5 本ぶんが表からはみ出す。2行になってよい */
.cmp thead th {
font-size: .8rem; font-weight: 700; color: var(--ink-3); background: var(--panel-2);
letter-spacing: .02em;
}
.cmp tbody th { font-weight: 700; color: var(--ink); font-size: .87rem; width: 23%; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { color: var(--ink-2); }
.cmp td span { display: block; }
/* 自分の列だけ、縦に色面を通す。どこを見ればいいかが一目で決まる */
.cmp .cmp__me { background: var(--accent-soft); }
/*
* **Jotslot だけが ◎ を取る4行。** リード文が「色の付いた4行」と
* 名指ししているので、**見て数えられないと文が嘘になる。**
* 自分の列（accent-soft）とは別の色にする —— 同じにすると、
* 列の色面と行の色面が混ざって、どちらの主張なのか読めなくなる。
*/
.cmp tbody tr.is-key > th { box-shadow: inset 3px 0 0 var(--accent); }
.cmp tbody tr.is-key > th, .cmp tbody tr.is-key > td { background-color: var(--panel-2); }
.cmp tbody tr.is-key > .cmp__me { background-color: var(--accent-soft); }
.cmp thead .cmp__me { color: var(--accent); font-size: .92rem; }
.cmp tbody .cmp__me { color: var(--ink); font-weight: 500; }
.mark { font-family: var(--mono); font-size: 1.02rem; font-weight: 700; line-height: 1.4; }
.mark--good { color: var(--good); }
.mark--mid { color: var(--warm); }
.mark--bad { color: var(--ink-3); }
/*
* 狭い画面では、表をやめて1行ずつのカードにする。
*
* **横スクロールにしてはいけない。** 実際そうしていて、スマホでは
* 4列のうち2列しか見えていなかった。しかもリード文が、見えていない列
* （ショートカット＋テキスト）の話をしていた。**流せることに気づかない人には、
* 無いのと同じ。** 表の形を保つより、全部読めるほうが大事。
*
* 列の名前は data-label に持たせてある（畳むと thead が消えるため）。
*/
@media (max-width: 799px) {
.cmp, .cmp tbody, .cmp tr, .cmp tbody th, .cmp td { display: block; }
.cmp thead { display: none; }
.cmp { border: 0; background: none; }
.cmp tr {
margin-bottom: 12px; padding: 4px 0 8px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--panel); box-shadow: var(--shadow-sm);
}
.cmp tbody th {
width: auto; padding: 13px 16px 9px; border-bottom: 1px solid var(--line);
font-size: .96rem;
}
.cmp td {
display: flex; align-items: baseline; gap: 8px;
padding: 8px 16px; border-bottom: 0;
}
.cmp td::before {
content: attr(data-label);
flex: 0 0 8.4em; color: var(--ink-3); font-size: .76rem; line-height: 1.5;
}
.cmp td span { display: inline; }
.cmp td .mark { margin-right: 2px; }
/* 自分の列は、縦の色面ではなく1行の色面で示す */
.cmp .cmp__me { margin: 4px 8px; padding: 8px; border-radius: var(--r-sm); }
.cmp tbody .cmp__me::before { color: var(--accent); font-weight: 700; }
}
.cmp__note {
margin: clamp(28px, 4vw, 40px) 0 0; text-align: center;
font-size: .97rem; color: var(--ink-2); line-height: 1.9;
}
/* ============================================================
15. 使いどころ
============================================================ */
.uses { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: clamp(38px, 5vw, 54px); }
.use {
padding: 24px 22px 22px; border-radius: var(--r);
border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-sm);
}
/*
* 使いどころの4枚は、**誰の話かを人の写真で見せる**枠を持つ。
* 写真が入るまでは、今まで置いていたアイコンがそのまま出る
* （.ph の決まり: 画像が1枚も無くても節は完成して見える）。
* カードの縁まで届かせるので、外側の padding を負の margin で打ち消す。
*/
.ph--use { margin: -24px -22px 16px; }
.ph--use .ph__img {
aspect-ratio: 8 / 5;
border-radius: var(--r) var(--r) 0 0; border-bottom: 1px solid var(--line);
box-shadow: none;
}
.ph__fb--use {
aspect-ratio: 8 / 5; display: flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--accent-soft), transparent 60%), var(--panel-2);
border-bottom: 1px dashed var(--line-2);
border-radius: var(--r) var(--r) 0 0;
}
.ph__fb--use .use__icon { margin-bottom: 0; width: 46px; height: 46px; }
.use__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 10px; margin-bottom: 13px;
background: var(--accent-soft); color: var(--accent);
}
.use__icon svg { fill: none; }
.uselist { list-style: none; margin: 12px 0 0; padding: 0; }
.uselist li {
font-family: var(--mono); font-size: .8rem; line-height: 1.8;
color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line);
}
.uselist li:last-child { border-bottom: 0; padding-bottom: 0; }
/* ============================================================
16. 作り手の話
============================================================ */
/* ============================================================
17. 迷う理由を引き取る
============================================================ */
.guards { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(38px, 5vw, 54px); }
.guard {
position: relative; padding: 26px 24px 26px;
border-radius: var(--r); border: 1px solid var(--line);
background: linear-gradient(170deg, var(--accent-soft), transparent 55%), var(--panel);
box-shadow: var(--shadow-sm);
}
.guard__n {
display: block; font-family: var(--mono); font-size: .72rem; font-weight: 700;
letter-spacing: .12em; color: var(--accent); margin-bottom: 10px;
}
/* リスクの節を、ひとことで閉じる。4枚を読まなかった人にも残るように */
.guards__close {
margin: clamp(30px, 4vw, 42px) auto 0; text-align: center;
font-size: clamp(1rem, 2.5vw, 1.12rem); color: var(--ink-2); line-height: 1.9;
}
/* 利用者の声が無いことを、隠さずに書く場所 */
/* ============================================================
18. 価格
============================================================ */
.plans { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(38px, 5vw, 52px); max-width: 900px; }
.plan {
position: relative; display: flex; flex-direction: column;
border: 1px solid var(--line-2); border-radius: var(--r-lg);
padding: 30px 26px 28px; background: var(--panel); box-shadow: var(--shadow-sm);
}
.plan--pro {
border-color: var(--accent);
box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft);
}
.plan__flag {
position: absolute; top: -13px; left: 26px; margin: 0;
padding: 3px 12px; border-radius: 100px;
background: linear-gradient(96deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
font-size: .7rem; font-weight: 700; letter-spacing: .08em; line-height: 1.9;
}
.plan__name { margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.plan__price { margin: 0 0 10px; display: flex; align-items: baseline; gap: 3px; }
.plan__cur { font-size: 1.2rem; font-weight: 700; }
.plan__big { font-size: clamp(2rem, 6.4vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.plan__per { font-size: .9rem; color: var(--ink-3); margin-left: 4px; }
.plan__note { margin: 0; font-size: .86rem; color: var(--ink-2); }
.plan .ticks { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
/* 押す場所は、2枚のカードで高さを揃える。上の箇条書きの長さが違っても
下端で揃うよう、余りはこの上に寄せる */
.plan__cta { margin-top: auto; align-self: stretch; }
.plan .ticks { margin-bottom: 26px; }
.plan__fine { margin: 12px 0 0; font-size: .76rem; color: var(--ink-3); text-align: center; }
/* ============================================================
19. よくある質問
------------------------------------------------------------
で組んである。**JS が動かなくても開く。**
============================================================ */
.faq { margin-top: clamp(34px, 5vw, 48px); }
.qa {
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--panel); margin-bottom: 10px; overflow: hidden;
transition: border-color .16s;
}
.qa[open] { border-color: var(--line-2); }
.qa:hover { border-color: var(--line-2); }
.qa__q {
position: relative; list-style: none; cursor: pointer;
padding: 17px 52px 17px 20px;
font-weight: 700; font-size: .98rem; line-height: 1.65;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
content: ""; position: absolute; right: 22px; top: 50%;
width: 10px; height: 10px; margin-top: -6px;
border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
transform: rotate(45deg); transform-origin: 60% 60%;
transition: transform .2s;
}
.qa[open] .qa__q::after { transform: rotate(-135deg); }
.qa__a { padding: 0 20px 20px; }
.qa__a p { margin: 0; font-size: .94rem; color: var(--ink-2); line-height: 1.9; }
.qa[open] .qa__a { animation: qaOpen .22s ease-out; }
@keyframes qaOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ============================================================
20. 最後の CTA
============================================================ */
/*
* **頁の終わりは、色面ごと変える。** 1つ前の版は地が var(--paper) のままで、
* いちばん押してほしい場所が、直前の Q&A と同じ地の上に載っていた。
*
* 色は .feat--hero と同じ「部屋ごとトークンを差し替える」やり方。
* ただし **feat--hero の濃紺とは別の色**にする（同じにすると、暗いときに
* 同じ部屋が2つあるように見えて、終わりの印にならない）。
* 明暗どちらの外観でも同じ色でいい。ここは「地の続き」ではないため。
*
* **差し色そのものではなく、差し色を深くした一色にする。** 一度、
* #3a3bc4 → #5a34c0 の彩度の高いグラデーションにして、
* 「ここだけ奇抜すぎる」と言われた。**紙とインクの頁で、最後の1節だけ
* 別の作りに見えると、押させたいものが浮いて見える。**
* いまの #22245f は --accent（#4a4be0）をそのまま暗くした側で、
* 「差し色はインクブルー1色だけ」から外れない。
*
* 濃紺との離れ具合は L* で見る。地 3.7 → 濃紺 11.8 → ここ 17.6。
* ここを濃紺へ寄せると、暗いときに同じ部屋が2つになる。
*/
.cta {
position: relative; overflow: hidden;
border-top: 0;
background: #22245f;
color: #ffffff;
--paper: #22245f; --paper-2: #282a6a; --paper-3: #282a6a;
--panel: #2e3175; --panel-2: #292c6b;
--ink: #ffffff; --ink-2: #c6c7e6; --ink-3: #b3b5dd;
--line: rgba(255, 255, 255, .22); --line-2: rgba(255, 255, 255, .38);
--accent: #ffffff; --accent-2: #ffffff; --accent-soft: rgba(255, 255, 255, .14);
--accent-ink: #22245f;
--btn-bg: #ffffff; --btn-fg: #22245f;
--focus: #ffffff;
--shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 40px 80px -44px rgba(0, 0, 0, .9);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 10px -5px rgba(0, 0, 0, .45);
}
.cta__glow {
position: absolute; inset: -30% -10% auto -10%; height: 520px; pointer-events: none;
background: radial-gradient(38% 60% at 50% 0%, var(--accent-soft), transparent 72%);
}
.cta .wrap { position: relative; z-index: 1; }
/* ============================================================
21. フッタ
============================================================ */
.foot { border-top: 1px solid var(--line); padding: 34px 0 46px; background: var(--paper-2); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.foot__links a { font-size: .85rem; color: var(--ink-2); text-decoration: none; }
.foot__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__copy { margin: 0; margin-left: auto; font-size: .8rem; color: var(--ink-3); font-family: var(--mono); }
/* ============================================================
22. アプリ画面のモック（実スクショに差し替えられる部分）
============================================================ */
.shot {
border: 1px solid var(--line); border-radius: var(--r);
background: var(--panel); overflow: hidden;
box-shadow: var(--shadow);
}
.shot--flat { box-shadow: none; }
.shot__bar {
display: flex; align-items: center; gap: 7px;
padding: 11px 14px; border-bottom: 1px solid var(--line);
background: var(--panel-2);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; }
.shot__title { font-size: .76rem; color: var(--ink-3); margin-left: 8px; }
.shot__key { margin-left: auto; }
.shot__cap {
margin: 0; padding: 9px 14px; border-top: 1px solid var(--line);
font-size: .74rem; color: var(--ink-3); background: var(--panel-2);
display: flex; align-items: center; gap: 8px;
}
.shot__pane { padding: 14px 16px 18px; }
.shot__pane--sub { border-top: 1px solid var(--line); background: var(--panel-2); }
.pane__head {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
font-size: .78rem;
}
.pane__date { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.pane__sub { color: var(--ink-3); }
.pane__count { margin-left: auto; color: var(--ink-3); font-family: var(--mono); font-size: .72rem; }
/* ノート本文（等幅。ここが「文字そのものを見せる」中心） */
.note {
margin: 0; font-family: var(--mono);
font-size: clamp(.76rem, 2.4vw, .86rem); line-height: 2;
white-space: pre-wrap; word-break: break-word; color: var(--ink);
}
.note--sm { font-size: clamp(.7rem, 2.2vw, .78rem); line-height: 1.9; }
.ln { display: block; }
.ln.h { color: var(--ink-3); font-weight: 700; }
.ln.i, .ln.p { color: var(--ink-2); }
.ln.dim { color: var(--ink-2); }
/* 済んだ行。**取り消し線は引かない。**
`- [x]` の記法ごと線が通ると、字面が壊れて何と書いてあるか読めなくなる。
済んでいることは [x] が言っているので、色を落とすだけでいい。 */
.ln.done { color: var(--ink-3); }
/* 予定の行。アプリの中でも `@ ` の行は差し色で出る（editor/livePreview.ts）。
モックだけ黒いと、実物を入れたときに「同じものだ」と繋がらない */
.ln.ev { color: var(--accent); font-weight: 600; }
.pr { color: var(--ink-3); margin-right: .6em; }
/* 1行ずつ現れる。「打っている最中」を絵で言うための部分。
.ln 側に持たせてあるので、言語を切り替えて中身が入れ替わっても壊れない */
.note--type .ln { animation: lineIn .5s both; }
.note--type .ln:nth-child(1) { animation-delay: .15s; }
.note--type .ln:nth-child(2) { animation-delay: .35s; }
.note--type .ln:nth-child(3) { animation-delay: .55s; }
.note--type .ln:nth-child(4) { animation-delay: .75s; }
.note--type .ln:nth-child(5) { animation-delay: .95s; }
.note--type .ln:nth-child(6) { animation-delay: 1.1s; }
.note--type .ln:nth-child(7) { animation-delay: 1.25s; }
.note--type .ln:nth-child(8) { animation-delay: 1.4s; }
@keyframes lineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* 点滅するカーソル。「もう打てる状態で開く」ことを絵で言うための部分 */
.caret {
display: inline-block; width: 2px; height: 1.05em; vertical-align: -.18em;
background: var(--accent); animation: blink 1.15s steps(1) infinite;
}
.caret--term { margin-left: 0; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* ---------- モック: ファイルツリー ---------- */
.shot--files { padding: 18px 18px 22px; font-family: var(--mono); font-size: .82rem; line-height: 2; }
.tree__root { margin: 0 0 6px; color: var(--ink-3); font-size: .78rem; }
.tree, .tree ul { list-style: none; margin: 0; padding-left: 16px; }
.tree { padding-left: 2px; }
.tree ul { border-left: 1px solid var(--line); margin-left: 5px; padding-left: 14px; }
.tree__dir { color: var(--ink-2); }
.tree__file { color: var(--ink); }
.tree__file.is-on { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
/* ---------- モック: ターミナル ---------- */
.note--term { padding: 14px 16px 18px; font-size: clamp(.68rem, 2.1vw, .78rem); line-height: 2.1; }
/* ---------- モック: 週ビュー ---------- */
/* 週ビューのモックだけは、中で横に流れるのが正しい（7列は入りきらない）。
ただし **流せると分からないと、ただ切れた絵に見える。**
右端をぼかして「まだ続いている」ことを形で言う。 */
.shot--week { overflow: hidden; position: relative; }
.shot--week::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--panel));
}
@media (min-width: 900px) { .card--wide .shot--week::after { display: none; } }
.week {
display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr));
overflow-x: auto; scrollbar-width: thin;
}
.wcol { border-right: 1px solid var(--line); min-width: 92px; }
.wcol:last-child { border-right: 0; }
.wcol--today { background: var(--accent-soft); }
.wcol__h {
display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
padding: 9px 10px; border-bottom: 1px solid var(--line);
font-size: .72rem; color: var(--ink-3);
}
.wcol__h b { color: var(--ink); font-size: .76rem; }
.wcol__h span { font-family: var(--mono); }
.wcol__h i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .66rem; }
.wcol__b { padding: 10px; min-height: 116px; font-family: var(--mono); font-size: .69rem; line-height: 1.9; }
.wcol__b .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln.drag { outline: 1px dashed var(--accent); outline-offset: 2px; border-radius: 3px; color: var(--accent); }
/* ---------- モック: 月カレンダー（未完了が多い日ほど濃く） ---------- */
.shot--month { padding: 16px; }
.mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mh { font-size: .68rem; color: var(--ink-3); text-align: center; padding-bottom: 4px; }
.mc {
font-family: var(--mono); font-size: .72rem; text-align: right;
padding: 6px 7px; border-radius: 6px; min-height: 38px;
border: 1px solid var(--line); color: var(--ink-2);
}
/* 濃淡は同じ色の透明度だけで作る。色数を増やさない */
.mc.d0 { background: transparent; }
.mc.d1 { background: color-mix(in srgb, var(--shade) 7%, transparent); }
.mc.d2 { background: color-mix(in srgb, var(--shade) 15%, transparent); }
.mc.d3 { background: color-mix(in srgb, var(--shade) 26%, transparent); color: var(--ink); }
.mc--today { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.legend { display: inline-flex; gap: 3px; }
.legend i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--line); display: block; }
.legend i.d1 { background: color-mix(in srgb, var(--shade) 7%, transparent); }
.legend i.d2 { background: color-mix(in srgb, var(--shade) 15%, transparent); }
.legend i.d3 { background: color-mix(in srgb, var(--shade) 26%, transparent); }
/* ---------- モック: 検索 ---------- */
.find__bar {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.find__q { font-family: var(--mono); font-size: .82rem; color: var(--ink); }
.find__tog {
margin-left: auto; font-family: var(--mono); font-size: .68rem;
padding: 3px 8px; border-radius: 100px;
background: var(--accent); color: var(--accent-ink);
}
.find__list { list-style: none; margin: 0; padding: 6px 0; }
.find__list li {
display: flex; gap: 12px; align-items: baseline;
padding: 8px 14px; font-family: var(--mono); font-size: .73rem;
}
.find__list li + li { border-top: 1px solid var(--line); }
.find__list b { color: var(--ink-3); font-weight: 400; flex: 0 0 auto; }
.find__list .ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ============================================================
23. スクロールで現れる
------------------------------------------------------------
**既定は「見えている」。** の小さなスクリプトが .rv-on を
に付け、そこから初めて隠れる。JS が動かない環境では
何も隠れないので、真っ白なページにはならない。
さらに、main.js が読めなかったときのために、その小さなスクリプトが
1.2秒後に .rv-on を外す（data-rv-ready が付いていなければ）。
**隠したまま誰も現しに来ない、という状態を作らない。**
============================================================ */
.rv-on .rv { opacity: 0; transform: translateY(14px); }
.rv-on .rv.is-in {
opacity: 1; transform: none;
transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
transition-delay: var(--rv-d, 0ms);
}
/* ヒーローは見えた時点で動かす（節ごとの遅れを固定で持たせる） */
.rv--1 { --rv-d: 60ms; }
.rv--2 { --rv-d: 150ms; }
.rv--3 { --rv-d: 250ms; }
.rv--4 { --rv-d: 340ms; }
.rv--5 { --rv-d: 430ms; }
/* ============================================================
24. 動きを減らす設定を尊重する
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
transition-delay: 0s !important;
}
.rv-on .rv { opacity: 1; transform: none; }
}
/* ============================================================
25. 法務ページ（privacy.html / terms.html / tokushoho.html / support.html）
------------------------------------------------------------
トップと同じトークンだけで組む。読ませるのが目的なので、
版面は narrow のまま、節と節の間だけを広く取る。
============================================================ */
.legal { padding: clamp(30px, 5vw, 52px) 0 clamp(56px, 9vw, 96px); }
/* トップへ戻る導線。各ページの先頭とフッタの両方に置く */
.legal__back {
display: inline-block; margin-bottom: 22px;
font-size: .86rem; color: var(--ink-2); text-decoration: none;
}
.legal__back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__meta { margin: 0 0 26px; font-size: .8rem; color: var(--ink-3); font-family: var(--mono); }
.legal__sec { margin-top: clamp(34px, 5vw, 54px); }
.legal__h { display: flex; align-items: baseline; gap: .6em; }
.legal__num { font-family: var(--mono); font-size: .82em; color: var(--ink-3); flex: 0 0 auto; }
.legal__sec .body:last-child, .legal__sec .small:last-child { margin-bottom: 0; }
/* 末尾の「戻る」だけは、本文から離して置く */
.legal__back--end { margin: 44px 0 0; }
/* 定義リストの直後に補足を続けるとき */
.deflist + .body { margin-top: 22px; }
/* 用語の定義（特商法の表記に使う）。狭い幅では縦積み、広い幅で2列 */
.deflist { margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.deflist dt { margin: 0; padding: 16px 0 0; font-weight: 700; font-size: .92rem; }
.deflist dd {
margin: 4px 0 0; padding: 0 0 16px;
border-bottom: 1px solid var(--line);
color: var(--ink-2); font-size: .95rem;
}
.deflist dd > p { margin: 0 0 6px; }
.deflist dd > p:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
.deflist { display: grid; grid-template-columns: 13em 1fr; }
.deflist dt { padding: 16px 22px 16px 0; border-bottom: 1px solid var(--line); }
.deflist dd { margin: 0; padding: 16px 0; }
}
/* ---------- 下書きの帯 / 未記入の印 ----------
この2つだけは、地の色と同じ土俵に乗せない。
「まだ埋まっていない」ことに気づかないまま公開されるのが一番まずいので、
版面から意図的に外して黄色を使う。
.draft は公開前に消す（HTML 側に「公開前に削除」と印がある）。 */
.draft {
margin: 0 0 30px; padding: 14px 18px;
border: 1px solid #d8b23a; border-left-width: 5px;
border-radius: var(--r-sm);
background: #fff6dd; color: #4a3a05;
font-size: .9rem; line-height: 1.75;
}
.draft strong { display: block; color: inherit; }
.todo {
display: inline-block; padding: .05em .55em;
border: 1px dashed #b9902a; border-radius: 5px;
background: #ffe9a8; color: #4a3a05;
font-size: .92em; font-weight: 700;
margin: 0 .15em; /* 文中に置いたとき、前後の字とくっつかないように */
}
@media (prefers-color-scheme: dark) {
.draft { border-color: #7a6420; background: #2b2410; color: #f0dfae; }
.todo { border-color: #8a6d22; background: #463714; color: #ffe08a; }
}
/* ============================================================
26. ダウンロード群
============================================================ */
/*
* **動詞は、ボタン1つずつではなく、まとまりに付ける。**
* 各ボタンに「ダウンロード」と書くと、同じ語が3つ縦に並ぶうえ、
* 文言の長さがばらついて幅が揃わない。かといって全部から外すと
* **頁のどこにも「ダウンロード」が無くなり**、読み上げでも
* 「Mac 版、Apple シリコン」としか聞こえない（2026-08-28 に気づいた）。
*
* まとまりの上に1回だけ置いて、aria-labelledby でボタン群に結ぶ。
* **1回で足りる。3回は多い。0回は足りない。**
*/
.dl__head {
display: flex; align-items: center; gap: 14px;
margin: 2px 0 20px; max-width: 448px;
font-size: .84rem; font-weight: 700;
letter-spacing: .04em; color: var(--ink-2);
}
/*
* 左右に罫を伸ばして、**ここから下がボタンの並び**だと面で言う。
* 幅を 448px で止めてあるのは、2つ並んだボタン（212 + 12 + 212 = 436）に
* 端を揃えるため。**罫だけがボタンより長いと、何を区切っているのか
* 分からなくなる。**
*/
.dl__head::before,
.dl__head::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--line-2);
}
/* 中央寄せの節（末尾 CTA）では、罫ごと中央へ */
.center .dl__head { margin-left: auto; margin-right: auto; }
.dl { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.dl--final { justify-content: center; margin-top: 34px; }
.dl__item {
position: relative;
display: flex; align-items: center; gap: 12px;
padding: 13px 20px 13px 16px;
border: 1px solid var(--line-2); border-radius: var(--r);
background: var(--panel); color: var(--ink);
/*
* **幅は min-width で揃える。文言を短くしてあるのが前提。**
* 大きい字（.dl__label）はどれも「Mac 版」「iPhone 版」のように短く、
* 中身の幅は 212px に届かない。だから3つとも 212px で並ぶ。
* **ここに長い文言を入れると、その1つだけ伸びて右端が揃わなくなる。**
* 動詞（ダウンロード）を入れていないのはそのため —— 何が起きるかは
* 節の見出しと、色の付いたボタンそのものが言っている。
*/
text-decoration: none; min-width: 212px;
transition: border-color .16s, transform .16s, box-shadow .16s;
}
a.dl__item:hover { border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dl__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ink); }
.dl__body { display: flex; flex-direction: column; line-height: 1.35; }
.dl__label { font-weight: 700; font-size: .95rem; }
.dl__meta { font-size: .76rem; color: var(--ink-3); margin-top: 2px; }
/* 判定した端末に合う、実際に押せるボタンを一番大きく出す */
.dl__item.is-primary {
background: linear-gradient(96deg, var(--accent), var(--accent-2));
color: var(--accent-ink); border-color: transparent;
padding: 17px 26px 17px 20px;
box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft);
}
.dl__item.is-primary .dl__icon { color: var(--accent-ink); width: 25px; height: 25px; }
.dl__item.is-primary .dl__label { font-size: 1.06rem; }
/* 反転した面の上なので、薄い灰色ではなく地の文字色を薄めて使う
（color-mix を解さない環境でもコントラストが落ちない）*/
.dl__item.is-primary .dl__meta { color: var(--accent-ink); opacity: .8; }
a.dl__item.is-primary:hover { opacity: .94; border-color: transparent; }
/* 未対応・未公開。押せて必ず失敗するボタンにはしない */
/*
* まだ出していない端末（iPhone / Android）も **公開時と同じ見た目**にする。
* 押すと「まだです」と知らせが出る（main.js §2b）。
*
* 前は破線＋灰色の札（.dl__item--off）で、押せないことを見た目で言って
* いた。**出しますと言っている頁で、そこだけ完成していないように見える**
* のをやめた判断（2026-08-27）。押した人には必ず知らせが出るので、
* 「押して何も起きない」にはならない。
*
*