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

/*----------------------------------------------------------
 MainVisual
----------------------------------------------------------*/
.mainVisual{
width: 100%;
background: url("/wp-content/themes/sauna/assets/images/top/mv_img_01.webp") no-repeat;
background-size: cover;
background-position: top center;
padding: 200px 0;
position: relative;
overflow: hidden;
}
.mainVisual::before{
content: "";
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
@media (max-width: 768px){
.mainVisual{
padding: 8.0rem 0;
}
}

/*----------------------------------------------------------
 Slider
----------------------------------------------------------*/
.topSlider{
max-width: 100%;
background: #2c2c2c;
padding: 20px 0 40px;
overflow: hidden;
}
.topSlider .slider .slick-list{
overflow: visible;
}
.topSlider .slider{
max-width: 600px;
margin: 0 auto;
}
.topSlider .slider .slick-slide{
margin: 0 20px;
}
.topSlider .slider .slide a{
height: 240px;
background: rgba(0,0,0,0.6);
border-radius: 10px;
overflow: hidden;
display: block;
position: relative;
}
@media (min-width: 769px){
.topSlider .slider .slide a{
position: relative;
transition: 0.3s;
}
.topSlider .slider .slide a:hover::after{
content: "";
width: 100%;
height: 100%;
background: linear-gradient(to right, #a87ec2, #4ea6d8);
border-radius: 10px;
opacity: 0.3;
position: absolute;
left: 0;
top: 0;
}
}
.topSlider .slider .slide a img{
width: 100%;
height: auto;
}
.topSlider .slider .slick-slide a::before{
content: "";
width: 100%;
height: 100%;
background: rgba(255,255,255,0.4);
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 2;
transition: 0.3s;
}
.topSlider .slider .slick-slide.slick-current a::before{
opacity: 0;
}
.topSlider .slider .slide a .title{
width: 100%;
background: linear-gradient(to right, #a87ec2, #4ea6d8);
color: #fff;
font-size: 1.2rem;
font-weight: bold;
margin: 0;
padding: 10px 15px;
position: absolute;
right: 0;
bottom: 0;
}
@media (max-width: 768px){
.topSlider{
max-width: 100%;
padding: 2.0rem 0 3.0rem;
}
.topSlider .title{
margin: 0 0 1.0rem;
}
.topSlider .title span{
font-size: 1.8rem;
padding: 0.3rem 2.0rem;
position: relative;
}
.topSlider .slider{
max-width: 400px;
}
.topSlider .slider .slick-slide{
margin: 0 5px;
}
.topSlider .slider .slide a{
height: 20.0rem;
}
.topSlider .slider .slide a .ttl{
font-size: 1.2rem;
padding: 0.5rem 1.5rem;
}
}