@charset "UTF-8";
/* =============================================================
   有限会社三共製作所 — 製品紹介ページ専用スタイル (product.css)
   対応テンプレート: page-product.php（Template Name: 製品紹介）
   画像参照は product.css と同階層の images/ を相対参照

   共通パーツ（ヘッダー／パンくず／page-title／フッター／ベースリセット）は
   assets/sankyo-global.css の「サブページ共通パーツ」セクションを利用
   （body.skss-subpage スコープ）。このファイルは製品紹介ページ専用の
   ブロックスタイルのみを扱う。
   ============================================================= */

:root {
  --panel: #efece9;
  --white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }

.en {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: .08em;
}

/* 14px下限ルールの safety net */
.pr-page p, .pr-page li, .pr-page dd, .pr-page dt,
.pr-page td, .pr-page th, .pr-page summary, .pr-page label { font-size: 1rem; }
.pr-page small { font-size: 14px; }

/* =============================================================
   イントロ（結論要約）
   ============================================================= */
.pr-intro { padding: 56px 0 30px; }
.pr-intro__inner { width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: 24px; }
.pr-intro__lead { font-size: clamp(17px, 2vw, 19px); line-height: 2; color: #3a312d; }
.pr-intro__lead strong { color: var(--teal); }

/* =============================================================
   セクション共通（加工製品例 / 加工事例）
   ============================================================= */
.pr-section { padding: 48px 0; }
#products { background: var(--panel); }
.pr-section__inner { width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: 24px; }

/* 見出し（事業内容ページの biz-head と共通デザイン。詳細は service.css 参照） */
.biz-head {
  position: relative;
  margin-bottom: 24px;
  --biz-head-jp-x: 0%;
  --biz-head-jp-y: 0%;
}
.biz-head__deco {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.biz-head__jp {
  position: absolute;
  left: calc(9% + var(--biz-head-jp-x));
  bottom: calc(29% + var(--biz-head-jp-y));
  margin: 0;
  font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; letter-spacing: .06em;
  color: var(--teal);
  white-space: nowrap;
}

/* ---------- 加工製品例：写真+名称+工法の交互ブロック ---------- */
.pr-block { padding: 32px 0; }
.pr-block:first-of-type { border-top: 1px solid #d9d4cf; }
.pr-block__inner {
  display: flex; align-items: center;
}
.pr-block:nth-of-type(even) .pr-block__inner { flex-direction: row-reverse; }
.pr-block__body { flex: 1 1 55%; min-width: 0; margin-left: 20px; }
/* id="products"内、画像が右側にあるpr-block--alt（カバー・コネクター）はbodyを右寄せに。
   margin-leftは適用せず、代わりにmargin-right: 20pxを付与（画像側に寄せるため） */
#products .pr-block--alt .pr-block__body { text-align: right; margin-left: 0; margin-right: 20px; }
.pr-block__name {
  display: block; font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
@media (min-width: 781px) {
  .pr-block__name { font-size: 25px; }
}
.pr-block__name::after {
  content: ""; display: block; height: 2px; margin-top: 8px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 50%, transparent 100%);
}
.pr-block__process { font-size: 16px; color: var(--gray); }
.pr-block__media { flex: 1 1 45%; min-width: 0; max-width: 260px; }
.pr-block__media img { width: 100%; object-fit: contain; display: block; }

/* ---------- 加工事例：材質・板厚スペックカード ---------- */
.pr-spec {
  display: flex; align-items: flex-start; gap: clamp(28px, 5vw, 56px);
  padding: 32px 0;
}
.pr-spec:first-of-type { border-top: 1px solid #d9d4cf; }
.pr-spec__media { flex: 1 1 80%; min-width: 0; max-width: 280px; }
.pr-spec__media figure {
  border-radius: 4px; overflow: hidden; box-shadow: 0 12px 30px rgba(35,24,21,.12); background: #fff;
}
.pr-spec__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* 画像2枚並びの箇所は、1枚あたりが単体画像と同じ大きさになるようmax-widthを2倍+gap分に拡張。
   その分right側のpr-spec__tableはflexで自動的に縮小する */
.pr-spec__media--pair { display: flex; gap: 10px; max-width: 570px; }
.pr-spec__media--pair figure { flex: 1 1 50%; }

.pr-spec__table { flex: 1 1 60%; }
.pr-spec__row {
  display: flex; align-items: center; padding: 10px 4px;
}
.pr-spec__row:first-child { border-bottom: 1px solid #d9d4cf; }
.pr-spec__row dt {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.5em;
  padding: 6px 18px 6px 12px;
  margin-right: 14px;
  background: var(--navy);
  color: #fff;
  font-size: 14px; font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}
.pr-spec__row dd { flex: 1 1 auto; color: var(--teal); font-size: 17px; font-weight: 700; }
.pr-spec__row--note dt { display: none; }
.pr-spec__row--note dd { color: var(--gray); font-size: 14px; font-weight: 400; }
.pr-spec__row--indent dt { visibility: hidden; }

/* =============================================================
   最終CTA帯（主要設備ページのeq-ctaと共通デザイン。詳細はequipment.css参照）
   ============================================================= */
.eq-cta { padding: 56px 0 72px; background: var(--panel); text-align: center; }
.eq-cta__inner { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: 24px; }
.eq-cta .eq-cta__lead { font-size: 17px; line-height: 1.9; color: #3a312d; margin-bottom: 24px; }

.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--teal); color: #fff;
  padding: 14px 34px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .06em;
}
.btn-cta:hover { background: var(--teal-dark); opacity: 1; }

/* =============================================================
   FAQ（equipment.css / service.css / company.cssと同一仕様。ページごとに読み込みが分かれるため重複定義）
   ============================================================= */
.faq { padding: 72px 0 88px; }
.faq__inner { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: 24px; }
.faq__heading { text-align: center; margin-bottom: 36px; }
.faq__heading-en { display: block; font-size: clamp(28px, 4vw, 44px); color: var(--ink); line-height: 1; }
.faq__heading-jp { display: block; margin-top: 10px; font-size: 15px; letter-spacing: .3em; color: var(--teal); }
.faq-item {
  border-bottom: 1px solid #d9d4cf; padding: 20px 4px;
}
.faq-item:first-of-type { border-top: 1px solid #d9d4cf; }
.faq-item__q {
  cursor: pointer; list-style: none; font-weight: 700; font-size: 17px;
  padding-right: 32px; position: relative; line-height: 1.7;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: translateY(-65%) rotate(45deg); transition: transform .2s;
}
.faq-item[open] .faq-item__q::after { transform: translateY(-35%) rotate(-135deg); }
.faq-item__q .faq-item__mark { color: var(--teal); font-family: "Bebas Neue", sans-serif; margin-right: 10px; }
.faq-item__a { margin-top: 14px; font-size: 16px; line-height: 1.95; color: #3a312d; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 780px) {
  .pr-block__inner,
  .pr-block:nth-of-type(even) .pr-block__inner { flex-direction: column; }
  .pr-block__media, .pr-block__body { flex: 1 1 100%; width: 100%; }
  .pr-block__media { order: -1; max-width: 220px; margin-inline: auto; }

  .pr-spec { flex-direction: column; }
  .pr-spec__media, .pr-spec__table { flex: 1 1 100%; width: 100%; }
  .pr-spec__media { max-width: 320px; margin-inline: auto; }

  .pr-intro__lead .br-pc { display: none; }

  /* 14px下限ルールのsafety net（font-size:1rem固定）をモバイルのみ解除し、
     margin-bottomを追加 */
  .pr-page p, .pr-page li, .pr-page dd, .pr-page dt,
  .pr-page td, .pr-page th, .pr-page summary, .pr-page label {
    font-size: unset;
    margin-bottom: 30px;
  }
  /* 上のmargin-bottom:30pxは、パンくず・ハンバーガーメニュー・フッターなど
     ページ本文以外の共通パーツのli/dtにも意図せず効いてしまい、他のサブページと
     見た目が変わってしまっていた（パンくずの余白・ナビメニューの間隔・
     footer__address dt/ddの余白）。該当箇所だけ0に打ち消し、他のサブページと統一する */
  .pr-page .breadcrumb li,
  .pr-page .gnav__list li,
  .pr-page .footer__address dt,
  .pr-page .footer__address dd,
  .pr-page .pr-spec__row dt,
  .pr-page .pr-spec__row dd {
    margin-bottom: 0;
  }

  /* eq-cta__leadをモバイルのみ左寄せに（equipment.cssと同じデザインを共有しているが
     別ファイルのため、equipment.css側の対応がこちらには反映されていなかった） */
  .eq-cta .eq-cta__lead {
    text-align: left;
  }

  /* ②pr-intro__leadのmargin-bottomは、body.skss-subpage p{margin:0}リセット
     （詳細度1クラス+2要素）に単純な.pr-intro__lead（詳細度1クラスのみ）だと
     負けてしまうため、body.skss-subpageを前置して詳細度2クラスに引き上げ、
     確実に効くようにする */
  body.skss-subpage .pr-intro__lead {
    margin-bottom: 20px;
  }

  /* ③加工製品例セクション：pr-block__bodyの上にmargin-topを追加 */
  .pr-block__body {
    margin-top: 15px;
  }

  /* ④pr-block--alt（カバー・コネクター等、PCでは右寄せ）は、モバイルで
     margin-left:0のままだったため、1つ目のストレーナー（非altの左寄せ）と
     左端の余白が揃わずズレて見えていた。非alt側と同じmargin-leftに揃える */
  #products .pr-block--alt .pr-block__body {
    margin-left: 20px;
    margin-right: 0;
    text-align: left;
  }

  /* pr-block__name/pr-block__processは、1つ目のストレーナー（.pr-block--alt無し＝
     左寄せ）に揃えて、alt側（右寄せ）も含め全て左寄せに統一 */
  .pr-block__name,
  .pr-block__process {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .pr-intro { padding: 40px 0 4px; }
  .pr-section { padding: 36px 0; }
  .faq { padding: 48px 0 56px; }
}