@charset "utf-8";
/* 
00 common
01 margin
02 padding
03 formカスタム
04 layout
05 header
06 footer

00 SP用layout
*/

/* 00 common
-------------------------------------------------------*/
*{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,input,textarea,table {font-size:100%;}
dt,dd,form,textarea,input,select,option,address,em {
	font-weight:normal;
	font-style: normal;
}
td,th {font-weight:normal;vertical-align:top;text-align:left;}
img{border:none;vertical-align: bottom;}
table {border:none;}
ul,ol,li{ list-style-type:none; }

a {border:none;text-decoration:none;}
/*a:link{text-decoration: none; color: #993300; }*/
/*a:visited{text-decoration: none; color: #999999;}*/
/*a:hover{text-decoration: underline; color: #993300;}*/
/*a:active{text-decoration: none; color: #000000;}*/

.clear { clear:both; }
.txt-right { text-align:right; }
.txt-left { text-align:left; }
.txt-center { text-align:center; }
.floatL { float:left; }
.floatR { float:right; }

.indent {
	padding-left:1em;
	text-indent:-1em;
}
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/* 01 margin
-------------------------------------------------------*/
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}


.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}


.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr25 {margin-right:25px;}
.mr30 {margin-right:30px;}


.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}

/* 02 padding
-------------------------------------------------------*/
.pAll5 {padding:5px;}
.pAll10 {padding:10px;}
.ptb20 {padding:20px 0;}

.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt25 {padding-top:25px;}
.pt30 {padding-top:30px;}

.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl25 {padding-left:25px;}
.pl30 {padding-left:30px;}

.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr25 {padding-right:25px;}
.pr30 {padding-right:30px;}

.pb5 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb25 {padding-bottom:25px;}
.pb30 {padding-bottom:30px;}

/* 03 formカスタム
-------------------------------------------------------*/
/*
textarea {
	width: 100% ;
	height: 100px ;
	margin-bottom: 10px ;
}*/
input[type="text"],textarea,select {
	color: #5a5c63;
	font-size: 100% ;
	padding: 3px ;
	border: 1px solid #ccc;
	border-radius: 5px;
	/*-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) inset ;*/
	-webkit-box-sizing: border-box;
}

input[type="text"] {
	width: 100%;
	padding: 5px;
	vertical-align: middle;
	font-size: 1.24rem;
}
textarea {
	width: 100%;
	height: 14rem;
	padding: 10px;
	font-size: 1.24rem;
	resize:vertical;
}

button,
input[type="submit"]{
	padding: 10px 30px;
	display: inline-block;
	background: #f58a80;
	border-radius: 5px;
	color: #fff;
	font-size: 1.13rem;

	border: none;
	-webkit-box-sizing: content-box;
	box-sizing: border-box;
	-webkit-appearance: button;
	appearance: button;
	cursor: pointer;
	text-decoration: none;
}
button:hover,
input[type="submit"]:hover{
	opacity: 0.8;
	filter: alpha(opacity=0.8);
}



/* select
-> .slct > select
---------------------------------------*/
.slct{
	display: inline-block;
	position: relative;
}
.slct:before{
	content:'';
	position: absolute;
	top:50%;
	right:8px;
	margin:-5px 0 0 0;
	width:0;
	height:0;
	border-style: solid;
	border-width:7px 4px 0 4px;
	border-color:#333 transparent transparent transparent;
	pointer-events: none;
}
select {
	padding: 5px 25px 5px 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 1.24rem;
	background-color: #fff;
}


/* radio checkbox
-> label > input+[span[.rb||.cb] || div[.rb||.cb]]
---------------------------------------*/
input[type="checkbox"],
input[type="radio"]{display: none;}
label{
	cursor: pointer;
	display: block;
}
label > span,
label > div{
	padding-left: 30px;
	position: relative;
	display: block;
}
label .cb:before{
	content: "";
	width: 20px;
	height: 20px;
	margin-top: -10px;
	display: block;
	position: absolute;
	top: 50%;
	left: 5px;
	border-radius: 3px;
	background: #f6f8fc;
	border: 2px solid #ddd;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
label .cb:after{
	content: "";
	width: 5px;
	height: 12px;
	margin-top:-9px; 
	display: block;
	position: absolute;
	top: 50%;
	left: 11px;
	transform: rotate(40deg);
	border-width: 0 3px 3px 0;
	border-style: solid;
	border-color: #ddd;
}
label input:checked + .cb:before{background: #f6f8fc; border: 2px solid #f12b5e;}
label input:checked + .cb:after{border-color: #f12b5e;}

label .rb:before{
	content: "";
	width: 20px;
	height: 20px;
	margin-top: -10px;
	display: block;
	position: absolute;
	top: 50%;
	left: 5px;
	border-radius: 50%;
	background: #f6f8fc;
	border: 2px solid #ddd;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
label input:checked + .rb:before{background: #f6f8fc; border: 2px solid #f12b5e;}
label input:checked + .rb:after{
	content: "";
	width: 10px;
	height: 10px;
	margin-top:-5px; 
	display: block;
	position: absolute;
	top: 50%;
	left: 10px;
	border-radius: 50%;
	background: #f12b5e;
}
label > div > span{
	display: block;
	font-size: .75rem;
}

/* 04 layout
-------------------------------------------------------*/
/*-----------------------------------------------------
各pxに対応する、IEハックで指定するパーセント
12px 	75%
13px 	82%
14px 	88%
15px 	94%
16px 	100%


基本サイズ12px	基本サイズ13px	基本サイズ14px	基本サイズ16px
10px 	 84%			10px 	 77%			10px 	 72%			10px 	 63%
11px 	 92%			11px 	 85%			11px 	 79%			11px 	 69%
12px 	100%			12px 	 93%			12px 	 86%			12px 	 75%
13px 	109%			13px 	100%			13px 	 93%			13px 	 81%
14px 	117%			14px 	108%			14px 	100%			14px 	 88%
15px 	125%			15px 	116%			15px 	108%			15px 	 94%
16px 	134%			16px 	124%			16px 	115%			16px 	100%
17px 	142%			17px 	131%			17px 	122%			17px 	106%
18px 	150%			18px 	139%			18px 	129%			18px 	113%
19px 	159%			19px 	147%			19px 	136%			19px 	119%
20px 	167%			20px 	154%			20px 	143%			20px 	125%
21px 	175%			21px 	162%			21px 	150%			21px 	131%
22px 	184%			22px 	170%			22px 	158%			22px 	138%
23px 	192%			23px 	177%			23px 	165%			23px 	144%
24px 	200%			24px 	185%			24px 	172%			24px 	150%
25px 	209%			25px 	193%			25px 	179%			25px 	156%
26px 	217%			26px 	200%			26px 	186%			26px 	163%
-------------------------------------------------------*/

html {height:100%;}
body {
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	/*font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", serif;*/
	font-size:16px;
	color:#333333;
	line-height:1.4;
	margin:0px;
	padding:0px;
	text-align:center;
}
#contents{
	padding: 80px 0 0;
	color: #5d3b17;
}
.inner{
	width: 1100px;
	height: 100%;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

#hd{height: 220px;}
#hd h2{
	height: 100%;
	display: -webkit-flex;
	display: flex;
}
#hd h2 span{
	height: 100%;
	padding-left: 20px;
	flex: 1 1 420px;
	background: #50a235;
	display: -webkit-flex;
	display: flex;
	flex-flow: column;
	justify-content: center;
}
#hd h2:after{
	content: '';
	display: block;
	flex:1 1 680px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: #387100;
}
#service h2:after{background-image: url(../img/hd/bg_service.jpg);}
#price h2:after{background-image: url(../img/hd/bg_price.jpg);}
#faq h2:after{background-image: url(../img/hd/bg_faq.jpg);}
#company h2:after{background-image: url(../img/hd/bg_company.jpg);}
#contact h2:after{background-image: url(../img/hd/bg_contact.jpg);}
#blog h2:after{background-image: url(../img/hd/bg_blog.jpg);}
#nas h2:after{background-image: url(../img/hd/bg_nas.jpg);}
#voice h2:after{background-image: url(../img/hd/bg_voice.jpg);}
#recruit h2:after{background-image: url(../img/hd/bg_recruit.jpg);}
#partner h2:after{background-image: url(../img/hd/bg_partner.jpg);}

/* メニューbtn (PC非表示)
------------------------------------------ */
.nv{display: none;}

/* 05 header
-------------------------------------------------------*/
header h1{padding: 16px 10px;}
header{
	min-width: 1100px;
	width: 100%;
	background: rgba(255,255,255,.7);

	display: -webkit-flex;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;

	position: fixed;
	top: 0;
	z-index: 9999;
}
header nav{display: table;}
header nav ul,
header nav p{
	display: table-cell;
	vertical-align: middle;
	font-size: .88rem;
}
header nav ul{min-width:790px;}
header nav ul li{float: left;}
header nav ul li:not(:last-child):after{
	content: "/";
	display: inline-block;
	color: #b7b9a3;
}
header nav ul li a{
	padding: 10px 5px;
	color: #464646;
	display: inline-block;
}
header nav ul li a:hover{
	color: #50a235;
	text-decoration: underline;
}

header nav p{padding: 0 3px;}
header nav p a{
	width: 4.1em;
	padding: 10px 20px;
	border-radius: 5px;
	color: #fff;
	font-weight: bold;
	display: inline-block;
}
header nav p a:hover{
	opacity: 0.8;
	filter: alpha(opacity=0.8);
}
#nvContact a{background: #f58a80;}
#nvBlog a{background: #50a235;}

/* 06 footer
-------------------------------------------------------*/
#info{
	padding: 50px 0;
	background: #f0ece4;
	color: #5d3b17;
}
#info .inner{
	padding: 0 100px;
	display: -webkit-flex;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
	align-items: center;
}
#info .inner div p:nth-child(1){font-size: .88rem;}
#info .inner div p:nth-child(2) a{
	padding-left: 50px;
	background: url(../img/common/icn_tel.png) 0 40% no-repeat;
	-webkit-background-size: 46px 33px;
	background-size: 43px 30px;
	font-size: 2.1rem;
	font-weight: bold;
	color:#5d3b17;
	display: block;
	margin: 5px 0 0;
}
#info .inner div p:nth-child(3){font-size: 113%;font-weight: bold;}
#info .inner div p:nth-child(3) span{padding-left: 10px;}
#info .inner ul{
	display:flex;
	flex-flow:row wrap;
	justify-content: space-between;
	width: 590px;
	padding: 20px 0;
}
#info .inner ul li a{
	width: 280px;
	padding: 10px 0;
	display: inline-block;
	border-radius: 5px;
	color: #fff;
	font-size: 1.13rem;
}
#info .inner ul li a span{display: inline-block;}
#info .inner ul li a:hover, #info .inner > p a:hover{
	opacity: 0.8;
	filter: alpha(opacity=0.8);
}
#info .inner #mail a{background: #60b344;}
#info .inner #mail a span{
	height: 40px;
	line-height: 40px;
	padding-left: 60px;
	/*display: block;*/
	background: url(../img/common/icn_mail.png) 0 50% no-repeat;
	-webkit-background-size: 46px 33px;
	background-size: 46px 33px;
}
#info .inner #toform a{background: #f58a80;}
#info .inner #toform a span{
	height: 40px;
	line-height: 40px;
	padding-left: 60px;
	/*display: block;*/
	background: url(../img/common/icn_contact.png) 0 50% no-repeat;
	-webkit-background-size: 54px 40px;
	background-size: 54px 40px;
}
#info .inner > p a img{
	width:590px;
	height:90px;
}

footer {
	min-width: 1100px;
	height: 580px;
	text-align:center;

	background-image: url(../img/common/footer_bg.png);
	background-position: 50% 0;
	-webkit-background-size: cover;
	background-size: cover;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}
footer #ftlinks{
	padding: 75px 0;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer #ftlinks li{padding: 0 15px;}
footer #ftlinks li a{
	/*padding: 15px 10px 15px 80px;*/
	padding: 15px 25px 15px 80px;
	border-radius: 5px;
	display: -webkit-flex;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	background-position: 20px 50%;
	background-repeat: no-repeat;
	-webkit-background-size: 42px 42px;
	background-size: 42px 42px;
	text-align: left;
	color: #fff;
}
footer #ftlinks li#bl a{
	padding: 16px 17px 15px 60px;
	font-size:0.95rem;
	background-position: 15px 50%;
}
footer #ftlinks li#tw a{background-color:#1da1f2; background-image: url(../img/common/icn_twt.png);}
footer #ftlinks li#bl a{background-color:#50a235; background-image: url(../img/common/icn_blog.png);}
footer #ftlinks li#fb a{background-color:#45619d; background-image: url(../img/common/icn_fb.png);}
footer #ftlinks li a:hover, footer #ftlinks li a:hover{
	opacity: 0.8;
	filter: alpha(opacity=0.8);
}

footer small{
	padding: 70px 0;
	background: url(../img/common/logo.png) 50% 0 no-repeat;
	font-style:normal;
	display: block;
}


/* 00 SP用layout
------------------------------------------------------
######################################################
######################################################
######################################################
--------------------------------------------------- */
@media screen and (max-width: 768px){
	section{overflow: hidden;}
	.nv{display: block;}
	#contents{padding: 55px 0 0;}
	#contents .inner{
		width: 100%;
		height: auto;
	}
	#hd{height: auto;}
	#hd h2{
		height: 100%;
		display: block;
	}
	#hd h2 span{
		height: 100%;
		padding: 5px;
		background: #50a235;
	}
	#hd h2 span img{
		max-width: 290px;
		width: 100%;
		height: auto;
	}
	#hd h2:after{
		width: 100%;
		height: 150px;
		-webkit-background-size: cover;
		background-size: cover;
	}

/* header
-------------------------------------------------------*/
	header{
		min-width: 100%;
		padding: 5px;
		background: rgba(255,255,255,.7);
		position: fixed;
		display: block;
		/*display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		justify-content: right;
		align-items: center;*/
		z-index: 9999;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#hdBase{
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
	}
	header h1{
		padding: 10px 0;
		flex:1 1 167px;
		text-align: left;
	}
	header h1 img{width: 128px;height: 24px;}
	#nvBtn{flex: 0 0 45px;}
	#hdContact{flex: 0 0 auto;}
	header nav ul{min-width:unset;}

/* メニューbtn
------------------------------------------*/
	#nvBtn a{
		width: 45px;
		height: 20px;
		padding-top: 25px;

		border-radius: 30px;
		text-align: center;
		font-size: .63rem;
		font-weight: bold;

		text-decoration: none;
		outline: none;
		background: #50a235;
		color: #fff;
		display: block;
		position: relative;
	}
	#nvBtn span {
		width: 50%;
		height: 2px;
		padding-top: 2px;
		background-color: #fff;
		border-radius: 4px;
		position: absolute;
		top: 9px;
		left: 25%;
		box-sizing: border-box;
		text-indent: -9999px;
	}
	#nvBtn span:before,
	#nvBtn span:after{
		width: 100%;
		height: 2px;
		display: block;
		content: '';
		background-color: #fff;
		border-radius: 4px;
		position: absolute;
		left: 0;
	}
	#nvBtn span:before {top: 6px;}
	#nvBtn span:after {top: 12px;}
	#menuInner dl dd{
		font-size: 113%;
		font-weight: bold;
	}
	#menuInner dl dd span {
		padding-left: 10px;
	}
	#menuInner #tel {
		padding: 5px 0;
	}
	#menuInner #tel a {
		padding-left: 35px;
		background: url(../img/common/icn_tel.png) 0 50% no-repeat;
		-webkit-background-size: 32px 23px;
		background-size: 32px 23px;
		display: inline-block;
		font-size: 1.75rem;
		font-weight: bold;
		color: #5d3b17;
	}

/* ドロワーメニュー
------------------------------------------*/
	#drawer{
		width: 100%;
		/*height: 100vh;*/
		margin-right: -100vw;
		background: #50a235;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		text-align: left;
		display: block;
	}

	header nav#drawer ul{
		display: block;
		text-align: center;
	}
	/*header nav#drawer ul#topNav li:not(:last-child){border-bottom: 2px dotted #a8d19a;}*/
	header nav#drawer ul#topNav{
		border-top: 2px dotted #a8d19a;
		display: -webkit-flex;
		display: flex;
		flex-flow: row wrap;
	}
	header nav#drawer ul#topNav li{
		border-bottom: 2px dotted #a8d19a;
		flex: 0 0 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	header nav#drawer ul#topNav li:nth-child(2n+1){border-right: 2px dotted #a8d19a;}

	header nav ul li{float: none;}
	header nav ul li:not(:last-child):after{display: none;}
	header nav ul li a{
		padding: 10px;
		color: #fff;
		display: block;
	}
	header nav ul li a:hover{
		color: #fff;
		text-decoration: none;
	}

	header nav p{
		width: 100%;
		display: inline-block;
	}
	header nav p a{
		width: auto;
		padding: 0;
		border-radius: none;
	}
	#nvContact,
	#nvBlog{display: none;}

	#drawer #info{margin-top: 10px;}

	#hdContact{padding: 0 3px; display: none;}
	#hdContact a{
		width: 4em;
		padding: 10px;
		border-radius: 5px;
		color: #fff;
		font-weight: bold;
		display: inline-block;
		background: #f58a80;
	}
	.open #hdContact{display: block;}


/* footer
-------------------------------------------------------*/
	#info{
		padding: 25px 0;
		background: #f0ece4;
		color: #5d3b17;
		text-align: center;
	}
	#info .inner{
		width: 100%;
		padding: 0 10px;
		height: auto;
		display: block;
	}
	#info .inner div p{text-align: center;}
	#info .inner div p:nth-child(2) a{
		padding-left:35px;
		background: url(../img/common/icn_tel.png) 0 50% no-repeat;
		-webkit-background-size: 32px 23px;
		background-size: 32px 23px;
		display: inline-block;
		font-size: 1.75rem;
	}
	#info .inner ul {
		display: block;
		flex-flow: unset;
		justify-content: unset;
		width: unset;
		padding: 10px 0;
	}
	#info .inner ul li{padding:3px 0;}
	#info .inner ul li a{
			width: 100%;
		/*display: block;*/
	}
	#info .inner #mail a span{
		padding-left: 40px;
		display: inline-block;
		-webkit-background-size: 32px 23px;
		background-size: 32px 23px;
	}
	#info .inner #toform a span{
		padding-left: 45px;
		display: inline-block;
		-webkit-background-size: 37px 28px;
		background-size: 37px 28px;
	}
	#info .inner > p a img{
		width:100%;
		height:auto;
	}

	footer {
		min-width: 100%;
		height: auto;
		padding-bottom: 80px;
	}
	footer #ftlinks{
		padding: 25px 0;
		display: block;
	}
	footer #ftlinks li{padding: 0 40px; margin: 10px 0;}
	footer #ftlinks li a{
		/*padding: 5px 10px 5px 50px;*/
		padding: 20px 10px 20px 50px !important;
		display: block;
		background-position: 10px 50%;
		-webkit-background-size: 32px 32px;
		background-size: 32px 32px;
		font-size: 1.13rem !important;
		text-align: center;
	}
	footer small{
		padding: 70px 0;
		background: url(../img/common/logo.png) 50% 0 no-repeat;
		-webkit-background-size: 128px 24px;
		background-size: 128px 24px;
		font-style:normal;
		display: block;
	}

/* drawerMENU OPEN時
-------------------------------------------------------*/
	.open #drawer:after{
		height: 90px;
		content: '';
		display: block;
	}
	.open #drawer{
		width: 100%;
		margin-top: 10px;
		background: #50a235;
		position: relative;
		overflow-y: visible;
		text-align: left;
		display: block;
	}
	
	.open {
		position: fixed;
		width: 100%;
		height: 100%;
	}
	.open #overlay{
		z-index: 999;
		display: block;
		opacity: 1;
	}

	.open header{
		background: rgba(80,162,53,1);
		height: 100vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.open header h1{display: none;}

	.open #nvBtn a{
		background: #fff;
		color: #50a235;
	}

	.open #nvBtn span {
		width: 60%;
		border-radius: 4px;
		position: absolute;
		top: 5px;
		left: 20%;
		box-sizing: border-box;
		text-indent: -9999px;
	}
	.open #nvBtn span:before,
	.open #nvBtn span:after{
		background-color: #50a235;
	}
	.open #nvBtn span:before {
		top: 9px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.open #nvBtn span:after {
		top: 9px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#overlay{
		width: 100%;
		height: 120vh;
		background: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: -999;
		opacity: 0;
		text-indent: -9999px;
		transition: opacity .4s;
	}
}


/* arrow
---------------------------------------  */
.arR{position: relative;}
.arR:after{
	content: '';
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
}
.arL{position: relative;}
.arL:before{
	content: '';
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-width: 2px 0 0 2px;
	border-style: solid;
	border-color: #000;
	transform: rotate(-45deg);
	display: block;
	position: absolute;
	top: 50%;
	left: 10px;
}

.arTriR{position: relative;}
.arTriR:after {
	content:'';
	position: absolute;
	top:50%;
	right:-16px;
	margin:-10px 0 0 0;
	width:0;
	height:0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #000;
}

.cross{position: relative;}
.cross:before,
.cross:after{
	width: 16px;
	height: 3px;
	margin-top: -2px;
	background: #000;
	border-radius: 4px;
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
}
.cross:before{	transform: rotate(45deg);}
.cross:after{	transform: rotate(-45deg);}

/* infiniterLoading用 style
---------------------------------------  */
.loading{
  color: #000;
  font-size: 10px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: loadAnimation 1.3s infinite linear;
  animation: loadAnimation 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes loadAnimation {
  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 loadAnimation {
  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;
  }
}