@charset "UTF-8"; 
/* Feature */
.mv:before{background: url("../img/feature/mv.webp") no-repeat center center/cover;}

@media only screen and (max-width: 480px) {
  .mv:before{background: url("../img/feature/mv_sp.webp") no-repeat center center/cover;}
}

.main .title {
    text-align: center;
    margin-bottom: 95px;
}

.main .title h2 {
    font-size: 30px;
    color: #009333;
    margin-bottom: 30px;
}

.main .listTxt {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.main .listTxt li {
    /* flex: 0 0 50%; */
    /* max-width: 50%; */
    padding: 0 20px;
    /* display: flex; */
    margin-bottom: 40px;
}

.main .listTxt li .img-feature {
    flex: 0 0 24%;
    max-width: 24%;
}

.main .listTxt li .box-content {
    padding-left: 15px;
}

.main .listTxt li .box-content h4 {
    font-size: 25px;
    color: #0d8080;
}

.main .listTxt li .box-content p {
    margin-top: 10px;
}

/* MEDIA */
@media only screen and (max-width: 767px) {

    .main .title {
        margin-bottom: 40px;
    }
    .main .title h2 {
        font-size: 25px;
    }
    .main .listTxt li .box-content h4 {
        font-size: 20px;
    }
    .main .listTxt li .box-content h4 br {
        display: none;
    }
    .main .listTxt li {
        display: block;
        width: 100%;
        flex: unset;
        max-width: unset;
    }
    .main .listTxt li .img-feature {
        width: 100%;
        max-width: unset;
        text-align: center;
        margin-bottom: 20px;
    }
    .main .listTxt li .img-feature img {
        width: 60px;
    }
    .main .listTxt li .box-content {
        padding-left: 15px;
    }
}


/* renew_style 202508 */
.main .listTxt li {margin-bottom: 120px;}
.main .listTxt li .box-content{ padding-left: 0;}
.main .listTxt li .box-content .text{ width:  50%; padding: 2rem; line-height: 2.5;}
.main .listTxt li .img-feature { display: flex; width: 100%; max-width: 1030px;}
.main .listTxt li:nth-child(5) .box-content .text { padding-top: 8rem;}

.feature__flex-r { flex-direction: row; justify-content: right;}
.feature__contents{ position: relative;}
.feature__contents .img-feature{ position: absolute;}
.feature__title{ color: #0d8080; font-size: 2.2rem; line-height: 1.3; text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 5px rgba(255,255,255,1), 0 0 5px rgba(255,255,255,1), 0 0 5px rgba(255,255,255,1), 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 3px 10px rgba(255,255,255,1), 0 3px 10px rgba(255,255,255,1), 0 -3px 10px rgba(255,255,255,1), 0 -3px 10px rgba(255,255,255,1), 3px 0 10px rgba(255,255,255,1), 3px 0 10px rgba(255,255,255,1), -3px 0 10px rgba(255,255,255,1), -3px 0 10px rgba(255,255,255,1);}
.feature__title.mg-l{ margin-left: 1.5rem; padding-top: 2rem;}
.feature__title.mg-r{ margin-right: 1.5rem; padding-top: 2rem;}
.feature__flexBox{ display: flex; justify-content: space-between; align-items: center;}
.feature__flex-reverse{ flex-direction: row-reverse;}
.feature__img{ width: 50%;}
.feature__img.padding-l{padding: 3.5rem 0 0 1.5rem;}
.feature__img.padding-r{padding: 3.5rem 0 0 0;}
.feature__listBtn li{ width: 100%;}
.feature__listBtn li::after { content: ""; position: absolute; width: 40px; height: 40px; transform: rotate(45deg); background-color: #fff; right: -20px; top: -20px; border: 2px solid #0d80807d; z-index: 2;}
.feature__listBtn li a::before { content: ""; position: absolute; right: 15px; top: calc(50% - 8px); padding: 8px 8px 0 0; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg);}
.feature__listBtn li a::after { content: ''; width: 100%; height: 5px; position: absolute; left: 0; bottom: 5px; background: #ffffff;}
.feature__listBtn a { background-color: #0d8080; border: 2px solid #ffffff; position: relative; display: flex; align-items: center; justify-content: center; line-height: 1.5; padding: 0 25px 8px 28px; transition: all 0.2s; text-decoration: none !important; height: 82px;}
.feature__listBtn a span{ color: #ffffff; font-size: 24px;}
.feature__listBtn a:hover { background: #ffffff;}
.feature__listBtn a:hover span{ color: #000000;}
.feature__listBtn li a:hover::before{ border-top: 1px solid #0d8080; border-right: 1px solid #0d8080;}
.feature__listBtn li a:hover::after { background: #0d8080;}


@media only screen and (max-width: 1050px) {
    .feature__contents.even{ margin-right: 20px;}
    .feature__flex-r { padding-right: 20px;}
}

@media only screen and (max-width: 767px) {
        .main .listTxt li .img-feature { text-align: start;}
        .main .listTxt li .box-content .text { width: 100%; margin: 0 0 0 auto; padding: 1rem 0 0 0;}
        .main .listTxt li:nth-child(5) .box-content .text{ padding-top: 1rem;}

        .feature__contents .odd{ margin-right: 20px;}
        .feature__contents.even{ margin-right: 0}
        .feature__flexBox { flex-direction: column;}
        .feature__title.mg-l,
        .feature__title.mg-r { padding-top: 1rem;}
        .feature__title.mg-l { margin-left: .5rem;}
        .feature__title.mg-r { margin-right: .5rem;}
        .feature__flex-r { flex-direction: row-reverse; justify-content: flex-end;}
        .feature__img.padding-l { width: 70%; display: flex; align-self: center;}
        .feature__img.padding-r { width: 70%; display: flex; align-self: center; padding: 3rem 0 0 1.5rem;}
        .feature__title{ font-size: 1.4rem;}
        .feature__listBtn a span{ font-size: 18px;}
}