@import url(./global/_variable.css);

/* news */
/* ============================================ */

.area_newslist {
  padding-top: 5vw;
  padding-bottom: 8vw;

  @media (width < 896px) {
    padding-bottom: 50px;
  }
}

.area_newslist_category {
  background-color: #F4F4F4;
  padding: 2.98cqw;

  @media (width < 896px) {
    padding: 16px;
  }
}

.hd_news_category {
  font-size: clamp(1rem, 0.49vw + 0.885rem, 1.25rem);
  font-weight: 700;
}

.list_category {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
}

.item_category {
  font-size: clamp(0.875rem, 0.24vw + 0.818rem, 1rem);
  background-color: #FFF;
  border: #B3B3B3 solid 1px;
  padding: 6px 20px 8px;
  border-radius: 50px;
  line-height: 1em;
  cursor: pointer;

  &.active {
    border: var(--point_c) solid 1px;
    background-color: var(--point_c);
    color: #FFF;

    &:hover {
      background-color: var(--point_c);
    }
  }

  &:hover {
    background-color: #F4CCDF;
  }
}

.list_news {
  margin-top: 5.36cqw;
}


.area_newsdetail {
  padding-top: 5vw;
  padding-bottom: 8vw;

  @media (width < 896px) {
    padding-bottom: 50px;
  }
}

.ttl_news {
  border-bottom: var(--point_c) solid 3px;
  padding-bottom: 16px;
}

.ttl_news_sub {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hd_ttl_news {
  font-size: clamp(1.25rem, 0.49vw + 1.135rem, 1.5rem);
  line-height: 1.6em;
  padding-top: 16px;
}

.txt_single {
  font-size: clamp(0.875rem, 0.24vw + 0.818rem, 1rem);
  line-height: 2em;
  padding-top: 4cqw;

  @media (width < 896px) {
    padding-top: 24px;
  }
}

.centerimg {
  text-align: center;
}

.press_box {
  padding-top: 4cqw;

  @media (width < 896px) {
    padding-top: 24px;
  }

  p {
    font-size: clamp(0.875rem, 0.24vw + 0.818rem, 1rem);
    line-height: 2em;
  }

  .size-full {
    /* width: 100%; */
    height: auto;
  }

  hr {
    margin-block: 40px;

    @media (width < 896px) {
      margin-block: 20px;
    }
  }

  li {
    font-size: clamp(0.875rem, 0.24vw + 0.818rem, 1rem);
    line-height: 2em;
  }
}

.centerimg {
  margin-top: 3cqw;
}

.nav_blog {
  padding-top: 4cqw;

  @media (width < 896px) {
    padding-top: 20px;
  }

  ul {
    display: grid;
    grid-template-columns: 40px 180px 40px;
    justify-content: center;
    gap: 10px;
  }

  .prev,
  .next {
    a {
      display: block;
      background-color: #000;
      text-align: center;
      align-content: center;
      aspect-ratio: 1 / 1;
      height: 100%;
      position: relative;

      svg {
        position: relative;
        transform: translateY(-20%);
      }
    }
  }

  .prev {
    a {
      svg {
        transform: rotate(180deg) translateY(20%);
      }
    }
  }

  .back {
    a {
      width: 170px;
      margin-left: 13px;
    }

    .btn_link {
      padding-top: 0px;
    }
  }
}