/* ====================================
   notification.css (Luxury & Clean 完全リファクタリング版)
   (PC: タイトル中央・リンク右端 / SP: 中央並び替え)
   (整合性：新着情報ページの ID: news-meta / クラス仕様に完全対応)
   (最新記事NEWバッジ：下部メインのみ自動配置・上部コピーエリアはNEWなし美観仕様)
   (アップデート：カテゴリとタイトルの余白・カラー分けを美観調整)
==================================== */

/* ====================================
   1. アンカージャンプ位置の補正
   (TOPページから詳細ページへ飛ぶ際のズレ防止)
==================================== */
.news-meta[id],
[id^="news-"] {
    /* main-content-news.css と数値を 180px で統一 */
    scroll-margin-top: 180px !important;
}

/* iOS / Legacy Browser 対策 */
.news-meta[id]::before,
[id^="news-"]::before {
    content: "";
    display: block;
    height: 180px;      /* ヘッダーの高さ */
    margin-top: -180px; /* 余白を相殺 */
    visibility: hidden;
    pointer-events: none;
}


/* ====================================
   2. 下部メインエリア：全体外枠・リストレイアウト (PC基準)
==================================== */
.notification-box {
    width: 95%;
    max-width: 1000px;
    margin: 80px auto; 
    border: 1px solid #e5dcd2;
    padding: 50px 40px;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* ヘッダー部分 */
.notification-header {
    background-color: #f8f4f0;
    padding: 18px 25px;
    border-bottom: 2px solid #8b7355; /* 格調高いホテルブロンズに修正 */
    margin-bottom: 35px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
}

.header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333333; /* ニュースメインの基本色に統一 */
    letter-spacing: 0.1em;
    font-family: "Hiragino Mincho ProN", serif;
}

.past-articles-link {
    font-size: 13px;
    font-weight: bold;
    color: #8b7355; /* 格調高いホテルブロンズに修正 */
    text-decoration: none;
    position: relative;
    padding-right: 15px;
    transition: all 0.3s ease;
}

.past-articles-link::after {
    content: '>';
    position: absolute;
    right: 0;
    transition: transform 0.3s ease;
}

.past-articles-link:hover {
    color: #bcae9b; /* ニュースメインの矢印カラーに調和 */
}

.past-articles-link:hover::after {
    transform: translateX(4px);
}

/* お知らせリスト部分：main-content-news.cssと完全調和 */
.notification-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.notification-list li {
    border-bottom: 1px solid #eae5dd; /* ニュース一覧の線色に統一 */
}

.notification-list li:last-child {
    border-bottom: none;
}

/* パターンA対応：1番目の最新記事の親要素に基準点を設定 */
.notification-list li:first-child {
    position: relative;
}

.notification-list li a {
    display: flex;
    align-items: center;
    padding: 24px 15px; /* ニュース一覧のパディングに完全統一 */
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
}

/* パターンA対応：1番目の最新記事リンクにバッジ用の左余白を確保 */
.notification-list li:first-child a {
    padding-left: 65px !important;
}

.notification-list li a:hover {
    background-color: #f7f3eb; /* ニュース一覧の上品な生成りホバー色に統一 */
    padding-left: 25px; /* トップページ独自のスライド演出は美観維持のため継承 */
}

/* パターンA対応：1番目の最新記事ホバー時、確保した左余白を維持しつつスライド */
.notification-list li:first-child a:hover {
    padding-left: 75px !important;
}

/* 日付エリア：【再調整】タイトルの開始位置を完全に揃えるため、適切な固定幅を設定 */
.date {
    font-family: "Century Gothic", Arial, sans-serif; /* 指定の状態へ再現 */
    font-size: 0.95em; /* 指定の状態へ再現 */
    font-weight: bold; /* 指定の状態（太字）へ再現 */
    color: #777777; /* ニュース一覧のカラーに完全統一 */
    letter-spacing: 0.05em;
    flex-shrink: 0; 
    width: 220px;      /* ★可変（auto）をやめ、220pxに固定してタイトルの位置を完全統一 */
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 記事タイトル：現在の構成を維持しつつフォント仕様のみ指定の過去状態へ再現 */
.article-title {
    color: #333333;
    flex-grow: 1;
    font-size: 1.05rem; /* ニュース一覧のサイズに統一 */
    font-weight: 500; /* 指定の状態（ウェイト500）へ再現 */
    line-height: 1.6;
    transition: color 0.3s ease;
    text-align: left;
}

/* ホバー時にタイトル色をホテルブロンズへ変化 */
.notification-list li a:hover .article-title {
    color: #8b7355; /* ホテルゴールド・ブロンズ系に統一 */
}

/* 引用されるカテゴリバッジの共通デザイン上書き設定（喧喧防止・最重要） */
.notification-list .news-category,
.latest-notification .news-category {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    text-align: center;
    min-width: auto;               /* 文字幅ぴったりにする */
    box-sizing: border-box;
    line-height: 1.5;
    margin-left: 0 !important;     /* 左マイナスマージンを安全にリセット */
    margin-right: 15px !important; /* ★カテゴリバッジからタイトルまでの間隔を美しく一定に保つ */
}

/* ------------------------------------
   引用元（main-content-news.css）と完全一致させた個別カテゴリーカラー
------------------------------------ */
.notification-list .badge-notice,
.latest-notification .badge-notice {
    background-color: #a93c3c !important; /* お知らせ：落ち着いたボルドーレッド */
    color: #ffffff !important;
}

.notification-list .badge-info,
.latest-notification .badge-info {
    background-color: #3b597a !important; /* ホテルからのお知らせ：気品のあるディープブルー */
    color: #ffffff !important;
}

.notification-list .badge-restaurant,
.latest-notification .badge-restaurant {
    background-color: #8b7355 !important; /* お食事：格調高いホテルブロンズ */
    color: #ffffff !important;
}

.notification-list .badge-event,
.latest-notification .badge-event {
    background-color: #4a7a5d !important; /* イベント：深みのあるクラシックグリーン */
    color: #ffffff !important;
}

.notification-list .badge-lexton,
.latest-notification .badge-lexton {
    background-color: #3b597a !important; /* レクストン鹿児島：気品のあるディープブルー */
    color: #ffffff !important;
}

.notification-list .badge-banquet,
.latest-notification .badge-banquet {
    background-color: #6a5a73 !important; /* 会議・宴会：ノーブルなクラシックパープル */
    color: #ffffff !important;
}

.notification-list .badge-takechiyo,
.latest-notification .badge-takechiyo {
    background-color: #4a7a5d !important; /* 竹千代’：深みのあるクラシックグリーン */
    color: #ffffff !important;
}

.notification-list .badge-shidashi,
.latest-notification .badge-shidashi {
    background-color: #657a4a !important; /* 竹千代 仕出し部’：深みのあるイエローグリーン */
    color: #ffffff !important;
}

.notification-list .badge-himeragi,
.latest-notification .badge-himeragi {
    background-color: #6a5a73 !important; /* ダイニング皇’：ノーブルなクラシックパープル */
    color: #ffffff !important;
}

.notification-list .badge-satsuma,
.latest-notification .badge-satsuma {
    background-color: #3d2d25 !important; /* 想咲鉄板 薩摩：重厚なディープコッパーブラウン */
    color: #ffffff !important;
}


/* ====================================
   3. 上部コピーエリア：最新記事専用 (空室検索前：JS複製用 PC基準)
==================================== */
.latest-notification {
    width: 95%;
    max-width: 1000px;
    margin: 30px auto;
    padding: 15px 30px; 
    background-color: #fdfaf7; 
    border-left: 6px solid #8b7355; /* Hotelテーマカラーに統一 */
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 最新記事リストコンテナ */
.latest-notification ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 上部コピーエリアは全記事で配置基準の干渉を排除 */
.latest-notification li {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;  
    border: none !important;
    position: relative !important;
}

.latest-notification li a {
    display: flex !important;
    padding: 10px 0 !important; 
    align-items: center !important;
    gap: 20px !important; 
    background: transparent !important;
    width: 100% !important;
    text-decoration: none !important;
}

/* 上部コピーエリア：NEWバッジ非表示化に伴い、1番目の左余白を2・3件目と完全統一 */
.latest-notification li:first-child a {
    padding-left: 0px !important;
}

/* コピーエリアの日付：【調整】こちらも固定幅を解除し、開きすぎを解消 */
.latest-notification .date {
    width: auto !important; /* ★240px固定を解除 */
    color: #8b7355 !important;
    font-family: "Century Gothic", Arial, sans-serif !important; /* 指定の状態へ再現 */
    font-size: 0.95em !important; /* 指定の状態へ再現 */
    font-weight: bold !important; /* 指定の状態（太字）へ再現 */
}

/* コピーエリアのタイトル */
.latest-notification .article-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ====================================
   4. 最新記事エリア：中央タイトル風リンク (PC基準)
==================================== */
.latest-goto-news-headline {
    text-align: center;         /* 中央寄せ */
    margin-bottom: 25px;        /* 下のお知らせとの間隔 */
    padding-top: 10px;
}

.latest-goto-news-headline a {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    transition: transform 0.3s ease;
}

/* 英語のメインタイトル */
.latest-goto-news-headline a .title-en {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: #333333;
    letter-spacing: 0.15em;
    font-family: "Hiragino Mincho ProN", serif;
    margin-bottom: 4px;
}

/* 下部に添える日本語ナビゲーション */
.latest-goto-news-headline a .title-ja {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #8b7355;              /* ホテルテーマカラー */
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 5px;
}

/* タイトルの下の装飾線 */
.latest-goto-news-headline a .title-ja::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background-color: #8b7355;
    transition: width 0.3s ease;
}

/* ホバー演出 */
.latest-goto-news-headline a:hover {
    transform: translateY(-2px);
}

.latest-goto-news-headline a:hover .title-ja {
    color: #bcae9b;
}

.latest-goto-news-headline a:hover .title-ja::after {
    width: 70px;                /* 下線が滑らかに広がる */
    background-color: #bcae9b;
}


/* ====================================
   5. NEWバッジ共通設定
==================================== */
/* パターンA：下部メインリスト(5件側)の1番目の記事のみに自動生成NEWバッジを適用（上部側は除外） */
.notification-list li:first-child a::before {
    content: "NEW";
    position: absolute;
    left: 15px;                 /* 枠内左側の美しい配置位置 */
    top: 50%;
    transform: translateY(-50%); /* 縦方向の完全中央揃え */
    font-size: 10px;
    background: #8b7355;        /* バッジが浮かないようホテルテーマブロンズに調和 */
    color: #fff;
    padding: 3px 6px;
    border-radius: 0;           /* main-content-news.css の高級感設計思想に基づき、角丸を排除 */
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.03em;
    z-index: 5;                 /* テキストのレイアウトに干渉しない最前面レイヤー */
}

/* 手動クラス付与用NEWバッジ */
.label-new {
    display: inline-block;
    font-size: 10px;
    background: #8b7355;
    color: #fff;
    padding: 2px 6px;
    border-radius: 0;           /* 角丸を排除 */
    line-height: 1;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
}


/* ====================================
   6. レスポンシブ表示 (PC専用 / SP・タブレット専用)
==================================== */

/* ------------------------------------
   PC専用表示（769px以上）
------------------------------------ */
@media screen and (min-width: 769px) {
    .header-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .past-articles-link {
        margin-left: auto;
    }
}

/* ------------------------------------
   スマホ・タブレット専用表示（768px以下）
------------------------------------ */
@media screen and (max-width: 768px) {
    /* 外枠・ヘッダー調整 */
    .notification-box {
        padding: 30px 15px;
        margin: 50px auto;
    }
      
    .notification-header {
        flex-direction: column;
        padding: 20px 10px;
    }

    /* タイトル風リンク調整 */
    .latest-goto-news-headline {
        margin-bottom: 20px;
    }
    .latest-goto-news-headline a .title-en {
        font-size: 1.2rem;
    }

    /* リスト子要素調整：縦並びへの変化 */
    .notification-list li a {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 10px;    /* ニュース側のSP設定に調和 */
        gap: 8px;
    }

    /* パターンAスマホ対応：縦並び時は左余白を解除し、上部にバッジ用の隙間を設ける */
    .notification-list li:first-child a {
        padding-left: 10px !important;
        padding-top: 42px !important;  /* バッジが上に乗るための安全な高さを確保 */
    }
    .notification-list li:first-child a:hover {
        padding-left: 15px !important; /* ホバー時のスライド幅をSP用に抑制調整 */
    }

    /* ------------------------------------
       ★【引用3件（上部）専用】SP時の縦幅を極限まで短縮する設計
    ------------------------------------ */
    .latest-notification {
        margin: 15px auto !important; /* 外枠の上下マージンを半分に圧縮 */
        padding: 8px 15px !important; /* 内側の上下余白を極小化 */
    }

    .latest-notification li a {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 5px 0 !important;   /* 1記事あたりの上下パディングを極限まで圧縮（10px→5px） */
        gap: 3px !important;         /* 日付とタイトルの行間を最小限に設定 */
    }

    .latest-notification li:first-child a {
        padding-left: 0 !important;
        padding-top: 5px !important; /* 1番目も2・3件目と完全に高さを揃えて圧縮 */
    }

    /* ★【修正反映】引用3件側（上部）のカテゴリーバッジのみ、SP時限定で完全に非表示化 */
    .latest-notification .news-category {
        display: none !important;
    }

    /* 引用3件側の専用デッドスペース排除：日付エリアの無駄な伸びを抑止 */
    .latest-notification .date {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-size: 0.85rem !important; /* 上部は文字を少しだけシャープにして縦幅を節約 */
        line-height: 1.2 !important;
    }

    /* 引用3件側の記事タイトル：フォントサイズと行間を微小に引き締め、縦への伸びを防止 */
    .latest-notification .article-title {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        white-space: normal !important; /* 2行以上の回り込みは許容しつつ、無駄な余白を作らない */
    }
    /* ------------------------------------ */

    /* 共通gap上書き（下部一覧など基礎値への干渉防止） */
    .notification-list li a {
        gap: 8px;
    }

    /* 【バッジ崩れ根絶処理】固定幅を解除し横並びを維持する（下部メインリスト用） */
    .notification-list .date {
        width: 100% !important; /* 横幅いっぱいに広げてバッジとの並びを確保 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-size: 1rem !important; /* ニュース側のSP設定に調和 */
    }

    /* パターンAスマホ対応：下部メインのみ縦並び時にNEWバッジを左上の安全な独立空間へ固定 */
    .notification-list li:first-child a::before {
        left: 10px;
        top: 15px;
        transform: none;       /* 中央寄せ用の計算をクリア */
    }

    /* 手動クラスNEWバッジの余白微調整 */
    .notification-list .label-new,
    .latest-notification .label-new {
        margin-left: -4px;
    }

    /* SP用アンカー位置補正 (ニュース側のレスポンシブ数値に統一) */
    .news-meta[id],
    [id^="news-"] {
        scroll-margin-top: 130px !important;
    }
    .news-meta[id]::before,
    [id^="news-"]::before {
        height: 130px;
        margin-top: -130px;
    }
}