@charset "UTF-8";
/*-----------------------------------

	mainvisual

-----------------------------------*/
#mainvisual {
  padding: 300px 0 200px;
  text-align: center;
  position: relative;
}
#mainvisual:before {
  content: "";
  width: 480px;
  height: 696px;
  background: url("../img/index/mainvisual_img01.png") no-repeat center/contain;
  position: absolute;
  top: 10%;
  left: 0;
  z-index: -1;
}
#mainvisual:after {
  content: "";
  width: 485px;
  height: 660px;
  background: url("../img/index/mainvisual_img02.png") no-repeat center/contain;
  position: absolute;
  top: 20%;
  right: 0;
  z-index: -1;
}
.d-demo__img {
  width: 100%;
  height: 20vw;
  min-height: 320px;
  overflow: hidden;
}
.skrollable {
  position: fixed;
  z-index: 100;
}
.p-kv1 {
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  width: 698px;
  height: 79px;
  z-index: -9999;
  position: fixed;
}
.p-kv2 {
  width: 515px;
  height: 518px;
  bottom: 0;
  left: 0;
  z-index: -9999;
  position: fixed;
}
.p-kv3 {
  width: 365px;
  height: 325px;
  bottom: 0;
  right: 0;
  z-index: -9999;
  position: fixed;
}
.p-kv__img {
  width: 100%;
  height: 18vw;
  min-height: 320px;
  /* overflow: hidden; */
}
.simple-parallax-initialized {
  overflow: auto;
}
/* #bg1 {
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  width: 698px;
  height: 79px;
  background: url("../img/index/bubbles.png") no-repeat;
  z-index: -9999;
  transition-timing-function : ease
}
#bg2 {
  width: 515px;
  height: 518px;
  bottom: 0;
  left: 0;
  background: url("../img/index/bubbles2.png") no-repeat;
  z-index: -9999;
  transition-timing-function : ease
}
#bg3 {
  width: 365px;
  height: 325px;
  bottom: 0;
  right: 0;
  background: url("../img/index/bubbles3.png") no-repeat;
  z-index: -9999;
  transition-timing-function : ease-out
}
#bg4 {
  left: 0;
  right: 0;
  top: 20%;
  margin: 0 auto;
  width: 698px;
  height: 79px;
  background: url("../img/index/sp/bubbles.png") no-repeat;
  z-index: -9999;
  transition-timing-function : ease
}
#bg5 {
  width: 515px;
  height: 518px;
  bottom: 0;
  left: 0;
  background: url("../img/index/sp/bubbles2.png") no-repeat;
  z-index: -9999;
  transition-timing-function : ease
}
#bg6 {
  width: 365px;
  height: 325px;
  bottom: 0;
  right: 0;
  background: url("../img/index/sp/bubbles3.png") no-repeat;
  z-index: -9999;
  transition-timing-function : ease-out
} */
#mainvisual .copyright_box img {
  width: 684px;
  margin-bottom: 100px;
  position: relative;
  z-index: 1;
}
#mainvisual .copyright_box {}
#mainvisual .copyright_box p {
  font-size: 20px;
  line-height: 3;
}
@media screen and (max-width: 1400px) {
  #mainvisual {
    padding-top: 200px;
  }
  #mainvisual:before {
    top: 15%;
    width: 327px;
    height: 464px;
  }
  #mainvisual:after {
    width: 323px;
    height: 440px;
  }
}
@media screen and (max-width: 840px) {
  #mainvisual:before, #mainvisual:after {
    display: none;
  }
  #mainvisual {
    padding-top: 100px;
  }
  #mainvisual .copyright_box p {
    font-size: 15px;
  }
}
@media screen and (max-width: 640px) {
  .p-kv1 {
    width: 1128px;
    top: 240px;
  }
}
/*-----------------------------------

	menu

-----------------------------------*/
#menu {
  padding: 0 0 100px 0;
  background: #e8f3e7;
  position: relative;
  z-index: 9999;
  text-align: center;
}
#menu:before {
  content: "";
  position: absolute;
  top: -272px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../img/common/green_bg.png) no-repeat top/cover;
  width: 100%;
  height: 273px;
}
#menu h2 {
  text-align: center;
  position: relative;
  width: 148px;
  margin: 0 auto;
  line-height: 1;
}
/*#menu h2:before {
  content: "";
  width: 86px;
  height: 95px;
  background: url("../img/index/menu_icon.png") no-repeat center/contain;
  position: absolute;
  top: -320%;
  left: 0;
  right: 0;
  margin: 0 auto;
}*/
#menu .icon {
  width: 86px !important;
  display: block;
  margin: 0 auto;
  padding-bottom: 20px;
}
#menu .contents_inner {
  padding-top: 150px;
}
#menu .text {
  margin-top: 40px;
}
#menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: left;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 45px;
  margin-top: 80px;
}
#menu ul li {
  width: calc((100% - (45px * 2)) / 3);
  background: #fff;
  border-radius: 20px;
  position: relative;
}
#menu ul li a {
  display: block;
  padding-top: 30px;
}
#menu ul li:last-child {
  width: 100%;
  margin-top: 40px;
}
#menu ul li:last-child a {
  padding: 50px;
  display: block;
}
#menu ul li .event_img01 {
  position: absolute;
  left: 10%;
  top: -20%;
}
#menu ul li .event_img02 {
  position: absolute;
  right: 10%;
  top: -20%;
}
#menu ul li p {
  font-size: 22px;
  font-weight: bold;
  background: linear-gradient(90deg, #85b053, 10%, #0fb280);
  background: -webkit-linear-gradient(0deg, #85b053 10%, #0fb280);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#menu .arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  z-index: 99;
  width: 50px;
  height: 50px;
  background: linear-gradient(90deg, #85b053, 70%, #0fb280);
  border-radius: 50%;
  transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}
#menu .arrow::after {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  position: absolute;
  top: 20px;
  left: 45%;
  transform: translate(-50%, 0)rotate(45deg);
}
@media screen and (max-width: 1200px) {
  #menu ul {
    gap: 20px;
  }
  #menu ul li {
    width: calc((100% - (20px * 2)) / 3);
  }
}
@media screen and (max-width: 940px) {
  #menu ul li img {
    width: 120px;
  }
  #menu ul li p {
    font-size: 16px;
  }
  #menu ul li:last-child a {
    padding: 30px;
  }
  #menu .arrow {
    width: 30px;
    height: 30px;
  }
  #menu .arrow::after {
    width: 8px;
    height: 8px;
    top: 12px;
  }
}
@media screen and (max-width: 640px) {
  #menu {
    padding: 0 0 40px 0;
  }
  #menu .contents_inner {
    padding-top: 80px;
  }
  #menu .icon {
    width: 57px !important;
  }
  /*#menu h2:before {
    top: -225%;
    width: 57px;
    height: 63px;
  }*/
  #menu .text {
    font-size: 15px;
  }
  #menu ul {
    gap: 20px 10px;
  }
  #menu ul li {
    width: calc((100% - 20px) / 2);
  }
  #menu ul li p {
    font-size: 14px;
  }
  #menu ul li a {
    padding-top: 15px;
  }
  #menu ul li .event_img01 {
    left: 0;
  }
  #menu ul li .event_img02 {
    right: 0;
  }
}
/*-----------------------------------

	movie

-----------------------------------*/
#movie {
  background: #e8f3e7;
  padding-bottom: 80px;
  position: relative;
  z-index: 9999;
}
#movie .video-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56%;
}
#movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 640px) {}