.main{
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
  position: relative;
  @media screen and (min-width: 961px){
    margin-top: 1vh;
    padding: 50px 0;
  }
  @media screen and (max-width: 960px){
    padding-bottom: 50px;
  }
}
.main .contents{
  position: relative;
  width: 100%;
  line-height: 30px;
  @media screen and (min-width: 961px){
    left: 0;
  }
  @media screen and (max-width: 960px){
    padding-top: 100px;
  }
}
.gallery{
  display: grid;
  gap: 20px;
  grid-template-rows: 1fr;
  @media screen and (min-width: 961px){
    margin: 0 15vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  @media screen and (max-width: 960px){
    grid-template-columns: 1fr 1fr;
    width: 80%;
    position: relative;
    margin: 0 auto;
    padding: 0;
  }
}
.popup{
  display: none;
}
.pop-window{
  position: fixed;
  display: none;
  top: -10vh;
  left: 0;
  width: 100vw;
  height: 120vh;
  z-index: 1;
  backdrop-filter: blur(5px);
}
.pop-window.open{
  display: flex;
  animation: pop-window 0.5s ease forwards;
}
.pop-window.closing{
  display: flex;
  animation: pop-window-close 0.5s ease forwards;
}
@keyframes pop-window{
  from{
    opacity: 0;
    transform: translateY(5%);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pop-window-close{
  from{
    opacity: 1;
    transform: translateY(0);
  }
  to{
    opacity: 0;
    transform: translateY(-5%);
  }
}
.close-bg{
  position: absolute;
  width: 100%;
  height: 100%;
}
.pop-background{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(15, 15, 15, .5);
}
.pop-inner-window{
  height: 60%;
  position: relative;
  margin: auto auto;
  background: #ffffff;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 1vh .5vw;
  display: grid;
  gap: 1vh;
  @media screen and (min-width: 961px){
    width: 60%;
    min-width: 600px;
    min-height: 337.5px;
    grid-template-columns: 1fr 2fr;
    border: 6px solid #0f0f0f;
  }
  @media screen and (max-width: 960px){
    width: 90%;
    grid-template-columns: 1fr 1fr;
    border: 2px solid #0f0f0f;
  }
}
.close-button{
  position: absolute;
  top: 1vh;
  right: .5vw;
  transition: .2s ease;
  cursor: var(--cursor-pointer);
  @media screen and (min-width: 961px){
    font-size: 200%;
  }
  @media screen and (max-width: 960px){
    font-size: 250%;
    color: #ff0000;
  }
}
@media screen and (min-width: 961px){
  .close-button:hover, .close-button:focus-visible{
    color: #ff0000;
  }
}
.pop-icon-box{
  grid-column: 1;
  width: 100%;
  height: 100%;
  position: relative;
  align-self: start;
  display: flex;
}
.pop-icon{
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 30px;
  display: block;
  align-self: center;
  object-fit: cover;
}
.pop-member-name{
  width: 100%;
  height: 100%;
  font-size: 140%;
  font-weight: bold;
  @media screen and (min-width: 961px){
    text-align: center;
    grid-column: 1;
    grid-row: 2;
  }
  @media screen and (max-width: 960px){
    text-align: left;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    span{
      align-self: center;
    }
  }
}
.pop-member-explain{
  margin: 0 10px;
  @media screen and (min-width: 961px){
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 5vh;
  }
  @media screen and (max-width: 960px){
    grid-column: 1 / span 2;
    grid-row: 2;
  }
  span{
    color: transparent;
  }
}
@media screen and (min-width: 961px){
  .sns-icon-area{
    grid-column: 1;
    ul{
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      padding: 0;
      li{
        margin: 10px;
        aspect-ratio: 1 / 1;
        position: relative;
        container-type: size;
        display: flex;
        text-align: center;
        align-items: center;
        svg{
          width: 100%;
          height: 100%;
        }
        i, svg{
          position: absolute;
          top: 0;
          font-size: 100cqh;
          cursor: var(--cursor-pointer);
          transition: .2s ease;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}
@media screen and (max-width: 960px){
    .sns-icon-area{
    grid-column: 1 / span 2;
    grid-row: 3;
    ul{
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      padding: 0;
      li{
        width: min(80%, 100px);
        margin: 10px;
        aspect-ratio: 1 / 1;
        position: relative;
        container-type: size;
        display: flex;
        text-align: center;
        align-items: center;
        svg{
          width: 100%;
          height: 100%;
        }
        i, svg{
          position: absolute;
          top: 0;
          font-size: 100cqh;
          cursor: var(--cursor-pointer);
          transition: .2s ease;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}
.sns-icon-area li >:hover{
  transform: translateX(-50%) scale(1.1);
  transform-origin: center center;
}
li.pop-twitter i:hover{
  color: #1da1f2;
}
li.pop-youtube i:hover{
  color: #da1725;
}
li.pop-instagram i:hover{
  color: #cf2e92;
}
li.pop-soundcloud i:hover{
  color: #ff5500;
}
li.pop-bluesky i:hover{
  color: #0a7aff;
}
li.pop-discord i:hover{
  color: #5865f2;
}
li.pop-bilibili i:hover{
  color: #5af4ff;
}
li.pop-twitch i:hover{
  color: #6441a4;
}
li.pop-niconico svg:hover{
  fill: #231815;
}
li.pop-other svg:hover{
  animation: true-rainbow .25s linear infinite;
}
@keyframes true-rainbow{
    0%{
      fill:#ff0000;
    }
    16.7%{
      fill:#ffff00;
    }
    33.3%{
      fill:#00ff00;
    }
    50%{
      fill:#00ffff;
    }
    66.6%{
      fill:#0000ff;
    }
    83.3%{
      fill:#ff00ff;
    }
    100%{
      fill:#ff0000;
    }
  }
.subhead{
  border: 2px solid #0f0f0f;
  margin: 0;
  border-radius: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: var(--cursor-pointer);
  background: var(--main-button-bg-color)
}
.member-icon{
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 30px;
  object-fit: cover;
}
.member-status{
  width: 50%;
  align-self: center;
  text-align: center;
}
.member-name{
  width: 100%;
  align-self: center;
  text-align: center;
}

@media screen and (min-width: 961px){
  .entry-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-font-color);
    background: var(--main-button-color);
  }
  .entry-button:hover{
    color: var(--main-button-color);
    background: var(--main-button-bg-color);
  }
  .entry-button:hover::after{
    transform: scale(1, 1);
  }
}

@media screen and (max-width: 960px){
  .entry-button{
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
    width: 80%;
    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);
  }
}