/*====================================================================================================
  BOX-LIST
====================================================================================================*/

#subpage .box_list{ overflow: hidden; width: 100%; box-sizing: border-box;}
#subpage .box_list img{ width: 100%;}
#subpage .box_list .box{ margin-bottom: 30px; box-sizing: border-box;}

#subpage .bx_01 .box{ width: 100%;}
#subpage .bx_02 .box{ width: 50%; width: calc(50% - 15px); margin-right: 30px;}
#subpage .bx_02 .box:nth-child(2n){ margin-right: 0;}
#subpage .bx_03 .box{ width: 33.3%; width: calc(33.3% - 19.9px); margin-right: 30px;}
#subpage .bx_03 .box:nth-child(3n){ margin-right: 0;}
#subpage .bx_04 .box{ width: 25%; width: calc(25% - 22.5px); margin-right: 30px;}
#subpage .bx_04 .box:nth-child(4n){ margin-right: 0;}

#subpage .box_list .box{ float: left; }

/*====================================================================================================
  INDEX-BOX
====================================================================================================*/

#subpage .index01 .box,
#subpage .index02 .box{ margin-bottom: 30px; border: 1px solid #CCC;}

#subpage .index01 .box a,
#subpage .index02 .box a{ display: block; padding: 20px 20px; text-decoration: none;}
#subpage .index01 .box h3,
#subpage .index02 .box h3{
    display: table-cell;
    margin-bottom: 0; 
    color: #333;
    height: 50px;
    font-size: 100%;
    vertical-align: middle;
    box-sizing: border-box;
}
#subpage .index01 .box .disc,
#subpage .index02 .box .disc{ margin-top: 10px; color: #666; font-size: 87.5%;}

#subpage .index01 .box h3{ font-size: 137.5%;}
#subpage .index01 .box h3:after{ content: ''; display: inline-block;}
#subpage .index01 .box h3:after{ margin: 0 0 0 10px; width: 10px; height: 15px; background: url("../image/right.png") no-repeat right center;}
#subpage .index01 .box h3.pdf:after{ margin: 0 0 -5px 10px; width: 24px; height: 29px; background: url("../image/pdf.png") no-repeat;}

#subpage .index01 .photo{ margin-bottom: 10px; width: 100%;}
#subpage .index01 .box:hover {background: #f2f9ff;}

#subpage .index02 .in_link{ background: url("../image/right.png") no-repeat 95% center;}
#subpage .index02 .in_pdf{ background: url("../image/icon_pdf.png") no-repeat 95% center;}
#subpage .index02 .in_xls{ background: url("../image/icon_xls.png") no-repeat 95% center;}
#subpage .index02 .in_zip{ background: url("../image/icon_zip.png") no-repeat 95% center;}


/*====================================================================================================
  CARD-BOX
====================================================================================================*/

#subpage .Card-Ggraphic{ }
#subpage .Card-Ggraphic h3{ font-weight: bold; }
#subpage .Card-Ggraphic .disc { margin-top: 15px; color:#666; font-size: 75%; } 
#subpage .Card-Ggraphic a:hover{ opacity: 0.3; filter: alpha(opacity=30); -moz-opacity: 0.3;}
#subpage .Card-Ggraphic a:hover img { opacity: 0.3; filter: alpha(opacity=30); -moz-opacity: 0.3;}

#subpage .Card-Horizontal-2to1{ overflow: hidden;}
#subpage .Card-Horizontal-2to1 .photo-r{ float: right; width:48.1%;}
#subpage .Card-Horizontal-2to1 .photo-r img{ width: 100%;}
#subpage .Card-Horizontal-2to1 h4{ margin-bottom: 10px;}
#subpage .Card-Horizontal-2to1 .come{ float: left; width: 51.8%; width: calc( 51.8% - 30px); margin-right: 30px; margin-bottom: 0px;}

#subpage .Card-Horizontal-3to1{ overflow: hidden;}
#subpage .Card-Horizontal-3to1 a{ text-decoration: none;}
#subpage .Card-Horizontal-3to1 .photo-l{ float: left; width: 30.9%;}
#subpage .Card-Horizontal-3to1 .photo-l img{ width: 100%;}
#subpage .Card-Horizontal-3to1 .come{ float: right; width: 68.9%; width: calc( 68.9% - 30px); margin-left: 30px; margin-bottom: 0px;}

#subpage .Card-Horizontal-3to1 .come ul{ border-top: 1px solid #999; border-bottom: 1px solid #999; overflow: hidden;}
#subpage .Card-Horizontal-3to1 .come ul li{ float: left; padding: 20px 0;}
#subpage .Card-Horizontal-3to1 .come ul li:nth-child(1){ width: 65%;}
#subpage .Card-Horizontal-3to1 .come ul li:nth-child(2){ width: 35%; border-left:#D9D9D9 1px solid; }
#subpage .Card-Horizontal-3to1 .come ul li.pdf:nth-child(2) a:before{ content: ''; vertical-align: middle; margin-right: 10px; display:inline-block; width: 24px; height: 29px; background: url("../image/pdf.png") no-repeat;}
#subpage .Card-Horizontal-3to1 .come ul li.pdf{ text-align: center;}


/*====================================================================================================
  BOX
====================================================================================================*/

#subpage .box_def{ border: 1px solid #CCCCCC;}

#subpage .Box-DefinitionList-Privacy{
    padding: 40px;
    background: #F2F6FA;
}
#subpage .Box-DefinitionList-Privacy p.title{ margin-bottom: 10px; font-size: 137.5%;}
#subpage .Box-DefinitionList-Privacy p:last-child{ margin-top: 40px; text-align: center;}

#subpage .Box-DefinitionList-Privacy input{ display: inline-block; width: auto;}

#subpage .Box-DefinitionList-Column{ padding: 20px; overflow: hidden;}
#subpage .Box-DefinitionList-Column .desc{ float: left; margin-right: 30px; width: 56.3%; width: calc( 56.3% - 30px) ;}
#subpage .Box-DefinitionList-Column p.title{ padding: 10px 0 20px; font-size: 125%;}
#subpage .Box-DefinitionList-Column p.cap{ margin: 5px 0 20px; font-size: 75%; color: #666;}
#subpage .Box-DefinitionList-Column .photo-r{ float: right; width: 43.6%;}
#subpage .Box-DefinitionList-Column .photo-r img{ width: 100%;}


/*====================================================================================================
  kobetu
====================================================================================================*/

#subpage .Materials-Heading-WithText { padding: 40px; background: #FFFCF8;}
#subpage .Materials-Heading-WithText p.title{ margin: 20px 0 0; font-size: 137.5%; font-weight: bold;}
#subpage .Materials-Heading-WithText p.honbun{ margin: 10px 0;}

#subpage .Products-CasesList{}
#subpage .Products-CasesList .box{}
#subpage .Products-CasesList .photo{}
#subpage .Products-CasesList .pr_list{ margin-top: 10px;}
#subpage .Products-CasesList .pr_list ul{ border-bottom: 1px solid #CCC; overflow: hidden; background: #EBF1F7;}
#subpage .Products-CasesList .pr_list ul:first-child{ border-top: 1px solid #CCC;}
#subpage .Products-CasesList .pr_list ul li{ float: left;}
#subpage .Products-CasesList .pr_list ul li:nth-child(1){ padding: 5px 0; width: 25%; text-align: center;}
#subpage .Products-CasesList .pr_list ul li:nth-child(2){ width: 75%; background: #FFF; padding: 5px;}
    

/* sitmap */
#subpage .Sitemap-List-Link{}
#subpage .Sitemap-List-Link a{ }
#subpage .Sitemap-List-Link a:after{ display: inline-block; content: ''; margin-left: 7px; width: 8px; height: 13px; background: url("../image/right.png") no-repeat;}
#subpage .Sitemap-List-Link a.pdf:after{ vertical-align: middle; width: 24px; height: 29px; background: url("../image/pdf.png") no-repeat;}
#subpage .Sitemap-List-Link .cate_top{ padding: 20px 0 ; font-size: 125%;}
#subpage .Sitemap-List-Link ul{ overflow: hidden;}
#subpage .Sitemap-List-Link ul li{ float: left; margin-bottom: 10px; width: 33.3%; width: calc(33.3% - 19.9px); margin-right: 30px;}
#subpage .Sitemap-List-Link ul li:nth-child(3n){ margin-right: 0;}



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

  SMART PHONE

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

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

#subpage .index01 .box,
#subpage .index02 .box{ width: 100%;}   
  
#subpage .bx_03 .box{}
    
#subpage .index01 .box,
#subpage .index02 .box{ float: none; margin-right: 0; margin-bottom: 30px; box-sizing: border-box;}
    
    
/*====================================================================================================
  CARD-BOX
====================================================================================================*/
    
#subpage .Card-Ggraphic .box{ float: none; width: 100%;}
#subpage .Card-Ggraphic h3{ font-weight: bold; }
#subpage .Card-Ggraphic .disc { margin-top: 15px; color:#666; font-size: 75%; } 

#subpage .Card-Horizontal-2to1 .photo-r{float: none; margin-left: 0; max-width: 100%;}
#subpage .Card-Horizontal-2to1 .photo-r img{ width: 100%;}
#subpage .Card-Horizontal-2to1 h4{ margin-bottom: 0px;}

#subpage .Card-Horizontal-2to1{ max-width: 100%; overflow: hidden;}
#subpage .Card-Horizontal-2to1 .photo-r{ float: none; width: 100%; margin-top: 10px;}
#subpage .Card-Horizontal-2to1 .photo-r img{ width: 100%;}
#subpage .Card-Horizontal-2to1 .come{ float: none; width: 100%; width: calc( 100% - 0); margin-right: 0; margin-bottom: 0px;}

#subpage .Card-Horizontal-3to1{ max-width: 100%; }
#subpage .Card-Horizontal-3to1 .photo-l{ }
#subpage .Card-Horizontal-3to1 .come{ float: right; margin-bottom: 0px;}
    
#subpage .Card-Horizontal-3to1 .come ul{ border-top: 1px solid #999; border-bottom: 1px solid #999; overflow: hidden;}
#subpage .Card-Horizontal-3to1 .come ul li{ float: none; padding: 20px 0;text-align: center;}
#subpage .Card-Horizontal-3to1 .come ul li:nth-child(1){ width: 100%;}
#subpage .Card-Horizontal-3to1 .come ul li:nth-child(2){ width: 100%; border-left:none; border-top: #D9D9D9 1px solid;}
#subpage .Card-Horizontal-3to1 .come ul li.pdf:nth-child(2) a:before{ width: 14px; height: 14px; background: url("../image/icon_pdf.png") no-repeat;} 
    
/*====================================================================================================
  BOX
====================================================================================================*/
    
#subpage .Box-DefinitionList-Privacy{ padding: 20px;}
    
#subpage .Box-DefinitionList-Column{ padding: 20px; max-width: 100%;}
#subpage .Box-DefinitionList-Column .desc{ float: none; margin-right: none; width: 100%; width: calc( 100% - 0) ;}
#subpage .Box-DefinitionList-Column .photo-r{ float: none; margin-top: 20px; width: 100%;}
#subpage .Box-DefinitionList-Column .photo-r img{ width: 100%;}

    
/*====================================================================================================
  kobetu
====================================================================================================*/

#subpage .Materials-Heading-WithText { padding: 20px;}
    
#subpage .Products-CasesList{}
#subpage .Products-CasesList .box{ float: none; width: 100%;}
    
/* sitmap */
#subpage .Sitemap-List-Link a{ }
#subpage .Sitemap-List-Link a:before{ display: inline-block; content: ''; margin-right: 7px; width: 8px; height: 13px; background: url("../image/right.png") no-repeat;}
#subpage .Sitemap-List-Link a:after { display: none;}
#subpage .Sitemap-List-Link a.pdf:before{ vertical-align: baseline; width: 14px; height: 14px; background: url("../image/icon_pdf.png") no-repeat;}

#subpage .Sitemap-List-Link .cate_top{ padding: 20px 0 ; font-size: 125%;}
#subpage .Sitemap-List-Link .cate_top a:before{ display: none;}
#subpage .Sitemap-List-Link .cate_top a:after{ display: inline-block; content: ''; margin-right: 7px; width: 8px; height: 13px; background: url("../image/right.png") no-repeat;}
    
#subpage .Sitemap-List-Link ul{ overflow: hidden;}
#subpage .Sitemap-List-Link ul li{ float: none; width: 100%; width: calc(100% - 0); margin-right: 0;}
#subpage .Sitemap-List-Link ul li:nth-child(3n){ margin-right: 0;}
    
    
}