@charset "UTF-8";

html {
  font-size: 62.5%;
}
body {
  position: relative;
  font-size: 1.8rem;
  line-height: 2;
  margin: auto;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
  min-width: 320px;
  color: #000;
  background: #fff;
}
* {
  text-decoration: none;
  list-style: none;
}
.w1200 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 30;
}
img {
  width: 100%;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.txt-center {
  text-align: center;
}
.container {
  position: relative;
  overflow: hidden;
}

.hidden {
  display: none;
}

/* fv ---------------------------------------------------------------- */
.fv {
  width: 100%;
  height: 84vw;
  background: linear-gradient(to bottom, #c8dc6e 0%, #c8dc6e 68%, #fff 68%, #fff 100%);
}
.fv .txt-left {
  width: 63%;
  bottom: 30%;
  left: 49%;
  transform: translateX(-50%);
  z-index: 20;
}

.fv .illust {
  width: 100%;
  z-index: 6;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
}

.fv-left01-green {
  top: -5%;
  left: -8%;
  width: 22%;
  mix-blend-mode: multiply;
}
.fv-left01-white {
  top: -5%;
  left: -3%;
  width: 22%;
}
.fv-left02-green {
  left: -1%;
  top: 46%;
  transform: translateY(-50%);
  width: 15%;
  mix-blend-mode: multiply;
}
.fv-left02-white {
  left: -1%;
  top: 49%;
  transform: translateY(-50%);
  width: 15%;
}
.fv-right01-green {
  top: 0;
  right: 0.5%;
  width: 13%;
  mix-blend-mode: multiply;
}
.fv-right01-white {
  top: -3%;
  right: -3%;
  width: 13%;
}
.fv-right02-green {
  top: 19%;
  right: 19.5%;
  transform: translateX(50%);
  width: 8%;
  mix-blend-mode: multiply;
}
.fv-right02-white {
  top: 16%;
  right: 17%;
  transform: translateX(50%);
  width: 8%;
}
.fv-right03-green {
  right: -4%;
  top: 47%;
  transform: translateY(-50%);
  width: 16%;
  mix-blend-mode: multiply;
}
.fv-right03-white {
  right: -1%;
  top: 50%;
  transform: translateY(-50%);
  width: 16%;
}
.fv-flower-left {
  top: -2%;
  left: 7.5%;
  width: 28%;
  z-index: 10;
}
.fv-flower-right {
  top: -7%;
  right: 9%;
  width: 35%;
  z-index: 10;
}

/* message ---------------------------------------------------------------- */
.message {
  margin-top: -21%;
  padding-bottom: 2%;
  background: #fff;
}

.message .ttl {
  width: 35%;
  margin-inline: auto;
  margin-bottom: 3%;
  padding-top: 17%;
  position: relative;
  z-index: 20;
}
.message p {
  margin-bottom: 2%;
  position: relative;
  z-index: 20;
  letter-spacing: 0.1em;
}
.message p br.sp-block {
  display: none;
}
.message p:last-of-type {
  margin-bottom: 0px;
}

.message-left {
  width: 25%;
  bottom: -40%;
  left: 6%;
  z-index: 20;
}

.message-right {
  width: 28%;
  bottom: -40%;
  right: 3%;
  z-index: 20;
}

/* illustrator ---------------------------------------------------------------- */
.illustrator {
  padding-bottom: 1.5%;
  background: #fff;
}
.illustrator .img {
  width: 47%;
  margin-inline: auto;
  position: relative;
  z-index: 20;
}
.illustrator h2 {
  font-size: 3.5rem;
  margin-bottom: 10px;
  color: #8246a0;
  position: relative;
  z-index: 20;
}
.illustrator p {
  color: #8246a0;
  margin-bottom: 40px;
  line-height: 2.2;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 20;
}
.illustrator p br.sp-block {
  display: none;
}
.illustrator .sns .flex {
  justify-content: center;
}
.illustrator .sns .flex li {
  margin: 0 8px;
  position: relative;
  z-index: 20;
}
.illustrator .sns .flex li {
  width: 4%;
}
.illustrator .sns .flex li a {
  display: block;
  width: 100%;
}
.illustrator .illust-left {
  width: 22%;
  /* bottom: 13%; */
  bottom: -6%;
  left: 1%;
}

.illustrator .illust-right {
  width: 20%;
  /* bottom: 10%; */
  bottom: -6%;
  right: 2%;
}
.illustrator .sp {
  display: none;
}

/* graphic ---------------------------------------------------------------- */
.graphic {
  padding-top: 1.5%;
  padding-bottom: 5%;
}
.graphic .ttl {
  width: 16%;
  margin-inline: auto;
  padding-bottom: 3%;
  position: relative;
  z-index: 20;
}

.graphic .thum {
  border: solid 1px #c8c8c8;
}
.graphic p {
  color: #8246a0;
  margin-top: 10px;
  font-size: 2rem;
  /* font-size: clamp(1.6rem, 2.1vw, 2rem); */
  font-size: min(calc(20 / 1110 * 100vw), 2rem);
}
.graphic .right-bottom {
  width: 11%;
  bottom: -24%;
  right: 0;
  z-index: 20;
}

.lity {
  background: rgba(255, 255, 255, .8) !important;
}
.lity-container {
  padding: 5%;
  width: 550px;
}
.lity-content img {
  max-height: inherit !important;
}
.lity-close {
  background: #8246a0 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50px;
  right: 8% !important;
  top: 8% !important;
  font-size: 30px !important;
}
.swiper-button-next,
.swiper-button-prev {
  display: none;
}
.swiper-button-next {
  right: 0px !important;
}
.swiper-button-prev {
  left: 1rem !important;
  /* left: 0px !important; */
}
.swiper-button-next:after,
.swiper-button-prev:after {
  color: #8246a0;
  font-size: 30px !important;
}

.swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: calc(30 / 1100 * 100%);
  justify-content: center;
}

/* footer ---------------------------------------------------------------- */
footer {
  padding-block: 10% 4%;
  background: #c8dc6e;
}
.footer_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  justify-content: center;
  z-index: 20;
  column-gap: 30px;
}
.footer_flex {
  display: flex;
  align-items: center;
  border-right: 1px solid #000;
  column-gap: 30px;
  padding-right: 30px;
}
.footer_flex a {
  display: block;
  width: 30px;
  line-height: 1;
  transition: opacity 0.4s;
}
.amu {
  width: 100px;
  align-items: center;
}
.amu a {
  display: block;
  line-height: 1;
  transition: opacity 0.4s;
}
.amu a:hover {
  opacity: .6;
}
.footer-left-white {
  position: absolute;
  left: -4%;
  bottom: -20%;
  width: 17%;
}
.footer-left-green {
  position: absolute;
  left: 2.5%;
  bottom: -20%;
  width: 17%;
  mix-blend-mode: multiply;
}
.footer-right-white {
  position: absolute;
  right: -2%;
  bottom: -14%;
  width: 13%;
}
.footer-right-green {
  position: absolute;
  right: -0.5rem;
  bottom: 2%;
  width: 13%;
  mix-blend-mode: multiply;
}



.after_load .illustAnm {
  animation-name: illustAnm;
  animation-duration: .8s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes illustAnm {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.after_load .Slide-left {
  animation-name: Slide-left;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes Slide-left {
  0% {
    transform: translateX(-150px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.after_load .txt-left .Slide-left {
  opacity: 0;
  animation-delay: 2.7s;
  /* animation-delay: 2.4s; */
}
/* .after_load .txt-right .Slide-left {
  opacity: 0;
  animation-delay: 2.7s;
} */


.after_load .ScaleAnm.anm {
  opacity: 0;
}
.after_load .ScaleAnm.anm.show {
  animation-name: ScaleAnm;
  animation-duration: .8s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
}
.after_load .graphic .ScaleAnm.anm.show {
  animation-delay: 1.4s;
}
@keyframes ScaleAnm {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


.after_load .Slide-in-left.anm {
  opacity: 0;
}
.after_load .Slide-in-right.anm {
  opacity: 0;
}
.after_load .Slide-in-right.anm.show {
  animation-name: SlideIn-anm-right;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes SlideIn-anm-right {
  0% {
    transform: translateX(150px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.after_load .Slide-in-left.anm.show {
  animation-name: SlideIn-anm-left;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes SlideIn-anm-left {
  0% {
    transform: translateX(-150px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.after_load .FeadAnm.anm {
  opacity: 0;
}
.after_load .FeadAnm.anm.show {
  animation-name: FeadAnm;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes FeadAnm {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.graphic .swiper-slide.FeadAnm.anm:nth-of-type(2) {
  animation-delay: .3s;
}
.graphic .swiper-slide.FeadAnm.anm:nth-of-type(3) {
  animation-delay: .6s;
}
.graphic .swiper-slide.FeadAnm.anm:nth-of-type(4) {
  animation-delay: .9s;
}
.graphic .swiper-slide.FeadAnm.anm:nth-of-type(5) {
  animation-delay: 1.2s;
}

/* loading */
#load {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align: center;
  background: #fff;
}
#load_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#load_logo {
  width: 400px
}
.blur {
  animation-name: blurAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  0% {
    filter: blur(5px);
    transform: translateY(30px);
    opacity: 0;
  }
  50% {
    filter: blur(3px);
  }
  100% {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
  }
}