/* =======================================================================
   共通ユーティリティ
   ======================================================================= */
section {
  width: 100%;
  margin: 50px auto 0 auto;
}
h1 {
  width: 100%;
}
h4 {
  width: 100%;
  margin: 0;
  padding: 3px 3px 5px 3px;
  font-size: 16px;
  font-weight: 900;
  box-sizing: border-box;
}
main {
  max-width: 1280px;
  margin: 0 auto 0 auto;
  padding-bottom: 80px;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

/*id-class*/

.product-heading {
  display: flex;
  align-items: center; /* 縦位置中央に揃える */
  gap: 0px; /* アイテム間のスペース */
}

.product-heading img {
  width: 100px; /* 必要に応じてサイズ指定 */
  height: auto;
}
.product-heading .sunricherlogo {
  width: 60px;
}

.product-heading h2 {
  margin: 0;
}
#pageTopTitleArea {
  max-width: 1100px;
  margin: 50px auto 0 auto;
  box-sizing: border-box;
}
#pageTopTitle {
  text-align: center;
  font-size: 32px;
  margin: 0;
}
.sub_ttl {
  text-align: center;
  line-height: 0em;
  color: #12519b;
  font-size: 12px;
  margin-top: 15px;
  margin-bottom: 30px;
}
.h2mark {
  font-size: 16px;
  font-weight: 600;
  padding: 2px 2px 2px 2px;
  color: #fff;
  vertical-align: 3px;
  background-color: #12519b;
}
.h2text {
  font-size: 20px;
  font-weight: 600;
  padding-left: 10px;
}
.maker-buttons {
  display: flex; /* 水平方向に並べる                               */
  flex-wrap: wrap; /* 画面が狭ければ自動で次の行に折り返し            */
  justify-content: center; /* 行ごとに“中央寄せ”                              */
  gap: 1rem; /* 各ロゴ間の余白（好きな値にどうぞ）              */
}

.logo-buttons {
  width: 120px; /* 横幅固定 */
  height: 40px; /* 高さ固定 */
  background-color: white;
  border: 1px #ccc solid;
  object-fit: contain;
  padding: 5px 15px 5px 15px;
  box-shadow: 1px 1px 2px 0px #ccc;
}
.logo-buttons:hover {
  filter: brightness(0.8);
}

#makerTopTitleArea {
  max-width: 1100px;
  margin: 50px auto 0 auto;
  box-sizing: border-box;
}
#makerTopTitleLogo {
  font-size: 40px;
  font-family: "Kosugi", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 900;
  box-sizing: border-box;
}
#makerTopTitleLogo img {
  display: block;
  float: left;
  margin: 0 32px 0 0;
  box-sizing: border-box;
}
#makerTopTitleLogo span {
  display: block;
  float: left;
  margin: -5px 32px 0 0;
  box-sizing: border-box;
}
#makerTopTitleTxt {
  width: 100%;
  margin: 20px 0 0 0;
  font-size: 16px;
  font-weight: 100;
  text-align: left;
  color: #333;
  box-sizing: border-box;
}
#makerTopTxt {
  width: 100%;
  margin: 20px 0 0 0;
  font-size: 16px;
  text-align: left;
  color: #333;
  box-sizing: border-box;
  margin: 5px 0 10px 0;
}

#contentsArea {
  max-width: 1100px;
  margin: 50px auto 0 auto;
  box-sizing: border-box;
}
#contentsArea h2 {
  width: 100%;
  font-size: 24px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 900;
  box-sizing: border-box;
  margin: 10px;
}

/* =======================================================================
   シリーズリスト
   ======================================================================= */
.seriesList {
  width: 100%;
  margin: 0;
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0px 5px;
  box-sizing: border-box;
}

/* th 共通設定 ──────── */
.seriesList tr th {
  padding: 0.5em 0.75em;
  background-color: #666;
  color: #fff;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  border-right: 1px solid #fff; /* 全列に右ボーダー */
  white-space: nowrap; /* 折り返し禁止 */
}

/* 最後の <th> だけ右ボーダーを消す */
.seriesList tr th:last-child {
  border-right: none;
}
/* td 共通設定 ──────── */
.seriesList tr td {
  height: auto;
  padding: 0.5em;
  background-color: #fff;
  border-top: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
  color: #333;
  font-size: 14px;
  text-align: center;
}
.seriesList tr td:first-child {
  border-left: 1px #ccc solid;
}
.seriesList tr td:first-child img {
  max-width: 100px;
  height: auto;
}
.seriesList tr td:last-child {
  border-right: 1px #ccc solid;
}

/* td 詳細or問い合わせボタン ──────── */
.detailPageBt {
  display: block; /* セルいっぱいに伸ばしたい場合 */
  width: 100%;
  padding: 3px 3px;
  border-radius: 15px;
  background: #eee;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap; /* 折り返し禁止 */
}

.detailPageBt:hover {
  filter: brightness(0.8);
}
.detailPageBt img {
  display: inline-block;
  width: 20px;
  margin-bottom: -4px;
  margin-right: 6px;
}

/* td 仕様書 ──────── */
.dataSheetDlBt {
  display: inline-block;
  width: 48px;
  height: 48px;
  padding: 6px;
  background-color: #fff;
  border-radius: 6px;
  vertical-align: middle;
  box-sizing: border-box;
}
.dataSheetDlBt:hover {
  filter: brightness(0.8);
}
.dataSheetDlBt img {
  display: inline-block;
  width: 28px;
  height: 36px;
}

/*sunricher*/
.sunricherDlBt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 20px auto;
  padding: 5px;
  background: #eee;
  border: 1px #ccc solid;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #333;
  box-sizing: border-box;
}
.sunricherDlBt :hover {
  filter: brightness(0.8);
}

/* =======================================================================
   レスポンシブ調整
   ======================================================================= */
@media (max-width: 1100px) {
  /* 型番など “長い文字列” を含む列だけ折り返す */
  .seriesList tr td {
    white-space: normal; /* nowrap を打ち消す                */
    overflow-wrap: anywhere; /* 長い英数字でも途中で改行できる   */
  }
}

@media (max-width: 1024px) {
  .hide-sp {
    display: none;
  }

  .hpt tr td:nth-child(3) {
    border-right: 1px #ccc solid;
  }

  /*sunricher*/
  .sunricherDlBt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 20px auto;
    padding: 5px;
    background: #eee;
    border: 1px #ccc solid;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-sizing: border-box;
  }
  .sunricherDlBt :hover {
    filter: brightness(0.8);
  }
}

@media (max-width: 600px) {
  .seriesList tr td:first-child img {
    max-width: 60px;
    height: auto;
  }
}