@charset "UTF-8";
/* =========================================================
   content.css — 旧サイトの本文クラスを新デザインに橋渡しする

   app/content/*.html には WordPress / SWELL のクラスが残っている。
   本文 HTML は export が作る生成物なので書き換えず、見た目はここで決める
   （プレイブック 3-5）。

   1. WordPress 標準ブロック
   2. SWELL のインライン装飾（マーカー・文字サイズ）
   3. SWELL のリストスタイル
   4. 商品ボックス（旧ポチップ相当）
   5. 埋め込み・ブログパーツ・フォーム
   6. 広告枠
   （7 以降は移行のあとに足したもの。末尾の 16 まで）
   ========================================================= */

/* =========================================================
   1. WordPress 標準ブロック
   ========================================================= */
.entry-content .wp-block-image {
  margin-top: 1.6em;
}

/* **16:9 以外の画像が突き出して高くならないよう、高さを 16:9 のときに揃える。**
   幅いっぱいに引き伸ばしていたので、正方形の写真は 16:9 の 2 倍の高さになっていた
   （本文 804px のとき 804×902 と 804×453。2026-09-22 に実測。移行元の WordPress 由来の
   正方形・縦長の画像がある。枚数は AGENTS.md に、数えかたとともに書いた）。
   画像ブロックの幅の 9/16 を高さの上限にし、
   はみ出すぶんは object-fit で中へ収める（縦横比は変えない）。
   **`container-type` を `.entry-content` に付けないこと。** その中にある
   クロスヘア生成ツールの追従プレビュー（`position: fixed`）の基準が変わって壊れる。
   16:9 より横長の画像は元から低いので、`max-height` では変わらない。 */
.entry-content .wp-block-image {
  container-type: inline-size;
}

.entry-content .wp-block-image img {
  width: 100%;
  height: auto;
  max-height: 56.25cqw;
  object-fit: contain;
}

.entry-content .wp-block-image.aligncenter {
  text-align: center;
}

.entry-content .wp-block-image.aligncenter img {
  margin-inline: auto;
}

.entry-content .wp-block-image.alignleft  { text-align: left; }
.entry-content .wp-block-image.alignright { text-align: right; }

.entry-content .is-resized img {
  width: auto;
  max-width: 100%;
}

.entry-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 0;
}

.entry-content .wp-block-gallery figure {
  margin: 0;
}

.entry-content .wp-block-gallery li::before {
  content: none;
}

.entry-content .wp-block-group > * + * {
  margin-top: 1.6em;
}

.entry-content .has-fixed-layout {
  table-layout: fixed;
}

/* 色指定は白黒基調に寄せる。文字色だけは可読性のため無効化しない */
.entry-content .has-inline-color {
  color: inherit;
  font-weight: 700;
}

.entry-content .swl-deep-01,
.entry-content .swl-deep-02,
.entry-content .swl-deep-03,
.entry-content .swl-deep-04 {
  color: inherit;
}

/* =========================================================
   2. SWELL のインライン装飾
   ---------------------------------------------------------
   旧サイトはマーカーを4色（緑・青・黄・橙）で使い分けていたが、
   新サイトはマーカーを使わず太字だけで強調する。
   本文 HTML には mark_green などのクラスが残っているので、
   ここで打ち消す。
   ========================================================= */
.entry-content .swl-marker,
.entry-content .swl-marker.mark_green,
.entry-content .swl-marker.mark_blue,
.entry-content .swl-marker.mark_yellow,
.entry-content .swl-marker.mark_orange {
  background: none;
  font-weight: 700;
}

.entry-content .swl-fz { font-size: 1em; }
/* 小さくする指定は、キャプション（14px）の中で使われても 14px を割らないようにする（style.css の「文字の大きさの段」） */
.entry-content .swl-fz.u-fz-xs  { font-size: max(.8em, 14px); }
.entry-content .swl-fz.u-fz-s   { font-size: max(.9em, 14px); }
.entry-content .swl-fz.u-fz-l   { font-size: 1.15em; }
.entry-content .swl-fz.u-fz-xl  { font-size: 1.3em; }

.entry-content .swl-cell-bg { background: var(--c-bg-sub); }
.entry-content .swl-cell-text-centered { text-align: center; }

/* =========================================================
   3. SWELL のリストスタイル
   ========================================================= */
.entry-content ul.is-style-check_list > li::before,
.entry-content ul.is-style-good_list > li::before,
.entry-content ul.is-style-big_icon_check > li::before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: -1.35em;
  font-size: .95em;
  line-height: inherit;
  font-weight: 700;
}

.entry-content ul.is-style-triangle_list > li::before {
  content: "▶";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: -1.3em;
  font-size: .7em;
  line-height: 2.6;
}

.entry-content ul.is-style-icon_good > li::before,
.entry-content ul.is-style-icon_bad > li::before,
.entry-content ul.is-style-big_icon_point > li::before,
.entry-content ul.is-style-big_icon_caution > li::before {
  background: none;
  width: auto;
  height: auto;
  top: 0;
  left: -1.5em;
  font-size: .9em;
  line-height: inherit;
  font-weight: 700;
}

.entry-content ul.is-style-icon_good > li::before        { content: "◎"; }
.entry-content ul.is-style-icon_bad > li::before         { content: "×"; }
.entry-content ul.is-style-big_icon_point > li::before   { content: "!"; }
.entry-content ul.is-style-big_icon_caution > li::before { content: "!"; }

.entry-content ul.is-style-check_list,
.entry-content ul.is-style-good_list,
.entry-content ul.is-style-icon_good,
.entry-content ul.is-style-icon_bad,
.entry-content ul.is-style-big_icon_check,
.entry-content ul.is-style-big_icon_point,
.entry-content ul.is-style-big_icon_caution,
.entry-content ul.is-style-triangle_list {
  padding-left: 1.7em;
}

.entry-content ul.-list-under-dashed > li {
  border-bottom: 1px dashed var(--c-line);
  padding-bottom: .5em;
}

.entry-content .is-style-border {
  border: 1px solid var(--c-line);
  padding: 1em 1.2em;
}

/* =========================================================
   4. 商品ボックス（旧ポチップ相当）
   ---------------------------------------------------------
   旧サイトは display_price=off で価格を出していないので、
   ここでも価格は扱わない。
   ========================================================= */
.p-box {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas:
    "image body"
    "btns  btns";
  gap: 20px 24px;
  padding: 24px;
  border: 1px solid var(--c-line-str);
  margin: 2em 0;
}

.p-box__image {
  grid-area: image;
  display: grid;
  place-items: center;
}

.p-box__image img {
  width: auto;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .p-box__image img { mix-blend-mode: normal; }
.p-box__body { grid-area: body; }

.p-box__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.p-box__title a {
  text-decoration: none !important;
  color: var(--c-text);
}

.p-box__info {
  font-size: 14px;
  color: var(--c-text-sub);
  margin: 0 0 8px;
}

.p-box__review a {
  font-size: 14px;
  color: var(--c-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.p-box__btns {
  grid-area: btns;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.p-box__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid var(--c-line-str);
  color: var(--c-text) !important;
  background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease);
}

.p-box__btn:hover {
  opacity: 1;
  background: var(--c-bg-inv);
  color: var(--c-text-inv) !important;
}

/* 1つ目（Amazon）だけ塗って主導線にする */
.p-box__btn.-amazon {
  background: var(--c-bg-inv);
  color: var(--c-text-inv) !important;
}

.p-box__btn.-amazon:hover {
  background: transparent;
  color: var(--c-text) !important;
}

.p-inline-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid var(--c-line-str);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
}

.p-inline-btn::after { content: " →"; }

.p-image img { margin-inline: auto; }

@media (max-width: 600px) {
  .p-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image" "body" "btns";
    padding: 20px;
    gap: 16px;
  }
  .p-box__image img { max-height: 140px; }
  .p-box__btns { grid-template-columns: minmax(0, 1fr); }
}

/* 画像が取れないときの商品ボックス（2026-09-26、manage の横断変更）。
   共通部品（app/product-hub/ProductHub.php）は、画像が取れない（Amazon の画像が期限切れ・ASIN の無い商品）と
   画像の枠を空のまま出す。それまでは枠がただの空白で残り、題名が右に浮いて見た目が安っぽかった。
   空の枠に淡い地と箱の線画を置き、列の位置は画像のある箱と揃える。線画は色の変数に従う（mask）ので暗い表示でも見える。
   なべちゃんが3案から選んだ形（決まりは manage/docs/product-hub.md の「画像が取れないときの見た目」）。:has() が無い古いブラウザでも地と線画は出る */
.p-box__image:empty {
  align-self: stretch;
  min-height: 112px;
  background: var(--c-bg-sub);
  border: 1px solid var(--c-line);
}
.p-box__image:empty::before {
  content: "";
  width: 44px;
  height: 44px;
  background: var(--c-text-sub);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 20.5 7.4v9.2L12 21.2 3.5 16.6V7.4z'/%3E%3Cpath d='M3.5 7.4 12 12l8.5-4.6M12 12v9.2M7.75 5.1l8.5 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 20.5 7.4v9.2L12 21.2 3.5 16.6V7.4z'/%3E%3Cpath d='M3.5 7.4 12 12l8.5-4.6M12 12v9.2M7.75 5.1l8.5 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-box:has(> .p-box__image:empty) .p-box__body { align-self: center; }
/* 画像の無い箱は、ボタンを5つまで1行に並べる（4つと1つに割れて1つだけ取り残されていた） */
.p-box:has(> .p-box__image:empty) .p-box__btns { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
@media (max-width: 600px) {
  /* 1列の携帯では枠を出さない（空の段と上の余白を詰める） */
  .p-box:has(> .p-box__image:empty) { grid-template-areas: "body" "btns"; }
  .p-box__image:empty { display: none; }
  .p-box:has(> .p-box__image:empty) .p-box__btns { grid-template-columns: minmax(0, 1fr); }
}

/* 疑似ポチップのセール情報（2026-09-28、manage の横断変更）。
   共通部品（app/product-hub/ProductHub.php）は、設定の sale_info が true のとき、セール中の店のボタンだけを
   <div class="p-box__btnwrap -rakuten -on-sale"><p class="p-box__sale">＼文言／</p><a class="p-box__btn -rakuten">…</a></div>
   で包む（日程は manage の商品管理「セール情報」で入れる。セール中でないボタンの HTML は変わらない）。旧ポチップの「＼文言／」の再現で、
   なべちゃんが3案から「ボタンの外の真上」、色は赤・青・紺から青を選んだ（白地で 6.70。暗い表示の #60a5fa は #0d0d0d で 7.64）。
   包みの無いボタンは段の下端に揃える（文言のぶんだけ上へ伸びないように）。点滅はさせない（WCAG 2.2.2）。
   決まりは manage/docs/product-hub.md の「セール情報」 */
.p-box__btns:has(> .p-box__btnwrap) { align-items: end; }
.p-box__btnwrap { display: flex; flex-direction: column; min-width: 0; }
.p-box .p-box__sale {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  color: #1d4ed8;
}
:root[data-theme="dark"] .p-box .p-box__sale { color: #60a5fa; }

/* =========================================================
   5. 埋め込み・ブログパーツ・フォーム
   ========================================================= */
.n-embed {
  margin: 2em 0;
}

.n-embed--youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.n-embed--youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.entry-thumb.n-embed--youtube {
  margin-bottom: 40px;
  /* 下地。画像のアイキャッチは img 側に敷いてある（style.css）が、
     動画には img が無いのでここで敷く。読み込みの前に白く抜けない */
  background: var(--c-bg-sub);
}

.n-embed--link a {
  display: block;
  padding: 16px;
  border: 1px solid var(--c-line);
  font-size: 15px;
  word-break: break-all;
}

.blog-part {
  margin: 2em 0;
  padding: 24px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-sub);
}

.blog-part > *:first-child { margin-top: 0; }

.n-blogcard--external .n-blogcard__label::after {
  content: " ↗";
}

/* --- お問い合わせフォーム --- */
.c-form__row {
  display: block;
  margin-bottom: 20px;
}

.c-form__row label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.c-form__row label span {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
}

/* **空のまま送信すると、ブラウザが最初の欄へスクロールする。** その位置は
   html の scroll-padding-top（= --header-h + 16px = 72px）で決まるが、**欄の上に
   ラベルがある**ので、ラベルのほうが追従ヘッダー（下端 57px）に隠れる
   （2026-09-23 に本番で実測。ラベル top=40px。audit の L-5）。
   欄をさらに下げて、ラベルごと見えるようにする。 */
.c-form__row input,
.c-form__row textarea,
.c-form__row select {
  scroll-margin-top: 40px;
}

.c-form__row input,
.c-form__row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  font-size: 16px;
}

.c-form__row input:focus,
.c-form__row textarea:focus {
  outline: none;
  border-color: var(--c-line-str);
}

/* 枠線の色だけでは、どこにいるか分かりにくい（監査 M07）。
   キーボードで辿ったときは輪郭も出す。 */
.c-form__row input:focus-visible,
.c-form__row textarea:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* 送信した内容の控え（完了画面。ブラウザの中だけで完結する）*/
.c-form__record {
  margin: 24px 0;
  border: 1px solid var(--c-line);
  padding: 16px 18px;
}

.c-form__record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.c-form__record-copy {
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: inherit;
  padding: 4px 12px;
  font-size: 14px;
  cursor: pointer;
}

.c-form__record-copy:hover {
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
}

.c-form__record-body {
  margin: 0;
  padding: 12px 14px;
  background: var(--c-bg-sub, transparent);
  border: 1px solid var(--c-line);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
}

.c-form__record-note {
  margin: 12px 0 0;
  font-size: 14px;
  opacity: .7;
}

/* 入力させない隠し欄（スパム対策） */
.c-form__hp {
  position: absolute !important;
  left: -9999px;
}

/* =========================================================
   6. 広告枠
   ---------------------------------------------------------
   本番以外では実物を読み込まず、同じ位置に同じ高さの枠だけ描く
   （プレイブック 7-22）。
   ========================================================= */
.ad {
  margin: 2em 0;
  text-align: center;
  /* 広告が来る前に高さを取っておく。値は ads.php が枠ごとに渡す
     （監査 M02。本番で実測した in-article が 280px）。 */
  min-height: var(--ad-h, 0);
}

/* 予約を解いた枠。印を付けるのは main.js の initAdFallback で、場合は 2 つ。
   - **AdSense が「広告なし」と返した枠**（<ins> の data-ad-status="unfilled"）。2026-09-24 まではこの CSS の
     `.ad:has(ins[data-ad-status="unfilled"])` で画面のどこにあっても潰していた
   - **AdSense のスクリプトそのものが読み込めなかったとき**（広告ブロッカーなど。2026-09-23。それまで
     FPSマウスの記事 1 ページで 4,078px の空白が残っていた）
   **どちらも、印を付けるのは画面より下にある枠だけ**（2026-09-24）。画面の中や上の枠を潰すと、読んでいる本文が
   上へずれる（遮断した本番で 0.18〜0.37 を実測。理由と出典は main.js の initAdFallback の前置き）。
   **CSS だけで潰す規則（:has など）に戻さない。** CSS には画面のどこにあるかが分からない */
.ad.is-ad-unavailable {
  min-height: 0;
  margin: 0;
}

/* スマートフォン幅では広告の形が変わり、縦に伸びる。枠ごとの値は
   config の ads.slots の h_sp（2026-09-11 に本番で実測）。
   h_sp を持たない枠は、これまでどおり --ad-h のまま。
   上の .ad.is-ad-unavailable は詳細度が高いので、ここでも潰れる。 */
@media (max-width: 600px) {
  .ad { min-height: var(--ad-h-sp, var(--ad-h, 0)); }
}

.ad--sidebar { margin: 0; }

.ad--placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--c-line);
  background: var(--c-bg-sub);
  color: var(--c-text-sub);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.8;
}

/* =========================================================
   ドロワーの子メニュー
   ========================================================= */
/* 左の縦線は引かない（2026-09-18、なべちゃん。開いたときの線が気になるとのことで抜いた）。
   階層は字下げだけで示す */
.drawer__sublist {
  padding-left: 14px;
  margin: 0 0 8px;
}

.drawer__sublist a {
  padding: 10px 0;
  font-size: 15px;
  color: var(--c-text-sub);
  border-bottom: none;
}

.drawer__sublist a::after { content: none; }

/* --- プロフィールの SNS リンク --- */
.profile-widget__sns,
.author-box__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.profile-widget__sns { justify-content: center; }

/* 運営者の SNS は各社のロゴの印（helpers.php の sns_profile_link()）。
   記事末尾の共有ボタンと同じ 40px の四角。2026-09-18、なべちゃんの指示で統一 */
.sns-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line);
  color: var(--c-text);
  text-decoration: none !important;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.sns-btn__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.sns-btn__icon--youtube { fill: #f00; }
@media (hover: hover) {
  .sns-btn:hover {
    opacity: 1;
    background: var(--c-bg-inv);
    border-color: var(--c-bg-inv);
    color: var(--c-text-inv) !important;
  }
  .sns-btn:hover .sns-btn__icon { fill: var(--c-text-inv); }
}

/* =========================================================
   7. 本文の中に入るパーツの打ち消し
   ---------------------------------------------------------
   目次は「リード文のあと」に置くため .entry-content の中にある。
   そのままだと本文用のリスト装飾（数字・黒い四角）とリンクの下線を
   二重に受けてしまうので、ここで打ち消す。
   ========================================================= */
.entry-content .toc ol,
.entry-content .toc ul {
  list-style: none;
  padding-left: 0;
}

.entry-content .toc ul {
  margin: 8px 0 0 26px;
}

.entry-content .toc li::before {
  content: none;
}

.entry-content .toc li + li {
  margin-top: 0;
}

.entry-content .toc__body > li + li {
  margin-top: 12px;
}

.entry-content .toc__body ul li + li {
  margin-top: 6px;
}

.entry-content .toc a {
  text-decoration: none;
}

.entry-content .toc a:hover {
  opacity: 0.6;
}

/* 目次下パーツも本文の装飾を受けないようにする */
.entry-content .blog-part ul,
.entry-content .blog-part ol {
  list-style: none;
  padding-left: 0;
}

.entry-content .blog-part li::before {
  content: none;
}

/* =========================================================
   8. グローバルナビ（旧サイトに合わせて第1階層を全件出す）
   ---------------------------------------------------------
   旧サイトのヘッダーは 11 項目を並べ、子カテゴリーはドロップダウンで
   見せていた。項目数が多いので字間と間隔を詰め、収まらない幅では
   ドロワーに切り替える。
   ========================================================= */
.global-nav__list {
  gap: 24px;
}

.global-nav__list > li {
  position: relative;
}

.global-nav__list > li > a {
  font-size: 15px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 22px 0;   /* ヘッダーいっぱいに当たり判定を広げ、ドロップダウンを繋ぐ */
}

/* 15px にすると、項目の多い FPSマウスガイドが 1101〜1159px で横にはみ出す（1101px で 57px）。
   文字は小さくせず、その幅だけ間隔と字間を詰める（1101px で 19px 余る。2026-09-29 に測った） */
@media (max-width: 1180px) {
  .global-nav__list { gap: 16px; }
  .global-nav__list > li > a { letter-spacing: 0.02em; }
}

/* 下線アニメーションは第1階層だけに効かせる */
.global-nav__list a::after {
  content: none;
}

.global-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

/* 線を出すのは今いるページの項目だけ。hover では出さない（2026-09-24、なべちゃんの指示） */
.global-nav__list > li.is-current > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 子カテゴリーが多いので矢印を添えて開くことを示す */
.global-nav__list > li.has-sub > a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
}

.global-nav__sub {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 10;
  min-width: 240px;
  padding: 18px 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}

/* 第3階層まである項目は列組みにする */
.global-nav__sub--wide {
  display: flex;
  gap: 36px;
}

.global-nav__list > li:hover > .global-nav__sub,
.global-nav__list > li:focus-within > .global-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.global-nav__group + .global-nav__group {
  margin-top: 18px;
}

.global-nav__sub--wide .global-nav__group + .global-nav__group {
  margin-top: 0;
}

.global-nav__grouphead {
  display: block;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.global-nav__group ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.global-nav__group li a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-sub);
  white-space: nowrap;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.global-nav__group li a:hover {
  opacity: 1;
  color: var(--c-text);
  padding-left: 5px;
}

/* 以前は「カテゴリーはヘッダーに置かないので、ハンバーガーを PC でも常に出す」と
   していたが、2026-09-18 になべちゃんの指示でスマートフォン（横並びナビが隠れる幅）
   だけにした。PC でカテゴリーへ辿る口はフッターの CATEGORY 一覧。 */

/* 横並びは 3 項目だけなので、狭くなるまで残しておける */
@media (max-width: 768px) {
  .global-nav { display: none; }
  .header-tools { margin-left: auto; }
}

/* ドロワーの3階層目 */
.drawer__sublist .drawer__sublist {
  padding-left: 12px;
}

.drawer__sublist .drawer__sublist a {
  font-size: 14px;
  padding: 8px 0;
}

/* =========================================================
   9. フッターのカテゴリー一覧
   ---------------------------------------------------------
   ヘッダーからカテゴリーを外したので、ここで全件（31 件）出す。
   1 列だと縦に伸びすぎるため多段組みにする。
   ========================================================= */
.site-footer__top {
  grid-template-columns: 1.6fr 1fr;
}

.site-footer__cats {
  padding: 40px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text-inv) 20%, transparent);
}

.footer-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 32px;
}

/* **opacity で薄めない。** ここは入れ子になっていて（リンク .85 × 件数 .5 = .425）、
   件数がライト 4.04・ダーク 2.87 まで落ちていた（2026-09-22 に実測）。
   下地が反転するダークでとくに効くので、色そのものを書く。 */
.footer-cats a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
}

.footer-cats a span {
  font-family: var(--f-en);
  font-size: 14px;
  color: var(--c-text-inv-sub);
}

@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-cats {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0 20px;
  }
}

/* =========================================================
   10. サイドバーの追従目次
   ---------------------------------------------------------
   追従するのはこの目次だけ。ほかのウィジェットは通常どおり流れる。
   旧サイトも fix_sidebar（追従サイドバー）に目次を置いていた。
   ========================================================= */

/* サイドバー自体の追従はやめ、列だけ本文と同じ高さに伸ばす。
   こうすると最後に置いた目次が記事の終わりまで追従できる。 */
.l-side {
  position: static;
  align-self: stretch;
}

.widget--toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.toc--side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-top: 1px solid var(--c-line-str);
}

.toc--side .toc__title {
  flex: none;
  padding: 14px 0 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
}

.toc--side .toc__body {
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

/* 追従目次は文字を落として本文の邪魔をしない。
   padding-left は下の枠線ぶんを必ず確保する（ショートハンドで
   打ち消すと文字が枠外に出て切れる）。 */
.toc--side .toc__body > li > a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  padding: 5px 0 5px 12px;
}

.toc--side .toc__body > li + li {
  margin-top: 2px;
}

.toc--side .toc__body ul {
  margin: 2px 0 0 14px;
}

.toc--side .toc__body ul a {
  font-size: 14px;
  padding: 4px 0 4px 12px;
}

.toc--side .toc__body ul li + li {
  margin-top: 0;
}

/* 現在読んでいる章 */
.toc--side .toc__body a {
  display: block;
  border-left: 2px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.toc--side .toc__body a.is-active {
  opacity: 1;
  color: var(--c-text);
  font-weight: 700;
  border-left-color: var(--c-line-str);
  text-decoration: none;
}

/* スクロールバーを細く */
.toc--side .toc__body::-webkit-scrollbar {
  width: 3px;
}

.toc--side .toc__body::-webkit-scrollbar-thumb {
  background: var(--c-line);
}

/* 1 カラムになる幅では出さない（2026-09-24、なべちゃんの指示）。
   サイドバーが本文の下へ回るので、目次が記事を読み終えた後ろに出るだけになる。
   本文の頭の目次（.toc。toc--side ではない）はそのまま出る */
@media (max-width: 1024px) {
  .l-side { align-self: auto; }
  .widget--toc { display: none; }
}

/* ---------------------------------------------------------
   目次ボタン（右下の TOP の上）と目次のモーダル（2026-09-24、なべちゃんの指示）
   追従目次を出さない 1024px 以下でだけ出す。どちらも main.js の
   initTocModal() が本文の目次（#mokuji）を写して作る。目次の無いページには出ない。
   --------------------------------------------------------- */
.toc-fab {
  position: fixed;
  right: 20px;
  bottom: 76px;           /* TOP（#pagetop。bottom 20px・高さ 46px）の上に 10px あける */
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 46px;
  height: 46px;
  padding: 0;
  /* 地の色＋枠線のすりガラス。TOP（style.css の #pagetop）と同じ見た目で、理由もそちらにある。
     地と同じ色なので、モーダルの閉じるボタンと同じ枠線で形を出す。**62% より薄くしない**：下地がいちばん
     暗いとき（ダークで白い下地が透けるとき）の文字との差の見込みが 4.69 で、下げると基準 4.5 を割る */
  border: 1px solid var(--c-line-str);
  background: var(--c-bg);   /* color-mix が効かない古いブラウザ用 */
  background: color-mix(in srgb, var(--c-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

.toc-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* キーボードで選んだときの枠は、ボタンの内側に描く。TOP（style.css の #pagetop:focus-visible）と
   同じ値で、理由もそちらに書いてある。**半透明にしない。片方だけ変えない** */
.toc-fab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

.toc-fab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* 覆いと出しかたは検索モーダル（style.css の .search-modal）に揃える */
.toc-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  /* 下の余白。ふだんは上と同じ 20px（下の .has-anchor-ad で変える）。.toc-modal__inner の max-height もこれを見る */
  --toc-modal-bottom: 20px;
  padding: 20px 20px var(--toc-modal-bottom);
  background: color-mix(in srgb, var(--c-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(6px);   /* Safari 17 まで（iOS も）は接頭辞付きでしか効かない（MDN の互換表） */
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  /* 開くときは visibility を即座に、閉じるときは消え終わってから隠す（検索モーダルと同じ理由） */
  transition: opacity 0.25s var(--ease), visibility 0s 0.25s;
}

/* アンカー広告を出すサイト（config の ads.anchor が true。layout.php が body に付ける）だけ、
   下を 140px 空けて一覧の最後の項目を広告の帯の上で止める（2026-09-24、なべちゃんの判断）。
   帯はスマホで画面下 124px（tasks/done/all_anchor-ad-covers-bottom.md の実測）。帯に入った項目を押すと
   広告に当たり、Google のポリシーが禁じる「操作する部品に重なる広告」になる。本文と違って、固定のモーダルは
   送っても帯から出てこない。アンカー広告の無いサイトでは空けない（空白が残るだけなので） */
.has-anchor-ad .toc-modal {
  --toc-modal-bottom: 140px;
}

.toc-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--ease), visibility 0s;
}

.toc-modal__inner {
  display: flex;
  flex-direction: column;
  width: min(100%, 640px);
  max-height: calc(100vh - 20px - var(--toc-modal-bottom));
  max-height: calc(100dvh - 20px - var(--toc-modal-bottom));  /* 画面下のツールバーが出ている高さで収める。上下の余白を引く */
  border: 1px solid var(--c-line-str);
  background: var(--c-bg);
}

.toc-modal__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--c-line);
}

.toc-modal__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-str);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-text);
}

.toc-modal__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* 一覧はこの中でスクロールする。position は、main.js が「いま読んでいる章」の
   位置を offsetTop で測る基準にするため */
.toc-modal .toc__body {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 8px 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 指で押す行なので高さを取る（本文の目次の行間のままだと 24px しかない） */
.toc-modal .toc__body > li + li,
.toc-modal .toc__body ul li + li {
  margin-top: 0;
}

.toc-modal .toc__body > li + li {
  border-top: 1px solid var(--c-line);
}

.toc-modal .toc__body ul {
  margin: 0 0 6px 26px;
}

.toc-modal .toc__body a {
  padding: 10px 0 10px 10px;
  border-left: 2px solid transparent;
}

/* 13px × 行間 1.7 ＋ 上下 11px で 44px */
.toc-modal .toc__body ul a {
  padding: 11px 0 11px 10px;
}

.toc-modal .toc__body a.is-active {
  border-left-color: var(--c-text);
}

@media (min-width: 1025px) {
  .toc-fab,
  .toc-modal { display: none; }
}

/* =========================================================
   11. 筆者紹介カード
   ---------------------------------------------------------
   目次の下と記事末に置く。旧サイトは SNS をアイコンフォントで
   出していて引き継げないので、文字リンクにしている。
   ========================================================= */
.author-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 32px;
  margin: 2.5em 0;
  border: 1px solid var(--c-line);
}

.author-card__avatar img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.author-card__role {
  font-size: 14px;
  letter-spacing: .2em;
  color: var(--c-text-sub);
  margin: 0;
}

.author-card__name {
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}

.author-card__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text-sub);
  margin: 0;
}

.author-card__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.author-card__sns li::before { content: none; }

/* リンクの見た目は .sns-btn（運営者の SNS と共通） */

/* 目次の下に置く小さい版。
   **上の余白（2em）を 0 にしないこと。** 真上は目次の下の広告枠（上下 2em）なので、ふだんは余白が重なって
   見た目は変わらない。広告が来ずに枠が畳まれる（.ad.is-ad-unavailable は余白も 0）と、目次の無い記事では
   本文の枠に接していた（2026-09-25、なべちゃんの指摘。FPSマウスの eDPI 算出ツールで 0px だった）。 */
.author-card--compact {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px;
  margin: 2em 0 2.5em;
  background: var(--c-bg-sub);
  border: none;
}

.author-card--compact .author-card__name {
  font-size: 15px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.author-card--compact .author-card__text {
  font-size: 15px;
}

.author-card--compact .author-card__sns {
  margin-top: 12px;
}

/* 320px 幅は余裕が無い。記事末カードの SNS ボタンは、アイコンが 62px を
   超えると2行に折り返す（実測）。62px ちょうどだと残り 0.1px しかないので、
   ブラウザ差を見込んで 60px にしてある。**丸めて上げないこと。** */
@media (max-width: 600px) {
  .author-card,
  .author-card--compact {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }
}

/* =========================================================
   12. 外部サイトへの文字リンク
   ---------------------------------------------------------
   旧サイトは外部 URL を素の文字列で出していただけ（リンクですら
   なかった）。カードにせず、外部と分かる文字リンクにする。
   ========================================================= */
.n-extlink {
  margin: 1.6em 0;
}

.entry-content .n-extlink a {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--c-line);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.entry-content .n-extlink a:hover {
  opacity: 1;
  border-color: var(--c-line-str);
  background: var(--c-bg-sub);
}

.n-extlink__label {
  flex: none;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--c-text-sub);
  border: 1px solid var(--c-line);
  padding: 2px 8px;
}

.n-extlink__text {
  font-size: 15px;
  line-height: 1.7;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.n-extlink__text::after {
  content: " ↗";
  text-decoration: none;
  color: var(--c-text-sub);
}

/* ページ内リンクは JS（initSmoothScroll）が動かすので、
   CSS 側の scroll-behavior は切って二重に動かないようにする。 */
html {
  scroll-behavior: auto;
}

/* =========================================================
   13. 本文の中に置くパーツの打ち消し（追加分）
   ---------------------------------------------------------
   筆者紹介カードは本文（.entry-content）の中にも入るので、
   本文用のリスト装飾（黒い四角・インデント・行間）を打ち消す。
   .entry-content ul > li::before のほうが詳細度が高いため、
   ここは .entry-content から書き起こす必要がある。
   ========================================================= */
.entry-content .author-card ul,
.entry-content .author-card ol {
  padding-left: 0;
  list-style: none;
}

.entry-content .author-card li {
  position: static;
  margin: 0;
}

.entry-content .author-card li::before,
.entry-content .author-card li + li::before {
  content: none;
}

.entry-content .author-card li + li {
  margin-top: 0;
}

.entry-content .author-card p {
  margin: 0;
}

.entry-content .author-card__name {
  margin: 4px 0 8px;
  padding-bottom: 8px;
}

.entry-content .author-card__sns {
  margin-top: 12px;
}

/* =========================================================
   14. 目次に戻る
   ---------------------------------------------------------
   2 つ目以降の h2 の直前に置く。旧サイトと同じ位置・文言。
   ========================================================= */
.back-toc {
  margin: 3.2em 0 -2.4em;
  text-align: right;
}

.entry-content .back-toc a {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--c-line);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--c-text-sub);
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.entry-content .back-toc a:hover {
  opacity: 1;
  border-color: var(--c-line-str);
  color: var(--c-text);
}

/* スマートフォンでも右寄せ・元の大きさのまま（2026-09-18、運営者の指示）。
   一度コピーボタンと同じく左寄せ・44px にしたが、この枠に押しやすさは
   求めていないので戻した。コピーボタン（.n-copy）とは扱いが違う。 */
@media (max-width: 600px) {
  .back-toc {
    margin: 2.4em 0 -1.6em;
  }
}

/* =========================================================
   15. 広告表記（PR表記）
   ---------------------------------------------------------
   旧サイトはアイキャッチの手前に、斜線地の帯で出していた。
   同じ位置・同じ文言で作り直す。本文と近すぎないよう下に余白を取る。
   ========================================================= */
.pr-notation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
  padding: 12px 18px;
  /* **広告である旨の表示なので、小さく薄くしない。** 消費者庁の運用基準は、周囲の文字と
     比べて小さく表示した結果（第3-1(2)カ）、他の文字より薄い色を使った結果（同キ）、
     一般消費者が認識しにくくなった場合を不明瞭の例に挙げている。Q&A Q13 は冒頭の一括表記に
     ついて「文字のサイズや色なども踏まえ」明瞭であることを求める。
     2026-09-23 に本文 17〜18px／比 15.91 に対して 11.5〜12px／比 5.33 だったので上げた
     （なべちゃんの判断。「やましいように見えて逆効果」）。**薄い色へ戻さないこと。** */
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--c-text-body);
  border: 1px solid var(--c-line);
  background-color: var(--c-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--c-text) 5%, transparent) 0 1px,
    transparent 1px 7px
  );
}

.pr-notation__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-en);
  font-size: 11px;
  font-style: italic;
  line-height: 1;
}

@media (max-width: 600px) {
  .pr-notation {
    margin-bottom: 24px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* 外部リンク：行き先のドメインを小さく添える */
.n-extlink__host {
  flex: none;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-text-sub);
  text-decoration: none;
}

.n-extlink__host::before {
  content: "—";
  margin-right: 6px;
  opacity: .5;
}

/* 動画の下に出す出典表記（アイキャッチの figcaption と同じ体裁）。
   figure の margin-bottom 40px と相殺して、画像側の figcaption と
   同じ 10px の間隔にする（40 + (-30) = 10） */
.entry-thumb__caption {
  margin: -30px 0 40px;
  font-size: 14px;
  color: var(--c-text-sub);
  text-align: center;
}

/* =========================================================
   16. コードのコピーと、クロスヘアの見本
   ---------------------------------------------------------
   クロスヘアコードは、読者が VALORANT の「プロファイルコードを
   インポート」へそのまま貼り付けるもの。長いもので 249 文字あり、
   手で選択させるのは酷なので、コードのすぐ下にボタンを置く。

   コードの下には見本（.n-xh）も置く。生成ツールのリアルタイム
   プレビューと同じ描きかたで、文言は添えない（2026-09-21、なべちゃん）。
   見本の右下に「コピー」と「クロスヘアを調整」（生成ツールへコードを
   渡すリンク）を並べる。

   **ボタンをコードブロックの中に重ねないこと。** <pre> は
   overflow-x: auto のスクロール領域で、長いコードは実測で必ず
   横に溢れる。中に絶対配置すると、末尾を見に行った読者の画面から
   ボタンが流れて消える。

   箱を出すのは app/inc/content.php の add_code_copy()、見本を描くのは
   main.js の initCrosshairSamples()、押したときの動きは initCodeCopy()。
   ========================================================= */
.entry-content .n-copy {
  /* .entry-content > * + * の 1.6em を打ち消す。コードと離すと
     「別のもの」に見えるので、ここだけ詰める */
  margin-top: 6px;
}

.entry-content .n-copy__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

/* 表のセルの中。幅が 119px しかない列に入るので左へ寄せる */
.entry-content .n-copy--inline {
  display: block;
  margin-top: 6px;
}

.entry-content .n-copy--inline .n-copy__acts {
  justify-content: flex-start;
}

.entry-content .n-copy__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--c-text-sub);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.entry-content .n-copy__btn:hover {
  border-color: var(--c-line-str);
  color: var(--c-text);
}

/* 「クロスヘアを調整」は塗りで出し、コピーと区別する。
   .entry-content a の下線と色に負けないよう、ここで明示する */
.entry-content .n-copy__btn--edit {
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-bg);
}

.entry-content .n-copy__btn--edit:hover {
  border-color: var(--c-text);
  background: var(--c-bg);
  color: var(--c-text);
}

/* --- 見本 ---
   生成ツールの vcg-stage と同じ暗い面に、同じ部品（線4本とドット）を
   同じ CSS 変数で置く。中心 0×0 の箱（.n-xh__reticle）を基準に、
   線はオフセットぶん離して並べ、拡大は transform で掛ける（main.js）。
   暗い面なのでダークモードでも変えない。 */
.entry-content .n-xh {
  display: block;
  position: relative;
  height: 120px;
  overflow: hidden;
  background: #18232c;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 8px 8px;
}

.entry-content .n-copy--inline .n-xh {
  height: 96px;
}

.entry-content .n-xh__reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: center;
}

.entry-content .n-xh__line,
.entry-content .n-xh__dot {
  position: absolute;
  display: block;
  background: var(--color);
  box-shadow: 0 0 0 var(--outline) rgba(0, 0, 0, var(--outline-opacity));
}

.entry-content .n-xh__line--left   { right: var(--gap);  top: calc(var(--thick) / -2); }
.entry-content .n-xh__line--right  { left: var(--gap);   top: calc(var(--thick) / -2); }
.entry-content .n-xh__line--top    { bottom: var(--gap); left: calc(var(--thick) / -2); }
.entry-content .n-xh__line--bottom { top: var(--gap);    left: calc(var(--thick) / -2); }

.entry-content .n-xh__dot {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* スマートフォンでは左へ寄せる。**右寄せのままだと押せないことがある。**
   ページトップボタン（#pagetop）が右下に 46x46 で固定されており、
   1カラムになる幅では本文の右端と重なる。実測で、ボタンが画面に収まる
   スクロール位置のうち 19% で重なり、最悪はボタン全面が隠れて
   「TOP」のほうが押される。 */
@media (max-width: 600px) {
  .entry-content .n-copy__acts {
    justify-content: flex-start;
  }

  /* 指で押す大きさにする。11px の文字に padding 4px だと高さ 32px で、
     目安（Apple 44pt / Google 48dp）に届かない。上下の余白だけ増やす
     （文字を大きくすると本文の中で浮く）。 */
  .entry-content .n-copy__btn {
    padding: 10px 14px;
  }
}

/* コードブロックはページと明暗が逆の面。既定の ::selection は
   背景が var(--c-text) で、<pre> の背景 var(--c-bg-inv) とほぼ同色
   （明 #111111 対 #0f0f0f、暗 #ededed 対 #fafafa）になり、選んでも
   見た目が変わらない。ここだけ入れ替える。

   クリップボードが使えない環境では「選択する」のが最後の手段なので、
   選択が見えないと何も起きていないように映る。 */
.entry-content pre::selection,
.entry-content pre ::selection {
  background: var(--c-text-inv);
  color: var(--c-bg-inv);
}

/* =========================================================
   17. VALORANT クロスヘアコード生成ツール
   ---------------------------------------------------------
   記事内のツールは、元データに 7〜10px の文字と細い range が
   インライン指定されている。本文として読める大きさと操作領域へ
   揃え、暗いコード欄では選択範囲を明るく見せる。

   5サイト共通CSSだが、#vcg-app の内側だけに効く。
   ========================================================= */
.entry-content #vcg-app {
  --vcg-red: #d21f3c;
  --vcg-muted: #46545b;
}

.entry-content #vcg-app .vcg-card {
  min-width: 0;
}

.entry-content #vcg-app .vcg-panel-title {
  font-size: 22px;
}

.entry-content #vcg-app .vcg-count,
.entry-content #vcg-app .vcg-unsaved,
.entry-content #vcg-app .vcg-code-valid {
  color: #46545b;
  font-size: 14px;
}

.entry-content #vcg-app .vcg-section-note {
  color: #46545b;
  font-size: 14px;
  line-height: 1.7;
}

.entry-content #vcg-app .vcg-filter button,
.entry-content #vcg-app .vcg-profile-tabs button {
  color: #46545b;
  font-size: 14px;
  min-height: 44px;
}

.entry-content #vcg-app .vcg-filter button {
  min-width: 70px;
  padding: 9px 13px;
}

.entry-content #vcg-app .vcg-search input {
  color: var(--vcg-ink);
  font-size: 16px;
  height: 44px;
  padding-left: 13px;
}

/* 案内文字（「名前で検索」）は色の指定が無く、ブラウザ既定の色（Chrome で #757575 相当）で
   地の #f8f6f1 に対して 4.26 しかなかった（基準 4.5。2026-09-24 に bg-contrast.sh で実測）。
   上の小さい文字と同じ色にする（7.26）。 */
.entry-content #vcg-app .vcg-search input::placeholder {
  color: #46545b;
}

.entry-content #vcg-app .vcg-search i {
  right: 14px;
  top: 14px;
}

.entry-content #vcg-app .vcg-preset {
  grid-template-columns: 76px 1fr;
  min-height: 88px;
}

.entry-content #vcg-app .vcg-preset__copy {
  padding: 13px 11px;
}

.entry-content #vcg-app .vcg-preset__copy span {
  color: #b81731;
  font-size: 12px;
  letter-spacing: .02em;   /* 0.1em だと PC の 3 列で「PRO / CREATOR」が 2 行に折れ、その段だけカードが高くなる */
}

.entry-content #vcg-app .vcg-preset__copy strong {
  font-size: 14px;
}

.entry-content #vcg-app .vcg-preset__copy small {
  color: #46545b;
  font-size: 14px;
}

.entry-content #vcg-app .vcg-pager button {
  color: #46545b;
  font-size: 14px;
  height: 40px;
  min-width: 40px;
}

.entry-content #vcg-app .vcg-accordion summary {
  font-size: 16px;
  min-height: 52px;
  padding: 17px 2px;
}

.entry-content #vcg-app .vcg-accordion summary b {
  color: #b81731;
  font-size: 12px;
}

.entry-content #vcg-app .vcg-control-title {
  color: #46545b;
  font-size: 14px;
}

.entry-content #vcg-app .vcg-control-grid {
  gap: 20px 24px;
}

.entry-content #vcg-app .vcg-control__top label,
.entry-content #vcg-app .vcg-toggle-label {
  color: #344249;
  font-size: 14px;
  line-height: 1.5;
}

.entry-content #vcg-app .vcg-control__value {
  font-size: 16px;
}

.entry-content #vcg-app .vcg-control select {
  font-size: 16px;
  height: 44px;
}

.entry-content #vcg-app .vcg-color-row input[type="color"] {
  height: 44px;
  width: 48px;
}

.entry-content #vcg-app .vcg-toggle-control {
  min-height: 44px;
}

.entry-content #vcg-app .vcg-switch {
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

.entry-content #vcg-app .vcg-switch span {
  height: 24px;
  width: 42px;
}

.entry-content #vcg-app .vcg-switch span::after {
  height: 18px;
  left: 3px;
  top: 3px;
  width: 18px;
}

.entry-content #vcg-app .vcg-switch input:checked + span::after {
  transform: translateX(18px);
}

.entry-content #vcg-app input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 34px;
  margin-top: 4px;
}

.entry-content #vcg-app input[type="range"]::-webkit-slider-runnable-track {
  background: #b9c1c5;
  border-radius: 4px;
  height: 8px;
}

.entry-content #vcg-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--vcg-red);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #9da8ad, 0 2px 5px rgba(16, 24, 32, .25);
  height: 22px;
  margin-top: -7px;
  width: 22px;
}

.entry-content #vcg-app input[type="range"]::-moz-range-track {
  background: #b9c1c5;
  border-radius: 4px;
  height: 8px;
}

.entry-content #vcg-app input[type="range"]::-moz-range-thumb {
  background: var(--vcg-red);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #9da8ad, 0 2px 5px rgba(16, 24, 32, .25);
  height: 16px;
  width: 16px;
}

.entry-content #vcg-app input[type="range"]:focus-visible {
  outline: 3px solid rgba(210, 31, 60, .32);
  outline-offset: 2px;
}

.entry-content #vcg-app .vcg-code-label {
  color: #46545b;
  font-size: 14px;
}

.entry-content #vcg-app .vcg-code textarea {
  caret-color: #fff;
  font-size: 16px;
  line-height: 1.7;
  min-height: 160px;
  padding: 18px;
}

.entry-content #vcg-app .vcg-code textarea::selection {
  background: #9dfaf4;
  color: #101820;
}

.entry-content #vcg-app .vcg-code textarea::-moz-selection {
  background: #9dfaf4;
  color: #101820;
}

.entry-content #vcg-app .vcg-button {
  font-size: 14px;
  min-height: 48px;
  padding: 0 17px;
}

.entry-content #vcg-app .vcg-code-message {
  color: #46545b;
  font-size: 14px;
  line-height: 1.7;
}

.entry-content #vcg-app .vcg-tip {
  padding: 15px 16px;
}

.entry-content #vcg-app .vcg-tip > span {
  color: #46545b;
  font-size: 13px;
  height: 24px;
  width: 24px;
}

.entry-content #vcg-app .vcg-tip p {
  color: #46545b;
  font-size: 14px;
}

.entry-content #vcg-app .vcg-tip strong {
  font-size: 14px;
}

.entry-content #vcg-app .vcg-live-label {
  color: #46545b;
  font-size: 12px;
}

.entry-content #vcg-app .vcg-segmented button {
  color: #46545b;
  font-size: 12px;
  min-height: 28px;
  min-width: 30px;
}

.entry-content #vcg-app .vcg-current-summary strong {
  font-size: 13px;
}

.entry-content #vcg-app .vcg-current-summary small {
  color: #46545b;
  font-size: 12px;
}

.entry-content #vcg-app .vcg-preview-actions button {
  color: #344249;
  font-size: 12px;
}

/* 拡大プレビュー（⛶ で開く窓。最大 560px で、小さな枠の例外に当たらない）。20 節の 12px・9px のままだった
   （開くまで隠れているので、2026-09-29 の見直しの測定に出なかった） */
.entry-content #vcg-app .vcg-preview-modal__head strong {
  font-size: 16px;
}

.entry-content #vcg-app .vcg-preview-modal__window > p {
  color: #46545b;   /* 20 節の #68747a は地の #f8f6f1 に対して 4.45（基準 4.5）。上の小さい文字と同じ色にする */
  font-size: 14px;
}

.entry-content #vcg-app button:focus-visible,
.entry-content #vcg-app input:focus-visible,
.entry-content #vcg-app select:focus-visible,
.entry-content #vcg-app textarea:focus-visible,
.entry-content #vcg-app summary:focus-visible {
  outline: 3px solid rgba(210, 31, 60, .32);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .entry-content #vcg-app .vcg-panel-title {
    font-size: 20px;
  }

  /* 5つを1行に並べると、幅 390 で1枠の中身が 51px しかなく、直す前の 11px でも「ストリーマー」（63px）がはみ出していた。
     14px では 80px（全角 6 字ぶんの書体なら 84px）。文字を小さくせず、3つと2つの2行に並べる。
     区切りの線は、隙間から覗く線の色で引く（2026-09-29 に測った） */
  .entry-content #vcg-app .vcg-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--vcg-line);
  }

  .entry-content #vcg-app .vcg-filter button {
    flex: 1 0 30%;
    border-left: 0;
    background: #fff;
    font-size: 14px;
    min-width: 0;
    padding-inline: 3px;
  }

  .entry-content #vcg-app .vcg-control-grid {
    gap: 18px;
  }
}

/* 3 列の枠の中身は幅 390 で 90px・375 で 85px・361 で 80px。「ストリーマー」の 80〜84px が入らない 374px 以下は 2 列にする */
@media (max-width: 374px) {
  .entry-content #vcg-app .vcg-filter button {
    flex-basis: 45%;
  }
}

/* =========================================================
   18. クロスヘア生成ツールのプレビューを目次の下へ寄せる
   ---------------------------------------------------------
   サイドバーが横に並ぶ 1025px 以上でだけ、ツールの中央上部に
   あったプレビューを、追従する目次の下へ置いて一緒に追従させる。
   設定を触っている手元とプレビューが縦に離れないようにするため。
   狭い幅は今までどおりツールの中で追従する（サイドバーが下へ回る）。

   DOM は動かさない。ツール本体の JS が #vcg-app の中しか見ておらず、
   プレビューをサイドバーへ移すと形が描けなくなる。置き場所だけを
   position: fixed で移し、座標は main.js の initCrosshairRail が
   測って CSS 変数で渡す。
   ========================================================= */
@media (min-width: 1025px) {
  .entry-content #vcg-app.vcg-app--rail .vcg-preview-panel {
    position: fixed;
    top: var(--vcg-rail-top, 104px);
    left: var(--vcg-rail-left, 0);
    width: var(--vcg-rail-width, 320px);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
  }

  /* ツールが画面に入っているあいだだけ出す */
  .entry-content #vcg-app.vcg-app--rail-on .vcg-preview-panel {
    opacity: 1;
    visibility: visible;
  }

  /* 横 132px の枠から、サイドバーの幅いっぱいの枠へ組み替える */
  .entry-content #vcg-app.vcg-app--rail .vcg-stage {
    height: 190px;
  }

  .entry-content #vcg-app.vcg-app--rail .vcg-preview-meta {
    gap: 8px;
    padding: 10px 12px 12px;
  }

  /* 拡大ボタンは横の余りへ広げる（移動の挙動のボタンが出たときは分け合う） */
  .entry-content #vcg-app.vcg-app--rail .vcg-preview-actions button {
    height: 40px;
  }

  .entry-content #vcg-app.vcg-app--rail .vcg-preview-actions button:last-child {
    flex: 1;
    width: auto;
  }
}

/* サイドバーが下へ回る 1024px 以下は、プレビューをツールの上に1列で置く。
   ツール側の分岐（コンテナ幅 980px）では 1021〜1024px だけ2列のままになり、
   本体が 570px ほどに潰れてプリセットの名前が折り返す（実測）。 */
@media (max-width: 1024px) {
  .entry-content #vcg-app .vcg-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-content #vcg-app .vcg-preview-panel {
    justify-self: center;
    width: min(369px, 100%);
  }
}

/* =========================================================
   19. 感度の計算ツール（FPSマウスの eDPI・振り向き／VALORANT⇔CS2。2026-09-25）
   ---------------------------------------------------------
   旧 WordPress の Calculated Fields Form の置き換え。HTML は記事本文、計算は main.js の initSensCalc()。
   reset.css が input の appearance を消しているので、ラジオボタンだけ戻す（消えたままだと選べない見た目になる）。
   ========================================================= */
.entry-content .n-calc {
  display: grid;
  gap: 18px;
}

.entry-content .n-calc__field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.entry-content .n-calc__label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}

.entry-content .n-calc__choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 15px;
  cursor: pointer;
}

.entry-content .n-calc__choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  appearance: auto;
  accent-color: var(--c-accent);
  cursor: pointer;
}

/* 16px 未満にすると、iPhone の Safari が入力のたびに画面を拡大する */
.entry-content .n-calc__input {
  width: 100%;
  max-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--c-line-str);
  background: var(--c-bg);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.entry-content .n-calc__input:focus {
  outline: none;
}

.entry-content .n-calc__input:focus-visible,
.entry-content .n-calc__choice input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.entry-content .n-calc__results {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.entry-content .n-calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}

.entry-content .n-calc__row dt {
  min-width: 0;
  font-size: 14px;
}

.entry-content .n-calc__row dd {
  flex: none;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.entry-content .n-calc__row--main dt {
  font-weight: 700;
}

.entry-content .n-calc__row--main dd {
  font-size: 22px;
}

/* =========================================================
   20. クロスヘア生成ツール（FPSマウスの /valorant-crosshair-generator/。2026-09-28）
   ---------------------------------------------------------
   記事本文の <div> の中に置いていた <style> を移したもの（<style> は <div> の中に置けず、HTML の検査でエラーになる）。
   中身は移す前と同じで、どれも #vcg-app の中にしか効かない。追従プレビューの置き場所は 18 節、振る舞いは記事本文の JS。
   もとは本文（content.css より後）にあったので、この節は末尾に置く。前へ動かすと 18 節との優先順が変わる。
   ========================================================= */
#vcg-app {
  --vcg-ink: #101820;
  --vcg-ink-2: #17232d;
  --vcg-paper: #ece8df;
  --vcg-paper-2: #f7f4ed;
  --vcg-line: #d7d2c8;
  --vcg-red: #ff4655;
  --vcg-cyan: #48e6df;
  --vcg-muted: #6d777d;
  --vcg-radius: 4px;
  --vcg-sticky-offset: calc(var(--swl-fix_headerH, 70px) + var(--swl-adminbarH, 0px) + 8px);
  color: var(--vcg-ink);
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  isolation: isolate;
  margin: 0 auto;
  max-width: 1280px;
  text-align: left;
}
#vcg-app, #vcg-app * { box-sizing: border-box; }
#vcg-app.is-preview-open { position: relative; z-index: 1000000; }
#vcg-app button, #vcg-app input, #vcg-app select, #vcg-app textarea { font: inherit; }
#vcg-app button { margin: 0; }
#vcg-app .vcg-shell {
  background: var(--vcg-paper);
  border: 1px solid #cfc9bd;
  box-shadow: 0 24px 70px rgba(16, 24, 32, .14);
  container-name: vcg-shell;
  container-type: inline-size;
  overflow: visible;
  position: relative;
}
#vcg-app .vcg-shell::before {
  background-image: linear-gradient(rgba(16,24,32,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,32,.025) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
#vcg-app .vcg-unsaved i, #vcg-app .vcg-code-valid i { background: var(--vcg-cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(72,230,223,.12); height: 6px; width: 6px; }
#vcg-app .vcg-workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 369px minmax(0, 1fr);
  padding: 30px clamp(18px, 3.8vw, 50px) 52px;
  position: relative;
  z-index: 1;
}
#vcg-app .vcg-preview-panel, #vcg-app .vcg-card {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--vcg-line);
  border-radius: var(--vcg-radius);
  box-shadow: 0 8px 24px rgba(16,24,32,.045);
}
#vcg-app .vcg-preview-panel {
  align-self: start;
  background: #f8f6f1;
  display: grid;
  grid-template-columns: 132px minmax(0,1fr);
  height: 132px;
  overflow: hidden;
  padding: 0;
  position: sticky;
  top: var(--vcg-sticky-offset);
  z-index: 20;
}
#vcg-app .vcg-main { display: grid; gap: 20px; min-width: 0; }
#vcg-app .vcg-card { padding: clamp(20px, 3vw, 32px); scroll-margin-top: 18px; }
#vcg-app .vcg-panel-head, #vcg-app .vcg-section-head { align-items: center; display: flex; justify-content: space-between; }
#vcg-app .vcg-kicker {
  color: var(--vcg-red);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  margin-bottom: 2px;
}
#vcg-app .vcg-panel-title { color: var(--vcg-ink); font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1.35; margin: 0; }
#vcg-app .vcg-segmented, #vcg-app .vcg-mini-segment, #vcg-app .vcg-filter, #vcg-app .vcg-profile-tabs { display: flex; }
#vcg-app .vcg-segmented { border: 1px solid var(--vcg-line); margin: 0; }
#vcg-app .vcg-segmented button {
  background: #fff;
  border: 0;
  color: #7b858a;
  cursor: pointer;
  font-size: 7px;
  font-weight: 800;
  min-width: 22px;
  padding: 3px 4px;
}
#vcg-app .vcg-segmented button + button { border-left: 1px solid var(--vcg-line); }
#vcg-app .vcg-segmented button.is-active { background: var(--vcg-ink); color: #fff; }
#vcg-app .vcg-stage {
  background: #18232c;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 8px 8px;
  height: 132px;
  overflow: hidden;
  position: relative;
}
#vcg-app .vcg-reticle { height: 0; left: 50%; position: absolute; top: 50%; width: 0; z-index: 6; }
#vcg-app .vcg-line-part, #vcg-app .vcg-dot-part { background: var(--part-color); position: absolute; }
#vcg-app .vcg-line-part { box-shadow: 0 0 0 var(--outline-size) rgba(0,0,0,var(--outline-opacity)); }
#vcg-app .vcg-line-part--left { right: var(--part-gap); top: calc(var(--part-thickness) / -2); }
#vcg-app .vcg-line-part--right { left: var(--part-gap); top: calc(var(--part-thickness) / -2); }
#vcg-app .vcg-line-part--top { bottom: var(--part-gap-v); left: calc(var(--part-thickness) / -2); }
#vcg-app .vcg-line-part--bottom { left: calc(var(--part-thickness) / -2); top: var(--part-gap-v); }
#vcg-app .vcg-dot-part { box-shadow: 0 0 0 var(--outline-size) rgba(0,0,0,var(--outline-opacity)); left: 50%; top: 50%; transform: translate(-50%,-50%); }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--left[data-movement="1"] { animation: vcg-move-left .72s ease-in-out infinite alternate; }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--right[data-movement="1"] { animation: vcg-move-right .72s ease-in-out infinite alternate; }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--top[data-movement="1"] { animation: vcg-move-top .72s ease-in-out infinite alternate; }
#vcg-app .vcg-reticle.is-moving .vcg-line-part--bottom[data-movement="1"] { animation: vcg-move-bottom .72s ease-in-out infinite alternate; }
@keyframes vcg-move-left { to { transform: translateX(calc(var(--movement-distance) * -1)); } }
@keyframes vcg-move-right { to { transform: translateX(var(--movement-distance)); } }
@keyframes vcg-move-top { to { transform: translateY(calc(var(--movement-distance) * -1)); } }
@keyframes vcg-move-bottom { to { transform: translateY(var(--movement-distance)); } }
#vcg-app .vcg-preview-meta { display: grid; gap: 3px; min-width: 0; padding: 5px 7px; }
#vcg-app .vcg-preview-topline { align-items: center; display: flex; justify-content: space-between; }
#vcg-app .vcg-live-label { align-items: center; color: #778188; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 7px; font-weight: 900; gap: 4px; letter-spacing: .08em; }
#vcg-app .vcg-live-label i { background: #31d6c4; border-radius: 50%; box-shadow: 0 0 6px rgba(49,214,196,.55); height: 5px; width: 5px; }
#vcg-app input[type="range"] { accent-color: var(--vcg-red); cursor: pointer; margin: 7px 0 0; width: 100%; }
#vcg-app .vcg-current-summary { align-items: center; display: grid; gap: 0 6px; grid-template-columns: 8px minmax(0,1fr); min-width: 0; }
#vcg-app .vcg-current-summary > span { border: 1px solid rgba(0,0,0,.2); border-radius: 50%; grid-row: 1 / span 2; height: 8px; width: 8px; }
#vcg-app .vcg-current-summary strong, #vcg-app .vcg-current-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vcg-app .vcg-current-summary strong { color: var(--vcg-ink); font-size: 9px; line-height: 1.2; }
#vcg-app .vcg-current-summary small { color: #828b90; font-size: 7px; line-height: 1.2; }
#vcg-app .vcg-preview-actions { align-items: stretch; display: flex; gap: 4px; }
#vcg-app .vcg-preview-actions button { align-items: center; background: #fff; border: 1px solid var(--vcg-line); color: #5f6a70; cursor: pointer; display: inline-flex; font-size: 7px; font-weight: 800; gap: 4px; height: 36px; justify-content: center; padding: 0 6px; }
#vcg-app .vcg-preview-actions button:first-child { flex: 1; }
#vcg-app .vcg-preview-actions button:last-child { font-size: 12px; width: 23px; }
#vcg-app .vcg-preview-actions button[aria-pressed="true"] { background: var(--vcg-red); border-color: var(--vcg-red); color: #fff; }
#vcg-app .vcg-preview-actions button:disabled { cursor: not-allowed; opacity: .42; }
#vcg-app .vcg-preview-actions button:focus-visible { border-color: var(--vcg-red); outline: 2px solid rgba(255,70,85,.22); }
#vcg-app .vcg-preview-modal {
  align-items: center;
  background: rgba(8,16,22,.78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 99999;
}
#vcg-app .vcg-preview-modal__window { background: #f8f6f1; border: 1px solid #d9d3c8; box-shadow: 0 24px 80px rgba(0,0,0,.38); max-width: 560px; padding: 12px; width: 100%; }
#vcg-app .vcg-preview-modal__head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
#vcg-app .vcg-preview-modal__head strong { color: var(--vcg-ink); font-size: 12px; }
#vcg-app .vcg-preview-modal__head button { align-items: center; background: #fff; border: 1px solid var(--vcg-line); color: var(--vcg-ink); cursor: pointer; display: flex; font-size: 20px; height: 32px; justify-content: center; line-height: 1; width: 32px; }
#vcg-app .vcg-preview-modal__head button:hover, #vcg-app .vcg-preview-modal__head button:focus-visible { border-color: var(--vcg-red); color: var(--vcg-red); outline: none; }
#vcg-app .vcg-preview-modal__stage { background: #18232c; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 16px 16px; height: min(58vw,360px); max-height: 360px; min-height: 240px; overflow: hidden; position: relative; }
#vcg-app .vcg-reticle--large { transform: scale(3); }
#vcg-app .vcg-preview-modal__window > p { color: #68747a; font-size: 9px; margin: 9px 2px 0; text-align: center; }
#vcg-app .vcg-count, #vcg-app .vcg-unsaved, #vcg-app .vcg-code-valid { color: #7b858a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; letter-spacing: .08em; }
#vcg-app .vcg-unsaved, #vcg-app .vcg-code-valid { align-items: center; display: flex; gap: 8px; }
#vcg-app .vcg-section-note { color: #7b858a; font-size: 10px; margin: 8px 0 19px; }
#vcg-app .vcg-preset-tools { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
#vcg-app .vcg-filter { border: 1px solid var(--vcg-line); flex-wrap: wrap; }
#vcg-app .vcg-filter button { background: transparent; border: 0; color: #758087; cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .04em; min-width: 54px; padding: 8px 12px; }
#vcg-app .vcg-filter button + button { border-left: 1px solid var(--vcg-line); }
#vcg-app .vcg-filter button.is-active { background: var(--vcg-ink); color: #fff; }
#vcg-app .vcg-search { flex: 0 1 180px; position: relative; }
#vcg-app .vcg-search input { background: #f8f6f1; border: 1px solid var(--vcg-line); border-radius: 0; color: var(--vcg-ink); font-size: 10px; height: 34px; outline: none; padding: 0 30px 0 10px; width: 100%; }
#vcg-app .vcg-search input:focus { border-color: var(--vcg-red); }
#vcg-app .vcg-search i { border: 1px solid #7c868c; border-radius: 50%; height: 9px; pointer-events: none; position: absolute; right: 11px; top: 10px; width: 9px; }
#vcg-app .vcg-search i::after { background: #7c868c; content: ""; height: 1px; position: absolute; right: -4px; top: 8px; transform: rotate(45deg); width: 5px; }
#vcg-app .vcg-preset-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0,1fr)); }
#vcg-app .vcg-preset {
  align-items: stretch;
  background: #f8f6f1;
  border: 1px solid var(--vcg-line);
  color: var(--vcg-ink);
  cursor: pointer;
  display: grid;
  grid-template-columns: 62px 1fr;
  min-height: 72px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
#vcg-app .vcg-preset:hover, #vcg-app .vcg-preset:focus-visible { border-color: var(--vcg-red); box-shadow: 0 5px 15px rgba(16,24,32,.08); outline: none; transform: translateY(-1px); }
#vcg-app .vcg-preset.is-active { border-color: var(--vcg-red); box-shadow: inset 0 -2px var(--vcg-red); }
#vcg-app .vcg-preset--placeholder { border-color: transparent; cursor: default; pointer-events: none; visibility: hidden; }
#vcg-app .vcg-preset__visual { background: #18232c; display: grid; overflow: hidden; place-items: center; position: relative; }
#vcg-app .vcg-preset__visual::before { background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 8px 8px; content: ""; inset: 0; position: absolute; }
#vcg-app .vcg-preset__reticle { height: 0; left: 50%; position: absolute; top: 50%; width: 0; }
#vcg-app .vcg-preset__copy { min-width: 0; padding: 11px 9px; }
#vcg-app .vcg-preset__copy span { color: var(--vcg-red); display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 7px; font-weight: 900; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
#vcg-app .vcg-preset__copy strong { display: block; font-size: 10px; line-height: 1.4; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vcg-app .vcg-preset__copy small { color: #80898e; display: block; font-size: 8px; line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vcg-app .vcg-empty { background: #f8f6f1; color: #7b858a; font-size: 14px; margin: 0; padding: 22px; text-align: center; }
#vcg-app .vcg-pager { align-items: center; display: flex; gap: 5px; justify-content: center; margin-top: 18px; }
#vcg-app .vcg-pager button { align-items: center; background: #fff; border: 1px solid var(--vcg-line); color: #667178; cursor: pointer; display: inline-flex; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; font-weight: 800; height: 30px; justify-content: center; min-width: 30px; padding: 0 8px; }
#vcg-app .vcg-pager button.is-active { background: var(--vcg-ink); border-color: var(--vcg-ink); color: #fff; }
#vcg-app .vcg-pager button:hover:not(:disabled), #vcg-app .vcg-pager button:focus-visible { border-color: var(--vcg-red); color: var(--vcg-red); outline: none; }
#vcg-app .vcg-pager button.is-active:hover, #vcg-app .vcg-pager button.is-active:focus-visible { color: #fff; }
#vcg-app .vcg-pager button:disabled { cursor: not-allowed; opacity: .35; }
#vcg-app .vcg-accordion { border-top: 1px solid var(--vcg-line); margin-top: 20px; }
#vcg-app .vcg-accordion:last-child { border-bottom: 1px solid var(--vcg-line); }
#vcg-app .vcg-accordion summary { align-items: center; cursor: pointer; display: flex; font-size: 12px; font-weight: 900; justify-content: space-between; list-style: none; padding: 16px 2px; }
#vcg-app .vcg-accordion summary::-webkit-details-marker { display: none; }
#vcg-app .vcg-accordion summary b { color: var(--vcg-red); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; margin-right: 10px; }
#vcg-app .vcg-accordion summary > i { height: 12px; position: relative; width: 12px; }
#vcg-app .vcg-accordion summary > i::before, #vcg-app .vcg-accordion summary > i::after { background: var(--vcg-ink); content: ""; left: 0; position: absolute; top: 6px; height: 1px; width: 12px; }
#vcg-app .vcg-accordion summary > i::after { transform: rotate(90deg); transition: transform .15s; }
#vcg-app .vcg-accordion[open] summary > i::after { transform: rotate(0); }
#vcg-app .vcg-accordion__body { padding: 2px 2px 22px; }
#vcg-app .vcg-profile-tabs { background: #f0ede6; gap: 3px; margin: 2px 0 18px; padding: 3px; width: fit-content; }
#vcg-app .vcg-profile-tabs button { background: transparent; border: 0; color: #7b858a; cursor: pointer; font-size: 9px; font-weight: 900; padding: 7px 15px; }
#vcg-app .vcg-profile-tabs button.is-active { background: #fff; box-shadow: 0 1px 5px rgba(16,24,32,.09); color: var(--vcg-ink); }
#vcg-app .vcg-control-section + .vcg-control-section { border-top: 1px dashed var(--vcg-line); margin-top: 18px; padding-top: 18px; }
#vcg-app .vcg-control-title { align-items: center; color: #57636a; display: flex; font-size: 9px; font-weight: 900; gap: 9px; letter-spacing: .12em; margin: 0 0 12px; text-transform: uppercase; }
#vcg-app .vcg-control-title::after { background: var(--vcg-line); content: ""; flex: 1; height: 1px; }
#vcg-app .vcg-control-grid { display: grid; gap: 14px 20px; grid-template-columns: repeat(2,minmax(0,1fr)); }
#vcg-app .vcg-control { min-width: 0; }
#vcg-app .vcg-control--wide { grid-column: 1 / -1; }
#vcg-app .vcg-control__top { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 6px; min-height: 26px; }
#vcg-app .vcg-control__top label, #vcg-app .vcg-toggle-label { color: #5d696f; font-size: 10px; font-weight: 700; }
/* バーの値は読むだけの <output> ではなく数値ボックス。**バーと数値のどちらからでも動かせる。**
   以前は 9px の文字だったが、打ち込む欄なので 16px（入力欄の段）・高さ 26px にした（17 節の上書きも同じ値）。 */
#vcg-app input.vcg-control__value { background: #fff; border: 1px solid var(--vcg-line); border-radius: 0; color: var(--vcg-ink); flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; font-weight: 800; height: 26px; padding: 0 2px 0 6px; text-align: right; width: 74px; }
#vcg-app input.vcg-control__value:focus { border-color: var(--vcg-red); outline: none; }
#vcg-app input.vcg-control__value:focus-visible { border-color: var(--vcg-red); outline: 2px solid var(--vcg-red); outline-offset: 1px; }
#vcg-app .vcg-control select { appearance: none; background: #f8f6f1 linear-gradient(45deg,transparent 50%,#6f797f 50%) calc(100% - 12px) 14px/4px 4px no-repeat; border: 1px solid var(--vcg-line); border-radius: 0; color: var(--vcg-ink); font-size: 10px; height: 34px; outline: none; padding: 0 28px 0 10px; width: 100%; }
#vcg-app .vcg-control select:focus { border-color: var(--vcg-red); }
#vcg-app .vcg-color-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 1fr 42px; }
#vcg-app .vcg-color-row input[type="color"] { background: #fff; border: 1px solid var(--vcg-line); cursor: pointer; height: 34px; padding: 3px; width: 42px; }
#vcg-app .vcg-toggle-control { align-items: center; display: flex; justify-content: space-between; min-height: 34px; }
#vcg-app .vcg-switch { cursor: pointer; display: inline-flex; flex: none; position: relative; }
#vcg-app .vcg-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
#vcg-app .vcg-switch span { background: #c7cdcf; display: block; height: 18px; position: relative; transition: background .15s; width: 34px; }
#vcg-app .vcg-switch span::after { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); content: ""; height: 14px; left: 2px; position: absolute; top: 2px; transition: transform .15s; width: 14px; }
#vcg-app .vcg-switch input:checked + span { background: var(--vcg-red); }
#vcg-app .vcg-switch input:checked + span::after { transform: translateX(16px); }
#vcg-app .vcg-switch input:focus-visible + span { outline: 2px solid var(--vcg-cyan); outline-offset: 2px; }
#vcg-app .vcg-control.is-disabled { opacity: .38; pointer-events: none; }
#vcg-app .vcg-code textarea {
  background: var(--vcg-ink-2);
  border: 1px solid #263641;
  border-left: 3px solid var(--vcg-red);
  border-radius: 0;
  color: #e8edef;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.75;
  margin-top: 7px;
  min-height: 116px;
  outline: none;
  padding: 15px;
  resize: vertical;
  width: 100%;
}
#vcg-app .vcg-code textarea:focus { border-color: var(--vcg-cyan); border-left-color: var(--vcg-red); box-shadow: 0 0 0 2px rgba(72,230,223,.12); }
#vcg-app .vcg-code textarea.is-error { border-color: var(--vcg-red); }
#vcg-app .vcg-code-label { color: #6c777d; display: block; font-size: 9px; font-weight: 900; letter-spacing: .06em; margin-top: 19px; text-transform: uppercase; }
#vcg-app .vcg-code-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 12px; }
#vcg-app .vcg-button { align-items: center; border: 1px solid var(--vcg-ink); cursor: pointer; display: flex; font-size: 10px; font-weight: 900; justify-content: space-between; min-height: 42px; padding: 0 15px; position: relative; }
#vcg-app .vcg-button--primary { background: var(--vcg-red); border-color: var(--vcg-red); color: #fff; }
#vcg-app .vcg-button--secondary { background: transparent; color: var(--vcg-ink); }
#vcg-app .vcg-button:hover, #vcg-app .vcg-button:focus-visible { box-shadow: inset 0 -3px rgba(0,0,0,.2); outline: none; }
#vcg-app .vcg-button b { font-size: 15px; font-weight: 400; }
#vcg-app .vcg-code-message { color: #7c868b; font-size: 9px; margin: 9px 0 0; }
#vcg-app .vcg-code-message.is-error { color: #d92f40; font-weight: 700; }
#vcg-app .vcg-code-message.is-success { color: #187a70; font-weight: 700; }
#vcg-app .vcg-code-valid.is-error { color: #d92f40; }
#vcg-app .vcg-code-valid.is-error i { background: var(--vcg-red); box-shadow: 0 0 0 4px rgba(255,70,85,.12); }
#vcg-app .vcg-tip { align-items: center; background: #f3f0e9; border-left: 2px solid var(--vcg-cyan); display: flex; gap: 12px; margin-top: 18px; padding: 12px 14px; }
#vcg-app .vcg-tip > span { align-items: center; border: 1px solid #879196; border-radius: 50%; color: #68747a; display: flex; flex: none; font-family: Georgia,serif; font-size: 10px; font-style: italic; height: 18px; justify-content: center; width: 18px; }
#vcg-app .vcg-tip p { color: #6e797f; font-size: 9px; line-height: 1.6; margin: 0; }
#vcg-app .vcg-tip strong { color: var(--vcg-ink); display: block; font-size: 10px; }
#vcg-app .vcg-sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
#vcg-app [hidden] { display: none !important; }
@container vcg-shell (max-width: 980px) {
  #vcg-app .vcg-workspace { grid-template-columns: minmax(0,1fr); }
  #vcg-app .vcg-preview-panel { justify-self: center; position: sticky; top: var(--vcg-sticky-offset); width: min(369px,100%); }
}
@container vcg-shell (max-width: 720px) {
  #vcg-app .vcg-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  #vcg-app .vcg-workspace { grid-template-columns: 1fr; }
  #vcg-app .vcg-preview-panel { justify-self: center; position: sticky; top: var(--vcg-sticky-offset); width: min(369px,100%); }
  #vcg-app .vcg-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  #vcg-app { --vcg-sticky-offset: calc(var(--logo_size_sp, 48px) + var(--swl-adminbarH, 0px) + 2px); }
  #vcg-app .vcg-workspace { padding: 18px 10px 34px; }
  #vcg-app .vcg-preview-panel { grid-template-columns: 132px minmax(0,1fr); height: 132px; padding: 0; }
  #vcg-app .vcg-card { padding: 17px; }
  #vcg-app .vcg-stage { height: 132px; }
  #vcg-app .vcg-preset-tools { align-items: stretch; flex-direction: column; }
  #vcg-app .vcg-filter { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; }
  #vcg-app .vcg-filter button { min-width: 0; padding: 8px 2px; white-space: nowrap; }
  #vcg-app .vcg-search { flex-basis: auto; }
  #vcg-app .vcg-preset-grid { grid-template-columns: 1fr; }
  #vcg-app .vcg-control-grid, #vcg-app .vcg-code-actions { grid-template-columns: 1fr; }
  #vcg-app .vcg-control--wide { grid-column: auto; }
  #vcg-app .vcg-preview-modal { padding: 10px; }
  #vcg-app .vcg-preview-modal__stage { min-height: 210px; }
  #vcg-app .vcg-reticle--large { transform: scale(2.5); }
}
@media (prefers-reduced-motion: reduce) {
  #vcg-app *, #vcg-app *::before, #vcg-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}