/* 全ページ共通の水色テーマ。ページ固有スタイルの後に読み込む。 */
:root {
    /* 色を役割で分ける：青は操作、淡い水色は背景、濃い青灰は情報。 */
    --sky-button: #197bbb;
    --sky-button-hover: #12679f;
    --sky-on-button: #ffffff;
    --sky-accent: #56afe3;
    --sky-ink: #193b50;
    --sky-muted: #526776;
    --sky-link: #176fa8;
    --sky-soft: #f3f8fc;
    --sky-panel: #eaf4fb;
    --sky-line: #c7dfee;
    --color-primary: #197bbb !important;
    --color-secondary: #12679f !important;
    --color-accent: #56afe3 !important;
    --color-bg-section: #f3f8fc !important;
    --color-text: #193b50 !important;
    --color-text-medium: #526776 !important;
    --lead-navy: #193b50;
    --lead-navy-2: #315d78;
    --lead-blue: #176fa8;
    --lead-line: #d9e6ef;
    --lead-soft: #f3f8fc;
    --lead-soft-2: #eaf4fb;
    --lead-grad: #197bbb;
}

html[data-theme="sky"] body {
    --clip-blue: #197bbb;
    --clip-blue-dark: #12679f;
    --clip-blue-soft: #f3f8fc;
    --post-blue: #197bbb;
    --post-blue-dark: #12679f;
    --post-blue-soft: #f3f8fc;
    --post-hero-bg: #eaf4fb;
    --post-gradient: #197bbb;
}

/* 通常・送信・追従CTA。既存のページ別 !important 指定もここに統一する。 */
html[data-theme="sky"] body :is(.btn, .post-btn, .clip-product-cta, .clip-price-button, .clip-header-btn, .db-cta-btn, .unsubscribe-btn, .ai-features-link, .case-slide-btn, .db-detail-link) {
    background: var(--sky-button) !important;
    color: var(--sky-on-button) !important;
    border-color: var(--sky-button) !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}
html[data-theme="sky"] body :is(.btn, .post-btn, .clip-product-cta, .clip-price-button, .clip-header-btn, .db-cta-btn, .unsubscribe-btn, .ai-features-link, .case-slide-btn, .db-detail-link):hover {
    background: var(--sky-button-hover) !important;
    color: var(--sky-on-button) !important;
    border-color: var(--sky-button-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}
html[data-theme="sky"] body .btn::before { display: none !important; }

/* セカンダリーは白地＋水色の枠。ホバー時は水色で塗りつぶす。 */
html[data-theme="sky"] body :is(.btn-secondary, .btn-secondary-dark, .post-btn-secondary, .clip-header-btn, .db-detail-link) {
    background: #fff !important;
    color: var(--sky-link) !important;
    border: 1.5px solid #90bdda !important;
}
html[data-theme="sky"] body :is(.btn-secondary, .btn-secondary-dark, .post-btn-secondary, .clip-header-btn, .db-detail-link):hover {
    background: var(--sky-button) !important;
    color: var(--sky-on-button) !important;
    border-color: var(--sky-button) !important;
}
html[data-theme="sky"] body :is(.btn, .post-btn, .clip-product-cta, .clip-price-button, .clip-header-btn, .db-cta-btn, .unsubscribe-btn, .ai-features-link, .case-slide-btn, .db-detail-link):focus-visible {
    outline: 3px solid var(--sky-link) !important;
    outline-offset: 4px;
}
html[data-theme="sky"] body :is(.btn, .post-btn, .clip-product-cta, .clip-price-button, .unsubscribe-btn):disabled {
    background: var(--sky-panel) !important;
    color: #526b7b !important;
    cursor: not-allowed;
}

/* タブ・ページ送り・カルーセルなど、小さな操作ボタンも同じアクセントに。 */
html[data-theme="sky"] body :is(.feature-tab-btn, .tab-btn, .tab-btn-modern, .clip-tab, .db-view-btn, .db-filter-btn, .db-page-btn, .carousel-arrow):hover,
html[data-theme="sky"] body :is(.feature-tab-btn, .tab-btn, .tab-btn-modern, .clip-tab, .db-view-btn, .db-filter-btn, .db-page-btn).active {
    background: var(--sky-button) !important;
    color: var(--sky-on-button) !important;
    border-color: var(--sky-button) !important;
    box-shadow: none !important;
}
html[data-theme="sky"] body .carousel-dot.active { background: var(--sky-button) !important; }
html[data-theme="sky"] body :is(.db-card.expanded .db-card-toggle, .db-pattern-card.expanded .db-pattern-toggle) {
    background: var(--sky-button) !important;
    color: var(--sky-on-button) !important;
}

/* テーマ背景とアクセント。本文のコントラストと意味を持つ警告色は維持する。 */
html[data-theme="sky"] body :is(.home-hero, .aic-hero, .lead-hero) { background: #edf6fc !important; }
html[data-theme="sky"] body .home-media { background: var(--sky-soft) !important; }
html[data-theme="sky"] body :is(.cta-section, .cta-section-enhanced, .db-cta) {
    background: var(--sky-panel) !important;
    color: var(--sky-ink) !important;
    box-shadow: none !important;
}
html[data-theme="sky"] body :is(.cta-section, .cta-section-enhanced, .db-cta) :is(h2, h3, p, .db-cta-title, .db-cta-desc) { color: var(--sky-ink) !important; }

html[data-theme="sky"] body :is(.section-subtitle, .home-hero__title-sub, .home-hero__meta-link a, .home-media__more, .aic-hero__resource-link) { color: var(--sky-link) !important; }
html[data-theme="sky"] body .section-title::after { background: var(--sky-accent) !important; }
html[data-theme="sky"] body .news-article-category { background: var(--sky-panel) !important; color: var(--sky-link) !important; }
html[data-theme="sky"] body .nav-link:hover { color: var(--sky-link) !important; }
html[data-theme="sky"] body .form-group :is(input, textarea, select):focus {
    border-color: var(--sky-button) !important;
    box-shadow: 0 0 0 3px rgb(25 123 187 / 15%) !important;
}

/* Postのフォームはページ固有の詳細度が高い指定を上書きする。 */
html[data-theme="sky"] .post-page .contact .btn-primary { background: var(--sky-button) !important; }
html[data-theme="sky"] .post-page .contact .btn-primary:hover { background: var(--sky-button-hover) !important; }
html[data-theme="sky"] .company-page .header:not(.header-scrolled) .nav-link:hover { color: #a9d9f5 !important; }
html[data-theme="sky"] body .aic-hero__trial { background: var(--sky-button); color: var(--sky-on-button); }
html[data-theme="sky"] body .aic-hero__trial:hover { background: var(--sky-button-hover); }
html[data-theme="sky"] body .trial-badge { background: var(--sky-panel); color: var(--sky-link); border: 1px solid var(--sky-line); }

/* 文字・余白の背景・枠線で階層をつくり、青い面が競合しないようにする。 */
html[data-theme="sky"] body :is(.home-hero__title, .home-hero__stat, .home-media__body h3, .section-title) {
    color: var(--sky-ink) !important;
}
html[data-theme="sky"] body :is(.home-hero__title-sub, .aic-hero h1) { color: var(--sky-ink) !important; }
html[data-theme="sky"] body :is(.home-hero__lead, .home-media__description, .section-description) { color: var(--sky-muted); }
html[data-theme="sky"] body .home-media__link { border-color: #dce8f0; box-shadow: 0 3px 14px rgb(25 59 80 / 4%); }
html[data-theme="sky"] body .home-media__link:hover { border-color: #98bfda; box-shadow: 0 6px 20px rgb(25 59 80 / 8%); }
html[data-theme="sky"] body .home-media__meta > span { background: var(--sky-panel); color: var(--sky-link); }
html[data-theme="sky"] body .home-hero__actions .btn-primary { box-shadow: 0 3px 8px rgb(25 123 187 / 12%) !important; }

/* 独自CTAの装飾レイヤーにも旧グラデーションを残さない。 */
html[data-theme="sky"] body .ai-features-link::before { display: none !important; }
html[data-theme="sky"] body .ai-features-link :is(span, small) { color: inherit !important; }
html[data-theme="sky"] body :is(.feature-tab-btn, .tab-btn, .tab-btn-modern, .clip-tab, .db-view-btn, .db-filter-btn, .db-page-btn, .carousel-arrow):not(.active):not(:hover) {
    background: #fff !important;
    color: var(--sky-muted) !important;
    border-color: var(--sky-line) !important;
}


/* フッターは淡い青の面に統一し、白ロゴ用フィルターと白文字も解除する。 */
html[data-theme="sky"] body footer {
    background: var(--sky-panel) !important;
    color: var(--sky-ink) !important;
    border-top: 1px solid var(--sky-line);
}
html[data-theme="sky"] body footer :is(.footer-content, .footer-nav, .footer-nav-item, h2, h3, h4) { color: var(--sky-ink) !important; }
html[data-theme="sky"] body footer :is(p, small, .footer-copyright) { color: var(--sky-muted) !important; }
html[data-theme="sky"] body footer a { color: #315d78 !important; }
html[data-theme="sky"] body footer a:hover {
    color: var(--sky-button) !important;
    opacity: 1 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}
html[data-theme="sky"] body footer img { filter: none !important; }
html[data-theme="sky"] body footer .footer-copyright { border-top-color: var(--sky-line) !important; }

/* アップロード切替：子要素に残る個別の文字色・SVG色も状態に合わせる。 */
html[data-theme="sky"] body .tab-btn-modern .tab-label { color: var(--sky-ink) !important; }
html[data-theme="sky"] body .tab-btn-modern .tab-desc { color: var(--sky-muted) !important; }
html[data-theme="sky"] body .tab-btn-modern .tab-icon { color: var(--sky-button) !important; }
html[data-theme="sky"] body .tab-btn-modern .tab-icon svg { stroke: currentColor !important; }
html[data-theme="sky"] body .tab-btn-modern:is(.active, :hover) :is(.tab-label, .tab-desc, .tab-icon) {
    color: var(--sky-on-button) !important;
}

/* 実績の後のCTAは淡い面にして、青い操作ボタンが主役になるようにする。 */
html[data-theme="sky"] body .mid-cta-section { background: var(--sky-soft) !important; }
html[data-theme="sky"] body .mid-cta-inner {
    background: var(--sky-panel) !important;
    border: 1px solid var(--sky-line);
    box-shadow: none !important;
}
html[data-theme="sky"] body .mid-cta-inner > p:first-child { color: var(--sky-ink) !important; }
html[data-theme="sky"] body .mid-cta-inner > p:nth-child(2) { color: var(--sky-muted) !important; }
html[data-theme="sky"] body .mid-cta-section > .container > p > a {
    color: var(--sky-link) !important;
    border-bottom-color: #90bdda !important;
}

/* 実績の数値は単色の青、補足ラベルは落ち着いた文字色にする。 */
html[data-theme="sky"] body .case-slide-metric > span { color: var(--sky-muted) !important; }
html[data-theme="sky"] body .case-slide-metric > div {
    background: none !important;
    color: var(--sky-button) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* 機能ラベルは操作ボタンと区別できる淡い青のチップに。 */
html[data-theme="sky"] body .feature-badge {
    background: var(--sky-panel) !important;
    color: var(--sky-link) !important;
    border: 1px solid var(--sky-line);
    box-shadow: none !important;
}