@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese");

:root {
  --color-primary_heavy: #B72222;
  --color-primary_base: #AF1919;
  --color-primary_light: #D12424;
  --inner-padding: 1.6rem;
  --spacer-small: 1.2rem;
  --spacer-medium: 1.6rem;
  --spacer-large: 2rem;
  --font-size_top-title: 1.6rem;
  --font-size_top-text: 1.2rem;
  --font-size_top-subtext: 1.1rem;
  --box-border: 0.45rem;
  /* KV02アニメーションタイミング */
  --kv02-reveal-delay: 2.0s;
  --kv02-reveal-delay2: 2.5s;
}

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
}

body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
}

#contents_block div,
#contents_block span,
#contents_block applet,
#contents_block object,
#contents_block iframe,
#contents_block h1,
#contents_block h2,
#contents_block h3,
#contents_block h4,
#contents_block h5,
#contents_block h6,
#contents_block p,
#contents_block blockquote,
#contents_block pre,
#contents_block a,
#contents_block abbr,
#contents_block acronym,
#contents_block address,
#contents_block big,
#contents_block cite,
#contents_block code,
#contents_block del,
#contents_block dfn,
#contents_block em,
#contents_block font,
#contents_block img,
#contents_block ins,
#contents_block kbd,
#contents_block q,
#contents_block s,
#contents_block samp,
#contents_block small,
#contents_block strike,
#contents_block strong,
#contents_block sub,
#contents_block sup,
#contents_block tt,
#contents_block var,
#contents_block b,
#contents_block u,
#contents_block i,
#contents_block center,
#contents_block dl,
#contents_block dt,
#contents_block dd,
#contents_block ol,
#contents_block ul,
#contents_block li,
#contents_block fieldset,
#contents_block form,
#contents_block label,
#contents_block legend,
#contents_block table,
#contents_block caption,
#contents_block tbody,
#contents_block tfoot,
#contents_block thead,
#contents_block tr,
#contents_block th,
#contents_block td,
#contents_block section,
#contents_block article,
#contents_block aside,
#contents_block hgroup,
#contents_block header,
#contents_block footer,
#contents_block nav,
#contents_block dialog,
#contents_block figure,
#contents_block menu,
#contents_block video,
#contents_block audio,
#contents_block mark,
#contents_block time,
#contents_block canvas,
#contents_block details {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

@media screen and (max-width: 640px) {

  #contents_block .contents_background,
  #contents_block .bg-stars,
  #contents_block .bg-slider {
    display: none;
  }

  #contents_block div,
  #contents_block span,
  #contents_block applet,
  #contents_block object,
  #contents_block iframe,
  #contents_block h1,
  #contents_block h2,
  #contents_block h3,
  #contents_block h4,
  #contents_block h5,
  #contents_block h6,
  #contents_block p,
  #contents_block blockquote,
  #contents_block pre,
  #contents_block a,
  #contents_block abbr,
  #contents_block acronym,
  #contents_block address,
  #contents_block big,
  #contents_block cite,
  #contents_block code,
  #contents_block del,
  #contents_block dfn,
  #contents_block em,
  #contents_block font,
  #contents_block img,
  #contents_block ins,
  #contents_block kbd,
  #contents_block q,
  #contents_block s,
  #contents_block samp,
  #contents_block small,
  #contents_block strike,
  #contents_block strong,
  #contents_block sub,
  #contents_block sup,
  #contents_block tt,
  #contents_block var,
  #contents_block b,
  #contents_block u,
  #contents_block i,
  #contents_block center,
  #contents_block dl,
  #contents_block dt,
  #contents_block dd,
  #contents_block ol,
  #contents_block ul,
  #contents_block li,
  #contents_block fieldset,
  #contents_block form,
  #contents_block label,
  #contents_block legend,
  #contents_block table,
  #contents_block caption,
  #contents_block tbody,
  #contents_block tfoot,
  #contents_block thead,
  #contents_block tr,
  #contents_block th,
  #contents_block td,
  #contents_block section,
  #contents_block article,
  #contents_block aside,
  #contents_block hgroup,
  #contents_block header,
  #contents_block footer,
  #contents_block nav,
  #contents_block dialog,
  #contents_block figure,
  #contents_block menu,
  #contents_block video,
  #contents_block audio,
  #contents_block mark,
  #contents_block time,
  #contents_block canvas,
  #contents_block details {
    letter-spacing: 0;
  }
}

#contents_block section,
#contents_block article,
#contents_block aside,
#contents_block hgroup,
#contents_block header,
#contents_block footer,
#contents_block main,
#contents_block nav,
#contents_block dialog,
#contents_block figure,
#contents_block figcaption {
  display: block;
}

#contents_block {
  position: relative;
  text-align: center;
  line-height: 1.6;
  font-size: 1.4rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

#contents_block .contents_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: -1;
  background-image: url("../images/pc_bg.jpg");/*TODO 要チェック*/
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#contents_block .bg-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#contents_block .bg-slider__img01 {
  position: absolute;
  top: 68%;
  width: auto;
  height: 8%;
  animation: bgSlide01 120s linear infinite -80s;
}

#contents_block .bg-slider__img02 {
  position: absolute;
  top: 26%;
  width: auto;
  height: 7%;
  animation: bgSlide02 120s linear infinite -20s;
}

@keyframes bgSlide01 {
  0%   { left: 100%; }
  100% { left: -10%; }
}

@keyframes bgSlide02 {
  0%   { left: 100%; }
  100% { left: -8%; }
}

#contents_block .bg-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* left系: mainの左端(50% - 320px)から左方向にオフセット */
/* right系: mainの右端(50% - 320px)から右方向にオフセット */

#contents_block .bg-stars__white01 {
  position: absolute;
  top: 36%;
  left: calc(50% - 320px - 30%);
  width: auto;
  height: 30%;
  animation: twinkle 2s ease-in-out infinite;
}

#contents_block .bg-stars__white02 {
  position: absolute;
  top: 57%;
  right: calc(50% - 320px - 22%);
  width: auto;
  height: 30%;
  animation: twinkle 2s ease-in-out infinite 1.0s;
}

#contents_block .bg-stars__yellow01 {
  position: absolute;
  top: 2%;
  right: calc(50% - 320px - 35%);
  width: auto;
  height: 25%;
  animation: twinkle 2s ease-in-out infinite 0.5s;
}

#contents_block .bg-stars__yellow02 {
  position: absolute;
  top: 5%;
  left: calc(50% - 320px - 24%);
  width: auto;
  height: 35%;
  animation: twinkle 2s ease-in-out infinite 1.5s;
}

#contents_block .contents_main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  flex: 1;
  display: flex;
  flex-direction: column;

  /* KVを画面いっぱいに（残りの高さを埋める） */
  .kv {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .kv__inner{
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .kv__aspect{
      position: relative;
      width: 100%;
      max-height: 100%;
      aspect-ratio: 750 / 1408;
    }

    .kv__01{
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url("../images/kv_01.png") center / contain no-repeat;
      /* ふきだし：2秒間隔でぴょこっと */
      .kv01__fuki{
        position: absolute;
        width: 70%;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        animation: fukiBounce 3.0s ease-in-out infinite;
      }

      /* 変身：黄色い波紋が広がる */
      .kv01__henshin-wrap{
        position: absolute;
        width: 35%;
        top: 67%;
        left: 70%;
        transform: translateX(-50%);
        overflow: visible;
      }

      .kv01__henshin{
        position: relative;
        width: 100%;
        z-index: 1;
      }

      .kv01__ripple{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(254, 237, 130, 1.0) 0%, rgba(254, 237, 130, 0.5) 75%, rgba(254, 237, 130, 0) 10%);
        transform: translate(-50%, -50%) scale(0.3);
        animation: rippleExpand 2.4s ease-out infinite;
      }

      .kv01__ripple:nth-child(2) {
        animation-delay: 0.8s;
      }

      .kv01__ripple:nth-child(3) {
        animation-delay: 1.6s;
      }

      /* タップ：指がトントン促す */
      .kv01__tap{
        position: absolute;
        width: 15%;
        top: 85%;
        left: 85%;
        transform: translateX(-50%);
        animation: tapPrompt 3s ease-in-out infinite;
      }

    }

    /* kv__02は初期非表示 */
    .kv__02 {
      display: none;
      flex: 1;
      width: 100%;
      align-items: center;
      justify-content: center;
      background: url("../images/kv_02.png") center / contain no-repeat;

      .kv02__housha{
        position: absolute;
        width: 250%;
        top: -25%;
        left: 59%;
        transform: translateX(-50%);
        z-index: 0;
        animation: slowSpin 240s linear infinite;
      }

      .kv02__trophy{
        position: absolute;
        width: 65%;
        top: 50%;
        left: 50%;
        z-index: 5;
        will-change: transform;
        transform: translate(-50%, -50%);
      }

      .kv02__trophy.is-trophy-anim {
        animation: trophyMove 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      }

      .kv02__bg--item01{
        position: absolute;
        left: -8%;
        top: -9%;
        width: 120%;
        transform: translateY(-100%);
      }

      .kv02__bg--item02{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        transform: translateY(100%);
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__bg--item01 {
        animation: slideFromTop 0.4s ease forwards var(--kv02-reveal-delay2);
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__bg--item02 {
        animation: slideFromBottom 0.4s ease forwards var(--kv02-reveal-delay2);
      }

      .kv02__logo01{
        position: absolute;
        left: 2%;
        top: 7%;
        width: 78%;
        opacity: 0;
        transform: scale(0.3);
      }

      .kv02__logo02{
        position: absolute;
        left: 5%;
        top: 4%;
        width: 20%;
        opacity: 0;
        transform: scale(0.3);
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__logo01 {
        animation: popBounce 0.6s ease forwards var(--kv02-reveal-delay);
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__logo02 {
        animation: popBounce 0.6s ease forwards var(--kv02-reveal-delay2);
      }


      .kv02__kodomo{
        position: absolute;
        left: 17%;
        top: 33%;
        width: 32%;
        opacity: 0;
        transform: translateY(40px);
      }

      .kv02__ganbari{
        position: absolute;
        right: 6%;
        top: 56%;
        width: 28%;
        z-index: 5;
        opacity: 0;
        transform: translateY(40px);
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__kodomo {
        animation: fadeUp 0.8s ease forwards var(--kv02-reveal-delay2), floatUpDown 3s ease-in-out infinite 3.3s;
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__ganbari {
        animation: fadeUp 0.8s ease forwards var(--kv02-reveal-delay2), floatUpDown 3s ease-in-out infinite 3.6s;
      }

      .kv02__star--white,
      .kv02__star--yellow01,
      .kv02__star--yellow02,
      .kv02__star--yellow03 {
        position: absolute;
        opacity: 0;
        transform: scale(0.3);
      }

      .kv02__star--white{
        right: 0;
        top: 27%;
        width: 12%;
      }

      .kv02__star--yellow01{
        right: -6%;
        top: 16%;
        width: 25%;
      }

      .kv02__star--yellow02{
        left: 2%;
        top: 32%;
        width: 19%;
      }

      .kv02__star--yellow03{
        left: 9%;
        top: 56%;
        width: 30%;
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__star--white {
        animation: popBounce 0.6s ease forwards var(--kv02-reveal-delay2), twinkle 2s ease-in-out infinite var(--kv02-reveal-delay2);
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__star--yellow01 {
        animation: popBounce 0.6s ease forwards var(--kv02-reveal-delay2), twinkle 2s ease-in-out infinite 3.2s;
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__star--yellow02 {
        animation: popBounce 0.6s ease forwards var(--kv02-reveal-delay2), twinkle 2s ease-in-out infinite 3.9s;
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__star--yellow03 {
        animation: popBounce 0.6s ease forwards var(--kv02-reveal-delay2), twinkle 2s ease-in-out infinite 4.6s;
      }

      .kv02__banner{
        position: absolute;
        bottom: 5%;
        width: 122%;
        left: 50%;
        transform: translateX(-50%) translateY(40px);
        z-index: 5;
        opacity: 0;
      }

      .kv02__date{
        position: absolute;
        bottom: 3%;
        width: 89%;
        left: 50%;
        transform: translateX(-50%) translateY(40px);
        z-index: 5;
        opacity: 0;
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__banner {
        animation: fadeUpCenter 0.8s ease forwards var(--kv02-reveal-delay2);
      }

      .kv02__trophy.is-trophy-anim ~ .kv02__date {
        animation: fadeUpCenter 0.8s ease forwards var(--kv02-reveal-delay2);
      }
    }

    /* ホワイトアウト用オーバーレイ */
    .kv__whiteout {
      position: absolute;
      inset: 0;
      background: #fff;
      opacity: 0;
      pointer-events: none;
      z-index: 10;
      transition: opacity 1s ease;
    }

    /* タップ後: kv__01の子要素が中央に集まる */
    &.is-animating .kv__01 .kv01__fuki,
    &.is-animating .kv__01 .kv01__henshin-wrap,
    &.is-animating .kv__01 .kv01__tap {
      transition: all 1s ease-in;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
    }

    &.is-animating .kv__whiteout {
      opacity: 1;
    }

  }

  /* KV以降の要素を初期非表示 */
  .kv ~ * {
    display: none;
  }

  /* タップ後に表示 */
  &.is-opened .kv {
    min-height: auto;
    flex: none;
    cursor: default;
  }

  &.is-opened .kv ~ * {
    display: block;
  }

  .img-explain{
    width: 100%;
    height: auto;
    display: block;
  }

  .page-link{
    padding: var(--inner-padding);

    h2{font-size: 0;}

    img{
      width: 100%;
    }

    .page-link__inner{
      padding: var(--spacer-small) 0;
      width: 100%;
    }

    .page-link__nav-item{
      margin: 6px 0;
    }
  }

  .intro{
    position: relative;
    overflow: hidden;

    .intro__bg--item{
      position: absolute;
      width: 135%;
      top: 18%;
      left: 50%;
      transform: translateX(-50%);
      animation: slowSpin 360s linear infinite;
    }

    .intro__title{
      position: absolute;
      width: 70%;
      top: 1.5%;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .intro__text{
      position: absolute;
      width: 90%;
      top: 14%;
      left: 50%;
      transform: translateX(-50%);
    }

    .intro__trophy{
      position: absolute;
      width: 65%;
      top: 25%;
      left: 50%;
      transform: translateX(-50%);
    }

    .intro__dialogue{
      position: absolute;
      width: 87%;
      top: 38%;
      left: 48%;
      animation: floatRock 3s ease-in-out infinite;
    }

    .intro__star01{
      position: absolute;
      width: 40%;
      top: 38%;
      left: 3%;
      animation: twinkle 2s ease-in-out infinite;
    }

    .intro__star02{
      position: absolute;
      width: 40%;
      top: 60%;
      left: 58%;
      animation: twinkle 2s ease-in-out infinite 0.7s;
    }

    .intro__star03{
      position: absolute;
      width: 35%;
      top: 33%;
      left: -5%;
      animation: twinkle 2s ease-in-out infinite 1.4s;
    }
  }

  .howto{
    position: relative;

    .howto__title{
      position: absolute;
      width: 70%;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .howto__discription{
      position: absolute;
      width: 89%;
      top: 5%;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .howto__trophy{
      position: absolute;
      width: 90%;
      top: 67%;
      left: 50%;
      transform: translateX(-50%);
    }

    .howto__trophy--cap01{
      position: absolute;
      width: 12%;
      top: 83%;
      right: 23%;
      z-index: 3;
      animation: capBounce 2.4s ease-in-out infinite 0.3s;
    }
    .howto__trophy--shade01{
      position: absolute;
      width: 12%;
      top: 85.5%;
      right: 23.5%;
      z-index: 2;
      animation: shadowShrink 2.4s ease-in-out infinite 0.3s;
    }

    .howto__trophy--cap02{
      position: absolute;
      width: 13%;
      top: 84.5%;
      right: 13%;
      z-index: 4;
      animation: capBounce 2.8s ease-in-out infinite 1.0s;
    }
    .howto__trophy--shade02{
      position: absolute;
      width: 13%;
      top: 87%;
      right: 13%;
      z-index: 3;
      animation: shadowShrink 2.8s ease-in-out infinite 1.0s;
    }

    .howto__trophy--cap03{
      position: absolute;
      width: 14%;
      top: 83.5%;
      left: 18%;
      z-index: 3;
      animation: capBounce 2.2s ease-in-out infinite 0.6s;
    }
    .howto__trophy--shade03{
      position: absolute;
      width: 13%;
      top: 87%;
      left: 19%;
      z-index: 2;
      animation: shadowShrink 2.2s ease-in-out infinite 0.6s;
    }

    .howto__trophy--star01{
      position: absolute;
      width: 14%;
      top: 75%;
      right: 17%;
      animation: twinkle 2s ease-in-out infinite;
    }

    .howto__trophy--star02{
      position: absolute;
      width: 15%;
      top: 80%;
      left: 17%;
      animation: twinkle 2s ease-in-out infinite 0.7s;
    }

    .howto__info{
      position: absolute;
      width: 89%;
      top: 93%;
      left: 50%;
      transform: translateX(-50%);
    }

  }

  .products{
    position: relative;

    .products__title{
      position: absolute;
      width: 70%;
      top: 1.5%;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .products__discription{
      position: absolute;
      width: 90%;
      top: 6.5%;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .terms{
    background-color: var(--color-primary_heavy);
    padding: var(--inner-padding);

    .terms__title{
      margin: var(--inner-padding) auto;
      width: 75%;
    }

    .terms__lead{
      width: 100%;
    }

    .terms__terms{
      margin: var(--spacer-large) 0;

      ol{
        margin-left: 2.6rem;
        list-style-type: decimal;
      }

      .terms__wrap {
          background-color: #FFFFFF;
          width: 100%;
          aspect-ratio: 1;
          padding: 1rem;
          border: var(--box-border) solid #FFDBDB;
          border-radius: 1.6rem;
      }

      .terms__inner {
          white-space: pre-wrap;
          font-size: clamp(10px, 3cqw, var(--font-size_top-text));
          text-align: left;
          height: 100%;
          padding-right: 1rem;
          scrollbar-width: none;  /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */
      }

      /* SimpleBarのスクロールバーの背景 */
      .simplebar-track.simplebar-vertical {
          background-color: #F2F2F2;
          width: 2%;
          border-radius: 10px;
      }

      /* SimpleBarのスクロールバーのつまみ */
      .simplebar-scrollbar:before {
          background-color: var(--color-primary_heavy);
          border-radius: 10px;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          opacity: 1 !important;
      }

      .simplebar-content-wrapper {
          overscroll-behavior: none;
      }
    }

    .terms__trophy{
      width: 100%;
      margin-bottom: var(--spacer-large);
    }
  }
}

/* ふわっと上がるアニメーション */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease, transform 0.8s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* absolute + translateX(-50%)の要素向け */
.fade-up-center {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(40px) !important;
  transition: opacity 0.5s ease-out, transform 1s ease-out !important;
}

.fade-up-center.is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* フェードイン完了後、animationのtransformを妨げないようにする */
.fade-up.is-anim-ready {
  transform: unset !important;
  transition: none !important;
}

.fade-up-center.is-anim-ready {
  transform: unset !important;
  transition: none !important;
}

/* バンっと飛び出るアニメーション */
.pop-in {
  opacity: 0;
  transform: scale(0.3);
}

.pop-in.is-visible {
  animation: popBounce 0.6s ease forwards;
}

@keyframes popBounce {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.08); }
  75%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.pop-in-center {
  opacity: 0;
  transform: translateX(-50%) scale(0.3);
}

.pop-in-center.is-visible {
  animation: popBounceCenter 0.6s ease forwards;
}
@keyframes popBounceCenter {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  50%  { opacity: 1; transform: translateX(-50%) scale(1.08); }
  75%  { transform: translateX(-50%) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* トップへ戻るボタン */
.return-to-top {
  position: fixed;
  bottom: 3%;
  right: 3%;
  width: clamp(64px, 24%, 128px);
  height: auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, bottom 0.1s ease;
}

.return-to-top img {
  width: 100%;
  height: auto;
  display: block;
}

/* KVアニメーション keyframes */
@keyframes fukiBounce {
  0%, 90%, 100% { transform: translateX(-50%) translateY(0); }
  95% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes rippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

@keyframes tapPrompt {
  0%, 50%, 100% { transform: translateX(-50%) scale(1);}
  75% { transform: translateX(-50%) scale(0.85); }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes fadeUpCenter {
  0%   { opacity: 0; transform: translateX(-50%) translateY(40px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes slideFromTop {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

@keyframes slideFromBottom {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(0.7); }
}

@keyframes floatRock {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50%      { transform: translateX(-50%) rotate(2deg); }
}

@keyframes capBounce {
  0%, 10%, 100% { transform: translateY(0); }
  5% { transform: translateY(-18%); }
}

@keyframes shadowShrink {
  0%, 10%, 100% { transform: scale(1); }
  5% { transform: scale(0.5); }
}

@keyframes slowSpin {
  0%   { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

/* トロフィー: 元の位置→中央拡大→停止→元に戻る (5秒) */
/* translate(-50%)を全フレームで統一し、top/leftは中心点として扱う */
@keyframes trophyMove {
  0%   { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.75); }
  20%  { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.45); }
  80%  { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.45); }
  100% { top: 50%; left: 50%; transform: translate( -30%, -52%) scale(1); }
}

#contents_block .page-link{
    background-image: url("../images/link_bg.png");

    .page-link__nav{
      list-style: none;
    }
}