@charset "utf-8";
/* CSS Document */

.mainVisual{
background: #17b3ff;
padding: 40px 0 20px;
position: relative;
z-index: 1;
}
.mainVisual canvas{
width: 100%;
height: 400px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
.mainVisual .title{
width: 520px;
margin: 0 auto 40px;
}
@media (max-width: 768px){
.mainVisual{
padding: 3.0rem 0 1.5rem;
}
.mainVisual canvas{
height: 28.0rem;
}
.mainVisual .title{
width: 100%;
text-align: right;
margin: 0 auto 2.0rem;
padding: 0 0 0 2.0rem;
}
}

/* ==========================================
 slider
========================================== */
.sliderBlock{
max-width: 100%;
padding: 0 0 28px;
overflow: hidden;
}
.sliderBlock .slider{
display: none;
}
.sliderBlock .slider.slick-initialized{
display: block;
}
.sliderBlock .slider .slick-list{
overflow: visible;
}
.sliderBlock .slider{
max-width: 600px;
margin: 0 auto;
}
.sliderBlock .slider .slick-slide{
margin: 0 20px;
}
.sliderBlock .slider .slick-prev,.sliderBlock .slider .slick-next{
width: 30px;
height: 30px;
z-index: 2;
}
.sliderBlock .slider .slick-prev{
left: 45px;
}
.sliderBlock .slider .slick-next{
right: 45px;
}
.sliderBlock .slider .slick-prev:before,.sliderBlock .slider .slick-next:before{
font-size: 30px;
}
.sliderBlock .slider .slick-dots{
bottom: -28px;
}
.sliderBlock .slider .slick-dots li{
width: 40px;
height: 8px;
}
.sliderBlock .slider .slick-dots li button{
width: 40px;
height: 8px;
padding: 0;
}
.sliderBlock .slider .slick-dots li button:before{
width: 40px;
height: 8px;
background: #fff;
border-radius: 100px;
font-size: 0;
line-height: 1;
opacity: 1;
}
.sliderBlock .slider .slick-dots li.slick-active button:before{
background: #00abff;
}
.sliderBlock .slider .slide a{
background: #fff;
border-radius: 10px;
overflow: hidden;
display: block;
position: relative;
}
.sliderBlock .slider .slide a .image{
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-content: center;
overflow: hidden;
}
.sliderBlock .slider .slide a .image img{
width: auto;
height: 100%;
}
.sliderBlock .slider .slide a .ttl{
width: 100%;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 1.4rem;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
bottom: 0;
}
.sliderBlock .slider .slide a .ranking{
background: #ffba00;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
border-radius: 0 0 10px 0;
padding: 5px 10px;
position: absolute;
left: 0;
top: 0;
}
.sliderBlock .slider .slide a .ranking span{
margin: 0 3px 0 0;
vertical-align: -1px;
display: inline-block;
}
.sliderBlock .slider .slide a .ranking b{
margin: 0 0 0 10px;
display: inline-block;
}
@media (max-width: 768px){
.sliderBlock{
padding: 0 0 2.8rem;
}
.sliderBlock .slider{
max-width: 40.0rem;
}
.sliderBlock .slider .slick-slide{
margin: 0 0.75rem;
}
.sliderBlock .slider .slick-dots{
bottom: -2.8rem;
}
.sliderBlock .slider .slick-dots li{
width: 4.0rem;
height: 0.6rem;
}
.sliderBlock .slider .slick-dots li button{
width: 4.0rem;
height: 0.6rem;
}
.sliderBlock .slider .slick-dots li button:before{
width: 4.0rem;
height: 0.6rem;
}
.sliderBlock .slider .slick-dots li.slick-active button:before{
background: #00abff;
}
.sliderBlock .slider .slide a{
border-radius: 1.0rem;
}
.sliderBlock .slider .slide a .image{
height: 25.0rem;
}
.sliderBlock .slider .slide a .ttl{
padding: 1.0rem 1.5rem;
}
.sliderBlock .slider .slide a .ranking{
border-radius: 0 0 1.0rem 0;
padding: 0.3rem 1.0rem;
}
.sliderBlock .slider .slide a .ranking span{
margin: 0 0.3rem 0 0;
vertical-align: -0.1rem;
}
.sliderBlock .slider .slide a .ranking b{
margin: 0 0 0 1.0rem;
}
}