@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');



html {
	background: #000;
}
body {
	font-size: 12px;
	background-image: url(../img/bg7.jpg);
	background-repeat: no-repeat;
	background-position: left 50% bottom -1px;
	background-size: 100% auto;
	background-color: #000;
}

* {
	backface-visibility: hidden;
}
img {
	image-rendering: optimizeSpeed;
}

#wrap {
	position: relative;
	z-index: 100;
}

.pc {
	display: none;
}








.spacer {
	height: 300px;
}
.spacer.long {
	height: 90vh;
}
.spacer.mini {
	position: relative;
	max-width: calc(100vw - 90px);
	height: 1px;
	z-index: 100;
	margin: 70px auto;
	background: #000;
}



header.global {
	position: fixed;
	width: 100%;
	height: 100px;
	left: 0;
	top: 0;
	z-index: 5000;
	visibility: hidden;
}
header.global span {
	position: absolute;
	width: 145px;
	height: 15px;
	left: 50%;
	top: 18px;
	margin: 0 0 0 -72px;
	background: url(../img/ci.svg) 0 0 no-repeat;
	background-size: 145px auto;
}



header:not(.global) {
	position: relative;
	z-index: 300;
	mix-blend-mode: difference;
}
header h2 img {
	width: auto;
}



nav.global {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 50vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 11000;
	background: rgba(0,0,0,1);
}
nav.global {
}
nav.global ul {
	position: relative;
	width: 100%;
	text-align: center;
}
nav.global li {
	position: relative;
	margin: 0 auto;
}
nav.global > ul li +  li {
	margin-top: 20px;
}
nav.global > ul a {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 13px;
	letter-spacing: 2px;
	font-weight: 500;
	font-family: Montserrat, sans-serif;
	text-decoration: none;
}


nav.global i {
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	left: 0;
	bottom: -2px;
	background: #fff;
}


nav.global .sub {
	margin: 50px 0 0;
}
nav.global .sub ul a {
	display: block;
	display: inline-block;
	color: #fff;
	font-size: 11px;
	letter-spacing: 1px;
	font-weight: 500;
	font-family: Montserrat, sans-serif;
	text-decoration: none;
}
nav.global .sub li +  li {
	margin-top: 15px;
}





#menu {
	position: fixed;
	display: block;
	width: 49px;
	height: 42px;
	left: 13px;
	top: 0;
	z-index: 11100;
}
#menu i {
	position: absolute;
	display: block;
	width: 35px;
	height: 1px;
	left: 7px;
	top: 50%;
	background: #fff;
}
#menu i:nth-child(1) {
	margin-top: -5px;
}
#menu i:nth-child(2) {
	margin-top: -1px;
}
#menu i:nth-child(3) {
	margin-top: 3px;
}






#wrap > footer {
	padding: 0 0 25px;
	text-align: center;
	color: #fff;
}
#wrap > footer .copyright {
	font-size: 9px;
	font-family: Montserrat, sans-serif;
	letter-spacing: 1px;
}
#wrap > footer nav {
	margin:  0 0 20px;
}
#wrap > footer nav ul {
	display: flex;
	justify-content: center;
}
#wrap > footer nav ul a {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 11px;
	letter-spacing: 1px;
	font-weight: 400;
	font-family: Montserrat, sans-serif;
	text-decoration: none;
}
#wrap > footer nav li + li::before {
	content: "";
	position: relative;
	display: inline-block;
	width: 1px;
	height: 10px;
	left: 0;
	top: 1px;
	margin: 0 15px;
	background: #fff;
}






section:not(#intro) {
	position: relative;
	z-index: 800;
	margin: 0 45px;
}


h3 {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 3px;
	line-height: 1.8;
}

section article p {
	line-height: 2.0;
}

section .star {
	color: #fff;
}

section figure span {
	position: absolute;
	left: 0;
	top: 0;
}
section figure .text {
	opacity: 0;
}













#intro {
	height: 100vh;
	background: url(../img/bg1.jpg) 50% 0 no-repeat;
	background-size: 280vw auto;
}
#intro .track {
	position: fixed;
	width: 1px;
	height: 300px;
	left: 50%;
	top: -302px;
	z-index: 10000;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,2455,0.8));
}





/* ---------------------------------------------------------------------------------------------------- */
/* Sections */


header h2 strong {
	position: relative;
	display: inline-block;
	letter-spacing: 2px;
	color: #fff;
	font-size: 25px;
	font-weight: 500;
	font-family: Montserrat, sans-serif;
}
header h2 strong:before {
	content: "";
	position: absolute;
	display: block;
	width: calc(100% + 12px);
	height: 2px;
	left: -6px;
	bottom: -7px;
	background: #fff;
}





header.vision {
	height: 60px;
}
header.vision h2 img {
	height: 18px;
}

section.vision h3 {
	margin: 0 0 20px;
}
section.vision h3 img {
	width: 170px;
	height: auto;
}

section.vision figure {
	position: relative;
	margin: 35px auto 0;
	width: calc((100vw - 100px));
	height: calc((100vw - 100px) * 1.05);
}
section.vision figure img {
	width: 100%;
	height: auto;
}





header.value {
	height: 10px;
}
header.value h2 img {
	height: 18px;
}

section.value > figure {
	position: relative;
}

section.value ul {
}
section.value li {
	position: relative;
}
section.value li + li {
	margin-top: 5px;
}
section.value li + li:before {
	position: absolute;
	content: "";
	display: block;
	width: 1px;
	height: 9vw;
	left: 50%;
	top: 1.5vw;
	background: #000;
}


section.value figcaption {
	padding: 0 16px;
	font-size: 12px;
	line-height: 2.2;
}

section.value li figure:not(.sp) {
	display: none;
	position: relative;
	width: calc((100vw - 140px));
	height: calc((100vw - 140px) * 1);
	margin: 0 auto;
}
section.value li figure.nofx {
	height: auto;
}
section.value li figure.sp {
	position: relative;
	width: calc((100vw - 20px));
	height: calc((100vw - 20px) * 0.42);
	margin: 0 -35px -10vw;
}

section.value ul.sp {
	margin: 70px 0 0;
}
section.value ul.sp li + li {
	margin-top: 50px;
}
section.value ul.sp h5 {
	margin: 0 0 10px;
	padding: 0 0 12px;
	font-size: 14px;
	font-weight: 400;
	border-bottom: 1px solid #000;
}




header.service {
	height: 60px;
}
header.service h2 img {
	height: 18px;
}

section.service h3 {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
}
section.service h4 {
	position: absolute;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 2px;
}
section.service h3 br {
	display: none;
}


section.service .group1 {
	position: relative;
	margin-top: -5px;
}
section.service .group1 figure {
	position: relative;
	height: calc((100vw - 100px) * 0.558);
}
section.service .group1 h4 {
	position: absolute;
}
section.service .group1 h4:nth-of-type(1) {
	left: 0;
	top: 6vh;
}
section.service .group1 h4:nth-of-type(2) {
	right: 0;
	bottom: -1vh;
	text-align: right;
}


section.service .group1 + article {
	margin-top: 60px;
}


section.service .group2 {
	position: relative;
	margin: 10px 0 0;
}
section.service figcaption ul {
	padding: 12px 0 0;
	font-size: 12px;
	line-height: 1.8;
}
section.service .group2 figure {
	position: relative;
	width: calc((100vw - 120px) * 1);
	height: calc((100vw - 120px) * 1);
	margin: 20px auto 40px;
}

section.service .group2 h5 img {
	width: 100%;
	height: auto;
}
section.service .group2 h5.sp {
	position: absolute;
}
section.service .group2 h5.md {
	width: 120px;
	left: 50%;
	top: 5px;
}
section.service .group2 h5.cd {
	width: 50px;
	left: 0;
	top: 50vw;
}
section.service .group2 h5.td {
	width: 50px;
	right: 0;
	top: 50vw;
}


section.service .group2 figcaption h5 img {
	width: auto;
	height: 42px;
}

section.service .group2 figcaption + figcaption {
	margin-top: 40px;
}
section.service figcaption.md {
}
section.service figcaption.cd {
}
section.service figcaption.td {
}















header.team {
	height: 35px;
}
header.team h2 img {
	height: 17px;
}

section.team .team figure {
	position: relative;
	width: calc(100vw - 90px + ((100vw - 90px) * 0.178));
	height: calc((100vw - 90px + ((100vw - 90px) * 0.178)) * 0.4179);
	margin: 0 calc(((100vw - 90px) * 0.178 / -2));
}
section.team .team ul {
	position: relative;
	padding-bottom: 90px;
}
section.team .team li {
	position: relative;
}
section.team .team li + li {
	padding-top: 15vw;
}
section.team .team li + li:before {
	position: absolute;
	content: "";
	display: block;
	width: 10vw;
	height: 10vw;
	left: 50%;
	top: 5.55vw;
	margin-left: -5vw;
	background: url(../img/x.png) 50% 50% no-repeat;
	background-size: 10vw auto;
}

section.team .team li p {
	box-sizing: border-box;
	width: calc(100vw - 90px);
	margin-top: -6.75vw;
	padding: 10px;
	font-size: 12px;
	line-height: 2;
	border: 1px solid #000;
	border-top-width: 0;
}

section.team .team h3 {
	margin: 20px 0 0;
	text-align: center;
	font-size: 17px;
	line-height: 1.8;
}
section.team .team h3 span {
	position: relative;
	display: inline-block;
	font-weight: 700;
}
section.team .team h3 span:after {
	position: absolute;
	display: block;
	content: "";
	width: calc(100% + 10px);
	height: calc(100% - 20px);
	left: -5px;
	top: 11px;
	background: rgba(0,0,0,0.2);
	z-index: 1;
}


section.team .team ul:before {
	position: absolute;
	display: block;
	content: "";
	width: 1px;
	height: 60px;
	background: #000;
	left: 50%;
	bottom: 8px;
}
section.team .team ul:after {
	position: absolute;
	display: block;
	content: "";
	width: 11px;
	height: 8px;
	left: 50%;
	bottom: 0;
	margin-left: -5px;
	background: url(../img/arrow.png) 50% 0 no-repeat;
	background-size: 11px 8px;
}








section.team .member {
	margin: 60px 0 0;
}
section.team .member h4 {
	text-align: center;
}
section.team .member h4 strong {
	font-size: 20px;
	font-weight: 600;
	font-family: Montserrat, sans-serif;
	letter-spacing: 3px;
}


section.team .member ul {
	position: relative;
	margin: 40px 0 0;
}
section.team .member li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
section.team .member li + li {
	margin-top: 60px;
}
section.team .member figure img {
	width: 110px;
	height: auto;
}
section.team .member li dl {
	width: calc(100% - 110px - 20px);
}
section.team .member li dt {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 4px;
}
section.team .member li dt span {
	display: block;
	margin: 10px 0 0;
	font-size: 13px;
	letter-spacing: 0;
}
section.team .member li dt + dd {
	margin: 20px 0 0;
	font-size: 10px;
	line-height: 2;
}
section.team .member li p {
	width: 100%;
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #000;
	font-size: 12px;
	line-height: 2;
}










header.corporate {
	height: 60px;
}
header.corporate h2 img {
	height: 19px;
}

section.corporate dl {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 15px;
	line-height: 1.8;
	border-bottom: 1px solid #000;
}
section.corporate dl + dl {
	margin-top: 15px;
}
section.corporate dt {
	box-sizing: border-box;
	width: 90px;
	padding: 0 0 0 5px;
}
section.corporate dd {
	width: calc(100% - 90px);
}

section.corporate dl.access {
	display: block;
	border: none;
}
section.corporate dl.access dd {
	box-sizing: border-box;
	width: 100%;
	margin: 15px 0 0;
	padding: 0 5px;
}
section.corporate .address {
	margin: 0 0 10px;
}
section.corporate .map {
	height: 250px;
}

.alt-map {
	position: absolute;
	height: 250px;
	left: 0;
	top: 0;
	z-index: 110;
	mix-blend-mode: multiply;
	
	pointer-events: none;
}




section.partner {
	display: block;
}
section.partner ul {
	display: flex;
	flex-wrap: wrap;
	margin: 50px 0 0;
}
section.partner ul li {
	box-sizing: border-box;
	width: calc((100% - 30px) / 3);
}
section.partner ul li:nth-child(3n),
section.partner ul li:nth-child(3n + 2) {
	margin-left: 15px;
}
section.partner ul li:nth-child(n + 4) {
	margin-top: 15px;
}
section.partner img {
	width: 100%;
	height: auto;
	filter: grayscale();
}
section.partner span {
	display: block;
	margin: 20px 0;
	font-size: 10px;
}









header.works {
	height: 65px;
}

section.works article {
	position: relative;
}
section.works ul {
	position: relative;
	padding: 0 20px 45px;
}
section.works li {
}
section.works li figure {
	box-sizing: border-box;
	padding-top: calc(100% - 2px);
	border: 1px solid #e5e5e5;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition: all 300ms ease-out;
}
section.works li figure img {
	width: 100%;
	height: auto;
}
section.works li.contain figure {
	background-size: contain;
}

section.works li + li {
	margin-top: 30px;
}
section.works li figcaption {
	margin: 12px 0 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
}
section.works li p {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 2;
}

section.works li a {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
/*
section.works li a:hover img {
	filter: saturate(0);
}
section.works li a:hover figcaption {
	text-decoration: underline;
}
*/
section.works nav {
	padding: 0 20px;
}
section.works nav a {
	position: relative;
	display: block;
	height: 45px;
	line-height: 45px;
	text-align: center;
	font-size: 15px;
	color: #fff;
	background: #000;
	cursor: pointer;
	text-decoration: none;
}
section.works nav a::before {
	content: "";
	position: absolute;
	display: block;
	width: 12px;
	height: 1px;
	right: 0;
	top: 50%;
	background: #fff;
}
section.works nav i {
	content: "";
	position: absolute;
	display: block;
	width: 19px;
	height: 9px;
	right: -19px;
	top: calc(50% - 4.5px);
	background: url(../img/arrow_next_mini.svg) 100% 50% no-repeat;
	background-size: 7px 9px;
	transition: all 200ms ease-out;
}
section.works nav a i::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	right: left;
	top: 50%;
	background: #000;
}
/*
section.works nav a:hover i {
	width: 30px;
	right: -30px;
}
*/




/* ---------------------------------------------------------------------------------------------------- */
/* Contact Button */

section.contact nav {
	padding: 0 20px;
}
section.contact nav a {
	position: relative;
	display: block;
	height: 45px;
	line-height: 45px;
	text-align: center;
	font-size: 15px;
	color: #fff;
	background: #000;
	cursor: pointer;
	text-decoration: none;
}
section.contact nav a::before {
	content: "";
	position: absolute;
	display: block;
	width: 12px;
	height: 1px;
	right: 0;
	top: 50%;
	background: #fff;
}
section.contact nav i {
	content: "";
	position: absolute;
	display: block;
	width: 19px;
	height: 9px;
	right: -19px;
	top: calc(50% - 4.5px);
	background: url(../img/arrow_next_mini.svg) 100% 50% no-repeat;
	background-size: 7px 9px;
	transition: all 200ms ease-out;
}
section.contact nav a i::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	right: left;
	top: 50%;
	background: #000;
}







/* ---------------------------------------------------------------------------------------------------- */
/* Background */

body {
	background-size: 225vw auto;
}
#background {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}
#background > div {
	position: absolute;
	width: 100%;
	min-height: 100vh;
	z-index: 5;
	background-size: 125vw auto;
	background-repeat: no-repeat;
	mix-blend-mode: screen;
}

#background .vision {
	height: 84vw;
	margin-top: -34vw;
	background-image: url(../img/bg2.jpg);
	background-position: 100% 0;
}

#background .value {
	height: 85vw;
	margin-top: -35vw;
	background-image: url(../img/bg3.jpg);
	background-position: 50% 0;
}

#background .service {
	height: 83vw;
	margin-top: -40vw;
	background-image: url(../img/bg4.jpg);
	background-position: 50% 0;
}

#background .team {
	height: 83vw;
	margin-top: -38vw;
	background-image: url(../img/bg5.jpg);
	background-position: 50% 0;
}

#background .member {
	height: 83vw;
	margin-top: -42vw;
	background-image: url(../img/bg6.jpg);
	background-position: 100% 0;
}

#background .corporate {
	height: 85vw;
	margin-top: -36vw;
	background-image: url(../img/bg3.jpg);
	background-position: 50% 0;
}





/* ---------------------------------------------------------------------------------------------------- */
/* Transition */


.motion img {
	width: 100%;
	height: auto;
}







header.global {
	transition: all 500ms linear;
	will-change: opacity;
	opacity: 0;
}
body.scrolled header.global {
	opacity: 1;
}
body.scrolled.ended header.global {
	opacity: 0;
}


nav.global {
	transform: translateX(-50vw);
	transition: all 300ms ease-out;
	will-change: transform;
}
body.opened-menu nav.global {
	transform: translateX(0);
}


nav.global li a {
	transition: opacity 300ms ease-out;
	will-change: opacity;
}
nav.global li i {
	transition: all 300ms ease-out;
	will-change: transform;
	transform: scale(0,1);
}

body[data-current=""]           nav.global li.top i,
body[data-current="vision"]     nav.global li.vision i,
body[data-current="works"]      nav.global li.works i,
body[data-current="value"]      nav.global li.value i,
body[data-current="service"]    nav.global li.service i,
body[data-current="team"]       nav.global li.team i,
body[data-current="member"]     nav.global li.member i,
body[data-current="corporate"]  nav.global li.corporate i,
body[data-current="partner"]    nav.global li.partner i {
	transform: scale(1,1);
}
/*
body[data-current="vision"]     nav.global li.vision a,
body[data-current="value"]      nav.global li.value a,
body[data-current="service"]    nav.global li.service a,
body[data-current="team"]       nav.global li.team a,
body[data-current="member"]     nav.global li.member a,
body[data-current="corporate"]  nav.global li.corporate a {
	opacity: 0.3;
}
*/



/*
#intro .track {
	transform-origin: left top;
	will-change: transform, opacity;
	transition: opacity 600ms linear;
	opacity: 0;
}
body.top #intro .track {
	opacity: 1;
	animation: shine 1300ms infinite ease-in;
}

@keyframes shine {
	0% {
		transform: translateY(0);
	}
	15% {
		transform: translateY(40vh);
		opacity: 0;
	}
	100% {
		transform: translateY(40vh);
		opacity: 0;
	}
}
*/


#intro .track {
	will-change: transform;
}

body.loaded #intro .track {
	animation: shine 2500ms infinite ease-in;
}

@keyframes shine {
	0% {
		transform: translateY(0);
	}
	22% {
		transform: translateY(calc(100vh + 302px));
	}
	100% {
		transform: translateY(calc(100vh + 302px));
	}
}

body:not(.top) #intro .track {
	visibility: hidden;
}








#menu i {
	transition: transform 200ms ease-out;
	will-change: transform;
}

body.opened-menu #menu i:nth-child(2) {
	transform: scaleX(0);
}
body.opened-menu #menu i:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}
body.opened-menu #menu i:nth-child(3) {
	transform: translateY(-3px) rotate(-45deg);
}






div.map {
	transition: all 300ms linear;
	will-change: opacity;
	visibility: hidden;
	opacity: 0;
}
body.map div.map {
	visibility: visible;
	opacity: 1;
}



h1 {
	visibility: hidden;
}
body.loaded h1 {
	visibility: visible;
}
h1 {
	transition: all 500ms linear;
	will-change: opacity;
}
body.scrolled h1 {
	opacity: 0;
	visibility: hidden;
}
body.scrolled.ended h1 {
	opacity: 1;
	visibility: visible;
}








/*
body::before {
	position: absolute;
	content: "";
	display: block;
	width: 70px;
	height: 70px;
	left: calc(50% - 28px);
	top: calc(50% - 68px);
	z-index: 10000;
	opacity: 0.5;
	background: url(../img/logo_circle.svg) 50% 50% no-repeat;
	background-size: 100% auto;
}
*/


/*
#logo-bar {
	position: fixed;
	width: 20px;
	height: 20px;
	left: 50%;
	top: 50%;
	margin: -26px 0 0 -10px;
	z-index: 10;
	background: #fff;
}
*/

/*
#logo-n {
	position: fixed;
	width: 15px;
	height: 14px;
	left: calc(50% + 137px + 5px);
	top: calc(50% - 10px - 4px - 16px);
	z-index: 1000;
	background: url(../img/n.svg) 0 0 no-repeat;
	background-size: 15px auto;
}
*/




h1 {
	position: fixed;
	width: 230px;
	height: 27px;
	left: calc(50% - 115px);
	top: calc(var(--half-svh) + 15px);
	z-index: 1000;
	background: url(../img/logo_dn.svg) 0 0 no-repeat;
	background-size: 230px auto;
}


#logo-bar {
	position: fixed;
	width: 54px;
	height: 54px;
	left: calc(50%);
	top: calc(var(--half-svh));
	transform: translate(-50%, -50%);
	margin: -33px 0 0;
	z-index: 10;
	background: #fff;
	border-radius: 35px;
}
#logo-bar span {
	position: absolute;
	display: block;
	width: calc(54px * var(--scale-sp));
	height: calc(54px * var(--scale-sp));
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(var(--log-sp));
	background: #fff;
	border-radius: calc(27px * var(--scale-sp));
}

#logo-n {
	position: fixed;
	width: 15px;
	height: 14px;
	left: calc(50% + 27px + 2px);
	top: calc(var(--half-svh) - 27px - 33px);
	z-index: 1000;
	background: url(../img/n.svg) 0 0 no-repeat;
	background-size: 15px auto;
}






body.inited #logo-bar span {
	transition: transform 600ms ease-out;
}
body.content #logo-bar span {
	transition: transform 900ms ease-out;
	transform: translate(-50%,-50%) scale(1);
}


body.inited #logo-n {
	transition: transform 600ms ease-out, filter 300ms ease-out 0ms;
}
body.content #logo-n {
	transition: transform 600ms ease-out, filter 300ms ease-out 800ms;
	transform: translate(calc(50vw - (27px - 33px) - 58px), calc((var(--half-svh) * -1) + (27px - 33px) + 80px));
	filter: invert(1);
}



#menu i {
	transition: transform 300ms ease-out, filter 300ms ease-out 0ms;
}
body.content #menu i {
	transition: transform 300ms ease-out, filter 300ms ease-out 0ms;
	filter: invert(1);
}
body.content.opened-menu #menu i {
	filter: invert(0);
	transition: transform 300ms ease-out, filter 300ms ease-out 0ms;
}








body.hide-content #logo-bar,
body.hide-content #logo-n {
	transition-duration: 300ms;
}





/*
body.content #logo-n {
	transform: translate(calc(50vw - 137px - 25px), calc(-50vh + 20px + 65px));
}


@media screen and (min-height:600px) {
	#logo-bar,
	#logo-n {
		transition: all 800ms ease-out;
	}

	body.hide-content #logo-bar,
	body.hide-content #logo-n {
		transition-duration: 300ms;
	}
}
*/





section .star {
	transform: translate3d(0,0,0);
	transition: color 400ms linear;
	will-change: transform, color;
}




/*
section:not(#intro) {
	visibility: hidden;
}

body[data-active-nodes="vision"]    section.vision,
body[data-active-nodes="value"]     section.value,
body[data-active-nodes="service"]   section.service,
body[data-active-nodes="team"]      section.team,
body[data-active-nodes="member"]    section.member,
body[data-active-nodes="corporate"] section.corporate {
	visibility: visible !important;
}
*/


/*
section .star[data-key="1"] {
	animation: twinkle1 200ms alternate infinite ease;
}
section .star[data-key="2"] {
	animation: twinkle1 300ms alternate infinite ease;
}
section .star[data-key="3"] {
	animation: twinkle1 250ms alternate infinite ease;
}
section .star[data-key="4"] {
	animation: twinkle1 150ms alternate infinite ease;
}
section .star[data-key="5"] {
	animation: twinkle2 200ms alternate infinite ease;
}
section .star[data-key="6"] {
	animation: twinkle2 300ms alternate infinite ease;
}
section .star[data-key="7"] {
	animation: twinkle2 250ms alternate infinite ease;
}
section .star[data-key="8"] {
	animation: twinkle2 150ms alternate infinite ease;
}
@keyframes twinkle1 {
	0% {
		color: #f6f6f6;
	}
	100% {
		color: #aaa;
	}
}
@keyframes twinkle2 {
	0% {
		color: #aaa;
	}
	100% {
		color: #f6f6f6;
	}
}


section .star {
	animation-play-state: paused;
}

body[data-active-nodes="vision"]    section.vision    .star,
body[data-active-nodes="value"]     section.value     .star,
body[data-active-nodes="service"]   section.service   .star,
body[data-active-nodes="team"]      section.team      .star,
body[data-active-nodes="member"]    section.member    .star,
body[data-active-nodes="corporate"] section.corporate .star {
	animation-play-state: running;
}
*/


body[data-current*="vision"]     section.vision    .star,
body[data-current*="value"]      section.value     .star,
body[data-current*="service"]    section.service   .star,
body[data-current*="team"]       section.team      .star,
body[data-current*="member"]     section.member    .star,
body[data-current*="corporate"]  section.corporate .star,
body[data-current*="partner"]    section.partner   .star {
	color: #000;
}









section figure span {
	transition: all 400ms linear;
	will-change: opacity, filter;
	filter: invert(0%);
	transform: translate3d(0,0,0);
}
section figure.nofx span.text {
	filter: invert(100%);
}
section article {
	transform: translate3d(0,0,0);
}

section.service figure span.text {
	filter: invert(0%);
}


body[data-current*="vision"]    section.vision    figure span,
body[data-current*="value"]     section.value     figure:not(.nofx) span {
	filter: invert(100%);
}
body[data-current*="vision"]    section.vision    figure span.text,
body[data-current*="value"]     section.value     figure span.text,
body[data-current*="service"]   section.service   figure span.text,
body[data-current*="team"]      section.team      figure span.text,
body[data-current*="member"]    section.member    figure span.text,
body[data-current*="corporate"] section.corporate figure span.text,
body[data-current*="partner"]   section.partner   figure span.text {
	opacity: 1;
}
body[data-current*="vision"]    section.vision    figure span.notext,
body[data-current*="value"]     section.value     figure span.notext,
body[data-current*="service"]   section.service   figure span.notext,
body[data-current*="team"]      section.team      figure span.notext,
body[data-current*="member"]    section.member    figure span.notext,
body[data-current*="corporate"] section.corporate figure span.notext,
body[data-current*="partner"]   section.partner   figure span.notext {
	opacity: 0;
}







section.team ul:before,
section.team ul:after {
	animation: yoyo 1000ms alternate infinite ease;
}
@keyframes yoyo {
	0% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(10px);
	}
}





section.corporate ul {
	margin: 15px 0;
}
section.corporate li + li {
	margin-top: 15px;
}
section.corporate ul strong {
	display: block;
	font-weight: 500;
}








b.stardust {
	position: fixed;
	display: block;
	z-index: 10000;
	height: 1px;
	visibility: hidden;
	will-change: transform;
}
b.stardust.go {
	visibility: visible;
	transition-delay: 500ms !important;
}



b.stardust[data-key="1"] {
	width: 300px;
	left: 50%;
	top: 50%;
	background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(45deg);
}
b.stardust[data-key="1"].go {
	transform: rotate(45deg) translate(calc(-100vw - 300px));
}


b.stardust[data-key="2"] {
	width: 300px;
	left: 0%;
	top: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(-45deg);
}
b.stardust[data-key="2"].go {
	transform: rotate(-45deg) translate(calc(100vw + 300px));
}


b.stardust[data-key="3"] {
	width: 300px;
	left: 100%;
	top: 100%;
	background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(30deg);
}
b.stardust[data-key="3"].go {
	transform: rotate(30deg) translate(calc(-100vw - 600px));
}


b.stardust[data-key="4"] {
	width: 300px;
	left: 0%;
	top: 60%;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(-30deg);
}
b.stardust[data-key="4"].go {
	transform: rotate(-30deg) translate(calc(100vw + 300px));
}


b.stardust[data-key="5"] {
	width: 300px;
	left: 100%;
	top: 70%;
	background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(15deg);
}
b.stardust[data-key="5"].go {
	transform: rotate(15deg) translate(calc(-100vw - 600px));
}


b.stardust[data-key="6"] {
	width: 300px;
	left: 0%;
	top: 60%;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(-15deg);
}
b.stardust[data-key="6"].go {
	transform: rotate(-15deg) translate(calc(100vw + 300px));
}


b.stardust[data-key="7"] {
	width: 300px;
	left: 50%;
	top: 100%;
	background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(75deg);
}
b.stardust[data-key="7"].go {
	transform: rotate(75deg) translate(calc(-100vw - 300px));
}


b.stardust[data-key="8"] {
	width: 300px;
	left: 20%;
	top: 150%;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,2455,0.8));
	transition: all 1000ms ease-in;
	transform: rotate(-75deg);
}
b.stardust[data-key="8"].go {
	transform: rotate(-75deg) translate(calc(100vw + 300px));
}





html.ie body .alt-map,
html.edge body .alt-map {
	transition: all 400ms linear;
}
html.ie body.ended .alt-map,
html.edge body.ended .alt-map {
	visibility: hidden;
	opacity: 0;
}


html.edge body[data-current*="vision"]    section.vision    figure span,
html.edge body[data-current*="value"]     section.value     figure:not(.nofx) span {
	filter: invert(0%);
}
html.edge section figure.nofx span.text {
	filter: invert(0%);
}

html.ie img {
	-ms-interpolation-mode: bicubic;
}




/* 2025 */

header.value {
	height: 60px;
}

section.value article:nth-child(1) {
	margin-bottom: -5px;
}

section.value h3 {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
}
section.value h3:nth-child(1) {
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: 600;
	font-family: Montserrat, sans-serif;
	line-height: 1.6;
	letter-spacing: 1px;
	text-align: center;
}