/* 全体 */
body{
  padding-top: var(--site-header-h);

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  background-color: #f5f7fa;
  color: #333;
}

/* ヘッダー */
header {
  background: linear-gradient(90deg, #1e3c72, #555);
  color: #fff;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  position: relative;
  z-index: 100200;   /* 一覧のsticky(100000)より前に出す */
}

header nav {
  display: flex;
  align-items: center;
}

header nav a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
}

header nav a:hover {
  text-decoration: underline;
}

header .menu-right {
  display: flex;
  align-items: center;
}

header .menu-right a {
  margin-left: 20px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;   /* 下線なし */
}

header .menu-right a:hover {
  text-decoration: underline;  /* ホバー時に下線 */
}

/* NEW ▼ メニューの余白削除 */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.dropdown > a {
  display: inline-block;
  padding: 12px 16px;
  white-space: nowrap;   /* 改行せず一行表示 */
}

/* ▼ ドロップダウン全体：既存を活かしつつ上品に */
.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  min-width: 300px;              /* ← 幅を広くして2行対応 */
  background: rgba(255,255,255,0.97);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 9999;
  transition: all 0.2s ease-in-out;
}

/* ドロップダウンを最前面に（既存維持） */
.dropdown-content {
  position: absolute;
  z-index: 100001 !important;
}

/* ▼ 項目の見た目：フォント・パディング調整 */
.dropdown-content a {
  display: block;
  padding: 12px 18px;
  color: #222;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
  border-left: 4px solid transparent;  /* hover時のアニメ用 */
}

/* ▼ hover時のアニメーションと配色 */
.dropdown-content a:hover {
  background: rgba(30, 102, 245, 0.08);
  border-left-color: #1e66f5;
  color: #1e66f5;
  padding-left: 22px; /* hover時に少し右にズラす */
}

/* ▼ 表示挙動は既存通り */
.dropdown:hover .dropdown-content {
  display: block;
}

/* パンくず */
.breadcrumb {
  margin: 20px 30px;
  font-size: 14px;
}
.breadcrumb a {
  color: #2a5298;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* 検索バー */
.search-bar {
  display: flex;
  align-items: center;
  margin: 20px 30px;
  background: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.search-bar input[type="text"] {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-right: 10px;
}
.search-bar select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* テーブル */
table {
  border-collapse: collapse;
  width: 95%;
  margin: 20px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* 全体：デフォルトは中央寄せ */
table th,
table td {
  padding: 9px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

/* タイトル（リンク）列だけ左寄せに戻す */
.title-list table tr td:nth-child(2) {
  text-align: left;
  padding-left: 10px;
}

table th {
  background: #1e3c72;
  color: #fff;
}
table tr:hover {
  background: #f9f9f9;
}
/* =========================
   ログイン/ログアウト画面
========================= */
.auth-container {
  max-width: 400px;
  margin: 80px auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
}

.auth-container h2 {
  margin-bottom: 20px;
  font-size: 22px;
  color: #2a5298;
}

.auth-container label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
  text-align: left;
}

.auth-container input[type="email"],
.auth-container input[type="password"] {
  width: 95%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.auth-container button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.auth-container button:hover {
  background: linear-gradient(90deg, #2a5298, #1e3c72);
}

/* ログアウト画面メッセージ */
.logout-message {
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  color: #333;
}

/* =========================
   会員ドメイン一覧
========================= */
.domain-list {
  width: 95%;
  margin: 30px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.domain-list table {
  width: 100%;
  border-collapse: collapse;
}

.domain-list th, .domain-list td {
  padding: 14px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.domain-list th {
  background: #2a5298;
  color: #fff;
  font-size: 14px;
}

.domain-list tr:hover {
  background: #f9f9f9;
}

.domain-list a {
  color: #2a5298;
  font-weight: bold;
  text-decoration: none;
}

.domain-list a:hover {
  text-decoration: underline;
}
/* NEW ▼ 余白削除 */
header nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

.dropdown {
  position: relative;
  margin: 0;
  padding: 0;
}

.dropdown > a {
  display: inline-block;
  padding: 10px 15px;
  line-height: 1;
}

/* コラム一覧テーブル */
.columns-table {
  border-collapse: collapse;
  width: 95%;
  margin: 20px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.columns-table th, .columns-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.columns-table th {
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  color: #fff;
  font-size: 14px;
}

.columns-table tr:nth-child(even) {
  background: #f9f9f9;
}

.columns-table tr:hover {
  background: #eef3ff;
  transition: background 0.2s ease-in-out;
}

/* 完成ボタン */
.columns-table button.complete-btn {
  padding: 6px 12px;
  background: #2a5298;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.columns-table button.complete-btn:hover {
  background: #1e3c72;
}

/* ===== 新規作成フォーム（PC） ===== */
.newform-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.newform-heading {
  text-align: center;
}

.newform-form {
  width: 1150px;
}

.newform-table {
  width: 100%;
  border-collapse: collapse;
  margin: auto;
}

.newform-table-th {
  background-color: #0056b3;  /* ← 濃い青に変更 */
  color: #fff;
  text-align: center;
  height: 48px;
  font-size: 16px;
}

.newform-label {
  text-align: center;
  font-weight: bold;
  padding: 8px 10px;
  vertical-align: middle;
  width: 28%;
}

.newform-label small {
  font-weight: normal;
  margin-left: 6px;
}

.newform-input {
  padding: 8px;
  text-align: left;
}

.newform-input-field {
  padding: 5px 8px;
  border-radius: 6px;
  height: 40px;              /* ← デフォルトを25pxに */
  border: 1px solid #ccc;
  margin-right: 5px;
  box-sizing: border-box;
}

/* 書類タイトル専用入力欄 */
.newform_input_title-field {
  padding: 5px 8px;
  border-radius: 6px;
  height: 40px;             /* ← 指定の通り、25pxに変更 */
  border: 1px solid #ccc;
  margin-right: 5px;
  box-sizing: border-box;
  width: 645px;
}

/* サイト選択（セレクトボックス専用） */
.newform-select {
  height: 40px !important;   /* ← セレクトだけ40pxに */
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;   /* ← 薄いグレーに変更 */
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 種類 select の追加カスタマイズ */
.newform-kind-input .newform-select {
  height: 40px !important;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* サイト選択専用（種類は除外） */
.newform-input:not(.newform-kind-input) .newform-select {
  width: 80%;   /* お好みの横幅に */
}

.newform-full-width {
  width: 97%;
}

.newform-textarea {
  width: 97%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.newform-url-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.newform-url-domain {
  color: #999;
  margin-right: 5px;
  white-space: nowrap;
}

.newform-btn-sub {
  margin-left: 8px;
  padding: 0 16px;
  height: 40px;
  border: none;
  border-radius: 6px;
  background: #007BFF;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
}

.newform-btn-main {
  padding: 12px 40px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  font-size: 16px;
}

.newform-submit {
  text-align: center;
  margin-top: 20px;
}

.newform-table {
  width: 100%;
  border-collapse: collapse;
  margin: auto;
}

.newform-table th,
.newform-table td {
  border: 1px solid #ddd; /* ←縦線・横線も全部出る */
}

/* ===== 新規作成フォーム（スマホ） ===== */
@media screen and (max-width: 768px) {
  .newform-wrapper {
    padding: 0 5px;   /* 親に左右5pxの余白 → 切れ防止 */
    box-sizing: border-box;
  }

  .newform-table {
    display: block;
    border: none;
    margin: 0;
    width: 100%;
  }

  .newform-table thead {
    display: none;
  }

  .newform-table tr {
    display: block;
    margin: 5px 5px 15px 5px; /* 各カードを左右5px内側に配置 → 左右に白背景が見える */
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
  }

  .newform-label {
    display: block;
    width: 100%;
    background-color: #d0d0d0; /* 少し濃いグレー */
    color: #333;
    padding: 10px;
    text-align: left;
    font-weight: bold;
    border: none;
    box-sizing: border-box;
  }

  .newform-input {
    display: block;
    width: 100%;
    padding: 10px;
    background: #fff;
    border: none;
    box-sizing: border-box;
  }

  .newform-input-field,
  .newform-full-width,
  .newform-textarea {
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
  }

  /* サイト選択の注釈は右側に */
  .newform-label small {
    display: inline-block;
    margin-left: 8px;
    font-weight: normal;
    color: #555;
  }

  /* サイト選択とボタン横並び */
  .newform-input select[name="siteId"] {
    width: calc(70% - 5px);
    display: inline-block;
  }

  .newform-btn-sub {
    width: 26%;
    margin-left: 5px;
    margin-top: 0;
  }

  /* 提出ボタン下に余白 */
  .newform-submit {
    text-align: center;
    margin: 30px 10px;
  }
}

/* ===== サイト登録フォーム（PC） ===== */
.siteform-table {
  width: 700px;
  margin: 20px auto;
  border-collapse: collapse;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  border-radius: 6px;
  overflow: hidden;
}

.siteform-table th {
  background-color: #0056b3;
  color: #fff;
  padding: 12px;
  text-align: center;
}

.siteform-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.siteform-input {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
}

.siteform-submit {
  text-align: center;
  margin-top: 20px;
  margin: 30px 0;
  text-align: center;
}
.siteform-submit button {
  padding: 12px 30px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  display: block;
  margin: 0 auto;   /* ← 確実に中央寄せ */
}
.siteform-wrapper {
  position: relative; /* ★ wrapperを基準にする */
  width: 700px;
  margin: 60px auto;
}

.siteform-table {
  width: 100%;  /* wrapper幅に合わせる */
  border-collapse: collapse;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  border-radius: 6px;
  overflow: hidden;
}

.siteform-title {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: -30px;  /* テーブル上に合わせる */
  left: 0;
}
.siteform-table th {
  background-color: #0056b3;
  color: #fff;
  padding: 12px;
  text-align: center;
  border: 1px solid #ddd;   /* ★ 縦線・横線を表示 */
}


/* ===== サイト登録フォーム（スマホ） ===== */
@media screen and (max-width: 768px) {
  /* サイト登録フォーム */
  .siteform-wrapper {
    position: relative;
    width: 100%;         /* 幅は常に100% */
    margin: 20px auto;
    padding: 0 10px;     /* 左右余白を確保 */
    box-sizing: border-box;
  }

  .siteform-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px; /* headerと重ならないように下に余白 */
    position: static;    /* ★絶対配置はやめる */
  }

  .siteform-table {
    width: 100%;         /* スマホは常に幅100% */
    border: none;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .siteform-table thead {
    display: none;       /* 見出しは非表示 */
  }

  .siteform-table td {
    display: block;
    width: 100%;
    border: none;
    padding: 10px;
    box-sizing: border-box;
  }

  .siteform-input {
    width: 100%;         /* 入力欄も幅100% */
    box-sizing: border-box;
  }

  /* 登録ボタン中央寄せ */
  .siteform-submit {
    margin: 30px 0;
    display: flex;
    justify-content: center;
  }

  .siteform-submit button {
    display: block;
    margin: 0 auto;
  }
}

/* ===== ヘッダー（全ページ共通） ===== */
header {
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center;
  padding: 10px 20px;
  background-color: #0d47a1; /* 例：全体の青背景 */
  color: #fff;
}

header nav {
  display: flex;
  gap: 20px; /* ダッシュボードと NEW の間隔 */
}

header nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

header .menu-right a {
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  /* ✅ header 自体は折り返さず、stickyの高さ変動を防ぐ */
  header {
    flex-wrap: nowrap;
  }

  /* ✅ 折り返しは nav 側で行う */
  header nav {
    flex: 1 1 auto;
    gap: 10px;
    flex-wrap: wrap;
  }

  header .menu-right {
    margin-left: auto; /* 常に右端に寄せる */
    flex: 0 0 auto;
  }
}

/* ===== modal（モーダルウィンドウ）の見た目を整えるCSS ===== */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 1000;
}
.modal.hidden {
  display: none;
}
.modal-content {
  max-height: 70vh;
  overflow-y: auto;
}
.modal-actions {
  margin-top: 15px;
  text-align: right;
}
#templateModal .modal-content {
  width: 900px;  /* デフォルトの約3倍 */
  max-width: 90vw; /* 画面幅に収まりきるように調整 */
}
.error-border {
  border: 2px solid red !important;
}

/* ===== 全ページ共通部分 ===== */
.table-wrapper .table-title {
  margin: 20 0 -10px 33px;
}
.table-wrapper h2 {
  margin-left: 0px;  /* h2 だけを右へズラす */
  text-align: left;
  margin-bottom: -10px;
  margin-top: 30px;
}
.breadcrumb {
  font-size: 14px;
  margin: 10px 0 20px;
}

.breadcrumb a {
  color: #007bff;
  text-decoration: none;
  margin-right: 5px;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  font-weight: bold;
  color: #333;
}
.breadcrumb {
  font-size: 14px;
  margin: 10px 0 20px;  /* 上10px, 下20px */
  min-height: 20px;     /* パンくずがなくても高さを確保 */
}
.breadcrumb {
  margin: 15px 0;
  font-size: 14px;
  padding: 0 20px;   /* 左に余白追加 */
  display: block;
}

.breadcrumb a {
  color: #000;
  text-decoration: underline;
}

.breadcrumb span {
  color: #000;
}

.breadcrumb-home {
  font-size: 16px;
}
.breadcrumb {
  margin: 15px 0;
  font-size: 14px;
  padding-left: 20px;  /* ← 左に余白追加 */
}
.breadcrumb a {
  color: #000;
  text-decoration: underline;
}
.breadcrumb span {
  color: #000;
}
.breadcrumb-home {
  font-size: 16px;
}

/* ===== 新規作成フォーム（PC） ===== */
.newform-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.newform-heading {
  text-align: center;
}

.newform-form {
  width: 1150px;
}

.newform-table {
  width: 100%;
  border-collapse: collapse;
  margin: auto;
}

.newform-table-th {
  background-color: #1e3c72;
  color: #fff;
  text-align: center;
  height: 48px;
  font-size: 16px;
}

.newform-label {
  text-align: center;
  font-weight: bold;
  padding: 8px 10px;
  vertical-align: middle;
  width: 28%;
}

.newform-label small {
  font-weight: normal;
  margin-left: 6px;
}

.newform-input {
  text-align: left;
  padding: 8px 10px;
  vertical-align: middle;
}

/* ===== 依頼完了ページ（request_submitted.ejs） ===== */
.submitted-heading {
  margin-left: 30px;
}

.submitted-note {
  margin-left: 30px;
}

.submitted-info {
  margin: 0 30px;
}

.submitted-table {
  width: 100%;
  border-collapse: collapse;
}

.submitted-table thead th {
  background-color: #0056b3; /* 濃い青 */

  text-align: center;
  padding: 10px;
  background: #1f5fae !important;
  color: #fff !important;

}

.submitted-table td,
.submitted-table th {
  border: 1px solid #ddd;
}

.submitted-table td:first-child {
  width: 20%;              /* ← 項目列を狭く */
  text-align: center;      /* ← 項目は中央寄せ */
  background-color: #f9f9f9;
  font-weight: bold;
}

.submitted-table td:last-child {
  width: 80%;              /* ← 詳細列を広く */
  text-align: left;
  padding: 10px;
}

.submitted-btn-area {
  margin: 20px 30px;
  text-align: center;
}

.submitted-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}
.submitted-btn:hover {
  background-color: #0056b3;
}


/* ===== 詳細ページ ===== */
.table-wrapper {
  margin: 0 30px; /* 左右に30px余白 */
  font-size: 16px;
}

/* 修正依頼の折りたたみ制御 */
.hidden-request {
  display: none;
}

/* ボタンエリア */
.btn-area {
  margin: 20px 0;
  text-align: center;
}

/* ボタンの共通デザイン */
.btn-more,
.btn-all,
.btn-less {
  border: none;
  border-radius: 20px;           /* 丸くする */
  padding: 8px 18px;
  margin: 0 5px;
  color: #fff;
  cursor: pointer;
  line-height: 1.5;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);  /* シャドー */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-more:hover,
.btn-all:hover,
.btn-less:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

/* 色分け */
.btn-more { background-color: #007bff; }   /* 青 */
.btn-all { background-color: #28a745; }    /* 緑 */
.btn-less { background-color: #ff9800; }   /* オレンジ */

/* 縦の＜＞アイコンボタン */
.btn-less {
  font-size: 16px;
  font-weight: bold;
  padding: 8px 12px;
}


/* 記事詳細ページ専用テーブル */
.article-detail .table-wrapper table th:nth-child(1) { width: 16%; }
.article-detail .table-wrapper table th:nth-child(2) { width: 42%; }
.article-detail .table-wrapper table th:nth-child(3) { width: 42%; }

.article-detail .table-wrapper table th {
  text-align: center;
}


/* ===== 詳細ページ：本文セル左寄せ ===== */
.table-wrapper table td:nth-child(2) {
/*  text-align: left !important; */
  vertical-align: top;
}

/* ===== 詳細ページ：修正依頼ボタン ===== */
.btn-revise {
  background-color: #ff5722;   /* ビビッドなオレンジ */
  color: #fff;
  border: none;
  border-radius: 6px;          /* 角丸 */
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);  /* シャドーで立体感 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-revise:hover {
  background-color: #e64a19;   /* ホバー時に濃い色 */
  transform: translateY(-2px); /* 少し浮く */
  box-shadow: 0 5px 12px rgba(0,0,0,0.35);
}

/* ===== 詳細ページ：依頼送信ボタン ===== */
.btn-submit {
  background-color: #007bff;   /* ブルー基調 */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-submit:hover {
  background-color: #0056b3;   /* 濃いブルーに変化 */
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.35);
}

/* ===== 詳細ページ：修正依頼テキストエリア（中央寄せ） ===== */
textarea[name="reInstruction"] {
  width: 100%;
  max-width: 600px;             /* 最大幅を制限 */
  margin: 0 auto;               /* 中央寄せ */
  display: block;               /* ブロック要素にして中央寄せを有効化 */
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea[name="reInstruction"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 6px rgba(0,123,255,0.3);
}

/* ===== エラーモーダル（修正依頼用） ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-request-content {
  background: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  text-align: center;

  display: flex;                /* フレックス配置 */
  flex-direction: column;       /* 縦並び */
  justify-content: flex-start;  /* 上寄せ */
  align-items: center;          /* 横中央 */
  min-height: 100px;            /* 高さを確保して「上寄せ」が効く */
}

/* ===== ヘッダーロゴ ===== */
.logo-link {
  display: inline-block;
  padding: 0;
  margin-right: 20px; /* ロゴと他メニューの間に余白 */
}

.logo-img {
  height: 30px;   /* 高さを調整（必要に応じて変更） */
  width: auto;
  display: block;
}

/* ===== 詳細ページ：完成にするボタン ===== */
button[type="submit"].btn-complete {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 7px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.4;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    transform: translateY(5%);
}

button[type="submit"].btn-complete:hover {
  background-color: #007bff;   /* ホバーで濃いグリーン */
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.35);
}

/* titleページ専用：タイトルリンクを黒文字に */
.title-list table td a {
  color: #000;
}


@media screen and (max-width: 768px) {
  .table-wrapper h2 {
    margin-left: 0px;
    text-align: left;
    margin-bottom: -10px;
    margin-top: 20px;
    font-size: 15px;
  }
  
  .submitted-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .submitted-note {
    font-size: 12px;
    margin: 0px 24px;
  }

  .submitted-btn {
    font-size: 12px;
    padding: 7px 10px;
  }

  .submitted-heading {
    margin-left: 20px;
    font-size: 15px;
    margin-top: 25px;
  }

  p.no-post {
    text-align: left;
  }

  .container.article-detail .table-wrapper h2 {
  margin-left: 0px !important;
  text-align: left !important;
  margin-bottom: -16px !important;
  margin-top: 20px !important;
  font-size: 15px !important;
  }

  .table-wrapper {
    font-size: 12px;
    margin: 0 5px;
  }

  /* ===== 詳細ページ：ボタンの文字位置調整 ===== */
  .btn-more,
  .btn-all,
  .btn-less {
    line-height: 1.2;        /* 行の高さを少し狭める */
    padding-bottom: 6px;     /* 下も揃えて高さを維持 */
    display: inline-flex;    /* フレックスで中央寄せ */
    align-items: center;     /* 垂直方向中央 */
    justify-content: center; /* 水平方向中央 */
  }

  .btn-revise {
    background-color: #ff5722;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin: 5px auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .btn-submit {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
    margin: 0px auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }
  
  textarea[name="reInstruction"] {
    font-size: 12px;
    max-width: 90%;  /* スマホは全幅に戻す */
    margin: -10px auto;
  }

/* 記事詳細ページ専用 */
  .article-detail .table-wrapper table th:nth-child(1) { width: 22%; }
  .article-detail .table-wrapper table th:nth-child(2) { width: 39%; }
  .article-detail .table-wrapper table th:nth-child(3) { width: 39%; }

  header nav a {
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      font-size: 12px;
  }

  .btn-more, .btn-all, .btn-less {
    line-height: 1.2;
    padding-bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.1;
  }

  header .menu-right a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
  }

  .breadcrumb {
    margin: 10px 0;
    font-size: 12px!important;
    padding-left: 10px;
  }

  .dropdown > a {
    display: inline-block;
    padding: 10px 0px;
    line-height: 1;
    margin-left: -10px;
  }

  /* ===== エラーモーダル（修正依頼用） ===== */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .modal-request-content {
    background: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
    font-size: 12px!important;
    min-height: 80px;
  }

  .logo-img {
    height: 25px;
    margin-left: -20px;
  }

  button[type="submit"].btn-complete {
    font-size: 10px;
    line-height: 0.9;
    margin-top: 3px;
  }
}

/* ===== 削除ボタン ===== */
.btn-delete {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.delete-icon {
  width: 16px;
  height: 20px;
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(10%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-delete:hover .delete-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* ===== 削除モーダル ===== */
#modal-delete {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#modal-delete .modal-request-content {
  background: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  text-align: center;
}

/* PC：日付＋時間 */
.date-pc { display: inline; }
.date-sp { display: none; }

/* スマホ：日付のみ2行 */
@media (max-width: 768px) {
  .date-pc { display: none; }
  .date-sp {
    display: block;
    text-align: center;
  }
  .date-sp::before {
    content: attr(data-year) "/";
    display: block;
  }
  .date-sp::after {
    content: attr(data-date);
    display: block;
  }
}

/* ===== テーブル上部コントロール ===== */
.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 15px 0;
}

.search-box input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 220px;
  transition: all 0.2s ease;
}
.search-box input:focus {
  border-color: #0056b3;
  outline: none;
  box-shadow: 0 0 5px rgba(0,86,179,0.4);
}

.entries-box label {
  margin-right: 5px;
  font-weight: bold;
}
.entries-box select {
  padding: 4px 0px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* ===== ページネーション ===== */
.pagination {
  display: flex;
  flex-wrap: nowrap;           /* 折り返し防止 */
  justify-content: flex-start; /* 左寄せ */
  gap: 4px;                    /* ボタン間の隙間 */
  overflow-x: auto;            /* はみ出したら横スクロール */
  padding: 0 30px;             /* ✅ 左右30pxの余白を確保 */
  margin-bottom: 20px;
  scrollbar-width: thin;       /* Firefox用 */
}

/* スクロールバーの見た目（任意） */
.pagination::-webkit-scrollbar {
  height: 6px;
}
.pagination::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* ページボタンの調整 */
.pagination button {
  min-width: 32px;
  height: 32px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0; /* ✅ ボタン幅を縮めない */
}

/* 現在のページを強調 */
.pagination .page-btn.active {
  background: #1f5fae;
  color: #fff;
  border-color: #1f5fae;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.page-btn:hover {
  background: #0056b3;
  color: #fff;
  border-color: #0056b3;
}
.page-btn.active {
  background: #0056b3;
  color: #fff;
  border-color: #0056b3;
  cursor: default;
}
.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.table-controls {
  display: flex;
  justify-content: space-between;  /* 左右に配置 */
  align-items: center;
  margin: 10px 0 15px 0;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 30px;           /* ← 検索バーと件数セレクトの間隔 */
  margin-right: 30px;
  margin-top: 5px;
}

.search-box input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 400px;
}
.table-title {
  margin-left: 30px;
}

.title-list table th,
.title-list table td {
  vertical-align: middle !important;  /* 高さ中央に */
}

/* 検索ボックスの文字を下に寄せる */
.search-box input::placeholder {
  position: relative;
  top: 1px;   /* ← プレースホルダー文字だけ下げる */
}

/* セレクトボックスの選択肢の文字を下に寄せる */
#entriesSelect {
  line-height: 2;   /* 数字を下寄りに見せる */
  padding-top: 6px; /* 数字だけ下にずらす感覚 */
}


@media (max-width: 768px) {
  .search-box input {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    width: 200px;
  }

  .table-title {
    margin-left: 10px;
    font-size: 1em;
  }
 
  .entries-box label {
    display: none;
  }

  .entries-box select {
    margin-right: -20px;
  }

  .title-list table th,
  .title-list table td {
    vertical-align: middle !important;  /* 高さ中央に */
  }

  .btn-complete {
    display: inline-block;
    margin: auto;
  }

  .delete-cell {
    vertical-align: middle !important;
  }

  .table-wrapper table th, .table-wrapper table td {
      font-size: 0.8em;
  }

}

/* 修正依頼の✕ボタン */
.btn-close-revise {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 14px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  line-height: 24px;
  text-align: center;
}


/* ===== テーブル統一 ===== */
.table-wrapper table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;   /* 枠線を統一 */
}

.table-wrapper table th,
.table-wrapper table td {
  border: 1px solid #ddd;   /* 薄いグレー (#ddd ≒ 87%の明るさ) */
  padding: 6px;
  font-size: 14px;
}

/* 各列幅指定 */
.col-id { width: 8%; text-align: center; }
.col-member { width: 32%; }
.col-domain { width: 15%; text-align: center; }
.col-count { width: 15%; text-align: center; }
.col-completed { width: 15%; text-align: center; }
.col-lastdate { width: 15%; }
.col-purpose { width: 47%; text-align: center; }
.col-site { width: 47%; }
.col-type { width: 47%; text-align: center; }
.col-finish { width: 12%; text-align: center; }
.col-title { width: 32%; }
.col-status { width: 20%; text-align: center; }
.col-createdat { width: 15%; }
.col-finish2 { width: 15%; text-align: center; } /* もう一つの完成日用 */
.col-delete { width: 10%; text-align: center; }
.col-item { width: 15%; text-align: center; }
.col-content { width: 40%; }
.col-ai { width: 10%; text-align: center; }
.col-url { width: 35%; text-align: center; }
.col-detail { width: 70%; text-align: center; }
.col-item { width: 30%; text-align: center; }

table td.col-url {
    text-align: left !important;
}

/* ❹ テキストリンク共通化 */
.table-wrapper table a {
  color: #000;
  text-decoration: underline;
}

.table-wrapper table td {
  vertical-align: middle !important;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* ← タイトルとボタンの下端を揃える */
}

.btn-back {
  padding: 6px 14px;
  background-color: #555;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: -10px;
}

.btn-back:hover {
  background-color: #333;
}

.siteform-submit {
  display: flex;
  justify-content: center; /* 横並びで中央寄せ */
  gap: 20px;
}

.siteform-submit button {
  margin: 0; /* 既存のmarginをリセット */
}

.btn-return {
  margin-left: 4px;         /* 登録するの隣に4pxだけ空ける */
  padding: 8px 16px;
  background: #555 !important;  /* 濃いグレー */
  color: #fff !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-return:hover {
  background: #333 !important;  /* さらに濃いグレー */
}


/* ===== スマホ用 (768px以下) ===== */
@media (max-width: 768px) {
  /* ❶ フォントサイズ */
  .table-wrapper table th,
  .table-wrapper table td {
    font-size: 0.8em;
  }

  /* ❷ table 左右余白 */
  .table-wrapper {
    padding-left: 3px;
    padding-right: 3px;
  }

  /* ❸ 日付の表示を縦2行に分割（例: 2025/09/08 → 2025/ + 改行 + 09/08） */
  .date-sp {
    display: block;
    text-align: center;
  }
  .date-sp::before {
    content: attr(data-year) "/";
    display: block;
  }
  .date-sp::after {
    content: attr(data-date);
    display: block;
  }

  .col-lastdate {
    text-align: center;
  }
  .col-lastdate .date-sp::before {
    content: attr(data-year) "/";
    display: block;
  }
  .col-lastdate .date-sp::after {
    content: attr(data-date);
    display: block;
  }

  h1 {
      font-size: 15px;
      margin-bottom: -20px;
      padding: 9px 5px;
  }

  .search-bar {
    display: flex;
    align-items: center;
    margin: 18px 10px -11px 10px;
    padding: 4px 3px;
  }

  .btn-back {
    padding: 1px 6px;
    background-color: #555;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    font-size: 10px;
    margin-bottom: -17px;
    line-height: 16px;
    margin-right: 3px;
  }

  .btn-return {
  margin-left: 10px;
  padding: 8px 16px;
  background: #555;   /* 濃いグレー */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-return:hover {
  background: #333;   /* さらに濃いグレー */
}

}


/* ===== 書類新規作成モーダル専用 ===== */
.doc-modal {
  display: none;              /* デフォルト非表示 */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.doc-modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  width: 80%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  position: relative;
}

.doc-modal .modal-actions {
  margin-top: 20px;
  text-align: right;
}

.doc-modal .modal-close {
  background: #666;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.doc-modal .modal-close:hover {
  background: #444;
}
.doc-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* ← 外枠がクリック可能になる */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal_file {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* 背景グレー */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal_file-content {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  max-height: 90vh;
  overflow-y: auto;
}
#typeRequiredModal {
  display: none;              /* デフォルトは非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* 背景ブロック */
  z-index: 10000;

  justify-content: center;    /* 横中央 */
  align-items: center;        /* 縦中央 */
}

#typeRequiredModal .modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  width: 300px;
  text-align: center;
}
/* ===== 種類選択モーダル専用 ===== */
.modal_type_required {
  display: none;              /* デフォルト非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* 背景ブロック */
  z-index: 10000;

  justify-content: center;    /* 横中央 */
  align-items: center;        /* 縦中央 */
  display: flex;              /* flex配置（JSで表示したときに効く） */
}

.modal_type_required.hidden {
  display: none !important;   /* hiddenクラス時は非表示を強制 */
}

.modal_type_required-content {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  width: 300px;
  text-align: center;
}



/* ===== 新規作成ページ スマホ対応（768px以下） ===== */
@media (max-width: 768px) {
  .newform-wrapper {
    margin: 10px;
  }

  .newform-form {
    width: 100%;
  }

  /* ===== 上部の「項目/入力欄」ヘッダー非表示 ===== */
  .newform-table thead {
    display: none;
  }

  /* ===== tableを縦並びに修正 ===== */
  .newform-table,
  .newform-table tbody,
  .newform-table tr {
    display: block;
  }

  .newform-table th,
  .newform-table td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box;
    border: none !important;
  }

  /* ===== ラベルと入力欄の見やすさ調整 ===== */
  .newform-label {
    padding: 4px 4px;
    font-size: 14px;
    background: #ccc;
    border-bottom: 1px solid #ddd;
  }

  .newform-input {
    padding: 4px 5px;
    margin-bottom: 4px;
  }

  .newform-input-field,
  .newform-select,
  .newform-textarea {
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 4px;
  }

  /* ===== URL入力欄も折返し ===== */
  .newform-url-wrapper {
    display: block;
  }

  .newform-url-domain {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #555;
  }

  /* ===== ボタンをフル幅に ===== */
  .newform-btn-sub {
    margin-top: 5px;
    width: 100%;
  }

  .newform-submit {
    text-align: center;
  }

  .newform-btn-main {
    width: 100%;
    padding: 12px;
    font-size: 16px;
  }  
}


   .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      z-index: 1000;
    }
    .modal.hidden {
      display: none;
    }
    .modal-content {
      max-height: 70vh;
      overflow-y: auto;
    }
    .modal-actions {
      margin-top: 15px;
      text-align: right;
    }

    /* パンくずスタイル */
    .breadcrumb {
      margin: 10px 0;
      font-size: 14px;
    }
    .breadcrumb a {
      color: #000;
      text-decoration: underline;
    }
    .breadcrumb span {
      color: #000;
    }
    .breadcrumb-home {
      font-size: 16px;
    }

/* デフォルトで非表示（PC用） */
.hamburger-menu {
  display: none;
}

/* スマホ表示 */
@media (max-width: 768px) {
  .hamburger-menu {
    display: inline-block;
    font-size: 23px;
    margin-left: auto;
  }

  /* PCメニュー非表示 */
  .menu-pc,
  nav .dropdown,
  nav a[href*="domain"] {
    display: none !important;
  }

  /* バーガーのプルダウン：位置基準を固定（ズレ防止） */
  .hamburger-menu {
    position: relative;
  }

  .menu-content {
    display: none;
    position: absolute;

    /* ✅ 右寄せを強化（バーガーアイコンの右端にピタ合わせ） */
    right: -20px;
    top: 100%;
    margin-top: 12px;

    background: linear-gradient(90deg, #1e3c72, #555);

    min-width: 200px;
    border-radius: 12px;
    overflow: hidden;

    /* ✅ 枠（border）を消す */
    border: none;

    /* 影は残すが少し弱めて“枠っぽさ”を減らす */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);

    z-index: 10000;
  }
  .menu-content.open { display: block; }

  /* ✅ 左右の内側余白（緑枠の原因になりやすい）をゼロに */
  .menu-content ul { list-style: none; margin: 0; padding: 0; }

  .menu-content ul li { border-bottom: 1px solid rgba(255,255,255,0.14); }
  .menu-content ul li:last-child { border-bottom: none; }

  /* ✅ モーダル（プルダウン）内の文字：左余白を減らす */
  .menu-content ul li a {
    display: block;
    padding: 11px 12px;   /* ← 16px → 12px（左右を詰める） */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-left: 5px;
  }
  .menu-content ul li a:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* ✅ サブ項目も左余白を詰める（- コラム / - 書類など） */
  .request-list li a { padding-left: 18px; }
  .ai-list li a { padding-left: 18px; }
}

.submitted-info,
.submitted-btn-area {
  position: relative;
  z-index: 0 !important;
  overflow: visible !important; /* ドロップダウンを切らない */
}

/* ===== AI回答modal ===== */
.btn-open {
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 3px 11px;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  transition: background 0.2s;
}
.btn-open:hover {
  background-color: #0056b3;
}
#aiModal .modal-content {
  width: 80%;
  max-width: 960px;
  aspect-ratio: 16/9;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 6px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}

.modal-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 7px;
}
.modal-footer button {
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  transition: background 0.2s;
}
.modal-footer button:hover {
  background-color: #0056b3;
}

#modal-body {
  white-space: pre-wrap;   /* 改行・空白をそのまま表示 */
  line-height: 1.6;        /* 読みやすく行間を広げる */
}

.badge-new {
  display: inline-block;
  background-color: #ff4d4d;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  margin-right: 6px;
}

@media screen and (max-width: 768px) {
  .btn-open {
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin: 5px auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  #modal-body {
    font-size: 12px;
  }

  .modal-footer button {
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 12px;
  }

  .badge-new {
    display: inline-block;
    background-color: #ff4d4d;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    margin-right: 6px;
  }
}


.badge-new {
  display: inline-block;
  background-color: #ff4d4d;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  margin-right: 6px;
}
.btn-open, .btn-image {
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  transition: background 0.2s;
}
.btn-open:hover, .btn-image:hover {
  background-color: #0056b3;
}
.btn-image.disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}
.img-modal {
  width: 80%;
  max-width: 960px;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
}
.img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
}
.thumbnail {
  position: relative;
}
.thumbnail img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
}
.thumbnail .download-icon {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.thumbnail .download-icon.done {
  background: rgba(0,0,0,0.3);
  cursor: default;
}
.img-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}


/* ==== AI回答エリア ==== */
.ai-section {
  margin-top: 20px;
  padding: 15px;
  border-top: 2px solid #0056b3;
}

.ai-section h3 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.ai-response-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  max-height: 400px;
  overflow-y: auto;
  position: relative;
  background: #fafafa;
  border-radius: 4px;
}

.ai-response-box pre {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
}

.btn-copy {
  display: block;
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #007bff;
  border: none;
  color: white;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-copy:hover {
  background-color: #0056b3;
}

.btn-image {
  padding: 4px 8px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
}

.btn-image[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}

.btn-image:hover:not([disabled]) {
  background-color: #1e7e34;
}


.ai-img-fail {
  margin-top: 6px;
  padding: 8px 10px;
  background: #f3f4f6;          /* 明るいグレー背景 */
  border: 1px solid #d1d5db;    /* 薄いグレー枠 */
  border-radius: 6px;           /* 角丸 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-size: 13px;
  color: #374151;               /* ダークグレー文字 */
}
/* ===== AIプレビュー 関連（今回の要件専用） ===== */

/* ❷ コピー完了の中央モーダル（トースト） */
.copy-toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);
  background:rgba(245,246,248,.98);color:#111827;padding:14px 18px;border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.2);z-index:10000;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.copy-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}

/* ❹（将来 iframe を使わず直描画に切替えた場合に備えた予備CSS。現状は iframe 内にインライン注入） */
.ai-preview h1{font-size:22px;margin:18px 0 10px;}
.ai-preview h2{font-size:18px;margin:16px 0 8px;}
.ai-preview p {font-size:14px;line-height:1.9;}

.ai-response-wrap{margin-top:8px}
.ai-head-triplet{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:10px;margin:8px 0;
  font-family:ui-monospace, Menlo, Monaco, Consolas,"Liberation Mono","Courier New",monospace
}
.ai-head-triplet code{display:block;white-space:pre-wrap;word-break:break-all}
.ai-box{position:relative;border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#fff}
.btn{border:1px solid #d1d5db;border-radius:6px;background:#007bff;padding:6px 10px;cursor:pointer;color:#fff;line-height:1}
.btn-copy-fixed{background:#e8f0fe;border-color:#c5d0f7}
.ai-preview{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;margin-top:8px}
.ai-iframe{width:100%;height:500px;border:0}
.ai-message{color:#ef4444;margin:6px 0}

.ai-box {
  font-size: 13px;
}

.ai-preview {
  background: #fff;
}

/* ❹ 余白を詰める（本文とボタンの間） – 6pxで統一 */
.ai-footer-actions{display:flex;justify-content:center;margin-top:6px}

/* ❺ コピー ボタンを目立たせる */
.btn-copy-strong{
  padding:10px 18px;border-radius:10px;border:none;
  background:#4b5563;color:#fff;font-weight:700;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.btn-copy-strong:hover{filter:brightness(.95)}

.ai-head-triplet{
  font-size:12px;
  line-height:1.5;
}

#ai-triplet {
  line-height: 1.6;
}

#ai-triplet .ai-label,
#ai-triplet .ai-eq {
  white-space: nowrap;     /* 途中改行を禁止 */
}

#ai-triplet .ai-label {
  display: inline-block;
  width: 100px;
  font-weight: 700;
  color: #c00;
  vertical-align: top;
}

#ai-triplet .ai-eq,
#ai-triplet .ai-text {
  white-space: nowrap;   /* = と後続テキストを常に同じ行に置く */
}

/* title の ai-text 用 */
#ai-triplet .ai-text.title {
    display: inline-block;
    /* width: calc(100% - 100px - 1ch); */
    vertical-align: top;
    white-space: pre-wrap;
}

/* description の ai-text 用 */
#ai-triplet .ai-text.description {
    /* display: inline-block; */
    /* width: calc(100% - 100px - 1ch); */
    vertical-align: top;
    white-space: pre-wrap;
}

/* h1 の ai-text 用 */
#ai-triplet .ai-text.h1 {
    display: inline-block;
    /* width: calc(100% - 100px - 1ch); */
    vertical-align: top;
    white-space: pre-wrap;
}

.ext-link, .ext-src { text-decoration: underline; }

#doc-meta .ai-label { color:#c00; font-weight:700; }

/* ======================
   サイト（site）
   ====================== */

/* ===== VEN-like fallback (site only) ===== */
#ven-site{color:#fff;background:#111;line-height:1.6}
#ven-site .container{max-width:1200px;margin:auto;padding:0 20px}

/* header */
#ven-site header.nav{position:sticky;top:0;z-index:10;background:#0b0b0b;box-shadow:0 2px 0 #111}
#ven-site .nav__wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
#ven-site .brand{font-weight:800;letter-spacing:.3px}
#ven-site .nav__menu{display:flex;gap:24px;font-size:14px;opacity:.9}
#ven-site .nav__cta{}
#ven-site .btn{display:inline-block;padding:10px 18px;border-radius:24px;border:1px solid #fff;text-decoration:none;color:#fff;transition:transform .2s}
#ven-site .btn:hover{transform:translateY(-2px)}

/* hero */
#ven-site #hero{position:relative;background:#000}
#ven-site #hero .hero-img{display:block;width:100%;height:auto}
#ven-site #hero .copy{position:absolute;left:6%;top:14%;max-width:40%;line-height:1.4}

/* logos */
#ven-site #logos{background:#f5f5f5;color:#000}
#ven-site #logos .rail{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;align-items:center;min-height:84px;opacity:.9}
#ven-site #logos img{height:30px;filter:grayscale(1);opacity:.85}

/* works */
#ven-site #works{padding:60px 0;background:#111}
#ven-site #works .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#ven-site #works .card{position:relative;border-radius:16px;overflow:hidden;background:#222}
#ven-site #works .card .thumb{background:#333;aspect-ratio:16/9}
#ven-site #works .card .lbl{position:absolute;left:0;bottom:0;background:#000a;color:#fff;padding:12px 14px;width:100%;font-weight:700}

/* plan */
#ven-site #plan{padding:60px 0;background:#0e0e0e}
#ven-site #plan .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#ven-site #plan .box{background:#1a1a1a;border-radius:18px;padding:18px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between}
#ven-site #plan .box__body{min-height:120px}
#ven-site #plan .box__foot{}

/* stats */
#ven-site #stats{padding:60px 0;background:#fff;color:#111}
#ven-site #stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* cta */
#ven-site #cta{background:#111;padding:32px 0;border-top:1px solid #222;border-bottom:1px solid #222}
#ven-site #cta .wrap{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}
#ven-site #cta .tel{font-size:28px;font-weight:800}

/* faq/column/press */
#ven-site #faq{padding:60px 0;background:#fff;color:#111}
#ven-site #column{padding:60px 0;background:#f9f9f9;color:#111}
#ven-site #press{padding:60px 0;background:#fff;color:#111}
#ven-site #press .list{display:block}

/* footer */
#ven-site #footer{background:#0b0b0b;color:#ddd;padding:40px 0;font-size:14px}

/* responsive (A-2 で後ほど強化) */
@media (max-width:1199px){
  #ven-site #hero .copy{max-width:60%}
  #ven-site #works .cards{grid-template-columns:repeat(2,1fr)}
  #ven-site #plan .grid{grid-template-columns:repeat(2,1fr)}
  #ven-site #stats .grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  #ven-site #hero .copy{position:static;padding:16px}
  #ven-site #works .cards{grid-template-columns:1fr}
  #ven-site #plan .grid{grid-template-columns:1fr}
  #ven-site #stats .grid{grid-template-columns:1fr}
}

  /* モーダル内ヘッダーのレイアウトと検索ボックス最適化 */
  #templateModal #searchInput {
    margin-left: 25px;
  }
  /* 表示件数UIは非表示に（契約書/利用規約の登録済み一覧用） */
  #templateModal .entries-box { display:none !important; }

    /* 検索バーの見やすさ向上（タイトル直下・横幅最大） */
  #templateModal .header-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:4px 0 12px; }
  #templateModal .header-controls .search-box{ order:1; flex:1 1 100%; }
  #templateModal .header-controls .search-box input[type="text"],
  #templateModal #searchInput{ width:100%; max-width:none; box-sizing:border-box; }

  /* 表示件数 UI は非表示（念のため） */
  #templateModal .entries-box{ display:none !important; }

  /* このモーダルだけ、上部固定＆左右センターに上書き */
#templateModal {
  position: fixed;
  top: 8vh;                 /* ← 上から固定（お好みで 6~12vh に調整） */
  left: 50%;
  transform: translateX(-50%);  /* ← 縦の -50% をやめて横だけ中央寄せ */
  right: auto;
  bottom: auto;
  /* display は書かない（JS/hidden で制御） */
  width: min(960px, 92vw);
  z-index: 1000;            /* 既存より前に出す */
}

/* 中身だけスクロールさせる（高さが変わっても本体は動かない） */
#templateModal .modal-content {
  max-height: calc(100vh - 16vh); /* 上の 8vh ×2 相当の余白を差し引く */
  overflow: auto;
  padding-bottom: 56px;           /* フッター分の余白 */
}

/* 隠す時は .hidden で確実に消す（display 指定の競合対策） */
#templateModal.hidden,
.modal.hidden {
  display: none !important;
}

/* 雛形選択ラジオボタンの文字サイズだけ14pxに */
.newform-input label {
  font-size: 14px;
}

.ai-footer-actions{ display:flex; gap:10px; }
.btn-save-black{
background:#000 !important; border-color:#000 !important; color:#fff !important;
}

.domain_change { 
    font-size: 20px; 
    font-weight: bold;
    text-align:center;
    top: 13px;
    left: 26px;
    color: #0d47a1;
}

/* ============================================
   Article Header Tools（ヘッダー右側 UI 専用）
   ※ aht- prefix = 衝突回避名
   ============================================ */

/* ▼ ヘッダー右端コンテナ（閲覧期限＋共有リンクを横並びで右寄せ） */
.aht-header-tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;        /* 右寄せ（article-tools-inner が flex） */
}

/* ▼ ボタン共通（pill型） */
.aht-btn {
  height: 23px;
  padding: 0 125px;
  border-radius: 20px;        /* pill型 */
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: -1;
  white-space: nowrap;
  gap: 6px;
  box-sizing: border-box;
}

/* ▼ ボタン共通（pill型） */
.aht-passbtn {
  height: 34px;
  padding: 0 20px;
  border-radius: 20px;        /* pill型 */
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: -1;
  white-space: nowrap;
  gap: 6px;
  box-sizing: border-box;
}

/* ▼ パスワード設定保存ボタン */
.aht-keepbtn {
  height: 25px;
  padding: 0 15px;
  border-radius: 20px;        /* pill型 */
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: -1;
  white-space: nowrap;
  gap: 6px;
  box-sizing: border-box;
}

/* ▼ 閲覧期限：通常（※ゲスト用の「保存」ボタンに使用） */
.aht-btn-expire {
  background: #F1F8FF;
  color: #005BBB;
  border: 1px solid #99C6FF;
}

/* ▼ 閲覧期限表示用コンテナ（テキスト＋保存ボタン） */
.aht-expire-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  white-space: nowrap;
  height: 34px;
  padding: 0 16px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #b5b5b5;
  box-sizing: border-box;
}

/* ▼ 閲覧期限テキスト */
.aht-expire-text {
  font-size: 15px;
  color: #000;
  font-weight: bold;          /* 太字 */
  position: relative;         /* 文字を少しだけ上に */
  top: -1px;
}

/* 閲覧権限ラベル用（PCではそのまま表示） */
.aht-expire-label {
  font-weight: normal;
}

/* ▼ 閲覧期限：残り日数（記事内の表示用） */
.aht-expire-active {
  background: #eaf3ff;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 13px;
  color: #055;
}

/* ▼ 閲覧期限：明日まで */
.aht-expire-last {
  background: #fff4d6;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 13px;
  color: #b26a00;
  font-weight: bold;
}

/* ▼ 閲覧期限：今日まで */
.aht-expire-today {
  background: #ffe6e6;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 13px;
  color: #a30000;
}

/* ▼ 共有リンク表示エリア（白いpill） */
.aht-url-box {
  display: inline-flex;
  align-items: flex-start;     /* テキスト基準で少し上寄せ */
  gap: 8px;
  height: 34px;
  padding: 6px 16px 0 16px;    /* 上を少しだけ詰める */
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #b5b5b5;
  box-sizing: border-box;
}

/* ▼ 「共有リンク：」のラベル部分（PC） */
.aht-url-label {
  font-size: 14px;
  color: #333333;
  display: inline-flex;
  align-items: center;
  margin-top: -1px;
  font-weight: bold;
}

/* ▼ 「共有リンク：」テキスト部分（EJSの .aht-url-label-text 用） */
.aht-url-label-text {
  display: inline;
}

/* ▼ 共有URL内の文字（クリック可） */
.aht-url-text {
  cursor: pointer;
  text-decoration: none;     /* 下線なし（URLだけ色で区別） */
  font-size: 13px;
  color: #008000;            /* 緑系（URL部分） */
  margin-top: 1px;
}

/* ▼ URL のドメイン／ID 部分（PC時は両方表示） */
.aht-url-domain,
.aht-url-id {
  display: inline;
}

/* ▼ クリップアイコン（/images/clip.png） */
.aht-url-clip-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ▼ コピーアイコン（point.png） */
.aht-url-copy-icon {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

/* ▼ 共有リンクボタン（※今は未使用だが既存定義は残す） */
.aht-btn-share {
  background: #ffffff;
  color: #444;
  border: 1px solid #b5b5b5;
}

.aht-btn-keep-pass {
    background: #000;
    color: #fff;
    border: 1px solid #b5b5b5;
    font-weight: bold;
}

/* ▼ パスワード設定（白いpill＋黒文字：ヘッダーの「閲覧パスワードを設定」） */
.aht-btn-pass {
  background: #ffffff;
  color: #000000;
  border: 1px solid #b5b5b5;
  font-weight: bold;
}

/* ▼ パスワードボタン内のアイコン／テキスト */
.aht-pass-icon {
  width: 18px;
  height: 18px;
  display: none;          /* PCではアイコン非表示（テキストのみ） */
}

.aht-pass-text {
  display: inline;        /* PCではテキスト表示 */
}

/* ▼ 保存（非ログイン時） */
.aht-btn-save {
  background: #000;
  color: #fff;
  border: none;
}

/* ▼ コピーしましたトースト */
#aht-copy-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #333;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  display: none;
  z-index: 9999;
}

/* ▼ パスワードモーダル */
#aht-pass-modal,
#aht-expire-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}

/* ▼ モーダル内側 */
.aht-pass-modal-inner,
.aht-expire-modal-inner {
  background: white;
  padding: 20px 24px;
  border-radius: 8px;
  width: 420px;
}

/* ▼ 入力欄（パス・期限） */
.aht-input-password,
.aht-input-expire {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* --------------------------------------------
   記事ヘッダー（ドロップダウンと干渉しないための調整）
   -------------------------------------------- */

/* ▼ header の前面度を下げる */
header {
  position: relative;
  z-index: 10050 !important;
}

/* ▼ 記事ヘッダーを前面へ（右寄せ） */
.lht-article-tools-wrapper {
  position: relative;
  z-index: 2000 !important;
  display: flex;
  justify-content: flex-end;   /* 右端に寄せる */
  align-items: center;
  gap: 16px;
  padding: 12px 20px 0 20px;
  box-sizing: border-box;
}

.lht-article-tools-wrapper .article-tools-inner {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;                 /* 行全体をヘッダー幅いっぱいにして余白を作る */
}

/* ===========================
   SP用レイアウト調整
   =========================== */
@media (max-width: 767px) {
  .aht-passbtn {
    height: 34px;
    padding: 0 15px;
  }

  /* ❹ SP のとき：閲覧権限ラベルだけ消す → 「あと◯日」だけ表示 */
  .aht-expire-label {
    display: none;
  }

  /* ❺ SP のとき：
       - 「共有リンク：」テキストを非表示
       - URL 全体を非表示
       - point.png を非表示
       → 結果：pill の中に clip アイコンだけ残る
  */

  /* 「共有リンク：」のテキスト部分 */
  .aht-url-label-text {
    display: none !important;
  }

  /* URL 全体（http://localhost:3000/app/IRmP3mtH） */
  .aht-url-text {
    display: none !important;
  }

  /* point.png を非表示 */
  .aht-url-copy-icon {
    display: none !important;
  }

  /* SP のときは pill を少し細くしてアイコンだけにフィットさせる */
  .aht-url-box {
    padding-right: 8px;
  }

  /* ゲスト用「保存」ボタン（ヘッダー右の保存）をSPだけ非表示 */
  #btn-save-header {
    display: none !important;
  }

  
  /* ▼ SP のとき：パスワードボタンは password.png だけ表示 */
  .aht-btn-pass .aht-pass-text {
    display: none;
  }

  .aht-btn-pass .aht-pass-icon {
    display: inline-block;
  }
}

/* ===== sticky header/search (20260202_fix5) ===== */
/*
  目的：
  - header
  - タイトル＆検索（.table-header）
  - 一覧tableのタイトル行（thead th）
  を3段で追尾し、被りを防ぐ
*/

:root{
  --site-header-h: 0px;
  --table-header-h: 0px;
}

/* ① ヘッダー（見た目は既存 header{} に任せる） */
body > header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100200;
}

/* ✅ SP：stickyが上に逃げる挙動を防ぐ（固定に切り替え） */
@media screen and (max-width: 767px){
  :root{
    --site-header-h: 56px; /* headerの高さ（必要なら数値だけ調整） */
  }

  body > header{
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    /*　width: 100%;　*/
    z-index: 10050;
  }

  /* ヘッダー固定分、本文を下げる（機能には触らない） */
  body{
    padding-top: var(--site-header-h) !important;
  }
}

/* ② タイトル＆検索（header の下に追尾） */
.table-header{
  position: sticky;
  top: var(--site-header-h);
  z-index: 10040;
  margin-top: 15px;
}

/* ③ 一覧tableのタイトル行（thead th を追尾） */
.table-wrapper table thead th,
table thead th{
  position: sticky;
  top: 0;
  z-index: 10030;
  /* background-color: inherit; thead/tr が透明だと逆に透けるため無効化 */
}

/* ===== title-list thead background fix (20260202_fix6) ===== */
/* 一覧ページのテーブルタイトル行が透けるのを防ぐ */
.title-list table thead th{
  background: #1e3c72;
  color: #fff;
}
/* ===== /title-list thead background fix (20260202_fix6) ===== */


/* ===== title-list inner scroll (20260202_fix7) ===== */
/* 一覧は table-wrapper 内だけスクロール（thead はその先頭に固定） */
.table-wrapper.title-list{
  position: relative;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - var(--site-header-h) - var(--table-header-h) - 20px);
  -webkit-overflow-scrolling: touch;
}
/* ===== /title-list inner scroll (20260202_fix7) ===== */


/* ===== title-list-page scroll owner (20260202_fix8) ===== */
/* 正解仕様：
   - スクロールは body / document に任せる
   - footer は document flow に従って表示
   - title-header は sticky で追尾するだけ
*/
.title-list-page{
  height: auto;
  overflow: visible;
}

/* table-wrapper は中スクロールさせない */
.title-list-page .table-wrapper.title-list{
  overflow: visible;
  height: auto;
}

/* title行は body スクロールに対して追尾 */
.title-list-page .table-header{
  margin-top: 0 !important;
  position: sticky !important;
  top: var(--site-header-h) !important;
  z-index: 10040;
}

/* h2 margin リセット */
.title-list-page .table-header .table-title{
  margin-top: 0 !important;
}
/* ===== /title-list-page scroll owner (20260202_fix8) ===== */

/* ===== /sticky header/search (20260202_fix5) ===== */


/* ===== Footer（kanritools.com 参照 / AI CMS用） ===== */

/* footer を画面最下部へ（main を伸ばして footer を押し下げる） */
html, body {
  height: 100%;
}
body {
  min-height: 100vh;
  min-height: 100svh; /* iPad/Safariのvhズレ対策 */
  display: flex;
  flex-direction: column;
}

/* iOS Safari の viewport ズレ対策（svh 未対応端末の保険） */
@supports (-webkit-touch-callout: none) {
  /* iPad/Safari：footer下の余白（スクロールできる空白）対策
     - body の padding-top（固定header分）を含めて 100svh に収める
     - height を border-box 扱いにして “余白分が足される” のを防ぐ
  */
  body {
    box-sizing: border-box;
    height: 100svh;
  }
}
  body {
    min-height: -webkit-fill-available;
  }
}
main {
  flex: 1 0 auto;
}

.site-footer {
  margin-top: auto;
  background: #555;
  color: #fff;
  padding: 25px 0 14px; /* ❹ 高さを少し低く */
  font-size: 0.8em;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

/* hoverでも下線は入れない */
.site-footer a:hover {
  text-decoration: none;
}

.site-footer .footer-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 上段：ロゴ + メイン3項目（PCは横並び / SPは縦） */
.site-footer .footer-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.site-footer .footer-logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0; /* PCでは上段に並べるので余白なし */
}

/* ❶ PCロゴサイズ */
.site-footer .footer-logo img {
  width: 80px;
  height: auto;
  display: block;
}

.site-footer .footer-main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 44px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.site-footer .footer-main-nav li {
  margin: 0;
  padding: 0;
  min-width: 220px;
  max-width: 320px;
  text-align: left;
}

.site-footer .footer-main-nav a {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.site-footer .footer-desc {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}

/* ❷ iPad 縦長だけ：メイン3項目の幅を詰める */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .site-footer .footer-main-nav li {
    min-width: 180px;
    max-width: 200px;
  }
}

/* 区切り線 */
.site-footer .footer-divider {
  margin: 12px auto 10px;
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 1100px;
}

/* 下段：法務リンク + Copyright（中央寄せ） */
.site-footer .footer-bottom {
  padding: 6px 0 6px;
}

.site-footer .footer-legal-row {
  display: flex;
  align-items: center;
  justify-content: center; /* ❸ 中央寄せ */
  gap: 16px;
}

.site-footer .footer-sub-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
}

.site-footer .footer-sub-nav a {
  white-space: nowrap;
}

.site-footer .footer-sub-nav li {
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.site-footer .footer-copy {
  margin: 0;
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
}

/* iPad mini（1024×768）だけ gap を 15px にする */
@media (width: 1024px) and (height: 768px) {
  .site-footer .footer-main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* SP */
@media (max-width: 768px) {
  .site-footer {
    padding: 16px 0 12px;
  }

  /* ❺ SPはロゴ位置は現状のまま（上段で中央） */
  .site-footer .footer-top-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .site-footer .footer-logo img {
    width: 50px;
    height: auto;
    margin: 0px 0px 5px 0;
    display: block;
  }

  .site-footer .footer-main-nav ul {
    gap: 18px;
  }

  .site-footer .footer-main-nav li {
    min-width: 260px;
    max-width: 340px;
  }

  /* ❻ SPは2行：法務リンク行 → Copyright行（中央） */
  .site-footer .footer-legal-row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .site-footer .footer-sub-nav ul {
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .site-footer .footer-sub-nav li {
    font-size: 12px;
  }

  .site-footer .footer-copy {
    text-align: center;
    width: 100%;
  }

  .confirm-modal {
    width: 60% !important;
    font-size: 0.8em;
  }

.confirm-modal button {
    min-width: 75px !important;
    height: 25px !important;
    font-size: 0.8em !important;
  }
}

/* iPad mini 縦（768×1024）だけ li 幅を調整 */
@media (width: 768px) and (height: 1024px) {
  .site-footer .footer-main-nav li {
    min-width: 200px;
    max-width: 230px;
  }
}

/* ===== /Footer ===== */

.title-list table thead th {
    background: #1e3c72;
}



.newform-btn-sub {
  background: #1e3c72 !important;
}

.newform-btn-main {
  background: #1e3c72 !important;
}

/* ===== iPad/footer + dropdown fix (20260205_fix9) ===== */
/*
  目的：
  1) iPad Safari だけ footer 下に “空白スクロール” が出るのを抑止
     - iOS Safari の動的viewportに合わせて dvh を使う
     - 影響範囲は iOS Safari のみ（@supports で限定）

  2) header のグローバルメニュー（dropdown）が .table-header の下に潜るのを解消
     - z-index と overflow のみ上書き（レイアウト/JSは触らない）
*/

/* --- 1) iPad Safari：footer下の空白対策（iOSのみ） --- */
@supports (-webkit-touch-callout: none) {
  html, body {
    height: auto !important;            /* 既存の 100% / fill-available の副作用を打ち消す */
  }
  body {
    box-sizing: border-box;             /* padding-top を高さ計算に含める */
    height: 100dvh;                     /* 動的viewportに追従（iPadの余白対策の本命） */
    min-height: 100dvh;
  }
}

/* --- 2) dropdown が table-header の下に潜らないようにする --- */
body > header {
  z-index: 300000 !important; /* table-header 等より確実に上 */
}
header, header nav, header .menu-right {
  overflow: visible !important; /* dropdown をクリップしない */
}
.dropdown-content {
  z-index: 300001 !important;  /* header 内で最前面 */
}

/* ===== /iPad/footer + dropdown fix (20260205_fix9) ===== */