/*===================================

アニメーション
.swiper-slide-activeで起動
===================================*/
/*===================================
各アイテムテキスト
===================================*/
.item-flip .flip-inner .swiper.item-swiper .swiper-wrapper.item-box .item-hyoushi h3 {
  opacity: 0;
  transform: translateY(1em);
}
.item-flip.swiper-slide-active .flip-inner .swiper.item-swiper .swiper-wrapper.item-box .item-hyoushi h3 {
  animation: fadeUp 0.7s ease both 0.3s;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* クエスチョンマーク */
.item-gimon.card-box.swiper-slide-active .item-main::after {
  animation: fadeUpOpacity 1.7s ease both 0.2s;
}
@keyframes fadeUpOpacity {
  0% {
    opacity: 0;
    transform: translateY(1em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*===================================
テーマ01-表紙
===================================*/
#thema01.thema-hyoushi.swiper-slide-active .flip-inner .thema-hyoushi-main .thema-hyoushi-item {
  display: block;
  transform-origin: center center;
  animation: spinYSteps 2.4s steps(10) infinite;
}
@keyframes spinYSteps {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(355deg);
  }
}
#thema01.thema-hyoushi.swiper-slide-active .flip-inner .thema-hyoushi-main .thema-hyoushi-item.item02 {
  animation-delay: 1.2s;
}
#thema01.thema-hyoushi.swiper-slide-active .flip-inner .thema-hyoushi-main .thema-hyoushi-item.item03 {
  animation-delay: 2.4s;
}
/*===================================
テーマ01-アイテム01
===================================*/
#thema01-item01-hyoushi.item-hyoushi {}
#thema01-item01-hyoushi.item-hyoushi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 0%;
  background-image: url(../images/t01_item01_anime.webp);
  background-repeat: repeat;
  background-position: center;
  background-size: 100%;
}
/* .swiper-slide-active が付いた時だけ4コマ再生（ループ） */
.item-flip.swiper-slide-active #thema01-item01-hyoushi.item-hyoushi.swiper-slide-active::before {
  animation: hyoushiFrames 5s infinite steps(1, end);
  animation-delay: 0.5s;
}
/* 4コマアニメ（最後だけ長く） */
@keyframes hyoushiFrames {
  0%, 14% {
    height: 0%;
  } /* 1コマ目 */
  15%, 29% {
    height: 35%;
  } /* 2コマ目 */
  30%, 44% {
    height: 69%;
  } /* 3コマ目 */
  45%, 100% {
    height: 100%;
  } /* 4コマ目（全体の55%分キープ） */
}
/*===================================
テーマ01-アイテム02
===================================*/
.item-flip.swiper-slide-active #thema01-item02-hyoushi.item-hyoushi.swiper-slide-active .item-main::after {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url(../images/t01_item02_main.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 0%;
  top: 0%;
}
/*===================================
テーマ01-アイテム03
===================================*/
.item-flip #thema01-item03-hyoushi h3::after {
  display: block;
  width: 100%;
  height: 1.2em;
  content: '';
  background-image: url(../images/t01_item03_icon.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -63%;
  left: 0;
}
.item-flip.swiper-slide-active #thema01-item03-hyoushi.item-hyoushi.swiper-slide-active::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url("../images/t01_item03_anime01.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  left: 0%;
  top: 0%;
}
.item-flip #thema01-item03-gimon::after {
  display: block;
  width: 26%;
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/t01_item03_ashirai.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 6%;
}
/*===================================
テーマ02-表紙
===================================*/
#thema02.thema-hyoushi.swiper-slide-active .flip-inner .thema-hyoushi-main .thema-hyoushi-item {
  animation: balloonFloat 8s ease-in-out infinite;
  position: relative; /* 念のため */
  animation-delay: 1.0s;
}
#thema02.thema-hyoushi.swiper-slide-active .flip-inner .thema-hyoushi-main .thema-hyoushi-item img {
  animation: swayFloat 4s ease-in-out infinite;
  transform-origin: 50% 100%; /* 下辺を支点に揺れる感じ */
}
@keyframes swayFloat {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(8px) rotate(3deg);
  }
  50% {
    transform: translateX(0) rotate(0deg);
  }
  75% {
    transform: translateX(-8px) rotate(-3deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}
/* ふわ〜っと上へ抜けて、下からまた出てくる */
@keyframes balloonFloat {
  0% {
    transform: translateY(0%);
  }
  50% {
    opacity: 1;
    transform: translateY(-300%);
  }
  51%, 69% {
    opacity: 0;
  }
  70% {
    transform: translateY(240%);
  }
  90%, 100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
#thema02.thema-hyoushi .flip-inner .thema-hyoushi-main .thema-hyoushi-item.item02 {
  animation-delay: 2.0s;
}
#thema02.thema-hyoushi .flip-inner .thema-hyoushi-main .thema-hyoushi-item.item03 {
  animation-delay: 3.0s;
}
/*===================================
テーマ02-アイテム01
===================================*/
.item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main {}
.item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span {
  animation: kira-anime 1.5s both 0.3s;
  transition-timing-function: linear;
}
.item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span.kira02, .item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span.kira03, .item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span.kira06, .item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span.kira07 {
  animation-delay: 0.9s;
}
.item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span.kira04, .item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span.kira08, .item-flip.swiper-slide-active #thema02-item01-hyoushi.item-hyoushi.swiper-slide-active .item-main .kirakira span.kira01 {
  animation-delay: 1.4s;
}
.kirakira {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.kirakira span {
  background-image: url(../images/t02_item01_kira01.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 10%;
  aspect-ratio: 100/168;
  position: absolute;
  top: 0%;
  left: 0%;
}
.kirakira .kira01 {
  width: 15%;
  top: 0%;
  left: 9%;
}
.kirakira .kira02 {
  width: 6%;
  top: 22%;
  left: 0%;
  background-image: url(../images/t02_item01_kira02.webp);
}
.kirakira .kira03 {
  width: 14%;
  top: -6%;
  left: 76%;
  background-image: url(../images/t02_item01_kira02.webp);
}
.kirakira .kira04 {
  width: 6%;
  top: 18%;
  left: 91%;
  background-image: url(../images/t02_item01_kira02.webp);
}
.kirakira .kira05 {
  width: 8%;
  top: 28%;
  left: 81%;
}
.kirakira .kira06 {
  width: 12%;
  top: 64%;
  left: 4%;
  background-image: url(../images/t02_item01_kira02.webp);
}
.kirakira .kira07 {
  width: 6%;
  top: 83%;
  left: 17%;
  background-image: url(../images/t02_item01_kira02.webp);
}
.kirakira .kira08 {
  width: 7%;
  top: 73%;
  left: 87%;
  background-image: url(../images/t02_item01_kira02.webp);
}
.kirakira .kira09 {
  width: 10%;
  top: 81%;
  left: 75%;
}
@keyframes kira-anime {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
/*===================================
テーマ02-アイテム02
 .item-main
===================================*/
.item-flip #thema02-item02-hyoushi.item-hyoushi {
  background: linear-gradient(50deg, #FDE1CC 0%, #FDE1E9 100%);
}
.item-flip #thema02-item02-hyoushi.item-hyoushi .item-main::before, .item-flip #thema02-item02-hyoushi.item-hyoushi .item-main::after {
  opacity: 0;
}
.item-flip.swiper-slide-active #thema02-item02-hyoushi.item-hyoushi.swiper-slide-active .item-main::before, .item-flip.swiper-slide-active #thema02-item02-hyoushi.item-hyoushi.swiper-slide-active .item-main::after {
  display: block;
  width: 46%;
  height: auto;
  aspect-ratio: 100/150;
  content: '';
  background-image: url(../images/t02_item02_main.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  position: absolute;
  top: -21%;
  left: 54%;
  animation: fadeOpacity 0.3s ease both 2.1s;
}
@keyframes fadeOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.item-flip.swiper-slide-active #thema02-item02-hyoushi.item-hyoushi.swiper-slide-active .item-main::after {
  width: 32%;
  top: -35%;
  left: 80%;
  animation-delay: 2.7s;
}
.item-flip.swiper-slide-active #thema02-item02-hyoushi.item-hyoushi.swiper-slide-active::before {
  display: block;
  width: 100%;
  height: 0%;
  content: '';
  background-image: url(../images/t02_item02_anime.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: reveal-down 2s ease both 0.5s;
}
@keyframes reveal-down {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
/*===================================
テーマ02-アイテム03
===================================*/
.race-anime {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.race-anime span {
  position: absolute;
  top: 0;
  left: 0; /* 基点は0でもOK（insetで隠す） */
  width: 0%;
  height: 110%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 背景画像指定 */
.race-anime .race01 {
  background-image: url(../images/t02_item03_anime01.webp);
}
.race-anime .race02 {
  background-image: url(../images/t02_item03_anime02.webp);
  left: auto;
  right: 0;
}
.race-anime .race03 {
  background-image: url(../images/t02_item03_anime03.webp);
}
.item-flip.swiper-slide-active #thema02-item03-hyoushi.item-hyoushi.swiper-slide-active .race-anime span {
  animation: showFromRight 0.8s ease forwards;
  animation-delay: 0.5s;
}
.item-flip.swiper-slide-active #thema02-item03-hyoushi.item-hyoushi.swiper-slide-active .race-anime .race02 {
  animation-delay: 1.2s;
}
.item-flip.swiper-slide-active #thema02-item03-hyoushi.item-hyoushi.swiper-slide-active .race-anime .race03 {
  animation-delay: 1.9s;
}
@keyframes showFromRight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
/*===================================
テーマ03-表紙
===================================*/
#thema03.thema-hyoushi.swiper-slide-active .flip-inner .thema-hyoushi-main .thema-hyoushi-item {
  animation: hopSteps 2s steps(4) infinite; /* 全体2秒、4コマ送り */
  position: relative;
}
@keyframes hopSteps {
  0% {
    transform: translateY(0);
  } /* 元の位置 */
  20% {
    transform: translateY(-2em);
  } /* ピョンと上へ */
  40% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.2em);
  } /* 戻る */
  60%, 100% {
    transform: translateY(0);
  } /* そのまま停止 */
}
#thema03.thema-hyoushi .flip-inner .thema-hyoushi-main .thema-hyoushi-item.item02 {
  animation-delay: 0.35s;
}
#thema03.thema-hyoushi .flip-inner .thema-hyoushi-main .thema-hyoushi-item.item03 {
  animation-delay: 0.7s;
}
/*===================================
テーマ03-アイテム01
 .item-main
===================================*/
.item-flip #thema03-item01-hyoushi.item-hyoushi {
  transition: all 0.7s;
}
.item-flip.swiper-slide-active #thema03-item01-hyoushi.item-hyoushi.swiper-slide-active {
  background-color: #FADAE0;
  transition-delay: 1s;
}
.item-flip.swiper-slide-active #thema03-item01-hyoushi.item-hyoushi.swiper-slide-active::after {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url("../images/t03_item01_anime01.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: 2;
}
/*===================================
テーマ03-アイテム02
===================================*/
.item-flip.swiper-slide-active #thema03-item02-hyoushi.item-hyoushi.swiper-slide-active::after {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url("../images/t03_item02_anime01.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: 1;
}
/*===================================
テーマ03-アイテム03
===================================*/
.item-flip.swiper-slide-active #thema03-item03-hyoushi.item-hyoushi.swiper-slide-active .item-main::after {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url("../images/t03_item03_anime01.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: 1;
}
.item-flip #thema03-item03-hyoushi.item-hyoushi .item-main::before {
  content: '';
  display: block;
  width: 2em;
  height: 1em;
  background-image: url("../images/t03_item03_ashirai.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 46%;
  top: 9%;
  z-index: 3;
}