@charset "UTF-8";
/* ---------------------------
gallery
--------------------------- */

main{
    background: url(../img/top/bg.png);
}

.visual{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 0;
}

.visual h1 img{
    width: 352px;
    margin: 0 auto 50px;
}

.visual p{
    font-size: 30px;
    font-weight: 500;
    line-height: 1.633;
    text-align: center;
}

.gallery{
    width: 100%;
    margin: 0 auto;
    padding-bottom: 40px;
}

.gallery .slideArea{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 80px;
}

.gallery .slideArea h2 img{
    margin: 0 auto 30px;
}

.gallery .slideArea01 h2 img{
    width: 382px;
}

.gallery .slideArea02 h2 img{
    width: 181px;
}

.gallery .slideArea03 h2 img{
    width: 195px;
}

.gallery .slideArea04 h2 img{
    width: 233px;
}

.gallery .slideArea05 h2 img{
    width: 155px;
}

.gallery .slideArea > ul{
    width: 886px;
    margin: 0 auto;
}

.gallery .slideArea > ul.slick-dotted{
    padding-bottom: 40px;
}

.gallery .slick-slide img{
    width: 413px;
    margin: 0 15px;
}

.slick-dots{
    bottom: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.slick-dots li{
    width: 13px;
    height: 13px;
    margin: 0 7px;
}

.slick-dots li button{
    width: 13px;
    height: 13px;
}

.slick-dots li button::before{
    width: 13px;
    height: 13px;
    border-radius: 13px;
    background: #cecece;
}

.slick-dots li.slick-active button::before{
    background: #559ae1;
    border: none;
    margin-top: 0;
}

.slick-prev, .slick-next{
    top: calc((100% - 40px) / 2);
    width: 21px;
    height: 38px;
}

.slick-next{
    right: -37px;
    background: url("../img/gallery/next01.png");
    background-size: contain;
}

.slick-prev{
    left: -37px;
    background: url("../img/gallery/prev01.png");
    background-size: contain;
}

.movie{
    width: 100%;
    padding-bottom: 160px;
}

.movie h2{
    width: 100%;
    height: 142px;
    background: #1a79da;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
}

.movie h2 img{
    width: 179px;
}

.movie h3 img{
    width: 402px;
    margin: 0 auto 30px;
}

.movie a{
    display: table;
    margin: 0 auto;
}

.youtube{
    width: 100%;
    max-width: 590px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}
.youtube iframe{
    width: 100%;
    height: 100%;
}


@media screen and (max-width: 768px) {

.visual{
    padding: 10.67vw 0 12vw;
}

.visual h1 img{
    width: 60.933vw;
    margin: 0 auto 6.67vw;
}

.visual p{
    font-size: 4.32vw;
}

.gallery{
    padding-bottom: 5.33vw;
}

.gallery .slideArea{
    margin: 0 auto 16vw;
}

.gallery .slideArea h2 img{
    margin: 0 auto 4vw;
}

.gallery .slideArea01 h2 img{
    width: 66.133vw;
}

.gallery .slideArea02 h2 img{
    width: 31.2vw;
}

.gallery .slideArea03 h2 img{
    width: 33.867vw;
}

.gallery .slideArea04 h2 img{
    width: 40.267vw;
}

.gallery .slideArea05 h2 img{
    width: 26.8vw;
}

.gallery .slideArea > ul{
    width: 86.67vw;
}

.gallery .slideArea > ul.slick-dotted{
    padding-bottom: 0;
}

.gallery .slick-slide img{
    width: 78.67vw;
    margin: 0 4vw;
}

.slick-dots {
    bottom: -5.33vw;
    width: 100%;
}

.slick-dots li{
    width: 2.8vw;
    height: 2.8vw;
    margin: 0 1.467vw;
}

.slick-dots li button{
    width: 2.8vw;
    height: 2.8vw;
}

.slick-dots li button::before{
    width: 2.8vw;
    height: 2.8vw;
    border-radius: 2.8vw;
}

.slick-prev, .slick-next{
    top: 50%;
    width: 3.733vw;
    height: 6.67vw;
}

.slick-next{
    right: -3.2vw;
}

.slick-prev{
    left: -3.2vw;
}

.movie{
    padding-bottom: 21.33vw;
}

.movie h2{
    height: 24.533vw;
    margin-bottom: 8vw;
}

.movie h2 img{
    width: 30.933vw;
}

.movie h3 img{
    width: 69.6vw;
    margin: 0 auto 4vw;
}

.movie a img{
    width: 78.8vw;
}

.youtube{
    max-width: 78.8vw;
}


}