@charset "utf-8";
/*modal*/
#cboxOverlay{ background: #000; opacity: 1.0 !important;}
#colorbox{ width: 100% !important; left: 50% !important; transform: translateX(-50%) !important;}
#cboxWrapper{ width: 100% !important;}
#cboxContent{ width: 100% !important;}
#cboxLoadedContent{ width: 100% !important;}
#modal_wrap{ opacity: 0; height: 0; pointer-events: none;}
.modal_wrap{ display: none; /*display: block;*/ width: 100vw; height: 100vh; overflow: auto; z-index: 999; background: rgba(0,0,0,1.0); position: fixed; left: 0; top: 0;}
.modal_box_wrap{ display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; overflow: hidden !important; position: relative; z-index: 1;}
.modal_box_wrap .modal_box_bg{ width: 100%; height: 100%; min-height: 100%; background: rgba(0,0,0,0); position: absolute; left: 0; top: 0; cursor: pointer; z-index: -1;}

.modal_box{ padding: 0; width: 1000px; margin: 0 auto; position: relative;}
.modal_box .slider_wrap{ width: 1000px; position: relative;}
.modal_box .slider_wrap ul{ width: calc(1000px * 3); margin-left: calc(1000px * -1); position: static;}
/*
.modal_box .slider_wrap ul{ width: 1000px; position: static;}
*/
.modal_box .slider_wrap ul li{ width: 900px; margin: 0 50px;}
.modal_box .slider_wrap ul li img{ width: 100%;}
@media screen and (max-width:768px){
.modal_box{ width: 90vw;}
.modal_box .slider_wrap{ width: 100%; position: relative;}
.modal_box .slider_wrap ul{ width: calc(100% + 150vw); margin-left: -75vw; position: static;}
.modal_box .slider_wrap ul{ padding: 0; margin-bottom: 7.5%;}
.modal_box .slider_wrap ul li{ width: calc(100% - 7.5vw); margin: 0 3.75vw;}
/*
.modal_box .slider_wrap ul{ width: 100%; position: static;}
.modal_box .slider_wrap ul{ padding: 0; margin-bottom: 7.5%;}
.modal_box .slider_wrap ul li{ width: 100%; margin: 0;}
*/
}

.modal_box .modal_close{ width: 40px; position: absolute; right: 50px; top: -60px;}
/*
.modal_box .modal_close{ width: 40px; position: absolute; right: -10px; top: 10px;}
*/
.modal_box .modal_close span{ cursor: pointer; transition: 0.3s;}
.modal_box .modal_close span:hover{ opacity: 0.7;}
@media screen and (max-width:768px){
.modal_box .modal_close{ width: 5vw; right: 8.75vw; top: -7.5vw;}
/*
.modal_box .modal_close{ width: 5vw; right: 0; top: -7.5vw;}
*/
}

/*slick調整*/
.modal_box .slider_wrap .slick-prev,
.modal_box .slider_wrap .slick-next{ display: flex; width: 30px; height: 60px; position: absolute; right: 0; bottom: 0; transition: 0.3s;}
.modal_box .slider_wrap .slick-prev{ left: -20px; top: 50%; transform: translateY(-50%); z-index: 99;}
.modal_box .slider_wrap .slick-next{ right: -20px; top: 50%; transform: translateY(-50%); z-index: 99;}
.modal_box .slider_wrap .slick-prev:before{ content: ""; width: 30px; height: 60px; background: url("../images/service02_02/slide/prev.png") center center no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); opacity: 1.0; transition: 0.3s;}
.modal_box .slider_wrap .slick-next:before{ content: ""; width: 30px; height: 60px; background: url("../images/service02_02/slide/next.png") center center no-repeat; background-size: 100% 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); opacity: 1.0; transition: 0.3s;}
.modal_box .slider_wrap .slick-prev:hover:before,
.modal_box .slider_wrap .slick-next:hover:before{ opacity: 0.7;}
@media screen and (max-width:768px){
.modal_box .slider_wrap .slick-prev,
.modal_box .slider_wrap .slick-next{ width: 3vw; height: 6vw;}
.modal_box .slider_wrap .slick-prev{ left: 3.75vw;}
.modal_box .slider_wrap .slick-next{ right: 3.75vw;}
.modal_box .slider_wrap .slick-prev:before{ width: 3vw; height: 6vw;}
.modal_box .slider_wrap .slick-next:before{ width: 3vw; height: 6vw;}
}