@charset "UTF-8";

/* =============================================================================

NEWS CSS

・ニュース用CSS「.news-×××」

上記はここに記述する

============================================================================= */

body:not(.is-global_menu-open) {
  .g-header {
    &::before {
      background-color:var(--cc-black-A);
    }
    .logo > a {
      &::before {
        background-color:#fff;
      }
    }
    .header-menu {
      .link {
        &.translate {
          background-color:#fff;
          img {
            opacity:0;
          }
          &::after {
            opacity:1;
          }
        }
      }
      .separator {
        background-color: var(--cc-black-A);
      }
    }
    .g-header_menu-btn {
      background-color: #fff;

      &::before,
      &::after {
        background-color: var(--cc-black-A);
      }
    }
  }
}

.page-container {
  padding-block:15.0rem 18.0rem;
  @media (width <= 640px) {
    padding-block:calc(var(--header-height) + 7.0rem) 9.0rem;
  }
}

/* single
============================================================================= */
.news-single {
  padding:9.0rem 11.8rem 10.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding:4.0rem 2.0rem 6.0rem;
  }

  .img {
    margin-bottom:3.6rem;
    @media (width <= 640px) {
      margin-bottom:2.4rem;
    }
    img {
      width:100%;
    }
  }
  .date {
    margin-bottom:1.6rem;
    padding:.8rem 2.4rem;
    border-radius:100px;
    width:fit-content;
    font-size:1.4rem;
    line-height:1;
    letter-spacing: .18em;
    @media (width <= 640px) {
      font-size:1.3rem;
    }
  }
  .title {
    margin-bottom:4.0rem;
    font-weight:700;
    font-size:1.8rem;
    line-height:calc(27/18);
    letter-spacing: .18em;
    @media (width <= 640px) {
      margin-bottom:3.6rem;
    }
  }
  .post-contents {

  }
  .pager {
    display:flex;
    gap:4.0rem;
    margin-top:10.0rem;
    margin-inline:auto;
    width:fit-content;
    @media (width <= 640px) {
      margin-top:4.0rem;
    }

    .link {
      display:flex;
      justify-content: center;
      align-items: center;
      border-radius:50%;
      width:2.5rem;
      height:2.5rem;;

      &.-prev {
        grid-column:1/2;
      }
      &.-next {
        grid-column:2/2;
      }
    }
  }
}




/* Sample
============================================================================= */
.news-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}