@charset "UTF-8";
/* ============================================================
   食品から探す・工程別フロー（公開ページ）
   仮実装用の最小スタイル。既存 common 系のトーンに寄せた素朴なマークアップ。
   ============================================================ */

.pf-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* --- 見出し・セクション --- */
.pf-section__title {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 16px;
  padding-left: 12px;
  border-left: 4px solid #e60012;
}

.pf-empty {
  padding: 32px 16px;
  text-align: center;
  color: #666;
}

/* --- ヒーロー --- */
.pf-hero {
  text-align: center;
  padding: 24px 0;
}
.pf-hero__eyebrow {
  font-size: 14px;
  color: #e60012;
  font-weight: 700;
}
.pf-hero__title {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0;
}
.pf-hero__lead {
  font-size: 15px;
  color: #555;
}
.pf-hero__img {
  max-width: 480px;
  margin: 16px auto 0;
}
.pf-hero__img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --- フリーワード検索 --- */
.pf-search {
  margin: 16px 0 32px;
}
.pf-search__form {
  display: flex;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
}
.pf-search__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.pf-search__btn {
  padding: 12px 24px;
  background: #e60012;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}

/* --- ボタン --- */
.pf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 24px 0;
}
.pf-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.pf-btn--primary {
  background: #e60012;
  color: #fff;
}
.pf-btn--outline {
  background: #fff;
  color: #e60012;
  border: 1px solid #e60012;
}
.pf-btn--anchor {
  background: #333;
  color: #fff;
}
.pf-btn--cta {
  background: #f39800;
  color: #fff;
  font-size: 17px;
  padding: 14px 40px;
}

/* --- カードグリッド（食品選択・商品種別） --- */
.pf-grid__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pf-card {
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow .2s;
}
.pf-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.pf-card__img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  overflow: hidden;
}
.pf-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-card__noimg {
  color: #aaa;
  font-size: 13px;
}
.pf-card__body {
  padding: 12px;
  text-align: center;
}
.pf-card__name {
  display: block;
  font-weight: 700;
  font-size: 15px;
}
.pf-card__sub {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* --- 全体画像 --- */
.pf-whole__img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --- 効果カード（IoT・衛生フローページの特長1〜5。全体画像の下に横並び） --- */
.pf-effects {
  margin: 24px 0 0;
}
/* カードは1〜5枚で可変。枚数分で均等割りにし、狭い画面では折り返す */
.pf-effects__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-effects__item {
  flex: 1 1 180px;
  padding: 16px;
  border: 1px solid #b9cdea;
  border-radius: 8px;
  background: #fff;
}
.pf-effects__title {
  margin: 0 0 10px;
  color: #1a3a6e;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.pf-effects__body {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-effects__body li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.7;
}
.pf-effects__body li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1a3a6e;
}

/* --- 工程単体カード --- */
.pf-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pf-step-card {
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
a.pf-step-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.pf-step-card--nolink {
  opacity: .85;
  cursor: default;
}
.pf-step-card__img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  overflow: hidden;
}
.pf-step-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-step-card__body {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-step-card__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #e60012;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.pf-step-card__name {
  font-weight: 700;
  font-size: 14px;
}

/* --- ギャラリー（包装形態・製品例） --- */
.pf-gallery__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pf-gallery__list img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --- 特長 --- */
.pf-feature__body {
  line-height: 1.8;
}

/* --- FOOD TOWN支援セクション --- */
.pf-support {
  margin: 48px 0;
  padding: 32px 24px;
  background: #f7f7f7;
  border-radius: 8px;
  text-align: center;
}
.pf-support__lead {
  font-size: 16px;
  margin-bottom: 16px;
}
.pf-support__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}
.pf-support__reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pf-support__reasons li {
  background: #fff;
  border-radius: 8px;
  padding: 20px 16px;
}
.pf-support__no {
  display: block;
  color: #e60012;
  font-weight: 700;
  margin-bottom: 8px;
}

/* --- 課題相談CTA --- */
.pf-cta {
  text-align: center;
  margin: 48px 0 0;
}
.pf-cta__lead {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* --- 商品種別ページ（サイドバー＋メイン） --- */
.pf-step-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
.pf-sidebar {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.pf-sidebar__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e60012;
}
.pf-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pf-sidebar__item {
  position: relative;
  border-bottom: 1px solid #eee;
}
.pf-sidebar__step {
  display: block;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pf-sidebar__item.is-current > .pf-sidebar__step {
  color: #e60012;
  font-weight: 700;
}
/* 種別ブロック（IoTから探す／衛生から探す）。見出しクリックで種別別ページへ遷移 */
.pf-sidebar__block {
  margin-bottom: 16px;
}
.pf-sidebar__blockhead {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}
.pf-sidebar__blockhead a {
  color: #156082;
  text-decoration: none;
}
.pf-sidebar__blockhead a:hover {
  text-decoration: underline;
}
.pf-sidebar__popup {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 8px 8px 20px;
}
.pf-sidebar__item:hover .pf-sidebar__popup,
.pf-sidebar__item:focus-within .pf-sidebar__popup {
  display: block;
}
.pf-sidebar__popup li {
  padding: 4px 0;
}
.pf-sidebar__popup a {
  font-size: 13px;
  color: #333;
  text-decoration: none;
}
.pf-sidebar__popup a:hover {
  color: #e60012;
  text-decoration: underline;
}
.pf-step-main__title {
  margin-top: 0;
}
.pf-step-main__back {
  margin-top: 32px;
  text-align: center;
}
/* ID未指定の商品種別一覧: 種別・工程ごとのグルーピング見出し */
.pf-step-group {
  margin-bottom: 28px;
}
.pf-step-group__type {
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid #156082;
}
.pf-step-group__step {
  margin: 16px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

/* --- 工程PRページ --- */
.pf-pr-label {
  display: inline-block;
  background: #e60012;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 3px;
}
.pf-pr-company {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.pf-pr-company__logo img {
  max-height: 60px;
  width: auto;
}
.pf-pr-company__name {
  font-weight: 700;
  font-size: 16px;
}
.pf-pr-company__name a {
  color: #333;
}
.pf-pr-product__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.pf-pr-product__img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.pf-pr-product__maker {
  color: #888;
  font-size: 14px;
}
.pf-pr-product__name {
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0;
}
.pf-pr-product__desc {
  line-height: 1.7;
  margin-bottom: 16px;
}

/* --- 動画埋め込み --- */
.pf-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 16px 0;
}
.pf-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- 製品ボタン群 --- */
.pf-product-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.pf-product-btns .pf-btn {
  font-size: 14px;
  padding: 10px 16px;
}

/* --- 導入事例 --- */
.pf-case {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
.pf-case__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.pf-case__body {
  line-height: 1.7;
}

/* --- この製品のポイント --- */
.pf-points__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pf-points__item {
  background: #f7f7f7;
  border-radius: 8px;
  padding: 16px;
  line-height: 1.6;
}

/* --- 関連製品 --- */
.pf-related__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pf-related__item {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.pf-related__img img {
  width: 100%;
  height: auto;
  display: block;
}
.pf-related__body {
  padding: 12px;
}
.pf-related__maker {
  color: #888;
  font-size: 13px;
}
.pf-related__name {
  font-size: 15px;
  font-weight: 700;
  margin: 4px 0 8px;
}

/* --- 製品一覧を見る（旧: 他社製品も見る） --- */
.pf-other {
  text-align: center;
  margin: 32px 0;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 1023px) {
  .pf-grid__list,
  .pf-steps__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .pf-related__list,
  .pf-support__reasons {
    grid-template-columns: repeat(3, 1fr);
  }
  .pf-step-layout {
    grid-template-columns: 220px 1fr;
    gap: 20px;
  }
  /* 効果カードは5枚並ぶと1枚が狭くなりすぎるため、2列に折り返す */
  .pf-effects__item {
    flex: 1 1 calc(50% - 8px);
  }
}

@media screen and (max-width: 639px) {
  .pf-grid__list,
  .pf-steps__list,
  .pf-gallery__list,
  .pf-related__list,
  .pf-points__list,
  .pf-support__reasons {
    grid-template-columns: repeat(2, 1fr);
  }
  .pf-pr-product__main {
    grid-template-columns: 1fr;
  }
  .pf-step-layout {
    grid-template-columns: 1fr;
  }
  .pf-search__form {
    flex-direction: column;
  }
  .pf-hero__title {
    font-size: 22px;
  }
  .pf-effects__item {
    flex-basis: 100%;
  }
}

/* ============================================================
   製造ライン（工程別フロー）詳細ページ 専用（CustomerProcessFlow/detail.php）
   既存の pf-* クラス（pf-hero / pf-steps__list / pf-step-card 等）は
   flow.php・food.php・step.php・pr.php と共用しているため、
   このページだけの見た目は pf-detail- プレフィックスでスコープする。
   ============================================================ */

/* --- パンくず直下の余白詰め（2026-09 見せ方仕様 §3.1 / §4）---
   style.css の .search .c-lowpage{margin:70px auto 80px}（SPは 8vw）を、
   工程別フロー系ページ（detail / flow / pr）だけ打ち消す。
   テンプレートが付ける pf-lowpage を足した詳細度 (0,3,0) で元ルール (0,2,0) に勝たせる。 */
.search .c-lowpage.pf-lowpage {
  margin-top: 0;
}

/* --- 製造ライン名称・サブタイトル ＋ 相談ボタン --- */
.pf-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  /* 上余白なしでパンくず直下に寄せる（2026-09 見せ方仕様 §3.1） */
  padding: 0 0 20px;
}
.pf-detail-head__titles {
  min-width: 0;
}
/* 2026-09 見せ方仕様 §3.1 の「相談ボタンの文字の大きさぐらいで」は工程番号ストリップを指す
   （希望イメージではタイトルは現状のまま）。タイトルのサイズ・装飾線は従来どおり。 */
.pf-detail-head__title {
  margin: 0;
  padding-left: 14px;
  border-left: 6px solid #e60012;
  color: #16305c;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}
.pf-detail-head__sub {
  display: inline-block;
  margin: 12px 0 0 20px;
  padding: 6px 16px;
  border-radius: 4px;
  background: #eef2f8;
  color: #16305c;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.pf-detail-head__btn {
  flex-shrink: 0;
  background: #f39800;
  color: #fff;
  font-size: 16px;
  padding: 14px 28px;
}
.pf-detail-head__btn:hover {
  background: #e08a00;
  color: #fff;
}

/* --- 番号付き工程ストリップ（クリックで工程カードへページ内スクロール） --- */
.pf-detail-strip {
  margin: 0 0 20px;
  padding: 12px 0;
  border-top: 1px solid #e0e3e8;
  border-bottom: 1px solid #e0e3e8;
}
.pf-detail-strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-detail-strip__item {
  display: flex;
  align-items: center;
}
/* 工程間の矢印。最後の工程には付けない */
.pf-detail-strip__item:not(:last-child)::after {
  content: "\2192";
  margin-left: 12px;
  color: #9aa5b5;
  font-size: 15px;
}
/* 文字サイズは「製造ラインをまとめて相談する」ボタン（.pf-detail-head__btn = 16px）に合わせる
   （2026-09 見せ方仕様 §3.1） */
.pf-detail-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.pf-detail-strip__link:hover {
  color: #e60012;
}
/* バッジの円は文字に合わせて一回り大きくする */
.pf-detail-strip__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #16305c;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- 製造ライン全体画像（コンテンツ幅いっぱい） --- */
/* 直下に番号ストリップが続くため、下余白は詰める（2026-09 見せ方仕様 §3.2） */
.pf-detail-whole {
  margin: 0 0 12px;
}
.pf-detail-whole img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* --- 特長の横帯（ラインの特長／食品の特長／製品例／包装形態例） --- */
.pf-detail-features {
  margin: 0 0 32px;
  padding: 24px;
  border-radius: 8px;
  background: #f2f3f5;
}
/* ブロック数は 0〜4 で可変のため auto-fit で均等割りにする */
.pf-detail-features__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-detail-features__block {
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}
/* 食品の詳細（detail.php）だけ、PC では特長ブロック 25%（1カラム）・製品/包装形態 50%（2カラム）の
   固定比率にする（2026-09-25 ユーザー指示）。IoT・衛生（flow.php）は特長が最大 5 ブロックのため
   --fixed を付けず従来の auto-fit 均等割りのまま。タブレット以下も従来どおり */
@media screen and (min-width: 1024px) {
  .pf-detail-features__list--fixed {
    grid-template-columns: repeat(4, 1fr);
  }
  .pf-detail-features__list--fixed .pf-detail-features__block--wide {
    grid-column: span 2;
  }
  /* 50% 幅の枠では画像（最大4枚）を横1列に並べ、隣のテキストブロックが縦に間延びしないようにする */
  .pf-detail-features__list--fixed .pf-detail-features__block--wide .pf-detail-features__images {
    flex-wrap: nowrap;
  }
  .pf-detail-features__list--fixed .pf-detail-features__block--wide .pf-detail-features__images li {
    flex: 1 1 0;
    min-width: 0;
  }
}
.pf-detail-features__title {
  margin: 0 0 10px;
  color: #16305c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}
.pf-detail-features__body {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-detail-features__body li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.7;
}
.pf-detail-features__body li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16305c;
}
.pf-detail-features__images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-detail-features__images li {
  flex: 1 1 45%;
  min-width: 70px;
}
/* 枚数（1〜3枚）で高さが変わらないよう、サムネイルの高さを揃えて contain 表示する */
.pf-detail-features__images img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 4px;
}

/* --- 工程単体カード（カード間を黄色い矢印でつなぐ） --- */
.pf-detail-steps {
  margin: 0 0 48px;
}
/* padding-right は行末カードの矢印を内側に収めるための余白（横スクロール発生を防ぐ） */
.pf-detail-steps__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 40px;
  list-style: none;
  margin: 0;
  padding: 0 40px 0 0;
}
.pf-detail-steps__item {
  position: relative;
  /* 固定ヘッダーに隠れないよう、ページ内スクロール時の上余白を確保する */
  scroll-margin-top: 150px;
}
/* カード間の矢印。最後のカードには付けない */
.pf-detail-steps__item:not(:last-child)::after {
  content: "\00bb";
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  color: #f5b425;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.pf-detail-card {
  display: block;
  height: 100%;
  padding: 8px;
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
a.pf-detail-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.pf-detail-card--nolink {
  cursor: default;
}
.pf-detail-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.pf-detail-card__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16305c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.pf-detail-card__name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
/* 機械の全体像が切れないよう contain で表示する */
.pf-detail-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.pf-detail-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- 番号・矢印なし表示（IoT・衛生ページ = flow.php のみ）---
   食品ページ（detail.php）は従来どおり番号と矢印を出すため、
   共通クラスは触らずテンプレートが付ける修飾クラスでだけ打ち消す（2026-09-12 依頼主指示）。
   番号バッジ自体はテンプレートで出力しないので、ここでは矢印と矢印用の余白だけを調整する。 */
.pf-detail-strip--nonum .pf-detail-strip__item:not(:last-child)::after {
  content: none;
}
/* 矢印が無くなる分、工程名同士が繋がって読めるのを避けるため列間を広げる */
.pf-detail-strip--nonum .pf-detail-strip__list {
  gap: 8px 28px;
}
.pf-detail-steps--nonum .pf-detail-steps__item:not(:last-child)::after {
  content: none;
}
/* 広い列間と右余白は矢印を収めるためのものだったため、矢印なしでは均等な間隔に戻す */
.pf-detail-steps--nonum .pf-detail-steps__list {
  gap: 24px;
  padding-right: 0;
}
/* nonum の 639px 以下の上書きは「詳細ページ レスポンシブ」の 639px ブロック末尾にまとめている */

/* --- 工程カードのホバーポップアップ（2026-09 見せ方仕様 §3.4。2026-09-24 見た目を参考画像のデザインに変更）---
   管理画面の工程ごとの「タイトル」「内容」と、固定文言の帯を表示する。両方空の工程には要素自体を出さない。
   内容の行頭が「ラベル：」なら、ラベル枠と本文の行（popup-list）で表示する（ProcessFlowPopupHelper）。 */
/* ポップアップが隣のカードの矢印（::after）の下に潜らないよう、ホバー中のカードだけ重なり順を上げる。
   フォーカスはキーボード操作（:focus-visible）のときだけ対象にする。:focus-within だとマウスでクリックした後も
   フォーカスが残り、z-index 5 のままのカードが他のカードのポップアップの上に重なるため（2026-09-25）。
   :has() 未対応のブラウザでは、キーボード操作時の重なり順だけが上がらない（ポップアップ自体は下の規則で出る） */
.pf-detail-steps__item:hover,
.pf-detail-steps__item:has(.pf-detail-card:focus-visible) {
  z-index: 5;
}
/* カードの下に出す。上に出すと、ページ内リンクで移動した直後の1段目が固定ヘッダー（header.css、z-index 998）に隠れる。
   ポップアップ上にマウスがある間は li:hover が続くので閉じない。下段のカードはポップアップが開いている間だけ隠れる
   （CTA をクリックできるようにするため。2026-09-25） */
.pf-detail-card__popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  /* ラベル列 84px ＋ 間隔 10px を取っても、本文列が12pxで1行あたり全角18字前後に収まる幅。
     375px 幅では max-width（100vw - 32px = 343px）に収まる */
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 14px 14px 12px;
  border: 1px solid #2f86f5;
  border-radius: 10px;
  background: #fff;
  color: #1a2238;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  box-shadow: 0 6px 18px rgba(22, 48, 92, .18);
}
/* ::before はカードとの隙間を覆う透明な橋、::after は回転した正方形の尾。
   橋はポップアップと同じ幅にする。カード幅だけだと、340px のポップアップの端へ斜めにマウスを動かしたとき
   隙間で li:hover が外れて閉じるため（2026-09-25）。 */
.pf-detail-card__popup::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 9px; /* カードとの隙間（top: calc(100% + 8px)）と枠線 1px を覆う */
}
/* 尾は上辺と左辺だけ枠線を付けた白い正方形を 45° 回して、カードを指す上向きの三角に見せる。
   下半分はポップアップの白地に重なって見えず、根元ではポップアップの枠線が途切れて見える。
   横位置は --pf-popup-tail-left で列ごとに変える（端揃えの列ではカードの中央付近に寄せる） */
.pf-detail-card__popup::after {
  content: "";
  position: absolute;
  left: var(--pf-popup-tail-left, 50%);
  bottom: calc(100% - 7px);
  width: 14px; /* 45° 回転で頂点から枠線まで約 9px（旧 border 方式の尾と同じ高さ） */
  height: 14px;
  border: solid #2f86f5;
  border-width: 1px 0 0 1px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
/* キーボード操作でも読めるよう、カードのリンクに :focus-visible があるときも開く。
   マウスのクリックで残るフォーカスでは開かない（開いたまま下の要素のクリックを奪うため） */
.pf-detail-steps__item:hover .pf-detail-card__popup,
.pf-detail-card:focus-visible + .pf-detail-card__popup {
  display: block;
}
.pf-detail-card__popup-title {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3ebf3;
  color: #0b2a78;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
/* 改行は HTML（nl2br）を組み立てず CSS で表現する。h() だけで済ませて XSS 経路を作らないため */
.pf-detail-card__popup-body {
  margin: 0 0 12px;
  color: #1a2238;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* 「ラベル：本文」の行。ラベル列は「カテゴリ概要」（6文字）が1行に収まる幅で固定し、行ごとのラベル幅を揃える */
.pf-detail-card__popup-list {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px 10px;
  margin: 0 0 12px;
}
/* 本文が複数行になっても、ラベルの箱は行の高さに合わせて伸ばし、文字は上下中央に置く */
.pf-detail-card__popup-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 4px;
  border-radius: 6px;
  background: #e3f2fd;
  color: #0b2a78;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
/* 改行は popup-body と同じく CSS で表現する（h() だけで出力し、nl2br は使わない） */
.pf-detail-card__popup-text {
  /* 本文が1行のときラベル箱（余白込み 28px）の上下中央に合わせる。文節単位の折り返しは対応ブラウザのみ */
  align-self: center;
  word-break: auto-phrase;
  margin: 0;
  color: #1a2238;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* 共通CSSの a（color: #333）・a:hover（opacity）に負けないよう、a. を付けて色と不透明度を明示する */
a.pf-detail-card__popup-cta {
  /* 共通 CSS（assets/css/style.css）の a の transition .5s を短くして、ホバーの背景変化を素早くする */
  transition: background-color .15s ease;
  display: block;
  margin: 0;
  padding: 7px 12px;
  border-radius: 6px;
  background: #e3f2fd;
  color: #0b2a78;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
a.pf-detail-card__popup-cta:hover {
  background: #d3e8fb;
  color: #0b2a78;
  text-decoration: none;
  opacity: 1;
}
/* 矢印は装飾のため aria-hidden を付けている。共通CSS（assets/css/style.css）の
   [aria-hidden=true]{display:none;visibility:hidden} に消されないよう、2クラスで詳細度を上げて表示を明示する */
.pf-detail-card__popup-cta .pf-detail-card__popup-cta-arrow {
  display: inline;
  visibility: visible;
  margin-left: 10px;
  color: #1f4aa8;
  font-size: 14px;
  line-height: 1;
}
/* 6列表示の左端・右端のカードは、中央寄せだと幅340pxの吹き出しが画面外へはみ出すため端に揃える */
/* 端揃えの列の尾は、カード幅（PC・タブレット・SP とも約140〜160px）の中央付近の 72px に置く */
.pf-detail-steps__item:nth-child(6n+1) .pf-detail-card__popup {
  --pf-popup-tail-left: 72px;
  left: 0;
  transform: none;
}
.pf-detail-steps__item:nth-child(6n) .pf-detail-card__popup {
  --pf-popup-tail-left: calc(100% - 72px);
  left: auto;
  right: 0;
  transform: none;
}

/* --- 品質保証機器セクション（2026-09 見せ方仕様 §3.5）---
   工程カードの後・相談ボックスの前。カードは工程カードと同じ見た目で、
   番号と工程間の矢印だけ pf-detail-steps--nonum で打ち消す。 */
.pf-quality {
  position: relative;
  margin: 0 0 48px;
  padding: 28px 20px 20px;
  border: 2px solid #0b7a3b;
  border-radius: 10px;
}
/* 見出しは枠の左上に重ねる帯（資料の添付画像どおり） */
.pf-quality__title {
  position: absolute;
  top: -16px;
  left: 16px;
  margin: 0;
  padding: 4px 16px;
  border-radius: 4px;
  background: #0b7a3b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

/* --- 詳細ページ レスポンシブ --- */
@media screen and (max-width: 1023px) {
  .pf-detail-head__title {
    font-size: 24px;
  }
  .pf-detail-steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
  /* ホバーポップアップ: 6列用の端揃えを中央寄せに戻してから、4列の左端・右端を端に揃える */
  .pf-detail-steps__item:nth-child(6n+1) .pf-detail-card__popup,
  .pf-detail-steps__item:nth-child(6n) .pf-detail-card__popup {
    --pf-popup-tail-left: 50%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .pf-detail-steps__item:nth-child(4n+1) .pf-detail-card__popup {
    --pf-popup-tail-left: 72px;
    left: 0;
    transform: none;
  }
  .pf-detail-steps__item:nth-child(4n) .pf-detail-card__popup {
    --pf-popup-tail-left: calc(100% - 72px);
    left: auto;
    right: 0;
    transform: none;
  }
}

@media screen and (max-width: 639px) {
  .pf-detail-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 16px;
  }
  .pf-detail-head__title {
    padding-left: 10px;
    border-left-width: 4px;
    font-size: 20px;
  }
  .pf-detail-head__sub {
    margin: 10px 0 0 14px;
    padding: 4px 12px;
    font-size: 13px;
  }
  .pf-detail-head__btn {
    width: 100%;
    font-size: 15px;
    padding: 13px 16px;
  }
  /* 工程数が多いと折り返しで縦に伸びるため、SPは折り返さず横スクロールさせる */
  .pf-detail-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pf-detail-strip__list {
    flex-wrap: nowrap;
  }
  /* 文字サイズは相談ボタンの SP 値（.pf-detail-head__btn = 15px）に合わせる */
  .pf-detail-strip__link {
    font-size: 15px;
  }
  .pf-detail-strip__no {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .pf-detail-features {
    padding: 16px 12px;
  }
  .pf-detail-features__list {
    grid-template-columns: 1fr;
  }
  .pf-detail-steps__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 26px;
    padding-right: 0;
  }
  .pf-detail-steps__item {
    scroll-margin-top: 100px;
  }
  .pf-detail-steps__item:not(:last-child)::after {
    right: -20px;
    font-size: 20px;
  }
  /* 2列表示では行末（偶数番目）の矢印が画面端に浮くため、行内の2枚の間だけに矢印を出す */
  .pf-detail-steps__item:nth-child(2n)::after {
    content: none;
  }
  /* nonum（IoT・衛生）: 基底の gap:24px が詳細度で上の 16px 26px に勝つため、ここで再指定する */
  .pf-detail-steps--nonum .pf-detail-steps__list {
    gap: 16px;
  }
  /* SPのストリップは nowrap の横スクロールになるため、矢印なしでも列間は詰めてスクロール量を抑える */
  .pf-detail-strip--nonum .pf-detail-strip__list {
    gap: 8px 16px;
  }
  /* 枠の左右余白はSPではカード幅を圧迫するため詰める */
  .pf-quality {
    padding: 26px 12px 16px;
  }
  .pf-quality__title {
    left: 12px;
    padding: 3px 12px;
    font-size: 14px;
  }
  /* ホバーポップアップ: 4列用の端揃えを中央寄せに戻してから、2列の左右を端に揃える */
  .pf-detail-steps__item:nth-child(4n+1) .pf-detail-card__popup,
  .pf-detail-steps__item:nth-child(4n) .pf-detail-card__popup {
    --pf-popup-tail-left: 50%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .pf-detail-steps__item:nth-child(2n+1) .pf-detail-card__popup {
    --pf-popup-tail-left: 72px;
    left: 0;
    transform: none;
  }
  .pf-detail-steps__item:nth-child(2n) .pf-detail-card__popup {
    --pf-popup-tail-left: calc(100% - 72px);
    left: auto;
    right: 0;
    transform: none;
  }
  /* 品質保証機器の枠内はカードが「枠線 2px ＋ 左右 padding 12px」＝14px 内側にあるため、
     端揃えのままだと画面端に寄りすぎる。本体の工程カードと同じ画面端の位置まで外へ戻し、尾も同じだけずらす */
  .pf-quality .pf-detail-steps__item:nth-child(2n+1) .pf-detail-card__popup {
    --pf-popup-tail-left: 86px;
    left: -14px;
  }
  .pf-quality .pf-detail-steps__item:nth-child(2n) .pf-detail-card__popup {
    --pf-popup-tail-left: calc(100% - 86px);
    right: -14px;
  }
}

/* タッチ端末（ホバーできない）では工程カードのポップアップを出さない。詳細ページ レスポンシブの後ろに置く。
   iOS Safari は :hover で表示が変わる要素があると1回目のタップを「ホバー」に使い、遷移に2回タップが要るため。
   aria-describedby は非表示要素でも読み上げの説明として使われるので維持する。 */
@media (hover: none) {
  .pf-detail-steps__item:hover .pf-detail-card__popup,
  .pf-detail-card:focus-visible + .pf-detail-card__popup {
    display: none;
  }
}

/* ============================================================
   FOOD TOWN支援セクション 冒頭ブロック（写真＋説明文）
   element/CustomerProcessFlow/support_section.php で
   detail.php / flow.php / pr.php の3ページ共通に表示する。
   ============================================================ */
.pf-support-intro {
  display: grid;
  grid-template-columns: 36% 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  /* .pf-support が中央揃えのため、本文は明示的に左揃えへ戻す */
  text-align: left;
}
.pf-support-intro__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.pf-support-intro__title {
  margin: 0 0 14px;
  color: #16305c;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.pf-support-intro__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.9;
}
.pf-support-intro__text:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 1023px) {
  .pf-support-intro__title {
    font-size: 17px;
  }
}

@media screen and (max-width: 639px) {
  /* SPは写真とテキストを縦積みにする */
  .pf-support-intro {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
    margin-bottom: 24px;
  }
  .pf-support-intro__title {
    font-size: 16px;
  }
  .pf-support-intro__text {
    font-size: 13px;
    line-height: 1.8;
  }
}

/* ============================================================
   FOOD TOWNが選ばれる3つの理由（写真＋テキストを左右交互に大きく並べる）
   element/CustomerProcessFlow/support_section.php で3ページ共通に表示する。
   デザイン移植元: public_html/hearing/lp/style.css の
     .reasons / .section-title / .reason-item / .reason-image / .reason-text
   （LPの見た目を約8割に縮小して配置する。依頼者指示 2026-09-11・CTA移植時と同じ方針）
   ※ 旧スタイル .pf-support__title / .pf-support__reasons / .pf-support__no と、
     差し替え前の3カラムカード（写真41.5%＋テキストの白カード）は未使用。
   ============================================================ */

/* --- 見出し（数字は赤丸） --- */
/* LPと同じ薄青の帯。見出しと一覧を .pf-support の左右パディング（24px）ぶん
   負のマージンで外へ広げ、隙間なく重ねて1枚の帯に見せる */
.pf-reason-heading {
  display: block;
  margin: 0 -24px;
  padding: 56px 20px 40px;
  background: #e9f4ff;
  color: #222;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
}
.pf-reason-heading__line {
  display: block;
}
.pf-reason-heading__num {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 .1em;
  border-radius: 50%;
  background: #e74c3c;
  color: #fff;
  font-size: .92em;
  line-height: 1.5em;
  text-align: center;
  vertical-align: -.22em;
}

/* --- REASON 1件（写真＋番号＋見出し＋本文を全幅で左右に配置） --- */
.pf-reason-list {
  margin: 0 -24px;
  padding: 0 20px 64px;
  background: #e9f4ff;
  list-style: none;
  /* 親の中央揃えを打ち消して本文は左揃えにする */
  text-align: left;
}
.pf-reason-card {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1100px;
  /* LPの .reason-item は 160px 間隔。8割強に詰める */
  margin: 0 auto 100px;
}
.pf-reason-card:last-child {
  margin-bottom: 0;
}
/* LPの .reason-item.reverse と同じく写真の左右を交互にする（01=左・02=右・03=左） */
.pf-reason-card:nth-child(even) {
  flex-direction: row-reverse;
}
.pf-reason-card__photo {
  /* LPの写真は max-width 600px。帯の内寸（約1030px）の50%で約510pxになる。
     縮まないようにしないと、本文が長い REASON02 だけ写真が小さくなる */
  flex: 0 0 50%;
}
.pf-reason-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
}
.pf-reason-card__body {
  /* flex アイテムの既定 min-width:auto を解除して長い英数字でもはみ出させない */
  min-width: 0;
  flex: 1 1 auto;
}
.pf-reason-card__no {
  /* LPは Overpass 指定だが customer レイアウトでは読み込んでいないため、
     読み込み済みの Montserrat で代用する */
  margin: 0 0 14px;
  color: #1e5aa7;
  font-family: "Montserrat", "Roboto", sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.1;
}
.pf-reason-card__num {
  margin-left: 2px;
  font-size: 54px;
}
.pf-reason-card__title {
  margin: 0 0 16px;
  color: #01478d;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
/* LPは1つの <p> を <br> で改行しているため、段落間は詰めて同じ見た目にする */
.pf-reason-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 1023px) {
  .pf-reason-heading {
    padding: 40px 16px 28px;
    font-size: 30px;
  }
  .pf-reason-list {
    padding-bottom: 48px;
  }
  .pf-reason-card {
    gap: 32px;
    margin-bottom: 72px;
  }
  .pf-reason-card__no {
    margin-bottom: 10px;
    font-size: 28px;
  }
  .pf-reason-card__num {
    font-size: 42px;
  }
  .pf-reason-card__title {
    margin-bottom: 12px;
    font-size: 19px;
  }
  .pf-reason-card__text {
    font-size: 14px;
  }
}

@media screen and (max-width: 639px) {
  /* 写真を上・テキストを下にして縦積みにする（LPは768px以下だが、本サイトの規約 mobile 〜639px に合わせる） */
  .pf-reason-heading {
    padding: 32px 12px 20px;
    font-size: 22px;
  }
  .pf-reason-list {
    padding: 0 4px 36px;
  }
  .pf-reason-card,
  .pf-reason-card:nth-child(even) {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
  }
  .pf-reason-card__photo {
    flex: 0 0 auto;
    width: 100%;
  }
  .pf-reason-card__body {
    width: 100%;
  }
  .pf-reason-card__no {
    margin-bottom: 8px;
    font-size: 22px;
  }
  .pf-reason-card__num {
    font-size: 32px;
  }
  .pf-reason-card__title {
    margin-bottom: 10px;
    font-size: 17px;
  }
  .pf-reason-card__text {
    font-size: 13px;
  }
}

/* ============================================================
   課題相談CTA（ヒアリングシートLP 最下部デザインの移植）
   element/CustomerProcessFlow/cta_section.php で3ページ共通に表示する。
   移植元: public_html/hearing/lp/style.css の
     .lp-cta / .lp-cta-inner / .lp-cta-title / .lp-cta-lead / .lp-cta-list /
     .lp-cta-list-text / .cta-button / .cta-button-footer / .footer-btn / @keyframes pulse
   （LPのCSSは読み込まず、必要なルールのみ pf-lp-cta- プレフィックスで再定義）
   ※ 旧スタイル .pf-cta / .pf-cta__lead / .pf-btn--cta は未使用（切り戻し用に残置）。
   ============================================================ */
.pf-lp-cta {
  /* 既存 .pf-cta の margin: 48px 0 0 を踏襲。LPの見た目を約8割に縮小して配置する（依頼者指示 2026-09-01） */
  margin: 40px 0 0;
  padding: 40px 20px;
  background: #1f4e8c;
}
.pf-lp-cta__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 46px 32px;
  border-radius: 30px;
  background: #fff;
}
.pf-lp-cta__title {
  margin: 0;
  text-align: center;
}
.pf-lp-cta__title img {
  width: 85%;
  height: auto;
  margin-bottom: 16px;
}
.pf-lp-cta__lead {
  margin: 0;
  /* SPで幅を100%未満に絞るため、中央寄せを明示する */
  text-align: center;
}
.pf-lp-cta__lead img {
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}
.pf-lp-cta__texts {
  margin-bottom: 30px;
  font-size: 14px;
  font-weight: bold;
}
.pf-lp-cta__text {
  margin: 0 0 8px;
}
.pf-lp-cta__btn {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.pf-lp-cta__btn img {
  display: block;
  width: 90%;
  max-width: 400px;
  height: auto;
  /* LPのボタンと同じ拡縮アニメーション */
  animation: pf-lp-cta-pulse 2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes pf-lp-cta-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
/* 動きを減らす設定の利用者にはアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .pf-lp-cta__btn img {
    animation: none;
  }
}

/* LP の @media (max-width: 767px) を踏襲 */
@media screen and (max-width: 767px) {
  .pf-lp-cta {
    padding: 36px 12px;
  }
  .pf-lp-cta__inner {
    padding: 30px 20px;
    border-radius: 18px;
  }
  .pf-lp-cta__title img {
    width: 88%;
    margin-bottom: 16px;
  }
  .pf-lp-cta__lead img {
    width: 94%;
    margin-bottom: 24px;
  }
  .pf-lp-cta__texts {
    margin-bottom: 22px;
    font-size: 13px;
  }
}

/* ============================================================
   工程PRページ（ヒーロー／PR企業／PR製品／導入事例）
   モック: docs/assets/food-search-process-flow/10-process-pr-page.png・11-pr-case-studies.png
   および依頼者スクショ（2026-09-01 1.25）から寸法・配色を実測して再現。
   ※ 旧スタイル .pf-hero--pr / .pf-pr-company / .pf-pr-product* / .pf-case* は
     このデザインへの差し替えにより未使用（切り戻し用に残置）。
   ============================================================ */

/* --- ヒーロー（食品サムネイル＋見出し） --- */
.pf-pr-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 20px;
}
.pf-pr-hero__thumb {
  flex: 0 0 auto;
  width: 84px;
}
.pf-pr-hero__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.pf-pr-hero__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* --- PR企業＋PR製品（モックどおり横並び） --- */
.pf-pr-main {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0 0 24px;
}
.pf-pr-main__company {
  position: relative;
  flex: 0 0 24%;
  padding-top: 36px;
  text-align: center;
}
/* PR製品が未設定のときは企業ブロックだけを自然な幅で並べる */
.pf-pr-main__company:only-child {
  flex-basis: auto;
}
/* 文言が「スポンサー」と長いため、PR表記だった頃より padding と文字を詰めている（2026-09-12 依頼主指示） */
.pf-pr-badge {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  padding: 1px 10px;
  border: 2px solid #ff0000;
  background: #fff;
  color: #ff0000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.pf-pr-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.pf-pr-corp {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 700;
  /* 長い会社名で企業ブロックの幅を突き破らないようにする */
  overflow-wrap: break-word;
}
.pf-pr-corp a {
  color: #222;
  text-decoration: none;
}
.pf-pr-corp a:hover {
  text-decoration: underline;
}
/* 企業ブロックが無い（スポンサー未掲載）ときは製品ブロックが単独で残る（2026-09-15 依頼主指示）。
   flex: 1 1 auto なので単独でも全幅に伸びる。:only-child での上書きは不要 */
.pf-pr-main__product {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 1 1 auto;
  min-width: 0;
}
/* 縦長の製品画像でもブロックが間延びしないよう、関連製品カードと同じ4:3の枠に固定する */
.pf-pr-item__photo {
  display: flex;
  flex: 0 0 30%;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* PR文の長さで画像の位置が上下しないよう、ブロックの先頭に固定する（2026-09-12 依頼主指示）。
     縦中央寄せ（align-self: center）だと文字を足すたびに画像が下がって見えるため。 */
  align-self: flex-start;
}
.pf-pr-item__photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pf-pr-item__info {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-pr-item__name {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: break-word;
}
/* 製品詳細への導線。見出しの視認性を保つため色は継承し、hoverで下線を出す（カード名と同じ扱い） */
.pf-pr-item__name a {
  color: inherit;
  text-decoration: none;
}
.pf-pr-item__name a:hover {
  text-decoration: underline;
}
.pf-pr-item__price {
  display: flex;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 13px;
}
.pf-pr-item__price dt {
  font-weight: 700;
}
.pf-pr-item__price dd {
  margin: 0;
}
.pf-pr-item__desc-wrap {
  margin: 0 0 16px;
  /* 「閉じる」で折りたたんだときにこのブロックへ戻す（2026-09-15 依頼主指示）。
     固定ヘッダーに隠れないよう、工程カード（.pf-detail-steps__item）と同じ上余白をとる */
  scroll-margin-top: 150px;
}
.pf-pr-item__desc {
  margin: 0;
  color: #444;
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: break-word;
}
/* 折りたたみ時は10行で切り、下端を白へフェードさせる（2026-09-12 依頼主指示）。
   line-height が 1.8 なので 1行 = 1.8em。行数を変える場合はここの係数を直す。 */
.pf-pr-item__desc--clamped {
  position: relative;
  max-height: calc(1.8em * 10);
  overflow: hidden;
}
.pf-pr-item__desc--clamped::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2em;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 100%);
  /* 文字の選択やリンク操作を妨げない */
  pointer-events: none;
}
/* display 指定が増えても hidden が勝つように明示（.pf-pr-others と同じ対処）。
   customer_process_flow.css は共通CSSより後に読み込まれるため、これが無いと
   normalize 由来の [hidden]{display:none} が display:block に負けてトグルが常時表示される */
.pf-pr-item__desc-toggle[hidden] {
  display: none;
}
/* 10行以内の説明文ではJSが hidden を付けたままにするため、トグル自体が出ない */
.pf-pr-item__desc-toggle {
  display: block;
  margin: 4px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: #156082;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
}
.pf-pr-item__desc-toggle:hover {
  text-decoration: underline;
}
.pf-pr-item__desc-toggle::after {
  content: "▼";
  margin-left: 4px;
  font-size: 10px;
}
.pf-pr-item__desc-toggle[aria-expanded="true"]::after {
  content: "▲";
}
/* 動画（左）＋ボタン（右）の行。動画が無い場合はボタンだけが右に残る */
.pf-pr-item__media {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pf-pr-item__video {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-pr-item__video .pf-video {
  margin: 0;
}
/* ボタンはモックどおり縦積み・右寄せ（動画が無いときも右端に留める） */
.pf-pr-item__actions {
  flex: 0 0 190px;
  margin-left: auto;
}
.pf-pr-item__actions .pf-product-btns {
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pf-pr-item__actions .pf-btn {
  width: 100%;
  padding: 10px 8px;
  font-size: 13px;
}
.pf-pr-item__actions .pf-btn--primary {
  background: #f68a86;
}
.pf-pr-item__actions .pf-btn--outline {
  border-color: #c9c9c9;
  color: #333;
}
/* カタログ取得用の隠しフォームが縦積みの隙間を作らないようにする（JSからのsubmitは可能） */
.pf-pr-item__actions .pf-product-btns > form {
  display: none;
}

/* --- 区切り線 --- */
.pf-pr-divider {
  height: 2px;
  margin: 28px 0;
  border: 0;
  background: #156082;
}

/* --- 導入事例・活用事例 --- */
.pf-pr-cases {
  margin: 0 0 32px;
}
.pf-pr-cases__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 700;
}
/* モックのアイコン（青い角丸の小さな図形）を画像なしで再現する */
.pf-pr-cases__head::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 22px;
  border-radius: 4px;
  background: #4a6fa5;
}
.pf-pr-cases__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-pr-case {
  padding: 16px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
}
.pf-pr-case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececec;
}
.pf-pr-case__no {
  font-size: 15px;
  font-weight: 700;
}
.pf-pr-case__name {
  color: #444;
  font-size: 14px;
  font-weight: 700;
}
/* 動画を上・テキストを下の縦積みにする（2026-09-12 依頼主指示）。
   横並びだと動画の実効幅がカードの半分以下になり小さすぎたため、カード全幅に広げる。 */
.pf-pr-case__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pf-pr-case__video {
  flex: 0 0 auto;
  width: 100%;
}
.pf-pr-case__video .pf-video {
  margin: 0;
}
.pf-pr-case__text {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-pr-case__label {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 10px;
  border-radius: 4px;
  background: #f2f2f3;
  font-size: 12px;
  font-weight: 700;
}
.pf-pr-case__label:not(:first-child) {
  margin-top: 10px;
}
.pf-pr-case__points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-pr-case__points li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.75;
}
.pf-pr-case__points li::before {
  content: "・";
  position: absolute;
  left: 0;
}

@media screen and (max-width: 1023px) {
  .pf-pr-main {
    gap: 16px;
  }
  .pf-pr-item__actions {
    flex-basis: 170px;
  }
  .pf-pr-cases__list {
    gap: 14px;
  }
}

@media screen and (max-width: 639px) {
  .pf-pr-hero {
    gap: 12px;
    padding: 8px 0 16px;
  }
  .pf-pr-hero__thumb {
    width: 60px;
  }
  .pf-pr-hero__title {
    font-size: 16px;
  }
  /* SPは企業→製品、写真→情報の順に縦積み */
  .pf-pr-main,
  .pf-pr-main__product {
    flex-direction: column;
    gap: 16px;
  }
  /* SPは企業ブロックが全幅になるため、PRバッジは右端に浮かせずロゴの上に置く */
  .pf-pr-main__company {
    padding-top: 0;
  }
  .pf-pr-badge {
    position: static;
    margin-bottom: 10px;
  }
  .pf-pr-logo img {
    max-width: 240px;
  }
  /* SPは製品写真も左右中央・全幅で表示する（4:3の枠固定はPCと共通） */
  .pf-pr-item__photo {
    align-self: center;
    flex: 0 0 auto;
    width: 100%;
  }
  /* SPは固定ヘッダーが低いぶん戻り位置も浅くする（.pf-detail-steps__item と同じ値） */
  .pf-pr-item__desc-wrap {
    scroll-margin-top: 100px;
  }
  /* SPは動画の下にボタンを全幅で置く */
  .pf-pr-item__media {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .pf-pr-item__video {
    width: 100%;
  }
  .pf-pr-item__actions {
    flex-basis: auto;
    width: 100%;
  }
  .pf-pr-cases__head {
    font-size: 17px;
  }
  .pf-pr-cases__list {
    grid-template-columns: 1fr;
  }
  /* 事例カードの中身（動画→テキスト）はPC・SP共通で縦積みのため、ここでの上書きは不要 */
}

/* ============================================================
   工程PRページ（この製品のポイント／PR企業関連製品／その他掲載製品）
   モック: sheet3 rId12_part3・rId12_part4・rId14 から配色・寸法を再現。
   ============================================================ */

/* --- 画像が未登録のときのプレースホルダー --- */
.pf-noimg {
  color: #aaa;
  font-size: 12px;
}

/* --- この製品のポイント --- */
.pf-pr-points {
  margin: 0 0 32px;
  padding: 20px 24px 24px;
  border-radius: 10px;
  background: #f7f7f8;
}
.pf-pr-points__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}
/* モックの星アイコン（濃紺）を画像なしで再現する */
.pf-pr-points__head::before {
  content: "★";
  flex-shrink: 0;
  color: #2f4f82;
  font-size: 20px;
  line-height: 1;
}
.pf-pr-points__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ポイントは1件ずつ白いカードで囲む（2026-09-12 依頼主指示） */
.pf-pr-points__item {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.pf-pr-points__title {
  margin: 0 0 8px;
  color: #e8620c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  /* 長いタイトルでもカラム幅を超えない */
  overflow-wrap: break-word;
}
.pf-pr-points__text {
  margin: 0;
  color: #555;
  font-size: 12px;
  line-height: 1.9;
  overflow-wrap: break-word;
}

/* --- PR企業関連製品 --- */
.pf-pr-related {
  margin: 0 0 32px;
}
.pf-pr-related__head {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
}

/* --- カルーセル（Swiper 11。トップページの工程別ランキングと同方式） --- */
/* 矢印は swiper の overflow: hidden に切られないよう外側に置くため、その分の余白を確保する */
.pf-pr-related__carousel {
  position: relative;
  padding: 0 44px;
}
/* スライドを高さいっぱいに伸ばし、カードの下端でボタンが揃うようにする */
.pf-pr-related .swiper-slide {
  display: flex;
  height: auto;
}
.pf-pr-related .swiper-slide > .pf-pr-card {
  width: 100%;
  /* 長い文字列でカードがスライド幅を超えないようにする */
  min-width: 0;
}
/* Swiper 既定の矢印を、丸い水色矢印に寄せる */
.pf-pr-related .swiper-button-prev,
.pf-pr-related .swiper-button-next {
  width: 40px;
  height: 40px;
  /* Swiper は top: 50% 基準で配置するため高さの半分だけ引き上げる */
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #7b9ed4;
  cursor: pointer;
}
.pf-pr-related .swiper-button-prev {
  left: 0;
}
.pf-pr-related .swiper-button-next {
  right: 0;
}
.pf-pr-related .swiper-button-prev:hover,
.pf-pr-related .swiper-button-next:hover {
  background: #6a8dc4;
}
.pf-pr-related .swiper-button-prev::after,
.pf-pr-related .swiper-button-next::after {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

/* --- 関連製品カード --- */
.pf-pr-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.pf-pr-card__link {
  color: inherit;
  text-decoration: none;
}
.pf-pr-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pf-pr-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pf-pr-card__name {
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.pf-pr-card__link:hover .pf-pr-card__name {
  text-decoration: underline;
}
.pf-pr-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 8px;
  color: #666;
  font-size: 12px;
  line-height: 1.6;
}
.pf-pr-card__spec {
  margin: 0 0 10px;
  color: #555;
  font-size: 12px;
  line-height: 1.8;
}
.pf-pr-card__spec-row {
  display: flex;
  justify-content: center;
  gap: 2px;
}
.pf-pr-card__spec dt {
  font-weight: 400;
}
/* 「（項目名）：値」の区切りは文字を持たせずCSSで付ける */
.pf-pr-card__spec dt::after {
  content: "：";
}
.pf-pr-card__spec dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}
.pf-pr-card__actions {
  margin-top: auto;
}
.pf-pr-card__actions .pf-product-btns {
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.pf-pr-card__actions .pf-btn {
  width: 100%;
  padding: 8px 6px;
  font-size: 12px;
}
.pf-pr-card__actions .pf-btn--primary {
  background: #f68a86;
}
.pf-pr-card__actions .pf-btn--outline {
  border-color: #c9c9c9;
  color: #333;
}
/* カタログ取得用の隠しフォームが縦積みの隙間を作らないようにする（JSからのsubmitは可能） */
.pf-pr-card__actions .pf-product-btns > form {
  display: none;
}

/* --- その他掲載製品 --- */
.pf-pr-others {
  margin: 0 0 32px;
}
/* 「製品一覧を見る（旧: 他社製品も見る）」を押すまで隠す（display 指定が増えても hidden が勝つように明示） */
.pf-other[hidden],
.pf-pr-others[hidden] {
  display: none;
}
.pf-pr-others__head {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
}
.pf-pr-others__makers {
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  background: #fff;
}
.pf-pr-others__subhead {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
}
.pf-pr-others__maker-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 32px;
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 13px;
}
.pf-pr-others__maker-list li {
  overflow-wrap: break-word;
}
.pf-pr-others__maker-list a {
  color: #333;
  text-decoration: none;
}
.pf-pr-others__maker-list a:hover {
  text-decoration: underline;
}
/* モックどおり、行カードはグレーの帯の上に並べる */
.pf-pr-others__list {
  list-style: none;
  margin: 0;
  padding: 20px;
  border-radius: 10px;
  background: #f5f5f5;
}

/* --- その他掲載製品の行カード（検索結果ページの行に準じた構成） --- */
/* 11件目以降はJSがスクロールに応じて10件ずつ表示する（クラスを外して表示）。
   後続の .pf-pr-row { display: flex } に負けないよう2クラスで詳細度を上げる */
.pf-pr-row.pf-pr-row--more {
  display: none;
}
/* スクロール検知用の番兵（見た目は持たない） */
.pf-pr-others__sentinel {
  /* 共通CSSの [aria-hidden=true]{display:none} に負けると IntersectionObserver が
     一度も発火せず 11 件目以降が出ないため、display を明示する */
  display: block;
  height: 1px;
}
.pf-pr-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
}
.pf-pr-row:last-child {
  margin-bottom: 0;
}
.pf-pr-row__link {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.pf-pr-row__img {
  display: flex;
  flex: 0 0 200px;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pf-pr-row__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pf-pr-row__body {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-pr-row__maker {
  margin: 0 0 4px;
  color: #888;
  font-size: 12px;
}
.pf-pr-row__name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.pf-pr-row__link:hover .pf-pr-row__name {
  text-decoration: underline;
}
.pf-pr-row__price {
  display: flex;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 12px;
}
.pf-pr-row__price dt {
  font-weight: 700;
}
.pf-pr-row__price dd {
  margin: 0;
}
.pf-pr-row__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: #555;
  font-size: 12px;
  line-height: 1.8;
}
.pf-pr-row__actions {
  flex: 0 0 170px;
}
.pf-pr-row__actions .pf-product-btns {
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pf-pr-row__actions .pf-btn {
  width: 100%;
  padding: 9px 6px;
  font-size: 12px;
}
.pf-pr-row__actions .pf-btn--primary {
  background: #f03c35;
}
.pf-pr-row__actions .pf-btn--outline {
  border-color: #d3d3d3;
  color: #333;
}
/* カタログ取得用の隠しフォームが縦積みの隙間を作らないようにする（JSからのsubmitは可能） */
.pf-pr-row__actions .pf-product-btns > form {
  display: none;
}

@media screen and (max-width: 1023px) {
  .pf-pr-points__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
  }
  .pf-pr-row__img {
    flex-basis: 160px;
  }
  .pf-pr-row__actions {
    flex-basis: 150px;
  }
}

@media screen and (max-width: 639px) {
  .pf-pr-points {
    padding: 16px;
  }
  .pf-pr-points__head {
    font-size: 16px;
  }
  .pf-pr-points__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* SPはカルーセルを全幅にする */
  .pf-pr-related__carousel {
    padding: 0;
  }
  /* SPはスワイプで送るため矢印は出さない */
  .pf-pr-related .swiper-button-prev,
  .pf-pr-related .swiper-button-next {
    display: none;
  }
  .pf-pr-others__makers {
    padding: 16px;
  }
  .pf-pr-others__maker-list {
    grid-template-columns: 1fr;
  }
  .pf-pr-others__list {
    padding: 12px;
  }
  /* SPは画像→本文→ボタンの縦積み */
  .pf-pr-row,
  .pf-pr-row__link {
    flex-direction: column;
  }
  .pf-pr-row__img {
    align-self: center;
    flex-basis: auto;
    width: 70%;
  }
  .pf-pr-row__actions {
    flex-basis: auto;
    width: 100%;
  }
}