@charset "utf-8";
/* ---------------------------------------------------

	Font Import

--------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
/* ---------------------------------------------------

	Default

--------------------------------------------------- */
*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	--text-color: #333;
	--background-color: #fff;
	--background-color-2: #fff;
	--link-color: #03b9f1;
	--link-hover-color: #fff;
	font-family: 'Roboto Mono', monospace, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
	color: #fff;
	color: var(--text-color);
	background-color: #fff;
	background-color: var(--background-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* ---------------------------------------------------

	Page Loader

--------------------------------------------------- */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--background-color);
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 10000;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 10px solid var(--background-color-2);
	border-left-color: var(--text-color);
	animation: loaderAnim 0.8s linear infinite forwards;
}

@keyframes loaderAnim {
	to {
		transform: rotate(360deg);
	}
}

main {position: relative;width: 100%;overflow: hidden;}
a {text-decoration: none;color: var(--link-color);outline: none;}
a:hover, a:focus {color: var(--link-hover-color);outline: none;}

/* SVG Morph */
.morph-wrap {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index:-1;
}

.morph {
	position: relative;
	height: 100%;
	fill: var(--background-color-2);
	flex: none;
}

.content-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	pointer-events: none;
}

.main_nav { position:fixed;top:50%; left:10px;}
.main_nav a {position: relative;display:block;overflow: hidden;margin-bottom:10px;text-decoration:none;color: #000;letter-spacing: 0.01em;opacity: .2;transition: all 1s cubic-bezier(.19,1,.22,1) 0ms;}
.main_nav a:hover {opacity:1;}
.main_nav a.active {opacity:1;font-size:20px;}
.main_nav a::before {}

header {}
header h1 img {width:350px;}

footer {font-size:11px;padding-bottom:30px;position:relative;}
footer .logo {width:200px; margin:0 auto 150px;}
footer .logo img {width:100%;}
footer .copyright {margin: 0;color:#bcbcbc; text-align:center;letter-spacing:0.06em;}
footer .copyright small {font-size:11px;}

main h3 { text-align: center;font-size: 14px;font-weight: normal;margin-bottom: 30px;letter-spacing: 0.05em;}
main h3:after {content:'';display: block;width:30px;height:2px;background:#000; margin: 18px auto 0;}
main h4 {font-size:12px;line-height: 1.8;font-weight: normal; margin-bottom: 0.5em;}
main p {font-size:12px;line-height: 1.8;margin-bottom: 100px;text-align:center;}

main dl {}
main dt, main dd {float:left;font-size:12px;}
main dt {margin-bottom:20px;clear:both;width:100px;}
main dt h4 {font-weight:normal;}
main dd {}

#service {}
#service ul {}
#service ul li {line-height:2; font-size:12px;margin-bottom:10px;position:relative;padding-left:13px;}
#service ul li:before{content:'';display:block;w;width: 6px;height: 2px;background: #ddd;position:absolute;top: 12px;left: 0;}

#about {}

#contact {}

@media (max-width: 450px) {
	.main_nav {top:10px;}
	.content-wrap {padding:0 20px;}
}