@charset "utf-8";

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




body {
	font-size: 16px;
	background-image: url(../img/bg7.jpg);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 100% auto;
}

* {
	backface-visibility: hidden;
}
img {
}

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

br.soft {
	display: none;
}
.sp {
	display: none !important;
}










.spacer {
	height: 400px;
}
.spacer.long {
	height: 80vh;
}
.spacer.long.last {
	height: 100vh;
}
.spacer.mini {
	position: relative;
	max-width: 840px;
	height: 1px;
	z-index: 100;
	margin: 150px auto;
	background: #000;
}





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









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



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



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




nav.global > ul i {
	position: absolute;
	display: block;
	width: calc(100% + 30px);
	height: 3px;
	left: -15px;
	bottom: -2px;
	background: #fff;
}



nav.global .sub {
	margin: 130px 0 0;
}
nav.global .sub ul {
	display: flex;
	line-height: 1;
}
nav.global .sub li {
	position: relative;
}
nav.global .sub ul a {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: 400;
	font-family: Montserrat, sans-serif;
	text-decoration: none;
}
nav.global .sub li + li::before {
	content: "";
	position: relative;
	display: inline-block;
	width: 1px;
	height: 12px;
	left: 0;
	top: 1px;
	margin: 0 20px;
	background: #fff;
}
nav.global .sub ul a:hover {
	text-decoration: underline;
}


@media screen and (max-height:620px) {
	nav.global > ul li +  li {
		margin-top: 30px;
	}
	nav.global .sub {
		margin: 70px 0 0;
	}
}




#menu,
#menu i {
	transition: transform 300ms ease-out;
	will-change: transform;
}
body.opened-menu #menu {
	transform: translateY(20px);
}
body.opened-menu #menu i:nth-child(2) {
	transform: scaleX(0);
}
body.opened-menu #menu i:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
body.opened-menu #menu i:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}




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(-501px);
	transition: all 300ms ease-out;
	will-change: transform;
}
body.opened-menu nav.global {
	transform: translateX(0);
}


nav.global > ul li a {
	transition: opacity 300ms ease-out;
	will-change: opacity;
}
nav.global > ul 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);
}


nav.global > ul a:hover i {
	transform: scale(1,1);
}











#wrap > footer {
	display: flex;
	justify-content: space-between;
	padding: 0 50px 30px;
	color: #fff;
}
#wrap > footer .copyright {
	font-size: 13px;
	font-family: Montserrat, sans-serif;
	letter-spacing: 1px;
}
#wrap > footer nav ul {
	display: flex;
	line-height: 1;
}
#wrap > footer nav li {
	position: relative;
}
#wrap > footer nav ul a {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	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: 12px;
	left: 0;
	top: 1px;
	margin: 0 20px;
	background: #fff;
}
#wrap > footer nav ul a:hover {
	text-decoration: underline;
}





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



h3 {
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 4px;
}

section article p {
	line-height: 2.1;
}

section .star {
	color: #fff;
}

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















#intro {
	height: 58vw;
	min-height: 100vh;
	background: url(../img/bg1.jpg) 50% 0 no-repeat;
	background-size: 100vw 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: 5px;
	font-size: 42px;
	font-weight: 500;
	font-family: Montserrat, sans-serif;
	color: #fff;
}
header h2 strong:before {
	content: "";
	position: absolute;
	display: block;
	width: calc(100% + 30px);
	height: 3px;
	left: -15px;
	bottom: -8px;
	background: #fff;
}






header.vision {
	height: 100px;
}
header.vision h2 img {
	height: 32px;
}

section.vision {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
section.vision h3 {
	margin: 0 0 45px;
}
section.vision h3 img {
	width: 300px;
	height: auto;
}

section.vision figure {
	position: relative;
	width: 350px;
	height: 366px;
}






header.value {
	height: 70px;
}
header.value h2 img {
	height: 32px;
}

section.value > article {
	margin-bottom: -30px;
}

section.value > figure {
	position: relative;
	height: 144px;
	margin: 0 -50px;
}
section.value > figure img {
	width: auto;
	height: 144px;
}
section.value ul {
	position: relative;
	display: flex;
	margin-top: -35px;
}
section.value li {
	position: relative;
	width: 240px;
}
section.value li + li {
	margin-left: 60px;
}


section.value figcaption {
	height: 140px;
	font-size: 14px;
	line-height: 2.2;
}

section.value li figure {
	position: relative;
	width: 280px;
	height: 300px;
	margin: 0 -20px;
}









header.service {
	height: 100px;
}
header.service h2 img {
	height: 32px;
}

section.service {
	margin-bottom: -80px !important;
}
section.service h3 {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.8;
	text-align: center;
}
section.service h4 {
	position: absolute;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 2px;
}
section.service h5 {
}

section.service .group1 {
	position: relative;
	margin-top: -20px;
}
section.service .group1 figure {
	position: relative;
	height: 468px;
}
section.service .group1 h4 {
	position: absolute;
}
section.service .group1 h4:nth-of-type(1) {
	width: 275px;
	left: 5px;
	top: 160px;
}
section.service .group1 h4:nth-of-type(2) {
	width: 220px;
	right: 20px;
	top: 345px;
}


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



section.service .group2 {
	position: relative;
	padding: 200px 0 0;
}
section.service figcaption ul {
	margin: 18px 0 0 -5px;
	font-size: 13px;
	line-height: 1.6;
}
section.service .group2 figure {
	position: relative;
	height: 480px;
	margin-top: -55px;
}
section.service .group2 figure span {
	left: 180px;
}
section.service .group2 figcaption {
	position: absolute;
}
section.service figcaption.md {
	left: 50%;
	top: 50px;
	margin-left: -50px;
}
section.service figcaption.cd {
	left: 50px;
	bottom: 75px;
}
section.service figcaption.td {
	right: 40px;
	bottom: 75px;
}

section.service figcaption.md img {
	width: auto;
	height: 50px; 
}
section.service figcaption.cd img {
	width: auto;
	height: 100px; 
}
section.service figcaption.td img {
	width: auto;
	height: 97px; 
}












header.team {
	height: 120px;
}
header.team h2 img {
	height: 30px;
}

section.team figure {
	position: relative;
	width: 840px;
	height: 120px;
}
section.team article {
	position: relative;
}
section.team .team ul {
	position: relative;
	display: flex;
	padding: 0 0 55px;
}
section.team .team li {
	box-sizing: border-box;
	width: 370px;
	padding: 10px 15px 12px;
	border: 1px solid #000;
	border-top-width: 0;
}
section.team .team li + li {
	margin-left: 100px;
}
section.team .team li p {
	font-size: 14px;
	line-height: 2.2;
}

section.team .team h3 {
	margin: 45px 0 0;
	text-align: center;
}
section.team .team h3 strong {
	position: relative;
	display: inline-block;
	font-weight: 400;
}
section.team .team h3 span {
	position: relative;
	display: inline-block;
	z-index: 10;
}
section.team .team h3 strong:after {
	position: absolute;
	display: block;
	content: "";
	width: calc(100% + 30px);
	height: calc(100% - 12px);
	left: -15px;
	top: 6px;
	background: rgba(0,0,0,0.2);
	z-index: 1;
}


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









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

section.team .member ul {
	position: relative;
	display: flex;
	padding: 80px 0 0;
}
section.team .member li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 370px;
}
section.team .member li + li {
	margin-left: 100px;
}

section.team .member li figure {
	box-sizing: border-box;
	width: 148px;
	height: 198px;
	overflow: hidden;
}
section.team .member li figure img {
	width: 100%;
	height: auto;
}
section.team .member li dl {
	width: 190px;
}
section.team .member li dt {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 4px;
}
section.team .member li dt span {
	display: block;
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0;
}
section.team .member li dt + dd {
	margin: 25px 0 0;
	font-size: 13px;
	line-height: 1.8;
}
section.team .member li p {
	width: 100%;
	margin: 28px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid #000;
	font-size: 14px;
	line-height: 2.2;
}










header.corporate {
	height: 110px;
}
header.corporate h2 img {
	height: 37px;
}

section.corporate dl {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 22px;
	line-height: 2;
	border-bottom: 1px solid #000;
}
section.corporate dl + dl {
	margin-top: 22px;
}
section.corporate dt {
	box-sizing: border-box;
	width: 30%;
	padding: 0 0 0 15px;
}
section.corporate dd {
	width: 70%;
}
section.corporate dl.access {
	border: none;
}
section.corporate .address {
	margin: 0 0 15px;
}
section.corporate .map {
	position: relative;
	height: 420px;
	margin: 0 0 8px;
}



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


section.partner {
}

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








header.works {
	height: 140px;
}

section.works article {
	position: relative;
}
section.works ul {
	position: relative;
	display: flex;
	padding: 0 0 55px;
}
section.works li {
	box-sizing: border-box;
	width: 240px;
	margin-left: 60px;
}
section.works li figure {
	box-sizing: border-box;
	height: 240px;
	border: 1px solid #e5e5e5;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transition: all 300ms ease-out;
}
section.works li.contain figure {
	background-size: contain;
}

section.works li:nth-child(3n + 1) {
	margin-left: 0;
}
section.works li + li {
}
section.works li figcaption {
	margin: 14px 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 figure {
	filter: saturate(0);
}
*/
section.works li a:hover figcaption {
	text-decoration: underline;
}

section.works nav a {
	position: relative;
	display: block;
	width: 440px;
	height: 50px;
	line-height: 50px;
	margin: 0 auto;
	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: 18px;
	height: 1px;
	right: 0;
	top: 50%;
	background: #fff;
}
section.works nav i {
	content: "";
	position: absolute;
	display: block;
	width: 25px;
	height: 9px;
	right: -25px;
	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: 40px;
	right: -40px;
}






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

section.contact nav a {
	position: relative;
	display: block;
	width: 440px;
	height: 50px;
	line-height: 50px;
	margin: 0 auto;
	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: 18px;
	height: 1px;
	right: 0;
	top: 50%;
	background: #fff;
}
section.contact nav i {
	content: "";
	position: absolute;
	display: block;
	width: 25px;
	height: 9px;
	right: -25px;
	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;
}

section.contact nav a:hover i {
	width: 40px;
	right: -40px;
}




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

#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: 100vw auto;
	background-repeat: no-repeat;
	mix-blend-mode: screen;
}

#background .vision {
	height: 67vw;
	margin-top: -21vw;
	background-image: url(../img/bg2.jpg);
}

#background .value {
	height: 68vw;
	margin-top: -25vw;
	background-image: url(../img/bg3.jpg);
}

#background .service {
	height: 66.5vw;
	margin-top: -30vw;
	background-image: url(../img/bg4.jpg);
}

#background .team {
	height: 66.5vw;
	margin-top: -28.5vw;
	background-image: url(../img/bg5.jpg);
}

#background .member {
	height: 66.5vw;
	margin-top: -28.5vw;
	background-image: url(../img/bg6.jpg);
}

#background .corporate {
	height: 68vw;
	margin-top: -29vw;
	background-image: url(../img/bg3.jpg);
}





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


.motion img {
	height: auto;
}
section.vision .motion img {
	width: 350px;
}
section.value > figure .motion img {
	width: 940px;
}
section.value li .motion img {
	width: 280px;
}
section.service .group1 .motion img {
	width: 840px;
}
section.service .group2 .motion img {
	width: 480px;
}
section.team .motion img {
	width: 840px;
}





/*
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 {
	transition: all 500ms linear;
	will-change: opacity;
	opacity: 0;
}
body.scrolled nav.global {
	opacity: 1;
}



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="vision"]     nav.global li.vision 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 {
	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;
}




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: 100px;
	height: 100px;
	left: calc(50% - 40px);
	top: calc(50% - 95px);
	z-index: 10000;
	opacity: 0.5;
	background: url(../img/logo_circle.svg) 50% 50% no-repeat;
	background-size: 100% auto;
}
*/




/*
#logo-n {
	position: fixed;
	width: 22px;
	height: 19px;
	left: calc(50% + 210px + 6px);
	top: calc(50% - 16px - 25px - 5px);
	z-index: 1000;
	background: url(../img/n.svg) 0 0 no-repeat;
	background-size: 22px auto;
}
*/

/*
#logo-bar {
	position: fixed;
	width: 76px;
	height: 76px;
	left: calc(50% - 38px);
	top: calc(50% - 38px);
	margin: -46px 0 0;
	z-index: 10;
	background: #fff;
	border-radius: 38px;
}
*/




h1 {
	position: fixed;
	width: 300px;
	height: 36px;
	left: calc(50% - 150px);
	top: calc(50% + 30px);
	z-index: 1000;
	background: url(../img/logo_dn.svg) 0 0 no-repeat;
	background-size: 300px auto;
}



#logo-bar {
	position: fixed;
	width: 76px;
	height: 76px;
	left: calc(50%);
	top: calc(50%);
	transform: translate(-50%, -50%);
	margin: -46px 0 0;
	z-index: 10;
	background: #fff;
	border-radius: 38px;
}
#logo-bar span {
	position: absolute;
	display: block;
	width: calc(76px * var(--scale-pc));
	height: calc(76px * var(--scale-pc));
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) scale(var(--log-pc));
	background: #fff;
	border-radius: calc(38px * var(--scale-pc));
}

#logo-n {
	position: fixed;
	width: 22px;
	height: 19px;
	left: calc(50% + (76px / 2) + 3px);
	top: calc(50% - 84px);
	z-index: 1000;
	background: url(../img/n.svg) 0 0 no-repeat;
	background-size: 22px 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 - ((76px / 2) + 3px) - 34px), calc(-50vh + 84px + 14px));
	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 span,
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);
	}
}








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.edge header h2 {
	filter: invert(100%);
}
html.ie img[src$=".svg"] {
	width: 100%;
	height: auto;
}

html.ie header h2 {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
html.ie header h2,
html.ie header h2 strong {
	position: relative;
	color: #000;
}
html.ie header h2 img {
	visibility: hidden;
}
/*
html.ie header h2 {
	padding-bottom: 3px;
	border-bottom: 4px solid #000;
}
*/
/*
html.ie header.vision h2 {
	width: 149px;
	background: url(../img/ie/title_vision.svg) 50% 0 no-repeat;
	background-size: 149px 32px;
}
html.ie header.value h2 {
	width: 133px;
	background: url(../img/ie/title_value.svg) 50% 0 no-repeat;
	background-size: 133px 32px;
}
html.ie header.service h2 {
	width: 181px;
	background: url(../img/ie/title_service.svg) 50% 0 no-repeat;
	background-size: 181px 32px;
}
html.ie header.team h2 {
	width: 119px;
	background: url(../img/ie/title_team.svg) 50% 0 no-repeat;
	background-size: 119px 30px;
}
html.ie header.member h2 {
	width: 186px;
	background: url(../img/ie/title_member.svg) 50% 0 no-repeat;
	background-size: 186px 32px;
}
html.ie header.corporate h2 {
	width: 245px;
	background: url(../img/ie/title_corporate.svg) 50% 0 no-repeat;
	background-size: 245px 37px;
}
*/

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;
}


html.ie header h2 strong::before {
	background-color: #000;
}

html.ie section.partner ul li:nth-child(3n),
html.ie section.partner ul li:nth-child(3n + 2) {
	margin-left: 79.5px;
}





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










@media screen and (max-width:1080px) {
	section:not(#intro) {
		width: auto;
		padding: 0 140px;
	}
	.spacer.mini {
		max-width: calc(100vw - 280px);
	}
	
	section article p {
		font-size: 15px;
	}
	
	section.vision {
		display: block;
	}
	section.vision h3 img {
		width: 250px;
	}
	section.vision figure {
		margin: 50px auto 0;
	}
	
	
	
	header.value {
		height: 100px;
	}
	section.value .pc {
		display: none;
	}
	section.value .sp {
		display: block !important;
	}

	section.value ul {
		display: block;
		width: 500px;
		margin: 0 auto;
	}
	section.value li {
		position: relative;
		width: 100%;
		padding: 0 0 40px;
	}
	section.value li + li {
		margin: 50px 0 0;
	}
	section.value li:last-child {
		padding: 0;
	}
	section.value li + li:before {
		position: absolute;
		content: "";
		display: block;
		width: 1px;
		height: 9vw;
		left: 50%;
		top: 1.5vw;
		background: #000;
	}
	section.value li figure:not(.sp) {
		display: none !important;
		margin: 0 auto;
	}
	section.value li figure.sp {
		position: relative;
		width: 500px;
		height: 210px;
		margin: -75px auto;
	}
	section.value li figure.motion img {
		width: 360px;
		margin-left: -40px;
	}
	section.value li figure.nofx.motion img {
		width: 500px;
		margin: 0;
	}

	section.value figcaption {
		width: 350px;
		height: auto;
		margin: 15px auto 0;
	}
	
	section.value li + li:before {
		height: 40px;
	}
	
	
	
	
	section.service h3 {
		font-size: 15px;
		text-align: left;
	}
	section.service h3 br {
		display: none;
	}
	
	section.service .group1 figure {
		height: calc((100vw - 280px) * 0.558333333333333);
	}
	section.service .group1 .motion img {
		width: 100%;
	}
	section.service h4 {
		font-size: 14px;
	}
	section.service .group1 h4:nth-of-type(1) {
		top: calc((100vw - 280px) * 0.18);
		text-align: left;
	}
	section.service .group1 h4:nth-of-type(2) {
		top: calc((100vw - 280px) * 0.4);
		text-align: right;
	}
	
	section.service .group2 {
		padding-bottom: 250px;
	}
	section.service .group2 figure {
		width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
	section.service .group2 figure span {
		left: 0;
	}
	
	
	
	header.team {
		height: 100px;
	}
	section.team figure {
		width: 100%;
		height: calc((100vw - 280px) * 0.142857142857143);
	}
	section.team .motion img {
		width: 100%;
	}
	section.team h3 {
		font-size: 21px;
	}
	section.team ul {
		justify-content: space-between;
	}
	section.team li {
		width: calc( ((100vw - 280px) - ((100vw - 280px) * 0.119047619047619)) / 2);
	}
	section.team li + li {
		margin: 0;
	}
	section.team ul:before {
		height: calc(100% - 16px);
	}
	section.team ul:after {
		bottom: 0;
	}
	
	
	
	
	section.member li + li {
		margin-left: 40px;
	}
	section.member li dt span {
		display: block;
		margin: 12px 0 0;
	}
	section.member li dt + dd {
		font-size: 12px;
		line-height: 1.6;
	}
	
	
	section.corporate dl {
		font-size: 13px;
	}
	
	
	body {
		background-size: 175vw auto;
	}
	#intro {
		background-size: cover;
	}
}






/* 2025 */

header.value {
	height: 100px;
}

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


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

section.team .member ul {
	align-items: flex-start;
}


@media screen and (max-width:1080px) {
	section.value article:nth-child(1) {
		margin-bottom: 50px;
	}
}


@media screen and (max-width:1080px) {
	section.works li figure {
		height: auto;
		aspect-ratio: 4 / 3;
	}
	section.works li {
		margin-left: 40px;
	}
	
	section.team .team ul {
		justify-content: space-between;
	}
	section.team .team li {
		width: 44%;
	}
	section.team .team li + li {
		margin-left: 0;
	}
	
	section.team .member li dl {
		margin-top: 25px;
	}
	section.team .member li dt + dd {
		min-height: 80px;
		margin-bottom: -10px;
	}
}