@charset "utf-8";
/* CSS Document */
header{
background-color: initial;
}
main{
min-height: 700px;
padding-top: 0px;
padding-bottom: 0px;
}
.kvis_slider li{
}

.kvis_slider li .topsl_inner {
display: block;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
position: relative;
min-height: 700px;
min-width: 1200px;
}
.kvis_slider li .topsl_inner.bgpos_tweak01{
background-position: 40% center;
}
.kvis_slider li .topsl_inner.bgpos_tweak02{
background-position: 60% center;
}

.kvis_slider li .topsl_inner:after{
content: "";
width: 100%;
height: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAH0lEQVQYV2NkQABjBgaGsyAuIy5BkAoUgFMlTBXcTADMlQQ59z40nQAAAABJRU5ErkJggg==) repeat;
display: block;
min-height: 700px;
}

.kvis_slider li .topsl_inner .slider_logo{
position: absolute;
bottom: 0px;
margin: auto;
left: 0px;
top: 0px;
right: 0px;
width: 300px;
height: 280px;
display: block;
opacity: 0;
}
.text_on .slider_logo {
animation-duration: 0.8s; /*アニメーション時間*/
animation-timing-function: ease-out; /*アニメーションさせるイージング*/
animation-iteration-count: 1; /*繰り返し回数*/
animation-direction: normal; /*往復処理をするかどうか*/
animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
.text_on .slider_logo{ animation-name: fade-logo_01; animation-delay: 0.4s; /*アニメーション開始させる時間*/}
@keyframes fade-logo_01{
    0% {
      opacity: 0;
      transform: translateX(0px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }


.kvis_slider li .topsl_inner .slider_logo img{
width: 100%;
height: auto;
}

.kvis_slider li .topsl_inner .slider_txt{
position: absolute;
bottom: 200px;
left: 130px;
}
.slider_txt span{
opacity: 0;
color: #FFFFFF;
display: block;
}
.text_on .slider_txt span{
animation-duration: 0.8s; /*アニメーション時間*/
animation-timing-function: ease-out; /*アニメーションさせるイージング*/
animation-iteration-count: 1; /*繰り返し回数*/
animation-direction: normal; /*往復処理をするかどうか*/
animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
text-align: left;
}
.text_on .slider_txt span.art_author{
font-size: 2.4rem;
line-height: 1.4;
padding-bottom:0.25em
}
.text_on .slider_txt span.art_title{
font-size: 4.2rem;
line-height: 1.4;
padding-bottom:0.75em
}
.text_on .slider_txt span.art_btn a{
display: inline-block;
border-radius: 4px;
background-color: rgba(0,0,0,0.30);
border: 1px solid rgba(255,255,255,1.00);
padding-top: 0.2em;
padding-right: 1.5em;
padding-left: 1.5em;
padding-bottom: 0.3em;
font-size: 2rem;
color: #FFFFFF;
}

.text_on .slider_txt span.lead_01{ animation-name: fade-lead_01; animation-delay: 0.2s; /*アニメーション開始させる時間*/}
.text_on .slider_txt span.lead_02{ animation-name: fade-lead_02; animation-delay: 0.5s; /*アニメーション開始させる時間*/}
.text_on .slider_txt span.lead_03{ animation-name: fade-lead_02; animation-delay: 0.8s; /*アニメーション開始させる時間*/}


@keyframes fade-lead_01{
    0% {
      opacity: 0;
      transform: translateX(30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
@keyframes fade-lead_02{
    0% {
      opacity: 0;
      transform: translateX(30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
@keyframes fade-lead_03{
    0% {
      opacity: 0;
      transform: translateX(30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
.slick-dots{
bottom: calc(40px + 86px);
}

.cont_btn{
position: absolute;
bottom: 0px;
overflow: hidden;
background-color: #222222;
width: 100%;
padding-left: 100px;
padding-right: 100px;
min-width: 1200px;
}
.cont_btn li{
float: left;
}
.cont_btn li.member_log,
.cont_btn li.member_reg{
float: right;
}

.cont_btn li a{
font-size: 1.8rem;
padding: 1.5em;
display: block;
white-space: nowrap;
color: #FFFFFF;
}
.cont_btn li a img{
height: 1.2em;
display: inline-block;
vertical-align: text-top;
margin-right: 0.5em;
margin-top: 0.15em;
}




@media only screen and (max-width: 760px) 
{
html,body{
display: flex;
flex-direction: column;
/*overflow: hidden;*/

}
main{
min-height: initial;
height: 100%;
}
.kvis_slider li{ height: 100%;
}

.kvis_slider li .topsl_inner {
min-height: initial;
min-width: initial;
height: 100vh;
overflow-y: hidden;
}

.kvis_slider li .topsl_inner:after{
min-height: initial;
height: 100%;
}

.kvis_slider li .topsl_inner .slider_logo{
width: 70vw;
height: 60vw;
}

.kvis_slider li .topsl_inner .slider_txt {
position: absolute;
bottom: 100px;
left: 0px;
width: 100%;
padding-left: 5%;
padding-right: 5%;
}
.slider_txt span{

}
.text_on .slider_txt span{
}
.text_on .slider_txt span.art_author{
font-size: 1.6rem;
padding-bottom: 1em;
}
.text_on .slider_txt span.art_title{
font-size: 2.6rem;
padding-bottom: 1em;
}
.text_on .slider_txt span.art_btn{
text-align: center;
}
.text_on .slider_txt span.art_btn a{

}

  
.slick-dots{
bottom: 40px;
}

.cont_btn{
display: none;
}



}