/* ============================================================ 最上部お知らせバー（テロップ）esthe-uni.com 専用 v4 (CSS only) 設置：FFFTPで /files/css/uni_topnews.css にアップロード 読込：追加タグ欄に追加 ============================================================ */ /* === 共通 === */ .top-area{ position:fixed; top:0; left:0; width:100%; height:38px; /* ← PCバー高さ */ background:#c9a7a0; /* ローズベージュ（ブランド標準色） */ color:#fff; display:flex; align-items:center; overflow:hidden; z-index:9999; font-family:"Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",sans-serif; font-size:12.5px; letter-spacing:0.06em; box-shadow:0 1px 2px rgba(0,0,0,.08); } .top-area .topnews{ display:inline-flex; white-space:nowrap; padding-left:100%; animation:topnews-scroll 32s linear infinite; } .top-area .topnews:hover{ animation-play-state:paused; } .top-area .topnews span{ padding:0 28px; } .top-area .topnews .en{ font-family:'Book Antiqua','Palatino Linotype',Georgia,serif; letter-spacing:0.12em; } .top-area .topnews a{ color:#fff; text-decoration:underline; } @keyframes topnews-scroll{ from{ transform:translateX(0); } to { transform:translateX(-100%); } } /* === PC（750px以上） === PCはサイドバーが追従しない問題があるため、html に padding-top で空けるのではなく、 既存のヘッダー要素を直接押し下げて、サイドバー(.aside)も追従させる。 */ @media screen and (min-width:750px){ header.header{ position:relative; top:38px; } /* サイドバーがある場合の追従（A2/B2タイプ） */ .aside, .sidebar, aside{ margin-top:38px; } /* free-headerリセット（ヘルプ準拠） */ .free-header{ padding:0; } .free-header img{ width:auto; } } /* === スマートフォン（749px以下） === スマホは .header / .sm_cat-menu / .drawer-hamburger が position:fixed; top:0 のため それぞれの top を 32px に変更。汎用クラス .sm_view は触らない（フッターナビ副作用回避）。 bottom 固定の要素には一切触らないため、footer nav は元位置のまま。 */ @media screen and (max-width:749px){ .top-area{ height:32px; font-size:11.5px; letter-spacing:0.04em; } .top-area .topnews span{ padding:0 18px; } .top-area .topnews{ animation-duration:24s; } body{ padding-top:32px !important; } header.header, .sm_cat-menu, .sm_cat-menu > header[role="banner"], .drawer-hamburger, .drawer-toggle, button.drawer-toggle.drawer-hamburger{ top:32px !important; } }