/* ============================================================
   facebook_log.css
   大阪陳列株式会社 Facebook過去ログ各月ページ 専用スタイルシート
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;700&display=swap');

/* ---------- CSS変数 ---------- */
:root {
  --color-bg:           #0a0a1e;
  --color-bg2:          #0f0f2a;
  --color-surface:      #16163a;
  --color-surface2:     #1c1c48;
  --color-border:       #2a2a6a;
  --color-border-light: #3a3a8a;
  --color-accent:       #4a90d9;
  --color-accent2:      #5ba3f0;
  --color-accent-gold:  #d4a93a;
  --color-accent-gold2: #f0c84a;
  --color-text:         #e8e8f8;
  --color-text-muted:   #9090c0;
  --color-text-dim:     #5a5a90;
  --color-link:         #7ab8f5;
  --color-link-hover:   #f0c84a;
  --color-header-top:   #080818;
  --color-tel-bg:       #1a5a1a;
  --color-tel-hover:    #2a7a2a;
  --color-contact-bg:   #4a2a6a;
  --color-contact-hover:#6a3a9a;
  --color-access-bg:    #3a3a1a;
  --color-access-hover: #5a5a2a;
  --color-nav-bg:       #13133a;
  --color-nav-border:   #2a2a6a;
  --color-nav-btn:      #1e1e50;
  --color-nav-btn-h:    #2a2a70;
  --color-post-bg:      #13133a;
  --color-post-border:  #2a2a6a;
  --color-post-head:    #1a1a4a;
  --color-fb-blue:      #1877f2;
  --shadow-card:        0 4px 20px rgba(0,0,0,0.5);
  --radius-card:        8px;
  --radius-btn:         6px;
  --font-main:          'Noto Sans JP', sans-serif;
  --font-serif:         'Noto Serif JP', serif;
  --transition:         0.2s ease;
}

/* ---------- リセット・基本 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(74,144,217,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(90,60,160,0.07) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(42,42,106,0.12) 39px, rgba(42,42,106,0.12) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(42,42,106,0.06) 39px, rgba(42,42,106,0.06) 40px);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}

a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* ---------- ページトップへ戻るボタン ---------- */
#page-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 46px; height: 46px;
  background: var(--color-accent); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, background var(--transition);
  z-index: 999; text-decoration: none;
  box-shadow: 0 2px 12px rgba(74,144,217,0.4);
}
#page-top.visible { opacity: 1; pointer-events: auto; }
#page-top:hover { background: var(--color-accent2); text-decoration: none; color: #fff; }

/* ---------- ヘッダー ---------- */
.site-header {
  background: var(--color-header-top);
  border-bottom: 2px solid var(--color-border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.header-inner {
  max-width: 860px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.header-logo a { color: #fff; text-decoration: none; }
.logo-main {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700;
  color: #fff; letter-spacing: 0.03em; line-height: 1.3;
}
.logo-sub { font-size: 0.72rem; color: var(--color-text-muted); }
.header-cta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn-tel {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-tel-bg); color: #fff !important;
  padding: 7px 13px; border-radius: var(--radius-btn);
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background var(--transition), transform var(--transition);
  text-decoration: none !important; white-space: nowrap;
}
.btn-tel:hover { background: var(--color-tel-hover); transform: translateY(-1px); text-decoration: none !important; }

.btn-contact {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-contact-bg); color: #fff !important;
  padding: 7px 13px; border-radius: var(--radius-btn);
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background var(--transition), transform var(--transition);
  text-decoration: none !important; white-space: nowrap;
}
.btn-contact:hover { background: var(--color-contact-hover); transform: translateY(-1px); text-decoration: none !important; }

.btn-access {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-access-bg); color: #fff !important;
  padding: 7px 13px; border-radius: var(--radius-btn);
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.15);
  transition: background var(--transition), transform var(--transition);
  text-decoration: none !important; white-space: nowrap;
}
.btn-access:hover { background: var(--color-access-hover); transform: translateY(-1px); text-decoration: none !important; }

/* ---------- メインコンテナ ---------- */
.main-container { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }

/* ---------- パンくず ---------- */
.breadcrumb {
  font-size: 0.78rem; color: var(--color-text-dim); margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-text-dim); }
.breadcrumb a:hover { color: var(--color-link-hover); }
.breadcrumb span { margin: 0 6px; }

/* ---------- ページタイトルエリア ---------- */
.page-title-area {
  text-align: center; padding: 24px 16px 20px;
  border-bottom: 1px solid var(--color-border); margin-bottom: 20px;
}
.page-title-area h1 {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
  color: #fff; line-height: 1.5; margin-bottom: 6px;
}
.page-title-area h1 a { color: var(--color-accent-gold2); }
.page-title-area h1 a:hover { color: #fff; text-decoration: underline; }
.page-title-sub { font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- 月ナビゲーション ---------- */
.month-nav {
  background: var(--color-nav-bg);
  border: 1px solid var(--color-nav-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.month-nav-prev, .month-nav-next {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-nav-btn); color: var(--color-link) !important;
  padding: 8px 16px; border-radius: var(--radius-btn);
  font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--color-border-light);
  transition: background var(--transition), color var(--transition);
  text-decoration: none !important; white-space: nowrap;
}
.month-nav-prev:hover, .month-nav-next:hover {
  background: var(--color-nav-btn-h); color: var(--color-link-hover) !important;
  text-decoration: none !important;
}
.month-nav-prev.disabled, .month-nav-next.disabled {
  opacity: 0.35; pointer-events: none; cursor: default;
}
.month-nav-current {
  font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700;
  color: var(--color-accent-gold2); text-align: center; flex: 1;
  letter-spacing: 0.05em;
}
.month-nav-index {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-accent); color: #fff !important;
  padding: 8px 14px; border-radius: var(--radius-btn);
  font-size: 0.8rem; font-weight: 700;
  text-decoration: none !important; white-space: nowrap;
  transition: background var(--transition);
}
.month-nav-index:hover { background: var(--color-accent2); text-decoration: none !important; }

/* ---------- 説明ボックス ---------- */
.description-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-card);
  padding: 14px 18px; margin-bottom: 16px;
  font-size: 0.88rem; color: var(--color-text); line-height: 1.8;
}

/* ---------- Facebookバナー ---------- */
.fb-banner {
  background: linear-gradient(135deg, #1a3a6a 0%, #1e4080 100%);
  border: 1px solid #2a5a9a; border-radius: var(--radius-card);
  padding: 14px 18px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow-card);
}
.fb-banner-main { font-weight: 700; color: #fff; margin-bottom: 2px; }
.fb-banner-sub { font-size: 0.78rem; color: var(--color-text-muted); }
.fb-banner-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-fb-blue); color: #fff !important;
  padding: 8px 16px; border-radius: var(--radius-btn);
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none !important; white-space: nowrap;
  transition: background var(--transition);
}
.fb-banner-link:hover { background: #2a87ff; text-decoration: none !important; }

/* ---------- 投稿エリア（元のtableをラップするコンテナ） ---------- */
.posts-area {
  background: var(--color-post-bg);
  border: 1px solid var(--color-post-border);
  border-radius: var(--radius-card);
  padding: 8px 16px; margin-bottom: 20px;
  overflow-x: auto;
}

/* 元のtableスタイルをダークテーマに上書き */
.posts-area table { width: 100% !important; border-collapse: collapse; }
.posts-area td { color: var(--color-text) !important; vertical-align: top; }
.posts-area font { color: inherit !important; }
.posts-area .style116 { background: transparent !important; }
.posts-area .style106 { color: var(--color-accent-gold2) !important; font-family: var(--font-serif); }
.posts-area .style123 { color: var(--color-accent2) !important; }
.posts-area .style74  { color: var(--color-text) !important; }
.posts-area .style122 { background: transparent !important; }
.posts-area .style118 { background: transparent !important; }
.posts-area .style119 { background: transparent !important; }
.posts-area hr { border-color: var(--color-border) !important; }
.posts-area a { color: var(--color-link) !important; }
.posts-area a:hover { color: var(--color-link-hover) !important; }
.posts-area img {
  max-width: 100%; height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.posts-area strong { color: #fff; }

/* ---------- アクセスカード ---------- */
.access-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 20px; margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
.access-card h2 {
  font-family: var(--font-serif); font-size: 0.95rem; font-weight: 700;
  color: var(--color-accent-gold2); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--color-border);
}
.access-info { font-size: 0.88rem; color: var(--color-text); line-height: 1.9; margin-bottom: 10px; }
.access-info strong { color: #fff; }
.access-note {
  font-size: 0.82rem; color: var(--color-accent-gold2);
  background: rgba(212,169,58,0.08);
  border: 1px solid rgba(212,169,58,0.2);
  border-radius: 4px; padding: 7px 12px; margin-bottom: 12px;
}
.access-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- CTAバナー ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-surface2) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card);
  padding: 22px 20px; text-align: center; margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
.cta-banner h2 { font-family: var(--font-serif); font-size: 1rem; color: #fff; margin-bottom: 6px; }
.cta-banner p { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 14px; }
.cta-banner .cta-reception { font-size: 0.78rem; color: var(--color-text-dim); margin-top: 8px; }
.cta-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-cta-tel {
  display: inline-flex; align-items: center; gap: 7px;
  background: #1a6a1a; color: #fff !important;
  padding: 11px 22px; border-radius: var(--radius-btn);
  font-size: 0.95rem; font-weight: 700;
  text-decoration: none !important;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 2px 10px rgba(0,100,0,0.3);
}
.btn-cta-tel:hover { background: #2a8a2a; transform: translateY(-2px); text-decoration: none !important; }
.btn-cta-contact {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--color-contact-bg); color: #fff !important;
  padding: 11px 22px; border-radius: var(--radius-btn);
  font-size: 0.95rem; font-weight: 700;
  text-decoration: none !important;
  transition: background var(--transition), transform var(--transition);
}
.btn-cta-contact:hover { background: var(--color-contact-hover); transform: translateY(-2px); text-decoration: none !important; }

/* ---------- フッター ---------- */
.site-footer {
  background: var(--color-header-top);
  border-top: 1px solid var(--color-border);
  padding: 22px 20px; text-align: center;
}
.footer-inner { max-width: 860px; margin: 0 auto; }
.footer-links {
  display: flex; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 10px; font-size: 0.82rem;
}
.footer-links a { color: var(--color-text-muted); }
.footer-links a:hover { color: var(--color-link-hover); }
.footer-copy { font-size: 0.78rem; color: var(--color-text-dim); line-height: 1.6; }
.footer-copy a { color: var(--color-text-dim); }
.footer-copy a:hover { color: var(--color-link-hover); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 640px) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .header-cta { width: 100%; }
  .btn-tel, .btn-contact, .btn-access {
    flex: 1; justify-content: center; font-size: 0.75rem; padding: 7px 6px;
  }
  .month-nav { flex-direction: column; align-items: stretch; gap: 8px; }
  .month-nav-prev, .month-nav-next { justify-content: center; }
  .month-nav-current { font-size: 1rem; }
  .month-nav-index { justify-content: center; }
  .cta-buttons { flex-direction: column; }
  .btn-cta-tel, .btn-cta-contact { width: 100%; justify-content: center; }
  .fb-banner { flex-direction: column; }
  .fb-banner-link { justify-content: center; }
  .access-btns { flex-direction: column; }
  .access-btns a { justify-content: center; }
  .posts-area { padding: 4px 8px; }
}

@media (max-width: 400px) {
  .header-cta { flex-direction: column; }
  .btn-tel, .btn-contact, .btn-access { width: 100%; }
}