@charset "UTF-8";

/* =================================================================
   テーマ情報
   ================================================================= */
/*
    Template: swell
    Theme Name: SWELL FORK
    Theme URI: https://swell-theme.com/
    Description: SWELL fork custom style
    Version: 2.0.1
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =================================================================
   CLS防止: Noto Sans JP フォールバック調整
   フォントスワップ時のテキストリフローを最小化する
   ================================================================= */
@font-face {
  font-family: "Noto Sans JP Fallback";
  src: local("Hiragino Kaku Gothic ProN"), local("Hiragino Sans"),
       local("Yu Gothic Medium"), local("Yu Gothic"),
       local("Meiryo"), local("sans-serif");
  size-adjust: 100%;
  ascent-override: 97%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* =================================================================
   CSS変数 - デザイントークン
   =================================================================
   日本語可読性最適化 - 科学的根拠に基づく設計
   - 基本文字サイズ: 17px（サッケード負荷軽減の最適解）
   - 行間: 1.85（認知負荷低減）
   - 字間: 0.025em（palt使用時の最適バランス）
   - 行長: 35-40文字（約40em）
   - palt: 和文の均等配置を解消し自然な詰めを実現
   ================================================================= */
:root {
  /* SWELLカスタマイザーの背景色に追従 */
  --nettoge-page-bg: var(--color_bg, #ffffff);

  /* フォントスタック（CLS防止フォールバック付き） */
  --font-sans: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;
  --font-sans-base: var(--font-sans);
  --font-heading: "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif;

  /* タイポグラフィ - 日本語可読性最適化 */
  --jp-font-size: 17px;
  --base-font-size: 16px;
  --jp-line-height: 1.85;
  --jp-letter-spacing: 0.025em;

  /* テキスト色は SWELL 本体変数を利用 */

  /* セマンティック強調色（WCAG AA 4.5:1以上確保） */
  --color-step: #4b5563;
  --color-reason: #525252;
  --color-warn: #3f3f46;
  --color-tip: #5b5b5b;
  --color-success: #4f4f4f;

  /* 背景色バリエーション（強調用・薄い色） */
  --color-step-bg: #f3f4f6;
  --color-reason-bg: #f5f5f5;
  --color-warn-bg: #f6f6f6;
  --color-tip-bg: #f4f4f5;
  --color-success-bg: #f7f7f7;
  --surface-table-header: var(--nettoge-page-bg);
  --surface-table-row-odd: var(--nettoge-page-bg);
  --surface-table-row-even: var(--nettoge-page-bg);
  --border-table-row: #e0ddd6;
  --border-table-header-divider: #c8c4bc;
  --surface-floating-header: var(--nettoge-page-bg);
  --surface-header: var(--nettoge-page-bg);
  --surface-footer: var(--nettoge-page-bg);
  --surface-widget-title: var(--nettoge-page-bg);
  --brand-terracotta: #6b6b6b;
  --brand-terracotta-dark: #4f4f4f;
  --surface-toc-active: #ececec;
  --toc-active-text: #404040;
  --surface-comment-panel: var(--nettoge-page-bg);
  --surface-comment-input: #ffffff;
  --surface-comment-toolbar: #f2f2f2;
  --surface-comment-popover: #f6f6f6;
  --border-comment: #e0ddd6;
  --text-comment-muted: #6b7280;
  --surface-inline-code-bg: var(--nettoge-page-bg);
  --text-inline-code: #404040;
  --border-form-input: #c8c4bc;
  --text-form-placeholder: #a8a39d;
  --surface-form-error: #fff8f7;
  --border-form-error: #b91c1c;
  --text-form-error: #b91c1c;
  --surface-form-disabled: var(--nettoge-page-bg);
  --border-form-disabled: #e0ddd6;
  --text-form-disabled: #a8a39d;
  --scrollbar-track: var(--nettoge-page-bg);
  --scrollbar-thumb: #c8c4bc;
  --scrollbar-thumb-hover: #6b6b6b;
  --toc-subtext: #6b6560;
  --surface-blogcard: #ffffff;
  --border-blogcard: #e0ddd6;
  --border-blogcard-hover: #6b6b6b;
  --blogcard-external-domain: #a8a39d;
  --blogcard-badge-bg: var(--nettoge-page-bg);

  /* App Buttons Layout */
  --columns: 1fr;
  --gap: 1.5rem;
}

/* =================================================================
   基本タイポグラフィ
   - Noto Sans JP: Google Fonts経由で読み込み（inc/assets.php）
   ================================================================= */
html {
  font-size: var(--base-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-y: scroll;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--base-font-size);
  color: var(--color_text);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jp-body,
.post_content,
.entry-content {
  font-size: var(--jp-font-size);
  font-weight: 400;
  line-height: var(--jp-line-height);
  letter-spacing: var(--jp-letter-spacing);
  font-feature-settings: "palt" 1;
}

a {
  color: var(--color_link, inherit);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* ボタン内アイコンは文字色に追従（黒固定を防止） */
.post_content .swell-block-button__link .__icon,
.entry-content .swell-block-button__link .__icon {
  fill: currentColor;
  color: currentColor;
}

.post_content .swell-block-button__link .__icon path,
.entry-content .swell-block-button__link .__icon path {
  fill: currentColor;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* =================================================================
   アクセシビリティ: コントラストとリンク識別性
   ================================================================= */
/* 記事本文内リンクは常時下線を表示して識別可能にする */
.post_content a:not(.swell-block-button__link):not(.wp-block-button__link):not([class*="btn"]),
.entry-content a:not(.swell-block-button__link):not(.wp-block-button__link):not([class*="btn"]) {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, background-color 0.2s ease, text-decoration-thickness 0.2s ease;
}

/* ホバー/フォーカス時は下線以外の視覚効果を追加 */
.post_content a:not(.swell-block-button__link):not(.wp-block-button__link):not([class*="btn"]):hover,
.entry-content a:not(.swell-block-button__link):not(.wp-block-button__link):not([class*="btn"]):hover,
.post_content a:not(.swell-block-button__link):not(.wp-block-button__link):not([class*="btn"]):focus-visible,
.entry-content a:not(.swell-block-button__link):not(.wp-block-button__link):not([class*="btn"]):focus-visible {
  text-decoration-thickness: 2px;
  background-color: rgba(107, 114, 128, 0.16);
}

/* SWELLのインライン色が薄すぎるケースを補正 */
.l-mainContent .swl-inline-color.has-swl-deep-01-color,
.post_content .swl-inline-color.has-swl-deep-01-color,
.entry-content .swl-inline-color.has-swl-deep-01-color {
  color: var(--color_htag, var(--color_text));
}

/* 英語フォント適用範囲強化（SWELL独自ブロック & 自作プラグイン） */
body :is(
  [class^="wp-block-swell-"],
  [class*=" wp-block-swell-"],
  [class*="swell-block-"],
  .swell-block,
  .nexus-card,
  .nmc,
  .etb-wrapper,
  .etb-guide,
  .inline-gallery-lightbox,
  #igl-lightbox-root,
  .igl-lightbox,
  .twentytwenty-container,
  .ics-toggle-container,
  .ics-toggle-actions,
  .isr-spoiler,
  .isr-block,
  .game-mod-block,
  .game-mod-title,
  .ng-stepper,
  .ng-stepper__header,
  .ant-container,
  .article-nav-tooltip,
  .nexus-mods-card,
  .swell-block-step
) {
  font-family: var(--font-sans-base);
}

body
  :is(
    [class^="wp-block-swell-"],
    [class*=" wp-block-swell-"],
    [class*="swell-block-"],
    .swell-block,
    .nexus-card,
    .nmc,
    .etb-wrapper,
    .etb-guide,
    .inline-gallery-lightbox,
    #igl-lightbox-root,
    .igl-lightbox,
    .twentytwenty-container,
    .ics-toggle-container,
    .ics-toggle-actions,
    .isr-spoiler,
    .isr-block,
    .game-mod-block,
    .game-mod-title,
    .ng-stepper,
    .ng-stepper__header,
    .ant-container,
    .article-nav-tooltip,
    .nexus-mods-card,
    .swell-block-step
  )
  :where(
    :not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-duotone):not([class*="fa-"]):not(.fa-brands):not(.etb-icon)
  ) {
  font-family: var(--font-sans-base);
}

p,
ul,
ol,
dl,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  margin-top: 2em;
  margin-bottom: 0.8em;
}

h1 { font-size: 2rem; line-height: 1.3; }
h2 { font-size: 1.6rem; line-height: 1.35; }
h3 { font-size: 1.3rem; line-height: 1.35; }
h4 { font-size: 1.15rem; line-height: 1.35; }
h5 { font-size: 1.05rem; line-height: 1.35; margin-top: 1.5em; margin-bottom: 0.5em; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =================================================================
   記事本文 - タイポグラフィ
   ================================================================= */
.post_content,
.entry-content {
    font-size: 1rem;
    line-height: var(--line-height-base, 1.85);
    letter-spacing: var(--letter-spacing-base, 0.025em);
    font-feature-settings: "palt" 1;
    hyphens: none;
    overflow-wrap: break-word;
    word-break: normal;
    counter-reset: section-h2;
}

.post_content > p,
.entry-content > p {
    margin-bottom: 1.5em;
    text-indent: 0;
}

.post_content p:not([class*="has-text-align"]),
.entry-content p:not([class*="has-text-align"]) {
    text-align: left;
    orphans: 2;
    widows: 2;
}

.post_content li {
    line-height: 1.6;
    margin: 0.4em 0;
    position: relative;
}

.post_content hr {
  border: 0;
  border-top: 3px double #8c8c8c;
}

.post_content > * { clear: none; }

/* --- 画像回り込み --- */
.post_content .tright,
.entry-content .tright {
  float: right; margin: 0 0 1rem 1rem; width: 320px; max-width: 50%;
}

.post_content .tleft,
.entry-content .tleft {
  float: left; margin: 0 1rem 1rem 0; width: 320px; max-width: 50%;
}

.post_content .mw-clear,
.entry-content .mw-clear { clear: both; }

/* --- Game-Mod-block 余白 --- */
.game-mod-block :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote) {
  margin-block-start: revert;
  margin-block-end: revert;
}

.wp-block-game-mod-block-main.game-mod-block {
  margin-block-end: var(--wp--style--block-gap, 1.5rem);
}

/* =================================================================
   セマンティック強調スタイル（WCAG AA 4.5:1以上確保）
   ================================================================= */
.post_content .step-highlight,
.entry-content .step-highlight,
.post_content .is-style-step,
.entry-content .is-style-step {
    color: var(--color-step);
    font-weight: 600;
}

.post_content .step-box,
.entry-content .step-box {
    background-color: var(--color-step-bg);
    border-left: 4px solid var(--color-step);
    padding: 1em 1.25em;
    margin: 1.5em 0;
    border-radius: 0 4px 4px 0;
}

.post_content .reason-highlight,
.entry-content .reason-highlight,
.post_content .is-style-reason,
.entry-content .is-style-reason {
    color: var(--color-reason);
    font-weight: 600;
}

.post_content .reason-box,
.entry-content .reason-box {
    background-color: var(--color-reason-bg);
    border-left: 4px solid var(--color-reason);
    padding: 1em 1.25em;
    margin: 1.5em 0;
    border-radius: 0 4px 4px 0;
}

.post_content .warn-highlight,
.entry-content .warn-highlight,
.post_content .is-style-warn,
.entry-content .is-style-warn {
    color: var(--color-warn);
    font-weight: 600;
}

.post_content .warn-box,
.entry-content .warn-box {
    background-color: var(--color-warn-bg);
    border-left: 4px solid var(--color-warn);
    padding: 1em 1.25em;
    margin: 1.5em 0;
    border-radius: 0 4px 4px 0;
}

.post_content .tip-highlight,
.entry-content .tip-highlight,
.post_content .is-style-tip,
.entry-content .is-style-tip {
    color: var(--color-tip);
    font-weight: 600;
}

.post_content .tip-box,
.entry-content .tip-box {
    background-color: var(--color-tip-bg);
    border-left: 4px solid var(--color-tip);
    padding: 1em 1.25em;
    margin: 1.5em 0;
    border-radius: 0 4px 4px 0;
}

.post_content .success-highlight,
.entry-content .success-highlight,
.post_content .is-style-success,
.entry-content .is-style-success {
    color: var(--color-success);
    font-weight: 600;
}

.post_content .success-box,
.entry-content .success-box {
    background-color: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    padding: 1em 1.25em;
    margin: 1.5em 0;
    border-radius: 0 4px 4px 0;
}

/* =================================================================
   見出し装飾: Tech & Label（Gray Scale）
   - H2: Numbered Label + Strong Underline
   - H3: シンプル（SWELL親テーマリセット）
   - H4: Underlined Heading
   - H5: Standard Subheading
   ================================================================= */

/* H2 - 連番バッジ + 下線 */
.post_content h2,
.entry-content h2 {
    font-family: var(--font-heading);
    color: var(--color_text);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.4;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 1rem;
    margin: 3em 0 1.5em;
    padding: 0 0 4px 0;
    padding-left: 0;
    border-bottom: 2px solid var(--color_htag, var(--color_text));
}

.post_content h2::before,
.entry-content h2::before {
    counter-increment: section-h2;
    content: counter(section-h2, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    background: var(--color_htag, var(--color_text));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    padding: 4px 8px;
    margin-top: 0.375rem;
    border-radius: 4px;
    flex-shrink: 0;
    margin-right: 0;
    position: static;
    left: auto;
    top: auto;
    transform: none;
}

/* テキスト揃え対応:
   H2 は display:flex のため text-align が効かない → justify-content で対応
   H4 は display:inline-block → text-align は内部テキストに効くが、要素自体の配置は親に依存 */
.post_content h2.has-text-align-center,
.entry-content h2.has-text-align-center {
    justify-content: center;
}
.post_content h2.has-text-align-right,
.entry-content h2.has-text-align-right {
    justify-content: flex-end;
}

/* H3 - シンプル（親テーマの装飾をリセット） */
.post_content h3,
.entry-content h3 {
  font-family: var(--font-heading);
  margin: 2em 0 0.8em;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color_text);
}

/* H4 - アンダーライン */
.post_content h4,
.entry-content h4 {
    font-family: var(--font-heading);
    position: relative;
    display: inline-block;
    margin: 2.1em 0 1em;
    padding: 0;
    padding-bottom: 0.5rem;
    color: var(--color_text);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    letter-spacing: 0;
    text-transform: none;
}

.post_content h4::after,
.entry-content h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--color_text);
    border-radius: 0;
}

.post_content h4::before,
.entry-content h4::before {
    content: none;
}

/* H5 - サブ見出し */
.post_content h5,
.entry-content h5 {
    color: var(--color_htag, var(--color_text));
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 1.5em 0 0.5em;
    padding-left: 0;
    background: none;
    border: 0;
}

/* H6 - 小見出し（* マーク付き） */
.post_content h6 {
  margin: 1em 0 .5em;
  position: relative;
  padding-left: 1.5em;
  line-height: 1.4;
}

.post_content h6::before {
  content: "*";
  color: var(--color_main);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* --- 見出し装飾の例外 --- */

/* Nexusカード内部では装飾なし */
.nexus-card.nmc h1,
.nexus-card.nmc h2,
.nexus-card.nmc h3,
.nexus-card.nmc h4,
.nexus-card.nmc h5,
.nexus-card.nmc h6 {
  background: none;
  border: 0;
  padding-left: 0;
  position: static;
  margin: 0;
  line-height: inherit;
}

.nexus-card.nmc h1::before,
.nexus-card.nmc h2::before,
.nexus-card.nmc h3::before,
.nexus-card.nmc h4::before,
.nexus-card.nmc h5::before,
.nexus-card.nmc h6::before {
  content: none;
}

/* SWELLアコーディオンのタイトルは装飾なし */
.swell-block-accordion__title h1,
.swell-block-accordion__title h2,
.swell-block-accordion__title h3,
.swell-block-accordion__title h4,
.swell-block-accordion__title h5,
.swell-block-accordion__title h6 {
  all: unset;
  display: inline;
  font-size: inherit;
  font-weight: inherit;
}

/* =================================================================
   レイアウト - 全体
   ================================================================= */
.l-body,
body,
.l-wrapper {
    background: var(--nettoge-page-bg);
}

.l-topTitleArea {
    min-height: 50px;
}

body:not(.admin-bar) .l-fixHeader {
    margin-top: 0;
}

.admin-bar .l-fixHeader {
    margin-top: var(--swl-adminbarH, 32px);
}

input::placeholder {
    color: var(--text-form-placeholder);
}

.-frame-on .l-mainContent {
    background: var(--nettoge-page-bg);
    border-radius: var(--swl-radius--4, 0);
    padding: 0px;
}

.l-content {
    box-sizing: border-box !important;
    padding-top: 0em;
}

.l-container {
    box-sizing: border-box !important;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.container {
  flex: 1 1 calc(50% - 5px);
  box-sizing: border-box;
}

.p-breadcrumb__list {
    color: var(--header-text-color);
}

.footer-links {
    text-align: center;
    margin-top: 10px;
}

/* =================================================================
   レイアウト - パンくず（メインカラム内）
   ================================================================= */
#breadcrumb.p-breadcrumb {
    padding: 4px 0 8px 0;
    font-size: 12px;
    margin: 0 0 8px 0;
}

#breadcrumb.p-breadcrumb .p-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    max-width: none;
    width: auto;
    margin: 0;
    list-style: none;
    gap: 0;
}

#breadcrumb.p-breadcrumb .p-breadcrumb__item {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

#breadcrumb.p-breadcrumb .p-breadcrumb__item::after {
    content: ">";
    margin: 0 0.5em;
    color: #999;
}

#breadcrumb.p-breadcrumb .p-breadcrumb__item:last-child::after {
    content: none;
}

.-frame-on #breadcrumb.p-breadcrumb,
#breadcrumb.p-breadcrumb:not(.-bg-on) {
    padding-top: 4px;
    padding-bottom: 8px;
    background: none;
    border: none;
    box-shadow: none;
}

/* =================================================================
   レイアウト - タイトル
   ================================================================= */
.c-postTitle__ttl,
.c-pageTitle,
.l-topTitleArea__body .c-postTitle__ttl,
.l-topTitleArea__body .c-pageTitle {
    text-shadow:
        1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 0 0 #fff,
        -1px 0 0 #fff,
        0 1px 0 #fff,
        0 -1px 0 #fff;
}

body .l-mainContent .c-pageTitle__inner {
    padding-top: 0;
}

body .l-mainContent .p-termContent {
    margin-top: 1.5em;
}

body .l-mainContent .p-termHead {
    margin-top: 1em;
}

.p-articleHeader {
    margin: 0;
    padding-top: 0.25em;
    padding-bottom: 1em;
}

.c-postTitle__inner {
    padding-top: 0;
    padding-bottom: 0;
}

.c-postTitle__ttl {
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding: 0 var(--swl-pad_post_content, 0);
}

/* =================================================================
   レイアウト - ヘッダー・ナビゲーション
   ================================================================= */

/* CLS防止: ヘッダー領域の高さを事前確保 */
.l-header {
    contain: layout style;
    background: var(--surface-header);
}

.l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto !important;
    min-height: 60px;
    padding: 8px 16px;
}

#fix_header .l-fixHeader__inner.l-container {
    z-index: 101;
}

.l-header__additional-menu {
  width: 100%;
  box-sizing: border-box;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 20px;
  overflow-x: clip;
  position: relative;
  z-index: 100;
  min-height: 36px; /* CLS防止: gnav高さ事前確保 */
  contain: layout style;
}

.l-header__additional-menu > .l-header__gnav {
  display: flex;
  justify-content: flex-start;
}

/* --- グローバルナビゲーション (.c-gnav) --- */
body .l-header__gnav .c-gnav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

body .l-header__gnav .c-gnav > li.menu-item {
  position: relative;
}

body .l-header__gnav .c-gnav > li.menu-item > a {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

body .l-header__gnav .c-gnav .c-submenuToggleBtn {
  display: none;
}

/* サブメニュー（ドロップダウン） */
body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  z-index: 9999;
  width: auto;
  min-width: 140px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--surface-header);
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0.15s;
}

.l-footer,
.l-footer__widgetArea,
.l-footer__foot {
  background-color: var(--nettoge-page-bg);
}

body .l-header__gnav .c-gnav > li.menu-item:hover > ul.sub-menu {
  visibility: visible;
  opacity: 1;
}

body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item {
  display: block;
  width: 100%;
}

body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a:hover {
  background: var(--nettoge-page-bg);
}

body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a::before {
  display: none;
}

/* SPメニュー */
.p-spMenu__inner {
    transition: transform .05s, -webkit-transform .05s;
    box-shadow: 0 0 8px var(--swl-color_shadow);
    height: 100%;
    padding-top: var(--logo_size_sp);
    position: absolute;
    top: 0;
    transition-timing-function: ease-out;
    width: 88vw;
    z-index: 1;
}

/* =================================================================
   レイアウト - サイドバー・ウィジェット
   ================================================================= */

/* --- タイトル --- */
body #sidebar .c-widget__title.-side {
    text-align: left;
    padding: .6em 1em;
    border: none;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.75em;
    background-color: var(--nettoge-page-bg);
    border-top: 1px solid #e0ddd6;
    border-left: 3px solid var(--brand-terracotta);
}

body #sidebar .c-widget__title.-side::before,
body #sidebar .c-widget__title.-side::after {
    content: none;
    display: none;
}

body #sidebar .widget-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin-right: .45em;
    color: #888;
    vertical-align: -0.08em;
}

body #sidebar .widget-title-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

/* --- ウィジェット共通 --- */
body #sidebar .c-widget {
    margin-top: .6em;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color_text);
}

body #sidebar .c-widget:first-child {
    margin-top: 0;
}

body #sidebar .c-widget__title.-side.wp-block-heading {
    margin-top: 0;
}

/* --- 新着記事 (wp-block-latest-posts) --- */
body #sidebar .wp-block-latest-posts {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

body #sidebar .wp-block-latest-posts__post-title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
}

body #sidebar .wp-block-latest-posts li {
    padding: 0.5em 0.75em;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

body #sidebar .wp-block-latest-posts li:last-child {
    border-bottom: none;
}

body #sidebar .wp-block-latest-posts__post-date,
body #sidebar .wp-block-latest-posts__post-author {
    font-size: 0.6875rem;
    color: var(--color_text);
    margin-top: 0.2em;
    display: block;
}

/* --- 最近のコメント (wp-block-latest-comments) --- */
body #sidebar .wp-block-latest-comments {
    padding-left: 0;
    margin: 0;
}

body #sidebar .wp-block-latest-comments__comment {
    padding: 0.5em 0.75em;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

body #sidebar .wp-block-latest-comments__comment:last-child {
    border-bottom: none;
}

body #sidebar .wp-block-latest-comments__comment-author {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color_text);
}

body #sidebar .wp-block-latest-comments__comment-meta {
    font-size: 0.75rem;
    line-height: 1.5;
}

body #sidebar .wp-block-latest-comments__comment-date {
    font-size: 0.6875rem;
    color: var(--color_text);
}

/* --- カテゴリ / アーカイブ / その他リスト系ウィジェット --- */
body #sidebar .wp-block-categories,
body #sidebar .wp-block-archives,
body #sidebar .wp-block-page-list {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

body #sidebar .wp-block-categories li,
body #sidebar .wp-block-archives li,
body #sidebar .wp-block-page-list li {
    padding: 0.4em 0.75em;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8125rem;
}

body #sidebar .wp-block-categories li:last-child,
body #sidebar .wp-block-archives li:last-child,
body #sidebar .wp-block-page-list li:last-child {
    border-bottom: none;
}

/* --- 検索ウィジェット --- */
body #sidebar .wp-block-search__input {
    font-size: 0.8125rem;
    padding: 0.5em 0.75em;
}

body #sidebar .wp-block-search__button {
    font-size: 0.8125rem;
    padding: 0.5em 1em;
}

/* --- 目次（親テーマの負マージンを打ち消し） --- */
#sidebar .p-toc {
    margin-top: 0;
}

/* =================================================================
   SVGロゴ
   ================================================================= */
.nettoge-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0;
}

.nettoge-logo__link {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.nettoge-svg-logo {
    display: block;
    width: auto;
    max-width: 500px;
    height: 50px;
}

#fix_header .nettoge-svg-logo,
.l-fixHeader .nettoge-svg-logo {
    max-width: 280px;
    height: 36px;
}

.l-header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0;
}

.l-header__logo h1.c-headLogo,
.l-header__logo .c-headLogo {
    font-size: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* =================================================================
   コンポーネント - アコーディオン
   ================================================================= */

/* 汎用アコーディオン */
.accordion {
    margin: 10px 0;
    border: 1px solid #ccc;
}

.accordion-header {
    background-color: var(--nettoge-page-bg);
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.accordion-header .fa {
    margin-right: 5px;
}

.accordion-content {
    display: none;
    padding: 10px;
    background-color: var(--nettoge-page-bg);
}

.accordion-content.active {
    display: block;
}

/* コメント用アコーディオン */
.nettoge-comment-accordion {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.nettoge-accordion-toggle {
    font-size: 12px;
    background-color: var(--nettoge-page-bg);
    color: #333;
    cursor: pointer;
    padding: 12px 15px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.3s;
    font-weight: bold;
}

.nettoge-accordion-toggle:hover,
.nettoge-accordion-toggle.nettoge-active {
    background-color: var(--nettoge-page-bg);
}

.nettoge-accordion-toggle:after {
    content: "\002B";
    float: right;
    margin-left: 5px;
}

.nettoge-accordion-toggle.nettoge-active:after {
    content: "\2212";
}

.nettoge-accordion-content {
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.nettoge-accordion-inner {
    padding: 15px;
    font-size: 11px;
}

.nettoge-accordion-close {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--nettoge-page-bg);
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 11px;
}

.nettoge-accordion-close:hover {
    background-color: var(--nettoge-page-bg);
}

/* ETB内のSWELLアコーディオン修正 */
.etb-details-inner .swell-block-accordion__body {
    height: auto !important;
    overflow: visible;
}

.etb-details-inner .swell-block-accordion__item.is-opened > .swell-block-accordion__body,
.etb-details-inner .swell-block-accordion__item[open] > .swell-block-accordion__body {
    height: auto !important;
    opacity: 1 !important;
    padding: 1em !important;
    visibility: visible !important;
    overflow: visible !important;
}

.etb-details-inner .swell-block-accordion__item:not(.is-opened):not([open]) > .swell-block-accordion__body {
    height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    visibility: hidden;
    overflow: hidden;
}

/* =================================================================
   SWELLアコーディオン: 先読み（ぼかし）スタイル
   
   PHPでHTMLを分割:
   - 抜粋部分: そのまま表示
   - .swell-block-accordion__hidden: 隠し部分（初期非表示）
   - 展開時に hidden を表示、ぼかしを解除
   ================================================================= */

/* body の基本設定 */
.swell-block-accordion__item.is-teaser-ready > .swell-block-accordion__body {
    position: relative;
    overflow: hidden;
    padding-bottom: 3.2em;
}

/* 隠し部分: 初期状態では非表示 */
.swell-block-accordion__item.is-teaser-ready .swell-block-accordion__hidden {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* 展開時: 隠し部分を表示 */
.swell-block-accordion__item.is-teaser-ready.is-teaser-expanded .swell-block-accordion__hidden {
    display: block;
    opacity: 1;
}

/* ぼかしオーバーレイ: 抜粋部分の下半分にグラデーション */
.swell-block-accordion__item.is-teaser-ready > .swell-block-accordion__body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 15%,
        rgba(255, 255, 255, 0.35) 40%,
        rgba(255, 255, 255, 0.7) 65%,
        rgba(255, 255, 255, 0.92) 85%,
        rgba(255, 255, 255, 1) 100%
    );
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 100%);
    opacity: 1;
    transition: opacity 0.4s ease-out, height 0.4s ease-out;
}

/* 展開時: ぼかし解除、padding調整 */
.swell-block-accordion__item.is-teaser-ready.is-teaser-expanded > .swell-block-accordion__body {
    padding-bottom: 1em;
}

.swell-block-accordion__item.is-teaser-ready.is-teaser-expanded > .swell-block-accordion__body::after {
    opacity: 0;
    height: 0;
    pointer-events: none;
}

/* 続きを見るボタン */
.swell-block-accordion__item.is-teaser-ready > .swell-block-accordion__body > .swell-block-accordion__teaserBtn {
    position: absolute;
    left: 50%;
    bottom: 0.6em;
    transform: translateX(-50%);
    z-index: 2;
    border: 1px solid var(--color_border, #ddd);
    background: rgba(255, 255, 255, 0.96);
    color: var(--color_text, #333);
    border-radius: 999px;
    padding: 0.5em 1.5em;
    font-size: 0.88em;
    line-height: 1.3;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.swell-block-accordion__item.is-teaser-ready > .swell-block-accordion__body > .swell-block-accordion__teaserBtn:hover {
    background: var(--nettoge-page-bg);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* 展開時はボタン非表示 */
.swell-block-accordion__item.is-teaser-ready.is-teaser-expanded > .swell-block-accordion__body > .swell-block-accordion__teaserBtn {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

/* =================================================================
   コンポーネント - コメントエリア・フォーム
   ================================================================= */
.-body-solid .p-commentArea,
.p-commentArea {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--jp-font-size);
}

.c-commentList {
    list-style-type: none;
    padding: 0;
}

.c-commentList li {
    margin-bottom: 20px;
}

.c-commentList .children {
    border-left: 2px solid var(--border-comment);
    margin-left: 0.5em;
    margin-top: 1em;
    padding: 0.3em 0 0 0.2em;
}

.comment-body {
    padding-left: 3px;
    font-size: var(--jp-font-size);
}

.comment-meta {
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
}

.comment-number {
    margin-right: 5px;
}

.comment-author-name.comment-author-regular {
    color: #166534;
    font-style: italic;
}

.comment-author-name.comment-author-admin {
    color: #b91c1c;
    font-style: normal;
}

.comment-date,
.comment-id {
    white-space: nowrap;
}

.comment-content {
    margin-top: 5px;
    margin-left: 20px;
}

.comment-content,
.comment-content > * {
    font-size: var(--jp-font-size);
    line-height: var(--jp-line-height);
}

/* 返信ボタン - W7スタイル */
.comment-reply-link {
    margin-left: auto;
    display: inline-block;
    background: var(--w7-el-grad, linear-gradient(#f2f2f2 45%, #ebebeb 45%, #cfcfcf));
    border: 1px solid var(--w7-el-bd, #8e8f8f);
    border-radius: 0;
    box-shadow: var(--w7-el-sd, inset 0 0 0 1px #fffc);
    color: #222;
    font-size: 0.75rem;
    padding: 2px 8px;
    text-decoration: none;
    cursor: pointer;
    transition: none;
}

.comment-reply-link:hover {
    border-color: var(--w7-el-bd-h, #3c7fb1);
    background: var(--w7-el-grad-h, linear-gradient(#eaf6fd 45%, #bee6fd 0, #a7d9f5));
    color: #222;
}

.comment-reply-link:active {
    border-color: var(--w7-el-bd-a, #6d91ab);
    background: var(--w7-el-grad-a, linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db));
    box-shadow: var(--w7-el-sd-a, inset 1px 1px 0 #0003, inset -1px 1px 0 #0001);
}

/* コメント投稿フォーム（ミニマル・モノトーン） */
.comment-form {
  padding: 2rem;
  margin-top: 2rem;
}

.comment-form .form-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color_htag, var(--color_text));
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color_htag, var(--color_text));
}

.comment-form .logged-in-as {
  font-size: 0.8rem;
  color: var(--text-comment-muted);
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-comment-input);
  border-left: 3px solid var(--color_htag, var(--color_text));
}

.comment-form .logged-in-as a {
  color: var(--color_htag, var(--color_text));
  font-weight: 500;
}

.comment-form .form-group {
  margin-bottom: 1.5rem;
}

.comment-form label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  color: var(--color_text);
}

.comment-form .required {
  color: var(--text-form-error);
  margin-left: 2px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-form-input);
  border-radius: 0;
  font-size: 0.9rem;
  color: var(--color_text);
  background: var(--surface-comment-input);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--brand-terracotta);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px rgba(107, 107, 107, 0.14);
}

#commentform.comment-form input[type="text"]:focus,
#commentform.comment-form input[type="email"]:focus,
#commentform.comment-form textarea:focus {
  border-color: var(--brand-terracotta);
  box-shadow: 0 0 0 3px rgba(107, 107, 107, 0.14);
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
  color: var(--text-form-placeholder);
}

.comment-form textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
}

.comment-form input[type="file"] {
  font-size: 0.8rem;
  color: #555;
  padding: 0.75rem;
  background: var(--surface-comment-input);
  border: 1px dashed #ccc;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.comment-form input[type="file"]:hover {
  border-color: #999;
}

.comment-form .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--surface-comment-input);
  border: 1px solid var(--border-comment);
}

.comment-form .checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-top: 2px;
  accent-color: var(--color_htag, var(--color_text));
  flex-shrink: 0;
}

.comment-form .checkbox-group label {
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  color: #333;
  line-height: 1.5;
  font-weight: 400;
}

.comment-form .agreement-link {
  color: var(--color_htag, var(--color_text));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color_htag, var(--color_text));
}

.comment-form .agreement-link:hover {
  background: var(--color_htag, var(--color_text));
  color: #fff;
}

.comment-form .submit-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--brand-terracotta);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--brand-terracotta);
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
}

#commentform.comment-form #submit.submit-button {
  background: var(--brand-terracotta);
  border-color: var(--brand-terracotta);
  color: #fff;
}

.comment-form .submit-button:hover {
  background: var(--brand-terracotta-dark);
  border-color: var(--brand-terracotta-dark);
  color: #fff;
}

#commentform.comment-form #submit.submit-button:hover {
  background: var(--brand-terracotta-dark);
  border-color: var(--brand-terracotta-dark);
  color: #fff;
}

/* コメントフォーム最終上書き（テーマ/プラグイン後勝ち対策） */
#commentform.comment-form .form-title {
  border-bottom: 2px solid var(--brand-terracotta);
  color: var(--color_htag, var(--color_text));
}

#commentform.comment-form label {
  color: var(--color_text);
}

#commentform.comment-form .required {
  color: var(--text-form-error);
}

#commentform.comment-form .optional-text {
  color: var(--color_text);
}

#commentform.comment-form .logged-in-as,
#commentform.comment-form .checkbox-group {
  background: var(--nettoge-page-bg);
  border-color: #e0ddd6;
}

#commentform.comment-form input[type="text"],
#commentform.comment-form input[type="email"],
#commentform.comment-form textarea,
#commentform.comment-form input[type="file"] {
  background: var(--nettoge-page-bg);
  border: 1px solid var(--border-form-input);
}

#commentform.comment-form input::placeholder,
#commentform.comment-form textarea::placeholder {
  color: var(--text-form-placeholder);
}

#commentform.comment-form input:disabled,
#commentform.comment-form textarea:disabled,
#commentform.comment-form select:disabled {
  background: var(--surface-form-disabled);
  border-color: var(--border-form-disabled);
  color: var(--text-form-disabled);
  cursor: not-allowed;
}

#commentform.comment-form input[aria-invalid="true"],
#commentform.comment-form textarea[aria-invalid="true"],
#commentform.comment-form input:invalid,
#commentform.comment-form textarea:invalid {
  background: var(--surface-form-error);
  border-color: var(--border-form-error);
  color: var(--color_text);
}

#commentform.comment-form .error,
#commentform.comment-form .required-field-message {
  color: var(--text-form-error);
}

.comment-reply-cancel {
  display: inline-block;
  margin: -0.5rem 0 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color_link);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}

.comment-reply-cancel:hover {
  opacity: 0.85;
}

/* スクロールバー（目次サイドバー / コメント入力欄） */
#fix_sidebar .p-toc,
#sidebar .p-toc,
#main_content .p-toc,
#fix_sidebar .p-toc ol,
#fix_sidebar .p-toc ul,
#commentform.comment-form textarea {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

#fix_sidebar .p-toc::-webkit-scrollbar,
#sidebar .p-toc::-webkit-scrollbar,
#main_content .p-toc::-webkit-scrollbar,
#fix_sidebar .p-toc ol::-webkit-scrollbar,
#fix_sidebar .p-toc ul::-webkit-scrollbar,
#commentform.comment-form textarea::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#fix_sidebar .p-toc::-webkit-scrollbar-track,
#sidebar .p-toc::-webkit-scrollbar-track,
#main_content .p-toc::-webkit-scrollbar-track,
#fix_sidebar .p-toc ol::-webkit-scrollbar-track,
#fix_sidebar .p-toc ul::-webkit-scrollbar-track,
#commentform.comment-form textarea::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

#fix_sidebar .p-toc::-webkit-scrollbar-thumb,
#sidebar .p-toc::-webkit-scrollbar-thumb,
#main_content .p-toc::-webkit-scrollbar-thumb,
#fix_sidebar .p-toc ol::-webkit-scrollbar-thumb,
#fix_sidebar .p-toc ul::-webkit-scrollbar-thumb,
#commentform.comment-form textarea::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

#fix_sidebar .p-toc::-webkit-scrollbar-thumb:hover,
#sidebar .p-toc::-webkit-scrollbar-thumb:hover,
#main_content .p-toc::-webkit-scrollbar-thumb:hover,
#fix_sidebar .p-toc ol::-webkit-scrollbar-thumb:hover,
#fix_sidebar .p-toc ul::-webkit-scrollbar-thumb:hover,
#commentform.comment-form textarea::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* =================================================================
   コンポーネント - コメントツールバー
   ================================================================= */
.comment-editor-wrap {
    position: relative;
}

.comment-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--nettoge-page-bg);
    border: 1px solid var(--border-comment);
    border-bottom: none;
    position: relative;
}

.toolbar-spacer {
    flex: 1;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    background: var(--surface-comment-input);
    border: 1px solid #ccc;
    border-radius: 2px;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-btn:hover {
    background: var(--surface-comment-toolbar);
    border-color: #999;
    color: #222;
}

.toolbar-btn:active {
    background: var(--nettoge-page-bg);
}

.toolbar-btn svg {
    pointer-events: none;
}

.toolbar-help {
    background: transparent;
    border-color: transparent;
    color: #888;
}

.toolbar-help:hover {
    background: transparent;
    border-color: transparent;
    color: #333;
}

.toolbar-btn-image {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    white-space: nowrap;
    width: auto;
    min-width: auto;
    padding: 6px 10px;
}

.toolbar-btn-image:hover {
    color: #333;
}

.toolbar-btn-image svg {
    flex-shrink: 0;
}

.toolbar-btn-label {
    font-size: 0.85rem;
    font-weight: normal;
    white-space: nowrap;
}

/* ヘルプポップアップ */
.toolbar-popup {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    width: 280px;
    margin-top: 4px;
    background: var(--surface-comment-popover);
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.popup-content {
    padding: 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

.popup-content h4 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.popup-content dl { margin: 0; }

.popup-content dt {
    font-weight: 600;
    color: #333;
    margin-top: 0.5rem;
}

.popup-content dt:first-of-type { margin-top: 0; }

.popup-content dd {
    margin: 0.25rem 0 0;
    color: #666;
}

.popup-content code {
    font-size: 0.75rem;
    background: var(--surface-comment-toolbar);
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

.popup-note {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    color: #888;
    font-size: 0.75rem;
}

/* アップロードフィールド */
.form-group-upload {
    margin-bottom: 1rem;
}

.upload-fields {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.upload-field {
    flex: 1;
    min-width: 140px;
}

.upload-field input[type="file"] {
    width: 100%;
    font-size: 0.75rem;
}

.upload-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #595959;
    line-height: 1.4;
}

/* 添付ファイルプレビュー */
.attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.attachment-preview:empty {
    display: none;
}

.attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--nettoge-page-bg);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.8rem;
}

.attachment-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 2px;
}

.attachment-icon {
    font-size: 1.25rem;
}

.attachment-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.attachment-remove {
    background: none;
    border: none;
    font-size: 1rem;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.attachment-remove:hover {
    color: #e53935;
}

/* =================================================================
   コンポーネント - コメント仮投稿モーダル
   ================================================================= */
.pending-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: pendingFadeIn 0.3s ease;
}

.pending-overlay.pending-closing {
    animation: pendingFadeOut 0.3s ease forwards;
}

.pending-modal {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: var(--surface-comment-panel);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pendingSlideUp 0.3s ease;
}

.pending-header {
    padding: 1rem 1.5rem;
    background: var(--color_htag, var(--color_text));
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.pending-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.pending-countdown {
    font-size: 0.85rem;
    color: #fbbf24;
}

.pending-timer {
    display: inline-block;
    min-width: 2ch;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fbbf24;
}

.pending-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.pending-meta {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #666;
}

.pending-author {
    font-weight: 600;
    color: #333;
}

.pending-content {
    font-size: var(--jp-font-size, 17px);
    line-height: var(--jp-line-height, 1.85);
    color: var(--color_text);
    padding: 1rem;
    background: var(--surface-comment-input);
    border: 1px solid var(--border-comment);
    border-radius: 4px;
}

.pending-files {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pending-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--nettoge-page-bg);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.pending-thumbnail {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.pending-file-icon {
    font-size: 1.5rem;
    width: 48px;
    text-align: center;
}

.pending-file-name {
    flex: 1;
    font-size: 0.85rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-file-size {
    font-size: 0.75rem;
    color: #888;
}

.pending-actions {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--nettoge-page-bg);
    border-top: 1px solid #e5e5e5;
}

.pending-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pending-btn:hover {
    opacity: 0.85;
}

.pending-btn-cancel {
    background: #ef4444;
    color: #fff;
}

.pending-btn-confirm {
    background: var(--color_htag, var(--color_text));
    color: #fff;
}

.pending-progress {
    height: 4px;
    background: var(--nettoge-page-bg);
}

.pending-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #fbbf24, #ef4444);
    transition: width 1s linear;
}

.file-preview {
    display: block;
    margin-top: 0.5rem;
}

.preview-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--nettoge-page-bg);
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8rem;
}

.preview-item img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 2px;
}

.preview-icon {
    font-size: 1.25rem;
}

.preview-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-remove {
    background: none;
    border: none;
    font-size: 1rem;
    color: #999;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.preview-remove:hover {
    color: #ef4444;
}

.form-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #888;
}

/* =================================================================
   コンポーネント - ギャラリー・ライトボックス
   ================================================================= */
#simp-gallery {
  line-height: 0;
  -webkit-column-count: 8;
  -webkit-column-gap: 5px;
  -moz-column-count: 8;
  -moz-column-gap: 5px;
  column-count: 8;
  column-gap: 5px;
  margin-top: 2rem;
}

#simp-gallery img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}

#simp-gallery img:hover {
  filter: none;
}

.unique-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin: 20px;
}

.unique-gallery a {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}

.unique-gallery img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unique-lightbox-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 103;
    transition: opacity 0.2s ease;
}

.unique-lightbox-overlay.show {
    display: flex;
    opacity: 1;
}

.unique-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.unique-lightbox-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 150px);
    margin-bottom: 10px;
}

.unique-lightbox-text {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;
}

.unique-lightbox-caption,
.unique-lightbox-description {
    color: white;
    font-size: 1.2em;
    margin: 0;
}

.unique-lightbox-description {
    font-size: 1em;
}

.unique-lightbox-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 2em;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    cursor: pointer;
}

.fbx-caption {
    transition: visibility .0s ease, opacity .0s ease, transform .0s ease;
}

/* =================================================================
   コンポーネント - アプリDLボタン
   ================================================================= */
.btns_cnt-downloads {
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: var(--columns);
    justify-content: center;
    max-width: 330px;
    margin: 0 auto;
    padding: 1rem 0;
}

.dwnld_lnk-apple,
.dwnld_lnk-android {
    background-color: #000;
    border-radius: 5px;
    box-shadow: 0 .25em .25em rgba(0,0,0,.3);
    transition: all 0.3s ease-out;
    display: block;
    margin: 0 auto;
    text-decoration: none;
}

.dwnld_lnk-apple:hover,
.dwnld_lnk-android:hover,
.dwnld_lnk-apple:focus,
.dwnld_lnk-android:focus {
    transform: scale(1.1);
    box-shadow: 0 .35em .35em rgba(0,0,0,.4);
}

/* =================================================================
   コンポーネント - コードブロック
   ================================================================= */
.code-box {
    margin: 10px 0;
}

.code-box pre {
    max-height: 500px;
    overflow-y: scroll;
    background-color: var(--nettoge-page-bg);
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 11px;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

body .post_content :not(pre)>code,
body .post_content :not(pre) > code,
body .entry-content :not(pre)>code,
body .entry-content :not(pre) > code {
    display: inline;
    margin: 0 .15em;
    padding: .12em .35em;
    line-height: 1.45;
    letter-spacing: 0;
    font-family: Menlo, Consolas, "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    font-size: .92em;
    color: var(--text-inline-code, #404040);
    background: var(--surface-inline-code-bg, #e3e0d8);
    border: 1px solid rgba(64, 64, 64, .16);
    border-radius: 3px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.comment-code {
    max-height: 500px;
    overflow-y: auto;
    background-color: var(--nettoge-page-bg);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}

.comment-code pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.comment-code code {
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
}

/* =================================================================
   コンポーネント - 画像・テーブル
   ================================================================= */
.size_s img, img.size_s {
    max-width: 80%;
}

.p-articleThumb__caption,
.wp-block-embed > figcaption,
.wp-block-image figcaption,
.wp-block-table figcaption,
.wp-block-video figcaption {
    margin-bottom: 1em;
    margin-top: 0.25em;
}

.post_content .twentytwenty-left-arrow {
    top: 13px;
}

.post_content table {
    line-height: 1.45;
}

.post_content thead td,
.post_content thead th {
    background-color: var(--surface-table-header);
    color: var(--color_htag, var(--color_text));
    border-bottom-color: var(--border-table-header-divider);
}

.post_content table th,
.post_content table td {
    border-color: var(--border-table-row);
}

.post_content tbody tr:nth-child(odd) > th,
.post_content tbody tr:nth-child(odd) > td {
    background: var(--surface-table-row-odd);
}

.post_content tbody tr:nth-child(even) > th,
.post_content tbody tr:nth-child(even) > td {
    background: var(--surface-table-row-even);
}

.custom-table-1407 {
  width: 100%;
  border-collapse: collapse;
}

.custom-table-1407 td {
  border: 0px;
  padding: 1px;
}

.custom-chances-cell-1407 {
    white-space: nowrap;
}

.custom-title-cell {
    font-size: 1.1em;
    padding: .5em;
    font-weight: 900;
}

.custom-materia-icon-1407 {
    max-width: 22px;
    max-height: auto;
}

.custom-item-icon-cell-1407 {
    text-align: center;
    vertical-align: middle;
}

.custom-img-1407 {
    max-width: 55px;
    padding: 3px;
}

.custom-level-1407 {
    text-align: center;
}

/* =================================================================
   コンポーネント - その他
   ================================================================= */
.is-style-small .swell-block-step__title {
    border-left: 0px;
}

.post_content .swell-block-step h6::before,
.entry-content .swell-block-step h6::before {
    content: none;
}

.swell-block-dl__dt {
    display: flex;
    align-items: center;
}

.quest-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.is-style-default > .c-tabList .c-tabList__button {
    opacity: 10;
}

#main_content .p-toc {
    margin: 1em auto;
}

#sidebar .p-toc,
#fix_sidebar .p-toc,
#main_content .p-toc {
    background: var(--nettoge-page-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-top: 0;
}

/* TOCのスクロールバーが本文に近すぎる問題を緩和 */
#sidebar .p-toc,
#fix_sidebar .p-toc {
    scrollbar-gutter: stable;
    padding-inline-end: 0.5rem;
}

#fix_sidebar .c-widget:first-child,
#fix_sidebar .c-widget.-side:first-child {
    margin-top: 0;
    padding-top: 0;
}

#fix_sidebar .c-widget__title.-side {
    margin-top: 0;
}

#sidebar .p-toc > :first-child,
#fix_sidebar .p-toc > :first-child {
    margin-top: 0;
    padding-top: 0;
}

#sidebar .p-toc :is(ol, ul),
#fix_sidebar .p-toc :is(ol, ul) {
    margin-top: 0;
    padding-top: 0;
    padding-inline-end: 0.25rem;
}

#sidebar .p-toc a,
#fix_sidebar .p-toc a,
#main_content .p-toc a {
    color: var(--color_link);
    padding-inline-end: 0.2rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#sidebar .p-toc :is(a[aria-current="true"], .is-active > a, a.is-active, .is-current > a, a.current),
#fix_sidebar .p-toc :is(a[aria-current="true"], .is-active > a, a.is-active, .is-current > a, a.current),
#main_content .p-toc :is(a[aria-current="true"], .is-active > a, a.is-active, .is-current > a, a.current) {
    background: var(--surface-toc-active);
    border-left: 3px solid var(--brand-terracotta);
    font-weight: 600;
}

/* =================================================================
   ブログカード（内部 / 外部）
   ================================================================= */
.p-blogCard.-internal .p-blogCard__inner,
.p-blogCard.-external .p-blogCard__inner {
    background: var(--surface-blogcard);
    border: 1px solid var(--border-blogcard);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.p-blogCard.-internal .p-blogCard__inner {
    border-left: 4px solid var(--brand-terracotta);
}

.p-blogCard.-external .p-blogCard__inner {
    border-left: 1px solid var(--border-blogcard);
}

.p-blogCard.-internal:hover .p-blogCard__inner {
    border-color: var(--border-blogcard-hover);
}

.p-blogCard.-external:hover .p-blogCard__inner {
    border-color: #c8c4bc;
}

.p-blogCard.-external .p-blogCard__excerpt {
    color: var(--blogcard-external-domain);
}

.p-blogCard.-external .p-blogCard__caption {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: var(--blogcard-badge-bg);
    border-radius: 999px;
    padding: 0.18em 0.65em;
}

.p-blogCard.-external .p-blogCard__caption::after {
    content: "↗";
    font-size: 0.95em;
    line-height: 1;
}

/* =================================================================
   追従見出しバー（Floating Heading）
   ================================================================= */
.floating-heading-container {
    position: fixed;
    z-index: 997;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
    will-change: opacity;
    background: var(--nettoge-page-bg);
    border-top: 2px solid var(--brand-terracotta);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    font-family: var(--font-sans, "Noto Sans JP", "Noto Sans JP Fallback", system-ui, sans-serif);
}

.floating-heading-container.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.floating-heading {
    display: none;
    align-items: center;
    gap: 0.75em;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: background 0.1s ease;
}

.floating-heading.is-visible {
    display: flex;
}

.floating-heading:hover {
    background: rgba(0, 0, 0, 0.02);
}

.floating-heading .fh-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

#floating-heading-h2 {
    font-size: 0.9375rem;
    font-family: var(--font-heading, "Noto Sans JP", system-ui, sans-serif);
    font-weight: 700;
    color: var(--color_htag, var(--color_text));
    line-height: 1.4;
    padding: 0.5em 1em;
    border-bottom: 2px solid var(--color_htag, var(--color_text));
}

#floating-heading-h2 .fh-number {
    display: inline-flex;
    align-items: center;
    background: var(--color_htag, var(--color_text));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

#floating-heading-h3 {
    font-size: 0.8125rem;
    font-family: var(--font-heading, "Noto Sans JP", system-ui, sans-serif);
    font-weight: 600;
    color: #374151;
    line-height: 1.4;
    padding: 0.4em 1em;
    background: transparent;
    border-top: none;
}

#floating-heading-h3:hover {
    background: rgba(0, 0, 0, 0.02);
}

#floating-heading-h2.is-visible + #floating-heading-h3.is-visible {
    border-top: 1px solid #e5e7eb;
}

/* =================================================================
   アニメーション
   ================================================================= */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pendingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pendingFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes pendingSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =================================================================
   メディアクエリ - モバイルファースト（min-width）
   ================================================================= */
@media (min-width: 20em) {
    :root {
      --columns: 1fr 1fr;
      --gap: 1rem;
    }
}

@media (min-width: 600px) {
    .is-style-default .c-tabBody {
        padding: .5rem;
    }
    .container {
        font-size: 0.68em;
    }
}

@media (min-width: 960px) {
    .floating-heading-container {
        margin-left: auto;
        margin-right: auto;
    }
    .l-content,
    .l-container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 32px;
        padding-right: 32px;
    }
    .-sidebar-off .l-mainContent,
    .-sidebar-off .l-article {
        max-width: none;
        width: 100%;
    }
    .-series .l-header__logo {
        padding: 5px 0;
    }
}

/* =================================================================
   メディアクエリ - デスクトップファースト（max-width）
   ================================================================= */
@media (max-width: 1264px) {
    .l-content,
    .l-container {
        max-width: 100%;
    }
}

@media (max-width: 1200px) {
    .l-header__additional-menu {
        padding-left: 10px;
        padding-right: 10px;
    }
    #simp-gallery {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }
}

@media (max-width: 1024px) {
    .unique-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1000px) {
    #simp-gallery {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media (max-width: 959px) {
    /* 追従見出しバー - モバイルコンパクト表示 */
    .floating-heading-container {
        border-radius: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .floating-heading {
        gap: 0.4em;
    }
    #floating-heading-h2 {
        font-size: 0.75rem;
        padding: 0.35em 0.75em;
        border-bottom-width: 1px;
    }
    #floating-heading-h2 .fh-number {
        font-size: 0.5625rem;
        padding: 2px 5px;
    }
    #floating-heading-h3 {
        font-size: 0.6875rem;
        padding: 0.25em 0.75em;
    }

    /* サイドバー・ウィジェット - モバイル */
    body #sidebar .c-widget__title.-side {
        font-size: 0.8125rem;
        padding: .45em .75em;
        margin-bottom: 0.5em;
    }
    body #sidebar .c-widget {
        font-size: 0.75rem;
        line-height: 1.45;
    }
    /* 新着記事 - 2カラムカード */
    body #sidebar .wp-block-latest-posts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    body #sidebar .wp-block-latest-posts li {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        border-bottom: none;
        border-radius: 8px;
        overflow: hidden;
        background: var(--nettoge-page-bg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    body #sidebar .wp-block-latest-posts__featured-image {
        margin: 0;
        line-height: 0;
    }
    body #sidebar .wp-block-latest-posts__featured-image a {
        display: block;
    }
    body #sidebar .wp-block-latest-posts__featured-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
    }
    body #sidebar .wp-block-latest-posts__post-title {
        font-size: 0.7rem;
        line-height: 1.35;
        font-weight: 600;
        padding: 6px 8px 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body #sidebar .wp-block-latest-posts__post-date,
    body #sidebar .wp-block-latest-posts__post-author {
        font-size: 0.6rem;
        padding: 0 8px 6px;
        margin-top: 0;
    }
    body #sidebar .wp-block-latest-comments__comment {
        font-size: 0.75rem;
        padding: 0.4em 0.5em;
    }
    body #sidebar .wp-block-latest-comments__comment-link {
        font-size: 0.75rem;
    }
    body #sidebar .wp-block-latest-comments__comment-author {
        font-size: 0.6875rem;
    }
    body #sidebar .wp-block-latest-comments__comment-meta {
        font-size: 0.6875rem;
    }
    body #sidebar .wp-block-latest-comments__comment-date {
        font-size: 0.625rem;
    }
    body #sidebar .wp-block-categories li,
    body #sidebar .wp-block-archives li,
    body #sidebar .wp-block-page-list li {
        font-size: 0.75rem;
        padding: 0.35em 0.5em;
    }
}

@media (max-width: 960px) {
    /* ヘッダーナビゲーション */
    .l-header__additional-menu {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 4px 0;
        margin: 0;
        background: var(--surface-header);
        border-bottom: 1px solid #eee;
        overflow: visible;
        min-height: 38px; /* CLS防止: モバイルgnav高さ事前確保 */
    }
    body .l-header__gnav .c-gnav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        padding: 0 8px;
    }
    body .l-header__gnav .c-gnav > li.menu-item {
        position: relative;
    }
    body .l-header__gnav .c-gnav > li.menu-item > a {
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 700;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }
    body .l-header__gnav .c-gnav > li.menu-item.-current > a,
    body .l-header__gnav .c-gnav > li.menu-item.current-menu-item > a,
    body .l-header__gnav .c-gnav > li.menu-item.current-menu-ancestor > a {
        border-bottom-color: var(--color_main, #6b6b6b);
    }
    body .l-header__gnav .c-gnav .c-submenuToggleBtn {
        display: none;
    }
    body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9999;
        min-width: 160px;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        background: var(--surface-header);
        border: 1px solid #e0e0e0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.15s ease, visibility 0.15s;
    }
    body .l-header__gnav .c-gnav > li.menu-item:hover > ul.sub-menu,
    body .l-header__gnav .c-gnav > li.menu-item:focus-within > ul.sub-menu {
        visibility: visible;
        opacity: 1;
    }
    body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a {
        display: block;
        padding: 10px 16px;
        font-size: 13px;
        color: #333;
        text-decoration: none;
    }
    body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a:hover,
    body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a:active {
        background: var(--nettoge-page-bg);
    }
    .nettoge-svg-logo {
        max-width: 320px;
        height: 50px;
    }
    /* 記事カード/サムネイル調整 */
    body .l-mainContent .p-postList.-type-card .p-postList__title,
    body .l-mainContent .p-postList.-type-thumb .p-postList__title {
        font-size: 0.75rem;
        line-height: 1.35;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    body .l-mainContent .p-postList.-type-card .p-postList__body,
    body .l-mainContent .p-postList.-type-thumb .p-postList__body {
        padding: 6px 8px;
    }
    body .l-mainContent .p-postList.-type-card .p-postList__excerpt,
    body .l-mainContent .p-postList.-type-thumb .p-postList__excerpt {
        display: none;
    }
    body .l-mainContent .p-postList.-type-card .p-postList__meta,
    body .l-mainContent .p-postList.-type-thumb .p-postList__meta {
        font-size: 0.65rem;
        margin-top: 4px;
    }
    body .l-mainContent .p-postList.-type-card .p-postList__thumb,
    body .l-mainContent .p-postList.-type-thumb .p-postList__thumb {
        aspect-ratio: 16 / 9;
    }
    body .l-mainContent .p-postList.-type-card .p-postList__item,
    body .l-mainContent .p-postList.-type-thumb .p-postList__item {
        overflow: hidden;
    }
    body .l-mainContent .p-postList.-type-card .c-postThumb__cat,
    body .l-mainContent .p-postList.-type-thumb .c-postThumb__cat {
        font-size: 0.6rem;
        padding: 2px 5px;
    }
    body .l-mainContent .p-postList.-type-card {
        gap: 8px;
    }
}

@media (max-width: 800px) {
    #simp-gallery {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media (max-width: 768px) {
    /* 基本タイポグラフィ */
    body {
        line-height: 1.9;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }
    h1, h2, h3, h4, h5 {
        margin-top: 1.8em;
        margin-bottom: 0.7em;
    }
    /* 記事本文 */
    .post_content,
    .entry-content {
        line-height: 1.9;
        font-size: 1rem;
    }
    .post_content > p,
    .entry-content > p {
        margin-bottom: 1.25em;
    }
    .post_content .step-box,
    .post_content .reason-box,
    .post_content .warn-box,
    .post_content .tip-box,
    .post_content .success-box,
    .entry-content .step-box,
    .entry-content .reason-box,
    .entry-content .warn-box,
    .entry-content .tip-box,
    .entry-content .success-box {
        padding: 0.875em 1em;
        margin: 1.25em 0;
    }
    /* 画像回り込み */
    .post_content .tright, .post_content .tleft,
    .entry-content .tright, .entry-content .tleft {
        float: none;
        display: block;
        margin: 0 0 1rem;
        width: auto;
        max-width: 100%;
    }
    /* 見出し装飾レスポンシブ */
    .post_content h2,
    .entry-content h2 {
        font-size: 1.375rem;
    }
    .post_content h4,
    .entry-content h4 {
        font-size: 0.98rem;
        padding-bottom: 0.45rem;
    }
    .post_content h4::after,
    .entry-content h4::after {
        width: 100%;
    }
    .post_content h5,
    .entry-content h5 {
        font-size: 0.9375rem;
    }
    /* ギャラリー */
    .unique-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    /* コンテナ・テーブル */
    .container {
        flex: 1 1 100%;
        font-size: 0.8em;
        border: 0;
    }
    .custom-title-cell {
        font-size: 1.1em;
        padding: 0.5em;
        font-weight: 900;
    }
    .custom-materia-icon-1407 {
        max-width: 22px;
        height: auto;
    }
    .custom-img-1407 {
        max-width: 64px;
        height: auto;
        padding: 3px;
    }
    /* リスト */
    .post_content li {
        line-height: 1.65;
        margin: 0.5em 0;
    }
    /* コメントフォーム */
    .comment-form {
        padding: 1.25rem;
        margin-top: 1.5rem;
    }
    .comment-form .form-title {
        font-size: 0.9rem;
    }
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form textarea {
        padding: 0.75rem;
    }
    .comment-form .submit-button {
        width: 100%;
        text-align: center;
    }
    /* SVGロゴ */
    .nettoge-svg-logo {
        max-width: 240px;
        height: 35px;
    }
}

@media not all and (min-width: 600px) {
    .l-articleBottom__section {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    #simp-gallery {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

/* =================================================================
   Nettoge Core 統一トーン（Inline Gallery）
   ================================================================= */
.igl-images,
.igl-images-more {
    border-color: #e0ddd6;
}

.igl-show-more {
    border-color: #c8c4bc;
    background: var(--nettoge-page-bg);
    color: var(--color_htag, var(--color_text));
}

.igl-show-more:hover {
    background: var(--nettoge-page-bg);
}

.igl-show-more:focus-visible {
    outline-color: var(--brand-terracotta);
}

.igl-image:not([data-aspect-ratio] *) img.igl-thumbnail,
.igl-video:not([data-aspect-ratio] *) .igl-video-thumbnail {
    background-color: var(--nettoge-page-bg);
}

.igl-video .play-button,
.igl-video .igl-play-button,
.igl-lightbox-thumbnail .play-overlay {
    background-color: rgba(107, 107, 107, 0.9);
}

.igl-video:hover .play-button,
.igl-video:hover .igl-play-button {
    background-color: rgba(79, 79, 79, 1);
}

/* =================================================================
   Inline code override (parent theme rule replacement)
   ================================================================= */
.post_content :not(pre)>code,
.entry-content :not(pre)>code,
body .post_content :not(pre)>code,
body .entry-content :not(pre)>code {
    display: inline !important;
    align-items: normal !important;
    margin: 0 .15em !important;
    padding: .12em .35em !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    font-family: Menlo, Consolas, "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif !important;
    font-size: .92em !important;
    color: var(--text-inline-code, #404040) !important;
    background: var(--surface-inline-code-bg, #e3e0d8) !important;
    border: 1px solid rgba(64, 64, 64, .16) !important;
    border-radius: 3px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* =================================================================
   XIVLauncher FAQ Accordion (no-JS fallback safe)
   ================================================================= */
.xivlauncher-accordion {
    max-width: min(100%, 860px);
    margin: 1.25rem auto;
}

.xivlauncher-accordion :is(.xivlaunvherfaqaccordion-item, .xivlauncher-faq-accordion__item) {
    margin: 0 0 .75rem;
    border: 1px solid var(--border-table-row, #e0ddd6);
    border-radius: 8px;
    background: var(--nettoge-page-bg);
    overflow: hidden;
}

.xivlauncher-accordion :is(.xivlaunvherfaqaccordion-item, .xivlauncher-faq-accordion__item) > h4 {
    margin: 0;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    cursor: pointer;
    user-select: none;
    line-height: 1.45;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color_htag, var(--color_text));
    background: var(--surface-widget-title, #eae8e2);
    border-left: 3px solid transparent;
}

.xivlauncher-accordion :is(.xivlaunvherfaqaccordion-item, .xivlauncher-faq-accordion__item) > h4::after {
    content: "▾";
    font-size: .9em;
    line-height: 1;
    transition: transform .2s ease;
}

.xivlauncher-accordion :is(.xivlaunvherfaqaccordion-item, .xivlauncher-faq-accordion__item).active > h4 {
    background: var(--surface-toc-active, #faece7);
    border-left-color: var(--brand-terracotta, #6b6b6b);
    color: var(--toc-active-text, #404040);
}

.xivlauncher-accordion :is(.xivlaunvherfaqaccordion-item, .xivlauncher-faq-accordion__item).active > h4::after {
    transform: rotate(180deg);
}

/* JS未動作でも内容は見える（display:noneにしない） */
.xivlauncher-accordion .xivlauncher-accordion-content {
    display: block !important;
    padding: 1rem;
    border-top: 1px solid var(--border-table-row, #e0ddd6);
    background: var(--nettoge-page-bg);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* JS有効時のみ折りたたみを有効化 */
.xivlauncher-accordion.is-enhanced :is(.xivlaunvherfaqaccordion-item, .xivlauncher-faq-accordion__item):not(.active) .xivlauncher-accordion-content {
    display: none !important;
}

/* =================================================================
   WordPress core blocks harmonization
   ================================================================= */
.editor-styles-wrapper :is(
    .wp-block-file,
    .wp-block-details,
    .wp-block-preformatted,
    .wp-block-code,
    .wp-block-search,
    .wp-block-calendar,
    .wp-block-tag-cloud,
    .wp-block-latest-posts,
    .wp-block-categories,
    .wp-block-archives
),
body :is(.post_content, .entry-content) :is(
    .wp-block-file,
    .wp-block-details,
    .wp-block-preformatted,
    .wp-block-code,
    .wp-block-search,
    .wp-block-calendar,
    .wp-block-tag-cloud,
    .wp-block-latest-posts,
    .wp-block-categories,
    .wp-block-archives
) {
    color: var(--color_text);
}

.editor-styles-wrapper .wp-block-file,
body :is(.post_content, .entry-content) .wp-block-file {
    padding: 1rem;
    background: var(--nettoge-page-bg);
    border: 1px solid var(--border-table-row, #e0ddd6);
    border-radius: 8px;
}

.editor-styles-wrapper .wp-block-file a:not(.wp-block-file__button),
body :is(.post_content, .entry-content) .wp-block-file a:not(.wp-block-file__button) {
    color: var(--brand-terracotta, #6b6b6b);
}

.editor-styles-wrapper .wp-block-file .wp-block-file__button,
body :is(.post_content, .entry-content) .wp-block-file .wp-block-file__button {
    background: var(--brand-terracotta, #6b6b6b);
    color: #fff;
    border-radius: 6px;
}

.editor-styles-wrapper .wp-block-file .wp-block-file__button:hover,
body :is(.post_content, .entry-content) .wp-block-file .wp-block-file__button:hover {
    background: var(--brand-terracotta-dark, #4f4f4f);
}

.editor-styles-wrapper .wp-block-details,
body :is(.post_content, .entry-content) .wp-block-details {
    background: var(--nettoge-page-bg);
    border: 1px solid var(--border-table-row, #e0ddd6);
    border-radius: 8px;
    padding: .85rem 1rem;
}

.editor-styles-wrapper .wp-block-details > summary,
body :is(.post_content, .entry-content) .wp-block-details > summary {
    color: var(--color_htag, var(--color_text));
    font-weight: 700;
    cursor: pointer;
}

.editor-styles-wrapper :is(.wp-block-preformatted, .wp-block-code pre),
body :is(.post_content, .entry-content) :is(.wp-block-preformatted, .wp-block-code pre) {
    background: var(--nettoge-page-bg);
    border: 1px solid var(--border-table-row, #e0ddd6);
    border-radius: 8px;
    color: var(--color_text);
}

.editor-styles-wrapper .wp-block-search,
body :is(.post_content, .entry-content) .wp-block-search {
    gap: .5rem;
}

.editor-styles-wrapper .wp-block-search__input,
body :is(.post_content, .entry-content) .wp-block-search__input {
    background: var(--nettoge-page-bg);
    border: 1px solid var(--border-form-input, #c8c4bc);
    border-radius: 6px;
    color: var(--color_text);
}

.editor-styles-wrapper .wp-block-search__button,
body :is(.post_content, .entry-content) .wp-block-search__button {
    background: var(--brand-terracotta, #6b6b6b);
    border: 1px solid var(--brand-terracotta, #6b6b6b);
    color: #fff;
    border-radius: 6px;
}

.editor-styles-wrapper .wp-block-search__button:hover,
body :is(.post_content, .entry-content) .wp-block-search__button:hover {
    background: var(--brand-terracotta-dark, #4f4f4f);
    border-color: var(--brand-terracotta-dark, #4f4f4f);
}

.editor-styles-wrapper .wp-calendar-table.wp-calendar-table,
body :is(.post_content, .entry-content) .wp-calendar-table.wp-calendar-table {
    background: var(--nettoge-page-bg);
    border-color: var(--border-table-row, #e0ddd6);
    color: var(--color_text);
}

.editor-styles-wrapper .wp-calendar-table thead th,
body :is(.post_content, .entry-content) .wp-calendar-table thead th {
    background: var(--surface-table-header, #e3e0d8);
}

.editor-styles-wrapper .wp-calendar-table #today,
body :is(.post_content, .entry-content) .wp-calendar-table #today {
    background: var(--brand-terracotta, #6b6b6b);
}

.editor-styles-wrapper :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives) li,
body :is(.post_content, .entry-content) :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives) li {
    border-bottom: 1px solid #ece8df;
    padding-bottom: .45em;
}

.editor-styles-wrapper :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives) li:last-child,
body :is(.post_content, .entry-content) :is(.wp-block-latest-posts, .wp-block-categories, .wp-block-archives) li:last-child {
    border-bottom: 0;
}

.editor-styles-wrapper .wp-block-tag-cloud a,
body :is(.post_content, .entry-content) .wp-block-tag-cloud a {
    display: inline-block;
    padding: .35em .7em;
    margin: 0 .35em .35em 0;
    background: var(--nettoge-page-bg);
    border: 1px solid var(--border-table-row, #e0ddd6);
    border-radius: 999px;
    text-decoration: none;
}

.editor-styles-wrapper .wp-block-separator,
body :is(.post_content, .entry-content) .wp-block-separator {
    border-color: #d7d0c4;
    opacity: 1;
}

/* =================================================================
   追従サイドバー - sticky 補正
   =================================================================
   build/css/main.css 側の top: calc() は、演算子前後の空白がないため
   一部ブラウザで無効扱い（computed top: auto）になる。
   ここで正しい calc を後勝ちで上書きし、追従を安定化する。
*/
@media (min-width: 960px) {
    #fix_sidebar.w-fixSide {
        top: calc(8px + var(--swl-adminbarH, 0px) + var(--swl-fix_headerH, 0px));
    }
}

/* =================================================================
   横スクロール抑制
   =================================================================
   SWELL の動的CSSで .alignwide が左右に広がる場合があり、
   画面幅によっては body の scrollWidth が増えるため補正する。
*/
html,
body,
.l-wrapper,
#body_wrap {
    max-width: 100%;
}

@supports (overflow: clip) {
    html,
    body,
    .l-wrapper,
    #body_wrap {
        overflow-x: clip;
    }
}

@supports not (overflow: clip) {
    html,
    body,
    .l-wrapper,
    #body_wrap {
        overflow-x: hidden;
    }
}

@media (min-width: 1108px) {
    .alignwide {
        left: max(-100px, calc((100vw - 100%) / -2));
        width: min(calc(100% + 200px), 100vw);
    }
}