@charset "utf-8";

.web a:link {
  color: #60d5fc;
  text-decoration: none;
}

.web a:visited {
  color: #60d5fc;
  text-decoration: none;
}

.comics a:link {
  color: #ff75bb;
  text-decoration: none;
}

.comics a:visited {
  color: #ff75bb;
  text-decoration: none;
}

a.anchor {
  display: block;
  height: 1px;
  padding-top: 100px;
  margin-top: -100px;
}

.wrap {
  width: 100%;
  padding: 0 0 1px;
  background-repeat: repeat, repeat;
  background-position: top center, top center;
  background-size: 600px auto, 300px auto;
  background-attachment: fixed;
  background-color: #f5f5f5;
}

.webp .wrap {
  background-image: url(../img/bg_2.png), url(../img/bg_1.png);
}

.no-webp .wrap {
  background-image: url(../img/bg_2.webp), url(../img/bg_1.webp);
}

.header {
  position: fixed;
  width: 100%;
  height: 70px;
  padding: 1rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2d2d2d;
  z-index: 997;
}

.header_logo {
  position: relative;
  width: 140px;
  z-index: 999;
}

.header_navi li {
  display: inline-block;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 0 2rem;
}

.top {
  position: relative;
  width: 100%;
  padding: 6rem 0 0;
  z-index: 2;
}

.top_inner {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}

.top_inner::after {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding-top: 76%;
}

.top_item {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.top_item img {
  width: 100%;
}

.lead {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

.content {
  position: relative;
  width: 1000px;
  margin: 0 auto 6rem;
  padding: 60px 80px 40px;
  border-radius: 30px;
  z-index: 2;
}

.bg_blue {
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20387.18%20313.35%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23b0eafe%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22m230.51%2C0C143.97%2C0%2C73.83%2C70.14%2C73.83%2C156.68c0%2C11.43%2C1.23%2C22.58%2C3.56%2C33.32L0%2C236.22l95.55.09c27.26%2C46.1%2C77.51%2C77.04%2C134.96%2C77.04%2C86.53%2C0%2C156.67-70.14%2C156.67-156.67S317.04%2C0%2C230.51%2C0Zm102.19%2C258.88c-26.17%2C26.17-62.27%2C42.33-102.19%2C42.33-54.03%2C0-101.09-29.63-125.92-73.53l-1.5-2.65-58.63-1.38%2C46.86-27.64-1.1-4.45c-2.76-11.17-4.24-22.85-4.24-34.88%2C0-39.93%2C16.16-76.03%2C42.33-102.2%2C26.17-26.17%2C62.27-42.33%2C102.2-42.33s76.02%2C16.16%2C102.19%2C42.33c26.18%2C26.17%2C42.33%2C62.27%2C42.34%2C102.2%2C0%2C39.93-16.16%2C76.02-42.34%2C102.2Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22m345.75%2C146.4c-2.07-5.17-5.82-8.79-10.22-10.82-4.4-2.05-9.38-2.72-14.48-2.72h-65.88v-65.88c0-8.51-1.91-15.38-6.54-20.13-2.29-2.35-5.18-4.05-8.47-5.11-3.3-1.08-7-1.56-11.14-1.56-4.78%2C0-8.85.71-12.29%2C2.1-5.17%2C2.07-8.79%2C5.82-10.82%2C10.22-2.06%2C4.41-2.72%2C9.38-2.72%2C14.48v65.88h-65.87c-4.38%2C0-8.24.49-11.64%2C1.59-5.1%2C1.6-9.15%2C4.69-11.64%2C8.99-2.51%2C4.3-3.53%2C9.53-3.53%2C15.58%2C0%2C4.69.68%2C8.71%2C2.04%2C12.12%2C2.02%2C5.14%2C5.7%2C8.8%2C10.1%2C10.88%2C4.4%2C2.1%2C9.41%2C2.81%2C14.67%2C2.82h65.87v65.88c0%2C4.37.5%2C8.23%2C1.59%2C11.64%2C1.6%2C5.09%2C4.69%2C9.15%2C8.98%2C11.64%2C4.3%2C2.51%2C9.54%2C3.52%2C15.58%2C3.53%2C4.7%2C0%2C8.73-.71%2C12.15-2.1%2C5.15-2.07%2C8.77-5.79%2C10.85-10.19%2C2.1-4.4%2C2.81-9.38%2C2.82-14.51v-65.88h65.88c4.37%2C0%2C8.23-.5%2C11.64-1.59%2C5.09-1.6%2C9.15-4.69%2C11.64-8.99%2C2.51-4.29%2C3.53-9.52%2C3.53-15.58%2C0-4.77-.71-8.85-2.1-12.29h0Z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: bottom -80px right -25%;
  background-size: 50% auto;
  background-color: #60d5fc;
}

.bg_pink {
  background-color: #ff75bb;
}

.bg_gray {
  background-color: #2d2d2d;
}

.heading {
  width: 30%;
  margin: 0 auto 4rem;
  padding: 1.6rem;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  border-radius: 100px;
  background-color: #2d2d2d;
  border: #000 solid 2px;
}

.heading_2 {
  width: 30%;
  margin: 0 auto 1rem;
  padding: 1.6rem;
  text-align: center;
  color: #000;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  border-radius: 100px;
  background-color: #fff;
  border: #2d2d2d solid 2px;
}

.nomination {
  margin: 4rem 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.content p {
  margin: 0 0 3rem;
  text-align: center;
  width: 100%;
  color: #000;
  font-size: 12px;
}

.higher {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.700;
  margin: 10% 0 0;
  padding: 20% 12% 4rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.higher-bg-1 {
  background-image: url(../img/frame-gold.png);
}

.higher-bg-2 {
  background-image: url(../img/frame-silver.png);
}

.higher-bg-3 {
  background-image: url(../img/frame-copper.png);
}

.higher-num {
  position: absolute;
  width: 100%;
  top: -14%;
  left: 0;
  text-align: center;
}

.higher-num img {
  width: 50%;
}

.btn_higher {
  width: 40%;
  margin: 1.5rem auto 0;
}

.number-w {
  width: 100%;
  aspect-ratio: 1 / 0.218;
  margin: 0 0 0.6rem;
  text-align: center;
  background-image: url(../img/ribbon-w.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.number-c {
  width: 100%;
  aspect-ratio: 1 / 0.218;
  margin: 0 0 0.6rem;
  text-align: center;
  background-image: url(../img/ribbon-c.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.number-w p,
.number-c p {
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  transform: translateY(-12%);
}

.number-w p span,
.number-c p span {
  padding: 0 0.1em;
  font-size: 28px;
  font-weight: 800;
}

.title {
  width: 100%;
  height: 2.5em;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

a.btn {
  font-size: 16px;
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding: .8rem 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 0.4rem;
}

.btn_2 {
  padding: 1rem 0;
  font-size: 20px !important;
}

.btn_read {
  width: 100%;
  color: #000;
  background-color: #fff;
  background-image: url(../img/arrow.png);
  background-repeat: no-repeat;
  background-position: center right 5%;
  background-size: 4% auto;
  border: #000 solid 2px;
}

.bnr {
  width: 60%;
  margin: 0 auto 3rem;
  background: #fff;
}

.social {
  width: 100%;
  padding: 4rem 0;
}

.social ul {
  font-size: 0;
  text-align: center;
}

.social li {
  display: inline-block;
  width: 40px;
  margin: 0 30px 0 0;
}

.social li:last-child {
  margin: 0;
}

.footer p {
  margin: 0;
  font-size: 12px;
  color: #fff;
}

.footer-btm {
  padding: 60px 80px !important;
}

@media screen and (min-width: 1px) and (max-width: 750px) {
  .pc_display {
    display: none;
  }

  a.anchor {
    display: block;
    height: 1px;
    padding-top: 60px;
    margin-top: -60px;
  }

  .wrap {
    width: 100%;
    padding: 0 0 1px;
    background-size: 50% auto, 80% auto;
  }

  .header {
    height: 40px;
    padding: 1rem;
  }

  .header_logo {
    width: 28%;
  }

  .header_navi li {
    font-size: clamp(14px, 4vw, 18px);
    margin: 0 0 0 1rem;
  }

  .top {
    padding: 4rem 0 2rem;
  }

  .top_inner {
    width: 100%;
  }

  .top_inner::after {
    padding-top: 96%;
  }

  .lead {
    width: 90%;
  }

  .content {
    width: 94%;
    margin: 0 auto 3rem;
    padding: 3rem 2rem 0;
    border-radius: 20px;
  }

  .bg_blue {
    background-position: bottom -50px right -5%;
    background-size: 80% auto;
  }

  .heading {
    width: 70%;
    margin: 0 auto 3rem;
    padding: 1rem;
    font-size: 18px;
  }

  .heading_2 {
    width: 70%;
    margin: 0 auto 1rem;
    padding: 1rem;
    font-size: 18px;
  }

  .content p {
    margin: 0 0 3rem;
    font-size: 12px;
  }

  .nomination_item {
    width: 47%;
    margin: 0 6% 3rem 0;
  }

  .nomination_item img {
    border: #000 solid 1px;
  }

  .nomination_item:nth-child(2n) {
    margin: 0;
  }

  .nomination_item_2 {
    width: 47%;
    margin: 0 6% 3rem 0;
  }

  .nomination_item_2 img {
    border: #000 solid 1px;
  }

  .nomination_item_2:nth-child(2n) {
    margin: 0 0 3rem 0;
  }

  .nomination_item_2:last-child {
    margin: 0 0 3rem 0;
  }

  .higher {
    aspect-ratio: 1 / 0.820;
    margin: 11rem 0 0;
    padding: 4.6rem 1.5rem 0;
  }

  .higher-bg-1 {
    background-image: url(../img/sp-frame-gold.png);
  }

  .higher-bg-2 {
    background-image: url(../img/sp-frame-silver.png);
  }

  .higher-bg-3 {
    background-image: url(../img/sp-frame-copper.png);
  }

  .higher-num {
    top: -40%;
  }

  .higher-num img {
    width: 80%;
  }

  .btn_higher {
    width: 70%;
    margin: 1rem auto 0;
  }

  .number-w p,
  .number-c p {
    font-size: 4vw;
  }

  .number-w p span,
  .number-c p span {
    font-size: 6vw;
  }

  .title {
    height: 2.5em;
    font-size: 3.4vw;
  }

  .btn {
    font-size: 3.6vw !important;
  }

  .btn_2 {
    font-size: 4vw !important;
  }

  .bnr {
    width: 100%;
    margin: 0 0 1rem;
  }

  .social {
    padding: 3rem 0;
  }

  .social li {
    width: 34px;
    margin: 0 24px 0 0;
  }

  .footer p {
    margin: 0;
    font-weight: 2.4vw;
  }

  .footer-btm {
    padding: 3rem 2rem !important;
  }

}

@media screen and (min-width: 751px) and (max-width: 1024px) {
  .sp_display {
    display: none;
  }

  .top_inner {
    width: 100%;
  }

  .content {
    width: 90%;
    padding: 5%;
  }

  .heading {
    font-size: 20px;
  }

  .heading_2 {
    font-size: 20px;
  }

  .nomination_item {
    width: 30%;
    margin: 0 4% 4rem 0;
  }

  .nomination_item img {
    border: #000 solid 1px;
  }

  .nomination_item:nth-child(3n) {
    margin: 0 0 4rem 0;
  }

  .nomination_item:last-child {
    margin: 0 0 4rem 0;
  }

  .nomination_item_2 {
    width: 30%;
    margin: 0 4% 4rem 0;
  }

  .nomination_item_2 img {
    border: #000 solid 1px;
  }

  .nomination_item_2:nth-child(3n) {
    margin: 0 0 3rem 0;
  }

  .name {
    font-size: 16px;
  }

  .btn {
    font-size: 16px;
  }

  .btn_2 {
    font-size: 22px;
  }

}

@media screen and (min-width: 1025px) {
  .sp_display {
    display: none;
  }

  .web a:hover {
    color: #fff;
    text-decoration: none;
  }

  .comics a:hover {
    color: #fff;
    text-decoration: none;
  }

  .nomination_item {
    width: 22%;
    margin: 0 4% 4rem 0;
  }

  .nomination_item img {
    border: #000 solid 1px;
  }

  .nomination_item:nth-child(4n) {
    margin: 0;
  }

  .nomination_item:last-child {
    margin: 0 0 4rem 0;
  }

  .nomination_item_2 {
    width: 22%;
    margin: 0 4% 4rem 0;
  }

  .nomination_item_2 img {
    border: #000 solid 1px;
  }

  .nomination_item_2:nth-child(3n) {
    margin: 0;
  }

  .btn_read:hover {
    width: 100%;
    background: #ffee00;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-position: center right 5%;
    background-size: 4% auto;
  }

  a.btn_opacity img {
    -webkit-transition: -weblit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    transition: transform 0.3s;
  }

  a.btn_opacity img:hover {
    opacity: 0.7;
  }

  a.btn_over img {
    -webkit-transition: -weblit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    transition: transform 0.3s;
  }

  a.btn_over img:hover {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}