:root{
  --base:#0D0F12; --charcoal:#1E242B; --light:#E6E4E0; --lightph:#D3D0CA;
  --accent:#C87B3C; --accent-dk:#A05F26; --text:#FFFFFF; --ink:#14171B;
  --pad:max(clamp(18px,3.2vw,44px), calc((100vw - 1760px) / 2));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--base);color:var(--text);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none;
  transition:opacity .22s,background-color .25s,color .25s,border-color .25s}
a:hover{opacity:.6}
img{max-width:100%}
.ar{font-family:"Archivo","Helvetica Neue",Helvetica,sans-serif}
.disp{font-family:"Archivo",sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.95}
.lab{font-family:"Archivo",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px)}
.panel{background:var(--charcoal)}
.hr{height:1px;background:rgba(255,255,255,.22)}
.hr-dk{height:1px;background:rgba(20,23,27,.26)}
p{text-wrap:pretty;margin:0}

/* 和文の折り返し ------------------------------------------------
   auto-phrase: 文節の切れ目で折る（「部屋ま/で行き」を防ぐ）
   strict:      禁則を厳格に（行頭の小書き仮名・長音符を送る）
   balance:     見出しの行長を揃え、最終行の一語残りを防ぐ        */
h1,h2,h3,p,q,li,dd,dt,address,.msg-jp,.lead,.jp,.from,.tags span,
.nav a span,.areabar .list,.hero-sub p,.person .name b,.card h3,
.sub,.note,.hint,.notice,.agree,.choices label,.field>label,.tel-box div{
  word-break:auto-phrase;line-break:strict}
h2,h3,.msg-jp,.jp,.card h3,.voice q,.sub{text-wrap:balance}
.hero-sub p,.lead,.about-body p,.card p,.person p,.biz p,.contact p,
.phead p,.prose p,.dl dd,.note{text-wrap:pretty}
/* 数字・電話番号・英字は文節折りの対象外に */
.ar,.disp,.lab,.btn-tel,.tel-box .num,.crumb,input,textarea,select{word-break:normal}

/* placeholder */
.ph{position:relative;background-color:#1A1E23;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.1px);
  background-size:12px 12px;overflow:hidden;display:flex;align-items:flex-end}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph .tag{font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.66);padding:12px 14px}
.ph.lt{background-color:var(--lightph);
  background-image:radial-gradient(rgba(20,23,27,.24) 1px,transparent 1.1px)}
.ph.lt .tag{color:rgba(20,23,27,.62)}

/* header */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;height:76px;padding:0 var(--pad);color:var(--ink);
  background:rgba(13,15,18,0);transition:background .3s,backdrop-filter .3s,color .3s}
.hd.stuck{background:rgba(13,15,18,.92);backdrop-filter:blur(10px);color:var(--text)}
.hd .nav a span:last-child{color:rgba(20,23,27,.62)}
.hd.stuck .nav a span:last-child{color:rgba(255,255,255,.72)}
.hd .btn-o{border-color:rgba(20,23,27,.4);margin-left:clamp(24px,3vw,44px)}
.hd.stuck .btn-o:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hd.stuck .btn-o{border-color:rgba(255,255,255,.46)}
.hd .burger i{background:var(--ink)}
.hd.stuck .burger i{background:var(--text)}
.hd .burger i:last-child{background:var(--accent-dk)}
.hd.stuck .burger i:last-child{background:var(--accent)}
.logo{font-family:"Archivo",sans-serif;font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:clamp(20px,2.2vw,34px);margin-left:auto}
.nav a{display:flex;flex-direction:column;gap:3px}
.nav a span:last-child{font-size:11px;color:rgba(255,255,255,.72)}
.btn-o{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 22px;
  border:1px solid rgba(255,255,255,.46)}
.btn-o:hover{background:var(--ink);border-color:var(--ink);color:#fff;opacity:1}
.burger{display:none;flex-direction:column;gap:6px;align-items:flex-end;
  background:none;border:0;cursor:pointer;padding:8px}
.burger i{display:block;width:24px;height:1px;background:var(--text)}
.burger i:last-child{width:14px;background:var(--accent)}
.menu{position:fixed;inset:0;z-index:49;background:rgba(13,15,18,.98);
  display:flex;flex-direction:column;justify-content:center;gap:26px;padding:0 var(--pad)}
.menu[hidden]{display:none}
.menu a{font-size:26px;font-weight:700}
.menu .lab{display:block;color:var(--accent);margin-bottom:4px;font-size:10px}

/* hero */
.hero{background:var(--light);color:var(--ink);padding:96px var(--pad) clamp(48px,6vw,80px)}
.hero-frame{height:min(46vw,720px);min-height:280px}
.hero-media{position:relative;width:100%;height:100%;overflow:hidden;background:#D3D0CA}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.slide.on{opacity:1}
.slide img{display:block;width:100%;height:100%;object-fit:cover}
.hero-media .slide img{object-position:center 45%}
.hero-frame{position:relative}
/* 写真の上のキャッチコピー。下側を暗くして白文字を読めるようにする */
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:55%;pointer-events:none;
  background:linear-gradient(to top,rgba(14,16,19,.62),rgba(14,16,19,0))}
.hero .hero-catch{position:absolute;left:clamp(20px,3.4vw,52px);bottom:clamp(18px,3.2vw,48px);right:clamp(20px,3.4vw,52px);
  z-index:2;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero .hero-catch h1{margin:0;font-size:clamp(19px,2.9vw,40px);font-weight:700;line-height:1.7;letter-spacing:.04em;color:#fff}
.hero .hero-catch p{margin:clamp(8px,1vw,14px) 0 0;font-size:clamp(13px,1.35vw,18px);font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.9)}
.dots{display:flex;gap:8px;justify-content:flex-end;padding-top:14px}
.dots button{width:26px;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(20,23,27,.26);transition:background .3s}
.dots button[aria-current="true"]{background:var(--ink)}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
.hero-in{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,4vw,56px);
  flex-wrap:wrap;padding-top:clamp(34px,4.5vw,58px)}
.hero .hero-lead{margin:0;font-size:clamp(24px,3.2vw,42px);font-weight:700;line-height:1.5;letter-spacing:.04em;color:var(--ink)}
.hero-copy{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px)}
.hero-sub{display:flex;align-items:flex-end;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.hero-sub p{font-size:clamp(14px,1.6vw,16px);line-height:2.1;color:rgba(20,23,27,.82)}
.hero-sub .div{width:1px;height:54px;background:rgba(20,23,27,.28)}
.hero-sub .small{font-size:13px;line-height:2;color:rgba(20,23,27,.66)}
.hero-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-fill{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 28px;
  background:var(--ink);color:#fff}
.btn-fill:hover{background:#2C353E;color:#fff;opacity:1}
.btn-tel{display:inline-flex;align-items:center;height:60px;padding:0 26px;
  border:1px solid rgba(20,23,27,.4);font-size:19px;font-weight:500;
  font-family:"Archivo",sans-serif;letter-spacing:.03em;color:var(--ink)}
.btn-tel:hover{background:var(--ink);border-color:var(--ink);color:#fff;opacity:1}

/* area bar */
.areabar{background:var(--charcoal);display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:20px var(--pad);border-top:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2)}
.areabar .list{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.92)}
.areabar .list em{font-style:normal;color:var(--accent)}
.areabar .note{margin-left:auto;font-size:13px;color:#fff}
.areabar .other{color:#fff}

/* generic heads */
.shead{margin-bottom:clamp(36px,5vw,64px)}
.shead .lab{color:var(--accent);display:block;margin-bottom:22px}
.shead .lab::before,.secmark::before{content:"";display:inline-block;width:24px;height:1px;
  background:currentColor;margin-right:12px;vertical-align:middle;opacity:.7}
.shead h2{margin:0;font-size:clamp(34px,5.4vw,64px)}
.jph,.shead h2.jph{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-weight:700;
  text-transform:none;letter-spacing:.02em;line-height:1.55;
  font-size:clamp(30px,4.4vw,56px)}
.srow{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.lead{max-width:400px;font-size:15px;line-height:2.2;color:rgba(255,255,255,.82)}
.link-u{display:inline-flex;align-items:center;gap:12px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.42);white-space:nowrap;transition:border-color .25s,color .25s}
.link-u:hover{border-bottom-color:currentColor;opacity:1}
.link-u:lang(ja){letter-spacing:.1em;font-size:13px}

/* about */
.about{display:grid;grid-template-columns:5fr 1fr 6fr;gap:24px}
.about .stack{font-size:clamp(38px,5.4vw,74px);color:rgba(255,255,255,1)}
.about .stack div:nth-child(2){padding-left:.4em}
.about .stack div:nth-child(3){padding-left:.8em;color:var(--accent)}
.about .body{display:flex;flex-direction:column;gap:30px;padding-top:clamp(0px,4vw,70px)}
.about h3{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.75}
.about p{font-size:15px;line-height:2.35;color:rgba(255,255,255,.86)}

/* message (大きな和文＋極小の英訳) */
.msg{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,80px);
  align-items:end;margin-bottom:clamp(46px,6vw,78px)}
.msg-jp{font-size:clamp(24px,3.4vw,44px);font-weight:400;line-height:2.1;
  letter-spacing:.16em;color:var(--ink)}
.en{font-family:"Archivo",sans-serif;font-size:11px;font-weight:400;line-height:1.95;
  letter-spacing:.01em;max-width:340px;color:rgba(255,255,255,.6);word-break:normal}
.light .en{color:rgba(20,23,27,.72)}
.msg-en{max-width:300px;font-family:"Archivo",sans-serif;font-size:11px;font-weight:400;
  line-height:1.95;letter-spacing:.01em;color:rgba(20,23,27,.6);padding-bottom:.6em}
.about-body{padding-top:clamp(28px,4vw,44px);border-top:1px solid rgba(20,23,27,.24)}
.about-body p{max-width:50em;font-size:16px;line-height:2.35;color:rgba(20,23,27,.84)}
.about-body p+p{margin-top:1.7em}

/* service */
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.card{display:flex;flex-direction:column;gap:26px}
.card .ph{height:clamp(240px,30vw,440px)}
.card .top{display:flex;align-items:baseline;justify-content:space-between}
.card .top .disp{font-size:clamp(26px,3vw,34px)}
.card h3{margin:0;font-size:19px;font-weight:700}
.card p{font-size:15px;line-height:2.2;color:rgba(255,255,255,.84)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:11px;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.28);padding:8px 14px}
.light .tags span{color:rgba(20,23,27,.72);border-color:rgba(20,23,27,.28)}

/* craftsmen (light) */
.light{background:var(--light);color:var(--ink)}
.light .lab{color:var(--accent-dk)}
.light .shead h2,.light h3,.light q{color:var(--ink)}
.light .lead,.light p{color:rgba(20,23,27,.8)}
.light .link-u{border-color:rgba(20,23,27,.42);color:var(--ink)}
/* 明るい面のラベル色指定が、ボタンの文字色を上書きしてしまうのを防ぐ */
.light .btn-fill:not(:hover){color:#fff}
.light .btn-o:not(:hover),.light .btn-tel:not(:hover){color:var(--ink)}
.light .link-u:hover{color:var(--ink);border-bottom-color:var(--ink)}
.light .hr,.light .voices{border-color:rgba(20,23,27,.26)}
.light .hr{background:rgba(20,23,27,.26)}
.light .from{color:rgba(20,23,27,.66)}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.person{display:flex;flex-direction:column;gap:22px}
.person .ph{height:clamp(300px,32vw,460px)}
.person .lab{color:var(--accent-dk)}
.person .name{display:flex;align-items:baseline;gap:14px}
.person .name b{font-size:24px;font-weight:700;color:var(--ink)}
.person .name span{font-size:12px;letter-spacing:.12em;color:rgba(20,23,27,.62)}
.person p{font-size:14px;line-height:2.1;color:rgba(20,23,27,.8)}

/* voice */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.24)}
.voice q{display:block;font-size:clamp(18px,2vw,22px);font-weight:500;line-height:2;
  color:var(--text);quotes:"「" "」"}
.voice .from{margin-top:20px;font-size:12px;color:rgba(255,255,255,.68)}

/* business */
.biz{display:grid;grid-template-columns:5fr 1fr 6fr;gap:24px;align-items:start}
.biz h3{margin:0;font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.7}
.biz p{font-size:15px;line-height:2.3;color:rgba(255,255,255,.84)}
.biz .item{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.22)}
.biz .item:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.biz .item b{font-size:17px;font-weight:700}
.biz .item .lab{color:rgba(255,255,255,.64)}

/* contact */
.contact{position:relative;overflow:hidden;text-align:center}
.contact .ph{position:absolute;inset:0}
/* 写真が見える濃度に。文字の可読性は別途実測して調整している */
.contact .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,15,18,.86) 0%,rgba(13,15,18,.66) 42%,rgba(13,15,18,.88) 100%)}
.contact>.in{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,3vw,36px);padding:0 var(--pad)}
.contact h2{margin:0;font-size:clamp(52px,10vw,118px)}
.contact .jp{font-size:clamp(18px,2.4vw,22px);font-weight:700}
.contact p{font-size:14px;line-height:2.1;color:rgba(255,255,255,.84)}
.contact .fine{font-size:12px;color:rgba(255,255,255,.68)}
.contact .btn-fill{background:var(--accent);color:var(--base)}
.contact .btn-fill:hover{background:#fff;color:var(--base);opacity:1}
.contact .btn-tel{border-color:rgba(255,255,255,.46);color:#fff}
.contact .btn-tel:hover{background:#fff;border-color:#fff;color:var(--base);opacity:1}

/* footer */
.ft{background:var(--charcoal);border-top:1px solid rgba(255,255,255,.22);padding:clamp(50px,7vw,80px) var(--pad) 34px}
.ft .mark{font-size:clamp(56px,13vw,150px);color:rgba(255,255,255,.1);
  margin-bottom:clamp(36px,5vw,60px)}
.ft-grid{display:grid;grid-template-columns:4fr 1fr 3fr 4fr;gap:24px;padding-bottom:50px}
.ft h4{margin:0;font-size:15px;font-weight:700}
.ft address{font-style:normal;font-size:13px;line-height:2.2;color:rgba(255,255,255,.82)}
.ft .col{display:flex;flex-direction:column;gap:14px}
.ft .col .lab{color:var(--accent)}
.ft .col a{font-size:13px;color:rgba(255,255,255,.88)}
.ft .btm{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(255,255,255,.2);
  font-size:11px;color:rgba(255,255,255,.64)}

/* sticky mobile cta */
.sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:45;
  grid-template-columns:1fr 1fr;height:62px;background:var(--base);
  border-top:1px solid rgba(255,255,255,.26)}
.sticky a{display:flex;align-items:center;justify-content:center}
.sticky a:first-child{border-right:1px solid rgba(255,255,255,.26)}
.sticky a:last-child{background:var(--accent);color:var(--base)}

/* reveal */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.16,.8,.2,1),transform .9s cubic-bezier(.16,.8,.2,1)}
.rv.d1.in{transition-delay:.13s} .rv.d2.in{transition-delay:.26s} .rv.d3.in{transition-delay:.39s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

@media (min-width:1101px){
  .menu{display:none}
}
@media (max-width:1100px){
  .nav{display:none}
  .hd .btn-o{display:none}
  .burger{display:flex}
}
@media (max-width:900px){
  .about,.biz,.msg{grid-template-columns:1fr;gap:32px}
  .msg-en{max-width:none}
  .cards2,.cards3,.voices{grid-template-columns:1fr;gap:36px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .sticky{display:grid}
  body{padding-bottom:62px}
  .areabar .note{margin-left:0;width:100%}
}
@media (max-width:560px){
  .ft-grid{grid-template-columns:1fr}
  .hero-sub .div{display:none}
}

/* ============================================================
   下層ページ
   ============================================================ */

/* ページ先頭の見出し部（固定ヘッダーの高さ76pxぶんを含む） */
.phead{background:var(--light);color:var(--ink);
  padding:calc(76px + clamp(44px,5.5vw,84px)) var(--pad) clamp(40px,5vw,64px)}
.phead .lab{color:var(--accent-dk);display:block;margin-bottom:20px}
.phead h1{margin:0;font-size:clamp(34px,5.4vw,64px)}
.phead .sub{margin-top:22px;font-size:clamp(18px,2.2vw,24px);font-weight:700;
  line-height:1.7;color:var(--ink)}
.phead .sub.lg{font-size:clamp(22px,3.2vw,36px);line-height:1.6}
.phead p{max-width:44em;margin-top:22px;font-size:16px;line-height:2.3;
  color:rgba(20,23,27,.84)}
/* .phead p の16px指定に負けるため、ここで明示的に戻す */
.phead .en{margin-top:26px;color:rgba(20,23,27,.72);
  font-size:11px;line-height:1.95;letter-spacing:.01em;max-width:340px}

/* パンくず */
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:26px;
  font-size:12px;color:rgba(20,23,27,.66)}
.crumb a:hover{opacity:.6}
.crumb span{opacity:.5}

/* 施工事例のグリッド（写真の縦横比をそのまま残す） */
.wgrid{columns:3;column-gap:22px}
.wgrid.n2{columns:2}
.wcard{break-inside:avoid;margin:0 0 30px;display:block}
/* width/height 属性が height の指定として効くため、明示的に auto に戻す */
.wcard img{width:100%;height:auto;display:block;background:var(--lightph)}
.wcard .meta{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.wcard .meta .lab{font-size:10px}
.wcard h3{margin:8px 0 0;font-size:16px;font-weight:700;line-height:1.7}
.wcard .note{margin-top:8px;font-size:13px;line-height:1.95}
@media (max-width:1100px){.wgrid{columns:2}}
@media (max-width:620px){.wgrid,.wgrid.n2{columns:1}}
/* Before/After を左右に並べる。行ごとに高さをそろえるため、写真は同じ比率で切り抜く */
.wgrid.ba{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.wgrid.ba .wcard{margin-bottom:30px}
.wgrid.ba .wcard img{aspect-ratio:4/3;object-fit:cover}
/* 縦長の写真3枚を1行に（Before・After＋もう1枚） */
.wgrid.ba.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wgrid.ba.c3 .wcard img{aspect-ratio:3/4}
@media (max-width:620px){.wgrid.ba.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wgrid.ba{column-gap:12px}.wgrid.ba .wcard h3{font-size:14px}.wgrid.ba .wcard .note{font-size:12px}}

/* 定義リスト（会社概要など） */
.dl{display:grid;grid-template-columns:200px 1fr;gap:0}
.dl dt,.dl dd{padding:22px 0;border-top:1px solid rgba(255,255,255,.22);margin:0}
.dl dt{font-size:13px;font-weight:700;color:var(--accent)}
.dl dd{font-size:15px;line-height:2.05;max-width:40em}
.light .dl dt,.light .dl dd{border-top-color:rgba(20,23,27,.24)}
.light .dl dt{color:var(--accent-dk)}
@media (max-width:700px){
  .dl{grid-template-columns:1fr}
  .dl dt{padding-bottom:0;border-top:1px solid rgba(255,255,255,.22)}
  .dl dd{padding-top:10px;border-top:0}
  .light .dl dt{border-top-color:rgba(20,23,27,.24)}
}

/* 本文の読み物（プライバシーポリシーなど） */
.prose{max-width:46em}
.prose h2{margin:56px 0 18px;font-size:20px;font-weight:700;line-height:1.7}
.prose h2:first-child{margin-top:0}
.prose p{font-size:15px;line-height:2.25;margin-bottom:1.4em}
.prose ul{margin:0 0 1.4em;padding-left:1.3em}
.prose li{font-size:15px;line-height:2.25;margin-bottom:.4em}

/* ---- フォーム ---- */
.form{max-width:44em}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:30px}
.field>label{font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px}
.req,.opt{font-size:10px;font-weight:600;letter-spacing:.12em;padding:4px 8px}
.req{background:var(--accent);color:var(--base)}
.opt{border:1px solid rgba(20,23,27,.34);color:rgba(20,23,27,.72)}
.field .hint{font-size:12px;line-height:1.9;color:rgba(20,23,27,.66)}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea,.field select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid rgba(20,23,27,.34);border-radius:0;padding:14px 16px}
.field textarea{min-height:170px;line-height:1.9;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--accent-dk);outline-offset:-1px;border-color:var(--accent-dk)}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices label{display:inline-flex;align-items:center;gap:9px;font-size:14px;
  border:1px solid rgba(20,23,27,.34);padding:12px 16px;cursor:pointer;min-height:48px}
.choices label:hover{border-color:var(--ink)}
.choices input{width:17px;height:17px;accent-color:var(--accent-dk)}
.agree{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.9;
  padding:22px 0;border-top:1px solid rgba(20,23,27,.24);
  border-bottom:1px solid rgba(20,23,27,.24);margin-bottom:34px}
.agree input{width:19px;height:19px;margin-top:3px;accent-color:var(--accent-dk);flex-shrink:0}
.agree a{text-decoration:underline}
.submit{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-width:280px;height:66px;padding:0 36px;background:var(--ink);color:#fff;
  font:inherit;font-size:15px;font-weight:700;letter-spacing:.06em;border:0;cursor:pointer}
.submit:hover{background:var(--accent-dk)}
.notice{background:rgba(20,23,27,.06);padding:20px 24px;margin-bottom:38px;
  font-size:13px;line-height:2.05;color:rgba(20,23,27,.84)}
.tel-box{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
  padding:clamp(26px,3vw,36px);border:1px solid rgba(20,23,27,.24)}
.tel-box .num{font-family:"Archivo",sans-serif;font-size:clamp(28px,4vw,42px);
  font-weight:500;letter-spacing:.02em;color:var(--ink)}

/* CTAの背景写真 */
.contact .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 55%}

/* 全幅の帯写真。原寸1400px以上の写真でのみ使うこと
   （それ以下だと大きな画面で引き伸ばされる） */
.band{position:relative;width:100%;overflow:hidden;background:var(--light);
  display:flex;justify-content:center}
/* 原寸を超えて引き伸ばさない。大きな画面では地の色が両脇に出る */
.band img{display:block;width:100%;max-width:1400px;height:auto}
.band figcaption{position:absolute;left:var(--pad);bottom:16px;font-size:11px;
  letter-spacing:.06em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}

/* 文章と写真の2列 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.split.rev>:first-child{order:2}
.split img{display:block;width:100%;height:auto;background:var(--lightph)}
.split .txt p{font-size:16px;line-height:2.3;margin-bottom:1.5em}
.split .txt p:last-child{margin-bottom:0}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
}

/* 手順カードの写真 */
.card .shot{width:100%;height:auto;display:block;background:var(--lightph)}
/* 写真が入っている枠は、プレースホルダ用の固定高さを外す */
.card .ph:has(img){height:auto}
.card .ph img{height:auto}

/* 人物紹介（写真＋長めの文章） */
.bio{display:grid;grid-template-columns:400px 1fr;gap:clamp(28px,4vw,64px);
  align-items:start;padding:clamp(40px,5vw,64px) 0;
  border-top:1px solid rgba(255,255,255,.22)}
.light .bio{border-top-color:rgba(20,23,27,.24)}
.bio:first-of-type{border-top:0;padding-top:0}
.bio>figure{margin:0}
.bio img{display:block;width:100%;height:auto;background:var(--lightph)}
.bio .role{display:block;margin-bottom:14px}
.bio h2{margin:0;font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.5}
.bio h3{margin:34px 0 14px;font-size:15px;font-weight:700;
  padding-left:14px;border-left:3px solid var(--accent)}
.light .bio h3{border-left-color:var(--accent-dk)}
.bio p{font-size:15px;line-height:2.25;margin-bottom:1.4em}
.bio p:last-child{margin-bottom:0}
.bio .quote{font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.85;
  margin:0 0 26px}
.bio .skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.bio .skills span{font-size:12px;border:1px solid rgba(20,23,27,.28);padding:8px 14px}
@media (max-width:860px){
  .bio{grid-template-columns:1fr;gap:26px}
  .bio:first-of-type{padding-top:0}
}

/* 施工事例：邸ごとのまとまり */
.case-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)}
.case-head h2{margin:0;font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.6}
.case-head .place{font-size:13px;opacity:.72}

/* フッターのロゴ */
/* 高さ指定＋width:auto だと、ブロック要素の画像が親の幅まで伸びる。
   縦横比から幅を計算して固定する（370x400） */
.ft-logo{display:block;height:clamp(84px,8vw,104px);
  width:calc(clamp(84px,8vw,104px) * 370 / 400);margin-bottom:22px}

/* 同じ縦横比の写真だけを並べる行（切り抜かずに高さが揃う） */
.photos{display:grid;gap:clamp(14px,1.6vw,22px)}
.photos.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.photos.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.photos figure{margin:0}
.photos img{display:block;width:100%;height:auto;background:var(--lightph)}
.photos figcaption{margin-top:12px;font-size:12px;line-height:1.9;opacity:.72}
@media (max-width:860px){.photos.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.photos.c2,.photos.c3{grid-template-columns:1fr}}

/* 対応エリアの見せ方 */
.areas{display:flex;flex-wrap:wrap;gap:8px 30px;margin:0 0 34px;padding:0}
.areas li{list-style:none;font-size:clamp(24px,2.9vw,40px);font-weight:700;
  line-height:1.5;letter-spacing:.01em}
.areas li span{font-size:13px;font-weight:400;opacity:.66;margin-left:8px}

/* 代表の言葉：写真と文章を 38:62 で組み、塊の横幅を抑えて一行を短くする */
.founder{max-width:1120px;margin:0 auto}
.split.portrait{grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:860px){.split.portrait{grid-template-columns:1fr}
  .founder .ph{max-width:300px}}
.saying,.split .txt p.saying{font-size:clamp(26px,3.1vw,40px);font-weight:700;
  line-height:1.62;letter-spacing:.01em;margin:0 0 30px}
.saying em{font-style:normal;color:var(--accent)}

/* 決め方の3ステップ（写真なし・番号と文字だけ） */
.steps{gap:clamp(30px,4vw,56px)}
.steps .card{gap:16px;padding-top:24px;border-top:1px solid rgba(255,255,255,.28)}
.light .steps .card{border-top-color:rgba(20,23,27,.26)}
.steps .num{display:block;font-size:12px;letter-spacing:.14em}
.steps h3{font-size:clamp(20px,2.2vw,26px)}
.steps p{max-width:26em}

/* 代表の署名 */
.founder .txt p:not(.saying){max-width:34em}
.founder .from{margin-top:30px;font-size:13px;letter-spacing:.06em;
  color:rgba(255,255,255,.66)}

/* 対応エリアの補足 */
/* 対応エリア。地名と和文の注記を左、英文を右に置く */
.area-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,72px);align-items:end}
.area-row .areas{margin:0 0 26px}
.area-row .en{margin:0}
/* 注記は英文リードと同じ小ささ・静かさで、句点で改行する */
.area-note{font-size:12px;line-height:2.1;letter-spacing:.01em;
  color:rgba(20,23,27,.72);margin:0}
@media (max-width:1100px){
  .area-row{grid-template-columns:1fr;align-items:start;gap:26px}}
/* 注記が横に並ぶ幅では6つが1行に収まらず「5＋1」になるため、3列に組む */
@media (min-width:1101px) and (max-width:1400px){
  .areas{display:grid;grid-template-columns:repeat(3,max-content);gap:4px 30px}}

/* 会社概要：見出しを左、表を右に置く。表を全幅に広げると罫線だけが
   1350px伸びて中身が左に寄って見えるため */
.split.spec{grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(30px,5vw,88px);align-items:start}
.spec-head .lab{color:var(--accent);display:block;margin-bottom:22px}
.spec-head h2{margin:0;font-size:clamp(30px,3.6vw,46px)}
@media (max-width:1000px){.split.spec{grid-template-columns:1fr;gap:34px}}

/* 文末で改行する。幅の狭い画面では自然に流す */
br.pc{display:inline}
@media (max-width:860px){br.pc{display:none}}

/* 写真群への短い注記 */
.photo-note{margin:clamp(22px,2.6vw,32px) 0 0;font-size:12px;line-height:2.1;
  letter-spacing:.01em;color:rgba(255,255,255,.62)}
.photo-note a{border-bottom:1px solid rgba(255,255,255,.4)}
.photo-note a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.light .photo-note{color:rgba(20,23,27,.66)}

/* 承っているもの。主の2つと、そのほかの4つで格を変える */
.scope{display:grid;gap:clamp(26px,3.2vw,44px) clamp(24px,3vw,48px)}
.scope .it{border-top:1px solid rgba(255,255,255,.24);padding-top:22px}
.scope b{display:block;font-weight:700;line-height:1.55;margin-bottom:12px;
  word-break:auto-phrase;line-break:strict}
.scope span{display:block;line-height:2;color:rgba(255,255,255,.72);
  word-break:auto-phrase;line-break:strict;text-wrap:pretty}
.scope.main{grid-template-columns:repeat(2,minmax(0,1fr))}
.scope.main .it{border-top-width:2px;border-top-color:rgba(255,255,255,.5)}
.scope.main b{font-size:clamp(23px,2.7vw,33px);margin-bottom:16px}
.scope.main span{font-size:15px;max-width:32em}
.scope.sub{grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(34px,4.2vw,58px)}
.scope.sub b{font-size:clamp(16px,1.7vw,20px)}
.scope.sub span{font-size:12.5px;color:rgba(255,255,255,.62)}
.light .scope .it{border-top-color:rgba(20,23,27,.24)}
.light .scope.main .it{border-top-color:rgba(20,23,27,.5)}
.light .scope span{color:rgba(20,23,27,.72)}
.light .scope.sub span{color:rgba(20,23,27,.64)}
.scope-note{margin:clamp(30px,3.6vw,46px) 0 0;font-size:13px;line-height:2.1;
  color:rgba(255,255,255,.66)}
.light .scope-note{color:rgba(20,23,27,.66)}
@media (max-width:900px){.scope.sub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.scope.main,.scope.sub{grid-template-columns:1fr}}

/* メーカーと費用を左右に並べる */
.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,5vw,80px);align-items:start}
.twocol h3{margin:0 0 26px;font-size:clamp(21px,2.3vw,28px);font-weight:700}
.dl.compact{grid-template-columns:104px 1fr}
.dl.compact dt,.dl.compact dd{padding:18px 0}
.dl.compact dd{font-size:14px;line-height:2;max-width:none}
.sidenote{margin:26px 0 0;font-size:12px;line-height:2.1;color:rgba(20,23,27,.66)}
@media (max-width:900px){.twocol{grid-template-columns:1fr;gap:54px}
  .dl.compact{grid-template-columns:1fr}}

/* 3列の一覧（法人ページのお受けしている工事） */
.scope.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.scope.three b{font-size:clamp(19px,2.1vw,25px)}
.scope.three span{font-size:14px}
@media (max-width:900px){.scope.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.scope.three{grid-template-columns:1fr}}

/* よくあるご質問（一問一答） */
.qa-list{border-top:1px solid rgba(255,255,255,.22)}
.light .qa-list{border-top-color:rgba(20,23,27,.22)}
.qa-item{border-bottom:1px solid rgba(255,255,255,.22);
  padding:clamp(24px,2.8vw,34px) 0}
.light .qa-item{border-bottom-color:rgba(20,23,27,.22)}
.qa-item .q,.qa-item .a{display:flex;gap:clamp(12px,1.4vw,20px);align-items:baseline}
.qa-item .a{margin-top:14px}
.qa-item i{font-style:normal;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.08em;flex:none;width:16px}
.qa-item .q i{color:var(--accent)}
.light .qa-item .q i{color:var(--accent-dk)}
.qa-item .a i{color:rgba(255,255,255,.42)}
.light .qa-item .a i{color:rgba(20,23,27,.42)}
.qa-item .q b{font-size:clamp(17px,1.9vw,21px);font-weight:700;line-height:1.75}
.qa-item .a p{margin:0;font-size:15px;line-height:2.15;max-width:46em;
  color:rgba(255,255,255,.84)}
.light .qa-item .a p{color:rgba(20,23,27,.8)}

/* ヘッダーのロゴマーク。地色が透明→濃色に変わるので2枚を入れ替える */
.logo{display:inline-flex;align-items:center;gap:clamp(9px,1vw,13px)}
.logo-mark{position:relative;display:block;flex:none;
  width:calc(34px * 370 / 400);height:34px}
.logo-mark img{position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .3s}
.logo-mark .on-dark{opacity:0}
.hd.stuck .logo-mark .on-light{opacity:0}
.hd.stuck .logo-mark .on-dark{opacity:1}
@media (max-width:560px){.logo-mark{width:calc(28px * 370 / 400);height:28px}}

/* お問い合わせ。フォームの横に、送る前に要る情報を置く */
.contact-2col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(36px,5vw,84px);align-items:stretch}
.contact-2col .form{max-width:none}
/* フォームのほうが背が高いので、横の列は追従させる。
   電話番号が常に見えている状態にもなる。
   sticky は grid item 自身ではなく、中の箱に掛ける（item に掛けると
   止まる範囲が中身の高さぶんしかなく、そのまま流れていく） */
.contact-aside{height:100%}
.aside-inner{position:sticky;top:calc(76px + 24px)}
@media (max-width:900px){.contact-2col{grid-template-columns:1fr;gap:clamp(44px,6vw,60px)}
  .contact-aside{height:auto}.aside-inner{position:static}}

.aside-panel{background:var(--charcoal);color:var(--text);
  padding:clamp(24px,2.4vw,32px)}
.aside-panel .lab{color:var(--accent)}
.aside-panel .num{display:block;font-family:"Archivo",sans-serif;
  font-size:clamp(26px,2.8vw,34px);font-weight:600;letter-spacing:.02em;
  color:#fff;word-break:normal;margin-bottom:18px}
.aside-panel .num:hover{color:var(--accent)}
.aside-panel p{margin:0 0 10px;font-size:13px;line-height:2;
  color:rgba(255,255,255,.78)}
.aside-panel p:last-child{margin-bottom:0}

.aside-block{margin-top:clamp(26px,2.8vw,34px);
  padding-top:clamp(22px,2.4vw,28px);border-top:1px solid rgba(20,23,27,.22)}
.aside-block h3{margin:0 0 12px;font-size:14px;font-weight:700;line-height:1.7}
.aside-block p{margin:0;font-size:13px;line-height:2.05;
  color:rgba(20,23,27,.72)}

/* ===== 2026-10 修正指示書の反映で追加 ===== */

/* 和文のボタン（ヒーローの「法人のお問い合わせ」など）。btn-tel の枠だけ借りる */
.btn-tel.ja{font-family:"Archivo",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;gap:12px}
.contact .btn-tel.ja{font-size:11px}
/* 「工事のご相談」と「法人のお問い合わせ」を並べる所は、スマホで同じ幅に揃える */
@media (max-width:560px){
  .hero-cta:has(.btn-tel.ja)>a{width:100%;justify-content:center;padding:0 20px}
  .contact .hero-cta:has(.btn-tel.ja){width:100%;max-width:400px}}

/* 代表メッセージ：長文なので写真は上揃えにし、読んでいる間は横に留める */
.founder.long .split.portrait{align-items:start}
@media (min-width:861px){.founder.long .ph{position:sticky;top:calc(76px + 24px)}}
.founder.long .txt p:not(.saying):not(.from){margin:0 0 1.5em;font-size:15px;line-height:2.25}
.founder .lead-in{margin:-14px 0 34px;font-size:15px;font-weight:700;color:var(--accent)}

/* 本文を読ませるブロック（理念・職人の心）。一行を短く、段落の間を空ける */
.reading{max-width:40em;margin:0 auto}
.reading p{margin:0 0 1.6em;font-size:16px;line-height:2.3}
.reading p:last-child{margin-bottom:0}
@media (max-width:560px){.reading p{font-size:15px;line-height:2.2}}

/* 職人の心 */
.kokoro .shead{text-align:center}
.kokoro .shead .lab::before{display:none}
.kokoro-sub{margin-top:18px;font-size:clamp(16px,1.8vw,19px);font-weight:700;letter-spacing:.08em}
.kokoro-ch{max-width:40em;margin:clamp(64px,8vw,104px) auto 0;
  padding-top:clamp(36px,4.4vw,52px);border-top:1px solid rgba(20,23,27,.24)}
.kokoro-ch h3{margin:0;font-size:clamp(20px,2.3vw,26px);font-weight:700;line-height:1.6}
.kokoro-ch .catch{margin:16px 0 clamp(26px,3vw,36px);font-size:clamp(18px,2vw,22px);
  font-weight:700;line-height:1.8;color:var(--accent-dk)}
/* 職人の心の結び。TOPの紹介帯と同じ、暗い地に中央揃え */
.kokoro-goal{text-align:center}
.kokoro-goal h3{margin:22px 0 clamp(34px,4.4vw,56px);font-size:clamp(22px,2.6vw,30px);
  font-weight:700;letter-spacing:.06em;color:#fff}
.kokoro-goal .reading{max-width:34em}
.kokoro-goal .reading p{color:rgba(255,255,255,.84)}
.kokoro-goal .big{margin:clamp(48px,6vw,80px) 0 0;padding-top:clamp(40px,5vw,64px);
  border-top:1px solid rgba(255,255,255,.18);font-size:clamp(24px,3.4vw,42px);
  font-weight:700;line-height:1.75;letter-spacing:.02em;color:#fff}
.kokoro-goal .big em{font-style:normal;color:var(--accent)}
.kokoro-goal .sign{margin:clamp(22px,2.6vw,30px) 0 0;font-size:15px;letter-spacing:.06em;
  color:rgba(255,255,255,.72)}
@media (max-width:560px){.kokoro-goal .reading{text-align:left}}

/* 理念の下の「大切にしていること」は4つを2×2で並べる */
.scope.main.four .it{padding-top:22px}

/* ページの最後に置く「次に読む」導線 */
.next-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.next-links a{display:block;padding:clamp(22px,2.4vw,30px) 0 0;border-top:1px solid rgba(255,255,255,.3)}
.next-links a:hover{opacity:1;border-top-color:var(--accent)}
.next-links .lab{display:block;color:var(--accent);margin-bottom:10px}
.next-links b{display:block;font-size:clamp(18px,1.9vw,22px);font-weight:700;line-height:1.6}
.next-links span.d{display:block;margin-top:10px;font-size:13px;line-height:2;color:rgba(255,255,255,.7)}
.light .next-links a{border-top-color:rgba(20,23,27,.3);color:var(--ink)}
.light .next-links span.d{color:rgba(20,23,27,.7)}
@media (max-width:860px){.next-links{grid-template-columns:1fr}}

/* TOPの「職人の心」紹介 */
.kokoro-teaser{text-align:center}
.kokoro-teaser .big{margin:0 0 clamp(26px,3vw,36px);font-size:clamp(24px,3.4vw,42px);
  font-weight:700;line-height:1.75;letter-spacing:.02em}
.kokoro-teaser .big em{font-style:normal;color:var(--accent)}
/* 行末の「。」は字面が左半分だけで、右半分の空白のぶん行全体が左に寄って見える。
   その空白を詰めて、字面で中央にそろえる（PC・スマホどちらの改行でも行末に来る） */
.kokoro-teaser .big .kt{margin-right:-.56em}
.kokoro-teaser p{max-width:34em;margin:0 auto 34px;font-size:15px;line-height:2.2}
/* 下の本文用の幅制限（34em）が見出しにも効き、広い画面で見出しの箱が左に寄っていた */
.kokoro-teaser p.big{max-width:none}

/* お問い合わせ：一般と法人の入口 */
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px);
  margin-bottom:clamp(40px,5vw,64px)}
.who a{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.6vw,32px);
  border:1px solid rgba(20,23,27,.3);color:var(--ink)}
.who a:hover{opacity:1;border-color:var(--ink);background:rgba(255,255,255,.4)}
.who .lab{color:var(--accent-dk)}
.who b{font-size:clamp(19px,2vw,23px);font-weight:700}
.who span.d{font-size:14px;line-height:2;color:rgba(20,23,27,.76);word-break:auto-phrase;text-wrap:pretty}
@media (max-width:620px){.who{grid-template-columns:1fr}}

/* スマホだけで改行する */
br.sp{display:none}
@media (max-width:860px){br.sp{display:inline}}

/* 「その他」の小項目が3つのとき */
.scope.sub.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.scope.sub.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.scope.sub.c3{grid-template-columns:1fr}}

/* セクション末尾の一行（左に注記、右に次へのリンク） */
.sec-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;
  flex-wrap:wrap;margin-top:clamp(36px,4.4vw,56px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid rgba(255,255,255,.18)}
.sec-foot p{margin:0;font-size:14px;line-height:2;color:rgba(255,255,255,.72)}
.sec-foot .link-u{padding-bottom:8px}
.light .sec-foot{border-top-color:rgba(20,23,27,.2)}
.light .sec-foot p{color:rgba(20,23,27,.72)}

/* お問い合わせ帯の電話番号。「TEL」と番号を一塊にして割らない */
.cta-tel{display:inline-flex;align-items:baseline;gap:14px;white-space:nowrap;
  font-family:"Archivo",sans-serif;font-size:clamp(24px,2.8vw,32px);font-weight:500;
  letter-spacing:.04em;color:#fff}
.cta-tel .lab{font-size:11px;letter-spacing:.16em;color:var(--accent)}
.cta-tel:hover{color:var(--accent);opacity:1}

/* ===== 採用ページ ===== */
.rhero{background:var(--light);color:var(--ink);
  padding:calc(76px + clamp(28px,4vw,52px)) var(--pad) clamp(56px,7vw,96px)}
.rhero .crumb{margin-bottom:clamp(26px,3.4vw,44px)}
.rhero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(30px,4.4vw,72px);align-items:center}
.rhero-txt .lab{display:block;color:var(--accent-dk);margin-bottom:clamp(20px,2.4vw,30px)}
.rhero-catch{margin:0;font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  font-size:clamp(38px,5.6vw,76px);font-weight:700;line-height:1.38;letter-spacing:.02em}
.rhero-key{margin:clamp(24px,3vw,38px) 0 0;font-size:clamp(15px,1.6vw,18px);font-weight:700;
  line-height:2;color:rgba(20,23,27,.82)}
.rhero-key em{font-style:normal;color:var(--accent-dk)}
.rhero-ph{margin:0}
.rhero-ph img{display:block;width:100%;height:auto;background:var(--lightph)}
@media (max-width:860px){.rhero-grid{grid-template-columns:1fr}}

/* 「〜したい」の声を1行ずつ */
.rquotes{font-weight:700;line-height:2.2}
.light .rquotes{color:var(--ink)}
.rlead{font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--accent-dk)}
.reading .rlead{font-size:clamp(18px,2vw,22px)}

/* 大切にしていること（3つ） */
.rvalues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,56px)}
.rvalue{padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.rvalue .num{display:block;font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px}
.rvalue h3{margin:0 0 20px;font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.65;color:#fff}
.rvalue p{margin:0 0 1.2em;font-size:15px;line-height:2.15;color:rgba(255,255,255,.82)}
.rvalue p:last-child{margin-bottom:0}
@media (max-width:900px){.rvalues{grid-template-columns:1fr}}
.rmochi{margin-top:clamp(56px,7vw,96px)}
.rmochi img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:560px){.rmochi.c3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

/* こんな人と一緒に働きたい */
.rlist{list-style:none;margin:0;padding:0;max-width:40em}
.rlist li{position:relative;padding:18px 0 18px 30px;border-bottom:1px solid rgba(20,23,27,.18);
  font-size:16px;font-weight:700;line-height:1.8}
.rlist li::before{content:"";position:absolute;left:4px;top:29px;width:12px;height:2px;background:var(--accent-dk)}

/* 締めの問い合わせ帯：本文が長いので一行を短く */
.rcta-body{max-width:36em}
.rcta-body p{margin:0 0 1.2em}
.rcta-body p:last-child{margin-bottom:0}
.contact .rquotes{color:#fff}
.who-note{margin:calc(-1 * clamp(20px,2.6vw,36px)) 0 clamp(40px,5vw,64px);font-size:13px;line-height:2;
  color:rgba(20,23,27,.72)}
.who-note a{border-bottom:1px solid rgba(20,23,27,.4);margin:0 2px}
.who-note a:hover{opacity:1;color:var(--accent-dk);border-bottom-color:var(--accent-dk)}
.field[hidden]{display:none}
/* 「〜したい人」の「人」だけが次の行に落ちないよう、文節で折り返す */
.rlist li{word-break:auto-phrase;text-wrap:pretty}
@media (max-width:560px){.rlist li{font-size:15px;padding:16px 0 16px 26px}
  .rlist li::before{top:27px;left:2px}}
/* 2026-10-27 修正：職人の心の小見出し・エリア注記・代表紹介の小見出し */
.kokoro-ch h3{font-size:clamp(24px,2.9vw,34px)}
.area-note{font-size:clamp(15px,1.3vw,17px);font-weight:700;line-height:2;color:var(--ink)}
.bio p.sub-h{margin:26px 0 8px;font-size:16px;font-weight:700;line-height:1.8}
.bio p.closing{margin-top:30px;font-size:clamp(18px,2vw,22px);font-weight:700;line-height:1.8}
.bio p.closing span{display:block;margin-top:6px;font-size:15px;font-weight:400}
.kokoro .reading p{font-size:17px}
@media (max-width:560px){.kokoro .reading p{font-size:16px}}
/* プライバシーポリシー：見出しを左、本文を右に。項目ごとに罫線で区切る */
.pol{max-width:1000px}
.pol-item{display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,4vw,56px);
  padding:clamp(30px,3.6vw,44px) 0;border-top:1px solid rgba(20,23,27,.16)}
.pol-item:first-child{border-top:0;padding-top:0}
.pol-item h2{margin:0;font-size:18px;font-weight:700;line-height:1.7}
.pol-item h2 span{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.14em;color:var(--accent-dk)}
.pol-item p{margin:0 0 1em;font-size:15px;line-height:2.1;text-wrap:pretty}
.pol-item p:last-child{margin-bottom:0}
.pol-item ul{margin:0 0 1.2em;padding:16px 20px 16px 2.2em;background:rgba(20,23,27,.04)}
.pol-item li{font-size:15px;line-height:1.9;margin:.2em 0}
.pol-item .pol-note{margin-top:1.4em;font-size:13px;color:rgba(20,23,27,.66)}
.pol-contact{display:grid;grid-template-columns:5em 1fr;row-gap:10px;margin:0;font-size:15px;line-height:1.8}
.pol-contact dt{font-weight:700;color:rgba(20,23,27,.6);font-size:13px;padding-top:2px}
.pol-contact dd{margin:0}
.pol-contact a{text-decoration:underline}
.pol-date{margin:clamp(30px,3.6vw,44px) 0 0;padding-top:24px;border-top:1px solid rgba(20,23,27,.16);
  font-size:13px;color:rgba(20,23,27,.6)}
@media (max-width:760px){
  .pol-item{grid-template-columns:1fr;gap:14px}}
.pol-item p a{text-decoration:underline}