@charset "utf-8";
/**
 * Top Page
 */
/* アニメーション */
@keyframes bounce-decoImg {
  0% { transform: translate(0, 200px); }
  75% { transform: translate(0, -10px); }
  100% { transform: translate(0, 0); } }
@keyframes slidIn {
  0% { transform: translateY(30px);opacity: 0; }
  100% { transform: translateY(0);opacity: 1; } }
.js-scroll.js-scroll-slideIn{
  opacity: 0;
  transform: translateY(30px);
}
.js-scroll.js-scroll-slideIn.js-active{
  animation: slidIn 0.5s .2s forwards;
}

.topPage .aside-main{
  background-color: #0D57A7;
}
@media screen and (max-width: 400px){
  body{
    font-size: 16px;
  }
  .note{
    font-size: 14px;
  }
}

/* MV */
.topMv {
  background: url(../img/index/mv_back.png) top 216px center / contain no-repeat;
  padding: 13px 0 0;
}
.topMv .sns-link{
  padding-right: 10px;
}
.topMv .sns-link a{
  padding: 0 4px;
  width: 41px;
}
.topMv .mv_ttl{
  position: relative;
  margin: 16px auto 0;
  max-width: 92%;
}
.topMv .mv_ttl .mv_ttl_balloon{
  position: absolute;
  top: -8%;
  left: 3%;
  width: 28.1%;
}
.topMv.js-scroll .mv_ttl .mv_ttl_balloon{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
}
.topMv.js-active .mv_ttl .mv_ttl_balloon{
  animation: mv-balloon-bounce 0.7s 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}
@keyframes mv-balloon-bounce {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(30px);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) translateY(-6px);
  }
  80% {
    transform: scale(0.96) translateY(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.topMv .mv_ttl::before,
.topMv .mv_ttl::after{
  content: "";
  display: block;
  position: absolute;
  top: 48.5%;
  width: 18%;
  height: 20%;
  transform-origin: center;
}
.topMv .mv_ttl::before{
  background: url(../img/index/ico_character_dog.svg) center center / 100% 100% no-repeat;
  left: 11%;
}
.topMv .mv_ttl::after{
  background: url(../img/index/ico_character_cat.svg) center center / 100% 100% no-repeat;
  right: 11%;
}
.mv_pickup{
  margin-top: 38px;
  position: relative;
}
.mv_pickup .mv_pickup_photo{
  background: url(../img/index/mv_frame1.png) center center / 100% 100% no-repeat;
  padding: 11px 15px;
  margin-inline: auto;
  max-height: 268px;
  position: relative;
  z-index: 2;
  width: 66.7%;
}
.mv_pickup .mv_pickup_photo::before,
.mv_pickup .mv_pickup_photo::after{
  content: "";
  display: block;
  position: absolute;
}
.mv_pickup .mv_pickup_photo::before{
  background: url(../img/index/mv_pad1.png) right bottom / 100% 100% no-repeat;
  right: calc(100% + 4px);
  bottom: 132px;
  width: 50px;
  height: 88px;
}
.mv_pickup .mv_pickup_photo::after{
  background: url(../img/index/mv_pad2.png) left bottom / 100% 100% no-repeat;
  left: calc(100% + 7px);
  bottom: 74px;  
  width: 48px;
  height: 54px;
}
.mv_sliders{
  display: flex;
  overflow: hidden;
  margin-top: 36px;
}
.mv_slider{
  display: flex;
  gap: 12px;
  list-style: none;
  margin-left: 15px;
  padding: 0;
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.mv_slider .item{
  background: url(../img/index/mv_frame2.png) center center / 100% 100% no-repeat;
  padding: 8px 9px;
  width: calc(102px + (9px * 2));
}
.mv_slider .item:nth-of-type(2n){
  background-image: url(../img/index/mv_frame3.png);
}
.mv_slider .item:nth-of-type(3n){
  background-image: url(../img/index/mv_frame4.png);
}
.mv_slider .item:nth-of-type(4n){
  background-image: url(../img/index/mv_frame5.png);
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}


/* Common */
.bg-yellow{
  background-color: #FFFFCD;
}
.container{
  width: calc(100% - (10px * 2));
}
.top-section .container{
  padding-inline: 15px;
  width: 100%;
}
.deco{
  position: absolute;
}
.text{
  line-height: 2.1;
}
.wht-box{
  border-radius: 12px;
}


/* About */
.about{
  padding-block: 98px 252px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.about::after{
  content: "";
  display: block;
  background: url(../img/index/box_frame.svg) bottom center / 427px 100% no-repeat;
  height: 123px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.about .deco-box{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.about .deco2,.about .deco3,.about .deco4{
  position: absolute;
  z-index: 2;
}
.about .deco2{
  bottom: -1px;
  left: 0;
  width: 175px;
}
.about .deco-box.js-scroll .deco2{
  transform: translate(-77%, 0%);
}
.about .deco-box.js-active .deco2{
  animation: target-deco2 1s .5s forwards;
}
@keyframes target-deco2 {
  0%   { transform: translate(-77%, 0); }
  25%  { transform: translate(-58%, -8px); }  /* 1回目の跳ね */
  49%  { transform: translate(-38%, 0); }
  50%  { transform: translate(-38%, 0); }     /* 小休止（不要なら削除可） */
  75%  { transform: translate(-19%, -8px); }  /* 2回目の跳ね */
  100% { transform: translate(0, 0); }}
.about .deco3{
  bottom: 111px;
  left: 46%;
  width: 69px;
}
.about .deco-box.js-scroll .deco3{
  transform: translate(0, 28px);
}
.about .deco-box.js-active .deco3{
  animation: about-deco3 0.5s 0.2s forwards;
}
@keyframes about-deco3 {
  0% { transform: translate(0, 28px); }
  75% { transform: translate(0, -2px); }
  100% { transform: translate(0, 0); } }
.about .deco4{
  bottom: 100px;
  right: 0;
  width: 92px;
}
.about .deco-box.js-scroll .deco4{
  transform: translate(82%, 46%);
}
.about .deco-box.js-active .deco4{
  animation: target-deco4 0.7s ease-in-out .5s forwards;
}
@keyframes target-deco4 {
    0% { transform: translate(82%, 46%); }
    75% { transform: translate(0, -5%); }
    100% { transform: translate(0, 0); } }
@keyframes pad-anime{
  0%{ width:0px; }
  100%{ width:243px; }
}
.about_ttl{
  margin-inline: auto;
  width: 282px;
  position: relative;
}
.about_ttl::before{
  background: url(../img/index/about_animal1_deco.png) bottom center / contain no-repeat;
  content: "";
  display: block;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 112px;
  height: 31px;
  width: 44px;
}
.about_ttl img:not(.deco){
  position: relative;
  z-index: 1;
}
.about_ttl .deco{
  width: 42px;
  top: -30px;
  left: 54px;
  z-index: 2;
}
.about_ttl.js-active::before{
  animation: about-right-bound 2s ease-in-out .6s forwards;
}
.about_ttl.js-active .deco1{
  animation: jump2 2s ease-in-out .6s forwards;
}
@keyframes jump2 {
  0% { transform: translateY(0); }
  10% { transform: translateY(-6px); }
  18% { transform: translateY(0); }
  26% { transform: translateY(-6px); }
  32% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes about-right-bound {
  0% { transform: translate(0); }
  10% { transform: translate(3px, -3px); }
  30% { transform: translate(3px, -3px); }
  40% { transform: translate(0); }
  100% { transform: translate(0); }
}
.about .text{
  color: #FFF;
  margin-top: 27px;
}
.about .text_strong{
  color: #FFF;
  font-family: "MFW-SuboMin2-B";
  font-weight: bold;
  font-size: 18px;
  letter-spacing: .1em;
  margin-top: 30px;
  text-align: center;
}
.about .text_strong span{
  display: inline-block;
  padding-bottom: 7px;
  position: relative;
}
.about .text_strong span::before{
  background: url(../img/line_wave.svg) left bottom / auto 4px repeat-x;
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.about .text_strong span::after{
  content: "";
  background: url(../img/index/about_good.svg) center center / contain no-repeat;
  display: block;
  height: 42px;
  width: 35px;
  position: absolute;
  bottom: -19px;
  left: calc(100% + 16px);
  z-index: 0;
}
.about .text_strong.js-scroll span::before{
  clip-path: inset(0 100% 0 0);
}
.about .text_strong.js-active span::before{
  animation: wavy-mask .6s ease-out .6s forwards;
}
@keyframes wavy-mask {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
.about .text_strong.js-active span::after{
  animation: furi-furi 1.3s linear 1.2s forwards;
}
@keyframes furi-furi {
  /* --- 1往復目 --- */
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-8deg); }
  20% { transform: rotate(8deg); }
  /* --- 2往復目 --- */
  30% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  /* --- 中央に戻って静止 --- */
  50%, 100% { transform: rotate(0deg);}
}
.about .about_how{
  background: #FFF;
  border-radius: 100vh;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  padding: 9px 26px;
  margin-top: 33px;
}

/* Frame */
.frameSection{
  background: #FFF67F;
  color: #0D57A7;
  margin-top: -25px;
  padding-block: 0 260px;
  position: relative;
  z-index: 1;
}
.frameSection::after{
  content: "";
  display: block;
  background: url(../img/index/box_frame2.svg) bottom right -27px / 458px 100% no-repeat;
  height: 137px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  isolation: isolate;
}
.frameSection .frame_ttl_sub{
  font-size: 18px;
  border-bottom: 3px solid #0D57A7;
  text-align: center;
  padding-bottom: 5px;
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  width: fit-content;

}
.frameSection .frame_ttl_sub::before,
.frameSection .frame_ttl_sub::after{
  content: "";
  position: absolute;
}
.frameSection .frame_ttl_sub::after{
  bottom: -6px;
  left: 50%;
  z-index: -1;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 3px solid;
  border-color: #0D57A7 #0D57A7 transparent transparent;
  background-color: #FFF67F;
  rotate: 135deg;
  translate: -50% 0;
}
.frameSection .frame_ttl{
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: .04em;
  margin-top: 15px;
  text-align: center;
}
.frameSection .frame_ttl .large{
  font-size: 31px;
  letter-spacing: .13em;
}
.frameSection .frame-img{
  margin: 68px auto 0;
  position: relative;
  width: 92%;
}
.frameSection .frame-img .frame_balloon{
  position: absolute;
}
.frameSection .frame-img .frame_balloon1{
  top: -6.5%;
  left: 37.5%;
  width: 101px;
}
.frameSection .frame-img .frame_balloon2{
  top: 8.5%;
  left: -4%;
  width: 96px;
}
.frameSection .frame-img .frame_balloon3{
  bottom: -4%;
  right: -2%;
  width: 94px;
}
.frameSection .frame-img.js-scroll .frame_balloon1,
.frameSection .frame-img.js-scroll .frame_balloon2{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transform-origin: right bottom;
}
.frameSection .frame-img.js-scroll .frame_balloon3{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transform-origin: left top;
}
.frameSection .frame-img.js-active .frame_balloon1{
  animation: frame-balloon-bounce 0.6s 0.2s ease-in-out forwards;
}
.frameSection .frame-img.js-active .frame_balloon2{
  animation: frame-balloon-bounce 0.6s 0.4s ease-in-out forwards;
}
.frameSection .frame-img.js-active .frame_balloon3{
  animation: frame-balloon-bounce 0.6s 0.6s ease-in-out forwards;
}
@keyframes frame-balloon-bounce {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(30px);
  }
  60% {
    opacity: 1;
    transform: scale(1.04) translateY(-4px);
  }
  80% {
    transform: scale(0.98) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.frameSection .deco1{
  left: 37.5%;
  bottom: 109px;
  width: 49px;
}
.frameSection .deco2{
  left: 32%;
  bottom: 169px;
  width: 38px;
}
.frameSection .deco3{
  right: 49px;
  bottom: 50px;
  width: 100px;
}
.frameSection .deco2.js-scroll{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transform-origin: right bottom;
}
.frameSection .deco1.js-scroll,
.frameSection .deco3.js-scroll{
  transform: translate(0, 200px);
}
.frameSection .deco2.js-active{
  animation: frame-balloon-bounce 0.6s .9s ease-in-out forwards;
}
.frameSection .deco1.js-active{
  animation: bounce-decoImg 0.55s .2s forwards;
}
.frameSection .deco3.js-active{
  animation: bounce-decoImg 0.55s .2s forwards;
}

/* present */
.present{
  background: #0D57A7;
  margin-top: -92px;
  padding-block: 70px 227px;
  position: relative;
  z-index: 1;
}
.present::after {
  content: "";
  display: block;
  background: url(../img/index/box_frame3.svg) bottom right -16px / 428px 100% no-repeat;
  height: 114px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.present .deco-box{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.present .deco4{
  bottom: 8px;
  left: 106px;
  width: 59px;
}
.present .js-active .deco4{
  animation: jump1 1s ease-in-out .2s forwards;
}
.present .deco4_deco{
  bottom: 116px;
  left: 157px;
  width: 60px;
}
.present .js-scroll .deco4_deco{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transform-origin: left bottom;
}
.present .js-active .deco4_deco{
  animation: frame-balloon-bounce 0.5s 0.1s ease forwards;
}
.present .deco5{
  bottom: 90px;
  right: 85px;
  width: 32px;
}
.present .js-active .deco5{
  animation: jump2 2s ease-in-out .6s forwards;
}
@keyframes jump1 {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-10px);
  }
  30% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
.present .prs_ttl{
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
  font-size: 28px;
}
.present .prs_ttl::before{
  content: "";
  display: block;
  background: url(../img/index/prs_title_ico.png) center center / contain no-repeat;
  height: 107px;
  width: 108px;
}
.present .js-scroll .prs_ttl::before{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transform-origin: center bottom;
}
.present .js-active .prs_ttl::before{
  animation: frame-balloon-bounce 0.6s 0.3s ease-in-out forwards;
}
.present .deco1{
  left: -15px;
  top: 31px;
  width: 123px;
}
.present .js-scroll .deco1{
  transform: translate(-95%, 51%);
}
.present .js-active .deco1{
  animation: commonPre-deco1 0.5s .8s forwards;
}
@keyframes commonPre-deco1 {
  0% {transform: translate(-95%, 51%); }
  75% { transform: translate(5%, -5%); }
  100% { transform: translate(0, 0); } }
.present .deco2{
  right: -15px;
  top: 31px;
  width: 123px;
}
.present .js-scroll .deco2{
  transform: translate(95%, 51%);
}
.present .js-active .deco2{
  animation: commonPre-deco2 0.5s .8s forwards;
}
@keyframes commonPre-deco2 {
    0% {transform: translate(95%, 51%); }
    75% { transform: translate(-5%, -5%); }
    100% { transform: translate(0, 0); } }
.prs-box{
  background: #FFFFCD;
  padding: 80px 26px 55px;
  position: relative;
}
.prs-box .prs_title_label{
  position: absolute;
  top: -41px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 295px;
  width: 86%;
}
.present .prs_winnner{
  background: #FFF;
  color: #0D57A7;
  margin-top: 108px;
  padding: 55px 22px 50px;
}
.prs_winnner .text{
  line-height: 1.6;
  font-size: 20px;
}
.prs_winnner .prs_num{
  border: 2px solid #0D57A7;
  border-radius: 100vw;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  padding: 5px 20px;
}
.prs_winnner .note{
  line-height: 1.5;
}
.present .prs_ttl2_sub{
  color: #FFF;
  font-size: 16px;
  letter-spacing: .15em;
  line-height: 1.8;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
  margin-top: 75px;
}
.present .prs_ttl2_sub::before,
.present .prs_ttl2_sub::after{
  content: "";
  display: block;
  background: #FFF;
  border-radius: 5px;
  height: 55px;
  width: 2.5px;
}
.present .prs_ttl2_sub::before{
  rotate: -23deg;
}
.present .prs_ttl2_sub::after{
  rotate: 23deg;
}
.present .prs_ttl2{
  color: #FFF;
  font-size: 21px;
  margin-top: 13px;
}
.present .prs_ttl3{
  color: #FFF;
  font-size: 21px;
  margin-top: 25px;
  line-height: 1.7;
  position: relative;
}
.present .prs_ttl3::before,
.present .prs_ttl3::after{
  content: "";
  display: block;
  position: absolute;
}
.present .prs_ttl3::before{
  background: url(../img/index/prs_star1.png) bottom center / contain no-repeat;
  height: 132px;
  width: 70px;
  left: 10px;
  bottom: -16px;
}
.present .prs_ttl3::after{
  background: url(../img/index/prs_star2.png) center center / contain no-repeat;
  height: 19px;
  width: 18px;
  right: 16px;
  top: -27px;
}
.present .deco3{
  bottom: -25px;
  right: 14px;
  width: 83px;
}
.present .js-scroll .deco3{
  transform: translate(47%, 0);
}
.present .js-active .deco3{
  animation: present-deco3 .8s .6s forwards;
}
@keyframes present-deco3 {
    0% {transform: translate(47%, 0%); }
    25% {transform: translate(35%, -8px); }
    49% {transform: translate(23%, 0); }
    50% {transform: translate(23%, 0); }
    75% {transform: translate(12%, -8px); }
    100% { transform: translate(0, 0); } }
.present .prs_special1{
  margin-top: 115px;
}
.prs-box .item:not(:first-of-type){
  margin-top: 60px;
}
.prs-box .prs_photo{
  text-align: center;
  margin-inline: auto;
  position: relative;
  width: 98%;
}
.prs-box .prs_photo .prs_num{
  background: url(../img/index/prs_bg_heart_red.svg) center center / contain no-repeat;
  position: absolute;
  top: -7%;
  right: -7%;
  padding-bottom: 8px;
  height: 105px;
  max-width: 111px;
  width: 38%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prs-box .prs_photo .prs_num.prs_num-left{
  left: -5%;
  right: auto;
}
.prs-box .prs_photo .prs_num .prs_num_text{
  color: #FFF;
  font-family: "MFW-SuboMin2-B";
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
}
.prs-box .prs_photo .prs_num .prs_num_text .fontL{
  font-size: 20px;
}
.prs-box .prs_photo .prs_num .prs_num_text .fontS{
  font-size: 12px;
  display: inline-block;
  line-height: 1.3;
  padding-block: 2px;
}
.prs-box .prs_photo .prs_num .prs_num_text .num{
  font-size: 19px;
}
.prs-box .prs_name{
  font-size: 17px;
  line-height: 1.6;
  margin-top: 25px;
  text-align: center;
}
.prs-box .prs_name .note{
  font-size: 15px;
}
.present .prs_special2{
  margin-top: 100px;
}
.prs-box.prs_special2 .prs_photo .prs_num{
  background-image: url(../img/index/prs_bg_heart_purple.svg);
}

/* morePre */
.morePre{
  background-color: #37BEF0;
  margin-top: -30px;
  padding-block: 58px 240px;
  position: relative;
  z-index: 1;
}
.morePre::after {
  content: "";
  display: block;
  background: url(../img/index/box_frame4.svg) bottom right -12px / 425px 100% no-repeat;
  height: 123px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.morePre .deco1{
  top: 25px;
  left: 16px;
  width: 96px;
}
.morePre .js-scroll .deco1{
  opacity: 0;
  transform: translate(-10px, -30px) rotate(-22deg);
}
.morePre .js-active .deco1{
  opacity: 1;
  transform: translate(0, 0) rotate(0);
  transition: .7s .3s ease-in-out;
}
.morePre .deco2{
  top: -56px;
  right: 96px;
  width: 68px;
}
.morePre .js-scroll .deco2{
  opacity: 0;
  transform: translate(10px, -30px) rotate(22deg);
}
.morePre .js-active .deco2{
  opacity: 1;
  transform: translate(0, 0) rotate(0);
  transition: .7s .3s ease-out;
}
.morePre .deco3{
  top: 12px;
  right: -4px;
  width: 105px;
}
.morePre .js-scroll .deco3{
  opacity: 0;
  transform: translate(10px, -30px) rotate(-22deg);
}
.morePre .js-active .deco3{
  opacity: 1;
  transform: translate(0, 0) rotate(0);
  transition: .7s .1s ease-in-out;
}
.morePre .morePre_ttl_sub{
  margin: 0 auto 22px;
  width: 130px;
}
.morePre .js-scroll .morePre_ttl_sub{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transform-origin: center bottom;
}
.morePre .js-active .morePre_ttl_sub{
  animation: frame-balloon-bounce 0.6s 0.6s ease-in-out forwards;
}
.morePre .morePre_ttl_sub2{
  color: #FFF;
  font-size: 20px;
  letter-spacing: .15em;
  line-height: 1.2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 13px;
}
.morePre .morePre_ttl_sub2::before,
.morePre .morePre_ttl_sub2::after{
  content: "";
  display: block;
  background: #FFF;
  border-radius: 5px;
  height: 1.2em;
  width: 3px;
}
.morePre .morePre_ttl_sub2::before{
  rotate: -23deg;
}
.morePre .morePre_ttl_sub2::after{
  rotate: 23deg;
  margin-left: -.35em;
}
.morePre .morePre_ttl{
  color: #FFF;
  font-size: 23px;
  line-height: 1.6;
  margin-top: 10px;
  text-align: center;
  position: relative;
}
.morePre .morePre_ttl::before{
  content: "";
  display: block;
  background: url(../img/index/morePre_star.png) center center / contain no-repeat;
  height: 323px;
  width: 327px;
  position: absolute;
  bottom: -20px;
  left: 53%;
  transform: translateX(-50%);
  z-index: -1;
}
.morePre .prs_more1{
  background: #FFF;
  margin-top: 87px;
  padding: 57px 20px 0;
}
.morePre .prs_more1 .prs_name{
  font-size: 24px;
  line-height: 1.3;
  margin: 0 -13px;
}
.morePre .prs_more1 .prs_name .fontS{
  font-size: 20px;
  font-feature-settings: "palt";
}
.morePre .prs_more1 .prs_num{
  background: #0D57A7;
  border-radius: 100vw;
  color: #FFF;
  font-size: 17px;
  font-feature-settings: "palt";
  letter-spacing: .1em;
  line-height: 1;
  padding: 8px 25px;
  margin-inline: auto;
  text-align: center;
  width: fit-content;
}
.morePre .prs_more1 .prs_photo{
  width: 104%;
  margin-inline: -2%;
}
.morePre .eposBlock{
  background: #FFFFCD;
  border-radius: 0 0 12px 12px;
  padding: 45px 30px 50px;
  margin: 30px -20px 0;
}
.morePre .eposBlock .prs_title2{
  color: #0091FF;
  font-size: 20px;
  letter-spacing: -.05em;
  text-align: center;
}
@media screen and (max-width: 400px){
  .morePre .deco1{
    left: 0;
  }
}


/* 投稿一覧 */
.topGallery{
  background-color: #000064;
  padding-block: 0 233px;
  position: relative;
  margin-top: -13px;
  z-index: 1;
}
.topGallery::after {
  content: "";
  display: block;
  background: url(../img/index/box_frame5.svg) bottom left -22px / 449px 100% no-repeat;
  height: 131px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.topGallery .deco1{
  top: -157px;
  left: 32%;
  width: 163px;
}
.topGallery .deco1::before,
.topGallery .deco1::after{
  content: "";
  display: block;
  background: url(../img/index/gallery_heart.png) center center / contain no-repeat;
  height: 23px;
  width: 21px;
  position: absolute;
  top: 0;
}
.topGallery .deco1::before{
  left: -18px;
}
.topGallery .deco1::after{
  right: 1px;
  background-image: url(../img/index/gallery_heart2.png);
}
.topGallery .deco1.js-scroll::before,
.topGallery .deco1.js-scroll::after{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
}
.topGallery .deco1.js-scroll::before{
  transform-origin: right bottom;
}
.topGallery .deco1.js-scroll::after{
  transform-origin: left bottom;
}
.topGallery .deco1.js-active::before,
.topGallery .deco1.js-active::after{
  animation: frame-balloon-bounce 0.6s 0.2s ease-in-out forwards;
}
.topGallery .deco1.js-active::after{
  animation-delay: 0.4s;
}
.topGallery .deco2{
  top: 42px;
  left: -10px;
  width: 61px;
}
.topGallery .js-scroll .deco2{
  transform: translate(-58%, 35%);
}
.topGallery .js-active .deco2{
  animation: topGallery-deco2 0.55s .2s forwards;
}
@keyframes topGallery-deco2 {
    0% {transform: translate(-58%, 35%); }
    75% { transform: translate(-2%, -2%); }
    100% { transform: translate(0, 0); } }
.topGallery .deco3{
  top: -5px;
  right: -12px;
  width: 73px;
}
.topGallery .js-scroll .deco3{
  transform: translate(49%, 35%);
}
.topGallery .js-active .deco3{
  animation: topGallery-deco3 0.55s .2s forwards;
}
@keyframes topGallery-deco3 {
    0% {transform: translate(49%, 35%); }
    75% { transform: translate(-2%, -2%); }
    100% { transform: translate(0, 0); } }
.topGallery .gallery-wrap{
  position: relative;
}
.topGallery .gallery-wrap .deco4{
  bottom: 100%;
  left: 21px;
  width: 51px;
}
.topGallery .gallery-wrap .deco4.js-scroll{
  transform: translate(-47%, 0%);
}
.topGallery .gallery-wrap .deco4.js-active{
  animation: topGallery-deco4 .8s .8s forwards;
}
@keyframes topGallery-deco4 {
    0% {transform: translate(-47%, 0%); }
    25% {transform: translate(-35%, -8px); }
    49% {transform: translate(-23%, 0); }
    50% {transform: translate(-23%, 0); }
    75% {transform: translate(-12%, -8px); }
    100% { transform: translate(0, 0); } }
.topGallery .gallery-wrap:not(:has(.item)) .deco4{
  display: none;
}
.topGallery .deco5{
  bottom: 57px;
  left: 43px;
  width: 96px;
}
.topGallery .deco5.js-scroll{
  transform: translate(0, 200px);
}
.topGallery .deco5.js-active{
  animation: bounce-decoImg 0.7s 0s forwards;
}
.topGallery .deco6{
  bottom: 119px;
  left: 39%;
  width: 27px;
  z-index: 4;
}
.topGallery .deco6.js-active{
  animation: jump2 2s ease .4s forwards;
}
.topGallery .deco6_deco{
  bottom: 147px;
  left: 47%;
  width: 42px;
}
.topGallery .deco6_deco.js-scroll{
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transform-origin: left bottom;
}
.topGallery .deco6_deco.js-active{
  animation: frame-balloon-bounce 0.6s 0.4s ease-in-out forwards;
}
.topGallery .deco7{
  bottom: 81px;
  right: 41px;
  width: 110px;
  z-index: 4;
}
.topGallery .btn{
  font-size: 14px;
  padding-left: 25px;
}
.topGallery .btn-border-arrow::after{
  margin-left: 10px;
  width: 13px;
}
.gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 60px;
}


/* 応募方法 */
.method{
  background-color: #0D57A7;
  margin-top: -52px;
  padding-top: 30px;
  position: relative;
  z-index: 1;
}
.method > .container{
  padding-top: 80px;
  margin-top: -80px;
}
.ttl.ttl-pad{
  color: #FFF;
  font-size: 22px;
  letter-spacing: .15em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  text-align: center;
}
.ttl.ttl-pad::before,
.ttl.ttl-pad::after{
  content: "";
  display: block;
  background: url(../img/ico_pad_wht.svg) center center / contain no-repeat;
  height: .95em;
  width: .95em;
}
.method .wht-box{
  padding: 40px 30px 50px;
  margin-top: 18px;
}
.method .wht-box .text{
  line-height: 1.6;
}
.method .method_step .item{
  background-color: #E65B7A;
  border-radius: 100vh;
  display: flex;
  /* align-items: center; */
  color: #FFF;
  padding: 20px 10px 20px 25px;
  position: relative;
  min-height: 91px;
}
.method .method_step .item:not(:first-child){
  margin-top: 30px;
}
.method .method_step .item .num{
  display: flex;
  align-items: center;
  max-width: 34px;
  width: 13%;
}
.method .method_step .item .text{
  border-left: 2px solid #FFF;
  line-height: 1.6;
  padding-left: 18px;
  margin-left: 17px;
  display: flex;
  align-items: center;
}
.method .method_step .item a{
  font-size: 14px;
}
.method .method_step .item:not(:last-child)::after{
  content: "";
  display: block;
  background: url(../img/index/method_step_arrow.png) center center / contain no-repeat;
  margin-block: 10px;
  height: 10px;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}
.method .ttl-border{
  border-color: #0D57A7;
}
@media screen and (max-width: 400px){
  .method .wht-box{
    padding-inline: 20px;
  }
}


/* キャンペーン概要とスポンサー */
.outline{
  padding-top: 55px;
  position: relative;
}
.ttl.outline_ttl{
  font-size: 18px;
}


 /* スポンサー */
.sponsor{
  padding-block: 55px 85px;
  position: relative;
}
.ttl.sponsor_ttl{
  font-size: 18px;
 }
 .ttl.sponsor_ttl .ttt_inner{
  letter-spacing: .5em;
  margin-right: -.5em;
 }
.sponsor .logos{
  background: #FFF;
  border-radius: 12px;
  padding: 25px 10px 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 22px 0;
}
.sponsor .logos a{
  display: block;
  height: 52px;
  width: 50%;
}
.sponsor .logos a img{
  margin-inline: auto;
  max-width: initial;
  height: 100%;
  width: auto;
}
.sponsor .logos .logo_compet{
  height: 42px;
  padding-bottom: 5px;
}
.sponsor .logos .logo_hoshino{
  padding-block: 10px 5px;
  height: 68px;
  width: 100%;
}
.sponsor .logos .logo_petisyour{
  height: 58px;
}
.sponsor .logos .logo_necocia{
  height: 55px;
}
.sponsor .logos .logo_animalcampus{
  height: 67px;
}
.sponsor .logos .logo_epos{
  padding-block: 8px;
  height: 51px;
}

/* バナー */
.bannerSection{
  padding-block: 0 260px;
  position: relative;
  z-index: 1;
}
.bannerSection:after {
  content: "";
  display: block;
  background: url(../img/index/box_frame6.svg) bottom left -10px / 427px 100% no-repeat;
  height: 123px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.bannerSection .deco1{
  bottom: 89px;
  left: 44px;
  width: 330px;
  z-index: 4;
}


/* フッター */
.top-footer{
  background: #FFF;
  margin-top: -50px;
  padding-bottom: 30px;
  position: relative;
  z-index: 1;
}
.top-footer .container{
  max-width: 335px;
}


/* クローズ */
.mv_close{
  background: url(../img/index/mv_close_bg.png) center center / 100% 100% no-repeat;
  margin: -20px auto 0;
  padding: 20px 10px 28px;
  position: relative;
  text-align: center;
  width: 78%;
  z-index: 2;
}
.mv_close p{
  color: #FFF;
  font-size: 15px;
  letter-spacing: .05em;
  line-height: 1.5;
  text-align: center;
}
.mv_close p:first-child{
  border-bottom: 1.5px solid #FFF;
  display: inline-block;
  font-weight: bold;
  padding-bottom: 2px;
  margin-bottom: 6px;
}
.mv_close p:last-child{
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .1em;
  margin-top: 10px;
  margin-left: .5em;
}
@media screen and (max-width: 400px){
  .mv_close p{
    font-size: 13px;
  }
  .mv_close p:last-child{
    font-size: 15px;
  }
}

/* 結果発表 */
.mv_result{
  display: block;
  max-width: 300px;
  margin: 0 auto 50px;
  position: relative;
  top: -16px;
  animation-delay: .35s !important;
  width: 75%;
  z-index: 2;
}
.mv_result img{
  filter: drop-shadow(4px 4px 0 #C93030);
  transition: .3s;
  position: relative;
}
.mv_result:hover img{
  transform: translate(3px, 3px);
  filter: drop-shadow(1px 1px 0 #C93030);
}