/**
 * CujiLaps Style Sheet
 * 深海テーマのスタイル、モーダル装飾
 */

/* ============================================
   基本設定
   ============================================ */
:root {
    --neon-cyan: #00ffff;
    --deep-navy: #001f3f;
    --treasure-gold: #ffdc00;
    --danger-red: #ff4136;
    --sky-blue: #87CEEB;
    --deep-black: #000000;
    --text-light: #ffffff;
    --text-muted: #cccccc;
}

/* ============================================
   コンテナ
   ============================================ */
.cujilaps-container {
    position: relative;
    width: 100%;
    min-height: 400px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ============================================
   フォームビュー
   ============================================ */
.cujilaps-form-view {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 40px 20px;
    /* 背景色とボックスシャドウを削除 */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.cujilaps-form-wrapper {
    width: 100%;
    max-width: 500px;
    background: rgba(0, 31, 63, 0.8);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);
}

.cujilaps-form-title {
    color: var(--neon-cyan);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cujilaps-form-description {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.cujilaps-form-group {
    margin-bottom: 24px;
}

.cujilaps-label {
    display: block;
    color: var(--neon-cyan);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cujilaps-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cujilaps-input:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.7);
}

.cujilaps-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.cujilaps-input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--neon-cyan);
}

.cujilaps-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--neon-cyan) 0%, #00cccc 100%);
    border: none;
    border-radius: 8px;
    color: var(--deep-black);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

.cujilaps-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.5);
}

.cujilaps-submit-btn:active {
    transform: translateY(0);
}

.cujilaps-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   潜水ビュー（全画面オーバーレイ）
   ============================================ */
.cujilaps-diving-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* WordPressのヘッダーナビゲーションより低く設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    /* 初期背景色（JavaScriptで動的に更新される） */
    /* body背景が黒でも問題ないように、確実に不透明な背景を設定 */
    background-color: #E1F5FE; /* 非常に明るい爽やかな青（ライトブルー）をデフォルトに */
    
    /* 背景のトランジション（滑らかな変化のため） */
    transition: background-color 3s ease-in-out, background 3s ease-in-out, background-image 3s ease-in-out;
    
    /* 確実に不透明にする（body背景が黒でも透けないように） */
    opacity: 1;
    
    /* グローバル背景が透けないようにする（新しいスタッキングコンテキストを作成） */
    isolation: isolate;
    
    /* body背景が透けないように、確実に背景を表示 */
    /* 背景はJavaScriptで動的に設定されるため、CSSでは最小限のみ */
}

/* 深海エフェクト：パーティクル */
.cujilaps-deep-sea-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.cujilaps-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    animation: float-up 15s linear infinite;
    transition: opacity 2s ease, background 2s ease, box-shadow 2s ease;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.5);
}

/* 深度に応じたパーティクルの変化 */
.cujilaps-diving-view[data-depth="shallow"] .cujilaps-particle {
    opacity: 0.5;
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-particle {
    opacity: 0.3;
    background: rgba(0, 255, 255, 0.25);
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}

.cujilaps-diving-view[data-depth="deepest"] .cujilaps-particle {
    opacity: 0.1;
    background: rgba(0, 255, 255, 0.15);
    box-shadow: 0 0 4px rgba(0, 255, 255, 0.2);
}

@keyframes float-up {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0;
    }
}

/* 深度に応じたパーティクルの速度変化（深くなるほど遅く） */
.cujilaps-diving-view[data-depth="deep"] .cujilaps-particle {
    animation-duration: 20s;
}

.cujilaps-diving-view[data-depth="deeper"] .cujilaps-particle {
    animation-duration: 25s;
}

.cujilaps-diving-view[data-depth="deepest"] .cujilaps-particle {
    animation-duration: 30s;
}

/* サメの影（前景：近く） - 大きく、速く、ぼかし少なめ */
.cujilaps-shark-shadow {
    position: absolute;
    width: 280px; /* 大きく（近くに見える） */
    height: 110px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50% 50% 0 0;
    filter: blur(12px); /* ぼかし少なめ（近くは鮮明） */
    animation: shark-swim 15s linear infinite; /* 速く（近くは速く見える） */
    z-index: 8; /* 高いz-index（前面） */
    opacity: 0.7; /* 透明度高め（近くは鮮明） */
}

@keyframes shark-swim {
    0% {
        left: -200px;
        top: 20%;
        transform: scaleX(1);
    }
    50% {
        top: 15%;
    }
    100% {
        left: 100%;
        top: 20%;
        transform: scaleX(1);
    }
}

/* 深海魚（背景：遠く） - 小さく、遅く、ぼかし強め */
.cujilaps-deep-fish {
    position: absolute;
    width: 40px; /* 小さく（遠くに見える） */
    height: 20px;
    background: radial-gradient(ellipse, rgba(0, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: fish-swim 25s linear infinite; /* 遅く（遠くは遅く見える） */
    z-index: 3; /* 低いz-index（後方） */
    opacity: 0.3; /* 透明度低め（遠くは見えにくい） */
    filter: blur(4px); /* ぼかし強め（遠くは不鮮明） */
}

.cujilaps-deep-fish::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(0, 255, 255, 0.6);
    border-radius: 50%;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

@keyframes fish-swim {
    0% {
        left: -60px;
        top: 30%;
    }
    25% {
        top: 25%;
    }
    50% {
        top: 35%;
    }
    75% {
        top: 28%;
    }
    100% {
        left: 100%;
        top: 30%;
    }
}

/* 珊瑚の美しい海（浅い深度で表示） */
.cujilaps-coral-reef {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    z-index: 1;
    opacity: 0;
    transition: opacity 2s ease;
}

.cujilaps-diving-view[data-depth="shallow"] .cujilaps-coral-reef {
    opacity: 1;
}

.cujilaps-coral {
    position: absolute;
    bottom: 0;
    width: 80px;
    height: 120px;
    background: linear-gradient(180deg, 
        rgba(255, 100, 150, 0.6) 0%,
        rgba(255, 150, 200, 0.4) 50%,
        rgba(100, 200, 255, 0.3) 100%);
    border-radius: 50% 50% 0 0;
    clip-path: polygon(0% 100%, 20% 60%, 40% 80%, 60% 50%, 80% 70%, 100% 40%, 100% 100%);
    animation: coral-sway 8s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 150, 200, 0.5));
}

.cujilaps-coral.coral-1 {
    left: 10%;
    height: 100px;
    animation-delay: 0s;
}

.cujilaps-coral.coral-2 {
    left: 25%;
    height: 140px;
    animation-delay: 1s;
}

.cujilaps-coral.coral-3 {
    left: 45%;
    height: 120px;
    animation-delay: 2s;
}

.cujilaps-coral.coral-4 {
    left: 65%;
    height: 110px;
    animation-delay: 1.5s;
}

.cujilaps-coral.coral-5 {
    left: 85%;
    height: 130px;
    animation-delay: 0.5s;
}

@keyframes coral-sway {
    0%, 100% {
        transform: translateX(0) rotate(-2deg);
    }
    50% {
        transform: translateX(10px) rotate(2deg);
    }
}

/* 魚たちが泳いでいるゾーン（中深度） */
.cujilaps-fish-zone {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    transition: opacity 2s ease;
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-fish-zone {
    opacity: 1;
}

/* 群れの魚（中景：中距離） - 中サイズ、中速度、中程度のぼかし */
.cujilaps-school-fish {
    position: absolute;
    width: 180px; /* 中サイズ */
    height: 90px;
    background: radial-gradient(ellipse, rgba(100, 200, 255, 0.35) 0%, transparent 70%);
    border-radius: 50%;
    animation: school-swim 18s linear infinite; /* 中速度 */
    filter: blur(2px); /* 中程度のぼかし */
    opacity: 0.6; /* 中程度の透明度 */
    z-index: 5; /* 中程度のz-index */
}

.cujilaps-school-fish.school-1 {
    top: 20%;
    left: -200px;
    animation-delay: 0s;
}

.cujilaps-school-fish.school-2 {
    top: 50%;
    left: -200px;
    animation-delay: 7s;
    width: 150px;
    height: 80px;
}

.cujilaps-school-fish.school-3 {
    top: 70%;
    left: -200px;
    animation-delay: 14s;
    width: 180px;
    height: 90px;
}

@keyframes school-swim {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateX(calc(100vw + 200px)) translateY(-50px);
        opacity: 0;
    }
}

/* 単体の魚（中景：中距離） */
.cujilaps-single-fish {
    position: absolute;
    width: 50px; /* 中サイズ */
    height: 25px;
    background: linear-gradient(90deg, 
        rgba(100, 200, 255, 0.7) 0%,
        rgba(150, 220, 255, 0.5) 50%,
        transparent 100%);
    border-radius: 50%;
    animation: single-fish-swim 18s linear infinite; /* 中速度 */
    filter: blur(1px); /* わずかなぼかし */
    opacity: 0.65; /* 中程度の透明度 */
    z-index: 5; /* 中程度のz-index */
}

.cujilaps-single-fish::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 200, 100, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 200, 100, 0.8);
}

.cujilaps-single-fish.fish-1 {
    top: 30%;
    left: -40px;
    animation-delay: 0s;
}

.cujilaps-single-fish.fish-2 {
    top: 60%;
    left: -40px;
    animation-delay: 5s;
}

.cujilaps-single-fish.fish-3 {
    top: 80%;
    left: -40px;
    animation-delay: 10s;
}

@keyframes single-fish-swim {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 40px)) translateY(-30px) rotate(5deg);
        opacity: 0;
    }
}

/* カニ（中深度） */
/* ============================================
   カニ（中深度）- シンボリックな表現
   ============================================ */
.cujilaps-crab {
    position: absolute;
    width: 120px;
    height: 80px;
    bottom: 15%;
    z-index: 2;
    opacity: 0;
    transition: opacity 2s ease;
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-crab {
    opacity: 0.6;
}

.cujilaps-crab::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 60%;
    bottom: 0;
    left: 0;
    background: radial-gradient(ellipse at center,
        rgba(255, 140, 100, 0.5) 0%,
        rgba(255, 100, 80, 0.4) 30%,
        rgba(255, 80, 60, 0.3) 60%,
        transparent 100%);
    border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
    filter: blur(10px);
    animation: crab-walk 8s ease-in-out infinite;
}

.cujilaps-crab::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 50%;
    bottom: 10%;
    left: 10%;
    background: radial-gradient(ellipse at 30% 50%,
        rgba(255, 200, 150, 0.3) 0%,
        rgba(255, 140, 100, 0.2) 40%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(6px);
    animation: crab-pulse 3s ease-in-out infinite;
}

.cujilaps-crab#cujilaps-crab-1 {
    left: 20%;
    animation-delay: 0s;
}

.cujilaps-crab#cujilaps-crab-2 {
    left: 70%;
    animation-delay: 4s;
}

@keyframes crab-walk {
    0%, 100% {
        transform: translateX(0) scaleX(1);
    }
    25% {
        transform: translateX(30px) scaleX(1);
    }
    50% {
        transform: translateX(60px) scaleX(-1);
    }
    75% {
        transform: translateX(30px) scaleX(-1);
    }
}

@keyframes crab-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* クジラの影（中景：中距離） - 大きいが中距離にいる */
.cujilaps-whale-shadow {
    position: absolute;
    width: 450px; /* 大きめだが遠近感のため調整 */
    height: 220px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(25px); /* 中程度のぼかし */
    animation: whale-shadow-move 35s linear infinite; /* 遅め（遠近感のため） */
    z-index: 4; /* 中程度のz-index */
    opacity: 0.5; /* 中程度の透明度 */
    transition: opacity 2s ease, background 2s ease;
}

.cujilaps-diving-view[data-depth="shallow"] .cujilaps-whale-shadow {
    opacity: 0.4;
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-whale-shadow {
    opacity: 0.3;
}

.cujilaps-diving-view[data-depth="deepest"] .cujilaps-whale-shadow {
    opacity: 0.2;
}

/* ============================================
   明るい海のキラキラフラクタル効果
   ============================================ */
.cujilaps-sparkle-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 2s ease;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
        radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(1px 1px at 70% 40%, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: sparkle-twinkle 3s ease-in-out infinite;
}

@keyframes sparkle-twinkle {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(-5%, -5%) scale(1.1);
    }
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-sparkle-effect,
.cujilaps-diving-view[data-depth="deepest"] .cujilaps-sparkle-effect {
    opacity: 0;
}

/* ============================================
   クラゲ（表層）- シンボリックな表現
   ============================================ */
.cujilaps-jellyfish {
    position: absolute;
    width: 120px;
    height: 150px;
    z-index: 3;
    opacity: 0.6;
    transition: opacity 2s ease;
}

.cujilaps-jellyfish::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at center, 
        rgba(255, 182, 193, 0.4) 0%,
        rgba(255, 105, 180, 0.3) 30%,
        rgba(255, 20, 147, 0.2) 60%,
        transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(8px);
    animation: jellyfish-float 8s ease-in-out infinite;
}

.cujilaps-jellyfish::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 80%;
    top: 20%;
    left: 20%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 182, 193, 0.2) 40%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(5px);
    animation: jellyfish-pulse 3s ease-in-out infinite;
}

.cujilaps-jellyfish.jellyfish-1 {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
}

.cujilaps-jellyfish.jellyfish-2 {
    left: 50%;
    top: 15%;
    animation-delay: 2s;
}

.cujilaps-jellyfish.jellyfish-3 {
    left: 80%;
    top: 25%;
    animation-delay: 4s;
}

@keyframes jellyfish-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
    }
    25% {
        transform: translateY(-20px) translateX(10px) scale(1.05);
    }
    50% {
        transform: translateY(-10px) translateX(-5px) scale(0.95);
    }
    75% {
        transform: translateY(-15px) translateX(5px) scale(1.02);
    }
}

@keyframes jellyfish-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-jellyfish,
.cujilaps-diving-view[data-depth="deepest"] .cujilaps-jellyfish {
    opacity: 0;
}

/* ============================================
   タコ（表層・中深度）- シンボリックな表現
   ============================================ */
.cujilaps-octopus {
    position: absolute;
    width: 140px;
    height: 140px;
    z-index: 3;
    opacity: 0.5;
    transition: opacity 2s ease;
}

.cujilaps-octopus::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 105, 180, 0.4) 0%,
        rgba(255, 20, 147, 0.3) 40%,
        rgba(199, 21, 133, 0.2) 70%,
        transparent 100%);
    border-radius: 50%;
    filter: blur(12px);
    animation: octopus-swim 12s ease-in-out infinite;
}

.cujilaps-octopus::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 105, 180, 0.15) 50%,
        transparent 100%);
    border-radius: 50%;
    filter: blur(6px);
    animation: octopus-pulse 4s ease-in-out infinite;
}

.cujilaps-octopus.octopus-1 {
    left: 30%;
    top: 40%;
    animation-delay: 0s;
}

.cujilaps-octopus.octopus-2 {
    left: 70%;
    top: 50%;
    animation-delay: 6s;
}

@keyframes octopus-swim {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateX(30px) translateY(-15px) rotate(5deg) scale(1.1);
    }
    50% {
        transform: translateX(0) translateY(-10px) rotate(0deg) scale(0.9);
    }
    75% {
        transform: translateX(-20px) translateY(-5px) rotate(-5deg) scale(1.05);
    }
}

@keyframes octopus-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.2);
    }
}

.cujilaps-diving-view[data-depth="deepest"] .cujilaps-octopus {
    opacity: 0;
}

/* ============================================
   巨大なサメの影（背景：遠く） - 大きく見えるが遠くにいる
   ============================================ */
.cujilaps-giant-shark-shadow {
    position: absolute;
    width: 700px; /* 大きいが遠近感のため調整 */
    height: 260px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, transparent 80%);
    border-radius: 50%;
    filter: blur(50px); /* ぼかし強め（遠くは不鮮明） */
    z-index: 3; /* 低いz-index（後方） */
    opacity: 0;
    transition: opacity 3s ease;
}

.cujilaps-giant-shark-shadow.giant-shark-1 {
    animation: giant-shark-swim 40s linear infinite; /* 遅く（遠くは遅く見える） */
    animation-delay: 0s;
}

.cujilaps-giant-shark-shadow.giant-shark-2 {
    animation: giant-shark-swim 45s linear infinite; /* さらに遅く */
    animation-delay: 12s;
}

@keyframes giant-shark-swim {
    0% {
        left: -800px;
        top: 30%;
        opacity: 0;
    }
    5% {
        opacity: 0.5;
    }
    50% {
        top: 25%;
        opacity: 0.7;
    }
    95% {
        opacity: 0.5;
    }
    100% {
        left: 100%;
        top: 30%;
        opacity: 0;
    }
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-giant-shark-shadow,
.cujilaps-diving-view[data-depth="deepest"] .cujilaps-giant-shark-shadow {
    opacity: 0.4; /* 遠くは見えにくく */
}

/* ============================================
   巨大なクジラの影（背景：遠く） - 非常に大きく見えるが遠くにいる
   ============================================ */
.cujilaps-giant-whale-shadow {
    position: absolute;
    width: 900px; /* 非常に大きいが遠近感のため調整 */
    height: 360px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0%, transparent 85%);
    border-radius: 50%;
    filter: blur(60px); /* ぼかし強め（遠くは不鮮明） */
    z-index: 2; /* 低いz-index（後方） */
    opacity: 0;
    transition: opacity 3s ease;
}

.cujilaps-giant-whale-shadow.giant-whale-1 {
    animation: giant-whale-swim 60s linear infinite; /* 非常に遅く（遠くは遅く見える） */
    animation-delay: 0s;
}

.cujilaps-giant-whale-shadow.giant-whale-2 {
    animation: giant-whale-swim 70s linear infinite; /* さらに遅く */
    animation-delay: 20s;
}

@keyframes giant-whale-swim {
    0% {
        left: -1000px;
        top: 20%;
        opacity: 0;
    }
    5% {
        opacity: 0.4;
    }
    50% {
        top: 15%;
        opacity: 0.6;
    }
    95% {
        opacity: 0.4;
    }
    100% {
        left: 100%;
        top: 20%;
        opacity: 0;
    }
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-giant-whale-shadow,
.cujilaps-diving-view[data-depth="deepest"] .cujilaps-giant-whale-shadow {
    opacity: 0.35; /* 遠くは見えにくく */
}

/* ============================================
   巨大なダイオウイカの影（背景：最も遠く） - 最も大きく最も遠く
   ============================================ */
.cujilaps-giant-squid-shadow {
    position: absolute;
    width: 1200px; /* 最も大きいが遠近感のため調整 */
    height: 480px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7) 0%, transparent 90%);
    border-radius: 50%;
    filter: blur(80px); /* 最も強いぼかし（最も遠くは不鮮明） */
    z-index: 1; /* 最も低いz-index（最も後方） */
    opacity: 0;
    left: -1200px;
    top: 30%;
    animation: giant-squid-appear 90s ease-in-out infinite; /* 非常に遅く */
}

@keyframes giant-squid-appear {
    0%, 85% {
        left: -1500px;
        opacity: 0;
    }
    87% {
        opacity: 0.3;
    }
    90% {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.8;
    }
    92% {
        opacity: 0.6;
    }
    95% {
        left: 100%;
        opacity: 0;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.cujilaps-diving-view[data-depth="deepest"] .cujilaps-giant-squid-shadow {
    animation-play-state: running;
}

.cujilaps-whale-shadow.whale-2 {
    width: 500px; /* 遠近感のため調整 */
    height: 250px;
    filter: blur(30px); /* 中程度のぼかし */
    animation: whale-shadow-move 40s linear infinite; /* 遅め */
    animation-delay: 15s;
    opacity: 0.45; /* 中程度の透明度 */
}

@keyframes whale-shadow-move {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.5;
    }
    100% {
        transform: translateX(calc(100vw + 500px)) translateY(-300px);
        opacity: 0;
    }
}

/* 前面を横切る魚（前景：最も近く） - 大きく、速く、ぼかしなし */
.cujilaps-front-fish {
    position: absolute;
    width: 100px; /* 大きく（最も近くに見える） */
    height: 50px;
    z-index: 10; /* 最も高いz-index（最も前面） */
    opacity: 0;
    transition: opacity 1s ease;
    filter: blur(0px); /* ぼかしなし（近くは鮮明） */
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-front-fish,
.cujilaps-diving-view[data-depth="deepest"] .cujilaps-front-fish {
    opacity: 1;
}

.cujilaps-front-fish::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255, 200, 100, 0.9) 0%,
        rgba(255, 150, 50, 0.7) 50%,
        transparent 100%);
    border-radius: 50%;
    clip-path: polygon(0% 50%, 20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%);
    filter: drop-shadow(0 0 15px rgba(255, 200, 100, 0.8));
}

.cujilaps-front-fish::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.cujilaps-front-fish.front-fish-1 {
    top: 25%;
    left: -100px;
    animation: front-fish-cross 10s linear infinite; /* 速く（近くは速く見える） */
    animation-delay: 0s;
    opacity: 0.9; /* 高い透明度（近くは鮮明） */
}

.cujilaps-front-fish.front-fish-2 {
    top: 55%;
    left: -100px;
    animation: front-fish-cross 12s linear infinite; /* 速く */
    animation-delay: 4s;
    opacity: 0.85; /* 高い透明度 */
}

.cujilaps-front-fish.front-fish-3 {
    top: 75%;
    left: -100px;
    animation: front-fish-cross 14s linear infinite; /* 速く */
    animation-delay: 8s;
    opacity: 0.8; /* 高い透明度 */
}

@keyframes front-fish-cross {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 80px)) translateY(-40px) rotate(10deg);
        opacity: 0;
    }
}

/* 岩山のシルエット */
.cujilaps-rock-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 85%, 50% 75%, 60% 90%, 70% 80%, 80% 95%, 90% 85%, 100% 100%);
    z-index: 1;
    opacity: 0.5;
}

/* 光のエフェクト（上から下へ、神秘的な演出） */
.cujilaps-light-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(135, 206, 235, 0.15) 0%,
        rgba(135, 206, 235, 0.1) 10%,
        rgba(135, 206, 235, 0.05) 20%,
        rgba(0, 255, 255, 0.03) 30%,
        transparent 50%,
        transparent 100%);
    animation: light-fade 8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    transition: opacity 2s ease, background 2s ease;
}

@keyframes light-fade {
    0%, 100% {
        opacity: 0.3;
        filter: blur(0px);
    }
    50% {
        opacity: 0.15;
        filter: blur(2px);
    }
}

/* 浅い深度での放射状の光の演出（キラキラ効果） */
.cujilaps-sunlight-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 2s ease;
    background: 
        /* 中央の大きな光（やや左寄り） */
        radial-gradient(circle at 45% 0%, 
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.3) 18%,
            rgba(135, 206, 235, 0.2) 35%,
            transparent 55%),
        /* 左側の小さめの光（上寄り） */
        radial-gradient(circle at 25% 8%, 
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.25) 12%,
            rgba(135, 206, 235, 0.15) 22%,
            transparent 30%),
        /* 右側のやや大きめの光（下寄り） */
        radial-gradient(circle at 75% 12%, 
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.22) 15%,
            rgba(135, 206, 235, 0.18) 28%,
            transparent 40%);
    animation: sunlight-shimmer 3s ease-in-out infinite;
}

@keyframes sunlight-shimmer {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

.cujilaps-diving-view[data-depth="mid"] .cujilaps-sunlight-rays,
.cujilaps-diving-view[data-depth="deep"] .cujilaps-sunlight-rays,
.cujilaps-diving-view[data-depth="deepest"] .cujilaps-sunlight-rays {
    opacity: 0;
}

/* 深度に応じた光の変化 */
.cujilaps-diving-view[data-depth="shallow"] .cujilaps-light-rays {
    opacity: 0.4;
    background: linear-gradient(180deg, 
        rgba(135, 206, 235, 0.2) 0%,
        rgba(135, 206, 235, 0.15) 10%,
        rgba(135, 206, 235, 0.1) 20%,
        rgba(0, 255, 255, 0.05) 30%,
        transparent 50%,
        transparent 100%);
}

.cujilaps-diving-view[data-depth="deep"] .cujilaps-light-rays {
    opacity: 0.2;
    background: linear-gradient(180deg, 
        rgba(135, 206, 235, 0.1) 0%,
        rgba(135, 206, 235, 0.05) 10%,
        rgba(0, 255, 255, 0.03) 20%,
        transparent 30%,
        transparent 100%);
}

.cujilaps-diving-view[data-depth="deepest"] .cujilaps-light-rays {
    opacity: 0.05;
    background: linear-gradient(180deg, 
        rgba(0, 255, 255, 0.02) 0%,
        transparent 15%,
        transparent 100%);
}

.cujilaps-diving-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* 深度メーター */
.cujilaps-depth-meter {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 8px;
    z-index: 10000; /* .cujilaps-diving-viewより高く、WordPressヘッダーより低く設定 */
    pointer-events: none;
}

.cujilaps-depth-value {
    font-size: 72px;
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.cujilaps-depth-unit {
    font-size: 36px;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
    font-weight: 600;
}

/* アニメーションコンテナ */
.cujilaps-animation-container {
    width: 400px;
    height: 400px;
    max-width: 90vw;
    max-height: 50vh;
    margin: 20px 0;
}

/* フォールバックアニメーション（Lottieが読み込めない場合） */
.cujilaps-fallback-animation {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    animation: cujilaps-pulse 2s ease-in-out infinite;
}

.cujilaps-whale-icon {
    animation: cujilaps-float 3s ease-in-out infinite;
}

.cujilaps-treasure-icon {
    animation: cujilaps-glow 2s ease-in-out infinite;
}

@keyframes cujilaps-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes cujilaps-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
    }
    75% {
        transform: translateY(-10px) rotate(-5deg);
    }
}

@keyframes cujilaps-glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 220, 0, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(255, 220, 0, 0.9));
        transform: scale(1.1);
    }
}

/* ステータステキスト */
.cujilaps-status-text {
    position: relative;
    margin-top: -5em; /* クジラアニメーションの上に配置 */
    color: var(--text-light);
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    z-index: 10;
    width: 90%;
    max-width: 600px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* プログレスバー */
.cujilaps-progress-bar {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    z-index: 10;
}

.cujilaps-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-cyan) 0%, var(--treasure-gold) 100%);
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

/* ============================================
   結果ビュー
   ============================================ */
.cujilaps-result-view {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: linear-gradient(180deg, var(--deep-navy) 0%, var(--deep-black) 100%);
    overflow-y: auto;
    overflow-x: hidden;
}

/* 結果表示の背景エフェクト */
.cujilaps-result-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.cujilaps-result-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 220, 0, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(0, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 220, 0, 0.2), transparent);
    background-size: 200% 200%;
    animation: particle-float 20s ease-in-out infinite;
}

@keyframes particle-float {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-10%, -10%);
    }
}

.cujilaps-result-light-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(255, 220, 0, 0.1) 0%,
        rgba(0, 255, 255, 0.05) 20%,
        transparent 50%);
    animation: light-rays-pulse 4s ease-in-out infinite;
}

@keyframes light-rays-pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

.cujilaps-result-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 220, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: glow-pulse 3s ease-in-out infinite;
    filter: blur(60px);
}

@keyframes glow-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

.cujilaps-result-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* PCでは全画面表示 */
@media (min-width: 769px) {
    .cujilaps-result-content {
        padding: 80px 60px;
    }
}

/* 結果表示のヒーローセクション */
.cujilaps-scanned-url {
    margin-bottom: 20px;
    padding: 12px 20px;
    background: rgba(0, 31, 63, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    text-align: center;
}

.cujilaps-url-label {
    color: var(--text-muted);
    font-size: 14px;
    margin-right: 10px;
}

.cujilaps-url-value {
    color: var(--neon-cyan);
    font-size: 16px;
    font-weight: 600;
    word-break: break-all;
}

.cujilaps-result-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
    animation: hero-fade-in 1.5s ease-out;
}

@keyframes hero-fade-in {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ダイヤモンドアイコン（上質感） */
.cujilaps-diamond-icon {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 40px;
    animation: diamond-float 3s ease-in-out infinite;
}

@keyframes diamond-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

.cujilaps-diamond-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: diamond-rotate 8s linear infinite;
}

@keyframes diamond-rotate {
    0% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(360deg);
    }
}

.cujilaps-diamond-facet {
    position: absolute;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 220, 0, 0.8) 50%,
        rgba(255, 200, 0, 0.6) 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    clip-path: polygon(50% 0%, 100% 38%, 50% 100%, 0% 38%);
    filter: drop-shadow(0 0 20px rgba(255, 220, 0, 0.8));
}

.cujilaps-diamond-facet.facet-1 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.cujilaps-diamond-facet.facet-2 {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    opacity: 0.8;
}

.cujilaps-diamond-facet.facet-3 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    opacity: 0.6;
}

.cujilaps-diamond-facet.facet-4 {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    opacity: 0.4;
}

.cujilaps-diamond-facet.facet-5 {
    width: 30%;
    height: 30%;
    top: 35%;
    left: 35%;
    opacity: 0.3;
}

.cujilaps-diamond-facet.facet-6 {
    width: 20%;
    height: 20%;
    top: 40%;
    left: 40%;
    opacity: 0.2;
}

.cujilaps-diamond-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 220, 0, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: diamond-glow-pulse 2s ease-in-out infinite;
    filter: blur(40px);
    z-index: -1;
}

@keyframes diamond-glow-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.7;
    }
}

.cujilaps-result-message {
    margin: 0 0 40px 0;
    animation: message-slide-in 1.5s ease-out 0.3s both;
}

@keyframes message-slide-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cujilaps-result-title {
    color: var(--treasure-gold);
    font-size: 56px;
    font-weight: 900;
    margin: 0 0 30px 0;
    text-shadow: 
        0 0 20px rgba(255, 220, 0, 0.8),
        0 0 40px rgba(255, 220, 0, 0.6),
        0 0 60px rgba(255, 220, 0, 0.4);
    letter-spacing: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: title-glow 2s ease-in-out infinite;
}

@keyframes title-glow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(255, 220, 0, 0.8),
            0 0 40px rgba(255, 220, 0, 0.6),
            0 0 60px rgba(255, 220, 0, 0.4);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(255, 220, 0, 1),
            0 0 60px rgba(255, 220, 0, 0.8),
            0 0 90px rgba(255, 220, 0, 0.6);
    }
}

.cujilaps-title-line {
    display: block;
    animation: line-appear 0.8s ease-out both;
}

.cujilaps-title-line.line-1 {
    animation-delay: 0.5s;
}

.cujilaps-title-line.line-2 {
    animation-delay: 0.7s;
}

@keyframes line-appear {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.cujilaps-result-subtitle {
    margin-top: 20px;
}

.cujilaps-subtitle-text {
    color: var(--text-light);
    font-size: 20px;
    line-height: 2;
    margin: 15px 0;
    animation: subtitle-fade-in 1s ease-out 1s both;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

@keyframes subtitle-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.cujilaps-icon-email {
    font-size: 24px;
    animation: icon-bounce 2s ease-in-out infinite;
}

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

/* スコアプレビュー（ワクワク感） */
.cujilaps-result-score-preview {
    margin-top: 40px;
    padding: 30px 50px;
    background: linear-gradient(135deg, 
        rgba(255, 220, 0, 0.1) 0%,
        rgba(0, 255, 255, 0.1) 100%);
    border-radius: 20px;
    border: 2px solid rgba(255, 220, 0, 0.3);
    backdrop-filter: blur(10px);
    animation: score-preview-appear 1s ease-out 1.5s both;
    box-shadow: 
        0 0 30px rgba(255, 220, 0, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
}

@keyframes score-preview-appear {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cujilaps-score-label {
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.cujilaps-score-value {
    font-size: 72px;
    font-weight: 900;
    color: var(--treasure-gold);
    text-shadow: 
        0 0 20px rgba(255, 220, 0, 0.8),
        0 0 40px rgba(255, 220, 0, 0.6);
    font-family: 'Courier New', monospace;
    animation: score-count-up 1s ease-out 2s both;
}

@keyframes score-count-up {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .cujilaps-result-title {
        font-size: 42px;
    }
    
    .cujilaps-diamond-icon {
        width: 150px;
        height: 150px;
    }
    
    .cujilaps-score-value {
        font-size: 56px;
    }
    
    .cujilaps-subtitle-text {
        font-size: 16px;
    }
}

/* ============================================
   エラービュー
   ============================================ */
.cujilaps-error-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* WordPressのヘッダーナビゲーションより低く設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.95);
}

.cujilaps-error-content {
    text-align: center;
    padding: 40px;
    max-width: 500px;
    background: rgba(0, 31, 63, 0.9);
    border-radius: 16px;
    border: 2px solid var(--danger-red);
    box-shadow: 0 0 30px rgba(255, 65, 54, 0.3);
}

.cujilaps-error-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.cujilaps-error-title {
    color: var(--danger-red);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-shadow: 0 0 10px rgba(255, 65, 54, 0.5);
}

.cujilaps-error-text {
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

/* ============================================
   閉じるボタン
   ============================================ */
.cujilaps-close-btn {
    padding: 12px 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--neon-cyan);
    border-radius: 8px;
    color: var(--neon-cyan);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cujilaps-close-btn:hover {
    background: var(--neon-cyan);
    color: var(--deep-black);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

/* ============================================
   SEO/AIO評価セクション
   ============================================ */
.cujilaps-report-section {
    margin: 30px 0;
    padding: 30px;
    background: rgba(0, 31, 63, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cujilaps-report-section-title {
    color: var(--neon-cyan);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cujilaps-seo-score,
.cujilaps-aio-score {
    text-align: center;
    margin: 20px 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
}

.cujilaps-score-value-large {
    font-size: 64px;
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
}

.cujilaps-score-label {
    font-size: 24px;
    color: var(--text-muted);
    font-weight: 600;
}

.cujilaps-seo-issues,
.cujilaps-aio-issues {
    margin-top: 20px;
}

.cujilaps-seo-issue,
.cujilaps-aio-issue {
    padding: 20px;
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border-left: 4px solid;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.cujilaps-seo-issue:hover,
.cujilaps-aio-issue:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
}

.cujilaps-issue-header-improvement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cujilaps-improvement-badge {
    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--treasure-gold) 100%);
    color: var(--deep-black);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cujilaps-severity-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.cujilaps-severity-badge.critical {
    background: var(--danger-red);
    color: #ffffff;
}

.cujilaps-severity-badge.high {
    background: #ff8800;
    color: #ffffff;
}

.cujilaps-severity-badge.medium {
    background: var(--treasure-gold);
    color: var(--deep-black);
}

.cujilaps-severity-badge.low {
    background: var(--neon-cyan);
    color: var(--deep-black);
}

.cujilaps-issue-message {
    font-size: 15px;
    line-height: 1.6;
    margin: 10px 0;
    color: var(--text-light);
    text-align: left;
}

.cujilaps-improvement-impact {
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 6px;
    border-left: 3px solid var(--neon-cyan);
    font-size: 13px;
    color: var(--neon-cyan);
    font-weight: 500;
    text-align: left;
}

.cujilaps-improvement-potential {
    text-align: center;
    margin: 25px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(255, 220, 0, 0.1) 100%);
    border-radius: 12px;
    border: 2px solid rgba(0, 255, 255, 0.3);
}

.cujilaps-potential-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cujilaps-potential-value {
    font-size: 48px;
    font-weight: 900;
    color: var(--treasure-gold);
    text-shadow: 0 0 20px rgba(255, 220, 0, 0.8);
    margin: 10px 0;
    font-family: 'Courier New', monospace;
}

.cujilaps-potential-description {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-top: 10px;
    opacity: 0.9;
    text-align: left;
}

.cujilaps-seo-issue.high,
.cujilaps-aio-issue.high {
    border-left-color: var(--danger-red);
}

.cujilaps-seo-issue.medium,
.cujilaps-aio-issue.medium {
    border-left-color: var(--treasure-gold);
}

.cujilaps-seo-issue.low,
.cujilaps-aio-issue.low {
    border-left-color: #00ffff;
}

/* SEO/AIO詳細分析セクション */
.cujilaps-seo-blocking-factors,
.cujilaps-aio-blocking-factors {
    margin-top: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cujilaps-blocking-factors-title {
    color: var(--neon-cyan);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    text-align: left;
}

/* コンテンツの要約セクション */
.cujilaps-content-excerpt {
    text-align: left;
}

.cujilaps-content-excerpt .cujilaps-blocking-factors-title {
    text-align: left;
}

.cujilaps-content-excerpt p {
    text-align: left !important;
}

.cujilaps-blocking-factor-item {
    padding: 15px;
    margin: 15px 0;
    background: rgba(0, 31, 63, 0.4);
    border-radius: 8px;
    border-left: 4px solid var(--neon-cyan);
}

.cujilaps-blocking-factor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cujilaps-blocking-factor-name {
    color: var(--text-light);
    font-size: 16px;
    font-weight: 600;
}

.cujilaps-blocking-factor-impact {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.cujilaps-blocking-factor-impact.high {
    background: rgba(255, 65, 54, 0.3);
    color: #ff4136;
    border: 1px solid #ff4136;
}

.cujilaps-blocking-factor-impact.中 {
    background: rgba(255, 220, 0, 0.3);
    color: #ffdc00;
    border: 1px solid #ffdc00;
}

.cujilaps-blocking-factor-reason {
    color: var(--text-muted);
    font-size: 14px;
    margin: 8px 0;
    line-height: 1.6;
    text-align: left;
}

.cujilaps-blocking-factor-solution {
    color: var(--neon-cyan);
    font-size: 14px;
    margin-top: 8px;
    padding: 10px;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 4px;
    line-height: 1.6;
    text-align: left;
}

/* プラグイン要約表示 */
.cujilaps-plugin-summary {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.cujilaps-plugin-summary-item {
    padding: 15px;
    background: rgba(0, 31, 63, 0.4);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cujilaps-plugin-summary-item.risky {
    border-left: 4px solid #ff8800;
}

.cujilaps-plugin-summary-item.safe {
    border-left: 4px solid #00ffff;
}

.cujilaps-plugin-summary-label {
    color: var(--text-light);
    font-size: 14px;
}

.cujilaps-plugin-summary-value {
    color: var(--neon-cyan);
    font-size: 18px;
    font-weight: 700;
}

.cujilaps-plugin-toggle-btn {
    width: 100%;
    padding: 12px;
    background: rgba(0, 31, 63, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--neon-cyan);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.cujilaps-plugin-toggle-btn:hover {
    background: rgba(0, 31, 63, 0.6);
    border-color: var(--neon-cyan);
}

.cujilaps-plugin-toggle-icon {
    font-size: 12px;
}

.cujilaps-plugin-list-items {
    margin-top: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.cujilaps-seo-issue.low,
.cujilaps-aio-issue.low {
    border-left-color: var(--neon-cyan);
}

/* サイト資産価値セクション */
.cujilaps-asset-value {
    text-align: center;
}

.cujilaps-asset-level {
    font-size: 48px;
    font-weight: 900;
    color: var(--treasure-gold);
    text-shadow: 0 0 20px rgba(255, 220, 0, 0.8);
    margin: 20px 0;
}

.cujilaps-asset-score {
    font-size: 24px;
    color: var(--neon-cyan);
    margin: 10px 0;
    font-weight: 600;
}

.cujilaps-asset-description {
    color: var(--text-light);
    font-size: 16px;
    line-height: 1.8;
    margin: 20px 0;
    text-align: left;
}

/* パーソナライズドメッセージ（解析内容） */
.cujilaps-content-personalized-message {
    text-align: left !important;
}

.cujilaps-content-personalized-message h4,
.cujilaps-content-personalized-message p {
    text-align: left !important;
}

.cujilaps-content-personalized-message h4 {
    text-align: left !important;
}

/* コンテンツ解析セクション */
.cujilaps-content-insight {
    padding: 20px;
    margin: 20px 0;
    background: rgba(0, 31, 63, 0.4);
    border-radius: 12px;
    border-left: 4px solid var(--neon-cyan);
    text-align: left;
}

.cujilaps-content-insight-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.cujilaps-content-insight-number {
    width: 30px;
    height: 30px;
    background: var(--neon-cyan);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.cujilaps-content-insight-title {
    color: var(--neon-cyan);
    font-size: 18px;
    font-weight: 700;
    text-align: left;
}

.cujilaps-content-insight-content {
    color: var(--text-light);
    line-height: 1.8;
    text-align: left;
}

.cujilaps-content-insight-current,
.cujilaps-content-insight-suggestion,
.cujilaps-content-insight-impact {
    margin: 15px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    text-align: left;
}

.cujilaps-content-insight-current strong,
.cujilaps-content-insight-suggestion strong,
.cujilaps-content-insight-impact strong {
    color: var(--neon-cyan);
    display: block;
    margin-bottom: 8px;
    text-align: left;
}

.cujilaps-content-insight-suggestion {
    border-left: 3px solid var(--neon-cyan);
    text-align: left;
}

.cujilaps-content-insight-impact ul {
    margin: 10px 0 0 20px;
    padding: 0;
    text-align: left;
}

.cujilaps-content-insight-impact li {
    margin: 8px 0;
    list-style-type: disc;
    text-align: left;
}

.cujilaps-asset-strengths,
.cujilaps-asset-weaknesses {
    margin: 20px 0;
    text-align: left;
}

.cujilaps-asset-strengths h4 {
    color: var(--neon-cyan);
    font-size: 20px;
    margin: 0 0 10px 0;
}

.cujilaps-asset-weaknesses h4 {
    color: var(--danger-red);
    font-size: 20px;
    margin: 0 0 10px 0;
}

.cujilaps-asset-strengths ul,
.cujilaps-asset-weaknesses ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cujilaps-asset-strengths li,
.cujilaps-asset-weaknesses li {
    padding: 10px;
    margin: 5px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    color: var(--text-light);
}

.cujilaps-asset-strengths li::before {
    content: '✓ ';
    color: var(--neon-cyan);
    font-weight: bold;
    margin-right: 8px;
}

.cujilaps-asset-weaknesses li::before {
    content: '⚠ ';
    color: var(--danger-red);
    font-weight: bold;
    margin-right: 8px;
}

/* ============================================
   チャートセクション
   ============================================ */
.cujilaps-charts-section {
    margin: 40px 0;
    padding: 30px;
    background: rgba(0, 31, 63, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cujilaps-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.cujilaps-chart-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0, 255, 255, 0.1);
    position: relative;
    min-height: 300px;
}

.cujilaps-chart-title {
    color: var(--neon-cyan);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cujilaps-chart-container canvas {
    max-height: 300px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .cujilaps-charts-grid {
        grid-template-columns: 1fr;
    }
    
    .cujilaps-chart-container {
        min-height: 250px;
    }
}

/* ============================================
   海底探査機風レーダー/ソナーUI
   ============================================ */
.cujilaps-sonar-panel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(0, 31, 63, 0.95) 0%, rgba(0, 0, 0, 0.95) 100%);
    border-radius: 0;
    border: none;
    border-top: 2px solid rgba(0, 255, 255, 0.3);
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 50px rgba(0, 255, 255, 0.2), inset 0 0 50px rgba(0, 255, 255, 0.05);
}

/* PCでは全画面表示 */
@media (min-width: 769px) {
    .cujilaps-sonar-panel {
        padding: 40px 60px;
    }
}

.cujilaps-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
    margin-bottom: 30px;
}

.cujilaps-panel-title {
    color: var(--neon-cyan);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.cujilaps-panel-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    font-size: 14px;
    font-family: 'Courier New', monospace;
}

.cujilaps-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--danger-red);
    box-shadow: 0 0 10px var(--danger-red);
}

.cujilaps-status-indicator.active {
    background: #00ff00;
    box-shadow: 0 0 10px #00ff00;
    animation: pulse-indicator 2s ease-in-out infinite;
}

@keyframes pulse-indicator {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* レーダースクリーン */
.cujilaps-radar-screen {
    width: 100%;
    padding: 20px;
    margin-bottom: 30px;
}

.cujilaps-radar-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 31, 63, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
    border: 3px solid var(--neon-cyan);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.5),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
    overflow: hidden;
}

/* レーダーグリッド */
.cujilaps-radar-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cujilaps-radar-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 50%;
}

.cujilaps-radar-circle.circle-1 {
    width: 25%;
    height: 25%;
}

.cujilaps-radar-circle.circle-2 {
    width: 50%;
    height: 50%;
}

.cujilaps-radar-circle.circle-3 {
    width: 75%;
    height: 75%;
}

.cujilaps-radar-circle.circle-4 {
    width: 100%;
    height: 100%;
}

.cujilaps-radar-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    background: rgba(0, 255, 255, 0.2);
    transform-origin: left center;
}

.cujilaps-radar-line.line-0 {
    transform: translate(-50%, -50%) rotate(0deg);
}

.cujilaps-radar-line.line-45 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.cujilaps-radar-line.line-90 {
    transform: translate(-50%, -50%) rotate(90deg);
}

.cujilaps-radar-line.line-135 {
    transform: translate(-50%, -50%) rotate(135deg);
}

/* レーダースキャンアニメーション */
.cujilaps-radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--neon-cyan) 50%, transparent 100%);
    transform-origin: left center;
    animation: radar-sweep 4s linear infinite;
    box-shadow: 0 0 20px var(--neon-cyan);
    z-index: 10;
}

@keyframes radar-sweep {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* レーダー中央のスコア */
.cujilaps-radar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 20;
}

.cujilaps-radar-score {
    font-size: 64px;
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
    line-height: 1;
}

.cujilaps-radar-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
}

/* レーダー上の指標（動的に配置） */
.cujilaps-radar-indicators {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    /* レーダー背景が見えるように透過度を設定 */
    opacity: 1;
    pointer-events: none; /* チャートがクリックイベントを妨げないように */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cujilaps-radar-indicators canvas {
    opacity: 0.9; /* チャート自体も透過 */
    max-width: 100%;
    max-height: 100%;
    /* width/heightはJavaScriptで動的に設定されるため、!importantは削除 */
}

.cujilaps-radar-indicator {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
    transform: translate(-50%, -50%);
    animation: radar-pulse 2s ease-in-out infinite;
}

.cujilaps-radar-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid var(--neon-cyan);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    animation: radar-ripple 2s ease-out infinite;
}

@keyframes radar-pulse {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes radar-ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.cujilaps-radar-indicator-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--neon-cyan);
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8);
}

/* コントロールパネル */
.cujilaps-control-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
    max-width: 100%;
}

@media (min-width: 769px) {
    .cujilaps-control-panel {
        grid-template-columns: 1fr;
        max-width: 1200px;
        margin: 0 auto 30px;
    }
}

.cujilaps-panel-section {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cujilaps-panel-section-title {
    color: var(--neon-cyan);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
    font-family: 'Courier New', monospace;
}

.cujilaps-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.cujilaps-metric-item {
    text-align: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.1);
}

.cujilaps-metric-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

.cujilaps-metric-value {
    font-size: 32px;
    font-weight: 900;
    font-family: 'Courier New', monospace;
}

.cujilaps-metric-value.critical {
    color: var(--danger-red);
    text-shadow: 0 0 15px rgba(255, 65, 54, 0.8);
}

.cujilaps-metric-value.high {
    color: #ff8800;
    text-shadow: 0 0 15px rgba(255, 136, 0, 0.8);
}

.cujilaps-metric-value.medium {
    color: var(--treasure-gold);
    text-shadow: 0 0 15px rgba(255, 220, 0, 0.8);
}

.cujilaps-metric-value.low {
    color: var(--neon-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

/* AI指標グリッド（3カラム構成） */
.cujilaps-ai-metrics-grid,
.cujilaps-seo-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 769px) {
    .cujilaps-ai-metrics-grid,
    .cujilaps-seo-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.cujilaps-ai-metric-item,
.cujilaps-seo-metric-item {
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border-left: 4px solid var(--neon-cyan);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cujilaps-ai-metric-item::before,
.cujilaps-seo-metric-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cujilaps-ai-metric-item:hover,
.cujilaps-seo-metric-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
}

.cujilaps-ai-metric-item.positive {
    border-left-color: #00ff00;
}

.cujilaps-ai-metric-item.negative {
    border-left-color: var(--danger-red);
}

.cujilaps-ai-metric-item.warning {
    border-left-color: var(--treasure-gold);
}

.cujilaps-metric-name {
    font-size: 15px;
    color: var(--text-light);
    margin-bottom: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cujilaps-metric-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.2);
    font-size: 14px;
}

.cujilaps-metric-item.positive .cujilaps-metric-icon {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
}

.cujilaps-metric-item.negative .cujilaps-metric-icon {
    background: rgba(255, 65, 54, 0.2);
    color: var(--danger-red);
}

.cujilaps-metric-item.warning .cujilaps-metric-icon {
    background: rgba(255, 220, 0, 0.2);
    color: var(--treasure-gold);
}

.cujilaps-metric-status {
    font-size: 14px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.cujilaps-metric-status.positive {
    color: #00ff00;
}

.cujilaps-metric-status.negative {
    color: var(--danger-red);
}

.cujilaps-metric-status.warning {
    color: var(--treasure-gold);
}

/* 改善項目ハイライトスタイル */
.cujilaps-highlights-title {
    color: var(--neon-cyan);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 25px 0;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-align: center;
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
    padding-bottom: 15px;
}

.cujilaps-highlights-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 100%;
}

@media (min-width: 769px) {
    .cujilaps-highlights-list {
        grid-template-columns: 1fr;
        max-width: 1200px;
        margin: 0 auto;
    }
}

.cujilaps-highlight-item {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    padding: 25px;
    border-left: 5px solid;
    transition: all 0.3s ease;
    animation: highlight-pulse 2s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.cujilaps-highlight-item:hover {
    transform: translateX(8px);
    box-shadow: 0 6px 25px rgba(0, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.6);
}

.cujilaps-highlight-item.critical {
    border-left-color: var(--danger-red);
    background: linear-gradient(135deg, rgba(255, 65, 54, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
    box-shadow: 0 4px 20px rgba(255, 65, 54, 0.3);
}

.cujilaps-highlight-item.high {
    border-left-color: #ff8800;
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
    box-shadow: 0 4px 20px rgba(255, 136, 0, 0.3);
}

.cujilaps-highlight-item.medium {
    border-left-color: var(--treasure-gold);
    background: linear-gradient(135deg, rgba(255, 220, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
    box-shadow: 0 4px 20px rgba(255, 220, 0, 0.3);
}

.cujilaps-highlight-item.low {
    border-left-color: var(--neon-cyan);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
}

@keyframes highlight-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    }
}

.cujilaps-highlight-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.cujilaps-highlight-priority {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.cujilaps-highlight-priority::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.cujilaps-highlight-priority.critical {
    background: rgba(255, 65, 54, 0.2);
    color: var(--danger-red);
    border: 1px solid var(--danger-red);
}

.cujilaps-highlight-priority.high {
    background: rgba(255, 136, 0, 0.2);
    color: #ff8800;
    border: 1px solid #ff8800;
}

.cujilaps-highlight-priority.medium {
    background: rgba(255, 220, 0, 0.2);
    color: var(--treasure-gold);
    border: 1px solid var(--treasure-gold);
}

.cujilaps-highlight-priority.low {
    background: rgba(0, 255, 255, 0.2);
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
}

.cujilaps-highlight-message {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.7;
    font-weight: 600;
    margin: 0;
    text-align: left;
}

.cujilaps-highlight-action {
    font-size: 15px;
    color: var(--neon-cyan);
    padding: 15px;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--neon-cyan);
    line-height: 1.6;
    margin-top: 5px;
    text-align: left;
}

.cujilaps-highlight-action::before {
    content: '💡 ';
    margin-right: 5px;
}

/* 詳細パネル（タブ） */
.cujilaps-detail-panel {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.cujilaps-detail-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
}

.cujilaps-tab-btn {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cujilaps-tab-btn:hover {
    color: var(--neon-cyan);
    border-bottom-color: rgba(0, 255, 255, 0.5);
}

.cujilaps-tab-btn.active {
    color: var(--neon-cyan);
    border-bottom-color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cujilaps-tab-content {
    display: none;
}

.cujilaps-tab-content.active {
    display: block;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .cujilaps-radar-container {
        max-width: 100%;
    }
    
    .cujilaps-control-panel {
        grid-template-columns: 1fr;
    }
    
    .cujilaps-metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cujilaps-ai-metrics-grid,
    .cujilaps-seo-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .cujilaps-detail-tabs {
        flex-wrap: wrap;
    }
    
    .cujilaps-tab-btn {
        flex: 1;
        min-width: 100px;
        font-size: 12px;
        padding: 10px 15px;
    }
    
    .cujilaps-radar-score {
        font-size: 48px;
    }
    
    .cujilaps-panel-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .cujilaps-sonar-panel {
        padding: 10px;
    }
    
    .cujilaps-radar-score {
        font-size: 36px;
    }
    
    .cujilaps-metric-value {
        font-size: 24px;
    }
}

/* ============================================
   レスポンシブデザイン
   ============================================ */
@media (max-width: 768px) {
    .cujilaps-form-wrapper {
        padding: 30px 20px;
    }
    
    .cujilaps-form-title {
        font-size: 24px;
    }
    
    .cujilaps-depth-value {
        font-size: 48px;
    }
    
    .cujilaps-depth-unit {
        font-size: 24px;
    }
    
    .cujilaps-animation-container {
        width: 300px;
        height: 300px;
    }
    
    .cujilaps-status-text {
        font-size: 18px;
        margin-top: -5em; /* クジラアニメーションの上に配置 */
    }
    
    .cujilaps-result-title {
        font-size: 28px;
    }
    
    .cujilaps-result-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .cujilaps-form-wrapper {
        padding: 20px 15px;
    }
    
    .cujilaps-depth-value {
        font-size: 36px;
    }
    
    .cujilaps-animation-container {
        width: 250px;
        height: 250px;
    }
    
    .cujilaps-progress-bar {
        width: 250px;
    }
}

/* ============================================
   レポート表示
   ============================================ */
.cujilaps-result-content {
    width: 100%;
    max-width: 100%;
    padding: 40px 20px;
    overflow: visible;
}

/* PCでは横幅いっぱいに使用 */
@media (min-width: 769px) {
    .cujilaps-result-content {
        padding: 40px 60px;
    }
}

.cujilaps-result-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.cujilaps-view-report-btn {
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--treasure-gold) 0%, #ffaa00 100%);
    border: none;
    border-radius: 8px;
    color: var(--deep-black);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 220, 0, 0.3);
}

.cujilaps-view-report-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 220, 0, 0.5);
}

/* PDFエクスポートボタンのスタイルは削除されました */

.cujilaps-report-container {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: left;
}

/* 解析結果のすべてのテキスト要素を左寄せにする */
.cujilaps-report-container p,
.cujilaps-report-container div,
.cujilaps-report-container span,
.cujilaps-report-container h1,
.cujilaps-report-container h2,
.cujilaps-report-container h3,
.cujilaps-report-container h4,
.cujilaps-report-container h5,
.cujilaps-report-container h6,
.cujilaps-report-container li,
.cujilaps-report-container td,
.cujilaps-report-container th,
.cujilaps-report-container label,
.cujilaps-report-container small,
.cujilaps-report-container strong,
.cujilaps-report-container em {
    text-align: left !important;
}

/* 改善項目セクション */
.cujilaps-improvements-section > div,
.cujilaps-improvements-section > div > div {
    text-align: left !important;
}

/* 改善項目の「現状」「改善方法」「期待される効果」セクション */
.cujilaps-report-container [style*="background: rgba(0, 255, 255, 0.1)"],
.cujilaps-report-container [style*="background: rgba(255, 220, 0, 0.1)"],
.cujilaps-report-container [style*="background: rgba(0, 0, 0, 0.3)"] {
    text-align: left !important;
}

/* インラインスタイルで生成される改善項目のテキスト要素 */
.cujilaps-report-container div[style*="color: var(--neon-cyan)"],
.cujilaps-report-container div[style*="color: var(--treasure-gold)"],
.cujilaps-report-container div[style*="color: var(--text-light)"],
.cujilaps-report-container div[style*="color: var(--text-muted)"] {
    text-align: left !important;
}

/* サマリーカード */
.cujilaps-report-summary {
    margin-bottom: 40px;
}

.cujilaps-summary-card {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(255, 220, 0, 0.1) 100%);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.1);
}

.cujilaps-summary-score {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.cujilaps-score-value {
    display: block;
    font-size: 72px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--treasure-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    line-height: 1;
}

.cujilaps-score-label {
    display: block;
    color: var(--text-muted);
    font-size: 18px;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cujilaps-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
}

.cujilaps-stat-item {
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid;
    transition: all 0.3s ease;
}

.cujilaps-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.cujilaps-stat-item.critical {
    border-color: var(--danger-red);
    box-shadow: 0 0 15px rgba(255, 65, 54, 0.3);
}

.cujilaps-stat-item.high {
    border-color: #ff8800;
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.3);
}

.cujilaps-stat-item.medium {
    border-color: var(--treasure-gold);
    box-shadow: 0 0 15px rgba(255, 220, 0, 0.3);
}

.cujilaps-stat-item.low {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.cujilaps-stat-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}

.cujilaps-stat-item.critical .cujilaps-stat-value {
    color: var(--danger-red);
}

.cujilaps-stat-item.high .cujilaps-stat-value {
    color: #ff8800;
}

.cujilaps-stat-item.medium .cujilaps-stat-value {
    color: var(--treasure-gold);
}

.cujilaps-stat-item.low .cujilaps-stat-value {
    color: var(--neon-cyan);
}

.cujilaps-stat-label {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 問題一覧 */
.cujilaps-report-issues {
    margin-bottom: 40px;
}

.cujilaps-report-section-title {
    color: var(--neon-cyan);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cujilaps-issues-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cujilaps-issue-item {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cujilaps-issue-item:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateX(5px);
}

.cujilaps-issue-item.critical {
    border-left-color: var(--danger-red);
    box-shadow: 0 0 15px rgba(255, 65, 54, 0.2);
}

.cujilaps-issue-item.high {
    border-left-color: #ff8800;
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.2);
}

.cujilaps-issue-item.medium {
    border-left-color: var(--treasure-gold);
    box-shadow: 0 0 15px rgba(255, 220, 0, 0.2);
}

.cujilaps-issue-item.low {
    border-left-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.cujilaps-issue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cujilaps-issue-title {
    color: var(--text-light);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.cujilaps-issue-severity {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cujilaps-issue-severity.critical {
    background: var(--danger-red);
    color: white;
}

.cujilaps-issue-severity.high {
    background: #ff8800;
    color: white;
}

.cujilaps-issue-severity.medium {
    background: var(--treasure-gold);
    color: var(--deep-black);
}

.cujilaps-issue-severity.low {
    background: var(--neon-cyan);
    color: var(--deep-black);
}

.cujilaps-issue-description {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0;
    text-align: left;
}

.cujilaps-issue-location {
    color: var(--neon-cyan);
    font-size: 12px;
    font-family: 'Courier New', monospace;
    margin: 8px 0;
    padding: 8px;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 4px;
}

.cujilaps-issue-recommendation {
    color: var(--treasure-gold);
    font-size: 13px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 220, 0, 0.2);
    text-align: left;
}

.cujilaps-issue-recommendation strong {
    color: var(--treasure-gold);
}

/* 推奨事項 */
.cujilaps-report-recommendations {
    margin-bottom: 20px;
}

.cujilaps-recommendations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cujilaps-recommendation-item {
    background: rgba(0, 255, 255, 0.05);
    border-left: 3px solid var(--neon-cyan);
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
    transition: all 0.3s ease;
    text-align: left;
}

.cujilaps-recommendation-item:hover {
    background: rgba(0, 255, 255, 0.1);
    transform: translateX(5px);
}

.cujilaps-recommendation-item::before {
    content: "✓ ";
    color: var(--neon-cyan);
    font-weight: 700;
    margin-right: 8px;
}

/* スクリーンショット */
.cujilaps-screenshot-section {
    margin-bottom: 40px;
}

.cujilaps-screenshot-container {
    text-align: center;
    margin: 20px 0;
}

.cujilaps-screenshot-image {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 255, 255, 0.3);
    transition: transform 0.3s ease;
}

.cujilaps-screenshot-image:hover {
    transform: scale(1.02);
}

.cujilaps-screenshot-caption {
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .cujilaps-result-content {
        padding: 20px 15px;
    }
    
    .cujilaps-report-container {
        padding: 20px;
    }
    
    .cujilaps-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cujilaps-score-value {
        font-size: 56px;
    }
    
    .cujilaps-stat-value {
        font-size: 28px;
    }
    
    .cujilaps-issue-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .cujilaps-summary-stats {
        grid-template-columns: 1fr;
    }
    
    .cujilaps-result-actions {
        flex-direction: column;
    }
    
    .cujilaps-view-report-btn,
    .cujilaps-close-btn,
    .cujilaps-print-btn {
        width: 100%;
    }
}

/* 印刷ボタンのスタイル */
.cujilaps-print-btn {
    padding: 12px 32px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
    margin-right: 10px;
}

.cujilaps-print-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5);
    background: linear-gradient(135deg, #5aa0f2 0%, #458acd 100%);
}

.cujilaps-print-btn:active {
    transform: translateY(0);
}

/* 印刷用スタイル（シンプルなデータ中心のレイアウト） */
@media print {
    /* 印刷時に非表示にする要素（装飾的な要素とメッセージを非表示） */
    #cujilaps-form-view,
    #cujilaps-diving-view,
    .cujilaps-result-actions,
    .cujilaps-tab-btn,
    .cujilaps-detail-tabs,
    button,
    .cujilaps-close-btn,
    .cujilaps-print-btn,
    .cujilaps-view-report-btn,
    .cujilaps-result-hero,
    .cujilaps-result-background,
    .cujilaps-result-particles,
    .cujilaps-result-light-rays,
    .cujilaps-result-glow,
    .cujilaps-diamond-icon,
    .cujilaps-result-message,
    .cujilaps-result-subtitle,
    .cujilaps-result-score-preview,
    .cujilaps-result-fish-background,
    .cujilaps-improvement-highlights,
    .cujilaps-radar-screen,
    .cujilaps-scanned-url,
    .cujilaps-title-line,
    .cujilaps-subtitle-text,
    .cujilaps-icon-email,
    .cujilaps-result-title,
    .cujilaps-panel-header,
    .cujilaps-panel-title,
    .cujilaps-panel-status,
    .cujilaps-status-indicator,
    .cujilaps-radar-container,
    .cujilaps-radar-sweep,
    .cujilaps-radar-grid,
    .cujilaps-radar-indicators,
    .cujilaps-radar-center,
    .cujilaps-highlights-title,
    .cujilaps-animation-container,
    .cujilaps-whale-animation,
    .cujilaps-deep-sea-particles,
    .cujilaps-coral-reef,
    .cujilaps-fish-zone,
    .cujilaps-sparkle-effect,
    .cujilaps-result-content > .cujilaps-result-hero,
    .cujilaps-result-content > .cujilaps-result-message,
    .cujilaps-result-content > .cujilaps-result-subtitle,
    .cujilaps-result-content > .cujilaps-result-score-preview,
    .cujilaps-url-label,
    .cujilaps-url-value,
    .cujilaps-diamond-glow,
    .cujilaps-diamond-inner,
    .cujilaps-diamond-facet,
    header,
    footer,
    .site-header,
    .site-footer,
    .wp-site-blocks > header,
    .wp-site-blocks > footer,
    nav,
    .navigation,
    .main-navigation {
        display: none !important;
    }
    
    /* 結果コンテンツのスタイル調整 */
    .cujilaps-result-content {
        padding: 0 !important;
    }
    
    /* スキャン完了メッセージのみ非表示（総合スコアは表示） */
    .cujilaps-result-content > .cujilaps-result-hero {
        display: none !important;
    }
    
    /* 総合スコアは表示（メッセージ部分のみ非表示） */
    .cujilaps-result-score-preview {
        display: block !important;
        text-align: center !important;
        margin: 20px 0 !important;
        padding: 15px !important;
        background: #f8f8f8 !important;
        border: 1px solid #dddddd !important;
    }
    
    .cujilaps-score-label {
        font-size: 12pt !important;
        color: #000000 !important;
        margin-bottom: 10px !important;
    }
    
    /* 結果ビューのみ表示 */
    #cujilaps-result-view {
        display: block !important;
        position: static !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* コンテナのスタイル調整 */
    .cujilaps-container {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
    }
    
    /* レポートコンテナのスタイル（シンプルに、A4サイズに最適化） */
    .cujilaps-report-container {
        background: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
        padding: 15px !important;
        margin: 0 !important;
        display: block !important;
        max-width: 100% !important;
    }
    
    /* レポートコンテナ内の要素を2カラムレイアウトに（A4サイズ最適化） */
    .cujilaps-report-container > .cujilaps-sonar-panel {
        display: block !important;
    }
    
    .cujilaps-sonar-panel {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    /* タブコンテンツをすべて表示 */
    .cujilaps-tab-content {
        display: block !important;
        page-break-inside: avoid;
        background: #ffffff !important;
        border: none !important;
        padding: 0 !important;
        margin: 15px 0 !important;
    }
    
    /* スコア表示の調整 */
    .cujilaps-score-value,
    .cujilaps-radar-score {
        color: #000000 !important;
        font-size: 24pt !important;
        font-weight: bold !important;
    }
    
    /* グラデーションを単色に */
    .cujilaps-consultation-card,
    .cujilaps-estimate-main {
        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        box-shadow: none !important;
    }
    
    /* 改修料金の目安のグラデーションを無効化 */
    .cujilaps-estimate-amount {
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: #000000 !important;
        background-clip: unset !important;
        color: #000000 !important;
    }
    
    /* テキストの色を統一 */
    .cujilaps-consultation-title,
    .cujilaps-estimate-label,
    .cujilaps-estimate-detail-text,
    .cujilaps-blocking-factors-title,
    .cujilaps-metric-label,
    .cujilaps-metric-value,
    h1, h2, h3, h4, h5, h6,
    p, span, div, li, td, th {
        color: #000000 !important;
    }
    
    /* 見出しのスタイルをシンプルに */
    h1 {
        font-size: 18pt !important;
        font-weight: bold !important;
        margin: 20px 0 15px 0 !important;
        padding-bottom: 8px !important;
        border-bottom: 2px solid #000000 !important;
    }
    
    h2 {
        font-size: 14pt !important;
        font-weight: bold !important;
        margin: 20px 0 12px 0 !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #cccccc !important;
    }
    
    h3 {
        font-size: 12pt !important;
        font-weight: bold !important;
        margin: 15px 0 10px 0 !important;
    }
    
    /* テーブルのスタイル */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 15px 0 !important;
    }
    
    table th,
    table td {
        border: 1px solid #dddddd !important;
        padding: 8px !important;
        text-align: left !important;
        font-size: 11pt !important;
        color: #000000 !important;
    }
    
    table th {
        background: #f8f8f8 !important;
        font-weight: bold !important;
    }
    
    /* リストのスタイル */
    ul, ol {
        margin: 10px 0 !important;
        padding-left: 25px !important;
    }
    
    li {
        margin: 5px 0 !important;
        font-size: 11pt !important;
        color: #000000 !important;
    }
    
    /* 改善項目のスタイルをシンプルに */
    .cujilaps-improvement-item,
    .cujilaps-recommendations-list li {
        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-left: 4px solid #666666 !important;
        padding: 12px !important;
        margin: 12px 0 !important;
        page-break-inside: avoid !important;
    }
    
    /* ページ区切り */
    .cujilaps-blocking-factors,
    .cujilaps-consultation-section,
    .cujilaps-tab-content {
        page-break-inside: avoid !important;
    }
    
    /* リンクのURLを表示 */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666666;
    }
    
    /* 印刷時の余白設定（A4サイズ最適化） */
    @page {
        size: A4;
        margin: 1.5cm;
        /* header/footerを非表示 */
        @top-center { content: ""; }
        @bottom-center { content: ""; }
        @top-left { content: ""; }
        @top-right { content: ""; }
        @bottom-left { content: ""; }
        @bottom-right { content: ""; }
    }
    
    /* 改善項目リストを2カラムに（長い場合、A4サイズ最適化） */
    .cujilaps-recommendations-list,
    .cujilaps-improvements-list {
        column-count: 2 !important;
        column-gap: 15px !important;
    }
    
    .cujilaps-recommendations-list li,
    .cujilaps-improvements-list li {
        break-inside: avoid !important;
        margin-bottom: 10px !important;
    }
    
    /* ブロッキングファクターリストも2カラムに */
    .cujilaps-blocking-factors {
        column-count: 2 !important;
        column-gap: 15px !important;
    }
    
    .cujilaps-blocking-factors > div,
    .cujilaps-blocking-factors > ul {
        break-inside: avoid !important;
    }
    
    /* セキュリティ分析のメトリックグリッドをテーブル形式に */
    .cujilaps-metric-grid {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 15px 0 !important;
    }
    
    .cujilaps-metric-item {
        display: table-cell !important;
        text-align: center !important;
        padding: 12px 8px !important;
        border: 1px solid #dddddd !important;
        background: #ffffff !important;
        font-size: 11pt !important;
        color: #000000 !important;
    }
    
    
    /* 背景と装飾をすべて削除 */
    * {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* 装飾的なアイコンや絵文字を非表示 */
    .cujilaps-estimate-detail-icon,
    .cujilaps-icon-email {
        display: none !important;
    }
    
    /* レポートコンテナ内の装飾要素を非表示（データは表示） */
    .cujilaps-report-container > .cujilaps-result-fish-background,
    .cujilaps-report-container > .cujilaps-improvement-highlights {
        display: none !important;
    }
    
    /* コントロールパネルとパネルセクションは表示（データを含む） */
    .cujilaps-control-panel,
    .cujilaps-panel-section,
    .cujilaps-panel-section-title,
    .cujilaps-detail-panel {
        display: block !important;
    }
    
    /* パネルセクションのスタイルをシンプルに */
    .cujilaps-panel-section {
        margin: 15px 0 !important;
        padding: 12px 0 !important;
        background: transparent !important;
        border: none !important;
        page-break-inside: avoid !important;
    }
    
    .cujilaps-panel-section-title {
        font-size: 13pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin: 0 0 12px 0 !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #cccccc !important;
    }
    
    
    /* コントロールパネルのスタイルをシンプルに（2カラムレイアウト） */
    .cujilaps-control-panel {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 15px 0 !important;
        display: block !important;
    }
    
    /* セキュリティ分析（最初の項目）を非表示 */
    .cujilaps-panel-section:first-child {
        display: none !important;
    }
    
    /* AI最適化指標とSEO指標を横幅いっぱいに（それぞれ全幅） */
    .cujilaps-panel-section:nth-child(2),
    .cujilaps-panel-section:nth-child(3) {
        display: block !important;
        width: 100% !important;
        margin: 15px 0 !important;
        page-break-inside: avoid !important;
    }
    
    /* AI最適化指標とSEO指標のグリッドをテーブル形式に */
    .cujilaps-ai-metrics-grid,
    .cujilaps-seo-metrics-grid {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 10px 0 !important;
    }
    
    .cujilaps-ai-metric-item,
    .cujilaps-seo-metric-item {
        display: table-row !important;
    }
    
    .cujilaps-ai-metric-item > *,
    .cujilaps-seo-metric-item > * {
        display: table-cell !important;
        padding: 8px !important;
        border: 1px solid #dddddd !important;
        vertical-align: top !important;
        font-size: 11pt !important;
        color: #000000 !important;
    }
    
    .cujilaps-metric-name {
        width: 40% !important;
        font-weight: bold !important;
    }
    
    .cujilaps-metric-value {
        width: 60% !important;
    }
    
    /* AI最適化指標とSEO指標のセクションタイトル */
    .cujilaps-panel-section:nth-child(2) .cujilaps-panel-section-title::before {
        content: "AI最適化指標" !important;
    }
    
    .cujilaps-panel-section:nth-child(3) .cujilaps-panel-section-title::before {
        content: "SEO指標" !important;
    }
    
    /* 詳細パネルのスタイルをシンプルに */
    .cujilaps-detail-panel {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 20px 0 !important;
    }
    
    /* 改修料金の目安セクションを2カラムレイアウトに */
    .cujilaps-consultation-section {
        margin: 20px 0 !important;
        page-break-inside: avoid !important;
    }
    
    .cujilaps-consultation-card {
        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        padding: 15px !important;
        margin: 0 !important;
    }
    
    .cujilaps-estimate-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #cccccc !important;
    }
    
    .cujilaps-consultation-title {
        font-size: 14pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin: 0 !important;
    }
    
    .cujilaps-estimate-badge {
        background: #f0f0f0 !important;
        color: #000000 !important;
        padding: 4px 10px !important;
        border-radius: 3px !important;
        font-size: 9pt !important;
        font-weight: bold !important;
    }
    
    .cujilaps-estimate-content {
        display: block !important;
    }
    
    .cujilaps-estimate-main {
        background: #f8f8f8 !important;
        border: 1px solid #dddddd !important;
        padding: 20px !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    .cujilaps-estimate-label {
        font-size: 10pt !important;
        color: #000000 !important;
        margin-bottom: 8px !important;
    }
    
    .cujilaps-estimate-amount {
        font-size: 20pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin: 10px 0 !important;
    }
    
    .cujilaps-estimate-unit {
        font-size: 12pt !important;
        color: #000000 !important;
    }
    
    .cujilaps-estimate-details {
        margin-top: 10px !important;
    }
    
    .cujilaps-estimate-detail-item {
        background: #f8f8f8 !important;
        border: none !important;
        border-left: 3px solid #666666 !important;
        padding: 8px 12px !important;
        margin: 8px 0 !important;
    }
    
    .cujilaps-estimate-detail-text {
        font-size: 9pt !important;
        color: #000000 !important;
    }
    
    /* 改修料金の目安セクションのタイトル */
    .cujilaps-consultation-section h2,
    .cujilaps-consultation-section .cujilaps-consultation-title {
        font-size: 14pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 15px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #cccccc !important;
    }
    
    /* タブコンテンツの装飾を削除 */
    .cujilaps-tab-content {
        background: transparent !important;
        border: none !important;
        padding: 10px 0 !important;
    }
    
    /* 改善項目リストをシンプルに */
    .cujilaps-recommendations-list,
    .cujilaps-improvements-list {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 15px 0 !important;
    }
    
    .cujilaps-recommendations-list li,
    .cujilaps-improvements-list li {
        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-left: 4px solid #666666 !important;
        padding: 12px !important;
        margin: 10px 0 !important;
        page-break-inside: avoid !important;
    }
    
    /* すぐにできる改善ポイントのセクション */
    .cujilaps-quick-improvements-section {
        margin: 20px 0 !important;
        page-break-inside: avoid !important;
    }
    
    .cujilaps-quick-improvements-title {
        font-size: 14pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 15px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #cccccc !important;
    }
    
    .cujilaps-improvement-item {
        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-left: 4px solid #666666 !important;
        padding: 15px !important;
        margin: 15px 0 !important;
        page-break-inside: avoid !important;
    }
    
    .cujilaps-improvement-title {
        font-size: 12pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 10px !important;
    }
    
    .cujilaps-improvement-label {
        display: inline-block !important;
        padding: 2px 8px !important;
        border-radius: 3px !important;
        font-size: 9pt !important;
        font-weight: bold !important;
        margin-right: 8px !important;
        background: #f0f0f0 !important;
        color: #000000 !important;
    }
    
    .cujilaps-improvement-label.high,
    .cujilaps-improvement-label.critical {
        background: #ff4136 !important;
        color: #ffffff !important;
    }
    
    .cujilaps-improvement-label.medium {
        background: #ffdc00 !important;
        color: #000000 !important;
    }
    
    .cujilaps-improvement-label.low {
        background: #87ceeb !important;
        color: #000000 !important;
    }
    
    .cujilaps-improvement-content {
        font-size: 11pt !important;
        color: #000000 !important;
        line-height: 1.6 !important;
    }
    
    .cujilaps-improvement-section {
        margin: 12px 0 !important;
    }
    
    .cujilaps-improvement-section-title {
        font-size: 11pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 5px !important;
    }
    
    /* コンテンツ分析結果の表示 */
    .cujilaps-content-analysis-section {
        margin: 20px 0 !important;
        page-break-inside: avoid !important;
    }
    
    .cujilaps-content-analysis-title {
        font-size: 14pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 15px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #cccccc !important;
    }
    
    .cujilaps-content-summary {
        background: #f8f8f8 !important;
        border: 1px solid #dddddd !important;
        border-left: 4px solid #666666 !important;
        padding: 15px !important;
        margin: 15px 0 !important;
        font-size: 11pt !important;
        color: #000000 !important;
        line-height: 1.6 !important;
    }
    
    /* ブロッキングファクターの表示 */
    .cujilaps-blocking-factors-section {
        margin: 20px 0 !important;
        page-break-inside: avoid !important;
    }
    
    .cujilaps-blocking-factors-title {
        font-size: 14pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 15px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #cccccc !important;
    }
    
    .cujilaps-blocking-factor-item {
        background: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-left: 4px solid #666666 !important;
        padding: 12px !important;
        margin: 10px 0 !important;
        page-break-inside: avoid !important;
    }
    
    .cujilaps-blocking-factor-number {
        font-size: 12pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 5px !important;
    }
    
    .cujilaps-blocking-factor-title {
        font-size: 12pt !important;
        font-weight: bold !important;
        color: #000000 !important;
        margin-bottom: 8px !important;
    }
    
    .cujilaps-blocking-factor-impact {
        font-size: 10pt !important;
        color: #666666 !important;
        margin-bottom: 5px !important;
    }
    
    .cujilaps-blocking-factor-solution {
        font-size: 10pt !important;
        color: #000000 !important;
        margin-top: 8px !important;
        padding-left: 15px !important;
        border-left: 2px solid #cccccc !important;
    }
    
    /* チャートやグラフを非表示（データのみ表示） */
    canvas,
    .cujilaps-chart-container {
        display: none !important;
    }
    
    /* 装飾的な背景やグラデーションを削除 */
    .cujilaps-report-container * {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-radius: 0 !important;
    }
    
    /* テキストの装飾を削除 */
    .cujilaps-report-container * {
        font-weight: normal !important;
    }
    
    .cujilaps-report-container h1,
    .cujilaps-report-container h2,
    .cujilaps-report-container h3,
    .cujilaps-report-container h4,
    .cujilaps-report-container h5,
    .cujilaps-report-container h6 {
        font-weight: bold !important;
    }
    
    /* 余白を最小限に */
    .cujilaps-report-container {
        padding: 15px !important;
        margin: 0 !important;
    }
    
    .cujilaps-report-container > * {
        margin: 10px 0 !important;
    }
    
    /* 見出しの余白を調整 */
    .cujilaps-report-container h1 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }
    
    .cujilaps-report-container h2 {
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .cujilaps-report-container h3 {
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }
    
    /* パラグラフの余白を調整 */
    .cujilaps-report-container p {
        margin: 8px 0 !important;
    }
}

/* 改修料金の目安セクション（黒背景最適化） */
.cujilaps-consultation-section {
    margin: 30px 0;
}

.cujilaps-result-view .cujilaps-consultation-card {
    background: rgba(0, 31, 63, 0.9) !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.cujilaps-consultation-card {
    background: rgba(0, 31, 63, 0.9) !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.cujilaps-consultation-card:hover {
    box-shadow: 0 8px 30px rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
    border-color: rgba(0, 255, 255, 0.5) !important;
}

.cujilaps-estimate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.3);
}

.cujilaps-consultation-title {
    font-size: 24px;
    font-weight: 700;
    color: #00ffff !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cujilaps-estimate-badge {
    background: linear-gradient(135deg, #00ffff 0%, #00cccc 100%);
    color: #001f3f;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.5);
}

.cujilaps-estimate-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.cujilaps-result-view .cujilaps-estimate-main {
    background: rgba(0, 31, 63, 0.7) !important;
    border: 2px solid #00ffff !important;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    /* 他の要素の影響を完全に遮断 */
    isolation: isolate !important;
    transform-style: flat !important;
    contain: layout style paint !important;
    /* transformの競合を防ぐ - 完全にリセット */
    transform: translateX(0) translateY(0) translateZ(0) rotate(0deg) scale(1) !important;
}

.cujilaps-estimate-main {
    background: rgba(0, 31, 63, 0.7) !important;
    border: 2px solid #00ffff !important;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    /* 他の要素の影響を完全に遮断 */
    isolation: isolate !important;
    transform-style: flat !important;
    contain: layout style paint !important;
    /* transformの競合を防ぐ - 完全にリセット */
    transform: translateX(0) translateY(0) translateZ(0) rotate(0deg) scale(1) !important;
}

.cujilaps-estimate-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00ffff 0%, #00cccc 50%, #00ffff 100%);
    animation: shimmer 2s infinite;
    /* 他の要素の影響を完全に遮断 */
    isolation: isolate !important;
    transform-style: flat !important;
    contain: layout style paint !important;
    /* transformの競合を防ぐ */
    transform-origin: 0 0 !important;
    will-change: transform !important;
    /* 親要素からのtransform継承を完全に防ぐ - translateXのみ使用 */
    transform: translateX(-100%) translateY(0) translateZ(0) rotate(0deg) scale(1) !important;
    /* 回転やスケールを完全に無効化（個別プロパティは未対応ブラウザがあるためtransformで指定） */
}

@keyframes shimmer {
    0% { 
        transform: translateX(-100%) translateY(0) translateZ(0) rotate(0deg) scale(1) !important;
    }
    100% { 
        transform: translateX(100%) translateY(0) translateZ(0) rotate(0deg) scale(1) !important;
    }
}

.cujilaps-estimate-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 15px;
    font-weight: 500;
}

.cujilaps-estimate-amount {
    font-size: 48px;
    font-weight: 700;
    color: #00ffff !important;
    line-height: 1;
    display: inline-block;
    margin-right: 8px;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

.cujilaps-estimate-unit {
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
    display: inline-block;
}

.cujilaps-estimate-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cujilaps-estimate-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 31, 63, 0.5) !important;
    border-radius: 8px;
    border-left: 3px solid #00ffff;
}

.cujilaps-estimate-detail-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.cujilaps-estimate-detail-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .cujilaps-estimate-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .cujilaps-estimate-amount {
        font-size: 36px;
    }
    
    .cujilaps-estimate-unit {
        font-size: 20px;
    }
    
    .cujilaps-consultation-card {
        padding: 20px;
    }
}