@charset "UTF-8";

/*-------------------------
main_slider03
-------------------------*/

#psp_top_slider .slick-initialized .psp_top_slider01{ overflow: hidden; position: relative;}

#psp_top_slider .slick-initialized .psp_top_slider01 .slick-list{ z-index: 0;}
#psp_top_slider .slick-initialized .slick-slide.psp_slider_item img{ height: 660px; width: auto;}


@media screen and (min-width:768px) and ( max-width:1280px){
#psp_top_slider .slick-initialized .slick-slide.psp_slider_item img{ height: 420px;}
}

#psp_top_slider .psp_top_slider01 .slick-arrow.prev,
#psp_top_slider .psp_top_slider01 .slick-arrow.next{ z-index:100; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 60px; height: 100px;}
#psp_top_slider .psp_top_slider01 .slick-arrow.prev{ left: 150px;}
#psp_top_slider .psp_top_slider01 .slick-arrow.next{ right: 150px;}
#psp_top_slider .psp_top_slider01 .slick-arrow.prev:hover,
#psp_top_slider .psp_top_slider01 .slick-arrow.next:hover{ cursor: pointer;}
#psp_top_slider .psp_top_slider01 .slick-arrow span{ display: block;}
#psp_top_slider .psp_top_slider01 .slick-arrow.prev span::before,
#psp_top_slider .psp_top_slider01 .slick-arrow.next span::before{ position: absolute; top: 0px; bottom: 0px; content: ""; vertical-align: middle; width: 35px; height: 35px; margin: auto; border-top: 5px solid rgb(255, 255, 255); border-right: 5px solid rgb(255, 255, 255);}
#psp_top_slider .psp_top_slider01 .slick-arrow.prev span::before{ right: 0px; transform: rotate(-135deg);}
#psp_top_slider .psp_top_slider01 .slick-arrow.next span::before{ left: 0px; transform: rotate(45deg);}
#psp_top_slider .psp_top_thumbnail{ overflow: hidden;} 
#psp_top_slider .psp_top_thumbnail{ display: flex; justify-content: center; margin-top: 30px;}
#psp_top_slider .psp_top_thumbnail .psp_top_thumbnail_img{ width: 100px!important; height: 75px; display: block!important; overflow: hidden; margin: 0 5px; transition: opacity .3s linear; border: 3px solid #fff; box-sizing: border-box;}
#psp_top_slider .psp_top_thumbnail .psp_top_thumbnail_img:hover{ cursor: pointer;}
#psp_top_slider .psp_top_thumbnail .psp_top_thumbnail_img img{ width: 100px; height: 75px; object-fit: cover;}
#psp_top_slider .psp_top_thumbnail .slick-current.psp_top_thumbnail_img{ border:3px solid var(--maincolor)/*------------ color01 ------------*/;}
#psp_top_slider .psp_top_thumbnail .slick-list,
#psp_top_slider .psp_top_thumbnail .slick-track{ transform: unset!important;}
    
@media screen and (max-width:767px){
#psp_top_slider .slick-initialized .slick-slide.psp_slider_item img{ height: 190px;}
#psp_top_slider .psp_top_slider01 .slick-arrow.prev,
#psp_top_slider .psp_top_slider01 .slick-arrow.next{ width: 40px;}
#psp_top_slider .psp_top_slider01 .slick-arrow.prev{ left: 0;}
#psp_top_slider .psp_top_slider01 .slick-arrow.next{ right: 0;}
#psp_top_slider .psp_top_slider01 .slick-arrow.prev span::before,
#psp_top_slider .psp_top_slider01 .slick-arrow.next span::before{position: absolute; top: 0px; bottom: 0px; content: ""; vertical-align: middle; width: 20px; height: 20px; margin: auto; border-top: 5px solid rgb(255, 255, 255); border-right: 5px solid rgb(255, 255, 255);}
#psp_top_slider .psp_top_thumbnail{ margin-top: 20px;}
#psp_top_slider .psp_top_thumbnail .slick-slide{ width: 50px; height: 50px; margin: 0 5px;}
#psp_top_slider .psp_top_thumbnail .psp_top_thumbnail_img{ width: 50px!important; height: 46px; display: inline-block!important; margin: 0; border: 2px solid #fff;}
#psp_top_slider .psp_top_thumbnail .psp_top_thumbnail_img img{ width: 50px; height: 46px;}
#psp_top_slider .psp_top_thumbnail .slick-current.psp_top_thumbnail_img{ border:3px solid var(--maincolor)/*------------ color01 ------------*/;}
}