@charset "UTF-8";
body {
  color: #fff;
  background-color: #fff;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  -webkit-text-size-adjust: none;
  word-break: normal;
  word-wrap: break-word;
  overflow-x: hidden;
  font-feature-settings: "palt" 1;
  font-kerning: normal;
}

body {
  animation: whiteIn 1s ease 0s 1 normal;
  -webkit-animation: whiteIn 1s ease 0s 1 normal;
}

@keyframes whiteIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes whiteIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

a:link {
  text-decoration: underline;
  color: #eb5d41;
  transition: all 0.2s;
}

a:visited {
  text-decoration: underline;
  color: #eb5d41;
}

a:hover {
  text-decoration: underline;
  color: #1f788a;
}

.wrap {
  width: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  background-color: #0b1e3b;
}

.header-inner {
  position: relative;
  width: 100%;
  max-width: 1800px;
  aspect-ratio: 1 / 0.62;
  margin: 0 auto;
  background-position: top center;
  background-size: 100% auto;
}

.webp .header-inner {
  background-image: url(../img/top-bg.webp);
}

.no-webp .header-inner {
  background-image: url(../img/top-bg.jpg);
}

.top-cut-1 {
  position: absolute;
  width: 40%;
  bottom: 0;
  left: 0;
}

.top-cut-2 {
  position: absolute;
  width: 40%;
  bottom: 0;
  right: 0;
}

.top-logo {
  position: absolute;
  width: 100%;
  top: 8%;
  left: 0;
  text-align: center;
}

.top-logo img {
  width: 22%;
}

.period {
  position: absolute;
  width: 100%;
  bottom: 2.5%;
  left: 0;
  text-align: center;
}

.period img {
  width: 50%;
}

.content {
  position: relative;
  height: 100%;
}

.inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.about-bg {
  background-size: 100% auto;
  background-position: top left;
  background-repeat: repeat-y;
  background-color: #1f788a;
  background-image: url(../img/bg.png);
}

.about {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  color: #1f788a;
}

.about-inner {
  position: relative;
  width: 100%;
}

.about-title {
  position: relative;
  width: 100%;
  padding: 0 0 0 18%;
  z-index: 2;
}

p.about-lead {
  font-optical-sizing: auto;
  font-style: normal;
  margin: 1em 0 2rem;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.cut-1 {
  position: absolute;
  top: -45px;
  left: 0;
  width: 17%;
  z-index: 1;
}

.about-frame,
.about-frame-3 {
  z-index: 2;
  padding: 2rem 2rem 1.8rem;
}

.about-frame {
  position: relative;
  width: 100%;
  margin: 0 0 2rem;
  border-radius: 16px;
  background-color: #f4eece;
}

.cut-2 {
  position: absolute;
  top: -10px;
  right: -5%;
  width: 33%;
  z-index: 2;
}

.about-frame-2 {
  position: relative;
  width: 100%;
  margin: 0 0 3rem;
  padding: 2rem 20% 1.8rem 28%;
  border-radius: 16px;
  background-color: #f4eece;
}

.about-frame-2 img {
  width: 78%;
  margin: 0 0 0.5rem;
}

.cut-3 {
  position: absolute;
  bottom: 0;
  left: 7%;
  width: 24%;
  z-index: 2;
}

.about-frame-3 {
  position: relative;
  width: 48.5%;
  border-radius: 16px;
  background-color: #f4eece;
  text-align: center;
}

.about-frame-h {
  position: absolute;
  width: 100%;
  top: -18px;
  left: 0;
  text-align: center;
}

.about-frame-h img {
  width: 180px;
}

.about-frame p,
.about-frame-2 p,
.about-frame-3 p {
  font-size: 20px;
  font-weight: 700;
}

.about-frame p.note {
  font-size: 14px;
  font-weight: 400;
  padding-left: 1em;
  text-indent: -1em;
  margin: 0 0 0.3em;
}

.about-lead span,
.about-frame p span,
.about-frame-2 p span,
.about-frame-3 p span {
  display: inline-block;
  transform: rotate(15deg);
  padding: 0 0 0 0.15em;
}

.about-btn {
  width: 30%;
  margin: 1rem 0 0;
}

.vote-bg {
  position: relative;
  background-color: #7fd9d1;
  background-repeat: repeat;
  background-size: 15px auto;
  background-position: top left;
  background-image: url(../img/bg-dot.png);
}

.vote-outer {
  position: relative;
  padding: 3rem 0;
}

.vote-inner {
  position: relative;
  width: 100%;
}

.vote-list-title {
  position: relative;
  width: 100%;
  padding: 0 0 0 22%;
  z-index: 2;
}

p.vote-note {
  font-optical-sizing: auto;
  font-style: normal;
  margin: 1em 0 2rem;
  font-size: 14px;
  color: #134a51;
  padding-left: 1em;
  text-indent: -1em;
  text-shadow:
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1,
    0 0 5px #7fd9d1;
}

.cut-4 {
  position: absolute;
  top: -70px;
  left: -2%;
  width: 30%;
  z-index: 1;
}

.vote-box {
  position: relative;
  width: 100%;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 35px 25px;
  z-index: 3;
}

.vote-item {
  position: relative;
  font-optical-sizing: auto;
  font-style: normal;
}

.thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.thumb img {
  width: 100%;
  border: #1d48a9 3px solid;
  box-shadow: 3px 3px 0 rgba(254, 153, 113, 1);
}

.name {
  position: absolute;
  bottom: -5%;
  left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 80%;
  aspect-ratio: 1 / 0.18;
  text-align: center;
  background-color: #5a77a1;
  border-radius: 9999px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.num {
  position: absolute;
  top: -1em;
  left: -1em;
  width: 22%;
  aspect-ratio: 1 / 1;
  background-color: #fe9971;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
}

.thumb a.select-btn {
  display: block;
}

.thumb a.select-btn img {
  transition: all 0.2s;
}

.thumb a.select-btn img:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0);
}

.footer-bg {
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-color: #8f7399;
  background-image: url(../img/bg.png);
}

.free-banner {
  width: 100%;
  margin: 0 auto 3rem;
}

.free-banner img {
  border: #fff solid 1px;
  box-shadow: 3px 3px rgba(255, 255, 255, 1);
  transition: all 0.2s;
}

.free-banner img:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px rgba(255, 255, 255, 0);
}

.comics {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 0;
}

.comics-text {
  width: 100%;
  margin: 0 0 1.5rem;
}

.comics-cover {
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(0, 1fr);
  gap: 15px;
  align-items: stretch;
}

.comics-cover-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.comics-cover-list img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #fff;
  transition: all 0.2s;
}

.comics-cover-list img:hover {
  transform: translate(3px, 3px);
}

.comics-cover-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.comics-cover-feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #fff;
  transition: all 0.2s;
}

.comics-cover-feature img:hover {
  transform: translate(3px, 3px);
}


.comics-btn {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 80%;
  margin: 1.5rem auto 0;
}

.footer {
  width: 100%;
  padding: 2rem 0;
  color: #fff;
  background-color: #5a77a1;
  font-size: 12px;
  text-align: center;
}

.social {
  width: 100%;
  margin: 0 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-item:first-child {
  width: 8%;
  padding: 0 1.2%;
  line-height: 0;
}

.social-item {
  width: 6%;
  padding: 0 1.2%;
}

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

  .tab {
    display: none;
  }

  .header {
    width: 100%;
    background-color: #0b1e3b;
  }

  .header-inner {
    aspect-ratio: 1 / 1.17;
    background-position: top left;
    background-size: 100% auto;
  }

  .webp .header-inner {
    background-image: url(../img/sp-top-bg.webp);
  }

  .no-webp .header-inner {
    background-image: url(../img/sp-top-bg.jpg);
  }

  .top-cut-1 {
    width: 55%;
  }

  .top-cut-2 {
    width: 55%;
  }

  .top-logo {
    top: 6%;
  }

  .top-logo img {
    width: 80%;
  }

  .period {
    bottom: 1.5%;
  }

  .period img {
    width: 94%;
  }

  .inner {
    width: 100%;
  }

  .about-bg {
    background-image: url(../img/sp-bg.png);
  }

  .about {
    padding: 2rem 0;
  }

  .about-title {
    padding: 0 0 0 24%;
  }

  p.about-lead {
    position: relative;
    left: -31.579%;
    width: 131.579%;
    margin: 1em 0 2rem;
    font-size: 3.59vw;
  }

  .cut-1 {
    top: -22%;
    left: -3%;
    width: 28%;
  }

  .about-frame,
  .about-frame-3 {
    padding: 1.5rem 1rem 1rem;
  }

  .about-frame {
    position: relative;
    width: 100%;
    margin: 0 0 1.5rem;
    border-radius: 12px;
    background-color: #f4eece;
  }

  .cut-2 {
    top: -10px;
    right: -5%;
    width: 33%;
    z-index: 2;
  }

  .about-frame-2 {
    position: relative;
    width: 100%;
    margin: 0 0 2rem;
    padding: 1rem 1rem 1rem 28%;
    border-radius: 12px;
    background-color: #f4eece;
  }

  .about-frame-2 img {
    width: 100%;
    margin: 0 0 0.5rem;
  }

  .cut-3 {
    bottom: -24%;
    left: -4%;
    width: 30%;
  }

  .goods-text {
    font-size: 3.077vw !important;
  }

  .about-frame-3 {
    width: 100%;
    margin: 0 0 2rem;
    border-radius: 12px;
  }

  .about-frame-3:last-child {
    margin: 0;
  }

  .about-frame-h {
    top: -17px;
  }

  .about-frame-h img {
    width: 160px;
  }

  .about-frame p,
  .about-frame-2 p,
  .about-frame-3 p {
    font-size: 3.846vw;
  }

  .about-frame p.note {
    width: 74%;
    font-size: 3.077vw;
  }

  .about-btn {
    width: 70%;
    margin: 1rem auto 0;
  }

  .vote-bg {
    background-repeat: repeat;
    background-size: 10px auto;
    background-position: top left;
    background-image: url(../img/bg-dot.png);
  }

  .vote-outer {
    padding: 1rem 0;
  }

  .vote-list-title {
    width: 94%;
    padding: 0 0 0 30%;
  }

  p.vote-note {
    position: relative;
    left: -40%;
    width: 144%;
    margin: 1em 0 1rem;
    font-size: 3.077vw;
  }

  .cut-4 {
    top: -24%;
    left: -8%;
    width: 60%;
  }

  .vote-box {
    width: 94%;
    margin: 0 auto 1rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 14px;
  }

  .thumb {
    margin: 0 0 0.6rem !important;
  }

  .thumb img {
    border: #1d48a9 2px solid !important;
    box-shadow: 3px 3px 0 rgba(254, 153, 113, 1);
  }

  .name {
    aspect-ratio: 1 / 0.25;
    font-size: 2.8vw;
  }

  .num {
    width: 28%;
    font-size: 3.2vw;
  }

  .thumb a.select-btn img:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0);
  }

  .footer-bg {
    background-size: 100% auto;
  }

  .comics {
    width: 94%;
    padding: 1.5rem 0;
  }

  .comics .free-banner {
    margin-bottom: 1.5rem;
  }

  .comics-text {
    width: 86%;
    margin: 0 auto 0.8rem;
  }

  .comics-cover {
    grid-template-columns:
      minmax(0, 1.02fr)
      minmax(0, 1fr);
    gap: 8px;
  }

  .comics-cover-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .comics-cover-list img {
    border-width: 1px;
  }

  .comics-cover-feature {
    width: 100%;
    min-height: 100%;
    margin: 0;
    border-width: 1px;
  }

  .comics-cover-feature img {
    height: 100%;
    object-fit: cover;
  }

  .comics .comics-btn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 1.2rem;
  }

  .footer {
    padding: 1.5rem 0 1rem;
    font-size: 3.077vw;
  }

  .social {
    margin: 0 0 1rem;
  }

  .social-item:first-child {
    width: 12%;
    padding: 0 1%;
    line-height: 0;
  }

  .social-item {
    width: 10%;
    padding: 0 1%;
  }
}

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

  .period {
    position: absolute;
    width: 100%;
    bottom: 2.5%;
    left: 0;
    text-align: center;
  }

  .period img {
    width: 70%;
  }

  p.about-lead {
    font-size: 1.951vw;
  }

  .cut-1 {
    top: -30px;
  }

  .cut-2 {
    top: 40%;
    right: -2%;
    width: 28%;
  }

  .cut-3 {
    bottom: 0;
    left: 5%;
    width: 26%;
  }

  .about-frame p,
  .about-frame-2 p,
  .about-frame-3 p {
    font-size: 2.195vw;
  }

  .about-frame p.note {
    font-size: 1.707vw;
  }

  .about-btn {
    width: 30%;
    margin: 1rem 0 0;
  }

  .vote-box {
    width: 90%;
    margin: 0 auto 4.5rem;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
  }

  p.vote-note {
    font-size: 1.707vw;
  }
  .name {
    aspect-ratio: 1 / 0.18;
    font-size: 1.829vw;
  }
  .num {
    font-size: 1.829vw;
  }
  .footer {
    font-size: 1.463vw;
  }
}

@media screen and (min-width: 1025px) {
  .sp {
    display: none;
  }
  .tab {
    display: none;
  }
  .inner {
    max-width: 1000px;
  }
  .about-btn img,
  .comics-btn img {
    transition: all 0.2s;
  }
  .about-btn img:hover,
  .comics-btn img:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 rgba(43, 43, 43, 0);
  }
  a.btn-hover img,
  button.btn-hover img {
    -webkit-transition: -weblit-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    transition:
      transform 0.3s,
      -webkit-transform 0.3s;
  }
  a.btn-hover img:hover,
  button.btn-hover img:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
}