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

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

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

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

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

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

/* =============================================================
   設備カテゴリブロック（写真＋一覧、交互配置）
   ============================================================= */
.eq-block { padding: 48px 0; }
.eq-block__inner {
  width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: 24px;
}
.eq-block__inner--split {
  display: flex; align-items: flex-start;
  /* 写真・テーブルどちらを左右に置くかはHTML側の並び順で決める（row-reverse不使用） */
}

.eq-block__body { flex: 1 1 55%; min-width: 0; }
.eq-block__media { flex: 1 1 30%; min-width: 0; align-self: flex-start; }
.eq-block__media figure {
  overflow: hidden;
  margin: 0;
}
.eq-block__media img { width: 100%; height: auto; display: block; }

.eq-head__label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 108px; padding: 8px 18px;
  background: var(--teal); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .12em; text-align: center;
}

/* 設備一覧テーブル（モック準拠：帯ゼブラ＋メーカー/型式で行結合） */
.eq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.eq-table th,
.eq-table td {
  padding: 11px 16px;
  text-align: left;
  font-weight: 400;
  color: #3a312d;
  vertical-align: middle;
}
.eq-table th {
  font-weight: 700;
  color: var(--ink);
}
/* 行結合セル（rowspan）は縞模様に関わらず白で統一。それ以外は行ごとに縞模様 */
.eq-table th[rowspan],
.eq-table td[rowspan] { background: #fff; }
.eq-table tbody tr:nth-child(odd)  th:not([rowspan]),
.eq-table tbody tr:nth-child(odd)  td:not([rowspan]) { background: #eaf4f4; }
.eq-table tbody tr:nth-child(even) th:not([rowspan]),
.eq-table tbody tr:nth-child(even) td:not([rowspan]) { background: #fff; }
/* プレス機テーブルのみ縞模様が逆（添付モック準拠） */
#press .eq-table tbody tr:nth-child(odd)  th:not([rowspan]),
#press .eq-table tbody tr:nth-child(odd)  td:not([rowspan]) { background: #fff; }
#press .eq-table tbody tr:nth-child(even) th:not([rowspan]),
#press .eq-table tbody tr:nth-child(even) td:not([rowspan]) { background: #eaf4f4; }
.eq-table__qty {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  color: var(--navy);
}
.eq-table__qty-note {
  display: block;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  color: #6b625d;
  margin-top: 2px;
}

/* その他（写真なし・全幅テーブル）：.eq-block__innerの中でさらに右寄せにし、
   右端が#measure等の.eq-block__inner--split内メディア（右配置）と正確に揃うようにする。
   （.eq-block__inner--fullは.eq-block__innerの子要素として入れ子にする） */
.eq-block__inner--full { max-width: 780px; margin-left: auto; margin-right: 0; }

/* =============================================================
   最終CTA帯
   ============================================================= */
.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 を前置してクラス2つ分の詳細度にし、assets/sankyo-global.css の
   body.skss-subpage p { margin:0; } リセット（詳細度: 1クラス+2要素）に
   margin-bottomが打ち消されないようにする */
.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; }
.btn-cta--outline {
  background: transparent; color: var(--ink); border: 2px solid var(--ink);
  padding: 12px 32px;
}
.btn-cta--outline:hover { background: var(--ink); color: #fff; opacity: 1; }

/* =============================================================
   FAQ（service.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: 920px) {
  .eq-block__inner--split { flex-direction: column; }
  .eq-block__media, .eq-block__body { flex: 1 1 100%; width: 100%; }
  .eq-block__media { max-width: 420px; margin-inline: auto; width: 100%; }
  .eq-table { font-size: 14px; }
  .eq-table th, .eq-table td { padding: 9px 10px; }

  /* ①14px下限ルールのsafety net（font-size:1rem固定）をモバイルのみ解除 */
  .eq-page p, .eq-page li, .eq-page dd, .eq-page dt,
  .eq-page td, .eq-page th, .eq-page summary, .eq-page label { font-size: unset; }

  /* ②写真・テーブルどちらを左右に置くかはHTML側の並び順で決まる（row-reverse不使用）ため、
     列積みになるモバイルでは並び順によって画像が下に来てしまう設備がある。
     orderで強制的に画像を常に先頭（上）にする */
  .eq-block__media { order: -1; }

  /* ③eq-cta__leadのtext-alignをモバイルのみ左寄せに（eq-cta自体・btn-cta等は中央のまま） */
  .eq-cta .eq-cta__lead { text-align: left; }

  /* ④eq-block__innerの左右余白をモバイルのみ15pxに */
  .eq-block__inner { padding-inline: 15px; }
}

@media (max-width: 560px) {
  .eq-intro { padding: 40px 0 4px; }
  .eq-block { padding: 36px 0; }
  .eq-head__label { min-width: 96px; font-size: 15px; padding: 7px 14px; }
  .eq-list li { font-size: 15px; }
  .faq { padding: 48px 0 56px; }
}