@font-face {
	font-family: "fabrikat";
	src: url(assets/fonts/fabrikat-regular.otf);
}

@font-face {
	font-family: "fabrikat-light";
	src: url(assets/fonts/fabrikat-light.otf);
}

* {
	background-color: #666;
	color: #fff;
	font-family: "fabrikat";
	letter-spacing: 0.1em;
}

.opacity {
	opacity: 0;
	transition: opacity 2s ease;
}

@media (min-width: 768px) {
	/*========= LoadingのためのCSS ===============*/

	#splash {
		/*fixedで全面に固定*/
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		text-align: center;
	}

	/* Loading画像中央配置　*/
	#splash_logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* Loading アイコンの大きさ設定　*/
	#splash_logo svg {
		width: 300px;
	}

	/*=============== SVGアニメーション内の指定 =================*/

	/*アニメーション前の指定*/
	#mask path {
		fill-opacity: 0; /*最初は透過0で見えない状態*/
		transition: fill-opacity 0.5s; /*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none; /*塗りがない状態*/
		stroke: #333; /*線の色*/
	}

	/*アニメーション後に.doneというクラス名がで付与された時の指定*/
	#mask.done path {
		fill: #fff; /*塗りの色*/
		fill-opacity: 1; /*透過1で見える状態*/
		stroke: none; /*線の色なし*/
	}

	header {
		display: flex;
		height: 100vh;
	}

	.logo {
		width: auto;
		height: 50px;
		margin: 10% 0 0 15%;
	}

	.top-content {
		font-size: 30px;
		margin-top: 10%;
		text-align: right;
		margin-left: auto;
		margin-right: 15%;
	}

	.light-font {
		font-family: "fabrikat-light";
	}

	.language {
		position: fixed;
		top: 10px;
		right: 30px;
		text-align: center;
		font-size: 20px;
		border-top: 6px solid #fff;
		z-index: 100;
	}

	.language p {
		margin: 10px;
	}

	.link {
		text-decoration: none;
	}

	.link:hover {
		color: #333;
	}

	.scroll {
		position: absolute;
		right: 50%;
		animation: arrowmove 3s ease-in-out infinite;
	}

	@keyframes arrowmove {
		0% {
			bottom: 1%;
		}
		50% {
			bottom: 3%;
		}
		100% {
			bottom: 1%;
		}
	}

	.scroll span {
		position: absolute;
		left: -20px;
		bottom: 10px;
		font-size: 1rem;
		letter-spacing: 0.05em;
		-ms-writing-mode: tb-lr;
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		transform: rotate(180deg);
	}

	.scroll:before {
		content: "";
		position: absolute;
		bottom: 10px;
		left: -30px;
		width: 1px;
		height: 20px;
		background: #eee;
		transform: skewX(31deg);
	}

	.scroll:after {
		content: "";
		position: absolute;
		bottom: 10px;
		left: -24px;
		width: 1px;
		height: 70px;
		background: #eee;
	}

	.fadeIn {
		opacity: 0;
		transform: translateY(30px);
		visibility: hidden;
		transition: opacity 1.5s ease-in-out, transform 1s ease-in-out;
	}

	.visible {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	.identity {
		margin: 10% 15%;
		text-align: center;
	}

	.identity-content {
		font-size: 24px;
		background-color: #fff;
		color: #666;
		margin: 10% 0;
		padding-top: 3px;
	}

	.bracket-container {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		text-align: right;
	}

	.bracket-main {
		position: relative;
		text-align: right;
		padding-right: 10px;
		border-right: 1px solid #fff;
	}

	.bracket-main::before {
		content: "";
		position: absolute;
		right: -21px;
		top: 50%;
		width: 20px;
		border-top: 0.5px solid #fff;
		transform: translateY(-50%);
	}

	.bracket-main::after {
		content: "";
		position: absolute;
		left: 129px;
		top: -74.5px;
		bottom: -74.5px;
		width: 0.5px;
		background: #fff;
	}

	.bracket-list {
		list-style: none;
		text-align: left;
	}

	.bracket-list-content {
		position: relative;
		padding-left: 10px;
		border-left: 1px solid #fff;
	}

	.bracket-list-content::before {
		content: "";
		position: absolute;
		left: -21px;
		top: 50%;
		width: 20px;
		border-top: 0.5px solid #fff;
		transform: translateY(-50%);
	}

	.bracket-list li + li {
		margin-top: 10px;
	}

	.company {
		margin: 0 15%;
		text-align: center;
		justify-content: center;
	}

	.company-content {
		font-size: 24px;
		background-color: #fff;
		color: #666;
		width: 100%;
		padding-top: 3px;
	}

	.founder {
		display: flex;
		justify-content: center;
		margin: 15% 0;
	}

	.founder-link {
		text-decoration: none;
	}

	.founder-link:hover,
	.founder-link:hover * {
		color: #333;
		fill: #333;
	}

	.founder-list {
		border-right: 1px solid #fff;
		padding-right: 20px;
		text-align: right;
	}

	.founder-list svg {
		height: 20px;
		width: 20px;
		fill: #fff;
		margin: 10px auto;
	}

	.founder-list2 {
		padding-left: 20px;
		text-align: left;
	}

	.founder-list2 svg {
		height: 20px;
		width: 20px;
		fill: #fff;
		margin: 10px auto;
	}

	.founder-name {
		font-size: 22px;
	}

	.job-position {
		font-size: 18px;
	}

	.company-name {
		font-size: 20px;
	}

	.contact-container {
		margin: 0 15% 0 15%;
	}

	.contact {
		font-size: 24px;
		background-color: #fff;
		color: #666;
		margin: 10% 0;
		text-align: center;
		padding-top: 3px;
	}

	.mail-container {
		text-align: center;
	}

	.mail {
		text-decoration: none;
		font-size: 22px;
	}

	.mail:hover {
		color: #333;
	}

	footer {
		margin: 150px 0 50px 15%;
	}

	#page-top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		font-size: 1rem;
		letter-spacing: 0.05em;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		opacity: 0;
		transition: opacity 0.5s, transform 0.5s;
		transform: translateY(20px);
		visibility: hidden;
	}

	#page-top.visible {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	#page-top a {
		text-decoration: none;
	}

	#page-top:before {
		content: "";
		position: absolute;
		bottom: 20px;
		right: -10px;
		width: 1px;
		height: 20px;
		background: #eee;
		transform: skewX(31deg);
	}

	#page-top:after {
		content: "";
		position: absolute;
		bottom: -30px;
		right: -4px;
		width: 1px;
		height: 70px;
		background: #eee;
	}

	#page-top:hover {
		color: #333;
	}

	#page-top:hover:before {
		background: #333;
	}

	#page-top:hover:after {
		background: #333;
	}

	.loader {
		color: #ffffff;
		font-size: 10px;
		margin: 100px auto;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		position: relative;
		text-indent: -9999em;
		-webkit-animation: load4 0.75s infinite linear;
		animation: load4 0.75s infinite linear;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
	}
	@-webkit-keyframes load4 {
		0%,
		100% {
			box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 0;
		}
		12.5% {
			box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
				0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
		}
		25% {
			box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em,
				2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 -1em;
		}
		37.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0,
				2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		50% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		62.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0,
				-2em -2em 0 -1em;
		}
		75% {
			box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
				-2em -2em 0 0;
		}
		87.5% {
			box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0,
				-2em -2em 0 0.2em;
		}
	}
	@keyframes load4 {
		0%,
		100% {
			box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 0;
		}
		12.5% {
			box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
				0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
		}
		25% {
			box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em,
				2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 -1em;
		}
		37.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0,
				2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		50% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		62.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0,
				-2em -2em 0 -1em;
		}
		75% {
			box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
				-2em -2em 0 0;
		}
		87.5% {
			box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0,
				-2em -2em 0 0.2em;
		}
	}
}

@media (max-width: 767px) {
	/*========= LoadingのためのCSS ===============*/

	#splash {
		/*fixedで全面に固定*/
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		text-align: center;
	}

	/* Loading画像中央配置　*/
	#splash_logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* Loading アイコンの大きさ設定　*/
	#splash_logo svg {
		width: 200px;
	}

	/*=============== SVGアニメーション内の指定 =================*/

	/*アニメーション前の指定*/
	#mask path {
		fill-opacity: 0; /*最初は透過0で見えない状態*/
		transition: fill-opacity 0.5s; /*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none; /*塗りがない状態*/
		stroke: #333; /*線の色*/
	}

	/*アニメーション後に.doneというクラス名がで付与された時の指定*/
	#mask.done path {
		fill: #fff; /*塗りの色*/
		fill-opacity: 1; /*透過1で見える状態*/
		stroke: none; /*線の色なし*/
	}

	header {
		height: 100vh;
		position: relative;
	}

	.logo {
		height: 30px;
		margin: 20% 0 0 10%;
	}

	.top-content {
		font-size: 20px;
		margin-top: 12.5%;
		text-align: right;
		margin-right: 10%;
	}

	.light-font {
		font-family: "fabrikat-light";
	}

	.language {
		text-align: center;
		position: fixed;
		top: 5%;
		right: 10px;
		border-top: 6px solid #fff;
	}

	.language p {
		margin: 10px;
	}

	.link {
		text-decoration: none;
	}

	.scroll {
		position: absolute;
		right: 45%;
		animation: arrowmove 3s ease-in-out infinite;
	}

	@keyframes arrowmove {
		0% {
			bottom: 1%;
		}
		50% {
			bottom: 3%;
		}
		100% {
			bottom: 1%;
		}
	}

	.scroll span {
		position: absolute;
		left: -20px;
		bottom: 100px;
		font-size: 1rem;
		letter-spacing: 0.05em;
		-ms-writing-mode: tb-lr;
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		transform: rotate(180deg);
	}

	.scroll:before {
		content: "";
		position: absolute;
		bottom: 100px;
		left: -30px;
		width: 0.5px;
		height: 20px;
		background: #fff;
		transform: skewX(31deg);
	}

	.scroll:after {
		content: "";
		position: absolute;
		bottom: 100px;
		left: -24px;
		width: 0.5px;
		height: 70px;
		background: #fff;
	}

	.fadeIn {
		opacity: 0;
		transform: translateY(30px);
		visibility: hidden;
		transition: opacity 1.5s ease-in-out, transform 1s ease-in-out;
	}

	.visible {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	.identity {
		margin: 10%;
		text-align: center;
	}

	.identity-content {
		font-size: 16px;
		background-color: #fff;
		color: #666;
		margin: 22.5% 0 15% 0;
		padding-top: 3px;
	}

	.bracket-container {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		margin: 15% 0 22.5% 0;
		text-align: right;
	}

	.bracket-main {
		position: relative;
		text-align: right;
		padding-right: 10px;
		border-right: 1px solid #fff;
	}

	.bracket-main::before {
		content: "";
		position: absolute;
		right: -1.3rem;
		top: 1.25rem;
		width: 1.3rem;
		border-top: 0.5px solid #fff;
		transform: translateY(-50%);
	}

	.bracket-main::after {
		content: "";
		position: absolute;
		left: 5.8rem;
		top: -3.6rem;
		bottom: -3.46rem;
		width: 0.5px;
		background: #fff;
	}

	.bracket-list {
		list-style: none;
		text-align: left;
	}

	.bracket-list-content {
		position: relative;
		padding-left: 10px;
		border-left: 1px solid #fff;
		width: 100%;
	}

	.bracket-list-content::before {
		content: "";
		position: absolute;
		left: -1.33rem;
		top: 0.6rem;
		width: 1.3rem;
		border-top: 0.5px solid #fff;
		transform: translateY(-50%);
	}

	.bracket-list li + li {
		margin-top: 10px;
	}

	.company {
		margin: 0 10% 0;
		text-align: center;
	}

	.company-content {
		font-size: 16px;
		background-color: #fff;
		color: #666;
		margin: 22.5% 0 15% 0;
		padding-top: 3px;
	}

	.founder {
		display: flex;
		justify-content: center;
		margin-top: 50px;
	}

	.founder-link {
		text-decoration: none;
	}

	.founder-link:hover,
	.founder-link:hover * {
		color: #808080;
		fill: #808080;
	}

	.founder-list {
		border-right: 1px solid #fff;
		padding-right: 20px;
		text-align: right;
		width: 150px;
	}

	.founder-list svg {
		height: 20px;
		width: 20px;
		fill: #fff;
		margin: 10px auto;
	}

	.founder-list2 {
		padding-left: 20px;
		text-align: left;
		width: 150px;
	}

	.founder-list2 svg {
		height: 20px;
		width: 20px;
		fill: #fff;
		margin: 10px auto;
	}

	.founder-name {
		font-size: 14px;
	}

	.job-position {
		font-size: 10px;
		width: 100%;
	}

	.company-name {
		font-size: 12px;
	}

	.contact-container {
		margin: 0 10% 0 10%;
	}

	.contact {
		align-items: center;
		font-size: 16px;
		background-color: #fff;
		color: #666;
		margin: 22.5% 0 15% 0;
		text-align: center;
		padding-top: 3px;
	}

	.mail-container {
		text-align: center;
		margin-top: 50px;
	}

	.mail {
		text-decoration: none;
		font-size: 14px;
	}

	.mail:hover {
		color: #333;
	}

	footer {
		margin: 150px 0 150px 10%;
	}

	#page-top {
		position: fixed;
		right: 10px;
		bottom: 100px;
		font-size: 1rem;
		letter-spacing: 0.05em;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		opacity: 0;
		transition: opacity 0.5s, transform 0.5s;
		transform: translateY(20px);
		visibility: hidden;
		background: none;
	}

	#page-top.visible {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	#page-top a {
		text-decoration: none;
		background: none;
	}

	#page-top:before {
		content: "";
		position: absolute;
		bottom: 20px;
		right: -10px;
		width: 0.5px;
		height: 20px;
		background: #eee;
		transform: skewX(31deg);
	}

	#page-top:after {
		content: "";
		position: absolute;
		bottom: -30px;
		right: -4px;
		width: 0.5px;
		height: 70px;
		background: #eee;
	}

	.loader {
		color: #ffffff;
		font-size: 8px;
		margin: 100px auto;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		position: relative;
		text-indent: -9999em;
		-webkit-animation: load4 0.75s infinite linear;
		animation: load4 0.75s infinite linear;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
	}
	@-webkit-keyframes load4 {
		0%,
		100% {
			box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 0;
		}
		12.5% {
			box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
				0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
		}
		25% {
			box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em,
				2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 -1em;
		}
		37.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0,
				2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		50% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		62.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0,
				-2em -2em 0 -1em;
		}
		75% {
			box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
				-2em -2em 0 0;
		}
		87.5% {
			box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0,
				-2em -2em 0 0.2em;
		}
	}
	@keyframes load4 {
		0%,
		100% {
			box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 0;
		}
		12.5% {
			box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
				0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
		}
		25% {
			box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em,
				2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em,
				-2em -2em 0 -1em;
		}
		37.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0,
				2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		50% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em,
				-2em -2em 0 -1em;
		}
		62.5% {
			box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0,
				-2em -2em 0 -1em;
		}
		75% {
			box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
				-2em -2em 0 0;
		}
		87.5% {
			box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em,
				2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0,
				-2em -2em 0 0.2em;
		}
	}
}