/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fredoka', 'Comfortaa', 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, #E6F3FF 0%, #F0E6FF 25%, #FFE6F0 50%, #E6FFFA 75%, #FFF0E6 100%);
    background-size: 400% 400%;
    animation: gradientShift 25s ease-in-out infinite;
    position: relative;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Lock body scroll when mobile nav is open (modern browsers) */
body:has(.mobile-nav-open) { overflow: hidden; }

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}





body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Y2K 3Dグリッド背景 */
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, 0.1) 25%, rgba(0, 255, 255, 0.1) 26%, transparent 27%, transparent 74%, rgba(255, 0, 255, 0.1) 75%, rgba(255, 0, 255, 0.1) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 0, 0.1) 25%, rgba(255, 255, 0, 0.1) 26%, transparent 27%, transparent 74%, rgba(0, 255, 0, 0.1) 75%, rgba(0, 255, 0, 0.1) 76%, transparent 77%, transparent),
        radial-gradient(circle at 20% 80%, rgba(255, 0, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.2) 0%, transparent 50%);
    background-size: 75px 75px, 75px 75px, 100% 100%, 100% 100%;
    animation: y2kGrid 20s linear infinite;
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
}

/* Y2K グリッドアニメーション */
@keyframes y2kGrid {
    0% {
        background-position: 0px 0px, 0px 0px, 0% 50%, 100% 50%;
        opacity: 0.6;
    }
    25% {
        background-position: 25px 25px, -25px 25px, 25% 75%, 75% 25%;
        opacity: 0.4;
    }
    50% {
        background-position: 50px 50px, -50px 50px, 50% 100%, 50% 0%;
        opacity: 0.8;
    }
    75% {
        background-position: 75px 25px, -25px 75px, 75% 25%, 25% 75%;
        opacity: 0.3;
    }
    100% {
        background-position: 0px 0px, 0px 0px, 0% 50%, 100% 50%;
        opacity: 0.6;
    }
}

/* ホログラム効果 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(45deg,
            transparent 30%,
            rgba(255, 0, 255, 0.03) 31%,
            rgba(255, 0, 255, 0.05) 32%,
            transparent 33%),
        linear-gradient(-45deg,
            transparent 60%,
            rgba(0, 255, 255, 0.03) 61%,
            rgba(0, 255, 255, 0.05) 62%,
            transparent 63%);
    animation: hologramScan 8s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes hologramScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* メタリックシマーアニメーション */
@keyframes metalShimmer {
    0% {
        background-position: 0% 50%;
        box-shadow:
            0 8px 0px #333,
            0 12px 0px #666,
            0 16px 30px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(255, 0, 255, 0.6),
            0 0 40px rgba(0, 255, 255, 0.4),
            inset 0 2px 0 rgba(255, 255, 255, 0.9),
            inset 0 -2px 0 rgba(0, 0, 0, 0.3);
    }
    50% {
        background-position: 100% 50%;
        box-shadow:
            0 6px 0px #444,
            0 10px 0px #777,
            0 14px 25px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(0, 255, 255, 0.8),
            0 0 50px rgba(255, 255, 0, 0.5),
            inset 0 3px 0 rgba(255, 255, 255, 1),
            inset 0 -3px 0 rgba(0, 0, 0, 0.4);
    }
    100% {
        background-position: 0% 50%;
        box-shadow:
            0 8px 0px #333,
            0 12px 0px #666,
            0 16px 30px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(255, 0, 255, 0.6),
            0 0 40px rgba(0, 255, 255, 0.4),
            inset 0 2px 0 rgba(255, 255, 255, 0.9),
            inset 0 -2px 0 rgba(0, 0, 0, 0.3);
    }
}

@keyframes sparkleFloat {
    0% { transform: translateY(100vh) rotate(0deg); }
    100% { transform: translateY(-100vh) rotate(360deg); }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(220, 220, 220, 0.6);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.logo-text {
    font-family: 'Bungee', 'Fredoka', 'Noto Sans JP', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #ff6b9d;
    text-shadow:
        2px 2px 0px #fff,
        3px 3px 0px #ddd,
        0px 0px 12px rgba(255, 107, 157, 0.5),
        0px 0px 20px rgba(78, 205, 196, 0.3);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.logo-text:hover {
    color: #e55a8a;
    text-shadow:
        2px 2px 0px #fff,
        3px 3px 0px #ddd,
        0px 0px 15px rgba(229, 90, 138, 0.6),
        0px 0px 25px rgba(78, 205, 196, 0.4);
}


.logo-katakana {
    font-family: 'Bungee', cursive;
    font-size: 0.7em;
    font-weight: 400;
    color: #4ecdc4;
    text-shadow:
        1px 1px 0px #fff,
        0px 0px 8px rgba(78, 205, 196, 0.4);
    margin-left: 8px;
    display: inline-block;
    transform: skew(-5deg);
    transition: all 0.3s ease;
}

.logo-text:hover .logo-katakana {
    color: #3bb3b6;
    text-shadow:
        1px 1px 0px #fff,
        0px 0px 12px rgba(59, 179, 182, 0.5);
}

.logo-text::after {
    content: '✨';
    position: absolute;
    top: -5px;
    right: -15px;
    font-size: 0.8em;
    animation: sparkle 2s ease-in-out infinite;
}


.nav {
    display: flex;
    gap: 30px;
}

.nav-link {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 600;
    font-family: 'Fredoka', sans-serif;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(200, 200, 200, 0.6);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.85);
    text-shadow: none;
}

.nav-link:focus-visible {
    outline: 3px solid #4ecdc4;
    outline-offset: 3px;
}

.nav-link:hover {
    color: #2c3e50;
    background: rgba(240, 240, 240, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    border-color: rgba(180, 180, 180, 0.8);
}

/* LINEカラーのCTAボタン */
.line-cta-btn {
    background: #00B900 !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
}

.line-cta-btn:hover {
    background: #00A000 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 185, 0, 0.3) !important;
    transform: translateY(-2px) !important;
    border: none !important;
}

/* ナビリンクのアフター要素を削除（派手すぎるため） */

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg,
        rgba(255, 182, 193, 0.85) 0%,
        rgba(221, 160, 221, 0.8) 25%,
        rgba(135, 206, 235, 0.8) 50%,
        rgba(255, 228, 225, 0.8) 75%,
        rgba(255, 239, 213, 0.85) 100%);
    background-size: 400% 400%;
    animation: gradientShift 25s ease-in-out infinite;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(8px);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 255, 255, 0.3) 0%, transparent 50%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 5px,
            rgba(255, 255, 255, 0.1) 5px,
            rgba(255, 255, 255, 0.1) 10px
        );
    animation: retroMove 30s linear infinite;
}

@keyframes retroMove {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}


.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text { max-width: 95%; }

.hero-title {
    font-family: 'Orbitron', 'Space Grotesk', 'Bungee', monospace !important;
    font-size: clamp(4rem, 15vw, 6rem) !important;
    font-weight: 900 !important;
    line-height: 1.25;
    margin-bottom: 24px;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: pre-line;
    position: relative;
    padding: 10px 40px 20px 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: white !important;
    -webkit-text-fill-color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-shadow:
        3px 3px 0px #333,
        6px 6px 0px #666,
        9px 9px 0px #999,
        0px 0px 10px rgba(255, 0, 255, 0.8),
        0px 0px 20px rgba(0, 255, 255, 0.6),
        0px 0px 30px rgba(255, 255, 0, 0.5),
        0px 0px 40px rgba(255, 0, 255, 0.4),
        0px 0px 60px rgba(0, 255, 255, 0.3) !important;
    z-index: 1;
}

.hero-title .title-small {
    font-size: 0.6em;
    display: block;
    margin-bottom: 0.2em;
}

.hero-title .title-large {
    font-size: 1em;
    display: block;
}

.hero-title.section-title::before {
    content: '' !important;
    position: absolute !important;
    top: -5px !important;
    left: 0px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg,
        #ffaaff 0%,
        #aaffff 20%,
        #ffffaa 40%,
        #ffccaa 60%,
        #ffaaff 80%,
        #aaccff 100%) !important;
    background-size: 300% 300% !important;
    animation: gradientShift 25s ease-in-out infinite !important;
    /* チャットバルーン風の角丸 - 左下完全直角 */
    border-radius: 120px 120px 0px 120px !important;
    z-index: -2 !important;
    /* section-titleのスター表示を無効化 */
    color: transparent !important;
    font-size: 0 !important;
    transform: none !important;
}


/* 内側の背景 */
.hero-title.section-title::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -20px !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        rgba(255, 107, 157, 0.1),
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0, 255, 255, 0.1) 0%, transparent 50%) !important;
    animation: gradientShift 30s ease-in-out infinite reverse !important;
    /* チャットバルーン風の角丸 - 左下完全直角 */
    border-radius: 115px 115px 0px 115px !important;
    z-index: -1 !important;
    backdrop-filter: blur(8px) !important;
    /* section-titleの星を無効化 */
    font-size: 0 !important;
    color: transparent !important;
    transform: none !important;
}

/* ヒーローホバー効果削除 - section-titleのスタイルを使用 */

/* ヒーロー専用のbefore要素削除 - section-titleのスタイルを使用 */


.hero-title::after {
    content: '✨';
    position: absolute;
    top: -10px;
    left: -40px;
    font-size: 0.5em;
    animation: sparkle 2s ease-in-out infinite;
    animation-delay: 1s;
}


@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}


.hero-description {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 32px;
    line-height: 1.8;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 25px 30px;
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.hero-description::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: 20px;
    pointer-events: none;
}

/* Mobile line breaks - hide on desktop */
.mobile-br {
    display: none;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 25px rgba(135, 206, 235, 0.3);
    gap: 10px;
}

.btn-primary {
    /* LINE公式カラー */
    background: #06c755;
    background-size: 100% 100%;
    animation: none;
    color: #fff;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 1px;
    text-shadow: none;
    box-shadow:
        0 4px 0px #05a345,
        0 8px 0px #048f39,
        0 12px 20px rgba(6, 199, 85, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    border: none;
    transform: none;
    transition: all 0.2s ease;
    position: relative;
}

/* LINEボタンはシンプルに、キラキラエフェクト削除 */

.btn-primary:hover {
    background: #05b84b;
    transform: translateY(-2px);
    box-shadow:
        0 6px 0px #05a345,
        0 10px 0px #048f39,
        0 16px 25px rgba(6, 199, 85, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: #2c3e50;
    font-weight: 700;
    border: 3px solid #87CEEB;
    backdrop-filter: blur(20px);
    text-shadow: none;
    box-shadow:
        0 6px 15px rgba(135, 206, 235, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.btn-secondary::before {
    content: '💖';
    position: absolute;
    left: 10px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

.btn-secondary:hover {
    background: linear-gradient(45deg, rgba(135, 206, 235, 0.8), rgba(255, 192, 203, 0.7));
    color: white;
    transform: translateY(-4px) scale(1.08);
    box-shadow:
        0 10px 25px rgba(135, 206, 235, 0.4),
        0 0 30px rgba(255, 192, 203, 0.3),
        inset 0 3px 0 rgba(255, 255, 255, 0.6);
}

.line-btn-img {
    height: 40px;
    border-radius: 25px;
}


.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: -400px;
}

.penguin-hero {
    width: 280px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
    margin-top: 100px;
    margin-left: -50px;
    transform: rotate(-15deg);
}

.phone-mockup {
    position: absolute;
    right: -50px;
    top: 50px;
    width: 280px;
    height: 500px;
    background: linear-gradient(145deg, #1a1a2e, #16213e, #0f3460);
    border-radius: 20px;
    padding: 8px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    box-shadow:
        0 20px 60px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #f0f4f8;
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 255, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
}

.phone-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(0, 255, 255, 0.1) 1px,
            rgba(0, 255, 255, 0.1) 2px
        );
    pointer-events: none;
}

.chat-demo {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    padding-bottom: 10px;
}

.chat-footer {
    background: white;
    border-top: 1px solid #e0e0e0;
    padding: 8px;
    margin: 0 -12px -12px -12px;
    border-radius: 0 0 12px 12px;
}

.footer-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.footer-btn {
    background: none;
    border: none;
    font-size: 20px;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.7;
}

.footer-btn:hover {
    background: #f0f0f0;
    opacity: 1;
}

.message-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-input {
    flex: 1;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    color: #999;
}

.send-btn {
    background: none;
    border: none;
    font-size: 18px;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.7;
}

.send-btn:hover {
    opacity: 1;
}

.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-message.user {
    justify-content: flex-end;
}

.chat-message.user span {
    background: #06c755;
    color: white;
    padding: 10px 15px;
    border-radius: 15px 15px 0px 15px;
    max-width: 80%;
}

.chat-message.bot span {
    background: white;
    color: #333;
    padding: 10px 15px;
    border-radius: 15px 15px 15px 0px;
    max-width: 80%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chat-penguin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.food-image {
    font-size: 2rem;
    text-align: center;
}

/* Character Section */
.character {
    padding: 100px 0;
    background: linear-gradient(135deg,
        rgba(248, 244, 255, 0.95) 0%,
        rgba(255, 245, 248, 0.9) 50%,
        rgba(240, 248, 255, 0.95) 100%);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.character::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sparkles" patternUnits="userSpaceOnUse" width="30" height="30"><text x="8" y="12" text-anchor="middle" fill="%23FFC0CB" opacity="0.15" font-size="10">✨</text><text x="22" y="25" text-anchor="middle" fill="%2387CEEB" opacity="0.12" font-size="8">🌟</text></pattern></defs><rect width="100" height="100" fill="url(%23sparkles)"/></svg>');
    animation: float 30s ease-in-out infinite;
}

.character::after {
    content: '💫';
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 1.5rem;
    animation: sparkle 4s ease-in-out infinite;
    opacity: 0.6;
}

.character-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.character-image {
    position: relative;
    text-align: center;
}

.penguin-main {
    width: 300px;
    height: auto;
    filter: drop-shadow(0 15px 35px rgba(255, 107, 157, 0.3));
    animation: bounce 4s ease-in-out infinite;
    position: relative;
    z-index: 3;
}

.penguin-extra {
    position: absolute;
    width: 120px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(135, 206, 235, 0.3));
    animation: bounce 6s ease-in-out infinite;
    z-index: 2;
}

.penguin-walk {
    top: 30px;
    left: -50px;
    animation-delay: -1s;
}

.penguin-sit {
    bottom: 20px;
    right: -40px;
    animation-delay: -3s;
}

.sparkles {
    position: absolute;
    font-size: 2rem;
    animation: sparkle 2s ease-in-out infinite;
}

.sparkles:nth-child(2) {
    top: 20%;
    left: 10%;
    animation-delay: 0.5s;
}

.sparkles:nth-child(3) {
    top: 30%;
    right: 15%;
    animation-delay: 1s;
}

.sparkles:nth-child(4) {
    bottom: 20%;
    left: 20%;
    animation-delay: 1.5s;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

/* Y2Kワードアート用のアニメーション - 控えめ版 */
@keyframes wordArtShimmer {
    0% {
        background-position: 0% 50%;
        filter: drop-shadow(2px 2px 0px #666)
                drop-shadow(4px 4px 0px #888)
                drop-shadow(0px 0px 8px rgba(200, 100, 200, 0.3))
                drop-shadow(0px 0px 15px rgba(100, 200, 200, 0.2));
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(2px 2px 0px #777)
                drop-shadow(4px 4px 0px #999)
                drop-shadow(0px 0px 10px rgba(150, 150, 200, 0.4))
                drop-shadow(0px 0px 18px rgba(150, 200, 150, 0.3));
    }
    100% {
        background-position: 0% 50%;
        filter: drop-shadow(2px 2px 0px #666)
                drop-shadow(4px 4px 0px #888)
                drop-shadow(0px 0px 8px rgba(200, 100, 200, 0.3))
                drop-shadow(0px 0px 15px rgba(100, 200, 200, 0.2));
    }
}

.character-card {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 244, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.95) 100%);
    border-radius: 20px;
    padding: 40px;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff6600) 1;
    backdrop-filter: blur(20px);
    box-shadow:
        0 15px 40px rgba(255, 0, 255, 0.3),
        0 0 25px rgba(0, 255, 255, 0.2),
        0 0 50px rgba(255, 255, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
}

.character-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 25px 50px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.3),
        0 0 80px rgba(255, 255, 0, 0.2),
        inset 0 3px 0 rgba(255, 255, 255, 0.9);
}

.character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #ff6600);
    background-size: 400% 400%;
    animation: wordArtShimmer 3s ease-in-out infinite;
}

.character-card::after {
    content: '🎀';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    animation: float 3s ease-in-out infinite;
    text-shadow: 2px 2px 4px rgba(255, 192, 203, 0.3);
}

.character-name {
    font-family: 'Bungee', 'Fredoka', 'Noto Sans JP', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 2px;
    color: #4169E1;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    position: relative;
}


.character-name::before {
    content: '💜';
    position: absolute;
    top: -20px;
    left: -30px;
    font-size: 0.4em;
    animation: float 4s ease-in-out infinite;
}

.character-name::after {
    content: '💜';
    position: absolute;
    top: -20px;
    right: -30px;
    font-size: 0.4em;
    animation: float 4s ease-in-out infinite;
    animation-delay: 2s;
}

.character-details {
    margin-bottom: 30px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 107, 157, 0.1);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 600;
    color: #2c3e50;
    font-size: 1.1rem;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.detail-value {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    color: #d63384;
    font-size: 1.1rem;
    position: relative;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.detail-value::after {
    content: '✨';
    margin-left: 5px;
    font-size: 0.8em;
    animation: sparkle 2s ease-in-out infinite;
}

.character-dream {
    background: linear-gradient(135deg, #fff5f8, #f8f4ff);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 4px solid #ff6b9d;
}

.dream-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
}

.dream-title::before {
    content: '🌙';
    margin-right: 8px;
}

.dream-title::after {
    content: '🌙';
    margin-left: 8px;
}

.dream-text {
    color: #34495e;
    line-height: 1.8;
    font-size: 1rem;
    font-style: italic;
}

.character-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message-bubble {
    background: linear-gradient(135deg, #ff9bb5, #ffc1cc);
    color: #2c3e50;
    padding: 12px 20px;
    border-radius: 25px;
    margin-left: auto;
    max-width: 80%;
    position: relative;
    animation: messageFloat 3s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(255, 155, 181, 0.3);
    text-shadow: none;
}

.message-bubble:nth-child(2) {
    animation-delay: 1s;
    margin-left: 0;
    margin-right: auto;
    background: linear-gradient(135deg, #b8e6ff, #e1f5fe);
    box-shadow: 0 4px 15px rgba(184, 230, 255, 0.3);
}

.message-bubble:nth-child(3) {
    animation-delay: 2s;
    background: linear-gradient(135deg, #d4b5ff, #e8d5ff);
    box-shadow: 0 4px 15px rgba(212, 181, 255, 0.3);
}

.message-bubble p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

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

/* Features Section */
.features {
    padding: 100px 0;
    background: linear-gradient(135deg,
        rgba(255, 240, 245, 0.9) 0%,
        rgba(240, 248, 255, 0.95) 50%,
        rgba(255, 228, 225, 0.9) 100%);
    position: relative;
}

.features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(255, 105, 180, 0.08) 3px,
            rgba(255, 105, 180, 0.08) 6px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(135, 206, 235, 0.08) 3px,
            rgba(135, 206, 235, 0.08) 6px
        );
    pointer-events: none;
}

.section-title {
    text-align: center;
    font-family: 'Bungee', 'Fredoka', 'Noto Sans JP', sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    margin-bottom: 60px;
    /* Y2K ワードアートスタイル - パステル調 */
    background: linear-gradient(45deg,
        #ffaaff 0%,
        #aaffff 20%,
        #ffffaa 40%,
        #ffccaa 60%,
        #ffaaff 80%,
        #aaccff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: wordArtShimmer 10s ease-in-out infinite;
    /* 控えめな3D効果 */
    filter: drop-shadow(1px 1px 0px #777)
            drop-shadow(2px 2px 0px #999)
            drop-shadow(0px 0px 6px rgba(180, 120, 180, 0.3))
            drop-shadow(0px 0px 12px rgba(120, 180, 180, 0.2));
    letter-spacing: 3px;
    text-transform: uppercase;
    transform: perspective(300px) rotateX(10deg);
    position: relative;
}


.section-title::before {
    content: '★';
    position: absolute;
    top: -15px;
    left: 20%;
    font-size: 0.4em;
    color: #FFC0CB;
    animation: twinkle 3s ease-in-out infinite;
}

.section-title::after {
    content: '★';
    position: absolute;
    top: -15px;
    right: 20%;
    font-size: 0.4em;
    color: #87CEEB;
    animation: twinkle 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px 25px;
    border-radius: 25px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: 25px;
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.feature-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
    transition: all 0.3s ease;
}

.feature-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.15) 100%);
    border-radius: 50%;
    pointer-events: none;
}

.feature-card:hover .feature-icon {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.penguin-icon {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 8px rgba(135, 206, 235, 0.3));
}

.feature-title {
    font-family: 'Bungee', 'Fredoka', 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

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

.feature-description {
    color: #2c3e50;
    line-height: 1.7;
    font-weight: 400;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

/* How to Use Section */
.how-to-use {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f4ff 0%, #fff5f8 100%);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.step {
    text-align: center;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 35px 30px;
    border-radius: 25px;
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease-out;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: 25px;
    pointer-events: none;
}

.step:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    color: #2c3e50;
    font-size: 1.6rem;
    font-weight: 800;
    border-radius: 50%;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
    transition: all 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.step-number::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.15) 100%);
    border-radius: 50%;
    pointer-events: none;
}

.step:hover .step-number {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.step-title {
    font-family: 'Bungee', 'Fredoka', 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.step-description {
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}

.step-image {
    width: 80px;
    height: 80px;
    margin: 20px auto;
    border-radius: 50%;
}

.chat-example {
    margin: 20px 0;
}

.chat-bubble {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 20px;
    margin: 5px;
}

.chat-bubble.user {
    background: #ff6b9d;
    color: white;
    border-radius: 20px 20px 5px 20px;
}

.chat-bubble.bot {
    background: #f0f0f0;
    color: #333;
    border-radius: 20px 20px 20px 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-penguin-small {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.dashboard-preview {
    background: white;
    border-radius: 15px;
    padding: 20px;
    margin: 20px auto;
    width: 200px;
    height: 120px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.chart-mockup {
    width: 100%;
    height: 60px;
    background: linear-gradient(135deg, #ff6b9d20, #4ecdc420);
    border-radius: 10px;
}

.dashboard-penguin {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
}

/* Testimonials */
.testimonials {
    padding: 100px 0;
    background: white;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.testimonial-card {
    background: linear-gradient(135deg, #f8f4ff, #fff5f8);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 107, 157, 0.1);
}

.testimonial-content p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
}

.author-name {
    font-weight: 600;
    color: #ff6b9d;
}

/* Download Section */
.download {
    padding: 100px 0;
    background: linear-gradient(135deg, #ff6b9d, #4ecdc4);
    color: white;
}

.download-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

    font-family: 'Bungee', 'Fredoka', 'Noto Sans JP', sans-serif;
.download-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.download-description {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.7;
    opacity: 0.9;
}

.download-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
}

.download-feature {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-download {
    background: white;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 25px;
    overflow: hidden;
}

.penguin-download {
    width: 300px;
    height: auto;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.2));
}

/* Footer */
.footer {
    background: #333;
    color: white;
    padding: 60px 0 30px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.footer-links {
    display: flex;
    gap: 30px;
}

.footer-link {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ff6b9d;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #555;
    color: #ccc;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .mobile-br {
        display: inline;
    }

    .header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding: 15px 20px;
    }

    .nav {
        margin-top: 0;
        gap: 20px;
    }

    .hero {
        padding: 100px 0 150px;
        margin-bottom: 0px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-title {
        font-size: clamp(4rem, 15vw, 9rem) !important;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hero-image {
        position: relative !important;
        top: auto !important;
        margin-top: -60px !important;
    }

    .phone-mockup {
        position: static;
        margin-top: 20px;
        width: 250px;
        height: 450px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .character-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .penguin-main {
        width: 200px;
    }

    .penguin-extra {
        width: 80px;
    }

    .penguin-walk {
        top: 10px;
        left: 10px;
    }

    .penguin-sit {
        bottom: 10px;
        right: 10px;
    }

    .character-card {
        margin-top: 20px;
        padding: 30px 20px;
    }

    .character-name {
        font-size: 2rem;
    }

    .download-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

/* Mobile menu button */
.mobile-menu-btn {
    font-size: 1.5rem;
    line-height: 1;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}
.mobile-menu-btn:focus-visible { outline: 3px solid #4ecdc4; outline-offset: 3px; border-radius: 6px; }

@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(3rem, 12vw, 7rem) !important;
    }

    .section-title {
        font-size: 2rem;
    }

    .download-title {
        font-size: 2rem;
    }

    .penguin-hero,
    .penguin-download {
        width: 200px;
    }
}

/* Y2K Animations */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(-2deg);
    }
    50% {
        transform: translateY(-10px) rotate(0deg);
    }
    75% {
        transform: translateY(-15px) rotate(2deg);
    }
}

.penguin-hero,
.penguin-download {
    animation: bounce 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.3));
}

/* 漂うペンギンのスタイル削除 */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

@keyframes glitch {
    0% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

@keyframes softGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(135, 206, 235, 0.4);
    }
}

@keyframes heroDescGlow {
    0% {
        box-shadow:
            0 8px 25px rgba(255, 107, 157, 0.2),
            0 0 20px rgba(135, 206, 235, 0.1);
        border-color: rgba(255, 107, 157, 0.3);
    }
    50% {
        box-shadow:
            0 12px 35px rgba(255, 107, 157, 0.4),
            0 0 30px rgba(135, 206, 235, 0.3),
            0 0 40px rgba(255, 215, 0, 0.2);
        border-color: rgba(255, 107, 157, 0.6);
    }
    100% {
        box-shadow:
            0 8px 25px rgba(255, 107, 157, 0.2),
            0 0 20px rgba(135, 206, 235, 0.1);
        border-color: rgba(255, 107, 157, 0.3);
    }
}


.feature-card,
.testimonial-card,
.step {
    animation: fadeInUp 0.8s ease-out, softGlow 4s ease-in-out infinite;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hero-image { transform: none !important; }
}


/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff6b9d, #4ecdc4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}
/* Override: remove highlight pill background and keep cute accent */

/* ヒーロータイトルの色オーバーライドを削除 - section-titleの色を使用 */