@charset "UTF-8";
  .sp{
    display: none!important;
  }
#fv{
  background:url(../images/fv-bg.webp) top center/ contain no-repeat;
  height: calc(var(--lp-width) * 1.6);
  position: relative;
  overflow: hidden;
}
#fv > img,#intro > img,.event02 > img,.popup > img{
  position: absolute;
}
.fv-logo{
  width: 19.6%;
  top: 2.5%;
  left: 2%;
}
.lp-section .ttl-circle{
  top:21.5%;
}.lp-section .ttl-txt1{
  width: calc(664% / 7.5);
  top: 41%;
  left: 7%;
}.lp-section .ttl-txt2{
  width: calc(263% / 7.5);
  top: 32.5%;
  left: 33.5%;
}
.lp-section .ttl-txt3{
  width: calc(268% / 7.5);
  top: 59.5%;
  left: 32.5%;
}.lp-section .peter{
  width: calc(210% / 7.5);
  bottom: 2.8%;
  right: 34.2%;
}.lp-section .cat{
  width: calc(150% / 7.5);
  top: 56.5%;
  right: 0;
}.lp-section .bunnies{
  width: calc(265% / 7.5);
  bottom: 9%;
  right: 2%;
}.lp-section .hedgehog{
  width: calc(128% / 7.5);
  top: 15%;
  right: 9%;
}.lp-section .jemima{
  width: calc(218% / 7.5);
  bottom: 7.8%;
  left: 0;
}.lp-section .frog{
  width: calc(109% / 7.5);
  top: 24.5%;
  left: 3%;
}.lp-section .kittens{
  width: calc(237% / 7.5);
  top: 7%;
  left: 20%;
}.lp-section .mcgregor{
  width: calc(111% / 7.5);
  top: 6%;
  right: 3%;
}.lp-section .mice{
  width: calc(167% / 7.5);
  top: 9.5%;
  right: 26%;
}.lp-section .kazari04{
  width: calc(215% / 7.5);
  top: 3.5%;
  left: 50.4%;
}.lp-section .kazari05{
  width: calc(148% / 7.5);
  top: 17.5%;
  right: 22%;
}.lp-section .kazari01{
  width: calc(173% / 7.5);
  top: 17%;
  left: 2%;
}.lp-section .kazari06{
  width: calc(167% / 7.5);
  bottom: 4.3%;
  left: 3%;
}.lp-section .kazari07{
  width: calc(90% / 7.5);
  top: 49%;
  left: 1%;
}.lp-section .squirrel{
  width: calc(107% / 7.5);
  top: 57%;
  left: 1.5%;
}.lp-section .kazari02{
  width: calc(82% / 7.5);
  top: 46.5%;
  right: 2.6%;
}.lp-section .kazari03{
  width: calc(44% / 7.5);
  top: 63.5%;
  left: 12%;
}.lp-section .kazari08{
  width: calc(84% / 7.5);
  top: 90%;
  right: 21.5%;
}.lp-section .benjamin{
  width: calc(148% / 7.5);
  bottom: 4.5%;
  left: 23%;
}

#intro{
  position: relative;
  height: calc(var(--lp-width) * 1.4083);
  overflow: hidden;
}
.lp-section .intro-bg{
  top: 0;
  left: 0;
  width: 100%;
}
.lp-section .intro-bottom{
  bottom: 0;
  left: 0;
}
.lp-section .intro-cho{
  width: calc(72% / 7.5);
  top: 79%;
  left: 27%;
  animation: butterfly-flutter 1s ease-in-out infinite;
}
.lp-section .intro-ahiru{
  width: calc(188% / 7.5);
  bottom: 1%;
  left: 30%;
    animation: walk 10s linear infinite;
    position: absolute;
}
.lp-section .intro-ahiru img{
    animation: pyokowalk 0.5s linear infinite;
}
.lp-section .intro-nezumi{
  width: calc(136% / 7.5);
  top: 76%;
  left: 64%;
  animation: yuraLoop 2.5s ease-in-out infinite alternate 3.5s; 
  transform-origin: bottom center;
}
.lp-section .intro-txt{
  width: calc(650% / 7.5);
  transform: translateX(-50%);
  left: 50%;
  top: 11%;
}
#gift{
  background: url(../images/event-bg.webp);
  overflow: hidden;
}
#gift > div{
  position: relative;
}
.event01{
  position: relative;
}
.event01-peter{
  position: relative;
}
.lp-section .event01-cho{
  position: absolute;
  width: calc(59% / 7.5);
  bottom: 44%;
  left: 15%;
    animation: butterfly-flutter 0.8s ease-in-out infinite;
}
.tenpo .show-more::before,.tenpo .show-more::after{
  content: none;

}
.tenpo .show-more p{
  background: #f6ae6a;
  border-radius: 6px;
  padding: 0.5em 0;
  text-align: center;
  color: #fff;
  font-size: calc(var(--lp-width) * 0.046);
  width: 70%;
}
.tenpo .show-more.on-click p{
  background:#fce7d2;
  color: #f6ae6a;
}
.event02{
  height: calc(var(--lp-width) * 2.78);
}
.popup{
    height: calc(var(--lp-width) * 2.24734);
}
.lp-section .event02-happa{
  width: calc(286% / 7.5);
  right: -5.8%;
  top: 37.5%;
  animation: pyokoLoop 1.4s ease-in-out infinite alternate 3s;
}
.lp-section .event02-kabu{
  width: calc(90% / 7.5);
  top: 0;
  right: 23%;
  animation: yuraLoop 1.5s ease-in-out infinite alternate 2.5s; 
  transform-origin: top center;
}
.lp-section .event02-kusa{
  width: calc(70% / 7.5);
  top: 2.5%;
  left: 32%;
}
.lp-section .event02-nezumi{
  width: calc(260% / 7.5);
  bottom: 4%;
  right: 16%;
  animation: pyokoLoop 1.4s ease-in-out infinite alternate 3s;
}
.lp-section .event02-tamanegi{
  width: calc(140% / 7.5);
  top: 0;
  left: 5%;
  animation: yuraLoop 2.3s ease-in-out infinite alternate 2.3s; 
  transform-origin: top center;
}
.event02-mc{
  width: calc(286% / 7.5);
  bottom: 5%;
  left: 5%;
  animation: pyokoLoop 1.4s ease-in-out infinite alternate 3.5s;
}
#camp{
  background: url(../images/camp-bgtop.webp) center top /100% auto no-repeat,url(../images/camp-bg.webp);
  overflow-x: hidden;
}
.camp-ttl{
  position: relative;
  height:calc(var(--lp-width) * 1.06666) ;
}
.camp-ttl > img{
  position: absolute;
}
.camp-ttl-item{
  top: 16%;
}
.camp-happa{
  top: 46%;
  width: calc(298% / 7.5);
  right: -13%;
}
.camp-tori {
  width: calc(98% / 7.5);
  left: 11%;
  top: 21%;
  animation: pyokoLoop 1.4s ease-in-out infinite alternate 3s;
}
.camp-peter{
  width: calc(193% / 7.5);
  left: 1%;
  top: 47%;
  animation: yuraLoop 1.9s ease-in-out infinite alternate 2.3s; 
}
.event03-top{
  position: relative;
  height:calc(var(--lp-width) * 0.996) ;
}
.event03-cat{
  position: absolute;
  width: calc(188% / 7.5);
  top: 23%;
  right: 3%;
  animation: pyon 8s linear infinite 6s;
}
.show-more{
  width: 100%;
  background: url(../images/event03-waku.png) left top/100% repeat-y;
  position: relative;
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
  border: none;
  padding: 0 0 30px;
}
.show-more .event03-waku{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.show-more::before,
.show-more::after {
  content: "";
  height: 1px;
  background-color: #e55a7d; 
  width: 15%; 
}
.show-more::before {
  margin-right: 15px; /* 文字との余白 */
  width: 12%;
}
.show-more::after {
  margin-left: 15px; /* 文字との余白 */
  width: 12%;
}
.show-more p {
  margin: 0;
  font-size: calc(var(--lp-width) * 0.036);
  font-weight: bold;
  color: #e55a7d;
  white-space: nowrap;
}
.show-more img {
  width: 18px;
  height: 18px;
  margin-left: 0.5em;
}
.accordion {
  display: none; 
}
.show-more.on-click img{
  transform: rotate(180deg);
}
.oubo{
    background: url(../images/event03-waku.png) left top/100% repeat-y;
}
.oubo-wrap{
  border:1px solid #f5b0be;
  background: #fdf6f7;
  width: 76%;
  margin: auto;
  padding: 15px 0;
}
.oubo-wrap .show-more{
    background:none;
    margin: auto;
    padding-bottom: 0;
}
.oubo-wrap .show-more p {
  font-size: calc(var(--lp-width) * 0.046);
}
.oubo-wrap .show-more::before,
.oubo-wrap .show-more::after {
  content: none;
}
.oubo-wrap .accordion img{
  margin-top: 15px;
}
.oubo-wrap .tenpo .show-more p{
  background: #ef9594;
  width: 92%;
}
.oubo-wrap .tenpo .show-more.on-click p{
  background: #fdfad2;
  color:#ef9594;
}
.oubo-link{
  background: #ef9594;
  width: 92%;
  border-radius: 6px;
  padding: 0.5em 0;
  text-align: center;
  color: #fff;
  margin: 0 auto 20px;
  font-size: calc(var(--lp-width) * 0.046);
  font-weight: bold;
}

.event04-top{
  position: relative;
  height:calc(var(--lp-width) * 3.225333) ;
}
.event04-cho{
  position: absolute;
  right: 10%;
  top: 2%;
  width: calc(76% / 7.5);
    animation: butterfly-flutter 1s ease-in-out infinite;
}
.event04-hiyoko {
  position: absolute;
  left: 20%;
  top: 32%;
  width: calc(94% / 7.5);
  animation: hiyokowalk 5s linear infinite;
}
.event04-usagi{
  position: absolute;
  right: 8%;
  top: 7.5%;
  width: calc(156% / 7.5);
    animation: yuraLoop 1.9s ease-in-out infinite alternate 2.3s; 

}
.event04-bee {
  width: calc(100% / 7.5);
  right: 18%;
  position: absolute;
  bottom: 9%;
    animation: pyon 5s linear infinite 0.5s;
}

.event04-cont .show-more p{
  color:#53a5d6;
}
.event04-cont .show-more::before,
.event04-cont .show-more::after {
  background-color: #53a5d6;
  width: 8%;
}
.event04-cont .tenpo .show-more p{
  background: #53a5d6;
  width: 70%;
  color: #fff;
  font-size: calc(var(--lp-width) * 0.036);
  padding: 1em 0;
}
.event04-cont .tenpo .show-more.on-click p{
  background: #cce4f3;
  color:#fff;
}
.map-link-wrap{
  width: 100%;
  background: url(../images/event03-waku.png) left top/100% repeat-y;
}
.map-link{
  width: 68%;
  margin: 0 auto;
}
.event05-top{
  position: relative;
}
.event05-book {
  width: 16.5%;
  position: absolute;
  left: 2%;
  --y: 30%;
  top: var(--y);
  animation: itemFadeIn 0.5s ease-out forwards 2.2s, yuraLoop 2.5s ease-in-out infinite alternate 3.5s;
  transform-origin: bottom center;
}
.collab-top{
  position: relative;
  height:calc(var(--lp-width) * 3.07333);
}
.collab-cho1{
  position: absolute;
  right: 14%;
  top: 51%;
  width: calc(61% / 7.5);
    animation: butterfly-flutter 0.8s ease-in-out infinite;

}
.collab-cho2{
  position: absolute;
  left: 26%;
  top: 23%;
  width: calc(68% / 7.5);
    animation: butterfly-flutter 1.2s ease-in-out infinite;

}
.collab-cont .accordion{
  position: relative;
}
.collab-harinezumi{
    position: absolute;
  right: 8%;
  top: -4%;
  width: calc(134% / 7.5);
    animation: yuraLoop 2.1s ease-in-out infinite alternate 2.1s; 

}
.collab-cont .show-more {
  width: 100%;
  background: url(../images/collab-waku.webp) left top/100% repeat-y;
}
.collab-cont .show-more p{
  color:#2952a3;
}
.collab-cont .show-more::before,
.collab-cont .show-more::after {
  background-color: #2952a3;
  width: 5%;
}
.collab-menu{
  position: relative;
  height:calc(var(--lp-width) * 2.173333);
}
.collab-nezumi{
  position: absolute;
  right: 2%;
  top: 58%;
  width: calc(195% / 7.5);
  animation:yuraLoop 1.2s ease-in-out infinite alternate 2.2s; transform-origin: bottom center;
}
.event05-cont .show-more p{
  color:#908fd1;
}
.event05-cont .show-more::after,.event05-cont .show-more::before{
  width: 8%;
  background-color: #908fd1;
}
.event-bottom{
    background: url(../images/event-bottom.webp) left bottom/100% auto;
    position: relative;
    height: calc(var(--lp-width) * 0.50933);
    overflow: hidden;
}
.bottom-peter{
  position: absolute;
  left: 8%;
  top: 29%;
  width: calc(313% / 7.5);
  animation: 
    peterWalk 8s linear infinite,        /* 8秒かけて左から右へ（1回だけ） */
    peterHop 1.2s ease-in-out infinite;   /* 1.2秒のジャンプを「無限ループ」 */
}
.peter-bottom{
  position: relative;
  height:calc(var(--lp-width) * 1.01333);
}
.page-top {
  right: 2%;
  width: 50px;
  bottom: 2%;
  position: fixed;
  opacity: 0;
  transform: translate(0, 110%);
  transition: opacity 100ms linear 0ms, transform 250ms ease-in 0ms;
  z-index: 9;
}
.page-top:not(.is-shown) {
  pointer-events: none;
}
.page-top.is-shown {
  opacity: 1;
  transform: translate(0, 0%);
}
.kin{
    background: url(../images/kin-bg.webp) left top;
}
.kin-top{
  padding-bottom: 30px;
}
.kin .show-more{
  background: none;
}
.kin .show-more p{
  color:#7e5c45;
}
.kin .show-more::before,
.kin .show-more::after {
  background-color: #7e5c45; 
}
.pickup{
  position: relative;
}
.pickup-detailbtn{
  position: absolute;
  width:52%;
  top:76%;
  left: 50%;
  transform: translateX(-50%);
}
footer{
  z-index: 1;
  width: var(--lp-width);
  margin: 0 auto;
}
.footer-image img{
  max-width: 100%;
}
.footer-share-wrap{
  background: #fff;

}
.footer-sns{
  margin: 2em auto 3em;
  display: flex;
  justify-content: center;
  gap: 15px;
  padding-left: 0;
}
.footer-sns li{
  width: 47px;
  list-style: none;
}

.lp-left-mouce{
  width: 28%;
  position: absolute;
  left: 12%;
  --y: 64%;
  top: var(--y);
  animation: itemFadeIn 0.5s ease-out forwards 2.2s, yuraLoop 2.5s ease-in-out infinite alternate 3.5s;
  transform-origin: bottom center;
}
.lp-left-bag{
  position: absolute;
  left: 65%;
  --y: 61%;
  top: var(--y);
  width: 25%;
}
.lp-left-basket{
  position: absolute;
  width: 18%;
  --y: 47%;
  left: 65%;
  top: var(--y);
}
.lp-left-btfly1{
  position: absolute;
  width: 11%;
  --y: 49%;
  left: 12%;
  top: var(--y);
  animation: butterfly-flutter 1s ease-in-out infinite;
}
.lp-left-btfly2{
  position: absolute;
  width: 7%;
  --y: 58%;
  left: 82%;
  top: var(--y);
  animation: butterfly-flutter 1s ease-in-out infinite;
}
.lp-left-tommy{
  width: 36%;
  position: absolute;
  --y: 47%;
  left: 31%;
  top: var(--y);
  animation: itemFadeIn 0.5s ease-out forwards 2.1s,yuraLoop 2.8s ease-in-out infinite alternate 3.8s;
  transform-origin: bottom center;
}
.shopnews{
  position: relative;
}
.shopnews-detail{
  position: absolute;
  width: calc(130% / 7.5);
  top: 21.8%;
  right: 11%;
}


.main03_ill_05 {
  width: 39.5%;
  top: 55.2%;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  animation: glassSwing 2.2s ease-in-out infinite;
}
@keyframes glassSwing{
  0%{ transform:translateX(-50%) rotate(-5deg);}
  50%{ transform:translateX(-50%) rotate(5deg);}
  100%{ transform:translateX(-50%) rotate(-5deg);}
}




/* ==========================================
   共通設定：最初は非表示にしておく
   ========================================== */
.ttl-circle,
.ttl-txt1, .ttl-txt2, .ttl-txt3,
.cat, .bunnies, .hedgehog, .jemima, .frog, .kittens, .mcgregor, .mice, .squirrel, .benjamin, .peter,
.kazari01, .kazari02, .kazari03, .kazari04, .kazari05, .kazari06, .kazari07, .kazari08 {
  opacity: 0;
  animation-fill-mode: forwards; /* アニメーション終了時の状態を維持 */
}

/* ==========================================
   ① ttl-circle (円) の登場
   ========================================== */
.lp-section .ttl-circle {
  /* 0秒から開始、0.8秒かけて拡大しながらフェードイン */
  animation: circleIn 0.8s ease-out forwards;
}

@keyframes circleIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* ==========================================
   ② タイトルテキスト3つの順次登場
   ========================================== */
/* 円が0.8秒で出終わるので、そこから0.3秒刻みで発火 */
.lp-section .ttl-txt1 { animation: titleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.8s; }
.lp-section .ttl-txt2 { animation: titleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.1s; }
.lp-section .ttl-txt3 { animation: titleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.4s; }

@keyframes titleIn {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ==========================================
   ③ 周囲のイラスト・飾りの順次フェードイン
   ========================================== */
/* 文字が出終わる「1.7秒後」から、0.1秒刻みで順番にフェードイン */
.lp-section .frog       { animation: itemFadeIn 0.5s ease-out forwards 1.7s ,yuraLoop 2.2s ease-in-out infinite alternate 3.2s; transform-origin: bottom center;}
.lp-section .kittens    { animation: itemFadeIn 0.5s ease-out forwards 1.8s; }
.lp-section .mcgregor   { animation: itemFadeIn 0.5s ease-out forwards 1.9s; }
.lp-section .mice       { animation: itemFadeIn 0.5s ease-out forwards 2.0s; }
.lp-section .hedgehog   { animation: itemFadeIn 0.5s ease-out forwards 2.1s,yuraLoop 2.8s ease-in-out infinite alternate 3.8s; transform-origin: bottom center; }
.lp-section .cat { 
  animation: itemFadeIn 0.5s ease-out forwards 2.2s, yuraLoop 2.5s ease-in-out infinite alternate 3.5s; 
  transform-origin: bottom center; 
}.lp-section .bunnies    { animation: itemFadeIn 0.5s ease-out forwards 2.3s; }
.lp-section .peter      { animation: itemFadeIn 0.5s ease-out forwards 2.4s; }
.lp-section .benjamin   { animation: itemFadeIn 0.5s ease-out forwards 2.5s; }
.lp-section .jemima     { animation: itemFadeIn 0.5s ease-out forwards 2.6s; }
.lp-section .squirrel   { animation: itemFadeIn 0.5s ease-out forwards 2.7s; }

/* 飾り（kazari）シリーズも続けてフェードイン */
.lp-section .kazari01   { animation: itemFadeIn 0.5s ease-out forwards 2.8s; }
.lp-section .kazari02   { animation: itemFadeIn 0.5s ease-out forwards 2.9s; }
.lp-section .kazari03   { animation: itemFadeIn 0.5s ease-out forwards 3.0s; }
.lp-section .kazari04   { animation: itemFadeIn 0.5s ease-out forwards 3.1s; }
.lp-section .kazari05   { animation: itemFadeIn 0.5s ease-out forwards 3.2s; }
.lp-section .kazari06   { animation: itemFadeIn 0.5s ease-out forwards 3.3s; }
.lp-section .kazari07   { animation: itemFadeIn 0.5s ease-out forwards 3.4s; }
.lp-section .kazari08   { animation: itemFadeIn 0.5s ease-out forwards 3.5s; }

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

/* ==========================================
   ④ 特定のキャラクターのピョコピョコ動き（無限ループ）
   ========================================== */
/* すべてのフェードインが完了する「3.5秒後」からループを開始するように一律で遅延を設定。
  「カンマ」で区切ることで、フェードインアニメーションと同時に指定しています。
*/
.lp-section .peter    { animation: itemFadeIn 0.5s ease-out forwards 2.4s, pyokoLoop 1.2s ease-in-out infinite alternate 3.5s; }
.lp-section .kittens  { animation: itemFadeIn 0.5s ease-out forwards 1.8s, pyokoLoop 1.4s ease-in-out infinite alternate 3.5s; }
.lp-section .squirrel { animation: itemFadeIn 0.5s ease-out forwards 2.7s, pyokoLoop 1.0s ease-in-out infinite alternate 3.5s; }
/* ピョコピョコ（少し上に浮き上がりつつ、若干拡大する可愛い動き） */
@keyframes pyokoLoop {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.03); }
}
/* ゆらゆら左右に3度ずつ */
@keyframes yuraLoop {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}
/* 蝶のひらひら */
@keyframes butterfly-flutter {
  0% { transform: scaleX(1) rotate(0deg) translateX(0); opacity: 0.8; }
  25% { transform: scaleX(0.5) rotate(5deg) translateX(2px); opacity: 1; }
  50% { transform: scaleX(1) rotate(0deg) translateX(4px); opacity: 0.8; }
  75% { transform: scaleX(0.5) rotate(-5deg) translateX(2px); opacity: 1; }
  100% { transform: scaleX(1) rotate(0deg) translateX(0); opacity: 0.8; }
}
/* ぴょんと跳ねる */
@keyframes pyon {
  0% {transform: rotate(0deg);}
  2% {transform: rotate(-8deg);}
  3% {transform: rotate(0deg);}
  4% {transform: rotate(-8deg);}
  5% {transform: rotate(0deg);}
  10% {transform: rotate(0deg);}
  11% {transform: rotate(-8deg);}
  12% {transform: rotate(0deg);}
  13% { transform: rotate(-8deg);}
  14% {transform: rotate(0deg);}

  60% {transform: rotate(0deg);}
  61% {transform: rotate(-8deg);}
  62% {transform: rotate(0deg);}
  63% { transform: rotate(-8deg);}
  64% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}
/* ピョコピョコ端から端へ歩く */
@keyframes walk {
  0% { left: calc(-188% / 7.5); /}
  100% {left: 100%; }
}
@keyframes pyokowalk {
  0% {transform: translate(0, 0);}
  50% {transform: translate(-0.6rem, -0.2rem);}
  100% {transform: translate(0, 0);}
}
@keyframes peterJump {
  0% {left: -20rem; /* 左側の画面外（スタート） */ transform: translateY(0) rotate(-10deg); /* 少し前のめり */}
  35% {transform: translateY(-150px) rotate(15deg); /* 最高到達点（上空で体が上を向く） */}
  70% {transform: translateY(0) rotate(-5deg); /* 地面に着地（少し衝撃を吸収） */}
  100% { left: calc(100% + 20rem); /* 右側の画面外へ（ゴール） */transform: translateY(0) rotate(0deg);}
}
/* 左の画面外から、右の画面外へ「まっすぐ」進むアニメーション */
@keyframes peterWalk {
  0% {
    left: calc(-313% / 7.5);
  }
  100% {
    left: calc(100% + calc(313% / 7.5));
  }
}

/* その場で「ぴょん」と1回跳ねて着地するアニメーション */
@keyframes peterHop {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-60px); }
}
@keyframes hiyokowalk {
  0%, 100% {
    left: 20%;
    transform: scaleX(1); /* 最初は右向き（元の向き） */
  }
  45% {
    left: 30%;           /* 画面の10%の位置まで進む */
    transform: scaleX(1); /* まだ向きはそのまま */
  }
  50% {
    left: 30%;           /* 同じ位置に留まったまま */
    transform: scaleX(-1);/* クルッと左向きに反転！ */
  }
  95% {
    left: 20%;             /* 元の位置（0）まで戻る */
    transform: scaleX(-1);/* 向きは左向きのまま */
  }
  /* 100%に戻るときに、再び scaleX(1) になって右を向きます */
}

/* --------------------------------
  720px以下 sp
-------------------------------- */
@media (max-width: 720px) {
  .pc{
    display: none!important;
  }
  .sp{
    display: block!important;
  }
  footer {
  width: 100%;
}
#fv{
  aspect-ratio: 750 / 1366;
  height: auto;
  background-size: cover;
}
#intro {
    aspect-ratio: 750 / 1057;
    height: auto;
  }
  .event01 {
    /* aspect-ratio: 1500 / 4908; */
    height: auto;
}
  .event02 {
    aspect-ratio: 1500 / 4170;
    height: auto;
}
  .event02-mc {
    bottom: 5%;
  }
  .lp-section .event02-nezumi {
  bottom: 4%;
  }
  .popup{
    aspect-ratio: 750 / 1690;
    height: auto;
  }
  .camp-ttl{
    aspect-ratio: 750 / 811;
    height: auto;
  }
  .event03-top{
    aspect-ratio: 1500 / 1495;
    height: auto;
  }
    .event04-top{
    aspect-ratio: 750 / 2419;
    height: auto;
  }
  .collab-top{
    /* aspect-ratio: 1500 / 2428; */
    height: auto;
  }
  .collab-cont .accordion{
      /* aspect-ratio: 1500 / 2206; */
    height: auto;
  }
    .collab-menu{
    /* aspect-ratio: 750 / 1630; */
    height: auto;
  }
  .event-bottom{
    aspect-ratio: 750 / 382;
    height: auto;
  }
  .peter-bottom{
    aspect-ratio: 750 / 760;
    height: auto;

  }
  .show-more p {
  font-size: calc(var(--lp-width) * 0.032);
  }

.fv-logo{
  width: calc(190% / 7.5);
  top: 4%;
  left: 5%;
}
.lp-section .ttl-circle{
  top:27%;
}.lp-section .ttl-txt1{
  width: calc(687% / 7.5);
  top: 42%;
  left: 5%;
}.lp-section .ttl-txt2{
  width: calc(263% / 7.5);
  top: 35.5%;
  left: 33.5%;
}
.lp-section .ttl-txt3{
  width: calc(268% / 7.5);
  top: 59.5%;
  left: 32.5%;
}.lp-section .peter{
  width: calc(240% / 7.5);
  bottom: 3.8%;
  right: 33.2%;
}.lp-section .cat{
  width: calc(198% / 7.5);
  top: 62.5%;
  right: 1%;
}.lp-section .bunnies{
  width: calc(266% / 7.5);
  bottom: 5%;
  right: 2%;
}.lp-section .hedgehog{
  width: calc(128% / 7.5);
  top: 22%;
  right: 7%;
}.lp-section .jemima{
  width: calc(231% / 7.5);
  bottom: 10.8%;
  left: 0;
}.lp-section .frog{
  width: calc(127% / 7.5);
  top: 19.5%;
  left: 5%;
}.lp-section .kittens{
  width: calc(253% / 7.5);
  top: 10%;
  left: 27%;
}.lp-section .mcgregor{
  width: calc(115% / 7.5);
  top: 13%;
  right: 3%;
}.lp-section .mice{
  width: calc(167% / 7.5);
  top: 4%;
  right: 20.5%;
}.lp-section .kazari04{
  width: calc(215% / 7.5);
  top: 2.5%;
  left: 32%;
}.lp-section .kazari05{
  width: calc(148% / 7.5);
  top: 17.5%;
  right: 22%;
}.lp-section .kazari01{
  width: calc(108% / 7.5);
  top: 18.5%;
  left: 16%;
}.lp-section .kazari06{
  width: calc(147% / 7.5);
  bottom: 3.3%;
  left: 4%;
}.lp-section .kazari07{
  width: calc(100% / 7.5);
  top: 55%;
  left: 1%;
}.lp-section .squirrel{
  width: calc(107% / 7.5);
  top: 63%;
  left: 1.5%;
}.lp-section .kazari02{
  width: calc(108% / 7.5);
  top: 48%;
  right: 1%;
}.lp-section .kazari03{
  width: calc(48% / 7.5);
  top: 71%;
  left: 34%;
}.lp-section .kazari08{
  width: calc(84% / 7.5);
  top: 71.8%;
  right: 22.75%;
}.lp-section .benjamin{
  width: calc(148% / 7.5);
  bottom: 3.5%;
  left: 19%;
}
#fv {
  background: url(../images/fv-bg_sp.webp) top center/ contain no-repeat;
}

}