*,html,body{
	margin: 0;
	padding: 0;
	text-decoration: none;
    font-family: "EB Garamond", serif;
}

html{
	overflow-x: hidden;
}

.header img{
    display: block;
}
.top img{
    display: block;
    margin: 0;
    padding: 0;    
    min-width: 100%;
}

body {
    transition: opacity 1s ease;
}

body.fadeout {
    opacity: 0;
}

.slider ul li img{
	width: 100%;
}

.slider{
    position:relative;
    background: #fff;
}

.year{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    font-size:160px;
    color:#fff;
    opacity: 0;
    transition: opacity .5s ease;    
}

.year.show{
    opacity: 1;
}
.black.show{
    opacity:1;
}

.black{
    position:absolute;
    inset:0;
    background:#000;
    opacity:0;
    pointer-events:none;
    z-index:9999;
    transition:opacity .8s;
}

.black.show{
    opacity:1;
}

.white{
    position: absolute; 
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: opacity .8s;
}

.white.show{
    opacity: 1;
}

.slider img{
    filter: grayscale(100%);
    transition: filter 1s;
    width: 100%;
}

.slider li.color.slick-current img{
    filter: grayscale(0%);
    display: block;
}


.ending{
    position:absolute;
    inset: 0;
    z-index: 11000;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 50px;

    background: #fff;

    opacity: 0;
    pointer-events: none;

    transition: opacity 1.5s;
}

.ending.show{
    opacity:1;
}

.ending-logo{
    opacity:0;
    transition:1.5s;
}

.ending-copy{
    opacity: 0;
    line-height: 2;
    text-align: center;
    transition: opacity 1.5s ease;
    font-size: 30px;
}
.ending-copy span{
    font-size: 80px;
}


.ending-copy.show{
    opacity: 1;
}

.ending-copy.show{

}

.ending-logo.show,
.ending-copy.show{

    opacity:1;

}

.mv{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    margin-top: var(--header-height);
}

.mv-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

.opening{
    position:absolute;
    inset:0;
    z-index:10;
    overflow:hidden;
    height:100%; 
}

.slider-wrap,
.slider,
.slick-list,
.slick-track{
    background:#000;
}

/* =========================================
   通常MV
========================================= */

.mv{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    background-image:url(../image/mv-back.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


/* =========================================
   写真アニメーション
========================================= */

.photo-animation{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:transparent;
}


/* 写真 */

.photo{
    position:absolute;

    opacity:0;
    transform:scale(0.92);
    filter:blur(4px);

    box-shadow:
         0px 5px 20px 0px rgba(0, 0, 0, 0.2);

    transition:
        opacity 1.5s ease,
        transform 2s ease,
        filter 2s ease;
}

.photo.show{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
}

.photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border: 4px solid #fff;
}


/* =========================================
   写真の位置
   とりあえず仮配置
========================================= */

.photo01.show{
    width:22%;
    height:30%;
    top:5%;
    left:5%;
    transform:scale(1) rotate(-3deg);
}

.photo02.show{
    width:20%;
    height:27%;
    top:8%;
    left:40%;
    transform:scale(1) rotate(1deg);
}

.photo03.show{
    width:23%;
    height:32%;
    top:4%;
    right:5%;
    transform:scale(1) rotate(-1deg);
}

.photo04.show{
    width:20%;
    height:28%;
    top:37%;
    left:4%;
    transform:scale(1) rotate(2deg);
}

.photo05.show{
    width:21%;
    height:30%;
    top:35%;
    right:4%;
    transform:scale(1) rotate(3deg);
}

.photo06.show{
    width:23%;
    height:28%;
    bottom:4%;
    left:6%;
    transform:scale(1) rotate(-1deg);
}

.photo07.show{
    width:20%;
    height:27%;
    bottom:5%;
    left:40%;
    transform:scale(1) rotate(-2deg);
}

.photo08.show{
    width:23%;
    height:30%;
    bottom:4%;
    right:5%;
    transform:scale(1) rotate(1deg);
}

.photo09.show{
    width:17%;
    height:23%;
    top:20%;
    left:22%;
    transform:scale(1) rotate(-3deg);
}

.photo10.show{
    width:18%;
    height:24%;
    bottom:20%;
    right:21%;
    transform:scale(1) rotate(2deg);
}


/* =========================================
   中央コピー
========================================= */

.photo-copy{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    z-index:20;

    text-align:center;
    white-space:nowrap;

    font-size:20px;
    line-height:2;

    opacity:0;
    transition:opacity 1.5s ease;
    color: #fff;
}
.photo-copy.show{
    opacity:1;
}
.photo-copy span{
    font-size:4.4vw;
}
.photo-copy{
    font-size: 1.7vw;
}
    @media screen and (max-width: 1000px){
        .photo-copy span{
            font-size:4.2vw;
        }
        .photo-copy{
            font-size: 1.6vw;
        }
        .year{
            font-size: 12vw;
        }
    }

    @media screen and (max-width: 600px){
        .photo-copy span{
            font-size:3.6vw;
        }
        .photo-copy{
            font-size: 1.5vw;
        }
    }