/* cssテンプ　*/

@charset "utf-8";

*{
  box-sizing:border-box;
}
table{border-collapse:collapse;}
html,body,ul,ol,li,h1,h2,h3,h4,h5,h6,p,section,header,footer,nav,form,input,div,section{
margin:0;
padding:0;
}
html{overflow:auto;}
body{overflow:hidden;min-width:vh;font-family:sans-serif,'arial','Verdana'}
li,ol{list-style:none;}
img{
max-width:100%;
margin:0;
padding:0;
    vertical-align:middle;
}
 
body{
  background-color:#fff;
  font-family:;
  font-size:16px;
}
#container{
  width:960px;
  margin:0 auto;
  }

#header{width:100%;margin:10px 0px;}
#header .header-in{
margin:0 auto;
width:960px;
display:flex;
}
#header .header-in h1{
  width:50%;
}
#header .header-in address{
  margin-top:4px;
  width:50%;
  text-align:right;
}
nav.pc{
  width:100%;
  border-top:3px solid #43AF74;
  border-bottom:3px solid #43AF74;
}
nav.pc ol{
  display:flex;
  justify-content:space-between;
  width:960px;
  margin:0 auto;
  }
nav.pc li{
  width:20%;
  }
nav.pc li a{
  height:50px;
  line-height:50px;
  display:block;
  text-decoration:none;
  color:#296B47;
  transition:all 0.2s;
  background-image:url('');
  }
.p_btn{
  position:fixed;
  top:10px;
  right:10px;
  width:50px;
  height:50px;
  margin-top:3px;
  margin-right:3px;
  border:2px solid #BAE4CD;
  border-radius: 50%;
  padding:5px 10px;
  cursor:pointer;
  background:#43AF74;
  transition:all 0.2s;
  display:none;
}
.p_btn span:nth-of-type(1){
  background-color:white;
  height:2px;
  display:block;
  position:relative;
  top:9px;
  }
.p_btn span:nth-of-type(2){
  background-color:white;
  height:2px;
  display:block;
  position:relative;
  top:15px;
  }
.p_btn span:nth-of-type(3){
  background-color:white;
  height:2px;
  display:block;
  position:relative;
  top:21px;
  }
.go span:nth-of-type(1){
 -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
  }
.go span:nth-of-type(2){
 opacity: 0;
  }
.go span:nth-of-type(3){
-webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
  }

.phone{
  position:fixed;
  width:300px;
  right:-300px;
  top:0px;
  transition:all 0.2s;
  display:none;
  z-index:10000;
}
.p_list{
  background:rgba(255,255,255,0.8);
  border-left:2px solid #43AF74;
  height:100vh;
  width:100%;
}
.p_list a:link{
  display:block;
  line-height:70px;
  height:70px;
  padding:0px 10px;
  text-decoration:none;
  font-size:1.4em;
  color:#333333;
  transition:all 0.2s;
}
.p_list a:hover{
  background:#43AF74;
  color:white;
  transition:all 0.2s;
}

.active{
  position:absolute;
  right:0px;
  top:0px;
  transition:all 0.2s;
  z-index:10000;
}
.active2{
  position:absolute;
  right:300px;
  top:0px;
  transition:all 0.2s;
  z-index:10000;
}
.arrow{
  position: relative;
  display: inline-block;
  padding-left: 30px;
}

.arrow::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #43AF74;
  border-right: solid 2px #43AF74;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -4px;
}
nav.pc li a:hover{
  background:#43AF74;
  color:white;
  transition:all 0.3s;
  }
nav.pc li a:hover::after{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -4px;
  }
  
#slider{
margin:30px 0px;
width:100%;
height:
}  

  
h2{
  background:#43AF74;
  color:white;
  padding:15px;
  font-weight:100;
  letter-spacing:0.2em;
  }
section{
margin-bottom:30px;
}

/* 商品紹介 */
.item_area{width:960px;display:flex;flex-wrap:wrap;}
.item_box{
  width:23%;
  margin:1%;
  border:1px solid #ccc;
  height: 100%;  
}
.item_box:hover{
  outline:1px solid green;
  border:1px solid green;
}
.item_box a{
  font-size:1.1em;
  font-weight:bold;
  display:block;
}

.item_box p{
    border-top:1px solid #ccc;
  padding:5px;
  background-color:#efefef;
  font-size:0.8em;
}
/* お知らせ sns */
.info_sns{
  display:flex;
}
.information{width:640px;margin-right:20px;}
.information li{padding:15px;border-bottom:1px dotted #999;}
.information li:hover{background:#E8F7EE;}
.sns{width:300px;}
.sns_box{border:1px solid #ccc;height:500px;}

.bana{display:flex;margin-top:30px;}
.bana img{width:49%;margin-right:1%;}
footer{
  width:100%;
  background:#43AF74;
}
.footer_in{
  width:960px;
  margin:0 auto;
  display:flex;
  }
.footer_in .f_left{
  width:70%;
}
.footer_in .f_right{
  width:30%;
}
footer ol{
  margin:0 auto;
  display:flex;
}
footer ol li{
  margin-right:3%;
  font-size:0.9em;
}
footer ol li a{
  height:50px;
  line-height:50px;
  display:block;
  text-decoration:none;
  color:#ffffff;
  transition:all 0.3s;
  background-image:url('');
  }
footer ol li a:hover{
  color:yellow;
  }
footer .arrow{
  position: relative;
  display: inline-block;
  padding-left: 18px;
}

footer .arrow::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -5px;
}
footer .arrow:hover::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px yellow;
  border-right: solid 2px yellow;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -5px;
}
.f_right{margin-top:10px;}
.copylight{color:white;margin-top:20px;text-align:center;}

/* 会社概要 */
.company{border:1px solid green;width:96%;margin:0px 2% 30px;transition:all 0.1s}
.company:hover{outline:3px solid green;transition:all 0.1s}
.company td{border-bottom:1px dotted #999;padding:10px;}
.company td.koumoku{width:30%;background:#E0F3E9;border-right:1px solid green;font-weight:bold;}

/* インフォメーション */
.information2{width:100%;margin-bottom:230px;}
.information2 li{padding:15px;border-bottom:1px dotted #999;}
.information2 li:hover{background:#E8F7EE;}


/* 上に戻る */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 5px;
  bottom: 0;
  background: #f69;
  opacity: 0.8;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*960px*/
@media (max-width : 960px){
#header .header-in{width:100%;}
#container{width:100%;}
nav.pc ol{width:100%;}
nav.pc li{font-size:0.75em;}
.item_area{width:100%;}
.arrow::before{left: 5px;}
nav.pc li a:hover::after{left: 5px;}
.arrow{padding-left: 20px;}
.info_sns{display:block;}
.information{width:100%;}
.sns{width:100%;}
.footer_in{width:100%;}
footer ol{ display:block;margin:0;padding:0;}
.footer_in .f_left{width:50%;margin-left:10px;}
.footer_in .f_right{width:50%;text-align:right;margin-right:10px;}
footer ol li a:link{display:block;}
footer ol li a:hover{background:#8CD2AC;}
}
/*560px*/
@media (max-width : 560px){
.pc{display:none;}
.phone{
  display:flex;
  position:fixed;
}
#header .header-in{
  display:block;
  text-align:center;
}
#header .header-in h1{
  width:100%;
}
#header .header-in address{
  width:100%;
    margin-top:10px;
  text-align:center;
}
.p_btn{display:block;position:fixed;z-index:10001;}
.bana{display:block;}
.bana img{width:100%;}
.sns{width:100%;}
.item_box{width:48%;margin:1%;}
.footer_in{
  display:block;
  width:100%;
  text-align:center;
  }
footer ol{ display:block;margin:0;padding:0;}
footer ol li{margin:0;padding:0;}
footer ol li a:link{display:block;}
footer ol li a:hover{background:#8CD2AC;}
footer .arrow::before{display:none;}

.footer_in .f_left{width:100%;margin:0;}
.footer_in .f_right{width:100%;text-align:center;}
.copylight{font-size:0.8em;width:100%;margin:10px 0px;text-align:center;}
}