/* ==========================================================
   FUJITA税理士法人｜札幌 飲食店サイト — デザイン確認用スタイル
   WordPressテーマ化の際もこのファイルをそのまま使います（css/style.css）
   ・クラス名はすべて fj- で始まります（fj-block__elem--mod）
   ・色・文字・余白は :root の変数だけで変えられます
   ・スマホが基本（min-width で広げる）。768 / 1024 / 1200px
   ========================================================== */

/* ==========================================================
   0. Tokens
   ========================================================== */
:root{
  color-scheme:light;

  /* --- color（コントラスト比は白地に対して）
     2026-09-25 オーナー確認1回目：東京美容室サイトに合わせて、青みのグレー・藍をやめ、温かい墨色・ベージュに変更 --- */
  --ink:#3D3935;            /* 本文・見出し（東京サイトの見出しの色）11.3:1 */
  --ink-2:#4F4A46;          /* 強めの補足・リード 8.6:1 */
  --muted:#68625D;          /* 補足・注記 6.0:1（--bg-alt 上 5.4:1） */
  --faint:#A39B92;          /* 飾り線・区切りのみ。文字には使わない */
  --line:#E6DFD6;
  --line-strong:#CFC6BA;
  --bg:#FFFFFF;
  --bg-alt:#F6F2EF;         /* ベージュ（東京サイトの地の色。交互のセクション・ヘッダー） */
  --surface:#FFFFFF;

  --brand:#EF8432;          /* 東京サイトのオレンジ（お問い合わせボタン） */
  --brand-grad:linear-gradient(90deg,#F08D47,#EF8432); /* お問い合わせボタンの地（東京サイトと同じ） */
  --brand-hover:#E0741F;
  --brand-ink:#9C4A00;      /* 白・淡い地の上のオレンジ文字（--brand-soft 上 5.6:1） */
  --brand-bright:#EF8432;   /* 線・点・飾り（白地の文字には使わない） */
  --brand-light:#F4A259;    /* 濃い地の上のオレンジ文字 */
  --brand-soft:#FDF0E4;     /* バッジ・強調行・注意ボックスの地 */
  --brand-mark:#FBD9B8;     /* 蛍光ペン風マーカー・選択色 */

  --gold:#B18A43;           /* 東京サイトの金色（案内のボタン・フォームのカード） */
  --gold-ink:#7E6128;       /* 白地の上の金色の文字 5.6:1 */
  --gold-label:#CEAC3B;     /* 濃い地の上の英字ラベル */

  --secondary:#1A2B3C;      /* 紺（東京サイトの「4つの理由」の地）：濃いセクション・番号・アイコン（白文字 14:1） */
  --secondary-hover:#122130;
  --secondary-soft:#EFEAE3; /* 温かいグレージュ：法人の行・アイコンの丸 */

  --cta-bg:#3D3935;         /* お問い合わせの帯（東京サイトと同じ濃い茶色） */
  --cta-tel-card:#F2F0ED;   /* 電話のカード */
  --footer-bg:#2E2A27;

  --line-green:#06C755;     /* LINEの緑：白いボタンの文字・枠（東京サイトと同じ） */
  --line-green-hover:#F0FBF4;
  --line-on:#06C755;

  --ok:#1D7A46;       --ok-soft:#E7F4EC;
  --notice:#7A5200;   --notice-soft:#FFF5DB;  --notice-line:#D69E2E;
  --danger:#B42318;

  --on-dark:#FFFFFF;
  --on-dark-muted:#DAD5CF;  /* 濃い茶色・紺の上 */
  --on-dark-line:rgba(255,255,255,.22);
  --focus:#3D3935;

  /* --- type ---
     2026-09-25 オーナー確認1回目：「冷たい・自信がなく見える」とのご意見で、端末の書体（WindowsではBIZ UDPゴシック）をやめ、
     東京サイトと同じ Google Fonts を読み込む（本文 Noto Sans JP、トップの大見出し Zen Kaku Gothic New の極太、数字・英字 DM Sans） */
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","YuGothic",Meiryo,sans-serif;
  --font-head:var(--font-body);
  --font-display:"Zen Kaku Gothic New",var(--font-body); /* トップ・各ページの h1 だけ（900） */
  --font-num:"DM Sans","Helvetica Neue",Arial,var(--font-body);  /* 数字・電話番号・英字ラベル */

  --fs-note:.8125rem;                                  /* 13px ※注記 */
  --fs-sm:.875rem;                                     /* 14px */
  --fs-base:1rem;                                      /* 16px */
  --fs-md:clamp(1rem,.94rem + .28vw,1.125rem);         /* 16→18 リード */
  --fs-h4:1.0625rem;                                   /* 17px */
  --fs-h3:clamp(1.125rem,1rem + .5vw,1.375rem);        /* 18→22 */
  --fs-h2:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);       /* 24→34 */
  --fs-h1:clamp(1.625rem,1.05rem + 2.4vw,2.875rem);    /* 26→46 */
  --fs-num-lg:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);    /* 28→40 電話番号・料金（小） */
  --fs-num-xl:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);    /* 36→56 料金（大） */
  --lh-body:1.85;
  --lh-head:1.45;
  --lh-tight:1.25;

  /* --- space（4の倍数） --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --section-y:clamp(56px,2.5rem + 4vw,96px);

  /* --- layout --- */
  --wrap:1120px;
  --wrap-narrow:760px;
  --gutter:16px;
  --header-h:60px;
  --mbar-h:65px;            /* 64px + 上の線1px */

  /* --- shape --- */
  --r-sm:4px; --r:8px; --r-lg:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(45,35,25,.06),0 6px 16px -8px rgba(45,35,25,.14);
  --sh-2:0 12px 32px -14px rgba(45,35,25,.32);

  /* --- motion --- */
  --dur:.2s;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:768px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --header-h:76px; } }
@media (min-width:1200px){ :root{ --gutter:32px; } }

/* ==========================================================
   1. Base
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;min-height:100vh;
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  letter-spacing:.02em;line-break:strict;overflow-wrap:break-word;
  padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom)); /* スマホ下部バーの分 */
}
@media (min-width:1024px){ body{padding-bottom:0} }
/* キーボードで移動したときに、スマホ下部バーの下に隠れないように */
@media (max-width:1023.98px){ html{scroll-padding-bottom:calc(var(--mbar-h) + 12px)} }
html.is-menu-open{overflow:hidden}

h1,h2,h3,h4{
  margin:0;font-family:var(--font-head);font-weight:700;line-height:var(--lh-head);
  letter-spacing:.03em;font-feature-settings:"palt";
  text-wrap:balance;word-break:auto-phrase;
}
/* 見出し以外でも、文節の途中で改行しないように（Chrome/Edge 119+。ほかのブラウザは通常の改行） */
.fj-callout__title,.fj-faq__q,.fj-voice__quote,.fj-check>li,.fj-incl__title,.fj-incl__text,.fj-fact__cond,.fj-fact__label,
.fj-btn,.fj-btn__sub,.fj-dl dd,.fj-footer__nap,.fj-footer__sub,.fj-cta__sub,.fj-cta__lead,.fj-hero__notes li,.fj-pagehead__notes li,
.fj-reason__title,.fj-step__title,.fj-selfcheck__title,.fj-iconlist li,.fj-fee__label,.fj-cond,.fj-plan__label,.fj-assure li,.fj-inline-cta__text,
.fj-inline-cta__sub,.fj-prep__cap,.fj-split__cap,.fj-split__list li,.fj-chip--sm,.fj-price th,.fj-price td,.fj-price small,.fj-cta__big{
  word-break:auto-phrase;text-wrap:pretty;
}
.fj-callout__title{text-wrap:balance}
p,li,dd{text-wrap:pretty} /* 最後の行に1〜2文字だけ残るのを防ぐ */
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--brand-ink);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit}
table{border-collapse:collapse;border-spacing:0}
address{font-style:normal}
small{font-size:var(--fs-note)}
strong,b{font-weight:700}
summary{cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--brand-mark);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.fj-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fj-skip{position:absolute;left:8px;top:-120px;z-index:100;padding:12px 18px;background:var(--secondary);color:#fff;font-weight:700;border-radius:var(--r);text-decoration:none}
.fj-skip:focus{top:8px}
.fj-icon{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}

/* ==========================================================
   2. Layout
   ========================================================== */
.fj-wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.fj-wrap--narrow{max-width:calc(var(--wrap-narrow) + var(--gutter)*2)}

.fj-section{padding-block:var(--section-y)}
.fj-section--alt{background:var(--bg-alt)}
.fj-section--dark{background:var(--secondary);color:var(--on-dark)}
.fj-section--tight{padding-block:calc(var(--section-y)*.6)}
.fj-section--flush-top{padding-top:0}

.fj-grid{display:grid;gap:var(--sp-5)}
@media (min-width:768px){
  .fj-grid--2,.fj-grid--3,.fj-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .fj-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fj-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.fj-stack>*+*{margin-top:var(--sp-4)}
.fj-stack--lg>*+*{margin-top:var(--sp-6)}

/* ==========================================================
   3. Typography helpers
   ========================================================== */
.fj-num{font-family:var(--font-num);font-weight:700;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}
.fj-em{color:var(--brand-ink)}
.fj-mark{background:linear-gradient(transparent 62%,var(--brand-mark) 62%)}
.fj-lead{font-size:var(--fs-md);color:var(--ink-2)}
.fj-muted{color:var(--muted)}

.fj-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-num);font-weight:700;font-size:.8125rem;line-height:1.2;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brand-ink);
}
.fj-eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--brand-bright);flex:none}

/* section heading：eyebrow + h2 + lead */
.fj-head{max-width:46em;margin-bottom:clamp(28px,1.5rem + 1.5vw,48px)}
.fj-head--center{margin-inline:auto;text-align:center}
.fj-head--center .fj-eyebrow{justify-content:center}
.fj-head__title{margin-top:var(--sp-3);font-size:var(--fs-h2)}
.fj-head__lead{margin-top:var(--sp-4);font-size:var(--fs-md);color:var(--muted)}
.fj-section--dark .fj-eyebrow{color:var(--gold-label)}
.fj-section--dark .fj-eyebrow::before{background:var(--gold-label)}
.fj-section--dark .fj-head__lead{color:var(--on-dark-muted)}

/* notes：条件は必ず金額・0円・無料のすぐ近くに置く */
.fj-note{font-size:var(--fs-note);line-height:1.7;color:var(--muted);padding-left:1em;text-indent:-1em}
.fj-notes{margin-top:var(--sp-4)}
.fj-notes li{font-size:var(--fs-note);line-height:1.7;color:var(--muted);padding-left:1em;text-indent:-1em}
.fj-notes li+li{margin-top:4px}
.fj-cond{display:block;margin-top:6px;font-size:var(--fs-note);line-height:1.6;color:var(--muted);font-weight:400;letter-spacing:.02em}
.fj-section--dark .fj-note,.fj-section--dark .fj-notes li,.fj-section--dark .fj-cond{color:var(--on-dark-muted)}

.fj-prose{max-width:42em}
.fj-prose>*+*{margin-top:1em}
.fj-prose h3{margin-top:1.8em;font-size:var(--fs-h3)}
.fj-prose ul,.fj-prose ol{padding-left:1.4em}
.fj-prose li+li{margin-top:.3em}
@media (min-width:1024px){ .fj-prose{font-size:1.0625rem} }

/* ==========================================================
   4. Buttons & links
   ========================================================== */
/* 色は東京美容室サイトと同じ（2026-09-25 オーナー確認1回目）：
   お問い合わせ＝オレンジのグラデーション・白文字／LINE＝白地・緑の文字と枠／電話＝白地・墨色の文字と枠／案内のボタン＝金色。
   形は丸いボタン（東京サイトのヘッダーと同じ）。
   ※白文字×オレンジ、緑の文字×白は、文字の見やすさの基準（4.5:1）には届かない（オーナーのご希望で東京サイトに合わせた）。
     そのぶん文字は太字・16px以上にしている */
.fj-btn{
  --btn-bg:var(--brand-grad);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.7em 1.6em;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:1rem;font-weight:700;line-height:1.35;letter-spacing:.04em;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:opacity var(--dur),background-color var(--dur),border-color var(--dur),color var(--dur),box-shadow var(--dur);
}
.fj-btn:hover{opacity:.9;text-decoration:none}
.fj-btn .fj-icon{width:1.25em;height:1.25em}
.fj-btn--tel{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:var(--ink)}
.fj-btn--tel:hover{opacity:1;--btn-bg:var(--bg-alt)}
.fj-btn--line{--btn-bg:#fff;--btn-fg:var(--line-green);--btn-bd:var(--line-green)}
.fj-btn--line:hover{opacity:1;--btn-bg:var(--line-green-hover)}
.fj-btn--line .fj-icon{width:1.5em;height:1.5em} /* LINEのアイコン（緑の四角に白い吹き出し） */
.fj-btn--gold{--btn-bg:var(--gold);--btn-fg:#fff;border-radius:4px;box-shadow:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.1)}
.fj-btn--outline{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong)}
.fj-btn--outline:hover{opacity:1;--btn-bg:var(--surface);--btn-bd:var(--brand);--btn-fg:var(--brand-ink)}
.fj-btn--white{--btn-bg:#fff;--btn-fg:var(--gold-ink)} /* 金色のカードの中 */
.fj-btn--sm{min-height:44px;padding:.5em 1em;font-size:.9375rem}
.fj-btn--lg{min-height:56px;padding:.8em 1.8em;font-size:1.0625rem}
.fj-btn--block{display:flex;width:100%}
.fj-btn--stack{flex-direction:column;gap:2px}
.fj-btn__main{display:inline-flex;align-items:center;gap:.5em}
.fj-btn__sub{display:block;font-size:.8125rem;font-weight:400;letter-spacing:.02em}
.fj-btn .fj-num{font-size:1.125em;letter-spacing:.03em}

.fj-btns{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--sp-3)}
.fj-btns--center{justify-content:center}
@media (max-width:767.98px){
  .fj-btns--sp-stack{flex-direction:column}
  .fj-btns--sp-stack>.fj-btn{width:100%}
}

.fj-link{
  display:inline-flex;align-items:center;gap:.35em;min-height:44px;padding-block:.35em;
  font-weight:700;color:var(--brand-ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
}
.fj-link .fj-icon{width:1.1em;height:1.1em;transition:transform var(--dur) var(--ease)}
.fj-link:hover .fj-icon{transform:translateX(3px)}
.fj-section--dark .fj-link,.fj-section--dark .fj-note a{color:var(--brand-light)}
.fj-section--dark :focus-visible,.fj-cta :focus-visible,.fj-footer :focus-visible{outline-color:#fff}
.fj-cta__card :focus-visible{outline-color:var(--focus)}

/* ==========================================================
   5. Header & global nav
   ========================================================== */
.fj-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,242,239,.97);border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur);
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .fj-header{background:rgba(246,242,239,.92);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
}
.fj-header.is-scrolled{box-shadow:var(--sh-2)}
.fj-header__in{
  max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--header-h);display:flex;align-items:center;gap:var(--sp-2);
}

/* ロゴ：東京美容室サイトと同じ画像（logo.webp 424×44）。下の小さな1行は、札幌の飲食店向けのサイトであることを示すため */
.fj-logo{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-right:auto;min-width:0;color:var(--ink);text-decoration:none}
.fj-logo__img{display:block;width:clamp(150px,42vw,172px);height:auto}
.fj-logo__sub{font-size:.6875rem;font-weight:500;color:var(--muted);letter-spacing:.06em;line-height:1.2;white-space:nowrap}
.fj-logo--on-dark .fj-logo__img{width:212px}
.fj-logo--on-dark .fj-logo__sub{color:var(--on-dark-muted)}
@media (max-width:359.98px){ .fj-logo__sub{display:none} }
@media (min-width:1024px){
  .fj-logo{gap:6px}
  .fj-logo__img{width:204px}
  .fj-logo__sub{font-size:.75rem}
}

.fj-header__cta{display:none}
.fj-header__telbtn{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--ink);
}
.fj-header__telbtn .fj-icon{width:22px;height:22px}
.fj-menu-btn{
  display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);cursor:pointer;
}
.fj-menu-btn .fj-icon{width:24px;height:24px}
.fj-menu-btn[aria-expanded="true"] .fj-menu-btn__open,
.fj-menu-btn:not([aria-expanded="true"]) .fj-menu-btn__close{display:none}

@media (min-width:1024px){
  .fj-header__in{gap:var(--sp-3)}
  .fj-header__telbtn,.fj-menu-btn{display:none}
  .fj-header__cta{display:flex;align-items:center;gap:var(--sp-3)}
}
.fj-header__tel{
  display:flex;flex-direction:column;align-items:flex-end;margin-right:var(--sp-2);
  color:var(--ink);text-decoration:none;line-height:1.15;
}
.fj-header__tel-num{display:flex;align-items:center;gap:6px;font-size:1.5rem}
.fj-header__tel-num .fj-icon{width:20px;height:20px;color:var(--ink)}
.fj-header__tel-time{margin-top:3px;font-size:.75rem;font-weight:500;color:var(--muted)}
.fj-header__tel:hover .fj-num{color:var(--brand-ink)}
/* ヘッダーのLINEは、東京サイトと同じく枠なしの白い丸ボタン（ベージュの地の上） */
.fj-header__cta .fj-btn--line{--btn-bd:#fff}
.fj-header__cta .fj-btn{min-height:48px;padding-inline:1.6em}

/* global nav：スマホはヘッダー下の全画面メニュー、PCはヘッダー下の横並び（スクロールで流れる） */
.fj-gnav{display:none}
.fj-gnav.is-open{
  display:block;position:fixed;inset:var(--header-h) 0 0 0;z-index:45;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-2) var(--gutter) calc(var(--sp-7) + env(safe-area-inset-bottom));
  background:var(--bg);
}
.fj-gnav__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:54px;padding:var(--sp-3) var(--sp-1);border-bottom:1px solid var(--line);
  color:var(--ink);font-weight:700;text-decoration:none;
}
.fj-gnav__link::after{content:"";width:8px;height:8px;margin-right:6px;border-top:2px solid var(--faint);border-right:2px solid var(--faint);transform:rotate(45deg);flex:none}
.fj-gnav__link[aria-current="page"]{color:var(--brand-ink)}
.fj-gnav__cta{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.fj-gnav__note{margin-top:var(--sp-1)}

@media (min-width:1024px){
  .fj-gnav,.fj-gnav.is-open{
    display:block;position:static;overflow:visible;padding:0;
    background:var(--bg-alt);border-bottom:1px solid var(--line);
  }
  .fj-gnav .fj-gnav__list{ /* ul[class]{padding:0} より強くして、ロゴ・本文と左端をそろえる */
    max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter);
    display:flex;flex-wrap:wrap;column-gap:clamp(16px,2.2vw,32px);
  }
  .fj-gnav__item--sp{display:none}
  .fj-gnav__link{position:relative;min-height:48px;padding:0;border:0;font-size:.9375rem}
  .fj-gnav__link::after{content:none}
  .fj-gnav__link:hover{color:var(--brand-ink)}
  .fj-gnav__link[aria-current="page"]::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--brand-bright)}
  .fj-gnav__cta{display:none}
}

/* ==========================================================
   6. Mobile bottom bar（電話｜LINE｜初回無料相談）
   ========================================================== */
.fj-mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -12px rgba(45,35,25,.3);
}
.fj-mbar__btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;padding:4px;border-radius:var(--r);
  font-size:.875rem;font-weight:700;line-height:1.2;letter-spacing:.02em;text-align:center;text-decoration:none;
}
.fj-mbar__btn .fj-icon{width:20px;height:20px}
/* 色は東京サイトのメニュー内のボタンと同じ（電話＝墨色の枠、LINE＝緑の枠、お問い合わせ＝オレンジ） */
.fj-mbar__btn--tel{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.fj-mbar__btn--line{background:#fff;color:var(--line-green);border:1px solid var(--line-green)}
.fj-mbar__btn--line .fj-icon{width:22px;height:22px}
.fj-mbar__btn--form{background:var(--brand-grad);color:#fff}
@media (min-width:1024px){ .fj-mbar{display:none} }

/* ==========================================================
   7. Hero
   ========================================================== */
/* 2026-09-25 オーナー確認1回目：焼鳥の写真をやめ、東京美容室サイトと同じ形（右に代表の切り抜き写真）に作り直し。
   写真の後ろは写真を使わず、斜めに切った温かい色の面（札幌の街の写真を撮影したら差し替えてもよい） */
.fj-hero{
  --hero-pt:clamp(24px,1rem + 2.5vw,56px);--hero-pb:clamp(36px,1.5rem + 2.5vw,64px);
  background:var(--bg-alt);padding-block:var(--hero-pt) var(--hero-pb);overflow:hidden;
}
.fj-hero__in{display:grid;gap:var(--sp-6)}
.fj-hero__area{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.fj-hero__area .fj-icon{width:18px;height:18px;color:var(--brand-ink)}
.fj-hero__title{margin-top:var(--sp-3);font-family:var(--font-display);font-weight:900;font-size:var(--fs-h1);line-height:1.34;letter-spacing:.02em}
.fj-hero__lead{margin-top:var(--sp-4);max-width:34em;font-size:var(--fs-md);color:var(--ink-2)}
.fj-hero__facts{margin-top:var(--sp-5)}
.fj-hero__cta{margin-top:var(--sp-5)}
.fj-hero__note{margin-top:var(--sp-3)}

/* 代表の写真（切り抜き。写真の中に「代表税理士 藤田賢」の札が入っているので、名前の文字は重ねない） */
.fj-hero__media{position:relative;isolation:isolate;height:272px;margin-inline:calc(var(--gutter) * -1)}
.fj-hero__panel{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,#EFE4D6 0%,#E2CFB8 100%);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
}
.fj-hero__panel::after{ /* 下の辺のオレンジの線 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--brand-bright);
}
.fj-hero__figure{position:absolute;bottom:0;left:52%;transform:translateX(-50%);height:100%;aspect-ratio:696/1010}
.fj-hero__figure::before{ /* 頭のうしろの白い丸 */
  content:"";position:absolute;z-index:-1;left:50%;top:4%;width:80%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:rgba(255,255,255,.55);
}
.fj-hero__rep{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
@media (min-width:768px){ .fj-hero__media{height:400px} }

/* スマホ・タブレット：写真を少し小さくして右に寄せ、左に丸いバッジ（駅から徒歩7分）と3つのポイントを置く（東京サイトのバッジと同じ考え方）。
   PCでは出さない（写真の下の「4つのポイント」の帯と同じ内容のため）。スマホでは下の帯のほうを出さない */
@media (max-width:1023.98px){
  .fj-hero__figure{left:66%;height:90%}
  .fj-hero__in>.fj-assure{display:none}
}
.fj-hero__badges{
  position:absolute;z-index:1;left:var(--gutter);top:12px;bottom:14px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;
}
.fj-hero__access{
  display:grid;place-content:center;justify-items:center;width:96px;aspect-ratio:1;margin-left:4px;
  background:#fff;border:1px solid var(--line-strong);border-radius:50%;box-shadow:var(--sh-1);
  color:var(--ink);text-align:center;line-height:1.2;
}
.fj-hero__access-sub{font-size:.6875rem;font-weight:700;letter-spacing:.02em}
.fj-hero__access-main{margin-top:2px;font-size:.8125rem;font-weight:700}
.fj-hero__access-main .fj-num{margin:0 1px;font-size:2rem;line-height:1;color:var(--brand-ink)}
.fj-hero__points{display:grid;gap:6px}
.fj-hero__points li{
  display:flex;align-items:center;gap:5px;padding:6px 12px 6px 9px;
  background:rgba(255,255,255,.96);border-radius:var(--r-pill);box-shadow:var(--sh-1);
  font-size:.8125rem;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;
}
.fj-hero__points .fj-icon{width:15px;height:15px;color:var(--ok)}
@media (min-width:768px){
  .fj-hero__figure{left:62%}
  .fj-hero__badges{gap:14px}
  .fj-hero__access{width:120px}
  .fj-hero__access-sub{font-size:.8125rem}
  .fj-hero__access-main{font-size:.9375rem}
  .fj-hero__access-main .fj-num{font-size:2.5rem}
  .fj-hero__points li{padding:8px 16px 8px 12px;font-size:.9375rem}
}
@media (min-width:1024px){ .fj-hero__badges{display:none} }
/* 小さいスマホ（360px前後）：写真を少し低くして、最初の画面に相談ボタンまで入るように */
@media (max-width:374.98px){
  .fj-hero__media{height:236px}
  .fj-hero__title{font-size:1.5rem} /* 「札幌で飲食店の開業・経営を」を1行に */
  .fj-hero__badges{gap:8px;top:10px;bottom:12px}
  .fj-hero__access{width:84px}
  .fj-hero__access-main .fj-num{font-size:1.75rem}
  .fj-hero__points li{padding:5px 10px 5px 8px;font-size:.75rem}
  .fj-hero__cta>.fj-btn:not(.fj-btn--line) .fj-icon,.fj-pagehead__body>.fj-pagehead__cta>.fj-btn:not(.fj-btn--line) .fj-icon{display:none}
  .fj-mbar__btn{font-size:.8125rem;letter-spacing:0}
}
@media (max-width:359.98px){ .fj-assure li{word-break:normal;font-size:.75rem;padding-inline:8px;gap:4px} }

/* スマホ・タブレット：見出し → 代表の写真 → 事実のタイル → ボタン → リード → 注記 → 安心の帯 の順に並べる
   （最初の画面に、見出し・代表の顔・料金・相談ボタンが入るように。.fj-hero__body を display:contents にして order で並べ替える） */
@media (max-width:1023.98px){
  .fj-hero__in{gap:0}
  .fj-hero__body{display:contents}
  .fj-hero__area{order:0}
  .fj-hero__title{order:1}
  .fj-hero__media{order:2;margin-top:var(--sp-4)}
  .fj-hero__facts{order:3;margin-top:var(--sp-4)}
  .fj-hero__cta{order:4;margin-top:var(--sp-4)}
  .fj-hero__lead{order:5;margin-top:var(--sp-5)}
  .fj-hero__notes{order:6}
  .fj-hero__in>.fj-assure{order:7}
}
@media (max-width:767.98px){
  .fj-hero__area{display:none} /* 見出しに「札幌で飲食店の」とあり、スマホでは1行でも短くするため */
  .fj-hero__title{margin-top:0}
  .fj-hero__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .fj-hero__cta>.fj-btn{min-height:60px;padding:.55em .5em;font-size:1rem;gap:.35em}
}
.fj-hero__tel{display:none}
@media (min-width:1024px){
  .fj-hero__in{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:0 40px;align-items:stretch}
  .fj-hero__in>.fj-assure{grid-column:1/-1}
  .fj-hero__body{align-self:center;padding-block:8px}
  /* 写真の列は、ヘッダーのすぐ下から・画面の右の端まで広げる（東京サイトと同じ）。下は4つのポイントの帯の上まで */
  .fj-hero__media{
    height:auto;min-height:540px;
    margin-top:calc(var(--hero-pt) * -1);
    margin-left:-24px;
    margin-right:calc(var(--gutter) * -1 - max(0px,(100vw - var(--wrap) - var(--gutter) * 2) / 2));
  }
  .fj-hero__panel{clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
  /* 幅で大きさを決める（高さで決めると、1024～1250pxの画面で写真が列からはみ出し、写真の中の名札が切れるため） */
  .fj-hero__figure{left:clamp(24px,12%,96px);transform:none;height:auto;width:min(calc(100% - clamp(24px,12%,96px) - 16px),468px)}
  /* PCはヘッダーに番号があるので、電話はボタンにせず1行で */
  .fj-hero__tel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:var(--sp-3);font-size:.9375rem;color:var(--ink-2)}
  .fj-hero__tel .fj-icon{width:18px;height:18px;color:var(--ink)}
  .fj-hero__tel a{color:var(--ink);font-size:1.25rem;text-decoration:none}
  .fj-hero__tel a:hover{color:var(--brand-ink);text-decoration:underline}
}

/* hero badges（事実のタイル）：数字の横に条件を必ず置く */
.fj-facts{display:grid;gap:var(--sp-2)}
.fj-fact{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:var(--sp-4);
  padding:12px 16px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--brand-bright);border-radius:var(--r);
}
.fj-fact__label{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);line-height:1.4}
.fj-fact__value{justify-self:end;font-size:1.0625rem;font-weight:700;line-height:1.2;white-space:nowrap}
.fj-fact__value .fj-num{font-size:1.75rem;line-height:1}
.fj-fact__cond{grid-column:1/-1;margin-top:6px;font-size:var(--fs-note);line-height:1.6;color:var(--muted)}
@media (min-width:1024px){
  .fj-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
  .fj-fact{grid-template-columns:1fr;align-content:start;padding:14px 16px 16px;border-left-width:1px;border-top:4px solid var(--brand-bright)}
  .fj-fact__value{justify-self:start;margin-top:4px}
}
/* トップのタイルは2つ（顧問料・創業融資サポート）。お客様の声の人数のタイルは、声が3名になったため外した */
@media (min-width:640px){ .fj-hero__facts.fj-facts--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} }

/* ==========================================================
   8. Page head / breadcrumb / in-page anchors
   ========================================================== */
.fj-pagehead{background:var(--bg-alt);padding-block:var(--sp-4) clamp(32px,1.5rem + 2vw,56px);border-bottom:1px solid var(--line)}
.fj-pagehead__eyebrow{margin-top:var(--sp-5)}
.fj-pagehead__title{margin-top:var(--sp-3);font-family:var(--font-display);font-weight:900;font-size:var(--fs-h1);line-height:1.34;letter-spacing:.02em}
.fj-pagehead__lead{margin-top:var(--sp-4);max-width:40em;font-size:var(--fs-md);color:var(--ink-2)}
.fj-pagehead__facts{margin-top:var(--sp-5)}
.fj-pagehead__cta{margin-top:var(--sp-5)}

.fj-crumbs{font-size:.8125rem;color:var(--muted)}
.fj-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
.fj-crumbs li{display:inline-flex;align-items:center}
.fj-crumbs li+li::before{content:"";width:6px;height:6px;margin:0 10px 0 7px;border-top:1.5px solid var(--faint);border-right:1.5px solid var(--faint);transform:rotate(45deg)}
.fj-crumbs a{display:inline-block;padding-block:10px;color:var(--muted);text-decoration:none}
.fj-crumbs a:hover{color:var(--brand-ink);text-decoration:underline}
.fj-crumbs [aria-current]{color:var(--ink-2);font-weight:700}

.fj-anchors{display:flex;flex-wrap:wrap;gap:8px}
.fj-anchors a{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  color:var(--ink);font-size:var(--fs-sm);font-weight:700;text-decoration:none;white-space:nowrap;
}
.fj-anchors a::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.fj-anchors a:hover{border-color:var(--brand);color:var(--brand-ink)}
@media (min-width:1024px){ .fj-anchors{gap:6px} .fj-anchors a{padding:0 14px} } /* PCで7つが1行に入るように */

/* ==========================================================
   9. Components
   ========================================================== */

/* --- badge --- */
.fj-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 10px;
  background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r-pill);
  font-size:.75rem;font-weight:700;line-height:1.6;letter-spacing:.04em;white-space:nowrap;
}
.fj-badge--secondary{background:var(--secondary-soft);color:var(--secondary)}
.fj-badge--outline{background:transparent;border:1px solid var(--line-strong);color:var(--ink-2)}
.fj-badge--ok{background:var(--ok-soft);color:var(--ok)}

/* --- chips（ご相談いただける業態・タグ） --- */
.fj-chips{display:flex;flex-wrap:wrap;gap:8px}
.fj-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--ink);
}
.fj-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-bright);flex:none}
.fj-chip--sm{min-height:0;padding:2px 10px;background:var(--bg-alt);border-color:transparent;font-size:.75rem;color:var(--ink-2)}
.fj-chip--sm::before{content:none}
.fj-section--alt .fj-chip--sm,.fj-hero .fj-chip--sm,.fj-pagehead .fj-chip--sm{background:var(--surface);border-color:var(--line)}
.fj-section--alt .fj-voice .fj-chip--sm{background:var(--bg-alt);border-color:transparent}

/* --- entry cards（2つの入口）：カード全体がリンク --- */
.fj-entries{display:grid;gap:var(--sp-4)}
@media (min-width:768px){ .fj-entries{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)} }
.fj-entry{
  --entry-c:var(--brand-ink);--entry-soft:var(--brand-soft);--entry-top:var(--brand);
  position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:24px;
  background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--entry-top);border-radius:var(--r-lg);
  transition:box-shadow var(--dur),transform var(--dur);
}
.fj-entry--running{--entry-c:var(--secondary);--entry-soft:var(--secondary-soft);--entry-top:var(--secondary)}
.fj-entry:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.fj-entry__head{display:flex;align-items:center;gap:var(--sp-3)}
.fj-entry__icon{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:var(--entry-soft);color:var(--entry-c)}
.fj-entry__icon .fj-icon{width:28px;height:28px}
.fj-entry__tag{font-size:var(--fs-sm);font-weight:700;color:var(--entry-c)}
.fj-entry__title{font-size:var(--fs-h3)}
.fj-entry__link{color:var(--ink);text-decoration:none}
.fj-entry__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.fj-entry__link:focus-visible{outline:none}
.fj-entry__link:focus-visible::after{outline:3px solid var(--focus);outline-offset:3px}
.fj-entry__text{font-size:.9375rem;color:var(--muted)}
.fj-entry__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--sp-2);font-weight:700;color:var(--entry-c)}
.fj-entry__more .fj-icon{transition:transform var(--dur) var(--ease)}
.fj-entry:hover .fj-entry__more .fj-icon{transform:translateX(4px)}

/* --- voice card（お客様の声）--- */
.fj-voices{display:grid;gap:var(--sp-5)}
@media (min-width:768px){ .fj-voices{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .fj-voices{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fj-voice{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fj-voice__photo{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--bg-alt)}
.fj-voice__body{display:flex;flex-direction:column;gap:var(--sp-3);flex:1;padding:22px 22px 20px}
.fj-voice__quote{font-size:1.0625rem;font-weight:700;line-height:1.7;color:var(--ink)} /* 引用符は本文の「」だけ */
.fj-voice__text{font-size:.9375rem;color:var(--ink-2)}
.fj-voice__meta{margin-top:auto;padding-top:var(--sp-3);border-top:1px dashed var(--line-strong);font-size:var(--fs-sm);line-height:1.6}
.fj-voice__shop{display:block;font-weight:700;color:var(--ink)}
.fj-voice__name{display:block;color:var(--muted)}
.fj-voice__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-2)}
.fj-voice__date{display:block;margin-top:var(--sp-2);font-size:.75rem;color:var(--muted)}

/* --- plans（顧問料：伝票風。下辺がギザギザ）--- */
.fj-plans{display:grid;gap:var(--sp-5);filter:drop-shadow(0 1px 1px rgba(45,35,25,.10)) drop-shadow(0 8px 14px rgba(45,35,25,.08))} /* 影は親に付ける（ギザギザの形に沿う） */
@media (min-width:768px){ .fj-plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fj-plan{
  --zz:8px;
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px calc(26px + var(--zz));
  background:var(--surface);border-top:6px solid var(--brand);border-radius:var(--r-lg) var(--r-lg) 0 0;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(var(--zz)*2) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(var(--zz)*2) 100%;
}
.fj-plan--hojin{border-top-color:var(--secondary)}
.fj-plan--flat{-webkit-mask:none;mask:none;border:1px solid var(--line-strong);border-top:6px solid var(--brand);border-radius:var(--r-lg);padding-bottom:26px}
.fj-plan__label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:1.0625rem;font-weight:700}
.fj-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:var(--sp-3)}
.fj-plan__pre{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.fj-plan__num{font-size:var(--fs-num-xl);line-height:1;color:var(--ink)}
.fj-plan__unit{font-size:1.125rem;font-weight:700}
.fj-plan__tax{font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.fj-plan__taxin{margin-top:6px;font-size:var(--fs-sm);color:var(--muted)}
.fj-plan__rule{height:0;margin:var(--sp-5) 0 var(--sp-4);border:0;border-top:2px dashed var(--line-strong)}
.fj-plan__notes{margin-top:var(--sp-4)}

/* --- price table（料金が加わる条件・年間の目安など） --- */
.fj-price{width:100%;background:var(--surface);border-top:2px solid var(--ink);font-size:.9375rem}
.fj-price caption{caption-side:top;padding-bottom:var(--sp-3);text-align:left;font-size:1.0625rem;font-weight:700}
.fj-price th,.fj-price td{padding:14px 12px;border-bottom:1px dashed var(--line-strong);text-align:left;vertical-align:top;line-height:1.6}
.fj-price thead th{padding-block:10px;border-bottom:1px solid var(--line-strong);font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.fj-price tbody th{font-weight:700}
.fj-price .is-num{text-align:right}
.fj-price .is-num .fj-num{font-size:1.125rem;white-space:nowrap}
.fj-price tbody th[scope="row"]{width:56%}
@media (min-width:768px){
  .fj-price .is-num{white-space:nowrap}
  .fj-price tbody th[scope="row"]{width:auto}
}
/* 色つきの行＝基本の顧問料（個人はオレンジ、法人は藍。表の上に凡例を置く） */
.fj-price tr.is-strong>*{background:var(--brand-soft)}
.fj-price tr.is-strong--hojin>*{background:var(--secondary-soft)}
.fj-price small{display:block;margin-top:2px;color:var(--muted);font-weight:400}
.fj-price .fj-price__yr{display:none}
.fj-price tr.is-strong .fj-badge{background:var(--surface)}
.fj-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:var(--sp-3);font-size:var(--fs-note);color:var(--muted)}
.fj-legend span{display:inline-flex;align-items:center;gap:6px}
.fj-legend i{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--brand-soft);border:1px solid var(--brand-mark)}
.fj-legend i.is-hojin{background:var(--secondary-soft);border-color:var(--line-strong)}
/* 4列以上の表だけ：スマホでは行ごとのカードに積む（各 td に data-label を付ける）。
   月額（税別／税込）を大きく、年額は1行の小さな文字にまとめる */
@media (max-width:767.98px){
  .fj-price--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .fj-price--stack,.fj-price--stack tbody{display:block;width:100%}
  .fj-price--stack caption{display:block}
  .fj-price--stack tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;padding:12px 12px 10px;border-bottom:1px dashed var(--line-strong)}
  .fj-price--stack tr.is-strong,.fj-price--stack tr.is-strong--hojin{background:var(--brand-soft)}
  .fj-price--stack tr.is-strong--hojin{background:var(--secondary-soft)}
  .fj-price--stack th,.fj-price--stack td,.fj-price--stack .is-num{display:block;width:auto;padding:0;border:0;text-align:left;background:none!important}
  .fj-price--stack tbody th[scope="row"]{grid-column:1/-1;width:auto;margin-bottom:6px}
  .fj-price--stack td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:700;color:var(--muted);line-height:1.4}
  .fj-price--stack td.is-year{display:none}
  .fj-price--stack td.is-year-sp{grid-column:1/-1;margin-top:4px}
  .fj-price--stack td.is-year-sp::before{content:none}
  .fj-price--stack td.is-year-sp .fj-price__v{display:none}
  .fj-price--stack .fj-price__yr{display:block;margin:0;font-size:var(--fs-note);color:var(--ink-2)}
  .fj-price--stack .fj-price__yr .fj-num{font-size:.9375rem}
}
/* 2列の表（条件｜金額）：金額はラベルの近くに左寄せ。PCでも幅を狭めて読みやすく */
.fj-price--cond{max-width:880px}
.fj-price--cond .is-num,.fj-price--cond td{text-align:left}
@media (min-width:768px){
  .fj-price--cond tbody th[scope="row"]{width:45%}
  .fj-price--cond .is-num{white-space:normal}
}

/* --- fees（融資サポートの料金など、2つの大きな数字） --- */
.fj-fees{display:grid;gap:var(--sp-3)}
@media (min-width:768px){ .fj-fees{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} }
.fj-fee{padding:20px 22px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
.fj-fee--main{border:2px solid var(--brand)}
.fj-fee__label{font-size:.9375rem;font-weight:700;color:var(--ink-2)}
.fj-fee__value{margin-top:4px;font-size:1.125rem;font-weight:700;line-height:1.3}
.fj-fee__value .fj-num{font-size:var(--fs-num-lg);line-height:1.1}

/* --- included items（顧問料に含まれる業務。アイコン付き） --- */
.fj-incl{display:grid;gap:var(--sp-3)}
@media (min-width:768px){ .fj-incl{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} }
@media (min-width:1024px){ .fj-incl{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* 最後の1枚だけが行に残るときは、横いっぱいのカードにする（開業ページの7項目など） */
@media (min-width:768px) and (max-width:1023.98px){ .fj-incl>li:last-child:nth-child(odd){grid-column:1/-1} }
@media (min-width:1024px){ .fj-incl>li:last-child:nth-child(3n+1){grid-column:1/-1} }
.fj-incl__item{
  display:grid;grid-template-columns:48px 1fr;column-gap:var(--sp-4);align-items:start;align-content:start;
  padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.fj-incl__icon{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--secondary-soft);color:var(--secondary)}
.fj-incl__icon .fj-icon{width:24px;height:24px}
.fj-incl__title{font-size:var(--fs-h4);line-height:1.5}
.fj-incl__text{margin-top:4px;font-size:var(--fs-sm);line-height:1.7;color:var(--muted)}

/* --- reasons（定額で込みにできる理由：番号付き）--- */
.fj-reasons{display:grid;gap:var(--sp-5)}
@media (min-width:768px){ .fj-reasons{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-5)} }
@media (min-width:1200px){ .fj-reasons{grid-template-columns:repeat(4,minmax(0,1fr))} }
.fj-reason{padding-top:var(--sp-4);border-top:1px solid var(--line-strong)}
.fj-reason__num{display:block;font-size:2.25rem;line-height:1;color:var(--brand-ink)}
.fj-reason__title{margin-top:var(--sp-3);font-size:1.125rem}
@media (min-width:768px){ .fj-reason__title{min-height:calc(1.125rem * 1.45 * 2)} } /* 見出しを2行分にして本文の頭をそろえる */
.fj-reason__text{margin-top:var(--sp-2);font-size:.9375rem;color:var(--muted)}
.fj-section--dark .fj-reason{border-top-color:var(--on-dark-line)}
.fj-section--dark .fj-reason__num{color:var(--gold-label)}
.fj-section--dark .fj-reason__text{color:var(--on-dark-muted)}

/* --- feature blocks（特徴：写真＋番号＋本文、交互）--- */
.fj-features{display:grid;gap:72px}
.fj-feature{display:grid;gap:var(--sp-4);align-items:center}
@media (min-width:768px){ .fj-feature{gap:var(--sp-5)} }
@media (min-width:1024px){
  .fj-feature{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}
  .fj-feature--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)} /* 写真の列はいつも5の側 */
  .fj-feature--rev .fj-feature__media{order:2}
  /* 長い一覧の横に置く見本：上そろえにして、スクロールしても見えるように */
  .fj-feature--top{align-items:start}
  .fj-feature--top .fj-feature__media{position:sticky;top:calc(var(--header-h) + 24px)}
}
.fj-feature__media>img,.fj-feature__media>.fj-ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.fj-feature__num{display:flex;align-items:center;gap:10px;font-size:.875rem;letter-spacing:.14em;color:var(--brand-ink)}
.fj-feature__num::after{content:"";width:40px;height:2px;border-radius:1px;background:var(--brand-bright)}
.fj-feature__title{margin-top:var(--sp-3);font-size:var(--fs-h3)}
.fj-feature__text{margin-top:var(--sp-3);color:var(--ink-2)}
.fj-feature__text>p+p{margin-top:.8em}
.fj-feature__link{margin-top:var(--sp-3)}

/* --- steps / timeline（開業までの流れ・相談の流れ）--- */
.fj-steps{display:grid}
.fj-step{position:relative;display:grid;grid-template-columns:44px 1fr;column-gap:var(--sp-4);padding-bottom:var(--sp-6)}
.fj-step:last-child{padding-bottom:0}
.fj-step::before{content:"";position:absolute;left:21px;top:50px;bottom:6px;width:2px;background:var(--line-strong)}
.fj-step:last-child::before{content:none}
.fj-step__num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--secondary);color:#fff;font-size:1.125rem;line-height:1}
.fj-step__body{padding-top:7px}
.fj-step__when{display:block;margin-bottom:2px;font-size:var(--fs-sm);font-weight:700;color:var(--brand-ink)}
.fj-step__title{font-size:1.125rem}
.fj-step__text{margin-top:6px;font-size:.9375rem;color:var(--muted)}
@media (min-width:1024px){
  .fj-steps--row{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp-5)}
  .fj-steps--row .fj-step{grid-template-columns:1fr;row-gap:var(--sp-3);align-content:start;padding-bottom:0}
  .fj-steps--row .fj-step::before{left:56px;right:calc(var(--sp-5) * -1 + 8px);top:21px;bottom:auto;width:auto;height:2px}
  .fj-steps--row .fj-step__body{padding-top:0}
  .fj-steps--row .fj-step__title{min-height:calc(1.125rem * 1.45 * 2)} /* 見出しを2行分にして本文の頭をそろえる */
}

/* --- checklist（✓付きの箇条書き）--- */
.fj-check>li{position:relative;padding-left:34px}
.fj-check>li+li{margin-top:var(--sp-2)}
.fj-check>li::before{content:"";position:absolute;left:0;top:calc(var(--lh-body) * .5em - 12px);width:24px;height:24px;border-radius:50%;background:var(--brand-soft)}
.fj-check>li::after{content:"";position:absolute;left:9px;top:calc(var(--lh-body) * .5em - 7px);width:6px;height:11px;border:solid var(--brand-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fj-check--secondary>li::before{background:var(--secondary-soft)}
.fj-check--secondary>li::after{border-color:var(--secondary)}
.fj-check b{color:var(--ink)}

/* self check（申込み前のセルフチェック：番号付きの箱） */
.fj-selfcheck{display:grid;gap:var(--sp-3);counter-reset:sc}
.fj-selfcheck__item{counter-increment:sc;position:relative;padding:18px 20px 18px 66px;background:var(--surface);border:2px solid var(--line);border-radius:var(--r)}
.fj-selfcheck__item::before{
  content:counter(sc);position:absolute;left:18px;top:18px;display:grid;place-items:center;width:32px;height:32px;
  border-radius:var(--r-sm);background:var(--secondary);color:#fff;font-family:var(--font-num);font-weight:700;font-size:1.0625rem;line-height:1;
}
.fj-selfcheck__title{font-size:1.0625rem;font-weight:700;line-height:1.6}
.fj-selfcheck__text{margin-top:6px;font-size:.9375rem;color:var(--muted)}

/* --- FAQ（<details>/<summary>。JS不要）--- */
.fj-faq{border-top:1px solid var(--line)}
.fj-faq__item{border-bottom:1px solid var(--line)}
.fj-faq__q{
  position:relative;display:block;min-height:60px;padding:16px 40px 16px 46px;list-style:none;
  font-size:1.0625rem;font-weight:700;line-height:1.65;
}
.fj-faq__q::-webkit-details-marker{display:none}
.fj-faq__q::before{
  content:"Q";position:absolute;left:0;top:15px;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--secondary);color:#fff;font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1; /* Q・Aは数字用の書体ではなく本文の書体 */
}
.fj-faq__q::after{
  content:"";position:absolute;right:10px;top:24px;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur);
}
.fj-faq__item[open]>.fj-faq__q::after{transform:translateY(5px) rotate(-135deg)}
.fj-faq__q:hover{color:var(--brand-ink)}
.fj-faq__a{position:relative;padding:0 0 22px 46px;color:var(--ink-2)}
.fj-faq__a::before{
  content:"A";position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1;
}
.fj-faq__a>*+*{margin-top:.7em}
.fj-faq__a ul{padding-left:1.2em;list-style:disc}

/* --- team card（支援チーム）--- */
.fj-team{display:grid;gap:var(--sp-5)}
@media (min-width:768px){ .fj-team{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .fj-team{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fj-member{display:grid;grid-template-columns:88px 1fr;gap:var(--sp-4);align-items:start}
.fj-member__photo{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 15%;background:linear-gradient(106deg,#E9E9E7 18%,#FAFAF4 48%,#DCDCDA 85%)}
.fj-member__role{font-size:var(--fs-sm);font-weight:700;color:var(--brand-ink);line-height:1.5}
.fj-member__name{margin-top:2px;font-size:1.25rem}
.fj-member__name small{margin-left:8px;font-family:var(--font-num);font-size:.75rem;letter-spacing:.08em;color:var(--muted)}
.fj-member__text{margin-top:var(--sp-2);font-size:.9375rem;color:var(--ink-2)}
.fj-member__tags{margin-top:var(--sp-3)}
@media (min-width:768px){
  .fj-member{grid-template-columns:1fr;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
  .fj-member__photo{width:136px;height:136px}
}

/* --- access（地図の埋め込みはしない。Googleマップへのリンクだけ）--- */
.fj-access{display:grid;gap:var(--sp-6)}
@media (min-width:1024px){ .fj-access{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start} }
.fj-dl{border-top:1px solid var(--line)}
.fj-dl__row{display:grid;grid-template-columns:6.5em 1fr;gap:var(--sp-3);padding:14px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.fj-dl dt{font-weight:700;color:var(--ink-2)}
.fj-dl dd{margin:0}
@media (max-width:479.98px){ .fj-dl__row{grid-template-columns:5.5em 1fr;gap:12px} }
@media (max-width:339.98px){ .fj-dl__row{grid-template-columns:1fr;gap:2px} }
.fj-access__photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);background:var(--bg-alt)}
.fj-access__actions{margin-top:var(--sp-5)}

/* --- CTA band（電話｜LINE｜フォームの3経路）--- */
/* 色は東京美容室サイトのお問い合わせの帯と同じ：地は濃い茶色、フォームは金色のカード、LINEは白いカード、電話は薄いグレージュのカード */
.fj-cta{padding-block:var(--section-y);background:var(--cta-bg);color:var(--on-dark)}
.fj-cta__head{max-width:40em;margin:0 auto var(--sp-6);text-align:center}
.fj-cta__head .fj-eyebrow{justify-content:center;color:var(--gold-label)}
.fj-cta__head .fj-eyebrow::before{background:var(--gold-label)}
.fj-cta__title{margin-top:var(--sp-3);font-size:var(--fs-h2);color:#fff}
.fj-cta__lead{margin-top:var(--sp-3);color:var(--on-dark-muted)}
.fj-cta__grid{display:grid;gap:var(--sp-4)}
/* 並びはどのページも フォーム → LINE → 電話。タブレットで最後の1枚が余るときは横いっぱいに */
@media (min-width:768px){ .fj-cta__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:768px) and (max-width:1023.98px){ .fj-cta__card:last-child:nth-child(odd){grid-column:1/-1} }
@media (min-width:1024px){ .fj-cta__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fj-cta__card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:24px 20px;background:var(--surface);color:var(--ink);border-radius:12px;text-align:center;box-shadow:2px 2px 12px rgba(0,0,0,.1)}
.fj-cta__label{display:flex;align-items:center;gap:8px;font-weight:700}
.fj-cta__label .fj-icon{color:var(--ink)}
.fj-cta__tel{display:inline-flex;align-items:center;min-height:48px;font-size:var(--fs-num-lg);line-height:1.15;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.fj-cta__sub{font-size:var(--fs-note);line-height:1.6;color:var(--muted)}
.fj-cta__card .fj-btn{width:100%;margin-top:auto}
.fj-cta__card--form{background:var(--gold);color:#fff}
.fj-cta__card--form .fj-cta__label .fj-icon{color:#fff}
.fj-cta__card--form .fj-cta__sub{color:#fff}
.fj-cta__card--form :focus-visible{outline-color:#fff}
.fj-cta__card--line .fj-cta__label,.fj-cta__card--line .fj-cta__big{color:var(--line-green)}
.fj-cta__card--line .fj-cta__label .fj-icon{width:28px;height:28px}
.fj-cta__card--tel{background:var(--cta-tel-card)}
.fj-cta__note{margin-top:var(--sp-5);text-align:center;font-size:var(--fs-note);color:var(--on-dark-muted)}

/* --- callout（大事なお知らせ・おすすめのタイミング）--- */
.fj-callout{padding:20px 22px;background:var(--brand-soft);border-left:4px solid var(--brand-bright);border-radius:0 var(--r) var(--r) 0}
.fj-callout--info{background:var(--secondary-soft);border-left-color:var(--secondary)}
.fj-callout--notice{background:var(--notice-soft);border-left-color:var(--notice-line)}
.fj-callout__title{font-size:1.0625rem;font-weight:700;line-height:1.6;color:var(--ink)}
.fj-callout__text{margin-top:6px;font-size:.9375rem;color:var(--ink-2)}
.fj-callout__text+.fj-btns,.fj-callout__text+.fj-link{margin-top:var(--sp-3)}

/* --- topics（Pick up：時事の話題カード）--- */
.fj-topics{display:grid;gap:var(--sp-3)}
@media (min-width:1024px){ .fj-topics{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)} }
.fj-topic{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--dur)}
.fj-topic:hover{border-color:var(--brand)}
.fj-topic__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}
.fj-topic__title{font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;letter-spacing:.02em}
.fj-topic__link{color:var(--ink);text-decoration:none}
.fj-topic__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.fj-topic__link:focus-visible{outline:none}
.fj-topic__link:focus-visible::after{outline:3px solid var(--focus);outline-offset:3px}
.fj-topic:hover .fj-topic__link{text-decoration:underline}

/* --- photo placeholder（撮影前の仮枠。本番では使わない）--- */
.fj-ph{
  display:grid;place-items:center;width:100%;aspect-ratio:var(--ph-ratio,4/3);padding:16px;
  background:repeating-linear-gradient(-45deg,var(--bg-alt) 0 12px,#EDE6DD 12px 24px);
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  color:var(--muted);font-size:var(--fs-note);font-weight:700;line-height:1.6;text-align:center;
}

/* ==========================================================
   10. Footer
   ========================================================== */
.fj-footer{padding:56px 0 24px;background:var(--footer-bg);color:var(--on-dark-muted);font-size:var(--fs-sm)}
.fj-footer a{color:var(--on-dark-muted);text-decoration:none}
.fj-footer a:hover{color:#fff;text-decoration:underline}
.fj-footer__top{display:grid;gap:40px}
@media (min-width:1024px){ .fj-footer__top{grid-template-columns:minmax(0,1.25fr) minmax(0,2fr);gap:56px} }
.fj-footer__brand .fj-logo{margin-right:0}
.fj-footer__nap{margin-top:var(--sp-4);line-height:1.9}
.fj-footer__tel{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-4);line-height:1.7}
.fj-footer__tel>a:first-child{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:1.625rem;line-height:1.3}
.fj-footer__tel>a:first-child .fj-icon{width:22px;height:22px}
.fj-footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}
.fj-footer__col:last-child{grid-column:1/-1}
@media (min-width:768px){ .fj-footer__nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)} .fj-footer__col:last-child{grid-column:auto} }
.fj-footer__title{font-size:.8125rem;font-weight:700;letter-spacing:.08em;color:#fff}
.fj-footer__links{margin-top:var(--sp-2)}
.fj-footer__links a{display:inline-block;padding-block:10px;line-height:1.5}
.fj-footer__group{margin-top:var(--sp-4);font-size:var(--fs-note);line-height:1.7}
.fj-footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:.75rem;
}

/* ==========================================================
   11. Utilities
   ========================================================== */
.fj-center{text-align:center}
.fj-nowrap{white-space:nowrap}
.fj-mt-3{margin-top:var(--sp-3)!important}
.fj-mb-3{margin-bottom:var(--sp-3)!important}
.fj-mt-4{margin-top:var(--sp-4)!important}
.fj-mt-5{margin-top:var(--sp-5)!important}
.fj-mt-6{margin-top:var(--sp-6)!important}
.fj-mt-7{margin-top:var(--sp-7)!important}
@media (max-width:767.98px){ .fj-hide-sp{display:none!important} }
@media (min-width:768px){ .fj-only-sp{display:none!important} }
@media (min-width:1024px){ .fj-hide-pc{display:none!important} }

/* ==========================================================
   12. Motion / print
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fj-entry:hover{transform:none}
}
@media print{
  .fj-skip,.fj-header,.fj-gnav,.fj-mbar,.fj-cta{display:none!important}
  body{padding:0;font-size:10.5pt}
  .fj-section,.fj-hero,.fj-pagehead{padding-block:14pt;background:none}
  a{color:inherit}
}

/* ==========================================================
   13. Page extensions（トップ・料金・開業の3ページで追加した部品）
   ========================================================== */

/* hero: 見出しの改行位置（「開業・経営を」のあと）、安心の帯 */
.fj-ib{display:inline-block}
.fj-hero__cta .fj-btn--tel .fj-num{font-size:1.1875rem}
.fj-hero__notes{margin-top:var(--sp-3)}
.fj-hero__notes li{font-size:var(--fs-note);line-height:1.7;color:var(--muted)}
.fj-assure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:var(--sp-4)}
.fj-assure li{display:flex;align-items:center;gap:6px;padding:9px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.8125rem;font-weight:700;line-height:1.45;color:var(--ink-2)}
.fj-assure .fj-icon{width:18px;height:18px;color:var(--ok)}
@media (min-width:768px){ .fj-assure li{font-size:var(--fs-sm);padding:10px 12px;gap:8px} .fj-assure li span{white-space:nowrap} }
@media (min-width:1024px){
  .fj-assure{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-7)}
  .fj-assure li{justify-content:center;padding:12px 14px;font-size:.9375rem}
  .fj-assure .fj-icon{width:20px;height:20px}
}

/* entry cards：中の箇条書き */
.fj-entry .fj-check{font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
.fj-entry .fj-check>li::before{top:calc(1.7 * .5em - 12px)}
.fj-entry .fj-check>li::after{top:calc(1.7 * .5em - 7px)}

/* voices：3名（2026-09-25 解約された4店を外した）。開業ページは2名なので2列（横スクロール・カルーセルは使わない） */
.fj-head .fj-note{margin-top:var(--sp-3)}
.fj-voice__link{margin-top:var(--sp-1)}
@media (min-width:768px){ .fj-voices--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .fj-voices--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-inline:auto} } /* 写真（374px）を引き伸ばしすぎないように中央に */
.fj-voice__tags .fj-chip--sm{border-radius:var(--r-sm)} /* 2行になっても形がくずれないように */
.fj-op-55-30{object-position:55% 30%}
.fj-op-top{object-position:50% 20%}
.fj-op-0-40{object-position:0% 40%} /* 代表の窓辺の写真（4:3に切り抜くとき、人物が中央に来て、左の植物も切れずに入る） */

/* plans：年額の目安の行 */
.fj-plan__year{margin-top:2px;font-size:var(--fs-sm);color:var(--ink-2)}
.fj-plan__year .fj-num{font-size:1rem}

/* 月次レポートの見本（数字は架空。画像にせずHTML/SVGで） */
.fj-report{padding:18px 18px 14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.fj-report__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.fj-report__title{font-weight:700;font-size:.9375rem}
.fj-report__kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.fj-report__kpi div{padding:8px 10px;background:var(--bg-alt);border-radius:var(--r-sm)}
.fj-report__kpi dt{font-size:.75rem;font-weight:700;color:var(--muted);line-height:1.4}
.fj-report__kpi dd{margin:2px 0 0;font-size:.8125rem;font-weight:700;line-height:1.3}
.fj-report__kpi dd .fj-num{font-size:1.25rem}
.fj-report__chart{margin-top:12px}
.fj-report__chart svg{width:100%;height:auto}
.fj-report__chart text{font-family:var(--font-body);font-size:10px;fill:var(--muted)}
.fj-report__bar{fill:var(--secondary)}
.fj-report__bar--now{fill:var(--brand-ink)} /* 白地で3:1以上 */
.fj-report__grid{stroke:var(--line);stroke-width:1}
.fj-report__cap{margin-top:8px;font-size:var(--fs-note);color:var(--muted);line-height:1.6}

/* team：代表のひとこと */
.fj-member__quote{margin-top:var(--sp-3);padding-left:12px;border-left:3px solid var(--brand-bright);font-size:.9375rem;color:var(--ink-2)}
@media (min-width:1024px){ .fj-team--2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} }

/* generic card（制度の比較など） */
.fj-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:22px 22px 20px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--secondary);border-radius:var(--r-lg)}
.fj-card__tag{font-size:.8125rem;font-weight:700;color:var(--secondary)}
.fj-card__title{font-size:1.125rem;line-height:1.5}
.fj-spec{border-top:1px dashed var(--line-strong)}
.fj-spec>div{padding:9px 0;border-bottom:1px dashed var(--line-strong)}
.fj-spec dt{font-size:.8125rem;font-weight:700;color:var(--muted);line-height:1.5}
.fj-spec dd{margin:2px 0 0;font-size:.9375rem;line-height:1.65}
.fj-spec .fj-num{font-size:1.25rem}
.fj-card__point{font-size:.875rem;color:var(--ink-2);line-height:1.7}

/* 大きな数字（必要資金の目安） */
.fj-bignum{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;padding:14px 20px;background:var(--surface);border:2px solid var(--brand);border-radius:var(--r-lg)}
.fj-bignum .fj-num{font-size:var(--fs-num-xl);line-height:1.05;color:var(--ink)}
.fj-bignum__unit{font-size:1.125rem;font-weight:700}

/* アイコン付きの一覧（金額は書かない内訳など） */
.fj-iconlist{display:grid;gap:var(--sp-2)}
@media (min-width:768px){ .fj-iconlist>li:last-child:nth-child(odd){grid-column:1/-1} } /* 数が奇数のとき、最後の1つを横いっぱいに */
@media (min-width:768px){ .fj-iconlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} }
.fj-iconlist li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.9375rem;line-height:1.65}
.fj-iconlist .fj-icon{width:22px;height:22px;margin-top:1px;color:var(--secondary)}
.fj-iconlist b{display:block}

/* checklist 2 columns / boxed */
@media (min-width:768px){ .fj-check--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4)} .fj-check--2col>li+li{margin-top:0} }
.fj-check--box>li{padding:12px 14px 12px 46px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.fj-check--box>li::before{left:12px;top:calc(12px + var(--lh-body) * .5em - 12px)}
.fj-check--box>li::after{left:21px;top:calc(12px + var(--lh-body) * .5em - 7px)}

/* timeline：私たちがお手伝いすること */
.fj-step__help{margin-top:10px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.875rem;line-height:1.7;color:var(--ink-2)}
.fj-step__help b{display:block;font-size:.75rem;color:var(--secondary);letter-spacing:.04em}

/* 開閉ボックス（どの区分か分からない方へ） */
.fj-details{margin-top:var(--sp-5);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
.fj-details>summary{position:relative;display:block;min-height:56px;padding:16px 48px 16px 20px;list-style:none;font-weight:700;line-height:1.6}
.fj-details>summary::-webkit-details-marker{display:none}
.fj-details>summary::after{content:"";position:absolute;right:20px;top:22px;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur)}
.fj-details[open]>summary::after{transform:translateY(5px) rotate(-135deg)}
.fj-details__body{padding:0 20px 20px}
.fj-details__body dl>div+div{margin-top:var(--sp-4)}
.fj-details__body dt{font-weight:700}
.fj-details__body dd{margin:4px 0 0;font-size:.9375rem;color:var(--ink-2)}
.fj-details__body>p{margin-top:var(--sp-4);font-weight:700}

/* 3つだけの番号付きの理由（白地） */
@media (min-width:1024px){ .fj-reasons.fj-reasons--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fj-reasons--3 .fj-reason{border-top:3px solid var(--brand-bright)}

/* page head with a photo（開業ページ） */
.fj-pagehead__grid{display:grid;gap:var(--sp-5)}
.fj-pagehead__photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);background:var(--line)}
@media (min-width:1024px){
  .fj-pagehead__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:48px;align-items:start}
  .fj-pagehead__photo{aspect-ratio:4/5;margin-top:56px}
}
.fj-pagehead__notes{margin-top:var(--sp-3)}
.fj-pagehead__notes li{font-size:var(--fs-note);line-height:1.7;color:var(--muted)}

/* 表の下の計算例など */
.fj-example{margin-top:var(--sp-5)}

/* CTA band：大きめの文字 */
.fj-cta__big{font-size:1.25rem;font-weight:700;line-height:1.4}
/* 金色のカードの白い文字は、東京サイトと同じく太く・大きく（小さい文字だと読みにくいため） */
.fj-cta__card--form .fj-cta__sub{font-size:.9375rem;font-weight:700}
.fj-cta__card--form .fj-cta__label{font-size:1.0625rem}

/* footer extras */
.fj-footer__sub{margin-top:var(--sp-4);font-size:var(--fs-note);line-height:1.8}
.fj-footer__sub a{text-decoration:underline}
.fj-footer__disclaimer{margin-top:40px;font-size:.75rem;line-height:1.7}
.fj-footer__disclaimer+.fj-footer__bottom{margin-top:16px}
@media (min-width:768px){ .fj-iconlist--1col{grid-template-columns:1fr} }
.fj-member{align-content:start}
/* team（スマホ）：写真は72px、紹介文は横幅いっぱいに */
@media (max-width:767.98px){
  .fj-member{grid-template-columns:72px 1fr;gap:0 var(--sp-4);align-items:center}
  .fj-member>div{display:contents}
  .fj-member__photo{width:72px;height:72px;grid-row:1 / span 2}
  .fj-member__role{grid-column:2;align-self:end}
  .fj-member__name{grid-column:2;align-self:start}
  .fj-member__text,.fj-member__quote{grid-column:1/-1}
  .fj-member__text{margin-top:var(--sp-3)}
}

/* 見出しは全幅のコンテナで左そろえ、中身だけ狭くする（流れ・セルフチェック・FAQ） */
.fj-narrow{max-width:var(--wrap-narrow)}
.fj-faq-more{margin-top:var(--sp-6)}

/* ページ途中の小さな相談ボタン（長い区間のあと） */
.fj-inline-cta{display:grid;gap:var(--sp-3);margin-top:var(--sp-7);padding:20px 22px;background:var(--surface);border:1px solid var(--line-strong);border-left:4px solid var(--brand);border-radius:0 var(--r-lg) var(--r-lg) 0}
.fj-inline-cta__text{font-size:1.0625rem;font-weight:700;line-height:1.6;color:var(--ink)}
.fj-inline-cta__sub{font-size:var(--fs-note);color:var(--muted);line-height:1.6}
.fj-inline-cta .fj-btns{margin-top:var(--sp-1)}
@media (max-width:767.98px){
  .fj-inline-cta .fj-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .fj-inline-cta{padding:16px 16px 18px}
  .fj-inline-cta .fj-btn{padding-inline:.5em}
  .fj-inline-cta .fj-btn:not(.fj-btn--line) .fj-icon{display:none} /* 半分の幅に「フォームで相談」を1行で収める（LINEのアイコンは残す） */
}
@media (min-width:1024px){
  .fj-inline-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-6);padding:22px 28px}
  .fj-inline-cta .fj-btns{margin-top:0;grid-column:2;grid-row:1 / span 2}
}

/* 税務調査の準備チェック（写真の代わりの見本。HTMLで作る） */
.fj-prep{padding:20px 20px 16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.fj-prep__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.fj-prep__title{font-weight:700;font-size:.9375rem}
.fj-prep__list{margin-top:12px;display:grid;gap:8px}
.fj-prep__list li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:10px 12px;background:var(--bg-alt);border-radius:var(--r-sm);font-size:.9375rem;line-height:1.55}
.fj-prep__list li b{display:block}
.fj-prep__list li small{display:block;color:var(--muted);font-size:.8125rem}
.fj-prep__box{width:22px;height:22px;margin-top:1px;border:2px solid var(--secondary);border-radius:4px;background:var(--surface)}
.fj-prep__cap{margin-top:8px;font-size:var(--fs-note);color:var(--muted);line-height:1.6}

/* スタッフのことの分担（税理士法人／社労士事務所。写真の代わりにHTMLで） */
.fj-split{padding:20px 20px 16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.fj-split__title{padding-bottom:10px;border-bottom:2px solid var(--ink);font-weight:700;font-size:.9375rem;line-height:1.6}
.fj-split__cols{display:grid;gap:10px;margin-top:12px}
@media (min-width:480px){ .fj-split__cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fj-split__col{padding:14px 14px 12px;background:var(--brand-soft);border-top:4px solid var(--brand-bright);border-radius:var(--r-sm)}
.fj-split__col--sr{background:var(--secondary-soft);border-top-color:var(--secondary)}
.fj-split__name{font-weight:700;font-size:.9375rem;line-height:1.5}
.fj-split__name small{display:block;font-size:.75rem;font-weight:500;color:var(--muted)}
.fj-split__list{margin-top:8px}
.fj-split__list li{position:relative;padding-left:14px;font-size:.875rem;line-height:1.6;color:var(--ink-2)}
.fj-split__list li+li{margin-top:6px}
.fj-split__list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand-bright)}
.fj-split__col--sr .fj-split__list li::before{background:var(--secondary)}
.fj-split__cap{margin-top:10px;font-size:var(--fs-note);color:var(--muted);line-height:1.6}

/* 開業ページの見出し部：スマホは 見出し → リード → ボタン → タイル の順 */
.fj-pagehead__body{display:flex;flex-direction:column}
@media (max-width:1023.98px){
  .fj-pagehead__body>.fj-pagehead__cta{order:1}
  .fj-pagehead__body>.fj-pagehead__tel{order:2}
  .fj-pagehead__body>.fj-pagehead__facts{order:3}
  .fj-pagehead__body>.fj-pagehead__notes{order:4}
}
@media (max-width:767.98px){
  .fj-pagehead__body>.fj-pagehead__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .fj-pagehead__body>.fj-pagehead__cta>.fj-btn{width:auto;min-height:60px;padding:.55em .5em;font-size:1rem;gap:.35em}
}
.fj-pagehead__tel{display:none}
@media (min-width:1024px){
  .fj-pagehead__tel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:var(--sp-3);font-size:.9375rem;color:var(--ink-2)}
  .fj-pagehead__tel .fj-icon{width:18px;height:18px;color:var(--secondary)}
  .fj-pagehead__tel a{color:var(--ink);font-size:1.25rem;text-decoration:none}
  .fj-pagehead__tel a:hover{color:var(--secondary);text-decoration:underline}
  .fj-facts--2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}
.fj-fact__cond b{color:var(--ink-2)}
/* 2列の表（条件｜金額）はスマホでは左寄せにして読みやすく */
@media (max-width:767.98px){ .fj-price:not(.fj-price--stack) td.is-num{text-align:left} .fj-price:not(.fj-price--stack) tbody th[scope="row"]{width:46%} }

/* ==========================================================
   FUJITA税理士法人｜札幌 飲食店サイト — WordPress だけで使うスタイル（wp.css）
   design.css（デザイン確認用の style.css そのまま）のあとに連結して site.css にします。
   ・色・文字・余白は design.css の :root の変数だけを使います
   ・W1 管理バー / W2 本文（旧テーマ TCD の記事・固定ページ）/ W3 お問い合わせフォーム（MW WP Form）
     W4 ブログ一覧 / W5 記事ページ / W6 ページ送り / W7 カテゴリー / W8 404・検索 / W9 記事下の相談ボックス
   ========================================================== */

/* ==========================================================
   W0. WordPress core helpers
   ========================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;clip:auto;white-space:normal}

/* ==========================================================
   W1. Admin bar（ログイン中だけ）：追従するヘッダーとメニューを管理バーの下に
   ========================================================== */
@media (min-width:783px){
  .admin-bar .fj-header{top:32px}
  .admin-bar .fj-gnav.is-open{top:calc(var(--header-h) + 32px)}
  html:has(body.admin-bar){scroll-padding-top:calc(var(--header-h) + 48px)}
}
@media (max-width:782.98px){
  .admin-bar .fj-header{top:46px}
  .admin-bar .fj-gnav.is-open{top:calc(var(--header-h) + 46px)}
  html:has(body.admin-bar){scroll-padding-top:calc(var(--header-h) + 62px)}
}
/* 600px以下では管理バーが一緒にスクロールして消えるので、ヘッダーは上端に付ける */
@media (max-width:600px){
  .admin-bar .fj-header{top:0}
  .admin-bar .fj-gnav.is-open{top:var(--header-h)}
}

/* ==========================================================
   W2. 本文（.fj-prose）：旧テーマ（TCD）のクラスが入った記事・固定ページ
   h3.style3a/3b, h4.style4a/4b, h5.style5a/5b, p.well/well2/well3, .post_row/.post_col-2/-3,
   center, font, 表（スマホは横スクロール）, iframe, 画像の寄せ, wp-caption。
   クラスの無い h3/h4/h5 も、style3a/4a/5a と同じ見た目にします（今後の記事用）
   ========================================================== */
.fj-prose{line-height:1.95}
.fj-prose::after{content:"";display:table;clear:both} /* 回り込み（alignleft など）を閉じる */
.fj-prose>:first-child{margin-top:0}
.fj-prose>*+*{margin-top:1.25em}
.fj-prose a{overflow-wrap:anywhere} /* 長いURLでも横にはみ出さない */
.fj-prose strong,.fj-prose b{color:var(--ink)}
/* 古い記事の赤い強調（<font color="red">・style="color: red"）は、読みやすい濃い赤（--danger）に */
.fj-prose :is(font[color="red" i],font[color="#ff0000" i],font[color="#f00" i],[style*="color: red" i],[style*="color:red" i],[style*="color: #ff0000" i],[style*="color:#ff0000" i]){color:var(--danger)!important}
.fj-prose u{text-decoration-thickness:1px;text-underline-offset:.22em}
.fj-prose :is(sup,sub){font-size:.75em;line-height:0}

/* headings */
.fj-prose :is(h2,h3,h4,h5,h6){
  margin:0;font-family:var(--font-head);font-weight:700;line-height:var(--lh-head);
  letter-spacing:.03em;color:var(--ink);text-wrap:pretty;
}
.fj-prose :is(h2,h3):not(:first-child){margin-top:2.2em}
.fj-prose :is(h4,h5,h6):not(:first-child){margin-top:1.9em}
.fj-prose :is(h2,h3,h4,h5,h6)+*{margin-top:.9em}
.fj-prose h2{font-size:clamp(1.3125rem,1.15rem + .8vw,1.75rem);padding-bottom:.45em;border-bottom:2px solid var(--ink)}
/* h3 = style3a（上下に線）／style3b（上に太い線＋淡い地） */
.fj-prose h3{font-size:var(--fs-h3);padding:.6em 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.fj-prose h3.style3b{padding:.6em .85em;border-top:3px solid var(--brand-bright);border-bottom:0;background:var(--bg-alt)}
/* h4 = style4a（左に線）／style4b（点線の下線） */
.fj-prose h4{font-size:1.1875rem;padding:.1em 0 .1em .8em;border-left:4px solid var(--brand-bright)}
.fj-prose h4.style4b{padding:0 0 .45em;border-left:0;border-bottom:2px dotted var(--line-strong)}
/* h5 = style5a（淡い箱）／style5b（濃い箱に白い文字。記事の中の style="background:#000" もそのまま効く） */
.fj-prose h5{font-size:1.0625rem;padding:.65em .95em;background:var(--bg-alt);border-radius:var(--r-sm)}
.fj-prose h5.style5b{background:var(--ink);color:#fff}
/* 古い記事の style="background:#000000" は、ほかの style5b と同じ濃い色にそろえる（インラインの指定より優先） */
.fj-prose h5.style5b:is([style*="#000000" i],[style*="#000;" i],[style*="#000 " i],[style*="black" i]){background:var(--ink)!important}
.fj-prose h5.style5b :is(a,span,strong,b,font){color:inherit}
.fj-prose h5.style5b :is(font[color],[style*="color"]){color:inherit!important} /* 濃い箱の中では赤くしない */
.fj-prose h6{font-size:1rem}

/* boxes：well＝淡い地の箱／well2＝白地・実線・影／well3＝白地・点線 */
.fj-prose :is(.well,.well2,.well3){padding:18px 20px;border-radius:var(--r)}
.fj-prose .well{background:var(--bg-alt);border:1px solid var(--line)}
.fj-prose .well2{background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--sh-1)}
.fj-prose .well3{background:var(--surface);border:2px dashed var(--line-strong)}
.fj-prose :is(.well,.well2,.well3) img{margin-top:.5em}

/* columns：TCD の float をやめて flex に（スマホは1列、768px以上で2列・3列） */
.fj-prose .post_row{display:flex;flex-wrap:wrap;gap:var(--sp-5)}
.fj-prose .post_col{flex:1 1 100%;min-width:0}
.fj-prose .post_col>*+*{margin-top:1em}
.fj-prose .post_col>:first-child{margin-top:0}
@media (min-width:768px){
  .fj-prose .post_col-2{flex:0 0 calc((100% - var(--sp-5)) / 2)}
  .fj-prose .post_col-3{flex:0 0 calc((100% - var(--sp-5) * 2) / 3)}
}
/* 事務所案内の古い挨拶（写真＋文）。ページを作り直すまでの予備 */
@media (min-width:768px){
  .fj-prose .left_box{float:left;width:36%;margin:0 var(--sp-5) var(--sp-4) 0}
  .fj-prose .right_box{overflow:hidden}
}
.fj-prose dt{font-weight:700}
.fj-prose dd{margin:0 0 .8em}

/* lists（fj- の部品は除く） */
.fj-prose :is(ul,ol):not([class*="fj-"]){padding-left:1.5em}
.fj-prose ul:not([class*="fj-"]){list-style:disc}
.fj-prose ol:not([class*="fj-"]){list-style:decimal}
.fj-prose li>:is(ul,ol){margin-top:.3em}
.fj-prose li::marker{color:var(--muted)}

.fj-prose blockquote{padding:14px 18px;background:var(--bg-alt);border-left:4px solid var(--line-strong);border-radius:0 var(--r) var(--r) 0;color:var(--ink-2)}
.fj-prose blockquote>*+*{margin-top:.8em}
.fj-prose cite{font-size:var(--fs-note);font-style:normal;color:var(--muted)}
.fj-prose hr{height:0;margin-block:2.2em;border:0;border-top:1px solid var(--line-strong)}
.fj-prose :is(code,kbd){padding:.1em .35em;background:var(--bg-alt);border-radius:var(--r-sm);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
.fj-prose pre{overflow-x:auto;padding:14px 16px;background:var(--bg-alt);border-radius:var(--r);font-size:.875rem;line-height:1.7}
.fj-prose pre code{padding:0;background:none}

/* images（本文の画像は原寸のファイルが多い。幅はいつも枠に合わせる） */
.fj-prose img{max-width:100%;height:auto}
.fj-prose img.emoji{display:inline;width:1em;height:1em;margin:0 .07em;vertical-align:-.1em}
.fj-prose .aligncenter{display:block;margin-inline:auto}
.fj-prose .alignnone{margin-inline:0}
.fj-prose :is(.alignleft,.alignright){display:block;margin-inline:auto}
@media (min-width:600px){
  .fj-prose .alignleft{float:left;max-width:50%;margin:.35em 1.5em 1em 0}
  .fj-prose .alignright{float:right;max-width:50%;margin:.35em 0 1em 1.5em}
}
/* <center> や style="text-align:center" の中の画像（画像は design.css で display:block のため） */
.fj-prose :is(center,[style*="text-align:center"],[style*="text-align: center"]) img{margin-inline:auto}
.fj-prose :is([style*="text-align:right"],[style*="text-align: right"]) img{margin-left:auto;margin-right:0}
.fj-prose :is(.wp-caption,figure){max-width:100%}
.fj-prose .wp-caption img{margin-inline:auto}
.fj-prose :is(.wp-caption-text,.gallery-caption,figcaption){margin-top:6px;font-size:var(--fs-note);line-height:1.6;color:var(--muted);text-align:center}
.fj-prose .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (min-width:768px){
  .fj-prose .gallery-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fj-prose .gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.fj-prose .gallery-item{margin:0}
.fj-prose .gallery>br{display:none}

/* tables（fj- の表は除く）。スマホでは横にスクロール */
.fj-prose table:not([class*="fj-"]){width:100%;background:var(--surface);font-size:.9375rem;line-height:1.7}
.fj-prose table:not([class*="fj-"]) :is(th,td){padding:10px 12px;border:1px solid var(--line-strong);text-align:left;vertical-align:top}
.fj-prose table:not([class*="fj-"]) th{background:var(--bg-alt);font-weight:700}
.fj-prose table:not([class*="fj-"]) caption{caption-side:top;padding-bottom:8px;text-align:left;font-weight:700}
@media (max-width:767.98px){
  .fj-prose table:not([class*="fj-"]){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .fj-prose table:not([class*="fj-"]) :is(th,td){min-width:7em}
}

/* iframes（地図・動画は幅いっぱいで縦横比を保つ） */
.fj-prose iframe{display:block;max-width:100%;border:0}
.fj-prose iframe:is([src*="google.com/maps"],[src*="youtube.com"],[src*="youtube-nocookie.com"],[src*="youtu.be"],[src*="vimeo.com"]){width:100%;height:auto}
.fj-prose iframe[src*="google.com/maps"]{aspect-ratio:4/3}
.fj-prose iframe:is([src*="youtube.com"],[src*="youtube-nocookie.com"],[src*="youtu.be"],[src*="vimeo.com"]){aspect-ratio:16/9}
.fj-prose video{max-width:100%;height:auto}

/* ==========================================================
   W3. お問い合わせフォーム（MW WP Form 1157）
   入力 .mw_wp_form_input → 確認 .mw_wp_form_confirm → 完了 .mw_wp_form_complete。
   欄は横幅いっぱい・高さ48px以上・16px（iPhoneで拡大されない）。送信＝オレンジのボタン、戻る＝枠線のボタン
   ========================================================== */
.mw_wp_form{max-width:var(--wrap-narrow)}
.mw_wp_form form>p{margin:0;line-height:1.7}
.mw_wp_form form>p+p{margin-top:var(--sp-5)}
.mw_wp_form label{display:block;font-weight:700;color:var(--ink)}
.mw_wp_form form :where(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],select,textarea){ /* :where = low specificity, so the textarea rule below can change the height */
  display:block;width:100%;min-height:48px;margin-top:6px;padding:10px 14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r);
  font-family:var(--font-body);font-size:1rem;font-weight:400;line-height:1.6;letter-spacing:.02em;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.mw_wp_form form textarea{min-height:12em;resize:vertical}
.mw_wp_form select{cursor:pointer}
.mw_wp_form :is(input,select,textarea):hover{border-color:var(--ink-2)}
.mw_wp_form :is(input,select,textarea):focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.mw_wp_form ::placeholder{color:var(--muted);opacity:1}
/* checkbox / radio（プライバシーポリシーへの同意） */
.mw_wp_form :is(.mwform-checkbox-field,.mwform-radio-field){display:inline-block;margin:8px 12px 0 0}
.mw_wp_form :is(.mwform-checkbox-field,.mwform-radio-field) label{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;
}
.mw_wp_form :is(.mwform-checkbox-field,.mwform-radio-field) label:hover{border-color:var(--brand)}
.mw_wp_form :is(input[type="checkbox"],input[type="radio"]){flex:none;width:22px;height:22px;margin:0;accent-color:var(--brand)}
.mw_wp_form :is(.mwform-checkbox-field-text,.mwform-radio-field-text){font-weight:700}
/* buttons */
.mw_wp_form :is(input[type="submit"],input[type="button"],button){
  display:inline-flex;align-items:center;justify-content:center;min-width:min(100%,300px);min-height:56px;margin:4px 8px 4px 0;padding:.8em 2.4em;
  background:var(--brand-grad);color:#fff;border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:1.0625rem;font-weight:700;line-height:1.35;letter-spacing:.08em;
  cursor:pointer;-webkit-appearance:none;appearance:none;transition:opacity var(--dur),background-color var(--dur);
}
.mw_wp_form :is(input[type="submit"],input[type="button"],button):hover{opacity:.9}
.mw_wp_form :is(input[type="submit"],input[type="button"],button):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.mw_wp_form input[name="submitBack"]{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.mw_wp_form input[name="submitBack"]:hover{opacity:1;border-color:var(--ink)}
.mw_wp_form form>p:has(>input[type="submit"]){margin-top:var(--sp-6)}
@media (max-width:767.98px){
  .mw_wp_form :is(input[type="submit"],input[type="button"],button){width:100%;margin-right:0}
}
/* errors */
.mw_wp_form .error{display:block;margin-top:6px;color:var(--danger);font-size:var(--fs-sm);font-weight:700;line-height:1.6}
/* confirm：入力した内容を1行ずつ区切って見せる */
.mw_wp_form_confirm form>p:not(:has(>input[type="submit"])){padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.mw_wp_form_confirm label{font-weight:400}
/* complete：お礼の文（h3.style3a などの古いクラスを含む） */
.mw_wp_form_complete{line-height:1.95}
.mw_wp_form_complete>*+*{margin-top:1.25em}
.mw_wp_form_complete h3{margin:0;font-size:var(--fs-h3);line-height:var(--lh-head);padding:.6em 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}

/* ==========================================================
   W4. ブログ一覧（.fj-postcards > .fj-postcard）：スマホは横長の行、768px以上はカード
   ========================================================== */
.fj-postcards{display:grid;gap:var(--sp-3);margin:0;padding:0;list-style:none}
@media (min-width:768px){ .fj-postcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)} }
@media (min-width:1024px){ .fj-postcards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.fj-postcard{
  position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--sp-3);align-items:start;
  padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--dur),box-shadow var(--dur);
}
.fj-postcard:hover{border-color:var(--brand)}
.fj-postcard__media{overflow:hidden;border-radius:var(--r-sm);background:var(--bg-alt)}
.fj-postcard__img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fj-postcard__noimg{display:grid;place-items:center;aspect-ratio:4/3;color:var(--faint)}
.fj-postcard__noimg .fj-icon{width:32px;height:32px}
.fj-postcard__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.fj-postcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.fj-postcard__meta time{font-family:var(--font-num);font-weight:700;letter-spacing:.02em}
.fj-postcard__cat{display:inline-block;padding:1px 8px;background:var(--bg-alt);border-radius:var(--r-sm);font-size:.75rem;font-weight:700;color:var(--ink-2)}
.fj-postcard__title{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.6;letter-spacing:.02em;word-break:auto-phrase;text-wrap:pretty}
.fj-postcard__link{color:var(--ink);text-decoration:none}
.fj-postcard__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.fj-postcard__link:focus-visible{outline:none}
.fj-postcard__link:focus-visible::after{outline:3px solid var(--focus);outline-offset:3px}
.fj-postcard:hover .fj-postcard__link{text-decoration:underline}
.fj-postcard__excerpt{display:none;font-size:var(--fs-sm);line-height:1.7;color:var(--muted)}
@media (min-width:768px){
  .fj-postcard{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;padding:0;border-radius:var(--r-lg);overflow:hidden}
  .fj-postcard:hover{box-shadow:var(--sh-2)}
  .fj-postcard__media{border-radius:0}
  .fj-postcard__img,.fj-postcard__noimg{aspect-ratio:3/2}
  .fj-postcard__noimg .fj-icon{width:44px;height:44px}
  .fj-postcard__body{gap:var(--sp-2);padding:18px 20px 20px}
  .fj-postcard__title{font-size:1.0625rem}
  .fj-postcard__excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
.fj-postcards+.fj-pager{margin-top:var(--sp-7)}

/* ==========================================================
   W5. 記事ページ（single）：見出し部・日付とカテゴリー・アイキャッチ・監修・前後の記事
   ========================================================== */
/* 記事のタイトルは長いので、見出し部の h1 を小さめ・本文の書体に */
.fj-pagehead--post .fj-pagehead__title{font-family:var(--font-body);font-weight:700;font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem);line-height:1.5;letter-spacing:.03em}
.fj-pagehead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
.fj-pagehead__meta time{font-family:var(--font-num);font-weight:700;letter-spacing:.02em}
.fj-pagehead__meta a{color:var(--ink-2)}
.fj-post__cat{display:inline-flex;align-items:center;padding:2px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:.75rem;font-weight:700;color:var(--ink-2);text-decoration:none}
a.fj-post__cat:hover{border-color:var(--brand);color:var(--brand-ink)}
.fj-post__thumb{margin-bottom:var(--sp-6)}
.fj-post__thumb img{width:100%;height:auto;border-radius:var(--r-lg);background:var(--bg-alt)}
.fj-post__foot{margin-top:var(--sp-7)}

/* お客様の声（1件のページ）の見出し部：ひとことの下に業態と掲載年月 */
.fj-pagehead--voice .fj-pagehead__lead .fj-voice__quote{font-size:inherit}
.fj-pagehead--voice .fj-voice__tags{margin-top:var(--sp-4)}
.fj-pagehead--voice .fj-pagehead__lead+.fj-voice__date{margin-top:var(--sp-4)} /* 業態のチップがないとき */
/* 業態チップ（トップ・/voice/ のカード、声のページの見出し部）は、ふつうの文章として折り返す。
   .fj-chip の inline-flex のままだと、地の文と .fj-nowrap がそれぞれ別の列になり、8pxのすき間が空く。
   2行になったときは角丸の四角（design.css の .fj-voice__tags .fj-chip--sm） */
.fj-chip--sm{display:inline-block;max-width:100%}

/* お知らせの一覧（狭い幅）は、PCでも1列の一覧に */
@media (min-width:1024px){ .fj-wrap--narrow>.fj-topics{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)} }

/* 監修（代表税理士） */
.fj-supervisor{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-2) var(--sp-4);align-items:center;margin-top:var(--sp-7);padding:18px 20px;background:var(--bg-alt);border-radius:var(--r-lg)}
.fj-supervisor__photo{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 15%;background:var(--surface)}
.fj-supervisor__label{display:block;font-size:var(--fs-note);font-weight:700;line-height:1.5;color:var(--brand-ink)}
.fj-supervisor__name{display:block;font-size:1.0625rem;font-weight:700;line-height:1.5;color:var(--ink)}
.fj-supervisor__name a{color:inherit}
.fj-supervisor__name small{display:inline-block;margin-left:6px;font-weight:400;color:var(--muted)}
.fj-supervisor--nophoto{grid-template-columns:minmax(0,1fr)}
.fj-supervisor__text{grid-column:1/-1;font-size:var(--fs-sm);line-height:1.8;color:var(--ink-2)}

/* 前の記事・次の記事 */
.fj-postnav{display:grid;gap:var(--sp-3);margin-top:var(--sp-7)}
@media (min-width:768px){ .fj-postnav{grid-template-columns:repeat(2,minmax(0,1fr))} .fj-postnav__next{grid-column:2} }
.fj-postnav a{display:flex;flex-direction:column;gap:2px;height:100%;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:border-color var(--dur)}
.fj-postnav a:hover{border-color:var(--brand)}
.fj-postnav__label{font-size:var(--fs-note);font-weight:700;color:var(--muted)}
.fj-postnav__title{font-weight:700;line-height:1.6}
.fj-postnav a:hover .fj-postnav__title{text-decoration:underline}
.fj-postnav__next a{text-align:right;align-items:flex-end}

/* 写真のない見出し部（/change/）の相談ボタンも、スマホでは開業ページと同じ2列に（design.css は .fj-pagehead__body の中だけ） */
@media (max-width:767.98px){
  .fj-pagehead .fj-wrap>.fj-pagehead__cta:has(>.fj-btn+.fj-btn){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .fj-pagehead .fj-wrap>.fj-pagehead__cta:has(>.fj-btn+.fj-btn)>.fj-btn{width:auto;min-height:60px;padding:.55em .5em;font-size:1rem;gap:.35em}
}
@media (max-width:374.98px){
  .fj-pagehead .fj-wrap>.fj-pagehead__cta>.fj-btn:not(.fj-btn--line) .fj-icon{display:none}
}

/* ==========================================================
   W6. ページ送り（.fj-pager、paginate_links の出力）
   ========================================================== */
.fj-pager{margin-top:var(--sp-7)}
.fj-pager__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.fj-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-family:var(--font-num);font-weight:700;line-height:1;text-decoration:none;transition:border-color var(--dur),color var(--dur);
}
.fj-pager a.page-numbers:hover{border-color:var(--brand);color:var(--brand-ink)}
.fj-pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.fj-pager .page-numbers.dots{min-width:24px;padding:0;background:none;border-color:transparent;color:var(--muted)}
.fj-pager :is(.prev,.next).page-numbers{padding:0 18px;font-family:var(--font-body);font-size:.9375rem}
/* 1つの記事を複数ページに分けたとき（wp_link_pages） */
.fj-pager>p{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-weight:700}
.fj-pager .post-page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-pill);font-family:var(--font-num);font-weight:700;text-decoration:none}
.fj-pager a.post-page-numbers:hover{border-color:var(--brand);color:var(--brand-ink)}
.fj-pager .post-page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ==========================================================
   W7. カテゴリーの切り替え（ブログ一覧の上）
   ========================================================== */
.fj-catnav,.fj-catnav>ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fj-catnav{margin-bottom:var(--sp-6)}
.fj-catnav>ul{flex:1 1 100%}
.fj-catnav a{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  color:var(--ink);font-size:var(--fs-sm);font-weight:700;text-decoration:none;white-space:nowrap;
}
.fj-catnav a:hover{border-color:var(--brand);color:var(--brand-ink)}
.fj-catnav a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.fj-catnav__count{font-family:var(--font-num);font-size:.75rem;font-weight:700;color:var(--muted)}
.fj-catnav a[aria-current] .fj-catnav__count{color:var(--on-dark-muted)}

/* ==========================================================
   W8. 404・検索・結果なし
   ========================================================== */
.fj-search{display:flex;gap:8px;width:100%;max-width:560px}
.fj-search__input{
  flex:1;min-width:0;min-height:48px;padding:0 18px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:1rem;line-height:1.4;-webkit-appearance:none;appearance:none;
}
.fj-search__input::placeholder{color:var(--muted);opacity:1}
.fj-search__input:focus{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.fj-search__btn{flex:none;padding-inline:1.4em}
@media (max-width:359.98px){ .fj-search{flex-direction:column} }

.fj-404__code{display:block;font-family:var(--font-num);font-weight:700;font-size:var(--fs-num-xl);line-height:1;letter-spacing:.06em;color:var(--brand-ink)}
.fj-linklist{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none}
@media (min-width:768px){ .fj-linklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} }
.fj-linklist a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);height:100%;min-height:56px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font-weight:700;text-decoration:none;transition:border-color var(--dur);
}
.fj-linklist a::after{content:"";width:8px;height:8px;margin-right:4px;border-top:2px solid var(--faint);border-right:2px solid var(--faint);transform:rotate(45deg);flex:none}
.fj-linklist a:hover{border-color:var(--brand);color:var(--brand-ink)}
.fj-empty{padding:28px 24px;background:var(--bg-alt);border-radius:var(--r-lg);color:var(--ink-2);text-align:center}
.fj-empty>*+*{margin-top:var(--sp-3)}
.fj-empty .fj-search{margin-inline:auto}

/* ==========================================================
   W9. 記事下の相談ボックス（template-parts/consult-box.php。.fj-inline-cta の見た目で、電話・LINE・フォーム）
   ========================================================== */
.fj-consult{margin-top:var(--sp-7)}
.fj-consult__title{margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;letter-spacing:.02em;text-wrap:pretty}
.fj-consult .fj-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-1)}
.fj-consult .fj-btn{padding-inline:.5em}
.fj-consult .fj-btn--tel{grid-column:1/-1}
.fj-consult__loan{padding-top:var(--sp-3);border-top:1px dashed var(--line-strong);font-size:var(--fs-note);line-height:1.7;color:var(--muted)}
.fj-consult__loan b{color:var(--ink-2)}
.fj-consult__loan .fj-num{font-size:1rem;color:var(--ink)}
/* 金額と条件は同じ大きさ・すぐ下に（0円だけを目立たせない） */
.fj-consult__price{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.fj-consult__cond{margin-top:2px;padding-left:1em;text-indent:-1em} /* 先頭の※をぶら下げる */
@media (min-width:768px){
  .fj-consult .fj-btns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fj-consult .fj-btn--tel{grid-column:auto}
}
/* PCでも1列のまま（本文の幅が狭いため、.fj-inline-cta の2列の並びを使わない） */
@media (min-width:1024px){
  .fj-consult{grid-template-columns:minmax(0,1fr);padding:22px 28px}
  .fj-consult .fj-btns{grid-column:auto;grid-row:auto;margin-top:var(--sp-1)}
}

/* privacy etc.: the date line at the end of a policy page */
.fj-prose .fj-prose__date{margin-top:var(--sp-6);text-align:right;font-size:var(--fs-sm);color:var(--muted)}