/*
Theme Name: SnapLink Pro
Author: Gemini (Professional Web Designer/Programmer)
Description: Sky-aesthetic corporate theme for SnapLynk Inc.
Version: 2.1
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, block-styles, light, sky, corporate, tailwind
Text Domain: snaplink-pro
*/

/* ==========================================================================
   Custom font — HakkouMincho
   ★ @font-face は functions.php からインラインで挿入（絶対URL）。
     ここに書くと WP Fastest Cache の minify で相対URLが壊れて 404 になる。
   ========================================================================== */

/* ==========================================================================
   Design tokens — sky-aesthetic, clean gothic
   ========================================================================== */
:root {
    /* Type stack — clean gothic only */
    --font-base: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;
    --font-tech: "Inter", "Helvetica Neue", "Noto Sans JP", sans-serif;

    /* Color — text (saturation boosted) */
    --color-text-primary:    #052e60;   /* deep saturated navy */
    --color-text-secondary:  #1c4f8f;   /* vivid blue-gray */
    --color-text-muted:      #4574a3;   /* punchier muted */
    --color-text-onsky:      #ffffff;   /* on dark sky */
    --color-water:           #1ea9eb;   /* 水色 — vivid sky blue */
    --color-accent:          #0095ec;   /* primary accent — electric blue */
    --color-accent-strong:   #0076c7;
    --color-accent-soft:     rgba(0, 149, 236, 0.14);
    --color-warm:            #f4264e;   /* saturated coral red */

    /* Surfaces — pure white + saturated sky tints */
    --color-surface-base:    #ffffff;
    --color-surface-soft:    #eaf4fc;
    --color-surface-tinted:  #d4ecfa;
    --color-surface-cloud:   #f7fcff;
    --color-border-subtle:   rgba(0, 110, 210, 0.14);
    --color-border-strong:   rgba(0, 110, 210, 0.28);

    /* Sky palette — saturated, never fades to pure white */
    --color-sky-deep:    #0a6cc7;
    --color-sky-mid:     #1c97e0;
    --color-sky-light:   #4cb8ee;
    --color-sky-haze:    #95d4f5;
    --color-city-shape:  #0e3f72;

    --hero-bg-photo: url("backg.webp");

    /* Spacing */
    --space-1: 4px;  --space-2: 5px;  --space-3: 6px;
    --space-4: 10px; --space-5: 11px; --space-6: 12px;
    --space-7: 13px; --space-8: 16px;

    /* Radius */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-2xl: 56px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-cloud:  0 20px 60px rgba(15, 60, 110, 0.10), 0 6px 18px rgba(15, 60, 110, 0.06);
    --shadow-card:   0 14px 38px rgba(15, 60, 110, 0.08);
    --shadow-soft:   0 4px 14px rgba(15, 60, 110, 0.06);
    --shadow-accent: 0 12px 32px rgba(9, 139, 222, 0.28);

    /* Motion */
    --motion-duration-instant: 280ms;
    --motion-duration-fast:    600ms;
    --motion-duration-scroll:  1400ms;
    --motion-easing-standard:  cubic-bezier(0.165, 0.84, 0.44, 1);
    --motion-easing-soft:      cubic-bezier(0.16, 1, 0.3, 1);

    /* Legacy aliases */
    --neon-yellow: var(--color-accent);
    --neon-cyan:   var(--color-accent);
    --dark-bg:     var(--color-surface-base);
    --card-bg:     var(--color-surface-base);
    --text-main:   var(--color-text-primary);
    --text-muted:  var(--color-text-muted);

    /* LP design tokens (Syllabuy world — used in #works) */
    --lp-citsky:   #64a1d3;
    --lp-citred:   #c93a40;
    --lp-citbg:    #f9f6f0;
    --lp-cittext:  #2c3e50;
    --font-lp:     "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic Medium", sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
html { scroll-behavior: smooth; }

/* ==========================================================================
   投稿系ページ（single / archive / home）の白背景化
   テンプレート(single.php / archive.php / home.php) は元々ダーク前提で
   `bg-[#0B0B0D]` `text-white` `bg-cyan-500/5` 等が直書きされている。
   CSS 側で上書きして白基調に揃える。
   ========================================================================== */
body.single,
body.archive,
body.blog,
body.search {
    background-color: #ffffff !important;
}

/* 投稿ページのトップヘッダー（記事タイトル領域）を白に。装飾blob を非表示 */
body.single  > header,
body.archive > header,
body.blog    > header,
body.search  > header {
    background-color: #ffffff !important;
}
body.single  > header > div.absolute.bg-cyan-500\/5,
body.single  > header > div.absolute.bg-yellow-500\/5,
body.archive > header > div.absolute.bg-cyan-500\/5,
body.archive > header > div.absolute.bg-yellow-500\/5,
body.blog    > header > div.absolute.bg-cyan-500\/5,
body.blog    > header > div.absolute.bg-yellow-500\/5,
body.search  > header > div.absolute.bg-cyan-500\/5,
body.search  > header > div.absolute.bg-yellow-500\/5 {
    display: none !important;
}

/* 投稿ページの main も白に。ダーク前提の bg-[#0B0B0D] を上書き */
body.single  main,
body.archive main,
body.blog    main,
body.search  main {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
}

/* 投稿ヘッダー内テキストの色を白→ダークに（text-white が直書きされているため上書き） */
body.single  > header h1,
body.single  > header h1.text-white,
body.archive > header h1,
body.archive > header h1.text-white,
body.blog    > header h1,
body.blog    > header h1.text-white,
body.search  > header h1,
body.search  > header h1.text-white {
    color: var(--color-text-primary) !important;
    text-shadow: none !important;
}

/* 投稿ヘッダーの font-tech 系メタ（カテゴリ・日付）も白前提なのでダーク寄りに */
body.single  > header .text-yellow-400,
body.archive > header .text-yellow-400,
body.blog    > header .text-yellow-400,
body.search  > header .text-yellow-400 {
    color: var(--color-accent-strong) !important;
}
body.single  > header .text-gray-500,
body.archive > header .text-gray-500,
body.blog    > header .text-gray-500,
body.search  > header .text-gray-500 {
    color: var(--color-text-muted) !important;
}

/* post-tags の "TAGS:" ラベルなど */
body.single  main .text-gray-500,
body.archive main .text-gray-500,
body.blog    main .text-gray-500,
body.search  main .text-gray-500 {
    color: var(--color-text-muted) !important;
}
body.single  main .border-white\/10,
body.archive main .border-white\/10,
body.blog    main .border-white\/10,
body.search  main .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.10) !important;
}

body {
    font-family: var(--font-base);
    font-weight: 400;
    line-height: 1.85;
    color: var(--color-text-primary);
    background-color: var(--color-surface-base);
    background-image: none;
    overflow-x: hidden;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p, li, dd, dt, address, blockquote, span, a, button, input, textarea, select {
    font-family: var(--font-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base);
    font-feature-settings: "palt";
    color: var(--color-text-primary);
    letter-spacing: 0.04em;
    line-height: 1.5;
    font-weight: 700;
}

::selection { background: var(--color-accent); color: #fff; }
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-xs);
}

.font-tech {
    font-family: var(--font-tech) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.28em !important;
}

/* Hover halo */
.glitch-hover { transition: text-shadow var(--motion-duration-fast) ease; }
.glitch-hover:hover { text-shadow: 0 0 28px rgba(255, 255, 255, 0.55); }

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
    transition:
        opacity var(--motion-duration-scroll) var(--motion-easing-soft),
        transform var(--motion-duration-scroll) var(--motion-easing-soft);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: 0.18s; }
.fade-up.delay-2 { transition-delay: 0.34s; }
.fade-up.delay-3 { transition-delay: 0.50s; }

/* ==========================================================================
   GLOBAL CONTRAST FIX — ensure no text-white sits invisibly on white surfaces
   These rules are body-scoped (NOT inside `body > header.min-h-screen`),
   so the hero overrides below win for hero text.
   ========================================================================== */
.text-white,
.font-medium.text-white      { color: var(--color-text-primary) !important; }
.text-gray-300,
.text-gray-400               { color: var(--color-text-secondary) !important; }
.text-gray-500               { color: var(--color-text-muted) !important; }
.text-yellow-300,
.text-yellow-400,
.text-yellow-500,
.text-cyan-300,
.text-cyan-400,
.text-cyan-500               { color: var(--color-accent) !important; }
.text-pink-400,
.text-pink-500               { color: var(--color-warm) !important; }
.text-green-400              { color: #2cb67d !important; }

.bg-yellow-300,
.bg-yellow-400,
.bg-yellow-500,
.bg-cyan-300,
.bg-cyan-400,
.bg-cyan-500                 { background-color: var(--color-accent) !important; }
.bg-pink-500                 { background-color: var(--color-warm) !important; }

.border-yellow-400,
.border-yellow-500,
.border-cyan-300,
.border-cyan-400,
.border-cyan-500             { border-color: var(--color-accent) !important; }
.border-pink-400,
.border-pink-500             { border-color: var(--color-warm) !important; }
.border-white\/10,
.border-white\/20,
.border-white\/5,
.border-gray-700,
.border-gray-800             { border-color: var(--color-border-subtle) !important; }

.bg-cyan-500\/5,
.bg-cyan-400\/10,
.bg-yellow-500\/5            { background-color: var(--color-accent-soft) !important; }
.bg-cyan-900\/30,
.bg-yellow-900\/30           { background-color: var(--color-accent-soft) !important; }

.bg-\[\#0B0B0D\],
.bg-\[\#0F0F11\]             { background-color: var(--color-surface-soft) !important; }

.rounded-full { border-radius: var(--radius-pill) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-md) !important; }
.rounded      { border-radius: var(--radius-sm) !important; }

/* ==========================================================================
   Navbar
   ========================================================================== */
#navbar {
    background-color: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 1px 0 rgba(15, 60, 110, 0.04);
}
#navbar > div { height: 48px !important; max-width: 1280px !important; }
@media (min-width: 768px) {
    #navbar > div { height: 64px !important; }
}

#navbar a > div[style*="clip-path"],
footer div[style*="clip-path"] {
    clip-path: none !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong)) !important;
    box-shadow: var(--shadow-accent);
}
#navbar a > div[style*="clip-path"] span,
footer div[style*="clip-path"] span {
    color: #ffffff !important;
    font-family: var(--font-base) !important;
    font-weight: 700 !important;
}

#navbar a > div + div span,
footer span.font-tech.font-bold {
    font-family: var(--font-base) !important;
    letter-spacing: 0.16em !important;
    color: var(--color-text-primary) !important;
    text-transform: none !important;
    font-weight: 700 !important;
}
#navbar a > div + div span span.text-yellow-400,
footer .text-yellow-400 {
    color: var(--color-accent) !important;
}
#navbar .text-\[0\.6rem\] {
    font-family: var(--font-tech) !important;
    color: var(--color-text-muted) !important;
}

#navbar nav a {
    font-family: var(--font-tech) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--color-text-secondary) !important;
    letter-spacing: 0.24em !important;
}
#navbar nav a:hover { color: var(--color-accent) !important; }
#navbar nav a span.bg-yellow-400,
#navbar nav a span.bg-cyan-400,
#navbar nav a span.bg-gray-400,
#navbar nav a span.bg-pink-500 { background-color: var(--color-accent) !important; }

/* Hamburger */
.hamburger-icon span.bg-white { background-color: var(--color-text-primary) !important; }

/* ==========================================================================
   Hero — sky background, never fades to pure white
   ========================================================================== */
body > header.min-h-screen,
header.relative.min-h-screen {
    position: relative;
    color: var(--color-text-onsky);
    background-color: var(--color-sky-deep);
    /* レイヤー (上→下):
       1) 写真本体 — **cover で全画面ベタ貼り** (端は切れて OK / 2026-05-12 ユーザー指示)。
                    スマホ縦長では左右が、PC 横長は上下が切れるが、隙間ゼロで上下左右
                    すべて画像で埋まる。
       2) 文字エリア用 radial スクリム — 中央 58% を暗く落として可読性確保。
       3) 空色グラデ (fallback) — 画像 404 等で見えなくなった時の保険。普段は不可視。 */
    background-image:
        var(--hero-bg-photo),
        radial-gradient(
            ellipse 70% 52% at 50% 58%,
            rgba(3, 24, 56, 0.72) 0%,
            rgba(3, 24, 56, 0.50) 30%,
            rgba(3, 24, 56, 0.22) 55%,
            rgba(3, 24, 56, 0.00) 80%
        ),
        linear-gradient(180deg,
            var(--color-sky-haze) 0%,
            var(--color-sky-light) 36%,
            var(--color-sky-mid) 72%,
            var(--color-sky-deep) 100%
        );
    background-size: cover, auto, auto;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    overflow: hidden;
    /* hero を **viewport いっぱい** に広げる。
       旧: 92vh だと残り 8vh 分の白い mission セクションがスマホで「下に白いのが映る」状態だった。
       100vh は iOS Safari の URL バー分を含むため、可視領域から余ってしまうことがある。
       100dvh (dynamic viewport height) を採用し、URL バー縮退に追従して常に可視領域 100% で埋める。
       100dvh 未対応ブラウザ向けに 100vh フォールバックも残す。 */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    /* SCROLL hint (position: absolute, bottom: ~2.6rem) との被り防止のため
       下に十分な padding を確保。これで p の最終行と SCROLL の間に余白が生まれる。 */
    padding-bottom: clamp(7rem, 14vh, 11rem) !important;
}

/* 横長 viewport (アス比 ≥ 1280/719 ≒ 16:9) の PC では、hero 自身を画像と
   同じアス比に揃えると上下も切らずに **画像フル表示** になる (1920×1080 等)。
   cover のままだが container 側のアス比が画像と一致するので crop 量はほぼゼロ。 */
@media (min-aspect-ratio: 1280/719) {
    body > header.min-h-screen,
    header.relative.min-h-screen {
        aspect-ratio: 1280 / 719;
    }
}

/* City silhouette */
body > header.min-h-screen::before,
header.relative.min-h-screen::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 30%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    opacity: 0.82;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 320' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%231f4d7a'/><stop offset='1' stop-color='%23173757'/></linearGradient></defs><g fill='url(%23g)'><rect x='0' y='180' width='90' height='140'/><rect x='90' y='150' width='60' height='170'/><rect x='150' y='200' width='80' height='120'/><rect x='230' y='120' width='70' height='200'/><rect x='300' y='160' width='110' height='160'/><rect x='410' y='100' width='80' height='220'/><rect x='490' y='180' width='90' height='140'/><rect x='580' y='140' width='70' height='180'/><rect x='650' y='90' width='100' height='230'/><rect x='750' y='150' width='70' height='170'/><rect x='820' y='110' width='110' height='210'/><rect x='930' y='170' width='60' height='150'/><rect x='990' y='130' width='90' height='190'/><rect x='1080' y='190' width='80' height='130'/><rect x='1160' y='100' width='110' height='220'/><rect x='1270' y='160' width='70' height='160'/><rect x='1340' y='130' width='90' height='190'/><rect x='1430' y='180' width='80' height='140'/><rect x='1510' y='140' width='90' height='180'/></g></svg>");
}

/* Top-right halo */
body > header.min-h-screen::after,
header.relative.min-h-screen::after {
    content: "";
    position: absolute;
    top: -28%; right: -14%;
    width: 64vw;
    max-width: 760px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.92), rgba(255,255,255,0.45) 55%, rgba(255,255,255,0) 75%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

/* Hide Tailwind decorative blobs */
body > header.min-h-screen .bg-cyan-500\/5,
body > header.min-h-screen .bg-yellow-500\/5 {
    display: none !important;
}

/* Single-column centred layout for hero text */
body > header.min-h-screen .grid.grid-cols-1 {
    grid-template-columns: 1fr !important;
    max-width: 820px !important;
    text-align: center;
    place-items: center;
    gap: 2rem !important;
}

/* Hero status pill */
body > header.min-h-screen .inline-flex.bg-white\/5 {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: var(--radius-pill) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 8px 18px !important;
}
body > header.min-h-screen .inline-flex.bg-white\/5 span.font-tech {
    color: #fff !important;
    letter-spacing: 0.32em !important;
}
body > header.min-h-screen .bg-green-500 { background-color: #50e3a4 !important; }

/* HERO TEXT — force white on sky (overrides global fix above due to higher specificity)
   背景の局所スクリムが文字エリアを暗くする役を担うので、text-shadow は
   「鋭い輪郭1段」だけにして glow を最小化する（厚い暗ハロは "気味悪い" 見え方を生む）。 */
body > header.min-h-screen .text-white,
body > header.min-h-screen h1 {
    color: var(--color-text-onsky) !important;
    text-shadow: 0 1px 2px rgba(0, 18, 40, 0.45);
}
body > header.min-h-screen .text-gray-300,
body > header.min-h-screen .text-gray-400,
body > header.min-h-screen .text-gray-500 {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 2px rgba(0, 18, 40, 0.45);
}

/* Hero heading — さらに巨大化 + 行間タイトに
   font-family と color は別ルールで定義済み。ここでは触らない。 */
body > header.min-h-screen h1 {
    font-family: var(--font-base) !important;
    font-weight: 700 !important;
    color: var(--color-text-onsky) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.18 !important;
    font-size: clamp(4rem, 15vw, 10rem) !important;
    padding-top: 0.10em;
    padding-bottom: 0.16em;
}

/* Hero "ぜんぶやる" — 透明 + グラデ + シマー を全廃止し、
   隣接する「やりたいこと」と同じ無地の白テキストに揃える（鏡面/幽霊感を消す）。 */
body > header.min-h-screen h1 .bg-gradient-to-r.from-yellow-400.via-white.to-cyan-400 {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--color-text-onsky) !important;
    color: var(--color-text-onsky) !important;
    animation: none !important;
}
/* glitch-hover の白い 28px グロー hover も停止（厚いハロが幽霊感を出す） */
body > header.min-h-screen h1 .glitch-hover:hover {
    text-shadow: 0 1px 2px rgba(0, 18, 40, 0.45) !important;
}

/* Hero supporting paragraph */
body > header.min-h-screen p {
    color: rgba(255, 255, 255, 0.98) !important;
    /* Zen Kaku Gothic New — モダンで字面が大きく、画面で読みやすい日本語ゴシック。
       header.php の Google Fonts で weight 400/500/700 をプリロード済み。
       weight 500 で輪郭をくっきり立たせ、画像上でも字が浮く。 */
    font-family: 'Zen Kaku Gothic New', var(--font-base) !important;
    font-weight: 500 !important;
    font-size: 1.08rem !important;
    line-height: 1.85 !important;
    max-width: 620px !important;
    /* h1 が巨大化したため、p の下マージンを少し詰めて SCROLL との余白を確保 */
    margin: 0 auto 1.25rem !important;
    /* Zen Kaku Gothic New は字面が大きいので、tracking は控えめにして自然な間隔に */
    letter-spacing: 0.02em !important;
    /* 中央 radial スクリムが文字エリアを既に暗く落としているので、
       text-shadow は **鋭い輪郭 1 段だけ** (プロジェクトメモリの方針)。
       盛ると太字 h1 のような幽霊ハロが出て "気味悪い" 見え方になる。 */
    text-shadow: 0 1px 2px rgba(0, 18, 40, 0.55) !important;
}

/* Hero CTAs */
body > header.min-h-screen .flex.flex-wrap.gap-4 {
    justify-content: center !important;
    gap: 1.25rem !important;
}
body > header.min-h-screen .flex.flex-wrap.gap-4 a {
    width: auto !important;
    min-width: 200px !important;
    height: auto !important;
}

/* Hero side graphic — hidden */
body > header.min-h-screen #hero-graphic { display: none !important; }

/* ==========================================================================
   Hero handwriting overlay (added in index.php)
   ========================================================================== */
.hero-handwriting {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    transform: translateY(8%);
}
.hero-handwriting svg {
    width: min(72vw, 820px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 6px 24px rgba(15, 60, 110, 0.32));
    opacity: 0.55;
}
/* ヒーロー背景の手書き SVG: "SnapLynk" を Caveat (cursive) で表示 */
.hero-handwriting__text {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 220px;
    fill: rgba(255, 255, 255, 0.92);
    paint-order: stroke fill;
    stroke: rgba(255, 255, 255, 0.30);
    stroke-width: 2;
    letter-spacing: 0.02em;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: hero-handwrite-text 1.8s ease-out forwards 0.8s;
}
@keyframes hero-handwrite-text {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
    5%   { opacity: 1; clip-path: inset(0 98% 0 0); }
    100% { opacity: 1; clip-path: inset(0 0% 0 0); }
}

/* 旧 .hero-handwriting__path は使われていないが念のため残す（無害） */
.hero-handwriting__path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: hero-handwrite 5.2s var(--motion-easing-standard) forwards 0.6s;
}
@keyframes hero-handwrite {
    0%   { stroke-dashoffset: 3000; opacity: 0; }
    8%   { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
section {
    color: var(--color-text-primary);
    padding-top: clamp(5rem, 10vw, 9rem) !important;
    padding-bottom: clamp(5rem, 10vw, 9rem) !important;
}

/* Mission */
section#mission { background-color: var(--color-surface-base) !important; position: relative; }
section#mission::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, var(--color-surface-cloud), transparent);
    pointer-events: none;
}

section#mission .grid.grid-cols-1.md\:grid-cols-12 {
    display: block !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    text-align: center !important;
}
section#mission .md\:col-span-4,
section#mission .md\:col-span-8 {
    grid-column: unset !important;
    margin: 0 auto !important;
}
section#mission .md\:col-span-4 { margin-bottom: 2.5rem !important; }
section#mission span.font-tech {
    display: inline-block !important;
    color: var(--color-accent) !important;
    margin-bottom: 1.5rem !important;
}
section#mission h2 {
    font-family: var(--font-base) !important;
    font-size: clamp(1.875rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    margin-bottom: 1.5rem !important;
    color: var(--color-text-primary) !important;
}
section#mission .accent-line {
    margin: 0 auto 0 !important;
    background: var(--color-accent) !important;
    height: 3px !important;
    width: 0 !important;
    transition: width 1.2s var(--motion-easing-soft) 0.3s,
                box-shadow 0.6s ease 0.6s !important;
    border-radius: 3px;
}
section#mission .fade-up.visible .accent-line { width: 64px !important; }
section#mission p {
    font-family: var(--font-base) !important;
    font-size: 1.0625rem !important;
    line-height: 2.05 !important;
    color: var(--color-text-secondary) !important;
    margin-bottom: 1.5rem !important;
}
section#mission p.text-lg {
    font-family: var(--font-base) !important;
    font-size: 1.25rem !important;
    line-height: 1.95 !important;
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

/* Services */
section#service {
    background-color: var(--color-surface-soft) !important;
    background-image:
        radial-gradient(ellipse 600px 120px at 80% 20%, rgba(255,255,255,0.7), transparent 70%),
        radial-gradient(ellipse 500px 100px at 10% 90%, rgba(9,139,222,0.05), transparent 70%);
}
section#service .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
    margin-bottom: 4rem !important;
}
section#service span.font-tech {
    color: var(--color-accent) !important;
    margin-bottom: 1rem !important;
}
section#service h2 {
    font-family: var(--font-base) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    margin-bottom: 0.75rem !important;
    color: var(--color-text-primary) !important;
}
section#service .grid.grid-cols-1.md\:grid-cols-3 { gap: 2rem !important; }

section#service .tech-card {
    background: var(--color-surface-base) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-cloud) !important;
    padding: 3rem 2.25rem !important;
    text-align: center !important;
    position: relative;
    overflow: hidden;
}
section#service .tech-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    transform: scaleX(0.3);
    transform-origin: center;
    transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}
section#service .tech-card:hover { transform: translateY(-6px); }
section#service .tech-card:hover::before { transform: scaleX(1); }

section#service .tech-card > div.w-12.h-12 {
    width: 84px !important;
    height: 84px !important;
    margin: 0 auto 1.75rem !important;
    background: var(--color-surface-tinted) !important;
    border: 1.5px solid var(--color-border-subtle) !important;
    border-radius: 50% !important;
    transition: all var(--motion-duration-fast) var(--motion-easing-standard);
}
section#service .tech-card:hover > div.w-12.h-12 {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    transform: rotate(-8deg) scale(1.06);
}
section#service .tech-card > div.w-12.h-12 svg,
section#service .tech-card > div.w-12.h-12 .lucide {
    width: 32px !important;
    height: 32px !important;
    stroke-width: 1.5 !important;
    color: var(--color-accent) !important;
    transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
section#service .tech-card:hover > div.w-12.h-12 svg,
section#service .tech-card:hover > div.w-12.h-12 .lucide {
    color: #fff !important;
}

section#service .tech-card h3 {
    font-family: var(--font-base) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--color-text-primary) !important;
    margin-bottom: 1rem !important;
    transition: color var(--motion-duration-instant);
}
section#service .tech-card:hover h3 { color: var(--color-accent) !important; }
section#service .tech-card p {
    font-family: var(--font-base) !important;
    font-size: 0.9375rem !important;
    line-height: 1.95 !important;
    color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   Works (アプリ開発の実績) — LP-style (Syllabuy world)
   Syllabuy LP のデザイン言語（pop / neubrutalism / 丸ゴシック）を移植。
   このセクションだけ corp の sky aesthetic から外れて意図的に世界観を変える。
   ========================================================================== */
section#works {
    background-color: #ffffff !important;
    background-image:
        radial-gradient(rgba(100, 161, 211, 0.16) 2px, transparent 2px) !important;
    background-size: 24px 24px !important;
    color: var(--lp-cittext);
}
section#works .text-center.mb-12 { text-align: center !important; margin-bottom: 4rem !important; }
section#works h2 {
    font-family: var(--font-lp) !important;
    font-size: clamp(2rem, 4.4vw, 3.25rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    /* シマーオーバーライド（万一適用された場合に備えて） */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--lp-cittext) !important;
    animation: none !important;
    padding-bottom: 0.1em !important;
}

.works-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    background: #ffffff;
    border: 3px solid var(--lp-cittext);
    border-radius: 28px;
    box-shadow: 6px 6px 0 rgba(44, 62, 80, 0.10);
    padding: 2.75rem 2.5rem;
    text-decoration: none !important;
    color: var(--lp-cittext) !important;
    font-family: var(--font-lp) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.works-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(44, 62, 80, 0.15);
    border-color: var(--lp-cittext);
}
.works-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-items: flex-start;
}
.works-card__badge {
    display: inline-block;
    background: var(--lp-citsky);
    color: #ffffff !important;
    font-family: var(--font-lp) !important;
    font-weight: 700;
    border: 2px solid var(--lp-cittext);
    border-radius: 999px;
    box-shadow: 4px 4px 0 var(--lp-cittext);
    padding: 0.4rem 1.1rem;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}
.works-card__title {
    font-family: var(--font-lp) !important;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.4;
    color: var(--lp-cittext) !important;
    letter-spacing: 0.01em;
    margin: 0.2rem 0 0;
}
.works-card__title-accent {
    color: var(--lp-citred) !important;
}
.works-card__desc {
    font-family: var(--font-lp) !important;
    font-weight: 500;
    color: #6b7280 !important;
    font-size: 1rem;
    line-height: 1.85;
    margin: 0;
    max-width: 28em;
}
.works-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lp-citsky) !important;
    color: #ffffff !important;
    border: 3px solid var(--lp-cittext);
    box-shadow: 4px 4px 0 var(--lp-cittext);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-family: var(--font-lp) !important;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: none !important;
    letter-spacing: 0.04em;
    transition: all 0.1s ease;
    margin-top: 0.5rem;
}
.works-card:hover .works-card__cta {
    background: var(--lp-citred) !important;
}
.works-card__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}
.works-card__visual::before {
    content: "";
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    filter: blur(28px);
    z-index: 0;
    animation: works-mascot-glow 3.6s ease-in-out infinite;
}
@keyframes works-mascot-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.05); }
}
.works-card__mascot {
    width: 100%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 12px 24px rgba(44, 62, 80, 0.15));
}
.works-card:hover .works-card__mascot { transform: scale(1.06) rotate(-1deg); }

@media (max-width: 768px) {
    .works-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2.25rem 1.5rem;
        gap: 1.75rem;
    }
    .works-card__body { align-items: center; }
    .works-card__visual { order: -1; min-height: 220px; }
    .works-card__mascot { max-width: 220px; }
    .works-card__desc { max-width: none; }
}

/* News */
section#news {
    background-color: var(--color-surface-base) !important;
    border-top: 1px solid var(--color-border-subtle) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    background-image:
        radial-gradient(ellipse 700px 140px at 90% 10%, rgba(9,139,222,0.05), transparent 70%);
}
section#news .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 3.5rem !important;
}
section#news span.font-tech {
    color: var(--color-accent) !important;
    margin-bottom: 1rem !important;
}
section#news h2 {
    font-family: var(--font-base) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    color: var(--color-text-primary) !important;
}
section#news > div > div.border-t { border-top: 1px solid var(--color-border-subtle) !important; }

.news-item {
    border-bottom: 1px solid var(--color-border-subtle) !important;
    border-radius: 0 !important;
    padding: 2rem 0.5rem !important;
    transition: background var(--motion-duration-instant), padding-left var(--motion-duration-instant);
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
}
.news-item:hover {
    background: var(--color-surface-soft) !important;
    padding-left: 1.5rem !important;
}
.news-item time {
    font-family: var(--font-tech) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    color: var(--color-water) !important;
    width: 140px !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}
.news-item h3 {
    font-family: var(--font-base) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
    flex: 1 !important;
    margin: 0 1.5rem !important;
    line-height: 1.6 !important;
    transition: color var(--motion-duration-instant);
}
.news-item:hover h3,
.news-item:hover h3 a { color: var(--color-accent) !important; }
.news-item .border-gray-700,
.news-item span.text-xs.font-tech {
    border: none !important;
    background: var(--color-accent-soft) !important;
    color: var(--color-accent) !important;
    border-radius: var(--radius-pill) !important;
    padding: 6px 14px !important;
    font-family: var(--font-tech) !important;
    font-size: 11px !important;
}

/* Company */
section#company {
    background-color: var(--color-surface-base) !important;
    background-image:
        radial-gradient(ellipse 800px 200px at 10% 20%, rgba(9, 139, 222, 0.04), transparent 70%);
    position: relative;
}
section#company .text-\[10rem\] {
    font-family: var(--font-tech) !important;
    color: rgba(9, 139, 222, 0.06) !important;
    letter-spacing: 0.16em !important;
    font-weight: 800;
}
section#company .text-center.mb-12 { text-align: center !important; margin-bottom: 4rem !important; }
section#company span.font-tech {
    color: var(--color-accent) !important;
    margin-bottom: 1rem !important;
}
section#company h2 {
    font-family: var(--font-base) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    color: var(--color-text-primary) !important;
}
section#company > div > div.border-t { border-top: 1px solid var(--color-border-subtle) !important; }

.company-row {
    border-bottom: 1px solid var(--color-border-subtle) !important;
    grid-template-columns: 200px 1fr !important;
    gap: 2.5rem !important;
    padding: 2rem 0.5rem !important;
}
.company-row > div:first-child {
    font-family: var(--font-base) !important;
    color: var(--color-water) !important;
    text-transform: none !important;
    letter-spacing: 0.08em !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}
.company-row > div:first-child i,
.company-row > div:first-child svg {
    color: var(--color-water) !important;
    width: 18px !important;
    height: 18px !important;
}
.company-row > div.md\:col-span-2,
.company-row .text-white {
    font-family: var(--font-base) !important;
    color: var(--color-text-primary) !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    line-height: 1.85 !important;
    margin-top: 0 !important;
}
.company-row a {
    color: var(--color-accent) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(9, 139, 222, 0.4);
}
.company-row a:hover { color: var(--color-accent-strong) !important; }
.company-row .text-xs.text-gray-500 { color: var(--color-text-muted) !important; }

/* ----------------------------------------------------------------------------
   Company info STABILITY GUARD（強化版）
   会社概要セクションは情報テーブル。水平方向のシフト（translateX, skew, scale, rotate）は
   .company-row 自身も含めて絶対禁止する。
   過去事故: functions.php インラインスクリプトが .company-row に .fade-left
   （translateX(-44px) アニメ）を自動付与しており、ガードが弱いと水平アニメが復活する。
   ここでは .company-row 自身の transform を明示固定し、子要素も完全ロック。
   reveal アニメは「opacity だけ」で実装する（縦方向 translateY も使わない）。
   ---------------------------------------------------------------------------- */
section#company .company-row,
section#company .company-row > div,
section#company .company-row * {
    animation: none !important;
    transform: none !important;
    transition-property: opacity, color, background-color, border-color, text-decoration-color !important;
}

/* 控えめな opacity-only リビール。
   ★プログレッシブエンハンスメント: デフォルトは opacity:1 のまま表示。
     JS が .is-revealing を付けたときだけ初期非表示 → .is-visible で見える化。
     これにより JS / IO / キャッシュ事故でも内容は必ず表示される。
   ★translate は一切使わない（horizontal も vertical も禁止）= 「会社概要はそのまま」 */
section#company .company-row {
    transition: opacity 0.55s ease-out !important;
    will-change: opacity;
}
section#company .company-row.is-revealing:not(.is-visible) {
    opacity: 0;
}
section#company .company-row.is-revealing.is-visible {
    opacity: 1;
}

/* もし .fade-left.visible が後から付いても、opacity 1 / transform none を強制 */
section#company .company-row.fade-left,
section#company .company-row.fade-left.visible,
section#company .company-row.fade-up,
section#company .company-row.fade-up.visible,
section#company .company-row.fade-right,
section#company .company-row.fade-scale,
section#company .company-row.fade-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
    section#company .company-row,
    section#company .company-row.is-revealing {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Recruit */
section#recruit { background-color: var(--color-surface-base) !important; }
section#recruit > div.max-w-4xl {
    background-image: 
        linear-gradient(rgba(5, 46, 96, 0.4), rgba(5, 46, 96, 0.4)),
        var(--hero-bg-photo) !important;
    background-size: cover !important;
    background-position: center !important;
    border: none !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-cloud);
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 5rem) !important;
    position: relative;
    overflow: hidden;
}
section#recruit > div.max-w-4xl::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 460px 110px at 18% 32%, rgba(255,255,255,0.55), transparent 70%),
        radial-gradient(ellipse 360px 80px at 78% 22%, rgba(255,255,255,0.45), transparent 70%),
        radial-gradient(ellipse 280px 70px at 50% 78%, rgba(255,255,255,0.35), transparent 70%);
    pointer-events: none;
}
section#recruit [class*="bg-[linear-gradient"] { display: none !important; }

section#recruit h2 {
    font-family: var(--font-base) !important;
    /* さらに巨大化。font/color は変更しない */
    font-size: clamp(4.2rem, 15vw, 8rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 24px rgba(15, 60, 110, 0.28);
    letter-spacing: 0.10em !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.25 !important;
    padding-top: 0.10em !important;
    padding-bottom: 0.18em !important;
}
section#recruit > div.max-w-4xl p.text-gray-400 {
    color: rgba(255, 255, 255, 0.96) !important;
    font-family: var(--font-base) !important;
    font-size: 1.0625rem !important;
    line-height: 2 !important;
    max-width: 580px !important;
    margin: 0 auto 2.5rem !important;
}
section#recruit p.text-xs.font-tech {
    color: rgba(255, 255, 255, 0.92) !important;
    margin-top: 1.5rem !important;
}

/* "ALL SERVICES" / "ALL NEWS" arrow links */
section a.fade-up.flex.items-center.gap-2 {
    color: var(--color-accent) !important;
    font-family: var(--font-tech) !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase;
}
section a.fade-up.flex.items-center.gap-2:hover { color: var(--color-accent-strong) !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-tech {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tech) !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    clip-path: none !important;
    overflow: hidden;
    transition: all var(--motion-duration-instant) ease;
}
.btn-tech:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%);
    color: #ffffff !important;
    box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-accent-strong) 0%, var(--color-accent) 100%);
    box-shadow: 0 16px 40px rgba(9, 139, 222, 0.36);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-accent) !important;
    border: 1.5px solid var(--color-accent);
    backdrop-filter: blur(4px);
}
.btn-outline:hover {
    background: var(--color-accent);
    color: #fff !important;
    box-shadow: var(--shadow-accent);
    transform: translateY(-2px);
}

/* Hero CTAs */
body > header.min-h-screen .btn-outline {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}
body > header.min-h-screen .btn-outline:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--color-accent) !important;
}
body > header.min-h-screen .btn-primary {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--color-accent) !important;
    box-shadow: 0 14px 38px rgba(15, 60, 110, 0.22);
}
body > header.min-h-screen .btn-primary:hover {
    background: var(--color-accent) !important;
    color: #fff !important;
    box-shadow: 0 18px 44px rgba(15, 60, 110, 0.30);
}
section#recruit .btn-primary {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--color-accent) !important;
}
section#recruit .btn-primary:hover {
    background: var(--color-accent) !important;
    color: #fff !important;
}

button:disabled,
.btn-tech[aria-disabled="true"],
.btn-tech[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.tech-card {
    background: var(--color-surface-base);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: all var(--motion-duration-fast) var(--motion-easing-standard);
}
.tech-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-cloud);
}

/* ==========================================================================
   Mobile menu — フルスクリーン + 演出付き (Top Right Clip-Path)
   ========================================================================== */

/* チェックボックス本体は視覚的に隠す */
.menu-icon {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* メニューが開いている間は body のスクロールをロック */
body:has(.menu-icon:checked) { overflow: hidden; }

/* 閉状態: 右上のハンバーガーボタン位置に収束 */
#mobile-menu {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    
    /* おしゃれな白色背景: Subtle elegant gradient */
    background: radial-gradient(1200px circle at 80% 20%, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.98)) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    
    /* 右上からの展開アニメーション */
    clip-path: circle(0px at calc(100% - 2.5rem) 2.5rem);
    transition: clip-path 0.7s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 60;
}

/* 開状態: フルスクリーンへ展開 */
.menu-icon:checked ~ #mobile-menu {
    opacity: 1;
    pointer-events: auto;
    clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem);
}

/* リンクテキスト (ダークに) */
#mobile-menu a {
    color: var(--color-text-primary) !important;
    font-family: var(--font-base) !important;
    letter-spacing: 0.20em !important;
    position: relative;
}
#mobile-menu a:hover,
#mobile-menu a:focus-visible { color: var(--color-accent) !important; }

/* リンクのホバー下線エフェクト追加 */
#mobile-menu .mobile-link:not(.btn-tech)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 32px;
    height: 2px;
    background: var(--color-accent);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
#mobile-menu .mobile-link:not(.btn-tech):hover::after,
#mobile-menu .mobile-link:not(.btn-tech):focus-visible::after { transform: translateX(-50%) scaleX(1); }

/* mobile-link をスタガーで下から登場 */
#mobile-menu .mobile-link {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.5s ease,
        transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        color 0.25s ease;
}
.menu-icon:checked ~ #mobile-menu .mobile-link {
    opacity: 1;
    transform: translateY(0);
}
.menu-icon:checked ~ #mobile-menu .mobile-link:nth-of-type(1) { transition-delay: 0.20s, 0.20s, 0s; }
.menu-icon:checked ~ #mobile-menu .mobile-link:nth-of-type(2) { transition-delay: 0.25s, 0.25s, 0s; }
.menu-icon:checked ~ #mobile-menu .mobile-link:nth-of-type(3) { transition-delay: 0.30s, 0.30s, 0s; }
.menu-icon:checked ~ #mobile-menu .mobile-link:nth-of-type(4) { transition-delay: 0.35s, 0.35s, 0s; }
.menu-icon:checked ~ #mobile-menu .mobile-link:nth-of-type(5) { transition-delay: 0.40s, 0.40s, 0s; }
.menu-icon:checked ~ #mobile-menu .mobile-link:nth-of-type(6) { transition-delay: 0.45s, 0.45s, 0s; }

/* 既存の個別バツボタンは非表示 */
.mobile-menu-close {
    display: none !important;
}

/* 左端の装飾ライン（スタイリッシュなアクセント） */
#mobile-menu::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-accent), var(--color-water), transparent);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.65s cubic-bezier(0.86, 0, 0.07, 1);
}
.menu-icon:checked ~ #mobile-menu::before {
    transform: scaleY(1);
    transition-delay: 0.3s;
}

/* メニュー内ブランド表示（左上） */
.mobile-menu-brand {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-family: var(--font-tech);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(15, 60, 110, 0.4); /* 白背景に合うダークなトーン */
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-icon:checked ~ #mobile-menu .mobile-menu-brand {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}
.mobile-menu-brand span { color: var(--color-accent); }

/* ハンバーガーアイコン (label) */
.hamburger-icon {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: #ffffff; /* ダークヘッダー用に白 */
    opacity: 1;
    transition: color 0.2s ease, opacity 0.2s ease;
    z-index: 9999 !important; /* メニュー (60) よりも上に配置！ */
}
.hamburger-icon span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
/* 三本線も X も水色 (#1ea9eb) で統一。
   旧: accent→water のグラデだったが、X に変形した時の見え方を「単色の水色」に
   揃えてほしいというユーザー指示 (2026-05-12) で、閉状態 / 開状態 (X) ともに
   var(--color-water) の単色に統一する。 */
.hamburger-icon span.bg-white,
.hamburger-icon > span { background: var(--color-water) !important; }

/* メニュー開状態：X 形に変形 (色は閉状態と同じ水色を維持) */
.menu-icon:checked + .hamburger-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--color-water) !important; }
.menu-icon:checked + .hamburger-icon span:nth-child(2) { opacity: 0; }
.menu-icon:checked + .hamburger-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--color-water) !important; }

/* prefers-reduced-motion: アニメーション類を全て無効化、即時表示 */
@media (prefers-reduced-motion: reduce) {
    #mobile-menu { transition: opacity 0.15s linear !important; clip-path: none !important; }
    #mobile-menu:not(.open) { display: none; }
    #mobile-menu, #mobile-menu .mobile-link, #mobile-menu::before, .mobile-menu-brand, .hamburger-icon span {
        transition: opacity 0.15s linear !important;
        transform: none !important;
        animation: none !important;
    }
    .menu-icon:checked ~ #mobile-menu .mobile-link,
    .menu-icon:checked ~ #mobile-menu .mobile-menu-brand { transition-delay: 0s !important; }
}

/* md+ (PC) ではハンバーガー機構を完全に隠す。
   理由: HTML の Tailwind `md:hidden` は `display: none` を md+ で当てるが、
        style.css の `.hamburger-icon { display: inline-flex }` がそれを上書きして
        PC でも 3 本線がそのまま表示されてしまう事故が起きていた。
        style.css 側で `display: none !important` を明示すれば、
        ハンバーガー / 隠しチェックボックス / モバイルメニュー / spacer をすべて
        確実に PC で消せる。md ブレークポイントは Tailwind と同じ 768px。 */
@media (min-width: 768px) {
    .hamburger-icon,
    .menu-icon,
    .hamburger-spacer,
    #mobile-menu {
        display: none !important;
    }
}

/* ==========================================================================
   Footer — modern Japanese corporate layout
   ========================================================================== */
.site-footer {
    background-color: var(--color-surface-cloud);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border-subtle);
    font-family: var(--font-base);
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--color-water) 30%,
        var(--color-accent) 50%,
        var(--color-water) 70%,
        transparent 100%);
    opacity: 0.55;
    pointer-events: none;
}

.site-footer__main { padding: 4rem 1.5rem 3rem; }
.site-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 0.8fr;
    gap: 3rem;
    align-items: flex-start;
}

/* Brand column */
.site-footer__brand { color: var(--color-text-primary); }
.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    text-decoration: none;
}
.site-footer__logo-mark {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong)) !important;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    clip-path: none !important;
    box-shadow: var(--shadow-accent);
}
.site-footer__logo-mark span { color: #ffffff !important; font-weight: 700 !important; font-size: 1.05rem; }
.site-footer__logo-text {
    font-family: var(--font-base) !important;
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: none;
}
.site-footer__company {
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.55;
}
.site-footer__address {
    font-style: normal;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.85;
    margin: 0 0 1rem;
}
.site-footer__contact {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
}
.site-footer__contact > div {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: baseline;
}
.site-footer__contact dt {
    font-family: var(--font-tech);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.20em;
    color: var(--color-water);
    margin: 0;
}
.site-footer__contact dd {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 500;
}
.site-footer__contact dd a { color: var(--color-accent); text-decoration: none; }
.site-footer__contact dd a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Column heading shared */
.site-footer__heading {
    font-family: var(--font-tech);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--color-text-primary);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative;
}
.site-footer__heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 32px;
    height: 2px;
    background: var(--color-accent);
}

/* Nav / Links / Social lists */
.site-footer__nav ul,
.site-footer__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.site-footer__nav a,
.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color var(--motion-duration-instant), transform var(--motion-duration-instant);
}
.site-footer__nav a::before,
.site-footer__links a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-water);
    flex-shrink: 0;
    transition: background var(--motion-duration-instant), transform var(--motion-duration-instant);
}
.site-footer__nav a:hover,
.site-footer__links a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}
.site-footer__nav a:hover::before,
.site-footer__links a:hover::before {
    background: var(--color-accent);
    transform: scale(1.3);
}
.site-footer__nav a {
    font-family: var(--font-tech);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8125rem;
}

/* Social icons */
.site-footer__social-icons {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}
.site-footer__social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(75, 163, 212, 0.10);
    color: var(--color-water);
    border: 1px solid var(--color-border-subtle);
    transition: all var(--motion-duration-instant) ease;
}
.site-footer__social-icons a:hover {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}
.site-footer__social-icons svg,
.site-footer__social-icons .lucide {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}

/* Bottom bar */
.site-footer__bottom {
    background-color: var(--color-surface-soft);
    border-top: 1px solid var(--color-border-subtle);
    padding: 1.25rem 1.5rem;
}
.site-footer__inner--bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.site-footer__copyright {
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-tech);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
    }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .site-footer__main { padding: 3rem 1.25rem 2rem; }
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .site-footer__heading { margin-bottom: 1rem; }
    .site-footer__inner--bottom { flex-direction: column; gap: 0.75rem; }
}

/* ==========================================================================
   Gutenberg / single.php — post content
   ========================================================================== */
.post-content {
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    line-height: 1.95;
    font-family: var(--font-base);
}
.post-content p { margin-bottom: 1.5rem; color: var(--color-text-secondary); }

.post-content h2 {
    font-family: var(--font-base) !important;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.45;
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--color-accent-soft);
    color: var(--color-text-primary);
}
.post-content h3 {
    font-family: var(--font-base) !important;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2.75rem;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.post-content h3::before {
    content: "";
    width: 6px;
    height: 1.1em;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.post-content h4 {
    font-family: var(--font-base) !important;
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 2.25rem;
    margin-bottom: 0.875rem;
    color: var(--color-text-primary);
}

.post-content ul, .post-content ol { margin-bottom: 1.5rem; margin-left: 1.5rem; }
.post-content ul { list-style-type: none; }
.post-content ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}
.post-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(9, 139, 222, 0.12);
}
.post-content ol { list-style-type: decimal; list-style-position: outside; }
.post-content ol li::marker { color: var(--color-accent); font-weight: 600; }

.post-content blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.75rem 2rem 1.75rem 3rem;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface-soft);
    color: var(--color-text-primary);
    font-family: var(--font-base);
    font-size: 1.0625rem;
}
.post-content blockquote::before {
    content: '\201C';
    font-family: serif;
    font-size: 4rem;
    color: rgba(9, 139, 222, 0.30);
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    line-height: 1;
}

.post-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(9, 139, 222, 0.45);
    transition: all var(--motion-duration-instant) ease;
}
.post-content a:hover { color: var(--color-warm); text-decoration-color: var(--color-warm); }

.post-content hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    margin: 3.5rem 0;
}
.post-content pre {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-subtle);
    padding: 1.5rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}
.post-content code:not(pre code) {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 0.2em 0.45em;
    border-radius: var(--radius-xs);
    font-size: 0.9em;
}
.post-content img,
.post-content figure img { border-radius: var(--radius-md); }

.wp-block-button .wp-block-button__link {
    border-radius: var(--radius-pill) !important;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
    color: #ffffff;
    padding: 14px 32px;
    font-family: var(--font-tech);
    font-weight: 600;
    letter-spacing: 0.24em;
    box-shadow: var(--shadow-accent);
    transition: all var(--motion-duration-instant) ease;
}
.wp-block-button .wp-block-button__link:hover {
    box-shadow: 0 16px 40px rgba(9, 139, 222, 0.36);
    transform: translateY(-2px);
}

.aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* スカイスクレイパー型 (120x600) サイドバナーを本文中に float 配置 */
.skyscraper-ad-wrap {
    float: right;
    margin: 0.25rem 0 1.5rem 1.75rem;
    max-width: 120px;
    shape-outside: margin-box;
}
.skyscraper-ad-wrap a { display: block; line-height: 0; }
.skyscraper-ad-wrap img { display: block; max-width: 100%; height: auto; }
.skyscraper-ad-wrap .skyscraper-ad-note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    color: var(--color-text-tertiary, #9ca3af);
    text-align: center;
    letter-spacing: 0.06em;
}
@media (max-width: 640px) {
    .skyscraper-ad-wrap {
        float: none;
        margin: 2rem auto;
        text-align: center;
    }
}

/* スクエア型 (300x300) バナーを本文中央に配置 */
.square-ad-wrap {
    margin: 2.5rem auto;
    max-width: 300px;
    text-align: center;
}
.square-ad-wrap a { display: block; line-height: 0; }
.square-ad-wrap img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.square-ad-wrap .square-ad-note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    color: var(--color-text-tertiary, #9ca3af);
    letter-spacing: 0.06em;
}

/* ==========================================================================
   Animation library — site-wide elegant motion
   ========================================================================== */

/* ---- Hero: continuous slow cloud drift via background-position ---- */
body > header.min-h-screen,
header.relative.min-h-screen {
    animation: sky-drift 80s ease-in-out infinite alternate;
}
@keyframes sky-drift {
    from {
        background-position:
            center center,
            18% 32%, 80% 22%, 52% 18%, 35% 68%,
            center center;
    }
    to {
        background-position:
            center center,
            24% 30%, 74% 24%, 58% 20%, 29% 72%,
            center center;
    }
}

/* Hero halo: gentle breathe */
body > header.min-h-screen::after,
header.relative.min-h-screen::after {
    animation: halo-breathe 14s ease-in-out infinite;
}
@keyframes halo-breathe {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
    50%      { transform: scale(1.06) translate(-1.2%, -0.8%); opacity: 0.86; }
}

/* Hero "ぜんぶやる" — シマーは廃止（透明テキスト解除に伴い役割が消えた）。
   無地の白として上段の override で固定済み。 */

/* Hero handwriting — float after draw-in */
.hero-handwriting svg {
    animation: handwrite-float 9s ease-in-out 6.5s infinite;
}
@keyframes handwrite-float {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(-8px); opacity: 0.7; }
}

/* ---- Hero status pill — soft glow loop ---- */
body > header.min-h-screen .bg-green-500 {
    box-shadow: 0 0 0 0 rgba(80, 227, 164, 0.55);
    animation: pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(80, 227, 164, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(80, 227, 164, 0); }
    100% { box-shadow: 0 0 0 0 rgba(80, 227, 164, 0); }
}

/* ---- Buttons: shine sweep on hover ---- */
.btn-tech {
    isolation: isolate;
}
.btn-tech::before {
    content: "";
    position: absolute;
    top: 0;
    left: -160%;
    width: 80%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
    transition: left 0.85s var(--motion-easing-soft);
    pointer-events: none;
    z-index: 1;
}
.btn-tech:hover::before {
    left: 160%;
}

/* ---- Service cards: tilt-lift + glow on hover ---- */
section#service .grid.grid-cols-1.md\:grid-cols-3 { perspective: 1400px; }
section#service .tech-card {
    transform-style: preserve-3d;
    transform-origin: center bottom;
}
section#service .tech-card:hover {
    transform: translateY(-10px) scale(1.012) !important;
    box-shadow:
        0 36px 80px rgba(0, 149, 236, 0.18),
        0 14px 38px rgba(15, 60, 110, 0.10) !important;
}

/* Service icon: dashed orbit ring on hover */
section#service .tech-card > div.w-12.h-12 { position: relative; }
section#service .tech-card > div.w-12.h-12::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 149, 236, 0);
    transition: border-color 0.5s ease;
    pointer-events: none;
}
section#service .tech-card:hover > div.w-12.h-12::before {
    border-color: rgba(0, 149, 236, 0.45);
    animation: ring-spin 9s linear infinite;
}
@keyframes ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Logo: tilt-bounce on hover (navbar + footer) ---- */
#navbar a > div[style*="clip-path"],
.site-footer__logo-mark {
    transition: transform 0.55s var(--motion-easing-soft), box-shadow 0.4s ease;
}
#navbar a:hover > div[style*="clip-path"],
.site-footer__logo:hover .site-footer__logo-mark {
    transform: rotate(-10deg) scale(1.10);
    box-shadow: 0 18px 40px rgba(0, 149, 236, 0.40);
}

/* ---- Navbar enter on load ---- */
#navbar { animation: navbar-drop 1s var(--motion-easing-soft) both; }
@keyframes navbar-drop {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ---- Section h2: subtle horizontal shimmer band ----
       NOTE: section#works は LP の世界観（Syllabuy）に合わせるためここから除外。
       works h2 は別途下記で Zen Maru Gothic + 単色で定義。 */
section#mission h2,
section#service h2,
section#news h2,
section#company h2 {
    background: linear-gradient(110deg,
        var(--color-text-primary) 0%,
        var(--color-text-primary) 42%,
        var(--color-water) 50%,
        var(--color-text-primary) 58%,
        var(--color-text-primary) 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    /* descender / 濁点の上下クリップ防止 — line-height と padding-bottom で十分な余裕確保 */
    line-height: 1.55 !important;
    padding-bottom: 0.15em !important;
    animation: heading-shimmer 12s ease-in-out infinite;
}

/* Hero h1 — same safety margin to prevent vertical clipping of large kana descenders */
body > header.min-h-screen h1 {
    padding-bottom: 0.08em;
}
@keyframes heading-shimmer {
    0%, 100% { background-position: 100% 50%; }
    50%      { background-position: 0% 50%; }
}

/* ---- Service / news section eyebrow label: fade-and-grow underscore ---- */
section span.font-tech {
    position: relative;
    display: inline-block;
}
section span.font-tech::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--color-water);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--motion-easing-soft) 0.4s;
}
section.fade-up.visible span.font-tech::after,
section .fade-up.visible span.font-tech::after,
section .visible span.font-tech::after,
.visible span.font-tech::after {
    transform: scaleX(1);
}

/* ---- "DATA" watermark in company: slow horizontal drift ---- */
section#company .text-\[10rem\] {
    animation: data-drift 70s linear infinite alternate;
}
@keyframes data-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-7%); }
}

/* ---- News item: gentle scale on hover (subtle) ---- */
.news-item {
    transition: background var(--motion-duration-instant), padding-left var(--motion-duration-instant), transform var(--motion-duration-instant);
}
.news-item:hover { transform: translateY(-1px); }

/* News category pill — gentle pulse on hover */
.news-item:hover span.text-xs.font-tech,
.news-item:hover .border-gray-700 {
    background: var(--color-accent) !important;
    color: #ffffff !important;
}

/* ---- Footer accent line: animated flow ---- */
.site-footer::before {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-water) 25%,
        var(--color-accent) 50%,
        var(--color-water) 75%,
        transparent 100%) !important;
    background-size: 220% 100%;
    animation: footer-flow 10s ease-in-out infinite;
}
@keyframes footer-flow {
    0%, 100% { background-position: 100% 50%; }
    50%      { background-position: 0% 50%; }
}

/* ---- Footer link dots — pulse on hover ---- */
.site-footer__nav a:hover::before,
.site-footer__links a:hover::before {
    box-shadow: 0 0 0 4px rgba(0, 149, 236, 0.20);
    animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 149, 236, 0.20); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 149, 236, 0); }
}

/* ---- Recruit panel: gentle drift of cloud overlay ---- */
section#recruit > div.max-w-4xl::before {
    animation: recruit-cloud-drift 30s ease-in-out infinite alternate;
}
@keyframes recruit-cloud-drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(-2%, -1%); }
}

/* ---- Recruit CTA — breathing glow to invite click ---- */
section#recruit a.btn-tech.btn-primary {
    animation: recruit-cta-breathe 3.6s ease-in-out infinite;
}
@keyframes recruit-cta-breathe {
    0%, 100% {
        box-shadow:
            0 14px 36px rgba(15, 60, 110, 0.22),
            0 0 0 0 rgba(255, 255, 255, 0.55);
    }
    50% {
        box-shadow:
            0 18px 44px rgba(15, 60, 110, 0.30),
            0 0 0 14px rgba(255, 255, 255, 0);
    }
}
section#recruit a.btn-tech.btn-primary:hover {
    animation-play-state: paused;
}

/* ---- Recruit headline — subtle slide-shimmer reveal ---- */
section#recruit h2 {
    background: linear-gradient(110deg,
        #ffffff 0%,
        rgba(255,255,255,0.82) 42%,
        #ffffff 50%,
        rgba(255,255,255,0.82) 58%,
        #ffffff 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: heading-shimmer 11s ease-in-out infinite 1.5s;
}

/* ---- Accent line in mission — keep, plus glow on visible ---- */
section#mission .fade-up.visible .accent-line {
    box-shadow: 0 0 16px rgba(0, 149, 236, 0.45);
}

/* ---- Hero scroll hint — soft luminous downward indicator ---- */
.hero-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(1.4rem, 4vh, 2.6rem);
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.92);
    pointer-events: auto;
    opacity: 0;
    animation: hero-scroll-hint-in 0.9s var(--motion-easing-soft) 1.4s forwards;
}
.hero-scroll-hint__label {
    font-family: var(--font-tech);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(15, 60, 110, 0.40);
}
.hero-scroll-hint__line {
    width: 1.5px;
    height: 56px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.55) 60%,
        rgba(255, 255, 255, 0) 100%);
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}
.hero-scroll-hint__line::before {
    content: "";
    position: absolute;
    left: 0;
    top: -40%;
    width: 100%;
    height: 36%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    animation: hero-scroll-trail 2.2s var(--motion-easing-standard) 2s infinite;
}
.hero-scroll-hint:hover .hero-scroll-hint__label {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.7);
}
@keyframes hero-scroll-hint-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 0.95; transform: translate(-50%, 0); }
}
@keyframes hero-scroll-trail {
    0%   { top: -50%; opacity: 0; }
    18%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}
@media (max-width: 640px) {
    .hero-scroll-hint__line { height: 42px; }
    .hero-scroll-hint__label { font-size: 0.6rem; letter-spacing: 0.36em; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-hint { animation: none; opacity: 0.95; }
    .hero-scroll-hint__line::before { animation: none; display: none; }
}

/* ==========================================================================
   Scroll fade-in variants (assignable via JS)
   ========================================================================== */
.fade-left {
    opacity: 0;
    transform: translateX(-44px);
    will-change: opacity, transform;
    transition:
        opacity var(--motion-duration-scroll) var(--motion-easing-soft),
        transform var(--motion-duration-scroll) var(--motion-easing-soft);
}
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right {
    opacity: 0;
    transform: translateX(44px);
    will-change: opacity, transform;
    transition:
        opacity var(--motion-duration-scroll) var(--motion-easing-soft),
        transform var(--motion-duration-scroll) var(--motion-easing-soft);
}
.fade-right.visible { opacity: 1; transform: translateX(0); }

.fade-scale {
    opacity: 0;
    transform: scale(0.92);
    will-change: opacity, transform;
    transition:
        opacity var(--motion-duration-scroll) var(--motion-easing-soft),
        transform var(--motion-duration-scroll) var(--motion-easing-soft);
}
.fade-scale.visible { opacity: 1; transform: scale(1); }

.fade-blur {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(10px);
    will-change: opacity, transform, filter;
    transition:
        opacity var(--motion-duration-scroll) var(--motion-easing-soft),
        transform var(--motion-duration-scroll) var(--motion-easing-soft),
        filter var(--motion-duration-scroll) var(--motion-easing-soft);
}
.fade-blur.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Stagger groups */
.stagger-children > * {
    opacity: 0;
    transform: translateY(28px);
    will-change: opacity, transform;
    transition:
        opacity var(--motion-duration-scroll) var(--motion-easing-soft),
        transform var(--motion-duration-scroll) var(--motion-easing-soft);
}
.stagger-children.visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0.00s; }
.stagger-children.visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 0.10s; }
.stagger-children.visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 0.20s; }
.stagger-children.visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }
.stagger-children.visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }
.stagger-children.visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 0.50s; }
.stagger-children.visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 0.60s; }
.stagger-children.visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 0.70s; }
.stagger-children.visible > *:nth-child(n+9){ opacity: 1; transform: translateY(0); transition-delay: 0.80s; }

/* ==========================================================================
   Hero parallax — set via JS via CSS custom properties
   ========================================================================== */
body > header.min-h-screen {
    --hero-mx: 0;
    --hero-my: 0;
}
body > header.min-h-screen::after {
    will-change: transform;
    transform:
        translate(calc(var(--hero-mx) * 14px), calc(var(--hero-my) * 14px))
        scale(1);
}
.hero-handwriting {
    transition: transform 0.8s var(--motion-easing-soft);
    transform:
        translateY(8%)
        translate(calc(var(--hero-mx, 0) * 8px), calc(var(--hero-my, 0) * 6px));
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .fade-up { opacity: 1; transform: none; }
    .hero-handwriting__path { stroke-dashoffset: 0; }
    .hero-handwriting__text { opacity: 1; clip-path: none; filter: none; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
    .news-item { flex-direction: column !important; align-items: flex-start !important; padding-left: 0.5rem !important; }
    .news-item time { width: auto !important; margin-bottom: 0.5rem !important; }
    .news-item h3 { margin: 0 0 0.75rem 0 !important; }

    .company-row { grid-template-columns: 1fr !important; gap: 0.5rem !important; }

    body > header.min-h-screen h1 {
        font-size: clamp(3.2rem, 16vw, 4.6rem) !important;
        line-height: 1.18 !important;
    }
    .hero-handwriting svg { opacity: 0.4; }

    section#service .tech-card { padding: 2.5rem 1.75rem !important; }

    /* 「仲間を募集中」をスマホで 1 行に収める。
       6文字 + letter-spacing 0.06em で 6.4em 程度。
       9vw のフォントなら 320px viewport で 28.8px → 6.4em ≈ 184px (画面幅288pxに収まる)。
       white-space: nowrap で念のため折り返しを禁止。 */
    section#recruit h2 {
        font-size: clamp(2.4rem, 14vw, 3.6rem) !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   HakkouMincho 適用 — 「やりたいこと、ぜんぶやる」「仲間を募集中」のみ
   フォントだけ差し替え、サイズ・色は現状維持。
   さらに recruit h2 (「仲間を募集中」) の色合いを hero h1 (「ぜんぶやる」) と揃える：
     - color: var(--color-text-onsky) （= #ffffff、共通）
     - text-shadow: hero と同じ薄い navy 1段
     - font-weight: hero と同じ 700 に揃える（厚い 800 だと色が違って見える原因になる）
   ========================================================================== */

/* Hero h1 全体（やりたいこと、ぜんぶやる）と内側の brush-char すべてに HakkouMincho を強制。
   Tailwind ランタイムが後から base font を注入する／filter compositing で再ラスタライズ
   されたとき fallback に戻る等の防御として、子孫すべてに明示する。 */
body > header.min-h-screen h1,
body > header.min-h-screen h1 .bg-gradient-to-r.from-yellow-400.via-white.to-cyan-400,
body > header.min-h-screen h1 .brush-char,
body > header.min-h-screen h1 .bg-gradient-to-r.from-yellow-400.via-white.to-cyan-400 .brush-char {
    font-family: 'HakkouMincho', var(--font-base) !important;
}

/* Recruit h2 「仲間を募集中」 + その中の brush-char にも明示 */
section#recruit h2,
section#recruit h2 .brush-char {
    font-family: 'HakkouMincho', var(--font-base) !important;
    /* 色合いを「ぜんぶやる」に揃える（hero h1 と同じ rim 1段、navy 系の薄影） */
    color: var(--color-text-onsky) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 18, 40, 0.45) !important;
    /* サイズ・letter-spacing・margin は現状維持（既存の section#recruit h2 設定がそのまま生きる） */
}

/* ==========================================================================
   筆書きアニメ（なめらか版） — 一文字ずつ墨が紙に染みていく
   対象: hero h1 (やりたいこと、ぜんぶやる) と recruit h2 (仲間を募集中)
   方針: 多段 keyframe / rotate / scale を撤去し、clip-path + 軽い blur + opacity
        だけの素直な単方向アニメに。easing は ease-out 寄りで一気に滑らかに走らせる。
   ========================================================================== */
@keyframes brush-stroke-in {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        filter: blur(4px);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
    }
}
.brush-char {
    display: inline-block;
    opacity: 0;
    will-change: clip-path, filter, opacity;
    /* glyph の縦余裕（clip-path で切らないため） */
    line-height: 1.18;
    padding: 0.05em 0.01em;
    overflow: visible;
}
.brush-char[data-armed="1"] {
    animation: brush-stroke-in 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--brush-delay, 0s);
}
/* PC のみ：句読点（、 。）は clip-path を使わず素直に fade-in。
   グリフが em-square 下端に乗るため、上→下クリップだと終盤まで見えず
   「順序通りに発火しているのに句読点だけ後出し」に見えてしまうため。
   モバイルは元の brush-stroke-in のままで問題ないので変更しない。 */
@media (min-width: 769px) {
    @keyframes brush-punct-in {
        0%   { opacity: 0; filter: blur(3px); }
        100% { opacity: 1; filter: blur(0); }
    }
    .brush-char--punct[data-armed="1"] {
        animation: brush-punct-in 0.4s ease-out forwards;
        animation-delay: var(--brush-delay, 0s);
        clip-path: none;
    }
}
/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
    .brush-char,
    .brush-char[data-armed="1"] {
        opacity: 1 !important;
        clip-path: none !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   ANIMATION PACK — 2026-05-09
   方針: 「アニメーション」だけを足す。新しい視覚要素（ピル状の帯、虹色の枠、
   グリッド模様、カーソル追従、舞い上がる粒子、進捗バー、フッター上端の彩色
   ストライプ等）はいっさい追加しない。**既存要素の動き** だけで賑やかさを出す。
   ★ #company は引き続き除外。
   ========================================================================== */

/* ---- Service tech-card: hover lift + 3D tilt + icon bob (既存要素の動きのみ) ---- */
section#service .tech-card {
    perspective: 1200px;
    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1.2),
        box-shadow 0.45s ease,
        border-color 0.45s ease !important;
}
section#service .tech-card:hover {
    transform: translateY(-10px) rotateX(3deg) rotateY(-3deg) !important;
    box-shadow: 0 24px 50px rgba(9, 139, 222, 0.20);
}
section#service .tech-card > div.w-12.h-12 {
    transition: transform 0.5s var(--motion-easing-soft);
}
section#service .tech-card:hover > div.w-12.h-12 {
    transform: rotate(-8deg) scale(1.18);
}
@keyframes icon-idle-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
section#service .tech-card > div.w-12.h-12 svg,
section#service .tech-card > div.w-12.h-12 .lucide {
    animation: icon-idle-bob 4.5s ease-in-out infinite;
}
section#service .tech-card:nth-child(1) > div.w-12.h-12 svg { animation-delay: 0s;   }
section#service .tech-card:nth-child(2) > div.w-12.h-12 svg { animation-delay: 0.6s; }
section#service .tech-card:nth-child(3) > div.w-12.h-12 svg { animation-delay: 1.2s; }

/* ---- Service card: subtle border breathe (既存ボーダーの色だけ動かす) ---- */
@keyframes border-breathe {
    0%, 100% { border-color: rgba(9, 139, 222, 0.10); }
    50%      { border-color: rgba(9, 139, 222, 0.28); }
}
section#service .tech-card { animation: border-breathe 6s ease-in-out infinite; }
section#service .tech-card:nth-child(2) { animation-delay: 2s; }
section#service .tech-card:nth-child(3) { animation-delay: 4s; }

/* ---- Mission accent-line — 既存の細線を background-position で動かす（色は単色） ---- */
@keyframes accent-line-pulse {
    0%, 100% { opacity: 0.7; transform: scaleX(0.85); }
    50%      { opacity: 1;   transform: scaleX(1.0);  }
}
section#mission .accent-line {
    transform-origin: left center;
    animation: accent-line-pulse 4s ease-in-out infinite;
}

/* ---- News item: hover で軽く右にずれる（位置の動きのみ・色変更なし） ---- */
section#news .news-item {
    transition: transform 0.35s var(--motion-easing-soft);
}
section#news .news-item:hover { transform: translateX(6px); }
section#news .news-item time { transition: transform 0.35s ease; }
section#news .news-item:hover time { transform: scale(1.06); }

/* ---- Works mascot wiggle on hover (既存マスコット画像の動きのみ) ---- */
@keyframes mascot-wiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    25%      { transform: rotate(-3deg) scale(1.04); }
    75%      { transform: rotate(3deg) scale(1.04); }
}
.works-card:hover .works-card__mascot {
    animation: mascot-wiggle 1.6s ease-in-out infinite;
}

/* ---- Hero status pill: brighter pulse (既存緑ピルの box-shadow 拡散のみ) ---- */
@keyframes hero-pill-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(80, 227, 164, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(80, 227, 164, 0.00); }
}
body > header.min-h-screen .bg-green-500 {
    animation: hero-pill-glow 2.4s ease-out infinite, pulse-dot 2.4s ease-out infinite;
}

/* ---- Recruit photo pan — 既存写真の background-position を動かすだけ ---- */
@keyframes recruit-photo-pan {
    0%, 100% { background-position: center 30%; }
    50%      { background-position: center 70%; }
}
section#recruit > div.max-w-4xl {
    animation: recruit-photo-pan 18s ease-in-out infinite;
}

/* ---- Buttons: hover lift（既存ボタンの transform のみ。色変更なし） ---- */
section:not(#company) .btn-tech,
section:not(#company) a.btn-tech,
body > header.min-h-screen .btn-tech {
    transition:
        transform 0.25s var(--motion-easing-soft),
        box-shadow 0.25s ease;
}
section:not(#company) .btn-tech:hover,
section:not(#company) a.btn-tech:hover,
body > header.min-h-screen .btn-tech:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 32px rgba(9, 139, 222, 0.30);
}

/* ---- Footer logo bob (既存ロゴの translateY のみ) ---- */
@keyframes footer-logo-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.site-footer__logo-mark { animation: footer-logo-bob 5s ease-in-out infinite; }

/* ---- Eyebrow tag — soft blink（既存ラベルの opacity のみ） ---- */
@keyframes eyebrow-blink {
    0%, 92%, 100% { opacity: 1; }
    95%           { opacity: 0.6; }
}
section#mission span.font-tech,
section#service span.font-tech,
section#news   span.font-tech,
section#recruit span.font-tech {
    animation: eyebrow-blink 6.5s ease-in-out infinite;
}

/* ---- Scroll-hint bouncier
   ★注意: .hero-scroll-hint は translateX(-50%) で中央寄せされている。
   transform は shorthand なので keyframe で translateY だけ指定すると
   X 中央寄せが消えて右にズレる。translate(-50%, ...) で X を維持する。 */
@keyframes scroll-hint-bounce {
    0%, 100% { transform: translate(-50%, 0);    opacity: 1; }
    50%      { transform: translate(-50%, 8px);  opacity: 0.7; }
}
.hero-scroll-hint { animation: scroll-hint-bounce 2.4s ease-in-out infinite; }

/* ---- Hero CTA breath（既存 CTA の translateY のみ・色変更なし） ---- */
@keyframes hero-cta-breath {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
body > header.min-h-screen .flex.flex-wrap.gap-4 a {
    animation: hero-cta-breath 5s ease-in-out infinite;
}
body > header.min-h-screen .flex.flex-wrap.gap-4 a:nth-child(2) {
    animation-delay: 1s;
}

/* ---- Section h2 wobble on visible（既存見出しの軽い回転のみ） ---- */
@keyframes h2-wobble-in {
    0%   { transform: rotate(0deg)    scale(1); }
    20%  { transform: rotate(-1.5deg) scale(1.02); }
    40%  { transform: rotate(1deg)    scale(1.04); }
    60%  { transform: rotate(-0.5deg) scale(1.02); }
    100% { transform: rotate(0)       scale(1); }
}
section#mission .fade-blur.visible h2,
section#service .fade-blur.visible h2,
section#news    .fade-blur.visible h2,
section#recruit .fade-blur.visible h2 {
    display: inline-block;
    animation: h2-wobble-in 0.9s ease-out, heading-shimmer 12s ease-in-out infinite 0.9s;
}

/* ---- Hero handwriting — float をやや早めに（既存の duration 上書きのみ） ---- */
.hero-handwriting svg {
    animation-duration: 6.5s !important;
}

/* ==========================================================================
   ★★★ COMPANY GUARD (FESTIVE PACK 用) ★★★
   FESTIVE ANIMATION PACK で導入したアニメは、いかなる場合も
   section#company / .company-row 配下に侵入しない。
   念のためここで全 keyframe をリセットする。
   ========================================================================== */
section#company,
section#company *,
section#company .company-row,
section#company .company-row * {
    animation-name: none !important;
}
/* opacity の縦方向 fade-up（直前の設計）は引き続き .company-row だけに許可。
   ここで一括禁止すると会社概要のアニメが消えるので、上の reset から
   .company-row.is-revealing は除外する。 */
section#company .company-row.is-revealing {
    animation-name: none !important;
}
/* h2 シマー band（heading-shimmer）は会社概要も含めて従来通り維持。
   ユーザー指示「会社概要はいまのまま」なので既存挙動を変えない。
   h2 セレクタ `section#company h2` は specificity (0,1,0,2) で
   上の `section#company *` (0,1,0,1) より強く、shimmer は生き残る。 */

/* hairline-pulse の派手グラデは #company だけ無効化（情報テーブルの境界線は静かに） */
section#company > div > div.border-t {
    background-image: none !important;
    animation: none !important;
    border-top: 1px solid var(--color-border-subtle) !important;
}


/* ==========================================================================
   Recruit Page (page-recruit.php / single-recruit.php) — シンプル一覧版
   応募・面談はすべて外部求人サイトで受け付けるため、本ページは
   「一覧と外部リンク」だけに絞った静かな構成。
   ========================================================================== */

.recruit-page {
    background: var(--color-surface-base);
    color: var(--color-text-primary);
}
body.page-template-page-recruit,
body.single-recruit {
    background: var(--color-surface-base) !important;
}
body.page-template-page-recruit > header,
body.single-recruit > header {
    display: none !important;
}

.rec-section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.rec-section-inner--narrow {
    max-width: 880px;
}
@media (min-width: 640px) {
    .rec-section-inner { padding: 0 1.75rem; }
}

/* ---------------- HERO (lite) ---------------- */
.rec-hero--lite {
    position: relative;
    padding: 8rem 1.25rem 3rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle);
    background:
        linear-gradient(180deg, var(--color-surface-cloud) 0%, var(--color-surface-base) 100%);
    overflow: hidden;
}
@media (min-width: 768px) {
    .rec-hero--lite { padding: 10rem 2rem 4rem; }
}
.rec-hero-deco {
    position: absolute;
    top: -120px; right: -80px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,149,236,0.18) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
}
.rec-hero-eyebrow-lite {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(0, 149, 236, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
}
.rec-hero-title-lite {
    font-family: var(--font-base);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
}
.rec-hero-accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-water) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rec-hero-lead-lite {
    font-size: 0.95rem;
    line-height: 1.95;
    color: var(--color-text-secondary);
    max-width: 640px;
}

/* ---------------- LIST SECTION ---------------- */
.rec-list-section {
    padding: 3rem 1.25rem 7rem;
}
@media (min-width: 768px) {
    .rec-list-section { padding: 4rem 2rem 8rem; }
}
.rec-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
}
.rec-list-count {
    font-family: var(--font-tech);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
}
.rec-list-count em {
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    color: var(--color-accent);
    font-weight: 600;
    margin-left: 0.5rem;
}
.rec-list-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

/* ---------------- CARD LIST (horizontal cards w/ thumbnail) ---------------- */
.rec-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.rec-card {
    background: #ffffff;
    border: 1px solid var(--color-border-subtle);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 360ms var(--motion-easing-soft),
                box-shadow 360ms var(--motion-easing-soft),
                border-color 240ms ease;
}
.rec-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 149, 236, 0.45);
    box-shadow: 0 22px 50px rgba(9, 60, 110, 0.16);
}

.rec-card-link {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    color: inherit;
    text-decoration: none;
    min-height: 100%;
}
@media (min-width: 768px) {
    .rec-card-link {
        grid-template-columns: 260px 1fr auto;
        gap: 0;
    }
}

/* サムネ */
.rec-card-thumb-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-surface-soft);
    isolation: isolate;
}
@media (min-width: 768px) {
    .rec-card-thumb-wrap {
        aspect-ratio: auto;
        align-self: stretch;
        height: auto;
        min-height: 180px;
    }
}
/* WPがimgに付ける width/height 属性に勝つため absolute+inset+!important で枠に固定 */
.rec-card-thumb,
.rec-card-thumb-wrap > img,
.rec-card-thumb-wrap > img.wp-post-image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 600ms var(--motion-easing-soft), filter 360ms;
}
/* フォールバック (グラデ + initial) はフロー要素なので absolute から除外 */
.rec-card-thumb-wrap > .rec-card-thumb--fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.rec-card:hover .rec-card-thumb,
.rec-card:hover .rec-card-thumb-wrap > img {
    transform: scale(1.05);
}
.rec-card-thumb--fallback {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rec-card-thumb-initial {
    font-family: var(--font-tech);
    font-size: clamp(3.5rem, 9vw, 5.5rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.04em;
    text-shadow: 0 4px 24px rgba(0,0,0,0.18);
    z-index: 1;
}
.rec-card-thumb-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    opacity: 0.55;
}

.rec-card-cat {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    font-family: var(--font-tech);
    font-size: 0.65rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-accent-strong);
    border-radius: 999px;
    font-weight: 700;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* 本体 */
.rec-card-body {
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
@media (min-width: 768px) {
    .rec-card-body { padding: 1.75rem 1.75rem; }
}
.rec-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.55;
    margin: 0 0 0.5rem;
    letter-spacing: -0.005em;
    transition: color 200ms;
}
@media (min-width: 768px) {
    .rec-card-title { font-size: 1.35rem; }
}
.rec-card:hover .rec-card-title { color: var(--color-accent-strong); }

.rec-card-desc {
    font-size: 0.875rem;
    line-height: 1.85;
    color: var(--color-text-secondary);
    margin: 0 0 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-card-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-family: var(--font-tech);
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}
.rec-card-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.rec-card-meta li i,
.rec-card-meta li svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* CTA カラム */
.rec-card-cta {
    display: none;
}
@media (min-width: 768px) {
    .rec-card-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0 2rem;
        border-left: 1px dashed var(--color-border-subtle);
        color: var(--color-text-muted);
        transition: color 240ms ease, background-color 240ms ease;
    }
}
.rec-card:hover .rec-card-cta {
    color: var(--color-accent);
    background-color: rgba(0, 149, 236, 0.04);
}
.rec-card-cta-label {
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    font-weight: 700;
}
.rec-card-cta-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--color-surface-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 260ms ease, transform 260ms ease;
}
.rec-card:hover .rec-card-cta-icon {
    background: var(--color-accent);
    color: #ffffff;
    transform: translate(3px, -3px);
}
.rec-card:hover .rec-card-cta-icon svg,
.rec-card:hover .rec-card-cta-icon i { color: #ffffff; }

.rec-list-empty-note {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------------- SINGLE (フォールバック表示専用) ---------------- */
.rec-single-body {
    padding: 8rem 1.25rem 7rem;
}
@media (min-width: 768px) {
    .rec-single-body { padding: 10rem 2rem 8rem; }
}
.rec-single-crumb--light {
    margin-bottom: 1.5rem;
    font-family: var(--font-tech);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}
.rec-single-crumb--light a {
    color: var(--color-accent-strong);
    text-decoration: none;
    transition: color 200ms;
}
.rec-single-crumb--light a:hover { color: var(--color-accent); }

.rec-single-title--light {
    font-family: var(--font-base);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0.5rem 0 1rem;
}
.rec-list-meta--light {
    margin-bottom: 2rem;
}
.rec-single-content {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-primary);
    margin-top: 1.5rem;
}
.rec-single-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2.25rem 0 0.85rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-accent);
}
.rec-single-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.75rem 0 0.6rem;
}
.rec-single-content p { margin-bottom: 1.25rem; }
.rec-single-content ul,
.rec-single-content ol { margin: 0 0 1.5rem 1.5rem; }
.rec-single-content a {
    color: var(--color-accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}