@import url("pure-grids-min.css");
/* mixin
-------------------------------- */
.mg_col2-1-grid {
  margin: 0 -10px;
}
.mg_col2-1-grid .pure-u-1-2 .mg_pure-inner {
  margin: 0 10px 20px;
}

.mg_pos-relative,
.mg_layer-wrap,
.mg_layer-txt {
  display: block;
}

.mg_pos-relative {
  position: relative;
}
.mg_pos-relative.min-height {
  min-height: 410px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .mg_pos-relative {
    min-height: inherit;
  }
}
.mg_pos-relative .mg_layer-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
}
.mg_pos-relative .mg_layer-wrap .mg_layer-txt {
  color: #FFF;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .mg_pos-relative .mg_layer-wrap .mg_layer-txt {
    font-size: 14px;
  }
}
.mg_pos-relative .mg_pos-tri-down {
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -35px;
}
.mg_pos-relative .pure-g-r .pure-u-1-2:first-child .mg_pure-inner:before {
  content: "";
  position: absolute;
  bottom: 15%;
  right: 50%;
  height: 70%;
  width: 1px;
  display: block;
  background: #CCC;
}
@media screen and (max-width: 767px) {
  .mg_pos-relative .pure-g-r .pure-u-1-2:first-child .mg_pure-inner:before {
    display: none;
  }
}
.mg_pos-relative hr.sp-border {
  display: none;
}
@media screen and (max-width: 767px) {
  .mg_pos-relative hr.sp-border {
    display: block;
    margin: 0 30px;
    padding: 1px;
  }
}

.mg_al-center-txt-left {
  max-width: 470px;
  margin: 0 auto;
  text-align: center;
}
.mg_al-center-txt-left .mg_al-txt {
  display: inline-block;
  text-align: left;
}

.mg_icon-tri-down {
  width: 70px;
  height: 35px;
  box-sizing: border-box;
}
.mg_icon-tri-down._color-lgray {
  border-top: 35px solid #EFEFEF;
  border-right: 35px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 35px solid transparent;
}

.volunteer-info {
  background-color: #EFEFEF;
}
@media screen and (max-width: 767px) {
  .volunteer-info {
    margin-bottom: 20px;
  }
}
.volunteer-info ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  display: table;
  width: 100%;
  padding: 40px 0 20px;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .volunteer-info ul {
    display: block;
  }
}
.volunteer-info ul li {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .volunteer-info ul li {
    display: block;
  }
}
.volunteer-info ul li.cols1 {
  width: 30%;
}
@media screen and (max-width: 767px) {
  .volunteer-info ul li.cols1 {
    width: 100%;
  }
  .volunteer-info ul li.cols1:first-child .illust {
    margin-bottom: 0;
  }
}
.volunteer-info ul li.cols2 {
  width: 5%;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .volunteer-info ul li.cols2 {
    width: 100%;
  }
}
.volunteer-info .fund-arrow {
  width: 43px;
  height: 27px;
}
@media screen and (max-width: 767px) {
  .volunteer-info .fund-arrow {
    margin: 20px 0;
    transform: rotate(90deg);
    width: 35px;
    height: 23px;
  }
}
.volunteer-info .illust {
  margin: 20px 0;
}
@media screen and (max-width: 767px) {
  .volunteer-info .illust {
    margin: 20px 0;
  }
}
.volunteer-info .illust img {
  width: 182px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .volunteer-info .illust img {
    width: 159px;
    height: auto;
  }
}
.volunteer-info div.al-center {
  line-height: 1.4em;
}

