@charset "UTF-8";

/*システムがダークモードに設定時と同時に連動*/
@media (prefers-color-scheme: dark) {
[id^="tabTitles"], 
[id^="tabpage"], 
.cat-item {
    color: #ffffff !important;
}
}

@media (prefers-color-scheme: light) {
[id^="tabpage"],
.cat-item {
    color: #000000;
}
}

/* ここから各要素のCSS */

/* タブタイトル */
[id^="tabTitles"] {
    text-align: center;
    font-size: 20px;
    padding: 10px 25px;
    border-radius: 12px;
  background-color: #00b4d8;
    color: #000000;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  /* ベース：強力なブラーで「液状化」させる */
backdrop-filter: blur(60px) saturate(250%) contrast(110%) brightness(102%) !important;
-webkit-backdrop-filter: blur(60px) saturate(250%) contrast(110%) brightness(102%) !important;

/* 背景：中央は透明度を上げ、縁に向かって光を溜める */
background: 
  /* プリズム・ハイライト */
  linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 100%),
  /* 液体感を出すベース */
  radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;

/* ★縁の歪み（屈折）をシミュレートする多重インセットシャドウ */
box-shadow: 
  /* 1. 外側の浮遊感 */
  0 30px 60px rgba(0, 0, 0, 0.2),
  /* 2. 【屈折エッジ】縁に光が溜まって背景が白んでいる様子（屈折の入り口） */
  inset 0 0 0 1px rgba(255, 255, 255, 0.4),
  /* 3. 【レンズ効果】縁の直内側を暗くし、背景が「曲がっている」ような影を落とす */
  inset 0 0 25px rgba(255, 255, 255, 0.3),
  /* 4. 【肉厚感】分厚いガラスの底に溜まる光 */
  inset -10px -15px 40px rgba(255, 255, 255, 0.1),
  /* 5. 【スペキュラ】表面の鋭いテカリ */
  inset 2px 2px 4px rgba(255, 255, 255, 0.7) !important;

/* 境界線：物質としての厚みを定義 */
border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.8) !important;

/* 角丸：液体の表面張力を感じる滑らかな曲線 */
border-radius: 40px;

}

[id^="tabTitles"]:hover {
    background-color: #357ABD;
    transform: translateY(-2px);
}

/* テーブル（全体レイアウト） */
[id^="tabTable"] {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* 各タブのコンテンツ */
[id^="tabpage"] {

    margin-top: 15px;
    padding: 20px;
    border-radius: 16px;
  /* ベース：強力なブラーで「液状化」させる */
backdrop-filter: blur(60px) saturate(250%) contrast(110%) brightness(102%) !important;
-webkit-backdrop-filter: blur(60px) saturate(250%) contrast(110%) brightness(102%) !important;

/* 背景：中央は透明度を上げ、縁に向かって光を溜める */
background: 
  /* プリズム・ハイライト */
  linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 100%),
  /* 液体感を出すベース */
  radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;

/* ★縁の歪み（屈折）をシミュレートする多重インセットシャドウ */
box-shadow: 
  /* 1. 外側の浮遊感 */
  0 30px 60px rgba(0, 0, 0, 0.2),
  /* 2. 【屈折エッジ】縁に光が溜まって背景が白んでいる様子（屈折の入り口） */
  inset 0 0 0 1px rgba(255, 255, 255, 0.4),
  /* 3. 【レンズ効果】縁の直内側を暗くし、背景が「曲がっている」ような影を落とす */
  inset 0 0 25px rgba(255, 255, 255, 0.3),
  /* 4. 【肉厚感】分厚いガラスの底に溜まる光 */
  inset -10px -15px 40px rgba(255, 255, 255, 0.1),
  /* 5. 【スペキュラ】表面の鋭いテカリ */
  inset 2px 2px 4px rgba(255, 255, 255, 0.7) !important;

/* 境界線：物質としての厚みを定義 */
border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
border-top: 1.5px solid rgba(255, 255, 255, 0.8) !important;

/* 角丸：液体の表面張力を感じる滑らかな曲線 */
border-radius: 40px;

}

.cat-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
}

[id^="tabpage"] a + hr {
  opacity: 0.5;
}

.cat-icon {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin-right: 10px;
}

.cat-text {
  flex: 1;
}

.cat-title {
  font-size: 20px;
  font-weight: bold;
}

.cat-desc {
  font-size: 14px;
}
/* コンテンツはここまで */