/* =============================================================
   重要なお知らせ（メンテナンス等の重要メッセージ用・再利用コンポーネント）
   -------------------------------------------------------------
   HTML 例:
   <div class="rnw-notice" role="alert">
     <div class="rnw-notice-inner">
       <div class="rnw-notice-title">
         <span class="rnw-notice-cat">重要なお知らせ</span>
         <p class="rnw-notice-ttl">タイトル</p>
       </div>
       <p class="rnw-notice-txt">本文テキスト<br>...</p>
     </div>
   </div>
   ============================================================= */
.rnw-notice {
    background: #fff;
    padding: 20px 0 40px;
    border-bottom: 1px solid var(--bg06, #ebeff3); /* --bg06 は brantect3_v2.css 定義。en は未読込のためフォールバック指定 */
}
.rnw-notice-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.rnw-notice-title {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.rnw-notice-cat {
    flex: 0 0 auto;
    border: 1px solid #cd787d;
    color: #cd787d;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    padding: 4px 10px;
    white-space: nowrap;
}
.rnw-notice-ttl {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
    margin: 0;
}
.rnw-notice-txt {
    width: 100%;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    line-height: 1.8;
    margin: 0;
}
.rnw-notice-txt a { color: #3367d6; text-decoration: none; }
.rnw-notice-txt a:hover { text-decoration: underline; }
/* 本文内に複数段落・箇条書きを含める場合 */
.rnw-notice-txt p { margin: 0 0 1em; }
.rnw-notice-txt p:last-child { margin-bottom: 0; }
.rnw-notice-txt ul { margin: 0 0 1em; padding-left: 1.5em; list-style: disc; }
.rnw-notice-txt ul:last-child { margin-bottom: 0; }
.rnw-notice-txt li { line-height: 1.8; }

@media (max-width: 768px) {
    .rnw-notice-ttl { font-size: 15px; }
    .rnw-notice-txt { font-size: 14px; }
}