@charset "UTF-8";

/* =====================
  article1
===================== */
.article[data-id='1'] {
  padding-block: 78px 160px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  /* ==== news-list ==== */
  .news-list {
    display: block grid;
    gap: 15px;
    align-self: flex-start;

    @media (width <=768px) {
      gap: var(--nudge-2);
    }

    li {
      position: relative;
      display: block grid;
      grid-template-columns: auto 1fr;

      @media (width <=768px) {
        grid-template-columns: 100%;
      }

      .anchor {
        position: relative;
        display: block grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        gap: 40px;
        inline-size: 100%;
        padding-block: 24px;
        padding-inline: 40px;
        background: white;
        border-block: 1px dashed transparent;

        @media (width <=768px) {
          grid-column: auto;
          grid-auto-flow: row;
          gap: 0;
          inline-size: 100%;
          padding-block: var(--nudge-2);
          padding-inline: var(--nudge-2);
        }

        @media (any-hover: hover) {
          &:hover {
            opacity: 0.7;
          }
        }
      }

      time {
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 400;
        color: var(--gray_text);

        @media (width <=768px) {
          font-size: calc((100 / 390) * 13 * 1vw);
        }
      }

      p {
        font-size: var(--fonts-size-size);
        font-weight: 500;
        word-break: break-all;

        @media (width <=768px) {
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }
  }

  /* ==== news-controller ==== */
  .news-controller {
    display: block flex;
    justify-content: space-between;
    margin-block-start: 50px;

    @media (width <=768px) {
      margin-block-start: var(--nudge-4);
    }

    :where(.prev, .next) {
      position: relative;
      display: block flex;
      gap: 10px;
      align-items: center;
      font-weight: 700;
      color: var(--gold);

      @media (width <=768px) {
        gap: var(--nudge-1);
      }

      &.disabled {
        visibility: hidden;
      }
    }

    .prev::before,
    .next::after {
      place-content: center;
      inline-size: 50px;
      aspect-ratio: 1 / 1;
      font-size: 14px;
      content: '';
      border: 1px solid var(--gold);
      border-radius: calc(infinity * 1px);
      transition: background 250ms ease 0s;

      @media (width <=768px) {
        inline-size: calc((100 / 390) * 40 * 1vw);
        font-size: calc((100 / 390) * 13 * 1vw);
      }
    }

    .prev::after,
    .next::before {
      position: absolute;
      inline-size: 14px;
      aspect-ratio: 1 / 1;
      content: '';
      background-color: currentcolor;
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      transition: background 250ms ease 0s;

      @media (width <=768px) {
        inline-size: calc((100 / 390) * 11 * 1vw);
      }
    }

    .prev::after {
      inset-inline-start: 19%;
      scale: -1 1;

      @media (width <=768px) {
        inset-inline-start: 17%;
      }
    }

    .next::before {
      inset-inline-end: 19%;
      scale: 1 1;

      @media (width <=768px) {
        inset-inline-end: 17%;
      }
    }

    .prev {
      @media (any-hover: hover) {
        &:hover {
          &::before {
            background: var(--gold);
          }

          &::after {
            background: white;
          }
        }
      }
    }

    .next {
      @media (any-hover: hover) {
        &:hover {
          &::after {
            background: var(--gold);
          }

          &::before {
            background: white;
          }
        }
      }
    }
  }
}

/* =====================
  news-detail
===================== */
.news-detail {
  padding-block: 80px 160px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 78px;

    @media (width <=768px) {
      gap: var(--nudge-2);
    }

    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    margin-block-start: 167px;

    @media (width <=768px) {
      margin-block-start: var(--nudge-6);
    }
  }
}