`。 */ .c-subhead { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 4px solid var(--c-accent-ink); font-size: 15px; font-weight: 700; line-height: 1.4; } /* 直前に設問がある場合は上に間を取る（.c-fields の gap では足りない） */ .c-fields > .c-subhead:not(:first-child) { margin-top: 8px; } .c-subhead__note { margin-top: -8px; color: var(--c-text-sub); font-size: 13px; line-height: 1.6; } /* 見出しを持たない地の文（ご案内・導入文）。1 文 1 段落で `
` を並べる。
`.c-subhead__note` は見出し直下に置く前提で負のマージンを持つため、
ステップ先頭の単独段落には使えない（進捗バーに食い込む）。
*/
.c-lead {
margin: 0;
color: var(--c-text);
font-size: 15px;
line-height: 1.7;
}
.c-lead p + p {
margin-top: 12px;
}
/*
1 画面に 2 ブロックを束ねたときの区切り線。
小見出し（.c-subhead）だけでは、同じ形の設問が続く画面で型の切り替わりが読み取れない。
*/
.c-divider {
height: 0;
margin: 4px 0;
border: 0;
border-top: 1px solid var(--c-line);
}
/* --- モバイル --- */
@media (max-width: 767px) {
/*
高さは PC（56px）の約80%。
font-size は 16px から下げない（iOS Safari のフォーカス時自動ズームを招くため）。
縮めたのは上下 padding のみで、45px はタップ領域の下限 44px を保っている。
*/
.c-input,
.c-select {
min-height: 45px;
padding: 8px 16px;
}
}
/*
カード式ボタン。
Duolingo の選択肢カード（大きなタップ領域・面での選択状態・アイコン付き）を下敷きにする。
input は display:none にせず視覚的にのみ隠す。隠すとフォーカスを受け取れず、
キーボードでの矢印キー移動が不能になるため。
単一選択と複数選択の区別は3点セットで行う。
1. マークの形 …… 単一＝円 / 複数＝角丸四角にチェック
2. バッジ …… 複数選択のグループにだけ「複数選択可」
3. 選択時の表現 … 単一＝円を塗る / 複数＝チェックが現れる
*/
/*
legend は fieldset の「rendered legend」で、Chrome では display の上書きが効かない。
float で通常フローへ逃がす手もあるが、直後に差し込まれるエラー文が
フロートの脇（幅ゼロ）へ押し込まれて1文字ずつ折り返されるため採らない。
legend 自体はブロックのまま、内側の span でレイアウトを組む。
*/
.c-cards__legend {
width: 100%;
padding: 0;
margin-bottom: 12px;
}
.c-cards__legend-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.c-cards__question {
font-size: 16px;
font-weight: 700;
}
.c-cards__badges {
display: flex;
gap: 6px;
}
.c-cards__list {
display: grid;
grid-template-columns: 1fr; /* モバイルは1カラム */
gap: 10px;
}
/* 列数は末尾の「列数」の節で決める（--cols / --cols-sp） */
.c-card {
position: relative;
}
/* 視覚的にのみ隠す。フォーカスは受け取れる */
.c-card__input {
position: absolute;
top: 50%;
left: 16px;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.c-card__label {
display: flex;
align-items: center;
gap: 14px;
min-height: var(--card-min-h);
height: 100%;
padding: 14px 16px;
/* 枠は四辺とも 2px。影も付けないフラットな造形で、厚みの表現は持たない */
border: 2px solid var(--c-line);
border-radius: var(--radius-card);
background: var(--c-bg);
font-size: 15px;
font-weight: 700;
line-height: 1.45;
cursor: pointer;
transition:
background-color var(--duration),
border-color var(--duration),
transform 0.08s ease-out;
}
@media (hover: hover) {
.c-card__label:hover {
background: var(--c-bg-soft);
border-color: var(--c-line-strong);
}
}
/*
押した手応え。沈み込みは transform だけで表す。
margin での補正が要らないので、周囲のカードの位置もずれない。
*/
.c-card__label:active {
transform: translateY(1px);
}
.c-card__icon {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
color: var(--c-text-sub);
transition: color var(--duration);
}
/*
pre-line にしているのは、選択肢ラベルの改行を `\n` で表しているため
（src/ts/choices.ts の Choice.label）。ラベルは escapeHtml を通してから
DOM に入るので `
` は使えない。連続する空白は畳まれ、改行だけが残る。
*/
.c-card__text {
flex: 1;
min-width: 0;
white-space: pre-line;
}
/* ラベル＋補足文の縦積み（Choice.note があるとき・画像付きカード） */
.c-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.c-card__note {
color: var(--c-text-sub);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
.c-card__mark {
flex: none;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 2px solid var(--c-line-strong);
color: transparent;
transition: background-color var(--duration), border-color var(--duration), color var(--duration);
}
.c-card__mark--radio {
border-radius: var(--radius-pill);
}
.c-card__mark--check {
border-radius: 8px;
}
/* --- 選択状態（:checked + label で完結させる） --- */
.c-card__input:checked + .c-card__label {
border-color: var(--c-accent-ink);
background: var(--c-accent-tint);
}
.c-card__input:checked + .c-card__label .c-card__icon {
color: var(--c-accent-ink);
}
.c-card__input:checked + .c-card__label .c-card__mark {
border-color: var(--c-accent-ink);
}
/* 単一選択：円を塗る */
.c-card__input:checked + .c-card__label .c-card__mark--radio {
box-shadow: inset 0 0 0 4px var(--c-accent-tint), inset 0 0 0 12px var(--c-accent-ink);
}
/* 複数選択：チェックが現れる */
.c-card__input:checked + .c-card__label .c-card__mark--check {
background: var(--c-accent-ink);
color: #fff;
}
/* --- フォーカス（キーボード利用者が現在位置を見失わないよう必ず出す） --- */
.c-card__input:focus-visible + .c-card__label {
outline: 3px solid var(--c-focus);
outline-offset: 2px;
}
/* --- エラー時のグループ --- */
.c-cards.is-invalid .c-card__label {
border-color: #e8b4b4;
}
.c-cards.is-invalid .c-card__input:checked + .c-card__label {
border-color: var(--c-accent-ink);
}
/* --- 3 列でラベルが長いグループの詰め（PC） --- */
@media (min-width: 768px) {
/*
3列でラベルが長いグループは、横一列（アイコンの右にテキスト）のまま
余白と部品を詰めてテキスト幅を確保する。
3列だとカード幅が約 193px しかなく、既定の余白（padding 16px・gap 14px・
アイコン 34px・マーク 24px）ではテキストの取り分が 71px しか残らない。
ご検討内容の「浴室・洗面所」やお問い合わせ内容の「現地調査・見積り希望」は
100px 前後を必要とし、意図した改行位置より手前で折り返してしまう。
左右 padding を 8px、gap を 8px、アイコンを 24px に詰めて 109px 確保する。
マーク（24px）は縮めない。選択時の塗り（.c-card__mark--radio の inset 影）が
この直径を前提にしているため。上下 padding は 14px のままでカード高さは変えない。
**対象は data-tight="true" のグループだけ**（CardGroupSpec.tight）。
ラベルが短いグループまで詰めると、アイコンだけが小さい浮いた見た目になる。
*/
.c-cards__list[data-cols="3"][data-tight="true"] .c-card__label {
gap: 8px;
padding: 14px 8px;
}
.c-cards__list[data-cols="3"][data-tight="true"] .c-card__icon {
width: 24px;
height: 24px;
}
/* 枠を縮めたぶん、中の図形も 26px → 20px に合わせる */
.c-cards__list[data-cols="3"][data-tight="true"] .c-card__icon svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 767px) {
/*
高さは PC（72px）より詰めて 56px にする。
内容の高さは 54px（padding 8px ×2 ＋ 枠 4px ＋ アイコン枠 34px）なので、
**min-height の 56px が下限として効いている**。
さらに詰めるならアイコン（34px）を小さくする必要がある。
ラベルが2行になるカード（`\n` で改行位置を指定しているもの）は
行の高さが勝って 66px 前後になる。
タップ領域の下限 44px は保っている。
*/
.c-card__label {
min-height: 56px;
padding: 8px 12px;
font-size: 16px;
}
}
/* 押し込みの動きは --duration の外にあるため、個別に打ち消す（_nav.css と同じ） */
@media (prefers-reduced-motion: reduce) {
.c-card__label:active {
transform: none;
}
}
/* ================================================================== */
/* variant：見た目のバリエーション */
/* */
/* いずれも radio / checkbox のグループであることは変わらない。 */
/* 骨格（.c-card > .c-card__input + .c-card__label）は共通で、 */
/* label の中身と並べ方だけを変えている（src/ts/cards.ts）。 */
/* 列数はここでは決めず、末尾の「列数」の節にまとめる。 */
/* ================================================================== */
/* --- compact：時間帯など短いラベルを詰めて並べる --- */
/*
アイコンも選択マークも持たない。文字だけのカードなので、
選択状態は面と枠（共通の :checked スタイル）だけで示す。
時間帯は「10:00〜」のように幅が揃うため、中央寄せが読みやすい。
*/
.c-cards__list[data-variant="compact"] {
gap: 8px;
}
.c-cards__list[data-variant="compact"] .c-card__label {
justify-content: center;
min-height: 52px;
padding: 12px 8px;
text-align: center;
}
/* --- image：画像付きカード --- */
/*
画像は上、ラベルは下。横並びにすると 390px では画像が 100px 程度まで痩せて
何が写っているか判別できなくなる。
縦積みなので選択マークは右上へ絶対配置する（label の中の流れから外す）。
*/
.c-cards__list[data-variant="image"] {
gap: 10px;
}
.c-cards__list[data-variant="image"] .c-card__label {
position: relative;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 10px;
}
.c-card__media {
display: block;
overflow: hidden;
border-radius: 10px;
background: var(--c-bg-soft);
}
/*
比率を固定して、画像の縦横がまちまちでもカードの高さを揃える。
差し替え用の実画像は 4:3 で用意すると切れない。
*/
.c-card__img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.c-cards__list[data-variant="image"] .c-card__mark {
position: absolute;
top: 16px;
right: 16px;
background: var(--c-bg);
}
/* --- radio：ラジオボタン風の選択カード --- */
/*
単一選択のカード（良い／普通／悪い・ある／無い など）を、
「ラベルを左寄せ、丸いラジオ印を右端」の見た目にする（印の位置は複数選択カードのチェック印と同じ）。
高さは compact と同じ 52px に揃えている（枠 2px×2 ＋ 上下 padding 12px×2 ＋ 印 24px）。
単一選択だけを想定する（複数選択に付けても印の形が矛盾しないよう、印は選択方式に従う）。
列数は data-cols / data-cols-sp で決め、SP でも折り返さない（HTML は両方に同じ値を書く）。
印（24px）を右端に置くぶん、3 列の狭いカード（SP 390px で 111px 幅）は
余白・文字サイズを詰めて「契約通り」等の 4 文字ラベルを 1 行に収める。
*/
.c-cards__list[data-variant="radio"] {
gap: 8px;
}
.c-cards__list[data-variant="radio"] .c-card__label {
gap: 12px;
min-height: 52px;
padding: 12px 16px;
text-align: left;
}
.c-cards__list[data-variant="radio"] .c-card__text {
flex: 1;
min-width: 0;
white-space: nowrap;
}
/* 3 列の狭いカード（SP）：4 文字ラベル＋印 24px が収まるよう詰める（390px で 111px 幅） */
@media (max-width: 479px) {
.c-cards__list[data-variant="radio"][data-cols="3"] .c-card__label {
gap: 4px;
padding: 12px 8px 12px 10px;
}
.c-cards__list[data-variant="radio"][data-cols="3"] .c-card__text {
font-size: 14px;
}
}
/* 360px 級（3 列で 101px 幅）はさらに詰める */
@media (max-width: 389px) {
.c-cards__list[data-variant="radio"][data-cols="3"] .c-card__label {
padding: 12px 6px 12px 8px;
}
.c-cards__list[data-variant="radio"][data-cols="3"] .c-card__text {
font-size: 13px;
}
}
/* ================================================================== */
/* 列数 */
/* */
/* cards.ts が .c-cards__list に --cols（PC）・--cols-sp（SP）を設定する。*/
/* 値は任意の正の整数。指定が無いとき（変数が未設定）は、下の var() の */
/* フォールバックが variant ごとの既定列数になる。 */
/* default … PC 2 列 / SP 1 列 */
/* compact … 〜479px 2 列 / 480px〜 3 列（PC も 3 列） */
/* image … 2 列 */
/* radio … 2 列 */
/* variant の見た目の規則より後ろに置く（同じ詳細度で、列数を後勝ちにする）。*/
/* ================================================================== */
/* --- default --- */
@media (min-width: 768px) {
.c-cards__list[data-variant="default"] {
grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
}
/*
中間段（640〜767px）。
`.l-shell` は画面幅に合わせて広がるのに、SP の既定は 1 カラムなので、
767px では 680px 幅のカードが縦 1 列に並んでしまう。
ブレイクポイント 767px 自体は動かさず、この帯だけ PC で 2 列以上のグループを 2 カラムにする。
640px は原本 SPIRAL フォームの PC/SP 切替と同じ位置。
SP の列数が 2 以上と指定されているグループは、次の規則（SP）がこの規則に勝つ。
*/
@media (min-width: 640px) and (max-width: 767px) {
.c-cards__list[data-variant="default"]:not([data-cols="1"]) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* SP（767px 以下）：SP の列数が 2 以上のとき。1 または未指定は 1 列（帯では上の規則で 2 列） */
@media (max-width: 767px) {
.c-cards__list[data-variant="default"][data-cols-sp]:where(:not([data-cols-sp="1"])) {
grid-template-columns: repeat(var(--cols-sp), minmax(0, 1fr));
}
}
/*
極端に狭い画面（1280px の 400% ズーム相当）。
320px で SP 2 列を保つと、カード1枚のテキストの取り分が
約25px＝**1文字分**しか残らず、ラベルが1文字ずつ縦に折り返してカード高さが
260px まで伸びる。この幅では1カラムに落とす（3 列以上は今も落とさない）。
*/
@media (max-width: 359px) {
.c-cards__list[data-variant="default"][data-cols-sp="2"] {
grid-template-columns: 1fr;
}
}
/* --- compact・image・radio：SP は --cols-sp、PC（768px〜）は --cols --- */
.c-cards__list[data-variant="compact"] {
grid-template-columns: repeat(var(--cols-sp, 2), minmax(0, 1fr));
}
.c-cards__list[data-variant="image"],
.c-cards__list[data-variant="radio"] {
grid-template-columns: repeat(var(--cols-sp, 2), minmax(0, 1fr));
}
@media (min-width: 480px) {
.c-cards__list[data-variant="compact"] {
grid-template-columns: repeat(var(--cols-sp, 3), minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.c-cards__list[data-variant="compact"] {
grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.c-cards__list[data-variant="image"],
.c-cards__list[data-variant="radio"] {
grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
}
/*
条件付き項目まわり。
.c-conditional … 選択に応じて現れるひとまとまり
.c-check … カード式ではない素のチェックボックス（「未定」「住所が異なる」）
.c-inline … 年・月のように単位付きの短い欄を横に並べる
.c-note … 注釈（既定は装飾なしの地の文。面付きは .c-note--box）
*/
/*
条件で現れるブロック。
面と左の罫線で「直前の選択にぶら下がっている」ことを示す。
唐突に項目が増えたように見せないための処理で、装飾ではない。
`[hidden]` は _base.css で `display: none !important` にしてあるため、
ここで display を指定しても閉じている間は出ない。
*/
.c-conditional {
display: flex;
flex-direction: column;
gap: 24px;
padding: 20px 20px 20px 17px;
border-left: 3px solid var(--c-accent-ink);
border-radius: 0 var(--radius-card) var(--radius-card) 0;
background: var(--c-bg-soft);
}
/* 入れ子の項目群は外側より詰める（同じ設問の中の小項目であることを示す） */
.c-fields--nested {
gap: 16px;
}
/* --- 素のチェックボックス --- */
/*
タップ領域は 44px 以上。
ラベルの上下 padding だけでは**ラベル部分しか 44px にならない**。
チェックボックス本体を含む行全体で下限を満たす必要がある。
*/
.c-check {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
min-height: 44px;
}
.c-check__input {
flex: none;
width: 24px;
height: 24px;
/* 選択状態の色をアクセントに合わせる。ネイティブの見た目は保つ */
accent-color: var(--c-accent-ink);
}
.c-check__input:focus-visible {
outline: 3px solid var(--c-focus);
outline-offset: 2px;
}
/*
ラベル側に上下の余白を持たせてタップ領域を 44px 以上にする。
チェックボックス本体（20px）だけではタップ領域の下限を満たさない。
*/
/* ラベルは残りの幅いっぱいに広げる。文字の右側の空白もタップ領域にするため */
.c-check__label {
flex: 1;
padding: 12px 0;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
}
/*
単独で立つチェックボックス（リフォーム予定地の有無）。
設問と同じ重みで読ませたいので、入力欄と同じ枠を持たせる。
*/
.c-check--standalone {
margin-top: 0;
padding: 0 16px;
border: 2px solid var(--c-line);
border-radius: var(--radius-input);
background: var(--c-bg);
transition: border-color var(--duration), background-color var(--duration);
}
.c-check--standalone:hover {
border-color: var(--c-line-strong);
}
/* 選択中は面と枠をアクセント寄りにして、下のブロックとの関係を示す */
.c-check--standalone:has(.c-check__input:checked) {
border-color: var(--c-accent-ink);
background: var(--c-accent-tint);
}
/* --- 単位付きの短い欄（年・月） --- */
/*
エラー文が出ると項目の高さが変わるため、上端で揃える。
center のままだと片方だけエラーが出たときに、もう一方が縦にずれる。
*/
.c-inline {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px 16px;
}
/*
年・月それぞれの `.c-field`。
中は「入力欄＋単位」の横並び（.c-inline__control）と、その下に落ちるエラー文の縦積み。
ここを inline-flex にすると、エラー文が入力欄と単位の間に割り込んで単位を押し出す。
*/
.c-inline__item {
display: block;
}
.c-inline__control {
display: flex;
align-items: center;
gap: 8px;
}
/*
桁数の目安を幅で示す。年は4桁・月は2桁。
`flex: none` が要る。付けないと `.c-input { width: 100% }` との詳細度が同じで
@import 順に勝っているだけの状態になり、混み合ったときに縮む。
*/
.c-input--num {
flex: none;
width: 7em;
text-align: center;
}
/* 月は2桁。位置（:last-child）ではなくクラスで指定する（末尾に要素を足しても崩れない） */
.c-input--num-month {
width: 5em;
}
.c-inline__unit {
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
/* --- 注釈 --- */
/*
注釈。既定は面・枠・太字などの装飾を付けない、本文と同じ見た目の地の文。
色だけに頼らないよう「※」を文頭に置いて使う。
*/
.c-note {
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--c-text);
font-size: inherit;
font-weight: 400;
line-height: 1.7;
}
/*
面付きの注釈。読み飛ばされると困る内容を、面を敷いて本文から浮かせる。
`.c-note` と併用する（
）。 */ .c-note--box { padding: 14px 16px; border: 1px solid #f0d8ac; border-radius: var(--radius-input); background: var(--c-accent-tint); color: var(--c-accent-ink); font-size: 13px; font-weight: 700; } /* --- モバイル --- */ @media (max-width: 767px) { .c-conditional { padding: 16px 16px 16px 13px; gap: 20px; } .c-check--standalone { padding: 0 12px; } } /* ナビゲーション（ステップ群の外に1組だけ）。 同意ブロック（.c-consent）は _consent.css にある。 */ /* 入力欄（同意文がある最終ステップでは同意文）の直下に置く。 画面下端には固定しない（PC・モバイルとも）。 末尾の env(safe-area-inset-bottom) は、iPhone のホームバー領域に ボタンが被らないようにするための余白。固定表示ではないのでスクロールで 逃がせるが、最下部のボタンが指の届きにくい位置に来るのを避けている。 */ .c-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 14px 32px; border: 0; border-radius: 14px; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background-color var(--duration), transform 0.08s ease-out; } .c-btn:active { transform: translateY(2px); } /* 「戻る」：左端に置くセカンダリのボタン。 白地＋枠線で「次へ」より一段引っ込め、押し間違いを防ぐ。 */ .c-btn--back { border: 2px solid var(--c-line-strong); background: var(--c-bg); color: var(--c-graphite); } .c-btn--back:hover { background: var(--c-bg-soft); } /* 「次へ」：グラファイトの面に白文字（約 8.4:1）。平面の塗り。 margin-left: auto は「戻る」が hidden の STEP 1 対策。hidden 要素は スペースを取らないため、space-between だけだと「次へ」が左端へ寄ってしまう。 */ .c-btn--next { margin-left: auto; background: var(--c-graphite); color: #fff; } .c-btn--next:hover { background: var(--c-graphite-strong); } /* 送信ボタンだけ見た目を変える。 中間の「次へ」と同じ外観だと、意図しない送信や逆に送信のためらいを生む。 グレー基調では色相で差を付けられないため、 1. 明度 …… グラファイトより一段深い墨 2. 字送り …… やや広げて改まった調子にする 3. 横幅 …… flex:1 で「次へ」より広く取る の3点で段差を作る。 */ .c-btn--submit { flex: 1; margin-left: auto; /* 「次へ」と同じく、「戻る」が hidden でも右側に留めるため */ background: var(--c-ink); color: #fff; letter-spacing: 0.08em; } .c-btn--submit:hover { background: var(--c-ink-strong); } @media (max-width: 767px) { /* モバイルはボタンをフルワイドにする（下部には固定しないが、幅は画面いっぱい）。 狭い画面で右寄せの小さなボタンにすると、片手で親指が届く範囲から外れる。 高さは PC（56px）の約80%。 行間を詰めないと padding だけでは 45px に収まらないため line-height も下げている。 45px はタップ領域の下限 44px を保っている。 */ .c-btn { flex: 1; width: 100%; min-height: 45px; padding: 10px 16px; line-height: 1.3; } /* 「戻る」だけは内容幅に留める。上の flex: 1 のままだと「次へ」と 50/50 に 割れてしまい、主導線の「次へ」が痩せる。戻ると次へ（最終ステップでは送信）は 同じ行のまま、残り幅を主導線に譲る。 */ .c-btn--back { flex: 0 0 auto; width: auto; } } /* 押し込みの動きは transform で表しているが、`transition` の 0.08s と合わせて `--duration` の外にある（意図的に短くしている）。 動きを減らす設定では位置を動かさない。 */ @media (prefers-reduced-motion: reduce) { .c-btn:active { transform: none; } } /* 汎用の無効化スタイル。現時点で送信ボタンを無効化する仕組みは無いが、 他の理由でボタンが disabled になる場合に備えて残す。 色は落とすが、コントラストは 4.5:1 を割らない濃さに留める。 */ .c-btn:disabled, .c-btn--submit:disabled { background: #8d9096; cursor: not-allowed; } .c-btn:disabled:active { transform: none; } /* 完了画面（thanks.html）。フォーム本体と同じ form.css を共有して見た目を揃える */ .c-thanks { padding: 40px 0 64px; } /* チェックマークと見出しを横並びにする */ .c-thanks__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .c-thanks__mark { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--c-accent-tint); color: var(--c-accent-ink); } /* ページ唯一の見出し。マークの横に並ぶが、大きさは独立した h1 だったときのまま （24px / PC 28px）保つ。ねぎらいの一言と2本立てだった頃は競合を避けて 一言側を一段小さくしていたが、1本になったので抑える理由がなくなった。 */ .c-thanks__title { font-size: 24px; font-weight: 700; line-height: 1.5; } .c-thanks__lead { margin-top: 12px; font-size: 15px; } .c-thanks__box { margin-top: 28px; padding: 20px; border: 2px solid var(--c-line); border-radius: var(--radius-card); /* 面の色を明示する。地（--c-canvas）に色が敷かれる配色でも 枠だけの箱にならず、カードとして立つようにするため。 */ background: var(--c-bg); } .c-thanks__box-title { font-size: 15px; font-weight: 700; } .c-thanks__list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.7; } .c-thanks__list li { padding-left: 1.1em; text-indent: -1.1em; } .c-thanks__list li::before { /* ★ 非ASCIIを直接書かない（決定180）。\30FB は U+30FB。末尾の空白はエスケープの終端 */ content: "\30FB "; } .c-thanks__note { margin-top: 20px; color: var(--c-text-sub); font-size: 13px; } .c-thanks__actions { margin-top: 32px; } .c-thanks__back { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 32px; border: 2px solid var(--c-line); border-bottom-width: 4px; border-radius: 14px; background: var(--c-bg); color: var(--c-text); font-weight: 700; text-decoration: none; } .c-thanks__back:hover { background: var(--c-bg-soft); color: var(--c-text); } @media (min-width: 768px) { .c-thanks__title { font-size: 28px; } } @media (max-width: 767px) { /* 375px 幅ではマークと見出しが1行に収まらない。マークを縮めたうえで文字も詰める。 幅の内訳：335 −（マーク 56 ＋ gap 12）＝ 267px に対し、 18px × 14文字 = 252px。20px だと 280px で「お問い合わせを受け付けまし／た」と折れる。 */ .c-thanks__head { gap: 12px; } .c-thanks__mark { width: 56px; height: 56px; } .c-thanks__mark svg { width: 28px; height: 28px; } .c-thanks__title { font-size: 18px; } } /* 2. 複数 form が持つ部品 */ /* 同意ブロック（個人情報の取り扱いについての注記）。同意ブロックを持つ form が import する。 最終ステップの末尾にあり、その直後が送信ボタンになる。間に他の要素を挟まない。 チェックボックスは持たない（注記文のみ）。 */ /* 面の色は選択済みカードと同じ --c-accent-tint。 グレー（--c-bg-soft）だと直上のカード群から浮いて別種の面に見えるため揃えた。 */ .c-consent { margin-top: 32px; padding: 18px 20px; border-radius: var(--radius-card); background: var(--c-accent-tint); } .c-consent__text { color: var(--c-text-sub); font-size: 13px; line-height: 1.75; } .c-consent__text a { word-break: break-all; } .c-consent__text + .c-consent__text { margin-top: 10px; } /* 3. form 固有 */ /* No.9（パートナー設計事務所募集）固有の追加スタイル。共通 CSS のあとに読み込む。 */ /* 希望業務エリアの第1・第2希望を左右に並べる（.c-group__cols の 2 列は SP・PC 共通）。 SP（390px）では 1 列 約 169px しかないため、セレクトの左右余白と矢印を詰めて 「愛知県」「神奈川県」などの都道府県名を切らずに出す。 */ .c-group__cols .c-select { padding-right: 32px; padding-left: 12px; background-position: right 8px center; background-size: 18px 18px; } /* 4. SPIRAL 固有（初期表示のちらつき対策・JS無効時の見え方）。承認済み画面には無い */ /* SPIRAL 元ソースの