/* Generated from site/assets/css/style.css. Edit the source and regenerate. */
/* ---- デザイントークン ---------------------------------------------------- */
:root{
  --ch-navy:#123a63;
  --ch-navy-d:#0c2942;
  --ch-navy-l:#2b5c8f;
  --ch-gold:#c8a15a;
  --ch-ink:#232a31;
  --ch-ink-sub:#5a6672;
  --ch-line:#dfe4ea;
  --ch-bg:#ffffff;
  --ch-bg-alt:#f4f7fa;
  --ch-bg-tint:#eef3f8;
  --ch-danger:#b4453c;
  --ch-radius:10px;
  --ch-shadow:0 2px 14px rgba(18,58,99,.08);
  --ch-wrap:1080px;
  --ch-gap:clamp(2.75rem, 7vw, 5rem);
  --ch-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  /* 言語切替メニューに出る他言語の名前（简 / 한국어 / नेपाली）用。
     必要な数文字だけを Google Fonts から取り寄せている。 */
  --ch-font-langsel:"Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans Devanagari",var(--ch-font);
  /* 見出しも本文も同じ書体。ウェイトと字間だけで階層を作る */
  --ch-font-display:var(--ch-font);
}

/* ---- 言語ごとの本文フォント -----------------------------------------------
   Noto Sans JP は日本語用なので、他言語の字が入っていない。
   指定しないと閲覧者の端末まかせのフォントで描かれ、行がガタつく。
     簡体字だけの字（务・书・简 など）… 184字
     ハングル                          … 432字
     デーヴァナーガリー                 …  72字

   1ページにつき1書体で足りる。SC / TC / KR はロゴの和文（中日法務行政書士事務所）
   まで収録しているため、控えに Noto Sans JP を並べる必要はない。
   例外はネパール語で、Devanagari に和文が無いので2書体を読み込む。

   末尾の1つは、Google Fonts が読めなかったときの受け皿。
   sans-serif だけだと、日本語環境で中国語ページを見たときに
   日本語の字形が使われてしまうため、その言語の標準書体を名指ししている。 */
html[lang="zh-Hans"]{--ch-font:"Noto Sans SC","Microsoft YaHei",sans-serif}
html[lang="zh-Hant"]{--ch-font:"Noto Sans TC","Microsoft JhengHei",sans-serif}
html[lang="ko"]     {--ch-font:"Noto Sans KR","Malgun Gothic",sans-serif}
html[lang="ne"]     {--ch-font:"Noto Sans Devanagari","Noto Sans JP",sans-serif}

/* ---- ラテン文字の言語の組版 -----------------------------------------------
   英語・イタリア語・スペイン語・ベトナム語のページは、本文フォントが
   Noto Sans JP のまま（このフォントのラテン文字を使っている）。
   書体そのものは問題ないが、**和文に合わせた組版の設定**をそのまま当てると
   間延びして、文字が痩せて見える。これが「英語ページが安っぽい」原因だった。

     line-height:1.9      … 和文向け。ラテン文字は1.5〜1.7が普通
     letter-spacing:.02em … 和文では品が出るが、ラテン文字では字が散る
     palt                 … 和文の字送りを詰める指定。ラテン文字には不要
     auto-phrase / strict … 和文の文節・禁則の指定。ラテン文字には不要

   ラテン文字向けの値に戻す。 */
html[lang="en"] body,html[lang="it"] body,
html[lang="es"] body,html[lang="vi"] body{
  line-height:1.65;letter-spacing:0;
  font-feature-settings:normal;
  word-break:normal;line-break:auto;
}
/* 事務所名は和文だと字間を広げると品が出るが、ラテン文字では間延びする */
html[lang="en"] .ch-hero h1,html[lang="it"] .ch-hero h1,
html[lang="es"] .ch-hero h1,html[lang="vi"] .ch-hero h1{
  letter-spacing:.005em;line-height:1.2;
}



/* ---- レイアウト ---------------------------------------------------------- */
.ch-wrap{width:min(100% - 2rem,var(--ch-wrap));margin-inline:auto}
.ch-section{padding-block:var(--ch-gap)}
.ch-section--alt{background:var(--ch-bg-alt)}
.ch-grid{display:grid;gap:1.5rem}
@media(min-width:700px){
  .ch-grid--2{grid-template-columns:repeat(2,1fr)}
}


/* ---- ファーストビュー ---------------------------------------------------- */
/* 方針：
     ・写真が使えないため、悩みの並びそのものを画面の重みにする
     ・悩みは該当業務ページへの入口を兼ね、訪問者が自分を見つけて即移動できる
     ・装飾の線は置かず、余白・文字サイズ・色の差で階層をつくる
   日本語の改行：
     節を .clause（inline-block）で包み、読点・句点の位置でしか
     改行されないようにする。句読点はスパンの内側に含める。 */
.ch-hero{
  background:linear-gradient(115deg,var(--ch-navy-d) 0%,var(--ch-navy) 55%,var(--ch-navy-l) 100%);
  color:#fff;
  padding-block:clamp(2.8rem,6vw,4.2rem);
}

.ch-hero-eyebrow{
  /* 字間は広げない。日本語では「名古屋市西区・特定行政書士」と短いので
     広げても収まるが、他言語では一文になり、間延びして読みにくくなる。
     指定を置かず、本文の字間（和文 .02em／ラテン文字 0）を引き継ぐ。 */
  margin:0 0 1.3rem;
  font-size:.88rem;font-weight:700;
  color:var(--ch-gold);
}

.ch-hero h1{
  font-family:var(--ch-font-display);
  margin:0;font-weight:700;
  font-size:clamp(1.7rem,4.4vw,2.6rem);
  line-height:1.3;letter-spacing:.07em;
  color:var(--ch-gold);
}
.ch-hero-title{
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.35rem);
  margin:0 0 1.2rem;container-type:inline-size;
}
.ch-hero-heading{min-width:0;flex:1 1 auto}
.ch-hero-heading .ch-hero-eyebrow{margin:0}
/* 和文名称は文節推定で「中／日法務…」に分割させない。
   ロゴを含む実際のコンテナー幅に合わせ、名称を一行に収める。 */
html[lang="ja"] .ch-hero-title h1{
  white-space:nowrap;word-break:keep-all;min-width:0;
  font-size:clamp(1rem,5.8cqw,2.6rem);letter-spacing:.03em;
}
.ch-hero-title img{
  width:clamp(4rem,8vw,5.5rem);height:auto;flex:0 0 auto;
  padding:.28rem;background:#fff;border-radius:50%;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
/* 事務所名の下に置くアピール文。白でしっかり読ませる */
.ch-hero-lead{
  margin:0;max-width:40em;
  font-size:clamp(.95rem,1.4vw,1.05rem);
  line-height:2;letter-spacing:.02em;
  color:#fff;
}

/* ---- 悩みの並び ---------------------------------------------------------- */
.ch-hero-ask{
  /* ここも一文なので、肩書きと同じく字間は広げない */
  margin:2.4rem 0 1rem;
  font-size:.86rem;font-weight:700;
  color:#cfdfee;
}
.ch-hero-worries{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.75rem;
}
/* 3項目なので、折り返すと 2+1 になって不格好。1列か3列のどちらかにする */
@media(min-width:760px){.ch-hero-worries{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ch-hero-worries li{margin:0}
.ch-hero-worries a{
  display:flex;align-items:center;gap:.7rem;height:100%;
  padding:1.15rem 1.25rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--ch-radius);
  color:#fff;text-decoration:none;
  font-size:.95rem;line-height:1.6;letter-spacing:.01em;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
/* 先頭のしるし。サイト内の他のリンクと同じ山形にそろえる */
.ch-hero-worries a::before{
  content:"";flex:0 0 auto;
  width:.34em;height:.34em;
  border-right:2px solid var(--ch-gold);
  border-bottom:2px solid var(--ch-gold);
  transform:rotate(-45deg);
}
.ch-hero-worries a:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--ch-gold);
  transform:translateY(-2px);
}


@media(max-width:560px){
  .ch-hero{padding-block:2.4rem}
  .ch-hero-eyebrow{margin-bottom:1rem;font-size:.8rem}
  .ch-hero-title{align-items:center;margin-bottom:.9rem}
  .ch-hero-title img{width:3.7rem}
  .ch-hero h1{font-size:clamp(1.45rem,7vw,1.85rem);letter-spacing:.03em}
  .ch-hero-lead{font-size:.92rem;line-height:1.95}
  .ch-hero-ask{margin:1.9rem 0 .8rem;font-size:.82rem}
  .ch-hero-worries a{padding:.8rem 1rem;font-size:.89rem}
}

/* 節の単位。これで読点・句点以外の位置では折り返されない */
.ch-clause{display:inline-block}

/* ---- ページヘッダー(下層) ------------------------------------------------ */
.ch-page-head{background:var(--ch-navy);color:#fff;padding-block:2.8rem}
.ch-page-head h1{font-family:var(--ch-font-display);font-size:clamp(1.3rem,3.2vw,1.85rem);margin:0;font-weight:700;letter-spacing:.01em}
.ch-page-head p{margin:.4rem 0 0;font-size:.85rem;color:#c6d6e6;letter-spacing:.12em}


.ch-content{padding-block:var(--ch-gap)}
/* .section の中に .content が入ると余白が二重になるため打ち消す */
.ch-section>.ch-content{padding-block:0}
.ch-content h2{
  font-family:var(--ch-font-display);font-size:1.35rem;font-weight:700;letter-spacing:.01em;
  margin:3.2rem 0 1.2rem;padding-left:.75rem;border-left:4px solid var(--ch-gold);line-height:1.5;
}
.ch-content h2:first-child{margin-top:0}
.ch-content h3{
  font-family:var(--ch-font-display);font-weight:700;letter-spacing:.01em;
  font-size:1.08rem;margin:2rem 0 .7rem;color:var(--ch-navy);
  padding-bottom:.3rem;border-bottom:1px dashed var(--ch-line);
}
.ch-content p{margin:0 0 1.35rem}
.ch-content ul,.ch-content ol{margin:0 0 1.2rem}
.ch-content li{margin-bottom:.35rem}

.ch-lead{font-size:1.05rem;color:var(--ch-navy-d);font-weight:500}

/* ボタン */
.ch-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.8rem 1.6rem;border-radius:var(--ch-radius);
  font-weight:700;text-decoration:none;font-size:.95rem;
  border:2px solid transparent;transition:.2s;
}
.ch-btn--primary{background:var(--ch-gold);color:#3a2b0c}
.ch-btn--primary:hover{background:#d8b371;color:#3a2b0c}
.ch-btn--navy{background:var(--ch-navy);color:#fff}
.ch-btn--navy:hover{background:var(--ch-navy-l);color:#fff}
/* 小さめ（ヘッダー用） */
.ch-btn--sm{padding:.5rem 1.1rem;font-size:.85rem;border-radius:6px}

/* カード */
.ch-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--ch-line);
  border-radius:var(--ch-radius);padding:1.7rem 1.6rem;text-decoration:none;color:inherit;
  box-shadow:var(--ch-shadow);transition:.2s;
}
a.ch-card:hover{transform:translateY(-3px);border-color:var(--ch-gold);color:inherit}
/* カード見出しは、置かれるページの階層に応じて h3 / h4 のどちらにもなる */
.ch-card h3,
.ch-card h4{font-family:var(--ch-font-display);margin:0 0 .5rem;font-size:1.06rem;font-weight:700;letter-spacing:.01em;color:var(--ch-navy);border:0;padding:0}
.ch-card>p{margin:0;font-size:.9rem;color:var(--ch-ink-sub);line-height:1.8}
.ch-card .ch-card-more{margin-top:auto;margin-left:auto;padding-top:1.1rem;font-size:.85rem;font-weight:700;color:var(--ch-navy-l)}
a.ch-card:hover .ch-card-more{color:var(--ch-gold)}

/* 表 */
.ch-table-scroll{overflow-x:auto;margin:0 0 1.2rem}
/* 2列の表（手続き／報酬額）は画面に収まるよう縮む。
   列数の多い表だけ .ch-tbl--wide を付けて横スクロールにする */
.ch-tbl{min-width:min(460px,100%);font-size:.95rem}
.ch-tbl--wide{min-width:460px}
.ch-tbl th,.ch-tbl td{border:1px solid var(--ch-line);padding:.75rem .9rem;text-align:left;vertical-align:top}
.ch-tbl thead th{background:var(--ch-navy);color:#fff;font-weight:600}
.ch-tbl tbody th{background:var(--ch-bg-alt);width:38%;font-weight:600}
.ch-tbl td.ch-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* 注記ボックス */
.ch-note{
  background:var(--ch-bg-tint);border-left:4px solid var(--ch-navy-l);
  border-radius:0 var(--ch-radius) var(--ch-radius) 0;padding:1rem 1.2rem;margin:0 0 1.4rem;
  font-size:.92rem;
}
.ch-note--alert{background:#fdf4f3;border-left-color:var(--ch-danger)}
.ch-note p:last-child{margin-bottom:0}
.ch-note strong{color:var(--ch-navy-d)}
.ch-note--alert strong{color:var(--ch-danger)}

/* 手順リスト */
.ch-steps{list-style:none;counter-reset:s;padding:0;margin:0 0 1.4rem}
.ch-steps li{
  counter-increment:s;position:relative;padding:0 0 1.3rem 3.2rem;
  border-left:2px solid var(--ch-line);margin-left:1.1rem;
}
.ch-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.ch-steps li::before{
  content:counter(s);position:absolute;left:-1.15rem;top:0;
  width:2.3rem;height:2.3rem;border-radius:50%;background:var(--ch-navy);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.95rem;
}
.ch-steps b{display:block;color:var(--ch-navy);margin-bottom:.15rem}

/* 定義リスト（事務所概要など） */
.ch-deflist{margin:0 0 1.4rem;border-top:1px solid var(--ch-line)}
.ch-deflist div{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--ch-line)}
.ch-deflist dt{flex:0 0 11rem;background:var(--ch-bg-alt);padding:.8rem 1rem;font-weight:600;margin:0}
.ch-deflist dd{flex:1 1 16rem;padding:.8rem 1rem;margin:0}

/* CTA 帯 */
.ch-cta{background:var(--ch-navy-d);color:#fff;padding-block:3.6rem;text-align:center}
.ch-cta h2{text-wrap:balance;font-family:var(--ch-font-display);font-size:1.35rem;font-weight:700;letter-spacing:.01em;margin:0 0 .6rem;border:0;padding:0;color:#fff}
.ch-cta p{color:#c6d6e6;margin:0 auto 1.4rem;max-width:46em;font-size:.95rem;text-wrap:pretty}

/* 投稿リスト（ブログ） */
.ch-post-list{list-style:none;padding:0;margin:0}
.ch-post-list li{border-bottom:1px solid var(--ch-line)}
.ch-post-list a{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;padding:1rem .2rem;text-decoration:none;color:var(--ch-ink)}
.ch-post-list a:hover{background:var(--ch-bg-alt)}
.ch-post-list time{flex:0 0 7rem;color:var(--ch-ink-sub);font-size:.85rem;font-variant-numeric:tabular-nums}
/* 記事本文がまだ無い状態の一覧。リンクにせず、日付と題名だけを並べる */
.ch-post-list--plain li{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;padding:1rem .2rem}


.ch-trans-note{
  font-size:.78rem;color:var(--ch-ink-sub);background:var(--ch-bg-alt);
  border-bottom:1px solid var(--ch-line);
}
.ch-trans-note p{margin:0;padding-block:.6rem;line-height:1.7}
.ch-trans-note a{color:var(--ch-navy)}
.ch-trans-note a:hover,.ch-trans-note a:focus-visible{color:var(--ch-gold)}


/* ==========================================================================
   取扱範囲（お受けできる／できない）
   色の面積を抑え、アイコンと細い罫線で構造を見せる。
   ========================================================================== */
.ch-scope{display:grid;gap:1.25rem;margin:.4rem 0 1.6rem;align-items:start}
@media(min-width:760px){.ch-scope{grid-template-columns:1fr 1fr}}
.ch-scope>div{
  border:1px solid var(--ch-line);border-radius:var(--ch-radius);
  background:#fff;overflow:hidden;
}
/* 見出し行：淡い色面に小さなアイコンバッジ */
.ch-scope h3{
  display:flex;align-items:center;gap:.6rem;margin:0;padding:.95rem 1.3rem;
  font-size:.98rem;font-weight:700;border:0;letter-spacing:.01em;
}
.ch-scope h3 .ch-badge-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:1.5rem;height:1.5rem;border-radius:50%;
}
.ch-scope h3 .ch-badge-icon svg{width:.85rem;height:.85rem;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ch-scope ul{list-style:none;margin:0;padding:0}
/* 行ごとの罫線は置かない。2つのパネルは項目数も文字数も違うため、
   罫線を引くと必ず高さがずれて階段状に見えるため。 */
.ch-scope ul{padding:.5rem 0}
.ch-scope li{
  position:relative;margin:0;padding:.55rem 1.3rem .55rem 2.5rem;
  font-size:.93rem;line-height:1.75;
}
.ch-scope li::before{
  content:"";position:absolute;left:1.35rem;top:1.15rem;
  width:.42rem;height:.42rem;border-radius:50%;
}
.ch-scope--yes li::before{background:#2f7d5c}
.ch-scope--no li::before{background:var(--ch-danger)}
.ch-scope li small{display:block;color:var(--ch-ink-sub);font-size:.82rem}

.ch-scope--yes h3{background:#eef6f1;color:#266b4d}
.ch-scope--yes h3 .ch-badge-icon{background:#2f7d5c}
.ch-scope--no h3{background:#fbf0ef;color:#a03a32}
.ch-scope--no h3 .ch-badge-icon{background:var(--ch-danger)}

/* FAQ アコーディオン */
.ch-faq{border-top:1px solid var(--ch-line);margin:0 0 1.6rem}
.ch-faq details{border-bottom:1px solid var(--ch-line)}
.ch-faq summary{
  cursor:pointer;padding:1rem 2.2rem 1rem .2rem;font-weight:600;color:var(--ch-navy);
  position:relative;list-style:none;line-height:1.7;
}
.ch-faq summary::-webkit-details-marker{display:none}
.ch-faq summary::after{
  content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--ch-gold);font-weight:400;
}
.ch-faq details[open] summary::after{content:"\2212"}
.ch-faq summary:hover{background:var(--ch-bg-alt)}
.ch-faq .ch-faq-body{padding:0 .2rem 1.2rem;font-size:.95rem}
.ch-faq .ch-faq-body p:last-child{margin-bottom:0}


/* 処理の目安を示すステータス行 */
.ch-meta-row{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding:1rem 1.2rem;margin:0 0 1.6rem;
  background:var(--ch-bg-alt);border-radius:var(--ch-radius);font-size:.88rem;
}
.ch-meta-row b{color:var(--ch-navy);display:block;font-size:.76rem;letter-spacing:.06em}

/* トップのお悩みチェックリストは少し大きく見せる */


/* ==========================================================================
   レスポンシブ調整（スマートフォン）
   ブレークポイント：
     〜340px  極小端末（言語切替は地球アイコンだけにする）
     〜400px  小型スマホ（iPhone SE 等）
     〜480px  ボタンを画面幅いっぱいにする境界
     〜560px  本文・表・フッターを縮める主要な境界
     〜640px  ファーストビュー
     〜700px  ヘッダーの言語名を省く境界
     〜820px  タブレット縦・ハンバーガーメニューに切り替わる境界

   ここには複数の部品にまたがる指定を置く。
   1つの部品にしか関わらない指定は、読む順番が飛ばないよう
   その部品の定義のすぐ下に置いている（例：.ch-profile、.ch-map-embed）。
   ========================================================================== */

/* ---- ファーストビュー ---------------------------------------------------- */
@media(max-width:640px){
  .ch-hero{padding-block:2.6rem}
  .ch-hero h1{line-height:1.5}
}

/* ---- ボタン -------------------------------------------------------------- */
@media(max-width:480px){
  .ch-btn{padding:.85rem 1.2rem;font-size:.92rem}
  .ch-cta>.ch-wrap>.ch-btn{width:100%;justify-content:center}
}

/* ---- 本文・表・手順・フッター -------------------------------------------- */
/* 同じ 560px の指定が部品ごとに4つに分かれていたので1つにまとめた。
   幅を変えるときに、直し忘れる箇所を作らないため。 */
@media(max-width:560px){
  /* 見出し・本文 */
  .ch-wp-content{font-size:15.5px;line-height:1.85}
  .ch-content h2{font-size:1.2rem;margin-top:2.4rem}
  .ch-content h3{font-size:1.02rem}
  .ch-page-head{padding-block:2rem}
  .ch-cta{padding-block:2.6rem}
  .ch-cta h2{font-size:1.2rem}
  .ch-card{padding:1.3rem 1.2rem}

  /* 表・定義リスト */
  .ch-tbl{font-size:.88rem}
  .ch-tbl th,.ch-tbl td{padding:.6rem .7rem}
  /* 項目名の幅を固定しない。金額は .ch-num の nowrap で1行に保たれる */
  .ch-tbl tbody th{width:auto}
  /* 定義リストは縦積みにして、項目名を見出しのように見せる */
  .ch-deflist dt{flex:1 1 100%;padding:.6rem .8rem}
  .ch-deflist dd{flex:1 1 100%;padding:.7rem .8rem 1rem}
  .ch-meta-row{flex-direction:column;gap:.7rem;padding:.9rem 1rem}

  /* 手順リスト */
  .ch-steps li{padding-left:2.6rem;padding-bottom:1.1rem}
  .ch-steps li::before{width:2rem;height:2rem;left:-1rem;font-size:.85rem}

  /* フッター */
}

/* 代表者プロフィール */
.ch-profile{
  display:grid;gap:1.6rem;align-items:start;margin:.4rem 0 2rem;
}
@media(min-width:680px){.ch-profile{grid-template-columns:160px minmax(0,1fr)}}
.ch-profile-photo{
  width:120px;max-width:100%;aspect-ratio:4/5;border-radius:var(--ch-radius);overflow:hidden;
  background:var(--ch-bg-alt);border:1px solid var(--ch-line);
  display:grid;place-items:center;text-align:center;
}
@media(min-width:680px){.ch-profile-photo{width:160px}}
.ch-profile-photo img{width:100%;height:100%;object-fit:cover}
.ch-profile-body h3{margin-top:0}
.ch-profile-body>*:last-child{margin-bottom:0}
/* 経歴。年月と内容を2列に揃える。画面が狭いときだけ縦積みにする */
.ch-profile-body h4{
  font-family:var(--ch-font-display);margin:1.7rem 0 .6rem;padding:0;border:0;
  font-size:1rem;font-weight:700;color:var(--ch-navy);letter-spacing:.02em;
}
.ch-history{list-style:none;margin:0;padding:0;font-size:.95rem}
.ch-history li{
  display:flex;gap:.9rem;padding:.5rem 0;line-height:1.8;
  border-top:1px dotted var(--ch-line);
}
.ch-history li:last-child{border-bottom:1px dotted var(--ch-line)}
.ch-history b{flex:0 0 8.5em;color:var(--ch-navy);font-weight:600}
@media(max-width:560px){
  .ch-history li{flex-direction:column;gap:.1rem}
  .ch-history b{flex:none}
}

/* 地図の埋め込み枠（レスポンシブ） */
.ch-map-embed{
  position:relative;aspect-ratio:16/9;border-radius:var(--ch-radius);
  overflow:hidden;border:1px solid var(--ch-line);background:var(--ch-bg-alt);margin:0 0 1.4rem;
}
.ch-map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:560px){.ch-map-embed{aspect-ratio:4/3}}

/* WordPress 側では地図を押されるまで読み込まない。地図の高さのまま空の面を
   見せると何の枠か伝わらないので、待機中だけ縦横比を解いて内容の高さに縮める。
   押すと iframe に入れ替わり、そのとき .ch-map-embed の縦横比が戻る。 */
.ch-map-embed--pending{aspect-ratio:auto;border-style:dashed;background:var(--ch-bg-alt)}
.ch-map-load{
  position:static;width:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  padding:2.2rem 1rem;background:transparent;color:inherit;font:inherit;text-align:center;
}
.ch-map-load:hover,.ch-map-load:focus-visible{background:var(--ch-bg-tint)}
.ch-map-load-pin{
  width:2rem;height:2rem;fill:none;
  stroke:var(--ch-navy);stroke-width:1.6;stroke-linejoin:round;
}
.ch-map-load-label{font-weight:700;color:var(--ch-navy)}
.ch-map-load-note{font-size:.85em;color:var(--ch-ink-sub)}
@media(max-width:560px){.ch-map-load{padding:1.7rem 1rem}}

/* ==========================================================================
   業務案内のグルーピング
   取扱業務を「外国人の方の手続き」「終活・相続の手続き」の2群に分け、
   来訪者が自分に関係のある側だけを見れば済むようにする。
   ========================================================================== */
.ch-svc-group{margin:0 0 2.8rem}
/* 導入文のすぐ下にグループ見出しが来ると詰まって見えるため、間隔をとる */
p + .ch-svc-group{margin-top:2.6rem}
.ch-svc-group:last-child{margin-bottom:0}
.ch-svc-group-head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem 1rem;
  margin:0 0 1.1rem;padding-bottom:.7rem;
  border-bottom:2px solid var(--ch-navy);
}
.ch-svc-group-head h2,
.ch-svc-group-head h3{
  margin:0;padding:0;border:0;font-size:1.12rem;font-weight:700;
  color:var(--ch-navy);letter-spacing:.01em;font-family:var(--ch-font-display);
}
.ch-svc-group-head p{margin:0;font-size:.86rem;color:var(--ch-ink-sub)}
@media(max-width:560px){
  .ch-svc-group{margin-bottom:2rem}
  .ch-svc-group-head h2,
  .ch-svc-group-head h3{font-size:1.02rem}
  .ch-svc-group-head p{font-size:.8rem}
}

/* ==========================================================================
   お悩みリスト（各サービス詳細ページ）
   ========================================================================== */
.ch-svc-worries{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ch-svc-worries li{
  display:flex;align-items:flex-start;gap:.7rem;margin:0;
  font-size:.94rem;line-height:1.7;
}
.ch-svc-worries .ch-check{
  flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.32rem;
  stroke:var(--ch-gold);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.ch-svc-worries b{font-weight:700;color:var(--ch-navy-d)}
@media(max-width:560px){.ch-svc-worries li{font-size:.9rem}}

/* 詳細ページのお悩みリスト（見出しの直下に置く） */
.ch-svc-worries--page{
  background:var(--ch-bg-tint);border-radius:var(--ch-radius);
  padding:1.5rem 1.7rem;gap:.75rem;margin:0 0 1.6rem;
}
.ch-svc-worries--page li{font-size:.97rem}
@media(min-width:760px){
  .ch-svc-worries--page{grid-template-columns:1fr 1fr;column-gap:2.2rem}
}
@media(max-width:560px){.ch-svc-worries--page{padding:1.2rem 1.3rem}}

/* 補足の小さな注記（枠を使うほどでもない一行） */
.ch-fineprint{
  margin:1.6rem 0 0;font-size:.84rem;color:var(--ch-ink-sub);line-height:1.8;
}


/* カード内の困りごと（ひと目で拾える短い語のみ） */

/* ==========================================================================
   特長（番号付きの行）
   ページ内にカードが多いため、ここは箱を使わず
   番号＋罫線だけの構成にして、視覚的なリズムを変える。
   ========================================================================== */
.ch-reasons{list-style:none;margin:.6rem 0 0;padding:0;counter-reset:r}
.ch-reasons li{
  counter-increment:r;display:grid;gap:.3rem 1.6rem;margin:0;
  padding:1.5rem 0;border-top:1px solid var(--ch-line);
}
.ch-reasons li:last-child{border-bottom:1px solid var(--ch-line)}
@media(min-width:720px){
  .ch-reasons li{grid-template-columns:auto minmax(0,17rem) minmax(0,1fr);align-items:baseline}
}
.ch-reasons li::before{
  content:counter(r);
  font-size:1.15rem;font-weight:700;color:var(--ch-gold);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.ch-reasons h3{
  margin:0;padding:0;border:0;font-size:1.05rem;font-weight:700;
  color:var(--ch-navy);letter-spacing:.01em;line-height:1.6;
}
.ch-reasons p{margin:0;font-size:.93rem;line-height:1.85;color:var(--ch-ink)}
@media(max-width:719px){
  /* 番号と見出しを横並びにし、説明文は見出しの下に回り込ませる */
  .ch-reasons li{grid-template-columns:auto minmax(0,1fr);gap:.5rem .9rem;padding:1.2rem 0}
  .ch-reasons li::before{grid-column:1;grid-row:1;font-size:1rem;align-self:center}
  .ch-reasons h3{grid-column:2;grid-row:1;font-size:1rem}
  .ch-reasons p{grid-column:2;grid-row:2}
}

/* ==========================================================================
   リンクの見せ方（本文中とカード内で形式を分ける）

   NN/g の指針：
     ・本文中のテキストリンクは「色＋下線」が最も強く伝わる
     ・リンクの一覧（カードなど）は下線を省いてよい
   これに沿って、
     しるしは共通で山形（シェブロン）。違いは下線の有無で示す。
     本文中  … 下線あり
     カード内 … 下線なし（カード全体がリンクのため）
   とし、ひと目で種類の違いが分かるようにする。
   ========================================================================== */

/* ---- 本文中のテキストリンク ---------------------------------------------- */
.ch-link-more{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.92rem;font-weight:700;color:var(--ch-navy-l);
  text-decoration:none;
}
/* 下線は文字だけにかける。
   .link-more を inline-flex にしているため、親に text-decoration を
   指定すると、しるし（擬似要素）にも下線が引かれてしまう。 */
.ch-link-more>span{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;
}
.ch-link-more::after{
  /* 遷移のしるし。線で描いた山形（シェブロン）。
     カード内の矢印と形を変えることで、種類の違いが伝わる。
     文字ではなく図形なので、書体によって形が変わらない。 */
  content:"";
  width:.36em;height:.36em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  margin-left:.05em;
  transition:transform .18s ease;
}
.ch-link-more:hover{color:var(--ch-gold)}
.ch-link-more:hover>span{text-decoration-thickness:2px}
.ch-link-more:hover::after{transform:rotate(-45deg) translate(.1em,.1em)}

/* ---- カード内の「詳しく見る」 -------------------------------------------- */
/* カード全体がリンクなので、これ自体は独立したリンクではない。
   下線も囲みも付けず、素の矢印だけの軽い手がかりにする。 */
.ch-card .ch-card-more{
  display:inline-flex;align-items:center;gap:.55rem;
  text-decoration:none;
}
.ch-card .ch-card-more::after{
  /* しるしは本文中のリンクと同じ山形（シェブロン）に統一。
     カードとの違いは「下線の有無」で示す。 */
  content:"";
  width:.36em;height:.36em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .18s ease;
}
a.ch-card:hover .ch-card-more::after{transform:rotate(-45deg) translate(.1em,.1em)}

/* ---- キーボード操作時の現在地を必ず示す ---------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--ch-gold);
  outline-offset:2px;
  border-radius:3px;
}
.ch-card:focus-visible{outline-offset:3px}
.ch-cta a:focus-visible,
.ch-hero a:focus-visible{outline-color:#fff}


/* ページ内リンクの着地位置。
   ヘッダーが固定表示のため、そのぶん手前で止める */
.ch-wp-content [id]{scroll-margin-top:7.5rem}
@media(max-width:820px){.ch-wp-content [id]{scroll-margin-top:5rem}}

/* ==========================================================================
   和文の折り返し位置
   既定では「ご｜自身」のように語の途中でも改行されてしまう。
   auto-phrase は文節のまとまりを見て改行位置を決めるため、
   語が割れなくなる。非対応ブラウザは従来どおりの折り返しになるだけで実害はない。
   ========================================================================== */
.ch-wp-content{word-break:auto-phrase;line-break:strict}
/* 英数字・URLなど、文節判定が働かないものは従来どおり */
.ch-tbl,code{word-break:normal}

/* 「〜について詳しく」だけを置いた段落は、次の見出しと近くなりやすいので下に間隔をとる。
   子セレクタ（>）にしているのは、注記ボックスなどの中にある段落
   （文末にリンクが含まれるだけのもの）にまで余白が付くのを防ぐため。 */
.ch-content > p:has(> .ch-link-more){margin-bottom:2.6rem}

/* ==========================================================================
   細かな余白の調整用
   以前は style 属性で直接書いていたもの。同じ指定が14箇所に散っており、
   変更したいときに漏れやすかったため、クラスに切り出した。
   ========================================================================== */
.ch-m0{margin:0}
.ch-mt-md{margin-top:1.2rem}
.ch-mt-lg{margin-top:1.5rem}
.ch-strong{font-weight:700}