@charset "utf-8";

/* リセットCSS
--------------------------------------------------------------------------- */
section + section{
    margin-top: 100px;
}

@media screen and (max-width:767px){
    section + section{
        margin-top: 80px;
    }
}

/* 要素幅
--------------------------------------------------------------------------- */
.content{
    max-width: 740px;
    width: 100%;
    margin-inline: auto;
}

/* 文字サイズ調整
--------------------------------------------------------------------------- */
.textLg{
    font-size: 18px;
}
@media screen and (max-width:767px){
    .textLg{
        font-size: 17px;
    }
}

/* ボタン
--------------------------------------------------------------------------- */
.btn_accent{
    font-weight: bold;
    color: #ff5900;
    border-bottom: 1px solid #ff5900;
}

/* minimum-section（ご利用通知サービスとは）
--------------------------------------------------------------------------- */
.minimum-section .service_flow{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:48px;
    padding:32px 40px 40px 40px;
    border: 3px solid #ffe599;
    background-color: #fff;
}
.minimum-section .card_flow{
    max-width: 270px;
    width: 100%;
}
.minimum-section .arrow01_flow{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: fit-content;
    height: fit-content;
}
.minimum-section .arrow01_flow img{
    max-width: 80px;
    width: 100%;
}
.minimum-section .app_flow{
    max-width: 270px;
    width: 100%;
}

.minimum-section .title_lv4{
    margin-bottom: 22px;
}



@media screen and (max-width:767px){
    .minimum-section .service_flow{
        flex-direction: column;
        gap: 107px;
        padding: 23px 18px 28px;
    }
    .minimum-section .card_flow{
        max-width: initial;
    }
    .minimum-section .app_flow{
        max-width: initial;
    }
    .minimum-section .card_flow img{
        max-width: 285px;
        width: 100%;
        margin-inline: auto;
        display: block;
    }
    .minimum-section .arrow01_flow{
        max-width: 48px;
    }
    .minimum-section .app_flow img{
        max-width: 285px;
        width: 100%;
        margin-inline: auto;
        display: block;
    }

    .minimum-section .title_lv4{
        padding-bottom: 12px;
    }
}


/* features 特徴
--------------------------------------------------------------------------- */
.features .features_list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.features .features_item{
    max-width: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.features .features_item .content-text{
    margin-top: 0;
    font-size: 18px;
    line-height: calc(28 / 18);
    letter-spacing: 0.02em;
}


.features_icon{
    background-color: #fff5eb;
    width: fit-content;
    height: auto;
    margin-inline: auto;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.features_icon img{
    max-width: 200px;
    width: 100%;
    height: auto;
}

@media screen and (max-width:767px){
    .features .features_list{
        flex-direction: column;
        gap: 29px;
    }
    .features .features_item{
        gap: 13px;
    }

    .features .content-text{
        /* padding-top: 20px; */
    }
    .features_icon img{
        max-width: 180px;
    }
}



/* confirm
--------------------------------------------------------------------------- */
.confirm{
    margin-top: 110px;
    padding: 53px 0 65px 0;
    background-color: #fffaeb;
}


.confirm .confirm_flow{
    position: relative;
    margin-top: 48px;
    padding: 29px 40px 37px 40px;
    border: 3px solid #ffe599;
    background-color: #fff;
}

.confirm .method_flow{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.confirm .method_flow img{
    display: block;
    margin-inline: auto;
}

.confirm .push_flow{
    max-width: 270px;
    width: 100%;
}

.confirm .push_flow img{
    max-width: 244px;
    width: 100%;
}

.confirm .messagebox_flow{
    max-width: 270px;
    width: 100%;
}

.confirm .messagebox_flow img{
    max-width: 237px;
    width: 100%;
}

.confirm .arrow02_flow img{
    padding: 13px;
}

.confirm .message_flow{
    max-width: 230px;
    width: 100%;
    display: block;
    margin: auto;
}

@media screen and (max-width:767px){
    .confirm{
        padding-top: 40px;
        margin-top: 89px;
    }


    .confirm .method_flow{
        flex-direction: column;
        gap: 28px;
    }

    .confirm .push_flow img{
        max-width: 170px;
    }


    .confirm .messagebox_flow img{
        max-width: 165px;
    }

    .confirm .arrow02_flow img{
        max-width: 32px;
        display: block;
        margin-inline: auto;
        padding: 13px 0;
    }

    .confirm .message_flow img{
        margin-top: 19px;
        max-width: 165px;
        margin-inline: auto;
        display: block;
    }
    .confirm .confirm_flow{
        margin-top: 45px;
        padding: 21px 18px 19px;
    }
    .confirm .push_flow{
        max-width: initial;
    }
     .confirm .messagebox_flow{
        max-width: inherit;
        margin-bottom: 20px;
    }
    .confirm .push_flow .title_lv4{
        margin-bottom: 23px;
    }
     .confirm .messagebox_flow .title_lv4{
       margin-bottom: 23px;
    }
}

/* setting
--------------------------------------------------------------------------- */
.setting{
    margin-top: 87px;
}

.setting .setting_content{
    max-width: 900px;
    width:100%;
    margin-inline: auto;
}

.setting .setting_flow{
    margin-top: 43px;
    padding: 32px 40px;
    border: 1px solid #ccc;
}

.setting .setting_flow img{
    max-width: 820px;
    width: 100%;
}

@media screen and (max-width:767px) {
    .setting{
        margin-top: 55px;
    }
    .setting .title_lv2{

    }
    .setting .setting_flow{
        margin-top: 46px;
        padding: 28px 10px;
    }
}

/* notes
--------------------------------------------------------------------------- */
.notes{
    margin-top: 137px;
}

.notes .notes-text{
    margin-top: 41px;
}

.notes .list_disc{
    margin-top: 34px;
    max-width: 655px;
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width:767px) {
    .notes{
        margin-top: 75px;
    }
    .notes .list_disc{
        margin-top: 29px;
        letter-spacing: 0.06em;
    }
    .notes .notes-text{
        margin-top: 31px;
    }
}