/* =====================================================================
   voice-top.css — D01「ご利用者の声」TOP
   marker: .p-vtop
   Mobile-first（375px基準）／ PCは @media (min-width:1024px)
   ===================================================================== */

.p-vtop {
  background-color: var(--bg-default);
}

/* ---------------------------------------------------------------------
   ヘッダー写真（全幅・長方形画像＋下部中央の山型装飾）
   --------------------------------------------------------------------- */
.p-vtop-photo { position: relative; width: 100%; }
.p-vtop-photo > picture img {
  display: block;
  width: 100%;
  height: auto;
}
/* 画像下部中央の山型装飾（背景色と同色でくり抜きに見せる。特徴TOPと同構成） */
.p-vtop-photo__mountain {
  position: absolute;
  left: 50%;
  bottom: -2px;               /* 継ぎ目のヘアラインを防ぐ */
  width: 320px;               /* SP: 横幅320px固定（比率維持） */
  transform: translateX(-50%);
  pointer-events: none;
}
.p-vtop-photo__mountain img { width: 100%; height: auto; }
.p-vtop-photo__mountain-pc { display: none; }
.p-vtop-photo__mountain-sp { display: block; }
/* KV画像の切替(600px)に合わせて山型も切替 */
@media (min-width: 600px) {
  .p-vtop-photo__mountain { width: 640px; }  /* PC: 横幅640px固定（比率維持） */
  .p-vtop-photo__mountain-pc { display: block; }
  .p-vtop-photo__mountain-sp { display: none; }
}

/* Hope マスコット（アンケート右上の装飾） */
.p-vtop-hope {
  position: absolute;
  z-index: 2;
  width: 126.5px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  top: -97px;               /* SP: 赤ちゃん(幅115px)の下端が白カードに20pxかぶる（PCは1024で上書き） */
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   共通：セクション枠
   --------------------------------------------------------------------- */
.p-vtop-sec__inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0;
}

/* SP: アンケート／インタビューを全幅の白背景で囲む（角丸なし。PCで角丸＋padding64に） */
.p-vtop-quest,
.p-vtop-sec__panel {
  background-color: var(--container-white);
  padding: var(--space-32) var(--space-24);
}
/* SP: アンケートカードの上下パディングを55pxに */
.p-vtop-quest { padding-block: 55px; }

/* ---------------------------------------------------------------------
   ヘッダー（タイトル＋リード）
   --------------------------------------------------------------------- */
.p-vtop-hero {
  padding-block: 5px 0;                 /* SP: 上5px（KV→見出し）/ 下はアンケートsec側で確保 */
  padding-inline: var(--space-24);
}
.p-vtop-hero__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.p-vtop-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}
.p-vtop-hero__eyebrow {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-vtop-hero__coop { width: 64px; height: auto; }
.p-vtop-hero__heading {
  margin-top: var(--space-4);
  font-size: clamp(24px, 6.4vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.p-vtop-hero__lead {
  margin-top: 50px;                     /* SP: 見出し→リード50px（PCは1024で40pxに上書き） */
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: center;
  color: var(--text-default);
}
.p-vtop-hero__lead-h {
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1.55;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-vtop-hero__lead-t {
  font-size: 16px;
  line-height: 1.7;
  font-weight: var(--fw-light);
}

/* ---------------------------------------------------------------------
   セクション（アンケート／インタビュー）
   --------------------------------------------------------------------- */
.p-vtop-sec {
  padding-block: 120px 0;   /* SP: リード→アンケート白カード=120px（PCは1024で65pxに上書き） */
}
.p-vtop-sec--interview {
  /* SP: 上40px / 下40px。パンくずol上padding24pxと合わせて白背景→パンくず=64px（PCは1024で120pxに上書き） */
  padding-block: var(--space-40) var(--space-40);
}
.p-vtop-sec__heading {
  margin-bottom: var(--space-24);
  text-align: center;
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1.4;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------
   アンケート（白カード）
   --------------------------------------------------------------------- */
.p-vtop-quest {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-align: center;
}
.p-vtop-quest__media {
  border-radius: var(--radius-16);
  overflow: hidden;
}
.p-vtop-quest__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 327 / 207;
  object-fit: cover;
}
.p-vtop-quest__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.p-vtop-quest__title {
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.p-vtop-quest__text {
  font-size: 16px;
  line-height: 1.7;
  font-weight: var(--fw-light);
  letter-spacing: .02em;
  color: var(--text-default);
}
.p-vtop-quest__btn {
  width: 100%;
}

/* ---------------------------------------------------------------------
   インタビュー・グリッド
   --------------------------------------------------------------------- */
.p-vtop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}
.p-vtop-card {
  display: flex;
  flex-direction: column;
}
.p-vtop-card__photo {
  border-radius: var(--radius-24);
  overflow: hidden;
}
.p-vtop-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 504 / 320;
  object-fit: cover;
}
.p-vtop-card__body {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.p-vtop-card__title {
  font-size: 16px;
  line-height: 1.7;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-vtop-card__meta {
  font-size: 14px;
  line-height: 1.57;
  font-weight: var(--fw-light);
  letter-spacing: .04em;
  color: var(--text-muted);
}
.p-vtop-card__text {
  font-size: 14px;
  line-height: 1.57;
  font-weight: var(--fw-light);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-vtop-card__btn {
  margin-top: var(--space-24);
  width: 100%;
}

/* =====================================================================
   SP／タブレット（max-width:1023px）余白調整
   ===================================================================== */
@media (max-width: 1023px) {
  /* アンケート: 写真→ボタン=40px（見出し→写真=24pxは維持。gapを廃し明示margin） */
  .p-vtop-quest { gap: 0; }
  .p-vtop-quest__media { margin-top: var(--space-24); }
  .p-vtop-quest__btn { margin-top: 40px; }
  /* インタビュー白カードの上下パディング=48px */
  .p-vtop-sec__panel { padding-block: var(--space-48); }
  /* インタビュー見出し→写真=30px */
  .p-vtop-sec__heading { margin-bottom: 30px; }
  /* 各インタビュー: テキスト→ボタン=48px */
  .p-vtop-card__btn { margin-top: var(--space-48); }
  /* 各インタビュー間=64px */
  .p-vtop-grid { gap: var(--space-64); }
}

/* =====================================================================
   PC（min-width:1024px）
   ===================================================================== */
@media (min-width: 1024px) {
  .p-vtop-hero {
    padding-block: 5px 0;                 /* 上から5px（KV→見出し）/ 下の余白はアンケートsec側で確保 */
    padding-inline: var(--space-80);
  }
  .p-vtop-hope {
    width: 187px;
    left: auto;
    right: -20px;
    transform: none;
    top: -150px;
  }
  .p-vtop-hero__heading {
    white-space: nowrap;
  }
  .p-vtop-hero__lead { margin-top: var(--space-40); }

  .p-vtop-sec { padding-block: 65px 0; }                                        /* hero下→アンケートカード=65px */
  .p-vtop-sec--interview { padding-block: var(--space-40) 0; }                  /* 白背景間=40px／page下の余白は.l-breadcrumbのmargin-topで確保 */
  .p-vtop-sec__heading { margin-bottom: var(--space-64); }                      /* 見出し→写真=64px */

  /* インタビュー：アンケート同様に幅1200pxの白背景カードで囲う */
  .p-vtop-sec__panel {
    background-color: var(--container-white);
    border-radius: var(--radius-40);
    padding: var(--space-64);
  }

  /* アンケート：白カード横並び（テキスト左／画像右） */
  .p-vtop-quest {
    display: grid;
    grid-template-columns: 1fr 460px;
    grid-template-rows: auto auto;
    column-gap: var(--space-80);
    row-gap: var(--space-40);
    align-items: center;
    justify-items: start;
    text-align: left;
    background-color: var(--container-white);
    border-radius: var(--radius-40);
    padding: var(--space-64);
  }
  .p-vtop-quest__head {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .p-vtop-quest__btn {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 280px;
  }
  .p-vtop-quest__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 460px;
    border-radius: var(--radius-24);
  }
  .p-vtop-quest__media img { aspect-ratio: 460 / 290; }

  /* インタビュー：2カラム */
  .p-vtop-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-64) var(--space-64);
  }
  .p-vtop-card {
    flex: 1 1 calc(50% - var(--space-32));
    max-width: calc(50% - var(--space-32));
    align-items: center;
  }
  .p-vtop-card__photo,
  .p-vtop-card__body { width: 100%; }
  .p-vtop-card__btn { width: 288px; }
}