@charset "utf-8";

/**************************************************
 *	問い合わせ/見積フォームページ補正（レイアウト補正）
 **************************************************/
/* content > main */
div#page > div#content > main{
	max-width:600px;
}

/**************************************************
 *	登録画面（data-screen="loading"）
 **************************************************/
   
/* フォーム全体の最大幅 */
.snow-monkey-form{
	width:96%;
    max-width: 900px;
	margin:0 auto;
}
.smf-form {
    margin: 2rem auto;
}

/* 項目ごとの区切りライン（基本PC：縦並び） */
.smf-item {
    display: block; 
    padding: 1.5rem 0;
}

/* ラベルカラムの設定（基本PC：100%幅で上部に配置） */
.smf-item__col--label {
    width: 100% !important;
    margin-bottom: 0.75rem;
}

/* ラベルテキストのサイズを13pxに固定 */
.smf-item__label__text {
    font-size: 13px !important;
    font-weight: bold;
}

/* 必須マーク（markタグ）の整形 */
.smf-item__label mark.has-vivid-red-color {
    background: none !important;
    color: #d93025 !important;
    font-size: 11px !important;
    font-weight: bold;
    margin-left: 0.5em;
    vertical-align: middle;
}

/* 入力フィールドのスタイルを13pxに固定 */
.smf-text-control__control,
.smf-textarea-control__control,
.smf-select-control__control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px !important;
    box-sizing: border-box;
    background-color: #fafafa;
}

/* 768px以下の端末用調整 */
@media (max-width: 768px) {
    .smf-item__col--label,
    .smf-item__col--controls {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* スマホで余白を少し詰めたい場合はここで調整可能です */
    .smf-item {
        padding: 1rem 0;
    }
}

/* チェックボックス内の文字サイズも固定 */
.smf-checkbox-control__label {
    font-size: 13px !important;
}

/* 説明文（注釈） */
.smf-item__controls p,
.smf-item__description {
    font-size: 11px !important;
    margin-top: 10px;
    line-height: 1.6;
}

/* プログレストラッカー */
.smf-progress-tracker {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin-bottom: 3rem;
    border-bottom: 2px solid #eee;
}

.smf-progress-tracker__item {
    flex: 1;
    text-align: center;
    padding-bottom: 15px;
    color: #ccc;
    font-size: 13px !important;
}

/* 入力画面ではプログレストラッカーの「入力画面（1）」をアクティブに */
.smf-progress-tracker__item--input[aria-current="true"] {
    color: #000;
    border-bottom: 3px solid #000;
}

/* 確認画面へボタン */
.smf-action {
    text-align: center;
    margin-top: 3rem;
}
.smf-button-control__control {
	width:100%;
    background: #ccc;
    padding: 15px 60px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    cursor: pointer;
}
/* reCAPTCHA対応 */
.googleNotice{
	width:100%;
	margin:50px auto 0 auto;
	text-align:center;
	font-size:10px;
	color:#999;
	display:block;
}
.googleNotice a{
	color:#999;
	text-decoration:underline 1px solid #999;
}

/**************************************************
 *	確認画面（data-screen="confirm"）
 **************************************************/

/* 確認画面の時だけ、入力内容テキストをグレーボックスにする */
[data-screen="confirm"] .smf-placeholder {
    font-size: 13px !important;
    line-height: 1.6;
    color: #00f !important;
	font-weight:bold;
    background: #f2f2f2 !important;
    border: 1px solid #eee !important;
    padding: 10px;
    min-height:42px;
	border-radius:5px;
    display: block; /* ボックスとして表示 */
}

/* 確認画面の注釈（◆など）を薄くする */
[data-screen="confirm"] .smf-item__controls p,
[data-screen="confirm"] .smf-item__description {
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 5px;
}

/* 確認画面でのチェックボックス選択項目の並び */
[data-screen="confirm"] .smf-placeholder > div {
    display: inline-block;
    margin-right: 10px;
}

/* ボタンエリア（戻る/送信ボタン）の並び */
[data-screen="confirm"] .smf-action {
    display: flex;
    justify-content: center;
    gap: 20px;
}
[data-screen="confirm"] .smf-action .smf-button-control{
	width:calc( (100% - 20px) / 2 );
}

/* 確認画面ではプログレストラッカーの「確認画面（2）」をアクティブに */
[data-screen="confirm"] .smf-progress-tracker__item--confirm {
    color: #000 !important;
    font-weight: bold !important;
    border-bottom: 3px solid #000 !important;
}


/**************************************************
 *	送信完了画面（data-screen="complete"）
 **************************************************/

/* 送信完了コンテンツ全体の枠組み */
[data-screen="complete"] .smf-complete-content {
    text-align: center;
    padding: 60px 20px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* 「送信完了」の見出し */
[data-screen="complete"] .smf-complete-content h2.gb-text {
    font-size: 18px !important;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
}

/* 「お見積り/ご注文ありがとうございます」 */
[data-screen="complete"] .smf-complete-content h3.gb-text {
    font-size: 15px !important;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* メッセージ本文 */
[data-screen="complete"] .smf-complete-content p {
    font-size: 13px !important;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
}

/* Back to Home ボタンの整形（中央配置） */
[data-screen="complete"] .back-home {
    margin-top: 20px;
}

[data-screen="complete"] .back-home a {
    display: inline-block;
    background: #ccc;
    color: #333;
    padding: 12px 40px;
    border-radius: 5px;
    transition: opacity 0.3s;
}

[data-screen="complete"] .back-home a:hover {
    opacity: 0.8;
}

/* 完了画面ではプログレストラッカーの「完了画面（3）」をアクティブに */
[data-screen="complete"] .smf-progress-tracker__item--complete {
    color: #000 !important;
    font-weight: bold !important;
    border-bottom: 3px solid #000 !important;
}

/* 完了画面では不要な要素（ボタン残骸、Turnstileなど）を隠す */
[data-screen="complete"] .smf-action,
[data-screen="complete"] .snow-monkey-forms-turnstile,
[data-screen="complete"] .smf-system-error-content-ready {
    display: none !important;
}