:root{
  --topics-color: rgb(255, 255, 0);
  --release-color: rgb(255, 0, 255);
  --collab-color: rgb(0, 255, 0);
  --event-color: rgb(255, 0, 0);
  --media-color: rgb(0, 255, 255);
  --other-color: rgb(0, 0, 255);
}

.embla__container{
  display: flex;
}
.embla__viewport{
  overflow: hidden;
  position: relative;
}
.embla__slide{
  flex: 0 0 100%;
  min-width: 0;
}

#loading{
  width: 100%;
  height: 100%;
  transition: .6s ease-in;
  background-color: #0f0f0f;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  overflow: hidden;
  container-type: size;
  @media screen and (max-width: 960px){
    border-width: 3px;
  }
}
#loading::before{
  content: "";
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
  top: 10px;
  left: 10px;
  box-sizing: border-box;
  background: #ffffff;
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.pie-loader{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: hypot(100cqw, 100cqh);
  height: hypot(100cqw, 100cqh);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent var(--angle),
    #ffffff var(--angle)
  );
  pointer-events: none;
  animation: fill-circle 1s ease forwards;
}
@keyframes fill-circle{
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}
.load-spinner{
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  justify-content: center;
  background: transparent;
}
.load-spinner span{
  font-size: 300%;
  font-family: "WDXL Lubrifont JP N";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #0f0f0f;
  position: absolute;
  align-self: center;
  transition: .3s ease;
  opacity: 1;
}
#loading.loading .load-spinner .finish-content,
#loading.loaded .load-spinner .loading-content{
  opacity: 0;
}
#loading.loaded{
  animation: load-complete .7s ease-in 1s forwards;
}
@keyframes load-complete{
  from{
    transform: translateY(0);
  }
  to{
    transform: translateY(-100%);
    display: none;
  }
}

.works{
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
  z-index: 10;
  @media screen and (min-width: 961px){
    height: 750px;
  }
  @media screen and (max-width: 960px){
    height: 700px;
  }
}
.works .contents{
  position: relative;
  top: 100px;
  left: 0;
  width: 100%;
  line-height: 30px;
}
.works-gallery{
  align-items: center;
  display: flex;
  @media screen and (min-width: 961px){
    height: 300px;
  }
  @media screen and (max-width: 960px){
    height: 200px;
  }
}
.works-slide{
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  margin: 0 0;
  padding: 0 0;
}
.works-slide .embla__viewport,
.works-slide .embla__container{
  height: 100%;
}
.works-slide .embla__slide{
  margin: 0 0;
  padding: 0 0;
  border: 2px solid var(--main-bg-color);
  @media screen and (min-width: 961px){
    flex: 0 0 450px;
  }
  @media screen and (max-width: 960px){
    flex: 0 0 300px;
  }
}
.works-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.about{
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
  position: relative;
  @media screen and (min-width: 961px){
    padding: 50px 0;
  }
}
.about .contents{
  position: relative;
  width: 100%;
  line-height: 30px;
  box-sizing: border-box;
  padding-top: 100px;
  @media screen and (min-width: 961px){
    left: 0;
  }
  @media screen and (max-width: 960px){
  }
}
.about .contents span{
  display: flex;
  width: 60%;
  margin: 0 20%;
  margin-bottom: 30px;
  padding: 3px;
  font-size: 120%;
  border: 0 ridge #0f0f0f;
  border-width: 0 0 2px 0;
  text-align: center;
  justify-content: center;
}
.about-gallery{
  list-style: none;
  @media screen and (min-width: 961px){
    margin: 0 20vw;
    padding: 0;
  }
  @media screen and (max-width: 960px){
    width: 80%;
    position: relative;
    margin: 0 auto;
    padding: 0;
  }
}
.about-gallery li{
  margin: 0 0;
  display: flex;
  @media screen and (min-width: 961px){
    padding: 2vh 0;
  }
  @media screen and (max-width: 960px){
    width: 100%;
    height: auto;
    flex-direction: column;
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 960px){
  .about-gallery li:nth-child(even){
    flex-direction: column-reverse;
  }
}
.about-gallery img{
  object-fit: cover;
  aspect-ratio: 3 / 2;
  @media screen and (min-width: 961px){
    max-width: 450px;
    max-height: 300px;
    width: 24vw;
    height: 16vw;
  }
  @media screen and (max-width: 960px){
    width: 100%;
    height: auto;
  }
}
.about-gallery .number{
  display: flex;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  font-family: "WDXL Lubrifont JP N";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  @media screen and (max-width: 960px){
    margin-top: 20px;
    justify-content: center;
  }
}
@media screen and (min-width: 961px){
  .about-gallery li:nth-child(odd) .number{
    padding: 0 1vw 0 4vw;
  }
  .about-gallery li:nth-child(even) .number{
    padding: 0 4vw 0 1vw;
  }
}
.about-gallery .sentence{
  padding: 0 0;
  font-size: 110%;
  @media screen and (min-width: 961px){
    width: calc(80vw - 450px);
    display: flex;
    justify-content: center;
    vertical-align: middle;
    flex-direction: column;
  }
  @media screen and (max-width: 960px){
    width: 100%;
    margin-top: 10px;
    overflow-x: clip;
  }
}
.about-gallery .sentence span{
  width: 100%;
  margin: 0;
  font-size: 120%;
}

.member{
  padding-top: 100px;
  background-color: var(--main-bg-color);
}
.random-member{
  position: relative;
  user-select: none;
  display: flex;
  overflow: hidden;
  justify-content: center;
  border: 5px groove #a0a0a0;
  aspect-ratio: 3 / 2;
  container-type: size;
  @media screen and (min-width: 961px){
    margin: 0 20vw;
  }
  @media screen and (max-width: 960px){
    margin: 0 5vw;
  }
  > div{
    aspect-ratio: 5 / 7;
    height: 80%;
    margin: 10cqh 0;
    transition: .5s ease;
    position: absolute;
  }
}
.popup{
  display: none;
}
.popup-label{
  position: relative;
}
.subhead,
.subhead-back{
  border: 1px solid #0f0f0f;
  margin: 0;
  border-radius: calc(100vw / 35);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: var(--cursor-pointer);
  background: var(--main-button-bg-color);
  container-type: size;
  box-sizing: border-box;
  backface-visibility: hidden;
  rotate: y 180deg;
  transition: .5s ease;
  box-shadow: 0 5px 5px var(--main-shadow-color);
}
.subhead-back{
  position: absolute;
  display: grid;
  rotate: y 0deg;
  top: 0;
  left: 0;
  outline-offset: -21px;
}
.subhead-back img{
  width: 80%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  justify-self: center;
  align-self: center;
}
.popup:checked + .popup-label .subhead{
  rotate: y 0deg;
}
.popup:checked + .popup-label .subhead-back{
  rotate: y 180deg;
}
.member-icon{
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(100vw / 35);
}
.member-name{
  width: 100%;
  height: calc(100cqh - 100cqw);
  align-content: center;
  text-align: center;
}
.revert-icon{
  position: absolute;
  bottom: 0;
  right: 0;
  color: #0f0f0f;
  font-size: 200%;
  opacity: .5;
  transition: .5s ease;
  i{
    transition: .5s ease;
    rotate: z 0deg;
    cursor: var(--cursor-pointer);
  }
}
.revert-icon:has(i:hover),
.revert-icon:focus-visible{
  opacity: 1;
  i{
    rotate: z 360deg;
  }
}

.price{
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
  z-index: 10;
  @media screen and (min-width: 961px){
    padding-top: 100px;
  }
  @media screen and (max-width: 960px){
    padding-bottom: 50px;
  }
}
.price-table{
  position: relative;
  @media screen and (min-width: 961px){
    display: flex;
    left: 20vw;
    width: 60vw;
  }
  @media screen and (max-width: 960px){
    left: 10vw;
    width: 80vw;
  }
}
.price-table .images{
  display: flex;
  flex-direction: column;
}
.price-table img{
  padding: 0 2vw 0 0;
  aspect-ratio: 417 / 433;
  object-fit: contain;
  @media screen and (min-width: 961px){
    width: 30vw;
  }
  @media screen and (max-width: 960px){
    width: 100%;
  }
}
.price-table .expose{
  @media screen and (min-width: 961px){
    padding: 0 0 0 2vw;
    width: 30vw;
  }
  @media screen and (max-width: 960px){
    width: 100%;
  }
}

.news{
  background-color: var(--main-bg-color);
  @media screen and (min-width: 961px){
    padding-top: 100px;
  }
  @media screen and (max-width: 960px){
    padding-bottom: 50px;
  }
}
.news-gallery{
  flex-shrink: 0;
  width: 100%;
  margin: 0 0;
  padding: 0 0;
  align-items: center;
  display: flex;
  @media screen and (min-width: 961px) and (hover: hover){
    height: 300px;
  }
  @media screen and (min-width: 961px) and (hover: none){
    height: 450px;
  }
  @media screen and (max-width: 960px){
    height: 300px;
  }
}
.news-gallery .embla__viewport,
.news-gallery .embla__container{
  height: 100%;
}
.news-gallery .embla__slide{
  margin: 0 0;
  padding: 0 0;
  border: 2px solid var(--main-bg-color);
  @media screen and (min-width: 961px){
    flex: 0 0 450px;
  }
  @media screen and (max-width: 960px){
    flex: 0 0 300px;
  }
}
.news-image{
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--main-button-bg-color);
  cursor: var(--cursor-pointer);
  transition: .3s ease;
}
.news-image:hover{
  transform: scale(1.02);
}
.news-image img{
  width: 100%;
  object-fit: cover;
  @media screen and (min-width: 961px){
    height: 286px;
  }
  @media screen and (max-width: 960px){
    height: 200px;
  }
}
.news-over-img{
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  display: grid;
  grid-template-columns: 5px 1fr 1fr 5px;
  grid-template-rows: 5px auto 5px auto auto;
  column-gap: 0;
  text-decoration: none;
  line-height: 1;
  align-items: center;
  padding: 0;
  bottom: 0;
  left: 0;
  @media screen and (hover: hover) and (min-width: 961px){
    background: rgba(16, 16, 16, 0.4);
    backdrop-filter: blur(5px);
    position: absolute;
    width: 100%;
    height: 40%;
    transform: scale(1, 0);
    transform-origin: center bottom;
    z-index: 10;
    pointer-events: none;
    color: var(--sub1-font-color);
  }
  @media screen and ((hover: none) or (max-width: 960px)){
    position: relative;
    color: var(--main-font-color);
  }
}
.news-over-img::before{
  content: attr(data-date);
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.news-over-img::after{
  content: attr(data-category);
  grid-column: 3;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  border-radius: 10000px;
}
.news-image{
  border-style: solid;
  box-sizing: border-box;
  @media screen and (min-width: 961px){
    border-width: 5px;
  }
  @media screen and (max-width: 960px){
    border-width: 3px;
  }
}
/*
.news-image:has(.news-over-img[data-category="topics"]){
  border-color: var(--topics-color);
}
.news-image:has(.news-over-img[data-category="release"]){
  border-color: var(--release-color);
}
.news-image:has(.news-over-img[data-category="collab"]){
  border-color: var(--collab-color);
}
.news-image:has(.news-over-img[data-category="event"]){
  border-color: var(--event-color);
}
.news-image:has(.news-over-img[data-category="media"]){
  border-color: var(--media-color);
}
.news-image:has(.news-over-img[data-category="other"]){
  border-color: var(--other-color);
}
*/
.news-image{
  border-color: #0f0f0f;
}
.news-over-img[data-category="topics"]::after{
  background: var(--topics-color);
  color: var(--main-font-color);
}
.news-over-img[data-category="release"]::after{
  background: var(--release-color);
  color: var(--main-font-color);
}
.news-over-img[data-category="collab"]::after{
  background: var(--collab-color);
  color: var(--main-font-color);
}
.news-over-img[data-category="event"]::after{
  background: var(--event-color);
}
.news-over-img[data-category="media"]::after{
  background: var(--media-color);
  color: var(--main-font-color);
}
.news-over-img[data-category="other"]::after{
  background: var(--other-color);
}
.news-title{
  grid-column: 2 / 4;
  grid-row: 4;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contact{
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
  width: 100vw;
  z-index: 1;
  @media screen and (min-width: 961px){
    padding-top: 100px;
    height: 500px;
  }
  @media screen and (max-width: 960px){
    padding-bottom: 50px;
  }
}
.contact .sentence{
  @media screen and (min-width: 961px){
    margin: 0 20%;
    height: 50px;
    width: 60%;
  }
  @media screen and (max-width: 960px){
    margin: 0 10%;
    width: 80%;
  }
}
.contact-buttons{
  display: flex;
  position: relative;
  width: 100%;
  @media screen and (min-width: 961px){
    flex-direction: row;
  }
  @media screen and (max-width: 960px){
    flex-direction: column;
  }
}
.contact .inquiry{
  position: relative;
  display: flex;
  flex: 1;
  @media screen and (min-width: 961px){
    padding-right: 4%;
  }
  @media screen and (max-width: 960px){
  }
}
.contact .entry{
  position: relative;
  display: flex;
  flex: 1;
  @media screen and (min-width: 961px){
    padding-left: 4%;
  }
  @media screen and (max-width: 960px){
  }
}

@media screen and (min-width: 961px){
  .mov-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-size: auto auto;
    background-color: transparent;
    background-image: repeating-linear-gradient(120deg, transparent, transparent 6px, rgb(160, 160, 160) 6px, rgb(160, 160, 160) 9px );
    z-index: 1;
  }
  .home-mov{
    position: sticky;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    margin-top: 0;
    margin-left: 0;
    overflow: hidden;
    top: 100px;
    left: 0;
    z-index: -5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-bg-color);
  }
  .home-mov video{
    width: 100%;
    aspect-ratio: 16 / 9;
    z-index: 0;
    filter: blur(10px);
  }

  .group-name{
    position: absolute;
    color: #ffffff;
    z-index: 5000;
    font-size: 150px;
    width: calc(100vw - 300px);
    -webkit-text-stroke: 2px #0f0f0f;
    paint-order: stroke fill;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .group-name ul{
    height: 100%;
    width: 100%;
    display: flex;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    align-items: center;
    list-style: none;
    margin: 0 0;
    padding: 0 0;
  }
  .group-name li{
    width: 20%;
    vertical-align: middle;
    font-weight: 400;
    font-style: normal;
  }
  .group-name li:nth-child(1){
    font-family: var(--font1);
  }
  .group-name li:nth-child(2){
    font-family: var(--font2);
  }
  .group-name li:nth-child(3){
    font-family: var(--font3);
  }
  .group-name li:nth-child(4){
    font-family: var(--font4);
  }
  .group-name li:nth-child(5){
    font-family: var(--font5);
  }

  .works-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    color: var(--main-button-color);
    border: 3px solid var(--main-button-color);
    background: var(--main-button-bg-color);
    cursor: var(--cursor-pointer);
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 10;
  }
  .works-button::before{
    content: 'もっと見るもっと見るもっと見るもっと見るもっと見るもっと見るもっと見る\Aもっと見るもっと見るもっと見る　　　　　もっと見るもっと見るもっと見る\Aもっと見るもっと見るもっと見るもっと見るもっと見るもっと見るもっと見る';
    white-space: pre-wrap;
    position: absolute;
    color: transparent;
    width: 560px;
    height: 90px;
    z-index: 1;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  }
  .works-button::after{
    background: #0f0f0f;
    position: absolute;
    content: '';
    width: 560px;
    height: 90px;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
  }
  .works-button:hover,
  .works-button:hover:before,
  .works-button:focus-visible,
  .works-button:focus-visible:before{
    color: #ff0000;
    border-color: #0f0f0f;
  }
  .works-button:hover::after,
  .works-button:focus-visible::after{
    transform: scale(1, 1);
  }

  .about-button{
    position: relative;
    top: 30px;
    margin: 0 auto;
    width: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    cursor: var(--cursor-pointer);
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 1;
    line-height: normal;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background: var(--main-button-bg-color);
  }
  .about-button::after{
    background: var(--main-button-color);
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left center;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
  }
  .about-button:hover,
  .about-button:focus-visible{
    color: var(--main-button-font-color);
  }
  .about-button:hover::after,
  .about-button:focus-visible::after{
    transform: scale(2, 1);
  }

  .member-button{
    position: relative;
    top: 30px;
    margin: 0 auto;
    width: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    cursor: var(--cursor-pointer);
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 1;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background: var(--main-button-bg-color);
  }
  .member-button::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
    background: #ff00ff;
  }
  .member-button:hover,
  .member-button:focus-visible{
    color: #0f0f0f;
  }
  .member-button:hover::after,
  .member-button:focus-visible::after{
    transform: scale(1, 1);
    animation: rainbow-color .5s linear infinite;
  }
  @keyframes rainbow-color{
    0%{
      background:#ff00ff;
    }
    33%{
      background:#00ffff;
    }
    66%{
      background:#ffff00;
    }
    100%{
      background:#ff00ff;
    }
  }

  .price-button{
    position: relative;
    top: 30px;
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    cursor: var(--cursor-pointer);
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 1;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background: var(--main-button-bg-color);
  }
  .price-button::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 0);
    transform-origin: center center;
    transition: .2s cubic-bezier(0.379, 2.716, 0.808, 1.23);
    z-index: -1;
    background: var(--main-button-color);
  }
  .price-button:hover,
  .price-button:focus-visible{
    color: var(--main-button-font-color);
  }
  .price-button:hover::after,
  .price-button:focus-visible::after{
    transform: scale(1, 1);
  }
  .price-b-button{
    position: relative;
    top: 30px;
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    cursor: var(--cursor-pointer);
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 1;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background: var(--main-button-bg-color);
  }
  .price-b-button::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 0);
    transform-origin: center center;
    transition: .2s cubic-bezier(0.379, 2.716, 0.808, 1.23);
    z-index: -1;
    background: var(--main-button-color);
  }
  .price-b-button:hover,
  .price-b-button:focus-visible{
    color: var(--main-button-font-color);
  }
  .price-b-button:hover::after, .price-b-button:focus-visible::after{
    transform: scale(1, 1);
  }

  .news-image:hover .news-over-img,
  .news-image:focus-visible .news-over-img{
    transform: scale(1, 1);
  }

  .inquiry-button{
    position: relative;
    top: 30px;
    width: 80%;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: var(--cursor-pointer);
    transition: .2s cubic-bezier(0, 2, 1, 2);
    z-index: 1;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background: var(--main-button-bg-color);
  }
  .inquiry-button::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 0);
    transform-origin: center center;
    transition: .2s cubic-bezier(0, 2, 1, 2);
    z-index: -1;
    background: var(--main-button-color);
  }
  .inquiry-button:hover, .inquiry-button:focus-visible{
    color: var(--main-button-font-color);
  }
  .inquiry-button:hover::after,
  .inquiry-button:focus-visible::after{
    transform: scale(0.8, 0.8);
  }
  .entry-button{
    position: relative;
    top: 30px;
    width: 80%;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: var(--cursor-pointer);
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 1;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background: var(--main-button-bg-color);
  }
  .entry-button::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: center center;
    transition: .2s cubic-bezier(0, 2, 1, -1);
    z-index: -1;
    background: var(--main-button-color);
  }
  .entry-button:hover, .entry-button:focus-visible{
    color: var(--main-button-font-color);
  }
  .entry-button:hover::after, .entry-button:focus-visible::after{
    transform: scale(1, 1);
  }
}

@media screen and (max-width: 960px){
  .home-slide{
    position: sticky;
    z-index: -5;
    top: 75px;
  }
  .over-slide{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(16, 16, 16, 0.4);
    backdrop-filter: blur(5px);
    z-index: 1;
  }
  .top-slide .embla__slide{
    width: 100vw;
    height: calc(100vh - 75px);
  }
  .top-slide .embla__slide__img{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: calc(100vh - 75px);
    object-fit: cover;
    object-position: center;
  }
  .group-name{
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    writing-mode: vertical-rl;
    font-size: calc((100vh - 75px) / 5 - 2px);
    color: #ffffff;
    -webkit-text-stroke: 2px #0f0f0f;
    paint-order: stroke fill;
    font-family: var(--sp-group-font);
  }

  .works-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: var(--cursor-pointer);
    border-radius: 10000px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    box-sizing: border-box;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background-color: var(--main-button-bg-color);
  }

  .about-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: var(--cursor-pointer);
    border-radius: 10000px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    box-sizing: border-box;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background-color: var(--main-button-bg-color);
  }

  .member-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: var(--cursor-pointer);
    border-radius: 10000px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    box-sizing: border-box;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background-color: var(--main-button-bg-color);
  }
  
  .price-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: var(--cursor-pointer);
    border-radius: 10000px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    box-sizing: border-box;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background-color: var(--main-button-bg-color);
  }
  .price-b-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: var(--cursor-pointer);
    border-radius: 10000px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    box-sizing: border-box;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background-color: var(--main-button-bg-color);
  }

  .inquiry-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: var(--cursor-pointer);
    border-radius: 10000px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    box-sizing: border-box;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background-color: var(--main-button-bg-color);
  }
  .entry-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: var(--cursor-pointer);
    border-radius: 10000px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    box-sizing: border-box;
    border: 3px solid var(--main-button-color);
    color: var(--main-button-color);
    background-color: var(--main-button-bg-color);
  }
}