/* 電話番号リスト専用スタイル */
.phone-list-container {
  background-color: #e9f7fc; /* 薄いブルー背景 */
  padding: 20px;
  border-radius: 8px;
  max-width: 800px; /* 最大幅設定 */
  margin: 2em auto 0; /* 上部に余白を追加し、中央寄せ */
}

.phone-list-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.phone-list-action-buttons {
  margin-bottom: 20px;
  text-align: center;
}

/* ボタンの中央揃え */
.phone-list-action-buttons {
  display: flex;
  justify-content: center; /* 横並びで中央寄せ */
  align-items: center;
  gap: 20px; /* ボタン間の間隔 */
  margin-bottom: 20px; /* ボタンの下に余白 */
}

/* ボタンスタイル */
.phone-list-button {
  padding: 5px 10px; /* 上下のマージン調整 */
  font-size: 15px; /* フォントサイズ調整 */
  background-color: #007bff; /* 青色のボタン背景 */
  color: white; /* 文字色は白 */
  text-decoration: none; /* 下線を消す */
  border-radius: 5px; /* ボタンの角を丸める */
  display: inline-block;
  text-align: center; /* 文字の中央寄せ */
  margin-top: 5px; /* 上部のマージン */
  margin-bottom: 5px; /* 下部のマージン */
  border: none; /* ボーダーを消す */
  cursor: pointer; /* クリック時にカーソルをポインターに */
}

.phone-list-button:hover {
  background-color: #0056b3; /* ホバー時の背景色変更 */
}


.phone-list-message {
  color: blue;
  margin-bottom: 20px;
}

/* フィルタフォーム */
.phone-list-filter-form table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

.phone-list-filter-form td {
  padding: 10px;
}

.phone-list-filter-form label {
  font-weight: bold;
}

.phone-list-filter-form select {
  padding: 5px;
  width: 100%;
}

.phone-list-search-button button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.phone-list-bulk-action-form {
  text-align: center;
  margin-top: 20px;
}

.phone-list-bulk-action {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.phone-list-bulk-action select,
.phone-list-bulk-action input {
  padding: 5px;
  margin: 5px;
  font-size: 16px;
}

.phone-list-execute-button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* ページネーションのスタイル */
.pagination {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.pagination-form {
  margin: 0;
}

.pagination select {
  padding: 5px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* 電話番号リスト専用テーブルのデザイン */
.phone-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff; /* 背景色を白に */
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ヘッダーのデザイン */
.phone-table thead {
    background-color:#007bff; /* ヘッダー背景色 */
    color: white;
}

.phone-table th {
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

/* テーブル行のデザイン */
.phone-table tbody tr {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

.phone-table tbody tr:hover {
    background-color: #f1f1f1; /* マウスオーバー時の背景色 */
}

.phone-table td {
    padding: 8px;
    text-align: left;
    vertical-align: middle;
}

/* チェックボックスのスタイル */
.phone-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 編集リンクのスタイル */
.phone-table a {
    text-decoration: none;
    font-weight: bold;
}

.phone-table a:hover {
    text-decoration: underline; /* リンクにマウスオーバー時に下線を表示 */
}

/* テーブル行のデザイン */
.phone-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* 奇数行に薄いグレー背景色 */
}

.phone-table tbody tr:nth-child(even) {
    background-color: #ffffff; /* 偶数行に白背景色 */
}

.phone-table tbody tr:hover {
    background-color: #f1f1f1; /* マウスオーバー時の背景色 */
}

/* ボタンの共通スタイル */
.submit-btn, #reset-vpn {
    padding: 10px 20px;
    background-color: #28a745; /* 緑色 */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    margin-top: 10px;
    margin-right: 10px; /* ボタン間の余白 */
    text-align: center; /* 文字中央寄せ */
}

/* ボタンホバー時 */
.submit-btn:hover, #reset-vpn:hover {
    background-color: #218838; /* ホバー時の色 */
}

/* 戻るリンクのデザイン */
.center-content {
    text-align: center; /* センター寄せ */
    margin-top: 20px;
}

.center-content a {
    font-size: 16px;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

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

.custom-container {
    border-radius: 8px;
    max-width: 800px; /* 最大幅設定 */
    margin: 2em auto 0; /* 上部に余白を追加し、中央寄せ */
}

.admin-sections-4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4カラム */
    gap: 20px; /* カラム間のスペース */
}

.wide-container{
  width: 100%;
  margin-top: 20px;
}
/* メインメニュー全体を横並び */
.main-menu {
  display: flex;        /* 横並び */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 親メニュー (各 li ) */
.submenu {
  position: relative;   /* サブメニューを絶対配置する基準 */
  margin-right: 10px;   /* メニュー同士の隙間 */
}

/* メインメニューのボタン */
.nav-button {
  display: block;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* サブメニューの UL */
.submenu-list {
  display: none;        /* 初期非表示 */
  position: absolute;   /* 親 .submenu を基準に配置 */
  top: 100%;            /* 親メニュー直下に配置 */
  left: 50%;            /* 中央寄せ */
  transform: translateX(-50%); /* サブメニューを親メニューの中央に配置 */
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;  /* 横並びにしない */
}

/* 親メニューにホバーしたらサブメニューを表示 */
.submenu:hover .submenu-list {
  display: block;  /* 縦並び表示 */
}

/* サブメニュー内の各項目 (縦並びにするために display: block で設定) */
.submenu-list li {
  display: block;   /* 縦並びにする */
  padding: 5px 10px;
  border-bottom: 1px solid #ddd;
}

/* 最後の項目の下ボーダーを消す（任意） */
.submenu-list li:last-child {
  border-bottom: none;
}

/* サブメニュー内のリンク */
.submenu-list li a {
  display: block;
  padding: 5px 10px;
  color: #000000; /* ボタンの文字色 */
  text-decoration: none;
  background-color: #66ccff; /* 明るい水色 */
  border-radius: 4px;
}

/* ホバー時の背景色変更 */
.submenu-list li a:hover {
  background-color: #3399ff; /* ホバー時の少し濃い水色 */
}

/* 親メニューにホバー中のボタンの色変更 (任意) */
.submenu:hover > .nav-button {
  background-color: #0056b3;
}

/* メインの.nav-buttonスタイルはそのまま */
.nav-button {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #007bff; /* メインボタンの色 */
}

/* リダイレクト先カードのスタイル */
.custom-redirect-section-card {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 配信曜日テーブル */
.custom-days-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.custom-days-table td {
  padding: 8px;
  text-align: center;
}

.custom-days-table td label {
  display: block;
  margin: 5px 0;
}

/* 入力フォームのスタイル */
.custom-su-form-group input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box; /* パディングを含めた幅にする */
}

/* チェックボックスを中央揃えにする */
.custom-su-form-group table {
  width: 100%;
  table-layout: fixed;
}

/* 最大600pxの幅でセンターに寄せる */
.custom-redirect-section-card {
  max-width: 600px;
  margin: 0 auto;
}

/* チェックボックスを大きくする */
.custom-su-form-group input[type="checkbox"] {
  transform: scale(1.5); /* 1.5倍に拡大 */
  margin-right: 10px; /* 右の余白を追加 */
  vertical-align: middle; /* チェックボックスとラベルを縦揃え */
}

/* 2カラムレイアウト用の親要素 */
.custom-redirect-sections {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列に分割 */
  gap: 20px; /* カード間の余白を設定 */
}

/* カードのデザイン例 */
.custom-redirect-section-card {
  border: 1px solid #ccc;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}

.custom-redirect-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; 
  max-width: 1200px; /* 例: 1200px 程度に制限 */
  margin: 0 auto;     /* 中央寄せ */
}


/* 従来の .su-form-group のスタイルを参考にする例 */
.my-form-group {
  margin-bottom: 20px;
  /* ほか必要なスタイル */
}

/* 幅を調整したい場合 */
.my-form-group.my-user-select-group {
  width: 300px;    
  max-width: 100%; 
  box-sizing: border-box;
  margin: 0 auto;
}

/* select 自体のスタイル */
.my-user-select {
  /* 必要な場合に追加 */
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.auto-width-input {
  width: auto;     /* 親や要素のデフォルトに依存 */
  min-width: 10ch; /* 文字数10分の幅を最低限確保 */
  max-width: 60ch; /* 長すぎる場合は折り返す/スクロールさせるなど */
}

.two-col-container {
  display: flex;             /* Flexboxで横並び */
  justify-content: space-between; 
  align-items: flex-start;   /* 上寄せ */
  gap: 10px;                 /* カラム間余白 */
}

.two-col-left {
  /* 左カラムのスタイル (必要に応じて幅指定) */
  width: 50%;
}

.two-col-right {
  /* 右カラムのスタイル */
  width: 50%;
  text-align: right; /* 右寄せにする例 */
}

.mid-container{
  border-radius: 8px;
    max-width: 800px; /* 最大幅設定 */
    margin: 2em auto 0; /* 上部に余白を追加し、中央寄せ */
}

.mid-wide-container{
  border-radius: 8px;
    max-width: 1000px; /* 最大幅設定 */
    margin: 2em auto 0; /* 上部に余白を追加し、中央寄せ */
}

.red-button {
    background-color: red;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

.red-button:hover {
    background-color: darkred;
}

/* ローディングオーバーレイ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* 背景を暗くする */
    display: none;  /* 最初は非表示 */
    justify-content: center;
    align-items: center;
    z-index: 9999;  /* 他のコンテンツより上に表示 */
}

/* クルクルスピナー */
.loading-spinner {
    border: 4px solid #f3f3f3; /* グレーの背景 */
    border-top: 4px solid #3498db; /* クルクルの色 */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

/* アニメーション */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}