#m1, #m2, #m3, #m4, #m5, #m6, #m7{
    display: block;
    margin-top: -20px;
    padding-top: 40px;
    font-size: 14px !important;
    font-weight: bold;
    border-bottom: solid 1px;
    color:#3875c2;
}

.internal-link-container {
    display: grid;
    flex-wrap: wrap;
    justify-content: flex-start;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
    margin-bottom: 10px; 
    padding-left: 0; /* 左端に揃えるため、パディングやマージンがないことを確認 */
}

.internal-link-container a {
    margin-right: 2em; 
    margin-left: 0;
    margin-bottom: 10px; 
    flex-shrink: 0; 
}

/* 💡 レスポンシブ対応のためのラッパー要素 */
/* 画面幅がテーブルの幅より狭くなった際、横スクロールを可能にする */
.table-responsive {
  overflow-x: auto; /* X軸（横方向）のスクロールを自動で有効にする */
  width: 100%; /* 親要素の幅いっぱいに広がる */
}

.spec-table {
  /* テーブルの最小幅を設定し、狭い画面でも内容が潰れないようにする */
  min-width: 600px; /* 例として最小幅を600pxに設定。必要に応じて調整してください。 */
  border-collapse: collapse; 
  margin: 20px 0;
  font-family: Arial, sans-serif;
  width: 100%; /* ラッパー内で100%の幅を占める */
}

/* すべてのセル（thとtd）に枠線を適用 */
.spec-table th, 
.spec-table td {
  border: 1px solid #000;
  padding: 8px 12px;
  text-align: left; 
  /* セルの内容に応じて幅を調整できるようにする */
  white-space: nowrap; 
}

/* ヘッダー行のスタイル */
.spec-table thead th {
  background-color: #f0f0f0; 
  font-weight: bold; 
  text-align: center; 
  vertical-align: middle;
}

/* 🎯 「No」の列の幅を狭くする調整 */
/* ヘッダーとデータセル両方に固定幅を適用します */
.spec-table th:first-child,
.spec-table td:first-child {
  width: 50px; /* ★固定幅で狭く設定 (例: 50px)★ */
  min-width: 50px; /* 最小幅も同じに設定し、確実に狭く保つ */
  text-align: center;
}

/* 「パラメーター」の列の幅をある程度確保（例） */
.spec-table th:nth-child(2),
.spec-table td:nth-child(2) {
  min-width: 150px;
}

/* 「特性」の列の幅をある程度確保（例） */
.spec-table th:last-child,
.spec-table td:last-child {
  min-width: 250px; 
}

/* 全体を囲むコンテナ: 左ブロック全体と右ボタンを垂直中央で横並びにする */
.product-layout-responsive {
  flex-wrap: wrap; 
  align-items: center; /* 左右の主要コンテンツを垂直方向中央揃え */
  justify-content: space-between; 
  max-width: 1200px;
  padding: 10px;
}

/* 1. 左側のコンテンツエリア */
.left-content-area {
  flex-grow: 1; 
  flex-shrink: 1;
  margin-right: 40px; 
  min-width: 50%; 

  /* 💡 画像とDatasheetリンクを縦並びにする */
  display: flex;
  flex-direction: column; /* 要素を縦並びにする */
  align-items: flex-start; /* 縦並びの要素を左寄せにする */
  gap: 10px; /* 画像とDatasheetリンクの間のスペース */
}

/* ★ 最上位のラッパーCSS（HTMLのインラインスタイルを切り出し） ★ */
.top-wrapper {
    display: flex; 
    align-items: center; /* 垂直方向 (上下) で中央に揃える */
    justify-content: space-around; /* 左右に均等に配置 */
    max-width: 1200px;
    margin: 0 auto;
}

/* 各カラムのスタイル（Narrow BlockとMicrostripの詳細） */
.left-content-area1, .right-content-area1 {
    /* リンクと画像が縦に並ぶように */
    display: flex;
    flex-direction: column; 
    /* 必要に応じて幅を調整 */
    flex: 1;
    padding: 0 10px;
}

/* メインのデータシート画像コンテナ */
.datasheet-image-wrapper1 {
  width: 180px; 
  text-align: center;
  display:flex;
  font-size: 12px;
}
.datasheet-image-wrapper1 a {
  padding: 1em;
  text-decoration: none;
  color: #000000;
  text-align: center;
}
.datasheet-image-wrapper2 {
  width: 100%; 
  text-align: center;
  display:flex;
  font-size: 12px;
}
.datasheet-image-wrapper2 a {
  padding: 1em;
  text-decoration: none;
  color: #000000;
  text-align: center;
}
.datasheet-image-wrapper3 {
  width: 370px; 
  text-align: center;
  display:flex;
  font-size: 12px;
}
.datasheet-image-wrapper3 a {
  padding: 1em;
  text-decoration: none;
  color: #000000;
  text-align: center;
}
.datasheet-image-wrapper4 {
  width: 190px; 
  text-align: center;
  display:flex;
  font-size: 12px;
}
.datasheet-image-wrapper4 a {
  padding: 1em;
  text-decoration: none;
  color: #000000;
  text-align: center;
}

/* メインのデータシート画像 */
.main-datasheet-image {
  max-width: 100%; 
  height: auto;
  display: block; 
  border: solid 1px #ccc;
}

/* Datasheetリンクのスタイル */
.datasheet-link {
  color: #00008b; 
  font-weight: bold;
  text-decoration: underline; 
  white-space: nowrap; 
}

/* 2. 右側のWEBSHOPへボタンエリア */
.webshop-container {
  flex: 0 0 auto; /* 伸縮せず、コンテンツの幅を保つ */
  text-align: right; /* WEBSHOPボタンを右寄せにする */
}

/* ボタン（リンク）のスタイル */
.webshop-button {
  color: #ff0000; 
  text-decoration: none;
  font-weight: bold;
  background-color: white; 
  padding: 10px 20px;
  border: 2px solid #ff0000;
  display: inline-block;
  white-space: nowrap; 
}
a.webshop-button {
    color: #ff0000;
}

/* マウスオーバー時のスタイル */
.webshop-button:hover {
  background-color: #ffeaea; 
  cursor: pointer;
}

/* レスポンシブ対応のブレークポイント */
@media (max-width: 768px) {
  .product-layout-responsive {
    flex-direction: column; /* 全体を縦並びにする */
    align-items: center; 
  }

  .left-content-area {
    width: 100%; 
    margin-right: 0;
    margin-bottom: 20px; 
    min-width: auto;
    align-items: center; /* 縦並びになったら全体を中央寄せ */
  }
  .datasheet-image-wrapper1, .datasheet-image-wrapper2, .datasheet-image-wrapper4{
      width:100%;
  }
  .webshop-container {
    width: 100%; 
    text-align: center; 
  }
}

.product-layout-flex {
    /* 左右のブロックを横並びにする */
    display: flex;
    
    /* ★ 垂直方向（上下）の中央に揃える ★ */
    align-items: center; 
    
    /* 左右のブロック間に適切なスペースを確保 */
    justify-content: space-around; 
    
    /* コンテナの最大幅と中央寄せ */
    max-width: 1000px;
    margin: 20px auto;
}

.datasheet-label {
    margin-top: 5px;
    font-weight: bold;
    color: #333; /* または青(#007bff)など */
}

/* --- 右ブロック: テキストと箇条書きリスト --- */
.text-block {
    /* 幅を全体に対して50%に制限 */
    flex: 0 0 60%;
    text-align: left;
    padding-left: 20px;
}

.text-block p {
    line-height: 1.5;
    font-size:14px !important;
}

.text-block ul {
    list-style: none; /* デフォルトの黒丸を削除 */
    padding-left: 0;
    margin-top: 10px;
}

.text-block ul li {
    margin-bottom: 5px;
}

.text-block ul li a {
    /* リンクのスタイル */
    text-decoration: underline;
    color: #007bff; /* 青色 */
    font-size: 1.1em;
}


/* 📱 レスポンシブ対応 (モバイルでは縦並びに切り替え) */
@media (max-width: 600px) {
    .product-layout-flex {
        flex-direction: column; /* 縦並びにする */
        align-items: flex-start;
    }
    .datasheet-block, .text-block {
        flex: 0 0 100%; /* 全幅を使用 */
        padding-left: 0;
        padding-right: 0;
    }
    .datasheet-block {
        margin-bottom: 20px;
        text-align: left;
    }
}