@charset "UTF-8";
/* CSS Document */
/* あの日の曜日｜この日の曜日 */
/* みんなの知識 ちょっと便利帳 */
/* 2026/07/19 */

.youbi-wrap{
    font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
    background:#FBF3E2;
    margin: 10px auto;
    padding:0 10px ;
    border: 2px solid #8B4A3D;
    border-radius:10px;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.youbi-container{
    max-width:700px;
    margin:auto;
}

.youbi-card{
    background:#fff;
    border: 2px solid #e0e0e0;
    border-radius:14px;
    padding:18px;
    margin:20px 0 16px 0;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.youbi-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:6px;
    padding-left:10px;
}

.youbi-card.card-a .youbi-title{ border-left:6px solid #2b6cb0; }
.youbi-card.card-b .youbi-title{ border-left:6px solid #7b4fd1; }
.youbi-card.card-c .youbi-title{ border-left:6px solid #0abf7a; }

.youbi-sub{
    font-size:13px;
    color:#666;
    margin:0 0 14px 10px;
}

.youbi-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

.youbi-row select,
.youbi-row input{
    font-size:18px;
    padding:10px 8px;
    border-radius:10px;
    border:1px solid #ccc;
    box-sizing:border-box;
}

.youbi-row select{
    width:140px;
    min-width:68px;
    flex:0 0 auto;
}

.youbi-row input.y-input{
    width:140px;
    min-width:90px;
    flex:0 0 auto;
}

.youbi-row input.n-input{
    width:100%;
    box-sizing:border-box;
}

.youbi-arrow{
    font-size:20px;
    font-weight:700;
    color:#666;
    padding:0 4px;
}

.youbi-result{
    margin-top:14px;
    padding:14px;
    font-size:20px;
    font-weight:700;
    background:#f1f4fb;
    border-radius:10px;
}

.youbi-result:empty{
    display:none;
}

.youbi-detail{
    font-size:15px;
    font-weight:400;
    color:#333;
    margin-top:8px;
}

.youbi-small{
    font-size:13px;
    color:#666;
    margin:8px 0 0 4px;
}

.youbi-btn-today{
    padding: 5px 15px;
    font-weight: bold;
    cursor: pointer;
}

.youbi-btn-reset{
    display: block;
    margin: 10px 0 0 auto;
    padding: 5px 15px;
    font-weight: bold;
    cursor: pointer;
}

.youbi-source{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    padding:3px 10px;
    border-radius:20px;
    margin-bottom:8px;
}

.youbi-source.src-seireki{
    background:#e8f0fe;
    color:#2b6cb0;
}

.youbi-source.src-wareki{
    background:#fdf1e0;
    color:#b35c00;
}

.youbi-field-label{
    font-size:13px;
    color:#666;
    width:100%;
    margin:2px 0 -2px 4px;
}

.youbi-faq{
    margin:26px 5px 0 10px;
	padding: 0  5px 0 15px;
    font-size:14px;
    color:#444;
    line-height:1.7;
}
.youbi-faq h3{
    font-size:15px;
    margin:14px 0 4px 0;
}

@media (max-width:480px){
    .youbi-row select,
    .youbi-row input{
        font-size:15px;
        padding:8px 6px;
    }
    .youbi-row select{ width:62px; min-width:56px; }
    .youbi-row input.y-input{ width:78px; min-width:70px; }
}