/* ------------------

 Parts

 ------------------ */
.section__wrap {
  padding: 4.8rem 12rem;
}

.top-heading {
  margin-bottom: 2.4rem;
  h2 {
    font-size: 4rem;
    letter-spacing: 0.1em;

    > i {
      font-size: 4.8rem;
      margin: 0 0.8rem;
    }
  }
  span {
    font-family: var(--font-en);
    color: var(--text-gray);
    font-weight: 700;
    font-size: 1.8rem;
  }
}

.top-subheading {
  margin-bottom: 2.4rem;
  h3 {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
  }
}

@media screen and (max-width: 1024px) {
  .section__wrap {
    padding: 4.8rem 2.4rem;
  }
}

@media screen and (max-width: 768px) {
  .top-heading {
    h2 {
      font-size: 3.2rem;

      > i {
        font-size: 4rem;
      }
    }
  }
}

/* ------------------

 メインビジュアル

 ------------------ */
#mv {
  border-bottom: solid 1px var(--border-black);
}

.mv__inner {
  display: flex;
}

.mv-title {
  padding: 4rem;
  border-right: solid 1px var(--border-black);

  .mv-title__text {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 8rem;

    h2 {
      color: var(--theme-blue);
      font-size: 1.6rem;
      font-weight: 600;
      writing-mode: sideways-rl;
      letter-spacing: 0.05em;
    }

    span {
      display: inline-block;
      font-family: var(--font-en);
      font-weight: 700;
      font-size: 12rem;
      writing-mode: vertical-rl;
      line-height: 1;
      letter-spacing: 0.05em;
    }
  }
}

.mv__swiper-option {
  position: relative;
  padding: 0 0.8rem;

  .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.8rem;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 2.4rem;
  }

  .swiper-button-prev {
    left: -1.6rem;
    &::after {
      content: "";
      display: inline-block;
      width: 1.8rem;
      aspect-ratio: 1 / 1;
      mask-image: url(../img/icon-arrow__left.svg);
      mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;
      background-color: var(--theme-blue);
    }
  }

  .swiper-button-next {
    right: -1.6rem;
    &::after {
      content: "";
      display: inline-block;
      width: 1.8rem;
      aspect-ratio: 1 / 1;
      mask-image: url(../img/icon-arrow__right.svg);
      mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;
      background-color: var(--theme-blue);
    }
  }
}

.swiper-slide.mv-slide__item {
  padding: 3.2rem 2.4rem;
  border-right: solid 1px var(--border-black);
  cursor: pointer;
  transition: background-color 0.4s ease-out;
  height: auto;
}

.circle-btn {
  position: absolute;
  width: 4rem;
  height: 4rem;
  display: inline-block;
  z-index: 2;
}

.circle-btn__svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.circle-btn__circle {
  fill: none;
  stroke: var(--theme-blue);
  stroke-width: 2;
  stroke-dasharray: 302;
  stroke-dashoffset: 302;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mv-slide__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  column-gap: 1.6rem;

  .mv-slide__info__area {
    display: flex;
    align-items: center;
    column-gap: 0.4rem;
    font-size: 1.2rem;

    > span:first-of-type {
      display: inline-block;
      min-width: fit-content;
    }
  }

  time {
    font-size: 1.4rem;
    font-family: var(--font-en);
    color: var(--text-gray);
  }
}

.mv-slide__thumbnail {
  aspect-ratio: 400 / 266;
  margin-bottom: 1.6rem;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;
  }
}

.mv-slide__title {
  font-size: 1.8rem;
  margin-bottom: 1.6rem;

  span {
    padding-bottom: 0.2rem;
    background-image: linear-gradient(
      to bottom,
      transparent,
      var(--border-black)
    );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 0.2rem;
    transition: background 0.4s ease-out;
  }
}

.mv-slide__profile {
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
  width: fit-content;
  margin-bottom: 1.6rem;
  color: var(--text-black);

  .mv-slide__profile__img {
    position: relative;
    width: 6rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      border: solid 1px var(--theme-blue);
      z-index: -1;
      border-radius: 50%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      transition: transform 0.4s ease;
    }
  }

  .mv-slide__profile__name {
    font-size: 1.4rem;
    text-decoration: underline;
    transition: color 0.4s ease;
  }
}

.mv-slide__tag__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  .mv-slide__tag__item > a {
    display: flex;
    align-items: center;
    column-gap: 0.2rem;
    font-size: 1.2rem;
    color: var(--text-black);
    padding: 0.2rem 1.2rem;
    border: solid 1px var(--border-black);
    border-radius: 4rem;
    transition: background-color 0.4s ease-out;
    background-color: var(--white);

    &::before {
      content: "#";
      color: var(--text-gray);
      font-size: 1.4rem;
      line-height: 1;
    }
  }
}

@media (any-hover: hover) {
  .circle-btn:hover .circle-btn__circle {
    stroke-dashoffset: 0;
  }

  .swiper-slide.mv-slide__item:hover {
    background-color: var(--theme-gray);
    .mv-slide__title {
      span {
        background-size: 100% 0.2rem;
      }
    }
    .mv-slide__thumbnail {
      img {
        transform: scale(1.1);
      }
    }
  }

  .mv-slide__profile:hover {
    .mv-slide__profile__name {
      color: var(--theme-blue);
    }
    .mv-slide__profile__img {
      img {
        transform: scale(0.9);
      }
    }
  }

  .mv-slide__tag__list {
    .mv-slide__tag__item > a:hover {
      color: var(--white);
      background-color: var(--text-black);

      &::before {
        color: var(--white);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .mv__inner {
    display: block;
  }

  .mv-title {
    padding: 4rem 2.4rem 1.6rem;
    border-right: none;
    border-bottom: solid 1px var(--border-black);

    .mv-title__text {
      flex-direction: column;
      margin-bottom: 2.4rem;

      h2 {
        writing-mode: horizontal-tb;
      }

      span {
        font-size: 8rem;
        writing-mode: horizontal-tb;
      }
    }
  }

  .mv__swiper-option {
    .swiper-button-prev {
      left: 0;
    }
    .swiper-button-next {
      right: 0;
    }
  }
}

/* ------------------

 地域から探す / キーワードで検索

 ------------------ */
#search--area-keyword {
  border-bottom: solid 1px var(--border-black);
  overflow-x: clip;
}

/* ----- 地域から探す ----- */
.area__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 2.4rem;
  margin-bottom: 4rem;
}

.area-title {
  width: fit-content;
}

.area-category {
  position: relative;
  flex: 1;
  width: 100%;
}

.area-category__inner {
  width: fit-content;
  margin-left: auto;
}

.articles-category__parent {
  display: flex;

  .articles-category__parent__item {
    display: flex;
    align-items: center;

    &::after {
      content: "/";
      color: var(--text-gray);
    }

    &:last-of-type:after {
      display: none;
    }

    > a {
      position: relative;
      display: block;
      color: var(--text-black);
      text-decoration: underline;
      padding: 1.6rem;
      transition: color 0.4s ease;

      &::before {
        opacity: 0;
        visibility: hidden;
        content: "";
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 2rem;
        height: 1rem;
        display: inline-block;
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        background-color: var(--theme-blue);
        transition: all 0.3s ease;
      }
    }

    &.is-active {
      > a {
        color: var(--theme-blue);
        &::before {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }
}

.articles-category__child {
  opacity: 0;
  visibility: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--theme-blue);
  padding: 1.6rem;
  transition: all 0.3s ease;
  z-index: 2;

  &.is-active {
    opacity: 1;
    visibility: visible;
  }

  .articles-category__child__item {
    display: flex;
    align-items: center;
    width: fit-content;
    column-gap: 0.2rem;

    &::after {
      content: "/";
      color: var(--text-gray);
    }

    &:last-of-type:after {
      display: none;
    }

    > a {
      display: block;
      font-size: 1.4rem;
      color: var(--white);
      transition: opacity 0.4s ease;
    }
  }
}

.articles-category__arrowSP {
  display: none;
}

.articles-category__toggleSP {
  display: none;
}

@media (any-hover: hover) {
  .articles-category__parent__item {
    > a:hover {
      color: var(--theme-blue);
    }
  }
  .articles-category__child__item {
    > a:hover {
      opacity: 0.6;
    }
  }
}

@media screen and (max-width: 1024px) {
  .area__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .area-category__inner {
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .area-category__inner {
    width: auto;
  }

  .articles-category__parent {
    display: block;

    .articles-category__parent__item {
      display: block;
      position: relative;
      border-top: dashed 1px var(--border-gray);

      &:last-of-type {
        border-bottom: dashed 1px var(--border-gray);
      }

      &::after {
        display: none;
      }

      > a {
        padding: 1.6rem 6.4rem 1.6rem 1.6rem;
      }
    }
  }

  .articles-category__arrowSP {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    /* background-color: var(--theme-blue); */
    z-index: -1;

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1.8rem;
      aspect-ratio: 1 / 1;
      background-color: var(--theme-blue);
      mask-image: url(../img/icon-arrow__right.svg);
      mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;
      background-color: var(--theme-blue);
    }
  }

  .articles-category__toggleSP {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1 / 1;
    z-index: -1;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 1.8rem;
      height: 2px;
      background-color: var(--theme-blue);
      transition: all 0.4s ease-in-out;
    }

    &::before {
      transform: translate(-50%, -50%);
    }

    &::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }

  .articles-category__parent__item.is-active {
    .articles-category__toggleSP {
      &::before {
        transform: translate(0, -50%);
        opacity: 0;
      }

      &::after {
        transform: translate(-50%, -50%) rotate(0);
      }
    }
  }
}

/* ----- キーワードで検索 ----- */
.tag__inner {
  margin-inline: calc(50% - 50vw);
}

.top-subheading.keyword {
  display: flex;
  align-items: center;
  column-gap: 3.2rem;

  &::before,
  &::after {
    content: "";
    display: inline-block;
    border-top: 1px dashed var(--border-gray);
  }

  &::before {
    width: 12rem;
  }

  &::after {
    width: 100%;
  }

  h3 {
    min-width: fit-content;
  }
}

.articles-tag {
  margin-bottom: 4rem;
}

.swiper.articles-tag__content {
  margin-bottom: 1.6rem;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.swiper-wrapper.articles-tag__list {
  /* display: flex;
  column-gap: 1.6rem; */
  transition-timing-function: linear;
  /* transition-duration: 0ms!important; */
}

.swiper-slide.articles-tag__item {
  width: auto;
  margin: 0 0.8rem;

  > a {
    display: flex;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.4rem 1.6rem;
    border: solid 1px var(--border-black);
    border-radius: 4rem;
    font-size: 1.4rem;
    color: var(--text-black);
    background-color: var(--white);
    transition: 0.3s ease;

    &::before {
      content: "#";
      color: var(--text-gray);
      font-size: 1.4rem;
      line-height: 1;
    }
  }
}

@media (any-hover: hover) {
  .swiper-slide.articles-tag__item {
    > a:hover {
      color: var(--white);
      background-color: var(--text-black);
    }
  }
}

@media screen and (max-width: 768px) {
  .top-subheading.keyword {
    column-gap: 1.6rem;

    &::before {
      width: 2.4rem;
    }
  }
}

/* ------------------

 ライターから探す

 ------------------ */
#search--writer {
  background-color: var(--white);
  overflow-x: clip;
  border-bottom: solid 1px var(--border-black);
}

.swiper.articles-writer__content {
  margin-inline: calc(50% - 50vw);
}

.swiper-wrapper.articles-writer__list {
  display: flex;
  transition-timing-function: linear;
}

.swiper.articles-writer__content:last-of-type {
  margin-bottom: 2.4rem;
  .swiper-slide.articles-writer__item {
    border-top: none;
  }
}

.swiper-slide.articles-writer__item {
  position: relative;
  border-top: solid 1px var(--border-black);
  border-bottom: solid 1px var(--border-black);
  border-right: solid 1px var(--border-black);
  width: fit-content;

  > a {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.6rem;
    padding: 1.6rem 4rem;
    color: var(--text-black);
    transition: 0.4s ease;

    .articles-writer__img {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .articles-writer__name {
      font-size: 1.4rem;
    }

    .articles-writer__scope {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      
      &::before,
      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        opacity: 0;
        visibility: hidden;
        border-radius: 50%;

        transition: all 0.6s ease;
      }

      &::before {
        width: 4.8rem;
        height: 4.8rem;
        border: solid 1px var(--border-black);
      }
      &::after {
        width: 4.2rem;
        height: 4.2rem;
        border: dashed 1px var(--border-black);
      }

      span:first-of-type {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        inset: 0;

        &::before,
        &::after {
          content: "";
          position: absolute;
          display: inline-block;
          width: 1px;
          height: 0.8rem;
          background-color: var(--border-black);
          transition: all 0.6s ease;
        }

        &::before {
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }

        &::after {
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      span:nth-of-type(2) {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        inset: 0;

        &::before,
        &::after {
          content: "";
          position: absolute;
          display: inline-block;
          width: 0.8rem;
          height: 1px;
          background-color: var(--border-black);
          transition: all 0.6s ease;
        }

        &::before {
          top: 50%;
          left: 0;
        }

        &::after {
          top: 50%;
          right: 0;
        }
      }
    }
  }
}

@media (any-hover: hover) {
  .swiper-slide.articles-writer__item {
    > a:hover {
      background-color: var(--theme-gray);

      .articles-writer__scope {
        &::before,
        &::after {
          opacity: 1;
          visibility: visible;
        }

        span:first-of-type {
          &::before,
          &::after {
            height: 1.6rem;
          }
        }

        span:nth-of-type(2) {
          &::before,
          &::after {
            width: 1.6rem;
          }
        }
      }
    }
  }
}

/* ------------------

 ランキング

 ------------------ */

.ranking-title--top,
.ranking-title--bottom {
  border-bottom: solid 1px var(--border-black);
  text-align: center;
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0;
  padding: 0.8rem 2.4rem;
  line-height: 1.4;
  letter-spacing: 0.1em;

  > i {
    font-size: 3.2rem;
    margin: 0 0.8rem;
  }
}

.swiper.ranking-slide {
  border-bottom: solid 1px var(--border-black);
}

.swiper-slide.ranking-slide__item {
  padding: 3.2rem 2.4rem;
  border-right: solid 1px var(--border-black);
  cursor: pointer;
  transition: background-color 0.4s ease-out;
  height: auto;
}

.ranking-slide__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  column-gap: 1.6rem;

  .ranking-slide__number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    aspect-ratio: 1 / 1;
    font-family: var(--font-en);
    font-size: 2.1rem;
    font-weight: 700;
    background-image: url(../img/ranking-number-circle.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ranking-slide__info__area {
    display: flex;
    align-items: center;
    column-gap: 0.4rem;
    font-size: 1.2rem;

    > span:first-of-type {
      display: inline-block;
      min-width: fit-content;
    }
  }

  time {
    font-size: 1.4rem;
    font-family: var(--font-en);
    color: var(--text-gray);
  }
}

.ranking-slide__thumbnail {
  aspect-ratio: 400 / 266;
  margin-bottom: 1.6rem;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;
  }
}

.ranking-slide__title {
  font-size: 1.8rem;
  margin-bottom: 1.6rem;

  span {
    padding-bottom: 0.2rem;
    background-image: linear-gradient(
      to bottom,
      transparent,
      var(--border-black)
    );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 0.2rem;
    transition: background 0.4s ease-out;
  }
}

.ranking-slide__profile {
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
  width: fit-content;
  margin-bottom: 1.6rem;
  color: var(--text-black);

  .ranking-slide__profile__img {
    position: relative;
    width: 6rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      border: solid 1px var(--theme-blue);
      z-index: -1;
      border-radius: 50%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      transition: transform 0.4s ease;
    }
  }

  .ranking-slide__profile__name {
    font-size: 1.4rem;
    text-decoration: underline;
    transition: color 0.4s ease;
  }
}

.ranking-slide__tag__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  .ranking-slide__tag__item > a {
    display: flex;
    align-items: center;
    column-gap: 0.2rem;
    font-size: 1.2rem;
    color: var(--text-black);
    padding: 0.2rem 1.2rem;
    border: solid 1px var(--border-black);
    border-radius: 4rem;
    transition: background-color 0.4s ease-out;
    background-color: var(--white);

    &::before {
      content: "#";
      color: var(--text-gray);
      font-size: 1.4rem;
      line-height: 1;
    }
  }
}

.ranking-drag__mousestalker {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  /* opacity: 0; */
  transform: translate(-50%, -50%) rotate(2.5deg);
  transition:
    opacity 0.4s ease,
    width 0.4s ease;
  overflow: hidden;
  width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  z-index: -1;

  &::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2.1rem);
    height: calc(100% - 2.1rem);
    border-radius: 50%;
    background-color: var(--theme-blue);
    opacity: 0.3;
  }

  &::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    mask-image: url(../img/ranking-drag-circle.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--white);
    position: absolute;
    inset: 0;
    animation: RotationAnimation 28s linear infinite;
  }

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    position: relative;
    width: 100%;
    color: var(--white);

    font-family: var(--font-en);
    font-weight: 700;
    font-size: 2.4rem;

    &::before,
    &::after {
      content: "";
      position: relative;
      display: inline-block;
      width: 1rem;
      aspect-ratio: 1 / 1;
    }

    &::before {
      border-top: solid 2px var(--white);
      border-left: solid 2px var(--white);
      transform: rotate(-45deg);
      top: 0.2rem;
      right: 0.2rem;
    }
    &::after {
      border-top: solid 2px var(--white);
      border-right: solid 2px var(--white);
      transform: rotate(45deg);
    }
  }
}

@keyframes RotationAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (any-hover: hover) {
  .swiper-slide.ranking-slide__item:hover {
    background-color: var(--theme-gray);
    .ranking-slide__title {
      span {
        background-size: 100% 0.2rem;
      }
    }
    .ranking-slide__thumbnail {
      position: relative;
      z-index: -1;
      img {
        transform: scale(1.1);
      }
    }
  }

  .ranking-slide__profile:hover {
    .ranking-slide__profile__name {
      color: var(--theme-blue);
    }
    .ranking-slide__profile__img {
      img {
        transform: scale(0.9);
      }
    }
  }

  .ranking-slide__tag__list {
    .ranking-slide__tag__item > a:hover {
      color: var(--white);
      background-color: var(--text-black);

      &::before {
        color: var(--white);
      }
    }
  }

  .ranking-slide__item:hover {
    .ranking-drag__mousestalker {
      width: 14rem;
      opacity: 1;
    }
  }
}

@media screen and (max-width: 768px) {
  .ranking-title--top,
  .ranking-title--bottom {
    font-size: 1.8rem;
    > i {
      font-size: 2.4rem;
    }
  }
}

/* ------------------

 Loconとは

 ------------------ */
.about__inner {
  padding: 8rem 0;
  display: flex;
  align-items: center;
  gap: 2.4rem 12rem;

  .about__title {
    width: 40rem;

    h1 {
      width: 20rem;
      margin: 0 auto;
    }

    p {
      font-size: 1.2rem;
    }
  }

  .about__description {
    flex: 1;
  }
}
.about__text__img {
  display: block;
  transform: translateY(0.2rem);
  img {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .about__inner {
    flex-direction: column;

    .about__title {
      width: 100%;
    }
  }
}