@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/



/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
@media screen and (min-width: 801px), print {
	
	
	
	body{
		background-color:#000;
		}
		
	.black_bg{
		height:100vh;
		position:fixed;
		left:0;
		top:0;
		width:100%;
		z-index:1;
		transition:1200ms;
		overflow: hidden;
		}
	
	.black_bg.scrollin{
		background:rgba(0,0,0,0.7);
		transition:1200ms;
		}
	.black_bg.last{
		background:rgba(0,0,0,1);
		transition:1200ms;
		}
		
	.sec1{
		background:rgba(0,0,0,1);
		overflow:hidden;
		margin-top:-75px;
		width:100%;
		transition:800ms;
		position:relative;
		height: 100vh;
		}
		.main_bg{
			position:absolute;
			height:100%;
			left:50%;
			top:50%;
			opacity:0;
			transform: translate(-50%, -50%) scale(0.97);
			}
		.main_bg.on{
			transform: translate(-50%, -50%) scale(1);
			opacity:1;
			transition:2000ms;
			}
		.item_box{
			z-index:3;
			position:absolute;
			text-align:center;
			top:50%;
			left: 50%;
			transition: opacity 1200ms;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			margin-top:35px!important;
			margin-left:0!important;
			}
			
		.sec1.scrollin{
			pointer-events: none;
			}
		.sec1.scrollin .item_box{
			transition:1200ms;
			opacity:0;
			}
		.sec1 .item_pht{
			position:relative;
			margin-top:10px;
			margin-left: 0px;
			}
		.sec1 .item_pht img{
			width: 800px;
			height: auto;
			}
		.sec1 .item_pht .item{
			position:absolute;
			top:0;
			left:0;
			opacity:0;
			}
		.sec1 .item_pht .item:nth-of-type(3){
			left:-1px;
			}
		.sec1 .item_pht .item.on{
			opacity:1;
			transition:2400ms;
			}
		.sec1 .item_box .logo2{
			width: 250px;
			
			opacity: 0;
			transform : translate(0, 30px);
			transition : 1.5s 0.5s;
		}
		.sec1 .item_box .logo2.on{
			opacity: 1;
			transform : translate(0, 0px);
			transition-timing-function:ease-out;

			}
			
			
footer{
	position: fixed;
	bottom: 0;
	z-index: 999;
	}
	
}






/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
@media only screen and (max-width: 800px) {
	
	body{
		background-color:#000;
		}
		
	.black_bg{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		z-index:1;
		transition:1200ms;
		}
	
	.black_bg.scrollin{
		background:rgba(0,0,0,0.7);
		transition:800ms;
		}
		
	.sec1{
		background:rgba(0,0,0,1);
		position:relative;
		left:0;
		top:0;
		width:100%;
		transition:800ms;
		}
		.main_bg{
			position:fixed;
			width:115%;
			left:50%;
			top:50%;
			transform: scale(0.97);
			opacity:0;
			}
		.main_bg.on{
			transform: scale(1);
			transition:1600ms;
			opacity:1;
			}
		.item_box{
			text-align:center;
			z-index:3;
			position:fixed;
			left:50%;
			top:50%;
			transition: opacity 1200ms;
			max-width:466px;
			width:90%;
			}
		.sec1.scrollin .item_box{
			transition:1200ms;
			opacity:0;
			}
		.sec1 .logo2{
			max-width:100%;
			width:200px;
			}
		.sec1 .item_pht{
			position:relative;
			margin-top:10px;
			}
		.sec1 .item_pht img{
			width:90%;
			}
		.sec1 .item_pht .item{
			position:absolute;
			top:0;
			left:0;
			opacity:0;
			}
		.sec1 .item_pht .item:nth-of-type(3){
			left:15%;
			}
		.sec1 .item_pht .item.on{
			opacity:1;
			transition:1200ms;
			}
	
	header {
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
	}
	footer {
		position: fixed;
		bottom:0;
		left: 0;
		width: 100%;
	}
				
								
}