/* ******************************************************************
 *	File name		: style.css
 *	Summary			: page layout
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

/* main_img */
#main_img{
	height:350px;
}

/* --- responsive --- */
@media only screen and (max-width:950px){
	#main_img{
		height:auto;
		margin:-2% 0 -20% 0;
	}
}

/* ----------------------------------------------------------------- */
/*	ex                                                               */
/* ----------------------------------------------------------------- */

#main_contents ul{
	list-style:none;
	font-size:0.9rem;
	line-height:1.3;
	}
	#main_contents ul li{
		position:relative;
		margin-bottom:4px;
		padding-left:17px;
	}
	#main_contents ul li:before{
		content:" ";
		position:absolute;
		top:3px;
		left:0px;
		width:10px;
		height:10px;
		background:#FFF;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
}

#main_contents p{
	font-size:0.9em;
	margin-bottom:10px;
}

#main_contents .line{
	position:relative;
	margin-bottom:20px;
	padding-bottom:10px;
	border-bottom:1px dotted #000;
}

/* -----------------------------------------------------------------
   h2~
----------------------------------------------------------------- */

#main_contents h2{
	position:relative;
	margin:0 0 20px;
	padding:20px 10px 15px 20px;
	font-weight:bold;
	font-size:1.8rem;
	color:#000;
	border-left:5px solid #005DAD;
	background:linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
	background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
	}
	#main_contents h2 span,
	#main_contents h2:first-letter{
		color:#005DAD;
	}
	#main_contents h2:after{
		content:" ";
		position:absolute;
		top:0px;
		left:2px;
		width:2px;
		height:100%;
		background:#7ECEF4;
		background:#002153;
}
/* --- responsive --- */
@media only screen and (max-width:950px){
	#main_contents h2{
		padding:10px 10px 7px 20px;
		font-size:1.3rem;
		background:rgba(255,255,255,0.85);
	}
}

#main_contents h3{
	position:relative;
	margin:0 0 10px;
	padding-left:19px;
	font-weight:bold;
	font-size:1.1rem;
	text-align:left;
	color:#FFF;
	}
	#main_contents h3::after{
		content:" ";
		position:absolute;
		top:3px;
		left:0px;
		width:14px;
		height:14px;
		background:#007BC7;
}

#main_contents h4{
	position:relative;
	margin-bottom:5px;
	font-weight:bold;
	font-size:1.0rem;
	color:#7ECEF4;
}

/* -----------------------------------------------------------------
   btn
----------------------------------------------------------------- */

.btn{
	display:block;
	position:relative;
	margin-bottom:15px;
	text-align:left;
	}
	.btn a{
		display:inline-block;
		margin:0 auto;
		padding:5px 20px 5px 30px;
		font-weight:bold;
		text-decoration:none;
		background:rgba(40,70,136,1);
		background:rgba(156,204,241,1);
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:2px solid #005DAD;
		color:#FFF;
		color:#005DAD !important;
		transition-duration:0.5s;
	}
	.btn a:hover{
		background:#FFF;
	}
	.btn a:after{
		content:" ";
		position:absolute;
		top:calc(50% - 7px);
		left:15px;
		border: 7px solid transparent;
		border-left: 8px solid #005DAD;
}

/* ----------------------------------------------------------------- base */



/*----------------------------------------------------------------- section */

/* --- responsive --- */

@media(max-width:960px){
	main section{
		width:100%;
	}
}
@media(max-width:768px){
}
@media(max-width:600px){
}
@media(max-width:480px){
}


/*----------------------------------------------------------------- all */