@charset "utf-8";

/* =====================================
Snow Monkey Forms カスタマイズ
===================================== */

/* フォーム全体 */
.snow-monkey-form {
max-width: 800px;
margin: 5em auto;
}

.smf-progress-tracker{
	margin:5em 0;
}

/* 項目間余白 */
.smf-item {
margin-bottom: 28px;
}

/* ラベル */
.smf-item__label {
margin-bottom: 8px;
font-weight: 700;
line-height: 1.5;
}

/* 必須マーク /
.smf-item:has([data-validations=“required”]) .smf-item__label__text::after {
content: “必須”;
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
color: #fff;
background: #dd3234;
border-radius: 3px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
vertical-align: middle;
}

/* 入力欄 */
.smf-text-control__control,
.smf-textarea-control__control {
width: 100%;
padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
line-height: 1.6;
background: #fff;
transition: .2s;
}

/* フォーカス */
.smf-text-control__control:focus,
.smf-textarea-control__control:focus {
outline: none;
border-color: #176092;
box-shadow: 0 0 0 2px rgba(23,96,146,.1);
}

/* プレースホルダー */
.smf-text-control__control::placeholder,
.smf-textarea-control__control::placeholder {
color: #aaa;
}

/* テキストエリア */
.smf-textarea-control__control {
min-height: 180px;
resize: vertical;
}

/* =====================================
入力画面ボタン
===================================== */

.smf-action {
margin-top: 40px;
text-align: center;
}

.smf-button-control__control {
width: 240px;
height: 60px;
padding: 0;
border: none;
border-radius: 999px;
background: #176092;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: .2s;
}

.smf-button-control__control:hover {
opacity: .9;
}

/* =====================================
確認画面
===================================== */

.snow-monkey-form[data-screen=“confirm”] .smf-item {
padding: 20px 0;
margin-bottom: 0;
border-bottom: 1px solid #e5e5e5;
}

.snow-monkey-form[data-screen=“confirm”] .smf-item__label {
margin-bottom: 8px;
color: #666;
font-size: 14px;
font-weight: 700;
}

.snow-monkey-form[data-screen=“confirm”] .smf-placeholder {
font-size: 16px;
line-height: 1.8;
color: #222;
word-break: break-word;
}

/* 確認画面では必須マーク非表示 */
.snow-monkey-form[data-screen=“confirm”] .smf-item__label__text::after {
display: none;
}

/* 確認画面ボタン */
.snow-monkey-form[data-screen=“confirm”] .smf-action {
display: flex;
justify-content: center;
align-items: stretch;
gap: 24px;
margin-top: 40px;
}

/* ボタンラッパー */
.snow-monkey-form[data-screen=“confirm”] .smf-button-control {
display: flex;
}

/* 共通 */
.snow-monkey-form[data-screen=“confirm”] .smf-button-control__control {
width: 240px;
height: 60px;
padding: 0;
border-radius: 999px;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

/* 戻る */
.snow-monkey-form[data-screen=“confirm”] button[data-action=“back”] {
background: #fff;
border: 1px solid #d5d5d5;
color: #333;
}

/* 送信 */
.snow-monkey-form[data-screen=“confirm”] button[data-action=“complete”] {
background: #176092;
border: 1px solid #176092;
color: #fff;
}

/* =====================================
エラーメッセージ
===================================== */

.smf-error-messages,
.smf-system-error-content-ready {
margin-top: 8px;
color: #dd3234;
font-size: 14px;
line-height: 1.6;
}

/* =====================================
スマホ
===================================== */

@media (max-width: 640px) {

.smf-item {
margin-bottom: 24px;
}

.smf-text-control__control,
.smf-textarea-control__control {
font-size: 16px;
}

.smf-button-control__control {
width: 100%;
}

.snow-monkey-form[data-screen=“confirm”] .smf-action {
flex-direction: column;
gap: 12px;
}

.snow-monkey-form[data-screen=“confirm”] .smf-button-control__control {
width: 100%;
}
}