@charset "UTF-8";

/*ビジュアル完成前*/

div#header_t{
	/*background-color: #77bbff;*/
}
div#header_t>div{
	position: relative;
	margin: 0 auto;
	background-image: url(./img/header_t2.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	container-type: inline-size;
}
.pc_view div#header_t>div{
	min-width: 1200px;
}
.pc_view div#header_t>div:before{
	content: "";
	display: block;
	padding-top: 50%;
}
.sm_view div#header_t>div{
	background-image: url(./img/header_t2_sm.jpg);
	height: 640px;
}

div#logo_t{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
}
div#logo_t{
	perspective: 1200px;
	perspective-origin: center 40%;
	transform-style: preserve-3d;
}
.pc_view div#logo_t{
	width: 100%;
	height: 90%;
	/*background: rgba(0,0,0,.2);*/
}
.sm_view div#logo_t{
	width: 100%;
	height: 72%;
	/*background: rgba(0,0,0,.2);*/
}

div#logo_t>div:nth-child(1){
	position: absolute;
	height: 10%;
	bottom: -5%;
	left: 50%;
	background-color: rgba(0,100,150,.4);
	border-radius: 50%;
	border: solid 10%;
	transform: translateX(-50%) scale(0.8);
	opacity: 0;
	transition: opacity .7s .3s;
}
.sm_view div#logo_t.show_logo>div:nth-child(1){
	display: none !important;
}

div#logo_t>div:nth-child(2){
	position: relative;
	display: inline-block;
	background-image: url(./img/logo_t.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
	/*background-color: rgba(0,0,0,.2);*/

	height: 100%;

	transform: translateY(-120%) scaleX(1) scaleY(1);
	transform-origin: center bottom;
	will-change: transform;
	
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1));
}

.pc_view div#logo_t>div:nth-child(1),
.pc_view div#logo_t>div:nth-child(2){
	width: clamp(700px, 50%, 1000px);
	/*background-color: rgba(0,0,0,.2);*/
}
.sm_view div#logo_t>div:nth-child(1),
.sm_view div#logo_t>div:nth-child(2){
	width: 96%;
	/*background-color: rgba(0,0,0,.2);*/
}

/* クラス付加でロゴ出現 */
div#logo_t.show_logo>div:nth-child(1){
	animation: shadowBounceReal 1.2s 0s forwards;
}
@keyframes shadowBounceReal {
	0% {
		/* 開始：画面外から落下 */
		opacity: 0;
		transform: translateX(-50%) scale(0.8);
		animation-timing-function: ease-in;
	}
	20% {
		/* 開始：画面外から落下 */
		opacity: 0;
		transform: translateX(-50%) scale(0.8);
		animation-timing-function: ease-in;
	}
	40% {
		/* 1回目接地：グシャッと潰れる */
		opacity: 1;
		transform: translateX(-50%) scale(.9);
		animation-timing-function: ease-out;
	}
	55% {
		/* 1回目跳ね：上に伸びながら浮く */
		opacity: 1;
		transform: translateX(-50%) scale(.7);
		animation-timing-function: ease-in;
	}
	70% {
		/* 2回目接地：軽く潰れる */
		opacity: 1;
		transform: translateX(-50%) scale(.85);
		animation-timing-function: ease-out;
	}
	85% {
		/* 2回目跳ね：わずかに浮く */
		opacity: 1;
		transform: translateX(-50%) scale(.75);
		animation-timing-function: ease-in;
	}
	100% {
		/* 静止：元の形へ */
		opacity: 1;
		transform: translateX(-50%) scale(.8);
	}
}

div#logo_t.show_logo>div:nth-child(2){
	animation: logoBounceReal 1.2s 0s forwards;
}
@keyframes logoBounceReal {
	0% {
		/* 開始：画面外から落下 */
		transform: translateY(-120%) scaleY(1.1);
		animation-timing-function: ease-in;
	}
	40% {
		/* 1回目接地：グシャッと潰れる */
		transform: translateY(0%) scaleY(0.7) scaleX(1.3);
		animation-timing-function: ease-out;
	}
	55% {
		/* 1回目跳ね：上に伸びながら浮く */
		transform: translateY(-30%) scaleY(1.1) scaleX(0.9);
		animation-timing-function: ease-in;
	}
	70% {
		/* 2回目接地：軽く潰れる */
		transform: translateY(0%) scaleY(0.9) scaleX(1.1);
		animation-timing-function: ease-out;
	}
	85% {
		/* 2回目跳ね：わずかに浮く */
		transform: translateY(-8%) scaleY(1.02);
		animation-timing-function: ease-in;
	}
	100% {
		/* 静止：元の形へ */
		transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

/* ロゴループ用アニメーション */
div#logo_t.loop_active>div:nth-child(1){
	/*cursor: pointer;*/
	/* 3秒サイクル、動きの初動を少し鋭く設定 */
	animation: shadowPuruFast 3s cubic-bezier(0.2, 0, 0.3, 1) infinite;
}
@keyframes shadowPuruFast {
	0% {
		opacity: 1;
		transform: translateX(-50%) scale(.8);
	 }

	65% {
		opacity: 1;
		transform: translateX(-50%) scale(.8);
	 }
	70% {
		transform: translateX(-50%) scale(.86);
	}/* 鋭く溜める */
	77% {
		transform: translateX(-50%) scale(.74);
	}/* シュンと跳ねる */
	83% {
		transform: translateX(-50%) scale(.84);
	}/* 鋭く接地プル1 */
	89% {
		transform: translateX(-50%) scale(.77);
	}/* プル2 */
	95% { 
		transform: translateX(-50%) scale(.82);
	}/* プル3 */
	100% { 
		opacity: 1;
		transform: translateX(-50%) scale(.8);
	}/* 収束 */

}


div#logo_t.loop_active>div:nth-child(2){
	/*cursor: pointer;*/
	/* 3秒サイクル、動きの初動を少し鋭く設定 */
	animation: miniPuruFast 3s cubic-bezier(0.2, 0, 0.3, 1) infinite;
	transform-origin: center bottom;
}
@keyframes miniPuruFast {
	0% { transform: scale(1, 1) translateY(0);}

	65% { transform: scale(1, 1) translateY(0);}
	70% { transform: scale(1.1, 0.9) translateY(0); }
	77% { transform: scale(0.95, 1.05) translateY(-6%);}
	83% { transform: scale(1.08, 0.92) translateY(0);}
	89% { transform: scale(0.98, 1.02) translateY(-1%);}
	95% { transform: scale(1.02, 0.98) translateY(0);}
	100% { transform: scale(1, 1) translateY(0);}

}



/* ロゴ飛び去り */
div#logo_t.fly_out>div:nth-child(2){
	animation: logoFlyOut 1.2s cubic-bezier(.22,.61,.36,1) forwards;
	transform-origin: center 40%;
	will-change: transform;
}

@keyframes logoFlyOut {
	0% {
		transform: translateY(0%) scale(1) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-30%) scale(0) rotate(-1080deg);
		opacity: .5;
	}
}

/* 影も連動 */
div#logo_t.fly_out>div:nth-child(1){
	animation: shadowFlyOut .6s ease-in forwards;
}

@keyframes shadowFlyOut {
	0% {
		transform: translateX(-50%) scale(.8);
		opacity: 1;
	}
	2% {
		transform: translateX(-50%) scale(.8);
		opacity: 0;
	}
}