/* =========================================================
   相生設備事務所株式会社 — v2 デザインシステム
   方向: Japanese Engineering × Swiss Editorial × BIM Visualization
   3色制約: Graphite / Warm White / Steel Blue（装飾色の追加禁止）
   詳細: .website-workflow/DESIGN_DIRECTION.md
   ========================================================= */
:root{
  --graphite:#242424;
  --paper:#ffffff;
  --steel:#7fafc1;
  --ink-60:rgba(36,36,36,.6);
  --ink-30:rgba(36,36,36,.28);
  --paper-60:rgba(255,255,255,.62);
  --paper-25:rgba(255,255,255,.22);
  --hair:1px solid var(--ink-30);
  --hair-dark:1px solid var(--paper-25);
  --pad:clamp(24px,4.4vw,64px);
  --sans:'Noto Sans JP',"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --min:'Zen Old Mincho',serif;
  /* ブランド水色（logo.png実測: 濃紺#003880/中間#0070b8のグラデ）。下部セクションのアクセントに使用 */
  --aioi:#0074c0;
  --aioi-light:#7fc4ee;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper); color:var(--graphite);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
.en{font-family:var(--sans)}
.mono{font-family:var(--sans)}
.min{font-family:var(--min)}

/* マイクロラベル（無機質・等幅） */
.lbl{
  font-family:var(--sans);
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-60);
}
.dark .lbl{color:var(--paper-60)}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--paper); border-bottom:var(--hair);
  display:flex; align-items:stretch; justify-content:space-between;
  padding:0 var(--pad);
}
.site-header .brand{
  display:flex; align-items:center; gap:16px; padding:20px 0;
}
.brand__mark{
  font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:.02em;
}
.brand__mark i{font-style:normal; color:var(--steel)}
.brand__jp{font-size:12px; font-weight:500; letter-spacing:.3em; border-left:var(--hair); padding-left:16px}
.gnav{display:flex; align-items:stretch}
.gnav a{
  display:flex; align-items:center; padding:0 22px;
  font-family:var(--sans); font-size:11px; letter-spacing:.16em;
  border-left:var(--hair);
  transition:background .25s,color .25s;
}
.gnav a:hover,.gnav a.is-active{background:var(--graphite); color:var(--paper)}
/* 採用情報ドロップダウン（hover/キーボードフォーカスで展開） */
.gnav__item{position:relative; display:flex; align-items:stretch}
.gnav__item > a{height:100%}
.subnav{
  position:absolute; top:100%; left:0; min-width:190px; z-index:70;
  background:#fff; border:var(--hair); border-top:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
/* 展開はhoverのみ（focus-withinは戻る操作でフォーカス残留→開きっぱなしになるため不使用） */
.gnav__item:hover .subnav{opacity:1; visibility:visible; transform:none}
.subnav a{
  display:block; padding:14px 20px; border-left:none; border-top:var(--hair);
  font-size:11.5px; letter-spacing:.1em;
}
.subnav a:first-child{border-top:none}
.subnav a:hover{background:var(--aioi); color:#fff}
.burger{display:none}

/* 下部ページ誘導（message.html） */
.pagelink{padding-bottom:clamp(50px,7vh,80px)}
.pagelink .contact__inner{padding-top:0}
.pagelink h3{font-weight:600; font-size:clamp(20px,2.2vw,28px); letter-spacing:.12em; line-height:1.7}
.pagelink .hero__links{margin:0; padding:0; opacity:1; animation:none}
.pagelink .hero__links a{border-bottom:1px solid var(--graphite)}

/* =========================================================
   FV — 左巨大タイポ × 右BIMモデル
   ========================================================= */
.hero{
  background:var(--graphite); color:var(--paper);
  display:grid; grid-template-columns:minmax(0,53fr) minmax(0,47fr);
  min-height:min(92vh,860px); position:relative; overflow:hidden;
}
.hero__copy{
  padding:clamp(48px,7vh,84px) 0 40px var(--pad);
  display:flex; flex-direction:column; position:relative; z-index:2;
}
.hero__meta{display:flex; gap:28px; margin-bottom:auto}
.hero__meta span{font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; color:var(--paper-60)}
.hero__title{
  font-family:var(--min); font-weight:700;
  font-size:clamp(36px,4.8vw,72px); line-height:1.42; letter-spacing:.14em;
  margin:18px 0 0;
}
.hero__title .line{display:block; overflow:hidden}
.hero__title .line>span{display:block; transform:translateY(112%); animation:lineUp 1s cubic-bezier(.16,.8,.24,1) forwards}
.hero__title .line:nth-child(1)>span{animation-delay:.15s}
.hero__title .line:nth-child(2)>span{animation-delay:.3s}
.hero__title .line:nth-child(3)>span{animation-delay:.45s}
.hero__title em{font-style:normal; color:var(--steel)}
.hero__desc{
  margin-top:20px; font-size:13px; line-height:2.1; color:var(--paper-60); max-width:34em;
  opacity:0; animation:rise .9s .95s cubic-bezier(.2,.6,.2,1) forwards;
}
.hero__links{
  margin-top:auto; padding-top:40px; display:flex; gap:44px;
  opacity:0; animation:rise .9s 1.1s cubic-bezier(.2,.6,.2,1) forwards;
}
.hero__links a{
  font-family:var(--sans); font-size:12px; letter-spacing:.2em;
  padding-bottom:8px; border-bottom:1px solid var(--paper);
  transition:color .25s,border-color .25s;
}
.hero__links a:hover{color:var(--steel); border-color:var(--steel)}
/* 右: BIMモデル */
.hero__model{
  position:relative; border-left:var(--hair-dark);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero__model img{
  width:112%; max-width:none; will-change:transform;
  transition:transform .25s ease-out;
}
.hero__model .cap{
  position:absolute; left:26px; bottom:22px;
  font-family:var(--sans); font-size:10px; letter-spacing:.26em;
  color:var(--paper-60); text-transform:uppercase;
}
/* レイヤーラベル（分解サイクル） */
.layers{
  position:absolute; right:26px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:16px; text-align:right; z-index:3;
}
.layers span{
  font-family:var(--sans); font-size:10px; letter-spacing:.3em;
  color:var(--paper-25); transition:color .8s;
}
.layers span:nth-child(1){animation-delay:0s}
.layers span:nth-child(2){animation-delay:2s}
.layers span:nth-child(3){animation-delay:4s}
.layers span:nth-child(4){animation-delay:6s}
.layers span:nth-child(5){animation-delay:8s}
@keyframes layerOn{
  0%,18%{color:var(--steel)}
  22%,100%{color:var(--paper-25)}
}
@keyframes lineUp{to{transform:none}}
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}

/* =========================================================
   マーキー（無機質データ帯）
   ========================================================= */
.marquee{
  border-bottom:var(--hair); overflow:hidden; white-space:nowrap;
  padding:16px 0; background:var(--paper);
}
.marquee__track{display:inline-block; animation:marq 36s linear infinite}
.marquee span{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-60); padding:0 34px;
}
.marquee i{font-style:normal; color:var(--steel)}
@keyframes marq{to{transform:translateX(-50%)}}

/* =========================================================
   セクション共通（編集レイアウト）
   ========================================================= */
.sec{padding:0 var(--pad)}
.sec__head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:30px 0 18px;
}

/* =========================================================
   SYSTEMS — カード廃止・巨大タイポ行
   ========================================================= */
.sysrow{
  display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,38%);
  gap:24px; align-items:baseline;
  padding:clamp(30px,4.5vh,52px) 0; border-bottom:var(--hair);
  position:relative; transition:background .3s,color .3s; cursor:default;
}
.sysrow .no{font-family:var(--sans); font-size:13px; letter-spacing:.14em; color:var(--ink-60); transition:color .3s}
.sysrow .name{min-width:0}
.sysrow .name b{
  display:block; font-family:var(--sans); font-weight:600;
  font-size:clamp(30px,4vw,58px); line-height:1.05; letter-spacing:.01em;
}
.sysrow .name > span{
  display:inline-block; margin-top:12px;
  font-family:var(--sans); font-weight:500; font-size:13.5px; letter-spacing:.3em;
}
.sysrow .desc{font-size:13px; line-height:2.05; color:var(--ink-60); transition:color .3s}
.sysrow:hover{background:var(--graphite); color:var(--paper)}
.sysrow:hover .no{color:var(--steel)}
.sysrow:hover .desc{color:var(--paper-60)}
/* hover時の系統線 */
.sysrow svg{
  position:absolute; right:calc(38% + 40px); top:50%; transform:translateY(-50%);
  width:180px; height:60px; opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.sysrow:hover svg{opacity:1}
.sysrow svg path,.sysrow svg circle{fill:none; stroke:var(--steel); stroke-width:1.3}

/* =========================================================
   FACTS — 無機質データグリッド（黒帯）
   ========================================================= */
.facts{background:var(--graphite); color:var(--paper)}
.facts__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.fact{
  border-right:var(--hair-dark); padding:clamp(30px,4.5vh,50px) 26px clamp(34px,5vh,56px) 0;
  margin-right:26px;
}
.fact:last-child{border-right:none; margin-right:0}
.fact .k{font-family:var(--sans); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-60)}
.fact .v{
  margin-top:22px; font-family:var(--sans); font-weight:600;
  font-size:clamp(22px,2.2vw,32px); line-height:1.15; letter-spacing:0;
}
.fact .v i{font-style:normal; color:var(--steel)}
.fact .s{margin-top:12px; font-size:11.5px; line-height:1.9; color:var(--paper-60)}

/* =========================================================
   POSITION — 連携図（モノクロ罫線）
   ========================================================= */
.pos{padding-bottom:clamp(50px,7vh,90px)}
.pos__cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; padding-top:clamp(34px,5vh,60px)}
.pos__text h3{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(24px,2.4vw,34px); letter-spacing:.1em; line-height:1.7;
}
.pos__text p{margin-top:22px; font-size:13px; line-height:2.15; color:var(--ink-60); max-width:36em}
.pos__list{margin-top:34px}
.pos__list div{
  display:flex; gap:22px; align-items:baseline;
  border-top:var(--hair); padding:16px 4px;
}
.pos__list div:last-child{border-bottom:var(--hair)}
.pos__list b{font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.2em; color:var(--ink-60); width:56px; flex:none}
.pos__list span{font-size:13.5px; font-weight:500; letter-spacing:.05em}
/* diagram */
.diagram{padding-top:8px}
.diagram__row{display:flex; align-items:center; justify-content:center}
.diagram__node{
  border:var(--hair); padding:15px 24px; white-space:nowrap;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; color:var(--ink-60);
}
.diagram__node--main{
  border:1.5px solid var(--graphite); color:var(--graphite);
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.1em;
  padding:22px 30px;
}
.diagram__node--main small{
  display:block; font-family:var(--sans); font-weight:400; font-size:9px;
  letter-spacing:.24em; color:var(--steel); margin-top:8px; text-transform:uppercase;
}
.diagram__wire-v{width:1px; height:40px; background:var(--ink-30); margin:0 auto; position:relative}
.diagram__wire-h{flex:1; max-width:96px; height:1px; background:var(--ink-30); position:relative}
.diagram__wire-v::after,.diagram__wire-h::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--steel);
}
.diagram__wire-v::after{left:-3px; bottom:-3.5px}
.diagram__wire-h::after{right:-3.5px; top:-3px}
.diagram__wire-h.rev::after{left:-3.5px; right:auto}

/* =========================================================
   PHOTO BAND — 詩的コピーはサイトでここ1箇所だけ
   ========================================================= */
.band{
  position:relative; min-height:520px; display:flex; align-items:flex-end;
  /* 背景画像は band--desk 等のバリアントで指定（基底は色のみ） */
  background:var(--graphite);
  color:var(--paper);
}
.band__inner{padding:0 var(--pad) clamp(44px,6vh,70px)}
.band__inner .lbl{color:var(--paper-60)}
.band h2{
  margin-top:20px; font-family:var(--min); font-weight:800;
  font-size:clamp(26px,3.3vw,46px); line-height:1.65; letter-spacing:.06em;
}
.band h2 i{font-style:normal; color:var(--steel)}
.band p{margin-top:16px; font-size:12.5px; line-height:2; color:var(--paper-60); max-width:44em}

/* =========================================================
   COMPANY — 編集テーブル
   ========================================================= */
.company{padding-bottom:clamp(50px,7vh,90px)}
.company__cols{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:70px; padding-top:clamp(34px,5vh,60px)}
.company h3{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(24px,2.8vw,40px); line-height:1.15; letter-spacing:.01em;
}
.company h3 i{font-style:normal; color:var(--steel)}
.company__note{margin-top:26px; font-size:11.5px; line-height:2; color:var(--ink-60); max-width:30em}
.ctable{width:100%; border-collapse:collapse}
.ctable tr{border-bottom:var(--hair)}
.ctable tr:first-child{border-top:var(--hair)}
.ctable th{
  text-align:left; width:12em; padding:16px 8px 16px 0; vertical-align:top;
  font-family:var(--sans); font-weight:400; font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-60);
}
.ctable td{padding:15px 0; font-size:13.5px; line-height:1.95}
.ctable td small{color:var(--ink-60); font-size:11px}

/* =========================================================
   RECRUIT BRIDGE — 巨大数字（黒帯・steelのみ）
   ========================================================= */
.recruit-b{background:var(--graphite); color:var(--paper)}
.recruit-b__inner{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:60px;
  align-items:end; padding:clamp(44px,6vh,74px) 0 clamp(48px,7vh,84px);
}
.big-stat b{
  display:block; font-family:var(--sans); font-weight:300;
  font-size:clamp(60px,7vw,104px); line-height:1; letter-spacing:.02em;
}
.big-stat b i{font-style:normal; color:var(--steel)}
.big-stat em{
  font-style:normal; display:block; margin-top:10px;
  font-size:12px; letter-spacing:.34em; color:var(--paper-60);
}
.big-stat > span{
  display:block; margin-top:18px; font-family:var(--sans); font-weight:500;
  font-size:15px; letter-spacing:.24em;
}
.recruit-b__side .row{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:var(--hair-dark); padding:15px 2px;
}
.recruit-b__side .row:last-of-type{border-bottom:var(--hair-dark)}
.recruit-b__side .row b{font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.06em}
.recruit-b__side .row span{font-size:11px; color:var(--paper-60); letter-spacing:.14em}
.recruit-b__side a{
  display:inline-block; margin-top:30px;
  font-family:var(--sans); font-size:12px; letter-spacing:.2em;
  border-bottom:1px solid var(--steel); color:var(--steel); padding-bottom:8px;
}
.recruit-b__side a:hover{color:var(--paper); border-color:var(--paper)}

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.contact{padding-bottom:clamp(50px,7vh,80px)}
.contact__inner{display:flex; justify-content:space-between; align-items:flex-end; gap:50px; flex-wrap:wrap; padding-top:clamp(34px,5vh,60px)}
.contact h3{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(26px,3vw,40px); letter-spacing:.08em; line-height:1.6;
}
.contact .tel{
  font-family:var(--sans); font-weight:600; font-size:clamp(30px,3.6vw,50px); letter-spacing:.02em;
}
.contact .tel-sub{margin-top:12px; font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; color:var(--ink-60); line-height:2.1}
.site-footer{
  border-top:var(--hair); padding:26px var(--pad) 30px;
  display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap;
}
.site-footer .brand__mark{font-size:14px}
.site-footer nav{display:flex; gap:24px}
.site-footer nav a{font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; color:var(--ink-60)}
.site-footer nav a:hover{color:var(--graphite)}
.site-footer .copy{font-size:9.5px; letter-spacing:.1em; color:var(--ink-60); line-height:1.9}

/* =========================================================
   RECRUIT ページ
   ========================================================= */
.r-hero{
  background:var(--graphite); color:var(--paper);
  padding:clamp(48px,7vh,84px) var(--pad) clamp(56px,8vh,90px); position:relative; overflow:hidden;
}
.r-hero .hero__meta{margin-bottom:34px}
.r-hero h1{
  font-family:var(--min); font-weight:700;
  font-size:clamp(30px,4.6vw,58px); line-height:1.5; letter-spacing:.12em;
}
.r-hero h1 .line{display:block; overflow:hidden}
.r-hero h1 .line>span{display:block; transform:translateY(112%); animation:lineUp 1s cubic-bezier(.16,.8,.24,1) forwards}
.r-hero h1 .line:nth-child(1)>span{animation-delay:.15s}
.r-hero h1 .line:nth-child(2)>span{animation-delay:.3s}
.r-hero h1 i{font-style:normal; color:var(--steel)}
.r-hero .desc{margin-top:18px; font-size:13px; line-height:2.1; color:var(--paper-60); max-width:38em; opacity:0; animation:rise .9s .85s forwards}
.r-hero .hero__links{margin-top:44px; padding-top:0}
/* 1日の流れ */
.day{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; padding:clamp(34px,5vh,60px) 0 clamp(50px,7vh,90px)}
.dayline{position:relative; padding-left:30px}
.dayline::before{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--ink-30)}
.day-item{position:relative; padding-bottom:36px}
.day-item:last-child{padding-bottom:0}
.day-item::before{content:""; position:absolute; left:-27px; top:7px; width:7px; height:7px; border-radius:50%; background:var(--steel)}
.day-item time{font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.12em; color:var(--steel)}
.day-item h4{margin-top:7px; font-size:15px; font-weight:700; letter-spacing:.05em}
.day-item p{margin-top:7px; font-size:12px; line-height:1.95; color:var(--ink-60); max-width:34em}
.day .photo{position:sticky; top:100px}
.day .photo img{border:var(--hair)}
.day .photo figcaption{margin-top:12px; font-family:var(--sans); font-size:10px; letter-spacing:.2em; color:var(--ink-60); line-height:1.9}
/* 巨大数字グリッド */
.numbers{background:var(--graphite); color:var(--paper)}
.numbers__grid{display:grid; grid-template-columns:repeat(2,1fr)}
.nstat{
  padding:clamp(36px,5vh,58px) 30px clamp(38px,5.5vh,60px) 0;
  border-right:var(--hair-dark); border-bottom:var(--hair-dark); margin-right:30px;
}
.nstat:nth-child(2n){border-right:none; margin-right:0}
.nstat:nth-last-child(-n+2){border-bottom:none}
.nstat .k{font-family:var(--sans); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-60)}
.nstat b{
  display:block; margin-top:18px; font-family:var(--sans); font-weight:300;
  font-size:clamp(36px,4.8vw,72px); line-height:1.05; letter-spacing:.02em;
}
.nstat b i{font-style:normal; color:var(--steel)}
.nstat b i.unit{font-size:.4em; letter-spacing:.1em}
.nstat > span{display:block; margin-top:14px; font-size:12px; letter-spacing:.14em; color:var(--paper-60)}
/* 環境（罫線行） */
.envrow{
  display:grid; grid-template-columns:80px minmax(0,1fr) minmax(0,44%);
  gap:24px; align-items:baseline; padding:22px 0; border-bottom:var(--hair);
  transition:padding-left .3s;
}
.envrow:hover{padding-left:12px}
.envrow b{font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.2em; color:var(--steel)}
.envrow h4{font-size:15px; font-weight:700; letter-spacing:.05em}
.envrow p{font-size:12px; line-height:1.95; color:var(--ink-60)}
/* belief band */
.band--desk{
  background:
    linear-gradient(15deg, rgba(36,36,36,.85) 0%, rgba(36,36,36,.4) 60%, rgba(36,36,36,.2) 100%),
    url('../img/real-team-outdoor.jpg') center/cover no-repeat var(--graphite);
}
/* 募集要項 */
.yoko{padding-bottom:clamp(40px,5vh,60px)}
.yoko .ctable{margin-top:clamp(30px,4.5vh,50px)}
.yoko__note{margin-top:20px; font-size:11px; color:var(--ink-60); line-height:1.9}
.yoko__cta{margin-top:36px; display:flex; align-items:center; gap:34px}
.yoko__cta a{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.2em;
  background:var(--graphite); color:var(--paper); padding:18px 42px;
  transition:background .25s;
}
.yoko__cta a:hover{background:var(--steel); color:var(--graphite)}
.yoko__cta span{font-family:var(--sans); font-size:11px; letter-spacing:.12em; color:var(--ink-60)}

/* =========================================================
   スクロールリビール（JS付与 / JS無しでは全表示）
   ========================================================= */
.reveal{opacity:0; transform:translateY(36px); transition:opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal .diagram__wire-h{transform:scaleX(0); transform-origin:left center; transition:transform .8s .5s}
.reveal .diagram__wire-h.rev{transform-origin:right center}
.reveal .diagram__wire-v{transform:scaleY(0); transform-origin:top center; transition:transform .8s .35s}
.reveal.in .diagram__wire-h,.reveal.in .diagram__wire-v{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
  .hero__title .line>span,.r-hero h1 .line>span{transform:none}
  .hero__desc,.hero__links,.r-hero .desc{opacity:1}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr; min-height:0}
  .hero__model{border-left:none; border-top:var(--hair-dark); min-height:380px}
  .facts__grid{grid-template-columns:1fr 1fr}
  .fact{border-bottom:var(--hair-dark)}
  .fact:nth-child(2n){border-right:none; margin-right:0}
  .fact:nth-last-child(-n+2){border-bottom:none}
  .pos__cols,.company__cols,.day{grid-template-columns:1fr; gap:46px}
  .day .photo{position:static; order:-1}
  .recruit-b__inner{grid-template-columns:1fr; gap:44px; align-items:start}
  .sysrow{grid-template-columns:70px minmax(0,1fr)}
  .sysrow .desc{grid-column:2}
  .sysrow svg{display:none}
}
@media (max-width:760px){
  .brand__jp{display:none}
  .gnav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--paper); border-bottom:var(--hair);
  }
  .gnav a{padding:16px var(--pad); border-left:none; border-top:var(--hair)}
  /* SP: ドロップダウンは常時展開のインデント表示 */
  .gnav__item{flex-direction:column; align-items:stretch}
  .subnav{position:static; opacity:1; visibility:visible; transform:none; border:none; min-width:0}
  .subnav a{padding-left:calc(var(--pad) + 1.5em); font-size:11px; color:var(--ink-60)}
  .gnav__ig svg{margin:0 auto 0 0}
  .site-header.is-open .gnav{display:flex}
  .burger{display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:4px; align-self:center; cursor:pointer}
  .burger span{display:block; width:24px; height:2px; background:var(--graphite); transition:transform .25s,opacity .25s}
  .site-header.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.is-open .burger span:nth-child(2){opacity:0}
  .site-header.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero__meta{flex-wrap:wrap; gap:10px 20px}
  .layers{display:none}
  .numbers__grid{grid-template-columns:1fr}
  .nstat{border-right:none; margin-right:0; border-bottom:var(--hair-dark)}
  .nstat:nth-last-child(-n+2){border-bottom:var(--hair-dark)}
  .nstat:last-child{border-bottom:none}
  .envrow{grid-template-columns:56px minmax(0,1fr)}
  .envrow p{grid-column:2}
  .sec__head{flex-direction:column; gap:8px; align-items:flex-start}
  .band{min-height:420px}
}

/* SP: 連携ダイアグラムの縮小（v2移植漏れ対応） */
@media (max-width:760px){
  .diagram__node{padding:8px 7px; font-size:8.5px; letter-spacing:.02em}
  .diagram__node--main{padding:10px 10px; font-size:10.5px; letter-spacing:.04em}
  .diagram__node--main small{font-size:7.5px; letter-spacing:.1em}
  .diagram__wire-h{max-width:10px}
  .diagram{overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* =========================================================
   FV v3 — 一枚の3D空間（左右分割の廃止）
   ========================================================= */
.hero{display:block; position:relative; min-height:min(94vh,880px); overflow:hidden}
.hero__bg{position:absolute; inset:0; overflow:hidden; z-index:0}
/* 予備静止画は既定で不可視。表示は失敗シグナル(JS/catch/noscript)のみが行う */
.hero__bg img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.hero__bg canvas{position:absolute; inset:0}
/* 左側だけ沈めるグラデ（テキスト可読層。粒子はこの下を通る） */
.hero__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(93deg,
    rgba(36,36,36,.96) 0%, rgba(36,36,36,.82) 30%,
    rgba(36,36,36,.42) 55%, rgba(36,36,36,.05) 74%, rgba(36,36,36,0) 100%);
}
.hero__copy{
  position:relative; z-index:2; max-width:960px;
  padding:clamp(48px,7vh,84px) var(--pad) clamp(48px,7vh,72px);
  min-height:min(94vh,880px); display:flex; flex-direction:column;
}
.hero__title{font-size:clamp(36px,4.8vw,72px)}
.layers{z-index:2}
.hero__cap{
  position:absolute; z-index:2; left:auto; right:var(--pad); bottom:24px;
  font-family:var(--sans); font-size:10px; letter-spacing:.26em;
  color:var(--paper-25); text-transform:uppercase;
}
@media (max-width:1080px){
  .hero{min-height:0}
  .hero__copy{min-height:0; padding-bottom:120px}
  .hero__grade{background:linear-gradient(180deg, rgba(36,36,36,.9) 0%, rgba(36,36,36,.62) 55%, rgba(36,36,36,.3) 100%)}
}
@media (max-width:760px){
  .hero__cap{display:none}
}

/* DRAWINGステートの紙モード（JSが .is-paper を付与） */
.hero.is-paper .layers span{color:rgba(36,36,36,.3)}
.hero.is-paper .hero__cap{color:rgba(36,36,36,.45)}

/* =========================================================
   v5 — SP専用レイアウト（PC縦積みの廃止 / 2026-07-04）
   ========================================================= */
@media (max-width:760px){
  /* FV: 上コピー → 中3D → 下説明。オーバーレイをやめ粒子を主役ブロックに */
  .hero{display:flex; flex-direction:column; min-height:0}
  .hero__copy{display:contents}
  .hero__grade{display:none}
  .hero .hero__meta{order:1; padding:30px var(--pad) 0}
  .hero .hero__title{order:2; padding:20px var(--pad) 0; margin:0; font-size:clamp(29px,8.4vw,40px)}
  .hero .hero__bg{order:3; position:relative; inset:auto; height:46vh; min-height:300px; margin-top:10px}
  .hero .hero__desc{order:4; margin:8px 0 0; padding:0 var(--pad)}
  .hero .hero__links{order:5; margin:0; padding:30px var(--pad) 42px; gap:30px; flex-wrap:wrap}

  /* SERVICES: 1画面1系統（会社パンフ縦積みの禁止） */
  .sysrow{
    display:flex; flex-direction:column; justify-content:center;
    min-height:74vh; padding:0; border-bottom:var(--hair);
  }
  .sysrow .no{font-size:12px}
  .sysrow .name{margin-top:16px}
  .sysrow .name > span{display:block; margin-top:18px}
  .sysrow .desc{grid-column:auto; margin-top:26px; max-width:30em}
  .sysrow:hover{background:transparent; color:inherit}
  .sysrow:hover .no,.sysrow:hover .desc{color:var(--ink-60)}

  /* COMPANY: 表の縦積み感を消す（項目名を小さく上に、値を主役に） */
  .company__cols{gap:36px}
  .ctable,.ctable tbody,.ctable tr,.ctable th,.ctable td{display:block}
  .ctable tr{border-bottom:var(--hair); padding:16px 0}
  .ctable tr:first-child{border-top:var(--hair)}
  .ctable th{width:auto; padding:0 0 6px}
  .ctable td{padding:0}

  /* FACTS: 1列で1メッセージずつ */
  .facts__grid{grid-template-columns:1fr}
  .fact{border-right:none; margin-right:0; padding-right:0}
  .fact:nth-last-child(-n+2){border-bottom:var(--hair-dark)}
  .fact:last-child{border-bottom:none}
}


/* =========================================================
   v5.1 — 写真投入（duotone統一 / recruit分割FV / company写真）
   ========================================================= */
/* 写真の統一トーン: グレースケール + steel控えめティント（3色システム維持） */
.duo{position:relative; overflow:hidden; background:var(--graphite)}
.duo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.94)}
.duo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--steel); mix-blend-mode:color; opacity:.35;
}

/* recruit FV: 左コピー / 右写真の分割 */
.r-hero{display:grid; grid-template-columns:minmax(0,11fr) minmax(0,9fr); padding:0}
.r-hero__copy{
  padding:clamp(48px,7vh,84px) clamp(28px,4vw,60px) clamp(56px,8vh,90px) var(--pad);
  display:flex; flex-direction:column; justify-content:center;
}
.r-hero__ph{margin:0; min-height:460px; border-left:var(--hair-dark); opacity:0; animation:rise .9s .5s forwards}
@media (max-width:1080px){
  .r-hero{grid-template-columns:1fr}
  .r-hero__ph{min-height:0; height:42vh; border-left:none; border-top:var(--hair-dark)}
}

/* =========================================================
   v5.2 — 下層ページ（会社概要 / 代表挨拶）
   ========================================================= */
.page-hero{
  background:var(--graphite); color:var(--paper);
  padding:clamp(44px,6vh,72px) var(--pad) clamp(40px,5.5vh,64px);
}
.page-hero .lbl{color:var(--paper-60)}
.page-hero h1{
  margin-top:18px; font-family:var(--min); font-weight:700;
  font-size:clamp(28px,3.6vw,46px); letter-spacing:.14em; line-height:1.5;
}
.page-hero p{margin-top:14px; font-size:12.5px; line-height:2; color:var(--paper-60); max-width:40em}
.tx-link{border-bottom:1px solid var(--steel); color:var(--steel); padding-bottom:4px}
.tx-link:hover{color:var(--graphite); border-color:var(--graphite)}

/* あゆみ */
.history{padding-top:clamp(26px,4vh,44px)}
.history div{display:flex; gap:30px; align-items:baseline; border-top:var(--hair); padding:20px 4px}
.history div:last-child{border-bottom:var(--hair)}
.history b{font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.1em; color:var(--ink-60); width:110px; flex:none}
.history span{font-size:13.5px; line-height:1.9}
.history + .yoko__note{margin-top:16px; padding-bottom:clamp(20px,3vh,34px)}

/* アクセス */
.access{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:60px;
  padding:clamp(30px,4.5vh,52px) 0 clamp(50px,7vh,84px);
}
.access__ttl{font-weight:600; font-size:clamp(20px,2.2vw,28px); letter-spacing:.1em; line-height:1.7}
.access .pos__list{margin-top:28px}
.access__map iframe{width:100%; aspect-ratio:4/3; border:0; display:block}

/* 代表挨拶 */
.msg{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:70px;
  padding:clamp(38px,5.5vh,64px) 0 clamp(46px,6.5vh,76px);
}
.msg__body h2{font-weight:600; font-size:clamp(21px,2.4vw,30px); letter-spacing:.1em; line-height:1.8}
.msg__body p{margin-top:24px; font-size:13.5px; line-height:2.35; max-width:38em}
.msg__sign{margin-top:40px; display:flex; flex-direction:column; gap:10px}
.msg__sign b{font-weight:600; font-size:16px; letter-spacing:.14em}
.msg__side figure{aspect-ratio:4/5; margin:0}
.msg__profile{margin-top:26px; border-top:var(--hair); padding-top:18px}
.msg__profile p{margin-top:10px; font-size:12px; line-height:2.1; color:var(--ink-60)}
.duo figcaption{position:absolute; left:14px; bottom:12px; z-index:1; color:var(--paper-60); font-size:9.5px}

@media (max-width:1080px){
  .access,.msg{grid-template-columns:1fr; gap:44px}
  .msg__side figure{aspect-ratio:16/10}
}


/* =========================================================
   v5.4 — お問い合わせページ
   ========================================================= */
.cgrid{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:70px;
  padding:clamp(36px,5vh,60px) 0 clamp(50px,7vh,84px);
}
.cform{display:flex; flex-direction:column; gap:22px; margin-top:18px}
.cform label{display:block; font-size:12px; font-weight:500; letter-spacing:.12em; color:var(--ink-60)}
.cform .req{
  display:inline-block; margin-left:10px; padding:2px 8px;
  font-size:9.5px; letter-spacing:.18em; color:var(--steel); border:1px solid var(--steel);
}
.cform input,.cform textarea{
  display:block; width:100%; margin-top:10px; padding:13px 14px;
  font-family:var(--sans); font-size:14px; color:var(--graphite);
  background:transparent; border:var(--hair); border-radius:0; outline:none;
  transition:border-color .25s;
}
.cform input:focus,.cform textarea:focus{border-color:var(--steel)}
.cform textarea{resize:vertical}
.cform button{
  align-self:flex-start; margin-top:6px; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; letter-spacing:.2em;
  background:var(--graphite); color:var(--paper); border:none; padding:18px 52px;
  transition:background .25s;
}
.cform button:hover{background:var(--steel); color:var(--graphite)}
.cform__note{font-size:11px; line-height:1.9; color:var(--ink-60)}
.cform input.cform__hp{display:none}

/* ---- プライバシーポリシー ---- */
.policy{max-width:760px; margin:0 auto; padding-top:10px}
.policy h3{font-size:15px; font-weight:600; letter-spacing:.08em; margin:38px 0 12px}
.policy p{font-size:13.5px; line-height:2.1; color:var(--ink-80, #333)}
.policy ul{margin:10px 0 0 1.4em; font-size:13.5px; line-height:2.1; color:var(--ink-80, #333)}
.policy ul li{list-style:disc}
.policy__date{margin-top:46px; font-size:12px; color:var(--ink-60)}
@media (max-width:1080px){
  .cgrid{grid-template-columns:1fr; gap:46px}
}


/* =========================================================
   v6 — 総評対応（コピー削減 / 組版精度 / 青一点 / 工程タイポ / 70:30帯）
   ========================================================= */
/* HEROの青はこの1点だけ */
.hero__tag{
  margin-top:auto; padding-top:34px;
  font-size:11px; font-weight:500; letter-spacing:.32em;
  text-transform:uppercase; color:var(--steel);
}
.hero__meta{margin-bottom:0}
.hero__tag + .hero__title{margin-top:16px}

/* SYSTEMS: 巨大文字→情報組版 */
.sysrow{grid-template-columns:110px minmax(0,1fr) minmax(0,42%); cursor:default}
.sysrow .name b{
  display:block; font-family:var(--sans); font-weight:600;
  font-size:clamp(30px,3.8vw,54px); line-height:1.1; letter-spacing:.01em;
}
.sysrow .name > span{display:block; margin-top:10px; font-size:12px; letter-spacing:.28em; color:var(--ink-60)}
.sysrow:hover{background:transparent; color:inherit}
.sysrow:hover .no,.sysrow:hover .desc{color:var(--ink-60)}

/* PROCESS: 工程タイポ（図解廃止） */
.proc{padding-top:6px}
.proc div{
  display:flex; align-items:baseline; gap:26px;
  border-top:var(--hair); padding:24px 4px;
}
.proc div:last-child{border-bottom:var(--hair)}
.proc b{
  font-weight:300; font-size:clamp(28px,3.2vw,46px); letter-spacing:.02em;
  text-transform:uppercase; flex:none;
}
.proc span{font-size:11.5px; letter-spacing:.2em; color:var(--ink-60); margin-left:auto}

/* CAREERS: 黒全面・巨大数字の廃止 */
.careers{padding-bottom:clamp(44px,6vh,70px)}
.careers__inner{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:70px;
  padding-top:clamp(30px,4.5vh,52px);
}
.careers__inner h3{font-weight:600; font-size:clamp(26px,3vw,40px); letter-spacing:.06em; line-height:1.65}
.careers__rows div{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:var(--hair); padding:16px 4px;
}
.careers__rows div:last-child{border-bottom:var(--hair)}
.careers__rows b{font-weight:600; font-size:15px; letter-spacing:.06em}
.careers__rows span{font-size:11.5px; letter-spacing:.12em; color:var(--ink-60)}
.careers__link{margin-top:28px; font-size:12.5px}

@media (max-width:1080px){
  .careers__inner{grid-template-columns:1fr; gap:36px}
}
@media (max-width:760px){
  .hero .hero__tag{order:2; padding:26px var(--pad) 0; margin:0}
  .hero .hero__title{order:2}
  .proc b{font-size:clamp(26px,7.4vw,34px); font-weight:300}
  .sysrow .name b{font-size:clamp(38px,10.5vw,50px)}
  .sysrow .desc{max-width:30em}
}


/* =========================================================
   v6.2 — デザインv5系へ復帰（文言は現行維持）+ SP余白調整
   ========================================================= */
/* CAREERS: v5の黒帯に戻す（中身は現行の要約行） */
.careers{background:var(--graphite); color:var(--paper)}
.careers .sec__head .lbl{color:var(--paper-60)}
.careers__rows div{border-top:var(--hair-dark)}
.careers__rows div:last-child{border-bottom:var(--hair-dark)}
.careers__rows span{color:var(--paper-60)}
.careers{padding-top:0; margin-top:clamp(40px,6vh,70px)}
.careers .careers__inner{padding-bottom:clamp(40px,6vh,64px)}

/* SP余白の修正: SERVICESの1画面1項目(74vh)が短文化で空白過多 → 詰める */
@media (max-width:760px){
  .sysrow{min-height:0; padding:44px 0}
  .sysrow .name{margin-top:12px}
  .sysrow .desc{margin-top:18px}
  .sec__head{padding:26px 0 6px}
  .pos__cols{gap:36px}
  .careers{margin-top:36px}
  .careers__inner{gap:28px; padding-top:22px}
  .contact__inner{gap:30px; padding-top:18px}
  .company__cols{gap:30px}
  .band{min-height:0; padding:56px 0}
  .band__inner{padding-bottom:0}
}

/* =========================================================
   v7 — 参照サイト型の構成移植（opening / パララックス列 /
   カード / CTA帯 / 代表ティザー / 画像ストリップ / 固定CTA）
   ========================================================= */
/* ローディング画面: 白地・中央ロゴ・水色の玉が周回。退場はフェード（幕なし） */
.opening{
  --orb:clamp(84px,15vw,132px);
  position:fixed; inset:0; z-index:200; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .55s ease,visibility .55s;
}
.opening__box{position:relative; display:flex; align-items:center; justify-content:center}
.opening__mark{
  width:clamp(120px,26vw,190px);
  opacity:0; animation:openfade .8s .1s ease forwards;
}
.opening__orbit span{
  position:absolute; left:calc(50% - 5px); top:calc(50% - 5px);
  width:10px; height:10px; border-radius:50%; background:var(--aioi);
  animation:orbitdot 2.1s linear infinite;
}
.opening__orbit span:nth-child(2){width:8px; height:8px; opacity:.6; animation-delay:-.7s}
.opening__orbit span:nth-child(3){width:6px; height:6px; opacity:.3; animation-delay:-1.4s}
@keyframes orbitdot{
  from{transform:rotate(0deg) translateX(var(--orb))}
  to{transform:rotate(360deg) translateX(var(--orb))}
}
@keyframes openfade{to{opacity:1}}
.opening.is-done{opacity:0; visibility:hidden}
html.is-opening{overflow:hidden}

/* 右下固定バー: Instagram + 設計・施工図のご相談 */
.float-bar{position:fixed; right:22px; bottom:22px; z-index:90; display:flex; gap:10px; align-items:stretch}
.float-cta{
  background:var(--graphite); color:var(--paper);
  font-size:12px; letter-spacing:.14em; padding:15px 26px;
  box-shadow:0 8px 28px rgba(36,36,36,.28);
  transition:background .25s,color .25s,transform .25s;
}
.float-cta:hover{background:var(--steel); color:var(--graphite); transform:translateY(-2px)}
.float-ig{
  display:flex; align-items:center; justify-content:center; width:47px;
  /* Instagram公式風グラデーション */
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color:#fff;
  box-shadow:0 8px 28px rgba(36,36,36,.28);
  transition:filter .25s,transform .25s;
}
.float-ig svg{width:21px; height:21px}
.float-ig:hover{filter:brightness(1.12); transform:translateY(-2px)}

/* STATEMENT + パララックス画像列 */
.stmt{overflow:hidden; padding:clamp(60px,9vh,110px) var(--pad) clamp(30px,4vh,50px)}
.stmt__body{max-width:760px}
.stmt__body h2{
  margin-top:20px; font-family:var(--min); font-weight:800;
  font-size:clamp(26px,3.3vw,46px); line-height:1.65; letter-spacing:.06em;
}
.stmt__body h2 i{font-style:normal; color:var(--steel)}
.stmt__body p{margin-top:16px; font-size:12.5px; line-height:2; color:var(--ink-60); max-width:44em}
.stmt__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px);
  /* パララックス最大せり上がり(±70px)より常に大きく取り、本文への被りを構造的に防ぐ */
  margin-top:clamp(110px,14vh,150px); align-items:start;
}
.stmt__col{display:flex; flex-direction:column; gap:clamp(14px,2vw,28px); will-change:transform}
.stmt__col:nth-child(2){margin-top:60px}
.stmt__col:nth-child(3){margin-top:26px}
.stmt__col figure{margin:0; aspect-ratio:4/5}
.stmt__col img{width:100%; height:100%; object-fit:cover}

/* SYSTEMS カード */
.syscards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px);
  padding:clamp(28px,4vh,48px) 0 clamp(44px,6vh,72px);
}
.syscard figure{margin:0; aspect-ratio:4/3; overflow:hidden}
.syscard img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.syscard:hover img{transform:scale(1.05)}
.syscard__tx{padding-top:18px}
.syscard__tx .no{font-size:11px; letter-spacing:.2em; color:var(--ink-60)}
.syscard__tx b{
  display:block; margin-top:10px; font-weight:600;
  font-size:clamp(21px,1.9vw,27px); line-height:1.2; letter-spacing:.02em;
}
.syscard__tx .jp{display:block; margin-top:8px; font-size:11.5px; letter-spacing:.26em; color:var(--ink-60)}
.syscard__tx p{margin-top:14px; font-size:12.5px; line-height:2; color:var(--ink-60)}

/* CTA帯 */
.ctaband{background:var(--graphite); color:var(--paper); margin:clamp(20px,3vh,40px) 0 0}
.ctaband__inner{
  display:flex; align-items:center; justify-content:center; gap:clamp(24px,4vw,54px);
  flex-wrap:wrap; padding:clamp(44px,6vh,72px) var(--pad);
}
.ctaband__btn{
  background:var(--paper); color:var(--graphite);
  font-size:13px; font-weight:600; letter-spacing:.14em; padding:20px 54px;
  transition:background .25s,color .25s;
}
.ctaband__btn:hover{background:var(--steel)}
.ctaband__tel{font-size:14px; letter-spacing:.12em; color:var(--paper-60)}

/* 画像オートストリップ（CAREERS黒帯下部） */
.strip{overflow:hidden; padding-bottom:clamp(44px,6vh,64px)}
.strip__track{
  display:flex; gap:18px; width:max-content;
  animation:stripmove 46s linear infinite;
}
.strip img{
  width:clamp(200px,24vw,330px); aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.9);
}
@keyframes stripmove{to{transform:translateX(-50%)}}

@media (max-width:760px){
  .stmt__cols{gap:10px; margin-top:30px}
  .stmt__col{gap:10px}
  .stmt__col:nth-child(2){margin-top:34px}
  .syscards{grid-template-columns:1fr; gap:34px}
  .float-bar{right:14px; bottom:14px; gap:8px}
  .float-cta{padding:13px 20px; font-size:11px}
  .float-ig{width:42px}
  .ctaband__btn{padding:17px 38px}
  .strip img{width:56vw}
}
@media (prefers-reduced-motion:reduce){
  .strip__track{animation:none}
  .opening{display:none}
}


/* =========================================================
   v7.1 — 実ロゴ導入（Instagramプロフィールの公式ロゴ）
   ========================================================= */
.brand__logo{height:32px; width:auto; display:block}
.site-footer .brand__logo--ft{height:26px}
.opening__logo{width:clamp(180px,26vw,320px)}
.opening__logo img{width:100%; height:auto; display:block}
@media (max-width:760px){
  .brand__logo{height:28px}
}


/* =========================================================
   v7.2 — モーション全体強化
   ========================================================= */
/* 画像アンマスク: reveal中のfigureは下から開き、ズームが収束する */
.reveal figure,figure.reveal{clip-path:inset(14% 0 0 0); transition:clip-path 1.1s cubic-bezier(.2,.6,.2,1),opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.reveal figure img,figure.reveal img{transform:scale(1.1); transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.reveal.in figure,figure.reveal.in{clip-path:inset(0 0 0 0)}
.reveal.in figure img,figure.reveal.in img{transform:scale(1)}
/* カードhoverのズームはアンマスク完了後も生かす */
.syscard:hover img{transform:scale(1.05) !important}

/* opening: ロゴ下のラインスイープ */
.opening__logo{position:relative}
.opening__logo::after{
  content:""; position:absolute; left:0; right:0; bottom:-26px; height:1px;
  background:var(--steel); transform:scaleX(0); transform-origin:left center;
  animation:sweep 1s .45s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes sweep{to{transform:scaleX(1)}}

/* ページ遷移: 黒幕スライド */
.veil{
  position:fixed; inset:0; z-index:180; background:var(--graphite);
  transform:translateY(102%); pointer-events:none;
  transition:transform .46s cubic-bezier(.7,0,.2,1);
}
html.is-leaving .veil{transform:translateY(0)}
@keyframes pagein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
body{animation:pagein .6s cubic-bezier(.2,.6,.2,1)}

/* リンク・ボタンの微モーション */
.hero__links a,.tx-link,.recruit-b__side a{transition:color .25s,border-color .25s,transform .3s cubic-bezier(.2,.6,.2,1)}
.hero__links a:hover,.tx-link:hover{transform:translateX(4px)}
.ctaband__btn{transition:background .25s,color .25s,transform .3s,box-shadow .3s}
.ctaband__btn:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.3)}
.proc div{transition:padding-left .35s cubic-bezier(.2,.6,.2,1)}
.proc div:hover{padding-left:16px}
/* ナビhoverのletter-spacing演出は廃止（幅が変わりヘッダー全体がズレるため。2026-08-04社長指摘） */
.gnav a{transition:background .25s,color .25s}

@media (prefers-reduced-motion:reduce){
  .reveal figure,.reveal figure img{clip-path:none; transform:none; transition:none}
  body{animation:none}
  .veil{display:none}
}

/* =========================================================
   v6 — PROCESS以下の再設計（白基調・斜めカット・モノクロ）
   ========================================================= */
/* PROCESS: 左テキスト+機能3点 / 右組織図。右背後に斜めのグレー面 */
.pos{position:relative; overflow:hidden; padding-top:clamp(40px,6vh,70px)}
.pos__slant{
  position:absolute; top:0; bottom:0; right:-16%; width:54%;
  background:#f5f5f4; transform:skewX(-14deg); pointer-events:none;
}
.pos__cols{position:relative; z-index:1}
.feats{margin-top:40px; display:flex; align-items:stretch}
.feat{display:flex; flex-direction:column; gap:8px; padding:0 26px; border-left:var(--hair)}
.feat:first-child{padding-left:0; border-left:none}
.feat svg{width:26px; height:26px; color:var(--aioi)}
.feat b{font-size:13.5px; font-weight:600; letter-spacing:.06em}
.feat span{font-size:11px; color:var(--ink-60); letter-spacing:.04em}
/* 組織図: 中心ノード黒塗り・白箱・細線（モノクロ化） */
.pos .diagram__node{background:#fff; border:1px solid #d9d9d9; color:var(--graphite)}
.pos .diagram__node--main{background:var(--aioi); border-color:var(--aioi); color:#fff}
.pos .diagram__node--main small{color:rgba(255,255,255,.8); letter-spacing:.14em; text-transform:none}
.pos .diagram__wire-v::after,.pos .diagram__wire-h::after{display:none}

/* --- 組織図アニメーション ---
   入場: 中心ノード→線が中心から四方へ→周囲ノードの順。
   常時: 青パルスが中心から各社へ流れ続ける + 中心ノードの波紋 */
.reveal .diagram__node--main{opacity:0; transform:scale(.65); transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.3,1.2)}
.reveal .diagram__node:not(.diagram__node--main){opacity:0; transform:translateY(10px); transition:opacity .5s .95s,transform .5s .95s}
.reveal.in .diagram__node{opacity:1; transform:none}
.reveal .diagram__wire-h{transition:transform .7s .45s}
.reveal .diagram__wire-v{transition:transform .7s .45s}
.reveal .diagram__wire-v:first-of-type{transform-origin:bottom center}

.pos .diagram__node--main{animation:nodeglow 3.2s ease-out infinite}
@keyframes nodeglow{
  0%{box-shadow:0 0 0 0 rgba(0,116,192,.35)}
  70%{box-shadow:0 0 0 14px rgba(0,116,192,0)}
  100%{box-shadow:0 0 0 14px rgba(0,116,192,0)}
}

/* ABOUT: 左モノクロ写真バンド（斜めカット）+ 右会社概要テーブル
   セクション背景を右パネルと同じグレーにし、斜めの切り口の奥をグレーで通す（白見え防止） */
.about{display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); margin-top:clamp(40px,6vh,70px); background:#f6f6f5}
.about__ph{position:relative; overflow:hidden; clip-path:polygon(0 0,100% 0,88% 100%,0 100%); min-height:460px}
/* 会社概要の写真はカラー表示（2026-08-04社長指示）。白文字可読性のため減光のみ */
.about__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.62)}
.about__cap{position:absolute; left:clamp(24px,3.5vw,52px); bottom:clamp(28px,5vh,54px); color:#fff; z-index:1}
.about__cap .lbl{color:rgba(255,255,255,.65)}
.about__cap h3{margin-top:14px; font-weight:700; font-size:clamp(28px,3vw,46px); line-height:1.3; letter-spacing:.18em}
.about__since{display:inline-block; margin-top:16px; font-size:10.5px; letter-spacing:.3em; color:var(--aioi-light)}
.about__info{background:#f6f6f5; padding:clamp(36px,6vh,64px) var(--pad) clamp(36px,6vh,64px) clamp(28px,4vw,56px)}
.jtable{width:100%; border-collapse:collapse}
.jtable tr{border-bottom:1px solid #ddd}
.jtable th{width:7.5em; text-align:left; vertical-align:top; padding:14px 0; font-size:12px; font-weight:700; letter-spacing:.1em}
.jtable td{padding:14px 0; font-size:13px; line-height:1.9}
.about__links{margin-top:24px; font-size:12px}

/* MESSAGE: 左文章・CTAボックス + 右写真（小さめ・余白多め） */
.msgband{display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr); align-items:center}
.msgband__ph{
  position:relative; overflow:hidden; min-height:360px;
  margin:clamp(36px,6vh,64px) var(--pad) clamp(36px,6vh,64px) 0;
}
.msgband__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.94)}
.msgband__ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--steel); mix-blend-mode:color; opacity:.35;
}
.msgband__tx{padding:clamp(44px,7vh,84px) clamp(30px,4.5vw,60px) clamp(44px,7vh,84px) var(--pad)}
.msgband__tx h3{margin-top:16px; font-weight:700; font-size:clamp(22px,2.5vw,34px); line-height:1.75; letter-spacing:.08em}
.msgband__tx > p{margin-top:18px; font-size:13px; line-height:2.1; color:var(--ink-60)}
.msgband__name{margin-top:16px; font-size:12.5px}
.ctabox{
  margin-top:36px; border:1px solid var(--graphite); padding:26px 30px;
  display:flex; flex-direction:column; gap:16px; align-items:center; max-width:430px;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.ctabox span{font-size:12.5px; font-weight:600; letter-spacing:.08em}
.ctabox a{
  display:block; width:100%; text-align:center; background:var(--aioi); color:#fff;
  padding:14px 0; font-size:12.5px; letter-spacing:.18em;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:opacity .25s;
}
.ctabox a:hover{opacity:.8}
.ctabox{border-color:var(--aioi)}

@media (max-width:1080px){
  .about,.msgband{grid-template-columns:1fr}
  .about__ph{clip-path:none; min-height:300px}
  .msgband__ph{min-height:300px; margin:0 var(--pad) clamp(36px,6vh,56px)}
}
@media (max-width:760px){
  .pos__slant{display:none}
  .feats{flex-direction:column; gap:20px}
  .feat{border-left:none; padding:0}
}

/* =========================================================
   汎用ユーティリティ（インラインstyle撲滅用・単一クラスで最後尾＝最優先）
   ========================================================= */
.u-pt0{padding-top:0}
.u-mt14{margin-top:14px}
.u-mt16{margin-top:16px}
.u-mt18{margin-top:18px}
.u-mt20{margin-top:20px}
.u-mt34{margin-top:34px}
.u-ptsec{padding-top:clamp(30px,4.5vh,52px)}