@charset "utf-8";

a:link,a:visited{color : #000;text-decoration : none;}
a:hover,a:active{color : #87d232;text-decoration : none;opacity: 0.5;}
.con_sp{display: none;}
.img-responsive{width:100%;}

.container{text-align: center; margin-bottom: 100px}
.container p{color: #8c8c8c;line-height: 2.5em;font-size: 1em;}
.container section{margin-bottom: 50px;}
.container .items{width:50%;margin-top:50px;}
h2{font-size: 1.6em;color: #8c8c8c;padding-top:0px;margin-top: 0px;line-height: 1.8em;font-weight: normal;}
h3{font-size: 0.9em;color: #8c8c8c;margin-top: 30px;line-height: 2em;font-weight: normal;}

header{text-align: left;}
header a img{padding: 15px 0px;}

nav ol.breadcrumbs{margin: 0;padding: 0.5em 1em;list-style: none;background:#eee;overflow: hidden;text-align: left;}
nav ol.breadcrumbs li{display: inline;list-style: none;font-size: 0.7em;}
nav ol.breadcrumbs li::after{content: '>';padding: 0 10px; /*左右に余白*/}
nav ol.breadcrumbs li:last-child::after{display: none;}
nav ol.breadcrumbs li:hover{text-decoration: none;}

#top {text-align: center;}
#top h1 img{margin:30px auto 10px auto;}


#concept{text-align: center;}
#concept > img{width:100%;margin: 30px auto;}

#concept #explain{text-align: center;background: #f4f4f4;color: #8c8c8c;margin-top: 50px auto;}
#concept #explain p{width:100%;margin: 50px auto; padding: 30px 15px;}
#concept #explain > img{width:90%;margin: 20px auto;padding-bottom: 50px;}


#mailformtop h2{font-size: 2em;}

.banner{width:40%;text-align: center;margin: 0px auto;}
.banner a{display: block;margin: 30px auto;}
.banner a img{width: 100%;}

dl{list-style: none;}

dl dt,dd{display: block;float: left;}
dl dt{width: 30%;}
dl dd{width: 70%}
dl dd ul li{
	width: 30%;
	display: block;
	float: left;
	overflow: hidden;
}
dl dd ul::after{content: "";display: block;clear: both;}

dl dt span.required,
dl dt span.optional{
	display : inline-block;
	/*float : left;*/
	/*font-weight : bold;*/
	color : #ffffff;
	padding : 1px 7px;
}
dl dt span.required{
	margin-left:10px;
	background :#87d232;
}
dl dd span{
	display : block;
	clear : both;
	color : #87d232;
}

dl.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
#privacy{
	margin: 30px auto;
}

#privacy h3{
	display: block;
	background: #eee;
	padding: 10px auto;
}
#privacy p a{
	color: #fbb03b;
	font-weight: bold;
	text-decoration: underline dotted #ccc;
}

footer {
	background: #eee;
	padding: 50px auto;
	margin: 0px;
}
footer p{
	display: inline-block;
	background: #eee;
	width: 100%;
	font-size: 0.8em;
	line-height: 5em;
	padding: 5em auto;
	text-align: center;
}

@media screen and (max-width : 800px){
	.con_pc{display: none;}
	.con_sp{display: block;}
	#top h1 img{width: 100%;}
	h2{font-size: 1em;line-height: 1.8em;font-weight: normal;}
	h3{font-size: 0.8em;line-height: 2em;font-weight: normal;}
	#explain a p{font-size: 1em;}
	.banner {width:90%;margin: 10px auto;}
	.container {margin: 0px}
	.container .items{width:100%;margin:15px auto;}
	.container p{text-align: left;line-height: 1.3em;margin: 10px;}
	dl dd{width: 100%}
	ul li{
		display: block;
		width: 100%;
		float: none;
		overflow: hidden;
	}
}