/* ==========================================================================
   学びチョイス テーマ スタイルシート
   元 Astro 版( src/styles/global.css + 各コンポーネント内 <style> )を統合したもの。
   ========================================================================== */

/* ===== CSS変数 ===== */
:root {
  --color-primary: #7C3AED;
  --color-primary-dark: #6D28D9;
  --color-primary-light: #A78BFA;
  --color-text: #111827;
  --color-text-muted: #6B7280;
  --color-accent: #F59E0B;
  --color-accent-dark: #D97706;
  --color-bg: #F8F7FF;
  --color-white: #FFFFFF;
  --color-border: #EDE9FE;
  --color-border-dark: #C4B5FD;
  --color-surface: #F3F0FF;

  --font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

  --container-max: 1200px;
  --container-wide: 1400px;
  --gap-section: 4rem;
  --gap-section-sm: 2.5rem;

  --transition: 0.2s ease;
  --header-height: 64px;
}

/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); font-size: var(--font-size-base); line-height: 1.7; color: var(--color-text); background-color: var(--color-white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font-family: inherit; }

/* ===== ユーティリティ ===== */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.25rem; }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--gap-section); }
.section--sm { padding-block: var(--gap-section-sm); }
.section--bg { background: var(--color-bg); }
.section--surface { background: var(--color-surface); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100%; left: 0; background: var(--color-primary); color: var(--color-white); padding: 0.5rem 1rem; font-size: var(--font-size-sm); z-index: 9999; }
.skip-link:focus { top: 0; }

/* ===== セクションタイトル ===== */
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.section-heading__title { font-size: var(--font-size-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; position: relative; padding-left: 0.875rem; }
.section-heading__title::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); }
.section-heading__sub { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-primary); letter-spacing: 0.12em; text-transform: uppercase; }
.section-heading__more { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.3rem; transition: color var(--transition); white-space: nowrap; flex-shrink: 0; }
.section-heading__more:hover { color: var(--color-primary); }

/* ===== ボタン ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.25rem; font-size: var(--font-size-sm); font-weight: 700; border: 2px solid transparent; border-radius: var(--radius-md); transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); cursor: pointer; line-height: 1; white-space: nowrap; }
.btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn--accent { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.btn--accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn--outline { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn--outline:hover { background: var(--color-text); color: var(--color-white); }

/* ===== バッジ ===== */
.category-badge { display: inline-block; padding: 0.2em 0.65em; font-size: var(--font-size-xs); font-weight: 700; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-sm); transition: background-color var(--transition); white-space: nowrap; }
.category-badge:hover { background: var(--color-primary-dark); }
.category-badge--outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.category-badge--outline:hover { background: var(--color-primary); color: var(--color-white); }
.level-badge { display: inline-block; padding: 0.2em 0.65em; font-size: var(--font-size-xs); font-weight: 600; background: var(--color-bg); color: var(--color-text-muted); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); white-space: nowrap; }

/* ===== アーティクルグリッド ===== */
.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.article-grid--3 { grid-template-columns: repeat(3, 1fr); }
.article-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .article-grid, .article-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .article-grid, .article-grid--3, .article-grid--2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); border-bottom: 2px solid var(--color-text); transition: box-shadow var(--transition); }
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--header-height); }
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.site-header__logo-text { font-size: 1.25rem; font-weight: 900; color: var(--color-text); letter-spacing: -0.03em; white-space: nowrap; }
.site-header__nav { flex: 1; overflow: visible; }
.site-header__nav-list { display: flex; align-items: center; gap: 0.25rem; }
.site-header__nav-link { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.6rem; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--transition), background-color var(--transition); }
.site-header__nav-link:hover { color: var(--color-primary); background-color: var(--color-bg); }
.site-header__nav-list > li { position: relative; }
.site-header__dropdown { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 12rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s, visibility 0.18s, transform 0.18s; z-index: 200; }
.site-header__nav-list > li:hover .site-header__dropdown, .site-header__nav-list > li:focus-within .site-header__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.site-header__dropdown-list { padding: 0.5rem; }
.site-header__dropdown-link { display: block; padding: 0.5rem 0.75rem; font-size: var(--font-size-sm); border-radius: var(--radius-sm); transition: background-color var(--transition), color var(--transition); }
.site-header__dropdown-link:hover { background-color: var(--color-bg); color: var(--color-primary); }
.site-header__search { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition); }
.site-header__search:focus-within { border-color: var(--color-primary); }
.site-header__search-input { padding: 0.35rem 0.6rem; font-size: var(--font-size-sm); border: none; outline: none; width: 10rem; color: var(--color-text); font-family: inherit; }
.site-header__search-btn { padding: 0.35rem 0.5rem; color: var(--color-text-muted); display: flex; align-items: center; transition: color var(--transition); }
.site-header__search-btn:hover { color: var(--color-primary); }
.site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.site-header__contact { font-size: var(--font-size-xs); padding: 0.35rem 0.85rem; white-space: nowrap; }
.site-header__menu-btn { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; border-radius: var(--radius-sm); flex-shrink: 0; }
.site-header__menu-bar { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }

.mobile-menu { position: fixed; top: 0; right: -100%; width: min(340px, 100vw); height: 100dvh; background: var(--color-white); z-index: 300; overflow-y: auto; transition: right 0.3s cubic-bezier(0.4,0,0.2,1); border-left: 1px solid var(--color-border); }
.mobile-menu.is-open { right: 0; }
.mobile-menu__inner { padding: 0 1.25rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.mobile-menu__top-label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.15em; color: var(--color-text-muted); }
.mobile-menu__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #111; color: var(--color-text); transition: background-color var(--transition), color var(--transition); }
.mobile-menu__close:hover { background: var(--color-text); color: #fff; }
.mobile-menu__search { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.mobile-menu__search-input { flex: 1; padding: 0.5rem 0.75rem; font-size: var(--font-size-sm); border: none; outline: none; font-family: inherit; }
.mobile-menu__section-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.08em; margin-bottom: 0.5rem; text-transform: uppercase; }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link { display: block; padding: 0.6rem 0; font-size: var(--font-size-sm); border-bottom: 1px solid var(--color-border); transition: color var(--transition); }
.mobile-menu__link:hover { color: var(--color-primary); }
.mobile-menu__overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.4); z-index: 299; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.mobile-menu__overlay.is-open { opacity: 1; visibility: visible; }

@media (max-width: 1024px) {
  .site-header__nav, .site-header__contact { display: none; }
  .site-header__menu-btn { display: flex; margin-left: auto; }
}
@media (max-width: 640px) { .site-header__search { display: none; } }

/* ==========================================================================
   フッター
   ========================================================================== */
.site-footer { background-color: #F2F2F2; color: var(--color-text); font-size: var(--font-size-sm); border-top: 1px solid #111; }
.site-footer__top { padding-block: 3rem 2.5rem; border-bottom: 1px solid #D0D0D0; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.site-footer__brand { display: flex; flex-direction: column; gap: 0.625rem; }
.site-footer__logo-text { font-size: 1.25rem; font-weight: 900; color: var(--color-text); letter-spacing: -0.03em; }
.site-footer__tagline { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.6; max-width: 18rem; }
.site-footer__company { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.site-footer__sns { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.site-footer__sns-link { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid #999; color: var(--color-text-muted); transition: border-color var(--transition), color var(--transition); }
.site-footer__sns-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.site-footer__col-title { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.875rem; padding-bottom: 0.5rem; border-bottom: 1px solid #ccc; }
.site-footer__links { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__links a { color: var(--color-text-muted); transition: color var(--transition); }
.site-footer__links a:hover { color: var(--color-primary); }
.site-footer__bottom { padding-block: 1rem; background: #E0E0E0; }
.site-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer__copy { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.site-footer__bottom-links { display: flex; gap: 1.25rem; }
.site-footer__bottom-links a { font-size: var(--font-size-xs); color: var(--color-text-muted); transition: color var(--transition); }
.site-footer__bottom-links a:hover { color: var(--color-text); }
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   カード類
   ========================================================================== */
.card-v { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); transition: box-shadow var(--transition); height: 100%; }
.card-v:hover { box-shadow: var(--shadow-md); }
.card-v__img-wrap { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; }
.card-v__ad { position: absolute; top: 0.375rem; left: 0.375rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.1em 0.45em; background: #1a1a1a; color: #fff; line-height: 1.6; pointer-events: none; }
.card-v__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.card-v:hover .card-v__img { transform: scale(1.04); }
.card-v__placeholder { width: 100%; height: 100%; background: var(--color-surface); }
.card-v__body { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-v__meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.card-v__title { font-size: var(--font-size-sm); font-weight: 700; line-height: 1.5; flex: 1; }
.card-v__title a { transition: color var(--transition); }
.card-v__title a:hover { color: var(--color-primary); }
.card-v__date { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: auto; }
.card-v--small .card-v__title { font-size: var(--font-size-xs); }

.card-h { display: flex; gap: 1rem; padding: 1rem; border: 1px solid var(--color-border); background: var(--color-white); transition: box-shadow var(--transition); }
.card-h:hover { box-shadow: var(--shadow-sm); }
.card-h__img-wrap { flex-shrink: 0; width: 140px; height: 79px; overflow: hidden; display: block; }
.card-h__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.card-h:hover .card-h__img { transform: scale(1.04); }
.card-h__placeholder { width: 100%; height: 100%; background: var(--color-surface); }
.card-h__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.card-h__meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.card-h__title { font-size: var(--font-size-sm); font-weight: 700; line-height: 1.45; }
.card-h__title a { transition: color var(--transition); }
.card-h__title a:hover { color: var(--color-primary); }
.card-h__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-h__date { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: auto; }
@media (max-width: 480px) { .card-h__img-wrap { width: 100px; height: 56px; } .card-h__desc { display: none; } }

.card-lg { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); transition: box-shadow var(--transition); height: 100%; }
.card-lg:hover { box-shadow: var(--shadow-md); }
.card-lg__img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.card-lg__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.card-lg:hover .card-lg__img { transform: scale(1.04); }
.card-lg__placeholder { width: 100%; height: 100%; background: var(--color-surface); }
.card-lg__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }
.card-lg__meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.card-lg__title { font-size: var(--font-size-lg); font-weight: 800; line-height: 1.4; }
.card-lg__title a { transition: color var(--transition); }
.card-lg__title a:hover { color: var(--color-primary); }
.card-lg__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-lg__date { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: auto; }

/* ==========================================================================
   Hero セクション
   ========================================================================== */
.hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.hero__inner { display: grid; grid-template-columns: 1fr 300px; align-items: stretch; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.25rem; }
.hero__inner--no-pickup { grid-template-columns: 1fr; }
.hero__main { display: flex; flex-direction: column; border-right: 1px solid var(--color-border); overflow: hidden; }
.hero__main-img-wrap { flex-shrink: 0; display: block; aspect-ratio: 16/9; overflow: hidden; }
.hero__main-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hero__main:hover .hero__main-img { transform: scale(1.03); }
.hero__img-placeholder { width: 100%; height: 100%; background: var(--color-border); }
.hero__main-body { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.25rem 1rem; overflow: hidden; }
.hero__main-top { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; }
.hero__main-title { font-size: var(--font-size-xl); font-weight: 900; line-height: 1.3; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__main-title a:hover { color: var(--color-primary); }
.hero__main-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__main-date { flex-shrink: 0; margin-top: auto; padding-top: 0.5rem; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.hero__pickup { display: flex; flex-direction: column; background: var(--color-white); }
.hero__pickup-header { flex-shrink: 0; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; border-bottom: 2px solid var(--color-primary); background: var(--color-surface); }
.hero__pickup-label { font-size: var(--font-size-xs); font-weight: 900; letter-spacing: 0.08em; color: var(--color-white); background: var(--color-primary); padding: 0.1em 0.45em 0.15em; line-height: 1.6; }
.hero__pickup-heading { font-size: var(--font-size-sm); font-weight: 700; }
.hero__pickup-list { flex-shrink: 0; display: flex; flex-direction: column; }
.pickup-card { display: flex; flex-direction: row; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--color-border); transition: background-color var(--transition); }
.pickup-card:last-child { border-bottom: none; }
.pickup-card:hover { background: var(--color-surface); }
.pickup-card__img-wrap { flex-shrink: 0; display: block; width: 108px; overflow: hidden; }
.pickup-card__img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.pickup-card:hover .pickup-card__img { transform: scale(1.04); }
.pickup-card__placeholder { width: 108px; aspect-ratio: 16/9; background: var(--color-border); }
.pickup-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.pickup-card__cat { font-size: 0.6875rem; font-weight: 700; color: var(--color-primary); line-height: 1; transition: opacity var(--transition); }
.pickup-card__cat:hover { opacity: 0.75; }
.pickup-card__title { font-size: var(--font-size-xs); font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pickup-card__title a:hover { color: var(--color-primary); }
.pickup-card__date { font-size: 0.6875rem; color: var(--color-text-muted); margin-top: auto; padding-top: 0.25rem; }
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .hero__main { border-right: none; border-bottom: 1px solid var(--color-border); }
  .hero__main-img-wrap { flex: 0 0 auto; aspect-ratio: 16/9; }
  .hero__main-title { font-size: var(--font-size-2xl); -webkit-line-clamp: 3; }
  .hero__pickup-list { display: grid; grid-template-columns: repeat(5, 1fr); }
  .pickup-card { flex-direction: column; border-bottom: none; border-right: 1px solid var(--color-border); }
  .pickup-card:last-child { border-right: none; }
  .pickup-card__img-wrap { width: 100%; }
  .pickup-card__placeholder { width: 100%; }
}
@media (max-width: 640px) {
  .hero__main-title { font-size: var(--font-size-xl); }
  .hero__pickup-list { grid-template-columns: 1fr; }
  .pickup-card { flex-direction: row; border-right: none; border-bottom: 1px solid var(--color-border); }
  .pickup-card:last-child { border-bottom: none; }
  .pickup-card__img-wrap { width: 90px; }
}

/* ===== ランキングセクション(トップページ) ===== */
.ranked-item { position: relative; }
.ranked-item__num { position: absolute; top: 0; left: 0; z-index: 1; width: 2rem; height: 2rem; background: var(--color-text); color: var(--color-white); font-size: var(--font-size-sm); font-weight: 900; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.ranked-item__num--1 { background: #F59E0B; }
.ranked-item__num--2 { background: #94A3B8; }
.ranked-item__num--3 { background: #B45309; }

/* ===== レベルから探す ===== */
.levels-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 640px) { .levels-grid { grid-template-columns: 1fr; } }
.level-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1.5px solid var(--color-border); background: var(--color-white); transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); }
.level-card:hover { border-color: var(--color-primary); background: var(--color-bg); box-shadow: var(--shadow-sm); }
.level-card__icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.level-card__body { flex: 1; min-width: 0; }
.level-card__name { font-size: var(--font-size-base); font-weight: 700; margin-bottom: 0.25rem; transition: color var(--transition); }
.level-card:hover .level-card__name { color: var(--color-primary); }
.level-card__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.level-card__arrow { color: var(--color-text-muted); flex-shrink: 0; transition: color var(--transition), transform var(--transition); }
.level-card:hover .level-card__arrow { color: var(--color-primary); transform: translateX(3px); }

/* ===== カテゴリー別記事セクション ===== */
.cat-section__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 1.25rem; max-width: 48rem; }
.cat-section__more { margin-top: 1.75rem; text-align: center; }

/* ==========================================================================
   ランキングスクールブロック(記事内)
   ========================================================================== */
.ranking-block { margin-block: 2rem; border: 2px solid var(--color-primary); }
.ranking-block__header { background: var(--color-primary); padding: 0.625rem 1.25rem; }
.ranking-block__label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-white); letter-spacing: 0.04em; }
.ranking-block__list { display: flex; flex-direction: column; }
.rs-item { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); }
.rs-item:last-child { border-bottom: none; }
.rs-item__rank { flex-shrink: 0; width: 3.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-text); color: var(--color-white); padding: 0.5rem 0; }
.rs-item--rank1 .rs-item__rank { background: #F59E0B; }
.rs-item--rank2 .rs-item__rank { background: #94A3B8; }
.rs-item--rank3 .rs-item__rank { background: #B45309; }
.rs-item__rank-num { font-size: var(--font-size-2xl); font-weight: 900; line-height: 1; }
.rs-item__rank-label { font-size: var(--font-size-xs); font-weight: 700; }
.rs-item__body { flex: 1; min-width: 0; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.rs-item__head { display: flex; gap: 1rem; align-items: flex-start; }
.rs-item__img-wrap { flex-shrink: 0; width: 160px; height: 90px; overflow: hidden; display: block; }
.rs-item__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.rs-item__img-wrap:hover .rs-item__img { transform: scale(1.04); }
.rs-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.rs-item__cats { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.rs-item__name { font-size: var(--font-size-lg); font-weight: 900; line-height: 1.3; }
.rs-item__name a { transition: color var(--transition); }
.rs-item__name a:hover { color: var(--color-primary); }
.rs-item__rating { display: flex; align-items: center; gap: 0.5rem; }
.rs-item__pr { font-size: 0.625rem; font-weight: 700; color: var(--color-text-muted); border: 1px solid currentColor; padding: 0.05em 0.35em; line-height: 1.4; }
.rs-item__price { font-size: var(--font-size-sm); color: var(--color-text); }
.rs-item__price-label { font-weight: 700; margin-right: 0.375rem; color: var(--color-text-muted); }
.rs-item__comment { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text); background: var(--color-surface); padding: 0.75rem 1rem; border-left: 3px solid var(--color-primary); }
.rs-item__comment-icon { display: inline-block; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-white); background: var(--color-primary); padding: 0.05em 0.45em; margin-right: 0.5rem; vertical-align: middle; }
.rs-item__pros { display: flex; flex-direction: column; gap: 0.25rem; }
.rs-item__pro { font-size: var(--font-size-sm); color: var(--color-text); padding-left: 1.1em; position: relative; }
.rs-item__pro::before { content: '✓'; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.rs-item__actions { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.rs-item__btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1.25rem; font-size: var(--font-size-sm); font-weight: 700; transition: opacity var(--transition); }
.rs-item__btn:hover { opacity: 0.82; }
.rs-item__btn--detail { border: 2px solid var(--color-primary); color: var(--color-primary); background: var(--color-white); }
.rs-item__btn--official { background: var(--color-primary); color: var(--color-white); }
@media (max-width: 640px) {
  .rs-item__rank { width: 2.75rem; }
  .rs-item__rank-num { font-size: var(--font-size-xl); }
  .rs-item__body { padding: 0.875rem; }
  .rs-item__head { flex-direction: column; }
  .rs-item__img-wrap { width: 100%; height: auto; aspect-ratio: 16/9; }
  .rs-item__btn { flex: 1; justify-content: center; padding: 0.625rem 0.75rem; }
}

/* ==========================================================================
   スター評価
   ========================================================================== */
.star-rating { display: inline-flex; align-items: center; gap: 0.25rem; }
.star-rating__stars { display: inline-flex; }
.star { color: #D1D5DB; line-height: 1; }
.star--full { color: #F59E0B; }
.star--half { position: relative; color: #D1D5DB; }
.star--half::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #F59E0B; }
.star-rating--sm .star { font-size: 0.875rem; }
.star-rating--md .star { font-size: 1rem; }
.star-rating--lg .star { font-size: 1.25rem; }
.star-rating__num { font-weight: 700; color: var(--color-text); }
.star-rating--sm .star-rating__num { font-size: 0.75rem; }
.star-rating--md .star-rating__num { font-size: 0.875rem; }
.star-rating--lg .star-rating__num { font-size: 1.125rem; }

/* ==========================================================================
   口コミカード
   ========================================================================== */
.review-card { background: var(--color-white); border: 1px solid var(--color-border); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.review-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.review-card__reviewer { display: flex; flex-direction: column; gap: 0.2rem; }
.review-card__name { font-size: var(--font-size-sm); font-weight: 700; }
.review-card__attrs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.review-card__attr { font-size: var(--font-size-xs); color: var(--color-text-muted); background: var(--color-surface); padding: 0.1em 0.5em; }
.review-card__title { font-size: var(--font-size-sm); font-weight: 700; line-height: 1.5; }
.review-card__body { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.75; }

/* ==========================================================================
   サイドバー
   ========================================================================== */
.sidebar { display: flex; flex-direction: column; gap: 1.75rem; }
.sidebar-widget { border: 1px solid var(--color-border); }
.sidebar-widget__title { font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.06em; padding: 0.625rem 0.875rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.sidebar-ranking { padding: 0.5rem; }
.sidebar-ranking__item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; border-bottom: 1px solid var(--color-border); }
.sidebar-ranking__item:last-child { border-bottom: none; }
.sidebar-ranking__num { font-size: var(--font-size-lg); font-weight: 900; color: var(--color-border-dark); line-height: 1; flex-shrink: 0; min-width: 1.25rem; }
.sidebar-ranking__item:nth-child(1) .sidebar-ranking__num { color: #F59E0B; }
.sidebar-ranking__item:nth-child(2) .sidebar-ranking__num { color: #94A3B8; }
.sidebar-ranking__item:nth-child(3) .sidebar-ranking__num { color: #B45309; }
.sidebar-ranking__link { display: flex; gap: 0.5rem; align-items: flex-start; flex: 1; min-width: 0; }
.sidebar-ranking__img { flex-shrink: 0; object-fit: cover; }
.sidebar-ranking__title { font-size: var(--font-size-xs); line-height: 1.5; color: var(--color-text); transition: color var(--transition); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sidebar-ranking__link:hover .sidebar-ranking__title { color: var(--color-primary); }
.sidebar-list { padding: 0.5rem; }
.sidebar-list__link { display: block; padding: 0.5rem 0.625rem; font-size: var(--font-size-sm); border-bottom: 1px solid var(--color-border); transition: color var(--transition), padding-left var(--transition); }
.sidebar-list li:last-child .sidebar-list__link { border-bottom: none; }
.sidebar-list__link:hover { color: var(--color-primary); padding-left: 0.875rem; }

/* ==========================================================================
   広告バナー
   ========================================================================== */
.ad-pr-label { font-size: 0.6rem; color: #999; letter-spacing: 0.06em; text-align: right; display: block; }
.ad-link { display: block; line-height: 0; border: 1px solid #333; transition: opacity 0.2s; }
.ad-link:hover { opacity: 0.85; }
.ad-img { width: 100%; height: auto; display: block; }
.ad-fixed { display: flex; flex-direction: column; gap: 0.625rem; position: fixed; bottom: 24px; right: -9999px; z-index: 40; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; width: 280px; }
.ad-fixed.is-visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s; }
.ad-mobile { display: none; }
.ad-mobile__btn { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50; background: none; border: none; padding: 0; cursor: pointer; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.35)); transition: transform 0.15s, filter 0.15s; }
.ad-mobile__btn:hover { transform: scale(1.06); filter: drop-shadow(0 5px 14px rgba(0,0,0,0.45)); }
.ad-mobile__btn-img { display: block; width: 88px; height: 88px; object-fit: contain; }
.ad-mobile__popup { position: fixed; bottom: 7.5rem; right: 1rem; z-index: 50; width: min(300px, calc(100vw - 2rem)); overflow: hidden; background: #fff; border: 1px solid #ccc; box-shadow: 0 8px 28px rgba(0,0,0,0.18); display: flex; flex-direction: column; opacity: 0; transform: translateY(10px); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; }
.ad-mobile__popup.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ad-mobile__close { position: absolute; top: 0.375rem; right: 0.375rem; z-index: 3; display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; background: rgba(255,255,255,0.92); border: 1px solid #bbb; border-radius: 50%; cursor: pointer; color: #444; transition: background 0.15s; }
.ad-mobile__close:hover { background: #e5e5e5; }
.ad-pr-label--popup { position: absolute; top: 0.375rem; left: 0.5rem; z-index: 3; text-align: left; }
.ad-mobile__images { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ad-link--fit { display: flex; justify-content: center; line-height: 0; transition: opacity 0.2s; }
.ad-link--fit:hover { opacity: 0.85; }
.ad-img--fit { width: 200px; height: 200px; object-fit: cover; display: block; border: 1px solid #333; flex-shrink: 0; }
@media (max-width: 1024px) { .ad-fixed { display: none !important; } .ad-mobile { display: block; } }
@media (min-width: 1025px) { .ad-mobile { display: none; } }

/* ==========================================================================
   パンくず
   ========================================================================== */
.breadcrumb { padding-block: 0.75rem; margin-bottom: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.breadcrumb__item { display: flex; align-items: center; gap: 0.25rem; }
.breadcrumb__link { display: flex; align-items: center; gap: 0.25rem; font-size: var(--font-size-xs); color: var(--color-text-muted); transition: color var(--transition); }
.breadcrumb__link:hover { color: var(--color-primary); }
.breadcrumb a { color: var(--color-text-muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__current { font-size: var(--font-size-xs); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 16rem; }
.breadcrumb__item svg { color: var(--color-border-dark); flex-shrink: 0; }

/* ==========================================================================
   ページネーション
   ========================================================================== */
.pagination { margin-top: 2.5rem; display: flex; justify-content: center; }
.pagination__list { display: flex; align-items: center; gap: 0.375rem; }
.pagination__page, .pagination__btn { display: flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; font-size: var(--font-size-sm); font-weight: 600; border: 1.5px solid var(--color-border); transition: background-color var(--transition), border-color var(--transition), color var(--transition); }
.pagination__page:hover, .pagination__btn:not(.pagination__btn--disabled):hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg); }
.pagination__page--current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.pagination__btn--disabled { opacity: 0.35; cursor: default; }
.pagination__ellipsis { display: flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ==========================================================================
   一覧レイアウト(記事一覧・カテゴリー・レベル)
   ========================================================================== */
.list-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; padding-block: 1.5rem 4rem; align-items: start; }
.list-layout__main { min-width: 0; }
@media (max-width: 1024px) { .list-layout { grid-template-columns: 1fr; } .list-layout__sidebar { display: none; } }
.list-header { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--color-border); }
.list-title { font-size: var(--font-size-2xl); font-weight: 900; margin-bottom: 0.5rem; padding-left: 0.875rem; border-left: 4px solid var(--color-primary); }
.list-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: 0.75rem; max-width: 44rem; }
.list-count { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.no-results { color: var(--color-text-muted); font-size: var(--font-size-sm); padding: 2rem 0; }

/* 記事詳細レイアウト */
.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; padding-block: 1.5rem 4rem; align-items: start; }
.article-layout__main { min-width: 0; }
@media (max-width: 1024px) { .article-layout { grid-template-columns: 1fr; } .article-layout__sidebar { display: none; } }

/* ==========================================================================
   記事詳細
   ========================================================================== */
.article-tags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; padding-top: 0.5rem; }
.ad-badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.15em 0.55em; background: #1a1a1a; color: #fff; line-height: 1.6; }
.article-title { font-size: var(--font-size-3xl); font-weight: 800; line-height: 1.3; margin-bottom: 0.875rem; color: var(--color-text); letter-spacing: -0.02em; }
.article-description { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: 1rem; }
.article-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.article-meta__dates { display: flex; gap: 1rem; flex-wrap: wrap; }
.article-meta__date { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.article-meta__date--updated { opacity: 0.8; }
.article-meta__author { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.article-meta__author a { color: var(--color-primary); font-weight: 600; }
.article-meta__role { color: var(--color-text-muted); }
.article-eyecatch { margin-bottom: 1.5rem; }
.article-eyecatch__image { width: 100%; object-fit: cover; max-height: 480px; }
.summary-box { background: var(--color-surface); border: 1.5px solid var(--color-border); border-left: 4px solid var(--color-primary); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.summary-box__title { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary); margin-bottom: 0.75rem; }
.summary-box__list { display: flex; flex-direction: column; gap: 0.5rem; }
.summary-box__list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--font-size-sm); line-height: 1.55; }
.summary-box__list svg { color: var(--color-primary); flex-shrink: 0; margin-top: 0.15em; }

.article-body { font-size: var(--font-size-md); line-height: 1.85; color: var(--color-text); margin-bottom: 2rem; word-break: break-word; overflow-wrap: break-word; }
.article-body h2 { font-size: var(--font-size-xl); font-weight: 800; margin-block: 2.25rem 1rem; padding: 0.75rem 1rem 0.75rem 1.125rem; border-left: 5px solid var(--color-primary); background: var(--color-surface); line-height: 1.4; }
.article-body h3 { font-size: var(--font-size-lg); font-weight: 700; margin-block: 1.75rem 0.75rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--color-primary); line-height: 1.4; }
.article-body h4 { font-size: var(--font-size-md); font-weight: 700; margin-block: 1.5rem 1.75rem; padding: 0.5rem 1rem; border: 2px solid var(--color-primary); border-radius: 8px; background: var(--color-primary); color: #fff; position: relative; line-height: 1.4; }
.article-body h4::before { content: ''; position: absolute; bottom: -13px; left: 16px; width: 0; height: 0; border-style: solid; border-width: 13px 8px 0 8px; border-color: var(--color-primary) transparent transparent transparent; }
.article-body h4::after { content: ''; position: absolute; bottom: -9px; left: 18px; width: 0; height: 0; border-style: solid; border-width: 9px 6px 0 6px; border-color: var(--color-primary) transparent transparent transparent; }
.article-body h5 { font-size: var(--font-size-sm); font-weight: 700; margin-block: 1.25rem 0.5rem; padding-left: 0.75rem; border-left: 2px solid var(--color-primary-light); line-height: 1.4; }
.article-body p { margin-bottom: 1rem; }
.article-body em { font-style: normal; background: linear-gradient(transparent 55%, #FEF08A 55%); padding: 0 0.05em; }
.article-body a { color: var(--color-primary); text-decoration: underline; }
.article-body img { width: 100% !important; max-width: 100% !important; height: auto !important; margin-block: 1rem; }
.article-body ul { padding-left: 1.5rem; margin-bottom: 1.25rem; list-style: none; }
.article-body ul li { position: relative; padding-left: 1.1em; margin-bottom: 0.5rem; line-height: 1.7; }
.article-body ul li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 0.5em; height: 0.5em; background: var(--color-primary); }
.article-body ol:not(.toc-inline__list):not(.toc-float__list) { padding-left: 1.75rem; margin-bottom: 1.25rem; counter-reset: ol-counter; list-style: none; }
.article-body ol:not(.toc-inline__list):not(.toc-float__list) li { position: relative; padding-left: 0.25em; margin-bottom: 0.5rem; line-height: 1.7; counter-increment: ol-counter; }
.article-body ol:not(.toc-inline__list):not(.toc-float__list) li::before { content: counter(ol-counter); position: absolute; left: -1.75em; top: 0; width: 1.4em; height: 1.4em; background: var(--color-primary); color: var(--color-white); font-size: 0.75em; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.article-body blockquote { border-left: 5px solid var(--color-primary); padding: 0.875rem 1.25rem; margin: 1.5rem 0; background: var(--color-bg); color: var(--color-text-muted); font-style: italic; }
.article-body table { border-collapse: collapse; table-layout: auto; width: 100%; min-width: 480px; font-size: var(--font-size-sm); margin-bottom: 0; }
.article-body th { padding: 0.625rem 0.875rem; font-weight: 700; text-align: left; white-space: nowrap; vertical-align: top; }
.article-body thead th { background: var(--color-primary); color: var(--color-white); border-right: 1px solid var(--color-primary-dark); }
.article-body tbody th { background: var(--color-surface); color: var(--color-text); border-top: 1px solid var(--color-border-dark); border-right: 1px solid var(--color-border-dark); }
.article-body td { padding: 0.625rem 0.875rem; border-top: 1px solid #ddd; border-right: 1px solid #ddd; vertical-align: top; white-space: nowrap; }
.article-body td > p, .article-body th > p { margin-bottom: 0; }
/* WordPressブロックエディタでテーブルを開いた際に付与される固定レイアウトを、
   内容に応じた可変幅に戻す(セル内テキストが隣のセルへはみ出すのを防ぐ) */
.article-body table.has-fixed-layout { table-layout: auto; }
.article-body .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; border: 2px solid var(--color-text); }
.article-body .table-scroll-wrap.has-scroll { margin-bottom: 0.25rem; }
.article-body .table-scroll-hint { display: none; font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; padding: 0.25rem 0; margin-bottom: 1.5rem; }
.article-body .table-scroll-hint.is-visible { display: block; }

.article-cta { background: var(--color-bg); border: 1px solid var(--color-border); padding: 1.5rem; margin-bottom: 2rem; text-align: center; }
.article-cta--inline { padding: 1rem; display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.article-notice { background: #fff8e6; border: 1.5px solid #f0c040; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: var(--font-size-sm); }
.article-notice__title { font-weight: 700; color: #8a6000; margin-bottom: 0.375rem; }
.editor-comment { background: var(--color-surface); border: 1.5px solid var(--color-border); border-left: 4px solid var(--color-accent); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: var(--font-size-sm); }
.editor-comment__title { font-weight: 700; color: var(--color-accent); margin-bottom: 0.375rem; }
.author-box { display: flex; gap: 1rem; padding: 1.25rem; background: var(--color-bg); border: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.author-box__avatar img { width: 90px; height: auto; flex-shrink: 0; display: block; }
.author-box__name { font-size: var(--font-size-sm); font-weight: 700; margin-bottom: 0.375rem; }
.author-box__name a { color: var(--color-primary); }
.author-box__role { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: 0.5rem; font-weight: normal; }
.author-box__bio { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.6; }
.share-buttons { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.share-buttons__label { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: 0.625rem; }
.share-buttons__list { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-white); transition: opacity var(--transition); }
.share-btn:hover { opacity: 0.85; }
.share-btn--twitter { background: #000; }
.share-btn--facebook { background: #1877f2; }
.share-btn--threads { background: #101010; }
.related-articles, .latest-articles-section { margin-bottom: 2rem; }
.related-articles__title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 1rem; padding-left: 0.875rem; border-left: 3px solid var(--color-primary); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.latest-list { display: flex; flex-direction: column; gap: 0.75rem; }

/* 目次(TOC) */
#toc-inline { border: 1px solid #d8d8d8; background: #fff; margin-bottom: 2rem; }
.toc-inline__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.7rem 1rem; background: #f3f3f3; border: none; border-left: 3px solid var(--color-primary); cursor: pointer; font-family: inherit; text-align: left; gap: 0.5rem; }
.toc-inline__label { font-size: 0.8125rem; font-weight: 700; color: #111; letter-spacing: 0.04em; }
.toc-inline__icon { font-size: 0.625rem; color: #555; flex-shrink: 0; }
.toc-inline__body { border-top: 1px solid #e8e8e8; }
.toc-inline__list { list-style: none; padding: 0.25rem 0; margin: 0; }
.toc-inline__list li { border-bottom: 1px solid #f0f0f0; }
.toc-inline__list a { display: block; padding: 0.45rem 1rem; font-size: 0.8125rem; color: #111 !important; text-decoration: none !important; line-height: 1.55; transition: background 0.1s, padding-left 0.1s; }
.toc-inline__list a:hover { background: #f5f5f5; padding-left: 1.25rem; }
.toc-float { position: fixed; bottom: 1.5rem; left: 1.25rem; z-index: 100; }
.toc-float__btn { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.875rem; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; font-family: inherit; border: none; cursor: pointer; box-shadow: var(--shadow-md); letter-spacing: 0.04em; transition: background 0.15s; }
.toc-float__btn:hover { background: var(--color-primary-dark); }
.toc-float__panel { position: absolute; bottom: calc(100% + 0.5rem); left: 0; width: 270px; background: #fff; border: 1px solid #ddd; box-shadow: var(--shadow-lg); max-height: 55vh; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s; pointer-events: none; }
.toc-float__panel.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: auto; }
.toc-float__title { font-size: 0.75rem; font-weight: 700; color: #111; background: #f3f3f3; padding: 0.5rem 0.875rem; border-bottom: 1px solid #e8e8e8; }
.toc-float__list { list-style: none; padding: 0.25rem 0; margin: 0; }
.toc-float__list a { display: block; padding: 0.4rem 0.875rem; font-size: 0.75rem; color: #111 !important; text-decoration: none !important; transition: background 0.1s; }
.toc-float__list a:hover { background: #f5f5f5; }

@media (max-width: 768px) {
  .article-title { font-size: var(--font-size-xl); }
  .article-body { font-size: var(--font-size-sm); line-height: 1.8; }
  .article-body h2 { font-size: var(--font-size-lg); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   スクール詳細
   ========================================================================== */
.school-detail { padding-block: 1.5rem 5rem; max-width: 960px; }
.sd-header { display: grid; grid-template-columns: 380px 1fr; gap: 2rem; margin-bottom: 3rem; align-items: start; }
.sd-header__img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.sd-header__img { width: 100%; height: 100%; object-fit: cover; }
.sd-header__pr { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.625rem; font-weight: 700; background: rgba(0,0,0,0.55); color: #fff; padding: 0.1em 0.4em; }
.sd-header__info { display: flex; flex-direction: column; gap: 0.75rem; }
.sd-header__cats { display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }
.sd-header__name { font-size: var(--font-size-2xl); font-weight: 900; line-height: 1.25; }
.sd-company { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.sd-company__item { display: flex; align-items: baseline; gap: 0.5rem; }
.sd-company__item dt { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.sd-company__item dd { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text); }
.method-badge { font-size: 0.6875rem; font-weight: 700; padding: 0.15em 0.5em; border: 1px solid currentColor; }
.method-badge--online { color: #0070f3; }
.method-badge--offline { color: #16a34a; }
.method-badge--hybrid { color: #9333ea; }
.sd-header__ratings { display: flex; flex-direction: column; gap: 0.375rem; }
.sd-rating { display: flex; align-items: center; gap: 0.5rem; }
.sd-rating__label { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-muted); min-width: 5rem; }
.sd-rating__count { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sd-header__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.75; }
.sd-header__actions { margin-top: 0.25rem; }
.sd-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: var(--font-size-sm); font-weight: 700; transition: opacity var(--transition); }
.sd-btn:hover { opacity: 0.82; }
.sd-btn--primary { background: var(--color-primary); color: var(--color-white); }
.sd-btn--lg { padding: 1rem 2rem; font-size: var(--font-size-base); }
.sd-section { margin-bottom: 3rem; }
.sd-section__title { font-size: var(--font-size-xl); font-weight: 900; margin-bottom: 1.25rem; padding-left: 0.875rem; border-left: 4px solid var(--color-primary); }
.sd-scores { border: 1px solid var(--color-border); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; background: var(--color-white); }
.score-row { display: grid; grid-template-columns: 10rem 1fr 2.5rem; align-items: center; gap: 0.75rem; }
.score-row__label { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.score-row__bar-wrap { height: 8px; background: var(--color-border); overflow: hidden; }
.score-row__bar { height: 100%; background: var(--color-primary); transition: width 0.6s ease; }
.score-row__num { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary); text-align: right; }
.sd-courses { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.course-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); min-width: 640px; table-layout: fixed; }
.course-table td { word-break: break-word; }
.course-table th { background: var(--color-surface); font-weight: 700; font-size: var(--font-size-xs); color: var(--color-text-muted); padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.course-table td { padding: 0.875rem; border: 1px solid var(--color-border); vertical-align: top; line-height: 1.5; }
.course-table tr:nth-child(even) td { background: var(--color-surface); }
.course-table__name strong { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.course-table__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.6; margin-top: 0.25rem; }
.course-table__duration { white-space: nowrap; }
.course-table__level { font-size: var(--font-size-xs); line-height: 1.5; }
.course-table__price strong { display: block; white-space: nowrap; }
.course-notes { list-style: none; margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-top: none; display: flex; flex-direction: column; gap: 0.25rem; }
.course-notes__item { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.6; }
.course-notes__name { font-weight: 700; color: var(--color-text); }
.sd-box { border: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.sd-box__title { display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-base); font-weight: 700; padding: 0.875rem 1.25rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.sd-box__title-icon { color: var(--color-primary); }
.sd-feature-list { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sd-feature-item { font-size: var(--font-size-sm); padding-left: 1.25em; position: relative; line-height: 1.6; }
.sd-feature-item::before { content: '▸'; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.sd-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sd-pros, .sd-cons { border: 1px solid var(--color-border); padding: 1rem 1.25rem; }
.sd-pros__title, .sd-cons__title { font-size: var(--font-size-sm); font-weight: 700; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-border); }
.sd-pros__title { color: #059669; border-bottom-color: #059669; }
.sd-cons__title { color: #DC2626; border-bottom-color: #DC2626; }
.sd-pros__list, .sd-cons__list { display: flex; flex-direction: column; gap: 0.5rem; }
.sd-pros__item, .sd-cons__item { font-size: var(--font-size-sm); padding-left: 1.25em; position: relative; line-height: 1.6; color: var(--color-text-muted); }
.sd-pros__item::before { content: '✓'; position: absolute; left: 0; color: #059669; font-weight: 700; }
.sd-cons__item::before { content: '✗'; position: absolute; left: 0; color: #DC2626; font-weight: 700; }
.sd-target-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sd-target-item { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--font-size-sm); padding: 0.875rem 1rem; background: var(--color-white); border: 1px solid var(--color-border); line-height: 1.55; }
.sd-target-icon { flex-shrink: 0; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-white); background: var(--color-primary); width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1em; }
.sd-reviews { display: flex; flex-direction: column; gap: 1rem; }
.sd-no-reviews { color: var(--color-text-muted); font-size: var(--font-size-sm); padding: 2rem 0; text-align: center; }
.sd-faq { display: flex; flex-direction: column; border: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: none; }
.faq-item__question { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; font-size: var(--font-size-sm); font-weight: 700; list-style: none; user-select: none; transition: background-color var(--transition); line-height: 1.55; }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__question { background: var(--color-surface); }
.faq-item__question:hover { background: var(--color-surface); }
.faq-item__q-icon { flex-shrink: 0; font-size: var(--font-size-xs); font-weight: 900; color: var(--color-white); background: var(--color-primary); width: 1.375rem; height: 1.375rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1em; }
.faq-item__chevron { flex-shrink: 0; margin-left: auto; color: var(--color-text-muted); transition: transform 0.2s ease; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem 1.25rem; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.faq-item__a-icon { flex-shrink: 0; font-size: var(--font-size-xs); font-weight: 900; color: var(--color-primary); background: #f3e8ff; border: 1px solid var(--color-primary); width: 1.375rem; height: 1.375rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1em; }
.faq-item__answer p { font-size: var(--font-size-sm); line-height: 1.75; color: var(--color-text-muted); }
.sd-cta { background: var(--color-surface); border: 1px solid var(--color-border); padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sd-cta__text { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sd-cta__notice { font-size: var(--font-size-xs); color: var(--color-text-muted); }
@media (max-width: 768px) {
  .sd-header { grid-template-columns: 1fr; }
  .sd-pros-cons { grid-template-columns: 1fr; }
  .sd-target-list { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 8rem 1fr 2.5rem; gap: 0.5rem; }
  .score-row__label { font-size: var(--font-size-xs); }
}

/* ==========================================================================
   スクール一覧
   ========================================================================== */
.page-wrap { padding-block: 2.5rem 5rem; }
.page-head { margin-bottom: 2rem; }
.page-head__sub { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.375rem; }
.page-head__title { font-size: var(--font-size-2xl); font-weight: 900; margin-bottom: 0.75rem; }
.page-head__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; }
.filter-tabs { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: 2rem; border-bottom: 2px solid var(--color-border); }
.filter-tab { font-size: var(--font-size-sm); font-weight: 700; padding: 0.625rem 1.25rem; color: var(--color-text-muted); background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color var(--transition), border-color var(--transition); white-space: nowrap; }
.filter-tab:hover { color: var(--color-primary); }
.filter-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.schools-list { display: flex; flex-direction: column; gap: 1.5rem; }
.school-card { display: grid; grid-template-columns: 2fr 3fr; align-items: start; border: 1px solid var(--color-border); background: var(--color-white); transition: box-shadow var(--transition); }
.school-card:hover { box-shadow: var(--shadow-md); }
.school-card__img-wrap { position: relative; display: block; overflow: hidden; }
.school-card__img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.school-card:hover .school-card__img { transform: scale(1.03); }
.school-card__placeholder { width: 100%; aspect-ratio: 16/9; background: var(--color-surface); }
.school-card__pr { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.625rem; font-weight: 700; background: rgba(0,0,0,0.55); color: #fff; padding: 0.1em 0.4em; }
.school-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.school-card__meta-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.school-card__cats { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.school-card__methods { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.school-card__name { font-size: var(--font-size-lg); font-weight: 900; line-height: 1.3; }
.school-card__name a { transition: color var(--transition); }
.school-card__name a:hover { color: var(--color-primary); }
.school-card__company { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.school-card__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.school-card__specs { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 0.625rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-block: 0.25rem; }
.spec-item { display: flex; flex-direction: column; gap: 0.1rem; }
.spec-item dt { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; }
.spec-item dd { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); }
.school-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.school-card__price-note { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.school-card__btn { font-size: var(--font-size-sm); font-weight: 700; padding: 0.5rem 1rem; background: var(--color-primary); color: var(--color-white); transition: opacity var(--transition); white-space: nowrap; }
.school-card__btn:hover { opacity: 0.82; }
.no-result { text-align: center; padding: 3rem 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
@media (max-width: 768px) { .school-card { grid-template-columns: 1fr; } .school-card__specs { gap: 1rem; } }

/* ==========================================================================
   固定ページ共通(お問い合わせ・プライバシー・編集方針・運営会社情報・著者・検索・404)
   ========================================================================== */
.static-page { padding-block: 1.5rem 5rem; max-width: 760px; }
.static-title { font-size: var(--font-size-2xl); font-weight: 900; margin-bottom: 1.25rem; padding-left: 0.875rem; border-left: 4px solid var(--color-primary); }
.static-lead { font-size: var(--font-size-base); color: var(--color-text-muted); line-height: 1.75; margin-bottom: 2rem; }
.last-updated { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: 2rem; padding-left: 0.875rem; }
.static-body { font-size: var(--font-size-sm); line-height: 1.85; color: var(--color-text); }
.static-body > p { color: var(--color-text-muted); margin-bottom: 1.25rem; }
.static-body h2 { font-size: var(--font-size-base); font-weight: 700; margin-block: 2.25rem 0.75rem; padding: 0.5rem 0.875rem; background: var(--color-surface); border-left: 3px solid var(--color-primary); }
.static-body p { color: var(--color-text-muted); margin-bottom: 0.875rem; }
.static-body a { color: var(--color-primary); text-decoration: underline; }
.static-body ul { list-style: disc; padding-left: 1.75rem; margin-bottom: 1rem; color: var(--color-text-muted); }
.static-body ul li { margin-bottom: 0.375rem; }
.static-body h3 { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); margin-block: 1.5rem 0.5rem; }
.info-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); margin-bottom: 1rem; }
.info-table th, .info-table td { padding: 0.75rem 1rem; border: 1px solid var(--color-border); vertical-align: top; line-height: 1.6; }
.info-table th { width: 28%; background: var(--color-surface); font-weight: 700; white-space: nowrap; }
.info-table td { background: var(--color-white); color: var(--color-text-muted); }
.info-table a { color: var(--color-primary); text-decoration: underline; }
.ad-sample { display: inline-block; font-size: 0.625rem; font-weight: 700; padding: 0.1em 0.45em; background: #1a1a1a; color: #fff; vertical-align: middle; letter-spacing: 0.05em; }
@media (max-width: 640px) { .info-table th { width: auto; white-space: normal; } }

.info-section { margin-bottom: 3rem; }
.info-section__title { font-size: var(--font-size-lg); font-weight: 700; padding: 0.5rem 0.875rem; background: var(--color-surface); border-left: 3px solid var(--color-primary); margin-bottom: 1.25rem; }
.info-body { font-size: var(--font-size-sm); line-height: 1.8; color: var(--color-text-muted); }
.info-body p { margin-bottom: 1rem; }
.info-body a { color: var(--color-primary); text-decoration: underline; }
.info-body h3 { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); margin-block: 1.5rem 0.5rem; }
.info-body ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.info-body ul li { margin-bottom: 0.25rem; }
.related-links { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; }
.related-links a { display: inline-block; font-size: var(--font-size-sm); font-weight: 700; padding: 0.5rem 1rem; border: 1px solid var(--color-border); color: var(--color-text); transition: border-color var(--transition), color var(--transition); }
.related-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.contact-form-wrap { width: 100%; overflow: hidden; }
.contact-form-wrap iframe { display: block; max-width: 100%; }

/* ===== 著者ページ ===== */
.author-page { padding-block: 1.5rem 5rem; max-width: 960px; }
.author-profile { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.75rem; background: var(--color-surface); border: 1px solid var(--color-border); margin-bottom: 3rem; }
.author-profile__avatar img { width: 140px; height: auto; flex-shrink: 0; display: block; }
.author-profile__body { display: flex; flex-direction: column; gap: 0.375rem; }
.author-profile__name { font-size: var(--font-size-xl); font-weight: 900; }
.author-profile__role { font-size: var(--font-size-sm); color: var(--color-primary); font-weight: 700; }
.author-profile__bio { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.75; margin-top: 0.25rem; }
.author-profile__links { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.author-profile__link { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--color-border); color: var(--color-text-muted); transition: border-color var(--transition), color var(--transition); }
.author-profile__link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.author-articles__title { font-size: var(--font-size-lg); font-weight: 900; padding-left: 0.875rem; border-left: 4px solid var(--color-primary); margin-bottom: 1.5rem; }
.author-articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.author-articles__empty { font-size: var(--font-size-sm); color: var(--color-text-muted); }
@media (max-width: 768px) { .author-profile { flex-direction: column; } .author-articles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .author-articles__grid { grid-template-columns: 1fr; } }

/* ===== 検索ページ ===== */
.search-header { margin-bottom: 1.5rem; }
.search-title { font-size: var(--font-size-xl); font-weight: 800; margin-bottom: 0.375rem; }
.search-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.search-form { display: flex; gap: 0.75rem; margin-bottom: 2rem; max-width: 48rem; }
.search-input { flex: 1; padding: 0.625rem 0.875rem; border: 1.5px solid var(--color-border); font-size: var(--font-size-base); font-family: inherit; outline: none; transition: border-color var(--transition); }
.search-input:focus { border-color: var(--color-primary); }