/* ===== 日本語の折り返し: 文節ごとに切る。行頭に句読点を置かない ===== */
body{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
h1,h2,h3,.statement,.cta h2 span{text-wrap:balance}
p,li,dd,summary,.cap{text-wrap:pretty}
.ph{display:inline-block;white-space:nowrap}
.statement .w{display:inline}
.statement .w.nw{display:inline-block;white-space:nowrap}

/* ===== 図面の寸法線 ===== */
.dim{display:flex;align-items:center;gap:14px;color:var(--mute);font-family:var(--lat);font-style:italic;font-weight:500;font-size:15px;letter-spacing:.14em;margin-top:clamp(18px,2.4vw,30px)}
.dim i{flex:1;height:1px;background:currentColor;position:relative;opacity:.6}
.dim i::before,.dim i::after{content:"";position:absolute;top:-7px;width:1px;height:15px;background:currentColor}
.dim i::before{left:0}.dim i::after{right:0}
.dim-l{max-width:520px}
.bgdk .dim{color:rgba(242,239,227,.72)}

/* ===== About: 段組みをやめ、文章が写真を回り込む ===== */
.ab{margin-top:clamp(20px,3vw,44px)}
.ab .statement{max-width:none;margin-top:0;font-size:clamp(24px,3.7vw,58px)}
.ab-img{float:right;width:min(34vw,470px);aspect-ratio:4/5;margin:-40px calc(var(--pad)*-1) 24px clamp(20px,3vw,48px);shape-outside:margin-box;overflow:hidden;border-radius:4px;position:relative}
.ab-img img{width:100%;height:100%;object-fit:cover}
.ab-img figcaption{position:absolute;left:12px;bottom:10px;font-size:11px;color:#fff;background:rgba(23,19,15,.6);padding:.1em .8em;border-radius:99px}
.facts{display:flex;flex-wrap:wrap;gap:0 clamp(28px,5vw,84px);border:0;clear:both;margin-top:clamp(70px,9vw,140px);padding-top:10px}
.fact{border:0;padding:0;flex:0 1 auto}
.fact.f2{margin-top:clamp(30px,5vw,80px)}.fact.f3{margin-top:clamp(10px,1.6vw,26px)}.fact.f4{margin-top:clamp(50px,7vw,110px)}
.fact b{font-size:clamp(84px,12.5vw,200px);line-height:.92;color:transparent;-webkit-text-stroke:1.5px var(--brown);transition:color 1.1s .5s}
.fact b.in{color:var(--brown)}
.fact b small{font-size:.17em;-webkit-text-stroke:0;color:var(--amber);margin-left:.3em;letter-spacing:.04em}
.fact p{max-width:16em;font-size:13.5px}

/* ===== Services: 鉄骨階段のように、1段ずつ右へ ===== */
.ixl{border-top:0}
.ix{grid-template-columns:clamp(40px,4vw,60px) auto minmax(220px,1fr);grid-template-areas:"n b e" "n b p";align-items:end;gap:2px clamp(16px,2vw,32px);margin-left:calc(var(--i)*3.3vw);padding:clamp(18px,2.2vw,32px) 0}
.ix-n{grid-area:n;align-self:start;padding-top:.7em}
.ix b{grid-area:b;font-size:clamp(30px,4.6vw,70px);line-height:1.1;white-space:nowrap}
.ix-e{grid-area:e;align-self:end}
.ix p{grid-area:p;align-self:start;max-width:26em}

/* ===== Works: 重なるコラージュ ===== */
.wk-c{position:relative;max-width:1520px;margin:clamp(30px,5vw,70px) auto 0;height:clamp(520px,66vw,980px)}
.wk-c figure{position:absolute;overflow:hidden;border-radius:4px;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.wk-c img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.wk-c figure:hover img{transform:scale(1.05)}
.wc1{left:var(--pad);top:0;width:60%;aspect-ratio:16/10;z-index:1}
.wc2{right:calc(var(--pad)*-.3);top:15%;width:44%;aspect-ratio:4/3;z-index:3}
.wc3{left:24%;bottom:0;width:42%;aspect-ratio:16/10;z-index:2}
.wc-v{position:absolute;right:var(--pad);bottom:0;writing-mode:vertical-rl;font-size:12px;color:var(--mute);letter-spacing:.2em}

.wk,.about{overflow-x:clip}
@media (min-width:981px){.fact.f4{margin-left:auto;margin-right:clamp(0px,6vw,100px)}}

/* ===== Q&A: 見出しは追従、背景に大きな文字 ===== */
#qa{overflow:hidden}
#qa::before{content:"Q&A";position:absolute;right:-1vw;top:2%;font-family:var(--lat);font-style:italic;font-weight:500;font-size:clamp(160px,28vw,420px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(81,72,55,.22);pointer-events:none}
#qa .split{position:relative}
#qa .split>div:first-child{position:sticky;top:120px}

@media (max-width:980px){
  .ab-img{float:none;width:100%;aspect-ratio:16/11;margin:0 0 26px}
  .fact b{font-size:clamp(76px,22vw,130px)}
  .fact.f2,.fact.f3,.fact.f4{margin-top:24px}
  .ix{grid-template-columns:44px 1fr;grid-template-areas:"n b" "n e" "n p" "n t";margin-left:calc(var(--i)*2.4vw)}
  .ix b{white-space:normal;font-size:clamp(28px,8vw,44px)}
  .ix-th{grid-area:t}
  .wk-c{height:auto;display:grid;gap:14px;padding:0 var(--pad)}
  .wk-c figure{position:static;width:auto;aspect-ratio:16/10}
  .wc2{margin-left:12%}.wc3{margin-right:12%}
  .wc-v{position:static;writing-mode:horizontal-tb}
  #qa .split>div:first-child{position:static}
}