/* サブページ用スタイル（トップページの site.css に追加して使います） */
.phero{position:relative;min-height:78svh;color:var(--white);display:flex;align-items:flex-end;overflow:hidden;background:#3b3636}
.phero > .ph{position:absolute;inset:0;background:#4a4343;color:var(--ivory)}
.phero > .ph > .zi{animation:slow 22s ease-out forwards}
.phero .veil{position:absolute;inset:0;background:rgba(24,20,20,.32)}
.phero-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(48px,9vh,100px);width:100%;max-width:1600px;margin-inline:auto}
.phero h1{font-family:var(--serif);font-weight:300;font-size:clamp(42px,7vw,104px);line-height:1;letter-spacing:.03em}
.phero .sub{margin-top:clamp(16px,2.4vh,26px);font-size:clamp(15px,1.7vw,22px);letter-spacing:.16em;line-height:1.9}
.phero .kicker{margin-top:clamp(20px,3vh,34px);font-family:var(--serif);font-size:12px;letter-spacing:.28em;display:flex;align-items:center;gap:22px}
.phero .kicker::before{content:"";width:clamp(48px,10vw,140px);height:1px;background:currentColor;opacity:.7}

.sec{padding-block:var(--sec)}
.sec.tight{padding-block:clamp(56px,7vw,100px)}
.sec.white{background:var(--white)}
.sec.beige{background:var(--beige)}
.sec.pink{background:var(--pink)}
.sec-title{margin-bottom:clamp(36px,5vw,72px)}
.sec-title .lbl{margin-bottom:22px}
.intro{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,7vw,120px);align-items:start;max-width:1280px;margin-inline:auto}
.intro .lbl{margin-bottom:24px}
.intro .body p{font-size:13.5px;line-height:2.2;color:#4a4444;max-width:34em}
.intro .body p + p{margin-top:1.4em}

/* 特徴（3つ）— トップの .str-pts を流用 */
.feat{max-width:1280px;margin-inline:auto}

/* ギャラリー */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px)}
.gal .ph{aspect-ratio:3/4}
.gal .wide{grid-column:span 7;aspect-ratio:auto;height:clamp(300px,42vw,620px)}
.gal .mid{grid-column:span 5;aspect-ratio:auto;height:clamp(300px,42vw,620px)}
.gal .a{grid-column:span 5;aspect-ratio:auto;height:clamp(260px,34vw,500px)}
.gal .b{grid-column:span 4;aspect-ratio:auto;height:clamp(260px,34vw,500px)}
.gal .c{grid-column:span 3;aspect-ratio:auto;height:clamp(260px,34vw,500px)}

/* よくある質問 */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-size:clamp(14px,1.5vw,17px);letter-spacing:.1em;line-height:1.8}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--serif);font-size:18px;margin-right:18px;color:var(--mute)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .5s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 44px 26px 36px;font-size:13.5px;line-height:2.1;color:#4a4444}

/* 会社情報 */
.tbl{max-width:900px;margin-inline:auto;border-top:1px solid var(--line)}
.tbl > div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.tbl dt{font-size:12px;letter-spacing:.18em;color:var(--mute)}
.tbl dd{font-size:14px;letter-spacing:.1em;line-height:2}

/* 実績一覧 */
.works-page .masonry{columns:3}
.works-page .w .cap{display:block;padding:10px 2px 0;font-family:var(--serif);font-size:12px;letter-spacing:.22em;color:var(--mute)}

/* 実績詳細 */
.wd{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,100px);align-items:start;max-width:1280px;margin-inline:auto}
.wd figure{background:var(--beige)}
.wd figure img{width:100%;height:auto}
.wd h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4vw,54px);line-height:1.1;letter-spacing:.04em;margin-bottom:28px}
.wd dl{border-top:1px solid var(--line);margin-bottom:28px}
.wd dl > div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.wd dt{font-family:var(--serif);font-size:12px;letter-spacing:.24em;color:var(--mute)}
.wd dd{font-size:14px;letter-spacing:.1em}
.wd .note{font-size:13.5px;line-height:2.1;color:#4a4444;margin-bottom:28px}
.wnav{display:flex;justify-content:space-between;gap:20px;max-width:1280px;margin:clamp(48px,7vw,96px) auto 0;padding-top:28px;border-top:1px solid var(--line);font-family:var(--serif);font-size:13px;letter-spacing:.26em}
.wnav a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .4s}
.wnav a:hover{border-color:currentColor}
.crumb{max-width:1280px;margin:0 auto clamp(28px,4vw,48px);font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--mute)}
.crumb a:hover{color:var(--char)}
.top-pad{padding-top:clamp(110px,14vw,170px)}

/* お問い合わせページ */
.cf-lead{text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.cf-lead .lbl{justify-content:center;margin-bottom:22px}
.cf-lead .copy{margin-bottom:20px}
.cf-lead p.sm{font-size:13.5px;color:#4a4444;line-height:2.1}
.cf-points{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap;margin-top:28px;list-style:none;font-size:12.5px;letter-spacing:.12em;color:#4a4444}
.cf-points li::before{content:"";display:inline-block;width:5px;height:5px;border:1px solid var(--char);border-radius:50%;margin-right:10px;vertical-align:middle}

/* 暗いページ（COSTUME） */
body.dark{background:#292727;color:var(--ivory)}
.dark .sec.white,.dark .sec.beige{background:#231f1f}
.dark .lbl{color:var(--ivory)}
.dark .str-pts article{border-top-color:rgba(247,244,240,.5)}
.dark .str-pts p,.dark .intro .body p,.dark .faq details p{color:rgba(247,244,240,.78)}
.dark .faq details,.dark .faq details:last-child{border-color:rgba(247,244,240,.22)}
.dark .faq summary::before{color:rgba(247,244,240,.6)}
.dark .steps::before{background:rgba(247,244,240,.25)}
.dark .st .c{background:#3b3636}
.dark .st .c svg{stroke:var(--ivory)}
.dark .st b{color:rgba(247,244,240,.6)}
.dark .st:not(:last-child)::after{border-color:rgba(247,244,240,.55)}
.dark .flow-plain{background:transparent}
.dark .tags li{border-color:rgba(247,244,240,.35)}
.dark .copy.pinkish{color:var(--pink)}
.dark .hd.solid{background:#231f1f;color:var(--ivory);border-color:rgba(247,244,240,.16)}
.dark .fcta{background:var(--ivory);color:var(--char)}

@media (max-width:1024px){
  .gal .wide,.gal .mid{grid-column:span 12;height:auto;aspect-ratio:3/2}
  .gal .a,.gal .b{grid-column:span 6;height:auto;aspect-ratio:3/4}
  .gal .c{grid-column:span 12;height:auto;aspect-ratio:3/2}
}
@media (max-width:760px){
  .phero{min-height:70svh}
  .intro,.wd{grid-template-columns:1fr}
  .works-page .masonry{columns:2;column-gap:8px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .wide{grid-column:span 2;aspect-ratio:3/2}
  .gal .mid,.gal .a,.gal .b,.gal .c{grid-column:span 1;height:auto;aspect-ratio:3/4}
  .tbl > div{grid-template-columns:1fr;gap:4px}
  .faq summary{padding-right:34px}
  .faq details p{padding:0 8px 24px 0}
}