* { margin: 0; padding: 0; box-sizing: border-box; }

/* フロントページは外側（body）スクロールを禁止し、内側スクロールのみにする */
html { height: 100%; }
body.home { height: 100%; overflow: hidden; }

/* ── ラッパー：グリッドレイアウト ── */
.sep-wrap {
  width: 100%;
  max-width: 2560px;          /* ウルトラワイドでも横に伸びすぎないよう制限 */
  margin: 0 auto;             /* 中央寄せ（左右の余白＝将来の広告スペース） */
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
}

/* 2560px の外側（左右の余白）の背景 */
body.home { background: #e9ebf0; }

/* ── タブバー（row 1） ── */
.sep-tab-bar { grid-row: 1; grid-column: 1; display: flex; background: #f5f5f5; border-bottom: 1px solid #e0e0e0; transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 60px; opacity: 1; overflow: hidden; }
.sep-tab-bar.hidden { max-height: 0; opacity: 0; border: none; }
.sep-content-tab { flex: 1; padding: 8px 6px; text-align: center; font-size: 13px; color: #666; cursor: pointer; border-right: 1px solid #e0e0e0; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sep-content-tab:last-child { border-right: none; }
.sep-content-tab.active { color: #1a1a2e; font-weight: 500; background: #fff; }
.sep-content-tab:hover { background: #fff; }
.sep-content-tab img { height: 24px; width: auto; }

/* ── メニューバー（row 2 / ロゴに重なる） ── */
.sep-menu-bar {
  grid-row: 2;
  grid-column: 1;
  z-index: 100;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;          /* 最上部は透明（後ろの大ロゴが透ける） */
  border-bottom: 1px solid transparent;
  padding: 8px 12px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* スクロール後：不透明 */
.sep-menu-bar.solid {
  background: #f5f5f5;
  border-bottom-color: #e0e0e0;
}

/* メニュー左：小ロゴ＋名称（大ロゴが消えたら表示） */
.sep-menu-logo { display: flex; align-items: center; gap: 8px; min-width: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.sep-menu-bar.solid .sep-menu-logo { opacity: 1; }
.sep-menu-logo img { display: none; height: 30px; width: auto; flex-shrink: 0; }
.sep-menu-logo.has-icon img { display: block; }   /* 小アイコンがある時のみ表示 */
.sep-menu-logo-name { font-size: 16px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* メニュー右：ボタン群 */
.sep-menu-area { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sep-menu-links { display: flex; gap: 6px; align-items: center; }
.sep-menu-btn { padding: 5px 10px; font-size: 12px; color: #555; border: 1px solid #d8d8d8; border-radius: 6px; background: rgba(255,255,255,0.92); cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.sep-menu-btn:hover { background: #fff; }
.sep-menu-btn.active { color: #3a5a98; border-color: #3a5a98; background: #e6efff; }
.sep-hamburger { display: none; padding: 5px 9px; font-size: 15px; color: #555; border: 1px solid #d8d8d8; border-radius: 6px; background: rgba(255,255,255,0.92); cursor: pointer; }

/* ── 小画面（600px未満）：ハンバーガー＋縦メニュー ── */
@media (max-width: 599px) {
  .sep-hamburger { display: block; }
  .sep-menu-links {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    z-index: 200;
  }
  .sep-menu-links.open { display: flex; }
  .sep-menu-links .sep-menu-btn { width: 100%; text-align: center; padding: 8px 14px; font-size: 13px; }
}

/* ── 横スクロール（row 2〜3 / メニューバーと重なって開始） ── */
.sep-h-scroll { grid-row: 2 / 4; grid-column: 1; display: flex; overflow-x: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.sep-h-scroll::-webkit-scrollbar { display: none; }
.sep-pane { min-width: 100%; display: flex; flex-direction: column; height: 100%; }
.sep-v-scroll { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.sep-v-scroll::-webkit-scrollbar { display: none; }

/* ── ペインロゴ（スクロール内ヒーロー） ── */
.sep-pane-logo img { width: 100%; height: auto; display: block; }
.sep-pane-logo-text { padding: 80px 20px 40px; background: #f0f0f5; }
.sep-pane-logo-text span { font-size: 36px; font-weight: 700; color: #1a1a2e; }

/* ── セクション（内容なりの高さ＝方針B） ── */
.sep-section { padding: 28px 20px; border-bottom: 1px solid #e0e0e0; }

/* セクション別の背景色（タイトルは同系の濃色／カードは白） */
.sep-section[data-s="news"]       { background: #F5C6D0; }   /* パステルローズ */
.sep-section[data-s="news"] h2    { color: #B23A57; }
.sep-section[data-s="products"]   { background: #D4F1D4; }   /* パステルグリーン */
.sep-section[data-s="products"] h2{ color: #2E7D32; }
.sep-section[data-s="characters"] { background: #E6D9F5; }   /* パステルラベンダー */
.sep-section[data-s="characters"] h2 { color: #6A3FA0; }
.sep-section[data-s="goods"]      { background: #F5DCC6; }   /* パステルピーチ */
.sep-section[data-s="goods"] h2   { color: #C2702B; }

/* 末尾スペーサー：最後のセクションも画面トップへ飛べるよう、不足分だけJSで高さを付与 */
.sep-tail-spacer { flex: 0 0 auto; height: 0; }
.sep-section h2 { font-size: 20px; font-weight: 500; margin-bottom: 16px; color: #1a1a2e; }
.sep-section p { font-size: 14px; line-height: 1.7; color: #666; }

/* ── コンテンツ枠（小・中・大の定型カード） ── */
/* グリッド：12カラム。各カードの span でサイズを表現 */
.sep-cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 8px;
}

/* カード共通 */
.sep-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* リンクカード（クリック可能なもの）はホバー反応 */
a.sep-card { display: block; color: inherit; text-decoration: none; }
a.sep-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-2px); }

/* 遷移先カードを一瞬ハイライト（小カードから飛んできた時に「ここ」と分かる） */
.sep-card--flash { animation: sepCardFlash 1.4s ease-out; }
@keyframes sepCardFlash {
  0%   { box-shadow: 0 0 0 3px rgba(58,90,152,0.0); }
  15%  { box-shadow: 0 0 0 3px rgba(58,90,152,0.9); }
  100% { box-shadow: 0 0 0 3px rgba(58,90,152,0.0); }
}

/* カード内の余白付き本文（埋め込み等で余白不要なら付けない） */
.sep-card__body { padding: 14px; height: 100%; display: flex; flex-direction: column; }
.sep-card__body h3 { font-size: 15px; font-weight: 600; color: #1a1a2e; margin-bottom: 6px; }
.sep-card__body p { font-size: 13px; line-height: 1.6; color: #666; margin: 0; }

/* カード内：お知らせ／ブログ一覧（長ければカード内でスクロール） */
.sep-news-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.sep-news-list li { border-bottom: 1px solid #eee; }
.sep-news-list a,
.sep-news-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px; color: #333; text-decoration: none; }
.sep-news-list a:hover { color: #3a5a98; }
.sep-news-list a:hover .sep-news-title { color: #3a5a98; }

/* 1行目：日付（種別）＼new／ */
.sep-news-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sep-news-meta time { font-size: 11px; color: #999; }
.sep-news-type { font-size: 11px; font-weight: 600; color: #3a5a98; }
.sep-news-title { font-size: 13px; line-height: 1.4; color: #1a1a2e; font-weight: 600; }

/* 新着バッジ（レインボー・1週間以内） */
.sep-new {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #ff3b3b, #ff9f1c, #2ecc40, #1e90ff, #b15cff, #ff3b3b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sepRainbow 2.5s linear infinite;
}
@keyframes sepRainbow { to { background-position: -200% center; } }

/* カード内：ブログ最新記事 */
.sep-blog-latest { display: flex; flex-direction: column; gap: 4px; flex: 1; color: #333; text-decoration: none; overflow: hidden; }
.sep-blog-latest time { font-size: 11px; color: #999; }
.sep-blog-latest h4 { font-size: 14px; font-weight: 600; color: #1a1a2e; line-height: 1.4; }
.sep-blog-latest p { font-size: 12px; line-height: 1.6; color: #666; margin: 0; }
.sep-blog-latest:hover h4 { color: #3a5a98; }

/* カード内：埋め込み領域 */
.sep-embed { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* カード内：プロダクト紹介（タイトル左・画像横幅合わせ・本文中央） */
.sep-product { gap: 12px; }
.sep-product > h3 { text-align: left; }
.sep-product__img { width: 100%; height: auto; display: block; border-radius: 8px; }
.sep-product__text { text-align: center; font-size: 15px; font-weight: 600; color: #1a1a2e; }
.sep-product__badge { display: block; width: 160px; margin: 12px auto 0; height: auto; }
.sep-product__desc { text-align: left; font-size: 14px; line-height: 1.8; color: #444; }

/* 中カード（縦可変）内のプロダクト：画像は横幅に合わせて自然な高さで表示 */
.sep-card--md .sep-product__img { width: 100%; height: auto; object-fit: contain; }

/* 小カード内：プロダクト要約（画像＋タイトル＋短文） */
.sep-product-sm { gap: 6px; align-items: center; text-align: center; overflow: hidden; }
.sep-product-sm__img { width: 100%; flex: 1; min-height: 0; object-fit: contain; border-radius: 8px; }
.sep-product-sm h3 { font-size: 13px; }
.sep-product-sm__name { font-size: 12px; font-weight: 600; color: #1a1a2e; }
.sep-product-sm p { font-size: 12px; color: #666; }
.sep-empty { font-size: 13px; color: #999; }

/* 小：1行に4つ（正方形） */
.sep-card--sm { grid-column: span 3; aspect-ratio: 1 / 1; }
/* 中：1行に3つ・縦は内容で可変（NEWS以外のコンテンツ用） */
.sep-card--md { grid-column: span 4; aspect-ratio: auto; }
/* NEWS枠：1行に3つ・高さ固定2:1（内部リストはスクロール） */
.sep-card--news { grid-column: span 4; aspect-ratio: 2 / 1; }
/* 大：PCでは半分幅（2列）・縦は内容で可変 */
.sep-card--lg { grid-column: span 6; }
/* 高さを内容に合わせる（画像入りカードなどで縦縛りを解除） */
.sep-card--auto { aspect-ratio: auto; }

/* タブレット幅：小→3つ / 中・NEWS→2つ（大は半分のまま） */
@media (max-width: 1023px) {
  .sep-card--sm { grid-column: span 4; }
  .sep-card--md { grid-column: span 6; }
  .sep-card--news { grid-column: span 6; }
}
/* スマホ幅：小→2つ / 中・NEWS→1つ / 大→全幅 */
@media (max-width: 639px) {
  .sep-cards { gap: 12px; }
  .sep-card--sm { grid-column: span 6; }
  .sep-card--md { grid-column: span 12; }
  .sep-card--news { grid-column: span 12; }
  .sep-card--lg { grid-column: span 12; }
}

/* ── ブログ等の通常ページ（サイト共通ヘッダー＝タブバー＋本文） ── */
/* 通常ページ用：タブバーをリンクとして再利用し、上部に固定 */
.sep-tab-bar--static { position: sticky; top: 0; z-index: 50; }
a.sep-content-tab { text-decoration: none; }

.sep-page { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; }

/* 記事ページ：2カラムレイアウト */
.sep-page--article { max-width: 1080px; }
.sep-article-layout { display: flex; gap: 32px; align-items: flex-start; }
.sep-article { flex: 1; min-width: 0; }

/* パンくず */
.sep-breadcrumb { font-size: 13px; color: #999; margin-bottom: 24px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sep-breadcrumb a { color: #3a5a98; text-decoration: none; }
.sep-breadcrumb a:hover { text-decoration: underline; }
.sep-breadcrumb__sep { color: #ccc; }

/* 記事本文 */
.sep-article__date { font-size: 12px; color: #999; margin-bottom: 6px; }
.sep-article__title { font-size: 26px; font-weight: 700; color: #1a1a2e; line-height: 1.4; margin-bottom: 24px; }
.sep-article__body { font-size: 15px; line-height: 1.9; color: #333; }
.sep-article__body p { margin: 0 0 1.2em; }
.sep-article__body h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; margin: 1.6em 0 0.6em; }
.sep-article__body h3 { font-size: 17px; font-weight: 600; color: #1a1a2e; margin: 1.4em 0 0.5em; }
.sep-article__body img { max-width: 100%; height: auto; border-radius: 8px; }
.sep-article__body a { color: #3a5a98; }
.sep-article__back { max-width: 1080px; margin: 32px auto 0; padding: 0 20px; }
.sep-article__back a { font-size: 14px; color: #3a5a98; text-decoration: none; }
.sep-article__back a:hover { text-decoration: underline; }

/* サイドバー */
.sep-article-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 60px; }
.sep-sidebar-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.sep-sidebar-box__title { font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e0e0e0; }

/* 目次 */
.sep-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sep-toc li a { font-size: 13px; color: #3a5a98; text-decoration: none; line-height: 1.5; display: block; padding: 2px 0; }
.sep-toc li a:hover { text-decoration: underline; }
.sep-toc__item--h3 { padding-left: 12px; }
.sep-toc__item--h3 a { font-size: 12px; color: #666; }

/* タグ一覧 */
.sep-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sep-tag { font-size: 12px; color: #3a5a98; background: #eef1f7; border-radius: 10px; padding: 3px 10px; text-decoration: none; }
.sep-tag:hover { background: #d6e4ff; }

/* PC用 左右壁面広告（i-mobile 160x600）：本文幅(1080px)を確保した上で
   広告(160px)+オフセット(20px)が両側に収まる画面幅で表示する。
   1440px以上（一般的なノートPC・大画面モニターの多くをカバー）。 */
.sep-side-ad { display: none; }
@media (min-width: 1440px) {
  .sep-side-ad {
    display: block;
    position: fixed;
    top: 120px;
    width: 160px;
    height: 600px;
    z-index: 10;
  }
  .sep-side-ad--left  { left: 20px; }
  .sep-side-ad--right { right: 20px; }
}

/* スマホ：サイドバーを下に移動 */
@media (max-width: 767px) {
  .sep-article-layout { flex-direction: column; }
  .sep-article-sidebar { width: 100%; position: static; }
  .sep-page--article { max-width: 760px; }
}

/* ── ブログ一覧・アーカイブページ ── */
.sep-page--archive { max-width: 760px; }
.sep-archive__title { font-size: 22px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.sep-archive__desc { font-size: 14px; color: #666; margin-bottom: 24px; }

.sep-post-list { display: flex; flex-direction: column; gap: 0; margin-top: 24px; }
.sep-post-card { display: block; padding: 20px 0; border-bottom: 1px solid #e0e0e0; text-decoration: none; color: inherit; transition: background 0.15s; }
.sep-post-card:first-child { border-top: 1px solid #e0e0e0; }
.sep-post-card:hover { background: #f9f9ff; padding-left: 8px; }
.sep-post-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sep-post-card__date { font-size: 12px; color: #999; }
.sep-post-card__title { font-size: 17px; font-weight: 600; color: #1a1a2e; line-height: 1.5; margin-bottom: 6px; }
.sep-post-card:hover .sep-post-card__title { color: #3a5a98; }
.sep-post-card__excerpt { font-size: 13px; color: #666; line-height: 1.7; }

/* ページネーション */
.sep-pagination { margin-top: 40px; }
.sep-pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sep-pagination .page-numbers { padding: 6px 12px; border: 1px solid #d8d8d8; border-radius: 6px; font-size: 14px; color: #555; text-decoration: none; }
.sep-pagination .page-numbers.current { background: #3a5a98; color: #fff; border-color: #3a5a98; }
.sep-pagination .page-numbers:hover { background: #f0f4ff; }

/* ── 404ページ ── */
.sep-page--404 { text-align: center; padding-top: 80px; }
.sep-404-code { font-size: 96px; font-weight: 800; color: #e0e4ef; line-height: 1; margin: 0 0 16px; }
.sep-404-title { font-size: 24px; font-weight: 700; color: #1a1a2e; margin: 0 0 16px; }
.sep-404-desc { font-size: 15px; color: #666; margin: 0 0 32px; }
.sep-404-btn { display: inline-block; padding: 12px 28px; background: #3a5a98; color: #fff; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 600; transition: background 0.2s; }
.sep-404-btn:hover { background: #2a4478; }

/* ── ななつのまとめぶろぐ ── */
:root {
  --nan-large-h: 48px;   /* 大カテゴリヘッダーの高さ */
  --nan-tab-h:   40px;   /* タブバーの高さ */
}

.sep-page--nanatsuno {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* サイトヘッダー（タブバー）をページ内に組み込み */
.nan-site-header { position: sticky; top: 0; z-index: 50; background: #f5f5f5; }
.nan-site-header .sep-tab-bar--static { position: static; }

/* ページタイトル */
.nan-header { padding: 28px 0 8px; }
.nan-header__title { font-size: 24px; font-weight: 800; color: #1a1a2e; letter-spacing: .02em; }

/* 大カテゴリ カラーパレット（循環） */
:root {
  --nan-c0-accent: #534AB7; --nan-c0-bg: #EEEDFE; --nan-c0-border: #CECBF6; --nan-c0-text: #3C3489;
  --nan-c1-accent: #0F6E56; --nan-c1-bg: #E1F5EE; --nan-c1-border: #9FE1CB; --nan-c1-text: #085041;
  --nan-c2-accent: #993C1D; --nan-c2-bg: #FAECE7; --nan-c2-border: #F5C4B3; --nan-c2-text: #712B13;
  --nan-c3-accent: #185FA5; --nan-c3-bg: #E6F1FB; --nan-c3-border: #B5D4F4; --nan-c3-text: #0C447C;
  --nan-c4-accent: #3B6D11; --nan-c4-bg: #EAF3DE; --nan-c4-border: #C0DD97; --nan-c4-text: #27500A;
  --nan-c5-accent: #854F0B; --nan-c5-bg: #FAEEDA; --nan-c5-border: #FAC775; --nan-c5-text: #633806;
  --nan-c6-accent: #993556; --nan-c6-bg: #FBEAF0; --nan-c6-border: #F4C0D1; --nan-c6-text: #72243E;
}

/* 大カテゴリセクション */
.nan-large-section { margin-top: 32px; }

/* 大カテゴリヘッダー：タブバー直下に吸着 */
.nan-large-header {
  position: sticky;
  top: var(--nan-tab-h);
  z-index: 30;
  height: var(--nan-large-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 6px 6px 0 0;
  border-left: 5px solid;
  background: #f5f5f5;
}
.nan-large-header__title { font-size: 16px; font-weight: 700; margin: 0; }

/* 色循環クラス */
.nan-color-0 .nan-large-header { border-left-color: var(--nan-c0-accent); background: var(--nan-c0-bg); }
.nan-color-0 .nan-large-header__title { color: var(--nan-c0-text); }
.nan-color-0 .nan-medium-header { background: var(--nan-c0-bg); border-bottom-color: var(--nan-c0-border); }
.nan-color-0 .nan-medium-header__title { color: var(--nan-c0-text); }
.nan-color-0 .nan-medium-section { border-left-color: var(--nan-c0-border); }
.nan-color-0 .nan-article-link:hover .nan-article-title { color: var(--nan-c0-accent); }

.nan-color-1 .nan-large-header { border-left-color: var(--nan-c1-accent); background: var(--nan-c1-bg); }
.nan-color-1 .nan-large-header__title { color: var(--nan-c1-text); }
.nan-color-1 .nan-medium-header { background: var(--nan-c1-bg); border-bottom-color: var(--nan-c1-border); }
.nan-color-1 .nan-medium-header__title { color: var(--nan-c1-text); }
.nan-color-1 .nan-medium-section { border-left-color: var(--nan-c1-border); }
.nan-color-1 .nan-article-link:hover .nan-article-title { color: var(--nan-c1-accent); }

.nan-color-2 .nan-large-header { border-left-color: var(--nan-c2-accent); background: var(--nan-c2-bg); }
.nan-color-2 .nan-large-header__title { color: var(--nan-c2-text); }
.nan-color-2 .nan-medium-header { background: var(--nan-c2-bg); border-bottom-color: var(--nan-c2-border); }
.nan-color-2 .nan-medium-header__title { color: var(--nan-c2-text); }
.nan-color-2 .nan-medium-section { border-left-color: var(--nan-c2-border); }
.nan-color-2 .nan-article-link:hover .nan-article-title { color: var(--nan-c2-accent); }

.nan-color-3 .nan-large-header { border-left-color: var(--nan-c3-accent); background: var(--nan-c3-bg); }
.nan-color-3 .nan-large-header__title { color: var(--nan-c3-text); }
.nan-color-3 .nan-medium-header { background: var(--nan-c3-bg); border-bottom-color: var(--nan-c3-border); }
.nan-color-3 .nan-medium-header__title { color: var(--nan-c3-text); }
.nan-color-3 .nan-medium-section { border-left-color: var(--nan-c3-border); }
.nan-color-3 .nan-article-link:hover .nan-article-title { color: var(--nan-c3-accent); }

.nan-color-4 .nan-large-header { border-left-color: var(--nan-c4-accent); background: var(--nan-c4-bg); }
.nan-color-4 .nan-large-header__title { color: var(--nan-c4-text); }
.nan-color-4 .nan-medium-header { background: var(--nan-c4-bg); border-bottom-color: var(--nan-c4-border); }
.nan-color-4 .nan-medium-header__title { color: var(--nan-c4-text); }
.nan-color-4 .nan-medium-section { border-left-color: var(--nan-c4-border); }
.nan-color-4 .nan-article-link:hover .nan-article-title { color: var(--nan-c4-accent); }

.nan-color-5 .nan-large-header { border-left-color: var(--nan-c5-accent); background: var(--nan-c5-bg); }
.nan-color-5 .nan-large-header__title { color: var(--nan-c5-text); }
.nan-color-5 .nan-medium-header { background: var(--nan-c5-bg); border-bottom-color: var(--nan-c5-border); }
.nan-color-5 .nan-medium-header__title { color: var(--nan-c5-text); }
.nan-color-5 .nan-medium-section { border-left-color: var(--nan-c5-border); }
.nan-color-5 .nan-article-link:hover .nan-article-title { color: var(--nan-c5-accent); }

.nan-color-6 .nan-large-header { border-left-color: var(--nan-c6-accent); background: var(--nan-c6-bg); }
.nan-color-6 .nan-large-header__title { color: var(--nan-c6-text); }
.nan-color-6 .nan-medium-header { background: var(--nan-c6-bg); border-bottom-color: var(--nan-c6-border); }
.nan-color-6 .nan-medium-header__title { color: var(--nan-c6-text); }
.nan-color-6 .nan-medium-section { border-left-color: var(--nan-c6-border); }
.nan-color-6 .nan-article-link:hover .nan-article-title { color: var(--nan-c6-accent); }

/* 中カテゴリセクション */
.nan-medium-section { border-left: 4px solid #e0e4ef; margin: 8px 0 0 12px; border-radius: 0 4px 4px 0; }

/* 中カテゴリヘッダー：大カテゴリ直下に吸着 */
.nan-medium-header {
  position: sticky;
  top: calc(var(--nan-tab-h) + var(--nan-large-h));
  z-index: 20;
  background: #f0f2f8;
  padding: 8px 16px;
  border-bottom: 1px solid #d8dce8;
}
.nan-medium-header__title { font-size: 14px; font-weight: 600; color: #3a5a98; margin: 0; }

/* 見出し内リンクは色を継承し、ホバー時のみ下線 */
.nan-large-header__title a,
.nan-medium-header__title a { color: inherit; text-decoration: none; }
.nan-large-header__title a:hover,
.nan-medium-header__title a:hover { text-decoration: underline; }


/* 記事リスト */
.nan-article-list { list-style: none; margin: 0; padding: 0; }
.nan-article-item { border-bottom: 1px solid #f0f0f0; }
.nan-article-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  transition: background 0.15s;
}
.nan-article-link:hover { background: #f5f7ff; }
.nan-article-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #e0e4ef;
}
.nan-article-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nan-article-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nan-article-title { font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; }
.nan-article-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nan-article-link:hover .nan-article-title { color: #3a5a98; }
.nan-empty { padding: 10px 16px; font-size: 13px; color: #999; }
.nan-related-list { list-style: none; margin: 0; padding: 0; }
.nan-related-list li { border-bottom: 1px solid #f0f0f0; }
.nan-related-list li a { display: block; padding: 8px 0; font-size: 13px; color: #3a5a98; text-decoration: none; line-height: 1.5; }
.nan-related-list li a:hover { text-decoration: underline; }

/* ── フッター ── */
.sep-footer { border-top: 1px solid #e0e0e0; padding: 20px; background: #f5f5f5; }
.sep-footer-inner { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; }
.sep-footer a { color: #3a5a98; text-decoration: none; }
.sep-footer a:hover { text-decoration: underline; }

/* ── SP用広告（ブログ記事・画面下部に常時固定・i-mobile 320x100） ── */
.sep-mobile-ad-bottom { display: none; }
@media (max-width: 767px) {
  .sep-mobile-ad-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    z-index: 20;
  }
  /* 固定広告の高さ分、本文末尾が隠れないよう余白を確保 */
  .sep-page--article { padding-bottom: 116px; }
}