@charset "UTF-8";
/* ============================================================
   トップページ固有
   base.css を読み込んだ上に重ねる。共通のものはここに書かない
   ============================================================ */

/* トップは各節の間合いと見出しを一段大きく取る */
.sec{padding:clamp(92px,12vw,176px) 0}
h2.head{font-size:clamp(27px,3.5vw,48px)}
#nowLabel{transition:opacity .4s}
/* 全画面ナビもトップだけ一段大きい */
.nav-links a{font-size:clamp(21px,3.2vw,38px);padding:clamp(9px,1.2vw,16px) 0}

/* ヒーロー ---------------------------------------------- */
.hero{color:#fff;position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease;filter:brightness(.82) contrast(1.04) saturate(.85);
  /* 左端を軸に拡大し、右側を画面外に逃がす。
     生成動画の右下に入っている記号（右端から約10%）を画面から外すため。
     倍率は 1/0.877 = 1.14 が下限。これを下回ると記号が出る */
  transform-origin:0 50%}
.hero-video.on{opacity:1;animation:ken 16s linear both}
@keyframes ken{from{transform:scale(1.16)}to{transform:scale(1.26)}}
.hero::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(190deg,rgba(14,18,15,.5) 0%,rgba(14,18,15,.12) 40%,rgba(14,18,15,.78) 100%)}

/* 本文と同じ左右の通りに乗せるための枠 */
.hero-frame{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero-frame .wrap{height:100%}
.hero-frame a,.hero-frame button{pointer-events:auto}

/* 縦書きのキャッチ。上から書き下ろす */
.tate{
  position:absolute;z-index:4;top:clamp(96px,13vh,150px);right:0;
  writing-mode:vertical-rl;
  font-family:"Shippori Mincho B1","Yu Mincho",serif;font-weight:400;
  font-size:clamp(29px,4.4vw,58px);letter-spacing:.22em;line-height:1.75;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.tate span{display:block;clip-path:inset(0 0 100% 0);animation:writeDown 1.1s var(--ease) both}
.tate span:nth-child(1){animation-delay:1.05s}
.tate span:nth-child(2){animation-delay:1.28s}

.hero-foot{position:absolute;z-index:4;left:0;right:0;bottom:clamp(28px,5vh,52px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
/* 下層ページの riseIn とは上がり幅が違うので名前を分ける */
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.lockup{animation:heroRise 1.4s var(--ease) 1.85s both}
.lockup .en{font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-weight:400;font-size:clamp(15px,1.7vw,21px);letter-spacing:.36em}
.lockup .jp{font-family:"Shippori Mincho B1",serif;font-size:11.5px;letter-spacing:.34em;color:rgba(255,255,255,.85);margin-top:8px}
.hero-meta{text-align:right;animation:heroRise 1.4s var(--ease) 2.05s both}
.hero-meta .cue{font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:9.5px;letter-spacing:.3em;color:rgba(255,255,255,.72);display:block;margin-bottom:14px}
.hero-meta .bar{display:block;width:1px;height:54px;margin-left:auto;transform-origin:top;
  background:linear-gradient(180deg,#fff,transparent);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:.95;transform:scaleY(1)}}

/* 事業内容：巨大な3行＋浮かぶ写真 ------------------------- */
.idx{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,72px)}
.idx-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--line);padding:clamp(24px,3.4vw,44px) 4px;
  text-decoration:none;position:relative;transition:padding-left .5s var(--ease),color .4s;
}
.idx-row::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--green);transition:width .7s var(--ease)}
.idx-row:hover{padding-left:16px}
.idx-row:hover::before{width:100%}
.idx-jp{font-family:"Shippori Mincho B1",serif;font-size:clamp(28px,5vw,68px);letter-spacing:.1em;line-height:1.2}
.idx-side{display:flex;align-items:baseline;gap:clamp(14px,2.4vw,34px);flex:none}
.idx-en{font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:10px;letter-spacing:.28em;color:var(--green)}
/* 右揃えだと折り返しの頭が揃わず読みにくいので、幅を固定して左揃えにする */
.idx-note{font-size:12.5px;color:var(--sub);width:21em;line-height:1.9;text-align:left}
.idx-thumb{display:none}

/* 施工事例：横スクロール --------------------------------- */
.works{background:var(--soft)}
.wf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.wf-ctrl{display:flex;align-items:center;gap:18px;flex:none}
.wf-count{font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:11px;letter-spacing:.2em;color:var(--sub)}
.wf-count b{color:var(--green);font-weight:400}
.wf-btn{width:42px;height:42px;border:1px solid var(--line);background:none;color:var(--ink);
  cursor:pointer;font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:14px;transition:.35s}
.wf-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}
.wf-rail{margin-top:clamp(34px,5vw,60px);position:relative}
.wf-prog{height:1px;background:var(--line);position:relative;margin-bottom:clamp(26px,4vw,44px)}
.wf-prog i{position:absolute;left:0;top:0;height:1px;background:var(--green);width:18%;transition:width .2s linear}
.wf{display:flex;gap:clamp(16px,2vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1)}
.wf::-webkit-scrollbar{display:none}
.wf.drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.wf-item{flex:0 0 auto;width:clamp(238px,26vw,352px);scroll-snap-align:center}
.wf-media{position:relative;overflow:hidden;height:clamp(330px,44vw,500px);background:#EAE8E2}
.wf-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wf-item:hover .wf-media img{transform:scale(1.05)}
.wf-cat{display:block;margin-top:16px;font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:9px;letter-spacing:.26em;color:var(--green)}
.wf-name{display:block;margin-top:6px;font-family:"Shippori Mincho B1",serif;font-size:15px;letter-spacing:.08em}

/* 技術 --------------------------------------------------- */
.tech-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);
  align-items:center;margin-top:clamp(40px,6vw,68px)}
.tech-main{position:relative;overflow:hidden;height:clamp(340px,42vw,540px)}
.tech-main img{width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.spec b{font-size:clamp(30px,3.6vw,46px);line-height:1.15}
.tech-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-top:clamp(14px,2vw,24px)}
.tech-sub .rvimg{height:clamp(150px,18vw,240px)}
.tech-sub img{width:100%;height:100%;object-fit:cover;filter:brightness(.88) saturate(.85)}

/* 全面写真＋一行。トップは一段大きく取る ----------------- */
.plate{height:clamp(460px,80vh,760px)}
.plate>img{filter:brightness(.7) contrast(.98) saturate(.86)}
.plate-sub{max-width:34em}

/* 選ばれる理由。トップだけ欧文の列が少し狭く、読み幅も一段狭い。
   760px以下は base.css が1列にする。ここを裸で書くと、base.css より
   後に読まれるぶん後勝ちして、その1列指定を潰してしまう。
   だから広い画面だけに限定して当てること */
@media(min-width:761px){
  .why-row{grid-template-columns:190px 1fr}
}
.why-row p{max-width:40em}

/* 会社概要 ----------------------------------------------- */
.comp{background:var(--soft)}
/* 会社概要は要点だけの帯に。列数は幅に応じて自動で折り返す */
.comp-brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:clamp(22px,3vw,44px);margin-top:clamp(32px,4.6vw,54px);
  border-top:1px solid var(--line);padding-top:clamp(26px,3vw,38px)}
.comp-brief>div{display:flex;flex-direction:column;gap:10px}
.comp-brief span{font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;
  font-size:10.5px;letter-spacing:.2em;color:var(--green)}
.comp-brief b{font-weight:300;font-size:13.5px;color:var(--sub);line-height:1.9}
.comp-brief + .maplink{margin-top:clamp(30px,4vw,46px)}

/* CONTACT：夜の終わりに灯りをつける ---------------------- */
.contact{background:var(--soft)}
.contact .eyebrow{color:var(--green)}
.contact .eyebrow::before{background:var(--green)}
.contact .lead{color:var(--sub)}
.contact h2.head{font-size:clamp(30px,4.6vw,62px);line-height:1.5}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  margin-top:clamp(38px,5vw,60px);border:1px solid var(--line)}
.cm{background:#fff;padding:clamp(26px,3.2vw,40px);text-decoration:none;display:block;transition:background .4s}
.cm:hover{background:#FBFAF7}
.cm-lbl{display:block;font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-size:10px;letter-spacing:.28em;color:var(--green);margin-bottom:14px}
.cm-val{display:block;font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;font-weight:300;font-size:clamp(24px,3.2vw,38px);letter-spacing:.02em;line-height:1.2}
.cm-note{display:block;font-size:12px;color:var(--sub);margin-top:10px}

/* レスポンシブ ------------------------------------------- */
@media(max-width:980px){
  .tech-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  #nowLabel{display:none}
  .tate{font-size:clamp(26px,7.4vw,38px);letter-spacing:.2em;top:clamp(88px,12vh,120px);
    max-height:calc(100svh - 290px)}
  .hero-foot{align-items:flex-end}
  .hero-meta .cue{display:none}
  .idx-row{flex-direction:column;align-items:flex-start;gap:14px;padding:26px 0}
  .idx-side{flex-direction:column;align-items:flex-start;gap:8px}
  .idx-note{text-align:left;width:auto;max-width:100%}
  .idx-thumb{display:block;width:100%;height:210px;object-fit:cover;margin-top:6px}
  .cm-grid{grid-template-columns:1fr}
  /* トップのヘッダー社名はヒーローで大きく出すので、下層と同じ縮小はかけない */
  .brand b{font-size:12.5px;letter-spacing:.2em}
}
@media(max-width:520px){
  .brand b{display:none}
}

@media(prefers-reduced-motion:reduce){
  /* フェードと寄りは止めるが、重なりの前後関係は保つ。
     .hero-video 全部を opacity:1 にすると最後の1本が前面に居座る。
     その1本は preload="none" で中身を持たないため、黒い画面になってしまう */
  .hero-video{transition:none}
  .hero-video.on{animation:none;transform:scale(1.16)}
  .tate span{clip-path:none}
  .wf{scroll-behavior:auto}
}