/* =============================================
   楠浦さんAI LP専用CSS  v5
   Bootstrap 4のクラスで対応できない部分のみ定義
   ============================================= */

/* --- セクション共通 --- */
.kai-section-title {
    color: #0C1B2E;
    position: relative;
    padding-bottom: 1rem;
}
.kai-section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #ffab0f;
    margin: 1rem auto 0;
}
@media (max-width: 768px) {
    .kai-section-title { font-size: 1.5rem; }
}

.kai-section-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #718096;
}

.kai-section-title-sm {
    color: #0C1B2E;
    font-size: 1.5rem;
}
@media (max-width: 768px) {
    .kai-section-title-sm { font-size: 1.25rem; }
}

/* --- 1. ファーストビュー --- */
.kai-hero {
    background: linear-gradient(135deg, #0c1b2e 0%, #1a3a5c 50%, #0c1b2e 100%);
    position: relative;
    overflow: hidden;
}
.kai-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(4,115,187,.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,171,15,.08) 0%, transparent 40%);
    pointer-events: none;
}
.kai-hero-inner { position: relative; z-index: 1; }

.kai-hero-title { color: #fff; font-weight: 700; font-size: 2rem; line-height: 1.6; }
.kai-hero-accent { color: #ffab0f; }

.kai-hero-sub-copy { color: rgba(255,255,255,.9); font-size: 1.1rem; line-height: 1.8; }

.kai-hero-service-box {
    background: rgba(255,255,255,.1);
    border-left: 4px solid #ffab0f;
    padding: 12px 20px;
    border-radius: 0 6px 6px 0;
    display: inline-block;
}
.kai-service-name-main {
    color: #fff; font-size: 1.6rem; font-weight: 700;
    font-family: "Akshar","Noto Sans JP",sans-serif; letter-spacing: .05em;
}
.kai-service-name-sub { color: rgba(255,255,255,.9); font-size: 1.2rem; font-weight: 700; }

.kai-hero-desc { color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.8; }

.kai-hero-img {
    max-width: 380px;
    width: 100%;
    border-radius: 0 12px 12px 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%);
}

/* ボタン共通 */
.kai-btn-primary,
.kai-btn-final-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #FFE135 0%, #FFC107 80%, #FFD54F 100%);
    color: #333; font-weight: 700; border-radius: 4px;
    text-decoration: none; transition: all .3s ease;
    box-shadow: 0 4px 15px rgba(255,193,7,.3);
}
.kai-btn-primary { padding: 14px 28px; font-size: 1rem; }
.kai-btn-final-primary { padding: 18px 36px; font-size: 1.1rem; position: relative; z-index: 1; }

.kai-btn-primary:hover,
.kai-btn-final-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,193,7,.4);
    color: #333; text-decoration: none;
}
.kai-btn-primary i,
.kai-btn-final-primary i { color: #333; }

.kai-btn-secondary,
.kai-btn-final-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #fff; font-weight: 600;
    border: 1px solid rgba(255,255,255,.4); border-radius: 4px;
    text-decoration: none; transition: all .3s ease;
}
.kai-btn-secondary { padding: 14px 28px; font-size: 1rem; }
.kai-btn-final-secondary { padding: 18px 36px; font-size: 1.1rem; border-width: 2px; position: relative; z-index: 1; }

.kai-btn-secondary:hover,
.kai-btn-final-secondary:hover {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7);
    color: #fff; text-decoration: none; transform: translateY(-2px);
}
/* サイト全体の * { color:#555 } を上書き */
.kai-btn-secondary i,
.kai-btn-final-secondary i { color: #fff; }

@media (max-width: 768px) {
    .kai-hero-title { font-size: 1.5rem; }
    .kai-service-name-main { font-size: 1.3rem; }
    .kai-hero-sub-copy { font-size: 1rem; }
    .kai-btn-final-primary,
    .kai-btn-final-secondary { padding: 14px 24px; font-size: 1rem; }
}
@media (min-width: 1200px) {
    .kai-hero-title { font-size: 2.2rem; }
}

/* --- 3. Pain Points --- */
.kai-pain-card {
    border-left: 6px solid #adb5bd;
    padding: 2.2rem 2rem;
    transition: box-shadow .3s ease;
}
.kai-pain-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.kai-pain-card h3 { font-size: 1.15rem; }

/* --- 4. 問題提起 --- */
.kai-problem-highlight {
    background: linear-gradient(135deg, #f7f9fc 0%, #e0edff 100%);
    border-left: 4px solid #013C73;
    border-radius: 0 8px 8px 0;
}
.kai-problem-highlight-icon { font-size: 1.5rem; color: #ffab0f; flex-shrink: 0; }

/* --- 5. 解決策 --- */
.kai-solution-bg { background: linear-gradient(135deg, #0c1b2e 0%, #1a3a5c 100%); }

.kai-solution-lead { font-size: 1.4rem; font-weight: 700; color: rgba(255,255,255,.85); letter-spacing: .1em; }
.kai-solution-headline { color: #fff; font-size: 2rem; }
.kai-solution-headline::after {
    content: ""; display: block; width: 60px; height: 4px;
    background: #ffab0f; margin: 1rem auto 0;
}
.kai-solution-sub-icon { color: #ffab0f; }

.kai-usecase-label {
    background: #013C73; color: #fff; font-weight: 700;
    font-size: .9rem; padding: 4px 14px; border-radius: 2px;
}

@media (max-width: 768px) {
    .kai-solution-lead { font-size: 1.1rem; }
    .kai-solution-headline { font-size: 1.5rem; }
}

/* --- 6. CTA --- */
.kai-cta-section { background: #20477A; }

/* --- 8. 提供価値 --- */
.kai-value-num {
    font-family: "Akshar",sans-serif; font-weight: 700;
    font-size: 1.5rem; color: #013C73; line-height: 1.2;
    flex-shrink: 0; min-width: 2.5rem;
}

/* --- 9. ユーザーの声 --- */
.kai-voice-bg { background: linear-gradient(to bottom, #f7f9fc, #fff); }
.kai-voice-subtitle { font-size: 1.25rem; font-weight: 600; color: #718096; }
.kai-voice-card { border-left: 4px solid #adb5bd; }
.kai-voice-avatar { width: 44px; height: 44px; flex-shrink: 0; font-size: 1rem; }
.kai-voice-avatar-1 { background: #e0edff; color: #013C73; }
.kai-voice-avatar-2 { background: #fef3cd; color: #856404; }
.kai-voice-avatar-3 { background: #d4edda; color: #155724; }
.kai-voice-headline { color: #013C73; }

/* --- 10. 料金 --- */
.kai-pricing-header { background: linear-gradient(135deg, #0c1b2e 0%, #1a3a5c 100%); }
.kai-pricing-name {
    color: #fff; font-size: 1.5rem; font-weight: 700;
    font-family: "Akshar","Noto Sans JP",sans-serif; letter-spacing: .05em;
}
.kai-pricing-sub { color: rgba(255,255,255,.7); font-size: .9rem; }
.kai-pricing-yen { font-size: 1.5rem; font-weight: 700; color: #013C73; vertical-align: top; }
.kai-pricing-number {
    font-size: 3.5rem; font-weight: 700; color: #013C73;
    font-family: "Akshar",sans-serif; letter-spacing: -.02em; line-height: 1;
}
.kai-pricing-unit { font-size: 1rem; color: #555; margin-left: 4px; }
.kai-pricing-icon { color: #013C73; font-size: 1.1rem; flex-shrink: 0; }

@media (max-width: 768px) {
    .kai-pricing-number { font-size: 2.5rem; }
}

/* --- 11. FAQ --- */
.kai-faq-q-label { font-weight: 700; color: #013C73; font-size: 1.1rem; flex-shrink: 0; }
.kai-faq-a-label { font-weight: 400; color: #555; font-size: 1.1rem; flex-shrink: 0; }

/* --- 12. 最終CTA --- */
.kai-final-cta {
    background: linear-gradient(135deg, #0c1b2e 0%, #1a3a5c 50%, #0c1b2e 100%);
    position: relative; overflow: hidden;
}
.kai-final-cta::before {
    content: ""; position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,171,15,.05) 0%, transparent 50%);
    animation: kai-rotate 30s linear infinite; pointer-events: none;
}
@keyframes kai-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.kai-final-cta-title { font-size: 2rem; }
@media (max-width: 768px) {
    .kai-final-cta-title { font-size: 1.5rem; }
}

/* --- 13. ページ内スクロール調整 --- */
#service-detail, #pricing, #faq { scroll-margin-top: 100px; }