#navigo-mini-message {
    padding: 10px;
    border-radius: 4px;
}

#navigo-mini-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#navigo-mini-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/*
* アナウンスの親コンテナ
*/
#navigo-mini-announcements-container {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100vw;   /* ビューポートの全幅 */
    height: 100vh;  /* ビューポートの全高 */
    z-index: 9999;  /* 非常に高いz-indexで他の要素の上に確実に表示 */
    pointer-events: none; /* マウスイベントを透過させる */
}

/*
* 個々のアナウンスボックス (外側のコンテナ)
*/
.navigo-mini-announcement {
    position: absolute; /* 親コンテナ (#navigo-mini-announcements-container) を基準に配置 */
    box-sizing: border-box; /* paddingやborderを含めてwidth/heightを計算 */

    background-color: transparent; /* 背景色を透明にする */
    border: none;                  /* ボーダーをなくす */
    border-radius: 0;              /* 角丸をなくす */
    box-shadow: none;              /* 影をなくす */
    padding: 0;                    /* パディングもなし */

    display: flex;                /* 子要素を中央に配置するために flex を維持 */
    align-items: center;          /* 子要素（コンテンツ）を垂直方向に中央揃え */
    justify-content: center;      /* 子要素（コンテンツ）を水平方向に中央揃え */
    pointer-events: none;         /* マウスイベントは透過させる (コンテンツ内で auto にする) */
}

/*
* アナウンスの実際のコンテンツボックス
*/
.navigo-mini-announcement-content {
    width: 100%;
    height: 100%; /* 親の20vhを最大限利用 */
    min-width: 0;
    min-height: 0;

    /* JSで設定可能なCSS変数を定義。フォールバック値を設定 */
    --announcement-bg-color: rgba(255, 255, 255, 0.95); /* デフォルトの背景色 */
    --announcement-border-color: #0073aa; /* デフォルトのボーダー色 */

    background-color: var(--announcement-bg-color); /* CSS変数を使用 */
    border: 2px solid var(--announcement-border-color); /* CSS変数を使用 */
    border-radius: 0px;                                  /* デフォルトの角丸 (SQUARE相応) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);           /* ガイド本体の影 */

    padding: 15px 20px;                                  /* 上下15px、左右20pxのパディング */
    box-sizing: border-box;

    text-align: center;
    pointer-events: auto;
    position: relative; /* 吹き出しのしっぽの基準点とするため、これは維持 */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;
    gap: 5px;
}

/* 内部ラッパー: コンテンツの配置とスクロール制御 */
.navigo-mini-announcement-inner {
    width: 100%;
    height: 100%;
    overflow: hidden; /* はみ出し防止 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 5px;
    flex: 1; /* 親要素いっぱいに広がる */
    min-height: 0; /* Flexアイテムの縮小を許可 */
}

/* layout_type: SQUARE (デフォルトと同じなので、明示的なスタイルは最低限) */
.navigo-mini-announcement-content.layout-square {
    border-radius: 0px;
}

/* layout_type: ROUNDED */
.navigo-mini-announcement-content.layout-rounded {
    border-radius: 20px; /* より大きな角丸 */
}

/* layout_type: SPEECH (吹き出し) */
.navigo-mini-announcement-content.layout-speech {
    border-radius: 15px; /* 吹き出しの本体の角丸 */
    position: relative; /* 疑似要素の基準点となるように明示的に設定 */
}

/* 吹き出しのしっぽ (::after と ::before) の共通スタイル定義 */
.navigo-mini-announcement-content.layout-speech::after,
.navigo-mini-announcement-content.layout-speech::before {
    content: '';
    position: absolute;
    pointer-events: none; /* マウスイベントを透過 */
}

/* ::after は外側のしっぽ（ボーダー） */
.navigo-mini-announcement-content.layout-speech::after {
    border: 23px solid transparent; /* しっぽの三角形の高さ */
    z-index: 11; /* ボーダーを最前面に */
}

/* ::before は内側のしっぽ（背景） */
.navigo-mini-announcement-content.layout-speech::before {
    border: 21px solid transparent; /* ボーダーより2px小さいサイズ */
    z-index: 10; /* 背景をボーダーの下に */
}

/* --- しっぽの向き別のスタイル --- */

/* 下向きのしっぽ (tail-bottom) */
.navigo-mini-announcement-content.layout-speech.tail-bottom::after {
    bottom: -25px; /* しっぽの高さ23px + 本体ボーダー2px = 25px */
    left: 30px;
    transform: translateX(0);
    border-top-color: var(--announcement-border-color); /* 上方向の辺に色を付ける */
    border-bottom: 0; /* 他の辺は透明 */
}
.navigo-mini-announcement-content.layout-speech.tail-bottom::before {
    bottom: -23px; /* しっぽの高さ23px */
    left: 30px;
    transform: translateX(0);
    border-top-color: var(--announcement-bg-color); /* 上方向の辺に色を付ける */
    border-bottom: 0; /* 他の辺は透明 */
}

/* 上向きのしっぽ (tail-top) */
.navigo-mini-announcement-content.layout-speech.tail-top::after {
    top: -25px; /* しっぽの高さ23px + 本体ボーダー2px = 25px */
    left: 30px;
    transform: translateX(0);
    border-bottom-color: var(--announcement-border-color); /* 下方向の辺に色を付ける */
    border-top: 0;
}
.navigo-mini-announcement-content.layout-speech.tail-top::before {
    top: -23px; /* しっぽの高さ23px */
    left: 30px;
    transform: translateX(0);
    border-bottom-color: var(--announcement-bg-color); /* 下方向の辺に色を付ける */
    border-top: 0;
}

/*
* 右寄せのしっぽスタイル (tail-align-right)
* tail-top または tail-bottom が適用され、かつ要素が右端に配置されている場合に適用され、
* しっぽを右寄りに調整します。
*/
.navigo-mini-announcement-content.layout-speech.tail-top.tail-align-right::after,
.navigo-mini-announcement-content.layout-speech.tail-bottom.tail-align-right::after {
    left: auto;  /* 既存のleftプロパティを解除 */
    right: 30px; /* 右から30pxの位置に配置 */
}
.navigo-mini-announcement-content.layout-speech.tail-top.tail-align-right::before,
.navigo-mini-announcement-content.layout-speech.tail-bottom.tail-align-right::before {
    left: auto;  /* 既存のleftプロパティを解除 */
    right: 30px; /* 右から30pxの位置に配置 */
}

/* 左向きのしっぽ (tail-left) */
.navigo-mini-announcement-content.layout-speech.tail-left::after {
    right: -25px; /* しっぽの高さ23px + 本体ボーダー2px = 25px */
    top: 30px;
    transform: translateY(0);
    border-left-color: var(--announcement-border-color); /* 左方向の辺に色を付ける */
    border-right: 0;
}
.navigo-mini-announcement-content.layout-speech.tail-left::before {
    right: -23px; /* しっぽの高さ23px */
    top: 30px;
    transform: translateY(0);
    border-left-color: var(--announcement-bg-color); /* 左方向の辺に色を付ける */
    border-right: 0;
}

/* 右向きのしっぽ (tail-right) */
.navigo-mini-announcement-content.layout-speech.tail-right::after {
    left: -25px; /* しっぽの高さ23px + 本体ボーダー2px = 25px */
    top: 30px;
    transform: translateY(0);
    border-right-color: var(--announcement-border-color); /* 右方向の辺に色を付ける */
    border-left: 0;
}
.navigo-mini-announcement-content.layout-speech.tail-right::before {
    left: -23px; /* しっぽの高さ23px */
    top: 30px;
    transform: translateY(0);
    border-right-color: var(--announcement-bg-color); /* 右方向の辺に色を付ける */
    border-left: 0;
}

/* アナウンスのタイトル  */
.navigo-mini-announcement-title {
    margin: 0;
    color: #333;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    
    width: 100%;
    word-break: break-word;
    overflow: visible;
    flex: 0 0 auto; /* サイズ固定（縮小はJSで行う） */
}

/* アナウンスの本文 */
.navigo-mini-announcement-body {
    color: #555;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0;
    
    width: 100%;
    text-align: left;
    word-break: break-word;

    max-height: none;
    overflow: visible;
    flex: 0 0 auto; /* サイズ固定（縮小はJSで行う） */
}

/*
* アナウンスを閉じるボタン
*/
.navigo-mini-close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 5px;
    pointer-events: auto;
    transition: color 0.2s;
    z-index: 12; /* 吹き出しのしっぽより手前に */
}

.navigo-mini-close-button:hover {
    color: #333;
}

/* メディアのラッパー要素 */
.navigo-mini-announcement-media-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 0; /* Flexアイテムがコンテンツサイズより小さくなることを許可 */
    margin: 0;
    flex: 1; /* 利用可能な空間を最大限使用 (伸縮する) */
    overflow: hidden; /* はみ出し防止 */
}

/* メディア用のCSS*/
.navigo-mini-announcement-media {
    display: block;
    max-width: 100%;
    max-height: 100%; /* 親(wrapper)の高さに収める */
    width: auto;      /* アスペクト比維持 */
    height: auto;     /* アスペクト比維持 */
    margin: 0;
    border-radius: 4px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    object-fit: contain; /* 領域内に収める */
}

/* メディアがリンクで囲まれている場合 */
.navigo-mini-announcement-media-wrapper > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* jQuery UI Resizable ハンドル調整 */
.ui-resizable-handle {
    z-index: 90 !important;
}