@charset "shift_jis";

.breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.breadcrumb a {
  font-size: 0.875rem;
}

.company-header {
  background-color: #008000;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-header .company-name {
  color: #fff;
  font-weight: bold;
  font-family: 'MS Gothic', sans-serif;
  margin: 0;
}

.company-header a img {
  display: block;
}

.section-main {
  padding: 8px;
}

.intro-block {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.intro-block figure {
  margin: 0;
  flex-shrink: 0;
}

.intro-block figure img {
  display: block;
  border: 1px solid #9999ff;
}

.toc-box {
  border: 1px solid #006699;
  background-color: #f0f7ea;
  padding: 8px 16px;
  flex: 1;
}

.toc-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-box ul li {
  padding: 8px 0;
}

.toc-box ul li::before {
  content: "■";
  color: #006699;
  font-size: 0.875rem;
  margin-right: 4px;
}

.toc-box ul li a {
  font-weight: bold;
}

.toc-box ul li a:hover {
  color: red;
}

.meta-bar {
  text-align: right;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 4px;
}

.meta-bar .note {
  color: #006699;
}

.section-heading {
  background-color: #339933;
  padding: 4px 8px;
}

.section-heading a,
.section-heading {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.subsection-heading {
  margin: 1rem 0 4px;
  font-weight: bold;
  font-size: 1rem;
}

.subsection-heading::before {
  content: "■";
  color: #339933;
  font-size: 0.875rem;
  margin-right: 4px;
}

.subsection-note {
  font-family: 'MS Gothic', sans-serif;
  font-size: 0.875rem;
}

.cat-heading {
  background-color: #008000;
  padding: 6px 8px;
}

.cat-heading a,
.cat-heading {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.group-heading {
  font-weight: bold;
  color: #006600;
  margin: 8px 0 4px;
}

.detail-link {
  font-size: 0.875rem;
  margin: 8px 0;
}

.detail-link::before {
  content: ">>";
  color: #008000;
  margin-right: 4px;
}

.detail-link a {
  color: #0000ff;
  font-weight: bold;
}

.up-link {
  text-align: right;
  font-size: 0.875rem;
  margin: 8px 0;
}

.up-link a {
  color: #333;
}

.note-right {
  text-align: right;
  font-size: 0.875rem;
  color: #006699;
  margin: 4px 0 12px;
}

/* 仕様表共通 */
.spec-table {
  margin-bottom: 5px;
}
.spec-table th,
.spec-table td {
  border: 1px solid #999;
  padding: 4px 0.5em;
}

.spec-table thead th {
  background-color: #f0f7ea;
  color: #333;
  font-weight: bold;
}

.spec-table tbody th {
  background-color: #f0f7ea;
  color: #333;
  font-weight: bold;
  text-align: left;
}

.spec-table tbody td {
  background-color: #fff;
  text-align: center;
}

.dwg-btn {
  display: inline-block;
  vertical-align: middle;
}

/* ざぶとん */
.zabton th {
  width: 57px;
}

.zabton td a {
  display: block;
  width: fit-content;
  margin: auto;
}

/* KIKAKUボックス（ESCON受圧板） */
.kikakuBox {
  border-collapse: collapse;
  border-top: 1px solid rgb(147,159,141);
  border-left: 1px solid rgb(147,159,141);
  background-color: #fff;
  font-size: 0.9rem;
}

.kikakuBox th {
  color: rgb(0,102,0);
  background-color: rgb(230,251,227);
  border-right: 1px solid rgb(147,159,141);
  border-bottom: 1px solid rgb(147,159,141);
  padding: 4px 0.5em;
  font-weight: 400;
  text-align: center;
}

.kikakuBox td {
  color: rgb(51,51,51);
  border-right: 1px solid rgb(147,159,141);
  border-bottom: 1px solid rgb(147,159,141);
  padding: 4px 0.5em;
  text-align: center;
  vertical-align: middle;
}

.escon-layout {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.kit-layout {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.halu-table th,
.halu-table td {
  border: 1px solid #999;
  padding: 4px 0.5em;
  background-color: #fff;
}

.halu-table thead th {
  background-color: #f0f7ea;
}

.spec-table.halu-table tbody td {
  text-align: left;
  font-weight: bold;
}

.spec-table.tai th,
.spec-table.tai td {
  width: 72px;
}
.back-link {
  text-align: right;
  margin: 12px 0;
}



@media screen and (max-width: 768px) {

  /* パンくずリスト */
  .breadcrumb {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* イントロブロック（画像＋目次）を縦並びに */
  .intro-block {
    flex-direction: column;
    gap: 12px;
  }

  .intro-block figure img {
    width: 100%;
    height: auto;
  }

  .toc-box {
    width: 100%;
    box-sizing: border-box;
  }

  /* 仕様表：横スクロール対応 */
  .spec-table,
  .kikakuBox,
  .halu-table {
    max-width: 100%;
    display: block;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 13px;
  }

  /* ESCONレイアウト・キットレイアウトを縦積みに */
  .escon-layout,
  .kit-layout {
    flex-direction: column;
    gap: 16px;
  }

  /* 会社ヘッダー */
  .company-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* セクション見出し・カテゴリ見出し */
  .section-heading,
  .cat-heading {
    font-size: 0.95rem;
    padding: 6px;
  }

  /* メタバー */
  .meta-bar {
    text-align: left;
  }

  /* 上へリンク・戻るリンク */
  .up-link,
  .back-link {
    text-align: left;
  }

  /* 図面ボタン */
  .dwg-btn {
    display: block;
    margin: 4px 0;
  }

  /* 幅固定セルのリセット */
  .spec-table.tai th,
  .spec-table.tai td {
    width: auto;
  }

  /* フォントサイズ調整 */
  .breadcrumb a,
  .meta-bar,
  .detail-link,
  .up-link a,
  .note-right,
  .subsection-note {
    font-size: 0.8rem;
  }

  .subsection-heading {
    font-size: 0.95rem;
  }

  /* section-main のパディング縮小 */
  .section-main {
    padding: 6px 4px;
  }

}