/* ========================================
   MALINE - 革新的白基調デザインシステム v3.0
   完全リニューアル版
======================================== */

/* ========================================
   カスタムプロパティ（CSS変数）
======================================== */
:root {
  /* === カラーパレット === */
  --primary-white: #FFFFFF;
  --snow-white: #FEFEFE;
  --pearl-white: #F8F9FA;
  --silver-white: #F5F5F5;
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* === MALINEシルバーグラデーション === */
  --maline-silver: linear-gradient(135deg, 
    #E8E9EA 0%, #FFFFFF 8%, #C4C7C5 16%, #F1F2F3 24%, 
    #DADCDD 32%, #FFFFFF 40%, #E1E3E1 48%, #F8F9FA 56%, 
    #CECFD1 64%, #FFFFFF 72%, #D6D8D9 80%, #F4F5F6 88%, 
    #E0E2E3 96%, #FFFFFF 100%);
  
  --silver-accent: linear-gradient(135deg, #E8E9EA 0%, #FFFFFF 50%, #D1D3D4 100%);
  --silver-shine: linear-gradient(135deg, #FFFFFF 0%, #E8E9EA 20%, #F5F5F5 40%, #FFFFFF 60%, #E1E3E1 80%, #F8F9FA 100%);
  --silver-blue-accent: linear-gradient(135deg, #E8E9EA 0%, #4FA5E6 25%, #FFFFFF 50%, #6BB6EA 75%, #D1D3D4 100%);
  --marine-silver: linear-gradient(135deg, #4FA5E6 0%, #E8E9EA 20%, #6BB6EA 40%, #FFFFFF 60%, #3394E1 80%, #F8F9FA 100%);

  /* === ブランドカラー === */
  --maline-blue: #4FA5E6;
  --maline-blue-light: #6BB6EA;
  --maline-blue-dark: #3394E1;
  --maline-blue-gradient: linear-gradient(135deg, #4FA5E6 0%, #6BB6EA 50%, #3394E1 100%);
  --silver-blue-fusion: linear-gradient(135deg, #E8E9EA 0%, #4FA5E6 15%, #FFFFFF 30%, #6BB6EA 45%, #F5F5F5 60%, #4FA5E6 75%, #E1E3E1 90%, #F8F9FA 100%);
  --success-green: #10B981;
  --warning-orange: #F59E0B;
  --error-red: #EF4444;

  /* === スペーシング === */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* === タイポグラフィ === */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */
  --text-7xl: 4.5rem;    /* 72px */
  --text-8xl: 6rem;      /* 96px */

  /* === ボーダーラジウス === */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* === シャドウ === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-silver: 0 10px 30px rgba(232, 233, 234, 0.3);

  /* === アニメーション === */
  --timing-fast: 0.15s;
  --timing-smooth: 0.3s;
  --timing-slow: 0.5s;
  --timing-ultra: 0.75s;
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   リセット & ベーススタイル
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--neutral-800);
  background: var(--primary-white);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.main {
  padding-top: 0;
}

/* ========================================
   SVGアイコンスタイル
======================================== */
.cta-icon {
  margin-right: 8px;
  color: currentColor;
  opacity: 0.9;
}

.feature-icon {
  margin-right: 8px;
  color: var(--maline-blue);
  opacity: 0.8;
}

.section-icon {
  margin-right: 8px;
  color: white;
  opacity: 1;
}

.badge-icon {
  margin-right: 6px;
  color: currentColor;
  opacity: 0.8;
}

.cta-mega-arrow svg {
  color: currentColor;
  opacity: 0.9;
}

/* ========================================
   MALINEシルバーアクセント共通クラス
======================================== */
.maline-silver {
  background: var(--maline-silver);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}



/* ========================================
   マリンブルー背景 + シルバーキラーンエフェクト
======================================== */
.marine-blue-bg {
  background: var(--maline-blue) !important;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  color: white !important;
  -webkit-text-fill-color: white !important;
}





@keyframes marine-glow {
  0%, 100% { 
    box-shadow: 0 4px 15px rgba(43, 124, 233, 0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 6px 25px rgba(43, 124, 233, 0.5);
    transform: scale(1.02);
  }
}



/* ========================================
   コンテナ & レイアウト
======================================== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  overflow: visible;
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-4);
  }
}

/* ========================================
   ヘッダー
======================================== */
.scroll-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--maline-blue-gradient);
  z-index: 10;
  transition: width var(--timing-fast) var(--easing-smooth);
}

.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  /* ヘッダーに境界線なし - ユーザー要望により削除 */
}

.nav {
  padding: var(--space-4) 0;
  position: relative;
}

.nav-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
  padding: 0 var(--space-8);
  box-sizing: border-box;
}

.nav-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-logo .logo-img {
  height: 48px;
  width: auto;
  filter: brightness(1.1) saturate(0.8) contrast(1.1);
  transition: filter 0.3s ease;
}

.nav-logo .logo-img:hover {
  filter: brightness(1.2) saturate(0.7) contrast(1.15);
}

.nav-menu-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  text-decoration: none;
  color: var(--neutral-700);
  font-weight: 500;
  font-size: var(--text-sm);
  transition: color var(--timing-smooth) var(--easing-smooth);
}

.nav-link:hover {
  color: var(--neutral-900);
}

.revision-display {
  background: var(--maline-blue-gradient);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  animation: marine-glow 4s ease-in-out infinite;
}

.nav-actions {
  display: flex !important;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.btn-secondary,
.btn-primary {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--timing-smooth) var(--easing-smooth);
  border: none;
}

.btn-secondary {
  background: transparent;
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
}

.btn-secondary:hover {
  background: var(--neutral-50);
  color: var(--neutral-900);
}

.btn-primary {
  background: var(--maline-blue);
  color: white;
  box-shadow: 0 4px 15px rgba(79, 165, 230, 0.4);
  position: relative;
  overflow: hidden;
}

/* シルバーキラーンエフェクト */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: sparkle-sweep 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes sparkle-sweep {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 200%;
    opacity: 0;
  }
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 165, 230, 0.5);
  background: var(--maline-blue-dark);
}

.nav-toggle {
  display: none !important;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.nav-toggle span {
  width: 24px;
  height: 3px;
  background: var(--neutral-700);
  margin: 2px 0;
  transition: var(--timing-smooth);
  border-radius: var(--radius-full);
}

/* ========================================
   革新的ヒーローセクション
======================================== */
.hero-revolutionary {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #5BA6E8 0%, #4FA5E6 25%, #6BB6EA 50%, #4FA5E6 75%, #5BA6E8 100%);
  position: relative;
  overflow: hidden;
  padding: 120px 0 0px;
  color: white;
}

/* Offersライクな波型装飾 */
.hero-revolutionary::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 100px;
  background: white;
  clip-path: ellipse(100% 100% at 50% 100%);
  z-index: 1;
}

/* 右側の円形装飾要素 */
.hero-revolutionary::after {
  content: '';
  position: absolute;
  top: 15%;\n  right: 15%;\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.12);\n  pointer-events: none;\n  z-index: 1;\n}

/* 追加の光沢ハイライト - 背景画像の上にオーバーレイ */
.hero-revolutionary {
  /* 背景画像は上記で設定済み */
}



.hero-revolutionary::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 8%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}

/* 追加の円形装飾要素 */
.hero-revolutionary .hero-decoration-circles {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: none; /* 3色背景を優先 */
}

.hero-revolutionary .circle-1 {
  position: absolute;
  top: 30%;
  right: 20%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.hero-revolutionary .circle-2 {
  position: absolute;
  top: 45%;
  right: 12%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.hero-revolutionary .circle-3 {
  position: absolute;
  top: 60%;
  right: 25%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.hero-revolutionary .circle-4 {
  position: absolute;
  top: 70%;
  right: 35%;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

/* ヒーローメインCTAボタン */
.hero-main-cta {
  cursor: pointer;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

.hero-main-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  background: rgba(255,255,255,0.95) !important;
}

/* ========================================
   リアル3Dデバイスデザイン
======================================== */







@keyframes silver-loading-bounce {
  0%, 80%, 100% { 
    transform: scale(0.7) translateY(0px);
    opacity: 0.6;
    box-shadow: 
      0 0 8px rgba(255, 255, 255, 0.4),
      0 0 15px rgba(248, 249, 250, 0.2),
      inset 0 1px 2px rgba(255, 255, 255, 0.6);
  }
  40% { 
    transform: scale(1.2) translateY(-12px);
    opacity: 1;
    box-shadow: 
      0 0 20px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(248, 249, 250, 0.6),
      inset 0 1px 2px rgba(255, 255, 255, 1);
  }
}

/* ラップトップ全体のコンテナ - 透過画像表示 */
.laptop-3d {
  position: relative;
  width: 100%;
  height: 500px;
  max-width: 650px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/laptop-transparent.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
  margin: 0 auto;
}

@keyframes laptop-breathe {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.01);
  }
}







/* キーボードの洗練されたキー模様 */
.laptop-keyboard::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 10px;
  right: 10px;
  bottom: 3px;
  background: 
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 15px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.02) 0px,
      rgba(0, 0, 0, 0.02) 1px,
      transparent 1px,
      transparent 8px
    );
  border-radius: 8px;
}

/* シルバーメタル反射効果 */
.laptop-keyboard::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 45%, 
    rgba(255, 255, 255, 0.8) 50%, 
    rgba(255, 255, 255, 0.3) 55%, 
    transparent 100%);
  border-radius: 12px;
  animation: silver-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes silver-sweep {
  0%, 100% {
    left: -100%;
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }
  50% {
    left: 100%;
  }
}



/* 他の要素を非表示 */














@keyframes silver-screen-glow {
  0%, 100% { 
    box-shadow: 
      0 -15px 50px rgba(0, 0, 0, 0.2),
      0 -5px 25px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.9),
      0 0 0 3px #E8E9EA,
      inset 0 2px 0 rgba(255, 255, 255, 1),
      inset 0 -2px 8px rgba(0, 0, 0, 0.05),
      0 0 30px rgba(232, 233, 234, 0.4);
  }
  50% { 
    box-shadow: 
      0 -20px 60px rgba(0, 0, 0, 0.25),
      0 -8px 35px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(255, 255, 255, 1),
      0 0 0 3px #F8F9FA,
      inset 0 2px 0 rgba(255, 255, 255, 1),
      inset 0 -2px 8px rgba(0, 0, 0, 0.03),
      0 0 50px rgba(248, 249, 250, 0.6);
  }
}

@keyframes silver-shimmer {
  0%, 100% { 
    background: linear-gradient(135deg, 
      #F8F9FA 0%, 
      #E8E9EA 15%, 
      #FFFFFF 30%, 
      #E1E3E1 45%, 
      #F5F5F5 60%, 
      #DADCDD 75%, 
      #FFFFFF 90%, 
      #E8E9EA 100%);
  }
  50% { 
    background: linear-gradient(135deg, 
      #FFFFFF 0%, 
      #F8F9FA 15%, 
      #E8E9EA 30%, 
      #FFFFFF 45%, 
      #E1E3E1 60%, 
      #F5F5F5 75%, 
      #E8E9EA 90%, 
      #FFFFFF 100%);
  }
}

@keyframes keyboard-shine {
  0%, 100% { 
    box-shadow: 
      inset 0 2px 8px rgba(0, 0, 0, 0.08),
      inset 0 -1px 3px rgba(255, 255, 255, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 5px 15px rgba(0, 0, 0, 0.08),
      0 2px 5px rgba(0, 0, 0, 0.05);
  }
  50% { 
    box-shadow: 
      inset 0 2px 8px rgba(0, 0, 0, 0.05),
      inset 0 -1px 3px rgba(255, 255, 255, 1),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 5px 15px rgba(0, 0, 0, 0.05),
      0 2px 5px rgba(0, 0, 0, 0.03),
      0 0 20px rgba(255, 255, 255, 0.3);
  }
}

/* ========================================
   リアル3Dスマートフォンデザイン
======================================== */

.smartphone-3d {
  display: none;
}



/* スマートフォン本体 - 正面向きシルバーホワイト */
.smartphone-body {
  position: relative;
  width: 140px;
  height: 250px;
  background: linear-gradient(135deg, 
    #FFFFFF 0%, 
    #F8F9FA 15%, 
    #E8E9EA 30%, 
    #FFFFFF 45%, 
    #E1E3E1 60%, 
    #F5F5F5 75%, 
    #E8E9EA 90%, 
    #FFFFFF 100%);
  border-radius: 28px;
  transform: rotateY(-8deg) rotateX(3deg);
  transform-origin: center;
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(232, 233, 234, 0.8),
    0 0 0 3px rgba(255, 255, 255, 0.9),
    inset 0 1px 2px rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(0, 0, 0, 0.05);
  animation: smartphone-silver-glow 4.5s ease-in-out infinite;
}

/* シルバーフレームのエッジ */
.smartphone-body::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 28px;
  background: linear-gradient(135deg, 
    #F8F9FA 0%, 
    #E8E9EA 25%, 
    #FFFFFF 50%, 
    #E1E3E1 75%, 
    #F5F5F5 100%);
  box-shadow: 
    inset 0 1px 3px rgba(255, 255, 255, 0.8),
    inset 0 -1px 3px rgba(0, 0, 0, 0.05);
  z-index: -1;
}

/* スマートフォン画面 - シルバーフレーム */
.smartphone-screen {
  position: absolute;
  top: 10px;
  left: 7px;
  right: 7px;
  height: 230px;
  background: linear-gradient(135deg, #1A1A1B 0%, #000000 100%);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 
    inset 0 0 25px rgba(0, 0, 0, 0.8),
    inset 0 0 0 2px rgba(232, 233, 234, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Dynamic Island - シルバーアクセント */
.smartphone-screen::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 22px;
  background: linear-gradient(135deg, #2C2C2E 0%, #1A1A1B 50%, #000000 100%);
  border-radius: 18px;
  z-index: 10;
  box-shadow: 
    inset 0 1px 2px rgba(232, 233, 234, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(232, 233, 234, 0.1);
}

/* スマートフォン画面のベゼル - エッジトゥエッジ */
.smartphone-screen-bezel {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: linear-gradient(135deg, #000000 0%, #0F0F0F 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* スマートフォン画面表示エリア - Super Retina XDR */
.smartphone-display {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 
    inset 0 0 40px rgba(30, 41, 59, 0.4),
    inset 0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* ホームインジケーター - シルバー */
.smartphone-home-button {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 4px;
  background: linear-gradient(135deg, 
    #E8E9EA 0%, 
    #FFFFFF 50%, 
    #D1D3D4 100%);
  border-radius: 2px;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

/* スマートフォン用プレースホルダー - シルバーコンパクト */
.smartphone-placeholder {
  font-size: 0.72rem;
  padding: 15px !important;
  background: 
    radial-gradient(ellipse 80px 40px at center, rgba(248, 249, 250, 0.2) 0%, transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.smartphone-placeholder p {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.smartphone-placeholder .loading-dots {
  gap: 4px;
  margin-bottom: 6px;
}

.smartphone-placeholder .loading-dots span {
  width: 7px;
  height: 7px;
}

@keyframes smartphone-silver-glow {
  0%, 100% { 
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.2),
      0 8px 25px rgba(0, 0, 0, 0.15),
      0 3px 10px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(232, 233, 234, 0.8),
      0 0 0 3px rgba(255, 255, 255, 0.9),
      inset 0 1px 2px rgba(255, 255, 255, 1),
      inset 0 -1px 2px rgba(0, 0, 0, 0.05),
      0 0 30px rgba(248, 249, 250, 0.4);
  }
  50% { 
    box-shadow: 
      0 25px 80px rgba(0, 0, 0, 0.25),
      0 10px 35px rgba(0, 0, 0, 0.2),
      0 5px 15px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(248, 249, 250, 0.9),
      0 0 0 3px rgba(255, 255, 255, 1),
      inset 0 1px 2px rgba(255, 255, 255, 1),
      inset 0 -1px 2px rgba(0, 0, 0, 0.03),
      0 0 50px rgba(255, 255, 255, 0.6);
  }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  
  .hero-content {
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  
  .hero-benefits {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .benefit-item {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  
  .hero-pc-container {
    padding-left: 0 !important;
  }
  

  
  .laptop-3d {
    width: 100% !important;
    height: 280px !important;
    max-width: 350px !important;
  }
  

  
  .smartphone-3d {
    width: 110px !important;
    height: 200px !important;
    left: 8px !important;
    top: 60px !important;
  }
  
  .smartphone-body {
    width: 110px !important;
    height: 200px !important;
  }
  
  .smartphone-screen {
    height: 180px !important;
    top: 8px !important;
    left: 6px !important;
    right: 6px !important;
  }
  
  .smartphone-screen::before {
    width: 55px !important;
    height: 18px !important;
    top: 10px !important;
  }
  

  

}

.hero-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(85vh - 120px);
  width: 100%;
  margin: 0;
  padding: 0 1rem 2rem 4rem;
  position: relative;
  z-index: 2;
  gap: 4rem;
}

/* 左側: コンテンツエリア */
.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  max-width: 500px;
}

/* 右側: PC表示エリア */
.hero-pc-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 2rem;
  min-width: 0; /* フレックスボックスでの縮小を許可 */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  width: fit-content;
  border: 1px solid #93c5fd;
}

@keyframes gentle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.badge-icon {
  font-size: var(--text-lg);
}

.hero-main-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: white;
  margin: 0 0 1.5rem 0;
  text-align: center;
  white-space: nowrap;
}

.hero-sub-title {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9em;
}

.hero-logo {
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 900;
  color: white;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
  font-family: 'Inter', sans-serif;
}

.hero-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 2rem 0;
  text-align: center;
}

/* 統計情報 */
.hero-stats {
  display: flex;
  gap: 2rem;
  margin: 1rem 0;
}

.stat-item {
  text-align: left;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2B7CE9;
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* CTAボタン */
.hero-cta {
  display: flex;
  gap: 1rem;
  margin: 4rem 0 0 0;
  z-index: 2;
  position: relative;
}

.cta-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.cta-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* セカンダリボタンは光沢なし */

.cta-primary {
  background: var(--maline-blue);
  color: white;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(79, 165, 230, 0.4);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.cta-primary:hover {
  background: var(--maline-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(51, 148, 225, 0.5);
}

/* 光沢アニメーション */
.cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent
  );
  animation: shine-effect 3s ease-in-out infinite;
  z-index: 1;
}

.cta-primary span {
  position: relative;
  z-index: 2;
}

@keyframes shine-effect {
  0% {
    left: -100%;
  }
  20% {
    left: -100%;
  }
  50% {
    left: 0%;
  }
  80% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.title-line1,
.title-line2,
.title-line3,
.title-line4 {
  display: block;
}

.title-line1 {
  color: var(--neutral-900);
  animation: slide-in-left 0.8s var(--easing-bounce) 0.2s both;
}

.title-line2 {
  animation: slide-in-left 0.8s var(--easing-bounce) 0.4s both;
}

.title-line3 {
  animation: slide-in-left 0.8s var(--easing-bounce) 0.6s both;
}

.title-line4 {
  color: var(--neutral-900);
  animation: slide-in-left 0.8s var(--easing-bounce) 0.8s both;
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-description {
  font-size: var(--text-xl);
  line-height: 1.7;
  color: var(--neutral-600);
  margin-bottom: var(--space-8);
  animation: fade-in-up 0.8s var(--easing-smooth) 1s both;
}

.highlight-text {
  background: var(--silver-blue-accent);
  color: white;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-weight: 700;
  animation: marine-glow 3s ease-in-out infinite;
}

.hero-stats-inline {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  justify-content: center;
  animation: fade-in-up 0.8s var(--easing-smooth) 1.2s both;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--neutral-900);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  font-weight: 500;
}

.hero-actions {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  justify-content: center;
  animation: fade-in-up 0.8s var(--easing-smooth) 1.4s both;
}

.cta-primary-large {
  background: var(--maline-blue);
  color: white;
  border: none;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  position: relative;
  overflow: hidden;
  transition: all var(--timing-smooth) var(--easing-smooth);
  box-shadow: 0 8px 30px rgba(79, 165, 230, 0.3);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.cta-primary-large:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(79, 165, 230, 0.4);
  background: var(--maline-blue-dark);
}

.cta-text {
  font-size: var(--text-lg);
  font-weight: 700;
}

.cta-subtext {
  font-size: var(--text-sm);
  opacity: 0.8;
}

.cta-arrow {
  position: absolute;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-2xl);
  font-weight: 300;
}

.cta-secondary {
  background: transparent;
  color: var(--neutral-700);
  border: 2px solid var(--neutral-300);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--timing-smooth) var(--easing-smooth);
}

.cta-secondary:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-400);
  transform: translateY(-2px);
}

/* ========================================
   ヒーロービジュアル
======================================== */
.hero-right {
  position: relative;
  z-index: 1;
}

.hero-visual-container {
  position: relative;
  animation: fade-in-up 1s var(--easing-smooth) 1.6s both;
}

.floating-dashboard {
  background: var(--primary-white);
  border-radius: var(--radius-3xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(232, 233, 234, 0.3);
  position: relative;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
}

.dashboard-logo {
  font-size: var(--text-xl);
  font-weight: 800;
  background: var(--maline-silver);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.dashboard-status {
  background: var(--maline-blue-gradient);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  animation: marine-glow 2s ease-in-out infinite;
}

.channel-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.channel-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--snow-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  transition: all var(--timing-smooth) var(--easing-smooth);
}

.channel-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--neutral-300);
}

.channel-icon {
  font-size: var(--text-2xl);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--silver-blue-accent);
  border-radius: var(--radius-lg);
  color: white;
  animation: marine-glow 3s ease-in-out infinite;
}

.channel-info h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--space-1);
}

.channel-info p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  margin-bottom: var(--space-2);
}

.channel-stats {
  font-size: var(--text-sm);
  color: var(--maline-blue);
  font-weight: 600;
}

.hero-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.floating-element {
  position: absolute;
  font-size: var(--text-4xl);
  opacity: 0.1;
  animation: float-around 6s ease-in-out infinite;
}

.element-1 {
  top: 10%;
  right: 10%;
  animation-delay: 0s;
}

.element-2 {
  top: 60%;
  right: 80%;
  animation-delay: 2s;
}

.element-3 {
  bottom: 20%;
  right: 20%;
  animation-delay: 4s;
}

@keyframes float-around {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(5deg); }
  66% { transform: translateY(10px) rotate(-3deg); }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   セクション共通スタイル
======================================== */
.section-header-center {
  text-align: center;
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #87CEEB 0%, #5DADE2 100%);
  color: white;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 15px rgba(93, 173, 226, 0.3);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  margin-bottom: var(--space-6);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.section-description {
  font-size: var(--text-xl);
  line-height: 1.7;
  color: var(--neutral-600);
}

/* ========================================
   機能セクション
======================================== */
.features-ultimate {
  padding: var(--space-32) 0;
  background: linear-gradient(135deg, var(--snow-white) 0%, var(--primary-white) 100%);
}

.features-showcase {
  max-width: 1200px;
  margin: 0 auto;
}

.feature-main-card {
  background: var(--primary-white);
  border: 2px solid rgba(232, 233, 234, 0.4);
  border-radius: var(--radius-3xl);
  padding: var(--space-12);
  margin-bottom: var(--space-16);
  text-align: center;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.feature-main-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(232, 233, 234, 0.1), transparent);
  
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.feature-header {
  margin-bottom: var(--space-8);
}

.feature-icon-large {
  font-size: var(--text-6xl);
  margin-bottom: var(--space-4);
  display: block;
}

.feature-main-card h3 {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--neutral-900);
  margin-bottom: var(--space-4);
}

.feature-main-card p {
  font-size: var(--text-xl);
  color: var(--neutral-600);
}

.feature-visual {
  max-width: 600px;
  margin: 0 auto;
}

.channel-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--silver-accent);
  border-radius: var(--radius-xl);
  min-width: 80px;
  transition: all var(--timing-smooth) var(--easing-smooth);
}

.flow-step.active {
  background: var(--silver-blue-fusion);
  background-size: 200% 200%;
  
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(43, 124, 233, 0.3);
  color: var(--neutral-900);
}

.step-icon {
  font-size: var(--text-2xl);
}

.flow-arrow {
  font-size: var(--text-2xl);
  color: var(--neutral-400);
  font-weight: 300;
}

.flow-result {
  text-align: center;
  padding: var(--space-4);
  background: var(--maline-blue-gradient);
  color: white;
  border-radius: var(--radius-lg);
  font-weight: 600;
  animation: marine-glow 2s ease-in-out infinite;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}

.feature-card.premium {
  background: var(--primary-white);
  border: 2px solid rgba(232, 233, 234, 0.4);
  border-radius: var(--radius-3xl);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--timing-smooth) var(--easing-smooth);
  position: relative;
  overflow: hidden;
}

.feature-card.premium:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl);
  border-color: rgba(232, 233, 234, 0.6);
}

.feature-card .feature-icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  display: block;
}

.feature-card h4 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--space-3);
}

.feature-card p {
  font-size: var(--text-base);
  color: var(--neutral-600);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.feature-highlight {
  background: var(--maline-blue-gradient);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-block;
  animation: marine-glow 3s ease-in-out infinite;
}

/* ========================================
   料金セクション
======================================== */
.pricing-revolutionary {
  padding: var(--space-32) 0;
  background: linear-gradient(135deg, var(--primary-white) 0%, var(--snow-white) 100%);
}

.pricing-comparison {
  margin-bottom: var(--space-20);
}

.comparison-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.comparison-header h3 {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--neutral-900);
}

.comparison-table {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.comparison-item {
  background: var(--primary-white);
  border: 2px solid;
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  text-align: center;
  flex: 0 0 340px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-4);
}

.comparison-item.competitor {
  border-color: var(--neutral-300);
  transform: scale(0.95);
  transform-origin: bottom center;
  opacity: 0.85;
  z-index: 1;
}

.comparison-item.maline-special {
  background: linear-gradient(135deg, 
    var(--maline-blue-light) 0%, 
    var(--maline-blue) 50%, 
    var(--maline-blue-dark) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  position: relative;
  transform: scale(1.15);
  transform-origin: bottom center;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  overflow: hidden;
  z-index: 10;
  flex: 0 0 380px;
  min-height: 520px;
}

.comparison-item.maline-special::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent
  );
  animation: shimmer-left-to-right 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.comparison-item.maline-special::after {
  content: '';
  position: absolute;
  top: 0;
  right: 5%;
  width: 100px;
  height: 100%;
  background: 
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px, 10px 10px;
  background-position: 0 0, 10px 10px;
  animation: dots-float 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes card-float {
  0%, 100% { transform: scale(1.15) translateY(0px); }
  50% { transform: scale(1.15) translateY(-8px); }
}

@keyframes dots-float {
  0%, 100% { opacity: 0.3; transform: translateY(0px); }
  50% { opacity: 0.6; transform: translateY(-10px); }
}

.comparison-badge {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  background: linear-gradient(135deg, #da0500 0%, #ff1a0f 50%, #c00400 100%);
  color: white;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  animation: marine-glow 2s ease-in-out infinite;
  box-shadow: 0 8px 20px rgba(218, 5, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.comparison-label {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--neutral-700);
  margin: 0 0 var(--space-4) 0;
  padding: 0;
  text-align: center;
  display: block;
  width: 100%;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison-label-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 0 var(--space-4) 0;
  padding: 0;
  width: 100%;
  min-height: 3rem;
}

.comparison-item.maline-special .comparison-label {
  color: white;
}

.comparison-item.maline-special .comparison-price {
  color: white;
}

.comparison-item.maline-special .price-main {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.comparison-item.maline-special .price-prefix {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font-size: 0.75rem;
  display: inline;
  margin-right: 4px;
}

.comparison-item.maline-special .price-sub {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.comparison-item.maline-special .feature-item {
  color: white;
}

.comparison-item.maline-special > * {
  position: relative;
  z-index: 3;
}

.maline-card-logo {
  height: 2.5rem;
  width: auto;
  filter: none;
  opacity: 1;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}

.comparison-item.maline-special .maline-card-logo {
  filter: brightness(0) invert(1);
}

.comparison-price {
  margin: var(--space-4) 0;
  padding: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.comparison-price > :first-child {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}

.price-prefix {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neutral-600);
  display: inline;
  letter-spacing: 0.02em;
  margin-right: 4px;
}

.price-main {
  font-size: var(--text-4xl);
  font-weight: 900;
  color: var(--neutral-900);
  display: inline;
}

.price-sub {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  display: block;
  margin-top: var(--space-2);
}

.comparison-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

.feature-item {
  font-size: var(--text-base);
  color: var(--neutral-600);
  padding: var(--space-3) 0;
  text-align: left;
}

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-8);
  max-width: 900px;
  margin: 0 auto;
}

.plan-card {
  background: var(--primary-white);
  border: 2px solid rgba(232, 233, 234, 0.4);
  border-radius: var(--radius-3xl);
  padding: var(--space-10);
  text-align: center;
  transition: all var(--timing-smooth) var(--easing-smooth);
  position: relative;
}

.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.premium-plan {
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
  border-color: rgba(232, 233, 234, 0.6);
}

.plan-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--maline-blue-gradient);
  color: white;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  animation: marine-glow 2s ease-in-out infinite;
  box-shadow: 0 8px 20px rgba(43, 124, 233, 0.4);
}

.plan-header h4 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--space-4);
}

.plan-price {
  margin-bottom: var(--space-4);
}

.price {
  font-size: var(--text-5xl);
  font-weight: 900;
  color: var(--neutral-900);
}

.period {
  font-size: var(--text-lg);
  color: var(--neutral-600);
}

.plan-note {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  margin-bottom: var(--space-6);
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  text-align: left;
}

.plan-features .feature {
  font-size: var(--text-base);
  color: var(--neutral-700);
}

.plan-cta {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--timing-smooth) var(--easing-smooth);
  border: none;
}

.free-cta {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 2px solid var(--neutral-300);
}

.free-cta:hover {
  background: var(--neutral-200);
}

.premium-cta {
  background: var(--maline-blue);
  color: white;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(79, 165, 230, 0.4);
  position: relative;
  overflow: hidden;
}

.premium-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(79, 165, 230, 0.5);
  background: var(--maline-blue-dark);
}

/* ========================================
   導入実績セクション
======================================== */
.testimonials-power {
  padding: var(--space-32) 0;
  background: linear-gradient(135deg, var(--snow-white) 0%, var(--pearl-white) 100%);
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.testimonials-showcase {
  max-width: 1200px;
  margin: 0 auto;
}

.hero-testimonial {
  background: var(--primary-white);
  border: 2px solid rgba(232, 233, 234, 0.4);
  border-radius: var(--radius-3xl);
  padding: var(--space-12);
  margin-bottom: var(--space-16);
  box-shadow: var(--shadow-xl);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.customer-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(232, 233, 234, 0.4);
}

.placeholder-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--silver-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  border: 3px solid rgba(232, 233, 234, 0.4);
}

.customer-info h4 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--space-1);
}

.customer-info p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: 1.4;
}

.result-badge {
  background: var(--maline-blue-gradient);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-left: auto;
  animation: marine-glow 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.testimonial-text {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--neutral-700);
  font-style: normal;
  position: relative;
}

.testimonial-image {
  margin: var(--space-6) 0;
  text-align: center;
}

.testimonial-visual {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--timing-smooth) var(--easing-smooth);
}

.testimonial-visual:hover {
  transform: scale(1.02);
}

.testimonial-text::before {
  content: '';
  display: none;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-8);
}

.testimonials-grid .testimonial-card {
  background: var(--primary-white);
  border: 2px solid rgba(232, 233, 234, 0.4);
  border-radius: var(--radius-3xl);
  padding: var(--space-8);
  transition: all var(--timing-smooth) var(--easing-smooth);
}

.testimonials-grid .testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.testimonials-grid .customer-avatar {
  width: 60px;
  height: 60px;
}

.testimonials-grid .placeholder-avatar {
  width: 60px;
  height: 60px;
  font-size: var(--text-lg);
}

.testimonials-grid .testimonial-text {
  font-size: var(--text-base);
}

/* ========================================
   FAQ セクション
======================================== */
.faq-modern {
  padding: var(--space-32) 0;
  background: #FFFFFF;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 2px solid transparent;
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%) border-box;
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-4);
  overflow: hidden;
  transition: all var(--timing-smooth) var(--easing-smooth);
}

.faq-item:hover {
  box-shadow: 0 4px 20px rgba(79, 165, 230, 0.15);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6) var(--space-8);
  cursor: pointer;
  background: white;
  position: relative;
  overflow: hidden;
  transition: all var(--timing-smooth);
}

.faq-question::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  pointer-events: none;
  transition: all var(--timing-smooth);
}

.faq-question:hover {
  background: #f0f9ff;
}

.faq-item .faq-question:active {
  background: linear-gradient(135deg, 
    #87CEEB 0%, 
    #6BB6EA 25%, 
    #5DADE2 50%, 
    #6BB6EA 75%, 
    #87CEEB 100%
  ) !important;
}

.faq-item .faq-question:active::after {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0.15) 100%
  ) !important;
}

.faq-item .faq-question:active h3,
.faq-item .faq-question:active .faq-toggle {
  background: white !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.faq-question h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  background: linear-gradient(135deg, #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  position: relative;
  z-index: 1;
  transition: all var(--timing-smooth);
}

.faq-toggle {
  font-size: var(--text-2xl);
  background: linear-gradient(135deg, #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 300;
  position: relative;
  z-index: 1;
  transition: transform var(--timing-smooth), all var(--timing-smooth);
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-item.active .faq-question {
  background: linear-gradient(135deg, 
    #87CEEB 0%, 
    #6BB6EA 25%, 
    #5DADE2 50%, 
    #6BB6EA 75%, 
    #87CEEB 100%
  );
}

.faq-item.active .faq-question::after {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0.15) 100%
  );
}

.faq-item.active .faq-question h3 {
  background: white !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.faq-item.active .faq-toggle {
  background: white !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.faq-answer {
  padding: 0 var(--space-8) var(--space-6);
  background: white;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
  animation: slide-down var(--timing-smooth) var(--easing-smooth);
}

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

.faq-answer p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--neutral-600);
  margin: 0;
}

/* ========================================
   最終CTA セクション
======================================== */
.final-cta {
  padding: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  display: none;
}

/* 最終CTAコンテナ */
.final-cta-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.cta-content-ultimate {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  background: transparent;
  position: relative !important;
  z-index: 100 !important;
  text-align: center;
}

.cta-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  position: relative !important;
  z-index: 100 !important;
}

.cta-pre-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
  color: white !important;
  text-shadow: 3px 3px 12px rgba(0,0,0,0.8);
  position: relative !important;
  z-index: 100 !important;
}

.cta-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
  color: #4FA5E6 !important;
  text-shadow: 3px 3px 12px rgba(0,0,0,0.8);
  position: relative !important;
  z-index: 100 !important;
}





.cta-badge-large {
  display: inline-block;
  background: var(--maline-blue-gradient);
  color: white;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-8);
  animation: marine-glow 2s ease-in-out infinite;
  box-shadow: 0 8px 25px rgba(43, 124, 233, 0.4);
}

.cta-title-large {
  font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  margin-bottom: var(--space-8);
}

.cta-description-large {
  font-size: var(--text-xl);
  line-height: 1.7;
  color: var(--neutral-600);
  margin-bottom: var(--space-12);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions-ultimate {
  margin-bottom: var(--space-12);
}

.cta-mega-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 45px;
  font-size: 1.2em;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  background: linear-gradient(135deg, #87CEEB 0%, #5DADE2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(79, 165, 230, 0.4);
  transition: all 0.3s ease;
  position: relative !important;
  overflow: hidden;
  border: none;
  cursor: pointer;
  z-index: 100 !important;
}

.cta-mega-button svg,
.cta-mega-button span {
  position: relative;
  z-index: 2;
}

.cta-badges {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  position: relative !important;
  z-index: 100 !important;
}

.cta-badge {
  font-size: 0.75em;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  background: rgba(79, 165, 230, 0.2);
  border: 2px solid #4FA5E6;
  border-radius: 50px;
  padding: 6px 12px;
  white-space: nowrap;
  position: relative !important;
  z-index: 100 !important;
}

.cta-badge span {
  margin-right: 4px;
}

.badge-text-mobile {
  display: none;
}

.cta-mega-button:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(79, 165, 230, 0.5);
  background: var(--maline-blue-dark);
}

/* シルバーシマー効果 */
.btn-primary::after,
.premium-cta::after,
.cta-mega-button::after,
.cta-primary-large::after,
.result-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
  animation: silver-shimmer 3s ease-in-out infinite;
  animation-delay: 1s;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* ボタンテキストの前面表示 */
.btn-primary,
.premium-cta,
.cta-mega-button,
.result-badge {
  z-index: 2;
}

.btn-primary > *,
.premium-cta > *,
.cta-mega-button > *,
.result-badge > * {
  position: relative;
  z-index: 3;
}

/* 角張ったモダンフォントスタイル */
.angular-modern-font {
  font-family: 'Noto Sans JP', 'Inter', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-weight: 900;
  font-size: 1.15em;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
  transform: scaleX(1.02);
  color: #1a1a1a;
}

.cta-mega-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cta-mega-text {
  font-size: var(--text-2xl);
  font-weight: 800;
}

.cta-mega-subtext {
  font-size: var(--text-base);
  opacity: 0.8;
}

.cta-mega-arrow {
  font-size: var(--text-3xl);
}

.cta-features-final {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.final-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  color: var(--neutral-700);
  font-weight: 600;
}

.feature-icon {
  color: var(--maline-blue);
  font-size: var(--text-xl);
}

/* ========================================
   フッター
======================================== */
.footer-minimal {
  background: linear-gradient(135deg, 
    #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%
  );
  color: white;
  padding: var(--space-20) 0 var(--space-4);
  margin-bottom: 0;
}

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: var(--space-16);
  margin-bottom: var(--space-12);
}

.footer-logo-section {
  max-width: 400px;
}

.footer-logo {
  height: 50px;
  width: auto;
  margin-bottom: var(--space-6);
  filter: brightness(0) invert(1);
}

.footer-description {
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.footer-section h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: white;
  margin-bottom: var(--space-4);
}

.footer-section a {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
  transition: color var(--timing-smooth);
}

.footer-section a:hover {
  color: white;
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm);
  margin-bottom: 0;
}

/* ========================================
   レスポンシブデザイン
======================================== */
/* デスクトップ（大画面）での確実なレイアウト */
@media (min-width: 769px) {
  .nav-container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    width: 100%;
    padding: 0 var(--space-8);
  }
  
  .nav-logo {
    flex: 0 0 auto;
    margin-right: auto;
  }
  
  .nav-actions {
    display: flex !important;
    flex: 0 0 auto;
    gap: var(--space-4);
  }
  
  .nav-toggle {
    display: none !important;
  }
}

/* 大型デスクトップ画面での追加調整 */
@media (min-width: 1200px) {
  .nav-container {
    padding: 0 var(--space-12);
  }
}

@media (max-width: 1024px) {
  /* ヒーローセクションは既に中央寄せなので追加調整不要 */
  
  .comparison-table {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }
  
  .comparison-item {
    flex: 0 0 auto;
    width: 100%;
    max-width: 400px;
  }
  
  .comparison-item.competitor {
    transform: scale(1);
    opacity: 1;
  }
  
  .comparison-item.maline-special {
    transform: scale(1.05);
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
    min-height: auto;
  }
  
  .pricing-plans {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .premium-plan {
    transform: none;
  }
}

@media (max-width: 768px) {
  .nav-menu-desktop {
    display: none;
  }
  
  .nav-actions {
    display: flex !important;
  }
  
  .nav-actions .btn-secondary,
  .nav-actions .btn-primary {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }
  
  .nav-toggle {
    display: none;
  }
  
  .hero-revolutionary {
    padding-top: 120px;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cta-primary-large,
  .cta-secondary {
    width: 100%;
    justify-content: center;
  }
  
  .hero-stats-inline {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .channel-flow {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .flow-arrow {
    transform: rotate(90deg);
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .testimonial-header {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }
  
  .cta-features-final {
    flex-direction: column;
    align-items: center;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-3);
  }
  
  .nav-container {
    padding: 0 var(--space-4);
  }
  
  .hero-revolutionary,
  .features-ultimate,
  .pricing-revolutionary,
  .testimonials-power,
  .faq-modern,
  .final-cta {
    padding: var(--space-20) 0;
  }
  
  .feature-main-card,
  .hero-testimonial {
    padding: var(--space-8);
  }
  
  .plan-card {
    padding: var(--space-6);
  }
  
  .cta-mega-button {
    padding: 22px 40px;
    font-size: 1.25em;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    white-space: nowrap;
  }
  
  .cta-mega-button span {
    white-space: nowrap;
  }
  
  .cta-mega-button svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  
  .cta-mega-text {
    font-size: var(--text-xl);
  }
  
  /* 最終CTAセクションのモバイル最適化 */
  .final-cta-container {
    padding: 20px;
  }
  
  .cta-content-ultimate {
    text-align: center;
    width: 100%;
    max-width: 100%;
  }
  
  .cta-center {
    width: 100%;
    gap: 20px;
  }
  
  .final-cta .cta-pre-title {
    font-size: 1.8rem !important;
    font-weight: 900;
    line-height: 1.3;
    color: white;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    margin: 0;
  }
  
  .final-cta .cta-title {
    font-size: 1.8rem !important;
    font-weight: 900;
    line-height: 1.3;
    color: #4FA5E6;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    margin: 0;
  }
  
  .cta-badges {
    flex-direction: row;
    gap: 4px;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
  }
  
  .cta-badge {
    font-size: 0.65em;
    padding: 5px 8px;
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    min-width: 0;
    border-width: 1px;
  }
  
  .cta-badge span {
    margin-right: 1px;
  }
  
  .badge-text-full {
    display: none;
  }
  
  .badge-text-mobile {
    display: inline;
  }
  
  /* フッターのモバイル最適化 */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .footer-links {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }
  
  .footer-section h4 {
    font-size: 0.85rem;
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .footer-section a {
    font-size: 0.75rem;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .footer-logo {
    height: 40px;
  }
  
  .footer-description {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

/* ========================================
   ヒーローチャンネルカード
======================================== */
.hero-channel-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-12) auto;
  max-width: 900px;
  width: 100%;
}

/* 既存のchannel-cardスタイルをヒーロー用に継承・調整 */
.hero-channel-cards .channel-card {
  background: var(--primary-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(232, 233, 234, 0.2);
  transition: all var(--timing-smooth) var(--easing-smooth);
  animation: fade-in-up 0.8s var(--easing-smooth) both;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hero-channel-cards .channel-card:nth-child(1) { animation-delay: 0.2s; }
.hero-channel-cards .channel-card:nth-child(2) { animation-delay: 0.4s; }
.hero-channel-cards .channel-card:nth-child(3) { animation-delay: 0.6s; }

.hero-channel-cards .channel-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(79, 165, 230, 0.4);
}

.hero-channel-cards .channel-icon {
  font-size: var(--text-3xl);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--maline-silver);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(79, 165, 230, 0.2);
  transition: all var(--timing-smooth) var(--easing-smooth);
}

.hero-channel-cards .channel-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.2) 60%,
    transparent 70%
  );
  animation: shimmer-effect 3s ease-in-out infinite;
  pointer-events: none;
}

.hero-channel-cards .channel-card:hover .channel-icon {
  background: var(--silver-blue-fusion);
  box-shadow: 0 8px 25px rgba(79, 165, 230, 0.4);
  transform: scale(1.1);
}

/* サービス別のキラキラ効果 */
.hero-channel-cards .email-card .channel-icon {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 25%, #90CAF9 50%, #64B5F6 75%, #42A5F5 100%);
}

.hero-channel-cards .line-card .channel-icon {
  background: linear-gradient(135deg, #E8F5E8 0%, #C8E6C9 25%, #A5D6A7 50%, #81C784 75%, #66BB6A 100%);
}

.hero-channel-cards .sms-card .channel-icon {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 25%, #FFCC80 50%, #FFB74D 75%, #FFA726 100%);
}

.hero-channel-cards .email-card:hover .channel-icon {
  background: linear-gradient(135deg, #2196F3 0%, #64B5F6 50%, #E3F2FD 100%);
}

.hero-channel-cards .line-card:hover .channel-icon {
  background: linear-gradient(135deg, #4CAF50 0%, #81C784 50%, #E8F5E8 100%);
}

.hero-channel-cards .sms-card:hover .channel-icon {
  background: linear-gradient(135deg, #FF9800 0%, #FFB74D 50%, #FFF3E0 100%);
}

@keyframes shimmer-effect {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(0%) translateY(0%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.hero-channel-cards .channel-info h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--space-1);
}

.hero-channel-cards .channel-info p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  margin-bottom: var(--space-2);
}

.hero-channel-cards .channel-stats {
  font-size: var(--text-sm);
  color: var(--maline-blue);
  font-weight: 600;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .hero-channel-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: var(--space-8) 0;
  }
}

/* ========================================
   ティッカーアニメーション（右から左）
======================================== */
.ticker-wrapper {
  width: 100%;
  overflow: hidden;
  margin: 30px 0;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px 0;
  position: relative;
}

.ticker-content {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: ticker-scroll-right-to-left 60s linear infinite;
}

/* 右から左へ流れるアニメーション */
@keyframes ticker-scroll-right-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.ticker-item {
  flex-shrink: 0;
}

.ticker-item img {
  height: 400px;
  width: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.ticker-item img:hover {
  transform: scale(1.05);
}

.ticker-content.paused {
  animation-play-state: paused;
}

/* 速度制御 */
.ticker-content.speed-slow {
  animation-duration: 90s;
}

.ticker-content.speed-normal {
  animation-duration: 60s;
}

.ticker-content.speed-fast {
  animation-duration: 30s;
}

/* マウスホバーで一時停止 */
.ticker-wrapper:hover .ticker-content {
  animation-play-state: paused;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .ticker-item img {
    height: 250px;
  }
  
  .ticker-content.speed-slow {
    animation-duration: 60s;
  }
  
  .ticker-content.speed-normal {
    animation-duration: 40s;
  }
  
  .ticker-content.speed-fast {
    animation-duration: 20s;
  }
}

@media (max-width: 480px) {
  .hero-channel-cards {
    margin: var(--space-6) 0;
    gap: var(--space-3);
  }
  
  .hero-channel-cards .channel-card {
    padding: var(--space-4);
    flex-direction: column;
    text-align: center;
  }
}

/* ========================================
   企業ロゴセクション
======================================== */
.company-logos-section {
  padding: 0 0 var(--space-8) 0;
  background: white;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.company-logos-section .company-description {
  font-size: 1rem;
  color: #4b5563;
  margin: 0 0 2rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ========================================
   Gmail送信者ガイドライン対応セクション
======================================== */
.gmail-compliance-notice {
  padding: var(--space-10) 0 var(--space-16) 0;
  background: white;
}

.compliance-card {
  background: linear-gradient(135deg, 
    #ff6b6b 0%, #feca57 25%, #48cae4 50%, #48cae4 75%, #51cf66 100%);
  border-radius: var(--radius-2xl);
  padding: 4px;
  box-shadow: var(--shadow-xl);
  animation: fade-in-up 0.8s var(--easing-smooth) both;
}

.compliance-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  filter: blur(8px);
  opacity: 0.3;
  z-index: -1;
}

.compliance-header,
.compliance-content {
  background: white;
  margin: 0;
  position: relative;
}

.compliance-header {
  padding: var(--space-6) var(--space-8);
  border-radius: calc(var(--radius-2xl) - 4px) calc(var(--radius-2xl) - 4px) 0 0;
  border-bottom: 2px solid #f0f0f0;
}

.compliance-header h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-800);
  margin: 0;
  text-align: center;
  line-height: 1.3;
}

.compliance-content {
  padding: var(--space-6) var(--space-8);
  border-radius: 0 0 calc(var(--radius-2xl) - 4px) calc(var(--radius-2xl) - 4px);
}

.compliance-content p {
  font-size: var(--text-base);
  color: var(--neutral-700);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

.compliance-content p:first-child {
  margin-bottom: var(--space-2);
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .gmail-compliance-notice {
    display: none;
  }
}

/* ========================================
   メール配信課題解決セクション
======================================== */
.email-problems-solution {
  padding: var(--space-24) 0 var(--space-12) 0;
  background: #FFF;
  margin-bottom: 0;
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-16) 0;
}

.problem-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  padding: 1.25rem 0.875rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  height: auto;
}

.problem-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    #ff6b6b 0%, 
    #ff8e53 30%, 
    #ffa726 70%, 
    #ffcc02 100%);
  opacity: 1;
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 20px 48px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.9);
}

.problem-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
  background: rgba(218, 5, 0, 0.08);
  border-radius: 16px;
  color: #da0500;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(218, 5, 0, 0.1);
  flex-shrink: 0;
}

.problem-card:hover .problem-icon {
  background: rgba(218, 5, 0, 0.12);
  border-color: rgba(218, 5, 0, 0.2);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(218, 5, 0, 0.15);
}

.problem-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
  line-height: 1.4;
  flex-grow: 0;
  word-wrap: break-word;
  hyphens: auto;
}

.problem-card p {
  font-size: 0.8rem;
  color: #4a5568;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  hyphens: auto;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
  .problem-card {
    padding: 1rem 0.75rem;
    min-height: 180px;
  }
  .problem-card h3 {
    font-size: 0.95rem;
  }
  .problem-card p {
    font-size: 0.75rem;
  }
}

@media (max-width: 1024px) {
  .problems-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .problem-card {
    padding: 1rem 0.75rem;
    min-height: 160px;
  }
  .problem-card h3 {
    font-size: 0.9rem;
    line-height: 1.3;
  }
  .problem-card p {
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .problem-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 768px) {
  .email-problems-solution {
    padding: 40px 0 40px 0;
    background: #FFF !important;
    margin: 0;
  }
  
  .email-problems-solution::before,
  .email-problems-solution::after {
    background: #FFF !important;
  }
  
  .email-problems-solution .section-title {
    font-size: 1.3rem;
    line-height: 1.4;
    padding: 0 1rem;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  .problems-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .problem-card {
    padding: 1rem 0.875rem;
    min-height: 140px;
  }
  .problem-card h3 {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.375rem;
  }
  .problem-card p {
    font-size: 0.75rem;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .problem-card {
    padding: 0.875rem 0.75rem;
    min-height: 130px;
  }
  .problem-card h3 {
    font-size: 0.85rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
  }
  .problem-card p {
    font-size: 0.7rem;
    line-height: 1.3;
  }
  .problem-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.375rem;
  }
}

/* ========================================
   チャネルバッジ（枠線スタイル）
======================================== */
.channel-badges-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  border-width: 2.5px;
  border-style: solid;
  background: #FFFFFF;
  transition: all 0.3s ease;
  min-width: 180px;
}

.channel-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.email-badge-box {
  border-color: #4FA5E6;
}

.line-badge-box {
  border-color: #06C755;
}

.sms-badge-box {
  border-color: #FF69B4;
}

.channel-badge .badge-small-text {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.email-badge-box .badge-small-text {
  color: #4FA5E6;
}

.line-badge-box .badge-small-text {
  color: #06C755;
}

.sms-badge-box .badge-small-text {
  color: #FF69B4;
}

.platform-description-text {
  font-size: 1.2rem;
  color: #2c3e50;
  font-weight: 500;
  line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .channel-badges-container {
    gap: 12px;
  }
  
  .channel-badge {
    min-width: 150px;
    padding: 10px 20px;
  }
  
  .channel-badge .badge-small-text {
    font-size: 0.95rem;
  }
  
  .platform-description-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .channel-badges-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .channel-badge {
    width: 100%;
    max-width: 280px;
  }
}

/* ========================================
   プラットフォームCTAボタン（シルバーキラキラ効果）
======================================== */
.platform-cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

.platform-trial-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 45px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%);
  background-size: 200% 200%;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 
    0 4px 15px rgba(79, 165, 230, 0.4),
    0 8px 25px rgba(79, 165, 230, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: maline-blue-gradient-shift 3s ease infinite;
}

@keyframes maline-blue-gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* シルバーキラキラ効果 */
.platform-trial-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: silver-sparkle-sweep 2.5s ease-in-out infinite;
  filter: blur(1px);
  pointer-events: none;
  z-index: 1;
}

.platform-trial-button > * {
  position: relative;
  z-index: 2;
}

@keyframes silver-sparkle-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* ホバー効果 */
.platform-trial-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 6px 20px rgba(79, 165, 230, 0.5),
    0 12px 35px rgba(79, 165, 230, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.platform-trial-button:active {
  transform: translateY(-1px) scale(1);
}

.platform-trial-button svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .platform-trial-button {
    padding: 14px 30px;
    font-size: 1rem;
    white-space: nowrap;
  }
  
  .platform-cta-container {
    margin-top: 20px;
  }
  
  /* タイトル全般の調整 */
  h1, h2, h3 {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* コンテナの余白削減 */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 480px) {
  .platform-trial-button {
    padding: 12px 20px;
    font-size: 0.85rem;
    gap: 6px;
    white-space: nowrap;
  }
  
  .platform-trial-button svg {
    width: 14px;
    height: 14px;
  }
  
  /* コンテナの余白をさらに削減 */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* セクション間の余白削減 */
  /* section {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  } */
  
  /* ヘッダー調整 */
  .header {
    padding: 6px 0 !important;
  }
  
  .nav-container {
    padding: 0 12px !important;
  }
  
  .logo-img {
    height: 28px !important;
  }
  
  .btn-primary, .btn-secondary {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }
  
  /* 問題カードの最適化 */
  .problems-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    margin: 20px 0 !important;
  }
  
  .problem-card {
    padding: 18px 15px !important;
    min-height: 140px !important;
  }
  
  .problem-card h3 {
    font-size: 1rem !important;
  }
  
  .problem-card p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
}

/* ========================================
   モダンな解決セクション
======================================== */

@keyframes subtle-silver-shine {
  0%, 100% { 
    background-position: 0% 50%;
    filter: brightness(1) contrast(1.05);
  }
  33% { 
    background-position: 50% 0%;
    filter: brightness(1.08) contrast(1.1);
  }
  66% { 
    background-position: 100% 50%;
    filter: brightness(1.12) contrast(1.08);
  }
}
.solution-section {
  margin-top: var(--space-24);
  text-align: center;
  position: relative;
  background: #FFFFFF !important;
  animation: none !important;
  padding: var(--space-20) 0;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.solution-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 47%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 53%,
    transparent 60%,
    transparent 100%);
  animation: gentle-shine-sweep 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes gentle-shine-sweep {
  0% { 
    left: -150%; 
    opacity: 0;
  }
  20% { 
    opacity: 0.8;
  }
  40% { 
    left: 100%; 
    opacity: 0.8;
  }
  41% { 
    opacity: 0;
  }
  100% { 
    left: 100%; 
    opacity: 0;
  }
}

.solution-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-16) 0;
  opacity: 0.7;
  position: relative;
  z-index: 2;
}

.transition-line {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #4fa5e6 50%, transparent 100%);
}

.solution-arrow {
  margin: 0 var(--space-6);
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4fa5e6 0%, #3b82f6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 8px 25px rgba(79, 165, 230, 0.4);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(79, 165, 230, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(79, 165, 230, 0.6); }
}

/* Modern Transition Styles - Premium Design */
.solution-transition-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px 0 80px 0;
  position: relative;
  z-index: 2;
}

.transition-gradient-line {
  flex: 1;
  max-width: 300px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(203, 213, 225, 0.3) 30%,
    rgba(148, 163, 184, 0.5) 50%,
    rgba(203, 213, 225, 0.3) 70%,
    transparent 100%);
  position: relative;
}

.transition-icon-wrapper {
  position: relative;
  margin: 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, 
    rgba(59, 130, 246, 0.15) 0%, 
    rgba(147, 197, 253, 0.08) 40%,
    transparent 70%);
  border-radius: 50%;
  animation: glow-rotate 8s linear infinite;
  z-index: 0;
}

@keyframes glow-rotate {
  0% { 
    transform: rotate(0deg) scale(1);
    opacity: 0.4;
  }
  50% { 
    transform: rotate(180deg) scale(1.1);
    opacity: 0.6;
  }
  100% { 
    transform: rotate(360deg) scale(1);
    opacity: 0.4;
  }
}

.transition-icon {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, 
    #ffffff 0%, 
    #f8fafc 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  box-shadow: 
    0 20px 60px rgba(59, 130, 246, 0.25),
    0 0 0 1px rgba(226, 232, 240, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(148, 163, 184, 0.1);
  position: relative;
  z-index: 1;
  animation: icon-float 4s ease-in-out infinite;
  transition: all 0.3s ease;
}

.transition-icon:hover {
  transform: scale(1.05);
  box-shadow: 
    0 25px 80px rgba(59, 130, 246, 0.35),
    0 0 0 1px rgba(226, 232, 240, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(148, 163, 184, 0.1);
}

.transition-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1), 
    transparent 60%);
  z-index: -1;
  opacity: 0;
  animation: ring-pulse 4s ease-in-out infinite;
}

@keyframes ring-pulse {
  0%, 100% { 
    opacity: 0;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes icon-float {
  0%, 100% { 
    transform: translateY(0);
  }
  50% { 
    transform: translateY(-12px);
  }
}

.transition-icon svg {
  filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.2));
  animation: arrow-drift 2.5s ease-in-out infinite;
}

@keyframes arrow-drift {
  0%, 100% { 
    transform: translateY(0);
    opacity: 1;
  }
  50% { 
    transform: translateY(6px);
    opacity: 0.7;
  }
}

@media (max-width: 768px) {
  .solution-transition-modern {
    margin: 70px 0 50px 0;
  }
  
  .transition-gradient-line {
    max-width: 100px;
  }
  
  .transition-icon-wrapper {
    margin: 0 30px;
  }
  
  .transition-glow {
    width: 140px;
    height: 140px;
  }
  
  .transition-icon {
    width: 70px;
    height: 70px;
  }
  
  .transition-icon svg {
    width: 26px;
    height: 26px;
  }
  
  /* タブレット・モバイルでカードのマージンを削減 */
  .solution-image-placeholder {
    padding: 16px !important;
  }
  
  .dashboard-preview {
    padding: 14px !important;
    margin: 6px !important;
  }
  
  .preview-header {
    margin-bottom: 10px !important;
  }
  
  .platform-description {
    padding: 12px 8px !important;
  }
  
  /* グラフを含むplatform-descriptionの左右パディングをさらに削減 */
  .solution-image-placeholder:nth-of-type(3) .platform-description {
    padding: 12px 3px !important;
  }
  
  /* 料金比較セクション（2番目）のパディングを削減 */
  .solution-image-placeholder:nth-of-type(2) {
    padding: 8px !important;
  }
  
  .solution-image-placeholder:nth-of-type(2) .dashboard-preview {
    padding: 8px !important;
  }
}

.solution-hero {
  background: 
    radial-gradient(ellipse 800px 600px at 50% 20%, rgba(79, 165, 230, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(248, 250, 252, 1) 0%, 
      rgba(241, 245, 249, 1) 25%,
      rgba(248, 250, 252, 1) 50%,
      rgba(241, 245, 249, 1) 75%,
      rgba(248, 250, 252, 1) 100%);
  padding: var(--space-20) var(--space-8);
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  margin: var(--space-12) 0;
  border: 1px solid rgba(79, 165, 230, 0.1);
  box-shadow: 
    0 20px 60px rgba(79, 165, 230, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.solution-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle 400px at 80% 20%, rgba(79, 165, 230, 0.08) 0%, transparent 50%),
    radial-gradient(circle 300px at 20% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.solution-hero::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    radial-gradient(circle 2px at 25% 25%, rgba(79, 165, 230, 0.3) 0%, transparent 50%),
    radial-gradient(circle 1px at 75% 75%, rgba(79, 165, 230, 0.2) 0%, transparent 50%),
    radial-gradient(circle 1px at 50% 50%, rgba(79, 165, 230, 0.15) 0%, transparent 50%);
  background-size: 80px 80px, 120px 120px, 60px 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

.solution-badge-modern {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #4FA5E6 0%, #6BB6EA 50%, #3394E1 100%);
  color: white;
  padding: var(--space-4) var(--space-8);
  border-radius: 50px;
  position: relative;
  z-index: 10;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-8);
  box-shadow: 
    0 8px 32px rgba(79, 165, 230, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  gap: var(--space-3);
  letter-spacing: 0.025em;
}

.badge-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #4fa5e6, #3b82f6);
  border-radius: 50px;
  z-index: -1;
  opacity: 0.3;
  filter: blur(4px);
}

.solution-title-modern {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  margin: var(--space-8) 0;
  color: #1a202c;
  position: relative;
  z-index: 10;
}

.solution-maline-logo {
  display: inline-block;
  height: 1.3em;
  vertical-align: baseline;
  position: relative;
  top: 0.15em;
  margin-bottom: 0;
}

.solution-ga-text {
  display: inline;
  vertical-align: baseline;
  line-height: 1;
}

.solution-text-second {
  display: inline;
}

.title-gradient {
  background: linear-gradient(135deg, #4fa5e6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}

.title-emphasis {
  color: #4FA5E6;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(79, 165, 230, 0.3);
}

.solution-subtitle {
  font-size: 1.25rem;
  color: #4a5568;
  font-weight: 500;
  line-height: 1.6;
  margin-top: var(--space-6);
  letter-spacing: 0.025em;
  position: relative;
  z-index: 10;
}

/* プラットフォームデバイス画像 */
.platform-devices-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding: 0 var(--space-4);
  position: relative;
  z-index: 10;
}

.platform-devices-image .devices-showcase {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 30px rgba(79, 165, 230, 0.15));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.platform-devices-image .devices-showcase:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 15px 40px rgba(79, 165, 230, 0.25));
}

/* 解決セクションのレスポンシブ対応 */
@media (max-width: 1024px) {
  .solution-title-modern {
    font-size: 2.8rem;
  }
  .solution-subtitle {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .solution-hero {
    padding: var(--space-16) var(--space-6);
    border-radius: 24px;
  }
  .solution-title-modern {
    font-size: 2.1rem;
  }
  .solution-title-br {
    display: none;
  }
  .solution-maline-logo {
    height: 1.3em;
    vertical-align: baseline;
    top: 0.15em;
  }
  .solution-ga-text {
    font-size: 1em;
    vertical-align: baseline;
    line-height: 1;
  }
  .solution-text-second {
    white-space: nowrap;
    font-size: 0.95em;
  }
  .solution-subtitle {
    font-size: 1rem;
  }
  .transition-line {
    width: 80px;
  }
  .solution-arrow {
    width: 40px;
    height: 40px;
  }
  .platform-devices-image .devices-showcase {
    max-width: 450px;
  }
  .solution-visual .solution-card-main .solution-image-placeholder {
    padding: 0 !important;
    margin: var(--space-6) 0 var(--space-8) 0 !important;
  }
}

@media (max-width: 480px) {
  .solution-hero {
    padding: var(--space-12) var(--space-4);
  }
  .solution-title-modern {
    font-size: 1.65rem;
  }
  .solution-title-br {
    display: none;
  }
  .solution-maline-logo {
    height: 1.3em;
    vertical-align: baseline;
    top: 0.15em;
  }
  .solution-ga-text {
    font-size: 1em;
    vertical-align: baseline;
    line-height: 1;
  }
  .solution-text-second {
    white-space: nowrap;
    font-size: 0.95em;
  }
  .solution-badge-modern {
    font-size: 0.8rem;
    padding: var(--space-3) var(--space-6);
  }
  .solution-subtitle {
    font-size: 0.9rem;
  }
  .platform-devices-image {
    margin-top: 1.5rem;
    padding: 0 var(--space-2);
  }
  .platform-devices-image .devices-showcase {
    max-width: 100%;
  }
  .solution-visual .solution-card-main .solution-image-placeholder {
    padding: 0 !important;
    margin: var(--space-6) 0 var(--space-8) 0 !important;
  }
}

.solution-visual {
  max-width: 1200px;
  margin: 0 auto;
}

.solution-card-main {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border-radius: 20px;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.solution-card-main:hover {
  box-shadow: 
    0 16px 48px rgba(102, 126, 234, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* MALINE 5つの魅力カードのホバー効果を無効化 */
.solution-visual .solution-card-main:has(.maline-email-plan-header):hover {
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.1) !important,
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transform: none !important;
}

.solution-header:not(.maline-email-plan-header) {
  background: #4FA5E6 !important;
  color: white !important;
  padding: var(--space-6) var(--space-8);
  text-align: center;
}

/* MALINEの魅力ヘッダー以外のsolution-headerにのみ適用 */
.solution-header:not(.maline-charm-header):not(.maline-email-plan-header) {
  background: #4FA5E6 !important;
  color: white !important;
}

/* 既存のsolution-headerスタイルをMALINEの魅力ヘッダーで完全にオーバーライド */
.solution-visual .solution-card-main .solution-header.maline-charm-header {
  background: #FFFFFF !important;
  color: var(--neutral-800) !important;
  border: none !important;
  border-radius: 22px 22px 0 0 !important;
}

/* solution-logoスタイルの完全なオーバーライド */
.solution-visual .solution-card-main .solution-header.maline-charm-header .solution-logo.maline-charm-logo {
  background: transparent !important;
  color: var(--neutral-800) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 800 !important;
}

/* solution-card-main内のすべての要素の境界線を統一 */
.solution-visual .solution-card-main {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.08) !important,
    0 4px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.solution-visual .solution-card-main:not(:has(.maline-email-plan-header)):hover {
  box-shadow: 
    0 16px 48px rgba(102, 126, 234, 0.15) !important,
    0 8px 16px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-4px) !important;
}

/* solution-contentの境界線設定 */
.solution-visual .solution-card-main .solution-content {
  display: none;
}

/* solution-image-placeholderの境界線設定 */
.solution-visual .solution-card-main .solution-image-placeholder {
  border: none !important;
  margin: 0;
  padding: var(--space-12);
  background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%) !important;
}

.solution-logo {
  font-size: var(--text-2xl);
  font-weight: 800;
}

.solution-content {
  padding: var(--space-8);
  text-align: left;
}

.solution-content p {
  font-size: var(--text-lg);
  color: var(--neutral-700);
  line-height: 1.7;
  margin: 0;
}

.solution-image-placeholder {
  padding: var(--space-6);
  background: var(--pearl-white);
}

.dashboard-preview {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-md);
}

.preview-header {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--maline-blue);
  text-align: left;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--pearl-white);
}

.preview-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.channel-item {
  background: var(--pearl-white);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-700);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.channel-item svg {
  color: var(--maline-blue);
  flex-shrink: 0;
}

.unified-analytics {
  background: var(--maline-blue);
  color: white;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.unified-analytics svg {
  color: white;
  flex-shrink: 0;
}

/* === 課題カード詳細セクション === */
.problem-cards-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-4);
}

/* === 革新的価値セクション専用課題カード（problem-cardのコピー） === */
.innovation-issues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-4) 0 0 0;
}

.innovation-issue-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  backdrop-filter: blur(10px);
  padding: 2rem 1.5rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 180px;
  height: 180px;
  padding: 1.5rem;
}

.innovation-issue-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  opacity: 0;
  transition: all 0.3s ease;
}

.innovation-issue-card:hover::before {
  opacity: 1;
  height: 6px;
}

.innovation-issue-card:hover {
  transform: translateY(-8px) scale(1.03) rotate(1deg);
  box-shadow: 
    0 12px 32px rgba(102, 126, 234, 0.2),
    0 6px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
}

.innovation-issue-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: rgba(218, 5, 0, 0.08);
  border-radius: 20px;
  color: #da0500;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(218, 5, 0, 0.1);
  flex-shrink: 0;
}

.innovation-issue-icon svg {
  width: 48px;
  height: 48px;
}

/* 各サービスカード専用のホバーエフェクト */
.innovation-issue-card.email-card:hover .innovation-issue-icon {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.innovation-issue-card.line-card:hover .innovation-issue-icon {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.innovation-issue-card.sms-card:hover .innovation-issue-icon {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.innovation-issue-card h3 {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: white !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  flex-grow: 0 !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  background: transparent !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  opacity: 0.85 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 10 !important;
  position: relative !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* レスポンシブ対応: モバイルでのカード調整 */
@media (max-width: 768px) {
  .innovation-issues-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
  }
  
  .innovation-issue-card {
    padding: 1.2rem 1rem;
    min-height: 160px;
    height: 160px;
    animation: none; /* モバイルでは浮遊アニメーションを無効化 */
  }
  
  .innovation-issue-card h3 {
    font-size: 0.9rem !important;
    min-height: 35px !important;
  }
  
  .innovation-issue-card p {
    font-size: 2.4rem !important;
    min-height: 70px !important;
  }
  
  .innovation-issue-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
  }
  
  .innovation-issue-icon svg {
    width: 40px;
    height: 40px;
  }
  
  .innovation-issue-card h3 {
    font-size: 1.1rem !important;
  }
  

}



/* 各サービスカードの背景色とアイコン設定（スタイリッシュ強化） */
.innovation-issue-card.email-card {
  background: linear-gradient(145deg, #4FA5E6 0%, #5BB3F0 50%, #3A8FD4 100%) !important;
  border: 2px solid rgba(79, 165, 230, 0.4) !important;
  box-shadow: 
    0 20px 60px rgba(79, 165, 230, 0.15),
    0 8px 25px rgba(79, 165, 230, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

.innovation-issue-card.email-card:hover {
  background: linear-gradient(145deg, #5BB3F0 0%, #6BC0F5 50%, #4FA5E6 100%) !important;
  border-color: rgba(79, 165, 230, 0.8) !important;
  box-shadow: 
    0 35px 80px rgba(79, 165, 230, 0.25),
    0 15px 35px rgba(79, 165, 230, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 40px rgba(79, 165, 230, 0.3) !important;
}

.innovation-issue-card.email-card .innovation-issue-icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15)) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.innovation-issue-card.email-card .innovation-issue-icon svg {
  stroke: white !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.platform-description .innovation-issue-card.email-card h3,
.innovation-issue-card.email-card h3 {
  color: white !important;
}

.innovation-issue-card.line-card {
  background: linear-gradient(145deg, #00B900 0%, #00D400 50%, #009900 100%) !important;
  border: 2px solid rgba(0, 185, 0, 0.4) !important;
  box-shadow: 
    0 20px 60px rgba(0, 185, 0, 0.15),
    0 8px 25px rgba(0, 185, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

.innovation-issue-card.line-card:hover {
  background: linear-gradient(145deg, #00D400 0%, #00F000 50%, #00B900 100%) !important;
  border-color: rgba(0, 185, 0, 0.8) !important;
  box-shadow: 
    0 35px 80px rgba(0, 185, 0, 0.25),
    0 15px 35px rgba(0, 185, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 40px rgba(0, 185, 0, 0.3) !important;
}

.innovation-issue-card.line-card .innovation-issue-icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15)) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.innovation-issue-card.line-card .innovation-issue-icon svg {
  stroke: white !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.platform-description .innovation-issue-card.line-card h3,
.innovation-issue-card.line-card h3 {
  color: white !important;
}

.innovation-issue-card.sms-card {
  background: linear-gradient(145deg, #ff567d 0%, #ff7096 50%, #e94d72 100%) !important;
  border: 2px solid rgba(255, 86, 125, 0.4) !important;
  box-shadow: 
    0 20px 60px rgba(255, 86, 125, 0.15),
    0 8px 25px rgba(255, 86, 125, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  color: white !important;
}

.innovation-issue-card.sms-card:hover {
  background: linear-gradient(145deg, #ff7096 0%, #ff89aa 50%, #ff567d 100%) !important;
  border-color: rgba(255, 86, 125, 0.8) !important;
  box-shadow: 
    0 35px 80px rgba(255, 86, 125, 0.25),
    0 15px 35px rgba(255, 86, 125, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 0 40px rgba(255, 86, 125, 0.3) !important;
}

.innovation-issue-card.sms-card .innovation-issue-icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15)) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.innovation-issue-card.sms-card .innovation-issue-icon svg {
  stroke: white !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.platform-description .innovation-issue-card.sms-card h3,
.innovation-issue-card.sms-card h3 {
  color: white !important;
}



/* シルバーキラーんアニメーション */
@keyframes silverShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 強制的にテキストカラーを設定 */
.platform-description .innovation-issues-grid .innovation-issue-card h3,
.innovation-issues-grid .innovation-issue-card h3,
.innovation-issue-card h3 {
  color: white !important;
  background: transparent !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  z-index: 10 !important;
  position: relative !important;
  margin: 0rem 0 2rem 0 !important;
  padding: 0.5rem 0 0 0 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.4 !important;
  text-align: center;
  order: 1;
  -webkit-text-fill-color: white !important;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
}

/* 価格表示用のpタグスタイル（「今すぐ始めよう！」と同じ白文字） */
.innovation-issue-card p {
  font-size: 3.5rem !important;
  font-weight: 900 !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
  text-align: center !important;
  margin: 1rem 0 auto 0 !important;
  padding: 0 !important;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.7) !important;
  order: 2;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: relative;
  overflow: visible !important;
  z-index: 10 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  flex-grow: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80px !important;
}

/* ultra-silver-sparkle適用時の特別調整 */
.innovation-issue-card p.ultra-silver-sparkle {
  position: relative;
  overflow: hidden;
  z-index: 2 !important;
}

/* 価格テキストは基本のultra-silver-sparkleエフェクトをそのまま使用 - 個別設定削除 */

/* ホバー時のエフェクト - 「今すぐ始めよう！」と同じシンプルなエフェクト */
.innovation-issue-card:hover p {
  transform: none;
  text-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.7) !important;
}



/* 強制的に背景なしを設定（他の要素） */
.innovation-issues-grid .innovation-issue-card p:not(:has(text)),
.platform-description .innovation-issues-grid .innovation-issue-card p:not(:has(text)) {
  border: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* カード用の浮遊アニメーション */
@keyframes cardFloating {
  0%, 100% { 
    transform: translateY(0px) rotateX(0deg);
  }
  50% { 
    transform: translateY(-8px) rotateX(2deg);
  }
}

/* カードにフローティングアニメーションを適用 */
.innovation-issue-card {
  animation: cardFloating 6s ease-in-out infinite;
}

/* カードごとにアニメーション遅延を設定 */
.innovation-issue-card:nth-child(1) {
  animation-delay: 0s;
}

.innovation-issue-card:nth-child(2) {
  animation-delay: 2s;
}

.innovation-issue-card:nth-child(3) {
  animation-delay: 4s;
}







/* カードホバー時のスペシャルエフェクト */
.innovation-issue-card:hover {
  animation-play-state: paused;
}

.innovation-issue-card:hover h3 {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}



.platform-description .innovation-issues-grid .innovation-issue-card.email-card h3,
.innovation-issue-card.email-card h3 {
  color: white !important;
  -webkit-text-fill-color: white !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}



.platform-description .innovation-issues-grid .innovation-issue-card.line-card h3,
.innovation-issue-card.line-card h3 {
  color: white !important;
  -webkit-text-fill-color: white !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.platform-description .innovation-issues-grid .innovation-issue-card.sms-card h3,
.innovation-issue-card.sms-card h3 {
  color: white !important;
  -webkit-text-fill-color: white !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* solution-visual内のキラキラ効果を無効化 */
.solution-visual * {
  animation: none !important;
}

.solution-visual .maline-silver {
  background: var(--neutral-800) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--neutral-800) !important;
}

/* solution-section内の全アニメーション効果を削除 */
.solution-section {
  animation: none !important;
  transition: none !important;
  background: #FFFFFF !important;
}

.solution-section::before {
  display: none !important;
}

.solution-section::after {
  display: none !important;
}

/* solution-header内のアニメーション効果を無効化 */
.solution-header,
.solution-header *,
.solution-logo,
.solution-logo * {
  animation: none !important;
  transition: none !important;
}

/* solution-header内の疑似要素による背景変化を無効化 */
.solution-header::before,
.solution-header::after,
.solution-logo::before,
.solution-logo::after {
  display: none !important;
}

/* solution-headerのホバー効果を無効化 */
.solution-header:not(.maline-email-plan-header):hover,
.solution-header:not(.maline-email-plan-header):focus,
.solution-header:not(.maline-email-plan-header):active {
  background: #4FA5E6 !important;
  color: white !important;
}

/* MALINE 5つの魅力ヘッダーのホバー効果を無効化 */
.maline-email-plan-header:hover,
.maline-email-plan-header:focus,
.maline-email-plan-header:active {
  background: linear-gradient(135deg, 
    #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%
  ) !important;
  transform: none !important;
  box-shadow: 
    0 20px 60px rgba(79, 165, 230, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* グレー背景の動きを完全に無効化 */
.solution-image-placeholder,
.solution-image-placeholder * {
  animation: none !important;
  transition: none !important;
  background: #F8F9FA !important;
}

.dashboard-preview,
.dashboard-preview * {
  animation: none !important;
  transition: none !important;
  background: white !important;
}

.solution-image-placeholder::before,
.solution-image-placeholder::after,
.dashboard-preview::before,
.dashboard-preview::after {
  display: none !important;
}

/* 大きなヘッダー用スタイル - ミニマルデザイン */
.preview-header-large {
  display: flex !important;
  align-items: center !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  text-shadow: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  transition: none !important;
}

.preview-header-large:hover {
  transform: none !important;
}

.preview-header-large:hover .charm-number-style {
  transform: none !important;
}

/* タイトルテキストを青い色に */
.preview-header-title-blue {
  color: #5DADE2 !important;
  font-weight: 700 !important;
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-text-fill-color: #5DADE2 !important;
  background: none !important;
  text-shadow: none !important;
}

/* シルバーきらーんエフェクト */
.preview-header-title-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.3) 60%,
    transparent 100%
  );
  animation: title-shine 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes title-shine {
  0% {
    left: -100%;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* MALINEブルーテキスト */
.maline-blue-text {
  color: #5DADE2 !important;
  font-weight: 700;
}

/* LINE公式カラー（グリーン）テキスト */
.line-green-text {
  color: #06C755 !important;
  font-weight: 700;
}

/* ヘッダーのサブトルエフェクト */
.preview-header-large::before {
  display: none !important;
}

/* カードを確実に表示 */
.dashboard-preview .innovation-issue-card {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}



/* HTMLテンプレートギャラリー */
.html-template-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

.template-banner {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 4px 16px rgba(102, 126, 234, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
  position: relative;
}

.template-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.template-banner:hover::before {
  opacity: 1;
}

.template-banner:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 12px 32px rgba(102, 126, 234, 0.25),
    0 6px 12px rgba(0, 0, 0, 0.12);
}

.template-banner img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  position: relative;
  z-index: 0;
}

.template-banner:hover img {
  transform: scale(1.08);
}

/* 分析ダッシュボード画像 */
.analytics-dashboard {
  margin-top: 32px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(102, 126, 234, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  position: relative;
}



.analytics-dashboard img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

/* モダントライアルセクション - 本気のデザイン */
.modern-trial-section {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.modern-trial-section::before {
  display: none !important;
}

.trial-content-wrapper {
  margin-bottom: 20px;
}

/* 元の画像スタイル */
.trial-original-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

.trial-original-image:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.06);
}

.trial-main-text {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #334155 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.trial-main-text .highlight-text {
  font-weight: 800;
  color: #0f172a;
  background: linear-gradient(135deg, #5dade2 0%, #3498db 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  white-space: nowrap;
}

/* プレミアムCTAボタン - 白背景に青文字 */
.premium-trial-cta {
  display: block;
  position: relative;
  background: #ffffff;
  border-radius: 50px;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.premium-trial-cta::before {
  display: none;
}

.premium-trial-cta:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.08);
}

.cta-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0px 0px;
  position: relative;
  z-index: 1;
}

.cta-content::after {
  display: none;
}

.cta-label {
  display: none;
}

.cta-title {
  text-align: center;
  color: #3498db;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.cta-arrow {
  color: #3498db;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.premium-trial-cta:hover .cta-arrow {
  transform: translateX(4px);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .trial-main-text {
    font-size: 14px !important;
  }
  
  .cta-content {
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    text-align: center;
  }
  
  .cta-title {
    margin: 0;
    font-size: 16px;
  }
  
  .cta-arrow {
    display: none;
  }
  
  .cta-label {
    font-size: 11px;
    padding: 5px 14px;
  }
}

@media (max-width: 1200px) {
  .innovation-issue-card {
    padding: 1rem 1.25rem;
    min-height: 180px;
  }
  .innovation-issue-card h3 {
    font-size: 0.95rem;
  }
  .innovation-issue-card p {
    font-size: 0.75rem;
  }
  
  .template-banner img {
    height: 100px;
  }
}

.problem-card-detailed {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  border: 1px solid var(--neutral-200);
  text-align: left;
  transition: all 0.3s ease;
  border-top: 4px solid transparent;
  background-clip: padding-box;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.problem-card-detailed:nth-child(1) {
  border-top-color: #EF4444;
}

.problem-card-detailed:nth-child(2) {
  border-top-color: #F59E0B;
}

.problem-card-detailed:nth-child(3) {
  border-top-color: #8B5CF6;
}

.channel-card:nth-child(1) {
  border-top-color: #EF4444;
}

.channel-card:nth-child(2) {
  border-top-color: #10B981;
}

.channel-card:nth-child(3) {
  border-top-color: #8B5CF6;
}

.problem-card-detailed:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--neutral-300);
}

.channel-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.problem-icon-large {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--pearl-white) 0%, var(--silver-white) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.problem-card-detailed:nth-child(1) .problem-icon-large {
  color: #EF4444;
}

.problem-card-detailed:nth-child(2) .problem-icon-large {
  color: #F59E0B;
}

.problem-card-detailed:nth-child(3) .problem-icon-large {
  color: #8B5CF6;
}

.channel-card:nth-child(1) .problem-icon-large {
  color: #EF4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.15) 100%);
  border: 2px solid rgba(239, 68, 68, 0.2);
}

.channel-card:nth-child(2) .problem-icon-large {
  color: #10B981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.15) 100%);
  border: 2px solid rgba(16, 185, 129, 0.2);
}

.channel-card:nth-child(3) .problem-icon-large {
  color: #8B5CF6;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%);
  border: 2px solid rgba(139, 92, 246, 0.2);
}

.problem-card-detailed:hover .problem-icon-large {
  transform: scale(1.1);
}

.channel-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0;
  line-height: 1.4;
}

.problem-card-detailed h4 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--neutral-900);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.4;
}

.problem-card-detailed p {
  font-size: var(--text-base);
  color: var(--neutral-600);
  line-height: 1.7;
  margin: 0;
  letter-spacing: 0.02em;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .problems-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  
  .solution-title {
    font-size: var(--text-2xl);
  }
  
  .preview-content {
    grid-template-columns: 1fr;
  }
  
  .channel-item {
    font-size: var(--text-xs);
  }
  
  .problem-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: 0 var(--space-4);
  }
  
  .problem-card-detailed {
    padding: var(--space-6);
  }
  
  .channel-header {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }
  
  .channel-title {
    font-size: var(--text-base);
  }
  
  .problem-card-detailed h4 {
    font-size: var(--text-base);
  }
  
  .problem-card-detailed p {
    font-size: var(--text-sm);
  }
  
  .problem-icon-large {
    width: 40px;
    height: 40px;
  }
  
  .preview-content {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .innovation-issues-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .innovation-issue-card {
    padding: 1rem 1.25rem;
    min-height: 140px;
  }
  .innovation-issue-card h3 {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.375rem;
  }
  .innovation-issue-card p {
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .innovation-issue-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }
  
  .solution-image-placeholder {
    padding: var(--space-8);
  }
}

/* タブレット対応 */
@media (max-width: 1024px) and (min-width: 769px) {
  .solution-visual {
    max-width: 900px;
  }
  
  .problem-cards-grid {
    max-width: 900px;
    gap: var(--space-8);
    padding: 0 var(--space-6);
  }
  
  .problem-card-detailed {
    padding: var(--space-8);
  }
  
  .innovation-issues-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .innovation-issue-card {
    padding: 1rem 1.25rem;
    min-height: 160px;
  }
  .innovation-issue-card h3 {
    font-size: 0.9rem;
    line-height: 1.3;
  }
  .innovation-issue-card p {
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .innovation-issue-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }
  
  .solution-image-placeholder {
    padding: var(--space-4);
  }
}

/* ========================================
   ヒーロー画像スタイル
======================================== */
.hero-image-container {
  width: 100%;
  margin: var(--space-8) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--primary-white);
  border: 2px solid rgba(232, 233, 234, 0.3);
  transition: all var(--timing-smooth) var(--easing-smooth);
}

.hero-image-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-color: rgba(79, 165, 230, 0.3);
}

.hero-dashboard-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: all var(--timing-smooth) var(--easing-smooth);
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .hero-image-container {
    margin: var(--space-6) 0;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .hero-image-container {
    margin: var(--space-4) 0;
    border-radius: var(--radius-md);
  }
}

/* ========================================
   Offersライクなビジュアルエリア
======================================== */
/* 右側: ラップトップビジュアル */
.hero-laptop {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.laptop-container {
  perspective: 1000px;
  position: relative;
  width: 100%;
  max-width: 500px;
}

.laptop-screen {
  background: #1f2937;
  border-radius: 8px 8px 0 0;
  padding: 6px;
  transform: rotateX(-8deg) rotateY(-25deg) rotateZ(-2deg);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 50px 100px rgba(0, 0, 0, 0.3),
    10px 0 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  border: 2px solid #374151;
}

.laptop-screen:hover {
  transform: rotateX(-5deg) rotateY(-20deg) rotateZ(-1deg);
}

.offers-dashboard {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/10;
  font-size: 7px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ブラウザ上部 */
.browser-top {
  background: #f6f6f6;
  padding: 4px 8px;
  border-bottom: 1px solid #e0e0e0;
}

.browser-dots {
  display: flex;
  gap: 3px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27ca3f; }

/* メインダッシュボード画面 */
.dashboard-screen {
  background: white;
  height: 100%;
}

/* トップナビゲーション */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: white;
  border-bottom: 1px solid #e0e0e0;
}

.nav-brand {
  font-weight: 700;
  font-size: 9px;
  color: #2563eb;
}

.nav-menu {
  display: flex;
  gap: 12px;
}

.nav-item {
  font-size: 7px;
  color: #666;
  cursor: pointer;
  padding: 2px 0;
}

.nav-item.active {
  color: #2563eb;
  font-weight: 600;
  border-bottom: 1px solid #2563eb;
}

.nav-profile {
  display: flex;
  align-items: center;
}

.profile-circle {
  width: 16px;
  height: 16px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  color: #666;
  font-weight: 600;
}

/* メインダッシュボード */
.main-dashboard {
  display: flex;
  height: 140px;
}

/* 左サイドバー */
.left-sidebar {
  width: 70px;
  background: #fafafa;
  padding: 6px 4px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-item {
  font-size: 6px;
  padding: 4px 3px;
  border-radius: 3px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.sidebar-item.active {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: 600;
}

/* メインエリア */
.main-area {
  flex: 1;
  padding: 8px;
  background: white;
  overflow: hidden;
}

/* ダッシュボードカード */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.dashboard-card {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px;
  text-align: center;
}

.card-title {
  font-size: 6px;
  color: #999;
  margin-bottom: 3px;
}

.card-number {
  font-size: 11px;
  font-weight: 700;
  color: #333;
  margin-bottom: 2px;
}

.card-change {
  font-size: 5px;
  color: #4caf50;
  font-weight: 600;
}

/* チャートエリア */
.chart-area {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 6px;
  height: 50px;
}

.chart-title {
  font-size: 7px;
  color: #666;
  font-weight: 600;
  margin-bottom: 4px;
}

.chart-visual {
  height: 30px;
  position: relative;
  background: white;
  border-radius: 2px;
}

.chart-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #f0f0f0;
}

.chart-data {
  position: relative;
  height: 100%;
}

.data-point {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #2196f3;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}

.chart-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 最近のアクティビティ */
.recent-activity {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px;
}

.activity-title {
  font-size: 7px;
  color: #666;
  font-weight: 600;
  margin-bottom: 4px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.activity-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-dot.blue { background: #2196f3; }
.activity-dot.green { background: #4caf50; }
.activity-dot.orange { background: #ff9800; }

.activity-text {
  flex: 1;
  font-size: 6px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-time {
  font-size: 5px;
  color: #999;
  flex-shrink: 0;
}

@keyframes growUp {
  from { height: 0; }
  to { height: var(--height, 100%); }
}

/* キーボード部分 */
.laptop-keyboard {
  background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
  padding: 8px;
  border-radius: 0 0 8px 8px;
  transform: rotateX(-8deg) rotateY(-25deg) rotateZ(-2deg);
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: -2px;
  position: relative;
  z-index: 1;
}

.keyboard-area {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
}

.keyboard-row {
  display: flex;
  gap: 1px;
  justify-content: center;
}

.key {
  background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
  border: 1px solid #d1d5db;
  border-radius: 2px;
  font-size: 4px;
  font-weight: 500;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.key.small {
  width: 8px;
  height: 6px;
}

.key.space {
  width: 40px;
  height: 6px;
  margin: 0 auto;
}

.trackpad {
  width: 25px;
  height: 15px;
  background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
  border: 1px solid #d1d5db;
  border-radius: 3px;
  margin: 0 auto;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
}

.trackpad::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 1px;
  background: #9ca3af;
  border-radius: 1px;
}

.laptop-base {
  background: linear-gradient(to bottom, #9ca3af, #6b7280, #4b5563);
  height: 18px;
  border-radius: 0 0 25px 25px;
  transform: rotateX(-8deg) rotateY(-25deg) rotateZ(-2deg) translateZ(-8px);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 15px 40px rgba(0, 0, 0, 0.3),
    15px 5px 35px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: -1;
  margin-top: -2px;
}

.laptop-base::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 50px;
  height: 4px;
  background: linear-gradient(to right, #374151, #4b5563, #374151);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 下部統計情報エリア */
.hero-bottom-stats {
  background: white;
  padding: 2rem 0;
  position: relative;
  z-index: 2;
  text-align: center;
}

.stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.stat-highlight {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  border: 2px solid #93c5fd;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}

.stat-icon {
  font-size: 1.2rem;
}

.stat-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e40af;
}

.stat-note {
  font-size: 0.875rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  margin-left: 1rem;
}

.company-description {
  font-size: 1rem;
  color: #4b5563;
  margin: 0 0 2rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* 企業ロゴエリア */
.company-logos {
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
}

.logos-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  animation: scroll-logos 30s linear infinite;
}

.logos-row-1 {
  animation-direction: normal;
}

.logos-row-2 {
  animation-direction: reverse;
  animation-duration: 35s;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.company-logo-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: #f8fafc;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.company-logo-text:hover {
  color: #2563eb;
  border-color: #93c5fd;
  background: #f0f9ff;
  transform: translateY(-2px);
}

.company-logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: white;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  min-width: 200px;
  height: 150px;
}

.company-logo-img:hover {
  background: rgba(79, 165, 230, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(79, 165, 230, 0.2);
}

.company-logo-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(0.3);
  transition: filter 0.3s ease;
}

.company-logo-img:hover img {
  filter: grayscale(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .hero-revolutionary {
    min-height: 70vh;
  }
  
  .hero-container {
    gap: 2rem;
    padding: 0 1rem 2rem 1rem;
    min-height: calc(70vh - 100px);
  }
  
  .hero-main-title {
    text-align: center;
    font-size: 1.5rem;
    white-space: nowrap;
  }
}

/* 極小画面での調整 */
@media (max-width: 480px) {
  .hero-main-title {
    font-size: 1.3rem;
    white-space: normal;
  }
}
  
  .hero-description {
    text-align: center;
  }
  
  .hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 3rem 0 0 0;
  }
  
  .cta-primary,
  .cta-secondary {
    width: 100%;
    max-width: 300px;
  }

  .laptop-screen {
    transform: rotateX(-2deg) rotateY(-5deg);
    max-width: 300px;
  }
  
  .laptop-keyboard {
    transform: rotateX(-2deg) rotateY(-5deg);
  }
  
  .stats-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .stat-note {
    margin-left: 0;
    margin-top: 0.5rem;
  }
  
  .company-logos {
    padding: 1rem 0 0.5rem 0;
  }
  
  .logos-row {
    gap: 2rem;
    margin-bottom: 0.75rem;
  }
  
  .company-logo-text {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
  
  .company-logo-img {
    padding: 0.75rem 1.25rem;
    min-width: 150px;
    height: 110px;
  }
}

@media (max-width: 480px) {
  .hero-revolutionary {
    padding: 100px 0 0;
  }
  
  .hero-main-title {
    font-size: 1.25rem;
    line-height: 1.3;
    padding: 0 5px;
    word-break: keep-all;
  }
  
  .hero-description {
    font-size: 0.95rem;
    padding: 0 10px;
    line-height: 1.6;
  }
  
  .laptop-screen {
    transform: none;
    max-width: 260px;
  }
  
  .laptop-keyboard {
    transform: none;
  }
  
  /* 画像全般のサイズ調整 */
  img {
    max-width: 100%;
    height: auto;
  }
  
  .hero-laptop-img {
    max-width: 90% !important;
  }
  
  .trial-original-image {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .keyboard-area {
    gap: 0.5px;
  }
  
  /* モバイルでカードのマージンを大幅削減 */
  .solution-image-placeholder {
    padding: 12px !important;
  }
  
  .dashboard-preview {
    padding: 12px !important;
    margin: 6px !important;
  }
  
  .preview-header {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
  
  .platform-description {
    padding: 10px !important;
    margin: 0 !important;
  }
  
  .platform-description p {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
  }
  
  .trial-original-image {
    margin-top: 8px !important;
    border-radius: 8px !important;
  }
  
  /* バッジ画像のサイズ調整 */
  .hero-badge-img {
    max-width: 90px !important;
    height: auto !important;
  }
  
  /* セクション全体のパディングを削減 */
  .email-problems-solution {
    padding: var(--space-12) 0 var(--space-8) 0 !important;
  }
  
  .solution-visual .solution-card-main {
    margin-bottom: 20px !important;
  }
  
  .key.small {
    width: 6px;
    height: 4px;
    font-size: 3px;
  }
  
  .key.space {
    width: 30px;
    height: 4px;
  }
  
  .trackpad {
    width: 20px;
    height: 10px;
  }
  
  .section-header-center {
    max-width: 100%;
    padding: 0 var(--space-4);
  }
  
  .section-title {
    font-size: clamp(0.9rem, 4vw, 1.5rem);
    line-height: 1.4;
    word-break: break-word;
    padding: 0;
    text-align: center;
  }
  
  .hero-bottom-stats {
    padding: 1.5rem 0;
  }
}

/* 超小画面用の追加調整 */
@media (max-width: 380px) {
  .section-title {
    font-size: 0.85rem;
    padding: 0;
    word-break: break-word;
  }
  
  .section-header-center {
    padding: 0 var(--space-3);
  }
  
  .solution-image-placeholder {
    padding: 10px !important;
  }
  
  .dashboard-preview {
    padding: 10px !important;
  }
  
  .preview-header {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }
  
  .platform-description {
    padding: 8px !important;
  }
  
  .platform-description p {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }
  
  /* ヒーローセクションタイトルをさらに小さく */
  .hero-main-title {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
    padding: 0 3px !important;
  }
  
  .hero-left-side {
    padding: 0 5px !important;
  }
}

/* ========================================
   セクションナビゲーションドット
======================================== */
.section-nav-dots {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.section-nav-dots.visible {
  opacity: 1;
  visibility: visible;
}

.nav-dot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-xl);
  transition: all 0.3s ease;
  text-decoration: none;
  background: transparent;
  width: auto;
  min-width: 0;
}

/* アクティブ時のスタイル */
.nav-dot.active {
  background: linear-gradient(135deg, 
    #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%
  );
  transform: translateX(-8px);
  box-shadow: 0 4px 20px rgba(93, 173, 226, 0.4);
  backdrop-filter: blur(10px);
  padding: 6px 10px;
}

/* 点のスタイル */
.nav-dot .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(163, 163, 163, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.nav-dot.active .dot {
  background: linear-gradient(135deg, 
    #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%
  );
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(93, 173, 226, 0.4);
}

/* 文字のスタイル */
.nav-dot .dot-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(163, 163, 163, 0.7);
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s ease;
  width: auto;
  min-width: 0;
  flex-shrink: 1;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* アクティブ時のみ文字表示 */
.nav-dot.active .dot-label {
  opacity: 1;
  transform: translateX(0);
  color: var(--primary-white);
  background: transparent;
  padding: 0;
}

/* レスポンシブデザイン */
@media (max-width: 1024px) {
  .section-nav-dots {
    right: 8px;
    gap: var(--space-3);
  }
  
  .nav-dot.active {
    transform: translateX(-6px);
  }
  
  .nav-dot .dot {
    width: 9px;
    height: 9px;
  }
  
  .nav-dot .dot-label {
    font-size: var(--text-xs);
  }
}

@media (max-width: 768px) {
  .section-nav-dots {
    right: 6px;
    gap: var(--space-2);
  }
  
  .nav-dot {
    padding: var(--space-1);
  }
  
  .nav-dot .dot {
    width: 8px;
    height: 8px;
  }
  
  .nav-dot .dot-label {
    display: none; /* モバイルでは文字非表示 */
  }
  
  .nav-dot.active {
    transform: translateX(-4px);
    padding: var(--space-1);
  }
}

@media (max-width: 480px) {
  /* 横スクロール防止の強化 */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
  }
  
  body {
    overflow-y: auto !important;
  }
  
  * {
    max-width: 100% !important;
  }
  
  .container, .section, [class*="section"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .section-nav-dots {
    display: none !important;
  }
  
  /* ヘッダーの高さを低く */
  .header {
    padding: 3.5px 0 !important;
  }
  
  .nav-container {
    min-height: 30.8px !important;
  }
  
  .nav-logo .logo-img {
    height: 33.6px !important;
  }
  
  /* CTAセクションのモバイル最適化 */
  .silver-cta-subtitle {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
  
  .silver-cta-title {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }
  
  .silver-cta-button {
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    border-radius: 50px !important;
    writing-mode: horizontal-tb !important;
  }
  
  .silver-cta-button .cta-icon {
    width: 14px !important;
    height: 14px !important;
  }
  
  .silver-cta-benefits-wrapper {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: 100% !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  
  .benefit-pill {
    font-size: 0.5rem !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    min-width: auto !important;
    line-height: 1.3 !important;
  }
  
  /* cta-contentのパディング削除 */
  .cta-content {
    padding: 8px 12px !important;
    flex-direction: column !important;
  }
  
  /* CTAセクションの画像サイズ最適化 */
  .stylish-silver-cta .cta-content > div {
    width: 100% !important;
  }
  
  .stylish-silver-cta img {
    max-width: 95% !important;
    width: 95% !important;
  }
}

/* ========================================
   サービス配信カード用シルバーキラキラエフェクト
======================================== */

/* サービス配信カードコンテナにエフェクト用のスタイル追加 */
.services-shimmer-container {
  position: relative;
  overflow: hidden;
}

/* 各配信サービスカードにキラキラエフェクト用の疑似要素追加 */
.services-shimmer-effect {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 233, 234, 0.1) 20%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(232, 233, 234, 0.8) 40%,
    rgba(255, 255, 255, 1) 50%,
    rgba(232, 233, 234, 0.8) 60%,
    rgba(255, 255, 255, 0.3) 70%,
    rgba(232, 233, 234, 0.1) 80%,
    transparent 100%
  );
  animation: services-silver-shimmer 3.5s ease-in-out infinite;
  animation-delay: var(--shimmer-delay, 0s);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
  filter: blur(0.5px);
}

/* 各カードに個別の遅延時間を設定 */
.email-card .services-shimmer-effect {
  animation-delay: 0s;
}

.line-card .services-shimmer-effect {
  animation-delay: 1.2s;
}

.sms-card .services-shimmer-effect {
  animation-delay: 2.4s;
}

/* シルバーキラキラアニメーション */
@keyframes services-silver-shimmer {
  0% {
    left: -150%;
    opacity: 0;
    transform: skewX(-10deg);
  }
  15% {
    opacity: 0.8;
  }
  30% {
    left: -50%;
    opacity: 1;
    transform: skewX(0deg);
  }
  50% {
    left: 50%;
    opacity: 1;
    transform: skewX(0deg);
  }
  70% {
    left: 150%;
    opacity: 0.8;
    transform: skewX(10deg);
  }
  85% {
    opacity: 0;
  }
  100% {
    left: 250%;
    opacity: 0;
    transform: skewX(10deg);
  }
}

/* カード要素を前面に表示 */
.innovation-issue-card > * {
  position: relative;
  z-index: 2;
}

/* ホバー時のエフェクト強化 */
.innovation-issue-card:hover .services-shimmer-effect {
  animation-duration: 2s;
}

/* ========================================
   「01. オールインワンプラットフォーム」テキスト用シルバーキラキラエフェクト
======================================== */

/* プラットフォームヘッダーにシマー効果コンテナスタイル */
.platform-shimmer-container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, 
    #87CEEB 0%, 
    #6BB6EA 25%, 
    #5DADE2 50%, 
    #6BB6EA 75%, 
    #87CEEB 100%);
  padding: 14px 28px;
  display: inline-block;
  color: white;
  font-weight: 700;
  font-size: 1.1em;
  box-shadow: 0 6px 20px rgba(79, 165, 230, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

/* プラットフォームテキスト用シルバーキラキラエフェクト */
.platform-shimmer-effect {
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 10%,
    rgba(232, 233, 234, 0.2) 20%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(232, 233, 234, 0.6) 40%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(232, 233, 234, 0.6) 60%,
    rgba(255, 255, 255, 0.4) 70%,
    rgba(232, 233, 234, 0.2) 80%,
    rgba(255, 255, 255, 0.1) 90%,
    transparent 100%
  );
  animation: platform-silver-shimmer 2.5s ease-in-out infinite;
  animation-delay: 0.5s;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
  filter: blur(0.3px);
  transform: skewX(-15deg);
}

/* プラットフォーム用シルバーキラキラアニメーション */
@keyframes platform-silver-shimmer {
  0% {
    left: -120%;
    opacity: 0;
    transform: skewX(-15deg);
  }
  10% {
    opacity: 0.6;
  }
  20% {
    left: -60%;
    opacity: 0.8;
    transform: skewX(-10deg);
  }
  40% {
    left: 0%;
    opacity: 1;
    transform: skewX(0deg);
  }
  60% {
    left: 60%;
    opacity: 0.8;
    transform: skewX(10deg);
  }
  80% {
    left: 120%;
    opacity: 0.6;
    transform: skewX(15deg);
  }
  90% {
    opacity: 0;
  }
  100% {
    left: 200%;
    opacity: 0;
    transform: skewX(15deg);
  }
}

/* ホバー時のエフェクト */
.platform-shimmer-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 165, 230, 0.6);
}

.platform-shimmer-container:hover .platform-shimmer-effect {
  animation-duration: 1.5s;
  opacity: 1;
}

/* テキスト要素を前面に表示 */
.platform-shimmer-container .charm-number-style,
.platform-shimmer-container {
  position: relative;
  z-index: 2;
}

/* 番号スタイルの調整 */
.platform-shimmer-container .charm-number-style {
  margin-right: 8px;
  font-weight: 800;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========================================
   プラットフォーム説明テキストのスタイル
======================================== */

.platform-description {
  margin: 8px 0;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
}

.platform-description::before {
  display: none;
}

.platform-description:hover {
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

.platform-description::before {
  display: none;
}

.platform-description p {
  margin: 0 0 12px 0;
  color: #475569;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.01em;
}

.platform-description p strong {
  color: #0f172a;
  font-weight: 800;
}

.platform-description p:last-of-type {
  margin-bottom: 0;
}

/* プラットフォーム説明内の配信カードグリッド調整 */
.platform-description .innovation-issues-grid {
  margin-top: 20px;
  grid-gap: 16px;
}

.platform-description .innovation-issue-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(79, 165, 230, 0.15);
  backdrop-filter: blur(10px);
}

/* 各サービスカードのホバー時背景色 */
.platform-description .innovation-issue-card.email-card:hover {
  background: #4FA5E6 !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(79, 165, 230, 0.4);
}

.platform-description .innovation-issue-card.line-card:hover {
  background: #00B900 !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 185, 0, 0.4);
}

.platform-description .innovation-issue-card.sms-card:hover {
  background: #ff567d !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255, 86, 125, 0.4);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .platform-description {
    margin: 16px 0;
    padding: 16px 20px;
  }
  
  .platform-description p {
    font-size: 13px;
    line-height: 1.5;
  }
}
  opacity: 1;
  filter: blur(0px);
}

/* 各サービスカードの個別カラー強化 */
.innovation-issue-card.email-card:hover {
  border-color: rgba(79, 165, 230, 0.3);
  box-shadow: 
    0 20px 48px rgba(79, 165, 230, 0.15),
    0 8px 16px rgba(79, 165, 230, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.innovation-issue-card.line-card:hover {
  border-color: rgba(0, 185, 0, 0.3);
  box-shadow: 
    0 20px 48px rgba(0, 185, 0, 0.15),
    0 8px 16px rgba(0, 185, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.innovation-issue-card.sms-card:hover {
  border-color: rgba(255, 86, 125, 0.3);
  box-shadow: 
    0 20px 48px rgba(255, 86, 125, 0.15),
    0 8px 16px rgba(255, 86, 125, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}



/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .services-shimmer-effect {
    animation-duration: 4s;
  }
  
  @keyframes services-silver-shimmer {
    0% { left: -150%; opacity: 0; }
    20% { left: -50%; opacity: 0.8; }
    50% { left: 50%; opacity: 1; }
    80% { left: 150%; opacity: 0.8; }
    100% { left: 250%; opacity: 0; }
  }
}

@media (max-width: 768px) {
  .services-shimmer-effect {
    animation-duration: 4.5s;
    opacity: 0.6;
  }
  
  .innovation-issue-card::after {
    width: 3px;
    height: 3px;
  }
}

/* ========================================
   🔥 NEW: 超強力シルバーキラーンエフェクト v2.0
======================================== */

/* 新しいシルバーパーティクル効果 */
@keyframes silver-kirakira-ultra {
  0% {
    left: -150%;
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

/* 超強力シルバーキラキラクラス */
.ultra-silver-sparkle {
  position: relative;
  overflow: hidden;
}

.ultra-silver-sparkle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
  animation: silver-kirakira-ultra 3s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  transform: skewX(-20deg);
}





/* メインヘッダーに超強力エフェクト適用 */
.header.ultra-silver-sparkle {
  backdrop-filter: blur(20px) saturate(150%);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(232, 233, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* プライマリボタンに超強力エフェクト */
.btn-primary.ultra-silver-sparkle,
.cta-primary.ultra-silver-sparkle,
.cta-mega-button.ultra-silver-sparkle {
  background: linear-gradient(135deg, #4FA5E6 0%, #6BB6EA 50%, #3394E1 100%);
  box-shadow: 
    0 8px 25px rgba(79, 165, 230, 0.5),
    0 4px 12px rgba(79, 165, 230, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary.ultra-silver-sparkle:hover,
.cta-primary.ultra-silver-sparkle:hover,
.cta-mega-button.ultra-silver-sparkle:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 15px 40px rgba(79, 165, 230, 0.6),
    0 8px 20px rgba(79, 165, 230, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #3394E1 0%, #4FA5E6 50%, #2B7CE9 100%);
}

/* ロゴにキラキラエフェクト */
.logo-img.ultra-silver-sparkle {
  filter: drop-shadow(0 4px 8px rgba(79, 165, 230, 0.2));
  transition: all 0.3s ease;
}

.logo-img.ultra-silver-sparkle:hover {
  filter: drop-shadow(0 6px 12px rgba(79, 165, 230, 0.4));
  transform: scale(1.05);
}

/* セクションバッジに超強力エフェクト */
.section-badge.ultra-silver-sparkle {
  background: linear-gradient(135deg, #87CEEB 0%, #5DADE2 100%);
  padding: 10px 30px;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(93, 173, 226, 0.3);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 特大タイトル用キラキラ */
.ultra-silver-title {
  background: linear-gradient(135deg, 
    var(--neutral-900) 0%, 
    #da0500 20%, 
    var(--neutral-900) 40%, 
    #da0500 60%, 
    var(--neutral-900) 80%, 
    #da0500 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ultra-gradient-shift 4s ease-in-out infinite;
  position: relative;
}

@keyframes ultra-gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 100%;
  }
}

/* MALINEブルー専用タイトルスタイル */
.maline-blue-title {
  background: linear-gradient(135deg, 
    var(--neutral-900) 0%, 
    var(--maline-blue) 20%, 
    var(--neutral-900) 40%, 
    var(--maline-blue-light) 60%, 
    var(--neutral-900) 80%, 
    var(--maline-blue) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ultra-gradient-shift 4s ease-in-out infinite;
  position: relative;
  word-break: break-word;
  display: inline-block;
  max-width: 100%;
}

/* モバイル用の追加調整 */
@media (max-width: 480px) {
  .maline-blue-title {
    font-size: 0.9em;
    line-height: 1.3;
  }
}

@media (max-width: 380px) {
  .maline-blue-title {
    font-size: 0.85em;
  }
}

/* MALINEブルー + 左から右キラキラ効果 */
.maline-blue-shimmer {
  color: var(--maline-blue);
  font-weight: 700;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.maline-blue-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: shimmer-left-to-right 2.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes shimmer-left-to-right {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* カード要素用超強力キラキラ */
.feature-card.ultra-silver-sparkle,
.testimonial-card.ultra-silver-sparkle,
.plan-card.ultra-silver-sparkle {
  border: 2px solid rgba(232, 233, 234, 0.3);
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.08),
    0 4px 15px rgba(232, 233, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(248, 250, 252, 1) 50%, 
    rgba(255, 255, 255, 1) 100%
  );
}

.feature-card.ultra-silver-sparkle:hover,
.testimonial-card.ultra-silver-sparkle:hover,
.plan-card.ultra-silver-sparkle:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(79, 165, 230, 0.4);
  box-shadow: 
    0 20px 50px rgba(79, 165, 230, 0.15),
    0 8px 25px rgba(232, 233, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ========================================
   MALINEの魅力ヘッダー専用スタイル
======================================== */

/* MALINEの魅力ヘッダーの背景を白に */
.solution-header.maline-charm-header {
  background: #FFFFFF !important;
  color: var(--neutral-800) !important;
  border: none !important;
  border-radius: 22px 22px 0 0 !important;
  padding: var(--space-6) var(--space-8) !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* MALINEロゴと魅力テキストのレイアウト */
.solution-logo.maline-charm-logo {
  font-size: var(--text-2xl) !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-3) !important;
  color: var(--neutral-800) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}

/* MALINEロゴ画像のスタイル */
.maline-logo-image {
  height: 2.5rem !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: none !important;
  transition: all var(--timing-smooth) var(--easing-smooth) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 「の魅力」テキストのスタイル */
.charm-text {
  font-size: var(--text-2xl) !important;
  font-weight: 800 !important;
  color: var(--neutral-800) !important;
  letter-spacing: 0.02em !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* 魅力番号のスタイリッシュなスタイル */
.charm-number {
  font-size: 1.2em !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--maline-blue), #87CEEB) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--maline-blue) !important;
  text-shadow: 0 2px 4px rgba(79, 165, 230, 0.3) !important;
  display: inline-block !important;
}

/* ========================================
   MALINEブルー × 光沢シルバー プレミアムCTAセクション
======================================== */

.stylish-silver-cta {
  background: linear-gradient(135deg, 
    #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%
  ) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #4FA5E6 !important;
  border-radius: 8px !important;
  box-shadow: 
    0 4px 12px rgba(135, 206, 235, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.stylish-silver-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 47%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.15) 53%,
    transparent 60%,
    transparent 100%
  );
  animation: maline-silver-shimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes maline-silver-shimmer {
  0% {
    left: -200%;
    opacity: 0;
    transform: skewX(-15deg);
  }
  12% {
    opacity: 0.7;
  }
  25% {
    left: -100%;
    opacity: 1;
    transform: skewX(-8deg);
  }
  50% {
    left: 0%;
    opacity: 1;
    transform: skewX(0deg);
  }
  75% {
    left: 100%;
    opacity: 1;
    transform: skewX(8deg);
  }
  88% {
    opacity: 0.7;
  }
  100% {
    left: 200%;
    opacity: 0;
    transform: skewX(15deg);
  }
}

.stylish-silver-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 800px 300px at 30% 20%, rgba(135, 206, 235, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 600px 400px at 70% 80%, rgba(107, 182, 234, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.silver-cta-title {
  color: #FFFFFF !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #FFFFFF !important;
  animation: none !important;
  position: relative;
  z-index: 2;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.silver-cta-subtitle {
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 600 !important;
  position: relative;
  z-index: 2;
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 0px 1px rgba(0, 0, 0, 0.6) !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.silver-cta-button {
  background: #FFFFFF !important;
  color: #4FA5E6 !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.25),
    0 6px 20px rgba(79, 165, 230, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 2;
  font-weight: 800 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none !important;
}

.silver-cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79, 165, 230, 0.1) 15%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(232, 233, 234, 0.7) 45%,
    rgba(255, 255, 255, 1) 50%,
    rgba(232, 233, 234, 0.7) 55%,
    rgba(255, 255, 255, 0.4) 70%,
    rgba(79, 165, 230, 0.1) 85%,
    transparent 100%
  );
  animation: maline-button-shine 3s ease-in-out infinite 1s;
  border-radius: inherit;
  z-index: 1;
}

@keyframes maline-button-shine {
  0% {
    left: -120%;
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  30% {
    left: -20%;
    opacity: 1;
  }
  50% {
    left: 20%;
    opacity: 1;
  }
  70% {
    left: 120%;
    opacity: 0.8;
  }
  85% {
    opacity: 0;
  }
  100% {
    left: 220%;
    opacity: 0;
  }
}

.silver-cta-button:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 12px 30px rgba(79, 165, 230, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 255, 255, 1) !important;
  background: linear-gradient(135deg, 
    #FFFFFF 0%, #FAFBFC 20%, #F1F2F3 40%, #FFFFFF 60%, 
    #F8F9FA 80%, #FFFFFF 100%
  ) !important;
  color: #3394E1 !important;
}

.silver-cta-button span {
  position: relative;
  z-index: 2;
}

.silver-cta-features {
  position: relative;
  z-index: 2;
}

.silver-feature-item {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #4FA5E6 !important;
  padding: 12px 20px !important;
  border-radius: 25px !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.2),
    0 3px 10px rgba(79, 165, 230, 0.3) !important;
  font-weight: 700 !important;
  backdrop-filter: blur(15px) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: none !important;
}

.silver-feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 70%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.silver-feature-item:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(248, 249, 250, 1) 50%, 
    rgba(255, 255, 255, 1) 100%
  ) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.2),
    0 5px 15px rgba(79, 165, 230, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  color: #3394E1 !important;
}

.silver-feature-item:hover::before {
  left: 100%;
}

/* 魅力01 ブルーグラデーションバッジ - CTAと同じ背景 */
.charm-number-style {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  background: linear-gradient(135deg, 
    #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%
  ) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  min-width: 48px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 
    0 4px 12px rgba(79, 165, 230, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1) !important;
  margin-right: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: default !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}

.charm-number-style:hover {
  box-shadow: 
    0 6px 16px rgba(79, 165, 230, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
}

/* バッジエフェクト無効化 */
.charm-number-style::before {
  display: none !important;
  ) !important;
  animation: shine-effect 3s ease-in-out infinite 1s !important;
}

/* ホバー効果 */
.solution-header.maline-charm-header:hover {
  background: #FFFFFF !important;
  color: var(--neutral-800) !important;
  border-color: #3394E1 !important;
  box-shadow: 
    0 8px 25px rgba(79, 165, 230, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.solution-header.maline-charm-header:hover .maline-logo-image {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(79, 165, 230, 0.3));
}

/* メインカードの基本設定（MALINEの魅力以外） */
.solution-card-main:not(.solution-visual .solution-card-main) {
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 2px solid var(--maline-blue);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .solution-logo.maline-charm-logo {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .maline-logo-image {
    height: 2rem;
  }
  
  .charm-text {
    font-size: var(--text-xl);
  }
  
  .solution-header.maline-charm-header {
    padding: var(--space-4) var(--space-6);
  }
}

@media (max-width: 480px) {
  .maline-logo-image {
    height: 1.75rem;
  }
  
  .charm-text {
    font-size: var(--text-lg);
  }
  
  .solution-header.maline-charm-header {
    padding: var(--space-3) var(--space-4);
  }
}

/* ========================================
   MALINE Eメールプランヘッダー
======================================== */

.maline-email-plan-header {
  background: linear-gradient(135deg, 
    #87CEEB 0%, #6BB6EA 25%, #5DADE2 50%, #6BB6EA 75%, #87CEEB 100%
  ) !important;
  border: none !important;
  box-shadow: 
    0 20px 60px rgba(79, 165, 230, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 35px 40px !important;
  border-radius: 20px 20px 0 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* シマーエフェクト */
.maline-email-plan-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.2) 47%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.2) 53%,
    transparent 60%,
    transparent 100%
  );
  animation: maline-silver-shimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes maline-silver-shimmer {
  0% {
    left: -200%;
    opacity: 0;
    transform: skewX(-15deg);
  }
  12% {
    opacity: 0.7;
  }
  25% {
    left: -100%;
    opacity: 1;
    transform: skewX(-8deg);
  }
  50% {
    left: 0%;
    opacity: 1;
    transform: skewX(0deg);
  }
  75% {
    left: 100%;
    opacity: 1;
    transform: skewX(8deg);
  }
  88% {
    opacity: 0.7;
  }
  100% {
    left: 200%;
    opacity: 0;
    transform: skewX(15deg);
  }
}

/* コンテンツを前面に */
.maline-plan-header-top,
.maline-plan-header-title,
.maline-charm-subtitle {
  position: relative;
  z-index: 2;
}

/* 上部：NEWバッジとサブタイトル */
.maline-plan-header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.maline-new-badge {
  background: linear-gradient(135deg, #da0500 0%, #bf0000 100%);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 
    0 2px 8px rgba(218, 5, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.maline-new-badge:hover {
  transform: scale(1.05);
  box-shadow: 
    0 4px 12px rgba(218, 5, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.maline-header-subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* タイトル部分：MALINEロゴ + Eメールプラン */
.maline-plan-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.maline-plan-header-title .maline-logo-image {
  height: 3rem !important;
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

.maline-plan-text {
  color: #FFFFFF;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 魅力サブタイトル - 削除してコンテンツエリアに移動 */
.maline-charm-subtitle {
  display: none;
}

.maline-charm-subtitle .charm-number {
  display: none;
}

/* コンテンツエリア内の魅力タイトル */
.charm-title-in-content {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--neutral-800);
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}

.charm-number-large {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--maline-blue), #87CEEB);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-right: 4px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .maline-email-plan-header {
    padding: 25px 30px !important;
  }
  
  .maline-plan-header-top {
    flex-direction: column;
    gap: 12px;
  }
  
  .maline-header-subtitle {
    font-size: 0.95rem;
    text-align: center;
  }
  
  .maline-plan-header-title .maline-logo-image {
    height: 2.5rem !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
  }
  
  .maline-plan-text {
    font-size: 2rem;
  }
  
  .maline-charm-subtitle {
    font-size: 1.3rem;
  }
  
  .maline-charm-subtitle .charm-number {
    font-size: 1.6rem !important;
  }
}

@media (max-width: 480px) {
  .maline-email-plan-header {
    padding: 20px 15px !important;
  }
  
  .maline-new-badge {
    font-size: 0.75rem;
    padding: 6px 16px;
  }
  
  .maline-header-subtitle {
    font-size: 0.85rem;
  }
  
  .maline-plan-header-title {
    flex-direction: column;
    gap: 12px;
  }
  
  .maline-plan-header-title .maline-logo-image {
    height: 2rem !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
  }
  
  .maline-plan-text {
    font-size: 1.6rem;
  }
  
  .maline-charm-subtitle {
    font-size: 1.1rem;
  }
  
  .maline-charm-subtitle .charm-number {
    font-size: 1.4rem !important;
  }
}