@charset "utf-8";

@import url("../../../../../css/common.css");
@import url("../common.css");
@import url("common.css");


/*===========================================

    product
	
	two_by_four
		
===========================================*/


/*	タイトル横リンク
===========================================*/
	
p.typelink {
	width: 980px;
	margin: -30px auto 5px auto;
	text-align: right;
	}
	
	
	

/*	mainimage
===========================================*/
div#mainimage {
	margin: 0 auto;
	width: 980px;
	text-align: left;
	overflow: hidden;
	position: relative;
	padding: 70px 0;
	
	background: #ffffff;
	background-image:linear-gradient(45deg, #fff 25%, #deecf5 25%, #deecf5 50%, #fff 50%, #fff 75%, #deecf5 75%, #deecf5);
	background-image:-webkit-linear-gradient(45deg, #fff 25%, #deecf5 25%, #deecf5 50%, #fff 50%, #fff 75%, #deecf5 75%, #deecf5);
	background-image:-moz-linear-gradient(45deg, #fff 25%, #deecf5 25%, #deecf5 50%, #fff 50%, #fff 75%, #deecf5 75%, #deecf5);
	background-image:-ms-linear-gradient(45deg, #fff 25%, #deecf5 25%, #deecf5 50%, #fff 50%, #fff 75%, #deecf5 75%, #deecf5);
	-webkit-background-size:6px 6px;
	-moz-background-size:6px 6px;
	-ms-background-size:6px 6px;
	background-size:6px 6px; /* firefox崩れ防止 */
}
	div#mainimage figure { float: right; margin: 0;}
	div#mainimage .txtArea {
		position: absolute;
		top: 50%;
		left: 70px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	div#mainimage .txtArea *{
		font-family: 'Open Sans', "Noto Sans Japanese", "ＭＳ Ｐゴシック", sans-serif;
	}
		div#mainimage .txtArea .ico-new {
			display: inline-block;
			color: #fff;
			padding: 0px 10px;
			line-height: 150%;
			font-size: 16px;
			font-weight: bold;
			text-transform: uppercase;
			background: #004c8e;
			margin-bottom: 30px;
		}
		div#mainimage .txtArea h2 {
			margin-bottom: 30px;
			color: #231815;
			line-height: 100%;
			font-weight: bold;
			font-size: 50px;
			height: auto;
		}
			div#mainimage .txtArea h2 span { display: block; line-height: 100%; font-size: 14px; margin-top: 20px;}
		div#mainimage .txtArea p { color: #000; font-size: 24px; line-height: 130%;}

/*	imgswitch
===========================================*/
div.imgswitch {
	width: 980px;
	margin: 3px auto 14px auto;
	padding: 18px 0;
	text-align: left;
	}

div.imgswitch table {
	margin: 10px 0 0 0;
	width: auto;
	}

div.imgswitch table tr td {
	padding: 4px;
	}
	

div.imgswitch p.text {
	font-size: 68%;
	margin: 10px 0 0 22px;
	padding-bottom: 8px;
	}

#sub-container #contentwrap .heading, .heading {
	margin: 0 0 30px;
	padding: 3px 15px 0;
	height: 28px;
	line-height: 28px;
	color: #fff;
	background: #1E2F4A;
	font-family: "ヒラギノ角ゴ Pro W6", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	font-size: 16px;
}
#sub-container #contentwrap h3, #contents h3 {
	color: #004C8E;
	font-family: "ヒラギノ角ゴ Pro W6", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
	padding: 0!important;
	width: auto!important;
}

.imgswitch h3 {
	padding: 0!important;
	width: auto!important;
}

div#contents { margin-bottom: 20px; }

/*	line
===========================================*/
div#contents div.line {
	overflow: hidden;
	padding: 0 0 35px;
	}

div#contents div.line div.box {
	float: left;
	width: 471px;
	padding: 5px 19px 0 0;
	}
div#contents div.line div.box p {
	font-size: 128%;
	line-height: 1.8;
	color: #000;
}

div#contents div.line div.end {
	padding: 5px 0 0 19px;
	}


div#contents div.line div.box p.right,
div#contents div.line div.box p img {
	float: right;
	margin-left: 20px;
	}


p.small {
	font-size: 90%;
	}


/*-------------------------*/
/* デバイスサイズ 889px*/
/*-------------------------*/
@media screen and (max-device-width: 889px) {
    
    #sub-container #contentwrap .heading, .heading{ height: auto; padding: 5px 10px; margin-bottom: 10px;}
    #sub-container #contentwrap h3, #contents h3{ font-size: 18px!important;}

    div#mainimage{ width: auto; padding: 20px; margin: 0 10px;}
    div#mainimage figure{ float: none; margin-bottom: 20px;}
    div#mainimage figure img{ width: 100%; height: auto;}
    div#mainimage .txtArea{ position: static; transform: translateY(0%);}
    div#mainimage .txtArea h2{ font-size: 35px; margin-bottom: 15px;}
    div#mainimage .txtArea h2 span{ margin-top: 10px;}
    div#mainimage .txtArea p{ font-size: 20px; line-height: 180%;}
    div.imgswitch{ width: auto; padding-left: 10px; padding-right: 10px;}
    div.imgswitch table,
    div.imgswitch tbody,
    div.imgswitch table tr,
    div.imgswitch table th,
    div.imgswitch table td{ display: block; text-align: center;}
    
    div#contents{ padding: 0;}
    div#contents div.line{ padding: 0; margin-bottom: 20px;}
    div#contents div.line div.box{ width: auto; float: none; padding: 0!important;}
    div#contents div.line div.box+.box{ margin-top: 20px;}
    div#contents div.line div.box p{ font-size: 100%;}
    div#contents div.line div.box p.right,
    div#contents div.line div.box p img { float: none; margin: 0 auto;}
    
}

@media screen and (max-device-width: 889px) {
	div#mainimage .txtArea h1 {
		margin-bottom: 30px;
		color: #231815;
		line-height: 100%;
		font-weight: bold;
		font-size: 50px;
		height: auto;
	}
	div#mainimage .txtArea h1 span { display: block; line-height: 100%; font-size: 14px; margin-top: 20px;}
	div#mainimage .txtArea h1{ font-size: 35px; margin-bottom: 15px;}
	div#mainimage .txtArea h1 span{ margin-top: 10px;}

	#sub-container #contentwrap h2, #contents h2 {
		color: #004C8E;
		font-family: "ヒラギノ角ゴ Pro W6", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 10px;
		padding: 0!important;
		width: auto!important;
		height: auto;
	}

	.imgswitch h2 {
		padding: 0!important;
		width: auto!important;
	}

	#sub-container #contentwrap h2, #contents h2{ font-size: 18px!important;}
}