:root {
    --bs-primary: #0D6EFD; /* 防災ブルー（視認性良・信頼感） */
    --bs-secondary: #6C757D; /* スレートグレー（中性・落ち着き） */
    --bs-success: #28A745; /* セーフティグリーン（避難・安全） */
    --bs-info: #17A2B8; /* 防災シアン（情報） */
    --bs-warning: #F0AD4E; /* ハザードオレンジ（警戒） */
    --bs-danger: #D9534F; /* エマージェンシーレッド（警報） */
    /* 背景と文字色の調整 */
    --bs-body-bg: #FFFFFF; /* 災害時読みやすい明るいグレー */
    --bs-body-color: #212529;
    /* ボーダーなどによく使う中間色 */
    --bs-border-color: #CED4DA;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}



body {
    margin-bottom: 60px;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* 通常時のNavbar */
.navbar {
    background-color: #0B4C8C !important;
    color: #fff;
}

/* 緊急時の切り替え用 */
.navbar.emergency {
    background-color: #D9534F;
    color: #fff;
}

.sidebar {
    background-color: #F7F7F7; /* 白より少し暗めのグレー */
}

.sidebar {
    width: 250px;
    min-height: 100vh; /* 画面全体の高さ */
    background-color: #F7F7F7; /* サイドバーの淡いグレー */
    border-right: 1px solid #DEE2E6; /* 境界線 */
}

.sidebar-title {
    background-color: #E9ECEF; /* 少し濃いグレー（Bootstrapのlight系） */
    color: #333; /* 文字は濃いグレーで視認性UP */
    border-bottom: 1px solid #CED4DA;
    font-size: 0.95rem;
}

.sidebar .nav-link {
    color: #0D6EFD;
}

.sidebar .nav-link.active {
    background-color: #D9534F;
    color: #FFFFFF !important;
}

.sidebar .nav-link:hover {
    background-color: #0B4C8C;
    color: #FFFFFF !important;
}

.sidebar .nav-link,
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    border-radius: 0 !important; /* 角丸を完全に無効 */
    transition: none !important; /* hover時のアニメーションを無効化 */
}

/* アコーディオンが開いている（= collapsed が付いていない）とき */
.accordion-button:not(.collapsed) {
    background-color: #d9f5d9 !important; /* お好きな色 */
    color: #000 !important;
}

/* 開いているときのボーダー色も変えたい場合（任意） */
.accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.table td, .table th {
    white-space: normal !important;
    word-break: break-all;
}

.display-7 {
    font-size: 1.1rem; /* 約17.6px */
    font-weight: 400;
    line-height: 1.3;
}

.display-8 {
    font-size: 1rem; /* 16px（通常文字よりやや強調） */
    font-weight: 500;
    line-height: 1.4;
}

.home-bg {
    min-height: 100vh;
    background-image: url('../img/backimg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-panel {
    background-color: rgba(255, 255, 255, 0.85); /* 半透明白 */
    max-width: 1024px;
}

@keyframes blinkText {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.blink-text {
    animation: blinkText 1.5s ease-in-out infinite;
}

.kubun-badge {
    display: inline-block;
    width: 7em; /* ← 適宜調整（例：7文字分） */
    text-align: center;
}

.todo-link {
    color: inherit;
}

.todo-link:hover {
    background-color: #fff3cd;
}

.event-link {
    color: inherit;
}

.event-link:hover {
    background-color: #fff3cd;
}

html, body {
    overflow-x: hidden;
}

.container, .row {
    max-width: 100%;
    overflow-x: hidden;
}

/* sticky-topの重なり順を少し下げる（通常1020なので、それより低く） */
.sticky-top {
    z-index: 990 !important;
}

/*スマホ用のアクションボタン*/
.action-card {
    transition: all 0.15s ease;
    border-radius: 1rem;
}

.action-blue {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #cfe3ff 70%, #9fc5ff 100% );
}

.action-green {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #d4f4e4 70%, #a8e6c6 100% );
}

.action-red {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #f9d6d6 70%, #f2b3b3 100% );
}

.action-orange {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #ffd8a8 70%, #ffb347 100% );
}

.action-gray {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #e3e6ea 70%, #cfd4da 100% );
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

/*スマホのカードリスト用*/
.card-primary {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #e7f1ff 70%, #cfe2ff 100% );
    border: 1px solid #c5dbff;
}

.card-danger {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #ffe5e5 70%, #ffcccc 100% );
    border: 1px solid #ffb3b3;
}

.card-success {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #e6f9f0 70%, #c3f0db 100% );
    border: 1px solid #b2e5cd;
}

.card-info {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #e6f4ff 70%, #cfe9ff 100% );
    border: 1px solid #b6dcff;
}

.card-warning {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 45%, #fff8e1 70%, #ffe8a1 100% );
    border: 1px solid #ffe08a;
}

.card-secondary {
    background: linear-gradient( 135deg, #ffffff 0%, #ffffff 55%, #f2f2f2 80%, #e6e6e6 100% );
    border: 1px solid #dddddd;
}

/*一般のカード用*/
.card-primary-pc {
    background: linear-gradient(135deg, #f0f6ff 0%, #e2ecff 50%, #cfe2ff 100%);
    border: 1px solid #b6d0ff;
    color: var(--bs-primary-text-emphasis);
}

.card-info-pc {
    background: linear-gradient(135deg, #edf6ff 0%, #dff0ff 50%, #cfe9ff 100%);
    border: 1px solid #a9d3ff;
    color: var(--bs-info-text-emphasis);
}

.card-danger-pc {
    background: linear-gradient(135deg, #ffecec 0%, #ffdada 50%, #ffcccc 100%);
    border: 1px solid #ffb3b3;
    color: var(--bs-danger-text-emphasis);
}

.card-success-pc {
    background: linear-gradient(135deg, #ecfbf5 0%, #d9f5e8 50%, #c3f0db 100%);
    border: 1px solid #aee3c8;
    color: var(--bs-success-text-emphasis);
}

.card-warning-pc {
    background: linear-gradient(135deg, #fff9e8 0%, #fff1c7 50%, #ffe8a1 100%);
    border: 1px solid #ffd86b;
    color: var(--bs-warning-text-emphasis);
}

.card-secondary-pc {
    background: linear-gradient(135deg, #f5f5f5 0%, #ededed 50%, #e0e0e0 100%);
    border: 1px solid #d6d6d6;
}

/*未読アイコン*/
.badge-circle {
    width: 18px;
    height: 18px;
    font-size: 11px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* プレローダー全体のデザイン */
/* 画面全体を覆う */
#spinnerOverlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    z-index: 9999;
}

/* スピナーのカスタマイズ */
.spinner-border {
    width: 5rem;
    height: 5rem;
    border-width: 0.6rem;
    border-style: solid;
    border-color: #0d6efd transparent #a6c8ff transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 回転アニメーション */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/*スマホアプリ用カード*/
.mobile-card-list .card-hover {
    transition: all 0.2s ease;
    cursor: pointer;
}

    .mobile-card-list .card-hover:active {
        transform: scale(0.98);
    }

.mobile-card-list .card {
    background: linear-gradient( 180deg, #ffffff 0%, #fafafa 100% );
}