@charset "UTF-8";

/* ========================================
    先輩の声 詳細（page-voice-0X）
    ======================================== */

.voice-detail {
  /* 子孫の position: sticky を効かせるため overflow は付けない */
  background: url(../img/common/backgraund-02.webp) repeat top left / 400px 400px;
  /* Q&A の色（人物ごとにモディファイアで切替）
     head=回答見出し / line=質問の下線 / fv-bg=FV 背景画像 */
  --qa-head-color: var(--color-voice-teal-deep);
  --qa-line-color: var(--color-voice-teal);
  --fv-bg: url(../img/voice/green-bg.webp);
}

.voice-detail--blue {
  --qa-head-color: var(--color-voice-teal-deep);
  --qa-line-color: var(--color-voice-teal);
  --fv-bg: url(../img/voice/green-bg.webp);
}

.voice-detail--pink {
  --qa-head-color: var(--color-voice-pink-text);
  --qa-line-color: var(--color-voice-pink);
  --fv-bg: url(../img/voice/pink-bg.webp);
}

.voice-detail--yellow {
  --qa-head-color: var(--color-voice-yellow-text);
  --qa-line-color: var(--color-voice-yellow);
  --fv-bg: url(../img/voice/yellow-bg.webp);
}


/* ---- FV ---- */
.voice-detail-fv {
  /* 当院について（.m-page-fv）と同じく左右に余白を取る */
  padding: 131px 3.1vw 0;
}

@media (max-width: 600px) {
  .voice-detail-fv {
    padding-top: 99px;
  }
}

.voice-detail-fv__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 40px;
  padding: 10px 56px 0;
  background: var(--fv-bg) center center / cover no-repeat;
  border-radius: 32px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .voice-detail-fv__inner {
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 0;
    gap: 32px;
    border-radius: 24px;
  }
}

.voice-detail-fv__ttl {
  position: relative;
  z-index: 2;
  align-self: center;
  flex-shrink: 0;
  width: 50%;
  max-width: 540px;
}

@media (max-width: 768px) {
  .voice-detail-fv__ttl {
    width: 88%;
    max-width: 440px;
  }
}

.voice-detail-fv__ttl img {
  width: 100%;
  height: auto;
}

.voice-detail-fv__photo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 46%;
  max-width: 520px;
}

@media (max-width: 768px) {
  .voice-detail-fv__photo {
    width: 88%;
    max-width: 440px;
  }
}

.voice-detail-fv__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1072 / 922;
  object-fit: cover;
  vertical-align: bottom;
}


/* ---- Q&A 共通 ---- */
.voice-qa {
  position: relative;
  padding-top: min(11vw, 165px);
  padding-bottom: min(15vw, 204px);
}

.voice-qa__inner {
  display: flex;
  align-items: stretch; /* media 列を本文の高さまで伸ばし sticky の可動域を確保 */
  gap: 4.4vw;
}

@media (max-width: 768px) {
  .voice-qa__inner {
    flex-direction: column;
    gap: 40px;
  }
}

.voice-qa__media {
  position: relative;
  flex-shrink: 0;
  width: 40%;
}

@media (max-width: 768px) {
  .voice-qa__media {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
}

.voice-qa__photo {
  position: sticky;
  top: 120px;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .voice-qa__photo {
    position: static;
  }
}

.voice-qa__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.voice-qa__body {
  flex: 1;
  min-width: 0;
}


/* ---- Q&A アイテム ---- */
.voice-qa__item:not(:last-child) {
  margin-bottom: 48px;
}

.voice-qa__q {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--qa-line-color);
  font-family: var(--font-gothic);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-heading);
  font-size: clamp(18px, 1.667vw, 24px);
}

.voice-qa__q-mark {
  flex-shrink: 0;
  font-family: var(--font-secondary);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  font-size: clamp(22px, 2.5vw, 36px);
}

.voice-qa__head {
  margin-top: 24px;
  font-family: var(--font-gothic);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--qa-head-color);
  font-size: clamp(18px, 1.667vw, 24px);
}

.voice-qa__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--color-gray-dark);
}

@media (max-width: 600px) {
  .voice-qa__text {
    font-size: 15px;
  }
}

.voice-qa__list {
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

.voice-qa__list-item {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--color-gray-dark);
}

@media (max-width: 600px) {
  .voice-qa__list-item {
    font-size: 15px;
  }
}

.voice-qa__list-item::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qa-head-color);
}

.voice-qa__photo-inline {
  margin-top: 24px;
  overflow: hidden;
  border-radius: 16px;
}

.voice-qa__photo-inline img {
  display: block;
  width: 100%;
  height: auto;
}

.voice-qa__dummy {
  margin-top: 24px;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-gray);
  border-radius: 8px;
}


/* ---- ワイド写真バンド ---- */
.voice-detail__wide {
  position: relative;
  overflow: hidden;
}

.voice-detail__wide-img {
  width: 90vw;
  margin-left: auto;
  overflow: hidden;
  border-radius: 32px 0 0 32px;
}

@media (max-width: 600px) {
  .voice-detail__wide-img {
    border-radius: 16px 0 0 16px;
  }
}

.voice-detail__wide-img img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---- 締めメッセージ（Q&A② 本文内） ---- */
.voice-message__img {
  margin-top: 16px;
}

.voice-message__img img {
  width: 100%;
  height: auto;
}


/* ---- 一覧に戻る ---- */
.voice-back {
  margin-top: 110px;
  text-align: center;
}

@media (max-width: 600px) {
  .voice-back {
    margin-top: 64px;
  }
}

.voice-back .m-btn {
  background: #FFAF6A;
}

.voice-back .m-btn:hover {
  background: #ff9d4a;
}

.voice-back .m-btn__icon {
  background-image: url(../img/common/arrow-orange.svg);
}