/* ソラナ法律事務所 — 案2「光の帯」 */
:root{
  --acc:#e0761a; --acc2:#f5a623; --acc-dk:#b85d10;
  --ink:#2a2622; --mute:#6f675c; --line:#eadfcc;
  --ground:#fffdf9; --alt:#fff3e0; --dark:#2a2622;
  /* Adobe Fonts（キット jbe3cgv）を第一候補に、Google Fonts と OS 標準を予備に */
  --fh:"source-han-serif-jp-subset","Zen Old Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --fb:"noto-sans-cjk-jp","Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --fd:"ten-mincho-text","source-han-serif-jp-subset","Zen Old Mincho","Noto Serif JP",serif;
  --w:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:15.5px;line-height:1.8;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--acc-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--fh);font-weight:600;letter-spacing:.04em;line-height:1.4;margin:0}
p{margin:0}
.in{max-width:var(--w);margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;padding:12px 24px;border-radius:999px;font-weight:700;font-size:14.5px;white-space:nowrap;border:1.5px solid var(--acc);transition:background .2s}
.btn:hover{background:var(--acc-dk);border-color:var(--acc-dk);text-decoration:none}
.btn.ghost{background:transparent;color:var(--acc)}
.btn.ghost:hover{background:var(--acc);color:#fff}
.btn.white{background:#fff;color:var(--acc);border-color:#fff}
.btn.white:hover{background:#fff3e0}
.eyebrow{font-size:12px;letter-spacing:.24em;color:var(--acc);font-weight:700;text-transform:uppercase;margin-bottom:10px}
.lead{color:var(--mute);max-width:40em;margin-bottom:32px}
.ico{width:26px;height:26px;stroke-width:1.6;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;color:var(--acc);flex:none}
.ico.big{width:32px;height:32px}

/* header */
.hd{position:sticky;top:0;z-index:20;background:rgba(255,253,249,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd .in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px;max-width:1500px}
/* ロゴの配置はオープニング動画の最終コマの実測比（マーク高=1: 日本語 高0.55／英語 高0.18・日本語の下に中央揃え／間隔 0.15／マークとの間隔 0.3） */
.hd .logo{display:flex;align-items:center;gap:17px;text-decoration:none;flex:none}
.hd .logo .wms{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:0;margin-top:3px}
.hd .logo .wm{height:29px;width:auto}
.hd .logo .wm-en{height:13px;width:auto}
.hd .logo .mark{width:52px;height:52px;overflow:visible;flex:none}
/* ロゴのアニメーション: 読み込み時に黄は左上から、橙は右下から滑り込んで組み合う。ホバーで再生 */
.mark .mk-y{transform-origin:100px 100px;animation:mk-in-y .9s cubic-bezier(.2,.8,.2,1) both}
.mark .mk-o{transform-origin:216px 216px;animation:mk-in-o .9s cubic-bezier(.2,.8,.2,1) .12s both}
.hd .logo:hover .mk-y{animation:mk-hover-y 1s cubic-bezier(.2,.8,.2,1) both}
.hd .logo:hover .mk-o{animation:mk-hover-o 1s cubic-bezier(.2,.8,.2,1) .08s both}
@keyframes mk-in-y{from{transform:translate(-70px,-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes mk-in-o{from{transform:translate(70px,70px);opacity:0}to{transform:none;opacity:1}}
@keyframes mk-hover-y{0%{transform:none}35%{transform:translate(-26px,-26px) rotate(-6deg)}100%{transform:none}}
@keyframes mk-hover-o{0%{transform:none}35%{transform:translate(26px,26px) rotate(6deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.mark .mk-y,.mark .mk-o,.hd .logo:hover .mk-y,.hd .logo:hover .mk-o{animation:none}}
.hd nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;font-size:13.5px;white-space:nowrap}
.hd nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.hd nav a{color:var(--ink);font-weight:400}
.hd nav a:hover{color:var(--acc);text-decoration:none}
/* ヘッダー右側: 電話番号＋相談予約ボタン（全画面幅で表示） */
.hd .acts{display:flex;align-items:center;gap:22px;margin-left:auto;flex:none}
/* 電話: 番号を出す幅では「相談を予約する」と同じ丸い囲み（白地・橙の縁） */
.hd .tel{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap;padding:5px 20px 5px 6px;border-radius:999px;background:#fff;border:1.5px solid var(--acc);box-shadow:0 4px 12px rgba(224,118,26,.10);transition:background .2s,transform .2s,box-shadow .2s}
.hd .tel:hover{background:var(--alt);transform:translateY(-1px);box-shadow:0 8px 18px rgba(224,118,26,.16)}
/* 電話アイコン: 触れると受話器がブルブル震え、橙の波紋が広がる */
.hd .tel:hover svg,.hd .tel:focus-visible svg{animation:tel-ring .8s ease-in-out,tel-pulse 1.1s ease-out infinite;background:linear-gradient(135deg,#ffb300,#e8700f);stroke:#fff}
@keyframes tel-ring{0%,100%{transform:rotate(0) scale(1)}12%{transform:rotate(-22deg) scale(1.18)}25%{transform:rotate(20deg) scale(1.18)}38%{transform:rotate(-16deg) scale(1.14)}50%{transform:rotate(14deg) scale(1.12)}62%{transform:rotate(-9deg) scale(1.08)}75%{transform:rotate(6deg) scale(1.04)}88%{transform:rotate(-3deg)}}
/* 閉じているボタンの縁を、ゆっくり静かに光らせる（先生 2026-09-19「控えめで良い」）。
   縁の色をわずかに明るくしながら、外側へ淡い光をにじませて戻す。4.2秒で1周 */
@keyframes btn-glow{
  0%,100%{box-shadow:inset 0 0 0 1.5px rgba(232,112,15,.5),0 0 0 0 rgba(232,112,15,0)}
  50%    {box-shadow:inset 0 0 0 1.5px rgba(247,164,21,.95),0 0 0 5px rgba(232,112,15,.13)}
}
@keyframes tel-pulse{0%{box-shadow:0 0 0 0 rgba(232,112,15,.55),0 0 0 0 rgba(255,179,0,.35)}70%{box-shadow:0 0 0 16px rgba(232,112,15,0),0 0 0 28px rgba(255,179,0,0)}100%{box-shadow:0 0 0 16px rgba(232,112,15,0),0 0 0 28px rgba(255,179,0,0)}}
.hd .tel svg{width:38px;height:38px;padding:10px;border-radius:50%;background:linear-gradient(135deg,#f5a300,#e8700f);stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hd .tel .num{font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.15;font-variant-numeric:tabular-nums}
.hd .tel .num small{display:block;margin-top:4px;font-size:10.5px;font-weight:500;line-height:1.2;color:var(--mute);letter-spacing:.06em}
/* 相談予約ボタン: 陽だまりの橙グラデーション＋白い丸アイコン＋補足行、ホバーで光が流れる */
.hd .cta{position:relative;display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap;
  padding:5px 18px 5px 6px;border-radius:999px;background:linear-gradient(135deg,#f5a300 0%,#e8700f 60%,#d9600a 100%);
  box-shadow:0 6px 18px rgba(224,118,26,.30),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;transition:transform .2s,box-shadow .2s}
.hd .cta:before{content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .6s ease}
.hd .cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(224,118,26,.38),inset 0 1px 0 rgba(255,255,255,.35);text-decoration:none}
.hd .cta:hover:before{left:130%}
.hd .cta .ic{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 3px rgba(120,60,0,.18)}
.hd .cta .ic svg{width:18px;height:18px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hd .cta .t{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:14.5px;letter-spacing:.03em}
.hd .cta .t small{font-size:10px;font-weight:500;letter-spacing:.14em;color:#fff3e2;margin-bottom:3px}
.hd .cta .ts{display:none}   /* 狭い画面用の短い名前（「お問い合わせ」）。既定では出さない */
.hd .tel .num .ns{display:none}  /* 狭い画面用の補足（営業時間の代わり。長さが入らないため） */
.hd .cta .ar{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85;transition:transform .2s}
.hd .cta:hover .ar{transform:translateX(3px)}
.menu-toggle{display:none}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line);border-radius:8px}
.menu-btn span{width:20px;height:2px;background:var(--ink);position:relative;display:block}
.menu-btn span:before,.menu-btn span:after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.menu-btn span:before{top:-6px}.menu-btn span:after{top:6px}

/* hero (index) */
.hero{position:relative;overflow:hidden;background:#1d1611;color:#fff;min-height:min(78vh,640px);display:flex;align-items:center}
.hero .slider{position:absolute;inset:0}
.hero .track{display:flex;height:100%;transition:transform .9s cubic-bezier(.4,0,.2,1);will-change:transform}
.hero .slide{flex:0 0 100%;height:100%}
.hero .slide video,.hero .slide img{width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,34,8,.30) 0%,rgba(64,34,8,.58) 58%,rgba(224,118,26,.82) 100%);opacity:0;transition:opacity .9s}
.hero .copy{position:relative;width:100%;text-align:center;padding-block:96px;opacity:0;transform:translateY(12px);transition:opacity .9s .15s,transform .9s .15s}
.hero.show .veil,.hero.show .copy{opacity:1;transform:none}
/* トップ画像の文字は3種類を同じ場所に重ね、スライドに合わせて入れ替える（先生 2026-09-19）。
   1周目だけ 2枚目＝キャッチコピー／3枚目＝理念のことば、4枚目以降と2周目からはずっと通常の文字とボタン。
   消えている間も場所は残す（visibility）＝中のボタンが見えている判定が崩れず、ヘッダーの表示が揺れない */
/* 幅を 100% に固定して重ねる。中身の長さで箱の幅が決まる余地を残すと、
   スライドごと・画面幅ごとに中央がずれる（先生 2026-09-19「違うサイズでもズレないように」） */
.hero .copy{display:grid;grid-template-columns:100%}
.hero .cp{grid-area:1/1;width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;transition:opacity .8s ease,transform .8s ease}
.hero .cp>*{max-width:100%}
.hero[data-cp="1"] .cp1,.hero[data-cp="2"] .cp2,.hero[data-cp="0"] .cp0{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* 3枚目「依頼者と共に より良い未来を創造する／ソラナ法律事務所」 */
.hero .cp2 .cp-lead{margin:0;color:#fff;max-width:none;font-family:var(--fd);font-weight:400;font-size:clamp(19px,2.9vw,32px);line-height:1.75;letter-spacing:.08em;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero .cp2 .cp-brand{position:relative;margin:26px 0 0;padding-top:22px;font-family:"Zen Old Mincho",var(--fh);font-weight:700;font-size:clamp(16px,2vw,22px);letter-spacing:.24em;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hero .cp2 .cp-brand:before{content:"";position:absolute;left:50%;top:0;width:clamp(120px,18vw,210px);height:1px;margin-left:calc(clamp(120px,18vw,210px) / -2);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0))}
.hero .en{font-size:12px;letter-spacing:.3em;color:#ffd9a8;font-weight:700;margin-bottom:16px}
.hero h1{font-family:var(--fd);font-weight:400;font-size:clamp(20px,3.2vw,36px);line-height:1.7;letter-spacing:.06em;text-shadow:0 2px 24px rgba(0,0,0,.28);text-wrap:balance}
/* 今のサイトのキャッチコピーをトップ画像でも使う（先生 2026-09-19）。「トラブル解決」は今のサイトと同じ橙の座布団 */
/* 狭い幅では「適切な〜を／目指します。」の切れ目で折り返す（「す。」だけが行に落ちるのを防ぐ）。
   入る幅では1行のまま（先生 2026-09-19） */
.hero h1 .ln{display:inline-block}
.hero h1 em{font-style:normal;color:#fff;background:linear-gradient(135deg,#f5a300 0%,#e8700f 100%);padding:.04em .34em .1em;margin:0 .1em;border-radius:4px;box-shadow:0 6px 18px rgba(232,112,15,.34)}
.hero .cp-sub{margin:20px 0 0;font-size:clamp(13.5px,1.7vw,17px);line-height:1.95;letter-spacing:.05em;color:rgba(255,255,255,.93);text-shadow:0 2px 18px rgba(0,0,0,.32);text-wrap:balance}
/* 地域名に金の蛍光ペン（案1「光のマーカー」・先生 2026-09-19 決定。比較は _marker2_src.py）。
   通常の文字（data-cp="0"）が出たときに左から順に引かれ、以後は引かれたまま */
.hero .cp-sub .area{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:6px 0}
.hero .cp-sub .mk{position:relative;z-index:0;display:inline-block;margin:0 .75em;font-weight:700;letter-spacing:.08em;color:#fff}
.hero .cp-sub .mk:before{content:"";position:absolute;z-index:-1;left:-.3em;right:-.3em;bottom:.14em;height:.52em;border-radius:3px;background:linear-gradient(90deg,#ffd54a,#f5a300);box-shadow:0 0 16px rgba(255,190,40,.55);opacity:.92;transform:scaleX(0);transform-origin:left}
.hero[data-cp="0"] .cp-sub .mk:before{animation:hero-mk .65s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(.55s + var(--i)*.38s)}
@keyframes hero-mk{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hero .cp-sub .mk:before{animation:none!important;transform:none}}
.hero p{margin:22px auto 0;max-width:34em;color:#fbe9d2;font-size:15.5px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero .cta{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
/* ヒーローのボタン: ヘッダーの相談予約と同じ意匠を大きく */
.hbtn{position:relative;display:inline-flex;align-items:center;gap:14px;color:#fff;text-decoration:none;white-space:nowrap;
  padding:7px 26px 7px 8px;border-radius:999px;background:linear-gradient(135deg,#f5a300 0%,#e8700f 60%,#d9600a 100%);
  box-shadow:0 10px 28px rgba(60,30,0,.28),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;transition:transform .2s,box-shadow .2s;text-shadow:none}
.hbtn:before{content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .6s ease}
.hbtn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(60,30,0,.34),inset 0 1px 0 rgba(255,255,255,.35);text-decoration:none}
.hbtn:hover:before{left:130%}
.hbtn .ic{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 3px rgba(120,60,0,.18)}
.hbtn .ic svg{width:22px;height:22px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hbtn .t{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:17px;letter-spacing:.04em;text-align:left}
.hbtn .t small{font-size:11px;font-weight:500;letter-spacing:.12em;color:#fff3e2;margin-bottom:4px}
.hbtn .ar{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:transform .2s;flex:none}
.hbtn:hover .ar{transform:translateX(4px)}
.hbtn.ghost{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.75);backdrop-filter:blur(6px);padding:15px 22px 15px 24px;box-shadow:none;gap:10px}
.hbtn.ghost:before{display:none}
.hbtn.ghost .t{font-size:15px;font-weight:600}
.hbtn.ghost:hover{background:rgba(255,255,255,.22);border-color:#fff;box-shadow:none}
.hero .dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:3}
.hero .dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.2);padding:0;cursor:pointer;transition:background .3s}
.hero .dots button.on{background:var(--acc2)}
.hero .dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* sections */
section{padding-block:72px}
#greeting{padding-block:56px 80px}
.alt{background:var(--alt)}
h2.sec{font-size:26px;margin-bottom:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px}
.card h3{font-size:17px;margin:12px 0 6px}
.card p{font-size:14px;color:var(--mute)}
#annai{padding-block:56px 60px}
/* 「取り扱い分野」から下を見出しの方へ引き上げる（先生 2026-09-18）。広い画面では左の見出しと中央の小見出しが重ならないので、さらに上へ */
#annai .hx{margin-bottom:6px}
@media (min-width:700px){#annai .fl-sub{margin-top:-22px}}
/* 700px 未満は「取り扱い分野」が見出しの下に縦に積まれるので、「弁護士費用」と注記のあきにそろえる
   （先生 2026-09-19。弁護士費用は .hx の 26px −.fee-note の 8px＝18px。こちらは続く文字が大きいぶん少し足して 24px） */
@media (max-width:699px){#annai .hx{margin-bottom:24px}}
/* 業務案内の分野カード: 白いカードに丸い陽だまりのアイコン。ホバーで橙が下から満ち、アイコンが白い丸になり、矢印が現れる */
/* 「取り扱い分野」＝案1: 両側に細線つきで中央に大きく、その下に注記（2026-09-17 先生確定） */
.fl-sub{font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:clamp(22px,2.6vw,28px);letter-spacing:.2em;color:#2a241c;text-align:center;line-height:1.3;display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 6px;padding-left:.2em}
.fl-sub span{flex:none;width:72px;height:1px;background:linear-gradient(90deg,rgba(232,112,15,0),var(--acc))}
.fl-sub span:last-child{background:linear-gradient(90deg,var(--acc),rgba(232,112,15,0))}
.fl-note{text-align:center;color:#6f675c;font-size:14.5px;letter-spacing:.04em;line-height:1.6;margin-bottom:20px}
/* 「お問い合わせください。」は途中で切らない＝1行に入らない幅では「お手数ですが、」の後ろで折り返す（先生 2026-09-19） */
.fl-note .nw{white-space:nowrap}
@media (max-width:640px){.fl-sub span{width:36px}.fl-sub{gap:12px}.fl-sub{margin-bottom:10px}}
.fl-grid{gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.field{position:relative;overflow:hidden;background:#fff;border-radius:16px;padding:16px 14px 15px;text-align:center;border:1px solid rgba(232,112,15,.14);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:9px;
  box-shadow:0 6px 18px rgba(120,70,10,.05);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;isolation:isolate}
.field:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,#f5a300 0%,#e8700f 100%);transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.field:after{content:"";position:absolute;left:-40%;top:-60%;width:40%;height:220%;z-index:-1;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .7s ease .1s;pointer-events:none}
.field:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(232,112,15,.28);border-color:transparent;text-decoration:none;color:#fff}
.field:hover:before{transform:translateY(0)}
.field:hover:after{left:140%}
.field .fi{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d6,#ffe7a8);display:flex;align-items:center;justify-content:center;transition:background .35s,transform .45s cubic-bezier(.34,1.4,.64,1),box-shadow .35s}
.field .ico{width:40px;height:40px;margin:0;stroke-width:1.5;transition:transform .45s cubic-bezier(.34,1.4,.64,1),color .35s}
.field:hover .fi{background:#fff;transform:scale(1.08) rotate(-6deg);box-shadow:0 6px 16px rgba(120,50,0,.22)}
.field:hover .ico{transform:rotate(6deg) scale(1.08);color:var(--acc)}
.field b{display:block;font-family:"Zen Old Mincho",var(--fh);font-size:17px;font-weight:900;letter-spacing:.12em;transition:color .35s;line-height:1.4}  /* 明朝の太字（先生 2026-09-18） */
.field .fa{position:absolute;right:14px;bottom:12px;width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.field:hover .fa{opacity:1;transform:none;transition-delay:.15s}
.field:active{transform:translateY(-2px) scale(.98)}
@media (max-width:640px){.field{padding:14px 10px 13px;gap:8px}.field .fi{width:64px;height:64px}.field .ico{width:34px;height:34px}.field b{font-size:15px;letter-spacing:.06em}}
.prof img{border-radius:8px;width:100%;max-width:360px;aspect-ratio:1/1;object-fit:cover}
/* 弁護士紹介: 現行サイトどおり写真を中央に（約280px幅）、その下に氏名の板 */
.atty{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:36px}
.atty img{width:100%;max-width:280px;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:6px;box-shadow:0 8px 24px rgba(60,40,10,.12)}
.atty .nameplate{background:var(--dark);color:#fff;padding:12px 28px;border-radius:6px;font-family:var(--fh);font-size:20px;letter-spacing:.06em;display:flex;align-items:baseline;gap:14px}
.atty .nameplate small{font-family:var(--fb);font-size:13px;letter-spacing:.06em;color:#e8dfd0}
/* 経歴: 2列の表をやめ、見出し（橙の小さな四角＋明朝＋右へ溶ける細線）の下に本文。学歴等は左の細い時間軸に橙の点 */
.cv{margin-top:8px;display:flex;flex-direction:column;gap:44px}
.cv-sec{padding:0}  /* section の既定 padding-block:72px を打ち消す（項目間が開きすぎた原因） */
.cv-h{display:flex;align-items:center;gap:14px;font-family:var(--fh);font-size:clamp(19px,2.2vw,23px);font-weight:600;letter-spacing:.14em;color:#2a241c;margin:0 0 20px}
.cv-h i{flex:none;width:11px;height:11px;background:linear-gradient(135deg,#f5a300,#e8700f);transform:rotate(45deg);border-radius:2px;box-shadow:0 0 0 4px rgba(245,163,0,.14)}
.cv-h em{flex:1;height:1px;margin-left:6px;background:linear-gradient(90deg,rgba(232,112,15,.55),rgba(232,112,15,0));transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1) .2s}
.cv-sec.is-in .cv-h em{transform:scaleX(1)}
/* 見出し左の四角: はじけて輪が広がる（案5・2026-09-17 確定）。画面に入ったとき1回＋見出しにマウスを合わせたとき（REVEAL_JS が .noanim を付け外しして再生） */
.cv-h i{position:relative}
.cv-h i:before,.cv-h i:after{content:"";position:absolute;left:50%;top:50%;pointer-events:none;opacity:0}
.cv-h i:before{width:14px;height:14px;margin:-8px 0 0 -8px;border-radius:50%;border:1.5px solid #ffc53a}
.cv-h i:after{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:transparent}
.cv-sec.is-in .cv-h i{animation:cv-pop 1s cubic-bezier(.34,1.7,.5,1) .1s both}
.cv-sec.is-in .cv-h i:before{animation:cv-ring 1s ease-out .38s both}
.cv-sec.is-in .cv-h i:after{animation:cv-dots 1s ease-out .4s both}
.cv-h.noanim i,.cv-h.noanim i:before,.cv-h.noanim i:after{animation:none!important}
@keyframes cv-pop{0%{transform:rotate(-135deg) scale(0);opacity:0;filter:brightness(2.2)}30%{opacity:1}100%{transform:rotate(45deg) scale(1);filter:none;box-shadow:0 0 0 4px rgba(245,163,0,.14)}}
@keyframes cv-ring{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(3.4)}}
@keyframes cv-dots{0%{opacity:1;box-shadow:0 0 0 0 #ffb21e,0 0 0 0 #ffb21e,0 0 0 0 #ffd24a,0 0 0 0 #ffd24a}100%{opacity:0;box-shadow:0 -20px 0 0 #ffb21e,0 20px 0 0 #ffb21e,-20px 0 0 0 #ffd24a,20px 0 0 0 #ffd24a}}
@media (prefers-reduced-motion:reduce){.cv-sec.is-in .cv-h i,.cv-sec.is-in .cv-h i:before,.cv-sec.is-in .cv-h i:after{animation:none}}
.cv-body p,.cv-tl p{margin:0 0 18px;line-height:2;letter-spacing:.02em;color:#3d3730}
.cv-body p:last-child,.cv-tl p:last-child{margin-bottom:0}
.cv-tl{position:relative;padding-left:30px}
.cv-tl:before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,#f5a300,rgba(232,112,15,.25));transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.3,.7,.3,1) .2s}
.cv-sec.is-in .cv-tl:before{transform:scaleY(1)}
.cv-tl p{position:relative}
.cv-tl p:before{content:"";position:absolute;left:-30px;top:11px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #e8700f;box-shadow:0 0 0 3px rgba(245,163,0,.16);transform:scale(0);transition:transform .6s cubic-bezier(.34,1.5,.64,1),scale .3s cubic-bezier(.34,1.7,.64,1),box-shadow .3s ease}
/* 丸（またはその行）にカーソルを置くと少し大きくなる。登場時の transform とは別の scale プロパティで拡大（遅延の影響を受けない） */
.cv-tl p:hover:before{scale:1.45;box-shadow:0 0 0 5px rgba(245,163,0,.24)}
.cv-sec.is-in .cv-tl p:before{transform:scale(1)}
.cv-sec.is-in .cv-tl p:nth-child(1):before{transition-delay:0.25s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(2):before{transition-delay:0.45s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(3):before{transition-delay:0.65s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(4):before{transition-delay:0.85s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(5):before{transition-delay:1.05s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(6):before{transition-delay:1.25s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(7):before{transition-delay:1.45s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(8):before{transition-delay:1.65s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(9):before{transition-delay:1.85s,0s,0s}
.cv-sec.is-in .cv-tl p:nth-child(10):before{transition-delay:2.05s,0s,0s}
@media (prefers-reduced-motion:reduce){.cv-tl:before,.cv-tl p:before{transform:none;transition:none}}
.cv-tl p:last-child:before{background:linear-gradient(135deg,#f5a300,#e8700f);border-color:transparent}
@media (max-width:640px){.cv{gap:36px}.cv-h{font-size:18px}}
.prose.wide{max-width:none}
/* Solana's philosophy: 陽だまりの光の中に、明朝の言葉を静かに置く */
.philo{position:relative;overflow:clip;text-align:center;padding-block:64px 80px;
  background:radial-gradient(ellipse 70% 80% at 50% 0%,#fff7dd 0%,#fffdf6 55%,#fffdf9 100%)}
.philo:before{content:"";position:absolute;left:50%;top:-140px;width:640px;height:640px;margin-left:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,150,.55) 0%,rgba(255,226,120,.22) 40%,rgba(255,226,120,0) 70%);pointer-events:none}
/* 理念の透かし: 見出し帯と同じ動き（組み合う・3D回転・漂う）を右下で大きめ・薄めに */
/* 透かしのロゴは揺れても全体が枠内に収まる大きさ・位置に（先生 2026-09-18）。動きの振れ幅（漂い18px＋傾き＋四角の開き）ぶん約44pxの余白をとる */
.philo .philo-mark{right:max(48px,6%);top:auto;bottom:44px;margin-top:0;width:190px;height:190px;opacity:.13;animation:philo-float 7s ease-in-out infinite alternate}
/* 泳ぐように: 8の字にゆっくり漂う（周期の異なる3つの動きを重ねて機械的に見せない） */
@keyframes philo-float{0%{transform:translate(0,-10px) rotate(-8deg)}25%{transform:translate(-18px,4px) rotate(-3deg)}50%{transform:translate(-6px,14px) rotate(3deg)}75%{transform:translate(14px,2px) rotate(6deg)}100%{transform:translate(0,-10px) rotate(-8deg)}}
.philo .philo-mark{animation:philo-float 16s ease-in-out infinite}
.philo .philo-mark .mark{animation:philo-swim 13s ease-in-out infinite;filter:drop-shadow(0 14px 16px rgba(120,60,0,.12))}
@keyframes philo-swim{0%{transform:rotateX(6deg) rotateY(-28deg)}50%{transform:rotateX(-8deg) rotateY(28deg)}100%{transform:rotateX(6deg) rotateY(-28deg)}}
/* 2つの四角は呼吸するようにわずかに離れて、また寄る */
.philo .philo-mark .mk-y{animation:philo-mk-y 9s ease-in-out infinite}
.philo .philo-mark .mk-o{animation:philo-mk-o 9s ease-in-out .6s infinite}
@keyframes philo-mk-y{0%,100%{transform:none}50%{transform:translate(-16px,-12px) rotate(-3deg)}}
@keyframes philo-mk-o{0%,100%{transform:none}50%{transform:translate(16px,12px) rotate(3deg)}}
@media (max-width:640px){.philo .philo-mark{width:130px;height:130px;right:40px;bottom:40px}}
.philo .in{position:relative;z-index:1}
.philo-head{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:12px}
/* 側の線は縮んでよい（見出しを絶対に折り返さないため。端末の文字サイズ設定が大きいと先に線が短くなる） */
.philo-head span{flex:0 1 96px;width:96px;min-width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(232,112,15,0),var(--acc));}
.philo-head span:last-child{background:linear-gradient(90deg,var(--acc),rgba(232,112,15,0))}
.philo-head h2{flex:0 0 auto;white-space:nowrap;font-family:var(--fh);font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:.2em;color:#2a241c;padding-left:.2em;text-shadow:0 2px 12px rgba(245,163,0,.22)}
.philo-en{font-family:var(--fd);font-size:17px;font-weight:500;letter-spacing:.26em;color:var(--acc);margin-bottom:26px}
/* 1文ずつ中央に。折り返すときは読点の位置（wbr）で、行の長さが揃うように */
.philo-q{font-family:var(--fh);font-size:clamp(17px,1.9vw,20px);font-weight:600;line-height:1.85;letter-spacing:.06em;color:var(--ink);margin:0 auto 6px;max-width:36em;text-align:left}
.philo-q:last-of-type{margin-bottom:0}
.philo-sep{display:flex;justify-content:center;margin:14px auto}
.philo-sep .goo{display:flex;align-items:center;gap:9px;padding:6px 10px;filter:url(#goo)}
.philo-sep i{width:9px;height:9px;border-radius:50%;background:#f5a300;display:block;animation:goo-side 2.8s ease-in-out infinite}
.philo-sep i:nth-child(2){background:#e8700f;width:12px;height:12px;animation:goo-mid 2.8s ease-in-out infinite}
.philo-sep i:nth-child(3){animation-name:goo-side-r}
@keyframes goo-side{0%,100%{transform:translateX(0) scale(1)}35%{transform:translateX(7px) scale(1.25,.8)}50%{transform:translateX(9px) scale(.85,1.2)}65%{transform:translateX(5px) scale(1.15,.9)}}
@keyframes goo-side-r{0%,100%{transform:translateX(0) scale(1)}35%{transform:translateX(-7px) scale(1.25,.8)}50%{transform:translateX(-9px) scale(.85,1.2)}65%{transform:translateX(-5px) scale(1.15,.9)}}
@keyframes goo-mid{0%,100%{transform:scale(1);border-radius:50%}30%{transform:scale(1.25,.85);border-radius:46% 54% 52% 48%}50%{transform:scale(.9,1.3);border-radius:55% 45% 48% 52%}70%{transform:scale(1.15,.95);border-radius:48% 52% 55% 45%}}
@media (prefers-reduced-motion:reduce){.philo-sep i{animation:none}}
.philo-s{font-size:15.5px;font-weight:500;line-height:1.9;letter-spacing:.06em;color:#4b453d;margin:0 auto;max-width:36em;text-align:left}
/* スクロールで現れる */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media (max-width:640px){.philo{padding-block:48px 72px}.philo-head{gap:14px}.philo-head span{flex:0 1 40px;width:40px}.philo-en{font-size:15px}.philo-mark{width:170px;height:170px}}
.prose.center{text-align:center;max-width:none}
.prose.center .eyebrow{justify-content:center;display:flex;font-size:18px;letter-spacing:.14em;text-transform:none;font-family:var(--fh);margin-bottom:18px}
.sec.center{text-align:center}
/* 代表弁護士ご挨拶: 左に文章、右に小さめの写真 */
/* 代表弁護士ご挨拶（トップ）: 明朝の見出し＋伸びる橙のバー・ゆったりした本文・写真は橙の枠を少しずらして重ねる */
.greet{display:block}
.greet .gtext{max-width:46em;margin:0 auto}
/* 見出し「刻む」（案3）: .reveal が .in になったときだけ動く。文字は札が起き上がるように、線は光の点が左端から引く */
.hx{position:relative;display:inline-block;padding:6px 40px 0 0;margin:0 0 26px;perspective:900px;max-width:100%}
.hx-wm{position:absolute;right:-24px;top:50%;width:120px;height:120px;margin-top:-64px;opacity:.08;pointer-events:none;animation:hx-wm 12s ease-in-out infinite alternate}
.hx-wm .mark{width:100%;height:100%;display:block}
@keyframes hx-wm{from{transform:rotate(-10deg) translateY(6px)}to{transform:rotate(8deg) translateY(-6px)}}
/* 透かしの2つの四角: 最初は中央で重なっていて、見えたときに今の鎖の形へ広がる */
.hx-wm .mk-y{transform:translate(57px,57px);transform-origin:160px 160px}
.hx-wm .mk-o{transform:translate(-57px,-57px);transform-origin:160px 160px}
.hx.is-in .hx-wm .mk-y{animation:hx-my 1.3s cubic-bezier(.34,1.35,.64,1) .5s forwards, philo-mk-y 9s ease-in-out 1.9s infinite}
.hx.is-in .hx-wm .mk-o{animation:hx-mo 1.3s cubic-bezier(.34,1.35,.64,1) .5s forwards, philo-mk-o 9s ease-in-out 2.5s infinite}
/* 広がったあとは理念の透かしと同じく、ゆっくり傾きながら泳ぎつづける */
.hx-wm .mark{transform-style:preserve-3d}
.hx{perspective:700px}
.hx.is-in .hx-wm .mark{animation:philo-swim 13s ease-in-out 1.9s infinite}
@keyframes hx-my{from{transform:translate(57px,57px) rotate(-8deg)}to{transform:none}}
@keyframes hx-mo{from{transform:translate(-57px,-57px) rotate(8deg)}to{transform:none}}
.hx-t{position:relative;font-family:var(--fh);font-size:clamp(26px,3.2vw,36px);font-weight:600;letter-spacing:.2em;line-height:1.15;color:#2a241c;transform-style:preserve-3d;white-space:nowrap}
.hx-t span{display:inline-block;opacity:0;transform:rotateX(-92deg) translateY(-10px);transform-origin:center top}
.hx.is-in .hx-t span{animation:hx-c .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hx-c{60%{opacity:1}to{opacity:1;transform:none}}
.hx-rule{position:relative;height:14px;margin-top:4px}
.hx-rule i{position:absolute;left:0;top:5px;height:3px;width:100%;border-radius:999px;background:linear-gradient(90deg,#ffd500,#f5a300 45%,#e8700f);clip-path:inset(0 100% 0 0)}
.hx.is-in .hx-rule i{animation:hx-r 4s ease-in-out 1.3s forwards}
@keyframes hx-r{0%{clip-path:inset(0 100% 0 0)}50%,100%{clip-path:inset(0 0 0 0)}}
.hx-rule em{position:absolute;left:-2px;top:1px;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:#fff;border:2px solid #e8700f;box-shadow:0 0 0 4px rgba(245,163,0,.18);opacity:0}
.hx.is-in .hx-rule em{animation:hx-d 4s ease-in-out 1.3s 1}
.hx.is-in:hover .hx-rule em{animation:hx-d 3.2s ease-in-out infinite}
@keyframes hx-d{0%{opacity:0;left:-2px}6%{opacity:1}50%{left:calc(100% - 8px)}94%{opacity:1}100%{opacity:0;left:-2px}}
.hx.reveal{transform:none}
@media (prefers-reduced-motion:reduce){.hx-t span{opacity:1;transform:none;animation:none!important}.hx-rule i{clip-path:none;animation:none!important}.hx-rule em,.hx-wm{animation:none!important}.hx-wm .mk-y,.hx-wm .mk-o{transform:none;animation:none!important}}
@media (max-width:640px){.hx{padding-right:20px}.hx-wm{width:90px;height:90px;margin-top:-48px;right:-16px}}
.g-body p{font-size:15.5px;line-height:2.05;letter-spacing:.03em;color:#3d3730;margin:0 0 20px}
.g-body p:last-child{margin-bottom:0}
.g-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
/* ボタン: 光が走る・矢印が進む・少し浮く */
.btn2{position:relative;display:inline-flex;align-items:center;gap:12px;padding:14px 24px 14px 28px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-decoration:none;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background-color .28s,color .28s}
.btn2:before{content:"";position:absolute;top:-40%;left:-70%;width:40%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .65s ease}
.btn2:hover:before{left:140%}
.btn2 .ar{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.btn2:hover .ar{transform:translateX(5px)}
.btn2.fill{color:#fff;background:linear-gradient(135deg,#f5a300 0%,#e8700f 100%);box-shadow:0 8px 22px rgba(232,112,15,.28),inset 0 1px 0 rgba(255,255,255,.3)}
.btn2.fill:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(232,112,15,.38),inset 0 1px 0 rgba(255,255,255,.35);text-decoration:none}
.btn2.line{color:var(--acc-dk);background:#fff;border:1.5px solid rgba(232,112,15,.45);box-shadow:0 4px 14px rgba(120,60,0,.06)}
.btn2.line:hover{transform:translateY(-3px);background:#fff6e8;border-color:var(--acc);box-shadow:0 12px 26px rgba(232,112,15,.18);text-decoration:none}
.btn2:active{transform:translateY(0) scale(.98)}
.greet .photo{width:320px;margin:0 auto 40px}
.greet .photo .frame{position:relative;border-radius:14px}
.greet .photo img{position:relative;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:0 12px 30px rgba(60,40,10,.12);display:block}
.greet .photo .cap{display:flex;align-items:center;justify-content:center;gap:8px;font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:17px;letter-spacing:.12em;color:#2a241c;margin-top:16px;white-space:nowrap}
.greet .photo .cap i{display:none}
@media (max-width:640px){.greet .photo{width:min(280px,80%);margin-bottom:30px}#greeting{padding-block:44px 56px}}
.prof .nm{font-size:12.5px;color:var(--mute);letter-spacing:.1em;margin:6px 0 16px}
.prof p{color:#4b453d;font-size:14.5px;margin-bottom:12px}
/* 弁護士費用（トップ・2026-09-17）: 陽だまりのカード。上辺の橙の帯が伸び、「無料」に黄のマーカーが引かれる。ホバーで浮いてアイコンが橙に染まる */
#price{position:relative;overflow:clip}
#price:before{content:"";position:absolute;right:-140px;top:-90px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,102,.32),rgba(255,214,102,0) 70%);pointer-events:none}
#price>.in{position:relative}
.fee-note{font-size:13.5px;color:var(--mute);margin:-8px 0 16px;letter-spacing:.04em}
.fee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feec{position:relative;overflow:hidden;isolation:isolate;background:#fff;border-radius:18px;padding:24px 20px 20px;text-align:center;border:1px solid rgba(232,112,15,.16);box-shadow:0 8px 24px rgba(120,70,10,.06);display:flex;flex-direction:column;align-items:center;gap:12px}
.feec.reveal.is-in{transition:opacity .8s ease,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.feec:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#f5a300,#e8700f);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1) .35s}
.feec.is-in:before{transform:scaleX(1)}
.feec:after{content:"";position:absolute;left:-90%;top:-60%;width:36%;height:220%;z-index:-1;background:linear-gradient(105deg,rgba(255,226,122,0),rgba(255,226,122,.35),rgba(255,226,122,0));transform:skewX(-20deg);transition:left .8s ease .05s;pointer-events:none}
.feec.reveal.is-in:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(232,112,15,.2);border-color:rgba(232,112,15,.45)}
.feec:hover:after{left:140%}
.feec .fi{flex:none;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d6,#ffe7a8);display:flex;align-items:center;justify-content:center;transition:background .35s,transform .45s cubic-bezier(.34,1.4,.64,1),box-shadow .35s}
.feec .ico{width:38px;height:38px;margin:0;color:var(--acc);stroke-width:1.5;transition:transform .45s cubic-bezier(.34,1.4,.64,1),color .35s}
.feec:hover .fi{background:linear-gradient(135deg,#f5a300,#e8700f);transform:scale(1.08) rotate(-6deg);box-shadow:0 8px 18px rgba(232,112,15,.32)}
.feec:hover .ico{color:#fff;transform:rotate(6deg) scale(1.06)}
.feec .fee-t{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.feec b{font-size:13.5px;color:var(--mute);font-weight:500;letter-spacing:.06em;line-height:1.5}
.feec strong{font-family:var(--fh);font-size:clamp(18px,1.75vw,22px);font-weight:600;line-height:1.35;color:#2a241c;letter-spacing:.02em;white-space:nowrap}
.feec strong em{font-style:normal;font-size:1.28em;color:var(--acc-dk);padding:0 .1em;margin-left:.06em;background:linear-gradient(transparent 62%,#ffe27a 62%) no-repeat 0 0/0% 100%;transition:background-size 1s cubic-bezier(.2,.8,.2,1) .8s}
.feec.is-in strong em{background-size:100% 100%}
.feec strong em.pay{background:none;font-size:1.14em;padding:0;margin-left:.04em}
.feec p{font-size:12.5px;color:var(--mute);line-height:1.6;margin:1px 0 0;text-wrap:balance}
/* ※ の注記は、折り返した2行目以降の行頭を1文字下げて ※ の後ろにそろえる（先生 2026-09-19）。
   word-break:auto-phrase ＝ 文節の切れ目でだけ折り返す（「お受けでき／ない」のような途中改行を防ぐ。
   対応していないブラウザーでは無視されるだけで従来どおり） */
/* ※ の前は少しあける（先生 2026-09-19「実質無料と※の間が詰まりすぎ。他のカードも同じように」） */
/* text-wrap は balance（2行の長さを均等にする）を使わない。均等割りは文の長さで割り位置が変わるため、
   同じ文で始まる電話法律相談と法律相談の ※ が別の位置で折り返してしまう（先生 2026-09-19）。
   入るところまで入れて文節で折り返す形にすると、同じ文は必ず同じ位置で折り返す */
.feec p.nt{padding-left:1em;text-indent:-1em;word-break:auto-phrase;text-wrap:wrap;margin-top:7px}
.fee-more{text-align:center;margin-top:26px}
/* 目立たせたいボタン（.btn2.fill.pop）: ひと回り大きく、白丸の矢印、脈打つ光の輪、数秒ごとに横切る光。ホバーで浮いて少し膨らむ */
.btn2.pop{animation:pop-glow 2.6s ease-in-out infinite}  /* 大きさは .btn2 の標準のまま（先生指示） */
.btn2.pop:before{animation:pop-shine 3.4s ease-in-out 1.2s infinite}
.btn2.pop .arc{flex:none;width:26px;height:26px;margin:-3px -6px -3px 0;border-radius:50%;background:#fff;color:var(--acc-dk);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(120,50,0,.22);transition:transform .35s cubic-bezier(.34,1.5,.64,1)}
.btn2.pop .ar{width:15px;height:15px;stroke-width:2.6}
.btn2.pop:hover{transform:translateY(-4px) scale(1.04)}
.btn2.pop:hover .arc{transform:translateX(5px) scale(1.1)}
.btn2.pop:hover .ar{transform:none}
.btn2.pop:active{transform:translateY(-1px) scale(.99)}
@keyframes pop-glow{0%,100%{box-shadow:0 10px 26px rgba(232,112,15,.34),0 0 0 0 rgba(245,163,0,.5),inset 0 1px 0 rgba(255,255,255,.35)}55%{box-shadow:0 12px 28px rgba(232,112,15,.42),0 0 0 11px rgba(245,163,0,0),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes pop-shine{0%{left:-70%}32%,100%{left:140%}}
@media (prefers-reduced-motion:reduce){.btn2.pop,.btn2.pop:before{animation:none}}
@media (max-width:860px){
  .fee-grid{grid-template-columns:1fr;gap:18px}
  .feec{flex-direction:row;align-items:center;text-align:left;padding:15px 20px 13px;gap:16px}
  .feec .fi{width:56px;height:56px}.feec .ico{width:29px;height:29px}
  .feec .fee-t{align-items:flex-start;gap:1px}
  .feec strong{font-size:19px}
  /* 縦に積むと枠の高さが1枚ずつ変わって見えるので、「見出し＋金額＋注記2行」ぶんを下限にそろえる
     （先生 2026-09-19「電話法律相談と交通事件の枠の天地を同じに」。注記が3行の面談の枠だけは自然に高くなる） */
  .feec{min-height:124px}
}
@media (max-width:380px){.feec{padding:14px 14px 12px;gap:12px;min-height:120px}.feec .fi{width:50px;height:50px}.feec .ico{width:26px;height:26px}.feec strong{font-size:18px}}
@media (prefers-reduced-motion:reduce){.feec:before{transform:none;transition:none}.feec strong em{background-size:100% 100%;transition:none}}
/* 分野カードも、現れた後はホバーにすぐ反応させる（.reveal の 0.8 秒の transform を上書き） */
.field.reveal.is-in{transition:opacity .8s ease,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.fee{background:#fff;border-radius:8px;padding:22px 24px;border:1px solid var(--line);border-top:4px solid var(--acc2)}
.fee b{display:block;font-size:13.5px;color:var(--mute);font-weight:500;margin-bottom:6px}
.fee strong{font-family:var(--fh);font-size:22px;font-weight:600}
.fee p{font-size:13px;color:var(--mute);margin-top:6px}
.acc img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;width:100%}
.acc p{font-size:14.5px;color:#4b453d;margin-bottom:8px}
.more{margin-top:28px;text-align:center}

/* blog */
/* 最新情報（トップ・一覧共通のカード。2026-09-19 他の区画と意匠をそろえた） */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{font-size:13px;padding:6px 15px;border-radius:999px;border:1.5px solid rgba(232,112,15,.35);color:var(--acc-dk);font-weight:500;letter-spacing:.04em;background:#fff;transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
.chip:hover{border-color:var(--acc);background:#fff6e8;transform:translateY(-2px);box-shadow:0 6px 14px rgba(232,112,15,.14);text-decoration:none}
.chip.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#f5a300 0%,#e8700f 100%);box-shadow:0 4px 12px rgba(232,112,15,.25)}
/* 記事カード＝案5「写真が上の雑誌型」（2026-09-19 先生決定。比較は _artcard_src.py）:
   上に16:9の写真（分野の札を左上に重ねる）、下に題名と小さな日付。ホバーで浮き、写真が寄り、光が走り、札が弾む */
.arts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.art{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(232,112,15,.12);box-shadow:0 3px 12px rgba(120,60,0,.05);color:#2a241c;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.art:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(232,112,15,.16);text-decoration:none}
.art.reveal.is-in{transition:opacity .8s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.art.reveal.is-in:hover{transform:translateY(-4px)}
.art .ph{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.art .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.art:hover .ph img{transform:scale(1.06)}
.art .ph-ic{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:radial-gradient(circle at 30% 25%,#fff7d6 0%,#ffe7a8 55%,#ffd98a 100%);color:var(--acc);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.art .ph-ic svg{width:34%;max-width:64px;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.art:hover .ph-ic{transform:scale(1.04)}
.art:hover .ph-ic svg{transform:scale(1.1) rotate(-6deg)}
.art .ph:after{content:"";position:absolute;top:-40%;left:-70%;width:38%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .75s cubic-bezier(.3,.6,.3,1);pointer-events:none}
.art:hover .ph:after{left:150%}
.art .tag{position:absolute;left:8px;top:8px;z-index:1;font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,#f5a300,#e8700f);border-radius:999px;padding:2px 10px;box-shadow:0 3px 8px rgba(0,0,0,.18);transition:transform .4s cubic-bezier(.34,1.6,.5,1)}
.art:hover .tag{transform:translateY(-2px) scale(1.06)}
.art .art-b{display:flex;flex-direction:column;gap:5px;padding:10px 12px 11px}
.art .ttl{font-family:"Zen Maru Gothic",var(--fb);font-size:14px;font-weight:700;line-height:1.6;letter-spacing:.04em;text-wrap:pretty;transition:color .25s}
.art:hover .ttl{color:var(--acc-dk)}
.art .dt{font-size:11px;color:#a39a8c;letter-spacing:.06em;font-variant-numeric:tabular-nums}
@media (max-width:980px){.arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.art .ph:after{display:none}}
/* トップの区画: 天地は詰め気味（見出しの線からチップまで約18px） */
/* 見出しの上下の空きを均等に（先生 2026-09-19）: 区画の上端→見出しの文字、見出しの線→札を同じ 36px に。
   .hx は上に 6px の余白を持ち、線は .hx の下端から 6px 上にあるので、それぞれ 30px を足す */
.news{position:relative;overflow:clip;padding-block:30px 48px}
.news .hx{margin-bottom:30px}
.news .chips{margin-bottom:14px}
.news .more{margin-top:18px}
@media (max-width:640px){
  .news{padding-block:30px 40px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,48px));padding-inline:clamp(16px,4vw,48px);padding-block:2px 6px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .arts{gap:12px}
  .art .art-b{padding:8px 10px 9px}
  .art .ttl{font-size:13px}
}
.empty{color:var(--mute);font-size:14px;border:1px dashed var(--line);border-radius:8px;padding:28px;text-align:center}

/* sub pages */
/* ページ見出しの帯: 陽だまりの光＋ロゴマークの透かし＋見出し下の橙のひと筆 */
.band{position:relative;overflow:hidden;background:linear-gradient(120deg,#fffef8 0%,#fffbe2 55%,#fff7c8 100%);padding-block:34px 26px;border-bottom:1px solid #f3ecd2}
.band:before{content:"";position:absolute;right:-120px;top:-180px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 45% 45%,rgba(255,244,160,.90) 0%,rgba(255,238,130,.42) 35%,rgba(255,238,130,0) 70%);
  animation:band-sun 14s ease-in-out infinite alternate;pointer-events:none}
/* 透かしのロゴマーク: ヘッダーと同じ SVG（読み込み時に組み合う動き）＋ゆっくり上下に漂う */
.band-mark{position:absolute;right:6%;top:50%;width:180px;height:180px;margin-top:-90px;opacity:.2;pointer-events:none;animation:band-float 7s ease-in-out infinite alternate}
.band-mark{perspective:700px}
.band-mark .mark{width:100%;height:100%;overflow:visible;display:block;transform-style:preserve-3d;filter:drop-shadow(0 10px 12px rgba(120,60,0,.18));
  animation:band-spin3d 3.6s cubic-bezier(.34,1.3,.64,1) infinite}
/* 3D: 離れている間にマーク全体が奥行きを持って1回転（縦軸回り＋少し傾き） */
@keyframes band-spin3d{0%,8%{transform:rotateX(0) rotateY(0)}30%{transform:rotateX(18deg) rotateY(-200deg)}46%{transform:rotateX(22deg) rotateY(-360deg)}72%{transform:rotateX(-4deg) rotateY(-368deg)}84%,100%{transform:rotateX(0) rotateY(-360deg)}}
/* 透かしは繰り返し「離れて→組み合う」: 黄は左上へ、橙は右下へ大きく開いて戻る */
/* きびきび: 3.6秒周期・バネのような戻り（行き過ぎて収まる）・止まる時間は短く */
.band-mark .mk-y{transform-origin:100px 100px;animation:band-mk-y 3.6s cubic-bezier(.34,1.45,.64,1) infinite}
.band-mark .mk-o{transform-origin:216px 216px;animation:band-mk-o 3.6s cubic-bezier(.34,1.45,.64,1) infinite}
/* 離れながら素早く1回転し、戻りながら元の向きにカチッと収まる */
@keyframes band-mk-y{0%,8%{transform:none}30%{transform:translate(-110px,-85px) rotate(-24deg)}46%{transform:translate(-110px,-85px) rotate(-24deg)}72%{transform:translate(6px,5px) rotate(2deg)}84%,100%{transform:none}}
@keyframes band-mk-o{0%,8%{transform:none}30%{transform:translate(110px,85px) rotate(24deg)}46%{transform:translate(110px,85px) rotate(24deg)}72%{transform:translate(-6px,-5px) rotate(-2deg)}84%,100%{transform:none}}
.band .in{position:relative;z-index:1}
.band .eyebrow{display:flex;width:fit-content;align-items:center;gap:10px;margin-bottom:8px}
.band .eyebrow:before{content:"";width:22px;height:2px;background:var(--acc);border-radius:2px}
.band h1{position:relative;display:block;width:fit-content;font-size:clamp(24px,3vw,34px);letter-spacing:.06em;animation:band-up .7s cubic-bezier(.2,.8,.2,1) both}
/* 見出し下のひと筆＝流れ星: 右から「シャーッ」と飛んできて見出しの下に止まり、数秒おきにまた流れる */
.band h1:after{content:"";display:block;width:calc(100% + 1.6em);height:3px;margin-top:8px;border-radius:999px;position:relative;
  background:linear-gradient(90deg,#ffd500,#f5a300 45%,#e8700f);transform-origin:right center;
  animation:band-star 6s cubic-bezier(.16,.9,.3,1) .2s infinite both}
/* 右端で薄く現れ、左へ流れながらだんだん濃くなって止まる */
@keyframes band-star{
  0%{transform:translateX(520px) skewX(-14deg) scaleX(2.6);opacity:.08;box-shadow:0 0 0 rgba(255,200,60,0)}
  5%{opacity:.3;box-shadow:0 0 10px rgba(255,200,60,.25)}
  9%{opacity:.65;box-shadow:0 0 22px rgba(255,200,60,.7),0 0 46px rgba(255,170,40,.35)}
  13%{transform:translateX(-6px) skewX(-14deg) scaleX(1);opacity:1;box-shadow:0 0 14px rgba(255,200,60,.6)}
  17%{transform:translateX(0) skewX(-14deg) scaleX(1);box-shadow:0 0 0 rgba(255,200,60,0)}
  100%{transform:translateX(0) skewX(-14deg) scaleX(1);opacity:1;box-shadow:0 0 0 rgba(255,200,60,0)}}
.band .crumb{display:none;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin-top:10px;background:rgba(255,255,255,.72);padding:5px 12px;border-radius:999px;border:1px solid rgba(224,118,26,.18)}
.band .crumb a{color:var(--acc-dk)}
@keyframes band-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes band-sun{from{transform:translate(0,0)}to{transform:translate(-60px,40px)}}
@keyframes band-float{from{transform:translate(0,-10px) rotate(-14deg)}to{transform:translate(-70px,10px) rotate(6deg)}}
@media (max-width:860px){.band{padding-block:26px 20px}.band-mark{width:120px;height:120px;margin-top:-60px;right:-14px;opacity:.11}}
@media (prefers-reduced-motion:reduce){.band:before,.band h1,.band h1:after,.band-mark,.band-mark .mark,.band-mark .mk-y,.band-mark .mk-o{animation:none}}
.prose{max-width:46em}
.prose h2{font-size:22px;margin:44px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--acc2)}
.prose h3{font-size:17px;margin:28px 0 8px;font-family:var(--fb);font-weight:700}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:1.4em}
.prose li{margin-bottom:6px}
/* 箇条の字下げ（プライバシーポリシー）: （１）は2行目以降を1字下げ、「ア　…」は「１」の真下から始めて2行目以降をさらに1字下げ */
.prose .pl{display:block}
.prose .pl-n{padding-left:1em;text-indent:-1em}
.prose .pl-k{margin-left:1em;padding-left:1em;text-indent:-1em}
.prose .note{font-size:13.5px;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:14px 0}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;margin-bottom:18px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.prose th{width:34%;color:var(--mute);font-weight:500;background:#fff}
.tablewrap{overflow-x:auto}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{position:relative;padding:18px 0 18px 64px;border-bottom:1px solid var(--line);counter-increment:s}
.steps li:before{content:counter(s);position:absolute;left:0;top:16px;width:44px;height:44px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:20px}
.steps b{display:block;font-size:16.5px;margin-bottom:4px}
.steps p{font-size:14.5px;color:#4b453d}
/* トップの「ご依頼の流れ」入口: 4段階を横並びに */
/* ===== ご依頼の流れ（トップ・2026-09-18 確定＝案4「1枚の白いパネル」）=====
   縦に1→4。1本の線が番号1の上から始まり4つの番号を貫いて下へ抜け、下端に矢じり1つ。線は太め（4px・先生指示）。文字は明朝 */
.flw{position:relative;overflow:clip;background:linear-gradient(180deg,#fff3e0 0%,#fff6e6 60%,#fffaf0 100%)}
.flw:before{content:"";position:absolute;right:-160px;top:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,120,.5) 0%,rgba(255,226,120,.16) 45%,rgba(255,226,120,0) 70%);pointer-events:none}
.flw:after{content:"";position:absolute;left:-140px;bottom:-200px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(245,163,0,.16) 0%,rgba(245,163,0,0) 68%);pointer-events:none}
.flw .in{position:relative;z-index:1}
/* 見出しとパネルの間の1文（先生 2026-09-18）。パネルの左端にそろえる */
.flw .hx{margin-bottom:0}
.flw-lead{max-width:780px;margin:12px auto 0;padding-left:6px;font-family:"Zen Old Mincho",var(--fh);font-weight:700;font-size:18px;letter-spacing:.1em;line-height:1.8;color:#3a3228}
.flw-panel{max-width:780px;margin:12px auto 0;background:#fff;border-radius:22px;padding:38px 48px;box-shadow:0 14px 40px rgba(120,70,10,.08);border:1px solid rgba(232,112,15,.12)}
.flw-panel.reveal{transform:none}
.flw-row{--d:56px;--gap:30px;--lw:4px;--t0:-20px;--b0:-28px;list-style:none;margin:20px 0 32px;padding:0;position:relative;display:flex;flex-direction:column;gap:var(--gap)}
/* 貫く線と、その上を走る光の点 */
/* 線と矢じりは1つの要素（矢じりは下端に固定）。見えたら高さ0から伸びる＝矢印が上から下へ伸びていく（先生 2026-09-18）。伸びきった後は先端が小さく上下する */
.flw-row:before{content:"";position:absolute;z-index:1;left:calc(var(--d)/2 - var(--aw)/2);top:var(--t0);width:var(--aw);height:0;--aw:20px;--ah:16px;--full:calc(100% - var(--t0) - var(--b0) + 6px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 0h20L10 16z' fill='%23e8700f'/%3E%3C/svg%3E") center bottom/var(--aw) var(--ah) no-repeat,linear-gradient(180deg,#ffd500,#f5a300 45%,#e8700f) center top/var(--lw) calc(100% - var(--ah) + 3px) no-repeat}
.is-in .flw-row:before{animation:flw-line 1.7s cubic-bezier(.45,.05,.55,.95) .2s forwards,flw-arw 1.8s ease-in-out 2.1s infinite}
@keyframes flw-line{from{height:0}to{height:var(--full)}}
.flw-row:after{content:"";position:absolute;left:calc(var(--d)/2 - 7px);top:var(--t0);width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid #e8700f;box-shadow:0 0 0 4px rgba(245,163,0,.2),0 0 14px rgba(255,190,60,.85);opacity:0;z-index:3}
.is-in .flw-row:after{animation:flw-dot 7s ease-in-out 2.3s infinite}
@keyframes flw-dot{0%{top:var(--t0);opacity:0}3%{opacity:1}29%{top:calc(100% - var(--b0) - 18px);opacity:1}33%,100%{top:calc(100% - var(--b0) - 18px);opacity:0}}
.flw-s{position:relative;display:flex;align-items:center;gap:26px;min-height:var(--d)}
/* 下端の矢じり（1つだけ） */
@keyframes flw-arw{0%,100%{height:var(--full)}50%{height:calc(var(--full) + 5px)}}
/* 番号: 橙の塗り＋白い数字（明朝）。白い縁で線から浮かせる */
.flw-n{position:relative;z-index:2;flex:none;width:var(--d);height:var(--d);border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5a300,#e8700f);color:#fff;
  font-family:"Zen Old Mincho",var(--fh);font-weight:700;font-size:calc(var(--d)*.44);line-height:1;padding-bottom:2px;box-shadow:0 0 0 5px #fff;scale:0;transition:box-shadow .3s}
.is-in .flw-n{animation:flw-pop .6s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--i)*.42s + .3s)}
@keyframes flw-pop{from{scale:0}to{scale:1}}
.flw-s:hover .flw-n{box-shadow:0 0 0 5px #fff,0 8px 18px rgba(232,112,15,.45)}
/* 内容: 丸に入れた大きめのピクトグラム＋明朝太字の見出し＋短い説明文。段の間は薄いけい線 */
.flw-c{flex:1;min-width:0;display:flex;align-items:center;gap:24px;padding:16px 4px 16px 0;border-bottom:1px solid #f1e6d2;opacity:0;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.flw-s:last-child .flw-c{border-bottom:0}
.is-in .flw-c{animation:flw-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.42s + .5s)}
@keyframes flw-in{from{opacity:0;translate:22px 0}to{opacity:1;translate:0 0}}
.flw-s:hover .flw-c{translate:6px 0}
.flw-p{flex:none;width:92px;height:92px;border-radius:24px;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#fffdf0 0%,#fff1c4 70%,#ffe9a8 100%);box-shadow:inset 0 0 0 1px rgba(245,163,0,.22),0 8px 20px rgba(232,112,15,.12);transition:box-shadow .35s,scale .45s cubic-bezier(.34,1.4,.64,1)}
.flw-p .pg{width:58px;height:58px;stroke-width:1.9;stroke:#e8700f}
.flw-p .pg .fillbg{fill:#fff4d0}
.flw-s:hover .flw-p{scale:1.08;box-shadow:inset 0 0 0 2px rgba(232,112,15,.5),0 12px 26px rgba(232,112,15,.24)}
.flw-s:hover .pg{scale:1}
.flw-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.flw-t{font-family:"Zen Old Mincho",var(--fh);color:#2a241c;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.flw-t .m{font-size:23px;font-weight:900;letter-spacing:.1em}
.flw-t .s{font-size:15.5px;font-weight:700;letter-spacing:.05em;color:#6a5f50;margin-left:.1em}
.flw-d{font-size:14.5px;line-height:1.75;color:#5f574b;letter-spacing:.02em}
.flw-more{margin-top:40px;text-align:center}
@media (max-width:640px){
  .flw-lead{font-size:15.5px;margin-top:10px;letter-spacing:.06em}
  .flw-panel{padding:24px 18px;border-radius:18px;margin-top:14px}
  .flw-row{--d:46px;--gap:26px;--t0:-16px;--b0:-24px;margin:16px 0 28px}
  .flw-s{gap:12px;align-items:flex-start}.flw-n{margin-top:14px}.flw-c{gap:12px;align-items:flex-start;padding:12px 0 14px}
  .flw-p{width:58px;height:58px;border-radius:16px}.flw-p .pg{width:36px;height:36px}
  .flw-t .m{font-size:17.5px;letter-spacing:.06em}.flw-t .s{display:block;font-size:12.5px;margin-left:-.5em}
  .flw-d{font-size:13px;line-height:1.65}
  .flw-row:before{--aw:16px;--ah:13px}
}
@media (prefers-reduced-motion:reduce){.flw-row:before{height:var(--full)!important;animation:none!important}.flw-row:after{display:none}.flw-n{scale:1!important;animation:none!important}.flw-c{opacity:1!important;animation:none!important}}
/* ===== アクセス（トップ・2026-09-18 確定ベース＝案5「橙の面と地図を1枚に」）=====
   左＝黄→橙の面に白抜き文字、右＝地図。すき間なく1枚の角丸にまとめる。文言は現サイトのまま */
.acx{position:relative;overflow:clip}
.acx .hx{margin-bottom:0}
.acx-blk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);margin-top:42px;border-radius:26px;overflow:hidden;box-shadow:0 22px 56px rgba(200,90,10,.24)}
.acx-card{position:relative;overflow:hidden;padding:24px 44px 40px;background:linear-gradient(145deg,#f7ab08 0%,#ee8a0c 50%,#e36b10 100%);color:#fff}
.acx-card:before{content:"";position:absolute;right:-120px;top:-140px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,240,170,.5) 0%,rgba(255,240,170,0) 68%);animation:acx-glow 9s ease-in-out infinite;pointer-events:none}
@keyframes acx-glow{0%,100%{translate:0 0;scale:1}50%{translate:-30px 40px;scale:1.15}}
.acx-card>*{position:relative}
.acx-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#fff;box-shadow:0 8px 18px rgba(120,50,0,.2)}
.acx-ic.s{width:38px;height:38px;border-radius:12px;box-shadow:0 5px 12px rgba(120,50,0,.16)}
.ax-i{width:28px;height:28px;fill:none;stroke:#e8700f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acx-ic.s .ax-i{width:21px;height:21px}
.ax-pin{animation:ax-pin 4.5s ease-in-out infinite}
@keyframes ax-pin{0%,78%,100%{translate:0 0}88%{translate:0 -2px}}
.ax-tel{animation:ax-tel 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ax-tel{0%,70%,100%{rotate:0deg}76%{rotate:-9deg}82%{rotate:8deg}88%{rotate:-5deg}94%{rotate:0deg}}
/* アイコンの札にカーソルを乗せたときの動き（先生 2026-09-18）。札そのもの、またはその行（見出し・受付の案内・駅の行）に乗せると反応する */
.acx-ic{overflow:hidden;transition:scale .45s cubic-bezier(.34,1.6,.64,1),rotate .45s cubic-bezier(.34,1.6,.64,1),box-shadow .35s}
.acx-ic:hover,.acx-note:hover .acx-ic,.acx-st li:hover .acx-ic{scale:1.16;rotate:-7deg;box-shadow:0 0 0 5px rgba(255,255,255,.34),0 14px 24px rgba(120,50,0,.32)}
.acx-h .acx-ic:hover,.acx-h:hover .acx-ic{scale:1.07;rotate:-3deg;box-shadow:0 0 0 4px rgba(255,255,255,.3),0 10px 20px rgba(120,50,0,.26)}
.acx-ic:hover .ax-pin,.acx-h:hover .ax-pin{animation:ax-pin-h 1.1s ease-in-out infinite}
@keyframes ax-pin-h{0%,100%{translate:0 0}50%{translate:0 -3px}}
.acx-ic:hover .ax-tel,.acx-note:hover .ax-tel{animation:ax-tel-h .42s ease-in-out infinite}
@keyframes ax-tel-h{0%,100%{rotate:0deg;scale:1.08}25%{rotate:-13deg;scale:1.08}75%{rotate:13deg;scale:1.08}}
.acx-ic:hover .ax-trn,.acx-st li:hover .ax-trn{animation:ax-trn-h 1.4s ease-in-out infinite}
@keyframes ax-trn-h{0%,100%{translate:-2.5px 0}50%{translate:2.5px 0}}
.acx-st .acx-ic:hover,.acx-st li:hover .acx-ic{scale:1.07;rotate:-3deg;box-shadow:0 0 0 4px rgba(255,255,255,.3),0 8px 16px rgba(120,50,0,.24)}
.acx-h{display:flex;align-items:center;gap:16px;margin:0;font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:24px;letter-spacing:.16em;color:#fff;text-shadow:0 1px 8px rgba(120,50,0,.25)}
.acx-addr{margin:14px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-family:var(--fb);color:#fff;text-shadow:0 1px 8px rgba(120,50,0,.22)}
.acx-addr .zip{display:block;margin-bottom:1px;font-size:14.5px;font-weight:700;letter-spacing:.12em;line-height:1.3;font-variant-numeric:tabular-nums;opacity:.95}
/* 住所2行は郵便番号より1文字分下げる（先生 2026-09-18） */
.acx-addr .a1,.acx-addr .a2{margin-left:0}
.acx-addr .a1{font-size:20px;font-weight:700;letter-spacing:.05em;line-height:1.35}
.acx-addr .a2{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.7em;font-size:16.5px;font-weight:700;letter-spacing:.04em;line-height:1.45}
.acx-addr .a2 small{margin-left:0;padding-left:.7em;border-left:1px solid rgba(255,255,255,.55);font-size:13px;font-weight:500;letter-spacing:.06em;opacity:.92;white-space:nowrap}
.acx-note{display:flex;align-items:center;gap:14px;margin:16px 0 0;padding:11px 16px;border-radius:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);font-size:14.5px;line-height:1.65;color:#fff}
.acx-note b{font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(255,236,160,.9);text-underline-offset:4px;text-decoration-thickness:2px}
.acx-st{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.acx-st li{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.34);transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.acx-st li:first-child{border-top:1px solid rgba(255,255,255,.34)}
.acx-blk.is-in .acx-st li{animation:acx-li .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.18s + .45s)}
@keyframes acx-li{from{opacity:0;translate:18px 0}to{opacity:1;translate:0 0}}
.acx-st li:hover{translate:5px 0}
.acx-st .t{font-size:15.5px;line-height:1.7;color:#fff;letter-spacing:.02em}
.acx-st .t b{display:inline-block;margin-left:6px;padding:2px 12px;border-radius:999px;background:#fff;color:#d9650d;font-weight:700;font-size:13.5px;letter-spacing:.06em;white-space:nowrap;vertical-align:1px}
.acx-btn{margin-top:24px}
/* 経路ボタン（先生 2026-09-18「もっとおしゃれにかっこよく、目立つように」→ 5案〔_keiro_btn_src.py〕から案4「切符」）:
   切り欠きと点線のミシン目のある切符の形。左の半券に電車（小さく揺れる）、右に矢印（前へ進む）。カーソルで少し傾いて浮く */
.acx-tk{--n:9px;position:relative;display:inline-flex;align-items:stretch;color:#c2590a;text-decoration:none;font-weight:600;font-size:17px;letter-spacing:.07em;line-height:1.35;
  filter:drop-shadow(0 2px 0 #ead5a6) drop-shadow(0 14px 16px rgba(100,40,0,.36));transition:translate .3s cubic-bezier(.2,.8,.2,1),filter .3s}
.acx-tk>span{background:linear-gradient(180deg,#fffef9 0%,#fff6e2 100%);display:flex;align-items:center}
.acx-tk .stub{padding:14px 18px 14px 20px;border-radius:14px 0 0 14px;border-right:2px dashed rgba(232,112,15,.45);
  -webkit-mask:radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.acx-tk .stub .ax-i{width:30px;height:30px;animation:acx-tr 2.4s ease-in-out infinite}
@keyframes acx-tr{0%,100%{translate:0 0}25%{translate:-1.5px 0}75%{translate:1.5px 0}}
.acx-tk .tx{padding:14px 8px 14px 22px;word-break:keep-all;
  -webkit-mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.acx-tk .go{padding:0 18px 0 8px;border-radius:0 14px 14px 0;margin-left:-1px}
.acx-tk .go svg{width:24px;height:24px;fill:none;stroke:#e8700f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:acx-nudge 1.6s ease-in-out infinite}
@keyframes acx-nudge{0%,100%{translate:-2px 0}50%{translate:3px 0}}
/* 改札に通す（先生 2026-09-18・_kippu_src.py の案E で確定）: 右に改札機の投入口。数秒ごとに切符が差し込まれかけ、カーソルでスッと入って緑のランプが灯る */
.acx-gt{position:relative;display:inline-flex;align-items:center;padding-right:30px;max-width:100%}
.acx-gt .clip{display:inline-block;padding:24px 0 24px 24px;margin:-24px 0 -24px -24px;clip-path:inset(0 0 0 0)}
.acx-gt .acx-tk{animation:acx-ins 4s cubic-bezier(.5,0,.3,1) infinite;transition:translate .5s cubic-bezier(.5,0,.3,1)}
@keyframes acx-ins{0%,58%,100%{translate:0 0}70%{translate:12px 0}76%{translate:8px 0}84%{translate:12px 0}94%{translate:0 0}}
.acx-gt .gate{position:absolute;right:0;top:-10px;bottom:-10px;width:34px;border-radius:10px;background:linear-gradient(90deg,#3a2410 0%,#5a3a1c 45%,#2e1a08 100%);box-shadow:inset 3px 0 6px rgba(0,0,0,.5),0 10px 18px rgba(80,30,0,.4);pointer-events:none}
.acx-gt .gate:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:7px;border-radius:0 4px 4px 0;background:#140a02;box-shadow:inset 2px 0 3px rgba(0,0,0,.8)}
.acx-gt .gate i{position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;background:#7a5a36;transition:background .3s,box-shadow .3s}
.acx-gt:hover .acx-tk,.acx-gt .acx-tk:focus-visible{animation:none;translate:30px 0}
.acx-gt:hover .gate i,.acx-gt:focus-within .gate i{background:#8dff9f;box-shadow:0 0 10px 3px rgba(141,255,159,.8)}
.acx-tk:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:14px}
/* 右＝現サイトの案内図（solana_map.jpg・切らずに全体を収める・動きなし）、その下に Google マップを全幅で（先生 2026-09-18「案内図の下にグーグルマップも。切り替えではなく」） */
.acx-map{display:flex;align-items:center;justify-content:center;padding:16px;background:#fffdf8;container-type:size;min-height:430px}
/* 案内図の角丸は画像の中で枠そのものを曲げてある（_map_round_corners.py・半径56px）。
   ここは影とクリップを同じ弧にそろえるためだけの指定で、**必ず％**で書く（px だと表示幅が変わったとき
   画像側の丸みとずれて、また四隅が欠けて見える）。56/1500 と 56/1320（先生 2026-09-19） */
.acx-ill{flex:none;width:min(100cqw,calc(100cqh*1500/1320));aspect-ratio:1500/1320;border-radius:3.7333% / 4.2424%;overflow:hidden;box-shadow:0 10px 26px rgba(120,70,10,.16)}
.acx-ill img{display:block;width:100%;height:100%;object-fit:cover}
.acx-ill{position:relative}
/* 事務所の星（SVG）。当たり判定は回さない外側の枠、回るのは中の svg */
.acx-star{position:absolute;left:65.933%;top:80.455%;width:8%;aspect-ratio:1;translate:-50% -50%;cursor:pointer}
.acx-star svg{display:block;width:100%;height:100%;overflow:visible;fill:#ed7101;transition:rotate .9s cubic-bezier(.3,.8,.2,1),scale .45s cubic-bezier(.34,1.5,.64,1),filter .3s}
.acx-star:hover svg{rotate:360deg;scale:1.18;filter:drop-shadow(0 3px 6px rgba(200,80,0,.45))}
.acx-gmap{grid-column:1/-1;display:flex;height:340px;background:#eee;border-top:4px solid #fff}
.acx-gmap .map{flex:1;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0}
@media (min-width:901px){
  .acx-card{padding-inline:34px}
  .acx-tk{font-size:15px;letter-spacing:.03em}.acx-tk .stub{padding:12px 13px 12px 15px}.acx-tk .tx{padding:12px 6px 12px 16px}.acx-tk .go{padding:0 13px 0 6px}
}
@media (max-width:900px){
  .acx-blk{grid-template-columns:1fr}
  .acx-map{min-height:0;container-type:normal;padding:12px}.acx-ill{width:100%}
  .acx-gmap{height:auto;aspect-ratio:16/10}
}
@media (max-width:640px){
  .acx-blk{border-radius:20px;margin-top:36px}
  .acx-card{padding:24px 18px 32px}
  .acx-h{font-size:21px;gap:12px}.acx-ic{width:44px;height:44px;border-radius:14px}
  /* 町名番地は狭い画面でも必ず1行に収める（「-25」だけ次の行に落ちるのを防ぐ・先生 2026-09-18） */
  .acx-addr .a1{font-size:clamp(14.5px,3.95vw,18px);letter-spacing:.01em;white-space:nowrap}
  /* 狭い画面では「（受付１階）」を独立した行に。縦線は使わず、他の行と左端をそろえる
     （括弧は字面が右に寄っているので -.5em ぶら下げて見た目をそろえる。先生 2026-09-18） */
  .acx-addr .a2{display:block;font-size:14px}
  .acx-addr .a2 small{display:block;margin:3px 0 0 -.5em;padding-left:0;border-left:0;font-size:13px;opacity:.9}
  .acx-addr .zip{font-size:13px}.acx-note{font-size:13.5px;padding:14px}
  .acx-st .t{font-size:14.5px}.acx-st .t b{margin-left:4px}
  .acx-gt{display:flex;width:100%;padding-right:26px}.acx-gt .clip{flex:1;min-width:0}.acx-gt .gate{width:30px}
  .acx-tk{display:flex;width:100%;font-size:13.5px;letter-spacing:0}.acx-tk .tx{flex:1;padding:12px 4px 12px 12px}.acx-tk .stub{padding:12px 9px 12px 11px}.acx-tk .stub .ax-i{width:24px;height:24px}.acx-tk .go{padding:0 12px 0 4px}.acx-tk .go svg{width:20px;height:20px}
  .acx-gmap{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.acx-star svg{transition:none}.acx-card:before,.ax-pin,.ax-tel,.ax-trn,.acx-gt .acx-tk,.acx-tk .stub .ax-i,.acx-tk .go svg{animation:none!important}.acx-st li{animation:none!important}}

/* ピクトグラム（線画）: 受話器が鳴る・吹き出しがふくらむ・署名が書かれる・天秤が揺れる */
.pg{width:48px;height:48px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:scale .45s cubic-bezier(.34,1.4,.64,1)}
.pg .fillbg{fill:#fff;stroke:none}
.pg1 .tel{transform-box:fill-box;transform-origin:center;animation:pg-ring 3.2s ease-in-out infinite}
@keyframes pg-ring{0%,60%,100%{rotate:0deg}66%{rotate:-14deg}72%{rotate:12deg}78%{rotate:-9deg}84%{rotate:6deg}90%{rotate:0deg}}
.pg1 .env{animation:pg-bob 3.2s ease-in-out infinite}
@keyframes pg-bob{0%,100%{translate:0 0}50%{translate:0 -1.6px}}
.pg2 .bub{transform-box:fill-box;transform-origin:30% 100%;animation:pg-bub 2.8s ease-in-out infinite}
@keyframes pg-bub{0%,100%{scale:1}45%{scale:1.12}}
.pg2 .dots{stroke-width:3;animation:pg-dots 1.4s steps(1) infinite}
@keyframes pg-dots{0%{stroke-dasharray:0 5 0 100}33%{stroke-dasharray:0 0 .01 100}66%{stroke-dasharray:.01 100}}
.pg3 .sig{stroke-dasharray:1;stroke-dashoffset:1;animation:pg-sig 3.4s ease-in-out infinite}
@keyframes pg-sig{0%,10%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
.pg3 .pen{animation:pg-pen 3.4s ease-in-out infinite}
@keyframes pg-pen{0%,10%{translate:-14px 2px}55%,100%{translate:0 0}}
.pg4 .sw{transform-box:view-box;transform-origin:24px 13px;animation:pg-sway 3.6s ease-in-out infinite}
@keyframes pg-sway{0%,100%{rotate:-7deg}50%{rotate:7deg}}
@media (prefers-reduced-motion:reduce){.pg *{animation:none!important}.pg3 .sig{stroke-dashoffset:0}}
.flow4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.flow4 div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 16px;text-align:center}
.flow4 i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--acc);color:#fff;font-family:var(--fh);font-style:normal;font-size:20px;margin:0 auto 10px}
.flow4 b{font-size:14.5px;font-weight:700}
@media (max-width:860px){.flow4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.route{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;counter-reset:r}
.route figure{margin:0;counter-increment:r}
.route img{border-radius:8px;aspect-ratio:3/2;object-fit:cover;width:100%}
.route figcaption{font-size:14px;margin-top:8px}
.route figcaption:before{content:counter(r) "　";color:var(--acc);font-weight:700}
.map{aspect-ratio:16/9;width:100%;border:0;border-radius:8px}
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svc .card h3{margin-top:8px}
form .row{margin-bottom:18px}
form label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
form label i{font-style:normal;color:var(--acc);font-size:12px;margin-left:6px}
form input,form textarea,form select{width:100%;font:inherit;padding:11px 12px;border:1px solid #d9d0c0;border-radius:6px;background:#fff}
form input:focus,form textarea:focus{outline:2px solid var(--acc2);outline-offset:1px;border-color:var(--acc)}
form textarea{min-height:180px}
form .agree{font-size:14px;display:flex;gap:8px;align-items:flex-start}
form .agree input{width:auto;margin-top:5px}
.article-meta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--mute);margin-bottom:28px}
.article-body{max-width:44em}
.article-body h2{font-size:21px;margin:40px 0 12px;padding-left:14px;border-left:4px solid var(--acc)}
.article-body h3{font-size:17px;margin:28px 0 8px;font-family:var(--fb);font-weight:700}
.article-body p{margin-bottom:16px}
.article-body ul,.article-body ol{margin:0 0 16px;padding-left:1.4em}
.article-body blockquote{margin:0 0 16px;padding:12px 16px;background:var(--alt);border-radius:8px;color:#4b453d;font-size:14.5px}
.disclaimer{font-size:13px;color:var(--mute);border-top:1px solid var(--line);padding-top:14px;margin-top:36px}
.ctabox{background:var(--alt);border-radius:8px;padding:28px 24px;margin-top:40px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.ctabox b{font-family:var(--fh);font-size:19px;font-weight:600}
.ctabox small{display:block;color:var(--mute);font-size:13px;margin-top:4px}

/* footer */
/* ===== フッター（2026-09-18）: 黒地に金。上辺に金の細線（光がゆっくり流れる）・左に事務所の表示、右に明朝のメニュー、中央に金のロゴの飾り ===== */
.ft{--gd:#c9a557;--gd-l:#ecd9a4;--gd-d:#8f6f2c;position:relative;overflow:clip;color:#e9e3d6;padding-block:24px 12px;
  background:radial-gradient(ellipse 60% 70% at 12% 0%,rgba(201,165,87,.13) 0%,rgba(201,165,87,0) 60%),radial-gradient(ellipse 50% 60% at 100% 100%,rgba(201,165,87,.08) 0%,rgba(201,165,87,0) 60%),linear-gradient(180deg,#17130e 0%,#0d0b08 100%)}
.ft:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gd-d) 0%,var(--gd) 20%,#fff3c9 50%,var(--gd) 80%,var(--gd-d) 100%);background-size:200% 100%;animation:ft-shine 7s linear infinite}
@keyframes ft-shine{from{background-position:100% 0}to{background-position:-100% 0}}
.ft .in{position:relative}
.ft-main{display:block}
/* 天地を抑えた組み方（先生 2026-09-18「3分の1くらいで」）: 1段目＝ロゴ｜住所・TEL・FAX、2段目＝メニュー、3段目＝プライバシーポリシー ― 金の飾り ― © */
.ft-id{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:34px;align-items:center}
.ft-id .ft-logo{grid-column:1;grid-row:1/3}
.ft-id .ft-addr{grid-column:2;grid-row:1}
.ft-id .ft-tel{grid-column:2;grid-row:2}
.ft-id .ft-rule{grid-column:1/-1;grid-row:3;max-width:none}
/* ロゴ＝金のマーク（下の飾りと同じ）＋白抜きの文字（先生 2026-09-18）。マークはふだん静止、カーソルで2つの四角が一度離れて寄る */
.ft-logo{display:inline-flex;align-items:center;gap:13px;text-decoration:none;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.ft-logo img{display:block;height:23px;width:auto;filter:brightness(0) invert(1)}
.ft-logo .ft-mk{width:40px;height:40px}
.ft-logo .ft-mk .a,.ft-logo .ft-mk .b{animation:none}
.ft-logo:hover{translate:0 -2px}
.ft-logo:hover .ft-mk .a{animation:ft-mk-a 1.2s cubic-bezier(.34,1.45,.64,1) 1}
.ft-logo:hover .ft-mk .b{animation:ft-mk-b 1.2s cubic-bezier(.34,1.45,.64,1) 1}
.ft-rule{margin:12px 0 0;height:1px;width:100%;max-width:420px;background:linear-gradient(90deg,var(--gd) 0%,rgba(201,165,87,.35) 55%,rgba(201,165,87,0) 100%);position:relative}
.ft-rule i{position:absolute;left:0;top:-3px;width:7px;height:7px;rotate:45deg;background:var(--gd-l);box-shadow:0 0 10px rgba(236,217,164,.7)}
.ft-addr{font-style:normal;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:0 14px;font-size:14.5px;line-height:1.65;letter-spacing:.06em;color:#e9e3d6}
.ft-addr .a1,.ft-addr .a2{grid-column:2}
/* 「（受付１階）」は途中で切らず、入りきらない幅では行ごと次の行へ送る。
   大きさ・色は「（営業時間：…）」（.ft-tel small）と同じ注記の調子にそろえる（先生 2026-09-18） */
.ft-addr .a2 .rc{white-space:nowrap;font-size:12.5px;letter-spacing:.04em;color:#b9b09e}
.ft-addr .zip{grid-column:1;grid-row:1;font-size:13px;letter-spacing:.16em;color:var(--gd-l);font-variant-numeric:tabular-nums}
.ft-tel{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:0 30px}
.ft-tel>div{display:flex;align-items:baseline;gap:12px}
.ft-tel dt{flex:none;font-family:"Zen Old Mincho",var(--fh);font-weight:700;font-size:12.5px;letter-spacing:.22em;color:var(--gd)}
.ft-tel dd{margin:0;font-size:16px;font-weight:500;letter-spacing:.1em;color:#fff;font-variant-numeric:tabular-nums}
.ft-tel dd a{color:#fff;text-decoration:none;background:linear-gradient(var(--gd-l),var(--gd-l)) left bottom/0 1px no-repeat;transition:background-size .4s cubic-bezier(.2,.8,.2,1),color .3s}
.ft-tel dd a:hover{color:var(--gd-l);background-size:100% 1px}
.ft-tel small{display:inline;margin:0 0 0 8px;font-size:12.5px;letter-spacing:.04em;color:#b9b09e}
.ft-nav ul{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,auto);justify-content:space-between;gap:0 18px;border-bottom:1px solid rgba(201,165,87,.2)}
.ft-nav a{display:flex;align-items:center;gap:10px;padding:9px 2px;color:#f1ece0;text-decoration:none;font-family:"Zen Old Mincho",var(--fh);font-weight:700;font-size:14.5px;letter-spacing:.12em;white-space:nowrap;transition:color .3s,translate .35s cubic-bezier(.2,.8,.2,1)}
.ft-nav a i{flex:none;width:7px;height:7px;rotate:45deg;border:1px solid var(--gd);transition:background .3s,rotate .5s cubic-bezier(.34,1.5,.64,1),box-shadow .3s}
.ft-nav a:hover{color:var(--gd-l);translate:3px 0}
.ft-nav a:hover i{background:var(--gd-l);rotate:225deg;box-shadow:0 0 10px rgba(236,217,164,.75)}
.ft-orn{display:flex;align-items:center;gap:18px;margin:12px 210px -22px}
.ft-orn span{flex:1;height:1px;background:linear-gradient(90deg,rgba(201,165,87,0),rgba(201,165,87,.55))}
.ft-orn span:last-child{background:linear-gradient(90deg,rgba(201,165,87,.55),rgba(201,165,87,0))}
.ft-mk{width:24px;height:24px;flex:none;filter:drop-shadow(0 0 8px rgba(236,217,164,.35))}
.ft-mk .a{fill:var(--gd-l);animation:ft-mk-a 9s ease-in-out infinite}.ft-mk .b{fill:var(--gd);animation:ft-mk-b 9s ease-in-out infinite}
@keyframes ft-mk-a{0%,100%{translate:0 0}50%{translate:-10px -10px}}
@keyframes ft-mk-b{0%,100%{translate:0 0}50%{translate:10px 10px}}
.ft-btm{position:relative;min-height:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;letter-spacing:.1em;color:#a59c8a}
.ft-btm a{color:#cfc7b6;text-decoration:none;background:linear-gradient(var(--gd),var(--gd)) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .4s cubic-bezier(.2,.8,.2,1),color .3s}
.ft-btm a:hover{color:var(--gd-l);background-size:100% 1px}
.ft-btm .cp{font-family:"Zen Old Mincho",var(--fh);letter-spacing:.14em}
.ft a:focus-visible{outline:2px solid var(--gd-l);outline-offset:4px;border-radius:2px}
@media (max-width:1040px){
  .ft-nav ul{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:0 16px}
  .ft-nav a{letter-spacing:.08em;padding:6px 2px}
  .ft-id{column-gap:26px}
}
@media (max-width:620px){
  .ft{padding-block:26px 14px}
  .ft-id{display:block}.ft-rule{margin:12px 0 10px}
  .ft-logo img{height:20px}.ft-logo .ft-mk{width:35px;height:35px}
  .ft-addr{font-size:13.5px}.ft-addr .a1{white-space:nowrap;letter-spacing:.02em}.ft-tel dd{font-size:16px}
  /* 狭い画面では（営業時間…）を電話番号の下の行へ。番号と左端をそろえる（先生 2026-09-18） */
  .ft-tel small{display:block;margin:3px 0 0;white-space:nowrap}
  .ft-tel{gap:6px 30px}
  .ft-nav ul{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(201,165,87,.2);margin-top:12px}
  .ft-nav a{font-size:14px;padding:7px 2px}
  .ft-orn{margin:14px 0 8px}
  .ft-btm{gap:4px 16px}
}
@media (prefers-reduced-motion:reduce){.ft:before,.ft-mk .a,.ft-mk .b{animation:none!important}}

@media (max-width:1520px){
  /* メニューが電話・ボタンと収まらない幅ではハンバーガーに切り替える */
  .hd nav{flex:none;position:fixed;inset:84px 0 auto 0;background:var(--ground);border-bottom:1px solid var(--line);display:none;padding:12px 20px 20px}
  .hd nav ul{flex-direction:column;gap:0;white-space:normal}
  .hd nav li{border-bottom:1px solid var(--line)}
  .hd nav a{display:block;padding:14px 4px;font-size:15px}
  .menu-toggle:checked ~ nav{display:block}
  .menu-btn{display:flex}
  .hd .acts{margin-left:auto;margin-right:2px}
}
@media (max-width:860px){
  .hd .logo{gap:12px}
  .hd .logo .wm{height:23px}
  .hd .logo .wm-en{height:10.5px}
  .hd .logo .wms{gap:4px;margin-top:2px}
  .hd .logo .mark{width:42px;height:42px}
  .grid4,.fl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3,.two,.route,.svc{grid-template-columns:minmax(0,1fr)}
  .hero{min-height:68vh}
  .hero .copy{padding-block:72px}
  /* 折り返しが文の切れ目に固定できたので、そのぶん文字を大きくして見やすくする（先生 2026-09-19） */
  .hero h1{font-size:22px;letter-spacing:.03em;line-height:1.75}
  .hero h1 em{padding:.04em .26em .1em;margin:0 .05em}
  .hbtn .t{font-size:15.5px}
  .hbtn .t small{font-size:10.5px}
  section{padding-block:56px}
}
/* トップ画像の「お問い合わせはこちら」が見えている間（.hd.hero-on）: お問い合せはアイコンだけ、電話は番号つきの大きなボタン。
   ボタンが画面から消えると、ヘッダーのお問い合せが広がって戻る */
.hd .cta,.hd .tel{transition:padding .35s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s,transform .2s}
.hd .cta .t,.hd .cta .ar,.hd .tel .num{transition:opacity .25s}
.hd.hero-on .cta{padding:4px}
.hd.hero-on .cta .t,.hd.hero-on .cta .ar{display:none}
.hd.hero-on .cta .ic{width:40px;height:40px}
/* 「開いている方は橙で塗り、閉じている方は白い丸を橙の細い輪郭で囲う」で全幅そろえる
   （先生 2026-09-19「小さい時は、メールも電話も」細い線に）。縁は静かに光らせる */
.hd.hero-on .cta{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(232,112,15,.5);animation:btn-glow 4.2s ease-in-out infinite}
.hd.hero-on .cta:before{display:none}                      /* 横切る光は塗りのときだけ */
.hd.hero-on .cta .ic{background:transparent;box-shadow:none}
.hd.hero-on .cta .ic svg{stroke:var(--acc)}
/* 番号つきの電話ボタンは 721px 以上で出す（先生 2026-09-19「この幅でもトップ画像のときは展開を」）。
   トップ画像が見えている間はお問い合せがアイコンだけに縮むので、中間の幅でも番号を出す余地がある。
   スクロールして .hero-on が外れると、下の max-width:960px の指定に戻ってアイコンだけになる */
@media (min-width:721px){
  .hd.hero-on .tel{padding:5px 22px 5px 6px;border:1.5px solid var(--acc);background:linear-gradient(135deg,#ffb300,#e8700f);color:#fff;box-shadow:0 6px 18px rgba(224,118,26,.30)}
  .hd.hero-on .tel svg{background:#fff;stroke:var(--acc);width:40px;height:40px;padding:10px}
  .hd.hero-on .tel .num{display:block;font-size:18px}
  .hd.hero-on .tel .num small{color:#fff3e2}
}
@media (max-width:960px){
  /* 中間の幅: 電話はアイコンだけにしてロゴとボタンの場所を確保 */
  .hd .tel{padding:0;border:none;background:transparent;box-shadow:none}
  .hd .tel .num{display:none}
  /* 閉じているときは白地に橙の太い輪郭（先生 2026-09-19「メールが小さいときのように縁取りは太めで」）。
     お問い合せの小さい形＝橙の地に白い丸（＝4px の輪郭）と同じ太さにそろえた。
     輪郭は border でなく内側の影で描く＝大きさが変わらず、周りのボタンの位置がずれない */
  .hd .tel svg{width:46px;height:46px;padding:12px;background:#fff;stroke:var(--acc);box-shadow:inset 0 0 0 1.5px rgba(232,112,15,.5);animation:btn-glow 4.2s ease-in-out infinite;transition:background .2s,box-shadow .2s}
  .hd .logo{flex:none}
}
@media (max-width:720px){
  /* ここまで狭いと番号を出す余地がないので、トップ画像が見えている間は橙の丸アイコンで目立たせる */
  .hd.hero-on .tel svg{background:linear-gradient(135deg,#ffb300,#e8700f);stroke:#fff;box-shadow:0 6px 16px rgba(224,118,26,.35);width:46px;height:46px;padding:12px}
}
@media (max-width:560px){
  /* 狭い画面: 文字ロゴは非表示、お問い合せはアイコンだけ。
     ただし電話は番号つきのまま（先生 2026-09-19「アイコンだけだと問い合わせ先がどこにも無い」）。
     ロゴ・お問い合せ・隙間を少しずつ詰めて、その場所を番号にあてている */
  .hd .logo .wms{display:none}
  .hd .logo .mark{width:36px;height:36px}
  .hd .in{gap:9px;padding-inline:13px}       /* ヘッダーだけ左右を少し詰める（本文の余白は変えない） */
  .hd .acts{gap:10px}
  .hd .cta{padding:4px}
  .hd .cta .t,.hd .cta .ar{display:none}
  .hd .cta .ic{width:34px;height:34px}
  /* 電話＝広い幅と同じ「番号つきボタン」の小さい版。丸アイコンの大きさはお問い合せとそろえる */
  .hd .tel{gap:7px;padding:4px 11px 4px 4px;border:1.5px solid var(--acc);background:#fff;box-shadow:0 3px 10px rgba(224,118,26,.12)}
  .hd .tel svg{width:34px;height:34px;padding:9px;background:linear-gradient(135deg,#f5a300,#e8700f);stroke:#fff}
  .hd .tel .num{display:block;font-size:15px;letter-spacing:.02em}
  /* 開いたときは補足の小さい文字も出す（先生 2026-09-19「小さくてもよいので文字も追加を」）。
     電話は「営業時間：」を落とした「平日10時から17時」＝番号より短いので幅は増えない（先生 2026-09-19） */
  .hd .tel .num small{display:none}
  .hd .tel .num .ns{display:block;font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--mute);margin-top:3px;line-height:1.2}
  .hd.hero-on .tel .num .ns{color:#fff3e2}
  .hd:not(.hero-on) .cta .ts small{display:block;font-size:9px;font-weight:500;letter-spacing:.04em;color:#fff3e2;margin-bottom:2px}
  /* トップ画像が見えている間は、広い幅と同じく橙で塗った形にする */
  .hd.hero-on .tel{background:linear-gradient(135deg,#ffb300,#e8700f);color:#fff;box-shadow:0 4px 12px rgba(224,118,26,.28)}
  .hd.hero-on .tel svg{background:#fff;stroke:var(--acc);width:34px;height:34px;padding:9px}
  /* トップ画像のボタンが見えなくなったら、広い幅と同じく入れ替える＝お問い合せが開いて電話はアイコンに戻る。
     この幅に「お問い合わせはこちら」は入らないので短い名前を使う（先生 2026-09-19） */
  .hd:not(.hero-on) .cta{padding:4px 14px 4px 4px}
  .hd:not(.hero-on) .cta .ts{display:flex;flex-direction:column;align-items:flex-start;font-weight:700;font-size:14px;letter-spacing:.02em;line-height:1.15}
  .hd:not(.hero-on) .tel{padding:0;border:none;background:transparent;box-shadow:none}
  .hd:not(.hero-on) .tel .num{display:none}
  .hd:not(.hero-on) .tel svg{width:42px;height:42px;padding:11px;background:#fff;stroke:var(--acc);box-shadow:inset 0 0 0 1.5px rgba(232,112,15,.5);animation:btn-glow 4.2s ease-in-out infinite}
}
/* ここまで狭いと番号を入れる場所がないのでアイコンだけに戻す */
@media (max-width:350px){.hd .tel .num{display:none}}
@media (prefers-reduced-motion:reduce){
  .hd .tel svg,.hd .cta{animation:none!important}
  .hero .track{transition:none}
  .hero .veil,.hero .copy{transition:none}
}

/* ===== 弁護士費用ページ（2026-09-19 改修）: 見出しは .cv-h、料金は1行ずつのカード。天地は詰め気味 ===== */
.fz{padding-block:34px 64px}
.fz .in{max-width:1000px}
.fz-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-bottom:28px}
.fz-tax{margin:0;font-size:13px;color:var(--mute);letter-spacing:.04em;background:#fff;border:1px solid rgba(232,112,15,.2);border-radius:999px;padding:5px 15px}
.fz-sec{margin-bottom:34px}
.fz-sec .cv-h{margin-bottom:14px}
.fz-intro{margin:-4px 0 14px;font-size:14.5px;line-height:1.9;color:#4a4238}
.fz-list{display:grid;gap:10px}
.fz-row{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);background:#fff;border:1px solid rgba(232,112,15,.14);border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(120,60,0,.05);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.fz-row.reveal.is-in{transition:opacity .8s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.fz-row:hover,.fz-row.reveal.is-in:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(232,112,15,.14);border-color:rgba(232,112,15,.38)}
.fz-row:after{content:"";position:absolute;top:-40%;left:-70%;width:30%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .8s cubic-bezier(.3,.6,.3,1);pointer-events:none}
.fz-row:hover:after{left:150%}
.fz-l{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,#fff8ea,#ffefd2);font-size:14.5px;line-height:1.5;color:#4a3a28}
.fz-l b{font-weight:700;letter-spacing:.04em}
.fz-ic{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--acc);box-shadow:0 2px 8px rgba(232,112,15,.12);overflow:hidden;isolation:isolate;transition:color .3s}
.fz-ic:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#f5a300,#e8700f);transform:scale(0);border-radius:50%;transition:transform .4s cubic-bezier(.34,1.4,.64,1)}
.fz-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.34,1.4,.64,1)}
.fz-row:hover .fz-ic{color:#fff}.fz-row:hover .fz-ic:before{transform:scale(1)}
.fz-row:hover .fz-ic svg{transform:rotate(-8deg) scale(1.08)}
.fz-r{display:flex;flex-direction:column;justify-content:center;padding:13px 20px}
.fz-amt{display:block;font-size:18.5px;font-weight:700;letter-spacing:.04em;line-height:1.5;color:#2a241c}
.fz-amt .sp{display:none}
.fz-amt .sub{display:block;font-size:14px;color:#6a5d4e}
.fz-amt em{font-style:normal;color:var(--acc-dk);font-size:1.12em;padding:0 .08em;background:linear-gradient(transparent 62%,#ffe27a 62%) no-repeat 0 0/0% 100%;transition:background-size .8s cubic-bezier(.2,.8,.2,1) .4s}
.fz-row.is-in .fz-amt em{background-size:100% 100%}
.fz-nt{list-style:none;margin:5px 0 0;padding:0;font-size:12.5px;line-height:1.75;color:var(--mute)}
.fz-note{margin:12px 0 0;padding:13px 18px;background:#fff;border:1px solid rgba(232,112,15,.12);border-left:3px solid var(--acc);border-radius:4px 12px 12px 4px;font-size:13px;line-height:1.9;color:#5b5044}
@media (max-width:640px){
  .fz{padding-block:26px 48px}
  .fz-sec .cv-h{font-size:17px;letter-spacing:.06em;gap:10px;line-height:1.45}
  .fz-sec .cv-h .pp{display:inline-block}
  .fz-row{grid-template-columns:minmax(0,1fr)}
  .fz-l{padding:10px 14px;font-size:14px}.fz-l br{display:none}
  .fz-ic{width:34px;height:34px}.fz-ic svg{width:18px;height:18px}
  .fz-r{padding:11px 14px 12px}
  .fz-amt{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){.fz-row:after{display:none}.fz-amt em{background-size:100% 100%;transition:none}}

/* 弁護士費用の書体（2026-09-19 先生決定＝_feesfont_src.py の案5「禅オールド明朝 極太」を土台に、数字だけ細身の明朝）:
   項目名＝禅オールド明朝 700、金額＝禅オールド明朝 900、金額の数字（.n）＝源ノ明朝 700 を半角の形（hwid）で。
   行間: 金額→注記 8px・注記 1.85 */
.fz-l{padding:15px 18px}
.fz-l b{font-family:"Zen Old Mincho",var(--fh);font-weight:700;font-size:15px;letter-spacing:.06em;line-height:1.55;font-feature-settings:"palt"}
.fz-r{padding:15px 22px 16px}
.fz-amt{font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:22px;letter-spacing:.03em;line-height:1.45}
.fz-amt .sub{font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:15px;margin-top:2px;line-height:1.5}
.fz-amt .n{font-family:var(--fh);font-weight:700;font-feature-settings:"hwid";letter-spacing:.01em;padding:0 .03em}
.fz-nt{margin-top:8px;font-size:12.5px;line-height:1.85;letter-spacing:.02em;color:#8a7e70;font-feature-settings:"palt"}
@media (max-width:640px){
  .fz-l{padding:10px 14px}.fz-l b{font-size:14px}
  .fz-r{padding:12px 14px 13px}
  .fz-amt{font-size:19px}
  .fz-amt .sub{font-size:14px}
}

/* 「弁護士費用項目の説明はこちら」＝_feeslink_src.py の案1「光るピル」×_feeslinkfont_src.py の書体D「禅丸ゴシック」（2026-09-19 先生決定）:
   橙の細枠の丸いボタン。ふだんも縁がゆっくり光り、カーソルで橙が左から満ちて文字が白に、光が走り、矢印の丸が前へ */
.fz-link{position:relative;display:inline-flex;align-items:center;gap:10px;padding:7px 7px 7px 18px;border-radius:999px;border:1.5px solid rgba(232,112,15,.55);color:var(--acc-dk);background:#fff;overflow:hidden;isolation:isolate;animation:fzl-glow 3.6s ease-in-out infinite;transition:color .35s,transform .3s,box-shadow .3s,border-color .3s}
.fz-link:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#f5a300,#e8700f);transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fz-link:after{content:"";position:absolute;top:-40%;left:-60%;width:30%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.fz-link .t{font-family:"Zen Maru Gothic",var(--fb);font-weight:700;font-size:14px;letter-spacing:.05em;font-feature-settings:"palt";white-space:nowrap}
.fz-link .arc{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff3e0;transition:transform .3s,background .3s,color .3s}
.fz-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fz-link:hover{text-decoration:none;color:#fff;transform:translateY(-2px);border-color:transparent;box-shadow:0 10px 22px rgba(232,112,15,.28)}
.fz-link:hover:before{transform:none}.fz-link:hover:after{left:140%}
.fz-link:hover .arc{transform:translateX(3px);background:rgba(255,255,255,.95);color:var(--acc)}
@keyframes fzl-glow{0%,100%{box-shadow:0 0 0 0 rgba(245,163,0,0)}50%{box-shadow:0 0 0 5px rgba(245,163,0,.14)}}
@media (prefers-reduced-motion:reduce){.fz-link{animation:none}}

/* ===== 弁護士費用項目ページ（price.html・2026-09-19 改修）: 弁護士費用ページと同じカード（.fz-row）で統一 =====
   左＝淡黄の面にアイコンと項目名（禅オールド明朝）＋右上に薄い連番 01〜07、右＝説明（禅オールド明朝 600）と注記 */
.pr-intro{margin:0 0 20px;font-size:15px;line-height:1.7}
.pr-d{margin:0;font-family:"Zen Old Mincho",var(--fh);font-weight:600;font-size:15.5px;line-height:1.6;letter-spacing:.04em;color:#2a241c;font-feature-settings:"palt"}
.pr-back{margin-top:30px;text-align:center}
.fz-link.back{padding:7px 18px 7px 7px}
.fz-link.back svg{transform:rotate(180deg)}
.fz-link.back:hover .arc{transform:translateX(-3px)}
@media (max-width:640px){
  .pr-intro{font-size:14.5px}
  .pr-d{font-size:14.5px}
}

/* 弁護士費用項目の一覧＝_prdesign_src.py の案4「罫線の一覧」（2026-09-19 先生決定）:
   細い罫線で区切った表の形。左に項目名（禅オールド明朝）と丸いアイコン、右に説明（禅オールド明朝 600）と注記。
   ホバーで淡い黄が左から満ち、アイコンが橙に満ちる。行間は詰め気味（説明 1.6・注記 1.65） */
.pr-list{border-top:1px solid rgba(232,112,15,.28)}
.pr-r{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;padding:14px 12px;border-bottom:1px solid rgba(232,112,15,.28);isolation:isolate;overflow:hidden}
.pr-r:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fff3e0,rgba(255,250,242,0));transform:translateX(-101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pr-r:hover:before{transform:none}
.pr-tm{display:flex;align-items:center;gap:10px}
.pr-tm b{font-family:"Zen Old Mincho",var(--fh);font-weight:700;font-size:16px;letter-spacing:.06em;color:#4a3a28}
.pr-ic{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--acc);box-shadow:0 2px 8px rgba(232,112,15,.12);overflow:hidden;isolation:isolate;transition:color .3s}
.pr-ic:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:linear-gradient(135deg,#f5a300,#e8700f);transform:scale(0);transition:transform .4s cubic-bezier(.34,1.4,.64,1)}
.pr-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.34,1.4,.64,1)}
.pr-r:hover .pr-ic{color:#fff}.pr-r:hover .pr-ic:before{transform:scale(1)}
.pr-r:hover .pr-ic svg{transform:rotate(-8deg) scale(1.08)}
.pr-bd .pr-d{font-size:15px}
.pr-nt{margin:5px 0 0;font-size:12.5px;line-height:1.65;letter-spacing:.02em;color:#8a7e70;font-feature-settings:"palt"}
@media (max-width:640px){
  .pr-r{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 6px}
  .pr-bd .pr-d{font-size:14.5px}
}

/* 注記のぶら下げ（先生 2026-09-19「※印の2行目は3文字空けて、先頭をそろえる」）: 頭の「※１　」を幅3文字の枠に入れ、本文は3文字目の後ろから */
.pr-nt{padding-left:3em}
.pr-nt .k{display:inline-block;width:3em;margin-left:-3em;white-space:nowrap}

/* 天地を少し広げる（先生 2026-09-19「全体的にもう少し天地が緩くてもよい。バランスよく」）:
   行の上下 14→20px、説明の行間 1.6→1.75、説明→注記 5→8px、注記の行間 1.65→1.8、冒頭の文→一覧 20→26px */
.pr-intro{margin-bottom:26px;line-height:1.8}
.pr-r{padding:20px 12px}
.pr-bd .pr-d{line-height:1.75}
.pr-nt{margin-top:8px;line-height:1.8}
.pr-back{margin-top:36px}
@media (max-width:640px){.pr-r{padding:16px 6px}}

/* 「※１」の後の空白を取った（先生 2026-09-19）: 「※１」と本文を2列に並べ、本文の2行目以降を本文の先頭にそろえる（※4 の半角数字でもずれない） */
.pr-nt{display:grid;grid-template-columns:auto minmax(0,1fr);padding-left:0}
.pr-nt .k{width:auto;margin-left:0}

/* 項目名（法律相談料・着手金など）を太字に（先生 2026-09-19）: 禅オールド明朝 700→900 */
.pr-tm b{font-weight:900}

/* 本文末尾の「※１」などは小さめ・灰色（先生 2026-09-19） */
.pr-d .ref{margin-left:.1em;font-size:.76em;font-weight:600;color:#9a8e80;letter-spacing:.02em}

/* 説明の本文を代表弁護士ご挨拶と同じ本文の書体に（先生 2026-09-19）: Noto Sans（--fb）400・字間なし。大きさ（15px）と行間（1.75）は従前のまま（先生「大きさは元のまま」） */
.pr-d,.pr-bd .pr-d{font-family:var(--fb);font-weight:400;letter-spacing:normal;color:#2a2622;font-feature-settings:normal}
.pr-d .ref{font-weight:500}

/* ===== 業務案内ページ（services.html・2026-09-19 改修）＝_svc_src.py の案1「トップと同じ形」 =====
   中央の小見出し（両側に細線）→ 注記 → 分野カード3列（トップと同じ .field）→ 淡黄の問い合わせ欄に光るピル（.fz-link と同じ） */
.sv{padding-block:40px 64px}
.sv-ct{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;margin-top:30px;padding:22px 26px;border-radius:14px;background:linear-gradient(135deg,#fff8ea,#ffefd2)}
.sv-ct b{display:block;font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:20px;letter-spacing:.06em;color:#2a241c}
.sv-ct small{display:block;margin-top:4px;font-size:13.5px;letter-spacing:.03em;color:#6f675c}
.sv-pill{padding:9px 9px 9px 22px}
.sv-pill .t{font-size:15px}
.sv-pill .arc{width:32px;height:32px}
.sv-pill svg{width:17px;height:17px}
@media (max-width:640px){.sv{padding-block:30px 48px}.sv-ct{padding:18px 18px}.sv-ct b{font-size:18px}}

/* 業務案内ページの分野カード＝案4「大きなアイコンのタイル」: 淡黄→橙のグラデの面に白い角丸の枠のアイコン、明朝の分野名。
   ホバーで面が橙に満ち、文字が白に、アイコンが弾む。3列（700px 以下は2列） */
.sv-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sv-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px 18px;border-radius:16px;background:linear-gradient(160deg,#fffaf0,#ffefcc);border:1px solid rgba(232,112,15,.14);overflow:hidden;isolation:isolate}
.sv-t.reveal.is-in{transition:opacity .8s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.sv-t:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,#f5a300,#e8700f);opacity:0;transition:opacity .4s}
.sv-ic{display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:22px;background:#fff;color:var(--acc);box-shadow:0 8px 20px rgba(232,112,15,.16);transition:transform .45s cubic-bezier(.34,1.6,.5,1)}
.sv-ic .ico{width:38px;height:38px;margin:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sv-t b{font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:17px;letter-spacing:.1em;color:#2a241c;transition:color .3s}
.sv-t:hover,.sv-t.reveal.is-in:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(232,112,15,.22)}
.sv-t:hover:before{opacity:1}.sv-t:hover b{color:#fff}.sv-t:hover .sv-ic{transform:translateY(-4px) rotate(-6deg) scale(1.06)}
@media (max-width:700px){.sv-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sv-ic{width:62px;height:62px;border-radius:18px}.sv-ic .ico{width:32px;height:32px}.sv-t b{font-size:15px;letter-spacing:.06em}}

/* 業務案内ページ: 「取り扱い分野」→ 注記 → カードの間を少し広げる（先生 2026-09-19「少し詰まりすぎ。少しだけバランスよく広げて」）
   見出し→注記 6→14px、注記→カード 20→30px */
.sv .fl-sub{margin-bottom:14px}
.sv .fl-note{margin-bottom:30px}
@media (max-width:640px){.sv .fl-sub{margin-bottom:14px}.sv .fl-note{margin-bottom:24px}}

/* 業務案内の問い合わせ欄のボタン＝ヘッダーの「お問い合わせはこちら」が広がったときと同じ形（先生 2026-09-19）。
   橙のグラデの丸いボタン・白い丸に封筒・右に矢印・カーソルで光が走り少し浮く */
.sv-cta{position:relative;display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;white-space:nowrap;padding:6px 22px 6px 7px;border-radius:999px;background:linear-gradient(135deg,#f5a300 0%,#e8700f 60%,#d9600a 100%);box-shadow:0 6px 18px rgba(224,118,26,.30),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;transition:transform .2s,box-shadow .2s}
.sv-cta:before{content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .6s ease}
.sv-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(224,118,26,.38),inset 0 1px 0 rgba(255,255,255,.35);text-decoration:none;color:#fff}
.sv-cta:hover:before{left:130%}
.sv-cta .ic{width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 3px rgba(120,60,0,.18)}
.sv-cta .ic svg{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sv-cta .t{font-weight:700;font-size:15.5px;letter-spacing:.04em}
.sv-cta .ar{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:transform .2s}
.sv-cta:hover .ar{transform:translateX(3px)}
/* 光る動き（先生 2026-09-19「クールにかっこよく、光るように」）: 3.8秒ごとに光が横切る／縁から橙の光の輪が広がる／封筒が小さく揺れる。
   カーソルを乗せている間は輪を止めて浮かせ、光は速く走らせる */
.sv-cta{animation:svc-glow 2.6s ease-in-out infinite}
.sv-cta:before{animation:svc-shine 3.8s ease-in-out infinite}
.sv-cta .ic svg{animation:svc-env 3.8s ease-in-out infinite}
.sv-cta:hover{animation:none}
.sv-cta:hover:before{animation-duration:1.2s}
@keyframes svc-glow{0%,100%{box-shadow:0 6px 18px rgba(224,118,26,.30),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 0 rgba(245,163,0,.45)}60%{box-shadow:0 6px 18px rgba(224,118,26,.30),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 10px rgba(245,163,0,0)}}
@keyframes svc-shine{0%{left:-60%}35%{left:140%}100%{left:140%}}
@keyframes svc-env{0%,70%,100%{transform:none}76%{transform:rotate(-10deg) scale(1.08)}82%{transform:rotate(8deg) scale(1.08)}88%{transform:none}}
@media (prefers-reduced-motion:reduce){.sv-cta,.sv-cta:before,.sv-cta .ic svg{animation:none!important}}

/* ===== ご依頼の流れページ（flow.html・2026-09-19 改修）＝_flowpg_src.py の案5「ピクトグラムの縦線」 =====
   見出し＝禅オールド明朝900・18px／本文＝Noto Sans 400・15px・行間1.75（ご挨拶・費用項目と同じ）／段落の間12px */
.fw{padding-block:40px 64px}
.fw .in{max-width:1000px}
.fw-l{position:relative}
.fw-l.reveal{opacity:1;transform:none}
/* 縦の線は矢じりを先端に付けて上から下へ伸びる（先生 2026-09-19「矢印が下に伸びるアニメーション」・トップの流れと同じ作り）。
   伸びきった後は矢じりが小さく伸び縮みする */
.fw-l{padding-bottom:22px}
.fw-l:before{content:"";position:absolute;z-index:0;left:30px;top:30px;width:20px;height:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M0 0h20L10 16z' fill='%23e8700f'/%3E%3C/svg%3E") center bottom/20px 16px no-repeat,linear-gradient(180deg,#ffd500,#f5a300 45%,#e8700f) center top/3px calc(100% - 13px) no-repeat}
.fw-l.is-in:before{animation:fw-line 2.2s cubic-bezier(.45,0,.2,1) .15s forwards,fw-arw 1.6s ease-in-out 2.5s infinite}
@keyframes fw-line{from{height:0}to{height:calc(100% - 34px)}}
@keyframes fw-arw{0%,100%{height:calc(100% - 34px)}50%{height:calc(100% - 29px)}}
@media (prefers-reduced-motion:reduce){.fw-l:before{height:calc(100% - 34px)}.fw-l.is-in:before{animation:none}}
.fw-r{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);gap:18px;align-items:start;padding:8px 0}
.fw-dot{position:relative;z-index:1;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;border:2px solid rgba(232,112,15,.35);background:radial-gradient(circle at 32% 28%,#fffdf0 0%,#fff1c4 70%,#ffe9a8 100%);transition:box-shadow .3s,border-color .3s}
.fw-dot .pg{width:46px;height:46px;stroke:#e8700f;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fw-dot .pg .fillbg{fill:#fff4d0}
.fw-bx{background:#fff;border:1px solid rgba(232,112,15,.14);border-radius:14px;padding:16px 22px 18px;box-shadow:0 3px 12px rgba(120,60,0,.05);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.fw-r.reveal.is-in{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.fw-r:hover .fw-bx{transform:translateX(6px);box-shadow:0 12px 26px rgba(232,112,15,.14);border-color:rgba(232,112,15,.38)}
.fw-r:hover .fw-dot{border-color:transparent;box-shadow:0 0 0 5px rgba(245,163,0,.18)}
.fw-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fw-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f5a300,#e8700f);color:#fff;font-family:var(--fh);font-weight:700;font-size:16px;box-shadow:0 4px 10px rgba(232,112,15,.28)}
.fw-t{display:block;font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:18px;letter-spacing:.06em;color:#2a241c;line-height:1.45;font-feature-settings:"palt"}
.fw-t small{font-size:.74em;font-weight:700;letter-spacing:.03em;margin-left:.15em;color:#6a5d4e}
.fw-bd p{margin:0 0 12px;font-family:var(--fb);font-weight:400;font-size:15px;line-height:1.65;color:#2a2622}  /* 行間 1.75→1.65（先生 2026-09-19「ほんの少しだけ詰めて」） */
.fw-bd p:last-child{margin-bottom:0}
.fw-bd .ph{font-weight:700;color:#4a3a28}
.fw-cta{margin-top:30px;text-align:center}
@media (max-width:640px){
  .fw{padding-block:30px 48px}
  .fw-l:before{left:20px}
  .fw-r{grid-template-columns:60px minmax(0,1fr);gap:12px}
  .fw-dot{width:60px;height:60px}.fw-dot .pg{width:34px;height:34px}
  .fw-bx{padding:14px 16px 16px}
  .fw-t{font-size:17px}.fw-bd p{font-size:14.5px}
}

/* ご依頼の流れのカードの見出し＝_fwh_src.py の案5「左に飛び出す番号の札」（先生 2026-09-19 決定）:
   番号はカードの左端から少し飛び出した橙の札（下に折り返しの影）、見出しは大きく末尾に小さな橙の点。カーソルで札が弾む */
.fw-h{gap:10px;margin-bottom:12px}
.fw-n{position:relative;margin-left:-34px;width:auto;height:30px;padding:0 12px 0 14px;border-radius:0 999px 999px 0;font-size:15px;letter-spacing:.04em;box-shadow:0 6px 14px rgba(232,112,15,.3);transition:transform .45s cubic-bezier(.34,1.6,.5,1)}
.fw-n:before{content:"";position:absolute;left:0;bottom:-6px;border-top:6px solid #b8560a;border-left:8px solid transparent}
.fw-r:hover .fw-n{transform:translateX(4px) scale(1.06)}
.fw-t{font-size:20px}
.fw-t:after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-left:8px;vertical-align:.2em}
@media (max-width:640px){.fw-n{margin-left:-26px;height:28px;font-size:14px}.fw-t{font-size:18px}}

/* 本文の左端を見出しの文字の先頭にそろえる（先生 2026-09-19「番号の札のほうに左に詰まりすぎ」）: 札の真下から本文が始まらないように */
.fw-bd{padding-left:11px}
@media (max-width:640px){.fw-bd{padding-left:18px}}

/* 「・」で始まる段落は2行目以降（改行後・折り返し）を1文字下げ、「・」の後ろの文字にそろえる（先生 2026-09-19） */
.fw-bd p{padding-left:1em;text-indent:-1em}

/* 番号の札を右へずらし、ピクトグラムの丸との間を広げる（先生 2026-09-19）: はみ出しを 12px→4px（狭い幅 10px→4px）。
   見出しが右へ動くぶん、本文の左端も合わせて動かす */
.fw-n{margin-left:-26px}
.fw-bd{padding-left:19px}
@media (max-width:640px){.fw-n{margin-left:-20px}.fw-bd{padding-left:24px}}

/* さらに右へ（先生 2026-09-19「もっとずらして」）: ピクトグラムの丸とカードの間 18→34px（狭い幅 12→22px） */
.fw-r{gap:34px}
@media (max-width:640px){.fw-r{gap:22px}}

/* ===== アクセスページ（access.html・2026-09-19 改修） =====
   所在地＝トップのアクセスと同じ橙の面＋案内図＋Google マップ（ACX_HTML）。経路案内＝見出しは弁護士紹介・費用と同じ .cv-h、
   写真カードは2列（640px 以下1列）: 左上に番号の札（流れのページと同じ橙の札）、写真はカーソルで少し寄り、光が走る。
   説明は本文と同じ Noto 400・15px・行間1.65 */
.ax{padding-block:40px 64px}
.ax .acx-blk{margin-top:0}
.rt-sec{margin-top:52px}
.rt-sec .cv-h{margin-bottom:18px}
.rt-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px;counter-reset:rt}
.rt{position:relative;margin:0;background:#fff;border:1px solid rgba(232,112,15,.14);border-radius:16px;overflow:hidden;box-shadow:0 3px 12px rgba(120,60,0,.05);counter-increment:rt;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.rt.reveal.is-in{transition:opacity .8s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.rt:hover,.rt.reveal.is-in:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(232,112,15,.16);border-color:rgba(232,112,15,.38)}
.rt-ph{position:relative;overflow:hidden;aspect-ratio:3/2}
.rt-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.rt:hover .rt-ph img{transform:scale(1.05)}
.rt-ph:after{content:"";position:absolute;top:-40%;left:-70%;width:30%;height:180%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .8s cubic-bezier(.3,.6,.3,1);pointer-events:none}
.rt:hover .rt-ph:after{left:150%}
.rt-n{position:absolute;left:0;top:14px;display:inline-flex;align-items:center;height:32px;padding:0 14px 0 12px;border-radius:0 999px 999px 0;background:linear-gradient(135deg,#f5a300,#e8700f);color:#fff;font-family:var(--fh);font-weight:700;font-size:16px;letter-spacing:.04em;box-shadow:0 6px 14px rgba(0,0,0,.18);transition:transform .45s cubic-bezier(.34,1.6,.5,1)}
.rt-n:before{content:counter(rt)}
.rt:hover .rt-n{transform:translateX(4px) scale(1.06)}
.rt figcaption{padding:14px 18px 16px;font-family:var(--fb);font-weight:400;font-size:15px;line-height:1.65;color:#2a2622}
@media (max-width:640px){.ax{padding-block:30px 48px}.rt-sec{margin-top:40px}.rt-g{grid-template-columns:minmax(0,1fr);gap:16px}.rt figcaption{font-size:14.5px;padding:12px 14px 14px}}

/* アクセスページの所在地欄はイラストの案内図なし（先生 2026-09-19）: 右側を Google マップに */
.acx-blk.nomap .acx-gmap{grid-column:auto;height:auto;min-height:420px;border-top:0;border-left:4px solid #fff}
@media (max-width:900px){.acx-blk.nomap .acx-gmap{min-height:320px;border-left:0;border-top:4px solid #fff}}

/* ===== アクセスページ（2026-09-19 先生決定）＝_axpg_src.py の案5を土台に、写真の左上に大きめの番号の札 =====
   所在地＝淡黄の面（住所と駅からの徒歩を2列・下に受付の案内）＋横長の Google マップ。経路案内＝罫線で区切った縦1列（写真・説明）。
   番号の札は写真の左上に重ね、数字は禅オールド明朝900・26px。ホバーで淡い黄が左から満ち、札が弾み、写真が少し寄る */
.ax-card{background:linear-gradient(135deg,#fff8ea,#ffefd2);border-radius:18px;padding:22px 26px 24px}
.ax-card .cv-h{margin-bottom:14px}
.ax-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:14px}
.ax-ad{margin:0;color:#2a241c}
.ax-ad .z{display:block;font-size:14px;font-weight:700;letter-spacing:.1em}
.ax-ad .a1{display:block;font-size:19px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.ax-ad .a2{display:block;font-size:16px;font-weight:700;letter-spacing:.03em}
.ax-ad .a2 small{margin-left:.6em;font-size:12.5px;font-weight:500;opacity:.85;white-space:nowrap}
.ax-st{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ax-st li{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.5}
.ax-st svg,.ax-nt svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ax-nt{display:flex;gap:8px;margin:0;padding:11px 14px;border-radius:12px;background:#fff;font-size:14px;line-height:1.7;color:#5b5044}
.ax-gm{margin-top:16px;border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(120,60,0,.08)}
.ax-gm .map{display:block;width:100%;height:340px;border:0;aspect-ratio:auto;border-radius:0}
.ar-l{max-width:900px;border-top:1px solid rgba(232,112,15,.28)}
.ar-r{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:center;padding:18px 8px;border-bottom:1px solid rgba(232,112,15,.28);isolation:isolate;overflow:hidden}
.ar-r.reveal.is-in{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.ar-r:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fff3e0,rgba(255,250,242,0));transform:translateX(-101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ar-r:hover:before{transform:none}
.ar-ph{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 4px 12px rgba(120,60,0,.08)}
.ar-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.ar-r:hover .ar-ph img{transform:scale(1.05)}
.ar-n{position:absolute;left:0;top:12px;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:44px;padding:0 16px 0 14px;border-radius:0 999px 999px 0;background:linear-gradient(135deg,#f5a300,#e8700f);color:#fff;font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:26px;line-height:1;box-shadow:0 6px 14px rgba(0,0,0,.2);transition:transform .45s cubic-bezier(.34,1.6,.5,1)}
.ar-r:hover .ar-n{transform:translateX(4px) scale(1.06)}
.ar-r p{margin:0;font-family:var(--fb);font-weight:400;font-size:15.5px;line-height:1.7;color:#2a2622}
@media (max-width:760px){.ax-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ax-card{padding:18px 16px 20px}.ax-gm .map{height:280px}.ar-r{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 4px}.ar-n{height:38px;min-width:42px;font-size:22px}.ar-r p{font-size:15px}}

/* 番号の札をクリップ（留め具）らしく（先生 2026-09-19「カーソルを合わせるとクリップっぽく見えない」）:
   札は写真の左の縁から少し外に出て、下に折り返しの影（写真の裏へ回り込む形）。カーソルを乗せても縁に付いたまま右へ伸び、光が走る */
.ar-pw{position:relative}
.ar-n{left:-9px;top:14px;border-radius:3px 999px 999px 0;padding:0 18px 0 22px;transform:none;box-shadow:0 5px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;transition:padding .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.ar-n:before{content:"";position:absolute;left:0;bottom:-9px;width:0;height:0;border-top:9px solid #9c4a08;border-left:9px solid transparent}
.ar-n{overflow:visible}
.ar-n:after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .7s ease;border-radius:inherit;pointer-events:none}
.ar-r:hover .ar-n{transform:none;padding-right:28px;box-shadow:0 8px 18px rgba(232,112,15,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.ar-r:hover .ar-n:after{left:120%}
.ar-r{padding-left:12px}
@media (max-width:640px){.ar-n{left:-7px;padding:0 14px 0 17px}.ar-n:before{bottom:-7px;border-top-width:7px;border-left-width:7px}.ar-r{padding-left:9px}}

/* お問い合わせの項目名の括弧書きは一回り小さく（先生 2026-09-19） */
label .lb-s{font-size:.82em;font-weight:500;color:#6a5d4e;letter-spacing:.02em}

/* お問い合わせの送信前の案内と「送信する」ボタン（先生 2026-09-19「おしゃれに」）:
   案内は淡黄の面に封筒のアイコン、ボタンは業務案内の問い合わせと同じ光る橙の形（紙飛行機のアイコン）で中央に */
.ct-note{display:flex;align-items:center;gap:10px;margin:18px 0 6px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,#fff8ea,#ffefd2);font-size:14px;line-height:1.7;color:#5b5044}
.ct-note svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-row{text-align:center;margin-top:22px}
.ct-send{border:0;cursor:pointer;font:inherit;padding:7px 30px 7px 8px}
.ct-send .t{font-size:17px;letter-spacing:.14em}
.ct-send .ic svg{stroke-width:1.8}
.ct-send:focus-visible{outline:3px solid rgba(245,163,0,.5);outline-offset:3px}

/* ===== 送信完了ページ・エラー画面（2026-09-19） =====
   白いカードの中央に、円と✓が描かれるマーク（エラーは！）→ 明朝の見出し → 案内。下に確認メール・電話の2枚、最後にボタン */
.ty{padding-block:44px 72px}
.ty .in{max-width:820px}
.ty-card{position:relative;text-align:center;padding:40px 28px 34px;background:#fff;border:1px solid rgba(232,112,15,.14);border-radius:22px;box-shadow:0 14px 40px rgba(120,60,0,.08);overflow:hidden}
.ty-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#ffd54a,#f5a300,#e8700f)}
.ty-card:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,213,74,.28),rgba(255,213,74,0) 70%);pointer-events:none}
.ty-mark{width:84px;height:84px;margin:0 auto 18px}
.ty-mark svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ty-mark .c{stroke:#f5a300;stroke-width:3;stroke-dasharray:150;stroke-dashoffset:150;fill:#fff8ea}
.ty-mark .k{stroke:#e8700f;stroke-width:4;stroke-dasharray:40;stroke-dashoffset:40}
.ty-card.is-in .ty-mark .c{animation:ty-draw .8s cubic-bezier(.6,0,.2,1) .15s forwards}
.ty-card.is-in .ty-mark .k{animation:ty-draw .5s cubic-bezier(.6,0,.2,1) .85s forwards}
.ty-card.is-in .ty-mark{animation:ty-pop .5s cubic-bezier(.34,1.6,.5,1) 1.25s}
@keyframes ty-draw{to{stroke-dashoffset:0}}
@keyframes ty-pop{50%{transform:scale(1.08)}}
.ty-mark.warn .c{stroke:#e8700f}
.ty-mark.warn .k{stroke:#d9600a}
.ty-h{margin:0 0 12px;font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:clamp(22px,3vw,28px);letter-spacing:.08em;color:#2a241c;line-height:1.45}
.ty-lead{margin:0;font-family:var(--fb);font-size:15.5px;line-height:1.85;color:#3a3128}
.ty-lead p{margin:0 0 8px}.ty-lead p:last-child{margin-bottom:0}
.ty-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.ty-info.one{grid-template-columns:minmax(0,1fr)}
.ty-i{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:linear-gradient(135deg,#fff8ea,#ffefd2);border-radius:16px}
.ty-i b{display:block;font-family:"Zen Old Mincho",var(--fh);font-weight:900;font-size:16.5px;letter-spacing:.06em;color:#2a241c;margin-bottom:4px}
.ty-i span:not(.ty-ic){display:block;font-size:14px;line-height:1.7;color:#5b5044}
.ty-ic{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(232,112,15,.12)}
.ty-ic svg{width:20px;height:20px;fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ty-tel{display:inline-block;font-family:var(--fh);font-weight:700;font-size:22px;letter-spacing:.06em;color:var(--acc-dk);font-variant-numeric:tabular-nums}
.ty-tel:hover{text-decoration:none;color:var(--acc)}
.ty-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;margin-top:30px}
.ty-btns .fz-link .t{font-family:"Zen Maru Gothic",var(--fb);font-weight:700;font-size:14.5px;letter-spacing:.05em}
@media (max-width:640px){.ty{padding-block:30px 52px}.ty-card{padding:32px 18px 26px}.ty-mark{width:70px;height:70px}.ty-info{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ty-mark .c,.ty-mark .k{stroke-dashoffset:0;animation:none!important}.ty-card.is-in .ty-mark{animation:none}}

/* お問い合わせ・送信完了・エラーの各ページ: ヘッダーのお問い合せボタンを出さない（電話ボタンは hero-on で広げたまま）2026-09-19 */
.hd.no-cta .cta{display:none!important}
/* 送信完了: スマホでは見出しを1行に収め、案内文は文節で折り返す */
.ty-h,.ty-lead{word-break:auto-phrase}
@media (max-width:640px){.ty-h{font-size:20px;letter-spacing:.03em}.ty-lead{font-size:14.5px}}

/* 送信完了の✓マーク（2026-09-19 先生「丸を書いて最後にチェックが入る感じ」）:
   カードが現れ終わってから、12時の位置から時計回りに丸が描かれ（1.1秒）、内側が淡く満ち、最後に✓が描かれて小さく弾む。
   カーソルを乗せるともう一度再生（再生中2.6秒は無視）。エラーの！も同じ順で描く */
.ty-mark{cursor:default}
.ty-mark .c{transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;fill:#fff8ea;fill-opacity:0}
.ty-mark .k{stroke-dasharray:40;stroke-dashoffset:40}
.ty-card.is-in .ty-mark .c{animation:ty-draw 1.1s cubic-bezier(.55,0,.25,1) .7s forwards,ty-fill .6s ease 1.5s forwards}
.ty-card.is-in .ty-mark .k{animation:ty-draw .5s cubic-bezier(.6,0,.2,1) 1.9s forwards}
.ty-card.is-in .ty-mark{animation:ty-pop .55s cubic-bezier(.34,1.6,.5,1) 2.35s}
@keyframes ty-fill{to{fill-opacity:1}}
@keyframes ty-pop{50%{transform:scale(1.1)}}
.ty-card.ty-re .ty-mark,.ty-card.ty-re .ty-mark .c,.ty-card.ty-re .ty-mark .k{animation:none!important}
@media (prefers-reduced-motion:reduce){.ty-mark .c{stroke-dashoffset:0;fill-opacity:1}.ty-mark .k{stroke-dashoffset:0}.ty-card.is-in .ty-mark,.ty-card.is-in .ty-mark .c,.ty-card.is-in .ty-mark .k{animation:none!important}}