@charset "utf-8";
/* =========================================================
   相続手続支援センター（株式会社マスネットワーク）
   リニューアル デザイン案 ／ TOP
   - パレット：ロゴ＋キャラクター（ヨリソイヌ）から採取
   - 明朝は使わない／純黒は使わない／本文16px・最小12px
   - 色が変わる境界＝上下150px（SP100px）
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  /* 面（参考サイト の実測値） */
  --cream:      #ece6dc;   /* 主の地（参考サイト 最頻色） */
  --cream-2:    #f2eeea;   /* 面の切り替え・明るい方 */
  --sage:       #e3ddd1;   /* 面の切り替え・砂色（旧：緑） */
  --peach:      #f7f6f5;   /* 面の切り替え・ほぼ白 */
  --white:      #ffffff;

  /* 文字（参考サイト：#1f1f1f / #333333） */
  --ink:        #1f1f1f;   /* 見出し・本文 */
  --ink-2:      #57534d;   /* 補助 */
  --ink-3:      #a69e96;   /* キャプション・メタ（参考サイト） */

  /* 罫（参考サイト：#d4cfc7 / #c6bcb0） */
  --line:       #d4cfc7;
  --line-2:     #e2ddd4;

  /* ブランド（ロゴとキャラクターは据え置き） */
  --brown:      #6b3d2c;   /* ヨリソイヌのスーツ */
  --ground:     #332c26;   /* フッターの地＝クリームと同じ色相の暗い端（茶の彩度を落とした版） */
  --brown-d:    #4a2a1e;

  /* アクセント＝参考サイト の黄土色。文字用は読める濃さに落とす */
  --green:      #e2c16f;   /* ＝ゴールド（旧トークン名は据え置いて一括で置き換え） */
  --green-d:    #8a6a2a;   /* 文字に使える濃さ（地 #ece6dc に対し約4.9:1） */
  --green-l:    #f0e3c2;
  --orange:     #e2c16f;   /* 主CTA＝ゴールド。文字は墨色にして読ませる */
  --orange-d:   #d4ad4d;

  /* 骨格 */
  --space:      150px;     /* 色が変わる境界 */
  --space-sm:   75px;      /* 同色が続く境界 */
  --sideW:      min(4.66vw, 70px);
  --wrap:       1120px;
  --radius:     24px;
  /* 半径スケール（参考サイト 実測：100/40/32/24/20/16/12） */
  --r-xl:       40px;      /* ヒーローなど大きい面 */
  --r-lg:       32px;
  --r-md:       24px;
  --r-sm:       16px;
  /* おにぎり（アーチ）＝上を大きく丸め、下は少しだけ */
  --r-onigiri:  200px 200px 12px 12px;
  --ease:       cubic-bezier(.4,.4,0,1);   /* 参考サイト と同じイージング */

  --font-jp: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Maru Gothic ProN", "游ゴシック体", YuGothic, sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "游ゴシック体", YuGothic, sans-serif;
  --font-en: "Jost", "Zen Maru Gothic", sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip は html に当てる。body だけだと iOS Safari は指で横に振れてしまう
   （clip は hidden と違いスクロール入れ物を作らないので、.blog-side の sticky は効いたまま） */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:clip}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:2.0;
  letter-spacing:.06em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; border:0; vertical-align:bottom}
a{color:inherit}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,h5,h6{margin:0; font-family:var(--font-jp); font-weight:700; line-height:1.6; letter-spacing:.08em}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--sideW)*2, var(--wrap)); margin-inline:auto}
.wrap-n{width:min(100% - var(--sideW)*2, 860px); margin-inline:auto}
.s{padding:var(--space) 0; position:relative}
.center{text-align:center}

/* 面の色 */
.bg-white{background:var(--white)}
.bg-cream{background:var(--cream)}
.bg-cream2{background:var(--cream-2)}
.bg-sage{background:var(--sage)}
.bg-peach{background:var(--peach)}

/* ---------- 節の上辺のゆるやかな波（2026-09-03） ----------
   1枚の型を色ちがいで使い回す。色はマスク＋背景色で変えるので、
   SVGは黒1色のまま（節ごとに data URI を持たない）。
   曲線のつなぎ目は制御点を左右対称に置いて接線をそろえてあるので角が出ない。
   ★置いた節は、波の高さぶん上の余白を足すこと（足さないと谷に文字が入る） */
:root{--wave-h:clamp(46px,5.6vw,88px)}
.wave-top{
  position:absolute; left:0; right:0; top:-1px; z-index:1; pointer-events:none;
  height:var(--wave-h); background-color:var(--wave-c, var(--cream));
  -webkit-mask:no-repeat top center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C180,86 360,86 540,52 C720,18 900,10 1080,32 C1260,54 1350,60 1440,44 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
  mask:no-repeat top center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C180,86 360,86 540,52 C720,18 900,10 1080,32 C1260,54 1350,60 1440,44 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
}
/* 波の色＝その節の「上の節」の地の色 */
.site-foot .wave-top{--wave-c:var(--sage)}    /* 上＝最終CTA */
#faq .wave-top{--wave-c:var(--peach)}          /* 上＝LINE */
#line .wave-top{--wave-c:var(--white)}         /* 上＝ブログ */
.band .wave-top{--wave-c:var(--cream)}         /* 上＝CONSULTATION（2026-10-05 にお客様の声を上へ移した） */
/* 波を置いた節は、波の高さの半分を上余白に足す（谷は高さの86/90まで下りる） */
#line{padding-top:calc(var(--space) + var(--wave-h) * .5)}
.band{padding-top:calc(var(--space) + var(--wave-h) * .5)}

/* 肉球（うっすら敷く装飾） */
.paws{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.paw{
  position:absolute; width:44px; height:44px; opacity:.28;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23c9b79f'%3E%3Cellipse cx='32' cy='42' rx='16' ry='13'/%3E%3Cellipse cx='13' cy='27' rx='7' ry='9'/%3E%3Cellipse cx='25' cy='17' rx='7' ry='10'/%3E%3Cellipse cx='39' cy='17' rx='7' ry='10'/%3E%3Cellipse cx='51' cy='27' rx='7' ry='9'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 見出しの型（EN大 ＋ 和文） ---------- */
.sec-head{margin-bottom:56px}
.sec-head.center{text-align:center}
.eyebrow{
  display:block; font-family:var(--font-en); font-size:13px; font-weight:500;
  letter-spacing:.28em; color:var(--green-d); margin-bottom:14px;
}
.eyebrow::after{content:""; display:block; width:26px; height:2px; background:var(--green); border-radius:2px; margin-top:10px}
.center .eyebrow::after{margin-inline:auto}
.sec-title{font-size:clamp(22px,3.1vw,34px); line-height:1.7; letter-spacing:.06em}
/* 見出しの禁則を厳密に（長音符や小書き仮名が行頭に来ないように）。
   text-wrap:balance は行の長さは揃えるが禁則は見ないので、あわせて指定する */
.sec-title, .case h3, .worry h3, .reason h3, .about-ttl{line-break:strict}
/* 意味の切れ目で折るための小箱。入りきらないときだけ箱の中でも折れる（nowrap と違ってはみ出さない） */
.ib{display:inline-block}
.sec-title .mark{
  background:linear-gradient(transparent 62%, var(--green-l) 62%);
  padding-bottom:2px;
}
.sec-lead{margin-top:22px; color:var(--ink-2); font-size:16px; line-height:2.1}
/* 見出しを画像で置く（キャラクター＋文字が1枚になっているもの） */
.sec-title-img{margin:0}
.sec-title-img img{display:block; width:min(92%,560px); height:auto; margin-inline:auto}
.center .sec-lead{margin-inline:auto}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:60px; padding:0 34px; border-radius:999px;
  font-family:var(--font-jp); font-weight:700; font-size:16px; letter-spacing:.08em;
  text-decoration:none; background:var(--white); color:var(--ink);
  border:1.5px solid var(--line); transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn .ar{font-family:var(--font-en); font-size:15px; transition:transform .25s ease}
.btn:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(107,61,44,.14)}
.btn:hover .ar{transform:translateX(4px)}
.btn.primary{background:var(--orange); color:var(--ink); border-color:var(--orange); box-shadow:0 6px 0 var(--orange-d)}
.btn.primary:hover{background:var(--orange-d); color:var(--ink); box-shadow:0 4px 0 #b9954a, 0 12px 24px rgba(226,193,111,.42); transform:translateY(-2px)}
.btn.line{background:var(--white); color:var(--brown); border-color:var(--brown)}
.btn.line:hover{background:var(--brown); color:#fff}
/* 2026-09-08：LINEのボタンだけ LINE の緑に。
   ★.btn.line は「白地に茶の線」の汎用ボタンで、店舗・アクセスやブログ一覧にも使っている。
     色を変えるのは LINE のボタンだけなので、修飾子 .lineg を足して当てる */
.btn.lineg{--line-g:#06c755; --line-gd:#05a648;
  background:var(--white); color:var(--line-gd); border-color:var(--line-g)}
.btn.lineg:hover{background:var(--line-g); color:#fff; border-color:var(--line-g)}
.btn.lineg.solid{background:var(--line-g); color:#fff; border-color:var(--line-g); box-shadow:0 6px 0 var(--line-gd)}
.btn.lineg.solid:hover{background:var(--line-gd); color:#fff; box-shadow:0 4px 0 #04853a, 0 12px 24px rgba(6,199,85,.34); transform:translateY(-2px)}
.btn.ghost{background:transparent; border-color:var(--brown); color:var(--brown)}
.btn.ghost:hover{background:var(--brown); color:#fff}
.btn.sm{min-height:48px; padding:0 24px; font-size:14px}
.btn.on-dark{background:transparent; border-color:rgba(255,255,255,.6); color:#fff}
.btn.on-dark:hover{background:#fff; color:var(--brown)}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn-row.center{justify-content:center}

/* ---------- ヘッダー（透明・固定）＋丸いメニューボタン ---------- */
.site-head{
  position:absolute; top:0; left:0; right:0; z-index:40;
  /* 右のpaddingは丸いメニューボタン（幅98＋右 sideW-14）＋間の余白ぶんを空ける */
  padding:26px calc(var(--sideW) + 116px) 0 var(--sideW);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,48px);
}
.logo{display:block; width:max-content; flex:0 0 auto}
.logo img{width:clamp(187px,17.73vw,261px)}
/* 電話＝ハンバーガーの左に横並び（店舗名の下に番号） */
.head-tel{display:flex; align-items:flex-end; gap:clamp(14px,1.7vw,28px); line-height:1.3}
.head-tel a{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-decoration:none}
.head-tel .sh{font-size:11px; color:var(--ink-3); letter-spacing:.1em; white-space:nowrap}
.head-tel .no{
  font-family:var(--font-en); font-size:clamp(15px,1.25vw,18px); font-weight:500;
  color:var(--brown); letter-spacing:.03em; white-space:nowrap;
}
.head-tel a:hover .no{color:var(--ink)}
/* 受付時間＝電話番号の左。#a69e96 では地に沈むので墨色寄りに落とす */
.head-tel .hours{
  font-size:12px; color:var(--ink-2); letter-spacing:.04em;
  white-space:nowrap; padding-bottom:3px;
}
/* CTA＝画面左下に固定追従（ボタン1つだけ・座布団なし） */
.head-right{position:fixed; left:24px; bottom:24px; z-index:60; display:flex; gap:12px}
.head-right .btn{min-height:56px; padding:0 26px; font-size:15px}
.head-right .btn.primary{box-shadow:0 6px 0 var(--orange-d)}

/* 丸いハンバーガー（参考サイト方式：バー3本＋menu の文字）
   2026-09-03：少し小さく（116×112 → 98×95・約85%。中身も同じ比率で縮めた） */
.menu-btn{
  position:fixed; top:22px; right:calc(var(--sideW) - 14px); z-index:95;
  width:98px; height:95px; background:var(--green);
  /* おにぎり＝正円でも角丸でもない、手描きのような有機的な形 */
  border-radius:63% 37% 32% 68% / 46% 63% 37% 54%;
  transform:rotate(-6deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:border-radius .8s var(--ease), transform .5s var(--ease), background-color .3s var(--ease);
}
.menu-btn:hover{
  border-radius:38% 62% 62% 38% / 60% 40% 60% 40%;
  transform:rotate(2deg) scale(1.04);
}
/* 中身は水平のまま（親の回転を打ち消す） */
.menu-btn .bars, .menu-btn .lb{transform:rotate(6deg)}
.menu-btn .bars{display:flex; flex-direction:column; gap:6px; width:29px}
.menu-btn .bars i{
  display:block; width:29px; height:2px; background:#fff; border-radius:2px;
  transition:transform .38s var(--ease), opacity .24s ease;
}
.menu-btn .lb{
  font-family:var(--font-en); font-size:12px; font-weight:500; letter-spacing:.05em;
  line-height:1; color:#fff;
}
/* ×の移動量＝バーの高さ2px＋間隔6px＝1本ぶん8px */
html.menu-open .menu-btn .bars i:nth-child(1){transform:translateY(8px) rotate(45deg)}
html.menu-open .menu-btn .bars i:nth-child(2){opacity:0}
html.menu-open .menu-btn .bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- 全画面メニュー ---------- */
html.menu-open{overflow:hidden}
/* 2画面の面（左＝写真／右＝メニュー）を画面いっぱいに置くので、overlay自身はスクロールしない。
   はみ出す長さは右の面（.menu-pane）が引き受ける */
.menu-ov{position:fixed; inset:0; z-index:90; background:var(--cream); overflow:hidden}
.menu-ov[hidden]{display:none}
.menu-ov::before{
  content:""; position:absolute; inset:0; background:var(--cream);
  transform:scaleY(0); transform-origin:top; transition:transform .62s var(--ease);
}
.menu-ov.on::before{transform:scaleY(1)}
/* 2026-09-03：中身のレイアウトを 参考サイト のメニューに合わせる。
   左＝写真の面（ロゴを重ねる）／右＝ほぼ白の面に「和文＋その下に英字」の2段組みリスト。
   罫線は引かない（参考サイト は行間で切る）。CTAは従来どおり残し、右の面の下に置く */
.menu-in{
  position:relative; z-index:2; height:100%; width:100%; margin:0;
  display:grid; grid-template-columns:55fr 45fr; gap:0; align-items:stretch;
  padding:0;
}
.menu-visual{position:relative; overflow:hidden; background:var(--sage)}
.menu-visual img{width:100%; height:100%; object-fit:cover; display:block}
/* 2026-09-03：写真を「書類とノートPCのある机」に差し替えたら、上が白い壁になった。
   白ロゴでは暗幕を敷いても 2.1:1 しか出ず（4.5:1を出すには暗幕を .64 まで濃くする必要があり、
   写真の明るさが死ぬ）、ロゴを通常版（濃い）に変えて 7:1 以上を確保した。
   ★暗幕は白ロゴを読ませるためのものなので、濃いロゴでは逆に効く（地を暗くして差を詰める）＝外した。
     写真を暗いものに戻すときは、白ロゴ＋この暗幕に戻すこと。 */
.menu-logo{position:absolute; z-index:2; left:clamp(28px,3.4vw,64px); top:clamp(28px,3.4vw,54px); display:block}
.menu-logo img{width:clamp(168px,14vw,209px); height:auto; display:block}
/* 面は「送る所（リスト＋電話）」と「送らない所（CTA）」の2段。
   項目が9つあるとPCでも1画面に入らないので、CTAだけは下に固定して常に見えるようにした */
.menu-pane{
  background:var(--peach); overflow:hidden;
  /* 右上の丸メニュー（幅98＋右 sideW-14）を避けて上と右を空ける */
  padding:clamp(40px,4.4vw,56px) calc(var(--sideW) + 116px) clamp(28px,3vw,36px) clamp(36px,4.4vw,72px);
  display:flex; flex-direction:column;
}
.menu-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:clamp(32px,3.4vw,48px);
  padding-bottom:28px;
  /* 送れることが分かるよう、下端を少しだけぼかす */
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%);
  mask:linear-gradient(180deg,#000 calc(100% - 26px),transparent 100%);
}
.menu-cta{flex:0 0 auto; padding-top:14px}
/* 9項目＋下の階層＋CTA＋電話を1画面に収めるため、間隔は 参考サイト（80pxピッチ）より詰める */
.menu-nav{display:flex; flex-direction:column; gap:clamp(18px,1.7vw,22px)}
.menu-nav a{
  display:block; text-decoration:none; width:max-content; max-width:100%;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.menu-ov.on .menu-nav a{opacity:1; transform:none}
.menu-nav a .jp{
  display:block; font-family:var(--font-jp); font-weight:700;
  font-size:clamp(17px,1.45vw,20px); letter-spacing:.06em; line-height:1.6; color:var(--ink);
}
/* 英字＝和文の下。金は --green-d（地 #f7f6f5 に対し5.6:1）まで濃くして読ませる */
.menu-nav a .en{
  display:block; margin-top:5px; font-family:var(--font-en); font-weight:500;
  font-size:13px; letter-spacing:.16em; color:var(--green-d);
}
.menu-nav a:hover .jp{color:var(--green-d)}
/* 2026-09-04：採用情報は成迫会計グループのサイトへ出るので、外部リンクの印を添える */
.menu-nav a.ext .jp::after{content:"↗"; margin-left:8px; font-size:.85em; color:var(--green-d)}
/* 下の階層＝左の縦罫＋ハイフン（参考サイト と同じ見せ方） */
.menu-sub{
  display:flex; flex-direction:column; gap:14px;
  margin:2px 0 6px; padding:8px 0 8px 18px; border-left:1px solid var(--line);
}
.menu-sub a{
  display:block; width:max-content; text-decoration:none;
  font-family:var(--font-jp); font-size:15px; letter-spacing:.06em; color:var(--ink-2);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.menu-ov.on .menu-sub a{opacity:1; transform:none}
.menu-sub a::before{content:"–"; color:var(--ink-3); margin-right:12px}
.menu-sub a:hover{color:var(--green-d)}
/* CTAは従来どおり残す（配置はこれまで通り／デザインは変えてよい）。縦積みだと入らないので横1行 */
.menu-cta .btn-row{flex-direction:row; gap:12px; margin-top:0}
.menu-cta .btn-row .btn{flex:1 1 0; min-width:0; min-height:52px; padding:0 18px; font-size:14px; white-space:nowrap}
/* 2026-09-04：メニューの「お電話でのご相談」を5pxの黒枠で囲い、バインダーのように。
   見出しは上辺にのる台形の中へ。
   ★台形の枠線は clip-path で作る。clip-path は border ごと切るので border では描けない
     ＝「黒い形」と「線の太さぶん内側へ縮めた白い形」の2枚重ねで出す。
   ★内側の形の座標は、各辺を法線方向へ5px動かした交点で出す（%で縮めると斜辺だけ細くなる）。
     傾き24px・高さ52pxの台形なら、上辺の角は横へ3.2px、下端は横へ5.51px 内側。
     この2つは幅に関係なく一定なので、横方向は % で書いてよい＝どの画面幅でも枠の太さが揃う。 */
.menu-tel{
  --tel-bw:5px; --tel-s:24px; --tel-h:52px;
  /* 内側の形の寄せ幅＝傾き24px・高さ52pxのときの実測値（上辺の角3.2px／下端5.51px） */
  --tel-ix:3.2px; --tel-iy:5.51px;
  position:relative; margin-top:34px;    /* 台形が上へ47px出るぶん、上の要素との間を空ける */
  display:flex; flex-direction:column; gap:5px;
  border:var(--tel-bw) solid var(--ink); border-radius:10px; background:var(--white);
  padding:22px 20px 20px;
}
.menu-tel .lb{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%);
  /* ★絶対配置の基準は「枠線の内側（padding box）」。枠の外側から測ると5pxずれて、
     台形の脚が箱の中へ5px入り込む（黒い突起に見える）ので、高さぶんだけ引き上げる */
  top:calc(var(--tel-h) * -1);          /* 台形の下辺＝箱の上辺（黒線）の内側にぴたりと載る */
  width:min(230px, calc(100% - 16px)); height:var(--tel-h); white-space:nowrap;
  display:grid; place-items:center; padding-top:var(--tel-bw);
  font-size:16px; letter-spacing:.14em; color:var(--ink); font-family:var(--font-jp); font-weight:700}   /* 12→16px・#8a6a2a→#1f1f1f */
.menu-tel .lb::before, .menu-tel .lb::after{content:""; position:absolute; inset:0; z-index:-1}
.menu-tel .lb::before{background:var(--ink);
  clip-path:polygon(var(--tel-s) 0, calc(100% - var(--tel-s)) 0, 100% 100%, 0 100%)}
.menu-tel .lb::after{background:var(--white);
  clip-path:polygon(calc(var(--tel-s) + var(--tel-ix)) var(--tel-bw), calc(100% - var(--tel-s) - var(--tel-ix)) var(--tel-bw),
                    calc(100% - var(--tel-iy)) 100%, var(--tel-iy) 100%)}
/* 18→20px・#6b3d2c→#1f1f1f（メニューの電話のリンクだけ） */
.menu-tel a{font-family:var(--font-en); font-size:20px; color:var(--ink); text-decoration:none; letter-spacing:.03em}
/* 12→13px・#a69e96→#1f1f1f */
.menu-tel a small{font-family:var(--font-body); font-size:13px; color:var(--ink); margin-right:10px; letter-spacing:.08em}
.menu-tel .hours{font-size:13px; color:var(--ink)}   /* 12→13px・#a69e96→#1f1f1f */
/* 320pxでは枠5px＋内側20pxの計50pxぶん本文の幅が減り、フリーダイヤルが2行に折れる。
   店名を番号の上の行へ逃がして1行に収める（余白も少し詰める） */
@media (max-width:360px){
  .menu-tel{padding:18px 14px 16px}
  /* 320pxでは台形が狭く、16pxの見出し（実測146px）が斜辺にぶつかる。
     台形を箱いっぱいまで広げ、傾きを24→14pxに寝かせて上辺の内幅を160pxまで戻す。
     ★寄せ幅は傾きが変わると変わる＝14px/52px のときは 上辺3.83px／下端5.18px */
  .menu-tel .lb{width:calc(100% - 8px); --tel-s:14px; --tel-ix:3.83px; --tel-iy:5.18px}
  .menu-tel a{line-height:1.35}
  .menu-tel a small{display:block; margin:0 0 1px}
}

/* ---------- ヒーロー（部屋の写真＋キャラクター・見出し・家族／波の帯にアイコン4つ） ---------- */
.hero{
  position:relative;
  /* 丸4つの幅。イラストの左右の余白もこれを見て決めるので、.hero に持たせる。
     画面が低いときは右下の固定ボタン（高さ56＋下24）に届かない大きさへ自動で落とす */
  --rail-w:min(clamp(112px,8.8vw,146px), max(84px, calc((100vh - 306px) / 4.75)));
  /* 写真はヘッダーの裏まで敷くので、上の余白は .hero-top が持つ */
  padding:0 0 clamp(24px,2.6vw,40px);
}
/* 2026-10-05：右の丸4つを戻した（9/18 に外す前と同じ作り） */
/* ハンバーガーの下：4つの丸（初回無料・年間件数・3拠点・窓口ひとつ） */
.hero-rail{
  /* 丸4つ＋肉球で、高さは幅の 4.75 倍。上端 214px は動かさない */
  /* メニューボタン（top:22＋高さ112＝下端134）の下 80px から */
  position:absolute; top:214px; z-index:30;
  /* 丸いメニューボタン（右 sideW-14・幅116）の中心に合わせて真下に置く */
  right:calc(var(--sideW) - 14px + 58px - var(--rail-w) / 2);
  width:var(--rail-w);
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--rail-w) * 0.13);
}
.hero-rail li{
  width:var(--rail-w); height:var(--rail-w); border-radius:50%;
  background:var(--white); border:calc(var(--rail-w) * 0.034) solid var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-jp); font-weight:700; color:var(--ink);
  font-size:calc(var(--rail-w) * 0.155); line-height:1.5; letter-spacing:.01em;
}
/* 丸の中は「1行＝1span」。折り返させず、いちばん長い行が内側に収まる字の大きさを丸ごとに決める */
.hero-rail .ln{display:block; white-space:nowrap}
/* 「年間300件」＝2字＋300件(1.3em×4字)＝約7.2em → 内側(0.93)÷7.2 = 0.129 まで */
.hero-rail li.n300{font-size:calc(var(--rail-w) * 0.125)}
/* 「長野・松本・飯田」＝8字 → 0.93÷8 = 0.116 まで */
.hero-rail li.sm{font-size:calc(var(--rail-w) * 0.112); letter-spacing:0}
/* 「300件」をひとまわり大きく */
.hero-rail li b{display:inline-block; font-size:1.3em; letter-spacing:.01em}
/* 丸の下の肉球（もとの no.svg にあったもの） */
.hero-rail li.paw-end{
  width:auto; height:auto; border:0; background:none; border-radius:0;
  display:flex; gap:calc(var(--rail-w) * 0.05); align-items:flex-end;
}
.hero-rail li.paw-end .niku{
  display:block; width:calc(var(--rail-w) * 0.20); height:calc(var(--rail-w) * 0.20);
  background:var(--ink);
  -webkit-mask:no-repeat center/contain url("img/niku.svg");
  mask:no-repeat center/contain url("img/niku.svg");
}
.hero-rail li.paw-end .niku:last-child{
  width:calc(var(--rail-w) * 0.15); height:calc(var(--rail-w) * 0.15); transform:translateY(6px);
}
/* 本文の中の「年間300件」を目立たせる（色は増やさず、太さと大きさで） */
.sec-lead b.num{font-weight:700; font-size:1.22em; letter-spacing:.02em;
  background:linear-gradient(transparent 62%, rgba(226,193,111,.55) 62%); padding:0 .12em}
/* 理由カードの中の外部リンク */
.reason-link{margin-top:12px}
.reason-link a{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-jp);
  font-weight:700; font-size:13px; color:var(--brown); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px}
.reason-link a:hover{border-bottom-color:var(--brown)}
/* ヒーローのイラスト。左＝ヘッダーのロゴの左端（＝sideW）。右＝丸4つに乗らない幅（2026-10-05 に丸4つを戻した） */
.hero-shot{
  /* 右の余白＝右の丸4つ（右端から sideW+44-rail-w/2 の位置）の16px手前でイラストが止まる幅 */
  --shot-gut:max(clamp(70px,7vw,150px), calc(var(--sideW) + 44px + var(--rail-w) / 2 + 16px));
  --shot-left:var(--sideW);
  position:relative;
  width:calc(100% - var(--shot-left) - var(--shot-gut));
  margin:0 var(--shot-gut) 0 var(--shot-left);
}
/* 2026-09-18：部屋の写真を画面いっぱいに敷き、その上に絵と文字を組む。
   写真はぼかしてあり、クリームを半分重ねて明るくやわらかい空気に寄せる。
   下の辺はゆるい波（.wave-top を上下に返して使う）で、波の下は次の節と同じクリーム */
.hero-top{
  position:relative; isolation:isolate;
  /* 上余白＝丸メニューの下端（実測122px）＋6px。2026-09-18：一度60px下げたあと、中身全体を50px上げた（SPは下の820px以下で別指定） */
  padding:128px 0 calc(var(--wave-h) * .42);
  background:var(--cream-2) url("img/hero-room.webp") center 42%/cover no-repeat;
}
/* 写真は白が青みに寄るので、淡い金を乗算して温め（::before）、クリームで明るく戻す（::after） */
.hero-top::before,
.hero-top::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none}
.hero-top::before{background:var(--green-l); mix-blend-mode:multiply; opacity:.55}
.hero-top::after{background:var(--cream-2); opacity:.38}
.hero-wave{
  --wave-c:var(--cream);
  top:auto; bottom:-1px; height:calc(var(--wave-h) * 1.15);
  transform:scaleY(-1);
}
/* 左＝キャラクター（上に吹き出し2つ）／右＝見出し・リード・家族 */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"chara copy" "chara family";
  column-gap:clamp(24px,3.4vw,56px);
  z-index:2;
}
/* 2026-10-05：家族を小さくしたぶん（約65px）見出しのかたまりを下げる */
.hero-copy{grid-area:copy; container-type:inline-size; padding-top:calc(clamp(0px,.8vw,16px) + clamp(24px,4.5vw,66px))}
/* 2行目「まずはご相談ください。」が段の幅に収まる大きさ（約12.6字ぶん）を段の幅から決める */
.hero .hero-ttl{
  font-size:clamp(24px,3.2vw,48px);
  font-size:min(60px, 7.7cqi);
  line-height:1.45; letter-spacing:.08em; color:var(--ink);
}
.hero-ttl .ln{display:block; white-space:nowrap}
.hero-ttl em{font-style:normal; font-size:1.2em; color:var(--green-d); letter-spacing:.04em}
.hero-lead{
  margin-top:clamp(14px,1.6vw,26px);
  font-family:var(--font-jp); font-weight:700;
  font-size:clamp(15px,1.4vw,20px); line-height:1.6; letter-spacing:.08em; color:var(--ink);
}
/* 1行ごとに下線（支給データの組み方）。行の幅だけ引く */
.hero-lead span{
  display:table; white-space:nowrap; padding-bottom:.18em; margin-top:.35em;
  background:linear-gradient(var(--ink),var(--ink)) left bottom/100% 2px no-repeat;
}
.hero-chara{
  grid-area:chara; align-self:end; position:relative;
  width:min(100%, 680px); justify-self:center;
  margin-bottom:calc(var(--wave-h) * -.3);
  /* 吹き出しの字の大きさを、この段の幅から決める（最小12px） */
  container-type:inline-size;
  --say-fs:max(12px, 2.7cqi);
}
/* 吹き出しの置き場＝2行の吹き出し（犬）が絵の上端より上に収まる高さ。字が大きくなれば一緒に伸びる */
.hero-chara::before{content:""; display:block; height:calc(var(--say-fs) * 5.9 + 18px)}
/* 2026-10-05：スマホは見出しが絵の上に来る。入れ替え後の犬の吹き出し（4行）が見出しのリード文にかからない高さまで広げる */
@media (max-width:820px){ .hero-chara::before{height:calc(var(--say-fs) * 9.3 + 22px)} }
.hero-chara img{display:block; width:100%; height:auto}
.hero-family{
  grid-area:family; align-self:end; justify-self:end;
  width:min(52%, 300px); margin-top:clamp(0px,.6vw,10px);   /* 2026-10-05：390→300px */
  margin-bottom:calc(var(--wave-h) * -.55);
  position:relative; z-index:2;
}
.hero-family img{display:block; width:100%; height:auto}
/* 2026-09-18：PCは家族を左へ80px・下へ30px（配置はそのまま、見た目の位置だけ動かす）。SPは820px以下で打ち消す */
.hero-family{transform:translate(-80px, 30px)}
/* 吹き出し＝白い雲の形＋金の細い線。しっぽは線2辺の小さな四角を45度に回して作る */
.hero-say{
  position:absolute; z-index:3; margin:0;
  padding:1.05em 1.5em 1.1em;
  background:var(--white); border:2px solid var(--green);
  border-radius:52% 48% 50% 50% / 58% 54% 46% 42%;
  font-family:var(--font-jp); font-weight:700; color:var(--ink);
  font-size:var(--say-fs); line-height:1.7; letter-spacing:.06em;
  text-align:center; white-space:nowrap;
  animation:heroSay 1.3s var(--ease) both;
}
.hero-say::after{
  content:""; position:absolute; bottom:-8px; width:14px; height:14px;
  background:var(--white);
  border:solid var(--green); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.hero-say.cat{animation-delay:.5s}
.hero-say.dog{animation-delay:1.5s}
/* 2026-09-18：吹き出しを、それぞれの頭の真上に置く（段の上端・左右の端にそろえると、犬の吹き出しが右へ流れ、
   しっぽが耳を指していた）。位置は絵の中の頭の位置から決めている＝絵は幅の65.17%の高さ（1200×782）。
   猫の頭＝幅の19%あたり・絵の高さの29%から下／犬の頭＝幅の57%あたり・絵の上端。しっぽの先は下端から約12px出る */
/* 2026-10-05：支給の新しい絵（高さ＝幅の54.02%）に差し替え。猫の頭＝幅の31%・絵の高さの13%から下／犬の頭＝幅の65%・絵の上端 */
.hero-say.cat{left:15%; bottom:calc(54.02cqi * .87 + 12px)}
.hero-say.cat::after{left:calc(50% - 7px)}
.hero-say.dog{left:51%; bottom:calc(54.02cqi + 16px)}
.hero-say.dog::after{left:38%}
/* 段が狭いと（字は12pxより小さくならないので）頭の上に2つ並びきらない。左右の端に寄せ、しっぽで頭を指す */
@container (max-width:350px){
  .hero-say.cat{left:0; bottom:calc(54.02cqi * .95 + 2px)}
  .hero-say.cat::after{left:44%}
  .hero-say.dog{left:auto; right:0; bottom:calc(54.02cqi + 16px)}
  .hero-say.dog::after{left:22%}
}
@keyframes heroSay{from{opacity:0; transform:translateY(10px) scale(.96)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .hero-say{animation:none} }
.hero-say br.nar{display:none}
/* 360px以下は2つの吹き出しが横に並びきらないので、犬の吹き出しを3行にして幅を詰める。
   アイコンの名前（最長「相続手続き」5字）も1列の幅に収まるよう、字間と隙間を詰める */
@media (max-width:360px){
  .hero-say br.nar{display:inline}
  .hero .hero-say{padding-inline:1.1em}
  .hero .hero-chara{width:100%}
  .hero-chara::before{height:calc(var(--say-fs) * 9.5 + 24px)}
  .hero .hero-ico{gap:2px}
  .hero .hero-ico li{font-size:12px; letter-spacing:0}
}
/* 波の帯の上にアイコン4つ。キャラクターの段の下にそろえる */
.hero-foot{position:relative; z-index:3; margin-top:calc(var(--wave-h) * -.06)}
/* 2026-10-05：マークを2倍にしたので、家族のイラストの足元（下へ30pxずらしてある）にかからないよう帯を下げる。SPは縦積みなので下の820px以下で戻す */
@media (min-width:821px){ .hero-foot{margin-top:clamp(44px,4.4vw,64px)} }
/* マーク4つは画面の中央に置く（上の段は右に丸4つの余白があるので、帯だけ左右を同じにする） */
.hero-foot .hero-shot{--shot-gut:var(--sideW)}
.hero-foot-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(24px,3.4vw,56px);
}
/* 2026-10-05：大きさを2倍に（絵 120→240px）。2段の幅いっぱいを使い、押すと下の節やページへ移る */
.hero-ico{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,2vw,32px);
  grid-column:1 / -1; width:min(100%, 860px); justify-self:center;
}
.hero-ico li{display:block}
.hero-ico a{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--font-jp); font-weight:700; color:var(--ink); text-decoration:none;
  font-size:clamp(14px,1.3vw,18px); line-height:1.5; letter-spacing:.06em; white-space:nowrap;
  transition:transform .28s ease;
}
.hero-ico a span{border-bottom:2px solid transparent; transition:border-color .28s}
.hero-ico a:hover{transform:translateY(-4px)}
.hero-ico a:hover span{border-bottom-color:var(--ink)}
.hero-ico img{display:block; width:min(100%, 190px); height:auto}
/* 2026-09-18：雲の地を白にした（写真の上でも線画が読めるように）。クリームの帯から浮くよう、ごく薄い影だけ付ける */
.hero-ico img{filter:drop-shadow(0 2px 6px rgba(60,40,20,.08))}

/* ---------- ABOUT（左に文章・右にブロブ写真。背景に有機的な面を2つ） ---------- */
/* ヒーローの地はABOUTと同じクリーム＝境界は75px */
#about{padding-top:calc(var(--space-sm) + 30px); position:relative; overflow:hidden}
.about-grid{
  display:grid; grid-template-columns:1fr .92fr; gap:min(5vw,64px); align-items:center;
}
.about-txt{position:relative; isolation:isolate; padding:26px 0}
/* 見出しの後ろの砂色の面 */
.about-txt::before{
  content:""; position:absolute; z-index:-1;
  left:-9%; top:-6%; width:72%; aspect-ratio:1.04;
  background:var(--sage);
  border-radius:42% 58% 61% 39% / 58% 43% 57% 42%;
}
.about-ttl{
  margin-top:6px; font-size:clamp(22px,2.5vw,34px); line-height:1.72; letter-spacing:.07em;
}
/* 行間 34.4 → 30px／文字色 #57534d → #1f1f1f（同一クラス全部・全ページ。
   ★TOPのABOUTのリード文も同じクラス＝一緒に変わる） */
.about-lead{
  margin-top:0;    /* 26 → 0px（同一クラス全ページ。TOPのABOUTも同じ） */
  color:var(--ink);
  font-size:clamp(14px,1.05vw,16px); line-height:30px; letter-spacing:.06em;
}
/* リード文の強調 太さ300 → 400・文字色 → #1f1f1f（同一クラス全部・全ページ）
   ★以前に入れた font-weight:300 はこの指示で上書きされたので page.css から外した */
.about-lead b{font-weight:400; color:var(--ink)}
.about-txt .btn-row{margin-top:34px}
/* 写真＝有機的な形に切り抜き。その右上にゴールドの面を覗かせる */
.about-art{position:relative; isolation:isolate}
.about-art::before{
  content:""; position:absolute; z-index:-1;
  right:-19%; top:-9%; width:92%; aspect-ratio:1.16;
  background:var(--green);
  border-radius:62% 38% 46% 54% / 51% 44% 56% 49%;
}
.about-art img{
  display:block; width:100%; height:auto;
  border-radius:63% 37% 52% 48% / 43% 58% 42% 57%;
}

/* ---------- アーチ付きの白い枠（START HERE） ----------
   上辺の中央がドーム状に持ち上がり、その中にキャラクターが座る。
   ドームは <svg>。付け根を下辺に接するように丸めるには、左右に小さな逆Rが要るので
   border-radius では描けない（＝箱の重ね合わせでは付け根が直角になる）。 */
.arch-panel{
  /* 下のセージ面が -150px でもぐり込むので、枠が上のレイヤーに来るようにする */
  position:relative; z-index:1;
  --panel-gut:clamp(14px,2.5vw,40px);
  --arch-w:clamp(240px,27vw,390px);     /* 半円を描くSVGの幅（半円の直径＝この85%） */
  --panel-bw:5px;   /* 2→5px。アーチの線もこの値の1.2倍で追従する */
  position:relative;
  width:calc(100% - var(--panel-gut) * 2); margin-inline:auto;
  margin-bottom:var(--space-sm);
  padding-top:clamp(70px,7vw,100px);
  background:var(--white);
  border:var(--panel-bw) solid var(--ink);
  border-radius:var(--r-xl);
}
/* 枠の下の地（クリーム）と合わせて、次の面までを150pxにする */
/* この要素だけ margin-top を -150px に。上の枠のレイヤー下にもぐらせる */
/* 下に50pxを足す（この要素だけ） */
#worries{margin:-150px 0 50px; position:relative; z-index:0}
/* 2026-10-05：上がお客様の声（クリームの面）になったので、STARTの枠の下へもぐり込ませない */
#voice + #worries{margin-top:0}
/* 3つの節の余白を指定値で固定（PC/SP 共通・この要素だけ）。
   もぐり込み（75〜90px）を差し引いても見出しが枠の下に隠れないことは実測で確認している */
/* #worries の下を 50→150px、#why の上を 150→50px に更新 */
#worries{padding:150px 0 150px}
#why{padding:50px 0 200px}      /* 下＝SUPPORT の▲屋根が重なるぶんの逃げ */
#support{padding:50px 0 150px}  /* 自分の▲屋根が上に出るぶん、上を詰める */
#worries .grid{gap:38px 30px}
/* この要素だけ（#start のリード文）下に30px */
#start .sec-head .sec-lead{margin-bottom:30px}
/* CASEカードの写真の大きさ。はみ出すぶんをグリッドの上に確保して、見出しとの間隔を保つ */
#start{--art-w:232px}
#start .grid{margin-top:calc(var(--art-w) / .86 * .6)}
.arch-top{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + var(--panel-bw) / 2);
  width:var(--arch-w); height:calc(var(--arch-w) * 170 / 400);
  overflow:visible; pointer-events:none;
}
.arch-top .f{fill:var(--white)}
.arch-top .e{
  fill:none; stroke:var(--ink);
  /* ドームの線を5pxに（枠と同じ太さ）。
     ★以前は「曲線はアンチエイリアスでインクが分散して細く見える」ぶんの視覚補正で1.2倍（6px）に
       していたが、指示は実数で5px。補正を外して枠と同じ値にそろえた */
  stroke-width:var(--panel-bw);
  vector-effect:non-scaling-stroke; stroke-linejoin:round;
}
/* ドームの中に座るキャラクター */
.arch-mascot{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% - 18px); width:clamp(74px,8.4vw,118px); height:auto; z-index:2;
}

/* ---------- カード共通 ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:32px 30px; height:100%;
}
.grid{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2 .card, .g2 p{font-size:15px}
.g3 .card p, .g4 .card p{font-size:14px; line-height:1.95}

/* CASE（2つの入口） */
.case{
  display:block; text-decoration:none; background:var(--white);
  border:5px solid var(--ink);   /* 線を黒・5pxに（2枚とも） */
  border-radius:var(--r-lg); padding:0 40px 36px;
  position:relative;
}
/* マウスオンの変化は一切なし（動きも色も。2026-09-02） */
/* アーチの写真＝カードの上辺から高さの60%を出す（カードの padding-top は0にしてある） */
.case .art{
  width:var(--art-w); aspect-ratio:.86; border-radius:var(--r-onigiri);
  margin:calc(var(--art-w) / .86 * -.6 - 1px) auto 30px;
  overflow:hidden;
}
.case.a .art, .case.b .art{background:var(--sage)}
.case .art img{width:100%; height:100%; object-fit:cover}
/* イラスト（正方形・透過）はアーチの中に余白を取って丸ごと見せる。アーチの上側は丸いので、下寄せにする */
.case .art.icon img{object-fit:contain; object-position:50% 72%; padding:17% 8% 5%}
/* 2026-09-16：ラベルは画像の下・見出しの上に横組みで置く（以前はカードの右上に縦組み） */
.case .cat{
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px; margin:0 0 14px;
  font-family:var(--font-en); font-size:15px; letter-spacing:.2em; color:var(--ink);
}
.case .cat span{font-family:var(--font-jp); letter-spacing:.06em; color:var(--ink); font-weight:700}
/* h3 21→26px／行間 36.8→40px（PC/SP両方・同一クラスすべて） */
.case h3{font-size:26px; line-height:40px}
.case .voices{margin:18px 0 0; padding-left:0}
/* li 14→16px（PC/SP両方・同一クラスすべて） */
.case .voices li{position:relative; padding-left:22px; font-size:16px; color:var(--ink-2); line-height:1.95}
.case .voices li::before{content:""; position:absolute; left:4px; top:.85em; width:7px; height:7px; border-radius:50%; background:var(--green)}
/* CASE01・CASE02：説明文 14→15px／行間 28→30px。
   別々の指摘だが結果として2枚とも同じになり、左右の差は解消した */
.case .desc{margin-top:18px; padding-top:18px; border-top:1px dashed var(--line); font-size:15px; line-height:30px; color:var(--ink-2)}
/* 「はじめての方へ」と同じボタンに（.btn.primary をそのまま当てる）。
   カード全体がリンクなので中は <span>。マウスオンの動きは廃止の指示に合わせて浮かせない */
.case .go{margin-top:26px}
.case .go:hover{transform:none; box-shadow:0 6px 0 var(--orange-d); background:var(--orange)}


/* WORRIES */
/* 不安のカード＝1枚ずつ形の違う「いびつな円」。右上に番号の丸を重ねる。
   丸い面はふちに文字が寄ると窮屈になるので、中身は中央ぞろえ＋余白を厚めに取る */
.worry{
  position:relative; background:var(--white); padding:46px 34px 48px;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  min-height:280px; height:100%;
  border-radius:56% 44% 47% 53% / 48% 52% 48% 52%;
}
.worry:nth-child(1){border-radius:62% 38% 44% 56% / 45% 56% 44% 55%}
.worry:nth-child(2){border-radius:43% 57% 60% 40% / 56% 44% 56% 44%}
.worry:nth-child(3){border-radius:55% 45% 38% 62% / 60% 42% 58% 40%}
.worry:nth-child(4){border-radius:39% 61% 55% 45% / 44% 58% 42% 56%}
.worry:nth-child(5){border-radius:58% 42% 62% 38% / 52% 40% 60% 48%}
.worry:nth-child(6){border-radius:47% 53% 41% 59% / 58% 47% 53% 42%}
/* 番号の丸。参考資料の矢印の位置に、矢印のかわりに数字を置く */
.worry .q{
  position:absolute; top:6px; right:10px; z-index:2;
  width:58px; height:58px; border-radius:50%;
  background:var(--green); color:var(--ink);
  font-family:var(--font-en); font-weight:500; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.worry:nth-child(2n) .q{background:var(--brown); color:#fff}
/* h3 16→20px／行間 28.8→36px（同一クラスすべて）。
   丸い面で幅が限られるので、端に1文字だけ残る行が出ないよう text-wrap:balance を当てる */
.worry h3{font-size:20px; line-height:36px; margin-bottom:14px; text-wrap:balance}
.worry p{font-size:14px; color:var(--ink-2); line-height:1.95}
.worry .worry-go{margin-top:14px}
.worry-foot{margin-top:150px; position:relative}
/* この要素だけ 28→10px */
.worry-foot .box .btn-row{margin-top:10px}
/* この要素だけ 枠 2→4px・色 #e2c16f→#1f1f1f */
.worry-foot .box{
  background:var(--white); border:4px solid var(--ink); border-radius:28px;
  padding:60px 40px; text-align:center;   /* 34→60px（この要素だけ） */
}
/* この要素だけ 15→16px */
.worry-foot p{font-size:16px; color:var(--ink-2)}
/* この要素だけ 22→30px */
.worry-foot .free{display:inline-block; margin-top:8px; font-family:var(--font-jp); font-weight:700; font-size:30px; color:var(--ink)}
.worry-foot .free em{font-style:normal; color:var(--orange); font-family:var(--font-en); font-size:1.35em; margin:0 4px}
.worry-cat{position:absolute; right:44px; bottom:calc(100% - 22px); width:124px}
/* 2026-09-08：犬の隣に喜んでいる猫。犬と重ならないよう左へ置く */
.worry-cat2{position:absolute; right:170px; bottom:calc(100% - 22px); width:104px}
/* 2026-09-08：見出しの上のねこ。もとの犬と同じ大きさ・同じ位置に */
.worry-lead-cat{width:min(30%,168px) !important; margin:0 auto 18px}

/* ▲の屋根。節の上辺に、その節と同じ色の三角を載せて「家」に見せる（WHY US・SUPPORT） */
.roof{position:relative}
.roof::before{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height:clamp(56px,8vw,130px);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
#why.roof::before{background:var(--white)}
#support.roof::before{background:var(--cream-2)}

/* WHY US */
.reason{
  background:var(--white); border:5px solid var(--ink);
  border-radius:var(--radius); padding:34px 30px; height:100%; position:relative;
}
.reason .no{
  font-family:var(--font-en); font-size:13px; letter-spacing:.18em; color:var(--green-d); display:block; margin-bottom:6px;
}
.reason .big{
  position:absolute; top:18px; right:24px; font-family:var(--font-en); font-weight:500;
  font-size:56px; line-height:1; color:var(--sage);
}
/* h3 16→20px／行間 28→36px（同一クラスすべて）。
   カード幅が限られるので端に1文字だけ残らないよう text-wrap:balance を併用 */
.reason h3{font-size:20px; line-height:34px; margin-bottom:12px; position:relative; z-index:2; text-wrap:balance}
.reason p{font-size:14px; color:var(--ink-2)}
.reason b{color:var(--ink)}
.whyus-art{position:relative}
.whyus-art img{position:absolute; right:0; bottom:0; width:150px}

/* SUPPORT */
/* 2026-09-03：「これから」「いま」のグループを、CONTACTの枠と同じ外線1本で囲う。
   ★中のカードは白なので、枠は塗らずに線だけ（塗ると白いカードが消える）。
   ★カードはアイコンが右上へ26px、ボタンが下へ23px出るので、枠の内側の余白で必ず逃がすこと。 */
.gate-box{
  border:2px solid var(--ink); border-radius:36px;
  /* アイコンが上辺の中央へ移ったので左右のはみ出しは無くなった。下はボタンの23pxを逃がす */
  padding:clamp(34px,3.6vw,44px) clamp(24px,2.6vw,34px) 80px;   /* 下 56→80px */
}
/* 2026-09-03：2つの枠を中央の縦線でつないで、ひと続きに見せる */
.support-mid{position:relative; height:56px}
.support-mid::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  transform:translateX(-1px); background:var(--ink)}
/* ラベルと見出しは2段・中央寄せ。横に伸びる罫線は使わない */
.gate-group{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin:0 0 58px;   /* 58px＝丸のはみ出し32px＋間隔26px */
  font-size:17px; letter-spacing:.1em; text-align:center;
}
/* 12→14px（同じクラス全部） */
.gate-group .tag{
  display:inline-flex; align-items:center; height:36px; padding:0 18px; border-radius:999px;
  background:var(--green); color:var(--ink); font-size:14px; letter-spacing:.14em;
}
/* 17→26px／行間 27.2→36px（同じクラス全部） */
/* 文字の下に波線（2枠とも）。
   ★下線ではなく背景の波を敷く＝改行しても各行の下に付き、太さと振幅を数値で決められる */
.gate-group .ttl{
  font-size:26px; line-height:36px; letter-spacing:.06em; line-break:strict;
  padding-bottom:10px;
  background:no-repeat bottom left/22px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0,6 C2.75,1 8.25,1 11,6 C13.75,11 19.25,11 22,6' fill='none' stroke='%238a6a2a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
}
.gate-group.b .tag{background:var(--brown); color:#fff}
/* アイコンを右上に50%はみ出させ、リンクは「はじめての方へ」と
   同じ .btn.primary にして下辺から50%はみ出させる。どちらも8枚とも同じ扱い（他のカードと同じ理由）。
   はみ出しぶん（アイコン26px／ボタン23px）は下の余白と列間で確保する（--gate-out） */
/* 2026-09-03：カードの文字は中央寄せ */
.gate{
  --gate-out:23px;   /* ボタンの高さ46pxの半分＝下にはみ出す量 */
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none;
  /* 線を黒・5pxに（TOPのSUPPORTと下層の同じカードは同じ部品） */
  background:var(--white); border:5px solid var(--ink); border-radius:20px;
  padding:44px 24px calc(var(--gate-out) + 26px);   /* 上44px＝丸の下半分32px＋間隔12px */
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s;
}
.gate:hover{transform:translateY(-5px); box-shadow:0 14px 30px rgba(107,61,44,.1); border-color:var(--green)}
/* 2026-09-03：アイコンはカードの上辺の中央に。上へちょうど半分（52pxの26px）はみ出す。
   地がクリーム2の面なので、台紙は白＋細い外線1本にして輪郭を出す */
.gate .ic{
  /* 2026-09-03：アイコンと外線の間をもう少し空ける＝丸を 52→64px に。
     はみ出す量は「丸の半分」なので 26→32px に連動させる（50%はみ出しは維持） */
  position:absolute; top:-32px; left:50%; transform:translateX(-50%);
  width:64px; height:64px; border-radius:50%;
  /* 線を黒・5pxに */
  background:var(--white); border:5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
}
/* 2026-09-03：支給のイラストアイコン（素材/1〜8.svg）に差し替え。
   ★8点は縦横比がばらばら（0.72〜1.40）。同じ幅で置くと大きさが揃って見えないので、
     **面積の平方根（√(幅×高さ)）を --ic-s に揃える**。各アイコンの幅は
     --ic-s × √(幅/高さ) で出す（高さは auto ＝ 比はそのまま）。 */
.gate .ic{--ic-s:32px}
.gate .ic img{display:block; height:auto}
.gate .ic .i1{width:calc(var(--ic-s) * 1.0284)}
.gate .ic .i2{width:calc(var(--ic-s) * 0.9892)}
.gate .ic .i3{width:calc(var(--ic-s) * 0.9966)}
.gate .ic .i4{width:calc(var(--ic-s) * 0.9697)}
.gate .ic .i4n{width:calc(var(--ic-s) * 1.058)}
.gate .ic .i5{width:calc(var(--ic-s) * 1.1833)}
.gate .ic .i6{width:calc(var(--ic-s) * 1.1381)}
.gate .ic .i7{width:calc(var(--ic-s) * 0.8515)}
.gate .ic .i8{width:calc(var(--ic-s) * 1.1569)}
/* 15→20px。「この要素だけ」の指示だが、同じカードが8枚並ぶため
   1枚だけ大きいと不具合に見える。8枚とも20pxにしてある（1枚だけに戻すことも可能） */
/* 行間 40→34px（同じ要素すべて） */
/* 20 → 24px（同一クラス全部・全ページ）
   → 2026-09-04：24 → 20px・行間 38 → 36px。同一クラス全ページ */
.gate b{font-family:var(--font-jp); font-size:20px; line-height:36px; letter-spacing:.04em}
/* 13 → 15px・行間 24.7 → 28px（同一クラス全部・全ページ） */
.gate p{font-size:15px; color:var(--ink-2); line-height:28px}
/* ボタン＝カードの下辺に中心を置く。カード全体がリンクなので中は <span>。
   マウスオンの動きは廃止の指示に合わせて、カードの浮きだけにして単独では動かさない */
.gate .go{
  position:absolute; left:50%; bottom:calc(var(--gate-out) * -1);
  transform:translateX(-50%);
  min-height:46px; padding:0 20px; font-size:14px; gap:8px; white-space:nowrap;
  box-shadow:0 4px 0 var(--orange-d);
}
.gate .go .ar{font-size:14px}
.gate:hover .go, .gate .go:hover{
  transform:translateX(-50%); background:var(--orange); box-shadow:0 4px 0 var(--orange-d);
}
/* はみ出したボタンが下の見出し・ボタン行に近づきすぎないよう、節の中だけ足す */
/* はみ出したボタンのぶんは枠の下余白（56px）が受けるので、ここでは margin-bottom を持たない */
/* 行間＝上の行のボタンの出っぱり23px ＋ 下の行の丸の出っぱり32px ＋ 元の24px */
#support .g4{column-gap:24px; row-gap:79px}

/* FLOW */
/* 1段で右から左へリピートするスライドに。
   ★継ぎ目の間隔は gap ではなく margin-right で取る。gap は「組と組の間」に入らないので
     1周ごとに間隔がずれる。全カードに同じ margin-right を付ければ 1組＝トラックの50%ちょうど */
/* STEPのピルがカードの上に13px出ているので、切り取り枠に上余白を持たせる */
/* .wrap の外に出して全画面幅に。上下の間隔は自分で持つ */
.flow-marquee{overflow:hidden; padding-top:20px; margin-bottom:30px}
/* TOPのFLOWはスライドを止めて5枚を1列に置く。
   .wrap の外にあるので、止めるときは自分で版面の幅を持つ */
.flow.static.five{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:44px 40px;
  width:min(100% - var(--sideW) * 2, 1120px); margin:20px auto 0; animation:none;
}
.flow.static.five .st{flex:none; margin-right:0; padding:34px 20px 24px}
.flow.static.five .stepno{left:18px}
.flow.static.five .st h3{font-size:clamp(17px,1.45vw,20px); white-space:nowrap}
/* 2026-09-16：カードの間の矢印。カードの外（列の間）に置くので、カードの幅は変わらない。
   横並び＝右向きの三角を列の間の中央に／縦並び＝下向きの三角を行の間の中央に。
   ★最後のカードには付けない。三角は border で描く（画像を使わない） */
.flow.static.arrows .st:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:calc(-1 * var(--arrow-gap, 40px) / 2 - 11px);
  width:0; height:0; transform:translateY(-50%);
  border-style:solid; border-width:11px 0 11px 17px; border-color:transparent transparent transparent var(--brown);
}
.flow-marquee:has(.flow.static){overflow:visible}
.flow{
  display:flex; flex-wrap:nowrap; width:max-content;
  animation:flowSlide 46s linear infinite;
}
.flow-marquee:hover .flow{animation-play-state:paused}
@keyframes flowSlide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .flow{animation:none}
  .flow-marquee{overflow-x:auto}
}
.flow .st{
  flex:0 0 clamp(230px,22vw,300px); margin-right:24px;
  /* 線を黒・5pxに */
  background:var(--white); border:5px solid var(--ink); border-radius:var(--radius);
  padding:34px 28px 28px; position:relative;
}
/* 番号はHTMLに直接持たせている（同じ6枚をもう1組置くので、CSSカウンタだと2組目が07〜12になる） */
.flow .stepno{
  position:absolute; top:-13px; left:26px; background:var(--brown); color:#fff;
  font-family:var(--font-en); font-size:12px; letter-spacing:.16em; padding:5px 14px; border-radius:999px;
}
/* 16→20px（同じクラス全部・全ページ。TOPのFLOWと下層の3ステップが一緒に変わる） */
.flow .st h3{font-size:20px; line-height:1.7; margin-bottom:10px}
.flow .st p{font-size:14px; color:var(--ink-2)}
.flow-note{margin-top:30px; text-align:center; font-size:14px; color:var(--ink-2)}

/* CONSULTATION */
.split{display:grid; grid-template-columns:1fr .84fr; gap:min(5vw,64px); align-items:center}
/* ---------- CONSULTATION の面（2026-09-03） ----------
   左端から幅85%・右上だけ角丸。下は節の底まで伸ばすので、見える外角は右上だけ。
   見出しは面の上辺から --panel-out ぶん上に出す＝面の天を「節の上余白＋はみ出し量」に置く。
   ★中身が面からはみ出さないよう、この節だけ .wrap を面の内側に寄せている
     （中央そろえのままだと右端が面の外に出る）。 */
/* 2026-09-03：見出しは面から出さず、中に収める。
   面の天を「節の上余白 − 内側の余白」に置く＝見出しの上に 48px の余白が面の中にできる */
#consultation{position:relative; --panel-w:90%; --panel-in:48px; --split-in:100px;
  --cw:min(calc(var(--panel-w) - var(--sideW) * 2), 1120px)}   /* 85→90% */
/* この節だけ下の余白 150 → 80px（PC/SP 両方。--space に触らないので他の節は変わらない） */
#consultation{padding-bottom:80px}
/* 2026-09-04：面は左から90%（右に10%の余白）に戻す。
   そのうえで中身は「面の中で中央」に置く。
   ★ページの中央（50%）ではなく面の中央（45%）＝ (面の幅 − 中身の幅) ÷ 2 を左余白にする。
     --cw は中身の幅の式そのもの。% は同じ親を基準に解決されるので calc で引ける */
.consult-bg{
  position:absolute; left:0; right:auto; width:var(--panel-w); z-index:0;
  top:calc(var(--space) - var(--panel-in)); bottom:0;
  background:var(--white); border-radius:0 clamp(32px,4.5vw,64px) 0 0;
}
#consultation .wrap{
  position:relative; z-index:1;
  width:var(--cw);
  /* 中身（.split）は指定の値で左に --split-in だけ寄っている。
     「面の中で中央」にしたいのは目に見える .split のほうなので、
     入れ物をその半分だけ左へ戻す＝(面の幅 − 中身の幅) ÷ 2 − 左寄せ量 ÷ 2 */
  margin-left:calc((var(--panel-w) - var(--cw)) / 2 - var(--split-in) / 2);
  margin-right:0;
}
/* 上ぞろえにしないと見出しが縦中央に落ちない */
/* この要素だけ margin 0 → 60px 0 0 100px。
   ★左100pxは広い画面の値。狭い画面でそのまま入れると中身の幅が足りなくなるので
     （320px幅だと残り134px）、段が縦積みになる幅では小さくしている */
#consultation .split{align-items:start; margin:60px 0 0 var(--split-in)}
.consult-card{
  background:var(--white); border-radius:32px; padding:40px;
  border:5px solid var(--ink);
  position:relative;
}
/* カードの上に細い台形を重ねて、バインダー（クリップボード）の留め具にする。
   台形は上が狭い形。下辺はカードの上の線にぴったり重ねて、その線が留め具の底辺になるようにしている。
   ★clip-path は border まで切ってしまうので枠線が描けない。黒い台形の上に、
     線の太さ5pxぶん内側の白い台形（::after）を重ねて枠線に見せている。
     内側の座標は「各辺を内向きに5px平行移動した交点」を計算した値（斜辺の線の太さも5pxで揃う） */
.consult-card .card-clip{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%);
  top:-21px; width:140px; height:16px; background:var(--ink);
  /* -21 = 台形16px + カードの線5px。絶対配置の基準は線の内側なので、その5pxを足すと下辺が線の外側にそろう */
  clip-path:polygon(14px 0, 126px 0, 140px 16px, 0 16px);
}
.consult-card .card-clip::after{
  content:""; position:absolute; inset:0; background:var(--white);
  clip-path:polygon(16.27px 5px, 123.73px 5px, 133.36px 16px, 6.64px 16px);
}
.consult-card .row{display:flex; gap:18px; padding:20px 0; border-bottom:1px dashed var(--line)}
.consult-card .row:last-of-type{border-bottom:0; padding-bottom:0}
.consult-card .row:first-of-type{padding-top:0}
.consult-card .ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--sage);
  display:flex; align-items:center; justify-content:center;
}
/* 3つのアイコンを肉球に。支給の img/niku.svg は真っ黒の塗りなので、
   フッターの見出しと同じくマスクにして緑で塗る。3行とも同じ形なので3つに当てている */
.consult-card .ic .niku{
  display:block; width:23px; height:23px; background:var(--green-d);
  -webkit-mask:no-repeat center/contain url("img/niku.svg");
  mask:no-repeat center/contain url("img/niku.svg");
}
.consult-card h3{font-size:18px; margin-bottom:4px}
.consult-card p{font-size:14px; color:var(--ink-2)}
.consult-dog{position:absolute; right:calc(-1 * min(52px, var(--sideW))); bottom:-46px; width:112px}

/* VOICE */
/* この要素だけ 56→20px */
#voice .sec-head{margin-bottom:20px}
/* 上はSTARTの枠と同じクリーム＝境目の余白は半分（枠の下の余白と合わせて150px） */
#voice{padding-top:calc(var(--space) / 2)}
.voice-nav{display:flex; justify-content:flex-end; gap:12px; margin-bottom:20px}
/* お客様の声に猫のイラスト／見出しの上へ。
   見出しが中央ぞろえなので猫も中央に置く。節の上余白（PC150／SP100px）の中に沈めて、
   節が猫のぶんそのまま間延びしないようにしている（上に -86px／SP -40px） */
.voice-cat{display:block; width:106px; height:auto; margin:-86px auto 16px}
.vbtn{width:52px; height:52px; border-radius:50%; border:1.5px solid var(--line); background:var(--white); font-family:var(--font-en); font-size:18px; color:var(--brown); transition:background-color .25s, color .25s}
.vbtn:hover{background:var(--brown); color:#fff}
.vtrack{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  scrollbar-width:none;
}
.vtrack::-webkit-scrollbar{display:none}
/* 2026-09-03：カードをアーチ状に。上辺は半円（--r-onigiri＝CASEの写真と同じ型）、
   下は少しだけ丸める。上が丸いぶん、いちばん上の行は中央に寄せて曲線の内側に収める。
   ・上の余白44px＝幅357pxのとき曲線の内側に幅200pxの行が入る深さ（実測 y≧30.6px）に余裕を持たせた値
   ・本文は幅いっぱいなので、曲線を抜けた深さ（同 y≧79.5px）より下から始まる */
.vcard{
  flex:0 0 calc((100% - 48px)/3); scroll-snap-align:start; background:var(--white);
  border:5px solid var(--ink);   /* 線を黒・5pxに */
  border-radius:var(--r-onigiri); padding:44px 30px 34px; display:flex; flex-direction:column; gap:16px;
}
/* 2026-09-18：お客様のアイコン。支給のイラストを丸の中に置く。
   同じ日付の声には、TOPでもお客様の声ページでも同じ顔が出るようにそろえている */
.vcard .top{display:flex; align-items:center; justify-content:center; gap:14px}
.vcard .av{
  flex:0 0 auto; width:clamp(52px,4.4vw,64px); aspect-ratio:1;
  border-radius:50%; background:var(--cream-2); border:2px solid var(--line-2);
  overflow:hidden; display:block;
}
.vcard .av img{width:100%; height:100%; object-fit:cover; display:block}
/* 中央ぞろえ。3枚とも同じ見た目なので3枚に当てている */
.vcard .meta{font-size:12px; color:var(--ink-3); letter-spacing:.1em; line-height:1.6; text-align:center}
/* 14→17px ／ 17→20px → 20→16px */
.vcard .meta b{display:block; font-family:var(--font-jp); font-size:16px; color:var(--ink); letter-spacing:.06em}
/* 19→20px・行間 32.3→36px（同一クラス全ページ＝TOPのカードも） */
.vcard h3{font-size:20px; line-height:36px}
.vcard p{font-size:14px; color:var(--ink-2); line-height:2.0}
.vcard .qm{font-family:var(--font-jp); font-weight:700; font-size:38px; line-height:.8; height:18px; color:var(--green-l)}
/* 2026-09-18：5段階の評価。星を5つ並べ、点数ぶんを金、残りを薄いグレーで塗る（空の星も輪郭線にせず塗る）。
   点数は読み上げ用の文字（.vh）で持つ。星の形は clip-path なので画像は要らない。
   TOPとお客様の声ページで、同じ声には同じ点数を入れる */
.vcard .stars{position:relative; display:flex; justify-content:center; gap:4px; margin:-2px 0 0}
.vcard .stars i{display:block; width:20px; height:20px; background:var(--orange-d);
  clip-path:polygon(50% 0%,61.8% 35.4%,100% 38.2%,69.1% 61.8%,79.4% 100%,50% 76.4%,20.6% 100%,30.9% 61.8%,0% 38.2%,38.2% 35.4%)}
.vcard .stars i.off{background:var(--line-2)}
/* 画面には出さず、読み上げにだけ渡す文字 */
.vh{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* 成迫会計バンド */
/* 成迫会計バンド。濃い茶の全幅ベタは、淡い面が続くページの中で1枚だけ浮くので、
   WORRIES と同じ砂色の面にして「ページの一部」に戻した。濃い面はフッター1つに絞る */
.band{background:var(--sage); color:var(--ink); position:relative; overflow:hidden}
.band .wrap{position:relative; z-index:2; text-align:center}
/* この見出しだけ 30→34px（行間 51→58px＝34×1.7）。
   clamp なので幅で縮む値も同じ比（34/30＝1.133）で持ち上げ、PC/SPとも大きくしている */
.band h2{font-size:clamp(23px,3.17vw,34px); line-height:1.7}
.band p{margin-top:24px; color:var(--ink-2); font-size:15px; line-height:2.1}
/* 実績の丸3つ（2026-09-16 画像の図から実テキストに組み直し）。
   丸は白地＋黒5px、丸と丸の間を同じ太さの線でつなぐ。
   ★丸の中のいちばん長い行（「グループとして」7字）が内側に収まる字の大きさにしてある。
     文言を長くするときは .bs-long の大きさを見直す */
.band-stats{--bs-d:clamp(196px,15vw,214px); --bs-link:28px;
  display:flex; justify-content:center; align-items:center; margin:44px auto 0; padding:0; list-style:none}
.band-stats li{
  position:relative; flex:0 0 var(--bs-d); width:var(--bs-d); height:var(--bs-d); border-radius:50%;
  background:var(--white); border:5px solid var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; font-family:var(--font-jp); font-weight:700; color:var(--ink); line-height:1.3;
}
.band-stats li + li{margin-left:var(--bs-link)}
.band-stats li + li::before{            /* つなぎの線 */
  content:""; position:absolute; top:50%; right:100%; width:calc(var(--bs-link) + 10px); height:5px;
  transform:translateY(-50%); background:var(--ink);
}
.band-stats .bs-main{font-size:16px; letter-spacing:.02em; white-space:nowrap}
.band-stats .bs-main b{font-family:var(--font-en); font-weight:500; font-size:42px; line-height:1; margin:0 2px; letter-spacing:0}
.band-stats .bs-main.bs-long{font-size:20px; line-height:1.45; letter-spacing:.06em}
.band-stats .bs-sub{font-size:15px; letter-spacing:.06em; white-space:nowrap}

/* BLOG */
/* 2026-09-03：参考サイト の「お知らせ・ブログ」と同じ型に。
   実測（1440幅）＝内側1200／左の見出し187px・右の一覧830px／カードは横長で高さ180px・間隔40px／
   サムネは180×180の正方（角丸5px・object-fit:cover）／サムネと本文の間50px／
   メタ（カテゴリ＋日付）を見出しの上に横並び／見出し18px・行間36px／**2枚目だけ左に50pxの段差**。
   色だけは自社のものに置き換えた（赤→金 --green-d、日付は Jost の墨グレー）。 */
.blog-flex{display:flex; align-items:flex-start; gap:min(9vw,120px)}
.blog-head{flex:0 0 300px; position:relative}
/* 見出しは参考サイトと同じく縦書き。英字ラベルは和文の左に立てる
   （縦組みは右から左に読むので、DOMの順＝英字→和文 がそのまま「左に英字」になる）。
   ★90度回転は transform ではなく writing-mode で出す（transform だと回る前の箱が場所を占める） */
.blog-ttl{display:flex; align-items:flex-start; gap:18px; margin-bottom:34px}
.blog-ttl .sec-title{
  writing-mode:vertical-rl; text-orientation:mixed;
  /* 「く。」が3列目に落ちないよう、長い行（11字）が入る高さにする */
  height:clamp(300px,31vw,380px); line-height:1.9;
  font-size:clamp(21px,2.5vw,28px); letter-spacing:.12em;
}
.blog-ttl .eyebrow{
  writing-mode:vertical-rl; text-orientation:sideways;
  margin:0; line-height:1;
}
/* 線を文字の長さいっぱいに伸ばし、文字との間を空ける。
   縦組みなので線は文字の左に立つ＝間隔は margin-right、長さは height。
   height:auto にすると「行の長さいっぱい」になる（縦組みでは height が行方向）。
   上マージンを残すと線が下にずれて短くなるので 0 にしてある */
.blog-ttl .eyebrow::after{width:2px; height:auto; margin:0 10px 0 0}
.blog-head .sec-title{font-size:clamp(21px,2.5vw,28px)}
.blog-head .sec-lead{margin-top:0; font-size:15px}
.blog-head .btn-row{margin-top:30px}
.blog-cat{display:block; width:120px; margin:34px 0 0 -6px}
.blog-list{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:40px}
/* 2枚目だけ右へ段差（参考サイト の margin-left:50px） */
.blog-list li:nth-child(even){margin-left:50px}
.post{display:flex; align-items:flex-start; gap:min(3.5vw,50px); text-decoration:none; transition:transform .3s ease}
.post:hover{transform:translateY(-5px)}
/* 2026-09-03：サムネイルはダミー写真（支給の pixta 3点を正方に切って webp 化）。
   短辺いっぱいで切っているので上下は落ちない＝人物の頭が切れない */
.post .thumb{
  flex:0 0 180px; width:180px; aspect-ratio:1; border-radius:8px; background:var(--cream-2);
  overflow:hidden; position:relative;
}
.post .thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease)}
.post:hover .thumb img{transform:scale(1.05)}
.post .body{flex:1 1 auto; min-width:0; padding-top:6px}
.post .meta{display:flex; align-items:center; gap:16px; margin-bottom:12px}
/* 色つきの楕円で囲う。3枚とも同じ扱い */
.post .cat{
  display:inline-flex; align-items:center; height:28px; padding:0 15px; border-radius:999px;
  background:var(--green-l); color:var(--green-d);
  font-family:var(--font-jp); font-weight:700; font-size:13px; letter-spacing:.08em;
}
.post .date{font-family:var(--font-en); font-size:15px; color:var(--ink-3); letter-spacing:.08em}
/* 見出しは2行まで。3行目は…で切る（参考サイト と同じ c-crop の振る舞い） */
/* 行間 36→32px（18px × 1.78）。3枚とも同じ形なので3枚に当たる。
   1024px以下は 17px × 1.9 ＝ 32.3px で、すでに指示の32pxとほぼ同じなのでそのまま */
.post h3{
  font-size:18px; line-height:1.78; letter-spacing:.06em; color:var(--ink); line-break:strict;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.post:hover h3{color:var(--green-d)}
/* カードにリード文章を2行。見出しと同じく3行目は…で切る */
.post .excerpt{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  margin-top:10px; font-size:15px; line-height:1.9; color:var(--ink-2);
}

/* LINE */
.line-panel{display:grid; grid-template-columns:.8fr 1fr; gap:min(5vw,60px); align-items:center}
.line-visual{position:relative; display:flex; justify-content:center}
.line-visual .phone{
  width:min(100%,278px); aspect-ratio:9/16.4; background:var(--white);
  border:5px solid var(--brown); border-radius:32px; padding:18px 16px;   /* 太さのみ 2→5px（色の指定は無かったので茶のまま） */
  display:flex; flex-direction:column; gap:10px;
}
.line-visual .bar{height:26px; border-radius:999px; background:var(--sage); display:flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.12em; color:var(--green-d)}
.line-visual .msg{background:var(--cream-2); border-radius:14px; padding:10px 12px; font-size:12px; line-height:1.8; color:var(--ink-2)}
.line-visual .msg.me{background:var(--green-l); margin-left:26px}
.line-visual .cat{position:absolute; right:-6px; bottom:-14px; width:104px}
/* 2026-09-03：トークが上から順に出て、繰り返す。
   ★動かすのは opacity と transform だけ＝吹き出しの箱は最初から場所を取っているので、
     画面の中でガタつかない（display を切り替えると高さが動いて画面が跳ねる）。
   4つとも同じ8秒のkeyframesを当て、開始を0.9秒ずつずらす＝出るのも消えるのも上から順になる。
   スクロールで見えてから動きだすように、既存の .rv（見えたら .on が付く）に乗せている */
@keyframes chatPop{
  0%   {opacity:0; transform:translateY(10px) scale(.96)}
  6%   {opacity:1; transform:none}
  70%  {opacity:1; transform:none}
  78%  {opacity:0; transform:translateY(-6px) scale(.98)}
  100% {opacity:0; transform:translateY(10px) scale(.96)}
}
.line-visual .msg{opacity:0}
.line-visual.on .msg{animation:chatPop 8s var(--ease) infinite both}
.line-visual.on .msg:nth-child(2){animation-delay:.15s}
.line-visual.on .msg:nth-child(3){animation-delay:1.05s}
.line-visual.on .msg:nth-child(4){animation-delay:1.95s}
.line-visual.on .msg:nth-child(5){animation-delay:2.85s}
@media (prefers-reduced-motion:reduce){
  .line-visual .msg{opacity:1}
  .line-visual.on .msg{animation:none}
}

/* FAQ */
/* 2026-09-03：参考サイト の「よくある質問」と同じ型に。
   クリームの地に白いピルのカードを間隔をあけて並べ、罫線は引かない。
   見出しは左寄せで、和文の下に英字を敷く。開閉は右端の ＋ / − */
.faq-head{margin-bottom:64px}
.faq-head .sec-title{font-size:clamp(24px,3.1vw,34px)}
.faq-head .en-sub{
  display:block; margin-top:10px;
  font-family:var(--font-en); font-weight:500; font-size:16px; letter-spacing:.22em; color:var(--green-d);
}
.faq{display:flex; flex-direction:column; gap:22px}
.faq details{background:var(--white); border-radius:48px}
.faq summary{
  list-style:none; cursor:pointer; display:flex; gap:14px; align-items:flex-start;
  padding:30px 82px 30px 38px; position:relative;
  font-family:var(--font-jp); font-weight:700; font-size:16px; line-height:1.8;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--font-en); color:var(--green-d); font-size:19px; line-height:1.5; flex:0 0 auto}
/* ＋ / − ＝2本の線。開いたら縦の1本を寝かせて「−」にする（1行目の高さに合わせて置く） */
.faq summary::before, .faq summary::after{
  content:""; position:absolute; right:38px; top:44px; width:17px; height:1.6px;
  background:var(--green-d); border-radius:2px;
}
.faq summary::after{transform:rotate(90deg); transition:transform .32s var(--ease)}
.faq details[open] summary::after{transform:rotate(0deg)}
/* 答え＝「Q.」の右端にそろえて字下げする（38 + Q.の幅20 + 間隔14 ＝ 72px） */
.faq .a{padding:0 82px 34px 72px; color:var(--ink-2); font-size:15px; line-height:2.0}

/* 最終CTA */
/* .cta-box を上の節へ飛び出させるので overflow:hidden は外した。
   左右に8%はみ出すアーチは、自分専用の切り取り枠（.arch-clip）で切る＝外すと横スクロールが出る */
.cta{position:relative; background:var(--sage); text-align:center}
.arch-clip{position:absolute; left:0; right:0; top:0; height:130px; overflow:hidden; pointer-events:none}
/* 上の節（FAQ）の地をそのまま下ろしてくるアーチ。FAQ をクリームにしたので、ここもクリーム。
   ★節の外の重ね装飾は、上の節の地色を変えたら必ず一緒に変える（白のままだと1枚だけ浮く） */
.cta .arch{position:absolute; left:-8%; right:-8%; top:-1px; height:120px; background:var(--cream); border-radius:0 0 50% 50% / 0 0 100% 100%}
.cta .wrap{position:relative; z-index:2}
.cta .eyebrow{text-align:center}
.cta .eyebrow::after{margin-inline:auto}
/* 枠に入れて幅が狭くなったので、端に1文字だけ残る行が出ないように balance＋禁則をかける */
.cta h2{font-size:clamp(21px,3vw,34px); line-height:1.65; text-wrap:balance; line-break:strict}
.cta p{margin-top:24px; color:var(--ink-2); font-size:15px; line-height:2.1}
.cta .free{display:inline-block; margin-top:18px; font-family:var(--font-jp); font-weight:700; font-size:clamp(16px,2vw,20px)}
.cta .free em{font-style:normal; color:var(--green-d); font-family:var(--font-en); font-size:1.35em; margin:0 3px}
/* 2026-09-03：本文を枠で囲い、線を下ろしてボタンを並列につなぐ。
   線の幅・色は枠と同じ（--cta-bw / --ink）。ボタン2つの中心の間隔は
   「ボタン幅＋間隔」なので、幅を固定して枝の左右をその半分の位置に置く */
.cta{--cta-bw:5px; --cta-btnw:300px; --cta-gap:24px; --cta-out:100px}   /* 2→5px（幹と枝も同じ太さで追従） */
/* 2026-09-03：枠を上の節（FAQ）へ100px飛び出させる。
   節の上余白は --space（PC150／SP100）なので、その ＋100px ぶん引き上げると
   ちょうど100pxだけ境界より上に出る。上の節の下余白も同じだけ足して、
   FAQの最後のカードとの間隔（150px）は変えない */
.cta-box{
  position:relative; z-index:3;
  margin-top:calc((var(--space) + var(--cta-out)) * -1);
  background:var(--white); border:var(--cta-bw) solid var(--ink); border-radius:36px;
  padding:clamp(36px,4.2vw,54px) clamp(26px,4vw,58px);
  max-width:900px; margin-inline:auto;
}
/* 上＝波のぶんを足す（谷がいちばん深い所で約86/90まで下りてくる）／下＝枠が飛び出すぶんを足す */
#faq{padding:calc(var(--space) + var(--wave-h) * .5) 0 calc(var(--space) + 100px)}
.cta-stem{display:block; width:var(--cta-bw); height:44px; background:var(--ink); margin:0 auto}
.cta-btns{position:relative; justify-content:center; gap:var(--cta-gap); margin-top:0; padding-top:30px}
/* 枝＝上辺と左右の縦線。左右の縦線がそれぞれのボタンの中心に落ちる */
.cta-btns::before{
  content:""; position:absolute; top:0; height:30px;
  left:calc(50% - (var(--cta-btnw) + var(--cta-gap)) / 2);
  right:calc(50% - (var(--cta-btnw) + var(--cta-gap)) / 2);
  border-top:var(--cta-bw) solid var(--ink);
  border-left:var(--cta-bw) solid var(--ink);
  border-right:var(--cta-bw) solid var(--ink);
}
.cta-btns .btn{flex:0 0 var(--cta-btnw); width:var(--cta-btnw)}
.cta .duo{display:flex; justify-content:center; align-items:flex-end; gap:min(4vw,40px); margin-top:44px}
.cta .duo img{width:min(30vw,168px)}
.cta .duo img.cat{width:min(22vw,124px)}

/* フッター */
/* フッター＝ページ唯一の濃い面。#6b3d2c は彩度が高く、淡い地の上で貼り付けたように見えたので、
   同じ色相のまま彩度と明度を落とした #332c26 に。白文字 13.7:1 */
.site-foot{position:relative; background:var(--ground); color:rgba(255,255,255,.82);
  padding:calc(80px + var(--wave-h)) 0 40px}
.site-foot .wrap{position:relative; z-index:2}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px}
.site-foot .logo img{width:233px}
.foot-info{margin-top:22px; font-size:13px; line-height:2.0}
.foot-tel{margin-top:18px; display:flex; flex-direction:column; gap:6px}
.foot-tel a{text-decoration:none; font-family:var(--font-en); font-size:17px; color:#fff; letter-spacing:.04em}
.foot-tel a small{font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,.7); margin-right:8px; letter-spacing:.08em}
/* 見出しの先頭に肉球（支給の 素材/niku.svg）。
   原本は真っ黒の塗りなので、マスクにして見出しと同じ金で塗る（暗いフッターの地でも読める） */
.site-foot h4{
  display:flex; align-items:center; gap:9px;
  font-size:13px; letter-spacing:.16em; color:var(--green); margin-bottom:16px;
}
.site-foot h4::before{
  content:""; flex:0 0 auto; width:15px; height:15px; background:var(--green);
  -webkit-mask:no-repeat center/contain url("img/niku.svg");
  mask:no-repeat center/contain url("img/niku.svg");
}
.site-foot ul li{margin-bottom:10px}
.site-foot ul a{text-decoration:none; font-size:13px}
.site-foot ul a:hover{color:#fff; text-decoration:underline}
.site-foot ul a.ext::after{content:"↗"; margin-left:6px; font-size:.9em}
/* 上の余白 56→0px／内側の余白 24→40px／上の罫線を外す。
   フッターは下層ページと共通の部品なので、TOPと「はじめての方へ」の両方が同時に直る */
.foot-bottom{
  margin-top:0; padding-top:40px; border-top:0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.62);
}
.foot-bottom a{text-decoration:none}

.sp-br{display:inline}

/* SP固定CTA */
.sp-cta{display:none}

/* ---------- サポート内容ポップアップ ---------- */
html.svc-open{overflow:hidden}
.svc-modal{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px}
.svc-modal[hidden]{display:none}
/* 参考サイト のスタッフ紹介ポップアップと同じ型に。
   ・地は白ではなく --peach（実測 #f7f6f5）／角丸24px／背景の暗幕は .6
   ・左＝ビジュアルの面、右＝本文の面の2段組み（実測 337 : 48 : 347）
   ・閉じるは丸ボタンではなく「×＋close の文字」を右上に置く（ハンバーガーと同じ形） */
.svc-backdrop{position:absolute; inset:0; background:rgba(51,44,38,.72); opacity:0; transition:opacity .28s ease}
.svc-modal.on .svc-backdrop{opacity:1}
.svc-panel{
  position:relative; width:min(100%,720px); max-height:min(86vh,880px); overflow-y:auto;
  background:var(--peach); border-radius:24px; padding:64px 64px 56px;
  box-shadow:0 30px 70px rgba(51,44,38,.3);
  opacity:0; transform:translateY(18px) scale(.98); transition:opacity .3s ease, transform .3s ease;
}
.svc-modal.on .svc-panel{opacity:1; transform:none}
/* 2026-09-03：写真は不要＝1カラム。幅も本文が読める広さ（720px）に戻した */
.svc-grid{display:block}
.svc-close{
  position:absolute; top:20px; right:22px; z-index:3;
  width:52px; background:none; border:0; padding:6px 0;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:var(--ink); cursor:pointer;
}
/* ×＝2本の線を交差させる（フォントの「×」だと大きさと太さが書体まかせになるため） */
.svc-close .x{display:block; position:relative; width:24px; height:24px}
.svc-close .x::before, .svc-close .x::after{
  content:""; position:absolute; left:0; top:11px; width:24px; height:1.8px; background:currentColor; border-radius:2px;
}
.svc-close .x::before{transform:rotate(45deg)}
.svc-close .x::after{transform:rotate(-45deg)}
.svc-close .cl{font-family:var(--font-en); font-size:13px; font-weight:500; letter-spacing:.05em; line-height:1}
.svc-close:hover{color:var(--green-d)}
.svc-close:focus-visible{outline:3px solid var(--green); outline-offset:2px; border-radius:8px}
.svc-cat{
  display:inline-flex; align-items:center; height:30px; padding:0 15px; border-radius:999px;
  background:var(--green); color:var(--ink); font-family:var(--font-jp); font-weight:700;
  font-size:12px; letter-spacing:.12em;
}
/* 1カラムに戻したので、本文が読める大きさに（見出し26px／本文15px） */
.svc-body{padding-top:16px}   /* 右上の close（下端70px）より下から始める */
.svc-title{margin-top:14px; font-size:clamp(21px,2.4vw,26px); line-height:1.6}
.svc-voice{
  margin-top:22px; padding:22px 24px; border-radius:18px; background:var(--sage);
  font-size:15px; line-height:2.0; color:var(--ink);
}
.svc-h{
  margin-top:34px; margin-bottom:10px; font-size:14px; letter-spacing:.14em; color:var(--green-d);
  display:flex; align-items:center; gap:12px;
}
/* 見出しの先頭に●（ポップアップ内の3つの見出しに揃えて当てる） */
.svc-h::before{content:"●"; font-size:9px; line-height:1; margin-right:-4px}
.svc-h::after{content:""; flex:1; height:1px; background:var(--line)}
.svc-summary{font-size:15px; line-height:2.05; color:var(--ink-2)}
.svc-note{margin-top:10px; font-size:14px; line-height:1.9; color:var(--ink-2); text-indent:-1em; padding-left:1em}
.svc-fee{padding:18px 22px; border-radius:16px; background:var(--white); border:1px solid var(--line)}
/* 2026-09-08：支給原稿は「おすすめ」「事例」「費用」がどれも箇条書き。丸は共通で当てる */
.svc-examples li, .svc-recommend li{position:relative; padding-left:24px; font-size:15px; line-height:1.95; color:var(--ink-2)}
.svc-examples li + li, .svc-recommend li + li{margin-top:8px}
.svc-examples li::before, .svc-recommend li::before{content:""; position:absolute; left:5px; top:.82em; width:8px; height:8px; border-radius:50%; background:var(--green)}
.svc-fee li{font-size:15px; line-height:2.05; color:var(--ink-2)}
.svc-fee li + li{margin-top:4px}
/* ※の行は直前の項目に付く注記。ぶら下げて小さく出す */
.svc-fee li.fine{padding-left:1em; text-indent:-1em; font-size:13px; line-height:1.9; color:var(--ink-3)}
.svc-panel .btn-row{margin-top:34px}
.svc-more{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--font-jp); font-weight:700; font-size:14px; color:var(--brown); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:3px;
}
.svc-more:hover{border-bottom-color:var(--brown)}
.svc-fine{margin-top:20px; font-size:12px; line-height:1.9; color:var(--ink-3)}
@media (max-width:1024px){
  .svc-panel{padding:56px 40px 44px}
  #consultation{--split-in:56px}                /* 左100→56px */
  #consultation .split{margin:50px 0 0 var(--split-in)}
}
@media (max-width:820px){
  .svc-modal{padding:0; align-items:flex-end}
  .svc-panel{
    width:100%; max-height:92vh; border-radius:24px 24px 0 0; padding:34px 24px 34px;
    transform:translateY(28px);
  }
  .svc-close{top:12px; right:12px; width:46px}
  .svc-close .x{width:22px; height:22px}
  .svc-close .x::before, .svc-close .x::after{width:22px; top:10px}
  .svc-close .cl{font-size:12px}
  .svc-body{padding-top:0}
  .svc-title{margin-top:12px; font-size:20px}
  .svc-panel .btn-row{flex-direction:column}
  .svc-panel .btn-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .svc-backdrop, .svc-panel{transition:none}
}

/* ---------- キャラクター紹介ポップアップ（ABOUTのボタンから開く） ----------
   枠・暗幕・閉じる・節の見出し（.svc-h）・背後のスクロール止めは、
   サポート内容ポップアップ（.svc-modal）の部品をそのまま使う。ここは中身だけ。
   文字は絵に焼かず実テキスト＝あとから文言だけを差し替えられる。
   色は既存の変数だけ。スカーフの緑は色では見せず文章だけにしている
   （この配色に緑の変数が無く、--green は実体が金色のため）。 2026-09-18 */
.chara-modal .chara-story{margin-top:18px; font-size:15px; line-height:2.05; color:var(--ink-2)}
/* 2026-09-18：プロフィールは2枚を縦に積む（全幅）。
   行間44px＝ラベルが上辺から18px出るぶんを足したもの */
.chara-modal .chara-grid{
  display:grid; grid-template-columns:1fr; gap:44px;
  align-items:start; margin-top:30px;   /* 30px＝ラベルが上辺から18px出るぶんの逃げ */
}
/* カードは REASON と同じ白地＋黒5pxの枠 */
.chara-card{
  position:relative; background:var(--white);
  border:5px solid var(--ink); border-radius:var(--r-sm);
  padding:38px 20px 26px; text-align:center;
}
/* ラベルは上辺の中央に半分だけ出す（SUPPORTの丸と同じ扱い）。丸みは .gate-group .tag と同じ値 */
.chara-tag{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; height:36px; padding:0 18px; border-radius:999px;
  background:var(--green); color:var(--ink);
  font-family:var(--font-jp); font-weight:700; font-size:14px; letter-spacing:.14em; white-space:nowrap;
}
.chara-card.b .chara-tag{background:var(--brown); color:#fff}
/* 絵の後ろの砂色の面（ABOUTの面と同じ考え方） */
.chara-fig{position:relative; isolation:isolate; width:min(62%,150px); margin:0 auto 16px}
.chara-fig::before{
  content:""; position:absolute; z-index:-1; left:50%; transform:translateX(-50%);
  bottom:4%; width:106%; aspect-ratio:1; background:var(--sage);
  border-radius:52% 48% 46% 54% / 50% 52% 48% 50%;
}
.chara-card.b .chara-fig{width:min(74%,172px)}
.chara-fig img{display:block; width:100%; height:auto}
.chara-prof{margin:0; text-align:left}
.chara-card.b .chara-prof{text-align:center}
.chara-prof dt{
  font-family:var(--font-jp); font-weight:700; font-size:13px; letter-spacing:.14em;
  color:var(--green-d); margin-top:14px; line-height:1.8;
}
.chara-prof dt:first-child{margin-top:0}
/* 段が狭いと最後に「す。」だけの行が出るので、行の長さをそろえる（禁則は balance が見ないので併記） */
.chara-prof dd{
  margin:2px 0 0; font-size:14px; line-height:26px; color:var(--ink-2);
  line-break:strict; text-wrap:balance;
}
.chara-prof dd .nm{
  font-family:var(--font-jp); font-weight:700; font-size:20px; line-height:1.7;
  color:var(--ink); letter-spacing:.06em;
}
.chara-role{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
  font-family:var(--font-jp); font-weight:700; font-size:15px; line-height:1.9; color:var(--ink);
}
/* 5つの約束＝白い箱に箇条で（箱の作りは .svc-fee と同じ）。
   ★reset で list-style を外しているのは ul だけ。ol は既定の「1.」と字下げが残るので自分で消す */
.chara-vow{
  counter-reset:vow; list-style:none; margin:0; padding:10px 22px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
}
.chara-vow li{
  counter-increment:vow; position:relative; padding:14px 0 14px 52px;
  font-family:var(--font-jp); font-weight:700; font-size:16px; line-height:1.85;
  letter-spacing:.04em; line-break:strict; text-wrap:balance;
}
.chara-vow li + li{border-top:1px dashed var(--line)}
.chara-vow li::before{
  content:counter(vow); position:absolute; left:0; top:13px;
  width:34px; height:34px; border-radius:50%;
  background:var(--green); color:var(--ink);
  font-family:var(--font-en); font-weight:500; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.chara-scarf-lead{
  font-family:var(--font-jp); font-weight:700; font-size:16px; line-height:1.9;
  color:var(--green-d); letter-spacing:.06em; line-break:strict;
}
.chara-scarf-txt{margin-top:8px; font-size:15px; line-height:30px; color:var(--ink-2); line-break:strict}
/* 2つ目のボタンは1つ目の下の行に。行間はボタン列の gap と同じ14px */
.about-txt .btn-row.sub{margin-top:14px}
@media (max-width:820px){
  .chara-fig{width:min(48%,150px)}
  .chara-vow{padding:6px 18px}
  .chara-vow li{padding:12px 0 12px 46px; font-size:15px}
  .chara-vow li::before{width:32px; height:32px; font-size:16px; top:11px}
  /* 段が狭いので改行をやめて流す（残すと「…コーポレートカラー／です。」と3字だけの行が出る） */
  .chara-scarf-txt br{display:none}
}
@media (max-width:480px){
  /* 14pxにすると「相続が終わったあとも寄り添います。」が1行に収まる（最小12pxは割らない） */
  .chara-vow li{font-size:14px}
}

/* ---------- ページトップへ（2026-09-03） ----------
   右下に固定。左下の「初回無料相談」と、SP下部の固定CTAに重ならない位置に置く。
   下へ送ると出てくる（JSで .on を付ける）。 */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:var(--white); border:2px solid var(--ink); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-decoration:none;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background-color .25s, color .25s;
}
.to-top.on{opacity:1; transform:none; pointer-events:auto}
/* 矢印は文字ではなく2本の線で作る（書体で大きさが変わらない） */
.to-top .ar{display:block; position:relative; width:14px; height:14px}
.to-top .ar::before{content:""; position:absolute; left:6px; top:1px; width:2px; height:13px; background:currentColor; border-radius:2px}
.to-top .ar::after{content:""; position:absolute; left:1px; top:1px; width:12px; height:12px;
  border-left:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); border-radius:2px}
.to-top .lb{font-family:var(--font-en); font-size:10px; letter-spacing:.08em; line-height:1}
.to-top:hover{background:var(--ink); color:#fff}
.to-top:focus-visible{outline:3px solid var(--green); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .to-top{transition:none} }

/* スクロールでふわっと */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.on{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   レスポンシブ
   ========================================================= */

@media (max-width:1439px){
  /* 固定カードは本文に被るのでバーに切り替え（電話番号はメニューの中に入っている） */
  .head-right{display:none}
  body{padding-bottom:92px}
  .sp-cta{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; position:fixed; z-index:70;
    left:0; right:0; bottom:0; padding:12px max(16px, var(--sideW)) calc(12px + env(safe-area-inset-bottom));
    background:rgba(236,230,220,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  }
  .sp-cta .btn{min-height:52px; padding:0 14px; font-size:14px; letter-spacing:.04em}
  .sp-cta .btn.primary{box-shadow:0 4px 0 var(--orange-d)}
  /* 下部固定CTA（高さ約76px＋セーフエリア）に重ならない位置へ上げる */
  .to-top{width:50px; height:50px; right:16px;
    bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (min-width:1440px){
  .sp-cta{display:none}
}
/* h3が26pxになったので、段が狭い幅では強制改行を外して自然に折る（3〜4行に割れて端行が出るため） */
@media (max-width:1240px){
  .case h3 br{display:none}
}
@media (max-width:1024px){
  :root{--space:110px; --space-sm:60px; --r-xl:32px}
  .hero{--rail-w:min(clamp(100px,9.2vw,124px), max(84px, calc((100vh - 306px) / 4.75)))}
  .hero-rail{right:calc(var(--sideW) - 14px + 63px - var(--rail-w) / 2)}
  .voice-cat{margin-top:-50px}   /* 上余白が110pxになるので沈める量も浅く（猫の上を60pxに保つ） */
  .head-right .btn.primary{min-height:52px; padding:0 22px; font-size:14px}
  .head-tel .hours{display:none}
  /* 写真の面を細くして、メニューの面を先に確保する */
  .menu-in{grid-template-columns:38fr 62fr}
  .menu-logo img{width:min(28vw,159px)}
  #start{--art-w:210px}
  .hero-say{padding-inline:1.2em}   /* 吹き出し2つの間をあける */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 左の見出しを細くして、カードの幅を確保する */
  .blog-flex{gap:min(6vw,64px)}
  .blog-head{flex:0 0 250px}
  .blog-list{gap:32px}
  .blog-list li:nth-child(even){margin-left:30px}
  .post .thumb{flex-basis:150px; width:150px}
  .post h3{font-size:17px; line-height:1.9}
  .flow.static.five{grid-template-columns:minmax(0,1fr); width:min(100% - var(--sideW) * 2, 560px); gap:56px}
  .flow.static.five .st{padding:34px 28px 28px}
  .flow.static.five.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;
  }
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
  .vcard{flex-basis:calc((100% - 24px)/2)}
  .whyus-art img{width:120px}
}
@media (max-width:820px){
  :root{--space:100px; --sideW:30px; --radius:20px}
  body{font-size:15px; padding-bottom:92px}
  .site-head{padding:18px calc(var(--sideW) + 66px) 0 var(--sideW)}
  .logo img{width:min(48.5vw,183px)}
  .head-tel{display:none}
  .head-right{display:none}
  /* 2026-09-03：少し小さく（86×84 → 74×72） */
  .menu-btn{
    top:12px; right:10px; width:74px; height:72px; gap:5px;
  }
  .menu-btn .bars{gap:4px; width:23px}
  .menu-btn .bars i{width:23px}
  .menu-btn .lb{font-size:12px}   /* 最小12pxは割らない */
  html.menu-open .menu-btn .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  html.menu-open .menu-btn .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* SPは 参考サイト と同じく1面だけ（写真の面は出さない） */
  .menu-in{grid-template-columns:1fr}
  .menu-visual{display:none}
  .menu-pane{padding:36px calc(var(--sideW) + 56px) 20px var(--sideW)}
  .menu-scroll{gap:30px}
  .menu-nav{gap:22px}
  .menu-nav a .jp{font-size:17px}
  .menu-nav a .en{font-size:12px}
  .menu-cta .btn-row{flex-direction:column; gap:10px}
  .menu-cta .btn-row .btn{min-height:48px}
  .hero-rail{display:none}
  .hero-shot{--shot-gut:var(--sideW)}
  /* スマホは縦に積む：見出し → キャラクター → 家族 → アイコン4つ */
  .hero-top{padding-top:96px}
  .hero-grid{
    grid-template-columns:minmax(0,1fr); grid-template-rows:none;
    grid-template-areas:"copy" "chara" "family"; row-gap:12px;
  }
  .hero-copy{padding-top:0; text-align:center}
  .hero .hero-ttl{font-size:min(44px, 7.7cqi)}
  .hero-lead span{margin-inline:auto}
  .hero-chara{width:min(92%, 520px); margin:0 auto}
  .hero-family{justify-self:center; width:min(50%, 300px); margin-top:0; margin-bottom:calc(var(--wave-h) * -.3); transform:none}
  .hero-foot-in{grid-template-columns:minmax(0,1fr)}
  .hero-ico{grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%, 460px); row-gap:20px}
  .about-grid{grid-template-columns:1fr; gap:40px}
  .about-txt{padding:20px 0}
  .about-txt::before{left:-7%; top:-4%; width:66%}
  .about-art{width:min(86%,420px); margin-inline:auto}
  .about-art::before{right:-16%; top:-16%; width:92%}
  .about-lead{font-size:14px; line-height:30px}   /* SPも30px */
  .arch-panel{--panel-gut:12px; padding-top:64px}
  .arch-panel .wrap{width:min(100% - 36px, var(--wrap))}
  .arch-mascot{bottom:calc(100% - 20px)}
  .sec-head{margin-bottom:36px}
  .sec-lead{font-size:14px; line-height:2.0}
  .grid{gap:16px}
  .g2, .g3, .g4{grid-template-columns:minmax(0,1fr)}
  /* 左右2段組みをやめて縦に。カードは横長のまま（サムネを小さくして収める） */
  .blog-flex{flex-direction:column; gap:44px}
  .blog-head{flex:0 0 auto; width:100%}
  /* 狭い画面で縦書きの見出しは高くなりすぎるので横組みに戻す */
  .blog-ttl{display:block; margin-bottom:0}
  .blog-ttl .sec-title{writing-mode:horizontal-tb; height:auto; line-height:1.7; letter-spacing:.06em}
  /* 横組みに戻る側も同じ考え方。inline-block にして箱を文字幅まで縮め、
     線は width:auto でその幅いっぱいにする（block のままだと段の幅いっぱいに伸びる） */
  .blog-ttl .eyebrow{writing-mode:horizontal-tb; display:inline-block}
  .blog-ttl .eyebrow::after{width:auto; height:2px; margin:10px 0 0}
  .blog-head .sec-lead{margin-top:20px}
  .blog-cat{width:96px; margin-top:26px}
  .blog-list{width:100%; gap:26px}
  .blog-list li:nth-child(even){margin-left:0}
  .post{gap:18px}
  .post .thumb{flex-basis:110px; width:110px; border-radius:6px}
  .post .body{padding-top:2px}
  .post .excerpt{font-size:14px; line-height:1.8; margin-top:8px}
  .post .meta{gap:12px; margin-bottom:8px}
  .post .cat{font-size:12px}
  .post .date{font-size:13px}
  .post h3{font-size:15px; line-height:1.85}
  .case{padding:0 24px 28px}
  #start{--art-w:min(72vw,220px)}
  /* 縦に積むと、2枚目のアーチ（上へ60%はみ出す）が1枚目のボタンに重なる。はみ出すぶん＋間隔を行の間に取る */
  #start .grid{row-gap:calc(var(--art-w) / .86 * .6 + 48px)}
  .worry{padding:38px 26px 40px; min-height:0}
  #worries .grid{gap:28px}
  .worry .q{width:50px; height:50px; font-size:19px; top:2px; right:6px}
  .worry-foot{margin-top:120px}
  .worry-foot .box{padding:60px 22px}   /* 上下は指定どおり60px。左右は22pxのまま（40pxだとボタンが枠に収まらない） */
  .worry-cat{width:104px; right:4px}
  .worry-cat2{width:88px; right:114px}
  .reason{padding:28px 24px}
  .reason .big{font-size:44px; top:14px; right:18px}
  .whyus-art img{position:static; width:110px; display:block; margin:28px auto 0}
  .support-mid{height:40px}
  /* アイコンが右上へ出たので、左にアイコンを置く横型の組みはやめて縦積みに戻す */
  .gate{
    --gate-out:21px;
    display:flex; flex-direction:column; gap:8px;
    padding:39px 22px calc(var(--gate-out) + 22px);   /* 上39px＝丸の下半分29px＋間隔10px */
  }
  .gate .ic{top:-29px; left:50%; right:auto; transform:translateX(-50%); width:58px; height:58px}
  .gate .ic{--ic-s:29px}   /* アイコンの大きさは据え置き＝丸だけ広げて余白を増やす */
  .gate .go{min-height:42px; padding:0 18px; font-size:14px}
  #support .g4{column-gap:24px; row-gap:70px}   /* ボタン21px＋丸29px＋元の20px */
  .gate-box{padding:30px 32px 72px; border-radius:28px}   /* 32px＝アイコンのはみ出し24pxの逃げ／下は枠の下余白に合わせる */
  .gate-group{margin:0 0 52px}   /* 丸のはみ出し29px＋間隔23px */
  .flow .st{flex-basis:min(74vw,270px); padding:30px 24px 24px}
  .flow.static.five{gap:56px}
  .split, .line-panel{grid-template-columns:1fr; gap:36px}
  #consultation{--panel-w:92%; --panel-in:36px}   /* --cw は同じ式のまま追従する */
  #consultation{--split-in:24px}                /* 狭い幅は左100→24px */
  #consultation .split{margin:40px 0 0 var(--split-in)}
  .consult-card{padding:30px 24px}
  .consult-card{margin-top:50px}
  .consult-dog{width:86px; right:12px; top:-80px; bottom:auto}
  /* 幅が狭いぶん、アーチの曲線が浅い位置まで食い込む。上の余白を46pxに（実測 y≧38.9px） */
  .vcard{flex-basis:86%; padding:46px 24px 30px}
  .voice-nav{justify-content:center}
  .voice-cat{width:86px; margin-top:-40px}   /* SPは小さく（上余白が100pxなので沈める量も浅く） */
  /* 狭い画面は縦に積む（横に送らせない）。線も縦に */
  .band-stats{--bs-d:200px; --bs-link:22px; flex-direction:column; margin-top:32px}
  .band-stats li{flex:none}
  .band-stats li + li{margin:var(--bs-link) 0 0}
  .band-stats li + li::before{top:auto; right:auto; bottom:100%; left:50%; width:5px;
    height:calc(var(--bs-link) + 10px); transform:translateX(-50%)}
  .line-visual .cat{width:88px; right:2%}
  .faq-head{margin-bottom:44px}
  .faq-head .en-sub{font-size:14px}
  .faq{gap:16px}
  .faq details{border-radius:32px}
  .faq summary{font-size:15px; gap:10px; padding:22px 50px 22px 24px}
  .faq summary .q{font-size:17px}
  .faq summary::before, .faq summary::after{right:22px; top:35px; width:15px}
  .faq .a{font-size:14px; padding:0 50px 26px 50px}   /* 24 + Q.の幅16 + 間隔10 ＝ 50px */
  .cta .duo{gap:14px}
  .cta .arch{height:70px}
  /* ボタンは縦に積むので、枝はやめて幹だけにする（並べる余地がない） */
  .cta-box{border-radius:28px}
  .cta-stem{height:32px}
  .cta-btns{flex-direction:column; gap:12px; padding-top:0}
  .cta-btns::before{display:none}
  .cta-btns .btn{flex:0 0 auto; width:100%}
  .foot-grid{grid-template-columns:1fr}
  .site-foot{padding:calc(60px + var(--wave-h)) 0 32px}
  .site-foot .logo img{width:205px}
  /* スマホだけ残っていた上余白36pxも外す（PC/SP両方＝0pxの指示） */

  /* SP下部固定CTA */
  .sp-cta{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; position:fixed; z-index:70;
    left:0; right:0; bottom:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(253,250,245,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  }
  .sp-cta .btn{min-height:52px; padding:0 10px; font-size:13px; letter-spacing:.04em}
  .sp-cta .btn.primary{box-shadow:0 4px 0 var(--orange-d)}
  .to-top{width:46px; height:46px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom))}
  .to-top .lb{font-size:9px}
}
@media (max-width:480px){
  /* カードが狭くなるぶん留め具も小さく（内側の座標は同じ計算で出し直した値） */
  .consult-card .card-clip{top:-19px; width:110px; height:14px;
    clip-path:polygon(11px 0, 99px 0, 110px 14px, 0 14px)}
  .consult-card .card-clip::after{clip-path:polygon(13.43px 5px, 96.57px 5px, 103.64px 14px, 6.36px 14px)}
  .head-right .btn.primary{display:none}
  .logo img{width:183px}
  .btn{min-height:56px; padding:0 22px; font-size:15px}
  .btn-row{gap:10px}
  .hero h1{font-size:29px}
  .sec-title{font-size:21px}
}

/* 20pxは340px幅より狭いと「お客様アンケート」が2行に折れる
   （必要170px／収まる幅166px）。320px幅だけ19pxに落として1行に保つ。他の幅は指示どおり20px */
@media (max-width:340px){
  .vcard .meta b{font-size:16px}
  /* 23pxだと320px幅で「相続税が必要になっても、」（12字＝276px）が
     入る幅（260px）を超えて1行が折れ、2行の見出しが4行になる。320px幅だけ20pxに落とす（21pxでも字間ぶんで262pxになり収まらなかった） */
  .band h2{font-size:20px}
}

/* ==========================================================================
   2026-10-01 追記（TOPと下層の両方に効かせる必要がある直しだけ）
   ========================================================================== */

/* よくある不安の丸：狭い画面で番号の丸と見出しが重なっていた。
   丸の下端(top+高さ)より下から本文が始まるように、上の余白を取る＝幅に関係なく重ならない。
   ★TOP（index）と「はじめての方へ」の両方に出る部品なので style.css 側で直す */
@media (max-width:820px){
  .worry{padding-top:76px}
  .worry .q{top:10px; right:14px; width:50px; height:50px; font-size:19px}
}

/* 行末に1文字だけ残る行（「〜ます／す。」「備え／も」）を作らない。
   日本語は <br> で折らず、文節で折る auto-phrase を使う（対応していないブラウザは従来どおり） */
.worry p, #support .sec-title{word-break:auto-phrase}
/* 狭い箱の見出しは行の長さをそろえる */
#support .sec-title{text-wrap:balance}

/* ポップアップ（サポート内容・LINEのQR・キャラクター紹介）を開いている間は
   メニューのボタンを出さない。右上で閉じるボタンと重なって押しづらかった
   ＝ .menu-btn は z-index:95 で .svc-modal(90) より上に出ていた */
html.svc-open .menu-btn{opacity:0; pointer-events:none}

/* ---- ヒーローの吹き出し：2通りの会話を入れ替える ----
   2つの文を同じ grid のマスに重ねる＝箱は長いほうの大きさになり、入れ替えても大きさが変わらない。
   消えているほうも場所を取るので、読み上げには aria-hidden を付けてHTML側で分けている */
.hero-say{display:grid; place-items:center}
.hero-say > span{grid-area:1/1; transition:opacity .55s var(--ease)}
.hero-say > .s2{opacity:0}
.hero-say.alt > .s1{opacity:0}
.hero-say.alt > .s2{opacity:1}
@media (prefers-reduced-motion:reduce){ .hero-say > span{transition:none} }

/* ---- 予約ボタンにカーソルを合わせると、ボタンの裏からキャラクターが顔を出す ----
   箱の高さを頭のぶんだけにして、画像の上端（顔）だけが見えるようにしている。
   指で操作する端末にはホバーが無いので (hover:hover) の中だけ */
@media (hover:hover){
  .cta-btns .btn{position:relative}
  .cta-btns .btn::before{
    content:""; position:absolute; right:16px; bottom:calc(100% - 12px);
    width:62px; height:42px; margin:0;
    background:url("img/dog-happy.webp") no-repeat center top/62px auto;
    opacity:0; transform:translateY(12px);
    transition:opacity .26s var(--ease), transform .32s var(--ease);
    pointer-events:none; z-index:-1;
  }
  .cta-btns .btn.lineg::before{background-image:url("img/cat-happy.webp")}
  .cta-btns .btn:hover::before,
  .cta-btns .btn:focus-visible::before{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){
    .cta-btns .btn::before{transition:none}
  }
}

/* ---------- お知らせ（2026-10-05：ヒーローの下に新着3件／一覧ページ） ----------
   WordPress ではカスタム投稿「お知らせ」。種類（休日相談会・セミナー・お知らせ・お客様の声・ブログ）をピルで出す */
.news-top{position:relative; z-index:3; padding:clamp(40px,5vw,72px) 0 0}
.news-box{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:start;
  background:var(--white); border:5px solid var(--ink); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px) clamp(22px,3.2vw,48px);
}
.news-head{display:flex; flex-direction:column; gap:14px; min-width:150px}
.news-ttl{margin:0; font-family:var(--font-jp); font-size:clamp(20px,1.9vw,24px); line-height:1.4; letter-spacing:.08em}
.news-ttl .en{display:block; margin-bottom:4px; font-family:var(--font-en); font-weight:500; font-size:13px; letter-spacing:.16em; color:var(--green-d)}
.news-all{align-self:flex-start; padding-bottom:2px; border-bottom:1px solid var(--ink);
  font-family:var(--font-jp); font-weight:700; font-size:14px; color:var(--ink); text-decoration:none}
.news-list{margin:0; padding:0; list-style:none}
.news-list li + li{border-top:1px dashed var(--line)}
.news-list a{display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:baseline; column-gap:16px;
  padding:14px 0; color:var(--ink); text-decoration:none}
.news-list li:first-child a{padding-top:4px}
.news-list time{font-family:var(--font-en); font-size:14px; letter-spacing:.06em; white-space:nowrap}
.news-list .ncat{display:inline-block; justify-self:start; min-width:7em; padding:2px 10px; text-align:center; white-space:nowrap;
  font-family:var(--font-jp); font-weight:700; font-size:12px; letter-spacing:.06em;
  background:var(--cream-2); border:1px solid var(--line); border-radius:999px}
.news-list .nttl{font-size:15px; line-height:1.8}
.news-list a:hover .nttl{text-decoration:underline; text-underline-offset:3px}
.news-list.wide{width:min(100%,880px); margin-inline:auto}
.news-list.wide li:first-child a{padding-top:14px}
.news-list.wide li:first-child{border-top:1px dashed var(--line)}
.news-list.wide li:last-child{border-bottom:1px dashed var(--line)}
.news-art{width:min(100%,760px); margin-inline:auto}
@media (max-width:820px){
  .news-box{grid-template-columns:minmax(0,1fr); gap:10px}
  .news-head{flex-direction:row; justify-content:space-between; align-items:flex-end}
  .news-list a{grid-template-columns:auto minmax(0,1fr); row-gap:4px}
  .news-list .nttl{grid-column:1 / -1}
}

/* ===== 2026-10-19 ===== */
/* 文節のかたまり。狭い画面では、かたまりの切れ目でだけ折り返す。
   ★auto-phrase は iPhone の Safari では効かない（Chrome だけ）ので、文節を inline-block で包んで折る位置を決める */
.ph{display:inline-block}

/* ヘッダー：ロゴの上に「成迫会計グループの相続専門窓口」。
   ロゴ画像の中の「株式会社マスネットワーク」（PCで字の高さ約7px）より少し大きく。左端はロゴの文字（犬の右）にそろえる＝画像の幅の30% */
.logo{--logo-w:clamp(187px,17.73vw,261px)}
.logo-sub{
  display:block; margin:0 0 4px calc(var(--logo-w) * .3);
  font-family:var(--font-jp); font-weight:700; font-size:12px; line-height:1.4; letter-spacing:.06em;
  color:var(--ink); white-space:nowrap; text-decoration:none;
}
.logo:has(.logo-sub){text-decoration:none}
@media (max-width:820px){ .logo{--logo-w:min(48.5vw,183px)} }
@media (max-width:480px){ .logo{--logo-w:183px} }

/* 吹き出しのしっぽ：吹き出しは楕円なので、下辺は真ん中から離れるほど上に上がる。
   しっぽは下辺の一番低い所（真ん中）を基準に置いているので、端に寄せると本体から離れて見えた。真ん中寄りに置き直す */
.hero-say.dog::after{left:calc(44% - 7px)}
@container (max-width:350px){
  .hero-say.cat::after{left:calc(48% - 7px)}
  .hero-say.dog::after{left:calc(40% - 7px)}
}

/* 吹き出しの入れ替え：文字だけをフェードで替えず、吹き出しごと一度しぼませて、開いたときと同じ動きで出し直す。
   app.js が .out（しぼむ）→ 文を入れ替えて .re（出し直す）を付ける。猫→犬の順は開いたときと同じ */
@keyframes heroSayOut{to{opacity:0; transform:translateY(6px) scale(.9)}}
.hero-say.out{animation:heroSayOut .35s var(--ease) both}
.hero-say.re{animation:heroSay 1.1s var(--ease) both}
.hero-say.re.cat{animation-delay:.15s}
.hero-say.re.dog{animation-delay:.85s}
.hero-say.out > span, .hero-say.re > span{transition:none}

/* キャラクター紹介：ヨリソイヌとそうニャンの絵を同じ高さに。
   どちらも元の絵は高さ820px（犬 649px幅／猫 538px幅）。枠の幅をそろえ、猫だけ幅を 538/649 にする */
.chara-card.b .chara-fig{width:min(62%,150px)}
@media (max-width:820px){ .chara-card.b .chara-fig{width:min(48%,150px)} }   /* 犬の .chara-fig と同じ幅 */
.chara-card.b .chara-fig img{width:82.9%; margin-inline:auto}

/* フッターのロゴ：支給いただいた商標登録データ（Word の図形→PDF）から作った白抜き（2026-10-19）。
   元の青い影は半透明の白にして立体感を残した。楕円のマークが大きくなったぶん、文字が小さくならないよう幅を広げる */
.site-foot .logo img{width:300px; height:auto}
@media (max-width:820px){ .site-foot .logo img{width:min(100%,260px)} }

/* ===== 2026-10-30 ===== */
/* ロゴの上の「成迫会計グループの相続専門窓口」：中心を「相続手続支援センター」の文字の中心にそろえる。
   ロゴ画像の中で文字は画像の幅の18.7%〜95.3%＝中心は57%（logo.svg を描いて実測・2026-11-02）。
   字間は最後の字の右にも付き、字の形にも左右の余白があるので、その分だけ右へ戻す＝見える文字の中心を合わせる */
.logo-sub{--sub-ls:.06em; letter-spacing:var(--sub-ls); margin-left:0; transform:translateX(calc(var(--logo-w) * .57 - 50% + var(--sub-ls) / 2 + 1px)); width:max-content}
/* メニューを開いたときの左上のロゴにも同じ文言。画像の幅は .menu-logo img と同じ値 */
.menu-logo{--logo-w:clamp(168px,14vw,209px); text-decoration:none}
@media (max-width:1024px){ .menu-logo{--logo-w:min(28vw,159px)} }
.menu-logo .logo-sub{--sub-ls:.02em}

/* 見出しの下の波線：端が波の途中で切れないよう、波の数を枠の幅に合わせて整数にする（round）。
   1つの波は山から始まり山で終わる形にした＝両端が山の頂で止まる。谷が絵の下端で欠けていたので高さの中に収めた */
.gate-group .ttl{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0,1.5 C4,1.5 7,6.5 11,6.5 C15,6.5 18,1.5 22,1.5' fill='none' stroke='%238a6a2a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:round no-repeat;
}