/**
 * mg-topskin — 「ガジェット情報局」意匠システム v7（22.26.0 / SIGNAL DESK）
 *
 * 責務範囲（運用者指示 2026-07-11）: スキンが着せ替えるのは**コンテンツ領域のみ**。
 * ヘッダー/フッター/グローバルnav = 親テーマ の領分（色はカスタマイザーで運用者が管理）
 * であり、本CSSは .l-header / .l-footer 系に一切触れない。
 * 配色は設定ベース3値（既定=ダーク固定・先進性重視）:
 *   .mg-tsk-dark  = インク基調（基底トークンそのもの）
 *   .mg-tsk-light = 紙面基調（真っ白ではなく温かみのあるペーパー・白すぎ是正）
 *   .mg-tsk-auto  = OS 設定連動（dark 基底 + OS light でペーパーへ）
 * マストヘッド（パルスバー＋アイデンティティ帯）は配色に依らず常にインク＝題字ゾーン。
 * 全効果 prefers-reduced-motion 尊重。スコープ外(スキンOFF)には一切影響しない。
 */

/* Shared foundation palette: core/assets/css/post-list-tokens.css (style dependency). */
/* The parent theme keeps the body-class marker on its page wrapper.  Paint the outer
   document too so overscroll/gutter pixels cannot expose a white seam.  The
   values intentionally mirror the established body palette exactly. */
html:has(.mg-topskin-on){background:#0d0b26}
html:has(.mg-topskin-on.mg-tsk-light){background:#f2efe8}
@media (prefers-color-scheme: light){html:has(.mg-topskin-on.mg-tsk-auto){background:#f2efe8}}
body:has(.mg-topskin-on){background:#0d0b26}
body:has(.mg-topskin-on.mg-tsk-light){background:#f2efe8}
@media (prefers-color-scheme: light){body:has(.mg-topskin-on.mg-tsk-auto){background:#f2efe8}}
.mg-topskin-on{min-height:100vh}

/* 回路レール: ページ左余白を縦走する配線+スクロールで走る信号灯（scroll-timeline対応環境のみ・
   デスクトップ余白限定・cloudsモジュールOFF/reduced-motionで消灯）— 基盤意匠を中盤後半まで貫く背骨 */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1240px) {
    body:has(.mg-topskin-on:not(.mg-tsk-off-clouds))::before{
      content:"";position:fixed;left:20px;top:11vh;height:78vh;width:6px;z-index:2;pointer-events:none;
      background:
        radial-gradient(circle 3px at 50% 0, rgba(255,214,10,.95) 40%, rgba(255,214,10,0) 72%),
        linear-gradient(rgba(160,150,255,.16), rgba(160,150,255,.16));
      background-size:6px 6px, 2px 100%;
      background-repeat:no-repeat;
      background-position:50% 0%, 50% 50%;
      animation:tskRail linear both;
      animation-timeline:scroll(root);
    }
    body:has(.mg-topskin-on.mg-tsk-light:not(.mg-tsk-off-clouds))::before{
      background:
        radial-gradient(circle 3px at 50% 0, rgba(161,98,7,.9) 40%, rgba(161,98,7,0) 72%),
        linear-gradient(rgba(50,45,28,.22), rgba(50,45,28,.22));
      background-size:6px 6px, 2px 100%;
      background-repeat:no-repeat;
      background-position:50% 0%, 50% 50%;
    }
  }
}
@keyframes tskRail{from{background-position:50% 0%, 50% 50%}to{background-position:50% 100%, 50% 50%}}
@media(prefers-reduced-motion:reduce){body:has(.mg-topskin-on)::before{content:none}}

/* ═══ 背景アニメーション（漂う色雲・ダーク基底+ライト変種） ═══ */
.mg-topskin-on::before,.mg-topskin-on::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.55}
.mg-topskin-on::before{width:56vw;height:56vw;left:-14vw;top:-18vw;background:radial-gradient(circle at 40% 40%,rgba(111,146,255,.13),transparent 65%);animation:tskDriftA 46s ease-in-out infinite alternate}
.mg-topskin-on::after{width:48vw;height:48vw;right:-12vw;bottom:-16vw;background:radial-gradient(circle at 55% 55%,rgba(255,214,10,.10),transparent 65%);animation:tskDriftB 58s ease-in-out infinite alternate}
.mg-topskin-on.mg-tsk-light::before{background:radial-gradient(circle at 40% 40%,rgba(47,95,224,.10),transparent 65%)}
.mg-topskin-on.mg-tsk-light::after{background:radial-gradient(circle at 55% 55%,rgba(161,98,7,.09),transparent 65%)}
@media (prefers-color-scheme: light){
  .mg-topskin-on.mg-tsk-auto::before{background:radial-gradient(circle at 40% 40%,rgba(47,95,224,.10),transparent 65%)}
  .mg-topskin-on.mg-tsk-auto::after{background:radial-gradient(circle at 55% 55%,rgba(161,98,7,.09),transparent 65%)}
}
@keyframes tskDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,7vh,0) scale(1.15)}}
@keyframes tskDriftB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-8vw,-6vh,0) scale(.95)}}
@media(prefers-reduced-motion:reduce){.mg-topskin-on::before,.mg-topskin-on::after{animation:none}}

/* ヘッダー/フッターは 親テーマ の領分（運用者指示 2026-07-11）— 本CSSは一切触れない */

/* ═══ ページ骨格 ═══ */
.mg-topskin-on .l-content,
.mg-topskin-on .l-mainContent,
.mg-topskin-on .l-article{margin-top:0!important;padding-top:0!important;background:transparent}
.mg-topskin-on .p-mainVisual{display:none}
.mg-topskin-on .post_content>*:first-child{margin-top:0}
.mg-topskin-on .swell-block-fullWide{background:transparent!important}
/* 章の区切り線と上の余白（25.50.0 で幾何を作り直した）.
   `.mgv2-sec{padding:52px 0}` はブロック側の `pc-py-0 / sp-py-0` に負けて **実測 0px** で、
   区切り線だけが `top:-52px` で章の外＝**前の章の中身の上**に浮いていた。
   実測: トップの 02/03 でカード（.wp-block-column / .mg-tps__item）を、
   /contact/ の 03 でアコーディオンの箱を、線が横切っていた。
   直し方は「線の位置を数えない」こと——線は章の内側の上端(top:0)に固定し、
   下の余白は同じ内側の padding が持つ。**余白と線が同じ箱から出る**ので二度とずれない。 */
.mgv2-sec:not(.mgv2-id):not(.mgv2-pulse) .swell-block-fullWide__inner{position:relative;padding-top:52px;padding-bottom:40px}
.mgv2-sec:not(.mgv2-id):not(.mgv2-pulse) .swell-block-fullWide__inner::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--tsk-line)}
.mg-topskin-on .post_content p.mgv2-eyebrow{font-size:11.5px;letter-spacing:.22em;color:var(--tsk-signal);font-weight:800;margin:0 0 4px}
.mg-topskin-on .post_content h2.mgv2-h{font-family:var(--tsk-serif);font-size:clamp(24px,2.6vw,31px);font-weight:700;letter-spacing:.01em;margin:0 0 22px;border:none;padding:0;background:transparent;color:var(--tsk-text);box-shadow:none;border-radius:0;text-wrap:balance}
.mg-topskin-on .post_content h2.mgv2-h::before,.mg-topskin-on .post_content h2.mgv2-h::after{content:none}
.mg-topskin-on .post_content h3.mgv2-h3{font-size:15.5px;margin:0 0 14px;padding:0 0 9px;background:transparent;color:var(--tsk-text-2);letter-spacing:.04em;border:none;border-bottom:1px solid var(--tsk-line);box-shadow:none}
.mg-topskin-on .post_content h3.mgv2-h3::before,.mg-topskin-on .post_content h3.mgv2-h3::after{content:none}
.mg-topskin-on .post_content p{text-wrap:pretty;color:var(--tsk-text-2)}
.mg-topskin-on .post_content .mgv2-atlas h2.mgv2-h b{color:var(--tsk-data)}

/* NEWS-ADS-01(2026-07-22): Google Auto Ads のアンカー広告（ビューポート下端固定）が
   /news/ デスク末尾のカードを覆い切らないよう退避余白を確保する。
   個別 news 記事はスキン対象外（運用者確定: MGA 化=商品ボックスのみ・外観は 親テーマ 既定）。 */
body.post-type-archive-news.mg-topskin-on .l-content{padding-bottom:120px!important}

/* ═══ ゴースト章番号（scroll-driven パララックス） ═══ */
/* 02/03/04章は装飾都合で overflow:hidden を持つ=ゴーストは章の箱から一切出ない設計にする。
   旧: top:-10px + 終端translateY(-16px)で頭が章上端に刈られていた(SP実写で02/03切れ・運用者指摘2度目)。 */
.mgv2-sec:not(.mgv2-id):not(.mgv2-pulse) .swell-block-fullWide__inner::after{
 font-family:var(--tsk-serif);font-weight:700;font-size:clamp(84px,11.5vw,150px);line-height:1;
 position:absolute;top:10px;right:12px;z-index:-1;pointer-events:none;letter-spacing:-.04em;
 color:transparent;-webkit-text-stroke:1px var(--tsk-ghost)}
.mgv2-journal .swell-block-fullWide__inner::after{content:"01"}
.mgv2-wire .swell-block-fullWide__inner::after{content:"02"}
.mgv2-atlas .swell-block-fullWide__inner::after{content:"03"}
.mgv2-cta .swell-block-fullWide__inner::after{content:"04"}
@supports (animation-timeline: view()) {
  .mgv2-sec:not(.mgv2-id):not(.mgv2-pulse) .swell-block-fullWide__inner::after{
   animation:mgv2Ghost linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  /* 終端0 = 静止位置(top:10px)で完結し箱内に収まる。上昇ドリフト(46px)は維持 */
  @keyframes mgv2Ghost{from{transform:translateY(46px)}to{transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){.mgv2-sec .swell-block-fullWide__inner::after{animation:none}}

/* ═══ マストヘッド（パルスバー＋アイデンティティ帯・両テーマ共通インク） ═══ */
.mg-topskin-on .mgv2-pulse,.mg-topskin-on .mgv2-id,
.mg-topskin-on .swell-block-fullWide.mgv2-pulse,.mg-topskin-on .swell-block-fullWide.mgv2-id{
  --tsk-text:#e7eaf6; --tsk-text-2:#9aa3bf; --tsk-line:rgba(255,255,255,.1);
  --tsk-signal:#ffd60a; --tsk-signal:oklch(88% .16 98);
  --tsk-data:#6f92ff; --tsk-data:oklch(70% .14 262);
  /* 帯は配色に依らず常にインク。**インク前提のトークンは全部ここで固定する**。
     25.51.x まで card / card-2 / nl-btn-text を固定し忘れており、light 配色では
     帯の中だけ紙色のカードと白いボタン文字が載って読めなくなっていた
     （実測: ヒーローのCTA 1.07 / 統計タイルのラベル 2.36）。
     「帯の中はインク」という約束を一部のトークンだけで守ると必ずこうなる。 */
  --tsk-card:#171243; --tsk-card-2:#120e33;
  --tsk-ghost:rgba(255,255,255,.07);
  --tsk-nl-btn-text:#04120a;
  background:#0f0b2d!important;color:var(--tsk-text)}
.mgv2-pulse{padding:0}
.mgv2-pulse .swell-block-fullWide__inner{padding:0}
.mgv2-pulse .mg-newsTicker{margin:0;padding:8px 0;border-bottom:1px solid var(--tsk-line)}
.mgv2-id{position:relative;overflow:hidden;padding:0}
.mgv2-id::before{content:"";position:absolute;inset:-30% -10%;pointer-events:none;background:
 radial-gradient(38% 55% at 22% 38%,rgba(255,214,10,.24),transparent 68%),
 radial-gradient(42% 60% at 76% 30%,rgba(79,110,235,.38),transparent 70%);
 filter:blur(16px);animation:mgv2Aurora 16s ease-in-out infinite alternate}
@keyframes mgv2Aurora{from{transform:translate3d(-2.5%,-2%,0) rotate(-1.6deg)}to{transform:translate3d(2.5%,2%,0) rotate(1.6deg) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.mgv2-id::before{animation:none}}
.mgv2-id .mg-tsk-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mgv2-id .swell-block-fullWide__inner{position:relative;z-index:1;padding-top:52px;padding-bottom:46px}
.mg-topskin-on .post_content .mgv2-id p{margin:0}
.mg-topskin-on .post_content .mgv2-id .mgv2-id__tag{color:var(--tsk-signal);font-size:12px;letter-spacing:.24em;font-weight:800}
.mg-topskin-on .post_content .mgv2-id .mgv2-id__lead{font-family:var(--tsk-serif);color:#fff;font-size:clamp(27px,3.9vw,40px);font-weight:700;line-height:1.4;margin:10px 0 8px;text-wrap:balance}
.mg-topskin-on .post_content .mgv2-id .mgv2-id__sub{color:var(--tsk-text-2);font-size:14.5px;max-width:56ch;margin-bottom:14px}
.mgv2-pulse+.mgv2-id .swell-block-fullWide__inner{padding-top:46px}
/* 言語スイッチャー: 素の白バーが題字ゾーンで浮く+ワードマークを覆うため、
   インクに溶けるコンパクトなピル列へ（左寄せ=右側をブランド銘へ明け渡す） */
.mg-topskin-on .mgv2-id .gsm-lang{display:inline-flex;width:auto;gap:4px;justify-content:flex-start;
  background:color-mix(in oklab,#fff 7%,transparent);border:1px solid var(--tsk-line);border-radius:999px;padding:4px 6px;margin-top:14px}
.mg-topskin-on .mgv2-id .gsm-lang .gsm-lang__code{color:var(--tsk-text-2);background:transparent;border-radius:999px;padding:3px 12px;text-decoration:none;font-size:12.5px;font-weight:700}
.mg-topskin-on .mgv2-id .gsm-lang .gsm-lang__code:hover{color:var(--tsk-text)}
.mg-topskin-on .mgv2-id .gsm-lang .gsm-lang__code.is-active{background:color-mix(in oklab,var(--tsk-signal) 22%,transparent);color:#fff}

/* 明地配色の本文リンク: 親テーマ 既定色は紙地(#f2efe8)で 3.15〜3.41 しかない（実測）。
   ダーク配色側は従来どおり（signal/data）なので、light/auto のときだけ濃度を上げる。 */
.mg-topskin-on.mg-tsk-light .post_content a:not([class]){color:#1a4fa0}
@media (prefers-color-scheme: light){
  .mg-topskin-on.mg-tsk-auto .post_content a:not([class]){color:#1a4fa0}
}
/* ただし**題字帯の中は配色に依らず常にインク**なので、明地用の色を持ち込まない。
   持ち込むと帯の中のティッカーのリンクが濃紺になり 2.41 まで落ちる（実測・自分で作った回帰）。
   配色別の色を足すときは、必ずこの2つの帯を除外すること。 */
.mg-topskin-on.mg-tsk-light .post_content :is(.mgv2-pulse,.mgv2-id) a:not([class]),
.mg-topskin-on.mg-tsk-auto .post_content :is(.mgv2-pulse,.mgv2-id) a:not([class]){color:var(--tsk-text-2)}

/* Shared article cards are loaded from post-list.css (style dependency). */
/* ヒーロー右列のベント・ミニタイル */
.mgv2-journal .wp-block-columns:first-of-type .wp-block-column:last-child .mg-tps--row .mg-tps__item{
 border:1px solid var(--tsk-line);border-radius:12px;background:var(--tsk-card);margin-bottom:10px;padding:10px}
.mgv2-journal .wp-block-columns:first-of-type .wp-block-column:last-child .mg-tps--row .mg-tps__item:hover{border-color:color-mix(in oklab,var(--tsk-signal) 45%,transparent);background:color-mix(in oklab,var(--tsk-signal) 6%,var(--tsk-card))}
.mgv2-journal .wp-block-columns:first-of-type .wp-block-column:last-child .mg-tps--row .mg-tps__media{flex-basis:84px}

/* ═══ ニュース・ティッカー（マストヘッド内） ═══ */
.mg-newsTicker{display:flex;align-items:center;gap:12px;padding:9px 0 12px;overflow:hidden}
.mg-newsTicker__live{flex-shrink:0;background:var(--tsk-signal);color:#04120a;font-weight:800;font-size:11px;letter-spacing:.12em;padding:2px 10px;border-radius:4px;position:relative}
.mg-newsTicker__live::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:0 0 0 0 rgba(255,214,10,.6);animation:mgv2Pulse 2.4s ease-out infinite}
@keyframes mgv2Pulse{to{box-shadow:0 0 0 10px rgba(255,214,10,0)}}
.mg-newsTicker__viewport{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mg-newsTicker__track{display:flex;gap:34px;list-style:none;margin:0;padding:0 17px 0 0;flex-shrink:0;min-width:100%;animation:mgv2Marquee 42s linear infinite}
.mg-newsTicker:hover .mg-newsTicker__track{animation-play-state:paused}
@keyframes mgv2Marquee{to{transform:translateX(-100%)}}
.mg-newsTicker__item{white-space:nowrap;font-size:13.5px}
.mg-newsTicker__item a{color:var(--tsk-text-2);text-decoration:none}
.mg-newsTicker__item a:hover{color:var(--tsk-signal)}
.mg-newsTicker__item time{color:var(--tsk-text-2);font-size:12px;font-variant-numeric:tabular-nums;margin-right:4px}
@media(prefers-reduced-motion:reduce){.mg-newsTicker__track{animation:none}.mg-newsTicker__track[aria-hidden]{display:none}.mg-newsTicker__viewport{mask-image:none;-webkit-mask-image:none}}

/* ═══ ATLAS ═══ */
.mg-topskin-on .post_content .mgv2-quick{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 8px}
.mg-topskin-on .post_content .mgv2-quick a{background:var(--tsk-card);border:1px solid color-mix(in oklab,var(--tsk-text) 22%,transparent);border-radius:999px;padding:4px 14px;color:var(--tsk-text);font-size:13px;text-decoration:none;transition:transform .2s ease,border-color .2s ease,color .2s ease}
.mg-topskin-on .post_content .mgv2-quick a:hover{border-color:var(--tsk-data);color:var(--tsk-data);transform:translateY(-2px)}
.mgv2-stats{gap:12px}
.mg-topskin-on .mgv2-stats .wp-block-column{background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:12px;padding:16px 8px;text-align:center;transition:transform .25s ease,border-color .25s ease}
.mg-topskin-on .mgv2-stats .wp-block-column:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--tsk-data) 45%,transparent)}
.mg-topskin-on .post_content .mgv2-stat__n{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;margin:0;line-height:1.2;background:linear-gradient(120deg,var(--tsk-signal),var(--tsk-data));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mg-topskin-on .post_content .mgv2-stat__l{color:var(--tsk-text-2);font-size:11.5px;letter-spacing:.08em;margin:2px 0 0}
.mg-topskin-on .mgv2-atlas .wp-block-search{max-width:520px}
.mg-topskin-on .mgv2-atlas .wp-block-search .wp-block-search__input{background:var(--tsk-card);border:1px solid var(--tsk-line);border-right:0;color:var(--tsk-text);border-radius:999px 0 0 999px;padding:11px 18px}
.mg-topskin-on .mgv2-atlas .wp-block-search .wp-block-search__input::placeholder{color:var(--tsk-text-2)}
.mg-topskin-on .mgv2-atlas .wp-block-search .wp-block-search__input:focus{outline:none;border-color:var(--tsk-data);box-shadow:0 0 0 3px color-mix(in oklab,var(--tsk-data) 25%,transparent)}
/* 検索ボタン: --tsk-data そのままに白文字だと 2.70 で AA 未達（実測・トップの既存不具合）。
   データ青のアイデンティティは保ったまま、地だけ沈めて白文字を成立させる。 */
.mg-topskin-on .mgv2-atlas .wp-block-search .wp-block-search__button{border-radius:0 999px 999px 0;background:color-mix(in oklab,var(--tsk-data) 62%,#05030f);color:#fff;border:1px solid color-mix(in oklab,var(--tsk-data) 62%,#05030f);font-weight:700}

/* ═══ フォローハブ ═══ */
.mg-tps-follow{display:grid;gap:14px}
.mg-tps-follow__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mg-tps-follow__tile{display:flex;flex-direction:column;gap:4px;text-decoration:none;border:1px solid var(--tsk-line);border-radius:14px;padding:18px 18px 16px;background:var(--tsk-card);transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s ease,background .25s ease}
.mg-tps-follow__tile:hover{transform:translateY(-4px);border-color:var(--tsk-signal);background:color-mix(in oklab,var(--tsk-signal) 6%,var(--tsk-card))}
.mg-tps-follow__mark{font-family:var(--tsk-serif);font-weight:700;font-size:26px;line-height:1;background:linear-gradient(140deg,var(--tsk-signal),var(--tsk-data));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.mg-tps-follow__label{color:var(--tsk-text);font-weight:700;font-size:14px}
.mg-tps-follow__hint{color:var(--tsk-text-2);font-size:12px;line-height:1.6}
.mg-tps-follow__letter{border:1px solid var(--tsk-line);border-radius:14px;padding:8px 20px 14px;background:var(--tsk-card)}
.mg-topskin-on .mg-newsletter-form,
.mg-topskin-on .mg-newsletter-form__inner{background:transparent!important;border-color:var(--tsk-line)!important;color:var(--tsk-text-2)}
.mg-topskin-on .mg-newsletter-form__title{color:var(--tsk-text)!important}
.mg-topskin-on .mg-newsletter-form__desc,.mg-topskin-on .mg-newsletter-form__privacy{color:var(--tsk-text-2)!important}
.mg-topskin-on .mg-newsletter-form input[type="email"]{background:var(--tsk-card-2)!important;border:1px solid var(--tsk-line)!important;color:var(--tsk-text)!important;border-radius:8px}
.mg-topskin-on .mg-newsletter-form input[type="email"]::placeholder{color:var(--tsk-text-2)}
.mg-topskin-on .mg-newsletter-form button{background:var(--tsk-signal)!important;color:var(--tsk-nl-btn-text)!important;border:0!important;font-weight:700;border-radius:8px}
@media(max-width:959px){.mg-tps-follow__tiles{grid-template-columns:1fr}}

/* ═══ 2026 baseline ═══ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mgv2VtOut .18s ease both}
::view-transition-new(root){animation:mgv2VtIn .26s ease both}
@keyframes mgv2VtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes mgv2VtIn{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
@supports (animation-timeline: view()) {
  .mgv2-sec .l-container>*{animation:mgv2FadeUp both;animation-timeline:view();animation-range:entry 0% entry 38%}
  .mgv2-pulse .l-container>*{animation:none}
  .mgv2-stats .wp-block-column{animation:mgv2Pop both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .mgv2-stats .wp-block-column:nth-child(2){animation-range:entry 5% entry 60%}
  .mgv2-stats .wp-block-column:nth-child(3){animation-range:entry 10% entry 65%}
  .mgv2-stats .wp-block-column:nth-child(4){animation-range:entry 15% entry 70%}
}
@keyframes mgv2FadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mgv2Pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mgv2-sec .l-container>*,.mgv2-stats .wp-block-column{animation:none}}
.mgv2-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.mgv2-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mgv2-reveal{opacity:1;transform:none;transition:none}}

@media(max-width:959px){
  .mgv2-sec:not(.mgv2-id):not(.mgv2-pulse) .swell-block-fullWide__inner::after{font-size:60px;right:16px;top:8px;letter-spacing:0}
  .mgv2-sec:not(.mgv2-id):not(.mgv2-pulse) .swell-block-fullWide__inner{padding-top:36px;padding-bottom:30px}
  .mg-topskin-on .post_content h2.mgv2-h{font-size:22px}
  .mgv2-id .swell-block-fullWide__inner{padding-top:38px;padding-bottom:34px}
}

/* ═══ モジュールOFFゲート（設定画面と連動・body class 方式） ═══ */
.mg-tsk-off-clouds.mg-topskin-on::before,.mg-tsk-off-clouds.mg-topskin-on::after{display:none}
.mg-tsk-off-canvas .mg-tsk-canvas{display:none}
.mg-tsk-off-ghost .mgv2-sec .swell-block-fullWide__inner::after{content:none}
.mg-tsk-off-motion .mgv2-sec .l-container>*,
.mg-tsk-off-motion .mgv2-stats .wp-block-column,
.mg-tsk-off-motion .mgv2-sec .swell-block-fullWide__inner::after{animation:none!important;opacity:1!important;transform:none!important}
.mg-tsk-off-motion .mgv2-id::before{animation:none}

/* ═══ v5: 中盤〜終盤の演出（上だけ豪華の解消） ═══ */
/* 02 速報: レーダースイープ（ニュース=走査の隠喩・超低輝度） */
.mgv2-wire .swell-block-fullWide__inner{overflow:visible}
.mgv2-wire{position:relative;overflow:hidden}
.mgv2-wire::before{content:"";position:absolute;inset:-30% -10%;pointer-events:none;
 background:conic-gradient(from 0deg at 78% 18%,transparent 0 84%,color-mix(in oklab,var(--tsk-signal) 14%,transparent) 92%,transparent 100%);
 animation:tskRadar 14s linear infinite}
@keyframes tskRadar{to{transform:rotate(1turn)}}
.mgv2-wire .swell-block-fullWide__inner{position:relative;z-index:1}
/* NEWS チップに生きている印（点滅ドット） */
.mgv2-wire .mg-tps__chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tsk-signal);margin-right:6px;vertical-align:1px;animation:tskBlink 2.2s ease-in-out infinite}
@keyframes tskBlink{0%,100%{opacity:1}50%{opacity:.25}}

/* 03 調査局: 統計カードの3Dチルト+クイックチップの遊び */
.mgv2-stats .wp-block-column{perspective:600px}
.mgv2-stats .wp-block-column:hover{transform:translateY(-3px) rotateX(4deg)}
.post_content .mgv2-quick a:active{transform:scale(.94)}

/* 04 FOLLOW: ホバーで回転グラデ枠（conic border） */
.mg-tps-follow__tile{position:relative}
.mg-tps-follow__tile::before{content:"";position:absolute;inset:-1px;border-radius:15px;padding:1px;
 background:conic-gradient(from var(--tsk-angle,0deg),var(--tsk-signal),var(--tsk-data),var(--tsk-signal));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 opacity:0;transition:opacity .3s ease}
@property --tsk-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.mg-tps-follow__tile:hover::before{opacity:1;animation:tskSpin 2.6s linear infinite}
@keyframes tskSpin{to{--tsk-angle:360deg}}


/* ═══ v5: ユーザビリティ ═══ */
.mg-newsTicker:focus-within .mg-newsTicker__track{animation-play-state:paused}
.mg-tps-follow__tile:focus-visible{outline:2px solid var(--tsk-data);outline-offset:3px;border-radius:14px}
.mg-topskin-on .mg-newsletter-form input[type="email"]{font-size:16px} /* iOSズーム防止 */

/* ═══ v5: アーカイブ/固定ページの豪華化（スコープONで発動する備え） ═══ */
/* 非タームアーカイブ(日付/著者等)の見出し: ARCHIVE アイブロウ+サンセリフ太字(archHead v2 と同一言語) */
.mg-topskin-on:is(.archive,.blog,.search,.error404) .c-pageTitle{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--tsk-text)}
.mg-topskin-on:is(.archive,.blog,.search,.error404) .c-pageTitle::before{content:"ARCHIVE";display:block;font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:.22em;color:var(--tsk-signal);font-weight:800;margin-bottom:4px}
.mg-topskin-on.author .c-pageTitle::before{content:"AUTHOR"}
.mg-topskin-on.search .c-pageTitle::before{content:"SEARCH"}
/* 親テーマ 標準リストへ tps カードDNA を移植（アーカイブは PostListSkin 非経由のため CSS で統一） */
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__item{border:1px solid var(--tsk-line);border-radius:14px;overflow:hidden;background:var(--tsk-card);transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .25s ease}
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__item:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--tsk-signal) 45%,transparent)}
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__thumb img{filter:var(--tsk-thumb-filter);transition:filter .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__item:hover .p-postList__thumb img{filter:none;transform:scale(1.04)}
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__thumb:not(:has(img)){
 display:grid;place-items:center;min-height:112px;
 background:
  linear-gradient(135deg,transparent 0 46%,color-mix(in oklab,var(--tsk-data) 15%,transparent) 46% 47%,transparent 47% 100%),
  radial-gradient(circle at 18% 26%,color-mix(in oklab,var(--tsk-signal) 16%,transparent) 0 2px,transparent 3px),
  linear-gradient(145deg,var(--tsk-card-2),color-mix(in oklab,var(--tsk-data) 9%,var(--tsk-card)));
}
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__thumb:not(:has(img))::before{
 content:"MISTER GADGET";font:800 11px/1 -apple-system,BlinkMacSystemFont,sans-serif;
 /* SWELLのc-postThumb装飾疑似要素は既定opacity:0。画像無し時だけ明示可視化する。 */
 position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;opacity:1;
 letter-spacing:.22em;color:color-mix(in oklab,var(--tsk-text) 72%,transparent);
 text-shadow:0 1px 12px color-mix(in oklab,var(--tsk-data) 28%,transparent)
}
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__title{color:var(--tsk-text)}
.mg-topskin-on:is(.archive,.blog,.search) .p-postList__body{padding:12px 14px}
/* 著者・404はSWELLの意味DOMと機能を維持し、孤立していた白い箱だけ共通paletteへ寄せる。 */
.mg-topskin-on.author .p-authorBox{background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:14px}
.mg-topskin-on.error404 .c-ttl404{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--tsk-text)}
.mg-topskin-on.error404 .c-ttl404::before{content:"RECOVERY";display:block;font-family:-apple-system,sans-serif;font-size:11px;letter-spacing:.22em;color:var(--tsk-signal);font-weight:800;margin-bottom:8px}
.mg-topskin-on .c-searchForm__s{background:var(--tsk-card)!important;color:var(--tsk-text)!important;border:1px solid var(--tsk-line)!important}
.mg-topskin-on .c-searchForm__s::placeholder{color:var(--tsk-text-2)}
.mg-topskin-on .c-searchForm__submit{background:var(--tsk-signal)!important;color:var(--tsk-nl-btn-text)!important;border:1px solid var(--tsk-signal)!important}
.mg-topskin-on.error404 .is-style-more_btn a{background:var(--tsk-card);color:var(--tsk-text);border:1px solid var(--tsk-line);border-radius:10px}
.mg-topskin-on.error404 .is-style-more_btn a:hover{border-color:var(--tsk-signal);color:var(--tsk-signal)}
/* v2方針: アーカイブは「探す道具」— カードのscroll-reveal演出は撤去(サイドバー含む全リストに
   波及して未スクロール領域が不可視になる+カタログの一覧性を損なうため)。ホバー演出のみ残す。 */

/* ═══ v5: 隠し機能の視覚（overdrive中はLIVEが虹脈動） ═══ */
.mg-tsk-overdrive .mg-newsTicker__live{animation:tskHue 1s linear infinite}
@keyframes tskHue{to{filter:hue-rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mgv2-wire::before,.mgv2-wire .mg-tps__chip::before,.mg-tps-follow__tile::before{animation:none}}

/* ═══ v6: キャッチコピー・ローテータ（行はブロック=翻訳対象・JSが巡回表示） ═══
   grid積層(全行を1/1へ重ね)=コンテナ高さが最長行に自動追従。
   旧: absolute+min-height固定は行が折り返すと下の要素へ被った(SP実バグ・P9.8根治)。 */
.mg-topskin-on .post_content .mgv2-id .mgv2-id__rotator{margin:2px 0 6px}
/* 行の直親がgridになる必要がある(wp:groupは__inner-containerを挟む) */
.mg-topskin-on .post_content .mgv2-id :is(.mgv2-id__rotator,.mgv2-id__rotator>.wp-block-group__inner-container){display:grid}
.mg-topskin-on .post_content .mgv2-id .mgv2-id__line{grid-area:1/1;margin:0;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);color:var(--tsk-signal);font-size:15.5px;font-weight:700;letter-spacing:.02em;pointer-events:none}
.mg-topskin-on .post_content .mgv2-id .mgv2-id__line.is-live{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mg-topskin-on .post_content .mgv2-id .mgv2-id__line{opacity:1;transform:none;display:none}
.mg-topskin-on .post_content .mgv2-id .mgv2-id__line:first-child{display:block}}

/* ═══ v7: セクション色面のリズム（JR Hello Osaka 参考=色面交代で中盤後半に呼吸を作る）
   02=信号緑の微気配 / 03=データ青の青写真面 / 04=信号面。全てトークン経由=両配色対応。
   .swell-block-fullWide{transparent!important} より特異度で勝たせる。 ═══ */
.mg-topskin-on .swell-block-fullWide.mgv2-wire{background:color-mix(in oklab,var(--tsk-signal) 3%,var(--tsk-bg))!important}
.mg-topskin-on .swell-block-fullWide.mgv2-atlas{background:color-mix(in oklab,var(--tsk-data) 5%,var(--tsk-bg))!important}
.mg-topskin-on .swell-block-fullWide.mgv2-cta{background:color-mix(in oklab,var(--tsk-signal) 4%,var(--tsk-bg))!important}

/* 03 調査局: 統計カードに基盤シルクスクリーン風のコーナーブラケット */
.mg-topskin-on .mgv2-stats .wp-block-column::before{content:"";position:absolute;inset:5px;pointer-events:none;border-radius:9px;opacity:.5;
 background:
  linear-gradient(var(--tsk-data) 0 0) left 0 top 0/12px 1px,
  linear-gradient(var(--tsk-data) 0 0) left 0 top 0/1px 12px,
  linear-gradient(var(--tsk-data) 0 0) right 0 top 0/12px 1px,
  linear-gradient(var(--tsk-data) 0 0) right 0 top 0/1px 12px,
  linear-gradient(var(--tsk-data) 0 0) left 0 bottom 0/12px 1px,
  linear-gradient(var(--tsk-data) 0 0) left 0 bottom 0/1px 12px,
  linear-gradient(var(--tsk-data) 0 0) right 0 bottom 0/12px 1px,
  linear-gradient(var(--tsk-data) 0 0) right 0 bottom 0/1px 12px;
 background-repeat:no-repeat}

/* 04 FOLLOW: ブランド銘のゴーストエコー（JRの「ロゴ反復アンカー」= 題字ゾーンの銘と首尾呼応） */
.mgv2-cta::before{content:"MISTERGADGET";position:absolute;right:8px;bottom:2px;z-index:0;pointer-events:none;
 font-family:var(--tsk-serif);font-weight:700;font-size:clamp(38px,7.2vw,96px);line-height:1;letter-spacing:.01em;
 color:transparent;-webkit-text-stroke:1px var(--tsk-ghost)}
.mg-tsk-off-ghost .mgv2-cta::before{content:none}

/* ═══ v6: 03 調査局=青写真グリッドが漂う / 04 FOLLOW=信号ビーム ═══ */
.mgv2-atlas{position:relative;overflow:hidden}
.mgv2-atlas::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
 background-image:linear-gradient(color-mix(in oklab,var(--tsk-data) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--tsk-data) 14%,transparent) 1px,transparent 1px);
 background-size:44px 44px;animation:tskBlueprint 36s linear infinite;
 mask-image:radial-gradient(90% 80% at 70% 20%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(90% 80% at 70% 20%,#000 0%,transparent 75%)}
@keyframes tskBlueprint{to{background-position:44px 44px}}
.mgv2-atlas .swell-block-fullWide__inner{position:relative;z-index:1}
.mgv2-cta{position:relative;overflow:hidden}
.mgv2-cta::after{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.35;
 background:repeating-linear-gradient(115deg,transparent 0 90px,color-mix(in oklab,var(--tsk-signal) 9%,transparent) 90px 92px,transparent 92px 220px);
 animation:tskBeam 22s linear infinite}
@keyframes tskBeam{to{transform:translateX(240px)}}
.mgv2-cta .swell-block-fullWide__inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.mgv2-atlas::before,.mgv2-cta::after{animation:none}}
.mg-tsk-off-clouds .mgv2-atlas::before,.mg-tsk-off-clouds .mgv2-cta::after,.mg-tsk-off-clouds .mgv2-wire::before{display:none}

/* FOLLOW: pushタイル(button) */
button.mg-tps-follow__tile{font:inherit;text-align:left;cursor:pointer;appearance:none}

/* ═══ v7: 固定ページ/汎用コンテンツの可読性（pages/archives スコープ） ═══ */
/* パンくず: コンテンツ領域内の要素なのでトークン追従（ヘッダー/フッターは不干渉のまま） */
.mg-topskin-on .p-breadcrumb{background:transparent;color:var(--tsk-text-2)}
.mg-topskin-on .p-breadcrumb a,.mg-topskin-on .p-breadcrumb__text{color:var(--tsk-text-2)}
.mg-topskin-on .p-breadcrumb a:hover{color:var(--tsk-signal)}
/* ═══ 明地の島（25.50.0 で統合）
   自前の明色背景を「実際に」塗る箱は、中の文字を墨色へ戻す。
   旧実装は color を直に指定していたため、箱の中で var(--tsk-text-2) を使う子孫
   （親テーマ 吹き出し・blogCard キャプション等）が明地に明色のまま残っていた
   （実測: .c-balloon__text 2.25 / .p-blogCard__caption 1.10 / balloon_box2 2.51）。
   **色ではなくトークンを差し替える**ことで、箱の中は子孫まで一括で墨色系になる。
   .has-background は 親テーマ の暗色パレット（deep/main/strong）だと墨色が潰れるので除外する。 ═══ */
.mg-topskin-on .post_content :is(
  p[class*="is-style-icon_"],
  p[class*="is-style-balloon_"],
  :is(p,.wp-block-group).has-background:not([class*="-deep-"]):not([class*="-main-"]):not([class*="-strong-"]),
  .pb-iconbox,.pb-comBox,.pb-pointbox,
  .c-balloon__text,
  .p-blogCard__caption,
  .swell-block-capbox .cap_box_content
){
  --tsk-text:#20222e;
  --tsk-text-2:#4a4d5c;
  --tsk-line:rgba(50,45,28,.16);
  color:var(--tsk-text);
  /* 島の中のリンク: 親テーマ 既定の #2f89e2 は白地で 3.62 しかない（AA 未達・実測）。
     島の中だけ濃度を上げる（ダーク地のリンクは従来どおり signal/data のまま）。
     ネストで書くのは、**島の一覧を2箇所に持たない**ため（片方に足し忘れる）。 */
  & a{color:#1a5fb4}
  & p{color:inherit}
}
/* useful-blocks のアイコンボックス見出しは、どの配色セットでも白文字で出る。
   淡い配色セット（既定の緑 rgb(145,193,62)）だと 2.12 で AA 未達——**本番のライト面でも
   同じ 2.12**（実測）なのでダーク化が原因ではないが、topskin の面では直しておく。
   文字色を変えると濃い配色セットで潰れるため、**配色セットに依らず地を沈める**
   （background-color はそのまま、上に半透明の黒を1枚重ねる）。 */
.mg-topskin-on .post_content .pb-iconbox__head{
  background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.42))}
/* snow-monkey-forms: ラベル/説明はページ地（ダーク）に載るためトークンへ */
.mg-topskin-on :is(.smf-item__label,.smf-item__col--label,.smf-label,.smf-checkboxes-control__label,.smf-radio-buttons-control__label){color:var(--tsk-text)}
.mg-topskin-on .smf-item__description{color:var(--tsk-text-2)}
/* 進捗表示（入力→確認→完了）は #333 直書きで、変数経由ではないためダーク地で 1.52（実測）。
   マークアップには触れず、色だけトークンへ寄せる。 */
.mg-topskin-on .smf-progress-tracker__item__text{color:var(--tsk-text-2)}
.mg-topskin-on .smf-progress-tracker__item--input .smf-progress-tracker__item__text{color:var(--tsk-text)}
.mg-topskin-on .smf-progress-tracker__item__number{
  background:color-mix(in oklab,var(--tsk-text) 26%,transparent);color:var(--tsk-text)}
.mg-topskin-on .smf-progress-tracker__item--input .smf-progress-tracker__item__number{
  background:var(--tsk-signal);color:var(--tsk-nl-btn-text)}
/* 親テーマ タブ/ページネーション: 濃紫既定がダーク地で沈むためトークン調律 */
.mg-topskin-on .l-content .c-tabList .c-tabList__button,.mg-topskin-on .c-tabList .c-tabList__button{color:var(--tsk-text-2)}
.mg-topskin-on .l-content .c-tabList .c-tabList__button[aria-selected="true"],.mg-topskin-on .c-tabList .c-tabList__button[aria-selected="true"]{color:var(--tsk-text)}
.mg-topskin-on .c-tabList .c-tabList__button::after{background:var(--tsk-signal)}
.mg-topskin-on .c-pagination .page-numbers{background:var(--tsk-card);color:var(--tsk-text);border:1px solid var(--tsk-line)}
.mg-topskin-on .c-pagination a.page-numbers:hover{border-color:var(--tsk-signal);color:var(--tsk-signal)}
.mg-topskin-on .c-pagination .page-numbers.current{background:var(--tsk-signal);color:var(--tsk-nl-btn-text);border-color:var(--tsk-signal)}

/* レール・ガジェボット（JSが生成・desktop余白限定） */
.mg-tsk-railbot{position:fixed;left:6px;top:0;width:34px;height:100vh;pointer-events:none;z-index:2}
@media(max-width:1239px){.mg-tsk-railbot{display:none}}
.mg-tsk-off-clouds .mg-tsk-railbot,.mg-tsk-off-clouds~.mg-tsk-railbot{display:none}
@media(prefers-reduced-motion:reduce){.mg-tsk-railbot{display:none}}

/* コントラスト是正(P9.22実測: 同化していた文字) */
.mg-topskin-on .c-pagination__dot{color:var(--tsk-text-2)}
.mg-topskin-on .c-categoryList__link{color:var(--tsk-text-2)}
.mg-topskin-on .c-categoryList__link.-current,.mg-topskin-on .c-categoryList__link:hover{color:var(--tsk-signal)}

/* ═══ 核アーカイブのコンパクトヘッダー v2(23.1.0): 題字pluggableを引き受ける静かなカタログ ═══ */
/* トップ(誌面/回路)とは意図的に別言語 — 装飾はヘアライン1本・実h1・実数・説明・関連チップのみ。 */
/* 親テーマ側の子ターム雲/termHead(説明+サムネ)は重複するため非表示(チップ/descが代替)。 */
.mg-topskin-on.archive .p-termNavigation,.mg-topskin-on.archive .p-termHead{display:none}
.mg-tsk-archHead{margin:6px 0 26px;padding:0 0 18px;border-bottom:1px solid var(--tsk-line)}
.mg-tsk-archHead__eyebrow{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;letter-spacing:.26em;color:var(--tsk-signal);font-weight:800;margin:0 0 6px}
.mg-tsk-archHead__title{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.3;letter-spacing:.005em;color:var(--tsk-text);margin:0;text-wrap:balance}
.mg-tsk-archHead__count{font-size:13px;font-weight:700;color:var(--tsk-text-2);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;margin-left:6px;vertical-align:2px}
.mg-tsk-archHead__pageCount{font-size:12px;font-weight:600;color:var(--tsk-text-2);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:4px;vertical-align:2px}
.mg-tsk-archHead__desc{color:var(--tsk-text-2);font-size:14px;line-height:1.9;max-width:64ch;margin:10px 0 0}
.mg-tsk-archHead__chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.mg-tsk-archHead__chips a{border:1px solid color-mix(in oklab,var(--tsk-text) 26%,transparent);border-radius:999px;padding:3px 13px;color:var(--tsk-text);font-size:12.5px;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.mg-tsk-archHead__chips a:hover{border-color:var(--tsk-signal);color:var(--tsk-signal)}
/* ARCHIVE-UX-01(25.18.0): タイプ絞り込みタブ(すべて/記事/ニュース)。archHead内が正位置。
   非topskin面では loop_start フォールバックが ul 内の li(.mg-archive-type-tabs-slot)へ出す */
.mg-archive-type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.mg-type-tab{border:1px solid color-mix(in oklab,var(--tsk-text) 26%,transparent);border-radius:999px;padding:4px 15px;color:var(--tsk-text);font-size:13px;font-weight:600;text-decoration:none;transition:border-color .2s ease,color .2s ease,background .2s ease}
.mg-type-tab:hover{border-color:var(--tsk-signal);color:var(--tsk-signal)}
.mg-type-tab.is-active{background:var(--tsk-signal);border-color:var(--tsk-signal);color:var(--tsk-bg,#fff)}
.mg-archive-type-tabs-slot{list-style:none;grid-column:1/-1;width:100%;margin:0 0 14px}
@media(max-width:959px){
 .mg-tsk-archHead{margin-bottom:20px;padding-bottom:14px}
 .mg-tsk-archHead__desc{font-size:13.5px}
}

/* ═══ 採用面(2026-07-11運用者採用: 1-A/2-A/3-A/4-B/5-A) ═══ */
/* 共通: 帯見出し(既存語彙・静かなカタログの階層) */
.mg-tsk-archBand{margin:0 0 26px}
.mg-tsk-archBand__ttl{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--tsk-text);margin:0 0 12px}
.mg-tsk-brandHighlight{margin:0 0 26px}
/* 2-A 連動: 帯が出る時は親テーマタブ列を畳む(新着パネルは既定表示のまま) */
.mg-tsk-catband .l-content .c-tabList{display:none}
/* 3-A 交差チップ: 実件数の小数字 */
.mg-tsk-archCross__n{font-size:10.5px;color:var(--tsk-text-2);font-variant-numeric:tabular-nums;margin-left:2px}
/* 1-A ニュース局: デスク2カラム(min-width:0=グリッド子の内容押し広げ防止・1行溢れの根治) */
.mg-tsk-surface{padding-top:8px}
.mg-tsk-newsDesk{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;margin:18px 0 22px}
.mg-tsk-newsDesk__main,.mg-tsk-newsDesk__side{min-width:0}
.mg-tsk-newsDesk .mg-tps--card[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.mg-tsk-newsBrands{margin-bottom:18px}
/* shortcodeの内側divを実際のflex所有者にする。外枠だけをflexにするとリンクが
   インラインのまま文字単位で折れ、`Soundcore` が縦一列になる。ブランド名は一語の
   操作対象として保ち、狭幅ではチップ単位で次行へ送る。 */
.mg-tsk-newsBrands>.mgv2-quick{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:0}
.mg-tsk-newsBrands>.mgv2-quick a{display:inline-flex;align-items:center;min-height:32px;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.mg-tsk-newsDesk .mg-tsk-archBand__ttl{margin-bottom:10px}
/* 0件面: 翻訳されていない記事を別言語で水増しせず、意図的な空状態を静かに伝える。 */
.mg-tsk-empty{max-width:900px;margin:4px auto 26px;padding:clamp(22px,4vw,38px);border:1px solid var(--tsk-line);border-radius:14px;background:color-mix(in oklab,var(--tsk-text) 3%,transparent);text-align:center}
.mg-tsk-empty__title{margin:0;color:var(--tsk-text);font-size:clamp(17px,2.2vw,21px);font-weight:800;line-height:1.55}
.mg-tsk-empty__text{margin:8px auto 0;max-width:52ch;color:var(--tsk-text-2);font-size:13.5px;line-height:1.8}
.mg-tsk-empty--error{border-color:color-mix(in oklab,#ef4444 48%,var(--tsk-line));background:color-mix(in oklab,#ef4444 7%,transparent)}
.mg-tsk-surface--empty{min-height:max(420px,calc(100vh - 355px));min-height:max(420px,calc(100svh - 355px))}
@media(max-width:959px){.mg-tsk-surface--empty{min-height:max(420px,calc(100vh - 319px));min-height:max(420px,calc(100svh - 319px))}}
/* 日付レール(ニュース局/記事一覧の年レール共用) */
.mg-tsk-dateRail{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
.mg-tsk-dateRail a{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tsk-text-2);border:1px solid color-mix(in oklab,var(--tsk-text) 24%,transparent);border-radius:8px;padding:3px 12px;text-decoration:none;transition:color .2s ease,border-color .2s ease}
.mg-tsk-dateRail a:hover{color:var(--tsk-signal);border-color:var(--tsk-signal)}
.mg-tsk-dateRail a.is-active{color:var(--tsk-signal);border-color:var(--tsk-signal)}
/* 4-B 行リスト: 密度重視(小サムネ・1行) */
.mg-tsk-rows .mg-tps--row .mg-tps__item{padding:9px 6px;gap:12px}
.mg-tsk-rows .mg-tps--row .mg-tps__media{width:88px;min-width:88px;aspect-ratio:16/10}
.mg-tsk-rows .mg-tps--row .mg-tps__title{font-size:14px;-webkit-line-clamp:2}
/* ページネーション(テンプレート面): WPコアのnav.paginationをチップ体系へ */
.mg-tsk-pagination{margin:22px 0 0}
.mg-tsk-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mg-tsk-pagination .page-numbers{display:inline-block;min-width:38px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tsk-text-2);border:1px solid color-mix(in oklab,var(--tsk-text) 24%,transparent);border-radius:8px;padding:5px 10px;text-decoration:none;background:transparent}
.mg-tsk-pagination a.page-numbers:hover{color:var(--tsk-signal);border-color:var(--tsk-signal)}
.mg-tsk-pagination .page-numbers.current{color:var(--tsk-signal);border-color:var(--tsk-signal)}
.mg-tsk-pagination .page-numbers.dots{border-color:transparent}
.mg-tsk-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:959px){
 .mg-tsk-newsDesk{grid-template-columns:1fr;gap:20px}
 .mg-tsk-rows .mg-tps--row .mg-tps__media{width:72px;min-width:72px}
}
@media(pointer:coarse){
 .mg-tsk-newsBrands>.mgv2-quick a,.mg-tsk-dateRail a{min-height:44px;display:inline-flex;align-items:center}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8: 固定ページ意匠（25.50.0 / pages スコープ・運用者指示 2026-08-06）

   方針は v1〜v7 と同じで「トップと同じ世界・同じ語彙」。新しい語彙は増やさず、
   既にある mgv2-*（章アイブロウ / 見出し / 統計タイル / チップ）と mg-tps-*（カード）を
   固定ページへ持ち込む。ここで足すのは **固定ページにしか出ない部品だけ**:
     章番号の汎用化 / 料金表 / 依頼フロー（親テーマ step の着せ替え）/ 実績チップ /
     ヒーローの CTA / 親テーマ 汎用ブロックのダーク追随 / Snow Monkey Forms。

   Snow Monkey Forms（別プラグイン）は **マークアップにも JS にも触らない**。
   同プラグインが自分で読む CSS 変数（--_color-white 等）を上書きするだけにする＝
   フォームの構造・バリデーション・確認画面の挙動はプラグインの領分のまま。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 章番号の汎用化 ───────────────────────────────────────────────
   トップは章クラス（journal/wire/atlas/cta）に番号を焼き込んでいるが、
   固定ページは面ごとに章立てが違う。番号だけを担う薄いクラスを用意する。 */
.mgv2-n1 .swell-block-fullWide__inner::after{content:"01"}
.mgv2-n2 .swell-block-fullWide__inner::after{content:"02"}
.mgv2-n3 .swell-block-fullWide__inner::after{content:"03"}
.mgv2-n4 .swell-block-fullWide__inner::after{content:"04"}
.mgv2-n5 .swell-block-fullWide__inner::after{content:"05"}
.mgv2-n6 .swell-block-fullWide__inner::after{content:"06"}

/* ── 固定ページの題字 ─────────────────────────────────────────────
   親テーマ の h1.c-pageTitle は post_content の外＝ヒーロー帯の直前に立つ。
   アーカイブ題字（archHead）と同じ語彙に揃え、ヒーローと二重の主張にしない。 */
.mg-topskin-on.page .c-pageTitle{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:800;font-size:clamp(24px,3.2vw,34px);line-height:1.3;color:var(--tsk-text);
  border-bottom:1px solid var(--tsk-line);padding-bottom:14px;margin-bottom:0;text-wrap:balance}

/* ── ヒーロー帯 ───────────────────────────────────────────────────
   トップの題字ゾーン（.mgv2-id = インク＋オーロラ）をそのまま流用する。
   固定ページで足りないのは CTA 行だけ。 */
/* CTA 行（ヒーロー内でも節末でも同じ部品なので .mgv2-id 配下に縛らない）。
   wp:group は .wp-block-group__inner-container を1枚挟む（v6 のキャッチコピー行と同じ罠）。
   実際の親にも flex を掛けないとボタンが重なり、掛けただけだと今度は
   inner が flex アイテムとして内容幅（386px）に縮む——**幅 100% まで含めて1組**（実測）。 */
.mg-topskin-on .post_content .mgv2-cta-row,
.mg-topskin-on .post_content .mgv2-cta-row>.wp-block-group__inner-container{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mg-topskin-on .post_content .mgv2-cta-row{margin:18px 0 0}
.mg-topskin-on .post_content .mgv2-cta-row>.wp-block-group__inner-container{width:100%;margin:0}
.mg-topskin-on .post_content .mgv2-cta-row .swell-block-button{margin:0}

/* 親テーマ ボタン: ダーク地でトークン追随（1本目=信号色の実線 / 2本目以降=枠線） */
.mg-topskin-on .post_content .swell-block-button__link{
  background:var(--tsk-signal);color:var(--tsk-nl-btn-text);border:1px solid var(--tsk-signal);
  border-radius:999px;font-weight:800;letter-spacing:.02em;box-shadow:none;
  /* 余白は自分で持つ（実測 padding:0 で高さ 43px しか無かった）。
     min-height 44px はタップ目標の下限。 */
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 26px;min-height:44px;font-size:15px;line-height:1.4;
  transition:transform .2s ease,filter .2s ease}
.mg-topskin-on .post_content .swell-block-button__link:hover{transform:translateY(-2px);filter:brightness(1.06)}
.mg-topskin-on .post_content .is-style-btn_normal .swell-block-button__link,
.mg-topskin-on .post_content .mgv2-btn-ghost .swell-block-button__link{
  background:transparent;color:var(--tsk-text);border-color:color-mix(in oklab,var(--tsk-text) 34%,transparent)}
.mg-topskin-on .post_content .mgv2-btn-ghost .swell-block-button__link:hover{
  border-color:var(--tsk-signal);color:var(--tsk-signal);filter:none}

/* ── カード面 ─────────────────────────────────────────────────────
   .mgv2-stats（統計タイル）と同じ作りで、数字ではなく文章を入れる面。
   wp:columns に .mgv2-cards を付けるだけ＝ブロック側は素の 親テーマ カラム。 */
.mgv2-cards{gap:14px}
.mg-topskin-on .mgv2-cards .wp-block-column{
  background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:14px;padding:20px 20px 18px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s ease}
.mg-topskin-on .mgv2-cards .wp-block-column:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--tsk-signal) 45%,transparent)}
.mg-topskin-on .post_content .mgv2-cards h3{
  font-size:16px;font-weight:800;color:var(--tsk-text);margin:0 0 8px;padding:0;background:transparent;border:none;box-shadow:none}
.mg-topskin-on .post_content .mgv2-cards h3::before,.mg-topskin-on .post_content .mgv2-cards h3::after{content:none}
.mg-topskin-on .post_content .mgv2-cards p{font-size:13.5px;line-height:1.85;margin:0 0 6px}
.mg-topskin-on .post_content .mgv2-cards p:last-child{margin-bottom:0}
.mg-topskin-on .post_content .mgv2-card__tag{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--tsk-signal);margin:0 0 6px}

/* ── 表（料金表を含む全ての wp:table）─────────────────────────────
   親テーマ は本文表を明地前提で組み、セルへ data-text-color="black"（＝#333）を焼く。
   ダーク地ではセル地が塗られないまま文字だけ墨色になり読めない（実測 1.52）。
   表そのものをカード面にし、文字はトークンへ戻す。 */
.mg-topskin-on .post_content .wp-block-table table{
  border-collapse:separate;border-spacing:0;background:var(--tsk-card-2);
  border:1px solid var(--tsk-line);border-radius:12px;overflow:hidden}
.mg-topskin-on .post_content .wp-block-table :is(td,th){border-color:var(--tsk-line)}
.mg-topskin-on .post_content .wp-block-table :is(td,th)[data-text-color="black"]{color:var(--tsk-text)}
.mg-topskin-on .post_content .wp-block-table tbody tr:nth-child(even) :is(td,th):not([class*="background-color"]){
  background:color-mix(in oklab,var(--tsk-text) 3%,transparent)}
.mg-topskin-on .post_content .wp-block-table .swl-cell-bg{background:transparent}

/* 見出し行(thead)は 親テーマ が濃紫地＋白文字で塗る。ここに --tsk-text を当てると
   light 配色で墨文字が濃紫に載って 1.07 になる（実測）。**本文行だけ**に限定する。 */
.mg-topskin-on .post_content .mgv2-price tbody :is(td,th):first-child{font-weight:700;color:var(--tsk-text)}

/* ── 依頼フロー（親テーマ loos/step の着せ替え）───────────────────────
   ブロックは 親テーマ のまま＝運用者が編集画面でステップを足し引きできる。
   見た目だけトークンへ寄せる。番号玉はトップの統計数字と同じグラデ。 */
/* 親テーマ の幾何を尊重する: __number は position:absolute; left:0; width:48px; height:48px、
   __item は padding-left:64px でその逃げを作っている（build/css/blocks.css）。
   カード化で padding を書き換えると番号玉と本文が重なるので、**左の逃げは 48px より広く**保ち、
   玉の位置だけカードの内側へずらす。連結の破線（__item::before）はカード内では不要。 */
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__item{
  background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:14px;
  padding:18px 20px 18px 80px;margin-bottom:12px}
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__item::before{content:none}
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__number{
  left:18px;top:16px;
  background:linear-gradient(140deg,var(--tsk-signal),var(--tsk-data));color:#0d0b26;font-weight:800;border:none}
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__title{
  color:var(--tsk-text);font-size:16px;font-weight:800;background:transparent;border:none;box-shadow:none;padding:0}
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__title::before,
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__title::after{content:none}
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__body{color:var(--tsk-text-2);font-size:13.5px;line-height:1.9}
.mg-topskin-on .post_content .mgv2-flow .swell-block-step__body p{margin:0}

/* ── 実績チップ（ブランド名の一覧）─────────────────────────────────
   .mgv2-quick（トップのカテゴリチップ）と同じ部品。件数だけアーカイブの
   交差チップ（.mg-tsk-archCross__n）と同じ小数字で添える。 */
.mgv2-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.mg-topskin-on .post_content .mgv2-chips a{
  display:inline-flex;align-items:baseline;gap:5px;background:var(--tsk-card);
  border:1px solid color-mix(in oklab,var(--tsk-text) 20%,transparent);border-radius:999px;
  padding:5px 14px;color:var(--tsk-text);font-size:13px;font-weight:600;text-decoration:none;
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.mg-topskin-on .post_content .mgv2-chips a:hover{border-color:var(--tsk-signal);color:var(--tsk-signal);transform:translateY(-2px)}
.mg-topskin-on .post_content .mgv2-chips a small{font-size:10.5px;color:var(--tsk-text-2);font-variant-numeric:tabular-nums}

/* ── 埋め込みフォーム（Google フォーム等の iframe）──────────────────
   固定 width/height の iframe は狭い画面で必ず横あふれする。高さは相手の中身で
   決まるので**幅だけ**器に合わせ、高さは属性値のまま（高さの取り合いをしない）。 */
.mg-topskin-on .post_content .mgv2-embed-form{
  display:block;width:100%;max-width:100%;border:1px solid var(--tsk-line);border-radius:12px;background:var(--tsk-card-2)}

/* ── 注記・補足 ───────────────────────────────────────────────── */
.mg-topskin-on .post_content .mgv2-note{
  font-size:12.5px;line-height:1.9;color:var(--tsk-text-2);
  border-left:2px solid color-mix(in oklab,var(--tsk-signal) 55%,transparent);padding:2px 0 2px 14px;margin:16px 0 0}

/* ── 法務ページ（プライバシーポリシー / 利用規約）──────────────────
   条文は「読ませる」より「引ける」もの。行長を抑え、条番号を拾いやすくする。 */
.mg-topskin-on .post_content .mgv2-legal :is(p,li){max-width:78ch;line-height:2}
.mg-topskin-on .post_content .mgv2-legal h2{scroll-margin-top:90px}
.mg-topskin-on .post_content .mgv2-legal h3{scroll-margin-top:90px}

/* 日本語の折り返しを文節で切る.
   実測: ヒーローのリード文が「…幅があるため応相／談です。」と語の途中で改行していた。
   ブラウザ既定は仮名・漢字のどこでも切れるため、日本語では読点でも語中でも等しく切る。
   `word-break:auto-phrase` は文節境界を優先する（対応しない環境は無視するだけ）。
   実測後: 「…幅がある／ため応相談です。」 */
@supports (word-break: auto-phrase){
  .mg-topskin-on :is(.mgv2-id__lead,.mgv2-id__sub,.mgv2-h,.mgv2-eyebrow),
  .mg-topskin-on .post_content :is(h2,h3,h4,p,li,figcaption,dt,dd,th,td){word-break:auto-phrase}
}

/* 証跡スクリーンショットの額装.
   実績面の掲載証跡は、他社サイトを撮った**明るい**画像。枠が無いと 1,184px 幅の
   白いベタが暗い面に開いた穴に見え、他社サイトが埋め込まれているようにも読める（実写で判明）。
   角丸＋細い罫＋わずかな余白で「撮ったもの」として置く。中身は切らない（証跡なので）。 */
.mg-topskin-on .post_content .mgv2-sec figure.wp-block-image{
  background:var(--tsk-card);
  border:1px solid var(--tsk-line);
  border-radius:14px;
  padding:10px;
  overflow:hidden}
.mg-topskin-on .post_content .mgv2-sec figure.wp-block-image img{
  border-radius:8px;display:block;width:100%;height:auto}
.mg-topskin-on .post_content .mgv2-sec figure.wp-block-image figcaption{
  color:var(--tsk-text-2);font-size:12.5px;margin:9px 2px 1px;text-align:left}

/* 条文見出し: 親テーマ 既定の青い塗り帯のままで、他 4 面と別の言語になっていた（実写で判明）。
   ただし `.mgv2-h`（章題）を当てるのは階層が違う。法務面の章題はアイブロウが担っていて、
   h2 は **条文の見出し**——他面でいう h3 の位置にある。
   そこで塗り帯をやめ、`.mgv2-h3` と同じ「細い罫＋抑えた字」の語彙に寄せる。
   条文は 19〜23 本並ぶので、1 本ずつが主張しないほうが引きやすい。 */
.mg-topskin-on .post_content .mgv2-legal h2{
  font-family:var(--tsk-serif);
  font-size:clamp(17px,1.6vw,19px);font-weight:700;letter-spacing:.01em;
  color:var(--tsk-text);
  background:transparent;border:none;border-bottom:1px solid var(--tsk-line);
  box-shadow:none;border-radius:0;
  margin:34px 0 16px;padding:0 0 10px;
  scroll-margin-top:90px}
.mg-topskin-on .post_content .mgv2-legal h2::before,
.mg-topskin-on .post_content .mgv2-legal h2::after{content:none}
/* 章の 1 本目はアイブロウの直後に来るので、上の余白を詰める */
.mg-topskin-on .post_content .mgv2-legal .mgv2-eyebrow + .wp-block-heading{margin-top:0}
.mg-topskin-on .post_content .mgv2-legal h3{
  font-size:15px;font-weight:700;color:var(--tsk-text-2);letter-spacing:.03em;
  background:transparent;border:none;box-shadow:none;border-radius:0;
  margin:22px 0 10px;padding:0}
.mg-topskin-on .post_content .mgv2-legal h3::before,
.mg-topskin-on .post_content .mgv2-legal h3::after{content:none}
/* 目次だけの節は上下の余白を詰める（中身が 1 つしかないため） */
.mgv2-legal-nav .swell-block-fullWide__inner{padding-top:28px;padding-bottom:8px}
.mg-topskin-on .post_content .mgv2-legal-nav h2{margin:0;padding:0;border:none}
.mgv2-updated{font-size:12px;letter-spacing:.06em;color:var(--tsk-text-2);font-variant-numeric:tabular-nums}

/* ── Snow Monkey Forms（別プラグイン・非干渉）──────────────────────
   同プラグインの CSS 変数を上書きするだけにする。マークアップ・スクリプト・
   バリデーション・確認画面の遷移には一切触れない。

   足場は **form.snow-monkey-form**。`.smf-form` は form の中の div にすぎず、
   送信ボタン（.smf-button-control__control）と .smf-action・進捗表示はその**外側**にある。
   最初 `.smf-form` を足場にしたため、送信ボタンだけ素の白いまま残っていた（実測）。 */
.mg-topskin-on form.snow-monkey-form,
.mg-topskin-on .smf-form{
  --_color-white:color-mix(in oklab,var(--tsk-text) 6%,var(--tsk-card-2));
  --_color-text:var(--tsk-text);
  --_color-black:var(--tsk-text);
  --_light-color-text:var(--tsk-text-2);
  --_lighter-color-text:var(--tsk-text-2);
  --_lightest-color-text:var(--tsk-text-2);
  --_light-color-gray:color-mix(in oklab,var(--tsk-text) 22%,transparent);
  --_color-gray:color-mix(in oklab,var(--tsk-text) 38%,transparent);
  --_lightest-color-gray:color-mix(in oklab,var(--tsk-text) 10%,transparent);
  --_form-control-border-color-focus:var(--tsk-data);
  --_global--border-radius:8px;
  color:var(--tsk-text)}
/* 入力欄の文字色は変数に無いので要素側で（背景は上の --_color-white が担う） */
.mg-topskin-on form.snow-monkey-form :is(input,textarea,select){color:var(--tsk-text);font-size:16px}
.mg-topskin-on form.snow-monkey-form :is(input,textarea)::placeholder{color:var(--tsk-text-2)}
/* 送信/確認/戻るボタン: 素の 親テーマ ボタンと同じ見た目に揃える。
   background は**画像も含めて**上書きする（SMF 既定は白→灰の linear-gradient）。 */
.mg-topskin-on form.snow-monkey-form :is(.smf-button-control__control,.smf-button,button[type="submit"],input[type="submit"]){
  background:var(--tsk-signal);background-image:none;color:var(--tsk-nl-btn-text);
  border:1px solid var(--tsk-signal);border-radius:999px;font-weight:800;padding:12px 30px;box-shadow:none}
.mg-topskin-on form.snow-monkey-form [data-action="back"]{
  background:transparent;border-color:color-mix(in oklab,var(--tsk-text) 34%,transparent);color:var(--tsk-text)}
.mg-topskin-on .smf-form .smf-action{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

@media(max-width:959px){
  .mg-topskin-on .mgv2-cards .wp-block-column{padding:16px}
  /* 左の逃げは詰めない。番号玉は 48px 固定なので、ここを 18px にすると題と重なる
     （一度そうして実測で捕まえた: title.x=42 が number.x=42 と同じになった）。 */
  .mg-topskin-on .post_content .mgv2-flow .swell-block-step__item{padding:14px 16px 14px 72px}
  .mg-topskin-on .post_content .mgv2-flow .swell-block-step__number{left:14px;top:13px}
  .mg-topskin-on .post_content .wp-block-table table{font-size:13px}
  .mg-topskin-on .post_content .mgv2-cta-row .swell-block-button{width:100%}
  .mg-topskin-on .post_content .mgv2-cta-row .swell-block-button__link{display:flex;justify-content:center;width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v9: 「決めさせる面」の部品（25.52.0 / 依頼ページ）

   これまでの LP 部品は「読ませる」ためのものだった。依頼ページは読者に
   **選ばせて、次の一歩を踏ませる**面なので、必要な仕掛けが違う。

   中核は絞り込み。ラジオ + `:has()` で組み、**JS を使わない**。
   理由は 3 つ:
     - JS が落ちても全項目が見えたまま（絞り込みは「強調」であって「非表示」にしない）
     - ラジオなので Tab / 矢印キーで操作でき、読み上げにも素直に乗る
     - 状態が DOM にあるので、翻訳版（12言語）でも同じ仕掛けがそのまま動く
   ═══════════════════════════════════════════════════════════════════════════ */

/* ラジオは**ラベルの直前**に置く。こうすると選択中・フォーカス中の見た目が
   `input:checked + label` / `input:focus-visible + label` で書けて、
   **id を一切知らなくてよくなる**。面を増やすたびに規則が増えない。
   （最初は入力を全部まとめて先頭に置いたため、id を 6 個ハードコードした規則を
   12 本書く羽目になり、しかもフォーカス用は属性名を間違えて空振りしていた。） */
.mgv2-decide__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.mgv2-decide__chips input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mg-topskin-on .post_content .mgv2-decide__chips label{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid color-mix(in oklab,var(--tsk-text) 22%,transparent);border-radius:999px;
  /* 非選択状態も操作候補として常に読めるよう本文色を使う。
     text-2 はダーク配色で 2.87:1 まで落ち、WCAG AA の 4.5:1 を満たさなかった。 */
  padding:7px 16px;font-size:13px;font-weight:700;color:var(--tsk-text);background:var(--tsk-card);
  transition:color .2s ease,border-color .2s ease,background .2s ease}
.mg-topskin-on .post_content .mgv2-decide__chips label:hover{color:var(--tsk-text);border-color:var(--tsk-signal)}
.mg-topskin-on .post_content .mgv2-decide__chips input:checked + label{
  background:var(--tsk-signal);border-color:var(--tsk-signal);color:var(--tsk-nl-btn-text)}
/* キーボードの現在位置が見えること（ラジオ本体は 1px・不可視なので必ずラベルへ出す） */
.mg-topskin-on .post_content .mgv2-decide__chips input:focus-visible + label{
  outline:3px solid var(--tsk-data);outline-offset:2px}

/* 対象の強調は面ごとに `:has()` で書く（下記）。
   **非該当は薄くするだけで消さない**——薄める度合いは読めるところまで。
   0.34 にしたら実効コントラストが 2.75 まで落ちて AA を割った（実測）。 */
.mgv2-decide tbody tr{transition:opacity .25s ease,background .25s ease}
.mgv2-decide:not(:has(input[value="all"]:checked)) tbody tr{opacity:.78}
.mgv2-decide:has(input[value="news"]:checked) tbody tr[data-svc="news"],
.mgv2-decide:has(input[value="review"]:checked) tbody tr[data-svc="review"],
.mgv2-decide:has(input[value="interview"]:checked) tbody tr[data-svc="interview"],
.mgv2-decide:has(input[value="supervision"]:checked) tbody tr[data-svc="supervision"],
.mgv2-decide:has(input[value="sponsored"]:checked) tbody tr[data-svc="sponsored"]{
  opacity:1;background:color-mix(in oklab,var(--tsk-signal) 14%,transparent);
  box-shadow:inset 3px 0 0 0 var(--tsk-signal)}

/* 用件別パネル（お問い合わせ）: 既定は全部見える。選ぶと該当だけに絞る。 */
.mgv2-decide__panel{display:block}
.mgv2-decide:not(:has(input[value="all"]:checked)) .mgv2-decide__panel{display:none}
.mgv2-decide:has(input[value="request"]:checked) [data-topic="request"],
.mgv2-decide:has(input[value="feedback"]:checked) [data-topic="feedback"],
.mgv2-decide:has(input[value="privacy"]:checked) [data-topic="privacy"],
.mgv2-decide:has(input[value="other"]:checked) [data-topic="other"]{display:block}

/* `:has()` が無い環境では絞り込みが効かないだけ＝全部そのまま読める（退行しない） */
@supports not selector(:has(*)){
  .mgv2-decide__chips{display:none}
  .mgv2-decide tbody tr{opacity:1}
  .mgv2-decide__panel{display:block}
}
@media(prefers-reduced-motion:reduce){.mgv2-decide tbody tr{transition:none}}

/* 定額の 1 行だけは「決められる」ように数字を立てる */
.mg-topskin-on .post_content .mgv2-price td .mgv2-fixed{
  display:inline-flex;align-items:baseline;gap:4px;font-size:19px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  background:linear-gradient(120deg,var(--tsk-signal),var(--tsk-data));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mg-topskin-on .post_content .mgv2-price td .mgv2-fixed small{
  font-size:11px;font-weight:700;-webkit-text-fill-color:var(--tsk-text-2)}

/* ═══ 依頼フロー: 読み進める＝手続きが進む ═══
   ステップの左に 1 本の線を通し、**スクロール量に応じて描かれる**。
   飾りではなく「どこまで来たか」を示すための動き。 */
.mgv2-flow{position:relative}
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .mgv2-flow::before{
      content:"";position:absolute;left:42px;top:8px;bottom:8px;width:2px;z-index:0;
      background:linear-gradient(var(--tsk-signal),var(--tsk-data));
      transform-origin:50% 0;transform:scaleY(0);
      animation:mgv2FlowDraw linear both;animation-timeline:view();animation-range:entry 15% cover 55%}
  }
}
@keyframes mgv2FlowDraw{to{transform:scaleY(1)}}
.mgv2-flow .swell-block-step__item{position:relative;z-index:1}
@media(max-width:959px){.mgv2-flow::before{left:38px}}

/* ═══ v10: 年表（活動実績・「信用を渡す面」）═══════════════════════
   実績は羅列だと「量」にしか見えない。**時間軸に置くと積み上がりが見える**。
   ただし日付を創作しないこと——本番の /records/ に実在する日付は 4 件だけだったので、
   年表に載せるのはその 4 件。日付の無い実績は前の節で「出典リンク」を主役にする
   （信用は、日付より **自分で確かめられること** で渡る）。

   親テーマ の loos/step を土台に使う（新しいブロックを作らない＝運用者が編集画面で
   足し引きできる）。番号玉の年は `data-num` 属性で出す（親テーマ 既定の counter を置換）。 */
.mgv2-timeline{position:relative}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__item{
  background:transparent;border:0;border-radius:0;padding:0 0 30px 82px;margin:0}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__item::before{content:none}
/* 年の玉: counter を消し data-num（西暦）を主役に */
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__number{
  left:0;top:0;width:64px;height:64px;border-radius:50%;flex-direction:column;
  background:var(--tsk-card);border:1px solid color-mix(in oklab,var(--tsk-signal) 55%,transparent);
  color:var(--tsk-text);font-variant-numeric:tabular-nums}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__number .__label{display:none}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__number::after{
  font-size:15px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(140deg,var(--tsk-signal),var(--tsk-data));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__title{
  color:var(--tsk-text);font-size:16px;font-weight:800;background:none;border:0;box-shadow:none;padding:0;min-height:0}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__title::before,
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__title::after{content:none}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__body{color:var(--tsk-text-2);font-size:13.5px;line-height:1.9}
/* 年表の中の写真は**証拠**であって主役ではない。素材が縦長（実測 957×782 の
   発表会スクリーンショット等）だと 768px も占有して時系列が読めなくなるので、
   幅を抑えて「並んでいること」が見える大きさに留める。 */
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__body figure{margin:10px 0 0;max-width:420px}
.mg-topskin-on .post_content .mgv2-timeline .swell-block-step__body img{
  border-radius:12px;width:100%;height:auto;max-height:260px;object-fit:cover;object-position:top}

/* 時間の線: 読み進むほど伸びる。飾りではなく「積み上がり」そのものの表現。 */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .mgv2-timeline::before{
      content:"";position:absolute;left:31px;top:64px;bottom:24px;width:2px;z-index:0;
      background:linear-gradient(var(--tsk-signal),var(--tsk-data));
      transform-origin:50% 0;transform:scaleY(0);
      animation:mgv2FlowDraw linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
  }
}
/* 動きを止めている環境では線を静的に引く（時間軸が消えると意味が変わるため） */
@media(prefers-reduced-motion:reduce){
  .mgv2-timeline::before{
    content:"";position:absolute;left:31px;top:64px;bottom:24px;width:2px;
    background:linear-gradient(var(--tsk-signal),var(--tsk-data))}
}
.mgv2-timeline .swell-block-step__item{position:relative;z-index:1}

/* 出典リンク: 「自分で確かめられる」ことを見せる部品 */
.mg-topskin-on .post_content .mgv2-source{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  color:var(--tsk-text-2);border:1px solid color-mix(in oklab,var(--tsk-text) 24%,transparent);
  border-radius:999px;padding:4px 13px;text-decoration:none;margin-top:10px;
  transition:color .2s ease,border-color .2s ease}
.mg-topskin-on .post_content .mgv2-source:hover{color:var(--tsk-signal);border-color:var(--tsk-signal)}
/* 「出典」の語を CSS の content で出していたが、**CSS が生成する文字は gsm が訳せない**。
   12 言語すべてで日本語の「出典」が残っていた（実測）。文言はマークアップ側へ出し、
   ここは見た目だけ受け持つ。 */
.mg-topskin-on .post_content .mgv2-source__k{font-size:10px;letter-spacing:.1em;opacity:.75}

@media(max-width:959px){
  .mg-topskin-on .post_content .mgv2-timeline .swell-block-step__item{padding-left:66px}
  .mg-topskin-on .post_content .mgv2-timeline .swell-block-step__number{width:52px;height:52px}
  .mgv2-timeline::before{left:25px;top:52px}
}

/* ═══ v11: 用件別の「ご相談内容」（お問い合わせ）══════════════════
   問い合わせ面で人が止まる理由は「何を相談すればいいか分からない」こと。
   用件を選ぶと、その用件に必要な案内だけが残る。

   雛形は **クリックで全選択**（user-select:all）にしてある。JS もクリップボード権限も
   要らず、選んで Ctrl/⌘+C すれば貼れる。翻訳版でもそのまま動く。 */
.mg-topskin-on .post_content .mgv2-tpl{
  position:relative;margin:14px 0 0;padding:14px 16px;border-radius:12px;
  background:var(--tsk-card-2);border:1px solid var(--tsk-line);
  font-size:13px;line-height:1.95;color:var(--tsk-text);
  white-space:pre-wrap;word-break:break-word;
  user-select:all;-webkit-user-select:all;cursor:copy;
  font-family:ui-monospace,SFMono-Regular,Menlo,"Hiragino Sans",monospace}
.mg-topskin-on .post_content .mgv2-tpl:hover{border-color:color-mix(in oklab,var(--tsk-signal) 55%,transparent)}
.mg-topskin-on .post_content .mgv2-tpl-hint{
  display:block;font-size:11.5px;color:var(--tsk-text-2);margin:6px 0 0;user-select:none}

/* 用件パネル: 見出しと本文の関係が崩れないよう、箱として立てる */
.mg-topskin-on .post_content .mgv2-decide__panel{
  border:1px solid var(--tsk-line);border-radius:14px;padding:18px 20px;margin:0 0 12px;
  background:var(--tsk-card)}
.mg-topskin-on .post_content .mgv2-decide__panel h3{
  font-size:15.5px;font-weight:800;color:var(--tsk-text);margin:0 0 8px;padding:0;
  background:none;border:0;box-shadow:none}
.mg-topskin-on .post_content .mgv2-decide__panel h3::before,
.mg-topskin-on .post_content .mgv2-decide__panel h3::after{content:none}
.mg-topskin-on .post_content .mgv2-decide__panel p{font-size:13.5px;line-height:1.9;margin:0 0 6px}
.mg-topskin-on .post_content .mgv2-decide__panel ol,
.mg-topskin-on .post_content .mgv2-decide__panel ul{margin:6px 0 0;padding-left:1.3em;font-size:13.5px;line-height:1.9}

/* ═══ v12: 評価の物差し（運営者情報）═══════════════════════════════
   このサイトが「公平にレビューする」と書けるのは、**負の評価まで公開している**から。
   ★3 以下は「代替候補の検討を推奨」から「評価対象として適しません」まで
   段階を踏んで負の評価が実在するのは珍しく、
   ここが人を信用させる最大の材料。箱の底に畳んでおく情報ではないので、
   物差しとして見えるように組む。

   星そのものは 親テーマ の [review_stars] が描く（新しく作らない）。
   ここは並べ方と、**★3.5以上が「おすすめできる」範囲**の線引きだけを受け持つ。 */
.mgv2-scale{display:grid;gap:0;margin:18px 0 0;border:1px solid var(--tsk-line);border-radius:14px;overflow:hidden}
.mg-topskin-on .post_content .mgv2-scale li{
  display:grid;grid-template-columns:minmax(96px,auto) 1fr;align-items:center;gap:14px;
  margin:0;padding:9px 16px;border:0;border-top:1px solid var(--tsk-line);
  background:var(--tsk-card);font-size:13.5px;color:var(--tsk-text)}
.mg-topskin-on .post_content .mgv2-scale li:first-child{border-top:0}
.mg-topskin-on .post_content .mgv2-scale li::before,
.mg-topskin-on .post_content .mgv2-scale li::marker{content:none;display:none}
.mg-topskin-on .post_content .mgv2-scale .c-reviewStars{white-space:nowrap;font-size:13px}
/* おすすめしない側（★3以下）を地の色で分ける。線引きが見えることが要点。 */
/* 「勧めない」側は**文字を薄めない**。ここが公開されていること自体が信用の材料なので、
   最も読ませたい行を落としては本末転倒（light で 4.46 と AA を割った・実測）。
   帯の区別は地色だけで足りる。 */
.mg-topskin-on .post_content .mgv2-scale li[data-band="no"]{
  background:color-mix(in oklab,var(--tsk-text) 5%,var(--tsk-card-2))}
.mg-topskin-on .post_content .mgv2-scale li[data-band="edge"]{
  background:var(--tsk-card-2)}
.mgv2-scale__cut{
  display:flex;align-items:center;gap:10px;padding:6px 16px;
  background:color-mix(in oklab,var(--tsk-signal) 12%,var(--tsk-card-2));
  border-top:1px solid color-mix(in oklab,var(--tsk-signal) 45%,transparent);
  font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--tsk-signal)}

/* 経歴・資格の並び（運営者カード） */
.mgv2-creds{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.mg-topskin-on .post_content .mgv2-creds li{
  display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 14px;
  background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:10px;
  font-size:13.5px;line-height:1.8;color:var(--tsk-text)}
.mg-topskin-on .post_content .mgv2-creds li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.65em;border-radius:50%;
  background:linear-gradient(140deg,var(--tsk-signal),var(--tsk-data))}
@media(max-width:959px){
  .mg-topskin-on .post_content .mgv2-scale li{grid-template-columns:1fr;gap:2px}
}

/* ═══ v13: タッチ端末での操作しやすさ（実機エミュレーションで実測）═══
   iPhone SE/15・Pixel 8・iPad 縦横で測ったところ、指で押す部品が軒並み小さかった。
   本文の途中に出るリンクは行高で決まるので対象外（WCAG も同様）。
   **独立した操作要素だけ**を、粗いポインタのときに広げる。 */
@media (pointer: coarse){
  /* 絞り込みチップ: 実測 39px（1px 足りない） */
  .mg-topskin-on .post_content .mgv2-decide__chips label{min-height:44px;padding-block:0;align-items:center}
  /* 出典バッジ: 実測 34px */
  .mg-topskin-on .post_content .mgv2-source{min-height:44px;padding-block:0;align-items:center}
  /* 実績チップ・カテゴリチップ */
  .mg-topskin-on .post_content :is(.mgv2-chips,.mgv2-quick) a{min-height:44px;padding-block:0;align-items:center}
  /* 目次のリンク: 実測 15〜17px。この目次は今回こちらで入れたものなので、こちらで直す。 */
  .mg-topskin-on .p-toc a{display:block;min-height:40px;padding-block:9px}
  .mg-topskin-on .p-toc__list li{margin-block:0}
}

/* iOS は 16px 未満の入力欄に焦点が当たると画面を勝手に拡大する。
   サイドバーのカテゴリ選択（親テーマ の postform）が 13.5〜14.8px で該当していた（実測）。
   拡大されると戻せず、その後の操作が壊れるので防ぐ。

   `.postform` を直しても**アーカイブ選択が残った**（class 無し・`id=archives-dropdown-2`）。
   1 つ直して緑になったつもりが、同じ箱の隣にもう 1 つあった形。
   以後は「クラス名」ではなく **SP メニューの widget 領域まるごと**で押さえる。
   PC 幅では 親テーマ が既に 16px を与えているので、この指定で見た目は変わらない（実測）。 */
.mg-topskin-on :is(select,input,textarea).postform,
.mg-topskin-on .p-spMenu :is(select,input,textarea),
.mg-topskin-on .l-sidebar :is(select,input[type="search"],input[type="text"]),
.mg-topskin-on .l-content :is(select,input[type="search"],input[type="text"],input[type="email"],textarea){
  font-size:16px}

/* ═══ v13b: [mg_toc] の目次（法務ページ）═══
   親テーマ の `.p-toc` だけを整えていたが、`[mg_toc]`（mg-core）が出すのは `.mg-toc` で別物。
   法務 2 ページの目次は**素のまま**だった（実測で判明）。同じ見た目に揃える。 */
.mg-topskin-on .post_content .mg-toc{
  background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:14px;
  padding:18px 20px;margin:0 0 2em}
.mg-topskin-on .post_content .mg-toc-title{
  font-size:11.5px;font-weight:800;letter-spacing:.18em;color:var(--tsk-signal);
  background:none;border:0;box-shadow:none;padding:0;margin:0 0 10px}
.mg-topskin-on .post_content .mg-toc-title::before,
.mg-topskin-on .post_content .mg-toc-title::after{content:none}
.mg-topskin-on .post_content .mg-toc-list{margin:0;padding-left:1.4em;font-size:13.5px;line-height:1.9}
.mg-topskin-on .post_content .mg-toc-list li{margin:0}
.mg-topskin-on .post_content .mg-toc-list a{color:var(--tsk-text);text-decoration:none}
.mg-topskin-on .post_content .mg-toc-list a:hover{color:var(--tsk-signal);text-decoration:underline}
@media (pointer: coarse){
  .mg-topskin-on .post_content .mg-toc-list a{display:block;min-height:40px;padding-block:9px}
}