body { 
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 
    background: #f8f9fa; 
    color: #333333; 
    margin: 0; 
    padding: 20px; 
    line-height: 1.6; 
}

.container { 
    max-width: 900px; 
    margin: 0 auto; 
    background: #fff; 
    padding: 24px; 
    border-radius: 4px; 
    box-shadow: 0 4px 16px rgba(15, 37, 55, 0.06); 
}

h1 { 
    font-size: clamp(14px, 8.00px + 1.56vw, 28px); 
    text-align: center; 
    color: #0f2537; 
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 10px 0 25px 0;
    position: relative;
    padding-bottom: 12px;
}
h1::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #0066cc; 
    margin: 8px auto 0 auto;
    border-radius: 2px;
}

h2 { 
    font-size: clamp(14px, 8.00px + 1.56vw, 22px); 
    margin: -10px 10px -15px 10px; 
    text-align: center; 
    color: #0f2537; 
    font-weight: 600;
}

.nav-buttons { display: flex; justify-content: space-between; margin-bottom: 25px; gap: 10px; }
.btn { 
    display: inline-block; 
    padding: 10px 22px; 
    background: #0066cc; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 3px; 
    border: none; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;
}
.btn:hover { background: #0052a3; }
.btn:active { transform: translateY(1px); }
.btn-danger { background: #d9383a; }
.btn-danger:hover { background: #b82c2e; }

.msg { padding: 12px 16px; margin-bottom: 20px; border-radius: 3px; font-weight: bold; font-size: 14px; }
.error { background: #fdf3f3; color: #d9383a; border: 1px solid #f3cfcf; }
.success { background: #f1faf5; color: #258c54; border: 1px solid #ceeadd; }

form { background: #fcfdfe; padding: 25px; border: 1px solid #e1e4e6; border-radius: 4px; margin-bottom: 35px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: flex; align-items: center; font-weight: 600; margin-bottom: 6px; color: #333; font-size: 14px; flex-wrap: wrap; gap: 4px; }

.form-group input[type="text"], .form-group input[type="url"], .form-group select, .form-group textarea { 
    width: 100%; 
    padding: 10px; 
    box-sizing: border-box; 
    border: 1px solid #ccd1d5; 
    border-radius: 3px; 
    font-size: 14px; 
    background: #ffffff;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
    outline: none;
}
.form-group textarea { height: 110px; resize: vertical; }

.captcha-box { display: inline-block; background: #0f2537; color: #fff; padding: 6px 18px; font-weight: bold; font-style: italic; letter-spacing: 5px; border-radius: 3px; margin-bottom: 8px; font-size: 18px; user-select: none; }

.item-list { margin-top: 25px; }
.item-card { 
    background: #fff; 
    border: 1px solid #e1e4e6; 
    border-left: 4px solid #0f2537; 
    border-radius: 4px; 
    padding: 18px; 
    margin-bottom: 20px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.02); 
}
.item-header { display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #edf0f2; padding-bottom: 10px; margin-bottom: 14px; gap: 8px; }
.item-tags { font-weight: bold; display: flex; flex-wrap: wrap; gap: 4px; }
.item-tags span { background: #f0f4f8; color: #0052a3; padding: 3px 10px; border-radius: 3px; font-size: 12px; border: 1px solid #d0daf0; white-space: nowrap; }

.item-title { font-size: 18px; font-weight: 700; color: #0f2537; margin: 5px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; word-break: break-all; }

.item-body { 
    display: flex; 
    flex-direction: row; 
    gap: 20px; 
    width: 100%;
    max-width: 100%;       
    box-sizing: border-box;
}

.item-photo { width: 350px; height: 250px; object-fit: cover; border-radius: 3px; border: 1px solid #e1e4e6; background: #fafafa; flex-shrink: 0; }

.item-desc { 
    flex: 1; 
    width: 100%;           
    min-width: 0;          
    white-space: normal;   
    word-break: break-all;       
    overflow-wrap: anywhere;     
    display: block;              
    color: #444; 
    font-size: 14px; 
    line-height: 1.25;     
}
.item-desc br { content: ""; margin: 0; padding: 0; }

.item-footer { margin-top: 15px; text-align: right; border-top: 1px solid #f4f6f7; padding-top: 12px; }
.delete-form { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.delete-form input[type="password"] { padding: 6px 10px; width: 110px; border: 1px solid #ccd1d5; border-radius: 3px; font-size: 13px; box-sizing: border-box; }
.delete-form input[type="password"]:focus { border-color: #0066cc; outline: none; }

.pagination { text-align: center; margin: 35px 0; font-size: 15px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.pagination a, .pagination span { padding: 6px 12px; text-decoration: none; border: 1px solid #dcdfe2; color: #0066cc; border-radius: 3px; transition: all 0.2s; white-space: nowrap; }
.pagination .current { background: #0f2537; color: #fff; border: 1px solid #0f2537; font-weight: bold; }
.pagination a:hover { background: #f0f4f8; border-color: #0066cc; }

/* 必須・任意バッジ（floatをやめ、flex/inline-blockでズレを防ぐ仕様に統一） */
.required::after {
  content: "必須";
  background-color: #fd7e00;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  margin-left: 6px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 10px;
  display: inline-block;
}

.required2::after {
  content: "任意";
  background-color: #a35405;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  margin-left: 6px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 10px;
  display: inline-block;
}


/* ============================================================================
   各メディアクエリ対応（ブレイクポイント別調整）
   ============================================================================ */

/* 1. PC大画面（1024px以上）: ゆったりとしたデスクトップ向け */
@media screen and (min-width: 1024px) {
    body { padding: 30px; }
    .container { padding: 32px; }
}

/* 2. タブレット・大（835px 〜 1023px）: 一般的なノートPC・iPad横向きなど */
@media (min-width: 835px) and (max-width: 1023px) {
    .item-photo { width: 300px; height: 214px; }
}

/* 3. タブレット・小（744px 〜 834px）: iPad縦向きなど。このサイズから横並びを縦並びに切り替え */
@media (min-width: 744px) and (max-width: 834px) {
    .item-body { flex-direction: column; gap: 15px; }
    .item-photo { width: 100%; max-width: 450px; height: 300px; margin: 0 auto; }
}

/* 4. スマホ・大（541px 〜 743px）: 横画面スマホ・小さめのタブレット */
@media (min-width: 541px) and (max-width: 743px) {
    body { padding: 15px; }
    .container { padding: 20px; }
    form { padding: 20px; }
    .item-body { flex-direction: column; gap: 15px; }
    .item-photo { width: 100%; max-width: 100%; height: auto; max-height: 320px; margin: 0 auto; }
}

/* 5. スマホ・中（441px 〜 540px）: 一般的な大きめのスマホ */
@media (min-width: 441px) and (max-width: 540px) {
    body { padding: 10px; }
    .container { padding: 16px; }
    form { padding: 16px; }
    .item-body { flex-direction: column; gap: 12px; }
    .item-photo { width: 100%; max-width: 100%; height: auto; max-height: 280px; }
    .nav-buttons { flex-direction: column; gap: 8px; }
    .nav-buttons .btn { width: 100%; }
}

/* 6. スマホ・小（391px 〜 440px）: iPhone Pro / Pro Max等 */
@media (min-width: 391px) and (max-width: 440px) {
    body { padding: 8px; }
    .container { padding: 12px; }
    form { padding: 12px; }
    .item-body { flex-direction: column; gap: 12px; }
    .item-photo { width: 100%; height: auto; max-height: 240px; }
    .nav-buttons { flex-direction: column; gap: 8px; }
    .nav-buttons .btn { width: 100%; padding: 12px 10px; }
    .delete-form { width: 100%; }
    .delete-form input[type="password"] { flex: 1; }
}

/* 7. スマホ・細（381px 〜 390px）: iPhone 12/13/14/15/16等の標準サイズ */
@media (min-width: 381px) and (max-width: 390px) {
    body { padding: 6px; }
    .container { padding: 12px; }
    form { padding: 12px; }
    .item-body { flex-direction: column; gap: 10px; }
    .item-photo { width: 100%; height: auto; max-height: 220px; }
    .nav-buttons { flex-direction: column; gap: 6px; }
    .nav-buttons .btn { width: 100%; padding: 12px 10px; }
    .delete-form { width: 100%; }
    .delete-form input[type="password"] { flex: 1; }
    .captcha-box { width: 100%; text-align: center; box-sizing: border-box; }
}

/* 8. スマホ・超細（375px 〜 380px）: iPhone SE（第2/3世代）など */
@media (min-width: 375px) and (max-width: 380px) {
    body { padding: 5px; }
    .container { padding: 10px; }
    form { padding: 12px; }
    .item-body { flex-direction: column; gap: 10px; }
    .item-photo { width: 100%; height: auto; max-height: 210px; }
    .nav-buttons { flex-direction: column; gap: 6px; }
    .nav-buttons .btn { width: 100%; padding: 12px 10px; }
    .delete-form { width: 100%; }
    .delete-form input[type="password"] { flex: 1; }
    .captcha-box { width: 100%; text-align: center; box-sizing: border-box; }
}

/* 9. スマホ・極小（374px以下）: 古い端末や極端に幅が狭い画面用（崩れを完全防御） */
@media (max-width: 374px) {
    body { padding: 4px; }
    .container { padding: 8px; }
    form { padding: 10px; }
    .item-card { padding: 12px; border-left-width: 3px; }
    .item-body { flex-direction: column; gap: 10px; }
    .item-photo { width: 100%; height: auto; max-height: 180px; }
    .nav-buttons { flex-direction: column; gap: 6px; }
    .nav-buttons .btn { width: 100%; padding: 12px 10px; font-size: 13px; }
    .delete-form { width: 100%; }
    .delete-form input[type="password"] { flex: 1; width: 100%; }
    .delete-form .btn { width: 100%; }
    .captcha-box { width: 100%; text-align: center; box-sizing: border-box; letter-spacing: 3px; }
    .pagination a, .pagination span { padding: 5px 8px; font-size: 13px; }
}