@charset "utf-8";

/*-------------------------------------------------------------------------
共通
-------------------------------------------------------------------------*/

.l-contact .page__header {
    margin: 0;
}
.contact__wrap {
    margin-block: -96px 0;
}
.contact__section :is(input, select, textarea){
    background-color: rgba(236, 239, 241, .2);
}
[class*="contact__submit--"]{
    display: block;
    width: 303px;
    height: 44px;
    margin: 50px auto 0;
    border-radius: 6px;
    font-size  : 15px;
    font-weight: 700;
}
.contact__submit--confirm {
    border: 1px solid var(--sub-color);
    color: var(--sub-color);
}
.contact__submit--send {
    background-color: var(--sub-color);
    color: var(--sub-font-color);
}
 .contact__submit--regist {
     background-color: var(--sub-color);
     color: var(--sub-font-color);
 }

/*-------------------------------------------------------------------------
FLOW
-------------------------------------------------------------------------*/

.md-form-flow {
    margin-block: 0 13px;
    display        :  flex;
    gap            : 38px;
    justify-content: center;
}
    .md-form-flow__items {
        width: 22px;
        display       : flex;
        gap           : 2px;
        align-items   : center;
        flex-direction: column;
        position: relative;
        counter-increment: num;
        font-size: 10px;
        color    : #78909C;
        white-space: nowrap;
    }
    .md-form-flow__items.is-active  { color: var(--dark-color);}
    .md-form-flow__items.is-checked { color: #00ACC1;}

    .md-form-flow__items:before {
        content: counter(num);
        width: 22px;
        height: 22px;
        background-color: #B0BEC5;
        border-radius: 50%;
        display        : flex;
        align-items    : center;
        justify-content: center;
        font-size  : 12px;
        font-weight: bold;
        color      : #fff;
    }
    .md-form-flow__items.is-active:before {
        background-color: #fff;
        border: 2px solid #00ACC1;
        color: #00ACC1;
    }
    .md-form-flow__items.is-checked:before {
        background-color: #00ACC1;
        color: #fff;
    }
    .md-form-flow__items:not(:last-child):after {
        content: "";
        width: 30px;
        height: 2px;
        background-color: #B0BEC5;
        position: absolute;
        top     : 10px;
        left    : calc(100% + 4px)
    }
    .md-form-flow__items.is-checked:after {
        background-color: #00ACC1;
    }

/*-------------------------------------------------------------------------
入力画面
-------------------------------------------------------------------------*/

.contact__section {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 0 0 16px;
    padding: 30px 60px 60px;
}
.contact__section:last-child {
    margin-bottom: 0;
}
    .contact__list {
        display    : flex;
        gap        : 8px;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
    }
        .contact__list fieldset {
            display: contents;
        }
            .contact__ttl {
                width: 157px;
                min-width: 157px;
                padding: 8px 0 0;
                display        : flex;
                align-items    : center;
                justify-content: space-between;
                font-size  : 13px;
                font-weight: 700;
                overflow-wrap: anywhere;
            }
                [class*="contact__status--"] {
                    font-size: 12px;
                    font-weight: normal;
                }
                .contact__status--required { color: var(--strong-color);}
                .contact__status--optional { color: var(--gray-text);}

                .md-form__status {
                    border-radius: 3px;
                    margin-right: 5px;
                    padding: 4px 0;
                    font-size: 12px;
                    font-weight: bold;
                    color: #ffffff;
                    display: inline-block;
                    min-width: 37px;
                    text-align: center;
                    line-height: 1;
                }
                .md-form__status.--required {
                    background-color: rgb(240, 39, 39);
                }
                .md-form__status.--optional {
                    background-color: rgb(121, 178, 217);
                }
                .md-form__status.--ok {
                    background-color: rgb(86, 175, 109);
                }

            .contact__contents {
                flex: 1;
            }
            .contact__contents > * + * {
                margin-top: 8px;
            }
.contact__single-check {
    width: 142px;
}
.required {
    color: var(--strong-color);
}
.contact__select {
    display    : flex;
    gap        : 5px;
    align-items: center;
}
    .contact__select select {
        width: 142px;
    }
.agreement-block {
    margin: 24px 0 0 0;
}
.agreement-text {
    font-weight: normal;
}
.agreement-link {
    font-weight: bold;
}
.email_warning {
    color: var(--strong-color);
    font-size: 12px;
}
/*-------------------------------------------------------------------------
確認画面
-------------------------------------------------------------------------*/

.confirm__section {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 0 0 16px;
    padding: 5px 60px;
}
.confirm__section > * + * {
    border-top: 1px solid var(--border-color);
}
    .confilm__ttl {
        width: calc(100% + 120px);
        border-bottom: 1px solid var(--border-color);
        margin: 0 0 0 -60px;
        padding: 7px 16px 9px;
        font-weight: bold;
        color      : #78909C;
    }
    .confilm__ttl + .confilm__list {
        border: none;
    }
    .confilm__list {
        display: flex;
        padding: 20px 0;
    }
        .confilm__list-ttl {
            min-width: 134px;
            font-size  : 13px;
            font-weight: bold;
            color: var(--light-text-color);
            overflow-wrap: anywhere;
        }

/*-------------------------------------------------------------------------
完了画面
-------------------------------------------------------------------------*/

.completion {
    margin-block: 0 80px;
    text-align: center;
}
    .completion__ttl {
        margin: 0 0 32px;
        font-size  : 32px;
        font-weight: 700;
    }
    .completion__text:not(:last-child){
        margin-bottom: 24px;
    }
    .completion__btn {
        width: 78%;
        height: 44px;
        margin: 0 auto 16px;
    }

.companyInformation {
    text-align: center;
    margin: 50px 0;
}

/*-------------------------------------------------------------------------
日時選択画面
-------------------------------------------------------------------------*/
.contact__submit--confirm svg {
    width: 8px;
    height: 8px;
    fill: var(--sub-color);
}