@import url("../slick/slick.css");
@import url("../slick/slick-theme.css");

/*PC用レビューCSS*/
@media screen and (min-width: 768px) {
    #section-review {
        padding: 90px 0;
    }
    #section-review .container-fluid {
        padding: 0;
    }
    #section-review .title {
        max-width: 458px;
        margin-top: 0;
        margin-bottom: 55px;
    }
    #section-review .reviewlist__pc {
        display: flex;
        padding: 0;
    }
    #section-review .reviewlist__pc li {
        width: 600px;
        height: auto !important;
        margin: 0 40px;
        padding: 30px 30px 15px;
        position: relative;
        overflow: hidden;
        background: #FFF;
        border: 5px solid #1B2378;
        border-radius: 20px;
    }
    #section-review .reviewlist__pc li .profile {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
    }
    #section-review .reviewlist__pc li .profile::before {
        display: block;
        content: "";
        width: 60px;
        height: 60px;
        margin-right: 20px;
        background: url("../review/icon_re.png") center center no-repeat;
        background-size: 42.2px 50px;
        background-color: #7EB3FF;
        border-radius: 50%;
    }
    #section-review .reviewlist__pc li:nth-child(2n) .profile::before {
        background-color: #EB5B5E;
    }
    #section-review .reviewlist__pc li:nth-child(3n) .profile::before {
        background-color: #8DC553;
    }
    #section-review .reviewlist__pc li:nth-child(4n) .profile::before {
        background-color: #EDAA2A;
    }
    #section-review .reviewlist__pc li:nth-child(5n) .profile::before {
        background-color: #9E55DC;
    }
    #section-review .reviewlist__pc li .profile .text p {
        margin-bottom: 0;
    }
    #section-review .reviewlist__pc li .profile .text p.age {
        font-size: 16px;
        font-weight: bold;
    }
    #section-review .reviewlist__pc li .profile .text p.date {
        font-size: 14px;
        color: #666;
    }
    #section-review .reviewlist__pc li .star {
        margin-bottom: 20px;
        position: relative;
        font-size: 16px;
        color: #E4E4E4;
    }
    #section-review .reviewlist__pc li .star::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        color: #FFBE00;
    }
    #section-review .reviewlist__pc li .star_1::before {
        content: "★";    
    }
    #section-review .reviewlist__pc li .star_2::before {
        content: "★★";    
    }
    #section-review .reviewlist__pc li .star_3::before {
        content: "★★★";    
    }
    #section-review .reviewlist__pc li .star_4::before {
        content: "★★★★";    
    }
    #section-review .reviewlist__pc li .star_5::before {
        content: "★★★★★";    
    }
    #section-review .reviewlist__pc li .review_title {
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: bold;
    }
    #section-review .reviewlist__pc li .review_text {
        font-size: 16px;
        line-height: 1.6;
    }
    #section-review .reviewlist__wrap {
        display: flex;
        overflow: hidden;
    }
    #section-review .reviewlist__pc {
        display: flex;
        list-style: none;
        animation: infinity-scroll-left 700s infinite linear 0.5s both;
    }
    #section-review .reviewlist__wrap:hover .reviewlist__pc {
        animation-play-state: paused;
    }
    #section-review .reviewlist__dots {
        display: none;
    }
    
}

/*PC用スライダーアニメーション*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*SP用レビューCSS*/
@media screen and (max-width: 767px) {
    #section-review .reviewlist__pc:not(.reviewlist)  {
        display: none;
    }
    #section-review {
        padding: 8vw 0;
    }
    #section-review .container-fluid {
        padding: 0;
    }
    #section-review .title {
        max-width: 80vw;
        margin-top: 0;
        margin-bottom: 6vw;
    }
    #section-review .slick-track {
        display: flex;
    }
    #section-review .slick-slide {
        height: auto !important;
    }
    #section-review .reviewlist {
        padding: 0;
    }
    #section-review .reviewlist li {
        width: 75vw;
        margin: 0 3vw;
        padding: 4vw 4vw 2vw;
        position: relative;
        overflow: hidden;
        background: #FFF;
        border: 3px solid #1B2378;
        border-radius: 10px;
    }
    #section-review .reviewlist li .profile {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 4vw;
    }
    #section-review .reviewlist li .profile::before {
        display: block;
        content: "";
        width: 16vw;
        height: 16vw;
        margin-right: 4vw;
        background: url("../review/icon_re.png") center center no-repeat;
        background-size: 9.72288vw 11.52vw;
        background-color: #7EB3FF;
        border-radius: 50%;
    }
    #section-review .reviewlist li:nth-child(2n) .profile::before {
        background-color: #EB5B5E;
    }
    #section-review .reviewlist li:nth-child(3n) .profile::before {
        background-color: #8DC553;
    }
    #section-review .reviewlist li:nth-child(4n) .profile::before {
        background-color: #EDAA2A;
    }
    #section-review .reviewlist li:nth-child(5n) .profile::before {
        background-color: #9E55DC;
    }
    #section-review .reviewlist li .profile .text p {
        margin-bottom: 0;
    }
    #section-review .reviewlist li .profile .text p.age {
        font-size: 4vw;
        font-weight: bold;
    }
    #section-review .reviewlist li .profile .text p.date {
        font-size: 3vw;
        color: #666;
    }
    #section-review .reviewlist li .star {
        margin-bottom: 4vw;
        position: relative;
        font-size: 4vw;
        color: #E4E4E4;
    }
    #section-review .reviewlist li .star::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        color: #FFBE00;
    }
    #section-review .reviewlist li .star_1::before {
        content: "★";    
    }
    #section-review .reviewlist li .star_2::before {
        content: "★★";    
    }
    #section-review .reviewlist li .star_3::before {
        content: "★★★";    
    }
    #section-review .reviewlist li .star_4::before {
        content: "★★★★";    
    }
    #section-review .reviewlist li .star_5::before {
        content: "★★★★★";    
    }
    #section-review .reviewlist li .review_title {
        margin-bottom: 4vw;
        font-size: 4vw;
        font-weight: bold;
    }
    #section-review .reviewlist li .review_text {
        font-size: 3.8vw;
        line-height: 1.6;
    }
    #section-review .slick-dots {
        position: static;
        display: flex;
        justify-content: space-between;
        padding: 0 4vw;
        height: 10px;
    }
    #section-review .slick-dots li,
    #section-review .slick-dots li button {
        width: 8px;
        height: 10px;
        padding: 0;
    }
    #section-review .slick-dots li button:before {
        width: 8px;
        height: 8px;
        padding: 0;
        content: "";
        color: none;
        border: 1px solid #000;
        opacity: 1;
        border-radius: 50%;
    }
    #section-review .slick-dots li:not(.slick-active) button:before {
        margin-top: 1px;
    }
    #section-review .slick-dots li.slick-active button:before {
        width: 10px;
        height: 10px;
        padding: 0;
        content: "";
        color: none;
        opacity: 1;
        background: #0080ff;
        border: 1px solid #0080ff;
        border-radius: 50%;
    }
}