@charset "UTF-8";

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-weight: normal;
            text-decoration: none;
        }

        /* =========================================
   Design Variables (Root)
   ========================================= */
        :root {
            /* --- Colors (前回と同じ設定) --- */
            --color-white: 255,255,255;
            --color-black: 10,10,10;
            --color-key-1: 50, 191, 192;
            /* --color-key-1: rgba(255, 153, 0, 1); */
            --color-key-2: 0, 42, 108;
            --color-key-3: 255, 0, 173;
            --color-bg-light: 255,255,255;
            --color-shadow: 10,10,10;
            --color-gray: 244, 244, 244;
            --color-border: #ddd;
            --color-border-light: #ccc;

            /* --- 2026-09-24 クライアント指示で追加した色 ---
               トップページのヒーローCTA「無料会員登録」用オレンジ（仮）。
               ブランド3色に無い色なので、正式な指定が決まったらここだけ差し替える。 */
            --color-orange: 232, 122, 24;

            /* --- Layout --- */
            --content-max-width: 1260px;

            /* --- Filters --- */
            --filter-to-key-1: brightness(0) saturate(100%) invert(62%) sepia(75%) saturate(400%) hue-rotate(133deg) brightness(95%) contrast(90%);
            --filter-to-white: brightness(0) invert(1);

            /* --- Font Sizes (Fluid / Responsive) --- */
            /* clamp(最小サイズ, 推奨計算式, 最大サイズ) を使用 */
            /* スマホ(最小)からPC(最大)の間でなめらかに変動します */
            --font-xxx-small: clamp(0.425rem, 0.4rem + 0.175vw, 0.55rem);
            --font-xx-small: clamp(0.625rem, 0.6rem + 0.2vw, 0.75rem);
            /* 10px - 12px */
            --font-x-small: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
            /* 12px - 14px */
            --font-small: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
            /* 14px - 16px */
            --font-xx-middle: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
            /* 16px - 18px (基本) */
            --font-x-middle: clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);
            /* 18px - 20px */
            --font-middle: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
            /* 20px - 24px */

            /* 見出し用（変化幅を大きく設定） */
            --font-large: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
            /* 24px - 32px */
            --font-x-large: clamp(2rem, 1.5rem + 2.5vw, 3rem);
            /* 32px - 48px */
            --font-xx-large: clamp(3rem, 2.2rem + 4vw, 5rem);
            /* 48px - 80px */
            --font-xxx-large: clamp(4rem, 3rem + 5vw, 7.5rem);
            /* 64px - 120px (インパクト重視) */

            /* --- Line Heights (サイズごとの最適値) --- */
            --lh-tight: 1.15;
            /* 特大見出し用（行間を締める） */
            --lh-heading: 1.3;
            /* 通常見出し用 */
            --lh-body: 1.8;
            /* 本文用（読みやすく広め） */
            --lh-loose: 2.0;
            /* 小さい文字用（視認性確保） */
        }

        /* =========================================
   Typography Utility Classes
   ========================================= */

        /* 特大見出し: タイトル、ヒーローエリア */
        .font-xxx-large {
            font-size: var(--font-xxx-large);
            line-height: var(--lh-tight);
            letter-spacing: -0.03em;
            /* 巨大な文字は少し詰めた方が締まる */
        }

        /* 大見出し: セクションタイトル */
        .font-xx-large {
            font-size: var(--font-xx-large);
            line-height: var(--lh-tight);
            letter-spacing: -0.02em;
        }

        /* 中見出し: カードタイトル、強調 */
        .font-x-large {
            font-size: var(--font-x-large);
            line-height: var(--lh-heading);
            letter-spacing: -0.01em;
        }

        /* 小見出し: リストヘッダー */
        .font-large {
            font-size: var(--font-large);
            line-height: var(--lh-heading);
        }

        /* 本文: 重要なリード文 */
        .font-middle {
            font-size: var(--font-middle);
            line-height: var(--lh-body);
        }

        /* 本文: 標準サイズ (PC) */
        .font-x-middle {
            font-size: var(--font-x-middle);
            line-height: var(--lh-body);
        }

        /* 本文: ベースサイズ */
        .font-xx-middle {
            font-size: var(--font-xx-middle);
            line-height: var(--lh-body);
        }

        /* 注釈、ボタンテキスト */
        .font-small {
            font-size: var(--font-small);
            line-height: var(--lh-loose);
        }

        /* タグ、補足情報 */
        .font-x-small {
            font-size: var(--font-x-small);
            line-height: var(--lh-loose);
        }

        /* コピーライト、極小ラベル */
        .font-xx-small {
            font-size: var(--font-xx-small);
            line-height: var(--lh-loose);
            letter-spacing: 0.05em;
            /* 小さい文字は少し広げた方が読みやすい */
        }

        /* =========================================
   Color Utility Classes
   ========================================= */

        /* --- 1. Text Color (文字色) --- */
        .color-white {
            color: rgba(var(--color-white),1);
        }

        .color-black {
            color: rgba(var(--color-black),1);
        }

        .color-gray {
            color:  rgba(var(--color-gray),);
        }

        .color-key-1 {
            color:  rgba(var(--color-key-1),1);
        }

        .color-key-2 {
            color:  rgba(var(--color-key-2),1);
        }

        .color-key-3 {
            color:  rgba(var(--color-key-3),1);
        }

        /* --- 2. Background Color (背景色) --- */
        .bg-white {
            background-color: rgba(var(--color-white),1);
        }

        .bg-black {
            background-color: rgba(var(--color-black),1);
        }

        .bg-light {
            background-color:  rgba(var(--color-bg-light),1);
        }

        .bg-gray {
            background-color:  rgba(var(--color-gray),1);
        }

        .bg-key-1 {
            background-color:  rgba(var(--color-key-1),1);
        }

        .bg-key-2 {
            background-color:  rgba(var(--color-key-2),1);
        }

        .bg-key-3 {
            background-color:  rgba(var(--color-key-3),1);
        }

        /* --- 3. Border Color (枠線色) --- */
        /* ボーダーを表示するには border: 1px solid などの指定が別途必要です */
        .border-white {
            border-color: rgba(var(--color-white),1);
        }

        .border-black {
            border-color: rgba(var(--color-black),1);
        }

        .border-key-1 {
            border-color:  rgba(var(--color-key-1),1);
        }

        .border-key-2 {
            border-color:  rgba(var(--color-key-2),1);
        }

        .border-key-3 {
            border-color:  rgba(var(--color-key-3),1);
        }

        .border-gray {
            border-color:  rgba(var(--color-gray),);
        }

        /* --- 4. Shadow (影) --- */
        .shadow-base {
            box-shadow: 0 4px 6px rgba(var(--color-shadow),0.2);
        }

        .shadow-lg {
            box-shadow: 0 10px 30px rgba(var(--color-shadow),0.2);
        }

        .pad-top {
            padding: 4rem 0 0;
        }

        .pad-bottom {
            padding: 0 0 4rem;
        }

        .pad-both {
            padding: 4rem 0;
        }


        /* =========================================
   既存のBody等への適用
   ========================================= */
        body {
            font-family: 'Noto Sans JP', sans-serif;
            color: rgba(var(--color-black),1);
            line-height: var(--lh-body);
            font-size: var(--font-xx-middle);
            /* デフォルトをBaseサイズに */
        }

        .font-serif {
            font-family: Roboto, serif;
        }

        li {
            list-style: none;
        }

        /* Utility Classes */
        .flex {
            position: relative;
            display: flex;
        }

        .column {
            flex-direction: column;
        }

        .flex-wrap {
            flex-wrap: wrap;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-space-evenly {
            justify-content: space-evenly;
        }

        .justify-space-around {
            justify-content: space-around;
        }

        .justify-space-between {
            justify-content: space-between;
        }

        .align-center {
            align-items: center;
        }

        .align-start {
            align-items: start;
        }

        .align-end {
            align-items: end;
        }

        .justify-start {
            justify-content: flex-start;
        }

        .justify-end {
            justify-content: flex-end;
        }

        .fullfit-width {
            width: 100%;
            position: relative;
            height: 100%;
        }

        .limited-width {
            max-width: var(--content-max-width);
            width: 100%;
            position: relative;
        }

        header {
            position: fixed !important;
            z-index: 999;
            width: 100%;
            color: rgba(var(--color-white),1);
            --header-padding: 1.5rem;
            padding: var(--header-padding);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* スクロール時のヘッダー：白背景 + キーカラーテキスト */
        header.scrolled {
            background-color: rgba(var(--color-white),1);
            color:  rgba(var(--color-key-1),1);
            box-shadow: 0 2px 8px rgba(var(--color-shadow),0.2);
        }

        header.scrolled nav ul li a {
            color:  rgba(var(--color-key-1),1);
        }

        header.scrolled .btn-dl {
            border-color:  rgba(var(--color-key-1),1);
            color:  rgba(var(--color-key-1),1);
        }

        header.scrolled .btn-dl img {
            filter: var(--filter-to-key-1);
        }

        header.scrolled .btn-est {
            border-color:  rgba(var(--color-key-1),1);
            color: rgba(var(--color-white),1);
        }

        header.scrolled .btn-login {
            border-color: rgba(var(--color-black),1);
            background-color: rgba(var(--color-black),1);
            color: rgba(var(--color-white),1);
        }

        header.scrolled h1,
        header.scrolled h1 span {
            color:  rgba(var(--color-key-1),1);
        }

        /* スクロール時のロゴSVG色変換（白→キーカラー） */
        header h1 img {
            filter: var(--filter-to-white);
        }
        header.scrolled h1 img {
            filter: none;
        }

        /* 2026-09-24 クライアント指示: ロゴマークはスクロール位置に関わらず常に原色で出す
           （TORAI の文字ロゴは従来どおり、トップでは白・スクロール時は原色） */
        header h1 img.logo-mark {
            filter: none;
        }

        header h1 a{
            display: flex;
            gap: .5rem;
            align-items: center;
            flex-wrap: nowrap;
        }

        header h1 a img:nth-child(1) {
            width: auto;
            max-width: 100%;
            height: 24px;
        }

        header h1 a img:nth-child(2) {
            width: auto;
            max-width: 100%;
            height: 20px;
        }

        header h1 a span {
            padding-left: .5rem;
            font-size: var(--font-xx-small);
            white-space: nowrap;
            color: rgba(var(--color-white),1);
        }

        /* 2026-09-24 クライアント指示: ヘッダーにマウスを乗せても全体を白くしない
           （header:hover の指定を外し、開いた .glo-dropdown だけが白くなる） */
        header.scrolled h1 a span {
           color:  rgba(var(--color-key-2),1);
        }



        header nav {
            display: flex;
            width: 100%;
        }

        nav ul {
            gap: 1rem;
            padding: 0 1rem;
        }

        nav ul li a {
            color: rgba(var(--color-white),1);
            text-decoration: none;
            font-size: var(--font-x-small);
            padding: 0.25rem 1rem;
            transition: color 0.3s ease;
        }

        /* glo-nav: liの高さ全体にaを広げる + hoverアンダーバー */
        .glo-nav li {
            display: flex;
            align-items: stretch;
        }

        /* 2026-09-24: ロゴ横のタグラインが長くなった分、グローバルナビの左右を詰める。
           nowrap を付けないと「業務内 容」のように項目内で折り返してヘッダーが2段になる。 */
        header nav ul {
            gap: 0.5rem;
            padding: 0 0.5rem;
        }

        .glo-nav li a {
            padding: var(--header-padding) 0.75rem;
            margin: calc(var(--header-padding) * -1) 0;
            position: relative;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        .glo-nav li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color:  rgba(var(--color-key-1),1);
            transition: width 0.3s ease;
        }

        .glo-nav li a:hover::after {
            width: 100%;
        }

        .btns {
            text-decoration: none;
            padding: 0.5rem 1rem;
            white-space: nowrap;
            transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
        }

        /* 2026-09-24: 見積依頼は遷移しない操作なので <button> に変えた（JSが無効でも
           死んだリンクにならないようにするため）。<a> と同じ見た目に揃える。 */
        button.btns {
            font-family: inherit;
            cursor: pointer;
        }

        /* ヘッダー内のボタンは小さいpadding */
        header .btns {
            padding: 0.25rem 1rem;
        }

        /* ボタン内アイコン: hover時に右に少し動く */
        .btns img {
            transition: transform 0.3s ease;
        }

        .btns:hover img {
            transform: translateX(4px);
        }

        /* Buttons */
        .btn-dl {
            border: 2px solid rgba(var(--color-white),1);
            color: rgba(var(--color-white),1);
        }

        .btn-est {
            background-color:  rgba(var(--color-key-1),1);
            border: 2px solid  rgba(var(--color-key-1),1);
            color: rgba(var(--color-white),1);
        }

        /* お問い合わせボタン（ティール系、btn-estと同色） */
        .btn-contact {
            background-color: rgba(var(--color-key-1),1);
            border: 2px solid rgba(var(--color-key-1),1);
            color: rgba(var(--color-white),1);
        }

        .btn-login {
            background-color: rgba(var(--color-black),1);
            border: 2px solid rgba(var(--color-black),1);
            color: rgba(var(--color-white),1);
        }

        .hero-title {
            color: rgba(var(--color-white),1);
            gap: 2rem;

            position: relative;
            z-index: 2;
        }

        .hero-title h2 {}

        .hero-title .flex {
            color: rgba(var(--color-white),1);

            position: relative;
        }

        .hero-title p {}

        .hero-title p span {

            position: relative;
        }

        .hero-title p span::before {
            background-color:  rgba(var(--color-key-1),1);
            position: absolute;
            bottom: .1rem;
            content: '';
            width: 100%;
            height: .5rem;
            z-index: -1;
        }

        /* 2026-09-24 クライアント指示: ヒーロー見出しの GLE（Global Logistics Engineering）
           の頭文字だけプライマリカラー＋斜体にする。GLE以外の文字は白のまま。 */
        .hero-title .gle-initial {
            color: rgba(var(--color-key-1), 1);
            font-style: italic;
        }

        .hero-btn-box {
            padding: 2rem 0 0;
            gap: 2rem;
        }

        .hero-btn-box a {}

        /* 2026-09-24 クライアント指示: トップのヒーローCTAはヘッダーの「見積依頼」と内容が
           重複していたため、「無料会員登録」（オレンジ）と「無料ツール」に差し替えた。
           ヘッダーの .btn-est / .btn-dl とは別系統のクラスにして、ヘッダー側に影響させない。 */
        .btn-register {
            background-color: rgba(var(--color-orange), 1);
            border: 2px solid rgba(var(--color-orange), 1);
            color: rgba(var(--color-white), 1);
        }

        .btn-tools {
            border: 2px solid rgba(var(--color-white), 1);
            color: rgba(var(--color-white), 1);
        }

        .features-title {
            /* color:  rgba(var(--color-key-1),1); */
            gap: 2rem;
            padding: 2rem;
            position: relative;
            z-index: 2;
            padding: 0 2rem 10rem;
            min-height: 70vh;
        }

        .services-title{
            position: relative;
            z-index: 2;
        }

        main {
            position: relative;
        }

        .section {
            position: relative;
            width: 100%;
        }

        .parallax-bg-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .parallax-video {
            position: relative;
            top: 0;
            left: 0;
            height: 100%;
            object-position: center;
            object-fit: cover;
            overflow: hidden;
            will-change: transform;
                scale: 1.05;
        }

        video {
            position: relative;
            width: 100%;
            opacity: .45;
        }

        .parallax-bg-wrapper:has(video) {
            background: rgba(var(--color-black),1);
        }


        .gray-scale {
            filter: grayscale(1);

        }

        /* キーカラー背景コンテナ（::after z-index:-1 を廃止し ::before z-index:0 に置き換え） */
        .saturate-scale {
            position: relative;
            overflow: hidden;
            height: 100%;
        }

        /* キーカラー背景を絶対配置 ::before で提供（負のz-indexなし → parallax逃げ問題なし） */
        .saturate-scale::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(var(--color-key-1), 0.1);
            z-index: 0;
            pointer-events: none;
        }

        /* 画像を ::before の上に乗算ブレンドで重ねてサイト全体のカラートーンを統一 */
        /* 幅・高さは各コンポーネントのCSSに委ねる */
        .saturate-scale img {
            position: relative;
            z-index: 1;
            mix-blend-mode: multiply;
            filter: saturate(.1);
            display: block;
            transition: filter .2s;
        }

        .saturate-scale:hover img {
            filter: saturate(.7);
        }

        .bg-image .saturate-scale:hover img {
            filter: saturate(.1);
        }

        .parallax-color-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .parallax-color-overlay.world-map-z2 {
            z-index: 3;
        }

        .parallax-color-overlay.world-map-z1 {
            z-index: 3;
        }

        /* Color Overlays using Variables */
        .parallax-color-overlay.world-map-z2 img,
        .parallax-color-overlay.world-map-z1 img,
        .parallax-color-overlay.world-map img {
            width: 100%;
            max-width: 50vw;
            right: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: .55;
            ;
        }
        .parallax-color-overlay.world-map-z2 img,
        .parallax-color-overlay.world-map-z1 img {
            opacity: .95;
        }

        .parallax-video-overlay {
            display: block;
            position: absolute;
            z-index: 2;
            pointer-events: none;
            top: 0px;
            right: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .1);
            background-size: 4px 4px;
            background-image: radial-gradient(rgba(0, 0, 0, .4) 50%, transparent 51%), radial-gradient(rgba(0, 0, 0, .4) 50%, transparent 51%);
            background-position: 0px 0px, 2px 2px;
        }

        .parallax-content {
            position: relative;
            z-index: 3;
            padding: 0 2rem;
        }

        /* 複数の黒背sectionをまとめるラッパー */
        .dark-sections-wrapper {
            position: relative;
            overflow-x: clip;
            z-index: 1;
        }

        /* ドットオーバーレイを::beforeで生成 */
        .dark-sections-wrapper::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            background-color: rgba(0, 0, 0, .1);
            background-size: 4px 4px;
            background-image: radial-gradient(rgba(0, 0, 0, .4) 50%, transparent 51%), radial-gradient(rgba(0, 0, 0, .4) 50%, transparent 51%);
            background-position: 0px 0px, 2px 2px;
        }

        .parallax-video-overlay-wrapper {
            display: block;
            position: relative;
            z-index: 0;
            pointer-events: none;
            top: 0px;
            right: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .1);
            background-size: 4px 4px;
            background-image: radial-gradient(rgba(0, 0, 0, .4) 50%, transparent 51%), radial-gradient(rgba(0, 0, 0, .4) 50%, transparent 51%);
            background-position: 0px 0px, 2px 2px;
        }



        .feature-grid-new {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            max-width: 1200px;
            margin: 0 auto;

            position: relative;
            z-index: 2;
        }

        .feature-item-new {
            padding: 3rem;
            border: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.4s;
            color: #fff;
            background:  rgba(var(--color-key-1),1);
            position: relative;
            text-decoration: none;
            cursor: pointer;
        }

        .feature-item-new:hover {
            background: rgba(255, 255, 255, 1);
            color: #000;

        }

        .feature-item-new:last-child {
            border-right: none;
        }

        .icon-circle {
            width: 60px;
            height: 60px;
            border: 1px solid var(--color-border-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-item-new h3 {
            
            font-size: 2rem;
            margin: 1.5rem 0;
        }

        .feature-item-new p {
            font-size: 0.9rem;
            opacity: 0.7;
            line-height: 1.8;
        }

        /* feature-item-new 内のセクションアイコン */
/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .feature-item-new .section-icon {
            margin-bottom: 3rem;
            text-align: center;
            display: flex;
            justify-content: center;
        }
--- 廃止ここまで --- */

        /* feature-item-new 内の詳細リンク */
        .feature-link {
            margin-top: 20px;
            display: block;
            text-decoration: underline;
            
            font-style: italic;
        }





        /* スクロールパス・SVG */
/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        #scroll-path {
            position: absolute;
            top: 0;
            left: 50%;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            opacity: 0.9;
        }
--- 廃止ここまで --- */

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        #scroll-path svg {
            width: 100%;
            height: 100%;
        }
--- 廃止ここまで --- */

        @media (max-width: 1080px) {
/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
            #scroll-path {
                display: none;
            }
--- 廃止ここまで --- */
        }

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .section-line-box .font-serif {
            position: relative;
            font-size: var(--font-xxx-small);
            color:  rgba(var(--color-key-1),1);
        }
--- 廃止ここまで --- */

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .section-icon {
            position: relative;
            z-index: 99;
            pointer-events: none;
        }
--- 廃止ここまで --- */

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .section-hero .section-icon {
            top: -5rem;
            position: relative;

        }
--- 廃止ここまで --- */

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .section-icon svg {
            filter: drop-shadow(0 2px 6px  rgba(var(--color-key-1),1));
            ( 色固定のままでも良いが、本来ならKey3変数でdrop-shadow )
        }
--- 廃止ここまで --- */

        /* Section Icon Colors */
/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .section-icon svg circle {
            stroke:  rgba(var(--color-key-1),1);
            fill: rgba(var(--color-white),1);
        }
--- 廃止ここまで --- */

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .section-icon.active svg circle {
            stroke: rgba(var(--color-white),1);
            fill:  rgba(var(--color-key-1),1);
        }
--- 廃止ここまで --- */

        .section-hero {
            height: 95vh;
            width: 100%;
            border: .5rem solid #fff;

        }

        .section-features {
            min-height: 140%;
            height: 140%;
            position: relative;
            /* padding: 0 0 10rem; */
            background-color: rgba(var(--color-white),1);
            width: 100%;
            /* 横方向のはみ出しのみクリップ（::before/::afterのscale用） */
            /* 縦方向は制限しないので js-scroll-move-y が自由に移動可能 */
            overflow-x: clip;
        }

        .section-features::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../img/svg/bg_dot_ci.svg);
            background-size: auto 100px;
            background-position: center center;
            background-repeat: repeat;
            opacity: 0.7;
            filter: blur(1px);
            z-index: 0;
            pointer-events: none;
        }

        .section-features::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(../img/svg/bg_dot_black.svg);
            background-size: auto 100px;
            background-position: center center;
            background-repeat: repeat;
            animation: heartbeatCenter 3s ease-in-out infinite;
            z-index: 1;
            pointer-events: none;
        }

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .section-features .section-line-box.gle {
            padding-top: 10rem;
        }
--- 廃止ここまで --- */

        .section-features>* {
            position: relative;

        }

        @keyframes heartbeatCenter {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            10% {
                transform: scale(1.03);
                opacity: 0.95;
            }

            20% {
                transform: scale(1);
                opacity: 1;
            }

            30% {
                transform: scale(1.06);
                opacity: 0.9;
            }

            40%,
            90% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .features-video-box {
            width: 60%;
            height: 70vh;
            position: absolute;
            top: 15vh;
            left: 0;
            z-index: 2;
        }

        .material-symbols-outlined {
            font-weight: 100 !important;
        }



        /* =========================================
           SECTION 4: PERFORMANCE METRICS - 50/50 LAYOUT
           ========================================= */
        
        .section-performance-metrics .metrics-content {
            width: 40%;
            
        }

        .section-performance-metrics .metrics-visual {
            width: 60%;
            
            display: flex;
            justify-content: flex-start;
            align-items: start;
        }

        .section-performance-metrics .metrics-visual img {
            max-width: 100%;
            height: auto;
        }

        .bg-image img {
            object-fit: cover;
            max-width: 100%;
            width: 100%;
        }

        .bg-image.platform-01 {
            width: 100vw;
            height: 50vh;
            position: absolute;
            z-index: 0;
            left: -50vw;
            bottom: -20vh;
            transform: translateY(-50%);

            overflow: hidden;
            opacity: .4;
        }

        .bg-image.platform-02 {
            width: 20vw;
            height: auto;
            position: absolute;
            z-index: 0;
            right: 0;
            top: 0;

        }

        .bg-image.platform-03 {
            width: 100vw;
            height: 30vh;
            position: absolute;
            z-index: -1;
            left: 0;
            bottom: 0;
            overflow: hidden;
            opacity: .4;
        }

        .bg-image.end-01 {

            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;

        }

        .bg-image.end-01::after{
            content: '';
            width: 55vw;
            height: 40vh;
            background-color: aqua;
            position: absolute;
            z-index: -1;
            bottom: -2.5rem;
            left: 2.5rem;
        }

        .bg-image.end-01 .mask{
            width: 55vw;
            height: 40vh;
            overflow: hidden;
            opacity: 1;
        }


        .bg-image.end-01 img{

        }

        .bg-image.end-02 {
            width: 30vw;
            height: auto;
            position: absolute;
            z-index: 1;
            right: 0;
            bottom: -50vh;

        }

        .bg-image.rc-01 {
            width: 30vw;
            height: auto;
            position: absolute;
            z-index: 1;
            right: 0;
            bottom: -50vh;

        }


        .bg-image.faq-01 {
            width: 20vw;
            height: auto;
            position: absolute;
            z-index: 1;
            left: -5vw;
            bottom: 10vh;

        }

        .bg-image.bg-metrics {
            width: 70vw;
            height: auto;
            position: absolute;
            z-index: 0;
            right: 0;
            top: -10vh;
            opacity: .2;
            filter: saturate(1);
        }

        /* Scroll Progress Bar */
        #scroll-progress-bar {
            position: fixed;
            top: 0;
            right: 0;
            height: 0;
            background: linear-gradient(0deg,  rgba(var(--color-key-1),1),  rgba(var(--color-key-3),1));
            width: .25rem;
            z-index: 9999;
            transition: height 0.1s ease-out;
            box-shadow: 0 0 10px  rgba(var(--color-key-1),1);
        }

        /* 親要素 */
/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .scrolling-bar-obj {
            position: relative;
            
            ( 親要素には高さを指定しない（中身に合わせる）か、十分な高さを確保してください )
        }
--- 廃止ここまで --- */

        /* 動かす対象 */
/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .js-scroll-move-y {
            position: absolute;
            z-index: 999;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-font-smoothing: subpixel-antialiased;
            transition: none !important;
            width: .25rem;
            height: 5rem;
            left: -1rem;
            top: .5rem;
            background-color:  rgba(var(--color-key-3),1);
        }
--- 廃止ここまで --- */


        /* =========================================
           Section: Inline Style → CSS 統合
           ========================================= */

        /* features内側コンテンツ（z-index: 3） */
        .features-inner {
            z-index: 3;
        }

        /* セクション内コンテンツ共通（platform / performance） */
        .section-content {
            min-height: 70vh;
            z-index: 3;
        }

        /* CTAボタングループ */
        .cta-buttons {
            gap: 2rem;
            position: relative;
            z-index: 2;
            height: 100%;

        }

        /* cta-buttons-container: 背景画像チラ見せ */
        .cta-buttons-container {
            position: relative;
            overflow: hidden;
            width: 100%;
    min-height: 300px;
    max-height: 400px;
    height: 100%;
    background-color: #fff;
    z-index: 2;
    margin: 1rem 0 0;
        }

        .cta-bg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 100%;
            background-position: top center;
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: 0;
            /* border: 1px solid rgba(var(--color-key-1), 1);; */
        }

        .cta-bg-layer.active,
        .cta-bg-layer.cta-bg-static {
            opacity: 1;
        }

        .cta-buttons-container .cta-buttons .btn-dl {
            border-color: rgba(var(--color-key-1), 1);
            color: rgba(var(--color-key-1), 1);
            background-color: rgba(var(--color-white), 1);
        }

        .cta-buttons-container .cta-buttons .btn-dl img {
            filter: var(--filter-to-key-1);
        }

        .cta-bg-gradient {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 90%, rgba(255,255,255,1) 100%); */
            z-index: 1;
            pointer-events: none;
        }

        .section-cta .cta-buttons-container {
            min-height: 300px;
            margin: 4rem 0 0;
        }

        /* CTAセクション */
        .section-cta {
            position: relative;
            min-height: 70vh;
            overflow: clip;
        }

        /* CTA内 world-map は全幅表示 */
        .section-cta .world-map img,
        .section-cta .world-map-z1 img,
        .section-cta .world-map-z2 img {
            max-width: 100vw;
        }

        /* CTA内コンテンツ（z-index: 1） */
        .section-cta-content {
            position: relative;
            z-index: 3;
        }

        /* footer */
        footer {}

        .footer-brand {
            margin-right: 1rem;
        }

        /* 2段の flex 構造。各段内は flex で横並び */
        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 4rem;
        }

        /* 各段を6列gridで計算。1段目と2段目でカテゴリの水平スタート位置を揃えるため
           （flex比だと段ごとに合計値が変わって幅がズレる） */
        .footer-links-row {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 1.5rem;
            align-items: start;
        }

        /* ソリューションのみ4列分占有（GLE 1 + 業務内容 1 + ソリューション 4 = 6） */
        .footer-links-row > .footer-col-wide {
            grid-column: span 4;
        }

        /* 1段目（GLE/業務内容/ソリューション）の下に連続した1本の区切り線 */
        .footer-links-row--bordered {
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(var(--color-black), 0.4);
        }

        /* ヘッダー scrolled 状態と同じ見え方（SVG2つ + キャッチコピー key-2 色） */
        .footer-logo {
            gap: .5rem;
        }

        .footer-logo img:nth-child(1) {
            width: auto;
            max-width: 100%;
            height: 24px;
        }

        .footer-logo img:nth-child(2) {
            width: auto;
            max-width: 100%;
            height: 20px;
        }

        .footer-logo span {
            padding-left: .5rem;
            color: rgba(var(--color-key-2), 1);
            white-space: nowrap;
        }

        .footer-copyright {
            padding: 1rem 0;
        }

        footer a {
            text-decoration: none;
            color: rgba(var(--color-black),1);
            transition: color 0.2s ease;
        }

        footer a:hover {
            color: rgba(var(--color-key-1),1);
        }

        /* テキストリンクの下線 hover アニメーション
           （ロゴ a は除外）。下線が左→右へ伸びる演出 */
        footer ul a,
        .footer-category-title a {
            position: relative;
            display: inline-block;
        }

        footer ul a::after,
        .footer-category-title a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 1px;
            background-color: rgba(var(--color-key-1), 1);
            transition: width 0.3s ease;
        }

        @media (hover: hover) {
            footer ul a:hover::after,
            .footer-category-title a:hover::after {
                width: 100%;
            }
        }

        /* footer-brand と footer-links を縦並びに、それぞれ幅100% */
        footer .grid {
            display: flex;
            flex-direction: column;
            gap: 3rem;
        }

        .footer-brand {
            width: 100%;
            gap: 2rem;
            align-items: flex-start;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(var(--color-black), 0.4);
        }

        .footer-brand-intro {
            gap: 1rem;
        }

        .footer-brand-contact {
            gap: .5rem;
            align-items: flex-end;
            text-align: right;
        }

        .footer-links {
            width: 100%;
        }

        footer .grid .flex.column {
            gap: 1rem;
        }

        footer .grid .flex.column>div:first-child,
        footer .grid .flex.column>a:first-child {
            margin-bottom: 1rem;
        }

        footer ul {
            gap: 1rem;
        }

        .footer-category-title {
            padding-bottom: 0.5rem;
        }

        .footer-category-title a {
            font-weight: 500;
        }

        /* 第1階層カテゴリリンク（業務内容直下／テクノロジー等のサブカテゴリ親／事例1 等）
           全列でサイズ・太さを統一する */
        .footer-subcat {
            display: inline-block;
            font-weight: 500;
            font-size: 1.3em;
            padding-left: 0.5rem;
        }

        /* サブカテゴリ配下の子ページリスト（左パディングで階層を視覚化） */
        .footer-sublinks {
            padding-left: 1rem;
            margin-top: 0.5rem;
            gap: 0.5rem !important;
            border-left: 1px solid rgba(var(--color-gray), 0.3);
        }

        .footer-sublinks a {
            color: rgba(var(--color-black), 0.7);
            font-weight: 400;
        }

        /* ソリューション内のサブカテゴリ3つを横3列で並べる */
        .footer-subcat-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.5rem;
        }

        #index-form {

            opacity: .9;
            width: 400px;

        }

        #index-form ul {
            gap: 2px;
            z-index: 1;
        }

        #index-form ul li {
            background-color: rgba(255, 255, 255, .4);
            padding: .25rem .5rem;

            flex-grow: .2;
            align-items: center;
            justify-content: center;
            display: flex;
            cursor: pointer;

        }

        #index-form ul li.active {
            background-color: rgba(255, 255, 255, 1);

        }

        #index-form ul li a {
            position: relative;
            top: 6px;
        }

        #index-form .index-form-container {
            background-color: rgba(var(--color-white),1);
            padding: 1rem;
            width: 100%;
            max-width: 400px;
            color: rgba(var(--color-black),1);
        }

        #index-form>div div {
            width: 100%;
            position: relative;
            gap: 1rem;
        }

        #index-form label {
            position: relative;
            width: 100%;
        }

        #index-form label::before {
            content: "";
            position: absolute;
            left: .5rem;
            top: -.5rem;
            color: rgba(var(--color-black),1);
            z-index: 1;
            font-size: var(--font-xxx-small);
            background-color: rgba(var(--color-white),1);
            padding: .25rem .5rem;
        }

        /* 海運 */
        #index-form label[for="s-start"]::before { content: "出発地→"; }
        #index-form label[for="s-end"]::before { content: "→到着地"; }
        #index-form label[for="s-cont_num"]::before { content: "コンテナ数"; }
        #index-form label[for="s-etd"]::before { content: "ETD"; }

        /* 陸運 */
        #index-form label[for="l-start"]::before { content: "集荷先"; }
        #index-form label[for="l-end"]::before { content: "配送先"; }
        #index-form label[for="l-type"]::before { content: "車種"; }
        #index-form label[for="l-date"]::before { content: "希望日"; }

        /* 航空 */
        #index-form label[for="a-start"]::before { content: "出発空港"; }
        #index-form label[for="a-end"]::before { content: "到着空港"; }
        #index-form label[for="a-weight"]::before { content: "重量"; }
        #index-form label[for="a-date"]::before { content: "希望日"; }

        /* 倉庫 */
        #index-form label[for="w-area"]::before { content: "エリア"; }
        #index-form label[for="w-size"]::before { content: "保管量"; }
        #index-form label[for="w-type"]::before { content: "貨物種別"; }
        #index-form label[for="w-period"]::before { content: "開始日"; }

        #index-form input[type="text"],
        #index-form input[type="date"],
        #index-form select {
            padding: 1rem .75rem;
            border: 1px solid  rgba(var(--color-gray),);
            font-size: var(--font-small);
            width: 100%;
            position: relative;
            background-color: rgba(var(--color-white),1);
            color: rgba(var(--color-black),1);
        }



        /* .pop-sc .flex a {
            padding: .25rem .5rem;
            border-radius: .25rem;
            border: 1px solid rgba(var(--color-black),1);
            font-size: var(--font-xx-small);
            text-decoration: none;
            color: rgba(var(--color-black),1);
        }

        .pop-sc {
            padding: 0 0 1rem;
        } */

        /* =========================================
           GLOBAL NAVIGATION (Mega Menu)
           ========================================= */
        
        /* Header items with dropdown */
        header nav ul li.has-dropdown {
            position: relative;
        }

        /* Header background on hover
           2026-09-24 クライアント指示により header:hover を撤去。
           ヘッダー全体は白くせず、開いたプルダウン（.glo-dropdown）だけが白くなる。
           スクロール時の白背景（header.scrolled）はそのまま維持。 */
        header.mega-menu-open {
            background-color: rgba(var(--color-white),1) !important;
            color:  rgba(var(--color-key-1),1) ;
            box-shadow: 0 2px 8px rgba(var(--color-shadow),0.2);
        }

        header.mega-menu-open h1 span{
            color:  rgba(var(--color-key-2),1) !important;
        }

        header.mega-menu-open nav ul li a {
            color:  rgba(var(--color-key-1),1);
        }


        header.mega-menu-open .btn-dl {
            border-color:  rgba(var(--color-key-1),1);
            color:  rgba(var(--color-key-1),1);
        }

        header.mega-menu-open .btn-dl img {
            filter: var(--filter-to-key-1);
        }

        header.mega-menu-open .btn-est {
            border-color:  rgba(var(--color-key-1),1);
            color: rgba(var(--color-white),1);
        }

        header.mega-menu-open .btn-login {
            border-color: rgba(var(--color-black),1);
            background-color: rgba(var(--color-black),1);
            color: rgba(var(--color-white),1);
        }

        header.mega-menu-open h1 img {
            filter: none;
        }
        header.mega-menu-open h1 span {
            border-color:  rgba(var(--color-key-2),1);
        }
        /* Mega Menu Container - 共通メガメニュー with Neumorphic Animation */
        header nav .megaMenu {
            position: fixed;
            /* topはJSでheaderの実際の高さに合わせて設定 */
            top: var(--header-height, 72px);
            left: 0;
            right: 0;
            width: 100%;
            
            /* グラスモーフィズム + ニューモフィズム */
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            
            /* ニューモフィックシャドウ - 柔らかい二重影 */
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.08),
                0 2px 8px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            
            /* 初期状態 - 非表示 */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            
            /* アニメーション用のtransform */
            transform: translateY(-20px) scale(0.98);
            transform-origin: top center;
            
            /* スムーズなトランジション */
            transition: 
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            
            z-index: 998;
            padding: 1rem 0;
            
            /* 微細なボーダー */
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-top: none;
        }

        /* Show mega menu on hover - すべてのhas-dropdownにhoverで同じメガメニューを表示 */
        header nav:has(ul li.has-dropdown:hover) .megaMenu,
        header nav .megaMenu:hover {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            
            /* 表示時のアニメーション状態 */
            transform: translateY(0) scale(1);
            
            /* 表示時は影を少し強調 */
            box-shadow: 
                0 16px 48px rgba(0, 0, 0, 0.12),
                0 4px 16px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        
        /* 閉じる処理中はhoverを無効化 + アニメーション */
        header nav.mega-menu-closing:has(ul li.has-dropdown:hover) .megaMenu,
        header nav.mega-menu-closing .megaMenu:hover {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            
            /* 閉じる時のアニメーション */
            transform: translateY(-10px) scale(0.99) !important;
            
            /* より速いトランジション */
            transition: 
                opacity 0.25s cubic-bezier(0.4, 0, 1, 1) !important,
                visibility 0.25s cubic-bezier(0.4, 0, 1, 1) !important,
                transform 0.25s cubic-bezier(0.4, 0, 1, 1) !important,
                box-shadow 0.25s cubic-bezier(0.4, 0, 1, 1) !important;
        }

        @keyframes navSlideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Global Nav Inner Container */
        .global-nav-inner {
            /* max-width: var(--content-max-width); */
            margin: 0 auto;
            padding: 2rem 2rem 4rem;
            width: 100%;
        }

        /* global-nav-inner直下のflex: torai-header + torai-nav の横並び */
        .global-nav-inner > .flex {
            width: 100%;
            gap: 2rem;
        }

        .torai-header {
            width: 20%;
            flex-shrink: 0;
        }

        .torai-nav {
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            gap: 0;
        }

        /* 上段: Service, Technology → 各50% + 動画付き */
        .torai-nav .sp-nav-primary {
            width: calc(50% - 1rem);
            position: relative;
            overflow: hidden;
            margin-right: 1rem;
            margin-bottom: 2rem;
        }

        .sp-nav-primary-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .sp-nav-primary-link .nav-category-title {
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        .sp-nav-primary-link:hover .nav-category-title {
            color: rgba(var(--color-key-1), 1);
            padding-left: 0.5rem;
        }

        .torai-nav .sp-nav-video {
            display: block;
            position: relative;
            width: 100%;
            height: 120px;
            overflow: hidden;
        }

        .torai-nav .sp-nav-video .parallax-bg-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .torai-nav .sp-nav-video video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 下段: Case Study〜Support → 4等分 */
        .torai-nav .nav-category:not(.sp-nav-primary) {
            width: calc(25% - 1rem);
            margin-right: 1rem;
        }

        /* torai-nav内のリンクリストを2列折り返し */
        .torai-nav .nav-links-list {
            flex-direction: row;
            flex-wrap: wrap;
        }

        .torai-nav .nav-links-list a {
            width: calc(50% - 0.5rem);
            display: flex;
            align-items: flex-start;
            gap: 0.4rem;
        }

        .nav-icon {
            font-size: 1.3em;
            opacity: 0.5;
                align-self: center;
        }

        .nav-category-title .nav-icon {
            font-size: 1.3em;
            opacity: 0.7;
        }

        .nav-category-title span {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }

        .sp-nav-primary .nav-category-title > span {
            width: 100%;
        }
 
         .torai-nav .sp-nav-primary .nav-links-list a {
            width: calc(33.3% - 0.5rem);
        }
        /* Nav Category */
        .nav-category {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* Nav Category Header */
        .torai-nav .nav-category-header {
            border-bottom: 2px solid  rgba(var(--color-key-1),1);
            padding-bottom: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .nav-category-title {
            font-size: var(--font-x-middle);
            font-weight: 600;
            color: rgba(var(--color-black),1);
            
        }

        .nav-category-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        .nav-category-title a:hover {
            color: rgba(var(--color-key-1),1);
            padding-left: 0.5rem;
        }

        /* Nav Links List */
        .nav-links-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .nav-links-list a {
            color: rgba(var(--color-black),1);
            text-decoration: none;
            font-size: var(--font-small);
            padding: 0.5rem 0;
            transition: all 0.2s ease;
        }

        .nav-links-list a:hover {
            color:  rgba(var(--color-key-1),1);
            /* padding-left: 0.25rem; */
        }

        /* メガメニュー内の要素のホバー状態も維持 */
        header nav ul li.has-dropdown:hover,
        header nav ul li.has-dropdown:focus-within {
            position: relative;
        }

        /* アクセシビリティ向上のためのフォーカス対応 */
        header nav:has(ul li.has-dropdown:focus-within) .megaMenu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        /* 閉じる処理中はフォーカスも無効化 + アニメーション */
        header nav.mega-menu-closing:has(ul li.has-dropdown:focus-within) .megaMenu {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transform: translateY(-10px) scale(0.99) !important;
        }
        
        /* パフォーマンス最適化 */
        header nav .megaMenu {
            will-change: opacity, transform;
        }

        /* スムーズな遷移のための追加スタイル */
        header nav .megaMenu::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            right: 0;
            height: 20px;
            background: transparent;
        }
        
        /* メガメニュー展開時のサブアニメーション（オプション） */
        @keyframes megaMenuFadeIn {
            0% {
                opacity: 0;
                transform: translateY(-20px) scale(0.98);
            }
            60% {
                opacity: 0.8;
                transform: translateY(2px) scale(1.005);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        /* ホバー時に微細なパルスエフェクト（オプション） */
        @keyframes megaMenuPulse {
            0%, 100% {
                box-shadow: 
                    0 16px 48px rgba(0, 0, 0, 0.12),
                    0 4px 16px rgba(0, 0, 0, 0.06),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
            }
            50% {
                box-shadow: 
                    0 18px 52px rgba(0, 0, 0, 0.14),
                    0 6px 20px rgba(0, 0, 0, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 1);
            }
        }


        /* =========================================
           SIMPLE DROPDOWN — PC既定スタイル - 2026-04-21
           メガメニューを簡易ドロップダウンに切替
           （元に戻すには tmp_header.php.bak / style.css.bak を復元）
           ※SP(max-width:1080px)用の上書きはSPヘッダーセクションに記載
           ========================================= */



        /* PCではメガメニュー本体を非表示（SPのハンバーガー時のみ利用） */
        header nav .megaMenu {
            display: none;
        }

        /* has-dropdown 親liのhoverで背景白化する既存ルールは activate されたままでよい */

        /* hoverブリッジ: li下端からドロップダウン上端までの隙間を
           透明な擬似要素で埋め、マウス通過時にhoverが切れないようにする。
           .glo-dropdownを持つli限定。
           高さはheader-padding(1.5rem)に余裕1remを足した2.5remで、
           headerのbottom-padding領域を確実にカバー */
        .glo-nav li.has-dropdown:has(.glo-dropdown)::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            height: 2.5rem;
            pointer-events: auto;
        }

        /* シンプルドロップダウン本体 */
        .glo-dropdown {
            /* ヘッダー直下(0px)に配置するため fixed を使用。
               --header-height はsite_share.jsが実寸で設定。
               水平位置は同JSで親liのセンター(--li-center-x)を算出。 */
            position: fixed;
            top: var(--header-height, 84px);
            left: var(--li-center-x, 50%);
            transform: translateX(-50%) translateY(-4px);
            min-width: 12rem;
            margin: 0;
            padding: 0.5rem 0;
            list-style: none;
            background: rgba(var(--color-white), 1);
            box-shadow: 0 0.5rem 1.5rem rgba(var(--color-shadow), 0.15);
            border-radius: 4px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
            z-index: 999;
        }

        /* 親liのhover/focus-withinで展開 */
        header nav ul li.has-dropdown:hover > .glo-dropdown,
        header nav ul li.has-dropdown:focus-within > .glo-dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        /* ドロップダウン内のli */
        .glo-dropdown li {
            display: block;
            width: 100%;
            align-items: initial;
        }

        /* ドロップダウン内リンク（親.glo-nav liのスタイルを上書き） */
        .glo-dropdown li a {
            display: block;
            padding: 0.6rem 1.25rem;
            margin: 0;
            color: rgba(var(--color-black), 1);
            text-decoration: none;
            font-size: var(--font-small);
            white-space: nowrap;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .glo-dropdown li a:hover {
            background-color: rgba(var(--color-key-1), 0.08);
            color: rgba(var(--color-key-1), 1);
        }

        /* glo-nav共通のhoverアンダーバーをドロップダウン内では無効化 */
        .glo-dropdown li a::after {
            display: none;
        }

        /* =========================================
           CASE STUDIES SWIPER
           ========================================= */
        
        .case-studies-swiper-section {
            position: relative;
            overflow: hidden;
            z-index: 0;
        }

        .case-studies-swiper {
            width: 100%;
            height: 100%;
           
        }

        .case-studies-swiper .swiper-slide {
            width: 33.3% !important;
            max-width: 100% !important;
            height: auto;
        }

        .case-study-card {
            position: relative;
            /* height: 600px; */
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 3rem;
            color: rgba(var(--color-white),1);
            text-decoration: none;
            cursor: pointer;
        }

        .case-study-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
            z-index: 1;
        }

        .case-study-card > .saturate-scale {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .case-study-card:hover > .saturate-scale img {
            filter: saturate(.7);
        }

        .case-study-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            
            z-index: 0;
        }

        .case-study-content {
            position: relative;
            z-index: 2;
        }

        /* case-study-card内テキスト: テキスト幅のみの背景 */
        .case-study-card .case-study-label,
        .case-study-card .case-study-title,
        .case-study-card .case-study-info p,
        .case-study-card .case-study-solutions h4,
        .case-study-card .case-study-results h4,
        .case-study-card .case-study-solutions ul li,
        .case-study-card .case-study-results ul li {
            background-color: rgba(var(--color-black), 0.8);
            width: fit-content;
            padding: 0.15em 0.4em;
            transition: background-color 0.3s ease;
        }

        .case-study-card:hover .case-study-label,
        .case-study-card:hover .case-study-title,
        .case-study-card:hover .case-study-info p,
        .case-study-card:hover .case-study-solutions h4,
        .case-study-card:hover .case-study-results h4,
        .case-study-card:hover .case-study-solutions ul li,
        .case-study-card:hover .case-study-results ul li {
            background-color: rgba(var(--color-key-1), 0.8);
        }

        .case-study-label {
            
            font-size: var(--font-x-middle);
            font-style: italic;
            margin-bottom: 1rem;
        }

        .case-study-title {
            font-size: var(--font-large);
            font-weight: 600;
            margin-bottom: 2rem;
            line-height: 1.2;
        }

        .case-study-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .case-study-info p {
            font-size: var(--font-small);
            margin: 0;
        }

        .case-study-solutions,
        .case-study-results {
            margin-bottom: 1.5rem;
        }

        .case-study-solutions h4,
        .case-study-results h4 {
            font-size: var(--font-x-middle);
            margin-bottom: 0.75rem;
            font-weight: 600;
        }

        .case-study-solutions ul,
        .case-study-results ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .case-study-solutions ul li,
        .case-study-results ul li {
            font-size: var(--font-small);
            padding-left: 1.5rem;
            position: relative;
        }

        .case-study-solutions ul li::before {
            content: '-';
            position: absolute;
            left: 0.5rem;
        }

        .case-study-results ul li::before {
            content: '-';
            position: absolute;
            left: 0.5rem;
        }

        /* Swiper Navigation */
        .case-studies-navigation {
            position: absolute;
            bottom: 2rem;
            right: 3rem;
            z-index: 10;
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .case-studies-navigation button {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: rgba(var(--color-white),1);
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: var(--font-small);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .case-studies-navigation button:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        /* スマホ用に調整（PC既定 → max-width:1080px の2段階。旧 767px を統合） */
        @media (max-width: 1080px) {




            .case-studies-swiper .swiper-slide {
                width: 80% !important;
            }

            .case-study-card {
               
                padding: 2rem;
            }

            .case-study-title {
                font-size: var(--font-x-large);
            }

            .case-studies-navigation {
                right: 2rem;
                bottom: 1.5rem;
            }
        }

        /* =========================================
           PARTNERS SWIPER
           ========================================= */

        .section-partners {
            overflow: hidden;
        }

        .partners-swiper {
            width: 100%;
        }

        /* ロゴごとに高さが違うため、スライドを縦中央に揃える */
        .partners-swiper .swiper-wrapper {
            align-items: center;
        }

        .partners-swiper .swiper-slide {
            width: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 2rem;
        }

        /* グレースケール自体は既存ユーティリティ .gray-scale（HTML側で付与）に任せる */
        .partners-swiper .swiper-slide img {
            display: block;
            object-fit: contain;
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }

        /* ホバー時の着色フィルター（index.php の #partners-tint）の定義用 SVG */
        .partners-tint-def {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
        }

        @media (hover: hover) {
            .partners-swiper .swiper-slide a:hover img {
                filter: url(#partners-tint);
                opacity: 1;
            }
        }

        /* =========================================
           5 REASONS SECTION
           ========================================= */
        
        .five-reasons-section {
            background-color:  rgba(var(--color-gray),);
        }

        .five-reasons-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .five-reasons-subtitle {
            font-size: var(--font-small);
            color: rgba(var(--color-black),1);
            margin-bottom: 1rem;
        }

        .five-reasons-title {
            font-size: var(--font-xx-large);
            
            line-height: 1.2;
        }

        .five-reasons-title .number {
            color:  rgba(var(--color-key-1),1);
            font-size: var(--font-xxx-large);
            font-weight: 300;
        }

        .five-reasons-title .highlight {
            color:  rgba(var(--color-key-1),1);
        }

        .reasons-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 2rem;
            width: 100%;
        }

        .reason-item {
            display: flex;
            flex-direction: column;
        }

        /* 偶数番目のカードを下にずらす */
        .reason-item:nth-child(even) {
            margin-top: 4rem;
        }

        .reason-image {
            position: relative;
            width: 100%;
            min-height: 500px;
            overflow: hidden;
           
        }

        .reason-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* filter: grayscale(1); */
        }

        .reason-content {
            display: flex;
            flex-direction: column;
        }

        .reason-number {
            font-size: var(--font-middle);
            color:  rgba(var(--color-key-1),1);

            margin-bottom: 0.5rem;
            font-style: italic;
        }

        .reason-category {
            font-size: var(--font-middle);
            color:  rgba(var(--color-key-1),1);

            margin-bottom: 0.5rem;
        }

        .reason-subtitle {
            font-size: var(--font-small);
            color: rgba(var(--color-black),1);
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .reason-title {
            font-size: var(--font-middle);
            color: rgba(var(--color-black),1);
            margin-bottom: 1rem;
            
            color: rgba(var(--color-key-1), 1);
        }

        .reason-description {
            font-size: var(--font-small);
            color: rgba(var(--color-black),1);
            line-height: 1.8;
            opacity: 0.8;
        }






        /* レスポンシブ対応: PC既定 → max-width:1080px の2段階（旧 1200/480px を統合） */
        @media (max-width: 1080px) {
            .reasons-grid {
                grid-template-columns: 1fr;
            }
            
            .reason-item:nth-child(even) {
                margin-top: 0;
            }

            .reason-image {
                height: 250px;
                min-height: inherit;
            }
        }

        /* =========================================
           SERVICE ICON HEXAGON
           ========================================= */
        
        .service-icon-hexagon {
            width: 70px;
            height: 70px;
            background-color:  rgba(var(--color-key-1),1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* =========================================
           FAQ ACCORDION (CSS ONLY)
           ========================================= */
        
        .faq-container {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            /* background: rgba(var(--color-white), 1); */
        }
        
        .faq-item {
            border-bottom: 1px solid var(--color-border);
        }
        
        .faq-toggle {
            display: none;
        }
        
        .faq-question {
            display: flex;
            align-items: center;
            padding: 1.5rem 0;
            cursor: pointer;
            user-select: none;
            gap: 1rem;
        }
        
        .faq-q {
            font-size: var(--font-large);
            font-family: var(--font-serif);
            font-weight: normal;
            min-width: 30px;
        }
        
        .faq-question-text {
            flex: 1;
            font-size: var(--font-middle);
        }
        
        .faq-icon {
            font-size: var(--font-x-large);
            line-height: 1;
            transition: transform 0.3s ease;
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            padding: 0 0 0 3rem;
        }
        
        .faq-answer p {
            font-size: var(--font-middle);
            line-height: 1.8;
            margin: 0;
            padding: 0;
        }
        
        /* チェックボックスがチェックされたときのスタイル */
        .faq-toggle:checked + .faq-question .faq-icon {
            transform: rotate(45deg);
        }
        
        .faq-toggle:checked ~ .faq-answer {
            max-height: 500px;
            padding: 0 0 1.5rem 3rem;
        }

        /* =========================================
           UTILITY CLASSES - GAPS
           ========================================= */
        
        .gap-1 { gap: 1rem; }
        .gap-2 { gap: 2rem; }
        .gap-3 { gap: 3rem; }
        .gap-half { gap: 0.5rem; }

        /* =========================================
           UTILITY CLASSES - GRIDS
           ========================================= */
        

        .section-services .grid-3 {
            z-index: 2;
            position: relative;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        /* =========================================
           UTILITY CLASSES - TEXT
           ========================================= */
        
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        
        .opacity-80 { opacity: 0.8; }
        .opacity-70 { opacity: 0.7; }
        .opacity-40 { opacity: 0.4; }

        /* =========================================
           UTILITY CLASSES - WIDTHS
           ========================================= */
        
        .w-60 { width: 60%; }
        .w-70 { width: 70px; }
        .w-100 { width: 100%; }
        
        .h-70 { height: 70px; }
        .h-70vh { height: 70vh; }
        .h-100 { height: 100%; }
        
        .min-h-70vh { min-height: 70vh; }
        .min-h-100vh { min-height: 100vh; }

        /* =========================================
           UTILITY CLASSES - POSITIONING
           ========================================= */
        
        .z-1 { z-index: 1; }
        .z-2 { z-index: 2; }
        .z-3 { z-index: 3; }
        
        .relative { position: relative; }

        /* =========================================
           UTILITY CLASSES - PADDING
           ========================================= */
        
        .pad-1 { padding: 1rem; }
        .pad-2 { padding: 2rem; }
        .pad-3 { padding: 3rem; }
        
        .pad-x-1 { padding-left: 1rem; padding-right: 1rem; }
        .pad-x-2 { padding-left: 2rem; padding-right: 2rem; }
        
        .pad-y-1 { padding-top: 1rem; padding-bottom: 1rem; }
        .pad-y-2 { padding-top: 2rem; padding-bottom: 2rem; }

        /* =========================================
           UTILITY CLASSES - BUTTONS & LINKS
           ========================================= */
        
        /* =========================================
           汎用ラインボタン (.btn-line)
           枠線色・文字色は modifier で切り替える
           --black: 黒線 / --ci: CIカラー線 / --white: 白線
           ========================================= */
        .btn-line {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 2rem;
            border: 2px solid currentColor;
            background: transparent;
            text-decoration: none;
            white-space: nowrap;
            transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
        }

        .btn-line .material-symbols-outlined {
            font-size: 1.4em;
            transition: transform 0.3s ease;
        }

        .btn-line:hover .material-symbols-outlined {
            transform: translateX(4px);
        }

        /* 黒線（テキスト黒） */
        .btn-line--black {
            color: rgba(var(--color-black), 0.85);
        }

        .btn-line--black:hover {
            background: rgba(var(--color-black), 0.85);
            border-color: rgba(var(--color-black), 0.85);
            color: rgba(var(--color-white), 1);
        }

        /* CIカラー線（テキストCIカラー） */
        .btn-line--ci {
            color: rgba(var(--color-key-1), 1);
        }

        .btn-line--ci:hover {
            background: rgba(var(--color-key-1), 1);
            border-color: rgba(var(--color-key-1), 1);
            color: rgba(var(--color-white), 1);
        }

        /* 白線（テキスト白） */
        .btn-line--white {
            color: rgba(var(--color-white), 1);
        }

        .btn-line--white:hover {
            background: rgba(var(--color-white), 1);
            border-color: rgba(var(--color-white), 1);
            color: rgba(var(--color-black), 1);
        }

        /* =========================================
           PAGE TOP BUTTON
           ========================================= */

        #pagetop-btn {
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            z-index: 998;
            width: 5rem;
            height: 5rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
            cursor: pointer;
        }

        #pagetop-btn.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        #pagetop-btn:hover {
            transform: translateY(-4px);
        }

        #pagetop-btn img {
            width: 100%;
            height: 100%;
            filter: var(--filter-to-key-1);
        }

        /* Hamburger: hidden on PC */
        .hamburger {
            display: none;
        }
        footer .limited-width,
        .section-five-reasons{
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* =========================================
           SECTION: NEWS (Top Page)
           ========================================= */
        .section-news {
            width: 100%;
            position: relative;
            padding: 2rem 0 0;
            background-color: rgba(var(--color-white), 1);
            overflow-x: clip;
        }

        .section-news::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(180deg, rgba(var(--color-black), 0.02) 0%, transparent 30%),
                radial-gradient(circle at 80% 20%, rgba(var(--color-key-1), 0.04) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        .section-news > * {
            position: relative;
            z-index: 1;
        }

        .section-news .news-inner {
            width: 100%;
            padding: 2rem 1rem 0;
        }

        .section-news .news-title {
            gap: 0.5rem;
            padding-bottom: 2rem;
        }

        /* 件数表示はトップでは非表示 */
        .section-news .knowledge-results {
            display: none;
        }

        /* トップは最新3件のみ表示 */
        .section-news .knowledge-grid > .knowledge-card:nth-of-type(n+4) {
            display: none;
        }

        .news-list-btn-wrap {
            padding-top: 3rem;
        }


            @media (max-width: 1410px) {
                       header h1 a span {
                            
                            display: none !important;
                        }

            }


        /* =========================================
           RESPONSIVE: max-width 1080px
           ========================================= */
        @media (max-width: 1080px) {
            #pagetop-btn{
                width: 3rem;
                height: 3rem;
            }
.case-study-solutions, .case-study-results{
    display: none;
}


        .pad-top {
            padding: 2rem 0 0;
        }

        .pad-bottom {
            padding: 0 0 2rem;
        }

        .pad-both {
            padding: 2rem 0;
        }
.torai-nav .nav-links-list a,
.torai-nav .sp-nav-primary .nav-links-list a{
    width: 100%;
}
.cta-buttons-container{
    min-height: auto;
    height: auto;
    margin: 4rem 0 0;
    background-color: transparent;
}

/* SPではシステムデモのチラ見せUIを非表示にし、cta-buttonsのみ表示 */
.cta-bg-layer,
.cta-bg-gradient{
    display: none;
}

.parallax-color-overlay.world-map-z2 img, .parallax-color-overlay.world-map-z1 img, .parallax-color-overlay.world-map img{
    max-width:100vw;
}


footer .limited-width, .section-five-reasons{
    padding:0 .5rem 0;

}

footer .grid .flex.column>div:first-child, 
footer .grid .flex.column>a:first-child{
margin-bottom: 0;
        margin-top: 2rem;
        padding: 0;
}
footer .grid .flex.column>a:first-child{
    margin-top: 0;
}

.bg-image.bg-metrics{
        bottom: 0;
    top: inherit;
    width: 100vw;
}
.bg-image.end-01{
    display: none;
}
.bg-image.end-02{
    bottom: -.5rem;
      
        width: 40vw;
}
.features-inner {

    padding: 2rem .5rem 4rem;
}
        .section-performance-metrics .metrics-visual,
        .section-performance-metrics .metrics-content{
            width: 100%;
        }
        
        .bg-image.platform-01 {
            left: 0;
            bottom: 0;
            top: 2rem;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 30vh;
        }
        
        .bg-image.platform-02 {
            display: none;
        }
        .section-content{
            min-height: inherit;
        }
        .text-center{
            text-align: inherit;
        }
        .services-title,
        .features-title {
            padding: 0;
            min-height: inherit;
            align-items: flex-start;
        }
        .parallax-content{
            padding: 0;
        }

        .bg-image.rc-01,
/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .js-scroll-move-y{
            display: none;
        }
--- 廃止ここまで --- */
        .section{
            padding-left: .5rem;
            padding-right: .5rem;
        }
            main .section-hero .flex.justify-space-between{
                justify-content: center;
            }
            .features-video-box {
                width: 100vw;
                height: 30vh;
                position: relative;
                top: inherit;
                left: 0;
                z-index: 2;
            }
            
            .section-hero{
                height: 85vh;
            }

            /* .section-line-box は 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み */
            .pc{
                display: none;
            }

            .parallax-content:has(#index-form){
                display: none;
            }

            /* --- Hamburger Button --- */
            .hamburger {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 5px;
                width: 40px;
                height: 40px;
                background: none;
                border: none;
                cursor: pointer;
                z-index: 1002;
                position: relative;
            }

            .hamburger span {
                display: block;
                width: 24px;
                height: 2px;
                background-color: rgba(var(--color-white), 1);
                transition: transform 0.3s ease, opacity 0.3s ease;
            }

            header.scrolled .hamburger span,
            .hamburger.active span {
                background-color: rgba(var(--color-key-1), 1);
            }

            /* Hamburger → X animation */
            .hamburger.active span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }

            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }

            .hamburger.active span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }

            /* --- Header Layout --- */
            header {
                flex-wrap: wrap;
                        --header-padding: .75rem;
            }

            header h1 {
                flex: 1;
            }

            /* ======================
               SP: 常時適用
               ====================== */

            /* SPでは常にscrolled相当の白背景 */
            header {
                background-color: rgba(var(--color-white), 1) !important;
                color: rgba(var(--color-key-1), 1) !important;
            }

            header h1 img {
                filter: none !important;
            }

            header h1 span {
                color: rgba(var(--color-key-2), 1) !important;
            }

            header .hamburger span {
                background-color: rgba(var(--color-key-1), 1) !important;
            }

            /* glo-nav: 常に非表示 */
            .glo-nav {
                display: none !important;
            }

            /* cta-nav: デフォルト非表示 */
            .cta-nav {
                display: none !important;
            }

            /* === PC既定スタイルのSP上書き（min-widthメディアクエリ撤廃に伴う2段階化） === */
            /* PC表示のキャッチコピーをSPでは非表示 */
            header h1 a span {
                flex-wrap: nowrap;
                display: block !important;
            }

            /* PC非表示のmegaMenu本体をSPでは表示可能に（ハンバーガー内で使用） */
            header nav .megaMenu {
                display: block;
            }

            /* PC用hoverブリッジ擬似要素はSPでは不要（タップ妨害防止） */
            .glo-nav li.has-dropdown:has(.glo-dropdown)::after {
                display: none;
            }

            /* PCのhover制御を完全無効化 */
            header nav:has(ul li.has-dropdown:hover) .megaMenu,
            header nav .megaMenu:hover {
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
                transform: none !important;
            }

            /* ======================
               SP: 展開時 (.sp-menu-open)
               ====================== */

            /* nav: header下から画面底までのfixedパネル、内部スクロール
               2026-09-26 修正: iOS Safari では 100vh が「ツールバーを隠した時の高さ」を指すため、
               アドレスバー等が出ている状態だと実際の表示領域より 60〜110px 高いパネルになり、
               内部スクロールを最後までしても末尾の項目（会員ログイン等）が画面外に残って届かなかった。
               動的ビューポート単位 100dvh で実際の表示高さに追従させる（iOS Safari 15.4 以降が対応）。
               dvh 非対応ブラウザは直前の 100vh 宣言がそのまま効く。 */
            header.sp-menu-open nav {
                display: block !important;
                position: fixed !important;
                top: var(--header-height, 72px) !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                height: calc(100vh - var(--header-height, 72px)) !important;
                height: calc(100dvh - var(--header-height, 72px)) !important;
                /* 末尾の項目がホームインジケータに被らないよう、下に逃げを作る */
                padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
                overflow-y: auto !important;
                overscroll-behavior: contain;
                -webkit-overflow-scrolling: touch;
                z-index: 1001;
                background: rgba(var(--color-white), 1);
            }

            /* megaMenu: nav内に自然に流れる */
            header.sp-menu-open nav .megaMenu {
                position: static !important;
                opacity: 1 !important;
                visibility: visible !important;
                pointer-events: auto !important;
                transform: none !important;
                width: 100% !important;
                box-shadow: none;
                border: none;
            }

            /* cta-nav: megaMenuの後に表示 */
            header.sp-menu-open .cta-nav {
                display: flex !important;
                flex-direction: column;
                width: 100%;
            }

            header.sp-menu-open .cta-nav li {
                width: 100%;
            }

            header.sp-menu-open .cta-nav .btns {
                width: 100%;
                justify-content: center;
            }

            /* ======================
               SP: メガメニュー内部レイアウト
               ====================== */

            .global-nav-inner {
                width: 100%;
            }

            .global-nav-inner > .flex {
                flex-direction: column;
                width: 100%;
            }

            .torai-header {
                display: none !important;
            }

            .torai-nav {
                width: 100% !important;
                display: flex !important;
                flex-direction: column;
                flex-wrap: nowrap;
                gap: 1rem;
            }

            /* SP: 上段の50%解除 */
            .torai-nav .sp-nav-primary {
                width: 100% !important;
            }

            /* SP: 動画非表示 */
            .torai-nav .sp-nav-video {
                display: none !important;
            }

            /* SP: 下段の25%解除 */
            .torai-nav .nav-category:not(.sp-nav-primary) {
                width: 100% !important;
            }

            /* ======================
               SP: パララックス無効化
               ====================== */

            .parallax-slow,
            .parallax-fast,
            .parallax-content {
                transform: none !important;
            }

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
            .js-scroll-move-y {
                transform: none !important;
            }
--- 廃止ここまで --- */

            /* ======================
               SP: Main - flex段落化
               ====================== */

            /* 汎用: main内のjustify-space-betweenを縦積み */
            main .flex.justify-space-between {
                flex-direction: column;
            }

            /* 汎用: grid-2, grid-3 → 1カラム */
            main .grid-2 {
                        grid-template-columns: repeat(2, 1fr);
            }

            main .grid-3 {
                        grid-template-columns: repeat(2, 1fr);
            }

            .service-icon-hexagon{
                width: 50px;
                height: 50px;
            }

            /* ======================
               SP: Section News
               ====================== */
            .section-news {
                padding: 3rem 0 2rem;
            }

            .section-news .news-inner {
                padding: 1rem 1rem 0;
            }

            .news-list-btn-wrap {
                padding-top: 2rem;
            }

            /* ======================
               SP: Footer
               ====================== */

            footer .grid {
                display: flex !important;
                flex-direction: column;
                grid-template-columns: none !important;
            }

            footer .grid > * {
                width: 100%;
            }

            /* footer-brand の左右 space-between を SP で縦並びに */
            .footer-brand {
                flex-direction: column;
                gap: 1.5rem;
            }

            .footer-brand-contact {
                align-items: flex-start;
                text-align: left;
            }

            .footer-links {
                gap: 2rem;
            }

            /* SP では各段内も縦並びに（grid 解除して flex column） */
            .footer-links-row {
                display: flex !important;
                flex-direction: column;
                grid-template-columns: none !important;
                gap: 2rem;
            }

            .footer-subcat-grid {
                display: flex !important;
                flex-direction: column;
                grid-template-columns: none !important;
                gap: 1.5rem;
            }
        }

        /* ========================================
           モーダルポップアップ (btn-est / btn-dl)
           ======================================== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            backdrop-filter: blur(4px);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-box {
            background: rgba(var(--color-key-1), 1);
            color: #fff;
            width: 90%;
            max-width: 520px;
            max-height: 90vh;
            overflow-y: auto;
            /* 2026-09-24 クライアント指示: 上部の余白を詰める（下は送信ボタンの逃げとして残す） */
            padding: 1.75rem 3rem 2rem;
            position: relative;
            transform: translateY(30px) scale(0.95);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .modal-overlay.active .modal-box {
            transform: translateY(0) scale(1);
        }

        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            background: none;
            border: none;
            color: #fff;
            font-size: 1.8rem;
            cursor: pointer;
            line-height: 1;
            transition: opacity 0.2s;
        }

        .modal-close:hover {
            opacity: 0.6;
        }

/* --- 2026-09-24 廃止: スクロール線描画（.section-line-box / .js-scroll-move-y）。HTML・JS も廃止済み ---
        .modal-box .section-icon {
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: center;
        }
--- 廃止ここまで --- */

        .modal-box h3 {
            
            font-size: 1.6rem;
            margin-bottom: 0;
            line-height: 1.6rem;
        }

        .modal-box h4 {
            font-size: var(--font-small);
            margin-bottom: 0.5rem;
            opacity: 0.7;
        }

        .modal-form {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }

        .modal-form label {
            position: relative;
            width: 100%;
        }

        .modal-form label::before {
            content: attr(data-label);
            position: absolute;
            left: 0.5rem;
            top: -0.5rem;
            color: rgba(var(--color-black), 1);
            z-index: 1;
            font-size: var(--font-xxx-small);
            background-color: rgba(var(--color-white), 1);
            padding: 0.05rem 0.5rem;
        }

        .modal-form input[type="text"],
        .modal-form input[type="email"],
        .modal-form input[type="tel"],
        .modal-form textarea {
            padding: 0.75rem;
            border: 1px solid rgba(var(--color-gray), 0.4);
            font-size: var(--font-small);
            width: 100%;
            background: rgba(var(--color-white), 1);
            color: rgba(var(--color-black), 1);
        }

        /* 2026-09-24 クライアント指示: 下書き（プレースホルダ）が入力済みに見えるので薄くする */
        .modal-form input::placeholder,
        .modal-form textarea::placeholder {
            color: rgba(var(--color-black), 0.15);
            opacity: 1;
        }

        .modal-form textarea {
            resize: vertical;
            min-height: 72px;
        }

        /* 2026-09-24 クライアント指示: 画面の高いところで送信ボタンが隠れて見えないため、
           スクロールしてもモーダル下端に貼り付くようにする（.modal-box がスクロール領域） */
        .modal-form .btns {
            position: sticky;
            bottom: 0;
            margin-top: 0.5rem;
            text-align: center;
            background: rgba(var(--color-black), 1);
            color: #fff;
            border: 2px solid rgba(var(--color-black), 1);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-form .btns:hover {
            background: #fff;
            color: rgba(var(--color-black), 1);
        }

        /* ----- メールフォーム: 同意チェック / エラー表示 / ハニーポット ----- */

        .modal-form label.modal-form__policy {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            font-size: var(--font-xx-small);
            line-height: 1.6;
            color: rgba(var(--color-white), 1);
        }

        /* data-label を持たないのでラベル浮きの疑似要素を出さない
           （.modal-form label::before より詳細度を上げる必要がある） */
        .modal-form label.modal-form__policy::before {
            content: none;
            display: none;
        }

        .modal-form label.modal-form__policy input[type="checkbox"] {
            margin-top: 0.2rem;
            flex-shrink: 0;
        }

        .modal-form__policy a {
            color: inherit;
            text-decoration: underline;
        }

        /* モーダル背景がキーカラー（ティール）なので、エラーは白で視認性を確保する
           （キーカラー3のピンクは同系の明度で読めない） */
        .modal-form__error {
            display: block;
            margin-top: 0.25rem;
            font-size: var(--font-xx-small);
            line-height: 1.5;
            color: rgba(var(--color-white), 1);
        }

        .modal-form__error:empty {
            display: none;
        }

        .modal-form__global-error {
            padding: 0.75rem;
            border: 1px solid rgba(var(--color-white), 1);
            font-size: var(--font-xx-small);
            line-height: 1.6;
            color: rgba(var(--color-white), 1);
        }

        .modal-form__global-error:empty {
            display: none;
        }

        .modal-form .btns[disabled] {
            opacity: 0.6;
            cursor: wait;
        }

        /* ハニーポット: 人には見せず、素朴なボットには埋めさせる */
        .modal-form__hp {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }


        .modal-box .feature-link {
            display: block;
            margin-top: 1.5rem;
            text-align: center;

            font-style: italic;
            opacity: 0.7;
            text-decoration: underline;
        }

        /* ========================================
           モーダル内タブ + パネル切替
           ======================================== */
        .modal-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 2rem;
            border-bottom: 1px solid rgba(var(--color-white), 0.3);
        }

        .modal-tab {
            flex: 1;
            background: none;
            border: none;
            color: #fff;
            font-size: var(--font-small);
            padding: 0.75rem 0.5rem;
            cursor: pointer;
            opacity: 0.55;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: opacity 0.2s ease, border-color 0.2s ease;
        }

        .modal-tab:hover {
            opacity: 0.85;
        }

        .modal-tab.is-active {
            opacity: 1;
            border-bottom-color: #fff;
        }

        .modal-panel {
            display: none;
        }

        .modal-panel.is-active {
            display: block;
        }

        /* モーダル内 FAQ（暗背景向け上書き） */
        .modal-faq .faq-item {
            border-bottom: 1px solid rgba(var(--color-white), 0.25);
        }

        .modal-faq .faq-question {
            padding: 1rem 0;
            gap: 0.75rem;
        }

        .modal-faq .faq-q {
            font-size: var(--font-middle);
            min-width: 1.5rem;
        }

        .modal-faq .faq-question-text {
            font-size: var(--font-small);
        }

        .modal-faq .faq-icon {
            font-size: var(--font-large);
        }

        .modal-faq .faq-answer {
            padding: 0 0 0 2.25rem;
        }

        .modal-faq .faq-answer p {
            font-size: var(--font-x-small);
            line-height: var(--lh-body);
            opacity: 0.9;
        }

        .modal-faq .faq-toggle:checked ~ .faq-answer {
            max-height: 500px;
            padding: 0 0 1rem 2.25rem;
        }

        /* ----- モーダル: 白背景＋キーカラー文字（技術資料ダウンロード） ----- */
        .modal-box--light {
            background: rgba(var(--color-white), 1);
            color: rgba(var(--color-key-1), 1);
        }

        .modal-box--light .modal-close,
        .modal-box--light .modal-tab,
        .modal-box--light .modal-form label::before,
        .modal-box--light .modal-form label.modal-form__policy,
        .modal-box--light .modal-form__policy a,
        .modal-box--light .modal-form__error {
            color: rgba(var(--color-key-1), 1);
        }

        .modal-box--light .modal-form input[type="text"],
        .modal-box--light .modal-form input[type="email"],
        .modal-box--light .modal-form input[type="tel"],
        .modal-box--light .modal-form textarea {
            border-color: rgba(var(--color-key-1), 0.4);
            color: rgba(var(--color-key-1), 1);
        }

        .modal-box--light .modal-tabs {
            border-bottom-color: rgba(var(--color-key-1), 0.3);
        }

        .modal-box--light .modal-tab.is-active {
            border-bottom-color: rgba(var(--color-key-1), 1);
        }

        .modal-box--light .modal-form__global-error {
            border-color: rgba(var(--color-key-1), 1);
            color: rgba(var(--color-key-1), 1);
        }

        .modal-box--light .modal-faq .faq-item {
            border-bottom-color: rgba(var(--color-key-1), 0.25);
        }

/* ===== Solution 3-level nav: 2階層目hoverで右展開 ===== */
.glo-nav > li.has-mega-sub > .glo-dropdown.glo-dropdown--mega {
    min-width: 14rem;
}

/* 2階層目 li を relative anchor 化 */
.glo-nav .glo-dropdown li.has-sub {
    position: relative;
}

/* 2階層目リンク右側の chevron_right アイコン（Material Symbols Outlined）
   既存 .glo-nav li a::after（hoverアンダーバー: position:absolute）と
   .glo-dropdown li a::after { display:none !important } の両方を上書きするため、
   position/座標/サイズも !important で明示的に static 化する */
.glo-nav .glo-dropdown li.has-sub > a::after {
    content: "chevron_right" !important;
    display: inline-block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-family: 'Material Symbols Outlined' !important;
    font-weight: 100;
    font-style: normal;
    font-size: 1.1em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    vertical-align: middle;
    margin-left: 0.3em;
    opacity: 0.5;
    transform: none !important;
    transition: none !important;
}

/* 3階層目ドロップダウン: 2階層目liの右側 (left:100%) に絶対配置
   親.glo-dropdownはposition:fixed（PC既定で定義）の中で、
   has-sub liを基準にabsolute配置 */
.glo-nav .glo-dropdown li.has-sub > .glo-sub-dropdown {
    position: absolute;
    left: 100%;
    top: -0.5rem;
    min-width: 14rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: rgba(var(--color-white), 1);
    box-shadow: 0 0.5rem 1.5rem rgba(var(--color-shadow), 0.15);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
}

/* 2階層目 li:hover で 3階層目を表示
   親.glo-dropdownの opacity/visibility 制御に合わせる */
.glo-nav .glo-dropdown li.has-sub:hover > .glo-sub-dropdown,
.glo-nav .glo-dropdown li.has-sub:focus-within > .glo-sub-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* hoverブリッジ: 2階層目li右端と3階層目左端の隙間にhover領域を確保 */
.glo-nav .glo-dropdown li.has-sub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 0.5rem;
    height: 100%;
    pointer-events: auto;
}

.glo-sub-dropdown li {
    display: block;
    width: 100%;
    list-style: none;
}

/* ===== Mega Menu: Solutions Sub Blocks (常時展開) ===== */
.nav-sub-block {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--color-black), 0.08);
}

.nav-sub-block:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.nav-sub-block-title {
    font-weight: bold;
    padding: 0.25rem 0;
}

.nav-sub-block-title a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.nav-sub-block-items {
    padding-left: 1.25rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

@media (max-width: 1080px) {
    .glo-nav .glo-dropdown li.has-sub > .glo-sub-dropdown {
        position: static;
        box-shadow: none;
        padding-left: 1rem;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* ===== SP: glo-nav 一本化展開（ハンバーガークリックで縦並び全表示） ===== */
    /* sp-menu-open 時: .glo-nav を縦展開（既存 display:none !important を上書き） */
    header.sp-menu-open .glo-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 1rem 0 !important;
        gap: 0;
    }

    /* 全ての <li> を block に強制（既存 .glo-nav li { display:flex } を上書き）
       これがないと <a> と <ul> が横並びになる */
    header.sp-menu-open .glo-nav li,
    header.sp-menu-open .glo-nav .glo-dropdown li,
    header.sp-menu-open .glo-nav .glo-sub-dropdown li {
        display: block !important;
        align-items: initial !important;
    }

    header.sp-menu-open .glo-nav > li {
        width: 100%;
        border-bottom: 1px solid rgba(var(--color-black), 0.08);
        padding: 0.5rem 1rem;
        position: static;
    }

    /* 1階層リンク（カテゴリトップ）— flex を block に戻す */
    header.sp-menu-open .glo-nav > li > a {
        display: block !important;
        padding: 0.6rem 0 !important;
        margin: 0 !important;
        font-size: var(--font-middle);
        color: rgba(var(--color-key-2), 1);
        font-weight: bold;
        text-decoration: none;
    }

    /* 2階層ドロップダウン: 常時展開・縦並び */
    header.sp-menu-open .glo-nav .glo-dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0.25rem 0 0 1rem !important;
        background: transparent !important;
        display: block !important;
        min-width: 0 !important;
        width: auto !important;
    }

    header.sp-menu-open .glo-nav .glo-dropdown > li {
        display: block;
        width: 100%;
        padding: 0;
        border-bottom: none;
    }

    header.sp-menu-open .glo-nav .glo-dropdown > li > a {
        padding: 1rem 0 !important;
        margin: 0 !important;
        font-size: 1rem;
        color: rgba(var(--color-black),1);
        text-decoration: none;
        display: block !important;
        font-weight: normal;
    }

    /* 3階層サブドロップダウン: 常時展開・縦並び */
    header.sp-menu-open .glo-nav .glo-sub-dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 0.5rem 1rem !important;
        background: transparent !important;
        top: auto !important;
        left: auto !important;
        min-width: 0 !important;
        display: block !important;
    }

    header.sp-menu-open .glo-nav .glo-sub-dropdown > li {
        display: block;
        width: 100%;
        padding: 0;
    }

    header.sp-menu-open .glo-nav .glo-sub-dropdown > li > a {
        padding: 1rem 0 !important;
        font-size: 1rem;
        color: rgba(var(--color-black), 1);
    }

    /* has-sub の chevron は SP常時展開では不要 */
    header.sp-menu-open .glo-nav .glo-dropdown li.has-sub > a::after {
        display: none !important;
    }

    /* hover ブリッジ ::before も SP では不要 */
    header.sp-menu-open .glo-nav .glo-dropdown li.has-sub::before {
        display: none !important;
    }

    /* hover アンダーバー（li a::after）も SP展開では不要 */
    header.sp-menu-open .glo-nav li a::after {
        display: none !important;
    }
}