/**
 * フォンくま式LP共通スタイル（Addness構造ベース）
 *
 * 設計思想：
 * - モバイルファースト（最大幅480px〜720px）
 * - 全要素はGutenbergコアブロックで構成
 * - ダッシュボードから編集してもデザインが崩れにくい
 *
 * 配色：
 * - メイン: phonkuma-bear-blue (#3B7CCF)
 * - 文字: phonkuma-navy (#1B2A4A)
 * - 背景: phonkuma-sky (#E6F0F8) / 白
 * - 強調: phonkuma-red (#E53935) / phonkuma-gold (#C9A84C)
 * - LINE: phonkuma-line-green (#06C755)
 */

/* ===== Color tokens（CSSフォールバック）===== */
:root {
    --phonkuma-bear-blue: #3B7CCF;
    --phonkuma-bear-blue-light: #87B0E0;
    --phonkuma-navy: #1B2A4A;
    --phonkuma-navy-deep: #0F1A33;
    --phonkuma-sky: #E6F0F8;
    --phonkuma-gold: #C9A84C;
    --phonkuma-gold-light: #F5D77E;
    --phonkuma-cream: #F5F1E1;
    --phonkuma-red: #E53935;
    --phonkuma-line-green: #06C755;
    --phonkuma-bg-dark: #0A0A0A;
    --phonkuma-soft-text: #4A5A75;
}

/* ===== ベースリセット ===== */
.phonkuma-section {
    padding: 48px 24px;
    max-width: none;
}
.phonkuma-section h1, .phonkuma-section h2, .phonkuma-section h3, .phonkuma-section h4 {
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
.phonkuma-section p {
    line-height: 1.9;
}

/* ===== Helper colors ===== */
.phonkuma-blue { color: var(--phonkuma-bear-blue); font-weight: 900; }
.phonkuma-red  { color: var(--phonkuma-red); font-weight: 900; }
.phonkuma-gold { color: var(--phonkuma-gold); font-weight: 700; }
.phonkuma-blue-bg {
    background: var(--phonkuma-bear-blue);
    color: #fff;
    padding: 4px 14px;
    border-radius: 4px;
    display: inline-block;
}
.phonkuma-blue-line {
    background: linear-gradient(transparent 65%, #FFEB3B 65%);
    padding: 0 4px;
}
.phonkuma-emphasis {
    font-size: 1.6em;
    font-weight: 900;
    color: var(--phonkuma-bear-blue);
    text-decoration: underline;
    text-decoration-color: #FFEB3B;
    text-decoration-thickness: 6px;
    text-underline-offset: 4px;
}
.phonkuma-blue-fade {
    background: linear-gradient(180deg, var(--phonkuma-bear-blue) 0%, var(--phonkuma-navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 64px;
    letter-spacing: 0.1em;
}
.phonkuma-blue-stripe { color: var(--phonkuma-bear-blue); margin-right: 6px; }

/* ===== Countdown ===== */
.phonkuma-countdown { padding: 16px; max-width: 520px; margin: 0 auto; }
.phonkuma-countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.phonkuma-countdown-cell {
    background: #fff; color: var(--phonkuma-navy); border: 2px solid var(--phonkuma-navy);
    border-radius: 6px; padding: 10px 4px; text-align: center;
    font-weight: 800; font-size: 26px; line-height: 1;
    box-shadow: 0 2px 0 var(--phonkuma-navy);
}
.phonkuma-countdown-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; text-align: center; }
.phonkuma-countdown-labels span { font-size: 11px; color: var(--phonkuma-soft-text); font-weight: 600; }
.phonkuma-countdown-note {
    background: rgba(27, 42, 74, 0.05); border-radius: 8px; padding: 10px 14px;
    margin-top: 14px; text-align: center;
}
.phonkuma-countdown-arrow { color: var(--phonkuma-navy); font-weight: 700; text-decoration: underline; }
.phonkuma-countdown-note small { display: block; color: #888; font-size: 11px; margin-top: 4px; }

/* ============================================================
   ヒーロー
   ============================================================ */
.phonkuma-hero { padding: 32px 24px; text-align: center; }
.phonkuma-hero h2 { font-size: 28px; margin-bottom: 12px; }
.phonkuma-hero p strong { font-size: 18px; }

.phonkuma-hero-main { padding: 24px; text-align: center; position: relative; }
.phonkuma-bubble {
    display: inline-block;
    background: var(--phonkuma-bear-blue);
    color: #fff;
    padding: 6px 24px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    margin-bottom: 24px;
}
.phonkuma-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--phonkuma-bear-blue);
}
.phonkuma-hero-headline {
    font-size: 28px !important;
    line-height: 1.6 !important;
    color: var(--phonkuma-navy);
    margin: 16px 0 24px !important;
}
.phonkuma-hero-headline .phonkuma-blue {
    background: linear-gradient(transparent 65%, #FFEB3B 65%);
    color: var(--phonkuma-bear-blue);
    padding: 0 4px;
}
.phonkuma-hero-portrait img {
    max-width: 320px;
    height: auto;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.phonkuma-hero-tag {
    background: linear-gradient(90deg, var(--phonkuma-gold), #f5d77e);
    color: var(--phonkuma-navy);
    padding: 12px 18px;
    border-radius: 4px;
    font-weight: 700;
    margin-top: 16px;
    display: inline-block;
}

/* ============================================================
   プロミス
   ============================================================ */
.phonkuma-promise { text-align: center; padding: 40px 24px; }
.phonkuma-promise p { color: rgba(255,255,255,0.9); }
.phonkuma-promise h2 { margin: 12px 0; font-size: 28px !important; line-height: 1.5 !important; }

.phonkuma-promise-2 { padding: 60px 24px; text-align: center; }
.phonkuma-promise-2-title { font-size: 28px !important; line-height: 1.6 !important; }

/* ============================================================
   キャンペーンカード
   ============================================================ */
.phonkuma-campaign { padding: 40px 24px; text-align: center; }
.phonkuma-campaign-title {
    font-size: 22px !important;
    color: var(--phonkuma-navy);
    line-height: 1.6;
    margin-bottom: 24px;
}
.phonkuma-campaign-title .phonkuma-red { display: inline-block; margin-top: 4px; }
.phonkuma-campaign-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(27,42,74,0.1);
}
.phonkuma-campaign-list { list-style: none; padding: 0; }
.phonkuma-campaign-list li {
    background: var(--phonkuma-bear-blue);
    color: #fff;
    padding: 8px 16px;
    margin: 8px 0;
    border-radius: 4px;
    font-weight: 700;
    text-align: left;
    position: relative;
}
.phonkuma-campaign-list li::before {
    content: '✓';
    margin-right: 8px;
    color: var(--phonkuma-gold-light);
    font-weight: 900;
}
.phonkuma-zero-yen {
    margin: 16px 0 !important;
    line-height: 1 !important;
}

/* ============================================================
   オプトインフォーム
   ============================================================ */
.phonkuma-optin-form {
    margin-top: 24px;
    text-align: center;
}
.phonkuma-optin-form input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.phonkuma-form-bubble {
    display: inline-block;
    background: var(--phonkuma-red);
    color: #fff;
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    margin: 0 0 12px;
}
.phonkuma-form-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--phonkuma-red);
}
.phonkuma-optin-form button {
    width: 100%;
    background: linear-gradient(180deg, #ff8a00 0%, #f57c00 100%);
    color: #fff;
    border: none;
    padding: 18px 24px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 0 #c66700, 0 6px 16px rgba(245,124,0,0.3);
    transition: transform 0.1s;
}
.phonkuma-optin-form button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c66700;
}
.phonkuma-form-headline { font-size: 16px; margin-bottom: 12px; }
.phonkuma-zero { font-size: 24px; font-weight: 900; color: var(--phonkuma-navy); margin: 16px 0; }
.phonkuma-zero .phonkuma-blue { font-size: 56px; }

/* ============================================================
   セミナーで手に入ること（チェックリスト）
   ============================================================ */
.phonkuma-takeaways { padding: 60px 24px; text-align: center; }
.phonkuma-takeaways h2 { font-size: 24px !important; line-height: 1.6 !important; }
.phonkuma-takeaways-title {
    border-radius: 8px 8px 0 0 !important;
    padding: 16px !important;
    margin: 32px 0 0 !important;
    font-size: 22px !important;
}
.phonkuma-check-list {
    list-style: none;
    padding: 32px 24px;
    background: #fff;
    margin: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(27,42,74,0.08);
    text-align: left;
}
.phonkuma-check-list li {
    padding: 12px 0 12px 32px;
    position: relative;
    font-size: 15px;
    line-height: 1.7;
    border-bottom: 1px dashed #e0e6ed;
}
.phonkuma-check-list li:last-child { border-bottom: none; }
.phonkuma-check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 12px;
    color: var(--phonkuma-bear-blue);
    font-weight: 900;
    font-size: 18px;
}

/* ============================================================
   セミナー内容スライド
   ============================================================ */
.phonkuma-slides-grid { padding: 40px 16px; }
.phonkuma-slides-grid h2 { font-size: 28px !important; }
.phonkuma-preview-gallery .wp-block-image {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.phonkuma-video { padding: 40px 24px; text-align: center; }

/* ============================================================
   こんな方にオススメです
   ============================================================ */
.phonkuma-recommend { padding: 60px 16px; }
.phonkuma-recommend-title {
    font-size: 28px !important;
    padding: 16px !important;
    margin-bottom: 32px !important;
    border-radius: 8px;
    font-family: serif;
    letter-spacing: 0.05em;
}
.phonkuma-recommend-card {
    background: #fff;
    padding: 20px 24px;
    margin: 12px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(27,42,74,0.08);
    border-left: 4px solid var(--phonkuma-gold);
}
.phonkuma-recommend-card p { margin: 0; font-size: 15px; }

/* ============================================================
   特典セクション
   ============================================================ */
.phonkuma-bonus-section { padding: 60px 16px; text-align: center; }
.phonkuma-bonus-banner {
    margin: 32px auto;
    padding: 32px 16px !important;
    border-radius: 12px;
    max-width: 480px;
}
.phonkuma-bonus-banner h3 { font-size: 22px !important; line-height: 1.4 !important; }

.phonkuma-bonus-item-card {
    margin: 16px auto !important;
    padding: 24px !important;
    border-radius: 8px;
    max-width: 480px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(27,42,74,0.1);
}
.phonkuma-bonus-tag {
    background: var(--phonkuma-gold-light);
    color: var(--phonkuma-navy);
    display: inline-block;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ============================================================
   キャンペーン再掲セクション
   ============================================================ */
.phonkuma-campaign-repeat {
    padding: 40px 24px;
    text-align: center;
}
.phonkuma-campaign-repeat h3 {
    font-size: 22px !important;
    margin-bottom: 24px !important;
    line-height: 1.6;
}

/* ============================================================
   参加者の声
   ============================================================ */
.phonkuma-voices { padding: 60px 16px; }
.phonkuma-voices-title {
    font-size: 22px !important;
    padding: 12px 24px !important;
    border-radius: 4px;
    transform: skew(-8deg);
    display: inline-block !important;
    margin-bottom: 32px !important;
}
.phonkuma-voice-card {
    background: linear-gradient(180deg, #fff 0%, var(--phonkuma-sky) 100%);
    padding: 32px 24px;
    margin: 20px 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(27,42,74,0.06);
    position: relative;
}
.phonkuma-voice-num {
    position: absolute;
    top: 16px;
    right: 24px;
    font-family: cursive;
    font-style: italic;
    color: var(--phonkuma-bear-blue-light);
    font-size: 24px;
    font-weight: 700;
    margin: 0 !important;
}
.phonkuma-voice-card h4 {
    font-size: 18px !important;
    border-bottom: 1px solid #d8e2ee;
    padding-bottom: 12px;
    margin-bottom: 16px !important;
}
.phonkuma-voice-card p { font-size: 14px; line-height: 1.8; }

/* ============================================================
   講師紹介
   ============================================================ */
.phonkuma-instructor { padding: 60px 24px; text-align: center; }
.phonkuma-instructor-title {
    font-size: 22px !important;
    padding: 12px 24px !important;
    border-radius: 4px;
    transform: skew(-8deg);
    display: inline-block !important;
}
.phonkuma-instructor-portrait img {
    max-width: 280px;
    height: auto;
    border-radius: 50%;
    margin: 24px auto;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.phonkuma-instructor-card {
    text-align: left;
    padding: 32px 24px !important;
    border-radius: 8px;
    margin-top: 0 !important;
    position: relative;
}
.phonkuma-instructor-card::before {
    content: 'Phonkuma';
    position: absolute;
    top: 32px;
    right: 24px;
    font-size: 48px;
    color: rgba(255,255,255,0.1);
    font-weight: 900;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.phonkuma-instructor-tag {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px !important;
    margin: 8px 0 16px !important;
}

/* ============================================================
   メディア・実績
   ============================================================ */
.phonkuma-media { padding: 40px 24px; }
.phonkuma-media h3 { font-size: 18px !important; margin-bottom: 16px !important; }
.phonkuma-media ul { padding-left: 0; }
.phonkuma-media li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(27,42,74,0.1);
    font-size: 14px;
    list-style: none;
}

.phonkuma-stats { padding: 40px 16px; }
.phonkuma-stat-card {
    text-align: center;
    padding: 32px 16px !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(27,42,74,0.08);
}
.phonkuma-stat-label { color: var(--phonkuma-soft-text); margin-bottom: 8px !important; }
.phonkuma-stat-num {
    font-size: 56px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.phonkuma-stat-num small { font-size: 14px; display: block; margin-top: 4px; color: var(--phonkuma-navy); }

/* ============================================================
   限定開催
   ============================================================ */
.phonkuma-limited { padding: 80px 24px; text-align: center; }
.phonkuma-limited-headline {
    font-size: 56px !important;
    margin: 0 0 32px !important;
    line-height: 1 !important;
    font-family: serif;
}

/* ============================================================
   最終CTA
   ============================================================ */
.phonkuma-final-cta { padding: 60px 24px; text-align: center; }
.phonkuma-final-cta h2 { font-size: 32px !important; margin-bottom: 16px !important; }
.phonkuma-optin-form--final input[type="email"] {
    background: rgba(255,255,255,0.95);
    color: var(--phonkuma-navy);
}

/* ============================================================
   FAQ
   ============================================================ */
.phonkuma-faq { padding: 60px 24px; }
.phonkuma-faq h2 { font-size: 28px !important; margin-bottom: 32px !important; }
.phonkuma-faq details {
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: 6px;
    margin-bottom: 12px;
    padding: 16px 20px;
}
.phonkuma-faq summary {
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    padding-right: 24px;
    position: relative;
}
.phonkuma-faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    color: var(--phonkuma-bear-blue);
    font-size: 22px;
    line-height: 1;
}
.phonkuma-faq details[open] summary::after { content: '−'; }
.phonkuma-faq details[open] summary { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #d8e2ee; }

/* ============================================================
   フッターリンク
   ============================================================ */
.phonkuma-lp-footer-links { padding: 32px 16px; opacity: 0.7; }
.phonkuma-lp-footer-links a { color: var(--phonkuma-navy); text-decoration: underline; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (min-width: 768px) {
    .phonkuma-section { padding: 80px 48px; }
    .phonkuma-hero-headline { font-size: 36px !important; }
    .phonkuma-takeaways h2 { font-size: 32px !important; }
    .phonkuma-promise h2 { font-size: 36px !important; }
}

/* ============================================================
   レッスン受講完了ボタン（会員サイト用）
   ============================================================ */
.phonkuma-complete-box {
    margin: 32px 0;
    padding: 24px;
    background: #fafafa;
    border: 2px solid var(--phonkuma-navy);
    border-radius: 8px;
    text-align: center;
}
.phonkuma-complete-title { margin: 0 0 12px; color: var(--phonkuma-navy); font-size: 18px; font-weight: 900; }
.phonkuma-complete-desc { margin: 0 0 16px; color: var(--phonkuma-soft-text); font-size: 14px; }
.phonkuma-complete-btn {
    background: var(--phonkuma-bear-blue);
    color: #fff;
    border: none;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.phonkuma-complete-btn:hover:not(:disabled) {
    background: var(--phonkuma-navy);
}
.phonkuma-complete-btn:disabled {
    background: var(--phonkuma-gold);
    cursor: default;
}
.phonkuma-complete-msg {
    margin-top: 12px;
    font-size: 13px;
    color: var(--phonkuma-line-green);
}