@charset "UTF-8";

@media screen and (min-width: 640px){
    .c-topKv {
        max-height: none;
    }
}

.c-topKv__logo.u-sp{
    z-index: 1;
}

.c-topKv__ttl{
    font-family: "BIZ UDPGothic",sans-serif;
    line-height:1.8;
    font-size: 2.8rem;
}

.c-topKv__read {
   margin-top: 1.6rem;
   font-weight: 400;
}

@media screen and (min-width: 640px){
    .c-topKv__ttl {
        font-size: 5.2rem;
        line-height:1.5;
    }
}

.top-kv-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.top-kv-img img{
    width: 100vw;
}

@media only screen and (max-width: 639px) {
    .top-kv-img img{
        width: auto;
    }   
}

@media only screen and (max-width: 639px) {
    .top-kv-img img{
        height: 100vh;
        width: 100%;
        object-fit: cover;
    }
}

.slick-list{
    height: auto;
    max-height: 100vh;
    width: 100vw;
    /* height: 53.34vw; */
}

@media screen and (min-width: 640px){
    .slick-list{
        height: 53.34vw;
    }
}

@media screen and (min-width: 640px){
    .slick-slide{
        height: 53.34vw;
    }
}

.slider-text{
    position: absolute;
    top: 40%;
    /* top: max(40%, 300px);  */
    left: 10%;
    margin-right: 4.2%;
}

@media only screen and (max-width: 639px) {
    .slider-text{
        top: 30%;
    }
}

.top-kv-bg-image {
	background-size: cover;
	background-position: center center;
}


@media (max-width: 640px) { 
    .top-kv-bg-image[style*="background-image"] {
      height: 100vh; 
    }
}


.kv-btn{
    margin-top: 2.4rem;
}

a.kv-btn__link {
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 30px;
    text-decoration: none;
    display: table-cell;
    min-width: 24rem;
    height: 4.8rem;
    padding: 0 2.4rem;
    vertical-align: middle;
    text-align: center;
    transition: .2s all ease;
}

@media only screen and (max-width: 639px) {
    a.kv-btn__link {
        min-width: 19.2rem;
        height: 4.16rem;
    }
}

a.kv-btn__link:hover {
    background-color: var(--white);
    color: var(--black);
}

.slick-dots{
    bottom: 40px!important;
    
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
    animation-delay: 4.2s;
}

@media only screen and (max-width: 639px) {
    .slick-dots{
        bottom: 80px!important;
    }    
}

.slick-dots li.slick-active button:before{
    content: '';
    color: var(--white)!important;
    opacity: 1!important;
    border: 1px solid var(--white)!important;
    background-color: var(--white);
    width: 15px;
    height: 15px;
}

.slick-dots li button:before{
    content: '';
    border: 1px solid var(--white)!important;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size:16px!important;
    opacity: 1!important;
    transition: .2s all ease;
    width: 15px;
    height: 15px;
}

/* .slick-dots li button:hover:before{
    content: '';
    opacity: 1!important;
    background-color: var(--white);
} */

.slick-arrow{
    position: absolute;
    top: 50%;
    z-index:2;
    width:4.8rem;
    height:4.8rem;
    opacity: 0;
    cursor: pointer;
}

.fadeIn {
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
    animation-delay: 4.2s;
}

@media only screen and (max-width: 639px) {
    .fadeIn {
        animation-delay: 4.2s;
    }
}

@keyframes fadeInAnime{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
    
.slick-prev-1{
    transform: translateY(-50%) rotate(180deg);
    left: 25px;
    z-index:2;
}

.slick-next-1{
    right: 50px;
    transform: translateY(-50%);
}

.slick-arrow .c-btn_3__circleInner{
    background: none;
    border: 1px solid var(--white);
}

.slick-arrow:hover .c-btn_3__circleInner{
    background-color: var(--white);
    border: 1px solid var(--white);
}

.slick-arrow:hover .c-btn_3__circleInner+.c-btn_3__ico{
    color: var(--black);
}