@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800;900&display=swap");
html {
  width: 100%;
  overflow-x: hidden !important;
}
@media screen and (min-width: 768px) {
  html {
    overflow-x: visible !important;
  }
}

body {
  width: 100%;
  box-sizing: border-box;
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #111;
  font-weight: 400;
  font-size: 4vw;
  font-feature-settings: "palt";
  line-height: 1.8em;
  letter-spacing: 0.1em;
  width: 100%;
  overflow-x: hidden;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
    position: relative;
  }
}

main {
  overflow: hidden;
}

.fredoka {
  font-family: "Fredoka", sans-serif;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

@media screen and (min-width: 768px) {
  .inline-block {
    display: inline-block;
  }
}

.smp-block {
  display: block;
}
@media screen and (min-width: 768px) {
  .smp-block {
    display: none;
  }
}

.pc-block {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc-block {
    display: block;
  }
}

.pc-upto-middle {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc-upto-middle {
    display: block;
  }
}
@media screen and (min-width: 1000px) {
  .pc-upto-middle {
    display: none;
  }
}

/**ハートぶわー**/
.harts {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  left: 0;
  top: 0;
}

.hart-attack {
  position: absolute;
  left: var(--x);
  bottom: -30px;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  pointer-events: none;
  opacity: 0;
  animation: heartFloatUp var(--dur) cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

.hart-attack::before {
  content: "♥";
  display: block;
  width: 100%;
  height: 100%;
  font-size: var(--size);
  line-height: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

@keyframes heartFloatUp {
  0% {
    transform: translate(0, 0) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift), var(--rise)) scale(1) rotate(var(--rot));
    opacity: 0;
  }
}
/**********************************/
.hero-arae div.hero-block {
  position: relative;
  /*		border-radius: 50px;
  		border: solid 4px #EB70A7;
  		*/
  overflow: hidden;
  transition: border-radius 0.4s ease, border-color 0.4s ease;
}
.hero-arae div.hero-block div.hero-base span.hero-bg {
  display: block;
  /*				transform: translate(0 , 100%);*/
  opacity: 0;
  animation: title-bg-ani 1.6s 2s ease-in forwards;
  z-index: 2;
}
.hero-arae div.hero-block span.mihon {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  background: linear-gradient(to bottom, #e8d2da 0%, #eca0bb 38%, #e65b8d 100%);
  z-index: -1;
}
.hero-arae div.hero-block span.hero-txt01 {
  display: block;
  width: 5.76%;
  position: absolute;
  left: 5%;
  top: 26.8%;
  transform: translate(-150%, 0);
  opacity: 0;
  animation: hero-aub-txt01 0.6s 3s cubic-bezier(0, 0.67, 0.45, 1.09) forwards, hero-aub-txt01-sub 10s 8s ease infinite;
}
@media screen and (min-width: 768px) {
  .hero-arae div.hero-block span.hero-txt01 {
    width: 2.2%;
    position: absolute;
    left: 21.8%;
    top: 26.6%;
    transform: translate(-150%, 0);
    opacity: 0;
    animation: hero-aub-txt01 0.6s 3s cubic-bezier(0, 0.67, 0.45, 1.09) forwards;
  }
}
.hero-arae div.hero-block span.hero-txt02 {
  display: block;
  width: 5.76%;
  position: absolute;
  right: 4.6%;
  top: 42.4%;
  transform: translate(150%, 0);
  opacity: 0;
  animation: hero-aub-txt02 0.6s 3.2s cubic-bezier(0, 0.67, 0.45, 1.09) forwards, hero-aub-txt02-sub 10s 9s ease infinite;
}
@media screen and (min-width: 768px) {
  .hero-arae div.hero-block span.hero-txt02 {
    width: 2.2%;
    position: absolute;
    right: 25.4%;
    top: 20%;
    transform: translate(150%, 0);
    opacity: 0;
    animation: hero-aub-txt02 0.6s 3.2s cubic-bezier(0, 0.67, 0.45, 1.09) forwards;
  }
}
.hero-arae div.hero-block h1.hero-title {
  position: absolute;
  width: 100%;
  left: 50%;
  bottom: 1.9%;
  opacity: 1;
  transform: translate(-50%, -210%) scale(1.2);
  animation: hero-title-ani_sp 3.6s cubic-bezier(1, 0.57, 0.77, 1.07) forwards;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .hero-arae div.hero-block h1.hero-title {
    position: absolute;
    width: 47.2%;
    left: 50%;
    bottom: 4%;
    opacity: 1;
    transform: translate(-50%, -94%) scale(1.5);
    animation: hero-title-ani 3s cubic-bezier(0.88, 0.8, 0.61, 1.08) forwards;
  }
}
.hero-arae div.hero-block h1.hero-title div.title-bg div.hero-title-bg01 {
  width: 47%;
  position: absolute;
  left: -0.2%;
  top: 15%;
  transform-origin: right bottom;
  transform: scale(0);
  opacity: 0;
  animation: hero-title-bg01 1.2s ease-in-out forwards;
}
.hero-arae div.hero-block h1.hero-title div.title-bg div.hero-title-bg02 {
  width: 38.8%;
  position: absolute;
  left: 33.8%;
  top: 2%;
  animation: hero-title-bg02 0.8s 0.2s ease-in-out forwards;
  transform: scale(0);
  opacity: 0;
  z-index: 2;
}
.hero-arae div.hero-block h1.hero-title div.title-bg div.hero-title-bg02 span.star01 {
  display: block;
  width: 34%;
  position: absolute;
  left: 12.9%;
  top: 0.5%;
  transform: translate(12%, 35%) scale(0);
  animation: hero-star01-ani 0.6s 0.6s ease-in-out forwards, hantokei 10s 1.8s linear infinite;
  z-index: -1;
}
.hero-arae div.hero-block h1.hero-title div.title-bg div.hero-title-bg02 span.star02 {
  display: block;
  width: 37%;
  position: absolute;
  right: 1.2%;
  bottom: 7.6%;
  transform: translate(-60%, -45%) scale(0);
  animation: hero-star02-ani 0.6s 1s ease-in-out forwards, tokei 10s 2.4s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg div.hero-title-bg02 span.star03 {
  display: block;
  width: 34%;
  position: absolute;
  left: 0.6%;
  bottom: 0.6%;
  transform: translate(65%, -65%) scale(0);
  animation: hero-star03-ani 0.6s 0.8s ease-in-out forwards, hantokei 10s 2s linear infinite;
  z-index: -1;
}
.hero-arae div.hero-block h1.hero-title div.title-bg div.hero-title-bg03 {
  width: 43.8%;
  position: absolute;
  right: 0.2%;
  top: 0.1%;
  transform-origin: left bottom;
  animation: hero-title-bg03 1.2s 0.4s ease-in-out forwards;
  transform-origin: left bottom;
  transform: scale(0);
  opacity: 0;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span {
  display: block;
  position: absolute;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel01 { /*で*/
  width: 9.8%;
  left: 8%;
  top: 39.1%;
  transform: translate(395%, 0) scaleX(0) scaleY(0) rotate(0deg);
  transform-origin: right bottom;
  animation: title-txt-ani-01 1s 0.6s cubic-bezier(0, 0.65, 0.29, 0.86) forwards, title-scaleani 10s 5s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel02 { /*あ*/
  width: 11.4%;
  left: 18.7%;
  top: 38.2%;
  transform: translate(240%, 0) scaleX(0) scaleY(0);
  animation: title-txt-ani-02 1.1s 0.8s cubic-bezier(0, 0.65, 0.29, 0.86) forwards, title-scaleani 10s 5.2s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel03 { /*い*/
  width: 8.7%;
  left: 30.8%;
  top: 47.9%;
  transform: translate(200%, 0) scaleX(0) scaleY(0);
  animation: title-txt-ani-03 1.1s 0.9s cubic-bezier(0, 0.65, 0.29, 0.86) forwards, title-scaleani 10s 5.4s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel04 { /*が*/
  width: 17%;
  left: 40.5%;
  top: 32.2%;
  transform: translate(20%, 0) scaleX(0) scaleY(0);
  animation: title-txt-ani-04 0.8s 0.8s cubic-bezier(0, 0.65, 0.29, 0.86) forwards, title-scaleani 10s 5.6s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel05 { /*し*/
  width: 15%;
  left: 50%;
  top: 44.2%;
  transform: translate(-40%, -25%) scaleX(0) scaleY(0);
  animation: title-txt-ani-04 0.8s 0.9s cubic-bezier(0, 0.65, 0.29, 0.86) forwards, title-scaleani 10s 5.8s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel06 { /*ラ*/
  width: 11.1%;
  left: 65.4%;
  top: 32.2%;
  transform: translate(0%, 0) scaleX(0) scaleY(0);
  opacity: 0;
  animation: title-txt-ani-06 0.6s 1s cubic-bezier(0, 0.65, 0.29, 0.86) forwards, title-scaleani 10s 6s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel07 { /*ブ*/
  width: 10.5%;
  left: 76.6%;
  top: 30%;
  transform: translate(-90%, 30%) scaleX(0.2) scaleY(0.2);
  opacity: 0;
  animation: title-txt-ani-07 1.2s 0.8s cubic-bezier(0.21, 0.46, 0.68, 0.91) forwards, title-scaleani 10s 6.2s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel08 { /**/
  width: 3.6%;
  left: 84.7%;
  top: 23%;
  transform: translate(-110%, 180%) scale(0);
  opacity: 0;
  animation: title-txt-ani-08 0.8s 1.4s cubic-bezier(0.21, 0.46, 0.68, 0.91) forwards, scale-dokidoki 2s 4s ease infinite, title-scaleani 10s 6.4s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg span.titiel09 { /**/
  width: 5%;
  left: 87.7%;
  top: 14%;
  transform: translate(-170%, 210%) scale(0);
  animation: title-txt-ani-09 1s 1.6s cubic-bezier(0.21, 0.46, 0.68, 0.91) forwards, scale-dokidoki 2s 4s ease infinite, title-scaleani 10s 6.4s linear infinite;
}
.hero-arae div.hero-block h1.hero-title div.title-bg {
  /**/
}
.hero-arae {
  /*hero-block*/
}

@keyframes tokei {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes hantokei {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes hero-star01-ani {
  0% {
    transform: translate(12%, 35%) scale(0);
  }
  80% {
    transform: translate(0%, 0%) scale(1.1);
  }
  100% {
    transform: translate(0%, 0%) scale(1);
  }
}
@keyframes hero-star02-ani {
  0% {
    transform: translate(-60%, -45%) scale(0);
  }
  80% {
    transform: translate(0%, 0%) scale(1.1);
  }
  100% {
    transform: translate(0%, 0%) scale(1);
  }
}
@keyframes hero-star03-ani {
  0% {
    transform: translate(65%, -65%) scale(0);
  }
  80% {
    transform: translate(0%, 0%) scale(1.1);
  }
  100% {
    transform: translate(0%, 0%) scale(1);
  }
}
@keyframes hero-title-ani_sp {
  0% {
    transform: translate(-50%, -210%) scale(1.2);
  }
  50% {
    transform: translate(-50%, -210%) scale(1.2);
  }
  75% {
    transform: translate(-50%, -210%) scale(1.2);
  }
  85% {
    transform: translate(-50%, 0%) scale(0.5);
  }
  95% {
    transform: translate(-50%, 0%) scale(1.1);
  }
  100% {
    transform: translate(-50%, 0%) scale(1);
  }
}
@keyframes hero-title-ani {
  0% {
    transform: translate(-50%, -94%) scale(1.5);
  }
  50% {
    transform: translate(-50%, -94%) scale(1.5);
  }
  85% {
    transform: translate(-50%, -94%) scale(1.5);
  }
  100% {
    transform: translate(-50%, 0%) scale(1);
  }
}
@keyframes hero-image-ani {
  0% {
    transform: translate(-50%, -90%) scale(1.5);
  }
  50% {
    transform: translate(-50%, -90%) scale(1.5);
  }
  80% {
    transform: translate(-50%, -90%) scale(1.5);
  }
  100% {
    transform: translate(-50%, 0%) scale(1);
  }
}
@keyframes title-scaleani {
  0% {
    transform: scale(1);
  }
  3% {
    transform: scale(1.5);
  }
  9% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes title-bg-ani {
  0% {
    transform: translate(0, 0%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0%);
    opacity: 1;
  }
}
@keyframes hero-title-bg01 {
  0% {
    transform-origin: right bottom;
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform-origin: right bottom;
    transform: scale(1.4);
    opacity: 1;
  }
  80% {
    transform-origin: right bottom;
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes hero-title-bg02 {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes hero-title-bg03 {
  0% {
    transform-origin: left bottom;
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform-origin: left bottom;
    transform: scale(1.4);
    opacity: 1;
  }
  80% {
    transform-origin: left bottom;
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes title-txt-ani-01 {
  0% {
    transform: translate(395%, 0) scaleX(0) scaleY(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(0%, -15%) scaleX(2.6) scaleY(1.4) rotate(-37deg);
    opacity: 1;
  }
  50% {
    transform: translate(-45%, -15%) scaleX(2.6) scaleY(1.2) rotate(-37deg);
    opacity: 1;
  }
  80% {
    transform: translate(10%, 0) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes title-txt-ani-02 {
  0% {
    transform: translate(240%, 0) scaleX(0) scaleY(0);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, 0) scaleX(1.8) scaleY(1.4) rotate(28deg);
    opacity: 1;
  }
  50% {
    transform: translate(40%, 0) scaleX(1.4) scaleY(1.2) rotate(-22deg);
    opacity: 1;
  }
  80% {
    transform: translate(-10%, 0) scaleX(1) scaleY(1) rotate(18deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes title-txt-ani-03 {
  0% {
    transform: translate(200%, 0) scaleX(0) scaleY(0);
    opacity: 0;
  }
  30% {
    transform: translate(-60%, 0) scaleX(1.5) scaleY(1.5) rotate(-35deg);
    opacity: 1;
  }
  50% {
    transform: translate(10%, 0) scaleX(1.2) scaleY(1.2) rotate(35deg);
    opacity: 1;
  }
  80% {
    transform: translate(-5%, 0) scaleX(1.2) scaleY(1.2) rotate(-5deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes title-txt-ani-04 {
  0% {
    transform: translate(20%, 0) scaleX(0) scaleY(0);
  }
  50% {
    transform: translate(-30%, 0) scaleX(1.4) scaleY(1.6);
  }
  80% {
    transform: translate(0%, 0) scaleX(0.2) scaleY(1);
  }
  100% {
    transform: translate(0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes title-txt-ani-05 {
  0% {
    transform: translate(-40%, -25%) scaleX(0) scaleY(0);
  }
  50% {
    transform: translate(-20%, -25%) scaleX(0.4) scaleY(1.5);
  }
  80% {
    transform: translate(-20%, -25%) scaleX(0.4) scaleY(1.5);
  }
  100% {
    transform: translate(0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes title-txt-ani-06 {
  0% {
    transform: translate(0%, 0) scaleX(0) scaleY(0);
    opacity: 0;
  }
  50% {
    transform: translate(0%, 0) scaleX(1.8) scaleY(1.8);
    opacity: 1;
  }
  80% {
    transform: translate(0, 0) scaleX(0.4) scaleY(0.4) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes title-txt-ani-07 {
  0% {
    transform: translate(-90%, 30%) scaleX(0.2) scaleY(0.2);
    opacity: 0;
  }
  30% {
    transform: translate(-90%, 30%) scaleX(0.2) scaleY(0.2);
    opacity: 1;
  }
  50% {
    transform: translate(0%, 0%) scaleX(1.8) scaleY(1.8);
    opacity: 1;
  }
  80% {
    transform: translate(0%, 0%) scaleX(0.4) scaleY(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(0%, 0%) scaleX(1) scaleY(1);
    opacity: 1;
  }
}
@keyframes title-txt-ani-08 {
  0% {
    transform: translate(-110%, 180%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(0%, 0%) scale(1.4);
    opacity: 1;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
}
@keyframes title-txt-ani-09 {
  0% {
    transform: translate(-170%, 210%) scale(0);
  }
  50% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(0%, 0%) scale(1.4);
    opacity: 1;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
}
@keyframes hero-aub-txt01 {
  0% {
    transform: translate(-150%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0);
    opacity: 1;
  }
}
@keyframes hero-aub-txt01-sub {
  0% {
    transform: translate(0%, 0);
    opacity: 1;
  }
  5% {
    transform: translate(-20%, 0);
    opacity: 0;
  }
  11% {
    transform: translate(0%, 0);
    opacity: 0;
  }
  15% {
    transform: translate(100%, 0);
    opacity: 0;
  }
  25% {
    transform: translate(0%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0%, 0);
    opacity: 1;
  }
}
@keyframes hero-aub-txt02 {
  0% {
    transform: translate(150%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0);
    opacity: 1;
  }
}
@keyframes hero-aub-txt02-sub {
  0% {
    transform: translate(0%, 0);
    opacity: 1;
  }
  5% {
    transform: translate(20%, 0);
    opacity: 0;
  }
  11% {
    transform: translate(0%, 0);
    opacity: 0;
  }
  15% {
    transform: translate(-100%, 0);
    opacity: 0;
  }
  25% {
    transform: translate(0%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0%, 0);
    opacity: 1;
  }
}
@keyframes scale-dokidoki {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.hero-arae .js-loop {
  animation-play-state: paused;
}

.hero-arae.is-inview .js-loop {
  animation-play-state: running;
}

/**********************************/
div.story-wrap {
  background: url(../img/story-wrap-bg.png) no-repeat center top;
  background-size: cover;
  overflow: hidden;
  position: relative;
  transition: border-radius 0.4s ease;
}
div.story-wrap .hero-arae div.hero-block {
  border: solid 4px transparent;
  transition: border-radius 0.4s ease, border-color 0.4s ease;
}
div.story-wrap.is-active {
  border-radius: 50px;
}
div.story-wrap.is-active .hero-arae div.hero-block {
  border-radius: 50px;
  border-color: #EB70A7;
}

/*----------------------------------------- ヘッダーフッター -----------------------------------------*/
header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  transform: translate(0, -100%);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
header.is-active {
  transform: translate(0, 0);
  opacity: 1;
}
header div.header-inner {
  width: 90.8%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32.6%;
  align-items: center;
  padding: 1.8% 0;
}
@media screen and (min-width: 768px) {
  header div.header-inner {
    width: 89.2%;
    max-width: 1213px;
    padding: 25px 0;
  }
}
header div.header-inner div.header-left {
  width: 43.6%;
}
@media screen and (min-width: 768px) {
  header div.header-inner div.header-left {
    width: 49.4%;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  header div.header-inner div.header-left div.header-left-zero {
    width: 81.4%;
    line-height: 0;
  }
}
@media screen and (min-width: 768px) {
  header div.header-inner div.header-left div.header-left-sns {
    width: 13.6%;
    display: flex;
    flex-wrap: wrap;
    gap: 26%;
    align-items: center;
  }
}
header div.header-inner div.header-left div.header-left-sns .header-left-sns-x {
  width: 37%;
  max-width: 18px;
  line-height: 0;
}
header div.header-inner div.header-left div.header-left-sns .header-left-sns-facebook {
  width: 37%;
  max-width: 22px;
  line-height: 0;
}
header div.header-inner a.header-right {
  display: block;
  width: 23.8%;
  line-height: 0;
}
@media screen and (min-width: 768px) {
  header div.header-inner a.header-right {
    width: 13.2%;
  }
}

main {
  box-sizing: border-box;
  transition: padding 0.4s ease;
}
main.is-active {
  padding: 17px;
}
main {
  /*
  @include mq(pc) {
  	padding: 17px;
  }
  	*/
}

.m-title {
  font-size: 8vw;
  text-align: center;
  color: #fff;
  line-height: 1.2em;
  font-family: "Fredoka", sans-serif;
  letter-spacing: 0.15em;
  text-shadow: 1px 1px 0 #FF9BC7, -1px 1px 0 #FF9BC7, 1px -1px 0 #FF9BC7, -1px -1px 0 #FF9BC7;
}
@media screen and (min-width: 768px) {
  .m-title {
    font-size: 50px;
  }
}

section.sec-story {
  /*	background: #E85A86;*/
  background-image: url(../img/story-bg_sp.png);
  background-size: cover;
  background-position: bottom;
  padding: 75px 0 100px;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  section.sec-story {
    background-image: url(../img/story-bg_pc.png);
    background-size: cover;
    background-position: bottom;
  }
}
section.sec-story div.story-bg01 {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}
section.sec-story .story-bg01 .bubble01 {
  position: absolute;
  left: 0;
  bottom: -60px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: rgba(172, 119, 143, 0.227);
  /*		box-shadow: inset 0 0 10px rgba(255,255,255,0.5);*/
  animation: bubbleDiagonal linear forwards;
  z-index: 1;
}
section.sec-story .story-bg01 .bubble02 {
  position: absolute;
  left: 0;
  bottom: -60px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: rgba(230, 141, 188, 0.9);
  /*		box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.093);*/
  animation: bubbleDiagonal linear forwards;
}
@keyframes bubbleDiagonal {
  0% {
    transform: translate(0, 0) scale(0.7);
    opacity: 0;
  }
  15% {
    opacity: 0.45;
  }
  40% {
    transform: translate(calc(var(--move-x) * 0.4 + 8px), calc(var(--move-y) * 0.4)) scale(0.92);
    opacity: 0.35;
  }
  70% {
    transform: translate(calc(var(--move-x) * 0.7 + 20px), calc(var(--move-y) * 0.7)) scale(1.02);
    opacity: 0.24;
  }
  100% {
    transform: translate(var(--move-x), var(--move-y)) scale(1.12);
    opacity: 0;
  }
}
section.sec-story div.heart-bg {
  position: absolute;
  animation: heartbeat 1.5s ease-in-out infinite;
  transform-origin: center;
  pointer-events: none;
}
section.sec-story div.heart-bg.heart-bg01 {
  top: 10%;
  left: 10%;
  width: 4%;
}
section.sec-story div.heart-bg.heart-bg02 {
  bottom: 6%;
  right: 12%;
  width: 4%;
}
section.sec-story div.heart-bg.heart-bg03 {
  top: 23%;
  right: 12%;
  width: 4%;
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.5);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
section.sec-story div.star-bg {
  position: absolute;
  pointer-events: none;
}
section.sec-story div.star-bg.star-bg01 {
  display: none;
}
@media screen and (min-width: 768px) {
  section.sec-story div.star-bg.star-bg01 {
    display: block;
    width: 12%;
    min-width: 173px;
    top: 34%;
    left: 10%;
    animation: star-bg01 3s ease-in-out infinite;
  }
}
section.sec-story div.star-bg.star-bg02 {
  display: none;
}
@media screen and (min-width: 768px) {
  section.sec-story div.star-bg.star-bg02 {
    width: 5%;
    min-width: 83px;
    top: 52.5%;
    left: 6.8%;
    animation: star-bg02 3s 0.27s linear(0, 0.16 5.9%, 0.416 16.3%, 0.532 20.8%, 0.649 25.1%, 0.896 33.8%, 1 37.8%, 0.928 41.1%, 0.9 42.7%, 0.877 44.2%, 0.86 45.7%, 0.847 47.2%, 0.84 48.6%, 0.838 50.1%, 0.84 51.4%, 0.846 52.8%, 0.855 54.2%, 0.869 55.6%, 0.897 58%, 0.974 63.4%, 1 65.5%, 0.979 67.5%, 0.965 69.4%, 0.957 71.2%, 0.954 73.1%, 0.956 74.7%, 0.961 76.5%, 0.991 82.3%, 1 84.5%, 0.994 86.9%, 0.992 89.3%, 0.999 96.6%, 1) infinite;
  }
}
section.sec-story div.star-bg.star-bg03 {
  width: 35.6%;
  top: 53%;
  right: -13%;
  animation: star-bg01 3s ease-in-out infinite;
}
@media screen and (min-width: 768px) {
  section.sec-story div.star-bg.star-bg03 {
    width: 12%;
    min-width: 173px;
    top: 520px;
    right: -40px;
    animation: star-bg01 3s ease-in-out infinite;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-story div.star-bg.star-bg03 {
    top: 460px;
    right: 40px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-story div.star-bg.star-bg03 {
    top: 440px;
    right: 10%;
  }
}
@keyframes star-bg01 {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.5);
  }
  10% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes star-bg02 {
  0% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
section.sec-story h3.story-copy {
  width: 68%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-story h3.story-copy {
    width: 480px;
    margin: 54px auto 24px;
  }
}
section.sec-story p {
  font-size: 3.7vw;
  color: #fff;
  text-align: center;
  line-height: 2.12em;
  font-weight: 500;
  margin-top: 8%;
  margin-bottom: 8%;
}
@media screen and (min-width: 768px) {
  section.sec-story p {
    width: 90%;
    margin: auto;
    font-size: 16px;
  }
}
section.sec-story h3.movie-txt {
  font-size: 1.3rem;
  text-align: center;
  font-weight: 900;
  color: #FFFFA1;
  position: relative;
  margin-bottom: 6%;
}
@media screen and (min-width: 768px) {
  section.sec-story h3.movie-txt {
    font-size: 30px;
    margin-bottom: 30px;
    margin-top: 43px;
  }
}
section.sec-story h3.movie-txt span {
  z-index: 0;
  display: inline-block;
  position: relative;
}
section.sec-story h3.movie-txt span::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5em;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #4FC3CC;
  z-index: -1;
}
section.sec-story div.video-wrap {
  width: 90%;
  z-index: 2;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-story div.video-wrap {
    width: 90%;
    max-width: 690px;
    margin-top: 30px;
  }
}
section.sec-story div.video-wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(7px, 7px);
  border-radius: 1em;
  background: #8CF9E4;
  z-index: -1;
}
section.sec-story div.video-wrap .video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 1em;
  overflow: hidden;
}
section.sec-story div.video-wrap .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

div.border-bg {
  background-image: repeating-linear-gradient(145deg, #fefbe9, #fefbe9 10px, transparent 10px, transparent 20px);
  border-radius: 30px;
}
@media screen and (min-width: 768px) {
  div.border-bg {
    border-radius: 50px;
  }
}

section.sec-reality {
  padding: 10% 0 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality {
    padding: 80px 0 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality {
    padding: 120px 0 0;
  }
}
section.sec-reality .m-reality-title {
  font-size: 6.9vw;
  text-align: center;
  line-height: 1.13em;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-reality .m-reality-title {
    font-size: 32px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality .m-reality-title {
    font-size: 37px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-reality .m-reality-title {
    font-size: 40px;
  }
}
section.sec-reality .m-reality-title.pink {
  color: #FF6B92;
}
section.sec-reality .m-reality-title.blue {
  color: #4FC3CC;
}
section.sec-reality .m-reality-title span.inner {
  display: inline-block;
  position: relative;
  z-index: 0;
}
section.sec-reality .m-reality-title span.inner::after {
  content: "";
  display: block;
  width: calc(100% + 0.6em);
  height: 105%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: -1;
  filter: blur(2px);
  opacity: 0.95;
  border-radius: 999px;
}
section.sec-reality .m-reality-title span.inner span {
  position: relative;
  z-index: 2;
}
section.sec-reality div.reality-cont {
  position: relative;
  margin-top: 5%;
  padding-top: 15%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont {
    margin-top: 40px;
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty {
    margin: auto;
    margin-top: 85px;
    max-width: 1360px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont.penalty {
    margin: auto;
    margin-top: 145px;
    max-width: 1360px;
  }
}
section.sec-reality div.reality-cont.penalty div.star-bg {
  position: absolute;
  pointer-events: none;
  display: none;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg {
    display: block;
  }
}
section.sec-reality div.reality-cont.penalty div.star-bg.star-bg01 {
  display: block;
  width: 18%;
  left: 5%;
  top: 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg01 {
    width: 173px;
    top: -110px;
    left: 50px;
  }
}
section.sec-reality div.reality-cont.penalty div.star-bg.star-bg02 {
  display: block;
  width: 39%;
  left: -15%;
  top: 3%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg02 {
    width: 79px;
    top: 140px;
    left: 50px;
  }
}
section.sec-reality div.reality-cont.penalty div.star-bg.star-bg03 {
  display: block;
  width: 25%;
  left: 0;
  top: 13%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg03 {
    width: 152px;
    top: 265px;
    left: 104px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg04 {
    width: 79px;
    top: 500px;
    left: 104px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg05 {
    width: 173px;
    top: 675px;
    left: 100px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg06 {
    width: 82px;
    top: -80px;
    left: 413px;
  }
}
section.sec-reality div.reality-cont.penalty div.star-bg.star-bg07 {
  display: block;
  width: 33.5%;
  right: -6%;
  top: 0%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg07 {
    width: 182px;
    top: -75px;
    right: 70px;
  }
}
section.sec-reality div.reality-cont.penalty div.star-bg.star-bg08 {
  display: block;
  width: 18%;
  top: 6%;
  right: -1%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg08 {
    width: 85px;
    top: 150px;
    right: 130px;
  }
}
section.sec-reality div.reality-cont.penalty div.star-bg.star-bg09 {
  display: block;
  width: 24%;
  right: -7%;
  top: 14%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg09 {
    width: 100px;
    top: 270px;
    right: 60px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg10 {
    width: 114px;
    top: 410px;
    right: 100px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg11 {
    width: 173px;
    top: 520px;
    right: 23px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.star-bg.star-bg12 {
    width: 114px;
    top: 745px;
    right: 50px;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box {
  width: 90%;
  border: solid 5px #4FC3CC;
  background: #fff;
  padding: 10% 0;
  box-sizing: border-box;
  margin: auto;
  border-radius: 1em;
  position: relative;
  margin-bottom: 8%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box {
    width: 90%;
    max-width: 750px;
    padding: 30px 0 60px;
    margin-top: 40px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box.mr-top {
    margin-top: 10px;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img {
  position: absolute;
  z-index: 1;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img01 {
  width: 26%;
  top: 10%;
  left: -2%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img01 {
    width: 21%;
    top: 65%;
    left: -9%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img01 {
    width: 268px;
    top: 77px;
    left: -200px;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 {
  width: 20%;
  top: 24%;
  right: -7%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 {
    width: 17%;
    top: 32%;
    right: -6%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 {
    width: 174px;
    top: -45px;
    right: -130px;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 span {
  display: block;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 span.onpu01 {
  width: 30%;
  position: absolute;
  left: 40%;
  top: 32%;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 span.onpu01 {
    width: 20%;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 span.onpu02 {
  width: 30%;
  position: absolute;
  left: 42%;
  top: 31%;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 span.onpu02 {
    width: 15%;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img03 {
  width: 30%;
  top: 81%;
  left: -8%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img03 {
    width: 20%;
    top: 74%;
    left: -8%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img03 {
    width: 216px;
    top: 145px;
    left: -185px;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box h4 {
  font-size: 8vw;
  font-weight: 800;
  line-height: 1.4em;
  text-align: center;
  color: #4FC3CC;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box h4 {
    font-size: 40px;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box h4 .small {
  color: #231815;
  font-size: 0.7em;
  margin-left: 0.3em;
}
section.sec-reality div.reality-cont.penalty div.penalty-box h4 .red {
  display: inline-block;
  position: relative;
  z-index: 0;
  color: #FFFFA1;
  padding: 0 0 0 0.4em;
}
section.sec-reality div.reality-cont.penalty div.penalty-box h4 .red::after {
  content: "";
  display: block;
  width: 100%;
  height: 90%;
  position: absolute;
  top: 6%;
  left: 0;
  background: #DD0000;
  z-index: -1;
  transform: translate(0, -50%) scaleX(0);
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box h4 .red::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #DD0000;
    z-index: -1;
    transform: translate(0, 0%) scaleX(0);
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box h4 .red.red02::after {
  width: 104%;
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl {
  margin-top: 8%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl {
    width: 76.8%;
    margin: 22px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt {
  text-align: center;
  /*						border: solid 1px #000;*/
  position: relative;
  letter-spacing: 0;
  font-size: 3.73vw;
  line-height: 1.7em;
  width: 80%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dt {
    width: 50%;
    margin: 0;
    font-size: 16px;
    line-height: 1.62em;
    padding: 1em 0;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt::after, section.sec-reality div.reality-cont.penalty div.penalty-box dl dt::before {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  position: absolute;
  left: 50%;
  background: #fff;
  width: 75%;
  z-index: 1;
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt::after {
  top: 0;
  transform: translate(-50%, -50%);
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt::before {
  bottom: 0;
  transform: translate(-50%, 50%);
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt span {
  display: block;
  position: relative;
  z-index: 2;
  padding: 2% 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dt span {
    padding: 0;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt span.border-box {
  width: 100%;
  height: 100%;
  padding: 0;
  border: solid 1px #000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -48%);
  z-index: 0;
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt.adjustment01 span.border-box {
  height: 96%;
  border: solid 1px #000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -47%);
  z-index: 0;
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dt.adjustment02 span.border-box {
  height: 95%;
  border: solid 1px #000;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -53%);
  z-index: 0;
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu01 {
  width: 78%;
  margin: 0 auto;
  margin-top: 8%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu01 {
    width: 46%;
    margin: 0;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu02 {
  width: 75%;
  margin: 0 auto;
  margin-top: 8%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu02 {
    width: 46%;
    margin: 0;
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu03 {
  width: 68%;
  margin: 0 auto;
  margin-top: 8%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu03 {
    width: 46%;
    margin: 0;
  }
}
section.sec-reality div.reality-cont.penalty div.link-box {
  width: 90%;
  margin: 0 auto;
  background: #D5F1F3;
  border-radius: 1em;
  box-sizing: border-box;
  padding: 5% 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box {
    width: 90%;
    max-width: 750px;
    padding: 30px 0 60px;
    margin-top: 40px;
    padding: 28px 28px 40px 28px;
  }
}
section.sec-reality div.reality-cont.penalty div.link-box h4 {
  width: 90%;
  margin: 0 auto;
  padding: 2% 0;
  font-size: 1.3rem;
  line-height: 1.2em;
  color: #fff;
  text-align: center;
  padding: 0.4em 0;
  border-radius: 0.6em;
  border: solid 2px #fff;
  background: #4FC3CC;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box h4 {
    font-size: 20px;
    margin-bottom: 30px;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner {
    /*						padding: 0 20px;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
  }
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner:last-child {
  margin-bottom: 0;
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner h5 {
  line-height: 1.25em;
  letter-spacing: 0;
  padding-left: 0.6em;
  border-radius: 0%;
  text-align: center;
  box-sizing: border-box;
  margin-top: 5%;
  margin-bottom: 5%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner h5 {
    width: 145px;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 500;
    text-align: left;
    border-left: solid 6px #4FC3CC;
    margin-top: 0;
  }
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner h5 .small {
  font-size: 0.6em;
  display: block;
  line-height: 1.6em;
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul {
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul {
    width: calc(100% - 165px);
  }
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li {
  margin-bottom: 3%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li {
    margin-bottom: 5px;
  }
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a {
  display: block;
  background: #fff;
  color: #000;
  font-weight: 500;
  line-height: 1.4em;
  border-radius: 0.4em;
  padding: 1em 1em 1em 1.2em;
  box-sizing: border-box;
  letter-spacing: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a {
    font-size: 1.72vw;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  }
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a:hover {
    transform: scale(1.02);
    background-color: #4FC3CC;
    color: #FFF;
  }
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a:hover span.arrow {
    background: url(../img/arrow-hover.svg) no-repeat center center #FFF;
  }
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a:hover span.arrow img {
    opacity: 0;
  }
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a:hover span.icon {
    background: url(../img/tab-icon-hover.png) no-repeat center center;
    background-size: contain;
  }
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a:hover span.icon img {
    opacity: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a {
    font-size: 16px;
  }
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a span.icon {
  display: inline-block;
  width: 0.8em;
  transform: translate(0.2em, 0.1em);
}
section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a .arrow {
  display: block;
  background: #4FC3CC;
  border-radius: 50em;
  width: 1em;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.link-box div.link-box-inner ul li a .arrow {
    position: relative;
    width: 1em;
    right: auto;
    top: auto;
    transform: translate(0, 0);
  }
}
section.sec-reality div.reality-cont p.reality-lead {
  text-align: center;
  font-weight: 500;
  margin: auto;
  margin-top: 2em;
  margin-bottom: 8%;
  line-height: 2em;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont p.reality-lead {
    width: 90%;
    font-size: 15px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont p.reality-lead {
    font-size: 16px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-reality div.reality-cont p.reality-lead {
    font-size: 18px;
  }
}
section.sec-reality div.reality-cont div.graph-box {
  background: #fff;
  margin: auto;
  position: relative;
  padding: 10% 0;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box {
    width: 90%;
    max-width: 953px;
    padding: 55px 20px 50px;
    margin-top: 50px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box.mr-top {
    margin-top: 40px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box.graph-box03 {
    padding-bottom: 20px;
  }
}
section.sec-reality div.reality-cont div.graph-box h4 {
  font-size: 5.3vw;
  text-align: center;
  font-weight: 800;
  color: #FF6B92;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box h4 {
    font-size: 2.3vw;
    margin-bottom: 1em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box h4 {
    font-size: 22px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-reality div.reality-cont div.graph-box h4 {
    font-size: 25px;
  }
}
section.sec-reality div.reality-cont div.graph-box h4 .small {
  font-weight: 500;
  font-size: 0.8em;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box h4 .small {
    font-size: 0.6em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box h4 .small {
    font-size: 0.8em;
  }
}
section.sec-reality div.reality-cont div.graph-box span.note {
  font-size: 0.7em;
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt {
  width: 90%;
  margin: 0 auto;
  margin-top: 8%;
  padding: 3.6% 0;
  font-size: 5.3vw;
  font-weight: 800;
  text-align: center;
  background-color: #FF6B92;
  color: #fff;
  border-radius: 12px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt {
    width: 15vw;
    height: 15vw;
    font-size: 1.7vw;
    line-height: 1em;
    position: absolute;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: none;
    color: #FFF;
  }
  section.sec-reality div.reality-cont div.graph-box p.circle-txt::before {
    content: " ";
    display: block;
    width: 110%;
    height: 110%;
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #FF6B92;
    z-index: -1;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt {
    width: 172px;
    height: 172px;
    font-size: 20px;
    line-height: 1.2em;
  }
  section.sec-reality div.reality-cont div.graph-box p.circle-txt::before {
    width: 100%;
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt01 {
    top: -5vw;
    right: -4vw;
  }
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt01::before {
    transform: translate(-50%, -51%);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt01 {
    top: -94px;
    right: -65px;
  }
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt01 .inner {
  margin-top: 0.1em;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt02 {
    bottom: -7vw;
    left: -4vw;
  }
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt02::before {
    transform: translate(-50%, -46%);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt02 {
    bottom: -94px;
    left: -65px;
  }
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt02 .f30 {
  font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt02 .f30 {
    margin-top: 0.4em;
    transform: translate(0.3em, 0);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt02 .f30 {
    margin-top: 0.4em;
    transform: translate(0.3em, 0);
  }
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 {
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 {
    position: absolute;
    /*						padding-top: 0.4em;*/
    top: -7vw;
    right: -4vw;
    line-height: 0.6em;
  }
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03::before {
    transform: translate(-50%, -52%);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 {
    top: -47px;
    right: -85px;
  }
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03::before {
    transform: translate(-50%, -53%);
  }
}
@media screen and (min-width: 1280px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 {
    right: -100px;
  }
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 .f30 {
  font-size: 1.8rem;
  margin-top: 0.1em;
  margin-bottom: 0.2em;
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 span.note {
  font-size: 10px;
  line-height: 1em;
  font-weight: 400;
  transform: translate(0, 0);
  position: absolute;
  right: 5%;
  bottom: 9%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 span.note {
    position: relative;
    right: auto;
    bottom: auto;
  }
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 span.inner:first-child {
  margin-right: 0.6em;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 span.inner:first-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 span.inner {
    line-height: 0.4em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 span.inner {
    line-height: 2.1em;
  }
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt {
  /*&.circle-txt03{*/
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt .f50 {
  display: inline-block;
  font-size: 2em;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt .f50 {
    font-size: 5vw;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt .f50 {
    font-size: 50px;
  }
}
section.sec-reality div.reality-cont div.graph-box p.circle-txt .f30 {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt .f30 {
    font-size: 3vw;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box p.circle-txt .f30 {
    font-size: 30px;
  }
}
section.sec-reality div.reality-cont div.graph-box {
  /*p.circle-txt{*/
}
section.sec-reality div.reality-cont div.graph-box div.graph-img {
  width: 100%;
  overflow-x: scroll;
  box-sizing: border-box;
  margin-top: 5%;
  padding-left: 8%;
  padding-top: 5%;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img {
    padding-left: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img.graph-img02 {
    padding-bottom: 2%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img.graph-img03 {
    padding-bottom: 3%;
  }
}
section.sec-reality div.reality-cont div.graph-box div.graph-img div.js-lottie {
  display: block;
  width: 265%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img div.js-lottie {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img div.js-lottie.smp-block {
    display: none;
  }
}
section.sec-reality div.reality-cont div.graph-box div.graph-img span.graph-caption01 {
  display: block;
  position: absolute;
  left: 10%;
  top: 5%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img span.graph-caption01 {
    width: 18%;
    max-width: 175px;
    left: 67%;
    top: 19.5%;
  }
}
section.sec-reality div.reality-cont div.graph-box div.graph-img span.graph-caption02 {
  display: block;
  position: absolute;
  width: 65%;
  left: 10%;
  top: 0;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img span.graph-caption02 {
    width: 28%;
    max-width: 262px;
    left: 50%;
    top: 96%;
    transform: translate(-50%, -50%);
  }
}
section.sec-reality div.reality-cont div.graph-box div.graph-img span.graph-caption03 {
  display: block;
  position: absolute;
  width: 40%;
  left: 10%;
  top: 0;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img span.graph-caption03 {
    width: 24%;
    max-width: 230px;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont div.graph-box div.graph-img span.graph-caption03 {
    width: 24%;
    max-width: 230px;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
  }
}
section.sec-reality div.reality-cont div.graph-box div.graph-img p.graph-note-txt {
  width: 94%;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: 0;
  margin-top: 5%;
}
section.sec-reality div.reality-cont div.graph-box {
  /*graph-img*/
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont p.graph-note-txt {
    width: 90%;
    max-width: 953px;
    margin: 1em auto 0;
    font-size: 11px;
  }
}
section.sec-reality div.reality-cont p.graph-note-txt a {
  color: #000;
}
section.sec-reality div.reality-cont p.graph-note-txt.right {
  text-align: right;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont p.graph-note-txt.left {
    /*					margin-left: 10%;*/
    margin-top: 2em;
  }
}
section.sec-reality div.reality-cont p.graph-note-txt02 {
  width: 90%;
  margin: 0 auto;
  /*			margin-bottom: 12%;*/
  word-break: break-word;
  font-size: 0.7rem;
  line-height: 1.6em;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont p.graph-note-txt02 {
    max-width: 953px;
    margin-top: 50px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.reality-cont p.graph-note-txt02 {
    max-width: 953px;
    margin-top: 80px;
  }
}
section.sec-reality div.reality-cont p.graph-note-txt02 a {
  color: #000;
}
section.sec-reality div.cooperation-cont {
  width: 90%;
  margin: 0 auto;
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont {
    width: 591px;
    padding: 90px 0 150px;
    margin-top: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.cooperation-cont {
    padding: 90px 0;
  }
}
section.sec-reality div.cooperation-cont h4 {
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 1.8em;
  border-bottom: solid 1px #000;
  padding-bottom: 1em;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont h4 {
    font-size: 20px;
  }
}
section.sec-reality div.cooperation-cont p.cooperation-txt {
  font-weight: 500;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont p.cooperation-txt {
    font-size: 18px;
  }
}
section.sec-reality div.cooperation-cont div.cooperation-box-inner {
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  padding: 10%;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner {
    padding: 37px 30px;
    margin-top: 45px;
  }
}
section.sec-reality div.cooperation-cont div.cooperation-box-inner div.character-img {
  display: block;
  width: 66%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.character-img {
    margin: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 203px;
    right: -60px;
    bottom: -130px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.character-img {
    right: -170px;
    bottom: 10px;
  }
}
section.sec-reality div.cooperation-cont div.cooperation-box-inner p {
  font-size: 3.7vw;
  line-height: 2em;
  text-align: justify;
  word-break: break-all;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner p {
    font-size: 14px;
  }
}
section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box {
    margin-top: 20px;
  }
}
section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a {
  display: block;
  width: 100%;
  margin: 0 auto;
  margin-top: 3%;
  padding: 2% 0;
  padding: 0.4em 1em;
  font-size: 3.2vw;
  font-weight: 500;
  color: #000;
  background: #fff;
  border-radius: 0.8em;
  box-sizing: border-box;
  letter-spacing: 0;
  border: solid 1px #E6E6E6;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  }
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a:hover {
    transform: scale(1.02);
    background-color: #4FC3CC;
    color: #FFF;
  }
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a:hover span.arrow {
    background: url(../img/arrow-hover.svg) no-repeat center center #FFF;
  }
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a:hover span.arrow img {
    opacity: 0;
  }
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a:hover span.icon {
    background: url(../img/tab-icon-hover.png) no-repeat center center;
    background-size: contain;
  }
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a:hover span.icon img {
    opacity: 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a:nth-of-type(1) {
    width: 288px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a:nth-of-type(2) {
    width: 229px;
  }
}
section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a span.icon {
  display: inline-block;
  width: 0.8em;
  transform: translate(0.2em, 0.1em);
}
section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a .arrow {
  display: block;
  background: #999999;
  border-radius: 50em;
  width: 1em;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  section.sec-reality div.cooperation-cont div.cooperation-box-inner div.link-box a .arrow {
    width: 1em;
  }
}

section.sec-zero {
  width: 90%;
  margin: 0 auto;
  margin-top: 12%;
  padding: 10% 0;
  background: url(../img/zero-bg_sp.png) no-repeat center top #FF6B92;
  border-radius: 30px;
}
@media screen and (min-width: 768px) {
  section.sec-zero {
    background-image: url(../img/zero-bg_pc.png);
    background-size: cover;
    background-position: top;
    width: 90%;
    max-width: 1150px;
    border-radius: 2.5em;
    margin-top: 0;
    padding: 50px 0 60px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-zero {
    padding: 100px 0 130px;
  }
}
section.sec-zero h2 {
  font-size: 8vw;
  text-align: center;
  font-weight: 900;
  color: #fff;
  margin-bottom: 1em;
  letter-spacing: 0;
  line-height: 1.2em;
}
@media screen and (min-width: 768px) {
  section.sec-zero h2 {
    font-size: 37px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-zero h2 {
    font-size: 45px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-zero h2 {
    font-size: 50px;
  }
}
section.sec-zero div.zero-box {
  position: relative;
  padding: 0 10%;
}
@media screen and (min-width: 768px) {
  section.sec-zero div.zero-box {
    width: 90%;
    max-width: 800px;
    margin: auto;
    padding: 0;
  }
}
section.sec-zero div.zero-box div.txt-wrap h3 {
  font-size: 4.8vw;
  font-weight: 900;
  line-height: 1.6em;
  color: #00B2BF;
  margin-bottom: 0.6em;
}
@media screen and (min-width: 768px) {
  section.sec-zero div.zero-box div.txt-wrap h3 {
    font-size: 3.2vw;
    line-height: 1.32em;
    padding-left: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-zero div.zero-box div.txt-wrap h3 {
    font-size: 35px;
  }
}
section.sec-zero div.zero-box div.txt-wrap p {
  text-align: justify;
  font-size: 3.7vw;
  line-height: 2em;
}
@media screen and (min-width: 768px) {
  section.sec-zero div.zero-box div.txt-wrap p {
    width: 61%;
    font-size: 15px;
    margin: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-zero div.zero-box div.txt-wrap p {
    font-size: 18px;
  }
}
section.sec-zero div.zero-box div.zero-img {
  position: absolute;
  top: -6%;
  right: 6%;
  width: 30%;
}
@media screen and (min-width: 768px) {
  section.sec-zero div.zero-box div.zero-img {
    top: -10px;
    right: 0;
    width: 30%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-zero div.zero-box div.zero-img {
    top: -10px;
    right: 0;
    width: 34%;
  }
}

section.sec-message {
  width: 90%;
  margin: auto;
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  section.sec-message {
    padding: 100px 0 0;
    max-width: 876px;
    margin-top: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message {
    padding: 150px 0 0;
  }
}
section.sec-message h3 {
  line-height: 1.4em;
  text-align: center;
  color: #FF6B92;
  letter-spacing: 0;
  margin: 8% 0 5%;
}
@media screen and (min-width: 768px) {
  section.sec-message h3 {
    font-size: 40px;
    margin: 20px 0 20px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message h3 {
    font-size: 40px;
    margin: 80px 0 37px;
  }
}
section.sec-message div.video-wrap {
  margin: auto;
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  section.sec-message div.video-wrap {
    width: 90%;
    max-width: 690px;
    margin-bottom: 25px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.video-wrap {
    margin-bottom: 75px;
  }
}
section.sec-message div.video-wrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(7px, 7px);
  border-radius: 1em;
  background: #8CF9E4;
  z-index: -1;
}
section.sec-message div.video-wrap .video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 1em;
  overflow: hidden;
}
section.sec-message div.video-wrap .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
section.sec-message div.cast-box-wrap {
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  section.sec-message div.cast-box-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.cast-box-wrap {
    justify-content: center;
    -moz-column-gap: 7%;
         column-gap: 7%;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-message div.cast-box-wrap {
    -moz-column-gap: 120px;
         column-gap: 120px;
  }
}
section.sec-message div.cast-box-wrap div.cast-box {
  margin-top: 10%;
}
@media screen and (min-width: 768px) {
  section.sec-message div.cast-box-wrap div.cast-box {
    width: 47%;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.cast-box-wrap div.cast-box {
    width: 42%;
  }
}
section.sec-message div.cast-box-wrap div.cast-box div.cast-img {
  width: 57%;
  margin: 0 auto;
  margin-bottom: 6%;
}
@media screen and (min-width: 768px) {
  section.sec-message div.cast-box-wrap div.cast-box div.cast-img {
    width: 100%;
    margin-bottom: 0;
  }
}
section.sec-message div.cast-box-wrap div.cast-box p.name-txt {
  font-size: 1.125rem;
  text-align: center;
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  section.sec-message div.cast-box-wrap div.cast-box p.name-txt {
    font-size: 18px;
    margin: 1.4em 0 1em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.cast-box-wrap div.cast-box p.name-txt {
    font-size: 20px;
  }
}
section.sec-message div.cast-box-wrap div.cast-box p.body-txt {
  font-size: 3.7vw;
  line-height: 1.8em;
  margin-top: 5%;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  section.sec-message div.cast-box-wrap div.cast-box p.body-txt {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.75em;
    margin-top: 0;
  }
  section.sec-message div.cast-box-wrap div.cast-box p.body-txt.takamura {
    letter-spacing: -0.02em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-message div.cast-box-wrap div.cast-box p.body-txt {
    font-size: 16px;
  }
}

section.sec-making {
  margin-top: 15%;
  padding-bottom: 10%;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  section.sec-making {
    width: 100vw;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 0;
    padding: 80px 0 55px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-making {
    padding: 80px 0 95px;
  }
}
section.sec-making h2 {
  margin-bottom: 5%;
}
section.sec-making div.making-slide-wrap {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-making div.making-slide-wrap {
    margin-top: 11vw;
    overflow: visible;
  }
}
section.sec-making div.making-slide-wrap div.swiper-slide picture {
  display: block;
  border: solid 6px #ABE1E9;
  box-sizing: border-box;
  border-radius: 13px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s;
}
@media screen and (min-width: 768px) {
  section.sec-making div.making-slide-wrap div.swiper-slide {
    transition: transform 0.3s;
    /*				padding: 0 4.4vw;*/
    transform-origin: center center;
    box-sizing: border-box;
    transform-origin: bottom;
  }
  section.sec-making div.making-slide-wrap div.swiper-slide picture {
    border: solid 6px #FF9BC7;
  }
}
@media screen and (min-width: 768px) {
  section.sec-making div.making-slide-wrap div.swiper-slide-active {
    transform: scale(1.2);
  }
  section.sec-making div.making-slide-wrap div.swiper-slide-active picture {
    border: solid 6px #ABE1E9;
  }
}
section.sec-making div.making-slide-wrap div.swiper-button-prev {
  left: -2%;
}
@media screen and (min-width: 768px) {
  section.sec-making div.making-slide-wrap div.swiper-button-prev {
    left: 20.5%;
  }
}
section.sec-making div.making-slide-wrap div.swiper-button-next {
  right: -2%;
}
@media screen and (min-width: 768px) {
  section.sec-making div.making-slide-wrap div.swiper-button-next {
    right: 20.5%;
  }
}
section.sec-making div.making-slide-wrap div.swiper-button-prev, section.sec-making div.making-slide-wrap div.swiper-button-next {
  background: #B3B3B3;
  border-radius: 50em;
  top: auto;
  bottom: 42%;
  margin: 0;
  border: solid 3px #fff;
  z-index: 1;
  width: 20px;
  height: 20px;
}
@media screen and (min-width: 768px) {
  section.sec-making div.making-slide-wrap div.swiper-button-prev, section.sec-making div.making-slide-wrap div.swiper-button-next {
    width: 40px;
    height: 40px;
    bottom: 48%;
  }
}
section.sec-making div.making-slide-wrap div.swiper-button-prev img, section.sec-making div.making-slide-wrap div.swiper-button-next img {
  position: relative;
  z-index: 2;
  background: #B3B3B3;
  border-radius: 50em;
}
@media screen and (min-width: 768px) {
  section.sec-making div.making-slide-wrap div.swiper-button-prev::before, section.sec-making div.making-slide-wrap div.swiper-button-next::before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50em;
    background: #fff;
    z-index: -1;
  }
}
section.sec-making div.making-slide-wrap div.swiper-button-prev::after, section.sec-making div.making-slide-wrap div.swiper-button-next::after {
  content: none;
}
section.sec-making p.note-txt {
  display: block;
  width: 90%;
  margin: 0 auto;
  margin-top: 1em;
  font-size: 3vw;
  letter-spacing: 0;
  line-height: 1.4em;
}
@media screen and (min-width: 768px) {
  section.sec-making p.note-txt {
    font-size: 11px;
    text-align: center;
    margin-top: 55px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-making p.note-txt {
    font-size: 11px;
    text-align: center;
    margin-top: 95px;
  }
}

div.pink-bg {
  background-color: #FADCE9;
  border-radius: 50px;
}

section.sec-can {
  padding: 15vw 0;
}
@media screen and (min-width: 768px) {
  section.sec-can {
    padding: 60px 0;
    margin-top: 60px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-can {
    padding: 153px 0;
    margin-top: 70px;
  }
}
section.sec-can div.sec-can-inner {
  margin: auto;
  width: 89.2%;
}
@media screen and (min-width: 768px) {
  section.sec-can div.sec-can-inner {
    width: 90%;
    max-width: 1150px;
  }
}
section.sec-can p.title-ja {
  line-height: 1.2em;
  margin-top: 1em;
  text-shadow: none;
  text-align: center;
  color: #000;
  letter-spacing: 0;
  font-weight: 500;
  font-family: "M PLUS Rounded 1c", sans-serif;
  margin-bottom: 2em;
}
@media screen and (min-width: 768px) {
  section.sec-can p.title-ja {
    font-size: 20px;
  }
}
section.sec-can div.can-cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12vw;
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont {
    margin-bottom: 47px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont.can-cont02 div.txt-wrap {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
section.sec-can div.can-cont.can-cont02 div.txt-inner {
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont.can-cont02 div.txt-inner {
    width: 70%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont.can-cont02 div.kumaru-img {
    width: 25%;
  }
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.can-img {
    width: 40%;
  }
}
section.sec-can div.can-cont div.txt-wrap {
  position: relative;
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.txt-wrap {
    width: 55%;
  }
}
section.sec-can div.can-cont div.txt-wrap .number {
  position: absolute;
  width: 28%;
  top: 2vw;
  right: 0;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.txt-wrap .number {
    width: 120px;
  }
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.txt-wrap .number.number01 {
    top: 26px;
    right: 0;
  }
}
section.sec-can div.can-cont div.txt-wrap .number.number02 {
  top: -2.4vw;
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.txt-wrap .number.number02 {
    top: 26px;
    right: 0;
  }
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.txt-wrap .number.number03 {
    top: 10px;
    right: 0;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-can div.can-cont div.txt-wrap .number.number03 {
    right: auto;
    left: 370px;
  }
}
section.sec-can div.can-cont div.txt-wrap h3 {
  color: #FF6B92;
  text-align: center;
  font-weight: 900;
  line-height: 1.72em;
  margin-bottom: 0.7em;
  letter-spacing: 0;
  font-size: 4.7vw;
  margin: 1.2em 0;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.txt-wrap h3 {
    font-weight: 800;
    text-align: left;
    font-size: 20px;
    margin: 0 0 0.7em;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-can div.can-cont div.txt-wrap h3 {
    font-size: 23px;
  }
}
@media screen and (min-width: 1280px) {
  section.sec-can div.can-cont div.txt-wrap h3 {
    font-size: 25px;
  }
}
section.sec-can div.can-cont div.txt-wrap p {
  line-height: 2.12em;
  letter-spacing: 0;
  font-size: 3.73vw;
  text-align: justify;
  word-spacing: normal;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.sec-can div.can-cont div.txt-wrap p {
    font-size: 13px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-can div.can-cont div.txt-wrap p {
    font-size: 14px;
  }
}

section.sec-archives .m-title {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
section.sec-archives a {
  display: block;
  margin: auto;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  border-radius: 10vw;
  line-height: 0;
  margin: 10vw auto 0;
  width: 89.2%;
  height: 60vw;
}
@media screen and (min-width: 768px) {
  section.sec-archives a {
    width: 90%;
    max-width: 1150px;
    height: 332px;
    border-radius: 36px;
    margin-top: 48px;
  }
}
@media screen and (min-width: 1000px) {
  section.sec-archives a {
    margin-top: 30px;
  }
}
section.sec-archives a video {
  width: 140%;
}
@media screen and (min-width: 768px) {
  section.sec-archives a video {
    width: 100%;
  }
}
section.sec-archives a p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 79.6%;
}
@media screen and (min-width: 768px) {
  section.sec-archives a p {
    width: 461px;
  }
}

footer {
  padding: 10vw 0 15vw;
}
@media screen and (min-width: 768px) {
  footer {
    padding: 135px 0 130px;
  }
}
footer a.ft-logo {
  display: block;
  width: 55%;
  margin: auto;
}
@media screen and (min-width: 768px) {
  footer a.ft-logo {
    width: 339px;
  }
}
footer p {
  text-align: center;
  line-height: 1.7em;
  font-size: 2.93vw;
  margin-top: 1.4em;
}
@media screen and (min-width: 768px) {
  footer p {
    font-size: 13px;
    margin-top: 1.8em;
  }
}

/******************************/
.sec-story-inner h2.ani {
  font-size: 2.6rem;
  margin-bottom: 8%;
}
@media screen and (min-width: 768px) {
  .sec-story-inner h2.ani {
    font-size: 3.1rem;
    margin-bottom: 0;
  }
}
.sec-story-inner h2.ani span {
  display: inline-block;
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
  opacity: 0;
}
.sec-story-inner h2.ani.animation span {
  animation: contens-titile-ani 0.6s ease forwards;
  animation-delay: calc(0.2s + var(--i) * 0.1s);
}
.sec-story-inner {
  /*h2.ani*/
}
.sec-story-inner h3.story-copy.ani {
  transform: translate(0, 50%) scale(2);
  opacity: 0;
}
.sec-story-inner h3.story-copy.animation {
  animation: fade-up-ani01 1.2s 0.6s ease forwards;
}
.sec-story-inner h3.movie-txt.ani span::after {
  transform-origin: left center;
  transform: scaleX(0);
}
.sec-story-inner h3.movie-txt.animation span::after {
  animation: curtain-ani01 0.8s 0.2s ease forwards;
}
.sec-story-inner {
  /*h3.movie-txt{*/
}
.sec-story-inner p.ani {
  opacity: 0;
}
.sec-story-inner p.ani.animation {
  animation: fadein-txt 1s 0.6s cubic-bezier(0, 0.99, 0.48, 0.79) forwards;
}

section.sec-reality h2.ani {
  font-size: 8vw;
}
@media screen and (min-width: 768px) {
  section.sec-reality h2.ani {
    font-size: 50px;
  }
}
section.sec-reality h2.ani span {
  display: inline-block;
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
}
section.sec-reality h2.ani.animation span {
  animation: contens-titile-ani 0.6s ease forwards;
  animation-delay: calc(0.2s + var(--i) * 0.1s);
}
section.sec-reality p.ani {
  opacity: 0;
}
section.sec-reality p.ani.animation {
  animation: fadein-txt 1s 0.6s cubic-bezier(0, 0.99, 0.48, 0.79) forwards;
}
section.sec-reality p.circle-txt.circle-txt02.ani,
section.sec-reality p.circle-txt.circle-txt01.ani {
  transform-origin: center center;
  transform: translate(0, 0%) scale(0);
  opacity: 0;
}
section.sec-reality p.circle-txt.circle-txt02.animation,
section.sec-reality p.circle-txt.circle-txt01.animation {
  animation: scale-up-ani01 0.6s 0.2s ease forwards;
}

.sec-can h2.ani {
  font-size: 2.6rem;
  margin-bottom: 8%;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
  .sec-can h2.ani {
    font-size: 3.1rem;
    margin-bottom: 0;
  }
}
.sec-can h2.ani span {
  display: inline-block;
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
  opacity: 0;
}
.sec-can h2.ani.animation span {
  animation: contens-titile-ani 0.6s ease forwards;
  animation-delay: calc(0.2s + var(--i) * 0.1s);
}
.sec-can {
  /*h2.ani*/
}

/*カウントアップ*/
.count-up-slot {
  display: inline-block;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  vertical-align: -0.16em;
  white-space: nowrap;
}

section.sec-reality div.reality-cont div.graph-box p.circle-txt.circle-txt03 .count-up-slot {
  vertical-align: -0.4em;
}

section.sec-reality .m-reality-title span.inner span {
  display: inline-block;
  transform-origin: center center;
  transform: translate(-20%, 0) scale(0.2);
  opacity: 0;
}
section.sec-reality .m-reality-title span.inner.animation span {
  animation: contens-subtitile-ani 0.4s ease forwards;
  animation-delay: calc(0.2s + var(--i) * 0.1s);
}

.sec-making h2.ani span,
.sec-message h2.ani span {
  display: inline-block;
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
}
.sec-making h2.ani.animation span,
.sec-message h2.ani.animation span {
  animation: contens-titile-ani 0.6s ease forwards;
  animation-delay: calc(0.2s + var(--i) * 0.1s);
}
.sec-making,
.sec-message {
  /*h2.ani*/
}

/*カウントアップ*/
.count-up-slot .digit-wrap {
  display: inline-block;
  width: 0.68em;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  vertical-align: top;
}
.count-up-slot .digit-reel {
  display: block;
  transform: translateY(0);
  will-change: transform;
}
.count-up-slot .digit {
  display: block;
  height: 1em;
  line-height: 1em;
  text-align: center;
}

/**/
@keyframes contens-titile-ani {
  0% {
    transform-origin: center center;
    transform: translate(0, 0) scale(0);
  }
  60% {
    transform-origin: center center;
    transform: translate(0, 0) scale(1.8);
    opacity: 1;
  }
  100% {
    transform-origin: center center;
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes contens-subtitile-ani {
  0% {
    transform-origin: center center;
    transform: translate(-20%, 0) scale(0.2);
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes fade-up-ani01 {
  0% {
    transform: translate(0, 50%) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0%) scale(1);
    opacity: 1;
  }
}
@keyframes fadein-txt {
  0% {
    opacity: 0;
    transform: translate(0, 25%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0px);
  }
}
@keyframes curtain-ani01 {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
@keyframes scale-up-ani01 {
  0% {
    transform-origin: center center;
    transform: translate(0, 0%) scale(0);
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: translate(0, 0%) scale(1);
    opacity: 1;
  }
}
/********/
div.penalty-box h4 span.fadein.ani {
  opacity: 0;
}
div.penalty-box h4 span.fadein.animation {
  opacity: 1;
  transition: opacity 0.4s;
  transition-delay: 1.6s;
}
div.penalty-box h4 span.red::after {
  transform-origin: left center;
  transform: scaleX(0);
}
div.penalty-box h4 span.red.ani {
  transform: translate(0, -100%);
}
div.penalty-box h4 span.red.animation {
  animation: slide-down-ani01 0.4s 1.2s ease forwards;
}
div.penalty-box h4 span.red.animation::after {
  animation: curtain-ani01 0.8s 0.4s ease forwards;
}

@keyframes slide-down-ani01 {
  0% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
/**イラストアニメーション**/
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img01.ani {
  transform: translate(-40%, -20%) scale(0.8);
  opacity: 0;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img01.animation {
  animation: illust-ani01 0.6s 0.2s ease forwards;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02.ani {
  transform: translate(40%, 0%) scale(0.8);
  opacity: 0;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02.animation {
  animation: illust-ani02 0.6s 0.2s ease forwards;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 span.onpu01 {
  animation: illust-ani02-onpu01 8s 2s ease infinite;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img02 span.onpu02 {
  animation: illust-ani02-onpu02 9s 3s ease infinite;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img03.ani {
  transform: translate(-20%, 0%) scale(0.8);
  opacity: 0;
}
section.sec-reality div.reality-cont.penalty div.penalty-box div.penalty-img.penalty-img03.animation {
  animation: illust-ani03 0.6s 0.2s ease forwards;
}
section.sec-reality {
  /**/
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu03.ani,
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu02.ani,
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu01.ani {
  opacity: 0;
  transform: translate(0, -20%);
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu03.ani,
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu02.ani,
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu01.ani {
    transform: translate(-30%, 0);
  }
}
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu03.animation,
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu02.animation,
section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu01.animation {
  animation: batsu-ani01_sp 0.6s 0.2s ease forwards;
}
@media screen and (min-width: 768px) {
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu03.animation,
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu02.animation,
  section.sec-reality div.reality-cont.penalty div.penalty-box dl dd.batu01.animation {
    animation: batsu-ani01_pc 0.6s 0.2s ease forwards;
  }
}

@keyframes batsu-ani01_sp {
  0% {
    transform: translate(0, -20%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0%);
    opacity: 1;
  }
}
@keyframes batsu-ani01_pc {
  0% {
    transform: translate(-30%, 0%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0%);
    opacity: 1;
  }
}
@keyframes batsu-ani02_sp {
  0% {
    transform: translate(0, -20%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0%);
    opacity: 1;
  }
}
@keyframes illust-ani01 {
  0% {
    transform: translate(-40%, -20%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
}
@keyframes illust-ani02 {
  0% {
    transform: translate(40%, 0%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
}
@keyframes illust-ani02-onpu01 {
  0% {
    transform: translate(0%, 0%) scale(0);
    opacity: 0;
  }
  8% {
    transform: translate(120%, -70%) scale(0.8);
    opacity: 1;
  }
  20% {
    transform: translate(120%, -70%) scale(0.8);
    opacity: 0;
  }
  36% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0;
  }
  50% {
    transform: translate(100%, 70%) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(100%, 70%) scale(1);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0;
  }
}
@keyframes illust-ani02-onpu02 {
  0% {
    transform: translate(0%, 0%) scale(0);
    opacity: 0;
  }
  8% {
    transform: translate(-120%, 70%) scale(0.8);
    opacity: 1;
  }
  20% {
    transform: translate(-120%, 70%) scale(0.8);
    opacity: 0;
  }
  36% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0;
  }
  50% {
    transform: translate(-100%, -70%) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(-100%, -70%) scale(1);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0;
  }
}
@keyframes illust-ani03 {
  0% {
    transform: translate(-20%, 0%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
  }
}
/**イラストアニメーション*ここまで*/
section.sec-zero.ani {
  transform-origin: center center;
  transform: scale(0.6);
  opacity: 1;
}
section.sec-zero.animation {
  transform-origin: center center;
  animation: sec-zero-ani 1s 0.2s ease forwards;
}

div.zero-img.ani {
  transform: translate(-50%, 0) rotate(-35deg) scale(0.4);
  opacity: 0;
}
div.zero-img.animation {
  animation: flag-ani 0.6s 0.8s ease forwards;
}

@keyframes sec-zero-ani {
  0% {
    transform-origin: center center;
    transform: scale(0.6);
    opacity: 1;
  }
  100% {
    transform-origin: center center;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes flag-ani {
  0% {
    transform: translate(-50%, 0) rotate(-35deg) scale(0.4);
    opacity: 0;
  }
  100% {
    transform: translate(5%, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}
/**/
section.sec-can div.can-cont div.can-img.ani {
  transform: scale(1.2);
}
section.sec-can div.can-cont div.can-img.ani.animation {
  animation: can-img-ani01 1s 0.6s cubic-bezier(0, 0.99, 0.48, 0.79) forwards;
}
section.sec-can div.can-cont div.txt-wrap h3.ani {
  opacity: 0;
}
section.sec-can div.can-cont div.txt-wrap h3.ani.animation {
  animation: fadein-txt 1s 0.6s cubic-bezier(0, 0.99, 0.48, 0.79) forwards;
}
section.sec-can div.can-cont div.txt-wrap p.ani {
  opacity: 0;
}
section.sec-can div.can-cont div.txt-wrap p.ani.animation {
  animation: fadein-txt 1s 0.6s cubic-bezier(0, 0.99, 0.48, 0.79) forwards;
}

@keyframes can-img-ani01 {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: translate(0, 0%) scale(1);
  }
}
div.fix-spblock {
  display: block;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 2%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
div.fix-spblock.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 9;
}
@media screen and (min-width: 768px) {
  div.fix-spblock {
    display: none !important;
  }
}
div.fix-spblock ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5%;
}
div.fix-spblock ul li {
  margin-right: 1%;
}
div.fix-spblock ul li.to-movie {
  width: 30%;
  min-width: 112px;
}
div.fix-spblock ul li.to-x {
  width: 8%;
  min-width: 30px;
}
div.fix-spblock ul li.to-fb {
  width: 8%;
  min-width: 30px;
}
div.fix-spblock ul li a {
  display: block;
  filter: drop-shadow(7px 7px 5px rgba(255, 82, 130, 0.75));
}

html {
  scroll-behavior: smooth;
}/*# sourceMappingURL=style.css.map */