@charset "UTF-8";

footer {

}

footer .footer-mokuji{
  margin-top: 60px;
  padding: 60px 0;
  background-color: #d8d8d3;
}

footer .footer-mokuji-box{
  width: 1240px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
footer .footer-mokuji-box > ul{
  padding: 0 10px 0 0;
}
footer .footer-mokuji-box > ul > li > ul{
  margin-top: 40px;
}

footer .footer-mokuji-box > ul > li > ul li{
}

footer .footer-mokuji-box .footer-banner li{
  width: 210px;
  margin-bottom: 20px;
}
/* 
.footer-mokuji-1{
  width: 155px;
  }

.footer-mokuji-1 ul li:last-child{
  white-space: nowrap;
}
*/
.footer-info{
  width: 1200px;
  max-width: 100%;
  margin: 30px  auto 60px;
  display: flex;
  align-items: center;
  font-size: .20rem;
  position: relative;
}

.footer-info p{
  margin-left: 40px;
  font-size: .15rem;
}

.footer-copy{
  background-color: #003c22;
}

.footer-copy p{
  padding: 5px 0;
  text-align: center;
  color: #fff;
  font-size: .15rem;
}

footer .footer-mokuji-box  a,
footer .footer-mokuji-box  a:link,
footer .footer-mokuji-box  a:visited,
footer .footer-mokuji-box  a:hover,
footer .footer-mokuji-box  a:active
{
  color: #000;
}

.footer-totop{
  position: absolute;
  right: 0;
  top: -10px;
  width: 52px;
}


/* ----------

スマホ

----------*/
@media screen and (max-width: 767px) {

  footer .footer-mokuji{
    margin-top: 1em;
    width: 100%;
    padding: 1.5em 0 0;
  }

  footer .footer-mokuji-box{
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap    : wrap;
    flex-wrap        : wrap;
    -webkit-box-align: start;
	  -ms-flex-align: start;
	  align-items: flex-start;
    font-size: .13rem;
  }

  footer .footer-mokuji-box > ul{
    width: 45%;
    margin-bottom: 1.5em;
  }

  footer .footer-mokuji-box > ul:nth-child(1){
    order: 1;
  }

  footer .footer-mokuji-box > ul:nth-child(2){
    order: 3;
  }

  footer .footer-mokuji-box > ul:nth-child(3){
    order: 4;
  }

  footer .footer-mokuji-box > ul:nth-child(4){
    order: 2;
  }

  footer .footer-mokuji-box > ul:nth-child(5){
    order: 5;
  }

  footer .footer-mokuji-box > ul:nth-child(6){
    order: 6;
  }

  footer .footer-mokuji-box > ul > li > ul {
    margin-top: 0.3em;
  }
  footer .footer-mokuji-box .footer-banner li {
    width: 90%;
    margin-bottom: 1em;
}
  .footer-banner{
    
  }

  .footer-info{
    margin: 1em 0;
    padding: 0 20px;
    font-size: .16rem;
  }

  .footer-info p{
    margin-left: 2em;
    font-size: .13rem;
  }

  .footer-copy p {
    padding: 3px 0;
    font-size: .13rem;
  }

  .footer-totop{
    top: 0;
    right: 0;
    width: 30px;
  }

}

/* ----------

end of スマホ

----------*/