@charset "utf-8";
/******************************************************************************
/* ipad  cell phone max-width:768px
************************************* ****************************************/
  
@media only screen and (max-width:768px){
	
/*****************************************************************
#wrapall
*****************************************************************/
#wrapall{
	width:100%;
	margin:0 auto;
	padding:15px 0;
	background:#EFF6FD;
}

#wrapallinner{
	width:96%;
	margin:0 auto;
	padding:0;
	background:#EFF6FD;
}
	
	

/*****************************************************************
#wrapper　
*****************************************************************/

#wrapper{
	width:100%;
	margin:0 auto;
	padding:0;
	}
	
	
#wrapper .inner{
	width:94%;
	margin:0 auto;
	padding:0;
	}


	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	
/*#header{
	width:100%;
	margin:0 0 0px ;
	padding:1% 0 0%;
	position:absolute;
	}


	
#header .logo,#footer .logo{
	width:70%;
	float:left;
	text-align:left;
	padding: 0;
	}
	

#header .logo img{
    max-width:100%;
	height:auto;
}*/

/*****************************************************************
header
*****************************************************************/
#header{
	width:90%;
	margin:0 0 0.5%;
	padding:0 0 ;
	background:#EFF6FD;/*body背景色*/
	/*position:absolute;??*/
}
#header .inner {
	width:100%;/*94%*/
	margin: 0;
	padding:0;
	text-align:left;
}

#header h1{
	margin:0;
	padding:0;
}

#header .logo{
	width:70%;
	float:left;
	text-align:left;
	padding: 0;
	}
	

#header .logo img{
    max-width:100%;
	height:auto;
}




	







/*****************************************************************
#menu-btn
*****************************************************************/
/*******トグルメニュ*********/
#menu{
    width: 100%;
    margin: 5px auto 0;
	padding:0;
	background:#cfbfff;
    position: relative;
    z-index: 99;
}

#menu-inner{ 
    width: 100%;
    height: auto;
	margin:0;
	padding:0;
}
#btn-content{
	text-align: right;
	height:0;
}
#menu-btn{
    display: inline-block;
    padding: 15px;
    margin:0;
    cursor: pointer;
    background:#cfbfff;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    position:fixed;
    top:20px;
    right: 20px;/*ボタンの位置*/
	width:60px;
	height:60px;
}
#menu-btn i{
	display:block;
	width:30px;
	height:5px;
	background-color:#fff;
	margin-bottom:8px;
	border-radius:2.5px;
}


#menu-content{/*下に出るナビ*/
    display: none;
    width: 94%;
	margin:0 auto;
	position: fixed;top:55px;right:10px;
	/*background:#6CF;#1F9DF2*/
	opacity:0.99;
    z-index: 999;/*下に出るナビレイヤー上に*/
	 border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
}

#menu-content > ul{
	 }

#menu-content > li{
    width: 100%;
    height: 40px;
    float: none;
	border-bottom:#FFF 1px dashed;
	padding:0;
}
#menu-content > li:last-child {
	border-bottom:hidden;
	border-right:none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;
    padding: 0;
    text-decoration: none;
	color:#FFF;
	background:rgba(183,141,240,0.7);
	
}
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
	
#menu-content > li .eng_s{
	display:none;
}
	



/*****************************************************************
#mainNav　 (max-width:768px)
*****************************************************************/
	nav#mainNav{
	/*clear:both;*/
	width:100%;
	margin:0 auto 0;
	padding:0;
	background:#1F9DF2;
	
	}

	nav#mainNav a.menu{
	width:100%;
	display:block;
	height:40px;
	font-weight: bold;
	text-align:left;
	color:#fff;
	}

	nav#mainNav a#menu span{padding-left:10px;}
	nav#mainNav a.menu span:before{content: "→ ";}
	nav#mainNav a.menuOpen span:before{content: "↓ ";}

	nav#mainNav a#menu:hover{cursor:pointer;}

	nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index:999;
	}

	nav#mainNav ul li{
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #fff;
	color:#fff;
	background:#4FB3F4;
	}
	
	nav#mainNav ul li a span{padding-left:10px;}
	

	nav#mainNav ul li:first-child a{border-top:1px dashed #fff;}
	
	nav#mainNav ul li:last-child a{border:0;}
	
	nav#mainNav ul li.active a,nav#mainNav ul li a:hover{background:#244487;}

	nav div.panel{float:none;}
	
.accordion {
	width: 100%;
	margin: 0 auto;
	padding: 10px;
}
.accordion .ac-content {
	margin: 0 10px;
	font-size:120%;
}
.accordion label:first-letter{
     font-size: 120%;
     font-weight: bold;
	 color:#1F9DF2;
	 margin-right:0.1%;
     padding:0.3%;
}

.accordion input {
	display: none;
}
.accordion label {
	font-size:120%;
	display: block;
	background: #E9F5FE;
	/*color:#1F9DF2;*/
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #fff;
}
.accordion label:hover {
	background: #eee;
}
.accordion .ac-cont {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #fff;
	padding: 0 10px;
}
.accordion .ac-cont:first-letter{
     font-size: 120%;
     font-weight: bold;
	 color:#F4421C;
	 margin-right:0.1%;
     padding:0.3%;
}

.accordion input:checked + .ac-cont {
	height: auto;
	padding: 10px;
}





	

/*****************************************************************
wrapper
*****************************************************************/
#wrapper{
　　margin:1% auto;
　　padding:0;
　　width:100%;
}

.inner{
　　margin:0 auto;
	width:100%;
}



/****************************************************************
gridWrapper
*****************************************************************/
.gridWrapper{
    width:100%;
	margin:0 auto;
	padding:10px 0;
	overflow: hidden;
}
* html .gridWrapper{height:1%;}
	
.gridWrapper .inner{
	 width:94%;
	margin:0 atuo;
	text-align:center;	
	}

.gridWrapper .inner P.al{
	font-size:100%;
	line-height:1.5;
    text-align:left;
	}
	
.gridWrapper .inner .link_btn{
	width:60%;
	margin: 5% auto;
	padding:0.5%;
	font-size:100%;
	color:#8170FF;
	background-color:#fff;
	text-align:center;
	border:#8170FF 1px solid;
    border-radius: 20px;		
	-webkit-border-radius:20px;	
	-moz-border-radius: 20px;	
	}


.gridWrapper .inner  a .link_btn{ 
	text-decoration: none;
}


.gridWrapper .inner  a:hover .link_btn{ 
	color:#fff;
	background-color:#8170FF;
}


.gridWrapper .inner .link_btn  a:-webkit-any-link {
	text-decoration: none;
}

.gridWrapper .inner .link_btn a:link{
	color:#fff;
	text-align:center;
	background-color:#1F9DF2;
	border:#1F9DF2 1px solid;
    border-radius: 3px;		
	-webkit-border-radius: 3px;	
	-moz-border-radius: 3px;	
	}	


/*****************************************************************
h2　h3
*****************************************************************/
	
h2{
	margin:0.5% 0 0;
	padding:1% 0 ;
	font-size:140%;
	font-weight:bold;
	color:#666; 
	letter-spacing: 3px;
	}
.eng{
	width:80%;
	margin:0 auto 5%;
	padding:0 ;
	font-size:90%;
	font-weight:bold;
	color:#8170FF; 
	letter-spacing:1px;
	text-align:center;
	border-bottom:#8170FF 2px solid;
	font-style: italic;
	}
.eng .line_gr{
	border-bottom:#8170FF 2px solid;
	}

h3{
	margin:0.2% 0;
	padding:1% 0 ;
	font-size:100%;
	font-weight:bold;
	color:#8170FF;; 
	letter-spacing: 2px;
	}


/*****************************************************************
#instafeed
*****************************************************************/
#instafeed  {
	width:100%;
	margin:5px auto;
	padding:0;
	background:#0C0;
}
#instafeed li {
	width:32%;
	margin:0 1% 0 0;
	padding:0;
	vertical-align:baseline;
    list-style: none;
	float:left;
}
#instafeed li img{
    width:100%;
 }

	
/*****************************************************************
grid set
*****************************************************************/
 
.grid_all{
	width:100%;
	margin:1% 0;
	padding:0 
	}
	

.grid01{
	width:100%;
	margin:1% 0;
	padding:0 0.5% 0; 
	float:left;
	}

.grid01 img{
	max-width:100%;
	height:auto; 
	}
	



.grid02_all{ 
	width:100%;
	margin:5% auto;
	padding:0;
	overflow:hidden;/*高さを出す*/
}

.grid02{ 
	width:100%;
	margin: 2% 0 0 0;
	padding:  0;
	text-align:left;
}
.grid02 img{ 
     max-width:100%;
	 height:auto;
}
.tx{ 
	font-size:130%;
	text-align:left;
}



.grid03{
	width:100%;
	margin:1% 0;
	padding:0; 
	}
.grid03 img{
	max-width:100%;
	height:auto; 
	}
	
	
/*****************************************************************
#top
*****************************************************************/
.wb03_all{ 
	width:100%;
	margin:5% auto;
	padding:0;
	overflow:hidden;
}

.wb03{ 
	width:49%;
	height:auto;
	margin: 2% 1% 0 0;
	padding:0;
	float:left;
	position:relative;
	border:#FFF 2px solid;
}
.wb03 img{ 
     max-width:100%;
	 height:auto;
}

.wb03 .gr{ 
	width:40%;
	margin: 0.5% 1% 0 0;
	padding:2%  0;
	background:#8CC11F;
	color:#FFF;
	font-size:90%;
	font-weight:bold;
	position:absolute;top:10px; left:10px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing:1px;
	opacity: 0.9;
	}
	
.bg_about{ 
    max-width:100%;
    height:auto;
	background: url(../images/top/bg_about.png) no-repeat center bottom;
	background-size:cover;
}


/*製品紹介*/
ul.item {
    width:100%;
    margin:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
 
ul.item li {
	width:48%;
    margin:1%;
    padding:1% 0 1%;
    list-style:none;
	background:#178B3A;
}	
ul.item li .bg_gr{ 
	margin:0;
	padding:2%;
	color:#FFF;
	text-align:left;
}

ul.item li img{ 
	max-width:90%;
	margin:3% 0 0 0;
    padding:5%;
	height:auto;
	background:#fff;
}


/*information*/
ul.item02 li {
	width:100%;
    margin:0.5% 0 0.5%;
    padding: 0 0;
    list-style:none;
	text-align:left;
	background:#fff;
}
ul.item02 li:last-child {
	width:100%;
    margin:2% 0 0.5%;
    padding: 2%;
	text-align:left;
	background:#fff;
}	
	
ul.item02 li .tit_info{
	font-size:120%;
	font-weight:bold;
    color: #005740;
	}	


dl.info_list dt {
   float:left;
   width:10em;
}

dl.info_list dd {
   margin-left:0;
   padding-left:10em;
}

dl.info_list {
   width:100%;
	}	

dl.info_list dt {
   width:70%;
   float:left;
}

dl.info_list dd {
   width:20%;
   margin-left:0;
   padding-left:2%;
	font-size:90%;
   float:left;
}

/*****************************************************************
#information
*****************************************************************/

#information .inner_info h3{
    margin:5% 0 0;
    text-align:left;
}

#information P.txt_date{
	margin:2% 0;
	font-size:90%;
    text-align:left;
	line-height:1.8;
	color:#999;
}	


#information P.txt_info{
	margin:2% 0;
	font-size:100%;
    text-align:left;
	line-height:1.8;
}	


/*****************************************************************
#process
*****************************************************************/
#process{ 
	position:relative;
}

#process .grid_process{ 
	position:relative;
}


#process .grid_process_all{
	width: 96%;
	margin: 0 auto;
	padding: 3% 0%;
	overflow: hidden;
}

#process .grid_process_ph{ 
	width:100%;
	margin: 0 0 0 0;
	padding:  0;
	text-align:left;
	float:left;
}


#process .grid_process_ph img{ 
     max-width:100%;
	 height:auto;
}

#process .grid_process_txt{ 
	width:100%;
	margin: 0.5% 0;
	padding:  0;
     font-size: 100%;
	 line-height:2;
	text-align:left;
}

#process .grid_process_txt P{ 
    width:76%;
	margin: 0 0 0 0;
	float:left;
    font-size: 100%;
	line-height:1.3;
	float:left;
}



#process  .box_gr {
    width:22%;
    margin: 0 2% 0  0;
    padding:1%;
    background: #8CC11F;
    color: #FFF;
    font-size: 100%;
    font-weight: bold;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    letter-spacing:1px;
	float:left;
}

/*****************************************************************
#products
*****************************************************************/
#products{ 
	position:relative;
}


#products h3{
	margin:3% 0 1% 0;
	padding:2% 0 0 0 ;
	font-size:120%;
	font-weight:bold;
	color:#178B3A;; 
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing: 1px;
	}

#products .grid_prod{ 
	position:relative;
}

#products .grid_prod_all{
	width: 96%;
	margin: 0 auto;
	padding: 3% 0%;
	overflow: hidden;
}

#products .grid_prod_ph{ 
	width:96%;
	margin: 0 2%;
	padding:  0;
	text-align:center;
}


#products .grid_prod_ph img{ 
     max-width:100%;
	 height:auto;
}

#products .grid_prod_txt{ 
	width:100%;
	margin: 0;
	padding:  0;
     font-size:100%;
	 line-height:1.4;
	text-align:left;
}

#products .grid_prod_txt P{ 
    /*width:60%;*/
	margin: 0 0 0 0;
}



#products  .box_gr {
    width:30%;
    margin: 0 0 0  0;
    padding:3% 5% 5%;
    background: #8CC11F;
    color: #FFF;
    font-size: 160%;
    font-weight: bold;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    letter-spacing: 2px;
}



#products table.type_prod {
	width:100%;
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	 border-radius: 10px;       
    -webkit-border-radius: 10px;    
    -moz-border-radius: 10px;
	overflow: hidden;
}
#products table.type_prod th {
	width: 20%;
	padding:1.3% 1%;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background:#E0EDDA;
}
#products table.type_prod td {
	width:76%;
	padding:1.3% 1%;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background:#D8E8D0;
}


.txt_r{ 	
   color:#C00;
   font-size:70%;
   letter-spacing: 0px;
}
.txt_t{ 	
   font-size:100%;
	 line-height:1.4;
   text-align:left;
   margin:4% 0 1% 0;
   padding:0;
   color: #178B3A;
}

/*ボタン*/


.grid_btn_online{
	width:90%;/*ボタン*/
	margin:2% 5% 4%;
	padding:0 ;
}

.btn_online02{
	width:100%;
	margin: 0;
	padding:0 ;
	font-size:100%;
}


.btn_online{
	width:100%;
	margin: 0;
	padding:1.5% 0 1%;
	font-size:95%;
	color:#178B39;
	background-color:#fff;
	text-align:center;
	border:#178B39 1px solid;
    border-radius: 20px;		
	-webkit-border-radius:20px;	
	-moz-border-radius: 20px;	
	}

/*
.grid_btn_online{
	width:90%;
	margin:2% auto 4%;
	padding:0 ;
}

.btn_online{
	width:100%;
	margin: 0 2% 7% 0;
	padding:4% 0 3% 0;
	font-size:110%;
	color:#178B39;
	background-color:#fff;
	text-align:center;
	border:#178B39 1px solid;
    border-radius: 20px;		
	-webkit-border-radius:20px;	
	-moz-border-radius: 20px;	
	}
*/	
	
	
 .btn_online img{
	max-width:60%;
	height:auto;
}
a .btn_online{ 
	text-decoration: none;
}


a:hover .btn_online{ 
	color:#fff;
	background-color:#178B39;
}
	
	
/*****************************************************************
#certification
*****************************************************************/
#certification h3{
	margin:0 0 1% 0;
	padding:2% 0 0 0 ;
	font-size:120%;
	font-weight:bold;
	color:#178B3A;; 
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	letter-spacing: 1px;
    }

#certification .line_g{
	border-bottom:#8CC11F 1px dotted;
	margin:0 5px 0 0 ;

    }

#certification p{
	font-size:100%;
	line-height:1.2;
	text-align:left;
    }
	
#certification .grid_cer_all{
	width: 96%;
	margin: 3% auto 0;
	padding: 0 0%;
	overflow: hidden;
}

#certification .grid_cer_ph{ 
	width:28%;
	margin: 0 4% 0 0;
	padding:  0;
	text-align:left;
	float:left;
}


#certification .grid_cer_ph img{ 
     max-width:100%;
	 height:auto;
}

#certification .grid_cer_txt{ 
	width:66%;
	margin: 0 0 0 0;
	padding:  0;
    font-size: 100%;
	line-height:1.2;
	text-align:left;
	float:left;
}



/*****************************************************************
#company
*****************************************************************/
#company .grid_prod_all{
	width:100%;
	margin: 0;
	padding: 3% 0%;
	/*overflow: hidden;*/
}


#company table.type_com  {
	width:96%;
	margin: 0 2%;
	padding: 0;
	border: 2px solid #D6E4CB;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
	font-size:100%;
	background-color: #E3EFDE;
}
#company table.type_com  thead th,
#company table.type_com  tbody th,
#company table.type_com  tbody td {
	padding:1.3% 2%;
	border-bottom: 2px solid #D6E4CB;
}

#company table.type_com  thead th {
  display:block;
  background-color: #ECF4E8;
}
#company table.type_com  tbody th {
  width: 35%;
  font-size:85%;
font-weight: bold;
  background-color: #ECF4E8;
}
#company table.type_com  tbody td {
  display:block;
  width: auto;
}


#company table.type_com  thead th + th,
#company table.type_com  tbody td {
  border-left: 2px solid #D6E4CB;
}
#company table.type_com  tbody tr:last-child th,
#company table.type_com  tbody tr:last-child td {
  border-bottom: none;
}




#company  .grid_com_txt{
	width:96%;
	margin: 0 2%;
	padding: 0;
	font-size:100%;
	text-align:left;
	line-height:1.4;
	
}


#company  .pre img{
	max-width:40%;
	height:auto;
	text-align:center;
}

#company  .pre_name{
	font-size:90%;
	text-align:center;
	
}

.att {
	font-size:96%;
	line-height:1.2;
    color: #F30;
}	

#company  .letter img{
	max-width:100%;
	height:auto;
}



/*****************************************************************
#contact 
*****************************************************************/

#contact table.type_cont  {
  width:100%;
  border: 2px solid #D6E4CB;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  overflow: hidden;
  font-size:100%;
  background-color: #E3EFDE;
}
#contact  table.type_cont  thead th,
#contact  table.type_cont  tbody th,
#contact  table.type_cont  tbody td {
	padding:1.3% 2%;
  border-bottom: 2px solid #D6E4CB;
}

#contact  table.type_cont  thead th {
	display:block;
  width: auto;
  background-color: #ECF4E8;
}
#contact  table.type_cont  tbody th {
  font-size:90%;
	font-weight: bold;
  background-color: #ECF4E8;
}
#contact  table.type_cont  tbody td {
  display:block;
  width: auto;
}


#contact  table.type_cont  thead th + th,
#contact  table.type_cont tbody td {
  border-left: 2px solid #D6E4CB;
}
#contact  table.type_cont tbody tr:last-child th,
#contact  table.type_cont  tbody tr:last-child td {
  border-bottom: none;
}


	
/*****************************************************************
#footer
*****************************************************************/
#footer{
	width:100%;
	margin:0 atuo;
	padding:2% 0;
	background:#CFBFFF;
	text-align:center;
	font-size:90%;
	line-height:1.2;
}

#footer .inner{
	width:100%;
	margin:0 atuo;
	padding:2% 0;
	font-size:90%;
	text-align:center;
	color:#333;	
	}


* html #footer{height:1%;}
	
	#footer .grid, #footer .grid p{
	float:none;
	width:100%;
	text-align:center;
	border:0;
	}
	
	#footer .grid:last-child{padding-top:1%;}
	
.spNone {
	display:none;
	}
.pcNone {
	display:inline;
	}
	
.tel strong{
font-size:95%;
}
	
/* Clear fix -----------------------------------------------------*/
.clfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	}
*:first-child+html .clfix {
	display: inline-block;
	min-height: 1%;
	}
/* Hides from IE6/IE Mac \*/
* html .clfix {
	height: 1%;
	}
.clfix {
	display: block;
	}
/* End hide from IE6/IE Mac */


.clearLeft { 
clear: left; 
}


}

/* CSS Document */

@media screen and (max-width:768px){
#page-top{
	height:32px;
}
.gridWrapper .inner p{
	font-size:100%;
}
.graph img{
	width:50%;
}
.graph ul li{
	width:100%;
}
.contact form dt,.contact form dd{
	float:none;
	width:100%;
	text-align:left;
}
}