@charset "utf-8";
/* =========================================================
   EG事業部ページ → アクティオ公式トンマナ変換CSS
   松本さん版 product_detail.css / product_detail_test.css を
   EG版HTML（#product, #detail_* 構造）に移植したもの
   HTMLは変更しない。CSSセレクタを松本クラス → EG版セレクタに置き換えている
========================================================= */

/* =========================================================
   common（松本さん版 .t18-products-detail, .products_detail_section 相当）
========================================================= */
.main-content.order-lg-2.w-75 {
  width: 100% !important;
  max-width: 100% !important;
  order: unset !important;
  overflow: visible !important;
  border: none;
  margin-bottom: 110px;
}

#product {
  font-family: 'Noto Sans JP', 'Helvetica Neue', sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #333;
  max-width: 100%;
  padding: 0 0 40px;
}

#product * {
  box-sizing: border-box;
}

#product img {
  max-width: 100%;
  height: auto;
}

#product a {
  transition: all 0.2s;
}

/* 注: 以前 #product 直下の p を一括非表示にするルールがあったが、
   メイン商品画像のp等まで誤って消してしまうため全廃。
   EG版raw HTML のp要素はそのまま表示する */

#product a:hover {
  opacity: 0.6;
}

/* セクション（.products_detail_section 相当） */
#detail_tokucyou,
#detail_gaikei,
#detail_shiyou,
#detail_shiryou,
#detail_faq,
#detail_toi {
  margin: 50px 0;
}

#product > h1 + #detail_tokucyou,
#product > #local-nav + #detail_tokucyou {
  margin-top: 30px;
}

/* 注: アンカー専用p の非表示も 副作用大のため廃止。
   EG版raw HTML をそのまま表示する */

/* =========================================================
   商品タイトルエリア（松本さん版 #products_detail_title / .products_detail_title_area）
   EG版は #product > h1 と #detail_tokucyou > p:first-of-type(strong.red)
   を視覚的に1つのタイトルボックスに見せる
========================================================= */

/* h1（商品名）= .products_detail_name 相当 */
#product > h1 {
  margin: 10px 0 15px;
  padding: 15px 20px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
  color: #333;
  background: #ffeaea;
  border-radius: 8px;
}

/* 「詳細」バッジ（松本さん版 .product_detail_icon 相当） */
#product > h1::before {
  content: "詳細";
  display: block;
  width: fit-content;
  padding: 4px 10px;
  margin: 0 0 10px;
  background: #c00;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

/* カテゴリ（strong.red含むp）= EG部と同様、テキストカラーのみで背景なし
   shorthand marginは使わず、margin-bottomのみ指定（margin-topは個別ルールで制御） */
#detail_tokucyou > p:first-of-type:has(> strong.red) {
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* h2直後のカテゴリpは上を詰める */
#detail_tokucyou > h2 + p:first-of-type:has(> strong.red) {
  margin-top: -15px;
}

#detail_tokucyou > p:first-of-type:has(> strong.red) strong.red {
  color: #c00;
  font-weight: bold;
}

/* h2は非表示にしない
   ページによっては複数商品を紹介していて、h2がセクションの意味を持つため
   h1と内容が被っていてもそのまま表示する */

/* メイン画像エリア
   元EG版のレイアウト（縦積み・元サイズ）をそのまま尊重する。
   画像の強制リサイズや横並び化はしない。
   親pには軽い余白を、imgには外形図と同じ額縁風（枠線＋白背景＋padding）を付与 */
#detail_tokucyou > p:has(> img) {
  margin: 0 0 20px;
}

/* メイン画像はEG版そのまま（枠線・背景・余白は付けない） */

/* タイトル直下のページ内ナビ(特徴/仕様/資料/FAQ/お問合せ先 のリンク)を非表示
   id="local-nav" のみピンポイントで対象。 他の要素には絶対影響しない */
#local-nav {
  display: none;
}

/* =========================================================
   セクションタイトル（松本さん版 .pd_section_title 相当）
   EG版: #detail_*内の h3 のうち、セクション最初の見出し
========================================================= */
/* h3 = 松本さん版 .pd_section_title 相当（下線4px）
   EG版の h3 は「特長」「付属品」「販売品」「外形図」「仕様」「機構とフロー」等の
   同列見出しに使われているので全部同じ装飾で統一する。
   ID無しの裸divに包まれた h3 にも当たるよう #product 配下の全h3を対象にする */
#product h3 {
  position: relative;
  display: block;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.5;
  margin: 40px auto 25px;
  padding: 0 0 10px;
  color: #333;
  border-bottom: 4px solid #ccc;
}

/* セクション先頭のh3は上マージン詰める */
#product > div > h3:first-of-type,
#detail_tokucyou > h3:first-of-type,
#detail_gaikei > h3:first-of-type,
#detail_shiyou > h3:first-of-type,
#detail_shiryou > h3:first-of-type,
#detail_faq > h3:first-of-type,
#detail_toi > h3:first-of-type {
  margin-top: 0;
}

/* h4 = h3より一段下のサブ見出し（左に赤アクセント線） */
#product h4 {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 25px 0 12px;
  padding: 4px 0 4px 12px;
  color: #333;
  border-left: 4px solid #a50000;
  background: none;
}

/* h2 = 装飾なし・フォントサイズで見せる（h1より小さく、h3とは別の階層感）*/
#detail_tokucyou > h2,
#detail_gaikei > h2,
#detail_shiyou > h2,
#detail_shiryou > h2,
#detail_faq > h2,
#detail_toi > h2 {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 30px 0 15px;
  padding: 0;
  color: #333;
  background: none;
  border: none;
}

/* セクション直後の最初のh2は上マージンを詰める */
#detail_tokucyou > h2:first-of-type,
#detail_gaikei > h2:first-of-type,
#detail_shiyou > h2:first-of-type,
#detail_shiryou > h2:first-of-type,
#detail_faq > h2:first-of-type,
#detail_toi > h2:first-of-type {
  margin-top: 0;
}

#detail_tokucyou h4,
#detail_gaikei h4,
#detail_shiyou h4,
#detail_shiryou h4,
#detail_faq h4,
#detail_toi h4 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 28px 0 10px;
  color: #333;
}

/* =========================================================
   本文テキスト（.products_detail_inner p, .pd_section_txt 相当）
========================================================= */
#detail_tokucyou p,
#detail_gaikei p,
#detail_shiyou p,
#detail_shiryou p,
#detail_faq p,
#detail_toi p {
  margin: 0 0 12px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.7;
}

/* ・項目リスト（EG版は <p>●項目1<br>●項目2</p> べた書き）
   松本さん版 .pd_section_list li の見た目を p内で再現するのは
   ・の前にmargin入れる程度しかできない */

/* =========================================================
   外形図エリア（EG版そのまま：装飾なし）
========================================================= */
#detail_gaikei p:has(> img) {
  margin: 20px 0;
}

#detail_gaikei img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   テーブル統一スタイル（B案：全テーブル共通の装飾）
   ─ 対象: detail_shiyou, detail_shiryou, detail_gaikei直下, detail_tokucyou table.table_box
   ─ #detail_tokucyou の通常table（class無し・特徴セクション内のレイアウト用）は
     装飾を当てず EG版そのまま（ブラウザデフォルト挙動）
========================================================= */

/* 親セクションに横スクロール（テーブルが画面より広い場合の保険） */
#detail_shiyou,
#detail_shiryou,
#detail_gaikei {
  overflow-x: auto;
}

/* テーブル装飾の適用条件 = JS(eg-override.js)が分析して .eg-data-table を付与した
   「絶対的な表組み」のみ。
   判定は eg-override.js の classify処理に集約（th/class=table_box/テキスト比率/入れ子table 等）
   それ以外（画像レイアウト用table、販売品の画像並び等）は装飾なし＝EG版そのまま */

/* 全テーブルのセル: フォントサイズと軽い余白を共通化(EG版同等の14px = 1.4rem)
   装飾(罫線・色)は .eg-data-table 限定 */
#product table th,
#product table td {
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 6px 8px;
}

/* データ表のラッパー: table が画面より広い時に横スクロールできる */
#product .eg-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 20px 0;
}

#product table.eg-data-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  text-align: left;
  table-layout: auto;
}

/* セル装飾（罫線・padding） */
#product table.eg-data-table th,
#product table.eg-data-table td {
  padding: 8px 10px;
  border: 1px solid #ccc !important;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
  background: #fff;
}

/* EG版の #cccccc 背景指定（インラインstyle / bgcolor属性）を #f1f1f1 に統一 */
#product table.eg-data-table [bgcolor="#cccccc"],
#product table.eg-data-table [style*="cccccc"] {
  background: #f1f1f1 !important;
  color: inherit !important;
}

/* th はグレー背景 */
#product table.eg-data-table th {
  background: #f1f1f1;
  font-weight: normal;
}

/* 1行目 = 赤ヘッダー（raw HTML の inline style を !important で上書き） */
#product table.eg-data-table > tbody > tr:first-child > th,
#product table.eg-data-table > tbody > tr:first-child > td,
#product table.eg-data-table > tr:first-child > th,
#product table.eg-data-table > tr:first-child > td {
  background: #a50000 !important;
  color: #fff !important;
  font-weight: bold;
}

/* 1行目赤帯セル内の span / font に inline color指定があっても白に強制
   raw HTML の <td class="code_new"><span style="color:#000000;">...</span></td> 構造を救済
   (赤背景に黒文字で潰れて読めなくなるのを防ぐ)
   さらに inline の背景色（<span style="background-color:#ffffcc">等）も透明化
   (赤帯の上に黄色背景＋白文字で見づらくなるのを防ぐ。赤帯以外の黄色背景はEG部本家どおり残す) */
#product table.eg-data-table > tbody > tr:first-child > th span,
#product table.eg-data-table > tbody > tr:first-child > th font,
#product table.eg-data-table > tbody > tr:first-child > td span,
#product table.eg-data-table > tbody > tr:first-child > td font,
#product table.eg-data-table > tr:first-child > th span,
#product table.eg-data-table > tr:first-child > th font,
#product table.eg-data-table > tr:first-child > td span,
#product table.eg-data-table > tr:first-child > td font {
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* PDFダウンロードを含むセルは白背景（1行目赤ヘッダーの例外） */
#product td:has(> a[href$=".pdf"]) {
  background: #fff !important;
  color: inherit !important;
}

/* table内の画像 */
#detail_tokucyou table img,
#detail_shiyou table img,
#detail_shiryou table img,
#detail_gaikei > table img {
  max-width: 100%;
  height: auto;
}

/* PDFダウンロードリンクを含むtdは常に白背景（1行目赤ヘッダーの例外）
   1行目赤ヘッダーのセレクタより詳細度が低いため !important で上書き */
#product td:has(> a[href$=".pdf"]) {
  background: #fff !important;
  color: inherit !important;
}

/* PDFダウンロードリンク: EG部本家に合わせアイコンのみ表示
   ※過去は ::before で「ダウンロード」 テキストを追加していたが、
   EG部との差分を最小化するためテキスト追加は廃止。 */
#product td a[href$=".pdf"]:hover {
  opacity: 0.7;
}

#product td a[href$=".pdf"] img {
  display: inline-block;
  vertical-align: middle;
  max-height: 20px;
  width: auto;
}

/* 補足コメント */
#detail_shiryou p.commet {
  font-size: 1.3rem;
  color: #666;
  margin: 10px 0;
}

/* 注: 以前 .faq_area / #detail_faq:has(.faq_area) を非表示にしていたが、
   .faq_area 内に本文がある場合まで消してしまうため全廃。
   EG版raw HTML をそのまま表示する */

/* FAQアコーディオン (raw HTMLの .accordion_one/.accordion_header/.accordion_inner 構造) */
#detail_faq .accordion_one {
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  margin: 10px 0;
  overflow: hidden;
}
#detail_faq .accordion_header {
  position: relative;
  padding: 14px 50px 14px 50px;
  background: #f7f7f7;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  border-left: 4px solid #c00;
  line-height: 1.5;
}
#detail_faq .accordion_header::before {
  content: "Q";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #c00;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 1.4rem;
}
#detail_faq .accordion_header::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  font-weight: normal;
  color: #888;
  transition: transform 0.2s;
}
#detail_faq .accordion_one.is-open > .accordion_header::after {
  content: "−";
}
#detail_faq .accordion_inner {
  display: none;
  padding: 16px 18px 16px 50px;
  background: #fff;
  font-size: 1.4rem;
  line-height: 1.7;
  position: relative;
  border-top: 1px solid #eee;
}
#detail_faq .accordion_one.is-open > .accordion_inner {
  display: block;
}
#detail_faq .accordion_inner::before {
  content: "A";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 24px;
  height: 24px;
  background: #666;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 1.4rem;
  font-weight: bold;
}

#detail_faq dl {
  margin: 20px 0;
  padding: 0;
}

#detail_faq dt {
  position: relative;
  padding: 15px 15px 15px 50px;
  background: #f7f7f7;
  border-left: 4px solid #c00;
  margin: 10px 0 0;
  font-weight: bold;
  font-size: 1.4rem;
}

#detail_faq dt::before {
  content: "Q";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #c00;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
}

#detail_faq dd {
  position: relative;
  padding: 15px 15px 15px 50px;
  margin: 0 0 10px;
  border-left: 4px solid #ddd;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1.7;
}

#detail_faq dd::before {
  content: "A";
  position: absolute;
  left: 15px;
  top: 15px;
  width: 24px;
  height: 24px;
  background: #666;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
}

/* =========================================================
   お問い合わせ（松本さん版 .products_detail_contact 相当）
   特別な装飾なし。h3は他セクションと同じ下線見出し、本文も通常スタイル
========================================================= */

/* =========================================================
   ピンポイント非表示
   ※ class="pagetop" がEG版で「▲このページのTOPへ」以外のpにも付与されてる
      ケースがあるため、CSSの一括非表示は使わずJS側でテキスト判定して非表示にする */

/* スクロールアンカー専用<a> (id+name両方あり/href無し/中身空 のみ・通常リンクには絶対に当たらない) */
#product a[id][name]:not([href]):empty {
  display: none;
}

/* =========================================================
   レスポンシブ（松本さん版 max-width: 750px 準拠）
   EG版セレクタに移植し、松本さん版の SP 調整を再現
========================================================= */
@media screen and (max-width: 750px) {
  /* 基本フォント（松本さん .pd_section_txt_area 相当 2.8rem ベース） */
  #product {
    font-size: 2.8rem;
    line-height: 1.6;
  }

  /* h1 = 松本さん版 .products_detail_name 相当
     SPでは「詳細」バッジをblockにして上に積み、h1の padding は全辺20px均等に */
  #product > h1 {
    font-size: 4.6rem;
    padding: 20px;
  }
  #product > h1::before {
    display: block;
    position: static;
    width: fit-content;
    margin: 0 0 10px;
    font-size: 2.4rem;
    padding: 6px 12px;
  }

  /* h2 = 商品名の副題（EG版独自） */
  #detail_tokucyou > h2,
  #detail_gaikei > h2,
  #detail_shiyou > h2,
  #detail_shiryou > h2,
  #detail_faq > h2,
  #detail_toi > h2 {
    font-size: 3.6rem;
    margin: 30px 0 20px;
  }

  /* h3 = 松本さん版 .pd_section_title 相当 4.2rem */
  #product h3 {
    font-size: 4.2rem;
    padding: 0 0 15px;
    margin: 50px auto 25px;
  }

  /* h4 = 左赤アクセント線付き小見出し */
  #product h4 {
    font-size: 3.0rem;
    padding: 6px 0 6px 16px;
    margin: 30px 0 15px;
  }

  /* 本文p */
  #detail_tokucyou p,
  #detail_gaikei p,
  #detail_shiyou p,
  #detail_shiryou p,
  #detail_faq p,
  #detail_toi p {
    font-size: 2.8rem;
    line-height: 1.6;
  }

  /* カテゴリ赤文字 */
  #detail_tokucyou > p:first-of-type:has(> strong.red) strong.red {
    font-size: 2.6rem;
  }

  /* ul li */
  #product ul li {
    font-size: 2.8rem;
    line-height: 1.6;
  }

  /* 仕様・資料・特長のtable全般 = 松本さん .specx-table / .products_detail_spec_table 相当 */
  #detail_shiyou table th,
  #detail_shiyou table td,
  #detail_shiyou .table_box th,
  #detail_shiyou .table_box td,
  #product table.table_box th,
  #product table.table_box td,
  #detail_shiryou table th,
  #detail_shiryou table td {
    font-size: 2.4rem;
    padding: 12px 20px;
  }

  /* SPでは画像をmax-width:100%に確実に */
  #product img {
    max-width: 100%;
    height: auto;
  }

  /* お問い合わせ先電話番号など */
  #detail_toi .toiawase {
    font-size: 2.8rem;
    line-height: 1.6;
  }

  /* 資料PDFダウンロードリンク */
  #product td a[href$=".pdf"] {
    font-size: 2.4rem;
  }

  /* 問い合わせフォームボタン（JSで挿入した松本さんクラス準拠） */
  .products_detail_contact_area form button {
    min-width: 100%;
    min-height: 100px;
    line-height: 96px;
    font-size: 3.4rem;
    margin: 0 0 40px 0;
  }

  /* 戻るリンク */
  .products_detail_back a {
    padding: 20px 90px;
    font-size: 3.4rem;
  }

  /* セクション間マージンをSP用に調整 */
  #detail_tokucyou,
  #detail_gaikei,
  #detail_shiyou,
  #detail_shiryou,
  #detail_faq,
  #detail_toi {
    margin: 40px 0;
  }

  /* パンくず：公式base.cssは途中の項目を折り返さない（最後の項目だけ折り返す）。
     移植ページは【詳細】の1段が加わり、長い商品名が途中の項目に来て横にはみ出すため、途中の項目も折り返せるようにする（2026-09-30） */
  .t18-breadcrumb ul > li {
    flex-shrink: 1;
  }
}