@charset "UTF-8";
/*----------------------------------------------------
基本設定
----------------------------------------------------*/
body::after {
  width: 80vh;
  max-width: 100%;
  height: 100%;
  position: fixed;
  content: "";
  background-image: url(../images/common/wb_black.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  left: 50%;
  top: 55%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /* 751- */
}
@media all and (min-width: 751px) {
  body::after {
    width: 58vh;
    height: 100%;
    top: 55%;
    max-width: 740px;
  }
}

header {
  position: fixed;
  z-index: 100;
  opacity: 0;
  bottom: -10px;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
header.active {
  bottom: 0;
  opacity: 1;
  pointer-events: all;
}

section {
  position: relative;
  height: 100dvh;
  z-index: 1;
}

.sec_head {
  margin: 0 auto;
  position: absolute;
  top: 21%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  /* 751- */
}
@media all and (min-width: 751px) {
  .sec_head {
    top: 24%;
  }
}

.sec_body {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 80vh;
  max-width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /* 751- */
}
@media all and (min-width: 751px) {
  .sec_body {
    top: 55%;
    width: 58vh;
    max-width: 740px;
  }
}
.sec_body a img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (hover: hover) {
  .sec_body a:hover img {
    opacity: 1;
  }
}

.sec_foot {
  position: absolute;
  top: 76%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 0 auto;
  width: 80%;
  /* 751- */
}
@media all and (min-width: 751px) {
  .sec_foot {
    top: 76%;
    max-width: 750px;
  }
}

.wb_logo {
  width: 50vh;
  max-width: 70%;
  top: 11%;
  /* 751- */
}
@media all and (min-width: 751px) {
  .wb_logo {
    width: 38vh;
    max-width: 480px;
    top: 18%;
  }
}

.wb_menu {
  width: 31vh;
  /* 751- */
}
@media all and (min-width: 751px) {
  .wb_menu {
    width: 25vh;
    max-width: 340px;
  }
}

.creators {
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 751- */
}
@media all and (min-width: 751px) {
  .creators {
    width: 60%;
  }
}
.creators {
  /* -750 */
}
@media all and (max-width: 750px) {
  .creators {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.creators li {
  width: 25%;
}
.creators li img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (hover: hover) {
  .creators li a:hover img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

.menu_list {
  position: absolute;
  bottom: 11%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3vw;
  width: 80%;
}
.menu_list li {
  width: 33%;
  aspect-ratio: 1/1;
  height: auto;
}
.menu_list li a {
  padding: 2vw;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 20vw;
}
.menu_list li.music a {
  background: #EA4E33;
}
.menu_list li.illustration a {
  background: #0073D8;
}
.menu_list li.web a {
  background: #009327;
}

.creator_name {
  font-size: clamp(60px, 8vw, 90px);
  text-align: center;
  color: #FFFFC8;
  top: 17%;
}
.creator_name a {
  color: #FFFFC8;
}
.creator_name {
  /* 751- */
}
@media all and (min-width: 751px) {
  .creator_name {
    top: 18%;
  }
}

.sec_ttl {
  position: absolute;
  top: 11%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80%;
  margin: 0 auto;
}

.bean_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}

.latest_creat_three {
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  /* 751- */
}
@media all and (min-width: 751px) {
  .latest_creat_three {
    gap: 20px;
    padding: 20px;
  }
}
.latest_creat_three li {
  width: 25%;
}
.latest_creat_three a {
  color: #fff;
}

.dm_insta a {
  display: block;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  color: #fff;
  /* 751- */
}
@media all and (min-width: 751px) {
  .dm_insta a {
    padding: 20px;
  }
}
.dm_insta a {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (hover: hover) {
  .dm_insta a:hover {
    background: rgb(0, 0, 0);
  }
}
.dm_insta a span {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  /* 751- */
}
@media all and (min-width: 751px) {
  .dm_insta a span {
    font-size: 22px;
    margin-bottom: 10px;
  }
}

footer {
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
}
/*# sourceMappingURL=top.css.map */