/* 案D 大手の作法：白地に濃紺、全幅写真、困りごとの入口、制度としての約束 */
:root{--navy:#0b2545;--navy2:#13335c;--mute:#51606f;--bg2:#f3f5f7;--line:#d9dee4;--gold:#b8923f;--gold-l:#d9b871;--gut:clamp(16px,5vw,88px);--dr-bg:#0b2545;--bar-bg:#0b2545;--bar-cta:#d9b871;--bar-cta-fg:#0b2545;--focus:#b8923f;--req:#0b2545}
body{background:#fff;color:var(--navy);font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:17px;font-weight:500;line-height:1.9}
@media(max-width:767.98px){body{font-size:16px}}
.h-lg{font-size:clamp(34px,4.6vw,72px);font-weight:700;line-height:1.28;letter-spacing:.01em}
.h-md{font-size:clamp(27px,3vw,46px);font-weight:700;line-height:1.35}
.h-lg .ln,.h-md .ln{white-space:nowrap}
@media(max-width:767.98px){.h-lg{font-size:min(8.2vw,44px)}}
.kicker{font-weight:700;color:#7d6020;margin-bottom:14px;font-size:16px}
.btn{background:var(--navy);color:#fff;border-radius:2px}.btn:hover{background:var(--gold)}

.hd{color:#fff}
.hd.is-scrolled{background:#fff;color:var(--navy);box-shadow:0 1px 0 var(--line)}
.logo-t{color:inherit}
.hd .logo img{transition:filter .35s}
.hd.is-scrolled .logo img{filter:brightness(0) saturate(100%) invert(11%) sepia(39%) saturate(2200%) hue-rotate(186deg)}
.btn-hd{background:var(--gold-l);color:var(--navy)}.btn-hd:hover{background:#fff}
.hd.is-scrolled .btn-hd{background:var(--navy);color:#fff}.hd.is-scrolled .btn-hd:hover{background:var(--gold)}
body.menu-open .hd{background:none;color:#fff;box-shadow:none}
body.menu-open .hd .logo img{filter:none}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;background:var(--gold-l);transform:scaleX(0);transform-origin:left}

/* ヒーロー */
.hero{position:relative;height:min(100svh,920px);min-height:600px;background:var(--navy);overflow:hidden}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.slide.is-on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.slide .img-tag{bottom:auto;top:86px}
.hero-grad{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,37,69,.5) 0,rgba(11,37,69,0) 18%),linear-gradient(90deg,rgba(11,37,69,.78) 0,rgba(11,37,69,.46) 50%,rgba(11,37,69,0) 78%),linear-gradient(0deg,rgba(11,37,69,.7) 0,rgba(11,37,69,0) 40%)}
.hero-text{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(120px,19vh,180px);color:#fff}
.hero-eye{font-size:clamp(14px,1.15vw,17px);margin-bottom:10px;font-weight:700}
.h-hero{font-size:clamp(40px,7.2vw,116px);font-weight:900;line-height:1.14;letter-spacing:-.005em}
.hero-sub{margin-top:14px;font-size:clamp(17px,1.7vw,24px);font-weight:700}
.hero-ctrl{position:absolute;z-index:4;right:var(--gut);bottom:clamp(112px,17vh,160px);display:flex;align-items:center;gap:14px;color:#fff}
.bars{display:flex;gap:6px;position:static;width:auto;height:auto}
.hero-ctrl .bars i{position:relative;display:block;width:clamp(26px,3vw,46px);height:2px;background:rgba(255,255,255,.4);overflow:hidden;top:auto}
.hero-ctrl .bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.pause{background:none;border:1px solid rgba(255,255,255,.7);color:#fff;font-size:12px;padding:3px 10px;border-radius:999px;cursor:pointer;line-height:1.5}
html:not(.anim) .hero-ctrl{display:none}
@media(max-width:767.98px){
  .hero{height:calc(100svh - 62px);min-height:560px}
  .h-hero{font-size:min(9.6vw,50px)}
  .hero-text{bottom:112px}
  .hero-ctrl{bottom:64px;left:var(--gut);right:auto}
  .slide .img-tag{top:74px}
}

/* 困りごとの入口 */
.tasks{position:relative;z-index:5;padding:0 var(--gut);margin-top:clamp(-96px,-11vh,-70px)}
.tasks-in{background:#fff;box-shadow:0 18px 50px rgba(11,37,69,.14);padding:clamp(20px,3vw,44px)}
.tasks h2{font-size:clamp(21px,2vw,30px);font-weight:700;margin-bottom:18px;line-height:1.4}
.task-list{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.task-list a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;height:100%;padding:18px 8px 16px;text-decoration:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s,color .3s}
.task-list svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.task-list b{font-size:clamp(15px,1.2vw,17px);line-height:1.4}
.task-list small{font-size:13px;color:var(--mute);line-height:1.4;transition:color .3s}
.task-list a:hover{background:var(--navy);color:#fff}.task-list a:hover small{color:#cdd6e0}.task-list a:hover svg{transform:translateY(-4px)}
.tasks-tel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:22px}
.t-tel{display:flex;flex-direction:column;text-decoration:none;line-height:1.3}
.t-tel b{font-size:clamp(28px,2.7vw,40px);font-weight:900;letter-spacing:.01em}
.t-tel small{font-size:13px;color:var(--mute)}
.t-btn{height:60px;padding:0 36px;font-size:16px}
@media(max-width:1023.98px){.task-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767.98px){
  .tasks{padding:0 12px;margin-top:-34px}
  .tasks-in{padding:18px 14px}
  .task-list{grid-template-columns:repeat(2,1fr)}
  .task-list a{padding:14px 4px 12px}
  .t-btn{width:100%}
}

/* 理念 */
.message{max-width:1040px;margin:0 auto;padding:clamp(90px,16vh,190px) var(--gut);text-align:center}
.msg-body{margin:28px auto 0;max-width:40em;text-align:left}
@media(max-width:767.98px){.message .h-lg{font-size:min(6.8vw,40px)}}

/* サービス：写真に白い面を重ねる */
.service{padding-bottom:clamp(70px,12vh,150px)}
.rw{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;margin-bottom:clamp(70px,13vh,170px);scroll-margin-top:90px}
.rw-pic{grid-column:1/9;grid-row:1;aspect-ratio:16/10}
.rw-pic img{object-position:50% 35%}
.rw-card{grid-column:7/13;grid-row:1;z-index:2;background:#fff;padding:clamp(24px,3.4vw,56px);margin:0 var(--gut) clamp(-60px,-4vw,-30px) 0;box-shadow:0 14px 44px rgba(11,37,69,.12)}
.rw-r .rw-pic{grid-column:5/13}
.rw-r .rw-card{grid-column:1/7;margin:0 0 clamp(-60px,-4vw,-30px) var(--gut)}
.rw-card>p{margin-top:14px}
.rw-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.rw-tags li{font-size:14px;font-weight:700;padding:3px 12px;border:1px solid var(--navy);border-radius:2px;line-height:1.6}
.rw-case{margin-top:14px!important;font-size:15px;color:var(--mute);line-height:1.6}
.rw-case span{font-weight:700;color:#7d6020;margin-right:10px}
@media(max-width:899.98px){
  .rw{display:block;margin-bottom:70px}
  .rw-pic{aspect-ratio:4/3}
  .rw-card,.rw-r .rw-card{margin:-40px 12px 0;position:relative;padding:22px 18px}
}

/* お約束 */
.promise{background:var(--navy);color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,110px);padding:clamp(90px,15vh,180px) var(--gut)}
.pr-head{position:sticky;top:110px;align-self:start}
.pr-head p{margin-top:20px;color:#cdd6e0;max-width:24em}
.pr-list li{display:grid;grid-template-columns:clamp(46px,5vw,76px) 1fr;gap:10px;padding:clamp(22px,4vh,40px) 0;border-top:1px solid rgba(255,255,255,.26)}
.pr-list li:last-child{border-bottom:1px solid rgba(255,255,255,.26)}
.pr-n{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:clamp(30px,3vw,46px);line-height:1.1;color:var(--gold-l)}
.pr-list h3{font-size:clamp(20px,2vw,29px);line-height:1.45;font-weight:700}
.pr-list p{margin-top:6px;color:#dbe1e8}
@media(max-width:899.98px){.promise{grid-template-columns:1fr}.pr-head{position:static}}

/* 事例 */
.works{padding:clamp(90px,15vh,180px) var(--gut)}
.wk-head{display:flex;flex-wrap:wrap;gap:6px 30px;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter[hidden]{display:none}
.filter button{height:44px;padding:0 20px;background:#fff;border:1px solid var(--navy);border-radius:2px;font-weight:700;cursor:pointer;font-size:15px;transition:background .25s,color .25s}
.filter button.on,.filter button:hover{background:var(--navy);color:#fff}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,440px));gap:clamp(26px,4vh,44px) clamp(14px,2vw,28px)}
.wk.hide{display:none}
.wk-pic{aspect-ratio:2/1;box-shadow:0 0 0 1px var(--line)}
.wk-pic img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}.wk:hover .wk-pic img{transform:scale(1.05)}
.wk h3{font-size:clamp(20px,1.7vw,24px);margin-top:12px;line-height:1.4;font-weight:700}
.wk-a{font-size:15px;color:var(--mute);line-height:1.5}
.wk-y{font-size:14px;margin-top:2px}.wk-y b{font-size:clamp(25px,2.2vw,32px);font-weight:900;margin-left:6px}
.field{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(8px,1vw,14px);margin-top:clamp(50px,9vh,100px);align-items:end}
.f-a{aspect-ratio:719/426}.f-b,.f-c,.f-d{aspect-ratio:3/4}
.field-cap{font-size:13px;color:var(--mute);margin-top:8px}
@media(max-width:899.98px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599.98px){.wk-grid{grid-template-columns:1fr}.field{grid-template-columns:repeat(3,1fr)}.f-a{grid-column:1/-1}}

/* 流れ */
.flow{background:var(--bg2);padding:clamp(80px,13vh,160px) var(--gut)}
.fl-rail{height:2px;background:var(--line);margin:clamp(30px,6vh,60px) 0 24px;position:relative}
.fl-rail span{position:absolute;inset:0;background:var(--navy);transform-origin:left}
.fl-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,40px)}
.fl-list span{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--gold)}
.fl-list h3{font-size:clamp(20px,1.8vw,26px);margin:10px 0 8px;line-height:1.4;font-weight:700}
.fl-list p{font-size:16px}
@media(max-width:899.98px){.fl-rail{display:none}.fl-list{grid-template-columns:1fr;margin-top:30px}.fl-list li{display:grid;grid-template-columns:50px 1fr;column-gap:6px;padding:18px 0;border-top:1px solid var(--line)}.fl-list span{grid-row:1/3}.fl-list h3{margin:0 0 4px}.fl-list p{grid-column:2}}

/* 拠点：写真が広がる */
.network{padding:clamp(90px,15vh,180px) var(--gut)}
.nw-head{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;align-items:end;margin-bottom:clamp(30px,6vh,60px)}
.nw-list{display:flex;gap:clamp(10px,1.2vw,18px)}
.nwi{flex:1 1 0;min-width:0;transition:flex-grow .7s cubic-bezier(.2,.7,.2,1)}
.nw-pic{height:clamp(240px,38vh,420px)}
.nw-r{font-weight:700;color:#7d6020;margin-top:14px;line-height:1.4}
.nwi h3{font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.35}
.nw-t>p:not(.nw-r){font-size:15.5px;line-height:1.7}
.nw-p{margin-top:6px;font-weight:700}
@media(hover:hover) and (min-width:900px){.nwi:hover{flex-grow:1.5}}
@media(max-width:899.98px){.nw-head{grid-template-columns:1fr}.nw-list{flex-direction:column;gap:30px}.nw-pic{height:auto;aspect-ratio:3/2}}

/* FAQ */
.faq{background:var(--bg2);padding:clamp(80px,13vh,160px) var(--gut);display:grid;grid-template-columns:.65fr 1.35fr;gap:26px clamp(20px,4vw,70px);align-items:start}
.faq-item{background:#fff;margin-bottom:8px}
.faq-item summary{padding:18px 20px;font-weight:700;font-size:clamp(17px,1.35vw,19px);line-height:1.5}
.faq-a{padding:0 48px 20px 20px}
@media(max-width:899.98px){.faq{grid-template-columns:1fr}}

/* 代表・会社情報 */
.company{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,6vw,110px);padding:clamp(90px,15vh,180px) var(--gut)}
.co-msg>p{margin-top:22px}
.sign{font-weight:700;font-size:18px}
.co-table .co{margin-top:18px}
.co>div{display:grid;grid-template-columns:clamp(100px,10vw,140px) 1fr;padding:14px 0;border-top:1px solid var(--line)}
.co>div:last-child{border-bottom:1px solid var(--line)}
.co dt{font-weight:700}
@media(max-width:899.98px){.company{grid-template-columns:1fr}}

/* お問い合わせ */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--navy)}
.ct-left{color:#fff;padding:clamp(70px,12vh,150px) var(--gut);align-self:start;position:sticky;top:76px}
@media(max-width:899.98px){.ct-left{position:static}}
.ct-left>p{margin-top:18px;max-width:28em;color:#dbe1e8}
.ct-tel{display:inline-flex;flex-direction:column;text-decoration:none;margin-top:26px;line-height:1.3}
.ct-tel b{font-size:clamp(32px,3.2vw,48px);font-weight:900;letter-spacing:.01em}
.ct-tel small{font-size:13px;color:#cdd6e0}
.ct-right{background:#fff;padding:clamp(40px,8vh,90px) clamp(16px,5vw,80px)}
@media(max-width:899.98px){.contact{grid-template-columns:1fr}.ct-right{padding:36px var(--gut)}}

/* フッター */
.ft{background:#071a33;color:#dbe1e8;padding:clamp(44px,7vh,70px) var(--gut) 26px;font-size:14.5px}
.ft-top{display:grid;grid-template-columns:1fr auto 1.2fr;gap:26px clamp(30px,5vw,80px)}
.ft .logo{color:#fff}.ft .logo-t{font-size:26px}
.ft-brand p{margin-top:6px}
.ft-nav{display:flex;flex-direction:column;gap:2px}
.ft-nav a{text-decoration:none;font-weight:700;color:#fff}.ft-nav a:hover{text-decoration:underline}
.ft-base li{margin-bottom:10px;line-height:1.6}.ft-base b{display:block;color:#fff}
.ft-note{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);font-size:13px}
.ft-c{font-size:13px;opacity:.75;margin-top:6px}
@media(max-width:899.98px){.ft-top{grid-template-columns:1fr}}