@charset "utf-8";
/* =========================================================
   相続手続支援センター ／ 下層ページの「追加分」だけ
   - 部品は TOP の assets/style.css をそのまま使う。
     ここに書くのは TOP に無いものだけ＝ページヘッダー・パンくず・
     静止版の3ステップ・ボタンの無いカード、そしてこのページの節の余白。
   - ★ style.css は触らない（TOPに影響を出さないため）。
     部品を直したいときは style.css を直す＝TOPと下層が同時に直る。
   ========================================================= */

/* ---------- ページヘッダー（下層共通） ----------
   中身は TOP の ABOUT と同じ部品（.about-grid / .about-txt / .about-art）を使う。
   ここで足すのは「透明ヘッダーの下に入るぶんの上余白」と見出しの大きさだけ */
/* この節だけ下の余白 75 → 150px（PC/SP 両方） */
/* この節の下に margin 60px（同一クラス全ページ） */
.page-head{padding:clamp(150px,15vw,196px) 0 150px; margin-bottom:60px; position:relative; overflow:hidden}
/* 見出しの大きさ 50 → 44px（PCで見た値。clamp の上限だけ下げるので
   1048px 未満は従来どおり＝狭い画面は何も変わらない）
    → 見出しの下の余白は 100px → 60px。同一クラス＝全ページ */
.page-ttl{margin-top:6px; font-size:clamp(28px,4.2vw,44px); line-height:1.5; letter-spacing:.08em;
  padding:0 0 40px; text-wrap:balance; line-break:strict}   /* 60 → 40px */
/* 長い見出し用。24字ある「気づかないところにも、気づける理由があります。」を
   50pxのまま置くと1行11字が段の幅（PCで550px）に入らず、「も、」「す。」だけの行ができる。
   ★1行の最大字数×文字幅×字送りが段の幅に収まる大きさまで落とす＝12字なら40px */
.page-ttl.long{font-size:clamp(23px,3.2vw,40px)}
/* ページヘッダーの英字ラベルだけ 13→16px・下の線は無し。
   線が無くなるとその高さ（10px＋2px）ぶん見出しに寄るので、下の余白を14→20pxに足している。
   ★このページヘッダーの中だけ。節の英字ラベル（ABOUT／CONSULTATION など）は元のまま */
.page-head .eyebrow{font-size:16px; letter-spacing:.24em; margin-bottom:20px}
.page-head .eyebrow::after{display:none}

/* 2026-09-04 に「太さ300 → 400」に変わったので、以前の
   .page-head .about-lead b{font-weight:300} は削除した。新しい指定は style.css の .about-lead b。
   ★300を使う所が無くなったので、各ページの Google Fonts からも 300 を外している */

/* パンくず（丸いメニューボタンの下へ・時計回りに90度・文字は黒）
   ★回転は transform ではなく縦組み（writing-mode:vertical-rl ＋ text-orientation:sideways）で出す。
     transform だと回る前の箱が場所を占めたままになる（CASEカードのラベルと同じ作り）。
   ★横位置は「ボタンの中心」に置きたいが、画面が狭くなると版面（.wrap）の右端が
     ボタンの下まで寄ってきて、本文や写真に重なる。そこで
     「ボタンの中心」と「右の余白の内側16px」の小さいほうを採る＝広い画面はボタンの真下、
     余白が狭い画面は余白の中へ逃げる。どの幅でも版面には入らない。 */
.crumb{
  position:absolute; z-index:94; margin:0;
  top:137px;                                   /* ボタンの下端117px（top22＋高さ95）＋20px */
  right:min(
    calc(var(--sideW) - 14px + 49px),          /* ボタンの中心 */
    calc(max(var(--sideW), (100vw - var(--wrap)) / 2) - 16px)   /* 右の余白の内側 */
  );
  transform:translateX(50%);
  writing-mode:vertical-rl; text-orientation:sideways;
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.14em; color:var(--ink);
}
.crumb a{text-decoration:none; color:var(--ink)}
/* パンくずが縦に立つ位置は、ABOUTの部品が持つ「写真の右上に覗かせる金の面」の右端と近い。
   そのままだと面のふちが文字の途中を斜めに横切って読みにくいので、
   このページだけ覗かせる量を「右へ19%出す」から「右端から6%内側」に変え、パンくストの手前で止める（部品自体は変えない） */
.page-head .about-art::before{right:6%}
/* イラストのときは切り抜かない */
.about-art.illust img{border-radius:0}
/* 2026-09-18：地図のイラスト（緑）が金の面と同化して読みにくいので、イラストの後ろの面は白にする */
.about-art.illust::before{background:var(--white)}
.crumb a:hover{color:var(--green-d)}
.crumb .sep{font-family:var(--font-en); color:var(--ink)}

/* ---------- 節の余白 ----------
   TOP の #worries → #why → #support と同じ組み方（▲屋根が2つ続く形）をそのまま使う */
#promise{padding:50px 0 200px}   /* 下＝次の▲屋根が重なるぶんの逃げ */
#flow3{padding:50px 0 150px}     /* 自分の▲屋根が上に出るぶん、上を詰める */
#promise.roof::before{background:var(--white)}
#flow3.roof::before{background:var(--cream-2)}
/* 最終CTAの枠が100px上へ出るぶんを、その上の節の下余白に足す（TOPの #faq と同じ） */
#howto{padding-bottom:calc(var(--space) + 100px)}

/* 不安のカードは「いびつな円」。TOPは3列だがこのページは4つ＝2列なので、
   そのままだと1枚が横に伸びて楕円が平たくなる。段の幅を絞って円に近づける */
#worries .grid{width:min(100%,820px); margin-inline:auto}

/* ---------- 3ステップ（FLOWのカードを止めて3列に） ----------
   .flow は右から左へ流れるトラック。ここでは動かさず、3列のグリッドとして置く。
   STEPのピルがカードの上に13px出るので、上に20pxの逃げを持たせる（.flow-marquee と同じ値） */
.flow.static{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
  width:auto; margin-top:20px; animation:none;
}
.flow.static .st{flex:none; margin-right:0}
/* 矢印を置くときは、三角（幅17px）が入るように列の間を広げる */
.flow.static.arrows{column-gap:40px}

/* ---------- ボタンの無いカード（SUPPORTのカードを流用） ----------
   .gate は下辺にボタンが半分はみ出す前提の下余白を持っている。
   ボタンを置かないぶん、その逃げ（23px）を外して詰める */
.gate-2{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;
  width:min(100%,820px); margin:34px auto 0;   /* 上34px＝丸が32px出るぶんの逃げ */
}
.gate.no-go{padding-bottom:34px}
/* 丸の中は肉球（CONSULTATIONのアイコンと同じ扱い。原本が真っ黒の塗りなのでマスクにして緑で塗る） */
.gate .ic .niku{
  display:block; width:30px; height:30px; background:var(--green-d);
  -webkit-mask:no-repeat center/contain url("img/niku.svg");
  mask:no-repeat center/contain url("img/niku.svg");
}

@media (max-width:1024px){
  #promise{padding:50px 0 170px}
}
@media (max-width:820px){
  .page-head{padding-top:clamp(120px,26vw,150px)}
  /* ボタンが小さくなる（top12・高さ72・right10）ので、パンくずも合わせて上げる。
     横は右の余白（--sideW＝30px）の中にちょうど収める＝列の幅24pxを置き、
     版面の右端にそろえて、画面のふちには6px残す（right:18px＝右端12px＋列の半分12px） */
  .crumb{top:100px; right:18px}
  .flow.static{grid-template-columns:1fr; gap:34px}
  .flow.static.arrows{gap:56px}
  .flow.static.arrows .st:not(:last-child)::after{
    top:auto; right:auto; left:50%; bottom:calc(-1 * var(--arrow-gap, 56px) / 2 - 12px);
    transform:translateX(-50%); border-width:17px 11px 0 11px;
    border-color:var(--brown) transparent transparent transparent;
  }
  .gate-2{grid-template-columns:1fr; width:100%; gap:56px}
  #promise{padding:40px 0 140px}
  #flow3{padding:40px 0 100px}
}

/* =========================================================
   ここから「私たちの強み・できること」（tsuyomi.html）で足したもの
   ========================================================= */

/* ---------- 節の余白 ---------- */
#strength{padding:50px 0 150px}        /* 自分の▲屋根が上に出るぶん、上を詰める */
#strength.roof::before{background:var(--white)}
/* 最終CTAの枠が100px上へ出るぶんを、その上の節の下余白に足す（TOPの #faq と同じ） */
#support{padding-bottom:calc(var(--space) + 100px)}
/* PART 1／PART 2 のラベルは中央ぞろえ */
#strength .sec-head .eyebrow, #support .sec-head .eyebrow{text-align:center}
#strength .sec-head .eyebrow::after, #support .sec-head .eyebrow::after{margin-inline:auto}

/* ---------- ワンストップ体制の図 ----------
   [お客様]──[センター]─┬─[士業]…
   線はすべて 2px の実線。CTAの「幹と枝」と同じ見せ方にそろえている。
   ★中央の1frは線を通すためだけの列。狭い画面では縦積みにして、線も縦にする */
.onestop{
  --os-line:2px; --os-c:var(--ink);
  display:grid; grid-template-columns:auto 56px auto minmax(0,1fr);
  align-items:center; gap:0; margin-top:56px;
  /* 版面いっぱいだと士業の札が横に伸びきって図に見えないので、幅を締める */
  width:min(100%,940px); margin-inline:auto;
}
/* 固有名詞を途中で折らない（「成迫会計事務所」が「成／迫…」になるのを防ぐ） */
.nw{white-space:nowrap}
.os-node{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:var(--white); border:var(--os-line) solid var(--os-c); border-radius:999px;
  font-family:var(--font-jp); font-weight:700; letter-spacing:.06em;
}
.os-node.you{width:104px; height:104px; font-size:15px}
.os-node.hub{
  width:clamp(150px,15vw,186px); height:clamp(150px,15vw,186px); border-width:5px; padding:0 14px;
  border-radius:50%; line-height:1.5;
}
.os-node.hub b{font-size:clamp(13px,1.1vw,15px)}
.os-node.hub small{margin-top:6px; font-weight:500; font-size:12px; color:var(--green-d); letter-spacing:.1em}
.os-link{display:block; height:var(--os-line); background:var(--os-c)}
/* 士業の列＝縦の幹＋横の枝 */
.os-pros{position:relative; margin:0; padding-left:76px; display:flex; flex-direction:column; gap:14px}
.os-pros::before{                       /* 幹（先頭の項目の中心〜最後の項目の中心） */
  content:""; position:absolute; left:56px; width:var(--os-line); background:var(--os-c);
  top:calc(var(--os-row) / 2); bottom:calc(var(--os-row) / 2);
}
.os-pros::after{                        /* センターから幹までの横線 */
  content:""; position:absolute; left:0; right:calc(100% - 57px); top:50%;
  height:var(--os-line); background:var(--os-c); transform:translateY(-50%);
}
.os-pros li{
  --os-row:56px;
  position:relative; min-height:var(--os-row);
  display:flex; flex-direction:column; justify-content:center;
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:12px 20px;
}
.os-pros{--os-row:56px}
.os-pros li::before{                    /* 枝 */
  content:""; position:absolute; right:100%; top:50%; width:20px; height:var(--os-line);
  background:var(--os-c); transform:translateY(-50%);
}
.os-pros li b{font-family:var(--font-jp); font-size:15px; letter-spacing:.04em}
.os-pros li small{font-size:12px; color:var(--ink-2); letter-spacing:.06em}

/* ---------- タブ ---------- */
.tablist{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:56px}
.tab{
  min-height:60px; padding:0 30px; border-radius:999px;
  background:var(--white); border:1.5px solid var(--line); color:var(--ink-2);
  font-family:var(--font-jp); font-weight:700; font-size:16px; letter-spacing:.06em;
  transition:background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.tab:hover{border-color:var(--brown); color:var(--brown)}
.tab.on{background:var(--brown); border-color:var(--brown); color:#fff; box-shadow:0 6px 0 var(--brown-d)}
.tabpanel[hidden]{display:none}
/* 2026-09-04：タブの中身を5pxの外線で囲う。
   ★地は敷かない（透明のまま）。中の時系列カードが白なので、地を白にすると
     カードの輪郭が消えてしまう。囲みは線だけにして、下のクリームを透かす */
.tabpanel{
  border:5px solid var(--ink); border-radius:var(--r-lg);
  padding:clamp(30px,3.4vw,52px) clamp(20px,3vw,44px);
}
.tab-head{margin-bottom:48px}
.tab-head .sec-title{font-size:clamp(19px,2.4vw,26px)}

/* ---------- 時系列（いつ・何をするか） ----------
   左＝時期の札／右＝白いカード。札の中心に幹を通す */
.sched{--term-w:132px; --sched-gap:34px; position:relative; margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:26px}
.sched::before{                         /* 幹＝札の中心を縦に通す */
  content:""; position:absolute; z-index:0;
  left:calc(var(--term-w) / 2 - 1px); width:2px; top:34px; bottom:34px; background:var(--line);
}
.st{display:grid; grid-template-columns:var(--term-w) minmax(0,1fr); gap:var(--sched-gap); align-items:start}
.st .term{position:relative; z-index:1; display:flex; justify-content:center}
.termbox{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  width:var(--term-w); height:var(--term-w); border-radius:50%;
  background:var(--brown); color:#fff; font-family:var(--font-jp); font-weight:700; line-height:1.35;
}
.termbox b{font-family:var(--font-en); font-weight:500; font-size:38px; line-height:1}
.termbox small{margin-top:4px; font-size:12px; letter-spacing:.08em}
/* 文字だけの札は、丸ではなく角の丸い四角にして2行を収める */
.termbox.txt{border-radius:22px; height:auto; min-height:72px; padding:14px 10px; background:var(--sage); color:var(--ink)}
.termbox.txt b{font-family:var(--font-jp); font-weight:700; font-size:14px; line-height:1.7; letter-spacing:.04em}
.stbody{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:30px 32px}
.sttitle{font-size:22px; line-height:40px; margin-bottom:14px; line-break:strict}   /* 19→22px・行間32.3→40px */
.stlist{margin:0; padding:0}
.stlist li{position:relative; padding-left:20px; font-size:15px; line-height:1.95; color:var(--ink-2)}
.stlist li::before{content:""; position:absolute; left:2px; top:.85em; width:6px; height:6px; border-radius:50%; background:var(--green)}
.stnote{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); font-size:14px; line-height:1.95; color:var(--ink-2)}
/* 2026-09-08：支給原稿は「●見出し＋本文」がひとつの札に何本も入る。
   .stitem がその1本分。2本目からは間を空けて、区切りが見えるようにする */
.stitem + .stitem{margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
/* 生前の札は「エンディングノート」まで入る幅が要る（132pxだと「エンディングノ／ート」と割れた）。
   語の途中で折らせないので、幅が足りないと必ずはみ出す＝幅で解く */
#t-sonzen .sched{--term-w:156px}
.termbox.txt b{word-break:keep-all; overflow-wrap:normal}
.stitem .sttitle{margin-bottom:10px}
.sttext{font-size:15px; line-height:1.95; color:var(--ink-2)}
.sttext + .sttext{margin-top:10px}
/* PCの版面いっぱい（1100px以上）で2行に収めたい段落。字送りだけを少し詰める（文字の大きさは変えない） */
@media (min-width:1100px){ .sttext.fit2{letter-spacing:.03em} }
.svc-chip{text-decoration:none}
/* ★＝私たちがお手伝いできるところ。本文と見分けがつくように面を敷く */
.stmark{margin-top:12px; padding:12px 16px; border-radius:12px; background:var(--sage);
        font-size:14px; line-height:1.9; color:var(--ink); text-indent:-1em; padding-left:calc(16px + 1em)}
.stnote a{color:var(--green-d)}
/* 遺言書がある／ない の2列 */
.stsplit{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px}
.stcase{background:var(--cream-2); border-radius:16px; padding:20px 22px}
.stcase h4{font-size:15px; margin-bottom:10px}
.stcase .stlist li{font-size:14px}
/* サービスへの入口（押すとポップアップが開く。TOPのサポート内容と同じ原稿） */
.stsvc{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.svc-chip{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; border-radius:999px;
  background:var(--white); border:1.5px solid var(--brown); color:var(--brown);
  font-family:var(--font-jp); font-weight:700; font-size:13px; letter-spacing:.04em; cursor:pointer;
  transition:background-color .25s, color .25s, transform .25s ease;
}
.svc-chip .ar{font-family:var(--font-en); font-size:13px; transition:transform .25s ease}
.svc-chip:hover{background:var(--brown); color:#fff; transform:translateY(-2px)}
.svc-chip:hover .ar{transform:translateX(3px)}
.sched-note{margin-top:30px; text-align:center; font-size:13px; color:var(--ink-2); line-height:1.9}

/* 2026-09-16：「生前の備え」と「相続発生後」で、タブと時系列の札・幹の色を分ける。
   新しい色は足さず、パレットの2系統を使う＝生前＝金（--green 系）／相続発生後＝茶（--brown 系）。
   ★色を変えるのはタブ・札・幹だけ。カード（白）と文字の色は両方同じ */
#tab-t-sonzen{border-color:var(--orange-d); color:var(--green-d)}
#tab-t-sonzen:hover{border-color:var(--green-d); color:var(--green-d)}
#tab-t-sonzen.on{background:var(--green); border-color:var(--green); color:var(--ink); box-shadow:0 6px 0 var(--orange-d)}
#tab-t-hassei{border-color:var(--brown); color:var(--brown)}
#tab-t-hassei.on{background:var(--brown); border-color:var(--brown); color:#fff; box-shadow:0 6px 0 var(--brown-d)}
#t-sonzen .sched::before{width:4px; left:calc(var(--term-w) / 2 - 2px); background:var(--green)}
#t-sonzen .termbox, #t-sonzen .termbox.txt{background:var(--green); color:var(--ink)}
#t-hassei .sched::before{width:4px; left:calc(var(--term-w) / 2 - 2px); background:var(--brown)}
#t-hassei .termbox, #t-hassei .termbox.txt{background:var(--brown); color:#fff}

@media (max-width:1024px){
  .onestop{grid-template-columns:auto 36px auto minmax(0,1fr)}
  .os-pros{padding-left:60px}
  .os-pros::before{left:44px}
  .os-pros::after{right:calc(100% - 45px)}
  .sched{--term-w:110px; --sched-gap:24px}
  .termbox b{font-size:32px}
}
@media (max-width:820px){
  /* 図は縦積みに。線も縦にして、上から下へ読ませる */
  .onestop{grid-template-columns:1fr; justify-items:center; gap:0; margin-top:44px}
  .os-link{width:var(--os-line); height:28px; background:var(--os-c)}
  .os-pros{width:100%; padding:28px 0 0; margin-top:0}
  .os-pros::before{left:50%; transform:translateX(-1px); top:0; bottom:auto; height:28px}
  .os-pros::after{display:none}
  .os-pros li::before{display:none}
  .os-node.hub{width:170px; height:170px}
  /* 時系列は札を上に載せる */
  .sched::before{display:none}
  .st{grid-template-columns:1fr; gap:14px}
  .st .term{justify-content:flex-start}
  .termbox{width:auto; min-width:110px; height:auto; min-height:0; border-radius:999px; padding:10px 22px;
    flex-direction:row; gap:8px}
  .termbox b{font-size:26px}
  .termbox.txt{border-radius:999px; padding:10px 22px}
  .termbox.txt b{font-size:14px}
  .termbox.txt br{display:none}
  .stbody{padding:26px 22px}
  .stsplit{grid-template-columns:1fr}
  .tablist{gap:10px; margin-bottom:44px}
  .tab{min-height:52px; padding:0 20px; font-size:14px}
}

/* 下層：320px幅だけの逃げ */
@media (max-width:340px){
  /* 長い見出しは23pxだと1行12字（298px）が版面260pxに入らず、「す。」だけの行ができる。19pxで2行に収める */
  .page-ttl.long{font-size:19px}
}

/* =========================================================
   ここから「費用とご相談の流れ」（hiyou.html）で足したもの
   ========================================================= */

/* ---------- 節の余白（TOPの #why → #support と同じ▲屋根2連） ---------- */
#price{padding:50px 0 200px}          /* 下＝次の▲屋根が重なるぶんの逃げ */
#safe{padding:50px 0 150px}
#price.roof::before{background:var(--white)}
#safe.roof::before{background:var(--cream-2)}
#price .sec-head .eyebrow, #flow .sec-head .eyebrow{text-align:center}
#price .sec-head .eyebrow::after, #flow .sec-head .eyebrow::after{margin-inline:auto}

/* ---------- 3つの約束（無料／事前見積／明朗会計） ---------- */
.pledges{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:110px}
.pledges.two{grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,746px); margin-inline:auto}
/* 店舗ごとのアクセス（店名＋行き方を1行ずつ） */
.shop-access{margin:0; padding:0; list-style:none; text-align:left; display:inline-block}
.shop-access li{position:relative; padding-left:18px; font-size:14px; line-height:1.95; color:var(--ink-2); letter-spacing:.04em}
.shop-access li::before{content:""; position:absolute; left:2px; top:.85em; width:7px; height:7px; border-radius:50%; background:var(--green)}
.shop-access .sa-nm{font-weight:700; color:var(--ink); margin-right:1em}
.shop-access .sa-way{display:inline-block}
.shop-access + p{margin-top:6px}
.pledge{
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-lg);
  padding:36px 24px; text-align:center;
}
.pledge b{display:block; font-family:var(--font-jp); font-size:clamp(24px,2.6vw,32px); letter-spacing:.06em}
/* 説明文の上余白 12 → 5px（.pledge small すべて＝下層の3枚組だけに出る部品） */
.pledge small{display:block; margin-top:5px; font-size:14px; color:var(--ink-2); letter-spacing:.06em}

/* ---------- 料金表 ----------
   ★狭い画面で横に送らせない。820px以下は1行を1枚のカードに組み替えて、
     見出し（サポート内容）を大きく、値は data-label のラベル付きで下に並べる */
.price-head{margin:0 0 34px}
/* 「おおよその費用イメージ」「相続税の申告（報酬の目安）」の見出し 24→28px。
   2つとも同じ要素（.price-head .sec-title）なので1行で両方に当たる */
.price-head .sec-title{font-size:clamp(19px,2.2vw,28px)}
/* リード文の上余白 22 → 10px。
   ★指示は「同一クラス全部・全ページ」だったが、.sec-lead は4ページで24か所あり、
     そのまま当てると承認済みのTOPを含む全節の見出し下が12px詰まる。
     ここでは料金表の2つの見出し（.price-head の中）だけに絞って当てている＝要確認。 */
.price-head .sec-lead{margin-top:10px}
.ptable{
  width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-md); overflow:hidden;
}
.ptable th, .ptable td{padding:18px 22px; text-align:left; vertical-align:top; font-size:16px; line-height:1.8}   /* 15→16px */
.ptable thead th{background:var(--ink); color:#fff; font-family:var(--font-jp); font-size:16px; text-align:center; letter-spacing:.1em}   /* 14→16px・中央ぞろえ */
.ptable thead th:nth-child(2){width:26%}
.ptable thead th:nth-child(3){width:34%}
.ptable.narrow thead th:nth-child(2){width:44%}
.ptable tbody th{font-family:var(--font-jp); font-weight:700; color:var(--ink); letter-spacing:.04em}
.ptable tbody tr + tr th, .ptable tbody tr + tr td{border-top:1px solid var(--line-2)}
.ptable tbody tr:nth-child(even) th, .ptable tbody tr:nth-child(even) td{background:var(--peach)}
.ptable .yen{font-family:var(--font-en); font-size:17px; color:var(--ink); letter-spacing:.02em}
.ptable .yen b{font-family:var(--font-jp); font-size:17px; color:var(--green-d)}
.ptable .note{font-size:13px; color:var(--ink-2); line-height:1.8}
.tnote{margin:18px 0 90px; font-size:13px; color:var(--ink-2); line-height:1.95}
.ptable + .tnote{margin-bottom:90px}

/* ---------- 流れの札「STEP 1」 ----------
   .termbox は「数字の下に単位」の形。STEPは上に置きたいので、その1件だけ余白を入れ替える */
.termbox small:first-child{margin:0 0 2px}
.stlead{font-size:15px; line-height:1.95; color:var(--ink-2)}

@media (max-width:1024px){
  .pledges{gap:18px; margin-bottom:90px}
  #price{padding:50px 0 170px}
}
@media (max-width:820px){
  #price{padding:40px 0 140px}
  #safe{padding:40px 0 100px}
  .pledges{grid-template-columns:1fr; gap:14px; margin-bottom:70px}
  .pledges.two{grid-template-columns:1fr}
  .pledge{padding:26px 20px}
  .tnote, .ptable + .tnote{margin-bottom:64px}
  /* 表 → 1行1枚のカードへ */
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td{display:block; width:auto}
  .ptable{border:0; background:transparent; border-radius:0; table-layout:auto}
  .ptable thead{display:none}
  .ptable tbody tr{
    background:var(--white); border:5px solid var(--ink); border-radius:20px;
    padding:20px 22px; margin-bottom:14px;
  }
  .ptable tbody tr:nth-child(even) th, .ptable tbody tr:nth-child(even) td{background:transparent}
  /* PCの行間の罫線は消し、代わりに「サポート内容」の下だけ仕切りを1本入れる */
  .ptable tbody tr + tr th, .ptable tbody tr + tr td{border-top:0}
  .ptable tbody th{padding:0 0 10px; margin-bottom:2px; font-size:16px;
    border:0; border-bottom:1px solid var(--line-2)}
  .ptable tbody td{padding:0; border:0}
  .ptable td::before{
    content:attr(data-label); display:block; margin-top:10px;
    font-family:var(--font-en); font-size:11px; letter-spacing:.12em; color:var(--ink-3);
  }
  .ptable td:empty{display:none}
  .ptable .yen{font-size:19px}
}


/* =========================================================
   ここから「相談会・セミナー」（soudankai.html）で足したもの
   ========================================================= */

/* ---------- 節の余白（▲屋根2連。費用ページと同じ組み方をそのまま使う） ---------- */
#weekend{padding:50px 0 200px}   /* 下＝次の▲屋根が重なるぶんの逃げ */
#online{padding:50px 0 150px}    /* 自分の▲屋根が上に出るぶん、上を詰める */
#weekend.roof::before{background:var(--white)}
#online.roof::before{background:var(--cream-2)}
#weekend .sec-head .eyebrow, #seminar .sec-head .eyebrow, #dispatch .sec-head .eyebrow{text-align:center}
#weekend .sec-head .eyebrow::after, #seminar .sec-head .eyebrow::after, #dispatch .sec-head .eyebrow::after{margin-inline:auto}
/* 上辺の波の色は「上の節の地」。ここは講師派遣＝ピーチを下ろす
   （style.css の #line は上がブログ＝白。id を分けているので混ざらない） */
#tsushin{padding-top:calc(var(--space) + var(--wave-h) * .5)}
#tsushin .wave-top{--wave-c:var(--peach)}

/* ---------- 日程表 ----------
   料金表と同じ .ptable。列の幅と、右端のボタンの詰めだけを変える。
   狭い画面で1行1枚のカードに組み替わるところは、そのまま受け継ぐ */
.ptable.dates thead th:nth-child(2){width:24%}
.ptable.dates thead th:nth-child(3){width:26%}
.ptable.dates td.go{padding-top:12px; padding-bottom:12px}
.ptable.dates td.go .btn{width:100%}
/* 表のすぐ下に囲みが続くので、注記の下余白（既定90px）は詰める */
#weekend .ptable + .tnote{margin-bottom:34px}

/* ---------- 囲み（こんな方が／これまでお話しした先） ----------
   ★囲みは薄い外線1本。色の座布団・左の色罫・絵文字は使わない（全社の作法） */
.checks{padding:30px 34px; border:1px solid var(--line); border-radius:var(--r-md)}
.checks-ttl{display:block; font-family:var(--font-jp); font-size:17px; letter-spacing:.06em; margin-bottom:14px}
.checks ul{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 30px}
.checks.wide ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.checks li{position:relative; padding-left:22px; font-size:15px; line-height:1.95; color:var(--ink-2)}
.checks li::before{content:""; position:absolute; left:4px; top:.85em;
  width:7px; height:7px; border-radius:50%; background:var(--green)}

/* ---------- オンライン相談の写真 ----------
   この案件のカードはすべて黒5px。写真も同じ線でそろえる */
.photo-frame{border:5px solid var(--ink); border-radius:var(--r-lg); overflow:hidden; background:var(--white)}
.photo-frame img{display:block; width:100%; height:auto}

/* セミナーの注記は節の最後。既定の下余白90pxは要らない */
/* カードは820px幅で中央。注記だけ版面いっぱいだと左にずれて見えるので幅をそろえる */
/* この注記だけ 中央ぞろえ＋文字色を本文の黒へ */
#seminar .tnote{width:min(100%,820px); margin:18px auto 0; text-align:center; color:var(--ink)}
/* このリード文だけ 文字色を本文の黒へ */
#seminar .sec-lead{color:var(--ink)}
/* 2026-09-18：これからのセミナー（1件＝1枚の .evt）。見た目はボタンの無いカード（.gate.no-go）のまま、
   中に「種別・名前・日時・会場」を持たせる。件数が変わっても崩れないよう、1枚の幅を決めて中央から並べる */
.evt-list{display:flex; flex-wrap:wrap; justify-content:center; gap:56px 24px;
  width:min(100%,820px); margin:34px auto 0}   /* 上34px＝丸が32px出るぶんの逃げ */
.evt-list .evt{flex:0 1 calc((100% - 24px) / 2); min-width:0}
.evt .kind{font-family:var(--font-jp); font-size:13px; letter-spacing:.1em; color:var(--green-d)}
.evt .evt-ttl{margin:0; font-family:var(--font-jp); font-size:20px; line-height:36px; letter-spacing:.04em}
.evt .evt-info{width:100%; margin:8px 0 0; border-top:1px solid var(--line-2); text-align:left}
.evt .evt-info div{display:grid; grid-template-columns:3em minmax(0,1fr); gap:12px; padding:12px 2px; border-bottom:1px solid var(--line-2)}
.evt .evt-info dt{font-size:14px; font-weight:700; line-height:1.8; color:var(--ink)}
.evt .evt-info dd{margin:0; font-size:15px; line-height:1.8; color:var(--ink-2)}
/* 各カードの下に「申し込みフォーム」「チラシを見る（PDF）」 */
.evt .evt-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%; margin-top:18px}
.evt .evt-btns .btn{flex:1 1 200px; justify-content:center; white-space:nowrap}
@media (max-width:820px){
  .evt-list .evt{flex-basis:100%}
}
/* 2枚以上＝横に送る（app.js が .is-slider を付け、前後ボタンと点を足す）。
   1枚の幅を版面より狭くして、次のカードの端をのぞかせる＝横に続くと分かる。
   横スクロールの箱は縦もはみ出しを切るので、上の丸（32px）と浮き上がり（5px）のぶん内側に余白を取る。
   ★幅は % で書かない（左右の余白の % は親の幅から、カードの % は余白を引いた残りから計算されて食い違う）。
     版面（.wrap）の幅 cqi から決める。
   箱は画面の左右の端まで広げる（版面で切ると、のぞいている次のカードが途中でぷつりと切れて見える） */
#seminar{overflow-x:clip}
#seminar .wrap{container-type:inline-size}
.evt-list.is-slider{
  --evt-box:100vw;
  --evt-w:min(520px, 78cqi);
  width:auto; margin-inline:calc(50% - 50vw);
  flex-wrap:nowrap; justify-content:flex-start; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin-top:0; padding:40px calc((var(--evt-box) - var(--evt-w)) / 2) 12px;
}
.evt-list.is-slider::-webkit-scrollbar{display:none}
.evt-list.is-slider .evt{flex:0 0 var(--evt-w); scroll-snap-align:center}
.evt-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px}
.evt-dots{display:flex; gap:8px}
.evt-dots button{width:10px; height:10px; padding:0; border:0; border-radius:50%; background:var(--line); cursor:pointer}
.evt-dots button[aria-current="true"]{background:var(--brown)}
@media (max-width:820px){
  .evt-list.is-slider{--evt-w:86cqi}
}
/* 講師派遣は「3つの数字 → 実績の囲み → ボタン」と続くので、3つの下を詰める */
#dispatch .pledges{margin-bottom:34px}
#dispatch .btn-row{margin-top:34px}

@media (max-width:1024px){
  #weekend{padding:50px 0 170px}
}
@media (max-width:820px){
  #weekend{padding:40px 0 140px}
  #online{padding:40px 0 100px}
  .checks{padding:24px 22px}
  .checks ul, .checks.wide ul{grid-template-columns:1fr}
  .ptable.dates td.go .btn{width:auto}
  #weekend .ptable + .tnote{margin-bottom:28px}
}


/* =========================================================
   ここから「お客様の声・スタッフ紹介」（koe.html）で足したもの
   ========================================================= */

/* ---------- 節の余白（▲屋根2連） ---------- */
#koe{padding:50px 0 200px}
#staff{padding:50px 0 150px}
#koe.roof::before{background:var(--white)}
#staff.roof::before{background:var(--cream-2)}
#koe .sec-head .eyebrow, #staff .sec-head .eyebrow{text-align:center}
#koe .sec-head .eyebrow::after, #staff .sec-head .eyebrow::after{margin-inline:auto}

/* ---------- お客様の声（TOPの .vcard をそのまま並べる） ----------
   TOPは横に送る形（.vtrack）。一覧のこのページは送らずに並べたいので、
   flex の幅指定だけ打ち消して2列のグリッドに置く。カードの見た目は触らない */
.vgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;
  width:min(100%,880px); margin-inline:auto}
.vgrid .vcard{flex:none}
/* 一覧なので、どの声か見出しで拾えるようにする（TOPには無い1行） */
.vgrid .vcard h3{margin:0; font-size:19px; line-height:1.7; letter-spacing:.06em; text-align:center}
#koe .tnote{margin-bottom:0}
#koe .koe-more{margin-top:48px}

/* ---------- 相続コーディネーター ----------
   ★丸は顔写真が入る場所。写真が来るまでは肉球を置く（空の丸は「壊れている」に見える） */
.staffs{gap:24px}
.staff{
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-lg);
  padding:28px 22px 26px; text-align:center;
}
.staff .face{
  display:flex; align-items:center; justify-content:center;
  width:92px; height:92px; margin:0 auto 16px;
  background:var(--sage); border:5px solid var(--ink); border-radius:50%;
}
.staff .face .niku{
  display:block; width:38px; height:38px; background:var(--green-d);
  -webkit-mask:no-repeat center/contain url("img/niku.svg");
  mask:no-repeat center/contain url("img/niku.svg");
}
.staff .role{display:block; font-family:var(--font-jp); font-size:13px; letter-spacing:.1em; color:var(--ink)}   /* 同一クラス全ページのため相続コーディネーター紹介にも */
.staff .nm{display:block; margin-top:6px; font-family:var(--font-jp); font-size:21px; letter-spacing:.08em}
.staff p{margin:12px 0 0; font-size:13px; line-height:1.95; color:var(--ink-2); text-align:left}
/* 2026-09-18：紹介は2名。2枚を版面の中央に置く（4列の幅のまま2枚だと左に寄る） */
.staffs.two{width:min(100%,820px); margin-inline:auto}
/* 2026-10-05：スタッフ紹介を別ページにし、全員を3列で並べる（WordPress ではカスタム投稿「スタッフ」） */
.staffs.all{width:min(100%,1080px); margin-inline:auto; display:flex; flex-wrap:wrap; justify-content:center}
/* 13名。PC4列・820px以下2列。最後の段は中央に寄せる */
.staffs.all .staff{flex:0 0 calc((100% - 72px) / 4); padding:24px 16px 22px}
.staffs.all .staff .nm{font-size:18px}
.staff .lv{display:inline-block; margin-top:10px; padding:2px 12px; border-radius:999px;
  background:var(--cream-2); border:1px solid var(--line); font-family:var(--font-jp); font-weight:700; font-size:12px; letter-spacing:.06em}
@media (max-width:820px){ .staffs.all{gap:16px} .staffs.all .staff{flex-basis:calc((100% - 16px) / 2)} }
/* 顔写真が入ったときの丸の中 */
.staff .face img{display:block; width:100%; height:100%; object-fit:cover; border-radius:50%}
.staff .face:has(img){overflow:hidden; width:128px; height:128px}   /* 写真は肉球より大きく見せる */
/* チームで支える体制（文＋イラスト）。カードと同じ黒5pxの枠で、2名の下に置く */
.team{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(20px,3vw,40px); align-items:center;
  width:min(100%,820px); margin:56px auto 0; padding:clamp(28px,3.4vw,44px) clamp(24px,3.6vw,48px);
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-lg);
}
.team-ttl{margin:0 0 14px; font-family:var(--font-jp); font-size:clamp(20px,1.9vw,24px); line-height:1.6; letter-spacing:.06em}
.team-txt p{margin:0; font-size:15px; line-height:2.0; color:var(--ink-2)}
.team-art{margin:0}
.team-art img{display:block; width:100%; height:auto}
#staff .tnote{margin-bottom:0}

@media (max-width:1024px){
  #koe{padding:50px 0 170px}
  .staff .nm{font-size:19px}
}
@media (max-width:820px){
  #koe{padding:40px 0 140px}
  #staff{padding:40px 0 100px}
  .vgrid{grid-template-columns:1fr}
  .team{grid-template-columns:1fr; margin-top:40px}
  .team-art{order:-1; width:min(78%,300px); margin-inline:auto}
}


/* =========================================================
   ここから「ブログ」（blog.html）で足したもの
   ========================================================= */

#list{padding:50px 0 calc(var(--space) + 100px)}
#list.roof::before{background:var(--white)}

/* ---------- 一覧＋サイドバーの2段組み ---------- */
.blog-page{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:min(5vw,64px); align-items:start}

/* 件数と並び替え */
.filterbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:34px; border-bottom:1px solid var(--line-2);
}
.filterbar .cnt{font-size:13px; letter-spacing:.08em; color:var(--ink-2)}
.filterbar .cnt b{font-family:var(--font-en); font-size:18px; color:var(--ink); margin:0 2px}
.filterbar .sorts{display:flex; gap:8px}
.sortb{
  border:1.5px solid var(--line); background:var(--white); color:var(--ink-2);
  border-radius:999px; padding:8px 18px; font-family:var(--font-jp); font-size:13px; letter-spacing:.06em;
  cursor:pointer; transition:background-color .25s, color .25s, border-color .25s;
}
.sortb.on{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- 記事カード（TOPの .post と同じ横並び。一覧なので段差は付けない） ---------- */
.pcards{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:45px}   /* 30→45px */
.pcard{display:flex; align-items:flex-start; gap:min(2.6vw,32px); text-decoration:none; transition:transform .3s ease}
.pcard:hover{transform:translateY(-5px)}
.pcard .thumb{
  flex:0 0 clamp(120px,15vw,180px); aspect-ratio:1; border-radius:var(--r-md);
  overflow:hidden; background:var(--sage);
}
.pcard .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease)}
.pcard:hover .thumb img{transform:scale(1.05)}
.pcard .body{flex:1 1 auto; min-width:0; padding-top:4px}
.pcard .meta{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.pcard .cat{
  display:inline-block; background:var(--sage); color:var(--green-d);
  border-radius:999px; padding:5px 14px; font-family:var(--font-jp); font-size:12px; letter-spacing:.08em;
}
.pcard .date{font-family:var(--font-en); font-size:13px; color:var(--ink-3); letter-spacing:.06em}   /* 12→13px */
.pcard h3{font-size:20px; line-height:1.75; letter-spacing:.06em; color:var(--ink)}   /* 19→20px */
.pcard .excerpt{display:block; margin-top:10px; font-size:15px; line-height:1.95; color:var(--ink-2)}   /* 14→15px */
/* 12→14px／#a69e96→#1f1f1f（同一クラス全ページ）
   書いた人の左に、キャラクターの顔を小さい丸のアイコンで置く
   （画像は記事ページの「この記事を書いた人」と同じ dog-face.webp。
     相続コーディネーターの顔写真が撮れたら、この丸の中を差し替えるだけで済む） */
.pcard .by{
  display:flex; align-items:center; gap:9px;
  margin-top:10px; font-size:14px; letter-spacing:.08em; color:var(--ink);
}
.pcard .by::before{
  content:""; flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--ink);
  background:var(--sage) url("img/dog-icon.webp") no-repeat center/cover;
}

/* ---------- ページ送り ---------- */
.pager{display:flex; justify-content:center; gap:10px; margin-top:56px}
.pg{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; border:1.5px solid var(--line); background:var(--white);
  font-family:var(--font-en); font-size:15px; color:var(--ink); text-decoration:none;
  transition:background-color .25s, color .25s, border-color .25s;
}
.pg.on{background:var(--ink); border-color:var(--ink); color:#fff}
a.pg:hover{background:var(--brown); border-color:var(--brown); color:#fff}

/* ---------- サイドバー ---------- */
.blog-side{display:flex; flex-direction:column; gap:22px; position:sticky; top:110px}
.sbox{border:1px solid var(--line); border-radius:var(--r-md); padding:22px 20px}
.sttl{display:block; font-family:var(--font-jp); font-size:15px; letter-spacing:.08em; margin-bottom:14px}
.ssearch{display:flex; gap:8px}
.ssearch input{
  flex:1 1 auto; min-width:0; height:44px; padding:0 14px; border:1.5px solid var(--line);
  border-radius:999px; background:var(--white); font-family:inherit; font-size:14px; color:var(--ink);
}
.ssearch input::placeholder{color:var(--ink-3)}
.ssearch button{
  flex:0 0 44px; height:44px; border-radius:50%; border:1.5px solid var(--ink);
  background:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
/* 虫めがねは画像を足さずに丸＋柄で描く（読み込むものを増やさない） */
.ssearch .mg{position:relative; display:block; width:13px; height:13px; border:2px solid #fff; border-radius:50%}
.ssearch .mg::after{content:""; position:absolute; right:-5px; bottom:-4px; width:2px; height:8px; background:#fff; transform:rotate(-45deg)}
.slist, .srank{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.slist a, .srank a{
  display:block; padding:9px 0; font-size:14px; line-height:1.7; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--line-2); transition:color .25s;
}
.slist li:last-child a, .srank li:last-child a{border-bottom:0}
.slist a:hover, .srank a:hover{color:var(--green-d)}
.slist a small{color:var(--ink-3); font-size:12px}
.srank{counter-reset:r}
.srank li{position:relative; padding-left:26px}
.srank li::before{
  counter-increment:r; content:counter(r); position:absolute; left:0; top:12px;
  width:18px; height:18px; border-radius:50%; background:var(--sage); color:var(--green-d);
  font-family:var(--font-en); font-size:11px; display:flex; align-items:center; justify-content:center;
}
.line-box{background:var(--peach); border-color:transparent}
/* この見出しだけ 中央ぞろえ＋下に1pxの線（線色は #ffffff の指定）
   ★地が #f7f6f5（ほぼ白）なので、白い線はほとんど見えません。はっきり区切るなら
     var(--line)（#d4cfc7）などに変えます＝反映メモでご確認に出しています */
.line-box .sttl{text-align:center; border-bottom:1px solid #ffffff; padding-bottom:8px}
.line-box p{margin:0 0 14px; font-size:13px; line-height:1.9; color:var(--ink-2)}
.line-box .btn{width:100%}
#list .tnote{margin:56px 0 0}

@media (max-width:1024px){
  .blog-page{grid-template-columns:minmax(0,1fr) 240px; gap:36px}
  .pcard h3{font-size:17px}
}
@media (max-width:820px){
  #list{padding:40px 0 calc(var(--space-sm) + 90px)}
  /* 狭い画面はサイドバーを本文の下へ。追従も外す（画面を占領するため） */
  .blog-page{grid-template-columns:minmax(0,1fr); gap:56px}
  .blog-side{position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .line-box{grid-column:1 / -1}
  .pcard{gap:18px}
  .pcard .thumb{flex-basis:100px}
  .pcard .excerpt{font-size:13px}
}
@media (max-width:520px){
  .blog-side{grid-template-columns:minmax(0,1fr)}
  .pcard{flex-direction:column; gap:14px}
  .pcard .thumb{width:100%; flex-basis:auto; aspect-ratio:16/9}
}


/* =========================================================
   ここから「会社概要・アクセス」（kaisha.html）で足したもの
   ========================================================= */

#group{padding:50px 0 200px}
#overview{padding:50px 0 150px}
#group.roof::before{background:var(--white)}
#overview.roof::before{background:var(--cream-2)}
#group .sec-head .eyebrow, #overview .sec-head .eyebrow, #access .sec-head .eyebrow{text-align:center}
#group .sec-head .eyebrow::after, #overview .sec-head .eyebrow::after, #access .sec-head .eyebrow::after{margin-inline:auto}

/* ---------- グループの中での位置づけ ----------
   ★図を線で描かない。当センターだけ黒5px、ほかの会社は細い外線にして、
     「どこにいるか」を線の太さの差だけで見せる（線が増えるほど図は読みにくくなる） */
.gpanel{
  position:relative; width:min(100%,940px); margin:56px auto 0;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:44px 34px 34px;
}
.ghd{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--white); padding:0 20px;
  font-family:var(--font-jp); font-size:clamp(15px,1.5vw,18px); letter-spacing:.1em;
}
.gme{
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-md);
  padding:22px 24px; text-align:center;
}
.gme b{display:block; font-family:var(--font-jp); font-size:clamp(18px,2.1vw,24px); letter-spacing:.06em}
.gme small{display:block; margin-top:6px; font-size:13px; color:var(--green-d); letter-spacing:.08em}
.gkids{
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.gkids li{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; text-align:center;
  font-family:var(--font-jp); font-size:14px; line-height:1.6; letter-spacing:.04em; color:var(--ink-2);
}

/* ---------- センター概要（料金表と同じ .ptable の2列版） ---------- */
.ptable.ov thead th:nth-child(2){width:74%}
.ptable.ov td{line-height:1.95}
#overview .tnote{margin-bottom:0}

/* ---------- 店舗・アクセス ---------- */
.shops{display:flex; flex-direction:column; gap:60px; margin-top:56px}   /* 24→60px */
.shop{
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:row; align-items:stretch;
}
.shop .map{flex:0 0 42%; min-height:300px; background:var(--sage)}
.shop .map iframe{display:block; width:100%; height:100%; border:0}
/* 内側の余白を40px四方に（同一クラス全部・全ページ。.sbody は会社概要だけ） */
.shop .sbody{padding:40px; display:flex; flex-direction:column; flex:1 1 auto}
.snm{display:block; font-family:var(--font-jp); font-size:24px; letter-spacing:.08em}   /* 21 → 24px */
.sarea{margin:8px 0 0; font-size:12px; line-height:1.8; color:var(--green-d); letter-spacing:.04em}
.sinfo{margin:16px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 12px; flex:1 1 auto; align-content:start}
/* 12 → 14px・#a69e96 → #1f1f1f ／ 13 → 14px・#57534d → #1f1f1f */
.sinfo dt{font-family:var(--font-jp); font-size:14px; letter-spacing:.08em; color:var(--ink); white-space:nowrap}
.sinfo dd{margin:0; font-size:14px; line-height:1.8; color:var(--ink)}
.sinfo dd a{font-family:var(--font-en); font-size:17px; color:var(--brown); text-decoration:none; letter-spacing:.02em}
.shop .btn{margin-top:20px}

@media (max-width:1024px){
  #group{padding:50px 0 170px}
  .gkids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop .map{flex-basis:38%; min-height:260px}
  .sinfo{grid-template-columns:1fr; gap:2px 0}
  .sinfo dt{margin-top:8px}
}
@media (max-width:820px){
  #group{padding:40px 0 140px}
  #overview{padding:40px 0 100px}
  .gpanel{padding:38px 20px 24px}
  .gkids{grid-template-columns:1fr}
  /* 狭い画面は地図を上、情報を下に積む */
  .shop{flex-direction:column}
  .shop .map{flex:none; min-height:0; aspect-ratio:16/10}
  .sinfo{grid-template-columns:auto 1fr; gap:8px 12px}
  .sinfo dt{margin-top:0}
}


/* =========================================================
   ここから「お問い合わせ・LINE予約」（toiawase.html）で足したもの
   ========================================================= */

#ways{padding:50px 0 200px}
#form{padding:50px 0 150px}
#ways.roof::before{background:var(--white)}
#form.roof::before{background:var(--cream-2)}
#ways .sec-head .eyebrow, #form .sec-head .eyebrow{text-align:center}
#ways .sec-head .eyebrow::after, #form .sec-head .eyebrow::after{margin-inline:auto}
/* ★ id は #faq にしない。style.css の #faq はTOPの並び（上＝LINEのピーチ）を前提に
   上辺の波の色と上余白を決めているので、ここで使うと地の色が合わなくなる */
/* 2026-09-04：この節の下にあった最終CTAを削除。
   +100px は「CTAの枠が上の節へ100px飛び出す」ぶんの逃げ余白だったので、一緒に外す
   （節の外の重ね装飾を消すときは、逃がしていた側の余白も必ず外す） */
#qa{padding:var(--space) 0}

/* ---------- 3つの予約方法（TOPの .gate をそのまま使う） ---------- */
.ways .gate{padding-bottom:60px}
.ways .gate.no-go{padding-bottom:34px}
/* 2026-09-18：1列に積むと、上のカードからはみ出すボタン（23px）と下のカードの丸（32px）が重なり、
   ボタンの真ん中が押せなかった。1列のときだけ、はみ出し2つ分＋16pxあける */
@media (max-width:1024px){
  .grid.ways{row-gap:calc(23px + 32px + 16px)}
}
/* 「いちばん手軽」「24時間受付」の小さな札 */
.tagr{
  display:inline-block; margin-bottom:10px; padding:5px 14px; border-radius:999px;
  background:var(--sage); color:var(--green-d);
  font-family:var(--font-jp); font-size:14px; letter-spacing:.08em;   /* 12 → 14px */
}
.telist{display:flex; flex-direction:column; gap:8px; margin:14px 0 4px}
/* 19→22px・#6b3d2c→#1f1f1f／店名 12→13px・#a69e96→#1f1f1f
   ★「a すべて・small すべて」ですとサイト内の全リンク・全 small が対象になるので、
     このカードの中（.telist）だけに当てている */
.telist a{
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  font-family:var(--font-en); font-size:22px; color:var(--ink); text-decoration:none; letter-spacing:.02em;
}
.telist a small{font-family:var(--font-jp); font-size:13px; color:var(--ink); letter-spacing:.08em}

/* ---------- 入力 → 確認 → 完了 ---------- */
.fsteps{
  list-style:none; margin:0 auto 34px; padding:0; width:min(100%,520px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.fsteps li{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px solid var(--line); border-radius:999px; padding:10px 8px;
  font-family:var(--font-jp); font-size:13px; letter-spacing:.08em; color:var(--ink-3);
}
.fsteps li.on{border-color:var(--ink); background:var(--ink); color:#fff}
.fsteps .n{
  display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:var(--sage); color:var(--green-d); font-family:var(--font-en); font-size:11px;
}
.fsteps li.on .n{background:#fff; color:var(--ink)}

/* ---------- フォーム ---------- */
.fcard{
  width:min(100%,860px); margin-inline:auto;
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-lg);
  padding:40px clamp(20px,3.4vw,44px);
}
.frow{display:block}
.frow + .frow, .fgrid + .frow, .frow + .fgrid, .fgrid + .fgrid{margin-top:24px}
.fgrid > .frow + .frow{margin-top:0}
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.fl{display:block; margin-bottom:8px; font-family:var(--font-jp); font-size:14px; letter-spacing:.08em}
.req, .any{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  font-style:normal; font-family:var(--font-jp); font-size:11px; letter-spacing:.06em;
}
.req{background:var(--ink); color:#fff}
.any{background:var(--sage); color:var(--green-d)}
.fi{
  width:100%; min-height:52px; padding:0 16px;
  border:1.5px solid var(--line); border-radius:14px; background:var(--white);
  font-family:inherit; font-size:15px; color:var(--ink); letter-spacing:.04em;
}
.fi::placeholder{color:var(--ink-3)}
.fi:focus{outline:2px solid var(--green); outline-offset:1px; border-color:var(--green)}
.fa{min-height:0; padding:14px 16px; line-height:1.9; resize:vertical}
/* 選択肢の右に▼を描く（画像を足さない） */
.fs{
  appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 24px) calc(50% + 1px), calc(100% - 18px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.fagree{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:28px; font-size:14px; letter-spacing:.06em; cursor:pointer}
.fagree input{width:20px; height:20px; accent-color:var(--green-d)}
/* 「個人情報の取り扱い」＝プライバシーポリシーへのリンク（別タブ。入力中の内容を消さないため） */
.fagree a{color:var(--brown); text-decoration:underline; text-underline-offset:3px}
.fagree a:hover{text-decoration:none}
.fcard .btn-row{margin-top:24px}
/* セミナーのお申し込み欄（種別で出し分け）。display を持つ部品は [hidden] を明示しないと隠れない */
.fgrid[hidden], .fsemi[hidden]{display:none}
.frow + .fsemi, .fsemi + .frow, .fsemi + .fgrid{margin-top:24px}
.fsemi{padding:24px clamp(16px,2.4vw,28px) 20px; border-radius:14px; background:var(--sage)}
.fsemi-ttl{margin:0 0 16px; font-family:var(--font-jp); font-size:16px; font-weight:700; letter-spacing:.08em; color:var(--green-d)}
.fsemi .frow + .frow{margin-top:20px}
.fsemi-num{width:min(100%,calc(50% - 12px))}
.fset{margin:0; padding:0; border:0; min-width:0}
.fset legend{padding:0}
.fradio{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--white); cursor:pointer; line-height:1.7}
.fradio + .fradio{margin-top:10px}
.fradio input{flex:0 0 auto; width:20px; height:20px; margin:3px 0 0; accent-color:var(--green-d)}
.fradio small{display:block; font-size:13px; color:var(--ink-2)}
.fradio:has(input:checked){border-color:var(--green-d); outline:1px solid var(--green-d)}
.fsemi-note{margin:14px 0 0; font-size:13px; line-height:1.8; letter-spacing:.04em; color:var(--ink-2)}
#form .tnote{margin:24px auto 0; width:min(100%,860px)}

@media (max-width:1024px){
  #ways{padding:50px 0 170px}
}
@media (max-width:820px){
  #ways{padding:40px 0 140px}
  #form{padding:40px 0 100px}
  #qa{padding:var(--space-sm) 0}
  .fgrid{grid-template-columns:1fr; gap:24px}
  .fcard{padding:30px 20px}
  .fsemi-num{width:100%}
  .fsteps{font-size:12px}
}


/* =========================================================
   ページヘッダーの1カラム版（.page-head.solo）
   2026-09-03：費用／相談会／お客様の声／ブログ／お問い合わせ の5ページは
   右の写真を外して1カラムにし、見出しと本文を中央寄せに。
   CTAボタンは 費用・相談会 だけ残す（声・ブログ・お問い合わせは外す）。
   ========================================================= */

.page-head.solo .about-grid{grid-template-columns:1fr; gap:0}
/* 中央寄せの1カラムは、行が長いと読みにくい。1行の幅を締める */
.page-head.solo .about-txt{
  width:min(100%,760px); margin-inline:auto; text-align:center; padding:26px 0 0;
}
/* 英字ラベルの下の線は左端に置く作りなので、中央へ寄せ直す */
.page-head.solo .eyebrow{text-align:center}
.page-head.solo .eyebrow::after{margin-inline:auto}
/* 見出しの後ろの砂色の面。2カラムのときは左に置いて写真と対にしていた。
   ★1カラムで位置だけ中央にすると、比1.04＝ほぼ正円が本文全体を覆い、
     下辺が▲屋根に切られて「途中で切れた大きな丸」に見える。
     見出しの後ろに敷く横長の面に作り替える（節の中に収まる高さにする） */
.page-head.solo .about-txt::before{
  left:50%; transform:translateX(-50%);
  top:auto; width:min(86%,600px); aspect-ratio:2.45;
  /* 英字ラベル＋見出しのかたまりの後ろに来る位置 */
  inset-block-start:6%;
  border-radius:48% 52% 55% 45% / 56% 44% 56% 44%;
}
.page-head.solo .about-lead{margin-inline:auto}
.page-head.solo .btn-row{justify-content:center; margin-top:34px}
/* 写真が無くなったぶん、上下の余白を少し詰める（節が間延びしないように） */
.page-head.solo{padding:clamp(140px,13.5vw,178px) 0 130px}

@media (max-width:820px){
  .page-head.solo{padding-top:clamp(120px,26vw,150px); padding-bottom:100px}
  .page-head.solo .about-txt{padding-top:0}
}


/* =========================================================
   ここから「ブログの記事ページ」（blog-single.html）で足したもの
   ========================================================= */

/* 記事のヘッダー。1カラム版（.solo）をそのまま使い、見出しの大きさとメタ行だけ足す */
.art-ttl{font-size:clamp(24px,3.2vw,40px); line-height:1.6}
.artmeta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:22px}
.artmeta .cat{
  display:inline-block; background:var(--sage); color:var(--green-d); text-decoration:none;
  border-radius:999px; padding:6px 16px; font-family:var(--font-jp); font-size:12px; letter-spacing:.08em;
}
.artmeta .date{font-family:var(--font-en); font-size:13px; color:var(--ink); letter-spacing:.06em}
.artmeta .by{font-size:13px; color:var(--ink); letter-spacing:.06em}
/* 日付と担当者のあいだに／。SPで担当者が折り返すと／が行頭に来るので、
   日付と担当者はひとかたまり（.dm）にして、そのあいだにだけ／を置く */
.artmeta .dm{display:inline-flex; align-items:baseline; gap:0}
.artmeta .by::before{content:"／"; margin:0 8px; color:var(--ink-3)}
/* ★記事ヘッダーだけ、見出しの後ろの砂色の面を外す。
   記事のタイトルは長さがまちまちで、後ろの面の高さが決まらない。
   実測すると2行の見出しでは面がカテゴリの札に33〜99px重なり、
   砂色の札が砂色の面に乗って読めなくなった（幅によって重なり方が変わる）。
   記事ページは節の見出しとは別のものなので、面は置かずにタイトルとメタだけで組む */
.art-head .about-txt::before{display:none}

#article{padding:50px 0 200px}
#article.roof::before{background:var(--white)}
#related{padding:50px 0 calc(var(--space) + 100px)}
#related.roof::before{background:var(--cream-2)}
#related .sec-head .eyebrow{text-align:center}
#related .sec-head .eyebrow::after{margin-inline:auto}

/* ---------- 記事の組版 ----------
   ★本文は1カラム16px（フォント規定）。行が長くなりすぎないよう、段の幅で決まる */
/* 記事タイトルは本文の先頭に h1 として置く。
   ページヘッダー側は「スタッフブログ」（見出しではないので p）に変えてある */
.art-h1{margin:0 0 30px; font-size:clamp(23px,2.9vw,34px); line-height:1.7; letter-spacing:.06em}
.arthero{margin:0 0 34px}
.arthero img{display:block; width:100%; height:auto; border-radius:var(--r-lg)}
.article .lead{font-size:16px; line-height:2.15; color:var(--ink-2); letter-spacing:.06em}
.article h2{
  margin:56px 0 20px; font-size:clamp(20px,2.2vw,26px); line-height:1.7; letter-spacing:.06em;
  padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.article h3{margin:38px 0 14px; font-size:clamp(17px,1.7vw,19px); line-height:1.75; letter-spacing:.06em}
.article p{margin:0 0 20px; font-size:16px; line-height:2.1; color:var(--ink-2); letter-spacing:.05em}
.article p b{color:var(--ink)}
.article ul{margin:0 0 24px; padding-left:0; list-style:none}
.article ul > li{position:relative; padding-left:24px; margin-bottom:10px; font-size:16px; line-height:2.0; color:var(--ink-2)}
.article ul > li::before{content:""; position:absolute; left:5px; top:.9em; width:8px; height:8px; border-radius:50%; background:var(--green)}
.article ul > li b{color:var(--ink); font-family:var(--font-jp)}
.article .checks{margin:0 0 28px}
.article .ptable{margin-bottom:18px}
.article .ptable.narrow thead th:nth-child(2){width:70%}
.article .tnote{margin:0 0 24px}

/* 手順（1・2・3…）。丸に番号を入れて、線でつなぐ */
.article ol.steps{margin:0 0 26px; padding:0; list-style:none; counter-reset:st}
.article ol.steps > li{
  position:relative; counter-increment:st; padding:0 0 24px 56px;
}
.article ol.steps > li::before{
  content:counter(st); position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff;
  font-family:var(--font-en); font-size:15px; display:flex; align-items:center; justify-content:center;
}
/* 丸と丸をつなぐ縦線（最後の項目には引かない） */
.article ol.steps > li:not(:last-child)::after{
  content:""; position:absolute; left:17px; top:42px; bottom:6px; width:2px; background:var(--line);
}
.article ol.steps > li b{display:block; font-family:var(--font-jp); font-size:17px; letter-spacing:.06em; line-height:1.8}
.article ol.steps > li span{display:block; margin-top:4px; font-size:15px; line-height:1.95; color:var(--ink-2)}

/* ---------- 目次 ---------- */
.toc{border:1px solid var(--line); border-radius:var(--r-md); padding:24px 28px; margin:0 0 40px}
/* この見出しだけ 下に1pxの線（#ece6dc） */
.toc-ttl{display:block; font-family:var(--font-jp); font-size:16px; letter-spacing:.08em;
  border-bottom:1px solid #ece6dc; padding-bottom:10px; margin-bottom:12px}
.toc ol{margin:0; padding-left:0; list-style:none; counter-reset:t}
.toc li{counter-increment:t; position:relative; padding-left:28px}
.toc li::before{
  content:counter(t); position:absolute; left:0; top:11px;
  width:19px; height:19px; border-radius:50%; background:var(--sage); color:var(--green-d);
  font-family:var(--font-en); font-size:11px; display:flex; align-items:center; justify-content:center;
}
.toc a{display:block; padding:8px 0; font-size:15px; line-height:1.8; color:var(--ink-2); text-decoration:none}
.toc a:hover{color:var(--green-d)}

/* ---------- 書いた人 ---------- */
.authorbox{
  display:flex; align-items:flex-start; gap:22px; margin-top:56px;
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-lg); padding:26px 28px;
}
.authorbox .face{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:76px; height:76px; background:var(--sage); border:5px solid var(--ink); border-radius:50%;
}
/* 肉球からキャラクターの顔に。丸からはみ出す部分は丸で切る */
.authorbox .face{overflow:hidden}
.authorbox .face img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.authorbox .role{display:block; font-family:var(--font-jp); font-size:13px; letter-spacing:.08em; color:var(--ink)}
.authorbox .nm{display:block; margin-top:4px; font-family:var(--font-jp); font-size:20px; letter-spacing:.08em}
.authorbox p{margin:10px 0 0; font-size:14px; line-height:1.95; color:var(--ink-2)}

/* ---------- 前後の記事 ---------- */
.pagenav{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; margin-top:34px}
.pn{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:16px 20px;
  text-decoration:none; color:var(--ink); transition:border-color .25s, background-color .25s;
}
.pn:hover{border-color:var(--brown); background:var(--white)}
.pn .lb{font-family:var(--font-en); font-size:11px; letter-spacing:.12em; color:var(--ink-3)}
.pn .tt{font-family:var(--font-jp); font-size:14px; line-height:1.7; letter-spacing:.04em}
.pn.next{text-align:right}
.pn.back{justify-content:center; align-items:center; font-family:var(--font-jp); font-size:13px; letter-spacing:.08em; white-space:nowrap}

/* ---------- 関連記事は3列 ---------- */
.pcards.rel3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.rel3 .pcard{flex-direction:column; gap:16px}
.rel3 .pcard .thumb{flex:none; width:100%; aspect-ratio:16/10}
.rel3 .pcard h3{font-size:18px; line-height:32px}   /* 17→18px・行間29.8→32px */
#related .btn-row{margin-top:44px}

@media (max-width:1024px){
  #article{padding:50px 0 170px}
  .pcards.rel3{grid-template-columns:1fr; gap:20px}
  .rel3 .pcard{flex-direction:row; gap:18px}
  .rel3 .pcard .thumb{flex:0 0 120px; width:auto; aspect-ratio:1}
}
@media (max-width:820px){
  #article{padding:40px 0 140px}
  #related{padding:40px 0 calc(var(--space-sm) + 90px)}
  .article h2{margin-top:44px}
  .toc{padding:20px 20px}
  .authorbox{flex-direction:column; align-items:center; text-align:center; gap:16px; padding:24px 20px}
  .authorbox p{text-align:left}
  /* 前後の記事は縦積み。「一覧へ」は最後に置く */
  .pagenav{grid-template-columns:1fr}
  .pn.next{text-align:left}
  .pn.back{order:3}
}
@media (max-width:520px){
  .rel3 .pcard{flex-direction:column}
  .rel3 .pcard .thumb{width:100%; flex-basis:auto; aspect-ratio:16/9}
}

/* 2026-09-04：toiawase は最終CTAを削除したので、フッターの上辺の波の色を
   「上の節の地」に合わせ直す（既定の sage のままだと、クリームの上に緑の波が1枚だけ乗る）*/
.site-foot.foot-cream .wave-top{--wave-c:var(--cream)}

/* =========================================================
   ページ単位の上書き（<body class="p-xxx">）
   同じ部品でも1ページだけ変える指示は、ここにまとめる
   ========================================================= */
/* お問い合わせのページ見出しの後ろの楕円を消す
   ★1カラムの他ページ（費用・相談会・お客様の声・ブログ・記事）には残っている */
body.p-toiawase .page-head .about-txt::before{display:none}

/* 私たちの強みのページ見出しだけ 60px の指定だったが、
 全ページ 60px になったので、このページ単位の上書きは不要になった（削除） */

/* 「元気なうちだから、できることがあります。」の下に細かい波線を、
   文字の長さいっぱいに。見出しを display:table にして文字幅ぶんに縮め、その下に波を敷く
   （狭い画面で文字が折り返したときは、折り返した幅いっぱいになる） */
#t-sonzen .tab-head .sec-title{display:table; margin-inline:auto; max-width:100%}
#t-sonzen .tab-head .sec-title::after{
  content:""; display:block; height:6px; margin-top:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 3.6 Q2.5 0.9 5 3.6 T10 3.6' fill='none' stroke='%231f1f1f' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
}

/* 節の見出しの上に置くキャラクター */
.sec-mascot{display:block; width:110px; height:auto; margin:0 auto 14px}
@media (max-width:820px){ .sec-mascot{width:92px} }

/* 先頭のカードの上辺に足を載せて、キャラクターを立たせる。
   ★入れ物の高さを0にして、犬を「.shops の上辺」に絶対配置する＝足が黒い線のちょうど上に来る。
     はみ出しは横だけ切りたいので overflow-x:clip（hidden にすると縦も切れて犬が消える）。
   ★prefers-reduced-motion のときは揺らさない */
.walk{position:relative; height:0; overflow-x:clip; overflow-y:visible; pointer-events:none; z-index:2}
/* 2026-09-16：歩かせると見出しのリード文に重なるので、右端に立たせてその場で揺らすだけにした */
.walk .walker{position:absolute; bottom:0; right:clamp(16px,4vw,48px); display:block}
.walk .walker img{display:block; width:66px; height:auto}
.walk.on .walker img{animation:dog-bob .42s ease-in-out infinite alternate}
@keyframes dog-bob{ from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-5px) rotate(2deg)} }
@media (prefers-reduced-motion: reduce){
  .walk.on .walker img{animation:none}
}
@media (max-width:820px){ .walk .walker img{width:54px} }

/* 私たちの強みの「できること」だけ 上の余白 50 → 120px
   （#support はTOPにもあるので、このページだけに当てる） */
body.p-tsuyomi #support{padding-top:120px}

/* ブログのページ見出しの後ろの楕円を消す（お問い合わせと同じ） */
body.p-blog .page-head .about-txt::before{display:none}

/* サイドバーの「カテゴリ」の見出しの先頭に肉球（フッターの小見出しと同じ形） */
#cats .sttl{display:flex; align-items:center; gap:9px}
#cats .sttl::before{
  content:""; flex:0 0 auto; width:15px; height:15px; background:var(--green-d);
  -webkit-mask:no-repeat center/contain url("img/niku.svg");
  mask:no-repeat center/contain url("img/niku.svg");
}

/* ---------- LINE友だち追加のQRコード（2026-09-08） ---------- */
/* z-index はサポート内容のポップアップと同じ90＝丸いメニューボタン（95）が上に残り、開いたままでもメニューへ行ける */
.qr-modal{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px}
/* 2026-09-18：閉じているときは消す。display:flex が hidden 属性に勝ち、透明な幕がページ全体を覆って
   お問い合わせページのどこも押せなくなっていた（ほかのポップアップと同じ書き方） */
.qr-modal[hidden]{display:none}
.qr-modal .qr-backdrop{position:absolute; inset:0; background:rgba(35,24,21,.5); opacity:0; transition:opacity .24s ease}
.qr-modal.on .qr-backdrop{opacity:1}
.qr-panel{
  position:relative; z-index:1; width:min(100%,420px); background:var(--white);
  border:5px solid var(--ink); border-radius:var(--r-md); padding:44px 32px 36px; text-align:center;
  opacity:0; transform:translateY(12px) scale(.98); transition:opacity .24s ease, transform .24s ease;
}
.qr-modal.on .qr-panel{opacity:1; transform:none}
.qr-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; background:none;
  cursor:pointer; color:var(--ink);
}
.qr-close .x{position:relative; display:block; width:20px; height:20px; margin:0 auto}
.qr-close .x::before, .qr-close .x::after{
  content:""; position:absolute; left:0; top:9px; width:20px; height:1.8px; background:currentColor; border-radius:2px;
}
.qr-close .x::before{transform:rotate(45deg)}
.qr-close .x::after{transform:rotate(-45deg)}
.qr-close:hover{color:#05a648}
.qr-title{font-size:20px; line-height:1.6}
.qr-lead{margin-top:10px; font-size:14px; line-height:1.9; color:var(--ink-2)}
.qr-img{display:block; width:min(70%,240px); height:auto; margin:20px auto 0}
/* QR の下に、友だち追加ページを直接開くリンク（パソコンでも LINE のアプリへ渡せるように） */
.qr-link{margin-top:14px; font-size:14px}
.qr-link a{color:#05a648; text-decoration:underline; text-underline-offset:3px}
.qr-link a:hover{text-decoration:none}
@media (max-width:390px){
  .qr-panel{padding:40px 20px 30px}
  .qr-img{width:min(80%,210px)}
}

/* ==========================================================================
   2026-10-01 追記（下層ページの追加分。TOPは page.css を読まない）
   ========================================================================== */

/* 本文の中から外部サイトへ出るリンク（会社概要→成迫会計のコーポレートサイト）。
   メニューとフッターの a.ext と同じ「↗」で、押せることと外部へ出ることを示す */
.ext-i{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.28em}
.ext-i:hover{color:var(--green-d)}
.ext-i::after{content:"↗"; margin-left:4px; font-size:.85em; color:var(--green-d); text-decoration:none}

/* 節の見出しの上にキャラクター2匹（.sec-mascot の2匹版）。
   トップページから直接来る節の目印に使う */
.sec-mascots{display:flex; justify-content:center; align-items:flex-end; gap:10px; margin-bottom:14px}
.sec-mascots img{display:block; width:92px; height:auto}
.sec-mascots img:last-child{width:76px}
@media (max-width:820px){
  .sec-mascots img{width:78px}
  .sec-mascots img:last-child{width:64px}
}
/* 見出しの文字幅ぶんに波線を敷く（#t-sonzen の見出しと同じ装飾）。
   display:table で文字幅に縮めてから、その下に波を repeat-x する */
.sec-title.wavy{display:table; margin-inline:auto; max-width:100%}
.sec-title.wavy::after{
  content:""; display:block; height:6px; margin-top:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 3.6 Q2.5 0.9 5 3.6 T10 3.6' fill='none' stroke='%231f1f1f' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
}

/* お電話のカード：店名の字数が違うと（飯田店＝3字／長野駅前店＝5字）番号の左右がそろわない。
   店名の枠を5字ぶんに固定し、中で均等割りにする＝「飯 田 店」のように開いて端がそろう。
   ★文字を足すのではなく枠で開く（読み上げと、WP化したときの本文を汚さない） */
.telist a small{
  flex:0 0 auto; width:5em; text-align:justify; text-align-last:justify;
}

/* ブログ一覧の並び替え：狭い画面で「新着順／よく読まれている順」が1行に入らず箱から出ていた */
.filterbar{flex-wrap:wrap; row-gap:10px}
.filterbar .sorts{flex-wrap:wrap}

/* 相続通信（LINE）：スマートフォンで「LINEで友だち追加」のボタンが、
   上の節へもぐり込ませている最終CTAの枠に重なっていた。ボタンの下に逃げをつくる */
@media (max-width:820px){
  #tsushin{padding-bottom:calc(var(--space) + 90px)}
}

/* 店舗一覧の上に立つキャラクター：iPhoneで「頭のてっぺんが切れる」との報告。
   ★Chrome では 390px／320px とも切れていない（画素で確認）。overflow-x:clip と overflow-y:visible は
     仕様どおり両立する（計算値も clip / visible）ので、Chrome 側の理屈では説明がつかない。
   Safari が overflow-x:clip で縦も切ることがあるため、クリップ自体を外した。
   犬は .wrap の中（右端から16〜48px内側・幅66px）に収まっていて横にはみ出さないので、切らなくて安全。
   → 実機で直ったかの確認が要る（Chrome では再現しないため、こちらでは判定できない） */
.walk{overflow:visible}

/* お問い合わせ：ページを開いた時点で「3つの予約方法」が目に入るように、
   このページだけページ見出しと節の頭を詰める。
   ★数値は 1440×900 と 390×740 で1枚目のカードの位置を実測して決めている */
body.p-toiawase .page-head{padding:clamp(104px,10vw,120px) 0 40px; margin-bottom:20px}
body.p-toiawase #ways{padding-top:36px}
body.p-toiawase #ways .sec-head{margin-bottom:26px}
@media (max-width:820px){
  body.p-toiawase .page-head{padding:84px 0 28px; margin-bottom:12px}
  body.p-toiawase #ways{padding-top:24px}
  body.p-toiawase #ways .sec-head{margin-bottom:18px}
}

/* ===== 2026-10-19 ===== */
/* 時系列の札（「少し落ち着いたら、なるべく早めに（～2か月以内）」）：スマートフォンでは1行にするため <br> を消しているが、
   折り返しを禁じていたので、幅375px以下の iPhone で枠からはみ出していた。文節のかたまり（.ph）で折り返せるようにする */
@media (max-width:820px){
  .termbox.txt{max-width:100%; border-radius:22px}
}

/* スタッフ紹介 */
/* 最後の段も左から並べる（中央に1人だけ来ると目立ちすぎる） */
.staffs.all{justify-content:flex-start}
/* 似顔絵は胸元まで描かれているので、丸で切ると下が欠ける。上は丸く、下はまっすぐの窓の形にして全部見せる */
.staffs.all .staff .face:has(img){border-radius:999px 999px 18px 18px}
/* スマートフォン：丸（128px）＋余白がカードの幅より大きく、2列に入らず1列に落ちていた。2列に収める */
@media (max-width:820px){
  .staffs.all .staff{min-width:0; padding:18px 8px 16px; border-width:4px}
  .staffs.all .staff .face:has(img){width:min(100%,112px); height:auto; aspect-ratio:1; border-width:4px; margin-bottom:12px}
  .staffs.all .staff .nm{font-size:clamp(12px,3.9vw,16px); letter-spacing:.02em}
  .staffs.all .staff .role{font-size:12px; letter-spacing:.04em}
  .staffs.all .staff .lv{font-size:12px; padding:2px 10px}
}

/* お問い合わせ：見出しの詰め（#ways の上）に対して、下の節の三角の屋根が高く、見出しにかぶっていた。
   屋根を、見出しとの間（PC 60px／SP 40px）に収まる高さにする */
body.p-toiawase #ways.roof::before{height:clamp(36px,3.6vw,52px)}
@media (max-width:820px){ body.p-toiawase #ways.roof::before{height:34px} }

/* お電話のカード：店名の枠（5字ぶん）に字間（.08em×5）が入りきらず、「長野駅前／店」と折れていた */
.telist a small{width:calc(5em + 5 * .08em); white-space:nowrap}