html,body{
  width: 100vw;
  color: #000;
  background-color: #FFF;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-height: none;
}

body {
  display: flex;
  flex-direction: column;
}

html, body, a{
  cursor: none;
}
body::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-thumb {
  background-color: #FF2C69;
  border-radius: 20px
}

body::-webkit-scrollbar-track {
  background-color: #000000;
  border-radius: 20px
}

.cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  top: -5px;
  left: -5px;
  background: rgba( 155, 0, 255, 0.8);
  border-radius: 50%;
  z-index: 1000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0, 0);
  pointer-events: none;
}
.cursor.active {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: rgba( 255, 62, B9, 0.8);

}
.element:hover .cursor {
  animation: cursor-animation 1s infinite;
}

@keyframes cursor-animation {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
#stalker{
  position: fixed;

  /*丸の大きさと色の指定*/
  background: rgba( 255, 62, 89, 0.6);
  width: 60px;
  height: 60px;
  border-radius:30px;
  margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 1;/*カーソルの後ろに来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
}

div {
}

img {
  vertical-align: middle;
}

a {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.full {
  width: 100vw;
  height: 100vh;
}

.sec {
  display: flex;
  position: relative;
  flex-direction: column;
}
.hl {
  position: absolute;
  transform: translate(0, -50%);
}

.bg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}


.mv {
  background-image: url(../../resources/img/main-visual_1.jpg);
  aspect-ratio: 1920 / 1080;
  top: 0px;

  align-items: center;
  justify-content: center;
}

.mv-logo {
  width: 21.5vw;
}

.mv-cp {
  position: absolute;
  width: 70.4%;
  height: 38.7%;
  bottom: 3.3%;
}

.sec-released {
  display: flex;
  justify-content: center;
  background-color: #F1EFE8;
  aspect-ratio: 1920 / 795;
}

.hl-released {
  width: 7.6%;
  top: 50%;
  margin-left: 4%;
  z-index: 20;
}



.swiper-button-prev,
.swiper-button-next {
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 13;
  --swiper-navigation-size: 15vw;
  --swiper-navigation-top-offset: 100%;
  --swiper-navigation-sides-offset: 10%;
}
.swiper-button-prev {

  background-image: url(../img/btn-prev.png);
}
.swiper-button-next {

  background-image: url(../img/btn-next.png);
}
.carousel {
  position: absolute;
  top: 20%;
  left: 28%;
  width: 50%;
  height: 37%;

}
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;

}

.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}
.swiper-slide {
  width: 100%;
  height: 100%;
}
.rl-jack-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 5%;
  left: 54%;
  width: 50%;
  height: 37%;
  background-color: #00f;
}
.item {
  height: 20vw;
}

.rl-jack {
  background-size: contain;
  background-repeat: no-repeat;
}

.rl-jack-1 {
  background-image: url("../img/jacket/After Story.png");
}
.rl-jack-2 {
  background-image: url("../img/jacket/FivePennys.png");
}
.rl-jack-3 {
  background-image: url("../img/jacket/humanVoice.png");
}
.rl-jack-4 {
  background-image: url("../img/jacket/I BELONG TO YOU.png");
}
.rl-jack-5 {
  background-image: url("../img/jacket/Light mellow.jpg");
}
.rl-jack-6 {
  background-image: url("../img/jacket/LOVERS IN NEW YORK.png");
}
.rl-jack-7 {
  background-image: url("../img/jacket/ONE SCENE.png");
}
.rl-jack-8 {
  background-image: url("../img/jacket/Sexy Robot.png");
}
.rl-jack-9 {
  background-image: url("../img/jacket/Watch Out!.png");
}
.rl-jack-10 {
  background-image: url("../img/jacket/行き先は教えない.png");
}
.rl-jack-11 {
  background-image: url("../img/jacket/.png");
}
.rl-jack-12 {
  background-image: url("../img/jacket/.png");
}


.bg-released-ul {
  position: absolute;
  display: block;
  background-color: #FFA8C0;
  height: 18%;
  width: 100%;
  bottom: 0;
}

.sec-information {
  display: flex;
  background-color: #000;
  /*aspect-ratio: 1920 / 935;*/
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.hl-container {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1920 / 935;
  width: 100%;
  height: 13vh;


}
.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1920 / 935;

  width: 100%;
  height: 12vh;


}

.hl-information {
  width: 40%;
  top: 20%;
}

.infobox-container {
  min-width: 50%;
}

.infobox {  
  display: flex;
  aspect-ratio: 966 / 172;

  border-bottom: 1px solid;
  border-color: #FF2C69;
  justify-content: center;
  align-items: flex-end;
}

.plate-infobox {
  display: flex;
  width: 77%;
  height: 72%;
}

.infobox * {
  color: #FFF;
}

.date-and-tag {
  display: flex;
  width: 33%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.date {
  font-size: 1.3vw;
  color: #00FF93;
}
.catag {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 40%;
}
.catag * {
  align-self: center;
  height: 100%;
}

.sent-and-ps {
  display: flex;
  flex:auto;
  flex-direction: column;
  justify-content: center;
}
.sentence {
  font-size: 2.3vw;
  text-align: center;
}
.place-and-start {
  font-size: 1.3vw;
  bottom: 0;
  margin-right: 2%;
  align-self: flex-end;
  text-align: right;
}


.sec-fanclub {
  background-image: url(../../resources/img/fanclub/bg-fanclub.png);
  aspect-ratio: 1920 / 492;
  align-items: center;
}


.sec-youtube {
  background-image: url(../../resources/img/bg-youtube.jpg);
  width: 100%;
  height: auto;
}

.hl-youtube {
  width: 9.3%;
  margin-left: 2.2%;
  top: 50%;
  background-color: #FF2C69;

}




.yt-videos-container {
  margin-top: 0;
  margin-left: 20%;
}
.yt-line {
  display: flex;
  margin-top: 3vh;
  margin-bottom: 4%;
}

.yt-video-box {
  position: relative;
  margin-right: 15vw;
  width: 23.8vw;
}

.yt-videos {
  min-width: 100%
}
.btn-play-yt {
  position: absolute;
  width: 6vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}
.yt-video-box p {
  position: absolute;
  color: #CCC;
  font-size: 2vw;
  bottom: 0;
}




.btn {
  display: block;
  bottom: 0;
}
.btn:hover {
  width: 12.0vw;
}

.join-btn {
  position: absolute;
  transform: translate(0, -50%);

  width: 13.8%;
  bottom: 17%; 
}
.more-btn {
  width: 11%;
  bottom: 9%; 

}
#released-more-btn {
  margin-left: 80%; 
  transform: translate(-50%, -50%);
}
.yt-more-btn {
  position: absolute;

  width: 11%;
  bottom: 4%; 
  margin-left: 50%; 
  transform: translate(-50%, -50%);
}


.sidebar {
  z-index: 998;
  position: fixed;
  top:0;
  left: 0;

  display: block;
  height: 100%;
  min-width: 16vw;
  right: 83%;
}

.hl-sb {
  position: absolute;
  top: 1.3%;
}

.logo-sb {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  bottom: 3%;
  width: 87%;
}

.hl-pg {
  position: absolute;
  width: 33.6vw;
  top: 13.5vh;
  left: 32vw;
  transform: translate(-50%, 0%);
}



.main-pg {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;
}

.fc {
  flex-direction: column;
  aspect-ratio: 1920 / 3500;
  background-color: #FFD1D1;
  top: 0;
}

.fc * {
  display: block;
  margin: 0 auto;  
}

.hl-fc {
  margin-top: 7%;
  width: 16%;
}

.hl-official-fc {
  margin-top: 6%;
  width: 25vw;
}

.hl-timeless-penny {
  margin-top: 6%;
  width: 44vw;
}

.logo-penny-mark {
  margin-top: -3%;
  width: 51vw;
}

.text-fc {
  margin-top: 0;
  width: 66vw;
}

.btn-join-fc {
  margin-top: 10%;
  width: 51vw;
}