@charset "UTF-8";
/*=============================================================
 tools
=============================================================*/
@import url("https://fonts.googleapis.com/css2?family=Murecho:wght@400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap");
@keyframes spin-right {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(360deg); /* 360度回転 */
  }
}
@keyframes floatX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(vw(-20));
    @media only screen and (min-width: 768px) {
      transform: translateX(-20px);
    }
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes floatX2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(vw(-20));
    @media only screen and (min-width: 768px) {
      transform: translateX(-20px);
    }
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes poyon {
  0%, 50%, 100% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  20% {
    transform: scale(0.9, 1.1);
  }
  30% {
    transform: scale(1.05, 0.95);
  }
  40% {
    transform: scale(1, 1);
  }
}
@keyframes yurayura {
  0%, 100% {
    transform: rotate(0deg) skewX(0deg);
  }
  50% {
    transform: rotate(-2deg) skewX(2deg);
  }
}
@keyframes yurayura2 {
  0%, 100% {
    transform: rotate(0deg) skewX(0deg);
  }
  50% {
    transform: rotate(2deg) skewX(-2deg);
  }
}
@keyframes story {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(10px);
  }
  10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(10px);
  }
  20% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
body {
  overflow: visible;
}

#keyvisual {
  position: relative;
  height: 86.71875vw;
  background: url("../img/top/kv_bg.png") no-repeat top center;
  background-size: cover;
  overflow: hidden;
  margin-bottom: -14.0625vw;
  max-width: 100vw;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #keyvisual {
    height: 555px;
    max-width: 640px;
    margin-bottom: -90px;
  }
}
#keyvisual .keyvisual__wrap {
  width: 100%;
  height: 100%;
}
#keyvisual .keyvisual__cloud1 {
  position: absolute;
  top: 17.34375vw;
  left: -3.125vw;
  width: 64.0625vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__cloud1 {
    top: 111px;
    left: -20px;
    width: 410px;
  }
}
#keyvisual .keyvisual__cloud1 img {
  animation: floatX 10s ease-in-out infinite;
}
#keyvisual .keyvisual__cloud2 {
  position: absolute;
  top: 8.75vw;
  left: -3.125vw;
  width: 24.0625vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__cloud2 {
    top: 56px;
    left: -20px;
    width: 154px;
  }
}
#keyvisual .keyvisual__cloud3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 77.96875vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__cloud3 {
    width: 499px;
  }
}
#keyvisual .keyvisual__cloud3 img {
  animation: floatX2 8s ease-in-out infinite;
}
#keyvisual .keyvisual__cloud4 {
  position: absolute;
  top: 40.625vw;
  right: -3.125vw;
  width: 46.5625vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__cloud4 {
    bottom: 128px;
    right: -20px;
    width: 298px;
  }
}
#keyvisual .keyvisual__cloud4 img {
  animation: floatX 8s ease-in-out infinite;
}
#keyvisual .keyvisual__cloud5 {
  position: absolute;
  top: 25.625vw;
  right: -3.125vw;
  width: 27.96875vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__cloud5 {
    bottom: 377px;
    right: -20px;
    width: 179px;
  }
}
#keyvisual .keyvisual__flare {
  position: absolute;
  top: 0;
  right: 0;
}
#keyvisual .keyvisual__flag {
  position: absolute;
  top: 0;
  left: 0;
}
#keyvisual .keyvisual__palm1 {
  position: absolute;
  top: 3.125vw;
  left: 0;
  width: 37.96875vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__palm1 {
    top: 20px;
    width: 243px;
  }
}
#keyvisual .keyvisual__palm1 img {
  animation: yurayura 8s 1s ease-in-out infinite;
}
#keyvisual .keyvisual__palm2 {
  position: absolute;
  top: 11.71875vw;
  right: 0;
  width: 32.65625vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__palm2 {
    top: 75px;
    width: 209px;
  }
}
#keyvisual .keyvisual__palm2 img {
  animation: yurayura2 8s 0s ease-in-out infinite;
}
#keyvisual .keyvisual__plant1 {
  position: absolute;
  bottom: -11.5625vw;
  left: 0;
  width: 37.8125vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__plant1 {
    bottom: -74px;
    width: 242px;
  }
}
#keyvisual .keyvisual__plant2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 34.53125vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__plant2 {
    width: 221px;
  }
}
#keyvisual .keyvisual__fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-image: linear-gradient(0deg, white, rgba(255, 255, 255, 0.5));
}
#keyvisual .keyvisual__logo {
  position: absolute;
  top: 37.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 81.25vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__logo {
    width: 520px;
  }
}
#keyvisual .keyvisual__story {
  position: absolute;
  bottom: 25vw;
  right: 0.625vw;
  width: 19.53125vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__story {
    bottom: 160px;
    right: 4px;
    width: 125px;
  }
}
#keyvisual .keyvisual__story a {
  position: relative;
  display: block;
}
#keyvisual .keyvisual__story a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 31.25vw;
  background-color: #029BB6;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__story a::before {
    border-radius: 200px;
  }
}
#keyvisual .keyvisual__story a img {
  position: relative;
  top: -0.78125vw;
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__story a img {
    top: -5px;
    transition: all 0.3s ease;
  }
}
@media only screen and (min-width: 768px) {
  #keyvisual .keyvisual__story a:hover img {
    top: 0;
  }
}
#keyvisual .keyvisual__wrap {
  transform: scale(1.1);
  transition: all 1s ease;
}
#keyvisual .keyvisual__sun {
  transform: scale(1.1);
  opacity: 0;
  transition: all 0.6s 0.6s ease;
}
#keyvisual .keyvisual__flare {
  transform: rotate(30deg) skewY(-38deg);
  transform-origin: top right;
  opacity: 0;
  transition: all 0.6s 0.7s ease;
}
#keyvisual .keyvisual__palm1 {
  transform: rotate(-2deg) scale(1.1) skewX(15deg);
  transition: all 0.6s ease;
}
#keyvisual .keyvisual__palm2 {
  transform: rotate(2deg) scale(1.1) skewX(-15deg);
  transition: all 0.6s 0.1s ease;
}
#keyvisual .keyvisual__plant1 {
  transform: scale(1.1);
  filter: blur(10px);
  transition: all 1s 0.2s ease;
}
#keyvisual .keyvisual__plant2 {
  transform: scale(1.1);
  filter: blur(10px);
  transition: all 1s 0.2s ease;
}
#keyvisual .keyvisual__logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: all 0.3s 1s ease-out;
}
#keyvisual .keyvisual__story {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.4s 1.4s ease;
}
#keyvisual.move-on .keyvisual__wrap {
  transform: scale(1);
}
#keyvisual.move-on .keyvisual__sun {
  opacity: 1;
  transform: scale(1);
}
#keyvisual.move-on .keyvisual__flare {
  opacity: 1;
  transform: rotate(0deg) skewY(0deg);
}
#keyvisual.move-on .keyvisual__palm1, #keyvisual.move-on .keyvisual__palm2 {
  transform: rotate(0deg) scale(1) skewX(0deg);
}
#keyvisual.move-on .keyvisual__plant1, #keyvisual.move-on .keyvisual__plant2 {
  transform: scale(1);
  filter: blur(0px);
}
#keyvisual.move-on .keyvisual__logo {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
#keyvisual.move-on .keyvisual__logo img {
  animation: poyon 1.2s 1s 1;
}
#keyvisual.move-on .keyvisual__story {
  opacity: 1;
  transform: translateY(0);
}

#event {
  position: relative;
  padding: 0 4.6875vw 7.5vw;
  border: 1.25vw solid rgba(212, 67, 52, 0.2);
  background-color: #FFF6A4;
  box-sizing: border-box;
  border-radius: 4.6875vw;
  z-index: 0;
}
@media only screen and (min-width: 768px) {
  #event {
    padding: 0 30px 48px;
    border: 8px solid rgba(212, 67, 52, 0.2);
    border-radius: 30px;
  }
}
#event::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 3.4375vw;
  background-image: url("../img/event/sec_bg_top.png"), url("../img/event/sec_bg_btm.png");
  background-size: 100% auto;
  background-position: top center, bottom center;
  background-repeat: no-repeat;
  mix-blend-mode: color-burn;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  #event::before {
    border-radius: 22px;
  }
}
#event .sec__box__ttlBox {
  position: relative;
  margin: -12% -3.125vw 0;
  transform: translateY(0);
  margin-bottom: 4.6875vw;
  border-color: #0078A6;
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  #event .sec__box__ttlBox {
    margin: -12% -20px 0;
    margin-bottom: 30px;
  }
}
#event .sec__box__ttlBox__text {
  background-color: #0078A6;
  color: #fff;
  border-color: #fff;
}
#event .sec__box__ttlBox__title {
  color: #0078A6;
}
#event .event__bnr {
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #event .event__bnr {
    margin-bottom: 20px;
  }
}
#event .event__text {
  font-size: 3.4375vw;
  font-weight: 600;
  color: #0078A6;
  margin-bottom: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #event .event__text {
    font-size: 22px;
    margin-bottom: 20px;
  }
}
#event .event__box {
  background-color: #fff;
  border-radius: 4.6875vw;
  padding: 3.125vw;
}
@media only screen and (min-width: 768px) {
  #event .event__box {
    border-radius: 30px;
    padding: 20px;
  }
}
#event .event__box h2 {
  font-size: 3.4375vw;
  color: #058EA7;
  line-height: 1.3;
  margin-top: 0.8em;
  margin-bottom: 0.6em;
}
@media only screen and (min-width: 768px) {
  #event .event__box h2 {
    font-size: 20px;
  }
}
#event .event__box h2 span {
  background: linear-gradient(transparent 50%, #FFFF51 50%);
}
#event .event__box h3 {
  font-size: 3.125vw;
  color: #058EA7;
  line-height: 1.3;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}
@media only screen and (min-width: 768px) {
  #event .event__box h3 {
    font-size: 20px;
  }
}
#event .event__box p {
  font-size: 2.8125vw;
  line-height: 1.8;
  color: #0078A6;
  font-weight: 500;
  margin-bottom: 1em;
}
@media only screen and (min-width: 768px) {
  #event .event__box p {
    font-size: 18px;
  }
}
#event .event__box p a {
  color: #FF5687;
}
#event .event__box ul li {
  display: flex;
  font-size: 2.8125vw;
  color: #0078A6;
  font-weight: 500;
  line-height: 1.5em;
  margin-bottom: 0.6em;
}
@media only screen and (min-width: 768px) {
  #event .event__box ul li {
    font-size: 18px;
  }
}
#event .event__box ul li::before {
  content: "・";
  font-weight: 500;
}