@charset "UTF-8";
/* CSS Document */
/* ===== Intro Section ===== */
/* Layout */
.mp-main {
  max-width: var(--mp-max);
  margin: 0 auto;
  padding: 0 16px
}
/* Ribbon (SPECIAL) */
.mp-ribbon {
  margin: 16px 0 8px;
  text-align: center;
  position: relative
}
.mp-ribbon__tag {
  display: inline-block;
  background: linear-gradient(90deg, #ff8ec3, #7bd1ff);
  color: #fff;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .06)
}
.mp-ribbon__lead {
  margin: 10px 0 4px;
  font-size: 20px;
  line-height: 1.35
}
.mp-ribbon__sub {
  margin: 0 auto;
  color: #374151;
  font-size: 13px;
  max-width: 720px
}
/* Section */
.mp-section {
  margin: 14px 0 0
}
/* Feature Card */
.mp-featureCard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  padding: 12px;
  background: #fff
}
.mp-featureCard__media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #f3f4f6
}
.mp-featureCard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
.mp-featureCard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px
}
.mp-featureCard__title {
  margin: 0;
  font-size: 18px
}
.mp-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: #eee
}
.mp-pill--pink {
  background: #ffe1ee;
  color: #b30057
}
.mp-pill--blue {
  background: #e4f1ff;
  color: #125aa7
}
.mp-pill--purple {
  background: #efeaff;
  color: #5c39c7
}
.mp-pill--gray {
  background: #eef2f7;
  color: #374151
}
.mp-featureCard__desc {
  margin: 0 0 6px;
  color: #374151
}
#special .mp-featureCard__desc {
  color: #8c6239;
}
.mp-featureCard__list {
  margin: 0 0 10px 18px
}
.mp-btn {
  display: inline-block;
  background: #E46380;
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px
}
.mp-btn--center {
  display: block; /* 1行占有にして */
  width: fit-content; /* ボタン幅は中身ぶんだけ */
  margin: 12px auto 0; /* 左右autoでセンター */
}
.mp-btn:hover {
  opacity: .9
}
/* Divider (wave) */
.mp-divider {
  display: grid;
  place-items: center;
  margin: 18px 0
}
.mp-divider__wave {
  width: 120px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8ec3, #a78bfa, #7bd1ff)
}
.mp-divider__label {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280
}
/* Voices head */
.mp-voicesHead__ttl {
  font-size: 20px;
  margin: 0 0 6px;
  text-align: center
}
.mp-voicesHead__desc {
  margin: 0 auto 10px;
  max-width: 720px;
  text-align: center;
  color: #374151;
  font-size: 13px
}
/* Cards */
.mp-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr
}
.mp-card {
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden
}
.mp-card__link {
  display: block;
  color: inherit;
  text-decoration: none
}
.mp-card__media {
  position: relative;
  aspect-ratio: 4/3;
  background: #f3f4f6
}
.mp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
.mp-card__media .mp-pill {
  position: absolute;
  left: 8px;
  bottom: 8px
}
.mp-card__body {
  padding: 10px 12px
}
.mp-card__title {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.4
}
.mp-card__meta {
  margin: 0 0 6px;
  color: #6b7280;
  font-size: 12px
}
.mp-miniBtn {
  display: inline-block;
  font-size: 12px;
  border: 1px solid var(--mp-border);
  padding: 6px 10px;
  border-radius: 999px
}
.mp-miniBtn:hover {
  background: #f9fafb
}
@media (min-width: 720px) {
  .mp-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
  }
  .mp-card__title {
    font-size: 16px
  }
}
/* Interviewer strip */
.mp-interviewer {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  padding: 10px;
  background: #fff
}
.mp-interviewer__img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  display: block
}
.mp-interviewer__cap {
  margin: 0 0 4px;
  font-size: 12px;
  color: #6b7280
}
.mp-interviewer__lead {
  margin: 0 0 6px;
  color: #374151;
  font-size: 13px
}
.mp-link {
  color: #2563eb;
  text-decoration: none
}
.mp-link:hover {
  text-decoration: underline
}
@media (min-width: 960px) {
  .mp-featureCard {
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
    padding: 16px
  }
  .mp-featureCard__title {
    font-size: 22px
  }
  /* 上だけレインボーライン */
  .mp-featureCard--rbTop {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mp-border);
  }
  .mp-featureCard--rbTop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 15px; /* ラインの太さ */
    background: linear-gradient(90deg, #ff8ec3, #a78bfa, #4ea7ff, #34d399, #facc15, #f97316, #ef4444);
  }
  .mp-voicesHead__ttl {
    font-size: 22px
  }
  .mp-interviewer {
    grid-template-columns: 92px 1fr;
    gap: 16px;
    padding: 14px
  }
  .mp-interviewer__img {
    width: 92px;
    height: 92px
  }
}
/* About text */
.mp-about {
  color: #374151
}
/* アクセシビリティ補助 */
.mp-visuallyHidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap
}
.mp-intro {
  padding: 2rem 1rem;
  background-color: #fafafa;
  border-bottom: 1px solid var(--mp-border);
  text-align: center;
}
.mp-intro__title {
  margin: 0 0 1rem;
}
.mp-intro__title img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 200px; /* PCで大きすぎる時の保険 */
}
.mp-intro__text {
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.8;
}
.mp-intro__lead {
  display: block;
  font-weight: 700; /* 太字 */
  font-size: 1.1rem; /* 上段は大きめ */
  color: #111; /* 濃い文字色 */
  margin-bottom: 1rem;
}
.mp-intro__desc {
  display: block;
  font-size: 0.95rem; /* 下段は少し小さく */
  color: #4d4d4d; /* 指定のグレー */
  line-height: 1.7;
}
@media (min-width: 960px) {
  .mp-intro__title {
    font-size: 2rem;
  }
  .mp-intro__text {
    font-size: 1.1rem;
  }
}
/* ===== Section Head (Special / Voices 共通) ===== */
.mp-sectionHead {
  text-align: center;
  margin: 0; /* 外側余白はゼロに */
  padding: 15px 0; /* ← 内側余白で上下15px */
}
.mp-sectionHead__logo {
  display: block;
  margin: 0 auto 0.5rem;
  width: 100%;
  max-width: 240px; /* スマホ：小さめ */
  height: auto;
}
@media (min-width: 960px) {
  .mp-sectionHead__logo {
    max-width: 300px; /* PC：幅400px */
  }
}
.mp-sectionHead__title {
  font-weight: 700; /* 太字 */
  font-size: 1.4rem;
  margin: 0;
  color: #111;
}
/* ===== Slider (Special) ===== */
.mp-featureCard__media {
  position: relative;
} /* 既存に追記してOK */
.mp-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mp-slider__track {
  display: flex;
  height: 100%;
  transition: transform .35s ease;
  touch-action: pan-y; /* 縦スクロールを担保 */
  will-change: transform;
}
.mp-slide {
  min-width: 100%;
  height: 100%;
}
.mp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 矢印 */
.mp-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--mp-border);
  background: rgba(255, 255, 255, .85);
  font-size: 24px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  user-select: none;
}
.mp-slider__prev {
  left: 8px;
}
.mp-slider__next {
  right: 8px;
}
.mp-slider__nav:hover {
  background: #fff;
}
/* ドット */
.mp-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.mp-slider__dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.mp-slider__dots button.is-active {
  background: #fff;
}
@media (hover:none) {
  /* モバイルで矢印が強すぎるなら少し薄めに */
  .mp-slider__nav {
    background: rgba(255, 255, 255, .7);
  }
}
/* Specialスライダー：枠の比率を固定して全スライドを統一表示 */
.mp-featureCard__media {
  position: relative; /* ←既に指定OK */
  aspect-ratio: 16/9; /* ★これを必ず付与（統一サイズの肝） */
  overflow: hidden; /* はみ出しを隠す */
  background: #000; /* 読み込み時/レタボ用の下地色（任意） */
}
/* ULのデフォルト余白を消す（高さ/位置ズレ防止） */
.mp-slider__track {
  margin: 0; /* ★追加 */
  padding: 0; /* ★追加 */
  list-style: none; /* ★追加 */
}
/* スライドと画像（このブロックは content.css の末尾に置くと確実です） */
.mp-slide {
  min-width: 100%;
  height: 100%;
}
.mp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 余白なく見せる（切れてOKならこちら） */
  object-position: center;
  display: block;
}
/* SPECIALカードをPCで80%に（中央寄せ） */
@media (min-width: 960px) {
  /* レインボー枠を付けたカードだけを対象にする場合 */
  .mp-featureCard--rb, .mp-featureCard--rbTop {
    width: 80%;
    margin-inline: auto; /* 左右中央寄せ */
  }
  /* もし SPECIAL セクションのカード全体に適用したいなら ↓ に切替 */
  /* .mp-feature .mp-featureCard{ width:80%; margin-inline:auto; } */
}
/* レインボーラインの太さを変えたい時にここだけで調整 */ :root {
  --mp-rb-thick: 8px; /* 上線の高さ（px） */
}
/* 上だけレインボーのカード：タイトルの中央寄せ＋上に余白 */
.mp-featureCard--rbTop .mp-featureCard__head {
  display: flex; /* 念のため明示 */
  flex-direction: column; /* タイトルとピルを縦積み */
  align-items: center; /* 中央寄せ */
  text-align: center;
  gap: 6px; /* タイトルとピルの間隔 */
}
/* レインボー線からタイトルまでの距離を確保 */
.mp-featureCard--rbTop::before {
  height: var(--mp-rb-thick); /* 上線の太さ（既存と整合） */
}
.mp-featureCard--rbTop .mp-featureCard__body {
  /* 既存のカード内パディングに、上線分＋余白分を追加 */
  padding-top: calc(16px + var(--mp-rb-thick) + 8px);
}
/* 全周レインボー版を使っている場合の保険（上だけより少し余裕） */
.mp-featureCard--rb .mp-featureCard__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.mp-featureCard--rb .mp-featureCard__body {
  padding-top: 20px;
}
/* SPECIAL 見出し（大きめ・中央寄せ） */
#special .mp-voicesHead--special {
  margin: 12px 0 20px;
  text-align: center;
}
#special .mp-voicesHead--special .mp-voicesHead__ttl {
  margin: 0 0 10px;
  font-weight: 900;
  font-size: clamp(14px, 2.6vw, 24px);
  line-height: 1.2;
  letter-spacing: .02em;
}
#special .mp-voicesHead--special .mp-voicesHead__desc {
  margin: 0 auto;
  max-width: 880px;
  font-size: 13px;
  color: #111;
}
:root {
  --mp-card-rb: 15px;
} /* ラインの太さ */
.mp-card {
  position: relative;
  overflow: hidden;
} /* 既存＋保険 */
.mp-card--rbTop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--mp-card-rb);
  background: linear-gradient(90deg, #ff8ec3, #a78bfa, #4ea7ff, #34d399, #facc15, #f97316, #ef4444);
  pointer-events: none;
}
/* Interviewカードの画像を枠いっぱいに */
.mp-card__media {
  margin: 0; /* ← figure のデフォルト余白(左右40pxなど)をリセット */
  display: block;
  width: 100%;
  /* 既存の aspect-ratio: 4/3; overflow:hidden; はそのままでOK */
}
.mp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 余白なしでフィット */
  display: block;
}
/* インタビューカード：レインボーを常に最前面に重ねる */ :root {
  --mp-card-rb: 8px;
} /* ラインの太さ（必要に応じて調整） */
.mp-card {
  position: relative;
  overflow: hidden;
} /* 角丸に沿って切り抜く */
.mp-card--rbTop {
  position: relative;
  padding-top: 0; /* 非オーバーレイ用に入れていた余白があれば無効化 */
}
/* ★ レインボーライン（画像より上に） */
.mp-card--rbTop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--mp-card-rb);
  background: linear-gradient(90deg, #ff8ec3, #a78bfa, #4ea7ff, #34d399, #facc15, #f97316, #ef4444);
  pointer-events: none;
  z-index: 3; /* ← 重なり順を明示的に最前面へ */
}
/* 中身（画像・本文）は通常レイヤーでOK。必要なら保険で z-index:1 を付与 */
.mp-card__media, .mp-card__body {
  position: relative;
  z-index: 1;
}
/* 画像は枠いっぱい・上で隠れないように（object-fitはお好みで） */
.mp-card__media {
  margin: 0;
  display: block;
  width: 100%;
  /* 既存の aspect-ratio:4/3; overflow:hidden; があればそのままでOK */
}
.mp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 余白なく表示（切れを避けるなら contain に変更） */
  display: block;
}
/* ===== Interview cards layout override ===== */
/* 基本：スマホは1列 */
.mp-cards {
  grid-template-columns: 1fr;
}
/* タブレット帯(720–959px)：1列を維持して3列指定を打ち消し */
@media (min-width: 720px) and (max-width: 959.98px) {
  .mp-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* PC(960px〜)：2列に */
@media (min-width: 960px) {
  .mp-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; /* お好みで調整 */
  }
}
/* Voices をPCで 80% に（中央寄せ） */
@media (min-width: 960px){
  /* 見出し/説明/カード/インタビュアー帯をまとめてセンター */
  #voices .mp-sectionHead,
  #voices .mp-voicesHead--voices,
  #voices .mp-cards,
  #voices .mp-interviewer{
    width: 80%;
    margin-inline: auto;
  }
}
/* ===== Special / Voices の横幅をモバイル90%・PC80%に ===== */

/* モバイル基準（〜959px）：90%幅＋中央寄せ */
#special .mp-sectionHead,
#special .mp-voicesHead--special,
#special .mp-featureCard,
#voices  .mp-sectionHead,
#voices  .mp-voicesHead--voices,
#voices  .mp-cards,
#voices  .mp-interviewer {
  width: 90%;
  margin-inline: auto;
}

/* PC（960px〜）：80%幅に上書き */
@media (min-width: 960px){
  #special .mp-sectionHead,
  #special .mp-voicesHead--special,
  #special .mp-featureCard,
  #voices  .mp-sectionHead,
  #voices  .mp-voicesHead--voices,
  #voices  .mp-cards,
  #voices  .mp-interviewer {
    width: 80%;
  }
}
/* ===== Voicesのカード全てに上部レインボーラインを付ける ===== */
:root { --mp-card-rb: 8px; } /* 太さはお好みで */

#voices .mp-card{
  position: relative;
  overflow: hidden;        /* 角丸に沿ってカット */
  border-radius: 14px;     /* 既存値と合わせる（保険） */
}

/* レインボー（常に最前面に重ねる） */
#voices .mp-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height: var(--mp-card-rb);
  background: linear-gradient(90deg,
    #ff8ec3, #a78bfa, #4ea7ff, #34d399, #facc15, #f97316, #ef4444);
  pointer-events:none;
  z-index: 3;
}

/* 中身は通常レイヤー（念のため） */
#voices .mp-card__media,
#voices .mp-card__body{
  position: relative;
  z-index: 1;
}

/* もし以前「非オーバーレイ版」で上余白を付けていたら消す */
#voices .mp-card{ padding-top: 0; }

/* ===== SPECIAL：カード上部に常にレインボーライン ===== */
:root { --mp-feature-rb: 8px; } /* ライン太さ */

#special .mp-featureCard{
  position: relative;
  overflow: hidden;          /* 角丸で綺麗に切り抜く */
  border-radius: 16px;       /* 既存値と合わせて保険 */
}

/* レインボーを最前面に重ねる */
#special .mp-featureCard::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--mp-feature-rb);
  background: linear-gradient(90deg,
    #ff8ec3, #a78bfa, #4ea7ff, #34d399, #facc15, #f97316, #ef4444);
  pointer-events: none;
  z-index: 10;               /* ← 子要素（画像/スライダー）より前へ */
}

/* 子要素は通常レイヤー（レインボーの下） */
#special .mp-featureCard__media,
#special .mp-featureCard__body,
#special .mp-slider{
  position: relative;
  z-index: 1;
}

/* もし以前「非オーバーレイ版」で上余白を足していたら打ち消す（任意） */
#special .mp-featureCard{ padding-top: 0; }          /* カード本体の余白は既定どおり */
#special .mp-featureCard__body{ padding-top: 16px; } /* 既定値に戻す/調整可 */

/* ===== SPECIAL：スマホで写真を枠いっぱいに ===== */
@media (max-width: 959.98px){
  #special .mp-featureCard{
    padding: 0;                 /* カード内の余白をなくす */
  }
  #special .mp-featureCard__media{
    margin: 0;                  /* ← figure の既定余白を消す（重要） */
    border-radius: 0;           /* 角は親の角丸に任せる */
    overflow: hidden;           /* 念のため */
  }
  #special .mp-featureCard__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 余白なしでフィット */
    display: block;
  }
  #special .mp-featureCard__body{
    padding: 12px;              /* 本文側にだけ余白 */
  }
}
/* ===== Voices: インタビューを見る ボタン（中央寄せ・青） ===== */
#voices .mp-card .mp-miniBtn,
#voices .mp-card a.mp-miniBtn {
  display: block;               /* 中央寄せのためブロック化 */
  width: fit-content;           /* 中身に合わせた幅 */
  margin: 12px auto 0;          /* 左右autoでセンター */
  padding: 10px 16px;           /* 既存より少し大きめでボタン感 */
  font-weight: 700;
  color: #fff;                  /* 文字は白 */
  background: #2563eb;          /* 青系メイン */
  border: 1px solid #1e40af;    /* 薄いアウトラインで視認性UP */
  border-radius: 999px;         /* まるいボタン */
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}

/* ホバー/フォーカス/アクティブ */
#voices .mp-card .mp-miniBtn:hover,
#voices .mp-card .mp-miniBtn:focus-visible {
  background: #1d4ed8;          /* 濃い青 */
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
#voices .mp-card .mp-miniBtn:active {
  background: #1e40af;          /* さらに濃い青 */
}

/* ボタンリンクの下線を常に消す（色も白を維持） */
a.mp-miniBtn,
.mp-btn {
  text-decoration: none;
}

/* pillが画像の上でも埋もれないように */
.mp-card__media .mp-pill { z-index: 2; }

/* ピルを常に読みやすく（濃いめのガラス） */
.mp-pill--hero{
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30)); /* ←黒寄りに */
  border: 1px solid rgba(255,255,255,.75);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  padding: 12px 16px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.6),   /* 影で縁取り */
    0 0 1px rgba(0,0,0,.35);
}
/* 左下固定（そのままでOK） */
.mp-card__media{ position: relative; }
.mp-card__media .mp-pill--hero{
  position: absolute; left: 8px; bottom: 8px; top: auto; right: auto; z-index: 2;
}

/* 画像の下30%をうっすら暗くする（常時ON） */
#voices .mp-card__media::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 32%;                                  /* 暗くする範囲：お好みで */
  background: linear-gradient(
    to top,
    rgba(0,0,0,.40), rgba(0,0,0,.00)
  );
  z-index: 1;                                    /* 画像の上 / ピルの下 */
  pointer-events: none;
}
/* すでに設定済みなら再掲：ピルはスクリムより前面に */
.mp-card__media .mp-pill{ z-index: 2; }


/* モバイルで少しだけ大きく（任意） */
@media (max-width: 719.98px){
  .mp-pill--hero, .mp-pill--grad { font-size: 14px; padding: 9px 14px; }
}

/* ピル（左下固定はそのまま） */
.mp-card__media { position: relative; }
.mp-card__media .mp-pill--hero{
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  /* はみ出し防止：左右の余白ぶんを引く */
  max-width: calc(100% - 24px);
  text-align: center;
  white-space: normal;              /* 2行OK */
  line-height: 1.25;
  word-break: keep-all;             /* 日本語の行分割を自然に */
  text-wrap: balance;               /* 対応ブラウザで行分割を最適化 */
}

/* サイズを画面に合わせて可変（最小/理想/最大） */
.mp-pill--hero{
  /* すでに入れている濃いめガラスの見た目はそのまま */
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30));
  border: 1px solid rgba(255,255,255,.75);
  color:#fff; font-weight:800; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  border-radius: 999px;

  /* ←ここが可変サイズ */
  font-size: clamp(14px, 2.2vw, 20px);
  padding: clamp(8px, 1.2vw, 12px) clamp(14px, 2.4vw, 22px);
}

/* backdrop-filter が効かない環境のフォールバック（任意） */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .mp-pill--hero{ background: rgba(0,0,0,.55); }
}

/* ===== インタビュアー紹介（TIF体裁・センター） ===== */
.mp-lead { margin: 16px 0 0; }
.mp-lead__txt{
  margin: 0 auto 12px;
  text-align: center;
  max-width: 820px;
  color: #374151;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.8;
}

/* 既存 .mp-interviewer をベースに、サイズ＆配置をモディファイ */
.mp-interviewer--center{
  width: 90%;                 /* スマホは 90% */
  margin: 0 auto;             /* 中央寄せ */
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 14px;
}
.mp-interviewer--center .mp-interviewer__img{
  width: 100px; height: 100px; border-radius: 50%;
}
.mp-interviewer--center .mp-interviewer__title{
  margin: 0 0 6px; font-size: 18px; font-weight: 700;
}
.mp-interviewer--center .mp-interviewer__desc{
  margin: 0; font-size: 14px; color: #374151; line-height: 1.7;
}

/* PCでは 60% 幅に。画像も少し大きく */
@media (min-width: 960px){
  .mp-interviewer--center{
    width: 60%;               /* ←ご要望の60% */
    grid-template-columns: 140px 1fr;
    padding: 18px;
  }
  .mp-interviewer--center .mp-interviewer__img{
    width: 140px; height: 140px;
  }
  .mp-interviewer--center .mp-interviewer__title{ font-size: 20px; }
  .mp-interviewer--center .mp-interviewer__desc{ font-size: 15px; }
}

/* ===== Interviewer (TIF style) ===== */
.mp-lead{ margin: 24px 0; }
.mp-lead__inner{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* スマホ：縦並び */
.mp-lead--split{ display: block; }
.mp-lead__txt{
  margin: 0 0 12px;
  color: #374151;
  line-height: 1.8;
  text-align: center;
}
.mp-lead__txt--lg{
  font-weight: 700;
  font-size: clamp(16px, 3.6vw, 20px);
  text-wrap: balance;
}

/* カード（右側） */
.mp-interviewer--card{
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  width: 100%;
  margin: 0 auto;
}
.mp-interviewer--card .mp-interviewer__img{
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block;
}
.mp-interviewer--card .mp-interviewer__title{
  margin: 0 0 6px; font-size: 18px; font-weight: 800;
}
.mp-interviewer--card .mp-interviewer__desc{
  margin: 0; font-size: 14px; color: #374151; line-height: 1.7;
}

/* PC：中央寄せ2カラム（TIF風）。全体80%、右カードは最大60%程度の見え感 */
@media (min-width: 960px){
  .mp-lead__inner{ width: 80%; }
  .mp-lead--split{
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* 左リードやや広め */
    gap: 28px;
    align-items: center;
  }
  .mp-lead__txt{ text-align: left; margin: 0; }
  .mp-interviewer--card{
    grid-template-columns: 92px 1fr;
    padding: 16px;
    max-width: 600px;          /* 見た目「60%くらい」に相当する上限 */
    justify-self: end;         /* 右カラムの右寄せ（中央寄せ感を保つ） */
  }
  .mp-interviewer--card .mp-interviewer__img{ width: 92px; height: 92px; }
  .mp-interviewer--card .mp-interviewer__title{ font-size: 20px; }
  .mp-interviewer--card .mp-interviewer__desc{ font-size: 15px; }
}
.mp-lead__inner{
  padding-top: 18px; margin-top: 12px; position: relative;
}
/* インタビュアー紹介：上に罫線 */
.mp-lead__inner::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background: linear-gradient(90deg,#ff8ec3,#a78bfa,#4ea7ff,#34d399,#facc15,#f97316,#ef4444);
  border-radius: 999px;
}
/* モバイルの横はみ出しを防ぐ基本ガード */
html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }

/* 画像・埋め込みは必ず親幅内に収める */
img, video, svg, canvas, iframe { max-width: 100%; height: auto; }

/* UL/OLの初期余白で横ズレしないように（スライダー対策も兼ねて） */
ul, ol { padding-left: 1.2em; }
.mp-slider__track { margin: 0; padding: 0; list-style: none; }

/* === スマホ時：SPECIAL/VOICESの見出しサイズを統一 === */
@media (max-width: 959.98px){
  #special .mp-voicesHead--special .mp-voicesHead__ttl,
  #voices  .mp-voicesHead--voices  .mp-voicesHead__ttl{
    font-size: clamp(16px, 5.2vw, 26px); /* ← 好みで微調整OK */
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .02em;
    margin-bottom: 10px;
  }
}