@charset "utf-8";
/* =========================================================
   pallas LLC. — design pattern 2
   明るい地に極端なサイズ差のタイポグラフィ。動きは操作とスクロールに連動させる。
   色はパターン1(温かいペーパー + 金)と競合しないよう、寒色寄りの白 + 朱で組む。
   ========================================================= */

:root {
    /* --ink 系 = 地の階段(数字が大きいほど手前・明るい)。--milk = 文字色と反転帯 */
    --ink: #eceef1;
    --ink-2: #f7f8fa;
    --ink-3: #ffffff;
    --band: #e2e5ea;
    --milk: #101319;
    --haze: #6f737e;
    --flare: #ff4416;
    --line: rgba(16, 19, 25, 0.14);
    --line-2: rgba(16, 19, 25, 0.3);
    --chrome: linear-gradient(102deg, #6b7482 0%, #aeb6c3 18%, #363e4a 40%, #9aa3b0 60%, #4d5462 82%, #b6bdc9 100%);

    --f-jp: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --f-en: "Bricolage Grotesque", "Zen Kaku Gothic New", sans-serif;

    --e-out: cubic-bezier(0.16, 1, 0.3, 1);
    --e-io: cubic-bezier(0.76, 0, 0.24, 1);
    --pad: clamp(16px, 4vw, calc(56 * var(--u)));
    --hd-h: calc(74 * var(--u));
    /* 1440px を基準にした拡大率。1440px 以下は 1px = 等倍。
       これより広い画面では clamp() の上限もこの率で伸ばすので、
       文字だけ頭打ちにならず、余白・文字・絵が同じ率で大きくなる */
    --u: 1px; /* noscale */
    /* 本文だけの倍率。見出しとの比を変えずに全体を拡大すると、
       元の設計の本文(1440px で 12.5-15.7px)がそのまま小さいままになる。
       ここは版面の拡大とは別の話なので、独立した係数で持ち上げる。
       ?bf=1.3 のように付ければ、その場で試せる(確認用) */
    --bf: 1.18;
}

/* 1440px(デザインを描いた幅)を超えたぶんだけ、版面全体を同じ率で拡大する。
   clamp() の上限もこの率で伸びるので、幅だけ伸びて文字が頭打ちになる
   =「余白ばかり広くて文字が小さい」状態にならない。
   1440px 以下では --u = 1px のままなので、これまでと完全に同じ。
   メディアクエリは詳細度を上げないので、:root より後ろに置いて上書きする */
@media (min-width: 1441px) {
    /* 幅だけで決めてはいけない。横に広くて縦が低い画面(横長モニタ、
       ブラウザを縦に縮めた窓、表示倍率を下げて横だけ広くなった状態)では、
       幅基準の倍率が高さに対して大きすぎて、見出しだけで画面が埋まる。
       デザインの原寸 1440x900 に対する縦横それぞれの比のうち、
       小さいほうを採る = 版面が必ず画面に収まる。
       max(1px, ...) は、縦が低いときに 1440px 時点より小さくしないため */
    :root { --u: max(1px, min(calc(100vw / 1440), calc(100svh / 900))); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    background: var(--ink);
}
body {
    margin: 0;
    background: var(--ink);
    color: var(--milk);
    font-family: var(--f-body);
    font-size: calc((calc(15 * var(--u))) * var(--bf));
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0.02em;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, dt, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--flare); color: #fff; }

/* 見出しの日本語組み。文節で折り、行頭の括弧類の空きを詰める */
.hero__title, .wall__body, .track__title, .stack__title, .works__title,
.col__title, .cta__title, .stack__card h3, .sv__t {
    word-break: auto-phrase;
    text-spacing-trim: trim-start;
}

/* ---------------------------------------------------------
   共通パーツ
   --------------------------------------------------------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--haze);
}
.tag::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--flare);
}
.tag--light { color: rgba(16, 19, 25, 0.62); }

.ln {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-en);
    font-size: calc(13 * var(--u));
    letter-spacing: 0.08em;
    color: var(--milk);
}
.ln > i {
    display: block;
    width: 40px; height: 1px;
    background: currentColor;
    transition: width 0.5s var(--e-out);
}
.ln:hover > i { width: 66px; }

/* 出現。対応ブラウザではスクロール位置に連動させる */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(44px);
}
.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s var(--e-out), transform 1s var(--e-out);
}
@supports (animation-timeline: view()) {
    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
        animation: reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 30%;
    }
}
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(46px); }
    to { opacity: 1; transform: none; }
}

/* 1文字ずつ立ち上がる見出し */
.kin { display: block; overflow: hidden; padding-bottom: 0.06em; }
.js .kin .ch {
    display: inline-block;
    transform: translateY(105%) rotate(4deg);
    transition: transform 1.05s var(--e-out);
    transition-delay: calc(var(--i) * 34ms + var(--base, 0ms));
}
.js .kin.is-in .ch { transform: none; }
/* 2行目は塗りを抜いて輪郭だけにする。背景が透けて奥行きが出る */
.kin--accent .ch, .kin--accent {
    color: transparent;
    -webkit-text-stroke: 1.6px var(--milk);
}

/* =========================================================
   起動演出
   ========================================================= */
.boot {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    pointer-events: none;
}
.js .boot { display: block; }
.boot__panel {
    position: absolute;
    top: 0; bottom: 0;
    width: calc(100% / 3 + 1px);
    background: var(--ink-2);
    transition: transform 0.85s var(--e-io);
}
.boot__panel:nth-child(3) { left: 0; }
.boot__panel:nth-child(4) { left: calc(100% / 3); transition-delay: 0.07s; }
.boot__panel:nth-child(5) { left: calc(100% / 3 * 2); transition-delay: 0.14s; }
.boot__count {
    position: absolute;
    z-index: 2;
    right: var(--pad); bottom: calc(var(--pad) - 0.12em);
    font-family: var(--f-en);
    font-size: clamp(3.4rem, 13vw, calc(176 * var(--u)));
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 0.82;
    color: var(--milk);
    transition: opacity 0.4s ease;
}
.boot__name {
    position: absolute;
    z-index: 2;
    left: var(--pad); bottom: var(--pad);
    font-family: var(--f-en);
    font-size: calc(12 * var(--u));
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--haze);
    transition: opacity 0.4s ease;
}
.js.is-booted .boot__count,
.js.is-booted .boot__name { opacity: 0; }
.js.is-booted .boot__panel { transform: translateY(-101%); }
.js.is-booting body { overflow: hidden; }

/* =========================================================
   カーソル(下の色を反転させる。明るい地では黒い円になる)
   ========================================================= */
.pt {
    position: fixed;
    top: 0; left: 0;
    z-index: 120;
    display: none;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    will-change: transform;
    transition: width 0.5s var(--e-out), height 0.5s var(--e-out), margin 0.5s var(--e-out);
}
.pt-label {
    position: fixed;
    top: 0; left: 0;
    z-index: 121;
    display: none;
    place-items: center;
    width: 128px; height: 128px;
    margin: -64px 0 0 -64px;
    pointer-events: none;
    will-change: transform;
}
.pt-label > i {
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.35s ease, transform 0.5s var(--e-out);
}
.has-cursor .pt { display: block; }
.has-cursor .pt-label { display: grid; }
.has-cursor.is-hot .pt { width: 118px; height: 118px; margin: -59px 0 0 -59px; }
.has-cursor.is-hot .pt-label > i { opacity: 1; transform: none; }
.has-cursor.is-down .pt { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.has-cursor.is-hot.is-down .pt { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.has-cursor a, .has-cursor button, .has-cursor [data-cursor], .has-cursor [data-cursor] * { cursor: none; }

/* =========================================================
   ヘッダー
   ========================================================= */
.hd {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: clamp(16px, 4vw, calc(48 * var(--u)));
    height: var(--hd-h);
    padding: 0 var(--pad);
    mix-blend-mode: difference;
    transition: transform .55s var(--e-out), opacity .3s linear;
}
/* ?off=blend。反転ブレンドが重さの原因かを切り分けるための逃げ道(確認用)。
   ブレンドをやめると明るい地の上で白文字が読めなくなるので、色も差し替える */
.no-blend .hd { mix-blend-mode: normal; }
.no-blend .hd__logo,
.no-blend .hd__nav a,
.no-blend .hd__cta { color: #10131a; }
/* 下スクロールで退避。反転ブレンドが本文と重なって読めなくなるのを防ぐ */
.hd.is-off { transform: translateY(-108%); opacity: 0; pointer-events: none; }
.is-menu .hd { transform: none; opacity: 1; pointer-events: auto; }
.reduce-motion .hd { transition: none; }
.hd__mark { display: flex; align-items: center; margin-right: auto; }
/* ロゴはフクロウ + Pallas。名刺の入稿データから取り出した実物の字形
   (app/lib/logo-paths.php / view.php の pallas_logo)。
   ヘッダーは反転ブレンド(mix-blend-mode: difference)なので、
   白を指定すると明るい地の上では黒く出る */
.hd__logo {
    display: block;
    /* --lg はロゴの高さ(1440px 基準の px)。横幅はその 4.08 倍。
       ?lg=32 のように付ければその場で試せる(確認用) */
    height: calc(var(--lg, 30) * var(--u));
    width: auto;
    color: #fff;
}
.hd__nav { display: flex; gap: clamp(14px, 2.4vw, calc(34 * var(--u))); }
.hd__nav a {
    position: relative;
    font-family: var(--f-en);
    font-size: calc(12 * var(--u));
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    font-variation-settings: "wght" 500, "wdth" 100;
    transition: font-variation-settings 0.45s var(--e-out);
}
.hd__nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -5px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--e-out);
}
.hd__nav a:hover { font-variation-settings: "wght" 800, "wdth" 88; }
.hd__nav a:hover::after { transform: scaleX(1); }

.hd__cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    font-family: var(--f-en);
    font-size: calc(12 * var(--u));
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    transition: transform 0.4s var(--e-out), background-color 0.4s ease, color 0.4s ease;
}
/* 反転ブレンド中なので、地に近い色を置くと消える。文字は暗い色を指定して反転で明るく出す */
.hd__cta:hover { background: #fff; color: var(--milk); }

.burger {
    display: none;
    width: 34px; height: 34px;
    position: relative;
}
.burger > span {
    position: absolute;
    left: 5px; right: 5px;
    height: 1px;
    background: #fff;
    transition: transform 0.5s var(--e-out), opacity 0.3s ease;
}
.burger > span:first-child { top: 14px; }
.burger > span:last-child { top: 20px; }
.is-menu .burger > span:first-child { transform: translateY(3px) rotate(21deg); }
.is-menu .burger > span:last-child { transform: translateY(-3px) rotate(-21deg); }

/* 全画面メニュー */
.menu {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: calc(var(--hd-h) + 6vh) var(--pad) var(--pad);
    background: var(--ink-2);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.85s var(--e-io);
}
.is-menu .menu { clip-path: inset(0 0 0 0); }
.menu__list { display: grid; }
.menu__list a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: clamp(8px, 1.6vh, calc(18 * var(--u))) 0;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--e-out), transform 0.7s var(--e-out);
}
.is-menu .menu__list a { opacity: 1; transform: none; }
.menu__list a:nth-child(1) { transition-delay: 0.18s; }
.menu__list a:nth-child(2) { transition-delay: 0.24s; }
.menu__list a:nth-child(3) { transition-delay: 0.3s; }
.menu__list a:nth-child(4) { transition-delay: 0.36s; }
.menu__list a:nth-child(5) { transition-delay: 0.42s; }
.menu__list em {
    font-family: var(--f-en);
    font-style: normal;
    font-size: clamp(2rem, 8vw, calc(73.6 * var(--u)));
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variation-settings: "wght" 500, "wdth" 100;
    transition: font-variation-settings 0.5s var(--e-out), color 0.4s ease;
}
.menu__list a:hover em { font-variation-settings: "wght" 800, "wdth" 82; color: var(--flare); }
.menu__list i {
    font-style: normal;
    font-size: calc(12.8 * var(--u));
    letter-spacing: 0.08em;
    color: var(--haze);
}
.menu__meta {
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    letter-spacing: 0.16em;
    color: var(--haze);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 100svh;
    padding: calc(var(--hd-h) + 4vh) var(--pad) calc(var(--pad) + 46px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
}
.hero__gl {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    display: block;
}
/* WebGLが使えないときの下地 */
.hero:not(.has-gl)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(62vw 62vw at 72% 26%, rgba(96, 118, 255, 0.3) 0%, rgba(236, 238, 241, 0) 64%),
        radial-gradient(50vw 50vw at 20% 76%, rgba(255, 68, 22, 0.2) 0%, rgba(236, 238, 241, 0) 62%),
        linear-gradient(180deg, #e7eaf0 0%, #f4f5f7 100%);
}
.hero__ghost {
    position: absolute;
    z-index: -1;
    left: 50%; top: 33%;
    transform: translate(-50%, -50%);
    font-family: var(--f-en);
    font-size: min(26vw, 40vh);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(16, 19, 25, 0.13);
    white-space: nowrap;
    pointer-events: none;
}
/* 粒子が崩れて PALLAS を組むので、輪郭だけの PALLAS は重ねない */
.hero.has-gl .hero__ghost { display: none; }
.hero__rules {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
}
.hero__rules > span { border-left: 1px solid var(--line); }
.hero__rules > span:first-child { border-left: 0; }

.hero__inner { position: relative; }
.hero__kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: clamp(18px, 3vh, calc(34 * var(--u)));
}
.hero__kicker > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(16, 19, 25, 0.82);
}
.hero__kicker > span + span::before {
    content: "";
    width: 22px; height: 1px;
    background: var(--flare);
}
.hero__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(2.9rem, 11.4vw, calc(166.4 * var(--u)));
    line-height: 1.06;
    letter-spacing: -0.045em;
}
.hero__lead {
    max-width: 34em;
    margin-top: clamp(20px, 3.4vh, calc(40 * var(--u)));
    font-size: calc((clamp(0.86rem, 1.1vw, calc(15.68 * var(--u)))) * var(--bf));
    line-height: 2.05;
    color: rgba(16, 19, 25, 0.76);
}
.hero__vert {
    position: absolute;
    top: calc(var(--hd-h) + 3vh); right: var(--pad);
    writing-mode: vertical-rl;
    font-family: var(--f-body);
    font-size: calc(11 * var(--u));
    font-weight: 500;
    letter-spacing: 0.34em;
    color: rgba(16, 19, 25, 0.6);
}
.hero__foot {
    position: absolute;
    left: var(--pad); right: var(--pad); bottom: var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.hero__scroll, .hero__est {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-en);
    font-size: calc(10 * var(--u));
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(16, 19, 25, 0.66);
}
.hero__scroll > i {
    display: block;
    width: 52px; height: 1px;
    background: rgba(16, 19, 25, 0.24);
    overflow: hidden;
    position: relative;
}
.hero__scroll > i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--flare);
    transform-origin: left center;
    animation: cue 2.4s var(--e-io) infinite;
}
@keyframes cue {
    0% { transform: scaleX(0); transform-origin: left center; }
    45% { transform: scaleX(1); transform-origin: left center; }
    55% { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(0); transform-origin: right center; }
}

/* =========================================================
   STATEMENT
   ========================================================= */
.wall {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(90px, 18vh, calc(210 * var(--u))) var(--pad);
    border-top: 1px solid var(--line);
    will-change: transform;
}
/* 立体が境目をまたいで続くので、罫線が入ると1枚の場面に見えなくなる。
   1px 引き上げるのは、小数レイアウトで境目に地の色が1行だけ残るのを塞ぐため */
.flow.has-gl .wall { border-top-color: transparent; margin-top: -1px; }
/* SERVICE の地も canvas が描く。ここに色を敷くと缶が隠れる */
.flow.has-gl .track { background: transparent; border-top-color: transparent; }
/* APPROACH の地も canvas が描く（タイポグラフィーの壁）。 */
.flow.has-gl .stack { background: transparent; }
/* ステートメントと SERVICE をまとめて包む。缶が2画面目から3画面目へ
   散って組み直るので、canvas を両方にまたがらせるための入れもの */
.flow {
    position: relative;
    isolation: isolate;
    /* sticky canvas の箱が WORKS 側へはみ出して後続を覆うのを防ぐ。
       hidden は sticky の基準を変えるため、スクロール容器を作らない clip を使う。 */
    overflow: clip;
}
/* ヒーローと同じ場面の続き。視差はシェーダ側でかけるので、
   ここで canvas をずらしてはいけない(境目で地の模様がずれる)。
   画面に貼り付けたまま2セクションぶん送るので sticky。
   sticky は場所を取るので、取ったぶんを負のマージンで戻す
   (戻さないと、ステートメントの上に1画面ぶんの空きができる) */
.flow__gl {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    margin-bottom: -100svh;
    z-index: -1;
    display: block;
}
/* canvas が出せないときの静止版 */
.flow:not(.has-gl) .wall {
    background:
        radial-gradient(120% 90% at 82% 8%, rgba(92, 112, 220, 0.16), transparent 62%),
        radial-gradient(90% 70% at 6% 96%, rgba(255, 68, 22, 0.09), transparent 60%),
        var(--ink-2);
}
.wall__inner {
    display: grid;
    grid-template-columns: 1px minmax(0, 1fr);
    gap: clamp(18px, 3.4vw, calc(46 * var(--u)));
}
/* 「軸」。通過量に応じて朱が伸びる */
.wall__axis {
    position: relative;
    display: block;
    background: var(--line);
}
.wall__axis > i {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--flare);
    transform-origin: top center;
    transform: scaleY(clamp(0, calc((var(--wp, -1) + 1) * 0.62), 1));
}
.wall__body {
    display: grid;
    gap: 0.06em;
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: clamp(1.6rem, 6.4vw, calc(86.4 * var(--u)));
    line-height: 1.16;
    letter-spacing: -0.035em;
}
.wall__body b { font-weight: 900; color: var(--flare); }
/* 行ごとに速度差をつけて横に流す(--s が向きと量) */
.wall__body > span > i {
    display: inline-block;
    font-style: normal;
    /* 左端で切れないよう、振れ幅は px で上限を切る */
    transform: translate3d(calc(var(--wp, 0) * var(--s, 1) * min(2.8vw, calc(34 * var(--u)))), 0, 0);
    will-change: transform;
}
.wall__body > span:nth-child(even) { padding-left: clamp(24px, 8vw, calc(180 * var(--u))); }
.wall__sig {
    margin-top: clamp(28px, 5vh, calc(64 * var(--u)));
    padding-left: clamp(24px, 8vw, calc(180 * var(--u)));
    /* 背景の淡い色に埋もれないよう、見出しと同じ書体・濃い色で置く */
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, calc(29 * var(--u)));
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--milk);
}

/* =========================================================
   SERVICE(横スクロール)
   ========================================================= */
.track {
    position: relative;
    /* JSが横幅から正確な高さを入れる。ここは概算の初期値 */
    height: 260vh;
    background: var(--band);
    border-top: 1px solid var(--line);
}
/* JSが動かない環境では縦並びに戻す */
html:not(.js) .track { height: auto; }
html:not(.js) .track__sticky { position: static; height: auto; padding-bottom: clamp(40px, 8vh, calc(90 * var(--u))); }
html:not(.js) .track__rail { flex-wrap: wrap; width: auto; padding-right: var(--pad); }
html:not(.js) .track__bar { display: none; }
.track__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 4vh, calc(52 * var(--u)));
    overflow: hidden;
    padding: calc(var(--hd-h) + 3vh) 0 var(--pad);
}
.track__head {
    display: grid;
    gap: 12px;
    padding: 0 var(--pad);
}
.track__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.7rem, 4.6vw, calc(56 * var(--u)));
    line-height: 1.1;
    letter-spacing: -0.04em;
}
.track__note { font-size: calc((calc(13.6 * var(--u))) * var(--bf)); color: var(--haze); }

.track__rail {
    display: flex;
    gap: clamp(14px, 1.6vw, calc(26 * var(--u)));
    padding-left: var(--pad);
    width: max-content;
    will-change: transform;
}
.sv {
    position: relative;
    display: flex;
    flex-direction: column;
    width: clamp(230px, 27vw, calc(380 * var(--u)));
    min-height: min(40vh, calc(360 * var(--u)));
    padding: 26px 24px 22px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color 0.5s ease, background-color 0.6s var(--e-out), box-shadow 0.6s var(--e-out);
}
.sv::after {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 2px;
    background: var(--flare);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s var(--e-out);
}
.sv:hover {
    background: var(--ink-3);
    border-color: var(--line-2);
    box-shadow: 0 26px 48px -34px rgba(16, 19, 25, 0.55);
}
.sv:hover::after { transform: scaleX(1); }
.sv__no {
    font-family: var(--f-en);
    font-size: clamp(3.4rem, 6vw, calc(86.4 * var(--u)));
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 0.86;
    color: rgba(16, 19, 25, 0.34);
    font-variation-settings: "wght" 200, "wdth" 100;
    transition: font-variation-settings 0.6s var(--e-out), color 0.5s ease;
}
.sv:hover .sv__no { color: var(--flare); font-variation-settings: "wght" 700, "wdth" 78; }
.sv__body { margin-top: auto; }
.sv__t {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.15rem, 1.9vw, calc(25.6 * var(--u)));
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.sv__d {
    margin-top: 10px;
    font-size: calc((calc(13.6 * var(--u))) * var(--bf));
    line-height: 1.8;
    color: rgba(16, 19, 25, 0.74);
}
.sv__x {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: calc((calc(12.48 * var(--u))) * var(--bf));
    line-height: 1.9;
    color: var(--haze);
    transition: color 0.5s ease;
}
.sv:hover .sv__x { color: rgba(16, 19, 25, 0.7); }
.sv__key {
    position: absolute;
    top: 26px; right: 22px;
    font-family: var(--f-en);
    font-size: calc(9 * var(--u));
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(16, 19, 25, 0.4);
}
.sv--end { display: grid; place-items: center; width: clamp(200px, 20vw, calc(280 * var(--u))); background: none; }
.sv--end a {
    display: grid;
    gap: 14px;
    justify-items: center;
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: calc(15.2 * var(--u));
}
.sv--end i {
    display: block;
    width: 64px; height: 1px;
    background: var(--flare);
    transition: width 0.5s var(--e-out);
}
.sv--end a:hover i { width: 96px; }

.track__bar {
    position: relative;
    height: 1px;
    margin: 0 var(--pad);
    background: var(--line);
}
.track__bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: var(--flare);
    transform: scaleX(0);
    transform-origin: left center;
}

/* =========================================================
   APPROACH(重なるカード)
   ========================================================= */
.stack { padding: clamp(90px, 16vh, calc(200 * var(--u))) var(--pad) clamp(60px, 10vh, calc(120 * var(--u))); }
.stack__head { display: grid; gap: 16px; margin-bottom: clamp(40px, 8vh, calc(90 * var(--u))); }
.stack__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.6rem, 5vw, calc(64 * var(--u)));
    line-height: 1.14;
    letter-spacing: -0.04em;
}
.stack__set { display: grid; gap: clamp(18px, 3vh, calc(30 * var(--u))); }
.stack__card {
    position: sticky;
    top: calc(var(--hd-h) + 8vh);
    display: grid;
    grid-template-columns: clamp(64px, 9vw, calc(132 * var(--u))) minmax(190px, 0.62fr) minmax(0, 1fr);
    gap: 12px clamp(20px, 4vw, calc(64 * var(--u)));
    align-content: center;
    min-height: min(34vh, calc(320 * var(--u)));
    padding: clamp(24px, 4vw, calc(54 * var(--u)));
    background: var(--ink-3);
    border: 1px solid var(--line);
    box-shadow: 0 -18px 40px -34px rgba(16, 19, 25, 0.6);
    transform: scale(calc(1 - (2 - var(--i)) * 0.018));
    transform-origin: top center;
}
/* 番号・見出し・本文をそれぞれの列に固定する(自動配置に任せると本文が数字の列に落ちる) */
.stack__card h3 { grid-column: 2; align-self: start; }
.stack__card p { grid-column: 3; align-self: start; }
.stack__no { align-self: start; }
.stack__no {
    font-family: var(--f-en);
    font-size: clamp(2.6rem, 6vw, calc(89.6 * var(--u)));
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--flare);
}
.stack__card h3 {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.2rem, 2.6vw, calc(32 * var(--u)));
    letter-spacing: -0.02em;
}
.stack__card p {
    max-width: 34em;
    font-size: calc((calc(14.08 * var(--u))) * var(--bf));
    line-height: 2;
    color: rgba(16, 19, 25, 0.74);
}

/* =========================================================
   WORKS
   ========================================================= */
.works { padding: clamp(70px, 12vh, calc(150 * var(--u))) 0; border-top: 1px solid var(--line); }
.works__head {
    display: grid;
    gap: 14px;
    padding: 0 var(--pad);
    margin-bottom: clamp(30px, 6vh, calc(64 * var(--u)));
}
.works__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.7rem, 5vw, calc(57.6 * var(--u)));
    letter-spacing: -0.04em;
    line-height: 1.1;
}
.works__note { max-width: 30em; font-size: calc((calc(13.6 * var(--u))) * var(--bf)); color: var(--haze); }
.works__rail {
    display: flex;
    gap: clamp(14px, 1.6vw, calc(26 * var(--u)));
    padding: 0 var(--pad) 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
}
.works__rail::-webkit-scrollbar { display: none; }
.works__rail.is-dragging, .works__rail.is-free { scroll-snap-type: none; }
.works__rail.is-dragging { cursor: grabbing; }
.wk { flex: 0 0 clamp(220px, 26vw, calc(340 * var(--u))); scroll-snap-align: start; }
.wk__thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    background:
        repeating-linear-gradient(-45deg, rgba(16, 19, 25, 0.07) 0 8px, transparent 8px 16px);
}
.wk__thumb > span {
    font-family: var(--f-en);
    font-size: calc(10 * var(--u));
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--haze);
}
.wk__t {
    margin-top: 14px;
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: calc(15.68 * var(--u));
    letter-spacing: 0.01em;
}

/* =========================================================
   MARQUEE(明るい紙面に対して唯一の暗い帯。ここで一度リズムを断ち切る)
   ========================================================= */
.mq {
    padding: clamp(14px, 2.6vw, calc(30 * var(--u))) 0;
    background: var(--milk);
    overflow: hidden;
    user-select: none;
}
.mq__in {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, calc(34 * var(--u)));
    width: max-content;
    will-change: transform;
}
.mq__i {
    font-family: var(--f-en);
    font-size: clamp(2rem, 6.4vw, calc(86.4 * var(--u)));
    font-weight: 500;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink);
}
.mq__dot {
    flex: none;
    width: clamp(8px, 1.2vw, calc(14 * var(--u)));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--flare);
}

/* =========================================================
   NEWS(実績の位置に置くお知らせ)
   ========================================================= */
.nw { padding: clamp(80px, 14vh, calc(170 * var(--u))) var(--pad) clamp(64px, 11vh, calc(130 * var(--u))); }
.nw__list { border-top: 1px solid var(--line); }
.nw__row {
    display: grid;
    grid-template-columns: clamp(110px, 12vw, calc(180 * var(--u))) minmax(0, 1fr) calc(48 * var(--u));
    align-items: baseline;
    gap: clamp(14px, 2.4vw, calc(34 * var(--u)));
    padding: clamp(20px, 2.6vw, calc(32 * var(--u))) 0;
    border-bottom: 1px solid var(--line);
    background: var(--ink);
    transition: background-color 0.6s var(--e-out);
}
.nw__row:hover { background: var(--ink-2); }
.nw__date {
    font-family: var(--f-en);
    font-size: calc(13 * var(--u));
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--haze);
}
.nw__t {
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, calc(21 * var(--u)));
    line-height: 1.55;
    background-image: linear-gradient(var(--flare), var(--flare));
    background-size: 0% 1px;
    background-position: left bottom 0.06em;
    background-repeat: no-repeat;
    transition: background-size 0.7s var(--e-out);
}
.nw__row:hover .nw__t { background-size: 100% 1px; }
.nw__arrow {
    align-self: center;
    height: 1px;
    background: var(--milk);
    transform-origin: right;
    transform: scaleX(0.5);
    transition: transform 0.6s var(--e-out), background-color 0.4s ease;
}
.nw__row:hover .nw__arrow { transform: scaleX(1); background: var(--flare); }

/* =========================================================
   COLUMN
   ========================================================= */
.col { padding: clamp(80px, 14vh, calc(170 * var(--u))) var(--pad); }
.col__head {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(34px, 7vh, calc(76 * var(--u)));
}
.col__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.6rem, 4.6vw, calc(54.4 * var(--u)));
    letter-spacing: -0.04em;
    line-height: 1.12;
}
.col__head .ln { justify-self: start; }
/* 区切りは各行の罫線で引く。gap + 背景色にすると、出現前の行の位置に帯が残る */
.col__grid { display: grid; border-top: 1px solid var(--line); will-change: transform; }
.cd {
    position: relative;
    display: grid;
    grid-template-columns: clamp(52px, 6vw, calc(90 * var(--u))) clamp(120px, 16vw, calc(230 * var(--u))) minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, calc(34 * var(--u)));
    align-items: start;
    padding: clamp(20px, 3vw, calc(38 * var(--u))) 0;
    border-bottom: 1px solid var(--line);
    background: var(--ink);
    transition: background-color 0.6s var(--e-out);
}
.cd:hover { background: var(--ink-2); }
.cd__no {
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--haze);
    padding-top: 0.5em;
}
.cd__thumb { overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-2); }
.cd__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: grayscale(1) contrast(1.05);
    transition: transform 1s var(--e-out), filter 0.7s ease;
}
.cd:hover .cd__thumb img { transform: scale(1.08); filter: none; }
.cd__date {
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    letter-spacing: 0.14em;
    color: var(--haze);
}
.cd__t {
    margin-top: 8px;
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(1.05rem, 1.8vw, calc(24 * var(--u)));
    line-height: 1.5;
    letter-spacing: -0.01em;
    background-image: linear-gradient(var(--flare), var(--flare));
    background-size: 0% 1px;
    background-position: left bottom 0.06em;
    background-repeat: no-repeat;
    transition: background-size 0.7s var(--e-out);
}
.cd:hover .cd__t { background-size: 100% 1px; }
.cd__x {
    margin-top: 10px;
    max-width: 44em;
    font-size: calc((calc(13.44 * var(--u))) * var(--bf));
    line-height: 1.95;
    color: rgba(16, 19, 25, 0.66);
}
.col__empty { color: var(--haze); }

/* =========================================================
   CTA
   ========================================================= */
.cta {
    display: grid;
    gap: clamp(14px, 2.4vh, calc(26 * var(--u)));
    justify-items: start;
    padding: clamp(90px, 18vh, calc(220 * var(--u))) var(--pad);
    border-top: 1px solid var(--line);
}
.cta__title {
    font-family: var(--f-jp);
    font-weight: 900;
    font-size: clamp(2rem, 7.6vw, calc(102.4 * var(--u)));
    line-height: 1.06;
    letter-spacing: -0.045em;
}
.cta__lead { max-width: 26em; font-size: calc((calc(14.08 * var(--u))) * var(--bf)); color: rgba(16, 19, 25, 0.72); }
.cta__grid {
    width: 100%;
    margin-top: clamp(6px, 1.6vh, calc(20 * var(--u)));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    gap: clamp(30px, 5vw, calc(90 * var(--u)));
    align-items: start;
}
.cta__left { display: grid; justify-items: start; gap: clamp(14px, 2.4vh, calc(26 * var(--u))); }
.cta__side { display: grid; gap: 14px; }
.cta__side-lab {
    font-size: calc(9.92 * var(--u));
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--haze);
}
.cta__list { border-top: 1px solid var(--line); }
.cta__list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
    font-family: var(--f-jp);
    font-size: calc((calc(14.72 * var(--u))) * var(--bf));
    color: rgba(16, 19, 25, 0.8);
}
.cta__list li::before {
    content: "";
    flex: none;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--flare);
    transform: translateY(-0.28em);
}
@media (max-width: 860px) {
    .cta__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
.big {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: clamp(10px, 2vh, calc(24 * var(--u)));
    padding: 22px 34px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--f-jp);
    font-weight: 700;
    font-size: calc(15.36 * var(--u));
    letter-spacing: 0.04em;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform 0.45s var(--e-out), color 0.5s ease, border-color 0.5s ease;
}
.big::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--flare);
    transform: translateY(101%);
    transition: transform 0.6s var(--e-io);
}
.big:hover { color: #fff; border-color: var(--flare); }
.big:hover::before { transform: none; }
.big > i {
    display: block;
    width: 46px; height: 1px;
    background: currentColor;
    transition: width 0.5s var(--e-out);
}
.big:hover > i { width: 70px; }

/* =========================================================
   FOOTER
   ========================================================= */
.ft { padding: clamp(40px, 7vh, calc(90 * var(--u))) var(--pad) calc(var(--pad) + 40px); border-top: 1px solid var(--line); }
/* フッターの大きいロゴ。字を書いてグラデーションを流し込むのではなく、
   ロゴの形でグラデーションを抜く。mask-image は同一文書内の url(#id) が
   効かないブラウザがあるので、外部ファイル(automation/src/logoSvg.js が
   app/lib/logo-paths.php から書き出す)を参照する。
   マスクなので中身は空でよく、読み上げからは外してある */
.ft__word {
    width: min(78vw, calc(1080 * var(--u)));
    aspect-ratio: 410.09 / 100.52;
    background: var(--chrome);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-mask: url("../img/logo.svg") no-repeat left center / contain;
    mask: url("../img/logo.svg") no-repeat left center / contain;
    transition: background-position 1.4s var(--e-out);
}
.ft:hover .ft__word { background-position: 100% 50%; }
.ft__rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin-top: clamp(28px, 5vh, calc(60 * var(--u)));
    background: var(--line);
}
.ft__rows dl { background: var(--ink); padding: 18px 20px; }
.ft__rows dt {
    font-family: var(--f-en);
    font-size: calc(10 * var(--u));
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--haze);
}
.ft__rows dd { margin: 6px 0 0; font-size: calc((calc(14.08 * var(--u))) * var(--bf)); }
.ft__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: clamp(24px, 4vh, calc(46 * var(--u)));
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    letter-spacing: 0.12em;
    color: var(--haze);
}
.ft__end nav { display: flex; gap: 18px; }
.ft__end nav a { text-transform: uppercase; transition: color 0.3s ease; }
.ft__end nav a:hover { color: var(--milk); }

/* パターン切り替え(比較用) */
.pat {
    position: fixed;
    z-index: 110;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.72);
    font-family: var(--f-en);
    font-size: calc(11 * var(--u));
    letter-spacing: 0.14em;
}
.pat a { padding: 7px 15px; color: var(--haze); }
.pat a.is-current { background: var(--milk); color: var(--ink); }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 900px) {
    :root { --hd-h: 62px; }
    .hd__nav, .hd__cta { display: none; }
    .burger { display: block; }
    .hero__vert { display: none; }
    .cd { grid-template-columns: 42px minmax(0, 1fr); }
    .cd__thumb { grid-column: 2; aspect-ratio: 16 / 9; }
    .stack__card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .stack__card h3, .stack__card p { grid-column: 1; }
    .stack__card p { margin-top: 4px; }
}
@media (max-width: 600px) {
    body { font-size: calc(14 * var(--u)); }
    .hero { min-height: 92svh; }
    .hero__ghost { font-size: 34vw; }
    .hero__rules { grid-template-columns: repeat(2, 1fr); }
    .hero__est { display: none; }
    .wall__body > span:nth-child(even) { padding-left: 8vw; }
    .wall__sig { padding-left: 8vw; }
    /* 縦画面は文の下に箱を置く。画面ぶんの高さがないと箱が切れる */
    .flow.has-gl .wall { min-height: 100svh; display: grid; align-content: center; }
    .sv { min-height: 300px; }
    .stack__card { top: calc(var(--hd-h) + 4vh); }
    .ft__word { width: 100%; }
}

/* =========================================================
   動きを止める指定(JSが html.reduce-motion を付ける)
   ========================================================= */
.reduce-motion .boot { display: none !important; }
.reduce-motion .pt, .reduce-motion .pt-label { display: none !important; }
.reduce-motion [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.reduce-motion .kin .ch { transform: none !important; transition: none !important; }
.reduce-motion .mq__in { transform: none !important; }
.reduce-motion .hero__scroll > i::after { animation: none; transform: scaleX(1); }
.reduce-motion [data-skew] { transform: none !important; }
.reduce-motion [data-magnetic] { transform: none !important; }
/* canvas は消さない。消すと缶ごと絵が無くなる。止めるのは動きだけ(JS側で静止) */
.reduce-motion .wall__body > span > i { transform: none !important; }
.reduce-motion .wall__axis > i { transform: scaleY(1); }
/* 横スクロールのトラックは縦並びに戻す */
.reduce-motion .track { height: auto; }
.reduce-motion .track__sticky { position: static; height: auto; padding-bottom: clamp(40px, 8vh, calc(90 * var(--u))); }
.reduce-motion .track__rail { flex-wrap: wrap; width: auto; padding-right: var(--pad); transform: none !important; }
.reduce-motion .sv { width: min(100%, calc(380 * var(--u))); }
.reduce-motion .track__bar { display: none; }
.reduce-motion .stack__card { position: static; transform: none; }


/* 詳細ページがあるサービスだけ。カード全体を押せるようにする */
.sv__go {
    display: inline-block;
    margin-top: 14px;
    font-size: calc(12 * var(--u));
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--flare);
}
.sv__go::before { content: ""; position: absolute; inset: 0; z-index: 1; }