/* --- 基本スタイル（変更なし） --- */
body {
    background-color: #D2B48C;
}
h1 {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    font-weight: bold; /* フォントを太字にする */
    color: #333; /* タイトル色を濃いグレーに */
}
.logo-link a {
    color: inherit;
}
/* 検索フォームのゴミ袋デザイン */
.search-form-wrapper {
    max-width: 950px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem; /* 下のマージンを調整 */
}
/* 町域名リンクのスタイルをフォームに適用 */
.search-form-arc {
    padding: 2.5rem 2rem 2.5rem 2rem; /* パディングを少し広げて調整 */
    text-align: left; /* テキストを左寄せに戻す */
}
/* フォーム内のセレクトボックスのスタイル調整 */
.search-select {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #b3d1ff; /* 輪郭の色をゴミ袋に合わせる */
}
/* 検索ボタンのスタイル調整 */
.search-btn {
    background-color: #b3d1ff;
    color: #343a40;
    font-weight: bold;
    border: 1px solid #b3d1ff;
}
.search-btn:hover {
    background-color: #9ac2ff;
    border-color: #9ac2ff;
}
/* レスポンシブデザイン調整 */
@media (max-width: 768px) {
    /* h1 { font-size: 1.1rem; } */
    .calendar-cell { height: 28px; font-size: 0.65rem; }
    .garbage-badge { font-size: 0.55rem; padding: 0.08em 0.15em; }
    .level-card { padding: 0.7rem; }
    .level-card h2 { font-size: 1rem; }
    .level-card .btn-lg { padding: 0.5rem 1rem; font-size: 0.9rem; }
}
.calendar-cell {
    height: 40px; min-width: 1px; width: 1%; vertical-align: middle;
    padding: 1px; font-size: 0.8rem; word-break: break-word; white-space: normal;
}
.garbage-badge {
    min-width: 1px; font-size: 0.7rem; padding: 0.1em 0.3em;
    max-width: 100%; overflow-wrap: break-word; display: inline-block; white-space: normal;
}
.garbage-badge.invisible { visibility: hidden; }
.table { width: 100% !important; table-layout: fixed; background-color: transparent; }
th, td { padding: 2px !important; word-break: break-word; white-space: normal; }
.level-card {
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    background-color: #D2B48C;
    border: 3px solid #6c757d;
}
.level-card h2 {
    color: #fff; /* 見出し文字を白に変更 */
    margin-bottom: 1.8rem;
    font-size: 1.8rem;
    text-align: center;
    border-bottom: 2px solid #fff; /* 下線も白に変更 */
    padding-bottom: 0.8rem;
}
.level-card .btn-lg,
.level-card .btn-outline-primary {
    /* ボタンのスタイルを調整 */
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #6c757d;
    color: #343a40;
}
.level-card .btn-lg:hover,
.level-card .btn-outline-primary:hover {
    background-color: #fff;
    color: #343a40;
}
/* スマホ画面用のさらに細かい調整 */
@media (max-width: 576px) {
    .container { padding: 0.5em 0.1em !important; }
    /* h1 { font-size: 1.2rem; } */
    .calendar-cell { height: 32px; font-size: 0.7rem; padding: 0.5px; }
    .garbage-badge { font-size: 0.6rem; padding: 0.1em 0.2em; }
    th, td { padding: 1px !important; }
    .level-card { padding: 1rem; }
    .level-card h2 { font-size: 1.2rem; }
    .level-card .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
    .card.p-4 {
        padding: 0.7rem !important; /* 検索フォームの余白を減らす */
    }
    .form-label {
        font-size: 0.9rem; /* ラベルの文字サイズを小さく */
        margin-bottom: 0.1rem;
    }
    .form-select {
        font-size: 0.9rem; /* セレクトの文字サイズを小さく */
        padding: 0.18rem 0.4rem; /* ← 0.25rem 0.5rem → 0.18rem 0.4rem に変更 */
        min-height: 1.7rem;      /* ← 2rem → 1.7rem に変更 */
        margin-bottom: 0.2rem;   /* ← セレクト下の余白を追加・狭く */
    }
    .btn {
        font-size: 0.95rem;
        padding: 0.4rem 0.8rem;
    }
    .row.g-2 > [class*="col-"] {
        margin-bottom: 0.3rem;
    }
    .level-card .links-container {
        gap: 0.75rem !important;
    }
    .level-card .link-item {
        width: calc(50% - 0.75rem) !important;
        min-width: unset !important;
    }
}
.card.p-4,
.level-card {
    max-width: 950px;      /* ゴミ箱本体と同じ幅に統一 */
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* --- ▼▼▼ ここから最終版ゴミ箱デザインのスタイル ▼▼▼ --- */
/* ゴミ箱全体を配置するラッパー */
.garbage-pail-wrapper {
    max-width: 1000px; /* 800→1000pxに拡大 */
    margin: 3rem auto;
    position: relative;
}
/* ラッパーの擬似要素で地面に落ちる影を表現 */
.garbage-pail-wrapper::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    z-index: -1;
}
/* ゴミ箱の蓋 */
.garbage-can-lid {
    position: relative;
    background: linear-gradient(to bottom, #6c757d, #343a40);
    border-bottom: 4px solid #212529;
    border-radius: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    padding: 1rem 2rem;
    margin-bottom: 0.3rem; /* 少し余白を増やす */
    cursor: default; /* pointer → default に変更 */
    transition: none; /* アニメーションを無効化 */
    width: 95%; /* 幅を広げる */
    max-width: 950px; /* 最大幅を指定 */
    margin-left: auto;
    margin-right: auto;
}
.garbage-can-lid:hover {
    transform: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 蓋の取手（アーチ状・上側中央） */
.garbage-can-handle {
    width: 80px;           /* 横幅は蓋の幅に合わせて調整 */
    height: 40px;          /* 高さを大きめに */
    background: transparent;
    border: 10px solid #9fa5aa;
    border-bottom: none;   /* 下側の線を消す */
    border-radius: 40px 40px 0 0; /* 上側だけ丸く（半円） */
    margin: 0 auto;
    position: absolute;
    top: -30px;            /* 蓋の上に配置（調整） */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    z-index: 2;
}
/* ゴミ箱本体（カレンダー） */
.garbage-can-container {
    border:  4px solid #6c757d;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2), inset 3px 0 10px rgba(255,255,255,0.7);
    border-radius: 28px 28px 60px 60px; /* 角を少し丸く */
    background: linear-gradient(135deg, #d8dde8 0%, #f0f2f5 100%);
    padding: 1.5rem 1.5rem 2rem 1.5rem; /* パディングを広げる */
    width: 95%; /* 幅を広げる */
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}
.garbage-can-body {
    overflow: visible;
    border-radius: 12px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
/* 地域名ヘッダー */
.garbage-can-body .card-header {
    background-color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.table, .table-bordered, .table-bordered th, .table-bordered td {
    border-color: #6c757d !important; /* 蓋と同じ色に統一 */
}
/* 曜日ヘッダー */
.table > thead th {
    background: linear-gradient(to bottom, #6c757d, #343a40) !important; /* 蓋と同じ色 */
    color: #fff !important; /* 文字色を白に */
    border-bottom: 1px solid #6c757d !important;
}
/* カレンダーのセル */
.table td.calendar-cell {
    /* background-color: rgba(255, 255, 255, 0.7); */
    border: 1px solid #6c757d;
    /* transition: all 0.2s ease; */
}
.table td.calendar-cell:hover {
    /* 不要な浮き出し効果を削除 */
    background-color: inherit;
    transform: none;
    box-shadow: none;
    z-index: auto;
    position: static;
}
/* 今日の日付 */
.table td.table-primary {
    background-color: #cfe2ff !important;
    border-color: #0d6efd !important;
    /* background-color: #bedf4fff !important;
    border-color: #e5d11dff !important; */
    font-weight: bold;
}
/* 町域名リンク用のアーチ状デザイン */
.link-wrapper {
    max-width: 950px;
    width: 95%;
    margin: 2rem auto; /* 上下の余白を調整 */
    position: relative;
}
.link-wrapper::after {
    content: '';
    position: absolute;
    bottom: -5px; /* 影の位置を調整 */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 10px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    z-index: -1;
}
.link-arc {
    position: relative;
    /* 水色と薄いグレーのグラデーションでごみ袋の色を表現 */
    background: linear-gradient(to bottom, #d6eaff, #f0f8ff);
    /* 輪郭の色を、ごみ袋の質感に合うように変更 */
    border: 4px solid #b3d1ff;
    /* border-radius: 15px 15px 60px 60px; */
    border-radius: 90px 90px 90px 90px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    padding: 1.5rem 2rem 2rem 2rem;
    cursor: pointer;
    text-align: center;
    color: #343a40; /* 文字色を濃いグレーに変更して視認性を上げる */
    font-weight: bold;
    font-size: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.link-arc:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
/* 町域名リンクの取っ手を下向き三角形に変更 */
.link-arc-handle {
    /* 既存のスタイルは変更なし */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 30px 0 30px;
    border-color: #b3d1ff transparent transparent transparent;
    margin: 0 auto;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
/* V字を表現する白い三角形（親要素の::beforeを利用） */
.link-arc-handle::before {
    content: '';
    position: absolute;
    /* topとleftを調整して、親要素（水色三角形）の上辺に合わせる */
    top: -25px;
    left: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    /* 親要素より少し小さくする */
    border-width: 5px 20px 0 20px;
    border-color: #D2B48C transparent transparent transparent; /* 白色に設定 */
    z-index: 3;
}
/* 町域名リンクを囲むコンテナのスタイル */
.links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem; /* リンク間の隙間を広げる */
}
.link-item {
    text-decoration: none; /* 下線を削除 */
    color: inherit;
    width: calc(33.333% - 1.5rem); /* 1行に3つ配置する例 */
    min-width: 200px; /* 最小幅を設定してモバイル対応 */
}
footer {
    text-align: center;
}