@charset "UTF-8";

/* =======================================================================================
	共通アニメーション
======================================================================================= */

.play.ttl-line-move {
	animation: ttl-line 1s forwards;
}

/* keyframes */
@keyframes ttl-line {
	0% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}

/* 線のアニメーションカスタマイズ（2番目） */
.ttl-line-02 .play.ttl-line-move {
	animation: ttl-line-02 1s forwards;
}

/* keyframes */
@keyframes ttl-line-02 {
	0% {
		opacity: 0;
		width: 0;
	}

	100% {
		opacity: 1;
		width: 100%;
	}
}

/* 文字を順番に出す */

.slidefade {
	position: relative;
	left: -5px;
	opacity: 0;
}

.play.slidefade {
	animation: slidefade 1s forwards;
}

/* keyframes */
@keyframes slidefade {
	0% {
		opacity: 0;
		left: -5px;
	}

	100% {
		left: 0;
		opacity: 1;
	}
}

/* =======================================================================================
	FV
======================================================================================= */

/* header
========================================================================== */

.fv-changed .header {
	animation: header-slidein 2.5s forwards;
}

@keyframes header-slidein {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	60% {
		opacity: 0;
	}
}

/* FV-背景
========================================================================== */

.fv-changed .fv-bg:after {
	animation: fv-bg-zoom 5.0s cubic-bezier(.4, 0, .2, 1);
}

@keyframes fv-bg-zoom {
	0% {
		transform: matrix3d(1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				0, 0, 0, 0.95);
	}

	100% {
		transform: matrix3d(1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				0, 0, 0, 1.0);
	}
}

/* FV-セル
========================================================================== */

.fv-changed.cell {
	animation: cell 4.5s forwards;
}

@media screen and (max-width:1919px) {
	.fv-changed.cell {
		animation: cell-pc 4.5s forwards;
	}

}

@media screen and (max-width:1080px) {
	.fv-changed.cell {
		animation: cell-tb 4.5s forwards;
	}

}

@media screen and (max-width:768px) {
	.fv-changed.cell {
		animation: cell-ipad 4.5s forwards;
	}

}

@media screen and (max-width:740px) {
	.fv-changed.cell {
		animation: cell-sp 4.5s forwards;
	}
}

@keyframes cell {
	0% {
		top: 35%;
		left: 30%;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		top: 14%;
		left: 11%;
		opacity: 1;
	}
}

@keyframes cell-pc {
	0% {
		top: 35%;
		left: 30%;
		opacity: 0;
		transform: scale(1.25);
	}

	40% {
		opacity: 1;
	}

	100% {
		top: 22%;
		left: 8%;
		opacity: 1;
	}
}

@keyframes cell-tb {
	0% {
		top: 35%;
		left: 30%;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		top: 16%;
		left: 3%;
		opacity: 1;
	}
}

@keyframes cell-ipad {
	0% {
		top: 35%;
		left: 30%;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		top: calc(200px + (280 - 200) * (100vw - 740px) / (768 - 740));
		left: -3%;
		opacity: 1;
	}
}

@keyframes cell-sp {
	0% {
		top: 35%;
		left: 30%;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		top: calc(280px + (420 - 280) * (100vw - 375px) / (740 - 375));
		left: -2%;
		opacity: 1;
	}
}


/* FV-テキスト
========================================================================== */

.fv-changed .fv-ttl span {
	animation: span-slidein 2.5s forwards;
}

.fv-changed .fv-en span {
	animation: span-slidein-en 2.5s forwards;
}

/* タイミングをずらす */
.fv-changed .fv-span-slidein span:nth-of-type(2) {
	animation-delay: .05s;
}

.fv-changed .fv-span-slidein span:nth-of-type(3) {
	animation-delay: .1s;
}

.fv-changed .fv-span-slidein span:nth-of-type(4) {
	animation-delay: .15s;
}

.fv-changed .fv-span-slidein span:nth-of-type(5) {
	animation-delay: .2s;
}

.fv-changed .fv-span-slidein span:nth-of-type(6) {
	animation-delay: .25s;
}

.fv-changed .fv-span-slidein span:nth-of-type(7) {
	animation-delay: .3s;
}

.fv-changed .fv-span-slidein span:nth-of-type(8) {
	animation-delay: .35s;
}

.fv-changed .fv-span-slidein span:nth-of-type(9) {
	animation-delay: .4s;
}

.fv-changed .fv-span-slidein span:nth-of-type(10) {
	animation-delay: .45s;
}

.fv-changed .fv-span-slidein span:nth-of-type(11) {
	animation-delay: .5s;
}

.fv-changed .fv-span-slidein span:nth-of-type(12) {
	animation-delay: .55s;
}

.fv-changed .fv-span-slidein span:nth-of-type(13) {
	animation-delay: .6s;
}

.fv-changed .fv-span-slidein span:nth-of-type(14) {
	animation-delay: .65s;
}

.fv-changed .fv-span-slidein span:nth-of-type(15) {
	animation-delay: .7s;
}

.fv-changed .fv-span-slidein span:nth-of-type(16) {
	animation-delay: .75s;
}

.fv-changed .fv-span-slidein span:nth-of-type(17) {
	animation-delay: .8s;
}

.fv-changed .fv-span-slidein span:nth-of-type(18) {
	animation-delay: .85s;
}

.fv-changed .fv-span-slidein span:nth-of-type(19) {
	animation-delay: .9s;
}

.fv-changed .fv-span-slidein span:nth-of-type(20) {
	animation-delay: .95s;
}

.fv-changed .fv-span-slidein span:nth-of-type(21) {
	animation-delay: 1.0s;
}

.fv-changed .fv-span-slidein span:nth-of-type(22) {
	animation-delay: 1.05s;
}

.fv-changed .fv-span-slidein span:nth-of-type(23) {
	animation-delay: 1.1s;
}

.fv-changed .fv-span-slidein span:nth-of-type(24) {
	animation-delay: 1.15s;
}

.fv-changed .fv-span-slidein span:nth-of-type(25) {
	animation-delay: 1.2s;
}

.fv-changed .fv-span-slidein span:nth-of-type(26) {
	animation-delay: 1.25s;
}

.fv-changed .fv-span-slidein span:nth-of-type(27) {
	animation-delay: 1.3s;
}

.fv-changed .fv-span-slidein span:nth-of-type(28) {
	animation-delay: 1.35s;
}

.fv-changed .fv-span-slidein span:nth-of-type(29) {
	animation-delay: 1.4s;
}

.fv-changed .fv-span-slidein span:nth-of-type(30) {
	animation-delay: 1.45s;
}

.fv-changed .fv-span-slidein span:nth-of-type(31) {
	animation-delay: 1.5s;
}

.fv-changed .fv-span-slidein span:nth-of-type(32) {
	animation-delay: 1.55s;
}

.fv-changed .fv-span-slidein span:nth-of-type(33) {
	animation-delay: 1.6s;
}

.fv-changed .fv-span-slidein span:nth-of-type(34) {
	animation-delay: 1.65s;
}

.fv-changed .fv-span-slidein span:nth-of-type(35) {
	animation-delay: 1.7s;
}

.fv-changed .fv-span-slidein span:nth-of-type(36) {
	animation-delay: 1.75s;
}

.fv-changed .fv-span-slidein span:nth-of-type(37) {
	animation-delay: 1.8s;
}

.fv-changed .fv-span-slidein span:nth-of-type(38) {
	animation-delay: 1.85s;
}

.fv-changed .fv-span-slidein span:nth-of-type(39) {
	animation-delay: 1.9s;
}

.fv-changed .fv-span-slidein span:nth-of-type(40) {
	animation-delay: 1.95s;
}

.fv-changed .fv-span-slidein span:nth-of-type(41) {
	animation-delay: 2.0s;
}

.fv-changed .fv-span-slidein span:nth-of-type(42) {
	animation-delay: 2.05s;
}

.fv-changed .fv-span-slidein span:nth-of-type(43) {
	animation-delay: 2.10s;
}

.fv-changed .fv-span-slidein span:nth-of-type(44) {
	animation-delay: 2.15s;
}

.fv-changed .fv-span-slidein span:nth-of-type(45) {
	animation-delay: 2.2s;
}

.fv-changed .fv-span-slidein span:nth-of-type(46) {
	animation-delay: 2.25s;
}

.fv-changed .fv-span-slidein span:nth-of-type(47) {
	animation-delay: 2.3s;
}

.fv-changed .fv-span-slidein span:nth-of-type(48) {
	animation-delay: 2.35s;
}

.fv-changed .fv-span-slidein span:nth-of-type(49) {
	animation-delay: 2.4s;
}

.fv-changed .fv-span-slidein span:nth-of-type(50) {
	animation-delay: 2.45s;
}

@keyframes span-slidein {
	40% {
		transform: translate(10px, 0);
		opacity: 0;
		margin-right: 0.1em;
	}

	60% {}

	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes span-slidein-en {
	40% {
		transform: translate(15px, 0);
		opacity: 0;
		margin-right: 0.1em;
	}

	60% {}

	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

.fv-changed .fv-subttl span {
	animation: subttl-slidein 3.0s forwards;
	display: block;
	opacity: 0;
}

.fv-changed .fv-subttl span:nth-child(1) {
	animation-delay: 0.5s;
}

.fv-changed .fv-subttl span:nth-child(2) {
	animation-delay: 0.75s;
}

.fv-changed .fv-subttl span:nth-child(3) {
	animation-delay: 1.0s;
}

.fv-changed .fv-subttl span:nth-child(4) {
	animation-delay: 1.25s;
}

@keyframes subttl-slidein {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1.0;
		transform: translateY(0);
	}
}

/* =======================================================================================
	top-scroll
======================================================================================= */

.scroll::after {
	animation: scroll-move 2s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes scroll-move {
	0% {
		opacity: 1;
		transform: scale(1, 0);
		transform-origin: 0 0;
	}

	30% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}

	30.1%,
	70% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}

	100% {
		opacity: 0;
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}

/* =======================================================================================
	top(index.html)
======================================================================================= */

/* top-物件情報タイトル
========================================================================== */

.play.top-ttl-line-move {
	animation: top-ttl-line-move 1s forwards;
}

/* keyframes */
@keyframes top-ttl-line-move {
	0% {
		opacity: 0;
		width: 0;
	}

	100% {
		opacity: 1;
		width: 100%;
	}
}

.top-ttl-slidefade {
	position: relative;
	left: -5px;
	opacity: 0;
}

.play.top-ttl-slidefade {
	animation: top-ttl-slidefade 1s forwards;
}

/* keyframes */
@keyframes top-ttl-slidefade {
	0% {
		opacity: 0;
		left: -5px;
	}

	100% {
		left: 0;
		opacity: 1;
	}
}

/* top-共通-フェードアップ
========================================================================== */

.top-cmn-fadeup {
	opacity: 0;
}

.play.top-cmn-fadeup {
	animation: top-cmn-fadeup 1.25s forwards;
}

@keyframes top-cmn-fadeup {
	0% {
		opacity: 0;
		transform: translate(0px, 10px);
		-ms-filter: blur(3px);
		filter: blur(3px);
	}

	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

/* .order-delay以下の要素のアニメーションを順番に遅延する */
.order-delay .play.top-cmn-fadeup:nth-child(1) {
	animation-delay: 0.25s;
}

.order-delay .play.top-cmn-fadeup:nth-child(2) {
	animation-delay: 0.35s;
}

.order-delay .play.top-cmn-fadeup:nth-child(3) {
	animation-delay: 0.45s;
}

.order-delay .play.top-cmn-fadeup:nth-child(4) {
	animation-delay: 0.55s;
}

.order-delay .play.top-cmn-fadeup:nth-child(5) {
	animation-delay: 0.65s;
}

/* top-共通セクション-英字タイトル
========================================================================== */

.play.top-cmn-area-en:after {
	opacity: 0;
	animation: ttl-cell 1.5s forwards;
}

@keyframes ttl-cell {
	0% {
		opacity: 0;
		transform: translate(0px, 30px);
		-ms-filter: blur(3px);
		filter: blur(3px);
		transform: rotate(-90deg);
	}

	30% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

/* top-共通セクション-画像
========================================================================== */

.play.top-cmn-img::after {
	animation: top-cmn-img 3.0s forwards;
}

@keyframes top-cmn-img {
	0% {
		transform: matrix3d(1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				0, 0, 0, 0.95);
		-ms-filter: blur(3px);
		filter: blur(3px);
	}

	100% {
		transform: matrix3d(1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				0, 0, 0, 1.0);
		opacity: 1;
	}
}

/* 背景画像のマスク左から */
.play.top-cmn-img:before {
	animation: top-cmn-mask-left 1.25s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes top-cmn-mask-left {
	100% {
		transform: translateX(100%);
	}
}

/* 背景画像のマスク右から */
.reverse .play.top-cmn-img:before {
	animation: top-cmn-mask-right 1.25s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes top-cmn-mask-right {
	100% {
		transform: translateX(-100%);
	}
}

/* top-採用情報
========================================================================== */

.play.top-recruit-bg {
	animation: top-recruit-bg 2.5s cubic-bezier(.4, 0, .2, 1);
}

@keyframes top-recruit-bg {
	0% {
		transform: matrix3d(1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				0, 0, 0, 0.925);
	}

	100% {
		transform: matrix3d(1, 0, 0, 0,
				0, 1, 0, 0,
				0, 0, 1, 0,
				0, 0, 0, 1.0);
	}
}

/* 背景画像のマスク上から */
.play.top-recruit:before {
	animation: top-recruit-mask-top 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes top-recruit-mask-top {
	100% {
		transform: translateY(100%);
	}
}

/* snsアイコン */

.top-sns-item:hover {
	animation: rotation 1s;
}

@keyframes rotation {
	0% {
		transform: rotateZ(0);
	}

	100% {
		transform: rotateZ(360deg);
	}
}