/* トップページ改修案（追加分だけ）。骨組み・配色（紺 #1e293b／金 #b08d48）・写真・既存の文はそのまま。
   2026-10-07 先生のコメントを反映：入口の絵札は取扱業務の節へ／弁護士費用の案内を目立たせる／事務所概要は写真が左・文が右 ほか。
   動き：①見出しの下で、揺れた線が張って「まっすぐ」になる ②絵が、輪郭の線から描かれて色が乗る ③節の見出しが一文字ずつ立ち上がる
        ④一本の金の線が読み進んだ所まで伸び、各節の見出しへ枝を出し、問い合わせの節に着く。どれも一度きり。動きを減らす設定の人には動かさない。 */
:root { --tp-navy:#1e293b; --tp-gold:#b08d48; --tp-gold-d:#86692f; --tp-line:#e5e7eb; --tp-sub:#5b6676; --tp-paper:#f9fafb; --tp-ease:cubic-bezier(.22,.7,.2,1); --tp-gut:34px; }
main { position:relative; }

/* ───── 冒頭 */
.tp-veil { background:linear-gradient(90deg, rgba(15,23,42,.84) 0%, rgba(15,23,42,.68) 36%, rgba(15,23,42,.36) 70%, rgba(15,23,42,.26) 100%) !important; }
/* 冒頭の文字の欄：下に余白があるので、行と行の間をゆったりと（先生の指示 2026-10-07） */
main > section:first-of-type .max-w-3xl > p:first-child { margin-bottom:36px !important; }
main > section:first-of-type h1 { margin-bottom:44px !important; }
main > section:first-of-type .max-w-3xl > p.max-w-xl { margin-bottom:56px !important; }
main > section:first-of-type p { word-break:keep-all; overflow-wrap:anywhere; }
.tp-l { display:block; overflow:hidden; padding:.06em .04em .18em 0; margin-bottom:-.18em; }
.tp-l > span { display:inline-block; position:relative; }
main > section:first-of-type h1.hero-fade-in { animation-delay:0s !important; animation-duration:.25s !important; }
main > section:first-of-type p.hero-fade-in { animation-delay:.05s !important; animation-duration:.4s !important; }
.tp-js .tp-l > span { transform:translateY(108%); animation:tp-up .7s var(--tp-ease) 0s forwards; }
.tp-js .tp-l + .tp-l > span { animation-delay:.1s; }
.tp-wave { position:absolute; left:0; right:.04em; bottom:-.3em; width:calc(100% - .04em); height:.46em; overflow:visible; pointer-events:none; }
.tp-wave path { fill:none; stroke:var(--tp-gold); stroke-width:4.5px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.tp-js .tp-wave { clip-path:inset(-60% 100% -60% 0); }
.tp-js .tp-wave.go { animation:tp-wipe 1.5s cubic-bezier(.6,.05,.25,1) .55s forwards; }
@keyframes tp-wipe { to { clip-path:inset(-60% -2% -60% 0); } }
.tp-l { padding-bottom:.34em; margin-bottom:-.34em; }
@keyframes tp-up { to { transform:none; } }
@keyframes tp-draw { to { transform:scaleX(1); } }
@keyframes tp-fade { from { opacity:0; } to { opacity:1; } }
.tp-hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px; }
.tp-js .tp-hero-note, .tp-js .tp-hero-after { animation:tp-fade .4s ease-out .15s both; }
.tp-btn { position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-height:60px; padding:0 24px 0 34px; background:#fff; color:var(--tp-navy) !important; font-size:16px; font-weight:700; letter-spacing:.16em; border-radius:2px; text-decoration:none !important; box-shadow:0 14px 34px rgba(2,6,23,.34); overflow:hidden; transition:color .35s var(--tp-ease); }
.tp-btn::before { content:""; position:absolute; inset:0; background:var(--tp-navy); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--tp-ease); }
.tp-btn::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--tp-gold); }
.tp-btn > * { position:relative; }
.tp-btn i { font-size:18px; transition:transform .45s var(--tp-ease); }
.tp-btn:hover { color:#fff !important; } .tp-btn:hover::before { transform:scaleX(1); } .tp-btn:hover i { transform:translateX(5px); }
.tp-btn:focus-visible, .tp-hero-tel:focus-visible, .tp-card:focus-visible { outline:3px solid var(--tp-gold); outline-offset:3px; }
.tp-hero-tel { display:inline-flex; align-items:center; gap:12px; color:#fff !important; text-decoration:none !important; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.tp-hero-tel > i { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.75); border-radius:2px; font-size:18px; }
.tp-hero-tel span { display:flex; flex-direction:column; line-height:1.25; }
.tp-hero-tel b { font-size:26px; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.tp-hero-tel small { font-size:14px; font-weight:500; letter-spacing:.1em; }
.tp-hero-note { display:flex; align-items:center; gap:12px; margin-top:50px; font-size:15px; font-weight:500; letter-spacing:.12em; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65); }
.tp-hero-after { margin:18px 0 0; font-size:15px; font-weight:500; letter-spacing:.08em; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65); }
.tp-hero-after a { color:#fff !important; text-decoration:underline; text-decoration-color:rgba(255,255,255,.8); text-underline-offset:5px; text-decoration-thickness:1px; }

/* ───── 取扱業務：絵札（先生の指示で、冒頭には重ねず、この節に。重複する一覧は外した） */
#services .mb-16 { margin-bottom:40px !important; }
.tp-svc { display:grid; grid-template-columns:1fr; gap:56px; }
.tp-entry-grp + .tp-entry-grp::before { content:""; display:block; height:2px; background:var(--tp-gold); margin:0 0 40px; }   /* 個人の方と事業者の方の区切り（金の線・2026-10-12） */
.tp-entry-lab { margin:0 0 14px; padding-left:14px; border-left:3px solid var(--tp-gold); font-size:20px !important; font-weight:700; letter-spacing:.2em; color:var(--tp-navy); line-height:1.5 !important; }
.tp-entry-row { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; --ph:168px; }
.tp-n5 .tp-entry-row { grid-template-columns:repeat(5,minmax(0,1fr)); --ph:150px; }
.tp-n6 .tp-entry-row { grid-template-columns:repeat(6,minmax(0,1fr)); --ph:140px; }      /* 6枚（不動産を足した2026-10-11）。狭い幅では下の@mediaで3列2段に */
.tp-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px 0 16px; border:0; border-radius:2px; background:transparent; font:inherit; color:var(--tp-navy) !important; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .35s var(--tp-ease); }
.tp-card-img { display:block; width:100%; height:var(--ph); margin-bottom:18px; padding:0 12px; overflow:hidden; border-bottom:1px solid var(--tp-gold); }      /* 人物が立つ線（札どうしでつながって一本になる） */
.tp-card-img img, .tp-card-img svg { display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%; transition:transform .6s var(--tp-ease); transform-origin:50% 100%; }
.tp-card-img.tp-bust img, .tp-card-img.tp-bust svg { height:var(--bust,230%); object-position:50% 0; }                               /* 全身の絵は、上半身だけを見せる（切り取りのみ） */
.tp-card b { position:relative; font-size:23px; font-weight:700; letter-spacing:.08em; line-height:1.45; word-break:keep-all; }
.tp-card b::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--tp-gold); transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--tp-ease); }
.tp-card small { margin-top:8px; font-size:16px; line-height:1.6; color:var(--tp-sub); letter-spacing:.02em; word-break:keep-all; overflow-wrap:anywhere; }
.tp-n6 .tp-card-chev { margin-top:auto; padding-top:6px; }     /* 名前が2行の札があっても、開閉の矢印は同じ高さにそろえる */
.tp-card-chev { margin-top:6px; font-size:22px; line-height:1; color:var(--tp-gold-d); transition:transform .45s var(--tp-ease); }
.tp-card[aria-expanded="true"] .tp-card-chev { transform:rotate(180deg); }
.tp-card[aria-expanded="true"] { background:#f8f5ee; }
.tp-card[aria-expanded="true"]::after { transform:scaleX(1); }
.tp-card::after { content:""; position:absolute; left:0; right:0; top:calc(18px + var(--ph) - 2px); height:3px; background:var(--tp-gold); transform:scaleX(0); transform-origin:left center; transition:transform .4s var(--tp-ease); }
.tp-card:hover::after, .tp-card:focus-visible::after { transform:scaleX(1); }
.tp-card:hover { background:#f8f5ee; } .tp-card:hover .tp-card-img img, .tp-card:hover .tp-card-img svg { transform:scale(1.05); } .tp-card:hover b::after, .tp-card:focus-visible b::after { transform:scaleX(1); }
.tp-detail { grid-column:1 / -1; display:grid; grid-template-rows:1fr; }
.tp-js .tp-detail { grid-template-rows:0fr; transition:grid-template-rows .55s var(--tp-ease); }
.tp-js .tp-detail.is-open { grid-template-rows:1fr; }
.tp-detail-clip { min-height:0; overflow:hidden; }
.tp-detail-box { position:relative; margin:14px 0 6px; padding:26px 30px 24px; background:#fff; border:1px solid var(--tp-line); border-top:3px solid var(--tp-gold); border-radius:2px; box-shadow:0 18px 40px -26px rgba(15,23,42,.35); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:8px 44px; align-items:start; text-align:left; }
.tp-detail-box::before { content:""; position:absolute; top:-10px; left:var(--nx,50%); width:16px; height:16px; margin-left:-8px; background:#fff; border-left:3px solid var(--tp-gold); border-top:3px solid var(--tp-gold); transform:rotate(45deg); }
.tp-js .tp-detail-box { opacity:0; transform:translateY(-8px); transition:opacity .4s var(--tp-ease), transform .5s var(--tp-ease); }
.tp-js .tp-detail.is-open .tp-detail-box { opacity:1; transform:none; transition-delay:.12s; }
.tp-detail-head h4 { margin:0 0 8px; font-size:24px; font-weight:700; letter-spacing:.1em; color:var(--tp-navy); line-height:1.5; }
.tp-detail-head p { margin:0; font-size:16px; line-height:1.9; color:#475569; }
.tp-detail-list { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }
.tp-detail-list li { position:relative; padding:9px 0 9px 20px; font-size:16px; line-height:1.6; color:var(--tp-navy); border-bottom:1px solid var(--tp-line); }
.tp-detail-list li { word-break:auto-phrase; }      /* 「契約不適合」の「合」だけが次の行に落ちないように */
.tp-detail-list li::before { content:""; position:absolute; left:0; top:1.25em; width:10px; height:1px; background:var(--tp-gold); }
.tp-detail-sub + .tp-detail-sub { margin-top:16px; }
.tp-detail-sub h5 { margin:0 0 2px; font-size:15px; font-weight:700; letter-spacing:.16em; color:var(--tp-gold-d); }
.tp-detail-left { grid-column:1; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.tp-detail-box > .tp-detail-list, .tp-detail-box > .tp-detail-subs { grid-column:2; }
.tp-kids { margin-top:18px; width:100%; }
.tp-kids-lab { margin:0 0 8px; font-size:14px; font-weight:700; letter-spacing:.14em; color:var(--tp-gold-d); }
.tp-kids-row { display:flex; flex-wrap:wrap; gap:8px; }
.tp-kid { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 10px 0 14px; background:#fff; color:var(--tp-navy) !important; font-size:15px; font-weight:700; letter-spacing:.04em; text-decoration:none !important; border:1px solid var(--tp-navy); border-left:3px solid var(--tp-gold); border-radius:2px; transition:background .3s var(--tp-ease), color .3s var(--tp-ease); }
.tp-kid i { font-size:18px; color:var(--tp-gold-d); transition:transform .35s var(--tp-ease), color .3s; }
.tp-kid:hover { background:var(--tp-navy); color:#fff !important; } .tp-kid:hover i { color:#fff; transform:translateX(3px); }
.tp-kid:focus-visible { outline:3px solid var(--tp-gold); outline-offset:2px; }
.tp-detail-go { align-self:flex-start; display:inline-flex; align-items:center; justify-content:space-between; gap:18px; min-height:54px; margin-top:18px; padding:0 18px 0 24px; background:var(--tp-navy); color:#fff !important; font-size:16px; font-weight:700; letter-spacing:.08em; text-decoration:none !important; border-bottom:3px solid var(--tp-gold); border-radius:2px; transition:transform .35s var(--tp-ease); }
.tp-detail-go i { font-size:18px; transition:transform .4s var(--tp-ease); }
.tp-detail-go:hover i { transform:translateX(5px); }
.tp-detail-go:focus-visible, .tp-card:focus-visible { outline:3px solid var(--tp-gold); outline-offset:2px; }
.tp-svc-note { margin:22px 0 0; font-size:16px; line-height:1.9; color:var(--tp-sub); }
/* 弁護士費用の案内（目立つ形に） */
#fees-link { margin-top:44px !important; opacity:1 !important; transform:none !important; }
.tp-fee { position:relative; display:flex; align-items:center; gap:18px; max-width:540px; margin:0 auto; padding:10px 18px 10px 15px; background:#fff; color:var(--tp-navy) !important; text-decoration:none !important; text-align:left; border:1px solid var(--tp-navy); border-bottom:4px solid var(--tp-gold); border-radius:2px; box-shadow:0 14px 30px -18px rgba(15,23,42,.42); transition:transform .4s var(--tp-ease), box-shadow .4s var(--tp-ease); }
.tp-fee-img { flex:none; width:65px; height:58px; }
.tp-fee-img img, .tp-fee-img svg { width:100%; height:100%; object-fit:contain; object-position:50% 100%; display:block; }
.tp-fee-t { flex:1; display:flex; flex-direction:column; }
.tp-fee-t small { font-size:20px; font-weight:700; letter-spacing:.12em; color:var(--tp-navy); line-height:1.5; word-break:keep-all; }
.tp-fee > i { flex:none; display:grid; place-items:center; width:43px; height:43px; background:var(--tp-navy); color:#fff; font-size:20px; border-radius:2px; transition:transform .4s var(--tp-ease); }
.tp-fee:hover { transform:translateY(-2px); box-shadow:0 16px 30px -18px rgba(15,23,42,.45); } .tp-fee:hover > i { transform:translateX(4px); }
.tp-fee:focus-visible { outline:3px solid var(--tp-gold); outline-offset:3px; }

/* ───── 絵：輪郭の線から描かれて、色が乗る */
.tp-pic svg { overflow:visible; }
.tp-prep .tp-fl { fill-opacity:0; }
.tp-prep .tp-st { stroke:#1e293b; stroke-width:1.6px; stroke-linecap:round; stroke-linejoin:round; transition:stroke-dashoffset 1.25s cubic-bezier(.4,.1,.2,1); }
.tp-prep.tp-draw .tp-st { stroke-dashoffset:0 !important; }
.tp-prep.tp-draw .tp-fl { fill-opacity:1; transition:fill-opacity .7s ease .95s; }
.tp-prep.tp-done .tp-st { stroke:none; }
.tp-js .tp-pic img { opacity:0; }                                    /* 差し替え前の一瞬、完成した絵が先に見えないように */
.tp-js.tp-noinline .tp-pic img, .tp-pic.tp-fail img { opacity:1; }

/* ───── 節の見出し：一文字ずつ立ち上がる／右の空きに、その節を表す絵 */
.tp-ch { display:inline-block; }
.tp-js main section[id] .tp-ch { opacity:0; transform:translateY(.5em); transition:opacity .6s var(--tp-ease), transform .7s var(--tp-ease); transition-delay:calc(.1s + var(--i,0) * 55ms); }
.tp-js main section[id].tp-in .tp-ch { opacity:1; transform:none; }
.tp-hd { display:flex !important; flex-direction:row !important; align-items:flex-end !important; justify-content:space-between !important; gap:24px; }
.tp-hd-pic { flex:none; display:block; width:150px; height:96px; border-bottom:1px solid var(--tp-gold); margin-bottom:6px; }
.tp-hd-pic img, .tp-hd-pic svg { display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%; }

/* ───── 一本の線：左の余白を下り、各節の見出しへ枝を出し、問い合わせの節に着く（幅の広い画面） */
.tp-spine { position:absolute; z-index:36; left:var(--tp-sx,-99px); top:var(--tp-st,0); width:1px; height:var(--tp-sh,0); pointer-events:none; overflow:hidden; display:none; }
.tp-spine > i { position:absolute; inset:0; background:linear-gradient(to bottom, #e6cc8f 0, #e6cc8f var(--tp-hb,0px), var(--tp-gold) var(--tp-hb,0px)); transform-origin:50% 0; transform:scaleY(var(--tp-sp,1)); transition:transform .7s var(--tp-ease); }
.tp-js .tp-spine > i { transform:scaleY(var(--tp-sp,0)); }          /* 長さを決める前に、全長で一瞬描かれないように */
.tp-nb { display:inline-block; }
main section p.text-accent[class*="tracking-"] { position:relative; display:flex; align-items:center; gap:14px; font-size:13px; }
main section p.text-accent[class*="tracking-"]::after { content:""; width:46px; height:1px; background:var(--tp-gold); transform-origin:left center; }
.tp-js main section p.text-accent[class*="tracking-"]::after { transform:scaleX(0); transition:transform .9s var(--tp-ease) .2s; }
.tp-js main section.tp-in p.text-accent[class*="tracking-"]::after { transform:none; }
.tp-arrive { position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none; display:none; }
.tp-arrive > i { position:absolute; left:var(--tp-sx,0); right:var(--tp-sr,0); top:0; height:1px; background:var(--tp-gold); transform-origin:left center; }
#contact { position:relative; }
#contact .ml-head h2 { position:relative; display:inline-block; padding-bottom:.5em; }
#contact .ml-head { text-align:center; }
#contact p, footer p { word-break:auto-phrase; }
#contact .ml-head h2::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--tp-gold); transform-origin:left center; }
.tp-js #contact .ml-head h2::after { transform:scaleX(0); transition:transform 1s var(--tp-ease) 1s; }
.tp-js #contact.tp-on .ml-head h2::after { transform:none; }
.tp-has-spine .tp-spine, .tp-has-spine .tp-arrive { display:block; }
.tp-has-spine main section p.text-accent[class*="tracking-"]::after { display:none; }
.tp-has-spine main section p.text-accent[class*="tracking-"]::before { content:""; position:absolute; left:calc(-1 * var(--tp-gut)); top:50%; width:calc(var(--tp-gut) - 6px); height:1px; background:var(--tp-gold); transform-origin:left center; }
.tp-js.tp-has-spine main section p.text-accent[class*="tracking-"]::before { transform:scaleX(0); transition:transform .7s var(--tp-ease); }
.tp-js.tp-has-spine main section.tp-on p.text-accent[class*="tracking-"]::before { transform:none; }
.tp-js.tp-has-spine .tp-arrive > i { transform:scaleX(0); transition:transform 1.2s var(--tp-ease); }
.tp-js.tp-has-spine #contact.tp-on .tp-arrive > i { transform:none; }
.tp-has-spine #contact { border-top-color:transparent !important; }
/* 着いた先：冒頭の予約ボタンと同じ「下辺の金の線」を、電話番号に */
#contact .ml-ct-num { display:inline-block; padding-bottom:4px; border-bottom:3px solid var(--tp-gold); }

/* ───── 事務所概要：写真を左、紹介文を右（幅640px以上。縦に積むと長くなるため） */
@media (min-width:640px) and (max-width:1023px) {
  #about .flex.flex-col { flex-direction:row !important; align-items:center; gap:32px !important; }
  #about .flex.flex-col > div:first-child { width:40%; flex:none; } #about .flex.flex-col > div:last-child { width:auto; flex:1; min-width:0; }
  #about .flex.flex-col img { height:360px !important; }
  #about .flex.flex-col h2 { font-size:24px !important; margin-bottom:18px !important; }
  #about .flex.flex-col p { line-height:1.9 !important; margin-bottom:14px !important; text-align:left !important; }
}
@media (max-width:639px) { #about .flex.flex-col { gap:24px !important; } #about .flex.flex-col img { height:220px !important; } #about .flex.flex-col h2 { margin-bottom:16px !important; } }
#about .flex.flex-col p:last-child { margin-bottom:0 !important; }

/* ───── 弁護士紹介：経歴・要職は1行ずつ（字の大きさは JS で3人そろえて合わせる）。写真は下から静かに現れる */
.tp-fit { display:block; white-space:nowrap; }
.tp-wrapok .tp-fit { white-space:normal; }
@media (min-width:768px) and (max-width:1100px) {            /* 横並び（3列）のまま、間を詰めて経歴の幅を確保（先生「縦でなく、横で」） */
  #lawyers .grid.gap-10 { gap:18px !important; }
  #lawyers .grid.gap-10 > .group img { height:340px !important; }
}
}
.tp-js #lawyers .tp-ph { clip-path:inset(100% 0 0 0); transition:clip-path 1.25s var(--tp-ease); transition-delay:calc(var(--i,0) * 140ms); }
.tp-js #lawyers.tp-in .tp-ph { clip-path:inset(0 0 0 0); }

/* ───── ご相談の流れ：記号を絵に。人物は一本の線の上に立ち、進んだ所まで線が金になり、番号が濃くなる */
.tp-flow { --g:16px; --pad:24px; --ph:96px; }
.tp-flow > div > .absolute.text-9xl { display:none; }                                         /* 薄い大きな番号は、小さな番号ひとつにまとめる */
.tp-flow-pic { position:relative; height:var(--ph); margin:0 auto 22px; display:flex; align-items:flex-end; justify-content:center; }
.tp-flow-pic img, .tp-flow-pic svg { height:100%; width:100%; object-fit:contain; object-position:50% 100%; transform-origin:50% 100%; transition:transform .6s var(--tp-ease); }
.tp-flow > div:hover .tp-flow-pic img, .tp-flow > div:hover .tp-flow-pic svg { transform:scale(1.05); }
.tp-flow > div p { text-wrap:pretty; word-break:auto-phrase; }
.tp-flow-no { position:absolute; left:-8px; top:-10px; font-size:15px; font-weight:700; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:#94a3b8; transition:color .5s var(--tp-ease); }
.tp-flow-no::after { content:""; display:block; width:100%; height:1px; margin-top:3px; background:var(--tp-gold); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--tp-ease); }
.tp-flow > div.is-on .tp-flow-no { color:var(--tp-navy); } .tp-flow > div.is-on .tp-flow-no::after { transform:none; }
.tp-flow-line { position:absolute; z-index:12; left:0; right:0; top:calc(var(--pad) + var(--ph)); height:1px; background:#d5dae2; pointer-events:none; }
.tp-flow-line > i { position:absolute; top:0; bottom:0; right:0; left:calc(-1 * var(--tp-gut)); background:var(--tp-gold); transform-origin:left center; transform:scaleX(var(--tp-fp,1)); transition:transform .45s linear; }
@media (min-width:1024px) { .tp-flow { --g:24px; } }

/* ───── 解決事例・コラム：見出しの手当て */
/* 3行で切る指定に対して、箱の最低の高さ（5.25rem）のほうが高く、4行目の頭がのぞいていた → 箱の高さを3行ちょうどに */
#cases h3, #column h3 { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; min-height:0 !important; height:calc(1.375em * 3); }
#column h3.tp-col-t { -webkit-line-clamp:2; height:calc(1.375em * 2); margin-bottom:8px !important; text-wrap:balance; word-break:auto-phrase; }
#cases h3 { word-break:auto-phrase; }
.tp-col-sub { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:calc(1.7em * 2); margin:0 0 8px; font-size:14px; line-height:1.7; color:#475569; text-wrap:balance; word-break:auto-phrase; }
.tp-col-sub + :not(a) { display:none; }                      /* 添え書きがあるので、抜粋は出さない */
/* コラムの画像の橙の枠を、紺の細い縁でそろえる（画像は作り直さない・要ご判断） */
#column .tp-thumb { position:relative; display:block; }
#column .tp-thumb::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 4px var(--tp-navy); pointer-events:none; }
/* 横に送る並び（スマホ）の下に、いまの位置を示す細い線 */
.tp-swipe { display:none; }

/* ───── 幅1099px以下：絵が上の札のまま、列の幅に合わせて大きさを調整 */
@media (min-width:768px) and (max-width:1099px) {
  .tp-svc { gap:44px; }
  .tp-entry-row { --ph:132px; } .tp-n5 .tp-entry-row { --ph:112px; } .tp-n6 .tp-entry-row { --ph:116px; }
  .tp-card b { font-size:19px; letter-spacing:.04em; } .tp-card small { font-size:14px; letter-spacing:0; }
  .tp-card-img { padding:0 8px; }
  .tp-hd-pic { width:120px; height:80px; }
}
@media (min-width:768px) and (max-width:959px) { .tp-n6 .tp-entry-row { grid-template-columns:repeat(3,minmax(0,1fr)); --ph:132px; } }      /* 不動産を足して6枚：960px未満は3列2段（6列だと名前が収まらない） */

/* ───── 幅1023px以下：ご相談の流れは、横5列・横送りをやめて縦1列に（狭い列で字が細切れになるため） */
@media (max-width:1023px) {
  body.home #flow .grid.tp-flow { display:grid !important; grid-auto-flow:row !important; grid-auto-columns:auto !important; grid-template-columns:1fr !important; overflow:visible; scroll-snap-type:none; padding:0; margin:0; gap:0 !important; --ph:58px; }
  .tp-flow > div { background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:14px 0 !important; transform:none !important; overflow:visible !important; }
  .tp-flow > div + div { border-top:1px solid var(--tp-line) !important; }
  .tp-flow > div > .relative { display:grid; grid-template-columns:30px 70px minmax(0,1fr); column-gap:12px; align-items:start; text-align:left; }
  .tp-flow-pic { grid-column:2; grid-row:1 / 3; width:70px; height:var(--ph); margin:0; border-bottom:1px solid var(--tp-gold); }
  .tp-flow > div h3 { grid-column:3; margin:2px 0 4px !important; font-size:17px !important; }
  .tp-flow > div p { grid-column:3; font-size:14px !important; line-height:1.7 !important; text-wrap:pretty; word-break:auto-phrase; }
  .tp-flow-no { left:-42px; top:4px; font-size:15px; letter-spacing:.04em; }
  .tp-flow-line { display:none; }
}
@media (min-width:768px) and (max-width:1023px) { .tp-flow { max-width:680px; } .tp-flow > div h3 { font-size:18px !important; } .tp-flow > div p { font-size:15px !important; } body.home #flow .grid.tp-flow { --ph:70px; } .tp-flow > div > .relative { grid-template-columns:34px 84px minmax(0,1fr) !important; column-gap:18px !important; } .tp-flow-pic { width:84px !important; } .tp-flow-no { left:-52px !important; } }

/* ───── スマホ */
@media (max-width:767px) {
  .tp-veil { background:linear-gradient(180deg, rgba(15,23,42,.70) 0%, rgba(15,23,42,.64) 55%, rgba(15,23,42,.76) 100%) !important; }
  main > section:first-of-type > .relative.z-30 { align-items:flex-start; padding-top:64px; }
  main > section:first-of-type .max-w-3xl > p:first-child { letter-spacing:.1em; margin-bottom:22px !important; }
  main > section:first-of-type h1 { margin-bottom:26px !important; }
  main > section:first-of-type .max-w-3xl > p.max-w-xl { margin-bottom:32px !important; }
  .tp-hero-cta { gap:14px; } .tp-btn { width:100%; min-height:58px; }
  .tp-hero-tel b { font-size:24px; }
  .tp-hero-note { font-size:14px; letter-spacing:.06em; margin-top:34px; }
  .tp-svc { gap:36px; }
  .tp-entry-lab { font-size:18px !important; margin-bottom:6px; }
  .tp-entry-row, .tp-n5 .tp-entry-row, .tp-n6 .tp-entry-row { grid-template-columns:repeat(2,minmax(0,1fr)); --ph:124px; }
  .tp-card { padding:14px 0 16px; }
  .tp-card::after { top:calc(14px + var(--ph) - 2px); }
  .tp-card-img { margin-bottom:12px; padding:0 8px; }
  .tp-card b { font-size:19px; letter-spacing:.04em; }
  .tp-card small { font-size:14px; margin-top:4px; letter-spacing:0; }
  .tp-n5 .tp-entry-row .tp-card:nth-of-type(5) { grid-column:1 / -1; }
  .tp-hd-pic { width:96px; height:66px; margin-bottom:4px; }
  .tp-fee { max-width:none; gap:12px; padding:9px 12px 9px 10px; } .tp-fee-img { width:54px; height:48px; } .tp-fee-t small { font-size:17px; letter-spacing:.04em; } .tp-fee > i { width:40px; height:40px; }
  .tp-detail-box { grid-template-columns:1fr; padding:20px 16px 18px; gap:14px; margin-top:10px; }
  .tp-detail-box > .tp-detail-list, .tp-detail-box > .tp-detail-subs { grid-column:1; }
  .tp-detail-left { align-items:stretch; }
  .tp-kid { font-size:14px; min-height:42px; }
  .tp-detail-list { grid-template-columns:1fr; } .tp-detail-list li { font-size:15px; padding:8px 0 8px 18px; }
  .tp-detail-head h4 { font-size:21px; } .tp-detail-head p { font-size:15px; }
  .tp-detail-go { align-self:stretch; margin-top:16px; }
  .tp-card-chev { margin-top:2px; }
  #fees-link { margin-top:30px !important; }
  .tp-svc-note { font-size:14px; margin-top:14px; }
  .tp-hero-after { margin:14px 0 0; font-size:14px; letter-spacing:.02em; }
  .tp-hero-note { gap:0; }
  /* 新着情報：題は2行まで */
  #news .tp-news-t { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  #news a.py-6 { padding-top:14px; padding-bottom:14px; }
  #news a.py-6 > div { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px; }
  #news a.py-6 time { width:auto; }
  #news a.py-6 h3 { flex:0 0 100%; }
  #news a.py-6 > div > span:last-child { display:none; }
  /* 流れ：横送りをやめて縦1列に。左に一本の線 */
  body.home #lawyers .grid.gap-10, body.home #cases .grid.gap-8, body.home #column .grid.gap-8 { padding-left:24px !important; scroll-padding-left:24px !important; }
  /* 横に送る並びの位置 */
  .tp-swipe { display:block; position:relative; height:2px; margin:6px 0 0; background:#e2e8f0; overflow:hidden; }
  .tp-swipe > i { position:absolute; top:0; bottom:0; left:0; width:var(--w,33%); background:var(--tp-gold); transform:translateX(var(--x,0)); transition:transform .15s linear; }
  /* 画面下の固定の帯：紺と金に。字は13px。「無料相談」は条件つきなので「ご相談予約」に（要ご判断） */
  body.home .omoto-spcta { background:var(--tp-navy); border-top:1px solid rgba(255,255,255,.14); }
  body.home .omoto-spcta a { font-size:13px; min-height:58px; background:transparent !important; border-left:1px solid rgba(255,255,255,.14); }
  body.home .omoto-spcta a:first-child { border-left:0; }
  body.home .omoto-spcta a.oc-line svg { color:#4ade80; }
  body.home .omoto-spcta a.oc-cta { background:#d9bd82 !important; color:var(--tp-navy) !important; flex:1.5; border-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  .tp-js .tp-l > span, .tp-js .tp-hero-note, .tp-js .tp-hero-after { animation:none; transform:none; opacity:1; }
  .tp-js .tp-wave { animation:none; clip-path:none; } .tp-js .tp-pic img { opacity:1; }
  .tp-js .tp-wave, .tp-js .tp-ch, .tp-js #lawyers .tp-ph, .tp-js main section p.text-accent::after, .tp-js main section p.text-accent::before, .tp-js .tp-arrive > i, .tp-js #contact .ml-head h2::after { transition:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; }
  .tp-flow-line > i, .tp-spine > i { transition:none; transform:none; }
}

@media (min-width:1024px) { main > section:first-of-type > .relative.z-30 { padding-left:2rem; padding-right:2rem; } }

/* ───── 新着情報の見出し：便りが届く（紙飛行機が飛んできて、封筒が開き、便箋に行が書かれる）。画面に入っているあいだ、ゆっくり繰り返す */
.tp-anim { width:200px; height:100px; border-bottom:1px solid var(--tp-gold); }
.tp-anim svg { display:block; width:100%; height:100%; overflow:visible; }
.tp-anim path, .tp-anim rect, .tp-anim circle, .tp-anim ellipse { fill:#fff; stroke:var(--tp-navy); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.tp-news-anim .na-trail { fill:none; stroke:var(--tp-gold); stroke-width:1.6; stroke-dasharray:3 6; opacity:0; }
.tp-news-anim .na-plane { offset-path:path("M214 20 C182 2 150 62 124 60"); offset-rotate:auto 180deg; offset-distance:100%; opacity:0; }
.tp-news-anim .na-plane path { fill:#e9dfc8; }
.tp-news-anim .na-flap { transform-box:fill-box; transform-origin:50% 0; transform:scaleY(-1); fill:#f1f5f9; }
.tp-news-anim .na-l { fill:none; stroke-width:2; stroke-dasharray:32; stroke-dashoffset:0; }
.tp-news-anim .na-l1 { stroke:var(--tp-gold); }
.tp-news-anim .na-spark path { fill:none; stroke:var(--tp-gold); stroke-width:2; opacity:0; }
.tp-js .tp-in .tp-news-anim .na-trail { animation:na-trail 9s linear infinite; }
.tp-js .tp-in .tp-news-anim .na-plane { animation:na-plane 9s cubic-bezier(.45,.05,.3,1) infinite; }
.tp-js .tp-in .tp-news-anim .na-flap { animation:na-flap 9s var(--tp-ease) infinite; }
.tp-js .tp-in .tp-news-anim .na-letter { animation:na-letter 9s var(--tp-ease) infinite; }
.tp-js .tp-in .tp-news-anim .na-l1 { animation:na-line 9s linear infinite; }
.tp-js .tp-in .tp-news-anim .na-l2 { animation:na-line 9s linear infinite .28s; }
.tp-js .tp-in .tp-news-anim .na-l3 { animation:na-line 9s linear infinite .56s; }
.tp-js .tp-in .tp-news-anim .na-spark path { animation:na-spark 9s ease-out infinite; }
@keyframes na-trail { 0% { opacity:0; clip-path:inset(0 0 0 100%); } 3% { opacity:1; } 19% { opacity:1; clip-path:inset(0 0 0 0); } 27%, 100% { opacity:0; clip-path:inset(0 0 0 0); } }
@keyframes na-plane { 0% { offset-distance:0%; opacity:0; transform:scale(1); } 3% { opacity:1; } 17% { opacity:1; transform:scale(1); } 20%, 100% { offset-distance:100%; opacity:0; transform:scale(.4); } }
@keyframes na-flap { 0%, 21% { transform:scaleY(1); } 29%, 88% { transform:scaleY(-1); } 96%, 100% { transform:scaleY(1); } }
@keyframes na-letter { 0%, 28% { transform:translateY(30px); opacity:0; } 29% { opacity:1; } 39%, 86% { transform:none; opacity:1; } 93% { transform:translateY(30px); opacity:1; } 94%, 100% { transform:translateY(30px); opacity:0; } }
@keyframes na-line { 0%, 39% { stroke-dashoffset:32; } 46%, 86% { stroke-dashoffset:0; } 87%, 100% { stroke-dashoffset:32; } }
@keyframes na-spark { 0%, 50% { opacity:0; transform:translate(-4px,4px); } 54% { opacity:1; transform:none; } 62%, 100% { opacity:0; transform:translate(3px,-3px); } }
@media (max-width:767px) { .tp-anim { width:132px; height:70px; } }
@media (prefers-reduced-motion:reduce) { .tp-anim * { animation:none !important; } .tp-js .tp-detail, .tp-js .tp-detail-box { transition:none !important; } }

/* ───── 見出しの右の動く絵（自作の線画・紺と金）。画面に入っているあいだ、約9秒でゆっくり繰り返す */
/* 取扱業務：天秤。傾いていた棹が、揺れながら水平（まっすぐ）に落ち着く */
.tp-anim-sc .sc-beam { transform-origin:110px 30px; }
.tp-anim-sc .sc-pan-l { transform-origin:58px 30px; } .tp-anim-sc .sc-pan-r { transform-origin:162px 30px; }
.tp-anim-sc .sc-str { fill:none; stroke-width:1.8; }
.tp-anim-sc .sc-knob, .tp-anim-sc .sc-wg { fill:var(--tp-gold); stroke:var(--tp-navy); }
.tp-js .tp-in .tp-anim-sc .sc-beam { animation:sc-tilt 9s ease-in-out infinite; }
.tp-js .tp-in .tp-anim-sc .sc-pan { animation:sc-rev 9s ease-in-out infinite; }
@keyframes sc-tilt { 0% { transform:rotate(-9deg); } 14% { transform:rotate(7deg); } 27% { transform:rotate(-5deg); } 39% { transform:rotate(3deg); } 50% { transform:rotate(-1.4deg); } 60%, 90% { transform:rotate(0deg); } 100% { transform:rotate(-9deg); } }
@keyframes sc-rev { 0% { transform:rotate(9deg); } 14% { transform:rotate(-7deg); } 27% { transform:rotate(5deg); } 39% { transform:rotate(-3deg); } 50% { transform:rotate(1.4deg); } 60%, 90% { transform:rotate(0deg); } 100% { transform:rotate(9deg); } }
/* 事務所概要：建物。窓に、ひとつずつ明かりが灯る */
.tp-anim-bl .bl-w { stroke-width:1.8; }
.tp-anim-bl .bl-door { fill:#e9dfc8; }
.tp-anim-bl .bl-tree { fill:#f1f5f9; stroke-width:2; }
.tp-js .tp-in .tp-anim-bl .bl-w { animation:bl-on 9s ease-in-out infinite; animation-delay:calc(var(--i) * .32s); }
@keyframes bl-on { 0%, 4% { fill:#fff; } 9%, 62% { fill:#e3c98a; } 70%, 100% { fill:#fff; } }
/* 弁護士紹介：ひまわりの記章。花びらが一枚ずつ開き、中心に天秤 */
.tp-anim-bd .bd-p { fill:#ecdcae; stroke-width:1.8; transform-box:fill-box; transform-origin:50% 100%; }
.tp-anim-bd .bd-c { fill:#fff; }
.tp-anim-bd .bd-s path { fill:none; stroke-width:1.8; }
.tp-js .tp-in .tp-anim-bd .bd-p { animation:bd-open 9s var(--tp-ease) infinite; animation-delay:calc(var(--i) * .11s); }
.tp-js .tp-in .tp-anim-bd .bd-s { animation:bd-s 9s ease-out infinite; }
@keyframes bd-open { 0%, 3% { opacity:0; transform:scale(.2); } 10%, 80% { opacity:1; transform:none; } 88%, 100% { opacity:0; transform:scale(.2); } }
@keyframes bd-s { 0%, 22% { opacity:0; } 30%, 82% { opacity:1; } 90%, 100% { opacity:0; } }
/* ご相談の流れ：道のり。印が一つずつ進み、最後に旗が立つ */
.tp-anim-fl .fl-base { fill:none; stroke:#cbd5e1; stroke-width:2; stroke-dasharray:2 6; }
.tp-anim-fl .fl-trail { fill:none; stroke:var(--tp-gold); stroke-width:2.6; stroke-dasharray:180; stroke-dashoffset:0; }
.tp-anim-fl .fl-n { transform-box:fill-box; transform-origin:50% 50%; }
.tp-anim-fl .fl-pole { fill:none; }
.tp-anim-fl .fl-flag { fill:var(--tp-gold); transform-box:fill-box; transform-origin:0 50%; }
.tp-anim-fl .fl-m { fill:var(--tp-navy); stroke:none; offset-path:path("M28 86 L68 72 L108 58 L148 44 L188 30"); offset-distance:100%; opacity:0; }
.tp-js .tp-in .tp-anim-fl .fl-trail { animation:fl-trail 9s linear infinite; }
.tp-js .tp-in .tp-anim-fl .fl-m { animation:fl-m 9s linear infinite; }
.tp-js .tp-in .tp-anim-fl .fl-n { animation:fl-n 9s var(--tp-ease) infinite; animation-delay:calc(var(--i) * .78s); }
.tp-js .tp-in .tp-anim-fl .fl-flag { animation:fl-flag 9s var(--tp-ease) infinite; }
.tp-js .tp-in .tp-anim-fl .fl-pole { animation:fl-pole 9s var(--tp-ease) infinite; }
@keyframes fl-trail { 0%, 4% { stroke-dashoffset:180; } 40%, 88% { stroke-dashoffset:0; } 96%, 100% { stroke-dashoffset:180; opacity:0; } }
@keyframes fl-m { 0%, 4% { offset-distance:0%; opacity:1; } 40% { offset-distance:100%; opacity:1; } 44%, 100% { offset-distance:100%; opacity:0; } }
@keyframes fl-n { 0%, 4% { fill:#fff; transform:scale(1); } 7% { fill:#e3c98a; transform:scale(1.35); } 12%, 60% { fill:#e3c98a; transform:scale(1); } 70%, 100% { fill:#fff; transform:scale(1); } }
@keyframes fl-pole { 0%, 40% { opacity:0; } 44%, 88% { opacity:1; } 96%, 100% { opacity:0; } }
@keyframes fl-flag { 0%, 43% { opacity:0; transform:scaleX(0); } 50%, 88% { opacity:1; transform:scaleX(1); } 96%, 100% { opacity:0; transform:scaleX(0); } }
/* 幅の狭い画面：見出しの英字が長い節（PROFESSIONALS など）でも、動く絵が画面の右へ出ないように */
@media (max-width:420px) {
  .tp-hd { position:relative; }
  .tp-hd > div:first-child { min-width:0; }
  .tp-hd-pic, .tp-anim { position:absolute; right:0; bottom:0; width:104px; height:54px; margin:0; }
}
/* ご相談の流れ：5番目の札だけ、マウスを置くと紺色に反転する元の指定がある（絵が見えなくなる）→ 他の札と同じ白のままに（先生の指示 2026-10-07） */
.tp-flow > div, .tp-flow > div:hover { background-color:#fff !important; }
.tp-flow > div h3, .tp-flow > div:hover h3 { color:var(--tp-navy) !important; }
.tp-flow > div p, .tp-flow > div:hover p { color:#4b5563 !important; }
.tp-flow > div:hover .tp-flow-no { opacity:1; }
@media (max-width:1023px) { .tp-flow > div, .tp-flow > div:hover { background-color:transparent !important; } }
.tp-flow > div:hover { border-top-color:var(--tp-gold) !important; }

/* アクセス：事務所の外観写真と Google マップを並べる（先生の指示 2026-10-07 夕「写真が大きすぎる。写真と地図をバランスよく」）。見出しの右は、地図を意識した動く絵（道順が引かれ、目印が立つ） */
.tp-access-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.tp-anim-mp .mp-road { fill:none; stroke:#cbd5e1; stroke-width:5; }
.tp-anim-mp .mp-b { fill:#f1f5f9; stroke-width:1.6; }
.tp-anim-mp .mp-route { fill:none; stroke:var(--tp-gold); stroke-width:3; stroke-dasharray:190; stroke-dashoffset:0; }
.tp-anim-mp .mp-rip { fill:none; stroke:var(--tp-gold); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.tp-anim-mp .mp-pin path { fill:var(--tp-gold); }
.tp-anim-mp .mp-pin circle { fill:#fff; stroke-width:1.8; }
.tp-js .tp-in .tp-anim-mp .mp-route { animation:mp-route 9s linear infinite; }
.tp-js .tp-in .tp-anim-mp .mp-pin { animation:mp-pin 9s var(--tp-ease) infinite; }
.tp-js .tp-in .tp-anim-mp .mp-rip { animation:mp-rip 9s ease-out infinite; }
@keyframes mp-route { 0%, 4% { stroke-dashoffset:190; opacity:1; } 36%, 88% { stroke-dashoffset:0; opacity:1; } 96%, 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes mp-pin { 0%, 34% { opacity:0; transform:translateY(-30px); } 40% { opacity:1; transform:translateY(2px); } 43% { transform:translateY(-5px); } 46%, 88% { opacity:1; transform:none; } 96%, 100% { opacity:0; transform:none; } }
@keyframes mp-rip { 0%, 42% { opacity:0; transform:scale(.3); } 46% { opacity:.9; transform:scale(.6); } 60% { opacity:0; transform:scale(1.9); } 61%, 100% { opacity:0; transform:scale(.3); } }

/* アクセス：字を大きく・濃く（先生「年寄りは見えにくい。薄いし」）。写真の左に「KSビル8F」の注意書き */
#access h3 { font-size:24px !important; margin-bottom:18px !important; }
#access .md\:w-1\/3 p.text-sm { font-size:18px !important; line-height:2 !important; color:#1e293b !important; margin-bottom:18px !important; }
#access .md\:w-1\/3 a.text-xs { font-size:16px !important; color:var(--tp-gold-d) !important; border-bottom-width:2px; padding-bottom:3px; font-weight:700; }
#access .md\:w-1\/3 p.text-xs { font-size:16px !important; line-height:1.9 !important; color:#1e293b !important; }
#access .md\:w-1\/3 p.text-3xl { font-size:38px !important; margin:2px 0 6px; }
#access .md\:w-1\/3 { width:32%; }
#access .max-w-7xl > .flex { gap:clamp(28px,3.4vw,56px); }
/* 右の枠：左に写真（小さめ）、右に地図（少し広め）。同じ高さにそろえる */
#access .tp-access-fig { position:relative; width:auto; flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:16px; height:340px !important; background:none !important; }
.tp-access-ph { position:relative; min-width:0; overflow:hidden; background:#e5e7eb; }
.tp-access-map { min-width:0; background:#eef2f6; border:1px solid var(--tp-line); }
.tp-access-map iframe { display:block; width:100%; height:100%; border:0; }
.tp-access-note { position:absolute; left:0; bottom:16px; max-width:calc(100% - 12px); margin:0; padding:9px 14px 9px 12px; background:#fff; color:var(--tp-navy); font-size:15px; font-weight:700; letter-spacing:.04em; line-height:1.6; border-left:4px solid var(--tp-gold); box-shadow:0 10px 26px -12px rgba(15,23,42,.5); }
@media (max-width:767px) {
  #access .md\:w-1\/3 { width:auto; }
  #access .md\:w-1\/3 p.text-sm { font-size:17px !important; } #access .md\:w-1\/3 p.text-3xl { font-size:34px !important; }
  #access .tp-access-fig { grid-template-columns:1fr; height:auto !important; flex:none; gap:12px; }
  .tp-access-ph { height:200px; } .tp-access-map { height:280px; }
  .tp-access-note { font-size:15px; padding:8px 12px; bottom:12px; }
}
/* 中くらいの幅（768〜1099px）：左の事務所情報を上に（住所と電話を横に並べる）、その下に写真と地図 */
@media (min-width:768px) and (max-width:1099px) {
  #access .max-w-7xl > .flex { flex-direction:column; gap:28px; }
  #access .md\:w-1\/3 { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  #access .md\:w-1\/3 > * { margin-top:0 !important; }
  #access .tp-access-fig { width:100%; flex:none; height:320px !important; }
}
footer .tp-foot-pp { grid-column:1 / -1; }

/* ───── 解決事例の見出し：書類に行が書かれ、判が下りて、金の丸と印が残る */
.tp-anim-cs .cs-back { fill:#f1f5f9; }
.tp-anim-cs .cs-l { fill:none; stroke-width:2; stroke-dasharray:46; stroke-dashoffset:0; } .tp-anim-cs .cs-l1 { stroke:var(--tp-gold); }
.tp-anim-cs .cs-ring { fill:#fbf6e9; stroke:var(--tp-gold); stroke-width:3; transform-box:fill-box; transform-origin:50% 50%; }
.tp-anim-cs .cs-chk { fill:none; stroke:var(--tp-gold-d); stroke-width:3.2; stroke-dasharray:24; stroke-dashoffset:0; }
.tp-anim-cs .cs-spark path { fill:none; stroke:var(--tp-gold); stroke-width:2; opacity:0; }
.tp-anim-cs .cs-st { opacity:0; } .tp-anim-cs .cs-st rect { fill:var(--tp-navy); } .tp-anim-cs .cs-st .cs-st-b { fill:var(--tp-gold); }
.tp-js .tp-in .tp-anim-cs .cs-l1 { animation:cs-line 9s linear infinite; } .tp-js .tp-in .tp-anim-cs .cs-l2 { animation:cs-line 9s linear infinite .3s; } .tp-js .tp-in .tp-anim-cs .cs-l3 { animation:cs-line 9s linear infinite .6s; }
.tp-js .tp-in .tp-anim-cs .cs-st { animation:cs-stamp 9s cubic-bezier(.5,0,.3,1) infinite; }
.tp-js .tp-in .tp-anim-cs .cs-ring { animation:cs-ring 9s var(--tp-ease) infinite; }
.tp-js .tp-in .tp-anim-cs .cs-chk { animation:cs-chk 9s linear infinite; }
.tp-js .tp-in .tp-anim-cs .cs-spark path { animation:cs-spark 9s ease-out infinite; }
@keyframes cs-line { 0%, 5% { stroke-dashoffset:46; opacity:1; } 14%, 88% { stroke-dashoffset:0; opacity:1; } 94% { stroke-dashoffset:0; opacity:0; } 100% { stroke-dashoffset:46; opacity:0; } }
@keyframes cs-stamp { 0%, 24% { opacity:0; transform:translate(0,-34px) rotate(-10deg); } 28% { opacity:1; transform:translate(0,-30px) rotate(-10deg); } 36% { opacity:1; transform:translate(0,22px) rotate(0deg); } 40% { opacity:1; transform:translate(0,22px) rotate(0deg); } 50% { opacity:1; transform:translate(22px,-26px) rotate(12deg); } 55%, 100% { opacity:0; transform:translate(26px,-34px) rotate(12deg); } }
@keyframes cs-ring { 0%, 37% { opacity:0; transform:scale(1.5); } 40% { opacity:1; transform:scale(1); } 88% { opacity:1; transform:scale(1); } 94%, 100% { opacity:0; transform:scale(1); } }
@keyframes cs-chk { 0%, 44% { stroke-dashoffset:24; opacity:1; } 52%, 88% { stroke-dashoffset:0; opacity:1; } 94%, 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes cs-spark { 0%, 38% { opacity:0; transform:translate(-5px,0); } 42% { opacity:1; transform:none; } 52%, 100% { opacity:0; transform:translate(5px,0); } }
/* ───── コラムの見出し：開いた本の右の頁に、ペンが3行を書いていく */
.tp-anim-cl .cl-g { fill:none; stroke:#cbd5e1; stroke-width:2; }
.tp-anim-cl .cl-l { fill:none; stroke-width:2.2; stroke-dasharray:40; stroke-dashoffset:0; } .tp-anim-cl .cl-l1 { stroke:var(--tp-gold); }
.tp-anim-cl .cl-pen { opacity:0; transform:translate(156px,42px); } .tp-anim-cl .cl-pen path { fill:#e9dfc8; stroke-width:2; } .tp-anim-cl .cl-pen .cl-nib { fill:var(--tp-navy); }
.tp-anim-cl .cl-spark path { fill:none; stroke:var(--tp-gold); stroke-width:2; opacity:0; }
.tp-js .tp-in .tp-anim-cl .cl-l1 { animation:cl-l1 9s linear infinite; } .tp-js .tp-in .tp-anim-cl .cl-l2 { animation:cl-l2 9s linear infinite; } .tp-js .tp-in .tp-anim-cl .cl-l3 { animation:cl-l3 9s linear infinite; }
.tp-js .tp-in .tp-anim-cl .cl-pen { animation:cl-pen 9s linear infinite; }
.tp-js .tp-in .tp-anim-cl .cl-spark path { animation:cl-spark 9s ease-out infinite; }
@keyframes cl-l1 { 0%, 6% { stroke-dashoffset:40; opacity:1; } 18%, 88% { stroke-dashoffset:0; opacity:1; } 94%, 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes cl-l2 { 0%, 22% { stroke-dashoffset:40; opacity:1; } 34%, 88% { stroke-dashoffset:0; opacity:1; } 94%, 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes cl-l3 { 0%, 38% { stroke-dashoffset:40; opacity:1; } 47%, 88% { stroke-dashoffset:0; opacity:1; } 94%, 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes cl-pen { 0% { opacity:0; transform:translate(112px,34px); } 4% { opacity:1; transform:translate(119px,42px); } 6% { opacity:1; transform:translate(119px,42px); } 12% { transform:translate(137px,39px); } 18% { opacity:1; transform:translate(156px,42px); } 22% { transform:translate(119px,54px); } 28% { transform:translate(137px,51px); } 34% { transform:translate(156px,54px); } 38% { transform:translate(119px,66px); } 47% { opacity:1; transform:translate(144px,64px); } 54%, 100% { opacity:0; transform:translate(160px,44px); } }
@keyframes cl-spark { 0%, 48% { opacity:0; transform:translateY(5px); } 53% { opacity:1; transform:none; } 64%, 100% { opacity:0; transform:translateY(-5px); } }
/* ───── フッター：関連リンク（控えめな枠つきの文字リンク）。PC は事務所情報とリンク一覧の間の空きに縦に、スマホはリンク一覧の下に横に */
.tp-foot-links { order:3; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; }
.tp-foot-links a { display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; padding:0 14px 0 16px; border:1px solid rgba(255,255,255,.32); border-radius:2px; background:rgba(255,255,255,.05); color:#fff; font-size:14px; letter-spacing:.08em; line-height:1.4; text-decoration:none; transition:background .3s, border-color .3s; }
.tp-foot-links a i { font-size:15px; opacity:.75; } .tp-foot-links a:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); }
.tp-foot-links a:focus-visible { outline:3px solid var(--tp-gold); outline-offset:3px; }
@media (min-width:768px) {
  .tp-foot-row > div { width:auto !important; flex:0 1 auto; }
  .tp-foot-links { order:0; flex:0 0 auto; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; gap:8px; width:214px; margin:2px auto 0; }
}
@media (min-width:768px) and (max-width:1023px) { .tp-foot-row { gap:18px !important; } .tp-foot-links { width:172px; } .tp-foot-links a { padding:0 10px 0 12px; font-size:13px; letter-spacing:.04em; } .tp-foot-row .gap-x-10 { column-gap:1.25rem; } }

/* ───── 取扱業務の詳細：専用の子ページがある項目だけ、右側にバナーで置く（先生の指示 2026-10-07） */
.tp-detail-box > .tp-detail-right { grid-column:2; min-width:0; }
.tp-pagebns { margin:0 0 14px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
.tp-pagebns li { margin:0; padding:0; }
.tp-pagebn { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; height:100%; padding:6px 12px 6px 16px; background:#fbf6e9; border:1px solid var(--tp-gold); border-left-width:4px; border-radius:2px; color:var(--tp-navy) !important; font-size:16px; font-weight:700; line-height:1.5; letter-spacing:.03em; text-decoration:none !important; transition:background .3s var(--tp-ease), color .3s var(--tp-ease), transform .3s var(--tp-ease); }
.tp-pagebn span { min-width:0; word-break:keep-all; overflow-wrap:anywhere; } .tp-pagebn em { flex:none; margin-left:auto; padding:2px 9px 3px; background:#fff; border:1px solid var(--tp-gold); border-radius:2px; font-style:normal; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--tp-gold-d); transition:background .3s, color .3s, border-color .3s; }
.tp-pagebn i { flex:none; font-size:20px; color:var(--tp-gold-d); transition:transform .35s var(--tp-ease), color .3s; }
.tp-pagebn:hover { background:var(--tp-navy); color:#fff !important; transform:translateY(-1px); } .tp-pagebn:hover em { background:transparent; border-color:#e6d1a3; color:#e6d1a3; } .tp-pagebn:hover i { color:#fff; transform:translateX(3px); }
.tp-pagebn:focus-visible { outline:3px solid var(--tp-gold); outline-offset:2px; }
@media (max-width:1099px) { .tp-pagebns { grid-template-columns:minmax(0,1fr); } }
@media (max-width:767px) { .tp-detail-box > .tp-detail-right { grid-column:1; } .tp-pagebn { min-height:52px; font-size:15.5px; padding:6px 10px 6px 14px; gap:8px; } .tp-pagebn em { padding:2px 7px 3px; font-size:13px; letter-spacing:.02em; } }
@media (max-width:359px) { .tp-pagebn em { display:none; } }

/* news-list:start（ここから news-list:end までは、お知らせの一覧ページでも使う。build_news.py が news.css に切り出す） */
/* ───── お知らせの一覧（先生の指示 2026-10-07「無味乾燥なので、少しでいいからイラストやアニメーションを」）
   日付は日めくりの札（画面に入ると、白紙が1枚めくれて日付が出る）。右に、内容に合った絵。札は白い紙。動きは控えめに。 */
.tp-sr { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tp-news .tp-news-row { position:relative; display:block; margin:0 0 12px !important; padding:14px 20px !important; background:#fff !important; border:1px solid var(--tp-line) !important; border-radius:2px; box-shadow:0 12px 26px -22px rgba(15,23,42,.55); transition:translate .35s var(--tp-ease), box-shadow .35s, border-color .35s, opacity .7s, transform .7s; }
.tp-news .tp-news-row::before { content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--tp-gold); transform:scaleY(0); transform-origin:50% 0; transition:transform .45s var(--tp-ease); }
.tp-news .tp-news-row:hover, .tp-news .tp-news-row:focus-visible { translate:0 -2px; border-color:#d9dee6 !important; box-shadow:0 18px 30px -22px rgba(15,23,42,.6); }
.tp-news .tp-news-row:hover::before, .tp-news .tp-news-row:focus-visible::before { transform:none; }
.tp-news .tp-news-row > div { display:grid !important; grid-template-columns:76px auto minmax(0,1fr) 96px 20px; align-items:center; gap:6px 20px; }
.tp-news .tp-news-row > div > span.border { align-self:center; white-space:nowrap; }
.tp-news .tp-news-row h3 { min-width:0; }
/* 日めくりの札 */
.tp-leaf { position:relative; display:block; width:76px; perspective:320px; text-align:center; filter:drop-shadow(0 6px 7px rgba(15,23,42,.13)); }
.tp-leaf-top { display:block; padding:3px 0 4px; background:var(--tp-navy); color:#fff; font-size:12px; line-height:1.3; letter-spacing:.04em; border-radius:3px 3px 0 0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tp-leaf-day { display:flex; align-items:baseline; justify-content:center; gap:4px; padding:5px 0 7px; background:#fff; border:1px solid var(--tp-line); border-top:0; border-radius:0 0 3px 3px; }
.tp-leaf-day b { font-size:30px; line-height:1; font-weight:700; color:var(--tp-navy); font-variant-numeric:tabular-nums; }
.tp-leaf-day small { font-size:13px; line-height:1; color:var(--tp-gold-d); }
.tp-leaf-flip { position:absolute; left:0; right:0; top:24px; bottom:0; background:linear-gradient(#fbfcfd, #eef1f5); border:1px solid var(--tp-line); border-top:0; border-radius:0 0 3px 3px; transform-origin:50% 0; opacity:0; pointer-events:none; }
/* 右の絵 */
.tp-news-pic { position:relative; display:block; width:96px; height:72px; padding:5px 6px 0; background:#f6f0e3; border-radius:3px; }
.tp-news .tp-news-row:nth-child(2n) .tp-news-pic { background:#eaf0f8; }
.tp-news-pic img { display:block; width:100%; height:100%; object-fit:contain; object-position:50% 100%; transition:translate .45s var(--tp-ease), opacity .6s; }
.tp-news .tp-news-row:hover .tp-news-pic img { translate:0 -3px; }
.tp-news-sp { position:absolute; left:50%; top:-13px; width:26px; height:26px; margin-left:-13px; fill:none; stroke:var(--tp-gold); stroke-width:2; stroke-linecap:round; overflow:visible; }
.tp-news-sp path { opacity:0; }
@media (prefers-reduced-motion:no-preference) {
  .tp-js .tp-news:not(.tp-in) .tp-leaf-flip { opacity:1; }
  .tp-js .tp-news.tp-in .tp-leaf-flip { animation:tp-leaf .95s var(--tp-ease) both; animation-delay:calc(.35s + var(--k,0) * .28s); }
  .tp-js .tp-news:not(.tp-in) .tp-news-pic img { opacity:0; translate:0 10px; }
  .tp-js .tp-news.tp-in .tp-news-pic img { transition-delay:calc(.7s + var(--k,0) * .28s); }
  .tp-js .tp-news.tp-in .tp-news-row:hover .tp-news-pic img { transition-delay:0s; }
  .tp-js .tp-news.tp-in .tp-news-sp path { animation:tp-news-sp 7s ease-out infinite; animation-delay:calc(1.5s + var(--k,0) * .9s); }
  .tp-js .tp-news.tp-in .tp-news-sp path:nth-child(2) { animation-delay:calc(1.6s + var(--k,0) * .9s); }
  .tp-js .tp-news.tp-in .tp-news-sp path:nth-child(3) { animation-delay:calc(1.7s + var(--k,0) * .9s); }
}
@keyframes tp-leaf { 0% { opacity:1; transform:rotateX(0); } 65% { opacity:1; } 100% { opacity:0; transform:rotateX(-118deg); } }
@keyframes tp-news-sp { 0% { opacity:0; transform:translateY(4px); } 5% { opacity:1; transform:none; } 13% { opacity:1; } 20%, 100% { opacity:0; } }
@media (max-width:767px) {
  .tp-news .tp-news-row { padding:12px 14px 14px !important; margin-bottom:10px !important; }
  .tp-news .tp-news-row > div { grid-template-columns:72px minmax(0,1fr) 72px; gap:10px 12px; }
  .tp-news .tp-news-row > div > .tp-leaf { grid-column:1; grid-row:1; }
  .tp-news .tp-news-row > div > span.border { grid-column:2; grid-row:1; justify-self:start; }
  .tp-news .tp-news-row > div > .tp-news-pic { grid-column:3; grid-row:1; }
  .tp-news .tp-news-row h3 { grid-column:1 / -1; grid-row:2; }
  .tp-news .tp-news-row > div > span:last-child { display:none; }   /* 矢印は、スマホでは出さない（空の段ができるため） */
  .tp-leaf { width:72px; } .tp-leaf-top { letter-spacing:0; } .tp-leaf-day b { font-size:26px; } .tp-leaf-flip { top:23px; }   /* 月が2桁（2025年12月）でも帯に収まる幅 */
  .tp-news-pic { width:72px; height:56px; }
}
.tp-news { border-top:0 !important; }
/* news-list:end */

/* 債務整理の専用ページ（/saimu/）へのバナー：「その他一般民事事件」の詳細の先頭に1本だけ。他の専用ページのバナー（金の左線・「専用ページ」の札・矢印）と同じ部品を、右の列いっぱいに広げ、左に小さな絵を添える（2026-10-17・先生の指示） */
.tp-pagebns--solo { grid-template-columns:minmax(0,1fr); margin-bottom:18px; }
.tp-pagebn--solo { min-height:68px; padding:8px 14px 8px 14px; gap:14px; font-size:17px; border-left-width:5px; }
.tp-pagebn--solo .tp-pagebn-pic { flex:none; display:block; width:54px; height:54px; } .tp-pagebn--solo .tp-pagebn-pic img { display:block; width:100%; height:100%; object-fit:contain; }
.tp-pagebn--solo span { flex:1 1 auto; }
@media (max-width:767px) { .tp-pagebn--solo { min-height:64px; font-size:15.5px; padding:6px 10px 6px 10px; gap:10px; } .tp-pagebn--solo .tp-pagebn-pic { width:44px; height:44px; } }
.tp-pagebn--solo span b { display:block; font-size:18px; line-height:1.35; letter-spacing:.06em; } .tp-pagebn--solo span small { display:block; margin-top:2px; font-size:13.5px; font-weight:500; line-height:1.5; letter-spacing:.04em; opacity:.85; word-break:normal; overflow-wrap:anywhere; }
@media (max-width:767px) { .tp-pagebn--solo .tp-pagebn-pic { display:none; } .tp-pagebn--solo span b { font-size:17px; } }
.tp-pagebn--solo span small { word-break:keep-all; overflow-wrap:normal; }

/* ───── 冒頭の高さ対応（1.0.16・2026-10-23）
   原因：テーマの冒頭が「height:100vh かつ min-height:700px、中身は縦中央・overflow:hidden」で、固定ヘッダー（81px）の分を数えていなかった。
        ウィンドウが約800pxより低いと、中身（約600px）の上端がヘッダーの下に潜り、はみ出した分は overflow:hidden で切れていた。
   直し：冒頭の高さは中身に合わせて伸びる（最低でも画面1枚分）／上の余白は「ヘッダーの高さ＋α」／字の大きさと間隔は、幅だけでなく高さも見て決める。
        高さが約810px以上なら従来どおりの大きさ。足りないときは小さくなるが、字は読める下限で止め、それでも収まらなければ下へ伸びる（切れない）。 */
:root { --tp-hh:81px; --tp-vh:1vh; }
@supports (height:1svh) { :root { --tp-vh:1svh; } }
main > section:first-of-type { height:auto !important; min-height:100vh !important; min-height:100svh !important; align-items:stretch !important; }
main > section:first-of-type > .relative.z-30 { height:auto !important; box-sizing:border-box; padding-top:calc(var(--tp-hh) + clamp(12px, calc(var(--tp-vh) * 3), 28px)) !important; padding-bottom:110px !important; }
@media (min-width:768px) {
  main > section:first-of-type .max-w-3xl > p:first-child { font-size:clamp(15px, calc(var(--tp-vh) * 2.2), 18px); line-height:1.55; margin-bottom:clamp(14px, calc(var(--tp-vh) * 4.4), 36px) !important; }
  main > section:first-of-type h1 { font-size:clamp(34px, calc(var(--tp-vh) * 8.9), 72px); margin-bottom:clamp(16px, calc(var(--tp-vh) * 5.4), 44px) !important; }
  main > section:first-of-type .max-w-3xl > p.max-w-xl { font-size:clamp(14px, calc(var(--tp-vh) * 2), 16px); margin-bottom:clamp(18px, calc(var(--tp-vh) * 6.9), 56px) !important; }
  .tp-hero-note { margin-top:clamp(18px, calc(var(--tp-vh) * 6.2), 50px); }
  .tp-hero-after { margin-top:clamp(8px, calc(var(--tp-vh) * 2.2), 18px); }
  .tp-hero-cta .tp-btn { min-height:clamp(50px, calc(var(--tp-vh) * 7.4), 60px); }
  .tp-hero-tel b { font-size:clamp(22px, calc(var(--tp-vh) * 3.2), 26px); }
}
@media (min-width:768px) and (max-width:1023px) {
  main > section:first-of-type h1 { font-size:clamp(34px, calc(var(--tp-vh) * 8.9), 60px); }
}
@media (max-width:767px) {
  main > section:first-of-type > .relative.z-30 { padding-top:calc(var(--tp-hh) + clamp(8px, calc(var(--tp-vh) * 2), 20px)) !important; padding-bottom:110px !important; }
  main > section:first-of-type .max-w-3xl > p:first-child { font-size:clamp(14px, calc(var(--tp-vh) * 1.9), 16px); margin-bottom:clamp(10px, calc(var(--tp-vh) * 2.6), 22px) !important; }
  main > section:first-of-type h1 { font-size:clamp(26px, calc(var(--tp-vh) * 3.55), 30px); margin-bottom:clamp(12px, calc(var(--tp-vh) * 3.1), 26px) !important; }
  main > section:first-of-type .max-w-3xl > p.max-w-xl { margin-bottom:clamp(14px, calc(var(--tp-vh) * 3.8), 32px) !important; }
  .tp-hero-note { margin-top:clamp(12px, calc(var(--tp-vh) * 4), 34px); }
  .tp-hero-after { margin-top:clamp(8px, calc(var(--tp-vh) * 1.7), 14px); }
  .tp-hero-cta .tp-btn { min-height:clamp(48px, calc(var(--tp-vh) * 6.9), 58px); }
  .tp-hero-cta { gap:clamp(8px, calc(var(--tp-vh) * 1.7), 14px); }
}