/* =========================================
   Kobo LP - ブランド固有スタイル
   共通スタイルは lp-common.css を参照
   ========================================= */

/* Kobo/楽天ブランドカラー */
:root {
    --rakuten-red: #bf0000;
    --rakuten-crimson: #a5001a;
    --rakuten-pink: #ffe6eb;
    --points-gold: #f8c200;
    --text-color: #2c2c2c;
    --font-main: 'Noto Sans JP', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
}

/* 背景グラデーション */
body {
    background: radial-gradient(circle at 20% 20%, #fff1f4 0%, #ffffff 40%), #fff;
}

/* 通知バー - Kobo */
.notice-bar {
    background: var(--rakuten-crimson);
}

/* ヘッダー - Kobo */
.lp-header {
    border-bottom: 4px solid var(--rakuten-red);
}

.logo {
    color: var(--rakuten-red);
}

.lp-header nav a:hover {
    color: var(--rakuten-red);
    text-decoration: underline;
}

.lp-header nav a.btn {
    background: var(--rakuten-red);
    box-shadow: 0 2px 8px rgba(191, 0, 0, 0.2);
}

/* ボタン - Kobo */
.btn-primary {
    background: linear-gradient(135deg, var(--rakuten-red), var(--rakuten-crimson));
    color: #fff;
    border: 1px solid var(--rakuten-crimson);
}

.btn-primary:hover {
    box-shadow: 0 6px 12px rgba(191, 0, 0, 0.25);
}

.btn-secondary {
    background: #fff;
    color: var(--rakuten-crimson);
    border: 1px solid var(--rakuten-crimson);
}

.btn-secondary:hover {
    background: #fff4f7;
}

.btn.brand-rakuten {
    background: linear-gradient(135deg, var(--rakuten-red), var(--rakuten-crimson));
    color: #fff;
    border: 1px solid var(--rakuten-crimson);
}

/* ヒーロー - Kobo */
.hero {
    background: linear-gradient(135deg, #fff7fb 0%, #fff 55%, #ffe8ef 100%);
    border-bottom: 1px solid #f6dce3;
}

.hero-badge {
    background: var(--points-gold);
    color: #3d2500;
}

.hero h1 span {
    color: var(--rakuten-red);
}

.hero-subtitle {
    border-left: 5px solid var(--rakuten-red);
}

/* ポイントバッジ */
.points-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    width: 110px;
    height: 110px;
    background: var(--rakuten-red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    border: 3px solid #fff;
    transform: rotate(10deg);
    z-index: 2;
}

.points-badge .num {
    font-size: 2rem;
    line-height: 1;
}

.points-badge .text {
    font-size: 0.8rem;
}

/* デバイスモックアップ - Kobo */
.device-mockup {
    background: #1e1e1e;
}

.device-content h3 {
    color: var(--rakuten-red);
    border-bottom: 2px solid var(--rakuten-red);
}

/* 特徴セクション - Kobo */
.features h2 span {
    color: var(--rakuten-red);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--rakuten-red), var(--rakuten-crimson));
}

.feature-card:hover {
    border-color: var(--rakuten-red);
}

.feature-card h3 {
    color: var(--rakuten-crimson);
}

/* CTAセクション - Kobo */
.cta-section .btn {
    background: var(--rakuten-red);
    color: #fff;
    border: 1px solid var(--rakuten-crimson);
    box-shadow: 0 8px 18px rgba(191, 0, 0, 0.16);
}

.cta-section .btn:hover {
    box-shadow: 0 12px 22px rgba(191, 0, 0, 0.22);
}

/* 比較テーブル - Kobo */
.comparison {
    background: #fff7fb;
}

.comparison-table-wrapper {
    border: 1px solid #f0d7dd;
}

th {
    background: #fff4f7;
    border-bottom: 2px solid var(--rakuten-red);
}

th,
td {
    border-bottom: 1px solid #f0d7dd;
    border-right: 1px solid #f0d7dd;
}

/* CTAバナー - Kobo */
.cta-banner {
    background: linear-gradient(135deg, #ffe5ec 0%, #fff 60%, #ffeef4 100%);
    border-top: 1px solid #ffd6e1;
    border-bottom: 1px solid #ffd6e1;
}

.cta-banner h2 {
    color: var(--rakuten-red);
}

/* クロスリンク - Kobo */
.cross-links {
    background: #fff7fb;
    border-top: 1px solid #ffd6e1;
}

.cross-links h2 {
    color: var(--rakuten-crimson);
}

/* フッター - Kobo */
footer {
    background: #fdf4f7;
    border-top: 1px solid #f0d7dd;
}

footer a {
    color: var(--rakuten-crimson);
}

/* レスポンシブ - Kobo */
@media (max-width: 768px) {
    .points-badge {
        right: 50%;
        transform: translateX(60%) rotate(10deg);
    }
}