@charset "UTF-8";





/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

h1,h2,h3,h4,h5,h6,
div,p,
span,em,strong,
ul,ol,li,
dl,dt,dd,
a{
	background-repeat: no-repeat;
	background-size: 100% auto;
}

a{
	outline: none;
}

.sp{
	display: none;
}

/*CF*/
.cf:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.cf{display: inline-block;}
/* Hides from IE Mac \*/
* html .cf {height: 1%;}
.cf{display:block;}
/* End Hack */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　RESET_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMON_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
body{
	/*font-family: serif;*/ /*ローカル用*/
	background-color: #ffffff;
	font-family: "Sawarabi Gothic";
}
html,body{
	width: 100%;
	height: 100%;
}

p{
	margin: 0 0 1em 0;
	line-height: 2.5em;
	letter-spacing: 0.085em;
}
h3{
	margin: 0 0 2em 0;
	color: #00bbc2;
	letter-spacing: 0.085em;
}



.s1 {
	opacity: 0.8;
	font-size: 0.7em;
}





/*
〓〓〓基本アニメーション〓〓〓
*/
section{
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}
.sready h2{
	position: relative;
	left: 50px;
	opacity: 0;
	transition: all 600ms ease-out 0ms;
}
.sready .read{
	position: relative;
	left: 50px;
	opacity: 0;
	transition: all 600ms ease-out 300ms;
}
.sready.active h2,
.sready.active .read{
	left: 0px;
	opacity: 1;
}
.eachready li,
.eachready dt,
.eachready dd{
	position: relative;
	left: 50px;
	opacity: 0;
	transition: all 600ms ease-out 300ms;
}
.eachready li.active,
.eachready dt.active,
.eachready dd.active{
	left: 0px;
	opacity: 1;
}






/*
〓〓〓ローディング〓〓〓
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　COMMON_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
キービジュアル_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#kv{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #eeeeee;
	background: linear-gradient(180deg,#000000 0%,#000000 50%,#eeeeee 50%,#eeeeee 100%);
	margin: 0 0 15% 0;
	transform: scale(1,1);
	transition: all 600ms 0s ease;
}
#kv.ready{
	transform: scale(1,0);
}

#kv h1{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 65px 0 0 -100px;
	width: 200px;
	font-size: 16px;
	font-family: "Oswald";
	line-height: 1em;
	letter-spacing: 0.1em;
	text-align: center;
	color: #000000;
}






/*
〓〓〓シンボル〓〓〓
*/
#kv .symbol{
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	width: 100px;
	height: 100px;
}
#kv .symbol span{
	display: block;
	width: 20px;
	height: 100px;
	background-color: #00bbc2;
	text-indent: -9999px;
	transform: scale(1,1);
	transition: all 300ms ease-out 600ms;
}
#kv .symbol span.ready{
	transform: scale(2,1);
}
#kv .symbol span:nth-of-type(1),
#kv .symbol span:nth-of-type(3){
	background: linear-gradient(180deg,#cccccc 0%,#cccccc 50%,#000000 50%,#000000 100%);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　キービジュアル_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
概要_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#about{
	padding: 15% 15% 0 15%;
}

#about h2{
	font-size: 30px;
	font-family: "Oswald";
	line-height: 1em;
	letter-spacing: 0.1em;
	margin: 0 0 1em 0;
}

#about .read{
	margin: 0 0 5em 0;
}






/*
〓〓〓対応範囲｜SCOPE〓〓〓
*/
#about .scope{
	margin: 0 0 6em 0;
	font-family: "Oswald";
	line-height: 1em;
}
#about .scope li{
	margin: 0 0 0.7em 0;
	letter-spacing: 0.085em;
}






/*
〓〓〓お仕事｜WORKS〓〓〓
*/
#about .works{
	margin: 0 0 6em 0;
	font-family: "Oswald";
	line-height: 1em;
}
#about .works dt{
	margin: 0 0 0.7em 0;
	letter-spacing: 0.085em;
}
#about .works dd{
	font-size: 11px;
	margin: 0 0 0.7em 1em;
	padding: 0 0 0 1em;
	letter-spacing: 0.085em;
	border-left: 1px #000000 solid;
}
#about .works dd.end {
	margin: 0 0 1.7em 1em;
}






/*
〓〓〓主要お取引先｜RESPONSIBLE〓〓〓
*/
#about .partner{
	margin: 0 0 3em 0;
	font-family: "Oswald";
	line-height: 1em;
}
#about .partner h3{
	margin: 0 0 2em 0;
	color: #00bbc2;
	letter-spacing: 0.085em;
}
#about .partner li{
	margin: 0 0 0.7em 0;
	letter-spacing: 0.085em;
}






/*
〓〓〓ブロック名〓〓〓
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　概要_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
お問い合わせ_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#contact{
	padding: 15% 15% 0 15%;
}

#contact h2{
	font-size: 30px;
	font-family: "Oswald";
	line-height: 1em;
	letter-spacing: 0.1em;
	margin: 0 0 1em 0;
}

#contact .read{
	margin: 0 0 5em 0;
	color: #777777;
}
#contact .read em{
	font-style: normal;
	text-decoration: underline;
	color: #00bbc2;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　お問い合わせ_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
フッター_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#footer{
	display: flex;
	align-items: center;
	background-color: rgba(255,255,255,0.8);
	margin: 30% 0 0 0;
	padding: 3%;
	border-top: 1px #efefef solid;
}






/*
〓〓〓権利表記〓〓〓
*/
#footer small{
	font-size: 13px;
	font-family: "Oswald";
	line-height: 1em;
	letter-spacing: 0.085em;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　フッター_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コンテンツ名_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/**/






/*
〓〓〓ブロック名〓〓〓
*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　コンテンツ名_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/