/* lp_chill.html に足した「信頼・オファー・価格の物差し」の見た目。
*
* ほかの lp_chill 系CSS（lp_chill_bg.css を含む）の**あとに**読む。
* 理由は2つ:
* 1. ここで足したブロックは新しいクラスばかりで、既存を上書きする意図がない。
* あとに置いても前の見た目は変わらない。
* 2. いちばん下の「動きを減らす」のまとめだけは、**後勝ちで効かせたい**。
* 演出は lp_chill.css / _bg.css / _finale.css / _check_gates.css に散っていて、
* それぞれが個別に reduce へ対応している。取りこぼしをここで拾う。
*
* 中身の順番:
* 1. ヒーロー（並び替えと、時期で変わる一言）
* 2. 信頼の帯（ヒーロー直下）
* 3. 友だち追加のあとに何が起きるか
* 4. 価格の物差し（時間・込みの価値・相場）
* 5. 折りたたみ（契約条件・透明性）
* 6. 続きのページへの入口（FAQ・機能）
* 7. 動きを減らす設定のまとめ
*/
/* ============================================================
1. ヒーロー
============================================================
もとの並びは「H1 → リール → サブ見出し → CTA → バッジ」だった。
スマホの最初の画面はリールで埋まり、**CTAが画面の外**にあった。
flex の order で「H1 → 一言 → CTA → 価格 → リール」に組み替える。
order を使うのは、HTMLの順番を読み上げの順番として保ちたいから
（H1のすぐ後ろに説明が来る形は、読み上げでも自然）。 */
.hero .wrap { display: flex; flex-direction: column; }
.hero-for { order: 0; align-self: center; }
.hero h1 { order: 1; }
.hero-sub { order: 2; }
.hero-act { order: 3; }
.hero-badges { order: 4; }
.hero-chill { order: 5; }
.reel { order: 6; }
/* 時期で変わる一言。JSが動かない環境では、HTMLに書いてある通年の文が残る
（season.js は上書きするだけで、消してから足すことをしない）。 */
.hero-season {
order: 2;
margin-top: 14px; font-size: clamp(14px, 3.8vw, 16px); line-height: 1.8;
color: var(--ink-2);
}
.hero-season small { display: block; font-size: .85em; color: var(--sub); }
/* 紹介コード経由で来たときだけ出る知らせ（modules/marketing/lp_chill/referral.js）。
CTAのすぐ下に置くのは、「このボタンが紹介を引き継いでいる」ことを、押す直前に
見せたいから。紹介が無い人には hidden のまま出ない＝いままでの見た目のまま。 */
.hero-referral {
order: 3;
margin-top: 10px; padding: 8px 14px;
border: 1px dashed var(--border); border-radius: 12px;
background: var(--paper);
font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
}
.hero-referral[hidden] { display: none; }
.hero-referral b { font-weight: 900; letter-spacing: .06em; color: var(--ink); }
.hero-referral small { display: block; font-size: .9em; color: var(--sub); }
/* 税理士プランへの逃げ道。主役はパーソナルなので、1行に留める。 */
.hero-alt {
order: 3;
margin-top: 10px; font-size: 12.5px; color: var(--sub);
}
.hero-alt a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* リールは「見たい人が見る」位置なので、見出しを添えて役割をはっきりさせる。 */
.reel-lead {
order: 6;
margin: 26px 0 -8px; font-size: 12.5px; font-weight: 900; letter-spacing: .04em;
color: var(--sub);
}
/* ============================================================
2. 信頼の帯（ヒーロー直下）
============================================================
税務サービスなのに、第三者の証拠がひとつも無かった。
**書いてよいのは、このサイトで確認できる事実だけ**（運営会社・署名する人・
データの扱い・連絡先）。実績の数字や利用者の声は、実データが入るまで出さない。 */
.trust-strip {
max-width: 1080px; margin: 0 auto; padding: 0 20px 8px;
}
.trust-strip ul {
list-style: none; display: grid; gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .trust-strip ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-strip li {
/* アイコンは1行目（見出し）の高さにそろえる。中央ぞろえだと、行数の多い項目で
アイコンだけが真ん中に浮いて、どの見出しに付いているのか分かりにくい。 */
display: flex; align-items: flex-start; gap: 9px;
background: var(--paper); border: 1px solid var(--border); border-radius: 14px;
padding: 10px 12px; font-size: 11.5px; font-weight: 700; line-height: 1.55; color: var(--ink-2);
}
.trust-strip .ts-ic { font-size: 17px; flex: 0 0 auto; }
.trust-strip b { display: block; font-size: 12.5px; font-weight: 900; color: var(--ink); }
.trust-strip .ts-more {
text-align: center; margin-top: 10px; font-size: 11.5px; color: var(--muted);
}
.trust-strip .ts-more a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* 創業者の言葉。人の要素がヤギしか無かったので、名前のある一言を早い段階へ置く。 */
.founder-note {
max-width: 720px; margin: 18px auto 0; padding: 16px 18px;
background: var(--paper); border: 1px solid var(--border); border-left: 5px solid var(--leaf);
border-radius: 14px;
}
.founder-note p { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.founder-note cite {
display: block; margin-top: 8px; font-style: normal; font-size: 12px; color: var(--sub);
}
.founder-note cite b { font-weight: 900; color: var(--ink); }
/* ============================================================
3. 友だち追加のあとに何が起きるか
============================================================
ボタンは8か所あるのに、押した先で何が起きるかがどこにも書いていなかった。
**約束できることだけ**を3つ並べる（料金が発生しないこと・対象かどうかを
確認できること・プランを選んで申し込むこと）。 */
.after-add {
max-width: 880px; margin: 26px auto 0; padding: 0 20px;
}
.after-add h3 {
text-align: center; font-size: clamp(16px, 4.4vw, 20px); font-weight: 900; color: var(--ink);
margin-bottom: 4px;
}
.after-add .aa-lead { text-align: center; font-size: 12.5px; color: var(--sub); margin-bottom: 14px; }
.after-add ol { list-style: none; display: grid; gap: 10px; }
@media (min-width: 720px) { .after-add ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.after-add li {
background: var(--paper); border: 2px solid rgba(18,60,43,.14); border-radius: 16px;
box-shadow: 3px 3px 0 rgba(18,60,43,.08);
padding: 14px 15px;
}
.after-add .aa-no {
display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
background: var(--leaf); color: #fff; font-size: 12px; font-weight: 900; margin-bottom: 7px;
}
.after-add b { display: block; font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 4px; }
.after-add p { font-size: 12.5px; line-height: 1.8; color: var(--sub); }
.after-add .aa-free { color: var(--leaf-dark); font-weight: 900; }
/* ============================================================
4. 価格の物差し
============================================================
65,780円が高いのか安いのかを決める材料が、ページのどこにも無かった。
**自社の値段表から作れる物差し**を、金額のすぐ隣へ置く。 */
.price-anchor {
max-width: 940px; margin: 22px auto 0;
display: grid; gap: 12px;
}
@media (min-width: 820px) { .price-anchor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-anchor .pa-card {
background: var(--paper); border: 2px solid rgba(18,60,43,.14); border-radius: 18px;
box-shadow: 4px 4px 0 rgba(18,60,43,.08);
padding: 16px 18px;
}
.price-anchor .pa-k {
display: inline-block; font-size: 10.5px; font-weight: 900; letter-spacing: .1em;
color: var(--ink); background: rgba(108,179,122,.22); border-radius: 999px; padding: 4px 10px;
margin-bottom: 10px;
}
.price-anchor h4 { font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.6; margin-bottom: 8px; }
.price-anchor p { font-size: 12.5px; line-height: 1.85; color: var(--sub); }
.price-anchor .pa-eq {
display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
margin: 10px 0 8px; text-align: center;
}
.price-anchor .pa-eq span {
font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 20px; font-weight: 700; color: var(--ink);
}
.price-anchor .pa-eq small { display: block; font-family: 'Zen Maru Gothic', sans-serif; font-size: 11px; color: var(--muted); }
.price-anchor .pa-eq i {
font-style: normal; font-size: 13px; font-weight: 900; color: var(--leaf-dark);
font-family: 'Zen Maru Gothic', sans-serif;
}
.price-anchor .pa-note { margin-top: 8px; font-size: 10.5px; line-height: 1.7; color: var(--muted); }
/* 税理士プランに込みの3つ。表の下のほうにあって、実質いくら得なのかが伝わっていなかった。 */
.included-flag {
display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
margin-top: 8px; padding: 6px 12px; border-radius: 999px;
background: #fff6d8; border: 1px solid #f0d68a;
font-size: 11.5px; font-weight: 900; color: #7a5a10;
}
.included-flag b { font-size: 14px; }
/* ============================================================
5. 折りたたみ
============================================================
契約条件はCTAの直前にあって、最後のひと押しの手前でブレーキになっていた。
**内容は1文字も変えず**、料金表の直後へ移して畳む。 */
.fold {
max-width: 940px; margin: 18px auto 0;
background: var(--paper); border: 1px solid var(--border); border-radius: 16px;
overflow: hidden;
}
.fold > summary {
list-style: none; cursor: pointer; padding: 14px 18px;
font-size: 13.5px; font-weight: 900; color: var(--ink);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
content: '＋'; font-size: 15px; color: var(--leaf-dark); flex: 0 0 auto;
}
.fold[open] > summary::after { content: '−'; }
.fold > summary small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.fold .fold-body { padding: 0 18px 16px; }
/* 畳んだ中に、もとのカードがそのまま入る。カードの外枠は二重になるので消す。 */
.fold .fold-body > .card { border: 0; box-shadow: none; padding: 0; background: none; }
.fold .fold-body > .trust-area { margin: 0; }
/* ============================================================
6. 続きのページへの入口
============================================================ */
.more-link {
display: flex; align-items: center; justify-content: center; gap: 10px;
max-width: 640px; margin: 20px auto 0; padding: 13px 18px;
background: var(--paper); border: 2px dashed var(--leaf); border-radius: 16px;
font-size: 13px; font-weight: 900; color: var(--ink-2); text-align: center; line-height: 1.6;
}
.more-link:hover, .more-link:focus-visible { border-style: solid; }
.more-link .ml-ic { font-size: 18px; }
/* CTAのすぐ下の一言。位置ごとに、その場の疑問へ答える言葉を置く。 */
.cta-context {
display: block; margin-top: 8px; font-size: 12px; line-height: 1.75; color: var(--sub);
}
/* ============================================================
7. 動きを減らす設定のまとめ
============================================================
演出は4本のCSSに散っていて、それぞれが個別に reduce へ対応している。
**新しく足した演出を、対応し忘れたまま出さない**ための受け皿。
ここは後勝ちで効かせたいので、読み込み順のいちばん最後に置いてある。 */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero .deco *, .last-cta .deco *, .tape-track, .confetti, .spark, .fin-fall {
animation: none !important;
}
.more-link, .fold > summary { transition: none !important; }
}
/* 幕とチェックゲートの対応。4幕デモ（#demo）と3つのチェック（#safe）は
同じ話を別の角度で言っている。**続きものだと分かる合図**を幕の頭に置く。 */
.act-gate {
display: inline-block; margin-left: 10px; vertical-align: middle;
font-size: 10px; font-weight: 900; letter-spacing: .06em;
color: var(--ink-2); background: rgba(108,179,122,.2);
border-radius: 999px; padding: 4px 10px;
}
/* 3ステップ → 料金 のつなぎ。**ここで金額へ渡す。**
もとはこのあとに4幕デモと3つのチェックが入っていて、スマホで料金まで19画面あった。 */
.to-price {
max-width: 640px; margin: 0 auto; padding: 34px 20px 8px; text-align: center;
}
.to-price p { margin-bottom: 4px; line-height: 1.7; }
.to-price b { display: block; font-size: clamp(17px, 4.8vw, 22px); font-weight: 900; color: var(--ink); }
.to-price span span, .to-price p span { font-size: 12.5px; color: var(--sub); }
.to-price .more-link { margin-top: 12px; }