@charset "utf-8";
.nav_list li.nav-concept{
    background: #23a387;
    color: #fff;
}
.foot_nav_list li.nav-concept{
    background: rgba(255, 255, 255, 0.85);
}

.foot_nav_list li.nav-concept a{
    color: #000;
}



/* .cont_pd {
    padding: 80px 0 0;
} */
/* .sec_ttl {
    font-size: 26px;
    text-align: center;
    letter-spacing: 0.2em;
    line-height: 1.8;
} */
.txt_green {
    color: #23a387;
}
.con_imgbox {
    margin: 60px 0 60px;
}
.con_imgbox_01 {
    margin-bottom: 40px;
}
.txt_tate {
    writing-mode: vertical-rl;
    text-align: left;
}

.wd300 {
    max-width: 300px;
    margin: 0 auto;
}
.wd550 {
    max-width: 550px;
    margin: 0 auto;
}
.mb40 {
    margin: 0 auto 40px;
}
.mt40 {
    margin-top: 40px;
}
.inner850 {
    max-width: 850px;
    margin: 0 auto;
}

.wideview {
    margin-top: 80px;
}
.scroll_flex {
    display: none;
}






.flex_box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.flex_item01 {
    width: 25%;
    max-width: 260px;
}
.flex_item02 {
    width: 48%;
}



@media screen and (max-width: 1000px) {
    .wd300 {
        max-width: 250px;
    }
}

@media screen and (max-width: 750px) {
    .cont_pd {
        padding: 40px 0 0;
    }
    .con_imgbox {
        margin-top: 40px;
    }
    .wd300 {
        max-width: 200px;
    }
    .flex_item01 {
        max-width: 215px;
        width: 50%;
    }
    .flex_item02 {
        width: 100%;
        max-width: 500px;
    }
    .wideview {
        margin-top: 60px;
    }

}

@media screen and (max-width: 650px) {
}

@media screen and (max-width: 500px) {
    .wideview_img{
        overflow-x: scroll;
        width: 100%;
    }
    .wideview_img img{
        padding-bottom: 10px;
        width: 650px;
        min-width: 650px;
    }

    .scroll_flex {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0px auto 0;
        flex-wrap: wrap;
        max-width: 250px;
    }
    .scroll_flex_p {
        padding: 10px 0;
        text-decoration: none;
        outline: none;
        font-size: 12px;
        width: 100%;
        text-align: center;
    }
    .scroll_l {
        position: relative;
        color: #000;
        padding: 0;
        display: inline-block;
        text-decoration: none;
        outline: none;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        /* margin-bottom: 40px; */
    }
    .scroll_flex .scroll_l, .scroll_flex .scroll {
        width: 48%;
        left: unset;
        right: unset;
        transform: unset;
    }
    .scroll {
        position: relative;
        color: #000;
        padding: 0;
        display: inline-block;
        text-decoration: none;
        outline: none;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
    }
    .scroll::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #000;
    }
    .scroll::after {
        content: "";
        position: absolute;
        bottom: -4px;
        width: 8px;
        height: 8px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(45deg);
    }
    .scroll::before {
        animation: arrowlong01 2s ease infinite;
    }
    .scroll::after {
        animation: arrowlong02 2s ease infinite;
    }
    @keyframes arrowlong01 {
        0% {
            width: 0;
            opacity: 0
        }
        20% {
            width: 0;
            opacity: 1
        }
        80% {
            width: 105%;
            opacity: 1
        }
        100% {
            width: 105%;
            opacity: 0
        }
    }
    @keyframes arrowlong02 {
        0% {
            left: 0;
            opacity: 0
        }
        20% {
            left: 0;
            opacity: 1
        }
        80% {
            left: 103%;
            opacity: 1
        }
        100% {
            left: 103%;
            opacity: 0
        }
    }

    /* scroll_l */
    .scroll_b{
        padding: 10px 0;
        margin: 10px auto 0;
    }
    .scroll_l {
        position: relative;
        color: #000;
        padding: 0;
        display: inline-block;
        text-decoration: none;
        outline: none;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        /* margin-bottom: 40px; */
    }
    .scroll_l::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #000;
    }
    .scroll_l::after {
        content: "";
        position: absolute;
        bottom: -4px;
        width: 8px;
        height: 8px;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        transform: rotate(-135deg);
    }
    .scroll_l::before {
        animation: arrowlong03 2s ease infinite;
    }
    .scroll_l::after {
        animation: arrowlong04 2s ease infinite;
    }
    @keyframes arrowlong03 {
        0% {
            right: 0;
            width: 0;
            opacity: 0
        }
        20% {
            right: 0;
            width: 0;
            opacity: 1
        }
        80% {
            right: 0;
            width: 105%;
            opacity: 1
        }
        100% {
            right: 0;
            width: 105%;
            opacity: 0
        }
    }
    @keyframes arrowlong04 {
        0% {
            right: 0;
            opacity: 0
        }
        20% {
            right: 0;
            opacity: 1
        }
        80% {
            right: 103%;
            opacity: 1
        }
        100% {
            right: 103%;
            opacity: 0
        }
    }
}