@charset "utf-8";

/* ------------------------------
 lead（リード文＋ご利用の流れ）
------------------------------ */

.lead-title {
    margin-top: 4rem;
}

.lead-flow {
    gap: 3.6rem; /* カード間 10px ＋ 矢印 16px ＋ 10px */
    margin-top: 4rem;
}

.lead-flow .flow-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    flex: 0 1 200px;
    gap: 1rem;
    padding: 0 1rem;
}

.lead-flow .flow-item:not(:last-child):after {
    right: -2.6rem;
}

.flow-item-step {
    display: block;
    font-family: var(--ff-en);
    font-size: 2rem;
    font-weight: 700;
}

.flow-item-name {
    display: block;
    min-height: 44px; /* 1行のステップ名でもアイコンの位置が揃うように2行分 */
    margin-top: .2rem;
    color: var(--c-main);
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.flow-item-icon {
    display: block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: var(--c-main-pale);
    border-radius: var(--radius-pill);
}

.flow-item-icon img {
    vertical-align: middle;
}

.flow-item-text {
    width: 100%;
    font-weight: 400;
    text-align: left;
}

/* ------------------------------
 form
------------------------------ */

.form-box {
    max-width: 800px;
    padding: 6rem 8rem;
    margin: 0 auto;
    text-align: left;
    background-color: var(--c-white);
    border-radius: 3rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.form-item + .form-item {
    margin-top: 3rem;
}

.form-item-label {
    display: block;
    font-family: var(--ff-heading);
    font-size: 2.2rem;
    font-weight: 700;
}

.form-item-required {
    display: inline-block;
    padding: .2rem 1.6rem;
    margin-left: 1rem;
    vertical-align: middle;
    color: var(--c-red);
    font-family: var(--ff-default);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid var(--c-red);
    border-radius: var(--radius-pill);
}

.form-radio {
    padding-left: 2rem;
    margin-top: 1rem;
}

.form-radio li + li {
    margin-top: 1rem;
}

.form-radio-item {
    display: block;
    cursor: pointer;
}

.form-radio-item input {
    position: relative; /* 選択中の点（:before）の基準 */
    -webkit-appearance: none; /* base.css の [type="radio"] で標準の見た目に戻されるのを打ち消す */
       -moz-appearance: none;
            appearance: none;
    width: 20px;
    height: 20px;
    margin-right: 1rem;
    vertical-align: middle;
    border: 1px solid var(--c-default);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.form-radio-item input:checked {
    border-color: var(--c-main);
}

.form-radio-item input:checked:before {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    content: "";
    background-color: var(--c-main);
    border-radius: var(--radius-pill); /* 枠線の内側に正円の点 */
}

.form-radio-text {
    vertical-align: middle;
}

.form-radio-note {
    font-weight: 400;
}

.form-input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 1.6rem 2rem;
    margin-top: 1rem;
    background-color: var(--c-cream);
    border: none;
    border-radius: .6rem;
}

.form-input::-webkit-input-placeholder {
    color: var(--c-gray-mid);
}

.form-input::-moz-placeholder {
    color: var(--c-gray-mid);
}

.form-input::placeholder {
    color: var(--c-gray-mid);
}

.form-textarea {
    height: 240px;
    resize: vertical;
}

.form-error {
    display: none;
    margin-top: .6rem;
    color: var(--c-red);
    font-size: 1.4rem;
}

.is-error .form-error {
    display: block;
}

.is-error .form-input {
    border: 1px solid var(--c-red);
}

.form-note {
    margin-top: 4rem;
    font-weight: 400;
    text-align: center;
}

.form-note a {
    color: var(--c-link);
    text-decoration: underline;
}

.form-button {
    margin-top: 4rem;
}

.form-button.is-disabled {
    background-color: var(--c-gray-mid); /* 必須項目が埋まるまで */
    -webkit-box-shadow: none;
            box-shadow: none;
    cursor: default;
}

.form-button.is-disabled:after {
    background-image: url(../images/common/common_icon13.svg); /* 矢印もグレーに */
}

.form-result {
    display: none; /* 送信先の iframe（hidden 属性だけだと base.css の指定で表示されてしまう） */
}

/* ------------------------------
 faq
------------------------------ */

.faq {
    background-color: var(--c-main-pale);
}

/* ------------------------------
 floating（このページでは申し込みボタンを出さない）
------------------------------ */

.floating-cta {
    display: none;
}

/* ------ max-width:767px ------ */
@media (max-width:767px) {
    /* lead */
    .lead-title {
        margin-top: 2rem;
    }

    .lead-flow {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 1rem;
        margin-top: 2rem;
    }

    .lead-flow .flow-item {
        flex: 0 1 calc(50% - .5rem);
        gap: .6rem;
        padding: 0;
    }

    .lead-flow .flow-item:not(:last-child):after {
        content: none;
    }

    .flow-item-step {
        font-size: 1.6rem;
    }

    .flow-item-name {
        min-height: 0; /* SP は1行のステップ名の下を空けない */
        font-size: 1.4rem;
    }

    .flow-item-icon {
        order: -1;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .flow-item:nth-child(1) .flow-item-icon img {
        width: 36px;
        height: 25px;
    }

    .flow-item:nth-child(2) .flow-item-icon img {
        width: 28px;
        height: 33px;
    }

    .flow-item:nth-child(3) .flow-item-icon img {
        width: 30px;
        height: 28px;
    }

    .flow-item:nth-child(4) .flow-item-icon img {
        width: 34px;
        height: 29px;
    }

    .flow-item-text {
        font-size: 1.4rem;
    }

    /* form */
    .form-box {
        padding: 4rem 2rem;
    }

    .form-item + .form-item {
        margin-top: 2rem;
    }

    .form-item-label {
        font-size: 1.6rem;
    }

    .form-item-required {
        padding: 0 1rem;
        font-size: 1.4rem;
    }

    .form-radio {
        padding-left: 0;
    }

    .form-radio-item input {
        width: 16px;
        height: 16px;
        margin-top: .4rem;
        vertical-align: top;
    }

    .form-radio-item input:checked:before {
        top: 3px;
        right: 3px;
        bottom: 3px;
        left: 3px;
    }

    .form-radio-text {
        display: inline-block;
        vertical-align: top;
    }

    .form-radio-note {
        display: block;
        font-size: 1.4rem;
    }

    .form-note {
        text-align: left;
    }
}