/* =========================================================
greeting
TOP統合案内ボックス 完成版（モバイル最適化含む）
========================================================= */

#greeting{
    margin:20px 0;
    padding:18px 20px;
    border:1px solid #dbe5f0;
    border-left:6px solid var(--link);
    border-radius:10px;
    background:linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    color:var(--text);
    text-align:center;
    transition:border-color .2s ease, box-shadow .2s ease;
}

#greeting:hover{
    border-color:#c7d6e6;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* =========================================================
内部レイアウト
========================================================= */

#greeting .greeting-inner{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

/* =========================================================
見出し
========================================================= */

#greeting h2{
    margin:0;
    color:#0f3557;
    font-size:22px;
    font-weight:700;
    line-height:1.5;
}

/* =========================================================
本文（重要：読みやすさ制御）
========================================================= */

#greeting p{
    margin:0;
    max-width:460px;
    font-size:16px;
    line-height:1.85;
    letter-spacing:.01em;
    word-break:normal;
    overflow-wrap:break-word;
}

/* =========================================================
日時（補助情報）
========================================================= */

#greeting .greeting-datetime{
    margin-top:4px;
    padding-top:10px;
    border-top:1px solid #d9e4ef;
    color:#6b7280;
    text-align:center;
}

/* ラベル */
#greeting .greeting-date-label{
    display:block;
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    color:#9ca3af;
    margin-bottom:2px;
}

/* 日付 */
#greeting .greeting-date-main{
    font-size:15px;
    font-weight:600;
    color:#374151;
    line-height:1.6;
}

/* 時刻 */
#greeting .greeting-time-main{
    margin-top:2px;
    font-size:12px;
}

#greeting .greeting-time-main strong{
    font-size:14px;
    font-weight:700;
    color:#111827;
}

/* 祝日 */
#greeting .greeting-holiday{
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid #e5e7eb;
    font-size:12px;
    font-weight:600;
    color:#c62828;
}

/* =========================================================
タブレット
========================================================= */

@media (max-width:768px){

    #greeting{
        margin:16px 0;
        padding:16px;
        border-left-width:5px;
    }

    #greeting h2{
        font-size:20px;
    }

    #greeting p{
        font-size:15px;
        max-width:420px;
    }
}

/* =========================================================
スマホ最適化（最重要）
========================================================= */

@media (max-width:480px){

    #greeting{
        padding:14px;
        border-left-width:4px;
    }

    #greeting .greeting-inner{
        gap:8px;
    }

    /* 見出し */
    #greeting h2{
        font-size:18px;
        line-height:1.4;
    }

    /* 本文：自然改行＋幅制御 */
    #greeting p{
        font-size:14px;
        line-height:1.8;
        max-width:28em;          /* ★読みやすさの核 */
        margin:0 auto;
        line-break:strict;       /* ★日本語最適化 */
    }

    /* 日付 */
    #greeting .greeting-date-main{
        font-size:14px;
    }

    /* 時刻 */
    #greeting .greeting-time-main{
        font-size:12px;
    }

    #greeting .greeting-time-main strong{
        font-size:14px;
    }

    /* 祝日 */
    #greeting .greeting-holiday{
        font-size:12px;
    }
}