@charset "utf-8";

#content_h.products_h::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/products_h_bit.png) no-repeat center / contain;
    left: 0;
    top: 0;
}

/*------------ 共通 ------------*/
/*------------ catch ------------*/
/* .products_catch_img {
    margin: 0 -8% 70px;
}

.products_catch_img img {
    margin: auto;
} */
/*  */
/* loop img */
.products_img_box {
    display: flex;
    width: calc(2198px * 3);
    min-width: 1024px;
    height: auto;
    overflow: hidden;
    margin-bottom: 60px;
    position: relative;
}

.products_img {
    display: flex;
    margin-bottom: 0;
}

.products_img img {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
}

@keyframes loop {
    0% {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(-200%);
    }

    to {
        transform: translateX(0%);
    }
}

.products_img:first-child {
    animation: loop 1000s -500s linear infinite;
}

.products_img:last-child {
    animation: loop2 1000s linear infinite;
}

_:-ms-lang(x)::-ms-backdrop,
.products_img_box {
    display: -ms-grid;
    overflow: hidden;
}


/*------------ bg_dark_wrap ------------*/
.bg_dark_wrap {
    padding: 60px 0 112px;
    margin: 70px 0 0;
    position: relative;
}

.bg_dark_wrap::before {
    position: absolute;
    content: "";
    width: 100vw;
    min-width: 1920px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #3A3F53;
    transform: translateX(-50%);
    z-index: -10;
}

.bg_dark_wrap * {
    color: #FFF;
}

.bg_dark_img {
    padding: 0 20px;
    margin-bottom: 80px;
}

.bg_dark_img img {
    margin: auto;
}

.bg_dark_wrap table {
    background: #FFF;
}

.bg_dark_wrap table * {
    color: #222;
}

.bg_dark_wrap table th,
.bg_dark_wrap table td {
    letter-spacing: 0;
    line-height: 1.066;
    text-align: center;
    padding: 11px 20px 12px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    max-height: 100%;
}

.bg_dark_wrap table th {
    width: auto;
    vertical-align: middle;
}

.bg_dark_wrap table tr:nth-child(n+2) th {
    height: 82px;
}

/*------------ bg_grey_wrap ------------*/
.bg_grey_wrap {
    padding-top: 92px;
    position: relative;
}

.bg_grey_wrap::before {
    position: absolute;
    content: "";
    width: 100vw;
    min-width: 1920px;
    height: calc(100% + 120px);
    background: #F5F5F8;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -10;
}

.bg_grey_wrap .inner>*:last-child {
    margin-bottom: 0;
}

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

    /*------------ 共通 ------------*/
    /*------------ catch ------------*/
    /* .products_catch_img {
        margin: 0 -5% 35px;
    } */

    .products_img_box {
        min-width: auto;
        margin-bottom: 40px;
        height: auto;
        width: calc(1370px * 3);
    }

    .products_img {
        width: calc(1370px * 3);
    }

    .products_img li {
        width: 1370px;
    }

     .products_img img{
        max-width: 100%;
     }

    /*------------ bg_dark_wrap ------------*/
    .bg_dark_wrap {
        padding: 35px 0 40px;
        margin: 35px 0 0;
    }

    .bg_dark_img {
        margin-bottom: 35px;
    }

    .bg_dark_wrap table th,
    .bg_dark_wrap table td {
        padding: 6px 13px;
    }

    .bg_dark_wrap table tr:nth-child(n+2) th {
        height: 54px;
    }

    /*------------ bg_grey_wrap ------------*/
    .bg_grey_wrap {
        padding-top: 35px;
    }

    .bg_grey_wrap::before {
        height: calc(100% + 55px);
    }
}