@charset "UTF-8";
/* CSS Document */
/* あの日から何日 */
/* みんなの知識 ちょっと便利帳 */
/* 2026/08/09 */

.bdt-app {
    --bdt-bg: #ffffff;
    --bdt-surface: #f3f6fb;
    --bdt-surface-2: #eef2f9;
    --bdt-border: #c7d2e0;
    --bdt-text: #16233b;
    --bdt-text-sub: #3d4a63;
    --bdt-primary: #17458f;
    --bdt-primary-dark: #0f2f63;
    --bdt-primary-bg: #e7f0ff;
    --bdt-holiday: #a3241c;
    --bdt-holiday-bg: #fbe7e5;
    --bdt-custom: #8a5300;
    --bdt-custom-bg: #fdf1dd;
    --bdt-success: #1f7a4d;
    --bdt-focus: #0b5fff;

    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--bdt-text);
    border: 2px solid #0000C8;
    border-radius: 10px;
    background-color: var(--bdt-bg);
    font-size: 17px;
    line-height: 1.8;
    max-width: 880px;
    margin: 0 auto;
    padding: 20px 20px 48px;
    box-sizing: border-box;
}
.bdt-app *, .bdt-app *::before, .bdt-app *::after { box-sizing: border-box; }

.bdt-app a { color: var(--bdt-primary); }
.bdt-app :focus-visible {
    outline: 3px solid var(--bdt-focus);
    outline-offset: 2px;
}

.bdt-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bdt-border);
}
.bdt-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bdt-nav-link {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    color: var(--bdt-primary);
    background: var(--bdt-surface);
    border: 2px solid transparent;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}
.bdt-nav-link:hover { background: var(--bdt-primary-bg); }
.bdt-nav-link.is-current {
    background: var(--bdt-primary-bg);
    border-color: var(--bdt-primary);
    color: var(--bdt-primary-dark);
}

.bdt-page-title {
	font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: clamp(20px, 4.5vw, 28px);
    font-weight: 800;
    color: var(--bdt-primary-dark);
    margin: 0 0 20px;
	letter-spacing: .04em;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.bdt-lead {
    font-size: 14px;
    color: var(--bdt-text-sub);
    background: var(--bdt-surface);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

.bdt-note{
font-size: 14px;
padding-left: 1em;
text-indent: -1em;
}

.bdt-card {
    background-color: var(--bdt-surface);
    border: 1px solid var(--bdt-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.bdt-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--bdt-text);
    margin: 0 0 16px;
    border-left: 5px solid var(--bdt-primary);
    padding-left: 12px;
}

.bdt-group { margin-bottom: 18px; }
.bdt-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--bdt-text-sub);
    margin-bottom: 8px;
}
.bdt-input, .bdt-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--bdt-border);
    border-radius: 8px;
    font-size: 17px;
    background-color: #ffffff;
    color: var(--bdt-text);
    min-height: 48px;
}
.bdt-input:focus, .bdt-select:focus {
    border-color: var(--bdt-primary);
    box-shadow: 0 0 0 3px rgba(23, 69, 143, 0.18);
}
.bdt-input-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.bdt-input-row .bdt-input { flex: 1 1 200px; }

.bdt-radio-row, .bdt-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    background: #ffffff;
    padding: 12px 14px;
    border: 2px solid var(--bdt-border);
    border-radius: 8px;
}
.bdt-radio-label, .bdt-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bdt-text-sub);
    cursor: pointer;
}
.bdt-radio-label input[type="radio"], .bdt-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.bdt-quick-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.bdt-preset-btn {
    background-color: #ffffff;
    border: 2px solid var(--bdt-border);
    color: var(--bdt-text-sub);
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    min-height: 38px;
}
.bdt-preset-btn:hover {
    background-color: var(--bdt-primary-bg);
    border-color: var(--bdt-primary);
    color: var(--bdt-primary-dark);
}

.bdt-swap-btn {
    background-color: #ffffff;
    border: 2px solid var(--bdt-border);
    color: var(--bdt-primary);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    min-height: 48px;
    width: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bdt-swap-btn:hover { background-color: var(--bdt-primary-bg); }

.bdt-btn {
    display: inline-block;
    width: 100%;
    padding: 14px 20px;
    background-color: var(--bdt-primary);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    min-height: 52px;
    text-align: center;
}
.bdt-btn:hover { background-color: var(--bdt-primary-dark); }
.bdt-btn-small {
    width: auto;
    padding: 10px 16px;
    font-size: 15px;
    min-height: 44px;
}
.bdt-btn-outline {
    background-color: #ffffff;
    color: var(--bdt-primary);
    border: 2px solid var(--bdt-primary);
}
.bdt-btn-outline:hover { background-color: var(--bdt-primary-bg); }
.bdt-copy-btn {
    background-color: #ffffff;
    border: 2px solid var(--bdt-primary);
    color: var(--bdt-primary);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
}
.bdt-copy-btn:hover { background-color: var(--bdt-primary-bg); }

.bdt-result {
    margin-top: 18px;
    padding: 20px;
    background-color: var(--bdt-primary-bg);
    border-left: 6px solid var(--bdt-primary);
    border-radius: 4px 12px 12px 4px;
}
.bdt-result.is-future { background-color: var(--bdt-custom-bg); border-left-color: var(--bdt-custom); }

.bdt-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.bdt-result-title { font-size: 16px; color: var(--bdt-primary-dark); font-weight: 800; }
.bdt-result.is-future .bdt-result-title { color: var(--bdt-custom); }

.bdt-result-val {
    font-size: 36px;
    font-weight: 800;
    color: var(--bdt-primary-dark);
    margin-top: 6px;
    display: block;
}
.bdt-result.is-future .bdt-result-val { color: var(--bdt-custom); }

.bdt-phrase-list { list-style: none; margin: 14px 0 0; padding: 0; }
.bdt-phrase-list li {
    background-color: #ffffff;
    border: 1px solid var(--bdt-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 15.5px;
}
.bdt-phrase-list li strong { color: var(--bdt-primary-dark); font-size: 17px; }

.bdt-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.bdt-stat-item {
    background-color: #ffffff;
    border: 1px solid var(--bdt-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.bdt-stat-label { font-size: 13px; color: var(--bdt-text-sub); font-weight: 700; }
.bdt-stat-val { font-size: 20px; font-weight: 800; color: var(--bdt-primary-dark); margin-top: 4px; }
.bdt-stat-val.is-sm { font-size: 16px; }

.bdt-compare-table { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 10px; overflow: hidden; margin-top: 8px; }
.bdt-compare-table th, .bdt-compare-table td {
    border: 1px solid var(--bdt-border);
    padding: 10px 12px;
    font-size: 14.5px;
    text-align: center;
}
.bdt-compare-table th { background-color: var(--bdt-surface-2); color: var(--bdt-text-sub); font-weight: 800; }
.bdt-compare-table td:first-child, .bdt-compare-table th:first-child {
    text-align: left; font-weight: 700; color: var(--bdt-text-sub); background-color: var(--bdt-surface-2); width: 32%;
}

.bdt-fun-fact {
    background-color: var(--bdt-custom-bg);
    border: 1px solid #f0d9a6;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 15px;
    color: #6b4b12;
}
.bdt-fun-fact-title {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--bdt-custom);
}

.bdt-era-result {
    background-color: var(--bdt-custom-bg);
    border: 1px solid #f0d9a6;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    color: #6b4b12;
}
.bdt-era-result-title {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--bdt-custom);
}
.bdt-era-result-body {
    font-size: 20px;
    font-weight: 600;
    padding-left: 1.55em;
    line-height: 1.6;
}
.bdt-era-result-eto {
    font-size: 0.82em;
    font-weight: 500;
    margin: 6px 0 0 12px;
}

.bdt-mode-content { display: none; }
.bdt-mode-content.is-active { display: block; }

.bdt-footer {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--bdt-border);
    font-size: 13.5px;
    color: var(--bdt-text-sub);
}

@media (max-width: 480px) {
    .bdt-app { font-size: 16px; padding: 14px 12px 40px; }
    .bdt-page-title { font-size: 22px; }
    .bdt-result-val { font-size: 28px; }
    .bdt-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .bdt-compare-table th, .bdt-compare-table td { font-size: 12.5px; padding: 8px 6px; }
}