@charset "UTF-8";

/*
 * サイト共通用のCSSです。
 *
 */



/* 連続 br でIE6が改行しないバグ対策　CSS:letter-spacing の影響
----------------------------------------------- */
br { 
    letter-spacing: normal;
}
/* フロート回り込み解除
----------------------------------------------- */
.clear {
    clear: both;
    display: none;
    font-size: 0px;
    line-height: 0%;
    height: 0px
}

/* float対策：背景色表示用
----------------------------------------------- */
.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    content: ".";
}
.clearfix {
    display: block; /* for IE8 */
}
.both{
    clear:both;
}

.hidden {
    display: none;
}

@font-face {
font-family: "MyFont";
  src: url(../font/KozGoPro-Regular.woff) format("woff");
}

/* yui 上書き
----------------------------------------------- */
html,
body {   
    /*height: 100%;*/ /*背景画像を100%にする時に使用する*/
	/*overflow-x:hidden;*/
}
body {
    font-family: MyFont;
	
}
ol,ul,dl {
    margin: 0px;
}
li {
    list-style-type: none;
}
h1, h2, h3 {
    margin: 0px;
}
img {
    vertical-align: bottom;
}



/* 基本サイト構造 (空白のままにすること)
----------------------------------------------- */

/* body */
body {
}
/* container */
#container {}
/* container_inner */
#container_inner {}
/* header_wrapper */
#header_wrapper {}
/* header */
#header {}
/* main_nav */
#main_nav {}
/* breadcrumb */
#breadcrumb {}
/* contents_wrapper */
#contents_wrapper {}
/* footer_wrapper */
#footer_wrapper {}
/* footer */
#footer {}




/* -----------------------------------------------
 *
 *
 * ここから下を変更すること
 *
 *
----------------------------------------------- */
/*トップへ戻るボタン*/

.topBtn {
    position: fixed;
    bottom: 20px;
    right: 0;
    display: block;
    width: 216px;
    height: 216px;
    padding-top: 30px;
}

.topBtn:hover {
  opacity:0.7;
}

.topBtn img{
	width:100%;
}

.gotop{
}


/* a リンク
----------------------------------------------- */
a {
	text-decoration: none;
	color: #FFF;
}
a:link{
}
a:visited{
}
a:hover{
    text-decoration: underline;
}

/* table
----------------------------------------------- */
tr {
    border: none;
}
th {
	background-color: #FFF;
}
th,
td {
    padding: 5px 10px;
    font-weight: 100;
    border: solid 1px #eaeaea;
}


/* ボタン
----------------------------------------------- */
.button   {  
    display: inline-block;
    background: rgba(43, 166 ,224, 1);
    border: 2px solid #2ba6e0;
    padding: 12px 50px;
    font-weight: bold;
    cursor: pointer;
    color: #ffffff;
/*
    display: inline-block;
	background: rgba(255, 255, 255, 0.25);
    border: 2px solid #2ba6e0;  
    padding: 12px 50px;  
    font-weight: bold;  
    cursor: pointer;  
    color: #2ba6e0;  
    /* -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px #E7E7E7;  
    -moz-box-shadow: 1px 1px 2px #E7E7E7; */ 
}
.button:hover {  
    background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);  
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #77c4e8), color-stop(0.5, #77c4e8), color-stop(0.99, #2ba6e0), to(#2ba6e0));
	color:#fff;  
}
.button:active {  
    background: #2ba6e0;  
    padding: 6px 20px 4px;  
}  

.b_box{
	float: right;
	margin-top: 20px;
}
.b_box_c{
	margin-top: 20px;
}

.b_box img, .b_box_c img {
    margin: 0;
    float: unset;
    border-radius: 20px;
    box-shadow: 2px 3px 5px -1px rgba(0, 0, 0, 0.8);
    margin-right: 10px;
    margin-bottom: 2px;	
}

/* form
---------------------------------------------- */




/* -----------------------------------------------
 * メイン
----------------------------------------------- */

/* html */
html {

}





/*ヘッダー
----------------------------------------------- */

header {
	width: 100%;
	position: relative;
	z-index: 1;
	
}
#canvas-container {
	margin-top: -100px;
	z-index: 9999;
	position: relative;
}

#gnavi {
	
}
#logo {
	width: 142px;
	margin:21px auto 0;
	position: absolute;
	left: 50%;
	top: 0px;
	margin-left: -71px;
	z-index: 9999;
}

#gnavi #sns ul li:nth-child(3n) { margin-right:0; }

#smh_menu {
	display:none;
}
.sp {
	display:none;
}
.pc {
	display:block;
}

#main_image {
	position: relative;
	z-index: 1;
	}
#main_image .bxslider li .main_text {
	position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:91px;
height:365px;
	}
#main_image .bxslider li .main_textnatu {
	position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:642px;
height:459px;
	}
#main_image .bxslider li .main_textyadonohi {
	position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:318px;
height:535px;
	}

/*ナビゲーション
----------------------------------------------- */

#gnavi {
    background-color: #FFF;
    height: 120px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#header_logo{
    width: 10%;
    float: left;
    padding: 35px 0 0 5%;
}

#menu_left{
    width: 50%;
    float: left;
}

#menu_left ul{
    padding: 10px 0 0 10%;
}

#menu_left li{
    float: left;
    margin: 35px 30px;
    font-size: 13px;
    padding: 5px 0 0 0;
}

#menu_left a{
	color:#000000;
}

#menu_right{
    width: 25%;
    float: right;
}

#menu_right ul{
	padding: 10px 35px 0 0;
    float: right;
}

#menu_right li{
	float: left;
    margin: 35px 5px;
    font-size: 13px;
    padding: 5px 0 0 0;	
	width: 100px;
    height: 23px;
    padding: 5px 0 0 0;
    text-align: center;
}

#menu_right ul li a{
	color:white;
}

#menu_right ul li:nth-child(1){
     background-color: #2BA6E0;
}


#menu_right ul li:nth-child(2){
    background-color: #16688e;
}

/*翻訳ツール
----------------------------------------------- */
#google_translate_element{
	float:right;
}

/*追従ナビゲーション
----------------------------------------------- */
.fx { position:fixed; top:0; left:0; width:100%; height:60px; background:#FAFAFA; z-index:99999; -moz-box-shadow:0px 0px 5px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.4); -o-box-shadow:0px 0px 5px rgba(0,0,0,0.4); box-shadow:0px 0px 5px rgba(0,0,0,0.4); border-top:6px solid #000; display:none; }
.fx:after { content:""; display:block; clear:both; }
.fx #logo {
	float: left;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 15px;
	position: static;
}
.fx nav {
	display: block;
	width: 560px;
	float: right;
	margin-right: 40px;
}
.fx nav ul li {
	float: left;
	margin-right: 43px;
	padding-top: 17px;
}
.fx nav ul li:nth-child(6n) { margin-right:0; }
.fx #menu_right {
	float: right;
	width: 320px;
}
.fx #menu_right ul .syuku {
	padding-top: 11px;
	margin-right:20px;
}
.fx #menu_right ul li {
	float: left;
	margin-bottom: 3px;
	padding-top: 17px;
}

/* pagetop
----------------------------------------------- */
.pagetop { display:block; width:47px; height:49px; position:fixed; right:5%; bottom:10%; z-index:99999; display:none; }
.pagetop img { opacity:0.3; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -ms-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; }
.pagetop:hover img { opacity:1; }

/* コンテンツ
----------------------------------------------- */

article {
}
section {
	width: 100%;
}
#con_inner{
    width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.left{
	float:left;
	width:88%;
}
.right{
	float:right;
	width:66%;
}
h1{
	text-align: center;
	font-size: 9px;
	color: #5f393f;
	margin-bottom: 6px;
	margin-top: -10px;
}
h2{
	font-size:40px;
	padding:20px 0 40px;
	line-height: 1.3;
}
p{
	line-height:2;
}
#six_bg {
	background-image: url(../images/six_bg.jpg);
	background-repeat: no-repeat;
	height: 33px;
	width: 100%;
}

#description {
	height: 100%;
	width: 100%;
}
#description ul {
	font-size: 0;
}
#description ul li {
	display: inline-block;
    width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
	  width : -webkit-calc(100% / 3) ;
	  width : calc(100% / 3) ;
	  margin:0;
}

#description ul li img {
    width: 100%;
}

#top_3cat {
	height: 100%;
	width: 100%;
}
#top_3cat ul {
	font-size: 0;
}
#top_3cat ul li {
	display: inline-block;
    width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
	  width : -webkit-calc(100% / 3) ;
	  width : calc(100% / 3) ;
	  margin:0;
}

#top_3cat ul li img {
    width: 100%;
}


.top1 {
	background: url(../images/top1.png) center;
    height: 848px;
	background-repeat-x: no-repeat;		
}
.top1 h2 {
	font-size: 58px;
	text-align: left;
	color: beige;
	text-shadow: 1px 2px 3px #808080;
}
.top1 p {
	text-align: left;
	
}
.top2 {
    background: url(../images/top2.png) center;
    height: 673px;
	background-repeat-x: no-repeat;		
}

.top2 .b_box{
    width: 100%;
    margin: 3% auto;	
}

.materials {
    background: url(../images/materials.png) center;
    height: 598px;
	background-repeat-x: no-repeat;		
}
.materials h2 {
	font-size: 80px;
	text-align: left;
	color: beige;
	text-shadow: 1px 2px 3px #808080;
	font-weight: 600;
	letter-spacing: 5px;
}
.materials p {
	text-align:left;
}
.m-system {
	background: url(../images/m-system.png) center;
    height: 636px;
	background-repeat-x: no-repeat;		
}
.m-system h2 {
	font-size: 80px;
	text-align: left;
	color: #2ba6e0;
	font-weight: 600;
	letter-spacing: 5px;
}
.m-system p {
	text-align:left;
}
.wastes {
    background: url(../images/wastes.png) center;
    height: 524px;
	background-repeat-x: no-repeat;		
}
.wastes h2 {
	font-size: 80px;
	text-align: left;
	color: beige;
	text-shadow: 1px 2px 3px #808080;
	font-weight: 600;
	letter-spacing: 5px;
}
.wastes p {
	text-align:left;
}

.factory {
    background: url(../images/factory.png) center;
    height: 582px;
	background-repeat-x: no-repeat;	
 }
.factory h2 {
	font-size: 80px;
	text-align: left;
	color: beige;
	text-shadow: 1px 2px 3px #808080;
	font-weight: 600;
	letter-spacing: 5px;
}
.factory p {
	text-align:left;
}
.news {
	background: url(../images/news.png) center;
    height: 888px;
	background-repeat-x: no-repeat;		
}
.news h2 {
	font-size: 80px;
	color: #598828;
	
}
.news li {
    border-bottom: 1px dotted #ccc;
    line-height: 2;
    text-align: left;
    margin-bottom: 2%;
}

.news li a{
	color:blue;
}
.gallery {
	background: url(../images/gallery1.png) center;
    height: 620px;
	background-repeat-x: no-repeat;		
}
.gallery h2 {
	font-size: 80px;
	color: beige;
	text-shadow: 1px 2px 3px #808080;
	padding: 0 0 20px;
}
.gallery p {
	color: beige;
	text-shadow: 1px 2px 3px #808080;
}
.ga_photo{
	margin-top:35px;
	overflow:hidden;
    text-align: center;	
}

.in_top1 {
	padding: 275px 0;
}
.in_top2 {
    padding: 33px 0;
}  
.in_materials {
    padding: 73px;
}

.in_m-system {
    padding: 189px 73px;
}

.in_wastes {
	padding: 60px 73px;
}

.in_factory {
    padding: 48px 73px;
 }
.in_news {
	padding:  0;
}
.in_gallery {
	padding:  0;
}
.in_contact {
	padding: 77px 0;
}

.cap{
	color:#2ba6e0;
}


  

.bunner{
    width: 100%;
   padding: 23px 0 0; 
}

.bunner dl{
    width: 30%;
    float: left;
    margin: 0 0 0 3%;
    display: inline;
}
/* IE10以降 */
@media all and (-ms-high-contrast:none){
  .bunner dl.movie {
	margin-top:15px;
}
}
 
/* IE11だけに適用 */
@media all and (-ms-high-contrast:none){
  .bunner dl.movie {
	margin-top:15px;
}
}

@supports (-ms-ime-align:auto) {
.bunner dl.movie {
	margin-top:15px;
}
}

.bunner dt{  
}

.bunner dt img {
    width: 100%;
}

.bunner dd.text1{  
    font-size: 15px;
    padding: 15px;
    color: #3E6A31;
    background: white;
}

.bunner dd.text2{
    font-size: 14px;
    line-height: 1.5;
    height: 70px;
    padding: 0px 15px 0 15px;
    background: white;
	color: black;
    text-align: left;
}


.contact {
}
  
.contact_left{
    width: 35%;
    float: left;
}

.contact_left h2{
    font-size: 53px;
    color: #3E6A31;
    text-align: left;
	
}

.contact_left span{
    font-size: 13px;
    color: #3E6A31;
}

.contact_left a img {
    width: 20px;
    margin: 0 10px 0 0;
}

.contact_left a{
    font-size: 15px;
    color: #4D9D01;
    padding: 15px 30px;
    border: solid 1px #4D9D01;
    border-radius: 0.3em;
    margin-top: 100px;
  }

.contact_right{
    width: 60%;
    float: right;
  }

.contact_right h3{
    font-size: 13px;
    color: #4D9D01;
    
  }

.contact_right table {
    margin-top: 10px;
    margin-left: 0px;
  }

.contact_right tr {
    border: none;
  }

.contact_right th {
    border: none;
    font-size: 13px;
    text-align: justify;
    font-weight: bold;
    width: 100%;
    float: left;
    margin: 5px 0;
  }

.contact_right td {
    border: none;
    font-size: 15px;
    float: left;
    margin: 5px 10px;
    text-align: -webkit-left;
    line-height: 1.4em;
    letter-spacing: 2px;
}




















.top3 p {
  position: absolute;
  letter-spacing: -0.1em;
  font-size: 1vw;/*サイズ1.2倍*/
  top: 60%;
  left: 39%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  }




















#top_3cat {
	height: 100%;
	width: 100%;
}
#top_3cat ul {
	font-size: 0;
}
#top_3cat ul li {
	display: inline-block;
    width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
	  width : -webkit-calc(100% / 3) ;
	  width : calc(100% / 3) ;
	  margin:0;
}

#top_3cat ul li img {
    width: 100%;
}
















.reco {
	text-align: center;
	background-image: url(../images/reco_bg.png);
	background-repeat: no-repeat;
	background-position: 20% 0px;
	background-color: rgba(195, 130, 63, 0.26);
	padding-top: 50px;
}
.reco h2 {
	margin-bottom: 55px;
}
.reco .reco_box {
	width: 1184px;
	height: 640px;
	margin-right: auto;
	margin-left: auto;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #967C7F;
	border-left-color: #967C7F;
	background-color: #FFF;
}

.reco .reco_box ul li {
	float: left;
	height: 53px;
	width: 197px;
	
	
}
.reco .reco_box .recoreco {
	width: 1095px;
	margin-right: auto;
	margin-left: auto;
	height: 460px;
	padding-top: 50px;
}
.reco .reco_box .recoreco .left {
	float: left;
	margin-bottom: 25px;
}
.reco .reco_box .recoreco .right {
	float: right;
	margin-bottom: 25px;
}
.yoyaku {
	background-image: url(../images/reco_bg2.png);
	background-repeat: no-repeat;
	background-color: rgba(195, 130, 63, 0.26);
	background-position: bottom;
	
	padding-top: 32px;
	    padding-bottom: 66px;
}
.yoyaku .plan {
	width: 1184px;
	margin-right: auto;
	margin-left: auto;
}
.yoyaku .plan ul li {
	float: left;
	margin-right: 23px;
}
.yoyaku .plan ul li:nth-child(2n) { margin-right:0; }
.washi {
	background-image: url(../images/washi_bg.jpg);
	background-repeat: repeat-y;
	text-align: center;
	padding-top: 90px;
}

.washi p {
	font-size: 20px;
	line-height: 45px;
}
.washi .washilink {
	background-image: url(../images/washilink_bg.png);
	background-repeat: no-repeat;
	height: 300px;
	width: 1186px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 90px;
	margin-top: 40px;
}

.bnr_tp {
	background-image: url(../images/bnr_main.jpg);
	background-repeat: repeat;
	background-size: cover;
	height: 766px;
	text-align: center;
	padding-top: 130px;
}
.bnr_tp .bnr_box {
	height: 285px;
	width: 100%;
	background-color: rgba(0,0,0,0.6);
}
.bnr_tp .bnr_box .bnr_area {
	width: 1186px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 45px;
}

.bnr_tp .bnr_box .bnr_area p {
	font-size: 20px;
	line-height: 40px;
	color: #FFF;
}

.pickup {
	width: 1184px;
	margin: 40px auto;
}
.pickup2{
	width: 1184px;
	margin: 0 auto;
	padding: 26px 0;
}




.small {
	font-size: 11px;
	color: #666;
	margin-bottom: 3px;
	line-height: 15px;
}

span.komoji{
    font-size: 13px;
	text-shadow: none;
}
.co_blue{
	color:#2BA6E0;
}
/* ボタンリンク
----------------------------------------------- */
.btn_center {
    padding: 29px;
    text-align: center;
	font-size: 20px;
    line-height: 40px;	
}
.btn_link {
    color: #a3327f;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    padding: 8px 50px;
    min-width: 260px;
    position: relative;
    border: 3px solid #a3327f;
    background: #fff;
}


/* タブ切り替え
----------------------------------------------- */

.motion {
    
    display: none;
}
#motion_area1 {
    display: block;
}
.btn_act {
	background-image: url(../images/tab_bg.png);
	background-size:cover;
	color: #FFF;
	height: 53px;
	width: 197px;
	display:block;
	padding-top:18px;
	}
a.active {
	background-image:none;
	background-color:#FFF;
    color: #48282D;
	height: 53px;
	width: 197px;
	display:block;
	padding-top:18px;
}










/* フッター
----------------------------------------------- */

footer {
    width: 100%;
    background-color: #595757;
    padding-bottom: 60px;
}

#footer {
	color:white;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

#footer img{
    padding: 25px;
}

#footer p{
	font-size: 13px;
}

#footer address {
    font-size: 8px;
    font-style: unset;
}

#footerlist{
    width: 1000px;
    height: 240px;
    margin: auto;
    padding-top: 45px;
}


#footerlist ul {
    text-align: center;
    line-height: 2;
}

#footerlist li {
    float: left;
}

#footerlist li a{
    display: block;
    width: 130px;
    font-size: 13px;
}

.footer_menuin{
  position: relative;
  float: left;
}

.footer_menuin2{
    position: relative;
    float: unset;
    margin: 8% 28%;
}


.footer_menuin li{
    position: relative;
    font-size: 13px;
    float: left;
    list-style: none;
    padding: 5px;
    margin-right: 5px;
}


.mb_50 {
	margin-bottom:50px;
}
.fix_menu_smartphone{
	display:none;
}

/* EC追加後 */

.ec_link {
	float: right;
	width: 200px;
	padding: 30px 0;
	margin: 0 30px 0 0;
}
.ec_link_sp {
	text-align: center;
}
.ec_link a {
	border: 1px solid #2da6e0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	padding: 15px;
}
.ec_link .ec_link_font {
	color: #333;
	font-size: 14px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.ec_link .ec_link_img {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.ec_link .ec_link_img img {
	width: 30px;
	height: 30px;
}
.ec_link.sp {
	width: 150px;
	margin: 0 70px 0 0;
	padding: 0;
}
.ec_link.sp a {
	padding: 5px;
}
.ec_link.sp .ec_link_font {
	font-size: 12px;
}
.ec_link.sp .ec_link_img img {
width: 20px;
height: 20px;
}
@media screen and (max-width: 340px) {
	#logo img {
		width: 80px!important;
	}
}