/* LESS Document */

/*-----------------------------------------------------------
class
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	.pc{display: block;}
	.sp{display: none;}
	
	.link-l{
		text-align: left;
		font-size: 1.4rem;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.link-r{
		text-align: right;
		font-size: 1.4rem;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.text-center{
		text-align: center;
	}
	.read-bt{
		
		a{
			width: 300px;
			padding: 20px 0;
			margin: 0 auto;
			display: block;
			color: #ffffff;
			font-size: 1.6rem;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			background: #4dc1f0;
			border-radius: 5px;
			
			&:hover{
				background: #117ac4;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}
		}
	}
	table{
		width: 100%;
		
		tr{
			
			th{
				padding: 15px;
				text-align: left;
				font-size: 1.4rem;
				font-weight: normal;
				background: #f5f5f5;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				line-height: 1.5;
			}
			td{
				padding: 15px;
				text-align: left;
				font-size: 1.4rem;
				font-weight: normal;
				background: #ffffff;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				line-height: 1.5;
			}
		}
	}
	.wp-pagenavi{
		clear: both;
		padding: 20px 0;
		text-align: center;
		
		a{
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
			
			&:hover{
				background: #f5f5f5;
			}
		}
		span{
			color: #ddd;
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
		}
	}
}
@media screen and (max-width: 640px){
	.pc{display: none;}
	.sp{display: block;}
	
	.link-l{
		text-align: left;
		font-size: 1.4rem;
		margin: 20px 10px;
	}
	.link-r{
		text-align: right;
		font-size: 1.4rem;
		margin: 20px 10px;
	}
	.text-center{
		text-align: left;
	}
	.read-bt{
		
		a{
			max-width: 100%;
			padding: 20px 0;
			margin: 0 auto;
			display: block;
			color: #ffffff;
			font-size: 1.6rem;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			background: #4dc1f0;
			border-radius: 5px;
			
			&:hover{
				background: #117ac4;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}
		}
	}
	table{
		width: 100%;
		
		tr{
			
			th{
				padding: 15px;
				text-align: left;
				font-size: 1.4rem;
				background: #f5f5f5;
				font-weight: normal;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #eee solid;
				line-height: 1.5;
			}
			td{
				padding: 15px;
				text-align: left;
				font-size: 1.4rem;
				background: #ffffff;
				font-weight: normal;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #eee solid;
				line-height: 1.5;
			}
		}
	}
	.wp-pagenavi{
		clear: both;
		padding: 20px 0;
		text-align: center;
		
		a{
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
			
			&:hover{
				background: #eeeeee;
			}
		}
		span{
			color: #ddd;
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
		}
	}
}
form{

	select,
	textarea,
	input[type="tel"],
	input[type="text"],
	input[type="mail"],
	input[type="submit"],
	input[type="number"],
	input[type="image"]{
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
	}
}

/*-----------------------------------------------------------
col
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	body{
		background: url(../images/header-bg.png) 50% 0 no-repeat;
		background-size: 100% 500px;
	}
	.inner{
		width: 960px;
		margin: 0 auto;
		
		main{
			float: left;
			width: 740px;
		}
		.group-title{
			color: #fff;
			font-size: 3.0rem;
			line-height: 1.0;
			padding: 20px;
			font-weight: bold;
			background: #1478be;
			margin-bottom: 20px;
		}
		.recruit-group-title{
			color: #fff;
			font-size: 3.0rem;
			line-height: 1.0;
			padding: 20px;
			font-weight: bold;
			background: #ff788c;
			margin-bottom: 20px;
		}
		.group-box,
		.group-box-flat{
			
			li{
				float: left;
				width: 320px;
				height: 120px;
				padding: 20px;
				background: #fff;
				margin-bottom: 20px;
				border-radius: 10px;
				box-shadow: 1px 1px 5px 0 #b3b3b3;
				-moz-box-shadow: 1px 1px 5px 0 #b3b3b3;
				-webkit-box-shadow: 1px 1px 5px 0 #b3b3b3;
				
				&:nth-child(2n){
					float: right;
				}
				a{
					color: #333333;
					display: block;
					
					&:hover{
						color: #1478be;
						text-decoration: none;
						-webkit-transition: all 0.2s;
						-moz-transition: all 0.2s;
						-ms-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;
					}
				}
				img{
					float: left;
					width: 120px;
					height: 120px;
				}
				.text{
					float: right;
					width: 190px;

					.title{
						font-size: 1.8rem;
						font-weight: bold;
						margin-bottom: 10px;

						&:before{
							float: left;
							content: "";
							width: 7px;
							height: 14px;
							margin-right: 5px;
							background: url(../images/arrow-try.png) no-repeat;
							background-size: 7px auto;
							position: relative;
							top: 3px;
						}
					}
					p{
						font-size: 1.4rem;
					}
				}
			}
		}
		.group-box-flat{
			
			img{
				float: none;
				display: none;
			}
			.text{
				float: none !important;
				width: 100% !important;
			}
		}
		.group-box-p{
			
			li{
				float: left;
				width: 320px;
				height: 120px;
				padding: 20px;
				background: #fff;
				margin-bottom: 20px;
				border-radius: 10px;
				box-shadow: 1px 1px 5px 0 #b3b3b3;
				-moz-box-shadow: 1px 1px 5px 0 #b3b3b3;
				-webkit-box-shadow: 1px 1px 5px 0 #b3b3b3;
				
				&:nth-child(2n){
					float: right;
				}
				a{
					color: #333333;
					display: block;
					
					&:hover{
						color: #1478be;
						text-decoration: none;
						-webkit-transition: all 0.2s;
						-moz-transition: all 0.2s;
						-ms-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;
					}
				}
				img{
					float: left;
					width: 120px;
					height: 120px;
				}
				.text{
					float: right;
					width: 190px;

					.title{
						font-size: 1.8rem;
						font-weight: bold;
						margin-bottom: 10px;

						&:before{
							float: left;
							content: "";
							width: 7px;
							height: 14px;
							margin-right: 5px;
							background: url(../images/arrow-try-p.png) no-repeat;
							background-size: 7px auto;
							position: relative;
							top: 3px;
						}
					}
					p{
						font-size: 1.4rem;
					}
				}
			}
		}
		.content-box{
			padding: 30px 30px 10px 30px;
			margin-bottom: 50px;
			background: #fff;
			border-radius: 10px;
			box-shadow: 3px 3px 10px -3px #b3b3b3;
			-moz-box-shadow: 3px 3px 10px -3px #b3b3b3;
			-webkit-box-shadow: 3px 3px 10px -3px #b3b3b3;
			
			.content-title{
				position: relative;
				width: 680px;
				color: #fff;
				font-size: 3.0rem;
				font-weight: bold;
				line-height: 1.0;
				margin-bottom: 30px;
				padding: 20px 0 20px 40px;
				background-color: #1478be;
				left: -40px;
				
				&:before {
					content: '';
					position: absolute;
					top: 100%;
					border-style: solid;
					border-color: transparent;
					left: 0;
					border-width: 0 10px 10px 0;
					border-right-color: #075e97;
				}
			}
			.recruit-title{
				position: relative;
				width: 680px;
				color: #fff;
				font-size: 3.0rem;
				font-weight: bold;
				line-height: 1.0;
				margin-bottom: 30px;
				padding: 20px 0 20px 40px;
				background-color: #ff788c;
				left: -40px;
				
				&:before {
					content: '';
					position: absolute;
					top: 100%;
					border-style: solid;
					border-color: transparent;
					left: 0;
					border-width: 0 10px 10px 0;
					border-right-color: #cc445e;
				}
			}
			section{
				clear: both;
				overflow: hidden;
				margin-bottom: 50px;
			}
			h2{
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 20px;
				border-bottom: 2px #4dc1f0 solid;
			}
			h2.p{
				border-bottom: 2px #ff788c solid;
			}
			h3{
				font-size: 2.0rem;
				font-weight: bold;
				padding-bottom: 10px;
				margin-bottom: 20px;
				border-bottom: 1px #4dc1f0 solid;
			}
			h3.p{
				border-bottom: 1px #ff788c solid;
			}
			.left-img{
				float: left;
				width: 240px;
				height: auto;
				margin-right: 20px;
				margin-bottom: 20px;
			}
			.right-img{
				float: right;
				width: 240px;
				height: auto;
				margin-left: 20px;
				margin-bottom: 20px;
			}
			.point{
				background: #f9eee1;
				border-radius: 10px;
				font-size: 1.4rem;
				padding: 20px 20px 0 20px;
				overflow: hidden;
			}
			strong{
				font-weight: bold;
			}
			.karte{
				width: 100%;
				height: auto;
				border: 5px #99daee solid;
				box-sizing: border-box;
				border-radius: 10px;
				background: url(../images/grid.png) repeat;
				margin-bottom: 50px;
				padding: 20px;
				position: relative;
				
				&:after{
					content: "";
					position: absolute;
					top: -20px;
					right: 0;
					width: 30px;
					height: 33px;
					background: url(../images/clip.png) no-repeat;
					background-size: 30px 33px;
					z-index: 9000;
				}
				.title{
					color: #1478be;
					font-weight: bold;
					font-size: 2.0rem;
				}
				dl{
					display: block;
					margin-bottom: 5px;
					
					dt{
						color: #1478be;
						width: 120px;
						display: table-cell;
						font-size: 1.4rem;
						font-weight: bold;
						line-height: 1.5;
					}
					dd{
						display: table-cell;
						font-size: 1.4rem;
						font-weight: bold;
						line-height: 1.5;
					}
				}
			}
			.work-flow{
				padding: 20px 20px 10px 20px;
				overflow: hidden;
				background: #fff3f4;
				border-radius: 10px;
				vertical-align: top;
				margin-bottom: 40px;
				
				img{
					float: left;
					width: 150px;
					height: auto;
				}
				.text{
					float: right;
					width: 470px;
				}
			}
			.staff-name{
				font-size: 2.0rem;
				font-weight: bold;
				margin-bottom: 20px;
				display: inline-block;
				padding: 10px;
				border: 1px #ff788c solid;
				border-left: 5px #ff788c solid;
			}
		}
		aside{
			float: right;
			width: 200px;
			
			.aside-kango-title{
				padding: 20px 5px;
				background: #4dc1f0;
				border-radius: 10px 10px 0 0;
			}
			.aside-kango-list{
				background: #ffffff;
				border: 5px #4dc1f0 solid;
				box-sizing: border-box;
				margin-bottom: 20px;
				
				li{
					border-bottom: 1px #eeeeee dashed;
					
					&:last-child{
						border-bottom: 0;
					}
					a{
						color: #333333;
						font-size: 1.4rem;
						font-weight: bold;
						padding: 15px 5px;
						display: block;
					}
				}
			}
			.aside-recruit-title{
				padding: 20px 5px;
				background: #ffabbb;
				border-radius: 10px 10px 0 0;
			}
			.aside-recruit-list{
				background: #ffffff;
				border: 5px #ffabbb solid;
				box-sizing: border-box;
				margin-bottom: 20px;
				
				li{
					border-bottom: 1px #eeeeee dashed;
					
					&:last-child{
						border-bottom: 0;
					}
					a{
						position: relative;
						color: #333333;
						font-size: 1.4rem;
						font-weight: bold;
						padding: 15px 5px;
						display: block;
					}
				}
			}
			.aside-entry,
			.aside-topic{
				margin-bottom: 10px;
				
				img{
					margin-bottom: 10px;
				}
			}
			.aside-contact{
				background: #ffffff;
				border: 5px #1478be solid;
				box-sizing: border-box;
				text-align: center;
				padding: 20px 0;
				margin-bottom: 20px;
			}
		}
		#archive{
			overflow: hidden;

			li{
				border-top: 1px #dddddd dotted;
				padding: 30px 0;

				time{
					font-size: 1.6rem;
					display: inline;
				}
				.new{
					color: #ff0000;
					font-size: 1.6rem;
					display: inline;
				}
				a{
					font-size: 1.6rem;
					display: inline;
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	body{
		background: url(../images/header-bg.png) 50% 0 no-repeat;
		background-size: 100% 250px;
	}
	.inner{
		max-width: 640px;
		margin: 0 3%;
		
		main{
			max-width: 640px;
		}
		.group-title{
			color: #fff;
			font-size: 2.4rem;
			line-height: 1.0;
			padding: 20px 10px;
			font-weight: bold;
			background: #1478be;
			margin-bottom: 20px;
		}
		.recruit-group-title{
			color: #fff;
			font-size: 2.4rem;
			line-height: 1.0;
			padding: 20px 10px;
			font-weight: bold;
			background: #ff788c;
			margin-bottom: 20px;
		}
		.group-box,
		.group-box-flat{
			
			li{
				max-width: 100%;
				padding: 10px 10px 0 10px;
				background: #fff;
				margin-bottom: 10px;
				border-radius: 10px;
				overflow: hidden;
				box-shadow: 1px 1px 5px 0 #b3b3b3;
				-moz-box-shadow: 1px 1px 5px 0 #b3b3b3;
				-webkit-box-shadow: 1px 1px 5px 0 #b3b3b3;
				
				a{
					color: #333333;
					display: block;
					
					&:hover{
						text-decoration: none;
					}
				}
				img{
					float: left;
					width: 25%;
					height: auto;
				}
				.text{
					float: right;
					width: 70%;

					.title{
						font-size: 1.8rem;
						font-weight: bold;
						margin-bottom: 10px;

						&:before{
							float: left;
							content: "";
							width: 7px;
							height: 14px;
							margin-right: 5px;
							background: url(../images/arrow-try.png) no-repeat;
							background-size: 7px auto;
							position: relative;
							top: 3px;
						}
					}
					p{
						font-size: 1.4rem;
					}
				}
			}
		}
		.group-box-p{
			
			li{
				max-width: 100%;
				padding: 10px 10px 0 10px;
				background: #fff;
				margin-bottom: 10px;
				border-radius: 10px;
				overflow: hidden;
				box-shadow: 1px 1px 5px 0 #b3b3b3;
				-moz-box-shadow: 1px 1px 5px 0 #b3b3b3;
				-webkit-box-shadow: 1px 1px 5px 0 #b3b3b3;
				
				a{
					color: #333333;
					display: block;
					
					&:hover{
						text-decoration: none;
					}
				}
				img{
					float: left;
					width: 25%;
					height: auto;
				}
				.text{
					float: right;
					width: 70%;

					.title{
						font-size: 1.8rem;
						font-weight: bold;
						margin-bottom: 10px;

						&:before{
							float: left;
							content: "";
							width: 7px;
							height: 14px;
							margin-right: 5px;
							background: url(../images/arrow-try.png-p) no-repeat;
							background-size: 7px auto;
							position: relative;
							top: 3px;
						}
					}
					p{
						font-size: 1.4rem;
					}
				}
			}
		}
		.group-box-flat{
			
			img{
				float: none;
				display: none;
			}
			.text{
				float: none !important;
				width: 100% !important;
			}
		}
		.content-box{
			padding: 20px 15px 20px 15px;
			margin-bottom: 30px;
			background: #fff;
			border-radius: 10px;
			box-shadow: 2px 2px 10px 0 #b3b3b3;
			-moz-box-shadow: 2px 2px 10px 0 #b3b3b3;
			-webkit-box-shadow: 2px 2px 10px 0 #b3b3b3;
			
			.content-title{
				position: relative;
				width: 100%;
				color: #fff;
				font-size: 2.4rem;
				font-weight: bold;
				line-height: 1.0;
				margin-bottom: 20px;
				padding: 20px 0 20px 15px;
				background-color: #1478be;
				left: -20px;
				
				&:before {
					content: '';
					position: absolute;
					top: 100%;
					border-style: solid;
					border-color: transparent;
					left: 0;
					border-width: 0 5px 5px 0;
					border-right-color: #075e97;
				}
			}
			.recruit-title{
				position: relative;
				width: 100%;
				color: #fff;
				font-size: 2.4rem;
				font-weight: bold;
				line-height: 1.0;
				margin-bottom: 20px;
				padding: 20px 0 20px 15px;
				background-color: #ff788c;
				left: -20px;
				
				&:before {
					content: '';
					position: absolute;
					top: 100%;
					border-style: solid;
					border-color: transparent;
					left: 0;
					border-width: 0 5px 5px 0;
					border-right-color: #cc445e;
				}
			}
			section{
				clear: both;
				overflow: hidden;
				margin-bottom: 30px;
			}
			h2{
				font-size: 2.0rem;
				font-weight: bold;
				margin-bottom: 20px;
				border-bottom: 2px #4dc1f0 solid;
			}
			h2.p{
				border-bottom: 2px #ff788c solid;
			}
			h3{
				font-size: 1.8rem;
				font-weight: bold;
				padding-bottom: 10px;
				margin-bottom: 20px;
				border-bottom: 1px #4dc1f0 solid;
			}
			h3.p{
				border-bottom: 1px #ff788c solid;
			}
			.left-img,
			.right-img{
				width: 100%;
				height: auto;
			}
			.point{
				background: #f9eee1;
				border-radius: 10px;
				font-size: 1.4rem;
				padding: 10px 10px 0 10px;
				overflow: hidden;
			}
			strong{
				font-weight: bold;
			}
			.karte{
				width: 100%;
				height: auto;
				border: 5px #99daee solid;
				box-sizing: border-box;
				border-radius: 10px;
				background: url(../images/grid.png) repeat;
				margin-bottom: 50px;
				padding: 10px;
				position: relative;
				
				&:after{
					content: "";
					position: absolute;
					top: -20px;
					right: 0;
					width: 30px;
					height: 33px;
					background: url(../images/clip.png) no-repeat;
					background-size: 30px 33px;
					z-index: 9000;
				}
				.title{
					color: #1478be;
					font-weight: bold;
					font-size: 2.0rem;
				}
				dl{
					display: block;
					margin-bottom: 10px;
					
					dt{
						color: #1478be;
						width: 100%;
						display: block;
						font-size: 1.4rem;
						font-weight: bold;
						line-height: 1.5;
					}
					dd{
						width: 100%;
						display: block;
						font-size: 1.4rem;
						font-weight: bold;
						line-height: 1.5;
					}
				}
			}
			.work-flow{
				padding: 10px;
				overflow: hidden;
				background: #fff3f4;
				border-radius: 10px;
				margin-bottom: 20px;
				
				img{
					width: 100%;
					height: auto;
				}
			}
			.staff-name{
				font-size: 1.8rem;
				font-weight: bold;
				margin-bottom: 20px;
				padding: 10px;
				border: 1px #ff788c solid;
				border-left: 5px #ff788c solid;
			}
		}
		aside{
			clear: both;
			max-width: 100%;
			
			.aside-kango-title{
				padding: 20px 5px;
				background: #4dc1f0;
				border-radius: 10px 10px 0 0;
			}
			.aside-kango-list{
				background: #ffffff;
				border: 5px #4dc1f0 solid;
				box-sizing: border-box;
				margin-bottom: 20px;
				
				li{
					border-bottom: 1px #eeeeee dashed;
					
					&:last-child{
						border-bottom: 0;
					}
					a{
						color: #333333;
						font-size: 1.4rem;
						font-weight: bold;
						padding: 15px 5px;
						display: block;
					}
				}
			}
			.aside-recruit-title{
				padding: 20px 5px;
				background: #ffabbb;
				border-radius: 10px 10px 0 0;
			}
			.aside-recruit-list{
				background: #ffffff;
				border: 5px #ffabbb solid;
				box-sizing: border-box;
				margin-bottom: 20px;
				
				li{
					border-bottom: 1px #eeeeee dashed;
					
					&:last-child{
						border-bottom: 0;
					}
					a{
						position: relative;
						color: #333333;
						font-size: 1.4rem;
						font-weight: bold;
						padding: 15px 5px;
						display: block;
					}
				}
			}
			.aside-entry,
			.aside-topic{
				
				margin-bottom: 10px;
				
				img{
					width: 100%;
					height: auto;
					margin-bottom: 10px;
				}
			}
			.aside-contact-title,
			.aside-contact{
				display: none;
			}
		}
		#archive{
			overflow: hidden;
			margin-bottom: 20px;
			
			li{
				border-top: 1px #dddddd dotted;
				line-height: 1.5;
				padding: 20px 0;
				
				time{
					font-size: 1.2rem;
					display: inline;
				}
				.new{
					color: #ff0000;
					font-size: 1.2rem;
					display: inline;
				}
				a{
					font-size: 1.4rem;
					display: block;
					margin-top: 5px;
				}
			}
		}
	}
}

/*-----------------------------------------------------------
header
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	header{
		width: 960px;
		margin: 0 auto;
		overflow: hidden;
		
		#logo{
			float: left;
			margin-top: 30px;
			margin-bottom: 20px;
		}
		#header-contact{
			float: right;
			margin-top: 30px;
			margin-bottom: 30px;
			
			li{
				float: left;
				
				&:first-child{
					margin-right: 10px;
				}
			}
		}
	}
	#gm{
		clear: both;
		width: 100%;
		height: 50px;
		background: rgba(255,255,255,0.8);
		
		ul{
			width: 960px;
			margin: 0 auto;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 9999;
			
			li{
				float: left;
				width: 150px;

				&:first-child{
					width: 60px;
				}
				a{
					color: #333333;
					padding: 16px 0 14px 0;
					font-size: 1.4rem;
					line-height: 1.5;
					text-align: center;
					font-weight: bold;
					display: block;
					
					img{
						position: relative;
						top: -7px;
						margin-left: 5px;
					}
					&:hover{
						background: #fff;
						text-decoration: none;
						-webkit-transition: all 0.2s;
						-moz-transition: all 0.2s;
						-ms-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;
					}
				}
				ul{
					position: static;
					
					li{
						float: none;
						overflow: hidden;
						width: 150px !important;
						height: 0;
						border-left: 0;
						border-right: 0;
						font-size: 1.1rem;
						-webkit-transition: all 0.2s;
						-moz-transition: all 0.2s;
						-ms-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;

						a{
							padding: 15px 0;
							color: #fff;
							text-align: center;
							font-weight: normal;
						}
					}
				}
				.gm-kango li a{
					background: #4dc1f0;

					&:hover{
						background: #1478be;
					}
				}
				.gm-recruit li a{
					background: #ffabbb;

					&:hover{
						background: #ff788c;
					}
				}
				&:hover ul li{
					height: 50px;
					border-bottom: 1px #fff solid;

					&:last-child{
						border-bottom: 0;
					}
				}
			}
		}
	}
	#drawer,
	.drawer-button{
		display: none;
	}
	#bcm{
		clear: both;
		color: #999;
		font-size: 1.2rem;
		margin: 15px 0;
		
		li{
			margin: 0 5px;
			display: inline-block;
			
			&:first-child{
				margin-left: 0;
			}
			&:last-child{
				margin-right: 0;
			}
			a{
				display: inline-block;
				
				span{
					display: inline-block;
					
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	
	header{
		max-width: 640px;
		margin: 0 auto;
		overflow: hidden;

		#logo{
			float: left;
			margin-top: 20px;
			margin-left: 3%;

			img{
				width: 200px;
				height: auto;
			}
		}
		.drawer-button{
			float: right;
			margin-bottom: 10px;

			img{
				width: 70px;
				height: auto;
			}
		}
	}
	#gm,#header-contact{
		display: none;
	}
	#drawer{
		position: fixed;
		top: 0;
		right: -240px;
		width: 240px;
		height: 100%;
		overflow-x: hidden;
		background: #1478be;
		-webkit-transition: all .2s;
		transition: all .2s;
		z-index: 9999;

		&.open {
			-webkit-transform: translate3d(-240px, 0, 0);
			transform: translate3d(-240px, 0, 0);
		}
		.drawer-button{
			float: right;

			img{
				width: 70px;
				height: auto;
			}
		}
		#drawer-contact{
			clear: both;
			border-top: 1px #ffffff solid;
			overflow: hidden;
			
			li{
				float: left;
				width: 48%;
				margin: 0 1%;
				border: 0;
				
				img{
					width: 100%;
					height: auto;
				}
				a{
					&:after{
						display: none;
					}
				}
			}
		}
		ul{

			li{
				box-sizing: border-box;
				border-top: 1px #fff solid;
				position: relative;
				
				&:last-child{
					border-bottom: 1px #fff solid;
				}
				a{
					color: #fff;
					display: block;
					font-size: 1.4rem;
					padding: 15px 3%;
						
					&:after{
						float: right;
						content: "";
						width: 8px;
						height: 14px;
						background: url(http://suiren-kango.co.jp/images/arrow-right.png);
						background-size: cover;
						position: absolute;
						top: 35%;
						right: 15px;
					}
				}
			}
		}
	}
	#bcm{
		clear: both;
		color: #999;
		max-width: 640px;
		font-size: 1.0rem;
		line-height: 1.2;
		margin: 10px 0;
		overflow-x: auto;
		white-space: nowrap;
		
		li{
			margin: 0 5px;
			display: inline-block;
			
			&:first-child{
				margin-left: 0;
			}
			&:last-child{
				margin-right: 0;
			}
			a{
				display: inline-block;
				
				span{
					display: inline-block;
					
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}
}

/*-----------------------------------------------------------
index
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	#slider-wrap{
		clear: both;

		.bx-wrapper{
			width: 960px;
			height: 400px;
			margin-top: 20px;
			margin-left: auto;
			margin-right: auto;
			border-radius: 10px;
			box-shadow: 1px 1px 5px 0 #b3b3b3;
			-moz-box-shadow: 1px 1px 5px 0 #b3b3b3;
			-webkit-box-shadow: 1px 1px 5px 0 #b3b3b3;
		}
	}
	.bx-pager {
		text-align: center;
		font-size: 0.8rem;
		color: #666666;
		z-index: 100;
		position: relative;
		top: -20px;
	}
	.bx-pager-item,
	.bx-controls-auto-item{
		display: inline-block;
	}
	.bx-default-pager{

		a{
			background: #999;
			text-indent: -9999px;
			display: block;
			width: 10px;
			height: 10px;
			margin: 0 5px;
			outline: 0;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;

			&:hover{
				background: #4dc1f0;
			}
		}
		.active{
			background: #4dc1f0;
		}
	}
	.bx-controls-direction {
		display: none;
	}
	
	#index-strenght{
		height: 300px;
		text-align: center;
		margin-bottom: 50px;
		background: url(../images/index-strength-bg.png) 50% 0 no-repeat;
		
		p{
			margin-bottom: 50px;
		}
	}
	.index-title{
		padding-top: 30px;
		margin-bottom: 30px;
		text-align: center;
	}
	
	#index-service{
		margin-bottom: 50px;
		overflow: hidden;
		
		.index-service-box{
			/* float: right;
			max-width: 470px; */
			width: 100%;
			border: 1px #4dc1f0 solid;
			box-sizing: border-box;
			border-radius: 5px;
			padding: 20px;
				
			&:hover{
				background: #fff4eb;
				text-decoration: none;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}
			&:nth-child(2){
				float: left;
			}
			a{
				color: #333333;
				display: block;
			}
			img{
				float: left;
				/* width: 180px;
				height: 120px; */
				width: 240px;
				height: auto;
				margin-right: 20px;
			}
			.text{
				float: right;
				width: 658px;
				
				.title{
					font-size: 2.0rem;
					font-weight: bold;
					margin-bottom: 10px;
					
					&:before{
						float: left;
						content: "";
						width: 7px;
						height: 14px;
						margin-right: 5px;
						background: url(../images/arrow-try.png) no-repeat;
						background-size: 7px auto;
						position: relative;
						top: 3px;
					}
				}
				p{
					font-size: 1.4rem;
				}
			}
		}
	}
	#index-news{
		float: left;
		width: 640px;
		
		ul{
			border-top: 2px #4dc1f0 solid;
			overflow: hidden;
			margin-bottom: 20px;
			
			li{
				border-bottom: 1px #dddddd dotted;
				padding: 15px 0;
				
				time{
					font-size: 1.4rem;
					display: inline;
				}
				.new{
					color: #ff0000;
					font-size: 1.4rem;
					display: inline;
				}
				a{
					font-size: 1.4rem;
					display: inline;
				}
			}
		}
	}
	#index-corporate{
		float: right;
		width: 280px;
		margin-top: 20px;
		margin-bottom: 50px;
		
		img{
			margin-bottom: 20px;
			border-radius: 10px;
			box-shadow: 3px 3px 10px -3px #b3b3b3;
			-moz-box-shadow: 3px 3px 10px -3px #b3b3b3;
			-webkit-box-shadow: 3px 3px 10px -3px #b3b3b3;
		}
	}
	#footer-bn{
		clear: both;
		
		ul{
			overflow: hidden;
			margin-bottom: 50px;
			
			li{
				float: left;
				margin-right: 30px;
				
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	
	#slider-wrap{
		clear: both;
		position: relative;
		max-width: 640px;
		margin: 0 10px;
		line-height: 1.0;
		overflow: hidden;
		
		a{
			&:hover{
				text-decoration: none;
			}
		}
		.bx-wrapper{
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			position: relative;
			border-radius: 10px;
			
			img{
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
	.bx-pager {
		text-align: center;
		font-size: 0.8rem;
		color: #666666;
		z-index: 100;
		padding: 10px 0;
		position: relative;
		top: -30px;
		margin-bottom: -30px;
	}
	.bx-pager-item,
	.bx-controls-auto-item{
		display: inline-block;
	}
	.bx-default-pager{

		a{
			background: #999;
			text-indent: -9999px;
			display: block;
			width: 10px;
			height: 10px;
			margin: 0 5px;
			outline: 0;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;

			&:hover{
				background: #ff718d;
			}
		}
		.active{
			background: #4dc1f0;
		}
	}
	.bx-controls-direction {
		display: none;
	}
	.index-title{
		text-align: center;
		margin-bottom: 20px;
	}
	#index-strenght{
		margin-bottom: 50px;
	}
	#index-service{
		margin-bottom: 50px;
		overflow: hidden;
		
		.index-service-box{
			max-width: 100%;
			border: 1px #4dc1f0 solid;
			box-sizing: border-box;
			border-radius: 5px;
			margin-bottom: 10px;
			padding: 10px 10px 0 10px;
			
			a{
				color: #333333;
				display: block;
				
				&:hover{
					text-decoration: none;
				}
			}
			img{
				float: left;
				width: 100%;
				height: auto;
				margin-bottom: 10px;
			}
			.text{
				
				.title{
					font-size: 1.8rem;
					font-weight: bold;
					margin-bottom: 5px;
					
					&:before{
						float: left;
						content: "";
						width: 7px;
						height: 14px;
						margin-right: 5px;
						background: url(../images/arrow-try.png) no-repeat;
						background-size: 7px auto;
						position: relative;
						top: 3px;
					}
				}
				p{
					font-size: 1.4rem;
					margin-bottom: 10px;
				}
			}
		}
	}
	#index-news{
		max-width: 100%;
		margin-bottom: 50px;
		
		ul{
			border-top: 2px #4dc1f0 solid;
			overflow: hidden;
			margin-bottom: 20px;
			
			li{
				border-bottom: 1px #dddddd dotted;
				line-height: 1.5;
				padding: 15px 0;
				
				time{
					font-size: 1.2rem;
					display: inline;
				}
				.new{
					color: #ff0000;
					font-size: 1.2rem;
					display: inline;
				}
				a{
					font-size: 1.4rem;
					display: block;
				}
			}
		}
	}
	#index-corporate{
		overflow: hidden;
		padding-bottom: 20px;
		
		ul{
			
			li{
				float: left;
				width: 49%;
				margin-right: 2%;
				border: 1px #eee solid;
				box-sizing: border-box;
				border-radius: 5px;

				&:last-child{
					margin-right: 0;
				}
				img{
					width: 100%;
					height: auto;
				}
			}
		}
	}
	#footer-bn{
		clear: both;
		margin-bottom: 20px;
		
		img{
			margin-bottom: 10px;
		}
	}
}

/*-----------------------------------------------------------
sitemap
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){

	.sitemap{
		
		li{
			
			a{
				font-size: 1.4rem;
				padding: 10px 0;
				display: block;
			}
		}
	}
}
@media screen and (max-width: 640px){

	.sitemap{
		
		li{
			
			a{
				font-size: 1.4rem;
				padding: 10px 0;
				display: block;
			}
		}
	}
}

/*-----------------------------------------------------------
form
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	#contact{
		
		table{
		
			th{
				background: #f5f5f5;
				padding: 15px;
				width: 200px !important;
				
				.must{
					color: #fff;
					font-size: 1.0rem;
					background: #CF4749;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
				.nini{
					color: #fff;
					font-size: 1.0rem;
					background: #52A5D3;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
			}
			td{
				padding: 15px;
				
				.error {
					display: inline-block;
					margin-right: 10px;
					font-size: 1.2rem;
					color: #f00;
				}
			}
		}
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="number"],
		input[type="tel"],
		select,
		textarea{
			font-size: 1.6rem;
			padding: 10px 5px;
			border: 2px #ddd solid;
			box-sizing: border-box;
			border-radius: 4px;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
		}
		input[type="submit"]{
			width: 320px;
			color: #fff;
			padding: 20px 0;
			font-size: 2.4rem;
			border-radius: 10px;
			background: #FF6E00;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			
			&:hover{
				background: #FF2700;
			}
		}
	}
	.checkbox-confirm .error {
		display: block;
		color: #f00;
		margin-top: 10px;
	}
}
@media screen and (max-width: 640px){
	#contact{
		
		table{
			width: 100%;
			padding: 0;
			margin: 0;
			
			th{
				display: block;
				text-align: left;
				background: #f5f5f5;
				border: 0;
				
				.must{
					color: #fff;
					font-size: 1.0rem;
					background: #CF4749;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
				.nini{
					color: #fff;
					font-size: 1.0rem;
					background: #52A5D3;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
			}
			td{
				display: block;
				padding: 20px 0;
				border: 0;
				
				.error {
					display: inline-block;
					margin-top: 5px;
					font-size: 1.2rem;
					color: #f00;
				}
				input[type="text"],
				input[type="email"],
				input[type="password"],
				input[type="number"],
				input[type="tel"],
				textarea{
					width: 100%;
					font-size: 1.6rem;
					padding: 10px 5px;
					border: 2px #ddd solid;
					box-sizing: border-box;
					border-radius: 4px;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					-o-appearance: none;
					appearance: none;
				}
			}
			.born{
				overflow: hidden;

				select{
					width: 20%;
					margin-right: 5px;
					font-size: 1.6rem;
					padding: 10px 5px;
					border: 2px #ddd solid;
					box-sizing: border-box;
					border-radius: 4px;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					-o-appearance: none;
					appearance: none;
				}
				span{
					display: none;
				}
			}
		}
		input[type="submit"]{
			width: 100%;
			color: #fff;
			padding: 20px 0;
			font-size: 2.4rem;
			border-radius: 10px;
			background: #FF6E00;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			margin-bottom: 30px;
		}
	}
	.checkbox-confirm .error {
		display: block;
		color: #f00;
		margin-top: 10px;
	}
}

/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	#footer-contact{
		display: none;
	}
	footer{
		width: 100%;
		overflow: hidden;
		background: #e5f8ff;
		padding: 40px 0;
		
		#footer-title{
			font-size: 1.6rem;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.footer-nav{
			float: left;
			width: 176px;
			overflow: hidden;
			border-top: 1px #4dc1f0 dashed;
			margin-right: 20px;
			
			&:last-child{
				margin-right: 0;
			}
			li{
				display: block;
				margin-top: 15px;
				
				a{
					color: #333333;
					font-size: 1.2rem;
					font-weight: bold;
					
					&:before{
						float: left;
						content: "";
						width: 5px;
						height: 10px;
						margin-right: 5px;
						background: url(../images/arrow-right.png) no-repeat;
						background-size: 5px auto;
					}
				}
			}
		}
	}
	.link{
		width: 100%;
		overflow: hidden;
		background: #e5f8ff;
		
		p{
			text-align: right;
			font-size: 1.0rem;
			margin-bottom: 5px;
		}
	}
	address{
		color: #999;
		padding: 20px 0;
		text-align: center;
		font-style: normal;
		font-size: 1.2rem;
	}
	#page-top{
		z-index: 9999;
		position: fixed;
		bottom: 10px;
		right: 10px;
		
		a{
			color: #ffffff;
			font-size: 1.2rem;
			line-height: 1.5;
			text-align: center;
			background: #1478c6;
			border-radius: 5px;
			padding: 10px;
			display: block;
		}
	}
}
@media screen and (max-width: 640px){
	
	#footer-contact{
		clear: both;
		margin-bottom: 40px;
		
		ul{
			border: 5px #1478c6 solid;
			padding: 10px;
		}
	}
	footer{
		clear: both;
		width: 100%;
		overflow: hidden;
		background: #e5f8ff;
		
		.footer-nav{
			overflow: hidden;
			
			li{
				float: left;
				width: 50%;
				border-bottom: 1px #4dc1f0 dotted;
				box-sizing: border-box;
				
				&:nth-child(2n){
					border-left: 1px #4dc1f0 dotted;
				}
				a{
					display: block;
					color: #333;
					padding: 15px 10px;
					font-size: 1.2rem;
					font-weight: bold;
				}
			}
		}
	}
	.link{
		width: 100%;
		overflow: hidden;
		background: #e5f8ff;
		padding: 5px 0;
		
		p{
			text-align: center;
			font-size: 1.0rem;
			margin-bottom: 0;
		}
	}
	address{
		color: #999;
		padding: 20px 0 80px 0;
		text-align: center;
		font-style: normal;
		font-size: 0.8rem;
	}
	#page-top{
		z-index: 9999;
		position: fixed;
		bottom: -10px;
		right: 10px;
		
		a{
			color: #ffffff;
			font-size: 1.2rem;
			line-height: 1.5;
			text-align: center;
			background: #1478c6;
			border-radius: 5px;
			padding: 10px;
			display: block;
		}
	}
}