@charset "UTF-8";

/* =========================================================
   pallas LLC. — main stylesheet
   方針: 紙のようなグレージュ + 濃紺 + 金のヘアライン。
   見出しは明朝、本文はゴシック、英字ラベルは広めのレタースペース。
   動きは「ゆっくり・重く・一方向」。跳ねる動きは使わない。
   ========================================================= */

/* ---------- tokens ---------- */
:root {
    --paper:        #f4f2ed;
    --paper-deep:   #e9e5dc;
    --ink:          #16181f;
    --ink-soft:     #5c5e69;
    --ink-faint:    #8d8f98;
    --navy:         #0c0f16;
    --navy-soft:    #151a25;
    --gold:         #bd9550;
    --line:         rgba(22, 24, 31, 0.14);
    --line-strong:  rgba(22, 24, 31, 0.3);
    --line-light:   rgba(255, 255, 255, 0.18);

    /* 旧トークン名の互換(admin.css・過去のインラインstyle用) */
    --color-bg: var(--paper);
    --color-ink: var(--ink);
    --color-ink-soft: var(--ink-soft);
    --color-navy: var(--navy);
    --color-accent: var(--gold);
    --color-line: var(--line);

    --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --font-latin: "Fustat", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --wrap: 1180px;
    --gutter: clamp(22px, 5vw, 56px);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
    --header-h: 84px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.9;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
section { position: relative; }

/* ---------- utilities ---------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--gold);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.66); }

.section__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.42;
    letter-spacing: 0.02em;
    margin-top: 22px;
}
.section__desc {
    margin-top: 22px;
    max-width: 34em;
    color: var(--ink-soft);
    font-size: 0.95rem;
}
.section__head { max-width: 46em; }
.section__head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    max-width: none;
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 19px 38px;
    border: 1px solid var(--line-strong);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    isolation: isolate;
}
.btn > span { position: relative; z-index: 1; transition: color 0.5s var(--ease); }
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform 0.55s var(--ease);
}
.btn:hover::after { transform: translateY(0); }
.btn:hover > span { color: var(--paper); }
.btn--light { border-color: var(--line-light); color: #fff; }
.btn--light::after { background: var(--paper); }
.btn--light:hover > span { color: var(--navy); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.link-arrow > span {
    display: block;
    width: 34px;
    height: 1px;
    background: currentColor;
    overflow: hidden;
    text-indent: -999em;
    transition: width 0.45s var(--ease);
}
.link-arrow:hover > span { width: 52px; }
.link-arrow--light { color: #fff; }

/* =========================================================
   モーション基盤(JSが動く環境=html.js だけ初期状態を隠す)
   ========================================================= */
.mask-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask-line > em { display: block; font-style: normal; }

.js .mask-line > em {
    transform: translateY(110%);
    transition: transform 1.15s var(--ease);
}
.js .mask-line.is-in > em { transform: none; }
.js .mask-line:nth-of-type(2) > em { transition-delay: 0.13s; }
.js .mask-line:nth-of-type(3) > em { transition-delay: 0.26s; }

.js [data-anim="fade"] { opacity: 0; transition: opacity 1.1s var(--ease); }
.js [data-anim="fade"].is-in { opacity: 1; }

.js [data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js [data-anim="fade-up"].is-in { opacity: 1; transform: none; }

.js [data-anim="row"] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js [data-anim="row"].is-in { opacity: 1; transform: none; }

.js [data-anim="draw"] {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s var(--ease-soft);
}
.js [data-anim="draw"].is-in { transform: scaleX(1); }

.js [data-anim="chars"] .ch {
    opacity: 0.14;
    transition: opacity 0.7s ease;
    transition-delay: calc(var(--i) * 24ms);
}
.js [data-anim="chars"].is-in .ch { opacity: 1; }

/* 動きを止める指定。?motion=off のときだけJSが html.reduce-motion を付ける。
   OSの「動きを減らす」設定では止めない(見る人の環境に依存させない) */
html.reduce-motion { scroll-behavior: auto; }
.reduce-motion .mask-line > em,
.reduce-motion [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
.reduce-motion [data-anim="chars"] .ch { opacity: 1 !important; }
.reduce-motion [data-anim="draw"] { transform: scaleX(1) !important; }
.reduce-motion .hero__media img { animation: none !important; transform: scale(1.02) !important; }
.reduce-motion .scroll-cue__rail > span { animation: none; transform: scaleX(1); }
.reduce-motion .curtain { display: none !important; }
.reduce-motion .cursor { display: none !important; }
.reduce-motion .hero__glow { display: none; }
.reduce-motion .hero__media { transform: none !important; transition: none; }
.reduce-motion .marquee__inner { transform: none !important; }
.reduce-motion [data-magnetic] { transform: none !important; transition: none; }
.reduce-motion .service-row__fill { display: none; }
.reduce-motion .service-row:hover .service-row__title { color: inherit; }
.reduce-motion .service-row:hover .service-row__desc { color: var(--ink-soft); }


/* =========================================================
   入場 / 退場のカーテン
   ========================================================= */
.curtain {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    background: var(--navy);
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.9s var(--ease);
}
.js .curtain { display: grid; }
/* カーテンの真ん中に出るロゴ(フクロウ + Pallas)。
   view.php の pallas_logo が吐く SVG で、塗りは currentColor */
.curtain__mark {
    display: block;
    width: min(44vw, 320px);
    height: auto;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.js.is-entering .curtain__mark { opacity: 1; transform: none; }
/* 退場時は下から閉じる */
.js.is-leaving .curtain { clip-path: inset(0 0 0 0); transition-duration: 0.55s; }
.js.is-leaving .curtain__mark { opacity: 0.9; transform: none; transition-duration: 0.4s; }
/* 入場完了 */
.js.is-ready .curtain { clip-path: inset(0 0 100% 0); pointer-events: none; }
.js.is-ready .curtain__mark { opacity: 0; transform: translateY(-12px); }
/* カーテンが上がるまで本文の演出は待たせる */
.js.is-entering body { overflow: hidden; }

/* =========================================================
   カスタムカーソル(マウス環境のみ)
   ========================================================= */
.cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 150;
    display: none;
    place-items: center;
    width: 26px; height: 26px;
    margin: -13px 0 0 -13px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease, width 0.45s var(--ease), height 0.45s var(--ease),
                margin 0.45s var(--ease), background-color 0.45s var(--ease), border-color 0.45s var(--ease);
    will-change: transform;
}
.has-cursor .cursor { display: grid; }
.has-cursor.is-cursor-visible .cursor { opacity: 1; }
.cursor__label {
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.4s var(--ease);
    white-space: nowrap;
}
.has-cursor.is-cursor-active .cursor {
    width: 88px; height: 88px;
    margin: -44px 0 0 -44px;
    background: var(--gold);
    border-color: var(--gold);
}
.has-cursor.is-cursor-active .cursor__label { opacity: 1; transform: none; }
/* 押している間は少し縮める */
.has-cursor.is-cursor-down .cursor { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.has-cursor.is-cursor-down.is-cursor-active .cursor { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
/* ラベルを出す要素の上では既定のポインタを隠す */
.has-cursor [data-cursor] { cursor: none; }
.has-cursor [data-cursor] * { cursor: none; }
/* カーソルに引き寄せられるボタン。追従を遅らせて磁力の感じを作る */
.has-cursor [data-magnetic] { transition: transform 0.4s var(--ease-soft); will-change: transform; }

/* =========================================================
   ヘッダー
   ========================================================= */
.progress {
    position: fixed;
    top: 0; left: 0;
    z-index: 60;
    width: 100%;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.site-header {
    position: fixed;
    top: 0; left: 0;
    z-index: 50;
    width: 100%;
    color: #fff;
    border-bottom: 1px solid transparent;
    transition: transform 0.6s var(--ease), background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    transition: height 0.5s var(--ease);
}
.site-header.is-solid {
    background: rgba(244, 242, 237, 0.92);
    backdrop-filter: blur(14px);
    color: var(--ink);
    border-bottom-color: var(--line);
    --header-h: 68px;
}
.site-header.is-hidden { transform: translateY(-102%); }
/* 下層ページは背景が濃紺のヒーローなので、最初から白抜きで問題ない */

.brand { display: flex; align-items: center; gap: 12px; }
/* ロゴはフクロウ + Pallas。名刺の入稿データから取り出した実物の字形
   (app/lib/logo-paths.php / view.php の pallas_logo)。
   塗りは currentColor なので、色はヘッダーの文字色に従う */
.brand__logo {
    display: block;
    height: 1.9rem;
    width: auto;
}
.brand__ja {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.brand__en {
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
}

.site-nav { display: flex; align-items: center; gap: 38px; }
.site-nav a {
    position: relative;
    padding-block: 6px;
    font-family: var(--font-latin);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.site-nav a:not(.site-nav__cta)::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
}
.site-nav a:not(.site-nav__cta):hover::after { transform: scaleX(1); }
.site-nav__cta {
    padding: 12px 24px;
    border: 1px solid currentColor;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: none;
    transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.site-header:not(.is-solid) .site-nav__cta:hover { background: #fff; color: var(--navy); }
.site-header.is-solid .site-nav__cta:hover { background: var(--ink); color: var(--paper); }

.nav-toggle {
    display: none;
    position: relative;
    z-index: 2;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.nav-toggle span {
    position: absolute;
    left: 10px;
    width: 24px; height: 1px;
    background: currentColor;
    transition: transform 0.45s var(--ease), opacity 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero {
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    padding-bottom: clamp(64px, 11vh, 120px);
    background: var(--navy);
    color: #fff;
    overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 68% center;
    transform: scale(1.02);
}
.js .hero__media img {
    animation: heroIn 2.4s var(--ease) forwards, heroDrift 26s 2.4s ease-in-out infinite alternate;
}
@keyframes heroIn {
    from { transform: scale(1.13); opacity: 0.35; }
    to   { transform: scale(1.02); opacity: 1; }
}
@keyframes heroDrift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.07) translateX(-1.2%); }
}

.hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(8, 11, 17, 0.95) 0%, rgba(8, 11, 17, 0.74) 38%, rgba(8, 11, 17, 0.16) 66%, rgba(8, 11, 17, 0.4) 100%),
        linear-gradient(to top, rgba(8, 11, 17, 0.6) 0%, rgba(8, 11, 17, 0) 42%);
}
/* マウスを追う光。--mx/--my はJSが入れる */
.hero__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: radial-gradient(34vw 34vw at var(--mx, 50%) var(--my, 50%),
        rgba(189, 149, 80, 0.32) 0%, rgba(189, 149, 80, 0.13) 36%, rgba(189, 149, 80, 0) 70%);
    transition: opacity 0.7s ease;
    mix-blend-mode: screen;
    pointer-events: none;
}
.hero.is-pointing .hero__glow { opacity: 1; }
.hero__inner { position: relative; z-index: 2; }
/* マウス位置に合わせた微妙な視差(JSが --tx/--ty を入れる) */
.hero__media { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); transition: transform 1.2s var(--ease-soft); }

.hero__title {
    margin-top: 30px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2.6rem, 7.2vw, 5.4rem);
    line-height: 1.24;
    letter-spacing: 0.02em;
}
.hero__lead {
    margin-top: 34px;
    max-width: 30em;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
}
.hero__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 54px;
}

.scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.scroll-cue__rail {
    position: relative;
    display: block;
    width: 74px; height: 1px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.scroll-cue__rail > span {
    position: absolute;
    inset: 0;
    background: var(--gold);
    animation: cue 2.6s var(--ease-soft) 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 { padding: clamp(96px, 15vh, 180px) 0; }
.statement__body {
    max-width: 22em;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.45rem, 3.1vw, 2.35rem);
    line-height: 1.95;
    letter-spacing: 0.04em;
}
.statement__body .ch { display: inline; }

/* =========================================================
   サービス
   ========================================================= */
.services {
    padding: clamp(88px, 12vh, 150px) 0;
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, var(--paper), var(--paper-deep));
}
.services__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.services__head { position: sticky; top: calc(var(--header-h) + 48px); }

.service-row {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    padding: 34px 0 30px;
    border-top: 1px solid var(--line);
}
.services__list > .service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row__index {
    padding-top: 0.65em;
    font-family: var(--font-latin);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    transition: color 0.5s var(--ease);
}
.service-row__title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.16rem, 1.9vw, 1.5rem);
    letter-spacing: 0.04em;
    transition: transform 0.6s var(--ease);
}
.service-row__lead {
    margin-top: 12px;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--ink);
}
.service-row__desc {
    margin-top: 12px;
    max-width: 38em;
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.95;
}
.service-row__rule {
    position: absolute;
    left: 0; top: -1px;
    z-index: 2;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s var(--ease);
}
/* ホバーで濃紺が左から流れ込み、文字が反転する */
.service-row__fill {
    position: absolute;
    inset: 0 -24px;
    z-index: 0;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.72s var(--ease);
}
/* 塗りと罫線は絶対配置のまま。中身だけ重ね順を上げる */
.service-row > *:not(.service-row__fill):not(.service-row__rule) { position: relative; z-index: 1; }
.service-row:hover .service-row__fill { transform: scaleX(1); }
.service-row:hover .service-row__rule { transform: scaleX(1); }
.service-row:hover .service-row__index { color: #d9b87c; }
.service-row:hover .service-row__title { transform: translateX(10px); color: #fff; }
.service-row:hover .service-row__desc { color: rgba(255, 255, 255, 0.72); }
.service-row__title, .service-row__desc { transition: color 0.5s var(--ease), transform 0.6s var(--ease); }

/* =========================================================
   フィロソフィ(濃紺・パララックス)
   ========================================================= */
.philosophy {
    padding: clamp(120px, 22vh, 240px) 0;
    background: var(--navy);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.philosophy__media { position: absolute; inset: -14% 0; z-index: -2; }
.philosophy__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.75;
    will-change: transform;
}
.philosophy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(85deg, rgba(8, 11, 17, 0.93) 0%, rgba(8, 11, 17, 0.68) 52%, rgba(8, 11, 17, 0.25) 100%);
}
/* .wrap と併用するため max-width は上書きしない(中央に寄ってしまう) */
.philosophy__title {
    max-width: 24em;
    margin-top: 26px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2.7rem);
    line-height: 1.6;
    letter-spacing: 0.03em;
}
.philosophy__body {
    margin-top: 30px;
    max-width: 34em;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.96rem;
}

/* =========================================================
   進め方
   ========================================================= */
.approach { padding: clamp(88px, 13vh, 160px) 0; }
.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
    margin-top: clamp(52px, 7vw, 86px);
    padding-top: 46px;
}
.steps__track {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: var(--gold);
}
.step { position: relative; }
.step::before {
    content: "";
    position: absolute;
    top: -49px; left: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
}
.step__no {
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.step__title {
    margin-top: 14px;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.28rem;
    letter-spacing: 0.04em;
}
.step__desc {
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.95;
}

/* =========================================================
   実績(実データ投入前のプレースホルダー)
   ========================================================= */
.works {
    padding: clamp(88px, 13vh, 160px) 0;
    border-top: 1px solid var(--line);
    background: var(--paper-deep);
    overflow: hidden;
}
.works__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}
.works__note {
    max-width: 24em;
    padding-bottom: 6px;
    color: var(--ink-soft);
    font-size: 0.86rem;
}
.works__rail {
    /* 画面幅いっぱいに流すが、カードの先頭は .wrap の内容と揃える */
    --rail-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
    display: flex;
    gap: 24px;
    margin-top: clamp(40px, 6vw, 72px);
    padding-inline: var(--rail-pad);
    padding-bottom: 12px;
    scroll-padding-inline-start: var(--rail-pad);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
}
.works__rail::-webkit-scrollbar { display: none; }
.works__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/* ホイール操作中はスナップを外す(近接スナップに引き戻されないように) */
.works__rail.is-free { scroll-snap-type: none; }
.work-card { flex: 0 0 clamp(240px, 27vw, 330px); scroll-snap-align: start; }
.work-card__thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line-strong);
    background: repeating-linear-gradient(-45deg, rgba(22, 24, 31, 0.04) 0 10px, rgba(22, 24, 31, 0) 10px 20px);
}
.work-card__soon {
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--ink-faint);
}
.work-card__title {
    margin-top: 18px;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.05em;
}

/* 横スクロール棚の操作UI */
.rail-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}
.rail-meta__count {
    font-family: var(--font-latin);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.rail-meta__bar {
    position: relative;
    flex: 1;
    max-width: 260px;
    height: 1px;
    background: var(--line-strong);
}
.rail-meta__bar > span {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0.25);
    transform-origin: left center;
}
.rail-meta__hint {
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}

/* =========================================================
   マーキー(無限に流れる英字)
   ========================================================= */
.marquee {
    overflow: hidden;
    padding: 26px 0;
    border-block: 1px solid var(--line);
    background: var(--paper);
    user-select: none;
}
.marquee__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    will-change: transform;
}
.marquee__item {
    font-family: var(--font-latin);
    font-weight: 500;
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--ink-faint);
    white-space: nowrap;
}
.marquee__sep {
    font-family: var(--font-latin);
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    color: var(--gold);
}

/* =========================================================
   お知らせ(トップと /news で共通の行)
   ========================================================= */
.news-section {
    padding: clamp(88px, 13vh, 160px) 0;
    border-top: 1px solid var(--line);
    background: var(--paper-deep);
}
.news-list {
    margin-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--line);
}
.page-body .news-list { margin-top: 0; }
.news-row {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr) 28px;
    align-items: baseline;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}
.news-row__date {
    font-family: var(--font-latin);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.news-row__title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
    transition: color 0.4s ease;
}
.news-row__arrow {
    align-self: center;
    height: 1px;
    background: var(--ink);
    transition: background-color 0.4s ease, transform 0.5s var(--ease);
    transform-origin: right;
    transform: scaleX(0.6);
}
.news-row:hover .news-row__title { color: var(--gold); }
.news-row:hover .news-row__arrow { background: var(--gold); transform: scaleX(1); }
.news-pager { display: flex; justify-content: space-between; margin-top: 40px; }
@media (max-width: 720px) {
    .news-row { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 14px; padding: 20px 0; }
    .news-row__date { grid-column: 1 / -1; }
}

/* =========================================================
   コラム
   ========================================================= */
.column-section { padding: clamp(88px, 13vh, 160px) 0; }
.column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(30px, 3.4vw, 48px);
    margin-top: clamp(46px, 6vw, 76px);
}
.column-card { display: block; }
.column-card__thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--paper-deep) center / cover no-repeat;
}
.column-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease), filter 0.7s ease;
}
.column-card:hover .column-card__thumb img { transform: scale(1.06); filter: saturate(1.06); }
.column-card__body { padding-top: 22px; }
.column-card__date,
.column-card__tag {
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.column-card__title {
    margin-top: 12px;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.65;
    letter-spacing: 0.03em;
    transition: color 0.4s ease;
}
.column-card:hover .column-card__title { color: var(--gold); }
.column-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.9;
}
.column-empty { margin-top: 40px; color: var(--ink-soft); }

/* =========================================================
   CTA
   ========================================================= */
.cta {
    padding: clamp(96px, 16vh, 190px) 0;
    background: var(--navy);
    color: #fff;
    text-align: center;
}
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta__title {
    margin-top: 26px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 4.2vw, 3.1rem);
    line-height: 1.45;
    letter-spacing: 0.04em;
}
.cta__desc {
    margin: 26px 0 44px;
    max-width: 32em;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.94rem;
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer {
    padding: clamp(64px, 9vh, 108px) 0 34px;
    background: var(--navy-soft);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}
.site-footer .brand__ja { color: #fff; font-size: 1.16rem; }
.site-footer__meta { margin-top: 10px; color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; }
.site-footer__nav { display: flex; flex-direction: column; gap: 14px; }
.site-footer__nav a {
    font-family: var(--font-latin);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.4s ease;
}
.site-footer__nav a:hover { color: var(--gold); }
/* フッターの大きいロゴ。地に沈めた透かしなので、色は薄い白1色。
   形は CSS の mask で抜く(automation/src/logoSvg.js が
   app/lib/logo-paths.php から書き出した SVG を参照する)。
   マスクなので中身は空でよく、読み上げからは外してある */
.site-footer__wordmark {
    margin-top: clamp(52px, 8vw, 92px);
    width: min(100%, 46rem);
    aspect-ratio: 410.09 / 100.52;
    background: rgba(255, 255, 255, 0.07);
    -webkit-mask: url("../img/logo.svg") no-repeat left center / contain;
    mask: url("../img/logo.svg") no-repeat left center / contain;
    user-select: none;
}
.site-footer__copy {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line-light);
    font-family: var(--font-latin);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.45);
}

/* =========================================================
   下層ページ
   ========================================================= */
.page-hero {
    padding: calc(var(--header-h) + clamp(76px, 13vh, 150px)) 0 clamp(56px, 8vh, 96px);
    background: var(--navy);
    color: #fff;
}
.page-hero__title {
    margin-top: 26px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.3rem);
    line-height: 1.34;
    letter-spacing: 0.03em;
}
.page-hero__lead {
    margin-top: 26px;
    max-width: 34em;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.96rem;
}
/* LPのファーストビュー。メイン画像があれば背景に敷き、無ければ通常どおり紺一色。
   画像は暗い層をかぶせて、上に載る白文字が必ず読める明るさに落としている。 */
.page-hero--lp {
    padding: calc(var(--header-h) + clamp(96px, 18vh, 200px)) 0 clamp(76px, 12vh, 140px);
    background-image: linear-gradient(rgba(12, 15, 22, 0.72), rgba(12, 15, 22, 0.82)), var(--page-hero-image, none);
    background-size: cover;
    background-position: center;
}
.page-hero__cta { margin-top: 38px; }

.page-hero__meta {
    margin-top: 22px;
    font-family: var(--font-latin);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}
.page-body { padding: clamp(64px, 9vh, 110px) 0 clamp(80px, 12vh, 140px); }

.article-body { max-width: 46em; }
.article-body > * + * { margin-top: 1.55em; }
.article-body h2 {
    margin-top: 2.6em;
    padding-top: 1.1em;
    border-top: 1px solid var(--line);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.55;
    letter-spacing: 0.03em;
}
.article-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body h3 {
    margin-top: 2.2em;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
}
.article-body p { font-size: 0.98rem; line-height: 2.05; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body ul > li { list-style: disc; }
.article-body ol > li { list-style: decimal; }
.article-body li + li { margin-top: 0.6em; }
.article-body blockquote {
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--gold);
    color: var(--ink-soft);
}
.article-body a { border-bottom: 1px solid var(--gold); }
.article-body strong { font-weight: 700; }
.article-hero__image { margin-top: 44px; }
.article-hero__image img { width: 100%; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.spec-table th,
.spec-table td {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 0.94rem;
}
.spec-table th {
    width: 10em;
    font-weight: 500;
    color: var(--ink-faint);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
}

/* フォーム */
.form { max-width: 42em; }
.form__row { display: block; margin-top: 30px; }
.form__label {
    display: block;
    margin-bottom: 10px;
    color: var(--ink-soft);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
}
.form__label .req { margin-left: 6px; color: var(--gold); font-size: 0.76rem; }
.form input[type="text"],
.form input[type="email"],
.form textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: #fff;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.form input:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(189, 149, 80, 0.14);
}
.form textarea { resize: vertical; line-height: 1.9; }
.form__submit { margin-top: 38px; }
.form__submit .btn { border-color: var(--ink); background: none; cursor: pointer; }
.form-note {
    margin-top: 18px;
    padding: 16px 20px;
    border-left: 2px solid #b8433c;
    background: rgba(184, 67, 60, 0.06);
    font-size: 0.88rem;
}
.form-done { padding: 40px; border: 1px solid var(--line-strong); background: #fff; }
.form-done__title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
}
.form-done p { margin-top: 14px; color: var(--ink-soft); font-size: 0.92rem; }

/* =========================================================
   タブレット
   ========================================================= */
@media (max-width: 900px) {
    .services__grid { grid-template-columns: 1fr; }
    .services__head { position: static; }
    .services__list { margin-top: 20px; }
    .steps { grid-template-columns: 1fr; gap: 42px; padding-top: 38px; }
    .step::before { top: -41px; }
    .section__head--split { flex-direction: column; align-items: flex-start; gap: 20px; }
    .works__head { flex-direction: column; align-items: flex-start; gap: 18px; }
    .link-arrow { margin-top: 24px; }
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width: 640px) {
    :root { --header-h: 68px; }
    body { font-size: 15px; }

    .nav-toggle { display: block; }
    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 30px;
        padding: 0 var(--gutter) 12vh;
        background: var(--paper);
        color: var(--ink);
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        transition: clip-path 0.6s var(--ease), visibility 0.6s;
    }
    .site-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
    .site-nav a { font-size: 14px; }
    .site-nav__cta { width: 100%; text-align: center; }
    .site-header.is-nav-open { background: var(--paper); color: var(--ink); }

    .hero { min-height: 92svh; }
    .hero__media img { object-position: 74% center; }
    .hero__title { font-size: clamp(2.1rem, 10.5vw, 3rem); }
    .hero__foot { flex-direction: column; align-items: flex-start; gap: 30px; margin-top: 44px; }

    .statement__body { max-width: none; }

    .service-row { grid-template-columns: 46px minmax(0, 1fr); padding: 26px 0 24px; }
    .service-row:hover .service-row__title { transform: none; }

    .works__rail { gap: 16px; }
    .work-card { flex-basis: 74vw; }

    .btn { width: 100%; justify-content: center; }
    .site-footer__inner { flex-direction: column; gap: 36px; }
    .site-footer__nav { flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
    .form-done { padding: 28px 22px; }
}

/* PC 用(P2)の部品。このファイルは 720px 以下でだけ読み込まれるので、常に隠す */
.pc-only { display: none !important; }

/* サービス一覧で、詳細ページがある行だけに出すリンク */
.service-row__go { position: relative; z-index: 1; margin-top: 14px; }

/* ---------- AI導入・研修ページ(/services/ai) ---------- */
.split-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.split-card { padding: 24px 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.45); }
.split-card h3 { margin-top: 8px; }
.split-card p { margin-top: 10px; font-size: 0.92rem; line-height: 1.9; }
.split-card__tag { font-family: var(--font-latin); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

.article-body ol.steps { padding-left: 0; counter-reset: step; border-top: 1px solid var(--line); }
.article-body ol.steps > li { list-style: none; counter-increment: step; display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 8px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.article-body ol.steps > li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--font-latin); font-size: 1.3rem; line-height: 1.3; color: var(--gold); }
.steps strong { font-weight: 700; }
.steps span { margin-top: 4px; font-size: 0.92rem; line-height: 1.9; color: var(--ink-soft); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.plan { display: flex; flex-direction: column; padding: 22px 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.45); }
.plan__name { font-family: var(--font-latin); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.article-body .plan__price { margin-top: 8px; font-size: 0.9rem; line-height: 1.4; }
.plan__price b { font-family: var(--font-latin); font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-right: 2px; }
.plan__rows { margin-top: 14px; border-top: 1px solid var(--line); }
.plan__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.plan__rows dt { color: var(--ink-soft); }
.plan__rows dd { font-variant-numeric: tabular-nums; }
.article-body .plan__scale { margin-top: 12px; font-size: 0.84rem; line-height: 1.8; color: var(--ink-soft); }
.article-body .note { font-size: 0.84rem; line-height: 1.9; color: var(--ink-soft); }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 520px; border-collapse: collapse; border-top: 1px solid var(--line); font-size: 0.88rem; }
.data-table th, .data-table td { padding: 14px 10px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-faint); }
.data-table tbody th { font-weight: 500; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }