@charset 'utf-8';

/* --------------------------------
	#feature
----------------------------------- */
#feature{
}
.feature01{
}
.feature01 .col-l{
	float: left;
  width: 100%;
  margin-right: -220px;
  padding-right: 220px;
  box-sizing: border-box;
}
.feature01 .col-r{
	float: right;
	width: 200px;
	text-align: right;
}
.feature .col-l{
	float: left;
  width: 100%;
  margin-right: -320px;
  padding-right: 320px;
  box-sizing: border-box;
}
.feature .col-r{
	float: right;
	width: 300px;
	text-align: right;
}

@media screen and (max-width: 768px){
	.feature01 .col-l,
	.feature .col-l{
		float: none;
		width: auto;
		margin-right: -220px;
		padding-right: 220px;
		box-sizing: border-box;
	}
	.feature01 .col-r,
	.feature .col-r{
		float: none;
		width: auto;
		text-align: center;
	}
	}

}
/* --------------------------------
	#service
----------------------------------- */
#service .box{
	overflow: hidden;
}
#service .col-l{
  float: left;
  width: 100%;
  margin-right: -420px;
  padding-right: 420px;
  box-sizing: border-box;
}
#service .col-r{
	float: right;
	width: 400px;
}
@media screen and (max-width: 768px){
	#service .col-l{
		float: auto;
		width: auto;
		margin:0 0 20px;
		padding: 0;
		box-sizing: border-box;
	}
	#service .col-r{
		float: none;
		width: auto;
	}
}

/* --------------------------------
	#history
----------------------------------- */
.dl01{
	overflow: hidden;
	border-bottom: dotted 1px #ccc;
}
.dl01 dt{
	width: 20%;
	clear: left;
	font-weight: bold;
	display: block;
	background: #f0f0f0;
	vertical-align: top;
}
.dl01 dd{
	width: 80%;
}
.dl01 dt p,
.dl01 dd p{
	padding: 10px;
}

.dl01 dt,
.dl01 dd{
	border-top: dotted 1px #ccc;
	float: left;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	line-height: 1.4;
}
.dl01 dd pre{
	white-space: pre-wrap;
	word-wrap: break-word;
}
@media screen and (max-width: 768px) {
	.dl01 dt{
		float: none;
		width: auto;
	}
	.dl01 dd{
		float: none;
		width: auto;
	}
	.dl01 dt,
	.dl01 dd{
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

/* --------------------------------
	#contact
----------------------------------- */
#contact dl{
	overflow: hidden;
}
#contact dd input[type="text"]{
	width: 50%;
	box-sizing: border-box;
}
#contact dd textarea {
	width: 80%;
	height: 200px;
	box-sizing: border-box;
}
#contact dd input[type="text"],
#contact dd textarea {
	border: solid 2px #ccc;
	padding: 8px;
  box-sizing: border-box;
}
label.error{
	color: #f00;
	padding: 0 10px 10px;
	display: block;
}
#contact .submit{
	text-align: center;
	padding: 20px 0 0;
}
#contact .note{
	padding-bottom: 20px;
}
#contact .submit li{
	display: inline-block;
	padding: 0 20px;
}
#contact .submit button{
	background: #00a0e9;
	color: #fff;
	width: 240px;
	padding: 20px 0;
	letter-spacing: 2px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	border: solid 2px #00a0e9;
	text-align: center;
}
#contact .submit button:hover{
	background: #fff;
	color: #00a0e9;
}
@media screen and (max-width: 768px){
	#contact dd input[type="text"],
	#contact dd textarea{
		width: 100%;
	}
}
@media screen and (max-width: 480px){
	.col-l{
		padding-bottom: 20px;
	}
}