@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');



* {
	margin: 0;
	padding: 0;
	user-select: none;
	-webkit-user-select: none;
}

main, section, figure {
	display: block;
}

html {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
body {
	color: #111;
	font-family: sans-serif;
	background: #fff;
	overflow: hidden;
}
::selection {
	color: #fff;
	background: #f18d28;
}




#cover {
	display: none;
}

html.edge #cover {
	position: fixed;
	display: block;
	width: 100vw;
	height: 100vh;
	left: 50%;
	top: 50%;
	z-index: 500;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
html.edge #cover svg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
html.edge #cover span {
	position: absolute;
	display: block;
}
#cover.wider span {
	height: 100vh !important;
	top: 0;
}
#cover.wider .spacer1 {
	left: 1px;
	transform: translateX(-100%);
	background: #fdca00;
}
#cover.wider .spacer2 {
	right: 1px;
	transform: translateX(100%);
	background: #e74b1e;
}

#cover.taller span {
	width: 100vw !important;
	left: 0;
	background: linear-gradient(90deg, #fdca00, #e74b1e);
}
#cover.taller .spacer1 {
	top: 1px;
	transform: translateY(-100%);
}
#cover.taller .spacer2 {
	bottom: 1px;
	transform: translateY(100%);
}

html.edge #cover {
	opacity: 0;
	transition: opacity 1000ms linear;
}
html.edge body.start #cover {
	opacity: 1;
}







#wrap {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 10;
	overflow-x: hidden;
	overflow-y: scroll;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}


#bg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 1;
	background: #fdca00;
	background: linear-gradient(45deg, #fdca00, #e74b1e);
}






h2,
#lang,
#copyright,
main .contact a {
	font-family: "Lexend Deca", Verdana, Geneva, "sans-serif";
	letter-spacing: 1px;
}
html:lang(en) * {
	font-family: "Lexend Deca", Verdana, Geneva, "sans-serif";
}


#logo {
	pointer-events: none;
}




#logo {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	text-align: center;
}
#logo span {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/logo.svg) 50% 50% no-repeat;
	background-size: 88% auto;
}

#typo {
	position: absolute;
	width: 50vw;
	height: 100vh;
	top: 50%;
	z-index: 110;
	transform: translate(0, -50%);
}
#typo span {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/typo.svg) 50% 50% no-repeat;
	background-size: 100% auto;
}




#bg {
	opacity: 0;
	transition: opacity 1000ms linear;
}
#logo span {
	transition: all 600ms ease-out;
}
#typo span {
	opacity: 0;
}




body.start #bg {
	opacity: 1;
}
body.start #logo span {
	transform: scale(0.22);
}

body.start.move #logo span {
	transform: scale(0.22) translateX(-110%);
	transition: all 400ms ease-out;
}
body.start.move #typo span {
	opacity: 1;
	transition: all 400ms linear 200ms;
}




#scrollbase {
	position: fixed;
	width: 16px;
	height: 100vh;
	right: 0;
	top: 0;
	z-index: 1000;
	background: rgba(255,255,255,0);
}
#scrollbar {
	position: fixed;
	width: 10px;
	height: 100px;
	right: 0;
	top: 0;
	z-index: 1010;
	background: rgba(255,255,255,0);
	
	opacity: 0;
	transition: opacity 500ms linear;
}
#scrollbar:before {
	position: absolute;
	content: "";
	display: block;
	width: 6px;
	height: calc(100% - 4px);
	left: 2px;
	top: 2px;
	border-radius: 8px;
	background: rgba(0,0,0,0.3);
}
body.start.move.scrolling #scrollbar {
	opacity: 1;
}








@media screen and (min-width:768px) {

	html.not-safari body.start #wrap {
		-webkit-clip-path: url(#clip);
		clip-path: url(#clip);
	}

	html.safari body.start #wrap {
		-webkit-mask-image:url(../img/mask.png);
		mask-image:url(../img/mask.png);
		
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		
		-webkit-mask-position: 50% 50%;
		mask-position: 50% 50%;
		
		-webkit-mask-size: calc(100vh / 10 * 14 * 0.88) auto;
		mask-size: calc(100vh / 10 * 14 * 0.88) auto;
	}

	#copyright {
		position: fixed;
		left: 50px;
		bottom: 48px;
		z-index: 1000;
		font-size: 10px;
		
		transition: color 1000ms linear;
	}
	body.start #copyright {
		color: #fff;
	}
	
	
	#lang {
		position: fixed;
		right: 40px;
		top: 36px;
		z-index: 1000;
		font-size: 0;
	}
	#lang li {
		display: inline-block;
		list-style: none;
	}
	#lang li + li:before {
		position: relative;
		content: "/";
		font-size: 14px;
		margin: 0 5px;
		top: -1px;
		color: #111;
		transition: color 1000ms linear;
	}
	#lang a {
		position: relative;
		display: inline-block;
		color: #111;
		font-size: 14px;
		text-decoration: none;
		transition: color 1000ms linear;
	}
	body.start #lang a,
	body.start #lang li + li:before {
		color: #fff;
	}
	
	
	
	html:lang(en) #lang .en a:after,
	html:lang(ja) #lang .jp a:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		left: 0;
		bottom: 0;
	}
	#lang a:after {
		background: #111;
		transition: background 1000ms linear;
	}
	body.start #lang a:after {
		background: #fff;
	}
	#lang a:hover {
		opacity: 0.7;
	}
	

	h1 {
		position: fixed;
		width: 137px;
		height: 114px;
		left: 40px;
		top: 40px;
		z-index: 1100;
		opacity: 0;
		transition: opacity 800ms linear;
	}
	h1 img {
		width: 100%;
		height: auto;
	}

	body.scrolled h1 {
		opacity: 1;
	}



	main {
		position: relative;
		width: 710px;
		z-index: 10;
		margin: 0 auto;
	}
	main .inner {
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}
	body.scrolling main .inner {
		height: auto;
		overflow: visible;
		visibility: visible;

		padding-bottom: 50vh;
	}

	main h2 {
		position: relative;
		margin: 0 0 70px;
		font-size: 34px;
		font-weight: normal;
	}
	main h2 span {
		position: relative;
		display: inline-block;
		z-index: 10;
	}
	main h2:before {
		position: absolute;
		display: block;
		content: "";
		width: 85px;
		height: 54px;
		left: -30px;
		top: -15px;
		z-index: 1;
		background: url(../img/icon.svg) 0 0 no-repeat;
		background-size: 85px auto;
	}

	main section + section {
		margin-top: 150px;
	}
	main .whoweare p {
		font-size: 24px;
		font-weight: bold;
		line-height: 2.5;
		letter-spacing: 2px;
	}
	html:lang(en) .whoweare p {
		letter-spacing: 1px;
		font-weight: normal;
	}



	main .company dl {
		position: relative;
		display: flex;
		width: 100%;
		padding: 0 0 3px;
		font-size: 24px;
		letter-spacing: 2px;
		justify-content: space-between;
	}
	main .company dl:after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		left: 0;
		bottom: 0;
		background: linear-gradient(90deg, #fbc127, #f18d28);
	}
	main .company dl + dl {
		margin-top: 30px;
	}
	main .company dd {
		text-align: right;
	}
	
	html:lang(en) main .company dl {
		letter-spacing: 1px;
		font-size: 18px;
	}


	main .contact article {
		text-align: center;
	}
	main .contact article a {
		font-size: 24px;
		color: #000;
		text-decoration: none;
	}
	main .contact article a:hover {
		color: #f18d28;
	}

}



@media screen and (min-width:768px) and (max-height:720px) {
	main {
		width: 500px;
	}
	main .whoweare p br.soft {
		display: none;
	}
	main .whoweare p {
		font-size: 18px;
	}
	
	main .company dl {
		width: 500px;
		font-size: 17px;
	}
	
	html:lang(en) main .company dl {
		letter-spacing: 0;
		font-size: 14px;
	}
}
@media screen and (max-width:800px) {
	main {
		width: 500px;
	}
	main .whoweare p br.soft {
		display: none;
	}
	main .whoweare p {
		font-size: 18px;
	}
	
	main .company dl {
		width: 500px;
		font-size: 17px;
	}
	
	html:lang(en) main .company dl {
		letter-spacing: 0;
		font-size: 14px;
	}
}





@media screen and (max-width:767px) {
	
	
	#scrollbase,
	#scrollbar {
		display: none;
	}
	
	html, body {
		overflow: auto;
	}
	#wrap {
		position: relative;
		background: none;
		overflow: auto;
		height: auto;
		min-height: 100vh;
	}
	#bg {
	}
	#bg:after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-image: url(../img/bg_sp.svg);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	
	
	#lang {
		position: fixed;
		right: 20px;
		top: 16px;
		z-index: 20;
		font-size: 0;
	}
	#lang li {
		display: inline-block;
		list-style: none;
	}
	#lang li + li:before {
		position: relative;
		content: "/";
		font-size: 12px;
		margin: 0 5px;
		top: -1px;
		color: #111;
		transition: color 1000ms linear;
	}
	#lang a {
		position: relative;
		display: inline-block;
		color: #111;
		font-size: 12px;
		text-decoration: none;
		transition: color 1000ms linear;
	}
	body.start #lang a,
	body.start #lang li + li:before {
		color: #fff;
	}
	
	
	
	html:lang(en) #lang .en a:after,
	html:lang(ja) #lang .jp a:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		left: 0;
		bottom: 0;
	}
	#lang a:after {
		background: #111;
		transition: background 1000ms linear;
	}
	body.start #lang a:after {
		background: #fff;
	}
	body.scrolled #lang {
		z-index: 1;
	}
	
	
	
	
	
	
	main {
		position: relative;
		height: 0;
		z-index: 1000;
		overflow: hidden;
		visibility: hidden;
	}
	body.scrolling #wrap {
		position: relative;
	}
	body.scrolling main {
		height: auto;
		overflow: visible;
		visibility: visible;
	}
	
	#copyright {
		display: none;
		font-size: 9px;
	}
	body.scrolling #copyright {
		position: relative;
		display: block;
		z-index: 10;
		padding: 50px 15px;
		text-align: center;
		background: #fff;
	}
	
	
	#logo {
		position: fixed;
		top: 0;
		transform: translate(-50%, 0);
	}
	#typo {
		position: fixed;
		top: 0;
		transform: translate(0, 0);
	}
	
	
	
	h1 {
		position: fixed;
		width: 69px;
		height: 57px;
		left: 20px;
		top: 20px;
		z-index: 1100;
		opacity: 0;
		transition: opacity 200ms linear;
		
		display: none;
	}
	h1 img {
		width: 100%;
		height: auto;
	}

	body.scrolled h1 {
		opacity: 1;
	}


	
	
	main {
		width: 100vw !important;
	}
	main .inner {
		box-sizing: border-box;
		margin: 100vh 0 0;
		padding: 50px 30px !important;
		background: #fff;
	}

	main h2 {
		position: relative;
		margin: 0 0 40px;
		font-size: 20px;
	}
	main h2 span {
		position: relative;
		display: inline-block;
		z-index: 10;
	}
	main h2:before {
		position: absolute;
		display: block;
		content: "";
		width: 42px;
		height: 27px;
		left: -12px;
		top: -7px;
		z-index: 1;
		background: url(../img/icon.svg) 0 0 no-repeat;
		background-size: 42px auto;
	}

	main section + section {
		margin-top: 80px;
	}
	main .whoweare p {
		font-size: 16px;
		font-weight: bold;
		line-height: 2.2;
		letter-spacing: 1px;
	}
	main .whoweare p br.soft {
		display: none;
	}
	
	html:lang(en) .whoweare p {
		letter-spacing: 0;
		font-weight: normal;
	}
	

	main .company dl {
		position: relative;
		display: flex;
		width: calc(100vw - 60px);
		padding: 0 0 2px;
		font-size: 14px;
		letter-spacing: 1px;
		justify-content: space-between;
	}
	main .company dl:after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		left: 0;
		bottom: 0;
		background: linear-gradient(90deg, #fbc127, #f18d28);
	}
	main .company dl + dl {
		margin-top: 25px;
	}
	
	main .company dd {
		text-align: right;
		padding-left: 1em;
	}
	html:lang(en) main .company dl {
		letter-spacing: 0;
		font-size: 13px;
	}


	main .contact article {
		text-align: center;
	}
	main .contact article a {
		font-size: 16px;
		font-weight: bold;
		color: #000;
		text-decoration: none;
	}
	main .contact article a.touched {
		color: #f18d28;
	}
}