#keyImg{
	max-width:1280px;
	width:100%;
	display:block;
}

#logo{
	max-width:1180px;
	width:90%;
	top:80%;
	left: 50%;
	transform: translate(-50%,0%);
	position:absolute;
	display:block;
}

.frame{
	width:100%;
	height:fit-content;
	position:relative;
}


#jacket{
	box-shadow: 5px 5px 5px rgba(50,50,100,0.5);
}



#products{
	display:flex;
	justify-content:space-around;
	align-items:flex-start;
}

#productsImg{
	max-width:800px;
	width:40%;
}

#productsImg img{
	width:100%;
	margin-bottom:5%;
}

.contents{
	background-color:white;
	color:white;
	padding:4% 4%;
	padding-bottom:8%;
	background: linear-gradient(180deg, rgba(158, 208, 243,0.8), rgba(40, 100, 220, 0.5));
	position:relative;
}


.title{
	text-shadow:none;
	font-size:1.6vw;
	color:rgba(255, 255, 255,0.8);
}
.data{
	font-size:2vw;
	margin-bottom:1.6vw;
	border-bottom:1px solid skyblue;
	text-shadow: 1px 1px 2px #2968dc;
}

.info{
	display:flex;
	justify-content:space-around;
	align-items:flex-start;
}

#info_twitter{
	max-width:48%;
	max-height:300px;
	width: 48vw;
	height:26.4vw;
	overflow:auto;
	
	border: solid 1px skyblue;	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 2px skyblue;	/* 外側の線になる一本線の枠線をひく*/
	outline-offset: 4px;	/* 外側の線と内側の線の空き具合を調整*/
}

#info_new{
	max-width:40%;
	max-height:300px;
	width: 40vw;
	height:26.4vw;
	-webkit-overflow-scrolling:touch;
	
	border: solid 1px skyblue;	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 2px skyblue;	/* 外側の線になる一本線の枠線をひく*/
	outline-offset: 4px;	/* 外側の線と内側の線の空き具合を調整*/
}

#txtFrame{
	width:100%;
	height:100%;
	scrolling:none;
	border:none;
}

#X{
	max-width:40%;
	max-height:80px;
	width: 40vw;
	height:6vw;
	
	margin-top:2vw;
	margin-left:2.2vw;
	background-color:#2968dc;
	
	border: solid 1px skyblue;	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 2px skyblue;	/* 外側の線になる一本線の枠線をひく*/
	outline-offset: 4px;	/* 外側の線と内側の線の空き具合を調整*/
	
	font-size:2vw;
	background-image:url(img/ico_l.png);
	background-position:left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	
	text-align:center;
	line-height:6vw;
	
	text-shadow: 1px 1px 2px black;
	
	cursor:pointer;
}

.banner{
	max-width:40%;
	width: 40vw;
	height:auto;
	margin-top:2vw;
	margin-left:2.2vw;
}


.wrapper{
	width:47%;/*2個以上並べるようになったら47%に戻す*/
	border: solid 1px skyblue;	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 2px skyblue;	/* 外側の線になる一本線の枠線をひく*/
	outline-offset: 4px;	/* 外側の線と内側の線の空き具合を調整*/
	position:relative;
	background-color:rgba(0,0,20,0.5);
}

.movie_wrapper{
	position:relative;
	width: 100%;
	padding: calc(360 / 640 * 100%) 0 0;
}
.movie{
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.products_main{
	width:100%;
	margin-top:5.5vw;
	display:flex;
	justify-content:space-between;
}

.cont{
	width:48%;
	background-color:rgba(0,0,0,0.2);
	overflow:hidden;
	position:relative;
	border: solid 1px white;	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 2px white;	/* 外側の線になる一本線の枠線をひく*/
	outline-offset: 4px;	/* 外側の線と内側の線の空き具合を調整*/
}
.cont img{
	width:100%;
}
.cont2{
	width:100%;
	padding:5px 0;
	margin:20px 0;
	background-color:rgb(100,100,100,0.4);
	border-top:2px white solid;
	border-bottom:2px white solid;
}
.cont_title{
	font-size:22px;
	margin-left:20px;
	text-shadow: 1px 1px 2px #2968dc;
}
.cont_txt{
	margin:15px;
	margin-bottom:30px;
}
.cont_title2{
	font-size:20px;
}
.ico{
	width:50%;
	height:32px;
	font-size:18px;
	text-align:center;
	line-height:32px;
	color:white;
	background-color:rgba(50,50,100,0.5);
	border:solid 2px white;
	border-radius:25px;
	margin-bottom:20px;
}
.shopLink{
	font-size:22px;
	width:90%;
	text-align:center;
	color:white;
	background-color:rgba(50,50,100,0.5);
	border-radius:25px;
	margin:auto;
	margin-bottom:20px;
	padding:5px 0;
	border:solid 2px white;
}
.wrap{
	width:100%;
	height:25vw;
	-webkit-overflow-scrolling:touch;
	background-color: rgba(0,0,0,0.4);/**/
	border: solid 1px white;	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 2px white;	/* 外側の線になる一本線の枠線をひく*/
	outline-offset: 4px;	/* 外側の線と内側の線の空き具合を調整*/	
}
.txtFrame{
	z-index:5;
	position:relative;
	width:100%;
	height:100%;
	scrolling:none;
	border:none;
}

.pc{
	display:block;
}
.mobile{
	display:none;
}

.kinds{
	text-align:center;
	background-color:#2968dc;
	padding:10px 0;
	box-sizing:border-box;
}

@media (min-width: 1280px) {

	#words{	
		font-size:60px;
	}
	#i{
		font-size:78px;
	}
	#kill{
		font-size:95px;
	}
	
	.title{
		font-size:20px;
	}
	.data{
		font-size:26px;
		margin-bottom:18px;
	}
	
	#X{
		font-size:28px;
		line-height:80px;
	}
	.wrap{
		height:320px;
	}
}

/*@media only screen and (min-height:1080px){
	#main{
		background-image:none;
	}
}*/

@media only screen and (max-width:896px){

	.frame{
		width:100%;
		height:60vw;
		position:relative;
		overflow: hidden;
	}
	#keyImg{
		max-width:1280px;
		width:143vw;
		top:-53vw;
		left:-36vw;
		position:absolute;
	}
	#logo{
		width:60%;
		top:5vw;
		left:3vw;
		position:absolute;
		transform: none;
	}
	#words{
		padding:5vw 0 5vw 0;
		position:static;
		
	}
	
	#pcMenu{
		display:none;
	}
	

	
	#products{
		display:block;
	}
	#productsImg{
		max-width:800px;
		width:100%;
	}
	.title{
		font-size:3vw;
		color:rgba(255, 255, 255,0.8);
	}
	.data{
		font-size:4vw;
		margin-bottom:2.5vw;
		border-bottom:1px solid skyblue;
	}
	
	.info{
		display:block;
	}
	#info_twitter{
		max-width:98%;
		width:98%;
		height:55vw;
		border: solid 1px skyblue;	/* 内側の線になる一本線の枠線をひく*/
		margin: 10vw 0;
	}
	#info_new{
		max-width:98%;
		width:98%;
		height:40vw;
		border: solid 1px skyblue;	/* 内側の線になる一本線の枠線をひく*/
		margin: 8vw 0;
	}
	
	#X{
		max-width:98%;
		width:98%;
		height:10vw;
		margin: 8vw 0;
		font-size:4.5vw;
		line-height:10vw;
	}
	
	.banner{
		max-width:98%;
		width:98%;
		height:auto;
		margin:0;
	}
	
	.wrapper{
		width:100%;
		margin:auto;
		margin-top:3vw;
	}
	
	.products_main{
		display:block;
	}
	
	.cont{
		width:100%;
		margin-top:5.5vw;
	}
	.wrap{
		height:35vw;
	}	
	
	.pc{
		display:none;
	}
	.mobile{
		display:block;
	}

}