@charset "UTF-8";
/* IBM Plex Sans JP */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300;400;500;600;700&family=Saira+Stencil+One&display=swap');

:root { --brand-home: #0066cc; --max-width: 1400px; --sidebar-width: 220px; --color-bg-body: #f4f6f9; --color-group-border: #eeeeee; --color-nav-border: #cccccc; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ====== ヘッダー上下のスクロール・ティッカー ====== */
.ticker-bar {
    width: 100%;
    overflow: hidden;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ticker-clock-bar  { background: #0b2545; color: #e6f0ff; }
.ticker-market-bar { background: #161a2c; color: #ffffff; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: none; }
.ticker-track {
    display: inline-block;
    will-change: transform;
}
.ticker-track-left  { animation: ticker-left  80s linear infinite; }
.ticker-track-right { animation: ticker-right 60s linear infinite; }
@keyframes ticker-left  { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes ticker-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.ticker-bar:hover .ticker-track { animation-play-state: paused; }
.tick-item   { display: inline-block; margin: 0 18px; color: inherit; text-decoration: none; cursor: pointer; }
a.tick-item:hover { filter: brightness(1.25); }
.tick-city   { font-weight: bold; margin-right: 6px; opacity: 0.85; }
.tick-time   { font-family: 'Courier New', monospace; font-variant-numeric: tabular-nums; }
/* 重要拠点のハイライト：東京は桜ピンク、ニューヨークはレモンイエロー */
.tick-item.highlight-tokyo .tick-city,
.tick-item.highlight-tokyo .tick-time { color: #ff8fa3; }
.tick-item.highlight-ny .tick-city,
.tick-item.highlight-ny .tick-time    { color: #ffd54f; }
.tick-label  { color: #fff59d; font-weight: bold; margin-right: 6px; }
.tick-val    { color: #fff59d; margin-right: 6px; font-variant-numeric: tabular-nums; }
.tick-chg    { font-weight: bold; font-size: 11.5px; padding: 0 5px; border-radius: 3px; margin-left: 4px; }
.tick-period { color: #ffffff; font-weight: bold; margin-right: 3px; opacity: 0.95; }
/* 前回比：+ なら青、- なら赤 */
.tick-up     { color: #2196f3; background: rgba(33,150,243,0.18); }
.tick-down   { color: #ff5252; background: rgba(255,82,82,0.18); }
.tick-flat   { color: #aaa;    background: rgba(255,255,255,0.08); }
@media (prefers-reduced-motion: reduce) {
    .ticker-track-left, .ticker-track-right { animation: none; }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
    background: var(--color-bg-body); 
    font-family: "IBM Plex Sans JP", sans-serif; 
    font-weight: 400; 
    margin: 0;
    padding: 0;
}

a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }
img { vertical-align: bottom; max-width: 100%; height: auto; }
ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }

#all { 
    width: 100%; max-width: var(--max-width); margin: 0 auto; background: #fff; min-height: 100vh; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.05);
    opacity: 0; 
    animation: fadeIn 0.8s ease-out forwards; 
}

#body { padding: 20px; flex: 1; }
#body-inside { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: 20px; align-items: start; }
#body-right { min-width: 0; }

#header {
    background-color: #003366;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-2h12v6H42V6zm14 0h12v6H56V6zm0-2h12v6H56V4zM42 4h12v6H42V4zm-14 0h12v6H28V4zM14 0h12v6H14V0zM0 8h12v6H0V8zm14 0h12v6H14V8zm28 0h12v6H42V8zm14 0h12v6H56V8zM0 14h12v6H0v-6zm14 0h12v6H14v-6zm28 0h12v6H42v-6zm14 0h12v6H56v-6zM0 20h12v6H0v-6zm14 0h12v6H14v-6zm28 0h12v6H42v-6zm14 0h12v6H56v-6zM0 26h12v6H0v-6zm14 0h12v6H14v-6zm28 0h12v6H42v-6zm14 0h12v6H56v-6zM0 32h12v6H0v-6zm14 0h12v6H14v-6zm28 0h12v6H42v-6zm14 0h12v6H56v-6zM0 38h12v6H0v-6zm14 0h12v6H14v-6zm28 0h12v6H42v-6zm14 0h12v6H56v-6zM0 44h12v6H0v-6zm14 0h12v6H14v-6zm28 0h12v6H42v-6zm14 0h12v6H56v-6zm-1-1h2v2H-1v-2zm14 0h2v2H13v-2zm14 0h2v2H27v-2zm14 0h2v2H41v-2zm14 0h2v2H55v-2zM69 0h12v6H69V0zm0 8h12v6H69V8zm0 6h12v6H69v-6zm0 6h12v6H69v-6zm0 6h12v6H69v-6zm0 6h12v6H69v-6zm0 6h12v6H69v-6z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #003366, #0066cc);
    padding: 20px 25px;
    color: #fff;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }

.logo-img { max-height: 80px; }
.logo-text-group { margin-top: 10px; }
.logo-sitename { font-size: 13px; font-weight: bold; }
.logo-status { color: #ffeb3b; font-size: 15px; margin-top: 3px; font-weight: 500; white-space: nowrap; }

#se-wrapper { width: 100%; max-width: 600px; position: relative; }
/* 検索フォーム：input と検索ボタンを横並び（隙間なく密着） */
.search-row { display: flex; align-items: stretch; gap: 0; margin-bottom: 0; }
#se .input { flex: 1; min-width: 0; padding: 12px; border: none; background: rgba(255,255,255,0.95); border-radius: 4px 0 0 4px; margin-bottom: 0; font-size: 16px; font-family: "IBM Plex Sans JP", sans-serif; color: #333; font-weight: 500; }
.search-row .btn-se { flex: 0 0 auto; padding: 0 24px; border-radius: 0 4px 4px 0; background: linear-gradient(135deg, #4285f4 0%, #9b72cb 50%, #d96570 100%); border: none; color: #fff; cursor: pointer; font-family: "IBM Plex Sans JP", sans-serif; font-size: 14px; font-weight: bold; white-space: nowrap; transition: filter 0.15s; }
.search-row .btn-se:hover { filter: brightness(1.1); }
.se-hint { font-size: 0.75rem; color: rgba(255,255,255,0.85); margin-top: 6px; text-align: center; letter-spacing: 0.02em; }

.nav-links { display: flex; flex-direction: column; gap: 6px; }

.btn-nav { display: flex; align-items: center; justify-content: center; padding: 12px 2px; font-weight: bold; color: #fff; border-radius: 4px; cursor: pointer; font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,0.1); line-height: 1.2; }
.btn-nav::before { content: ""; display: none; width: 20px; height: 20px; margin-right: 6px; background-size: 70%; background-repeat: no-repeat; background-position: center; flex-shrink: 0; background-color: #fff; border-radius: 50%; }
.btn-nav.rakuten::before, .btn-nav.yahoo-s::before, .btn-nav.yahoo-a::before, .btn-nav.mercari::before, .btn-nav.google-map::before, .btn-nav.contact::before, .btn-nav.youtube::before, .btn-nav.amazon::before { display: inline-block; }
.btn-nav.rakuten::before { background-image: url('https://www.google.com/s2/favicons?domain=rakuten.co.jp&sz=32'); }
.btn-nav.yahoo-s::before, .btn-nav.yahoo-a::before { background-image: url('https://www.google.com/s2/favicons?domain=yahoo.co.jp&sz=32'); }
.btn-nav.mercari::before { background-image: url('https://www.google.com/s2/favicons?domain=jp.mercari.com&sz=32'); }
.btn-nav.youtube::before { background-image: url('https://www.google.com/s2/favicons?domain=youtube.com&sz=32'); }
.btn-nav.amazon::before { background-image: url('https://www.google.com/s2/favicons?domain=amazon.co.jp&sz=32'); }
.btn-nav.google-map::before { background-image: url('https://www.google.com/s2/favicons?domain=google.com&sz=32'); }
.btn-nav.contact::before { content: "✉"; background-image: none; background-color: transparent; color: #fff; width: auto; font-size: 16px; border-radius: 0; }

.btn-nav.home { background: var(--brand-home); }
.btn-nav.rakuten { background: #bf0000; }
.btn-nav.yahoo-s { background: #FF0033; }
.btn-nav.amazon { background: #FF9900; color: #333; text-shadow: none; }
.btn-nav.yahoo-a { background: #ffcc00; color: #333; text-shadow: none; }
.btn-nav.mercari { background: #EA352D; }
.btn-nav.youtube { background: #FF0000; }
.btn-nav.google-map { background: #34A853; }
.btn-nav.contact { background: #333; }

/* ニュースボタン */
.btn-nav.news-local, .btn-nav.news-latest, .btn-nav.nishiusuki-cal {
    padding: 18px 10px;
    font-size: 1.05rem;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    margin-bottom: 5px;
    transition: all 0.1s;
}
.btn-nav.news-local::after, .btn-nav.news-latest::after, .btn-nav.nishiusuki-cal::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: 12px;
    opacity: 0.9;
}
.btn-nav.news-local { background: #00b386; }
.btn-nav.news-latest { background: #0066cc; }
.btn-nav.nishiusuki-cal { background: #d97706; }

/* NEW バッジ（行事カレンダー用、揺れ＋拡縮＋光るパルス） */
.new-badge {
    display: inline-block;
    background: #ffeb3b;
    color: #d32f2f;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    box-shadow: 0 0 0 0 rgba(255,235,59,0.9);
    transform-origin: center center;
    animation: newPulse 1.4s ease-in-out infinite;
}
@keyframes newPulse {
    0%   { transform: scale(1)    rotate(-4deg); box-shadow: 0 0 0 0   rgba(255,235,59,0.9); }
    50%  { transform: scale(1.18) rotate(4deg);  box-shadow: 0 0 0 10px rgba(255,235,59,0); }
    100% { transform: scale(1)    rotate(-4deg); box-shadow: 0 0 0 0   rgba(255,235,59,0); }
}
@media (prefers-reduced-motion: reduce) {
    .new-badge { animation: none; }
}

/* ニュース＆カレンダーボタン内側装飾：外枠から5px、線幅2pxの白い点線 */
.btn-nav.news-local::before, .btn-nav.news-latest::before, .btn-nav.nishiusuki-cal::before {
    content: "";
    display: block !important;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    pointer-events: none;
    background: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* ニュースボタンはナビ先頭に配置されるので、最新ニュースの下にギャップを入れる */
.nav-links li:has(.news-latest) {
    margin-bottom: 20px;
}

#group-nav { margin-bottom: 30px; padding: 10px; background: #fff; border-radius: 8px; border: 2px solid var(--color-nav-border); }
#group-nav ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
#group-nav li { width: 100%; }
#group-nav a { display: flex; align-items: center; justify-content: center; padding: 2px 8px; background: #f8f9fa; color: #333; border-radius: 6px; font-weight: bold; text-align: center; border: 1px solid #e0e0e0; width: 100%; min-height: 36px; font-size: 0.85rem; line-height: 1.1; }

.group-section { margin-bottom: 25px; border: 1px solid var(--color-group-border); border-radius: 8px; padding: 20px; background: #fff; }
.group-title { font-size: 1.5em; border-left: 6px solid #f39c12; padding-left: 15px; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; font-weight: bold; }

.link-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.link-card { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; padding: 5px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90px; transition: transform 0.2s; }
.link-card:hover { background: #fff; border-color: var(--brand-home); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.card-icon img { width: 32px; height: 32px; margin-bottom: 6px; object-fit: contain; }
.link-card .card-text { font-weight: bold; font-size: 0.95em; line-height: 1.4; width: 100%; }

.link-cards.news-mode { grid-template-columns: repeat(3, 1fr); }
.news-mode .link-card { height: auto; min-height: 200px; justify-content: flex-start; padding: 15px 10px; position: relative; padding-bottom: 40px; }
.news-mode .news-thumb { display: block; width: 100%; margin-bottom: 8px; text-align: center; }
.news-mode .news-thumb img { width: 100%; height: 100px; object-fit: cover; object-position: top center; border-radius: 4px; background: #f5f5f5; }
.news-mode .card-text { text-align: left; overflow: visible; white-space: normal; display: block; -webkit-line-clamp: unset; }
.news-mode .news-date-sub { position: absolute; bottom: 10px; right: 10px; font-size: 0.75em; color: #888; margin: 0; }

/* 西臼杵 行事予定ボタン（左サイド先頭） */
.calendar-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; margin-bottom: 10px; background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); color: #fff; font-weight: bold; font-size: 0.85em; border-radius: 6px; text-decoration: none; box-shadow: 0 2px 5px rgba(8,145,178,0.3); transition: transform 0.15s, box-shadow 0.15s; }
.calendar-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(8,145,178,0.4); color: #fff; }
.calendar-btn-icon { display: inline-block; font-size: 1em; line-height: 1; }

/* カレンダー注意書き（page-header 内、サイト説明の直下） */
.cal-notice {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: #fff8e1;
    border-left: 4px solid #f59e0b;
    border-radius: 0 4px 4px 0;
    color: #78350f;
    font-size: 0.88em;
    line-height: 1.5;
}

/* 月ナビ */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 8px 12px; background: #f4f6f9; border-radius: 6px; gap: 12px; }
.cal-nav-btn { padding: 4px 12px; background: #fff; border: 1px solid #d1d5db; border-radius: 4px; color: #333; text-decoration: none; font-size: 0.9em; font-weight: bold; }
.cal-nav-btn:hover { background: #0891b2; color: #fff; border-color: #0891b2; }
.cal-nav-title { flex: 1; text-align: center; font-size: 1.2em; font-weight: bold; color: #0891b2; }
.cal-nav-actions { display: flex; align-items: center; gap: 10px; }

/* 凡例（町×団体の2軸） */
.cal-legend { margin-bottom: 12px; font-size: 0.85em; color: #555; padding: 8px 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; }
.cal-legend-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cal-legend-row + .cal-legend-row { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e5e7eb; }
.cal-legend-label { font-weight: bold; color: #333; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.cal-legend-srcchar { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; background: #fff; border: 2px solid #555; border-radius: 50%; font-weight: bold; font-size: 0.85em; color: #333; }
.cal-legend-note { font-size: 0.82em; color: #666; margin-left: 8px; }
.cal-legend-note .cal-evt-mark { margin: 0 2px; }
/* フィルタチェックボックス */
.cal-filter-label { cursor: pointer; user-select: none; padding: 2px 4px; border-radius: 3px; transition: background 0.1s; }
.cal-filter-label:hover { background: #e0f2fe; }
.cal-filter-label input[type="checkbox"] { margin: 0 4px 0 0; cursor: pointer; transform: scale(1.1); }
.cal-filter-label:has(input:not(:checked)) { opacity: 0.45; }
.cal-filter-reset { margin-left: auto; padding: 3px 10px; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 0.82em; color: #333; }
.cal-filter-reset:hover { background: #0891b2; color: #fff; border-color: #0891b2; }
/* 非表示状態 */
.cal-evt-wrap.cal-filtered, .cal-list-popup-list li.cal-filtered { display: none !important; }

/* 一覧ホバーボタン */
.cal-list-hover { position: relative; display: inline-block; }
/* ボタン直下のホバー判定ブリッジ（ボタン→ポップアップ間の隙間にマウスが入っても判定が外れないように） */
.cal-list-hover::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; pointer-events: auto; }
.cal-list-btn { padding: 4px 12px; background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); color: #fff; border: none; border-radius: 4px; font-size: 0.9em; font-weight: bold; cursor: pointer; }
.cal-list-btn:hover { box-shadow: 0 2px 6px rgba(8,145,178,0.4); }
.cal-list-popup { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 480px; overflow-y: auto; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,0.15); padding: 12px 14px; z-index: 1000; }
.cal-list-hover:hover .cal-list-popup, .cal-list-hover:focus-within .cal-list-popup { display: block; }
.cal-list-popup-title { font-size: 0.95em; font-weight: bold; color: #0891b2; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 2px solid #cffafe; }
.cal-list-empty { font-size: 0.9em; color: #999; margin: 6px 0; }
.cal-list-popup-list { list-style: none; padding: 0; margin: 0; }
.cal-list-popup-list li { margin-bottom: 4px; }
.cal-list-popup-list a, .cal-list-popup-list .cal-side-item-static { display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px; border-radius: 4px; text-decoration: none; color: inherit; transition: background 0.15s; }
.cal-list-popup-list a:hover { background: #ecfeff; }
.cal-side-day { flex: 0 0 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: bold; font-size: 0.8em; display: inline-flex; align-items: center; justify-content: center; }
.cal-side-text { flex: 1; font-size: 0.82em; line-height: 1.4; min-width: 0; }
.cal-side-meta { display: block; font-size: 0.85em; color: #888; }

/* スマホ向け日付順リスト（PC ではデフォルト非表示、@media で切替） */
.cal-list-mobile { display: none; }

/* 月カレンダーグリッド：全幅・等間隔・月曜始まり */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #d1d5db; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; width: 100%; }
.cal-head { background: #f4f6f9; padding: 6px 4px; text-align: center; font-size: 0.9em; font-weight: bold; color: #333; }
.cal-head.cal-sun { color: #dc2626; }
.cal-head.cal-sat { color: #2563eb; }
.cal-cell { background: #fff; min-height: 130px; padding: 6px 6px 8px; position: relative; min-width: 0; }
.cal-cell.cal-empty { background: #fafafa; }
.cal-cell.cal-today { background: #fffbeb; box-shadow: inset 0 0 0 2px #f59e0b; }
.cal-cell.cal-othermonth { background: #f5f7fa; }
.cal-cell.cal-othermonth .cal-day { color: #999; }
.cal-cell.cal-othermonth .cal-evt { opacity: 0.65; }
.cal-cell.cal-othermonth .cal-evt-mark { opacity: 0.85; }
/* 祝日：日付欄を赤に */
.cal-cell.cal-isholiday > .cal-day { color: #dc2626; }
.cal-cell.cal-isholiday.cal-othermonth > .cal-day { color: #f87171; }
.cal-holiday { display: block; font-size: 0.7em; color: #dc2626; font-weight: bold; margin-bottom: 2px; line-height: 1.25; }
.cal-cell.cal-othermonth .cal-holiday { color: #f87171; }
/* 六曜は日付（.cal-day）の右側に余白を空けて配置（span でインライン表示） */
.cal-rokuyou { display: inline-block; vertical-align: middle; font-size: 0.62em; padding: 1px 5px; margin-left: 8px; margin-bottom: 4px; border-radius: 2px; color: #333; background: #f1f5f9; line-height: 1.4; }
.cal-rokuyou-taian      { background: #fef3c7; color: #92400e; }
.cal-rokuyou-shakku     { background: #fee2e2; color: #991b1b; }
.cal-rokuyou-senshou    { background: #e0e7ff; color: #3730a3; }
.cal-rokuyou-tomobiki   { background: #d1fae5; color: #065f46; }
.cal-rokuyou-senpu      { background: #f1f5f9; color: #475569; }
.cal-rokuyou-butsumetsu { background: #e5e7eb; color: #374151; }
/* 表示トグル */
body.no-holidays .cal-holiday { display: none; }
body.no-holidays .cal-cell.cal-isholiday > .cal-day { color: inherit; }
body.no-holidays .cal-cell.cal-isholiday.cal-sun > .cal-day { color: #dc2626; }
body.no-holidays .cal-cell.cal-isholiday.cal-sat > .cal-day { color: #2563eb; }
body.no-rokuyou .cal-rokuyou { display: none; }
.cal-cell.cal-sun .cal-day { color: #dc2626; }
.cal-cell.cal-sat .cal-day { color: #2563eb; }
/* 日付は <a> で Wikipedia「M月D日」へリンクするが、見た目は地の文のまま（下線なし・色継承・指カーソルのみ） */
.cal-day { display: inline-block; vertical-align: middle; font-size: 0.95em; font-weight: bold; color: #333; margin-bottom: 4px; text-decoration: none; cursor: pointer; }
.cal-day:link, .cal-day:visited, .cal-day:hover, .cal-day:active { text-decoration: none; }
.cal-list-day-mmdd { text-decoration: none; color: inherit; cursor: pointer; }
.cal-list-day-mmdd:link, .cal-list-day-mmdd:visited, .cal-list-day-mmdd:hover, .cal-list-day-mmdd:active { text-decoration: none; }
.cal-events { display: flex; flex-direction: column; gap: 3px; }
.cal-evt-wrap { position: relative; display: block; }
.cal-evt { display: block; font-size: 0.78em; line-height: 1.35; padding: 2px 5px 2px 6px; background: #f9fafb; border-left: 4px solid #ccc; color: #222; text-decoration: none; border-radius: 2px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; cursor: default; }
.cal-evt-wrap:hover .cal-evt { background: #ecfeff; }
.cal-evt-more { font-size: 0.72em; color: #888; padding-left: 4px; }

/* 町＋団体の短縮バッジ：色は町色（線と一致）、文字で町と団体を区別 */
.cal-evt-mark { display: inline-block; padding: 0 5px; margin-right: 4px; color: #fff; font-size: 0.82em; font-weight: bold; line-height: 1.5; border-radius: 3px; vertical-align: baseline; white-space: nowrap; letter-spacing: 0.04em; }

/* セル内ホバーポップアップ */
/* popup は wrap に密着 (margin:0)。見た目の余白は内側 padding で確保。
   隙間があるとカーソルが popup の下半分へ移動する途中で hover が切れていた問題を解消。 */
.cal-evt-popup { display: none; position: absolute; top: 0; left: 100%; margin-left: 0; width: 280px; padding: 10px 12px 12px 20px; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 10px 22px rgba(0,0,0,0.18); z-index: 200; font-size: 0.85em; line-height: 1.5; color: #222; white-space: normal; text-align: left; }
.cal-evt-wrap:hover .cal-evt-popup, .cal-evt-wrap:focus-within .cal-evt-popup { display: block; }
.cal-evt-popup-title { display: block; font-weight: bold; padding: 0 0 6px 8px; margin: -2px 0 6px; border-left: 4px solid #ccc; border-bottom: 1px solid #eee; line-height: 1.35; color: #111; }
.cal-evt-popup-meta { display: block; font-size: 0.85em; color: #666; margin-bottom: 6px; }
.cal-evt-popup-img { display: block; width: 100%; max-height: 130px; object-fit: cover; border-radius: 4px; margin-bottom: 8px; background: #f5f5f5; }
.cal-evt-popup-desc { display: block; font-size: 0.92em; color: #333; margin-bottom: 8px; max-height: 90px; overflow: hidden; }
.cal-evt-popup-link { display: inline-block; padding: 4px 10px; background: #0891b2; color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.85em; font-weight: bold; margin-top: 2px; margin-right: 6px; }
.cal-evt-popup-link:hover { background: #0e7490; color: #fff; }
.cal-evt-popup-link-sub { background: #6b7280; }
.cal-evt-popup-link-sub:hover { background: #4b5563; }

/* 右端セルではポップアップを左側に展開（密着＋内側padding で見た目調整） */
.cal-grid .cal-cell:nth-child(7n) .cal-evt-popup,
.cal-grid .cal-cell:nth-child(7n-1) .cal-evt-popup { left: auto; right: 100%; margin-left: 0; margin-right: 0; padding: 10px 20px 12px 12px; }

@media screen and (max-width: 900px) {
    .cal-cell { min-height: 90px; padding: 4px 4px 6px; }
    .cal-evt { font-size: 0.68em; }
    .cal-list-popup { right: auto; left: 0; width: 92vw; max-width: 360px; }
}

/* 更新情報ボタン（左サイドバー天気の上） */
.update-info-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; margin-bottom: 12px; background: linear-gradient(135deg, #34d399 0%, #059669 100%); color: #fff; font-weight: bold; font-size: 0.85em; border-radius: 6px; text-decoration: none; box-shadow: 0 2px 5px rgba(5,150,105,0.3); transition: transform 0.15s, box-shadow 0.15s; }
.update-info-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(5,150,105,0.4); color: #fff; }
.update-info-icon { display: inline-block; font-size: 1em; line-height: 1; transform: translateY(-1px); }

/* 更新情報ページ */
.update-info-list { display: flex; flex-direction: column; gap: 28px; }
.update-info-day { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 18px 20px; }
.update-info-date { font-size: 1.05em; font-weight: bold; color: #059669; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #d1fae5; letter-spacing: 0.05em; }
.update-info-entry { padding: 12px 0; border-bottom: 1px dashed #e9eaee; }
.update-info-entry:last-child { border-bottom: none; padding-bottom: 0; }
.update-info-entry:first-child { padding-top: 0; }
.update-info-tag { display: inline-block; padding: 2px 8px; font-size: 0.7em; color: #fff; border-radius: 3px; margin-bottom: 6px; letter-spacing: 0.05em; }
.update-info-title { font-size: 1.05em; font-weight: bold; color: #222; margin: 0 0 6px; line-height: 1.4; }
.update-info-detail { font-size: 0.9em; line-height: 1.65; color: #444; margin: 0; }

/* 最近のニュース：横スクロールカード */
.recent-news-section { margin-bottom: 30px; padding: 16px 18px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; border-left: 6px solid var(--badge-color, #00b386); min-width: 0; max-width: 100%; overflow: hidden; }
.recent-news-title { font-size: 1.15em; font-weight: bold; margin: 0 0 12px; color: #333; }
.recent-news-count { font-size: 0.75em; color: #888; font-weight: normal; margin-left: 6px; }
.recent-news-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.recent-news-scroll::-webkit-scrollbar { height: 8px; }
.recent-news-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.recent-news-scroll::-webkit-scrollbar-thumb:hover { background: #999; }
.recent-news-card { flex: 0 0 180px; background: #f9fafb; border: 1px solid #e3e6ea; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; }
.recent-news-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); border-color: var(--badge-color, #00b386); }
.rn-thumb { width: 100%; aspect-ratio: 16 / 10; background: #eef0f3; overflow: hidden; }
.rn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-thumb-placeholder { background: linear-gradient(135deg, #eef0f3 25%, #e3e6ea 25%, #e3e6ea 50%, #eef0f3 50%, #eef0f3 75%, #e3e6ea 75%); background-size: 14px 14px; }
.rn-meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.rn-site { font-size: 0.7em; color: var(--badge-color, #00b386); font-weight: bold; line-height: 1.2; }
.rn-title { font-size: 0.85em; line-height: 1.4; color: #222; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rn-date { font-size: 0.7em; color: #999; margin-top: auto; padding-top: 4px; }

/* マーケット相対比較チャート（左サイドバー、お問い合わせの下） */
#market-chart-card { margin: 20px auto; background: #fff; padding: 10px 12px 12px; border: 1px solid #e0e0e0; border-radius: 4px; cursor: zoom-in; transition: box-shadow 0.15s, border-color 0.15s; }
#market-chart-card:hover { box-shadow: 0 4px 10px rgba(37,99,235,0.18); border-color: #93c5fd; }
.market-chart-title { margin: 0 0 6px; font-size: 13px; color: #333; font-weight: bold; line-height: 1.3; display: flex; flex-direction: column; gap: 2px; }
.market-chart-title-main { display: flex; align-items: center; gap: 4px; }
.market-chart-sub { display: block; font-size: 10px; color: #888; font-weight: normal; margin-left: 0; }
.market-chart-zoom-hint { margin-left: auto; font-size: 14px; color: #93c5fd; }
#market-chart-card:hover .market-chart-zoom-hint { color: #2563eb; }
.market-chart-range { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 6px; }
.mchart-rng, .mchart-rng-modal { flex: 1 1 auto; min-width: 0; padding: 3px 4px; font-size: 10px; line-height: 1.2; color: #555; background: #f4f6f9; border: 1px solid #d6d9df; border-radius: 3px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.mchart-rng:hover, .mchart-rng-modal:hover { background: #e0f2fe; }
.mchart-rng.active, .mchart-rng-modal.active { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: bold; }
.market-chart-canvas-wrap { position: relative; width: 100%; height: 160px; }
.market-chart-note { margin: 4px 0 0; font-size: 10px; color: #999; text-align: right; }

/* 拡大表示モーダル */
.mchart-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.mchart-modal.open { display: flex; }
.mchart-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.66); backdrop-filter: blur(2px); cursor: zoom-out; }
.mchart-modal-inner { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); width: min(92vw, 1100px); max-height: 90vh; padding: 18px 22px 18px; display: flex; flex-direction: column; }
.mchart-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 28px; line-height: 1; color: #6b7280; cursor: pointer; padding: 4px 10px; border-radius: 4px; }
.mchart-modal-close:hover { color: #111; background: #f3f4f6; }
.mchart-modal-title { margin: 0 0 12px; font-size: 16px; color: #111; font-weight: bold; }
.mchart-modal-title .market-chart-sub { font-size: 12px; }
.mchart-modal-range { margin-bottom: 10px; gap: 6px; }
.mchart-rng-modal { padding: 6px 10px; font-size: 13px; }
.mchart-modal-canvas-wrap { position: relative; width: 100%; flex: 1 1 auto; min-height: 360px; height: calc(90vh - 160px); max-height: 600px; }
.mchart-modal-inner .market-chart-note { font-size: 12px; }
@media screen and (max-width: 768px) {
    .mchart-modal-inner { width: 96vw; padding: 14px 14px 12px; max-height: 94vh; }
    .mchart-modal-title { font-size: 14px; }
    .mchart-rng-modal { font-size: 11px; padding: 4px 6px; }
    .mchart-modal-canvas-wrap { min-height: 280px; height: calc(94vh - 150px); }
}

#qrcode-wrapper { margin: 20px auto; background: #fff; padding: 15px; border: 1px solid #e0e0e0; border-radius: 4px; display: flex; flex-direction: column; align-items: center; text-align: center; }
#qrcode { display: flex; justify-content: center; width: 100%; margin-bottom: 5px; }
.banner-area { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
.banner-btn { display: block; text-align: center; padding: 8px 5px; font-size: 11px; color: #666; background: #f4f6f9; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; line-height: 1.4; }
#footer { text-align: center; padding: 30px; background: #333; color: #999; margin-top: 40px; }

@media screen and (max-width: 768px) {
    #all { box-shadow: none; }
    #body-inside { grid-template-columns: 1fr; gap: 20px; }
    .link-cards { grid-template-columns: 1fr 1fr; }
    .link-cards.news-mode { grid-template-columns: 1fr 1fr; }
    /* === 西臼杵カレンダー: スマホはグリッド廃止、日付順リスト === */
    .cal-grid { display: none !important; }
    .cal-list-mobile { display: block; }
    .cal-list-mobile-empty { padding: 20px; text-align: center; color: #666; background: #fff; border-radius: 6px; border: 1px solid #e2e8f0; }
    .cal-list-day-section { margin-bottom: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
    .cal-list-day-section.cal-list-today { border-color: #0891b2; box-shadow: 0 0 0 2px rgba(8,145,178,0.15); }
    .cal-list-day-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
    .cal-list-day-section.cal-list-today .cal-list-day-head { background: #ecfeff; }
    .cal-list-day-mmdd { font-size: 1.1em; font-weight: bold; color: #0f172a; }
    .cal-list-day-wd { color: #64748b; font-weight: bold; }
    .cal-list-day-head.cal-list-sat .cal-list-day-mmdd,
    .cal-list-day-head.cal-list-sat .cal-list-day-wd { color: #2563eb; }
    .cal-list-day-head.cal-list-sun .cal-list-day-mmdd,
    .cal-list-day-head.cal-list-sun .cal-list-day-wd,
    .cal-list-day-head.cal-list-isholiday .cal-list-day-mmdd,
    .cal-list-day-head.cal-list-isholiday .cal-list-day-wd { color: #dc2626; }
    .cal-list-day-rok { font-size: 0.78em; padding: 2px 8px; border-radius: 10px; }
    .cal-list-day-hol { font-size: 0.78em; padding: 2px 8px; border-radius: 10px; background: #fee2e2; color: #b91c1c; font-weight: bold; }
    .cal-list-day-items { list-style: none; margin: 0; padding: 0; }
    .cal-list-event { border-bottom: 1px solid #f1f5f9; }
    .cal-list-event:last-child { border-bottom: none; }
    .cal-list-event-inner { display: flex; align-items: flex-start; gap: 10px; padding: 12px; text-decoration: none; color: inherit; }
    .cal-list-event a.cal-list-event-inner:active { background: #f8fafc; }
    .cal-list-evt-mark { flex: 0 0 38px; text-align: center; padding: 6px 0; color: #fff; font-weight: bold; font-size: 0.8em; border-radius: 4px; line-height: 1.1; }
    .cal-list-evt-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .cal-list-evt-title { font-weight: bold; font-size: 0.98em; color: #0f172a; line-height: 1.35; word-break: break-word; }
    .cal-list-evt-meta { font-size: 0.78em; color: #64748b; line-height: 1.35; }
    .cal-list-event.cal-filtered { display: none; }
    /* 行事が全件フィルタで消えた日付セクションごと非表示 */
    .cal-list-day-section:not(:has(.cal-list-event:not(.cal-filtered))) { display: none; }
    body.no-holidays .cal-list-day-hol { display: none; }
    body.no-rokuyou  .cal-list-day-rok { display: none; }
    .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .group-title { font-size: 1.2em; }
    .page-header h2 { font-size: 1.4em !important; }
    .nav-links li:has(.home), #qrcode-wrapper, .banner-area, #market-chart-card { display: none !important; }
    /* モバイルでは「西臼杵行事予定」を全幅、自治体/最新を横並び、最新ニュースの下に
       ギャップを入れて、バナー群（楽天〜）が次の行から始まるように分離 */
    .nav-links li:has(.nishiusuki-cal) {
        grid-column: 1 / -1;
    }
    .nav-links li:has(.news-latest) {
        margin-bottom: 10px;
    }
    .weather-item:hover .weather-pop {
        display: none !important;
    }
    #group-nav ul { grid-template-columns: 1fr 1fr; }
    #page-top-btn { display: none !important; }
    .recent-news-card { flex: 0 0 150px; }
    .recent-news-section { padding: 12px 14px; }
    .recent-news-title { font-size: 1.05em; }
    #logo-area a {
        display: flex;
        align-items: center;
    }
    .logo-text-group {
        margin-top: 0;
        margin-left: 10px;
        text-align: left;
    }
}

#suggest-list { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; display: none; max-height: 600px; overflow-y: auto; margin-top: -10px; }
.suggest-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #eee; transition: background 0.2s; color: #333; text-align: left; }
.suggest-item:hover { background: #f0f7ff; }
.suggest-item img { width: 16px; height: 16px; margin-right: 12px; flex-shrink: 0; }
.suggest-item span { font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Google サジェスト（検索キーワード）行：薄いグラデと検索アイコン */
.suggest-item.suggest-search { background: linear-gradient(90deg, #fafbff 0%, #fff 100%); }
.suggest-item.suggest-search:hover { background: #eef3ff; }
.suggest-item.suggest-search span { font-weight: 500; color: #555; }
.suggest-item .suggest-icon-search { width:16px; height:16px; margin-right:12px; flex-shrink:0; font-size:14px; opacity:0.6; text-align:center; }

.sub-link-wrapper { margin-top: 15px; }
.sub-link-btn { display: block; width: 100%; padding: 10px; background: #f4f6f9; border: 1px solid #ddd; cursor: pointer; font-weight: bold; color: #666; text-align: center; border-radius: 4px; }
.sub-link-btn:hover { background: #eee; }
.sub-link-list { list-style: none !important; padding: 15px !important; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; }
.sub-link-list li { margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; display: flex; align-items: center; }
.sub-link-list li:last-child { margin-bottom: 0; border-bottom: none; }
.sub-link-list a { display: flex; align-items: center; font-size: 1.0rem; color: #333; font-weight: bold; width: 100%; }
.sub-link-list img { width: 16px; height: 16px; margin-right: 10px; flex-shrink: 0; }

#weather-sidebar { background: #fff; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px; padding: 5px; }
.weather-title { font-size: 11px; font-weight: bold; color: #003366; border-bottom: 1px solid #eee; margin-bottom: 4px; text-align: center; }
.weather-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 1px; }
.weather-item { position: relative; cursor: pointer; padding: 2px 0; border-radius: 2px; border: 1px solid transparent; transition: background 0.2s; background: #fff; z-index: 1; min-height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; overflow: hidden; }
.weather-item:hover { background: #f0f7ff; border-color: #003366; z-index: 1000; overflow: visible; }
.weather-town { font-size: 13px; font-weight: bold; color: #003366; text-align: center; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; width: 100%; letter-spacing: -1px; }
.weather-temp { font-size: 9px; font-weight: bold; line-height: 1.1; text-align: center; display: block; margin: 0; }
.t-max { color: #f33; } .t-min { color: #36f; } .t-sep { color: #999; margin: 0 1px; }
/* 今日／明日 横スライド（一方向＝右方向ループ、3パネル[明日][今日][明日]構成、CSS自走） */
.weather-slide-wrap { width: 100%; max-width: 100%; overflow: hidden; position: relative; }
.weather-slide      { display: flex; width: 300%; animation: wslide 16s infinite; will-change: transform; }
.weather-pane       { flex: 0 0 33.3333%; min-width: 0; position: relative; text-align: center; }
.weather-row        { display: flex; justify-content: center; align-items: center; gap: 1px; }
.w-icon             { width: 18px; height: 18px; }
.pop-content + .pop-content { border-top: 1px dashed #ddd; }
/* keyframes：5秒ホールド + 3秒なめらかスライド を２回、計16秒で1周
   stay(0%–31%)→glide(31%–50%)→stay(50%–81%)→glide(81%–100%) */
@keyframes wslide {
    0%   { transform: translateX(0);              animation-timing-function: linear; }
    31%  { transform: translateX(0);              animation-timing-function: cubic-bezier(0.65,0,0.35,1); }
    50%  { transform: translateX(-33.3333%);      animation-timing-function: linear; }
    81%  { transform: translateX(-33.3333%);      animation-timing-function: cubic-bezier(0.65,0,0.35,1); }
    100% { transform: translateX(-66.6666%); }
}
/* タイトル「今日／明日の天気」切替（スライドと同じ16秒周期、グライド区間でフェード） */
.wt-label { display: inline-grid; grid-template-areas: 'a'; vertical-align: baseline; }
.wt-label > span { grid-area: a; font-weight: bold; }
/* 「今日」「明日」を白背景でも映える明るめの色に */
.wt-today    { color: #f97316; }  /* 今日：鮮やかオレンジ */
.wt-tomorrow { color: #2196f3; }  /* 明日：鮮やかブルー */
.wt-tomorrow { animation: wt-tomorrow 16s linear infinite; }
.wt-today    { animation: wt-today    16s linear infinite; }
@keyframes wt-tomorrow {
    0%, 31%  { opacity: 1; }
    50%, 81% { opacity: 0; }
    100%     { opacity: 1; }
}
@keyframes wt-today {
    0%, 31%  { opacity: 0; }
    50%, 81% { opacity: 1; }
    100%     { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .weather-slide { animation: none; transform: translateX(-33.3333%); }
    .wt-tomorrow { animation: none; opacity: 0; }
    .wt-today    { animation: none; opacity: 1; }
}
.weather-pop { display: none; position: absolute; left: 105%; top: -10px; margin-left: 5px; background: #fff; border: 2px solid #003366; border-radius: 6px; padding: 0; z-index: 2000; box-shadow: 0 4px 15px rgba(0,0,0,0.3); width: 250px; pointer-events: none; overflow: hidden; }
.weather-item:hover .weather-pop { display: block; }
.pop-title { background: #003366; color: #fff; font-size: 14px; padding: 8px; text-align: center; font-weight: bold; margin: 0; }
.pop-content { font-size: 14px; line-height: 1.5; color: #333; padding: 12px; }

#page-top-btn {
    position: fixed;
    bottom: 50px;
    z-index: 2147483647;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, background 0.3s;
    right: 0;
    left: auto;
    border-radius: 10px 0 0 10px; 
    transform: translateX(100px); 
    background: #003366;
    color: #fff;
    padding: 20px 5px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
    letter-spacing: 3px;
}
#page-top-btn.show { opacity: 1; transform: translateX(0); pointer-events: auto; }
#page-top-btn:hover { background: #0066cc; }

@media screen and (min-width: 1500px) {
    #page-top-btn {
        right: auto;
        left: calc(50% + (var(--max-width) / 2));
        border-radius: 0 10px 10px 0;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }
}

.sub-thumb-wrap { position: relative; margin-right: 10px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.sub-thumb-wrap img.thumb-s { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; margin-right: 0 !important; }
.sub-thumb-wrap img.thumb-l { display: none; position: absolute; bottom: 45px; left: 0; width: 250px; height: auto; max-width: none; border: 2px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 9999; border-radius: 4px; background: #fff; }
.sub-thumb-wrap:hover img.thumb-l { display: block; }

.sub-link-list a:hover { opacity: 1; background-color: #f0f7ff; }

/* Contact & Log Viewer Styles */
.contact-container { max-width: 800px; margin: 0 auto; background: #fff; min-height: 100vh; display: flex; flex-direction: column; }
.contact-header { background: linear-gradient(135deg, #003366, #0066cc); color: #fff; padding: 20px; text-align: center; }
.contact-body { padding: 30px 20px; flex: 1; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 14px; color: #003366; }
.form-control { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px; background: #fdfdfd; box-sizing: border-box; }
.captcha-area { background: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px solid #eee; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.captcha-img { border: 1px solid #ccc; background: #fff; vertical-align: middle; }
.btn-refresh { background: #666; color: #fff; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; }
.btn-primary { background: linear-gradient(135deg, #003366, #0066cc); color: #fff; padding: 12px 30px; font-size: 16px; font-weight: bold; border-radius: 30px; cursor: pointer; border: none; min-width: 160px; }
.btn-secondary { background: #e0e0e0; color: #555; padding: 12px 30px; font-size: 16px; font-weight: bold; border-radius: 30px; cursor: pointer; border: none; min-width: 160px; }

.log-container { width: 98%; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; }
.log-header { background: #003366; color: #fff; padding: 15px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.log-title { font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; gap: 15px; }
.nav-links-log { display: flex; gap: 5px; }
.nav-links-log a { padding: 5px 12px; border-radius: 4px; font-size: 0.9rem; font-weight: bold; text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); }
.nav-links-log a:hover, .nav-links-log a.active { background: rgba(255,255,255,0.4); }
.toolbar { background: #f8f9fa; padding: 10px 20px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.9rem; }
.gen-links a { display: inline-block; padding: 2px 8px; margin-right: 2px; border-radius: 4px; color: #0066cc; background: #eef; text-decoration: none; border: 1px solid transparent; }
.gen-links a.active { background: #0066cc; color: #fff; pointer-events: none; }
.search-box input[type="text"] { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; }
.search-box input[type="submit"] { padding: 4px 10px; background: #0066cc; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.table-wrap { overflow-x: auto; }
table.log-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; }
table.log-table th { background: #004488; color: #fff; padding: 10px; text-align: left; position: sticky; top: 0; }
table.log-table td { padding: 8px 10px; border-bottom: 1px solid #eee; color: #333; }
.cell-date { width: 140px; color: #666; font-family: monospace; }
.cell-ip { min-width: 140px; color: #0066cc; font-family: monospace; }
.host-name { display: block; font-size: 0.75rem; color: #555; margin-top: 3px; }
.cell-main { font-weight: bold; white-space: normal; min-width: 200px; max-width: 500px; }
.cell-ua { color: #555; font-size: 0.75rem; white-space: normal; min-width: 250px; }
.status-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; color: #fff; font-weight: normal; margin-right: 5px; }
.st-view { background: #28a745; } .st-jump { background: #e67e22; } .st-search { background: #17a2b8; }
.st-site { background: #6c757d; } .st-direct { background: #c0392b; }
.st-click { background: #7c3aed; } .st-section { background: #475569; }
.ua-badge { display: inline-block; padding: 2px 5px; border-radius: 3px; font-size: 0.7rem; color: #fff; margin-right: 3px; font-weight: bold; }
.ua-os-win { background: #0078d7; } .ua-os-mac { background: #555; } .ua-os-ios { background: #333; } .ua-os-android { background: #3ddc84; color: #000; } .ua-os-linux { background: #f39c12; } .ua-type-bot { background: #666; } .ua-type-mobile { background: #e91e63; } .ua-type-pc { background: #009688; }
.link-title { text-decoration: underline; color: #0066cc; font-weight: bold; }

.sidebar-title { font-size: 11px; font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px; text-align: center; color: #ffeb3b; }
#world-clocks { background: #0066cc; color: #fff; padding: 10px; border-radius: 4px; margin: 15px 0; font-family: monospace; border: 1px solid rgba(255,255,255,0.2); }
.clock-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.clock-time { font-weight: bold; color: #00d4ff; }
#market-info { background: #003366; color: #fff; padding: 10px; border-radius: 4px; margin: 15px 0; font-family: monospace; border: 1px solid rgba(255,255,255,0.2); }
.market-block { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.market-block:last-child { border-bottom: none; }
.market-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.m-name { color: #fff; }
.m-val { font-weight: bold; color: #00d4ff; }
.market-changes { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; margin-top: 3px; color: rgba(255,255,255,0.65); }
.market-changes > span { white-space: nowrap; }
.rate-up { color: #4caf50; font-weight: bold; }
.rate-down { color: #ff5252; font-weight: bold; }