@charset "utf-8";

/*************************************************
 * Description: 【HOME】トッププロモーション
 * Package: toppromotion
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2017/xx/
 * Notes: 
*************************************************/

/* iPhoneでは高さ指定を100vhとしても崩れてしまうので、当ブロックまでの親要素すべてに100%を与える必要がある*/
html,
body,
.frame_outer,
#headertopcolumn,
#top_promotion {
	height: 100%;
}


/* ==============================================
 * splash
=============================================== */
#splash_area {
	position: absolute;/*fixed;*/
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;/*100vh; ※スマホだと100vhは画面高さにならない*/
	background-color: #fff;
	z-index: 100;
}
#splash_area .splash_logo {
}
#splash_area .splash_logo svg {
	width: 250px;
	height: auto;
	stroke: transparent;
	stroke-width: 1px;
	fill: transparent;
	stroke-dasharray: 1800px;
	stroke-dashoffset: 0px;
}
/* ready(js制御)でスプラッシュアニメーション開始 */
#splash_area.ready .splash_logo svg {
	animation:
		splash_anime 2.5s ease forwards,
		splash_close 0.5s ease 3s forwards;/*delayで消去までのタイミングを調整*/
}
@keyframes splash_anime {/*出現アニメーション*/
	0% {
		stroke: #aaa;
		stroke-dashoffset: 1800px;
	}
	50% {
		fill: transparent;
		stroke: #aaa;
		stroke-dashoffset: 0px;
	}
	100% {
		stroke: transparent;
		fill: #000;
	}
}
@keyframes splash_close {/*消去アニメーション*/
	0% {
	}
	100% {
		opacity: 0;
	}
}
@media ( max-width: 767px ) {
	#splash_area .splash_logo svg {
		width: 150px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#splash_area .splash_logo svg {
		width: 200px;
	}
}


/* ==============================================
 * #top_promotion
=============================================== */
#top_promotion {
	margin: 0;
	padding: 0;
	max-width: 100%;
	width: 100%;
	height: 100%;/*100vh; ※スマホだと100vhは画面高さにならない*/
	position: relative;
}
#top_promotion .head_promotion {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row-reverse;
	line-height: 1.7;
	font-weight: normal;
	box-sizing: border-box;
}
#top_promotion .head_promotion .text {
	writing-mode: vertical-rl;
}
#top_promotion .head_promotion .site_title {
	display: none;
}

/* .next_btn
----------------------------------------------- */
#top_promotion .next_btn {
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
}
#top_promotion .next_btn a {
	display: flex;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	border-radius: 50%;
	border: solid 1px #000;
	color: #000;
	font-size: 20px;
	width: 1.8em;
	height: 1.8em;
	opacity: 0;
	animation: next_btn_anime .6s ease-out 2s infinite alternate;
	transition: .3s;
	position: relative;
}
#top_promotion .next_btn a:hover {
	text-decoration: none;
	/*animation-play-state: paused;*/
	background-color: #000;
	color: #fff;
	opacity: 0.3 !important;
}
@keyframes next_btn_anime {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 0.7;
	}
}
/* btn ring */
#top_promotion .next_btn a:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 1px #aaa;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: 0;
	animation: next_btn_ring 1.2s ease-out 2s infinite;
}
@keyframes next_btn_ring {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(3);
		opacity: 0;
	}
}

@media ( max-width: 767px ) {
	#top_promotion .head_promotion {
		padding-top: 50px;/*header高さ分差し引き*/
		font-size: 12.5vw;/*portrait（縦長）とlandscapeが切り替わる正方形時で収まりがいいサイズ*/
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#top_promotion .head_promotion {
		font-size: 9vw;
		padding-top: 112px;/*header高さ分差し引き*/
	}
}
@media ( min-width: 980px ) {
	#top_promotion .head_promotion {
		font-size: 90px;
		padding-top: 80px;/*header高さ分差し引き*/
	}
}

/* 横長時はブラウザ高さで文字サイズvh指定 */
@media ( max-width: 767px ) and ( orientation: landscape ) {
	#top_promotion .head_promotion {
		font-size: 11.5vh;
	}
}
@media ( min-width: 768px ) and ( orientation: landscape) {
	#top_promotion .head_promotion {
		font-size: 9vh;
	}
}
/* 1280px以上は向き関係なく一律の文字サイズ 
@media ( min-width: 1280px ) {
	#top_promotion .head_promotion {
		font-size: 90px;
	}
}
*/

/* TEST */
/*
#top_promotion:after {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 5px 1em;
	z-index: 99;
}
@media screen and ( orientation: portrait ) {
	#top_promotion:after {
		content: "portrait";
		background-color: #c00;
	}
}
@media screen and ( orientation: landscape ) {
	#top_promotion:after {
		content: "landscape";
		background-color: #00c;
	}
}
*/

/* 画面いっぱいに展開するので余白は既に取られてる形なので、続くsectionの上マージンは除去 */
#top_promotion + .section {
	margin-top: 0 !important;
}

/* #top_promotion テキストエフェクト
----------------------------------------------- */
#top_promotion {
	overflow: hidden;
}
#top_promotion .eff_text span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1em;
	height: 1em;
	transform-origin: center center;
	opacity: 0;
}
#top_promotion .eff_text span.is-active {
	animation: top_text_anime .5s forwards;
}
@keyframes top_text_anime {
	0% {
		opacity: 0;
		transform-origin: center center;/*無いとEdgeで位置ずれ*/
		transform: scale(4);
  		filter: blur(5px);
  	}
	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}