@charset "UTF-8";
/* =========================================================
   かわぐち税理士事務所 テーマCSS
   カラー：深緑（ロゴ準拠）× 茶/金茶 × 白・生成り
   書体：見出し＝明朝／本文＝ゴシック
   ========================================================= */

/* ---- カラー・変数 ---- */
:root{
  --green:#1f6b3b;        /* メイン深緑 */
  --green-dark:#14512c;
  --green-deep:#0f3d21;
  --green-soft:#e7f0e9;   /* 淡い緑背景 */
  --brown:#8a5a2b;        /* アクセント茶 */
  --gold:#a9762e;         /* 金茶 */
  --gold-strong:#d69a1e;  /* 対比用の明るい金/黄 */
  --gold-bright:#f0b021;  /* SP CTA等の明るい黄色 */
  --gold-light:#c9a35b;
  --cream:#f7f4ec;        /* 生成り */
  --cream-2:#f1ece0;
  --ink:#2c2b28;          /* 本文文字 */
  --ink-soft:#5c5a53;
  --line:#e2ddd0;
  --white:#ffffff;
  --pink:#d98b96;         /* ごく僅かな差し色（使用は限定） */

  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  --maxw:1120px;
  --radius:10px;
  --shadow:0 8px 30px rgba(20,60,40,.08);
  --shadow-strong:0 14px 40px rgba(20,60,40,.16);
}

*,*::before,*::after{box-sizing:border-box}
/* 【2026-10-15 岡本様のご指示】「全体的に文字が小さく見えづらい」ため、全デバイスで文字を約6%拡大（16px→17px）。
   文字サイズの指定は大半が rem なので、この1行で全体が連動して大きくなる。
   ※ヘッダー（ロゴ・ナビ・電話番号）は px 指定のため対象外＝ハンバーガー切替点に影響しない。 */
html{scroll-behavior:smooth;overflow-x:hidden;font-size:106.25%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:var(--white);line-height:1.9;font-size:1rem;
  -webkit-font-smoothing:antialiased;letter-spacing:.02em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none;transition:.25s}
a:hover{color:var(--gold)}
ul{margin:0;padding:0;list-style:none}

/* ---- 共通レイアウト ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:88px 0}
.section--cream{background:var(--cream)}
.section--green{background:var(--green-deep);color:#eef3ee}
.section--soft{background:var(--green-soft)}
.narrow{max-width:840px;margin:0 auto}

/* ---- 見出し ---- */
.sec-head{text-align:center;margin-bottom:52px}
.sec-head .en{
  display:block;font-family:var(--serif);color:var(--gold);
  font-size:.85rem;letter-spacing:.28em;margin-bottom:12px;text-transform:uppercase;
}
.sec-head .ja{
  font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--green-deep);
  line-height:1.5;margin:0;
}
.section--green .sec-head .ja{color:#fff}
.section--green .sec-head .en{color:var(--gold-light)}
.sec-head .lead{margin-top:18px;color:var(--ink-soft);font-size:1rem}
.section--green .sec-head .lead{color:#cfe0d3}

/* 雪の結晶の小さなあしらい */
.snow-mark{display:inline-block;width:26px;height:26px;color:var(--gold);opacity:.9}

h2,h3,h4{font-family:var(--serif);color:var(--green-deep);line-height:1.5}

/* ---- ボタン ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:1.02rem;
  padding:16px 34px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:.25s;line-height:1.3;text-align:center;
}
.btn--primary{background:var(--gold);color:#fff;box-shadow:0 8px 20px rgba(169,118,46,.28)}
.btn--primary:hover{background:var(--brown);color:#fff;transform:translateY(-2px)}
.btn--tel{background:#fff;color:var(--green-dark);border-color:var(--green)}
.btn--tel:hover{background:var(--green);color:#fff}
.btn--ghost{background:transparent;color:var(--green-dark);border-color:var(--green)}
.btn--ghost:hover{background:var(--green);color:#fff}
.btn--lg{padding:18px 44px;font-size:1.08rem}
.btn--white{background:#fff;color:var(--green-dark)}
.btn--white:hover{background:var(--gold);color:#fff}

/* =========================================================
   ヘッダー（3段構成）
   -------------------------------------------------------
   【2026-10-01 変更・岡本様のご指示】静岡あんしん相続税相談室サイト（suzuki-zei-theme）と
   同じ3段構成にした。中身（文言・連絡先・ナビ項目）はかわぐち税理士事務所のまま。
     1段目 .hdr-bar  … 深緑の細い帯に一行キャッチ
     2段目 .hdr-main … 白地。左＝ロゴまわり／右＝相談形態・電話・相談予約の3ボックス
     3段目 .hdr-nav  … 深緑の帯にグローバルナビ（白文字・縦線区切り）
   ※旧構成（1段に ロゴ＋ナビ＋電話＋ボタン を横並び）は廃止した。**戻さないこと。**
     あわせて旧クラス（.header-inner／.header-cta／.header-tel／.gnav-extra）も廃止した。
   ※配色は参考サイトのローズではなく**深緑**。金色（--gold）はごく僅かな差し色に留めること。
   ========================================================= */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}

/* ---- 1段目：一行キャッチの帯 ---- */
.hdr-bar{background:var(--green);color:#fff}
.hdr-bar-txt{max-width:1760px;margin:0 auto;padding:7px 24px;font-size:14px;line-height:1.6;letter-spacing:.02em;text-align:center}
.hdr-bar-txt strong{font-weight:700}

/* ---- 2段目：ロゴと相談導線のボックス ---- */
.hdr-main-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1760px;margin:0 auto;padding:12px 24px}
.site-logo{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;flex-shrink:0;gap:4px}
/* ★2026-10-19 岡本様のご指示：「事務所名まわりのバランスが悪い」とのご指摘で、藤澤サイトと同じ
   「小さな一行（13px）→ 大きな事務所名 → 小さな一行（代表名／所在地）」の3段・左端そろえへ変更した。
   （2026-10-01 の 17px 拡大指示はこの形式変更で置き換え） */
.site-logo .lg-lead{font-size:13px;font-weight:700;color:var(--green);letter-spacing:.04em;white-space:nowrap}
/* 中央行はテキストではなく**事務所名入りのロゴ画像**。
   高さだけで大きさを決めること（画像は「エンブレム＋事務所名」が一体のため横幅は比例して伸びる）。
   ★拡大したら必ずPC 1100〜1440px で2段目が窮屈になっていないか目視確認すること。 */
.site-logo .lg-main{display:block}
/* ★2026-10-01（第2弾→第3弾）岡本様のご指示：2度のご指摘を受け 46px→62px→**78px** へ拡大した。
   ロゴ画像は「エンブレム＋事務所名」が一体のため、高さを上げると事務所名も大きくなる。
   ※横幅も比例して伸びる。**拡大したら必ずPC 1024〜1440px で2段目が窮屈になっていないか確認すること。** */
/* ★2026-10-19：ロゴ画像の上下約23%・左約6%の白い余白が「事務所名が小さい・行間が空く・右にずれる」原因だった。
   余白を切り落とした logo-header.webp（711×130）を使い、高さで大きさを決める。元の logo.webp はフッター等で使用中。 */
.site-logo .lg-main img{height:54px;width:auto}
.site-logo .lg-sub{font-size:11.5px;color:var(--ink-soft);letter-spacing:.04em;white-space:nowrap}

.hdr-boxes{display:flex;align-items:stretch;gap:10px;flex-shrink:0}
.hdr-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 16px;border-radius:10px;white-space:nowrap}
.hdr-box-sub{font-size:12.5px;letter-spacing:.02em}
/* ①相談形態のボックス。★「無料」と書かないこと（無料相談枠を設けていないため） */
.hdr-box--free{background:var(--green);color:#fff}
.hdr-box--free .hdr-box-main{font-size:16px;font-weight:700}
.hdr-box--free em{font-style:normal;font-size:18px}
/* ②電話ボックス */
.hdr-box--tel{border:2px solid var(--green);color:var(--ink-soft)}
.hdr-box--tel .hdr-box-num{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:28px;font-weight:700;color:var(--green-deep);letter-spacing:.02em;line-height:1.15}
/* ③フォームへの導線（参考サイトのLINEボタンの位置。当事務所はLINEが無いためフォームへ）
   ★2026-10-01（第2弾）岡本様のご指示：深緑から**アクセントの黄色**へ変更した。
     SP固定CTAバーの「相談予約」（.sp-cta .c-form）と同じ配色にしてサイト内の導線色を揃えている。
   ★2026-10-19 岡本様のご指示：明るい黄色（--gold-bright）から、トップの「相続税をシミュレーションする」ボタン（.simband-btn）と
     同じ**渋めの金茶（--gold）＋白文字**へ統一した。下部バー（.sp-cta .c-form）とフッターCTA（.cta-form-btn）も同色。
     ※旧メモ「白文字に戻さないこと」は明るい黄色のときの注意。金茶地では白文字が正しい（濃い緑にしないこと）。 */
.hdr-box--cta{flex-direction:row;gap:8px;background:var(--gold);color:#fff;font-size:13.5px;font-weight:700;line-height:1.35;text-align:left;transition:background-color .2s}
.hdr-box--cta:hover{background:var(--gold-strong);color:#fff}

/* ---- 3段目：ナビの帯 ---- */
/* ★2026-10-01（第2弾）岡本様のご指示：濃すぎるとのご指摘を受け
   --green-deep(#0f3d21) → --green(#1f6b3b) の明るい緑へ変更した。**濃い方に戻さないこと。**
   ※これに伴いホバー色も --green → --green-dark(#14512c) に変えている（同色だと反応が分からないため）。 */
.hdr-nav{background:var(--green)}
.gnav{display:flex;align-items:stretch;flex-wrap:nowrap;justify-content:center;max-width:1760px;margin:0 auto}
.gnav .gnav-tel{display:none} /* PCでは2段目の電話ボックスと重複するため非表示（SPメニューでのみ表示） */
.gnav a{display:flex;align-items:center;justify-content:center;padding:13px 20px;font-family:var(--serif);font-size:16px;font-weight:500;color:#fff;position:relative;white-space:nowrap;transition:background-color .2s}
.gnav a+a,.gnav-has-child+a,.gnav a+.gnav-has-child{border-left:1px solid rgba(255,255,255,.3)}
.gnav a:hover{color:#fff;background:var(--green-dark)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:6px;padding:8px;z-index:110}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--green-deep);transition:.3s;transform-origin:center}
.nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---- 取扱業務のドロップダウン（2階層）----
   ・PCはカーソルを合わせると開く（キーボード操作は :focus-within で開く）
   ・項目は kz_services() から自動生成されるため、業務を増減してもCSSの修正は不要
   ・ハンバーガー時（1023px以下）は下の @media でインデントした常時表示に切り替える
   【注意】このナビは `<a>` の直置き構造で、`.gnav a` が**子メニューの a にも効く**。
   　　　　高さ・縦線は `.gnav .gnav-sub a` で必ず打ち消すこと。 */
.gnav-has-child{position:relative;display:flex;align-items:center;align-self:stretch;height:100%}
/* ▼マークの分だけ右に余白を足す（縦線に重ならない位置に置く）
   ★2026-10-05 岡本様のご指示：マークが文字に重なっていた（実測で1px重なり）ため
     余白を 26px→34px に広げ、マークも右へ1px寄せた。**26pxに戻さないこと。** */
.gnav-has-child>a{padding-right:34px}
.gnav-has-child>a::before{
  content:"";position:absolute;right:12px;top:50%;width:5px;height:5px;
  border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:translateY(-70%) rotate(45deg);
}
.gnav-sub{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:220px;padding:8px 0;background:#fff;border-radius:12px;
  border-top:3px solid var(--gold);box-shadow:var(--shadow-strong);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:130;
}
/* ヘッダーとメニューのあいだにカーソルが抜ける“隙間”を埋めて、移動中に閉じないようにする */
.gnav-sub::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.gnav-has-child:hover>.gnav-sub,
.gnav-has-child:focus-within>.gnav-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* 親（.gnav a）の指定を打ち消す。`:first-child` の左線も含めて確実に消すこと */
.gnav .gnav-sub a,
.gnav .gnav-sub a:first-child{
  display:block;height:auto;padding:12px 22px;font-size:15px;
  border:0;white-space:nowrap;color:var(--green-deep);
}
.gnav .gnav-sub a:hover{background:var(--green-soft);color:var(--gold)}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{background:var(--green-deep);color:#d7e2d9;padding:64px 0 28px;font-size:.92rem}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
.footer-logo img{height:88px;background:#fff;padding:14px;border-radius:8px;margin-bottom:16px}
.footer-desc{color:#b9c9bd;font-size:.88rem;line-height:1.9}
.footer-col h4{color:#fff;font-size:1rem;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.18)}
.footer-col ul li{margin-bottom:10px}
.footer-col a{color:#cdd9cf}
.footer-col a:hover{color:var(--gold-light)}
.footer-info p{margin:.3em 0;color:#c3d1c6}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;color:#9fb2a3;font-size:.8rem}

/* =========================================================
   SP固定CTAバー
   ========================================================= */
.sp-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:1fr 1fr;background:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.12);
  /* 【2026-10-15 岡本様のご指示】縦幅が短い（38px）ため藤澤サイトと同じ56pxへ。
     iPhoneのホームバー（セーフエリア）分は下に足す。高さを変えたら body の padding-bottom と
     .kz-simfab{bottom}／KZ_SIM_FLOAT_BOTTOM も合わせること。 */
  height:calc(56px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.sp-cta a{display:flex;align-items:center;justify-content:center;gap:.4em;height:100%;padding:0 6px;font-weight:700;font-size:16px;line-height:1.3;letter-spacing:.04em}
.sp-cta .c-tel{background:var(--green);color:#fff}
.sp-cta .c-form{background:var(--gold);color:#fff} /* 2026-10-19 シミュレーションボタンと同じ金茶へ統一 */

/* =========================================================
   相続税シミュレーションの浮遊ボタン（右下・全ページ共通）
   -------------------------------------------------------
   【2026-10-01 岡本様のご指示／明石みなと会計事務所サイトと同じ形式】
   プロコネ製のボタンはJSで隠し、この自前のボタン1つから
   「相続税」「生前対策」の2択でプロコネのパネルを開く。
   ★bottom の値は functions.php の KZ_SIM_FLOAT_BOTTOM と必ず揃えること。
     ずれるとプロコネのパネルと当方のボタンの高さが合わない。
   ★1024px以下は画面下に固定CTAバー（.sp-cta）が出るため、重ならない位置にしている。
   ========================================================= */
.kz-simfab{position:fixed;right:24px;bottom:72px;z-index:160;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.kz-simfab[hidden]{display:none}
/* プロコネのパネルが開いているあいだは隠す（右下で重なるため） */
.kz-simfab.is-hidden{visibility:hidden;opacity:0;pointer-events:none}
.kz-simfab-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;
  background:var(--green);color:#fff;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--shadow-strong);transition:background-color .2s;
}
.kz-simfab-btn:hover{background:var(--green-deep)}
.kz-simfab-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.kz-simfab-ico{display:inline-flex}
.kz-simfab.is-open .kz-simfab-btn{background:var(--green-deep)}
.kz-simfab-menu{
  display:flex;flex-direction:column;gap:8px;min-width:260px;padding:10px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-strong);
}
.kz-simfab-menu[hidden]{display:none}
.kz-simfab-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;text-align:left;font-family:var(--sans);transition:background-color .2s,border-color .2s;
}
.kz-simfab-item:hover{background:var(--green-soft);border-color:var(--green)}
.kz-simfab-item:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.kz-simfab-item-main{font-size:15px;font-weight:700;color:var(--green-deep)}
.kz-simfab-item-sub{font-size:12px;color:var(--ink-soft)}
@media(max-width:767px){
  .kz-simfab{right:14px}
  .kz-simfab-btn{min-height:48px;padding:0 16px;font-size:14px}
  .kz-simfab-menu{min-width:0;width:calc(100vw - 28px);max-width:300px}
}

/* =========================================================
   トップ：ヒーロー
   ========================================================= */
.hero{position:relative;background:var(--green-deep);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,61,33,.92) 0%,rgba(15,61,33,.72) 42%,rgba(15,61,33,.18) 100%);}
.hero-inner{position:relative;z-index:2;padding:118px 0 128px;max-width:640px}
.hero-tag{display:inline-block;font-family:var(--serif);color:var(--gold-light);letter-spacing:.2em;font-size:.92rem;border:1px solid rgba(201,163,91,.6);border-radius:999px;padding:6px 18px;margin-bottom:26px}
.hero h1{font-family:var(--serif);font-size:2.9rem;font-weight:600;line-height:1.45;margin:0 0 22px;color:#fff}
.hero h1 .accent{color:var(--gold-light)}
.hero p.sub{font-size:1.08rem;color:#dce7de;margin:0 0 34px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-foot{position:relative;z-index:2;display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding:22px 0;color:#cfe0d3;font-size:.86rem}
.hero-foot b{color:var(--gold-light);font-family:var(--serif);font-size:1.5rem;display:block}

/* ---- お悩み提起 ---- */
.worry-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.worry-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;text-align:center;box-shadow:var(--shadow)}
.worry-card .ic{margin-bottom:12px;color:var(--gold);display:flex;justify-content:center}
.worry-card .ic svg{width:48px;height:48px;stroke:var(--gold);fill:none}
@media(max-width:768px){.worry-card .ic svg{width:38px;height:38px}}
.worry-card p{margin:0;color:var(--ink);font-size:.98rem}
.worry-after{text-align:center;margin-top:36px;font-family:var(--serif);font-size:1.25rem;color:var(--green-deep)}
.worry-after .em{color:var(--gold);font-weight:700}

/* ---- 理念 ---- */
.philosophy{text-align:center}
.philosophy .title{font-family:var(--serif);font-size:1.9rem;color:var(--green-deep);line-height:1.6;margin:0 0 26px}
.philosophy .title .accent{color:var(--gold)}
.philosophy .body{color:var(--ink-soft);text-align:left;max-width:none;margin:0;font-size:1rem}

/* ---- 強み ---- */
.strength-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.strength-card{background:#fff;border-radius:var(--radius);padding:36px 28px;box-shadow:var(--shadow);border:2px solid var(--green);position:relative}
.strength-no{font-family:var(--serif);color:var(--gold);font-size:.8rem;letter-spacing:.2em}
.strength-card h3{font-size:1.28rem;margin:.4em 0 .6em;line-height:1.5}
.strength-card h3 .hl{color:var(--gold-strong)}
.strength-card p{margin:0;color:var(--ink-soft);font-size:.94rem}
.strength-badge{color:var(--gold-strong);font-weight:700;font-size:1.5rem;font-family:var(--serif);padding:0 2px}

/* ---- 業務カード ---- */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;transition:.25s;box-shadow:var(--shadow)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-strong)}
.service-card .num{font-family:var(--serif);color:var(--gold);font-size:.82rem;letter-spacing:.2em}
.service-card h3{font-size:1.35rem;margin:.3em 0 .5em}
.service-card p{margin:0 0 16px;color:var(--ink-soft);font-size:.95rem}
.service-card .price{font-family:var(--serif);color:var(--green-dark);font-weight:700;font-size:1.15rem;border-top:1px dashed var(--line);padding-top:12px}
.service-card .price small{font-weight:400;color:var(--ink-soft)}

/* ---- 取扱業務のカード一覧（2026-09-07：個別ページ化にともない `<a>` 化した） ----
   `/service/`（一覧）と各個別ページの「そのほかの取扱業務」で共用する。
   ※`.service-card` は元々 div 用のスタイルだったため、リンク化に必要な指定をここで足している。 */
.service-grid--link .service-card{display:flex;flex-direction:column;color:inherit;overflow:hidden;padding:0}
.service-grid--link .service-card:hover{color:inherit}
.service-card-thumb{aspect-ratio:3/2;background:var(--cream);overflow:hidden}
.service-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.service-grid--link .service-card:hover .service-card-thumb img{transform:scale(1.04)}
/* サムネイル以外の中身に、元の .service-card と同じ余白を与える */
.service-grid--link .service-card>:not(.service-card-thumb){margin-left:30px;margin-right:30px}
.service-grid--link .service-card>.num{margin-top:26px}
.service-grid--link .service-card>:last-child{margin-bottom:26px}
.service-card-title{font-family:var(--serif);font-size:1.35rem;color:var(--green-deep);margin:.3em 0 .5em}
.service-grid--link .service-card h4{font-family:var(--serif);font-size:1.2rem;color:var(--green-deep);margin:.3em 0 .5em}
/* 説明文の長さが違ってもボタンの位置が揃うように、余白で押し下げる */
.service-grid--link .service-card p{flex-grow:0}
.service-card-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  font-family:var(--serif);font-size:.94rem;font-weight:700;color:var(--gold);
}
.service-grid--link .service-card:hover .service-card-more{color:var(--brown)}
.service-card-more .icon{transition:transform .25s}
.service-grid--link .service-card:hover .service-card-more .icon{transform:translateX(4px)}

/* ---- 料金テーブル ---- */
.fee-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.fee-table th,.fee-table td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line)}
.fee-table thead th{background:var(--green);color:#fff;font-family:var(--serif);font-weight:600}
.fee-table tbody th{font-weight:700;color:var(--green-deep);width:34%}
.fee-table td.price{font-family:var(--serif);font-weight:700;color:var(--gold);white-space:nowrap}
.fee-note{margin-top:18px;color:var(--ink-soft);font-size:.9rem}

/* ---- 実績 ---- */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 30px;border:2px solid var(--gold)}
.case-card .tag{display:inline-block;background:var(--green-soft);color:var(--green-dark);font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:14px}
.case-card h3{font-size:1.16rem;margin:0 0 12px;line-height:1.6}
.case-card p{margin:0;color:var(--ink-soft);font-size:.93rem}
.case-card .result{margin-top:14px;font-family:var(--serif);color:var(--gold);font-weight:700}

/* ---- 流れ ---- */
.flow{max-width:none;margin:0}
/* 各ステップを同じ高さに揃え、線の長さ・間隔を均等化 */
.flow-step{display:flex;gap:24px;position:relative;min-height:104px}
.flow-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:56px;bottom:8px;width:2px;background:var(--line)}
.flow-num{flex:0 0 48px;height:48px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--serif);font-size:1.2rem;display:flex;align-items:center;justify-content:center;z-index:2}
.flow-body{padding-top:2px}
.flow-body h3{margin:.2em 0 .3em;font-size:1.16rem}
.flow-body p{margin:0;color:var(--ink-soft);font-size:.95rem}
@media(max-width:768px){
  .flow-step{min-height:128px}
  .flow-step:not(:last-child)::before{bottom:10px}
}

/* ---- 代表紹介（トップ抜粋） ---- */
.profile-feat{display:grid;grid-template-columns:1fr 1.12fr;gap:44px;align-items:center}
.profile-feat .ph img{border-radius:var(--radius);box-shadow:var(--shadow-strong);width:100%}
/* 代表の縦ポートレート：小さく＆腕組みより下をカット（顔・胸元まで） */
.profile-feat .ph--portrait{display:flex;justify-content:center}
/* 【2026-09-07・クライアントのご要望】代表紹介ページ（/profile/）の写真が小さいとのご指摘で
   **290px → 400px** に拡大し、左カラムの比率も広げた（トップの代表挨拶と同じサイズに統一）。
   ※本文の囲い（.wrap.narrow＝840px）のままでも収まる大きさ。 */
.profile-feat .ph--portrait img{max-width:400px;width:100%;aspect-ratio:1/1.18;object-fit:cover;object-position:50% 12%}
.profile-feat .tx .role{color:var(--gold);font-family:var(--serif);letter-spacing:.1em}
.profile-feat .tx h3{font-size:1.7rem;margin:.2em 0 .5em}
.profile-feat .tx .msg{font-family:var(--serif);font-size:1.2rem;color:var(--green-deep);line-height:1.7;margin-bottom:16px}
/* トップの代表紹介：メッセージを1行に収める（PCのみ） */
@media(min-width:769px){.profile-feat--home .tx .msg{white-space:nowrap;font-size:1.12rem}}
.profile-feat .tx p{color:var(--ink-soft)}
/* 【2026-09-02・クライアントからの修正依頼】トップ⑧「代表挨拶」の顔写真を大きくする。
   ・対象は **トップのみ**（`--home`）。代表紹介ページ（/profile/）の写真サイズは従来のまま。
   ・写真枠を 290px → 400px に拡大し、それに合わせて左カラムの比率も広げている。
   ・縦横比を 1:1.08 → 1:1.18 にして、拡大しても顔が窮屈にならないようにした。 */
/* ※2026-09-07：/profile/ 側も同じ400pxに揃えたため、`--home` の上書きは gap の差だけになった。
   トップと代表紹介でサイズを変えたくなった場合はここで調整すること。 */
.profile-feat--home{gap:52px}

/* ---- トップ 事務所情報（情報ボックス上・画像/マップ下段） ---- */
.office-box{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:28px 34px;box-shadow:var(--shadow);margin-bottom:24px}
.office-box h3{font-size:1.35rem;margin:0 0 .4em}
.office-box p{margin:.35em 0;color:var(--ink)}
.office-box .text-link{margin-top:10px}
.office-media{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.office-media .om-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.office-media .om-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:320px}
.office-media .om-map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
@media(max-width:768px){
  .office-media{grid-template-columns:1fr}
  .office-media .om-photo img{aspect-ratio:16/10}
  .office-box{padding:22px 22px}
}

/* ---- お客様の声 ----
   ※2026-08-07：★評価付きの旧カードは廃止。
     新デザイン（写真＋タグ＋本文＋属性のカード／カルーセル）は
     このファイル末尾の「お客様の声（写真＋タグバッジ型カード）」を参照。 */

/* ---- コラム ---- */
.column-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.column-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;color:var(--ink)}
.column-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-strong)}
.col-thumb{aspect-ratio:16/10;overflow:hidden}
.col-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.col-thumb--none{display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--serif);letter-spacing:.25em;font-size:.9rem;background:linear-gradient(135deg,var(--green-soft),var(--cream-2))}
.col-body{padding:16px 20px 20px}
.col-body time{color:var(--gold);font-family:var(--serif);font-size:.8rem}
.col-body h3{font-size:1.06rem;margin:.3em 0 0;line-height:1.55;color:var(--green-deep)}
.column-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.column-row{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);color:var(--ink)}
.column-row .th{flex:0 0 120px;aspect-ratio:16/11;border-radius:8px;overflow:hidden}
.column-row .th img{width:100%;height:100%;object-fit:cover}
.column-row time{color:var(--gold);font-family:var(--serif);font-size:.78rem}
.column-row h3{font-size:1.06rem;margin:.2em 0 0;color:var(--green-deep)}
.article-body{max-width:760px;margin:0 auto}
.article-body time{color:var(--gold);font-family:var(--serif);font-size:.85rem}
.article-body h1{font-family:var(--serif);color:var(--green-deep);font-size:1.7rem;margin:.2em 0 .6em;line-height:1.5}
.article-body h2{font-size:1.35rem;margin:1.6em 0 .5em;padding-left:14px;border-left:5px solid var(--gold)}
.article-body h3{font-size:1.15rem;margin:1.4em 0 .4em}
.article-body img{border-radius:var(--radius);margin:1em 0}
.article-body p{margin:0 0 1.2em}
@media(max-width:900px){.column-grid{grid-template-columns:1fr}.column-row .th{flex-basis:96px}}

/* ---- CTA帯 ---- */
.cta-band{background:var(--green-soft);color:var(--green-deep);text-align:center;padding:72px 0}
.cta-band h2{color:var(--green-deep);font-size:1.9rem;margin:0 0 14px}
.cta-band p{color:var(--ink-soft);margin:0 0 30px}
.cta-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:stretch}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:1.15rem;padding:18px 40px;border-radius:999px;transition:transform .2s,background .2s,color .2s;white-space:nowrap;box-shadow:0 8px 22px rgba(20,60,40,.14)}
/* 予約ボタン：最初から明るい黄色。ホバーで拡大＋濃色 */
.cta-btn--form{background:var(--gold-bright);color:var(--green-deep)}
.cta-btn--form:hover{background:var(--gold);color:#fff;transform:scale(1.06)}
/* TELボタン：薄緑背景で見えるよう緑塗り。ホバーで拡大＋濃色。番号は常に横一列 */
.cta-btn--tel{background:var(--green);color:#fff;font-family:var(--serif)}
.cta-btn--tel .ic{font-size:1.1em}
.cta-btn--tel:hover{background:var(--green-dark);color:#fff;transform:scale(1.06)}
.cta-hours{color:var(--green-dark);font-weight:700;font-size:1rem;margin-top:18px;letter-spacing:.04em}

/* =========================================================
   下層ページ共通
   ========================================================= */
.page-hero{background:var(--green-deep);color:#fff;padding:66px 0;text-align:center;position:relative}
.page-hero .en{display:block;font-family:var(--serif);color:var(--gold-light);letter-spacing:.28em;font-size:.82rem;margin-bottom:10px}
.page-hero h1{font-family:var(--serif);font-size:2.2rem;margin:0;font-weight:600}
.breadcrumb{background:var(--cream);font-size:.8rem;color:var(--ink-soft);padding:12px 0}
.breadcrumb a{color:var(--green)}
.page-body{padding:72px 0}
.page-body h2{font-size:1.6rem;margin:0 0 22px;padding-left:16px;border-left:5px solid var(--gold)}
.page-body h3{font-size:1.24rem;margin:36px 0 14px}
.page-body p{color:var(--ink);margin:0 0 18px}
.lead-block{background:var(--cream);border-radius:var(--radius);padding:30px 34px;margin-bottom:40px;font-family:var(--serif);font-size:1.1rem;color:var(--green-deep)}

/* ---- FAQ ---- */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.faq-q{display:flex;gap:14px;align-items:flex-start;padding:22px 26px;cursor:pointer;font-weight:700;color:var(--green-deep);font-family:var(--serif)}
.faq-q .qm{color:var(--gold);font-size:1.3rem;font-family:var(--serif);line-height:1}
.faq-q .tgl{margin-left:auto;transition:.3s;color:var(--gold);flex:0 0 auto}
.faq-item.open .faq-q .tgl{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 26px}
.faq-a .inner{padding:0 0 22px 34px;color:var(--ink-soft);font-size:.96rem}
.faq-item.open .faq-a{max-height:400px}

/* ---- 事務所情報テーブル ----
   .info-table--full ＝ トップのアクセスで使う全幅版（見出し列を固定幅にして碓井サイトと同じ見え方にする） */
.info-table--full{width:100%}
.info-table--full th{width:200px;white-space:nowrap}
.info-table--full td a{color:var(--green);font-weight:500}
@media(max-width:768px){
  .info-table--full th{width:34%;white-space:normal}
}
/* ---- 事務所情報テーブル ---- */
.info-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}
.info-table th,.info-table td{padding:18px 22px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.info-table th{background:var(--green-soft);color:var(--green-deep);width:28%;font-weight:700}
/* 代表紹介の略歴（2026-10-19）：年月の列は折り返さず、全幅で「年月｜出来事」の横並びを保つ */
.profile-history th{width:9.5em;white-space:nowrap}
.profile-history .nw{white-space:nowrap}
@media(max-width:768px){
  .profile-history th,.profile-history td{padding:13px 10px;font-size:.84rem;letter-spacing:0}
  .profile-history th{width:6.6em}
}
@media(max-width:374px){
  /* 320px幅で「同税理士法人　共同代表社員就任」が枠からはみ出さない大きさ */
  .profile-history th,.profile-history td{padding:12px 6px;font-size:.74rem}
  .profile-history th{width:5.6em}
}
.map-embed{margin-top:32px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.map-embed iframe{width:100%;height:380px;border:0;display:block}

/* ---- 沿革 ---- */
.history-list{border-left:2px solid var(--line);margin-left:8px}
.history-list li{position:relative;padding:0 0 26px 28px}
.history-list li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #fff}
.history-list .year{font-family:var(--serif);color:var(--green-dark);font-weight:700;margin-right:12px}

/* ---- お問い合わせ（2026-10-01：明石みなと会計事務所サイトと同じ形式へ刷新）----
   旧クラス（.contact-lead／.contact-cols／.contact-box）は廃止した。**戻さないこと。**
   旧構成はカードのアイコンが**絵文字**で端末ごとに形と大きさが変わっていたため、
   インラインSVG（kz_icon）を円のバッジに収める形に改めている。 */
.contact-ways{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:860px;margin:0 auto}
.contact-way{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;text-align:center;box-shadow:var(--shadow)}
/* アイコンのバッジ。二重線は box-shadow の inset で描いている（要素を増やさないため） */
.contact-way-ico{
  display:inline-flex;width:76px;height:76px;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;border:1.5px solid var(--gold);
  box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 5px var(--green-soft);
  color:var(--green-deep);margin-bottom:18px;
}
.contact-way-title{font-family:var(--serif);font-size:1.25rem;color:var(--green-deep);margin:0 0 10px}
.contact-way-text{font-size:.9rem;color:var(--ink-soft);margin:0 0 16px;line-height:1.9}
.contact-way-tel{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--green-deep)}
.contact-way-tel:hover{color:var(--gold)}
.contact-way-note{font-size:.78rem;color:var(--ink-soft);margin:8px 0 0}

/* CF7が未設置のときだけ出る「見本フォーム」。★実際の送信機能を持たせないこと */
.form-pending-note{background:var(--green-soft);border-radius:var(--radius);padding:14px 18px;font-size:.84rem;color:var(--ink-soft);margin:0 0 24px}
.form-row{margin-bottom:20px}
.form-row label{display:block;font-weight:700;color:var(--green-deep);margin-bottom:8px;font-size:.95rem}
.form-row .req,.form-row .opt{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700;vertical-align:middle}
.form-row .req{background:var(--gold);color:#fff}
.form-row .opt{background:var(--line);color:var(--ink-soft)}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:1rem;background:#fdfdfb}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--green-soft);border-color:var(--green)}
.form-consent{background:var(--green-soft);border-radius:8px;padding:16px 18px;font-size:.84rem;color:var(--ink-soft);margin-bottom:22px}
.form-submit{text-align:center}
.form-submit .btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
/* ---- Contact Form 7（2026-10-05：明石みなと会計事務所サイトと同じ形式へ）----
   フォーム本体（項目・字数制限・同意チェック）は**CF7の設定（FORM_ID=15）が正本**。
   ★項目を直すときは管理画面か `WPCF7_ContactForm::save()` 経由で行うこと。
     `wp_posts.post_content` を直接書き換えても表示は変わらない（`_form` メタが正本）。
   ★旧クラス `.form-row` 直下の指定は `.wpcf7-row` に置き換えた。 */
.wpcf7-row{margin-bottom:20px}
.wpcf7-form label{display:block;font-weight:700;font-size:.97rem;color:var(--green-deep);margin-bottom:6px}
/* 必須バッジ。見本フォーム側（.form-row .req）と見た目を揃えている */
.wpcf7-form .req{display:inline-block;background:var(--gold);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:4px;margin-left:8px;vertical-align:2px}
/* 「（20文字以内）」等の注記 */
.wpcf7-form .cf7-hint{font-size:.78rem;font-weight:500;color:var(--ink-soft);margin-left:6px}
.wpcf7-form-control-wrap{display:block}
.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form input[type="tel"],
.wpcf7-form textarea,.wpcf7-form select{
  width:100%;padding:13px 15px;margin-top:6px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:1rem;background:#fdfdfb;
}
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus{outline:none;border-color:var(--green);background:#fff}
.wpcf7-form textarea{min-height:150px;resize:vertical}
.wpcf7-form input::placeholder,.wpcf7-form textarea::placeholder{color:#a9b2a5}

/* 同意チェック（プライバシーポリシー／営業・勧誘ではない の2つ）
   ★「営業・勧誘を目的としたお問い合わせではありません」は**迷惑問い合わせ対策**。削除しないこと。 */
.wpcf7-accept{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.wpcf7-accept+.wpcf7-accept{margin-top:-8px}
.wpcf7-accept .wpcf7-list-item{margin:0}
.wpcf7-accept label{display:flex;align-items:flex-start;gap:10px;font-weight:500;font-size:.9rem;color:var(--ink-soft);margin:0}
.wpcf7-accept input[type="checkbox"]{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--green-deep)}
.wpcf7-accept a{color:var(--green-deep);text-decoration:underline}

.wpcf7-submit-wrap{text-align:center;margin-top:28px}
.wpcf7-form .wpcf7-submit{background:var(--gold);color:#fff;border:none;padding:16px 44px;border-radius:999px;font-weight:700;font-size:1.05rem;cursor:pointer;width:auto;display:inline-block}
.wpcf7-form .wpcf7-submit:hover{background:var(--brown)}
.wpcf7-form .wpcf7-submit:disabled{opacity:.6;cursor:default}
/* CF7が送信ボタンの隣に差し込む読み込み中アイコン。
   既定では常に幅（24px＋左右マージン24px）を取るため、**送信ボタンが中央から36pxずれる**。
   送信中（form.submitting）だけ出す。※CF7本体の `form.submitting .wpcf7-spinner` と組み合わせて動く */
.wpcf7-spinner{margin:0 auto;display:none}
.wpcf7-form.submitting .wpcf7-spinner{display:inline-block}

/* 入力エラーの表示 */
.wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:.82rem;font-weight:700;color:#c0392b}
.wpcf7-form input.wpcf7-not-valid,.wpcf7-form textarea.wpcf7-not-valid{border-color:#c0392b;background:#fff7f6}
.wpcf7-response-output{margin:24px 0 0;padding:14px 16px;border-radius:8px;font-size:.92rem;line-height:1.8}
.wpcf7-form.sent .wpcf7-response-output{border-color:var(--green)!important;background:var(--green-soft);color:var(--green-deep)}
/* ★2026-10-01：フォームを**生成り背景のセクション（.section--cream）の上の白いカード**にした
   （明石みなと会計事務所サイトと同じ形式）。
   以前は枠自体が生成りで、セクションの背景と同化して枠が見えなくなっていた。
   **background を var(--cream) に戻さないこと。** */
.contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px;max-width:760px;margin:0 auto}

/* ---- SP「さらに見る」トグル（PCは全件表示・ボタン非表示） ---- */
.sp-more-btn{display:none}

/* ---- スクロール表示アニメーション ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- 汎用 ---- */
.center{text-align:center}
.sp-only{display:none}
@media(max-width:768px){.sp-only{display:inline}}
.mt40{margin-top:40px}
.text-link{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--green);font-family:var(--serif)}
.text-link::after{content:"→";transition:.25s}
.text-link:hover::after{transform:translateX(4px)}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr}
  .profile-feat{grid-template-columns:1fr}
  .strength-grid{grid-template-columns:1fr}
  .worry-list{grid-template-columns:1fr 1fr;gap:14px}
  .service-grid,.case-grid,.voice-grid,.contact-ways{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
}
/* ---- ヘッダー：画面幅ごとの詰め（3段構成用・2026-10-01 再設計）----
   ナビは3段目の帯を丸ごと使えるようになったため、旧構成ほど厳しく詰める必要はない。
   2段目の3つのボックスのほうが先に窮屈になるので、そちらを段階的に縮める。
   ★旧構成の切替点（1220px）は廃止した。**戻さないこと。**
   ★ロゴサイズ・ナビ項目・ナビの文字サイズを変えたら、各切替点を必ず再測定すること。 */
@media(max-width:1500px){
  /* ★`padding` の一括指定は `.gnav-has-child>a` の padding-right を打ち消す。
     幅ごとに `.gnav a{padding:...}` を書いたら、**必ず同じブロックで
     `.gnav-has-child>a{padding-right}` も指定し直すこと**（▼マークが文字に重なる）。 */
  .gnav a{padding:13px 15px;font-size:15px}
  .gnav-has-child>a{padding-right:32px}
  .hdr-box{padding:7px 13px}
  .hdr-box--tel .hdr-box-num{font-size:25px}
  .hdr-box--free .hdr-box-main{font-size:15px}
  .hdr-box--free em{font-size:17px}
}
@media(max-width:1280px){
  .gnav a{padding:13px 11px;font-size:14px}
  .gnav-has-child>a{padding-right:30px}
  .site-logo .lg-lead{font-size:13px}
  .site-logo .lg-main img{height:50px}
  .hdr-box-sub{font-size:11.5px}
  .hdr-box--tel .hdr-box-num{font-size:22px}
  .hdr-box--cta{font-size:12.5px}
  .hdr-bar-txt{font-size:13px}
}
@media(max-width:1100px){
  .gnav a{padding:13px 8px;font-size:13px}
  .gnav-has-child>a{padding-right:27px}
  .site-logo .lg-main img{height:44px}
  .site-logo .lg-lead{font-size:12px}
  /* 相談形態のボックスは電話とボタンより優先度が低いのでここで隠す */
  .hdr-box--free{display:none}
  .hdr-main-inner{padding:10px 18px;gap:14px}
}

/* 1023px以下：ハンバーガー（ナビは画面外へ退避し .is-open でスライドイン）
   ※クラス名は当テーマの main.js に合わせて `.is-open` / `.is-active`（suzuki は `.open` / `.active`）。 */
@media(max-width:1023px){
  /* ヘッダーが2段目だけ（実測100〜108px）になるため、アンカー余白をPC用の250pxから戻す */
  .s11,.service-detail{scroll-margin-top:120px}
  .nav-toggle{display:flex}
  /* タブレット・スマホでは1段目の帯と3段目のナビ帯を出さず、
     2段目＋ハンバーガーだけの見た目にする。ボックスも**電話だけ**を残す。 */
  .hdr-bar{display:none}
  .hdr-nav{background:transparent}
  .hdr-box--free,.hdr-box--cta{display:none}
  .hdr-box--tel{border:0;padding:0;align-items:flex-end}
  .hdr-box--tel .hdr-box-num{font-size:21px}
  .hdr-box--tel .hdr-box-sub{font-size:10.5px}
  .site-logo .lg-main img{height:38px}
  .site-logo .lg-lead{font-size:11px}
  .hdr-main-inner{padding:10px 20px;gap:12px}
  /* ★メニューの上端は**ヘッダーの実高に自動で追従**させる（top:100%）。
     参考にした suzuki は `position:fixed; top:72px` の固定値だが、当サイトはロゴ画像の高さの分
     2段目が83〜88pxあり、**固定値だとメニューが2段目に食い込む**（実測で11〜15px）。
     そのため3段目の帯（.hdr-nav）を基準にした絶対配置へ変えている。**固定値に戻さないこと。**
     ・.hdr-nav が overflow:hidden の“窓”になり、閉じているメニュー（上へ退避）を隠す。
     ・帯自体はクリックを拾わない（pointer-events:none）。拾うのはメニュー本体だけ。 */
  .hdr-nav{
    position:absolute;top:100%;left:0;right:0;z-index:120;
    overflow:hidden;pointer-events:none;
  }
  .gnav{
    position:static;height:auto;pointer-events:auto;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:#fff;padding:16px 24px 26px;gap:4px;box-shadow:var(--shadow);
    transform:translateY(-120%);transition:transform .35s ease;
    border-bottom:1px solid var(--line);
    max-height:calc(100vh - 160px);overflow-y:auto;
  }
  .gnav.is-open{transform:translateY(0)}
  .gnav a{width:100%;height:auto;padding:14px 4px;font-size:16px;color:var(--ink);
    border-left:0;border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start}
  .gnav a+a,.gnav-has-child+a,.gnav a+.gnav-has-child{border-left:0}
  .gnav a:hover{background:transparent;color:var(--green)}
  .gnav-has-child>a::before{border-color:var(--green)}
}

/* 767px以下（スマホ）：ヘッダーは「ロゴ＋ハンバーガー」だけにする。
   電話ボックスを残すとロゴと並んで画面からはみ出すため。
   電話はハンバーガー内（.gnav-tel）と画面下部の固定CTAバー（.sp-cta）が担当する。
   **ここで電話ボックスを復活させると横スクロールが出る。** */
@media(max-width:767px){
  .hdr-box--tel{display:none}
  .hdr-main-inner{padding:10px 16px}
  .site-logo{gap:3px}
  .site-logo .lg-main img{height:34px}
  .site-logo .lg-lead{font-size:10.5px;white-space:normal}
  .site-logo .lg-sub{font-size:10px;letter-spacing:0}
  .gnav .gnav-tel{display:block;color:var(--green-deep);font-family:var(--serif);font-size:20px}

  /* 取扱業務の子メニュー：スマホ・タブレットはホバーが使えないため、
     ドロップダウンをやめて**インデントした常時表示**にする＝3本線を押すと各業務が並ぶ。
     ※`position:absolute` と `opacity:0` を必ず打ち消すこと（消し忘れると項目が見えなくなる）。 */
  .gnav-has-child{display:block;width:100%;height:auto;align-self:auto}
  .gnav-has-child>a{padding-right:4px}
  .gnav-has-child>a::before{display:none}
  .gnav-sub{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;padding:0;border-top:0;border-radius:0;box-shadow:none;background:var(--cream);
  }
  .gnav-sub::before{display:none}
  .gnav .gnav-sub a,
  .gnav .gnav-sub a:first-child{
    display:block;width:100%;padding:12px 4px 12px 26px;font-size:14.5px;
    border:0;border-bottom:1px solid var(--line);position:relative;white-space:normal;
  }
  .gnav .gnav-sub a::before{content:"−";position:absolute;left:8px;color:var(--gold)}
}

@media(max-width:768px){
  .section{padding:60px 0}
  .sp-cta{display:grid}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .sec-head .ja{font-size:1.35rem}
  .philosophy .title{font-size:1.4rem}
  .cta-band h2{font-size:1.4rem}
  .profile-feat .tx h3{font-size:1.5rem}
  .page-body h2{font-size:1.35rem}
  /* SPで長い見出しが画面幅を超えないよう、どこでも折り返し可に */
  .hero h1,.sec-head .ja,.philosophy .title,.worry-after,.cta-band h2,.page-hero h1{word-break:break-word;overflow-wrap:anywhere}
  .footer-top{grid-template-columns:1fr}
  /* SP：写真（顔）を上に、その下にキャッチ2行を配置。文章・ボタン・統計は非表示 */
  .hero{background:var(--green-deep)}
  .hero p.sub,.hero-actions,.hero-foot{display:none}
  .hero-media{position:relative;height:300px}
  .hero-media::after{background:linear-gradient(to bottom,rgba(15,61,33,.10) 55%,var(--green-deep))}
  .hero-media img{object-position:68% 20%}
  .hero-inner{padding:22px 0 34px;max-width:100%}
  .hero-tag{margin-bottom:16px}
  /* 画面幅に応じて縮み、各行は折り返さない＝常に2行に収める */
  .hero h1{font-size:clamp(1.15rem,5.4vw,1.5rem);line-height:1.6;white-space:nowrap;word-break:normal;overflow-wrap:normal}
  .hero h1 .br-pc{display:none}
  .worry-list{grid-template-columns:1fr 1fr;gap:12px}
  .worry-card{padding:18px 12px}
  .worry-card p{font-size:.82rem}
  /* SP：取扱業務・解決実績は2件のみ表示。「さらに見る」で残りを表示 */
  #service-grid .sp-more,#case-grid .sp-more{display:none}
  #service-grid.is-expanded .sp-more,#case-grid.is-expanded .sp-more{display:block}
  .sp-more-btn{display:inline-flex}
  .pc-only-btn{display:none}
  .page-hero h1{font-size:1.7rem}
  /* 【2026-09-08・クライアントのご指摘】料金表がスマホで崩れていた。
     原因は ①項目名の列が `width:34%` 固定で極端に細くなり2〜3文字ずつ縦に折り返す
            ②金額の列が `white-space:nowrap` のため長い値が表からはみ出して画面外で切れる
     → スマホでは**縦積み（1項目＝項目名の下に金額）**に変更して両方を解消する。
     ※この表は**料金ページと取扱業務の個別ページ（相続税申告）で共用**しているため、両方に効く。
     ※`display:block` にすると角丸が効かなくなるので、角丸は `tbody tr` 側では付けない。 */
  .fee-table{display:block;box-shadow:none;border-radius:0;background:transparent}
  .fee-table thead{display:none}                    /* 見出し行は縦積みでは意味がないため隠す */
  .fee-table tbody{display:block}
  .fee-table tbody tr{
    display:block;margin-bottom:12px;background:#fff;
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  }
  .fee-table tbody tr:last-child{margin-bottom:0}
  /* 項目名：全幅の見出し帯にする（`width:34%` を必ず打ち消すこと） */
  .fee-table tbody th{
    display:block;width:auto;padding:12px 16px;
    background:var(--green-soft);border-bottom:1px solid var(--line);
    font-size:.92rem;line-height:1.6;
  }
  /* 金額：折り返しを許可して、はみ出しをなくす */
  .fee-table tbody td{display:block;padding:14px 16px;border-bottom:0;font-size:.98rem}
  .fee-table td.price{white-space:normal}
  /* 縦積みにすると表の下端が詰まって次の見出しに接するため、下に余白を足す
     （`.fee-h2` は page-fee.php 内、`.service-fee-h4` は取扱業務の個別ページ側） */
  .fee-table+.fee-h2,.fee-table+.service-fee-h4{margin-top:36px}
  .fee-note+.fee-h2,.fee-note+.service-fee-h4{margin-top:36px}

  .contact-form-wrap,.lead-block{padding:24px}
}

/* =========================================================
   ここから下：2026-08-07 トップページ全面刷新で追加したスタイル
   碓井公認会計士事務所サイト（usui-souzoku-theme）の各パーツを
   かわぐちの配色（深緑 × 金茶 × 白・生成り）へ移植したもの。
   クラス名はデザインパーツ由来（.mvp- / .s04- / .s11- / .s03- / .s09-）を維持し、
   色・サイズはこのファイルの CSS 変数だけで調整すること。
   ========================================================= */

:root{
  --muted:#7a776e;          /* 補足テキスト */
  --gray:#f4f6f3;           /* 淡いグレー背景 */
  --gray-2:#e6ece7;
  --radius-lg:16px;
  --shadow-sm:0 4px 14px rgba(20,60,40,.09);
}

/* ---------- 画像（支給写真／差し替え枠） ---------- */
.kz-img{display:block;width:100%;border-radius:var(--radius);object-fit:cover;box-shadow:var(--shadow-sm)}
.kz-img-16x9{aspect-ratio:16/9}
.kz-img-4x3{aspect-ratio:4/3}
.kz-img-3x4{aspect-ratio:3/4}
.kz-img-1x1{aspect-ratio:1/1}
.kz-img-ph{
  width:100%;background:linear-gradient(135deg,var(--cream),var(--cream-2));
  border:1px dashed var(--gold-light);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:var(--gold);text-align:center;padding:14px;
}
.kz-img-ph-16x9{aspect-ratio:16/9}
.kz-img-ph-4x3{aspect-ratio:4/3}
.kz-img-ph-3x4{aspect-ratio:3/4}
.kz-img-ph-label{font-size:.82rem;font-weight:700;line-height:1.7}

/* 見出しの下線（usuiと同じ短いライン）※新セクションのみに付ける */
.sec-head--line .ja{position:relative;padding-bottom:18px}
.sec-head--line .ja::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:48px;height:3px;background:var(--green);border-radius:3px;
}
/* 枠付きEN（RESULTS） */
.sec-head .en--boxed{
  display:inline-block;border:1px solid var(--green-dark);padding:7px 22px;
  letter-spacing:.22em;color:var(--green-dark);margin-bottom:18px;
}
.sec-head .ja em{font-style:normal;color:var(--gold)}
.section-action{text-align:center;margin-top:44px}

/* =========================================================
   ① MV（デザインパーツ section_mv-points-cta を移植）
   3ポイント訴求＋CTA型。背景写真の位置は --mvp-bg-position で調整する。
   ※人物の顔の見え方はCV率に直結するため、変更時はPC・TB・SPの3サイズで目視確認すること。
   ========================================================= */
:root{
  --mvp-min-height:640px;
  /* 【2026-09-02】テキスト欄の最大幅。**代表（河口先生）のお顔に見出しが重ならない要**。
     800px → 620px に絞ることで、キャッチが写真の人物にかからなくなる。広げないこと。 */
  --mvp-body-width:620px;
  /* 【2026-09-02】PCは「右パネル型」＝写真を高さ基準で拡大し右端に寄せる。
     お顔を大きく／小さくしたいときは --mvp-bg-size の 118% を上下させること。
     横位置は --mvp-bg-position（right ○○%）で微調整する。 */
  --mvp-bg-size:auto 118%;
  --mvp-bg-position:right 2% center;
  --mvp-bg-position-sp:60% 16%;      /* TB・SP：縦積みの写真で顔が見える位置 */
  --mvp-bg-size-sp:cover;
  --mvp-sp-bg:var(--white);
  --mvp-sp-photo-h:380px;
  /* 【2026-09-02】右パネル型では写真が画面幅より狭くなり、左側に地の色が残る。
     その継ぎ目を隠すため、ベールの左側は**完全な白（不透明）**にすること（.95 だと縦の筋が見える）。 */
  --mvp-veil-strong:rgba(255,255,255,1);
  --mvp-veil-mid:rgba(255,255,255,.74);
  --mvp-veil-weak:rgba(255,255,255,0);
}
.mvp{position:relative;min-height:var(--mvp-min-height);display:flex;align-items:center;overflow:hidden}
.mvp-bg{position:absolute;inset:0;z-index:0}
.mvp-bg-img{
  position:absolute;inset:0;background-image:url('../img/hero.webp');
  background-size:var(--mvp-bg-size);background-position:var(--mvp-bg-position);background-repeat:no-repeat;
  /* 高さ基準で拡大すると横に余白が出るため、白で埋めて左側のベールと同化させる */
  background-color:var(--white);
}
/* 左側の文字可読性を確保するベール（左が濃く・右へ透明）。
   【2026-09-02】テキスト欄を620pxに絞ったのに合わせ、ベールの抜ける位置も前倒しした
   （＝写真の人物に白がかぶりすぎない）。 */
.mvp-bg-veil{
  position:absolute;inset:0;
  background:linear-gradient(to right,var(--mvp-veil-strong) 0%,var(--mvp-veil-strong) 34%,var(--mvp-veil-mid) 46%,var(--mvp-veil-weak) 60%);
}
.mvp-inner{position:relative;z-index:1;width:100%;min-width:0;max-width:var(--maxw);margin:0 auto;padding:80px 64px}
.mvp-body{width:100%;min-width:0;max-width:var(--mvp-body-width)}
/* 代表写真（TB・SP専用）。PCは背景写真（.mvp-bg-img）が担当するため出さない */
.mvp-photo{display:none}

.mvp-lead{
  display:inline-flex;align-items:center;gap:16px;margin:0 0 24px;
  font-family:var(--sans);font-size:1.25rem;font-weight:700;letter-spacing:.05em;line-height:1.5;color:var(--green-dark);
}
.mvp-lead::before,.mvp-lead::after{content:"";display:block;width:2px;height:28px;background:var(--green-dark);flex-shrink:0}
.mvp-lead::before{transform:rotate(-20deg)}
.mvp-lead::after{transform:rotate(20deg)}
/* 【優馬様のご指示・2026-08-07】リード文の「相続・不動産税務」はアクセント（金茶）にする。
   傍点も同色。ここを変える場合は下の .mvp-heading-em（相続税申告）と色を揃えること。 */
.mvp-lead-dots{color:var(--gold);-webkit-text-emphasis:filled dot var(--gold);text-emphasis:filled dot var(--gold);-webkit-text-emphasis-position:over right;text-emphasis-position:over right}

/* キャッチコピー（MVのみゴシック太字。他の見出しは明朝のまま） */
.mvp-heading{margin:0 0 32px;font-family:var(--sans);font-weight:700;font-size:2.6rem;line-height:1.35;letter-spacing:.05em;color:var(--ink)}
.mvp-heading-line{display:block}
.mvp-heading-name{font-style:normal;color:var(--green-dark)}
.mvp-heading-lg{font-size:3.4rem;line-height:1.3}
/* キャッチコピーの「相続税申告」もアクセント（金茶）。上の .mvp-lead-dots と同色にすること */
.mvp-heading-em{font-style:normal;color:var(--gold)}

/* 3ポイント訴求ボックス
   【2026-09-02・クライアントからの修正依頼】「3つの強みが視覚的に一目で伝わる」ように、
   従来の（番号＋2行のテキスト）から **アイコン → 大きな数値 → 短いラベル** の縦積みカード型へ変更した。
   ・数値（.mvp-point-figure-main）を最も大きく＝深緑、単位は小さく添える
   ・バッジ（当事務所の3つの強み）はテキスト欄を620pxに絞った分、丸から縦長の見出し帯へ変更 */
.mvp-points{
  display:flex;align-items:stretch;gap:0;margin-bottom:16px;
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-strong);overflow:hidden;
}
.mvp-points-badge{
  flex-shrink:0;width:96px;margin:0;border-radius:0;
  background:var(--green-dark);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;
}
.mvp-points-badge-txt{font-family:var(--sans);font-size:.8rem;font-weight:700;line-height:1.7;letter-spacing:.04em}
.mvp-points-list{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;margin:0;padding:18px 8px}
.mvp-point{flex:1 1 0;min-width:0;padding:0 10px;text-align:center;display:flex;flex-direction:column;align-items:center}
.mvp-point+.mvp-point{border-left:1px solid var(--line)}
/* 強みのアイコン（2026-09-07にクライアントのご指摘で刷新）
   ・旧＝細線のアウトラインを淡い金茶の丸に載せる形（軽く見えるとのご指摘）
   ・新＝**國田弁護士サイトと同じ「塗りつぶした円＋白抜き図柄」のバッジ**（kz_badge_icon が出力）
   ※円の色はここの `color` が決める。**SVG側に色をベタ書きしないこと。**
   ※連番（01/02/03）は同日のご指示で廃止したため、`.mvp-point-num` は無い。
     復活させる場合は下の margin-bottom を 10px 程度に戻すこと。 */
.mvp-point-ico{display:block;width:52px;height:52px;margin:0 0 12px;color:var(--gold)}
.mvp-point-ico .badge-icon{display:block;width:100%;height:100%}
.mvp-point-figure{margin:0 0 6px;font-family:var(--sans);line-height:1.1;color:var(--green-dark);white-space:nowrap}
.mvp-point-figure-main{font-style:normal;font-size:2.3rem;font-weight:700;letter-spacing:.01em}
.mvp-point-figure-unit{margin-left:2px;font-size:1.05rem;font-weight:700;letter-spacing:.02em}
.mvp-point-label{margin:0;font-family:var(--sans);font-size:.82rem;font-weight:500;line-height:1.5;letter-spacing:.02em;color:var(--ink-soft)}
.mvp-point-sup{font-size:.62rem;font-weight:400;vertical-align:super;line-height:0}

/* 注釈は写真側へはみ出すと背景に溶けて読めなくなるため、テキスト欄より少し狭く保ち、
   白のにじみ（text-shadow）で可読性を担保する（2026-09-02） */
.mvp-note{max-width:530px;margin:0 0 32px;font-family:var(--sans);font-size:.75rem;line-height:1.8;letter-spacing:.05em;color:var(--muted);text-shadow:0 0 6px #fff,0 0 3px #fff}

.mvp-cta{display:flex;flex-wrap:wrap;gap:16px}
.mvp-btn{
  display:flex;align-items:center;justify-content:center;gap:24px;
  flex:1 1 0;min-width:260px;max-width:480px;min-height:64px;
  padding:16px 32px;border-radius:var(--radius);
  background:var(--gold);color:#fff;font-family:var(--sans);font-size:1.22rem;font-weight:700;letter-spacing:.05em;line-height:1.5;
  box-shadow:0 8px 32px rgba(169,118,46,.3);transition:background .25s,transform .25s,box-shadow .25s;
}
.mvp-btn:hover,.mvp-btn:focus-visible{background:var(--brown);color:#fff;transform:translateY(-2px);box-shadow:0 10px 36px rgba(138,90,43,.36)}
.mvp-btn--outline{background:var(--white);color:var(--green-dark);border:2px solid var(--green);box-shadow:none;gap:12px}
.mvp-btn--outline:hover,.mvp-btn--outline:focus-visible{background:var(--green-soft);color:var(--green-dark);box-shadow:none}
.mvp-btn-arrow{flex-shrink:0;transition:transform .25s}
.mvp-btn:hover .mvp-btn-arrow{transform:translateX(4px)}

/* =========================================================
   ①-2 お知らせ（MV直下の帯・最新1件のみ）
   ---------------------------------------------------------
   【2026-09-07・クライアントのご要望で新設】
   **國田弁護士サイトの `.news-bar` と同じ形式**（配色のみ深緑×金茶へ置換）。
   ・左から「お知らせ」ラベル → 日付 → 見出し の並びを中央に置く
   ・**お知らせが0件でも帯は消さない**（「現在お知らせはございません。」を出す）
   ・SPでは折り返して2段になる
   ========================================================= */
.news-bar{background:var(--cream);border-bottom:1px solid var(--line)}
/* ★2026-10-05 岡本様のご指示：縦幅が窮屈とのご指摘を受け、
   padding 20px→34px・min-height 84px→124px に広げた。**狭めないこと。** */
.news-bar-inner{display:flex;align-items:center;justify-content:center;gap:22px;padding:34px 22px;min-height:124px}
.news-bar-label{
  flex:none;padding:6px 18px;border-radius:4px;
  background:var(--green-dark);color:#fff;
  font-family:var(--serif);font-size:.84rem;font-weight:700;letter-spacing:.1em;
}
.news-bar-date{flex:none;font-family:var(--serif);font-size:.92rem;color:var(--ink-soft);letter-spacing:.04em}
.news-bar-text{margin:0;font-size:1rem;line-height:1.7;color:var(--ink)}
/* 0件のときの定型文 */
.news-bar-text--empty{color:var(--muted)}
/* 見出しは詳細ページへのリンク */
a.news-bar-link{color:var(--ink);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
a.news-bar-link:hover,a.news-bar-link:focus-visible{color:var(--green-dark);border-bottom-color:currentColor}

/* お知らせ詳細ページの見出し（`.page-body h2` の金茶の縦棒を打ち消して横線のみにする） */
.page-body .news-single-title{
  font-family:var(--serif);font-size:1.45rem;color:var(--green-deep);
  margin:.3em 0 1em;padding:0 0 12px;border-left:0;border-bottom:2px solid var(--line);
}

/* =========================================================
   ② こんなお悩みありませんか？（チェックマーク2列＋さらに見る）
   ========================================================= */
.problems-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.problems-item{display:flex;align-items:flex-start;gap:12px;background:var(--gray);border-radius:var(--radius);padding:18px 20px}
.problems-check{color:var(--green);display:flex;margin-top:2px;flex:none}
.problems-text{font-weight:500;color:var(--ink)}
.problems-lead{text-align:center;margin-top:34px;font-size:1rem;color:var(--ink-soft)}
/* 【優馬様のご指示・2026-08-07】お悩みの表示件数は画面幅で変える。
   ・PC（1025px以上）  … 6項目すべてを最初から表示し、「さらに見る」ボタンは出さない
   ・タブレット/スマホ … 先頭3項目のみ表示し、「さらに見る」で残り3項目を開く（下の @media 1024px 側で制御）
   ※ここは基本＝PCの指定。件数を変える場合は kz_problems() と front-page.php の `$i >= 3` も合わせること。 */
.more-toggle-wrap{display:none;text-align:center;margin-top:20px}
.more-toggle{
  display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--brown);
  border:1px solid var(--gold);border-radius:999px;padding:11px 28px;
  font-size:.94rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s,color .2s;
}
.more-toggle::after{content:"▾";font-size:.7rem}
.more-toggle.is-active::after{content:"▴"}
.more-toggle:hover{background:var(--gold);color:#fff}

/* =========================================================
   ②-2 シミュレーション導線（帯バナー）
   【2026-09-02・クライアントからの修正依頼】
   「課題提起 → シミュレーションツール」への導線。②お悩みの直後に置く。
   ・深緑の帯＋左に文章／右にボタンの2カラム（TB・SP は縦積み）
   ・配色はテーマの深緑×金茶のまま。**新しい色を足さないこと。**
   ========================================================= */
.simband{background:var(--green-deep);color:#eef3ee;padding:56px 0}
.simband-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px}
.simband-tag{
  display:inline-block;margin:0 0 14px;padding:5px 16px;border:1px solid rgba(255,255,255,.5);
  font-family:var(--serif);font-size:.78rem;letter-spacing:.14em;color:#fff;
}
.simband-title{margin:0 0 14px;font-family:var(--serif);font-size:1.85rem;font-weight:600;line-height:1.5;letter-spacing:.03em;color:#fff}
.simband-title em{font-style:normal;color:var(--gold-bright)}
.simband-lead{margin:0;font-size:.94rem;line-height:1.9;color:#d8e2d9}
.simband-action{display:flex;flex-direction:column;align-items:stretch;gap:10px;flex-shrink:0}
.simband-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-width:300px;min-height:64px;padding:16px 30px;border-radius:var(--radius);
  background:var(--gold);color:#fff;font-family:var(--sans);font-size:1.06rem;font-weight:700;letter-spacing:.04em;line-height:1.4;
  box-shadow:0 8px 32px rgba(0,0,0,.28);transition:background .25s,transform .25s;
}
.simband-btn:hover,.simband-btn:focus-visible{background:var(--gold-strong);color:#fff;transform:translateY(-2px)}
.simband-btn .icon{flex:none;transition:transform .25s}
.simband-btn:hover .icon{transform:translateX(4px)}
.simband-note{margin:0;font-size:.72rem;line-height:1.7;color:#b9c7ba;text-align:center}

/* =========================================================
   ③ 選ばれる理由（デザインパーツ section_2col-text-image を移植）
   番号見出し＋本文＋写真の2カラム。PCは左右交互、SPは常に「文章→写真」。
   ========================================================= */
.features-2col{margin-top:8px}
.s04{background:transparent;padding:52px 0}
.s04+.s04{border-top:1px solid var(--line)}
.s04-container{max-width:1080px;margin:0 auto;padding:0 24px}
/* ★2026-10-05 岡本様のご指示：写真に対して字数が少なく、写真だけが縦に伸びて
   間延びしていた（実測：文章276px に対し写真329〜403px）。
   `align-items:stretch` で**写真の高さを文章の高さに合わせる**ようにした。
   ※`center` に戻すと写真が元の比率（4:3）まで伸びて再び不揃いになる。**戻さないこと。**
   ※SP（1カラム）は下の @media で従来どおり 4:3 に戻している。 */
.s04-inner{display:grid;grid-template-columns:55fr 45fr;gap:56px;align-items:stretch}
.s04-inner.s04-reverse .s04-img-wrap{order:-1}
.s04-text{min-width:0}
.s04-num{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;line-height:1}
.s04-num-label{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--gold);letter-spacing:.05em}
.s04-num-value{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:3.75rem;line-height:.85;color:var(--green-dark)}
.s04-title{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--green-deep);line-height:1.55;letter-spacing:.02em;margin:0 0 18px;white-space:pre-line}
.s04-body-text{font-size:.97rem;color:var(--ink-soft);line-height:1.95}
.s04-body-text p{margin:0}
.s04-img-wrap{width:100%;min-width:0;display:flex}
/* 文章の高さいっぱいに写真を収める。比率指定（.kz-img-4x3）を打ち消すため aspect-ratio:auto が必要 */
.s04-img-wrap .kz-img{box-shadow:var(--shadow-strong);height:100%;aspect-ratio:auto;object-fit:cover}
.s04-img-wrap .kz-img-ph{height:100%;aspect-ratio:auto}

/* =========================================================
   ④ 取扱業務（デザインパーツ section_services-tabs を移植）
   上部タブ＋パネル切替型。切替の動作は main.js が担当。
   ※画面幅いっぱいに見せるため .wrap の外に置く前提（角丸・影なし）
   ========================================================= */
/* 【2026-09-08・クライアントのご指摘】取扱業務セクションの下に、うす茶色（生成り）の
   いらない帯が出ていた。原因は **タブのパネル（.s11）を画面幅いっぱいに見せるため
   `.wrap` の外に出しているのに、セクション（.section＝上下88px）の下余白がそのまま
   背景色（.section--cream）として残っていた**こと。
   → 下余白だけを 0 にして、パネルを次のセクションへぴったり接させる。
   ※上余白（88px）と背景色はそのまま。**`.section` 自体の余白を変えると全セクションに波及するので触らないこと。**

   【2026-09-08（第2弾）】下余白を消した結果、**白いタブパネルと次の「選ばれる3つの強み」（白）が
   直接接して境目が見えなくなった**ため、深緑4pxの境界線を追加した。
   **`padding-bottom:0` と `border-bottom` はセットで扱うこと**（片方だけ消すと境目が消える／帯が復活する）。 */
.section-services{padding-bottom:0;border-bottom:4px solid var(--green)}
/* ★2026-10-01：ヘッダーを3段構成にし、さらにロゴ・リード文を拡大したため
   **実測237px**（1600px以上。1440px時235px／1280px時219px）になった。
   アンカー遷移時に見出しが隠れないよう 100px→250px へ広げている。
   ヘッダーは sticky で全段が残るため、**段構成・ロゴ高さを変えたら必ず実測して見直すこと。**
   ※1023px以下はヘッダーが2段目だけ（実測83〜88px）になるため、下の @media で 100px に戻している。 */
.s11{background:#fff;overflow:hidden;scroll-margin-top:250px}
.s11-tabs{display:flex;flex-wrap:nowrap;width:100%}
.s11-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:18px 12px;background:var(--muted);color:#fff;border:none;border-right:1px solid rgba(255,255,255,.3);
  cursor:pointer;position:relative;transition:background .2s;text-align:center;font-family:inherit;
}
.s11-tab:last-child{border-right:none}
.s11-tab:hover:not(.is-active){background:#8d8a80}
.s11-tab.is-active{background:var(--green-dark)}
.s11-tab.is-active::after{
  content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:10px solid var(--green-dark);z-index:2;
}
.s11-tab-ja{font-family:var(--serif);font-size:1rem;font-weight:600;letter-spacing:.08em;line-height:1.3}
.s11-tab-en{font-size:.68rem;letter-spacing:.1em;opacity:.85}

.s11-panels{position:relative}
.s11-panel{display:none}
.s11-panel.is-active{display:block}
.s11-panel-inner{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;min-height:520px}
.s11-panel-hdr{grid-column:2;grid-row:1;padding:56px clamp(32px,4.5vw,88px) 22px;display:flex;flex-direction:column;justify-content:flex-end}
.s11-panel-img{grid-column:1;grid-row:1/3;overflow:hidden}
.s11-panel-img .kz-img,.s11-panel-img img,.s11-panel-img .kz-img-ph{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;border-radius:0;box-shadow:none;
}
.s11-panel-body{grid-column:2;grid-row:2;padding:0 clamp(32px,4.5vw,88px) 56px;display:flex;flex-direction:column}
.s11-heading-wrap{display:flex;align-items:center;gap:12px;margin-bottom:16px}
/* 業務名の左は、ロゴの雪の結晶モチーフに合わせた金茶の菱形マークで全業務を統一 */
.s11-mark{flex:none;width:22px;height:22px;background:var(--gold);transform:rotate(45deg);border-radius:3px}
.s11-heading{font-family:var(--serif);font-size:1.55rem;font-weight:700;color:var(--green-deep);letter-spacing:.04em;line-height:1.35;margin:0}
.s11-rule{border:none;border-top:1px solid var(--line);margin:0}
.s11-text{font-size:.97rem;line-height:2;color:var(--ink-soft);margin:24px 0 18px}
.s11-price{font-family:var(--serif);color:var(--green-dark);font-weight:700;font-size:1.1rem;border-top:1px dashed var(--line);padding-top:14px;margin-bottom:24px}
.s11-price small{font-weight:400;color:var(--ink-soft);font-size:.8rem}
.s11-more{display:flex;align-items:center;gap:16px;margin-top:auto}
.s11-more:hover .s11-more-btn{transform:scale(1.08)}
.s11-more-text{flex:none;font-size:.9rem;font-weight:700;color:var(--brown);letter-spacing:.06em;white-space:nowrap}
.s11-more-line{flex:1;height:1px;background:var(--line)}
.s11-more-btn{flex:none;width:44px;height:44px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s}

/* =========================================================
   ⑥ ご相談の流れ（デザインパーツ section_timeline-flow を移植：横線＋円ノード型）
   ※接続ラインの left/right は「100%÷ステップ数÷2」＝4ステップで12.5%。
     kz_flow() のステップ数を変えたらこの値も必ず合わせること（3→16.7% / 5→10%）。
   ========================================================= */
.flow-lead{text-align:center;font-size:1rem;color:var(--ink-soft);margin:-12px 0 52px}
.flow-lead strong{color:var(--green-dark);font-weight:700}
.s03-timeline-wrap{position:relative}
.s03-steps{display:flex;position:relative;align-items:flex-start;list-style:none;margin:0;padding:0} /* olの既定の左余白40pxを消す（残すと縦線と丸がずれる） */
.s03-steps::before{content:"";position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:var(--green-dark);z-index:0}
.s03-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px}
.s03-node{
  flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--green-dark);background:#fff;color:var(--green-dark);
  font-family:var(--serif);font-size:1.25rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;margin-bottom:24px;
}
.s03-step--accent .s03-node{background:var(--green-dark);color:#fff}
.s03-step-body{width:100%}
.s03-step-title{font-family:var(--serif);font-size:1.18rem;color:var(--green-deep);line-height:1.5;margin-bottom:14px}
.s03-step--accent .s03-step-title{color:var(--gold)}
.s03-step-desc{font-size:.94rem;color:var(--ink-soft);line-height:1.9}

/* =========================================================
   ⑤ 解決実績（デザインパーツ section_case-before-after を移植）
   3カラム構成：左＝依頼者／中＝棒グラフ or 状態変化図／右＝ご相談時→ご依頼後

   【重要】中央の表現は2種類ある（kz_case_studies() の 'mode' で切替）
     mode='chart' … 数値が提供されている事例のみ。棒グラフ（.cchart-*）
     mode='flow'  … 数値が未提供の事例。状態変化図（.cflow-*）
   数値のない事例に棒グラフを使わないこと（金額の捏造になるため）。
   ========================================================= */
:root{
  --s09-icon-bg:var(--green-soft);
  --s09-label-before:#9a9384;
  --s09-arrow:var(--gold);
}
.s09-cards{display:flex;flex-direction:column;gap:26px}
.s09-card{
  display:grid;grid-template-columns:.86fr 1.35fr 1.15fr;align-items:center;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
/* ---- 左：依頼者情報 ---- */
.s09-person{
  position:relative;text-align:center;padding:34px 26px;border-right:1px solid var(--line);
  align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.s09-person::after{
  content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  border-style:solid;border-width:8px 0 8px 10px;border-color:transparent transparent transparent var(--s09-arrow);
}
.s09-person-icon{width:84px;height:84px;border-radius:50%;background:var(--s09-icon-bg);color:var(--green-dark);display:grid;place-items:center;margin-bottom:18px}
.s09-person-icon svg{width:42px;height:42px}
.s09-person-headline{font-family:var(--serif);font-weight:700;font-size:1.08rem;line-height:1.6;color:var(--green-deep);white-space:pre-line;margin:0}
.s09-person-attr{margin:10px 0 0;font-size:.78rem;color:var(--muted);line-height:1.7}

/* ---- 中央（共通の枠） ---- */
.s09-chart{padding:30px 22px;border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.cchart{width:100%;background:linear-gradient(180deg,#fdfcf8 0%,var(--cream) 100%);border-radius:var(--radius);padding:22px 20px 18px}
.cchart-plot{display:flex;align-items:center;gap:10px}
/* 吹き出しバッジ */
.cchart-badge{
  position:relative;flex:none;width:104px;height:104px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold) 0%,var(--brown) 100%);color:#fff;
  display:grid;place-content:center;text-align:center;line-height:1.25;margin:0;
  box-shadow:0 6px 16px rgba(169,118,46,.3);
}
/* 吹き出しのしっぽ。
   【2026-09-14 修正】以前は右下（top:62%・right:-8px）に置いていたため、円の縁から浮いて
   「丸に三角を貼り付けた」形に見えていた（優馬様のご指摘）。**鈴木サイトと同じ直し方**で、
   **円の右端の中央（top:50%）に置き、付け根を円へ食い込ませて**一体の吹き出しにしている。
   ※`right` を 0 以上にすると再び浮くので、必ず負の値（円に重ねる）にすること。
   ※色は円のグラデーションの右端＝var(--brown) に合わせる。
   ※スマホ（768px以下）は下向きの三角に切り替わる指定が別にあるため、ここはPC・タブレット用。 */
.cchart-badge::after{
  content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);
  border-style:solid;border-width:9px 0 9px 16px;
  border-color:transparent transparent transparent var(--brown);
}
/* 【2026-09-07】実額を入れたことで「約1,000万円」など文字数が増えたため、
   円の中で折り返さないよう **1行に収める**指定にした（はみ出す分だけ自動で縮む）。
   ※`white-space:nowrap` を外すと「円」だけが次行に落ちて不格好になる。 */
.cchart-badge-main{
  display:block;font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;
  white-space:nowrap;transform-origin:center;
  /* 円の内寸（104px − 左右の余白）に収める */
  max-width:92px;overflow:visible;
}
/* 6文字以上（例：約1,000万円）は一段小さくして1行に収める */
.cchart-badge-main{font-size:clamp(.9rem,1.05rem,1.2rem)}
.cchart-badge-sub{display:block;font-size:.8rem;font-weight:700;margin-top:2px}
/* 棒グラフ本体 */
.cchart-graph{flex:1;min-width:0}
.cchart-bars{position:relative;display:flex;align-items:flex-end;height:168px;border-bottom:2px solid #d3cbb8;color:var(--s09-label-before)}
/* height:% を効かせるため、バー枠にも明示的な高さを持たせる（親が auto だと％が解決されない） */
.cchart-bar{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
.cchart-col{position:relative;width:78%;max-width:92px;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:3px 3px 0 0}
.cchart-col--before{background:linear-gradient(180deg,#c5bda9 0%,#a89e88 100%)}
.cchart-col--after{background:linear-gradient(180deg,var(--green) 0%,var(--green-deep) 100%)}
.cchart-amount{font-family:var(--serif);font-weight:700;font-size:1rem;color:#fff;line-height:1.25;text-align:center;letter-spacing:-.03em;padding:0 2px}
.cchart-amount small{font-size:.7rem;font-weight:700;white-space:nowrap}
/* バー上端どうしを結ぶ点線（上下の位置と高さはPHP側で算出）
   【2026-09-14 修正・優馬様のご指示】以前は `left:25%;width:50%`＝**バーの中心から中心**まで
   引いていたため、線がバーの上に乗り上げてはみ出していた。
   → **前のバーの「右上の角」から、後のバーの「左上の角」まで**になるよう、
     バーの実寸に合わせて左右を詰める。

   計算の根拠：
     ・`.cchart-bar` は flex:1 なので**それぞれ全体の50%幅**。その中心は 25% と 75%。
     ・`.cchart-col`（実際の棒）は枠の `width:78%` かつ `max-width:92px` の**可変幅**。
       → 棒の半幅 ＝ min(50%×78%÷2, 92px÷2) ＝ **min(19.5%, 46px)**
     ・したがって 左端＝25%＋半幅、幅＝50%−半幅×2（＝50%−min(39%,92px)）。
   **`.cchart-col` の width / max-width を変えたら、この式も必ず合わせること。**
   ※上下（top/height）はPHPが棒の上端どうしに合わせているため、ここでは触らない。 */
.cchart-link{
  position:absolute;
  left:calc(25% + min(19.5%, 46px));
  width:calc(50% - min(39%, 92px));
  min-height:1px;overflow:visible;
}
.cchart-labels{display:flex;margin-top:9px}
.cchart-labels span{flex:1;text-align:center;font-size:.76rem;color:var(--ink-soft);font-weight:500;line-height:1.5;white-space:pre-line}
.cchart-note{
  margin:14px 0 0;border:1px solid #e2cba8;border-radius:4px;background:#fffaf3;padding:8px 10px;
  text-align:center;font-size:.82rem;color:#7d5417;font-weight:500;
}
.cchart-note b{font-family:var(--serif);font-size:1.06rem;color:var(--brown);margin:0 2px}

/* ---- 中央：状態変化図（数値が未提供の事例用） ---- */
.cflow{width:100%;background:linear-gradient(180deg,#fdfcf8 0%,var(--cream) 100%);border-radius:var(--radius);padding:22px 20px 18px}
.cflow-plot{display:flex;align-items:center;gap:14px}
.cflow-badge{
  position:relative;flex:none;width:104px;height:104px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold) 0%,var(--brown) 100%);color:#fff;
  display:grid;place-content:center;text-align:center;line-height:1.25;margin:0;
  box-shadow:0 6px 16px rgba(169,118,46,.3);
}
/* 状態変化図のバッジも、棒グラフのバッジ（.cchart-badge::after）と同じ形に揃えること。
   片方だけ直すとRESULT内で吹き出しの形が食い違う（2026-09-14 修正）。 */
.cflow-badge::after{
  content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);
  border-style:solid;border-width:9px 0 9px 16px;
  border-color:transparent transparent transparent var(--brown);
}
.cflow-badge-main{display:block;font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:-.01em}
.cflow-badge-sub{display:block;font-size:.76rem;font-weight:700;margin-top:2px}
.cflow-steps{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.cflow-step{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 14px;
  font-size:.84rem;line-height:1.6;color:var(--ink);text-align:center;
}
.cflow-step:last-child{border-color:var(--green);background:var(--green-soft);color:var(--green-deep);font-weight:700}
.cflow-arrow{display:block;text-align:center;color:var(--gold);font-size:.78rem;line-height:1;margin:5px 0}
.cflow-note{
  margin:14px 0 0;border:1px solid #e2cba8;border-radius:4px;background:#fffaf3;padding:8px 10px;
  text-align:center;font-size:.82rem;color:#7d5417;font-weight:500;
}
.cflow-note b{font-family:var(--serif);font-size:1.06rem;color:var(--brown);margin:0 2px}

/* ---- 右：ご相談時 → ご依頼後 ---- */
.s09-detail{padding:30px 28px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.s09-detail-label{font-size:.8rem;font-weight:700;margin:0 0 6px}
.s09-detail-label--before{color:var(--s09-label-before)}
.s09-detail-label--after{color:var(--green)}
.s09-detail-text{font-size:.9rem;line-height:1.85;color:var(--ink);margin:0}
.s09-detail-text strong{font-weight:700;background:linear-gradient(transparent 62%,#f3e2c2 62%)}
.s09-detail-arrow{text-align:center;color:var(--s09-arrow);font-size:.95rem;margin:12px 0 14px;line-height:1}

/* 注記（実際の事例をもとにしている旨）※削除しないこと */
.cases-disclaimer{margin-top:18px;font-size:.78rem;color:var(--muted);text-align:center;line-height:1.8}

/* =========================================================
   ⑦ お客様の声（写真＋タグバッジ型カード／カルーセル）
   ※写真は「相談風景のイメージ」であり、お客様ご本人の写真ではない（alt で明示）
   ※★評価は使わない（2026-08-07 廃止）
   ========================================================= */
.voices-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.voice-card{
  height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s,box-shadow .25s;
}
.voice-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* 写真の高さは padding-top で固定（16:10）。画像ごとの実寸に左右されないようにする */
.voice-photo{position:relative;flex:none;width:100%;padding-top:62.5%;overflow:hidden;background:var(--cream)}
.voice-photo .kz-img,.voice-photo img,.voice-photo .kz-img-ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;aspect-ratio:auto;
}
.voice-body{flex:1;display:flex;flex-direction:column;padding:24px}
.voice-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.voice-tag{padding:4px 12px;border-radius:var(--radius);background:var(--green-dark);color:#fff;font-size:.75rem;font-weight:700;line-height:1.6}
.voice-text{flex:1;color:var(--ink);font-size:1rem;font-weight:700;line-height:1.9;margin:0}
.voice-meta{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;font-weight:400}

/* カルーセル（PC3枚／TB2枚／SP1枚・自動再生なし） */
.voice-carousel{position:relative}
.voice-window{overflow:hidden}
.voice-track{display:flex;gap:24px;margin:0;padding:0;transition:transform .25s ease}
.voice-item{flex:0 0 calc((100% - 48px) / 3)}
.voice-nav{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:40px}
.voice-arrow{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--muted);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.voice-arrow:hover:not(:disabled){background:var(--green);border-color:var(--green);color:#fff}
.voice-arrow:disabled{opacity:.4;cursor:not-allowed}
.voice-dots{display:flex;align-items:center;gap:8px}
.voice-dot{position:relative;width:40px;height:44px;padding:0;background:none;border:none;cursor:pointer}
.voice-dot::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;border-radius:2px;background:var(--line);transition:background .25s}
.voice-dot[aria-current="true"]::after{background:var(--gold)}

/* =========================================================
   ⑧ 末尾CTA（全ページ共通）
   背景は上＝深いフォレストグリーン／下＝やや明るい深緑の2トーン。白カードが境目にまたがる。
   ※背景色はこの2変数のみで調整すること。
   ========================================================= */
:root{
  --cta-green-top:#123a22;
  --cta-green-bottom:#1b5031;
}
.cta-section{
  position:relative;overflow:hidden;padding:92px 0 0;color:#fff;
  background:linear-gradient(to bottom,var(--cta-green-top) 0%,var(--cta-green-top) 62%,var(--cta-green-bottom) 62%,var(--cta-green-bottom) 100%);
}
.cta-section::after{content:"";display:block;height:92px}
.cta-inner{text-align:center;position:relative}
.cta-section .cta-title{font-family:var(--serif);font-size:2.75rem;line-height:1.45;margin:0 0 30px;color:#fff;font-weight:600}
.cta-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 30px}
.cta-badges li{background:#fff;color:var(--green-dark);padding:6px 26px;font-size:1.18rem;font-weight:700;line-height:1.6}
.cta-section .cta-text{font-size:1.18rem;font-weight:700;color:#fff;margin:0 0 10px}
.cta-section .cta-note{font-size:.86rem;color:#cadbcd;margin:0 0 46px}
/* 白カード（角丸なし・左右の余白を広く） */
.cta-card{position:relative;background:#fff;color:var(--ink);border-radius:0;padding:44px 92px;max-width:1040px;margin:0 auto;box-shadow:var(--shadow-strong)}
/* 右上の金茶ラベル（右端はカード内側の余白位置＝92pxに揃える）
   ※カードの左右paddingを変えたら、この right も必ず同じ値に合わせること */
.cta-card-tag{
  position:absolute;right:92px;top:-6px;display:inline-block;
  background:var(--gold);color:#fff;padding:3px 20px;border-radius:0;font-weight:700;font-size:.86rem;line-height:1.3;
}
/* 3ステップ（無彩色グレーの帯・角丸なし） */
.cta-flow{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;background:#f3f3f3;border-radius:0;padding:14px 24px;margin:0 0 42px}
.cta-flow-step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:150px}
.cta-flow-no{font-family:var(--serif);font-style:italic;font-weight:700;font-size:1.35rem;color:var(--cta-green-bottom);line-height:1.2}
.cta-flow-txt{font-size:1rem;font-weight:500;color:var(--ink);line-height:1.4}
.cta-flow-arrow{display:flex;align-items:center;color:var(--muted)}
/* 電話番号とフォームボタン */
.cta-section .cta-actions{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;align-items:center}
.cta-tel{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink)}
.cta-tel-row{display:flex;align-items:center;gap:12px}
.cta-tel-ico{display:flex;color:var(--ink)}
.cta-tel-num{font-family:var(--serif);font-size:2.9rem;font-weight:700;letter-spacing:.1em;line-height:1.1;color:var(--ink)}
.cta-tel-note{font-size:.94rem;color:var(--ink-soft);text-align:center}
.cta-form-btn{
  /* 2026-10-19 岡本様のご指示：PC幅で「お問い合わせフォームはこ／ちら」と2行に割れていたため、全幅で1行に固定 */
  flex:1;min-width:320px;max-width:480px;display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;
  background:var(--gold);color:#fff;border-radius:0;padding:26px 30px;font-size:1.22rem;font-weight:700;box-shadow:none;transition:background .2s;
}
.cta-form-btn:hover{background:var(--brown);color:#fff}
.cta-form-btn-arrow{margin-left:auto;font-size:1.2rem}

/* =========================================================
   相続税シミュレーション（page-simulation.php）
   ---------------------------------------------------------
   2026-08-07：自作シミュレーターを廃止し、プロコネのウィジェットへ差し替えた。
   計算フォーム（旧 .calc-* 系）は全て削除済み。**ここに計算用のスタイルを戻さないこと。**
   残しているのは「タブ（.sim-tab*）」「説明文（.sim-note）」「ウィジェット枠（.sim-widget）」の3つ。
   ========================================================= */
/* タブの中身＝そのシミュレーションを行う意味の説明 */
.sim-note{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:36px 40px}
.sim-note-title{font-family:var(--serif);font-size:1.32rem;color:var(--green-deep);margin:0 0 16px;padding:0 0 12px;border-left:0;border-bottom:2px solid var(--line)}
.sim-note-text{color:var(--ink-soft);line-height:2;margin:0}
.sim-note-text+.sim-note-text{margin-top:16px}
.sim-note-text strong{color:var(--green-deep);font-weight:700}

/* プロコネのウィジェットを置く枠（ウィジェット自体のデザインはプロコネ側が持つ） */
.sim-widget{margin-top:40px}
/* 【2026-10-01】パネルの中は **シミュレーター → 説明文** の順。
   ★説明文（.sim-note）の下に戻さないこと。 */
.sim-panel .sim-widget{margin-top:0;margin-bottom:28px}

/* シミュレーターのタブ切替 */
.sim-tablist{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
.sim-tab{
  display:flex;flex-direction:column;gap:6px;padding:20px 24px;text-align:left;cursor:pointer;
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);font-family:inherit;color:var(--ink-soft);
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.sim-tab:hover{border-color:var(--green)}
.sim-tab.is-active{background:var(--green-dark);border-color:var(--green-dark);color:#fff;box-shadow:var(--shadow-sm)}
.sim-tab-title{font-family:var(--serif);font-size:1.18rem;font-weight:700;color:var(--green-deep);line-height:1.5}
.sim-tab.is-active .sim-tab-title{color:#fff}
.sim-tab-text{font-size:.8rem;line-height:1.7}
.sim-tab.is-active .sim-tab-text{color:#dbe8de}
.sim-panel[hidden]{display:none}

/* =========================================================
   レスポンシブ（追加分）
   ========================================================= */
/* MV（中間幅 1025〜1400px）
   【2026-09-02】右パネル型の写真は「高さ基準」で拡大するため、画面が狭いほど
   横方向に占める割合が大きくなり、注釈やキャッチが人物に重なりやすい。
   この帯（1025〜1400px）だけテキスト欄を細くし、白ベールの抜ける位置を右へずらして重なりを防ぐ。
   ※ここを消すと1100〜1400pxで注釈の末尾が写真に溶けて読めなくなる。 */
@media(min-width:1025px) and (max-width:1400px){
  .mvp-body{max-width:560px}
  .mvp-bg-veil{background:linear-gradient(to right,var(--mvp-veil-strong) 0%,var(--mvp-veil-strong) 44%,var(--mvp-veil-mid) 56%,var(--mvp-veil-weak) 70%)}
  .mvp-heading{font-size:2.3rem}
  .mvp-heading-lg{font-size:3rem}
  .mvp-note{max-width:470px}
  .mvp-point-figure-main{font-size:2.05rem}
  .mvp-point-label{font-size:.76rem}
  /* テキスト欄が560pxになる分、ボタンの余白と矢印を詰めて文言が2行に折り返さないようにする */
  .mvp-btn{min-width:0;gap:14px;padding:16px 22px;font-size:1.12rem}
  .mvp-btn-arrow{width:38px}
}
@media(max-width:1024px){
  /* 【2026-09-02・クライアントからの修正依頼】MV（TB・SP）は**縦積み**に変更した。
     ＝キャッチ → 代表写真 → 3つの強み → 注釈 → 電話ボタン。
     横並びのままだと画面が狭く、代表のお顔に文字やボックスが必ず重なるため。
     PCの背景写真は使わず、本文中の `.mvp-photo`（img）が写真を担当する。 */
  .mvp{min-height:auto;align-items:flex-start;background-color:var(--mvp-sp-bg)}
  .mvp-bg{display:none}
  .mvp-inner{padding:0}
  .mvp-body{max-width:none;padding:40px 40px 0;text-align:center}
  .mvp-lead{font-size:1.06rem}
  .mvp-heading{font-size:2.1rem;margin-bottom:24px}
  .mvp-heading-lg{font-size:2.75rem}
  /* 代表のお顔写真。左右いっぱいに広げ、顔の位置は --mvp-bg-position-sp で調整する */
  .mvp-photo{display:block;margin:0 -40px;height:var(--mvp-sp-photo-h);overflow:hidden}
  .mvp-photo img{width:100%;height:100%;object-fit:var(--mvp-bg-size-sp);object-position:var(--mvp-bg-position-sp)}
  /* 縦積みでは横幅を活かしたいので、丸バッジ（当事務所の3つの強み）は出さずカードだけを見せる */
  .mvp-points{margin:0 -40px 0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
  .mvp-points-badge{display:none}
  .mvp-points-list{padding:20px 6px}
  .mvp-point{padding:0 8px}
  .mvp-point-ico{width:46px;height:46px;margin-bottom:10px}
  .mvp-point-figure-main{font-size:2rem}
  .mvp-point-figure-unit{font-size:.96rem}
  .mvp-point-label{font-size:.78rem}
  /* 【2026-09-08・クライアントのご要望】タブレット・スマホでは MV の注釈
     「※1 ご相談・ご依頼から申告まで…」を**表示しない**。
     ※注釈を消すと「※1」のマークだけが宙に浮くため、**マーク（.mvp-point-sup）も必ず一緒に消すこと。**
     ※PC（1025px以上）では従来どおり両方とも表示する。 */
  .mvp-note{display:none}
  .mvp-point-sup{display:none}
  .mvp-cta{padding-bottom:40px;justify-content:center}
  .mvp-btn{font-size:1.06rem;min-width:200px;gap:12px;padding:16px 20px}
  .mvp-btn-arrow{width:32px}
  /* 【優馬様のご指示・2026-08-07】タブレット・スマホでは MVの予約ボタンを出さない。
     （SPは画面下部の固定CTAバー、TBは電話ボタンで受け止める）
     ※2026-09-02：ボタンの文言は「無料相談を予約する」→「相談を予約する」に変更済み。 */
  .mvp-cta .mvp-btn:not(.mvp-btn--outline){display:none}
  /* シミュレーション導線の帯：縦積みにしてボタンを全幅に */
  .simband{padding:48px 0}
  .simband-inner{grid-template-columns:1fr;gap:28px}
  .simband-title{font-size:1.6rem}
  .simband-btn{width:100%;min-width:0}
  /* 取扱業務タブ */
  .s11-tab{padding:14px 8px}
  .s11-tab-ja{font-size:.88rem}
  .s11-tab-en{font-size:.62rem}
  .s11-panel-inner{min-height:380px}
  .s11-panel-hdr{padding:34px 28px 16px}
  .s11-panel-body{padding:0 28px 34px}
  .s11-heading{font-size:1.3rem}
  .s11-text{font-size:.94rem;margin:20px 0 16px}
  /* 選ばれる理由 */
  .s04{padding:40px 0}
  .s04-inner{grid-template-columns:1fr;gap:24px;align-items:center}
  .s04-inner.s04-reverse .s04-img-wrap{order:0}  /* SPは全項目「文章が上・写真が下」に統一 */
  /* SPは1カラムなので高さを合わせる相手がいない。元の比率（4:3）に戻す */
  .s04-img-wrap .kz-img{height:auto;aspect-ratio:4/3}
  .s04-img-wrap .kz-img-ph{height:auto;aspect-ratio:4/3}
  .s04-num-value{font-size:3.1rem}
  .s04-title{font-size:1.25rem}
  /* 流れ */
  .s03-step{padding:0 10px}
  /* 【2026-10-15】藤澤サイトと同じく、ラインの右端に進行方向の三角を付ける（PC未満のみ） */
  .s03-steps::after{
    content:"";position:absolute;top:calc(28px - 6.5px);right:calc(12.5% - 10px);width:0;height:0;
    border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;border-left:10px solid var(--green-dark);z-index:1;
  }
  .s03-step-title{font-size:1.06rem}
  .s03-step-desc{font-size:.88rem}
  /* 解決実績 */
  .s09-card{grid-template-columns:.9fr 1.1fr}
  .s09-person{border-bottom:1px solid var(--line)}
  .s09-chart{border-right:0;border-bottom:1px solid var(--line)}
  .s09-detail{grid-column:1/-1;padding:26px 28px}
  /* お客様の声（TB：2枚表示） */
  .voice-item{flex:0 0 calc((100% - 24px) / 2)}
  /* 末尾CTA */
  .cta-section .cta-title{font-size:2.25rem}
  .cta-badges li{font-size:1.06rem;padding:3px 20px}
  .cta-section .cta-text{font-size:1.06rem}
  .cta-card{padding:40px 44px}
  .cta-card-tag{right:44px}
  .cta-tel-num{font-size:2.35rem;letter-spacing:.06em}
  .cta-flow-step{min-width:120px}
  /* お悩み：1列にし、4つ目以降は「さらに見る」で開く（PCは6項目すべて表示） */
  .problems-list{grid-template-columns:1fr}
  .problems-list .is-extra{display:none}
  .problems-list.is-open .is-extra{display:flex}
  .more-toggle-wrap{display:block}
}
@media(max-width:768px){
  /* ---- MV（SP）：縦積み（キャッチ → 代表写真 → 3つの強み → 注釈）----
     ※2026-09-02：従来の「テキストの下に写真を敷き、注釈の margin-bottom で写真分の余白を作る」
       重ね方は廃止した（余白の計算がずれると写真が切れるため）。
       いまは本文の並び順そのままに積むだけなので、高さの手計算は不要。
       写真エリアの高さは --mvp-sp-photo-h の1変数で変えられる。 */
  .mvp{--mvp-sp-photo-h:300px}
  .mvp-body{padding:32px 16px 0}
  /* リード文はSPで2行に折り返すと左右の斜線の位置がちぐはぐに見えるため、
     1行に収まるサイズ（.88rem）にしている。文言を長くする場合はここも再調整すること。 */
  .mvp-lead{gap:10px;margin-bottom:14px;font-size:.88rem}
  .mvp-lead::before,.mvp-lead::after{height:22px}
  .mvp-heading{margin-bottom:20px;font-size:1.6rem}
  .mvp-heading-lg{font-size:2.1rem}
  .mvp-photo{margin:0 -16px}
  .mvp-points{margin:0 -16px}
  .mvp-points-list{padding:16px 2px}
  .mvp-point{padding:0 5px}
  .mvp-point-ico{width:38px;height:38px;margin-bottom:8px}
  .mvp-point-figure-main{font-size:1.55rem}
  .mvp-point-figure-unit{font-size:.8rem;margin-left:1px}
  .mvp-point-label{font-size:.68rem;line-height:1.45}
  /* ※`.mvp-note` は 1024px以下で display:none にしたため、SP用の余白指定は不要（2026-09-08 削除） */
  /* SPはMVにボタンを一切出さない（予約・電話とも下部の固定CTAバーに集約）。
     空のボタン欄が残ると無駄な余白になるため、コンテナごと消す。 */
  .mvp-cta{display:none}
  .mvp-btn{max-width:none;min-width:0;gap:16px;font-size:1.06rem}
  .mvp-btn-arrow{width:40px}
  .mvp-btn--outline{display:none}

  /* お知らせの帯（SP）：折り返して2段にする */
  .news-bar-inner{flex-wrap:wrap;gap:8px 14px;padding:24px 16px;min-height:0}
  .news-bar-label{font-size:.76rem;padding:5px 14px}
  .news-bar-date{font-size:.84rem}
  .news-bar-text{width:100%;text-align:center;font-size:.94rem}

  /* シミュレーション導線の帯（SP） */
  .simband{padding:40px 0}
  .simband-title{font-size:1.32rem}
  .simband-lead{font-size:.88rem}
  .simband-btn{min-height:58px;padding:14px 18px;font-size:.98rem;gap:10px}

  /* 取扱業務タブ（3列で折り返し／パネルは 見出し→写真→本文 の縦積み） */
  .s11-tabs{flex-wrap:wrap}
  .s11-tab{flex:1 1 50%;padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.3)}
  .s11-tab-ja{font-size:.82rem;letter-spacing:.04em}
  .s11-tab-en{font-size:.58rem;letter-spacing:.06em}
  .s11-tab.is-active::after{display:none}
  .s11-panel-inner{display:flex;flex-direction:column;min-height:auto}
  .s11-panel-hdr{order:1;padding:26px 20px 14px}
  .s11-panel-img{order:2}
  .s11-panel-img .kz-img,.s11-panel-img img,.s11-panel-img .kz-img-ph{height:auto;aspect-ratio:4/3}
  .s11-panel-body{order:3;padding:22px 20px 30px}
  .s11-heading{font-size:1.18rem}
  .s11-text{font-size:.94rem;line-height:1.9;margin:18px 0 14px}
  .s11-more-text{font-size:.82rem}
  .s11-more-btn{width:40px;height:40px}

  /* 流れ（SP：縦タイムライン／ノード左・本文右） */
  .flow-lead{text-align:left;font-size:.94rem;margin:-6px 0 34px}
  /* 【2026-10-15 岡本様のご指示】藤澤サイトと同じ形式：縦線を丸数字（48px）の中心に通し、下端に▼ */
  .s03-steps{flex-direction:column;padding-left:0}
  .s03-steps::before{top:24px;bottom:24px;left:calc(24px - 1px);right:auto;width:2px;height:auto}
  .s03-steps::after{
    top:auto;right:auto;bottom:calc(24px - 10px);left:calc(24px - 6.5px);
    border-left:6.5px solid transparent;border-right:6.5px solid transparent;border-top:10px solid var(--green-dark);border-bottom:0;
  }
  .s03-step{flex-direction:row;align-items:flex-start;text-align:left;padding:0 0 30px;gap:20px}
  .s03-step:last-child{padding-bottom:0}
  .s03-node{width:48px;height:48px;font-size:1.1rem;margin-bottom:0}
  .s03-step-body{padding-top:4px}
  .s03-step-title{font-size:1.1rem;margin-bottom:8px}

  /* 解決実績（SP：すべて縦積み） */
  .s09-card{grid-template-columns:1fr}
  .s09-person{padding:26px 20px 22px;border-right:0}
  .s09-person::after{right:auto;left:50%;top:auto;bottom:-9px;transform:translateX(-50%);border-width:10px 8px 0 8px;border-color:var(--s09-arrow) transparent transparent transparent}
  .s09-person-icon{width:66px;height:66px;margin-bottom:14px}
  .s09-person-icon svg{width:34px;height:34px}
  .s09-person-headline{font-size:1rem}
  .s09-chart{padding:22px 16px}
  .cchart,.cflow{padding:18px 14px 14px}
  .cchart-plot,.cflow-plot{flex-direction:column;gap:14px}
  .cchart-badge,.cflow-badge{width:92px;height:92px}
  .cchart-badge::after,.cflow-badge::after{right:auto;left:50%;top:auto;bottom:-8px;transform:translateX(-50%);border-width:12px 8px 0 8px;border-color:var(--brown) transparent transparent transparent}
  .cchart-graph,.cflow-steps{width:100%}
  .cchart-bars{height:148px}
  .s09-detail{padding:22px 20px 26px}

  /* お客様の声（SP：カルーセルは1枚表示） */
  .voice-item{flex:0 0 100%}
  .voice-body{padding:20px}
  .voice-text{font-size:.94rem}
  .voice-nav{margin-top:28px;gap:12px}
  /* 【2026-10-19 岡本様のご指示】1枚表示だとバーが件数分（現在6本×40px）並び、＜＞が画面外へ押し出されて見切れていた。
     ＜＞は48pxで固定し、バーの横棒を空き幅に合わせて縮める（件数が増えても＜＞は画面内に残る） */
  .voice-arrow{flex:none}
  .voice-dots{flex:0 1 auto;min-width:0;gap:6px}
  .voice-dot{flex:0 1 28px;width:28px;min-width:10px}
  .voices-grid{grid-template-columns:1fr}

  /* 末尾CTA（SP：見出し・カード・ボタンを画面幅に収める） */
  .cta-section{padding:56px 0 0}
  .cta-section::after{height:56px}
  .cta-section .cta-title{font-size:1.5rem;margin-bottom:20px}
  .cta-badges li{padding:6px 12px;font-size:.82rem;line-height:1.6}
  .cta-section .cta-text{font-size:.94rem}
  .cta-section .cta-note{margin-bottom:28px}
  .cta-card{padding:24px 16px}
  /* ラベルはカード上部に全幅で配置（右上に置くと画面からはみ出すため） */
  .cta-card-tag{position:static;display:block;margin:-24px -16px 20px;border-radius:var(--radius) var(--radius) 0 0;font-size:.75rem;text-align:center}
  .cta-flow{flex-wrap:nowrap;gap:4px;padding:14px 8px;margin-bottom:24px}
  .cta-flow-step{min-width:0}
  .cta-flow-no{font-size:.94rem}
  .cta-flow-txt{font-size:.75rem}
  .cta-tel-num{font-size:2rem;letter-spacing:.04em}
  .cta-tel-note{font-size:.75rem}
  /* 電話とボタンは縦積みにする（横並びのままだとボタン文字が折り返す） */
  .cta-section .cta-actions{flex-direction:column;gap:20px}
  .cta-form-btn{min-width:0;width:100%;max-width:none;padding:18px 20px;font-size:1rem}

  /* シミュレーション */
  .sim-note{padding:24px 20px}
  .sim-note-title{font-size:1.14rem}
  .sim-note-text{font-size:.94rem;line-height:1.95}
  .sim-widget{margin-top:28px}
  .sim-panel .sim-widget{margin-top:0;margin-bottom:20px}
  .sim-tablist{grid-template-columns:1fr;gap:12px;margin-bottom:24px}
  .sim-tab{padding:16px 18px}
  .sim-tab-title{font-size:1.06rem}
}
/* =========================================================
   狭いスマホ（520px以下）の微調整
   ※390pxでは収まるが 375px・360px の端末で折り返してしまう箇所をここで詰める。
     **文章・改行位置は変更せず、文字サイズと余白だけで1行/2行に収めること。**
   ========================================================= */
@media(max-width:520px){
  .cta-tel-num{font-size:1.65rem}

  /* 【2026-09-08・クライアントのご指摘】MVのリード文
     「福岡県久留米市で相続・不動産税務のご相談なら」が375pxで2行に折り返していた。
     文字を .88rem→.78rem に下げ、左右の斜線との間隔も詰めて**1行**に収める。
     ※文言を長くするとまた折り返すため、変更時はここも再調整すること。 */
  .mvp-lead{gap:8px;font-size:.78rem;letter-spacing:0}
  .mvp-lead::before,.mvp-lead::after{height:18px}
  /* 340px以下（iPhone SE 第1世代など）ではさらに1段下げないと収まらない */
  @media(max-width:340px){
    .mvp-lead{gap:6px;font-size:.7rem}
    .mvp-heading{font-size:1.45rem}
  }

  /* 【2026-09-08・クライアントのご指摘】末尾CTAの見出し
     「相続税・不動産税務のご相談は／かわぐち税理士事務所へ」が3行になっていた
     （1行目の「は」だけが落ちる）。文字を 1.5rem→1.25rem に下げ、
     **HTMLの <br> のとおり2行**に収める。※`<br>` の位置は変えないこと。 */
  .cta-section .cta-title{font-size:1.25rem}
}

/* =========================================================
   取扱業務ページ（page-service.php）業務詳細
   ---------------------------------------------------------
   2026-08-07：優馬様のご指示により「写真＋テキストを左右交互に並べる業務詳細型」を採用。
   碓井サイト（usui-souzoku-theme）の `.service-detail-*` を当テーマ配色へ移植したもの。
   ※クラス名はパーツ由来の `.service-detail-*` を維持し、配色はCSS変数のみで調整すること。
   ※トップページの取扱業務は従来どおりタブ型（.s11-*）のため、こことは別系統。
   ========================================================= */
.service-detail-list{display:flex;flex-direction:column;gap:56px}
.service-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;scroll-margin-top:250px}
/* 偶数番目の業務は写真を右側へ（＝左右交互のジグザグ配置） */
.service-detail:nth-child(even) .service-detail-media{order:2}

.service-detail-illust{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--cream);box-shadow:var(--shadow)}
/* 比率・角丸はラッパー側で管理するため、img 側の .kz-img の装飾は打ち消す */
.service-detail-illust img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}

/* 見出しは横線のみ（`.page-body h2` の金茶の縦棒＋左余白を打ち消す） */
.page-body .service-detail-title{font-family:var(--serif);font-size:1.5rem;color:var(--green-deep);margin:0 0 14px;padding:0 0 12px;border-left:0;border-bottom:2px solid var(--line)}
.service-detail-text{color:var(--ink-soft);margin:0 0 18px}

/* 対応内容（チェックリスト） */
.service-detail-points{margin:0 0 18px}
.service-detail-points li{position:relative;padding:6px 0 6px 28px;border-bottom:1px dashed var(--line);color:var(--ink);font-size:.95rem}
.service-detail-points li::before{content:"✓";position:absolute;left:4px;color:var(--green);font-weight:700}

/* 料金の目安（薄い緑地＋左の緑ライン） */
.service-detail-fee{margin:14px 0 4px;padding:14px 18px;background:var(--green-soft);border-left:3px solid var(--green);border-radius:6px;font-size:.95rem;color:var(--ink-soft);line-height:1.9}
.service-detail-fee-label{display:inline-block;font-weight:700;color:var(--green-deep);margin-right:10px}

/* 業務ごとの導線（「〇〇を相談する」＝金茶）
   ※2026-08-07：「〇〇シミュレーションを行う」（緑）は廃止したため `.service-detail-link--sim` も削除した */
.service-detail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:18px}
.service-detail-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brown)}
.service-detail-link:hover{color:var(--gold)}

@media(max-width:900px){
  /* タブレット以下は1カラム。写真は常に本文の上へ（交互配置を解除） */
  .service-detail{grid-template-columns:1fr;gap:24px}
  .service-detail:nth-child(even) .service-detail-media{order:0}
  .service-detail-list{gap:44px}
}
@media(max-width:768px){
  .service-detail-title{font-size:1.3rem}
  .service-detail-actions{gap:10px 18px}
  .service-detail-link{font-size:.94rem}
}

/* =========================================================
   取扱業務の個別ページ（page-service-detail.php ／ /service/<slug>/）
   ---------------------------------------------------------
   2026-09-07：クライアントのご要望で取扱業務を業務ごとの独立ページに分割した際に新設。
   ・上部は「写真（左）＋説明（右）」の1業務レイアウト（一覧の左右交互とは別系統）
   ・その下に「対応内容」「料金」を見出し付きのブロックで積む
   ※`.service-detail-title` / `.service-detail-text` / `.service-detail-points` /
     `.service-detail-fee` は一覧側と共用しているため、ここでは重複定義しないこと。
   ========================================================= */
.service-single{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;margin-bottom:56px}
.service-single-en{display:block;font-family:var(--serif);color:var(--gold);font-size:.8rem;letter-spacing:.2em;margin-bottom:8px}
.service-single-body .service-detail-text:last-child{margin-bottom:0}

/* 見出し付きのブロック（対応内容／料金／そのほかの取扱業務） */
.service-block{margin-bottom:52px}
.service-block-head{
  font-family:var(--serif);font-size:1.3rem;color:var(--green-deep);
  margin:0 0 20px;padding-left:14px;border-left:4px solid var(--gold);
}
.service-other{margin-top:8px}
/* 対応内容は個別ページでは横幅いっぱいに見せるため2列に */
.service-detail-points--wide{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;margin-bottom:0}

/* 料金ブロック（料金ページと同じ体裁の小見出し＋表） */
.service-fee-lead{margin:18px 0 8px;color:var(--ink-soft)}
.service-fee-h4{font-family:var(--serif);font-size:1.1rem;color:var(--green-deep);margin:34px 0 8px;display:flex;align-items:center;gap:.4em}
.service-fee-no{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--green);color:#fff;font-size:.94rem;flex:0 0 auto;
}
.service-fee-note-lead{margin:0 0 14px;color:var(--ink-soft);font-size:.94rem}

/* 固定ページ本文の追記（クライアントが管理画面から書き足す受け皿） */
.service-block--entry{background:var(--cream);border-radius:var(--radius);padding:28px 32px}
.service-block--entry :first-child{margin-top:0}
.service-block--entry :last-child{margin-bottom:0}

/* この業務の相談への導線 */
.service-single-cta{text-align:center;background:var(--green-soft);border-radius:var(--radius);padding:36px;margin:0 0 52px}
.service-single-cta-text{margin:0 0 18px;color:var(--ink-soft)}

@media(max-width:900px){
  .service-single{grid-template-columns:1fr;gap:24px;margin-bottom:44px}
  .service-block{margin-bottom:44px}
}
@media(max-width:768px){
  .service-block-head{font-size:1.15rem}
  /* 狭い画面では対応内容の2列をやめる（1項目が2行に折れて読みにくくなるため） */
  .service-detail-points--wide{grid-template-columns:1fr}
  .service-fee-h4{font-size:1rem}
  .service-single-cta{padding:26px 20px}
  .service-block--entry{padding:22px 20px}
}


/* =========================================================
   MVの3つの強み（2026-10-19 岡本様のご指示：川崎つばさ法律事務所サイトの .mv-badges と同じ形式）
   ---------------------------------------------------------
   白いカード＋上端の金茶グラデーション線／アイコン（金茶の丸＋薄い影）→ 小さい文字1行 → 明朝の太字1行。
   左の見出し帯（.mvp-points-badge）は廃止。旧「大きな数値＋小さな単位」（.mvp-point-figure-main/-unit）も廃止。
   ★上の旧指定を打ち消すため、このブロックはファイル末尾に置くこと（前へ移すと負ける）。
   ========================================================= */
.mvp-points{position:relative;display:block;padding:0;border-radius:12px;box-shadow:0 10px 32px rgba(20,60,40,.16);overflow:hidden}
.mvp-points::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 45%,#fff));
}
.mvp-points-list{padding:24px 16px 22px}
.mvp-point{padding:0 14px}
.mvp-point+.mvp-point{border-left:1px solid color-mix(in srgb,var(--green-deep) 26%,transparent)}
.mvp-point-ico{width:58px;height:58px;margin:0 auto 12px;filter:drop-shadow(0 3px 6px rgba(169,118,46,.34))}
.mvp-point-label{font-size:.88rem;line-height:1.5;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.mvp-point-figure{margin:4px 0 0;font-family:var(--serif);font-size:1.18rem;font-weight:700;line-height:1.5;letter-spacing:0;color:var(--green-deep);white-space:nowrap}
.mvp-point-sup{font-family:var(--sans);font-size:.6rem;color:var(--ink-soft)}
@media(max-width:1024px){
  .mvp-point-label{font-size:.82rem}
  .mvp-point-figure{font-size:1.12rem}
}
@media(max-width:768px){
  /* スマホ・タブレット縦は川崎つばさと同じく画面幅いっぱいの帯（上＝金茶の線／下＝深緑3px） */
  .mvp-points{border-radius:0;box-shadow:none;border-bottom:3px solid var(--green-deep)}
  .mvp-points-list{padding:18px 10px 16px}
  .mvp-point{padding:0 6px}
  .mvp-point-ico{width:44px;height:44px;margin-bottom:8px}
  .mvp-point-label{font-size:min(.82rem,3.4vw)}
  .mvp-point-figure{font-size:min(1.12rem,3.85vw);margin-top:2px}
}
@media(max-width:420px){
  .mvp-point-ico{width:38px;height:38px}
}