body { background-color: #cfefcf; margin: 0; padding: 0;}

  .m_area {
	width: 90%;
	margin: 20px 3% 0 7%;
	
  }
  .cm_w { display: block; width: 100%; overflow: auto; border: solid lightgray 1px; margin: auto;}
  .maintitle {
	text-align: center;
	font-size: 18px;
	color: #226600;
	font-weight: bold;
	background-color: #bfb;
	width: 100%;
	padding:10px 0 10px;
  }
  .subtitle {
	font-size: 14pt;
	font-weight: bold;
  }
  .title {
	color: #884400;
	font-weight: bold;
	padding: 10px 0 10px;
	border-top: #3fbf3f 1px dashed;
	border-bottom: #3fbf3f 1px dashed;
	border-left: #3fbf3f 16px solid;
	border-right: #3fbf3f 16px solid;
  }

  .subttl {list-style-position: inside; margin: 0.8em 0 0.8em -0.5em; text-indent: -1em; padding: 0.5em 2em 0.2em; background: #fff; font-size:13pt; font-weight:bold; border-botom: solid 2px #777;border-radius: 0.3em; box-shadow: 4px 1px 3px 2px #777; color:#020;}

  .info {
	background-color: #efe;
	border:1px dotted #888;
	text-align: left;
	margin: 20px 30px 10px;
	padding: 10px;
	line-height: 1.3;
	font-size: 11pt;
  }
  
  .ultitle {
 	margin: 20px 0 0 10px;
	font-weight: bold;
	text-align: left;
  }
  .libody {
	margin-left: 1.5em;
	line-height: 1.5;
	text-align: left;
  }
  
  .code {
	background-color: white; margin: 10px 30px; padding-left: 10px;
  }
    
  .image {border: 0; margin: 10px 5px 10px 10px;}
  .rsimage { max-width: 100%; min-width: 320px;}
  .reimage img { width: 100%; height: auto;}
  .
/*  table */
  .td1 img { width: 90%; margin:0 5px; box-shadow: 3px 2px 3px #373;}
  .td2 .image { width: 70%;}

  .tbl { display:table; border-collapse:collapse; width: 99%; margin: 10px 0;}
  .tblcaption { display:table-caption; text-align:center; font-weight:bold;}
  .tr { display:table-row;}
  .td1 { display:table-cell; border:0px; background-color: #afa; vertical-align: middle;}
  .td2 { display:table-cell; border:0px; text-align: left; vertical-align: top;}
  .td5 { display:table-cell; border:0px;}
  .tborder2 { border: 3px double #3b3;}
  .tb0 { border-collapse: collapse; border: none; }

  .tablex { border-top-width: 2px; border-top-style: solid; border-top-color: #006600; border-right-width: 2px; border-right-style: solid; border-right-color: #006600; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #006600; border-left-width: 2px; border-left-style: solid; border-left-color: #006600; border-collapse: collapse; empty-cells: show;}

  .tdx { border-top-width: 1px; border-top-style: solid; border-top-color: #006600; border-right-width: 1px; border-right-style: solid; border-right-color: #006600; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #006600; border-left-width: 1px; border-left-style: solid; border-left-color: #006600; height: 30px; padding-left: 5px;}

  .table_disp {
    display:table;
    table-layout:fixed;
}
  .tbl_row {
    display:table-row;
    width: 100%;
}
  .tbl_cell {
    display: table-cell;
    vertical-align: top;
    text-align: left;
    padding-left: 20px;
    line-height: 1.5;
}
  .tbl_img {
    display: table-cell;
    vertical-align: middle;
	padding: 5px;
	width: 310px;
}
  .tblcell_l {
    display: table-cell;
    vertical-align: top;
    text-align: left;
    width: calc(100% - 310px);
    padding-top: 10px;
    line-height: 1.5;
}

  .leftblk { float: left; width: calc(100% - 200px);}
  .rightblk { float: right; width: 300px;}
  .lefttext { text-align: left;}
  .righttext { text-align: right;}
  .centertext { text-align: center;}
  .fltr { float: right;}
  .fltl { float: left;}
  

/*  margin height line-height */
  .mgn10 { margin: 10px 5px 0 10px;}
  .ml10 { margin-left: 10px; }
  .ml20 { margin-left: 20px;}
  .ml30 { margin-left: 30px;}
  .ml50 { margin-left: 50px;}
  .mt10 { margin-top: 10px;}
  .mt20 { margin-top: 20px;}
  .mt30 { margin-top: 30px;}
  .pdt10 { padding-top: 10px;}
  .pdt20 { padding-top: 20px;}

  .w90 {width: 100%; margin: 0 auto;}
  .min-h { min-height: 12em;}
  .lh150 { line-height: 150%;}
  .pd50 { margin-top: -50px; padding-top: 50px;}
  .indent-20 {text-indent: -20px;}
  .indent20 {text-indent: -20px; margin-left: 20px;}
  .clrb { clear: both;}
  
/* v align */
  .vat { vertical-align: top;}
  .vam { vertical-align: middle;}
  .vabt { vertical-align: bottom;}

/* font */ 
  .fsize20 { font-size: 20pt; }
  .fsize16 { font-size: 16pt;}
  .fsize14 { font-size: 14pt;}
  .fsize12 { font-size: 12pt;}
  .fsize10 { font-size: 10pt}
  .fontsl { font-size: small;}
  
  .fontc_o { color: orange; }
  .fontc_n { color: navy; }
  .fontc_r { color: red; }
  .fontc_w { color: white; }
  .fontc_1 { color: #bfffbf;}
  .fontc_dg { color: #00af00;}
  .fontc_db { color: #0000af;}
  .fontc_dr { color: #af0000;}
  .fontc_do { color: #7f7f00;}
  .fontc_gr { color: gray;}
  .bg_w { background-color: white; }
  .bg_y { background-color: #ff7; }
  .bg_lb { background-color: #bdf; }

  .fontb { font-weight: bold;}
  

  a.click {
	text-decoration: none;
	margin: 10px 5px;
	border-top: #ddeedd 1px solid;
	border-left: #ddeedd 1px solid;
	border-bottom: #aaccaa 3px solid;
	border-right: #aaccaa 3px solid;
	padding: 5px 5px 3px 5px;
	text-align: center;
	font-size: 9pt;
	font-family: 'HG創英角ｺﾞｼｯｸUB','MS UI Gothic','ＭＳ ゴシック','sans-serif','verdana';
	border-radius: 5px;}
  s.click {
	background-color: #f0fff0;
	margin: 10px;
	border-top: #aaccaa 3px solid;
	border-left: #aaccaa 3px solid;
	border-bottom: #ddeedd 1px solid;
	border-right: #ddeedd 1px solid;
	padding: 5px 5px 3px 5px;
	text-align: center;
	font-size: 9pt;
	font-family: 'HG創英角ｺﾞｼｯｸUB','MS UI Gothic','ＭＳ ゴシック','sans-serif','verdana';
	border-radius: 5px;}
  a.clickblk {
	display:block; width:100%;
	font-weight: bold;
	text-decoration: none;
	border-top: #ddeedd 1px solid;
	border-left: #ddeedd 1px solid;
	border-bottom: #aaccaa 3px solid;
	border-right: #aaccaa 3px solid;
	padding: auto;
	text-align: center;
	border-radius: 5px; }

  .uhdlink{ position: relative; top: -45px; display: block; }
  .vtoh { display: table-cell; text-align: center;}

  .pos_left { position: relative; }
  .pos_center {	left: 0; position: absolute; text-align: center; width: 100%; }
  .pos_right { left: 0; position: absolute; text-align: right; width: 100%; }

/******** マウスオーバーポップアップウインドウ ***********/
  .btn-mouseover:hover + .mouseover_box{
    display: block;
  }
  .mouseover_box:hover{
  	display: block;
  }
  .mouseover_box{
  	display: none;
  	position: relative;
  	top:0;
  	left:0;
  	width: 400px;
  	padding: 10px;
  	font-size: 13px;
  	background-color: #fff;
  	border: 1px solid #ccc;
  	box-sizing: border-box;
  }

/******** 拡大画像ポップアップ用 **********/
  a.popup:hover { position: relative;}
  a.popup span { display: none;}
  a.popup:hover span {
    border: none;
    display: block;
    position: absolute;
    bottom: 50px;
    right: -300px;
    box-shadow: 4px 1px 3px 2px #5a5;
  }
  a.popup:hover span img{ vertical-align:bottom;}

/******** 左：説明文　右：図面　用のブロック**********/
  .dscr{
	float: left;
	width: calc(100% - 315px);
  }
  .imgbox{
	float: right;
	width: 310px;
	margin: 0 auto;
  }
  .imgbox .image {margin: 10px 5px 5px;}
 .outbox:before, .outbox:after {
    content:"";
    display:table;
 }
 .outbox:after { clear:both; }
 .outbox { *zoom: 1; margin: 10px 0; }


/****** ★ ここからスマホ用モバイル表示 ～ 767px ************/
@media only screen and (max-width: 767px) {
  .m_area { width: calc(100% -10px); margin: 0 auto;}
  .dscr{
	float: none;	/*　floatを解除 */
	width: 96%;
	margin: 0 auto;
  }
  .imgbox{
	float: none;
	width: 315px;
	margin: 0 auto;
  }
  .tbl_img {
    display: block;
	width: 100%;
  }
  .tblcell_l {
    display: block;
    width: 100%;
	line-height: 1.2;
  }
}

/*************** over 920px **********************/
@media only screen and (min-width:57.5em){
  .w90 {width: 90%; margin: 0 auto;}

}
/*************** under 640px **********************/
@media only screen and (max-width: 40em){
  .m_area {width: calc(100% - 10px); margin: 20px 0 0 10px;}
  .vtoh { display: block;}
}