.journal {
  padding: 208px 20px 220px;
}
@media screen and (min-width: 768px) {
  .journal {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr) 0.8823529412% minmax(0, 1fr);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    -webkit-column-gap: 0.8823529412%;
       -moz-column-gap: 0.8823529412%;
            column-gap: 0.8823529412%;
    padding: 348px 40px 330px;
  }
}

@media screen and (min-width: 768px) {
  .journal__line {
    grid-column: 1/-1;
  }
}

.page-heading {
  padding-top: 36px;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .page-heading {
    padding-top: 50px;
  }
}

@media screen and (min-width: 768px) {
  .journalInner {
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: subgrid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
    -webkit-column-gap: 0.8823529412%;
       -moz-column-gap: 0.8823529412%;
            column-gap: 0.8823529412%;
  }
}

.journal__head {
  padding-top: 36px;
}
@media screen and (min-width: 768px) {
  .journal__head {
    position: absolute;
    left: 33.6029411765%;
    top: -26px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 66.3970588235%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 0;
    -webkit-column-gap: 27.0588235294%;
       -moz-column-gap: 27.0588235294%;
            column-gap: 27.0588235294%;
  }
}
.journal__head--cat {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .journal__head--cat {
    top: -16px;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0;
  }
}

.journal__lead {
  font-family: "source-han-serif-japanese", serif;
  font-size: 1.2rem;
  line-height: 2.25;
  letter-spacing: 0.05em;
}

.journal-cat__select {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 26px;
  padding-left: 0;
  margin-top: 58px;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 1.4rem;
  font-weight: 350;
  letter-spacing: 0.07em;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url(../img/journal/pulldown.svg);
  background-repeat: no-repeat;
  background-size: 9px 5px;
  background-position: 12px center;
}
@media screen and (min-width: 768px) {
  .journal-cat__select {
    margin-top: 0;
  }
}
.journal__head--cat .journal-cat__select {
  margin-top: 70px;
}
@media screen and (min-width: 768px) {
  .journal__head--cat .journal-cat__select {
    margin-top: 0;
  }
}

.journal__list {
  display: -ms-grid;
  display: grid;
  row-gap: 38px;
  padding-top: 30px;
}
@media screen and (min-width: 768px) {
  .journal__list {
    padding-top: 50px;
    grid-column: 1/-1;
    -ms-grid-columns: minmax(0, 1fr) 13px minmax(0, 1fr) 13px minmax(0, 1fr);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 70px 13px;
  }
}
.journal__head--cat + .journal__list {
  padding-top: 30px;
}
@media screen and (min-width: 768px) {
  .journal__head--cat + .journal__list {
    padding-top: 50px;
  }
}

.journal__item {
  width: 100%;
}

.journal__img {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 350/232;
}
@media screen and (min-width: 768px) {
  .journal__img {
    aspect-ratio: 445/580;
  }
}
.journal__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.journal__dateAndTag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 12px;
     -moz-column-gap: 12px;
          column-gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 18px;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-size: 1.2rem;
  line-height: 1.24;
  letter-spacing: 0.05em;
  color: #868686;
}

.journal__date {
  position: relative;
  padding-right: 13px;
}
.journal__date::after {
  content: "";
  position: absolute;
  top: 0.5px;
  right: 0;
  width: 0.8px;
  height: 12px;
  background-color: #868686;
}

.journal__item:has(.journal__link:hover) .journal__img img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  -webkit-transition: -webkit-transform 0.7s;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
}

.journal__cat {
  width: auto;
}

.journal__catInner {
  width: auto;
  white-space: wrap;
}

.journal__title {
  padding-top: 2px;
  font-family: "source-han-serif-japanese", serif;
  font-size: 1.3rem;
  line-height: 2.25;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .journal__title {
    font-size: 1.4rem;
  }
}

.pagination {
  padding-top: 70px;
}
@media screen and (min-width: 768px) {
  .pagination {
    -ms-grid-column: 5;
    -ms-grid-column-span: 4;
    grid-column: 5/9;
    padding-top: 130px;
  }
}

.backToIndex {
  display: block;
  width: 130px;
  height: 30px;
  padding: 7px 0 8px;
  border: solid 0.8px #555;
  border-radius: 20px;
  margin: 70px auto 0;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .backToIndex {
    -ms-grid-column: 6;
    -ms-grid-column-span: 2;
    grid-column: 6/8;
    margin-top: 130px;
  }
}

.backToIndex__inner {
  position: relative;
  width: 100%;
  height: 15px;
  overflow: hidden;
  text-align: center;
}
.backToIndex__inner span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  -webkit-transition: top 0.5s;
  transition: top 0.5s;
}
.backToIndex__inner span:first-of-type {
  top: 0;
}
.backToIndex__inner span:last-of-type {
  top: 100%;
}
.backToIndex:hover .backToIndex__inner span:first-of-type {
  top: -100%;
}
.backToIndex:hover .backToIndex__inner span:last-of-type {
  top: 0;
}