@charset "utf-8";
/* CSS Document */
/*-----------------------------------------
			TOP OPENING PAGE
-----------------------------------------*/
.top #wrap{
    opacity:0.0;
}
#fakeloader{
	z-index: 9999;
}
#fakeloader:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,rgba(0,180,235,0.10),rgba(135,185,30,0.10));
	position: absolute;
	top: 0;
	left: 0;
}
#fakeloader .fl{
	position: absolute!important;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%,-50%)!important;
	width: 50%!important;
	max-width: 300px;
}
#fakeloader .fl{
	animation-name: loader;
	animation-duration: 3s;
	animation-timing-function: ease;
}
@keyframes loader{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#video{ 
	width: 100%;
}
#video video{
width: 100%!important;
height: auto;
top: 50%;
left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#video:before{
	position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    display: block;
    background-image: url(../img/dotte.png);
    z-index: 1;
	opacity: 0.2;
}
#menu_wrap{
	width: 100%;
	box-sizing: border-box;
}
.top #logo{
	top: 5%;
	left: 5%;
	z-index: 10;
}
#menu_wrap #logo .logo2{display: none;}
#menu_wrap #logo.on .logo2{display: block;}
#menu_wrap #logo.on .logo1{display: none;}

.top #menu_wrap .more{
	top: 6%;
	right: 5%;
	z-index: 10;
}
.scroll_wrap{
	position: fixed;
	bottom: 5%;
	right: 5%;
	z-index: 10;
}
.scroll_wrap.on{display: none!important;}
.scr{
	display: inline-block;
	margin-bottom: 30px;
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.scroll_d{
	width: 1px;
	height: 100px;
	margin: auto;
}
.scroll_d > span{
	width: 1px;
	height: 100%;
	background-color: rgba(255,255,255,0.4);
}
.scroll_d > span::before{
	position:absolute;
	content: "";
	display: block;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
	animation: line 4s ease 0s infinite;
}
#menu_wrap .volume{
	z-index: 10;
	position: fixed;
	bottom:4%;
	right: 10%;
}
#menu_wrap .volume.on{display: none!important;}
#video_select{
	z-index: 999;
	background-color: rgba(0,5,10,0.90);
}
#video_select:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,rgba(0,180,235,0.10),rgba(135,185,30,0.10));
}
.v_bt{
	cursor:pointer;
}


@keyframes line {
	0% {
		bottom: 100px;
		height: 0;
	}
	20% {
		bottom: 0;
		height: 100px;
	}
	40% {
		bottom: 0;
		height: 0;
	}
	100% {
		bottom: 0;
		height: 0;
	}
}
.section{
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	transition: 0.5s;
	z-index: 0;
}
.section:before{
	content: "";
	display: block;
	background-image: url(../img/dotte2.png), url(../img/dotte2.png), url(../img/dotte2.png), url(../img/dotte2.png), url(../img/dotte2.png);
	background-repeat: repeat-y;
	background-position: 10%,25%,50%,75%,90%;
	width: 100%;
	height: 100%;
	max-width: 1600px;
	position: absolute;
	top: 0;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: 0;
}
.section:after{
	content: "";
	display: block;
	background: linear-gradient(135deg,rgba(0,180,235,0.10),rgba(135,185,30,0.10));
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: 0;
}


/* 白黒ページ切り替えボタン */

.contents,.section .more{display: none;}
.section .more{
	cursor: pointer;
}
.section .more1{
	content: "";
	display: block;
	z-index: 5;
	background-image: url("../img/more1.png");
	background-size: cover;
	width: 70px;
	height: 70px;
	position: absolute;
	bottom: 5%;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
.section .more2{
	content: "";
	display: block;
	z-index: 5;
	background-image: url("../img/more2.png");
	background-size: cover;
	width: 70px;
	height: 70px;
	position: absolute;
	bottom: 5%;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}

/* 白黒ページ切り替え */

.section .title2,.section .txt2,.section .more2{
	display: none;
}
.change.section{
	background: #f5f5f6;
}
.change.section:before{
	background: transparent;
}
.change.section .contents{
	color:#333;
}
.change.section .title2,.change.section .txt2,.change.section .more2{
	display: inline-block;
}
.change.section .title1,.change.section .txt1,.change.section .more1{
	display: none;
}

/* 白背景 moreボタン */
.button{
	transition: width .3s, right .3s;
}
.button::after{
    display: inline-block;
    content: "";
    width: 80px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button::before{
    display: inline-block;
    content: "";
    width: 8px;
    height: 1px;
    position: absolute;
    bottom: 3px;
    right: 20px;
    margin: auto;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: all .3s;
}
.button::after,.button::before{
	background-color: rgba(0,5,10,0.50);
}
.button:hover::after{
    padding-right: 10px;
	width: 100px;
}
.button:hover::before{
    right: -10px;
}

.section .button{z-index: 5; display: none!important;}
.change.section .button{display: block!important;}

/* section3 */
#section3{
	background-image: url("../img/img1.png");
	background-repeat: no-repeat;
}
#section3.change{
	background-image: url("../img/img1-2.png");
}
/* section4 */
#section4{
	background-image: url("../img/img2.png");
	background-repeat: no-repeat;
	background-position: right;
}
#section4.change{
	background-image: url("../img/img2-2.png");
}
/* section5 */
#section5{
	background-image: url("../img/img3.png");
	background-repeat: no-repeat;
}
#section5.change{
	background-image: url("../img/img3-2.png");
}
/* section6 */
#section6{
	background-image: url("../img/img4.png");
	background-repeat: no-repeat;
	background-position: right;
}
#section6.change{
	background-image: url("../img/img4-2.png");
}
/* section7 */
#section7 .inner{
	position: relative;
	z-index: 5;
	display: none;
}
/*IEのみ
---------------------------------------------------------------------------*/
@media all and (-ms-high-contrast: none) {}

/*ここからタブレット用（768px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	.top #menu_wrap .more a{
		width: 200px;
	}
	/* section3 */
	#section3{
		background-size: cover;
	}
	/* section4 */
	#section4{
		background-size: cover;
	}
	/* section5 */
	#section5{
		background-size: cover;
	}
	/* section6 */
	#section6{
		background-size: cover;
	}
}
/*ここからスマホ用（667px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
	#video video{
		width: auto!important;
		height: 100%;
	}
	.section:after{
		background-position: 25%,50%,75%;
	}
	.top #logo{
		top: 2%;
		left: 2%;
	}
	.scroll_wrap{
		bottom: 2%;
		right: -1%;
	}
	#menu_wrap .volume{
		position: fixed;
		bottom: auto;
		top: 3%;
		right: 2%;
	}
	.section .more1{
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 2%;
	}
	.section .more2{
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 2%;
	}
}