@charset "UTF-8";
/* 変数設定 */
/********************/
html, body {
  font-size: 62.5%;
  height: 100%;
}

body {
  background-color: #fff;
  color: #000;
  font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
    line-height: 2;
  }
}
body img {
  position: relative;
  width: 100%;
  height: auto;
}

.ie-error {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 2;
  box-sizing: border-box;
  top: 0;
  width: 100%;
  padding: 80px 40px;
  z-index: 10000;
}
@media screen and (min-width: 768px) {
  .ie-error {
    padding: 160px 80px;
  }
}

.protect img {
  pointer-events: none;
}

svg {
  fill: #000;
}

@media screen and (min-width: 768px) {
  .br_sp {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .br_tl {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .br_tl {
    display: none;
  }
}

.br_pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .br_pc {
    display: block;
  }
}

hr {
  border-top: 1px dotted #8c8c8c;
  margin: 40px 0;
}
@media screen and (min-width: 768px) {
  hr {
    margin: 140px 0;
  }
}

.text-sp-none {
  display: none;
}
@media screen and (min-width: 768px) {
  .text-sp-none {
    display: inline;
  }
}

.text-bold {
  font-weight: 500;
}

.text-exbold {
  font-weight: 800;
}

.text-rmark {
  font-size: 1.1rem;
  vertical-align: super;
}

.text-large {
  font-size: 18px;
}
@media screen and (min-width: 768px) {
  .text-large {
    font-size: 20px;
  }
}

/*テキストカラー*/
.text-red {
  color: red;
}

.text-blue {
  color: #033480;
}

.text-green {
  color: #239846;
}

a {
  color: #239846;
  text-decoration: underline;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
a:hover {
  color: #aad9b2;
}

a img,
a .icon-svg {
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
@media screen and (min-width: 768px) {
  a:hover img {
    opacity: 0.6;
  }
}
@media screen and (min-width: 768px) {
  a:hover .icon-svg {
    opacity: 0.6;
  }
}

.btn-box {
  position: relative;
  width: calc(100% - 10px);
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .btn-box {
    width: 100%;
    max-width: 880px;
  }
}
.btn-box__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  border: 2px solid #239846;
  box-sizing: border-box;
  text-decoration: none;
  width: calc(100% - 30px);
  margin-top: 60px;
}
@media screen and (min-width: 768px) {
  .btn-box__inner {
    width: calc(100% - 30px);
  }
}
.btn-box__num {
  position: relative;
  background: #239846;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0em;
  text-align: center;
  width: 60px;
  padding: 20px 0;
}
@media screen and (min-width: 768px) {
  .btn-box__num {
    font-size: 38px;
    padding: 11px 0;
  }
}
.btn-box__text {
  position: relative;
  background: #fff;
  color: #239846;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  flex: 1;
  padding-left: 18px;
}
@media screen and (min-width: 768px) {
  .btn-box__text {
    font-size: 26px;
    line-height: 1.1;
    padding-left: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .btn-box__text {
    font-size: 28px;
    line-height: 1.1;
    padding-left: 20px;
  }
}
.btn-box__arrow {
  position: absolute;
  width: 42px;
  height: 22px;
  right: -30px;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .btn-box__arrow {
    width: 55px;
    height: 18px;
    right: -30px;
  }
}
a:hover .btn-box__arrow img {
  opacity: 1;
  transform: translateX(-10px);
}

.btn-box__inner:hover .btn-box__text {
  background-color: #cce7d0;
  transition: all 0.4s ease-out;
}

.btn-round {
  position: relative;
  box-sizing: border-box;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .btn-round {
    width: 46.875%;
    padding: 0 0;
  }
}
.btn-round a {
  display: block;
  background: #239846;
  color: #fff;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: left;
  text-decoration: none;
  border-radius: 32px;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 25px;
  margin-bottom: 30px;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .btn-round a {
    font-size: 25px;
    letter-spacing: 0.06em;
    border-radius: 40px;
    padding: 25px 30px;
    margin-bottom: 50px;
  }
}
.btn-round a:focus {
  color: #fff;
  background: #0a6431;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-round a:hover {
    color: #fff;
    background: #0a6431;
    text-decoration: none;
  }
}
.btn-round__arrow {
  position: absolute;
  width: 27px;
  height: 18px;
  right: 20px;
  top: 20px;
}
@media screen and (min-width: 768px) {
  .btn-round__arrow {
    width: 30px;
    height: 20px;
    right: 20px;
    top: 27px;
  }
}
a:hover .btn-round__arrow img {
  opacity: 1;
  transform: translateX(5px);
}

.btn-box-round-02 {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}
@media screen and (min-width: 900px) {
  .btn-box-round-02 {
    width: 48%;
    margin-bottom: 50px;
  }
}
.btn-box-round-02__inner {
  position: relative;
  background: #239846;
  display: flex;
  justify-content: center;
  border: 2px solid #239846;
  border-radius: 24px;
  box-sizing: border-box;
  text-decoration: none;
  padding: 15px 20px 13px;
}
@media screen and (min-width: 768px) {
  .btn-box-round-02__inner {
    border: 3px solid #239846;
    border-radius: 48px;
    padding: 17px 30px;
  }
}
.btn-box-round-02__text {
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  flex: 1;
}
@media screen and (min-width: 768px) {
  .btn-box-round-02__text {
    font-size: 25px;
    line-height: 1.4;
  }
}
@media screen and (min-width: 900px) {
  .btn-box-round-02__text {
    font-size: 22px;
  }
}
@media screen and (min-width: 960px) {
  .btn-box-round-02__text {
    font-size: 25px;
  }
}
.btn-box-round-02__arrow {
  position: absolute;
  width: 30px;
  height: 20px;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .btn-box-round-02__arrow {
    width: 30px;
    height: 20px;
    right: 20px;
  }
}
a:hover .btn-box-round-02__arrow img {
  opacity: 1;
  transform: translateX(-10px);
}
.btn-box-round-02__date {
  position: relative;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0em;
  margin-top: 5px;
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  .btn-box-round-02__date {
    font-size: 20px;
    padding: 0 30px;
  }
}

.btn-box-round-02__inner:hover {
  background-color: #0a6431;
  transition: all 0.4s ease-out;
}

.btn-box-round {
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .btn-box-round {
    width: 100%;
    max-width: 780px;
  }
}
.btn-box-round__inner {
  position: relative;
  display: flex;
  justify-content: center;
  border: 2px solid #239846;
  border-radius: 24px;
  box-sizing: border-box;
  text-decoration: none;
  width: calc(100% - 30px);
  margin-top: 60px;
  padding: 15px 20px 13px;
}
@media screen and (min-width: 768px) {
  .btn-box-round__inner {
    border: 3px solid #239846;
    border-radius: 48px;
    width: calc(100% - 30px);
    padding: 25px 30px;
    margin-top: 0;
  }
}
.btn-box-round__text {
  position: relative;
  color: #239846;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .btn-box-round__text {
    font-size: 26px;
    line-height: 1.1;
  }
}
@media screen and (min-width: 960px) {
  .btn-box-round__text {
    font-size: 28px;
  }
}
.btn-box-round__arrow {
  position: absolute;
  width: 42px;
  height: 22px;
  right: -30px;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .btn-box-round__arrow {
    width: 80px;
    height: 26px;
    right: -40px;
  }
}
a:hover .btn-box-round__arrow img {
  opacity: 1;
  transform: translateX(-10px);
}

.btn-box-round__inner:hover {
  background-color: #cce7d0;
  transition: all 0.4s ease-out;
}

.btn-box-round-03 {
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .btn-box-round-03 {
    width: 100%;
    margin-bottom: 60px;
  }
}
.btn-box-round-03__inner {
  position: relative;
  display: flex;
  justify-content: center;
  border: 2px solid #239846;
  border-radius: 24px;
  box-sizing: border-box;
  text-decoration: none;
  width: calc(100% - 30px);
  margin-top: 30px;
  padding: 15px 20px 13px;
}
@media screen and (min-width: 768px) {
  .btn-box-round-03__inner {
    border: 3px solid #239846;
    border-radius: 48px;
    width: calc(100% - 30px);
    padding: 25px 30px;
    margin-top: 0;
  }
}
.btn-box-round-03__text {
  position: relative;
  color: #239846;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .btn-box-round-03__text {
    font-size: 26px;
    line-height: 1.1;
  }
}
@media screen and (min-width: 960px) {
  .btn-box-round-03__text {
    font-size: 28px;
  }
}
.btn-box-round-03__arrow {
  position: absolute;
  width: 42px;
  height: 22px;
  right: -30px;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .btn-box-round-03__arrow {
    width: 80px;
    height: 26px;
    right: -40px;
  }
}
a:hover .btn-box-round-03__arrow img {
  opacity: 1;
  transform: translateX(-10px);
}

.btn-box-round-03__inner:hover {
  background-color: #cce7d0;
  transition: all 0.4s ease-out;
}

.header {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 12px 0 10px;
}
@media screen and (min-width: 768px) {
  .header {
    position: relative;
    background: #fff;
    justify-content: space-between;
    width: 100%;
    padding: 26px 0 24px;
  }
}
@media screen and (min-width: 1024px) {
  .header {
    padding: 30px 0 28px;
  }
}
.header__logo {
  position: relative;
  width: 132px;
  height: auto;
  top: 0px;
}
@media screen and (min-width: 768px) {
  .header__logo {
    width: 186px;
    height: auto;
    top: 0px;
    margin-left: 40px;
  }
}
@media screen and (min-width: 960px) {
  .header__logo {
    width: 264px;
    height: auto;
    margin-left: 84px;
  }
}
@media screen and (min-width: 1024px) {
  .header__logo {
    width: 264px;
    height: auto;
  }
}
.header__logo img {
  width: 100%;
  height: auto;
}

.footer {
  position: relative;
  background: #239846;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}
.footer__inner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 16px;
}
@media screen and (min-width: 768px) {
  .footer__inner {
    padding: 22px 40px;
  }
}
.footer__copyright {
  position: relative;
  color: #fff;
  text-align: center;
  font-feature-settings: "palt";
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.09em;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .footer__copyright {
    font-size: 20px;
  }
}

.back-top__btn a {
  position: absolute;
  width: 37px;
  height: 91px;
  top: 45px;
  right: 15px;
}
@media screen and (min-width: 768px) {
  .back-top__btn a {
    background-size: 40px;
    width: 37px;
    height: 91px;
    top: 70px;
    right: 44px;
  }
}
.back-top__btn a img {
  width: 100%;
  height: 100%;
}

.btn-box-round-03.delighter,
.effect-box__text.delighter,
.effect-box__img.delighter,
.effect-box__container.delighter,
.event__caption.delighter,
.present__img.delighter,
.present__text-inner.delighter,
.present__caption.delighter,
.present__text-line.delighter,
.present__text-img.delighter,
.present__title-img.delighter,
.top-intro__text-period.delighter,
.event-box__text.delighter,
.event-box__img.delighter,
.event-box__title.delighter,
.event-box__container.delighter,
.reborn-effect__container.delighter,
.reborn-effect__title.delighter,
.btn-box-round.delighter,
.project__logo.delighter,
.project__text.delighter,
.project__container.delighter,
.btn-box-round-02.delighter,
.recycling-list__detail.delighter,
.recycling-list__icon.delighter,
.recycling-list__address.delighter,
.recycling-list__title.delighter,
.recycling-list__info.delighter,
.recycling-list.delighter,
.bd-round__container.delighter,
.top-unit__line-box.delighter,
.recycling-box__icon.delighter,
.recycling-box__icon-title.delighter,
.recycling-box__text.delighter,
.top-unit__line-box-inner.delighter,
.collect__text-period.delighter,
.collect__text.delighter,
.collect__item.delighter,
.collect__items.delighter,
.collect__title-inner.delighter,
.collect__title.delighter,
.collect__inner.delighter,
.bd-round__inner-box.delighter,
.bd-round__text.delighter,
.bd-round__title.delighter,
.speech-bubble__text.delighter,
.speech-bubble__img.delighter,
.top-unit__text.delighter,
.top-unit__inner-gift.delighter,
.top-unit__heading.delighter,
.btn-box.delighter,
.top-intro__text.delighter,
.top-intro__title.delighter {
  transition: all 1.2s ease-out;
  opacity: 0;
}

.btn-box-round-03.delighter.started,
.effect-box__text.delighter.started,
.effect-box__img.delighter.started,
.effect-box__container.delighter.started,
.event__caption.delighter.started,
.present__img.delighter.started,
.present__text-inner.delighter.started,
.present__caption.delighter.started,
.present__text-line.delighter.started,
.present__text-img.delighter.started,
.present__title-img.delighter.started,
.top-intro__text-period.delighter.started,
.event-box__text.delighter.started,
.event-box__img.delighter.started,
.event-box__title.delighter.started,
.event-box__container.delighter.started,
.reborn-effect__container.delighter.started,
.reborn-effect__title.delighter.started,
.btn-box-round.delighter.started,
.project__logo.delighter.started,
.project__text.delighter.started,
.project__container.delighter.started,
.btn-box-round-02.delighter.started,
.recycling-list__detail.delighter.started,
.recycling-list__icon.delighter.started,
.recycling-list__address.delighter.started,
.recycling-list__title.delighter.started,
.recycling-list__info.delighter.started,
.recycling-list.delighter.started,
.bd-round__container.delighter.started,
.top-unit__line-box.delighter.started,
.recycling-box__icon.delighter.started,
.recycling-box__icon-title.delighter.started,
.recycling-box__text.delighter.started,
.top-unit__line-box-inner.delighter.started,
.collect__text-period.delighter.started,
.collect__text.delighter.started,
.collect__item.delighter.started,
.collect__items.delighter.started,
.collect__title-inner.delighter.started,
.collect__title.delighter.started,
.collect__inner.delighter.started,
.bd-round__inner-box.delighter.started,
.bd-round__text.delighter.started,
.bd-round__title.delighter.started,
.speech-bubble__text.delighter.started,
.speech-bubble__img.delighter.started,
.top-unit__text.delighter.started,
.top-unit__inner-gift.delighter.started,
.top-unit__heading.delighter.started,
.btn-box.delighter.started,
.top-intro__text.delighter.started,
.top-intro__title.delighter.started {
  opacity: 1;
}

.contents-unit__title-highlight.delighter::after {
  transition: all 1s ease-out;
  transform: scaleY(0);
  transform-origin: top center;
}
@media screen and (min-width: 768px) {
  .contents-unit__title-highlight.delighter::after {
    transition: all 1s ease-out;
    transform: scaleY(0);
    transform-origin: top center;
  }
}

.contents-unit__title-highlight.delighter.started::after {
  transform: none;
}

/* アニメーション開始前の初期設定 */
.fadeInTrigger {
  opacity: 0;
}

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn02 {
  animation-name: fadeInAnime02;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime02 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ======================================
clearfix 
======================================*/
.clearfix:after {
  visibility: hidden;
  height: 0;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
}

* html .clearfix {
  zoom: 1;
}

*:first-child + html .clearfix {
  zoom: 1;
}

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