/* ================================================================
   _layout.css
   コンテナ / セクション / タイポグラフィ / セクションヘッダー
   ================================================================ */

/* ── コンテナ ───────────────────────────────────── */
.container        { width: min(1240px, 92%); margin-inline: auto; position: relative; z-index: 1; }
.container--wide  { width: min(1600px, 96%); margin-inline: auto; position: relative; z-index: 1; }
.container--narrow{ width: min(800px,  92%); margin-inline: auto; position: relative; z-index: 1; }

/* ── セクション ─────────────────────────────────── */
.section{
  /* padding-block:var(--sp-xl); */
  position:relative;
  content-visibility:auto;
  contain-intrinsic-size:1000px;
}
.section--alt { background: linear-gradient(180deg, transparent, rgba(13,16,40,.6), transparent); }

/* アクセシビリティ */
.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;
}

/* ── 見出し・テキスト ────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--f-heading);
  font-weight: 700;
  color: var(--c-txt-hi);
  line-height: 1.15;
  letter-spacing: .04em;
  padding-left:0.5rem;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1rem; }
h3 { font-size: 1rem; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ── セクションヘッダー部品 ─────────────────────── */
.section-eyebrow {
  display: block;
  font-family: var(--f-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--c-cyan);
  text-shadow: 0 0 16px rgba(0,207,255,.6);
  margin-bottom: .8rem;
}

.section-title {
  font-family: var(--f-display);
  position: relative;
  display: inline-block;
  color: var(--c-txt-hi);
}
.section-title::before,
.section-title::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 56px;
  top: 50%;
  transform: translateY(-50%);
}
.section-title::before { right: calc(100% + 14px); background: linear-gradient(90deg, transparent, var(--c-gold)); }
.section-title::after  { left:  calc(100% + 14px); background: linear-gradient(90deg, var(--c-gold), transparent); }

.section-header { text-align: center; margin-bottom: var(--sp-lg); }
.section-lead   { color: var(--c-txt-muted); max-width: 580px; margin: 1rem auto 0; font-size: .95rem; }




/* ================================================================
   _variables.css
   CSS変数 / リセット / Cosmos背景
   ================================================================ */

/* ── CSS Custom Properties ──────────────────────── */

/* ── フォント・スペーシング・形状・アニメーション（共通） */
:root {
  --f-display: 'Cinzel', serif;
  --f-heading: 'Cinzel', serif;
  --f-body:    'Noto Sans JP', sans-serif;
  --f-ui:      'Rajdhani', sans-serif;

  --sp-xs: .5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 4rem;

  --radius:    6px;
  --radius-lg: 14px;

  --transition: 280ms cubic-bezier(.4,0,.2,1);
}

/* ── ダークモード（デフォルト） ─────────────────── */
:root,
[data-theme="dark"] {
  /* パレット */
  --c-void:      #020308;
  --c-deep:      #05060f;
  --c-dark:      #090b1c;
  --c-panel:     #0d1028;
  --c-panel2:    #111535;

  /* ゴールド */
  --c-gold:      #c8a020;
  --c-gold-hi:   #f0cc50;
  --c-gold-lo:   #7a5e0a;
  --c-gold-glow: rgba(200,160,32,.55);

  /* アクセント */
  --c-cyan:      #00cfff;
  --c-mag:       #cc44ff;

  /* テキスト */
  --c-txt:       #cdd0e8;
  --c-txt-muted: #d2f8ff;
  --c-txt-hi:    #ffffff;

  /* ボーダー */
  --c-border:    rgba(200,160,32,.20);
  --c-border-hi: rgba(200,160,32,.55);

  /* シャドウ */
  --shadow-gold: 0 0 28px rgba(200,160,32,.40), 0 0 80px rgba(200,160,32,.12);
  --shadow-card: 0 16px 48px rgba(0,0,0,.6);

  /* Cosmos背景 */
  --bg-cosmos-1: rgba(204,68,255,.07);
  --bg-cosmos-2: rgba(0,207,255,.06);
  --bg-cosmos-3: rgba(255,255,255,.55);
  --bg-cosmos-4: rgba(255,255,255,.45);
  --bg-cosmos-5: rgba(255,255,255,.35);
  --bg-cosmos-6: rgba(200,160,32,.30);
}

/* ── ライトモード ────────────────────────────────── */
[data-theme="light"] {
  /* パレット */
  --c-void:      #f4f1eb;
  --c-deep:      #f8f5ef;
  --c-dark:      #ede9df;
  --c-panel:     #ffffff;
  --c-panel2:    #f0ecdf;

  /* ゴールド（ライト時は少し濃くして視認性確保） */
  --c-gold:      #a07810;
  --c-gold-hi:   #c8960a;
  --c-gold-lo:   #c8a020;
  --c-gold-glow: rgba(160,120,16,.45);

  /* アクセント */
  --c-cyan:      #0080b0;
  --c-mag:       #8822cc;

  /* テキスト */
  --c-txt:       #2c2e40;
  --c-txt-muted: #7a7a90;
  --c-txt-hi:    #0a0a14;

  /* ボーダー */
  --c-border:    rgba(160,120,16,.22);
  --c-border-hi: rgba(160,120,16,.50);

  /* シャドウ */
  --shadow-gold: 0 0 22px rgba(160,120,16,.30), 0 0 60px rgba(160,120,16,.08);
  --shadow-card: 0 8px 32px rgba(0,0,0,.12);

  /* Cosmos背景 */
  --bg-cosmos-1: rgba(180,60,220,.05);
  --bg-cosmos-2: rgba(0,140,200,.04);
  --bg-cosmos-3: rgba(160,120,16,.20);
  --bg-cosmos-4: rgba(160,120,16,.15);
  --bg-cosmos-5: rgba(160,120,16,.12);
  --bg-cosmos-6: rgba(160,120,16,.25);
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-deep);
  color: var(--c-txt);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;;
  text-rendering:optimizeLegibility;
  transition: background var(--transition), color var(--transition);
}


.post-card__thumb img,
.hero-bg-img,
.page-hero-bg img{
  aspect-ratio:16/9;
}

a {
  color: var(--c-gold);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--c-gold-hi); }

ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }

/* スクロールバー */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-dark); }
::-webkit-scrollbar-thumb { background: var(--c-gold-lo); border-radius: 3px; }

/* 選択テキスト */
::selection { background: rgba(200,160,32,.25); color: var(--c-txt-hi); }

/* ── Cosmos 背景（全ページ固定） ────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, var(--bg-cosmos-1), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 80%, var(--bg-cosmos-2), transparent 55%),
    radial-gradient(1px 1px at 18% 22%, var(--bg-cosmos-3), transparent),
    radial-gradient(1px 1px at 72%  8%, var(--bg-cosmos-4), transparent),
    radial-gradient(1px 1px at 45% 68%, var(--bg-cosmos-5), transparent),
    radial-gradient(2px 2px at 63% 91%, var(--bg-cosmos-6), transparent);
  transition: background var(--transition);
}




/* ================================================================
   _header.css
   サイトヘッダー / プライマリナビ / ドロップダウン
   ハンバーガー / モバイルドロワー
   ================================================================ */

/* ── サイトヘッダー ──────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: .9rem 0;
  background: linear-gradient(180deg, rgba(2,3,8,.95), rgba(2,3,8,.70) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(200,160,32,.12);
  transition: background var(--transition), border-color var(--transition);
}
.site-header.is-scrolled {
  background: rgba(5,6,15,.97);
  border-bottom-color: var(--c-border);
}

/* ライトモード：ヘッダー背景 */
[data-theme="light"] .site-header {
  background: linear-gradient(180deg, rgba(248,245,239,.97), rgba(248,245,239,.80) 80%, transparent);
  border-bottom-color: rgba(160,120,16,.15);
}
[data-theme="light"] .site-header.is-scrolled {
  background: rgba(248,245,239,.99);
}

/* ライトモード：ドロップダウン */
[data-theme="light"] .dropdown-menu {
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 50px rgba(0,0,0,.12), var(--shadow-gold);
}

/* ライトモード：モバイルドロワー */
[data-theme="light"] .mobile-drawer {
  background: rgba(248,245,239,.99);
}

/* ライトモード：section--alt */
[data-theme="light"] .section--alt {
  background: linear-gradient(180deg, transparent, rgba(200,185,150,.25), transparent);
}

/* ── テーマ切替ボタン ────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-txt-muted);
  font-size: 1rem;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
  box-shadow: var(--shadow-gold);
  transform: rotate(20deg);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: 2rem;
}

/* ── ロゴ ───────────────────────────────────────── */
.site-logo       { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; }
.logo-gem        { width: 42px; height: 42px; filter: drop-shadow(0 0 8px var(--c-gold-glow)); }
.logo-text-wrap  { display: flex; flex-direction: column; gap: 0; }
.logo-name       { font-family: var(--f-display); font-size: .72rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold-hi); text-shadow: 0 0 12px var(--c-gold-glow); line-height: 1.1; }
.logo-tagline    { font-family: var(--f-ui); font-size: .58rem; letter-spacing: .3em; color: var(--c-txt-muted); }

/* ── プライマリナビ ──────────────────────────────── */
.primary-nav ul  { display: flex; align-items: center; gap: .15rem; }
.primary-nav a   {
  font-family: var(--f-ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-txt-muted);
  padding: .5rem .8rem;
  position: relative; display: block;
  transition: color var(--transition);
}
.primary-nav a::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 1px;
  background: var(--c-gold);
  transition: width var(--transition);
}
.primary-nav a:hover,
.primary-nav .current > a { color: var(--c-gold-hi); }
.primary-nav a:hover::after,
.primary-nav .current > a::after { width: 80%; }

/* ── ドロップダウン ──────────────────────────────── */
.has-dropdown { position: relative; }
.has-dropdown > a::before {
  content: '▾';
  margin-left: .3rem; font-size: .65rem;
  color: var(--c-gold-lo);
  transition: transform var(--transition);
}
.has-dropdown:hover > a::before { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(9,11,28,.97);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: .5rem;
  min-width: 200px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0,0,0,.7), var(--shadow-gold);
}
.has-dropdown:hover .dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu li a {
  padding: .5rem 1.1rem;
  white-space: nowrap;
  border-radius: var(--radius);
  display: block; font-size: .74rem;
}
.dropdown-menu li a:hover { background: rgba(200,160,32,.1); }

/* ── ヘッダーアクション ─────────────────────────── */
.header-actions { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }

.header-cta {
  font-family: var(--f-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--c-gold-lo), var(--c-gold));
  color: var(--c-void);
  padding: .48rem 1.3rem;
  border-radius: var(--radius);
  transition: box-shadow var(--transition), transform var(--transition);
}
.header-cta:hover { box-shadow: var(--shadow-gold); transform: translateY(-2px); color: var(--c-void); }

.member-badge {
  font-family: var(--f-ui); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em;
  padding: .22em .7em;
  border: 1px solid currentColor;
  border-radius: 3px;
  display: none; /* JS が show する */
}

/* ── ハンバーガー ────────────────────────────────── */
.hamburger          { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.hamburger span     { display: block; width: 24px; height: 2px; background: var(--c-gold); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.hamburger.is-open span:nth-child(1) { transform: rotate(45deg)  translate(5px, 5px); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── モバイルドロワー ────────────────────────────── */
.mobile-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 950;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  backdrop-filter: blur(3px);
}
.mobile-nav-overlay.is-open { opacity: 1; visibility: visible; }

.mobile-drawer {
  position: fixed;
  top: 0; right: -100%;
  width: min(320px, 85vw);
  height: 100dvh;
  background: rgba(5,6,15,.99);
  border-left: 1px solid var(--c-border);
  z-index: 960;
  padding: 5rem 1.75rem 2rem;
  overflow-y: auto;
  transition: right var(--transition);
}
.mobile-drawer.is-open { right: 0; }
.mobile-drawer a {
  font-family: var(--f-ui); font-size: .95rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-txt-muted);
  padding: .7rem .9rem; display: block; border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}
.mobile-drawer a:hover { background: rgba(200,160,32,.1); color: var(--c-gold-hi); }

.drawer-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border);
  color: var(--c-txt-muted); font-size: 1.1rem;
  transition: border-color var(--transition), color var(--transition);
}
.drawer-close:hover { border-color: var(--c-gold); color: var(--c-gold); }




/* ================================================================
   _footer.css
   サイトフッター / ソーシャルボタン / スクロールトップ / Reveal
   ================================================================ */

/* ── サイトフッター ──────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 3rem;
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--c-border);
}

/* ロゴ・ブランドエリア */
.footer-logo      { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.3rem; text-decoration: none; }
.footer-logo-name { font-family: var(--f-display); font-size: .82rem; color: var(--c-gold-hi); text-shadow: 0 0 10px var(--c-gold-glow); }
.footer-tagline   { font-size: .85rem; color: var(--c-txt-muted); line-height: 1.75; margin-bottom: 1.4rem; }

/* ソーシャルボタン */
.footer-social    { display: flex; gap: .65rem; }
.social-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-txt-muted); font-size: .9rem;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.social-btn:hover { border-color: var(--c-gold); color: var(--c-gold); box-shadow: var(--shadow-gold); }

/* ナビコラム */
.footer-nav-title { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid var(--c-border); }
.footer-nav li    { margin-bottom: .6rem; }
.footer-nav a     { font-size: .85rem; color: var(--c-txt-muted); transition: color var(--transition), padding-left var(--transition); }
.footer-nav a:hover { color: var(--c-txt-hi); padding-left: .4rem; }

/* コピーライトバー */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding-block: 1.75rem;
  flex-direction: column;
  text-align: center;
}

.footer-copy      { font-family: var(--f-ui); font-size: .72rem; color: var(--c-txt-muted); letter-spacing: .04em; }
.footer-legal     { display: flex; gap: 1.5rem; flex-wrap: wrap;justify-content: center; }
.footer-legal a   { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .1em; color: var(--c-txt-muted); }
.footer-legal a:hover { color: var(--c-gold); }

/* ── スクロールトップボタン ─────────────────────── */
.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 44px; height: 44px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: rgba(9,11,28,.9);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gold); font-size: .9rem;
  z-index: 800;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all var(--transition);
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover      { border-color: var(--c-gold); box-shadow: var(--shadow-gold); transform: translateY(-2px); color: var(--c-gold-hi); }

/* ── Reveal（スクロール出現アニメーション） ─────── */
.reveal           { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-delay-1   { transition-delay: .1s; }
.reveal-delay-2   { transition-delay: .2s; }
.reveal-delay-3   { transition-delay: .3s; }
.reveal-delay-4   { transition-delay: .4s; }


/* ================================================================
   _hero.css
   内部ページ Page Hero / パンくずリスト
   ※ トップページ Hero は home.css へ移動
   ================================================================ */

/* ── 内部ページ Page Hero ────────────────────────── */
.page-hero {
  position: relative;
  min-height: 40vh;
  display: flex; align-items: flex-end;
  padding-top: 9rem;
  overflow: hidden;
}
.page-hero-bg                 { position: absolute; inset: 0; }
.page-hero-bg img             { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.page-hero-bg-overlay         { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,3,8,1) 0%, rgba(2,3,8,.7) 45%, rgba(2,3,8,.25) 100%); }
.page-hero-content            { position: relative; z-index: 1; width: 100%; padding: 3rem 0 4rem; }

.page-title { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 3.5rem); color: var(--c-txt-hi); text-shadow: 0 2px 24px rgba(0,0,0,.9); }
.page-lead  { color: var(--c-txt-muted); font-size: 1rem; max-width: 600px; margin-top: .8rem; line-height: 1.8; }

/* ── パンくずリスト ──────────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: 1.2rem; margin-top:5rem; margin-left:0.5rem;}
.breadcrumb li {
  font-family: var(--f-ui); font-size: .72rem; letter-spacing: .08em;
  color: var(--c-txt-muted);
  display: flex; align-items: center; gap: .3rem;
}
.breadcrumb li:not(:last-child)::after { content: '›'; color: var(--c-gold-lo); }
.breadcrumb a       { color: var(--c-txt-muted); }
.breadcrumb a:hover { color: var(--c-gold); }





/* ================================================================
   レスポンシブ
   ── ここに全ページのメディアクエリをまとめる
   ── 各 _*.css では定義せず、必ずここに書く
   ================================================================ */

/* ── 1080px 以下（タブレット） ──────────────────── */
@media (max-width: 1080px) {


  /* フッター */
  .footer-grid       { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* 記事 */
  .article-layout    { grid-template-columns: 1fr; }
  .article-sidebar   { display: none; }

  /* デッキ詳細 */
  .deck-detail-stats-row { grid-template-columns: 1fr 1fr; }

  /* スペーシング */
  :root { --sp-xl: 4rem; --sp-lg: 3rem; }
}

/* ── 768px 以下（スマートフォン横・小型タブレット） */
@media (max-width: 768px) {
    /* ヘッダー */
  .primary-nav,
  .header-cta        { display: none; }
  .hamburger         { display: flex; }
  /* グリッド系 */
  .deck-grid,
  .post-grid         { grid-template-columns: 1fr; }

  /* Tier表 */
  .tier-row          { grid-template-columns: 50px 1fr; }
  .tier-row__letter  { font-size: 1.3rem; }

  /* フッター */
  .footer-grid       { grid-template-columns: 1fr; }


  /* ヘッダー */
  .header-inner      { padding-inline: 1rem; }

  /* 強み・弱み */
  .sw-grid           { grid-template-columns: 1fr; }

  /* ランキング表：一部カラム非表示 */
  .ranking-table     { font-size: .78rem; }
  .ranking-table .cls-col,
  .ranking-table .rarity-col { display: none; }

  /* 法的ページ */
  .legal-wrap        { padding: 2rem 1.5rem; }

  /* スペーシング */
  :root { --sp-xl: 4rem; --sp-lg: 2.5rem; }
}

/* ── 480px 以下（スマートフォン縦） ─────────────── */
@media (max-width: 480px) {
  
  /* プラン */
  .plan-grid         { grid-template-columns: 1fr; }

  /* デッキ詳細 */
  .deck-detail-stats-row { grid-template-columns: 1fr 1fr; }

  /* タブ */
  .tabs              { gap: .35rem; }
  .tab-btn           { font-size: .65rem; padding: .4rem .75rem; }

  /* マイページ */
  .mypage-grid       { grid-template-columns: 1fr; }


  .legal-wrap{padding:2rem 1.5rem}
}




@media (prefers-reduced-motion: reduce){

  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

}


@media (hover:none){

  .deck-card:hover,
  .post-card:hover,
  .btn:hover{
    transform:none;
    box-shadow:none;
  }

}



/* ============================================================
   breadcrumb.css
   パンくずリスト
   依存: CSS カスタムプロパティ（ダーク／ライト両テーマ対応）
   ============================================================ */

/* ── テーマ変数（既存 styles.css に定義済みの場合は削除可） ── */
:root,
[data-theme="dark"] {
  --bc-bg:          transparent;
  --bc-text:        rgba(255, 255, 255, .55);
  --bc-link:        rgba(255, 255, 255, .75);
  --bc-link-hover:  #c8a020;
  --bc-current:     #e8d48a;
  --bc-sep-color:   rgba(200, 160, 32, .45);
  --bc-focus-ring:  #c8a020;
}

[data-theme="light"] {
  --bc-bg:          transparent;
  --bc-text:        rgba(60, 50, 30, .55);
  --bc-link:        rgba(60, 50, 30, .75);
  --bc-link-hover:  #996b00;
  --bc-current:     #5a3e00;
  --bc-sep-color:   rgba(150, 100, 0, .40);
  --bc-focus-ring:  #996b00;
}

/* ── レイアウト ────────────────────────────────────────────── */
.breadcrumb {
  background: var(--bc-bg);
  padding: .5rem 0;
}

.breadcrumb-inner {
  max-width: 1200px;       /* サイト本文幅に合わせて調整 */
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── リスト ────────────────────────────────────────────────── */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;                  /* セパレータを ::after で出すので gap は 0 */
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--bc-text);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
}

/* ── 各アイテム ────────────────────────────────────────────── */
.breadcrumb-item {
  display: flex;
  align-items: center;
}

/* ── セパレータ（chevron） ─────────────────────────────────── */
.breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  width: 1em;
  height: 1em;
  margin: 0 .3em;
  color: var(--bc-sep-color);
  flex-shrink: 0;
}

/* SVG chevron を CSS で描画 */
.breadcrumb-sep::before {
  content: '';
  display: block;
  width: .45em;
  height: .45em;
  border-top:   1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(10%);
  margin-left: .2em;
}

/* ── リンク ────────────────────────────────────────────────── */
.breadcrumb-link {
  color: var(--bc-link);
  text-decoration: none;
  transition: color .18s ease;
  white-space: nowrap;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  color: var(--bc-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb-link:focus-visible {
  outline: 2px solid var(--bc-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 現在ページ ────────────────────────────────────────────── */
.breadcrumb-item--current .breadcrumb-current {
  color: var(--bc-current);
  font-weight: 600;
  /* 長いタイトルは省略 */
  max-width: 24em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

/* ── モバイル ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .breadcrumb-inner {
    padding: 0 .875rem;
  }

  .breadcrumb-list {
    font-size: .72rem;
  }

  .breadcrumb-item--current .breadcrumb-current {
    max-width: 16em;
  }
}

.main-body {
  padding:0 5px 0 5px;
}


.trans-div {
  margin-bottom: 10px;
}