@charset "UTF-8";
/* CSS Document */
/* あの日の月・月齢・月相 */
/* みんなの知識 ちょっと便利帳 */
/* 2026/08/11 */

.anohi-wrap{
    --an-bg: #0b0f19;
    --an-border: #263049;
    --an-text: #cbd5e1;
    --an-heading: #ffffff;
    --an-sub: #94a3b8;
    --an-accent: #f59e0b;
    --an-accent-dark: #d97706;
    --an-card-bg: #161f33;
    --an-card-border: #2a3654;
    --an-tint: #0f172a;
    --an-tint-border: #334155;
    --an-gap: 18px;

    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    background: var(--an-bg);
    margin: 10px auto;
    padding: 0 10px 15px 0;
    border: 2px solid var(--an-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    color: var(--an-text);
    line-height: 1.9;
    font-size: 21px;
    text-align: left;
}
.anohi-wrap *{ box-sizing:border-box; }

.anohi-container{ max-width:860px; margin:auto; padding:22px 0 32px; }

.anohi-header{ text-align:left; padding:6px var(--an-gap) 4px; }
.anohi-header h2{
    font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: clamp(23px, 4.5vw, 30px);
    margin: 0 0 10px;
    letter-spacing:.04em;
    color: var(--an-heading);
    text-align:center;
}
.anohi-header p{ margin:0; font-size:15px; color: var(--an-text); font-weight:500; line-height:150%; }
.anohi-range-note{
    margin:8px 0 0 15px !important;
    font-size:13px !important;
    color: var(--an-accent) !important;
    padding-left:1em; text-indent:-1em;
}

.anohi-form{
    display:flex; flex-wrap:wrap; align-items:flex-end;
    gap:16px var(--an-gap);
    margin:22px var(--an-gap) 0;
    padding:20px;
    background: var(--an-card-bg);
    border:1px solid var(--an-card-border);
    border-radius:8px;
}
.anohi-field{ display:flex; flex-direction:column; gap:7px; text-align:left; }
.anohi-field label{ font-size:19px; color:#dbe1f0; font-weight:600; }
.anohi-ymd, .anohi-hm{ display:flex; align-items:center; gap:6px; font-size:19px; flex-wrap:wrap; color:#DEE1F7; }
.anohi-wrap input.anohi-input,
.anohi-wrap select.anohi-input{
    font-size:22px !important;
    padding:14px 10px !important;
    border:1px solid var(--an-card-border) !important;
    border-radius:6px !important;
    background:#0f172a !important;
    color: var(--an-heading) !important;
    text-align:center !important;
    line-height:normal !important;
    -webkit-appearance:none;
    appearance:none;
    box-shadow:none !important;
}
.anohi-wrap input.anohi-input:focus,
.anohi-wrap select.anohi-input:focus{
    outline:none !important;
    border-color: var(--an-accent) !important;
    box-shadow:0 0 0 3px rgba(245,158,11,0.25) !important;
}
.anohi-ymd-year{ width:92px; }
.anohi-ymd-month, .anohi-ymd-day, .anohi-hm-hour, .anohi-hm-min{ width:76px; }
.anohi-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.anohi-wrap button.anohi-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-size:20px !important; font-weight:600 !important; padding:7px 26px !important; border-radius:6px !important; cursor:pointer;
    border:1px solid transparent; transition: transform .08s ease, background-color .15s ease;
    line-height:normal !important;
}
.anohi-wrap button.anohi-btn:active{ transform:scale(0.97); }
.anohi-wrap button.anohi-btn-primary{ background: var(--an-accent) !important; color:#1a1000 !important; }
.anohi-wrap button.anohi-btn-primary:hover{ background:#ffb32e !important; color:#1a1000 !important; }
.anohi-wrap button.anohi-btn-ghost{ background:#0f172a !important; color: var(--an-text) !important; border-color: var(--an-card-border) !important; }
.anohi-wrap button.anohi-btn-ghost:hover{ background:#1a2540 !important; color: var(--an-heading) !important; border-color: var(--an-accent) !important; }

.anohi-steprow{ flex-wrap:wrap; gap:8px; margin:14px var(--an-gap) 0; text-align: center; }
.anohi-wrap button.anohi-step-btn{
    background:#0f172a !important; color:var(--an-text) !important;
    border:1px solid var(--an-card-border) !important; border-radius:6px !important;
    font-size:14px !important; padding:9px 14px !important; cursor:pointer;
}
.anohi-wrap button.anohi-step-btn:hover{ border-color: var(--an-accent) !important; color: var(--an-heading) !important; }

.anohi-jumprow{ margin-top:10px; }
.anohi-wrap button.anohi-jump-btn{
    background:transparent !important; color: var(--an-accent) !important;
    border:1px solid rgba(245,158,11,0.45) !important; border-radius:6px !important;
    font-size:14px !important; padding:9px 14px !important; cursor:pointer;
}
.anohi-wrap button.anohi-jump-btn:hover{ background:rgba(245,158,11,0.12) !important; border-color: var(--an-accent) !important; color:#ffd27a !important; }

.anohi-jump-note{
    margin:8px var(--an-gap) 0 !important;
    font-size:12.5px !important;
    color: var(--an-sub) !important;
    text-align:center;
    padding-left:0 !important; text-indent:0 !important;
}
.anohi-jump-note a { color: #f59e0b !important; }
.anohi-jump-note a:hover { color: #ffb32e !important; }

.anohi-result-box{ margin-top: 6px; }

.anohi-date-display {
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
    margin: 28px var(--an-gap) 0;
}
.anohi-res-date-day{ font-size: 1.4rem; }
.anohi-res-date-time{ display:block; margin-top:10px; font-size:1.3rem; color: var(--an-accent); font-weight:500; }

.anohi-moon-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px var(--an-gap) 30px;
}
.anohi-moon-frame{
    position:relative;
    width: 270px;
    height: 270px;
    background: #0f172a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    box-shadow: 0 0 20px rgba(255,255,255,0.05);
}
#anohi-moon-glow{ position:absolute; inset:-36px; border-radius:50%; filter:blur(28px); pointer-events:none; transition:opacity .3s; z-index:0; }
#anohi-moon-canvas{ position:relative; z-index:1; display:block; border-radius:50%; }

.anohi-moon-age {
    font-size: 1.7rem;
    font-weight: bold;
    color: #fff;
    margin: 14px 0 4px;
    font-variant-numeric: tabular-nums;
}
.anohi-moon-illum{ font-size:1.2rem; color:var(--an-sub); margin-bottom:4px; }

.anohi-moon-phase-name{
    font-size: 1.2rem;
    font-weight: bold;
    color: #f59e0b;
    text-align: center;
    margin: 6px var(--an-gap) 0;
    line-height: 1.4;
}

.anohi-topics-box{
    margin:22px var(--an-gap) 0; padding:18px 20px;
    background: #10182c; border:1px solid var(--an-card-border); border-radius:10px;
}
.anohi-topics-title{ font-size:15px; font-weight:700; color:var(--an-heading); margin-bottom:10px; }
.anohi-topics-text{ font-size:14px; line-height:170%; color:#c7cde3; }

.anohi-notes{
    margin: 30px var(--an-gap) 0;
    padding-top: 18px;
    border-top: 1px solid var(--an-card-border);
}
.anohi-notes p{ margin:0; font-size:13px; line-height:160%; color:#94a3b8; padding-left:1em; text-indent:-1em; }
.anohi-notes p + p{ margin-top:9px; }

@media (max-width:600px){
    .anohi-wrap{ font-size:17px; padding:0 6px 12px 0; }
    .anohi-btns{ margin-left:0; width:100%; }
    .anohi-btns .anohi-btn{ flex:1; }
    .anohi-moon-frame{ width:220px; height:220px; }
    #anohi-moon-canvas{ width:220px; height:220px; }
}