@charset "UTF-8";

/* ==========================================================
	PC閲覧用 481px以上
========================================================== */

/*----------------------------------------

	- common
	- box2

-----------------------------------------*/

@media print, screen and (min-width: 481px) {

/*----------------------------------------
common
-----------------------------------------*/
	#box1 h2,
	#box2 h2 {
		width: 682px;
		padding: 5px 0 4px 14px;
		border-left: solid 4px #3eb2d4;
		background-color: #000066;
		color: #ffffff;
		font-weight: bold;
		font-size: 18px;
		font-size: 1.8rem;
	}
/*----------------------------------------
box1
-----------------------------------------*/
	#box1 {
		width: 700px;
		margin-top: 30px;
	}
	#box1 h3 {
		line-height: 2.0;
		background: url(../../img/cmn_main_color01.gif);
		color: #ffffff;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
		font-size: 1.8rem;
	}
	#box1 .inner {
		margin-top: 30px;
		background: url(../../img/cmn_main_line_h.gif) repeat-y 350px 0;	
	}
	#box1 figure {
		float: left;
		width: 350px;
		padding-bottom: 30px;
	}
	#box1 figcaption {
		width: 315px;
		margin: 15px 0 0 10px;
	}
	#box1 figure img {
		width: 309px;
		height: 204px;
		margin: 12px 0 0 12px;
		padding: 2px;
		border: solid 1px #d4d4d4;
	}
	#box1 figure.even img {
		margin-left: 24px;
	}
	#box1 figure.even h3 {
		padding-left: 25px;
		padding-right: 9px;
		border-left: solid 1px #ffffff;
	}
	#box1 figure.even figcaption {
		margin-left: 26px;
	}
	/* only for IE8 */
	html.ie8 #box1 figcaption {
		padding-bottom: 60px;
	}
/*----------------------------------------
box2
-----------------------------------------*/
	#box2 {
		margin-top: 50px;
	}
	#box2 figure{
		width: 220px;
		float: left;
		margin: 20px 20px 0px 0;
	}
	#box2 figure.no-mr {
		margin-right: 0;
	}
	#box2 figure img {
		width: 218px;
		border: 1px solid #b7b7b7;
	}
	#box2 figcaption {
		width: 220px;
		margin: 8px auto 0;
	}
	#box2 strong {
		font-weight: bold;
		margin-top: 5px;
	}

}

/* ==========================================================
	SP閲覧用 480px以下
========================================================== */

@media screen and (max-width: 480px) {

/*----------------------------------------
clearfix
-----------------------------------------*/
	#box2 figure:before,
	#box2 figure:after {
		content:"";
		display: table;
	}
	#box2 figure:after{
		clear: both;
	}
	#box2 figure {
	zoom: 1;
		position: relative;
	}
/*----------------------------------------
common
-----------------------------------------*/
	#box1 h2,
	#box2 h2 {
		margin-bottom: 15px;
		padding: 5px 10px 4px 12px;
		border-left: solid 4px #3eb2d4;
		background-color: #000066;
		color: #ffffff;
		font-weight: bold;
		font-size: 17px;
		font-size: 1.7rem;
	}
/*----------------------------------------
box1
-----------------------------------------*/
	#box1 {
		width: 100%;
	}
	#box1 figure {
		padding-bottom: 20px;
	}
	#box1 figure img {
		width: 100%;
		margin-top: 10px;
	}
	#box1 h3 {
		line-height: 2.0;
		background: url(../../img/cmn_main_color01.gif);
		color: #ffffff;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
		font-size: 1.8rem;
	}
	#box1 figcaption {
		margin-top: 15px;
	}
/*----------------------------------------
box2
-----------------------------------------*/
	#box2 figure {
		padding-bottom: 20px;
	}
	#box2 figure img {
		float: left;
		width: 40%;
		height: auto;
		border: 1px solid #CCCCCC;
	}
	#box2 figcaption {
		width: 55%;
		float: right;
	}
	#box2 figure:last-child {
		padding-bottom: 0;
	}

}