@charset "UTF-8";

@import url("settings.css");

/*======レイアウト======*/
.ly_cont {
    max-width: var(--width-md);
    margin: auto;
    padding: 80px 0 120px;
    @media (max-width: 1079.98px) {
        padding: 80px 5% 120px;
    }
}
.ly_cont_sm {
    max-width: var(--width-sm);
    margin: auto;
    padding: 80px 0 120px;
    @media (max-width: 1079.98px) {
        padding: 80px 5% 120px;
    }
}
.ly_bgLiteBlue {
    background: var(--blue50);
}
.ly_bgGray {
    background: var(--gray50);
}
.w1000 {
    max-width: 1060px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

/*======エレメント======*/
.el_lv2Heading {
    font-size: 3.6rem;
    text-align: center;
    margin-bottom: 30px;
    font-weight: var(--txt-b);
    @media (max-width: 575.98px) {
        font-size: 2.6rem;
    }
}
.el_lv2HeadingLeft {
    font-size: 2.8rem;
    font-weight: var(--txt-b);
}
.el_description {
    text-align: center;
    line-height: 1.5;
    margin-bottom: 56px;
    @media (max-width: 575.98px) {
        text-align: left;
    }
}
.el_flow_ttl {
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: var(--txt-b);
    text-align: center;
    span {
        font-size: 1.2rem;
        font-weight: var(--txt-b);
        border-radius: 20px;
        color: var(--primary);
        background: var(--blue50);
        text-transform: uppercase;
        padding: 2px 16px;
        display: block;
        width: 75px;
        margin: 16px auto 8px;
    }
}
.el_lv2Heading_lead {
    font-size: 2rem;
    font-weight: var(--txt-b);
    display: block;
    margin-bottom: 8px;
}
.el_tag {
    font-size: 12px;
    padding: 2px 12px;
    border-radius: 20px;
    display: inline-block;
}
.el_tag__blue {
    color: var(--blue1100);
    background: var(--blue200);
}
.el_tag__marigold {
    color: var(--marigold1100);
    background: var(--marigold200);
}
.el_tag__teal {
    color: var(--teal1100);
    background: var(--teal200);
}
.el_tag__purple {
    color: var(--purple1100);
    background: var(--purple200);
}
.el_tag__green {
    color: var(--green1100);
    background: var(--green200);
}

/*======ボタン======*/
.el_btnBorderGray {
    font-weight: var(--txt-b);
    line-height: 1;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--btn-pd-iconR);
    border-radius: var(--radius-sm);
    gap: var(--btn-gap);
    @media (min-width: 960px) { 
        transition-duration: 0.3s;
        &:hover {
            background: var(--gray50);
        }
    }
}
.el_btnIconLeft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--btn-pd-iconR);
    border-radius: var(--radius-sm);
}
.el_btnIconRight {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-sm);
}
.el_btnLine {
    font-weight: var(--txt-b);
    line-height: 1;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--line);
    padding: var(--btn-pd-line);
    border-radius: var(--radius-sm);
    gap: var(--btn-gap);
    @media (min-width: 960px) { 
        transition-duration: 0.3s;
        &:hover {
            background: var(--line-hover);
        }
    }
}
.el_btnPrimary {
    font-weight: var(--txt-b);
    line-height: 1;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    padding: var(--btn-pd-iconR);
    border-radius: var(--radius-sm);
    @media (min-width: 960px) { 
        transition-duration: 0.3s;
        &:hover {
            background: var(--primary-hover);
        }
    }
}

/*======アイコン======*/
.el_icon_question {
    display: flex;
    align-items: center;
}
.el_icon_question::before{
    content: "";
    background-image: var(--icon-question);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
    width: 16px;
    height: 16px;
}
.el_icon_arrow {
    display: flex;
    align-items: center;
}
.el_icon_arrow::before{
    content: "";
    background-image: var(--icon_arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
    width: 16px;
    height: 16px;
}
.el_icon_arrowWhite {
    display: flex;
    align-items: center;
}
.el_icon_arrowWhite::before {
    content: "";
    background-image: var(--icon_arrowWhite);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
    width: 16px;
    height: 16px;
}
.el_icon_blackArrow {
    display: flex;
    align-items: center;
}
.el_icon_blackArrow::before {
    content: "";
    background-image: var(--icon_blackArrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
    width: 16px;
    height: 16px;
}
.el_icon_line {
    width: 16px;
    height: 16px;
}
.el_icon_line::before {
    content: "";
    background-image: var(--icon_line);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
}