/* ============================================================
   amjt-corporate - aerospace-editorial dark
   tokens = brief.md 03_color / 標準イージング cubic-bezier(.16,1,.3,1)
   角丸は1システム（4px）・アクセント1色（計器アンバー）・darkテーマ固定
   ============================================================ */
:root{
  --bg:#0C1420;
  --card:#111C2C;
  --text:#E9EEF5;
  --muted:#8C99AB;
  --accent:#E8A33D;
  --accent-light:rgba(232,163,61,.08);
  --border:rgba(233,238,245,.10);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:'Archivo',sans-serif;
  --font-jp:'Zen Kaku Gothic New',sans-serif;
  --font-mono:'Chivo Mono',monospace;
  --radius:4px;
  --sec-gap:clamp(96px,14vh,160px);
}

*{margin:0;padding:0;box-sizing:border-box}
/* scroll-behavior:smooth はScrollTriggerのrefreshと衝突するためJS側で実装 */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-jp);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:auto-phrase;   /* 日本語の文節折り返し（対応ブラウザのみ・単語途中の改行を防ぐ） */
}
h1,h2,h3,p,dd{text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ── 図面グリッド（slot03系・極薄ブループリント） ── */
body{
  background-image:
    linear-gradient(rgba(233,238,245,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,238,245,.025) 1px, transparent 1px);
  background-size:72px 72px;
}

/* ── 共通タイポ ── */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#AFC3DC;
  margin-bottom:18px;
}
.h2-jp{
  font-weight:900;
  font-size:clamp(1.65rem,3.6vw,2.3rem);
  line-height:1.4;
  letter-spacing:.01em;
  margin-bottom:26px;
}
.lead{font-size:1.06rem;font-weight:500;margin-bottom:18px;max-width:62ch}
p{max-width:62ch}

/* ── ボタン ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 30px;
  background:var(--text);color:var(--bg);
  font-weight:700;font-size:.95rem;text-decoration:none;
  border:1px solid var(--text);border-radius:999px;
  transition:all .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:transparent;color:var(--text)}
.btn-ghost{background:transparent;color:var(--text);border-color:rgba(233,238,245,.35)}
.btn-ghost:hover{border-color:var(--text)}
.btn-lg{min-height:56px;padding:14px 44px;font-size:1.05rem}

/* ============================================================
   SCROLL WORLD（受け渡し＝重ね順。「消す」ではない）
   ============================================================ */
:root, .sw-root{
  --sw-bg:#0C1420;
  --sw-ink:#E9EEF5;
  --sw-ink-soft:#8C99AB;
  --sw-accent:#E8A33D;
}
#world{position:relative;z-index:1}
.page{
  position:relative;z-index:2;
  background:var(--bg);
  background-image:
    linear-gradient(rgba(233,238,245,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,238,245,.025) 1px, transparent 1px);
  background-size:72px 72px;
}
/* 世界を完全に通過した後の掃除（sw-trackは絶対に畳まない） */
#world > .sw-sky, #world > .sw-scrollbar, #world > .sw-topbar, #world > .sw-stage,
#world > .sw-copylayer, #world > .sw-route, #world > .sw-hint{
  transition:opacity .4s ease, visibility 0s linear 0s;
}
.world-done #world > .sw-sky, .world-done #world > .sw-scrollbar,
.world-done #world > .sw-topbar, .world-done #world > .sw-stage,
.world-done #world > .sw-copylayer, .world-done #world > .sw-route,
.world-done #world > .sw-hint{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
/* Anti-Slop: エンジン既定の番号見出し（01/05）は出さない */
.sw-copy__num{display:none !important}
/* 日本語見出し：エンジンはwidthを直接指定するためmax-widthは効かない（実測） */
.sw-copy{width:min(620px,47vw) !important;max-width:none !important}
.sw-copy__title{word-break:auto-phrase;line-break:strict;overflow-wrap:normal}
@media (max-width:860px){.sw-copy{width:min(520px,86vw) !important}}
/* 世界の間は自前ヘッダーを退避（エンジンのトップバーが案内する）。JS無効時は常に表示 */
html.js:not(.world-done) .site-header{transform:translateY(-110%)}
html.world-done .site-header{transform:none}

/* ── 世界のUIをブランドの闇に合わせる（エンジン既定の白ガラス＋オレンジのピルを廃止） ── */
.sw-brand__mark{display:none !important}                       /* オレンジのロゴブロブを出さない */
.sw-brand__name{color:#E9EEF5 !important;font-family:'Archivo',sans-serif !important;letter-spacing:.06em}
.sw-nav{
  background:rgba(12,20,32,.55) !important;
  border:1px solid rgba(233,238,245,.14) !important;
  backdrop-filter:blur(10px) !important;
}
.sw-nav__item{color:rgba(233,238,245,.6) !important}
.sw-nav__item:hover{color:#E9EEF5 !important}
.sw-nav__item.is-active{color:#0C1420 !important;background:#E9EEF5 !important}
.sw-topcta{background:rgba(12,20,32,.72) !important;color:#E9EEF5 !important;border:1px solid rgba(233,238,245,.25) !important}
.sw-scrollbar{background:rgba(233,238,245,.10) !important}
.sw-scrollbar span{background:rgba(233,238,245,.75) !important}
.sw-route{display:none !important}   /* 右の現在位置インジケータは出さない（オペレーター指示） */
.sw-topcta{display:none !important}  /* 世界内のCTAピルも出さない（同上・連絡はページ下のContactで） */
.sw-hint{color:rgba(233,238,245,.55) !important}
.sw-hint i{border-color:rgba(233,238,245,.35) !important}
.sw-hint i::after{background:#E9EEF5 !important}
.sw-copy__eyebrow{color:#AFC3DC !important}
.sw-copy__tags li{
  background:rgba(12,20,32,.6) !important;
  color:#E9EEF5 !important;
  border:1px solid rgba(233,238,245,.22) !important;
}
.sw-btn--primary{background:#E9EEF5 !important;color:#0C1420 !important}
.sw-btn--ghost{color:#E9EEF5 !important;border-color:rgba(233,238,245,.4) !important}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 clamp(16px,3vw,36px);
  background:rgba(12,20,32,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:transform .5s var(--ease);
}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--text)}
.brand-mark{font-family:var(--font-display);font-weight:800;font-size:.98rem;letter-spacing:.08em}
.nav-list{display:flex;align-items:center;gap:clamp(14px,2vw,28px);list-style:none}
.nav-list a{
  color:var(--text);text-decoration:none;font-size:.88rem;font-weight:500;
  transition:color .4s var(--ease);
}
.nav-list a:hover{color:var(--accent)}
.nav-cta a{
  display:inline-flex;align-items:center;min-height:38px;padding:6px 18px;
  background:var(--text);color:var(--bg);font-weight:700;
  border-radius:999px;
  transition:all .4s var(--ease);
}
.nav-cta a:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.nav-toggle{display:none}

/* ============================================================
   TRADING
   ============================================================ */
.trading{padding-top:var(--sec-gap)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.split-visual{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ratio-4x5{aspect-ratio:4/5}
.ratio-16x9{aspect-ratio:16/9}
.split-visual img{width:100%;height:100%;object-fit:cover}

.values{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(32px,5vw,72px);
  margin-top:clamp(56px,8vh,88px);
}
.value{
  padding:26px 0 26px 22px;
  border-left:1px solid var(--border);
  transition:border-color .4s var(--ease);
}
.value:hover{border-left-color:#AFC3DC}
.value h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.value p{font-size:.94rem;color:var(--text)}

.mission{
  margin-top:clamp(56px,8vh,88px);
  background:
    linear-gradient(180deg, rgba(12,20,32,.88) 0%, rgba(12,20,32,.52) 50%, rgba(12,20,32,.9) 100%),
    url("assets/band-clouds.jpg") center 40% / cover no-repeat var(--card);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:clamp(88px,14vh,150px) 0;
}
.mission-line{font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:900;line-height:1.9;max-width:34em;text-shadow:0 2px 24px rgba(12,20,32,.85)}
.mission-values{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:22px;
}
.mission-values li{
  font-size:.9rem;color:rgba(233,238,245,.78);
  padding-left:18px;position:relative;
  text-shadow:0 1px 12px rgba(12,20,32,.8);
}
.mission-values li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:#AFC3DC;
}

/* ============================================================
   FIELDS（非対称グリッド＋図面テクスチャ）
   ============================================================ */
.fields{padding-top:var(--sec-gap)}
.fields-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  grid-template-rows:auto auto;
  gap:14px;
}
.field-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(24px,3.5vw,40px);
  position:relative;overflow:hidden;
  transition:border-color .4s var(--ease);
}
.field-card:hover{border-color:rgba(233,238,245,.4)}
.field-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(233,238,245,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,238,245,.035) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse at 85% 15%, black, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 85% 15%, black, transparent 70%);
}
.field-main{
  grid-row:1 / 3;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;
  background:
    linear-gradient(180deg, rgba(12,20,32,0) 0%, rgba(12,20,32,.12) 38%, rgba(12,20,32,.72) 72%, rgba(12,20,32,.96) 100%),
    url("assets/hero-space.jpg") center 30% / cover no-repeat var(--card);
}
.field-main::after{content:none}
.field-photo{
  display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;
  background:
    linear-gradient(180deg, rgba(12,20,32,0) 0%, rgba(12,20,32,.28) 38%, rgba(12,20,32,.72) 68%, rgba(12,20,32,.96) 100%),
    var(--field-bg) center / cover no-repeat var(--card);
}
.field-photo::after{content:none}
.field-card h3,.field-card p{text-shadow:0 2px 16px rgba(12,20,32,.9),0 1px 3px rgba(12,20,32,.8)}
.field-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.field-tags li{
  font-size:.76rem;color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:3px 10px;background:rgba(12,20,32,.45);
}
.field-card > p{position:relative;z-index:1}
.field-card h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.field-main h3{font-size:clamp(1.4rem,2.6vw,1.8rem)}
.field-card p{font-size:.92rem;color:var(--muted)}

/* ============================================================
   PROCESS（svg-draw 縦レール）
   ============================================================ */
.process{padding-top:var(--sec-gap)}
.process-rail{position:relative;margin-top:clamp(28px,5vh,48px)}
.process-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.process-line path{fill:none;stroke:#AFC3DC;stroke-width:2;stroke-linecap:round;stroke-dasharray:2 8 !important}
/* desktop: 降下していく図面線で4ステップを繋ぐ（階段状スタッガー） */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.step{position:relative;padding-top:38px}
.step:nth-child(2){margin-top:64px}
.step:nth-child(3){margin-top:128px}
.step:nth-child(4){margin-top:192px}
.step-dot{
  position:absolute;left:2px;top:4px;
  width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid #E9EEF5;
  box-shadow:0 0 0 4px rgba(175,195,220,.16);
}
.step-num{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;
  color:#AFC3DC;
  display:block;margin-bottom:14px;
}
.step h3{font-size:1.12rem;font-weight:700;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--text)}
@media (max-width:880px){
  /* mobile: 縦積み（線はJSが縦経路で生成） */
  .process-rail{padding-left:34px}
  .steps{grid-template-columns:1fr;gap:clamp(32px,5vh,48px)}
  .step{padding-top:0;max-width:56ch}
  .step:nth-child(2),.step:nth-child(3),.step:nth-child(4){margin-top:0}
  .step-dot{left:-30px;top:.4em}
  .step-num{font-size:1.7rem;margin-bottom:8px}
}

/* ============================================================
   PRODUCTS（sticky-stack）
   ============================================================ */
.products{padding-top:var(--sec-gap)}
.products-lead{color:var(--text);margin-bottom:clamp(36px,5vh,56px)}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.stack-visual{
  position:sticky;top:96px;
  aspect-ratio:16/10;
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--card);
}
.p-state{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.p-state.is-active{opacity:1}
.p-state img{width:100%;height:100%;object-fit:cover}
.stack-cards{display:grid;gap:clamp(28px,4vh,44px);padding:16px 0}
.p-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);
  transition:all .4s var(--ease);
}
html.js .p-card{opacity:.6;transform:translateY(8px)}
html.js .p-card.is-active{opacity:1;transform:none;border-color:rgba(233,238,245,.55)}
.p-name{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:.01em}
.p-tag{font-size:.86rem;color:var(--muted);margin:4px 0 16px}
.p-inline{display:none;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.p-inline img{width:100%;height:100%;object-fit:cover}
.p-card p{font-size:.95rem}
.p-link{
  display:inline-block;margin-top:14px;
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.06em;
  color:#AFC3DC;text-decoration:none;
  border-bottom:1px solid rgba(175,195,220,.5);
  transition:opacity .4s var(--ease);
}
.p-link:hover{opacity:.7}

/* 製品ビジュアルをクリック可能に（画像→該当ページへ遷移）。ホバー/タップで「開く」バッジ。 */
.p-open{display:block;position:relative;width:100%;height:100%;text-decoration:none;cursor:pointer}
.p-open > img{display:block;transition:transform .6s var(--ease)}
.p-open:hover > img{transform:scale(1.03)}
.p-open__badge{
  position:absolute;left:12px;bottom:12px;z-index:4;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;white-space:nowrap;
  color:var(--text);background:rgba(12,20,32,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(233,238,245,.28);border-radius:999px;padding:7px 14px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.p-open:hover .p-open__badge,.p-open:focus-visible .p-open__badge{opacity:1;transform:none}
/* タッチ端末はホバーが無いので常時バッジ表示＝押せることを明示 */
@media (hover:none){.p-open__badge{opacity:1;transform:none}}

/* ── expanding-cards（Alpha Motion Studio の制作サンプル体験） ──
   非アクティブは grayscale で沈み、選んだ帯にだけ色が戻る。タップ/hover両対応・PE。 */
.exp{
  list-style:none;display:grid;gap:8px;
  grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;
  height:100%;
  transition:grid-template-columns .6s var(--ease), grid-template-rows .6s var(--ease);
}
.p-state .exp{position:absolute;inset:10px;height:auto}
.exp__item{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--border);min-width:0;min-height:0;cursor:pointer;
}
.exp__item img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1);filter:grayscale(0);
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
html.js .exp__item img{transform:scale(1.08);filter:grayscale(1)}
html.js .exp__item[data-active="true"] img{transform:scale(1);filter:grayscale(0)}
.p-inline-exp{display:none;height:240px;margin-bottom:16px}
.p-inline-exp .exp{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}

/* ============================================================
   PRODUCTS = Diced 2×2（4製品・ホバー/タップで左の説明が切替）
   角欠けマスク: 21st maxim.bort.devel / codepen kristen17・t_afif（MIT）
   ============================================================ */
.diced{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);
  align-items:center;margin-top:clamp(32px,4vh,52px);
}
.diced-info{position:relative;display:grid}
.di-item{
  grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;
}
.di-item.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.di-eyebrow{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#AFC3DC}
.di-name{
  font-family:var(--font-display);font-weight:800;line-height:1.02;margin:14px 0 0;
  font-size:clamp(2rem,4vw,3.2rem);
  background:linear-gradient(120deg,#E9EEF5 0%,#AFC3DC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.di-sep{display:block;width:88px;height:3px;background:#AFC3DC;border-radius:2px;margin:20px 0 22px}
.di-body{font-size:1rem;line-height:1.75;color:var(--muted);max-width:42ch}
.di-cta{margin-top:26px}
.di-dev{
  display:inline-flex;align-items:center;margin-top:26px;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;color:var(--muted);
  border:1px dashed rgba(233,238,245,.3);border-radius:999px;padding:10px 20px;
}

.diced-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;aspect-ratio:1/1;width:100%}
.diced-cell{
  position:relative;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;
  border-radius:20px;
}
.diced-cell img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.8);transform:scale(1);
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.diced-cell.is-active img,.diced-cell:hover img,.diced-cell:focus-visible img{filter:none;transform:scale(1.05)}
.diced-cell__tag{
  position:absolute;left:12px;bottom:12px;z-index:3;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:#fff;
  background:rgba(12,20,32,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(233,238,245,.25);border-radius:999px;padding:6px 12px;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.diced-cell.is-active .diced-cell__tag,.diced-cell:hover .diced-cell__tag,.diced-cell:focus-visible .diced-cell__tag{opacity:1;transform:none}

/* 角欠け（diced）マスク。各セルは中央を向いた角を1つ削る */
.warped-image{--r:20px;--s:32px;--x:22px;--y:5px}
.top-right{
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  --_mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
  -webkit-mask:var(--_mask);mask:var(--_mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.top-left{
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at var(--r) var(--r),#000 75%,#0000 0);
  --_d:(var(--s) + var(--r));
  --_mask: calc(var(--_d) + var(--x)) 0 var(--_m), 0 calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 0 0,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
  -webkit-mask:var(--_mask);mask:var(--_mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.bottom-left{
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 180deg at var(--r) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  --_mask: calc(var(--_d) + var(--x)) 100% var(--_m), 0 calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));
  -webkit-mask:var(--_mask);mask:var(--_mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.bottom-right{
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  --_mask: calc(100% - var(--_d) - var(--x)) 100% var(--_m), 100% calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)), var(--_g) calc(-1*var(--_d) - var(--x)) 0, var(--_g) 0 calc(-1*var(--_d) - var(--y));
  -webkit-mask:var(--_mask);mask:var(--_mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* スマホ：2x2タイル＋切替は指で使えない（タイルが165px角まで潰れ、説明も1件しか見えない）。
   マークアップは触らず display:contents で両コンテナを解体し、
   画像→説明→画像→説明…と製品ごとに縦積みのカードへ組み替える。 */
@media (max-width:860px){
  .diced{grid-template-columns:1fr;gap:0}
  .diced-info,.diced-grid{display:contents}

  /* 画像(1..4)=order 1,3,5,7 ／ 説明(1..4)=order 2,4,6,8 で交互に並べる */
  .diced-cell:nth-child(1){order:1}
  .di-item:nth-child(1){order:2}
  .diced-cell:nth-child(2){order:3}
  .di-item:nth-child(2){order:4}
  .diced-cell:nth-child(3){order:5}
  .di-item:nth-child(3){order:6}
  .diced-cell:nth-child(4){order:7}
  .di-item:nth-child(4){order:8}

  /* 説明は全件を通常フロー表示（切替UIをやめる） */
  .di-item{
    grid-area:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:none;padding:18px 0 40px;
  }
  .di-item:last-child{padding-bottom:0}
  .di-name{font-size:clamp(1.7rem,7vw,2.2rem);margin-top:10px}
  .di-sep{width:56px;height:2px;margin:14px 0 16px}
  .di-body{max-width:none}

  /* 画像は横長カード。ホバー前提の減光・角欠けマスクは外す */
  .diced-cell{aspect-ratio:16/10;width:100%;cursor:pointer}
  .diced-cell img{filter:none;transform:none;border-radius:16px}
  .diced-cell .warped-image{-webkit-mask:none;mask:none}
  .diced-cell__tag{display:none}   /* 直下に製品名が出るので重複 */
}

/* ============================================================
   LAB
   ============================================================ */
.lab{padding-top:var(--sec-gap)}
.lab-card{
  border:1px solid var(--border);
  border-left:3px solid #AFC3DC;
  border-radius:var(--radius);
  background:var(--card);
  padding:clamp(24px,3.5vw,40px);
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,3.5vw,44px);align-items:center;
}
.lab-visual{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.lab-visual img{width:100%;height:auto;display:block}
@media (max-width:880px){
  .lab-card{grid-template-columns:1fr}
}
.lab-title{font-family:var(--font-display);font-weight:800;font-size:1.3rem;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.lab-status{
  font-family:var(--font-jp);font-size:.72rem;font-weight:700;color:#AFC3DC;
  border:1px solid rgba(175,195,220,.5);border-radius:999px;padding:2px 10px;
}
.lab-card p{font-size:.95rem;color:var(--text)}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding-top:var(--sec-gap)}
.about-line{font-size:1.05rem;font-weight:500;margin-bottom:30px}
/* 姿勢の3行：罫線リストをやめ、飛行の対角を引き継ぐ階段状のディスプレイ組みに */
.about-credo{
  margin:clamp(40px,6vh,64px) 0 clamp(44px,7vh,72px);
  display:grid;gap:clamp(14px,2.4vh,24px);
}
.about-credo p{
  font-family:var(--font-display);font-weight:800;
  text-wrap:balance;
  font-size:clamp(1.35rem,3vw,2.2rem);
  line-height:1.12;letter-spacing:-.012em;
  color:var(--muted);
  max-width:none;
}
.about-credo em{font-style:normal;color:var(--text)}
.about-credo p:nth-child(2){margin-left:clamp(24px,6vw,96px)}
.about-credo p:nth-child(3){margin-left:clamp(48px,12vw,192px)}
@media (max-width:880px){
  .about-credo p:nth-child(2),.about-credo p:nth-child(3){margin-left:0}
}
/* 会社概要＝航空貨物のマニフェスト（送り状）。四隅ティック＝機体銘板、航路の弧が透かし */
.about-plate{
  position:relative;
  border:1px solid rgba(233,238,245,.22);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='320' viewBox='0 0 520 320'%3E%3Cpath d='M20 300 C 180 60 360 60 500 260' fill='none' stroke='%23AFC3DC' stroke-width='2' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='300' r='5' fill='none' stroke='%23AFC3DC' stroke-width='2'/%3E%3Ccircle cx='500' cy='260' r='5' fill='none' stroke='%23AFC3DC' stroke-width='2'/%3E%3C/svg%3E") right -20px bottom -10px / clamp(280px,42vw,520px) auto no-repeat,
    rgba(17,28,44,.6);
  padding:clamp(28px,4vw,48px);
  overflow:hidden;
}
.about-plate::before,.about-plate::after,
.about-plate .tick::before,.about-plate .tick::after{
  content:"";position:absolute;width:14px;height:14px;border:0 solid #AFC3DC;
}
.about-plate::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.about-plate::after{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px}
.about-plate .tick::before{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px}
.about-plate .tick::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}

/* マニフェスト・ヘッダー：白抜きロゴ（機体ステンシル）＋見出し＋発地票 */
.plate-head{
  position:relative;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);
  padding-bottom:clamp(20px,2.6vw,28px);
  margin-bottom:clamp(20px,2.6vw,28px);
  border-bottom:1px solid rgba(233,238,245,.16);
}
.plate-mark{
  width:clamp(52px,5.4vw,72px);height:auto;flex:none;
  filter:brightness(0) invert(1);opacity:.92;
}
.plate-headings{display:flex;flex-direction:column;gap:6px;margin-right:auto}
.plate-kicker{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:#AFC3DC;
}
.plate-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1}
.plate-doc{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:right;flex:none;
}
@media (max-width:600px){
  .plate-head{flex-wrap:wrap;gap:14px}
  .plate-doc{width:100%;text-align:left;order:3}
}
.company{position:relative;display:grid;gap:0}
.company > div{
  display:grid;grid-template-columns:140px 1fr;gap:18px;
  padding:16px 0;border-bottom:1px solid rgba(233,238,245,.12);
}
.company > div:last-child{border-bottom:none}
.company dt{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:#AFC3DC;padding-top:6px;
}
.company dd{font-size:1.05rem;font-weight:500}
.company a{color:var(--text);text-decoration-color:#AFC3DC}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  margin-top:var(--sec-gap);
  background:
    linear-gradient(180deg, rgba(12,20,32,.94) 0%, rgba(12,20,32,.45) 55%, rgba(12,20,32,.88) 100%),
    url("assets/band-night.jpg") center 62% / cover no-repeat var(--card);
  border-top:1px solid var(--border);
  padding:clamp(110px,17vh,190px) 0;
  text-align:center;
}
.contact .h2-jp,.contact p{text-shadow:0 2px 22px rgba(12,20,32,.9)}
.contact .wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.contact p{max-width:44em}
.contact-mail a{
  font-family:var(--font-mono);font-size:.95rem;letter-spacing:.04em;
  color:var(--text);text-decoration-color:var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--border);
  padding:56px 0 40px;
  background:var(--bg);
}
.foot-brand{font-family:var(--font-display);font-weight:800;letter-spacing:.08em;margin-bottom:14px}
.foot-line{font-size:.88rem;color:var(--muted);margin-bottom:26px}
.foot-nav{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:30px}
.foot-nav a{color:var(--text);text-decoration:none;font-size:.86rem;transition:color .4s var(--ease)}
.foot-nav a:hover{color:var(--accent)}
.foot-copy{font-size:.8rem;color:var(--muted)}

/* ============================================================
   リビール（GSAP用の初期状態は JSが付与＝PE担保。CSSでは隠さない）
   ============================================================ */

/* ============================================================
   MOBILE（スマホ専用判断：隠す/詰める/縮める）
   ============================================================ */
@media (max-width:880px){
  /* ナビ→ハンバーガー。CTAだけは露出維持しない（メニュー内へ）＝1行維持を優先 */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:44px;height:44px;background:none;border:none;cursor:pointer;align-items:center;
  }
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--text);transition:transform .4s var(--ease),opacity .4s var(--ease)}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-list{
    position:fixed;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(12,20,32,.97);
    border-bottom:1px solid var(--border);
    padding:8px 20px 20px;
    display:none;
  }
  .nav-list.is-open{display:flex}
  .nav-list li{border-bottom:1px solid var(--border)}
  .nav-list li:last-child{border-bottom:none}
  .nav-list a{display:flex;align-items:center;min-height:48px}
  .nav-cta{margin-top:12px}
  .nav-cta a{justify-content:center;min-height:48px}

  .hero-inner{padding-top:104px;padding-bottom:72px}
  .split{grid-template-columns:1fr}
  .split-visual{order:-1;max-height:52vh}
  .ratio-4x5{aspect-ratio:16/10}   /* スマホは縦長をやめ高さを抑える */
  .values{grid-template-columns:1fr}
  .fields-grid{grid-template-columns:1fr}
  .field-main{min-height:0}

  /* sticky-stack はスマホでは縦積みに降格（演出はPC専用） */
  .stack{grid-template-columns:1fr}
  .stack-visual{display:none}
  .p-inline{display:block}
  html.js .p-card{opacity:1;transform:none}

  .company > div{grid-template-columns:88px 1fr}
}

/* ============================================================
   reduced-motion（全演出停止・本文可視）
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html.js .p-card{opacity:1;transform:none}
}