@charset "UTF-8";
/*
Theme Name: アメリカの経理部
Theme URI: https://america.f-br.com/
Description: 「アメリカの経理部」専用のフルスクラッチテーマ。ネオブルータリズム（ポップ）路線。ビルダー非依存、記事執筆は標準ブロックエディタ。
Author: アメリカの経理部
Version: 0.9.52
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: akb
*/

/* ==========================================================================
   デザイントークン
   出典: _akb-docs/america-keiribu-top.html / CLAUDE.md 3章
   ここが色とサイズの唯一の正本。個別CSSに生の色を書かないこと。
   ========================================================================== */
/*
  ■ 色の運用ルール（WCAG 2.1 AA 準拠。破ると訴訟リスクに直結する）

  1. --orange は「面」の色。載せる文字は必ず --ink（黒）。
     白文字を載せると 3.03:1 で不適合になる。ink なら 5.80:1 で適合する。
     黒文字＋黒枠＋ハードシャドウはネオブルータリズムの正統な組み合わせでもある。
  2. 明るい地（cream/paper）にオレンジの「文字」を置くときは --orange-deep を使う。
     --orange をそのまま文字にすると 2.69:1 で不適合。
  3. トークンを変えたら必ず _akb-docs/tools/contrast-check.php を実行して全PASSを確認する。

  基準: 通常テキスト 4.5:1 / 大きい文字(24px+ or 18.66px+bold) 3:1 / UI部品・フォーカス 3:1

  ■ 文字サイズの下限（視認性）
  日本語は 10〜11px になると急激に読みにくくなる。フォントを変えても解決しない。
  - 本文・長文: 14px 以上
  - ラベル・メタ情報など補助的な文字: 12px を下限とする
  - 免責事項など「読まれる必要がある」文章: 13px 以上かつ ink-45 以上の濃さ
  新しいCSSを書くときもこの下限を守ること。

  ■ タブレット・スマホの例外（2026-07-16 運営者決定）
  1023px以下のメディアクエリ内に限り、「装飾的なラベル」
  （タグ・チップ・英字の飾り文字・順位バッジなど、読めなくても
  ページの理解に支障がないもの）は 11px まで下げてよい。
  狭い幅ではレイアウトの収まりを優先できる、という趣旨。
  ただし次は例外の対象外（デバイスを問わず下限を維持する）:
  - 本文・見出し・リンク文字列・ボタン → 12px以上
  - 免責事項・注意書き → 13px以上
  例外を使った行には「モバイル例外」とコメントを付けること。
  （注: CSSコメントは入れ子にできない。この説明文の中にコメント記号を
   書くと、ここでコメントが閉じて :root ごとCSSが壊れる。実際に一度壊した）
*/
:root{
  --cream:#FFFFFF;   /* 2026-07-23: 白で統一（案3・白ベース＋ネイビーはアクセント） */
  --paper:#FFFDF6;
  --ink:#1A170F;
  --orange:#E8703A;      /* 面の色。文字は必ず ink を載せる（ink比 5.80:1） */
  --orange-deep:#BA4916; /* 明るい地に置くオレンジ文字用（cream比 4.51:1 / paper比 5.09:1） */
  --yellow:#F5D449;
  --streak:#E7DFCB;      /* ヒーロー見出しの疾走感=フラットな速度線（cream地の上） */
  --why-neg:#33454B;     /* 原因(課題)見出し用の暗色。ネガティブな課題だと一目で伝える深いスレート */
  --mint:#DDEEE2;
  --pinkish:#F6E0D8;
  --sky:#DEE6F0;
  --lilac:#E7E0EE;       /* お悩みカード5枚目用。既存4色と重ならない色相で、彩度は同じ帯に揃えた */
  --red-stamp:#C93B2E;

  /* 会社サイト新デザインの紺（front-page/service で確立。2026-07-24 全ページ刷新で共通トークン化）。
     旧ブルータリズム（--border/--shadow/paper地）を、この紺＋細ヘアラインへ段階置換していく。 */
  --navy:#16233C;          /* 紺バンド地・見出しインク */
  --navy-eyebrow:#7FA8E8;  /* 紺地の上のモノ体eyebrow（水色） */
  --navy-sub:#B9C3D8;      /* 紺地の上のリード・補足 */
  --hair:#E2E5EA;          /* 白地の細ヘアライン（旧 --border の置換先） */
  --field-line:#CBD2DE;    /* 入力欄の枠 */
  --callout:#F4F7FC;       /* 淡い青のコールアウト地 */
  --callout-line:#DCE4F0;

  /* --flag-blue はロゴをSVGに一本化した際に不要になったため削除。
     --flag-red は .form-btn（ツールの送信ボタン）が使用中 */
  --flag-red:#B22234;

  /* 派生色（HTMLに直書きされていた値をトークン化） */
  --ink-60:#3C382C;
  --ink-45:#6B6558;
  --ink-30:#726C60;      /* 小文字用。旧#8A8374は3.28:1で不適合だったため差し替え */
  --rule-dash:#D8D2C2;
  --ink-line:#46412F;

  /* 黒背景（.manifesto）の上に載る色 */
  --on-ink:#CFC9B4;        /* 本文（ink比 10.80:1） */
  --on-ink-muted:#8F8971;  /* 補足（ink比 5.10:1） */
  --stamp-light:#FF8A7A;   /* 黒地のハンコ文字（ink比 7.81:1） */

  /* tcdce互換のマーカー用（assets/css/article.css）。
     marker-880 が本文中に1038箇所あるため、黄色だと本文が黄色だらけになる。
     控えめな中間色を別に持つ。 */
  --marker-neutral:#E0D8C4;

  --shadow:4px 4px 0 var(--ink);
  --shadow-lg:6px 6px 0 var(--ink);

  --border:2.5px solid var(--ink);
  --border-heavy:3px solid var(--ink);

  /* コンテナ幅。オウンドメディア型（バズ部/はてなベース）に合わせ、PCで
     横をより広く使う（2026-07-23 運営者指示・1060→1280）。トップ・一覧・
     アーカイブ・ヘッダー/フッターが広がる。記事本文だけは
     article.css の .akb-article__inner が 760px で可読幅を維持する。 */
  --wrap:1280px;
  --gutter:24px;

  /* 本文フォント（2026-07-23 運営者指示で IBM Plex Sans JP → Noto Sans JP）。
     Noto Sans JP は 100〜900 のウェイトを持つので、見出しの font-weight:900 が
     実ウェイトで綺麗に出る（旧書体は700止まりだった）。
     フォールバックを明示しているのは、Webフォントが遅い/読めない環境で
     表示が大きくブレるのを防ぐため。
     数字・日付の等幅アクセント（--font-mono）は IBM Plex Mono を維持している。 */
  --font-base:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* ヘッダーの実測値（2026-07-17 修正）。旧68pxは初期実装時の値で、
     その後サイト名を23pxへ拡大した結果80pxになっていた。
     scroll-margin（アンカー先がヘッダーに潜るのを防ぐ）と
     スマホのドロワー高さ計算がこの値に依存する。 */
  --header-h:80px;
}

/* ==========================================================================
   リセット & ベース
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box;}
/* アンカーで飛んだ先が sticky ヘッダーの下に潜らないようにする。
   スクロール領域（html）側に余白を持たせる scroll-padding-top を使うこと。
   :target{scroll-margin-top} は「今ターゲットの要素」にしか効かず、
   ブラウザがスクロール位置を決める瞬間に適用済みかがタイミング依存になる。
   scroll-padding なら全てのページ内リンク（メニューの #manifesto / #bucho、
   記事の目次、ツールの結果表示）に一律で効く。 */
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
}
body{
  font-family:var(--font-base);
  background:var(--cream);
  color:var(--ink);
  line-height:1.8;
  font-size:15px;
  /* 横スクロール禁止（CLAUDE.md 6章の必須要件）。
     hidden ではなく clip を使うこと。overflow-x:hidden は overflow-y を
     auto に昇格させ body をスクロールコンテナ化するため、
     .site-header の position:sticky が効かなくなる。clip はスクロール
     コンテナを作らないので sticky と共存できる。 */
  overflow-x:clip;
}
a{color:inherit;}
/* フォーカス表示。キーボード操作者に現在位置が見えないのは WCAG 2.4.7 の直接的な失敗。
   --orange だと cream 上で 2.69:1 と基準(3:1)未満のため orange-deep を使う（4.51:1）。 */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--orange-deep);outline-offset:3px;}
img{max-width:100%;height:auto;}
.mono{font-family:var(--font-mono);}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
/* トップの本文だけ列幅を狭め、情報を中央に寄せて視認性を上げる（2026-07-23 運営者指示）。
   #main 内の .wrap にだけ効き、ヘッダー（.header-inner）とフッター（main外）は据え置き。 */
.home #main{--wrap:1040px;}

/* スクリーンリーダー専用。WordPressの標準クラス名に合わせる */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal !important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 20px;font-weight:900;
}
.skip-link:focus{left:0;}

/* ==========================================================================
   アイコンシステム（出典: Claude Design「アイコン仕様デッキ」2026-07）
   96×96・直角ジオメトリ・白ベース＋ビビッド差し色。色はカテゴリを示す機能なので
   CSSで塗り替えないこと（デッキ2章）。装飾なので aria-hidden。
   ホバーは親カードの「2px平行移動＋ハードシャドウ」に従う（回転・バウンス禁止）。
   ========================================================================== */
.akb-icon{display:block;width:48px;height:48px;flex-shrink:0;}
.akb-icon--sm{width:24px;height:24px;}
.akb-icon--lg{width:96px;height:96px;}
/* アイコンと見出しを横に並べる（アイコンの上に文字を重ねない） */
.akb-icon-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
/* カテゴリタイル（5島カード）の頭に置くとき */
/* カテゴリタイルのアイコンは右下（.kakari-foot 内）。上の余白指定は不要 */
/* margin-top:auto で下段を必ずカードの底に置く。カードの高さを5枚で揃えると
   本文の長さの差がそのまま余白になり、これが無いと「まとめて見る →」と
   アイコンの高さが1枚ずつバラつく。 */
.kakari-foot{display:flex;align-items:flex-end;gap:16px;margin-top:auto;padding-top:14px;}
.kakari-foot .akb-icon{margin-left:auto;flex:0 0 auto;}

/* 記事内CTA（マシュマロ導線）。記事だけでなく検索結果・404でも使うため
   style.css（全ページ読み込み）に置く。article.css だと検索・404で余白が
   効かず、カテゴリ一覧と詰まってしまう。 */
.akb-cta{
  background:var(--pinkish);
  border:1px solid #E7D3CB;
  border-radius:10px;
  box-shadow:none;
  padding:20px 22px;
  margin:0 0 34px;
  text-align:center;
}
.akb-cta--bottom{margin:44px 0 34px;}
.akb-cta__text{font-size:14px;line-height:1.8;margin:0 0 14px;color:var(--ink);}
.akb-cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* 免責（開業前サイト仕様§3.1-4 / §7）。qa・cases共通の固定文。控えめだが必ず読める体裁。 */
.akb-disclaimer{font-size:12.5px;line-height:1.9;color:var(--ink-60);margin:30px 0 0;padding:12px 16px;background:#F7F9FB;border:1px solid var(--hair);border-radius:8px;}

/* ── 開業前サイト仕様§4 のCTA（主=ブロック／従=1行リンク）。2026-07-24 新設。
   inc/cta.php が出力。記事末尾・qa・cases で主従を出し分ける。 */
.akb-cta2-wrap{margin:40px 0 8px;}
.akb-cta2{
  background:var(--callout);border:1px solid var(--callout-line);border-left:4px solid var(--orange);
  border-radius:10px;padding:26px 28px;text-align:left;
}
.akb-cta2__eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--orange-deep);margin:0 0 12px;}
.akb-cta2__title{font-size:18px;font-weight:900;line-height:1.55;color:var(--navy);margin:0 0 10px;}
.akb-cta2__lead{font-size:13.5px;line-height:1.95;color:#33415C;margin:0 0 18px;max-width:56ch;}
.akb-cta2__btn{align-self:flex-start;}
/* 従CTA：主ブロックの下に控えめな1行リンク。 */
.akb-cta2__sub{margin:12px 0 0;font-size:13px;text-align:center;}
.akb-cta2__sub a{color:var(--orange-deep);font-weight:700;text-decoration:none;}
.akb-cta2__sub a:hover{text-decoration:underline;}
@media (max-width:479px){
  .akb-cta2{padding:22px 18px;}
  .akb-cta2__btn{display:block;width:100%;text-align:center;}
}

/* ==========================================================================
   追従フローティングCTA（全ページ・2026-07-17）
   画面右下に固定。カード全体が1つの吹き出し（右上に×）。
   article.css から移設（全ページで読み込む style.css に置く必要があるため）。
   ========================================================================== */
.akb-fixed-cta{
  position:fixed;bottom:20px;right:20px;z-index:40;
  width:min(260px, calc(100vw - 32px));
  background:#fff;border:1px solid var(--hair);border-radius:12px;
  box-shadow:0 14px 34px -18px rgba(20,30,55,.5);
  padding:14px 16px 14px;
}
.akb-fixed-cta[hidden]{display:none;}
.akb-fixed-cta__close{
  position:absolute;top:-12px;right:-12px;
  width:30px;height:30px;flex-shrink:0;
  background:#fff;border:1px solid var(--hair);border-radius:50%;
  box-shadow:0 4px 10px -4px rgba(20,30,55,.4);
  cursor:pointer;font-size:16px;line-height:1;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.akb-fixed-cta__close:hover{background:#F4F6F9;border-color:#C9D2E0;}
/* フローティングCTAの吹き出し行（顔アイコンは2026-07-25に削除。__row は吹き出しのみ保持）。 */
.akb-fixed-cta__row{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;}
.akb-fixed-cta__bubble{
  font-size:13px;line-height:1.7;font-weight:700;color:var(--ink);margin:0;
}
.akb-fixed-cta__btn{
  display:block;text-decoration:none;text-align:center;
  background:var(--orange);color:var(--ink);
  border:1px solid transparent;border-radius:8px;
  padding:12px 16px;font-size:13.5px;font-weight:800;
  box-shadow:none;
  transition:opacity .15s ease;
}
.akb-fixed-cta__btn:hover{opacity:.92;}
@media (max-width:479px){
  /* 狭幅ではボタン主体に小さく。右下に寄せる */
  /* 幅220px→244px（2026-07-20）。顔を足したぶん吹き出しの幅が減り、
     220pxでは「ご相談くだ/さい」と3行に割れた。文字を12px未満に
     できない（サイトの下限）ため、幅の方を広げて2行を保つ */
  .akb-fixed-cta{bottom:12px;right:12px;width:min(244px,calc(100vw - 24px));padding:11px 13px;}
  /* 下余白はチャット行（__row）が持つ。bubble側に残すと二重に空く */
  .akb-fixed-cta__row{margin-bottom:8px;gap:8px;}
  .akb-fixed-cta__bubble{font-size:12px;}
  .akb-fixed-cta__btn{font-size:12.5px;padding:10px 14px;}
}

/* ==========================================================================
   ボタン
   ========================================================================== */
/* 2026-07-24 刷新：太枠＋ハード影＋ずれるホバーを外し、フラットな角丸ボタンへ。
   ※ オレンジ／黄の面には ink（黒）文字を載せるコントラスト則は維持（白文字は不適合）。 */
.btn{
  display:inline-block;text-decoration:none;text-align:center;
  font-weight:800;border:1px solid transparent;
  background:var(--ink);color:var(--paper);
  padding:12px 22px;border-radius:8px;font-size:14px;
  box-shadow:none;
  transition:background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
  cursor:pointer;font-family:inherit;
}
.btn:hover{opacity:.92;}
.btn-orange{background:var(--orange);color:var(--ink);}
.btn-yellow{background:var(--yellow);color:var(--ink);}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--field-line);}
.btn-lg{padding:15px 30px;font-size:15.5px;border-radius:9px;}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fff;                    /* 案3：白ベース（2026-07-23） */
  border-bottom:1px solid #E8E5DC;
  --brand-ul:#E8703A;                 /* 白地の下線はブランドのオレンジ */
}
/* ヘッダーだけは全幅（2026-07-23 運営者決定・参考バズ部）。本文は --wrap(1280px) で
   中央寄せのままだが、ヘッダーは max-width を外し、ブランドを左端・メニューを右端に置く。
   広い画面でも端に張り付くよう、左右の余白は clamp で控えめに伸ばす（24→48px）。 */
.header-inner{
  max-width:none;margin:0;padding:14px clamp(24px,3vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-decoration:none;}
/* サイト名の下に運営会社を小さく添える（2026-07-24 運営者指示）。モノ体・小さめ・控えめ色。
   サイト名の右端に寄せ、幅はサイト名の6割程度に収まる小ささにする（右寄せ＋小フォント）。 */
.brand-sub{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-45);margin-top:2px;line-height:1.2;align-self:flex-end;text-align:right;}
/* ロゴ（2026-07 運営者決定）。ヘッダーもファビコンも assets/img/logo.svg 1枚を共用し、
   意匠がズレないようにしている。図案はアイコンセットの akb-icon-calculator と同じ電卓。
   以前はここでCSSの2×2グリッド（星条旗のカントン＋ − × =）を組んでいたが、
   アイコン体系に一本化したため撤去した。 */
/* .brand-badge（ロゴ画像）は廃止。サイト名テキスト＋下線に置換（2026-07-23）。 */
/* サイト名（2026-07 運営者決定で 23px→28px）。上限は「ナビが出る最も狭い幅」=1024px で
   決まる。実測でこの幅のときブランドとナビの隙間は 28px:55px / 30px:37px / 32px:19px。
   ヘッダーの gap が16pxなので32pxは実質余裕ゼロ。55px残る28pxを採用した。 */
.brand-name{position:relative;display:inline-block;padding-bottom:9px;font-weight:900;font-size:20px;letter-spacing:0.01em;line-height:1.35;color:#16233C;} /* サイト名は通常字形。2026-07-24 運営者指示でイタリック解除・15→20pxに拡大 */
/* サイト名に添える下線（案A：右へ掠れてフェード。スピード感）。--brand-ul で色可変。 */
.brand-underline{position:absolute;left:0;bottom:0;width:100%;height:12px;overflow:visible;pointer-events:none;}
/* 「アメリカ」「経理部」だけ少し大きく（emで基準比・PC/SP両対応）。「の」は基準サイズのまま */
.brand-name .bn-lg{font-size:1.12em;}
/* ロゴと視覚的な中央を合わせるための微調整。
   flexのalign-items:centerは「行ボックス」を中央に置くが、行ボックスにはフォント由来の
   上下の余白が非対称に含まれるため、実際の字面（インク）は中央より上にずれる。
   canvasのactualBoundingBoxで実測したところ、字面の中心がアイコン中心より2.2px上だった
   （社名25px時）。このずれはフォントメトリクス由来でフォントサイズに比例するため、
   pxではなくemで指定して全ブレークポイントに追従させる（2.2 / 25 = 0.088em）。
   レイアウトを動かさないよう transform で行う。 */
.brand-name{transform:translateY(0.088em);}
/* キャッチコピー（.brand-tag）は2026-07-16に廃止。ヘッダーはロゴ＋サイト名のみ */
.global-nav{display:flex;align-items:center;gap:18px;}
/* リンク文字列の途中改行を禁止。これが無いと数px不足しただけで
   「このサイトについて」等が2行に折れ、ヘッダーの高さが崩れる */
/* ロゴと視覚的な中央を合わせるための微調整（サイト名の .brand-name と同じ理由）。
   箱の非対称は上の border-top で解消済みで、ここで消すのは残りのフォント由来のずれ。
   実測で6項目とも 1.6〜1.84px（平均1.74px / 文字サイズ13.5px = 0.129em）上にずれていた。
   ボタンにも同じ量をかけるのは、文字だけ動かすとボタンの中で文字が偏るため、
   ボタンごと下げて箱の中の中央を保つ狙い。
   .brand-name の 0.088em と値が違うのは、字面の実測が字種と文字サイズに依存し、
   13.5pxのような小さい文字ほど端数の影響が大きく出るため（どちらも実測値）。 */
.global-nav a{white-space:nowrap;transform:translateY(0.129em);}
/* border-top は下線(border-bottom:3px)の打ち消し用。下だけ3px高い箱を
   align-items:center で中央に置くと、見える文字が1.5px上にずれてしまうため、
   上にも同じ3pxの透明な枠を入れて箱を上下対称にしている。 */
.global-nav a.navlink{
  color:#33415C;text-decoration:none;font-size:13.5px;font-weight:700;
  border-bottom:3px solid transparent;border-top:3px solid transparent;padding:2px 0;
}
.global-nav a.navlink:hover{border-bottom-color:var(--orange);color:#16233C;}
/* 案3：濃紺ヘッダーのCTAはフラットなオレンジ（太枠・ハード影を外す）。文字は黒＝5.80:1。 */
.site-header .btn{border:none;box-shadow:none;border-radius:6px;padding:11px 20px;}
.site-header .btn:hover{transform:none;box-shadow:none;}
.site-header .btn-orange:hover{background:#D9642F;}
.global-nav .current-menu-item > a.navlink{border-bottom-color:var(--orange);}

/* 記事検索窓（2026-07-23）。運営者情報とCTAの間。配色はサイトのネイビー系＋淡いグレー地。
   角丸はヘッダーCTA（6px）に合わせる。translateY はナビ各要素と同じ光学中央合わせ。 */
.akb-search{
  display:flex;align-items:center;gap:6px;
  width:260px;height:40px;min-width:0;
  padding:0 8px 0 14px;
  background:#F5F7FA;border:1px solid #DFE3EB;border-radius:6px;
  transform:translateY(0.129em);
}
.akb-search:focus-within{border-color:#33415C;background:#fff;}
.akb-search__input{
  flex:1;min-width:0;
  border:none;background:transparent;
  font-family:inherit;font-size:13.5px;color:#16233C;line-height:1.2;padding:0;
}
.akb-search__input::placeholder{color:#7B8494;opacity:1;}
.akb-search__input:focus{outline:none;}
/* 検索アイコンボタン。既定はネイビー、ホバーでオレンジのアクセント。 */
.akb-search__btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex-shrink:0;
  border:none;background:transparent;color:#33415C;cursor:pointer;padding:0;
}
.akb-search__btn:hover{color:var(--orange);}

/* ハンバーガー（スマホのみ表示。JSはassets/js/nav.js） */
.nav-toggle{
  display:none;
  width:44px;height:44px;              /* タップ領域44px以上（CLAUDE.md 6章） */
  background:#fff;border:1px solid #DFE3EB;border-radius:8px;
  box-shadow:none;
  cursor:pointer;padding:0;
  align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .12s ease, box-shadow .12s ease;
}
.nav-toggle:active{opacity:.75;}
.nav-toggle-bars{position:relative;width:20px;height:14px;display:block;}
.nav-toggle-bars span{
  position:absolute;left:0;width:100%;height:2.5px;
  background:#16233C;border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars span:nth-child(1){top:0;}
.nav-toggle-bars span:nth-child(2){top:5.75px;}
.nav-toggle-bars span:nth-child(3){bottom:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5.75px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5.75px) rotate(-45deg);}

/* ==========================================================================
   セクション共通
   ========================================================================== */
.section{padding:60px 0;}
.sec-head{margin-bottom:34px;}
/* 見出しの右上にセクションの主題を表すアイコンを置く版。
   絶対配置ではなく flex の2カラムにして、見出しが何行に折り返しても
   文字とアイコンが構造的に重ならないようにしている。
   align-items:flex-start なので、アイコンは見出しブロックの「右上」に付く。 */
/* eyebrow を1行目、h2とアイコンを2行目に置く2列グリッド。
   flex で中央揃えにすると「eyebrow＋h2」全体の中心で揃ってしまい、
   実測でアイコンがh2の中心より18px上にずれた。gridでh2と同じ行に入れれば
   align-self:center が h2 だけを基準にするので、見出しの行数が変わっても正確に揃う。
   列幅を auto にしているのは、右端まで飛ばすと見出しとアイコンの関係が
   読み取れないため（見出しのすぐ右に置く）。 */
.sec-head--icon{
  display:grid;grid-template-columns:auto auto;justify-content:start;
  column-gap:20px;align-items:start;
}
/* eyebrow は2列にまたがらせて左端を保つ。アイコン列に押し出すと、
   アイコンの無い他セクションの eyebrow と左端が揃わなくなるため */
.sec-head--icon > .sec-eyebrow{grid-column:1 / -1;grid-row:1;}
.sec-head--icon > .akb-icon{grid-column:1;grid-row:2;align-self:center;}
.sec-head--icon > h2{grid-column:2;grid-row:2;min-width:0;}
/* 狭い画面では96pxのままだと見出しの幅を奪うので縮める */
@media (max-width:900px){
  .sec-head--icon{gap:18px;}
  .sec-head--icon .akb-icon--lg{width:64px;height:64px;}
}
/* 520px以下では横に並べるとアイコンが見出しの幅を奪い、行数が増えて読みにくくなる
   （実測: 2行→4行）。縦積みにして見出しに全幅を戻し、アイコンは右上に置いたままにする。
   column-reverse なので DOM順（テキスト→アイコン）のままアイコンが上に来る。 */
@media (max-width:520px){
  .sec-head--icon{grid-template-columns:1fr;row-gap:10px;}
  .sec-head--icon > .sec-eyebrow{grid-column:1;grid-row:2;}
  .sec-head--icon > h2{grid-column:1;grid-row:3;}
  .sec-head--icon > .akb-icon{grid-column:1;grid-row:1;justify-self:start;align-self:auto;}
  .sec-head--icon .akb-icon--lg{width:52px;height:52px;}
}
.sec-eyebrow{
  display:inline-block;font-family:var(--font-mono);
  font-size:14.5px;letter-spacing:0.16em;color:var(--orange-deep);
  font-weight:700;margin-bottom:10px;
}
/* 伸縮率 4.4vw は計算値（2026-07-17）。
   ヒーローの見出し「アメリカでの経理の悩みは、ここで片付ける。」は
   46pxで980px必要。4.6vwだと1024px幅（iPad横）で本文幅976pxに4px足りず
   2行に折れていた。4.4vwなら46pxで頭打ちになるのが1045px以上、
   それ未満は幅に応じて縮むため、約800pxまで1行を保てる。
   ※上限46pxは据え置き＝広い画面の見え方は変わらない。
   他のh1（.page-head / .tool-head / .desk-head）は独自指定を持つので影響しない。 */
h1{
  font-size:clamp(32px,4.4vw,46px);font-weight:900;
  line-height:1.42;letter-spacing:0.01em;margin-bottom:20px;
}
h2{font-size:clamp(24px,3.2vw,32px);font-weight:900;line-height:1.5;}
.sec-lead{font-size:14px;color:var(--ink-60);margin-top:12px;max-width:560px;}
.hl-orange{color:var(--orange-deep);}
.hl-marker{
  background:linear-gradient(transparent 62%, var(--yellow) 62%);
  padding:0 2px;
}
/* ヒーロー見出しの疾走感（2026-07 運営者決定・案A）:
   見出し全体を左傾スラント＋背後にフラットな速度線（ぼかさない）。
   参考画像のブラー/緑/ツヤは使わず、硬い縁・べた塗りの世界観に翻訳。
   速度線は ::before を h1 の背面(isolate＋z-index:-1)に置き、文字は前面のまま。 */
.hero h1{
  position:relative;isolation:isolate;overflow:hidden;
  transform:skewX(-9deg);transform-origin:left center;
}
/* PCだけ「その日のうちに解決。」を独立した3行目に落とす（2026-07-19 運営者指示）。
   タブレット・スマホは幅が足りず、強制改行を足すと行数が増えるだけなので
   ブラウザ任せの折り返しに戻す。
   ※ 一度この改行を入れずに2行へ収めようとしてヒーローのh1を40pxまで
      縮めたが、3行構成なら2行目が14文字に収まり縮小は不要になったため、
      共通のclamp（上限46px）に戻してある。 */
.br-pc{display:none;}
@media (min-width:1024px){
  .br-pc{display:inline;}
}
.hero h1::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(0deg, var(--streak) 0 4px, transparent 4px 13px);
  -webkit-mask:linear-gradient(90deg, transparent 8%, #000 65%);
          mask:linear-gradient(90deg, transparent 8%, #000 65%);
  transform:skewX(-9deg) scaleX(1.15);transform-origin:right center;
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero{padding:64px 0 56px;}
/* 縦1本の構成（2026-07-17）: 宣言 → 誘い → 仕切り → 自分ごと。
   旧 .hero-grid（2カラム）は廃止。全幅で同じ構造になったため、
   幅ごとのレイアウト分岐は不要になった。 */
/* 見出しは1行で見せたいので幅を絞らない。
   リード文だけは行長を制限する（下記 .hero-lead） */
.hero-intro{max-width:none;}

/* 仕切り: 「宣言」と「自分ごと化」を別ブロックとして示す帯 */
.hero-band{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:var(--border);margin-top:38px;padding-top:18px;margin-bottom:18px;
}
.hero-band h2{font-size:clamp(21px,2.5vw,26px);font-weight:900;margin:0;}
.hero-band span{font-size:14.5px;color:var(--ink-45);}
/* 「すべて無料・登録不要です。」の下線（安心材料の強調・2026-07 運営者指示） */
.hero-band .u-line{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.eyebrow{
  display:inline-block;background:var(--yellow);
  border:2px solid var(--ink);padding:5px 15px;
  font-size:14.5px;font-weight:700;letter-spacing:0.08em;
  box-shadow:3px 3px 0 var(--ink);margin-bottom:22px;
}
/* 460px は2カラム時代の名残だった（2026-07-17 縦組み化で修正）。
   全幅（1012px）に伸ばすと1行70字を超えて目が疲れるため、
   日本語の可読域（1行45〜50字前後）に収まる 800px を上限にする。 */
.hero-lead{font-size:14.5px;line-height:2.05;color:var(--ink-60);max-width:800px;margin-bottom:26px;}
/* （.hero-cta-row / .hero-cta-note は 2026-07-17 に廃止。
     ヒーローのCTAはペルソナカードの8リンクが担う） */

/* ==========================================================================
   トップのヒーロー刷新（2026-07-23 運営者決定・参考「バズ部」トップ）
   大見出し（キャッチコピー）＋2つの行動カード（左＝匿名相談／右＝サービス）。
   旧・疾走感の見出し（skewX＋速度線 ::before）は使わず、案3の白ベース＋
   ネイビーの落ち着いた企業サイトの体裁に合わせる。
   ※ .hero .〜 で .hero h1 / .hero h1::before（特異度0,1,1・0,1,2）を確実に上書き。
   ========================================================================== */
.hero .home-hero__title{
  transform:none;overflow:visible;isolation:auto;
  font-size:clamp(26px,3.4vw,42px);line-height:1.5;font-weight:900;
  letter-spacing:0.01em;color:#16233C;text-wrap:balance;
  margin:0 0 38px;
}
.hero .home-hero__title::before{content:none;display:none;}
/* .home-hero__brand（社名イタリック＋掠れるオレンジ下線）は 2026-07-24 運営者指示で撤去。
   見出しは「私たちは、日々の経理業務を…」の装飾なしプレーンな一文に変更。 */

/* 2枚のカードは中央の境界で接する（左白／右濃紺）。外周に細い枠。 */
.home-actions{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid #DFE3EB;
  /* 参考「バズ部」トップと同じく、2枚まとめて柔らかい影を落とす（2026-07-23）。 */
  box-shadow:0 22px 55px -24px rgba(22,35,60,.32);
}
.home-action{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:52px 44px 46px;min-width:0;text-decoration:none;
  transition:background-color .15s ease;
}
/* 左の相談カードは影を濃くして前に出す（2026-07-25 運営者指示）。z-indexで隣カードの上に影を落とす。 */
.home-action--light{background:#fff;color:#16233C;position:relative;z-index:1;box-shadow:0 6px 28px -18px rgba(22,35,60,.18);}
.home-action--dark{background:#16233C;color:#fff;}
.home-action--light:hover{background:#F5F7FA;}
.home-action--dark:hover{background:#1D2C48;}
/* アイコン（参考のブルー系を、当サイトのネイビー family に翻案）。 */
.home-action__icon{display:block;margin-bottom:24px;color:#33507F;}
.home-action--dark .home-action__icon{color:#8AA0CF;}
.home-action__title{font-size:clamp(18px,1.9vw,21px);font-weight:900;line-height:1.65;margin:0 0 16px;}
.home-action__desc{font-size:13.5px;line-height:1.95;margin:0 0 30px;max-width:360px;}
.home-action--light .home-action__desc{color:var(--ink-60);}
.home-action--dark .home-action__desc{color:#B9C3D8;}
/* 相談カード内の強調（2026-07-25 運営者指示：背景は白のまま・文字色も本文のまま、
   オレンジの極太下線だけ残す）。 */
.home-action__hl{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px;}
/* 左＝主CTA（塗り。ヘッダーの相談CTAと同じオレンジ地・黒文字＝5.80:1）。
   下端そろえのため margin-top:auto でカード内で最下部に固定。 */
.home-action__btn{
  margin-top:auto;width:100%;max-width:320px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--orange);color:var(--ink);
  font-size:15px;font-weight:900;padding:16px 24px;border-radius:6px;
}
.home-action--light:hover .home-action__btn{background:#D9642F;}
/* 右＝テキストリンク（白文字＋丸囲みの矢印）。 */
.home-action__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:12px;
  color:#fff;font-size:15px;font-weight:900;
}
.home-action__arrow{font-weight:900;}
.home-action__more .home-action__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1.6px solid #7E93C8;border-radius:50%;
  font-size:14px;line-height:1;transition:border-color .15s ease,background-color .15s ease;
}
.home-action--dark:hover .home-action__more .home-action__arrow{border-color:#fff;}

/* スマホ・狭幅は縦積み（2カラムだと各カードが窮屈になる760px以下で切替）。 */
@media (max-width:760px){
  .home-actions{grid-template-columns:1fr;}
  .home-action{padding:40px 26px 36px;}
  .home-action--light{border-bottom:1px solid #DFE3EB;}
  .hero .home-hero__title{margin-bottom:28px;}
}

/* ==========================================================================
   注目記事スライダー（案C：固定ラベル＋1件スライド。2026-07-23 運営者決定）
   CTAカード（.home-actions）の直下に、枠を地続きにして薄く1本置く。
   ========================================================================== */
.pickup{margin-top:44px;}   /* CTAカードとの間隔（2026-07-25 運営者指示でさらに拡大 24px→44px） */
.pickup__bar{
  display:flex;align-items:stretch;
  background:#fff;border:1px solid #DFE3EB;
}
.pickup__label{
  flex-shrink:0;background:#16233C;color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:12px 22px;white-space:nowrap;
}
.pickup__en{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:#8AA0CF;line-height:1.2;}
.pickup__jp{font-size:14px;font-weight:800;margin-top:2px;}
.pickup__view{position:relative;flex:1;min-width:0;display:flex;align-items:center;}
.pickup__list{position:relative;list-style:none;margin:0;padding:0;flex:1;min-width:0;}
/* 全件を重ねて置き、先頭だけ in-flow にして行の高さを決める。表示中のみ不透明。 */
.pickup__item{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transition:opacity .35s ease;}
.pickup__item:first-child{position:relative;}
.pickup__item.is-active{opacity:1;visibility:visible;}
.pickup__link{display:flex;align-items:center;gap:20px;padding:15px 24px;text-decoration:none;color:#16233C;}
.pickup__cat{flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.02em;color:#BA4916;white-space:nowrap;border-left:3px solid var(--orange);padding-left:9px;line-height:1.3;}
.pickup__title{flex:1;min-width:0;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pickup__link:hover .pickup__title{color:var(--orange-deep);}
.pickup__date{flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#8891A0;white-space:nowrap;}
.pickup__dots{flex-shrink:0;display:flex;gap:7px;padding:0 22px;}
.pickup__dots button{width:7px;height:7px;border-radius:50%;border:none;background:#C7CEDB;padding:0;cursor:pointer;transition:background-color .2s ease;}
.pickup__dots button.on{background:var(--orange);}
.pickup__dots button:hover{background:#8891A0;}

@media (max-width:640px){
  .pickup__bar{flex-direction:column;}
  .pickup__label{flex-direction:row;align-items:baseline;gap:8px;padding:9px 16px;}
  .pickup__link{flex-wrap:wrap;gap:6px 14px;padding:12px 16px;}
  .pickup__title{order:3;flex-basis:100%;white-space:normal;}
  .pickup__dots{padding:0 16px 12px;}
}

/* 部内掲示板 */
/* ヒーロー右＝ペルソナ別「悩み → 解決」カード（2026-07-17）
   立場のピル＋悩みの一人称セリフ（paper地のチップ）で自分ごと化させる。
   解決の文字（orange-deep）はpaper地の上に置く（5.09:1でAA適合。
   パステル地に直置きすると4.09〜4.29:1で不適合になるため） */
/* 縦組みに伴い2×2へ（2026-07-17）。
   下限340pxは計算値。本文幅1012px・gap14pxのとき
     3列なら (1012-28)/3 = 328px → 340pxを下回るので選ばれない
     2列なら (1012-14)/2 = 499px → 成立し 2×2 になる
   幅が 340*2+14 = 694px を切ると自動で1列。メディアクエリ不要。
   ※minmaxを320pxにすると3列が成立して「3+1」に割れる。 */
/* minmax の最小値を min() で包んでいるのは、画面がその値より狭いと
   トラック幅が画面を超えて横スクロールが出るため。340pxのままだと
   本文幅が340px未満になる端末（幅372px未満＝360pxのAndroid等）ではみ出す。
   min(340px,100%) なら狭い端末では100%に落ちるので破綻しない。 */
.hero-personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px;}
.hero-persona{
  border:var(--border);border-radius:14px;box-shadow:var(--shadow);
  padding:17px 18px;
}
.hero-persona.hp1{background:var(--pinkish);}
.hero-persona.hp2{background:var(--mint);}
.hero-persona.hp3{background:var(--sky);}
.hero-persona.hp4{background:var(--yellow);} /* ink文字との組はbtn-yellowで検証済み */
.hero-persona.hp5{background:var(--lilac);}
.hp-who{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-size:13.5px;font-weight:900;letter-spacing:0.06em;
  border-radius:999px;padding:3px 15px;margin-bottom:10px;
}
.hp-row{
  display:block;background:var(--paper);border:2px solid var(--ink);
  border-radius:9px;padding:9px 13px;text-decoration:none;color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:2px 2px 0 var(--ink);
}
.hp-row + .hp-row{margin-top:8px;}
.hp-row:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.hp-row:focus-visible{outline:3px solid var(--orange-deep);outline-offset:2px;}
.hp-w{display:block;font-size:15px;font-weight:700;line-height:1.7;}
.hp-fix{display:block;font-size:13.5px;font-weight:900;color:var(--orange-deep);margin-top:2px;}

/* ==========================================================================
   なぜ大変か（原因3）→ だから解決（対応3）→ CTAバンド（2026-07-17 トップv2）
   原因は落ち着いた紙トーン、解決は明るいオレンジ枠で"問題→答え"を対比。
   ========================================================================== */
.why{background:var(--cream);}
/* お悩みセクション → 問題提起の疑問文をつなぐ下矢印（2026-07 運営者指示） */
.flow-arrow{display:flex;justify-content:center;margin:-14px 0 22px;}
.flow-arrow span{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--yellow);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  font-size:24px;font-weight:900;color:var(--ink);line-height:1;
}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.why-card{
  background:var(--paper);border:var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:22px 22px 24px;
}
.why-num{
  display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:15px;
  color:var(--paper);background:var(--ink);border-radius:6px;
  padding:2px 11px;margin-bottom:14px;
}
/* 課題カードの上段。番号とアイコンを同じ行に置く。
   アイコンを absolute で右上に浮かせると見出しの折り返し次第で文字に重なるため、
   flex の一行に収めて構造的に重なりを起こさなくしている。 */
.why-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.why-card__top .why-num{margin-bottom:0;}
.why-card__top .akb-icon{flex:0 0 auto;}
.why-card h3{font-size:17px;font-weight:900;line-height:1.6;margin:0 0 8px;color:var(--why-neg);
  text-decoration:underline;text-decoration-color:rgba(51,69,75,0.28);text-decoration-thickness:2px;text-underline-offset:4px;}
.why-card p{font-size:13.5px;line-height:1.9;color:var(--ink-60);margin:0;}

/* 解決＝縦積みの実例ショーケース（2026-07 運営者決定）。
   原因(わからない)→ 証拠(記事/ツール/相談)を上から見せ「わかる」に変える。
   3枚は同サイズ(min-height揃え)、左=narrative+CTA / 右=実物プレビュー枠。 */
.sc-list{display:grid;grid-auto-rows:1fr;gap:18px;margin-bottom:26px;} /* 1fr で3枚の高さを揃える */
.sc-card{background:var(--paper);border:var(--border);border-radius:16px;box-shadow:var(--shadow);
  /* 左カラムを42%にしているのは見出しの実測から。38%だと文字が使える幅が343pxで、
     「登録不要、米国経理に精通した会計士に」の1行目が360px必要で折り返していた
     （指定の改行に加えて勝手に1行増える）。42%で379pxになり、3見出しとも収まる。 */
  display:grid;grid-template-columns:minmax(240px,42%) 1fr;overflow:hidden;min-height:300px;}
.sc-left{padding:20px 20px 18px;display:flex;flex-direction:column;}
.sc-pair{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-weight:700;font-size:11px;
  color:var(--paper);background:var(--ink);border-radius:6px;padding:2px 9px;margin-bottom:12px;}
.sc-cause{font-size:12.5px;color:var(--why-neg);font-weight:900;text-decoration:underline;
  text-decoration-color:rgba(51,69,75,0.28);text-decoration-thickness:2px;text-underline-offset:3px;}
.sc-cause .x{font-family:var(--font-mono);font-size:11px;color:var(--ink-30);margin-right:5px;text-decoration:none;display:inline-block;}
.sc-arrow{font-size:15px;color:var(--orange);font-weight:900;margin:4px 0 2px;}
/* 解決見出し＝ポジティブ強調（原因の暗色・薄下線と対照的に、メインカラーのオレンジで） */
.sc-h3{font-size:20px;font-weight:900;line-height:1.5;margin:0 0 9px;color:var(--orange-deep);
  text-decoration:underline;text-decoration-color:rgba(232,112,58,0.55);text-decoration-thickness:2.5px;text-underline-offset:4px;}
.sc-p{font-size:12.5px;color:var(--ink-45);line-height:1.85;margin:0 0 14px;}
.sc-cta{margin-top:auto;align-self:flex-start;font-weight:900;font-size:13px;color:var(--ink);
  background:var(--orange);border:2px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--ink);
  padding:8px 15px;text-decoration:none;}
.sc-cta:hover{background:var(--orange-deep);}
.sc-right{background:var(--cream);border-left:var(--border);padding:16px;display:flex;align-items:center;justify-content:center;}
/* 方針カードの後を受ける一文（「その結果どうなるか」）。about で使用 */
.solve-outcome{
  margin:22px auto 0;max-width:720px;text-align:center;
  font-size:15px;font-weight:900;line-height:1.9;color:var(--ink);
}

/* 疑似ブラウザ枠＋各プレビュー（装飾＝aria-hidden） */
.frame{width:100%;background:var(--paper);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 rgba(26,23,15,0.18);overflow:hidden;}
/* 実ページのスクリーンショット（2026-07-22）。CSS再現モックの置き換え。
   角丸＋薄い枠でカードに馴染ませる。高さは画像の比率に従う。 */
.sc-shot{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 rgba(26,23,15,0.18);}
.frame-bar{display:flex;align-items:center;gap:5px;padding:6px 10px;border-bottom:2px solid var(--ink);background:#EFE9DB;}
.frame-bar i{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:0.4;}
.frame-bar .u{margin-left:8px;font-family:var(--font-mono);font-size:9px;color:var(--ink-45);}
.frame-body{padding:12px 13px;}
.art-title{font-size:13px;font-weight:900;line-height:1.5;margin-bottom:9px;color:var(--ink);}
.wakaru{background:#FFF8DC;border:2px solid var(--ink);border-radius:8px;padding:8px 10px;margin-bottom:9px;}
.wakaru-h{display:inline-block;font-size:10.5px;font-weight:900;background:var(--yellow);border:1.5px solid var(--ink);border-radius:4px;padding:0 6px;margin-bottom:5px;}
.wakaru ul{margin:0;padding-left:15px;}
.wakaru li{font-size:10.5px;line-height:1.7;color:var(--ink);}
.fig{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:6px;overflow:hidden;font-size:10px;color:var(--ink);}
.fig div{padding:4px 6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);}
.fig .hd{background:var(--sky);font-weight:900;text-align:center;}
.fig .hd2{background:var(--pink);}
.fig .r3{border-bottom:none;}
.tool-title{font-size:12.5px;font-weight:900;margin-bottom:9px;color:var(--ink);}
.tool-row{display:flex;justify-content:space-between;font-size:11px;border:1.5px solid var(--ink);border-radius:6px;padding:5px 9px;margin-bottom:6px;background:var(--paper);color:var(--ink);}
.tool-row b{font-family:var(--font-mono);}
.tool-res{font-size:12px;font-weight:900;background:var(--mint);border:2px solid var(--ink);border-radius:7px;padding:7px 10px;text-align:center;color:var(--ink);}
.tool-res b{color:var(--orange-deep);font-size:15px;}
.form-title{font-size:12px;font-weight:900;margin-bottom:7px;color:var(--ink);}
.form-box{border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);padding:7px 9px;font-size:10.5px;color:var(--ink-45);min-height:38px;margin-bottom:7px;}
.form-btn{font-size:10.5px;font-weight:900;color:var(--paper);background:var(--flag-red);border:1.5px solid var(--ink);border-radius:6px;padding:4px 10px;text-align:center;}
.flow{display:flex;align-items:stretch;gap:6px;margin-top:10px;}
.flow .step{flex:1;background:var(--paper);border:2px solid var(--ink);border-radius:7px;padding:6px 7px;font-size:9.5px;line-height:1.5;text-align:center;color:var(--ink);}
.flow .step b{display:block;font-size:10px;}
.flow .ar{display:flex;align-items:center;font-weight:900;color:var(--orange);}
@media(max-width:640px){
  .sc-list{grid-auto-rows:auto;}
  .sc-card{grid-template-columns:1fr;min-height:0;}
  .sc-right{border-left:none;border-top:var(--border);}
}

/* CTAバンド（CTA①・③で共用）。オレンジ帯に黒文字＋ボタン */
.cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--orange);border:var(--border);border-radius:14px;box-shadow:var(--shadow);
  padding:16px 22px;
}
.cta-band--center{justify-content:center;text-align:center;margin-top:30px;}
.cta-band__lead{font-weight:900;font-size:15px;color:var(--ink);}
.cta-band__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* チラ見せ（末尾の記事＋キーワード） */
.shelf{background:var(--cream);}

/* ==========================================================================
   3つの係
   ========================================================================== */
/* 列数は auto-fit で幅に追従させる（固定の3列/2列/1列にしない）。
   タブレットの想定幅が480〜1280pxと2.6倍も開いており、固定2列にすると
   480px側でカード内側が158pxまで潰れて見出しが崩れる。
   minmax の下限が実質のブレークポイントとして働き、入らなくなった時点で
   自動的に列が減るので、境界で急に窮屈になることがない。 */
/* grid-auto-rows:1fr で全行を最も高い行に揃える。これが無いと行ごとに
   高さが決まり、上段3枚（438px）と下段2枚（362px）で段差ができる。
   カードは既定の stretch で行いっぱいに伸びる（2026-07-19 運営者指示）。 */
.kakari-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;grid-auto-rows:1fr;}
.kakari{
  border:var(--border);border-radius:16px;
  padding:26px 24px;box-shadow:var(--shadow);
  background:var(--paper);display:flex;flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
}
.kakari:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.kakari.k1{background:var(--pinkish);}
.kakari.k2{background:var(--mint);}
.kakari.k3{background:var(--sky);}
.kakari.k4{background:var(--yellow);} /* ink文字との組はbtn-yellowで検証済みのペア */
/* カード全体がハブページへのリンク（2026-07-16 デッドクリック解消） */
a.kakari{text-decoration:none;color:var(--ink);}
/* .kakari-item（「▸ 経理の健康診断」等）は2026-07-19にマークアップごと廃止。
   $akb_card の $items 引数も削除済みなので、対応するCSSもここで削除した。 */
.kakari-more{
  font-weight:900;font-size:13.5px;
  border-bottom:var(--border);padding-bottom:1px;
}
a.kakari:hover .kakari-more{border-bottom-color:var(--orange-deep);}
.kakari-tag{
  align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:0.12em;
  background:var(--ink);color:var(--paper);padding:3px 12px;border-radius:999px;
  margin-bottom:16px;
}
.kakari h3{font-size:20px;font-weight:900;margin-bottom:10px;line-height:1.6;}
.kakari p{font-size:13.5px;line-height:1.9;color:var(--ink-60);flex:1;}
/* パステル地の上では orange-deep の文字が 4.09〜4.29:1 しか出ずAA不適合になる。
   kakari-more の文字は ink のまま（14:1）にして、下線の色だけで反応を示す。
   下線は文字ではなくUI部品なので基準は3:1で、これは満たしている。 */

/* ==========================================================================
   部の約束（マニフェスト）
   ========================================================================== */
.manifesto{background:var(--ink);color:var(--cream);}
.manifesto .sec-eyebrow{color:var(--yellow);}
.manifesto h2{color:var(--paper);}
.vow-list{margin-top:30px;display:grid;gap:0;max-width:720px;}
.vow{
  display:flex;gap:18px;align-items:baseline;
  padding:20px 6px;border-bottom:1.5px solid var(--ink-line);
  font-size:clamp(16px,2.2vw,20px);font-weight:700;line-height:1.7;
}
.vow:first-child{border-top:1.5px solid var(--ink-line);}
.vow-num{
  font-family:var(--font-mono);font-size:13px;
  color:var(--yellow);flex-shrink:0;font-weight:500;
}
.vow em{font-style:normal;color:var(--yellow);}
.manifesto-why{
  margin-top:30px;max-width:640px;font-size:14px;line-height:2.05;color:var(--on-ink);
}
/* 本体ページ（/about/）への導線。黒地なので on-ink 系の色を使う
   （orange-deep は ink 地の上で 2.4:1 しか出ず不適合） */
.manifesto-more{margin-top:22px;}
.manifesto-more a{
  color:var(--paper);font-weight:900;font-size:13.5px;
  border-bottom:2px solid var(--stamp-light);padding-bottom:2px;text-decoration:none;
}
.manifesto-more a:hover{border-bottom-color:var(--yellow);}
/* 2026-07-16 文言リニューアル(A-4): 部長承認スタンプは廃止。一文だけ残す */
.manifesto-stamp-row{display:flex;align-items:center;gap:18px;margin-top:30px;}
.manifesto-stamp-row span:last-child{font-size:13px;color:var(--on-ink-muted);}

/* ==========================================================================
   書いている人（筆者紹介）
   ========================================================================== */
.bucho-card{
  display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:start;
  background:#fff;border:1px solid var(--hair);border-radius:12px;
  box-shadow:none;padding:34px;
}
.bucho-photo{
  width:150px;height:150px;border-radius:50%;
  background:var(--yellow);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:15px;text-align:center;line-height:1.5;
  overflow:hidden;
}
.bucho-photo img{width:100%;height:100%;object-fit:cover;}
.bucho-role{
  display:inline-block;background:var(--orange);color:var(--ink);
  border:none;font-size:12px;font-weight:900;
  padding:3px 13px;border-radius:999px;margin-bottom:10px;
}
.bucho-name{font-size:22px;font-weight:900;margin-bottom:4px;}
.bucho-license{font-size:13px;color:var(--ink-45);margin-bottom:16px;}
.bucho-card p.bio{font-size:13.5px;line-height:2.0;color:var(--ink-60);}
/* 運営者情報ページだけ bio が複数段落になる。段落が続くときだけ間を空ける。
   これが無いと6段落が地続きに見えて、どこで話が変わるか読み取れない
   （実測で段落間0px。他ページは1段落なのでこの指定は効かない）。 */
.bucho-card p.bio + p.bio{margin-top:1.1em;}
.bucho-links{margin-top:18px;display:flex;gap:16px;flex-wrap:wrap;}
.bucho-links a{font-size:13px;font-weight:900;text-decoration:none;border-bottom:var(--border);padding-bottom:1px;}
.bucho-links a:hover{color:var(--orange-deep);border-bottom-color:var(--orange-deep);}

/* ==========================================================================
   資料棚（記事カード）
   ========================================================================== */
/* grid-auto-rows:1fr は、同じ行のカードの高さを揃えるため。
   タイトルの行数が記事ごとに違っても、カードの縦の長さは変わらない（運営者指示）。 */
/* 記事カードは4列（記事一覧＝12件で4×3。2026-07-25 運営者指示）。狭い画面は段階的に減らす。 */
.article-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;grid-auto-rows:1fr;}
@media (max-width:1080px){ .article-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .article-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .article-grid{grid-template-columns:1fr;} }
.article-card{
  background:#fff;border:1px solid var(--hair);border-radius:5px;
  padding:20px;box-shadow:none;text-decoration:none;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .12s ease, box-shadow .12s ease;
  height:100%;                 /* grid-auto-rows:1fr で決まった行の高さいっぱいに広げる */
  overflow:hidden;             /* 角丸からアイキャッチがはみ出さないように */
}
/* アイキャッチ。比率を固定してから中身を絶対配置する。画像の読み込み前でも
   高さが確定するので、表示中にカードが伸び縮みしない。
   カード左右のpaddingを打ち消して端まで敷く。 */
.article-card__thumb{
  display:block;position:relative;
  margin:-20px -20px 0;
  border-bottom:1px solid var(--hair);
  background:var(--cream);
}
/* アイキャッチは要点タイトル入りの完成デザイン（1200×630／OGP兼用）。以前は
   カードで 1200:492 に切り抜いていたが、新デザインでは文字が切れてしまうため、
   切り抜かず画像全体をそのまま表示する（2026-07-24 修正）。箱の比率を画像と同じ
   1200/630 にし、object-fit:cover でも切り抜きが発生しないようにしている。
   （カード側は原本 full=1200×630 を読む＝functions.php akb_article_card 参照。） */
.article-card__thumb{aspect-ratio:1200 / 630;}
.article-card__thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* タイトルは3行で打ち切る。1件だけ極端に長いタイトルがあると、行全体の
   カードが引き伸ばされて余白だらけになるため（最長72字・平均46字）。
   アイキャッチに要点を載せてあるので、続きが切れても意味は取れる。 */
.article-card h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.article-card:hover{border-color:#C9D2E0;box-shadow:0 10px 24px -16px rgba(20,30,55,.5);}
.cat-tag{
  align-self:flex-start;font-size:11.5px;font-weight:700;
  border:none;border-radius:999px;padding:3px 11px;
  background:#EEF1F5;color:var(--navy);
}
/* 実カテゴリへの色割り当て（akb_category_tag_class / functions.php が出力） */
.cat-bookkeeping{background:var(--pinkish);}          /* 経理・記帳 */
.cat-us-incorporation{background:var(--mint);}        /* 会社設立・起業 */
.cat-tax-return{background:var(--sky);}               /* 税務・確定申告 */
.cat-corporate-compliance{background:var(--yellow);}  /* 会社運営・各種届出 */
.article-card{position:relative;}
/* 順位バッジ。ハンコの意匠に寄せて回転をかける（CLAUDE.md 3章の署名要素） */
.rank-badge{
  position:absolute;top:-12px;right:-10px;
  width:38px;height:38px;border-radius:50%;
  background:var(--yellow);border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;line-height:1;
  transform:rotate(-8deg);
  box-shadow:2px 2px 0 var(--ink);
}
.article-card h3{font-size:14.5px;font-weight:700;line-height:1.7;flex:1;}
.article-card .read{font-size:12px;font-weight:900;color:var(--orange-deep);}
.article-card .read-time{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-30);font-weight:500;
}
.article-card-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}


/* 旧・相談窓口バンド（オレンジ地 .join*）のCSSは 2026-07-25 に撤去
   （旧CTAをサイトから一斉削除したため。相談導線はヘッダーCTA・qaミニCTAへ集約）。 */

/* ==========================================================================
   キーワードで探す（タグクラウド）
   現行functions.phpのヒーロータグクラウドをサーバーサイド移植したもの
   ========================================================================== */
/* カテゴリーの直下に置く、縦幅最小の横スライダー（2026-07-25 刷新）。
   カテゴリナビ(.cat-nav)と同じクリーンなpill意匠でページに統一。
   ラベルは左固定、タグは1行で横スクロール（折り返さない）。 */
.keyword-block{
  display:flex;align-items:center;gap:12px;
  margin:16px 0 30px; /* 既定は前要素から通常の余白（検索結果末尾・404など単独配置でも崩れない） */
}
/* カテゴリナビ直下に置かれた時だけ寄せて、1つの絞り込み帯に見せる（負マージンの副作用を隣接時に限定） */
.cat-nav + .keyword-block{margin-top:-14px;}
.keyword-block__title{
  flex:0 0 auto;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.12em;color:#8891A0;
}
.keyword-list{
  flex:1 1 auto;min-width:0;
  display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding:2px 2px 8px; /* スクロールバーとフォーカスリングの余白 */
  scrollbar-width:thin;scrollbar-color:var(--field-line) transparent;
}
.keyword-list::-webkit-scrollbar{height:6px;}
.keyword-list::-webkit-scrollbar-track{background:transparent;}
.keyword-list::-webkit-scrollbar-thumb{background:var(--field-line);border-radius:999px;}
.keyword-list:focus-visible{outline:2px solid var(--navy-eyebrow);outline-offset:2px;border-radius:8px;}
.keyword-tag{
  flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
  display:inline-flex;align-items:baseline;gap:4px;
  font-size:12.5px;font-weight:700;text-decoration:none;color:#55617A;
  background:#fff;border:1px solid var(--hair);border-radius:999px;
  padding:6px 13px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.keyword-tag:hover{border-color:#C9D2E0;background:#F4F6F9;color:var(--navy);}
.keyword-tag__count{font-family:var(--font-mono);font-size:11px;color:var(--ink-30);font-weight:500;}

/* ==========================================================================
   カテゴリナビ（記事数＋ALLタブ / PHP直接出力）
   ========================================================================== */
.cat-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
.cat-nav__item{
  display:inline-flex;align-items:baseline;gap:5px;
  font-size:13px;font-weight:700;text-decoration:none;color:#55617A;
  background:#fff;border:1px solid var(--hair);border-radius:999px;
  padding:8px 16px;box-shadow:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cat-nav__item:hover{border-color:#C9D2E0;background:#F4F6F9;}
.cat-nav__item.is-active{background:var(--navy);color:#fff;border-color:var(--navy);}
.cat-nav__count{font-family:var(--font-mono);font-size:12px;font-weight:500;opacity:.75;}

/* ==========================================================================
   相談事例（Q-A-Voices・2026-07-21）
   一覧はここ（style.css＝全ページ）。単体記事の本文タイポは article.css に乗る。
   ========================================================================== */
/* ペルソナ絞り込み。チップ状の水平ナビ。現在地は反転で示す。
   先頭に「相談者の属性：」ラベルを添えて、何の絞り込みかを明示する。 */
/* ヒーロー外・検索窓の直前の見出し（2026-07-24 運営者指示）。 */
.akb-case-listhead{font-size:clamp(19px,2.4vw,23px);font-weight:900;line-height:1.5;color:var(--navy);margin:0 0 18px;}
.akb-case-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 26px;}
.akb-case-filter__label{font-size:13px;font-weight:900;color:var(--ink-60);margin-right:2px;}
.akb-case-filter__item{
  font-size:13px;font-weight:700;text-decoration:none;color:#55617A;
  background:#fff;border:1px solid var(--hair);border-radius:999px;padding:7px 15px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.akb-case-filter__item:hover{border-color:#C9D2E0;background:#F4F6F9;}
.akb-case-filter__item.is-current{background:var(--navy);color:#fff;border-color:var(--navy);}

/* 一覧カード。ペルソナ・タイトル・導線だけのシンプルな作り。 */
.akb-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px;grid-auto-rows:1fr;}
.akb-case-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--hair);border-radius:6px;
  box-shadow:none;padding:22px 22px 20px;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.akb-case-card:hover{border-color:#C9D2E0;box-shadow:0 10px 24px -16px rgba(20,30,55,.5);}
.akb-case-card__persona{
  align-self:flex-start;
  font-size:11.5px;font-weight:900;letter-spacing:.04em;
  background:var(--navy);color:#fff;border-radius:999px;padding:3px 11px;margin-bottom:10px;
}
.akb-case-card__title{font-size:16px;font-weight:900;line-height:1.5;margin:0 0 12px;}
/* カードの「相談者様の声」欄は 2026-07-24 運営者指示で削除（声は詳細ページのVoicesブロックのみ）。 */
.akb-case-card__more{margin-top:auto;font-size:13px;font-weight:900;color:var(--orange-deep);}

/* モデルケース単体（single-case.php）の「想定ケース明示」バナー（2026-07-25）。 */
.akb-case-modelnote{display:flex;gap:12px;align-items:flex-start;background:var(--callout);border:1px solid var(--callout-line);padding:14px 16px;margin:0 0 28px;font-size:13.5px;line-height:1.8;color:var(--ink-60);}
.akb-case-modelnote__badge{flex:0 0 auto;background:var(--navy);color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;padding:4px 9px;}
.akb-case-modelnote--client .akb-case-modelnote__badge{background:var(--orange-deep);}

/* 単体ページ本文＝論点マップ（2026-07-25）。左レール＋各見出しにオレンジのノードで
   時系列を示す。本文は運営者(CPA)が h2（設定／各フェーズ／想定外）＋段落で執筆する。 */
.akb-case-prose{border-left:2px solid var(--hair);padding-left:28px;margin:0 0 8px 6px;}
.akb-case-prose > *:first-child{margin-top:0;}
.akb-case-prose h2{position:relative;border-left:0;padding-left:0;margin:38px 0 14px;font-size:20px;font-weight:900;color:var(--navy);line-height:1.5;}
.akb-case-prose h2::before{content:"";position:absolute;left:-34px;top:.4em;width:11px;height:11px;background:var(--orange);border:2px solid #fff;box-shadow:0 0 0 2px var(--orange);}
@media (max-width:560px){
  .akb-case-prose{padding-left:20px;margin-left:4px;}
  .akb-case-prose h2::before{left:-26px;}
}

/* サービスページへのシンプルCTA（single-case.php・2026-07-25） */
.akb-case-servicecta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--navy);color:#fff;padding:24px 28px;margin:24px 0 0;}
.akb-case-servicecta__text{margin:0;font-size:16px;font-weight:700;line-height:1.6;}
.akb-case-servicecta__btn{flex:0 0 auto;}
@media (max-width:600px){.akb-case-servicecta{flex-direction:column;align-items:flex-start;}}

/* 論点カード（本文中 [case_issue]） */
.akb-case-issue{margin:0 0 14px;padding:14px 16px;background:#fff;border:1px solid var(--hair);}
.akb-case-issue__q{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 4px;line-height:1.6;}
.akb-case-issue__desc{font-size:13.5px;line-height:1.8;color:var(--ink-60);margin:0 0 8px;}
.akb-case-issue__desc:last-child{margin-bottom:0;}
.akb-case-issue__link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--orange-deep);text-decoration:none;}
.akb-case-issue__link::before{content:"";width:6px;height:6px;background:var(--orange);flex:0 0 auto;}
.akb-case-issue__link:hover{text-decoration:underline;}

/* 想定外の論点＝強調ボックス（本文中 [case_spotlight]） */
.akb-case-spotlight{border:1px solid var(--orange);background:#FEF7F3;padding:20px 22px;margin:26px 0;}
.akb-case-spotlight__eyebrow{font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--orange-deep);margin:0 0 8px;}
.akb-case-spotlight__title{font-size:19px;font-weight:900;color:var(--orange-deep);line-height:1.5;margin:0 0 14px;}
.akb-case-spotlight__body > *:last-child{margin-bottom:0;}
.akb-case-spotlight .akb-case-issue{border-color:#F0C9B5;}

/* 単体記事の Q/A/V。3ブロックとも同じ体裁（タグ＋見出し＋本文）で縦に並べる。
   囲みや地色は付けない。見出しの黒帯（article.css の .akb-article-body h2）は
   ここで打ち消す。 */
/* qa単体ページ（Q/A/V）を新デザインに統一（2026-07-24）：太枠＋ハード影＋黄丸を、
   細ヘアライン＋フラット＋紺/オレンジのアクセントへ。 */
.akb-case__disclosure{
  font-size:12.5px;line-height:1.9;color:var(--ink-60);
  background:#F7F9FB;border:1px solid var(--hair);border-radius:8px;padding:11px 14px;margin:0 0 24px;
}
.akb-case__block{margin:0;}
/* Q/A/V の白カード（細ヘアライン・フラット）。 */
.akb-case__box{
  background:#fff;border:1px solid var(--hair);border-radius:0; /* 角丸なしの四角いカード（2026-07-24 運営者指示）。 */
  box-shadow:none;padding:24px 26px;
}
/* 回答（A）は淡いコールアウト地。四辺とも同じヘアラインで囲む（2026-07-24 運営者指示でオレンジ縦罫は削除）。 */
.akb-case__box--a{background:var(--callout);border-color:var(--callout-line);}
/* ボックス間の下矢印コネクタ。淡い円＋紺の矢印（フラット）。 */
.akb-case__arrow{display:flex;justify-content:center;margin:14px 0;}
.akb-case__arrow span{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:#F4F7FC;border:1px solid var(--hair);box-shadow:none;
  font-size:18px;font-weight:900;color:var(--navy);line-height:1;
}
.akb-article-body .akb-case__h{
  display:flex;align-items:center;gap:12px;
  font-size:20px;font-weight:900;line-height:1.4;margin:0 0 12px;
  /* 通常記事の h2（オレンジ縦罫）を打ち消して、素の見出しに戻す。 */
  background:none;border:0;padding:0;color:var(--navy);
}
.akb-case__tag{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:16px;font-weight:900;
  background:var(--navy);color:#fff;border:none;
}
.akb-case__tag--a{background:var(--orange);color:var(--ink);}
.akb-case__tag--v{background:var(--yellow);color:var(--ink);}
.akb-case__text{font-size:15px;line-height:1.95;color:#2c3a52;}
.akb-case__outcome{font-size:15px;font-weight:900;margin:0 0 12px;color:var(--navy);}
.akb-case__consent{font-size:12px;color:var(--ink-60);margin:14px 0 0;}

/* ==========================================================================
   アーカイブ / 全記事一覧
   ========================================================================== */
/* 左右は var(--gutter) を明示する。padding のショートハンドで上下だけ書くと
   左右が0にリセットされ、.wrap が持つ左右余白が消える。実際に「48px 0 8px」に
   なっていたため、スマホで見出し・リード・検索窓が画面の左端に貼り付いていた
   （.wrap を併用する6つのテンプレートすべてに影響していた）。 */
.page-head{padding:48px var(--gutter) 8px;}
.page-head h1{font-size:clamp(26px,3.6vw,36px);margin-bottom:10px;}
.page-head__lead{font-size:14px;color:var(--ink-60);}
.search-form{display:flex;gap:10px;max-width:520px;margin-top:20px;}
.search-form input[type="search"]{
  flex:1;min-width:0;font-family:inherit;font-size:14px;
  background:#fff;border:1px solid var(--field-line);border-radius:8px;
  padding:11px 14px;color:var(--ink);
  min-height:44px;
}
.search-form input[type="search"]::placeholder{color:var(--ink-30);}
.search-form input[type="search"]:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,35,60,.12);}
.search-form .btn{flex-shrink:0;}
/* 一覧上部に置く検索窓（旧 page-head 内から白地の一覧上部へ移設・2026-07-24）。 */
.search-form--list{margin:0 0 26px;max-width:560px;}

.pagination{margin-top:44px;display:flex;justify-content:center;}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  font-family:var(--font-mono);font-weight:500;font-size:14px;text-decoration:none;
  background:#fff;border:1px solid #DFE3EB;border-radius:8px;
  box-shadow:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.pagination .page-numbers:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.pagination .page-numbers.current{background:var(--orange);color:var(--ink);}
.pagination .page-numbers.dots{border:none;box-shadow:none;background:transparent;}

.no-posts{
  background:var(--paper);border:2px dashed var(--ink);border-radius:12px;
  padding:30px;text-align:center;font-size:14px;color:var(--ink-45);
}

/* ==========================================================================
   フッター
   ========================================================================== */
.site-footer{background:#fff;border-top:1px solid #E8E5DC;padding:48px 0 56px;font-size:13px;color:#55617A;}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand strong{font-size:15px;color:#16233C;}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;}
/* min-height はタップ領域の確保。実測で高さ20px前後しかなく、
   スマホで押しにくい状態だった（ヘッダーのメニューは44pxで揃えてある）。
   inline-flex にしているのは、inline要素のままだと高さ指定が効かないため。 */
.foot-nav a{color:#33415C;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;min-height:44px;}
.foot-nav a:hover{color:var(--orange-deep);}
/* 免責事項。読まれないと意味が無い法的文章なので、他の小文字より一段大きくする。
   小さく薄く置くと「読ませる気が無い」と見なされうる。 */
.foot-disc{margin-top:22px;font-size:13px;line-height:1.9;color:#55617A;max-width:640px;}

/* ==========================================================================
   レスポンシブ
   CLAUDE.md 6章: PC 1281px〜 / タブレット 480〜1280px / スマホ 〜479px
   ========================================================================== */

/* ---- タブレット: 〜1280px ---- */
@media (max-width:1280px){
  /* グリッドの列数は auto-fit が自動で調整するため、ここでは固定しない
     （ヒーローも 2026-07-17 の縦組み化で分岐が不要になった） */
  .hero{padding:44px 0 40px;}
  .section{padding:48px 0;}
}

/* ---- スマホ: 〜479px ---- */
/* 運営者カードの縦積みは640px以下で行う。479px以下だけだと480〜640pxの範囲で
   写真180px＋余白に押されて本文が150px程度まで痩せ、1行3〜4文字になっていた。
   記事ページの筆者紹介でも同じカードを使うようになったので影響範囲が広い。 */
@media (max-width:640px){
  .bucho-card{grid-template-columns:1fr;gap:20px;padding:24px 20px;justify-items:center;text-align:center;}
  .bucho-photo{width:120px;height:120px;}
  .bucho-links{justify-content:center;}
}
@media (max-width:479px){
  body{font-size:14px;}
  :root{--gutter:16px;}
  .hero{padding:32px 0 32px;}
  .section{padding:40px 0;}

  h1{font-size:clamp(26px,7.4vw,32px);}
  .brand-name{font-size:16px;}

  .hero-persona{padding:14px 14px;}
  .hero-band{margin-top:30px;padding-top:14px;}


  .btn-lg{padding:14px 22px;font-size:15px;}

  .vow{gap:12px;padding:16px 2px;}
  .foot-nav{gap:14px;}
  .search-form{flex-direction:column;}
  .search-form .btn{width:100%;}
}

/* ---- スマホでの入力欄の自動ズーム対策 ----
   iOS Safari は font-size が16px未満の入力欄をタップすると、読めるように
   ページ全体を勝手に拡大する。拡大されたままレイアウトが崩れて見えるので、
   スマホ幅では16pxに引き上げる。
   対象は文字を打つ・選ぶ部品だけ（ラジオやチェックボックスは対象外）。
   実測での該当箇所: サイト内検索14px / 便利ツールの絞り込み14.5px /
   ツールのselect 14px / ツール内検索14px。
   1023px以下を対象にしているのは、iPad（縦768px）でも同じ拡大が起きるため。
   ハンバーガーメニューの切替と同じ境界に揃えている。 */
@media (max-width:1023px){
  .search-form input[type="search"],
  .tool-filter__input,
  .tool-search-input,
  .tool-field select,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], select, textarea{
    font-size:16px;
  }
}

/* ---- ナビ: ハンバーガー切替 ----
   2026-07-16 メニュー6項目化（HOME/全記事一覧/便利ツール一覧/この
   サイトについて/運営者情報/相談CTA）でインラインナビの必要幅が
   約710pxに増えたため、切替を479px→1080pxへ引き上げた。
   1023px以下（タブレット縦含む）はハンバーガー、1024px以上はインライン。
   ※実測: ナビ619px＋ブランド226px＋左右余白48px ≒ 900px。
     1024px（iPad横）では131pxの余裕を持って1行に収まる。 */
@media (max-width:1023px){
  .nav-toggle{display:flex;}
  .global-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;
    border-bottom:1px solid #E8E5DC;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter) 18px;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }
  .global-nav.is-open{display:flex;}
  .global-nav a.navlink{
    display:flex;align-items:center;
    min-height:44px;                    /* タップ領域44px以上 */
    font-size:15px;
    border-bottom:1px solid #EEEBE3;
    padding:4px 0;
  }
  .global-nav a.navlink:hover{border-bottom-color:#EEEBE3;color:#16233C;}
  /* スマホでは検索窓を全幅に。ナビ項目の下・CTAの上に置く。 */
  .akb-search{width:100%;height:46px;margin-top:14px;transform:none;}
  .global-nav .btn{margin-top:14px;width:100%;}
  .site-header{position:sticky;}
  .header-inner{position:relative;}
}

/* ============================================================
   サービス（準備中）ページの告知ボックス。page-templates/service.php
   起業前の「近日開始・準備中」を正直に示す黄地のボックス。
   ============================================================ */
.akb-notice{
  background:#FDF7E6;border:1px solid #EFE2B8;border-radius:10px;
  box-shadow:none;padding:22px 26px;max-width:720px;margin:0 auto;
}
.akb-notice__label{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-weight:900;font-size:12px;letter-spacing:.04em;
  padding:4px 12px;border-radius:999px;margin:0 0 10px;
}
.akb-notice__body{margin:0;font-size:15px;line-height:1.9;color:var(--ink);}

/* ============================================================
   ウェイトリスト（サービス開始のお知らせ登録）。inc/waitlist.php
   ============================================================ */
.akb-waitlist__inner{max-width:680px;margin:0 auto;}
.akb-waitlist__lead{font-size:15px;line-height:1.9;color:#55617A;margin:10px 0 22px;}
.akb-waitlist h2{color:#16233C;}
/* 案3：送信ボタンはフラットなオレンジ＋黒文字（太枠・ハード影を外す・直角）。 */
.akb-waitlist .btn{border:none;box-shadow:none;border-radius:0;}
.akb-waitlist .btn:hover{transform:none;box-shadow:none;background:#D9642F;}
.akb-waitlist__form{display:flex;flex-direction:column;gap:16px;}
/* hidden属性を確実に効かせる（display:flexがUAの[hidden]=display:noneを上書きしてしまい、
   送信成功後もフォームと「送信しています…」が消えなかった。2026-07-23 修正）。 */
.akb-waitlist__form[hidden]{display:none;}
.akb-waitlist__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.akb-waitlist__field{display:flex;flex-direction:column;gap:6px;}
.akb-waitlist__field label{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;}
/* 関心領域＝提供サービスの複数選択（チェックボックス・2列）。 */
.akb-waitlist__fieldset{display:block;width:100%;min-width:0;border:0;padding:0;margin:0;}
.akb-waitlist__legend{padding:0;font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.akb-wl-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;width:100%;}
.akb-wl-check{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.4;color:#33415C;cursor:pointer;}
.akb-wl-check input{width:18px;height:18px;flex-shrink:0;accent-color:#2C5AA0;cursor:pointer;}
@media (max-width:560px){.akb-wl-checks{grid-template-columns:minmax(0,1fr);}}
.akb-wl-req{background:var(--orange);color:var(--ink);font-size:11px;font-weight:900;padding:2px 9px;border-radius:0;}
.akb-wl-opt{background:#EFF2F7;color:#55617A;font-size:11px;font-weight:700;padding:2px 9px;border-radius:0;}
.akb-waitlist__field input,
.akb-waitlist__field select{
  width:100%;font-size:16px;padding:13px 14px;border:1px solid #CBD2DE;border-radius:0;
  background:#fff;color:var(--ink);box-shadow:none;transition:border-color .12s ease, box-shadow .12s ease;
}
.akb-waitlist__field input::placeholder{color:#9AA4B8;}
.akb-waitlist__field input:focus,
.akb-waitlist__field select:focus{outline:none;border-color:#16233C;box-shadow:0 0 0 3px rgba(22,35,60,.12);}
.akb-waitlist__result{min-height:1.4em;font-size:14px;color:var(--ink);margin:0;}
.akb-waitlist__result.is-error{color:#b3261e;font-weight:700;}
.akb-waitlist__note{font-size:12.5px;line-height:1.8;color:var(--ink-60);margin:0;}
.akb-waitlist__note a{color:var(--orange-deep);}
.akb-waitlist__done{background:#F6F8FB;border:1px solid #DFE3EB;border-radius:0;box-shadow:none;padding:22px 26px;max-width:680px;margin:0 auto;}
.akb-waitlist__done p{margin:0;font-weight:700;color:#16233C;}
@media (max-width:640px){
  .akb-waitlist__row{grid-template-columns:1fr;}
}

/* CTAは紺 #16233C の地に白フォームで統一（2026-07-25 運営者指示でサービスページも紺化。
   旧: トップ(.home)のみ紺、サービスは白地だった）。入力欄は白のまま（紺地に白フォームで可読）、
   見出し・ラベル・補足だけ反転する。トップと共用の akb_waitlist_form() 全体に効く。 */
.akb-waitlist{background:#16233C;color:#fff;}
.akb-waitlist .sec-eyebrow{color:#7FA8E8;}
.akb-waitlist h2{color:#fff;}
.akb-waitlist__lead{color:#B9C3D8;}
.akb-waitlist__field label,
.akb-waitlist__legend{color:#fff;}
.akb-wl-check{color:#D6DEEC;}
.akb-waitlist__result{color:#fff;}
.akb-waitlist__note{color:#9DB0CF;}
.akb-waitlist__note a{color:#F0A277;}
.akb-waitlist__done{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20);}
.akb-waitlist__done p{color:#fff;}
/* トップ限定：直上のサービス紹介バンド(.svc-intro 下辺60px)と継ぎ目なく載せるため、
   上辺を詰める（12px）。サービスページは通常の .section 余白(60px 0)のまま独立した帯にする。 */
.home .akb-waitlist{border-top:0;padding:12px 0 66px;}

/* ── ナレッジ紹介バンド（2026-07-24 運営者指示・参考バズ部「GUIDE」）。白地・薄い巨大
   「GUIDE」ウォーターマーク。左＝ビギナーズガイドの大カード、右＝新着記事の一覧の“箱”。
   中身は front-page.php で仮置き。直上の紺CTAと白でコントラストをつける。 */
.guide-band{position:relative;overflow:hidden;isolation:isolate;background:#fff;color:#16233C;padding:66px 0 72px;border-top:1px solid #E8E5DC;}
.guide-band__wm{position:absolute;top:-.14em;left:max(24px,calc((100% - 1040px)/2));z-index:-1;margin:0;pointer-events:none;
  font-family:var(--font-mono);font-weight:800;letter-spacing:.02em;line-height:.9;white-space:nowrap;
  font-size:clamp(96px,17vw,230px);color:rgba(22,35,60,.045);}
.guide-band__eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--orange-deep);margin:0 0 16px;}
/* 見出しは2行固定（「…ノウハウを、」＋「すべて無料で提供しています。」）。改行は front-page.php の
   <br> で確実に入れる（max-width方式は環境で割れ方が安定しなかったため）。2026-07-25 運営者指示。 */
.guide-band__title{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.5;margin:0;color:#16233C;}
.guide-band__cols{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;margin-top:44px;}
/* 小見出しの上に短い横線（参考画像と同じ） */
.guide-subhead{position:relative;font-size:17px;font-weight:900;color:#16233C;margin:0 0 22px;padding-top:20px;}
.guide-subhead::before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;background:#16233C;}

/* 左：ビギナーズガイドの大カード（紺・写真地はプレースホルダ／実装時に background-image 差替） */
.guide-col--main{display:flex;flex-direction:column;gap:20px;}
.guide-card{position:relative;overflow:hidden;isolation:isolate;background:#16233C;color:#fff;padding:34px 34px 30px;min-height:200px;display:block;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;}
.guide-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(13,20,34,.7);}
.guide-card:hover .guide-card__more{color:var(--orange);}
.guide-card::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(150deg,#2a3d5f,#16233c 60%,#0f1930);}
.guide-card--2::before{background:linear-gradient(150deg,#25423f,#132a28 60%,#0c1a18);}
.guide-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(13,20,34,.32),rgba(13,20,34,.80));}
.guide-card__cat{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.6);}
.guide-card__title{font-size:20px;font-weight:900;line-height:1.5;margin:10px 0 0;max-width:82%;}
.guide-card__sub{font-size:14px;font-weight:700;margin:18px 0 0;color:#fff;}
.guide-card__desc{font-size:13px;line-height:1.85;color:#C7D2E4;margin:10px 0 0;}
.guide-card__more{display:inline-block;margin-top:20px;font-size:13px;font-weight:700;color:#fff;}
.guide-card__badge{position:absolute;top:26px;right:30px;width:60px;height:60px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.guide-card__badge strong{font-family:var(--font-mono);font-size:20px;font-weight:700;}
.guide-card__badge span{font-size:10px;margin-top:2px;color:rgba(255,255,255,.8);}

/* 右：新着記事から学ぶ（サムネ＋タイトル＋日付の“箱”） */
.guide-col--side{display:flex;flex-direction:column;}
.guide-posts{list-style:none;margin:0;padding:0;}
.guide-post{padding:14px 0;border-bottom:1px solid #E8E5DC;}
.guide-post:first-child{padding-top:0;}
.guide-post__link{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;}
.guide-post__link:hover .guide-post__title{color:var(--orange-deep);}
/* サムネ枠はアイキャッチ（1200×630）と同じ縦横比にして全体が入るようにする（2026-07-25 運営者指示）。 */
.guide-post__thumb{flex-shrink:0;width:104px;aspect-ratio:1200/630;border-radius:2px;background:#E9ECF1;border:1px solid #DCE0E7;background-size:cover;background-position:center;}
.guide-post__body{display:flex;flex-direction:column;gap:6px;min-width:0;}
.guide-post__title{font-size:13.5px;font-weight:700;line-height:1.6;color:#16233C;}
.guide-post__date{font-family:var(--font-mono);font-size:12px;color:#8891A0;}
.guide-more{display:inline-block;align-self:flex-end;margin-top:16px;font-size:13px;font-weight:700;color:var(--orange-deep);text-decoration:none;}
.guide-more:hover{text-decoration:underline;}

@media (max-width:860px){
  .guide-band__cols{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:760px){
  .guide-band{padding:48px 0 52px;}
  .guide-band__wm{font-size:clamp(72px,22vw,120px);}
}

/* ============================================================
   サービス一覧ページ（page-templates/service.php）｜案3 ダークネイビー
   ネイビーのヒーロー＋白カード（細線・上辺ネイビーライン・薄い影）。
   英字マイクロラベルは既存の IBM Plex Mono を流用。オレンジは差し色に限定。
   ※ヘッダー/フッター/他ページの案3化は次フェーズ（サイト全体展開）で行う。
   ============================================================ */
/* ヒーロー（濃紺・全幅） */
/* ── インテリアページ共通ヒーロー（.page-hero・2026-07-24 全ページ刷新）。
   旧 .page-head（wrap内の軽量見出し）を置換する紺バンド。akb_page_hero()（inc/page-hero.php）が出力。
   巨大ウォーターマーク＋モノ体eyebrow（水色）＋白大見出し＋リード。service の .svc-hero と同系。 */
.page-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);color:#fff;padding:62px 0 54px;}
.page-hero__wm{position:absolute;top:-.18em;left:max(24px,calc((100% - var(--wrap))/2));z-index:-1;margin:0;pointer-events:none;
  font-family:var(--font-mono);font-weight:800;letter-spacing:.02em;line-height:.9;white-space:nowrap;
  font-size:clamp(88px,15vw,210px);color:rgba(255,255,255,.05);}
.page-hero__eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--navy-eyebrow);margin:0 0 16px;}
.page-hero__title{font-size:clamp(25px,3.2vw,38px);font-weight:900;line-height:1.4;margin:0;color:#fff;text-wrap:balance;}
/* タイトル直下のメタ行（モデルケースの「CPA監修済み記事」バッジ用）。バッジ色は紺地版で成立。 */
.page-hero__meta{margin:14px 0 0;}
.page-hero__lead{margin:18px 0 0;font-size:14.5px;line-height:2;color:var(--navy-sub);max-width:60ch;}
/* qa（みんなの経理質問箱）のヒーローだけ、長い説明文が2行に収まるよう幅を広げる（2026-07-24）。
   他ページのヒーローには影響させない（CPTアーカイブ／ペルソナ別ページに限定）。 */
.post-type-archive-case-studies .page-hero__lead,
.tax-case-persona .page-hero__lead{max-width:54em;}
/* ヒーロー内の箇条書き（例：consultの「ご相談できること」）。紺地に淡色テキスト＋オレンジの角丸マーカー。 */
.page-hero__points-title{margin:28px 0 0;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#fff;}
.page-hero__points{list-style:none;margin:22px 0 0;padding:0;max-width:62ch;display:grid;gap:11px;}
.page-hero__points-title + .page-hero__points{margin-top:13px;}
.page-hero__points li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.85;color:var(--navy-sub);}
.page-hero__points li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--orange);}
/* 箇条書き下のさりげないサブリンク（オレンジは使わない。紺地に白の淡いアウトライン）。 */
.page-hero__pastlink{display:inline-flex;align-items:center;gap:6px;margin-top:24px;
  font-size:13px;font-weight:700;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:9px 16px;
  transition:background-color .15s ease, border-color .15s ease;}
.page-hero__pastlink:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);}
/* リードを広く見せる版（consult）。長い一文を少ない行数で読ませる。 */
.page-hero--wide .page-hero__lead{max-width:46em;}
.page-hero__cta{margin-top:26px;}
/* ヒーロー／qaミニCTA のリード内の強調（オレンジ下線＋白文字）。2026-07-24 運営者指示。 */
.page-hero__lead .hl-orange,
.qa-cta-mini__lead .hl-orange{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px;}

/* qa単体ページの「みんなの経理質問箱」CTAミニ版（共有ボタン直後）。角丸なし・紺（2026-07-24）。 */
.qa-cta-mini{
  background:var(--navy);color:#fff;border-radius:0;padding:24px 26px;margin:30px 0 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;justify-content:space-between;
}
.qa-cta-mini__body{flex:1;min-width:260px;}
.qa-cta-mini__eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--navy-eyebrow);margin:0 0 8px;}
.qa-cta-mini__title{font-size:16px;font-weight:900;line-height:1.5;color:#fff;margin:0 0 8px;}
.qa-cta-mini__lead{font-size:13px;line-height:1.9;color:var(--navy-sub);margin:0;}
.qa-cta-mini__btn{flex:0 0 auto;white-space:nowrap;}
@media (max-width:560px){ .qa-cta-mini__btn{display:block;width:100%;text-align:center;} }
@media (max-width:760px){
  .page-hero{padding:44px 0 38px;}
  .page-hero__wm{font-size:clamp(64px,20vw,110px);}
}

/* ── 固定ページ・会社概要のクリーンなプロース（2026-07-24 刷新）。法務/会社ページ用に、
   記事本文(article.css)とは別のシンプルで読みやすいタイポを持つ。 */
.page-prose{max-width:760px;margin:0 auto;font-size:15px;line-height:2;color:#2c3a52;}
.page-prose > *:first-child{margin-top:0;}
.page-prose h2{font-size:21px;font-weight:900;color:var(--navy);line-height:1.5;margin:38px 0 14px;padding-left:14px;border-left:4px solid var(--orange);}
.page-prose h3{font-size:16px;font-weight:800;color:var(--navy);margin:26px 0 10px;}
.page-prose p{margin:0 0 16px;}
.page-prose a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:2px;}
.page-prose ul,.page-prose ol{margin:0 0 16px;padding-left:1.4em;}
.page-prose li{margin:0 0 6px;line-height:1.9;}
.page-prose li::marker{color:var(--orange);}
.page-prose strong{font-weight:800;color:var(--navy);}
.page-prose blockquote{margin:22px 0;padding:14px 18px;background:var(--callout);border:1px solid var(--callout-line);border-radius:8px;color:#33415C;}
.page-prose__meta{font-family:var(--font-mono);font-size:12.5px;color:#8891A0;margin:0 0 22px;}

/* 旧・会社概要テーブル（.company-table）のCSSは 2026-07-25 に撤去
   （page-company.php を3セクション構成に作り替えた際に不使用化）。 */

/* 運営者情報（page-company.php）の3セクション（2026-07-25）。
   見出しはバズ部の「◯◯とは ／ ABOUT」を紺（見出し）＋オレンジ（英字eyebrow）に翻案。
   本文は他の固定ページと同じ .page-prose（760px中央寄せ）を流用し、見出しも同じ幅で揃える。 */
.company-sec{padding:52px 0;}
.company-sec + .company-sec{border-top:1px solid var(--hair);}
/* 固定ページを記事ページ（single.php）と同じ 912px・中央寄せに揃える共有ユーティリティ
   （2026-07-25 運営者指示）。運営者情報(page-company.php)・プライバシー/免責等(page.php)で共用。
   ・.article-col は .wrap と併用し、max-width だけ 912 に上書きする（記事本文 .akb-article__inner と同型。
     margin auto と左右ガターは .wrap が担うので、ヒーローと左端・幅が完全一致する）。
   ・ヒーローは共通部品 akb_page_hero() なので、対象ページだけ mod=page-hero--narrow で --wrap を 912 に絞る。
   ・.article-col 直下の .page-prose は既定の 760/auto を解除し、912の列いっぱいに流す。 */
.page-hero--narrow{--wrap:912px;}
/* モデルケースのタイトルは balance をやめ greedy（pretty）に。1行あたりの文字数を増やし本文幅いっぱいに折る（2026-07-25 運営者指示）。 */
.page-hero--greedy .page-hero__title{text-wrap:pretty;}
.article-col{max-width:912px;}
.article-col > .page-prose{max-width:none;margin:0;}
.cmp-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 22px;}
.cmp-head__title{font-size:clamp(23px,2.8vw,30px);font-weight:900;color:var(--navy);letter-spacing:.02em;line-height:1.3;margin:0;}
.cmp-head__slash{font-weight:400;color:var(--navy-sub);font-size:1.1em;line-height:1;}
.cmp-head__eyebrow{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--orange-deep);}
/* 注記（開業時期の断り書き等）は本文よりトーンを落とす */
.cmp-note{font-size:13.5px;color:var(--ink-45);}
/* 質問箱の案内は本文の下に少し間を置いて置く */
.company-sec .qa-cta-mini{margin-top:20px;}

.svc-hero{background:#16233C;color:#fff;padding:58px 0 54px;}
.svc-hero__eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;color:#7FA8E8;margin:0 0 16px;}
.svc-hero__title{font-size:clamp(27px,3.4vw,40px);font-weight:900;line-height:1.42;margin:0;color:#fff;}
.svc-hero__lead{margin:16px 0 0;font-size:14.5px;line-height:2;color:#B9C3D8;max-width:800px;}
.svc-hero__lead a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px;}

/* 強み（案3：濃紺バンド・反転）。ヒーローと同じ濃紺で連続させつつ、上辺のヘアラインで区切る。 */
.svc-strengths{background:#fff;color:#16233C;padding:46px 0 58px;border-top:1px solid #E8E5DC;}
.svc-strengths__eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--orange-deep);margin:0 0 12px;}
.svc-strengths__title{font-size:clamp(22px,2.6vw,28px);font-weight:900;line-height:1.4;margin:0;color:#16233C;}
.svc-strengths__lead{margin:10px 0 0;font-size:13.5px;line-height:1.9;color:#55617A;}
.svc-strengths__grid{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:28px;border-top:1px solid #C7CEDB;border-bottom:1px solid #C7CEDB;border-left:1px solid #C7CEDB;}
.svc-strength{padding:28px 24px;border-right:1px solid #C7CEDB;}
/* POINT02 だけ、しれっと強調（淡い青みの地色）。派手にしない。 */
.svc-strength--featured{background:#F4F7FC;}
.svc-strength__num{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--font-mono);font-size:30px;font-weight:500;color:var(--orange);line-height:1;margin:0 0 14px;}
.svc-strength__num-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;color:#8A93A6;}
.svc-strength__title{font-size:17px;font-weight:900;line-height:1.5;margin:0 0 10px;color:#16233C;}
.svc-strength__desc{font-size:13px;line-height:1.85;color:#33415C;margin:0;}
@media (max-width:768px){
  .svc-strengths__grid{grid-template-columns:1fr;}
  .svc-strength{border-bottom:1px solid #C7CEDB;padding:22px 20px;}
  .svc-strength:last-child{border-bottom:0;}
}

/* ── サービス紹介バンド（案A・2026-07-24 運営者決定・参照画像準拠）。
   巨大な薄い「SERVICE」ウォーターマーク＋左見出し＋写真背景カード3枚。
   背景は .svc-hero と同一 #16233C。isolation:isolate で、::before/::after と
   ウォーターマーク（z-index:-1）を「背景の上・本文の下」に収める。 */
.svc-intro{position:relative;overflow:hidden;isolation:isolate;background:#16233C;color:#fff;padding:66px 0 60px;}
.svc-intro__wm{position:absolute;top:-.16em;left:max(24px,calc((100% - 1040px)/2));z-index:-1;margin:0;pointer-events:none;
  font-family:var(--font-mono);font-weight:800;letter-spacing:.02em;line-height:.9;white-space:nowrap;
  font-size:clamp(96px,17vw,230px);color:rgba(255,255,255,.055);}
.svc-intro__eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;color:#7FA8E8;margin:0 0 18px;}
.svc-intro__title{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.42;margin:0;color:#fff;text-wrap:balance;}
.svc-intro__lead{margin:22px 0 0;font-size:14.5px;line-height:2;color:#B9C3D8;max-width:54em;}
/* カード群の小見出し（案B：白の太字＋オレンジ極太下線・左端寄せ）。2026-07-25 運営者指示。 */
.svc-intro__subhead{display:inline-block;margin:38px 0 0;font-size:19px;font-weight:900;color:#fff;line-height:1.5;}
.svc-intro__subhead::after{content:"";display:block;width:56px;height:4px;background:var(--orange);margin-top:10px;}
.svc-intro__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:20px;}
/* 6枚のカードの下に、さりげないサービス一覧リンク（オレンジ・右寄せ）。2026-07-25 */
.svc-intro__all{display:block;text-align:right;margin-top:20px;font-size:13.5px;font-weight:700;color:var(--orange);text-decoration:none;}
.svc-intro__all:hover{color:#F4926A;text-decoration:underline;}
/* 写真カード。::before＝写真地（当面はプレースホルダのグラデ／実装時に background-image へ差替）、
   ::after＝上を明るく下を濃紺に落とす可読オーバーレイ。 */
.svc-icard{position:relative;overflow:hidden;isolation:isolate;min-height:280px;
  /* 内容は下寄せ。下パディングを増やして、見出し＋前後テキストを少しだけ上へ（2026-07-25 運営者指示）。 */
  display:flex;flex-direction:column;justify-content:flex-end;padding:30px 26px 56px;text-align:center;color:#fff;}
.svc-icard::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(150deg,#33507f,#1b2c49 55%,#101b30);}
/* カード背景写真（2026-07-25 運営者支給。テキスト可読性は下の ::after ダーク・グラデが担保）。
   mod1=記帳代行 / mod2=給与計算 / mod3=法人税申告。 */
.svc-icard--1::before{background:url('assets/img/svc/card-bookkeeping.jpg') center/cover no-repeat;}
.svc-icard--2::before{background:url('assets/img/svc/card-payroll.jpg') center/cover no-repeat;}
.svc-icard--3::before{background:url('assets/img/svc/card-tax.jpg') center/cover no-repeat;}
/* 下段3枚（2026-07-25 追加）。mod4=売上税申告 / mod5=月次・年次決算 / mod6=請求・支払管理。
   ::after のダーク・オーバーレイは全カード共通なので透明度は上段3枚と同じ。 */
.svc-icard--4::before{background:url('assets/img/svc/card-salestax.jpg') center/cover no-repeat;}
.svc-icard--5::before{background:url('assets/img/svc/card-closing.jpg') center/cover no-repeat;}
.svc-icard--6::before{background:url('assets/img/svc/card-ar-ap.jpg') center/cover no-repeat;}
/* 写真の上のダーク・オーバーレイ。白文字をはっきり見せるため写真をさらに沈めた（2026-07-25 運営者指示・
   2回目。ほぼ紺地に写真がうっすら透ける程度まで濃く）。 */
.svc-icard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(22,35,60,.82) 0%,rgba(22,35,60,.9) 55%,rgba(13,20,34,.97) 100%);}
.svc-icard__label{font-size:13px;font-weight:700;line-height:1.6;color:#7FA8E8;margin:0 0 14px;}
.svc-icard__title{font-size:20px;font-weight:900;line-height:1.5;margin:0 0 16px;color:#fff;}
/* descの行数差でタイトルがズレないよう、desc枠の高さを3行ぶんに固定（上寄せ＝各descの
   1行目が揃う）。__label・__title・descの1行目がすべて同じ高さに揃う。
   （2026-07-25 運営者指示。前回は下寄せで2行descの1行目が下がっていたため上寄せへ） */
.svc-icard__desc{font-size:13px;line-height:1.9;color:#D6DEEC;margin:0;min-height:5.7em;}
@media (max-width:760px){
  .svc-intro{padding:48px 0 44px;}
  .svc-intro__wm{font-size:clamp(72px,22vw,120px);}
  .svc-intro__cards{grid-template-columns:1fr;}
  .svc-icard{min-height:300px;}
}

/* 案3：カード列の背景を極薄グレーにして、白カードを地色差で浮かせる（2026-07-23）。 */
.akb-svc{background:#F5F7FA;}
/* カードグリッド（均一高さ） */
.akb-svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:20px;grid-auto-rows:1fr;
}
.akb-svc-card{
  display:flex;flex-direction:column;gap:15px;text-decoration:none;color:#16233C;
  background:#fff;border:1px solid #E3E8EF;border-top:3px solid #16233C;border-radius:0;
  padding:24px 22px;height:100%;min-height:398px;
  box-shadow:0 2px 10px rgba(22,35,60,.06);transition:box-shadow .13s ease, transform .13s ease;
}
a.akb-svc-card:hover{box-shadow:0 12px 30px rgba(22,35,60,.13);transform:translateY(-3px);}
a.akb-svc-card:focus-visible{outline:2px solid #16233C;outline-offset:2px;}
/* アイコンは廃止（2026-07-23 運営者指示）。空いた分タイトルを主役に大きく。 */
.akb-svc-card__name{position:relative;font-size:26px;font-weight:900;line-height:1.3;margin:0;padding-bottom:12px;color:#16233C;}
/* ロゴと同じ、右へフェードするオレンジ下線をタイトルに（2026-07-23）。 */
.akb-svc-card__name::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,var(--orange) 0,var(--orange) 55%,transparent 100%);}
.akb-svc-card__target{font-size:11px;font-weight:700;color:#55617A;background:#EFF2F7;border-radius:0;padding:2px 9px;align-self:flex-start;}

/* お悩みボックス（淡い青グレー地・英字ラベル・オレンジのダッシュ） */
.akb-svc-card__worrybox{flex:1;background:#F6F8FB;border:1px solid #EAEEF5;border-radius:0;padding:15px 16px;}
.akb-svc-card__worrylabel{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#5B6B8C;margin:0 0 10px;}
.akb-svc-card__worryicon{width:22px;height:22px;flex-shrink:0;}
.akb-svc-card__worries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.akb-svc-card__worries li{font-size:13px;line-height:1.65;color:#33415C;padding-left:18px;position:relative;}
.akb-svc-card__worries li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2.5px;border-radius:2px;background:var(--orange);}

/* CTA＝アウトライン→ホバーでネイビー充填 */
.akb-svc-card__go{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  border:none;color:#fff;background:#2C5AA0;border-radius:0; /* 青系の少し濃いめ（2026-07-23） */
  font-weight:900;font-size:14.5px;line-height:1.3;padding:12px 14px;text-align:center;
  transition:background .13s ease;
}
a.akb-svc-card:hover .akb-svc-card__go{background:#24487F;}

/* 個別LP：一覧へ戻るリンク */
.akb-lp__back{margin:0 0 10px;}
.akb-lp__back a{font-size:13px;color:var(--ink-60);text-decoration:none;}
.akb-lp__back a:hover{color:var(--orange-deep);}

/* カード前後の無料相談CTA（白箱・左オレンジ罫・ネイビーボタン） */
.akb-preconsult-wrap{margin-top:40px;margin-bottom:40px;}
.akb-preconsult{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px; /* テキスト中央＋ボタンは改行して下に（2026-07-23） */
  background:#fff;border:1px solid #DFE3EB;border-radius:0; /* 四方均一の細線（左オレンジ罫は撤去） */
  padding:20px 24px;box-shadow:0 10px 30px rgba(22,35,60,.14); /* 全体に影＝カードを強調 */
}
.akb-preconsult__text{flex:0 1 auto;margin:0;font-size:14px;line-height:1.7;font-weight:700;color:#33415C;}
.akb-preconsult__btn{
  flex-shrink:0;white-space:nowrap;text-decoration:none;
  font-size:13.5px;font-weight:900;color:var(--ink);background:var(--yellow);
  border:none;border-radius:0;padding:12px 22px;transition:background .13s ease;
}
.akb-preconsult__btn:hover{background:#E7C43C;}
.akb-preconsult__btn:focus-visible{outline:2px solid #16233C;outline-offset:2px;}
@media (max-width:560px){
  .akb-preconsult__btn{width:100%;text-align:center;}
}


/* === 角丸ボックスの一律四角化（2026-07-25 運営者指示「全て四角く・とりあえず」）。
   コンテンツのボックス/カード/コールアウト/パネルのみ。pill・丸アイコン・ボタン・入力欄・
   トップの図版モック（.frame/.sc-shot 等）は対象外。戻す時はこのブロックを削除。 === */
.akb-cta,.akb-cta2,.akb-disclaimer,.akb-fixed-cta,.hero-persona,.why-card,.sc-card,
.cta-band,.kakari,.bucho-card,.article-card,.akb-case-card,.akb-case__disclosure,
.no-posts,.akb-notice,.page-prose blockquote{border-radius:0;}

/* === ボタン・入力欄・pill・小バッジも四角化（2026-07-25 運営者指示）。
   円形（アバター/丸アイコン/ドット/順位バッジ/スタンプ）とトップの図版モックは対象外。 === */
.btn,.btn-lg,.site-header .btn,.home-action__btn,.akb-fixed-cta__btn,.page-hero__pastlink,
.akb-search,.nav-toggle,.search-form input[type="search"],.pagination .page-numbers,
.hp-who,.hp-row,.kakari-tag,.cat-tag,.keyword-tag,.cat-nav__item,.akb-case-filter__item,
.bucho-role,.akb-case-card__persona,.akb-notice__label,.akb-case__tag,.why-num{border-radius:0;}