/* lp_chill.html の「背景の作り込み」。
*
* lp_chill.css → lp_chill_finale.css → lp_chill_eligibility.css →
* lp_chill_check_gates.css → lp_chill_price.css の**あとに**読む
* （後勝ちで、地の面だけを上書きする）。 の並びを変えないこと。
*
* ■ ここで解きたいこと
* ① 見出しまわりが寂しい（#year の導入・#safe の導入）
* → 中身は足さず、**その節の主題を背景で言い直す**。
* 1年の話なら夜空と月の目盛り、検査の話なら方眼と検査枠。
* ② 同じ地色が続いて長く感じる（TRANSPARENCY・#price・#start）
* → 地色そのものを変えて、節の切り替わりを面で分からせる。
* TRANSPARENCY は濃緑の上に**紙を貼った**形にして、面を反転する。
* ③ 最後（.last-cta）は締めなので、いちばん派手にする。
*
* ■ 決まり
* - 追加画像は使わない。CSS と inline SVG だけで作る（lp_chill.css と同じ）。
* - 装飾は .deco 配下か aria-hidden の空要素に置く。読み上げ・操作の対象にしない。
* - 色は既存の変数から取る（--sun / --coral / --sky / --leaf / --ink）。
* ここで新しく作るのは、節の地色 2つ（--pr-bg / --st-bg）だけ。
* - 動きは prefers-reduced-motion: reduce で止まる
* （lp_chill.css の * { animation: none !important } が効く）。
*/
:root {
--pr-bg: #fff2d2; /* 料金：陽だまりの黄 */
--st-bg: #e2f0fb; /* はじめかた：青写真の水色 */
}
/* =========================================================================
1. #year「A YEAR WITH SUMATAKU」＝ 夜空
------------------------------------------------------------------------
ベタの濃緑1色だったので、見出しの周りに何も無かった。
「1年を通して過ごす」節なので、夜空（星・光）と月の目盛りを地に敷く。
========================================================================= */
#year {
background-color: #0e3324;
background-image:
radial-gradient(132% 62% at 50% -14%, rgba(87, 191, 106, .26) 0, rgba(87, 191, 106, 0) 62%),
radial-gradient(86% 52% at 4% 104%, rgba(79, 184, 239, .20) 0, rgba(79, 184, 239, 0) 64%),
radial-gradient(74% 48% at 98% 44%, rgba(255, 201, 60, .13) 0, rgba(255, 201, 60, 0) 62%);
}
/* --- 星。1タイル300pxの点を敷き詰め、上ほど濃く見えるようにぼかす --- */
.yr-stars {
position: absolute; inset: 0; opacity: .8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='34' r='1.5' opacity='.7'/%3E%3Ccircle cx='68' cy='12' r='1' opacity='.45'/%3E%3Ccircle cx='112' cy='58' r='1.7' opacity='.8'/%3E%3Ccircle cx='156' cy='22' r='1.1' opacity='.5'/%3E%3Ccircle cx='198' cy='74' r='1.4' opacity='.65'/%3E%3Ccircle cx='246' cy='30' r='1' opacity='.45'/%3E%3Ccircle cx='284' cy='66' r='1.6' opacity='.7'/%3E%3Ccircle cx='34' cy='110' r='1.2' opacity='.55'/%3E%3Ccircle cx='88' cy='142' r='1.7' opacity='.75'/%3E%3Ccircle cx='140' cy='104' r='1' opacity='.45'/%3E%3Ccircle cx='186' cy='150' r='1.5' opacity='.7'/%3E%3Ccircle cx='232' cy='118' r='1.1' opacity='.5'/%3E%3Ccircle cx='276' cy='158' r='1.4' opacity='.6'/%3E%3Ccircle cx='16' cy='196' r='1.6' opacity='.7'/%3E%3Ccircle cx='62' cy='240' r='1.1' opacity='.5'/%3E%3Ccircle cx='108' cy='206' r='1.4' opacity='.65'/%3E%3Ccircle cx='152' cy='262' r='1' opacity='.45'/%3E%3Ccircle cx='196' cy='222' r='1.7' opacity='.75'/%3E%3Ccircle cx='240' cy='268' r='1.2' opacity='.55'/%3E%3Ccircle cx='288' cy='232' r='1.5' opacity='.65'/%3E%3C/g%3E%3C/svg%3E");
background-size: 300px 300px;
-webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 46%, transparent 82%);
mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 46%, transparent 82%);
}
/* --- 見出しの後ろの光。主役の周りだけ明るくする（ヒーローの .sun と同じ役） --- */
.yr-halo {
position: absolute; top: -8%; left: 50%; width: min(820px, 128%); aspect-ratio: 1.7;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(159, 224, 177, .22) 0, rgba(159, 224, 177, 0) 62%);
}
/* --- 四季の大きな影。四隅に置いて、1年を回っていることを面でも言う --- */
.yr-season {
position: absolute; line-height: 1; opacity: .1;
font-size: clamp(56px, 10vw, 116px);
}
.ys-1 { top: 15%; left: 2%; transform: rotate(-12deg); }
.ys-2 { top: 29%; right: 2%; transform: rotate(10deg); }
.ys-3 { bottom: 27%; left: 2%; transform: rotate(8deg); }
.ys-4 { bottom: 5%; right: 5%; transform: rotate(-10deg); }
/* 狭い画面では本文の裏に重なって読みにくくなるので、対角の2つに絞る */
@media (max-width: 700px) { .ys-2, .ys-3 { display: none; } }
.yr-ring { top: 5%; right: 7%; width: 210px; aspect-ratio: 1; border-style: dashed; }
@media (max-width: 700px) { .yr-ring { width: 130px; right: -8%; } }
.s8 { top: 26%; right: 22%; animation-delay: -1.8s; }
.s9 { bottom: 30%; left: 18%; animation-delay: -3.4s; }
/* --- 月の目盛り。導入の下に1年の軸を1本引いて、余白そのものを意味のある面にする --- */
.yr-ruler {
position: relative; display: flex; justify-content: space-between;
max-width: 520px; margin: 34px auto 0; padding-top: 20px;
font: 700 10.5px/1 'Roboto Mono', ui-monospace, monospace;
letter-spacing: .1em; color: rgba(207, 232, 216, .6);
}
/* 目盛りの本体（細かい刻み＋軸線）。両端はぼかして、線の切れ目を作らない */
.yr-ruler::before {
content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 10px;
background:
repeating-linear-gradient(90deg, rgba(159, 224, 177, .38) 0 1.5px, transparent 1.5px 23px),
linear-gradient(90deg, rgba(159, 224, 177, .26), rgba(159, 224, 177, .26)) 0 100% / 100% 1.5px no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.yr-ruler span { position: relative; }
/* 節目の月だけ、長い刻みを立てる */
.yr-ruler span::before {
content: ''; position: absolute; left: 50%; top: -20px; width: 2px; height: 14px;
background: rgba(255, 201, 60, .55);
}
@media (max-width: 560px) { .yr-ruler { max-width: 320px; font-size: 9.5px; } }
/* =========================================================================
2. #safe「CHECK GATES」＝ 検査場
------------------------------------------------------------------------
3つのゲートの話なので、地に方眼（図面）と、3色の光（01水色・02黄・03緑）を置く。
導入は検査枠に入れて、見出しが宙に浮いている状態をやめる。
========================================================================= */
#safe {
background-color: #10382a;
background-image:
radial-gradient(56% 38% at 12% 6%, rgba(131, 220, 255, .17) 0, transparent 62%),
radial-gradient(56% 38% at 50% 0%, rgba(255, 225, 90, .13) 0, transparent 62%),
radial-gradient(56% 38% at 88% 8%, rgba(154, 238, 135, .16) 0, transparent 62%),
radial-gradient(130% 62% at 50% 110%, rgba(8, 36, 26, .75) 0, transparent 62%);
}
/* --- 方眼。図面の紙に見立てる。下へ行くほど薄くして、ゲート本体の邪魔をしない --- */
.gt-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(159, 224, 177, .11) 1px, transparent 1px),
linear-gradient(90deg, rgba(159, 224, 177, .11) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .3) 44%, transparent 74%);
mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .3) 44%, transparent 74%);
}
/* --- 通過の印（レ点）を散らす。節の主題をそのまま柄にする --- */
.gt-checks {
position: absolute; inset: 0; opacity: .5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%239fe0b1' stroke-opacity='.22' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 52 l11 13 23-29'/%3E%3Cpath d='M148 30 l9 11 19-24'/%3E%3Cpath d='M74 152 l11 13 23-29'/%3E%3Cpath d='M186 176 l9 11 19-24'/%3E%3C/g%3E%3C/svg%3E");
background-size: 240px 240px;
-webkit-mask-image: radial-gradient(ellipse at 50% 18%, #000 10%, transparent 62%);
mask-image: radial-gradient(ellipse at 50% 18%, #000 10%, transparent 62%);
}
/* --- 導入を検査枠に入れる。四隅ではなく対角2箇所だけにして、囲いすぎない --- */
.gate-intro { position: relative; padding: 30px 20px 28px; }
@media (min-width: 768px) { .gate-intro { padding: 38px 34px 34px; } }
.gate-intro::before,
.gate-intro::after {
content: ''; position: absolute; width: 40px; height: 40px; pointer-events: none;
border: 3px solid rgba(223, 255, 85, .5);
}
.gate-intro::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.gate-intro::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
/* 枠の中の面。走査の光を1本流して、「今まさに検査している」状態にする */
.gi-panel {
position: absolute; inset: -6px -14px; z-index: -1; overflow: hidden;
border-radius: 26px; border: 1px solid rgba(255, 255, 255, .1);
background:
radial-gradient(120% 100% at 50% 0%, rgba(131, 220, 255, .12) 0, transparent 70%),
rgba(255, 255, 255, .035);
}
.gi-panel::after {
content: ''; position: absolute; top: -20%; left: -40%; width: 38%; height: 140%;
background: linear-gradient(100deg, transparent, rgba(131, 220, 255, .18), transparent);
animation: giSweep 7s linear infinite;
}
@keyframes giSweep { to { left: 130%; } }
/* =========================================================================
3. TRANSPARENCY（.trust-area）＝ 濃緑の上に紙を貼る
------------------------------------------------------------------------
#safe は縦に長い。同じ濃緑のまま最後まで来ると、どこで話が変わったのか
分からなくなっていた。ここから先は「聞かれる前に出す」＝別の話なので、
面ごと反転して、紙をテープで貼った形にする。
========================================================================= */
.trust-area {
position: relative; z-index: 1;
margin-top: 68px; padding: 40px 18px 30px;
border: 3px solid var(--ink); border-radius: 28px;
background-color: var(--paper);
background-image:
radial-gradient(rgba(18, 60, 43, .1) 1.5px, transparent 1.6px),
linear-gradient(180deg, #fffdf6 0, #f1f8ed 100%);
background-size: 16px 16px, 100% 100%;
box-shadow: 10px 10px 0 rgba(4, 26, 18, .38);
color: var(--ink);
}
@media (min-width: 760px) { .trust-area { padding: 48px 30px 34px; } }
/* 貼りつけのテープ。紙が「あとから貼られたもの」に見えるようにする */
.ta-tape {
position: absolute; top: -15px; width: 104px; height: 30px; z-index: 2;
border: 2.5px solid var(--ink); border-radius: 3px;
background: repeating-linear-gradient(45deg, #ffc93c 0 8px, #ffe6a1 8px 16px);
box-shadow: 3px 3px 0 rgba(4, 26, 18, .3);
}
.ta-l { left: 24px; transform: rotate(-6deg); }
.ta-r { right: 24px; transform: rotate(5deg); }
@media (max-width: 560px) {
.ta-tape { width: 76px; height: 24px; top: -12px; }
.ta-l { left: 14px; } .ta-r { right: 14px; }
}
/* 紙の中の装飾。角を丸く切り抜いて、透かしが枠からはみ出さないようにする */
.ta-deco {
position: absolute; inset: 0; z-index: 0; overflow: hidden;
border-radius: 25px; pointer-events: none;
}
.ta-deco .wm {
bottom: -4%; right: -4%; transform: rotate(-4deg);
-webkit-text-stroke-color: rgba(18, 60, 43, .09);
}
.ta-deco .ta-stripe {
position: absolute; top: 0; left: 0; width: 26%; height: 118px;
background: repeating-linear-gradient(-45deg, rgba(87, 191, 106, .26) 0 10px, transparent 10px 22px);
-webkit-mask-image: linear-gradient(135deg, #000, transparent 66%);
mask-image: linear-gradient(135deg, #000, transparent 66%);
}
/* 紙の上に載るので、見出し・本文の色を濃緑側へ戻す */
.trust-head, .trust-grid { position: relative; z-index: 1; }
.trust-head h3 { color: var(--ink); }
.trust-head p { color: var(--sub); }
.trust-head .gate-hl { color: var(--ink); text-decoration-color: var(--sun); }
.trust-area .eyebrow {
background: var(--sun); color: var(--ink);
border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
/* 3枚も、紙の上のステッカーとして描き直す（白いカードのままだと地に沈む） */
.trust-card {
background: #fff; border: 2.5px solid var(--ink); border-radius: 18px;
box-shadow: 4px 4px 0 var(--ink);
}
.trust-card:nth-child(2) { background: #fbfffc; }
.tc-kicker b { color: var(--leaf-dark); }
/* =========================================================================
4. #price「PRICE」＝ 陽だまりの券売所
------------------------------------------------------------------------
#target → #price → #start が3節続けてクリーム地で、どこまで読んだのか
分からなくなっていた。地色を黄に振り、上下をスカラップで切って別の帯にする。
========================================================================= */
#price {
background-color: var(--pr-bg);
background-image:
radial-gradient(92% 58% at 50% -10%, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, 0) 54%),
radial-gradient(68% 44% at 4% 102%, rgba(255, 122, 89, .16) 0, transparent 62%);
}
/* 上は #target のクリーム、下は #start の水色が食い込む */
#price .edge--top { --edge-fill: var(--cream); }
#price .edge--bottom { --edge-fill: var(--st-bg); }
/* 斜めのしるし。値札まわりの賑やかさを、面の角だけで出す */
.pr-stripe {
position: absolute; width: 46%; height: 220px;
background: repeating-linear-gradient(-45deg, rgba(255, 201, 60, .75) 0 12px, transparent 12px 26px);
}
.pr-s1 {
top: 0; left: -3%;
-webkit-mask-image: linear-gradient(150deg, #000, transparent 70%);
mask-image: linear-gradient(150deg, #000, transparent 70%);
}
.pr-s2 {
bottom: 0; right: -3%;
-webkit-mask-image: linear-gradient(-30deg, #000, transparent 70%);
mask-image: linear-gradient(-30deg, #000, transparent 70%);
}
/* 値札の柄。輪郭だけの札を敷いて、料金の節だと地でも分かるようにする */
.pr-tags {
position: absolute; inset: 0; opacity: .38;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='none' stroke='%23123c2b' stroke-opacity='.14' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M28 20 h46 l30 30 -46 46 -30 -30 z'/%3E%3Ccircle cx='46' cy='38' r='5'/%3E%3Cpath d='M104 108 h38 l24 24 -38 38 -24 -24 z'/%3E%3Ccircle cx='118' cy='122' r='4'/%3E%3C/g%3E%3C/svg%3E");
background-size: 190px 190px;
-webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 34%, #000 78%);
mask-image: radial-gradient(ellipse at 50% 40%, transparent 34%, #000 78%);
}
/* 黄の地に黄の点は沈むので、この節だけ点を濃緑に振る */
#price .dots { background-image: radial-gradient(rgba(18, 60, 43, .14) 2.6px, transparent 2.7px); }
#price .wm { -webkit-text-stroke-color: rgba(18, 60, 43, .1); }
/* =========================================================================
5. #start「HOW TO START」＝ 青写真の道
------------------------------------------------------------------------
#price と続けて長く感じる節なので、寒色へ振って対にする。
「はじめかたと日付」の節なので、方眼の上に破線の道を1本通す。
========================================================================= */
#start {
background-color: var(--st-bg);
background-image:
linear-gradient(180deg, rgba(255, 255, 255, .52) 0, rgba(255, 255, 255, 0) 26%),
radial-gradient(66% 42% at 94% 4%, rgba(255, 122, 89, .16) 0, transparent 60%),
radial-gradient(70% 46% at 2% 100%, rgba(87, 191, 106, .16) 0, transparent 62%);
}
#start .edge--top { --edge-fill: var(--pr-bg); }
#start .edge--bottom { --edge-fill: var(--paper); }
.st-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(24, 90, 140, .1) 1px, transparent 1px),
linear-gradient(90deg, rgba(24, 90, 140, .1) 1px, transparent 1px);
background-size: 38px 38px;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* 破線の道。上から下へ読むあいだ、ずっと1本の道の上にいる状態にする */
.st-route {
position: absolute; left: 0; right: 0; top: 12%; height: 300px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M-30 232 C 170 96 320 262 540 172 S 900 62 1230 196' fill='none' stroke='%23123c2b' stroke-opacity='.16' stroke-width='5' stroke-linecap='round' stroke-dasharray='3 18'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.st-pin {
position: absolute; line-height: 1; opacity: .16;
font-size: clamp(48px, 8vw, 92px);
}
.sp-2 { bottom: 9%; right: 6%; transform: rotate(8deg); }
#start .wm { -webkit-text-stroke-color: rgba(18, 60, 43, .1); }
/* =========================================================================
6. .last-cta「今日から、3月のことは忘れていい。」＝ フィナーレ
------------------------------------------------------------------------
最後なので、いちばん派手にする。放射・輪・紙吹雪を重ねて、
ここが終点だと面だけで分かるようにする。文字が読める明度は落とさない。
========================================================================= */
.last-cta {
overflow: hidden;
background-color: #0c3222;
background-image:
radial-gradient(120% 78% at 50% 2%, rgba(255, 201, 60, .24) 0, transparent 58%),
radial-gradient(92% 60% at 6% 100%, rgba(79, 184, 239, .2) 0, transparent 60%),
radial-gradient(92% 60% at 96% 86%, rgba(255, 122, 89, .22) 0, transparent 60%);
}
/* --- 放射。ゆっくり回して、締めの1画面だけ動きを持たせる --- */
.fin-rays {
position: absolute; top: 30%; left: 50%; width: 150vmax; aspect-ratio: 1;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 201, 60, .16) 0deg 6deg, transparent 6deg 14deg);
-webkit-mask-image: radial-gradient(circle at center, #000 0, rgba(0, 0, 0, .55) 26%, transparent 56%);
mask-image: radial-gradient(circle at center, #000 0, rgba(0, 0, 0, .55) 26%, transparent 56%);
animation: finSpin 110s linear infinite;
}
@keyframes finSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* 2枚目は珊瑚色で逆回り。速さを変えて重ねると、光が脈打って見える */
.fin-rays--b {
background: repeating-conic-gradient(from 3deg at 50% 50%, rgba(255, 122, 89, .13) 0deg 4deg, transparent 4deg 18deg);
animation-duration: 160s; animation-direction: reverse;
}
/* --- 同心円。3色を1本ずつ引いて、真ん中のロゴを的の中心にする --- */
.fin-ring {
position: absolute; top: 30%; left: 50%; border-radius: 50%;
transform: translate(-50%, -50%); border: 3px solid;
}
.fr-1 { width: min(320px, 78vw); aspect-ratio: 1; border-color: rgba(255, 201, 60, .38); }
.fr-2 { width: min(480px, 108vw); aspect-ratio: 1; border-color: rgba(79, 184, 239, .3); border-style: dashed; }
.fr-3 { width: min(660px, 142vw); aspect-ratio: 1; border-color: rgba(255, 122, 89, .24); }
/* --- 紙吹雪。上から降らせる。形と色は .confetti を使い回す --- */
.last-cta .confetti { border-color: rgba(255, 255, 255, .55); box-shadow: 2px 2px 0 rgba(0, 0, 0, .28); }
.fin-fall { top: -8%; animation: finFall 9s linear infinite; }
@keyframes finFall {
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateY(760px) rotate(680deg); opacity: 0; }
}
/* --- 主役まわり --- */
/* 締めはロゴを大きく出す。ここだけは小さな印ではなく、看板として置く
（lp_chill.css の 132px を上書きする） */
.last-cta img.mark { width: min(300px, 70vw); margin: 0 auto 22px; }
.last-cta .mark { filter: drop-shadow(0 0 30px rgba(255, 201, 60, .5)); }
/* 狭い画面では「確定申告のことは／忘れていい。」で折る。
自然改行に任せると最後の「い。」だけが3行目に落ちる（1行が14文字で入らない）。
字を小さくして1行に収める手もあるが、締めの見出しなので大きさのほうを残す。 */
.lc-br { display: none; }
@media (max-width: 760px) { .lc-br { display: inline; } }
.last-cta h2 {
color: #fffdf6;
text-shadow:
0 0 18px rgba(255, 201, 60, .3),
3px 3px 0 #ff7a59,
6px 6px 0 rgba(12, 50, 34, .7);
}
.last-cta h2::after { opacity: 1; }
.last-cta p { color: #d8ecdf; }
.last-cta .lowest-line { border-color: rgba(255, 201, 60, .45); background: rgba(12, 50, 34, .45); }
/* ボタンは、この1つだけ光らせる。押したときの沈み込みは残す */
.last-cta .cta-btn {
font-size: 18px; padding: 19px 42px;
box-shadow: 5px 5px 0 var(--ink), 0 0 0 5px rgba(255, 201, 60, .35), 0 0 44px rgba(255, 201, 60, .3);
}
.last-cta .cta-btn:hover { box-shadow: 3px 3px 0 var(--ink), 0 0 0 5px rgba(255, 201, 60, .5), 0 0 52px rgba(255, 201, 60, .42); }
.last-cta .cta-btn:active { box-shadow: 0 0 0 var(--ink), 0 0 0 5px rgba(255, 201, 60, .5); }