/* ------------------

 地域記事 レイアウト

 ------------------ */

.single-articles__inner {
  display: flex;
  align-items: flex-end;
}

.single-articles__main {
  position: relative;
  flex: 1;
  padding: 8rem 16rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

#scroll-progress {
  position: sticky;
  top: 0;
  transition:
    opacity 0.4s ease-in-out,
    visibility 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  color: var(--border-black);
  margin: 0 -16rem;
  z-index: 2;

  &.is-fixed {
    opacity: 1;
    visibility: visible;
  }

  &.is-fixed-end {
    opacity: 0;
    visibility: hidden;

    .progress-text {
      color: var(--theme-blue);

      &::before {
        background-color: var(--theme-blue);
      }
    }
  }
}

.progress-text {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: absolute;
  top: 4.8rem;
  right: 8rem;
  transform: translateX(50%);
  font-family: var(--font-en);
  z-index: -1;
  transition: color 0.4s ease-in-out;

  &::before {
    content: "";
    display: block;
    width: 1px;
    height: 3.2rem;
    position: absolute;
    top: -4.8rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--theme-gray);
    transition: background-color 0.4s ease-in-out;
  }

  .progress-text__number {
    font-size: 1.2rem;
  }

  > span {
    font-size: 1rem;
  }
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 0.6rem;

  .progress-bar__inner {
    position: absolute;
    width: 0;
    height: 100%;
    background-color: var(--theme-blue);
  }
}

.single-articles__sidebar {
  width: 36rem;
  position: sticky;
  bottom: 0;
  border-left: solid 1px var(--border-black);
  min-height: 100vh;
}

@media screen and (max-width: 1024px) {
  .single-articles__main {
    padding: 8rem 2.4rem;
  }

  #scroll-progress {
    margin: 0 -2.4rem;
  }

  .progress-text {
    top: 2.4rem;
    right: 2.4rem;

    &::before {
      top: -2.4rem;
      height: 2.4rem;
    }
  }
}

@media screen and (max-width: 768px) {
  #scroll-progress {
    top: 7rem;
  }
  .single-articles__main {
    border-bottom: solid 1px var(--border-black);
  }
  .single-articles__inner {
    flex-direction: column;
  }

  .single-articles__sidebar {
    position: static;
    width: 100%;
    min-height: auto;
    border-left: none;
  }
}

/* ------------------

 地域記事 

 ------------------ */

.single-articles__main__intro {
  margin-bottom: 4.8rem;
}

.single-articles__main__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.6rem;
  margin-bottom: 0.8rem;

  .single-articles__main__area {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    column-gap: 0.8rem;

    > span:first-of-type {
      display: inline-block;
      min-width: fit-content;
    }
  }

  time {
    font-family: var(--font-en);
    color: var(--text-gray);
    font-size: 1.6rem;
  }
}

.single-articles__main__title {
  h1 {
    font-size: 3.2rem;
    margin-bottom: 1.6rem;
  }
}

.single-articles__main__thum {
  aspect-ratio: 1.6 / 1;
  margin-bottom: 1.6rem;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.single-articles__main__writer__def {
  display: flex;
  align-items: center;
  margin-bottom: 1.6rem;

  dt {
    font-family: var(--font-en);
    font-size: 1.4rem;
    width: 7.2rem;
    letter-spacing: 0.05em;
  }

  dd {
    flex: 1;
    font-size: 1.2rem;
  }
}

.single-articles__main__tag__def {
  display: flex;
  align-items: center;
  margin-bottom: 1.6rem;

  dt {
    font-family: var(--font-en);
    font-size: 1.4rem;
    width: 7.2rem;
    letter-spacing: 0.05em;
  }

  dd {
    flex: 1;

    .single-articles__main__tag__list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;

      li {
        > a {
          display: flex;
          align-items: center;
          column-gap: 0.4rem;
          padding: 0.4rem 1.6rem;
          border: solid 1px var(--border-black);
          border-radius: 4rem;
          font-size: 1rem;
          color: var(--text-black);
          background-color: var(--white);
          transition: background-color 0.4s ease-out;

          &::before {
            content: "#";
            color: var(--text-gray);
            font-size: 1.4rem;
            line-height: 1;
          }
        }
      }
    }
  }
}

#toc {
  border: dashed 1px var(--border-gray);
  border-radius: 1.6rem;
  padding: 4rem;
  margin-bottom: 4.8rem;

  .toc-toggle {
    display: block;
    font-size: 2.4rem;
    margin-bottom: 1.6rem;
    color: var(--theme-blue);
    font-family: var(--font-en);
    pointer-events: none;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .toc-nav {
    ul {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      font-size: 1.6rem;

      ul {
        font-size: 1.2rem;
        margin-left: 0.8rem;
        margin-bottom: 0.4rem;
      }

      li {
        a {
          display: flex;
          align-items: center;
          column-gap: 1.6rem;
          color: var(--text-black);
          width: fit-content;
          text-decoration: none;

          &::before {
            content: "";
            display: inline-block;
            width: 0.6rem;
            height: 0.8rem;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            background-color: var(--border-gray);
          }
        }
      }
    }
  }
}

.single-articles__share__sns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 1.6rem;
  margin-bottom: 8rem;
}

.single-articles__share__title {
  margin: 0;
  font-size: 1.2rem;
  font-family: var(--font-en);
}

.single-articles__share__sns__list {
  display: flex;
  align-items: center;
  column-gap: 1.6rem;

  li {
    position: relative;
    padding-right: 1.6rem;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      width: 1px;
      height: 2rem;
      border-right: dashed 1px var(--border-gray);
    }

    &:last-of-type {
      padding-right: 0;

      &::after {
        display: none;
      }
    }
  }

  a {
    display: block;
    height: 2rem;

    img {
      height: 100%;
      vertical-align: baseline;
    }
  }
}

.single-articles__profile__inner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem 4.8rem;
  padding: 4rem 1.6rem;
  margin-bottom: 4rem;
  border-top: dashed 1px var(--border-black);
  border-bottom: dashed 1px var(--border-black);
}

.single-articles__profile__title {
  position: absolute;
  top: -1px;
  right: 0;
  font-size: 1.2rem;
  background-color: var(--bg-black);
  color: var(--white);
  padding: 0.8rem 4rem;
  font-weight: 500;
  margin: 0;
}

.single-articles__profile__left-box {
  width: 14rem;

  .single-articles__profile__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.single-articles__profile__right-box {
  width: calc(100% - 16rem - 4.8rem);

  .single-articles__profile__job {
    display: block;
    font-size: 1rem;
  }

  .single-articles__profile__name {
    margin-top: 0;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
  }

  .single-articles__profile__sns__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 1.6rem;

    .single-articles__profile__sns__item {
      position: relative;
      font-size: 1.2rem;
      column-gap: 1.6rem;
      padding-right: 1.6rem;
      margin-bottom: 1.6rem;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        width: 1px;
        height: 2rem;
        border-right: dashed 1px var(--border-gray);
      }

      &:last-of-type {
        padding-right: 0;

        &::after {
          display: none;
        }
      }

      > a {
        display: block;
        height: 2rem;
      }

      img {
        max-height: 100%;
      }
    }
  }

  .single-articles__profile__website {
    margin: 0;
    font-size: 1.4rem;
    font-family: var(--font-en);
  }
}

.single-articles__profile__bottom-box {
  width: 100%;
  .single-articles__profile__text {
    margin: 0 0 1.6rem;
    font-size: 1.2rem;
  }

  .single-articles__profile__link {
    position: relative;
    display: block;
    font-size: 1.4rem;
    padding: 1.2rem 6rem 1.2rem 3.6rem;
    width: fit-content;
    margin-inline: auto;
    color: var(--text-black);
    border: solid 1px var(--text-black);
    background-color: var(--white);
    border-radius: 4rem;
    transition: color 0.4s ease-out, background-color 0.4s ease-out;

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1.8rem;
      width: 1.2rem;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      mask-image: url(../img/icon-arrow__right.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: var(--text-black);
      transition: background-color 0.4s ease-out;
    }
  }
}

@media (any-hover: hover) {
  .single-articles__main__tag__def {
    dd {
      .single-articles__main__tag__list {
        li {
          > a:hover {
            background-color: var(--bg-black);
            color: var(--white);
            &::before {
              color: var(--white);
            }
          }
        }
      }
    }
  }

  .single-articles__profile__bottom-box {
    .single-articles__profile__link:hover {
      color: var(--white);
      background-color: var(--text-black);

      &::after {
        background-color: var(--white);
      }
    }
  }
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
  .single-articles__main__title {
    h1 {
      font-size: 2.6rem;
    }
  }

  .single-articles__main__thum {
    margin: 0 calc(50% - 50vw) 1.6rem;
  }

  .single-articles__content {
    h2 {
      font-size: 2.4rem;
    }

    h3 {
      font-size: 2.2rem;
    }

    h4 {
      font-size: 2rem;
    }
  }

  #toc {
    padding: 2.4rem;
  }

  .single-articles__profile__inner {
    padding: 5.6rem 1.6rem 4rem;
    gap: 1.6rem 2.4rem;
  }

  .single-articles__profile__left-box {
    margin: 0 auto;
  }

  .single-articles__profile__right-box {
    text-align: center;
    width: 100%;

    .single-articles__profile__sns__list {
      justify-content: center;
    }
  }
}

.single-articles__related {
  h2 {
    border-top: solid 1px var(--border-black);
    border-bottom: solid 1px var(--border-black);
    text-align: center;
    font-size: 2.4rem;
    font-weight: 600;
    margin: 0;
    padding: 1.6rem 2.4rem;
    line-height: 1.4;
    letter-spacing: 0.1em;

    > i {
      font-size: 3.2rem;
      margin: 0 0.8rem;
      line-height: 1;
    }
  }
}

.single-articles__related__list {
  display: flex;
  flex-wrap: wrap;
}

.single-articles__related__item {
  padding: 3.2rem 2.4rem;
  width: calc(100% / 3);
  border-right: solid 1px var(--border-black);
  cursor: pointer;
  transition: background-color 0.4s ease-out;
  height: auto;

  &:nth-of-type(3) {
    border-right: none;
  }
}

.single-articles__related__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  column-gap: 1.6rem;

  .single-articles__related__info__area {
    display: flex;
    align-items: center;
    column-gap: 0.4rem;
    font-size: 1.2rem;

    > span:first-of-type {
      display: inline-block;
      min-width: fit-content;
    }
  }

  time {
    font-size: 1.4rem;
    font-family: var(--font-en);
    color: var(--text-gray);
  }
}

.single-articles__related__thumbnail {
  aspect-ratio: 400 / 266;
  margin-bottom: 1.6rem;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;
  }
}

.single-articles__related__title {
  font-size: 1.8rem;
  margin-bottom: 1.6rem;

  span {
    padding-bottom: 0.2rem;
    background-image: linear-gradient(
      to bottom,
      transparent,
      var(--border-black)
    );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 0.2rem;
    transition: background 0.4s ease-out;
  }
}

.single-articles__related__profile {
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
  width: fit-content;
  margin-bottom: 1.6rem;
  color: var(--text-black);

  .single-articles__related__profile__img {
    position: relative;
    width: 6rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      border: solid 1px var(--theme-blue);
      z-index: -1;
      border-radius: 50%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      transition: transform 0.4s ease;
    }
  }

  .single-articles__related__profile__name {
    font-size: 1.4rem;
    text-decoration: underline;
    transition: color 0.4s ease;
  }
}

.single-articles__related__tag__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  .single-articles__related__tag__item > a {
    display: flex;
    align-items: center;
    column-gap: 0.2rem;
    font-size: 1.2rem;
    color: var(--text-black);
    padding: 0.2rem 1.2rem;
    border: solid 1px var(--border-black);
    border-radius: 4rem;
    transition: background-color 0.4s ease-out;
    background-color: var(--white);

    &::before {
      content: "#";
      color: var(--text-gray);
      font-size: 1.4rem;
      line-height: 1;
    }
  }

  .single-articles__related__tag__item.is-current > a {
    background-color: var(--text-gray);
    color: var(--white);
    border: none;
    pointer-events: none;

    &::before {
      content: "";
      display: inline-block;
      width: 1rem;
      height: 0.6rem;
      border-bottom: solid 2px var(--white);
      border-left: solid 2px var(--white);
      transform: rotate(-45deg) translate(-0.2rem, -0.4rem);
      color: var(--white);
    }
  }
}

@media (any-hover: hover) {
  .single-articles__related__item:hover {
    background-color: var(--theme-gray);
    .single-articles__related__title {
      span {
        background-size: 100% 0.2rem;
      }
    }
    .single-articles__related__thumbnail {
      img {
        transform: scale(1.1);
      }
    }
  }

  .single-articles__related__profile:hover {
    .single-articles__related__profile__name {
      color: var(--theme-blue);
    }
    .single-articles__related__profile__img {
      img {
        transform: scale(0.9);
      }
    }
  }

  .single-articles__related__tag__list {
    .single-articles__related__tag__item > a:hover {
      color: var(--white);
      background-color: var(--text-black);

      &::before {
        color: var(--white);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .single-articles__related__item {
    width: 100%;
    border-right: none;
    border-bottom: dashed 1px var(--border-black);
    &:last-of-type {
      border-bottom: none;
    }
  }
}

/* ------------------

 地域記事サイドバー

 ------------------ */

.single-articles__sidebar__content {
  border-bottom: solid 1px var(--border-black);

  &:last-of-type {
    border-bottom: none;
  }
}

.single-articles__sidebar__content__wrap {
  h2 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.1em;
    padding: 1.6rem;
    border-bottom: solid 1px var(--border-black);

    > i {
      font-size: 3.2rem;
      margin-right: 0.8rem;
      line-height: 1;
    }
  }
}

.single-articles__recommend__list {
  padding: 2.4rem;
}

.single-articles__recommend__item {
  > a {
    padding: 1.6rem 0;
    border-top: dashed 1px var(--border-gray);
    display: block;
    color: var(--text-black);
  }

  &:first-of-type {
    > a {
      padding-top: 0;
      border-top: none;
    }
  }

  &:last-of-type {
    a {
      padding-bottom: 0;
    }
  }
}

.single-articles__recommend__info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;

  .single-articles__recommend__number {
    font-size: 1.8rem;
    font-family: var(--font-en);
    font-weight: 600;

    > span {
      display: inline-block;
      font-size: 1rem;
      font-weight: 400;
      margin-right: 0.2rem;
    }
  }

  .single-articles__recommend__area {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    column-gap: 0.4rem;
  }

  time {
    font-size: 1.2rem;
    font-family: var(--font-en);
    color: var(--text-gray);
  }
}

.single-articles__recommend__inner {
  display: flex;
  align-items: flex-start;
  column-gap: 1.6rem;
}

.single-articles__recommend__inner__thumbnail {
  width: 12rem;
  aspect-ratio: 1.4 / 1;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
}

.single-articles__recommend__inner__text {
  flex: 1;

  .single-articles__recommend__inner__title {
    flex: 1;
    font-size: 1.4rem;
    margin-bottom: 1.6rem;

    > span {
      padding-bottom: 0.2rem;
      background-image: linear-gradient(
        to bottom,
        transparent,
        var(--border-black)
      );
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: 0% 0.2rem;
      transition: background 0.4s ease-out;
    }
  }

  .single-articles__recommend__inner__profile__name {
    margin: 0;
    font-size: 1rem;

    > span {
      display: flex;
      align-items: center;
      column-gap: 0.8rem;
      font-family: var(--font-en);
      color: var(--text-gray);

      &::before {
        content: "";
        display: inline-block;
        height: 1px;
        width: 1.2rem;
        background-color: var(--text-gray);
      }
    }
  }
}

.single-articles__keyword__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 2.4rem;

  > li a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    color: var(--text-black);
    padding: 0.4rem 1.6rem;
    border: solid 1px var(--border-black);
    border-radius: 4rem;
    transition: background-color 0.4s ease-out;
    background-color: var(--white);

    &::before {
      content: "#";
      color: var(--text-gray);
      font-size: 1.6rem;
      line-height: 1;
    }
  }
}

@media (any-hover: hover) {
  .single-articles__recommend__item {
    > a:hover {
      .single-articles__recommend__inner__thumbnail {
        img {
          transform: scale(1.1);
        }
      }
      .single-articles__recommend__inner__title {
        > span {
          background-size: 100% 0.2rem;
        }
      }
    }
  }

  .single-articles__keyword__list {
    > li a:hover {
      color: var(--white);
      background-color: var(--bg-black);
      &::before {
        color: var(--white);
      }
    }
  }
}

@media screen and (max-width: 768px) {
}

/* ------------------

 記事コンテンツ内の調整

 ------------------ */
.single-articles__content {
  margin-bottom: 8rem;

  h2 {
    font-size: 2.8rem;
    margin-top: 6.4rem;
    margin-bottom: 2.4rem;
    letter-spacing: 0.05em;
  }

  h3 {
    font-size: 2.4rem;
    margin-top: 6.4rem;
    margin-bottom: 2.4rem;
    letter-spacing: 0.05em;
  }

  h4 {
    font-size: 2.1rem;
    margin-top: 6.4rem;
    margin-bottom: 2.4rem;
    letter-spacing: 0.05em;
  }

  a {
    text-decoration: underline;
  }

  table {
    font-size: 1.4rem;
    width: 100%;
    margin-bottom: 1.6rem;

    tr {
      th {
        padding: 0.8rem 1.6rem;
        border: solid 1px var(--border-black);
      }

      td {
        padding: 0.8rem 1.6rem;
        border: solid 1px var(--border-black);
      }
    }
  }

  strong {
    font-weight: 600;
    color: var(--text-black);
    background: linear-gradient(transparent 65%, var(--theme-gray) 65%);
    padding: 0.2rem;
  }

  .wp-element-caption {
    line-height: 1.4;
    font-size: 1.4rem;
    color: var(--border-black);
    margin-top: 0.8rem;
    margin-bottom: 1.6rem;
    text-align: center;
  }

  .wp-block-image {
    margin-bottom: 1.6rem;
  }
}

@media screen and (max-width: 768px) {
}