.wrap img{
    width: 100%;
}

.wrap *{
    font-size: 1.3333vw;
}
.reason{
    padding: 18em 0 6em;
    background: url(../images/bg01.png) no-repeat center 3em/100%;
}
.reason h3 img,.newlife h3 img{
    width: auto;
    height: 17.5em;
    margin: 0 auto 10em;
    display: block;
}
.reason p img{
    width: 82%;
    margin: auto;
    display: block;
}

.point h3 img{
    width: auto;
    margin: 4em auto 2em;
    height: 11em;
    display: block;
}
.point ol{
    width: 82%;
    margin: 0 auto 4em;
}
.point p{
    text-align: center;
}
.point p img{
    width: auto;
    height: 14em;
    margin: auto;
}

.newlife{
    padding: 18em 0 17em;
    background: url(../images/bg02.png) no-repeat center 3em/100%;
    position: relative;
}
.newlife ul{
    display: flex;
    justify-content: space-between;
}
.newlife li{
    width: 33%;
}


.newlife::after{
    content: '';
    width: 100%;
    aspect-ratio: 749/137;
    background: url(../images/wave01.jpg) no-repeat center/cover;
    position: absolute;
    bottom: 0;
    z-index: -1;
}
.item{
    padding: 0 0 13.7em;
    position: relative;
    z-index: 100;
}
.item::before{
    content: '';
    width: 100%;
    aspect-ratio: 750/367;
    background: url(../images/bg03.png) no-repeat center -2em/contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: .6;
}
.item::after{
    content: '';
    width: 100%;
    aspect-ratio: 749/137;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
}
#item1::after{
    background: url(../images/wave02.jpg) no-repeat center/cover;
}
#item2::after{
    background: url(../images/wave03.jpg) no-repeat center/cover;
}
#item3::after{
    background: url(../images/wave04.jpg) no-repeat center/cover;
}
#item1{
    background: #d3e9d7;
}
#item2{
    background: #f9f7c9;
}
#item3{
    background: #ffe8e8;
}
.item > a{
    width: 92%;
    margin: 0 auto 4em;
    display: block;
}
.item h4 img{
    width: auto;
    height: 20.7em;
    margin: 0 auto 3.5em;
    display: block;
}
.item .slide{
    margin: 0 0 8em;
}
.item .slide li{
    height: 100em;
    margin: 0 1em;
    background: #fff;
    border-radius: 3em;
    display: flex;
    flex-direction: column;
}
.item .slide picture{
    padding: 0 4em;
}
.item .slide img{
    margin: 0 0 4em;
}
.item .slide a:last-child{
    padding: 0 4em;
    margin: auto 0 0;
}

.tab{
    width: 92%;
    margin: auto;
}
.tab .select{
    display: flex;
}
.tab .select button{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2em 2em 0 0;
    cursor: pointer;
}
#item1 .tab .select .active button{
    background: #fff;
}
#item2 .tab .select .active button{
    background: #fff;
}
#item3 .tab .select .active button{
    background: #fff;
}
.tab .select button img{
    width: 23em;
}
.tab .select button img:first-child{
    display: none;
}
.tab .select .active button img:first-child{
    display: block;
}
.tab .select button img:last-child{
    display: block;
}
.tab .select .active button img:last-child{
    display: none;
}

#item1 .tab .select button{
    background: #97c181;
}
#item2 .tab .select button{
    background: #d6d273;
}
#item3 .tab .select button{
    background: #d77474;
}
.tab .select li{
    width: 50%;
    aspect-ratio: 345/140;
}
.tab picture{
    padding: 2em 4em 5em;
    background: #fff;
    display: block;
}
.tab .list{
    padding: 0 4em 5em;
    border-radius: 0 0 2em 2em;
    background: #fff;
    display: none;
    flex-wrap: wrap;
    gap: 5em 0;
    justify-content: space-between;
}
.tab .list.active{
    display: flex;
}
.tab .list li{
    width: 28em;
}
.wrap > a{
    width: 92%;
    margin: -8em auto 0;
    display: block;
    position: relative;
    z-index: 400;
}

@media screen and (min-width:768px) {
    .wrap *{
        font-size: 10px;
    }
    .reason{
        padding: 10em 0;
    }
    .reason h3 img, .newlife h3 img{
        height: 14em;
    }
    .reason p img{
        width: 75em;
    }
    .point h3 img{
        width: auto;
        height: 8.4em;
        margin: 0 auto 2em;
        display: block;
    }
    .point ol{
        width: 120em;
        margin: 0 auto 4em;
        display: flex;
        justify-content: space-between;
    }
    .point ol li{
        width: 32%;
    }
    .point p{
        text-align: center;
    }
    .point p img{
        width: auto;
        height: 12em;
    }

    .newlife{
        padding: 10em 0 20em;
    }
    .newlife ul{
        width: 100em;
        margin: auto;
    }
    .newlife li{
        width: 31%;
    }
    .newlife,.item{
        overflow: hidden;
    }
    .newlife::after,.item::after{
        aspect-ratio: 1920/178;
    }
    .item::before{
        width: 70em;
        left: 50%;
        transform: translateX(-50%);
        background: url(../images/bg03.png) no-repeat center center/contain;
    }
    .item h4 img{
        margin: 0 auto 6em;
    }
    .newlife::after{
        background: url(../images/wave01_pc.jpg) no-repeat center/cover;
    }
    #item1::after{
        background: url(../images/wave02_pc.jpg) no-repeat center/cover;
    }
    #item2::after{
        background: url(../images/wave03_pc.jpg) no-repeat center/cover;
    }
    #item3::after{
        background: url(../images/wave04_pc.jpg) no-repeat center/cover;
    }
    .item .slide{
        width: 120em;
        margin: 0 auto 7em;
        display: flex;
        justify-content: space-between;
    }
    .item .slide li{
        width: 28.6em;
        height: 50em;
        margin: auto;

    }
    .item .slide img{
        margin: 0 0 2em;
    }
    .item .slide picture{
        padding: 0 2em;
    }
    .item .slide a:last-child{
        padding: 0 2em;
    }
    .tab{
        width: 120em;
    }
    .tab .select{
        width: 94em;
        margin: auto;
    }
    .tab picture{
        width: 100%;
        padding: 2em 13em 5em;
        border-radius: 2em 2em 0 0;
    }
    .tab .select li{
        aspect-ratio: 47/14;
    }
    .tab .list{
        margin: 0 0 7em;
        padding: 0 13em 13em;
    }
    .item{
        text-align: center;
    }
    .item > a{
        margin: 0 0 7em;
        width: 59.1em;
        display: inline-block;
    }
    .item > a + a{
        margin: 0 0 0 1.8em;
    }
    .wrap > a{
        width: 75em;
        margin: -10em auto 10em;
    }
}