body.contact header li.nav-contact::after {
    display: block;
}

/* ==============================
  ページタイトル
============================== */
.page-title-wrap  {
    padding:  5.21% 0 4.71%;
}
.page-title-wrap h1 {
    margin: 0 auto;
    width: 22.47%;
}
.page-title-wrap h1 span.jp {
    display: block;
    margin: 0.7em auto 0;
    width: 37.46%;
}
@media print, screen and (max-width: 768px) {
    .page-title-wrap  {
        padding: 34.74vw 0 15.62vw;
    }
    .page-title-wrap h1 {
        width: 44.24vw;
    }
    .page-title-wrap h1 span.jp {
        width: 30.67vw;
    }
}

/* ==============================
  お問い合わせ　外枠
============================== */
.contents .contact-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5.71% 0 8.06%;
}
@media print, screen and (max-width: 768px) {
    .contents .contact-wrap {
        flex-direction: column;
        padding: 13.33vw 0 20.26vw;
    }
}

/* ==============================
  Introduction （SPのみ）
============================== */
@media print, screen and (max-width: 768px) {
    .introduction {
        width: 85.33vw;
        margin: 0 auto;
    }
    .introduction h2 {
        width: 80.74vw;
        margin: 0 auto;
    }
    .introduction h2 span {
        display: block;
        font-size: 5.33vw;
    }
    .introduction h2 .introduction-text01 {
        width: 71.48vw;
        margin: 0 auto;
    }
    .introduction h2 .introduction-text02 {
        width: 100%;
    }

    .introduction p {
        margin-top: 6.66vw;
        font-size: 3.2vw;
        line-height: 2;
    }
}

/* ==============================
  サイド
============================== */
.side_menu-wrap {
    width: 27.08%;
    max-width: 370px;
    margin: 0;
}
.side_menu-wrap ul {
    display: flex;
    flex-direction: column;
    margin-left: 19.7%;
}
.side_menu-wrap ul li {
    width: 100%;
    font-size: min(1.46vw, 2rem);
    line-height: 1;
    padding-left: 1em;
    box-sizing: border-box;
    opacity: 0.6;
    border-left: 3px solid #FFF;
}
.side_menu-wrap ul li.active {
    border-color: #32adc6;
    opacity: 1;
}
.side_menu-wrap ul li + li {
    margin-top: 1.5em;
}
.side_menu-wrap ul li a img {
    width: auto;
    height: 1em;
}
.side_menu-wrap ul li.side-inquiry a img {
    height: 2.5em;
}
@media print, screen and (max-width: 768px) {
    .side_menu-wrap {
        width: 85.33vw;
        margin: 9.33vw auto 0;
    }

    .side_menu-wrap ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%;
        margin-left: 0;
    }
    .side_menu-wrap ul li {
        position: relative;
        width: 38.42vw;
        font-size: 3.73vw;
        border-left: 0;
        padding: 3.73vw 0;
        margin-bottom: 2.66vw;
        border-top: 1px solid #CCC;
        opacity: 1;
    }
    .side_menu-wrap ul li.active {
        border-top: 1px solid #CCC;
        opacity: 1;
    }
    .side_menu-wrap ul li::after {
        content: "";
        position: absolute;
        right: 0;
        top: 4.95vw;
        display: inline-block;
        vertical-align: middle;
        color: #3e3a39;
        line-height: 1;
        width: 2.6vw;
        height: 2.6vw;
        border: 0.1em solid currentColor;
        border-left: 0;
        border-bottom: 0;
        box-sizing: border-box;
        transform: translateY(-25%) rotate(135deg);
    }
    .side_menu-wrap ul li + li {
        margin-top: 0;
    }
    .side_menu-wrap ul li a {
        display: block;
        width: 100%;
    }
    .side_menu-wrap ul li a img {
        width: auto;
        height: 0.87em;
    }
    .side_menu-wrap ul li.side-inquiry a img {
        height: 3.8em;
    }
}

/* ==============================
  お問い合わせ内
============================== */
.contact-wrap-inner {
    width: 72.91%;
    max-width: 996px;
    margin: 0 auto;
}
/* section + section {
    margin-top: 8.97%;
} */
@media print, screen and (max-width: 768px) {
    .contact-wrap-inner {
        border-top: 1px solid #CCC;
        margin-top: 12vw;
        padding-top: 18.66vw;
        width: 85.33vw;
    }
    /* section + section {
        margin-top: 20.13vw;
    } */
}

/* ==============================
  お問い合わせ共通
============================== */
/* セクションのフェードアニメーション */
.contact-wrap-inner section {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: none;
}

.contact-wrap-inner section.active {
    opacity: 1;
    display: block;
}

.contact-wrap-inner section.fade-in {
    opacity: 1;
}

.contact-wrap-inner section.fade-out {
    opacity: 0;
}

/* フォームコンテンツ全体のフェードアニメーション */
#form-content-container {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

/* フォームフィールドのフェードアニメーション */
.form-fields {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

section h2 {
    font-size: min(1.75vw, 2.4rem);
    line-height: 1;
}
section h2::after {
    display: none;
}

#form-attention-container p {
    margin-top: 2.51%;
}

#form-attention-container p.attention {
    display: block;
    padding-left: 1em;
}

#form-attention-container p.attention::before {
    content: "※";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}
@media print, screen and (max-width: 768px) {
    #form-attention-container p {
        margin-top: 6.4vw;
    }

    #form-attention-container p.attention {
        font-size: 3.2vw;
    }
}

section .form-wrap {
    margin-top: 5.42%;
    width: 85.34%;
    max-width: 850px;
}

section .form-wrap dl,
form#mailformpro dl {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

section .form-wrap dl + dl,
form#mailformpro dl + dl,
div#inquiry_fields,
div#visit_fields,
div#materials_fields {
    margin-top: 3.88%;
}

section .form-wrap dt,
form#mailformpro dl dt {
    color: #2b99b0;
    font-size: min(1.17vw, 1.6rem);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 25.4%;
    max-width: 216px;
    float: none;
    padding: 0.9em 0.9em 0.9em 0;
}
section .form-wrap dl.required dt:after,
form#mailformpro dl.required dt:after {
    content: "必須";
    font-size: min(0.8vw, 1.1rem);
    line-height: 1;
    text-align: center;
    border: none;
    border-radius: 0;
    color: #FFF;
    width: 3em;
    background-color: #2b99b0;
    display: block;
    padding: 0.4em 0;
}
section .form-wrap dt span,
form#mailformpro dl dt span {
    color: #3e3a39;
    display: block;
    margin: 0 1em 0 auto;
}
section .form-wrap dt .first_preferred_date + span,
form#mailformpro dl dt .first_preferred_date + span,
section .form-wrap dt .second_preferred_date + span,
form#mailformpro dl dt .second_preferred_date + span {
    margin-right: 1.4em;
}

section .form-wrap dd,
form#mailformpro dl dd {
    border: none;
    width: 72.47%;
    max-width: 616px;
    padding: 0;
}

section .form-wrap dd input,
section .form-wrap dd select,
section .form-wrap dd textarea {
    border: none;
    border-radius: 0;
    background-color: #f2f2f2;
    width: 100%;
    font-size: min(0.87vw, 1.2rem);
    line-height: 1.6;
    padding: 1.2em;
}
section .form-wrap dd select {
    padding-right: 3.6em; /* 右側のパディングを1.5emに変更 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.2em center; /* 矢印の位置を1.5em内側に設定 */
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

section .form-wrap dd input + .note,
section .form-wrap dd select + .note,
section .form-wrap dd textarea + .note {
    margin-top: 1em;
    font-size: min(1.02vw, 1.4rem);
}

section .form-wrap .privacy-agreement {
    width: 72.47%;
    max-width: 616px;
    margin: 2.5em 0 0 auto;
}
@media print, screen and (max-width: 768px) {
    section .form-wrap {
        margin-top: 9.86vw;
        width: 100%;
        max-width: 100%;
    }

    section .form-wrap dl,
    form#mailformpro dl {
        flex-direction: column;
    }

    section .form-wrap dl + dl,
    form#mailformpro dl + dl,
    div#inquiry_fields,
    div#visit_fields,
    div#materials_fields {
        margin-top: 7.46vw;
    }

    section .form-wrap dt,
    form#mailformpro dl dt {
        font-size:4.26vw;
        width: 100%;
        max-width: 100%;
        padding: 0.9em 0.9em 0.9em 0;
    }
    section .form-wrap dl.required dt:after,
    form#mailformpro dl.required dt:after {
        font-size: 3.14vw;
    }
    section .form-wrap dt span,
    form#mailformpro dl dt span {
        margin: 0 0 0 1em;
    }
    section .form-wrap dt .first_preferred_date + span,
    form#mailformpro dl dt .first_preferred_date + span,
    section .form-wrap dt .second_preferred_date + span,
    form#mailformpro dl dt .second_preferred_date + span {
        margin-right: 1.4em;
    }

    form#mailformpro dl dt .first_preferred_date + span {
        margin-left: 0;
        margin-right: 4em;
    }
    .form-wrap dt .second_preferred_date + span,
    form#mailformpro dl dt .second_preferred_date + span {
        margin-right: 0;
    }
    section .form-wrap dd,
    form#mailformpro dl dd {
        border: none;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    section .form-wrap dd input,
    section .form-wrap dd select,
    section .form-wrap dd textarea {
        width: 100%;
        font-size: 3.2vw;
    }

    section .form-wrap dd input + .note,
    section .form-wrap dd select + .note,
    section .form-wrap dd textarea + .note {
        font-size: 3.2vw;
    }

    section .form-wrap .privacy-agreement {
        width: 100%;
        max-width: 100%;
        margin: 12.8vw 0 0;
        text-align: center;
    }
}

/* 時間の確認用なので非表示*/
#first_time_label,
#second_time_label {
    display: none;
}

/* チェックボックスのデザイン */
section form#mailformpro input[type=checkbox] {
    outline: 1px solid #ccc;
    outline-offset: 2px;
    background-color: #f2f2f2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0.8em;
    height: 0.8em;
    position: relative;
    cursor: pointer;
}
section form#mailformpro input[type=checkbox]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: min(1.02vw, 1.4rem);
    font-weight: bold;
}

/* 確認ボタン */
section form#mailformpro .mfp_buttons {
    margin: 2.5em 0 0 auto;
    width: 72.47%;
    max-width: 616px;
}
section form#mailformpro .mfp_buttons button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 3.55em;

     /* border-image プロパティで解決 */
    border-width: 10px; /* 左右の画像の幅に合わせて調整 */
    border-style: solid;
    border-image: url(../images/contact/btn-frame-black.svg) 10 stretch; /* 左右の幅に合わせて調整 */
    box-sizing: border-box;
    background-image: url(../images/contact/btn-arrow-white.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    background-color: #3e3a39;
    color: #FFF;

    font-size: min(1.39vw, 1.9rem);
    cursor: pointer;
    padding: 0 3.2em;
}
@media print, screen and (max-width: 768px) {
    section form#mailformpro .mfp_buttons {
        margin: 9.06vw auto 0;
        width: 56vw;
        max-width: 56vw;
    }
    section form#mailformpro .mfp_buttons button {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 3.55em;

         /* border-image プロパティで解決 */
        border-width: 10px; /* 左右の画像の幅に合わせて調整 */
        border-style: solid;
        border-image: url(../images/contact/btn-frame-black.svg) 10 stretch; /* 左右の幅に合わせて調整 */
        box-sizing: border-box;
        background-image: url(../images/contact/btn-arrow-white.svg);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 100%;
        background-color: #3e3a39;
        color: #FFF;

        font-size: 4.03vw;
        padding: 0 2.7em;
    }
}

/* ==============================
  フォーム
============================== */
#form-change .title h2 img {
    width: 19.61%;
    max-width: 196px;
}
#form-change .title h2 img.title--inquiry {
    width: 46.29%;
    max-width: 461px;
}
@media print, screen and (max-width: 768px) {
    #form-change .title h2 {
        text-align: center;
    }
    #form-change .title h2 img {
        width: 42.98%;
        max-width: 42.98%;
        margin: 0 auto;
    }
    #form-change .title h2 img.title--inquiry {
        width: 80%;
        max-width: 80%;
        margin: 0 auto;
    }
}

/* ==============================
  フォームのCSSの設定
============================== */
.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date, .mfp_element_password {
    box-shadow: none;
    margin: 0;
}
form#mailformpro label {
    margin: 0;
    border-radius: 0;
}
form#mailformpro label.mfp_not_checked {
    padding: 0;
    border: none;
}
form#mailformpro label.mfp_checked {
    padding: 0;
    border: none;
    background-color: inherit;
    box-shadow: none;
}

.mfp_element_submit,
.mfp_element_reset,
/* .mfp_element_button,  */
button.mfp_next,
button.mfp_prev {
    border: none;
    background: #3e3a39;
    text-shadow: none;
}
.mfp_element_submit:hover,
.mfp_element_reset:hover,
/* .mfp_element_button:hover,  */
button.mfp_next:hover,
button.mfp_prev:hover {
    background: #3e3a39;
    box-shadow: none;
}

/* mailformproの日付入力フィールドのtext-align上書き */
section .form-wrap dd input[type="date"],
form#mailformpro input[type="date"],
.mfp_element_date input[type="date"] {
    text-align: left !important;
}

/* ==============================
  お電話
============================== */
#tel .tel-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85.34%;
    max-width: 850px;
}
#tel .tel-wrap .title {
    width: 42.35%;
    max-width: 360px;
}

#tel .tel-wrap .tel-box {
    width: 36.11%;
    max-width: 307px;
    margin: 0 auto;
}
#tel .tel-wrap .tel-box img.contact-tel {
    margin: 4.8% auto;
    width: 97%;
}
#tel .tel-wrap .tel-box p {
    font-size: min(0.95vw, 1.3rem);
    text-align: center;
}
@media print, screen and (max-width: 768px) {
    #tel .tel-wrap {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    #tel .tel-wrap .title {
        width: 62.54vw;
        max-width: 62.54vw;
    }

    #tel .tel-wrap .tel-box {
        width: 60.67vw;
        max-width: 60.67vw;
        margin: 0 auto;
    }
    #tel .tel-wrap .contact-text {
        display: none;
    }
    #tel .tel-wrap .tel-box img.contact-tel {
        width: 60.67vw;
        margin: 4.62vw 0 4.54vw;
    }
    #tel .tel-wrap .tel-box p {
        font-size: 2.66vw;
    }

}

/* ==============================
  お問い合わせ　完了
============================== */
#thanks.contact-wrap {
    display: block;
}
#thanks .mfp_thanks {
    padding: 0;
}
div#mfp_thanks {
    display: none;
}
#thanks h2 {
    font-size: min(1.84vw, 3rem);
    color: #2B99B0;
    font-weight: 500;
    text-align: center;
}

#thanks h2 + p {
    font-size: min(1.97vw, 1.6rem);
    margin-top: 20px;
    text-align: center;
}

#thanks .btn-wrap {
    width: 45.41%;
    max-width: 203px;
    margin: 3.35% auto 0;
}
#thanks .btn-wrap a {
    width: 100%;
    font-size: min(1.97vw, 1.6rem);
    color: #000;
    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 3.55em;

     /* border-image プロパティで解決 */
    border-width: 10px; /* 左右の画像の幅に合わせて調整 */
    border-style: solid;
    border-image: url(../common/images/btn-frame.svg) 10 stretch; /* 左右の幅に合わせて調整 */
    box-sizing: border-box;
    background-image: url(../common/images/btn-arrow.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;

    font-size: min(1.24vw, 1.7rem);
}
@media print, screen and (max-width: 768px) {
    #thanks h2 {
        font-size: 5.333vw;
        text-align: center;
    }
    #thanks h2 + p {
        font-size: 3.2vw;
        margin-top: 4vw;
    }
    #thanks .btn-wrap {
        width: 47.15vw;
        max-width: 47.15vw;
        margin: 13.41vw auto 0;
    }
    #thanks .btn-wrap a {
        font-size: 4.03vw;
        background-image: url(../common/sp-images/btn-arrow.svg);
        border-image-source: url(../common/sp-images/btn-frame.svg);
        border-width: 2.1vw;
        border-image-width: auto;
        background-position: right -2.1vw center;

        font-size: 3.2vw;

        margin: 0;
    }
}

/* ==============================
  お問い合わせ　フッター
============================== */
#contact .contact-wrap {
    border-top: 0;
    border-bottom: 0;
    padding: 0;
}