:root {
  --clr-category-init: #85b7b2;
  --clr-category-collection: #c9c3b9;
  --clr-date: #b3b3b3;
}

/* //////////////////////////////////////////////////

Title : style.scss
For   : LILY BROWN NEWS PAGE

Created       : 2022-12-01
Last Modified : 2022-12-05

==========================================

Content

////////////////////////////////////////////////// */
/* ===================== common */
.bodyNews img,
.bodyNews svg {
  width: 100%;
  height: auto;
}
.bodyNews a,
.bodyNews picture,
.bodyNews img {
  display: block;
}
.bodyNews .fw-bold {
  font-weight: bold;
}
.bodyNews .color-highlight {
  color: rgb(182, 0, 0);
}

.heading--secondary {
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1;
}

/* --- for small viewport ---*/
@media screen and (max-width: 767px) {
  .heading--secondary {
    font-size: 24px;
  }
}
/* --- for large viewport ---*/
@media screen and (min-width: 768px) {
  .heading--secondary {
    font-size: 26px;
  }
}
/* ===================== news list */
.bodyNews--list {
  max-width: 1200px;
  margin-inline: auto;
}
.bodyNews .category {
  color: var(--clr-category-modify, var(--clr-category-init));
  letter-spacing: 0.025em;
  line-height: 1;
}
.bodyNews .category.--collection {
  --clr-category-modify: var(--clr-category-collection);
}
.bodyNews .ttl {
  text-align: left;
}
.bodyNews .date {
  -webkit-margin-before: auto;
          margin-block-start: auto;
}

.newsList__list {
  display: grid;
  max-width: 1000px;
  width: 100%;
  margin-inline: auto;
}
.newsList__col a {
  height: 100%;
}
.newsList__detail, .newsList__desc {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- for small viewport ---*/
@media screen and (max-width: 767px) {
  .bodyNews--list {
    width: 90.6666666667%;
    -webkit-padding-before: 40px;
            padding-block-start: 40px;
    -webkit-padding-after: 80px;
            padding-block-end: 80px;
  }
  .newsList__body {
    -webkit-margin-before: 55px;
            margin-block-start: 55px;
  }
  .newsList__list {
    grid-template-columns: repeat(2, calc(50% - 10px));
    -moz-column-gap: 20px;
         column-gap: 20px;
    row-gap: 20px;
  }
  .newsList__detail {
    row-gap: 15px;
  }
  .newsList__desc {
    row-gap: 8px;
  }
  .newsList__desc .category {
    font-size: 10px;
  }
  .newsList__desc .ttl {
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.6363;
  }
  .newsList__desc .date {
    font-size: 10px;
    letter-spacing: 0.025em;
    color: var(--clr-date);
  }
}
/* --- for large viewport ---*/
@media screen and (min-width: 768px) {
  .bodyNews--list {
    width: 95%;
    -webkit-padding-before: 50px;
            padding-block-start: 50px;
    -webkit-padding-after: 150px;
            padding-block-end: 150px;
  }
  .bodyNews--list .block-pager.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
  }
  .bodyNews--list .block-pager.pager .pager-arrow {
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    display: flex;
    align-items: center;
    -moz-column-gap: 2px;
         column-gap: 2px;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #808080;
  }
  .bodyNews--list .block-pager.pager .pager-arrow:hover {
    cursor: pointer;
  }
  .bodyNews--list .block-pager.pager .pager-arrow.disabled {
    visibility: hidden;
    opacity: 0;
  }
  .bodyNews--list .block-pager.pager .pager-arrow.prev::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    transform: rotate(-45deg);
  }
  .bodyNews--list .block-pager.pager .pager-arrow.next::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 1px solid #808080;
    border-right: 1px solid #808080;
    transform: rotate(45deg);
  }
  .newsList__body {
    -webkit-margin-before: 60px;
            margin-block-start: 60px;
  }
  .newsList__list {
    grid-template-columns: repeat(4, minmax(18rem, 1fr));
    -moz-column-gap: 6rem;
         column-gap: 6rem;
    row-gap: 60px;
  }
  .newsList__col {
    width: 100%;
  }
  .newsList__detail {
    row-gap: 20px;
  }
  .newsList__desc {
    row-gap: 14px;
  }
  .newsList__desc .category {
    font-size: 11px;
  }
  .newsList__desc .ttl {
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 1.5556;
  }
  .newsList__desc .date {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
}
/* ===================== news detail */
.bodyNews--detail {
  max-width: 800px;
  margin-inline: auto;
}
.bodyNews--detail .anchor {
  display: inline-block;
  border-bottom: 1px solid #000;
}
.bodyNews .newsDetail__body {
  letter-spacing: 0.025em;
}
.bodyNews .newsDetail__body.--centering .newsDetail__content {
  text-align: center;
}
.bodyNews .newsDetail__body.--centering .newsDetail__hero {
  margin-inline: auto;
}
.bodyNews .newsDetail__body.--centering .newsDetail__thumbs {
  justify-content: center;
}
.bodyNews .newsDetail__body.--centering .newsDetail__btn {
  margin-inline: auto;
}
.bodyNews .newsDetail__body.--centering + .link {
  text-align: center;
}
.bodyNews .newsDetail__head {
  display: flex;
  flex-direction: column;
}
.bodyNews .newsDetail__head .category,
.bodyNews .newsDetail__head .date {
  line-height: 1;
}
.bodyNews .newsDetail__head .date {
  color: #595757;
}
.bodyNews .newsDetail__head .ttl {
  line-height: 1.5;
}
.bodyNews .newsDetail__content {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 1.75em;
}
.bodyNews .newsDetail__content dl dt {
  font-size: 1.2em;
  font-weight: bold;
}
.bodyNews .newsDetail__content dl dd {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 1.75em;
  -webkit-margin-before: 1.75em;
          margin-block-start: 1.75em;
}
.bodyNews .newsDetail__hero {
  max-width: 540px;
  width: 100%;
}
.bodyNews .newsDetail__thumbs {
  display: flex;
}
.bodyNews .newsDetail__btn {
  width: 100%;
  border: 1px solid #000;
  line-height: 1.75;
  text-align: center;
  letter-spacing: 0.06em;
}
.bodyNews .newsDetail__btn:not(.bodyNews .newsDetail__btn + .newsDetail__btn) {
  -webkit-margin-before: 1.5em;
          margin-block-start: 1.5em;
}

/* --- for small viewport ---*/
@media screen and (max-width: 767px) {
  .bodyNews--detail {
    -webkit-padding-after: 60px;
            padding-block-end: 60px;
    padding-inline: 4%;
  }
  .bodyNews .newsDetail__body {
    -webkit-margin-before: 40px;
            margin-block-start: 40px;
  }
  .bodyNews .newsDetail__body + .link {
    -webkit-margin-before: 20px;
            margin-block-start: 20px;
    font-size: 12px;
  }
  .bodyNews .newsDetail__head {
    row-gap: 12px;
  }
  .bodyNews .newsDetail__head .category {
    font-size: 11px;
  }
  .bodyNews .newsDetail__head .ttl {
    font-size: 20px;
  }
  .bodyNews .newsDetail__head .date {
    font-size: 11px;
  }
  .bodyNews .newsDetail__content {
    -webkit-margin-before: 30px;
            margin-block-start: 30px;
    font-size: 12px;
    line-height: 1.75;
  }
  .bodyNews .newsDetail__hero + * {
    -webkit-padding-before: 20px;
            padding-block-start: 20px;
  }
  .bodyNews .newsDetail__thumbs {
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .bodyNews .newsDetail__thumbs li {
    width: calc(50% - 5px);
    text-align: center;
  }
  .bodyNews .newsDetail__thumbs + .newsDetail__thumbs {
    -webkit-margin-before: 30px;
            margin-block-start: 30px;
  }
  .bodyNews .newsDetail__btn a {
    padding-block: 2em;
    font-size: 12px;
  }
}
/* --- for large viewport ---*/
@media screen and (min-width: 768px) {
  .bodyNews--detail {
    width: 95%;
    -webkit-padding-before: 50px;
            padding-block-start: 50px;
    -webkit-padding-after: 75px;
            padding-block-end: 75px;
  }
  .bodyNews .newsDetail__body {
    -webkit-margin-before: 50px;
            margin-block-start: 50px;
  }
  .bodyNews .newsDetail__body + .link {
    -webkit-margin-before: 20px;
            margin-block-start: 20px;
    font-size: 14px;
  }
  .bodyNews .newsDetail__head {
    row-gap: 12px;
  }
  .bodyNews .newsDetail__head .category {
    font-size: 11px;
  }
  .bodyNews .newsDetail__head .ttl {
    font-size: 22px;
  }
  .bodyNews .newsDetail__head .date {
    font-size: 11px;
  }
  .bodyNews .newsDetail__content {
    -webkit-margin-before: 25px;
            margin-block-start: 25px;
    font-size: 14px;
    line-height: 1.75;
  }
  .bodyNews .newsDetail__hero + * {
    -webkit-padding-before: 25px;
            padding-block-start: 25px;
  }
  .bodyNews .newsDetail__thumbs {
    -moz-column-gap: 16.6666666667px;
         column-gap: 16.6666666667px;
  }
  .bodyNews .newsDetail__thumbs li {
    max-width: 250px;
    width: 33.3333333333%;
  }
  .bodyNews .newsDetail__thumbs + .newsDetail__thumbs {
    -webkit-margin-before: 30px;
            margin-block-start: 30px;
  }
  .bodyNews .newsDetail__btn {
    max-width: 400px;
  }
  .bodyNews .newsDetail__btn a {
    padding-block: 2em;
    font-size: 13px;
  }
}