/************
    色などの設定変更箇所
*************/
.is-drop-shadow {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.is-border-list {
  border-bottom: 1px solid #ddd;
}
.primary-color {
  color: #333;
}
.secondary-color {
  color: #00c1a1;
}
.third-color {
  color: white;
}

.primary-back {
  background-color: white;
}
.secondary-back {
  background-color: #e0f7f5;
}
.third-back {
  background-color: #00c1a1;
}
.accent-back {
  background-color: #fff2cc;
}
.gray-back {
  background-color: #f0f0f0;
}
/************
    ここから共通設定
*************/
body {
  font-family: Arial, sans-serif;
}
button:hover,
button:active {
  background-color: #017763;
  color: #fff;
}
button.keypad-color:hover,
button.keypad-color:active {
  background-color: #f0f0f0;
  color: #333;
}

a,
a:visited {
  color: #333;
}
a:hover {
  color: #017763;
}
/************
    ここからテーブル設定
*************/
/* 奇数行 */
table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3; /* ストライプ模様 */
}
/* 偶数行 */
table tbody tr:hover {
  background-color: #e0f7f5; /* ホバー時の色 */
}
/* ここからスマホ向けのレスポンシブ対応 */
@media (max-width: 600px) {
  table tr {
    border-bottom: 2px solid #f3f3f3;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }
  table td {
    border-bottom: 1px dotted #ddd;
  }
}
/************
    ここからキータッチ設定
*************/
.keypad-row button:hover {
  background-color: #e0e0e0;
}
/************
    ここからタブ設定
*************/
.tab-link.active {
  background-color: #00c1a1;
  color: #fff;
}