/* 案B 夜明け：夜の濃紺から朝の生成りへ。明朝の大きな文字と全幅の写真 */
:root{--night:#091322;--navy:#101f36;--gold:#c9a357;--gold-l:#e4c98c;--dawn:#efe7d8;--dawn2:#f7f2e8;--fg:#f3eee3;--fg2:#c5c8cc;--ink:#101f36;--gut:clamp(16px,4.6vw,76px);--dr-bg:#091322;--bar-bg:#091322;--bar-cta:#c9a357;--focus:#e4c98c;--req:#101f36}
body{background:var(--night);color:var(--fg);font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:17px;font-weight:500}
@media(max-width:767.98px){body{font-size:16px}}
.h-xl,.h-lg,.h-md,.v-title,.c-big,.hs-panel h3,.wk h3,.flow-list h3{font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif}
.h-xl{font-size:clamp(42px,7.6vw,126px);line-height:1.16;font-weight:700;letter-spacing:.005em}
.h-lg{font-size:clamp(34px,4.7vw,76px);line-height:1.24;font-weight:700}
.h-xl .ln,.h-lg .ln{white-space:nowrap}
@media(max-width:767.98px){.h-lg{font-size:min(8.3vw,44px)}.h-xl{font-size:min(10.6vw,60px)}}
.h-md{font-size:clamp(26px,3vw,44px);line-height:1.3;font-weight:700}
.sp{display:none}@media(max-width:767.98px){.sp{display:inline}}
.visually{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.kicker{color:var(--gold-l);font-size:15px;margin-bottom:16px;font-weight:700}
.btn{background:var(--gold);color:var(--night);border-radius:0}.btn:hover{background:var(--gold-l)}
.hd{color:#fff}
.hd.is-scrolled{background:rgba(9,19,34,.9);backdrop-filter:blur(8px)}
.logo-t{color:#fff}
body.menu-open .logo{visibility:visible}
.hd-tel b{font-family:"Shippori Mincho B1",serif}

.veil{position:fixed;inset:0;z-index:200;background:var(--night);display:grid;place-items:center;pointer-events:none}
html:not(.anim) .veil{display:none}

/* ヒーロー：夜→朝 */
.hero{position:relative;height:100svh}
.hero-stage{position:relative;height:100svh;overflow:hidden}
.anim .hero{height:210svh}
.hero-bg{position:absolute;inset:0}
.hero-bg img{object-position:72% 50%}
.hb-morning{opacity:0}
html:not(.anim) .hb-morning{display:none}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,13,24,.55),rgba(6,13,24,0) 58%),linear-gradient(0deg,rgba(6,13,24,.72),rgba(6,13,24,0) 45%);z-index:1;pointer-events:none}
.hero-copy{position:absolute;z-index:2;inset:0;padding:clamp(96px,14vh,130px) var(--gut) clamp(28px,6vh,60px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
.v-title{writing-mode:vertical-rl;position:absolute;top:clamp(100px,14vh,130px);left:var(--gut);font-weight:700;font-size:clamp(50px,min(8vw,12.4vh),118px);line-height:1.26;letter-spacing:.06em;color:#fff;height:auto}
.v-title .ln{padding-inline:.06em;margin-inline:-.06em;padding-block:0;margin-block:0;white-space:nowrap}
.hero-sub{margin-left:clamp(0px,30vw,460px);font-family:"Shippori Mincho B1",serif;font-size:clamp(20px,2.1vw,32px);line-height:1.5;color:#fff}
.hero-act{margin:18px 0 0 clamp(0px,30vw,460px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.tel{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1.25}
.tel b{font-family:"Shippori Mincho B1",serif;font-size:clamp(28px,2.8vw,42px);letter-spacing:.02em;font-weight:700}
.tel small{font-size:13px;color:inherit;opacity:.88}
.btn-gold{height:58px;padding:0 30px;font-size:16px}
.hero-next{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;padding:0 var(--gut);text-align:center;font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:clamp(30px,5.2vw,84px);line-height:1.3;color:#fff;text-shadow:0 2px 40px rgba(6,13,24,.55);opacity:0;pointer-events:none}
html:not(.anim) .hero-next,html:not(.anim) .scroll-mark{display:none}
.scroll-mark{position:absolute;z-index:3;right:var(--gut);bottom:0;width:1px;height:80px;background:rgba(255,255,255,.3);overflow:hidden}
.scroll-mark i{display:block;width:1px;height:36px;background:#fff;animation:sm 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes sm{0%{transform:translateY(-40px)}100%{transform:translateY(90px)}}
@media(max-width:767.98px){
  .hero-bg img{object-position:80% 50%}
  .hero-shade{background:linear-gradient(90deg,rgba(6,13,24,.5),rgba(6,13,24,0) 70%),linear-gradient(0deg,rgba(6,13,24,.85),rgba(6,13,24,0) 52%)}
  .v-title{top:82px;font-size:clamp(44px,min(13vw,8.2svh),62px)}
  .hero-copy{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .hero-act .btn-gold{display:none}
  .hero-sub,.hero-act{margin-left:0}
  .hero-act{width:100%;gap:10px}
  .scroll-mark{display:none}
  .tel b{font-size:28px}
}
@media(max-width:767.98px) and (max-height:700px){.v-title{font-size:40px}}

/* REMAKとは */
.about{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 20px;padding:clamp(90px,18vh,220px) var(--gut) clamp(70px,14vh,170px)}
.ab-1{grid-column:1/6;grid-row:1/3;aspect-ratio:3/4}
.ab-text .h-lg{font-size:clamp(30px,4.1vw,66px)}
@media(max-width:899.98px){.ab-text .h-lg{font-size:min(8.3vw,50px)}}
.ab-text{grid-column:6/13;grid-row:1;padding:0 0 40px clamp(10px,3vw,50px);align-self:center}
.ab-text>p:last-child{margin-top:26px;max-width:32em;color:var(--fg2)}
.ab-2{grid-column:9/13;grid-row:2;aspect-ratio:1/1;margin-top:-20px}
@media(max-width:899.98px){
  .about{display:flex;flex-direction:column;gap:0}
  .ab-text{order:-1;padding:0 0 30px}
  .ab-1{width:78%;aspect-ratio:3/4}
  .ab-2{width:56%;align-self:flex-end;margin-top:-70px;z-index:2;box-shadow:0 0 0 8px var(--night)}
}

/* サービス横スクロール */
.hscroll{background:var(--navy);overflow:hidden}
.hs-track{display:flex;width:max-content;height:100svh;will-change:transform}
.hs-intro{width:min(92vw,1100px);flex:none;padding:0 var(--gut);display:flex;flex-direction:column;justify-content:center}
.hs-intro p{margin-top:22px;color:var(--fg2)}
.hs-panel{position:relative;flex:none;height:100%;width:clamp(620px,72vw,1240px);display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,48px);padding:clamp(90px,13vh,120px) clamp(24px,3vw,50px) clamp(30px,6vh,60px) 0;align-items:end}
.hsp-pic{height:100%;min-height:0}
.hsp-n{font-family:"Shippori Mincho B1",serif;color:var(--gold-l);font-size:18px;display:block;margin-bottom:14px}
.hs-panel h3{white-space:nowrap;font-size:clamp(32px,3.8vw,60px);line-height:1.2;margin-bottom:18px;font-weight:700;margin-left:clamp(-120px,-7vw,-50px);position:relative;z-index:2;text-shadow:0 2px 24px rgba(6,13,24,.6)}
.hs-panel p:not(.none){color:var(--fg2)}
.hsp-2 .hsp-pic img,.hsp-1 .hsp-pic img{object-position:50% 40%}
@media(hover:none),(max-width:899.98px){
  .hs-track{width:auto;height:auto;flex-direction:column;padding:70px 0 40px}
  .hs-intro{width:auto;padding-bottom:30px}
  .hs-panel{width:auto;height:auto;display:block;padding:0 0 48px}
  .hsp-pic{height:auto;aspect-ratio:4/3;width:calc(100% - var(--gut));}
  .hs-panel:nth-child(odd) .hsp-pic{margin-left:var(--gut)}
  .hsp-text{padding:0 var(--gut);margin-top:-30px;position:relative;z-index:2}
  .hs-panel h3{margin-left:0;font-size:36px;margin-bottom:12px}
  .hsp-n{margin-bottom:0;text-shadow:0 1px 10px rgba(6,13,24,.9)}
}

/* 強み */
.values{padding:clamp(100px,20vh,240px) var(--gut);display:grid;gap:clamp(90px,20vh,240px)}
.val p{max-width:30em;margin-top:26px;color:var(--fg2)}
.val-2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,70px);align-items:end}
.val-pic{aspect-ratio:7/6}
.val-t .h-lg{font-size:clamp(30px,3.9vw,64px)}
@media(max-width:767.98px){.val-t .h-lg{font-size:min(8.3vw,44px)}}
.val-3{justify-self:end;max-width:900px}
@media(max-width:767.98px){.val-2{grid-template-columns:1fr}.val-3{justify-self:start}}

/* 事例 */
.works{background:var(--night);padding:0 var(--gut) clamp(90px,16vh,190px)}
.wk-head{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:end;margin-bottom:clamp(40px,8vh,80px)}
.wk-head p{color:var(--fg2)}
.wk-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,6vh,70px) 20px}
.wk-pic{aspect-ratio:2/1}
.wk h3{font-size:clamp(23px,2.2vw,34px);margin-top:14px;line-height:1.3;font-weight:700}
.wk-meta{font-size:15px;color:var(--fg2)}
.wk-cost{display:flex;align-items:baseline;gap:12px;font-size:14px;color:var(--fg2);margin-top:2px}
.wk-cost b{font-family:"Shippori Mincho B1",serif;color:var(--gold-l);font-size:clamp(30px,3vw,46px);font-weight:700;line-height:1.2}
.wk-1{grid-column:1/6}.wk-2{grid-column:7/12;margin-top:clamp(0px,10vh,120px)}.wk-3{grid-column:2/6}.wk-4{grid-column:6/11;margin-top:clamp(0px,7vh,80px)}.wk-5{grid-column:1/5}
.wk-real{grid-column:6/13;aspect-ratio:auto;overflow:visible}.wk-real .pic{aspect-ratio:16/9}
.wk-real figcaption{font-size:13px;color:var(--fg2);margin-top:8px}
.wk .pic img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}.wk:hover .pic img{transform:scale(1.05)}
.wk-5 .wk-pic{aspect-ratio:341/200}
@media(max-width:767.98px){
  .wk-head{grid-template-columns:1fr}
  .wk-grid{display:flex;flex-direction:column}
  .wk{margin-top:0!important;max-width:440px;width:100%}.wk-2,.wk-4{align-self:flex-end}
  .wk-real{width:100%}
}

/* ここから朝の色 */
.flow,.cities,.faq{background:var(--dawn2);color:var(--ink);--line:rgba(16,31,54,.22)}
.flow{padding:clamp(90px,16vh,190px) var(--gut);background:linear-gradient(180deg,var(--night) 0,var(--navy) 80px,var(--dawn) 62%,var(--dawn2) 100%)}
.flow h2{color:#fff}
.flow-rail{position:relative;height:2px;background:rgba(255,255,255,.3);margin:clamp(40px,8vh,80px) 0 28px}
.flow-prog{position:absolute;inset:0;background:var(--gold);transform-origin:left}
.flow-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,36px)}
.flow-list li{padding:clamp(18px,1.8vw,26px);background:rgba(247,242,232,.96);color:var(--ink)}
.flow-list small{display:block;font-size:13px;color:#7b5f24;font-weight:700}
.flow-list h3{font-size:clamp(22px,2vw,30px);line-height:1.35;margin:8px 0 12px;font-weight:700}
.flow-list p{font-size:16px;line-height:1.8}
@media(max-width:899.98px){.flow-rail{display:none}.flow-list{grid-template-columns:1fr;margin-top:36px}}

.cities{padding:clamp(70px,12vh,150px) var(--gut) clamp(70px,12vh,150px)}
.city{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:end;padding:clamp(14px,2.4vh,26px) 0;border-top:1px solid var(--line)}
.city:last-child{border-bottom:1px solid var(--line)}
.c-big{font-size:clamp(84px,17vw,270px);line-height:1;font-weight:800;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .5s}
.city:hover .c-big{color:var(--ink)}
.c-t h3{font-size:22px;font-weight:700;margin-bottom:4px}
.c-t p{font-size:15.5px}
.co-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,100px);margin-top:clamp(60px,12vh,130px)}
.co-msg p{margin-top:20px}
.sign{font-family:"Shippori Mincho B1",serif;font-size:20px;font-weight:700}
.co>div{display:grid;grid-template-columns:clamp(100px,10vw,140px) 1fr;padding:15px 0;border-top:1px solid var(--line)}
.co dt{font-weight:700}
@media(max-width:767.98px){.city{grid-template-columns:1fr;gap:6px}.co-wrap{grid-template-columns:1fr}.c-big{-webkit-text-stroke-width:1.2px}}

.faq{padding:0 var(--gut) clamp(90px,16vh,180px)}
.faq-list{margin-top:clamp(30px,6vh,60px);max-width:980px}
.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{padding:20px 0;font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.faq-a{padding:0 38px 22px 0}

.contact{position:relative;overflow:hidden;background:var(--night)}
.ct-bg{position:absolute;inset:0}
.ct-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,13,24,.84),rgba(6,13,24,.5))}
.contact .img-tag{z-index:3;right:auto;left:8px}
.ct-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(30px,5vw,90px);padding:clamp(80px,14vh,170px) var(--gut);color:#fff}
.ct-left p{margin:22px 0}
.ct-left .h-lg{font-size:clamp(30px,3.5vw,58px)}
@media(max-width:899.98px){.ct-left .h-lg{font-size:min(8.3vw,50px)}}
.ct-right{background:var(--dawn2);color:var(--ink);padding:clamp(20px,2.6vw,40px)}
.btn-send{background:var(--navy);color:#fff}.btn-send:hover{background:#7b5f24}
@media(max-width:899.98px){.ct-inner{grid-template-columns:1fr}}

.ft{background:var(--night);padding:46px var(--gut);display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;color:var(--fg)}
.ft .logo-t{font-size:26px}
.ft-c{margin-left:auto;font-size:13px;opacity:.75}