@charset "utf-8";

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	color: #fff;
	font-family:'Antonio', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 16px;
	line-height: 1.5em; letter-spacing: 0.2em;
	height: 100%; background-color:#000; overflow:hidden;
}
html { height:100%;}

a {color: #fff;text-decoration: none; outline:none;}
a:hover {color: #fff;text-decoration:none;}

.pc_only{ display:block;}
.sp_only{ display:none;}


@media only screen and (max-width: 749px){
html {
    height: 100%;
}

body { overflow:auto;
    height: 100%;
    margin: 0;
}
body:after{ content:""; background-image:url(../images/sp_bg.gif); height:100vh; width:100vw; display:block; background-size:cover; position:fixed; top:0; left:0; z-index:-1;}
.pc_only{ display:none;}
.sp_only{ display:block;}
}


/* =fade
------------------------------------------------------------------------------------------*/
#js_fade2 {position:fixed; top:0; left:0; width:100%; height:100%;background-color:#000;background-image:url( ../images/tail-spin.svg ); background-repeat:no-repeat; background-size:60px; background-position:50% 50%; z-index:100;}


/* =teaser
------------------------------------------------------------------------------------------*/
h1 { width:40%;transform: translate3d(-50%, -50%, 0); position:absolute; top:50%; left:50%; z-index:5}
h1 img{ width:100%;}

.movie{ padding-top:5vh;}
.movie li{width:33.33%; height:45vh; float:left; line-height:0; position:relative; z-index:100; opacity:0.07;transition:0.5s; overflow:hidden;}
.movie li:hover { opacity:1; background-color:#002;}

.movie li .movimg{ position:absolute; left:50%; top:50%; transform: translate3d(-50%,-50%,0);object-fit: cover;width: 100%; height: 100%; transition:0.5s;}
.movie li:hover .movimg{ transform: translate3d(-50%,-50%,0) scale(1.2); opacity:0.5;}

.movie li .ro{position:absolute;  top: 60%; left: 50%; width:100%;  transition:0.5s; opacity:0; transform: translate3d(-50%,-50%,0); font-size:1.5vw;}
.movie li:hover .ro{ opacity:1; top:50%;}


small{ position:absolute; right:2vw; bottom:1vh; z-index:10; font-size:10px;}

video#bgvid { position: fixed; left:50%; bottom:0; min-height:100vh; min-width:100vw;background-size: cover; opacity:0.4; overflow:hidden; z-index:1;transform: translate3d(-50%, 0, 0)}

.scroll_line{ display:none;}

@media only screen and (max-width: 749px){
h1{ position:relative; top:0; left:0; height:100%; width:100%; transform:none;} 	
h1 img{width:40%;transform: translate3d(-50%, -50%, 0); position:absolute; top:50%; left:50%; }

.movie{ padding:0;}
.movie ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
.movie li{ width:50%; opacity:1; height:0; padding-bottom:50%;}
.movie li a{ width:100%; height:100%; position:absolute;}
.movie li .movimg{ object-fit:inherit; width:220%; height:auto; opacity:0.5;}
.movie li .ro{ display:block; opacity:1; top:50%; line-height: 1em; font-size:3vw;}

small{position: relative;
    left: 0;
    bottom: 0;
    z-index: 10;
    font-size: 10px;
    text-align: center;
    width: 100%;
    padding: 5vw 0;
    display: block;}

video{ display:none;}

.scroll_line{ overflow:hidden; width:1px; height:60px; display:block; position:absolute; z-index:20; bottom:0; left:50%; }
.scroll_line span{  display:block; background:#fff; position:absolute; bottom:0;left:0; height:60px; width:1px;transition: all 400ms ease 0s;-webkit-transition: all 400ms ease 0s;
	-webkit-animation: scrollarrow 2s infinite;
	animation: scrollarrow 2s infinite;
}
@-webkit-keyframes scrollarrow {
	0% {-webkit-transform: translate(0, -60px);}
	100% {-webkit-transform: translate(0, 60px);}
}
@keyframes scrollarrow {
	0% {transform: translate(0, -60px);}
	100% {transform: translate(0, 60px);}
	
}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
/*
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#040424; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family:'Montserrat'; font-size:12px;}
.page_top a:hover{background-color:#1b3e71; text-decoration:none;}


@media only screen and (max-width: 639px){
.page_top{ display:none;}
}
*/


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/* colorbox
------------------------------------------------------ */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000;}
        #cboxLoadingGraphic{background:url(../images/loading_b.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}