/* =====================================================================
   voice-interview.css — D03-D06「ご利用者の声 / インタビュー」詳細
   marker: .p-vint
   Mobile-first（375px基準）／ PCは @media (min-width:1024px)
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   コンテンツ部全体（level2の地・上部は山形）
   --------------------------------------------------------------------- */
.p-vint-content {
  --peak-h: 40px;   /* SP: 山の高さ40px（PCは72pxに上書き） */
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  /* KV(写真)→山の頂点まで SP:35px（PCは64pxに上書き） */
  margin-top: calc(35px + var(--peak-h));
  /* パンくずとの間は .l-breadcrumb の margin-top で確保 */
  margin-bottom: 0;
  background: var(--container-level2);
  /* 下角を角丸（上は山形ピークで覆う） */
  /* SPは角丸なし（下角丸はPCのみ） */
  border-radius: 0;
  /* 山形の頂点〜コンテンツの余白は .p-vint-intro 側で確保（PC:80px / SP:32px） */
  padding-top: 0;
  padding-bottom: var(--space-64);   /* ベージュ囲みの下パディング64px */
}
/* 上部の山形（中央が頂点・角丸付き。FigmaのTop形状） */
.p-vint-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--peak-h) + 1px);
  height: var(--peak-h);
  background: url(../img/vint-peak.svg) center bottom / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------------
   ヘッダー（人物写真＋左に半透明白パネルのタイトル）
   --------------------------------------------------------------------- */
.p-vint-hero {
  position: relative;
  width: 100%;
  /* SP: 画像は全幅・角丸なし */
  padding: 0;
}
.p-vint-hero__media {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  aspect-ratio: 375 / 400;
  border-radius: 0;
  overflow: hidden;
}
.p-vint-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.p-vint-hero__title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
  width: 280px;
  max-width: 86%;
  padding: var(--space-24);
  background: rgba(255, 255, 255, .64);
  border-radius: 0 var(--radius-40) var(--radius-40) 0;
  backdrop-filter: blur(2px);
}
.p-vint-hero__eyebrow {
  margin: 0;
  font-size: 32px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-vint-hero__name {
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
.p-vint-hero__name .p-vint-hon { font-size: 14px; }   /* 敬称「さん」は名前より小さく */
.p-vint-hero__rireki {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}

/* ---------------------------------------------------------------------
   全体ラッパー（中央寄せ・最大幅）
   --------------------------------------------------------------------- */
.p-vint-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}

/* ---------------------------------------------------------------------
   イントロ（名前＋歴＋ママ＋リード、クリーム角丸ボックス）
   --------------------------------------------------------------------- */
.p-vint-intro {
  padding-block: var(--space-32) 0;
}
.p-vint-intro__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}
/* 飾り（左右のアイコン。画像はページごとに --vint-deco-left / --vint-deco-right で指定） */
.p-vint-intro__box::before,
.p-vint-intro__box::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 48px; height: 72px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
.p-vint-intro__box::before {
  left: 12px;
  background-image: var(--vint-deco-left, url(../img/int-deco-veg.webp));
}
.p-vint-intro__box::after {
  right: 12px;
  background-image: var(--vint-deco-right, url(../img/int-deco-milk.webp));
}

/* インタビューごとの飾りアイコン（左 / 右） */
.p-vint--01 { --vint-deco-left: url(../img/vint-paprika.svg); --vint-deco-right: url(../img/vint-milk.svg); }
.p-vint--02 { --vint-deco-left: url(../img/vint-tomato.svg);  --vint-deco-right: url(../img/vint-radish.svg); }
.p-vint--03 { --vint-deco-left: url(../img/vint-tomato.svg);  --vint-deco-right: url(../img/vint-milk.svg); }
.p-vint--04 { --vint-deco-left: url(../img/vint-radish-02.svg);  --vint-deco-right: url(../img/vint-paprika.svg); }
/* SP(<=599px): 右のアクセントの位置・サイズ調整 */
@media (max-width: 599px) {
  /* 01さきさん・03あいかさん（牛乳パック） */
  .p-vint--01 .p-vint-intro__box::after,
  .p-vint--03 .p-vint-intro__box::after { width: 54px; height: 82px; top: -70px; }
  /* 02ありささん（野菜）は横幅のみ広め */
  .p-vint--02 .p-vint-intro__box::after { width: 66px; height: 82px; top: -70px; }
  /* 04（パプリカ） */
  .p-vint--04 .p-vint-intro__box::after { width: 52px; height: 76px; top: -70px; }
  /* 04の左アクセント（野菜02）はサイズのみ変更・位置は既定のまま */
  .p-vint--04 .p-vint-intro__box::before { width: 66px; height: 82px; }
}
.p-vint-intro__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.p-vint-intro__rireki {
  font-size: 14px;
  line-height: 1.6;
  font-weight: var(--fw-light);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-vint-intro__person {
  font-size: clamp(22px, 6vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
.p-vint-intro__person .p-vint-hon { font-size: 16px; }   /* 敬称「さん」は名前より小さく */
.p-vint-intro__family {
  font-size: 14px;
  line-height: 1.6;
  font-weight: var(--fw-light);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-vint-intro__text {
  width: 100%;
  background: var(--container-level1);
  border-radius: var(--radius-24);
  padding: var(--space-24);
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: .04em;
  font-weight: var(--fw-light);
  color: var(--text-default);
  text-align: left;   /* 名前の下のテキストは左寄せ（PC/SP共通・全ユーザー）。見出し/名前ブロックは中央のまま */
}
/* SP: イントロ調整 */
@media (max-width: 1023px) {
  /* 右のアクセント（ミルク）をボックス上に20pxはみ出す */
  .p-vint-intro__box::after { top: -20px; }
  /* 本文の白背景（利用のきっかけ等）: 角丸なし＋ブラウザ幅いっぱい（base(.p-vint-body)より後方＝詳細度で上書き） */
  .p-vint-inner .p-vint-body {
    border-radius: 0;
    width: calc(100% + var(--space-48));
    margin-inline: calc(var(--space-24) * -1);
  }
}

/* ---------------------------------------------------------------------
   セクション見出し（papurikaアイコン＋テキスト）
   --------------------------------------------------------------------- */
.p-vint-h {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: clamp(20px, 5.4vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-vint-h__icon {
  flex: none;
  width: 24px;
  height: auto;
}

/* ---------------------------------------------------------------------
   インタビュー本文
   --------------------------------------------------------------------- */
.p-vint-body {
  margin-top: var(--space-32);
  background: var(--container-white);
  border-radius: var(--radius-24);
  padding: var(--space-32) var(--space-24);
  display: flex;
  flex-direction: column;
  /* 区切り線の上下に64pxずつ（64 + 線13px + 64／SP） */
  gap: calc(var(--space-64) * 2 + 13px);
}
/* SP(<=599px): 本文カードの上下パディングは48px */
@media (max-width: 599px) {
  .p-vint-body { padding-block: var(--space-48); }
}

/* 共通：画像 */
.p-vint-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 240;
  object-fit: cover;
  border-radius: var(--radius-16);
}

/* プレースホルダ画像（グレー地＋ラベル中央） */
.p-vint-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 380 / 240;
  border-radius: var(--radius-16);
  background: var(--container-level2);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: var(--fw-light);
  text-align: center;
}

/* きっかけ／かわったところ：2カラム */
.p-vint-two {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.p-vint-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.p-vint-col__text,
.p-vint-style__text,
.p-vint-buy__lead,
.p-vint-buy__text {
  font-size: 16px;
  line-height: 1.9;
  font-weight: var(--fw-light);
  color: var(--text-default);
}

/* 注文スタイル */
.p-vint-style {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.p-vint-style .p-vint-img { aspect-ratio: 800 / 506; }

/* 配達について（テキスト＋配達トラックのイラスト。SP=下に中央／PC=右に配置） */
.p-vint-style--delivery {
  align-items: center;
  gap: var(--space-24);
}
.p-vint-style--delivery .p-vint-style__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}
.p-vint-style__track {
  display: block;
  width: 200px;
  height: auto;
  flex: none;
}

/* よく購入する商品 */
.p-vint-buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-vint-buy__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);   /* 商品間マージン24px */
}
/* カード（クリーム地・画像＋情報。SP=縦積み / PC=画像左・情報右） */
.p-vint-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  background: var(--container-highlight);
  border-radius: var(--radius-24);
  overflow: hidden;
}
.p-vint-item__img { width: 100%; }
.p-vint-item__img .p-vint-img,
.p-vint-item__img .p-vint-ph {
  width: 100%;
  aspect-ratio: auto;   /* 画像本来の比率で表示（トリミングしない） */
  border-radius: 0;
  object-fit: cover;
}
.p-vint-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0 var(--space-16) var(--space-24) var(--space-24);
}
.p-vint-item__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}
.p-vint-item__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.p-vint-item__name {
  font-size: 20px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
/* 容量（商品名末尾から切り出したグラム数・個数など）。PC/SP共通 14px */
.p-vint-item__vol {
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--fw-light);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-vint-item__unit {
  /* グラム・個数もタイトル（name）と同じ大きさ・太さで2行目に表示（font系はnameから継承） */
  display: block;
}
.p-vint-item__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  white-space: nowrap;
}
.p-vint-item__price-main {
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
.p-vint-item__price-tax {
  font-size: 14px;
  line-height: 1.57;
  font-weight: var(--fw-light);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-vint-item__thumb {
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-16);
  object-fit: cover;
}
/* サムネがプレースホルダの場合（span.p-vint-ph） */
.p-vint-item__thumb.p-vint-ph {
  aspect-ratio: auto;
  padding: var(--space-4);
  font-size: 10px;
  line-height: 1.4;
}
.p-vint-item__note {
  padding-top: var(--space-16);
  /* 上辺の破線区切り（#6B4311・破線4px/間隔6px/太さ1px）。dashedは長さ指定不可のためグラデで再現 */
  background: var(--divider-dashed) top left / 100% 1px no-repeat;
  font-size: 14px;
  line-height: 1.57;
  font-weight: var(--fw-light);
  letter-spacing: .04em;
  color: var(--text-default);
}

/* SP（≤599px）: 商品カード内テキスト・余白の調整。
   モバイルファーストのためベース定義（=SP値）より後方に置き確実に上書き */
@media (max-width: 599px) {
  .p-vint-item__info { gap: var(--space-12); }              /* 16px → 12px */
  .p-vint-item__name { font-size: 16px; }                  /* 20px → 16px（bold据え置き） */
  .p-vint-item__vol { font-size: 12px; }                   /* 14px → 12px */
  .p-vint-item__price-main { font-size: 14px; }            /* 16px → 14px（bold据え置き） */
  .p-vint-item__price-tax { font-size: 14px; }             /* 14px 据え置き */
  .p-vint-item__note { font-size: 12px; }                  /* 14px → 12px */
}

/* セクション間の区切り（Figma: 緑の斜めストライプ線） */
.p-vint-body > .p-vint-style,
.p-vint-body > .p-vint-buy,
.p-vint-body > .p-vint-comment {
  position: relative;
}
.p-vint-body > .p-vint-style::before,
.p-vint-body > .p-vint-buy::before,
.p-vint-body > .p-vint-comment::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* セクション上端から 64px + 線高さ 上 → 線の下に64px・上に64px（SP:13px） */
  top: calc(-1 * (var(--space-64) + 13px));
  height: 13px;
  /* SP: 縦を13pxに合わせ横は元比率のまま、左から繰り返して全幅を埋める（潰さない） */
  background: url(../img/green-line.webp) left center / auto 100% repeat-x;
}

/* ひとことコメント（クリーム地＋細枠の角丸ボックス） */
.p-vint-comment {
  background: var(--bg-default);
  border-radius: var(--radius-24);
  padding: var(--space-32) var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}
.p-vint-comment .p-vint-h { color: var(--text-secondary); justify-content: center; }
.p-vint-comment__text {
  font-size: 16px;
  line-height: 1.9;
  font-weight: var(--fw-light);
  color: var(--text-default);
  align-self: stretch;
  text-align: left;   /* 本文のみ左寄せ（PC/SP共通）。見出しは中央のまま */
}

/* ---------------------------------------------------------------------
   他の人のインタビューもみてみる
   --------------------------------------------------------------------- */
.p-vint-other {
  padding-block: var(--space-48) 0;   /* 下は.p-vint-content側の64pxで確保 */
}
.p-vint-other__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-24);
}
.p-vint-other__head {
  margin-bottom: var(--space-32);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
/* カード一覧はTOP（.p-voice）の「組合員の声」コンポーネントを流用（吹き出しSVGも共通）。
   SPはインナーのpadding(24px)に合わせて画面端まで横スクロール（full-bleed）にする */
@media (max-width: 1023px) {
  /* SP: TOP（.p-voice）と同様、セクションの左右paddingを除去して画面端まで横スクロール */
  .p-vint-other__inner { padding-inline: 0; }
  .p-vint-other__head { padding-inline: var(--space-24); }   /* 見出しは左右余白を維持 */
  .p-vint-other .p-voice__list {
    margin-inline: 0;
    padding-inline: var(--space-32);   /* 先頭カードの開始位置を32pxに */
  }
}
/* ユーザーページのみカードを縮小（TOPの.p-voiceは元サイズを維持）。SP/PC共通。 */
.p-vint-other .p-voice__bubble { font-size: 12px; }
.p-vint-other .p-voice__photo img { width: 150px; }
.p-vint-other .p-voice__list { gap: 0; }

/* =====================================================================
   PC（min-width:1024px）
   ===================================================================== */
@media (min-width: 1024px) {
  .p-vint-content { --peak-h: 72px; margin-top: calc(var(--space-64) + var(--peak-h)); border-radius: 0 0 var(--radius-40) var(--radius-40); }
  .p-vint-hero {
    padding-block: var(--space-64) 0;
    padding-inline: var(--space-24);
  }
  .p-vint-hero__media { aspect-ratio: auto; border-radius: var(--radius-40); }
  .p-vint-hero__media img { height: 400px; object-fit: cover; object-position: 65% center; }
  .p-vint-hero__title {
    left: 0;
    gap: var(--space-16);
    padding: var(--space-32) var(--space-40);
    width: 600px;
    border-radius: 0 var(--radius-40) var(--radius-40) 0;
  }
  .p-vint-hero__eyebrow { font-size: 40px; line-height: 1.45; letter-spacing: 0; }
  .p-vint-hero__name { font-size: 16px; line-height: 1.6; }
  .p-vint-hero__rireki { font-size: 14px; line-height: 1.6; letter-spacing: .04em; }

  .p-vint-inner { padding-inline: 120px; }   /* PC: 左右マージン120px固定 */
  /* 本文は白の角丸カード（960px・内側800pxはpaddingで確保）・中央寄せ */
  .p-vint-body {
    max-width: 960px;
    margin-inline: auto;
    margin-top: var(--space-48);
    border-radius: var(--radius-40);
    padding: var(--space-64) var(--space-80);
  }

  .p-vint-intro { padding-block: 0; }
  .p-vint-intro__box { padding: 0 120px; gap: var(--space-24); }
  /* PC: 飾りを名前の左右に大きく配置 */
  .p-vint-intro__box::before {
    top: -4px; left: 22%; transform: none;
    width: 72px; height: 104px;
  }
  .p-vint-intro__box::after {
    top: -4px; right: 22%; transform: none;
    width: 72px; height: 104px;
  }
  .p-vint-intro__text { max-width: 840px; padding: var(--space-24) var(--space-40); }

  .p-vint-body { gap: calc(var(--space-64) * 2 + 14px); }
  /* 区切り線（緑の点線画像）はPCで14px */
  .p-vint-body > .p-vint-style::before,
  .p-vint-body > .p-vint-buy::before,
  .p-vint-body > .p-vint-comment::before {
    top: calc(-1 * (var(--space-64) + 14px));
    height: 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* きっかけ／かわったところ：横2カラム */
  .p-vint-two {
    flex-direction: row;
    gap: var(--space-64);
  }
  .p-vint-col { flex: 1; min-width: 0; }

  /* 配達について：PCはテキスト左／イラスト右 */
  .p-vint-style--delivery { flex-direction: row; gap: var(--space-40); }
  .p-vint-style--delivery .p-vint-style__main { flex: 1; min-width: 0; }

  /* よく購入：カード（画像左／情報右・画像は高さいっぱい） */
  .p-vint-item {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-40);
  }
  .p-vint-item__img { flex: 1 0 0; min-width: 0; align-self: stretch; }
  .p-vint-item__img .p-vint-img,
  .p-vint-item__img .p-vint-ph {
    aspect-ratio: auto;
    height: 100%;
  }
  .p-vint-item__info {
    flex: 1 0 0;
    min-width: 0;
    gap: var(--space-24);
    padding: var(--space-40) var(--space-40) var(--space-40) 0;
  }
  .p-vint-item__row { gap: var(--space-24); }
  .p-vint-item__name { font-size: 20px; line-height: 1.7; letter-spacing: .04em; }
  .p-vint-item__thumb { width: 120px; height: 120px; }
  .p-vint-item__note { padding-top: var(--space-24); font-size: 16px; line-height: 1.625; letter-spacing: normal; }

  .p-vint-comment { padding: var(--space-48); }

  .p-vint-other { padding-block: var(--space-64) 0; }
  .p-vint-other__inner { padding-inline: var(--space-24); }
  .p-vint-other__head { margin-bottom: var(--space-48); }
}