@charset "UTF-8";
/* CSS Document */

#main{ margin:2em auto 4em;}
/************  カタログページ   *************/
/*
#main .catalog{
	width: 96%;
	max-width: 1280px;
	margin: 40px auto;
	}
*/
#main .catalog .item h2{
	width: 96%;
	color: #fff;
	background: #666666;
	font-size: 28px;
	font-weight: bold;
	padding: 0.5em 0 0.5em 20px;
	border-left: 4px #231815 solid;
	border-bottom: 1px #231815 solid;
	}

#main .catalog .item p{
	width: 96%;
	padding: 20px 0 30px 20px;
	font-size: 14px;
	}

#main .catalog .model h3{
	width: 96%;
	padding: 0 20px 4px 20px;
	font-size: 24px;
	border-bottom: 3px #40a1d9 solid;
	font-weight: bold;
	}

#main .model_con{
	width: 96%;
	padding: 10px 0 0 20px;
	}

#main .model_con h4{
	font-size: 20px;
	width: 80%;
    position: relative;
    float: left;
	}

#main .model_con table{
	width: 96%;
	border-collapse: collapse;
	margin-top: 60px;
	}

#main .model_con th{
	width: 200px;
	text-align: center;
	border: 1px #3d3939 solid;
	padding: 20px 10px;
	
	/*190329追加_崩れるならなら削除*/
	    vertical-align: middle;
	}

#main .model_con td{
	width: 540px;
	text-align: center;
	border: 1px #3d3939 solid;
	padding: 20px 10px;
	
	/*190329追加_崩れるならなら削除*/
	    vertical-align: middle;
	}

#main .attention{
	width: 96%;
	padding: 60px 0 0 40px;
	}

#main .attention h5{
	width: 96%;
	
	}

#main .attention ul{
	width: 96%;
	margin: 10px 0 0 40px;
	}

#main .attention ul li{
	width: 93%;
	margin: 4px 0 0 40px;
	font-size: 1em;
	text-indent: -2.5em;
	}

#main .attention table{
	margin-left: 0;
	width: 100%;
	}
	
#main .attention th{
	vertical-align: middle;
	}
	
#main .attention td{
	vertical-align: middle;
	}

#main .bg_blue{
	background: #c2e6f9;
	}

#main .bg_green{
	background: #ccffcc;
	}

#main .modellist{
	margin: 20px 0;
	}



/************  アコーディオン   *************/

#main .js_accordion{
	 display: none;
	 padding-bottom: 80px;
	  }
	 
#main .btn_accordion{
	overflow: hidden;
    border-top: 1px #ccc solid;
    padding: 22px 0;
    background: #f8f8f8;
    border-bottom: 1px #ccc solid;
    padding-left: 10px;
	}

#main .accordion_icon,
#main .accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
#main .accordion_icon {
	position: relative;
	width: 6%;
	height: 28px;
	float: right;
	margin-right: 1em;
	border-bottom: none;
	border-radius: 4px;
}
#main .accordion_icon span {
	position: absolute;
    left: 25%;
    width: 50%;
	height: 1px;
    background-color: #3d3939;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
#main .accordion_icon span:nth-of-type(1) {
    top: 48%;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
#main .accordion_icon span:nth-of-type(2) {
    top: 48%;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
#main .accordion_icon.active span:nth-of-type(1) {
	display:none;
}
#main .accordion_icon.active span:nth-of-type(2) {
	top: 46%;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}


#google_translate_element{
	margin-bottom: 20px;
	}


/*--------------------追加（3行のサイズ変更）--------------------*/

/*.triple{width:50% !important;}*/
#main .center{vertical-align: middle;}
#main .small_text{font-size:14px;}
#main .bg_black{background-color:#000; color:#fff;}
#main .bg_sky_blue{background-color:#BFFDFF;}
#main .strong_blue{background-color:#006DFF; color:#fff;}
#main .model_con .v-tex{width:16px; margin:auto; padding:20px;}
#main .model_con .v-tex p{width:16px; padding:0; word-break: break-all; margin:auto;}
#main .red_border{border-bottom: 3px #ff0000 solid !important; margin-top:1em;}
/*--------------------3/20追加（フォントカラー）--------------------*/
#main .red {color:#FF0004;}


@media all and (max-width: 750px) { 
/*
#main .catalog {width: 96%;margin: 0 auto;padding:40px 0;}*/
#main .catalog .item h2 {width: 100%;margin:auto;font-size: 26px;box-sizing:border-box;padding: 4px 0 4px 15px;border-left: 3px #231815 solid;border-bottom: 1px #231815 solid;}
#main .catalog .model h3 {width: 96%;margin:auto;box-sizing:border-box;padding: 0 0 2px 0;font-size: 22px;border-bottom: 2px #40a1d9 solid;}
#main .model_con h4 {font-size: 16px;width: 82%;font-weight:900;}
#main .catalog .item p{ padding:20px 0 30px; margin:auto;}
#main .btn_accordion {padding: 10px 0 10px 5px;}

#main .model_con{width: 98%;padding: 0;margin: auto;}
#main .js_accordion{ padding:0; }
#main .js_accordion table{overflow: auto;width: 100%;display: block;}
#main .model_con th {width: auto;padding: 0.5em 0.5em;word-break: keep-all; text-align:left;white-space: nowrap; font-size:0.9em;}
#main .model_con td {width: auto;padding: 0.5em 0.5em; font-size:0.9em;}

#main .attention{ width:100%; margin:30px auto; padding:0; }
#main .attention ul{ width:100%; margin:auto;}
#main .attention ul li{ box-sizing:border-box;width: 100%;margin:4px auto 0; padding-left:2em; text-indent: -2em;font-size:0.9em;}

}



#main .add_2111{position:fixed; width:50px; right:1em; top:120px; z-index:99;}
#ATS.honyaku_ON #main .add_2111{top:160px;}
#main .add_2111 .icon{cursor:pointer;margin-bottom:5px;}
#main .add_2111 .icon1.off{ opacity:0.5;}
#main .add_2111 .icon1.off{ opacity:0;}
#main .add_2111 .icon img{width:50px;}
#main .no_hash .add_2111 .icon1{ display:none;}
#main .no_cam .add_2111 .icon2{ display:none;}



body.modal_on{ overflow:hidden;z-index:3; left:0; right:0; top:0;}

#modal_cont{ position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;z-index: 2000;background: rgba(0,0,0,0.4);-webkit-overflow-scrolling: touch; text-align:center;overflow: hidden;width: 0%;height: 0%;opacity: 0;padding: 0;
display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:space-between;-moz-box-pack:space-between;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center; flex-wrap:wrap;
-moz-transform:scale(0);-webkit-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0);
-moz-transition-property:transform;-webkit-transition-property:transform;-o-transition-property:transform;-ms-transition-property:transform;transition-property:transform;
-moz-transition-duration:0.6s;-webkit-transition-duration:0.6s;-o-transition-duration:0.6s;-ms-transition-duration:0.6s;transition-duration:0.6s;
}
#modal_cont *{ box-sizing:border-box;}

body.modal_on #modal_cont{opacity: 1;width: 100%; height: 100%;overflow: auto;
-moz-transform:scale(1.0);-webkit-transform:scale(1.0);-o-transform:scale(1.0);-ms-transform:scale(1.0);transform:scale(1.0);}
body.modal_on #modal_cont::before{ content:""; width:100%; height:2em; display:block;}
body.modal_on #modal_cont::after{ content:""; width:100%; height:2em; display:block;}

body.modal_on #modal_cont .modal_images{ position:relative;max-width:750px; width: 100%; margin:auto; z-index:11; padding:2em 1.5em; background:#FFF; display:inline-block;}
body.modal_on #modal_cont img{ max-width:100%;}
body.modal_on #modal_cont .cont{ display:none;}
body.modal_on #modal_cont .cont.on{ display:block;}
body.modal_on #modal_cont .cont1 table{ margin:0 auto; width:100%;overflow: auto;display: block;border-collapse: collapse;}
body.modal_on #modal_cont .cont1 table tr{}
body.modal_on #modal_cont .cont1 table tr td{border: 1px #3d3939 solid;vertical-align: middle;width: auto;padding: 0.5em 0.5em;font-size: 0.9em;}
body.modal_on #modal_cont .cont1 table tr th{border: 1px #3d3939 solid;vertical-align: middle;width: auto;padding: 0.5em 0.5em;text-align: left;font-size: 0.9em;}

body.modal_on #modal_cont .cont1 ul{ text-align:left; font-size:0.9em;}
body.modal_on #modal_cont .cont1 ul h5:first-child{ margin-top:0 !important; }
body.modal_on #modal_cont .cont1 ul li{ text-indent:-2em; padding-left:2em; box-sizing:border-box; margin-bottom:0.25em;}
body.modal_on #modal_cont .cont1 ul li:last-of-type{ margin-bottom:0;}

body.modal_on #modal_cont .modal_images .close{ position:absolute; right:-20px; top:-20px; width:60px; max-width:80px;}
body.modal_on #modal_cont .modal_images .close img{ width:100%;}

@media all and (max-width: 750px) { 
#main .add_2111{width:35px; right:0.5em; top:90px;}
#ATS.honyaku_ON #main .add_2111{top:130px;}

#main .add_2111 .icon{margin-bottom:2px;}
#main .add_2111 .icon img{width:35px;}


body.modal_on #modal_cont .modal_images{ width: 94%; padding:1.5em 1em;}
body.modal_on #modal_cont .modal_images .close{ right:-2%; top:-0.5em; width:40px; }
}