@charset "UTF-8";

/* 「ひとときのしずく」専用お知らせ枠全体 */
.hitotoki-notice-container {
    max-width: 100%; 
    margin: 10px auto 40px;
    padding: 40px 35px; 
    background-color: #faf7f2; 
    border: 1px solid #e1dacb; 
    border-radius: 0px; 
    box-sizing: border-box;
    font-family: "Times New Roman", "Yu Mincho", "游明朝", serif; 
    color: #333333;
    line-height: 2.0; /* 行間をゆったり広げて高級感を演出 */
    letter-spacing: 0.05em;
}

/* 重要バッジ */
.hitotoki-notice-badge {
    display: block;
    max-width: 120px;
    margin: 0 auto 20px; /* PC・スマホ共に中央に配置 */
    background-color: #495448; /* サロンの美しいディープグリーン */
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 0;
    text-align: center;
    letter-spacing: 0.15em;
}

/* タイトル */
.hitotoki-notice-title {
    font-size: 22px; 
    font-weight: 500;
    margin: 0 0 10px 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #e1dacb;
    color: #2b2b2b;
    text-align: center; /* タイトルは中央寄せ */
}

/* 日付 */
.hitotoki-notice-date {
    font-size: 14px;
    color: #7a7368;
    text-align: right; /* 日付は右寄せ */
    margin-bottom: 35px;
}

/* 本文スタイル（PC環境では中央寄せにして、ゆったり見せる） */
.hitotoki-notice-content p {
    font-size: 15px;
    margin-bottom: 28px;
    text-align: center; /* PCでは美しい中央寄せ */
}

/* 重要な日付の強調表現 */
.hitotoki-notice-content strong {
    color: #333333;
    font-weight: bold;
    background: linear-gradient(transparent 75%, #d1c7b7 75%); /* 上品なゴールドベージュのアンダーライン */
}

/* 結びの言葉 */
.hitotoki-notice-footer {
    margin-top: 45px !important;
    font-weight: bold;
    color: #2b2b2b;
}

/* ==========================================
   スマートフォン用のレスポンシブ設定 (画面幅767px以下)
   ========================================== */
@media screen and (max-width: 767px) {
    .hitotoki-notice-container {
        margin: 15px 0px; 
        padding: 30px 20px; /* スマホの画面幅をいっぱいに使って文字を読みやすく */
    }
    
    .hitotoki-notice-title {
        font-size: 18px; 
        line-height: 1.4;
    }
    
    /* スマホ時は自動で中央寄せを解除し、自然な左詰め（両端揃え）に切り替え */
    .hitotoki-notice-content p {
        font-size: 14px; 
        margin-bottom: 20px;
        text-align: justify; /* 文字の端をきれいに揃えてガタつきをなくす */
        text-justify: inter-ideograph;
    }
}