@charset "UTF-8";
/*------------------------------------------------------------
ページヘッダー
------------------------------------------------------------*/
#page_header h1 { background-image: url("../images/header/bgimg_header-product.jpg"); }

#page_header h1.food { background-image: url("../images/header/bgimg_header-food.jpg"); }

#page_header h1.wood { background-image: url("../images/header/bgimg_header-wood.jpg"); }

#page_header h1.waste { background-image: url("../images/header/bgimg_header-waste.jpg"); }

#page_header h1.other { background-image: url("../images/header/bgimg_header-other.jpg"); }

/*------------------------------------------------------------
目的別リスト
------------------------------------------------------------*/
#purpose_list { padding-top: 80px; }

#purpose_list h2 { font-size: 3.0rem; line-height: 1; color: #0285d0; text-align: center; margin-bottom: 30px; }

#purpose_list div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 60px 0; min-width: 930px; }

#purpose_list div:nth-of-type(odd) dl { padding-right: calc((50% - 500px) / 2 + 40px); }

#purpose_list div:nth-of-type(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; background: #F8F8F8; }

#purpose_list div:nth-of-type(even):nth-last-of-type(1) { margin-bottom: 60px; }

#purpose_list div:nth-of-type(even) dl { padding-left: calc((50% - 500px) / 2 + 40px); }

#purpose_list div figure { width: 50%; text-align: center; }

#purpose_list div figure img { width: 500px; height: auto; }

#purpose_list div dl { width: 50%; }

#purpose_list div dl dt { font-size: 2.4rem; font-weight: bold; }

#purpose_list div dl dd { margin-top: 20px; }

#purpose_list div dl dd.bt_detail { width: 280px; margin-top: 50px; text-align: center; position: relative; z-index: 0; }

#purpose_list div dl dd.bt_detail a { display: block; text-decoration: none; font-size: 1.4rem; line-height: 50px; color: #fff; background: url("../images/common/img_arrow-w.svg") no-repeat right 30% center; background-size: 5px auto; padding-right: 10px; }

#purpose_list div dl dd.bt_detail:before, #purpose_list div dl dd.bt_detail:after { display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }

#purpose_list div dl dd.bt_detail:before { background: #0285d0; }

#purpose_list div dl dd.bt_detail:after { width: 0; background: #005586; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

#purpose_list div dl dd.bt_detail:hover a { background-position: right 26% center; }

#purpose_list div dl dd.bt_detail:hover:after { width: 100%; }

@media screen and (max-width: 767px) { #purpose_list { padding-top: 40px; }
  #purpose_list h2 { font-size: 1.8rem; margin-bottom: 0; }
  #purpose_list div { display: block; padding: 40px 25px 50px; min-width: auto; }
  #purpose_list div:nth-of-type(odd) dl { padding-right: 0; }
  #purpose_list div:nth-of-type(even):nth-last-of-type(1) { margin-bottom: 30px; }
  #purpose_list div:nth-of-type(even) dl { padding-left: 0; }
  #purpose_list div figure { width: auto; }
  #purpose_list div figure img { width: 250px; }
  #purpose_list div dl { width: auto; margin-top: 20px; }
  #purpose_list div dl dt { font-size: 1.6rem; }
  #purpose_list div dl dd { margin-top: 15px; }
  #purpose_list div dl dd.bt_detail { margin-top: 30px; margin-left: auto; margin-right: auto; }
  #purpose_list div dl dd.bt_detail a { font-size: 1.3rem; }
  #purpose_list div dl dd.bt_detail:hover a { background-position: right 30% center; }
  #purpose_list div dl dd.bt_detail:hover:after { width: 0; } }

/*# sourceMappingURL=purpose.css.map */