@charset "utf-8";
/* =========================================================
Design tokens
---------------------------------------------------------
方針：ニュートラル（温かみのあるオフホワイト〜ニアブラック）＋
アクセントは「1色だけ」。色数を絞り、階層は余白・線幅・級数で作る。
========================================================= */
:root{
/* ink：真っ黒は使わない。わずかに緑みを含んだ濃色 */
--ink: #222222; /* 本文・見出し（純黒は使わない。15.9:1） */
--ink-2: #6d6d6d; /* 補足テキスト（5.2:1） */
--ink-3: #a3a3a3; /* プレースホルダ */
/* neutral */
--paper: #ffffff;
/* ニュートラルは色みを持たせない。
背景が色づいていると、アクセントの青が鮮やかに見えなくなる */
--bg: #f6f6f6; /* セクションの塗り分け */
--bg-2: #ededed; /* もう一段沈めたブロック */
--hair: #e5e5e5; /* ヘアライン */
--hair-2: #d1d1d1; /* 入力欄など、少し強い線 */
--surround: #d9dadc; /* PC表示時、コンテンツ列の外側 */
/* accent（このサイトで使う唯一の有彩色）
幅広い年齢層向けに、落ち着いた深めのティール。
白文字を載せるのは --accent（4.0:1／大きい太字用）、
小さい文字やバッジは --accent-d（6.2:1）を使う。 */
/* 明るい黄緑。ここまで明るくすると白文字は載らない（2.4:1）ので、
--accent の面には白ではなく --ink を載せる（6.8:1）。
文字やアイコンなど「線」で使う色は --accent-d（白地で6.5:1）。 */
/* -------- カラーパレット -----------------------------------
Amber Gold #FFBE0B / Blaze Orange #FB5607 / Neon Pink #FF006E
Blue Violet #8338EC / Azure Blue #3A86FF
面に白文字を載せる用・白地に小さい文字を置く用は、
コントラスト4.5:1を満たすまで暗くした派生を用意している
------------------------------------------------------------ */
/* ファーストビューの地色。Amber Gold より黄色寄りに振っている */
--sun: #ffd60a;
--sun-2: #f5c800; /* 光条の濃いほう */
--sun-l: #fff9e0; /* 淡い面 */
--bg-worry: #f4f4f5; /* お悩みセクションの地（薄いグレー） */
--bg-survey: #f0f6ff; /* アンケートセクションの地（淡ブルー） */
--ink-on-sun: #4a4a4a; /* 黄色地の上の小さい文字（6.3:1） */
/* Blaze Orange：押せるものだけに使う（CTA・送信ボタン） */
--cta: #fb5607;
--cta-d: #9c3504; /* ボタンの立体に見せる下辺 */
--cta-h: #e04d05; /* ホバー時 */
--cta-t: #ce4706; /* 白地に置く文字・アイコン（4.6:1） */
/* Azure Blue：情報のラベルと選択状態
（バッジ・番号・POINT・Q番号・チェック済み）
面と文字には、彩度を落とさずに白文字4.7:1を満たす #006aff を使う */
--accent: #3a86ff; /* 枠線・細い線 */
--accent-cta: #006aff; /* 白文字を載せる面（4.7:1） */
--accent-d: #006aff; /* 白地に置く文字・アイコン（4.7:1） */
--accent-l: #e6f0ff; /* 淡い面 */
--accent-line:rgba(0,106,255,.42);
/* Neon Pink：強調・マーカー */
--pink: #ff006e;
--pink-d: #e60063; /* 文字（白地4.6:1） */
--pink-l: #ffe0ee; /* 淡い面 */
--accent-mark:#ffb8d6; /* マーカーの帯（濃色文字が乗る） */
/* Blue Violet：現在は未使用（差し色の予備） */
--violet: #8338ec;
--violet-l: #f0e7fd;
/* 送信完了（成功を示す緑） */
--green: #1a9c5b;
--green-d: #147a47;
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 22px;
--sp: 430px; /* PC表示時のコンテンツ列幅（スマホ幅で中央寄せ） */
/* 可変サイズの基準単位。ビューポートではなくコンテンツ列の幅に追従させる
（SP = 1vw / PC = 列幅の1%）。clamp() の中で calc(N*var(--u)) として使う */
--u: 4.3px; /* 解釈できない環境向けの保険 */
--u: min(1vw, calc(var(--sp) / 100));
--gutter: 22px;
/* 英数字は DM Sans、和文は 見出し=M PLUS 2 / 本文=Noto Sans JP。
DM Sans を先頭に書くと、英数字だけ DM Sans が拾い、
和文はグリフを持たないので次の和文書体に落ちる。
数字（01・Q1・4,000円・約1分の「1」など）もこのルールに従う。 */
--font-head: "DM Sans", "M PLUS 2", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
--font-body: "DM Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
/* =========================================================
Base
========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{
scroll-behavior:smooth;-webkit-text-size-adjust:100%;
overflow-x:hidden;
background-color:var(--surround);
}
body{
/* PCでもスマホ幅のまま中央に置く（両サイドは html の背景が見える） */
max-width:var(--sp);
margin:0 auto;
min-height:100vh;
font-family:var(--font-body);
font-size:16px;
line-height:1.9;
color:var(--ink);
background:var(--paper);
overflow-x:hidden;
/* 日本語の文字組
palt … 約物（、。（）など）を詰めてアキを均す
letter-spacing … 和文はわずかに広げたほうが読みやすい
※ word-break:auto-phrase は文節単位でしか改行しないため、
長文に効かせると行末が早く終わって右側が大きく空く。
短い見出し・ラベルにだけ限定して適用する（下部で指定） */
font-feature-settings:"palt" 1;
letter-spacing:.02em;
box-shadow:0 0 0 1px rgba(34,34,34,.06), 0 2px 40px rgba(34,34,34,.10);
}
img,svg{max-width:100%;display:block}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;text-decoration:none}
/* このサイトでは斜体を使わない */
em,i,address{font-style:normal}
button{font:inherit;color:inherit}
.container{width:100%;margin-inline:auto;padding-inline:var(--gutter)}
.sp-only{display:inline}
/* 見出しは各行の長さを揃える（中央揃えで効く）。字間はやや詰める */
h1,h2,h3,
/* 見出しの直後のリード文は、見出しと1つの塊として読ませるため間隔を詰める
（リードが無いセクションの見出し下は、そのままの余白を保つ） */
/* 文節改行は短いテキストのみ。長文は通常の折り返しにして行末を揃える */
/* 折り返し位置は
で明示する。
white-space:nowrap は、フォント環境によって語句が親の幅を超えたときに
そのまま右へはみ出すため、レイアウト制御には使わない */
/* マーカーは淡いアクセント。文字色は ink のまま読みやすさを保つ */
/* マーカー：背景グラデーションだと行の高さ次第で帯の位置がずれるため、
擬似要素で高さと位置を明示した帯を文字の後ろに敷く */
.mark{
position:relative;
display:inline-block;
padding-inline:.08em;
}
.mark::before{
content:"";position:absolute;z-index:-1;
left:0;right:0;bottom:.1em;
height:.44em;
background:var(--accent-mark);
border-radius:1px;
}
/* 行まるごとを引く場合。折り返しても崩れないよう、疑似要素ではなく
背景グラデーションで描き、行ごとに帯を引き直す */
.mark--line{
display:inline;padding:0;
background:linear-gradient(transparent 58%, var(--accent-mark) 58%,
var(--accent-mark) 92%, transparent 92%);
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
.mark--line::before{display:none}
.underline{
background:linear-gradient(transparent 66%, var(--accent-mark) 66%);
}
/* =========================================================
Buttons — フラット。グラデーション・光沢・浮き影は使わない
========================================================= */
.btn{
position:relative;
display:inline-flex;align-items:center;justify-content:center;gap:.7em;
width:100%;max-width:460px;
padding:19px 24px;
font-family:var(--font-head);font-weight:800;
font-size:clamp(16px,calc(4.1*var(--u)),19px);
line-height:1.4;text-align:center;letter-spacing:.02em;
color:#fff;background:var(--cta);
border:0;border-radius:999px;
box-shadow:0 5px 0 var(--cta-d);
cursor:pointer;
transition:background .16s ease, transform .08s ease, box-shadow .08s ease;
}
.btn:hover{background:var(--cta-h)}
/* 押すと沈み込む */
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--cta-d)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn__label{display:block;letter-spacing:.03em}
/* 所要時間などの注釈はボタンの中へ。
白文字のままだと小さい文字のコントラストが足りないので、
地をひと段暗くしたチップに載せる（4.9:1） */
.btn__sub{
display:inline-block;margin-top:6px;padding:3px 12px;
font-family:var(--font-body);font-weight:700;font-size:11px;
letter-spacing:.02em;
background:rgba(0,0,0,.18);border-radius:999px;
}
.btn--stack{padding:15px 24px}
.btn--stack .btn__body{display:block;text-align:center;min-width:0}
.btn--sm{
width:auto;padding:9px 16px;font-size:13px;letter-spacing:.01em;
}
.btn--sm .btn__label{font-size:13px}
.btn__note{
margin-top:14px;font-size:12.5px;line-height:1.75;color:var(--ink-2);text-align:center;
}
/* 安心材料。CTAのすぐ下に、事実だけを小さく並べる */
.trust{
display:flex;flex-direction:column;align-items:center;gap:9px;
margin-top:18px;
}
.trust li{
display:flex;align-items:center;gap:8px;
font-size:13px;line-height:1.5;color:var(--ink-2);font-weight:500;
}
.trust__icon{
display:grid;place-items:center;width:19px;height:19px;flex:none;
color:var(--accent-d);
}
.trust__icon svg{width:17px;height:17px}
.trust__icon--inline{
display:inline-grid;vertical-align:-4px;margin-right:5px;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* =========================================================
Header
========================================================= */
.header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--hair);
}
.header__inner{
margin-inline:auto;
padding:11px var(--gutter);
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.logo{display:flex;align-items:center;gap:5px}
/* ロゴはFVと同じ家のイラストを使う（線の色などはCSS変数で受け渡し） */
/* イラストは縦長（110:157）なので、幅で指定すると高さが1.4倍になって大きく見える。
隣のロゴテキスト2行ぶんの高さに合わせ、高さ基準で指定する */
.logo__mark{
display:grid;place-items:center;
height:32px;flex:none;
--il-line:var(--ink);
--il-accent:var(--accent-cta);
--il-gray:var(--hair-2);
--il-paper:var(--paper);
}
.logo__mark svg{height:32px;width:auto;display:block}
.logo__text{
font-family:var(--font-head);font-weight:800;
font-size:12.5px;line-height:1.32;letter-spacing:0;
}
.logo__text b{font-weight:800;color:var(--accent-d)}
.header__cta{flex:none}
/* =========================================================
Hero
========================================================= */
/* FVのイラスト（ソコスト「IoT関連」から家＋Wi-Fiを切り出し）。
線・アクセント・グレーをCSS変数で受けているので、サイトの色に追従する */
/* FVは 前置き → 大見出し → 1行の要約 → CTA → 補足 の順。
CTAを折り返しより上に置くのが最優先。補足はCTAの下に小さく回す */
/* 2行目も同じ級数。行を分けるだけで、大きさは変えない */
/* 級数を上げず、色と太さだけで強調する（行のベースラインを揺らさない） */
/* 補足はCTAの下。チェックの位置を揃えた左揃えのリストを中央に置く */
/* 白いピルにする。inline-grid（内容ぶんの幅）だと行ごとに幅が変わって
端が揃わないため、grid で全幅に揃える */
.tick{
flex:none;display:grid;place-items:center;
width:17px;height:17px;
color:#fff;background:var(--accent-cta);border-radius:50%;
}
.tick svg{width:11px;height:11px}
/* =========================================================
Section common
========================================================= */
.section{position:relative;padding:clamp(40px,calc(9*var(--u)),56px) 0}
.section[id],.hero{scroll-margin-top:60px}
.section--tint{background:var(--bg)}
/* セクション番号：長い罫線をやめ、丸バッジに。
見出しの下に短いアクセントの罫を1本だけ置いて締める */
.section__lead{
margin:0 0 clamp(16px,calc(4*var(--u)),20px);text-align:center;
font-family:var(--font-head);font-weight:700;
font-size:clamp(15px,calc(4*var(--u)),17px);line-height:1.75;
}
/* =========================================================
② Worries
========================================================= */
/* お悩みセクションの導入イラスト（ソコスト「悩む男女（頭上吹き出し）」） */
.worryIl{
display:block;width:auto;height:clamp(104px,calc(27*var(--u)),126px);
margin:0 auto 18px;
}
.worryList{
display:grid;gap:0;
border:1px solid var(--hair);border-radius:var(--radius);
background:var(--paper);overflow:hidden;
}
.worryCard{
display:flex;align-items:center;gap:12px;
padding:12px 15px;
}
.worryCard + .worryCard{border-top:1px solid var(--hair)}
.worryCard__icon{
flex:none;display:grid;place-items:center;
width:34px;height:34px;
color:var(--pink-d);
background:var(--pink-l);border-radius:9px;
}
.worryCard__icon svg{width:19px;height:19px}
.worryCard__text{
font-family:var(--font-head);font-weight:700;
font-size:clamp(14.5px,calc(3.8*var(--u)),16px);line-height:1.55;
}
.worryCard__text b{font-weight:800}
.balloon{
position:relative;margin-top:26px;
padding:20px 18px;text-align:center;
background:var(--pink-l);
border:1.5px solid var(--pink);border-radius:var(--radius);
}
/* 尻尾は「輪郭用」と「塗り用」の三角を重ね、線を途切れさせずに深く差し込む */
.balloon::before,
.balloon::after{
content:"";position:absolute;left:50%;
width:0;height:0;border-style:solid;
}
.balloon::before{
top:-15px;transform:translateX(-50%);
border-width:0 15px 15px;
border-color:transparent transparent var(--pink);
}
.balloon::after{
top:-13px;transform:translateX(-50%);
border-width:0 13px 13px;
border-color:transparent transparent var(--pink-l);
}
.balloon p{
position:relative;
font-family:var(--font-head);font-weight:700;
font-size:clamp(15px,calc(4*var(--u)),17px);line-height:1.7;
}
.balloon__strong{color:var(--pink-d);font-weight:800}
/* =========================================================
③ Points
========================================================= */
/* ソコストのイラストをそのまま使う（元の配色のまま。線の色・青が
サイトのトーンと揃っているため加工していない） */
/* =========================================================
Survey（④の誘導文＋フォームを1ブロックに統合）
========================================================= */
.section--survey{background:var(--bg-survey)}
.surveyPanel{
background:var(--paper);
border:1px solid var(--hair);border-radius:var(--radius-lg);
overflow:hidden;
}
.surveyIntro{
padding:clamp(20px,calc(5*var(--u)),26px) clamp(18px,calc(4.5*var(--u)),24px);
text-align:center;
background:var(--accent-l);
border-bottom:1px solid var(--hair);
}
.surveyIntro__badge{
display:inline-block;margin-bottom:14px;padding:5px 15px;
font-family:var(--font-head);font-weight:800;font-size:11.5px;letter-spacing:.08em;
color:#fff;background:var(--accent-cta);border-radius:999px;
}
.surveyIntro__title{
font-family:var(--font-head);font-weight:800;
font-size:clamp(20px,calc(5.4*var(--u)),25px);line-height:1.45;letter-spacing:-.005em;
}
/* 区切り線ではなく、白いピルで囲って独立させる */
.surveyIntro__time{
display:inline-flex;align-items:center;gap:7px;
margin-top:14px;padding:6px 13px;
font-family:var(--font-head);font-weight:700;font-size:11.5px;
color:var(--ink-2);
background:var(--paper);border-radius:999px;
}
.surveyIntro__time b{color:var(--accent-d);font-size:1.15em;font-weight:800}
.surveyIntro__time svg{width:13px;height:13px;flex:none;color:var(--accent-d)}
/* =========================================================
Form
========================================================= */
.form{
background:var(--paper);
border:0;border-radius:0;
padding:clamp(18px,calc(4.5*var(--u)),24px) clamp(16px,calc(4*var(--u)),22px)
clamp(20px,calc(5*var(--u)),26px);
}
.fieldset{border:0;margin:0;padding:0}
/* 見出し側に下罫線があるため、ここは線を引かず余白だけで離す。
間隔を広く取って、見出しが「下の項目のもの」と分かるようにする */
.fieldset + .fieldset{margin-top:44px}
.fieldset__legend{padding:0;width:100%;margin-bottom:16px}
/* フォーム内の見出し。番号バッジ＋下罫線で、
セクション見出しと区別しつつ回答の進み具合が分かるようにする */
.fieldset__mark{
display:flex;align-items:flex-start;gap:10px;
padding-bottom:12px;
border-bottom:1px solid var(--hair);
font-family:var(--font-head);font-weight:800;
font-size:clamp(14.5px,calc(3.8*var(--u)),16px);line-height:1.5;
}
.fieldset__step{
flex:none;display:grid;place-items:center;
width:22px;height:22px;margin-top:.05em;
font-size:11.5px;letter-spacing:0;
color:#fff;background:var(--accent-cta);border-radius:50%;
}
.field{margin-bottom:18px}
.field:last-of-type{margin-bottom:0}
.field__label{
display:block;margin-bottom:9px;
font-family:var(--font-head);font-weight:700;
font-size:clamp(14.5px,calc(3.8*var(--u)),16px);line-height:1.7;
}
.qnum{
display:inline-block;margin-right:.5em;
font-family:var(--font-head);font-weight:800;font-size:14px;letter-spacing:.04em;
color:var(--accent-d);
}
.req{
display:inline-block;margin-right:.5em;padding:2px 7px;
font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.04em;
color:#fff;background:var(--pink-d);border-radius:3px;
transform:translateY(-2px);
}
.multi{
display:inline-block;margin-right:.5em;padding:2px 7px;
font-family:var(--font-body);font-size:10.5px;font-weight:700;
color:var(--ink-2);background:var(--bg-2);border-radius:3px;
transform:translateY(-2px);
}
.field__help{margin-top:7px;font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.field__error{
display:none;margin-top:7px;
font-size:12.5px;font-weight:700;color:var(--pink-d);
}
.field.is-error .field__error{display:block}
.field__input{
width:100%;padding:14px 14px;
font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--ink);
background:var(--paper);
border:1px solid var(--hair-2);border-radius:var(--radius-sm);
transition:border-color .14s ease, box-shadow .14s ease;
}
.field__input::placeholder{color:var(--ink-3)}
.field__input:focus{
outline:none;border-color:var(--ink);
box-shadow:0 0 0 3px rgba(34,34,34,.10);
}
.field.is-error .field__input{border-color:var(--pink);background:var(--pink-l)}
/* choices */
.choices{display:grid;gap:7px}
.choice{display:block;position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice__box{
display:flex;align-items:center;gap:12px;
min-height:52px;padding:11px 15px;
font-size:15.5px;font-weight:500;line-height:1.55;
background:var(--paper);
border:1px solid var(--hair-2);border-radius:var(--radius-sm);
transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.choice__box::before{
content:"";flex:none;width:20px;height:20px;
background:var(--paper);border:1.5px solid var(--hair-2);
border-radius:50%;transition:all .14s ease;
}
.choice input[type="checkbox"] + .choice__box::before{border-radius:5px}
.choice:hover .choice__box{border-color:var(--ink-3)}
.choice input:focus-visible + .choice__box{outline:2px solid var(--ink);outline-offset:2px}
.choice input:checked + .choice__box{
background:var(--accent-l);border-color:var(--accent);
font-weight:700;box-shadow:inset 0 0 0 1px var(--accent);
}
.choice input:checked + .choice__box::before{
background:var(--accent-cta);border-color:var(--accent-cta);
box-shadow:inset 0 0 0 3.5px var(--accent-l);
}
.choice input[type="checkbox"]:checked + .choice__box::before{
box-shadow:none;background-color:var(--accent-cta);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
background-size:13px;background-position:center;background-repeat:no-repeat;
}
.field.is-error .choice__box{border-color:var(--pink)}
/* agree */
.field--agree{
margin-top:22px;padding:14px 12px;
background:var(--bg);border-radius:var(--radius-sm);
}
.agree{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.agree input{position:absolute;opacity:0;width:0;height:0}
.agree__box{
flex:none;width:22px;height:22px;margin-top:2px;
background:var(--paper);border:1.5px solid var(--hair-2);border-radius:5px;
transition:all .14s ease;
}
.agree input:checked + .agree__box{
background:var(--accent-cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") center/14px no-repeat;
border-color:var(--accent-cta);
}
.agree input:focus-visible + .agree__box{outline:2px solid var(--ink);outline-offset:2px}
.agree__text{font-size:14px;line-height:1.75;font-weight:500}
.agree__text a{color:var(--accent-d);text-decoration:underline;font-weight:700}
.field--agree.is-error{background:var(--pink-l)}
/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__submit{margin-top:22px;text-align:center}
.form__submit .btn{margin-inline:auto}
.btn--submit[aria-busy="true"]{opacity:.6;pointer-events:none}
.form__alert{
margin-top:14px;padding:11px 14px;
font-size:13px;font-weight:700;line-height:1.7;color:var(--pink-d);
background:var(--pink-l);border-radius:var(--radius-sm);
text-align:center;
}
/* thanks */
.thanks{
text-align:center;
padding:clamp(32px,calc(7*var(--u)),44px) clamp(20px,calc(5*var(--u)),28px);
background:var(--paper);
border:1px solid var(--hair);border-radius:var(--radius-lg);
}
.thanks__icon{
display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;
color:#fff;background:var(--green);border-radius:50%;
box-shadow:0 3px 0 var(--green-d);
}
.thanks__icon svg{width:28px;height:28px;stroke-width:3}
.thanks__title{
font-family:var(--font-head);font-weight:800;
font-size:clamp(19px,calc(5*var(--u)),23px);line-height:1.4;
}
.thanks__text{margin-top:12px;font-size:14px;line-height:1.9;color:var(--ink-2)}
/* =========================================================
Footer
========================================================= */
.footer{
background:var(--bg);color:var(--ink-2);
padding:clamp(28px,calc(6*var(--u)),38px) 0
calc(clamp(28px,calc(6*var(--u)),38px) + env(safe-area-inset-bottom));
}
.footer__title{
font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--ink);
margin-bottom:12px;
}
/* ※ を左にぶら下げ、本文の頭を揃える */
.notes{display:grid;gap:9px}
/* グリッドにすると が別のグリッド項目になって
1文字幅の列に落ちるため、ぶら下げインデントで組む */
.notes li{position:relative;padding-left:1.1em;font-size:13px;line-height:1.85;color:var(--ink-2)}
.notes li::before{content:"※";position:absolute;left:0;color:inherit}
.footer__copy{
margin-top:26px;padding-top:18px;
border-top:1px solid var(--hair-2);
font-size:12px;color:var(--ink-3);
}
/* =========================================================
Fixed CTA
========================================================= */
.fixedCta{
position:fixed;left:50%;bottom:0;z-index:60;
width:100%;max-width:var(--sp);
padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.93);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-top:1px solid var(--hair);
transform:translate(-50%,110%);
transition:transform .28s ease;
}
.fixedCta.is-show{transform:translate(-50%,0)}
.btn--fixed{padding:11px 20px;font-size:15.5px;box-shadow:0 4px 0 var(--cta-d)}
.btn--fixed .btn__sub{margin-top:4px;font-size:10.5px;padding:2px 10px}
/* =========================================================
Reveal
========================================================= */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.fixedCta{transition:none}
}
/* =========================================================
プライバシーポリシー等の文書ページ
========================================================= */
.legal{
padding:34px 0 60px;
background:var(--paper);
}
.legal{ position:relative; }
.legal__head{
padding-bottom:24px;
margin-bottom:32px;
border-bottom:2px solid var(--hair);
}
.legal__eyebrow{
margin:0 0 6px;
font-family:var(--font-head);
font-size:12px;
font-weight:700;
letter-spacing:.08em;
color:var(--accent-d);
}
.legal__title{
margin:0 0 14px;
font-family:var(--font-head);
font-size:clamp(22px,calc(6*var(--u)),26px);
font-weight:800;
line-height:1.5;
letter-spacing:.01em;
}
.legal__lead{
margin:0;
font-size:14px;
line-height:1.95;
color:var(--ink-2);
}
.legal__sec{
margin-bottom:34px;
scroll-margin-top:20px;
}
.legal__sec:last-of-type{ margin-bottom:0; }
.legal__h2{
display:flex;
align-items:flex-start;
gap:10px;
margin:0 0 14px;
font-family:var(--font-head);
font-size:16.5px;
font-weight:800;
line-height:1.55;
}
.legal__num{
flex:0 0 auto;
display:grid;
place-items:center;
min-width:24px;
height:24px;
/* 見出し1行目の行高（16.5px×1.55）の中央に揃える。2行に折り返しても1行目に付く */
margin-top:calc((16.5px * 1.55 - 24px) / 2);
padding:0 6px;
border-radius:6px;
background:var(--accent-cta);
color:#fff;
font-family:var(--font-head);
font-size:12px;
font-weight:800;
letter-spacing:0;
}
.legal p{
margin:0 0 12px;
font-size:14px;
line-height:1.95;
color:var(--ink-2);
}
.legal p:last-child{ margin-bottom:0; }
.legal__list{
margin:0 0 12px;
padding:0;
list-style:none;
}
.legal__list li{
display:grid;
grid-template-columns:1.1em 1fr;
font-size:14px;
line-height:1.95;
color:var(--ink-2);
}
.legal__list li::before{
content:"・";
color:inherit;
}
.legal__dl{
margin:14px 0;
padding:16px 18px;
border-radius:12px;
background:var(--bg);
font-size:14px;
line-height:1.9;
}
.legal__dl:first-child{ margin-top:0; }
.legal__dl:last-child{ margin-bottom:0; }
.legal__dl dt{
font-weight:700;
color:var(--ink);
}
.legal__dl dd{
margin:0 0 10px;
color:var(--ink-2);
}
.legal__dl dd:last-child{ margin-bottom:0; }
.legal a{
color:var(--accent-d);
text-decoration:underline;
text-underline-offset:3px;
}
.legal__contact{ font-weight:700; }
/* .legal p の margin より優先させるため .legal を付ける */
.legal .legal__date{
margin:28px 0 0;
font-size:13px;
color:var(--ink-3);
}
/* .legal p の margin より優先させるため .legal を付ける（制定日との間隔） */
.legal .legal__back{
margin:30px 0 0;
text-align:center;
}
/* 本文リンクの青・下線をボタンには効かせない */
.legal .btn{
color:#fff;
text-decoration:none;
}
.notes a{
color:var(--accent-d);
text-decoration:underline;
text-underline-offset:3px;
}
/* =========================================================
① ファーストビュー（キャンペーン）
========================================================= */
.hero{
position:relative;
overflow:hidden;
padding:26px 0 30px;
background:var(--sun);
text-align:center;
}
/* 高さを黄色エリア基準で決めて、下端まで放射が届くようにする。
正方形の画像なので aspect-ratio:1 で幅も自動的に足りる。
中心は上から約4割の位置（見出しと景品カードの境目あたり）。 */
.hero__sun{
position:absolute;
top:-22%;
left:50%;
height:126%;
aspect-ratio:1;
translate:-50% 0;
/* 元素材と同じ 22本構成。画像だと拡大時に甘くなるため
円錐グラデーションで描画している（常に鮮明・容量0） */
background:
/* 光条が収束する中心は密になって目立つので、平らな円で伏せる */
radial-gradient(circle at 50% 50%,
var(--sun) 0 5%, rgba(255,214,10,0) 9%),
repeating-conic-gradient(from 0deg,
var(--sun) 0deg 8.1818deg,
var(--sun-2) 8.1818deg 16.3636deg);
/* 円に切り抜くと下の角で光条が弧になって途切れるので、正方形のまま敷く。
正方形はFVより一回り大きく、はみ出た分は .hero の overflow:hidden で見切れる */
pointer-events:none;
}
.hero__inner{
position:relative;
padding:0 20px;
}
/* CTA から下は明るい地。青との境目を斜めにして動きを出す */
.hero__foot{
position:relative;
margin-top:-1px;
padding:26px 18px 30px;
background:var(--sun-l);
}
/* \ 〜 / の煽り */
.hero__kicker{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
margin:0 0 8px;
font-size:12.5px;
font-weight:700;
color:var(--ink);
}
.hero__kicker::before,
.hero__kicker::after{
content:"";
width:16px;
height:1.5px;
background:currentColor;
opacity:.75;
}
.hero__kicker::before{ rotate:66deg; }
.hero__kicker::after{ rotate:-66deg; }
/* 青いバッジ */
.hero__badge{
display:inline-block;
margin:0 0 14px;
padding:5px 15px;
border-radius:999px;
background:var(--accent-cta);
color:#fff;
font-family:var(--font-head);
font-size:12px;
font-weight:800;
letter-spacing:.02em;
box-shadow:0 2px 0 rgba(0,0,0,.14);
}
/* 大見出し */
.hero__title{
margin:0 0 12px;
font-family:var(--font-head);
font-weight:800;
line-height:1.28;
color:var(--ink);
/* 落ち影は filter で。グラデ文字と白フチの両方にまとめて効く */
filter:drop-shadow(0 6px 5px rgba(150,80,0,.45));
}
/* 2行組み。長いほうの行「豪華プレゼントが」8文字が
収まるサイズに合わせている */
.hero__titleBig{
position:relative;
display:block;
font-size:clamp(29px,calc(9.6*var(--u)),41px);
letter-spacing:.01em;
}
/* 半角の「!」は和文より小ぶりに見えるので少し大きくする */
.hero__titleBig i{
font-style:normal;
font-size:1.18em;
vertical-align:-.02em;
}
.tt{ display:block; }
/* 後ろ：白ベタ＋丸い白フチ。
円周上に置いた影の集合で作る。24方向だと角度間隔が15°あって
外周に凹凸（ガビつき）が出るため、外周64・中周32・内周16の
三重リングにして間隔を5.6°まで詰め、内側も隙間なく埋めている */
.tt--outline{
position:absolute;
inset:0;
color:#fff;
text-shadow:
0.160em 0.000em 0 #fff,
0.159em 0.016em 0 #fff,
0.157em 0.031em 0 #fff,
0.153em 0.046em 0 #fff,
0.148em 0.061em 0 #fff,
0.141em 0.075em 0 #fff,
0.133em 0.089em 0 #fff,
0.124em 0.102em 0 #fff,
0.113em 0.113em 0 #fff,
0.102em 0.124em 0 #fff,
0.089em 0.133em 0 #fff,
0.075em 0.141em 0 #fff,
0.061em 0.148em 0 #fff,
0.046em 0.153em 0 #fff,
0.031em 0.157em 0 #fff,
0.016em 0.159em 0 #fff,
0.000em 0.160em 0 #fff,
-0.016em 0.159em 0 #fff,
-0.031em 0.157em 0 #fff,
-0.046em 0.153em 0 #fff,
-0.061em 0.148em 0 #fff,
-0.075em 0.141em 0 #fff,
-0.089em 0.133em 0 #fff,
-0.102em 0.124em 0 #fff,
-0.113em 0.113em 0 #fff,
-0.124em 0.102em 0 #fff,
-0.133em 0.089em 0 #fff,
-0.141em 0.075em 0 #fff,
-0.148em 0.061em 0 #fff,
-0.153em 0.046em 0 #fff,
-0.157em 0.031em 0 #fff,
-0.159em 0.016em 0 #fff,
-0.160em 0.000em 0 #fff,
-0.159em -0.016em 0 #fff,
-0.157em -0.031em 0 #fff,
-0.153em -0.046em 0 #fff,
-0.148em -0.061em 0 #fff,
-0.141em -0.075em 0 #fff,
-0.133em -0.089em 0 #fff,
-0.124em -0.102em 0 #fff,
-0.113em -0.113em 0 #fff,
-0.102em -0.124em 0 #fff,
-0.089em -0.133em 0 #fff,
-0.075em -0.141em 0 #fff,
-0.061em -0.148em 0 #fff,
-0.046em -0.153em 0 #fff,
-0.031em -0.157em 0 #fff,
-0.016em -0.159em 0 #fff,
-0.000em -0.160em 0 #fff,
0.016em -0.159em 0 #fff,
0.031em -0.157em 0 #fff,
0.046em -0.153em 0 #fff,
0.061em -0.148em 0 #fff,
0.075em -0.141em 0 #fff,
0.089em -0.133em 0 #fff,
0.102em -0.124em 0 #fff,
0.113em -0.113em 0 #fff,
0.124em -0.102em 0 #fff,
0.133em -0.089em 0 #fff,
0.141em -0.075em 0 #fff,
0.148em -0.061em 0 #fff,
0.153em -0.046em 0 #fff,
0.157em -0.031em 0 #fff,
0.159em -0.016em 0 #fff,
0.105em 0.000em 0 #fff,
0.103em 0.020em 0 #fff,
0.097em 0.040em 0 #fff,
0.087em 0.058em 0 #fff,
0.074em 0.074em 0 #fff,
0.058em 0.087em 0 #fff,
0.040em 0.097em 0 #fff,
0.020em 0.103em 0 #fff,
0.000em 0.105em 0 #fff,
-0.020em 0.103em 0 #fff,
-0.040em 0.097em 0 #fff,
-0.058em 0.087em 0 #fff,
-0.074em 0.074em 0 #fff,
-0.087em 0.058em 0 #fff,
-0.097em 0.040em 0 #fff,
-0.103em 0.020em 0 #fff,
-0.105em 0.000em 0 #fff,
-0.103em -0.020em 0 #fff,
-0.097em -0.040em 0 #fff,
-0.087em -0.058em 0 #fff,
-0.074em -0.074em 0 #fff,
-0.058em -0.087em 0 #fff,
-0.040em -0.097em 0 #fff,
-0.020em -0.103em 0 #fff,
-0.000em -0.105em 0 #fff,
0.020em -0.103em 0 #fff,
0.040em -0.097em 0 #fff,
0.058em -0.087em 0 #fff,
0.074em -0.074em 0 #fff,
0.087em -0.058em 0 #fff,
0.097em -0.040em 0 #fff,
0.103em -0.020em 0 #fff,
0.050em 0.000em 0 #fff,
0.046em 0.019em 0 #fff,
0.035em 0.035em 0 #fff,
0.019em 0.046em 0 #fff,
0.000em 0.050em 0 #fff,
-0.019em 0.046em 0 #fff,
-0.035em 0.035em 0 #fff,
-0.046em 0.019em 0 #fff,
-0.050em 0.000em 0 #fff,
-0.046em -0.019em 0 #fff,
-0.035em -0.035em 0 #fff,
-0.019em -0.046em 0 #fff,
-0.000em -0.050em 0 #fff,
0.019em -0.046em 0 #fff,
0.035em -0.035em 0 #fff,
0.046em -0.019em 0 #fff;
}
.tt--fill{ position:relative; }
/* グラデーションは「行ごと」にかける。
1つの要素にまとめてかけると、1行目が黄・2行目がオレンジと
上下で割れてしまうため */
.ln{ display:block; }
.tt--fill .ln{
background:linear-gradient(180deg,
#ffd76b 0%, #ffb028 34%, #f2600a 60%, #ff8c1a 82%, #ffc247 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
/* 景品カード */
.prizes{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
.prize{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
padding:14px 6px 11px;
border-radius:15px;
background:#fff;
box-shadow:0 6px 16px rgba(120,86,0,.18);
}
.prize__badge{
position:absolute;
top:7px;
left:7px;
display:grid;
place-items:center;
width:26px;
height:26px;
border-radius:50%;
background:var(--accent-cta);
color:#fff;
font-family:var(--font-head);
font-size:13.5px;
font-weight:800;
letter-spacing:0;
}
.prize__il{
display:grid;
place-items:center;
width:58px;
height:58px;
margin-bottom:6px;
border-radius:50%;
background:var(--accent-l);
}
.prize__il img{
width:50px;
height:50px;
}
.prize__name{
font-family:var(--font-head);
font-size:12.5px;
font-weight:800;
line-height:1.4;
text-wrap:balance;
}
.prize__note{
margin-top:0;
font-size:10px;
line-height:1.5;
color:var(--ink-2);
}
.prize__qty{
margin-top:6px;
padding:1px 10px;
border-radius:999px;
background:var(--pink);
color:#fff;
font-family:var(--font-head);
font-size:12px;
font-weight:800;
letter-spacing:.02em;
}
.prize__qty small{
font-size:10px;
font-weight:700;
}
.prizes__note{
margin:9px 0 0;
font-size:10px;
color:var(--ink-on-sun);
}
/* CTA */
.hero__cta{ margin-top:20px; }
.hero__cta .btn{ width:100%; }
/* 3つの特徴 */
.hero__points{
display:grid;
gap:8px;
margin:18px 0 0;
padding:0;
list-style:none;
}
.hero__points li{
display:flex;
align-items:center;
gap:9px;
padding:11px 16px;
border-radius:999px;
background:#fff;
font-size:13px;
font-weight:700;
text-align:left;
box-shadow:0 2px 8px rgba(120,86,0,.10);
}
.hero__pointIcon{
flex:0 0 auto;
display:grid;
place-items:center;
width:19px;
height:19px;
border-radius:50%;
background:var(--accent-cta);
color:#fff;
}
.hero__pointIcon svg{ width:12px; height:12px; }
/* =========================================================
紙吹雪（Freepik のプレミアム素材。市松の透過を抜いてPNG化）
中央が空いた構図なので、上下に1枚ずつ置くと文字にかからない
========================================================= */
.confetti{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
background:
url("images/confetti-top.png?v=175") center top / 175% auto no-repeat,
url("images/confetti-bottom.png?v=175") center bottom / 175% auto no-repeat;
}
.thanks{ position:relative; }
/* =========================================================
セクション見出し（キャンペーン仕様）
========================================================= */
.section--worry{ background:var(--bg-worry); }
.section--point{ background:var(--sun-l); }
.secHead{
margin-bottom:22px;
text-align:center;
}
/* \ 〜 / の煽り */
.secHead__eyebrow{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
margin:0 0 6px;
font-size:12.5px;
font-weight:700;
color:var(--accent-d);
}
.secHead__eyebrow::before,
.secHead__eyebrow::after{
content:"";
width:15px;
height:1.5px;
background:currentColor;
opacity:.8;
}
.secHead__eyebrow::before{ rotate:66deg; }
.secHead__eyebrow::after{ rotate:-66deg; }
.secHead__title{
margin:0;
font-family:var(--font-head);
font-size:clamp(21px,calc(5.4*var(--u)),25px);
font-weight:800;
line-height:1.55;
letter-spacing:.01em;
/* 幅に収まれば1行、収まらなければ行の長さを揃えて2行に折る。
で固定すると、幅の広い端末で不要な改行が残ってしまう */
text-wrap:balance;
}
/* =========================================================
POINT ブロック
========================================================= */
.pointList{
display:grid;
gap:16px;
}
.pointBlock{
position:relative;
padding:18px 16px 22px;
border-radius:16px;
background:var(--paper);
}
/* POINT 1 のチップ */
.pointBlock__chip{
display:flex;
width:fit-content;
align-items:baseline;
gap:5px;
margin:0 auto 12px;
padding:4px 14px;
border-radius:999px;
background:var(--accent-cta);
color:#fff;
font-family:var(--font-head);
font-size:11px;
font-weight:800;
letter-spacing:.09em;
}
.pointBlock__chip span{
font-size:14px;
letter-spacing:0;
}
.pointBlock__title{
display:block;
margin:0 0 16px;
padding-bottom:14px;
border-bottom:2px dotted var(--hair-2);
font-family:var(--font-head);
font-size:19px;
font-weight:800;
line-height:1.5;
text-align:center;
}
.pointBlock__body{
display:grid;
justify-items:center;
gap:14px;
}
.pointBlock__il{
width:auto;
max-width:100%;
height:132px;
}
.pointBlock__text{
margin:0;
font-size:13.5px;
line-height:1.9;
text-align:center;
color:var(--ink-2);
}
.pointBlock__text b{
color:var(--ink);
font-weight:700;
background:linear-gradient(transparent 62%, var(--sun) 62%);
}
/* 追加イラスト */
.surveyIntro__il{
display:block;
width:auto;
height:92px;
margin:0 auto 4px;
}
.worryIl--sub{
height:130px;
width:auto;
margin:18px auto 4px;
}
/* プライバシーポリシー：同意の範囲を示す一文を枠で示す */
.legal .legal__consent{
padding:13px 15px;
border-radius:12px;
background:var(--sun-l);
color:var(--ink);
font-weight:500;
}
/* 完了メッセージは短文なので文節で折り返す（狭い画面で「ご／ざいます」と割れるのを防ぐ） */
.thanks__text{
word-break:auto-phrase;
text-wrap:balance;
}
/* =========================================================
キャンペーン概要・注意事項（フォーム内の折りたたみ）
========================================================= */
.terms{
margin:26px 0 14px;
border:1px solid var(--hair);
border-radius:14px;
background:var(--paper);
}
.terms__toggle{
display:flex;
align-items:center;
gap:12px;
padding:13px 16px;
cursor:pointer;
list-style:none;
}
.terms__toggle::-webkit-details-marker{ display:none; }
.terms__toggleText{ display:grid; gap:2px; min-width:0; }
.terms__toggleTitle{
font-family:var(--font-head);
font-size:14.5px;
font-weight:800;
}
.terms__toggleMeta{
font-size:12px;
color:var(--ink-2);
}
.terms__chev{
flex:0 0 auto;
width:10px;
height:10px;
margin-left:auto;
border-right:2px solid var(--accent-d);
border-bottom:2px solid var(--accent-d);
rotate:45deg;
transition:rotate .2s ease;
}
.terms[open] .terms__chev{ rotate:-135deg; }
.terms__body{
padding:4px 16px 18px;
border-top:1px solid var(--hair);
}
.terms__h{
margin:16px 0 6px;
font-family:var(--font-head);
font-size:13.5px;
font-weight:800;
color:var(--ink);
}
.terms__p{
margin:0;
font-size:13.5px;
line-height:1.85;
color:var(--ink-2);
}
.terms__list{ margin:0; padding:0; list-style:none; }
/* 「・」は absolute で置き、本文（リンク込み）は1つの span にまとめる */
.terms__list li{
position:relative;
padding-left:1.1em;
font-size:13px;
line-height:1.8;
color:var(--ink-2);
}
.terms__list li::before{
content:"・";
position:absolute;
left:0;
color:inherit;
}
.terms__list a{
color:var(--accent-d);
text-decoration:underline;
text-underline-offset:3px;
}
.terms__p--host{
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--hair);
font-size:12.5px;
color:var(--ink-3);
}