@charset "utf-8";

/* 
===== CONTENTS ===========================================

	1：area_ki,area_mado,area_tate,area_infill+
	2：equipment_box
	3：kaisou_page
	
==========================================================
*/

/*
==================== 1: area_ki,area_mado,area_tate,area_infill+ ====================
*/
.ttl_ki{width: 65px; height: 56px;}
.ttl_mado{width: 65px; height: 56px;}
.ttl_tate{width: 65px; height: 56px;}
.ttl_you{width: 65px; height: 56px;}
.ttl_infill_plus{width: 130px; height: 56px;}

.main_pc{display: block;}
.main_tb{display: none;}
.main_sp{display: none;}

@media only screen and (max-width: 768px){
.main_pc{display: none;}
.main_tb{display: block; width: 100%;}
.main_sp{display: none;}
}

@media only screen and (max-width: 480px){
.main_pc{display: none;}
.main_tb{display: none;}
.main_sp{display: block; width: 100%;}
}

/*
==================== 2: equipment_box ====================
*/
.equipment_box{
	width: 100%;
	display: table;
}
/**/
.equipment_box div.box1{
    width: 34%;
    display: table-cell;
    vertical-align: top;
    padding-right: 1%;
}
.equipment_box div.box2{
	width: 49.5%;
	display: table-cell;
	vertical-align: top;
}
.equipment_box div.box3{
	width: 16.5%;
	display: table-cell;
	vertical-align: top;
}
.equipment_box div.box1-2{
    width: 34%;
    display: table-cell;
    vertical-align: top;
    padding-right: 1%;
}
.equipment_box div.box2-2{
	width: 49.5%;
	display: table-cell;
	vertical-align: top;
}
.equipment_box div.box3-2{
	width: 16.5%;
	display: table-cell;
	vertical-align: top;
}
/**/
.equipment_box div.box1 ul{
	margin:0;
}
.equipment_box div.box2 ul{
	margin:0;
}
.equipment_box div.box3 ul{
	margin:0;
}
.equipment_box div.box1-2 ul{
	margin:0;
}
.equipment_box div.box2-2 ul{
	margin:0;
}
.equipment_box div.box3-2 ul{
	margin:0;
}
/**/
.equipment_box div.box1 ul li{
	float:none;
}
.equipment_box div.box2 ul li{
	float:left;
}
.equipment_box div.box3 ul li{
	float:none;
}
.equipment_box div.box1-2 ul li{
	float:none;
}
.equipment_box div.box2-2 ul li{
	float:left;
}
.equipment_box div.box3-2 ul li{
	float:none;
}
/**/
.equipment_box div.box2 ul li.w2h1{
	width: 64%;
}
.equipment_box div.box2 ul li.w1h1{
	width: 32%;
}
.equipment_box div.box2-2 ul li.w2h1{
	width: 64%;
}
.equipment_box div.box2-2 ul li.w1h1{
	width: 32%;
}
.equipment_box div.box3-2 ul li.w1h1{
	width: 100%;
}
/**/
.equipment_box ul li a{
	display: block;
}
.equipment_box ul li a:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0.04)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 ); /* IE6-8 */
}
.equipment_box ul li a.bg_grade:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 96%;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0.04)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 ); /* IE6-8 */
}
/**/
.mr2{margin-right:2%;}
.mb2{margin-bottom:2.5%;}
.mt1{margin-top:1%;}
.mb60{margin-bottom:60px !important;}
/**/
.equipment_box:after{
	clear:both;
}
/**/
img.over_tb{display:block;}
img.under_tb{display: none;}
/**/
li.col_txon {
    position: relative;
}
/*
===== response ======
*/

@media screen and (max-width: 767px){	
.equipment_box div.box1{
    width: 100%;
	display: block;
    padding-right: 0;
	margin-bottom: 1%;
}
.equipment_box div.box2{
	width: 100%;
	display: block;
	margin-bottom: 1%;
}
.equipment_box div.box3{
	width: 100%;
	display: block;
	margin-bottom: 1%;
}
.equipment_box div.box1-2{
    width: 100%;
	display: block;
    padding-right: 0;
	margin-bottom: 1%;
}
.equipment_box div.box2-2{
	width: 100%;
	display: block;
	margin-bottom: 0%;
}
.equipment_box div.box3-2{
	width: 100%;
	display: block;
	margin-bottom: 1%;
}
/**/
.equipment_box div.box2 ul li{
	float:none;
}
.equipment_box div.box2-2 ul li{
	float:none;
}
/**/
.equipment_box div.box2 ul li.w2h1{
	width: 100%;
}
.equipment_box div.box2 ul li.w1h1{
	width: 100%;
}
.equipment_box div.box2-2 ul li.w2h1{
	width: 100%;
}
.equipment_box div.box2-2 ul li.w1h1{
	width: 100%;
}
.equipment_box div.box3-2 ul li.w1h1{
	width: 100%;
}
/**/
.equipment_box ul li a.bg_grade:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0.04)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 ); /* IE6-8 */
}
/**/
.mr2{margin-bottom:1%;}
.mb2{margin-bottom:1%;}
.mt1{margin-top:0;}
/**/
img.over_tb{display: none;}
img.under_tb{display: block;}
}

/*
==================== 3：kaisou_page ====================
*/
.col-4 {
    width: 23.4%;
    margin: 0 2% 2% 0;
}
/**/
div.onimage_catch_wrap{
    z-index: 2;
    position: absolute;
    width: 100%;
}
.onimage_catch_wrap h2{
    position: relative;
    top: 120px;
    max-width: 800px;
    margin: 0 auto;
	text-shadow: 1px 1px 1px #fff;
	font-size: 26px;
}
figure.catch_pozi{
	width: 100%;
}
/**/
.setsubi_link div.col-4{
	width: 25%;
}
/**/
section.setsubi_link div.col-6 {
    width: 15%;
    margin: 0 2% 2% 0;
}
section.setsubi_link div.col-6:nth-child(6n) {
    width: 15%;
    margin: 0 0 2% 0;
}
/**/
section.setsubi_link div.col-6 a{
	display: block;
}
section.setsubi_link div.col-6 a:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.2) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0.04)), color-stop(100%,rgba(0,0,0,0.2))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 20%,rgba(0,0,0,0.2) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 ); /* IE6-8 */
}
/**/
.page_next_bb {
    width: 100%;
    margin: 30px 0 !important;
    padding-bottom: 20px;
    position: relative;
}
/**/
p.caption_tx{font-size: 14px !important;}

/*
===== response ======
*/
@media screen and (max-width: 900px){	
.onimage_catch_wrap h2{
    position: relative;
    top: 120px;
	width: 90%;
    margin: 0 5%;
}
/**/
section.setsubi_link div.col-6 {
    width: 15%;
    margin: 0 2% 2% 0 !important;
}
section.setsubi_link div.col-6:nth-child(6n) {
    width: 15%;
    margin: 0 0 2% 0 !important;
}
/**/
}

@media screen and (max-width: 768px){	
section.setsubi_link div.col-6 {
    width: 15%;
    margin: 0 2% 2% 0 !important;
}
section.setsubi_link div.col-6:nth-child(6n) {
    width: 15%;
    margin: 0 0 2% 0 !important;
}
.onimage_catch_wrap h2{
	font-size: 24px;
}
}

@media screen and (max-width: 767px){	
.col-4 {
    width: 49%;
    margin: 0 2% 2% 0 !important;
}
.col-4:nth-child(2n) {
    width: 49%;
    margin: 0 0 2% 0 !important;
}
/**/
section.setsubi_link div.col-6 {
    width: 32%;
    margin: 0 2% 2% 0 !important;
}
section.setsubi_link div.col-6:nth-child(6n) {
    width: 32%;
    margin: 0 0 2% 0 !important;
}
section.setsubi_link div.col-6:nth-child(3n) {
    width: 32%;
    margin: 0 0 2% 0 !important;
}
}

@media only screen and (max-width: 480px){
.onimage_catch_wrap h2{
    position: relative;
    top: 80px;
	width: 90%;
    margin: 0 5%;
	font-size: 20px;
}
	
.page_next_bb ul li.infbar {
    position: absolute;
    right: 0;
    top: 20px;
}
/**/
section.setsubi_link div.col-6 {
    width: 32%;
    margin: 0 2% 2% 0 !important;
}
section.setsubi_link div.col-6:nth-child(6n) {
    width: 32%;
    margin: 0 0 2% 0 !important;
}
section.setsubi_link div.col-6:nth-child(3n) {
    width: 32%;
    margin: 0 0 2% 0 !important;
}
}
@media only screen and (max-width: 300px){
.onimage_catch_wrap h2{
    position: relative;
    top: 40px;
	width: 90%;
    margin: 0 5%;
}

}