@charset "UTF-8";

*{scroll-margin-top:160px!important}
/* ローディング */

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  text-align:center;
  color:#fff;
  background-repeat:no-repeat;
  background-position: center calc(80%);
  /* background-image:url(../img/bg.jpg); */
  background: #e1120c;
  background-size:cover;
  background-attachment: fixed;
  
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loading-animation.start {
  animation: loading-animation 2s forwards; /* 例として2秒のアニメーション */
}


#ball {
  display: block;
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff;
  z-index: 30;
  }



  .loading-text {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: 10s linear infinite rotation;
}




@keyframes rotation {
    0% {
        transform:  translate(-50%, -50%) scale(0) rotate(0deg);
    }
    2%{
      transform: translate(-50%, -50%)  scale(120%) rotate(0deg);

    }
    4%{
      transform: translate(-50%, -50%)  scale(100%) rotate(0deg);

    }
    100% {
        transform: translate(-50%, -50%) scale(100%)  rotate(360deg);
    }
}

@keyframes loading-animation {
    0% {
        opacity: 0;
        transform: scale(0.5) translate(-50%, -50%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%);
    }
}


/* ローディング */


/* .line-top{
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg	,#F2A054, #D761A8, #4791FF);
  position: fixed;
  z-index: 1000;
  top: 0;
} */
/* 炎のセクション */

.scroll-image {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  transform: translateY(20px);
  z-index: 2;
}

.fire-01,.fire-02,.fire-03{
  width: 20%;
}

.fire-04,.fire-05,.fire-06{
  right: 0;
  width: 20%;
}

.fire-01{
  width: 20%;
  left: -4%;
}

.fire-02{
  top: 38%;
  width: 16%;
  left: 4%;
}

.fire-03{
  width: 26%;
  bottom:5%;
}

.fire-05{
  top: 40%;
  width: 16%;
}

.fire-06{
  bottom:5%;
  width: 16%;
}


.fire-06{
  width: 24%;
}

.scroll {
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 180px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  /* writing-mode: vertical-lr; */
  filter: drop-shadow(0 0 20px rgb(52, 56, 80);) text-shadow: 0 0 20px #222;
}

.scroll::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 160px;
  background: #fff;
}

.scroll::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* スライダー */

.plan-slider{
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
}

.plan-slider.two{
  justify-content: center;
  gap:30px;
  flex-wrap: wrap;
}

.slider {
  width: 100%;
  height: auto;
  margin: auto;
}


.slick-dotted.slick-slider {
  margin-bottom: 0px!important;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}
.slick-dots li button:before {
  font-size: 18px;
  top: 6px;
}

.slick-list{
  overflow: ;
  top:-50px

}

.slick-slide{
  margin-right: 30px;
}

.slick-dots{
  bottom:20px!important;
}

.slick-track {
  margin-bottom: 40px;
  margin-top: 30px;
  padding-top: -30px;
}





/* 矢印 */
.slick-prev
{
    left: 20%!important;
}
.slick-next
{
    right: 20%!important;
}

.slick-arrow:before{
	content:""!important;
}

.slick-prev,
.slick-next
{
    z-index: 100;
    top:0!important;
}



.slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
  z-index: 1;
}
.slick-arrow:hover {
  opacity: 0.7;
}

/* 共通設定 */

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
  width: 26px;
  height: 26px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.slick-prev::after{
  left: 124px!important;
}


.slick-next::after{
  right: 154px!important; 
}


.slick-prev::before,
.slick-next::before {
  background: #000;
  content: "";
  width: 90px;
  height: 90px;
  border-radius: 100px;
  left: 86px;
}


.slick-next::before{
  left: -186px;
}

.slick-next::before, .slick-next::after, .slick-prev::before, .slick-prev::after{
  top:-90px
}

@media screen and (max-width: 1500px) {
  .slick-prev::after{
    left: -122px!important;
  }

  .slick-prev::before{
    left: -160px!important
  }
  
  
  .slick-next::after{
    right: -118px!important; 
  }
  
  
  .slick-next::before {
    left: 86px;
  }

  .slick-slide{
    margin: 0px 6px;
  }
  

  }

  @media screen and (max-width: 768px) {

.slick-next::before {
    left: -28px;
}

.slick-next::after {
  right: -25px!important;
}

.slick-prev::before {
  left: -70px!important;
}

.slick-prev::after{
  left: 4px!important;
}




  }
  



/* next */

.slick-next {
  right: 26px;
}
.slick-next::after {
  right: 4px;
  transform: rotate(45deg);
}

/* prev */

.slick-prev {
  left: 26px;
}
.slick-prev::after {
  left: 4px;
  transform: rotate(-135deg);
}

@media screen and (max-width: 767px) {
  .slick-next::after,
  .slick-prev::after {
    width: 10px;
    height: 10px;
  }
  .slick-next {
    right: 8px;
  }
  .slick-prev {
    left: 8px;
  }
  .slick-next::after {
    right: 2px;
  }
}

/* スライダー */

/*共通*/

section{
    padding: 90px 0 180px;
}

body {
    background: #1478C3;
    font-size: 16px;
    line-height: 2;
    text-size-adjust: 100%;
    width: 100%;
    color: #222;
    font-weight: normal;
}



.flex {
    display: flex;
    width: 100%;
    max-width: 500px;
    justify-content: center;
    align-items: center;
}

.btn {
  background: #ddff21;
    padding: 24px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    color: #222;
    text-decoration: none;
    position: relative;
    font-size: 16px;
    letter-spacing: 1px;
  transition: .3s;
    font-weight: bold;
    border-radius: 10px;
    position: relative;
    top:0;
    transition:0.2s!important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-section{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:20px
}


.btn-section.top-btn{
  display: flex;
  gap:16px;
  flex-direction:unset;
  margin-bottom: 80px;
  justify-content: center;
}

.btn-section.top-btn .btn{
  font-size: 18px;
}

.btn:hover{
    opacity: 1;
    top:6px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
    
}


.btn::after{
    content: "〉";
    opacity: 0.8;
    display: block;
    position: absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    font-size: 20px;
    font-weight: lighter;
}

.grade-flex{
  padding-bottom: 120px;
  border-bottom:1px solid #222;
  margin-bottom: 100px;

}

/*===========
.loop-
===========*/


/* ループアニメーション */
.loop-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 45px;
}
.loop-area {
  display: flex;
  animation: loop-slide 50s infinite linear 0s both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-area .content {
  width: 1000px;
  margin-right: 16px;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.w_section {
  transform: rotate(90deg);
  transform-origin: top left;
  position: fixed;
  top: 0;
  left: 50px;
  z-index: 50;
}

.w_section.right {
  transform: rotate(-90deg);
  transform-origin: top right;
  position: fixed;
  top: 0;
  right: 50px;
  z-index: 50;
}


/*===========
.loop-
===========*/


/* header */
.header{
  background: #e1120c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 500;
  position: fixed;
  width: 100%;
  box-shadow: 0 10px 20px rgba(0, 0, 30, 0.3);
}

.header-dl-btn{
  background: #DDFF21;
}

.header .header-logo{
  width: 12%;
  margin-left: 12px;
  
}

.header .icon{
  width: 14px;
  margin-right: 4px;
}

.header-btn{
  display: flex;
}

.header a{
  padding: 16px 16px;
  display: block;
  text-decoration: none;
  color: #222;
  line-height: 1;

}

.header a:hover{
  background: #1478C3;
  color: #fff;
  opacity: 1;
}
/* header */

/* mv */

.mv-wrapper {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  overflow: hidden;
}

body, html {
  margin: 0;
  padding: 0;
  height: 200vh; /* デモ用にページの高さを増やしています */
}


.mv{
  position: relative;
  height: 100vh;
  min-height: 580px;
  width: 100%;
  /* z-index: 30; */
  /* background: #196DEB; */
}


/* カスタムプロパティを使って疑似要素の背景と不透明度を操作 */
.mv::before {
  background-image: var(--before-bg, url('../img/bg.jpg'));
}
.mv::after {
  background-image: var(--next-bg);
  opacity: var(--after-opacity, 0);
}


/* --- */
/* ① .mv はスタックコンテキストを作るが、負の値は避ける */
.mv {
  position: relative;
  z-index: 0;       /* ← ここを 0 に */
  height: 100vh;
  min-height: 580px;
  width: 100%;
}

/* ② before/after 共通 */
.mv::before,
.mv::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
  pointer-events: none;  /* コンテンツ操作の邪魔しない */
}

/* ③ before は常に最背面 */
.mv::before {
  background-image: var(--before-bg, url('../img/bg.jpg'));
  opacity: 1;
  z-index: -2;       /* ← .mv (0) の下 */
}

/* ④ after をその上でフェード制御 */
.mv::after {
  background-image: var(--next-bg);
  opacity: var(--after-opacity, 0);
  z-index: -1;       /* ← before(-2) の上 */
}

/* --- */


.baseball-play,
.trp-play,
.message{
  position: absolute;
  z-index: 40;
  top:55%;
  transform: translateY(-50%);
}

.baseball-play{
  left: 5px;
  width: 34%;
  top:40%
}

.trp-play{
  right: -2%;
  width: 36%;
  
}

.message{
  
  right: 5%;
  width: 30%;
}

.logo{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 24px;

}

.mv-title img{
      filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 1));


}

.logo a{
width: 150px;
display: block;
}

.logo .kakeru{
  margin: 0 20px;
width: 30px;
display: block;
}

.mv-title{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 48%;
  min-width: 800px;

}

.mv-title img{
  /* height: 150px; */
  width: auto;
}


.mv-title h1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mv-sub-img img{
  position: absolute;
  top:0;
  width: 15%;
  z-index: 40;
}

.mv-sub-img img:last-child{
  right:0;
}

.mv-title-sub{
  margin-top: 60px;
  color: #fff;
}

.mv-title-sub h2{
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 1;
  background: #222;
  padding: 2px 2px 4px;
}

.mv-title-sub p{
  line-height: 1;
  background: #222;
    padding: 2px 0px 4px 4px;
}

.basckets{
  width: 6%;
  max-width: 36px;
  position: relative;
}

.basckets.left{
  top:-10px;
  margin-right: 20px;
}

.basckets.right{
  margin-left: 20px;
  top:20px
}

.mv-title-sub{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 8px;
}

.circle{
  position: relative;
  z-index: 10;
}

/* mv */



/* about */


.sub-title{
    position: relative;
    background: #111;
    padding: 20px!important;
    z-index: 60;
}
.sub-title h2{
    color: #fff;
    text-align: center;
  font-size: 30px;
}



.about{
  position: relative;
  /* height: 200vh;
  width: 100%;
  overflow: hidden; */
  background: rgb(159 13 9 / 80%);
  padding:180px 0;
}

.artist,.plan{ overflow:clip;}

.about-gradation{
  z-index: 20;
  position: relative;
  top:-120px
}
.about-text{
  /* position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%; */
  
}

.about-bg-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 900px;
  font-weight: bold;
  color: #1573FF;
  z-index: ;
  font-family: 'Oswald', sans-serif;

}

.about-text h2 {
  display: block;
  width: max-content;     /* テキスト幅に合わせる */
  margin: 0 auto 20px;    /* 上下 0 / 下 20px, 左右 auto で中央 */
  /* 以下はそのまま */
  font-size: 56px;
  font-weight: bold;
  background: linear-gradient(90deg, #ef91b5, #f03215, #e6a31a, #34ad78, #d37fde, #0f73de);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: serif;
}

.about-text p{
  font-size: 20px;
  line-height: 2.8;
  color: #fff;
  text-align: center;
  font-weight: lighter;
}
/* about */



/* music */

.member-flex{
  display: flex;
  flex-direction: column;
  gap:24px;
}

.member-flex .member-img.left-img{
  order:2;
}

.member-coment{
  font-size: 18px;
  margin-bottom: 16px!important;;
}

.member-coment-title{
  display: block;
  margin-bottom: 16px;
}

.member-img{
  width: 22%!important;
}

.music{
  background: rgb(159 13 9 / 80%);
  position: relative;
}
.music .music-box,.j-pop{
  background: linear-gradient(130deg,#ef91b5,#f03215,#e6a31a,#34ad78,#d37fde,#0f73de);
  position: relative;
  z-index: 30;
}

.music .music-box{
  margin: auto;
  border-radius: 30px;
  padding: 80px;
  position: relative;
}

.music .music-box .title{
  position: absolute;
  top: -30px;
  left: -40px;
  text-align: left;
}

.music .music-box .title .title-main,.music .music-box .title .title-sub{
  text-align: left;
}

.music-flex{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap:36px;
  flex-direction: column;
    align-items: center;
}

.music-flex img{
  width: 40%;
  /* margin-right: 40px; */
}

.music-text-flex{
  display: flex;
  justify-content: center;
  align-items: self-start;
  margin-bottom: 50px;
}


.title-main{
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  font-size: 40px;
  line-height: 1;
  position: relative;
  text-align: center;


  
}
.title-sub{
  text-align: center;
}

/* .title-main::before{
  content: "";
  height: 1px;
  width: 20px;
  background: #222;
  display: block;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left: -30px;
} */

.title{
  padding-left: 30px;
  /* position: sticky; */
  top: 0;
  z-index: 100;
  padding-top: 10px;
  /* margin-top: -30px; */
  margin-bottom: 20px;

}

.music-text-title h4{
  font-size: 40px;
  line-height: 1.5;
  text-align: center;
}

.music-text-title p{
    line-height: 1.5;
    font-size: 20px;
    text-align: center;
}

.music-text-flex .basckets.right{
  top:80px;
}

.music-text-tieup{
  display: flex;
  gap:24px;
  margin-top: 40px;
  font-weight: bold!important;
}

.music-text-note{
  margin-top: 30px;
    line-height: 2;
  font-size: 18px;
}

.music-text-note span{
  font-size: 22px;
  font-weight: bold;
}


.music-text-tieup p::before{
  content:"#";
  font-size: 18px;
}

/* music */


/* artist */
.artist{
  background: #e1120c;
  position: relative;
  z-index: 100;
}

.artist-flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  flex-direction: column;
}


.artist-flex-text.right-text{
  /* margin-left: 20%; */
  color: #fff;
}

.artist-flex-text.left-text{
  /* margin-right: 10%; */
}


.artist-flex-text h4{
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(90deg,#ef91b5,#f03215,#e6a31a,#34ad78,#d37fde,#0f73de);
	-webkit-background-clip: text;
  font-size: 46px;
  display: inline-block;
  line-height: 1.4;
  margin-bottom: 20px;
}

.artist-flex .right{
  width: 100%;
}

.right{
  /* margin-left:60px */
}

.left{
  /* margin-right: 60px; */
}




/* artist */



/* plan */

.slick-dots li button::before {
  font-size: 12px!important;
}

.glass {
  background-color: transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* 
.plan{
  position: relative;
}

.plan::before {
  content: '';
  transform: translate(-50%, -50%);
  height: 3rem;
  width: 100%;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  filter: blur(5px);
}

.plan-content {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.5rem;
  width: 100%;
  transform: translate(-50%, -50%);
} */



.plan .plan-box{
  /* padding-bottom: 80px;
  border-bottom: 1px solid #333; */
  margin-bottom: 100px;
}

.plan .plan-box:last-child{
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.plan-box-title{
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  margin-bottom: 0;
  position: relative;
  max-width: 90%;
  margin: auto;

}

.plan-box-title-number{
  position: absolute;
  top: -40px;
  right: -60px;
  width: 20%;
}

.plan{
  
  position: relative;
  z-index: 60;
}

.plan .title{
  color: #fff;
}

.plan-box-title-text h4{
  text-align: center;
  font-size: 50px;
  margin: 0 auto;
  font-weight: bold;
  color: #fff;
  margin-top: -70px;
  padding-top: 70px;
  text-shadow: 0 4px 0px rgba(0, 0, 0, 0.8);
}

.plan-box-title-text h4 span{
  font-size: 30px;
  margin: 0 6px;
  font-weight: normal;
}

.plan-box-title-text p{
  text-align: center;
  font-size: 20px;
  color:#fff;
}

.plan-box-note{
  font-size: 20px;
  color: #FFF;
  text-align: center;
  margin-bottom: 80px;
  font-weight: lighter;
  width: max-content;
  margin: 0 auto 80px;
  background: #222;
  line-height: 1;
  padding: 0 4px;
}

.plan-box-products-flex{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:24px;
  flex-wrap: wrap;
}

.plan-box-products-flex img{
height: 250px;
width: auto;
/* margin-right: 20px; */
}

.container {
  height: 250px;
  aspect-ratio: 16/9;
}

.container iframe {
  width:100%;
  height:100%;
}

.grade-flex{
  display: flex;
}

.grade-section{
    padding: 50px;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 5px 40px #111;
    border-radius: 10px;
    /* border: 4px solid;
    border-image: linear-gradient(90deg, #ef91b5, #f03215, #e6a31a, #34ad78, #d37fde, #0f73de); */
    border-image-slice: 1;
}

.grade-section.one{
  background: none;
  padding: 0px;
  box-shadow: none;
  border-radius: 0;
  border:none
}


.grade-section.one .plan-box-products-flex img,
.grade-section.one .container{
  height: 260px;
}

.plan-box-products-flex img,.plan-box-products-flex .container{
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);

}

.grade-section.one .btn{
  /* margin-top: 30px; */
  width: 50%;
}

.grade-section h5{
  text-align: center;
  color: #222;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1;
}

.grade-section h5 span{
  font-size: 30px;
  margin-left: 0 4px;
}


.note{
  color: #222;
  font-size: 12px;
  text-align: center;
  font-weight: lighter;
}

.grade-section>p{
  text-align: center;
  color: #222;
  margin-bottom: 30px;
  font-weight: lighter;

}

.grade-section .btn{
  width: 70%;
  min-width: 300px;
  
}

.container.hidden{
  position: relative;
  opacity: 0.3;
}

.container.hidden lite-youtube{
  pointer-events: none;
}

/* .container.hidden::before{
height: 100%;
width: 100%;
content:"";
display: block;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
position: absolute;
top:0;
left: 0;
z-index: 5;
} */


.hidden .plan-box-products-flex{
  opacity: 0.10;
  position: relative;
}

.hidden a,
.hidden .btn-section a,
.hidden .plan-box-products-flex iframe{
pointer-events: none;
}

.hidden .btn-section a{
  opacity: 0.3;
}

.planbox-position{
  position: relative;
}

.hidden .planbox-position::after{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  content:"Coming Soon";
  font-size: 40px;
  color: #222 !important;
  font-weight: bold;
  /* background: linear-gradient(90deg,#1D74EB,#DBCBAA,#6ED2DD,#42A8FF,#B359BE,#E9CAC5,#BCA5DD,#A17CDD); */
  padding: 10px 20px;

  border-radius: 10px;
  text-align: center;
  width: 100%;
  height: 100%;
  font-family: 'Oswald', sans-serif;
      display: flex;
    justify-content: center;
    align-items: center;
    /* text-shadow: 0 0px 80px #000; */
    line-height: 1;

}

.hidden .btn{
  /* background:#3a90d1; */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.0);
}

@media screen and (max-width: 1550px) {

/* .grade-flex{
flex-wrap: wrap;
} */


/* plan */

}


/* j-pop */
.j-pop h4{
  text-align: center;
  font-size: 18px;
  margin-bottom: 40px;
  font-weight: bold;
}
.j-pop h4::before{
  content:"＼";
  margin-right: 40px;
  font-weight: lighter;
}
.j-pop h4::after{
  content:"／";
  margin-left: 40px;
  font-weight: lighter;
}

.j-pop img{
  border-radius: 20px;
}
/* j-pop */

/* arranger */

.arranger{
  background: #fff;
  position: relative;
  z-index: 20;
}

.arranger-flex{
  display: flex;
  align-items: center;

}

.arranger-flex img{
width: 34%;
border-radius: 20px;
margin-right: 50px;
}

small{
  font-size: 14px;
}

.arranger-flex h4{
  font-size: 24px;
  font-weight: bo;
}
/* arranger */

/*/////フッター/////*/
.footer {
    background: #2D2D2D;
    padding: 80px 0 100px;
    position: relative;
    z-index: 60;
}

.footer-nav {
    margin-left: auto;
    margin-right: auto;
}

.footer-logo_img {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    margin-bottom: 0px;
    width: 24%;
}

    .footer-btn {
        margin-right: auto;
        margin-left: auto;
        border-radius: 5px;
        margin-top: 30px;
        display: flex;
        width: 30%;
    }

.copyright{
    text-align: center;
    color: #ccc;
    font-size: 12px;
    margin-top: 20px;
}
/*/////フッター/////*/



/* ローディングアニメーション */

.scroll-fade{
    opacity: 0; 
    transition: all 4s/*処理にかかる時間*/;
}

.img-ball,.img-trp{
  width: 10%;
  position: absolute;
  z-index: 30;

}

.img-ball{
top:-12%;
left:10%;
max-width: 190px;
}

.img-trp{
  bottom:-22%;
  right:10%;
  width: 22%;
  z-index: 50;
  max-width: 600px;
  
}


.scroll-scale{
  opacity: 1; 
  transform: scale(0%); 
  transition: all 0.8s/*処理にかかる時間*/;}



.scroll-up{
    opacity: 0; 
    transform: translateY(100px)/*スクロールアップする距離*/; 
    transition: all 0.8s/*処理にかかる時間*/;}


    .scroll-up.scroll01{
      opacity: 0; 
      transform: translateY(50px)/*スクロールアップする距離*/; 
      transition: all 0.3s/*処理にかかる時間*/;
    }    
    .scroll-up.scroll02{
      opacity: 0; 
      transform: translateY(150px)/*スクロールアップする距離*/; 
      transition: all 0.3s/*処理にかかる時間*/;
    }   
    .scroll-up.scroll03{
      opacity: 0; 
      transform: translateY(50px)/*スクロールアップする距離*/; 
      transition: all 0.1s/*処理にかかる時間*/;
    }   




    .scroll-right{
      opacity: 0; 
      transform: translateX(100%)/*スクロールアップする距離*/; 
      transition: all 2s/*処理にかかる時間*/;}

      
      .scroll-left{
    opacity: 0; 
    transform: translateX(-100%)/*スクロールアップする距離*/; 
    transition: all 2s/*処理にかかる時間*/;}

    .scroll-title{
      opacity: 0; 
      transform: translateX(-100%)/*スクロールアップする距離*/; 
      transition: all 0.3s/*処理にかかる時間*/;}


.scroll-up.done,
.scroll-left.done,
.scroll-right.done, 
.scroll-fade.done,
.scroll-title{
    opacity : 1; 
    transform : translate(0, 0);
}

.scroll-scale.done{
  opacity : 1; 
  transform : scale(100%);
  z-index: 70;
}



.load-down,
.load-up,
.load-up-02,
.load-fade,
.load-slide {
    opacity : 0;
}






.load-down.done{
    animation: animation-load-down 0.3s 0.2s;
    animation-fill-mode:forwards;
}

.load-up.done{
    animation: animation-load-up 1s  00s;
    animation-fill-mode:forwards;
}

.load-up-02.done{
    animation: animation-load-up 1s  0.3s;
    animation-fill-mode:forwards;
}

.load-slide.done{
    animation: animation-load-slide 1s  0.3s;
    animation-fill-mode:forwards;
}

.load-slide.type2.done{
    animation: animation-load-slide-type2 1s  0.8s;
        animation-fill-mode:forwards;
}

.load-fade.done{
    animation: animation-mvimg 1.4s 0s;
    animation-fill-mode:forwards;
}

.load-fade.side.done{
  animation: animation-side 1.4s 0.9s;
  animation-fill-mode:forwards;
}




@keyframes animation-mvimg {
  0% {
    transform : translate(10%,-30%);
      opacity : 0; 
  }
  100% {
    transform : translate(0,-30%);
    opacity : 1; 
  }
}

@keyframes animation-side {
  0% {
    transform : translate(0,0);
      opacity : 0; 
  }
  100% {
    transform : translate(0,0);
    opacity : 1; 
  }
}

@keyframes animation-load-up {
  0% {
    transform : translate(0,-100%);
      opacity : 0; 
  }
  100% {
    transform : translate(0,-50%);
    opacity : 1; 
  }
}

@keyframes animation-load-slide {
  0% {
    transform : translate(100%,0);
      opacity : 0; 
  }
  100% {
    transform : translate(0,0);
    opacity : 1; 
  }
}
@keyframes animation-load-slide-type2 {
  0% {
    transform : translate(0,100%);
      opacity : 0; 
  }
  100% {
    transform : translate(0,0);
    opacity : 1; 
  }
}



@keyframes animation-load-down {
  0% {
    transform : translate(0,10%);
      opacity : 0; 
  }
  100% {
    transform : translate(0,-50%);
    opacity : 1; 
  }
}

@keyframes animation-load-down2 {
  0% {
    transform : translate(0,20%);
      opacity : 0; 
  }
  100% {
    transform : translate(0,0);
    opacity : 1; 
  }
}

/* ローディングアニメーション */


/* アニメーション */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 786px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}


@media screen and (max-width: 860px) {
  .mv-title-sub h2{
    font-size: 18px;
  }
  .scroll{
    display: none;
  }
  
}


/*スマホ*/
@media screen and (max-width: 786px) {

  .mv::before {
  background-image: var(--before-bg, url('../img/bg_sp.jpg'));
}

  section{
    padding: 60px 0;
  }

  .mv::before,#splash { 
    background-attachment: scroll;
    background-size: cover; /* Adjust this to fit the mobile view better */
  }

  .btn-section.top-btn{
    flex-direction: column;
    
  }
  .btn-section.top-btn .btn{
    padding: 20px;
    font-size: 18px;
  }

  .header .header-logo{
    width: 42%;
  
  }

    body {
        font-size: 14px;
        line-height: 1.6;
        box-sizing: inherit;
    }

    .wrapper {
        width: 90%;
    }


    .flex {
        justify-content: flex-start;
        max-width: 1920px;

    }

    section{
      padding-bottom: 40px;
    }

    .btn{
        width: 100%;
        font-size: 14px;
        padding: 30px 0;
        letter-spacing: 0;
        border-radius: 4px;
        margin-bottom: 6px;
        margin: 0!important;        
    }
    

    .logo a{
      width: 120px;
    }

    .mv-title-sub h2{
      font-size: 20px;
      text-align: center;
    }

    .message{
      top: 10%;
    right: 5%;
    width: 64%;
    max-width: 400px;
    }

    .about-text h2{
      font-size: 30px;
    }
    .mv-title-sub{
      margin-top: 30px;
    }

    .grade-section.one .btn{
      width: 100%;
    }

    
    .grade-section .btn{
      width: 100%;
      min-width: auto;
    }

    .btn::after{
        content:"";
    }


    .footer-logo_img{
        width: 40%;
    }

    .container,.plan-box-products-flex img,.grade-section.one .plan-box-products-flex img,
    .grade-section.one .container{
      height: auto;
      width: 100%;
      margin-bottom: 30px;

    }
    .right{
      margin-left: 0;
    }

    .plan-box-title-number{
      right: 2%;
    }

    .circle{
      position: relative;
    top: 3px;
    z-index: 50;
    margin-top: -30px;

    }
    .about{
      margin-top: -16px;
      padding: 80px 0 ;
    }

    .plan-box-products-flex,.artist-flex,.arranger-flex,
    .music-flex,.music-text-tieup{
      flex-direction: column;
    }

    .artist-flex{
      align-items: center;
    }

    .mv-title{
      width: 100%;
      min-width: auto;
    }
    .mv-title .sp{
      width: 100%;
      margin: auto;

    }

    .mv-title{
      /* top: 30%; */
    }

    .baseball-play,.trp-play{
      bottom:70px;
      top:auto;
      z-index: 20;
    }

    .trp-play {
      left: 50%;
      max-width: 340px;
      bottom: -20px;
      width: auto;
      transform: translate(-50%) !important;
  }
  

  .mv-scroll-section{
    height: 100vh;
    position: relative;
    margin-top: -30px;
  }

    .baseball-play {
      left: 16%;
      width: 66%;
      max-width: 278px;
      bottom: 0px;
  }

  .title-main{
    font-size: 34px;
  }

  .title{
    margin-top: -34px;
    margin-bottom: 30px;
    padding-left: 0;
  }

  .plan-box-products-flex{
    gap:16px
  }


    

    .scroll{
      /* display: none; */
      z-index: 300;
      color: #fff;
    }

    .scroll::after {
      background: #fff;
    }

    .mv{
      padding-top: 30px;
      min-height: 560px;
    }

    .about-gradation{
      top:-70px
    }

    .about-text h2{
        font-size: 50px;
        line-height: 1.2;
        text-align: center;
    }

    .sub-title h2{
      font-size: 24px;
    }

    

    .about-text p{
      font-size: 18px;
      line-height: 2.6;
      font-weight: normal;
    }

    .about-bg-text{
      font-size: 600px;
    }

    .music-text-note{
      font-size: 16px;
    }

    .music .music-box{
      padding: 60px 30px;
      
    }
    .music .music-box .title{
      top: 10px;
    left: 0px;
    }
    

    .music-flex img{
      width: 80%;
      margin: 0;
      margin-bottom: 20px;
    }

    .number-20{
      top: 30%;
      z-index: -1;
    }

    .number-23{
      top:65%;
      z-index: -1;
    }

    .music-text-title h4{
      font-size: 36px;
    }

    .music-text-tieup p{
      text-align: center;
      /* padding: 10px 20px;
      margin-bottom: 10px; */
      width: 100%;
    }

    .music-text-tieup{
      gap:0px;
      margin-top: 10px;

    }

    .music-text{
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      margin: auto;
      width: 100%;
    }

    .music-text-tieup p:last-child{
      margin-bottom: 0;
    }

    .artist-flex-text h4{
      font-size: 48px;
    }

    .artist-flex-text.right-text,
    .artist-flex-text.left-text{
      margin: 0;
      width: 90%;
      font-size: 16px;
    }

    .artist-flex .right{
      order: 1;
    }

    .artist-flex-text {
      order: 2;
    }

    .artist-flex .right,
    .artist-flex .left{
      width: 90%;
      margin: 0;
      margin-bottom: 40px;
      border-radius: 10px;
      max-width: 500px;
    }

    .music .music-box{
      border-radius: 10px;
    }


    .artist-flex .right{
      right: 0;
      
    }

    .music-text-flex {
      margin-bottom: 0;
    }

    .plan-box-title-text h4{
      font-size: 36px;
      line-height: 1.3;
      margin: 0;
      margin-bottom: ;
    }

    .plan-box-title-text h4 span{
      font-size: 20px;
      margin-top: 0px;
      display: block;
      text-align: center;
    }

    .plan-box-title{
      margin-bottom: 16px;
      
    }

    .plan-box-note{
      font-size: 16px;
      margin-bottom: 50px;
    }

    .plan-box-products-flex a{
      width: 30%;
      margin-bottom: 0px;
      max-width: 150px;
    }

    .container{
      margin-bottom: 0!important;
      max-width: 440px;
    }

    .plan-box-products-flex img{
      margin: 0!important;
    }

    .slick-prev::before, .slick-next::before{
      width: 60px;
      height: 60px;
    }

    .slick-next::before{
      left: 10px;
    }

    .slick-next::after {
      right: -24px!important;
  }

  .slick-prev::before {
    left: -50px!important;
}

.slick-prev::after {
  left: -23px!important;
}

.grade-section{
  padding: 20px;
}

.slick-next::before, .slick-next::after, .slick-prev::before, .slick-prev::after{
  top:-370px;
}

.plan .plan-box{
  padding-bottom: 0px;
}

.plan-box-title-text h4{
  padding-top:40px;
  margin-top: -40px;
}

.slick-list{
  margin-bottom: -40px!important;
}

.plan-box-title-number {
  top: -60px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
}

.slick-dots{
  bottom:50px!important;
}

.plan{
  padding-bottom: 0;
}

.min-wrapper{
  max-width: 76%;
  
}

.arranger-flex img{
  margin: auto;
  margin-bottom:  30px;
  width: 60%;
}

.arranger-flex h4,.arranger-flex p,.arranger-flex-text small{
  text-align: center;
  display: block;
}

.arranger-flex p{
  text-align: left;
}

.arranger-flex h4{
  margin-bottom: 20px;
}

.accordion-toggle {
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 0px;
}

.hidden .planbox-position::after{
  top:16%
}

.j-pop h4::before,.j-pop h4::after{
  position: absolute;
  z-index: 100;
  bottom:0;
}

.j-pop h4{
  position: relative;
  font-size: 20px;
  margin-bottom: 24px;
}

.j-pop h4::after{
  right: 0;
}


.j-pop h4::before{
  left: 0;
}


/* ループアニメーション */

.loop-area .content {
  width: 750px;
}

.w_section {
  top: 0;
  left: 40px;
  z-index: 50;
}

.w_section.right {
  left: -600px;
  right: 40px;
}



.img-ball{
  width: 20%;
  top:0%;
  left:10%;
  max-width: 190px;
  z-index: 50;
  }
  
  .img-trp{
    bottom:-16%;
    right:10%;
    width: 50%;
    z-index: 50;
    max-width: 600px;
    
  }

  .grade-section{
    background: rgba(255, 255, 255, 0.9);
  }
  
  .member-img{
    width: 60%!important;
    margin: auto!important;
    display: block;
    margin-bottom: 8px!important;
  }

  .member-flex .member-img.left-img{
  order:0;
}

.music-flex{
  gap:4px
}

.member-flex{
  gap: 36px;
}


}