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







/* common */
#container {
	width:100%;
}
h1 {
    text-shadow: 0px 0px 10px #012B45;
}
h2,h3	{
	font-size:1.5em;
	
	text-align:center;
	margin:0;
	
    text-shadow: 0px 0px 10px #012B45;
}

@media only screen and (max-width:768px){
	h1 svg  {
	}
}


@media only screen and (max-width:768px){
}






/* more,archives,info link */
p.more {
	font-family:'rfa_gothic_stdregular', Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	
	display:block;
	
	font-size:2em;
	text-align:right;
	
	margin:0.5em auto 0;
}
p.more a{
	position:relative;
	padding-left:35px;
	
	overflow:hidden;
	transition: all 0.2s;
}
p.more a:hover {
	opacity:0.5;
}
p.more a:before, p.more a:after {
	content:"";
	transition: transform 1.2s;
	
	width:22px;
	height:22px;
	position:absolute;
	display:block;
	
	bottom:0;
	left:0;
	
	background-image:url('../svg/archive.svg');
	background-repeat:no-repeat;
	background-position:0 50%;
	transition: all 0.2s;
	
	animation: arrowMove 1.5s ease-in-out infinite;
}
p.more a:after {
	opacity:0;
}
p.more a:hover:before {
	transform:scale(0.9,0.9) rotate(250deg);
	opacity:1;
	bottom:9px;
}
p.more a:hover:after {
	transform:scale(0.9,0.9) rotate(210deg);
	opacity:1;
	bottom:-4px;
}
@media only screen and (max-width:768px){
	p.more {
		margin:1em auto 0;
		font-size:1.8em;
		text-align:center;
	}
}





/* article */
/*article {
	margin-bottom:20em;
}
article section p {
	line-height:220%;
}*/

section {
	margin-bottom:20em;
}

h1 {
	font-size:2.5em;
	margin-top:150px;
	margin:0 auto 1em;
}
header + section {
	margin-top:0;
}
@media only screen and (max-width:768px){
	section {
		margin-bottom:10em;
	}
	h1 {
		text-align:center;
		padding:0;
		font-size:2.2em;
		margin-bottom:0.5em;
	}
	
}




/* canvas */
#canvas {
	position:fixed;
	z-index:10;	
	pointer-events:none;
	-webkit-transform: translate3d(0,0,0);
}
@media only screen and (max-width:768px){

}








/* main visual */
#mv {
	height:50em;
	height:100vh;
	position:relative;
}
#mv div {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width:100%;
	padding-bottom:5vh;
}
#mv h1 {
	width:100%;
	max-width:none;
	max-width:initial;
	padding:0;
	margin:0;
	text-align:center;
}
#mv h1 img {
	width:320px;
}
#mv p.scroll {
	position:absolute;
	bottom:18vh;
	font-family:'rfa_gothic_stdregular';
	
	text-align:center;
	font-size:1.2em;
	
	height:70px;
	width:100%;
	box-sizing:border-box;
	padding-bottom:40px;
}
#mv p.scroll:after {
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:35px;
	top:30px;
	background-image:url('/svg/scroll.svg');
	background-repeat:no-repeat;
	background-position:50% 0;
	animation: scrollMove 1.5s ease-in-out infinite;
}
@keyframes scrollMove {
	0% {margin-top:0px;}
	40% {margin-top:8px;}
	60% {margin-top:8px;}
	100% {margin-top:0px;}
}

@media only screen and (max-width:768px){
	#mv div {
		padding-bottom:5vh;
	}
	#mv h1 {
	}
	#mv h1 img {
		width:75%;
		max-width:300px;
	}
	#mv p.scroll {
		bottom:0;
	}
}













/* service */
#service {
	position:relative;
	padding-top:200px;
}
#service h1 {
	position:absolute;
	display:inline;
	left:10%;
	top:222px;
	top:calc(200px + 0.7em);

	
	font-size:2.5em;
	margin:0;
	padding:0;
}
#service h2 {
	text-align:center;
	
	font-size:5em;
	letter-spacing:0.00em;
	
	position:relative;
	left:0.5em;
}
#service h2 img {
	vertical-align:middle;
	margin:0 0.3em;
}
#service p {
	text-align:center;
	font-size:2em;
	margin-bottom:5em;
}

#service p.more {
	text-align:center;
	margin:4em auto 0;
}
#service div.chart {
	text-align:center;
}

@media only screen and (max-width:768px){
	#service {
		padding-top:0;
	}
	#service h1 {
		position:static;
		display:block;
		
		text-align:center;
		padding:0;
		font-size:2.2em;
		margin-bottom:0.5em;
	}
	#service h2 {
		width:100%;
		left:0;
		display:block;
		text-align:center;
	}
	#service h2 span {
		font-size:10vw;
	}
	#service h2 img {
		width:10vw;
	}
	#service p {
		font-size:1.5em;
		margin-top:0;
	}
}

#serviceTitle {
	position:absolute;
	top:0;
	left:0;
}














/* works */

#works div.showcases ul {
	display:flex;
	
	margin-bottom:1.6em;
}
#works div.showcases ul a {
	width:49%;
	width:calc(100% / 2 - 1px);
	
	max-width:600px;
	margin-left:1px;
}
#works div.showcases ul li {
}
#works div.showcases ul li dl {
	position:relative;
	margin:0;
	
	display:flex;
	align-items: center;
	box-sizing:border-box;
	
	padding:10px;
	padding-left:20px;
	padding-right:60px;
	
		min-height:70px;
}
#works div.showcases ul li dl dt {
}
#works div.showcases ul li dl dd {
	margin-left:10%;
}

#works div.clients {
	background-color:white;
}
#works div.clients h2 {
	font-size:2.5em;
	color:black;
	text-shadow:none;
	padding-top:0.5em;
	padding-left:13.3%;
	text-align:left;
}
#works div.clients ul {
	padding:1em 1em 0;
	
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-items: center;
	align-items: center;
	
	box-sizing:border-box;
}
#works div.clients ul li {
	padding:10px;
}
#works div.clients ul li img {
	width:100%;
}
#works div.clients p {
	text-align:right;
	color:black;
	margin:1em 1em;
	padding-bottom:1em;
	font-size:1.5em;
}
@media only screen and (max-width:768px){
	#works div.showcases ul {
		-webkit-flex-direction:column;
		flex-direction:column;
	}
	#works div.showcases ul a {
		width:100%;
		
		max-width:auto;
		max-width:initial;
		margin-left:0;
	}
	#works div.showcases ul li img {
		width:100%;
	}
	#works div.showcases ul li dl {
		width:100%;
		
		padding:20px;
		padding-right:60px;
	}
	
	#works div.clients h2 {
		font-size:2.2em;
		padding-top:0.5em;
		padding-left:0;
		text-align:center;
	}
	#works div.clients ul {
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		padding:1.5em 1em 0;
	}
	#works div.clients ul li {
		width:30%;
	}
	#works div.clients ul li:nth-child(1) {
		width:28%;
	}
	#works div.clients ul li:nth-child(2) {
		width:22%;
		margin-bottom:1.5em;
	}
	#works div.clients ul li:nth-child(3) {
		width:28%;
	}
	#works div.clients ul li:nth-child(4) {
		width:42%;
	}
	#works div.clients ul li:nth-child(5) {
		width:40%;
	}
	#works div.clients ul li {
		padding:0;
	}
	#works div.clients p {
		font-size:1.2em;
	}
}

#works div.showcases a.hoverPanelCS {
	background-color:white;
	pointer-events:none;
}
#works div.showcases a.hoverPanelCS li p {
	width:100%;
	text-align:center;
	font-size:1.6em;
	color:#CCC;
	font-family: 'rfa_gothic_stdregular';
	margin:1.5em 0;
}
@media only screen and (max-width:768px){
	#works div.showcases a.hoverPanelCS {
		margin-bottom:1px;
	}
	#works div.showcases a.hoverPanelCS p {
		margin:0.5em 0 !important;
	}
}






/* topics */

#topics {
	
}
#topics ul {
	display:flex;
	flex-wrap:wrap;
}
#topics ul a {
	width:33%;
	width:calc(100% / 3 - 1px);
	
	max-width:400px;
	margin-left:1px;
	margin-bottom:1px;
}
#topics ul li div.img {
	width:100%;
	height:200px;
	overflow:hidden;
}
#topics ul li div.img img {
	object-fit:cover;
	width:100%;
	height:100%;
}
#topics ul li div.txt p {
	margin:0;
	line-height:140%;
	padding:20px;
	padding-right:50px;
	text-align:left;
}
@media only screen and (max-width:768px){
	#topics ul a {
		width:49%;
		width:calc(50% - 1px);
		
		max-width:auto;
		max-width:initial;
	}
	#topics ul li div.img {
		height:50px;
		height:30vw;
	}
	#topics ul li div.txt p {
		margin:0;
		padding:10px;
		padding-bottom:60px;
		font-size:0.8em;
	}
}







/* press release */
#press {
	
}
#press dl {
	padding-left:5%;
	text-align:left;
}
#press dl dt {
	float:left;

	font-size:1.6em;
	width:6em;
	font-family:'rfa_gothic_stdregular';
}
#press dl dd {
	font-size:1.3em;
	margin-left:6em;
	margin-bottom:1em;
}
#press dl dd:after {
  content: '';
  display: block;
  clear: both;
}
#press dl dd a			{text-decoration:underline;}
#press dl dd a:link		{text-decoration:underline;}
#press dl dd a:hover	{text-decoration:none;}

@media only screen and (max-width:768px){
	#press dl {
		padding-left:0;
		font-size:1em;
	}
	#press dl dt {
		float:none;
		width:100%;
		font-size:1.4em;
		display:block;
	}
	#press dl dd {
		font-size:1em;
		margin-left:0;
		margin-bottom:2em;
	}
	#press dl dd:last-child {
		margin-bottom:4em;
	}
}







/* philosophy */
#philosophy {
	position:relative;
}
#philosophy p.txt {
	font-size:2em;
	line-height:140%;
	padding-left:5%;
}
#philosophy p.more {
	text-align:center;
	padding-left:0;
	line-height:220%;
	margin:4em auto 0;
}
@media only screen and (max-width:768px){
	#philosophy p.txt {
		padding:0;
		font-size:1.5em;
		text-align:center;
	}
	#philosophy p.more {
		margin-top:-1em;
		font-size:1.8em;
	}
}


#philoTirangles {
	position:absolute;
	top:0;
	right:0;
	
	/*border:1px solid red;*/
}
@media only screen and (max-width:768px){
	#philoTirangles {
		position:static;
		width:100%;
		margin-top:-30px;
		margin-top:-10vh;
	}
}







/* recruit */
#recruit {
	position:relative;
}
#recruit p {
	text-align:left;
	margin-bottom:2em;
	width:50%;
	font-size:1.4em;
	padding-left:5%;
}
#recruit h2 {
	font-size:3em;
	text-align:left;
	margin-bottom:2em;
	padding-left:5%;
}
#recruit div.clouds {
	padding-left:5%;
}

#recruit div#girl {
	width:260px;
	height:297px;
	
	/*background-image:url('../svg/girl.svg');
	background-repeat:no-repeat;*/
	
	position:absolute;
	right:150px;
	top:-100px;
}
#recruit div#boy {
	width:219px;
	height:445px;
	
	/*background-image:url('../svg/boy.svg');
	background-repeat:no-repeat;*/
	
	position:absolute;
	right:-50px;
	top:20px;
}
#recruit p.more {
	text-align:center;
	margin:2em auto 0;
	font-size:2em;
	padding-left:0;
}
@media only screen and (max-width:768px){
	#recruit p {
		width:100%;
		padding-left:0;
		font-size:1em;
	}
	#recruit h2 {
		font-size:2em;
		margin:0;
		padding-left:0;
	}
	#recruit div.bg {
		position:relative;
		width:1px;
		height:230px;
		margin:0 auto;
	}
	#recruit div#girl {
		/*width:260px;
		height:297px;*/
		width:130px;
		height:149px;
		background-size:contain;
		
		left:-130px;
		top:20px;
	}
	#recruit div#girl svg{
		width:130px;
		height:149px;
	}
	
	#recruit div#boy {
		/*width:219px;
		height:445px;*/
		width:110px;
		height:222px;
		background-size:contain;
		
		left:0;
		top:60px;
	}
	#recruit div#boy svg{
		width:110px;
		height:222px;
	}
	#recruit div.clouds {
		padding-left:0;
	}
}
#recruit div.init {
	display:none;
}
#recruit div.play {
	display:block;
}
#recruit div.init svg path {
	stroke-dasharray: 5000;
	stroke-dashoffset:5000;
}
#recruit div.play svg path {
	animation:svgAnimation 3s ease-in-out 0s forwards;
}
@keyframes svgAnimation{
	0%		{stroke-dashoffset:5000;}
	100%	{stroke-dashoffset:0;}
}












/* about */
#about {
	
}
#about ul {
	display:flex;
	flex-wrap:wrap;
}
#about ul a {
	width:33%;
	width:calc(100% / 3 - 1px);
	
	max-width:400px;
	margin-left:1px;
	
}
#about ul li div.img {
	width:100%;
	overflow:hidden;
}
#about ul li div.img img {
	object-fit:cover;
	width:100%;
	height:100%;
}
#about ul li div.txt {
	text-align:left;
	padding:1em 2em 6em;
}
#about ul li h2 {
	text-shadow:none;
	text-align:left;
	font-size:2.2em;
	white-space:nowrap;
}
@media only screen and (max-width:768px){
	#about ul {
		flex-direction:column;
	}
	#about ul a {
		width:100%;
		margin-left:0;
		margin-bottom:1px;
		max-width:auto;
		max-width:initial;
	}
	#about ul a li {
		width:100%;
	}
	#about ul li div.img {
		height:150px;
/*		overflow:hidden;*/
	}
/*	#about ul li img {
		width:100%;
		transform:translateY(-30%);
	}*/
	#about ul li div.txt {
		padding:0.5em 1em 2em 1.5em;
	}
	#about ul li h2 {
		font-size:2em;
		display:inline-block;
		margin-right:0.5em;
		position:relative;
		top:0.1em;
	}
}