@charset "UTF-8";

/*//////////////////////////////////////////////////

  bioplefes teaser '25 | Biople Website

//////////////////////////////////////////////////*/

html {
  font-size: calc(10 * (100vw/600));
}

@media (min-width: 769px) {
  html {
    font-size: calc(10 * (100vw/1366));
  }
}

@media (min-width: 1366px) {
  html {
    font-size: 62.5%
  }

}

#HeaderWrap {
  display: none;
}

footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}

#FooterWrap {
  position: relative;
  background: #fff;
}


/*------------------------------------
≡≡≡≡≡≡≡≡≡≡ ▼ S e t U p SP ▼ ≡≡≡≡≡≡≡≡≡≡
------------------------------------*/
:root {
  --color1: #fff;
  --color2: #312D2C;
  --color3: #FFECA8;
  --color4: #F5DD85;
  --font_ja: "biz-udpgothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
  --font_en: "futura-pt", "biz-udpgothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
  --font_hiragino: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
}

#Wrap {
  width: 100%;
}

.lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.lp_contents {
  width: 100%;
  max-width: 60rem;
  height: 100%;
  font-family: var(--font_ja);
  font-weight: 300;
  overflow-x: clip;
  color: var(--color1);
  background: var(--color4);
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  background: var(--color4);
}

@media (min-width: 769px) {
  .lp_contents {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }
}

.lp_contents .pcOnly {
  display: none;
}

.lp_contents img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 600;
}

.lp_contents section {
  position: relative;
}


/*------------------------------------
≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ ▼ PC ▼ ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡
 ------------------------------------*/
@media (min-width: 769px) {

  .lp_contents .fixed_area {
    position: relative;
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    /* z-index: 1; */
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: var(--color3);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .lp_contents .fixed_area .fixed_nav {
    display: grid;
    place-items: center;
    width: calc((100% - 60rem) / 2);
    height: 100vh;
  }

  .fixed_left_inner .logo {
    width: 21.6rem;
    text-align: center;
  }

  .lp_contents_inner {
    width: 60rem;
    margin: 0 auto;
    overflow: clip;
  }

  .fixed_right {
    position: relative;
  }
}

.fixed_right .menu_list {
  width: 34.3rem;
  height: 58.3rem;
  position: relative;
}

.fixed_right .menu_list li {
  position: absolute;
}

.fixed_right .menu_list li a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixed_right .menu_list li p {
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: .05em;
  line-height: 1.2;
}



.fixed_right .menu_list li p span {
  font-size: 1.2rem;
  font-weight: 300;

}

.fixed_right .menu_list li.about,
.fixed_right .menu_list li.other {
  width: 12.7rem;
  height: 6.4rem;
  border-radius: .7rem;
}

.fixed_right .menu_list li.about {
  background: #EF2D63;
  top: 7.6rem;
  left: 2rem;
}

.fixed_right .menu_list li.about::after {
  content: "";
  width: 17.3rem;
  height: 23.5rem;
  background: url(../img/character01.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: -2.1rem;
  right: -19.3rem;
  animation: bound 2s ease infinite;
}

.fixed_right .menu_list li.other {
  background: #335CD0;
  bottom: 14.2rem;
  right: 2.7rem;
}

.fixed_right .menu_list li.other::after {
  content: "";
  width: 15.8rem;
  height: 22.1rem;
  background: url(../img/character02.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: -5.4rem;
  right: 13.1rem;
  animation: bound 2s ease infinite;
}

@keyframes bound {

  0%,
  100%,
  50%,
  70%,
  90% {
    transform: none
  }

  60%,
  80% {
    transform: translateY(-.4rem)
  }
}


.fixed_right .top {
  width: 4.5rem;
  position: absolute;
  bottom: 1.5rem;
  right: 3.4rem;
}



/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */
@media (max-width: 768px) {

  /* SP時ナビゲーション設定 */
  .lp_contents .fixed_area .fixed_right {
    position: fixed;
    bottom: 0;
    display: block;
    width: calc(430 * 60rem / 430);
    translate: 0 100%;
    opacity: 0;
    transition: all .5s;
    z-index: 2;
  }

  .lp_contents .fixed_area .fixed_right.active {
    translate: 0 0;
    opacity: 1;
  }

  .fixed_right .menu_list li::after {
    display: none;
  }


  .fixed_right .menu_list {
    width: 100%;
    height: auto;
    padding-bottom: calc(36 * 60rem / 430);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(13 * 60rem / 430);
  }

  .fixed_right .menu_list li {
    position: static;
  }

  .fixed_right .menu_list li p {
    font-size: calc(18 * 60rem / 430);
    padding-top: 0;
    line-height: 1;
    letter-spacing: 0;
  }

  .fixed_right .menu_list li.about,
  .fixed_right .menu_list li.other {
    width: calc(200 * 60rem / 430);
    height: calc(50 * 60rem / 430);
    border-radius: calc(37 * 60rem / 430);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
  }

  .fixed_right .menu_list li.about {
  }

  .fixed_right .menu_list li.other {
    width: calc(179 * 60rem / 430);
  }

  .fixed_right .top {
    width: calc(45 * 60rem / 430);
    bottom: calc(97 * 60rem / 430);
    right: calc(15 * 60rem / 430);
  }

  .fixed_right .menu_list li p span {
    font-size: calc(12 * 60rem / 430);
  }

}

/* ========================================================
                      * 共通設定  *
========================================================= */

.sp_only {
  display: none;
}

.pc_only {
  display: block;
}

@media (max-width: 768px) {
  .sp_only {
    display: block;
  }

  .pc_only {
    display: none;
  }
}

.txt_en {
  font-family: var(--font_en);
}

.txt_ja {
  font-family: var(--font_ja);
}


/* ========================================================
            * sec_mv  *
========================================================= */

.sec_mv {}

@media (min-width: 769px) {
  .sec_mv {
    padding-top: 2.8rem;
  }
}

.sec_mv .ttl {
  width: calc(430 * 60rem / 430);
}

.sec_mv .ttl_sub {
  color: var(--color2);
  font-size: calc(51 * 60rem / 430);
  text-align: center;
  font-weight: 600;
  margin-top: calc(8 * 60rem / 430);
  line-height: 1.1;
}


/* ========================================================
            * sec_overview  *
========================================================= */

.sec_overview {
  margin-top: calc(43 * 60rem / 430);
  padding-top: calc(106 * 60rem / 430);
  min-height: calc(732 * 60rem / 430);
}

.sec_overview::before {
  content: "";
  width: calc(732 * 60rem / 430);
  height: calc(731 * 60rem / 430);
  background: url(../img/sec_overview_bg.png) no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-60%);
  z-index: -1;
}

.sec_overview .ttl {
  font-size: calc(32 * 60rem / 430);
  line-height: 2.3;
}

.sec_overview .ttl span {
  font-size: calc(21 * 60rem / 430);
  display: block;
}

.sec_overview .list {
  margin-top: calc(58 * 60rem / 430);
  position: relative;
}

.sec_overview .ttl_sub {
  color: #008C51;
  background: var(--color1);
  font-size: calc(24 * 60rem / 430);
  font-weight: 700;
  width: fit-content;
  margin: 0 auto;
  padding: calc(11 * 60rem / 430) calc(24 * 60rem / 430);
  border-radius: calc(100 * 60rem / 430);
  font-weight: 500;
}

.sec_overview li:nth-of-type(2) .ttl_sub {
  margin: calc(50 * 60rem / 430) auto 0;
}


.sec_overview .date {
  font-size: calc(23 * 60rem / 430);
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  margin-top: calc(25 * 60rem / 430);
  margin-left: calc(47 * 60rem / 430);
}

.sec_overview .date .txt_lg {
  font-size: calc(38 * 60rem / 430);
  display: inline-block;
}

.sec_overview .date .txt_lg:nth-of-type(1) {
  margin-right: calc(7 * 60rem / 430);
}


.sec_overview .date .txt_lg:nth-of-type(2) {
  font-size: calc(37 * 60rem / 430);
  margin-left: calc(24 * 60rem / 430);
  margin-right: calc(4 * 60rem / 430);
  position: relative;
}

.sec_overview .date .txt_lg:nth-of-type(2)::after {
  content: "";
  width: calc(11 * 60rem / 430);
  height: calc(12 * 60rem / 430);
  background: url(../img/icon_arrow_white.svg) no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: calc(-17 * 60rem / 430);
  transform: translateY(-50%);
}

.sec_overview .time {
  font-size: calc(28 * 60rem / 430);
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-top: calc(13 * 60rem / 430);
  margin-left: calc(45 * 60rem / 430);
  display: flex;
  align-items: center;
}

.sec_overview .time>span {
  font-size: calc(15 * 60rem / 430);
  font-weight: 600;
  display: inline-block;
  margin-left: calc(6 * 60rem / 430);
}

.sec_overview .time span span {
  font-size: calc(21 * 60rem / 430);
  margin-right: calc(2 * 60rem / 430);
  margin-left: calc(5 * 60rem / 430);
  letter-spacing: 0.03em;
}

.sec_overview .area {
  font-size: calc(24 * 60rem / 430);
  font-weight: 600;
  margin-top: calc(24 * 60rem / 430);
}


/* ========================================================
            * sec_overview  *
========================================================= */

.sec_about {
  margin-top: calc(68 * 60rem / 430);
  padding-top: calc(180 * 60rem / 430);
  min-height: calc(781 * 60rem / 430);

}

.sec_about::before {
  content: "";
  width: calc(697 * 60rem / 430);
  height: calc(781 * 60rem / 430);
  background: url(../img/sec_about_bg.png) no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-52%);
  z-index: -1;
}

.sec_about .ttl {
  font-size: calc(19 * 60rem / 430);
  text-align: left;
  font-weight: 400;
  margin-left: calc(46 * 60rem / 430);
}


.sec_about .ttl .txt_lg {
  font-size: calc(28 * 60rem / 430);
  letter-spacing: .05em;
  font-weight: 600;
  display: inline-block;
  margin-right: calc(3 * 60rem / 430);
}

.sec_about .ttl_sub {
  font-size: calc(19 * 60rem / 430);
  font-weight: 600;
  text-align: left;
  margin-top: calc(9 * 60rem / 430);
  margin-left: calc(98 * 60rem / 430);
  letter-spacing: .1em;
}

.sec_about .txt_wrap {
  margin-top: calc(70 * 60rem / 430);
  font-weight: 500;
}


.sec_about .txt {
  font-size: calc(14 * 60rem / 430);
  font-family: var(--font_hiragino);
  letter-spacing: 0.075em;
  line-height: 1.5;
}

.sec_about .txt_wrap .txt:not(:first-of-type) {
  margin-top: calc(22 * 60rem / 430);
}

/* ========================================================
            * sec_info  *
========================================================= */

.sec_info {
  margin-top: calc(172 * 60rem / 430);
  padding-top: calc(303 * 60rem / 430);
  min-height: calc(864 * 60rem / 430);
}

.sec_info::before {
  content: "";
  width: calc(831 * 60rem / 430);
  height: calc(864 * 60rem / 430);
  background: url(../img/sec_info_bg.png) no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-48%);
  z-index: -1;
}

.sec_info .comingsoon {
  font-weight: 700;
  font-size: calc(77 * 60rem / 430);
  letter-spacing: .05em;
  line-height: 0.9;
}

.sec_info .txt {
  font-size: calc(24 * 60rem / 430);
  margin-top: calc(67 * 60rem / 430);
  line-height: 1.5;
}


/* ========================================================
            * sec_other  *
========================================================= */

.sec_other {
  margin-top: calc(92 * 60rem / 430);
  padding-top: calc(213 * 60rem / 430);
  min-height: calc(957 * 60rem / 430);
}

.sec_other::before {
  content: "";
  width: calc(567 * 60rem / 430);
  height: calc(957 * 60rem / 430);
  background: url(../img/sec_other_bg.png) no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-48%);
  z-index: -1;
}


.sec_other .ttl {
  font-size: calc(48 * 60rem / 430);
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.0;
  color: #704235;
}

.sec_other .txt {
  font-size: calc(24 * 60rem / 430);
  font-weight: 600;
  color: #704235;
  letter-spacing: .1em;
  margin-top: calc(55 * 60rem / 430);
}

.sec_other .list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(25 * 60rem / 430);
  margin-top: calc(49 * 60rem / 430);
}

.sec_other li a {}

.sec_other li .img_wrap {
  width: calc(170 * 60rem / 430);
  height: calc(170 * 60rem / 430);
  border-radius: calc(15 * 60rem / 430);
  overflow: hidden;
}

.sec_other li .caption {
  font-size: calc(21 * 60rem / 430);
  font-weight: 500;
  letter-spacing: .025em;
  width: 100%;
  height: calc(36 * 60rem / 430);
  border-radius: calc(15 * 60rem / 430);
  background: #335CD0;
  margin: calc(11 * 60rem / 430) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* ========================================================
            * footer_information  *
========================================================= */

.footer_information {
  position: relative;
  margin-top: calc(-276 * 60rem / 430);
  min-height: calc(1042 * 60rem / 430);
}

.footer_information::before {
  content: "";
  width: calc(430 * 60rem / 430);
  height: calc(1042 * 60rem / 430);
  background: url(../img/footer_bg_teaser.png) no-repeat center top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}


/* ========================================================
            * contact_area  *
========================================================= */

.contact_area {
  padding-top: calc(58 * 60rem / 430);
  padding-bottom: calc(104 * 60rem / 430);
  background: var(--color1);
}



.btn_contact {
  width: calc(239 * 60rem / 430);
  height: calc(88 * 60rem / 430);
  border-radius: calc(20 * 60rem / 430);
  margin: 0 auto;
  background: #000000;
}

.btn_contact a {
  letter-spacing: .1em;
  font-size: calc(24 * 60rem / 430);
  font-weight: 700;
  line-height: 2;
}

.btn_contact span {
  display: block;
  font-size: calc(18 * 60rem / 430);
  font-weight: 300;
  letter-spacing: .1em;

}


/* ========================================================
            * アニメーション  *
========================================================= */

.ofuda {
  background: url(../img/ofuda.png) no-repeat center;
  background-size: contain;
  width: calc(199 * 60rem / 430);
  height: calc(262 * 60rem / 430);
  position: absolute;
  top: 0;
  left: calc(100 * 60rem / 430);
  transition: 0.5s;
}

.ofuda.js-anime.active {
  animation:
    fall 4s linear forwards,
    sway 2s ease-in-out 2 alternate forwards;
}

@keyframes fall {
  to {
    top: 45%;
  }
}

@media (max-width: 768px) {
  @keyframes fall {
    to {
      top: calc(275 * 60rem / 430);
    }
  }
}

@keyframes sway {
  from {
    transform: translateX(0px) rotate(0deg);
  }

  to {
    transform: translateX(calc(100 * 60rem / 430)) rotate(-45deg);
  }
}

.star {
  width: calc(80 * 60rem / 430);
  height: calc(84 * 60rem / 430);
  background: url(../img/star.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  top: calc(206 * 60rem / 430);
  left: calc(22 * 60rem / 430);
  animation: rotateSwitch 1.5s steps(2, jump-none) infinite;
  transform-origin: center;
}

@keyframes rotateSwitch {
  from {
    transform: rotate(-19deg);
  }

  to {
    transform: rotate(19deg);
  }
}

.hand.js-anime::after {
  content: "";
  width: calc(272 * 60rem / 430);
  height: calc(189 * 60rem / 430);
  background: url(../img/hand.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  bottom: calc(-38 * 60rem / 430);
  left: calc(-22 * 60rem / 430);
  transform: translateX(-100%) rotate(17deg);
}

.hand.js-anime.active::after {
  animation: catch_hart 2s ease-in-out 1 forwards;

}

@keyframes catch_hart {
  0% {
    transform: translate(-100%, 0) rotate(17deg);
  }

  100% {
    transform: translate(0%, 0%) rotate(17deg);
  }
}

.kyorokyoro_switch {
  position: absolute;
  top: calc(20 * 60rem / 430);
  right: calc(-13 * 60rem / 430);
  width: calc(261 * 60rem / 430);
  height: calc(154 * 60rem / 430);
}

.kyoro_a,
.kyoro_b {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kyoro_a {
  background-image: url(../img/kyorokyoro_01.png);
  animation: rhythmA 2.5s steps(1, end) infinite;
}

.kyoro_b {
  background-image: url(../img/kyorokyoro_02.png);
  animation: rhythmB 2.5s steps(1, end) infinite;
}

@keyframes rhythmA {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  /* ← 間（少し長くAのまま） */
  80% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rhythmB {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  70% {
    opacity: 0;
  }

  /* ← 間（Bはこの間見えない） */
  80% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.uchiwa {
  width: calc(357 * 60rem / 430);
  height: calc(269 * 60rem / 430);
  background: url(../img/uchiwa.png) no-repeat center;
  background-size: contain;
  animation: uchiwaFan 3s ease-in-out infinite;
  transform-origin: 85% 100%;
  position: absolute;
  bottom: calc(-75 * 60rem / 430);
  right: calc(-124 * 60rem / 430);
  transform: rotate(-30deg);
}


@keyframes uchiwaFan {
  0% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(-40deg);
    /* パッと仰ぐ */
  }

  100% {
    transform: rotate(0deg);
    /* 戻る（余韻） */
  }
}

.kaze {
  width: calc(135 * 60rem / 430);
  height: calc(137 * 60rem / 430);
  background: url(../img/kaze.png) no-repeat center;
  background-size: contain;
  animation: guruguru 3s ease-in-out infinite;
  /* animation-delay: 1s; */
  position: absolute;
  bottom: calc(-67 * 60rem / 430);
  right: calc(118 * 60rem / 430);
  opacity: 0;
}

@keyframes guruguru {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.5)
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateX(-300%) scale(2);
  }
}

.mari {
  width: calc(230 * 60rem / 430);
  height: calc(218 * 60rem / 430);
  background: url(../img/mari.png) no-repeat center;
  background-size: contain;
  animation: rotateLoop 10s linear infinite;
  /* animation-delay: 1s; */
  position: absolute;
  top: calc(0 * 60rem / 430);
  left: calc(-32 * 60rem / 430);
  z-index: -2;
}

@keyframes rotateLoop {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.kyorokyoro_switch02 {
  position: absolute;
  bottom: calc(27 * 60rem / 430);
  right: calc(2 * 60rem / 430);
  width: calc(267 * 60rem / 430);
  height: calc(140 * 60rem / 430);
}

.kyoro_c,
.kyoro_d {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kyoro_c {
  background-image: url(../img/kyorokyoro_03.png);
  animation: rhythmC 1s steps(1, end) infinite;
}

.kyoro_d {
  background-image: url(../img/kyorokyoro_04.png);
  animation: rhythmD 1s steps(1, end) infinite;
}


@keyframes rhythmC {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes rhythmD {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


.glasses {
  width: calc(400 * 60rem / 430);
  height: calc(189 * 60rem / 430);
  position: absolute;
  top: calc(-5 * 60rem / 430);
  left: calc(-15 * 60rem / 430);
}

.glasses::before {
  content: "";
  width: calc(31 * 60rem / 430);
  height: calc(37 * 60rem / 430);
  background: url(../img/hart.png) no-repeat center;
  background-size: contain;
  animation: heartbeat 2s ease-out infinite;
  transform-origin: left bottom;
  /* animation-delay: 1s; */
  position: absolute;
  top: calc(63 * 60rem / 430);
  right: calc(75 * 60rem / 430);
}

.glasses::after {
  content: "";
  width: calc(31 * 60rem / 430);
  height: calc(37 * 60rem / 430);
  background: url(../img/hart.png) no-repeat center;
  background-size: contain;
  animation: heartbeat 2s ease-out infinite;
  transform-origin: left bottom;
  /* animation-delay: 1s; */
  position: absolute;
  top: calc(94 * 60rem / 430);
  right: calc(182 * 60rem / 430);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(2.5);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.hand02 {
  width: calc(530 * 60rem / 430);
  height: calc(531 * 60rem / 430);
  background: url(../img/hand02.png) no-repeat center;
  background-size: contain;
  position: absolute;
  left: calc(-143 * 60rem / 430);
  bottom: calc(-357 * 60rem / 430);
  /* transform: rotate(36deg); */
}

.hand02.js-anime::after {
  content: "";
  width: calc(222 * 60rem / 430);
  height: calc(172 * 60rem / 430);
  background: url(../img/leaf.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: calc(-200 * 60rem / 430);
  right: calc(182 * 60rem / 430);
  z-index: 2;
}

.hand02.js-anime.active::after {
  animation:
    hirahira 4s linear forwards,
    huwari 2s ease-in-out 2 alternate forwards;
}

@keyframes hirahira {
  to {
    top: 25%;
  }
}


@keyframes huwari {
  from {
    transform: translateX(0px) rotate(0deg);
  }

  to {
    transform: translateX(calc(200 * 60rem / 430)) rotate(-45deg);
  }
}