/* ==========================================================================
   product-style.css
   パンフェノン商品詳細ページ（page-pinfenon.php）専用スタイル
   デザイントークン：ネイビー #004183／コーラル #C63031
   フォント：Zen Old Mincho（見出し）／Zen Kaku Gothic New（本文）
   ※将来のB案（カスタム投稿タイプ＋single-product.php）移行時も
     このファイルをベースに流用予定
   2026-07-20：会社概要／Scientific Hubページと同様、本文が小さいとの指摘を受け
     全font-sizeを100%→120%へ一律スケールアップ（見出しはバランス調整のため
     個別に倍率を変更している箇所あり）
   2026-07-29：実物パッケージ表記「PINFENON」に合わせ、ラッパークラスを
     panfenon-product→pinfenon-productに統一（旧ファイルは削除済みのため、
     旧クラス名panfenon-productの併記は残していない）。
   ========================================================================== */

.pinfenon-product {
  --pf-navy: #004183;
  --pf-coral: #C63031;
  --pf-bg-soft: #F7F9FB;
  --pf-text: #262626;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: var(--pf-text);
  line-height: 1.8;
}

.pinfenon-product h1,
.pinfenon-product h2,
.pinfenon-product h3 {
  font-family: "Zen Old Mincho", serif;
  color: var(--pf-navy);
}

.pinfenon-product section > div {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- ヒーロー ---------- */
.pf-hero {
  background: #fff;
  padding: 48px 0 24px;
}
.pf-hero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.pf-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-hero__image img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}
.pf-hero__text {
  flex: 1;
  min-width: 260px;
}
.pf-hero__eyebrow {
  font-size: 1.02rem;
  color: var(--pf-coral);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.pf-hero__title {
  font-size: 2.88rem;
  margin: 0 0 16px;
}
/* 2026-08-08追加：「アレルナン（LPS含有）」のような正式名称＋補足表記のための
   小さめサブラベル。pf-hero__titleの子要素として使用（page-allernan.php等）。 */
.pf-hero__title-sub {
  display: inline-block;
  font-size: 0.42em;
  font-weight: 500;
  color: var(--pf-text);
  margin-left: 6px;
  vertical-align: middle;
}
.pf-hero__catch {
  font-size: 1.38rem;
  line-height: 1.9;
}

/* ---------- 前の製品／次の製品／製品一覧 ナビゲーション ----------
   ヘッダー直下・ヒーローより前に全幅の帯として表示する（product-template-parts.php の
   sc_render_product_nav() が出力、<main>を開いた直後で呼び出す）。
   2026-08-09：当初はpf-hero__inner内の第3カラム（旧back導線の位置）に統合していたが、
   実機確認で「もっと上・ヘッダー直下に」との指摘を受け、現在の配置に変更した。 */
.pf-product-nav {
  background: #fff;
  border-bottom: 1px solid #E5E9ED;
}
.pf-product-nav__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
}
.pf-product-nav__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.pf-product-nav__link--prev {
  align-items: flex-start;
  text-align: left;
}
.pf-product-nav__link--next {
  align-items: flex-end;
  text-align: right;
}
.pf-product-nav__dir {
  font-size: 0.8rem;
  color: var(--pf-coral);
  letter-spacing: 0.02em;
}
.pf-product-nav__name {
  font-family: "Zen Old Mincho", serif;
  font-size: 0.98rem;
  font-weight: bold;
  color: var(--pf-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pf-product-nav__list {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border-left: 1px solid #E5E9ED;
  border-right: 1px solid #E5E9ED;
  font-size: 0.85rem;
  color: var(--pf-navy);
  text-decoration: none;
  white-space: nowrap;
}
.pf-product-nav__list-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--pf-navy);
  border-radius: 3px;
  position: relative;
}
.pf-product-nav__list-icon::before,
.pf-product-nav__list-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  height: 1.5px;
  background: var(--pf-navy);
}
.pf-product-nav__list-icon::before { top: 4px; }
.pf-product-nav__list-icon::after { top: 8px; }

/* ---------- 固定表示は撤去（2026-08-09） ----------
   スマホでスクロール中にヘッダー直下へ固定表示する実装を複数回試みたが
   （ヘッダー連動での非表示、単純な常時sticky、いずれも実機で改善せず）、
   実機で確認するたびに悪化したとの報告を受け、リスクの高い固定系の実装を
   すべて撤去した。この帯は他のセクションと同様、通常の文書フローの一部として
   ヒーローの直前に一度表示され、スクロールで普通に流れていくだけの状態に戻す。
   固定表示が改めて必要になった場合は、実機で都度検証しながら再検討すること。 */

@media (max-width: 767px) {
  .pf-product-nav__inner {
    padding: 0 16px;
  }
  .pf-product-nav__link {
    padding: 10px 4px;
  }
  .pf-product-nav__dir {
    font-size: 0.72rem;
  }
  .pf-product-nav__name {
    font-size: 0.84rem;
  }
  .pf-product-nav__list {
    padding: 0 10px;
    font-size: 0;
  }
  .pf-product-nav__list-icon {
    margin: 0;
  }
}

/* ---------- リード文 ---------- */
.pf-lead {
  background: #fff;
  border-top: 1px solid #E5E9ED;
  border-bottom: 1px solid #E5E9ED;
  padding: 40px 0;
  text-align: center;
}
.pf-lead p {
  font-size: 1.26rem;
  max-width: 640px;
  margin: 0 auto;
  color: var(--pf-text);
}

/* ---------- 数字で見る実績（2026-07-20追加） ---------- */
.pf-stats {
  background: #fff;
  padding: 40px 0;
}
/* 【2026-08-27】TOP・会社概要・返金保証と同じ「25年／3,000×31／特許3件」3項目・並び順に統一
   （4項目→3項目、「3,000軒」「31カ国」を1つのcomboカードに融合）。 */
.pf-stats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.pf-stats__list li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pf-stats__num {
  display: block;
  font-family: "Zen Old Mincho", serif;
  color: var(--pf-coral);
  font-size: 2.04rem;
  font-weight: 700;
}
.pf-stats__num small {
  font-size: 1.08rem;
  margin-left: 1px;
}
/* combo項目（3,000×31）を他項目と同じfont-sizeのまま「数字／×／数字」3行積みにする確定パターン */
.pf-stats__num--combo {
  font-size: 2.04rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pf-stats__combo-line {
  line-height: 1.15;
}
.pf-stats__combo-sep {
  display: block;
  line-height: 1;
  margin: 1px 0;
  font-weight: 400;
  font-size: 0.5em;
}
.pf-stats__label {
  display: block;
  font-size: 0.94rem;
  margin-top: 4px;
  color: var(--pf-text);
}

/* ---------- 特長 ---------- */
.pf-features {
  background: var(--pf-bg-soft);
  padding: 56px 0;
}
.pf-section-title {
  text-align: center;
  font-size: 1.92rem;
  margin-bottom: 40px;
  position: relative;
}
.pf-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--pf-coral);
  margin: 12px auto 0;
}
.pf-section-title--left {
  text-align: left;
}
.pf-section-title--left::after {
  margin: 12px 0 0;
}
.pf-features__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.pf-features__item {
  background: #fff;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 65, 131, 0.06);
}
.pf-features__num {
  display: inline-block;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.68rem;
  color: var(--pf-coral);
  margin-bottom: 8px;
}
.pf-features__item h3 {
  font-size: 1.26rem;
  margin: 0 0 12px;
}
.pf-features__item p {
  font-size: 1.08rem;
  margin: 0;
}

/* ---------- 主要成分 ---------- */
.pf-ingredients {
  padding: 56px 0;
}
/* pf-features を持たないページ（urajiro-food/tricho-cure/rafinon-food/anyo-food）専用の境界線。
   直前のpf-statsも白背景のため、白同士の連続を境界線で回避 */
.pf-ingredients--alt {
  border-top: 1px solid #E5E9ED;
}
.pf-ingredients__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 2026-07-20：素材写真を追加できるレイアウトに変更。
   モバイルファースト＝デフォルトは写真が上・テキストが下の縦積み、
   640px以上で写真が左・テキストが右の横並びに（下記メディアクエリ参照）。
   写真が未配置（file_exists()がfalse）の場合は.pf-ingredients__photo自体が
   出力されないため、テキストのみの旧レイアウトと同じ見た目になる。 */
.pf-ingredients__item {
  background: var(--pf-bg-soft);
  border-left: 4px solid var(--pf-navy);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-ingredients__photo img {
  width: 100%;
  max-width: 160px;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.pf-ingredients__name {
  display: block;
  font-family: "Zen Old Mincho", serif;
  color: var(--pf-navy);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.pf-ingredients__desc {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.8;
}
@media (min-width: 640px) {
  .pf-ingredients__item {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  .pf-ingredients__photo {
    flex: 0 0 160px;
  }
  .pf-ingredients__photo img {
    margin: 0;
  }
}

/* ---------- 学会で認められた実績（2026-07-20追加） ---------- */
.pf-evidence {
  background: #fff;
  /* 直前のpf-ingredientsも白背景のため、境界線で区切って白同士の連続を回避（pf-leadと同じ手法） */
  border-top: 1px solid #E5E9ED;
  padding: 56px 0;
  text-align: center;
}
.pf-evidence__lead {
  font-size: 1.14rem;
  max-width: 560px;
  margin: 0 auto 24px;
}
.pf-evidence__list {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  max-width: 560px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-evidence__list li {
  background: var(--pf-bg-soft);
  border-left: 4px solid var(--pf-navy);
  padding: 12px 16px;
  font-size: 1.08rem;
  line-height: 1.7;
}
.pf-evidence__link {
  display: inline-block;
  color: var(--pf-navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--pf-navy);
}

/* ---------- 品質・安全性へのこだわり（2026-07-20追加） ---------- */
.pf-quality {
  background: var(--pf-bg-soft);
  padding: 56px 0;
  text-align: center;
}
.pf-quality__text {
  font-size: 1.14rem;
  line-height: 1.9;
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- 使用方法 ----------
   2026-07-20：粒の実物写真を追加できるレイアウトに変更。
   モバイルファースト＝デフォルトは写真が上・本文が下の縦積み、
   640px以上で写真が左・本文が右の横並びに。
   写真が未配置の場合は.pf-usage__inner--with-photoが付かず、旧レイアウト（写真なし）のまま。 */
.pf-usage__inner--with-photo {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pf-usage__photo img {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 65, 131, 0.12);
}
.pf-usage__inner--with-photo .pf-usage__body {
  flex: 1;
}
@media (min-width: 640px) {
  .pf-usage__inner--with-photo {
    flex-direction: row;
    align-items: flex-start;
  }
  .pf-usage__photo {
    flex: 0 0 260px;
  }
  .pf-usage__photo img {
    margin: 0;
  }
}

.pf-usage {
  background: #fff;
  padding: 56px 0;
}
/* pf-quality を持たないページ（page-pinfenon-first.php）専用の境界線。
   直前のpf-evidenceも白背景・直後のpf-faqは薄グレーのため、背景色を変えると
   今度はpf-faqと同色で衝突する。よって背景は白のまま境界線のみで区切る */
.pf-usage--alt {
  border-top: 1px solid #E5E9ED;
}
.pf-usage__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}
.pf-usage__subtitle {
  font-size: 1.2rem;
  color: var(--pf-navy);
  margin: 32px 0 16px;
}
.pf-usage__subtitle:first-of-type {
  margin-top: 0;
}
.pf-usage__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.pf-usage__table th,
.pf-usage__table td {
  padding: 12px 20px;
  text-align: left;
  font-size: 1.1rem;
  border-bottom: 1px solid #E5E9ED;
}
.pf-usage__table th {
  color: var(--pf-navy);
  font-weight: 700;
  width: 40%;
}
.pf-usage__text {
  font-size: 1.08rem;
  line-height: 1.9;
  margin: 0;
}

/* ---------- よくある質問 ---------- */
.pf-faq {
  background: var(--pf-bg-soft);
  padding: 56px 0;
}
.pf-faq__item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px 24px;
}
.pf-faq__item summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--pf-navy);
}
.pf-faq__item p {
  margin: 12px 0 0;
  font-size: 1.1rem;
}

/* ---------- ご愛用者様の声（動画）（2026-07-20追加） ----------
   公式YouTubeチャンネルのShorts動画（縦型）を想定し、9:16の縦長フレームで表示。
   position:absolute + inset:0のiframeをaspect-ratio指定の親要素に重ねる
   標準的なレスポンシブ動画埋め込みパターン。 */
.pf-video {
  background: #fff;
  /* 直前のpf-ctaも白背景のため、境界線で区切って白同士の連続を回避 */
  border-top: 1px solid #E5E9ED;
  padding: 56px 0;
  text-align: center;
}
.pf-video__frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 20px rgba(0, 65, 131, 0.12);
}
.pf-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.pf-video__note {
  font-size: 1.02rem;
  color: #666;
  max-width: 480px;
  margin: 16px auto 0;
  line-height: 1.8;
}

/* ---------- CTA ---------- */
.pf-cta {
  padding: 64px 0 80px;
  text-align: center;
}
/* pf-faqを持たないページ（urajiro-food/rafinon-food/anyo-food）専用の背景反転。
   直前がpf-usage（白）のため、白同士の連続を避けるために薄グレーにする */
.pf-cta--alt {
  background: var(--pf-bg-soft);
}
.pf-cta__button {
  display: inline-block;
  background: var(--pf-coral);
  color: #fff;
  font-weight: 700;
  font-size: 1.32rem;
  padding: 18px 56px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.pf-cta__button:hover {
  opacity: 0.85;
  color: #fff;
}
.pf-cta__note {
  margin-top: 16px;
  font-size: 1.02rem;
  color: #666;
}
/* 2026-07-28：60日間返金保証の導線（CTAボタン上のバッジ＋リンク） */
/* 2026-08-20：大川社長ご要望により視認性を強化（テロップ施策と合わせた対応）。
   文言・リンク先は変更せず、囲み枠＋アクセントカラーで目立たせる方向のみ調整。 */
.pf-cta__guarantee {
  margin: 0 0 22px;
  font-size: 1.02rem;
}
.pf-cta__guarantee a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--pf-navy, #004183);
  text-decoration: none;
  font-weight: 700;
  background: #f3f7fc;
  border: 1px solid #d7e3f2;
  border-left: 4px solid #C63031;
  border-radius: 10px;
  padding: 14px 18px;
  line-height: 1.5;
  transition: background .2s ease, border-color .2s ease;
}
.pf-cta__guarantee a:hover {
  opacity: 1;
  background: #eaf1fa;
  border-color: #c7d8ec;
}
.pf-cta__guarantee-badge {
  display: inline-block;
  background: var(--pf-navy, #004183);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 5px 18px;
  vertical-align: 1px;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 767px) {
  .pf-hero__inner {
    flex-direction: column;
    text-align: center;
  }
  .pf-hero__title {
    font-size: 2.28rem;
  }
  .pf-features__list {
    grid-template-columns: 1fr;
  }
  /* 【2026-08-27】4項目→3項目化に伴い、2カラム(2x2)固定は廃止。3カラムのまま維持。 */
}

/* ---------- PC表示：文字サイズを95%に調整（2026-07-20） ----------
   モバイルは現状（120%スケール）のまま据え置き、768px以上のPC表示のみ
   文字を約5%縮小して情報量とのバランスを取る。 */
@media (min-width: 768px) {
  .pf-hero__eyebrow { font-size: 0.97rem; }
  .pf-hero__title { font-size: 2.74rem; }
  .pf-hero__catch { font-size: 1.31rem; }
  .pf-lead p { font-size: 1.2rem; }
  .pf-stats__num { font-size: 1.94rem; }
  .pf-stats__num--combo { font-size: 1.94rem; }
  .pf-stats__num small { font-size: 1.03rem; }
  .pf-stats__label { font-size: 0.89rem; }
  .pf-section-title { font-size: 1.82rem; }
  .pf-features__num { font-size: 1.6rem; }
  .pf-features__item h3 { font-size: 1.2rem; }
  .pf-features__item p { font-size: 1.03rem; }
  .pf-ingredients__name { font-size: 1.14rem; }
  .pf-ingredients__desc { font-size: 1.03rem; }
  .pf-evidence__lead { font-size: 1.08rem; }
  .pf-evidence__list li { font-size: 1.03rem; }
  .pf-quality__text { font-size: 1.08rem; }
  .pf-usage__subtitle { font-size: 1.14rem; }
  .pf-usage__table th,
  .pf-usage__table td { font-size: 1.05rem; }
  .pf-usage__text { font-size: 1.03rem; }
  .pf-faq__item p { font-size: 1.05rem; }
  .pf-cta__button { font-size: 1.25rem; }
  .pf-cta__note { font-size: 0.97rem; }
  .pf-video__note { font-size: 0.97rem; }
}