/* ==== SM 共通の見た目（2026-09-30・トップと同じ型：白・墨・生成り・1px 罫・角 2px・影とグラデなし・見出しは明朝・英数字は Jost） ==== */
@font-face{font-family:Jost;font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{--x-ink:#1B1A18;--x-sub:#57524B;--x-mute:#6F6A62;--x-line:#DCD7CE;--x-paper:#F5F2EC;--x-camel:#8C6A43;--x-camel-l:#C9B59A;--x-green:#06C755;
  --x-serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --x-sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif;
  --x-en:Jost,"Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif}
/* 画像に width・height を付けたので、縮んだときに縦横比を保つ（クラスで高さを決めている画像はそちらが勝つ） */
img{height:auto}
body{font-family:var(--x-sans)!important;color:var(--x-ink);letter-spacing:.04em;line-height:1.95;-webkit-font-smoothing:antialiased;font-feature-settings:normal!important}
h1,h2,.xcatch{font-family:var(--x-serif)!important;font-weight:500!important;letter-spacing:.06em}
h2{line-height:1.6!important}
[id]{scroll-margin-top:84px}
:focus-visible{outline:2px solid var(--x-ink);outline-offset:3px}
/* 表示は JS に頼らない */
.reveal{opacity:1!important;transform:none!important}
/* 小さい英字の見出し札：塗りと丸をやめる */
.kicker,.eyebrow,.numlabel,.ey{display:inline-flex!important;align-items:center;gap:10px;background:none!important;border:0!important;border-radius:0!important;padding:0!important;font:400 11px/1.6 var(--x-en)!important;letter-spacing:.32em!important;color:var(--x-sub)!important;text-transform:uppercase}
.numlabel b{font-weight:400!important;color:var(--x-camel)!important}
.numlabel .bar{width:28px;height:1px;background:var(--x-ink)!important}
/* ボタン */
.btn,.btn-line,.btn-ghost,.btn-gold,.btn-tt{border-radius:2px!important;box-shadow:none!important;font-weight:500!important;letter-spacing:.08em;transform:none!important;min-height:52px;transition:background-color .2s,color .2s,border-color .2s!important}
.btn.p,.btn.coral,.btn.accent,.btn.solid,.btn.warm,.btn-gold{background:var(--x-ink)!important;color:#fff!important;border:1px solid var(--x-ink)!important}
.btn.p:hover,.btn.coral:hover,.btn.accent:hover,.btn.solid:hover,.btn-gold:hover{background:#000!important}
.btn.line,.btn-line{background:var(--x-green)!important;color:var(--x-ink)!important;border:1px solid var(--x-green)!important}
.btn.ghost,.btn-ghost,.btn.home{background:transparent!important;color:var(--x-ink)!important;border:1px solid var(--x-ink)!important}
.btn.ghost:hover,.btn-ghost:hover,.btn.home:hover{background:var(--x-ink)!important;color:#fff!important}
.btn.home{min-height:44px;border-color:var(--x-line)!important}
.btn.on-navy.ghost,.on-navy .btn.ghost,.xdark .btn.ghost,.xdark .btn-ghost{color:#fff!important;border-color:#fff!important}
.btn.on-navy.ghost:hover,.xdark .btn.ghost:hover{background:#fff!important;color:var(--x-ink)!important}
/* ヘッダー */
.hdr{background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--x-line)!important}
.hdr .row{height:72px!important}
.hdr .brand img{height:64px!important;width:auto;margin-left:-14px}
.hdr nav,.hdr .nav{font-size:13px!important;color:var(--x-sub)}
.hdr nav a:hover,.hdr .nav a:hover{color:var(--x-ink)!important}
.hdr .tel,.hdr .tel b{font-family:var(--x-en)!important;font-weight:500!important;font-size:17px!important;letter-spacing:.08em;color:var(--x-ink)!important}
.hdr .tel span{font-size:11px!important;color:var(--x-mute)!important}
.hdr .tel .ic{display:none}
.hdr .btn{min-height:44px;padding:0 18px!important;font-size:13px!important;white-space:nowrap}
@media(max-width:560px){.hdr .row{height:60px!important}.hdr .brand img{height:44px!important;margin-left:-10px}.hdr .btn.home{display:none}}
/* 節 */
section.sec{padding-top:96px!important;padding-bottom:96px!important}
@media(max-width:760px){section.sec{padding-top:64px!important;padding-bottom:64px!important}}
/* 新しい hero（文字入りの AI 画像をやめ、生の文字＋写真） */
.xhero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border-bottom:1px solid var(--x-line);background:#fff}
.xhero .tx{padding:80px 56px 72px max(24px,calc((100vw - 1080px)/2 + 22px));display:flex;flex-direction:column;justify-content:center}
.xhero h1{font:400 12px/1.8 var(--x-sans)!important;letter-spacing:.14em!important;color:var(--x-sub);margin:0}
.xhero .xcatch{font-size:clamp(28px,3vw,42px);line-height:1.6;margin-top:24px;color:var(--x-ink)}
.xhero .xcatch::after{content:"";display:block;width:56px;height:1px;background:var(--x-ink);margin-top:32px}
.xhero .xlead{color:var(--x-sub);font-size:16px;margin-top:26px;max-width:480px}
.xhero .xcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.xhero .xcta .btn{padding:0 24px;font-size:14px}
.xhero .xnote{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:32px;font-size:13.5px;color:var(--x-sub);list-style:none;padding:0}
.xhero .xnote li::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--x-camel);margin-right:9px;vertical-align:3px}
.xhero .ph{position:relative;min-height:600px;background:var(--x-paper);overflow:hidden}
.xhero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.xhero{grid-template-columns:1fr}.xhero .tx{padding:64px 24px 56px}.xhero .ph{min-height:0;height:52vw;max-height:440px}}
@media(max-width:760px){.xhero .tx{padding:40px 20px 44px}.xhero .xcatch{font-size:clamp(25px,7vw,32px)}.xhero .xcta .btn{flex:1 1 100%}}
/* 数字の帯 */
.xfacts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--x-line);background:#fff}
.xfacts div{padding:36px 28px 32px;border-right:1px solid var(--x-line)}
.xfacts div:last-child{border-right:0}
.xfacts b{display:block;font:300 48px/1 var(--x-en);color:var(--x-ink)}
.xfacts b small{font:400 14px/1 var(--x-sans);margin-left:6px}
.xfacts b.jp{font:500 36px/1.33 var(--x-serif)}
.xfacts span{display:block;font-size:13px;color:var(--x-sub);margin-top:14px}
@media(max-width:760px){.xfacts{grid-template-columns:1fr 1fr}.xfacts div{padding:24px 18px}.xfacts div:nth-child(2n){border-right:0}.xfacts div:nth-child(-n+2){border-bottom:1px solid var(--x-line)}.xfacts b{font-size:36px}.xfacts b.jp{font-size:28px}}
/* 番号つきの手順・3列の一覧（画像だった図を生の文字に） */
.xcols{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:40px;margin-top:48px;text-align:left}
.xcols>div{border-top:1px solid var(--x-ink);padding-top:22px}
.xcols i{font:300 34px/1 var(--x-en);font-style:normal;display:block;color:var(--x-ink)}
.xcols h3{font:500 20px/1.6 var(--x-serif)!important;letter-spacing:.06em;margin-top:18px;color:var(--x-ink)}
.xcols p,.xcols li{font-size:15px;color:var(--x-sub);margin-top:10px;line-height:1.9}
.xcols ul{list-style:none;padding:0;margin:8px 0 0}
.xcols li{padding:9px 0;border-bottom:1px solid var(--x-line);margin:0}
.xcols .res{display:block;margin-top:14px;font-size:14px;font-weight:600;color:var(--x-ink)}
@media(max-width:900px){.xcols{grid-template-columns:1fr;gap:28px;margin-top:32px}}
.xphoto{margin-top:48px}.xphoto img{width:100%;height:auto;display:block}
.xcap{font-size:13px;color:var(--x-sub);margin-top:12px;text-align:left}
/* 暗い帯（最後の相談欄など） */
.xdark,.cta-final,.contact,.final,.sec.dark{background:var(--x-ink)!important;color:#fff}
.cta-final h2,.contact h2,.final h2,.sec.dark h2{color:#fff!important}
.cta-final .kicker,.contact .eyebrow,.final .kicker,.sec.dark .kicker{color:var(--x-camel-l)!important}
.cta-final .btn.p,.cta-final .btn.coral,.contact .btn.p,.contact .btn.coral,.final .btn-gold,.sec.dark .btn.accent,.sec.dark .btn.warm,.xdark .btn.p{background:#fff!important;color:var(--x-ink)!important;border-color:#fff!important}
.cta-final .btn.ghost,.contact .btn.ghost,.final .btn-ghost,.sec.dark .btn.ghost{color:#fff!important;border-color:#fff!important}
/* フッター */
.ft,.foot,body>footer{background:#121110!important;color:#A8A299!important}
.ft a:hover,.foot a:hover,body>footer a:hover{color:#fff}
.ft .brand img{height:44px!important;width:auto;margin-left:-10px}
/* スマホの固定バー */
.mbar{gap:0!important;padding:0 0 env(safe-area-inset-bottom)!important;background:#fff!important;border-top:1px solid var(--x-line)!important;box-shadow:none!important}
.mbar a,.mbar .btn{flex:1;min-height:56px;border-radius:0!important;border:0!important;border-right:1px solid var(--x-line)!important;font-size:13px!important;padding:0 6px!important}
.mbar a:first-child{background:var(--x-ink)!important;color:#fff!important}
.mbar a:not(:first-child){background:#fff!important;color:var(--x-ink)!important}
.mbar .btn.line::before,.mbar .btn-line::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--x-green);margin-right:8px}
/* もも（案内係）：金の縁と紺の帯をやめ、細い墨の線に。跳ねる入場もやめる */
.momoc{right:24px!important;bottom:24px!important;animation:none!important}
.momoc .lau{width:76px!important;height:76px!important;border-radius:50%!important;border:1px solid var(--x-ink)!important;padding:4px!important;background:#fff!important;filter:none!important;animation:none!important}
.momoc .lau::after{display:none!important}
.momoc .lau img{border:0!important;border-radius:50%!important;animation:none!important;transform:none!important}
.momoc .lau .dot{right:3px!important;top:3px!important;width:12px!important;height:12px!important;border:2px solid #fff!important;background:var(--x-green)!important;border-radius:50%!important}
.momoc .lau .tag{bottom:-9px!important;background:var(--x-ink)!important;color:#fff!important;border:0!important;font-size:10.5px!important;font-weight:400!important;padding:3px 10px!important;border-radius:999px!important}
.momoc .hint{right:90px!important;bottom:20px!important;background:#fff!important;color:var(--x-ink)!important;border:1px solid var(--x-line)!important;border-radius:2px!important;box-shadow:none!important;font-weight:400!important;font-size:13px!important}
.momoc .panel{bottom:96px!important;border:1px solid var(--x-ink)!important;border-radius:0!important;box-shadow:none!important}
.momoc .ph{background:#fff!important;color:var(--x-ink)!important;border-bottom:1px solid var(--x-line)}
.momoc .ph img{border:0!important}
.momoc .ph .st{color:var(--x-sub)!important}.momoc .ph .x{color:var(--x-ink)!important}
.momoc .msg{background:var(--x-paper)!important;color:var(--x-ink)!important;border-radius:0!important}
.momoc .msg.user{background:var(--x-ink)!important;color:#fff!important;font-weight:400!important}
.momoc .qb{border:1px solid var(--x-line)!important;border-radius:0!important;color:var(--x-ink)!important;font-weight:500!important}
.momoc .qb:hover{border-color:var(--x-ink)!important;background:#fff!important}
.momoc .ca{border-radius:0!important;font-weight:500!important}
.momoc .ca.line{background:var(--x-green)!important;color:var(--x-ink)!important}
.momoc .ca.tel{background:var(--x-ink)!important;color:#fff!important}
.momoc .ca.pg{border:1px solid var(--x-ink)!important;color:var(--x-ink)!important}
@media(max-width:899px){.momoc{right:12px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important}.momoc .lau{width:60px!important;height:60px!important}.momoc .hint{right:70px!important;bottom:12px!important}.momoc .panel{bottom:80px!important}}
/* ★3AI R1 #4：スマホの固定バーでも LINE は緑の塗り（見分けがつくように）。文字は墨 */
.mbar a[href*="lin.ee"],.mbar a[href*="line.me"]{background:var(--x-green)!important;color:var(--x-ink)!important}
.mbar a[href*="lin.ee"]::before,.mbar a[href*="line.me"]::before{display:none!important}
/* ★3AI R1 #5：暗い帯の中では、キーボードの現在位置の枠を白に */
.xdark :focus-visible,.cta-final :focus-visible,.contact :focus-visible,.final :focus-visible,.sec.dark :focus-visible,.ft :focus-visible,.foot :focus-visible,body>footer :focus-visible{outline-color:#fff}
/* ページ固有の下の帯（.stick／.sticky）の LINE も緑の塗り（3AI 総点検 R1 #3） */
.stick a[href*="lin.ee"],.sticky a[href*="lin.ee"]{background:var(--x-green)!important;color:var(--x-ink)!important;border-color:var(--x-green)!important}
/* ヘッダーのロゴがヘッダー内の並びで横に縮んでいた（3AI 総点検 R1・審判の追加）＝縮ませない */
.hdr .brand{flex:0 0 auto}
.hdr .brand img,.brand img{flex-shrink:0;max-width:none}
/* ★2026-10-03 広い画面で写真だけ右端まで伸び、文字は中央の枠で左に大きな余白が出ていた（オーナー指摘）→ 1600px 以上はヒーローを幅 1440px に収め、文字をメニューの左端に揃える（事業ページのメニュー枠は 1080px＋左右22px＝トップの 1200px と違う） */
@media (min-width:1600px){.xhero{padding-inline:calc((100vw - 1440px)/2)}.xhero .tx{padding-left:202px}}