@charset "UTF-8";
/* ==========================================================================
   お問い合わせフォーム（MW WP Form key=496）
   参考: shizuoka.fuyouhin-center.jp/contact/ のレイアウト
   - 青帯のページタイトル → 見出し・リード → 水色の太枠カードに項目を並べる → 青いピル型ボタン
   - 項目名の右に青い「必須」ピル。任意項目はラベルなし
   フォーム本体は #online_mitumori に対して指定し、確認画面（/confirm/）でも同じ見た目にする
   ========================================================================== */

/* --- ページ上部（partial-elephant/form.php） --- */
.contactform__hero {
    padding: 56px 16px;
    background: #2b74c5;
    text-align: center;
}

.contactform__hero-title {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: .06em;
}

.contactform__crumb {
    margin: 16px 0 0;
    color: #475569;
    font-size: 11px;
    text-align: right;
}

.contactform__crumb a {
    color: inherit;
    text-decoration: none;
}

.contactform__title {
    margin: 16px 0 24px;
    color: #1e293b;
    font-size: clamp(20px, 2.8vw, 30px);
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
}

.contactform__lead {
    margin: 0 0 32px;
    color: #334155;
    font-size: 14px;
    letter-spacing: .06em;
    text-align: center;
}

.contactform__intro {
    max-width: 1100px;
    margin: 0 auto 12px;
    color: #334155;
    font-size: 14px;
}

.contactform__intro p {
    margin: 0 0 4px;
}

/* 見出しは上で出しているので、フォーム内の旧見出しと黄色線は隠す */
.contactform #online_mitumori > h2,
.contactform #online_mitumori > hr.yellow {
    display: none;
}

.contactform #online_mitumori {
    padding-top: 0;
}

/* --- フォーム本体 --- */
#online_mitumori {
    max-width: 1100px;
    padding: 0 0 20px;
}

/* 項目テーブルを水色の太枠カードにする */
#online_mitumori .contact_wrap > table {
    display: block;
    width: 100%;
    padding: 24px 48px;
    border: 5px solid #d9f1fd;
    border-radius: 20px;
    background: #fff;
}

#online_mitumori .contact_wrap > table > tbody {
    display: block;
}

#online_mitumori .contact_wrap tr {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid #e2e8f0;
}

#online_mitumori .contact_wrap tr:first-child {
    border-top: 0;
}

/* 項目名：テキスト → 右端に「必須」ピル。補足文は下に */
#online_mitumori .contact_wrap th {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 200px;
    width: auto;
    padding: 10px 0 0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
}

#online_mitumori .contact_wrap th .hissu {
    order: 2;
    margin: 0 0 0 auto;
}

#online_mitumori .contact_wrap th .small_text {
    order: 3;
    flex-basis: 100%;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

#online_mitumori .contact_wrap th .ninni {
    display: none;
}

#online_mitumori .contact_wrap td {
    flex: 1;
    min-width: 0;
    padding: 0;
}

/* 「必須」ピル（上部の説明文の中でも同じ見た目） */
.contactform .hissu,
#online_mitumori .hissu {
    display: inline-block;
    margin: 0 2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #2b8fe0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

/* 入力欄 */
#online_mitumori input[type="text"],
#online_mitumori input[type="email"],
#online_mitumori select,
#online_mitumori textarea {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    background: #fff;
    font-size: 15px;
    letter-spacing: .04em;
}

#online_mitumori input[type="text"]:focus,
#online_mitumori input[type="email"]:focus,
#online_mitumori select:focus,
#online_mitumori textarea:focus {
    border-color: #2b8fe0;
    box-shadow: 0 0 0 3px rgba(43, 143, 224, .15);
}

#online_mitumori select {
    background: #f1f5f9;
}

#online_mitumori .select_wrap::after {
    top: 17px;
    right: 18px;
    width: 8px;
    height: 8px;
    border-color: #2b8fe0;
}

#online_mitumori textarea {
    max-width: none;
    height: 130px;
}

#online_mitumori .mwform-tel-field input,
#online_mitumori .mwform-zip-field input {
    width: 80px;
    max-width: 80px;
    padding: 10px 8px;
}

/* チェックボックス：小さな角丸の枠＋青いチェック */
/* 枠とチェックは外側の span.horizontal-item に付くので、span 側を2列にする */
#online_mitumori .checkbox_wrap .horizontal-item {
    width: 50%;
    margin: 0;
}

#online_mitumori .checkbox_wrap label {
    width: 100%;
    padding: 4px 0 4px 28px;
    color: #334155;
    font-size: 14px;
}

#online_mitumori input[type="checkbox"] + label::before,
#online_mitumori .checkbox_wrap span.horizontal-item::before {
    top: 7px;
    width: 18px;
    height: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

#online_mitumori input[type="checkbox"] + label::after,
#online_mitumori .checkbox_wrap span.horizontal-item::after {
    top: 10px;
    left: 4px;
    width: 11px;
    height: 6px;
    border-left-width: 2px;
    border-bottom-width: 2px;
    border-color: #2b8fe0;
}

/* 印の表示はチェック状態そのもので判定する
   （scripts.js の .checked 付け替えはラベルのクリックで2回発火して打ち消し合うため使わない） */
#online_mitumori .checkbox_wrap span.horizontal-item.checked::after {
    opacity: 0;
}

#online_mitumori .checkbox_wrap span.horizontal-item:has(input:checked)::after {
    opacity: 1;
}

#online_mitumori .checkbox_wrap span.horizontal-item:has(input:checked)::before {
    border-color: #2b8fe0;
}

/* 送信ボタン：青いピル型 */
#online_mitumori .btn_wrap {
    margin: 40px 0 24px;
}

#online_mitumori input[type="submit"],
#online_mitumori button[type="submit"] {
    width: min(100%, 500px);
    padding: 22px 0;
    border-radius: 999px;
    background: #3a93e0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    transition: background-color .2s ease;
}

#online_mitumori input[type="submit"]:hover,
#online_mitumori button[type="submit"]:hover {
    opacity: 1;
    background: #2479c4;
}

/* 確認画面の「戻る」など2つ目以降のボタンは間隔をあける */
#online_mitumori .btn_wrap button + button,
#online_mitumori .btn_wrap input + input {
    margin-top: 12px;
}

/* --- 確認画面（/confirm/）--- */
/* フォーム内の旧見出しは上部の見出しと同じ見た目にし、黄色線は出さない */
#online_mitumori > h2 {
    margin: 40px 0 32px;
    color: #1e293b;
    font-size: clamp(20px, 2.8vw, 30px);
    font-weight: 800;
    letter-spacing: .04em;
}

#online_mitumori > hr.yellow {
    display: none;
}

/* 入力値は項目名と高さをそろえる。選択欄の矢印は不要 */
.mw_wp_form_confirm #online_mitumori .contact_wrap td {
    padding-top: 10px;
    color: #1e293b;
    font-size: 15px;
}

.mw_wp_form_confirm #online_mitumori .select_wrap::after {
    display: none;
}

/* --- SP --- */
@media (max-width: 767.98px) {
    .contactform__hero {
        padding: 36px 16px;
    }

    #online_mitumori .contact_wrap > table {
        padding: 8px 18px;
        border-width: 4px;
        border-radius: 14px;
    }

    #online_mitumori .contact_wrap tr {
        flex-direction: column;
        gap: 10px;
        padding: 18px 0;
    }

    #online_mitumori .contact_wrap th {
        flex-basis: auto;
        width: 100%;
        padding: 0;
    }

    #online_mitumori .contact_wrap th .hissu {
        margin-left: 10px;
    }

    #online_mitumori .contact_wrap td {
        width: 100%;
    }

    #online_mitumori .checkbox_wrap .horizontal-item {
        width: 100%;
    }
}