/* =========================================================
   pages.css
   ページ固有・ページ形式固有：トップ、カテゴリ、商品詳細、
   図面、企業情報、FAQ、カタログなど
========================================================= */

/* カテゴリ一覧ページ */
/* =========================================================
   光学部品ページ：製品リンクの階層表示
   上位項目は細い縦線、下位項目は矢印で区別します。
========================================================= */
.product-hierarchy {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.product-hierarchy ul {
  margin: 8px 0 2px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.category-card .product-hierarchy li {
  position: relative;
  padding-left: 1.15em;
}

/* 通常の丸アイコンを消して、上位・下位で別デザインにします */
.category-card .product-hierarchy li::before {
  background: none;
  border-radius: 0;
}

/* 上位階層：細い縦線 */
.category-card .product-hierarchy .product-parent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 2px;
  height: 1.15em;
  background: var(--accent);
}

/* 下位階層：矢印風 */
.category-card .product-hierarchy .product-child {
  margin-left: 0.8em;
  padding-left: 1em;
  font-size: 0.95em;
  color: var(--muted);
}

.category-card .product-hierarchy .product-child::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--accent);
  font-weight: 900;
  line-height: 1.75;
}

/* =========================================================
   光学部品ページ：商品一覧を2カラム表示
   PCでは上から下へ読ませる2列の段組みにし、
   スマホではHTMLの並び順そのままに1列表示にします。

   ※ .product-hierarchy を含む商品一覧だけを対象にするため、
      トップページなど他の .category-grid には影響しにくい指定です。
========================================================= */
.category-grid:has(.product-hierarchy) {
  display: block;
  column-count: 2;
  column-gap: 24px;
}

.category-grid:has(.product-hierarchy) .category-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 24px;
  break-inside: avoid;
}

.category-grid:has(.product-hierarchy) .category-card .product-hierarchy {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .category-grid:has(.product-hierarchy) {
    column-count: 1;
  }
}

/* =========================================================
   テストチャート一覧ページ：商品一覧アイコン
   testchart-list のリンク前アイコンを丸から細い縦線に変更します。
   index.html の製品カテゴリ縦線指定と併用するため、最後に追加しています。
========================================================= */

/* =========================================================
   スケール・寸法基準一覧ページ：親子階層表示
   standard_top.html の親商品は細い縦線、ぶら下がりタイプは矢印で表示します。
========================================================= */
.scale-product-panel .scale-hierarchy {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.scale-product-panel .scale-hierarchy ul {
  margin: 10px 0 2px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
}

.scale-product-panel .scale-parent,
.scale-product-panel .scale-child {
  position: relative;
  padding-left: 1.15em;
}

.scale-product-panel .scale-parent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 2px;
  height: 1.15em;
  border-radius: 0;
  background: var(--accent);
}

.scale-product-panel .scale-parent > a {
  font-weight: 900;
  color: var(--brand);
}

.scale-product-panel .scale-child {
  margin-left: 0.8em;
  padding-left: 1em;
  font-size: 0.95em;
  color: var(--muted);
}

.scale-product-panel .scale-child::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--accent);
  font-weight: 900;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .scale-product-panel .scale-hierarchy ul {
    grid-template-columns: 1fr;
  }
}

/* ===== page-drawing.css ===== */
/* 図面ページ用CSS：standard/1size / test_chart/3size / test_chart/6size など */
/* =========================================================
   図面拡大ページ：詳細図表示
   test_chart/6size.html など、図面画像を見やすく表示するページです。
========================================================= */
.drawing-grid {
  display: grid;
  gap: 28px;
}

.drawing-card {
  scroll-margin-top: 170px;
}

.drawing-card h2 {
  margin-bottom: 14px;
}

.drawing-image-link {
  display: block;
  background: #fff;
  overflow: hidden;
}

.drawing-image-link img {
  display: block;
  width: 100%;
  height: auto;
}

.drawing-caption {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: right;
}

.drawing-nav {
  margin-top: 18px;
}

@media (max-width: 640px) {
  .drawing-card {
    scroll-margin-top: 24px;
  }

  .drawing-caption {
    text-align: left;
  }
}

/* 図面ページはサイドメニューを置かないため、本文を1カラム全幅で表示 */
.content-layout.content-layout-wide {
  grid-template-columns: minmax(0, 1fr);
}

.product-detail-wide {
  width: 100%;
  min-width: 0;
}

/* トップページ */
/* =========================================================
   06. トップページのヒーロー
   ファーストビューの大きな画像とキャッチコピー部分です。
========================================================= */
.hero {
  background: linear-gradient(135deg, var(--bg-soft), #ffffff);
  padding: 42px 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}

.hero-image {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-soft);
}

.hero-image img {
  width: 100%;
  display: block;
}

.hero-copy {
  padding: 10px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--brand-2);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.hero h1 {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.35;
  margin: 0.1em 0 0.35em;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.25;
  margin: 0.1em 0 0.35em;
}

.hero p,
.page-hero p {
  color: var(--muted);
  font-size: 1.05rem;
}

/* =========================================================
   トップページ：インフォメーション下の技術情報リンク
   知識系リンクを3個に絞り、PCでは横長カードとして見せます。
========================================================= */
.information-section .info-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.information-section .info-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.information-section .info-quick-grid .quick-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 96px;
  padding: 20px;
  text-align: left;
}

.information-section .info-quick-grid .quick-card img {
  width: 56px;
  flex: 0 0 auto;
}

.information-section .info-quick-grid .quick-card span {
  line-height: 1.55;
}

@media (max-width: 900px) {
  .information-section .info-quick-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== page-product.css ===== */
/* 商品詳細ページ */
/* テストチャート詳細ページ：戻るリンク・関連リンク */

.product-detail.product-detail-wide {
  width: 100%;
}

.related-products-panel {
  margin-top: 30px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.related-products-panel h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.related-products-panel p {
  margin: 0 0 16px;
  color: var(--muted);
}

.related-products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-products-grid li {
  position: relative;
  padding-left: 1.15em;
}

.related-products-grid li::before,
.side-list .current-page::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 2px;
  height: 1.15em;
  border-radius: 0;
  background: var(--accent);
}

@media (max-width: 640px) {
  .related-products-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   テストチャート詳細ページ：C案修正
   商品詳細カード内の下部CTAを中央寄せし、関連リンクはカード外に配置します。
========================================================= */
.product-detail .product-detail-cta {
  justify-content: center;
  margin-top: 28px;
}

.related-products-panel.related-products-panel-outside {
  margin-top: 22px;
}

@media (max-width: 640px) {
  .product-detail .product-detail-cta {
    align-items: stretch;
  }

  .product-detail .product-detail-cta .button {
    flex: 1 1 100%;
  }
}

/* =========================================================
   商品詳細ページ：型番・価格サマリー
   価格表の前に主要な型番と定価を分かりやすく表示します。
========================================================= */

/* =========================================================
   ロンキー・ルーリング詳細ページ：価格帯サマリー
   型番が多い商品のため、価格帯ごとに主要仕様をまとめて表示します。
========================================================= */

.product-photo-grid.product-photo-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.table-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

@media (max-width: 980px) {
  .price-summary-grid.price-summary-grid-3,
  .product-photo-grid.product-photo-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ガラス基準スケール詳細ページ：旧コンテンツを最新デザインで表示
   standard.html の既存本文・表を、現在のカード/表デザインに合わせます。
========================================================= */
.standard-detail > h3,
.standard-detail .sho_h3 h3 {
  margin: 34px 0 14px;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  color: var(--brand);
}

.standard-detail .sho_h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  border-bottom: 1px solid var(--line);
}

.standard-detail .sho_h3 h3 {
  margin: 0 0 12px;
}

.standard-detail .sho_form a,
.standard-detail .pdf a,
.standard-detail .sta_jqa_pdf a,
.company-page .pdf a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.standard-detail .sho_form a:hover,
.standard-detail .pdf a:hover,
.standard-detail .sta_jqa_pdf a:hover,
.company-page .pdf a:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.standard-detail .sho_pr ul {
  margin: 20px 0;
  padding: 18px 20px;
  list-style: none;
  display: grid;
  gap: 8px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
}

.standard-detail .sho_pr li {
  margin: 0;
}

.standard-detail .img1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 30px;
}

.standard-detail .img1_1,
.standard-detail .std_img1 {
  background: #fff;
  padding: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

.standard-detail .img1_1 img,
.standard-detail .std_img1 img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}

.standard-detail .table-guide,
.standard-detail .std_clc.table-guide {
  margin: 22px 0 12px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.standard-detail .table-guide p,
.standard-detail .std_clc.table-guide p {
  margin: 0;
}

.standard-detail .stdTable,
.standard-detail .tes_Table2 {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.standard-detail .stdTable table,
.standard-detail .tes_Table2 table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.standard-detail .stdTable th,
.standard-detail .stdTable td,
.standard-detail .tes_Table2 th,
.standard-detail .tes_Table2 td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}

.standard-detail .stdTable th,
.standard-detail .tes_Table2 th {
  background: var(--bg-soft);
  color: var(--brand);
  white-space: nowrap;
  font-weight: 400;
}

.standard-detail .stdTable tr > *:last-child,
.standard-detail .tes_Table2 tr > *:last-child {
  border-right: 0;
}

.standard-detail .stdTable tr:last-child > *,
.standard-detail .tes_Table2 tr:last-child > * {
  border-bottom: 0;
}

.standard-detail .std_clc2,
.standard-detail .sta_jqa,
.standard-detail .mar1,
.standard-detail .mar1b,
.standard-detail .marb2 {
  color: var(--muted);
}

.standard-detail .sta_jqa {
  margin: 18px 0 10px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
}

.standard-detail .red {
  color: #b42318;
}

.standard-detail .t_bold {
  font-weight: 400;
}

.standard-detail .Table_order,
.renewal-content .Table_order {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 38px;
}

.standard-detail .Table_order .button,
.renewal-content .Table_order .button {
  min-width: 160px;
}

.standard-detail .product-actions,
.renewal-content .product-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 38px;
}

.standard-detail .product-actions .button,
.renewal-content .product-actions .button {
  min-width: 160px;
}

@media (max-width: 900px) {
  .standard-detail .mini_list ul,
  .standard-detail .img1 {
    grid-template-columns: 1fr;
  }

  .standard-detail .sho_h3 {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   テストチャート詳細ページ：ガラススケールページと同じ表現に統一
   価格サマリーを前面に出さず、表の読みやすさを優先します。
========================================================= */
.standard-detail .table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.standard-detail .table-scroll table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.standard-detail .table-scroll th,
.standard-detail .table-scroll td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}

.standard-detail .table-scroll th {
  background: var(--bg-soft);
  color: var(--brand);
  white-space: nowrap;
}

.standard-detail .table-scroll tr > *:last-child {
  border-right: 0;
}

.standard-detail .table-scroll tr:last-child > * {
  border-bottom: 0;
}

.standard-detail .table-scroll img {
  max-width: 130px;
  height: auto;
}

.standard-detail .table-scroll a span {
  display: inline-block;
  margin-top: 6px;
  font-weight: 800;
}

.standard-detail .product-photo-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .standard-detail .product-photo-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   解像度チャート：横持ち仕様表の太字指定を調整
   最終列全体ではなく、型番行と定価行だけを強調します。
========================================================= */
.standard-detail .table-scroll.product-spec-table td {
  font-weight: 400;
  color: var(--text);
}

/* =========================================================
   テストチャート詳細ページ：価格表内の詳細図サムネイル調整
   表セルいっぱいに広がらないよう、詳細図だけ小さく固定します。
========================================================= */
.standard-detail .table-scroll td img {
  max-width: 86px;
  width: 86px;
  height: auto;
  display: block;
  margin: 0 auto 4px;
}

.standard-detail .table-scroll td a span {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.86rem;
  line-height: 1.4;
}

/* 解像度チャートは横持ち表なので、詳細図の行だけ同じサイズにします */
.standard-detail .product-spec-table tr:last-child td img {
  max-width: 86px;
  width: 86px;
}

/* =========================================================
   テストチャート詳細ページ：詳細図サムネイルサイズをページ別に調整
   解像度チャートは2商品なので少し大きめ、ロンキー・ルーリングは一覧性を優先して小さめにします。
========================================================= */
/* 共通：表内リンク画像は中央寄せ */
.standard-detail .table-scroll td img,
.standard-detail .tes_Table2 td img {
  height: auto;
  display: block;
  margin: 0 auto 4px;
}

/* 解像度チャート test_chart01.html：横持ち仕様表の詳細図だけ大きめ */
.standard-detail .product-spec-table tr:last-child td img,
.standard-detail .resolution-chart-table td img {
  max-width: 130px;
  width: 130px;
}

/* ロンキー・ルーリング test_chart05.html：商品数が多いので小さめ */

.standard-detail .table-scroll td a span,
.standard-detail .tes_Table2 td a span {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.86rem;
  line-height: 1.4;
}

/* =========================================================
   ガラス基準スケール詳細ページ：ページ内メニュー・資料ボタン復旧
   standard.html のページ内メニューをカード状にし、
   カタログ・検査証明書ボタンに画像アイコンを表示します。
========================================================= */
.page-section-nav {
  margin: 0 0 22px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.page-section-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 22px;
}

.page-section-nav li {
  position: relative;
  padding-left: 1.15em;
}

.page-section-nav li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 2px;
  height: 1.15em;
  background: var(--accent);
}

.page-section-nav a {
  font-weight: 800;
}

.standard-detail .pdf a.document-button,
.standard-detail .sta_jqa_pdf a.document-button,
.info-page .pdf a.document-button {
  gap: 8px;
  padding: 9px 16px;
}

.standard-detail .pdf a.document-button::before,
.standard-detail .sta_jqa_pdf a.document-button::before,
.info-page .pdf a.document-button::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.standard-detail .pdf a.document-button-catalog::before,
.info-page .pdf a.document-button-catalog::before {
  background-image: url("../images/ico_Catalog.png");
}

.standard-detail .sta_jqa_pdf a.document-button-certificate::before {
  background-image: url("../images/ico_Certificate.png");
}

.standard-detail .pdf a.document-button::after,
.standard-detail .sta_jqa_pdf a.document-button::after,
.info-page .pdf a.document-button::after {
  content: "›";
  font-weight: 900;
  color: var(--accent);
  margin-left: 2px;
}

@media (max-width: 900px) {
  .page-section-nav ul {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ガラス基準スケール：製品種類ごとの大枠復旧
========================================================= */
.standard-detail.standard-detail-separated {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.standard-detail-separated .product-kind-block {
  margin: 0 0 28px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.standard-detail-separated .product-kind-block:last-child {
  margin-bottom: 0;
}

.standard-detail-separated .sho_h3 {
  margin-top: 0;
}

.standard-detail-separated .sho_h3 h3 {
  margin-top: 0;
}

.standard-detail-separated .product-kind-block > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .standard-detail-separated .product-kind-block {
    padding: 20px;
    margin-bottom: 22px;
  }
}

/* Additional layouts: products02.html and work.html */
/* products02.html / work.html 共通 */
.renewal-content{max-width:1120px}
.renewal-content>p,.renewal-content>em{display:block;max-width:900px;margin:0 0 24px}
.renewal-content h3{margin:56px 0 20px;padding:14px 18px;border-left:4px solid var(--accent);background:var(--bg-soft);color:var(--brand);font-size:clamp(1.25rem,2vw,1.6rem)}
.renewal-content h4{margin:34px 0 14px;color:var(--brand);font-size:1.15rem}
.renewal-content img{max-width:100%;height:auto}
.renewal-content .wor_menu ul{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 42px;padding:0;list-style:none}
.renewal-content .wor_menu a{display:block;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700}
.renewal-content .sho_h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 0 20px;
  padding:0 0 14px;
  border-bottom:1px solid var(--line);
}

.renewal-content .sho_h3 h2{
  flex:1;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--brand);
  font-size:clamp(1.3rem,2vw,1.6rem);
  line-height:1.5;
}

.renewal-content .Table_form{margin:32px 0 56px;text-align:center}
.renewal-content .img1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}
.renewal-content .img1_1{overflow:hidden;padding:12px;background:#fff;text-align:center}
.renewal-content .img1_1 img{display:block;width:100%;margin-bottom:10px}
.renewal-content .sho_pr,.renewal-content .topi1{margin:22px 0;padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:#fff}
.renewal-content .sho_pr ul{margin:0;padding-left:1.25em}
.renewal-content .sho_pr li+li{margin-top:8px}
.renewal-content .stdTable{overflow-x:auto;margin:24px 0 40px}
.renewal-content .stdTable table{width:100%;min-width:720px;border-collapse:collapse;background:#fff}
.renewal-content .stdTable th,.renewal-content .stdTable td{padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.renewal-content .stdTable th{background:var(--bg-soft);color:var(--brand);font-weight:400}
@media(max-width:768px){
  .renewal-content .sho_h3{display:block}
  .renewal-content .sho_form{margin-top:12px}
  .renewal-content .img1{grid-template-columns:1fr}

}

/* ページ内リンク先が固定ヘッダーに隠れないようにする */
[id^="anchor"] {
  scroll-margin-top: 200px;
}

/* products02：既存の製品種類ブロックを利用 */
.renewal-content > .standard-detail-separated {
  margin-top: 32px;
}

.renewal-content > .standard-detail-separated .product-kind-block h2 {
  margin-top: 0;
}

/* 知識リンク：トップページ・商品カテゴリ共通 */
.category-card .quick-card,
.information-section .info-quick-grid .quick-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.category-card .quick-card img,
.information-section .info-quick-grid .quick-card img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

.category-card .quick-card span,
.information-section .info-quick-grid .quick-card span {
  line-height: 1.45;
}

.category-card .quick-card:hover,
.information-section .info-quick-grid .quick-card:hover {
  background: var(--bg-soft);
  text-decoration: none;
}

/* =========================================================
   情報ページ共通
   c_profile / catalog / faq / first_time / policy
   ========================================================= */
.info-page .info-content{max-width:1040px}
.info-page .info-content>h3,.info-page .info-content>h4,.info-page .info-content>h5{color:var(--brand)}
.info-page .info-content>h3{margin:48px 0 20px;padding:13px 16px;border-left:4px solid var(--accent);background:var(--bg-soft);font-size:clamp(1.25rem,2vw,1.5rem)}
.info-page .info-content>h4{margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:1.15rem}

.info-page .mar1{margin-top:32px}.info-page .mar1b{margin-bottom:24px}.info-page .red{color:#b42318}.info-page .t_bold{font-weight:700}
.info-page table{width:100%;border-collapse:collapse}.info-page th,.info-page td{padding:12px 14px;border:1px solid var(--line);vertical-align:top}
.info-page th{background:var(--bg-soft);color:var(--brand);text-align:left}.info-page .scl_bar{overflow-x:auto}
.company-page .c_prof{margin:0 0 32px}.company-page .c_prof:first-of-type{display:grid;grid-template-columns:1fr 180px;gap:24px;align-items:start}
.company-page .c_prof0_3 img,.company-page .c_prof2_1 img,.company-page .c_prof_img img{display:block;max-width:100%;height:auto}
.company-page .c_prof0_2{grid-column:1/-1;text-align:right;font-weight:700}

.company-page .company-profile-list dl{display:grid;grid-template-columns:220px 1fr;margin:0;border-top:1px solid var(--line)}
.company-page .c_prof3 dl{display:grid;grid-template-columns:150px 1fr;margin:0;border-top:1px solid var(--line)}
.company-page .company-profile-list dt,.company-page .company-profile-list dd,.company-page .c_prof3 dt,.company-page .c_prof3 dd{margin:0;padding:10px 12px;border-bottom:1px solid var(--line)}
.company-page .company-profile-list dt,.company-page .c_prof3 dt{background:var(--bg-soft);font-weight:700}
.company-page .ggmap{margin-bottom:18px}.company-page .ggmap iframe{width:100%;min-height:360px;border:0}.company-page .pdf{margin:-8px 0 22px}
.catalog-page .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:18px 0 34px;padding:0;list-style:none}
.catalog-page .wrap li{min-width:0}.catalog-page .wrap a{display:flex;height:100%;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--brand);font-weight:700;text-decoration:none}
.catalog-page .wrap a:hover{background:var(--bg-soft)}.catalog-page .wrap img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#fff}
.faq-page .faq_list{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.faq-page .faq_list dl{display:grid;grid-template-columns:54px 1fr;gap:8px 12px;margin:0}.faq-page .faq_list dt,.faq-page .faq_list dd{margin:0}.faq-page .faq_list dt{color:var(--brand);font-weight:700}
.faq-page .faq_ans{display:block;margin:0 0 20px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.faq-page .faq_ans:has(> .faq_ans_btn){display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}

.faq-page .faq_tel,.first-time-page .faq_tel{color:var(--brand);font-size:1.2em;font-weight:800}
.policy-page .spot1{max-width:920px}.policy-page .spot1>ol{margin:0;padding-left:1.5em}.policy-page .spot1>ol>li{margin:0 0 30px;padding-left:6px;color:var(--brand);font-size:1.08rem;font-weight:800}
.policy-page .spot1_nml,.policy-page .spot1_1,.policy-page .spot1 p,.policy-page .spot1 ul{color:var(--text);font-size:1rem;font-weight:400}
.policy-page .spot1_nml{margin-top:12px}.policy-page .spot1 ul{margin-top:12px;padding-left:1.5em}.policy-page .spot1_1{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
@media(max-width:800px){.company-page .c_prof:first-of-type,.company-page .c_prof2,.faq-page .faq_ans:has(> .faq_ans_btn){grid-template-columns:1fr}.company-page .c_prof0_3{max-width:180px}.company-page .c_prof0_2{text-align:left}.company-page .company-profile-list dl{grid-template-columns:180px 1fr}.company-page .c_prof3 dl{grid-template-columns:110px 1fr}.catalog-page .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-page .faq_ans_btn{justify-self:start}}
@media(max-width:520px){.catalog-page .wrap{grid-template-columns:1fr}.faq-page .faq_list{padding:16px}.faq-page .faq_list dl{grid-template-columns:46px 1fr}.company-page .company-profile-list dl,.company-page .c_prof3 dl{grid-template-columns:1fr}.company-page .company-profile-list dd,.company-page .c_prof3 dd{padding-top:8px}}
/* 共通：白背景のお問い合わせ・案内ボタン */
.renewal-content .sho_form a,
.renewal-content .Table_form a,
.faq-page .faq_ans_btn a,
.first-time-page .Table_order2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.renewal-content .sho_form a:hover,
.renewal-content .Table_form a:hover,
.faq-page .faq_ans_btn a:hover,
.first-time-page .Table_order2:hover {
  border-color: var(--brand);
  background: var(--bg-soft);
  color: var(--brand);
  text-decoration: none;
}

/* 共通：金色のお見積もりボタン */
.first-time-page .Table_order1,
.first-time-page .Table_order3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.first-time-page .Table_order1:hover,
.first-time-page .Table_order3:hover {
  opacity: .88;
}

/* first_time.html 表示補正 */
.first-time-page .info-content {
  max-width: 1040px;
}

.first-time-page .Table_order {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 28px;
}

/* 会社情報ページ：会社概要・社内体制 */
.company-page .c_prof_img {
  margin: 28px auto 0;
  text-align: center;
}

.company-page .c_prof_img img {
  width: min(100%, 760px);
  margin: 0 auto;
  height: auto;
}

/* 会社情報：環境方針・コンプライアンス */
.company-page .company-section {
  margin-top: 48px;
}

.company-page .company-section > h3 {
  margin: 0 0 20px;
  padding: 13px 16px;
  border-left: 4px solid var(--accent);
  background: var(--bg-soft);
  color: var(--brand);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.company-page .company-section > h4 {
  margin: 28px 0 12px;
  color: var(--brand);
  font-size: 1.1rem;
}

.company-page .policy-date {
  margin: 0 0 24px;
  text-align: right;
}

.company-page .policy-list,
.company-page .principles-list {
  margin: 16px 0 0;
  padding-left: 1.5em;
}

.company-page .policy-list li,
.company-page .principles-list li {
  margin-bottom: 18px;
  padding-left: 4px;
}

.company-page .policy-list strong,
.company-page .policy-list span {
  display: block;
}

.company-page .policy-list strong,
.company-page .principles-list h5 {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 1rem;
  font-weight: 800;
}

.company-page .principles-list p {
  margin: 0;
}

/* work.html / products02.html：ページ内リンク位置 */
.renewal-content .product-kind-block[id^="anchor"] {
  scroll-margin-top: 200px;
}

/* c_profile.html：フッターからのページ内リンク位置 */
.company-page #env,
.company-page #compliance {
  scroll-margin-top: 200px;
}

/* products02.html：レーザー仕様表のオプション列 */
.laser-option-heading {
  background: #b5b5db;
}

.laser-option-cell {
  background: #cfcfe4;
}

/* standard.html：固定ヘッダーにページ内見出しが隠れないようにする */
.standard-detail [id^="anchor"] {
  scroll-margin-top: 280px;
}

@media (max-width: 768px) {
  .standard-detail [id^="anchor"] {
    scroll-margin-top: 24px;
  }
}

/* =========================================================
   接眼ミクロメーター詳細ページ
   分類ナビを横並びにし、価格表を優先して図面を小さめに表示します。
========================================================= */

.micrometer-detail .product-photo-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: start;
}

/* 接眼ミクロメーター：板厚表示の上下余白を全ページで統一 */

.micrometer-detail .product-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.micrometer-detail .product-photo img {
  display: block;
  width: 100%;
  max-height: 390px;
  object-fit: contain;
}

.micrometer-detail .table-scroll table {
  min-width: 0;
}

.micrometer-detail .table-scroll th,
.micrometer-detail .table-scroll td {
  padding: 10px 8px;
}

@media (max-width: 1100px) {

  .micrometer-detail .product-photo-grid {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  }
}

@media (max-width: 760px) {

  .micrometer-detail .product-photo-grid {
    grid-template-columns: 1fr;
  }

  .micrometer-detail .product-photo {
    max-width: 360px;
    margin-inline: auto;
  }

  .micrometer-detail .table-scroll {
    overflow-x: auto;
  }

  .micrometer-detail .table-scroll table {
    min-width: 620px;
  }
}

/* filter_frame.html：製品ごとに独立したグレー枠＋ページ内リンク位置 */

/* 共通：製品ごとの独立グレー枠へのページ内リンク位置 */
.standard-detail-separated .product-kind-block[id] {
  scroll-margin-top: 200px;
}

@media (max-width: 640px) {
  .standard-detail-separated .product-kind-block[id] {
    scroll-margin-top: 24px;
  }
}

/* 2026-08-27: table emphasis / action alignment unified */
.standard-detail table th,
.renewal-content table th {
  font-weight: 400;
}

.standard-detail .model-cell,
.standard-detail .price-cell,
.renewal-content .model-cell,
.renewal-content .price-cell {
  font-weight: 900;
  color: var(--brand);
}

.standard-detail .Table_order,
.standard-detail .product-actions,
.renewal-content .Table_order,
.renewal-content .product-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 38px;
  width: 100%;
}

/* 2026-08-27: canonical product table rules */
.content-layout table th {
  background: var(--bg-soft);
  font-weight: 400;
}

.content-layout .model-cell,
.content-layout .price-cell {
  font-weight: 900;
  color: var(--brand);
}

.content-layout .Table_order,
.content-layout .product-actions,
.content-layout .cta-row.product-detail-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 2026-08-27: final simple table/action rules verified with ach100_nir.html */
.content-layout table th,
.content-layout table td {
  font-weight: 400 !important;
}

.content-layout table th {
  background: var(--bg-soft) !important;
}

.content-layout .model-cell,
.content-layout .price-cell,
.content-layout .table-emphasis {
  font-weight: 700 !important;
}

.content-layout .Table_order,
.content-layout .product-actions,
.content-layout .cta-row.product-detail-cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* =========================================================
   203-page renewal compatibility
   Old page content placed inside the renewed common shell.
========================================================= */

/* 2026-08-31: completed-page consistency
   Keep CTA spacing and h3 sizing identical across renewed product pages. */
.content-layout .product-actions,
.content-layout .cta-row.product-detail-cta {
  margin-top: 24px !important;
  margin-bottom: 38px !important;
}

.content-layout h3 {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
}

/* 2026-08-31 batch31 v4 exact completed-page alignment */

/* Catalog block: same separation used on completed detail pages. */
.content-layout .common-info .pdf.mar1b {
  margin: 18px 0 34px !important;
}

/* Prevent the first product card from touching the catalog button. */
.content-layout .common-info + .product-kind-block,
.content-layout .page-section-nav + .common-info + .product-kind-block {
  margin-top: 0 !important;
}

/* Catalog / certificate icon: force the completed-page 20px icon size. */
.standard-detail .pdf a.document-button::before,
.standard-detail .sta_jqa_pdf a.document-button::before,
.info-page .pdf a.document-button::before {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  flex: 0 0 20px !important;
  background-size: 20px 20px !important;
}

/* 2026-08-31 batch31 v5 single page-nav border */
.content-layout .page-section-nav {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
  padding: 12px 14px;
  margin: 0 0 28px;
  border-radius: 0;
}

/* PDF detail icons in product tables */
.standard-detail .table-scroll td img.pdf-detail-icon {
  width: 30px;
  max-width: 30px;
  height: auto;
  margin: 0 auto;
}

/* diffuser detail PDF icons: unified size */
.standard-detail .table-scroll td img.pdf-detail-icon,
.standard-detail table td img.pdf-detail-icon {
  width: 30px !important;
  max-width: 30px !important;
  min-width: 30px !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}

/* CAD download icon */
.standard-detail .document-button-cad .cad-download-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 24px;
}

/* o_lens shared cleanup: document spacing and PDF icons */
.standard-detail .product-kind-block > .product-document-button {
  margin: 14px 0;
}

.standard-detail .table-scroll td img.pdf-detail-icon {
  width: 30px !important;
  max-width: 30px !important;
  min-width: 30px !important;
  height: auto !important;
}

/* shared small PDF detail icon */
.standard-detail .table-scroll td img.pdf-detail-icon,
.standard-detail .table-scroll th img.pdf-detail-icon {
  width: 30px !important;
  max-width: 30px !important;
  min-width: 30px !important;
  height: auto !important;
}

/* shared single large product/diagram image */
.standard-detail .product-figure-single{margin:20px auto 28px;text-align:center}
.standard-detail .product-figure-single img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}