@charset "utf-8";

/*================================
下層ページ共通設定
================================*/

.lower_mv {
    background-image: url(./img/lower_mv_bg.jpg);
}

.lower_section {
    background: none;
}

.section_ttl01_wrap {
    margin-bottom: 40px;
}

.feature_head {
    background: url(./img/Now_Beyond_pc.jpg?01) no-repeat center #e3f7fe;
    min-height: 436px;
}
.feature_head_wrap {

}
.feature_head_txt {
    color: #333333;
    line-height: 1.7;
    font-weight: 500;
    text-shadow: 0 0 10px #e3f7fe;
}

  
.feature_head_ttl span {
    color: #3da7d1;
}
.feature_head_ttl {
    font-size: 36px;
    font-family: "Zen Maru Gothic";
    font-weight: 700;
    color: #333333;
    line-height: 1.7;
    text-align: left;
    padding: 30px 0;
}

#Policy01 .section_ttl01_wrap::before {
    content: "";
    position: absolute;
    top: -20px;
    right: 100px;
    display: block;
    background: url(./img/policy01_ttl.png) no-repeat right center;
    width: 80px;
    height: 130px;
}

#Policy02 .section_ttl01_wrap::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 100px;
    display: block;
    background: url(./img/policy02_ttl.png) no-repeat right center;
    width: 101px;
    height: 126px;
}

#Policy03 .section_ttl01_wrap::before {
    content: "";
    position: absolute;
    top: -50px;
    right: 100px;
    display: block;
    background: url(./img/policy03_ttl.png) no-repeat right center;
    width: 78px;
    height: 158px;
}

#Policy04 .section_ttl01_wrap::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 100px;
    display: block;
    background: url(./img/policy04_ttl.png) no-repeat left center;
    width: 105px;
    height: 180px;
}

.policy02_flex {
    position: relative;
    display: flex;
    gap: 20px 40px;
}

.policy02_flex .grey_box {
    padding: 40px 20px;
    width: 100%;

}
.policy02_flex .txt {
}

.policy02_circle_wrap {
    position: relative;
}
.policy02_circle_wrap img{
    margin: 0 auto;
}
.policy02_circle {
    display: grid;
    align-items: center;
    position: absolute;
    left: -10px;
    bottom: -20px;
    border-radius: 50%;
    background-color: #3da7d1;
    width: 145px;
    height: 145px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    line-height: 1.7;
    font-weight: bold;
}


.policy02_pic02 .policy02_circle {
    top: 10px;
    right: -15px;
    left: unset;

}

.policy02_flex_X {
    position: absolute;
    inset: 0;
    width: fit-content;
    margin: 0 auto;

    top: 33%;
    font-size: 100px;
    font-family: "Zen Maru Gothic";
    color: #333333;
    line-height: 1;
    text-align: center;
}


/*================================

　ここからPC適用

================================*/
@media(min-width: 897px) {


}

/*================================
TABLET縦 1024px～0px
================================*/
@media (max-width: 1024px) {

    .feature_head {
        background-image: url(./img/Now_Beyond_bg.png);
        background-position: 50% -50%;
        position: relative;
    }

    .feature_head::after {
        content: "";
        background: url(./img/Now_Beyond.png?01) no-repeat;
        width: 291px;
        height: 291px;
        display: block;
        position: absolute;
        right: 1%;
        bottom: 5%;
    }

    .policy02_flex {
        max-width: 480px;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .policy02_flex_X {
        position: relative;
        top: -5px;
    }

    .lower_flex03 {
        /* flex-wrap: nowrap; */
    }

}

/*================================

　ここからTABLET・SP適用

================================*/
@media(max-width: 896px) {
    #Policy01 .section_ttl01_wrap::before {
        position: relative;
        inset: 0;
        display: block;
        margin: 0 auto;
        height: auto;
        background-size: 50%;
        background-position: bottom;
        padding-top: 20%;
    }

    #Policy02 .section_ttl01_wrap::before {
        position: relative;
        inset: 0;
        display: block;
        margin: 0 auto;
        height: auto;
        background-size: 50%;
        background-position: bottom;
        padding-top: 20%;
    }

    #Policy03 .section_ttl01_wrap::before {
        position: relative;
        inset: 0;
        display: block;
        margin: 0 auto;
        height: auto;
        background-size: 50%;
        background-position: bottom;
        padding-top: 23%;
    }

    #Policy04 .section_ttl01_wrap::before {
        position: relative;
        inset: 0;
        display: block;
        margin: 0 auto;
        height: auto;
        background-size: 50%;
        background-position: bottom;
        padding-top: 26%;
    }
}

/*================================

　ここからSP適用

================================*/
@media(max-width: 700px) {
    
    .feature_head {
        min-height: 600px;
        background-position: bottom;
    }
    .feature_head::after {
        width: 200px;
        height: 200px;
        background-size: 200px;
    }

    .feature_head_ttl {
        font-size: 22px;
    }

}

/*================================

　ここからSP適用

================================*/
@media(max-width: 480px) {

    .policy02_pic02 .policy02_circle {
        top: unset;
        bottom: -30px;
    }


}