/*
  司法書士染谷事務所 共通スタイル
  主な色は :root、ページ別レイアウトは下部で編集できます。
*/

:root{
--ink:#2b2f36;
--ink-soft:#3d434c;
--muted:#464c55;
--blue-900:#1d4fc4;
--blue-800:#153e9e;
--blue-700:#2a63d6;
--blue-500:#6f9be6;
--blue-300:#bcd1f4;
--blue-100:#e4edfb;
--blue-050:#f1f5fc;
--paper:#fff;
--paper-deep:#eef2f9;
--dark:#26292e;
--dark-line:#3b3f46;
--accent:#c73d30;
--line:#dfe3ea;
--line-strong:#c4cbd6;
--white:#fff;
--font-serif:"Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
--font-sans:"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif}

*{
box-sizing:border-box}

html{
scroll-behavior:smooth}

body{
color:var(--ink);
background:var(--paper);
font-family:var(--font-sans);
margin:0;
line-height:1.8}

a{
color:inherit;
text-decoration:none}

button,input,textarea{
font:inherit}

.site-header{
z-index:50;
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
background:#fffffff2;
border-bottom:1px solid var(--line);
position:sticky;
top:0}

.header-inner{
align-items:center;
gap:30px;
max-width:1240px;
min-height:84px;
margin:auto;
padding:0 28px;
display:flex}

.brand{
align-items:center;
gap:12px;
min-width:245px;
display:flex}

.brand-mark{
border:2px solid var(--blue-900);
width:43px;
height:43px;
color:var(--blue-900);
font:500 21px/1 var(--font-serif);
background:var(--white);
border-radius:50% 50% 48% 52%;
place-items:center;
display:grid}

.brand small,.brand strong{
display:block}

.brand small{
color:var(--blue-700);
letter-spacing:.13em;
font-size:10px}

.brand strong{
color:var(--ink);
font:600 18px/1.35 var(--font-serif);
letter-spacing:.04em;
margin-top:1px}

nav{
white-space:nowrap;
justify-content:center;
align-items:center;
gap:23px;
margin-left:auto;
font-size:13px;
font-weight:600;
display:flex}

nav a{
border-bottom:3px solid #0000;
padding:28px 0 25px;
transition:all .2s}

nav a:hover,nav a:focus-visible{
color:var(--blue-700);
border-color:var(--blue-500)}

.header-phone{
border-left:1px solid var(--line);
color:var(--blue-900);
text-align:right;
padding-left:22px;
line-height:1.2}

.header-phone small,.header-phone strong{
display:block}

.header-phone small{
color:var(--muted);
font-size:10px}

.header-phone strong{
letter-spacing:.03em;
margin-top:5px;
font-size:18px}

.hero{
background:linear-gradient(115deg,var(--paper) 0%,var(--paper) 45%,var(--blue-050) 100%);
position:relative;
overflow:hidden}

.hero-wash{
background:#bcd1f466;
border-radius:46% 54% 64% 36%;
width:720px;
height:720px;
position:absolute;
top:-220px;
right:-160px;
transform:rotate(18deg)}

.hero-inner{
grid-template-columns:1.05fr .95fr;
align-items:center;
gap:64px;
max-width:1240px;
min-height:760px;
margin:auto;
padding:80px 28px 74px;
display:grid;
position:relative}

.eyebrow{
color:var(--blue-700);
letter-spacing:.22em;
text-transform:uppercase;
margin:0 0 13px;
font-size:11px;
font-weight:800}

.hero h1{
font:600 clamp(39px, 4.6vw, 66px)/1.35 var(--font-serif);
letter-spacing:.05em;
color:var(--ink);
margin:0}

.hero h1 em{
color:var(--blue-900);
font-style:normal}

.hero-lead{
color:var(--ink-soft);
margin:27px 0 0;
font-size:16px;
line-height:2}

.hero-badges{
flex-wrap:wrap;
gap:9px;
margin:25px 0 0;
display:flex}

.hero-badges span{
border:1px solid var(--blue-300);
color:var(--blue-800);
background:var(--blue-050);
border-radius:999px;
padding:5px 12px;
font-size:11px;
font-weight:700}

.hero-actions{
gap:12px;
margin-top:27px;
display:flex}

.button{
letter-spacing:.03em;
border-radius:6px;
justify-content:center;
align-items:center;
gap:7px;
min-height:58px;
padding:11px 24px;
font-size:14px;
font-weight:700;
transition:transform .2s,box-shadow .2s,background .2s;
display:inline-flex}

.button:hover{
transform:translateY(-2px)}

.button-primary{
background:var(--blue-900);
min-width:205px;
color:var(--white);
flex-direction:column;
gap:0;
font-size:19px;
line-height:1.2;
box-shadow:0 13px 30px #1d4fc433}

.button-primary small{
opacity:.85;
font-size:10px;
font-weight:500}

.button-soft{
border:2px solid var(--blue-500);
background:var(--white);
color:var(--blue-900)}

.address-card{
border-top:1px solid var(--line);
gap:11px;
margin-top:24px;
padding-top:20px;
font-size:12px;
display:flex}

.address-card .pin{
color:var(--blue-700);
font-size:10px}

.address-card b,.address-card small{
display:block}

.address-card small{
color:var(--muted);
margin-top:3px}

.hero-visual{
min-height:600px;
position:relative}

.photo-frame{
border:10px solid #ffffffe6;
border-radius:52% 48% 47% 53%/34% 33% 67% 66%;
width:88%;
height:430px;
position:absolute;
top:0;
right:0;
overflow:hidden;
box-shadow:0 24px 60px #1d4fc429}

.photo-frame img{
object-fit:cover;
width:100%;
height:100%}

.photo-frame>span{
width:max-content;
color:var(--blue-900);
background:#ffffffe0;
border-radius:99px;
padding:5px 12px;
font-size:10px;
position:absolute;
bottom:18px;
left:50%;
transform:translate(-50%)}

.hero-map-card{
background:#fffffffa;
border-radius:13px;
width:72%;
padding:17px;
position:absolute;
bottom:0;
left:0;
box-shadow:0 18px 45px #1d4fc42e}

.hero-map-card p{
margin:0 0 9px;
font-size:12px;
line-height:1.5}

.hero-map-card p b{
color:var(--blue-900)}

.hero-map-card p small{
color:var(--muted)}

.mini-map{
color:var(--ink-soft);
background:var(--blue-050);
border-radius:7px;
height:155px;
font-size:9px;
line-height:1.35;
position:relative;
overflow:hidden}

.map-line{
background:#fff;
position:absolute;
box-shadow:0 0 0 1px var(--line)}

.map-line-horizontal{
width:110%;
height:28px;
top:70px;
left:-10px;
transform:rotate(-4deg)}

.map-line-vertical{
width:27px;
height:180px;
top:-10px;
left:91px;
transform:rotate(3deg)}

.map-station,.map-office,.map-lawson,.map-walk{
text-align:center;
position:absolute}

.map-station{
border-left:4px solid var(--blue-700);
background:var(--blue-100);
padding:7px 10px;
top:50px;
left:12px}

.map-office{
border:1px solid var(--blue-500);
color:var(--blue-900);
background:#fff;
border-radius:5px;
padding:7px 9px;
font-weight:700;
top:20px;
right:12px}

.map-office span{
color:var(--accent)}

.map-lawson{
color:var(--blue-700);
font-weight:800;
bottom:13px;
right:18px}

.map-lawson small{
color:var(--muted);
font-weight:500}

.map-walk{
color:var(--blue-700);
font-weight:700;
top:42px;
left:107px;
transform:rotate(-4deg)}

.section{
max-width:1180px;
margin:auto;
padding:105px 28px}

.section-heading{
text-align:center}

.section-heading h2,.contact-strip h2{
font:600 clamp(30px, 3.4vw, 44px)/1.4 var(--font-serif);
letter-spacing:.07em;
margin:0}

.section-heading>p:last-child{
color:var(--muted);
margin:13px auto 0;
font-size:14px}

.service-grid{
grid-template-columns:repeat(5,1fr);
gap:12px;
margin-top:48px;
display:grid}

.service-card{
border:1px solid var(--line);
background:linear-gradient(160deg,#fff,var(--blue-050));
border-radius:9px;
flex-direction:column;
min-height:190px;
padding:25px 20px;
transition:all .22s;
display:flex}

.service-card:hover{
border-color:var(--blue-500);
transform:translateY(-5px);
box-shadow:0 18px 35px #1d4fc41a}

.service-card>span{
color:var(--blue-900);
font:500 12px/1 var(--font-serif);
letter-spacing:.15em}

.service-card h3{
font:600 18px/1.6 var(--font-serif);
letter-spacing:.05em;
margin:auto 0}

.service-card b{
color:var(--blue-700);
align-self:flex-end}

.center{
text-align:center;
margin-top:37px}

.text-link{
border-bottom:2px solid var(--blue-300);
color:var(--blue-900);
padding-bottom:5px;
font-size:13px;
font-weight:700}

.text-link span{
margin-left:12px}

.flow-preview{
background:var(--paper-deep);
max-width:none}

.flow-preview>*{
max-width:1124px;
margin-left:auto;
margin-right:auto}

.flow-grid{
grid-template-columns:repeat(4,1fr);
gap:28px;
margin-top:52px;
display:grid}

.flow-card{
border-left:2px solid var(--blue-300);
padding:28px 20px 20px 24px;
position:relative}

.flow-card:after{
content:"→";
color:var(--blue-500);
position:absolute;
top:45px;
right:-18px}

.flow-card:last-child:after{
display:none}

.flow-card>span{
color:var(--blue-900);
font:500 13px/1 var(--font-serif);
letter-spacing:.15em}

.flow-card h3{
font:600 19px/1.5 var(--font-serif);
margin:13px 0 8px}

.flow-card p{
color:var(--muted);
margin:0;
font-size:12px;
line-height:1.9}

.contact-strip{
background:var(--blue-900);
color:#fff;
justify-content:space-between;
align-items:center;
gap:40px;
padding:70px max(28px,50% - 562px);
display:flex}

.contact-strip .eyebrow{
color:var(--blue-300)}

.contact-strip p:last-child{
color:#dbe6fb;
margin:9px 0 0;
font-size:13px}

.contact-strip-actions{
align-items:center;
gap:18px;
display:flex}

.button-white{
min-width:220px;
color:var(--blue-900);
background:#fff;
flex-direction:column;
gap:0;
font-size:19px;
line-height:1.25}

.button-white small{
color:var(--muted);
font-size:10px;
font-weight:500}

.mail-pending{
color:#dbe6fb;
max-width:180px;
font-size:10px;
line-height:1.6}

footer{
background:var(--dark);
padding:55px 28px 20px}

.footer-grid{
max-width:1124px;
color:#c3c8d0;
grid-template-columns:1.1fr 1fr .7fr;
align-items:start;
gap:60px;
margin:auto;
font-size:12px;
display:grid}

.footer-grid p{
margin:0 0 9px}

.footer-grid>div:last-child{
color:#fff}

.footer-grid .brand{
align-items:center}

.copyright{
border-top:1px solid var(--dark-line);
color:#8b9199;
text-align:center;
max-width:1124px;
margin:38px auto 0;
padding-top:16px;
font-size:9px}

.page-hero{
text-align:center;
background:radial-gradient(circle at 78% 20%,#bcd1f466,#0000 29%),linear-gradient(135deg,var(--paper),var(--blue-100));
place-items:center;
min-height:360px;
padding:85px 28px;
display:grid}

.page-hero>div{
max-width:760px}

.page-hero h1{
font:600 clamp(36px, 5vw, 56px)/1.4 var(--font-serif);
letter-spacing:.08em;
margin:0}

.page-hero p:last-child{
color:var(--muted);
margin:16px auto 0;
font-size:14px}

.page-section{
max-width:1124px;
margin:auto;
padding:95px 28px}

.page-section+.page-section{
padding-top:15px}

.section-heading-left{
text-align:left}

.section-heading-left h2{
font-size:34px}

.greeting-layout,.fees-layout,.office-layout{
grid-template-columns:.8fr 1.2fr;
align-items:center;
gap:74px;
display:grid}

.portrait-placeholder{
background:linear-gradient(145deg,var(--blue-100),var(--blue-300));
border-radius:160px 160px 14px 14px;
min-height:520px;
position:relative;
overflow:hidden}

.portrait-head{
background:#a9c3f0;
border-radius:50%;
width:118px;
height:135px;
position:absolute;
top:98px;
left:50%;
transform:translate(-50%)}

.portrait-body{
background:var(--blue-500);
border-radius:50% 50% 10px 10px;
width:275px;
height:250px;
position:absolute;
bottom:47px;
left:50%;
transform:translate(-50%)}

.portrait-placeholder span{
width:max-content;
color:var(--blue-900);
background:#ffffffdb;
border-radius:99px;
padding:5px 12px;
font-size:10px;
position:absolute;
bottom:18px;
left:50%;
transform:translate(-50%)}

.prose-card{
color:var(--ink-soft);
font-size:15px;
line-height:2.15}

.prose-card p{
margin:0 0 17px}

.signature{
text-align:right;
margin-top:40px!important}

.signature span{
font:600 22px var(--font-serif);
color:var(--ink);
margin-left:10px}

.profile-section{
max-width:900px}

.info-list{
border-top:1px solid var(--line);
margin:35px 0 0}

.info-list div{
border-bottom:1px solid var(--line);
grid-template-columns:180px 1fr;
padding:18px 13px;
display:grid}

.info-list dt{
color:var(--blue-900);
font-size:12px;
font-weight:700}

.info-list dd{
color:var(--ink-soft);
margin:0;
font-size:13px}

.info-list dd small{
color:var(--muted)}

.simple-service-list{
border-top:1px solid var(--line)}

.simple-service-list article{
border-bottom:1px solid var(--line);
grid-template-columns:90px 1fr 18px;
align-items:center;
min-height:150px;
padding:28px 25px 28px 12px;
transition:background .2s;
display:grid}

.simple-service-list article:hover{
background:var(--blue-050)}

.service-number{
color:var(--blue-900);
font:500 14px var(--font-serif);
letter-spacing:.16em}

.simple-service-list small{
color:var(--blue-700);
letter-spacing:.14em;
font-size:10px}

.simple-service-list h2{
font:600 25px var(--font-serif);
letter-spacing:.06em;
margin:5px 0 0}

.simple-service-list p{
max-width:820px;
color:var(--muted);
margin:10px 0 0;
font-size:13px;
line-height:1.9}

.service-dot{
background:var(--blue-900);
border-radius:50%;
width:8px;
height:8px}

.quiet-note{
border-left:4px solid var(--blue-900);
background:var(--blue-050);
margin:45px 0 0;
padding:27px 30px}

.quiet-note b{
font:600 16px var(--font-serif)}

.quiet-note p{
color:var(--muted);
margin:7px 0 0;
font-size:12px}

.free-consultation-card{
aspect-ratio:1;
background:linear-gradient(145deg, var(--blue-900), var(--blue-700));
color:#fff;
text-align:center;
border-radius:50%;
place-content:center;
display:grid;
box-shadow:0 24px 50px #1d4fc433}

.free-consultation-card p,.free-consultation-card strong,.free-consultation-card b{
margin:0;
line-height:1.2}

.free-consultation-card p{
letter-spacing:.12em;
font-size:17px}

.free-consultation-card strong{
font:600 72px var(--font-serif);
margin:10px 0 4px}

.free-consultation-card strong span{
font-size:18px}

.free-consultation-card b{
letter-spacing:.18em;
font-size:25px}

.fees-copy h2{
font:600 29px/1.75 var(--font-serif);
color:var(--ink);
margin:0 0 32px}

.fee-points{
flex-wrap:wrap;
gap:8px;
margin-top:28px;
display:flex}

.fee-points span{
border:1px solid var(--blue-300);
color:var(--blue-800);
background:var(--blue-050);
border-radius:99px;
padding:7px 12px;
font-size:10px;
font-weight:700}

.access-section{
max-width:920px}

.mini-map-large{
border:1px solid var(--line);
height:390px;
margin-top:28px;
font-size:14px}

.mini-map-large .map-line-horizontal{
height:64px;
top:185px}

.mini-map-large .map-line-vertical{
width:60px;
height:440px;
left:275px}

.mini-map-large .map-station{
padding:18px 30px;
top:155px;
left:45px}

.mini-map-large .map-office{
padding:17px 25px;
top:55px;
right:60px}

.mini-map-large .map-lawson{
bottom:38px;
right:78px}

.mini-map-large .map-walk{
top:125px;
left:330px}

.map-caption{
color:var(--muted);
text-align:right;
margin:14px 0 0;
font-size:11px}

.office-layout{
align-items:start}

.office-image{
border-radius:12px;
width:100%;
box-shadow:0 18px 40px #1d4fc421}

.image-caption{
color:var(--muted);
margin:8px 0 0;
font-size:9px}

.office-info{
margin-top:0}

.office-info div{
grid-template-columns:120px 1fr}

.service-area-list>span{
margin-bottom:12px;
line-height:1.9;
display:block}

.service-area-list .area-name{
white-space:nowrap;
display:inline-block}

.service-area-list b{
color:var(--blue-900);
margin-bottom:2px;
font-size:11px;
display:block}

.service-area-list small{
margin-top:5px;
line-height:1.8;
display:block}

.google-map-section iframe{
background:var(--blue-050);
border:0;
border-radius:11px;
width:100%;
height:460px;
margin-top:28px}

.news-categories{
flex-wrap:wrap;
gap:9px;
margin-bottom:35px;
display:flex}

.news-categories span{
border:1px solid var(--line);
color:var(--muted);
border-radius:99px;
padding:8px 16px;
font-size:11px}

.news-categories .active{
background:var(--blue-900);
border-color:var(--blue-900);
color:#fff}

.news-list{
border-top:1px solid var(--line)}

.news-list article{
border-bottom:1px solid var(--line);
padding:35px 5px}

.news-list time{
color:var(--muted);
letter-spacing:.08em;
font-size:11px}

.news-list article>span{
background:var(--blue-100);
color:var(--blue-900);
border-radius:99px;
margin-left:14px;
padding:4px 9px;
font-size:9px}

.news-list h2{
font:600 21px var(--font-serif);
margin:15px 0 7px}

.news-list p{
max-width:760px;
color:var(--muted);
margin:0;
font-size:12px}

.news-note{
margin-top:60px}

.contact-form-section{
max-width:940px}

.contact-form{
border:1px solid var(--line);
background:var(--blue-050);
border-radius:12px;
margin-top:45px;
padding:38px}

.form-grid{
grid-template-columns:1fr 1fr;
gap:22px;
display:grid}

.contact-form label{
color:var(--ink);
font-size:12px;
font-weight:700;
display:block}

.contact-form label>span{
background:var(--accent);
color:#fff;
border-radius:3px;
margin-left:7px;
padding:2px 6px;
font-size:8px}

.contact-form input,.contact-form select,.contact-form textarea{
width:100%;
color:var(--ink);
background:#fff;
border:1px solid var(--line-strong);
border-radius:5px;
outline:none;
margin-top:7px;
padding:12px 14px}

.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
border-color:var(--blue-700);
box-shadow:0 0 0 3px #6f9be640}

.contact-form>label{
margin-top:22px}

.privacy-check{
align-items:center;
gap:8px;
color:var(--muted)!important;
font-weight:500!important;
display:flex!important}

.privacy-check input{
width:auto;
margin:0}

.form-submit{
cursor:pointer;
border:0;
margin:25px auto 0}

.form-notice{
border:1px solid var(--blue-300);
color:var(--muted);
text-align:center;
background:#fff;
border-radius:7px;
margin-top:20px;
padding:17px;
font-size:11px}

.form-notice b{
color:var(--blue-900)}

@media (width<=1050px){
.header-phone{
display:none}

.header-inner{
min-height:74px}

.hero-inner{
gap:35px;
min-height:auto}

.hero-visual{
min-height:540px}

.service-grid{
grid-template-columns:repeat(3,1fr)}

}

@media (width<=780px){
.header-inner{
flex-wrap:wrap;
gap:7px;
min-height:auto;
padding:13px 18px 9px}

.brand{
min-width:0}

.brand-mark{
width:37px;
height:37px;
font-size:18px}

.brand strong{
font-size:15px}

nav{
order:3;
justify-content:flex-start;
gap:20px;
width:100%;
margin:0;
padding:4px 0 0;
overflow-x:auto}

nav a{
padding:5px 0 7px;
font-size:11px}

.hero-inner{
grid-template-columns:1fr;
padding:57px 20px 58px}

.hero h1{
font-size:clamp(36px,11vw,52px)}

.hero-lead{
font-size:14px}

.desktop{
display:none}

.hero-actions{
flex-direction:column}

.hero-actions .button{
width:100%}

.hero-visual{
min-height:490px;
margin-top:10px}

.photo-frame{
width:93%;
height:350px}

.hero-map-card{
width:83%}

.section{
padding:75px 20px}

.service-grid{
grid-template-columns:1fr 1fr}

.service-card{
min-height:150px}

.flow-grid{
grid-template-columns:1fr;
gap:4px}

.flow-card:after{
display:none}

.contact-strip{
flex-direction:column;
align-items:flex-start;
padding:60px 20px}

.contact-strip-actions{
flex-direction:column;
align-items:flex-start;
width:100%}

.button-white{
width:100%}

.footer-grid{
grid-template-columns:1fr;
gap:22px}

.page-hero{
min-height:300px;
padding:65px 20px}

.page-section{
padding:70px 20px}

.greeting-layout,.fees-layout,.office-layout{
grid-template-columns:1fr;
gap:40px}

.portrait-placeholder{
width:100%;
max-width:360px;
min-height:430px;
margin:auto}

.info-list div{
grid-template-columns:1fr;
gap:5px}

.simple-service-list article{
grid-template-columns:52px 1fr 8px;
padding:24px 8px 24px 4px}

.simple-service-list h2{
font-size:22px}

.simple-service-list p{
font-size:12px}

.free-consultation-card{
width:100%;
max-width:330px;
margin:auto}

.mini-map-large{
height:300px}

.mini-map-large .map-line-horizontal{
top:142px}

.mini-map-large .map-line-vertical{
left:34%}

.mini-map-large .map-station{
padding:12px 18px;
top:120px;
left:15px}

.mini-map-large .map-office{
padding:12px 16px;
top:35px;
right:15px}

.mini-map-large .map-lawson{
bottom:28px;
right:24px}

.mini-map-large .map-walk{
top:90px;
left:41%}

.form-grid{
grid-template-columns:1fr}

.contact-form{
padding:25px 18px}

}

@media (width<=430px){
.service-grid{
grid-template-columns:1fr}

.hero-visual{
min-height:460px}

.photo-frame{
height:325px}

.hero-map-card{
width:91%}

}

/* ローカル版で追加した操作性・アクセシビリティ調整 */
img{
display:block;
max-width:100%;
height:auto}

button,input,select,textarea{
font-family:inherit}

.skip-link{
position:fixed;
top:10px;
left:10px;
z-index:100;
color:#fff;
background:var(--blue-900);
border-radius:4px;
padding:8px 12px;
transform:translateY(-180%)}

.skip-link:focus{
transform:translateY(0)}

nav a[aria-current="page"]{
color:var(--blue-900);
border-color:var(--blue-500)}

.flow-card:after{
content:"→"}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:3px solid var(--blue-500);
outline-offset:3px}

@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}

*,*:before,*:after{
scroll-behavior:auto!important;
transition:none!important}}


/* Findy風の配色調整：見出しを青に、フッターを濃色に */
.hero h1,.section-heading h2,.page-hero h1,.fees-copy h2,.section-heading-left h2{
color:var(--blue-900)}

.button-primary:hover,.news-categories .active{
background:var(--blue-800)}

.button-soft{
border-color:var(--blue-900)}

.hero-badges span{
background:var(--white)}

footer .brand strong{
color:#fff}

footer .brand small{
color:var(--blue-300)}

footer .brand-mark{
background:var(--white)}

footer a:hover{
color:var(--blue-300)}

/* =====================================================
   文字の段階（大見出し／小見出し／本文）と、トップ上部の再構成
   数字を変えるときはここを編集してください。
   ===================================================== */
body{
font-size:18px;
line-height:1.9}

/* --- 本文・補足の最小サイズ（60〜70代向け） --- */
nav{
font-size:16px}

.header-phone small,.brand small{
font-size:13px}

.header-phone strong{
font-size:20px}

.brand strong{
font-size:19px}

.eyebrow{
font-size:14px}

.section-heading>p:last-child,.page-hero p:last-child,.contact-strip p:last-child{
font-size:18px}

.flow-card p,.simple-service-list p,.news-list p,.quiet-note p,.info-list dd,.prose-card,.footer-grid,.contact-form label,.form-notice,.privacy-check{
font-size:17px}

.service-card>span,.flow-card>span,.service-number,.simple-service-list small,.info-list dt,.news-list time,.news-categories span,.fee-points span,.map-caption,.image-caption,.mail-pending,.service-area-list b,.copyright,.button-primary small,.button-white small,.portrait-placeholder span,.hero-visual span,.contact-form label>span{
font-size:14px}

.copyright{
font-size:13px}

.news-list article>span{
font-size:13px}

.button{
font-size:17px}

.button-primary,.button-white{
font-size:22px}

.contact-form input,.contact-form select,.contact-form textarea{
font-size:18px}

/* --- 見出し（参考デザインに合わせてゴシック太字） --- */
.section-heading h2,.contact-strip h2,.page-hero h1,.section-heading-left h2,.fees-copy h2{
font-family:var(--font-sans);
font-weight:700;
letter-spacing:.02em}

.section-heading h2,.contact-strip h2{
font-size:clamp(32px,3.8vw,46px);
line-height:1.35}

.section-heading-left h2{
font-size:clamp(30px,3.4vw,40px)}

.page-hero h1{
font-size:clamp(38px,5.5vw,64px);
line-height:1.3}

.fees-copy h2{
font-size:clamp(26px,2.6vw,32px);
line-height:1.6}

.service-card h3,.flow-card h3{
font-size:22px}

.simple-service-list h2{
font-size:28px}

.news-list h2{
font-size:24px}

.quiet-note b{
font-size:19px}

.signature span{
font-size:24px}

.section-heading{
text-align:left}

.section-heading>p:last-child{
margin-left:0}

.center{
text-align:left}

/* --- トップ上部：大見出し＋小見出し＋本文、右に四角い写真 --- */
.hero{
background:
  linear-gradient(90deg,var(--line) 1px,#0000 1px) 0 0/25% 100% repeat-x,
  var(--paper);
overflow:visible}

.hero-inner{
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
align-items:center;
gap:56px;
max-width:none;
min-height:720px;
padding:72px 0 72px max(28px,50% - 620px)}

.hero h1{
font:700 clamp(44px,6.8vw,100px)/1.15 var(--font-sans);
letter-spacing:-.01em;
color:var(--blue-900);
margin:0}

.hero h1.hero-sub{
font-family:var(--font-sans);
font-size:clamp(26px,2.8vw,36px);
font-weight:700;
line-height:1.5;
letter-spacing:.02em;
color:var(--blue-900);
margin:0}

.hero-lead{
font-size:18px;
font-weight:500;
line-height:2;
color:var(--ink);
margin:22px 0 0}

.hero-note{
word-break:keep-all;
color:var(--muted);
font-size:16px;
font-weight:700;
margin:26px 0 0}

.hero-note span{
color:var(--blue-300);
margin:0 .5em}

.hero-actions{
margin-top:24px}

.hero-address{
color:var(--muted);
font-size:15px;
line-height:1.8;
margin:32px 0 0}

.hero-address b{
color:var(--ink);
font-weight:700}

.hero-visual{
min-height:0;
height:600px;
position:relative;
overflow:hidden;
border-radius:14px 0 0 14px}

.hero-visual img{
width:100%;
height:100%;
object-fit:cover;
display:block}

.hero-visual span{
color:var(--blue-900);
background:#fffffffa;
border-radius:99px;
padding:6px 14px;
position:absolute;
left:20px;
bottom:20px}

@media (width<=1050px){
.hero-inner{
gap:32px;
min-height:auto}

.hero-visual{
height:480px}
}

@media (width<=780px){
.hero{
background:var(--paper)}

.hero-inner{
grid-template-columns:1fr;
padding:48px 20px 0}

.hero h1{
font-size:clamp(40px,11vw,56px)}

.hero h1.hero-sub{
font-size:24px;
margin-top:0}

.hero-lead{
font-size:17px}

.hero-visual{
height:300px;
margin:36px -20px 0;
border-radius:0}

.section-heading h2,.contact-strip h2{
font-size:30px}

nav a{
font-size:15px}
}

/* --- ご相談の流れ：縦並び --- */
.flow-grid{
grid-template-columns:1fr;
gap:0;
max-width:820px;
margin:44px 0 0}

.flow-card{
grid-template-columns:72px 1fr;
column-gap:24px;
align-items:start;
border-left:0;
padding:0 0 40px;
display:grid;
position:relative}

.flow-card:before{
content:"";
background:var(--blue-300);
width:2px;
position:absolute;
top:60px;
bottom:0;
left:35px}

.flow-card:last-child:before{
display:none}

.flow-card:last-child{
padding-bottom:0}

.flow-card:after{
display:none}

.flow-card>span{
grid-row:1 / span 2;
border:2px solid var(--blue-900);
color:var(--blue-900);
background:var(--white);
border-radius:50%;
width:72px;
height:72px;
font:700 20px/1 var(--font-sans);
letter-spacing:0;
place-items:center;
display:grid}

.flow-card h3{
margin:0 0 8px;
padding-top:18px}

.flow-card p{
margin:0}

@media (width<=780px){
.flow-grid{
margin-top:32px}

.flow-card{
grid-template-columns:56px 1fr;
column-gap:16px;
padding-bottom:32px}

.flow-card:before{
top:50px;
left:27px}

.flow-card>span{
width:56px;
height:56px;
font-size:17px}

.flow-card h3{
padding-top:12px}
}

/* =====================================================
   PCのコンテンツ幅の統一
   外枠 1120px ／ 文章ブロック 760px ／ フォーム 840px ／ 左右余白 28px
   ===================================================== */
:root{
--w-site:1120px;
--w-text:760px;
--w-form:840px;
--pad:28px}

/* 外枠（余白込みの指定は「幅＋余白×2」） */
.header-inner{
max-width:calc(var(--w-site) + var(--pad) * 2);
padding-left:var(--pad);
padding-right:var(--pad)}

.hero-inner{
padding-left:max(var(--pad),50% - var(--w-site) / 2)}

.section,.page-section,.access-section{
max-width:calc(var(--w-site) + var(--pad) * 2);
padding-left:var(--pad);
padding-right:var(--pad)}

.flow-preview{
max-width:none}

.flow-preview>*{
max-width:var(--w-site)}

.contact-strip{
padding-left:max(var(--pad),50% - var(--w-site) / 2);
padding-right:max(var(--pad),50% - var(--w-site) / 2)}

.footer-grid,.copyright{
max-width:var(--w-site)}

/* 文章ブロック */
.flow-grid,.profile-section .info-list,.simple-service-list p,.news-list p,.page-hero>div{
max-width:var(--w-text)}

.profile-section{
max-width:calc(var(--w-site) + var(--pad) * 2)}

/* フォーム */
.contact-form-section{
max-width:calc(var(--w-form) + var(--pad) * 2)}

@media (width<=780px){
:root{
--pad:20px}
}

.mini-map-large,.map-caption{
max-width:920px}

.flow-preview{
padding-left:max(var(--pad),50% - var(--w-site) / 2);
padding-right:max(var(--pad),50% - var(--w-site) / 2)}

.flow-preview>*{
margin-left:0;
margin-right:0}

footer{
padding-left:var(--pad);
padding-right:var(--pad)}

/* --- トップ上部：文章の列を520pxに固定し、写真を近づける --- */
@media (width>780px){
.hero-inner{
grid-template-columns:minmax(0,520px) minmax(0,1fr);
gap:40px}

.hero-visual{
height:560px}
}

/* =====================================================
   お問い合わせ導線：青い帯（1カラム・3ボタン）、ナビのボタン、
   スマホ下部の固定バー、お問い合わせページ
   ===================================================== */
:root{
--line-green:#06c755;
--line-green-deep:#05a648}

/* --- 青い帯：1カラム --- */
.contact-strip{
display:block;
padding-top:80px;
padding-bottom:80px}

.contact-strip-inner{
max-width:var(--w-site);
margin:0}

.contact-strip h2{
margin:0}

.contact-strip-lead{
color:#dbe6fb;
font-size:18px;
margin:14px 0 0}

/* --- 3つのボタン（縦並び） --- */
.contact-buttons{
flex-direction:column;
gap:14px;
max-width:520px;
margin:34px 0 0;
display:flex}

.contact-button{
align-items:center;
gap:16px;
min-height:76px;
padding:14px 24px;
border-radius:8px;
border:2px solid transparent;
line-height:1.3;
transition:transform .2s,box-shadow .2s;
display:flex}

.contact-button:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px #0000001f}

.contact-button .ico{
width:30px;
height:30px;
flex:none}

.contact-button span{
display:block}

.contact-button small{
font-size:14px;
font-weight:700;
display:block;
margin-bottom:2px}

.contact-button strong{
font-size:20px;
font-weight:700;
display:block}

.contact-button-tel strong{
font-size:26px;
letter-spacing:.03em}

/* 青い帯の上では、すべて白いボタン */
.contact-strip .contact-button{
background:var(--white);
color:var(--blue-900);
border-color:var(--white)}

.contact-strip .contact-button-line{
color:var(--line-green-deep)}

.contact-note{
color:#dbe6fb;
font-size:16px;
margin:18px 0 0}

/* 白い背景の上（お問い合わせページ） */
.contact-buttons-page{
margin-top:0}

.contact-buttons-page .contact-button-tel{
background:var(--blue-900);
color:var(--white);
border-color:var(--blue-900)}

.contact-buttons-page .contact-button-line{
background:var(--white);
color:var(--line-green-deep);
border-color:var(--line-green)}

.contact-buttons-page .contact-button-mail{
background:var(--white);
color:var(--blue-900);
border-color:var(--blue-900)}

.contact-page-section .contact-note{
color:var(--muted)}

.contact-page-section{
padding-bottom:20px}

.contact-form-section .contact-form{
margin-top:30px}

.form-pending{
color:var(--muted);
font-size:15px;
text-align:center;
margin:18px 0 0}

.contact-info-section .center{
margin-top:28px}

/* --- ナビ右端の「お問い合わせ」ボタン --- */
nav a.nav-contact{
background:var(--blue-900);
color:var(--white);
border:0;
border-radius:6px;
padding:10px 18px;
margin-left:6px;
line-height:1.2}

nav a.nav-contact:hover,nav a.nav-contact:focus-visible{
background:var(--blue-800);
color:var(--white)}

nav a.nav-contact[aria-current="page"]{
background:var(--blue-800);
color:var(--white)}

/* --- スマホ下部の固定バー（PCでは非表示） --- */
.mobile-bar{
display:none}

@media (width<=780px){
.mobile-bar{
z-index:60;
background:var(--white);
border-top:1px solid var(--line);
box-shadow:0 -6px 20px #0000001a;
grid-auto-flow:column;
grid-auto-columns:1fr;
position:fixed;
right:0;
bottom:0;
left:0;
display:grid}

.mobile-bar a{
color:var(--blue-900);
text-align:center;
font-size:13px;
font-weight:700;
padding:9px 4px 8px;
line-height:1.2;
display:grid;
justify-items:center;
gap:3px}

.mobile-bar a+a{
border-left:1px solid var(--line)}

.mobile-bar a:first-child{
background:var(--blue-900);
color:var(--white)}

.mobile-bar a[data-line-link]{
color:var(--line-green-deep)}

.mobile-bar .ico{
width:24px;
height:24px}

body{
padding-bottom:64px}

.contact-strip{
padding-top:56px;
padding-bottom:56px}

.contact-buttons{
max-width:none}

.contact-button{
min-height:68px;
padding:12px 18px}

.contact-button-tel strong{
font-size:24px}

nav a.nav-contact{
padding:7px 12px}
}

/* LINEのURL未設定のあいだの表示 */
.contact-button.is-pending,.mobile-bar a.is-pending{
opacity:.55;
cursor:default}

.contact-button.is-pending:hover{
transform:none;
box-shadow:none}

/* --- 青い帯とお問い合わせページのボタンを中央揃えに --- */
.contact-strip-inner{
text-align:center;
margin:0 auto}

.contact-strip .contact-buttons,.contact-buttons-page{
margin-left:auto;
margin-right:auto}

.contact-page-section{
text-align:center}

.contact-button{
justify-content:center;
text-align:left}

/* --- メールフォーム：入力欄を1列（縦並び）に --- */
.form-grid{
grid-template-columns:1fr;
gap:22px}

.contact-form{
max-width:720px;
margin-left:0;
margin-right:auto}

/* --- 「入力内容を確認する」ボタン：中央・大きめ --- */
.form-submit{
width:100%;
max-width:420px;
min-height:72px;
font-size:22px;
letter-spacing:.06em;
margin:32px auto 0;
display:flex}

@media (width<=780px){
.form-submit{
max-width:none;
min-height:64px;
font-size:20px}
}

/* --- トップページのセクション見出しを中央揃えに --- */
.section-heading{
text-align:center}

.section-heading>p:last-child{
margin-left:auto;
margin-right:auto}

.section-heading-left{
text-align:left}

.section-heading-left>p:last-child{
margin-left:0}

.center{
text-align:center}

.flow-preview .flow-grid{
margin-left:auto;
margin-right:auto}

/* =====================================================
   トップ上部：背景全面を写真に（文字は白、紺色の半透明を重ねる）
   写真を差し替えるときは assets/images/hero.webp などに置き、
   下の background-image のファイル名を変えてください。
   ===================================================== */
.hero-photo{
background:
  linear-gradient(rgba(18,38,84,.62),rgba(18,38,84,.62)),
  url("../images/consultation-illustration.webp") center/cover no-repeat;
color:var(--white);
position:relative;
overflow:hidden}

.hero-photo .hero-inner{
grid-template-columns:1fr;
justify-items:center;
text-align:center;
max-width:calc(var(--w-site) + var(--pad) * 2);
min-height:640px;
margin:auto;
padding:96px var(--pad) 110px}

.hero-photo .hero-copy{
max-width:760px}

.hero-photo h1.hero-sub{
color:var(--white);
font-size:clamp(30px,3.6vw,48px);
text-shadow:0 2px 12px #0000004d}

.hero-photo .hero-lead{
color:var(--white);
font-size:20px;
margin-top:26px;
text-shadow:0 1px 8px #0000004d}

.hero-photo .hero-actions{
justify-content:center;
margin-top:34px}

.hero-photo .button-primary{
background:var(--white);
color:var(--blue-900);
box-shadow:0 12px 30px #00000040}

.hero-photo .button-primary:hover{
background:var(--blue-050)}

.hero-photo .button-soft{
background:#ffffff1f;
color:var(--white);
border-color:var(--white)}

.hero-photo .button-soft:hover{
background:#ffffff33}

.hero-photo .hero-address{
color:#e6ecf7}

.hero-photo .hero-address b{
color:var(--white)}

.hero-caption{
color:var(--blue-900);
background:#fffffff0;
border-radius:99px;
padding:6px 14px;
font-size:14px;
position:absolute;
right:24px;
bottom:20px}

@media (width<=780px){
.hero-photo .hero-inner{
min-height:auto;
padding:56px var(--pad) 72px}

.hero-photo h1.hero-sub{
font-size:26px}

.hero-photo .hero-lead{
font-size:17px}

.hero-photo .hero-actions{
width:100%}

.hero-caption{
right:12px;
bottom:12px;
font-size:12px}
}

/* =====================================================
   トップ上部：左に文章、右に地図カード
   地図画像は assets/images/access-map.png
   ===================================================== */
@media (width>780px){
.hero-photo .hero-inner{
grid-template-columns:minmax(0,1fr) 400px;
gap:56px;
justify-items:stretch;
align-items:center;
text-align:left}

.hero-photo .hero-copy{
max-width:620px}

.hero-photo .hero-actions{
justify-content:flex-start}
}

.access-card{
background:var(--white);
color:var(--ink);
border-radius:14px;
overflow:hidden;
box-shadow:0 20px 50px #00000040}

.access-card img{
width:100%;
height:auto;
display:block;
border-bottom:1px solid var(--line)}

.access-card-body{
padding:18px 22px 22px}

.access-card-body p{
margin:0;
font-size:16px;
line-height:1.7}

.access-card-title{
color:var(--blue-900);
font-size:20px!important;
font-weight:700;
margin-bottom:4px!important}

.access-card-body .text-link{
font-size:15px;
margin-top:12px;
display:inline-block}

/* 事務所概要ページの地図画像 */
.access-map-image{
width:100%;
max-width:760px;
height:auto;
border:1px solid var(--line);
border-radius:12px;
margin-top:28px;
display:block}

@media (width<=780px){
.access-card{
width:100%;
margin-top:28px}

.access-card-body{
padding:14px 16px 18px}
}

/* --- ヘッダーの電話：「平日 9:00〜17:30」を電話番号と同じ幅に揃える --- */
.header-phone{
display:inline-block}

.header-phone small{
font-size:14px;
letter-spacing:.1em;
text-align:justify;
text-align-last:justify;
display:block}

.header-phone strong{
display:block}

/* =====================================================
   スマホのヘッダー：ロゴと電話番号を1段に、その下にメニュー
   ===================================================== */
@media (width>=781px) and (width<=1050px){
.header-phone{
display:none}
}

@media (width<=780px){
.header-inner{
align-items:center;
gap:10px;
padding:8px 16px 4px}

.brand{
gap:8px;
min-width:0}

.brand-mark{
width:32px;
height:32px;
font-size:16px}

.brand small{
display:none}

.brand strong{
font-size:16px;
margin-top:0;
white-space:nowrap}

.header-phone{
display:block;
border-left:0;
margin-left:auto;
padding-left:0;
line-height:1}

.header-phone small{
display:none}

.header-phone strong{
font-size:17px;
margin-top:0;
white-space:nowrap}

nav{
order:3;
gap:16px;
width:100%;
margin:0;
padding:0}

nav a{
padding:6px 0 8px;
font-size:14px}

nav a.nav-contact{
padding:5px 10px;
margin-left:0}
}

/* スマホのメニュー：横スクロールのバーを見せない（指で横に動かせる） */
@media (width<=780px){
nav{
scrollbar-width:none}

nav::-webkit-scrollbar{
display:none}
}

/* =====================================================
   スマホの業務内容カード：「01 相続手続き →」を横1行に
   ===================================================== */
@media (width<=780px){
.service-grid{
grid-template-columns:1fr;
gap:10px;
margin-top:28px}

.service-card{
flex-direction:row;
align-items:center;
gap:14px;
min-height:0;
padding:14px 14px 14px 18px;
border:1px solid var(--line-strong);
border-radius:10px;
background:var(--white)}

.service-card>span{
font-size:15px;
letter-spacing:.08em;
flex:none}

.service-card h3{
flex:1;
font-size:19px;
line-height:1.4;
margin:0}

.service-card b{
align-self:center;
flex:none;
width:34px;
height:34px;
color:var(--white);
background:var(--blue-900);
border-radius:50%;
font-size:16px;
line-height:1;
place-items:center;
display:grid}

.service-card:hover,.service-card:active{
transform:none;
border-color:var(--blue-900);
box-shadow:none}
}