/************
    色などの設定変更箇所
*************/
.is-drop-shadow {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25); /* 少し深いシャドウ */
}
.is-border-list {
  border-bottom: 1px solid #d1d5db; /* 淡いグレー */
}
.primary-color {
  color: #1f2937; /* 濃いグレー */
}
.secondary-color {
  color: #2563eb; /* ディープブルー */
}
.third-color {
  color: #ffffff; /* 白 */
}

.primary-back {
  background-color: #ffffff; /* 白 */
}
.secondary-back {
  background-color: #f3f4f6; /* ライトグレー */
}
.third-back {
  background-color: #2563eb; /* ディープブルー */
}
.accent-back {
  background-color: #d1d5db; /* グレーアクセント */
}
.gray-back {
  background-color: #e5e7eb; /* 明るいグレー */
}
/************
    ここから共通設定
*************/
body {
  font-family: Arial, sans-serif;
}
button:hover,
button:active {
  background-color: #1d4ed8; /* 濃いブルー */
  color: #ffffff;
}
button.keypad-color:hover,
button.keypad-color:active {
  background-color: #e5e7eb; /* 明るいグレー */
  color: #1f2937;
}

a,
a:visited {
  color: #1f2937;
}
a:hover {
  color: #2563eb;
}
/************
    ここからテーブル設定
*************/
/* 奇数行 */
table tbody tr:nth-of-type(even) {
  background-color: #f3f4f6; /* ライトグレー */
}
/* 偶数行 */
table tbody tr:hover {
  background-color: #e5e7eb; /* 明るいグレー */
}
/* ここからスマホ向けのレスポンシブ対応 */
@media (max-width: 600px) {
  table tr {
    border-bottom: 2px solid #d1d5db;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  }
  table td {
    border-bottom: 1px dotted #d1d5db;
  }
}
/************
    ここからキータッチ設定
*************/
.keypad-row button:hover {
  background-color: #e5e7eb; /* 明るいグレー */
}
/************
    ここからタブ設定
*************/
.tab-link.active {
  background-color: #2563eb; /* ディープブルー */
  color: #ffffff;
}