body {
  font-family: sans-serif;
  margin: 2em;
  background: #fafbfc;

  -webkit-appearance: none;   /* --------20250912追加  iPhone8 レイアウト崩れ対策テスト  --------*/
  -webkit-text-size-adjust: 100%; 

}
/* 全てのサムネイル画像にアスペクト比・カーソル・ホバー効果 */
/* サムネイル枠1:1で画像は中央寄せ、比率はそのまま */
/* .cp-imglist {
/*   display: flex;
/*   gap: 4px;
/*   flex-wrap: wrap;
/*   justify-content: center;
/* }
*/


/* 管理画面テーブル等は元の記述もそのまま併用OK */
.cp-table th, .cp-table td { border: 1px solid #ccc; padding: 0.3em 0.5em; text-align: center; height: 34px;}
.cp-table th { background: #f7f7f7; }
.cp-table td.title-col { width: 110px; max-width: 140px; }
.cp-table td.content-col { width: 320px; max-width: 400px; text-align:left; }
.cp-table th.dt, .cp-table td.dt, .cp-table th.user, .cp-table td.user { width:50px; min-width:38px; max-width:70px;}
/* .cp-imglist { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }*/
/* .cp-imglist img { width:34px; height:34px; object-fit:cover; border-radius:5px; border:1px solid #ddd;}*/
.edit-thumb {
  position: relative;
  display: inline-block;
  margin-right: 6px;
  cursor: grab;
  transition: box-shadow .2s;
}
.edit-thumb:active { box-shadow: 0 0 5px #1976d2; }
.img-del {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  padding: 1px 3px;
  box-shadow: 0 1px 4px #0002;
  opacity: 0.7;
  transition: opacity .2s;
}
.edit-thumb:hover .img-del { opacity: 1; }



/*--------「トップ画面」index.html　ここから----------*/
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5em;
  padding: 0;
}
.card {
  background: #fff;
  border: 1px solid #d7dde4;
  border-radius: 16px;
  box-shadow: 0 2px 8px #0001;
  padding: 1.2em;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 600px;
  margin: auto;
}
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: .7em;
}
.card-header img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1em;
  border: 1px solid #eee;
}
.card-userinfo {
  display: flex;
  flex-direction: column;
}
.card-userinfo .name {
  font-weight: bold;
  font-size: 1.1em;
}
.card-userinfo .date {
  font-size: .95em;
  color: #888;
}
.card-img {
  margin: .6em 0;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  max-height: 220px;
}
.card-content {
  font-size: 1em;
  line-height: 1.7;
  margin-bottom: 1em;
}
.card-actions {
  display: flex;
  align-items: center;
  gap: 1.5em;
  color: #555;
  margin-bottom: .3em;
}
.card-actions .icon {
  margin-right: .3em;
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .card { padding: .8em; }
}
/*--------「トップ画面」index.html　ここまで----------*/



/*--------「管理画面」CP.html　ここから----------*/
.cp-table th, .cp-table td {
  border: 1px solid #ccc; 
  padding: 0.3em 0.5em;
  text-align: center;
  height: 38px;
}
.cp-table td.title-col { width: 110px; max-width: 140px; }
.cp-table td.content-col { width: 320px; max-width: 400px; text-align:left; }

.cp-table th, .cp-table td { height: 32px; font-size: 0.93em; }
.cp-table th.dt, .cp-table td.dt, .cp-table th.user, .cp-table td.user { width:50px; min-width:38px; max-width:70px;}
/* .cp-imglist { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }*/
/* .cp-imglist img { width:34px; height:34px; object-fit:cover; border-radius:5px; border:1px solid #ddd;}*/

/*--------「管理画面」CP.html　ここまで----------*/


/*--------「未使用画像削除」cleanImages.php　ここから----------*/
body{font-family:sans-serif;}
    .img-table { border-collapse:collapse; margin:2em auto; width:98%; }
    .img-table th, .img-table td { border:1px solid #bbb; padding:4px 7px; text-align:center; font-size:0.97em; }
    .img-table th { background:#f5f8fa; }
    .img-table img { width:54px; height:54px; object-fit:cover; border-radius:5px; border:1px solid #ccc; cursor:zoom-in; }
    .filter-panel{margin-bottom:1em;}
    .sort-ind { font-size: 0.9em; color:#bbb; }
    .sort-ind.active { color:#000; }
    .used-ok { color:#6cbf60;}
    .unused-warn { color:#e65a3a;}
    .btn { padding:2px 12px; border-radius:7px; border:1px solid #888; background:#f7f7f7; cursor:pointer;}
    .btn-red { background:#ffe5e5; color:#c22;}
    .btn-green { background:#d6f3d0; color:#176c12;}
    .sticky-thead th { position:sticky; top:0; background:#f5f8fa; z-index:1; }
    #imgPreviewModal {display:none;position:fixed;z-index:9999;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.55);align-items:center;justify-content:center;}
    #imgPreviewModal.show { display:flex; }
    #imgPreviewBig {max-width:88vw;max-height:82vh;border-radius:13px;box-shadow:0 0 32px #0007;}
    #imgPreviewModal span {position:absolute;top:20px;right:30px;font-size:2em;color:#fff;cursor:pointer;}
.sort-ind { color:#bbb; } .sort-ind.active { color:#000; font-weight:bold; }


/*--------「未使用画像削除」cleanImages.php　ここまで----------*/


.cp-imglist img, .edit-thumb img, .img-table img, .card-img {
  width: 34px;
  height: 34px;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 7px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: zoom-in;
  transition: box-shadow .2s, outline .2s;
  display: block;
  /*margin: auto;*/
}
.cp-imglist img:hover, .edit-thumb img:hover, .img-table img:hover, .card-img:hover {
  box-shadow: 0 0 8px #2196f399;
  outline: 2px solid #2196f380;
}





.img-preview-close-btn {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  background: rgba(0,0,0,0.32);
  border-radius: 50%;
  padding: 0.1em 0.3em;
  transition: background .2s;
  line-height: 1;
  border: none;
}
.img-preview-close-btn:hover {
  background: rgba(255,255,255,0.33);
  color: #111;
}






/*--------「投稿画面」post.html　ドラッグ＆ドロップ式+ファイル式　画像選択　ここから----------*/
.edit-thumb {
  position: relative;
  display: inline-block;
  margin-right: 6px;
  cursor: grab;
  transition: box-shadow .2s;
}
.edit-thumb:active { box-shadow: 0 0 5px #1976d2; }
.img-del {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  padding: 1px 3px;
  box-shadow: 0 1px 4px #0002;
  opacity: 0.7;
  transition: opacity .2s;
}
.edit-thumb:hover .img-del { opacity: 1; }
.edit-thumb img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 7px;
  border: 1px solid #ccc;
  background: #fff;
}
/*--------「投稿画面」post.html　ドラッグ＆ドロップ式+ファイル式　画像選択　ここまで----------*/



/*--------「投稿画面」post.html　各種ファイルのアップロード時のプレビュー　ここから----------*/
/* ファイルプレビュー用のスタイル */
/* ファイルプレビュー用のスタイル */
.edit-thumb {
  position: relative;
  width: 90px;
  height: 90px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 画像プレビュー */
.edit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

/* 文書ファイルプレビュー */
.file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
  height: 100%;
  width: 100%;
}

.file-preview img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  margin-bottom: 2px;
}

.file-name {
  font-size: 10px;
  font-weight: bold;
  color: #333;
  margin-bottom: 1px;
  line-height: 1.1;
  word-break: break-all;
}

.file-size {
  font-size: 9px;
  color: #666;
  line-height: 1;
}

/* 削除ボタン */
.img-del {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.img-del:hover {
  background: #ff4444;
  color: white;
  border-color: #ff4444;
}

/* ドロップゾーンの改善 */
#dropZone {
  transition: all 0.3s ease;
}

#dropZone:hover {
  border-color: #1976d2;
  background-color: #e3f2fd;
}

/* ファイルリストの配置 */
#imgList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1em 0;
  min-height: 40px;
  padding: 8px;
  border: 1px dashed #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
}

#imgList:empty::before {
  content: "選択されたファイルがここに表示されます";
  color: #999;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .edit-thumb {
    width: 80px;
    height: 80px;
  }
  
  .file-preview img {
    width: 28px !important;
    height: 28px !important;
  }
  
  .file-name {
    font-size: 9px;
  }
  
  .file-size {
    font-size: 8px;
  }
}
/*--------「投稿画面」post.html　各種ファイルのアップロード時のプレビュー　ここまで----------*/


/* 管理画面：文書ファイル表示用スタイル */
.cp-doclist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 150px;
  max-height: 120px;
  overflow-y: auto;
}

.cp-doc-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  font-size: 11px;
  transition: background-color 0.2s;
}

.cp-doc-item:hover {
  background: #e9ecef;
}

.cp-doc-item .file-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.cp-doc-item .file-name {
  flex: 1;
  color: #333;
  word-break: break-all;
  line-height: 1.2;
}

.cp-doc-item .download-btn {
  font-size: 12px;
  text-decoration: none;
  color: #1976d2;
  padding: 2px 4px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.cp-doc-item .download-btn:hover {
  background: #e3f2fd;
}

/* テーブル列幅の調整 */
.cp-table th:nth-child(4),
.cp-table td:nth-child(4) {
  width: 150px;
  max-width: 150px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .cp-doclist {
    max-width: 100px;
  }
  
  .cp-doc-item {
    font-size: 10px;
    padding: 3px 4px;
  }
  
  .cp-doc-item .file-icon {
    font-size: 12px;
  }
}
    

/* 文書ファイル編集用のスタイル */
.edit-doc-item {
  display: flex;
  align-items: center;
  padding: 0.5em;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 0.5em;
  background: #f9f9f9;
  transition: background-color 0.2s;
}

.edit-doc-item:hover {
  background: #f0f0f0;
}

.edit-doc-item .file-icon {
  margin-right: 0.5em;
  font-size: 1.2em;
}

.edit-doc-item .file-name {
  flex: 1;
  margin-right: 0.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-doc-item .file-size {
  color: #666;
  margin-right: 0.5em;
  font-size: 0.8em;
  white-space: nowrap;
}

.doc-del-btn {
  background: #ff4444 !important;
  color: white !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 0.2em 0.5em !important;
  cursor: pointer !important;
  font-size: 0.8em !important;
  transition: background-color 0.2s !important;
}

.doc-del-btn:hover {
  background: #cc3333 !important;
}

/* 編集モーダル内の画像サムネイル */
.edit-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: move;
}

.edit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-thumb .img-del {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4444;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

.edit-thumb .img-del:hover {
  background: #cc3333;
}
    
    
/* 文書ファイル編集用のスタイル */
.edit-doc-item {
  display: flex;
  align-items: center;
  padding: 0.5em;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 0.5em;
  background: #f9f9f9;
  transition: background-color 0.2s;
}

.edit-doc-item:hover {
  background: #f0f0f0;
}

.edit-doc-item .file-icon {
  margin-right: 0.5em;
  font-size: 1.2em;
}

.edit-doc-item .file-name {
  flex: 1;
  margin-right: 0.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-doc-item .file-size {
  color: #666;
  margin-right: 0.5em;
  font-size: 0.8em;
  white-space: nowrap;
}

.doc-del-btn {
  background: #ff4444 !important;
  color: white !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 0.2em 0.5em !important;
  cursor: pointer !important;
  font-size: 0.8em !important;
  transition: background-color 0.2s !important;
}

.doc-del-btn:hover {
  background: #cc3333 !important;
}

/* 編集モーダル内のファイルサムネイル（画像と文書ファイル両方） */
.edit-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: move;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.edit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文書ファイルプレビュー用スタイル */
.edit-thumb .file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
  height: 100%;
  width: 100%;
}

.edit-thumb .file-preview img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  margin-bottom: 2px;
}

.edit-thumb .file-name {
  font-size: 10px;
  font-weight: bold;
  color: #333;
  margin-bottom: 1px;
  line-height: 1.1;
  word-break: break-all;
}

.edit-thumb .file-size {
  font-size: 9px;
  color: #666;
  line-height: 1;
}

.edit-thumb .img-del {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4444;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

.edit-thumb .img-del:hover {
  background: #cc3333;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .edit-thumb {
    width: 70px;
    height: 70px;
  }
  
  .edit-thumb .file-preview img {
    width: 28px !important;
    height: 28px !important;
  }
  
  .edit-thumb .file-name {
    font-size: 9px;
  }
  
  .edit-thumb .file-size {
    font-size: 8px;
  }
}



/* ===================================================================
 * 投稿ページ (post.php) シンプルレイアウト
 * ================================================================ */

/* --- ページ全体のレイアウト（中央揃え） --- */
.post-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: #f4f4f4;
  padding: 0.5rem 0.5rem;
}

/* --- フォームコンテナ（カード） --- */
.post-container {
  width: 100%;
  background-color: #ffffff;
  padding: 0.6rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  /* スマホ・タブレット用の基本の横幅 */
  max-width: 720px;
}

/* ===================================================================
 * PC表示用の設定 (横幅を広げる)
 * ================================================================ */
@media (min-width: 992px) {
  .post-container {
    /* PC表示の時だけ、フォーム全体の横幅を広げる */
    max-width: 700px;
  }
}

/* --- ヘッダー --- */
.post-header h1 {
  text-align: center;
  font-size: 1.6rem;
  color: #005daa;
  margin-top: 0.5rem;
  margin-bottom: -0.5rem;
}

/* --- フォームの各パーツ --- */
.post-form .form-group {
  margin-bottom: 0.7rem;
}

.post-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
  color: #333;
}

.post-form input[type="text"],
.post-form textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box; /* ← 正しいのはこの一行 */
}

.post-form input[type="text"]:focus,
.post-form textarea:focus {
  outline: none;
  border-color: #005daa;
  box-shadow: 0 0 0 3px rgba(0, 93, 170, 0.2);
}

/* --- ファイルドロップゾーン --- */
#dropZone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  background: #fafafa;
  color: #666;
  transition: border-color 0.3s, background-color 0.3s;
}
#dropZone:hover {
  border-color: #005daa;
  background-color: #f0f6fc;
}
#dropZone input[type="file"] {
  display: none;
}
.dragdrop {
  font-size:1.0rem;
  font-weight:500;
  color:#005daa;;
}
.file-input-label {
  width:50%;
  margin:0 auto;
  padding-top:1.0rem;
  color: #005daa;
  text-decoration: none;
  cursor: pointer;
  font-weight: normal !important;
}


/* --- フォームボタン --- */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center; /* ボタンを右寄せ */
  margin-top: 1.5rem;
}

/* ▼▼▼ 以下の抜けていたコードを追記してください ▼▼▼ */
.btn {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn-primary {
  background-color: #005daa;
  color: #ffffff;
}

.btn-secondary {
  background-color: #e0e0e0;
  color: #333;
}
/* ▲▲▲ ここまで追記 ▲▲▲ */









/* ===================================================================
 * 管理画面 (CP.php) デザイン改善 (最終完成版)
 * ================================================================ */

/* --- ページ全体の基本設定 --- */
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #f0f2f5;
  color: #333;
  margin: 0;
  line-height: 1.5;
  font-size: 13.5px;
}

/* --- コンテナ --- */
.cp-container {
  max-width: 100%;
  margin: 1.2rem;
  padding: 1.2rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- ヘッダー --- */
.cp-header {
  margin-bottom: 1.2rem;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0.8rem;
}
.cp-header h1 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin: 0 0 0.25rem 0;
}
.cp-header p {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin: 0;
}

/* --- メインコンテンツ --- */
.cp-main {
  overflow-x: auto;
}

/* --- モダンなテーブルデザイン --- */
.cp-table {
  width: 100%;
  border-collapse: collapse;
  /* テーブルのレイアウト計算方法を指定し、widthの影響を明確にする */
  table-layout: fixed;
}
.cp-table th, 
.cp-table td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  vertical-align: top; /* 基本は上揃え */
  border-bottom: 1px solid #e9ecef;
  word-wrap: break-word; /* 長い単語でも折り返すように */
}
.cp-table th {
  background-color: #f8f9fa;
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
  vertical-align: middle; /* ヘッダーは中央揃え */
}
.cp-table tbody tr:hover {
  background-color: #f1f3ff;
}
.cp-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- サムネイルリストの設定 --- */
.cp-imglist, .cp-doclist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
  width: 240px; /* (画像34px * 5) + (隙間4px * 4) = 186px */
}
/* サムネイル画像自体のスタイル */
.cp-imglist img { 
  width:40px; 
  height:40px; 
  object-fit:cover; 
  border-radius:2px; 
  border:1px solid #ddd;
}


/* --- タイトル・本文のスタイル --- */
.post-title {
  font-weight: 700;
  color: #34495e;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.post-content {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* --- 操作ボタンのデザイン --- */
.cp-btn {
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.cp-btn-edit { background-color: #3498db; color: white; }
.cp-btn-edit:hover { background-color: #2980b9; }
.cp-btn-del { background-color: #e74c3c; color: white; }
.cp-btn-del:hover { background-color: #c0392b; }


/* --- ★テーブル全体の列幅を最終調整 --- */

/* ===================================================================
 * 管理画面 (CP.php) テーブル列幅の調整（並び替え機能対応版）
 * ================================================================ */

/* 「順序」列：ドラッグハンドル */
.cp-table th:nth-child(1),
.cp-table td:nth-child(1) {
  width: 40px;
  text-align: center;
  vertical-align: middle;
}

/* 「投稿日時」列：固定幅 */
.cp-table th:nth-child(2),
.cp-table td:nth-child(2) {
  width: 85px;
  text-align: center;
  vertical-align: middle;
}

.cp-table td:nth-child(2) {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.4;
}

/* 「画像」列：幅を広めに（270px） */
.cp-table th:nth-child(3),
.cp-table td:nth-child(3) {
  width: 270px;
  text-align: center;
  vertical-align: middle;
}

/* 「文書ファイル」列：幅を短めに（180px） */
.cp-table th:nth-child(4),
.cp-table td:nth-child(4) {
  width: 180px;
  text-align: center;
  vertical-align: middle;
}

/* 「タイトル・本文」列：横幅の45% */
.cp-table th:nth-child(5),
.cp-table td:nth-child(5) {
  width: 45%;
  text-align: left;
  vertical-align: middle;
}

/* 「タグ」列：自動幅 */
.cp-table th:nth-child(6),
.cp-table td:nth-child(6) {
  width: auto;
  text-align: left;
  vertical-align: middle;
}
/* ===================================================================
 * タグ列の一時的な非表示（CP.php）
 * 後日復活させる場合は、このセクションをコメントアウトまたは削除してください
 * ================================================================ */

/* タグ列（6番目の列）を非表示 */
.cp-table th:nth-child(6),
.cp-table td:nth-child(6) {
  display: none !important;
}



/* 「編集」列：固定幅80px・天地左右中央 */
.cp-table th:nth-child(7),
.cp-table td:nth-child(7) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

/* 「削除」列：固定幅80px・天地左右中央 */
.cp-table th:nth-child(8),
.cp-table td:nth-child(8) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

/* 編集・削除ボタンを中央配置 */
.cp-table td:nth-child(7) .cp-btn,
.cp-table td:nth-child(8) .cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.cp-table td:first-child {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.4;
}

/* 「画像」「文書ファイル」列：コンテンツに合わせた可変幅 */
.cp-table th:nth-child(2),
.cp-table td:nth-child(2),
.cp-table th:nth-child(3),
.cp-table td:nth-child(3) {
  width: 230px; /* (サムネイル188px + 両側padding) の幅を確保 */
  text-align: center;
  vertical-align: middle;
}

/* 「タイトル・本文」列：残りのスペースを全て使用する */
.cp-table th:nth-child(4),
.cp-table td:nth-child(4) {
  width: auto; /* autoを指定して、残りの幅を全て使うように指定 */
  text-align: left;
}

/* 「編集」「削除」列：固定幅 */



/* --- スマートフォン表示への対応 --- */
@media (max-width: 768px) {
  body {
    font-size: 13px;
  }
  .cp-container {
    margin: 0.5rem;
    padding: 0.8rem;
  }
}

/* ==== CP.php 管理テーブル：編集・削除 ==== */

/* 全体：セルの天地中央寄せ */
.cp-table td {
  vertical-align: middle;
}

/* 編集・削除セル：幅と中央揃え */
.cp-table td:nth-child(6),
.cp-table td:nth-child(7) {
  width: 80px;             /* 修正と削除のセル幅を統一 */
  text-align: center;      /* 横中央 */
  padding: 0;              /* 余白を削除 */
}

/* ボタンを中央に配置 */
.cp-table td:nth-child(6) .cp-btn,
.cp-table td:nth-child(7) .cp-btn {
  display: inline-flex;
  align-items: center;     /* 縦中央 */
  justify-content: center; /* 横中央 */
  margin: auto;
}

/* ==== 編集・削除セルの幅を統一 ==== */

/* 編集・削除列：同じ幅を設定 */
.cp-table th:nth-child(6),
.cp-table th:nth-child(7),
.cp-table td:nth-child(6),
.cp-table td:nth-child(7) {
  width: 80px;       /* 必要に応じて調整可能 */
  min-width: 80px;
  max-width: 80px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}



/* ===== サムネイルを正方形に固定（左側の小画像用） ===== */
.auto-post-widget .apw-item img {
  width: 120px;              /* 好きな幅に調整可 */
  height: 120px;             /* 正方形に固定 */
  object-fit: contain;       /* 画像全体を収める */
  aspect-ratio: 1 / 1;       /* 念のため比率を指定 */
  display: block;
}


/* ===================================================================
 * 投稿一覧の並び替え機能用スタイル（CP.php）
 * ================================================================ */

/* ドラッグハンドル列のスタイル */
.drag-handle-col {
  width: 40px;
  text-align: center;
  background-color: #f8f9fa;
}

/* ドラッグハンドル（☰アイコン）のスタイル */
.drag-handle {
  cursor: move; /* ドラッグ可能なカーソル表示 */
  user-select: none; /* テキスト選択を無効化 */
  transition: all 0.2s ease;
}

.drag-handle:hover {
  background-color: #e9ecef; /* ホバー時の背景色 */
}

.drag-handle:active {
  background-color: #dee2e6; /* クリック時の背景色 */
}

/* SortableJSによるドラッグ中のスタイル */
.sortable-ghost {
  opacity: 0.4; /* ドラッグ元の行を半透明に */
  background-color: #e3f2fd !important; /* 薄い青色 */
}

.sortable-chosen {
  background-color: #bbdefb !important; /* 選択中の行を青色に */
}

.sortable-drag {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; /* ドラッグ中に影をつける */
  border: 2px solid #1976d2 !important; /* 青い枠線 */
}

/* テーブル行のトランジション効果 */
.cp-table tbody tr {
  transition: background-color 0.2s ease;
}

/* 保存成功メッセージのアニメーション */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* レスポンシブ対応：スマホでのドラッグハンドル */
@media (max-width: 768px) {
  .drag-handle-col {
    width: 35px;
  }
  
  .drag-handle span {
    font-size: 1.1em !important;
  }
}