/* ==== ブログ詳細ページ（移住人インタビュー）専用スタイル ==== */

/* ヒーロー背景 */
.interview-hero-bg {
  height: 167px;
  background-image:
    var(--noise-white-multi),
    linear-gradient(90deg, #fbf3d9 0%, #7ed4dd 100%);
  background-repeat: repeat, no-repeat;
  background-size: 120px 120px, 100% 100%;
  pointer-events: none;

  @media (max-width: 1000px) {
    height: 200px;
  }
}

/* 汎用MV（詳細・一覧共通） */
.interview-hero {
  .interview-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1100px, 100%);
    margin: 0 auto;
  }

  .interview-hero__title {
    width: min(250px, 70vw);
    margin: 0 auto;

    @media (max-width: 600px) {
      width: min(170px, 100%);
    }

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .interview-hero__lead {
    margin: 36px auto 0;
    color: var(--color-main);
    font-family: var(--font-ja);
    font-size: 30px;
    font-weight: var(--font-weight-black);
    line-height: 1.6667;
    letter-spacing: 0.033em;
    text-align: center;

    @media (max-width: 1000px) {
      margin-top: 34px;
      font-size: 22px;
      line-height: 1.75;
    }

    @media (max-width: 600px) {
      font-size: 20px;
      font-weight: var(--font-weight-bold);
    }

    > p:last-child {
      margin-bottom: 0;
    }
  }

  .interview-hero__deco {
    position: absolute;
    z-index: 3;
    display: block;
    height: auto;
    pointer-events: none;
  }

  .interview-hero__deco--cloud-top-right {
    z-index: 1;
    top: 9px;
    right: -106px;
    width: 209px;
  }

  .interview-hero__deco--cloud-right {
    z-index: 1;
    top: 189px;
    right: -125px;
    width: 312px;
  }

  .interview-hero__deco--cloud-left {
    z-index: 1;
    top: 100px;
    left: -156px;
    width: 443px;
  }

  .interview-hero__deco--pottery {
    top: 315px;
    left: calc(50% - -330px);
    width: 134px;
  }

  .interview-hero__deco--uppurui-nori {
    top: 260px;
    right: calc(50% - -320px);
    width: 155px;
    transform: rotate(4.5deg);
  }

  .interview-hero__deco--chatting {
    top: 190px;
    left: calc(50% - 490px);
    width: 73px;
  }

  .interview-hero__deco--students-group {
    top: 343px;
    left: calc(50% - 430px);
    width: 56px;
  }

  .interview-hero__deco--cafe-relax {
    top: 300px;
    left: calc(50% - -370px);
    width: 121px;
  }

  .interview-hero__deco--student {
    top: 302px;
    left: calc((100% - 1100px) / 2 + 185px);
    width: 63px;
  }

  .interview-hero__deco--careerwoman {
    top: 132px;
    left: calc(50% - -240px);
    width: 70px;
  }

  @media (max-width: 1000px) {
    .interview-hero__deco--cloud-top-right {
      top: 0;
      right: -54px;
      width: 180px;
    }

    .interview-hero__deco--cloud-right {
      top: 152px;
      right: -87px;
      width: 218px;
    }

    .interview-hero__deco--cloud-left {
      top: 0;
      left: -78px;
      width: 260px;
    }

    .interview-hero__deco--pottery {
      top: 280px;
      left: calc(50% - -180px);
      width: 100px;
    }

    .interview-hero__deco--uppurui-nori {
      top: 178px;
      left: calc(50% - 280px);
      width: 130px;
      right: auto;
    }

    .interview-hero__deco--chatting {
      top: 230px;
      left: calc(50% - 280px);
    }

    .interview-hero__deco--students-group {
      top: 60px;
      right: auto;
      width: 50px;
      left: calc(50% - -150px);
      transform: none;
    }

    .interview-hero__deco--cafe-relax {
      top: 220px;
      right: auto;
      width: 120px;
      left: calc(50% - -170px);
    }

    .interview-hero__deco--student {
      top: 314px;
      left: calc(50% - 230px);
      width: 50px;
    }

    .interview-hero__deco--careerwoman {
      top: 85px;
      left: calc(50% - -170px);
      width: 50px;
    }
  }

  @media (max-width: 600px) {
    .interview-hero__deco--cloud-top-right {
      right: -24px;
      width: 100px;
    }

    .interview-hero__deco--cloud-right {
      top: 72px;
      right: -77px;
      width: 140px;
    }

    .interview-hero__deco--cloud-left {
      left: -28px;
      width: 150px;
    }

    .interview-hero__deco--pottery {
      width: 80px;
      left: calc(50% + 130px);
      top: 70px;
    }

    .interview-hero__deco--uppurui-nori {
      left: calc(50% - 60px);
      width: 120px;
      top: 40px;
    }

    .interview-hero__deco--chatting {
      left: calc(50% - 200px);
      width: 65px;
      top: 60px;
    }

    .interview-hero__deco--students-group {
      top: 50px;
      width: 55px;
      left: calc(50% - -140px);
    }

    .interview-hero__deco--cafe-relax {
      width: 120px;
      left: calc(50% - 50px);
      top: 10px;
    }

    .interview-hero__deco--student {
      top: 280px;
      left: calc(50% - 210px);
      width: 50px;
    }

    .interview-hero__deco--careerwoman {
      top: 40px;
      left: calc(50% + -190px);
      width: 50px;
    }
  }

  @media (max-width: 450px) {
    .interview-hero__deco--pottery {
      left: calc(50% - -70px);
      top: 80px;
      width: 80px;
    }

    .interview-hero__deco--uppurui-nori {
      left: calc(50% - 60px);
      width: 120px;
      top: 40px;
    }

    .interview-hero__deco--chatting {
      width: 55px;
      top: 60px;
      left: calc(50% - 145px);
    }

    .interview-hero__deco--students-group {
      width: 45px;
      left: calc(50% - -100px);
    }

    .interview-hero__deco--cafe-relax {
      left: calc(50% - 40px);
      top: 30px;
      width: 100px;
    }

    .interview-hero__deco--student {
      top: 290px;
      left: calc(50% - 140px);
    }

    .interview-hero__deco--careerwoman {
      top: 70px;
      left: calc(50% + -145px);
      width: 45px;
    }
  }
}

/* 一覧MV */
.interview-list {
  .interview-hero {
    min-height: 499px;
    padding: 162px 20px 69px;
    overflow-x: hidden;
    position: relative;

    @media (max-width: 1000px) {
      min-height: 420px;
      padding: 143px 20px 70px;
    }

    @media (max-width: 600px) {
      padding-bottom: 50px;
      min-height: auto;
    }

    &::after {
      content: "";
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 0;
      right: 0;
      width: min(1100px, 100%);
      height: 7px;
      margin: 0 auto;
      background-image: url("../../images/illust/illust_border.svg");
      background-repeat: repeat-x;
      background-position: center bottom;
      background-size: auto 7px;
      pointer-events: none;
    }
  }

  .interview-hero__inner {
    position: relative;
    z-index: 4;
  }

  .interview-hero__lead {
    margin-top: 34px;
    color: var(--color-font);
    font-size: 20px;
    line-height: 1.95;
    letter-spacing: 0.05em;
    max-width: 500px;

    @media (max-width: 1000px) {
      margin-top: 28px;
      font-size: 17px;
      line-height: 1.85;
    }

    @media (max-width: 600px) {
      margin-top: 25px;
      font-size: 14px;
      width: min(350px, 100%);
    }
  }
}

/* 一覧本文 */
.interview-list-content {
  position: relative;
  overflow: hidden;
  padding: 72px 20px 0;
  background-size: 120px 120px;

  .interview-list-content__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 287px minmax(0, 771px);
    align-items: flex-start;
    gap: 46px;
    width: min(1100px, 100%);
    margin: 0 auto;
  }

  .interview-list-content__main {
    min-width: 0;
  }

  /* カテゴリー別アーカイブの選択状態（移住者ブログのジャンル表示と同じ見た目） */
  .interview-list-content__category-banner {
    margin: 0 0 40px;
    padding: 16px 24px;
    border-radius: 7px;
    background-color: var(--color-gold-base);
    color: var(--color-white);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.26px;
    text-align: left;

    @media (max-width: 1000px) {
      font-size: clamp(20px, 5vw, 24px);
      margin-bottom: 30px;
    }

    @media (max-width: 450px) {
      font-size: 20px;
      padding: 14px 18px;
    }
  }

  .interview-list-content__cloud {
    position: absolute;
    z-index: 1;
    display: block;
    height: auto;
    pointer-events: none;
  }

  .interview-list-content__cloud--right-top {
    top: 629px;
    right: -90px;
    width: 315px;
  }

  .interview-list-content__cloud--left {
    top: 1205px;
    left: -98px;
    width: 268px;
    transform: scaleX(-1);
  }

  .interview-list-content__cloud--right-bottom {
    top: 2244px;
    right: -47px;
    width: 268px;
  }

  @media (max-width: 1000px) {
    padding: 50px 20px 0;

    .interview-list-content__inner {
      display: block;
      width: min(771px, 100%);
    }

    .interview-list-content__main {
      margin-top: 0;
    }

    .interview-list-content__cloud--right-top {
      top: 720px;
      right: -100px;
      width: 230px;
    }

    .interview-list-content__cloud--left {
      top: 1380px;
      left: -92px;
      width: 220px;
    }

    .interview-list-content__cloud--right-bottom {
      top: auto;
      right: -82px;
      bottom: 118px;
      width: 218px;
    }
  }

  @media (max-width: 600px) {
    padding-top: 40px;

    .interview-list-content__cloud--right-top {
      right: -60px;
      width: 140px;
    }

    .interview-list-content__cloud--left {
      left: -22px;
      width: 120px;
    }

    .interview-list-content__cloud--right-bottom {
      right: -52px;
      bottom: 118px;
      width: 120px;
    }
  }
}

.interview-category-nav {
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--color-white);
  box-shadow: 0 3px 6px rgba(91, 65, 47, 0.12);

  .interview-category-nav__title {
    position: relative;
    min-height: 51px;
    margin: 0;
    padding: 12px 18px 12px 48px;
    background-color: var(--color-main);
    color: var(--color-white);
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    line-height: 1.45;
    letter-spacing: 0.04em;

    &::before {
      content: "";
      position: absolute;
      top: 18px;
      left: 15px;
      width: 23px;
      height: 17px;
      background-image: url("../../images/icon/icon_category_btn.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  .interview-category-nav__list {
    margin: 0;
    padding: 6px 12px 13px;
    list-style: none;
  }

  .interview-category-nav__item {
    position: relative;
    padding: 14px 6px 13px 26px;

    + .interview-category-nav__item {
      border-top: 1px dashed #dccfb8;
    }

    &::before {
      content: "";
      position: absolute;
      top: 25px;
      left: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--interview-category-color);
    }

    a {
      color: var(--color-font);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: 0.05em;
      text-decoration: underline;
      text-underline-offset: 2px;

      &:hover,
      &:focus-visible {
        text-decoration: none;
      }
    }
  }

  @media (max-width: 1000px) {
    display: none;
  }
}

.interview-card__category,
.interview-category-nav__item,
.interview-category-modal__link {
  --interview-category-color: var(--color-main);
}

.interview-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 43px;
  row-gap: 56px;

  @media (max-width: 1000px) {
    column-gap: 30px;
  }

  @media (max-width: 700px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 36px;
  }

  @media (max-width: 375px) {
    grid-template-columns: 1fr;
  }
}

.interview-card {
  min-width: 0;

  .interview-card__thumbnail {
    display: block;
    overflow: hidden;
    aspect-ratio: 228 / 176;
    border-radius: 10px;

    &:hover img,
    &:focus-visible img {
      scale: 1.2;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale .3s;
    }
  }

  .interview-card__category {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 24px 0 0;
    padding: 6px 12px 7px;
    border-radius: 35px;
    background-color: var(--interview-category-color);
    color: var(--color-white);
    font-size: 14px;
    font-weight: var(--font-weight-black);
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.05em;
  }

  .interview-card__title {
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.62;
    letter-spacing: 0.05em;

    a {
      color: var(--color-font);
      text-decoration: underline;
      text-underline-offset: 2px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;

      &:hover,
      &:focus-visible {
        text-decoration: none;
      }
    }
  }

  .interview-card__profile {
    margin-top: 15px;
    color: var(--color-main);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.58;
    letter-spacing: 0.05em;
  }

  .interview-card__name,
  .interview-card__organization,
  .interview-card__date {
    margin: 0;
  }

  .interview-card__date {
    margin-top: 8px;
    color: #b1876a;
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    text-align: right;
    letter-spacing: 0.05em;
    display: block;
  }

  .interview-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin: 21px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #dccfb8;
    list-style: none;

    li {
      min-width: 58px;
      padding: 2px 14px 3px;
      border: 1px solid #e36344;
      border-radius: 30px;
      background-color: var(--color-white);
      color: var(--color-main);
      font-size: 12px;
      font-weight: var(--font-weight-bold);
      line-height: 1.5;
      text-align: center;
      letter-spacing: 0.05em;
      margin: 0;

      &:has(> .interview-card__tag) {
        padding: 0;
      }
    }
  }

  .interview-card__tag {
    display: block;
    padding: 2px 14px 3px;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover,
    &:focus-visible {
      background-color: var(--color-main);
      color: var(--color-white);
    }
  }

  @media (max-width: 700px) {
    .interview-card__category {
      min-height: 29px;
      margin-top: 20px;
      padding: 5px 10px 6px;
      font-size: 12px;
      line-height: 1.45;
    }

    .interview-card__title {
      margin-top: 9px;
      font-size: 13px;
      line-height: 1.62;
    }

    .interview-card__profile {
      margin-top: 11px;
      font-size: 12px;
      line-height: 1.85;
    }

    .interview-card__date {
      margin-top: 3px;
      font-size: 12px;
    }

    .interview-card__tags {
      gap: 8px;
      margin-top: 15px;
      padding-top: 15px;

      li {
        min-width: 0;
        min-height: 20px;
        padding: 1px 12px 2px;
        font-size: 12px;
        line-height: 1.5;

        &:has(> .interview-card__tag) {
          padding: 0;
        }
      }
    }

    .interview-card__tag {
      min-height: 20px;
      padding: 1px 12px 2px;
    }
  }
}

.interview-category-trigger {
  display: none;

  @media (max-width: 1000px) {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 188px;
    height: 56px;
    padding: 0 22px;
    border: 0;
    border-radius: 15px;
    background-color: rgba(235, 112, 59, 0.95);
    color: var(--color-white);
    font-family: var(--font-ja);
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    line-height: 1.45;
    letter-spacing: 0.04em;
    box-shadow: 0 3px 10px rgba(91, 65, 47, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;

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

    img {
      display: block;
      flex: 0 0 auto;
      width: 23px;
      height: 17px;
    }
  }

  @media (max-width: 350px) {
    width: 170px;
    font-size: 16px;
  }
}

.interview-category-modal {
  display: none;

  @media (max-width: 1000px) {
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow-y: auto;
    background-color: rgba(91, 65, 47, 0.95);
  }

  &.is-show {
    @media (max-width: 1000px) {
      display: block;
    }
  }

  .interview-category-modal__panel {
    @media (max-width: 1000px) {
      width: min(362px, calc(100% - 86px));
      margin: 0 auto;
      padding: 58px 0 80px;
    }

    @media (max-width: 390px) {
      width: calc(100% - 40px);
    }
  }

  .interview-category-modal__heading {
    @media (max-width: 1000px) {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 28px;
      margin: 0 0 29px;
      color: var(--color-white);
      font-size: 19px;
      font-weight: var(--font-weight-bold);
      line-height: 1.45;
      letter-spacing: 0.04em;
    }

    img {
      @media (max-width: 1000px) {
        display: block;
        flex: 0 0 auto;
        width: 23px;
        height: 17px;
      }
    }
  }

  .interview-category-modal__list {
    @media (max-width: 1000px) {
      display: grid;
      gap: 17px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .interview-category-modal__link {
    @media (max-width: 1000px) {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 43px;
      padding: 9px 44px 9px 21px;
      border-radius: 50px;
      background-color: var(--interview-category-color);
      color: var(--color-white);
      font-size: 15px;
      font-weight: var(--font-weight-black);
      line-height: 1.45;
      letter-spacing: 0.05em;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    &::after {
      @media (max-width: 1000px) {
        content: "";
        position: absolute;
        top: 50%;
        right: 21px;
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--color-white);
        border-right: 2px solid var(--color-white);
        transform: translateY(-50%) rotate(45deg);
      }
    }

    &:hover,
    &:focus-visible {
      @media (max-width: 1000px) {
        text-decoration: none;
      }
    }
  }

  .interview-category-modal__close {
    @media (max-width: 1000px) {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 146px;
      min-height: 46px;
      margin: 59px auto 0;
      padding: 0 20px;
      border: 0;
      border-radius: 50px;
      background-color: var(--color-white);
      color: var(--color-main);
      font-family: var(--font-ja);
      font-size: 14px;
      font-weight: var(--font-weight-bold);
      line-height: 1.45;
      letter-spacing: 0.05em;
      cursor: pointer;
    }

    span {
      @media (max-width: 1000px) {
        margin-top: -2px;
        font-size: 34px;
        font-weight: var(--font-weight-normal);
        line-height: 1;
      }
    }
  }
}

body {
  &.is-interview-category-modal-open {
    @media (max-width: 1000px) {
      overflow: hidden;
    }
  }
}

.is-category-monozukuri {
  --interview-category-color: #e2c672;
}

.is-category-food {
  --interview-category-color: #6d8eab;
}

.is-category-expression {
  --interview-category-color: #93c183;
}

.is-category-community {
  --interview-category-color: #67c6c4;
}

.is-category-life {
  --interview-category-color: #6d8eab;
}

.is-category-feature {
  --interview-category-color: #eb703b;
}

.interview-pagination {
  margin-top: 50px;

  @media (max-width: 700px) {
    margin-top: 40px;
  }
}

/* MV背景に食い込ませるオフセット（.page-lower標準値の上書き） */
.interview-hero-bg + .page-lower {
  margin-top: calc((0px - var(--cloud-height)) + 22px);
}

/* 詳細本文 */
.interview-single--izumojin {
  @media (min-width: 601px) and (max-width: 1000px) {
    .interview-hero__deco--pottery {
      top: 250px;
    }
  }
}
.interview-single {
  background: transparent;
  color: var(--color-font);

  .interview-hero__inner {
    padding-inline: 20px;
  }

  .interview-hero {
    padding-top: 162px;
  }

  .interview-single__inner {
    position: relative;
    z-index: 2;
    width: min(1100px, 100%);
    margin: 0 auto;
  }


  .interview-single__deco {
    position: absolute;
    z-index: 3;
    display: block;
    height: auto;
    pointer-events: none;
  }

  .interview-single__deco--cloud-left {
    top: 102px;
    left: 0;
    width: 443px;

    @media (max-width: 1000px) {
      top: 98px;
      left: 0;
      width: 170px;
      transform: translateX(-42%);
    }
  }

  .interview-single__deco--cloud-right {
    top: 191px;
    right: 0;
    width: 312px;

    @media (max-width: 1000px) {
      top: 166px;
      right: 0;
      width: 130px;
      transform: translateX(40%);
    }
  }

  .interview-single__deco--ichiziku {
    top: 212px;
    left: calc(50% - 326px);
    width: 121px;

    @media (max-width: 1000px) {
      top: 176px;
      left: 20px;
      width: 82px;
    }
  }

  .interview-single__deco--shijimi {
    top: 228px;
    right: calc(50% - 300px);
    width: 72px;

    @media (max-width: 1000px) {
      top: 195px;
      right: 48px;
      width: 52px;
    }
  }

  .interview-single__deco--cloud-bottom-left {
    top: 0;
    left: -90px;
    width: 268px;

    @media (max-width: 1000px) {
      left: 0;
      width: 112px;
      transform: translateX(-28%);
    }
  }

  .interview-single__deco--mountain {
    top: 0;
    right: 0;
    width: 269px;

    @media (max-width: 1000px) {
      width: 160px;
      top: 50px;
    }
  }


  .interview-single__profile {
    margin-top: 22px;
    text-align: center;

    @media (max-width: 1000px) {
      margin-top: 19px;
    }
  }

  .interview-single__roman {
    margin: 0;
    color: #b79b56;
    font-family: var(--font-ja);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    @media (max-width: 1000px) {
      font-size: 11px;
    }
  }

  .interview-single__name {
    margin: 6px 0 0;
    font-family: var(--font-ja);
    font-size: 38px;
    font-weight: var(--font-weight-black);
    line-height: 1.35;
    letter-spacing: 0.08em;

    @media (max-width: 1000px) {
      font-size: 27px;
    }

    @media (max-width: 600px) {
      font-size: 24px;
    }
  }

  .interview-single__honorific {
    margin-left: 0.15em;
    font-size: 0.6em;
    letter-spacing: 0.04em;
  }

  .interview-single__role {
    margin: 6px 0 0;
    color: var(--color-main);
    font-family: var(--font-ja);
    font-size: 15px;
    font-weight: var(--font-weight-black);
    line-height: 1.5;
    letter-spacing: 0.08em;

    @media (max-width: 1000px) {
      font-size: 13px;
    }
  }

  .interview-single__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: min(650px, 100%);
    gap: 9px;
    margin: 28px auto 0;
    padding: 0;
    list-style: none;

    @media (max-width: 1000px) {
      gap: 8px;
      margin-top: 24px;
    }
  }

  .interview-single__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 28px;
    padding: 4px 17px;
    color: var(--color-white);
    font-family: var(--font-ja);
    font-size: 14px;
    font-weight: var(--font-weight-black);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    background-color: #bca363;
    /* 反転時に白背景でも形が残るよう、背景と同色の枠線を付けておく */
    border: 1px solid #bca363;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;

    @media (max-width: 1000px) {
      min-width: 78px;
      min-height: 25px;
      padding: 3px 13px;
    }
  }

  a.interview-single__tag {
    &:hover,
    &:focus-visible {
      background-color: var(--color-white);
      color: #bca363;
    }
  }

  .interview-single__photo {
    width: min(450px, 100%);
    margin: 44px auto 0;
    border-radius: 10px;
    position: relative;

    @media (max-width: 1000px) {
      margin-top: 34px;
    }
  }

  .interview-single__cloud {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
  }

  .interview-single__cloud--photo {
    z-index: 1;
    left: -134px;
    bottom: 91px;
    width: 156px;

    @media (max-width: 1000px) {
      left: -92px;
      bottom: 10px;
    }

    @media (max-width: 600px) {
      left: -40px;
      bottom: -30px;
      width: 110px;
    }
  }

  .interview-single__photo-image {
    display: block;
    width: 100%;
    aspect-ratio: 500 / 358;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  .interview-single__profile-text {
    width: min(995px, 100%);
    margin: 66px auto 0;
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    line-height: 2.3125;
    letter-spacing: 0.01em;
    text-align: left;

    @media (max-width: 1000px) {
      margin-top: 30px;
      line-height: 2;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  .interview-single__body {
    --cloud-width: max(2001px, 100vw);
    --cloud-height: max(139px, 6.94653vw);

    padding: var(--cloud-height) 35px 130px;

    @media (max-width: 1000px) {
      padding: calc(var(--cloud-height) + 20px) 22px 96px;
    }

    .interview-single__cloud--body {
      z-index: 1;
      right: -35px;
      bottom: 280px;
      width: 268px;

      @media (max-width: 1000px) {
        right: -22px;
        bottom: 220px;
        width: 150px;
      }
    }
  }

  .interview_catchcopy {
    p:last-child {
      margin-bottom: 0;
    }
  }


  .interview-single__intro {
    width: min(754px, 100%);
    margin-top: 0;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: 0;
    font-family: var(--font-ja);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 2.2778;
    letter-spacing: 0.055em;

    @media (max-width: 1000px) {
      width: 100%;
      line-height: 2;
      letter-spacing: 0.03em;
    }

    @media (max-width: 600px) {
      font-size: 16px;
    }

    p:last-child {
      margin-bottom: 0!important;
    }
  }

  .interview-single__content {
    width: 100%;
    margin-top: 0;
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    line-height: 1.8;
    letter-spacing: 0.01em;

    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }

    p:not([class]) {
      margin: 0 0 1.75em;
    }

    .interview-single__section-heading {
      display: block;
      min-height: 0;
      margin: 0 0 36px;
      padding: 17px 0;
      color: var(--color-font);
      font-size: 21px;
      font-weight: var(--font-weight-bold);
      line-height: 1.35;
      letter-spacing: 0.02em;
      text-align: left;
      background-color: transparent;
      border-bottom: 1px solid #b9b19b;
      border-radius: 0;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

    .wp-block-image {
      width: min(535px, 100%);
      margin: 36px auto 0;

      &.interview-single__media {
        margin-bottom: 48px;
      }

      img {
        display: block;
        width: 100%;
        height: auto;
        /* aspect-ratio: 535 / 357;
        object-fit: cover; */
      }
    }

    .interview-single__media {
      display: grid;
      gap: 35px;
      margin: 36px auto 48px;

      .wp-block-image {
        width: 100%;
        margin: 0;

        img {
          display: block;
          width: 100%;
          height: auto;
          /* aspect-ratio: 268 / 179;
          object-fit: cover; */
        }
      }

      .interview-single__media-caption {
        margin: 10px 0 0;
        color: var(--color-font);
        font-size: 14px;
        line-height: 1.6;
        letter-spacing: 0.02em;
        text-align: left;

        @media (max-width: 600px) {
          font-size: 12px;
        }
      }

      &.interview-single__media--1 {
        grid-template-columns: 1fr;
        width: min(535px, 100%);
      }

      &.interview-single__media--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(570px, 100%);
      }

      &.interview-single__media--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(754px, 100%);
      }

      &.interview-single__media--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(570px, 100%);
      }

      @media (max-width: 450px) {
        grid-template-columns: 1fr !important;
        gap: 18px;
      }
    }

    .interview-single__article-section {
      margin: 0;
    }

    .interview-single__intro + .interview-single__article-section {
      margin-top: 45px;
      padding-top: 56px;
      border-top: 1px solid #E36344;
    }

    .interview-single__article-section + .interview-single__article-section {
      margin-top: 70px;
      padding-top: 0;
      border-top: 0;
    }

    @media (max-width: 600px) {
      font-size: 15px;

      .interview-single__section-heading {
        padding: 15px 0;
        font-size: 19px;
        margin-bottom: 28px;
      }

      .interview-single__section-heading:first-child {
        margin-top: 0;
      }

      .interview-single__article-section + .interview-single__article-section {
        margin-top: 56px;
        padding-top: 0;
      }

      .interview-single__intro + .interview-single__article-section {
        margin-top: 40px;
        padding-top: 30px;
      }
    }

    @media (max-width: 450px) {
      .wp-block-columns {
        grid-template-columns: 1fr;
        gap: 18px;
      }
    }
  }

  .interview-single__cloud--index {
    top: 1080px;
    right: -60px;
    width: 302px;

    @media (max-width: 600px) {
      top: 1090px;
      right: -60px;
      width: 160px;
    }
  }

  .interview-single__index {
    position: relative;
    width: 100%;
    margin: 96px auto 0;
    padding: 78px 42px 43px;
    background-color: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(91, 65, 47, 0.25);

    @media (max-width: 1000px) {
      margin-top: 76px;
      padding: 40px 26px 26px;
    }
  }

  .interview-single__index-title {
    position: absolute;
    top: -37px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 307px;
    min-height: 80px;
    margin: 0;
    padding: 12px 44px;
    color: var(--color-white);
    font-family: var(--font-ja);
    font-size: 35px;
    font-weight: var(--font-weight-black);
    line-height: 1.2;
    letter-spacing: 0.04em;
    background-color: var(--color-main);
    border-radius: 999px;
    transform: translateX(-50%);

    @media (max-width: 1000px) {
      top: -30px;
      min-width: 188px;
      min-height: 58px;
      padding: 10px 32px;
      font-size: 24px;
    }
  }

  .interview-single__index-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      position: relative;
      padding: 25px 0 25px 20px;
      font-family: var(--font-ja);
      font-size: 19px;
      font-weight: var(--font-weight-bold);
      line-height: 1.45;
      letter-spacing: 0.02em;
      border-bottom: 1px dashed #dccfb8;
      margin-block: 0;

      @media (max-width: 1000px) {
        padding: 20px 0 20px 18px;
      }

      @media (max-width: 600px) {
        font-size: 16px;
      }

      &::before {
        content: "-";
        position: absolute;
        top: 23px;
        left: 0;

        @media (max-width: 1000px) {
          top: 17px;
        }
      }

      &:first-child {
        border-top: 0;
      }
    }

    a {
      color: var(--color-font);
      text-decoration: none;
      transition: opacity .2s;

      &:hover {
        opacity: .8;
      }
    }
  }

  .interview-single__layout {
    display: grid;
    grid-template-columns: minmax(0, 758px) 287px;
    gap: 58px;
    align-items: start;
    margin-top: 60px;

    @media (max-width: 1000px) {
      grid-template-columns: 1fr;
      gap: 58px;
      margin-top: 0;
    }
  }

  .interview-single__main {
    min-width: 0;
  }

  .interview-single__content-block + .interview-single__content-block {
    margin-top: 55px;
  }

  .interview-single__content-block > :last-child {
    margin-bottom: 0;
  }

  .interview-single__subheading {
    margin: 0 0 21px;
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.03em;
    position: relative;
    padding-left: 30px;

    &::before {
      content: "";
      background-color: var(--color-main);
      position: absolute;
      top: 15px;
      left: 0;
      width: 16px;
      height: 1px;
      transform: translateY(-50%);
    }
  }

  .interview-single__figure {
    width: min(535px, 100%);
    margin: 36px auto 0;

    img {
      display: block;
      width: 100%;
      aspect-ratio: 535 / 357;
      height: auto;
      object-fit: cover;
    }
  }

  .interview-single__image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
    width: min(570px, 100%);
    margin: 36px auto 0;

    img {
      display: block;
      width: 100%;
      aspect-ratio: 268 / 179;
      height: auto;
      object-fit: cover;
    }

    @media (max-width: 600px) {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }

  .interview-single__sidebar {
    display: grid;
    gap: 46px;

    @media (max-width: 1000px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }

    @media (max-width: 700px) {
      grid-template-columns: 1fr;
    }
  }

  .interview-single__favorite {
    position: relative;
    margin-top: 160px;
    padding: 98px 45px 40px;
    background-color: #fff0ec;
    border-radius: 10px;
    box-shadow: none;

    @media (max-width: 1000px) {
      padding: 98px 24px 34px;
    }
  }

  .interview-single__favorite-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
  }

  .interview-single__favorite-copy {
    margin: 0;
    margin-bottom: -10px;
  }

  .interview-single__favorite-face {
    display: block;
    width: 120px;
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .interview-single__favorite-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;

    @media (max-width: 700px) {
      grid-template-columns: 1fr;
      gap: 34px;
    }
  }

  .interview-single__favorite-card {
    text-align: center;

    img {
      display: block;
      width: 100%;
      aspect-ratio: 310 / 223;
      height: auto;
      object-fit: cover;
      border-radius: 5px;
    }

    h3 {
      margin: 29px 0 0;
      color: var(--color-font);
      font-family: var(--font-ja);
      font-size: 18px;
      font-weight: var(--font-weight-black);
      line-height: 1.6;
      letter-spacing: 0.04em;
    }

    p {
      margin: 10px 0 0;
      font-family: var(--font-ja);
      font-size: 13px;
      font-weight: var(--font-weight-normal);
      line-height: 2;
      letter-spacing: 0.04em;

      @media (max-width: 1000px) {
        text-align: left;
      }
    }
  }

  .interview-single__favorite-more-link {
    display: flex;
    margin: 40px auto 0;
    width: min(250px, 100%);
    padding: 18px 40px;
    font-weight: 500;
    box-shadow: none;
    font-size: 16px;
    border: 1px solid var(--color-main);

    @media (max-width: 1000px) {
      min-height: 64px;
      margin-top: 30px;
      line-height: 1.55;
    }

    &::after {
      right: 18px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid var(--color-sub);
    }
  }

  .interview-single__share {
    width: min(298px, 100%);
    margin: 60px auto 0;
    padding: 18px 35px 17px;
    border: 1px solid #e36344;
    border-radius: 14px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }

  .interview-single__share-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--color-font);
    font-family: var(--font-ja);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1.58;
    letter-spacing: 0.04em;

    img {
      display: block;
      width: 27px;
      height: auto;
    }
  }

  .interview-single__share-list {
    display: flex;
    justify-content: center;
    gap: 49px;
    margin: 0;
    padding: 0;
    list-style: none;

    a,
    button,
    img {
      display: block;
    }

    a,
    button {
      width: 43px;
      transition: opacity var(--transition-base);

      &:hover,
      &:focus-visible {
        opacity: 0.75;
      }
    }

    button {
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }

    img {
      width: 100%;
      height: auto;
    }
  }

  .interview-single__share-copy {
    position: relative;
  }

  .interview-single__share-status {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    padding: 5px 12px;
    border-radius: 6px;
    background-color: var(--color-font);
    color: var(--color-white);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      border: 5px solid transparent;
      border-top-color: var(--color-font);
      transform: translateX(-50%);
    }

    &.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }
  }

}

/* サイドカード */
.interview-side-card {
  overflow: hidden;
  background-color: #fbf9ef;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(91, 65, 47, 0.2);

  .interview-side-card__title {
    margin: 0;
    padding: 19px 16px 20px;
    color: var(--color-white);
    font-family: var(--font-ja);
    font-size: 19px;
    font-weight: var(--font-weight-black);
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;
    background-color: var(--color-main);
  }

  &.interview-side-card--news {
    .interview-side-card__title {
      background-color: #6d8eab;
    }
  }

  .interview-side-card__content {
    padding-inline: 14px;
  }

  .interview-side-card__item {
    padding: 31px 0 23px;

    + .interview-side-card__item {
      border-top: 1px dashed #dccfb8;
    }

    .interview-side-card__thumbnail {
      margin: 0;
      overflow: hidden;
      border-radius: 10px;
    }

    img {
      display: block;
      width: min(238px, 100%);
      margin: 0 auto;
      aspect-ratio: 238 / 129;
      height: auto;
      object-fit: cover;
      border-radius: 10px;
      transition: scale .3s;
    }

    h3 {
      display: -webkit-box;
      margin: 17px auto 0;
      width: min(254px, 100%);
      min-height: calc(1.85em * 2);
      overflow: hidden;
      color: var(--color-font);
      font-family: var(--font-ja);
      font-size: 14px;
      font-weight: var(--font-weight-normal);
      line-height: 1.85;
      letter-spacing: 0.05em;
      text-align: center;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-overflow: ellipsis;
      transition: all .3s;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    p {
      width: min(254px, 100%);
      margin: 9px auto 0;
      color: var(--color-main);
      font-family: var(--font-ja);
      font-size: 12px;
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .interview-side-card__link {
      text-decoration: none;

      &:hover {
        h3 {
          text-decoration: none;
        }

        img {
          scale: 1.2;
        }
      }
    }
  }

  &.interview-side-card--news {
    .interview-side-card__item p {
      color: #6d8eab;
    }
  }
}

/* ==============================================
   出雲人（izumojon）
   ============================================== */
.interview-list {
  .izumojin-hero {
    @media (max-width: 600px) {
      padding-bottom: 40px;
    }
  }
}

.izumojin-banner {
  width: min(400px, 100%);
  margin: 70px auto 0;

  a {
    transition: opacity .2s;

    &:hover {
      opacity: .8;
    }
  }
}

/* ==============================================
   出雲な暮らし（izumo-people）
   ============================================== */
.interview-list--izumo-people {

  .interview-list-content__inner {
    display: block;
    width: min(1100px, 100%);
  }

  .interview-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    @media (max-width: 1000px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (max-width: 700px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 375px) {
      grid-template-columns: 1fr;
    }
  }
}

.izumo-people-hero {
  .interview-hero__title {
    width: min(450px, 70vw);

    @media (max-width: 1000px) {
      width: min(220px, 70vw);
    }

    @media (max-width: 600px) {
      width: min(170px, 70vw);
    }

    @media (max-width: 450px) {
      width: min(160px, 70vw);
    }
  }

  @media (max-width: 600px) {

    .interview-hero__deco--pottery {
      top: 100px;
    }
  }
}


/* ==============================================
  出雲人が薦める出雲（izumo-recommend）
  ============================================== */
.interview-list {
  .izumojin-recommend-hero {

    &::after {
      display: none;
    }

    @media (max-width: 1000px) {
      .interview-hero__lead {
        margin-top: 60px;
      }
    }

    @media (max-width: 600px) {
      .interview-hero__lead {
        margin-top: 80px;
      }
    }

    @media (max-width: 450px) {
      padding-top: 160px;
    }

    .interview-hero__title {
      width: min(380px, 70vw);

      @media (max-width: 1000px) {
        width: min(300px, 70vw);
      }

      @media (max-width: 600px) {
        width: min(250px, 70vw);
      }

      @media (max-width: 450px) {
        width: min(210px, 70vw);
      }
    }
  }
}