@charset "utf-8";

body {
  overflow-x: clip;
  position: relative;
  background-color: #F0F0F0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
  background-size: 6.25vw 6.25vw;

  @media (max-width: 768px) {
    background-size: 80px 80px;
  }
}

.news-inner {
  width: 66.875cqw;
  margin-inline: auto;
  padding-bottom: 12.5cqw;

  @media (max-width: 768px) {
    width: 100%;
    max-width: 450px;
    padding-bottom: 80px;
  }
}

.news-list {
  width: 100%;
  padding-block: 2.5cqw;
  display: block;
  position: relative;

  @media (max-width: 768px) {
    padding-block: 24px;
  }

  &:first-of-type {
    padding-top: 0;
  }

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-navy);
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #cdd3e3;
    scale: 0 1;
    transform-origin: left center;
    transition: scale 300ms 0s ease;
  }

  .day {
    font-family: var(--text-poppins);
    font-size: 1.09375cqw;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--color-navy);
    display: block;

    @media (max-width: 768px) {
      font-size: 1.4rem;
    }
  }

  .text {
    margin-top: 1.25cqw;
    padding-right: 5.625cqw;
    font-size: 1.171875cqw;
    font-weight: 500;
    line-height: 1.866666666666667;
    text-align: justify;
    word-break: break-all;
    position: relative;

    @media (max-width: 768px) {
      margin-top: 16px;
      padding-right: 55px;
      font-size: 1.5rem;
    }
  }

  .text .icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3.125cqw;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    z-index: 0;
    @media (max-width: 768px) {
      width: 40px;
      border-radius: 50%;
    }

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-sizing: border-box;
      background-color: var(--color-navy);
      border: 1px solid #fff;
      transition: opacity 300ms 0s ease;
      @media (max-width: 768px) {
        opacity: 0;
      }
    }

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-image: var(--grad02);
      transition: opacity 300ms 0s ease;
    }

    img {
      display: block;
      position: absolute;
      top: 26%;
      left: 50%;
      translate: -50% 0%;
      width: 1.875cqw;
      aspect-ratio: 24/17;
      z-index: 2;

      @media (max-width: 768px) {
        top: 30%;
        width: 24px;
      }

      img {
        display: block;
      }
    }
  }

  @media (min-width: 769px) {
    &:hover {
      &::after {
        scale: 1 1;
      }

      .text .icon {
        &::after {
          opacity: 0;
        }
      }
    }
  }
}

.pager {
  width: 100%;
  margin-top: 6.25cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25cqw;

  @media (max-width: 768px) {
    margin-top: 40px;
    gap: 5px;
  }

  .prev,
  .next {
    display: block;
    width: 5cqw;
    aspect-ratio: 1/1;
    margin-inline: 0.625cqw;
    background-color: #fff;
    border-radius: 2.5cqw;
    border: 1px solid var(--color-navy);
    position: relative;
    transition: background-color 300ms 0s ease;

    @media (max-width: 768px) {
      width: 38px;
      margin-inline: 6px;
      border-radius: 38px;
    }

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 2.03125cqw;
      aspect-ratio: 26/18;
      background-color: var(--color-navy);
      mask-image: url(../img/common/pager-arrow.png);
      mask-size: contain;
      transition: background-color 300ms 0s ease;

      @media (max-width: 768px) {
        width: 16px;
      }
    }
  }

  @media (max-width: 768px) {
    .prev {
      margin-left: 0;
    }

    .next {
      margin-right: 0;
    }
  }

  .next::before {
    rotate: 180deg;
  }

  .between {
    width: 3.125cqw;
    aspect-ratio: 1/1;
    border-radius: 1.5625cqw;
    font-family: var(--text-poppins);
    font-size: 1.5625cqw;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--color-navy);
    display: grid;
    place-content: center;
    position: relative;

    @media (max-width: 768px) {
      width: 32px;
      border-radius: 32px;
      font-size: 16px;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 1.5625cqw;
      background: var(--grad02);
      z-index: -1;
      opacity: 0;

      @media (max-width: 768px) {
        border-radius: 32px;
      }
    }

    &.active {
      color: #fff;

      &::before {
        opacity: 1;
      }
    }
  }
}

@media (min-width: 769px) {

  .pager .prev:hover,
  .pager .next:hover {
    background-color: var(--color-navy);

    &::before {
      background-color: #fff;
    }
  }
}

/* ↓↓↓ article ↓↓↓ */
.article-ttl-group {
  width: 80.625cqw;
  margin-inline: auto;

  @media (max-width: 768px) {
    width: 85.86666666666667vw;
    max-width: 450px;
  }

  .day {
    padding-top: 1.7968749999999998cqw;
    font-family: var(--text-poppins);
    font-size: 1.09375cqw;
    letter-spacing: 0.12em;
    line-height: 1;
    position: relative;

    @media (max-width: 768px) {
      padding-top: 14px;
      font-size: 1.0rem;
      letter-spacing: 0.24em;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 6.875000000000001cqw;
      height: 0.3125vw;
      background-image: var(--grad01);

      @media (max-width: 768px) {
        width: 76px;
        height: 3px;
      }
    }
  }

  .article-ttl {
    margin-top: 3.125cqw;
    padding-bottom: 3.125cqw;
    font-size: 2.5cqw;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    position: relative;

    @media (max-width: 768px) {
      margin-top: 26px;
      padding-bottom: 30px;
      font-size: 2.0rem;
      line-height: 1.6;
    }

    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: var(--color-navy);
    }
  }
}

.article-inner {
  width: 66.875cqw;
  margin-inline: auto;

  @media (max-width: 768px) {
    width: 85.86666666666667vw;
    max-width: 450px;
  }

  p {
    font-size: 1.171875cqw;
    letter-spacing: 0.04em;
    line-height: 2.133333;
    text-align: justify;
    word-break: break-all;

    @media (max-width: 768px) {
      font-size: 1.5rem;
    }
  }

  p + p {
    margin-top: 3.125cqw;

    @media (max-width: 768px) {
      margin-top: 40px;
    }
  }

  img {
    display: block;
    width: 53.125cqw;
    margin: 6.25cqw auto;

    @media (max-width: 768px) {
      width: 100%;
      margin: 40px auto;
    }
  }

  ul {
    padding-left: 1.5625cqw;

    @media (max-width: 768px) {
      padding-left: 20px;
    }

    li {
      font-size: 1.171875cqw;
      letter-spacing: 0.04em;
      line-height: 1.86667;

      @media (max-width: 768px) {
        font-size: 1.5rem;
      }

      b {
        display: block;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          top: 0.625cqw;
          left: -1.5625cqw;
          width: 0.9375cqw;
          aspect-ratio: 1/1;
          background: var(--grad02);
          border-radius: 0.9375cqw;

          @media (max-width: 768px) {
            top: 12px;
            left: -20px;
            width: 12px;
            border-radius: 50%;
          }
        }
      }
    }

    li + li {
      margin-top: 0.9375cqw;

      @media (max-width: 768px) {
        margin-top: 12px;
      }
    }
  }

  a {
    font-size: 1.171875cqw;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.86667;
    color: var(--color-navy);
    text-decoration: underline;
    position: relative;
    transition: opacity 300ms 0s ease;

    @media (max-width: 768px) {
      font-size: 1.5rem;
    }

    @media (min-width: 769px) {
      &:hover {
        opacity: .6;
      }
    }
  }

  a[target=_blank] {
    padding-right: 2.109375cqw;

    @media (max-width: 768px) {
      padding-right: 27px;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0.46875cqw;
      right: 0;
      width: 1.328125cqw;
      aspect-ratio: 17/13;
      background: url(../img/common/other-link-icon.png)no-repeat;
      background-size: contain;

      @media (max-width: 768px) {
        top: 6px;
        width: 17px;
      }
    }
  }
}

.backtoall {
  width: 25.624999999999996cqw;
  aspect-ratio: 328/64;
  margin: 9.375cqw auto 12.5cqw;
  border-radius: 3.125cqw;
  background: linear-gradient(90deg, rgba(255, 0, 72, 1) 0%, rgba(255, 0, 72, 1) 50%, rgba(158, 96, 204, 1) 75%, rgba(0, 227, 255, 1) 100%);
  display: grid;
  place-content: center;
  font-size: 1.40625cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  contain: paint;
  position: relative;

  @media (max-width: 768px) {
    width: 238px;
    aspect-ratio: 238/64;
    margin: 80px auto;
    border-radius: 64px;
    font-size: 1.8rem;
    padding-left: 20px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-navy);
    opacity: 0;
    transition: opacity 300ms 0s ease;
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1.25cqw;
    translate: 0 -50%;
    width: 3.125cqw;
    aspect-ratio: 1/1;
    background: url(../img/news/goback-arrow.png)no-repeat;
    background-size: contain;

    @media (max-width: 768px) {
      left: 12px;
      width: 40px;
    }
  }

  span {
    position: relative;
  }
}

@media (min-width: 769px) {
  .backtoall:hover {
    &::before {
      opacity: 1;
    }
  }
}

/* ↑↑↑ article ↑↑↑ */