@charset "UTF-8";

body{
  width: 100%;
  height: auto;
  
  overflow-x: hidden;
}
.contents-wrapper{
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 750px;
}

.contents-wrapper div{
  margin-top: -3px;
  
}
/* .float-bana{
  position: fixed;
  top: 0px;
  left: calc(50% + 375px);
  transform: translateX(-100%);
  width: 208px;
  height: 100px;
  z-index: 1000;
} */
/* @media screen and (max-width: 798px) {
  .float-bana {
    left: unset;
    transform: unset;
    width: 150px;
    height: 75px;
    right: 0;
    position:fixed;
  }
  .contents-wrapper{
    width: 100%;
  }
} */
.float-bana{
  position: fixed;
  top: 0px;
  width: 150px;
  height: auto;
  z-index: 1000;
  left: calc(50% + 375px);
  transform: translateX(-100%) translateZ(0); /* GPUアクセラレーション追加 */
  -webkit-transform: translateX(-100%) translateZ(0);
  will-change: transform; /* パフォーマンス向上 */
}

@media screen and (max-width: 798px) {
  .float-bana {
    left: auto;
    right: 0;
    width: 130px;
    height: auto;
    transform: translateZ(0); /* シンプルに */
    -webkit-transform: translateZ(0);
  }
}
/* フォントのCSS */
.amiri-regular {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1.7px;
  }
  .shippori-mincho-medium {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
  }
  
/* ぼかしのアニメーション */
  .blur{
    animation-name:blurAnime;
    animation-duration:2.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    /* transform: scale(1.02); */
    }
  
    to {
    filter: blur(0);
    /* transform: scale(1); */
    }
  }

/* フェードアップのアニメーション */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    /* transform: translateY(100px); */
    }
  
    to {
      opacity: 1;
    /* transform: translateY(0); */
    }
  }
  
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeUpTrigger{
      opacity: 0;
  }

  /* 下から出る */

  .fadeUp2{
    animation-name:fadeUpAnime2;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:1;
    }
    
    @keyframes fadeUpAnime2 {
      from {
        opacity: 1;
        transform: translate(-50%, calc(100px - 50%));
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }
    
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
     
    .fadeUpTrigger2{
        opacity: 0;
    }

  /* Swiperセクション */
  .swiper-section {
    position: relative;
    height: auto;
    background-image: url(../img/6.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24% 10%;
    overflow: hidden;

  }

  .swiper-container {
    width: 89%;
    max-width: 750px;
    height: auto;
    /* overflow: hidden; */
  }
  @media screen and (max-width: 798px) {
    .swiper-container {
      width: 100%;
    }
  }

  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiper-slide img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
  }

  /* Swiperナビゲーションボタン - より強力な上書き */
  .swiper-container .swiper-button-next,
  .swiper-container .swiper-button-prev {
    color: #fff !important;
    background: none !important;
    border-radius: 0;
    width: 19%;
    height: 50px;
  }

  .swiper-container .swiper-button-next:after,
  .swiper-container .swiper-button-prev:after {
    color: #fff !important;
    font-size: 38px;
  }

  /* Swiperページネーション */
  .swiper-pagination {
    bottom: 10% !important;
    top: auto !important;
  }

  .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
  }

  .swiper-pagination-bullet-active {
    background: #fff !important;
    opacity: 1 !important;
  }

  .swiper-wrapper .slide-1{
    padding-top: 10%;
  }
  .swiper-wrapper .slide-2{
    padding-top: 10%;
  }
  .swiper-wrapper .slide-3{
    padding-top: 10%;
  }
  @media screen and (max-width: 798px) {
    .swiper-section {
      /* height: 80vh; */
    }
    
    .swiper-slide img {
     width: 100%;
    }
    
    .swiper-container .swiper-button-next,
    .swiper-container .swiper-button-prev {
      color: #fff !important;
      background: none !important;
      width: 40px;
      height: 40px;
    }
    
    .swiper-container .swiper-button-next:after,
    .swiper-container .swiper-button-prev:after {
      color: #fff !important;
      font-size: 25px;
    }
    
    .swiper-pagination {
      bottom: 60px !important;
    }
    
    .swiper-pagination-bullet {
      background: rgba(255, 255, 255, 0.8) !important;
      opacity: 1 !important;
    }

    .swiper-pagination-bullet-active {
      background: #fff !important;
      opacity: 1 !important;
    }
  }



 
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

.positoon-relative{
  position: relative;
  overflow: hidden;
}


.bg-img{
  width: 100%;
  vertical-align: top;
  margin-top: -1px;
}

.text-css{
  left: 51%;
  transform: translateX(-50%);
  color: #fff;
  letter-spacing: 2px;
  line-height: 60px;
  font-size: 24px;
  position: absolute;
  white-space: nowrap;
}

/* CSS本体 */

/* FV部分 */

.contents-wrapper img{
  width: 100%;
}
.fv-contents{
    height: 600px;
    width: 100%;
    position: relative;
}

.top-text-img{
    width: 650px;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.fv-title{
    margin-top: 200px;
    text-align: center;
}

.background{
  width: 100%;
}

.background-video{
    width: 750px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;
    z-index: -9999;
    object-fit: cover;
}



/*Scrollテキストの描写*/
.absolute{
  position: absolute;
}
.absolute-1{
  top: 80%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.absolute-2{
  top: 92%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.absolute-3{
  top: 69%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.absolute-4{
  top: 86%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.absolute-5{
  top: 90%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.absolute-6{
  top: 96.4%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.absolute-7{
  top: 51.4%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 85%;
}

/* 線の描写 */
.hoshi1{
  top: 10%;
  width: 1px;
  height: 10%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi1 2s ease-in-out infinite;
  opacity: 0;
  left: 6%;
}
@keyframes hoshi1{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height: 5%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top: 10%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}
.hoshi2{
  top: 0%;
  width: 1px;
  height: 8%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi2 3s ease-in-out infinite;
  opacity: 0;
  left: 21.6%;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes hoshi2{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height: 5%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top: 8%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}
.hoshi3{

  width: 1px;
  height: 5%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi3 2.5s ease-in-out infinite;
  opacity: 0;
  left: 37.7%;
}
@keyframes hoshi3{
  0%{
    height:0;
    top:2%;
    opacity: 0;
  }
  30%{
    height: 1.5%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top: 5%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}
.hoshi4{
  width: 1px;
  height: 5%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi4 2.3s ease-in-out infinite;
  opacity: 0;
  left: 50%;
}
@keyframes hoshi4{
  0%{
    height:0;
    top:4%;
    opacity: 0;
  }
  30%{
    height: 2.5%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top: 8%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}
.hoshi5{
  width: 1px;
  height: 5%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi5 3.3s ease-in-out infinite;
  opacity: 0;
  left: 58.7%;
}
@keyframes hoshi5{
  0%{
    height:0;
    top:4%;
    opacity: 0;
  }
  30%{
    height: 2.5%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top: 8%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}

.hoshi6{
  width: 1px;
  height: 10%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi6 2s ease-in-out infinite;
  opacity: 0;
  left: 71.3%;
}
@keyframes hoshi6{
  0%{
    height:0;
    top:3%;
    opacity: 0;
  }
  30%{
    height: 3%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top:8%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}
.hoshi7{
  width: 1px;
  height: 10%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi7 1.7s ease-in-out infinite;
  opacity: 0;
  left: 83%;
}
@keyframes hoshi7{
  0%{
    height:0;
    top:4%;
    opacity: 0;
  }
  30%{
    height: 3%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top:10%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}
.hoshi8{
  width: 1px;
  height: 10%; /* 画像の高さの25%に変更 */
  background: #eee;
  animation: hoshi8 1.4s ease-in-out infinite;
  opacity: 0;
  left:93.3%
}
@keyframes hoshi8{
  0%{
    height:0;
    top:2%;
    opacity: 0;
  }
  30%{
    height: 3%; /* 画像の高さの8%に変更 */
    opacity: 1;
  }
  100%{
    height:0;
    top:10%; /* 画像の高さの25%に変更 */
    opacity: 0;
  }
}
.fv-top-text{
  position: absolute;
  top: 23%;
  left: 51%;
  transform: translateX(-50%);
  color: #fff;
  line-height: 64px; /* 160% */
  letter-spacing: 2px;
  font-size: 25px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}



/* 企画者部分 */

.kikakusya-contents{
  position: relative;
}

.kikakusya-title{
  top: 100px;
}

.kikakusya-text{
  width: 80%;
  color: #fff;
  position: absolute;
  top: 400px;
  white-space: wrap;
  font-size: 22px;
  letter-spacing: 1.7px;
  line-height: 56px;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
}

.kikakusya-sign{
  width: 55%;
  left: 70%;
  top: 1250px;
}

/* フッター */

.footer-logo{
  top: 1600px;
}

.footer-mypage{
  top: 1750px;
}

/* ロゴのfadein-randomスタイル */
.fade-wrap {
  position: relative;
  width: 100%;
 
}
@media screen and (max-width: 798px) {
  .fade-wrap {
    height: 100px; /* ロゴ表示エリアの高さ */
  }
}
.cocone-logo{
  height: 54px; /* ロゴ表示エリアの高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 798px) {
  .cocone-logo {
    height: 30px /* ロゴ表示エリアの高さ */
  }
}
.logo-fade {
  width: 4vw; /* 各SVGのサイズ調整 */
  height: auto;
  max-width: 50px;
  margin: 0 0.3vw; /* 画像間の間隔 */
  display: inline-block;
}

.cocone-1 img,
.cocone-2 img,
.cocone-3 img,
.cocone-4 img,
.cocone-5 img,
.cocone-6 img,
.cocone-7 img {
  height: 3.5vw;
  max-height: 24px;
  width: auto;
  max-width: 40px;
  display: block;
  margin: 0px 0.6vw;
  padding: 0;
}

.logo-top{
  top:18%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.winter-logo{
 
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 6.5vw;
  margin: 20px 0; /* 上下の余白 */
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2vw; /* 文字間の間隔 */
}

.winter-letter {
  font-family: TsukuAOldMinPr6N-L-83pv-RKSJ-H, 'FOT-TsukuAOldMin Pr6N', serif;
  font-size: 55px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.1vw;
  display: inline-block;
}
@media screen and (max-width: 798px) {
  .winter-letter {
    font-size: 1.2em;
  }
}

.limited-logo {
  width: 100%;
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin: 10px 0;
    padding: 0;
    margin-top: 2px !important;
    height: auto;
}
@media screen and (max-width: 798px) {
  .limited-logo {
    font-size: .5em;
  }
}
.limited-letter {
  font-family: TsukuAOldMinPr6N-L-83pv-RKSJ-H, 'FOT-TsukuAOldMin Pr6N', serif;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.1vw;
  display: inline-block;
}
@media screen and (max-width: 798px) {
  .limited-letter {
    font-size: 4vw;
  }
}
.limited-hoshi {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2vw;
}
.limited-hoshi-1{
  width: 21px;
  height: auto;
  margin: 21px;
}
@media screen and (max-width: 798px) {
  .limited-hoshi-1 {
    width: 3%;
    height: auto;
    margin: 0% 4%;
  }
}


/* kirakira-1 アニメーション */

.kirakira-1{
  position:absolute;
  top: 43%;
  left: 80%;
  transform:translate(-50%,-50%);
  z-index:10;
}
/* .kirakira-1 .spin{
  animation: spin var(--spin-dur,  1.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
/* 拡大縮小＆上下フロートは子で（ease-in-outで呼吸感） */
.kirakira-1 .pulse{
  width:57vw; 
  max-width:315px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.5s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
  
}
@media screen and (max-width:539px) {
  .kirakira-1 .pulse{
    max-width:140px; 
  }
}
.kirakira-2{
  position:absolute;
  top: 87%;
  left: 6%;
  transform:translate(-50%,-50%);
  z-index:10;
}
/* .kirakira-2 .spin{
  animation: spin var(--spin-dur, 1.4s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-2 .pulse{
  width:57vw; 
  max-width:160px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.4s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
@media screen and (max-width: 539px) {
  .kirakira-2 .pulse{
    max-width:130px; 
  }
}
.kirakira-3{
  position:absolute;
  top: 54%;
  left: 76%;
  transform:translate(-50%,-50%);
  z-index:10;
}
.kirakira-3 .spin{
  animation: spin var(--spin-dur, 1.2s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-3 .pulse{
  width:57vw; 
  max-width:200px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.4s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-4{
  position: absolute;
    top: 40%;
    left: 19%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.kirakira-4 .spin{
  animation: spin var(--spin-dur, 1.2s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-4 .pulse{
  width:57vw; 
  max-width:200px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.4s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-5{
  position: absolute;
    top: 62%;
    left: 93%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.kirakira-5 .spin{
  animation: spin var(--spin-dur, 1.5s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-5 .pulse{
  width:57vw; 
  max-width:250px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.6s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-6{
  position: absolute;
  top: 37%;
    left: 83%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
/* .kirakira-6 .spin{
  animation: spin var(--spin-dur, 1.2s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-6 .pulse{
  width:57vw; 
  max-width:250px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.7s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-7{
  position: absolute;
  top: 66%;
  left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
/* .kirakira-7 .spin{
  animation: spin var(--spin-dur, 1.5s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-7 .pulse{
  width:57vw; 
  max-width:200px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.4s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-8{
  position: absolute;
  top: 83%;
  left: 83%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.kirakira-8 .spin{
  animation: spin var(--spin-dur, 1.5s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-8 .pulse{
  width:57vw; 
  max-width:200px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.4s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-9{
  position: absolute;
  top: 19%;
  left: 86%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* .kirakira-9 .spin{
  animation: spin var(--spin-dur, 1.5s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-9 .pulse{
  width:57vw; 
  max-width:200px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.5s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
@media screen and (max-width: 539px) {
  .kirakira-9 .pulse{
    max-width:130px; 
  }
}
.kirakira-10{
  position: absolute;
  top: 89%;
  left: 78%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
/* .kirakira-10 .spin{
  animation: spin var(--spin-dur, 2.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-10 .pulse{
  width:57vw; 
  max-width:150px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.5s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
@media screen and (max-width: 539px) {
  .kirakira-10 .pulse{
    max-width:130px; 
  }
}

.kirakira-11{
  position: absolute;
  top: 10%;
  left: 15%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.kirakira-11 .spin{
  animation: spin var(--spin-dur, 1.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-11 .pulse{
  width:57vw; 
  max-width:250px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.5s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-12{
  position: absolute;
  top: 26%;
  left: 23%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
/* .kirakira-12 .spin{
  animation: spin var(--spin-dur, 2.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-12 .pulse{
  width:57vw; 
  max-width:150px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.3s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
@media screen and (max-width: 539px) {
  .kirakira-12 .pulse{
    max-width:110px; 
  }
}
.kirakira-13{
  position: absolute;
  top: 28.4%;
  left: 23%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.kirakira-13 .spin{
  animation: spin var(--spin-dur, 2.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-13 .pulse{
  width:57vw; 
  max-width:150px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.3s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-14{
  position: absolute;
  top: 32%;
  left: 9%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.kirakira-14 .spin{
  animation: spin var(--spin-dur, 1.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-14 .pulse{
  width:57vw; 
  max-width:250px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.5s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-15{
  position: absolute;
  top: 50.4%;
  left: 58.8%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.kirakira-15 .spin{
  animation: spin var(--spin-dur, 2.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.kirakira-15 .pulse{
  width:57vw; 
  max-width:150px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.3s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.kirakira-16{
  position: absolute;
  top: 92.4%;
  left: 88.8%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
/* .kirakira-16 .spin{
  animation: spin var(--spin-dur, 2.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-16 .pulse{
  width:57vw; 
  max-width:230px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.3s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
@media screen and (max-width: 539px) {
  .kirakira-16 .pulse{
    max-width:130px; 
  }
}
.kirakira-17{
  position: absolute;
  top: 49.4%;
    left: 78.8%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
/* .kirakira-17 .spin{
  animation: spin var(--spin-dur, 2.3s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
} */
.kirakira-17 .pulse{
  width:57vw; 
  max-width:230px; 
  height:auto;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  animation: pulse 1.5s ease-in-out infinite;
  /* どうしても光らせたいなら“固定値”だけにする（動かさない） */
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
@media screen and (max-width: 539px) {
  .kirakira-17 .pulse{
    max-width:120px; 
  }
}
@keyframes soft-glow {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.9;
  }
}


  .bun-13{
    top: 8%;
    left: 64%;
    transform: translate(-50%, -50%);
    width: 49%;
  }
  .bun-14{
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 41%;
  }

@keyframes spin{
  from { transform: translateZ(0) rotate(0turn); }
  to   { transform: translateZ(0) rotate(1turn); }
}

@keyframes pulse{
  0%,100% { transform: translate3d(0,0,0)    scale(.2);  opacity:.9; }
  50%     { transform: translate3d(0,0,0) scale(1.1); opacity:1;  }
}

.line {
  stroke: white;
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 3s ease-in-out infinite;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
.line-position-1{
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.line-position-2{
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.line-position-3{
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.delay-second {
  animation-delay: 0.7s; /* 0.5秒遅らせる */
}
.delay-1 {
  animation-delay: 0.5s; /* 0.5秒遅らせる */
}
.delay-2 {
  animation-delay: 0.9s; /* 0.5秒遅らせる */
}




@media (prefers-reduced-motion: reduce){
  .kirakira-1 .spin, .kirakira-1 .pulse{ animation: none; }
}
@media screen and (max-width: 798px) {

  body{
    background-color: transparent;
  }
	.contents-wrapper{
    width: 100%;
  }
  .background-video{
    object-fit: contain;
  }
  .bg-img{
  width: 100%;
  margin-top: -1px;
  }
  .text-css{
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 40px;
  }
/* FV部分 */
  .fv-contents{
    height: 600px;
  }

  .fv-title{
    width: 100%;
  }
  .scrolldown1{
    top: 10%;
    height: 20%; /* モバイルでは画像の高さの20% */
  }
 
  
  /* モバイル用のアニメーション調整 */
  @keyframes pathmove{
    0%{
      height:0;
      top:0;
      opacity: 0;
    }
    30%{
      height: 6%; /* モバイルでは画像の高さの6% */
      opacity: 1;
    }
    100%{
      height:0;
      top: 20%; /* モバイルでは画像の高さの20% */
      opacity: 0;
    }
  }
  .fv-top-text{
    font-size: 24px;
    line-height: 40px;
    top: 23%;
  }
  .fv-sandgrass{
    top: 32%;
    width: 30%;
  }
  .fv-text-1{
    top: 38%;
  }
  .fv-text-2{
    top: 45%;
    left: 52%;
  }
  .fv-text-3{
    top: 52%;
  }
  /* 紹介部分 */
  .syoukai-text{
    width: 88%;
    top: 67%;
  }
  /* 予約部分 */
  .yoyaku-text{
    width: 95%;
    top: 5%;
  }
  .koukai-img-1{
    width: 90%;
    top: 50%;
  }
  .koukai-img-2{
    width: 90%;
    top: 85%;
  }
  .koukai-img-3{
    width: 50%;
    top: 80%;
  }
/* 案内部分 */
  .diamond{
    width: 20%;
    top: 0;
  }
  .annai-img-1{
    width: 80%;
    top: 13%;
  }
  .annai-img-2{
    width: 80%;
    top: 25%;
  }
  .annai-mail{
    width: 80%;
    top: 37%;
  }
  .annai-line{
    width: 80%;
    top: 42%;
  }
  .annai-insta{
    width: 80%;
    top: 47%;
  }
  .annai-rakuten{
    width: 80%;
    top: 68%;
  }
  .annai-rakuten-text{
    width: 70%;
    top: 76%;
  }
  .annai-sandgrass{
    top: 90%;
    width: 34%;
  }
  /* 企画者部分 */
  .kikakusya-title{
    width: 85%;
    top: 5%;
  }
  .kikakusya-text{
    top: 19%;
    font-size: 3vw;
    letter-spacing: 1.2px;
    line-height: 30px;
  }
  .kikakusya-sign{
    top: 630px;
  }
  /* フッター */
  .footer-logo{
    top: 80%;
    width: 55%;
  }
  .footer-mypage{
    width: 55%;
    top: 87%;
  }
  
  /* kirakira-1 モバイル用調整 */
  .kirakira-1 img {
    width: 12vw; /* モバイルでは少し大きく */
    max-width: 80px;
  }
  
  /* 横スクロールセクション モバイル用調整 */
  .horizontal_scroll_section .slide_item {
    width: 85%;
  }
  
  .horizontal_scroll_section .horizontal_scroller {
    width: 100%;
    max-width: 100%;
    gap: 15%;
    padding: 0 7.5%;
  }
  
  /* フローティングバナー モバイル用調整 */
  
  
  /* レスポンシブ対応はvw単位で統一されているため、モバイル用の個別設定は不要 */
}