/* =========================================================
   Design Tokens（サイト共通の色・余白・影） / Tokens
========================================================= */
:root{
  --color-text:#333;
  --color-muted:#6b7280;
  --color-bg:#fff;

  --color-brand:#2c398c;
  --color-brand-2:#1a73e8;
  --color-brand-2-dark:#0b59d6;

  --color-accent-ok: #1f5fcf;
  --color-accent-warn: #cc7a00;

  --color-border:#dee3ef;
  --color-border-soft:#e6e9f2;

  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;

  --shadow-sm:0 2px 6px rgba(0,0,0,.12);
  --shadow-md:0 2px 8px rgba(0,0,0,.05);
  --shadow-lg:0 8px 20px rgba(0,0,0,.08);

  --space-0:0px;
  --space-1:6px;
  --space-2:10px;
  --space-3:12px;
  --space-4:16px;
  --space-5:18px;
  --space-6:20px;
  --space-7:24px;
  --space-8:28px;
  --space-9:32px;
  --space-10:40px;
  --space-11:48px;

  /* タイポスケール */
  --fs-12:12px;
  --fs-14:14px;
  --fs-15:15px;
  --fs-16:16px;
  --fs-18:18px;
  --fs-22:22px;
  --fs-24:24px;
  --fs-26:26px;
  --fs-32:32px;
}

/* =========================================================
   Base Reset & Typography
========================================================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-padding-top:100px; }
body{
  font-family:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-16);
  line-height:1.8;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
a{
  color:var(--color-brand-2);
  text-decoration:none;
  transition:color .2s ease;
}
a:hover{
  color:var(--color-brand-2-dark);
  text-decoration:underline;
}
a:focus-visible{
  outline:3px solid rgba(26,115,232,.35);
  outline-offset:2px;
  border-radius:4px;
}
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }

/* スキップリンク */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; width:auto; height:auto;
  background:#111; color:#fff; padding:8px 12px; border-radius:6px; z-index:9999;
}

/* =========================================================
   Header / Global Nav
========================================================= */
.site-header {
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky; top:0; z-index:1000;
  box-shadow:var(--shadow-sm);
}
.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px var(--space-6);
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
}
.logo img{ height:56px; inline-size:auto; }

/* Global Navigation */
.global-nav ul {
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:var(--space-6);
}
.global-nav li a {
  position:relative;
  display:inline-block;
  font-size:var(--fs-16);
  font-weight:500;
  color:#1a1a1a;
  line-height:38px;
  transition:color .25s ease;
}
.global-nav li a::after {
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--color-brand);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .2s ease;
}
.global-nav li a:hover { color:var(--color-brand); text-decoration:none; }
.global-nav li a:hover::after { transform:scaleX(1); }

.global-nav .contact-link {
  background:var(--color-brand);
  color:#fff; font-weight:700;
  line-height:38px; padding:0 12px; border-radius:6px;
}
.global-nav .contact-link::after { display:none; }
.global-nav .contact-link:hover { background:#1f2b6b; color:#fff; }

/* ナビ折返し対策（小さい幅で崩れ防止） */
@media (max-width: 980px){
  .logo img{ height:48px; }
  .global-nav ul{ gap:var(--space-4); }
}
@media (max-width: 820px){
  .global-nav ul{ gap:var(--space-3); }
  .global-nav li a{ font-size:var(--fs-15); line-height:34px; }
  .global-nav .contact-link{ line-height:34px; }
}

/* =========================================================
   Page Header（パンくず＋タイトル帯）
========================================================= */
.page-header{
  position: relative;
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border-soft);
  margin:0;
}
.page-header::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 240px at 50% -40px, rgba(26,115,232,.12), transparent 60%),
    radial-gradient(600px 160px at 80% 0, rgba(44,57,140,.10), transparent 60%);
  pointer-events:none;
}
.page-header__inner{
  max-width:1080px; margin:0 auto;
  padding:22px 20px;
}
.page-header .breadcrumb ol{
  display:flex; flex-wrap:wrap; gap:6px;
  list-style:none; margin:0 0 10px; padding:0;
}
.page-header .breadcrumb li{ font-size:var(--fs-14); color:#475569; }
.page-header .breadcrumb li+li::before{
  content:"›"; margin:0 6px; color:#94a3b8;
}
.page-header .breadcrumb a{ color:#334155; text-decoration:none; }
.page-header .breadcrumb a:hover{ text-decoration:underline; }

.page-header .page-title{
  font-size: var(--fs-32);
  line-height: 1.3; font-weight: 700; color:#111827;
  margin: 10px 0 0;
  border-left: 6px solid var(--color-brand-2);
  padding-left: 14px;
}
@media (max-width: 768px){
  .page-header__inner { padding:18px 16px 22px; }
  .page-header .page-title { font-size:var(--fs-26); }
}

/* =========================================================
   Content Wrapper
========================================================= */
.content_wrapper {
  max-width:1080px;
  margin:0 auto;
  padding: 0 var(--space-6) var(--space-10);
}

/* =========================================================
   Eyecatch
========================================================= */
.eyecatch {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.eyecatch img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display:block;
}

/* =========================================================
   Lead
========================================================= */
.lead {
  background:#f4f8ff;
  border-left:4px solid var(--color-brand-2);
  padding:var(--space-4) var(--space-6);
  font-size:var(--fs-18);
  margin: var(--space-2) 0 var(--space-9);
  line-height:1.7;
}
@media (max-width: 768px){
  .lead{ font-size:var(--fs-16); }
}

/* =========================================================
   TOC
========================================================= */
.toc{ margin:24px 0 32px; }
.toc-box{
  background:#fff; border:1px solid var(--color-border-soft);
  border-radius:var(--radius-md); padding:16px 18px;
}
.toc-label{ font-size:var(--fs-14); letter-spacing:.03em; color:var(--color-muted); margin-bottom:10px; }
.toc-list{ margin:0; padding-left:1.2em; list-style:decimal; }
.toc-list li{ margin:6px 0; line-height:1.7; }
.toc-list a{ color:#1a1a1a; }
.toc-list a:hover{ color:var(--color-brand); text-decoration:underline; }

/* =========================================================
   Sections & In-article elements
========================================================= */
section{ margin-bottom:var(--space-11); }
.main-section h2{
  font-size:var(--fs-24); font-weight:700; color:#1a1a1a;
  background:#e8f0fe; padding:10px 14px;
  border-left:6px solid var(--color-brand-2);
  border-bottom:2px solid var(--color-brand-2);
  margin:48px 0 24px; border-radius:4px;
}
.main-section h3{
  font-size:var(--fs-18); font-weight:600; color:var(--color-brand);
  border-bottom:2px solid #d3d9ee; padding-bottom:6px; margin:32px 0 12px;
}

.section-image { margin:20px auto; text-align:center; }
.section-image img{
  display:inline-block;
  max-width:100%; height:auto;
}

.main-section ul{ margin:16px 0 24px; padding-left:1.2em; }

.rfid-list{ list-style:disc; padding-left:1.5em; }
.rfid-list li::marker{ color:var(--color-brand-2); font-size:1.1em; }

.term{ font-weight:bold; }

/* check-list / alert-list */
.check-list li,
.alert-list li{
  list-style:none; position:relative; padding-left:2em; margin-bottom:1em;
}
.check-list li::before{
  content:"✔";
  color: var(--color-accent-ok);
  position:absolute; left:0; top:.2em;
  font-weight: 800;
}
.alert-list li::before{
  content:"⚠";
  color: var(--color-accent-warn);
  position:absolute; left:0; top:.2em;
  font-weight: 800;
}

/* Flow steps（番号付き手順リスト） */
.flow-steps{
  counter-reset: step;
  margin: 16px 0 24px;
  padding-left: 0;
  list-style: none;
}
.flow-steps li{
  position: relative;
  padding-left: 2.2em;
  margin: .6em 0;
  line-height: 1.7;
}
.flow-steps li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute; left: .6em; top: .2em;
  width: 1.4em; height: 1.4em; border-radius: 999px;
  display: grid; place-items: center;
  background: #eef2ff; color: var(--color-brand);
  border: 1px solid #cfd6ec;
  font-weight: 800; font-size: .9em;
}
@media (max-width:560px){
  .flow-steps li{ padding-left: 2em; }
}

/* 定義リスト */
.definition-list{ margin:1.5em 0; }
.definition-list dt{ font-weight:bold; color:var(--color-brand); margin-bottom:.3em; }
.definition-list dd{ margin-left:1em; line-height:1.6; }

/* 子記事カード */
.sub-article{
  display:flex; align-items:center; gap:.6rem;
  margin:18px 0; padding:12px 14px;
  background:#fbfcff; border:1px dashed #cfd6ec; border-radius:var(--radius-lg);
}
.sub-article__badge{
  font-size:12px; line-height:1; font-weight:700;
  color:var(--color-brand); background:#eef2ff; border:1px solid #cfd6ec;
  padding:6px 8px; border-radius:999px; letter-spacing:.02em;
}
.sub-article__link{ font-size:15px; font-weight:600; color:#1a1a1a; }
.sub-article__link:hover{ color:var(--color-brand); text-decoration:underline; }

/* サムネイル付き */
.sub-article--thumb{
  display:flex; align-items:flex-start; gap:1rem;
}
.sub-article__thumb{
  width:320px; height:auto; object-fit:cover;
  border-radius:8px; flex-shrink:0;
}
@media (max-width: 640px){
  .sub-article--thumb{ flex-direction:column; }
  .sub-article__thumb{ width:100%; height:auto; aspect-ratio:16/9; }
}

/* =========================================================
   Comparison Table（テーブル横スクロール＋アクセシブル）
========================================================= */
.comparison-table{
  overflow-x:auto; margin:24px 0;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  -webkit-overflow-scrolling:touch;
}
.comparison-table table{
  width:100%; border-collapse:collapse; min-width:600px;
  font-size:var(--fs-15); line-height:1.6;
}
.comparison-table thead th{
  background:#f4f6fb; color:var(--color-brand);
  font-weight:700; text-align:left; padding:12px 16px;
  border-bottom:2px solid var(--color-border);
}
.comparison-table tbody th{
  background:#fafafa; font-weight:600; white-space:nowrap;
  padding:12px 16px; border-bottom:1px solid #eee;
}
.comparison-table td{
  padding:12px 16px; border-bottom:1px solid #eee; vertical-align:top;
}
.comparison-table tbody tr:hover{ background:#fdfdfd; }


/* --- Mobile: comparison-table を見やすくする最小パッチ --- */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

@media (max-width: 560px){

  /* 文字サイズを少し下げ、最小幅をやや縮めてスクロール量を軽減 */
  .comparison-table table{
    font-size: var(--fs-14);
    min-width: 520px; /* 既存:600px → 少しだけ縮める */
  }

  /* セル内を折り返し可能にして、詰まり・はみ出しを防止 */
  .comparison-table th,
  .comparison-table td{
    white-space: normal;
    word-break: break-word;
    padding: 10px 12px; /* 余白も少しだけ詰める */
  }

  /* 左列（行見出し）を横スクロール時に固定 → 行が追いやすい */
  .comparison-table tbody th{
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;              /* 重なり時に文字が読めるように */
    box-shadow: inset -1px 0 0 var(--color-border);
  }

  /* ヘッダ行を上部に固定 → 縦スクロールしても列名が見える */
  .comparison-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* 横スクロールの存在を示す簡易スクロールバー（影響はこの枠内のみ） */
.comparison-table::-webkit-scrollbar{ height:8px; }
.comparison-table::-webkit-scrollbar-thumb{ background:#c8d1eb; border-radius:8px; }
.comparison-table::-webkit-scrollbar-track{ background:#f3f5fc; border-radius:8px; }

/* =========================================================
   FAQ
========================================================= */
#faq .faq-list{
  margin: var(--space-8) 0;
}

/* 共通の箱：Q(A)どちらも同じ枠・左ライン */
#faq .faq-list dt,
#faq .faq-list dd{
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-brand-2);
  padding: 12px 14px 12px 44px;
}

#faq .faq-list dt{
  font-weight: 700;
  color: #0f172a;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: none;
}
#faq .faq-list dd{
  line-height: 1.75;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border-top: none;
  margin: 0 0 var(--space-6);
}

#faq .faq-list dt::before,
#faq .faq-list dd::before{
  content: "";
  position: absolute; left: 12px; top: 12px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px;
  color: var(--color-brand-2);
  border: 1.5px solid var(--color-brand-2);
  background: transparent;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  line-height: 1;
}

#faq .faq-list dt::before { content: "Q"; }
#faq .faq-list dd::before { content: "A"; }

/* スマホでの余白最適化 */
@media (max-width: 560px){
  #faq .faq-list dt,
  #faq .faq-list dd{ padding-left: 40px; }
}

/* 印刷時はさらにミニマル化 */
@media print{
  #faq .faq-list dt,
  #faq .faq-list dd{
    background: #fff;
    border-color: #999;
    border-left-color: #000;
    box-shadow: none;
  }
}

/* =========================================================
   Author Box（執筆・監修）
========================================================= */
.author-box{
  margin: var(--space-9) 0 var(--space-10);
  background: transparent;
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 12px 14px;
}
.author-box h2{
  font-size: var(--fs-16);
  color: #475569;
  margin: 0 0 6px;
  border: 0; background: none; padding: 0;
  font-weight: 700;
}
.author-box p{
  margin: 2px 0;
  color: #475569;
  font-size: var(--fs-14);
  line-height: 1.7;
}
.author-box .last-updated{
  font-size: var(--fs-12);
  color: var(--color-muted);
  margin-top: 6px;
}

/* 印刷は枠のみ残す */
@media print{
  .author-box{
    border-left-color: #000;
  }
}

/* =========================================================
   CTA
========================================================= */
.cta{
  max-width:1080px; margin: 60px auto 0;
  background:linear-gradient(135deg,#fff5e5,#fffaf2);
  border:2px solid #f2a12c; border-left:6px solid #f28c00;
  padding:32px 28px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  text-align:center;
}
.cta h2{ font-size:var(--fs-24); color:#d27900; margin:0 0 10px; font-weight:700; }
.cta a{
  display:inline-block; background:#f28c00; color:#fff;
  padding:10px 26px; border-radius:6px; font-weight:700; font-size:18px; letter-spacing:.05em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.15); margin-top:16px;
  text-decoration: none;
}
.cta a:hover{
  background:#c96a00; transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.2);
  text-decoration: none;
}

/* =========================================================
   Related Contents
========================================================= */
.related-content{
  max-width: 1080px;
  margin: 60px auto 0;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid #e0e4ef;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.related-content h2{
  font-size: var(--fs-22);
  color: var(--color-brand);
  font-weight: 700;
  margin-bottom: 20px;
  border-left: 5px solid var(--color-brand);
  padding-left: 12px;
}
.related-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px){
  .related-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .related-grid{ grid-template-columns: 1fr; }
}
.related-card{
  background:#f9fafc; border:1px solid #dee3ef;
  border-radius:10px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.related-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.related-card__link{
  display:flex; flex-direction:column; height:100%;
  color:inherit; text-decoration:none;
}
.related-card__img{
  width:100%; aspect-ratio:16 / 9; object-fit:cover;
  background:#eef3fc; display:block;
}
.related-card__title{
  display:block; padding:12px 14px 14px;
  font-size:15px; font-weight:600; color:#1a1a1a; line-height:1.5;
}
.related-card__link:hover .related-card__title{ color:var(--color-brand); text-decoration:underline; }

/* =========================================================
   Footer
========================================================= */
.site-footer {
  background:#f7f9ff;
  border-top:1px solid #e0e4ef;
  margin-top:60px; color:#334155;
}
.footer-inner{
  max-width:1080px; margin:0 auto;
  padding:24px 20px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px;
}
@media (max-width: 780px){
  .footer-inner{ grid-template-columns:1fr; text-align:center; row-gap:14px; }
}
.copyright{ font-size:var(--fs-12); color:#64748b; }
.sns-icons{ display:flex; justify-content:center; gap:10px; }
.sns-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--color-brand); color:#fff; font-size:16px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.sns-icons a:hover{ background:var(--color-brand-2); transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.15); }
.footer-nav{ justify-self:end; }
@media (max-width: 780px){ .footer-nav{ justify-self:center; } }
.footer-nav ul{
  display:flex; align-items:center; gap:12px;
  list-style:none; margin:0; padding:0;
}
.footer-nav a{
  color:#334155; font-size:14px; text-decoration:none;
  padding:6px 8px; border-radius:6px; transition:background .2s ease, color .2s ease;
}
.footer-nav a:hover{ background:#eaf0ff; color:var(--color-brand); }
.footer-nav img{
  background:none; border:none; padding:0; border-radius:0; box-shadow:none;
  width:58px; height:auto;
}

/* =========================================================
   トップに戻るボタン
========================================================= */
#back-to-top{
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--color-brand); color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, background .2s ease;
}
#back-to-top.show{ opacity:1; visibility:visible; }
#back-to-top:hover{ background: var(--color-brand-2); }

/* =========================================================
   Utility / 微調整
========================================================= */
.hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }

/* アニメーション軽減（ユーザー設定尊重） */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* 印刷用（ブランド色や背景を抑え、本文可読性を確保） */
@media print{
  .site-header, .page-header::after, .toc, .cta, .site-footer, #back-to-top{ display:none !important; }
  a{ color:#000; text-decoration:underline; }
  .content_wrapper{ max-width:100%; padding:0; }
  .main-section h2{ background:none; border:none; padding:0; }
  .comparison-table{ box-shadow:none; border:1px solid #999; }
}

/* ===== モバイル＋タブレット（〜820px） ===== */

/* PC時は非表示 */
.nav-toggle { display: none; }

@media (max-width: 820px){

  .site-header .header-inner{
    position: relative;
    min-height: 64px;  
    gap: 12px;
  }

  .logo img{
    width: auto !important;
    height: clamp(48px, 9vw, 72px) !important;
    max-width: 70vw;
    object-fit: contain;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.5rem .8rem;
    border: none;
    border-radius: 6px;
    background: var(--color-brand);
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1;
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
  }
  .nav-toggle:active{ transform: translateY(1px); }

  /* ドロップダウン */
  #global-nav,
  nav.global-nav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1001;
    background: #fff;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    padding: 8px 12px;
  }
  #global-nav.is-open,
  nav.global-nav.is-open{ display:block; }

  /* メニュー縦並び */
  #global-nav ul,
  nav.global-nav ul{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin: 0;
    padding: 4px 0;
    list-style:none;
  }
  #global-nav li a,
  nav.global-nav li a{
    display:block;
    width: 100%;
    text-align: left;
    padding: 10px 6px;
    line-height:1.4;
    color:#1a1a1a;
    border-radius: 6px;
  }
  #global-nav li a:hover,
  nav.global-nav li a:hover{
    text-decoration: underline;
    background: transparent;
  }

  #global-nav .contact-link,
  nav.global-nav .contact-link{
    background: transparent !important;
    color: #1a1a1a !important;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 6px;
    border-radius: 6px;
    box-shadow: none;
  }
  #global-nav .contact-link:hover,
  nav.global-nav .contact-link:hover{
    color: var(--color-brand);
    text-decoration: underline;
  }

  /* パンくずリスト */
.page-header .breadcrumb li+li::before {
  content: none !important;
}

.page-header .breadcrumb ol {
  display: block !important;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  line-height: 1.6;
}

.page-header .breadcrumb li {
  display: inline;
  white-space: normal !important;
}

.page-header .breadcrumb li+li::before {
  content: none !important;
}

.page-header .breadcrumb li:not(:last-child)::after {
  content: "›";
  color: #94a3b8;
  margin: 0 6px;
}

.page-header .breadcrumb a,
.page-header .breadcrumb span {
  white-space: normal !important;
}

  .sub-article{
    justify-content: center !important;
    text-align: center;
  }

  .sub-article__badge,
  .sub-article__link{
    display: inline-block;
    flex: 0 0 auto;
  }

  .sub-article--thumb{
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }
  .sub-article--thumb .sub-article__thumb{
    margin: 0 auto;
  }

  .sub-article--thumb .sub-article__thumb{
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    aspect-ratio: auto !important;
    object-fit: initial !important;
    margin: 0 auto;
  }
}