@charset "UTF-8";

html {
  font-size: 62.5%;
}

body {
  color: #4d4d4d;
}

/*--------------------------------------------------------ヘッダー*/
header {
  background: #ff6fa3;
  text-align: center;
}

header img {
  height: 10rem;
}

footer p{
  font-size: 1.6rem;
  background: #ffe4ee;
  display: inline-block;
  padding: 5px;
  color: #000;
  border-radius: 5px;
  border-bottom: 5px solid #ff6fa3;
}


/*--------------------------------------------------------top*/
#top {
  background: #ffe4ee;
  text-align: center;
}

#top h1 {
  font-size: 3.2rem;
  padding: 5rem 0;
}

.top-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.top-content {
  position: relative;
  border: 5px solid #000;
  border-left: 5px ridge #ff6fa3;
  border-right: 5px ridge #7266cf;
  border-bottom: 5px ridge #7266cf;
  margin-bottom: 5rem;
  background: #7266CF;
  background: linear-gradient(-60deg,rgba(114, 102, 207, 1) 0%, rgba(255, 111, 163, 1) 33%, rgba(255, 111, 163, 1) 66%, rgba(114, 102, 207, 1) 100%);
}

.top-content img {
  width: 15vw;
  transition: transform 0.3s ease;
  vertical-align: bottom;
}

.member-card {
  opacity: 0;
}


.top-content:hover img{
  transform: translateY(-20%);
}

.top-content:hover .hover-text {
  transform: translateY(6px);
  box-shadow: 0 0 0 0 transparent;
}

.top-content .hover-text {
  z-index: 2;
  font-size: 1.8rem;
  position: absolute;
  bottom: 7px;
  right: 0;
  padding: 0 1rem;
  opacity: 0;
}

.top-content p.name {
  font-size: 3.2rem;
  position: absolute;
  top: 60%;
  left: 60%;
  transform: translate(-50%,-50%) rotate(-60deg);
  white-space: nowrap;
  z-index: 2;
  font-weight: bold;
  opacity: 0;
}

.top-content::after {
  content: "";
  display: block;
  width: 15vw;
  aspect-ratio: 4 / 7;
  bottom: 0;
  right: 0;
  position: absolute;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 1;
  opacity: 0;
}



/*-------------------------------------花芽すみれ*/
.kagasu .member-card {
  animation: member-card-slide 1s ease-out 0s 1 forwards;
}
.kagasu::after{
  background: #b0c4de;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.kagasu p {
  color: #58626f;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.kagasu p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.kagasu .hover-text {
  background: #d8e2ef;
  border: 2px solid #58626f;
  box-shadow: -2px 6px 0 0 #58626f;
}


/*-------------------------------------花芽なずな*/
.kagana .member-card {
  animation: member-card-slide 1s ease-out 0.1s 1 forwards;
}
.kagana::after{
  background: #fabedc;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.kagana p{
  color: #7d5f6e;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.kagana p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.kagana .hover-text {
  background: #fddfee;
  border: 2px solid #7d5f6e;
  box-shadow: -2px 6px 0 0 #7d5f6e;
}

/*-------------------------------------小雀とと*/
.kogara .member-card {
  animation: member-card-slide 1s ease-out 0.2s 1 forwards;
}
.kogara::after{
  background: #faf5a5;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.kogara p{
  color: #7b7625;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.kogara p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.kogara .hover-text {
  background: #fdfad2;
  border: 2px solid #7b7625;
  box-shadow: -2px 6px 0 0 #7b7625;
}

/*-------------------------------------一ノ瀬うるは*/
.ichinose .member-card {
  animation: member-card-slide 1s ease-out 0.3s 1 forwards;
}
.ichinose::after{
  background: #a0c1fd;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.ichinose p{
  color: #21417d;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.ichinose p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.ichinose .hover-text {
  background: #d0e0fe;
  border: 2px solid #21417d;
  box-shadow: -2px 6px 0 0 #21417d;
}

/*-------------------------------------胡桃のあ*/
.kurumi .member-card {
  animation: member-card-slide 1s ease-out 0.4s 1 forwards;
}
.kurumi::after{
  background: #ffdbfe;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.kurumi p{
  color: #806e7f;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.kurumi p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.kurumi .hover-text {
  background: #ffdbfe;
  border: 2px solid #806e7f;
  box-shadow: -2px 6px 0 0 #806e7f;
}

/*-------------------------------------兎咲ミミ*/
.tosaki .member-card {
  animation: member-card-slide 1s ease-out 0.5s 1 forwards;
}
.tosaki::after{
  background: #c7b2d6;
  animation: member-card-down 1s ease-out 0.7s 1 forwards;
}
.tosaki p{
  color: #64596b;
  animation: member-card-down 1s ease-out 0.7s 1 forwards;
}
.tosaki p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.tosaki .hover-text {
  background: #e3d9eb;
  border: 2px solid #64596b;
  box-shadow: -2px 6px 0 0 #64596b;
}

/*-------------------------------------空澄セナ*/
.asumi .member-card {
  animation: member-card-slide 1s ease-out 0s 1 forwards;
}
.asumi::after{
  background: #ffffff;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.asumi p{
  color: #808080;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.asumi p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.asumi .hover-text {
  background: #ffffff;
  border: 2px solid #808080;
  box-shadow: -2px 6px 0 0 #808080;
}

/*-------------------------------------橘ひなの*/
.tachibana .member-card {
  animation: member-card-slide 1s ease-out 0.1s 1 forwards;
}
.tachibana::after{
  background: #fa96c8;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.tachibana p{
  color: #7d4b64;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.tachibana p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.tachibana .hover-text {
  background: #fdcbe4;
  border: 2px solid #7d4b64;
  box-shadow: -2px 6px 0 0 #7d4b64;
}

/*-------------------------------------英リサ*/
.hanabusa .member-card {
  animation: member-card-slide 1s ease-out 0.2s 1 forwards;
}
.hanabusa::after{
  background: #d1de79;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.hanabusa p{
  color: #696f3d;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.hanabusa p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.hanabusa .hover-text {
  background: #e8efbc;
  border: 2px solid #696f3d;
  box-shadow: -2px 6px 0 0 #696f3d;
}

/*-------------------------------------如月れん*/
.kisaragi .member-card {
  animation: member-card-slide 1s ease-out 0.3s 1 forwards;
}
.kisaragi::after{
  background: #be2152;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.kisaragi p{
  color: #5f1129;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.kisaragi p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.kisaragi .hover-text {
  background: #df90a9;
  border: 2px solid #5f1129;
  box-shadow: -2px 6px 0 0 #5f1129;
}

/*-------------------------------------神成きゅぴ*/
.kaminari .member-card {
  animation: member-card-slide 1s ease-out 0.4s 1 forwards;
}
.kaminari::after{
  background: #ffd23c;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.kaminari p{
  color: #80691e;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.kaminari p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.kaminari .hover-text {
  background: #ffe99e;
  border: 2px solid #80691e;
  box-shadow: -2px 6px 0 0 #80691e;
}

/*-------------------------------------八雲べに*/
.yakumo .member-card {
  animation: member-card-slide 1s ease-out 0.5s 1 forwards;
}
.yakumo::after{
  background: #85cab3;
  animation: member-card-down 1s ease-out 0.7s 1 forwards;
}
.yakumo p{
  color: #43655a;
  animation: member-card-down 1s ease-out 0.7s 1 forwards;
}
.yakumo p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.yakumo .hover-text {
  background: #c2e5d9;
  border: 2px solid #43655a;
  box-shadow: -2px 6px 0 0 #43655a;
}

/*-------------------------------------藍沢エマ*/
.aizawa .member-card {
  animation: member-card-slide 1s ease-out 0s 1 forwards;
}
.aizawa::after{
  background: #b4f1f9;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.aizawa p{
  color: #5a797d;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.aizawa p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.aizawa .hover-text {
  background: #daf8fc;
  border: 2px solid #5a797d;
  box-shadow: -2px 6px 0 0 #5a797d;
}

/*-------------------------------------紫宮るな*/
.shinomiya .member-card {
  animation: member-card-slide 1s ease-out 0.1s 1 forwards;
}
.shinomiya::after{
  background: #d6adff;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.shinomiya p{
  color: #6b5780;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.shinomiya p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.shinomiya .hover-text {
  background: #ebd6ff;
  border: 2px solid #6b5780;
  box-shadow: -2px 6px 0 0 #6b5780;
}

/*-------------------------------------猫汰つな*/
.nekota .member-card {
  animation: member-card-slide 1s ease-out 0.2s 1 forwards;
}
.nekota::after{
  background: #ff3652;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.nekota p{
  color: #801b29;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.nekota p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.nekota .hover-text {
  background: #ff9ba9;
  border: 2px solid #801b29;
  box-shadow: -2px 6px 0 0 #801b29;
}

/*-------------------------------------白波らむね*/
.shiranami .member-card {
  animation: member-card-slide 1s ease-out 0.3s 1 forwards;
}
.shiranami::after{
  background: #8eced9;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.shiranami p{
  color: #47676d;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.shiranami p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.shiranami .hover-text {
  background: #c7e7ec;
  border: 2px solid #47676d;
  box-shadow: -2px 6px 0 0 #47676d;
}

/*-------------------------------------小森めと*/
.komori .member-card {
  animation: member-card-slide 1s ease-out 0.4s 1 forwards;
}
.komori::after{
  background: #fba03f;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.komori p{
  color: #7e5020;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.komori p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.komori .hover-text {
  background: #fdd09f;
  border: 2px solid #7e5020;
  box-shadow: -2px 6px 0 0 #7e5020;
}

/*-------------------------------------夢野あかり*/
.yumeno .member-card {
  animation: member-card-slide 1s ease-out 0.5s 1 forwards;
}
.yumeno::after{
  background: #ff998d;
  animation: member-card-down 1s ease-out 0.7s 1 forwards;
}
.yumeno p{
  color: #804d47;
  animation: member-card-down 1s ease-out 0.7s 1 forwards;
}
.yumeno p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.yumeno .hover-text {
  background: #ffccc6;
  border: 2px solid #804d47;
  box-shadow: -2px 6px 0 0 #804d47;
}

/*-------------------------------------夜乃くろむ*/
.yano .member-card {
  animation: member-card-slide 1s ease-out 0s 1 forwards;
}
.yano::after{
  background: #909ec8;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.yano p{
  color: #484f64;
  animation: member-card-down 1s ease-out 0.2s 1 forwards;
}
.yano p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.yano .hover-text {
  background: #c8cfe4;
  border: 2px solid #484f64;
  box-shadow: -2px 6px 0 0 #484f64;
}

/*-------------------------------------紡木こかげ*/
.tsumugi .member-card {
  animation: member-card-slide 1s ease-out 0.1s 1 forwards;
}
.tsumugi::after{
  background: #5195e1;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.tsumugi p{
  color: #294b71;
  animation: member-card-down 1s ease-out 0.3s 1 forwards;
}
.tsumugi p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.tsumugi .hover-text {
  background: #a8caf0;
  border: 2px solid #294b71;
  box-shadow: -2px 6px 0 0 #294b71;
}

/*-------------------------------------千燈ゆうひ*/
.sendo .member-card {
  animation: member-card-slide 1s ease-out 0.2s 1 forwards;
}
.sendo::after{
  background: #ed784a;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.sendo p{
  color: #773c25;
  animation: member-card-down 1s ease-out 0.4s 1 forwards;
}
.sendo p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.sendo .hover-text {
  background: #f6bca5;
  border: 2px solid #773c25;
  box-shadow: -2px 6px 0 0 #773c25;
}

/*-------------------------------------蝶屋はなび*/
.chouya .member-card {
  animation: member-card-slide 1s ease-out 0.3s 1 forwards;
}
.chouya::after{
  background: #ea5506;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.chouya p{
  color: #752b03;
  animation: member-card-down 1s ease-out 0.5s 1 forwards;
}
.chouya p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.chouya .hover-text {
  background: #f5aa83;
  border: 2px solid #752b03;
  box-shadow: -2px 6px 0 0 #752b03;
}

/*-------------------------------------甘結もか*/
.amayui .member-card {
  animation: member-card-slide 1s ease-out 0.4s 1 forwards;
}
.amayui::after{
  background: #eca0aa;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.amayui p{
  color: #765055;
  animation: member-card-down 1s ease-out 0.6s 1 forwards;
}
.amayui p.name {
  animation: member-card-down-name 1s ease-out 0.2s 1 forwards;
}
.amayui .hover-text {
  background: #f6d0d5;
  border: 2px solid #765055;
  box-shadow: -2px 6px 0 0 #765055;
}

footer {
  background: #7266cf;
  color: #fff;
  text-align: center;
  padding: 2rem 0;
}



/*--------------------------メディアクエリ*/

@media screen and (min-width: 2000px) {
  .top-content p.name {
    font-size: 5.6rem;
  }

  .top-content .hover-text {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 1025px) {
  .top-content p.name {
    font-size: 2.4rem;
  }
}

@media screen and (max-width: 769px) {
  .top-content img {
    width: 20vw;
  }

  .top-content::after {
    width: 20vw;
  }

  .top-content .hover-text {
    font-size: 1.2rem;
  }

  .kurumi .member-card {
    animation: member-card-slide 1s ease-out 0s 1 forwards;
  }
  .kurumi::after{
    background: #ffdbfe;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }
  .kurumi p{
    color: #806e7f;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }

  .tosaki .member-card {
    animation: member-card-slide 1s ease-out 0.1s 1 forwards;
  }
  .tosaki::after{
    background: #c7b2d6;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }
  .tosaki p{
    color: #64596b;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }

  .asumi .member-card {
    animation: member-card-slide 1s ease-out 0.2s 1 forwards;
  }
  .asumi::after{
    background: #ffffff;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }
  .asumi p{
    color: #808080;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }

  .tachibana .member-card {
    animation: member-card-slide 1s ease-out 0.3s 1 forwards;
  }
  .tachibana::after{
    background: #fa96c8;
    animation: member-card-down 1s ease-out 0.5s 1 forwards;
  }
  .tachibana p{
    color: #7d4b64;
    animation: member-card-down 1s ease-out 0.5s 1 forwards;
  }

  .komori .member-card {
    animation: member-card-slide 1s ease-out 0s 1 forwards;
  }
  .komori::after{
    background: #fba03f;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }
  .komori p{
    color: #7e5020;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }

  .yumeno .member-card {
    animation: member-card-slide 1s ease-out 0.1s 1 forwards;
  }
  .yumeno::after{
    background: #ff998d;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }
  .yumeno p{
    color: #804d47;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }

  .yano .member-card {
    animation: member-card-slide 1s ease-out 0.2s 1 forwards;
  }
  .yano::after{
    background: #909ec8;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }
  .yano p{
    color: #484f64;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }

  .tsumugi .member-card {
    animation: member-card-slide 1s ease-out 0.3s 1 forwards;
  }
  .tsumugi::after{
    background: #5195e1;
    animation: member-card-down 1s ease-out 0.5s 1 forwards;
  }
  .tsumugi p{
    color: #294b71;
    animation: member-card-down 1s ease-out 0.5s 1 forwards;
  }

}

@media screen and (max-width: 426px) {
  .top-content img {
    width: 30vw;
  }

  .top-content::after {
    width: 30vw;
  }

  header img {
    height: 6rem;
  }

  .ichinose .member-card {
    animation: member-card-slide 1s ease-out 0s 1 forwards;
  }
  .ichinose::after{
    background: #a0c1fd;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }
  .ichinose p{
    color: #21417d;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }

  .kurumi .member-card {
    animation: member-card-slide 1s ease-out 0.1s 1 forwards;
  }
  .kurumi::after{
    background: #ffdbfe;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }
  .kurumi p{
    color: #806e7f;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }

  .tosaki .member-card {
    animation: member-card-slide 1s ease-out 0.2s 1 forwards;
  }
  .tosaki::after{
    background: #c7b2d6;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }
  .tosaki p{
    color: #64596b;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }

  .asumi .member-card {
    animation: member-card-slide 1s ease-out 0s 1 forwards;
  }
  .asumi::after{
    background: #ffffff;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }
  .asumi p{
    color: #808080;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }

  .tachibana .member-card {
    animation: member-card-slide 1s ease-out 0.1s 1 forwards;
  }
  .tachibana::after{
    background: #fa96c8;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }
  .tachibana p{
    color: #7d4b64;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }

  .shiranami .member-card {
    animation: member-card-slide 1s ease-out 0s 1 forwards;
  }
  .shiranami::after{
    background: #8eced9;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }
  .shiranami p{
    color: #47676d;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }

  .komori .member-card {
    animation: member-card-slide 1s ease-out 0.1s 1 forwards;
  }
  .komori::after{
    background: #fba03f;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }
  .komori p{
    color: #7e5020;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }

  .yumeno .member-card {
    animation: member-card-slide 1s ease-out 0.2s 1 forwards;
  }
  .yumeno::after{
    background: #ff998d;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }
  .yumeno p{
    color: #804d47;
    animation: member-card-down 1s ease-out 0.4s 1 forwards;
  }

  .yano .member-card {
    animation: member-card-slide 1s ease-out 0s 1 forwards;
  }
  .yano::after{
    background: #909ec8;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }
  .yano p{
    color: #484f64;
    animation: member-card-down 1s ease-out 0.2s 1 forwards;
  }

  .tsumugi .member-card {
    animation: member-card-slide 1s ease-out 0.1s 1 forwards;
  }
  .tsumugi::after{
    background: #5195e1;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }
  .tsumugi p{
    color: #294b71;
    animation: member-card-down 1s ease-out 0.3s 1 forwards;
  }

}

@media screen and (max-width: 376px) {
  .top-content p.name {
    font-size: 1.6rem;
  }

  .top-content .hover-text {
    font-size: 0.8rem;
  }

  .top-content img {
    width: 30vw;
  }

  .top-content::after {
    width: 30vw;
  }

  header img {
    height: 6rem;
  }

}