@charset "UTF-8";

body { background: #000;}

/*.dummy { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%,-50%);}*/

#top-wrap header,
#top-wrap nav,
#top-wrap .top_title { opacity: 0;}

.inpage-btn { position: fixed; right: 40px; bottom: 40px; z-index: 10; width: 44px; opacity: 0;}
.inpage-btn img { width: 100%;}

#audio-wrap { position: fixed; top: 50%; right: 0; left: 0; transform: translateY(-50%); z-index: 100; text-align: center;}
#audio-wrap div { display: inline-block; vertical-align: top;}
#audio-wrap div img { width: 80px;}
#audio-wrap div+div { margin-left: 40px;}
#audio-wrap div p { margin-top: 15px;}

@media screen and (max-width: 767px){
.inpage-btn { right: 30px; bottom: 30px;}
	
#audio-wrap div img { width: 60px;}
#audio-wrap div+div { margin-left: 30px;}
}

/**/
.bg-video-wrap::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.3); z-index: 0; transition: all 1.5s ease;}
.bg-video-wrap video { position: fixed; z-index: -1; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100vh;}

/**/
.top_title { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10; font-size: 30px; font-weight: 900; width: 100%; text-align: center; transition: all .5s ease;}
.top_title img { max-width: 360px; margin: 0 auto;}

@media screen and (max-width: 767px){
.top_title img { max-width: 280px;}
}

/**/
/*nav { position: fixed; bottom: 30px; left: 20px; z-index: 10;}
nav ul { transition: all .5s ease;}
nav ul li+li { margin-top: 20px;}
nav ul li a,
nav .back { font-size: 18px; font-weight: 900; color: #fff;}
nav .back { position: absolute; bottom: 0; left: 0;}*/

/**/
#works { position: fixed; top: 50%; transform: translateY(-50%); left: 0; right: 0; max-width: 1600px; margin: 0 auto; z-index: 100; width: 100vw; transition: all 1.5s ease;}
#works h2 { font-size: 24px; font-weight: 900; text-align: center; margin-bottom: 26px;}
#works .slick-slider .slick-list li { border-radius: 10px; margin: 0 10px; padding: 20px; height: 330px; position: relative;}
#works .slick-slider .slick-list li a { outline: none; display: block; height: 100%;}
#works .slick-slider .slick-list li a h3 { font-size: 30px; font-weight: 900; height: 56px; line-height: 1; margin-bottom: 20px;}
#works .slick-slider .slick-list li a p { line-height: 1.6; font-size: 13px;}
#works .slick-slider .slick-list li a img { position: absolute; right: 20px; bottom: 20px;}

#works .slick-slider .slick-list li.fkd { background: url(../img/page/works/works_bg_FKD.jpg) center center; background-size: cover;}
#works .slick-slider .slick-list li.movie { background: url(../img/page/works/works_bg_Movie.jpg) center center; background-size: cover;}
#works .slick-slider .slick-list li.sound { background: url(../img/page/works/works_bg_Sound.jpg) center center; background-size: cover;}
#works .slick-slider .slick-list li.event { background: url(../img/page/works/works_bg_Event.jpg) center center; background-size: cover;}
#works .slick-slider .slick-list li.design { background: url(../img/page/works/works_bg_Design.jpg) center center; background-size: cover;}
#works .slick-slider .slick-list li.other { background: url(../img/page/works/works_bg_Other.jpg) center center; background-size: cover;}

#works .slick-dots { position: relative; bottom: -15px; display: none;}
#works .slick-dots li { margin: 0 2px;}
#works .slick-dots li button:before { color: #fff;}
#works .slick-dots li.slick-active button:before { color: #fff;}

#works::after { content: ''; position: fixed; top: 50%; transform: translateY(-50%); right: 0; left: 0; width: calc(25vw - 100px); height: 330px; margin: 0 auto; border-radius: 10px; z-index: -1;}

@media screen and (max-width: 1365px){
#works::after { width: calc(33.33333333vw - 40px);}
#works .slick-dots { display: block;}
}
@media screen and (max-width: 767px){
#works { top: 55%;}
#works::after { width: calc(100vw - 80px);}	
#works .slick-dots li { margin: 0;}
}
@media screen and (max-width: 320px){
#works .slick-slider .slick-list li a h3 { font-size: 24px; height: 44px; margin-bottom: 15px;}
#works .slick-slider .slick-list li { height: 280px;}
#works .slick-slider .slick-list li a p { font-size: 12px;}
#works .slick-slider .slick-list li a img { width: 40px;}
}

/* works開く前 */
.back { position: fixed; top: 112px; right: 37px; z-index: 1000; opacity: 0; pointer-events: none; transition: all .5s ease; cursor: pointer;}
#works { opacity: 0; pointer-events: none; transform: translate(20px,-50%);}

body.works header ul li:first-child,
body.works header ul li:first-child+*,
body.works .top_title { opacity: 0!important; pointer-events: none;}
body.works .back { opacity: 1; pointer-events: inherit; transition: all .5s ease .5s;}

body.works #works { opacity: 1;pointer-events: inherit; transform: translate(0,-50%);}
body.works .bg-video-wrap::after { background: rgba(0,0,0,.85);}

@media screen and (max-width: 767px){
.back img { width: 30px;}
}