/*!
global > color
------------------------------
*/
/*!
global > content-width
------------------------------
*/
/*!
global > font
------------------------------
*/
/*!
global > mixin
------------------------------
*/
.c_card__romanji {
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  .c_card__romanji {
    font-size: clamp(
      0.75rem,
      0.3605769231vw + 0.5769230769rem,
      0.9375rem
  );
  }
}

.c_card__kanji {
  font-size: 1.25rem;
  padding-right: 20px;
}
@media screen and (min-width: 768px) {
  .c_card__kanji {
    font-size: clamp(
      1.25rem,
      0.4807692308vw + 1.0192307692rem,
      1.5rem
  );
  }
}

.p_top {
  background-color: #DC0000;
  min-height: calc(100vh - 65px);
}
@media screen and (min-width: 768px) {
  .p_top {
    min-height: calc(100vh - 70px);
  }
}
.p_top_wrap {
  max-width: 1160px;
  width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
  padding-block: 50px;
}
@media screen and (min-width: 768px) {
  .p_top_wrap {
    padding-top: 10.101010101vh;
    padding-bottom: 10.6060606061vh;
  }
}

.p_top_logo__target {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .p_top_logo__target {
    width: 264px;
  }
}

.p_top_cards {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 50px;
}
@media screen and (min-width: 768px) {
  .p_top_cards {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 9.0909090909vh;
  }
}

.c_card__target {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .c_card__target:hover {
    opacity: 1;
  }
  .c_card__target:hover img,
  .c_card__target:hover .c_card__body {
    opacity: 0.7;
  }
}
.c_card__thumb {
  position: relative;
  padding-top: 67.8571428571%;
  background-color: #fff;
}
.c_card__thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}
.c_card__body {
  display: inline-flex;
  flex-direction: column;
  margin-left: auto;
  transition: opacity 0.3s ease-in-out;
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  .c_card__body {
    margin-top: 17px;
  }
}
.c_card__kanji {
  border-bottom: 1px solid #FFFFFF;
  font-weight: 500;
  position: relative;
  color: #FFFFFF;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .c_card__kanji {
    padding-bottom: 2px;
  }
}
.c_card__kanji::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 4px;
  height: 6px;
  background-image: url("../images/icon_arrow.svg");
}
.c_card__romanji {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #FFFFFF;
}
@media screen and (min-width: 768px) {
  .c_card__romanji {
    margin-top: 7px;
  }
}
/*# sourceMappingURL=top.css.map */