.cke4 {
    max-height: 700px; /* スクロール可能な最大高さを設定 */
    width:100%;
    overflow-x: auto; /* 横スクロールを有効化 */
  	-webkit-overflow-scrolling: touch; /* モバイルでのスムーズなスクロール */
    overflow-y: auto; /* 必要なときにのみスクロールバーを表示 */
    -ms-overflow-style: none;  /* IE、Edge用にスクロールバーを非表示 */
    scrollbar-width: auto;  /* Firefox用にスクロールバーを非表示 */
    scrollbar-color: #007ACC #e6edf8;
}

.cke4::-webkit-scrollbar {
    display: none; /* Webkitベースのブラウザ用にスクロールバーを非表示 */
    height: 18px;
    background: #e6edf8;
}

.cke4::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg,#007ACC 0%,#00B4FF 100%);
  border-radius: 9px;
  border: 3px solid #e6edf8;
}
.cke4::-webkit-scrollbar-track {
  background: #e6edf8;
  border-radius: 9px;
}

.cke4 table {
  display: block;        /* これでラッパー側でスクロールしやすくなる */
  width: max-content;    /* コンテンツ幅に合わせる */
  min-width: 1080px;     /* 必要なら維持。不要なら削除してレスポンシブ化 */
  height: auto !important;
  border-collapse: collapse;
}

.cke4 table th, td {
    border: 1px solid #C3D3E4 !important; /* セルの境界線を設定 */
    padding: 5px !important; /* セル内のパディングを設定 */
    text-align: center !important; /* テキストを左揃えに設定 */
}
.cke4 table th {
    background-color: #f2f2f2; /* ヘッダーの背景色を設定 */
    font-weight: bold; /* ヘッダーのフォントを太字に設定 */
}
.cke4 table td {
    padding: 0;
    margin: 0;
    line-height: 1.2 !important;
}

.h-style thead {
    position: sticky;
    top: 0;
    background-color: inherit; /* 背景色を継承 */
    z-index: 10; /* ヘッダーを上に表示 */
}

.cke4 .w300 {
    width: 300px;
}

.cke4 .w200 {
    width: 200px !important;
}

.cke4 .w150 {
    width: 150px;
}
.cke4 .w120 {
    width: 120px !important;
}

.cke4 .w100 {
    width: 100px !important;
}
.cke4 .w80 {
    width: 80px;
}
.cke4 .w50 {
    width: 50px;
}
/* テーブル中央寄せ */
.cke4 table.h-style {
  margin-left: auto;
  margin-right: auto;
}


/* リンクがあるセル：通常は白 */
.cke4 table.h-style tr td:has(a) {
  background-color: #fff;
  transition: background-color 0.3s, color 0.3s;
}

/* リンクがないセル：通常は薄いグレー */
.cke4 table.h-style tr td:not(:has(a)) {
  background-color: #f3f3f3;
  transition: background-color 0.3s, color 0.3s;
}

/* リンクの通常スタイル */
.cke4 table.h-style tr td a {
  color: #000;
  text-decoration: none;
  transition: color 0.3s, text-decoration 0.3s, font-weight 0.3s;
}

.cke4 table.h-style tr td a:hover {
  text-decoration: underline;
}

.cke4 table.h-style tr td:hover:has(a) a {
  color: #005999;
  font-weight: bold;
}

.cke4 table.h-style tr td:hover:has(a) {
  background-color: #d0e3fa;
}


/* 青系のセルのホバー効果 */
.cke4 table.h-style tr td.blue:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(0, 50, 150), rgb(0, 70, 173), rgb(0, 100, 200), rgb(0, 130, 230), rgb(0, 150, 250)); /* セルのホバー時の背景をグラデーションに設定 */
  border-color: rgb(0, 70, 173); /* セルのホバー時のボーダー色をTDKのブランドカラーに設定 */
}

/* 紫系のセルのホバー効果 */
.cke4 table.h-style tr td.purple:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(128, 0, 128), rgb(150, 50, 150), rgb(200, 100, 200));
  border-color: rgb(128, 0, 128);
}
/* オレンジ系のセルのホバー効果 */
.cke4 table.h-style tr td.orange:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(255, 165, 0), rgb(255, 200, 100), rgb(255, 220, 150));
  border-color: rgb(255, 165, 0);
}
/* 緑系のセルのホバー効果 */
.cke4 table.h-style tr td.green:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(0, 128, 0), rgb(100, 200, 100), rgb(150, 255, 150));
  border-color: rgb(0, 128, 0);
}
/* 明るい青系のセルのホバー効果 */
.cke4 table.h-style tr td.light-blue:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(173, 216, 230), rgb(200, 230, 255), rgb(220, 240, 255));
  border-color: rgb(173, 216, 230);
}
/* 黄色系のセルのホバー効果 */
.cke4 table.h-style tr td.yellow:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(255, 255, 0), rgb(255, 255, 100), rgb(255, 255, 150));
  border-color: rgb(255, 255, 0);
}
/* ピンク系のセルのホバー効果 */
.cke4 table.h-style tr td.pink:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(255, 192, 203), rgb(255, 210, 220), rgb(255, 230, 240));
  border-color: rgb(255, 192, 203);
}
/* シアン系のセルのホバー効果 */
.cke4 table.h-style tr td.cyan:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(0, 255, 255), rgb(100, 255, 255), rgb(150, 255, 255));
  border-color: rgb(0, 255, 255);
}
/* ライラック系のセルのホバー効果 */
.cke4 table.h-style tr td.lilac:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(200, 162, 200), rgb(220, 182, 220), rgb(240, 202, 240));
  border-color: rgb(200, 162, 200);
}
/* ミント系のセルのホバー効果 */
.cke4 table.h-style tr td.mint:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(189, 252, 201), rgb(210, 255, 220), rgb(230, 255, 240));
  border-color: rgb(189, 252, 201);
}
/* サーモン系のセルのホバー効果 */
.cke4 table.h-style tr td.salmon:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(250, 128, 114), rgb(255, 150, 130), rgb(255, 170, 150));
  border-color: rgb(250, 128, 114);
}
/* ラベンダー系のセルのホバー効果 */
.cke4 table.h-style tr td.lavender:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(230, 230, 250), rgb(240, 240, 255), rgb(250, 250, 255));
  border-color: rgb(230, 230, 250);
}
/* ベージュ系のセルのホバー効果 */
.cke4 table.h-style tr td.beige:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(245, 245, 220), rgb(250, 250, 230), rgb(255, 255, 240));
  border-color: rgb(245, 245, 220);
}
/* オリーブ系のセルのホバー効果 */
.cke4 table.h-style tr td.olive:hover:has(a) {
  background-image: linear-gradient(90deg, rgb(128, 128, 0), rgb(150, 150, 50), rgb(170, 170, 100));
  border-color: rgb(128, 128, 0);
}

body:not(.img-modal-enabled) #modal,
body:not(.img-modal-enabled) .modal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


.modal,
#modal {
  display: none;               /* is-open 時に表示 */
  position: fixed;
  inset: 0;                    /* top:0; right:0; bottom:0; left:0; */
  z-index: 100000;
  background: rgba(0,0,0,0.5);
  padding: 2vh 1rem;
  box-sizing: border-box;
}

/* 表示時：画面中央に配置 */
.modal.is-open,
#modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* モーダル内部ボックス */
.modal .modal-content,
#modal .modal-content {
  position: relative;
  background: #fff;
  padding: 1rem;
  width: 100%;
  max-width: 500px;                   /* 必要に応じ調整 */
  max-height: calc(100vh - 4vh);
  overflow: auto;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  box-sizing: border-box;
  margin: 0;
}

/* 閉じるボタン */
.modal .close,
#modal .close {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #aaa;
  font-weight: bold;
}
.modal .close:hover, #modal .close:hover,
.modal .close:focus, #modal .close:focus {
  color: #000;
  outline: none;
}

/* 画像のレスポンシブ */
#modalImage,
.modal img#modalImage,
#modal .modal-content img,
.modal .modal-content img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 強制閉じクラス（互換） */
.modal.is-closed,
#modal.is-closed {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 小さめの画面に対する微調整（任意） */
@media (max-width: 520px) {
  .modal .modal-content,
  #modal .modal-content {
    padding: 0.75rem;
    border-radius: 4px;
    max-width: 100%;
    max-height: calc(100vh - 3vh);
  }
}