@charset "utf-8";

/* ==========================================================================
   Interview Article — Hero (SP base / 480px)
   ========================================================================== */

.l-interview-hero-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8.33vw;
  padding-top: 30.21vw;
  overflow: hidden;
}

.interview-hero-particles {
  position: absolute;
  top: -170vw;
  left: -15vw;
  width: 212vw;
  height: 240vw;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.l-interview-hero {
  position: relative;
  z-index: 1;
}

.interview-hero-head {
  display: flex;
  flex-direction: column;
  gap: 5vw;
  margin-bottom: 5vw;
}

.interview-hero-label {
  display: flex;
  align-items: center;
  gap: 2.08vw;
}

.interview-hero-label-diamond {
  display: inline-block;
  width: 1.67vw;
  height: 1.67vw;
  background: #00ff6a;
  border-radius: 1px;
  transform: rotate(45deg);
}

.interview-hero-label-txt {
  font-family: "PlusJakartaSans", "Plus Jakarta Sans", sans-serif;
  font-size: 2.92vw;
  font-weight: 700;
  color: #081a00;
  letter-spacing: 1.12px;
  line-height: 1.48;
}

.interview-hero-title {
  margin: 0;
  font-family: "ZenKakuGothicNew", "Zen Kaku Gothic New", sans-serif;
  font-size: 6.25vw;
  font-weight: 700;
  color: #081a00;
  line-height: 1.4;
  letter-spacing: 1.2px;
  font-feature-settings: "palt" 1;
}

/* 見出しを1行ずつ白い帯にする */
  .interview-hero-title span {
    display: table;
    width: fit-content;
    margin-bottom: 2.5vw;
    padding: 0.2vw 2.22vw 0.3vw;
    background-color: #fff;
    border-radius: 0.6vw;
  }

.interview-hero-name {
  margin-bottom: 0.83vw;
  font-family: "NotoSansJP", "Noto Sans JP", sans-serif;
  font-size: 4.17vw;
  font-weight: 700;
  color: #081a00;
  line-height: 1.4;
  letter-spacing: 0.8px;
  font-feature-settings: "palt" 1;
}

.interview-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 3;
}

.interview-hero-tag {
  display: inline-flex;
  align-items: center;
  font-family: "NotoSansJP", "Noto Sans JP", sans-serif;
  font-size: 2.92vw;
  font-weight: 500;
  color: #081a00;
  letter-spacing: 0.56px;
  line-height: 1.5;
}

.interview-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 8.33vw;
}

.interview-hero-data {
  padding: 0 5vw;
  order: 1;
  display: flex;
  flex-direction: column;
}

.interview-hero-img {
  order: 2;
  position: relative;
  width: 100%;
  aspect-ratio: 432 / 244;
  overflow: hidden;
}

.interview-hero-img picture,
.interview-hero-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.interview-hero-img img {
  object-fit: cover;
  object-position: bottom;
}

/* PROFILE */

.interview-hero-profile-divider {
  display: none;
}

.l-interview-profile {
  padding: 5vw 0 5vw;
}

.interview-profile-inner {
  display: flex;
  gap: 5.83vw;
  align-items: baseline;
  width: 87.08vw;
  max-width: 87.08vw;
  margin: 0 auto;
}

.interview-profile-label {
  flex-shrink: 0;
  font-family: "PlusJakartaSans", "Plus Jakarta Sans", sans-serif;
  font-size: 2.92vw;
  font-weight: 700;
  color: #00cd55;
  letter-spacing: 1.12px;
  line-height: 1;
}

.interview-profile-text {
  flex: 1;
  font-family: "ZenKakuGothicNew", "Zen Kaku Gothic New", sans-serif;
  font-size: 2.92vw;
  font-weight: 500;
  color: #081a00;
  line-height: 2.2;
}

/* ==========================================================================
Article Body (SP)
   ========================================================================== */

.l-interview-article {
  padding: 11.67vw 5vw 35vw;
}

.interview-article-inner {
  background: #f4f4f4;
  border-radius: 8px;
  padding: 1.66vw 6.25vw 20vw;
}

.interview-article-block {
  margin-bottom: 8.33vw;
}

.interview-article-block:last-of-type {
  margin-bottom: 0;
}

.interview-article-h2 {
  margin-bottom: 8.33vw;
  padding-top: 8.33vw;
  font-family: "ZenKakuGothicNew", "Zen Kaku Gothic New", sans-serif;
  font-size: 5.41vw;
  font-weight: 700;
  color: #081a00;
  line-height: 1.6;
}

.interview-article-h3 {
    margin-bottom: 2.77vw;
    font-family: "ZenKakuGothicNew", "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 4.58vw;
    line-height: 160%;
  }

  p + .interview-article-h3 {
    padding-top: 8.33vw;
  }

.interview-article-text {
  font-family: "NotoSansJP", "Noto Sans JP", sans-serif;
  font-size: 3.33vw;
  font-weight: 500;
  color: #000;
  line-height: 2;
}

.interview-article-text p {
  margin: 0;
}

.interview-article-text p + p {
  margin-top: 1lh;
}

.interview-article-figure {
  position: relative;
  margin: 11.67vw 0 13.33vw;
  width: 100%;
  aspect-ratio: 384 / 220;
  border-radius: 4px;
  overflow: hidden;
}

.interview-article-figure picture,
.interview-article-figure img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.interview-article-figure img {
  object-fit: cover;
  object-position: bottom;
}

.interview-article-figure--portrait img {
  object-position: center;
}

.interview-article-figure:last-of-type {
  margin-bottom: 0;
}

.interview-article-note {
  margin: 6.67vw 0 0;
  font-family: "NotoSansJP", "Noto Sans JP", sans-serif;
  font-size: 2.92vw;
  font-weight: 400;
  color: #000;
  text-align: center;
  line-height: 1.5;
}

/* ==========================================================================
  READ MORE (SP)
   ========================================================================== */

.l-interview-readmore {
  background: #f4f4f4;
  padding: 25vw 0 30vw;
}

.interview-readmore-head {
  margin-bottom: 13.33vw;
  padding: 0 5vw;
}

.interview-readmore-label {
  display: flex;
  align-items: center;
  gap: 1.67vw;
  margin-bottom: 2.08vw;
}

.interview-readmore-label-diamond {
  display: inline-block;
  width: 1.46vw;
  height: 1.46vw;
  background: #00ff6a;
  border-radius: 2px;
  transform: rotate(45deg);
}

.interview-readmore-label-txt {
  font-family: "PlusJakartaSans", "Plus Jakarta Sans", sans-serif;
  font-size: 3.33vw;
  font-weight: 700;
  color: #081a00;
  letter-spacing: 1.28px;
  line-height: 1.48;
}

.interview-readmore-heading {
  margin: 0;
  font-family: "ZenKakuGothicNew", "Zen Kaku Gothic New", sans-serif;
  font-size: 6.67vw;
  font-weight: 700;
  color: #081a00;
  line-height: 1.48;
}

.interview-related-swiper-area {
  overflow: hidden;
}

.interview-related-swiper {
  overflow: visible;
}

.interview-related-swiper .swiper-slide {
  height: auto;
}

.interview-related-swiper .interview-card {
  display: flex;
}

.interview-related-ctrl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.08vw;
  margin-top: 5vw;
  padding: 0 3.33vw ;
}

.interview-related-prev,
.interview-related-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.67vw;
  height: 11.67vw;
  border-radius: 4px;
  background: #081a00;
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
}

.interview-related-prev svg,
.interview-related-next svg {
  width: 3.33vw;
  height: 3.33vw;
  fill: #fff;
}

.interview-related-prev:hover,
.interview-related-next:hover {
  background: #00ff6a;
}

.interview-related-prev:hover svg,
.interview-related-next:hover svg {
  fill: #081a00;
}

.interview-related-prev svg {
  transform: rotate(180deg);
}

/* Breadcrumb 3段 */

.l-breadcrumb--abe {
  background: #081a00;
}

.l-breadcrumb--article .breadcrumb-link--current {
  font-family: "NotoSansJP", "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #fff;
}

/* ==========================================================================
   PC (min-width: 1025px)
   ========================================================================== */

@media screen and (min-width: 1025px) {

  .l-interview-hero-wrap {
    gap: 0;
    padding: 9.16vw 7.22vw 0;
  }

  .interview-hero-particles {
    top: -127vw;
    left: -58vw;
    width: 126vw;
    height: 180vw;
  }

  .interview-hero-head {
    gap: 2.08vw;
    margin-bottom: 2.5vw;
  }

  .interview-hero-label { gap: 0.56vw; }
  .interview-hero-label-diamond { width: 0.56vw; height: 0.56vw; }
  .interview-hero-label-txt {
    font-size: 1.11vw;
    font-weight: 700;
  }

  .interview-hero-title {
    font-size: 2.78vw;
    letter-spacing: 1.6px;
  }

  .interview-hero-name {
    font-size: 1.67vw;
    letter-spacing: 0.96px;
    margin-bottom: 1.11vw;
  }

  .interview-hero-tag {
    padding: 0;
    font-size: 0.97vw;
    letter-spacing: 0.56px;
  }

  
   /* ここからレイアウト変更の記述ーーーーーーーーーーー */


  .interview-hero-inner {
    position: relative;
    display: block;
    width: 100%;
    min-height: 38vw;
    margin-bottom: 0;
  }

  .interview-hero-data,
  .interview-hero-img {
    order: unset;
  }

   /* 画像を右側へ大きく配置 */
  .interview-hero-img {
    position: absolute;
    top: 0;
    right: 4.44vw;
    width: calc(64% + 5.56vw);
    height: calc(60% + 10.97vw);
    aspect-ratio: auto;
    flex-shrink: 0;
    overflow: hidden;
  }

  .interview-hero-img picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .interview-hero-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
  }

   /* テキストを画像の上に重ねる */
  .interview-hero-data {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 58%;
    max-width: none;
    min-height: 38vw;
    box-sizing: border-box;
  }

  /* 見出しを1行ずつ白い帯にする */
  .interview-hero-title span {
    display: table;
    width: fit-content;
    margin-bottom: 0.7vw;
    padding: 0.2vw 0.8vw 0.3vw;
    background-color: #fff;
    border-radius: 0.15vw;
  }

  /* レイアウト変更の記述 ここまでーーーーーーーーーーー */


  /* プロフィール　ここからーーーーーーーーーーー */

  .interview-hero-profile-divider {
    display: block;
    position: relative;
    z-index: 2;
    width: 73.33vw;
    height: 1px;
    margin: 0 auto 4.44vw;
    background: #d4d4d4;
    flex-shrink: 0;
  }

  .l-interview-profile {
    position: relative;
    z-index: 2;
    padding: 0 6.39vw 4.44vw;
  }

  .interview-profile-inner {
    gap: min(3.89vw, 56px);
    max-width: min(63.89vw, 920px);
    width: 100%;
    margin: 0 auto;
  }

  .interview-profile-label { font-size: min(0.97vw, 14px); }
  .interview-profile-text {
    flex: 0 0 min(55.42vw, 798px);
    width: min(55.42vw, 798px);
    max-width: min(55.42vw, 798px);
    font-size: min(0.97vw, 14px);
    line-height: 1.8;
  }

  /* プロフィール　ここまでーーーーーーーーーーー */

  .l-interview-article {
    padding: 6.04vw 5.56vw 13.89vw;
  }

  .interview-article-inner {
    max-width: min(73.33vw, 1056px);
    margin: 0 auto;
    padding: min(1.66vw, 24px) min(9.17vw, 132px) min(6.66vw, 96px);
  }

  .interview-article-block { margin-bottom: 0; }

  .interview-article-h2 {
    padding-top: 5.00vw;
    margin-bottom: 2.78vw;
    font-size: min(2.78vw, 40px);
    line-height: 1.48;
  }

  .interview-article-h3 {
    margin-bottom: 1.66vw;
    font-family: "ZenKakuGothicNew", "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: min(1.94vw, 28px);
  }

  p + .interview-article-h3 {
    padding-top: 2.78vw;
  }

  .interview-article-text {
    font-size: min(1.11vw, 16px);
    line-height: 1.8;
  }

  .interview-article-figure { margin: 6.39vw 0 2.77vw; aspect-ratio: 936 / 480; }

 .interview-article-figure + p  {
    padding-top: 6.39vw;
  }

  .interview-article-figure:last-of-type {
    margin-bottom: 0;
  }

  .interview-article-note {
    margin-top: 2.47vw;
    font-size: min(0.97vw, 14px);
    text-align: right;
  }

  .l-interview-readmore {
    padding: 10.07vw 0 6.94vw;
  }

  .interview-readmore-inner {
    max-width: 83.33vw;
    margin: 0 auto;
    padding: 0;
  }

  .interview-readmore-head { margin-bottom: 4.17vw; }

  .interview-readmore-label { gap: 0.56vw; margin-bottom: 0.83vw; }
  .interview-readmore-label-diamond { width: 0.83vw; height: 0.83vw; }
  .interview-readmore-label-txt { font-size: 1.11vw; }

  .interview-readmore-heading { font-size: 2.78vw; }

  .interview-related-swiper-area {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }



  .interview-related-swiper .swiper-wrapper {
    margin-left: calc(-28vw - 2.5vw + 8.33vw);
  }

  .interview-related-ctrl {
    margin-top: 2.78vw;
    gap: 0.83vw;
    justify-content: flex-end;
  }

  .interview-related-prev,
  .interview-related-next {
    width: 3.89vw;
    height: 3.89vw;
  }

  .interview-related-prev svg,
  .interview-related-next svg {
    width: 1.11vw;
    height: 1.11vw;
  }
}