/* エマージェンシーメールサービス 共通のスタイル（Bootstrap 5 の上に重ねる） */

:root {
    /* ロゴの青に合わせた基調色 */
    --emg-primary: #2b2fd9;
    --emg-primary-dark: #1f22a6;
    --bs-primary: var(--emg-primary);
    --bs-primary-rgb: 43, 47, 217;
    --bs-link-color: var(--emg-primary);
    --bs-link-color-rgb: 43, 47, 217;
    --bs-link-hover-color: var(--emg-primary-dark);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

body {
    background-color: #f4f6fb;
}

/*
 * フッターを画面の下に置くための最小の高さ。スマホでは 100vh がアドレスバーの分だけ実際の表示より長くなり、
 * 内容が少なくてもスクロールが出るため、表示中の高さ（100dvh）を使う。対応していないブラウザは 100vh のまま
 */
.min-vh-100 {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

.btn-primary {
    --bs-btn-bg: var(--emg-primary);
    --bs-btn-border-color: var(--emg-primary);
    --bs-btn-hover-bg: var(--emg-primary-dark);
    --bs-btn-hover-border-color: var(--emg-primary-dark);
    --bs-btn-active-bg: var(--emg-primary-dark);
    --bs-btn-active-border-color: var(--emg-primary-dark);
    --bs-btn-disabled-bg: var(--emg-primary);
    --bs-btn-disabled-border-color: var(--emg-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--emg-primary);
    --bs-btn-border-color: var(--emg-primary);
    --bs-btn-hover-bg: var(--emg-primary);
    --bs-btn-hover-border-color: var(--emg-primary);
    --bs-btn-active-bg: var(--emg-primary);
    --bs-btn-active-border-color: var(--emg-primary);
}

/* ロゴ（633x65 の画像を縮めて表示する） */
.brand-logo {
    height: 26px;
    width: auto;
    max-width: 60vw;
}

.mobile .brand-logo {
    height: 22px;
}

/* 居住者画面はスマホの幅に合わせる（PCでは中央に寄せる） */
.mobile-container {
    max-width: 560px;
}

.card {
    border: 0;
    box-shadow: 0 1px 3px rgba(20, 30, 80, .08), 0 1px 2px rgba(20, 30, 80, .06);
}

.page-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* メニューのタイル */
.menu-tile {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform .1s ease, box-shadow .1s ease;
}

.menu-tile:hover,
.menu-tile:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 30, 80, .15);
}

.menu-tile .bi {
    font-size: 1.8rem;
    color: var(--emg-primary);
}

/* 一覧表 */
.table-list th {
    white-space: nowrap;
    font-weight: 600;
    background-color: #eef0fa;
}

.table-list td {
    vertical-align: middle;
}

.text-pre {
    white-space: pre-wrap;
    word-break: break-all;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 必須の印 */
.required::after {
    content: " *";
    color: var(--bs-danger);
}

/* 居住者画面のボタンは押しやすい大きさにする */
.mobile .btn-lg-touch {
    padding: .75rem 1rem;
    font-size: 1.05rem;
}

/* 規約の本文 */
.legal-text h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.5rem;
}

.legal-text p {
    line-height: 1.8;
}