@charset "UTF-8";
/*=======================================
ボランティア
=========================================*/
.p-volunteer__tab {
  margin-bottom: 80px;
}
.p-volunteer__tab ul {
  display: flex;
  justify-content: space-between;
}
.p-volunteer__tab li {
  width: 23.6363%;
  margin-left: 1.81826%;
  cursor: pointer;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 500;
  padding: 14px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.p-volunteer__tab li:before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -20px;
  border-top: 0 solid;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  bottom: 0;
}
.p-volunteer__tab li.is-active:before {
  border-top-width: 20px;
  bottom: -20px;
}
.p-volunteer__tab li:nth-child(4n+1) {
  margin-left: 0;
}
.p-volunteer__tab li.shokuhana {
  background: #E72E8C;
}
.p-volunteer__tab li.shokuhana:before {
  border-top-color: #E72E8C;
}
.p-volunteer__tab li.kodomo {
  background: #1083AE;
}
.p-volunteer__tab li.kodomo:before {
  border-top-color: #1083AE;
}
.p-volunteer__tab li.doubutsu {
  background: #87C530;
}
.p-volunteer__tab li.doubutsu:before {
  border-top-color: #87C530;
}
.p-volunteer__tab li.garden {
  background: #E9B625;
}
.p-volunteer__tab li.garden:before {
  border-top-color: #E9B625;
}
.p-volunteer__content {
  display: none;
}
.p-volunteer__content.is-active {
  display: block;
}
.p-volunteer__content .lead {
  text-align: center;
  font-size: 25px;
  font-size: 2.5rem;
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: 60px;
}
.p-volunteer__content .lead strong {
  font-weight: 500;
}
.p-volunteer__content .c-table3 {
  margin-bottom: 60px;
}
.p-volunteer__content .contact {
  margin-top: 80px;
}
.p-volunteer__content .contact .l {
  margin-bottom: 45px;
}
.p-volunteer__content .contact .l a {
  color: #0088FF;
  text-decoration: underline;
}
.p-volunteer__content .contact .title {
  font-size: 20px;
  font-size: 2rem;
  padding-left: 26px;
  position: relative;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 15px;
}
.p-volunteer__content .contact .title:before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  background: #3E372E;
}
.p-volunteer__content .contact .title small {
  font-size: 16px;
  font-size: 1.6rem;
}
.p-volunteer__content .contact .tel a {
  display: inline-block;
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 500;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 24px 32px;
  padding-left: 34px;
  margin-right: 10px;
  font-family: "Montserrat", "Montserrat", "Zen Kaku Gothic New", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
}
.p-volunteer__content .contact .fax {
  max-width: 265px;
  text-align: right;
  border-top: 3px dotted #E9B625;
  padding-top: 12px;
  margin-top: 12px;
  color: #E9B625;
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 500;
  font-family: "Montserrat", "Montserrat", "Zen Kaku Gothic New", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
}
.p-volunteer__content .img1 {
  margin-top: 84px;
}
.p-volunteer__content.shokuhana .lead strong {
  color: #E72E8C;
}
.p-volunteer__content.shokuhana .c-table3 .bg1 {
  background: #E72E8C;
}
.p-volunteer__content.shokuhana .contact .c-title4 {
  border-bottom-color: #E72E8C;
}
.p-volunteer__content.shokuhana .contact .tel a {
  color: #E72E8C;
  background-image: url(../img/common/icon_tel-red.svg);
}
.p-volunteer__content.kodomo .lead strong {
  color: #1083AE;
}
.p-volunteer__content.kodomo .c-table3 .bg1 {
  background: #1083AE;
}
.p-volunteer__content.kodomo .contact .c-title4 {
  border-bottom-color: #1083AE;
}
.p-volunteer__content.kodomo .contact .tel a {
  color: #1083AE;
  background-image: url(../img/common/icon_tel-blue.svg);
}
.p-volunteer__content.doubutsu .lead strong {
  color: #87C530;
}
.p-volunteer__content.doubutsu .c-table3 .bg1 {
  background: #87C530;
}
.p-volunteer__content.doubutsu .contact .c-title4 {
  border-bottom-color: #87C530;
}
.p-volunteer__content.doubutsu .contact .tel a {
  color: #87C530;
  background-image: url(../img/common/icon_tel-green2.svg);
}
.p-volunteer__content.garden .lead strong {
  color: #E9B625;
}
.p-volunteer__content.garden .c-table3 .bg1 {
  background: #E9B625;
}
.p-volunteer__content.garden .contact .c-title4 {
  border-bottom-color: #E9B625;
}
.p-volunteer__content.garden .contact .tel a {
  color: #E9B625;
  background-image: url(../img/common/icon_tel-yellow2.svg);
}

/* ----------------------------- スマホ（～767px） */
@media screen and (max-width: 767px) {
  .p-volunteer__tab {
    margin-bottom: 40px;
  }
  .p-volunteer__tab ul {
    flex-wrap: wrap;
  }
  .p-volunteer__tab li {
    width: 49%;
    font-size: 14px;
    font-size: 1.4rem;
    margin-left: 2%;
    margin-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .p-volunteer__tab li:nth-child(2n+1) {
    margin-left: 0;
  }
  .p-volunteer__tab li:before {
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
  }
  .p-volunteer__tab li.is-active:before {
    border-top-width: 10px;
    bottom: -10px;
  }
  .p-volunteer__content .lead {
    font-size: 18px;
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 40px;
  }
}