@font-face {
    font-family: "Mamelon";
    src: url("../fonts/Mamelon-5-Hi-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════
           RESET & BASE
        ══════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
    overflow-x: hidden;
}
body {
    font-family: "Mamelon", "Noto Sans JP", sans-serif;
    background: linear-gradient(
        to bottom,
        #dff0fc 0%,
        #edf8ff 12%,
        #f5fbff 22%,
        #eaf6f0 38%,
        #f8f5ff 58%,
        #fff5f0 76%,
        #fef8ff 88%,
        #eef6ff 100%
    );
    background-attachment: fixed;
    color: #3a2d45;
    overflow-x: hidden;
    line-height: 1.8;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    text-decoration: none;
    color: inherit;
}

/* ══════════════════════════════════════
           DESIGN TOKENS
        ══════════════════════════════════════ */
:root {
    --blue: #66c1ff;
    --yellow: #ffd580;
    --mint: #9adfb6;
    --sky: #b0dcff;
    --lemon: #ffe8a8;
    --cream: #fffdf5;
    --text: #3a2d45;
    --text-sub: #6b6075;
    --r: 20px;
    --r-xl: 40px;
    --r-pill: 999px;
    --shadow-b: 0 8px 40px rgba(102, 193, 255, 0.18);
    --shadow-y: 0 8px 40px rgba(255, 213, 128, 0.22);
}

/* ══════════════════════════════════════
           MAGICAL BACKGROUND
        ══════════════════════════════════════ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(
            ellipse 80% 60% at 15% 10%,
            rgba(102, 193, 255, 0.14) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 50% at 85% 20%,
            rgba(255, 213, 128, 0.13) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 70% 55% at 50% 80%,
            rgba(102, 193, 255, 0.1) 0%,
            transparent 60%
        ),
        linear-gradient(
            160deg,
            #ffffff 0%,
            #f0f9ff 40%,
            #fffdf0 70%,
            #f5faff 100%
        );
}

/* ══════════════════════════════════════
           ANIMATIONS
        ══════════════════════════════════════ */
@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-14px) rotate(-3deg);
    }
    66% {
        transform: translateY(-7px) rotate(3deg);
    }
}
@keyframes float-alt {
    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }
    50% {
        transform: translateY(-18px) rotate(-2deg);
    }
}
@keyframes twinkle {
    0%,
    100% {
        opacity: 0.1;
        transform: scale(0.4) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}
@keyframes sparkle-drift {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-120px) translateX(var(--drift, 20px)) scale(1);
        opacity: 0;
    }
}
@keyframes rainbow-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes magical-glow {
    0%,
    100% {
        box-shadow:
            0 0 20px rgba(102, 193, 255, 0.45),
            0 0 40px rgba(255, 213, 128, 0.2);
    }
    50% {
        box-shadow:
            0 0 32px rgba(255, 213, 128, 0.5),
            0 0 64px rgba(102, 193, 255, 0.25);
    }
}
@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    60% {
        transform: translateY(-8px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes heart-beat {
    0%,
    100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(0.95);
    }
    75% {
        transform: scale(1.1);
    }
}
@keyframes spin-star {
    to {
        transform: rotate(360deg);
    }
}
@keyframes blinkB {
    0%,
    49% {
        opacity: 0;
    }
    50%,
    100% {
        opacity: 1;
    }
}
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes shimmer-text {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}
@keyframes border-spin {
    to {
        --angle: 360deg;
    }
}

.blink-b {
    animation: blinkB 2s step-end infinite;
}

/* ══════════════════════════════════════
           SCROLL REVEAL
        ══════════════════════════════════════ */
.reveal,
.reveal-l,
.reveal-r {
    opacity: 0;
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.reveal {
    transform: translateY(32px);
}
.reveal-l {
    transform: translateX(-32px);
}
.reveal-r {
    transform: translateX(32px);
}
.reveal.vis,
.reveal-l.vis,
.reveal-r.vis {
    opacity: 1;
    transform: none;
}
.d1 {
    transition-delay: 0.1s !important;
}
.d2 {
    transition-delay: 0.22s !important;
}
.d3 {
    transition-delay: 0.34s !important;
}
.d4 {
    transition-delay: 0.46s !important;
}
.d5 {
    transition-delay: 0.58s !important;
}

/* ══════════════════════════════════════
           LAYOUT UTILITIES
        ══════════════════════════════════════ */
.container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 28px;
}
section {
    position: relative;
    z-index: 1;
    padding: 80px 0;
}

/* ヒーロー以外は全て透明 — body の fixed gradient を通して見せる */
#mouse {
    background: linear-gradient(to bottom, transparent 0%, #ffffff 7%);
    padding: 0;
}
#about {
    background: transparent;
    padding: clamp(60px, 10vh, 120px) 0;
}
#benefits {
    /* 夜明けの青空 → 淡い空色 → 黄金の朝 → 白 */
    background: linear-gradient(
        to bottom,
        #90bcf8 0%,
        #a8ccf8 8%,
        #c0dcff 18%,
        #d8eaff 30%,
        #edf5ff 40%,
        #fefdf0 50%,
        #fff9d8 58%,
        #ffeea0 66%,
        #ffe068 74%,
        #ffd040 82%,
        #ffd848 86%,
        #ffe070 90%,
        #fff0a8 94%,
        #fffde8 98%,
        #ffffff 100%
    );
}

/* ④ 夜空・星空 */
#mousepad {
    background-image:
        /* ── 上部フェード：徐々に星が現れる ── */
        linear-gradient(
            to bottom,
            rgba(10, 10, 40, 0.9) 0%,
            rgba(10, 10, 40, 0.62) 5%,
            rgba(10, 10, 40, 0.28) 10%,
            rgba(10, 10, 40, 0) 16%
        ),
        /* ── 天の川 ── */
        radial-gradient(
                ellipse 60% 13% at 52% 42%,
                rgba(140, 162, 230, 0.1) 0%,
                transparent 100%
            ),
        /* ── 大きな星（固定位置） ── */
        radial-gradient(
                circle 3px at 27% 18%,
                #fff 0%,
                rgba(200, 220, 255, 0.18) 50%,
                transparent 100%
            ),
        radial-gradient(
            circle 3px at 71% 15%,
            #fff 0%,
            rgba(200, 220, 255, 0.18) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 3px at 14% 55%,
            #fff 0%,
            rgba(200, 220, 255, 0.18) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 3px at 84% 42%,
            #fff 0%,
            rgba(200, 220, 255, 0.18) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 3px at 46% 74%,
            #fff 0%,
            rgba(200, 220, 255, 0.18) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 3px at 58% 32%,
            #fff 0%,
            rgba(200, 220, 255, 0.15) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 3px at 5% 78%,
            #fff 0%,
            rgba(200, 220, 255, 0.15) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 3px at 93% 62%,
            #fff 0%,
            rgba(200, 220, 255, 0.15) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 38% 48%,
            #fff 0%,
            rgba(200, 220, 255, 0.12) 50%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 78% 85%,
            #fff 0%,
            rgba(200, 220, 255, 0.12) 50%,
            transparent 100%
        ),
        /* ── 中程度の星（大きなタイルで繰り返しを目立たなくする） ── */
        radial-gradient(
                circle 1.5px at 55px 40px,
                rgba(255, 255, 255, 0.92) 0%,
                transparent 100%
            ),
        radial-gradient(
            circle 1.5px at 210px 90px,
            rgba(255, 255, 255, 0.8) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 390px 22px,
            rgba(255, 255, 255, 0.88) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 570px 135px,
            rgba(255, 255, 255, 0.75) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 690px 58px,
            rgba(255, 255, 255, 0.85) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 135px 250px,
            rgba(255, 255, 255, 0.82) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 320px 320px,
            rgba(255, 255, 255, 0.78) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 500px 275px,
            rgba(255, 255, 255, 0.9) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 78px 440px,
            rgba(255, 255, 255, 0.72) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1.5px at 648px 415px,
            rgba(255, 255, 255, 0.86) 0%,
            transparent 100%
        ),
        /* ── 小さな星（別サイズのタイル） ── */
        radial-gradient(
                circle 1px at 92px 18px,
                rgba(255, 255, 255, 0.95) 0%,
                transparent 100%
            ),
        radial-gradient(
            circle 1px at 278px 58px,
            rgba(255, 255, 255, 0.82) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 468px 34px,
            rgba(255, 255, 255, 0.9) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 628px 82px,
            rgba(255, 255, 255, 0.75) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 162px 162px,
            rgba(255, 255, 255, 0.88) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 385px 195px,
            rgba(255, 255, 255, 0.8) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 32px 228px,
            rgba(255, 255, 255, 0.85) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 558px 238px,
            rgba(255, 255, 255, 0.7) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 235px 328px,
            rgba(255, 255, 255, 0.88) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 438px 375px,
            rgba(255, 255, 255, 0.78) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 68px 408px,
            rgba(255, 255, 255, 0.85) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 665px 345px,
            rgba(255, 255, 255, 0.65) 0%,
            transparent 100%
        ),
        /* ── ベースの夜空グラデーション ── */
        linear-gradient(
                to bottom,
                #0a0a28 0%,
                #0c0c32 14%,
                #0d0d3e 35%,
                #0d0d3e 62%,
                #0a0a30 78%,
                #070720 90%,
                #050518 100%
            );
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        720px 500px,
        720px 500px,
        720px 500px,
        720px 500px,
        720px 500px,
        720px 500px,
        720px 500px,
        720px 500px,
        720px 500px,
        720px 500px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        680px 460px,
        100% 100%;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
        repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
        repeat, repeat, repeat, repeat, no-repeat;
}

/* ⑤ 夜空 → 深い群青 → ロイヤルブルー → 夜明けの青空 */
#brand {
    background: linear-gradient(
        to bottom,
        #050518 0%,
        #08082a 6%,
        #0e1050 16%,
        #182278 28%,
        #1e2e96 40%,
        #2840b4 54%,
        #3858cc 66%,
        #4a70dc 76%,
        #6090ea 84%,
        #7aaaf4 92%,
        #90bcf8 100%
    );
}

/* ─ 夜空セクションのテキスト上書き ─ */
#mousepad .sec-sub {
    color: rgba(160, 185, 235, 0.65);
}
#mousepad .designer-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(100, 140, 220, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}
#mousepad .designer-ava {
    box-shadow:
        0 0 0 3px rgba(100, 140, 220, 0.45),
        0 4px 20px rgba(0, 0, 0, 0.5);
}
#mousepad .designer-role--yellow {
    color: #a8c8f0;
}
#mousepad .designer-name {
    color: #e0eaff;
}
#mousepad .designer-bio {
    color: rgba(185, 205, 240, 0.72);
}

/* ─ 群青→ロイヤルブルー セクション テキスト上書き ─ */
#brand .sec-sub {
    color: rgba(160, 205, 255, 0.65);
}
#brand .brand-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(100, 160, 255, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
#brand .brand-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 56px rgba(60, 120, 255, 0.22);
}
#brand .brand-card--d .brand-name {
    color: #88ccff;
}
#brand .brand-card--h .brand-name {
    color: #ffd080;
}
#brand .brand-tagline {
    color: rgba(160, 205, 255, 0.45);
    border-bottom-color: rgba(100, 160, 255, 0.15);
}
#brand .brand-desc {
    color: rgba(200, 225, 255, 0.72);
}

/* ══════════════════════════════════════
           SECTION TITLE — ANIME RIBBON STYLE
        ══════════════════════════════════════ */
.sec-title {
    font-family: "Mochiy Pop One", "Nunito", sans-serif;
    font-size: clamp(22px, 5vw, 40px);
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.sec-title::before,
.sec-title::after {
    content: "";
    font-size: 0.55em;
    animation: spin-star 4s linear infinite;
    display: inline-block;
    background: linear-gradient(135deg, var(--blue), var(--yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sec-title::after {
    animation-direction: reverse;
}
.sec-title span {
    background: linear-gradient(135deg, #0090cc, #66c1ff, #ffd580);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sec-sub {
    text-align: center;
    color: var(--text-sub);
    font-size: 13px;
    letter-spacing: 0.18em;
    margin-bottom: 72px;
    font-weight: 700;
}

/* ══════════════════════════════════════
           SPARKLE BACKGROUND LAYER
        ══════════════════════════════════════ */
.magic-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.sp {
    position: absolute;
    animation: twinkle var(--d, 3s) ease-in-out infinite var(--dl, 0s);
    font-style: normal;
    line-height: 1;
}

/* ══════════════════════════════════════
           HEADER
        ══════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    background: rgba(248, 252, 255, 0.78);
    backdrop-filter: blur(20px);
    border-bottom: 1.5px solid rgba(102, 193, 255, 0.2);
}
.header-brand-break {
    display: inline; /* PC: 인라인으로 한 줄 유지 */
}
.header-brand {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        #0090cc,
        #66c1ff,
        #9adfb6,
        #ffd580,
        #0090cc
    );
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow-shift 5s ease infinite;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
}
.site-nav a {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-sub);
    transition: color 0.2s ease;
    white-space: nowrap;
}

/* ─ 768px〜1100px：헤더 압축 ─ */
@media (min-width: 768px) and (max-width: 1100px) {
    .site-header {
        padding: 0 24px;
        gap: 12px;
    }
    .header-brand {
        font-size: 10px;
    }
    .site-nav {
        gap: 10px;
    }
    .site-nav a {
        font-size: 11px;
        letter-spacing: 0.02em;
    }
    .nav-cta a {
        padding: 5px 14px;
    }
}
.site-nav a:hover {
    color: #0090cc;
}
.nav-cta a {
    padding: 6px 20px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--blue), var(--yellow));
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ══════════════════════════════════════
           HAMBURGER / MOBILE MENU
        ══════════════════════════════════════ */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 210;
}
.hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #0090cc;
    border-radius: 2px;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
    transform-origin: center;
}
.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 199;
    background: rgba(248, 252, 255, 0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1.5px solid rgba(102, 193, 255, 0.2);
    padding: 16px 20px 24px;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}
.mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.mobile-menu a {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-sub);
    border-radius: 10px;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.mobile-menu a:hover,
.mobile-menu a:active {
    background: rgba(102, 193, 255, 0.12);
    color: #0090cc;
}
.mobile-menu .mobile-cta a {
    margin-top: 8px;
    text-align: center;
    background: linear-gradient(90deg, var(--blue), var(--yellow));
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: var(--r-pill);
}

/* ══════════════════════════════════════
           FLOATING RESERVE BUTTON
        ══════════════════════════════════════ */
.float-reserve {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 150;
    writing-mode: vertical-rl;
    background: linear-gradient(180deg, #66c1ff 0%, #9adfb6 50%, #ffd580 100%);
    color: #fff;
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    padding: 24px 12px;
    border-radius: 16px 0 0 16px;
    box-shadow: -4px 0 28px rgba(102, 193, 255, 0.38);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    animation: magical-glow 3s ease-in-out infinite;
}
.float-reserve:hover {
    transform: translateY(-50%) translateX(-6px);
    box-shadow: -8px 0 40px rgba(255, 213, 128, 0.5);
}

/* ══════════════════════════════════════
           HERO SECTION
        ══════════════════════════════════════ */
.hero {
    position: relative;
    height: clamp(600px, 100vh, 1080px);
    min-height: 600px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse 65% 90% at 18% 65%,
            rgba(175, 220, 248, 0.6) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 65% 90% at 82% 65%,
            rgba(255, 222, 160, 0.5) 0%,
            transparent 65%
        ),
        linear-gradient(160deg, #e4f3fb 0%, #eff8f4 50%, #fdf3e3 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 상단 로고 보호 오버레이 */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38%;
    background: linear-gradient(
        to bottom,
        rgba(234, 245, 252, 1) 0%,
        rgba(234, 245, 252, 0.85) 40%,
        rgba(234, 245, 252, 0.3) 75%,
        transparent 100%
    );
    z-index: 5;
    pointer-events: none;
}

/* Top logo area */
.hero-top {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: clamp(60px, 7vh, 80px);
    pointer-events: none;
}

.hero-logo-img {
    width: clamp(180px, 26vw, 380px);
    mix-blend-mode: multiply;
    animation: slide-up 0.9s ease 0.1s both;
}

.hero-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.hero-ring--1 {
    width: 560px;
    height: 560px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(102, 193, 255, 0.18);
    animation: spin-star 30s linear infinite;
}
.hero-ring--2 {
    width: 720px;
    height: 720px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(255, 213, 128, 0.14);
    animation: spin-star 45s linear infinite reverse;
}

/* Characters */
.hero-chars {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    z-index: 1;
}
.hero-char-wrap {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.hero-char-wrap::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20%;
    background: radial-gradient(
        ellipse,
        rgba(102, 193, 255, 0.22) 0%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(12px);
    z-index: 0;
}
.hero-char {
    height: 78vh;
    width: auto;
    max-width: 58vw;
    object-fit: contain;
    object-position: bottom center;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 20px 48px rgba(102, 193, 255, 0.2));
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.45s ease;
    animation: slide-up 0.9s ease 0.3s both;
}
.hero-char:hover {
    transform: scale(1.03) translateY(-10px);
    filter: drop-shadow(0 32px 60px rgba(255, 213, 128, 0.35));
}

.char-star {
    position: absolute;
    pointer-events: none;
    font-size: var(--fs, 18px);
    animation: sparkle-drift var(--d, 3s) ease-out infinite var(--dl, 0s);
    --drift: var(--dx, 15px);
    z-index: 2;
}

/* ══════════════════════════════════════
           HERO SCROLL INDICATOR (mobile only)
        ══════════════════════════════════════ */
.hero-scroll {
    position: absolute;
    left: 20px;
    bottom: clamp(40px, 6svh, 64px);
    z-index: 10;
    display: none; /* hidden on desktop */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: slide-up 0.9s ease 1.4s both;
}

/* Ghost mascot icon */
.hero-scroll-bear {
    width: 42px;
    height: 39px;
    flex-shrink: 0;
}

.hero-scroll-bear img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Scroll text — ルカカラー */
.hero-scroll-text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #5aace8;
    font-family: "Nunito", sans-serif;
}

/* Arrow */
.hero-scroll-arrow {
    font-size: 16px;
    color: #5aace8;
    font-weight: 800;
    animation: scroll-arrow-bounce 1.6s ease-in-out infinite;
}

@keyframes scroll-arrow-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

/* Collab message bubble — used in about section */
/* About — logo row */
.about-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 48px);
    margin-bottom: clamp(36px, 5vw, 56px);
}
.about-logo-wp {
    width: clamp(180px, 20vw, 300px);
    mix-blend-mode: multiply;
}
.about-logo-ds {
    width: clamp(140px, 15vw, 220px);
    mix-blend-mode: multiply;
}
.about-logo-x {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 900;
    color: var(--text-sub);
    flex-shrink: 0;
}

/* About — collab wrap with chibi */
.about-collab-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto clamp(32px, 4vw, 48px);
}
.about-chibi {
    width: clamp(110px, 12vw, 180px);
    flex-shrink: 0;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.08));
    margin-bottom: -4px;
}
.about-chibi--left {
    margin-right: -16px;
    z-index: 2;
}
.about-chibi--right {
    margin-left: -16px;
    z-index: 2;
}

.collab-bubble {
    flex: 1;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: clamp(28px, 3.5vw, 48px) clamp(32px, 5vw, 64px);
    border: 1.5px solid rgba(102, 193, 255, 0.3);
    box-shadow: 0 6px 36px rgba(255, 213, 128, 0.16);
    position: relative;
    z-index: 1;
}
.collab-bubble::before {
    content: "COLLAB MESSAGE";
    display: block;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #0090cc;
    margin-bottom: 16px;
}
.collab-bubble p {
    font-size: 16px;
    line-height: 2.2;
    color: var(--text);
    overflow-wrap: break-word;
    word-break: auto-phrase;
}
.collab-bubble p + p {
    margin-top: 10px;
}

/* ══════════════════════════════════════
           WEATHER PLANET SECTION
        ══════════════════════════════════════ */
.wp-imgwrap {
    max-width: 700px;
    margin: 0 auto 52px;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 20px 64px rgba(102, 193, 255, 0.18);
    border: 3px solid rgba(255, 213, 128, 0.3);
    position: relative;
}
.wp-imgwrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-xl);
    background: linear-gradient(
        135deg,
        rgba(102, 193, 255, 0.08),
        rgba(255, 213, 128, 0.08)
    );
    z-index: 1;
    pointer-events: none;
}
.wp-imgwrap img {
    width: 100%;
    transition: transform 0.5s ease;
    display: block;
}
.wp-imgwrap:hover img {
    transform: scale(1.03);
}

.wp-textbox {
    max-width: 680px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 56px);
    border: 2px solid rgba(102, 193, 255, 0.2);
    box-shadow: var(--shadow-b);
}
.wp-textbox p {
    line-height: 2.1;
    font-size: 16px;
}
.wp-textbox p + p {
    margin-top: 12px;
}

/* ══════════════════════════════════════
           KAWAII CARD (shared)
        ══════════════════════════════════════ */
.kawaii-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--r-xl);
    padding: clamp(24px, 3.5vw, 44px);
    border: 2px solid rgba(255, 213, 128, 0.28);
    box-shadow: 0 8px 36px rgba(102, 193, 255, 0.12);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}
.kawaii-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 20px 56px rgba(102, 193, 255, 0.2),
        0 0 0 3px rgba(255, 213, 128, 0.3);
}

/* ══════════════════════════════════════
           TAG CHIPS
        ══════════════════════════════════════ */
.chip {
    display: inline-block;
    padding: 5px 18px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 16px;
}
.chip--ruka {
    background: linear-gradient(90deg, #66c1ff, #4aabee);
}
.chip--hinata {
    background: linear-gradient(90deg, #ffd580, #f0b830);
}
.chip--yellow {
    background: linear-gradient(90deg, #ffd580, #e8a800);
}
.chip--blue {
    background: linear-gradient(90deg, #66c1ff, #0090cc);
}

/* ══════════════════════════════════════
           MOUSE SECTION
        ══════════════════════════════════════ */
.mouse-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    margin-bottom: 100px;
}
.mouse-vis {
    position: relative;
}
.mouse-vis__img {
    width: 100%;
    filter: drop-shadow(0 20px 48px rgba(102, 193, 255, 0.22));
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.45s ease;
}
.mouse-vis:hover .mouse-vis__img {
    transform: translateY(-10px) scale(1.03);
    filter: drop-shadow(0 32px 64px rgba(255, 213, 128, 0.35));
}
.mouse-vis__glow {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 40px;
    background: radial-gradient(
        ellipse,
        rgba(102, 193, 255, 0.4) 0%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(12px);
}

/* Blink mini chara */
.mini-wrap {
    position: absolute;
    width: clamp(80px, 14vw, 130px);
    height: clamp(80px, 14vw, 130px);
    z-index: 2;
}
.mini-wrap--tl {
    top: -20px;
    left: -20px;
    animation: float 5.5s ease-in-out infinite;
}
.mini-wrap--tr {
    top: -20px;
    right: -20px;
    animation: float-alt 6s ease-in-out infinite;
}
.mini-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
}

.product-name {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 900;
    margin-bottom: 14px;
    line-height: 1.3;
    color: var(--text);
}
.product-desc {
    font-size: 15px;
    color: var(--text-sub);
    line-height: 2.1;
}
.spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.spec-pill {
    background: linear-gradient(
        135deg,
        rgba(102, 193, 255, 0.12),
        rgba(255, 213, 128, 0.12)
    );
    border: 1.5px solid rgba(102, 193, 255, 0.28);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: var(--r-pill);
}

/* Compare grid */
.compare-title {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(17px, 3vw, 24px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--text);
}
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    max-width: 800px;
    margin: 0 auto;
}
.compare-item {
    text-align: center;
}
.compare-item img {
    width: 100%;
    filter: drop-shadow(0 10px 28px rgba(102, 193, 255, 0.2));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.compare-item img:hover {
    transform: translateY(-8px) scale(1.04);
}
.compare-label {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-top: 14px;
    color: var(--text-sub);
}

/* ══════════════════════════════════════
           MOUSE EDITION PANELS
        ══════════════════════════════════════ */
.mouse-panels {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}
.mouse-panel {
    min-height: 100vh;
    padding: clamp(36px, 5vw, 72px) clamp(40px, 7vw, 110px);
    position: relative;
    overflow: hidden;
}

/* ── マウスパネル：青空（ルカ）→朝の日差し（ひなた）→スペックへ自然接続 ── */
.mouse-panels-combined {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #dff0ff 2%,
        #b2d8f5 7%,
        #72b8e8 16%,
        #48aadf 26%,
        #5ab4ea 32%,
        #7cc6ec 37%,
        #a8d8f4 41%,
        #c8e8fc 44%,
        #ddf0fe 46%,
        #eef6ff 48%,
        #f8f8f8 50%,
        #fff6ee 52%,
        #ffeedd 55%,
        #ffdec0 58%,
        #ffd098 62%,
        #ffc070 67%,
        #ffbc58 73%,
        #ffc870 79%,
        #ffd898 84%,
        #ffe8c0 89%,
        #fff4e4 93%,
        rgba(255, 250, 242, 0) 100%
    );
}

/* ── Ruka: grid ── */
.mouse-panel--ruka {
    background: none;
    padding-top: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 480px);
    grid-template-areas:
        "sectitle sectitle"
        "mouse    info";
    column-gap: clamp(8px, 1.5vw, 20px);
    row-gap: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
}

/* ── Hinata: grid ── */
.mouse-panel--hinata {
    background: none;
    min-height: auto;
    padding-bottom: 0;
    margin-bottom: -80px;
    display: grid;
    grid-template-columns: minmax(0, 480px) auto;
    grid-template-areas:
        "header mouse"
        "desc   mouse";
    column-gap: clamp(8px, 1.5vw, 20px);
    row-gap: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
}

/* Section title – ruka top */
.mp-sectitle {
    grid-area: sectitle;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: -40px;
}
.mp-sectitle-ja {
    font-family: "Mochiy Pop One", "Nunito", sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    color: #1a4878;
}
.mp-sectitle-en {
    font-size: clamp(14px, 1.6vw, 20px);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1a4878;
    opacity: 0.6;
    margin-top: 2px;
}

/* Mouse column */
.mp-mouse-col {
    grid-area: mouse;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mouse-panel--hinata .mp-mouse-col {
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-mouse-img {
    width: clamp(260px, 42vw, 620px);
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.14));
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.45s ease;
    flex-shrink: 0;
}
.mp-mouse-col:hover .mp-mouse-img {
    transform: translateY(-10px) scale(1.04);
}
.mouse-panel--ruka .mp-mouse-col:hover .mp-mouse-img {
    filter: drop-shadow(0 28px 56px rgba(60, 160, 255, 0.38));
}
.mouse-panel--hinata .mp-mouse-col:hover .mp-mouse-img {
    filter: drop-shadow(0 28px 56px rgba(240, 175, 30, 0.38));
}

/* Chibi characters */
.mp-chibi-wrap {
    position: relative;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
}
.mouse-panel--ruka .mp-chibi-wrap,
.mouse-panel--hinata .mp-chibi-wrap {
    height: clamp(88px, 11vw, 144px);
    width: auto;
}
.mouse-panel--ruka .mp-chibi-wrap {
    align-self: flex-end;
}
.mp-chibi-wrap img {
    display: block;
    height: 100%;
    width: auto;
}
.mp-chibi-wrap .mp-chibi-blink {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
}

/* Model name + chibi side by side */
.mp-model-header {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 1.5vw, 16px);
    margin-bottom: 18px;
}
.mp-model-header .mp-model-line {
    margin-bottom: 0;
}

/* Info column – ruka right */
.mp-info-col {
    grid-area: info;
    align-self: center;
}

/* Header row – hinata top-left */
.mp-header {
    grid-area: header;
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 1.5vw, 16px);
}

/* Desc column – hinata left */
.mp-desc-col {
    grid-area: desc;
    align-self: start;
    margin-top: clamp(-24px, -3vw, -8px);
}

/* Edition & model titles */
.mp-edition-line {
    font-size: clamp(18px, 2.6vw, 32px);
    font-style: italic;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.1;
}
.mouse-panel--ruka .mp-edition-line {
    color: #1a5090;
}
.mouse-panel--hinata .mp-edition-line {
    color: #904800;
}

.mp-model-line {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(24px, 3.6vw, 52px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.mouse-panel--ruka .mp-model-line {
    color: #1a5090;
}
.mouse-panel--hinata .mp-model-line {
    color: #904800;
}

/* Description text */
.mp-desc {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 2;
    overflow-wrap: break-word;
    word-break: auto-phrase;
}
.mp-desc.mp-desc-normal-line {
    word-break: unset;
}
.mp-desc p + p {
    margin-top: 1em;
}
.mouse-panel--ruka .mp-desc {
    color: rgba(10, 32, 64, 0.82);
    margin-top: clamp(20px, 3vw, 40px);
}
.mouse-panel--hinata .mp-desc {
    color: rgba(90, 48, 8, 0.85);
    margin-top: clamp(20px, 3vw, 40px);
}

/* Detail – below description, inside info/desc col */
.mp-detail {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    margin-top: clamp(18px, 2.5vw, 30px);
}
.mp-detail-img {
    width: clamp(120px, 15vw, 200px);
    border-radius: 12px;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12));
    flex-shrink: 0;
}
.mp-detail-caption {
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 700;
    line-height: 1.6;
}
.mouse-panel--ruka .mp-detail-caption {
    color: #1a6abf;
}
.mouse-panel--hinata .mp-detail-caption {
    color: #b06010;
}

/* ══ Cute animations ══ */

/* チビキャラ：カラーグロー */
.mouse-panel--ruka .mp-chibi-wrap {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1))
        drop-shadow(0 0 8px rgba(80, 160, 255, 0.2));
}
.mouse-panel--hinata .mp-chibi-wrap {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1))
        drop-shadow(0 0 8px rgba(255, 170, 60, 0.2));
}
@keyframes float-glow-ruka {
    0%,
    100% {
        transform: translateY(0px);
        filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1))
            drop-shadow(0 0 8px rgba(80, 160, 255, 0.2));
    }
    50% {
        transform: translateY(-12px);
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.12))
            drop-shadow(0 0 24px rgba(80, 160, 255, 0.6));
    }
}
@keyframes float-glow-hinata {
    0%,
    100% {
        transform: translateY(0px);
        filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1))
            drop-shadow(0 0 8px rgba(255, 170, 60, 0.2));
    }
    50% {
        transform: translateY(-12px);
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.12))
            drop-shadow(0 0 24px rgba(255, 170, 60, 0.6));
    }
}

/* マウス画像：カラーグロー */
.mouse-panel--ruka .mp-mouse-img {
    animation: mouse-glow-ruka 6s ease-in-out infinite;
}
.mouse-panel--hinata .mp-mouse-img {
    animation: mouse-glow-hinata 7s ease-in-out infinite;
}
@keyframes mouse-glow-ruka {
    0%,
    100% {
        filter: drop-shadow(0 16px 40px rgba(60, 160, 255, 0.18));
    }
    50% {
        filter: drop-shadow(0 20px 56px rgba(60, 160, 255, 0.48));
    }
}
@keyframes mouse-glow-hinata {
    0%,
    100% {
        filter: drop-shadow(0 16px 40px rgba(240, 160, 40, 0.18));
    }
    50% {
        filter: drop-shadow(0 20px 56px rgba(240, 160, 40, 0.48));
    }
}

/* 詳細画像 */
.mouse-panel--ruka .mp-detail-img {
    filter: drop-shadow(0 4px 16px rgba(60, 160, 255, 0.15));
}
.mouse-panel--hinata .mp-detail-img {
    filter: drop-shadow(0 4px 16px rgba(240, 160, 40, 0.15));
}

/* セクションタイトル：キラキラ点滅 */
.mp-sectitle-ja {
    animation: title-sparkle 3s ease-in-out infinite;
}
@keyframes title-sparkle {
    0%,
    100% {
        text-shadow: none;
    }
    50% {
        text-shadow:
            0 0 16px rgba(60, 140, 255, 0.45),
            0 0 32px rgba(60, 140, 255, 0.2);
    }
}

/* ══ Hero cute animations ══ */

/* キャラ：グロー呼吸のみ */
.hero-char {
    animation:
        slide-up 0.9s ease 0.3s both,
        hero-glow 7s ease-in-out 1.2s infinite;
}
@keyframes hero-glow {
    0%,
    100% {
        filter: drop-shadow(0 20px 48px rgba(102, 193, 255, 0.22));
    }
    50% {
        filter: drop-shadow(0 28px 64px rgba(255, 213, 128, 0.38));
    }
}

/* リング：スピン＋カラーグロー */
.hero-ring--1 {
    animation:
        spin-star 30s linear infinite,
        ring-pulse-1 4s ease-in-out infinite;
}
.hero-ring--2 {
    animation:
        spin-star 45s linear infinite reverse,
        ring-pulse-2 5s ease-in-out infinite;
}
@keyframes ring-pulse-1 {
    0%,
    100% {
        border-color: rgba(102, 193, 255, 0.18);
        box-shadow: none;
    }
    50% {
        border-color: rgba(102, 193, 255, 0.45);
        box-shadow: 0 0 24px rgba(102, 193, 255, 0.14);
    }
}
@keyframes ring-pulse-2 {
    0%,
    100% {
        border-color: rgba(255, 213, 128, 0.14);
        box-shadow: none;
    }
    50% {
        border-color: rgba(255, 213, 128, 0.4);
        box-shadow: 0 0 24px rgba(255, 213, 128, 0.12);
    }
}

/* ══ Weather Planet cute animations ══ */

/* × ボタン弾む */
.about-logo-x {
    display: inline-block;
    animation: logo-x-bounce 2.5s ease-in-out infinite;
}
@keyframes logo-x-bounce {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.25) rotate(12deg);
        color: #66c1ff;
    }
}

/* About chibi ラッパー */
.about-chibi-wrap {
    position: relative;
    flex-shrink: 0;
    margin-bottom: -4px;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.08));
}
.about-chibi-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
.about-chibi-wrap .about-chibi-blink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.about-chibi-wrap {
    width: clamp(110px, 12vw, 180px);
}
.about-chibi--left {
    margin-right: -16px;
    z-index: 2;
    width: clamp(120px, 13.1vw, 197px);
}
.about-chibi--right {
    margin-left: -16px;
    z-index: 2;
}

/* コラボバブル呼吸グロー */
.collab-bubble {
    animation: bubble-breathe 4s ease-in-out infinite;
}
@keyframes bubble-breathe {
    0%,
    100% {
        box-shadow: 0 6px 36px rgba(255, 213, 128, 0.16);
        border-color: rgba(102, 193, 255, 0.3);
    }
    50% {
        box-shadow: 0 12px 52px rgba(102, 193, 255, 0.28);
        border-color: rgba(102, 193, 255, 0.55);
    }
}

/* wp-imgwrap ボーダーグロー */
.wp-imgwrap {
    animation: imgwrap-glow 5s ease-in-out infinite;
}
@keyframes imgwrap-glow {
    0%,
    100% {
        box-shadow: 0 20px 64px rgba(102, 193, 255, 0.18);
        border-color: rgba(255, 213, 128, 0.3);
    }
    50% {
        box-shadow: 0 28px 80px rgba(102, 193, 255, 0.35);
        border-color: rgba(255, 213, 128, 0.6);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mouse-panel--ruka {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sectitle"
            "mouse"
            "info";
    }
    .mouse-panel--hinata {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "mouse"
            "desc";
        padding-bottom: clamp(36px, 5vw, 72px);
        margin-bottom: 0;
    }
    .mouse-panel--hinata .mp-mouse-col {
        grid-row: auto;
        align-self: auto;
    }
    .mouse-panel--ruka .mp-chibi {
        width: clamp(56px, 14vw, 80px);
    }
    .mp-mouse-img {
        width: clamp(140px, 44vw, 220px);
    }
}

/* ══════════════════════════════════════
           KEYBOARD SECTION
        ══════════════════════════════════════ */
.kb-products {
    display: flex;
    flex-direction: column;
    gap: clamp(72px, 9vw, 110px);
    margin-bottom: 72px;
}
.kb-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 6vw, 88px);
    align-items: center;
}
.kb-product__vis {
    position: relative;
}
.kb-product__vis img:not(.kb-deco) {
    width: 100%;
    border-radius: var(--r);
    box-shadow: 0 16px 52px rgba(102, 193, 255, 0.18);
    border: 2px solid rgba(255, 213, 128, 0.2);
}
.kb-deco {
    position: absolute !important;
    width: clamp(110px, 16vw, 190px) !important;
    height: auto !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.1));
    z-index: 2;
    box-shadow: none !important;
    border: none !important;
}
.kb-deco--tl {
    top: 0;
    left: 10px;
    transform: translateY(-75%);
}
.kb-deco--tr {
    top: 0;
    right: 10px;
    transform: translateY(-75%);
}

.kb-eyebrow {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: #0090cc;
    margin-bottom: 12px;
}
.kb-title {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 900;
    margin-bottom: 16px;
    line-height: 1.3;
}
.kb-desc {
    font-size: 15px;
    color: var(--text-sub);
    line-height: 2.1;
}

/* ══════════════════════════════════════
           DESIGNER CARD
        ══════════════════════════════════════ */
.designer-card {
    max-width: 545px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--r-xl);
    padding: clamp(22px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
    display: flex;
    align-items: center;
    gap: 22px;
    border: 2px solid rgba(102, 193, 255, 0.25);
    box-shadow: var(--shadow-b);
}
.designer-card--yellow {
    border-color: rgba(255, 213, 128, 0.35);
}
.designer-ava {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow:
        0 0 0 3px rgba(102, 193, 255, 0.4),
        0 4px 20px rgba(102, 193, 255, 0.18);
}
.designer-role {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    color: #0090cc;
}
.designer-role--yellow {
    color: #c88a00;
}
.designer-name {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 7px;
}
.designer-bio {
    font-size: clamp(11px, 1.2vw, 14px);
    color: var(--text-sub);
    line-height: 1.9;
}

/* ══════════════════════════════════════
           MOUSEPAD SECTION — CHAMZO1 REDESIGN
        ══════════════════════════════════════ */

/* Section header */
.pad2-header {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
    padding-top: clamp(40px, 5vw, 68px);
}
.pad2-title-ja {
    font-family: "Mochiy Pop One", "Nunito", sans-serif;
    font-size: clamp(20px, 4.5vw, 50px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.04em;
    text-shadow: 0 0 40px rgba(102, 193, 255, 0.35);
    animation: title-sparkle 3s ease-in-out infinite;
}
.pad2-title-en {
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(160, 185, 235, 0.8);
    margin-top: 8px;
}

/* Product rows */
.pad2-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
    margin-bottom: clamp(52px, 7vw, 96px);
}
.pad2-row--ruka {
    grid-template-columns: 5fr 6fr;
}
.pad2-row--hinata {
    grid-template-columns: 6fr 5fr;
}

/* Image box */
.pad2-imgbox {
    position: relative;
    aspect-ratio: 1;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5);
}
.pad2-imgbox--blue {
    background: #1240a0;
    box-shadow: 0 20px 56px rgba(18, 64, 160, 0.55);
}
.pad2-imgbox--orange {
    background: #c84800;
    box-shadow: 0 20px 56px rgba(200, 72, 0, 0.55);
}
.pad2-imgbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pad2-imgbox-copy {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.52);
    font-style: italic;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Text column */
.pad2-text {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
}
.pad2-en-sub {
    font-size: clamp(14px, 1.6vw, 18px);
    letter-spacing: 0.06em;
    color: rgba(160, 185, 235, 0.72);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2px;
}
.pad2-en-main {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(17px, 6.2vw, 34px);
    font-weight: 900;
    color: #e8f0ff;
    line-height: 1.05;
}
.pad2-desc {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 2.2;
    color: rgba(190, 210, 245, 0.9);
    overflow-wrap: break-word;
    word-break: auto-phrase;
}
.pad2-desc p + p {
    margin-top: 1em;
}

/* Type explanation wrapper */
.pad2-type-wrapper {
    padding-top: clamp(52px, 8vw, 80px); /* chibi の高さ分の余白 */
}

/* Type explanation card — 横長フラットカード */
.pad2-type-card {
    position: relative;
    overflow: visible; /* chibi がカード上に飛び出せるように */
    border-radius: 16px;
    backdrop-filter: blur(14px);
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px);
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.pad2-row--ruka .pad2-type-card {
    background: rgba(10, 34, 100, 0.5);
    border: 1px solid rgba(102, 193, 255, 0.35);
    box-shadow: 0 6px 28px rgba(20, 80, 200, 0.22);
}
.pad2-row--ruka .pad2-type-card:hover {
    box-shadow: 0 10px 40px rgba(60, 140, 255, 0.38);
    border-color: rgba(102, 193, 255, 0.6);
}
.pad2-row--hinata .pad2-type-card {
    background: rgba(90, 30, 4, 0.5);
    border: 1px solid rgba(255, 148, 40, 0.35);
    box-shadow: 0 6px 28px rgba(200, 80, 10, 0.22);
}
.pad2-row--hinata .pad2-type-card:hover {
    box-shadow: 0 10px 40px rgba(255, 130, 20, 0.38);
    border-color: rgba(255, 148, 40, 0.6);
}

/* Chibi — カードの上端境界にぴったり合わせて配置 */
.pad2-type-chibi {
    position: absolute;
    top: 2px;
    right: clamp(8px, 2vw, 20px);
    width: clamp(115px, 16vw, 175px);
    height: auto;
    z-index: 10;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.28));
    transform: translateY(calc(-100% + 3px));
}
.pad2-row--hinata .pad2-type-chibi {
    transform: translateY(calc(-100% + 4px));
}
.pad2-type-label {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 900;
    color: rgba(200, 225, 255, 0.95);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}
.pad2-row--hinata .pad2-type-label {
    color: rgba(255, 225, 170, 0.95);
}
.pad2-type-body {
    font-size: clamp(13px, 1.1vw, 14px);
    line-height: 2;
    color: rgba(180, 210, 248, 0.9);
}
.pad2-row--hinata .pad2-type-body {
    color: rgba(255, 210, 150, 0.82);
}

/* Designer card spacing */
#mousepad .designer-card {
    margin-top: clamp(16px, 2.5vw, 36px);
}

/* ══════════════════════════════════════
           BRAND SECTION
        ══════════════════════════════════════ */
.brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    max-width: 900px;
    margin: 0 auto;
}
.brand-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--r-xl);
    padding: clamp(30px, 4vw, 52px) clamp(26px, 4vw, 44px);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-b);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}
.brand-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 4px 4px 0 0;
}
.brand-card--d::before {
    background: linear-gradient(90deg, var(--blue), var(--mint));
}
.brand-card--h::before {
    background: linear-gradient(90deg, var(--yellow), var(--blue));
}
.brand-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 56px rgba(102, 193, 255, 0.2);
}
.brand-name {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 900;
    margin-bottom: 8px;
}
.brand-card--d .brand-name {
    color: #0090cc;
}
.brand-card--h .brand-name {
    color: #c88a00;
}
.brand-tagline {
    font-size: 12px;
    color: var(--text-sub);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(102, 193, 255, 0.15);
}
.brand-desc {
    font-size: 15px;
    color: var(--text-sub);
    line-height: 2.1;
}

/* ══════════════════════════════════════
           BENEFITS SECTION
        ══════════════════════════════════════ */
.benefit-outer {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    border-radius: var(--r-xl);
    padding: 3px;
    background: linear-gradient(
        135deg,
        var(--blue),
        var(--mint),
        var(--yellow),
        var(--mint),
        var(--blue)
    );
    background-size: 300%;
    animation: rainbow-shift 5s ease infinite;
    box-shadow: 0 16px 60px rgba(102, 193, 255, 0.22);
}
.benefit-inner {
    background: rgba(255, 255, 255, 0.96);
    border-radius: calc(var(--r-xl) - 2px);
    padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 64px);
    text-align: center;
}
.benefit-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 24px;
    animation: heart-beat 1.6s ease-in-out infinite;
}
.benefit-title {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(20px, 4vw, 32px);
    font-weight: 900;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #0090cc, #66c1ff, #ffd580);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.benefit-list {
    list-style: none;
    text-align: left;
    max-width: 500px;
    margin: 0 auto 40px;
}
.benefit-list li {
    padding: 13px 0;
    border-bottom: 1px solid rgba(102, 193, 255, 0.15);
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.75;
}
.benefit-list li::before {
    content: "";
    color: var(--blue);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    animation: heart-beat 1.8s ease-in-out infinite;
}
.benefit-list li:nth-child(2)::before {
    color: var(--yellow);
    content: "★";
    animation-delay: 0.4s;
}
.benefit-list li:nth-child(3)::before {
    color: var(--mint);
    content: "✿";
    animation-delay: 0.8s;
}
.benefit-list li:nth-child(4)::before {
    color: #0090cc;
    content: "♡";
    animation-delay: 1.2s;
}
.benefit-note {
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 22px;
    line-height: 2;
    opacity: 0.7;
}

/* ══════════════════════════════════════
   BRAND2 — CIRCLE CARD REDESIGN
══════════════════════════════════════ */

/* 群青→黄金の朝 — section title / sub overrides */
#brand .sec-title span {
    background: linear-gradient(135deg, #a0d4ff, #e8f4ff, #ffd580);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#benefits .sec-title span {
    background: linear-gradient(135deg, #0a3a90, #1858c8, #b07800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#brand .sec-title::before,
#brand .sec-title::after {
    background: linear-gradient(135deg, #80c0ff, #ffd580);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#benefits .sec-title::before,
#benefits .sec-title::after {
    background: linear-gradient(135deg, #0850c8, #c09000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#benefits .sec-sub {
    color: rgba(10, 50, 140, 0.65);
}

/* Grid */
.brand2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 60px);
    max-width: 820px;
    margin: 0 auto;
}

/* Card wrapper */
.brand2-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 40px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease,
        box-shadow 0.3s ease;
}
.brand2-card--d {
    border: 1.5px solid rgba(102, 180, 255, 0.28);
}
.brand2-card--h {
    border: 1.5px solid rgba(255, 213, 100, 0.28);
}
.brand2-card--d:hover {
    transform: translateY(-8px);
    background: rgba(80, 160, 255, 0.08);
    box-shadow: 0 20px 56px rgba(60, 140, 255, 0.22);
}
.brand2-card--h:hover {
    transform: translateY(-8px);
    background: rgba(255, 210, 80, 0.07);
    box-shadow: 0 20px 56px rgba(200, 160, 40, 0.22);
}

/* Circle logo wrap with float */
.brand2-logo-wrap {
    position: relative;
    width: clamp(110px, 18vw, 168px);
    height: clamp(110px, 18vw, 168px);
    margin-bottom: clamp(18px, 3vw, 28px);
}
/* Spinning dashed ring — hidden */
.brand2-logo-ring,
.brand2-logo-ring2 {
    display: none;
}

/* White circle */
.brand2-logo-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.brand2-card--d .brand2-logo-circle {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(102, 193, 255, 0.35);
    animation: brand2-glow-d 4s ease-in-out infinite;
}
.brand2-card--h .brand2-logo-circle {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(255, 213, 128, 0.35);
    animation: brand2-glow-h 4.5s ease-in-out infinite;
}
@keyframes brand2-glow-d {
    0%,
    100% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.45),
            0 0 0 3px rgba(102, 193, 255, 0.35);
    }
    50% {
        box-shadow:
            0 12px 44px rgba(0, 0, 0, 0.4),
            0 0 0 5px rgba(102, 193, 255, 0.6);
    }
}
@keyframes brand2-glow-h {
    0%,
    100% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.45),
            0 0 0 3px rgba(255, 213, 128, 0.35);
    }
    50% {
        box-shadow:
            0 12px 44px rgba(0, 0, 0, 0.4),
            0 0 0 5px rgba(255, 213, 128, 0.6);
    }
}

.brand2-logo-circle img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Haruhi Products — gradient text logo */
.brand2-logo-circle--h {
    background: linear-gradient(135deg, #fff5fa, #ffffff);
}
.brand2-h-text {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(11px, 1.5vw, 14px);
    font-weight: 900;
    text-align: center;
    line-height: 1.6;
    background: linear-gradient(135deg, #ff6ac0, #cc50ff, #8080ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 4px;
}

/* Brand text — 群青・黄金カラー */
.brand2-name {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(16px, 2.4vw, 22px);
    font-weight: 900;
    margin-bottom: 6px;
}
.brand2-card--d .brand2-name {
    color: #a0d4ff;
}
.brand2-card--h .brand2-name {
    color: #ffd080;
}

.brand2-tagline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(160, 200, 255, 0.12);
}
.brand2-card--d .brand2-tagline {
    color: rgba(160, 205, 255, 0.5);
}
.brand2-card--h .brand2-tagline {
    color: rgba(255, 215, 120, 0.5);
}

.brand2-desc {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 2.1;
    text-align: left;
}
.brand2-card--d .brand2-desc {
    color: rgba(205, 228, 255, 0.8);
}
.brand2-card--h .brand2-desc {
    color: rgba(255, 240, 190, 0.8);
}

/* ══════════════════════════════════════
   BENEFIT2 — KAWAII STICKER PREVIEW
══════════════════════════════════════ */

.benefit2-box {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: rgba(12, 6, 22, 0.62);
    backdrop-filter: blur(22px);
    border-radius: 32px;
    padding: clamp(40px, 5.5vw, 72px) clamp(28px, 5vw, 60px);
    border: 1.5px solid rgba(100, 170, 255, 0.28);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(160, 210, 255, 0.14);
}

.benefit2-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    color: rgba(140, 200, 255, 0.95);
    border: 1px solid rgba(100, 170, 255, 0.55);
    padding: 6px 22px;
    border-radius: 99px;
    margin-bottom: 36px;
}

/* 外箱デザイン案 single showcase */
.benefit2-img-showcase {
    width: clamp(240px, 54vw, 480px);
    margin: 0 auto clamp(24px, 4vw, 40px);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 14px 52px rgba(0, 0, 0, 0.4);
}
.benefit2-img-showcase img {
    width: 100%;
    height: auto;
    display: block;
}

.benefit2-stickers {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(28px, 7vw, 80px);
    margin-bottom: clamp(32px, 5vw, 52px);
}

.benefit2-sticker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.benefit2-sticker-float {
    animation: float 5.5s ease-in-out infinite;
}
.benefit2-sticker:nth-child(2) .benefit2-sticker-float {
    animation: float-alt 6.5s ease-in-out infinite;
}

.benefit2-sticker-img-wrap {
    width: clamp(140px, 22vw, 210px);
    height: clamp(140px, 22vw, 210px);
    border-radius: 22px;
    overflow: hidden;
    display: block;
}
.benefit2-sticker-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.benefit2-sticker-img-wrap:hover img {
    transform: scale(1.06);
}

.benefit2-sticker--ruka .benefit2-sticker-img-wrap {
    border: 3px solid rgba(102, 193, 255, 0.55);
    box-shadow: 0 10px 36px rgba(80, 150, 255, 0.3);
    animation: benefit-glow-ruka 4s ease-in-out infinite;
}
.benefit2-sticker--hinata .benefit2-sticker-img-wrap {
    border: 3px solid rgba(255, 213, 128, 0.55);
    box-shadow: 0 10px 36px rgba(255, 180, 60, 0.3);
    animation: benefit-glow-hinata 4.5s ease-in-out infinite;
}
@keyframes benefit-glow-ruka {
    0%,
    100% {
        box-shadow: 0 10px 36px rgba(80, 150, 255, 0.3);
    }
    50% {
        box-shadow:
            0 16px 52px rgba(80, 150, 255, 0.6),
            0 0 0 6px rgba(102, 193, 255, 0.12);
    }
}
@keyframes benefit-glow-hinata {
    0%,
    100% {
        box-shadow: 0 10px 36px rgba(255, 180, 60, 0.3);
    }
    50% {
        box-shadow:
            0 16px 52px rgba(255, 180, 60, 0.6),
            0 0 0 6px rgba(255, 213, 128, 0.12);
    }
}

.benefit2-label {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
}
.benefit2-sticker--ruka .benefit2-label {
    color: rgba(130, 200, 255, 0.8);
}
.benefit2-sticker--hinata .benefit2-label {
    color: rgba(255, 220, 120, 0.8);
}

.benefit2-text {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 700;
    line-height: 2.1;
    color: rgba(255, 235, 210, 0.95);
    margin-bottom: 0;
}

.benefit2-note {
    font-size: 13px;
    color: rgba(255, 210, 170, 0.65);
    margin-top: 28px;
    line-height: 2;
}

/* ── Mystery lock overlay ── */

/* Mobile */
@media (max-width: 767px) {
    .brand2-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
    }
    .benefit2-stickers {
        gap: 20px;
    }
    .benefit2-sticker-img-wrap {
        width: clamp(120px, 36vw, 160px);
        height: clamp(120px, 36vw, 160px);
    }
}

/* ══════════════════════════════════════
           CTA BUTTON
        ══════════════════════════════════════ */
.cta-wrap {
    text-align: center;
    margin-top: 64px;
}
.btn-magic {
    display: inline-block;
    padding: clamp(16px, 2.5vw, 22px) clamp(44px, 6.5vw, 80px);
    background: linear-gradient(
        120deg,
        #66c1ff,
        #9adfb6,
        #ffd580,
        #9adfb6,
        #66c1ff
    );
    background-size: 300%;
    color: #fff;
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(14px, 2.5vw, 20px);
    font-weight: 900;
    letter-spacing: 0.1em;
    border-radius: var(--r-pill);
    animation:
        rainbow-shift 4s ease infinite,
        magical-glow 3s ease-in-out infinite;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-magic:hover {
    transform: scale(1.06) translateY(-4px);
}

/* ══════════════════════════════════════
           MOUSE SPEC COMPARISON — SPLIT CARDS
        ══════════════════════════════════════ */

/* スペックセクション：完全透明（白い体背景のまま） */
.mspec-fullbleed {
    padding: clamp(80px, 10vw, 130px) clamp(28px, 5vw, 72px)
        clamp(68px, 8.5vw, 120px);
    background: transparent;
}

/* 2カードグリッド */
.mspec-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.8vw, 40px);
    max-width: 1060px;
    margin: 0 auto clamp(44px, 5.5vw, 72px);
}

/* カード外枠（グラデーションボーダー + ホバーリフト） */
.mspec-card {
    border-radius: var(--r-xl);
    padding: 3px;
    background-size: 300%;
    animation: rainbow-shift 6s ease infinite;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease;
}
.mspec-card--ruka {
    background: linear-gradient(
        135deg,
        rgba(102, 193, 255, 0.5),
        rgba(154, 223, 182, 0.38),
        rgba(176, 220, 255, 0.5),
        rgba(154, 223, 182, 0.38),
        rgba(102, 193, 255, 0.5)
    );
    box-shadow:
        0 8px 40px rgba(102, 193, 255, 0.14),
        0 2px 12px rgba(102, 193, 255, 0.1);
}
.mspec-card--hinata {
    background: linear-gradient(
        135deg,
        rgba(255, 213, 128, 0.5),
        rgba(255, 183, 107, 0.38),
        rgba(255, 232, 168, 0.5),
        rgba(255, 183, 107, 0.38),
        rgba(255, 213, 128, 0.5)
    );
    box-shadow:
        0 8px 40px rgba(255, 183, 107, 0.16),
        0 2px 12px rgba(255, 213, 128, 0.12);
    animation-delay: -3s;
}
.mspec-card:hover {
    transform: translateY(-10px);
}
.mspec-card--ruka:hover {
    box-shadow:
        0 24px 64px rgba(102, 193, 255, 0.28),
        0 4px 20px rgba(102, 193, 255, 0.16);
}
.mspec-card--hinata:hover {
    box-shadow:
        0 24px 64px rgba(255, 183, 107, 0.32),
        0 4px 20px rgba(255, 213, 128, 0.2);
}

/* カード内側：版ごとに微妙な色味 */
.mspec-card-inner {
    backdrop-filter: blur(24px);
    border-radius: calc(var(--r-xl) - 2px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mspec-card--ruka .mspec-card-inner {
    background: rgba(236, 249, 255, 0.76);
}
.mspec-card--hinata .mspec-card-inner {
    background: rgba(255, 252, 236, 0.76);
}

/* 上部イラストエリア */
.mspec-card-img {
    padding: clamp(28px, 3.5vw, 52px) clamp(20px, 3vw, 40px)
        clamp(14px, 2vw, 22px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mspec-card--ruka .mspec-card-img {
    background: linear-gradient(
        160deg,
        rgba(102, 193, 255, 0.18) 0%,
        rgba(102, 193, 255, 0.04) 100%
    );
}
.mspec-card--hinata .mspec-card-img {
    background: linear-gradient(
        200deg,
        rgba(255, 213, 128, 0.04) 0%,
        rgba(255, 213, 128, 0.18) 100%
    );
}
.mspec-card-img img {
    width: 100%;
    max-width: clamp(200px, 30vw, 420px);
    border-radius: 10px;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.4s ease;
}
.mspec-card--ruka .mspec-card-img img {
    filter: drop-shadow(0 8px 24px rgba(60, 160, 255, 0.3));
}
.mspec-card--hinata .mspec-card-img img {
    filter: drop-shadow(0 8px 24px rgba(240, 160, 40, 0.3));
}
.mspec-card-img:hover img {
    transform: translateY(-6px) scale(1.02);
}
.mspec-card--ruka .mspec-card-img:hover img {
    filter: drop-shadow(0 14px 36px rgba(60, 160, 255, 0.55));
}
.mspec-card--hinata .mspec-card-img:hover img {
    filter: drop-shadow(0 14px 36px rgba(240, 160, 40, 0.55));
}

/* エディション名 */
.mspec-card-edition {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.mspec-card--ruka .mspec-card-edition {
    background: linear-gradient(
        90deg,
        #0a3870 0%,
        #1a70c8 28%,
        #78d0ff 50%,
        #1a70c8 72%,
        #0a3870 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 220% 100%;
    animation: shimmer-ruka 4s linear infinite;
}
.mspec-card--hinata .mspec-card-edition {
    background: linear-gradient(
        90deg,
        #6a3200 0%,
        #c06818 28%,
        #ffc84a 50%,
        #c06818 72%,
        #6a3200 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 220% 100%;
    animation: shimmer-hinata 4s linear infinite;
}

/* モデル名：バッジスタイル */
.mspec-card-model {
    display: inline-block;
    padding: 3px 14px;
    border-radius: var(--r-pill);
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 900;
    letter-spacing: 0.1em;
    opacity: 1;
}
.mspec-card--ruka .mspec-card-model {
    background: rgba(102, 193, 255, 0.14);
    color: #0a6ea8;
    border: 1px solid rgba(102, 193, 255, 0.3);
}
.mspec-card--hinata .mspec-card-model {
    background: rgba(255, 213, 128, 0.2);
    color: #8a5200;
    border: 1px solid rgba(255, 180, 50, 0.35);
}

/* スペックリスト */
.mspec-card-specs {
    flex: 1;
}
.mspec-card--ruka .mspec-card-specs {
    border-top: 1.5px solid rgba(102, 193, 255, 0.18);
}
.mspec-card--hinata .mspec-card-specs {
    border-top: 1.5px solid rgba(255, 213, 128, 0.24);
}

.mspec-spec-row {
    display: flex;
    border-bottom: 1px solid rgba(102, 193, 255, 0.07);
    transition: background 0.2s ease;
}
.mspec-card--hinata .mspec-spec-row {
    border-bottom-color: rgba(255, 213, 128, 0.1);
}
.mspec-spec-row:last-child {
    border-bottom: none;
}
.mspec-card--ruka .mspec-spec-row:nth-child(even) {
    background: rgba(215, 240, 255, 0.45);
}
.mspec-card--hinata .mspec-spec-row:nth-child(even) {
    background: rgba(255, 243, 205, 0.45);
}
.mspec-card--ruka .mspec-spec-row:hover {
    background: rgba(102, 193, 255, 0.12);
}
.mspec-card--hinata .mspec-spec-row:hover {
    background: rgba(255, 213, 128, 0.12);
}

/* 最初の行（モデル名）を強調 */
.mspec-spec-row:first-child .mspec-spec-val {
    font-weight: 700;
    font-size: clamp(12px, 1.15vw, 15px);
}
.mspec-card--ruka .mspec-spec-row:first-child .mspec-spec-val {
    color: #0a6ea8;
}
.mspec-card--hinata .mspec-spec-row:first-child .mspec-spec-val {
    color: #8a5200;
}

/* ラベル列：左アクセントバー */
.mspec-spec-label {
    flex-shrink: 0;
    width: clamp(76px, 10vw, 104px);
    padding: 11px 10px 11px 14px;
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--text-sub);
    display: flex;
    align-items: center;
}
.mspec-card--ruka .mspec-spec-label {
    border-right: 1px solid rgba(102, 193, 255, 0.14);
    background: rgba(102, 193, 255, 0.06);
}
.mspec-card--hinata .mspec-spec-label {
    border-right: 1px solid rgba(255, 213, 128, 0.18);
    background: rgba(255, 213, 128, 0.06);
}

/* 値列 */
.mspec-spec-val {
    padding: 11px 14px;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    color: var(--text);
    display: flex;
    align-items: center;
}

@media (max-width: 767px) {
    .mspec-split {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mspec-card-img {
        padding: 14px 14px 10px;
    }
    .mspec-card-img img {
        max-width: 100%;
    }
    .mspec-spec-label {
        width: 72px;
        padding: 10px 8px 10px 10px;
        font-size: 10px;
    }
    .mspec-spec-val {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ══════════════════════════════════════
           KEYBOARD SECTION — DARK EDITORIAL
        ══════════════════════════════════════ */
#keyboard {
    /* 瞳の中の水中：白から深海へ — 境界は完全に透明 */
    background:
        /* キャッチライト：中層に配置しy=0%への影響ゼロ */
        radial-gradient(
            ellipse 85% 60% at 50% 42%,
            rgba(40, 185, 255, 0.28) 0%,
            rgba(16, 148, 240, 0.08) 55%,
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #c8eaff 4%,
            #84ccf8 13%,
            #40aef0 24%,
            #189ce0 36%,
            #0880cc 48%,
            #0662b0 58%,
            #044488 68%,
            #022660 78%,
            #011038 87%,
            #060820 93%,
            #0a0a28 100%
        );
    padding: clamp(20px, 3vw, 40px) 0 clamp(80px, 9vw, 120px);
    position: relative;
    overflow: hidden;
}

/* 水面の光が揺れる反射（コースティック細粒） */
#keyboard::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 110%;
    height: 55%;
    background:
        radial-gradient(
            ellipse 13% 8% at 10% 14%,
            rgba(215, 250, 255, 0.42) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 8% 6% at 33% 7%,
            rgba(205, 246, 255, 0.36) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 16% 9% at 60% 20%,
            rgba(210, 248, 255, 0.4) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 6% 5% at 84% 10%,
            rgba(218, 250, 255, 0.38) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 11% 7% at 20% 34%,
            rgba(200, 244, 255, 0.32) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 7% 6% at 50% 27%,
            rgba(196, 242, 255, 0.3) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 9% 6% at 76% 38%,
            rgba(202, 245, 255, 0.32) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 5% 4% at 44% 16%,
            rgba(220, 252, 255, 0.38) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 7% 5% at 92% 28%,
            rgba(208, 246, 255, 0.32) 0%,
            transparent 100%
        );
    pointer-events: none;
    z-index: 0;
    animation: kb-caustic 4s ease-in-out infinite;
}
@keyframes kb-caustic {
    0% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        opacity: 0.4;
    }
    20% {
        transform: scaleX(1.12) scaleY(0.94) skewX(1.5deg);
        opacity: 1;
    }
    48% {
        transform: scaleX(0.92) scaleY(1.08) skewX(-1.1deg);
        opacity: 0.58;
    }
    72% {
        transform: scaleX(1.07) scaleY(0.96) skewX(0.7deg);
        opacity: 0.92;
    }
    100% {
        transform: scaleX(1) scaleY(1) skewX(0deg);
        opacity: 0.4;
    }
}

/* 水中の大きな光のパッチ（シアン系の光の反射） */
.kb-light {
    position: absolute;
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
    background: radial-gradient(
        ellipse at 42% 38%,
        rgba(180, 248, 255, 0.82) 0%,
        rgba(80, 215, 255, 0.42) 30%,
        rgba(40, 185, 245, 0.14) 60%,
        transparent 100%
    );
    filter: blur(8px);
    pointer-events: none;
    z-index: 0;
    animation: kb-light-move var(--dur, 4.5s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes kb-light-move {
    0%,
    100% {
        opacity: var(--op, 0.48);
    }
    28% {
        opacity: calc(var(--op, 0.48) * 2);
    }
    55% {
        opacity: calc(var(--op, 0.48) * 1.1);
    }
    80% {
        opacity: calc(var(--op, 0.48) * 1.7);
    }
}

/* 水中の気泡：光が反射するエアーバブル */
.kb-bubble {
    position: absolute;
    border-radius: 50%;
    background:
        /* キャッチライト：光の当たる点（左上） */
        radial-gradient(
            circle at 30% 28%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(215, 244, 255, 0.24) 18%,
            transparent 42%
        ),
        /* 下側の映り込み */
        radial-gradient(
                circle at 68% 72%,
                rgba(128, 210, 255, 0.14) 0%,
                transparent 48%
            ),
        /* バブルのリム（縁の光） */
        radial-gradient(
                circle at 50% 50%,
                transparent 50%,
                rgba(150, 220, 255, 0.13) 72%,
                rgba(130, 210, 255, 0.26) 100%
            );
    border: 1px solid rgba(165, 226, 255, 0.34);
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
    animation: kb-bubble-rise var(--dur, 11s) ease-in var(--dl, 0s) infinite;
}
@keyframes kb-bubble-rise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    8% {
        opacity: var(--op, 0.75);
    }
    44% {
        transform: translateY(calc(var(--h, -68vh) * 0.44))
            translateX(var(--sx, 9px));
    }
    82% {
        opacity: var(--op, 0.75);
    }
    100% {
        transform: translateY(var(--h, -68vh))
            translateX(calc(var(--sx, 9px) * -0.4));
        opacity: 0;
    }
}

/* 水中の光の粒（マウスパッドの星と同じ手法） */
#keyboard::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* ── 上層：水面に近い光の揺らめき ── */
        radial-gradient(
            circle 3px at 11% 11%,
            rgba(205, 242, 255, 0.65) 0%,
            rgba(150, 215, 255, 0.12) 55%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 32% 7%,
            rgba(215, 246, 255, 0.55) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 54% 15%,
            rgba(200, 240, 255, 0.6) 0%,
            rgba(145, 212, 255, 0.1) 55%,
            transparent 100%
        ),
        radial-gradient(
            circle 3px at 73% 9%,
            rgba(208, 243, 255, 0.58) 0%,
            rgba(152, 216, 255, 0.12) 55%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 90% 18%,
            rgba(220, 248, 255, 0.7) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 22% 21%,
            rgba(195, 238, 255, 0.5) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 64% 23%,
            rgba(210, 244, 255, 0.52) 0%,
            transparent 100%
        ),
        /* ── 中層：揺れる光の粒 ── */
        radial-gradient(
                circle 2px at 7% 34%,
                rgba(170, 228, 255, 0.44) 0%,
                rgba(120, 200, 248, 0.08) 55%,
                transparent 100%
            ),
        radial-gradient(
            circle 1px at 24% 29%,
            rgba(182, 233, 255, 0.48) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 45% 40%,
            rgba(162, 226, 255, 0.42) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 62% 27%,
            rgba(178, 231, 255, 0.46) 0%,
            rgba(122, 202, 248, 0.08) 55%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 81% 36%,
            rgba(192, 236, 255, 0.5) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 94% 31%,
            rgba(168, 226, 255, 0.44) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 38% 44%,
            rgba(158, 222, 255, 0.4) 0%,
            transparent 100%
        ),
        /* ── 深層：かすかな生物発光 ── */
        radial-gradient(
                circle 1px at 16% 57%,
                rgba(100, 190, 240, 0.34) 0%,
                transparent 100%
            ),
        radial-gradient(
            circle 2px at 39% 63%,
            rgba(90, 185, 238, 0.3) 0%,
            rgba(60, 160, 220, 0.06) 55%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 58% 52%,
            rgba(110, 195, 242, 0.36) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 77% 60%,
            rgba(95, 188, 240, 0.32) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 2px at 91% 68%,
            rgba(85, 180, 235, 0.28) 0%,
            transparent 100%
        ),
        /* ── 深海底：極めて希薄な発光 ── */
        radial-gradient(
                circle 1px at 27% 79%,
                rgba(60, 160, 220, 0.22) 0%,
                transparent 100%
            ),
        radial-gradient(
            circle 1px at 52% 84%,
            rgba(55, 155, 218, 0.2) 0%,
            transparent 100%
        ),
        radial-gradient(
            circle 1px at 74% 76%,
            rgba(65, 165, 224, 0.24) 0%,
            transparent 100%
        );
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: kb-sparkle 6s ease-in-out infinite;
}
@keyframes kb-sparkle {
    0%,
    100% {
        opacity: 0.5;
    }
    45% {
        opacity: 1;
    }
    75% {
        opacity: 0.68;
    }
}

.kbnew-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 60px);
    position: relative;
    z-index: 1;
}

/* Header */
.kbnew-header {
    text-align: center;
    margin-bottom: clamp(52px, 7vw, 96px);
    padding-top: clamp(32px, 4vw, 60px);
}
.kbnew-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(102, 193, 255, 0.9);
    margin-bottom: 20px;
    border: 1px solid rgba(102, 193, 255, 0.4);
    padding: 5px 16px;
    border-radius: 99px;
}
.kbnew-ja {
    font-family: "Mochiy Pop One", "Nunito", sans-serif;
    font-size: clamp(22px, 5.5vw, 58px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    text-shadow: 0 0 48px rgba(102, 193, 255, 0.28);
}
.kbnew-en {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 700;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.5);
}

.kbnew-product-name {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: clamp(8px, 3.6vw, 28px);
    white-space: nowrap;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 0 24px rgba(102, 193, 255, 0.6);
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 12px;
}

/* Full-width keyboard image */
.kbnew-img-full {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 48px rgba(102, 193, 255, 0.14));
}
.kbnew-img-full img {
    width: 100%;
    display: block;
    transition: transform 0.7s ease;
}
.kbnew-img-full:hover img {
    transform: scale(1.012);
}

/* Intro quote */
.kbnew-intro {
    max-width: 620px;
    margin: 0 auto clamp(80px, 7.5vw, 106px);
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 2.3;
    padding: 0 20px;
    position: relative;
    overflow-wrap: break-word;
    word-break: auto-phrase;
}
.kbnew-intro p + p {
    margin-top: 0.8em;
}
.kbnew-intro::before,
.kbnew-intro::after {
    content: "";
    position: absolute;
    top: 2px;
    color: rgba(102, 193, 255, 0.28);
    font-size: 13px;
    animation: twinkle 3s ease-in-out infinite;
}
.kbnew-intro::before {
    left: 0;
}
.kbnew-intro::after {
    right: 0;
    animation-delay: 1.5s;
}

/* Feature rows */
.kbnew-feat {
    display: flex;
    align-items: center;
    gap: clamp(32px, 5.5vw, 80px);
}
.kbnew-feat__vis {
    flex: 0 0 clamp(180px, 30vw, 260px);
    position: relative;
}
.kbnew-feat__vis img {
    width: 100%;
    display: block;
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.45));
}
.kbnew-feat__vis--rect {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.kbnew-feat__vis--rect img {
    width: auto;
    max-width: clamp(220px, 22vw, 270px);
    border-radius: 10px;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.45));
    animation: none;
}
.kbnew-feat__body {
    flex: 1;
}
.kbnew-feat__label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #66c1ff;
    margin-bottom: 14px;
    opacity: 1;
}
.kbnew-feat__text {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 2.25;
    overflow-wrap: break-word;
}
.kbnew-feat__text strong {
    color: #b8e0ff;
    font-weight: 700;
}

/* Thin divider between features */
.kbnew-divider {
    width: 64px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(102, 193, 255, 0.28),
        transparent
    );
    margin: clamp(44px, 5.5vw, 72px) auto;
}

/* Bottom description glass box */
.kbnew-bottom-box {
    margin: 0 auto clamp(52px, 6.5vw, 80px);
    max-width: 620px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 52px);
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 2.25;
    backdrop-filter: blur(10px);
    overflow-wrap: break-word;
    word-break: auto-phrase;
}
.kbnew-bottom-box strong {
    color: #b8e0ff;
    font-weight: 700;
}

/* Custom keycap row */
.kbnew-keycap-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3.5vw, 52px);
    margin-bottom: clamp(48px, 6vw, 72px);
    overflow: visible;
}
.kbnew-keycap-imgs {
    flex: 0 0 clamp(300px, 62%, 580px);
    overflow: visible;
}
.kbnew-keycap-imgs img {
    width: 100%;
    display: block;
    transform: rotate(4deg) scale(1.06);
    transform-origin: center bottom;
    filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.5));
    border-radius: 10px;
    transition: transform 0.5s ease;
}
.kbnew-keycap-imgs img:hover {
    transform: rotate(2deg) scale(1.08);
}
.kbnew-speech {
    background: #fff;
    border-radius: 999px;
    padding: clamp(20px, 2.8vw, 30px) clamp(28px, 4vw, 46px);
    position: relative;
    font-size: clamp(14px, 1.3vw, 16px);
    font-family: "Mamelon", "Nunito", sans-serif;
    font-weight: 700;
    color: #3a2d45;
    line-height: 2;
    flex-shrink: 0;
    min-width: 150px;
    text-align: center;
    white-space: nowrap;
    animation: bubble-breathe 4s ease-in-out infinite;
}
.kbnew-speech::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-right-color: #fff;
}

/* CTA row */
.kbnew-cta {
    text-align: center;
    margin-bottom: 0;
}
.sec-cta {
    text-align: center;
    padding: clamp(32px, 5vw, 56px) 0 clamp(20px, 3vw, 36px);
}

/* Designer card */
.kbnew-designer {
    max-width: 515px;
    margin: 0 auto clamp(36px, 4.5vw, 56px);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    padding: clamp(20px, 2.5vw, 32px) clamp(22px, 3vw, 40px);
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    transition:
        background 0.35s ease,
        border-color 0.35s ease;
}
.kbnew-designer:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(102, 193, 255, 0.32);
}
.kbnew-designer .designer-ava {
    box-shadow:
        0 0 0 3px rgba(102, 193, 255, 0.52),
        0 4px 20px rgba(0, 0, 0, 0.32);
}
.kbnew-designer .designer-role {
    color: #66c1ff;
}
.kbnew-designer .designer-name {
    color: #fff;
}
.kbnew-designer .designer-bio {
    color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 767px) {
    .kbnew-feat {
        flex-direction: column;
        gap: 28px;
    }
    .kbnew-feat__vis {
        flex: 0 0 auto;
        width: clamp(160px, 52vw, 220px);
        margin: 0 auto;
        order: -1;
    }
    .kbnew-feat__text {
        padding-left: 0;
    }
    .kbnew-feat__label {
        text-align: center;
    }
    .kbnew-keycap-row {
        flex-direction: column;
        gap: 24px;
    }
    .kbnew-speech::before {
        left: 50%;
        top: -12px;
        transform: translateX(-50%);
        border-color: transparent;
        border-bottom-color: #fff;
    }
    .kbnew-designer {
        flex-direction: column;
        text-align: center;
    }
    .kbnew-speech {
        white-space: normal;
        min-width: unset;
        width: 100%;
    }
}

/* ══════════════════════════════════════
           FOOTER
        ══════════════════════════════════════ */
.grad-line {
    display: none;
}
footer {
    background: #ffffff;
    color: rgba(80, 70, 60, 0.55);
    text-align: center;
    padding: 56px 28px;
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 2.6;
    position: relative;
}

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 32px;
    z-index: 120;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}
.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    transform: translateY(-4px);
}
.back-to-top__arrow {
    font-size: 16px;
    color: #ffd580;
    line-height: 1;
}
.back-to-top__text {
    writing-mode: vertical-rl;
    font-family: "Nunito", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: #ffd580;
}
.back-to-top__paw {
    width: 28px;
    height: auto;
    margin-top: 2px;
}
.footer-brand {
    font-family: "Mamelon", "Nunito", sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(90deg, var(--blue), var(--mint), var(--yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
footer a {
    color: var(--blue);
}

/* ══════════════════════════════════════
           DECORATIVE STARS (per-section)
        ══════════════════════════════════════ */
.sec-star {
    position: absolute;
    pointer-events: none;
    color: var(--c, rgba(102, 193, 255, 0.38));
    font-size: var(--fs, 16px);
    animation: twinkle var(--d, 3s) ease-in-out infinite var(--dl, 0s);
}

/* ══════════════════════════════════════
           PC RESPONSIVE  1366 / 1440 / 1920
        ══════════════════════════════════════ */

/* ─ 1366 × 768  ベース ────────────── */
section {
    padding: 80px 0;
}
.sec-sub {
    margin-bottom: 52px;
}
.mouse-product {
    margin-bottom: 72px;
}
.pad-product {
    margin-bottom: 64px;
}

/* ─ 1440 × 900 ──────────────────────── */
@media (min-width: 1440px) {
    .container {
        max-width: 1160px;
    }
    section {
        padding: 96px 0;
    }
    .sec-sub {
        margin-bottom: 64px;
    }
    .mouse-product {
        margin-bottom: 88px;
    }
    .pad-product {
        margin-bottom: 80px;
    }
    .hero-ring--1 {
        width: 620px;
        height: 620px;
    }
    .hero-ring--2 {
        width: 800px;
        height: 800px;
    }
    .hero-char {
        height: 82vh;
    }
    .hero-top {
        padding-top: clamp(30px, 3.5vh, 50px);
    }
}

/* ─ 1920 × 1080 ─────────────────────── */
@media (min-width: 1920px) {
    .container {
        max-width: 1400px;
    }
    section {
        padding: 110px 0;
    }
    .sec-sub {
        margin-bottom: 72px;
    }
    .mouse-product {
        margin-bottom: 100px;
        gap: 100px;
    }
    .kb-product {
        gap: 100px;
    }
    .pad-product {
        margin-bottom: 88px;
        gap: 100px;
    }
    .brand-grid {
        max-width: 1100px;
        gap: 48px;
    }
    .hero-logo-img {
        width: 360px;
    }
    .hero-ring--1 {
        width: 720px;
        height: 720px;
    }
    .hero-ring--2 {
        width: 920px;
        height: 920px;
    }
    .hero-char {
        height: 84vh;
    }
    .wp-imgwrap {
        max-width: 860px;
    }
    .wp-textbox {
        max-width: 840px;
    }
    .collab-bubble {
        max-width: 840px;
    }
    .benefit-outer {
        max-width: 900px;
    }
}

/* ══════════════════════════════════════
   MOBILE & TABLET  360~1024
══════════════════════════════════════ */

/* ─ iPad landscape 1024 × 768 ────────── */
@media (max-width: 1365px) {
    .container {
        max-width: 100%;
        padding: 0 32px;
    }
    section {
        padding: 72px 0;
    }
    .sec-sub {
        margin-bottom: 44px;
    }
    .hero-char {
        height: 76vh;
    }
    .hero-logo-img {
        width: clamp(200px, 22vw, 300px);
    }
    .mouse-product,
    .pad-product {
        gap: 48px;
    }
    .pad2-row {
        gap: 36px;
    }
    .kb-product {
        gap: 48px;
    }
}

/* ─ Desktop 2-col layout ──────────────── */
@media (min-width: 1024px) {
    .pad2-en-main {
        font-size: clamp(24px, 3vw, 36px);
    }
}

/* ─ iPad portrait 768 × 1024 ──────────── */
@media (max-width: 1023px) {
    section {
        padding: 64px 0;
    }
    .sec-sub {
        margin-bottom: 40px;
    }
    .hero-logo-img {
        width: clamp(180px, 30vw, 280px);
    }
    .hero-char {
        height: 70vh;
        max-width: 50vw;
    }
    .hero-ring--1 {
        width: 420px;
        height: 420px;
    }
    .hero-ring--2 {
        width: 560px;
        height: 560px;
    }
    .mouse-product,
    .kb-product,
    .pad-product {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .pad2-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pad2-row--hinata .pad2-imgbox {
        order: -1;
    }
    .pad2-row--ruka .pad2-imgbox {
        order: -1;
    }
    .pad2-type-chibi {
        width: clamp(155px, 34vw, 220px);
    }
    .pad2-type-wrapper {
        padding-top: clamp(50px, 6vw, 65px);
    }
    .kb-product--rev .kb-product__vis {
        order: -1;
    }
    .brand-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
    .compare-grid {
        max-width: 540px;
    }
    .mouse-product {
        margin-bottom: 56px;
    }
    .pad-product {
        margin-bottom: 52px;
    }
}

/* ─ スマートフォン 360〜412 × 800〜915 ── */
@media (max-width: 767px) {
    body {
        background-attachment: scroll;
    }
    .site-header {
        padding: 8px 16px;
        gap: 8px;
        height: auto;
        min-height: 56px;
    }
    .header-brand {
        font-size: 9.5px;
        flex-shrink: 1;
        min-width: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
        line-height: 1.6;
    }
    .header-brand-break {
        display: block;
    }
    .site-nav {
        display: none;
    }
    .hamburger {
        display: flex;
        flex-shrink: 0;
        align-self: flex-start;
        margin-top: 2px;
    }
    .mobile-menu {
        display: flex;
        top: 58px;
    }
    .float-reserve {
        font-size: 11px;
        padding: 16px 8px;
    }
    .container {
        padding: 0 16px;
    }
    section {
        padding: 52px 0;
    }
    .sec-sub {
        margin-bottom: 32px;
        font-size: 10px;
    }

    /* スクロールインジケーター：モバイルのみ表示 */
    .hero-scroll {
        display: flex;
        bottom: 12px;
        left: 6px;
        z-index: 15;
    }

    /* モバイル：キャラクター순次フェードイン */
    @keyframes mobile-char-fadein {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* ひなた：先に登場 */
    .hero-char--hinata {
        animation:
            mobile-char-fadein 1s ease 0.3s both,
            hero-glow 7s ease-in-out 1.3s infinite;
    }

    /* ルカ：少し遅れて登場 */
    .hero-char--ruka {
        animation:
            mobile-char-fadein 1s ease 0.9s both,
            hero-glow 7s ease-in-out 1.9s infinite;
    }

    /* ── Hero mobile: 対角レイアウト（元の背景） ── */
    .hero {
        height: 100svh;
        min-height: 520px;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        background:
            radial-gradient(
                ellipse 65% 90% at 18% 65%,
                rgba(175, 220, 248, 0.6) 0%,
                transparent 65%
            ),
            radial-gradient(
                ellipse 65% 90% at 82% 65%,
                rgba(255, 222, 160, 0.5) 0%,
                transparent 65%
            ),
            linear-gradient(160deg, #e4f3fb 0%, #eff8f4 50%, #fdf3e3 100%);
    }

    /* オーバーレイ：ヘッダー保護のみ */
    .hero::after {
        height: 10%;
        background: linear-gradient(
            to bottom,
            rgba(234, 245, 252, 0.65) 0%,
            transparent 100%
        );
    }

    /* ロゴ：右上に絶対配置 */
    .hero-top {
        position: absolute;
        top: calc(52px + 4vw);
        right: 14px;
        left: auto;
        padding: 0;
        align-self: unset;
        z-index: 12;
        pointer-events: none;
    }
    .hero-logo-img {
        width: clamp(170px, 52vw, 230px);
        mix-blend-mode: multiply;
    }

    /* hero-chars を static にして .hero を直接の基準にする */
    .hero-chars {
        position: static;
        display: block;
    }
    /* .hero(position:relative) を基準に絶対配置
       高さ・flex-end 継承を全てリセット */
    .hero-char-wrap {
        position: absolute;
        width: 82%;
        height: auto !important; /* base CSS の height:100% を無効化 */
        display: block !important; /* flex-end を無効化 */
        overflow: visible;
    }
    /* ひなた: 左に20%はみ出し */
    .hero-char-wrap:last-child {
        top: 64px;
        left: -20%;
        width: 110%;
        z-index: 6;
    }
    /* ルカ: 右に25%はみ出し・画面最下部に配置 */
    .hero-char-wrap:first-child {
        top: auto;
        bottom: 0;
        right: -20%;
        width: 110%;
        z-index: 7;
    }
    /* max-width 継承もリセット・自然比率で全体表示 */
    .hero-char {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        vertical-align: bottom;
        margin-bottom: 0 !important;
    }

    .hero-ring--1 {
        display: none;
    }
    .hero-ring--2 {
        display: none;
    }

    .mouse-product,
    .kb-product,
    .pad-product {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pad2-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pad2-row--hinata .pad2-imgbox {
        order: -1;
    }
    .pad2-row--ruka .pad2-imgbox {
        order: -1;
    }
    .kb-product--rev .kb-product__vis {
        order: -1;
    }
    .brand-grid {
        grid-template-columns: 1fr;
    }
    .compare-grid {
        grid-template-columns: 1fr;
    }
    .mouse-product {
        margin-bottom: 48px;
    }
    .pad-product {
        margin-bottom: 44px;
    }

    /* マウスパネル モバイル */
    .mp-model-line {
        white-space: normal;
        font-size: clamp(24px, 7vw, 36px);
    }
    .mouse-panel {
        padding: 40px 20px;
        min-height: auto;
    }
    .mouse-panel--ruka {
        padding-bottom: 72px;
    }
    .mouse-panel--ruka,
    .mouse-panel--hinata {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* ── Ruka: 마우스명 → 이미지 → 설명 ── */
    .mp-sectitle {
        order: 1;
    }
    .mouse-panel--ruka .mp-info-col {
        display: contents;
    }
    .mouse-panel--ruka .mp-model-header {
        order: 2;
        width: 100%;
        margin-top: 52px;
    }
    .mouse-panel--ruka .mp-mouse-col {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
        margin: -32px 0;
    }
    .mouse-panel--ruka .mp-desc {
        order: 4;
        width: 100%;
    }
    .mouse-panel--ruka .mp-detail {
        order: 5;
        width: 100%;
    }

    /* ── Hinata: 기존 순서 유지 ── */
    .mp-header {
        order: 1;
        width: 100%;
        margin-top: 20px;
    }
    .mouse-panel--hinata .mp-mouse-col {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
        margin: -20px 0;
    }
    .mp-desc-col {
        order: 3;
        width: 100%;
    }

    .mp-mouse-img {
        width: 90vw;
        max-width: 420px;
    }
    .mini-wrap {
        width: 60px;
        height: 60px;
    }
    .kb-deco {
        display: none;
    }
    .pad-vis__deco {
        display: none;
    }
    .mouse-panel--ruka .mp-model-header .mp-chibi-wrap {
        position: relative;
        top: 15px;
    }
    .mouse-panel--hinata .mp-chibi-wrap {
        position: relative;
        top: 15px;
    }
    .designer-card {
        max-width: 100%;
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .benefit-list {
        max-width: 100%;
    }
    #about {
        padding: 32px 0 4px;
    }
    .about-logos {
        gap: 12px;
    }
    .about-logo-wp {
        width: clamp(100px, 36vw, 160px);
    }
    .about-logo-ds {
        width: clamp(80px, 28vw, 130px);
    }
    .about-chibi {
        width: clamp(64px, 16vw, 100px);
    }
    .wp-textbox,
    .collab-bubble {
        padding: 20px 16px;
    }
    .about-collab-wrap {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .collab-bubble {
        order: 1;
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: 12px;
        border-radius: 14px;
    }
    /* キャラクター：左右並べを強制 */
    .about-chibi-wrap {
        order: 2;
        flex: 0 0 44%;
        margin: 0 4px;
    }
    .about-chibi-wrap img {
        width: 100%;
        height: auto;
    }
    .about-chibi--left {
        margin-right: 4px;
        width: 44%;
    }
    .about-chibi--right {
        margin-left: 4px;
        flex: 0 0 40%;
    }
    .back-to-top {
        display: flex;
    }
    .hero-char:hover {
        transform: none;
        filter: drop-shadow(0 20px 48px rgba(102, 193, 255, 0.2));
    }
}

/* ─ 小型スマートフォン 〜 390px ──────── */
@media (max-width: 390px) {
    section {
        padding: 44px 0;
    }
    .hero-top {
        padding-top: clamp(40px, 6svh, 88px);
        padding-right: 12px;
    }
    .hero-logo-img {
        width: 125px;
    }
    .hero-scroll {
        left: 12px;
        bottom: 32px;
    }
    .hero-ring--1 {
        width: 260px;
        height: 260px;
    }
    .hero-ring--2 {
        width: 340px;
        height: 340px;
    }
    .sec-title {
        font-size: 20px;
    }
    .product-name,
    .kb-title,
    .pad-name {
        font-size: 17px;
    }
    .kawaii-card {
        padding: 20px 16px;
    }
    .benefit-inner {
        padding: 32px 20px;
    }
}
@media (max-width: 343px) {
    .mouse-panel--ruka .mp-chibi-wrap,
    .mouse-panel--hinata .mp-chibi-wrap {
        width: clamp(60px, 11vw, 130px);
        height: auto;
    }
    .mouse-panel--ruka .mp-model-header .mp-chibi-wrap {
        position: relative;
        top: 4px;
    }
    .mouse-panel--hinata .mp-chibi-wrap {
        position: relative;
        top: 4px;
    }
}