@charset "UTF-8";

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    padding: 90px 0 110px;
    background: #fafafa;
}

.contact-container {
    width: min(960px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.contact-heading {
    margin-bottom: 40px;
    text-align: center;
}

.contact-heading__en {
    margin: 0 0 8px;
    color: #718d9d;
    font-size: 1rem;
    letter-spacing: .2em;
}

.contact-heading h2 {
    margin: 0;
    color: #173f5b;
    font-family: "Noto Serif JP", serif;
    font-size: 3.8rem;
    font-weight: 500;
    line-height: 1.5;
}

.contact-heading > p:last-child {
    margin-top: 15px;
    color: #666;
    font-size: 1.25rem;
    line-height: 1.9;
}


/* =========================================================
   NOTICE
========================================================= */

.contact-notice {
    margin-bottom: 40px;
    padding: 25px 30px;
    background: #eef3f5;
    border-left: 4px solid #173f5b;
}

.contact-notice p {
    margin: 0;
    color: #4d5c64;
    font-size: 1.1rem;
    line-height: 1.85;
}

.contact-notice p + p {
    margin-top: 10px;
}

.contact-notice__important {
    color: #173f5b !important;
    font-weight: 600;
}


/* =========================================================
   ERROR
========================================================= */

.contact-error {
    margin-bottom: 30px;
    padding: 18px 22px;
    color: #a23333;
    background: #fff2f2;
    border: 1px solid #eccaca;
    white-space: pre-line;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
    background: #fff;
    border-top: 3px solid #173f5b;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 240px 1fr;
    border-right: 1px solid #dce4e8;
    border-bottom: 1px solid #dce4e8;
    border-left: 1px solid #dce4e8;
}

.contact-form__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 25px;
    background: #f2f6f8;
}

.contact-form__label label {
    color: #173f5b;
    font-size: 1.15rem;
    font-weight: 600;
}

.contact-form__label span {
    padding: 4px 7px;
    color: #fff;
    background: #173f5b;
    font-size: .82rem;
}

.contact-form__field {
    padding: 24px 28px;
    background: #fff;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    color: #333;
    border: 1px solid #cfd9de;
    border-radius: 0;
    background: #fff;
    font: inherit;
    font-size: 1.15rem;
    outline: none;
    transition: border-color .2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #173f5b;
}

.contact-form textarea {
    min-height: 220px;
    resize: vertical;
    line-height: 1.8;
}

.contact-form__help {
    margin-top: 7px;
    color: #888;
    font-size: .95rem;
}


/* =========================================================
   PRIVACY
========================================================= */

.contact-form__privacy {
    padding: 22px;
    color: #777;
    background: #fafafa;
    font-size: 1rem;
    text-align: center;
}


/* =========================================================
   BUTTON
========================================================= */

.contact-form__button {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.contact-submit {
    display: flex;
    width: min(360px, 100%);
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    color: #fff;
    border: 1px solid #173f5b;
    border-radius: 0;
    background: #173f5b;
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    transition:
        color .25s ease,
        background .25s ease;
}

.contact-submit:hover {
    color: #173f5b;
    background: #fff;
}


/* =========================================================
   HONEYPOT
========================================================= */

.contact-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* =========================================================
   STEP
========================================================= */

.contact-step {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 45px;
}

.contact-step > div {
    padding: 15px 10px;
    color: #7b878e;
    background: #edf1f3;
    border-right: 1px solid #fff;
    text-align: center;
}

.contact-step span {
    margin-right: 7px;
    font-size: .9rem;
}

.contact-step .is-current {
    color: #fff;
    background: #173f5b;
}


/* =========================================================
   CONFIRM
========================================================= */

.contact-confirm {
    background: #fff;
    border-top: 3px solid #173f5b;
}

.contact-confirm dl {
    margin: 0;
}

.contact-confirm dl > div {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-right: 1px solid #dce4e8;
    border-bottom: 1px solid #dce4e8;
    border-left: 1px solid #dce4e8;
}

.contact-confirm dt {
    padding: 24px;
    color: #173f5b;
    background: #f2f6f8;
    font-weight: 600;
}

.contact-confirm dd {
    margin: 0;
    padding: 24px;
    color: #444;
    background: #fff;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.contact-confirm__buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

.contact-confirm__buttons form {
    width: min(320px, 100%);
}

.contact-back {
    width: 100%;
    min-height: 64px;
    padding: 14px 20px;
    color: #173f5b;
    border: 1px solid #173f5b;
    border-radius: 0;
    background: #fff;
    font: inherit;
    cursor: pointer;
}


/* =========================================================
   COMPLETE
========================================================= */

.contact-complete {
    padding: 65px 60px;
    background: #fff;
    border-top: 3px solid #173f5b;
    text-align: center;
}

.contact-complete__en {
    color: #718d9d;
    font-size: 1rem;
    letter-spacing: .2em;
}

.contact-complete h2 {
    margin: 10px 0 25px;
    color: #173f5b;
    font-family: "Noto Serif JP", serif;
    font-size: 2.7rem;
    font-weight: 500;
}

.contact-complete > p {
    color: #555;
    font-size: 1.2rem;
    line-height: 1.9;
}

.contact-complete__notice {
    margin-top: 30px;
    padding: 20px;
    background: #eef3f5;
}

.contact-complete__notice p {
    margin: 0;
    color: #53636b;
    line-height: 1.8;
}

.contact-complete__button {
    display: flex;
    width: min(300px, 100%);
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    margin: 35px auto 0;
    padding: 12px 22px;
    color: #fff;
    background: #173f5b;
}


/* =========================================================
   SP
========================================================= */

@media screen and (max-width: 767px) {

    .contact-section {
        padding: 60px 0 75px;
    }

    .contact-container {
        width: calc(100% - 40px);
    }

    .contact-heading h2 {
        font-size: 2.2rem;
    }

    .contact-notice {
        padding: 20px;
    }

    .contact-form__row {
        display: block;
    }

    .contact-form__label {
        padding: 16px 18px;
    }

    .contact-form__field {
        padding: 18px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }

    .contact-form textarea {
        min-height: 190px;
    }

    .contact-confirm dl > div {
        display: block;
    }

    .contact-confirm dt {
        padding: 15px 18px;
    }

    .contact-confirm dd {
        padding: 18px;
    }

    .contact-confirm__buttons {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .contact-confirm__buttons form {
        width: 100%;
    }

    .contact-submit {
        width: 100%;
    }

    .contact-complete {
        padding: 40px 22px;
    }

    .contact-complete h2 {
        font-size: 2.15rem;
    }

}


/* =========================================================
   CONTACT FORM
   文字サイズ・視認性改善
========================================================= */

/* フォーム全体の基本文字サイズ */
.contact-form {
    font-size: 1.7rem;
    line-height: 1.8;
}


/* 項目名 */
.contact-form label,
.contact-form__label {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6;
}


/* 必須表示 */
.contact-form .required,
.contact-form__required {
    font-size: 1.3rem;
}


/* 入力欄 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    font-size: 1.8rem;
    line-height: 1.7;
}


/* placeholder */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    font-size: 1.6rem;
}


/* テキストエリア */
.contact-form textarea {
    min-height: 240px;
}


/* 注意事項・補足 */
.contact-form__note,
.contact-form__help,
.contact-form small {
    font-size: 1.5rem;
    line-height: 1.8;
}


/* 患者様専用フォーム等の案内文 */
.contact-notice,
.contact-form__notice {
    font-size: 1.7rem;
    line-height: 1.9;
}


/* エラーメッセージ */
.contact-form__error,
.contact-error {
    font-size: 1.5rem;
    line-height: 1.7;
}


/* 送信・確認ボタン */
.contact-form button,
.contact-form input[type="submit"],
.contact-button {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}


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

.contact-confirm {
    font-size: 1.7rem;
}

.contact-confirm th {
    font-size: 1.7rem;
    line-height: 1.7;
}

.contact-confirm td {
    font-size: 1.7rem;
    line-height: 1.9;
}


/* =========================================================
   SP
========================================================= */

@media screen and (max-width: 767px) {

    .contact-form {
        font-size: 1.6rem;
    }

    .contact-form label,
    .contact-form__label {
        font-size: 1.7rem;
    }

    /*
     * スマホの入力欄は16px未満にしない
     * iPhoneで入力時に勝手にズームされるのも防ぐ
     */
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="tel"],
    .contact-form select,
    .contact-form textarea {
        font-size: 16px;
        line-height: 1.7;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
        font-size: 16px;
    }

    .contact-form__note,
    .contact-form__help,
    .contact-form small {
        font-size: 1.4rem;
    }

    .contact-notice,
    .contact-form__notice {
        font-size: 1.6rem;
        line-height: 1.9;
    }

    .contact-form button,
    .contact-form input[type="submit"],
    .contact-button {
        min-height: 62px;
        font-size: 1.7rem;
    }

    .contact-confirm,
    .contact-confirm th,
    .contact-confirm td {
        font-size: 1.6rem;
    }
}