@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    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
*/

/* =============================================================================
   ainote デザインシステム — 段階①（土台）
   -----------------------------------------------------------------------------
   デザインの正 : リポジトリ直下 /DESIGN.md（Mintlify解析トークン集）
   方針         : 白背景＋ink(ほぼ黒)が主役 / ミント(#00d4a4)は"控えめな差し色"
   本文フォント : Noto Sans JP（日本語向けに line-height・字間を最適化）
   コード       : Geist Mono
   -----------------------------------------------------------------------------
   このファイルは SWELL 親テーマより後に読み込まれる（functions.php 優先度11）。
   段階②以降でボタン/カード/コードブロック/表/引用/外装を作り込む前提で、
   ここでは「デザイントークン層」と「色・タイポグラフィの土台」のみを定義する。
   ============================================================================= */


/* =============================================================================
   1. デザイントークン層（DESIGN.md → CSS変数）
   -----------------------------------------------------------------------------
   ここが唯一の"数値の出どころ"。以降・段階②③はこの --ds-* を参照して組む。
   ============================================================================= */
:root {

  /* --- 色: テキスト（ink→muted の階層） --- */
  --ds-ink:            #0a0a0a; /* 見出し・主役テキスト・主CTA */
  --ds-charcoal:       #1c1c1e; /* 本文 */
  --ds-slate:          #3a3a3c; /* 副次テキスト・メタ */
  --ds-steel:          #5a5a5c; /* 三次テキスト・フッターリンク・非活性ナビ */
  --ds-stone:          #888888; /* キャプション・弱いラベル */
  --ds-muted:          #a8a8aa; /* 一番弱い/非活性テキスト */

  /* --- 色: サーフェス（背景・境界） --- */
  --ds-canvas:         #ffffff; /* ページ・カードの基本背景 */
  --ds-canvas-dark:    #0a0a0a; /* 反転サーフェス（プロモ帯・暗部） */
  --ds-surface:        #f7f7f7; /* 控えめなセクション背景・インラインコード地 */
  --ds-surface-soft:   #fafafa; /* さらに静かな背景 */
  --ds-surface-code:   #1c1c1e; /* コードブロックの暗い地（段階②で使用） */
  --ds-hairline:       #e5e5e5; /* 1px境界・主要な区切り線 */
  --ds-hairline-soft:  #ededed; /* 静かな区切り（表の行など） */
  --ds-hairline-dark:  #1f1f1f; /* 暗部の上の境界 */

  /* --- 色: ブランド/アクセント（＝差し色。多用しない） --- */
  --ds-mint:           #00d4a4; /* 差し色。チェック・フォーカス・特定CTA・活性表示だけ */
  --ds-mint-deep:      #00b48a; /* ミントの押下/濃色 */
  --ds-mint-soft:      #7cebcb; /* 成功状態の淡い地・選択ハイライト */
  --ds-mint-link:      #0a7d63; /* 文中リンク用の深いグリーン。白地で約5.1:1（AA合格）。ブランドグリーンの濃色シェード（同色相） */
  --ds-tag:            #3772cf; /* タグ/参照の青 */
  --ds-warn:           #c37d0d; /* 注意 */
  --ds-error:          #d45656; /* エラー・必須ラベル */

  /* --- 色: 反転（暗い地の上の文字） --- */
  --ds-on-dark:        #ffffff;
  --ds-on-dark-muted:  #b3b3b3;

  /* --- 角丸スケール（DESIGN.md rounded） --- */
  --ds-radius-xs:      4px;
  --ds-radius-sm:      6px;
  --ds-radius-md:      8px;
  --ds-radius-lg:      12px;
  --ds-radius-xl:      16px;
  --ds-radius-xxl:     24px;
  --ds-radius-full:    9999px;

  /* --- 余白スケール（DESIGN.md spacing / 4pxベース） --- */
  --ds-space-xxs:      4px;
  --ds-space-xs:       8px;
  --ds-space-sm:       12px;
  --ds-space-md:       16px;
  --ds-space-lg:       20px;
  --ds-space-xl:       24px;
  --ds-space-xxl:      32px;
  --ds-space-xxxl:     40px;
  --ds-space-section-sm: 48px;
  --ds-space-section:  64px;
  --ds-space-section-lg: 96px;
  --ds-space-hero:     120px;

  /* --- フォント（本文=Noto Sans JP / コード=Geist Mono） --- */
  --ds-font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --ds-font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* --- 影（段階②以降のカード/モックアップ用に定義だけ） --- */
  --ds-shadow-1:    rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
  --ds-shadow-2:    rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
  --ds-shadow-3:    rgba(0, 0, 0, 0.12) 0px 24px 48px -8px;
  --ds-shadow-mint: rgba(0, 212, 164, 0.08) 0px 8px 24px;

  /* --- 状態遷移（DESIGN.md Known Gaps 推奨 150〜200ms） --- */
  --ds-ease: 160ms ease;
}


/* =============================================================================
   2. SWELL :root 変数のマッピング
   -----------------------------------------------------------------------------
   SWELLは色・フォントを :root のCSS変数で出力し、body等がそれを参照する。
   ここでトークン層(--ds-*)へ繋ぎ直す＝サイト全体の色/フォントが切り替わる。

   ※ セレクタを ":root:root"（詳細度 0,2,0）にしているのは意図的。
     SWELLは <head> 内インラインで ":root{…}"（0,1,0）を出力するため、
     読み込み順に依存せず必ずこちらが勝つようにしている。値変更はここだけ。
   ============================================================================= */
:root:root {

  /* メインカラー＝ink（主役）。※ミントは入れない（サイトが緑一色になり階層が壊れる） */
  --color_main:        var(--ds-ink);
  --color_main_thin:   rgba(10, 10, 10, 0.05);  /* mainの淡い地（SWELLは元値から自動計算するため明示上書き） */
  --color_main_dark:   #000000;                 /* mainの押下/濃色 */

  /* 文字・見出し・リンク */
  --color_text:        var(--ds-charcoal);      /* 本文 */
  --color_htag:        var(--ds-ink);           /* 見出しタグ（h2〜h4はこれで着色される） */
  --color_link:        var(--ds-ink);           /* リンクもink基調（Mintlifyのダークリンク）。プロセスは下で下線＝ミント */

  /* 背景・境界 */
  --color_bg:          var(--ds-canvas);
  --color_content_bg:  var(--ds-canvas);
  --color_border:      var(--ds-hairline);
  --color_gray:        var(--ds-hairline);

  /* グラデーション（万一グラデ指定が使われてもブランド内に収める） */
  --color_gradient1:   var(--ds-mint);
  --color_gradient2:   var(--ds-mint-deep);

  /* リストアイコン: チェックだけミント（＝DESIGNの"緑チェック"差し色） */
  --color_list_check:  var(--ds-mint);

  /* ヘッダー/フッターの基本色（外装の作り込みは段階③。ここは色のみ） */
  --color_header_bg:   var(--ds-canvas);
  --color_header_text: var(--ds-ink);
  --color_footer_bg:   var(--ds-canvas);
  --color_footer_text: var(--ds-steel);

  /* フォント（customizerの設定に依存せずNoto Sans JPを保証） */
  --swl-font_family:   var(--ds-font-sans);
  --swl-font_weight:   400;
  --swl-letter_spacing: 0.02em;               /* 日本語本文の字間（0〜0.02emの範囲で読みやすさ優先） */
}


/* =============================================================================
   3. グローバル / body タイポグラフィ
   -----------------------------------------------------------------------------
   色・フォントは上のSWELL変数マッピングで反映済み。
   ここでは日本語向けの行間・字間・レンダリング最適化を土台として足す。
   （SWELL既定 line-height:1.6 → 1.75 に微増して余白を持たせる）
   ============================================================================= */
body {
  line-height: 1.75;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* =============================================================================
   4. 本文（.post_content）— 段落・読みやすさ・余白リズム
   -----------------------------------------------------------------------------
   本文サイズ 16px（モバイル）/ 17px（≥600px）。日本語の長文可読性を優先し
   行間 1.9。SWELL既定(.post_content line-height:1.8)より僅かに広げる。
   ============================================================================= */
.post_content {
  font-size: 16px;
  line-height: 2.0;        /* 根本さん指定 */
  letter-spacing: 0.2em;   /* 根本さん指定（広めだが明示指定どおり適用） */
  color: var(--ds-charcoal);
}
@media (min-width: 600px) {
  .post_content {
    font-size: 17px;
  }
}

/* 段落の縦リズム（余白は --ds-space を基準に） */
.post_content p {
  margin: 0 0 var(--ds-space-xl); /* 24px */
  line-height: 2.0;
}


/* =============================================================================
   5. 見出し h1〜h4
   -----------------------------------------------------------------------------
   ink・太字で"締まって見せる"。日本語のため letter-spacing は 0（負値にしない）。
   装飾（境界線・::before等）の作り込みは段階②。ここは色/太さ/字間/行間/余白のみ。
   ============================================================================= */

/* 記事タイトル（.post_content の外側） */
.c-postTitle__ttl {
  color: var(--ds-ink);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* 本文中の見出し（letter-spacing:0 で本文の 0.2em を継承させない＝見出しは締める） */
.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4 {
  color: var(--ds-ink);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.post_content h2 { font-size: 1.6em; }
.post_content h3 { font-size: 1.32em; }
.post_content h4 { font-size: 1.14em; }

/* --- 見出しの階層と装飾（段階②で強化 / 段階①の黒帯バグ対策を内包）------------
   【バグ対策（維持・厳守）】SWELL既定の h2 は 'band'（Default_Settings.php:'h2_type'=>'band'）で
   `background:var(--color_htag); color:#fff` を出力。--color_htag=ink により黒帯化し、
   `.post_content h2{color:ink}`(詳細度0,2,0) が白文字(0,0,1)に勝って黒地黒文字で不可視だった。
   → 背景を transparent に落とし ::before の帯を除去して恒久無効化する。
     この :not() セレクタ群を壊すと黒帯が復活するので触らないこと。
   【段階②の強化】存在感アップのため h2 に「左ミントの細いアクセントバー」＋「下1px hairline」。
   h3 は中立グレーの細バー、h4 はプレーン太字。サイズ差と合わせて h2>h3>h4 を明確化。
   ※ミントは h2 セクション標識としての差し色（許可された accent moment）。h3/h4 には使わない。 */

/* h2: 左ミントバー＋下hairline（背景は必ず transparent＝黒帯復活防止） */
.post_content h2:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not(.is-style-section_ttl) {
  background: transparent;
  color: var(--ds-ink);
  padding: 0.15em 0 0.45em 0.7em;
  border-top: 0;
  border-right: 0;
  border-left: 4px solid var(--ds-mint);
  border-bottom: 1px solid var(--ds-hairline);
  border-radius: 0;
  margin: 2.5em 0 1.25em;
}
/* 'band' 等が描く ::before（帯・装飾）を除去 */
.post_content h2:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not(.is-style-section_ttl)::before {
  display: none;
}

/* h3: 中立グレーの細い左バー（h2の弱い版）。SWELL既定の ::before 下線は除去 */
.post_content h3:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title) {
  background: transparent;
  color: var(--ds-ink);
  border: 0;
  border-left: 3px solid var(--ds-hairline);
  padding: 0 0 0 0.65em;
  margin: 2.25em 0 1em;
}
.post_content h3:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)::before {
  display: none;
}

/* h4: プレーン太字（左線なし＝最も静か）。SWELL既定の左ボーダー/チェックアイコンを除去 */
.post_content h4:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title) {
  background: transparent;
  color: var(--ds-ink);
  border: 0;
  padding: 0;
  margin: 2em 0 0.75em;
}
.post_content h4:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)::before {
  display: none;
}


/* =============================================================================
   6. リンク（本文中の文中リンク）
   -----------------------------------------------------------------------------
   根本さん要望: 下線なし＋グリーン文字。
   明るいミント(#00d4a4)は白地でコントラスト約1.9:1でAA不合格のため文字色に使えない。
   → ブランドグリーンの濃色シェード --ds-mint-link(#0a7d63, 約5.1:1・AA合格) を採用。
   hover時のみ弱いアフォーダンス（明るいミントの下線）を出す。
   ボタン化されたリンクには適用しない（p/li直下のみ対象）。
   ============================================================================= */
.post_content p a,
.post_content li a {
  color: var(--ds-mint-link);
  text-decoration: none;
  transition: color var(--ds-ease), text-decoration-color var(--ds-ease);
}
.post_content p a:hover,
.post_content li a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ds-mint);
  text-underline-offset: 0.15em;
}
/* 目次リンク（.p-toc__link）は上の .post_content li a:hover の下線を継承してしまう。
   目次に限り下線を消す（SWELL の .p-toc__link:hover{opacity:.8}＝緑が少し薄くなるフェードは活かす）。
   #main_content スコープ (1,2,0) で .post_content li a:hover(0,2,2) に勝つ。 */
#main_content .p-toc__link:hover {
  text-decoration: none;
}


/* =============================================================================
   7. リスト
   -----------------------------------------------------------------------------
   本文（行間2.0）と揃える（SWELL既定 li:1.5 → 2.0）。
   チェックリストのアイコン色は上でミントにマッピング済み。
   ============================================================================= */
.post_content li {
  line-height: 2.0;
  margin: 0.5em 0;
}


/* =============================================================================
   8. コード（DESIGN.md code-block / code-inline）
   -----------------------------------------------------------------------------
   すべて Geist Mono。本文の字間0.2emはコードに不適なので normal に戻す。
   ※シンタックスハイライトは後日プラグイン。ここは容器＋等幅＋基本色まで。
   ============================================================================= */

/* 全体のフォント割当（UI含む） */
code,
kbd,
samp,
pre,
tt,
.post_content code,
.wp-block-code,
.wp-block-code code,
.wp-block-preformatted {
  font-family: var(--ds-font-mono);
}

/* 8-1. インラインコード（DESIGN.md code-inline / 角丸なし）
   surface地・charcoal文字・角丸0・1px hairline・padding 2px6px。
   見出し内/リンク内でも破綻しないよう相対サイズ＆改行許可。 */
.post_content code {
  font-size: 0.88em;
  background: var(--ds-surface);
  color: var(--ds-charcoal);
  border: 1px solid var(--ds-hairline);
  border-radius: 0;                    /* コンテンツ要素は角丸なし */
  padding: 2px 6px;
  letter-spacing: normal;
  word-break: break-word;
}

/* 8-2. コードブロック（DESIGN.md code-block / 角丸なし）
   地=surface-code(#1c1c1e)・文字=on-dark・角丸0・padding md・横スクロール可。 */
.post_content pre,
.post_content .wp-block-code {
  background: var(--ds-surface-code);
  color: var(--ds-on-dark);
  font-family: var(--ds-font-mono);
  font-size: 0.9em;
  line-height: 1.6;
  letter-spacing: normal;
  border-radius: 0;                    /* コンテンツ要素は角丸なし */
  padding: var(--ds-space-md);
  margin: 2em 0;
  overflow-x: auto;                    /* 横スクロール（長い行） */
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
  -moz-tab-size: 2;
}

/* ブロック内の code はインライン装飾を打ち消して素の等幅に戻す */
.post_content pre code,
.post_content pre > code,
.post_content .wp-block-code code {
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  letter-spacing: normal;
  white-space: pre;                    /* 整形を保持（折り返さずスクロール） */
  word-break: normal;
}


/* =============================================================================
   9. アクセント（選択・フォーカス）
   -----------------------------------------------------------------------------
   ミントを"差し色"として最小限に。テキスト選択とキーボードフォーカスのみ。
   フォーカス可視化はアクセシビリティ上も必須。
   ============================================================================= */
::selection {
  background: var(--ds-mint-soft);
  color: var(--ds-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ds-mint);
  outline-offset: 2px;
}


/* =============================================================================
   10. 表（DESIGN.md feature-comparison-table / -row）
   -----------------------------------------------------------------------------
   角丸なし（シャープ）・hairline境界・ヘッダー行=surface地＋ink・行区切り=hairline-soft。
   モバイル横スクロール: marked は素の <table>（ラッパ無し）を出すため、
   table自身を display:block + overflow-x:auto にしてスクロール容器化する（維持）。
   角丸を撤廃したので border-collapse:collapse に戻し、罫線を素直に整合させる
   （table外枠1px＋セル下罫＝行区切り。縦罫は使わずクリーン）。
   ※table の border-radius は border-collapse と相性が悪く、セル背景はみ出し等の既知不具合が
     あるため、角丸ゼロ方針はその回避も兼ねる。本文の字間0.2emは表に不適なので normal。
   ============================================================================= */
.post_content table {
  display: block;                      /* ← 横スクロール容器化（ラッパ無しでも効く） */
  max-width: 100%;
  width: max-content;                  /* 内容幅。100%超で overflow → スクロール */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ds-hairline);
  border-radius: 0;                    /* コンテンツ要素は角丸なし（シャープ） */
  border-collapse: collapse;           /* 角丸撤廃に伴い separate→collapse に戻す */
  line-height: 1.7;
  letter-spacing: normal;
  margin: 2em 0;
  font-size: 0.95em;
}

/* セル: 横罫（hairline-soft）のみ。縦罫は使わずクリーンに（Mintlify調） */
.post_content th,
.post_content td {
  border: 0;
  border-bottom: 1px solid var(--ds-hairline-soft);
  padding: 12px 16px;                  /* space sm〜md */
  text-align: left;
  vertical-align: top;
}

/* ヘッダー行: SWELL既定の「--color_main(=ink)地＋白文字」黒帯を surface地＋ink に上書き */
.post_content thead th,
.post_content thead td {
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--ds-hairline);
}

/* ゼブラ: 極薄 surface-soft のみ（控えめ） */
.post_content tbody tr:nth-child(even) th,
.post_content tbody tr:nth-child(even) td {
  background: var(--ds-surface-soft);
}

/* 最終行の下罫は外枠と重なるので消す */
.post_content tbody tr:last-child th,
.post_content tbody tr:last-child td {
  border-bottom: 0;
}


/* =============================================================================
   11. 引用（blockquote）— DESIGN.md 準拠トークンで新設計
   -----------------------------------------------------------------------------
   左ミントのアクセントバー＋surface-soft地＋slate文字（角丸なし＝シャープ）の
   コールアウト調。SWELL既定(simple)の背景(--color_gray)と ::before 二重線は打ち消す。
   ============================================================================= */
.post_content blockquote {
  background: var(--ds-surface-soft);
  color: var(--ds-slate);
  border-left: 4px solid var(--ds-mint);
  border-radius: 0;                                 /* コンテンツ要素は角丸なし */
  padding: var(--ds-space-md) var(--ds-space-lg);   /* 16px 20px */
  margin: 2em 0;
}
/* SWELL simple の ::before/::after（二重線バー・引用符）を除去 */
.post_content blockquote::before,
.post_content blockquote::after {
  content: none;
}
.post_content blockquote > :last-child {
  margin-bottom: 0;
}
.post_content blockquote cite {
  color: var(--ds-steel);
}


/* =============================================================================
   12. 区切り線（hr）— hairline の細線＋たっぷり余白
   ============================================================================= */
.post_content hr {
  border: 0;
  border-top: 1px solid var(--ds-hairline);
  margin: var(--ds-space-section-sm) 0;   /* 48px */
  height: 0;
}


/* =============================================================================
   13. 画像（img）— レスポンシブ＋角丸なし＋控えめな細枠（DESIGNは基本フラット）
   ============================================================================= */
.post_content img {
  max-width: 100%;
  height: auto;
  border-radius: 0;                          /* コンテンツ要素は角丸なし */
  border: 1px solid var(--ds-hairline-soft);
}


/* =============================================================================
   14. 強調（strong）— 太字は ink に寄せて本文(charcoal)から一段立たせる
   -----------------------------------------------------------------------------
   DESIGN.md「強調は色/太さで。斜体は使わない」に沿い、strong は ink+700。
   ============================================================================= */
.post_content strong,
.post_content b {
  color: var(--ds-ink);
  font-weight: 700;
}


/* =============================================================================
   15. 目次（TOC）— SWELL由来コンポーネント `.p-toc` の上書き
   -----------------------------------------------------------------------------
   本文中の目次を「本文コンテンツ幅いっぱい」に広げる。
   ・対象は本文中インラインの目次のみ＝`.p-toc:not(.-modal)`。
     （`.p-toc.-modal`＝スマホのモーダル目次は SWELL既定のまま／内部要素 .p-toc__* も不変）
   ・max-width解除＋width:auto＋左右マージン0で全幅化。縦マージン（親の margin-top:-.5em 等）は尊重。
   ・角丸は「コンテンツ要素は角丸なし」方針に合わせ 0（SWELLの --swl-radius--2 を上書き）。

   【詳細度の注意（重要）】SWELLは @media(min-width:960px) で
     `#main_content .p-toc{ width:92%; max-width:800px; margin:4em auto }`
   を出力する。これは ID を含むため詳細度 (1,1,0)。単なる `.p-toc:not(.-modal)`(0,2,0) では
   IDに負けてPC(≥960px)で width:92% が生き残り全幅化できない。
   → セレクタに `#main_content` を含め (1,2,0) にして勝たせる（!important は使わない）。
     基底の `.p-toc:not(.-modal)` も残し #main_content 外の目次を保険的にカバー。 */
.p-toc:not(.-modal),
#main_content .p-toc:not(.-modal) {
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;   /* コンテンツ要素は角丸なし（シャープ） */
}


/* =============================================================================
   16. サイト外装 ③-a: ヘッダー ＋ ボタン
   -----------------------------------------------------------------------------
   方針: Mintlify風のクリーンなヘッダーバー（白地＋下1px hairline＋フラット）、
   ボタンは全てシャープ（角丸0）＋inkプライマリ。グリーンは差し色のみ。
   ※対象はヘッダーとボタンのみ。フッター/トップ/サイドラインの中身は ③-b/③-c で。
   ※SWELLはヘッダーに id を使う（#header 等）ため、ID詳細度に負けないよう #header を含める。
   ============================================================================= */

/* --- 16-1. ヘッダーバー ---
   背景は既に --color_header_bg=canvas(白)。ここでは下境界の hairline とフラット化。
   #header.l-header（1,1,0）で、SWELL/親の .l-header 系（0,1,0）やID系に確実に勝つ。
   .l-fixHeader（スクロール追従ヘッダー）も同様にフラット＋下線で揃える。 */
#header.l-header,
.l-fixHeader {
  box-shadow: none;
  border-bottom: 1px solid var(--ds-hairline);
}

/* --- 16-2. グローバルナビ ---
   リンクは ink・中庸ウェイト。
   下線（hover/現在地の標識）は SWELL 既定のアニメーション（`.c-gnav a::after` の
   width/height/位置/transform-origin＋`li:hover>a::after`/`.-current>a::after` の scaleX）に
   委ね、**色だけミントに変える**。自前のジオメトリ/トリガーは持たない（＝位置ズレ防止）。
   ※現在地は SWELL の `li.-current`。`.current-menu-item` 前提の独自指定は使わない。 */
#header .c-gnav > .menu-item > a {
  color: var(--ds-ink);
}
#header .c-gnav > .menu-item > a .ttl {
  font-weight: 500;
}
/* ホバー／現在地はテキストも深緑に＝ナビに色を効かせる（根本さん指定 2026-07-08） */
#header .c-gnav > .menu-item > a:hover,
#header .c-gnav > .menu-item.-current > a,
#header .c-gnav > .current-menu-item > a,
.l-fixHeader .c-gnav > .menu-item > a:hover,
.l-fixHeader .c-gnav > .menu-item.-current > a,
.l-fixHeader .c-gnav > .current-menu-item > a {
  color: var(--ds-mint-link);
}
/* SWELL既定の下線の“色”のみ上書き（幅・位置・scaleX発火はSWELLに任せる） */
#header .c-gnav a::after,
.l-fixHeader .c-gnav a::after {
  background: var(--ds-mint);
}

/* --- 16-3. ボタン（サイト全体・pill＝完全丸め・bold） ---
   ★ボタンだけは例外で pill（border-radius:100px）＋太字（根本さん指定 2026-07-08）。
   コンテンツ（表/コード/引用/画像）は角丸0のまま。プライマリは ink地＋白文字。 */
.wp-block-button__link,
.swell-block-button__link,
.c-btn,
#header .l-header__customBtn a {
  border-radius: 100px;
  font-weight: 700;
}

/* SWELL独自ボタンは半径を CSS変数 --the-btn-radius で持つため pill(100px) に上書き。
   実物ボタンは現状ほぼ無いが、将来のCTA/アフィリボックスでの取りこぼしを防ぐ。 */
.is-style-btn_normal,
.is-style-btn_solid,
.is-style-btn_shiny,
.is-style-btn_line,
.swell-block-button__link {
  --the-btn-radius: 100px;
}

/* 塗りボタン（背景未指定のコアボタン）＝inkプライマリ */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):not(.ds-btn-accent) {
  background-color: var(--ds-ink);
  color: var(--ds-on-dark);
  transition: background-color var(--ds-ease);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):not(.ds-btn-accent):hover {
  background-color: var(--ds-charcoal);
}

/* アウトラインボタン: ink線＋ink文字（pill 100px） */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: var(--ds-ink);
  color: var(--ds-ink);
  border-radius: 100px;
}

/* アクセントボタン（差し色・多用しない）: 深緑地＋白文字・pill(100px)。
   使うときにクラス .ds-btn-accent を付与する。
   ★コントラスト対応（B採用・根本さん 2026-07-08）: 白文字を読みやすくするため地色を
     明るいミント#00d4a4(白で約1.9:1・AA不合格) → 深緑 --ds-mint-link(#0a7d63・白で約5.1:1・AA合格) に変更。 */
.ds-btn-accent,
.wp-block-button__link.ds-btn-accent {
  background-color: var(--ds-mint-link);
  color: var(--ds-on-dark);
  border-radius: 100px;
  transition: background-color var(--ds-ease);
}
.ds-btn-accent:hover,
.wp-block-button__link.ds-btn-accent:hover {
  background-color: #095c47; /* #0a7d63 の押下（濃色・同色相） */
}

/* --- 16-4. ページャー（ページネーション） ---
   SWELL既定は #dedede地/影/丸め＋current・hoverで --color_main(=ink)地+白文字。
   ボタンと同じ硬質・クリーンなトーンに: シャープ(角丸0)・影なし・
   通常= canvas地+1px hairline+ink、現在地= ink地+白文字、hover= surface で控えめ。
   .c-pagination スコープで SWELL の `[class*=page-numbers]`(0,1,0/0,2,0) に勝つ。 */
.c-pagination [class*="page-numbers"] {
  background-color: var(--ds-canvas);
  color: var(--ds-ink);
  border: 1px solid var(--ds-hairline);
  border-radius: 0;
  box-shadow: none;
}
/* 現在地: ink地＋白文字 */
.c-pagination [class*="page-numbers"].current {
  background-color: var(--ds-ink);
  color: var(--ds-on-dark);
  border-color: var(--ds-ink);
}
/* hover（現在地以外）: surface で控えめに（SWELL既定の ink地+白文字を上書き） */
.c-pagination a[class*="page-numbers"]:hover:not(.current) {
  background-color: var(--ds-surface);
  color: var(--ds-ink);
  border-color: var(--ds-hairline);
}


/* =============================================================================
   17. サイト外装 ③-b: フッター
   -----------------------------------------------------------------------------
   方針: Mintlify風・白基調・落ち着いたグレー文字・角丸0・グリーンは基本不使用
   （フッターはニュートラル）。フッター要素は <footer id="footer" class="l-footer">。
   -----------------------------------------------------------------------------
   洗い出した SWELL 既定（modules/parts/footer.css ＋ main.css）と勝たせ方:
   ・.l-footer (0,1,0) bg=footer_bg/色=footer_text（既に :root:root で canvas/steel）→ #footer(1,0,0)で上辺線追加
   ・.l-footer__foot,.l-footer__widgetArea{padding:1em}(0,1,0) → #footer .x(1,1,0)で余白拡張
   ・.c-widget__title{font-weight:700}(0,1,0) → #footer .c-widget__title.-footer(1,2,0)で中太字ink
   ・.c-widget__title.-footer:before{background:currentcolor!important}(0,2,1・!importantはbg限定)
        → #footer …::before/::after(1,2,1)の display:none で装飾バーを抑制（displayに!importantは無いので勝つ）
   ・.l-footer__nav a:hover{underline}(0,2,1) → #footer …:hover(1,2,1)で色をinkに（下線は活かす）
   ・.l-footer a,.l-footer span{color:inherit}(0,1,1) → #footer a:hover(1,1,1)でhover ink
   いずれも #footer(ID)で確実に上回る。!important 不使用。 */

/* 17-1. フッター全体: 上辺に hairline の区切り（本文との分離）。地色は既存の canvas。 */
#footer.l-footer {
  border-top: 1px solid var(--ds-hairline);
}

/* 17-2. 余白（DESIGN footer-region: section〜xxl 目安。左右は SWELLコンテナに委ねる） */
#footer .l-footer__widgetArea {
  padding-top: var(--ds-space-section-sm);  /* 48px */
  padding-bottom: var(--ds-space-xl);        /* 24px */
}
#footer .l-footer__foot {
  padding-top: var(--ds-space-xl);           /* 24px */
  padding-bottom: var(--ds-space-xxl);       /* 32px */
}

/* 17-3. ウィジェット/セクション見出し: 派手な装飾バーを抑え、ink の中太字にクリーン化 */
#footer .c-widget__title.-footer {
  color: var(--ds-ink);
  font-weight: 500;
}
/* SWELL既定の装飾バー（::before/::after）を抑制（displayなので !important background と競合しない） */
#footer .c-widget__title.-footer::before,
#footer .c-widget__title.-footer::after {
  display: none;
}

/* 17-4. フッターリンク: 本文リンクと同じ深緑(mint-link)。hover で下線(mint)。
   #footer a(1,0,1) で SWELL の .l-footer a{color:inherit}(0,1,1) に勝つ。 */
#footer a {
  color: var(--ds-mint-link);
  text-decoration: none;
  transition: opacity var(--ds-ease);
}
#footer a:hover {
  color: var(--ds-mint-link);
  text-decoration: none;
  opacity: 0.8;   /* 目次と同じ hover フェード */
}
/* SWELL はフッターナビ hover に下線を付けるので、明示的に打ち消す（(1,2,1)で勝つ）。 */
#footer .l-footer__nav a:hover {
  color: var(--ds-mint-link);
  text-decoration: none;
}
/* フッターナビの区切り線: SWELL は `border:1px solid`(色指定なし=currentColor)で引くため、
   リンクの緑が線に乗ってしまう。区切り線だけ薄いグレー(hairline)に固定し、文字色と独立させる。
   (1,2,1) で SWELL の `.l-footer__nav a`(0,2,1)・`li:first-child a`(0,3,1) に勝つ。 */
#footer .l-footer__nav a {
  border-color: var(--ds-hairline);
}


/* =============================================================================
   18. サイト外装 ③-c①: トップ記事一覧カード（`.p-postList.-type-card`）
   -----------------------------------------------------------------------------
   投稿リスト「カード型」（customizer で選択）を承認モックに寄せる。
   カード型は 2カラム(PC 50%) / 1カラム(SP 100%) / 3カラム(wide 33%) を SWELL が担当
   → 我々は display/width/margin は触らず、見た目（枠・余白・タイポ・chip）だけ足す。
   角丸0・白基調・グリーン不使用（chipのink地は既存）。

   競合と詳細度: SWELL のカード規則は `.p-postList.-type-card .p-postList__x`(0,3,0)。
   我々も同(0,3,0)で、子テーマは親CSSより後に読み込まれるため同詳細度でも勝つ。
   カード枠(border/bg/影)は SWELL が未指定なので競合なし。IDは無いので #不要。 */

/* カード枠: 白・1px hairline・角0・hoverでうっすら影 */
.p-postList.-type-card .p-postList__link {
  background: var(--ds-canvas);
  border: 1px solid var(--ds-hairline);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow var(--ds-ease), border-color var(--ds-ease);
}
.p-postList.-type-card .p-postList__link:hover {
  box-shadow: var(--ds-shadow-2);
}

/* サムネイル: 角0（16:9等のアスペクトは SWELL 既定に委ねる） */
.p-postList.-type-card .p-postList__thumb,
.p-postList.-type-card .c-postThumb,
.p-postList.-type-card .c-postThumb img {
  border-radius: 0;
}

/* カテゴリchip: 左上・ink地・白文字・角0・無地（モック準拠） */
.p-postList.-type-card .c-postThumb__cat {
  left: 0;
  right: auto;
  top: 0;
  transform-origin: 0 0;
  background-color: var(--ds-ink);
  border-radius: 0;
}
.p-postList.-type-card .c-postThumb__cat,
.p-postList.-type-card .c-postThumb__cat a {
  color: var(--ds-on-dark);   /* ink地の上なので白（--color_link=inkの誤継承を防ぐ） */
}

/* 本文域: カード内に余白（SWELL既定は padding-top:1em のみ） */
.p-postList.-type-card .p-postList__body {
  padding: var(--ds-space-md);   /* 16px */
}

/* タイトル: ink・700・15px・1.5行 */
.p-postList.-type-card .p-postList__title {
  color: var(--ds-mint-link);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

/* 抜粋: steel・12.5px・2〜3行 */
.p-postList.-type-card .p-postList__excerpt {
  color: var(--ds-steel);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 日付/メタ: stone・11px */
.p-postList.-type-card .p-postList__meta {
  color: var(--ds-stone);
  font-size: 11px;
}


/* =============================================================================
   19. サイト外装 ③-c③: サイドバー ＋ 新着/人気タブ
   -----------------------------------------------------------------------------
   サイドバー要素は <aside id="sidebar" class="l-sidebar">。#sidebar(ID=1,0,0) で
   SWELL のインライン/クラス規則を確実に上回る。角丸0・グリーンは差し色のみ。

   競合（SWELL既定）:
   ・ウィジェット見出し = 動的インライン（Widget.php, 既定 sidettl_type='b_bottom'）:
       `.c-widget__title.-side::before{width:40%; background:var(--color_main)=ink}` (0,2,1)
       `.c-widget__title.-side::after{width:100%; background:var(--color_border)=hairline}` (0,2,1)
     → #sidebar …::before(1,2,1) で確実に勝ち、アクセントバーを **mint** に（見出しに色を付ける）。
   ・検索 `.c-searchForm__s{background:#fff}`(0,1,0)/`__submit{border-radius:var(--swl-radius--4)}`(0,1,0)
   ・タブ `.c-tabList__button`＋`[aria-selected=true]`(0,2,0) 各種 is-style 変種。
   ============================================================================= */

/* 19-1.【最優先】ウィジェット見出し: h2 と同じ「左4pxミントの縦バー」で色をはっきり付ける。
   （旧: SWELL既定の ::before=40%下線バーを mint 化 → 細くてほぼ見えず弱かったので変更）
   SWELL既定の ::before(40%下線バー) は無効化し、::after の全幅 hairline 下線だけ残す
   ＝二重装飾を避け主役を左縦バーに。文字は ink 太字（既定のまま）。h2 と同じ見え方。 */
#sidebar .c-widget__title.-side {
  border-left: 4px solid var(--ds-mint);
  padding-left: 0.6em;
}
#sidebar .c-widget__title.-side::before {
  display: none;   /* 40%下線バーを無効化（左縦バーと二重にしない）。下線は ::after(hairline) が担当 */
}

/* 19-2. サイドバーのリスト: リンク色のみ steel / hover ink。
   ★回帰対策・重要: 余白/パディング/区切りは触らない（SWELL既定に委ねる）。
   SWELL のリストは `.c-listMenu a` が display:block＋border-bottom(=--color_border=hairlineの区切り)＋
   `padding:.75em 1em .75em 1.5em`、カテゴリ/アーカイブは `padding-left:1.75em` を持ち、
   これがアイコン擬似要素（`::before; position:absolute; left:2px`）用の**左余白**を確保している。
   以前ここに `padding:.5em 0`/独自 border を足して **左余白を潰しアイコンと本文が重なる回帰**を
   起こしたため撤去。区切り線も SWELL の border-bottom が既に hairline なので追加不要。
   → 触るのは color だけ（padding/レイアウト/擬似要素には一切干渉しない）。 */
/* リンクは本文と同じ深緑(mint-link)。hover で下線(mint)。色/装飾のみ・padding等は不変（回帰対策）。 */
#sidebar .c-widget a {
  color: var(--ds-mint-link);
  text-decoration: none;
  transition: opacity var(--ds-ease);
}
/* hover は下線なし＋目次と同じ opacity:.8 フェード（プロフィールの緑ボタンは除外）。 */
#sidebar .c-widget a:not(.ainote-profile__btn):hover {
  text-decoration: none;
  opacity: 0.8;
}

/* 19-2b. アーカイブ・ブロックのホバーずれ修正
   SWELL は categories ブロック（.wp-block-categories-list>li>a）に基準 padding-left:1.75em を与えるが、
   archives ブロック（.wp-block-archives-list>li>a）には与えていない。そのため汎用
   `.c-listMenu a:hover{padding-left:1.75em}` により **アーカイブのリンクだけ hover で 0.25em 右にずれる**。
   → archives も同じ 1.75em に揃え、ホバーのガタつきを解消（categories とインデントも一致）。
   padding-left のみ・#sidebar スコープ。(1,1,2) で `.c-listMenu a`(0,2,0) に勝ち、hover も含め常に 1.75em。 */
#sidebar .wp-block-archives-list > li > a {
  padding-left: 1.75em;
}

/* 19-3. 検索ボックス: 入力欄=1px hairline・角0・白／送信ボタン=角0（既存の ink 地 u-bg-main を活かす） */
#sidebar .c-searchForm__s {
  background-color: var(--ds-canvas);
  border: 1px solid var(--ds-hairline);
  border-radius: 0;
}
#sidebar .c-searchForm__submit {
  border-radius: 0;
}

/* =============================================================================
   19-4. 新着/人気タブ（`.p-postListTab` / `.c-tabList__button`）※メイン記事一覧の上
   -----------------------------------------------------------------------------
   SWELL の is-style 変種（塗り/枠/下線）を、クリーンな下線トーンに統一:
   非アクティブ=steel（既定の dim/塗り/枠を無効化）、アクティブ=ink＋太字、
   ベースライン=hairline、アクティブ標識(::after 2pxバー)=mint（active状態の差し色）。
   .p-postListTab スコープ(+1クラス)で SWELL の (0,1,x)/(0,2,x) を上回る。 */
.p-postListTab .c-tabList__button {
  background: none;          /* 塗り変種(gray/ink)を無効化 */
  border: 0;                 /* 枠変種を無効化 */
  box-shadow: none;
  color: var(--ds-steel);
  opacity: 1;                /* 既定の dim(.5/.7) をやめ steel で表現 */
}
.p-postListTab .c-tabList__button[aria-selected="true"] {
  background: none;
  color: var(--ds-ink);
  font-weight: 700;
}
/* ベースラインの薄線を hairline に */
.p-postListTab .c-tabList__button::before {
  background-color: var(--ds-hairline);
  opacity: 1;
}
/* アクティブ標識バーを mint に */
.p-postListTab .c-tabList__button[aria-selected="true"]::after {
  background-color: var(--ds-mint);
}


/* =============================================================================
   20. アーカイブ見出しの副題（「– category –」等の種類ラベル）を非表示
   -----------------------------------------------------------------------------
   カテゴリ/タグ/日付アーカイブの `.c-pageTitle__subTitle`（斜体の "– category –"）は
   ページ名＋パンくずと重複し不要（根本さん指定）。アーカイブ(.archive)でのみ非表示。
   ※検索結果(.search)の副題（検索語）は残すため .archive にスコープ。 */
.archive .c-pageTitle__subTitle {
  display: none;
}


/* =============================================================================
   22. サイドバー プロフィールカード（custom_html ウィジェット .ainote-profile）
   -----------------------------------------------------------------------------
   運営者「アカリ」のプロフィール。丸アイコン＋名前＋紹介文＋深緑pillボタン。
   承認モックのプロフィールカードに準拠。#sidebar スコープ。 */
#sidebar .ainote-profile {
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-hairline);
  padding: 24px 18px;
  text-align: center;
}
#sidebar .ainote-profile__av {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
}
#sidebar .ainote-profile__name {
  font-weight: 700;
  color: var(--ds-ink);
  font-size: 15px;
}
#sidebar .ainote-profile__bio {
  font-size: 12.5px;
  color: var(--ds-steel);
  line-height: 1.9;
  letter-spacing: normal;
  margin: 8px 0 16px;
  text-align: left;
}
/* ボタンは <a>。#sidebar .c-widget a(1,1,1) に勝つよう a.クラス を含め (1,2,1) にする（白文字を確実に）。 */
#sidebar .ainote-profile a.ainote-profile__btn {
  display: inline-block;
  background: var(--ds-mint-link);
  color: var(--ds-on-dark);
  font-weight: 700;
  font-size: 12px;
  padding: 9px 20px;
  border-radius: 100px;
  transition: background-color var(--ds-ease);
}
#sidebar .ainote-profile a.ainote-profile__btn:hover {
  background: #095c47;
  color: var(--ds-on-dark);
}


/* =============================================================================
   23. お問い合わせフォーム（Contact Form 7 / .ainote-form）
   -----------------------------------------------------------------------------
   CF7 素のフォームを AINOTE のトーンに統一する。
   ・入力欄 = 1px hairline・角0・白。フォーカスでミント枠。
   ・送信ボタン = 深緑 pill ＋ 白太字（.ds-btn-accent と同トーン）。
   ・「必須」バッジ／バリデーション文言／送信結果も配色を揃える。
   フォームは <div class="wpcf7"> > form.wpcf7-form > <div class="ainote-form"> 構造。 */

/* 各項目（<p>ラベル）の縦間隔 */
.ainote-form p {
  margin: 0 0 20px;
}
.ainote-form label {
  display: block;
  font-weight: 700;
  color: var(--ds-ink);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: normal;
}

/* 「必須」バッジ */
.ainote-form__req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-on-dark);
  background: var(--ds-mint-link);
  border-radius: 100px;
  vertical-align: 1px;
}

/* 入力欄: 1px hairline・角0・白。SWELL既定(0,1,1)に勝つ (0,2,1)。 */
.ainote-form input[type="text"],
.ainote-form input[type="email"],
.ainote-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--ds-hairline);
  border-radius: 0;
  background: var(--ds-canvas);
  color: var(--ds-charcoal);
  font-size: 15px;
  box-shadow: none;
  transition: border-color var(--ds-ease), box-shadow var(--ds-ease);
}
.ainote-form textarea {
  min-height: 180px;
  resize: vertical;
}
.ainote-form input[type="text"]:focus,
.ainote-form input[type="email"]:focus,
.ainote-form textarea:focus {
  outline: none;
  border-color: var(--ds-mint);
  box-shadow: 0 0 0 3px rgba(0, 212, 164, 0.15);
}

/* 送信ボタン: 深緑 pill・白太字。.wpcf7 スコープで SWELL 既定に勝つ (0,3,1)。 */
.wpcf7 .ainote-form input[type="submit"] {
  display: inline-block;
  background: var(--ds-mint-link);
  color: var(--ds-on-dark);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 100px;
  padding: 13px 40px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--ds-ease);
}
.wpcf7 .ainote-form input[type="submit"]:hover {
  background: #095c47;
}

/* バリデーション・送信結果メッセージ */
.wpcf7 .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 12.5px;
  font-weight: 400;
}
.ainote-form input.wpcf7-not-valid,
.ainote-form textarea.wpcf7-not-valid {
  border-color: #c0392b;
}
.wpcf7 .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--ds-hairline);
  border-radius: 0;
  font-size: 13.5px;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--ds-mint);
  background: rgba(0, 212, 164, 0.08);
  color: var(--ds-mint-link);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.06);
  color: #c0392b;
}