@charset "UTF-8";

#Header {
    height: 71px;
}

/* 900 */
@media screen and (max-width: 900px) {
    #Header {
        height: 18vw;
    }
}

/* common
---------------------------------------------------*/
.title-wrap {
    max-width: 880px;
    margin: 0 auto 48px;
}
/* tag-list */
ul.tag-list {
    display: flex;
    align-items: center;
}
ul.tag-list li {
    line-height: 1.2;
    color: var(--btn-font-color);
    font-size: var(--font-size-m);
    font-weight: 700;
    letter-spacing: 0.16em;
    background-color: var(--point-color);
    border-radius: 2em;
    padding: 4px 23px;
}
ul.tag-list li:not(:last-child) {
    margin-right: 8px;
}
/* ttl-page*/
.ttl-page {
    margin-bottom: 8px;
}
.ttl-page + p {
    font-size: var(--font-size-m);
    line-height: 1.8;
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    letter-spacing: 0.1em;
    margin-bottom: 64px;
}
/* headline */
.headline {
    background-color: var(--section-color);
    border-radius: 24px;
    padding: 24px 32px;
    margin-bottom: 64px;
}
.headline p {
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.8;
    letter-spacing: 0.06em;
}
/* steps-list */
ul.steps-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.steps-list li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30.68%;
    text-align: center;
    color: #A19B8D;
    font-size: var(--font-size-n);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.8;
    letter-spacing: 0.06em;
    border-bottom: 2px dashed #A19B8D;
    padding: 0 8px 16px;
}
ul.steps-list li:not(:last-child) {
    margin-right: 3.98%;
}
ul.steps-list li:not(:last-child)::after {
    position: absolute;
    content: '';
    top: 4px;
    right: -28px;
    width: 22px;
    height: 22px;
    background-image: url('../img/common/icon_arrow_khaki.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
ul.steps-list li .num {
    position: relative;
    color: var(--btn-font-color);
    font-size: var(--font-size-sn);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.2;
    z-index: 1;
    margin-right: 24px;
}
ul.steps-list li .num::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    aspect-ratio: 1 / 1;
    background-color: #A19B8D;
    border-radius: 50%;
    z-index: -1;
}
/* is-current */
ul.steps-list li.is-current {
    color: var(--point-color);
    border-bottom: 2px solid var(--point-color);
}
ul.steps-list li.is-current:not(:last-child)::after {
    background-image: url('../img/common/icon_arrow_purple.svg');
}
ul.steps-list li.is-current .num {
    font-weight: 700;
}
ul.steps-list li.is-current .num::after {
    background-color: var(--point-color);
}

/* form-wrap */
.form-controls-wrap {
    background-color: var(--white-color);
    padding: 48px 0;
    margin-bottom: 65px;
}
.form-controls {
    max-width: 880px;
    margin: 0 auto;
}
.form-controls .ttl-form {
    font-size: var(--font-size-l);
    line-height: 1.2;
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    letter-spacing: 0.1em;
    margin-bottom: 32px;
}

/* tbl-contact */
dl.tbl-contact {
    display: flex;
    align-items: flex-start;
    width: 100%;
    border-top: 1px solid #A19B8D;
    padding: 16px 0;
    margin: 0 auto;
}
dl.tbl-contact dt {
    display: flex;
    align-items: center;
    width: 280px;
    line-height: 1.6;
    color: #4E473D;
    font-size: var(--font-size-m);
    font-weight: 700;
    letter-spacing: 0.06em;
}
dl.tbl-contact dt span {
    display: inline-block;
    color: var(--btn-font-color);
    font-size: var(--font-size-sn);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    background-color: var(--red-color);
    border-radius: 2em;
    padding: 3px 17px;
    margin-right: 8px;
}
dl.tbl-contact dt span.any {
    background-color: #A19B8D;
}
dl.tbl-contact dd {
    width: calc(100% - 280px);
}
dl.tbl-contact dd p.note {
    color: var(--red-color);
    font-size: var(--font-size-m);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
    letter-spacing: 0.06em;
    margin-top: 16px;
}

/* radio-list */
ul.radio-list {
    display: flex;
    flex-wrap: wrap;
}
ul.radio-list li {
    margin-bottom: 14px;
}
ul.radio-list li:not(:last-child) {
    margin-right: 24px;
}
ul.radio-list li:nth-last-child(-n+3) {
    margin-bottom: 0;
}
ul.radio-list li label {
    color: #4E473D;
    font-size: var(--font-size-m);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
    letter-spacing: 0.06em;
}

/* check-list */
ul.check-list {
    display: flex;
    flex-wrap: wrap;
}
ul.check-list li {
    margin-bottom: 14px;
}
ul.check-list li:not(:last-child) {
    margin-right: 24px;
}
ul.check-list li:nth-last-child(-n+3) {
    margin-bottom: 0;
}
ul.check-list li label {
    color: #4E473D;
    font-size: var(--font-size-m);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
    letter-spacing: 0.06em;
}
ul.check-list + input,
ul.radio-list + input,
.error + input,
.error + input {
    margin-top: 16px;
}

/* agreement-block */
.agreement-block {
    border-radius: 8px;
    border: 1px solid #A19B8D;
    background: var(--btn-font-color);
    padding: 16px 16px 26px;
    margin-top: 16px;
}
.agreement-block .title {
    color: #4E473D;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #A19B8D;
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.agreement-block .message p {
    color: #4E473D;
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
}
.agreement-block .message p.none {
    color: var(--red-color);
    font-size: var(--font-size-s);
    margin-top: 8px;
}
.agreement-block .message p a {
    color: #977949;
    text-decoration-line: underline;
}
.agreement-block .tbl-contact {
    display: flex;
    align-items: center;
    margin-top: 16px;
    border: 0;
    padding: 0;
}
.agreement-block .tbl-contact dt {
    width: auto;
    margin-right: 16px;
}
.agreement-block .tbl-contact dd {
    width: auto;
    line-height: 1.6;
    font-weight: 700;
}

/* error */
.tbl-contact .error {
    color: var(--red-color);
    font-size: var(--font-size-m);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
    letter-spacing: 0.06em;
    margin-top: 16px;
}
.tbl-contact .error.hidden {
    display: none;
}

/* button-wrap */
.button-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-wrap li {
    width: 380px;
}
.button-wrap li:not(:last-child) {
    margin-right: 16px;
}

/* btn-submit */
#contact .btn-submit + .note {
    text-align: center;
    color: var(--red-color);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
    margin-top: 16px;
}

/* notice */
.notice {
    margin-top: 32px;
}
.notice p {
    color: #4E473D;
    text-align: center;
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
}
.notice p.note {
    font-size: var(--font-size-sn);
    font-weight: 400;
    margin-top: 16px;
}

/* < 900 */
@media screen and (max-width: 900px) {
    .title-wrap {
        width: 92vw;
        margin: 0 auto 8vw;
    }
    /* tag-list */
    ul.tag-list li {
        font-size: var(--font-size-n);
        padding: 1vw 5.5vw;
    }
    ul.tag-list li:not(:last-child) {
        margin-right: 2vw;
    }
    /* ttl-page*/
    .ttl-page {
        margin-bottom: 2vw
    }
    .ttl-page + p {
        font-size: var(--font-size-sn);
        line-height: 1.8;
        letter-spacing: 0.1em;
        margin-bottom: 4.5vw;
    }
    /* headline */
    .headline {
        border-radius: 4vw;
        padding: 2vw;
        margin-bottom: 12vw;
    }
    .headline p {
        line-height: 1.6;
    }
    /* steps-list */
    ul.steps-list li {
        display: block;
        width: 27.17%;
        text-align: center;
        padding: 2vw 0 2vw;
        white-space: nowrap;
    }
    ul.steps-list li:not(:last-child) {
        margin-right: 9.245%;
    }
    ul.steps-list li:not(:last-child)::after {
        top: 9.125vw;
        right: -7vw;
        width: 5.5vw;
        height: 5.5vw;
    }
    ul.steps-list li .num {
        display: block;
        margin-right: 0;
        margin-bottom: 3.125vw;
    }
    ul.steps-list li .num::after {
        width: 7vw;
    }

    /* form-wrap */
    .form-controls-wrap {
        padding: 12vw 0;
        margin-bottom: 8vw;
    }
    .form-controls {
        width: 92vw;
    }
    .form-controls .ttl-form {
        margin-bottom: 6vw;
    }

    /* tbl-contact */
    dl.tbl-contact {
        display: block;
        padding: 0;
    }
    dl.tbl-contact dt {
        width: 100%;
        font-size: var(--font-size-n);
        background-color: #E3DDD4;
        padding: 1vw 2vw;
    }
    dl.tbl-contact dt span {
        padding: 0.25vw 4.5vw;
        margin-right: 2vw;
    }
    dl.tbl-contact dd {
        width: 100%;
        padding: 2vw 0 4vw;

    }
    dl.tbl-contact dd p.note {
        font-size: var(--font-size-sn);
        margin-top: 3.5vw;
    }

    /* radio-list */
    ul.radio-list li {
        margin-bottom: 2.75vw;
    }
    ul.radio-list li:not(:last-child) {
        margin-right: 6.5vw;
    }
    ul.radio-list li:nth-last-child(-n+3) {
        margin-bottom: 2.75vw;
    }
    ul.radio-list li:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
    ul.radio-list li label {
        font-size: var(--font-size-n);
    }
    .user-tel ul.radio-list li {
        margin-bottom: 0;
    }
    /* check-list */
    ul.check-list li {
        margin-bottom: 2.75vw;
    }
    ul.check-list li:not(:last-child) {
        margin-right: 6.5vw;
    }
    ul.check-list li:nth-last-child(-n+3) {
        margin-bottom: 2.75vw;
    }
    ul.check-list li:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
    ul.check-list li label {
        font-size: var(--font-size-n);
    }
    ul.check-list + input,
    ul.radio-list + input,
    .error + input,
    .error + input {
        margin-top: 4vw;
    }

    /* agreement-block */
    .agreement-block {
        border-radius: 2vw;
        padding: 2vw 4vw;
        margin-top: 16px;
    }
    .agreement-block .title {
        font-size: var(--font-size-n);
        padding-bottom: 2vw;
        margin-bottom: 2vw;
    }
    .agreement-block .message p {
        font-size: var(--font-size-sn);
    }
    .agreement-block .message p.none {
        margin-top: 2vw;
    }
    .agreement-block .tbl-contact {
        display: flex;
        align-items: center;
        margin-top: 4vw;
    }
    .agreement-block .tbl-contact dt {
        margin-right: 2.5vw;
        padding: 0;
        background-color: transparent;
    }
    .agreement-block .tbl-contact dd {
        padding: 0;
    }

    /* error */
    .tbl-contact .error {
        font-size: var(--font-size-sn);
        margin-top: 3.5vw;
    }

    /* button-wrap */
    .button-wrap {
        display: block;
    }
    .button-wrap li {
        width: 100%;
    }
    .button-wrap li:not(:last-child) {
        margin-right: 0;
        margin-bottom: 4vw;
    }

    /* btn-submit */
    #contact .btn-submit + .note {
        margin-top: 4vw;
    }

    /* notice */
    .notice {
        margin: 8vw 4vw 0;
    }
    .notice p {
        text-align: left;
        font-size: var(--font-size-sn);
    }
    .notice p.note {
        margin-top: 4vw;
    }
}

/* contact
---------------------------------------------------*/
#contact {
    padding: 80px 0 120px;
    margin: 0 auto;
}

/* < 900 */
@media screen and (max-width: 900px) {
    #contact {
        padding: 16vw 0 20vw;
    }
}


/* contact confirm
---------------------------------------------------*/
#contact.confirm .ttl-page + p {
    margin-bottom: 24px;
}
/* note */
.title-wrap .note {
    margin-bottom: 64px;
}
.title-wrap .note p {
    color: var(--red-color);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
}
/* form-wrap */
#contact.confirm .form-controls-wrap {
    padding-bottom: 64px;
}
/* tbl-contact */
#contact.confirm dl.tbl-contact dd {
    color: #4E473D;
    font-size: var(--font-size-m);
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
    letter-spacing: 0.06em;
}
#contact.confirm dl.tbl-contact:last-of-type {
    border-bottom: 1px solid #A19B8D;
}
#contact.confirm dl.tbl-contact dd p.note {
    font-size: var(--font-size-sn);
    margin-top: 4px;
}

/* < 900 */
@media screen and (max-width: 900px) {
    #contact.confirm .ttl-page + p {
        margin-bottom: 4vw;
    }
    /* note */
    .title-wrap .note {
        margin-bottom: 12vw;
    }
    .title-wrap .note p {
        font-size: var(--font-size-sn);
    }
    /* form-wrap */
    #contact.confirm .form-controls-wrap {
        padding-bottom: 16vw;
    }
    /* tbl-contact */
    #contact.confirm dl.tbl-contact dd {
        font-size: var(--font-size-n);
        letter-spacing: 0;
        padding: 1.5vw 2vw 3.5vw;
    }
    #contact.confirm dl.tbl-contact dd p.note {
        margin-top: 1vw;
    }
}


/* contact complete
---------------------------------------------------*/
/* form-wrap */
#contact.complete .form-controls-wrap {
    padding-bottom: 64px;
}
#contact.complete .thanks {
    border-top: 1px solid #A19B8D;
    border-bottom: 1px solid #A19B8D;
    padding: 32px 0;
}
#contact.complete .thanks p {
    color: #4E473D;
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
    font-variation-settings: "wght" 500;/*Medium*/
    line-height: 1.6;
    letter-spacing: 0.06em;
}
#contact.complete .thanks p:not(:last-of-type) {
    margin-bottom: 1.6em;
}

/* < 900 */
@media screen and (max-width: 900px) {
    #contact.complete .form-controls-wrap {
        padding-bottom: 16vw;
    }
    #contact.complete .thanks {
        padding: 8vw 0;
    }
}