@charset "utf-8";



/* CommonSet
----------------------------------------------------*/
@import url('//fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('//fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
@font-face {
	font-family: "YuGothicWIN M";
	src: local('YuGothic-Medium'),local('Yu Gothic Medium'),local('YuGothic-Regular');
	font-weight: normal;
}
body {
/*	font-family: "din-condensed-web","游ゴシック Medium","Yu Gothic Medium","YuGothicWIN M","游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",Helvetica,"メイリオ",Meiryo,"Lucida Grande",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,"Lucida Sans Unicode",verdana,Sans-Serif;
*/
	font-family: 'Montserrat',"游ゴシック Medium","Yu Gothic Medium","YuGothicWIN M","游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",Helvetica,"メイリオ",Meiryo,"Lucida Grande",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,"Lucida Sans Unicode",verdana,Sans-Serif;
	font-weight: 400;

	letter-spacing: 0.1em;
	font-feature-settings: "palt" on;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-size: 12px;
	font-size: 10px;

	line-height: 1.5;
	text-align: center;
	color: #fff;

	background: #4c4c4c;
}



::-moz-selection {
	background-color: #0092aa; /* Required when declaring ::selection */
	background-color: #ff5a93;
/*	color: #000;	*/
	text-shadow: none;
}
::selection {
	background-color: #0092aa; /* Required when declaring ::selection */
	background-color: #ff5a93;
/*	color: #000;	*/
	text-shadow: none;
}



a {
	color: #fff;
/*	-webkit-tap-highlight-color: rgba(0,0,0,0.1);	*/
}
a:link,
a:visited {
	text-decoration: none;
}
a:hover,
a:active {
	text-decoration: underline;
}

h1 {	font-size: 64px;	}
h2 {	font-size: 30px;	}
h3 {	font-size: 20px;	}
h4 {	font-size: 16px;	}
h5 {	font-size: 12px;	}

h1, h2, h3, h4, h5 {
	line-height: 1;
	text-align: center;
}
h2 {
	margin: 0 auto 80px;
}
h3, h4, h5 {
	margin: 0 auto 1em;

}
h1, h2, h3, h4, h5, p {
	position: relative;
	animation: alphaSlow 1s cubic-bezier(0, 1, 0, 1) 0s 1 both;
	animation: alphaSlow 1.5s ease-in 0s 1 both;
}
	@keyframes alphaSlow {
		  0% { opacity: 0; }
		 10% { opacity: 0;}
		100% { opacity: 1;}
	}



.PCOnly {
	display: inline;
}
.PCTabOnly {
	display: inline;
}
.SPOnly {
	display: none;
}







/* container
-----------------------------*/
#wrap {
	position: relative;
	margin: 0 auto;
	background: #fff;

	overflow: hidden;
	box-sizing: border-box;
	padding: 0px;
}
#container {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}



header {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
}
header > div {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width: 100%;
	max-width: 1280px;
	padding: 14px 16px 16px;
	box-sizing: border-box;

/*	background: rgba(0,0,0,0.5);	*/
}
header h1 {
	width: 70px;
	height: 65px;

/*	background: rgba(200,200,200,0.2);	*/
}
header h1 img {
	width: 100%;
	height: auto;
}
header .grandMenu {
	font-size: 20px;
	padding: 0 20px 6px 0;

/*	width: calc(100vw - 70px);	*/
/*	background: rgba(200,200,200,0.2);	*/
}
header nav ul {
	display: flex;
	flex-flow: row wrap;
}
header nav ul li {
	margin: 0px 17px 0px;
}
header nav ul li:last-child {
	margin-right: 0;
}
footer {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
.contents {
/*	box-sizing: border-box;	*/
}






.contents > article {
	width: 100%;
	height: 1000px;
	box-sizing: border-box;
	border: 1px solid #ffff00;
	padding: 75px 0 0;
}
div.contents > article {
	height: auto;
	border: none;
}
.contents > article > div {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1280px;
	box-sizing: border-box;
	padding: 20px;
}









/* OTHERs
-----------------------------*/
.linkTEMP {
	font-size: 64px;
	color: #f00;
	box-sizing: border-box;
	padding: 25px;
	border: 3px solid #f00;
}



.teaser #wrap,
.announcementPage #wrap {
	position: fixed;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100vw;

	height: 100vh;
	height: 100svh;
	height: 100dvh;



	background: #fff;

	overflow: hidden;
	box-sizing: border-box;
	padding: 5px;
}
.teaser #container,
.announcementPage #container {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	background: #ABC900;

	background: #ECE6D6;
	background: #F7F7F7;

	background: #7D7773;
	background: #E9E9E9;

	background: #695F55;
	color: #ECE6D6;



	background: #6667ab;



}
.teaser footer,
.announcementPage footer {
	position: absolute;
	bottom: 10px;
	right: auto;
	width: 100%;
}
.teaser footer p,
.announcementPage footer p {
	margin: 0 auto;
}
.teaser .contents p {
	font-size: 140px;
	font-weight: 100;
	line-height: 100vh;
	letter-spacing: calc((100vw - 7em) / 12);
	text-indent: calc((100vw - 7em) / 12);
	animation: txtGathering 2.5s cubic-bezier(0, 1, 0, 1) 0s 1 both;
}
.teaser .contents p:nth-child(2){
/*
	font-size: 50px;
	letter-spacing: calc((100vw - 7em) / 120);
*/
}
	@keyframes txtGathering {
		  0% { 	letter-spacing: calc((100vw - 7em) / 1); text-indent: calc((-150vw - 0em) / 1); }
		100% { 	letter-spacing: calc((100vw - 7em) / 12); text-indent: calc((100vw - 7em) / 12); }
	}





.announcementPage #container {
	padding-top: calc((100vh - 396px) / 2);
}
.announcementPage .contents {
	width: calc(100vw);
	max-width: 640px;
	margin: auto;
	padding: 0 20px;
	border: 1px solid rgba(255,255,255,0.3);
}
.announcementPage .contents h2 {
	margin: 100px auto 50px;
	font-family: "din-condensed-web","游ゴシック Medium","Yu Gothic Medium","YuGothicWIN M","游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",Helvetica,"メイリオ",Meiryo,"Lucida Grande",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,"Lucida Sans Unicode",verdana,Sans-Serif;
	animation: alphaShallow 3s ease-in 0s 1 both;
}
.announcementPage .contents p {
	margin: 50px auto 100px;
	font-size: 24px;
	line-height: 2;
	letter-spacing: 0.3em;
	animation: alphaShallow 3s ease-in 0s 1 both;
}
	@keyframes alphaShallow {
		  0% { opacity: 0; }
		 10% { opacity: 0;}
		100% { opacity: 0.1;}
	}