/* =====================================================================
   D02 ご利用者アンケート (voice/questionnaire)  marker: .p-vq
   Mobile-first（375px基準）／ PCは @media (min-width:1024px)
   ===================================================================== */

.p-vq {
  background: var(--bg-default);
  color: var(--text-default);
  font-family: var(--font-base);
  font-weight: var(--fw-light);
}

/* ============ ヘッダー（写真＋タイトル） ============ */
.p-vq-hero {
  padding: 0;
}
.p-vq-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.p-vq-hero__media {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.p-vq-hero__media > picture { display: block; width: 100%; height: 100%; }
.p-vq-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* SP(<600px): KV画像は375×400比率で固定・object-fitなし（SP画像は375×400） */
@media (max-width: 599px) {
  .p-vq-hero__media { height: auto; aspect-ratio: 375 / 400; }
  .p-vq-hero__media img { object-fit: fill; }
}
.p-vq-hero__title {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-24);
  background: var(--container-white-alfa);
  border-radius: 0 var(--radius-24) var(--radius-24) 0;
  max-width: 280px;
}
.p-vq-hero__h {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 28px;   /* SP: KV見出しは28px固定（PCは40px） */
  line-height: 1.3;
  color: var(--text-secondary);
}
.p-vq-hero__sub {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-default);
}

/* ============ 設問セクション ============ */
.p-vq-q {
  padding: 0 0 var(--space-40);   /* SP: クエスチョン間=40px（PCは1024で上書き） */
}
.p-vq-q:last-child { padding-bottom: 0; }   /* 最終設問下の余白は .l-breadcrumb の margin-top で確保 */
/* 先頭Q（ヒーロー直後）はカード上にも余白を入れる。SP: KV→Q1=40px（PCは1024で72pxに上書き） */
.p-vq-hero + .p-vq-q {
  padding-top: var(--space-40);
}
.p-vq-q__inner {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--container-white);
  border-radius: 0;
  padding-inline: var(--space-24);
  padding-bottom: var(--space-40);
}
/* SP: 紹介ボタンを含む白カードは下48px（ボタン→白背景下辺）。PCは1024で64pxに上書き */
@media (max-width: 1023px) {
  .p-vq-q__inner:has(.p-vq-rec__btn) { padding-bottom: var(--space-48); }
}

/* ============ 設問見出し（Qバッジ＋テキスト） ============ */
.p-vq-ask {
  display: flex;
  flex-direction: column;   /* SP: 見出しは縦並び（バッジ上・中央）。PCは1024で横並びに */
  align-items: center;
  gap: var(--space-12);
  text-align: center;
  padding-top: var(--space-48);
}
.p-vq-ask__badge {
  flex: none;
  width: 90px;
  height: 90px;
  border-radius: var(--radius-full);
  background: var(--container-level1);
  display: grid;
  place-items: center;
}
.p-vq-ask__badge > b {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-full);
  background: #fefefe;
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: 1;
  color: var(--text-secondary);
}
.p-vq-ask__text {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.5;
  color: var(--text-default);
}
/* 見出しの改行はSPのみ（≥600pxでは1行） */
@media (min-width: 600px) { .p-vq-ask__sp-br { display: none; } }

/* ============ ランキング ============ */
.p-vq-rank {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  margin-top: var(--space-32);
}
.p-vq-rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-vq-rank__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  background: var(--container-white);
  border-radius: var(--radius-24);
  padding: var(--space-24) 0;
}
/* SP(<=599px): ランキングカードの上下パディングを削除 */
@media (max-width: 599px) {
  .p-vq-rank__item { padding-block: 0; }
}

/* 王冠＋順位 */
.p-vq-rank__crown {
  position: relative;
  width: 80px;
  height: 54px;
  display: block;
}
.p-vq-rank__crown > img {
  display: block;
  width: 80px;
  height: 54px;
}

/* 写真ブロブ（Q1：背景はカード白に合成済み） */
.p-vq-rank__blob {
  display: block;
  width: 100%;
  max-width: 256px;
}
.p-vq-rank__blob > img {
  display: block;
  width: 100%;
  height: auto;
}

/* ラベル */
.p-vq-rank__label {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--text-default);
  text-align: center;
}
.p-vq-rank__pct {
  display: block;
  font-size: 16px;
}

/* 補足文 ＋ 注釈 */
.p-vq-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: center;
}
.p-vq-note__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-default);
}
.p-vq-note__disc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* ============ 人気商品紹介 ============ */
.p-vq-rec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  margin-top: var(--space-40);
  /* SP: 白カードの左右padding(24)を打ち消して黄色背景を全幅に */
  margin-inline: calc(var(--space-24) * -1);
}
.p-vq-rec__card {
  width: 100%;
  background: var(--container-highlight);
  border-radius: 0;
  padding: var(--space-40) var(--space-24);   /* SP: 紹介カード上下40px（PCは1024で上書き） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}
.p-vq-rec__title {
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--text-secondary);
  text-align: center;
}
.p-vq-rec__cutlery {
  width: auto;
  height: 26px;
  flex: none;
}

.p-vq-rec__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
}
.p-vq-rec__photo {
  border-radius: var(--radius-24);
  overflow: hidden;
}
.p-vq-rec__photo > img {
  display: block;
  width: 100%;
  height: auto;
}
.p-vq-rec__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-vq-rec__head {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}
.p-vq-rec__heading {
  flex: 1 1 auto;
  min-width: 0;
}
.p-vq-rec__name {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .04em;
}
.p-vq-rec__vol {
  margin: 0;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-default);
}
.p-vq-rec__price {
  margin: var(--space-8) 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.p-vq-rec__price-main {
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: .04em;
}
.p-vq-rec__price-tax {
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-default);
}
.p-vq-rec__pkg {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-16);
  overflow: hidden;
}
.p-vq-rec__pkg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-vq-rec__line {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--divider-dashed);
}
.p-vq-rec__desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.p-vq-rec__catch {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.5;
}
.p-vq-rec__points {
  margin: 0;
  padding-left: 1.4em;
  list-style: disc;
}
.p-vq-rec__points > li {
  font-weight: var(--fw-light);
  font-size: 15px;
  line-height: 1.6;
}

/* 利用者の声（吹き出し） */
.p-vq-voice {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.p-vq-voice__user {
  flex: none;
  width: 64px;
  height: 64px;
}
.p-vq-voice__user > img {
  display: block;
  width: 100%;
  height: 100%;
}
.p-vq-voice__bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  background: var(--container-white);
  border-radius: var(--radius-16);
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16);
  font-weight: var(--fw-light);
  font-size: 12px;                 /* SP: 吹き出しテキスト12px（PCは1024で14pxに上書き） */
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-vq-voice__bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent var(--container-white) transparent transparent;
}

.p-vq-rec__btn {
  min-width: 280px;
}

/* SP（≤599px）: 紹介カード内テキスト・余白の調整。
   モバイルファーストのためベース定義（=SP値）より後方に置き確実に上書き */
@media (max-width: 599px) {
  .p-vq-rec__info { gap: var(--space-12); }                                  /* 24px → 12px */
  .p-vq-rec__name { font-size: 16px; line-height: 150%; }                    /* 20px → 16px / lh150%（bold据え置き） */
  .p-vq-rec__vol { font-size: 12px; margin-top: var(--space-4); }            /* 14px → 12px / 上に4px */
  .p-vq-rec__price-main { font-size: 14px; }                                 /* 16px → 14px（bold据え置き） */
  .p-vq-rec__price-tax { font-size: 14px; }                                  /* 14px 据え置き */
  .p-vq-rec__catch { font-size: 14px; }                                      /* 16px → 14px */
  .p-vq-rec__points > li { font-size: 12px; }                                /* 15px → 12px */
  /* info の gap を12pxにした分、利用者の声（voice）上だけ24pxに戻す */
  .p-vq-voice { margin-top: calc(var(--space-24) - var(--space-12)); }
}

/* =====================================================================
   PC（min-width:1024px）
   ===================================================================== */
@media (min-width: 1024px) {

  .p-vq-hero { padding-top: var(--space-64); }   /* ヘッダー→KVの間に64px */
  .p-vq-hero__media { height: 400px; border-radius: var(--radius-40); }
  .p-vq-hero__title {
    left: 0;
    padding: var(--space-32) var(--space-40);
    max-width: 600px;
    gap: var(--space-16);
  }
  .p-vq-hero__h { font-size: 40px; line-height: 58px; }
  .p-vq-hero__sub { font-size: 16px; line-height: 26px; }

  .p-vq-q { padding: 0 var(--container-pad) var(--space-40); }   /* クエスチョン間=40px */
  .p-vq-hero + .p-vq-q { padding-top: var(--space-72); }
  .p-vq-q__inner { padding-inline: var(--space-64); padding-bottom: var(--space-64); border-radius: var(--radius-40); }

  .p-vq-ask {
    padding-top: var(--space-64);
    flex-direction: row;              /* PC: バッジ左＋テキスト右の横並び */
    justify-content: center;
    gap: var(--space-16);
    text-align: left;
  }
  .p-vq-ask__text { font-size: 24px; line-height: 38px; letter-spacing: .04em; }

  /* ランキングを横3カラムに */
  .p-vq-rank__list {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-24);
  }
  .p-vq-rank__item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
    padding: var(--space-24) 0;
  }
  .p-vq-rank__list--photo .p-vq-rank__item { align-self: stretch; }
  .p-vq-rank__label { font-size: 20px; line-height: 1.6; }

  /* 補足文は左寄せ・横幅いっぱい */
  .p-vq-note__lead { width: 100%; text-align: left; }
  .p-vq-note__disc { width: 100%; }

  /* 人気商品紹介 */
  .p-vq-rec { margin-inline: 0; }
  .p-vq-rec__card { padding: var(--space-64) var(--space-64) var(--space-64); border-radius: var(--radius-24); }
  .p-vq-rec__body {
    flex-direction: row;
    gap: var(--space-40);
    align-items: flex-start;
  }
  .p-vq-rec__photo { flex: 1 1 0; min-width: 0; }
  .p-vq-rec__info  { flex: 1 1 0; min-width: 0; }
  .p-vq-rec__name { font-size: 20px; line-height: 34px; }
  .p-vq-rec__vol { font-size: 14px; line-height: 1.5; }
  .p-vq-rec__pkg { width: 120px; height: 120px; }
  .p-vq-rec__title { font-size: 24px; line-height: 38px; }
  .p-vq-voice__bubble { font-size: 14px; }
}