﻿/* ============================================
    全体
============================================ */

.l-page {
    padding-bottom: 120px;
}

.breadcrumb {
    padding-bottom: 70px;
}

/* ============================================
    MV
============================================ */

.mv {
    background: url("../images/contact/mv_sp.jpg") center / cover no-repeat;
}

/* 上部のテキスト部分 */
.intro-text {
    font-size: 16px;
    line-height: calc(28 / 16);
    margin-bottom: 25px;
}

.phone-contact {
    margin-bottom: 55px;
}

.phone-contact p {
    font-size: 16px;
    line-height: calc(28 / 16);
}

.phone-contact .phone-number {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    margin: 3px 0;
    font-family: var(--pinpoint-font);
}

.phone-number a {
    color: var(--text-color);
}

/* フォーム全体のスタイル */
.form-group {
    margin-bottom: 40px;
    border-bottom: 1px solid #CDCDCD;
    padding-bottom: 8px;
}

.form-group:last-child {
    border-bottom: none;
}

/* ラベルと「必須」マーク */
.label-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.required-mark {
    background-color: #CE000E;
    /* 赤色 */
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 8px;
    border-radius: 2px;
    margin-right: 15px;
}

.label-text {
    font-weight: 500;
    font-size: 16px;
    line-height: calc(28 / 16);
}

/* 入力欄の共通スタイル */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px 15px;
    background-color: #BDBDBD;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--text-color);
}

/* プレースホルダー（入力前の薄い文字）の色 */
input::placeholder,
textarea::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: calc(26 / 14);
}

textarea {
    height: 250px;
    resize: vertical;
}

/* ラジオボタン（スマホ時は縦並び） */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.radio-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: calc(28 / 16);
    cursor: pointer;
}

.radio-label input {
    margin-right: 7px;
}

/* プライバシーポリシー */
.privacy-wrap {
    border-bottom: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    cursor: pointer;
}

.checkbox-label input {
    margin-right: 8px;
}

.form-group.privacy-wrap {
    margin-bottom: 50px;
}

.privacy-box {
    background-color: #fff;
    padding: 8px 15px;
    height: 230px;
    overflow-y: auto;
    /* スクロールバーを表示 */
    font-size: 14px;
    border-radius: 4px;
    line-height: calc(26 / 14);
    margin-top: 15px;
}

.privacy-box p+p {
    margin-top: 24px;
}

.privacy-box strong {
    display: block;
    font-weight: bold;
}

/* 送信ボタン */
.submit-btn-wrap {
    text-align: center;
    margin-top: 40px;
}

.submit-btn-wrap .ui_cp-btn {
    font-size: 16px;
    font-weight: 500;
}

div.mw_wp_form span.horizontal-item+span.horizontal-item {
    margin-left: 0;
}

.mwform-checkbox-field label, .mwform-radio-field label {
    font-size: 16px;
    line-height: calc(28 / 16);
    cursor: pointer;
}

.mwform-checkbox-field-text {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    cursor: pointer;
}

.mwform-checkbox-field {
    display: block;
    /* margin-bottom: 10px; */
}

.ui_cp-btn {
    font-size: 16px;
}

.contact-complete-wrap {
    margin-bottom: 40px;
    margin-top: 60px;
    line-height: 1.5;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

.finish-modoru {
    margin-top: 1em;
}

@media (min-width: 768px) {
    div.mw_wp_form span.horizontal-item+span.horizontal-item {
        margin-left: 10px;
    }

    /* --- MV・パンくず --- */

    .mv {
        background: url("../images/contact/mv.jpg") center / cover no-repeat;
    }

    .breadcrumb {
        padding-bottom: 120px;
    }

    /* フォーム全体のスタイル */

    .contact-container {
        max-width: 800px;
        /* PCでの最大幅 */
        margin: 0 auto;
        padding: 0 20px;
    }


    .radio-group {
        flex-direction: row;
        gap: 25px;
    }

    .form-group.privacy-wrap {
        margin-bottom: 55px;
    }

}