@charset "utf-8";

@font-face {
	font-family:'ShinGoPro';
	font-weight:normal;
	src:url('font/A-OTF-ShinGoPro-Light.woff') format('woff');
}
@font-face {
	font-family:'ShinGoPro';
	font-weight:bold;
	src:url('font/A-OTF-ShinGoPro-Medium.woff') format('woff');
}
@font-face {
	font-family:'ShinGoPro';
	font-weight:900;
	src:url('font/A-OTF-ShinGoPro-Bold.woff') format('woff');
}

:root {

	--colorBlue:#00f0ff;
}

body {
	color:#333333;
	font-family:'ShinGoPro';
	font-weight:normal;
}


.pageTitle {
	padding:3em 0.5em;
	text-align:center;
	/*font-family: 'Noto Sans JP', sans-serif;*/
}
	.pageTitle h1,
	.pageTitle p {
		font-size:1.3em;
		line-height:1.2;
	}



.mainImage {
	position:relative;
	/*background:url(../img/main_image.jpg) top center no-repeat;*/
	background-size:100% auto;
	box-sizing:border-box;
	width:100%;
	overflow:hidden;
}
@media only screen and (max-width:560px) {
	.mainImage {
		font-size:2.7vw;
	}
}
.mainImageContents {
	position:absolute;
	top:50%; left:0; right:0;
	transform:translateY(-50%);
	width:100%;
	margin:auto;
	text-align:center;
}
.mainImageContents .object1 {
	margin-bottom:0.5em;
}
.mainImageContents .words {
	font-size:1.2em;
	line-height:2;
	background:#ffffff;
	border-radius:1em;
	margin:0 1em;
	font-weight:900;
}

.topContents {
	position:relative;
	margin-bottom:3em;
}
@media only screen and (max-width:560px) {
	.topContents {
		font-size:2.7vw;
	}
}


.topContents .typing  {
	font-size:3.2em;
	position:absolute;
	background:linear-gradient( to bottom,  #34dbff 0%, #00f0ff 100% );
	-webkit-background-clip: text;
	color: transparent;
}
.topContents .typing.text1 {
	top:1.8%; left:25%;
	writing-mode:vertical-rl;
}
.topContents .typing.text2 {
	top:1.8%; left:12%;
	writing-mode:vertical-rl;
}
.topContents .typing.text3 {
	top:28.6%; right:14%;
	writing-mode:vertical-rl;
}
.topContents .typing.text1 span,
.topContents .typing.text2 span,
.topContents .typing.text3 span {
	font-weight:900;
}
.topContents .text4 {
	position:absolute;
	top:37.6%; left:35.5%;
	width:15.7%;
}
.topContents .text5 {
	position:absolute;
	top:50.2%; left:47.5%;
	width:18.7%;
}
.topContents .text6 {
	position:absolute;
	top:58.3%; left:6.1%;
	width:19.7%;
}
.topContents .text7 {
	position:absolute;
	bottom:22.4%; left:0;
}
.topContents .text8 {
	position:absolute;
	bottom:2.3%; left:0;
}



.playContents {
}
.playContents > div {
	margin-bottom:1px;
}
.playContents .videoContainer {
	margin-top:1em;
	
}


.hvnNav {
	display:flex;
	justify-content:space-between;
	padding:0 6%;
	margin-bottom:5em;
}
	.playContents .hvnNav {
		padding-top:3em;
		padding-bottom:4em;
	}

@media only screen and (max-width:560px) {
	.hvnNav {
		font-size:2.7vw;
	}
}
	.hvnNav a {
		font-size:1.2em;
		line-height:3.4;
		background:#fff;
		border-radius:1.7em;
		box-shadow:0 0.1em 0.1em rgba(0,0,0,0.15);
		width:47%;
		text-align:center;
	}