/*
 * NativeCamp Hatena special article shared stylesheet
 * Extracted from hatena_article_template_original.html
 * Keep selectors scoped to the special article to avoid affecting normal posts.
 */

/* 特殊記事だけ、はてな外枠 #container-inner の背景を記事ルートと揃える */
#container-inner.ares-special-container,
body.ares-special-page #container-inner,
#container-inner:has(#ares-special-root){
  background:#f4f7fb !important;
  background-color:#f4f7fb !important;
}

/* ===================================================================
   NativeCamp 記事詳細テンプレート
   値の出所: design-rules_JA.md / packages/ui/tokens/*.ts の実値
   （primitives / semantic / typography / spacing / shadow / alpha /
     iconSizes / borderWidth）
   トークンの多層参照はビルド工程が無いため展開済み。
   複数箇所で使う値のみ下の変数に残す。値を変える際は必ず SoT 側を先に更新すること。
   =================================================================== */
#ares-special-root{
  --sp-sm:8px;
  --sp-md:12px;
  --sp-base:16px;
  --sp-lg:20px;
  --sp-xl:24px;
  --sp-2xl:32px;
  --sp-3xl:40px;
  --line:1px solid #cccccc;      /* border-width-thin + border-strong */
  --brand:#f1890e;               /* brand-primary = Orange/500 */
  --sub:#767676;                 /* text-secondary = Gray/600 */
  --surface-blue-soft:#f7fbff;    /* neutral/info cards */
  --surface-brand-soft:#fff8f1;   /* brand/CTA/supervisor cards */
  --surface-cool:#fafcff;         /* placeholders / low-emphasis surfaces */
  --info-bg:#f4f7fb;             /* status-info-bg = Blue/50 */
  --info-bd:#1e73dc;             /* status-info-border = Blue/500 */
  --info-fg:#144e91;             /* status-info-fg = Blue/700 */
  --warn-bg:#fcfaf3;             /* status-warning-bg = Yellow/50 */
  --warn-bd:#f6d01b;             /* status-warning-border = Yellow/500 */
  --warn-fg:#74660a;             /* status-warning-fg = Yellow/800 */
  /* Brand/brand-primary-gradient = Yellow/500 → RedOrange/500（§3.1.1）
     ⚠️ 角度・stop の SoT は packages/ui/tokens/gradients.ts。未取得のため 90deg 仮置き */
  --brand-gradient:linear-gradient(90deg,#f6d01b,#ff6b35);
  --t:150ms cubic-bezier(0.4,0,0.2,1);
}
/* ===================================================================
   Base
   body-lg(16/1.6/0em/400) を body に置き、以降は継承で効かせる。
   14px 系の要素は font-size だけを指定する（他 3 値は body-lg と同値）。
   =================================================================== */
#ares-special-root, #ares-special-root *{ box-sizing:border-box; }
#ares-special-root{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
#ares-special-root{
  margin:0;
  font-family:"Noto Sans JP","Noto Sans",sans-serif;
  font-size:16px; line-height:1.6; letter-spacing:0; font-weight:400;
  color:#191919;                 /* text-primary = Gray/900 */
  /* ページ地。surface 系は白・グレーしか無いため Status/Info の淡色を転用している。
     本文が直接載らない面なのでコントラスト上の問題は生じない。
     ⚠️ 用途としては §3.1.4 の想定外。正式には surface 系トークンの追加が要る */
  background:#f4f7fb;
  font-feature-settings:"palt" 1;
}
#ares-special-root img{ max-width:100%; height:auto; display:block; }
#ares-special-root a{ color:inherit; text-decoration:none; }
/* §6.2 focus-ring = Blue/900 α30% */
#ares-special-root :focus-visible{ outline:2px solid rgb(9 40 70 / 30%); outline-offset:2px; }
/* ===================================================================
   Layout（§4.1 Mobile ファースト / §4.2 wrapper 640→980→1280）
   =================================================================== */
#ares-special-root .article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-2xl);
  width:calc(100% - 40px);
  max-width:1440px;
  margin:var(--sp-base) auto;
  padding:var(--sp-base);
  /* 上端 6px にブランドグラデーション。地は白のまま（本文リンクの AA 確保のため） */
  background:var(--brand-gradient) top center / 100% 6px no-repeat, #fff;
  border:1px solid #e3e3e3;      /* border-default = Gray/100 */
  border-radius:12px;
  box-shadow:0 1px 4px 0 rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 10%);
}
#ares-special-root .article-main{ min-width:0; }
#ares-special-root .sidebar{ display:flex; flex-direction:column; gap:var(--sp-base); }
@media (min-width:800px){
#ares-special-root .article-layout{
  width:calc(100% - 80px);
  max-width:1440px;
  margin:var(--sp-2xl) auto;
  padding:var(--sp-xl);
}
#ares-special-root .share{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1140px){#ares-special-root .article-layout{
    grid-template-columns:minmax(0,1fr) 280px;
    max-width:1440px;
    margin:var(--sp-3xl) auto;
    padding:var(--sp-2xl);
  }
#ares-special-root .sidebar{
    position:sticky; top:var(--sp-xl); align-self:start;
    max-height:none; overflow:visible; overscroll-behavior:auto;
  }}

/* PC: サイドバー最上段のボックスだけ上に32pxの余白 */
@media (min-width:1140px){
  #ares-special-root .sidebar > .side-box:first-child{
    margin-top:32px !important;
  }
}

/* ===================================================================
   Typography（§3.2.2 の実値）
   =================================================================== */
#ares-special-root .article-main h1{ margin:var(--sp-md) 0; font-size:32px; line-height:1.3; letter-spacing:-0.005em; font-weight:700; }
#ares-special-root .article-main h2{
  margin:var(--sp-3xl) 0 var(--sp-xl);
  padding:var(--sp-sm) var(--sp-md);
  background:var(--info-bg);
  border-left:4px solid #144e91;   /* border-accent = Blue/700。3px はスケール外（§3.6） */
  border-radius:0 8px 8px 0;
  font-size:24px; line-height:1.4; font-weight:700;
}
#ares-special-root .article-main h3{ margin:var(--sp-2xl) 0 var(--sp-md); font-size:20px; line-height:1.5; font-weight:700; }
#ares-special-root .article-main h2, #ares-special-root .article-main h3{ scroll-margin-top:var(--sp-xl); }
#ares-special-root .article-main p{ margin:0 0 1.5em; }
#ares-special-root .article-main ul, #ares-special-root .article-main ol{ margin:0 0 1.6em; padding-left:1.4em; }
#ares-special-root .article-main li{ margin-bottom:var(--sp-sm); }
#ares-special-root .article-main strong{ font-weight:700; }
#ares-special-root .article-main .article-body a{
  color:#1e73dc;                 /* text-link = Blue/500 */
  text-decoration:underline; text-underline-offset:3px;
  transition:opacity var(--t);
}
#ares-special-root .article-main .article-body a:not(.button):hover{ opacity:.8; }
/* 14px（body-sm）。line-height / letter-spacing / font-weight は body から継承 */
#ares-special-root .breadcrumb, #ares-special-root .meta, #ares-special-root .tag, #ares-special-root .share a, #ares-special-root .ares-toc li, #ares-special-root .related-link, #ares-special-root .note p, #ares-special-root .tbl table, #ares-special-root .tbl caption, #ares-special-root .tbl-note, #ares-special-root .example .ja-line, #ares-special-root .detail-body p, #ares-special-root .cta p, #ares-special-root .profile_card .desc p, #ares-special-root .side-box p, #ares-special-root .side-box a:not(.button){ font-size:14px; }
/* 16px 太字（subtitle-lg） */
#ares-special-root .summary-box h3, #ares-special-root .ares-toc h3, #ares-special-root .side-box h3, #ares-special-root .profile_card .name, #ares-special-root .example .en-line, #ares-special-root .article-main summary{ font-size:16px; font-weight:700; }
/* §11.1: text-secondary は白地でのみ AA を満たす（白 4.54 / 色付き地 4.2 前後で未達）。
   色付き背景に載る要素には使わず、階層は文字サイズで表現する。 */
#ares-special-root .breadcrumb, #ares-special-root .meta, #ares-special-root .share a, #ares-special-root .ares-toc ol ol li, #ares-special-root .tbl-note{ color:var(--sub); }
/* caption-overline */
#ares-special-root .placeholder, #ares-special-root .note-label{ font-size:12px; line-height:1.2; letter-spacing:.08em; font-weight:500; }
#ares-special-root .note .spell{ font-size:19px; font-weight:700; }
/* subtitle-xl */
@media (min-width:1140px){#ares-special-root .article-main h1{ font-size:40px; line-height:1.2; letter-spacing:-0.01em; }
/* heading-h1 */
#ares-special-root .article-main h2{ margin-top:48px; }
/* space-4xl は Desktop 限定（§3.3） */}
/* ===================================================================
   Box（枠を持つ要素の共通形）
   =================================================================== */
/* 地色の割り当て（§3.1.4 / §7.1 の用途定義に従う）
   ・リンクを含むボックス（toc / related-link / side-box）は白地のまま。
     text-link は色付き地で 4.3 前後となり §11.1 の AA を満たさないため。
   ・summary-box = Info（補足説明）、note = Warning（注意喚起）
   ・example / author は淡いブルー、CTA / supervisor は淡いブランド色で役割を分ける */
#ares-special-root .summary-box, #ares-special-root .ares-toc, #ares-special-root .note, #ares-special-root .example, #ares-special-root .related-link, #ares-special-root .cta, #ares-special-root .profile_card, #ares-special-root .side-box, #ares-special-root .article-main details{
  background:#fff; border:var(--line); border-radius:12px;
}
#ares-special-root .summary-box{
  background:var(--info-bg);
  border-color:var(--info-bd);
  border-left-width:4px;
}
#ares-special-root .learn-box{
  margin:var(--sp-base) 0;
  padding:var(--sp-lg);
  background:#fffaf3;
  border:1px solid #f0cf9f;
  border-left:4px solid var(--brand);
  border-radius:12px;
}
#ares-special-root .learn-box h3{
  margin:0 0 var(--sp-md);
  color:#8a4b00;
  font-size:16px;
  font-weight:700;
}
#ares-special-root .learn-box ul{
  margin:0;
  padding-left:1.4em;
  list-style:disc outside;
}
#ares-special-root .learn-box li{ margin-bottom:var(--sp-sm); }
#ares-special-root .learn-box li:last-child{ margin-bottom:0; }
#ares-special-root .note{
  background:var(--warn-bg);
  border-color:var(--warn-bd);
  border-left-width:4px;
}
#ares-special-root .example{ background:var(--surface-blue-soft); }
#ares-special-root .cta{ background:var(--surface-brand-soft); }
#ares-special-root .profile_card{ background:#fff; }
#ares-special-root .related-link{ border-left:4px solid var(--info-bd); }
#ares-special-root .external-link{
  display:flex; align-items:flex-start; gap:var(--sp-sm);
  margin:var(--sp-md) 0; padding:var(--sp-md) var(--sp-base);
  background:var(--surface-blue-soft); border:var(--line); border-radius:8px;
  font-size:14px;
}
#ares-special-root .external-link__label{
  flex:none; display:inline-flex; align-items:center; min-height:24px;
  padding:2px 8px; border:1px solid #cccccc; border-radius:9999px;
  background:#fff; color:#555; font-size:12px; line-height:1.4; font-weight:700;
}
#ares-special-root .external-link a{ min-width:0; }
/* 色付き地の上は text-primary（16 以上）。階層は文字サイズで付ける */
#ares-special-root .note-label{ color:var(--warn-fg); }
#ares-special-root .summary-box h3{ color:var(--info-fg); }
#ares-special-root .summary-box, #ares-special-root .ares-toc, #ares-special-root .note, #ares-special-root .example, #ares-special-root .cta, #ares-special-root .profile_card, #ares-special-root .side-box{ padding:var(--sp-lg); }
#ares-special-root .summary-box, #ares-special-root .ares-toc{ margin:var(--sp-base) 0; }
#ares-special-root .note, #ares-special-root .example{ margin:var(--sp-xl) 0; }
#ares-special-root .cta{ margin:var(--sp-2xl) 0; border-radius:24px; border:2px solid var(--brand); }
/* §3.4.2 外丸 ≧ 内丸+padding */
#ares-special-root .article-main details{ margin-top:var(--sp-sm); border-radius:8px; }
#ares-special-root .related-link{ margin:var(--sp-md) 0; padding:var(--sp-md) var(--sp-base); }
#ares-special-root .summary-box h3, #ares-special-root .ares-toc h3, #ares-special-root .side-box h3{ margin:0 0 var(--sp-md); }
#ares-special-root .ares-toc h3, #ares-special-root .side-box h3{
  padding-bottom:var(--sp-sm);
  border-bottom:2px solid var(--info-bd);
  color:var(--info-fg);
}
/* 目次・サイドバーは中にリンクを含むため地は白のまま（text-link の AA 確保）。
   上端の帯だけで色を付ける */
#ares-special-root .ares-toc, #ares-special-root .side-box{
  background:var(--brand-gradient) top center / 100% 4px no-repeat, #fff;
  padding-top:var(--sp-xl);
}
#ares-special-root .summary-box > :last-child{ margin-bottom:0; }
#ares-special-root .ares-toc ol{ margin:0; padding-left:1.3em; }
#ares-special-root .ares-toc li{ margin-bottom:var(--sp-sm); }
#ares-special-root .ares-toc a:hover{ text-decoration:underline; }
#ares-special-root .ares-toc ol ol{ margin:var(--sp-sm) 0 var(--sp-md); padding-left:1.2em; }
#ares-special-root .note p{ margin:0 0 var(--sp-sm); }
#ares-special-root .note p:last-child{ margin-bottom:0; }
#ares-special-root .example-item{ padding-bottom:var(--sp-md); margin-bottom:var(--sp-md); border-bottom:1px solid #cccccc; }
#ares-special-root .example-item:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
#ares-special-root .example p{ margin:0; }
#ares-special-root .example .en-line{ color:var(--info-fg); }
#ares-special-root .example .ja-line{ margin-top:6px; }
/* ===================================================================
   Header parts
   =================================================================== */
#ares-special-root .article-main .meta{ margin:0 0 var(--sp-sm); }
#ares-special-root .breadcrumb a{ text-decoration:underline; text-underline-offset:3px; }
#ares-special-root .tag{
  display:inline-block; margin-top:var(--sp-md);
  padding:6px var(--sp-md);
  border:1px solid var(--info-bd); border-radius:9999px;
  background:var(--info-bg); color:var(--info-fg);   /* 7.73 */
}
#ares-special-root .placeholder{
  display:grid; place-items:center; margin:var(--sp-xl) 0;
  background:var(--surface-cool); border:1px dashed #cccccc; border-radius:8px;
}
/* アイキャッチ。元画像の比率をそのまま使う（トリミングしない）。
   §5.2.2 の比率リストは画像アセット側の設計指針であり、
   既存アセットに crop を強制するものではないため aspect-ratio は指定しない。
   §4.2.1 のメディア最大幅に合わせて中央寄せする。
   ⚠️ 素材を 16:9 等に揃える運用に切り替える場合は
      aspect-ratio と object-fit:cover を足す（§5.2.4） */
#ares-special-root .article-image{
  max-width:100%;
  height:auto;
  margin:var(--sp-xl) auto;
  border-radius:8px;
}
/* ダミー表示（div.placeholder 併用時）だけ高さを与える */
#ares-special-root div.article-image{ width:100%; aspect-ratio:16/9; }
#ares-special-root .placeholder.medium{ min-height:150px; }
#ares-special-root .share{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-sm); margin:var(--sp-xl) 0; }
#ares-special-root .share a{
  display:grid; place-items:center;
  min-height:44px;                 /* §11.4 ヒットエリア */
  padding:var(--sp-sm); border:var(--line); border-radius:4px;
}
/* ===================================================================
   Table
   =================================================================== */
#ares-special-root .tbl{ margin:var(--sp-lg) 0 var(--sp-2xl); overflow-x:auto; -webkit-overflow-scrolling:touch; }
#ares-special-root .tbl table{ width:100%; min-width:460px; border-collapse:collapse; background:#fff; }
#ares-special-root .tbl caption{ caption-side:top; text-align:left; padding-bottom:var(--sp-sm); }
#ares-special-root .tbl th, #ares-special-root .tbl td{ padding:var(--sp-md) var(--sp-base); border:var(--line); text-align:left; vertical-align:middle; }
#ares-special-root .tbl th{ white-space:nowrap; font-weight:700; }
#ares-special-root .tbl thead th{ background:var(--info-bd); color:#fff; }
/* status-info-bg-strong。白文字 4.62 で AA 達成 */
#ares-special-root .tbl tbody th{ background:var(--info-bg); }
/* status-info-bg。text-primary 16.36 */
#ares-special-root .tbl .en{ letter-spacing:.02em; }
#ares-special-root .tbl-note{ margin:calc(var(--sp-base) * -1) 0 var(--sp-2xl); }
/* ===================================================================
   FAQ（details）
   マーカーは Material Symbols "expand_more" 相当の SVG
   （§5.1.2 SVG のみ / アイコンフォント禁止）
   =================================================================== */
#ares-special-root .article-main summary{
  display:flex; align-items:center; min-height:44px;
  padding:var(--sp-md) var(--sp-3xl) var(--sp-md) var(--sp-base);
  cursor:pointer; list-style:none;
  background:var(--info-bg);
  border-radius:8px 8px 0 0;
}
#ares-special-root .article-main details:not([open]) summary{ border-radius:8px; }
/* §6.1: 地色は変えず Overlay を重ねる。::after はアイコンが使うため ::before */
#ares-special-root .article-main summary::before{
  content:""; position:absolute; inset:0;
  background-color:transparent; pointer-events:none;
  transition:background-color var(--t);
}
#ares-special-root .article-main summary::-webkit-details-marker{ display:none; }
#ares-special-root .article-main summary::after{
  content:""; position:absolute; right:var(--sp-base); top:50%;
  width:24px; height:24px; transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E") center / 24px no-repeat;
  transition:transform var(--t);
}
#ares-special-root .article-main details[open] summary::after{ transform:translateY(-50%) rotate(180deg); }
#ares-special-root .article-main summary:hover::before{ background-color:rgb(0 0 0 / 4%); }
#ares-special-root .detail-body{ padding:0 var(--sp-base) var(--sp-base); }
#ares-special-root .detail-body p{ margin:0 0 .9em; }
#ares-special-root .detail-body p:last-child{ margin-bottom:0; }
/* ===================================================================
   CTA / Button
   ⚠️ brand-primary + 白文字はコントラスト 2.52 で §11.1 の AA（4.5:1）未達。
      デザイン判断により白文字を優先。AA を満たすなら地を #092846 に。
   =================================================================== */
#ares-special-root .cta{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-lg); }
#ares-special-root .cta h3{ margin:0; font-size:18px; line-height:1.5; font-weight:700; }
#ares-special-root .cta p{ margin:var(--sp-sm) 0 0; }
#ares-special-root .cta .button{ flex:none; }
#ares-special-root .button{
  display:inline-grid; place-items:center; min-height:44px;
  padding:var(--sp-md) var(--sp-lg);
  border:1px solid var(--brand); border-radius:8px; background:var(--brand);
  color:#fff; text-align:center; white-space:nowrap;
  font-size:14px; line-height:1; letter-spacing:.005em; font-weight:700;
}
#ares-special-root .button.full{ width:100%; }

/* 記事本文内の3つのCTAボタンは全デバイスで左右中央に配置 */
#ares-special-root .toc-trial-cta .button,
#ares-special-root .article-main .article-body .cta > .button{
  align-self:center;
  margin-left:auto;
  margin-right:auto;
}

/* .button は .article-body 内にも置かれるため本文リンク指定に打ち勝つ詳細度で上書き */
#ares-special-root .article-main .article-body a.button, #ares-special-root .article-main .article-body a.button:hover{ color:#fff; text-decoration:none; opacity:1; }
/* §6.3.1 Disabled */
#ares-special-root .button[aria-disabled="true"], #ares-special-root .button:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
/* ===================================================================
   Overlay（§6.1 ベース色は変えず半透明を重ねる）
   =================================================================== */
#ares-special-root .article-main summary, #ares-special-root .button, #ares-special-root .related-link, #ares-special-root .share a, #ares-special-root .side-box a:not(.button){ position:relative; overflow:hidden; }
#ares-special-root .button::after, #ares-special-root .related-link::after, #ares-special-root .share a::after, #ares-special-root .side-box a:not(.button)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  transition:background-color var(--t);
}
#ares-special-root .related-link:hover::after, #ares-special-root .share a:hover::after, #ares-special-root .side-box a:not(.button):hover::after{ background-color:rgb(0 0 0 / 4%); }
/* 白文字を載せる面のため on-dark（§6.1.1） */
#ares-special-root .button:hover::after{ background-color:rgb(255 255 255 / 10%); }
#ares-special-root .button:focus::after{ background-color:rgb(255 255 255 / 24%); }
/* hover 主表現は Overlay。shadow 1 段階昇格は補助（§3.5.3 MAY） */
#ares-special-root .related-link{ box-shadow:0 1px 2px 0 rgb(0 0 0 / 10%); transition:box-shadow var(--t); }
#ares-special-root .related-link:hover{ box-shadow:0 1px 4px 0 rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 10%); }
/* ===================================================================
   著者 / サイドバー
   =================================================================== */
#ares-special-root .profile-card-container{ margin-top:var(--sp-2xl); }
#ares-special-root .profile_card{ display:flex; align-items:flex-start; gap:var(--sp-base); }
#ares-special-root .profile_card .thumbnail{ flex:none; }
#ares-special-root .profile_card .thumbnail img{
  width:88px; height:88px; border-radius:9999px;
  object-fit:cover; object-position:top;   /* §5.2.4 / 人物写真は上寄せ */
  background:var(--surface-cool);
}
#ares-special-root .profile_card .profile{ min-width:0; }
#ares-special-root .profile_card .name{ margin:0 0 var(--sp-sm); }
#ares-special-root .profile_card .desc p{ margin:0 0 .9em; }
#ares-special-root .profile_card .desc p:last-child{ margin-bottom:0; }
#ares-special-root .side-box p{ margin:0 0 var(--sp-md); }
#ares-special-root .side-box a:not(.button){
  display:flex; align-items:center; min-height:44px;
  padding:var(--sp-sm) 6px; border-top:1px solid #e3e3e3;
}
#ares-special-root .side-box > a:not(.button):first-of-type{
  border-top:0 !important;
}
#ares-special-root .side-box[data-ares-side-categories] a.is-current,
#ares-special-root .side-box[data-ares-side-categories] a[aria-current="page"]{
  box-sizing:border-box;
  padding-left:var(--sp-md);
  border-left:3px solid var(--info-bd);
  background:var(--info-bg);
  color:var(--info-fg);
  font-weight:700;
  text-decoration:none;
}
/* ===================================================================
   §10.4 prefers-reduced-motion
   =================================================================== */
@media (prefers-reduced-motion:reduce){#ares-special-root{ scroll-behavior:auto; }
#ares-special-root, #ares-special-root *, #ares-special-root *::before, #ares-special-root *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }}

/* Hatena integration: this special article only.
   Primary rules use :has() so layout does not depend on JS/body-class detection.
   body.ares-special-page rules are retained as a compatibility fallback. */
.page-entry .entry.ares-special-entry .entry-header,
.page-entry .entry:has(#ares-special-root) .entry-header,
body.ares-special-page .entry-header {
  display:none !important;
}

.page-entry .entry.ares-special-entry,
.page-entry .entry:has(#ares-special-root),
body.ares-special-page.page-entry .entry {
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.page-entry .entry.ares-special-entry .entry-content,
.page-entry .entry-content:has(#ares-special-root),
body.ares-special-page .entry-content {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Hatena標準パンくず: JSで特殊記事専用クラスを付与し、確実に上書き */
.page-entry .breadcrumb.ares-special-breadcrumb {
  box-sizing:border-box !important;
  width:calc(100% - 40px) !important;
  max-width:1440px !important;
  margin:0 auto !important;
  margin-bottom:0 !important;
}
@media (min-width:800px) {
  .page-entry .breadcrumb.ares-special-breadcrumb {
    width:calc(100% - 80px) !important;
    max-width:1440px !important;
  }
}

/* Hatena標準 entry-footer: article-layout と同じ外幅に揃える */
.page-entry .entry.ares-special-entry .entry-footer,
.page-entry .entry:has(#ares-special-root) .entry-footer,
body.ares-special-page.page-entry .entry-footer {
  display:block !important;
  box-sizing:border-box !important;
  width:calc(100% - 40px) !important;
  max-width:1440px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:80px !important;
}
@media (min-width:800px) {
  .page-entry .entry.ares-special-entry .entry-footer,
  .page-entry .entry:has(#ares-special-root) .entry-footer,
  body.ares-special-page.page-entry .entry-footer {
    width:calc(100% - 80px) !important;
    max-width:1440px !important;
    margin-bottom:96px !important;
  }
}


/* PC: Hatena標準フッターの関連記事と人気記事を2カラム表示 */
@media (min-width:1140px) {
  .page-entry .entry.ares-special-entry .entry-footer #entry-footer-primary-modules,
  .page-entry .entry:has(#ares-special-root) .entry-footer #entry-footer-primary-modules,
  body.ares-special-page.page-entry .entry-footer #entry-footer-primary-modules {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:32px !important;
    row-gap:32px !important;
    align-items:start !important;
  }

  .page-entry .entry.ares-special-entry .entry-footer #entry-footer-primary-modules > .hatena-module,
  .page-entry .entry:has(#ares-special-root) .entry-footer #entry-footer-primary-modules > .hatena-module,
  body.ares-special-page.page-entry .entry-footer #entry-footer-primary-modules > .hatena-module {
    min-width:0 !important;
  }

  .page-entry .entry.ares-special-entry .entry-footer #entry-footer-primary-modules > .hatena-module-related-entries,
  .page-entry .entry:has(#ares-special-root) .entry-footer #entry-footer-primary-modules > .hatena-module-related-entries,
  body.ares-special-page.page-entry .entry-footer #entry-footer-primary-modules > .hatena-module-related-entries {
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .page-entry .entry.ares-special-entry .entry-footer #entry-footer-primary-modules > .hatena-module-entries-access-ranking,
  .page-entry .entry:has(#ares-special-root) .entry-footer #entry-footer-primary-modules > .hatena-module-entries-access-ranking,
  body.ares-special-page.page-entry .entry-footer #entry-footer-primary-modules > .hatena-module-entries-access-ranking {
    grid-column:2 !important;
    grid-row:1 !important;
  }
}


/* PC: 留学バナーは表示したまま上下30pxの余白だけ無効化 */
@media (min-width:1140px) {
  body.ares-special-page #content-inner .hatena-module-custom-bottom-banner,
  #content-inner:has(#ares-special-root) .hatena-module-custom-bottom-banner {
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}

#ares-special-root .share button {
  display:grid; place-items:center; min-height:44px; padding:var(--sp-sm);
  border:var(--line); border-radius:4px; background:#fff; color:var(--sub);
  font:inherit; font-size:14px; cursor:pointer;
}
#ares-special-root .share button:hover { opacity:.8; }


/* ===================================================================
   Hatena CSS collision guard
   - この特殊記事 (#ares-special-root) のみに限定
   - はてなテーマ側の .page-entry .entry ... を最終上書き
   - レイアウト/コンポーネントの意図を壊さない範囲だけ !important
   =================================================================== */
.page-entry .entry .entry-content #ares-special-root {
  font-family:"Noto Sans JP","Noto Sans",sans-serif !important;
  font-size:16px !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
  font-weight:400 !important;
  color:#191919 !important;
}

/* 記事タイトル */
.page-entry .entry .entry-content #ares-special-root .article-main > h1 {
  margin:var(--sp-md) 0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#191919 !important;
  font-size:32px !important;
  line-height:1.3 !important;
  letter-spacing:-0.005em !important;
  font-weight:700 !important;
}

/* 本文H2/H3。ボックス内見出しには適用しない */
.page-entry .entry .entry-content #ares-special-root .article-body > h2 {
  display:block !important;
  margin:var(--sp-3xl) 0 var(--sp-xl) !important;
  padding:var(--sp-sm) var(--sp-md) !important;
  border:0 !important;
  border-left:4px solid #144e91 !important;
  border-radius:0 8px 8px 0 !important;
  background:var(--info-bg) !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#191919 !important;
  font-size:24px !important;
  line-height:1.4 !important;
  letter-spacing:0 !important;
  font-weight:700 !important;
}
.page-entry .entry .entry-content #ares-special-root .article-body > h2::before,
.page-entry .entry .entry-content #ares-special-root .article-body > h2::after {
  content:none !important;
  display:none !important;
}
.page-entry .entry .entry-content #ares-special-root .article-body > h3 {
  display:block !important;
  margin:var(--sp-2xl) 0 var(--sp-md) !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#191919 !important;
  font-size:20px !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
  font-weight:700 !important;
}
.page-entry .entry .entry-content #ares-special-root .article-body > h3::before,
.page-entry .entry .entry-content #ares-special-root .article-body > h3::after {
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}

/* 本文段落・リスト */
.page-entry .entry .entry-content #ares-special-root .article-body > p {
  margin:0 0 1.5em !important;
  padding:0 !important;
  color:#191919 !important;
  font-size:16px !important;
  line-height:1.6 !important;
}
.page-entry .entry .entry-content #ares-special-root .article-body > ul {
  margin:0 0 1.6em !important;
  padding-left:1.4em !important;
  list-style:disc outside !important;
}
.page-entry .entry .entry-content #ares-special-root .article-body > ol {
  margin:0 0 1.6em !important;
  padding-left:1.4em !important;
  list-style:decimal outside !important;
}
.page-entry .entry .entry-content #ares-special-root .article-body > ul > li,
.page-entry .entry .entry-content #ares-special-root .article-body > ol > li {
  margin:0 0 var(--sp-sm) !important;
  padding:0 !important;
}
.page-entry .entry .entry-content #ares-special-root .summary-box ul {
  margin:0 !important;
  padding-left:1.4em !important;
  list-style:disc outside !important;
}
.page-entry .entry .entry-content #ares-special-root .summary-box li {
  margin-bottom:var(--sp-sm) !important;
}
.page-entry .entry .entry-content #ares-special-root .learn-box {
  box-sizing:border-box !important;
  margin:var(--sp-base) 0 !important;
  padding:var(--sp-lg) !important;
  background:#fffaf3 !important;
  border:1px solid #f0cf9f !important;
  border-left:4px solid var(--brand) !important;
  border-radius:12px !important;
}
.page-entry .entry .entry-content #ares-special-root .learn-box h3 {
  margin:0 0 var(--sp-md) !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:#8a4b00 !important;
  font-size:16px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}
.page-entry .entry .entry-content #ares-special-root .learn-box ul {
  margin:0 !important;
  padding-left:1.4em !important;
  list-style:disc outside !important;
}
.page-entry .entry .entry-content #ares-special-root .learn-box li {
  margin:0 0 var(--sp-sm) !important;
  padding:0 !important;
}
.page-entry .entry .entry-content #ares-special-root .learn-box li:last-child {
  margin-bottom:0 !important;
}

/* 目次 */
.page-entry .entry .entry-content #ares-special-root .ares-toc ol {
  margin:0 !important;
  padding-left:1.3em !important;
  list-style:decimal outside !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc ol ol {
  margin:var(--sp-sm) 0 var(--sp-md) !important;
  padding-left:1.2em !important;
  list-style:decimal outside !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc li {
  margin-bottom:var(--sp-sm) !important;
  padding:0 !important;
}

/* 表。はてな標準の table/th/td 装飾を完全に上書き */
.page-entry .entry .entry-content #ares-special-root .tbl {
  display:block !important;
  margin:var(--sp-lg) 0 var(--sp-2xl) !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
.page-entry .entry .entry-content #ares-special-root .tbl table {
  display:table !important;
  width:100% !important;
  min-width:460px !important;
  margin:0 !important;
  border:0 !important;
  border-collapse:collapse !important;
  border-spacing:0 !important;
  table-layout:auto !important;
  background:#fff !important;
  box-shadow:none !important;
  font-size:14px !important;
  line-height:1.6 !important;
}
.page-entry .entry .entry-content #ares-special-root .tbl caption {
  margin:0 !important;
  padding:0 0 var(--sp-sm) !important;
  caption-side:top !important;
  text-align:left !important;
  color:#191919 !important;
  background:transparent !important;
  font-size:14px !important;
}
.page-entry .entry .entry-content #ares-special-root .tbl th,
.page-entry .entry .entry-content #ares-special-root .tbl td {
  display:table-cell !important;
  padding:var(--sp-md) var(--sp-base) !important;
  border:1px solid #cccccc !important;
  text-align:left !important;
  vertical-align:middle !important;
  color:#191919 !important;
  font-size:14px !important;
  line-height:1.6 !important;
  box-shadow:none !important;
}
.page-entry .entry .entry-content #ares-special-root .tbl thead th {
  background:#1e73dc !important;
  color:#fff !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
.page-entry .entry .entry-content #ares-special-root .tbl tbody th {
  background:#f4f7fb !important;
  color:#191919 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
.page-entry .entry .entry-content #ares-special-root .tbl tbody td,
.page-entry .entry .entry-content #ares-special-root .tbl tbody tr:nth-child(odd) td,
.page-entry .entry .entry-content #ares-special-root .tbl tbody tr:nth-child(even) td {
  background:#fff !important;
}

/* 画像・リンクのテーマ側装飾を抑止 */
.page-entry .entry .entry-content #ares-special-root .article-image {
  max-width:100% !important;
  height:auto !important;
  margin:var(--sp-xl) auto !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
.page-entry .entry .entry-content #ares-special-root .article-body a:not(.button) {
  color:#1e73dc !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}

/* コンポーネント内の余白もテーマ側から保護 */
.page-entry .entry .entry-content #ares-special-root .summary-box,
.page-entry .entry .entry-content #ares-special-root .learn-box,
.page-entry .entry .entry-content #ares-special-root .ares-toc,
.page-entry .entry .entry-content #ares-special-root .note,
.page-entry .entry .entry-content #ares-special-root .example,
.page-entry .entry .entry-content #ares-special-root .cta,
.page-entry .entry .entry-content #ares-special-root .profile_card,
.page-entry .entry .entry-content #ares-special-root .side-box {
  box-sizing:border-box !important;
}
.page-entry .entry .entry-content #ares-special-root .example p {
  margin:0 !important;
}
.page-entry .entry .entry-content #ares-special-root .note p:last-child,
.page-entry .entry .entry-content #ares-special-root .profile_card .desc p:last-child {
  margin-bottom:0 !important;
}

@media (min-width:1140px) {
  .page-entry .entry .entry-content #ares-special-root .article-main > h1 {
    font-size:40px !important;
    line-height:1.2 !important;
    letter-spacing:-0.01em !important;
  }
  .page-entry .entry .entry-content #ares-special-root .article-body > h2 {
    margin-top:48px !important;
  }
}


/* Special article: remove Hatena content padding */
body.ares-special-page #container #content,
#container #content:has(#ares-special-root) {
  padding: 0 !important;
}

/* 最終上書き: はてな標準 h3::after の斜線背景を特殊記事内だけ無効化 */
.page-entry .entry .entry-content #ares-special-root h3::after,
#ares-special-root .article-body h3::after{
  background:none !important;
  background-image:none !important;
}

/* ===================================================================
   ARES custom TOC - special articles only
   This TOC uses only ARES-specific classes; Hatena's default TOC class
   is not reused, so Hatena's default TOC CSS cannot apply.
   =================================================================== */
.page-entry .entry .entry-content #ares-special-root .ares-toc,
#ares-special-root .ares-toc {
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:var(--sp-base) 0 !important;
  padding:var(--sp-xl) var(--sp-lg) var(--sp-lg) !important;
  border:var(--line) !important;
  border-radius:12px !important;
  background:var(--brand-gradient) top center / 100% 4px no-repeat, #fff !important;
  color:#191919 !important;
  font-size:14px !important;
  line-height:1.6 !important;
  text-align:left !important;
  float:none !important;
  clear:both !important;
  position:relative !important;
  columns:auto !important;
  column-count:1 !important;
  column-width:auto !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc::before,
.page-entry .entry .entry-content #ares-special-root .ares-toc::after,
#ares-special-root .ares-toc::before,
#ares-special-root .ares-toc::after {
  content:none !important;
  display:none !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__title,
#ares-special-root .ares-toc__title {
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  margin:0 0 var(--sp-md) !important;
  padding:0 0 var(--sp-sm) !important;
  border:0 !important;
  border-bottom:2px solid var(--info-bd) !important;
  background:none !important;
  color:var(--info-fg) !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.6 !important;
  text-align:left !important;
  float:none !important;
  clear:both !important;
  position:static !important;
  transform:none !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__list,
#ares-special-root .ares-toc__list {
  display:block !important;
  box-sizing:border-box !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 0 0 1.6em !important;
  list-style:decimal outside !important;
  list-style-position:outside !important;
  text-align:left !important;
  float:none !important;
  clear:both !important;
  position:static !important;
  transform:none !important;
  columns:auto !important;
  column-count:1 !important;
  column-width:auto !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__item,
#ares-special-root .ares-toc__item {
  display:list-item !important;
  box-sizing:border-box !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 0 var(--sp-sm) !important;
  padding:0 !important;
  list-style:decimal outside !important;
  list-style-position:outside !important;
  text-align:left !important;
  float:none !important;
  clear:both !important;
  position:relative !important;
  transform:none !important;
  columns:auto !important;
  column-count:1 !important;
  break-inside:avoid !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__item::before,
.page-entry .entry .entry-content #ares-special-root .ares-toc__item::after,
#ares-special-root .ares-toc__item::before,
#ares-special-root .ares-toc__item::after {
  content:none !important;
  display:none !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__children,
#ares-special-root .ares-toc__children {
  display:block !important;
  box-sizing:border-box !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:var(--sp-sm) 0 var(--sp-md) 1.2em !important;
  padding:0 0 0 1.2em !important;
  list-style:decimal outside !important;
  list-style-position:outside !important;
  text-align:left !important;
  float:none !important;
  clear:both !important;
  position:static !important;
  transform:none !important;
  columns:auto !important;
  column-count:1 !important;
  column-width:auto !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__children > .ares-toc__item,
#ares-special-root .ares-toc__children > .ares-toc__item {
  color:var(--sub) !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__link,
#ares-special-root .ares-toc__link {
  display:inline !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  color:#1e73dc !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
  text-align:left !important;
  float:none !important;
  position:static !important;
  transform:none !important;
}
.page-entry .entry .entry-content #ares-special-root .ares-toc__link:hover,
#ares-special-root .ares-toc__link:hover {
  opacity:.8 !important;
}
/* Mobile: special article entry-content reset */
@media (max-width:799px){
  .page-entry #container .entry.ares-special-entry .entry-content,
  .page-entry #container .entry:has(#ares-special-root) .entry-content{
    font-size:15px !important;
    padding:0 !important;
  }
}

/* 著者 / 監修者プロフィール */
#ares-special-root .profile-card-container{
  display:grid;
  gap:var(--sp-base);
}
#ares-special-root .profile_card.author-card{
  background:var(--surface-blue-soft);
  border-left:4px solid var(--info-bd);
}
#ares-special-root .profile_card.supervisor-card{
  background:var(--surface-brand-soft);
  border-left:4px solid var(--brand);
}
#ares-special-root .profile_card .profile-role{
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  color:var(--sub);
  margin-right:.25em;
}
#ares-special-root .profile_card .profile-affiliation{
  font-size:14px;
  font-weight:500;
  color:var(--sub);
}

#ares-special-root .profile_card .profile-source-link{
  margin:var(--sp-sm) 0 0;
  font-size:14px;
  line-height:1.6;
}
#ares-special-root .profile_card .profile-source-link a{
  color:#1e73dc;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity var(--t);
}
#ares-special-root .profile_card .profile-source-link a:hover{ opacity:.8; }
@media (max-width:799px){
  #ares-special-root .profile_card .profile-affiliation{
    display:block;
    margin-top:2px;
  }
}

/* SP: 著者・監修者カードは縦並びにして本文幅を確保 */
@media (max-width:599px){
  #ares-special-root .profile_card{
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-md);
    padding:var(--sp-base);
  }
  #ares-special-root .profile_card .thumbnail{
    align-self:center;
    margin:0;
  }
  #ares-special-root .profile_card .profile{
    width:100%;
    min-width:0;
  }
  #ares-special-root .profile_card .name{
    margin:0 0 var(--sp-md);
    text-align:center;
  }
  #ares-special-root .profile_card .profile-affiliation{
    display:block;
    margin-top:4px;
  }
  #ares-special-root .profile_card .desc,
  #ares-special-root .profile_card .profile-source-link{
    text-align:left;
  }
}

/* 関連記事：内容に応じて伸縮し、最大350px。見出しは固定してリンク一覧だけスクロール */
#ares-special-root .side-box[data-ares-side-related]{
  box-sizing:border-box;
  height:auto;
  max-height:350px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#ares-special-root .side-box[data-ares-side-related] > h3{
  flex:0 0 auto;
}
#ares-special-root .side-box[data-ares-side-related] .side-box-scroll{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#ares-special-root .side-box[data-ares-side-related] .side-box-scroll > a:not(.button):first-of-type{
  border-top:0 !important;
}
/* 目次直下：7日間無料トライアル導線 */
#ares-special-root .toc-trial-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-md);
  margin:var(--sp-base) 0 var(--sp-2xl);
  padding:var(--sp-base) var(--sp-lg);
  background:var(--surface-brand-soft);
  border:1px solid #f0cf9f;
  border-left:4px solid var(--brand);
  border-radius:12px;
}
#ares-special-root .toc-trial-cta p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  font-weight:600;
}
#ares-special-root .toc-trial-cta .button{
  flex:none;
}

/* 目次直上：前提Hub記事への内部リンク */
#ares-special-root .hub-link{
  margin:var(--sp-xl) 0 var(--sp-base);
  padding:var(--sp-md) var(--sp-base);
  background:var(--surface-blue-soft);
  border:1px solid #d7e8f7;
  border-left:4px solid var(--info-bd);
  border-radius:12px;
}
#ares-special-root .hub-link__label{
  margin:0 0 4px;
  color:var(--info-fg);
  font-size:13px;
  line-height:1.5;
  font-weight:700;
}
#ares-special-root .hub-link a{
  color:#1e73dc;
  font-size:14px;
  line-height:1.6;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
#ares-special-root .hub-link a:hover{ opacity:.8; }