@charset "utf-8";



/* local common
============================================================================= */
.content_wrap {}




/* contents
============================================================================= */
.journal-header {
  padding-block:2.0rem 4.0rem;
  position:relative;
  z-index: 11;
  @media (width > 767px) {
    justify-content: flex-start;
    padding-left:2.0rem;
  }
  @media (width <= 767px) {
    padding-block:4.0rem 2.4rem;
  }
  .heading {
    font-family:var(--ff_en);
    font-weight:400;
    font-size:8.8rem;
    line-height:1.1;
    letter-spacing: 0;
    @media (width <= 767px) {
      font-size:4.8rem;
      text-align: center;
    }
  }
}


.journal_archive_container {
	display:grid;
  padding-bottom:16.0rem;
  @media (width > 767px) {
    margin-inline:auto;
    width:136.0rem;
  }
  @media (width <= 767px) {
    padding-bottom:6.8rem;
    padding-inline:2.0rem;
  }

  .cat-title {
    padding-bottom:2.0rem;
    font-family:var(--ff_min);
    font-weight:500;
    font-size:3.2rem;
    line-height:1.5;
    letter-spacing: .05em;
    color:var(--bc_black);
    text-align: center;
    @media (width > 767px) {
      padding-top:2.4rem;
    }
    @media (width <= 767px) {
      font-size:2.4rem;
    }
  }

  .date-header {
    display:flex;
    justify-content: center;
    background-color:#fff;
    padding-block:2.0rem;
    position:sticky;
    top:7.0rem;
    z-index: 10;
    @media (width <= 767px) {
      margin-block:-4.0rem -1.0rem;
      padding-block:6.0rem 1.0rem;
      top:0rem;
    }

    > .inner {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items: center;
      width:36.0rem;
      @media (width <= 767px) {
        width:26.0rem;
      }

      > a {
        display:flex;
        justify-content: center;
        align-items: center;
        width:4.0rem;
        height:4.0rem;
        transition-property: opacity;
        transition-duration: .5s;
        @media (hover:hover) {
          &:hover {
            opacity: .6;
          }
        }
        &::after {
          content: "";
          width: 2.4rem;
          height: auto;
          aspect-ratio: 12 / 7;
          mask-image: url(/antonio-riva/assets/img/common/ico_paging_arrow.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          background-color: var(--bc_black);
        }
        &.prev {
          grid-column:1/2;
          margin-right:auto;
          transform: scaleX(-1);
        }
        &.next {
          grid-column:3/4;
          margin-left:auto;
        }
      }
    }
    .date-title {
      display:flex;
      align-items: center;
      column-gap:1.2rem;
      grid-column:2/3;
      font-family:var(--ff_en);
      font-weight:400;
      line-height:1;
      .month {
        font-size:11.0rem;
        @media (width <= 767px) {
          font-size:5.4rem;
        }
      }
      .year_tmonth {
        display:grid;
        align-items: center;
        gap:.8rem;
        @media (width <= 767px) {
          gap:.4rem;
        }
        .year {
          font-size:3.0rem;
          @media (width <= 767px) {
            font-size:1.6rem;
          }
        }
        .tmonth {
          font-size:1.4rem;
          @media (width <= 767px) {
            font-size:1.2rem;
          }
        }
      }
    }
  }

  .cms_common-journal_list {
    padding-top:10.0rem;
    @media (width <= 767px) {
      padding-top:6.0rem;
    }
  }
}


.journal_archive-category {
  margin-bottom:12.0rem;
  margin-inline:2.0rem;
  padding-block:7.6rem 6.0rem;
  background-color:var(--bc_gray);
  position:relative;
  @media (width <= 767px) {
    margin-bottom:10.4rem;
    margin-inline:1.0rem;
    padding:4.0rem 2.0rem 3.0rem;
  }

  > .inner {
    @media (width > 767px) {
      margin-inline:auto;
      width:136.0rem;
    }
    @media (width <= 767px) {
    }
  }
  .heading {
    font-family:var(--ff_en);
    font-size:5.5rem;
    line-height:1;
    font-weight:400;
    position:absolute;
    top:-.5lh;
    @media (width <= 767px) {
      margin-left:-1.0rem;
      font-size:3.0rem;
    }
  }
  .links {
    @media (width > 767px) {
      display:flex;
      flex-wrap:wrap;
      gap:2.0rem 8.0rem;
    }
    @media (width <= 767px) {
      display:grid;
      grid-template-columns: repeat(2,1fr);
      row-gap:1.5rem;
    }
  }
  .link-item {
    display:flex;
    align-items: flex-start;
    font-size:1.3rem;
    line-height:1.5;
    gap:.8rem;
    @media (width <= 767px) {
      &:first-child {
        grid-column: 1/-1;
      }
    }

    &::before {
      content:"";
      display:block;
      width:.8rem;
      height:1px;
      background-color:currentColor;
      margin-top:calc(.5lh - 1px);
    }
  }
}