.toppage .l-contents {
  padding-top: 35rem;
}

.intro {
  align-items: center;
  background: #fff;
  display: flex;
  height: 100dvh;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.intro__inner {
  animation: holizonal 6s infinite alternate linear;
  opacity: 0;
  width: 12.5rem;
}

.intro__inner.is-normal {
  width: 25.6rem;
}

.intro__inner.is-holizonal--reverce,
.intro__inner.is-skew--reverce,
.intro__inner.is-vertical--reverce {
  animation-direction: alternate-reverse;
}

.intro__inner.is-holizonal svg {
  transform-origin: -20% 50%;
}

.intro__inner.is-holizonal--reverce svg {
  transform-origin: 100% 50%;
}

@keyframes holizonal {
  0% {
    transform: translateX(-3rem);
  }

  100% {
    transform: translateX(5rem);
  }
}

.intro__inner.is-skew {
  animation-name: skew;
}

.intro__inner.is-skew svg {
  transform-origin: 0% 100%;
}

.intro__inner.is-skew--reverce svg {
  transform-origin: 100% 100%;
}

@keyframes skew {
  0% {
    transform: translate(-3rem, -1rem);
  }

  100% {
    transform: translate(5rem, 2rem);
  }
}

.intro__inner.is-vertical {
  animation-name: vertical;
}

.intro__inner.is-vertical svg {
  transform-origin: 50% 0%;
}

.intro__inner.is-vertical--reverce svg {
  transform-origin: 50% 100%;
}

@keyframes vertical {
  0% {
    transform: translateY(-3rem);
  }

  100% {
    transform: translateY(5rem);
  }
}

.toppage .latest__links {
  display: flex;
  font-size: 2.8rem;
  gap: 2.7857142857em;
  justify-content: center;
  margin-bottom: 6rem;
}

.toppage .latest__links-link {
  align-items: center;
  display: flex;
  gap: .4285714286em;
  letter-spacing: .05em;
  width: auto;
}

.toppage .latest__links-dot {
  aspect-ratio: 1;
  background: #ed1c24;
  border-radius: 50%;
  display: block;
  width: .3571428571em;
}

.toppage .latest__block {
  display: flex;
  flex-direction: column;
  margin-bottom: 18rem;
}

.toppage .latest__block:nth-of-type(n+5) {
  display: none;
  opacity: 0;
}

.toppage .latest__block-main {
  aspect-ratio: 750/878;
  position: relative;
  width: 100%;
}

.toppage .latest__block-main::before {
  aspect-ratio: 750/115;
  background: linear-gradient(rgba(0, 0, 0, 0.3), transparent);
  content: "";
  height: auto;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: .5s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 100%;
  z-index: 1;
}

.toppage .latest__block-main img,
.toppage .latest__block-main picture {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
}

.toppage .latest__block-img {
  position: relative;
}

.toppage .latest__block-img::before,
.toppage .latest__block-img::after {
  content: "";
  display: block;
  inset: 0;
  position: absolute;
  transition: .5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.toppage .latest__block-img::before {
  background: #fff;
  mix-blend-mode: color;
}

.toppage .latest__block-img::after {
  background: var(--theme-color);
  mix-blend-mode: screen;
  opacity: .5;
}

.toppage .latest__block-shoulder {
  color: #fff;
  font-size: 2.6rem;
  position: absolute;
  top: 2.8rem;
  z-index: 2;
}

.toppage .latest__block-shoulder--cat {
  left: 2.5rem;
}

.toppage .latest__block-shoulder--season {
  right: 2.5rem;
}

.toppage .latest__block-col {
  opacity: 0;
}

.toppage .latest__block-series {
  font-size: 5rem;
  margin: 5.8rem auto 0;
  max-width: 80%;
  position: relative;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}

.toppage .latest__block-dot {
  aspect-ratio: 1;
  background: var(--theme-color, #000);
  border-radius: 50%;
  display: block;
  left: -0.7em;
  opacity: 0;
  position: absolute;
  top: .2em;
  width: .18em;
}

.toppage .latest__block-desc {
  font-size: 2.6rem;
  line-height: 1.75;
  margin: 3rem auto 0;
  text-align: center;
}

.toppage .latest__block .c-thumbList {
  margin-top: 5.5rem;
}

.toppage .latest__block-btns {
  align-items: flex-start;
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  margin-top: 4rem;
}

.toppage .latest__block.is-hidden {
  display: none;
}

.toppage .latest__block.is-show-more {
  display: flex;
}

.toppage .latest__block.is-show .latest__block-main::before {
  opacity: 1;
}

.toppage .latest__block.is-show .latest__block-img::before,
.toppage .latest__block.is-show .latest__block-img::after {
  background: rgba(0,0,0,0);
}

.toppage .ranking {
  color: #ed1c24;
  margin: 15.5rem auto 13rem;
  opacity: 0;
}

.toppage .ranking__title {
  text-align: center;
}

.toppage .ranking__title-shoulder {
  display: block;
  font-size: 2.6rem;
  text-align: center;
}

.toppage .ranking__title-main {
  display: block;
  font-size: 6.7rem;
  line-height: 0;
  margin-inline: auto;
}

.toppage .ranking__title-main svg {
  stroke-miterlimit: 10;
  stroke-width: 1.38px;
}

.toppage .ranking__title-main--l1 {
  margin-top: .447761194em;
  width: 5.1791044776em;
}

.toppage .ranking__title-main--l1 svg {
  fill: currentColor;
  stroke: rgba(0,0,0,0);
}

.toppage .ranking__title-main--l2 {
  margin-bottom: .5223880597em;
  margin-top: -.1194029851em;
  width: 3.6044776119em;
}

.toppage .ranking__title-main--l2 svg {
  fill: #fff;
  stroke: currentColor;
}

.toppage .ranking__lead {
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.9166666667;
  text-align: center;
}

.toppage .ranking__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 8rem;
  position: relative;
}

.toppage .ranking__list-block {
  border-bottom-style: solid;
  border-bottom-width: min(.2rem,1px);
  position: relative;
}

.toppage .ranking__list-block::before,
.toppage .ranking__list-block::after {
  background: currentColor;
  content: "";
  display: block;
  height: calc(100% - .8rem);
  position: absolute;
  top: .4rem;
  width: min(.2rem,1px);
}

.toppage .ranking__list-block .c-thumb {
  padding: 3.6rem 0 5.6rem;
  width: 30rem;
}

.toppage .ranking__list-block .c-thumb__info,
.toppage .ranking__list-block .c-thumb__itemName {
  color: currentColor;
  text-align: center;
}

.toppage .ranking__list-block .c-thumb__itemName {
  margin-top: 2.5rem;
}

.toppage .ranking__list-block .c-thumb__info {
  margin-top: 1.2rem;
}

.toppage .ranking__list-block .c-thumb__info-color {
  opacity: 1;
}

.toppage .ranking__list-block .c-thumb .c-favIcon {
  color: #000;
}

.toppage .ranking__list-num {
  aspect-ratio: 1;
  border: min(.2rem,1px) solid currentColor;
  border-radius: 50%;
  display: grid;
  font-size: 3rem;
  place-items: center;
  position: absolute;
  top: 2.4rem;
  width: 1.4em;
  z-index: 1;
}

.toppage .basic {
  --theme-color: #000;
  background: #e8e8e8;
  display: flex;
  flex-direction: column;
  opacity: 0;
  padding: 14.2rem 0 20.7rem;
}

.toppage .basic__col {
  display: contents;
}

.toppage .basic__title {
  margin: 0 auto;
  order: 1;
  position: relative;
  width: 41.2rem;
  z-index: 2;
}

.toppage .basic__slider {
  color: #fff;
  margin: -1.3rem auto 0;
  order: 2;
  width: 64.5rem;
}

.toppage .basic__slider-pagination {
  margin: 5rem auto 0;
  width: -moz-fit-content;
  width: fit-content;
}

.toppage .basic__slider-pagination .swiper-pagination-bullet {
  aspect-ratio: 1;
  background: #999;
  height: auto;
  margin: 0 1.25rem;
  opacity: 1;
  width: 1.5rem;
}

.toppage .basic__slider-pagination .swiper-pagination-bullet-active {
  background: #000;
}

.toppage .basic__slide {
  position: relative;
}

.toppage .basic__slide-series {
  bottom: 0;
  font-size: 3.4rem;
  margin-bottom: 5.4263565891%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  z-index: 1;
}

.toppage .basic__slide-bg {
  position: relative;
}

.toppage .basic__slide-bg::after {
  background: linear-gradient(transparent, #000);
  bottom: 0;
  content: "";
  display: block;
  height: 20%;
  opacity: .3;
  position: absolute;
  width: 100%;
}

.toppage .basic__text {
  font-size: 2.6rem;
  line-height: 1.9166666667;
  margin-top: 5rem;
  order: 3;
  text-align: center;
}

.toppage .basic .c-btn {
  color: #fff;
  margin: 4.8rem auto 0;
  order: 4;
}

@media screen and (min-width: 769px) {
  .toppage .l-contents {
    border-bottom: min(.2rem,1px) solid #e6e6e6;
    padding-top: 25.5rem;
  }

  .toppage .latest__links {
    font-size: 2rem;
    margin-bottom: 4.5rem;
  }

  .toppage .latest__block {
    align-items: center;
    flex-direction: row;
    margin: 0 auto;
    padding: 5.2rem 0;
    width: min(96.875%,155rem);
  }

  .toppage .latest__block:nth-of-type(odd):not(.latest__block--top) {
    flex-direction: row-reverse;
  }

  .toppage .latest__block:nth-of-type(n+3) {
    border-top: min(.2rem,1px) solid #e6e6e6;
  }

  .toppage .latest__block-main {
    aspect-ratio: auto;
    flex-shrink: 0;
    width: 50%;
  }

  .toppage .latest__block-main::before {
    aspect-ratio: auto;
    height: 12.0405576679%;
  }

  .toppage .latest__block-main img,
  .toppage .latest__block-main picture {
    aspect-ratio: 750/878;
    height: auto;
  }

  .toppage .latest__block-shoulder {
    font-size: clamp(1rem,1.40625vw,1.8rem);
    top: 2.3rem;
  }

  .toppage .latest__block-shoulder--cat {
    left: 1.8rem;
  }

  .toppage .latest__block-shoulder--season {
    right: 1.8rem;
  }

  .toppage .latest__block-col {
    width: 50%;
  }

  .toppage .latest__block-series {
    font-size: 3.5rem;
    margin: 0 auto;
  }

  .toppage .latest__block-desc {
    font-size: 1.5rem;
    margin-top: 2.7rem;
    width: 80%;
  }

  .toppage .latest__block .c-thumbList {
    margin-top: 4rem;
    padding: 2rem 0 4rem;
  }

  .toppage .latest__block .c-thumb {
    width: 80%;
  }

  .toppage .latest__block-btns {
    display: flex;
    gap: 1.4rem;
    justify-content: center;
    margin-top: 4rem;
  }

  .toppage .latest__block--top {
    flex-direction: column;
    padding-top: 0;
    width: 100%;
  }

  .toppage .latest__block--top .latest__block-main {
    width: 100%;
  }

  .toppage .latest__block--top .latest__block-shoulder {
    font-size: 1.8rem;
  }

  .toppage .latest__block--top .latest__block-img {
    display: flex;
    justify-content: center;
    overflow: clip;
  }

  .toppage .latest__block--top .latest__block-img img {
    flex-shrink: 0;
    width: max(64rem,50%);
  }

  .toppage .latest__block--top .latest__block-col {
    margin-top: 4.6rem;
    width: 100%;
  }

  .toppage .latest__block--top .c-thumbList {
    display: flex;
    gap: min(4.140625%,5.3rem);
    justify-content: center;
    margin-inline: auto;
    padding: 2rem 0 4rem;
    width: min(96.875%,155rem);
  }

  .toppage .latest__block--top .c-thumb {
    margin-inline: 0;
    width: 100%;
  }

  .toppage .latest__block--top .c-thumb:nth-of-type(2) {
    margin-right: min(.859375%,1.1rem);
  }

  .toppage .latest__block--top .c-thumb:nth-of-type(3) {
    margin-left: min(.859375%,1.1rem);
  }

  .toppage .latest .c-moreBtn {
    margin-top: 3rem;
  }

  .toppage .ranking {
    margin: 12rem auto 0;
  }

  .toppage .ranking__title-shoulder {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
  }

  .toppage .ranking__title-main {
    font-size: 4.7rem;
  }

  .toppage .ranking__lead {
    font-size: 1.6rem;
    margin-top: 2v .6rem;
  }

  .toppage .ranking__list {
    grid-template-columns: repeat(3, 1fr);
    margin: 6rem auto 0;
    width: min(calc(100% - 2rem),100rem);
  }

  .toppage .ranking__list-block:nth-of-type(-n+3) {
    border-top-style: solid;
    border-top-width: min(.2rem,1px);
  }

  .toppage .ranking__list-block::before,
  .toppage .ranking__list-block::after {
    height: calc(100% - .6rem);
    top: .3rem;
  }

  .toppage .ranking__list-block:nth-of-type(3n-2) {
    -o-border-image: linear-gradient(90deg, #ed1c24 0.7rem, transparent 0.7rem, transparent 1.3rem, #ed1c24 1.3rem, #ed1c24 calc(100% - 0.3rem), transparent calc(100% - 0.3rem)) 1;
    border-image: linear-gradient(90deg, #ed1c24 0.7rem, transparent 0.7rem, transparent 1.3rem, #ed1c24 1.3rem, #ed1c24 calc(100% - 0.3rem), transparent calc(100% - 0.3rem)) 1;
    margin-left: -1rem;
    padding-left: 1rem;
  }

  .toppage .ranking__list-block:nth-of-type(3n-2)::before {
    left: .9rem;
  }

  .toppage .ranking__list-block:nth-of-type(3n-2)::after {
    right: 0;
  }

  .toppage .ranking__list-block:nth-of-type(3n-1) {
    -o-border-image: linear-gradient(90deg, transparent 0.3rem, #ed1c24 0.3rem, #ed1c24 calc(100% - 0.3rem), transparent calc(100% - 0.3rem)) 1;
    border-image: linear-gradient(90deg, transparent 0.3rem, #ed1c24 0.3rem, #ed1c24 calc(100% - 0.3rem), transparent calc(100% - 0.3rem)) 1;
  }

  .toppage .ranking__list-block:nth-of-type(3n-1)::before,
  .toppage .ranking__list-block:nth-of-type(3n-1)::after {
    content: none;
  }

  .toppage .ranking__list-block:nth-of-type(3n) {
    -o-border-image: linear-gradient(90deg, transparent 0.3rem, #ed1c24 0.3rem, #ed1c24 calc(100% - 1.3rem), transparent calc(100% - 1.3rem), transparent calc(100% - 0.7rem), #ed1c24 calc(100% - 0.7rem), #ed1c24 100%) 1;
    border-image: linear-gradient(90deg, transparent 0.3rem, #ed1c24 0.3rem, #ed1c24 calc(100% - 1.3rem), transparent calc(100% - 1.3rem), transparent calc(100% - 0.7rem), #ed1c24 calc(100% - 0.7rem), #ed1c24 100%) 1;
    margin-right: -1rem;
    padding-right: 1rem;
  }

  .toppage .ranking__list-block:nth-of-type(3n)::before {
    left: 0;
  }

  .toppage .ranking__list-block:nth-of-type(3n)::after {
    right: .9rem;
  }

  .toppage .ranking__list-block .c-thumb {
    width: 90%;
  }

  .toppage .ranking__list-block .c-thumb__itemName {
    margin-top: 2rem;
  }

  .toppage .ranking__list-block .c-thumb__info {
    margin-top: .7rem;
  }

  .toppage .ranking__list-num {
    font-size: 2.1rem;
    margin-left: 17.4174174174%;
    top: 3.2rem;
  }

  .toppage .basic {
    align-items: center;
    flex-direction: row;
    margin: 6rem auto 9rem;
    padding: 4.6rem 0 5.2rem;
    width: min(100%,100rem);
  }

  .toppage .basic__col {
    display: block;
    order: 2;
    width: 46.6%;
  }

  .toppage .basic__title {
    width: min(70%,28.7rem);
  }

  .toppage .basic__slider {
    margin: 0 0 0 5%;
    order: 1;
    width: 45%;
  }

  .toppage .basic__slider-pagination {
    margin: 2.5rem auto 0;
  }

  .toppage .basic__slider-pagination .swiper-pagination-bullet {
    margin: 0 .8rem;
    width: 1rem;
  }

  .toppage .basic__slide-series {
    font-size: 2.4rem;
  }

  .toppage .basic__text {
    font-size: 1.6rem;
    margin-top: 3.9rem;
  }

  .toppage .basic .c-btn {
    margin: 6.5rem auto 0;
  }
}

@media screen and (max-width: 768px) {
  .toppage .latest__block-img img:nth-of-type(n+2) {
    display: none;
  }

  .toppage .ranking__list-block:nth-of-type(-n+2) {
    border-top-style: solid;
    border-top-width: min(.2rem,1px);
  }

  .toppage .ranking__list-block:nth-of-type(odd) {
    -o-border-image: linear-gradient(90deg, #ed1c24 0.8rem, transparent 0.8rem, transparent 1.6rem, #ed1c24 1.6rem, #ed1c24 calc(100% - 0.8rem), transparent calc(100% - 0.8rem)) 1;
    border-image: linear-gradient(90deg, #ed1c24 0.8rem, transparent 0.8rem, transparent 1.6rem, #ed1c24 1.6rem, #ed1c24 calc(100% - 0.8rem), transparent calc(100% - 0.8rem)) 1;
    padding-left: 1.2rem;
  }

  .toppage .ranking__list-block:nth-of-type(odd) .ranking__list-num {
    left: 3rem;
  }

  .toppage .ranking__list-block:nth-of-type(odd)::before {
    left: .9rem;
  }

  .toppage .ranking__list-block:nth-of-type(odd)::after {
    right: 0;
    transform: translateX(50%);
  }

  .toppage .ranking__list-block:nth-of-type(even) {
    -o-border-image: linear-gradient(90deg, transparent 0.8rem, #ed1c24 0.8rem, #ed1c24 calc(100% - 1.6rem), transparent calc(100% - 1.6rem), transparent calc(100% - 0.8rem), #ed1c24 calc(100% - 0.8rem)) 1;
    border-image: linear-gradient(90deg, transparent 0.8rem, #ed1c24 0.8rem, #ed1c24 calc(100% - 1.6rem), transparent calc(100% - 1.6rem), transparent calc(100% - 0.8rem), #ed1c24 calc(100% - 0.8rem)) 1;
    padding-right: 1.2rem;
  }

  .toppage .ranking__list-block:nth-of-type(even) .ranking__list-num {
    right: 3rem;
  }

  .toppage .ranking__list-block:nth-of-type(even)::before {
    content: none;
  }

  .toppage .ranking__list-block:nth-of-type(even)::after {
    right: .9rem;
  }
}

@media screen and (min-width: 769px)and (max-width: 980px) {
  .toppage .latest__block {
    align-items: flex-start;
  }

  .toppage .latest__block-btns {
    align-items: center;
    flex-direction: column;
  }

  .toppage .latest__block--top .latest__block-btns {
    flex-direction: row;
  }
}

@media (hover: hover) {
  .toppage .latest__links-link:hover {
    color: #555;
  }

  .toppage .latest__links-link:hover .latest__links-dot {
    animation: flash .4s steps(1) both;
  }

@keyframes flash {
    0% {
      opacity: 1;
    }

    25% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    75% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}
}