@charset "UTF-8";
.area_kv .kv_puzzle {
  display: none !important;
}
.area_kv .box_chara .chara {
  position: absolute;
  z-index: 5;
}
.area_kv .box_chara .chara.panda {
  width: min(295 / 1320 * 100vw, 295px);
  bottom: -6.8em;
  right: 3.6em;
  -webkit-animation: shake 3.6s steps(1, end) infinite;
          animation: shake 3.6s steps(1, end) infinite;
}
.area_kv .box_chara .chara.grass {
  width: min(156 / 1320 * 100vw, 156px);
  bottom: -5.4em;
  right: 0;
}
@media screen and (max-width: 768px) {
  .area_kv .box_chara .chara.panda {
    width: min(114.72 / 375 * 100vw, 114.72px);
    bottom: -3.2em;
    right: 7%;
  }
  .area_kv .box_chara .chara.grass {
    width: min(60 / 375 * 100vw, 60px);
    bottom: -2.4em;
    right: 0;
  }
}

.area_lead {
  padding: 0.7em 0 7.5em;
}
.area_lead .tit_withen .en {
  color: rgba(20, 144, 48, 0.1);
}
.area_lead .circle {
  width: min(384 / 1320 * 100vw, 384px);
  position: absolute;
  top: 3em;
  left: calc(50% + min(330 / 1320 * 100vw, 330px));
}
.area_lead .flex_wrap {
  margin: 2.6em 0 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.area_lead .box_img {
  width: 50%;
  margin-top: 0.3em;
}
.area_lead .box_text {
  width: calc(50% - min(80 / 1320 * 100vw, 80px));
}
.area_lead .box_text .title {
  color: #149030;
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  font-size: min(28 / 1320 * 100vw, 28px);
}
.area_lead .box_text p {
  margin-top: 0.9em;
}
@media screen and (max-width: 768px) {
  .area_lead {
    padding: 2.9em 0 5.8em;
  }
  .area_lead .circle {
    width: min(215 / 375 * 100vw, 215px);
    top: 3em;
    left: 50%;
  }
  .area_lead .flex_wrap {
    margin: 2em 0 0;
  }
  .area_lead .box_text,
  .area_lead .box_img {
    width: 100%;
  }
  .area_lead .box_img {
    margin-top: 0.3em;
  }
  .area_lead .box_text {
    margin-top: 1.7em;
  }
  .area_lead .box_text .title {
    font-size: min(24 / 375 * 100vw, 24px);
    line-height: 1.8;
  }
  .area_lead .box_text p {
    margin-top: 0.7em;
  }
}

.area_sdgs {
  position: relative;
}
.area_sdgs::before, .area_sdgs::after {
  content: "";
  display: block;
  position: absolute;
  position: absolute;
}
.area_sdgs::before {
  width: min(9.8958333333vw, 190px);
  height: min(11.5625vw, 222px);
  background: url(../img/sustainability/sdgs_deco_grass.png) no-repeat center top;
  background-size: 100%;
  left: 0;
  top: calc(min(11.4583333333vw, 220px) * -1);
}
.area_sdgs::after {
  width: min(12.8125vw, 246px);
  height: min(12.8125vw, 246px);
  background: url(../img/sustainability/sdgs_deco_wood.png) no-repeat center top;
  background-size: 100%;
  right: 0;
  top: calc(min(10.4166666667vw, 200px) * -1);
}
.area_sdgs .bear {
  width: min(12.03125vw, 231px);
  height: min(8.4895833333vw, 163px);
  position: absolute;
  top: calc(min(6.7708333333vw, 130px) * -1);
  left: min(2.2395833333vw, 43px);
  z-index: 5;
  animation: shake 3.2s steps(1, end) infinite reverse;
}
.area_sdgs .background {
  background: url(../img/common/pa_noise.png) #F6F4F2;
  background-size: 300px;
  margin: min(64 / 1320 * 100vw, 64px) 0;
  position: relative;
}
.area_sdgs .background::before, .area_sdgs .background::after {
  content: "";
  display: block;
  position: absolute;
  width: min(1920 / 1320 * 100vw, 1920px);
  aspect-ratio: 1920/64;
  background: url(../img/sustainability/giza.png) no-repeat center top;
  background-size: 100%;
  position: relative;
}
.area_sdgs .background::before {
  top: calc(min(63 / 1320 * 100vw, 63px) * -1);
}
.area_sdgs .background::after {
  bottom: calc(min(63 / 1320 * 100vw, 63px) * -1);
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1);
}
.area_sdgs .tit_withen.sdgs {
  padding-top: min(87 / 1320 * 100vw, 87px);
  position: relative;
}
.area_sdgs .tit_withen.sdgs::before {
  content: "";
  display: block;
  position: absolute;
  width: min(61 / 1320 * 100vw, 61px);
  height: min(61 / 1320 * 100vw, 61px);
  background: url(../img/sustainability/sdg_wheel.png) no-repeat center bottom;
  background-size: 100%;
  top: min(24 / 1320 * 100vw, 24px);
}
.area_sdgs .tit_withen.sdgs .en {
  color: #fff;
}
.area_sdgs .txt_lead {
  margin: 1.5em 0 2.8em;
  text-align: center;
  font-size: min(20 / 1320 * 100vw, 20px);
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .area_sdgs::before {
    width: min(103.42 / 375 * 100vw, 103.42px);
    height: min(98.8 / 375 * 100vw, 98.8px);
    top: calc(min(82 / 375 * 100vw, 82px) * -1);
  }
  .area_sdgs::after {
    width: min(95 / 375 * 100vw, 95px);
    height: min(95 / 375 * 100vw, 95px);
    top: calc(min(78 / 375 * 100vw, 78px) * -1);
  }
  .area_sdgs .bear {
    width: min(88.61 / 375 * 100vw, 88.61px);
    height: min(62.67 / 375 * 100vw, 62.67px);
    top: calc(min(48 / 375 * 100vw, 48px) * -1);
    left: 5%;
  }
  .area_sdgs .background {
    margin: min(13 / 375 * 100vw, 13px) 0;
  }
  .area_sdgs .background::before, .area_sdgs .background::after {
    width: 100vw;
    aspect-ratio: 375/13;
    background: url(../img/sustainability/giza_sp.png) no-repeat center bottom;
    background-size: 100%;
  }
  .area_sdgs .background::before {
    top: calc(min(12.5 / 375 * 100vw, 12.5px) * -1);
  }
  .area_sdgs .background::after {
    bottom: calc(min(12.5 / 375 * 100vw, 12.5px) * -1);
  }
  .area_sdgs .tit_withen.sdgs {
    padding-top: 6.2em;
  }
  .area_sdgs .tit_withen.sdgs::before {
    width: min(42 / 375 * 100vw, 42px);
    height: min(42 / 375 * 100vw, 42px);
    top: 2.8em;
  }
  .area_sdgs .txt_lead {
    width: 89%;
    margin: 1.3em auto 3.4em;
    font-size: min(16 / 375 * 100vw, 16px);
    text-align: left;
  }
}
.area_sdgs .wrap_sdgs {
  margin-bottom: min(60 / 1320 * 100vw, 60px);
  position: relative;
}
.area_sdgs .wrap_sdgs .deco01,
.area_sdgs .wrap_sdgs .deco02,
.area_sdgs .wrap_sdgs .deco03 {
  position: absolute;
}
.area_sdgs .wrap_sdgs .deco01 {
  width: min(2192 / 1320 * 100vw, 2192px);
  top: calc(min(50 / 1320 * 100vw, 50px) * -1);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.area_sdgs .wrap_sdgs .deco02 {
  width: min(436 / 1320 * 100vw, 436px);
  top: 44%;
  right: calc(50% + min(400 / 1320 * 100vw, 400px));
}
.area_sdgs .wrap_sdgs .deco03 {
  width: min(608 / 1320 * 100vw, 608px);
  bottom: min(100 / 1320 * 100vw, 100px);
  left: calc(50% + min(230 / 1320 * 100vw, 230px));
}
@media screen and (max-width: 768px) {
  .area_sdgs .wrap_sdgs {
    margin-bottom: 3.7em;
  }
  .area_sdgs .wrap_sdgs .deco01 {
    width: 100vw;
    top: calc(min(50 / 375 * 100vw, 50px) * -1);
    left: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .area_sdgs .wrap_sdgs .deco02 {
    width: min(436 / 375 * 100vw, 436px);
    top: 44%;
    right: calc(50% + min(400 / 375 * 100vw, 400px));
  }
  .area_sdgs .wrap_sdgs .deco03 {
    width: min(608 / 375 * 100vw, 608px);
    bottom: min(100 / 375 * 100vw, 100px);
    left: calc(50% + min(230 / 375 * 100vw, 230px));
  }
}
.area_sdgs .box_sdgs {
  background: #fff;
  position: relative;
}
.area_sdgs .box_sdgs + .box_sdgs {
  margin-top: 3.4em;
}
.area_sdgs .box_sdgs::before, .area_sdgs .box_sdgs::after,
.area_sdgs .box_sdgs .flex_wrap::before,
.area_sdgs .box_sdgs .flex_wrap::after {
  content: "";
  display: block;
  position: absolute;
  width: min(14 / 1320 * 100vw, 14px);
  height: min(14 / 1320 * 100vw, 14px);
}
.area_sdgs .box_sdgs::before,
.area_sdgs .box_sdgs .flex_wrap::before {
  border-left: 4px solid #2EC458;
  left: 0;
}
.area_sdgs .box_sdgs::after,
.area_sdgs .box_sdgs .flex_wrap::after {
  border-right: 4px solid #2EC458;
  right: 0;
}
.area_sdgs .box_sdgs::before, .area_sdgs .box_sdgs::after {
  border-top: 4px solid #2EC458;
  top: 0;
}
.area_sdgs .box_sdgs .flex_wrap::before, .area_sdgs .box_sdgs .flex_wrap::after {
  border-bottom: 4px solid #2EC458;
  bottom: 0;
}
.area_sdgs .box_sdgs .balloon {
  --grad-color-1: #8DBC58;
  --grad-color-2: #03B134;
  width: min(88 / 1320 * 100vw, 88px);
  height: min(88 / 1320 * 100vw, 88px);
  padding-top: 0.8em;
  position: absolute;
  display: inline-block;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--grad-color-1) 10%, var(--grad-color-2) 90%);
  text-align: center;
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  z-index: 2;
  top: min(45 / 1320 * 100vw, 45px);
  left: min(60 / 1320 * 100vw, 60px);
}
.area_sdgs .box_sdgs .balloon::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 3%;
  right: 16px;
  border-style: solid;
  border-width: 13px 0 0 16px;
  border-color: transparent transparent transparent var(--grad-color-2);
  translate: 100% -50%;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
}
.area_sdgs .box_sdgs .balloon span {
  font-size: min(18 / 1320 * 100vw, 18px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.area_sdgs .box_sdgs .balloon span.num {
  content: counter(num, decimal-leading-zero);
  font-family: "Inter", "ZenKakuGothicNew-Medium", sans-serif;
  font-weight: 900;
  font-size: min(36 / 1320 * 100vw, 36px);
  letter-spacing: 0.05em;
}
.area_sdgs .box_sdgs .box_title {
  padding: min(60 / 1320 * 100vw, 60px) min(60 / 1320 * 100vw, 60px) min(32 / 1320 * 100vw, 32px) min(175 / 1320 * 100vw, 175px);
  position: relative;
}
.area_sdgs .box_sdgs .box_title::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background: url(../img/sustainability/line_dotts.png) repeat-x;
  background-size: 12px;
  left: 0;
  bottom: 0;
}
.area_sdgs .box_sdgs .box_title .label span {
  padding: 0.25em 0.4em 0.22em;
  background: #332F2D;
  color: #fff;
  display: inline-block;
  font-size: min(20 / 1320 * 100vw, 20px);
  line-height: 1;
}
@media screen and (min-width: 769px) {
  .area_sdgs .box_sdgs .box_title .label.line span:first-of-type {
    padding-right: 0;
  }
  .area_sdgs .box_sdgs .box_title .label.line span:nth-of-type(2) {
    padding-left: 0;
  }
}
.area_sdgs .box_sdgs .box_title .title {
  margin-top: 0.1em;
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  font-size: min(24 / 1320 * 100vw, 24px);
}
.area_sdgs .box_sdgs .mark {
  width: min(74 / 1320 * 100vw, 74px);
  position: absolute;
  top: min(60 / 1320 * 100vw, 60px);
  right: min(60 / 1320 * 100vw, 60px);
}
.area_sdgs .box_sdgs .flex_wrap {
  padding: min(40 / 1320 * 100vw, 40px) min(60 / 1320 * 100vw, 60px) min(56 / 1320 * 100vw, 56px);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.area_sdgs .box_sdgs .flex_wrap .box_img {
  width: min(368 / 1320 * 100vw, 368px);
  text-align: center;
}
.area_sdgs .box_sdgs .flex_wrap .box_img .txt_caption {
  margin-top: 0.5em;
  font-size: min(14 / 1320 * 100vw, 14px);
}
.area_sdgs .box_sdgs .flex_wrap .text {
  width: min(672 / 1320 * 100vw, 672px);
  margin-top: -0.2em;
}
.area_sdgs .box_sdgs .flex_wrap .text em {
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  color: #149030;
}
@media screen and (max-width: 768px) {
  .area_sdgs .box_sdgs + .box_sdgs {
    margin-top: 3.8em;
  }
  .area_sdgs .box_sdgs::before, .area_sdgs .box_sdgs::after,
  .area_sdgs .box_sdgs .flex_wrap::before,
  .area_sdgs .box_sdgs .flex_wrap::after {
    width: min(14 / 375 * 100vw, 14px);
    height: min(14 / 375 * 100vw, 14px);
  }
  .area_sdgs .box_sdgs .balloon {
    width: min(60 / 375 * 100vw, 60px);
    height: min(60 / 375 * 100vw, 60px);
    padding-top: 0.45em;
    font-size: min(24 / 375 * 100vw, 24px);
    line-height: 1;
    top: -1.4em;
    left: -0.4em;
  }
  .area_sdgs .box_sdgs .balloon::after {
    bottom: 0;
    right: 0.6em;
  }
  .area_sdgs .box_sdgs .balloon span {
    font-size: min(12 / 375 * 100vw, 12px);
  }
  .area_sdgs .box_sdgs .balloon span.num {
    margin-top: 0.15em;
    font-size: min(24 / 375 * 100vw, 24px);
  }
  .area_sdgs .box_sdgs .box_title {
    padding: 2.3em 6% 1.1em;
  }
  .area_sdgs .box_sdgs .box_title .label span {
    padding: 0.25em 0.4em 0.3em;
    font-size: min(16 / 375 * 100vw, 16px);
  }
  .area_sdgs .box_sdgs .box_title .title {
    margin-top: 0.1em;
    font-size: min(20 / 375 * 100vw, 20px);
  }
  .area_sdgs .box_sdgs .mark {
    width: min(48 / 375 * 100vw, 48px);
    top: 2.4em;
    right: 6%;
  }
  .area_sdgs .box_sdgs .flex_wrap {
    padding: 1.7em 6% 2.1em;
  }
  .area_sdgs .box_sdgs .flex_wrap .box_img {
    width: 100%;
  }
  .area_sdgs .box_sdgs .flex_wrap .box_img .txt_caption {
    font-size: min(12 / 375 * 100vw, 12px);
  }
  .area_sdgs .box_sdgs .flex_wrap .text {
    width: 100%;
    margin-top: 1.3em;
  }
}

.area_epilogue {
  width: min(700 / 1320 * 100vw, 700px);
  margin: 11em auto 0;
  position: relative;
}
.area_epilogue .epilogue01,
.area_epilogue .epilogue02 {
  position: absolute;
}
.area_epilogue .epilogue01 {
  width: min(163 / 1320 * 100vw, 163px);
  height: min(160 / 1320 * 100vw, 160px);
  top: -0.3em;
  left: calc(min(137 / 1320 * 100vw, 137px) * -1);
}
.area_epilogue .epilogue02 {
  width: min(196 / 1320 * 100vw, 196px);
  height: min(175 / 1320 * 100vw, 175px);
  top: -1.1em;
  right: calc(min(190 / 1320 * 100vw, 190px) * -1);
}
.area_epilogue p {
  text-align: center;
  color: #149030;
  font-size: min(28 / 1320 * 100vw, 28px);
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .area_epilogue {
    width: 92%;
    margin: 5.3em auto 0;
    padding: 3em 0 4.4em;
  }
  .area_epilogue .epilogue01 {
    width: min(77 / 375 * 100vw, 77px);
    height: min(80 / 375 * 100vw, 80px);
    top: 0;
    left: 1.5%;
  }
  .area_epilogue .epilogue02 {
    width: min(71 / 375 * 100vw, 71px);
    height: min(88 / 375 * 100vw, 88px);
    top: initial;
    bottom: 0;
    right: 1.5%;
  }
  .area_epilogue p {
    line-height: 1.85;
    font-size: min(24 / 375 * 100vw, 24px);
  }
}