@charset "UTF-8";
body {
  background-color: #EFFCFF;
}

.section-unicorn {
  position: relative;
  padding: 80px 0 70px;
  background-color: #C6EAF2;
}
.section-unicorn::before {
  content: "";
  position: absolute;
  display: block;
  top: -1px;
  width: 100%;
  height: 13.3333333333vw;
  max-height: 40px;
  background: url(..//images/decoration/header_bg2.svg) no-repeat top center/100% 100%;
}
.section-unicorn__container {
  padding: 0 16px;
}
.section-unicorn__container__inner {
  padding: 70px 18px 70px;
  background-image: url(..//images/decoration/lead-white_bg.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.section-unicorn__container__inner h2 {
  color: #54B8CC;
  margin: 0 0 30px 0;
  text-align: left;
  position: relative;
  z-index: 1;
  font-family: "Hachi Maru Pop", cursive;
}
.section-unicorn__container__inner__picture {
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
}
.section-unicorn__container__inner__picture img {
  display: block;
  width: 47%;
  -o-object-fit: cover;
     object-fit: cover;
}
.section-unicorn__container__inner__lead {
  text-align: left;
  margin-top: 32px;
  color: #585F62;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
}
.section-unicorn__container__inner__lead .unicorn__decoration {
  position: absolute;
  width: 33.0666666667vw;
  max-width: 130px;
  height: 20vw;
  bottom: -10.6666666667vw;
  right: 10%;
}
.section-unicorn__container__inner__lead .unicorn__decoration img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.section-unicorn__container__inner__lead .unicorn__decoration .unicorn_decoration-turquoise {
  width: 50%;
  max-width: 60px;
}
.section-unicorn__container__inner__lead .unicorn__decoration .unicorn_decoration-yellow {
  width: 20%;
  max-width: 35px;
  top: initial;
  left: initial;
  bottom: 5.3333333333vw;
  right: 0;
}
.section-unicorn__container__inner__lead h3 {
  margin-bottom: 20px;
}

#screen {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #C6EAF2;
  z-index: 9999999;
  text-align: center;
  color: #fff;
}

body {
  background: #FFE178;
  /*遷移アニメーションと同じ色を指定*/
}

body.appear {
  background: #EFFCFF;
  /*画面を開いた後の背景色を指定*/
}

.screenbg {
  display: none;
  content: "";
  position: fixed;
  transform: scale(100);
  background-color: #FFE178;
  /*伸びる背景色の設定*/
  z-index: 999;
  /*丸のスタートの形状*/
  top: calc(50% - 1rem);
  /*50%から円の半径を引いた値*/
  left: calc(50% - 1rem);
  /*50%から円の半径を引いた値*/
  width: 2rem;
  height: 2rem;
}

/*bodyにappearクラスがついたら出現*/
body.appear .screenbg {
  display: block;
  border-radius: 50%;
  animation-name: PageAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes PageAnime {
  0% {
    /*丸のスタート位置と形状*/
    transform: scale(100);
  }
  100% {
    /*丸の終了位置と形状*/
    transform: scale(0);
    display: none;
    /*終了時は消える*/
  }
}
/*画面遷移の後現れるコンテンツ設定*/
#container {
  opacity: 0;
  /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.randomScroll-box,
.randomScroll-box2 {
  opacity: 0;
}

.scale {
  animation-name: scaleAnime;
  animation-duration: 1s;
  animation-delay: 1.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes scaleAnime {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 872px) {
  .section-unicorn {
    position: relative;
    padding: 10.4166666667vw 0 10.4166666667vw;
    margin-bottom: 200px;
  }
  .section-unicorn::before {
    max-height: 60px;
  }
  .section-unicorn::after {
    content: "";
    position: absolute;
    display: block;
    bottom: -3.9583333333vw;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 10.6666666667vw;
    max-height: 80px;
    background: url(..//images/decoration/section-Turquoise-blew_bg.svg) no-repeat top center/100% 100%;
  }
  .section-unicorn__container {
    padding: 0 160px;
    max-width: 1440px;
    margin: 0 auto;
  }
  .section-unicorn__container__inner {
    padding: 0;
    background-image: initial;
  }
  .section-unicorn__container__inner h2 {
    font-size: 5rem;
    line-height: 5rem;
    margin-bottom: 80px;
  }
  .section-unicorn__container__inner__picture {
    position: relative;
    width: 100%;
    height: 46.5277777778vw;
    max-height: 670px;
    background-image: url(..//images/decoration/lead-white_bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .section-unicorn__container__inner__picture img {
    position: absolute;
  }
  .section-unicorn__container__inner__picture .picture-unicorn-01 {
    width: 60%;
    max-width: 600px;
    bottom: 10%;
    left: 6%;
  }
  .section-unicorn__container__inner__picture .picture-unicorn-02 {
    width: 50%;
    max-width: 500px;
    top: 10%;
    right: 7%;
  }
  .section-unicorn__container__inner__lead {
    position: relative;
    padding: 5%;
    background-image: url(..//images/decoration/lead-white_bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .section-unicorn__container__inner__lead .unicorn__decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 16.8055555556vw;
    max-width: 242px;
    height: 12.5vw;
    max-height: 180px;
  }
  .section-unicorn__container__inner__lead .unicorn__decoration .unicorn_decoration-turquoise {
    width: 90%;
    max-width: 195px;
    top: -17%;
    left: -30%;
  }
  .section-unicorn__container__inner__lead .unicorn__decoration .unicorn_decoration-yellow {
    width: 60%;
    max-width: 120px;
    top: 40%;
    left: 10%;
  }
  .section-unicorn__container__inner__lead p {
    position: relative;
    z-index: 1;
  }
}/*# sourceMappingURL=unicorn.css.map */