@charset 'utf-8';

/* top
------------------------------------------------ */
#top-loading{position: fixed; background-color: #000; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 99; display: flex; justify-content: center; align-items: center;}
.top-loading--logo{ max-width: 80px;  -webkit-animation: loading 2s infinite linear; animation: loading 2s infinite linear; }
/* Safari 4.0 - 8.0 */
@-webkit-keyframes loading {
	0% { -webkit-transform: rotate(0deg); }
	50% { -webkit-transform: rotate(180deg); }
	100% { -webkit-transform: rotate(360deg); }
}

/* Standard syntax */
@keyframes loading {
	0% { -webkit-transform: rotate(0deg); }
	50% { -webkit-transform: rotate(180deg); }
	100% { -webkit-transform: rotate(360deg); }
}
.overflow{ overflow: hidden; }
#top-visual{ position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; overflow: hidden; z-index: 9; }
#top-visual #video{ width: 100%; height: 100%; position: absolute; left: 50%; top:50%; transform: translate(-50% , -50%); background-color:#000; }
#top-visual #seekbar{ position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: red; z-index: 2; -webkit-transition: width 3s linear; transition: width 3s linear; }

@media screen and (max-width: 768px) {
	#top-visual{ background-color: #000; }
	#top-visual #video{ width: 100% !important; height: auto !important; }
}

/* top welcome
------------------------------------------------ */
#top-welcome{ position: relative; width: 100%; height: calc(100vh - 66px); background: url(../../img/top/top_welcome.jpg) no-repeat center center / cover; }
.top-welcome__desc{ width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.top-welcome__desc .animate{ -webkit-transition-property: all;transition-property: all;-webkit-transition-duration: 1s;transition-duration: 1s;-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);transition-timing-function: cubic-bezier(.215, .61, .355, 1);-webkit-transition-delay: 0s;transition-delay: 0s;-webkit-transform: translate3d(0,20px,0) scale(1.0);transform: translate3d(0,20px,0) scale(1.0);opacity: 0; }
.top-welcome__desc .animate.inviewed-up{ -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 1; }

.top-welcome__desc--logo{ max-width: 110px; margin: 0 auto; }
.top-welcome__desc--en{ margin-top: 22px; font-size: 7.3rem; font-weight: 600; color:#fff; letter-spacing: 0.06em; line-height: 1.23; font-family: "Raleway-Bold"; }
.top-welcome__desc--txt{ margin-top: 37px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.22em; line-height: 2.91; color:#fff; }
.top-welcome__desc--txt b{ font-size: 3rem; font-weight: 400; line-height: 1; }


@media screen and (max-width: 1024px) and (min-width: 769px) {
	.top-welcome__desc--en{ font-size: 5rem; }
}

@media screen and (max-width: 768px) {
	#top-welcome{ height: auto; background: none; }
	.top-welcome__block { position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
	/*.top-welcome__desc { position: relative; left: 0; top: 0; transform: inherit; }*/
	.top-welcome__desc--logo{ max-width: 7.5%; }
	.top-welcome__desc--en{ margin-top: 10px; font-size: 5.46666667vw; line-height: 1.2; letter-spacing: 0.06em; }
	.top-welcome__desc--txt{ margin-top: 7px; font-size: 2.66666667vw; line-height: 1.9; }
	.top-welcome__desc--txt b{ font-size: 3.6vw; line-height: 1.93; }
}

/* top work
------------------------------------------------ */
#top-work{}
.top-work__head{ position: relative; }
.top-work__head--txt{ font-family: "NotoSansCJKjp"; width: 100%; position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; /*left: 50%; top: 50%; transform: translate(-50%, -50%);*/ font-size: 4.351vw; letter-spacing: 0.02em; line-height: 1.48; color:#fff; text-align: center; text-shadow: 7px 7px 7px rgba(0,0,0,0.75); }
.top-work__head--txt span{ display: table; margin: 0 auto; padding: 0 0.25em; background-color:rgba(0,0,0,0.6); }
.top-work__head--txt span+span{ margin-top: 1.8%; }
.top-work__flow{ display: flex; flex-wrap: wrap; }
.top-work__flow--thumb{ width: 50%; position: relative; }
.top-work__flow--thumb figcaption{ padding: 0 10px; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); font-size: 2.5rem; font-weight: 400; color:#fff; text-align: center; letter-spacing: 0.18em; line-height: 2.1; text-shadow: 4px 4px 7px rgba(0,0,0,0.75); }
.top-work__flow--desc{ width: 50%; background-color: #fff; }
.top-work__flow--desc .inner{ padding: 73px 15px 10px; max-width: 520px; margin: 0 auto; }
.top-work__flow--title{ font-family: "NotoSansCJKjp"; margin-bottom: 46px; font-size: 5.7rem; font-weight: 600; text-align: center; letter-spacing: 0.05em; line-height: 1.5; }
.top-work__flow--txt{ font-size: 1.6rem; letter-spacing: 0.075em; line-height: 2.35; }
.top-work__flow--txt+.top-work__flow--txt{ margin-top: 40px; }

@media screen and (min-width: 769px) {
	.top-work--bnr { margin-top: 0; }
	.top-work__flow--desc{ min-height: 679px; }
	.top-work__flow--thumb{ background-repeat: no-repeat; background-position: center center; background-size: cover; }
	.top-work__flow--thumb.thumb1{ background-image: url(../../img/top/top_3.jpg); }
	.top-work__flow--thumb.thumb2{ background-image: url(../../img/top/top_4.jpg); }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
	.top-work__head--txt{ font-size: 4.4rem; }	
	.top-work__flow--title{ font-size: 4rem; }
	.top-work__flow--txt{ font-size: 1.4rem; }
	.top-work__flow--thumb figcaption{ font-size: 1.8rem; }
}

@media screen and (max-width: 768px) {
	.top-work__head--txt{ font-size: 4.4vw; line-height: 1.34; margin-top: 0; position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
	.top-work__head--txt span+span{ margin-top: 2%; }
	.top-work__flow{ flex-direction: row; }
	.top-work__flow+.top-work__flow{ margin-top: 12%; }
	.top-work__flow--thumb{ order:1; width: 100%; }
	.top-work__flow--desc{ order:2; width: 100%; }
	.top-work__flow--desc .inner{ max-width: 100%; padding: 0 37px 0; margin-top: 8%; }
	.top-work__flow--thumb figcaption{ font-size: 4vw; line-height: 1.9rem; }
	.top-work__flow--title{ margin-bottom: 8%; font-size: 6.8vw; }
	.top-work__flow--txt{ font-size: 2.66666667vw; line-height: 2; }
	.top-work__flow--txt+.top-work__flow--txt{ margin-top: 18px; }
	.top-work--bnr{ margin-top: 12%; }
}