/* global > color */
/* *::-webkit-scrollbar {
  display: none;
} */

:root {
  /* --- blue --- */
  --color-blue-100: #ffffff;
  --color-blue-99: #febfff;
  --color-blue-98: #faf8ff;
  --color-blue-95: #eef0ff;
  --color-blue-90: #dae2ff;
  --color-blue-80: #b1c5ff;
  --color-blue-70: #87a9ff;
  --color-blue-60: #588cff;
  --color-blue-50: #0e6efd;
  --color-blue-40: #0057ce;
  --color-blue-35: #004cb6;
  --color-blue-30: #00419e;
  --color-blue-25: #003687;
  --color-blue-20: #002c70;
  --color-blue-15: #00225b;
  --color-blue-10: #001946;
  --color-blue-5: #000f31;
  --color-blue-0: #000000;

  /* --- gray --- */
  --color-gray-100: #ffffff;
  --color-gray-99: #fcfcff;
  --color-gray-98: #f7f9ff;
  --color-gray-95: #eef1f6;
  --color-gray-90: #e0e3e8;
  --color-gray-80: #c3c7cc;
  --color-gray-70: #a8abb0;
  --color-gray-60: #8d9196;
  --color-gray-50: #74777c;
  --color-gray-40: #5b5f63;
  --color-gray-35: #4f5357;
  --color-gray-30: #43474c;
  --color-gray-25: #383c40;
  --color-gray-20: #2d3135;
  --color-gray-15: #22262a;
  --color-gray-10: #181c20;
  --color-gray-5: #0d1115;
  --color-gray-0: #000000;

  /* --- error --- */
  --color-error-100: #ffffff;
  --color-error-99: #fff8ff;
  --color-error-98: #fff8f7;
  --color-error-95: #ffedea;
  --color-error-90: #ffddd6;
  --color-error-80: #ffb4ab;
  --color-error-70: #ff897d;
  --color-error-60: #ff5449;
  --color-error-50: #de3730;
  --color-error-40: #ba1a1a;
  --color-error-35: #a80710;
  --color-error-30: #93000a;
  --color-error-25: #7e0007;
  --color-error-20: #690005;
  --color-error-15: #540003;
  --color-error-10: #410002;
  --color-error-5: #2d0001;
  --color-error-0: #000000;

  /* --- warning --- */
  --color-warning-100: #ffffff;
  --color-warning-99: #fff8ff;
  --color-warning-98: #fff8f4;
  --color-warning-95: #ffeede;
  --color-warning-90: #ffdd87;
  --color-warning-80: #fcba64;
  --color-warning-70: #dd9f4d;
  --color-warning-60: #bf8535;
  --color-warning-50: #a26c1d;
  --color-warning-40: #855400;
  --color-warning-35: #744900;
  --color-warning-30: #653e00;
  --color-warning-25: #553400;
  --color-warning-20: #462a00;
  --color-warning-15: #382100;
  --color-warning-10: #2a1700;
  --color-warning-5: #1c0e00;
  --color-warning-0: #000000;
}

@font-face {
  font-family: "Noto Sans JP Variable";
  src: url("/static/fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.ttf") format("truetype");
}

/* global > font */
:root {
  --font-family: "Noto Sans JP Variable";
  /* --- 見出し --- */
  --font-title-size: 28px;
  --font-title-weight: 700;
  --font-title-line-height: 140%;

  --font-h1-size: 24px;
  --font-h1-weight: 700;
  --font-h1-line-height: 140%;

  --font-h2-size: 20px;
  --font-h2-weight: 700;
  --font-h2-line-height: 140%;

  --font-h3-size: 18px;
  --font-h3-weight: 700;
  --font-h3-line-height: 140%;

  /* --- テキスト --- */
  --font-text-base-strong-size: 14px;
  --font-text-base-strong-weight: 700;
  --font-text-base-strong-line-height: 110%;

  --font-text-base-size: 14px;
  --font-text-base-weight: 400;
  --font-text-base-line-height: 110%;

  --font-text-sub-strong-size: 12px;
  --font-text-sub-strong-weight: 700;
  --font-text-sub-strong-line-height: 110%;

  --font-text-sub-size: 12px;
  --font-text-sub-weight: 400;
  --font-text-sub-line-height: 110%;

  /* --- シャドウ --- */
  --shadow-drop-down: 0px 2px 4px var(--color-transparency-03);
  --shadow-modal: 0px 4px 8px var(--color-transparency-03);
}

:root {
  /* main */
  --color-primary: var(--color-blue-30);
  --color-secondary: var(--color-blue-90);

  /* text */
  --color-text-black: var(--color-gray-5);
  --color-text-gray: var(--color-gray-40);
  --color-text-link: var(--color-blue-35);
  --color-text-white: var(--color-gray-100);

  /* background */
  --color-surface-lowest: var(--color-gray-100);
  --color-surface-high: var(--color-gray-95);
  --color-surface-highest: var(--color-gray-90);

  /* outline */
  --color-outline: #74777c;
  --color-outline-variant: #c3c7cc;

  /* status / overlay */
  --color-opacity-01: rgba(255, 255, 255, 0.1);
  --color-opacity-02: rgba(255, 255, 255, 0.2);
  --color-overlay-01: rgba(0, 65, 158, 0.1);
  --color-overlay-02: rgba(0, 65, 158, 0.2);

  /* transparency */
  --color-transparency-03: rgba(13, 17, 21, 0.5);

  /* danger */
  --color-danger: var(--color-error-40);
  --color-danger-surface: var(--color-error-90);

  /* warning */
  --color-warning: var(--color-warning-80);
  --color-warning-surface: var(--color-warning-95);
}

/* global > content-width */
:root {
  --width-content-max: 1900px;
  --width-content-min: 1440px;
}

:root {
  --header-height: 64px;
  --button-radius: 30px;
  --sidebar-width: 250px;
}

/* ブラウザデフォルトの:focus-visible（黄系の枠）を無効化し、他inputと同様の黒系枠に統一 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--color-text-black);
  border: 1px solid var(--color-text-black);
}

/* ===== Typography Components ===== */
/* グローバルスタイルとBEMコンポーネントの併用 */

h1,
.c-heading--level-1 {
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line-height);
}

h2,
.c-heading--level-2 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  line-height: var(--font-h2-line-height);
}

h3,
.c-heading--level-3 {
  position: relative;
  display: flex;
  align-items: flex-start;
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: var(--font-h3-line-height);
  padding-left: 12px;
}

h3::before,
.c-heading--level-3::before {
  content: "";
  display: block;
  width: 4px;
  height: 17px;
  background-color: var(--color-primary);
  position: absolute;
  left: 0;
  top: 4px;
}

/* 見出しとバッジなどを横並び・中央揃えにしたい場合のみ使用（他ページに影響しない） */
h3.c-heading--level-3--inline,
.c-heading--level-3.c-heading--level-3--inline {
  align-items: center;
  gap: 16px;
}

.c-heading--level-4 {
  font-size: 16px;
  font-weight: var(--font-h3-weight);
}

.c-page-title {
  font-family: var(--font-family);
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  line-height: var(--font-title-line-height);
}

/* ===== checkbox unit ===== */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  cursor: pointer;
  user-select: none;
  /* テキスト */
  /* font-size: var(--font-text-base-size); */
  /* color: var(--color-text-black); */
}

/* 実体のinputは見えなくする（でもフォーカス可能） */
.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox__box {
  width: 17px;
  min-width: 17px;
  height: 17px;
  border-radius: 2px;
  /* 1) サブピクセルが気になるならどちらかを選択 */
  border: 1px solid var(--color-outline);
  /* ←A: 1pxにする */
  /* border: 0; box-shadow: inset 0 0 0 1.5px var(--color-outline); */
  /* ←B: 枠を影で */
  background-color: var(--color-surface-lowest);
  display: inline-block;
  position: relative;
  /* 中身を絶対配置 */
  box-sizing: border-box;
  /* 外形サイズを固定 */
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* チェックアイコン（常に存在、表示だけ切替） */
.checkbox__box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  /* アイコンの描画サイズ */
  transform: translate(-50%, -50%);
  background-color: #fff;
  -webkit-mask: url("/img/icons/check.svg") no-repeat center / contain;
  mask: url("/img/icons/check.svg") no-repeat center / contain;
  opacity: 0;
  /* ← 初期は非表示 */
  transition: opacity 0.12s ease;
}

/* 中間線（こちらも常駐） */
.checkbox__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background-color: #fff;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* ← 初期は非表示 */
  transition: opacity 0.12s ease;
}

/* checked */
.checkbox__input:checked+.checkbox__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  /* box-shadow版を使うとき：box-shadow: inset 0 0 0 1.5px var(--color-primary); */
}

.checkbox__input:checked+.checkbox__box::before {
  opacity: 1;
}

.checkbox__input:checked+.checkbox__box::after {
  opacity: 0;
}

/* 念のため消す */

/* indeterminate */
.checkbox__input:indeterminate+.checkbox__box,
.checkbox__input[data-state="indeterminate"]+.checkbox__box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  /* box-shadow版の場合：box-shadow: inset 0 0 0 1.5px var(--color-primary); */
}

.checkbox__input:indeterminate+.checkbox__box::before,
.checkbox__input[data-state="indeterminate"]+.checkbox__box::before {
  opacity: 0;
}

.checkbox__input:indeterminate+.checkbox__box::after,
.checkbox__input[data-state="indeterminate"]+.checkbox__box::after {
  opacity: 1;
}

/* --- disabled --- */
.checkbox__input:disabled+.checkbox__box {
  background-color: var(--color-surface-highest);
  border-color: var(--color-outline);
  box-shadow: none;
  opacity: 0.6;
}

.checkbox__input:disabled~.checkbox__label {
  color: var(--color-text-gray);
}

.checkbox__input:disabled+.checkbox__box,
.checkbox__input:disabled~.checkbox__label {
  cursor: not-allowed;
}

/* コンテナがdisabledにしたい場合（任意） */
.checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.8;
  pointer-events: none;
}

/* ===== radio unit ===== */

/* ラジオボタンコンポーネント */
.c-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.c-radio__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.c-radio__checkmark {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-outline);
  border-radius: 50%;
  background-color: var(--color-text-white);
  margin: 3px;
}

/* チェックされた状態 */
.c-radio__input:checked+.c-radio__checkmark {
  border-color: var(--color-primary);
}

.c-radio__input:checked+.c-radio__checkmark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* 無効状態 */
.c-radio--disabled {
  border-color: var(--color-outline-variant);
  pointer-events: none;
  opacity: 0.4;
}

.c-radio--disabled .c-radio__checkmark {
  background-color: var(--color-surface-highest);
}

.c-radio--checked-disabled .c-radio__checkmark {
  background-color: var(--color-text-white);
}

.c-radio--disabled .c-radio__input:checked+.c-radio__checkmark {
  border-color: var(--color-outline);
}

.c-radio--disabled .c-radio__input:checked+.c-radio__checkmark::after {
  background-color: var(--color-outline);
}

/* コンポーネント */
/* ボタンコンポーネント */
.c-button {
  border-radius: var(--button-radius);
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* ボタン内テキストの改行を防ぐ */
  position: relative;
  position: relative;
}

.c-button--small {
  display: inline-flex;
  padding-block: 6px;
  min-width: 56px;
  gap: 2px;
}

.c-button--middle-small {
  width: 100px;
  padding-block: 6px;
  gap: 4px;
}

.c-button--middle {
  --icon-size: 24px;
  min-width: 100px;
  padding-block: 5px;
}

.c-button-middle-noicon {
  max-width: 108px;
}

/* button:active */
.c-button:active::before,
.c-button--active::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-opacity-02);
  border-radius: inherit;
  pointer-events: none;
}

/* line/borderlessボタン用のオーバーレイ（プライマリカラーベース） */
.c-button--line:hover,
.c-button--borderless:hover {
  background-color: var(--color-overlay-01);
}

.c-button--line:active::before,
.c-button--line.c-button--active::before,
.c-button--borderless:active::before,
.c-button--borderless.c-button--active::before {
  background-color: var(--color-overlay-02);
}

/* small/middle で変数を切り替え */

.c-button__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* 装飾のみならクリック貫通 */
}

.c-button__label {
  line-height: 1.1;
  padding: 4.5px 4px;
}

.table__button--small .c-button__label,
.c-button--small .c-button__label {
  padding: 1.5px 4px;
}

.c-button__label--middle-small {
  padding-block: 4px;
}

/* button:filled */
.c-button--filled {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.c-button--filled .c-button__icon img {
  filter: brightness(0) invert(1);
}

/* button:borderless */
.c-button--borderless {
  background-color: transparent;
  border: none;
  color: var(--color-primary);
}

.c-button--borderless.c-button--disabled {
  background-color: transparent;
  border: none;
}

/* button: filled: disabled */
.c-button--disabled {
  cursor: not-allowed;
  background-color: var(--color-text-gray);
  border: 1px solid var(--color-text-gray);
  opacity: 0.4;
}

/* disabled時はhover/activeエフェクトを無効化 */
.c-button--disabled:hover::before,
.c-button--disabled:active::before,
.c-button--disabled.c-button--active::before {
  display: none;
}

.c-button--line {
  background-color: white;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

/* line の disabled 表現（hoverで色が変わらない） */
.c-button--line.c-button--disabled {
  background-color: #fff;
  /* そのまま白 */
}

.c-button--icon {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-button--icon.c-button--filled {
  color: white;
}

.c-button--icon.c-button--line {
  color: var(--color-primary);
}

.c-button--icon.c-button--borderless {
  color: var(--color-text-black);
}

/* ===== アイコンボタン ===== */
.c-button--icon.c-button--small {
  font-size: 16px;
  padding: 0px;
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.c-button--icon.c-button--middle {
  font-size: 18px;
  padding: 0px;
  width: 36px;
  height: 36px;
  min-width: 36px;
}

/* ===== コンボボックス ===== */
.c-combo-box {
  width: 100%;
  position: relative;
  margin: 8px;
}

.c-combo-box__control {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  outline: 1px solid var(--color-text-black);
  border-radius: 4px;
  padding: 8px 12px;
  background-color: var(--color-surface-lowest);
  cursor: text;
  min-height: 36px;
}

/* inputクリック時・フォーカス時・メニュー展開時のoutline */
.c-combo-box__control:focus-within,
.c-combo-box__control--open,
.c-combo-box__control:active {
  outline: 2px solid var(--color-text-black);
}

.c-combo-box__control--error {
  outline: 1px solid var(--color-danger) !important;
  border: 1px solid var(--color-danger) !important;
}

.c-combo-box__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  color: var(--color-text-black);
  outline: none;
  z-index: 1;
  padding-right: 50px;
}

.c-combo-box__input::placeholder {
  color: var(--color-text-gray);
}

.c-combo-box__input:focus,
.c-combo-box__input:focus-visible {
  outline: 2px solid var(--color-text-black);
}

/*デフォルトの矢印非表示*/
.c-combo-box__input::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
}

.c-combo-box__delete,
.c-combo-box__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  cursor: pointer;
  z-index: 10;
}

.c-combo-box__delete {
  right: 32px;
  display: none;
}

.c-combo-box__arrow {
  right: 12px;
}

.c-combo-box__arrow--disabled img {
  filter: brightness(0) opacity(0.4);
}

.c-combo-box__control--disabled {
  background-color: var(--color-surface-highest);
  border-color: var(--color-outline);
  opacity: 0.4;
}

/* 削除アイコンの表示・非表示 */
.c-combo-box__input:not(:placeholder-shown)+.c-combo-box__delete {
  display: flex;
  pointer-events: auto;
}

.c-combo-box__input:placeholder-shown+.c-combo-box__delete {
  display: none;
}

/* セレクトボックス*/
.c-combo-box__select-list {
  position: absolute;
  left: 0;
  right: 0;
  margin-block: 4px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 4px;
  background-color: var(--color-surface-lowest);
  max-height: 264px;
  overflow: auto;
  z-index: 30;
  display: none;
  padding: 8px;
  box-shadow: var(--shadow-drop-down);
}

.c-combo-box__select-list--open {
  display: block;
}

.c-combo-box--menu-top .c-combo-box__select-list {
  top: auto;
  bottom: calc(100% + 4px);
}

.c-combo-box__floating-container {
  position: absolute;
  z-index: 1000;
  display: none;
}

.c-combo-box__item {
  margin-bottom: 4px;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--color-text-black);
}

.c-combo-box__item:last-child {
  margin-bottom: 0;
}

.c-combo-box__item:hover {
  background-color: var(--color-surface-high);
}

.c-combo-box__remove {
  font-size: 12px;
  cursor: pointer;
  color: var(--color-text-gray);
  padding: 2px;
  border: none;
  background-color: transparent;
}

/* ===== 選択済み項目のハイライト ===== */
.c-combo-box__item--selected {
  background-color: var(--color-primary-opacity-08) !important;
  font-weight: 600;
}

/* ===== コンボボックス階層ナビゲーション ===== */
.c-combo-box__back {
  background-color: #f5f5f5 !important;
  border-bottom: 1px solid #e0e0e0;
  font-weight: bold;
  color: #666;
}

.c-combo-box__back:hover {
  background-color: #e8e8e8 !important;
}

/* ===== 戻るボタン ===== */
.c-back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  background-color: var(--color-gray-5);
  border-radius: 8px;
  width: 55px;
  height: 55px;
  min-width: 55px;
  position: relative;
  cursor: pointer;
}

.c-back-to-top:hover {
  opacity: 0.7;
}

.c-back-to-top:hover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-opacity-02);
}

.c-back-to-top__text {
  color: var(--color-gray-100);
  font-size: 10px;
  text-align: center;
}

.c-back-to-top__icon {
  height: 25px;
}

/* ===== レイアウト: Back to Top Button ===== */
.l-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
}

/* ===== ドロップダウンメニューボタン ===== */
.c-dropdown-button {
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
}

.c-dropdown-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
}

.c-dropdown-button--active::before {
  background-color: var(--color-overlay-02);
}

.c-dropdown-button:hover::before {
  background-color: var(--color-overlay-01);
}

.c-dropdown-button--disabled {
  color: #d9d9d9;
  pointer-events: none;
}

.c-dropdown-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.c-dropdown-checkbox:checked {
  background-image: url(../../img/icons/check.svg);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.c-dropdown-checkbox--outline {
  border: 2px solid var(--color-outline);
  border-radius: 4px;
  width: 17px;
  height: 17px;
}

/* ===== Layout ===== */
body {
  font-family: var(--font-family);
  background-color: var(--color-gray-90);
  padding-top: 14px;
  padding-left: 20px;
  color: var(--color-text-black);
  font-size: var(--font-text-base-size);
  line-height: var(--font-text-base-line-height);
}

/* ===== Header Layout ===== */
.header,
.l-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  padding-left: 18px;
  padding-right: 20px;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__right {
  display: flex;
  align-items: center;
  position: relative;
}

.header__list {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
}

/* ヘッダーメニュー */
.header__menu {
  display: flex;
  align-items: center;
  padding: 6px;
}

.header__icon {
  width: 24px;
  height: 24px;
}

.header__item-label {
  font-weight: 16px;
}

.header__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--color-text-black);
  position: relative;
}

/* ===== Header 言語ボタンのドロップダウン ===== */
.header__lang-dropdown {
  display: none;
  position: absolute;
  /* ボタンの下に出す */
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  padding: 12px;
  margin-top: 4px;
  border-radius: 4px;
  box-shadow: var(--shadow-drop-down);
  top: 36px;
}

/* 表示状態 */
.header__lang-dropdown.is-active {
  display: block;
}

.header__lang-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ボタンのコンテナを相対にしておくと位置指定しやすい */
.header__lang-dropdown .c-dropdown-button {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ===== Header ユーザーボタンのドロップダウン ===== */
.header__user-dropdown {
  display: none;
  position: absolute;
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  padding: 12px;
  margin-top: 4px;
  border-radius: 4px;
  box-shadow: var(--shadow-drop-down);
  right: 0;
  width: 250px;
}

.header__user-dropdown.is-active {
  display: block;
}

.header__user-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--color-outline-variant);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.header__user-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header__user-dropdown-heading {
  color: var(--color-text-gray);
}

/* ===== Sidebar Layout ===== */
.sidebar,
.l-sidebar {
  display: none;
}

.sidebar--open,
.l-sidebar--open {
  display: block;
  height: calc(100vh - var(--header-height));
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  /* z-index: 100; */
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* サイドバーが閉じた状態（アイコンのみ表示） */
.sidebar--closed {
  display: block;
  height: calc(100vh - var(--header-height));
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: 100;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sidebar__contents {
  padding: 16px;
}

/* sidebar--closed 20250929修正 */
.sidebar--closed .sidebar__list {
  display: none;
}

/* サイドバーが閉じた状態でのコンテンツ調整 */
.sidebar--closed .sidebar__contents {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 23.5px;
}

/* サイドバーが閉じた状態でテキストを非表示 */
.sidebar--closed .sidebar__item-label {
  display: none;
}

.sidebar--closed .sidebar__title {
  display: none;
}

/* サイドバーが閉じた状態でアイテムのレイアウトを中央寄せ */
.sidebar--closed .sidebar__item {
  justify-content: center;
  padding: 12px 8px;
}

/* サイドバーが閉じた状態でul要素の上下にボーダーを追加 */
.sidebar--closed .sidebar__list {
  border-top: 1px solid #c3c7cc;
  border-bottom: 1px solid #c3c7cc;
}

/* 最初のul要素の上ボーダーを削除 */
.sidebar--closed .sidebar__list:first-child {
  border-top: none;
  padding-bottom: 12.8px;
}

/* 最後のul要素の下ボーダーを削除 */
.sidebar--closed .sidebar__list:last-child {
  border-top: none;
  border-bottom: none;
}

/* 2番目と4番目のul要素のボーダーを削除 */
.sidebar--closed .sidebar__list:nth-of-type(2),
.sidebar--closed .sidebar__list:nth-of-type(4) {
  border-top: none;
  border-bottom: none;
}

/* 3番目と5番目のul要素にパディングを追加 */
.sidebar--closed .sidebar__list:nth-of-type(3),
.sidebar--closed .sidebar__list:nth-of-type(5) {
  padding-block: 12.8px;
}

.sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__item {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text-black);
}

.sidebar__item--active {
  background-color: var(--color-overlay-01);
  border-radius: 5px;
}

.sidebar__item--active.sidebar__item {
  font-weight: 700;
}

.sidebar__item--active img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(95%) saturate(2364%) hue-rotate(207deg) brightness(94%) contrast(102%);
}

.sidebar__item:hover {
  background-color: var(--color-overlay-01);
  border-radius: 4px;
}

.l-sidebar--open {
  font-size: 14px;
}

.sidebar__title {
  padding-top: 20.5px;
  padding-bottom: 4.5px;
  color: var(--color-text-black);
  margin-bottom: 4px;
}

.sidebar__item-icon {
  width: 24px;
  height: 24px;
}

.sidebar__item-label {
  font-size: 14px;
}

/* ===== Tabs ===== */
.c-tabs {
  border-bottom: 1px solid var(--color-outline-variant);
}

.c-tabs__list {
  display: flex;
  align-items: flex-end;
  padding: 0 0 2px 2px;
  /* 下に4pxの余白 */
  margin: 0;
  list-style: none;
}

/* タブ本体 */
.c-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* ラベルとバッジの間の余白 */
  padding: 6.5px 12px;
  /* タブボタン内側の余白 */
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--font-text-base-size);
  color: var(--color-text-black);
  /* ベースのテキストカラー */
}

/* overlay レイヤー（hover/active で色を変える。背景は置き換えない） */
/* hover */
.c-tabs__tab:hover::before {
  background-color: var(--color-overlay-01);
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
}

/* active（押下時） */
.c-tabs__tab:active::before {
  background-color: var(--color-overlay-02);
}

/* active/selected 表現：文字色 + 下線 */
.c-tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: var(--font-text-base-strong-weight);
}

/* 下線（選択中だけ表示） */
.c-tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.12s ease;
}

.c-tabs__tab[aria-selected="true"]::after {
  background-color: var(--color-primary);
}

/* フォーカス（キーボード操作用の見やすいアウトライン） */
.c-tabs__tab:focus-visible {
  outline: 2px solid var(--color-outline-variant);
  outline-offset: 2px;
}

/* 無効 */
.c-tabs__tab--disabled,
.c-tabs__tab[aria-disabled="true"] {
  color: var(--color-gray-60);
  cursor: not-allowed;
  opacity: 0.6;
}

.c-tabs__tab--disabled::before,
.c-tabs__tab[aria-disabled="true"]::before {
  background-color: transparent !important;
  /* overlay 無効 */
}

/* ===== バッジ ===== */
.c-badge {
  display: inline-block;
  padding: 3px 4px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}

/* blueバッジ（既存デザイン） */
.c-badge--blue {
  background-color: var(--color-secondary);
  /* 薄いブルー */
  color: var(--color-primary);
  /* 濃いブルー文字 */
  font-weight: var(--font-text-base-strong-weight);
}

/* grayバッジ */
.c-badge--gray {
  background-color: var(--color-text-gray);
  /* 薄いグレー背景 */
  color: var(--color-text-white);
  /* グレー文字 */
}

/* redバッジ */
.c-badge--red {
  background-color: var(--color-error-90);
  /* #FFDAD6 */
  color: var(--color-error-40);
  /* #BA1A1A */
}

/* darkバッジ */
.c-badge--dark {
  background-color: var(--color-gray-90);
  /* #E0E3E8 */
}

/* warningバッジ */
.c-badge--warning {
  background-color: var(--color-warning-95);
  /* #FFEEDE */
}

/* requiredバッジ */
.c-badge--required {
  background-color: var(--color-danger);
  color: var(--color-text-white);
  margin-left: 4px;
  font-weight: var(--font-text-sub-strong-weight);
  font-size: var(--font-text-sub-strong-size);
  text-align: center;
}

/* ステータスラベル*/
.c-badge--lg {
  padding: 4px;
}

/* ===== Breadcrumb ===== */
.c-breadcrumb {
  color: var(--color-text-black);
  font-size: var(--font-text-base-size);
}

.c-breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  /* 長い時に折り返し */
}

/* 各アイテム */
.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-black);
  font-size: var(--font-text-base-size);
  line-height: var(--font-text-base-line-height);
}

/* リンク色（例：ブルー） */
.c-breadcrumb__item a {
  color: var(--color-text-link);
  text-decoration: none;
}

.c-breadcrumb__item a:hover,
.c-breadcrumb__item a:focus-visible {
  text-decoration: underline;
}

/* 最後の要素（現在地） */
.c-breadcrumb__item[aria-current="page"] {
  color: var(--color-text-black);
  font-weight: var(--font-text-base-weight);
}

/* 区切り（矢印）— 直前に要素がある li に付与 */
.c-breadcrumb__item+.c-breadcrumb__item::before {
  content: "";
  display: inline-block;
  margin: 0 4px;
  padding: 4px 5px;
  width: 4px;
  height: 1em;
  background-color: var(--color-text-gray);
  /* 矢印色に相当 */
  -webkit-mask: url("/img/icons/arrow_bread.svg") no-repeat center / 4px auto;
  mask: url("/img/icons/arrow_bread.svg") no-repeat center / 4px auto;
}

/* ===== Main Content Layout ===== */
.main,
.l-main {
  position: fixed;
  top: var(--header-height);
  left: var(--sidebar-width);
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 8px;
  height: calc(100vh - 20px - var(--header-height));
  background-color: var(--color-gray-90);
  padding-right: 20px;
  padding-bottom: 20px;
  width: calc(100vw - var(--sidebar-width));
  transition: left 0.3s ease, width 0.3s ease;
}

.main.main--external-scroll {
  height: calc(100vh - 40px - var(--header-height));
  padding-bottom: 0;
}

/* サイドバーが閉じた状態でのメインコンテンツ調整 */
.sidebar--closed~.main,
.sidebar--closed~.l-main {
  left: 20px;
  width: calc(100vw - 20px);
}

.main__contents {
  background-color: #fff;
  width: 100%;
  min-width: 1170px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;

  /* height: auto; */
  /* max-height: 100%; */
  overflow: auto;
}

.main section {
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  gap: 16px;
}

.c-block-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.l-base-area {
  background-color: var(--color-surface-high);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.l-base-area h3 {
  width: 100px;
}

/* ===== Search Area Layout ===== */
.l-search-area {
  background-color: var(--color-surface-high);
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 16px;
}

.l-search-area__content {
  width: 100%;
}

.search-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-filters__row {
  display: flex;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
}

.search-filters__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  max-width: 280px;
  flex: 1;
}

.search-filters__label {
  font-size: var(--font-text-size);
  color: var(--color-text-black);
  margin-bottom: 4px;
}

.search-filters__combo-wrapper {
  width: 100%;
}

.search-filters__actions {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-left: auto;
}

/* ===== Account Info Single Column ===== */
.account-info-single-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-info-row,
.ip-info-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.account-info-label {
  /* font-size: var(--font-text-size);
  font-weight: var(--font-text-weight);
  color: var(--color-gray-40); */
  color: var(--color-text-black);
  font-size: var(--font-text-base-size);
  font-weight: var(--font-text-base-weight);
  min-width: 250px;
  flex-shrink: 0;
}

.account-info-value {
  /*
  font-size: var(--font-text-size);
  font-weight: var(--font-text-weight);
  color: var(--color-text-black);
*/
  font-size: var(--font-text-base-size);
  color: var(--color-text-black);
  line-height: 1.4;
  flex: 1;
}

.l-base-area .account-info-single-column .account-info-row .account-info-value {
  line-height: 1;
}

.l-base-area .account-info-single-column .account-info-row .account-info-label,
.ip-info-data {
  max-width: 150px !important;
  min-width: 150px !important;
}

/* ===== Vulnerability Filters ===== */
.vulnerability-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-gray-90);
  margin-bottom: 16px;
}

.vulnerability-filters__buttons {
  display: flex;
  gap: 8px;
}

/* ===== Vulnerability List ===== */
.vulnerability-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vulnerability-item {
  border: 1px solid var(--color-gray-90);
  border-radius: 4px;
  background: white;
}

.vulnerability-item__header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  gap: 12px;
}

.vulnerability-item__header:hover {
  background-color: var(--color-gray-95);
}

.vulnerability-item__checkbox {
  flex-shrink: 0;
}

.vulnerability-item__info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  font-size: var(--font-text-size);
  flex-wrap: wrap;
}

.vulnerability-item__id {
  min-width: 80px;
  color: var(--color-text-black);
}

.vulnerability-item__service {
  min-width: 60px;
  color: var(--color-text-black);
}

.vulnerability-item__rule {
  min-width: 180px;
  color: var(--color-text-black);
}

.vulnerability-item__region {
  min-width: 60px;
  color: var(--color-text-black);
}

.vulnerability-item__resource {
  min-width: 100px;
  color: var(--color-text-black);
}

.vulnerability-item__date {
  min-width: 140px;
  color: var(--color-text-black);
  font-variant-numeric: tabular-nums;
}

.vulnerability-item__count {
  min-width: 30px;
  color: var(--color-text-black);
  text-align: center;
}

.vulnerability-item__toggle {
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.vulnerability-item--expanded .vulnerability-item__toggle {
  transform: rotate(180deg);
}

.vulnerability-item__details {
  border-top: 1px solid var(--color-gray-90);
  background-color: var(--color-gray-95);
  padding: 20px;
}

/* ===== Vulnerability Details ===== */
.vulnerability-details__section {
  margin-bottom: 24px;
}

.vulnerability-details__section h4 {
  font-size: var(--font-text-size);
  font-weight: var(--font-text-weight);
  color: var(--color-text-black);
  margin-bottom: 12px;
}

.vulnerability-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

.vulnerability-details__item {
  display: flex;
  gap: 16px;
}

.vulnerability-details__label {
  font-size: var(--font-text-size);
  color: var(--color-gray-40);
  min-width: 200px;
  flex-shrink: 0;
}

.vulnerability-details__value {
  font-size: var(--font-text-size);
  color: var(--color-text-black);
}

/* ===== Vulnerability Footer ===== */
.vulnerability-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-top: 24px;
}

.vulnerability-footer__buttons {
  display: flex;
  gap: 12px;
}

/* ===== Expandable Table Styles ===== */
.c-table--expandable .c-table__row--expandable:hover {
  /* background-color: var(--color-gray-95); */
  background-color: rgb(0, 65, 158, 0.1);
}

.c-table__td--details {
  padding: 0 !important;
  border-top: none;
}

/* tkt-01専用：テーブル詳細ブロックのコンテナ */
.c-table__td--details .c-table__details-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 40px !important;
}

.c-table__td--center {
  text-align: center;
}

.c-table__rule-name {
  width: 100%;
}

.c-table__details-content h4 {
  font-size: 16px;
  font-weight: var(--font-text-base-strong-weight);
  margin: 4px 0;
}

.c-table__details-content h4:first-child {
  margin: 0 0 4px;
}

.c-table__details-content a {
  color: var(--color-text-link);
  text-decoration: none;
}

.c-table__details-content a:hover {
  text-decoration: underline;
}

/* 詳細テーブル用のflexレイアウト */
.c-table__details-content {
  padding: 6px 30px;
}

.c-table__details-flex {
  display: flex;
  align-items: flex-start;
}

.c-table__details-label {
  min-width: 300px;
  flex-shrink: 0;
  font-size: var(--font-text-size);
  color: var(--color-text-black);
  padding: 0 8px 0 20px;
}

.c-table__details-content .c-table__details-flex:last-child .c-table__details-label {
  padding-bottom: 8px !important;
}

.c-table__details-value {
  font-size: var(--font-text-size);
  color: var(--color-text-black);
  padding: 0;
}

.c-table__details-value--01 {
  width: 100px;
}

/* 拡張可能テーブルの行のボーダー調整 */
.c-table__row--expanded {
  border-bottom: none !important;
}

.c-table__row--expanded .c-table__td {
  border-bottom: none !important;
}

/* テーブルトグルボタンのスタイル */
.c-table__td--toggle {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
  padding: 8px;
}

.c-table__th--toggle {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
}

/*  agm-01トグルアイコンのサイズ指定 */
.js-toggle-icon {
  width: 16px;
  height: 16px;
}

/* チェックボックス列の幅制限 */
.c-table__th--checkbox {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding-inline: 8px;
}

/* agm-05: ドラッグ列の幅制限 */
.c-table__th--drag,
.c-table__td--drag {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding-inline: 8px;
}

/* テーブルヘッダーのフォントウェイトを通常に */
.c-table--expandable .c-table__th {
  font-weight: normal;
}

/* モーダル表示制御 */
.c-modal[aria-hidden="false"],
.c-modal.is-active {
  display: flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
}

.c-modal[aria-hidden="true"] {
  display: none !important;
}

.c-table__toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-40);
  transition: transform 0.2s ease;
}

.c-table__toggle-btn:hover {
  color: var(--color-blue-50);
}

.c-table__row--expanded .c-table__toggle-btn {
  transform: rotate(180deg);
}

.c-table--nested {
  margin: 0;
  background: white;
  border-radius: 4px;
}

.c-table--nested .c-table__th--label {
  background-color: var(--color-gray-95);
  font-size: var(--font-text-size);
  color: var(--color-gray-40);
  font-weight: var(--font-text-weight);
  text-align: left;
  padding: 12px 16px;
  width: 200px;
  min-width: 200px;
}

.c-table--nested .c-table__td {
  padding: 12px 16px;
}

/* ===== Full Width Table ===== */
.c-table--expandable {
  width: 100%;
  table-layout: fixed;
}

.c-table-wrapper {
  width: 100%;
}

/* agm-05専用: テーブルを100%幅に */
.agm-05-table {
  width: 100%;
}

/* ===== 検索条件（レイアウト） ===== */
.search-conditions {
  display: grid;
  grid-template-columns: 100px 1fr;
  /* 左：ラベル / 右：入力域 */
  row-gap: 12px;
  column-gap: 40px;
}

/* 行 */
.search-conditions__label {
  align-self: center;
  padding-top: 6px;
  /* ラベル文字の縦位置を合わせる */
  color: var(--color-text-black);
  font-size: var(--font-text-base-size);
  font-weight: var(--font-text-base-weight);
  text-align: right;
}

.search-conditions__control {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* 縦 / 横 */
}

/* チェックボックスの間隔を安定させる */
.search-conditions__control .checkbox+.checkbox {
  margin-left: 3.5px;
}

/* コンボボックスの余白調整（既存の8pxを打ち消し） */
.search-conditions .c-combo-box {
  margin: 0;
  max-width: 100%;
}

/* フッター（適用ボタン） */
.search-conditions__footer {
  grid-column: 1 / -1;
  /* 2カラムにまたぐ */
  display: flex;
  justify-content: flex-start;
  /* 左寄せ（右にしたい場合は flex-end） */
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--color-outline-variant);
}

/* 適用ボタンのサイズ感と余白 */
.search-conditions__apply {
  margin-top: 0px;
}

.l-table-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  /* overflow-x: auto; */
}

.l-table-area__menues {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-table-area__menues--end {
  justify-content: flex-end;
}

.l-table-area__load-more {
  display: flex;
  justify-content: center;
}

/* ===== Table Block ===== */
.c-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 4px;
  overflow: visible;
  border: 1px solid var(--color-outline-variant);
}

/* rsc-01 サービス利用状況テーブル専用: EC2以降87px固定、アカウントID・利用料合計で残り幅を調整 */
.rsc-01-service-table-area .rsc-01-service-table {
  table-layout: auto;
  width: 100%;
}

.rsc-01-service-table-area .rsc-01-service-table .c-table__th--group,
.rsc-01-service-table-area .rsc-01-service-table .c-table__row--expandable {
  height: 40px;
}

.rsc-01-service-table-area .rsc-01-service-table__row--total {
  background-color: var(--color-secondary);
}

/* rsc-01: テーブルセルのテキストを上揃え */
.rsc-01__section .c-table__tbody td {
  vertical-align: top;
}

.c-table tr:first-child th:first-child,
.c-table tr:first-child {
  border-top-left-radius: 3px;
}

.c-table tr:first-child th:last-child,
.c-table tr:first-child {
  border-top-right-radius: 3px;
}

/* 各列の幅を明示的に指定 */
.c-table__thead th {
  background: var(--color-surface-high);
  text-align: left;
  font-size: var(--font-text-base-size);
  font-weight: var(--font-text-base-weight);
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  overflow: hidden;
  min-height: 46.81px;
  height: 46.81px;
  /* text-overflow: ellipsis; */
  overflow-wrap: anywhere;
}

/* ソート可能な列はメニュー表示のためoverflowをvisibleに */
.c-table__thead th.c-table__th--sortable {
  overflow: visible !important;
}

.c-table__thead tr {
  overflow: visible !important;
}

.c-table__thead {
  overflow: visible !important;
}

/* カテゴリ見出し行（Compute, Container 等）の下にボーダー */
.c-table__th--group {
  border-bottom: 1px solid var(--color-outline-variant);
}

.table__button {
  padding: 6px 12px;
}

.table__button--update {
  /* padding-block: 6px; */
  padding: 6px 8px;
  gap: 2px;
}

.table__button--update .c-button__icon {
  width: 16px;
  height: 16px;
}

.c-table__thead--sortable {
  padding: 0px;
}

.c-table__tbody td {
  font-size: var(--font-text-base-size);
  padding: 9px 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-outline-variant);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: break-word;
}

.c-table--rule-detail td {
  vertical-align: top;
}

.c-table__tbody--cdl02 td:last-child,
.c-table__tbody--cdl02 td:nth-last-child(7) {
  padding-inline: 4px;
}

.c-table__tbody tr:last-child td {
  border-bottom: none;
}

.c-table__tbody tr:last-child td:last-child {
  border-radius: 0 0 4px 0px;

}

.c-table__tbody tr:last-child td:first-child {
  border-radius: 0 0 0px 4px;

}

/* ---- sorting (icon is display-only) ---- */
.c-table__th {
  position: relative;
}

.c-table__th--sortable {
  position: relative;
  padding-right: 38px;
  cursor: pointer;
  overflow: visible;
}

.c-table__th.c-table__th--action {
  width: 44px;
  text-align: center;
  vertical-align: middle;
}

.c-table__td.c-table__td--action {
  width: 44px;
  text-align: center;
  vertical-align: middle;
}

.c-table__sort {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
}

.c-table__sort-icon {
  /* インラインSVGを包むだけの箱 */
  display: inline-flex;
  width: 8px;
  height: 6px;
}

.c-table__th[aria-sort="ascending"] .c-table__sort-icon svg {
  transform: rotate(180deg);
}

.c-table__th[aria-sort="ascending"] .c-table__sort-icon path,
.c-table__th[aria-sort="descending"] .c-table__sort-icon path {
  fill: var(--color-text-black);
  /* ソート中は濃く */
  opacity: 1;
}

.c-table .c-button {
  font-size: 12px;
}

/* ===== Status Label Block ===== */
.statusLabel {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-text-sub-strong-size);
  font-weight: var(--font-text-sub-strong-weight);
  line-height: 1;
  white-space: nowrap;
}

.statusLabel--red {
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

.statusLabel--yellow {
  background: var(--color-warning-surface);
  color: var(--color-warning);
}

.statusLabel--blue {
  background: var(--color-secondary);
  color: var(--color-primary);
}

.statusLabel--gray {
  background: var(--color-gray-90);
  color: var(--color-gray-40);
}

/* ===== ルール選択モーダル（元の形に戻す） ===== */
.c-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000 !important;
}

.c-modal.is-active {
  display: flex;
}

.c-modal__content {
  margin: auto;
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.c-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* 検索 */

.c-search {
  position: relative;
  border: 1px solid var(--color-text-black);
  border-radius: 4px;
  height: 36px;
  width: 100%;
}

.c-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.c-search__input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 10px 0 32px;
  color: var(--color-text-black);
  background: transparent;
}

.c-search__input:focus,
.c-search__input:focus-visible {
  background: transparent;
  outline: 2px solid var(--color-text-black);
}

.c-search__btn {
  gap: 4px;
  padding-inline: 22px;
}

.c-search__btn-label {
  padding: 4px;
}

/* スクロール枠（元のスタイルを維持） */
.c-rule-panel__scroll {
  height: 334px;
  overflow: auto;
  border: 1px solid var(--color-gray-80);
  border-radius: 5px;
  padding-left: 12px;
  background: var(--color-surface-lowest);
}

.c-rule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}

.c-rule-group {
  margin-top: 10px;
}

.c-rule-group__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-black);
  margin: 6px 0;
}

.c-rule-group .c-rule-item {
  padding-left: 32px;
}

/* Radio button based rule item styles for rul-06 */
.c-rule-item__radio {
  display: none;
}

.c-rule-item {
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}

.c-rule-item--selected {
  background-color: #ccd9ec;
}

.c-rule-item__label {
  flex: 1;
}

.c-rule-item__check {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.c-rule-group__heading-text {
  color: var(--color-text-black);
  margin: 6px 0;
  padding-left: 4px;
  font-weight: 500;
}

/* フッター */
.c-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-rule-panel__counter {
  margin-bottom: 8px;
}

.c-rule-panel__actions {
  display: flex;
  gap: 8px;
}

.c-ticket-panel__counter-count,
.c-rule-panel__counter-count {
  font-size: 24px;
  margin: 0px 4px;
}

/* ルール選択モーダル専用 */
.c-rule-modal__content {
  width: 800px;
}

/* 検索フォームとボタンの配置（共通） */
.c-rule-modal__search {
  display: flex;
  gap: 10px;
}

/* rul-01>サービス選択モーダル: 条件指定 */

.c-service-modal__condition {
  display: flex;
  align-items: center;
  gap: 16px;
}

.c-service-modal__condition-label {
  padding-right: 4px;
}

/* ---rul-01>サービス選択モーダルここまで--- */

/* サブタイトル */
.c-rule-modal__sub-title {
  margin-bottom: 10px;
  margin-left: 5px;
}

/* 検索結果エリア */
.c-rule-modal__results {
  border: 1px solid var(--color-gray-90);
  border-radius: 5px;
  min-height: 200px;
  overflow-y: auto;
}

/* 検索結果アイテム */
.c-rule-modal__result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 16px;
  padding-top: 4px;
}

.c-rule-modal__result-text {
  font-size: 14px;
  color: var(--color-text-black);
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

/* 選択項目ヘッダー */
.c-rule-modal__selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* 選択項目エリア */
.c-rule-modal__selected {
  border: 1px solid var(--color-gray-90);
  border-radius: 5px;
  min-height: 150px;
  overflow-y: auto;
}

/* 選択項目アイテム */
.c-rule-modal__selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 23px;
  padding-top: 6px;
}

.c-rule-modal__selected-item:last-child {
  margin-bottom: 0;
}

.c-rule-modal__selected-text {
  font-size: 14px;
  color: var(--color-text-black);
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

/* 削除ボタン */
.c-rule-modal__remove-btn {
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
  color: #5b5f63;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.c-rule-modal__remove-btn:hover {
  background-color: #e5e7eb;
}

/* ルール選択結果表示 */
.c-rule-selection {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.c-rule-selection__result {
  display: flex;
  align-items: start;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  margin-top: 10px;
  line-height: 20px;
}

.c-rule-selection__text {
  margin: 0;
  color: var(--color-text-black);
  font-size: var(--font-text-size);
  line-height: var(--font-text-line-height);
  word-break: break-all;
  opacity: 0.8;
}

.c-rule-panel__footer {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-lowest);
}

.c-rule-selection__result .c-badge {
  font-size: 14px;
}

/* CSVダウンロードモーダル専用 */
.c-csv-modal__content {
  width: 400px;
  height: 216px;
  gap: 20px;
}

.c-csv-modal__body {
  flex: 1;
}

.c-csv-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-csv-modal__footer {
  display: flex;
  /* justify-content: center; */
}

/* ===== インデックスページ専用スタイル ===== */
.index-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.index-header {
  text-align: center;
  margin-bottom: 60px;
}

.index-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-black);
  margin-bottom: 16px;
}

.index-subtitle {
  font-size: 18px;
  color: var(--color-text-sub);
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

/* 最後のセクション内のpage-gridは下マージンを削除 */
.index-container>section:last-child .page-grid {
  margin-bottom: 0;
}

.page-card {
  background: white;
  border: 1px solid var(--color-gray-90);
  border-radius: 8px;
  padding: 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.page-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--color-blue-50);
}

.page-number {
  display: inline-block;
  background: var(--color-blue-30);
  color: white;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-black);
  margin-bottom: 8px;
}

.page-description {
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.6;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-black);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-gray-90);
}

/* ボタンの相対位置 */
.l-table-area__menues {
  position: relative;
}

/* カラム表示設定メニュー */
.column-setting-menu-container {
  position: relative;
}

.c-column-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: 4px;
  box-shadow: var(--shadow-modal);
  min-width: 200px;
  max-width: 300px;
}

.c-column-menu__content {
  padding: 12px;
}

.c-column-menu__all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3.5px;
  margin-bottom: 4px;
  margin-left: 4px;
}

.c-column-menu__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-column-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3.5px;
  padding-left: 16px;
  margin-left: 4px;
}

/* ソートボタンとメニュー */
.c-table__th .c-button--icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.c-table__th {
  position: relative;
}

.c-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background: var(--color-surface-lowest);
  border: none;
  border-radius: 4px;
  box-shadow: var(--shadow-modal);
  width: 180px;
  border: 1px solid var(--color-outline-variant);
  /* 縦方向のはみ出しを防ぐ */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.c-sort-menu-right {
  right: 0;
  left: auto;
}

.c-sort-menu__content {
  padding: 12px;
}

.c-sort-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  font-size: var(--font-text-size);
  font-weight: normal;
  color: var(--color-text-black);
  text-align: left;
}

.c-sort-menu__item:hover {
  background: var(--color-gray-95);
}

.c-sort-menu__icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.c-sort-menu__text {
  flex: 1;
  font-size: 14px;
}

.c-sort-menu__divider {
  height: 1px;
  background: var(--color-outline-variant);
  margin: 12px 0;
}

.c-sort-menu__search {
  position: relative;
  padding: 0;
}

.c-sort-menu__search-box {
  position: relative;
  border: 1px solid var(--color-outline-variant);
  border-radius: 4px;
  background: var(--color-surface-lowest);
  height: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.c-sort-menu__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.c-sort-menu__search-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 32px 0 32px;
  color: var(--color-text-black);
  background: transparent;
  font-size: var(--font-text-size);
}

.c-sort-menu__filter-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  font-size: 12px !important;
  font-weight: normal;
  color: var(--color-primary);
  text-align: left;
}

.c-sort-menu__filter-clear .c-sort-menu__text {
  font-size: 12px !important;
}

.c-sort-menu__filter-clear:hover {
  background: var(--color-gray-95);
}

.c-sort-menu__search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.8;
  font-size: 16px;
  color: var(--color-text-black);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-sort-menu__search-clear:hover {
  opacity: 1;
}

/* ソートメニューの位置調整用クラス */
.c-sort-menu--adjust-right {
  left: auto;
  right: 0;
}

.c-sort-menu--adjust-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.c-sort-menu--adjust-up-right {
  top: auto;
  bottom: calc(100% + 4px);
  left: auto;
  right: 0;
}

/* レスポンシブ対応: 画面幅が狭い場合のソートメニュー調整 */
@media (max-width: 768px) {
  .c-sort-menu {
    width: 160px;
    max-width: calc(100vw - 40px);
  }
}

@media (max-width: 480px) {
  .c-sort-menu {
    width: 140px;
    max-width: calc(100vw - 60px);
  }
}

/* テキストエリア */
.c-textarea {
  width: 100%;
  min-height: 52px;
  height: 52px;
  padding: 8px;
  outline: 1px solid var(--color-text-black);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: var(--font-text-size);
  line-height: 1.4;
  resize: vertical;
  border: none;
}

.c-textarea:focus,
.c-textarea:focus-visible {
  outline: 1px solid var(--color-text-black);
  border: 1px solid var(--color-text-black);
}

/* テキストエリアエラー状態 */
.c-textarea--error {
  outline: 1px solid var(--color-danger) !important;
  border: 1px solid var(--color-danger) !important;
}

/* インプットエラー状態 */
input.c-input--error {
  outline: 1px solid var(--color-danger) !important;
  border: 1px solid var(--color-danger) !important;
}

/* セレクトボックスエラー状態 */
select.select-list-r.c-input--error {
  outline: none;
  border: 2px solid var(--color-danger) !important;
}

/* ルール選択エリアエラー状態（text-alert-area用） */
.text-alert-area--error {
  margin-top: 2px;
  line-height: 20px;
  border: 2px solid var(--color-error-40);
  height: 34px;
  flex: 1;
  min-width: 200px;
}

/* ラベル上・入力下のフィールドブロック（汎用） */
.c-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-field__label {
  font-size: 16px;
  font-weight: var(--font-text-sub-strong-weight);
  line-height: 1.4;
}

.c-field__input--number {
  width: 150px !important;
  text-align: right;
}

.c-field__control {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* フィールドエラーメッセージ */
.c-field-error {
  color: var(--color-danger);
  margin-top: 4px;
  line-height: 1.4;
}

.c-field-error--banner {
  padding: 8px;
  background-color: var(--color-danger-surface);
  border: 1px solid var(--color-danger);
  border-radius: 4px;
  margin-top: 0px;
  line-height: 1.4;
}

/* Notification Banner */
.c-notification-banner {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  box-sizing: border-box;
}

.c-notification-banner--error {
  background-color: var(--color-danger-surface);
  padding: 16px;
  margin-bottom: 0;
}

.c-notification-banner__content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.c-notification-banner__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: center;
}

.c-notification-banner__message {
  color: #ba1a1a;
  font-size: var(--font-text-size);
  font-weight: var(--font-text-base-strong-weight);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  flex: 1;
}

/* com-03のスタイル */

/* セレクトボックス */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("/img/icons/ag_icon_arrow_down.svg");
  background-repeat: no-repeat;
  background-size: 16px auto;
  background-position: right 10px center;
  border: 1px solid var(--color-text-black);
  border-radius: 4px;
}

.select-list {
  width: 100%;
  min-width: 303px;
  height: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  border: 1px solid;
  color: var(--color-text-black);
  outline: none;
}

.select-list:focus-visible {
  outline: 2px solid var(--color-text-black);
}

/* 最新のアラートデータ */
.l-com3-03__section {
  display: flex;
  gap: 0px !important;
}

/* カレンダー */
.alert-data-term-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.alert-data-term-description {
  margin: 8px 0 12px 0;
}

/* 日付バリデーションエラー（com-03 / log-01 共通） */
.date-validation-error--common {
  display: none;
  padding: 8px;
  color: var(--color-error-40);
  border: 1px solid var(--color-error-40);
  background: var(--color-error-90);
  border-radius: 4px;
}

.date-validation-error__text {
  line-height: 1.4;
}

/* ルール管理 */

.rul-01__section {
  gap: 8px !important;
}

.rul-01__section-title {
  margin-bottom: 4px;
}

.c-selection-actions__count {
  margin-bottom: 8px;
  display: block;
}

/* タブパネルの表示制御 */
.tab-panel {
  display: block;
}

.tab-panel[style*="display: none"] {
  display: none !important;
}

.c-table__td .c-button--filled {
  font-size: 13px;
}

/* ダッシュボード */
.l-dsb-01__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: scroll;
  padding-bottom: 20px;
}

/* External scroll for default layout */
.main--external-scroll {
  overflow-y: scroll;
}

.main--external-scroll .main__contents {
  overflow: visible;
}

.l-dsb-01__section {
  background: var(--color-surface-lowest);
  border-radius: 8px !important;
  padding: 16px;
  gap: 0 !important;
}

.l-dsb-01__section--important {
  border: 2px solid var(--color-danger);
}

.l-dsb-01__section--flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row !important;
}

.l-dsb-01__ttl--important {
  color: var(--color-danger);
}

.l-dsb-01__sub-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block: 16px 12px;
}

.l-dsb-01__section h1 {
  padding-bottom: 16px;
}

.u-dsb-01__text {
  font-size: 36px;
  padding-right: 4px;
}

.c-dsb-01__button {
  width: 136px;
  gap: 4px;
  padding-block: 4.5px;
}

/* ニュースリスト（上部・横一列） */
.news-item {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding-bottom: 4px;
}

/* 下部お知らせのみ2行レイアウト */
.news-item--latest {
  flex-direction: column;
  gap: 4px;
  padding-block: 12px;
  border-top: 1px solid var(--color-outline-variant);
}

.news-item--latest:last-child {
  border-bottom: 1px solid var(--color-outline-variant);
}

/* 1行目: 日付 + バッジ */
.news-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.news-item__link,
.news-archive__link {
  color: var(--color-text-link);
  text-decoration: none;
}

.news-item__link:hover {
  text-decoration: underline;
}

.news-archive__link-container {
  display: flex;
  justify-content: flex-end;
}

.news-archive__link {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: end;
  padding-block: 6px;
  margin: 0px;
  margin-top: 8px;
}

/* アラート統計ダッシュボード */
.l-dsb-01__alert-dashboard-container {
  background: var(--color-surface-high);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
}

/* アラートテーブル */
.l-dsb-01__alert-panel {
  border-spacing: 0 8px;
  width: 350px;
}

.l-dsb-01__alert-label-cell {
  padding: 5.5px 8px 5.5px 8px;
  border-left: 3px solid var(--color-text-gray);
  font-weight: 400;
  text-align: left;
}

.l-dsb-01__alert-value-cell {
  font-size: 18px;
  text-align: right;
  vertical-align: middle;
  min-width: 107px;
  padding: 5.5px 8px;
}

.l-dsb-01__alert-value-cell--danger .l-dsb-01__alert-total-num {
  font-weight: 700;
  color: var(--color-danger);
  font-size: 24px;
}

.l-dsb-01__alert-total-values--danger {
  font-weight: 700;
  color: var(--color-danger);
  font-size: 24px;
}

.l-dsb-01__alert-unit {
  margin-top: 2px;
  margin-left: 4px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.l-dsb-01__cloud-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.l-dsb-01__alert-panel--link {
  width: 300px;
  border-collapse: separate;
  border-spacing: 8px 8px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-surface-lowest);
  box-shadow: 1px 1px 0px 0px var(--color-primary);
  cursor: pointer;
}

.l-dsb-01__alert-panel--link:hover {
  background-color: #e5ecf5;
}

.l-dsb-01__alert-panel--link:active {
  background-color: #cbd9ec;
  box-shadow: none;
}

.l-dsb-01__alert-total-title--link {
  color: var(--color-primary);
  padding-left: 0;
}

.l-dsb-01__alert-total-title::before,
.l-dsb-01__alert-total-title--link::before {
  content: none;
}

/* ここまで */

.search-conditions__label-text p {
  padding-top: 6px;
}

.align-left {
  text-align: left;
}

.input-text {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  color: var(--color-text-black);
  outline: none;
  z-index: 1;
  outline: 1px solid var(--color-text-black);
}

.input-text:focus,
.input-text:focus-visible {
  outline: 2px solid #0d1115;
}

/* 数値入力のスピナー（上下矢印）を非表示 */
input[type="number"].input-text::-webkit-outer-spin-button,
input[type="number"].input-text::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].input-text {
  -moz-appearance: textfield;
}

.r-table__row td {
  padding: 12.5px 8px;
}

.select-list-r {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  border: 1px solid;
  color: var(--color-text-black);
  outline: none;
}

.select-list-r:focus-visible {
  outline: 2px solid var(--color-text-black);
}

.c-table--rule-detail th:nth-child(3),
.c-table--rule-detail th:nth-child(4),
.c-table--rule-detail td:nth-child(3),
.c-table--rule-detail td:nth-child(4) {
  width: 200px;
}

.c-table--rule-detail-rul04 th:nth-child(3),
.c-table--rule-detail-rul04 th:nth-child(4),
.c-table--rule-detail-rul04 td:nth-child(3),
.c-table--rule-detail-rul04 td:nth-child(4) {
  width: 200px;
}

.c-table--rule-detail-rul04 th:nth-child(5),
.c-table--rule-detail-rul04 td:nth-child(5) {
  width: 126px;
}

.c-table--rule-detail-rul06 th:nth-child(2),
.c-table--rule-detail-rul06 td:nth-child(2),
.c-table--rule-detail-rul06 th:nth-child(3),
.c-table--rule-detail-rul06 td:nth-child(3) {
  width: 42.5%;
}

.c-table--rule-detail-rul06 th:nth-child(1),
.c-table--rule-detail-rul06 td:nth-child(1) {
  width: 5%;
}

.c-table--rule-detail-rul06 th:nth-child(4),
.c-table--rule-detail-rul06 td:nth-child(4) {
  width: 10%;
}

.c-table--rule-detail-rul07 th:nth-child(2),
.c-table--rule-detail-rul07 th:nth-child(3),
.c-table--rule-detail-rul07 td:nth-child(2),
.c-table--rule-detail-rul07 td:nth-child(3) {
  width: 164px;
}

.c-table--rule-detail-rul07 th:nth-child(5),
.c-table--rule-detail-rul07 td:nth-child(5) {
  width: 100px;
}

.page-rul-03 .c-field-error {
  margin-top: -10px;
}

.cvss-score-table {
  width: 350px;
  border-collapse: collapse;
  margin: 16px 0;
}

.cvss-score-table thead th {
  text-align: center;
  padding: 8px 12px;
  font-weight: normal;
}

.cvss-score-table tbody td {
  padding: 8px 12px;
  text-align: center;
}

.cvss-score-table__label {
  font-weight: var(--font-text-base-weight);
  text-align: right !important;
}

.cvss-score-table__separator {
  text-align: center;
  width: 40px;
}

.cvss-score-table__fixed {
  color: #0d1115;
}

.cvss-score-input {
  width: 80px;
  padding: 8px 12px;
  border: 1px solid var(--color-outline);
  border-radius: 4px;
}

.c-rule-modal__split-container {
  display: flex;
  gap: 24px;
  flex: 1;
  overflow: hidden;
}

.c-rule-modal__left-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.c-rule-modal__right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  padding-left: 24px;
}

.c-rule-modal__content--split {
  display: flex;
  flex-direction: column;
  width: 800px;
  height: 600px;
}

.c-rule-modal__footer-info {
  /* padding: 16px 24px; */
  background-color: var(--color-bg-white);
  font-size: 14px;
  color: var(--color-text-black);
}

.c-rule-modal__section {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  gap: 4px;
}

.c-rule-modal__results,
.c-rule-modal__selected {
  flex: 1;
  overflow-y: auto;
}

.l-base-area__gap {
  gap: 8px;
}

.c-rule-text-16 {
  font-size: 16px;
}

/* 抑止申請確認ポップアップ */
.c-modal--confirmation {
  background: var(--color-transparency-03);
}

.c-modal__footer--confirmation {
  flex-direction: row;
  justify-content: space-between;
}

.c-modal__footer--confirmation .c-button {
  width: 222px;
}

/* ===== Flex with Gap ユーティリティクラス ===== */
.u-flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.u-flex-column {
  display: flex;
  flex-direction: column;
}

.u-flex-row--gap-4 {
  gap: 4px;
}

.u-flex-row--gap-8 {
  gap: 8px;
}

.u-flex-row--gap-12 {
  gap: 12px;
}

.u-flex-row--gap-16 {
  gap: 16px;
}
.u-flex-column--gap-4 {
  gap: 4px;
}

.u-flex-column--gap-8 {
  gap: 8px;
}

.u-flex-column--gap-10 {
  gap: 10px;
}

.u-flex-column--gap-12 {
  gap: 12px !important;
}

.u-flex-column--gap-16 {
  gap: 16px !important;
}

.u-flex-column--gap-20 {
  gap: 20px !important;
}

/*  チケット管理*/
.tkt-01__section {
  gap: 12px !important;
}

.tkt-01__button-group--column {
  flex-direction: column;
}

.tkt-01__action-group {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.tkt-01__action-group__text {
  display: flex;
  align-items: center;
}

.tkt-01__action-group__buttons {
  display: flex;
  gap: 8px;
}

.tkt-01__controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tkt-01__filter {
  display: flex;
  align-items: center;
}

/* チケットタイプ選択 */
.tkt-01__ticket-type-options {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ===== チケット管理テーブルの列幅設定 ===== */
/* トグルボタンとチェックボックスは固定幅40px */
.tkt-01__section .c-table th:nth-child(1),
.tkt-01__section .c-table td:nth-child(1) {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
}

.tkt-01__section .c-table th:nth-child(2),
.tkt-01__section .c-table td:nth-child(2) {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center !important;
  padding: 8px 4px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
}

/* チェックボックスを中央に配置 */
.tkt-01__section .c-table td:nth-child(2) .checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 理由列のテキストエリア（常に表示） */
.tkt-01__section .c-table td[data-column="reason"] .c-textarea--reason {
  min-height: 46px;
  padding: 8px;
  resize: vertical;
  display: block;
  /* 常に表示 */
  font-size: 14px;
  font-weight: 400;
}

/* 特定の承認状況の場合は理由列のテキストエリアを非表示 */
.tkt-01__section .c-table__row--status-final-approved td[data-column="reason"] .c-textarea--reason,
.tkt-01__section .c-table__row--status-withdrawn td[data-column="reason"] .c-textarea--reason,
.tkt-01__section .c-table__row--status-rejected td[data-column="reason"] .c-textarea--reason {
  display: none !important;
}

/* ===== tkt-01テーブルのパディング設定 ===== */
.tkt-01__section .c-table__thead th {
  padding: 8px 33px 8px 8px !important;
  /* vertical-align: top !important; */
}

.tkt-01__section .c-table__tbody td {
  padding: 8px !important;
  vertical-align: top !important;
}

/* ===== tkt-01 テーブル詳細のグリッドレイアウト ===== */
.c-table__details-block__grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-outline-variant);
  border-radius: 3px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-black);
}

.c-table__details-block__grid-header {
  display: flex;
  gap: 8px;
  background-color: var(--color-surface-high);
  padding: 15.5px 8px;
  border-radius: 3px 3px 0 0;
}

.c-table__details-block__grid-header__item {
  flex: 1;
  text-align: left;
}

.c-table__details-block__grid-row {
  display: flex;
  border-radius: 0;
  background-color: var(--color-surface-lowest);
  border-bottom: 1px solid var(--color-outline-variant);
}

.c-table__details-block__grid-row:last-child {
  border-bottom: none;
  border-radius: 0 0 3px 3px;
}

.c-table__details-block__grid-row__item {
  flex: 1;
  font-size: var(--font-text-base-size);
  color: var(--color-text-black);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: break-word;
  padding: 12.5px 8px;
}

/* tkt-01 ボタンの無効化スタイル */
.tkt-01__section .c-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* tkt-01 ボタンの最大高さ設定 */
.tkt-01__section .c-button {
  max-height: 36px;
}

/* tkt-01 テーブルの最後から2番目の行のすべてのセルのボーダーを削除 */
.tkt-01__section .c-table tbody tr:nth-last-child(2) td {
  border: none !important;
}

/* tkt-01 テーブルのルール詳細列のボタンを中央に配置 */
.tkt-01__section .c-table td[data-column="rule-detail"] {
  text-align: center !important;
  padding: 8px 4px !important;
}

/* 最後の行の下ボーダーを削除 */
.tkt-01__section .c-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* 展開された行の下ボーダーを削除 */
.tkt-01__section .c-table .c-table__row--expanded td {
  border-bottom: none !important;
}

.c-textarea.c-textarea--reason {
  border: none;
  height: 46px;
}

/* プレースホルダーのスタイル */
.c-textarea.c-textarea--reason::placeholder {
  color: var(--color-gray-40);
  opacity: 0.7;
  line-height: 110.00000000000001%;
}

/* tkt-01 テーブルの偶数行のtdのパディングを0に */
.tkt-01__section .c-table tbody tr:nth-child(even) td {
  padding: 0 !important;
}

/* ===== テーブル詳細ブロック ===== */
.c-table__details-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.c-table__details-block__title {
  margin: 0;
  font-size: var(--font-text-size);
  font-weight: var(--font-text-weight);
  color: var(--color-text-black);
}

.c-table__details-block__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0px 8px 20px;
}

.c-table__details-block__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.c-table__details-block__field-label {
  min-width: 275px;
  font-weight: var(--font-text-weight);
}

.c-table__details-block__field-value {
  flex: 1;
  color: var(--color-text-black);
}

/* テーブル展開ボタンの位置を相対に設定 */
.js-table-toggle {
  position: relative !important;
}

/* mlc-04, cdl-04 テーブルの最後から2番目の行のすべてのセルのボーダーを削除 */
.mlc-04__section .c-table tbody tr:nth-last-child(2) td,
.cdl-04__section .c-table tbody tr:nth-last-child(2) td,
.omw-04__section .c-table tbody tr:nth-last-child(2) td {
  border: none !important;
}

/* ===== AGM Tabs ===== */
.c-agm-tabs {
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.c-agm-tabs__list {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-agm-tabs__item {
  flex: 1;
}

.c-agm-tabs__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 0;
  border-right: 1px solid var(--color-primary);
  font-size: 18px;
  color: var(--color-primary);
  font-weight: var(--font-text-base-weight);
  cursor: pointer;
  background-color: var(--color-surface-lowest);
}

.c-agm-tabs__item:last-child .c-agm-tabs__tab {
  border-right: 0;
}

.c-agm-tabs__tab[aria-selected="true"],
.c-agm-tabs__tab--active {
  background-color: var(--color-overlay-02);
  font-weight: var(--font-text-base-strong-weight);
}

.c-agm-tabs__panel {
  display: none;
}

.c-agm-tabs__panel[aria-hidden="false"] {
  display: block;
}

/* ===== RSC-06 ユーザー・ロールタブ ===== */
.c-rsc-tabs__nav {
  margin-bottom: 0;
}

.c-rsc-tabs__container {
  margin-top: 12px;
}

.c-rsc-tabs__panel {
  display: none;
}

.c-rsc-tabs__panel[aria-hidden="false"] {
  display: block;
}

/* アタッチしたポリシーモーダル：JSON表示エリア */
.c-attached-policy-modal__json {
  background: #fff;
  border: 1px solid #C3C7CC;
  padding: 4px 12px;
  margin: 0;
  overflow-x: auto;
  font-size: 14px;
  line-height: 150%;
  color: #0D1115;
  white-space: pre;
}

.c-attached-policy-modal__json code {
  font-family: inherit;
}

/* AGM-01 CSVインポートモーダル */
.c-csv-import-modal__content {
  max-width: 500px;
  width: 100%;
}

.c-csv-import-modal__section+.c-csv-import-modal__section {
  margin-top: 0px;
}

.c-csv-import-modal__title {
  margin: 0 0 8px;
}

.c-csv-import-drop {
  border: 1px dashed var(--color-outline-variant);
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background-color: var(--color-surface-lowest);
  cursor: pointer;
  min-height: 125px;
  justify-content: center;
}

.c-csv-import-drop.is-selected {
  border: none;
  padding: 0;
  align-items: stretch;
  cursor: default;
  min-height: fit-content;
}

.c-csv-import-drop__default {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.c-csv-import-drop__icon {
  width: 24px;
  height: 24px;
}

.c-csv-import-drop.is-dragover {
  border-color: var(--color-primary);
  background-color: var(--color-overlay-02);
}

.c-csv-import-drop.is-loading {
  border: 1px dashed var(--color-outline-variant);
  padding: 12px 16px;
  cursor: default;
}

.c-csv-import-drop__text {
  margin: 0;
}

.c-csv-import-input {
  display: none;
}

.c-csv-import-drop__file {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
  cursor: default;
}

.c-csv-import-drop__filename {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-black);
  word-break: break-all;
  padding: 8px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 4px;
  width: 100%;
  gap: 8px;
}

.c-csv-import-drop__filename-text {
  flex: 1;
  word-break: break-all;
  text-align: left;
}

.c-csv-import-drop__remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.c-csv-import-drop__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  width: 100%;
}

.c-csv-import-drop__loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-csv-import-drop__loader-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.c-csv-import-drop__bar {
  transform-origin: center;
}

.c-csv-import-drop__bar--1 {
  animation: slide-loader-wave 1.2s ease-in-out infinite;
  animation-delay: -0.24s;
}

.c-csv-import-drop__bar--2 {
  animation: slide-loader-wave 1.2s ease-in-out infinite;
  animation-delay: -0.12s;
}

.c-csv-import-drop__bar--3 {
  animation: slide-loader-wave 1.2s ease-in-out infinite;
  animation-delay: 0s;
}

.c-csv-import-drop__loading-text {
  margin: 0;
  color: #5B5F63;
  font-size: 14px;
  font-weight: 400;
}

.c-csv-import-summary__divider {
  margin: 4px 0;
}

.c-csv-import-summary,
.c-csv-import-status {
  /* border-top: 1px solid var(--color-outline-variant);
  border-bottom: 1px solid var(--color-outline-variant); */
  /* padding: 12px 0; */
  /* margin-block: 4px; */
  margin-top: 16px;
}

.c-csv-import-summary__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 110% !important;
}

.c-csv-import-modal__list {
  margin: 8px 0 0px;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-csv-import-summary__row {
  display: flex;
  justify-content: space-between;
}

.c-csv-import-summary__label {
  flex: 1;
  text-align: left;
}

.c-csv-import-summary__value {
  flex: 0 0 auto;
  text-align: right;
}

/* CSVインポート：プログレス状態 */
.c-csv-import-modal__progress {
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.c-csv-import-modal__progress-bar-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.c-csv-import-modal__progress-bar {
  flex: 1;
  height: 4px;
  background-color: #D9D9D9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.c-csv-import-modal__progress-bar-fill {
  height: 100%;
  background-color: #00419E;
  border-radius: 4px;
  transition: width 0.1s ease-out;
}

.c-csv-import-modal__progress-percent {
  font-size: 14px;
  font-weight: 400;
  color: #5B5F63;
  min-width: 40px;
  text-align: right;
}

.c-csv-import-modal__progress-text {
  margin: 0;
  font-size: 14px;
  color: #5B5F63;
  text-align: center;
  margin: auto;
  margin-top: 12px;
}

.c-csv-import-modal__success {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}

.c-csv-import-modal__success-message {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 400;
}

.c-csv-import-modal__success-count {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-gray);
  margin-bottom: 16px;
}

.c-csv-import-modal__success-footer {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
}

.js-csv-import-error-detail {
  margin-top: 8px;
}

.main .faq__section {
  border-radius: 8px;
  padding: 16px;
}

/* AGM-01 グループ管理テーブル */
.agm-group-table__cell-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agm-group-table__indent-1 {
  margin-left: 40px;
}

.agm-group-table__indent-2 {
  margin-left: 80px;
}

.agm-group-table__indent-3 {
  margin-left: 120px;
}

.agm-group-table__indent-4 {
  margin-left: 160px;
}

/* 展開不可の子要素で、次の行もdata-levelを持つ場合、現在の行のborder-bottomを削除 */
#agm-group-table tr[data-level]:not(.c-table__row--expandable):has(+ tr[data-level]:not(.c-table__row--expandable)) td {
  border-bottom: none !important;
}

/* AGM グループ関連モーダル共通スタイル */
.c-agm-group-modal__content {
  max-width: 500px;
  width: 100%;
}

/* フォームセクション・繰り返しブロック（ext / agm 等で共有） */

.l-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.l-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.l-form__field h2 {
  padding-bottom: 4px;
}


.l-form__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.l-form__sub-label {
  font-size: 16px;
  font-weight: var(--font-text-base-strong-weight);
}

.l-form__input,
.l-form__select {
  width: 100%;
  padding: 10px 8px;
  border: 1px solid var(--color-text-black);
  border-radius: 4px;
}

.l-form__select {
  min-height: 36px;
}

.l-form__row {
  display: flex;
  gap: 8px;
}

.l-form__row--with-action {
  align-items: flex-start;
  gap: 12px;
}

.l-form__row--with-action .c-combo-box {
  flex: 1 1 auto;
  min-width: 0;
}

.l-form__fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 通知を連携するアラート～リソース管理を1ブロックにまとめ、l-form__fields の gap の影響を受けないようにする */
.ext-04-alert-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ext-04 のみ: チェックボックスの見た目はそのままに、クリック領域を 24px × 24px にする */
.ext-04-checkbox-area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* 通知する重要度ラベル（ext-04  integration-block 内） */
.ext-04-notify-severity-label {
  margin: 0;
  font-weight: bold;
}

/* 連携先セレクト幅（ext-04） */
.ext-04-destination-select {
  width: 300px;
}

/* 重要度オプションのインデント（ext-04） */
.ext-04-severity-body {
  padding-left: 20px;
}

/* 重要度ラジオを横並び（ext-04） */
.ext-04-severity-options {
  display: flex;
  gap: 16px;
}


.l-form-section__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__section--bg-gray {
  background: var(--color-gray-95);
}

.faq__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq__title {
  font-size: 20px;
  font-weight: 700;
}

.faq__input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq__table-input {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  padding: 8px;
  color: var(--color-text-black);
  font-size: var(--font-text-size);
}

.faq__table-input-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq__table-input--error {
  border-color: var(--color-error-40);
  border-width: 3px;
}

.faq__alert-text {
  margin-left: 4px;
}

.faq__button-area {
  display: flex;
  align-items: center;
  gap: 8px
}

.faq__table-title-area {
  display: flex;
  align-items: center;
  gap: 4px;
}

.c-table__td.faq__table-button-area {
  vertical-align: top;
}

.faq__table-remove-button {
  padding-top: 2px;
}

.faq__alert {
  background-color: var(--color-error-90);
  /* #FFDAD6 */
  color: var(--color-error-40);
  /* #BA1A1A */
  font-weight: 700;
  font-size: 14px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.c-table--faq tbody tr td {
  padding: 8px;
}

.c-table--faq th {
  padding: 8px;
  font-weight: 400;
}

/* FAQテーブルの列幅固定 */
.c-table--faq .c-table__thead th:nth-child(1),
.c-table--faq .c-table__tbody td:nth-child(1) {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
}

.c-table--faq .c-table__thead th:nth-child(2),
.c-table--faq .c-table__tbody td:nth-child(2) {
  width: auto !important;
  min-width: 0 !important;
}

.c-table--faq .c-table__thead th:nth-child(3),
.c-table--faq .c-table__tbody td:nth-child(3) {
  width: auto !important;
  min-width: 0 !important;
}

.c-table--faq .c-table__thead th:nth-child(4),
.c-table--faq .c-table__tbody td:nth-child(4) {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
}


/* Items  faq,com-02汎用スタイル*/
.main .c-link-card__item {
  background: var(--color-surface-lowest);
  border: 1px solid var(--color-blue-30);
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .c-link-card__item:hover {
  background: var(--color-overlay-01);
}

.c-link-card__item-text {
  color: var(--color-primary);
}

.c-link-card__item-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}

.c-link-card__icon {
  margin-right: 8px;
}

/*faq,com-02汎用スタイルここまで*/

.l-form-section__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.l-form-section__item--card {
  background: var(--color-surface-high);
  border-radius: 8px;
  padding: 16px;
}

/* 権限情報テーブル: 他ページと同様にフル幅 + 10行表示・それ以上はテーブル内スクロール */
.agm-03__table-wrap {
  width: 100%;
  max-height: 410px;
  overflow-y: auto;
  border: 1px solid var(--color-outline-variant);
  border-radius: 4px;
}

.agm-03__table-wrap .agm-03__permission-table {
  width: 100%;
  table-layout: fixed;
}

.l-form__item-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.l-form__item-footer--with-checkbox {
  justify-content: space-between;
}

.l-form-actions {
  display: flex;
  gap: 8px;
}

.account-info {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 40px;
  row-gap: 8px;
}

.filter-fixed-buttons {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--color-outline-variant);
}

/* agm-05 */
.c-table__drag-handle {
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-table__drag-handle:active {
  cursor: grabbing;
}

.c-modal__message {
  line-height: 1.4;
}


#rul-02__section .search-conditions__control {
  width: 306px;
  height: 36px;
  align-items: center;
}

#rul-02__section .l-base-area {
  gap: 20px;
}

#rul__section .search-conditions,
#rul-03__section .search-conditions,
#rul-04__section .search-conditions,
#rul-05__section .search-conditions,
#rul-06__section .search-conditions,
#rul-07__section .search-conditions,
#rul-08__section .search-conditions,
#rul-09__section .search-conditions,
#usr-03__section .search-conditions,
#cip-05__section .search-conditions,
#cip-06__section .search-conditions,
#cip-07__section .search-conditions {
  row-gap: 8px;
}

#rul__section .search-conditions p,
#rul-03__section .search-conditions p,
#rul-04__section .search-conditions p,
#rul-05__section .search-conditions p,
#rul-06__section .search-conditions p,
#rul-07__section .search-conditions p,
#rul-08__section .search-conditions p,
#rul-09__section .search-conditions p,
#usr-03__section .search-conditions p,
#cip-05__section .search-conditions p,
#cip-06__section .search-conditions p,
#cip-07__section .search-conditions p {
  padding-top: 0px;
}

#rul__section .search-conditions__label,
#rul-03__section .search-conditions__label,
#rul-04__section .search-conditions__label,
#rul-05__section .search-conditions__label,
#rul-06__section .search-conditions__label,
#rul-07__section .search-conditions__label,
#rul-08__section .search-conditions__label,
#rul-09__section .search-conditions__label,
#usr-03__section .search-conditions__label,
#cip-05__section .search-conditions__label,
#cip-06__section .search-conditions__label,
#cip-07__section .search-conditions__label {
  padding-top: 0px;
}

#usr-03__section .search-conditions__label {
  min-width: 150px;
}

#usr-03__section .search-conditions {
  grid-template-columns: 150px 1fr;
  column-gap: 40px;
}

.c-combo-select__input {
  padding-right: 28px;
  /* margin-left: 40px; */
}

.c-combo-select {
  margin: 0;
}

.c-table--rule-detail-rul04 .r-table__row td,
.c-table--rule-detail-rul03 .r-table__row td {
  padding: 8px !important;
}

.c-table--rule-detail-rul04 td,
.c-table--rule-detail-rul03 td {
  vertical-align: middle;
}

#idProviderSectionsContainer .l-form-section__item {
  padding: 12px;
}

#idProviderSectionsContainer .l-form__fields {
  width: 100%;
}

#idProviderSectionsContainer .c-combo-select {
  width: 300px;
}

#idProviderSectionsContainer .c-combo-select__input {
  width: 100%;
}

#idProviderSectionsContainer .l-form__row {
  gap: 12px;
  align-items: flex-start;
}

#usr-02__section {
  gap: 20px;
}

/* usr-01: 検索条件のカスタムセレクトでテキストが下で切れないように余白を確保 */
#usr-01__section .search-conditions .select-list {
  min-height: 36px;
  height: 36px;
}

.usr-01__table-area {
  gap: 4px;
}

.usr-01-role-panel__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 110%;
}
.js-usr01-role-jurisdiction-select {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.js-usr01-user-select-tbody .c-table__td {
  padding: 12px 8px;
}

#usr01RolePanelCloudOrgModal .c-rule-panel__scroll,
#usr01RolePanelAccountModal .c-rule-panel__scroll {
  padding-left: 0;
}

#usr01RolePanelCloudOrgModal .c-rule-item,
#usr01RolePanelAccountModal .c-rule-item {
  padding-left: 8px;
}

#usr-02__section .c-combo-box,
#usr-10__section .c-combo-box {
  width: 300px;
  margin: 0;
}

#usr-02__section h3,
#usr-10__section h3 {
  gap: 12px;
  align-items: center;
}

#usr-02__section .c-rule-selection,
#usr-10__section .c-rule-selection {
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

#usr-02__section .c-rule-selection__result,
#usr-10__section .c-rule-selection__result {
  margin-top: 0px;
}

#usr-02__section .c-rule-selection__result--error,
#usr-10__section .c-rule-selection__result--error {
  height: 36px;
  border: 2px solid var(--color-danger) !important;
  border-radius: 4px;
}

#usr-02__section input {
  max-height: 36px;
}

.c-mfa-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.c-mfa-setup>li {
  margin-left: 16px;
  list-style: decimal;
}

.c-mfa-setup h3 {
  width: 100%;
}

.c-mfa-setup button {
  width: fit-content;
}

#accountsListModal .c-table__tbody td {
  padding: 12.5px 8px;
}

#accountsListModal .c-table__thead th {
  font-weight: var(--font-text-base-weight);
}

#usr-10__section h3 {
  gap: 16px;
}

#rul-26__section .c-textarea {
  min-height: 36px;
  height: 36px;
}

#rul-26__section .c-badge--required {
  margin-left: 16px;
  margin-top: 4px;
}

.c-table--rule-detail-rul17 .c-table__td {
  vertical-align: top;
}

.cip__list {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.cip__list:first-child {
  margin-top: 0px;
}

.cip__list--input {
  width: 300px;
}

.cip__table--remove-ip th:nth-child(1),
.cip__table--remove-ip td:nth-child(1) {
  width: 20%;
}

.cip__table--remove-ip th:nth-child(2),
.cip__table--remove-ip td:nth-child(2) {
  width: 20%;
}

.cip__table--ip-list th:nth-child(4),
.cip__table--ip-list td:nth-child(4) {
  width: 662px;
}

.js-omw-rule-search-btn {
  padding: 6px 16px;
}

#omwRulePanel .c-rule-modal__result-item .c-button--line.c-button--small {
  max-height: 28px;
  margin-left: 10px;
  font-size: 13px;

}

#omwRulePanel .c-rule-modal__result-item {
  padding: 4px 8px 0 4px;
}

#omwRulePanel .c-rule-modal__selected-item {
  padding: 4px 6px 4px 6px;
}

#omwRulePanel .c-rule-modal__group-header:first-child {
  margin-top: 0px;
}

#omwRulePanel .c-rule-modal__group-header {
  margin-top: 4px;
}

#omwRulePanel .c-rule-modal__remove-btn {
  margin-left: 10px;
  font-size: 12px;
  color: var(--color-text-black);
}

#omwRulePanel .c-rule-modal__result-item:last-child {
  margin-bottom: 4px;
}

/* ===== 対象詳細モーダル（USR-03専用） ===== */
#targetDetailsModal .c-table__tbody td,
#targetDetailsModal .c-table__thead th {
  padding: 12px 8px;
}

/* ===== 更に読み込むボタンコンテナ ===== */
.js-load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

/* ===== ページネーション ===== */
.c-pagination {
  display: flex;
  justify-content: center;
  margin-top: 0px;
  width: 100%;
}

.c-pagination__inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.c-pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #004CB6;
  cursor: pointer;
}

/* .c-pagination__arrow:hover:not(:disabled) {
  background: var(--color-blue-95);
  color: var(--color-blue-40);
} */

.c-pagination__arrow:disabled {
  color: #0D1115;
  cursor: not-allowed;
  opacity: 0.5;
}

.c-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: #004CB6;
  line-height: 110%;
  border-radius: 50%;
  cursor: pointer;
}

.c-pagination__page--current {
  background: #00419E33;
  color: #004CB6;
  cursor: default;
}

.c-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  color: #004CB6;
  min-width: 36px;
  height: 36px;
  line-height: 110%;
  padding-bottom: 6px;
}


input[type="password"]::-ms-reveal {
  display: none;
}

.c-table__row {
  background-color: #fff;
  opacity: 1;
}

/* ===== CSVダウンロードポップアップ ===== */
#csvDownloadPopup.c-modal.is-active {
  z-index: 10001;
}

.c-download-popup__content {
  width: 500px;
}

.c-download-popup__header {
  text-align: center;
}

.c-download-popup__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.c-download-popup__loader-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.c-download-popup__bar {
  transform-origin: center;
}

.c-download-popup__bar--1 {
  animation: slide-loader-wave 1.2s ease-in-out infinite;
  animation-delay: -0.24s;
}

.c-download-popup__bar--2 {
  animation: slide-loader-wave 1.2s ease-in-out infinite;
  animation-delay: -0.12s;
}

.c-download-popup__bar--3 {
  animation: slide-loader-wave 1.2s ease-in-out infinite;
  animation-delay: 0s;
}

/* ウェーブローダー（0%/40%/100% → 小、20% → 大）色・透明度は既存のまま */
@keyframes slide-loader-wave {

  0%,
  40%,
  100% {
    opacity: 0.4;
    transform: scaleY(0.4);
  }

  20% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.c-download-popup__message {
  color: var(--color-text-gray);
  text-align: center;
}

.c-csv-import-modal__error {
  margin-top: 8px;
  border: 1px solid #BA1A1A;
  border-radius: 4px;
  padding: 8px;
  color: #BA1A1A;
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
  background-color: #FFDAD6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-csv-import-modal__error ul {
  margin: 0;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#errorDetailModal .c-table__row {
  border-radius: 4px;
}

#errorDetailModal .c-modal__footer--confirmation {
  margin-top: auto;
}

#errorDetailModal .c-modal__content {
  min-height: 600px;
}

#rsc-account-info .l-base-area .account-info-single-column .account-info-row .account-info-label,
.ip-info-data {
  max-width: 250px !important;
  min-width: 250px !important;
}

#packageDetailModal .c-table__tbody td {
  padding: 12px 8px;
}

#packageDetailModal .c-modal__content {
  height: 70vh;
  justify-content: space-between;
  overflow: hidden;
}

#packageDetailModal .c-modal__content-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#packageDetailModal .c-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#packageDetailModal .c-modal__header {
  margin-bottom: 16px;
  flex-shrink: 0;
}

#packageDetailModal .c-modal__footer {
  flex-shrink: 0;
}

/* alt-01: 期間ピッカーは年月のみ表示（日を非表示） */
.alt-period-picker .alt-period-picker__day-hidden {
  display: none !important;
}

/* alt-01: グラフエリア */
.alt-chart-scroll {
  overflow-x: auto;
  width: 100%;
}

.alt-chart-area {
  margin-top: 0px;
  margin-bottom: 40px;
  min-width: 1440px;
}

.alt-chart-area__wrapper {
  position: relative;
  width: 100%;
}

.alt-chart-area__canvas {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}

.search-conditions__control--max-width {
  max-width: 303px;
  min-width: 303px;
}

.search-conditions__control--display-target {
  gap: 8px;
}

.search-conditions__label--display-target {
  align-self: start;
  padding-top: 10px;
}

.c-rule-selection--display-target {
  display: flex;
}

.search-conditions__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #0D1115;
  text-align: left;
  line-height: 110%;
}

#user-table-body .c-button.c-button--small.c-button--line.table__button,
#role-table-body .c-button.c-button--small.c-button--line.table__button {
  font-size: 13px;
  padding: 7px 12px;
  max-width: 154px;
}

.c-table-wrapper td[data-column="attached-policy"] {
  padding: 8px;
}

/* 除外設定タグ（rul-15） */
.c-exclusion-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-exclusion-tag-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.c-exclusion-tag-item__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.c-exclusion-tag-item__action {
  flex-shrink: 0;
}

.c-exclusion-tag-item__delete {
  align-self: flex-start;
}


#rsc-table-area .c-table__th.c-table__th--checkbox,
#rsc-table-area .c-table__td.c-table__td--checkbox {
  padding-left: 11px;
}

/* ===== nws-02 お知らせ詳細 ===== */
.nws-02-detail__meta {
  display: flex;
  flex-direction: column;
}

.nws-02-detail__meta-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nws-02-detail__meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nws-detail-text {
  padding-block: 8px;
}

.nws-detail-text p {
  margin: 0 0 1em;
}

.nws-detail-text p:last-child {
  margin-bottom: 0;
}

/* ===== 設定するユーザー選択モーダル（usr-01） ===== */
.c-user-select-modal__filter {
  background-color: #EEF1F6;
  border-radius: 8px;
  padding: 16px;
  margin: 0;
}

.c-user-select-modal__filter-inner {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 12px 40px;
}

.c-user-select-modal__filter-row {
  display: contents;
}

.c-user-select-modal__filter-row .c-user-select-modal__filter-label {
  grid-column: 1;
}

.c-user-select-modal__filter-row .c-user-select-modal__filter-control {
  grid-column: 2;
}

.c-user-select-modal__filter-label {
  font-size: 14px;
  align-self: center;
}

.c-user-select-modal__filter-control {
  max-width: 100%;
}

.c-user-select-modal__filter-control--wide {
  min-width: 0;
}

.c-user-select-modal__filter-control .input-text {
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 0 8px;
}

.c-user-select-modal__filter-hr {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid #C3C7CC;
  margin: 8px 0 0px 0;
}

.c-user-select-modal__filter-footer {
  grid-column: 1 / -1;
}

.c-user-select-modal__table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 320px;
  margin-bottom: 0px;
}

.c-user-select-modal__table-wrap .c-table {
  width: 100%;
}

.c-user-select-modal__pagination {
  margin-top: 4px;
  margin-bottom: 0px;
}

/* 行ホバー・選択 */
.c-user-select-modal__table-wrap .js-usr01-user-select-row {
  cursor: pointer;
}

.c-user-select-modal__table-wrap .c-user-select-modal__row--selected {
  background-color: #00419E33;
}

#usr01UserSelectModal .c-modal__content {
  max-height: 600px;
  overflow-y: auto;
}

/* すべて表示モーダル（usr-01-permission-tab-only-view） */
#usr01PermissionTabOnlyViewShowAllModal .c-modal__content {
  width: 800px;
  height: 600px;
  max-height: 600px;
  display: flex;
  flex-direction: column;
}
#usr01PermissionTabOnlyViewShowAllModal .c-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#usr01PermissionTabOnlyViewShowAllModal .c-table {
  width: 100%;
}

.js-usr01-permission-tab-only-view-show-all-tbody.c-table__tbody td {
padding:12px 8px;
}
.js-usr01-permission-tab-only-view-show-all-tbody.c-table__tbody tr:last-child td:first-child {
  border-radius: 0 0 4px 4px;
}
.c-badge.js-usr01-permission-tab-only-view-account-count {
 width: 18px;
 height: 19px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.bg-surface-high.system-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 60px;
  box-sizing: border-box;
}

.system {
  display: flex;
  flex: 1;
  min-height: 0;
}

.system__container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.system__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.system__icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.system__icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  object-position: center;
}

p.system__title, h1.system__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 140%;
  color: #0D1115;
}
.system__line {
  font-size: 16px;
  font-weight: 400;
  line-height: 110%;
  color: #0D1115;
}

.system__link {
  color: var(--color-text-link);
  text-decoration: none;
  font-size: 14px;
  line-height: 110%;
}
.system__link:hover {
  text-decoration: underline;
}

.system__container--center {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  justify-content: center;
  align-items: center;
}

.system__container--gap-lg {
  gap: 40px;
}

.system__panel {
  background: white;
  border-radius: 8px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 380px;
}

.system__button {
  min-height: 36px;
  width: 100%;
}

.system__divider {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.system__divider::before,
.system__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #C3C7CC;
}
.system__divider-text {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 110%;
  color: #5B5F63;
}

.system__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.system__input {
  max-height: 36px;
  height: 36px;
  padding: 8px;
}

.system__input-wrap {
  position: relative;
  width: 100%;
}
.system__input-wrap .system__input {
  padding-right: 32px;
}
.system__password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0D1115;
}
.system__password-toggle .js-eye-icon {
  width: 15px;
  height: 11px;
}
.system__password-toggle .js-eye-slash-icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}
.system__password-toggle:hover {
  color: #0D1115;
}

.system__fields  {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.system__field  {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.system__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 110%;
  color: #0D1115;

}
#lgn-01-error-banner.c-notification-banner--error.c-notification-banner {
  margin-bottom: 0px !important;
}