/* =========================================================
   SINGLE BLOG
========================================================= */

.single-blog {
  width: 100%;

  padding:
    170px
    5%
    140px;
}


.single-blog__article {
  width: 100%;
}


/* =========================================================
   HEADER
========================================================= */

.single-blog__header {
  width: 100%;
  max-width: 850px;

  margin:
    0
    auto
    80px;

  text-align: center;
}


.single-blog__label {
  margin:
    0
    0
    30px;

  color: #77716e;

  font-family: var(--font-en);

  font-size: 10px;

  line-height: 1;

  letter-spacing: 0.3em;
}


.single-blog__date {
  display: block;

  margin-bottom: 28px;

  color: #77716e;

  font-family: var(--font-en);

  font-size: 11px;

  line-height: 1;

  letter-spacing: 0.18em;
}


.single-blog__title {
  margin: 0;

  color: #3f3b3a;

  font-family: var(--font-ja);

  font-size: clamp(27px, 2.7vw, 42px);
  font-weight: 400;

  line-height: 1.7;

  letter-spacing: 0.1em;
}


.single-blog__category {
  display: inline-block;

  margin-top: 28px;

  padding:
    7px
    14px;

  border:
    1px solid rgba(80, 75, 72, 0.28);

  color: #77716e;

  font-family: var(--font-ja);

  font-size: 9px;

  line-height: 1;

  letter-spacing: 0.12em;
}


/* =========================================================
   HERO
========================================================= */

.single-blog__hero {
  width: 100%;
  max-width: 1050px;

  margin:
    0
    auto
    100px;
}


.single-blog__hero img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
   CONTENT
========================================================= */

.single-blog__content {
  width: 100%;
  max-width: 760px;

  margin: 0 auto;

  color: #494442;

  font-family: var(--font-ja);

  font-size: 15px;
  font-weight: 400;

  line-height: 2.25;

  letter-spacing: 0.075em;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.single-blog__content p {
  margin:
    0
    0
    2em;
}


/* =========================================================
   H2
========================================================= */

.single-blog__content h2 {
  position: relative;

  margin:
    4.5em
    0
    1.8em;

  padding-bottom: 18px;

  color: #3f3b3a;

  font-size: 23px;
  font-weight: 400;

  line-height: 1.8;

  letter-spacing: 0.1em;
}


.single-blog__content h2::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 0;

  width: 42px;
  height: 1px;

  background: #77716e;
}


/* =========================================================
   H3
========================================================= */

.single-blog__content h3 {
  margin:
    3.5em
    0
    1.4em;

  color: #45403e;

  font-size: 18px;
  font-weight: 400;

  line-height: 1.8;

  letter-spacing: 0.09em;
}


/* =========================================================
   IMAGE
========================================================= */

.single-blog__content figure {
  margin:
    60px
    0;
}


.single-blog__content img {
  max-width: 100%;
  height: auto;
}


.single-blog__content figcaption {
  margin-top: 12px;

  color: #89827f;

  font-size: 10px;

  line-height: 1.8;

  text-align: center;
}


/* =========================================================
   LIST
========================================================= */

.single-blog__content ul,
.single-blog__content ol {
  margin:
    2.5em
    0;

  padding-left: 1.6em;
}


.single-blog__content li {
  margin-bottom: 0.8em;
}


/* =========================================================
   LINK
========================================================= */

.single-blog__content a {
  color: inherit;

  text-decoration: none;

  border-bottom:
    1px solid rgba(73, 68, 66, 0.45);
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.single-blog__content blockquote {
  margin:
    60px
    0;

  padding:
    35px
    40px;

  background: rgba(255, 255, 255, 0.48);

  color: #625d5a;

  font-size: 14px;

  line-height: 2.2;
}


.single-blog__content blockquote p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   ARTICLE FOOTER
========================================================= */

.single-blog__footer {
  width: 100%;
  max-width: 1050px;

  margin:
    120px
    auto
    0;

  padding-top: 45px;

  border-top:
    1px solid rgba(75, 70, 68, 0.18);
}


/* =========================================================
   NAVIGATION
========================================================= */

.single-blog__nav {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 40px;
}


.single-blog__nav-item a {
  display: block;

  color: #625d5a;

  text-decoration: none;
}


.single-blog__nav-item--next {
  text-align: right;
}


.single-blog__nav-label {
  display: block;

  margin-bottom: 10px;

  color: #8a8380;

  font-family: var(--font-en);

  font-size: 9px;

  letter-spacing: 0.2em;
}


.single-blog__nav-title {
  display: block;

  max-width: 280px;

  font-family: var(--font-ja);

  font-size: 11px;

  line-height: 1.7;

  letter-spacing: 0.07em;
}


.single-blog__nav-item--next .single-blog__nav-title {
  margin-left: auto;
}


.single-blog__back {
  color: #514c49;

  font-family: var(--font-en);

  font-size: 12px;

  letter-spacing: 0.18em;

  text-decoration: none;

  border-bottom:
    1px solid rgba(81, 76, 73, 0.4);

  padding-bottom: 5px;
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 767px) {

  .single-blog {
    padding:
      110px
      22px
      90px;
  }


  .single-blog__header {
    margin-bottom: 55px;
        margin-top: 100px;
  }


  .single-blog__label {
    margin-bottom: 25px;

    font-size: 9px;
  }


  .single-blog__date {
    margin-bottom: 22px;

    font-size: 9px;
  }


  .single-blog__title {
    font-size: 23px;

    line-height: 1.75;

    letter-spacing: 0.08em;
  }


  .single-blog__category {
    margin-top: 23px;
  }


  /* HERO */

  .single-blog__hero {
    margin-bottom: 65px;
  }


  /* BODY */

  .single-blog__content {
    font-size: 13px;

    line-height: 2.2;

    letter-spacing: 0.055em;
  }


  .single-blog__content h2 {
    margin-top: 4em;

    font-size: 18px;

    line-height: 1.8;
  }


  .single-blog__content h3 {
    margin-top: 3em;

    font-size: 16px;
  }


  .single-blog__content figure {
    margin:
      45px
      0;
  }


  .single-blog__content blockquote {
    margin:
      45px
      0;

    padding:
      27px
      24px;

    font-size: 12px;
  }


  /* FOOTER */

  .single-blog__footer {
    margin-top: 85px;

    padding-top: 35px;
  }


  .single-blog__nav {
    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap:
      40px
      20px;
  }


  .single-blog__back {
    order: -1;

    width: 100%;

    margin-bottom: 10px;

    text-align: center;
  }


  .single-blog__nav-item {
    width: calc(50% - 10px);
  }


  .single-blog__nav-title {
    font-size: 10px;
  }

}