/**
 * OWL DIGITAL - Front Page Styles
 * Three.js イマーシブ体験用スタイル
 * ─── Z軸レイヤー型: カメラが奥に進み、パーティクル層を突き抜ける ───
 */
 html,
 body {
   scroll-behavior: auto !important;
   /* GSAP ScrollTriggerとの競合回避 */
 }
 
 /* ============================================================
    Three.js Canvas
    ============================================================ */
 #three-canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
 }
 
 /* ============================================================
    Main Container
    ============================================================ */
 .main-container {
   position: relative;
   width: 100%;
   z-index: 10;
 }
 
 /* ============================================================
    Section Overlay — 固定配置、JSが可視性を制御
    ============================================================ */
 .section-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   /* 横スクロールコンテンツがはみ出しても、bodyのスクロールバーを出さない */
   overflow: hidden;
   /* 初期状態: 非表示 */
   opacity: 0;
   visibility: hidden;
 }
 
 .section-overlay.is-active {
   opacity: 1;
   visibility: visible;
 }
 
 .section-overlay .panel-inner {
   pointer-events: auto;
   will-change: opacity, transform, filter;
   /* JS制御用: CSSトランジションを無効化 */
   transition: none;
   /* 初期状態をリセット */
   opacity: 1;
   transform: none;
 }
 
 /* ============================================================
    横スクロールモード（コンテンツ高さ > ビューポート高さ の場合）
    ============================================================ */
 .section-overlay.horizontal-scroll-mode {
   align-items: center;
   /* 縦方向は中央揃え */
   /* 横方向も基本中央揃え（はみ出す場合はJS制御＋marginで調整） */
   justify-content: center;
   padding-top: 0;
   padding-left: 0;
 }
 
 /* 横スクロールモード時、中枠（Wrapper）を画面いっぱいに広げて垂直中央揃え */
 /* ... commented out ... */
 
 .section-overlay.horizontal-scroll-mode .panel-inner {
   max-width: 100%;
   /* 高さはコンテンツなり（親まかせ） */
   height: auto;
 
   /* 横幅いっぱいにしない（中央リングさせるため） */
   max-height: none;
 
   overflow: visible;
   /* 中央揃え */
   margin: 0 auto;
   width: fit-content;
 
   /* 左右均等に少し余白を持たせる */
   padding-left: 5vw;
   padding-right: 5vw;
 
   /* TransformはJSが制御するためCSSでは指定しない */
   transform: none;
   position: relative;
   top: auto;
   left: auto;
 }
 
 /* 横スクロールコンテナ (GSAP制御用) */
 .horizontal-scroll-container,
 .services-grid,
 .step-cases {
   display: flex;
   flex-direction: row !important;
   /* 強制的に横並び（折り返し禁止） */
   flex-wrap: nowrap !important;
   gap: 2rem;
   /* GSAPでTransform制御するため、ネイティブスクロールは無効化 */
   overflow: visible;
   /* Hiddenだと一部切れる可能性、Visibleで親で切る */
   padding: 1rem 0;
 
   /* 子要素が折り返さないように幅を確保 */
   width: max-content;
   max-width: none;
 
   /* 高さ制限を解除して中央揃えを可能にする */
   height: auto !important;
   max-height: none !important;
 
   /* Flex内での垂直中央揃え */
   align-items: center;
 }
 
 /* Service Grid Specifics */
 .services-grid {
   /* PC大画面で左寄せにならないよう中央揃え */
   justify-content: center;
 }
 
 /* Strength (Feature List) Rules */
 .feature-list {
   display: flex;
   flex-direction: column;
   /* デフォルトは縦並び */
   gap: 1.5rem;
   width: 100%;
   max-width: 800px;
   /* 読みやすい幅 */
   margin: 0 auto;
 }
 
 /* Strengthが画面高さを超える場合（JSで判定）は横カラムレイアウトにする */
 .section-overlay.horizontal-scroll-mode .feature-list {
   flex-direction: column;
   flex-wrap: wrap;
   /* 高さを超えたら折り返し＝横に増える */
   height: 70vh;
   /* 高さを制限 */
   width: max-content;
   max-width: none;
   align-content: flex-start;
   /* 左から右へカラムを並べる */
   padding-right: 5vw;
   /* 右端の余白 */
 }
 
 /* Feature List Item Styles */
 .feature-list li {
   /* reset or keep specific styles below */
   width: auto;
 }
 
 
 .horizontal-scroll-container::-webkit-scrollbar {
   height: 6px;
 }
 
 .horizontal-scroll-container::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
 }
 
 .horizontal-scroll-container::-webkit-scrollbar-thumb {
   background: rgba(139, 92, 246, 0.4);
   border-radius: 3px;
 }
 
 .horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
   background: rgba(139, 92, 246, 0.6);
 }
 
 /* 横スクロールアイテム */
 .horizontal-scroll-item {
   flex: 0 0 auto;
   width: 280px;
   scroll-snap-align: start;
 }
 
 /* 横スクロールインジケーター */
 .scroll-indicator {
   display: none;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
   margin-top: 1.5rem;
   padding-top: 1rem;
   border-top: 1px solid rgba(139, 92, 246, 0.15);
   color: #888;
   font-size: 0.8rem;
   transition: color 0.3s ease;
 }
 
 .scroll-indicator svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   animation: scrollHintX 1.5s ease-in-out infinite;
 }
 
 .scroll-indicator.complete {
   color: #22C55E;
 }
 
 .scroll-indicator.complete svg {
   animation: scrollHintY 1.5s ease-in-out infinite;
 }
 
 @keyframes scrollHintX {
 
   0%,
   100% {
     transform: translateX(0);
     opacity: 0.5;
   }
 
   50% {
     transform: translateX(5px);
     opacity: 1;
   }
 }
 
 @keyframes scrollHintY {
 
   0%,
   100% {
     transform: translateY(0);
     opacity: 0.5;
   }
 
   50% {
     transform: translateY(5px);
     opacity: 1;
   }
 }
 
 .section-overlay.horizontal-scroll-mode .scroll-indicator {
   display: flex;
 }
 
 /* ============================================================
    Scroll Spacer — スクロール量を確保
    ============================================================ */
 .scroll-spacer {
   position: relative;
   width: 100%;
   height: 6400px;
   /* 8段階 × 800px（disperse追加） */
   z-index: -1;
   pointer-events: none;
 }
 
 @media (max-width: 768px) {
   .scroll-spacer {
     height: 4800px;
     /* モバイル: 8段階 × 600px */
   }
 }
 
 /* ============================================================
    モバイル: アニメーション軽減
    ============================================================ */
 @media (max-width: 768px) {
   .hero-ring {
     animation: none;
     opacity: 0.3;
   }
 
   .footer-decoration::before,
   .footer-decoration::after {
     animation: none;
   }
 }
 
 /* ============================================================
    Panel Inner — JS制御で表示（Z軸レイヤー型）
    ============================================================ */
 .panel-inner {
   max-width: 700px;
   width: 100%;
   background: rgba(10, 10, 10, 0.55);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   padding: 3rem;
   border-radius: 8px;
   border: 1px solid rgba(139, 92, 246, 0.12);
   margin: 0 auto;
   /* 没入感: パーティクルが透けて見える */
   box-shadow: 0 0 60px rgba(10, 10, 10, 0.4);
 }
 
 @media (max-width: 768px) {
   .panel-inner {
     padding: 2rem;
     width: 90%;
   }
 }
 
 /* ============================================================
    ヒーローパネル
    ============================================================ */
 .hero-panel {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   position: relative;
 }
 
 .hero-panel .panel-inner {
   background: transparent;
   border: none;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   box-shadow: none;
   position: relative;
   /* ヒーローは常時表示 */
   opacity: 1;
   transform: none;
 }
 
 .hero-decoration {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 400px;
   max-width: 90vw;
   height: 400px;
   max-height: 90vw;
   pointer-events: none;
   z-index: -1;
 }
 
 .hero-ring {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   border: 1px solid rgba(139, 92, 246, 0.1);
   animation: ringPulse 4s ease-in-out infinite;
   max-width: 90vw;
   max-height: 90vw;
 }
 
 .hero-ring:nth-child(1) {
   width: 200px;
   height: 200px;
   animation-delay: 0s;
 }
 
 .hero-ring:nth-child(2) {
   width: 300px;
   height: 300px;
   animation-delay: -1s;
 }
 
 .hero-ring:nth-child(3) {
   width: 400px;
   height: 400px;
   animation-delay: -2s;
 }
 
 @keyframes ringPulse {
 
   0%,
   100% {
     opacity: 0.3;
     transform: translate(-50%, -50%) scale(1);
   }
 
   50% {
     opacity: 0.8;
     transform: translate(-50%, -50%) scale(1.05);
   }
 }
 
 .hero-title {
   font-size: clamp(2rem, 6vw, 4rem);
   font-weight: 300;
   letter-spacing: 0.05em;
   margin-bottom: 1.5rem;
   background: linear-gradient(135deg, #8B5CF6 0%, #22C55E 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   position: relative;
 }
 
 .hero-title::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 120%;
   height: 120%;
   background: radial-gradient(ellipse, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
   z-index: -1;
   animation: glowPulse 3s ease-in-out infinite;
 }
 
 @keyframes glowPulse {
 
   0%,
   100% {
     opacity: 0.5;
   }
 
   50% {
     opacity: 1;
   }
 }
 
 .hero-subtitle {
   font-size: 1rem;
   color: #888;
   letter-spacing: 0.15em;
   position: relative;
 }
 
 .hero-subtitle::before,
 .hero-subtitle::after {
   content: '';
   position: absolute;
   top: 50%;
   width: 40px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5));
 }
 
 .hero-subtitle::before {
   right: 100%;
   margin-right: 1rem;
 }
 
 .hero-subtitle::after {
   left: 100%;
   margin-left: 1rem;
   background: linear-gradient(90deg, rgba(139, 92, 246, 0.5), transparent);
 }
 
 .scroll-hint {
   position: absolute;
   bottom: 4vh;
   left: 50%;
   transform: translateX(-50%);
   font-size: 0.7rem;
   color: #444;
   letter-spacing: 0.2em;
   text-transform: uppercase;
 }
 
 .scroll-hint::after {
   content: '';
   display: block;
   width: 1px;
   height: 40px;
   background: linear-gradient(to bottom, #444, transparent);
   margin: 1rem auto 0;
   animation: scrollPulse 2s infinite;
 }
 
 @keyframes scrollPulse {
 
   0%,
   100% {
     opacity: 0.3;
     transform: scaleY(1);
   }
 
   50% {
     opacity: 1;
     transform: scaleY(1.2);
   }
 }
 
 /* ============================================================
    スタンスパネル (Concept / Strength)
    ============================================================ */
 /* 中間のラッパーも高さいっぱいにして、その中で中央揃えにする */
 /* 中間のラッパー（Wrapper）は特に高さを強制しない */
 /* 親のOverlayが align-items: center しているので、自然と天地中央に来る */
 /* Services & CaseStudy Wrappers (Vertical Center) */
 .services-panel,
 .casestudy-panel {
   width: 100%;
   pointer-events: none;
 
   /* 中身を中央揃えにする */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
   /* PCで幅が余る場合に中央配置 */
   margin: 0 auto;
 }
 
 /* Stance (Concept) は独自レイアウトがあるので共通ルールからは除外 */
 /* Stance (Concept) も中央揃えにするが、独自ルールが必要ならここで調整 */
 .stance-panel {
   width: 100%;
   pointer-events: none;
   margin: 0 auto;
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
 .stance-panel .panel-inner,
 .services-panel .panel-inner,
 .casestudy-panel .panel-inner {
   pointer-events: auto;
   /* 念のためインナーも幅指定など */
   max-width: 100%;
 }
 
 
 
 .stance-panel .panel-inner,
 .services-panel .panel-inner,
 .casestudy-panel .panel-inner,
 .approach-panel .panel-inner,
 .contact-panel .panel-inner {
   background: rgba(10, 10, 10, 0.5);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   padding: 3rem 4rem;
 
   /* コンテンツサイズに合わせて枠を縮める（余白削減） */
   width: fit-content;
   max-width: 90vw;
 
   border-radius: 4px;
   border: 1px solid rgba(139, 92, 246, 0.15);
 }
 
 .section-label {
   font-size: 0.7rem;
   letter-spacing: 0.3em;
   color: #8B5CF6;
   margin-bottom: 1rem;
   text-transform: uppercase;
 }
 
 .section-heading {
   font-size: clamp(1.5rem, 4vw, 2.5rem);
   font-weight: 400;
   line-height: 1.6;
   margin-bottom: 1.5rem;
 }
 
 .section-text {
   font-size: 0.95rem;
   color: #aaa;
   line-height: 2;
 }
 
 @media (max-width: 768px) {
   .stance-panel .panel-inner {
     padding: 2rem;
   }
 }
 
 /* ============================================================
    フィーチャーリスト (Strength)
    ============================================================ */
 .feature-list {
   list-style: none;
   margin-top: 2rem;
 }
 
 .feature-list li {
   padding: 1.2rem 0;
   border-bottom: 1px solid rgba(139, 92, 246, 0.15);
   font-size: 0.95rem;
   color: #ccc;
   display: flex;
   align-items: center;
   gap: 1rem;
   transition: all 0.3s ease;
   position: relative;
 }
 
 .feature-list li::before {
   content: '';
   width: 8px;
   height: 8px;
   background: linear-gradient(135deg, #8B5CF6, #22C55E);
   border-radius: 50%;
   flex-shrink: 0;
   transition: all 0.3s ease;
 }
 
 .feature-list li::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 1px;
   background: linear-gradient(90deg, #8B5CF6, transparent);
   transition: width 0.4s ease;
 }
 
 .feature-list li:hover {
   color: #e8e8e8;
   padding-left: 0.5rem;
 }
 
 .feature-list li:hover::before {
   transform: scale(1.3);
   box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
 }
 
 .feature-list li:hover::after {
   width: 100%;
 }
 
 .feature-list li:last-child {
   border-bottom: none;
 }
 
 /* ============================================================
    サービスパネル — 1カラム縦積み + アイコン付きカード
    ============================================================ */
 /* .services-grid {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1.5rem;
 } */
 
 /* 横スクロールモード時のサービスグリッド */
 .horizontal-scroll-mode .services-grid {
   flex-direction: row;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 1rem;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   gap: 1.5rem;
   scrollbar-width: thin;
   scrollbar-color: rgba(34, 197, 94, 0.4) transparent;
 }
 
 .horizontal-scroll-mode .services-grid::-webkit-scrollbar {
   height: 6px;
 }
 
 .horizontal-scroll-mode .services-grid::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .services-grid::-webkit-scrollbar-thumb {
   background: rgba(34, 197, 94, 0.4);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .service-card {
   flex: 0 0 280px;
   scroll-snap-align: start;
   display: flex;
   flex-direction: column;
   grid-template-columns: none;
 }
 
 .horizontal-scroll-mode .service-icon {
   grid-row: auto;
   margin-bottom: 0.8rem;
 }
 
 .service-card {
   display: grid;
   grid-template-columns: 3rem 1fr;
   grid-template-rows: auto auto auto;
   gap: 0 1rem;
   background: rgba(10, 10, 10, 0.5);
   padding: 1.2rem 1.5rem;
   border: 1px solid rgba(34, 197, 94, 0.15);
   border-radius: 4px;
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
 }
 
 .service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.1) 0%, transparent 60%);
   opacity: 0;
   transition: opacity 0.4s ease;
 }
 
 .service-card::after {
   content: '';
   position: absolute;
   top: -2px;
   left: 50%;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, #22C55E, transparent);
   transform: translateX(-50%);
   transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .service-card:hover {
   border-color: rgba(34, 197, 94, 0.5);
   transform: translateY(-4px);
   box-shadow: 0 15px 30px rgba(34, 197, 94, 0.1);
 }
 
 .service-card:hover::before {
   opacity: 1;
 }
 
 .service-card:hover::after {
   width: 80%;
 }
 
 /* アイコン */
 .service-icon {
   grid-row: 1 / -1;
   display: flex;
   align-items: flex-start;
   padding-top: 0.2rem;
 }
 
 .service-icon svg {
   width: 28px;
   height: 28px;
   stroke: #22C55E;
   stroke-width: 1.5;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
 .service-card h3 {
   font-size: 1rem;
   font-weight: 500;
   margin-bottom: 0.3rem;
   color: #22C55E;
   position: relative;
 }
 
 .service-target {
   font-size: 0.8rem;
   color: #999;
   line-height: 1.6;
   margin-bottom: 0.4rem;
   position: relative;
   font-style: italic;
 }
 
 .service-desc {
   font-size: 0.85rem;
   color: #888;
   line-height: 1.8;
   position: relative;
 }
 
 .services-note {
   font-size: 0.8rem;
   color: #666;
   margin-top: 1.5rem;
   text-align: center;
 }
 
 /* ============================================================
    Case Study パネル — ステップ切り替え型
    ============================================================ */
 .casestudy-panel .panel-inner {
   max-width: 750px;
 }
 
 .step-cases {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   margin-top: 2rem;
 }
 
 /* 横スクロールモード時のケーススタディ */
 .horizontal-scroll-mode .step-cases {
   flex-direction: row;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 1rem;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   gap: 1.5rem;
   scrollbar-width: thin;
   scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
 }
 
 .horizontal-scroll-mode .step-cases::-webkit-scrollbar {
   height: 6px;
 }
 
 .horizontal-scroll-mode .step-cases::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .step-cases::-webkit-scrollbar-thumb {
   background: rgba(139, 92, 246, 0.4);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .step-case {
   flex: 0 0 320px;
   scroll-snap-align: start;
 }
 
 /* 横スクロールモード時のアプローチフロー */
 .horizontal-scroll-mode .approach-flow {
   flex-direction: row;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 1rem;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   gap: 1.5rem;
   scrollbar-width: thin;
   scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
 }
 
 .horizontal-scroll-mode .approach-flow::before {
   display: none;
 }
 
 .horizontal-scroll-mode .approach-flow::-webkit-scrollbar {
   height: 6px;
 }
 
 .horizontal-scroll-mode .approach-flow::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .approach-flow::-webkit-scrollbar-thumb {
   background: rgba(139, 92, 246, 0.4);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .approach-step {
   flex: 0 0 280px;
   scroll-snap-align: start;
 }
 
 /* 横スクロールモード時の特徴リスト */
 .horizontal-scroll-mode .feature-list {
   flex-direction: row;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 1rem;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   gap: 1.5rem;
   scrollbar-width: thin;
   scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
 }
 
 .horizontal-scroll-mode .feature-list::-webkit-scrollbar {
   height: 6px;
 }
 
 .horizontal-scroll-mode .feature-list::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .feature-list::-webkit-scrollbar-thumb {
   background: rgba(139, 92, 246, 0.4);
   border-radius: 3px;
 }
 
 .horizontal-scroll-mode .feature-list li {
   flex: 0 0 280px;
   scroll-snap-align: start;
 }
 
 .step-case {
   background: rgba(10, 10, 10, 0.5);
   border: 1px solid rgba(139, 92, 246, 0.15);
   border-radius: 4px;
   overflow: hidden;
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
 }
 
 .step-case-header {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   padding: 1rem 1.2rem;
   border-bottom: 1px solid rgba(139, 92, 246, 0.1);
 }
 
 .step-case-num {
   font-size: 0.7rem;
   color: #8B5CF6;
   font-weight: 600;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   background: rgba(139, 92, 246, 0.15);
   border: 1px solid rgba(139, 92, 246, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
 .step-case-header-text {
   flex: 1;
 }
 
 .step-case-tag {
   font-size: 0.65rem;
   color: #8B5CF6;
   letter-spacing: 0.1em;
   display: block;
   margin-bottom: 0.1rem;
 }
 
 .step-case-title {
   font-size: 1.05rem;
   font-weight: 500;
   color: #e8e8e8;
 }
 
 /* タブ */
 .step-tabs {
   display: flex;
   border-bottom: 1px solid rgba(139, 92, 246, 0.1);
 }
 
 .step-tab {
   flex: 1;
   padding: 0.7rem 0;
   text-align: center;
   font-size: 0.75rem;
   letter-spacing: 0.05em;
   color: #666;
   cursor: pointer;
   position: relative;
   transition: color 0.3s ease;
   user-select: none;
 }
 
 .step-tab::after {
   content: '';
   position: absolute;
   bottom: -1px;
   left: 20%;
   right: 20%;
   height: 2px;
   background: transparent;
   transition: background 0.3s ease;
 }
 
 .step-tab:hover {
   color: #aaa;
 }
 
 .step-tab.active {
   color: #e8e8e8;
 }
 
 .step-tab.active::after {
   background: #8B5CF6;
 }
 
 .step-tab.active-result {
   color: #22C55E;
 }
 
 .step-tab.active-result::after {
   background: #22C55E;
 }
 
 /* コンテンツパネル */
 .step-panels {
   position: relative;
   min-height: 100px;
 }
 
 .step-panel {
   padding: 1.2rem;
   display: none;
   animation: stepFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .step-panel.active {
   display: block;
 }
 
 @keyframes stepFadeIn {
   from {
     opacity: 0;
     transform: translateY(8px);
   }
 
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
 .step-panel-quote {
   font-size: 0.85rem;
   color: #999;
   line-height: 1.8;
   padding: 0.8rem 1rem;
   border-left: 2px solid rgba(139, 92, 246, 0.3);
   background: rgba(139, 92, 246, 0.03);
   font-style: italic;
   border-radius: 0 4px 4px 0;
 }
 
 .step-panel-response {
   font-size: 0.85rem;
   color: #888;
   line-height: 1.8;
 }
 
 .step-panel-result {
   font-size: 0.85rem;
   color: #22C55E;
   line-height: 1.8;
   padding: 0.8rem 1rem;
   background: rgba(34, 197, 94, 0.05);
   border: 1px solid rgba(34, 197, 94, 0.15);
   border-radius: 4px;
 }
 
 .step-panel-result::before {
   content: '→ ';
   font-weight: 600;
 }
 
 /* ============================================================
    Approachパネル — 縦タイムライン
    ============================================================ */
 .approach-panel .panel-inner {
   max-width: 700px;
 }
 
 .approach-flow {
   display: flex;
   flex-direction: column;
   gap: 0;
   margin-top: 2rem;
   position: relative;
 }
 
 /* 縦の接続線 */
 .approach-flow::before {
   content: '';
   position: absolute;
   top: 0;
   left: 1.5rem;
   width: 1px;
   height: 100%;
   background: linear-gradient(to bottom, #8B5CF6, rgba(34, 197, 94, 0.3));
 }
 
 .approach-step {
   position: relative;
   padding: 1.2rem 1.5rem 1.2rem 3.5rem;
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .approach-step:hover {
   transform: translateX(4px);
 }
 
 /* 丸いステップ番号 */
 .step-number {
   position: absolute;
   left: 0.5rem;
   top: 1.2rem;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   background: rgba(139, 92, 246, 0.15);
   border: 1px solid rgba(139, 92, 246, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.7rem;
   color: #8B5CF6;
   letter-spacing: 0;
   font-weight: 600;
 }
 
 .approach-step h4 {
   font-size: 1rem;
   font-weight: 500;
   margin-bottom: 0.4rem;
   color: #e8e8e8;
   position: relative;
 }
 
 .approach-step p {
   font-size: 0.85rem;
   color: #888;
   line-height: 1.7;
   position: relative;
 }
 
 /* ============================================================
    コンタクトパネル
    ============================================================ */
 .contact-panel {
   text-align: center;
 }
 
 .contact-text {
   font-size: 1rem;
   color: #888;
   margin-bottom: 2.5rem;
   line-height: 2;
 }
 
 .contact-button {
   display: inline-block;
   padding: 1.2rem 4rem;
   border: 1px solid #8B5CF6;
   color: #8B5CF6;
   text-decoration: none;
   font-size: 0.9rem;
   letter-spacing: 0.15em;
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   pointer-events: auto;
   position: relative;
   overflow: hidden;
 }
 
 .contact-button::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
   transform: translate(-50%, -50%);
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   opacity: 0;
   z-index: -1;
 }
 
 .contact-button::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
   transition: left 0.5s ease;
 }
 
 .contact-button:hover {
   background: #8B5CF6;
   color: #fff;
   box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
   transform: translateY(-2px);
 }
 
 .contact-button:hover::before {
   width: 300px;
   height: 300px;
   opacity: 0.3;
 }
 
 .contact-button:hover::after {
   left: 100%;
 }
 
 @media (max-width: 768px) {
   .contact-button {
     padding: 1rem 2.5rem;
   }
 }
 
 /* ============================================================
    サイトフッター（通常フロー、末尾に配置）
    ============================================================ */
 .site-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 5;
   padding: 4rem 5%;
   text-align: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s ease;
 }
 
 .site-footer.is-visible {
   opacity: 1;
   visibility: visible;
 }
 
 .footer-panel {
   text-align: center;
   align-items: center;
 }
 
 .footer-panel .panel-inner {
   background: transparent !important;
   border: none !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
   box-shadow: none !important;
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
 }
 
 .footer-nav {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 2rem;
   margin-bottom: 2rem;
 }
 
 .footer-nav a {
   color: #888;
   text-decoration: none;
   font-size: 0.85rem;
   letter-spacing: 0.05em;
   transition: color 0.3s ease;
 }
 
 .footer-nav a:hover {
   color: #8B5CF6;
 }
 
 .copyright {
   color: #555;
   font-size: 0.75rem;
   letter-spacing: 0.1em;
 }
 
 .footer-decoration {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   pointer-events: none;
   overflow: hidden;
   z-index: -1;
 }
 
 .footer-decoration::before,
 .footer-decoration::after {
   content: '';
   position: absolute;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(139, 92, 246, 0.03) 0%, transparent 70%);
   animation: floatDecor 8s ease-in-out infinite;
 }
 
 .footer-decoration::before {
   top: 10%;
   left: 10%;
   animation-delay: 0s;
 }
 
 .footer-decoration::after {
   bottom: 10%;
   right: 10%;
   animation-delay: -4s;
 }
 
 @keyframes floatDecor {
 
   0%,
   100% {
     transform: translate(0, 0) scale(1);
     opacity: 0.5;
   }
 
   50% {
     transform: translate(20px, -20px) scale(1.1);
     opacity: 1;
   }
 }
 
 /* ============================================================
    プログレスインジケーター
    ============================================================ */
 .progress-bar {
   position: fixed;
   top: 0;
   left: 0;
   height: 2px;
   width: 0%;
   background: linear-gradient(90deg, #8B5CF6, #22C55E);
   z-index: 100;
 }
 
 /* ============================================================
    ローディング
    ============================================================ */
 .loading {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #0a0a0a;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 200;
   transition: opacity 0.5s ease;
 }
 
 .loading.hidden {
   opacity: 0;
   pointer-events: none;
 }
 
 .loading-text {
   color: #888;
   font-size: 0.9rem;
   letter-spacing: 0.2em;
 }
 
 /* ============================================================
    PC横スクロール強制用
    ============================================================ */
 .service-card {
   /* PCで1600pxなどの広画面でも横スクロールを発生させるために幅を確保 */
   min-width: 400px !important;
   flex: 0 0 auto !important;
 }
 
 .services-grid,
 .horizontal-scroll-container {
   /* 折り返し禁止 */
   flex-wrap: nowrap !important;
 }
 
 /* ユーザー指摘によるマージン調整: 右に偏るのを防ぐため左右均等に */
 .section-overlay.horizontal-scroll-mode .step-case {
   margin-right: 1rem !important;
   margin-left: 1rem !important;
   margin-bottom: 0;
 }
 
 /* Casestudyの「横にスクロール」案内文を非表示にする（機能は維持） */
 .casestudy-panel .scroll-indicator {
   display: none !important;
 }