@charset "UTF-8";

// COLOR
@white:#fff;
@black:#222;
@grayD:#555;
@gray:#999;
@grayL:#ccc;
@grayLL:#fafafa;
@red:#903;

// LESS
@ncc:no-repeat center center;

// MIXIN
.trans{-webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s;}
.fb{font-weight:bold;}
.tac{text-align:center;}
.tar{text-align:right;}
.tdn{text-decoration:none;}
.tdu{text-decoration:underline;}
.bgsc{background-size:cover;}
.inline{display:-moz-inline-box; display:inline-block;}

/*BASE*/
html{height:100%;}
body{width:100%; height:100%; margin:0; padding:0; line-height:1; -webkit-text-size-adjust:100%; color:@white; background:@black;
font-family:"Noto Sans JP",Roboto,"Helvetica Neue","Droid Sans",Lato,Arial,"游ゴシック",YuGothic,"游ゴシック体","游ゴシック Medium","Yu Gothic Medium","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;}
img{max-width:100%; height:auto; vertical-align:middle;}
/*CF*/
.cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;}
/*LINK*/
a:link{color:@black; .tdu(); .trans();}
a:visited{color:@black; .tdu();}
a:hover{color:@grayL; .tdu();}
a:active{color:@black; .tdn();}
a img{border:none; .tdn(); .trans();}
a img:hover{border:none; opacity:0.6; .tdn();}
/*LETTER*/
strong{.fb();}
.attention{color:@red;}
.small{font-size:85%;}
::selection{background:@black; color:@black;}
::-moz-selection{background:@black; color:@black;}

/*HEADER*/
header{position:relative; padding:20px; background:@white;
	h1{width:220px;}
}
/*FOOTER*/
footer{padding:6% 0; background:@white; .tac();
	h1{width:220px; margin:0 auto 9%;}
	nav.footsns{margin:0 auto 9%;.tac();
		li{margin:0 5px; width:36px; .inline();
			img{border-radius:4px;}
		}
	}
	small{color:@black; font-size:85%; .fb();}
}

/*MAIN*/
main{clear:both; display:block; overflow:hidden;}

/*SLIDER*/
div.topteaser{position:relative; width:100%; height:auto; margin:0 auto 12%;
	div.topslider{position:relative; width:100%; height:460px; background:url("../img/bg.jpg") @ncc; .bgsc();}
	div.toptxt{position:absolute; width:100%; top:45%; color:@white; .fb(); .tac();
		h1{font-size:130%; margin:0 auto 3%; text-shadow:1px 1px 3px @black; font-weight:900; .tac();}
		h2{font-size:180%; margin:0 auto; text-shadow:1px 1px 3px @black; font-weight:900; .tac();}
	}
}

/*TOP*/
div.topbox{margin:0 0 12%;
	article{
		h2{font-size:180%; line-height:1.85; letter-spacing:2px; margin:0 0 6%; .tac(); .fb();}
		h3{font-size:135%; line-height:1.85; letter-spacing:1px; margin:0 0 6%; .tac(); .fb();}
		p{font-size:108%; line-height:1.7; margin:0 0 6%;}
		ul.about{
			li{border:5px solid @white; border-radius:12px; margin:0 0 6%; padding:6%;
				img{width:30%; margin:0 auto 6%; display:block;}
				h3{line-height:1.6; letter-spacing:1px; font-size:124%; margin:0; text-align:left;}
			}
			li:last-child{margin:0;}
		}
		div.contactbox{background:@white; color:@black!important; border-radius:12px; padding:6%;
				display:-webkit-flex; display:flex;
				-webkit-flex-flow:row nowrap; flex-flow:row nowrap; 
				-webkit-justify-content:center; justify-content:center;
				-webkit-align-items:center; align-items:center;
			section{text-align:left; width:80%;
				h2{text-align:left; line-height:1.5; margin:0;}
				h3{font-size:170%; letter-spacing:0; text-align:left; font-weight:900; line-height:1.5; margin:0; }
			}
			section:first-child{width:15%; margin-right:5%;}
		}
		div.bizbox{background:@white; color:@black!important; border-radius:12px; padding:6% 6% 3%;
			h2{border-bottom:3px solid @black; padding:0 0 10px;}
		}
		div.worksbox{
			h2{border-bottom:3px solid @white; padding:0 0 10px;}
			h3{text-align:left;}
			ul{margin:0 0 3%;
				display:-webkit-flex; display:flex;
				-webkit-flex-flow:row wrap; flex-flow:row wrap; 
				-webkit-justify-content:flex-start; justify-content:flex-start;
				-webkit-align-items:flex-start; align-items:flex-start;
				li{width:48.5%; margin:0 0 3%;}
				li:nth-child(2n){margin:0 0 3% 3%;}
			}
		}
	}
}
/*PAGE TABLE*/
table{width:100%; margin-bottom:6%; font-size:116%; border-top:1px solid @gray;
	tr{width:100%; border-bottom:1px solid @gray;
		th{padding:20px 0 10px; width:100%; display:block; text-align:left; .fb();}
		td{padding:0 0 20px; width:100%; display:block;
			a:link{color:@white; .tdu();}
			a:visited{color:@white; .tdu();}
			a:hover{color:@gray; .tdu();}
			a:active{color:@white; .tdn();}
		}
	}
}
.vbox-close{
	cursor:pointer;
	position:fixed;
	top:2%;
	right:2%;
	width:64px;
	height:64px;
	padding:0;
	display:block;
	background-position:10px center;
	overflow:hidden;
	font-size:54px;
	font-family:sans-serif;
	line-height:1;
	z-index:20000;
	.tac();
}
/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){
html,body{min-width:1180px;}
.sp{display:none;}
.leftbox{padding-right:4%;}
.rightbox{padding-left:4%;}
.leftboxs{padding-right:2%;}
.rightboxs{padding-left:2%;}
.pcmb{margin-bottom:6%!important;}
.mb{margin-bottom:6%!important;}
.mbs{margin-bottom:3%!important;}
.pctar{text-align:right;}

/*HEADER*/
header{z-index:10; position:absolute; width:100%; background:rgba(255,255,255,0.9); padding:25px; margin:0 auto; min-width:1180px;
	h1{float:left; width:300px;}
	nav{float:right; margin:12px 0 0;
		ul{display:block; font-size:124%; letter-spacing:1px;
			li{padding:0 15px; .inline(); .fb(); 
				a:link{color:@black; .tdn();}
				a:visited{color:@black; .tdn();}
				a:hover{color:@gray; .tdn();}
				a:active{color:@black; .tdn();}
			}
		}
	}
}

/*FOOTER*/
footer{padding:30px 0;
	div.footleft{float:left;
		h1{width:300px; margin:0;}
	}
	div.footright{float:right; margin:0 auto;
		nav.footsns{margin:0 auto 15px; text-align:right;}
		small{text-align:right;}
	}
}

/*SLIDER*/
div.topteaser{z-index:1; height:100vh; margin:0 auto 6%;
	div.topslider{height:100vh;}
	div.toptxt{top:47%;
		h1{font-size:200%; margin:0 auto 2%;}
		h2{font-size:350%;}
	}
}
/*TOP*/
div.topbox{
	h2{font-size:182%; letter-spacing:2px; margin:0 0 1%;}
	h3{font-size:169%; margin:0 0 3%;}
	h4{font-size:139%; line-height:1.5; margin:0 0 2%;}
	p{font-size:124%; line-height:1.8; margin:0 0 8%;}
}
div.topbox{margin:0 0 6%;
	article{
		h2{font-size:250%; line-height:1; letter-spacing:3px; margin:0 0 3%;}
		h3{font-size:135%; line-height:1.85; letter-spacing:1px; margin:0 0 6%; .tac(); .fb();}
		p{font-size:108%; line-height:1.7; margin:0 0 6%;}
		ul.about{
			display:-webkit-flex; display:flex;
			-webkit-flex-flow:row nowrap; flex-flow:row nowrap; 
			-webkit-justify-content:space-between; justify-content:space-between;
			-webkit-align-items:flex-start; align-items:flex-start;
			li{width:23%; margin:0; padding:4% 2% 2%;
				img{width:60%; margin:0 auto 15%;}
			}
		}
		div.contactbox{width:40%; margin:0 auto; padding:3% 5%;
			section{text-align:left; width:74%;
				h2{font-size:200%;}
			}
			section:first-child{width:20%; margin-right:6%;}
		}
		div.bizbox{padding:3%;
			h2{padding:0 0 20px;}
			h3{font-size:170%; margin:0;}
		}
		div.worksbox{
			h2{padding:0 0 20px;}
			h3{font-size:170%; margin:0 0 3%; .tac();}
			ul{margin:0 0 3%;
				-webkit-justify-content:center; justify-content:center;
				li{width:32%; margin:0 2% 2% 0;}
				li:nth-child(2n){margin:0 2% 2% 0;}
				li:nth-child(3n){margin:0 0 2%;}
			}
		}
	}
}

/*PAGE TABLE*/
table{width:50%; margin:0 auto;
	tr{
		th{padding:20px; width:auto; display:table-cell; background:none; white-space:nowrap; text-align:right; letter-spacing:2px;}
		td{padding:20px; width:auto; display:table-cell;}
	}
}

.vbox-container{
	img{max-width:45%!important;}
}
}

/************************ SP ************************/
@media (max-width:768px)
{
	.pc{display:none;}
	.mbs{margin:0 0 3%;}
	.mb{margin:0 0 6%;}
	.spmb{margin-bottom:6%;}
}
/*-----------------------------------------------------
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/