/* ========================================
   メインコンテンツ色彩設計
   MGFactory Corporate Website
   Created: 2025-09-24
======================================== */

/* === 既存のカラーパレット継承 === */
/* colors-header-footer.cssのCSS変数を継承 */

/* === 統一透明度システムの適用 === */
.highlight-content p {
    opacity: var(--opacity-medium); /* 統一された中透明度 */
}

.implementation-detail {
    opacity: var(--opacity-medium); /* 統一された中透明度 */
}

.client-location {
    opacity: var(--opacity-low); /* 統一された低透明度 */
}

.method-subtitle {
    opacity: var(--opacity-medium); /* 統一された中透明度 */
}

.external-note {
    opacity: var(--opacity-low); /* 統一された低透明度 */
}

.phone-hours small {
    opacity: var(--opacity-low); /* 統一された低透明度 */
}

.movie-vision {
    opacity: var(--opacity-high); /* 統一された高透明度 */
}

/* === ヒーローセクション === */
.hero {
    /* Video background is handled by video-background class - no background color needed */
    position: relative;
    background: none !important; /* 確実に背景を無効化 */
    opacity: 1 !important; /* 透明度を確実に完全不透明に設定 */
}

.hero-content {
    color: var(--text-white);
    position: relative;
    z-index: 3;
}

/* Add subtle dark overlay for text readability over video */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Video background container - ensure visibility */
.video-background {
    opacity: 1 !important; /* 動画背景を確実に表示 */
}

.bgmv {
    opacity: 1 !important; /* 動画要素を確実に表示 */
}

/* Fallback background for video loading */
.video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-accent) 100%);
    z-index: -2;
}

/* Scroll indicator visibility over video */
.scroll-indicator {
    color: var(--text-white);
    z-index: 3;
}

.scroll-text,
.scroll-arrow {
    color: var(--text-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.title-main {
    color: var(--text-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: 800;
}

.title-sub {
    color: var(--text-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.hero-description {
    color: var(--text-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
    color: var(--text-white);
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.25);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.9); /* 白い半透明背景 */
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue-light);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px); /* ブラー効果で背景を柔らかく */
}

.btn-secondary:hover {
    background: var(--primary-blue); /* ホバー時は完全なブルー背景 */
    color: var(--text-white);
    border-color: var(--primary-blue);
    backdrop-filter: none; /* ホバー時はブラー効果を無効化 */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.25);
}

/* === セクション共通 - 統一背景システム === */
section {
    color: var(--text-primary);
    opacity: var(--opacity-full);
}

/* === 新しいA/Bシンプル背景システム === */
/* === 統一パネル背景システム（完全版） === */
/* A背景（白）セクション内のパネルはグレー */
.panel-in-white-section {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--neutral-gray-200) !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
}

/* B背景（グレー）セクション内のパネルは白 */
.panel-in-gray-section {
    background: var(--bg-primary) !important;
    border: 1px solid var(--neutral-gray-200) !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
}

/* B背景セクション内のパネルの内部アイテムはグレー */
.sub-panel-in-gray-section {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--neutral-gray-200) !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    margin-bottom: 0.5rem !important;
    transition: all 0.3s ease !important;
}

/* A背景セクション内のパネルの内部アイテムは白 */
.sub-panel-in-white-section {
    background: var(--bg-primary) !important;
    border: 1px solid var(--neutral-gray-200) !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    margin-bottom: 0.5rem !important;
    transition: all 0.3s ease !important;
}

/* 統一ホバー効果 */
.panel-in-white-section:hover,
.panel-in-gray-section:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1) !important;
}

.sub-panel-in-gray-section:hover,
.sub-panel-in-white-section:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08) !important;
}
/* ヒーローセクション: 動画背景のため背景色なし */
.hero {
    background: none !important;
}

/* A背景（白背景）- 1, 3, 5, 7, 9番目のセクション */
.about-section,              /* 1. 企業理念 (A) */
.qolms-platform-section,     /* 3. コンセプト (A) */
.integration-systems-section, /* 5. 連携システム (A) */
.future-vision-section,      /* 7. 事業の将来性 (A) */
.contact-section {           /* 9. お問い合わせ (A) */
    background: var(--bg-primary) !important;
}

/* B背景（ライトグレー背景）- 2, 4, 6, 8番目のセクション */
.business-section,           /* 2. 事業内容 (B) */
.achievements-section,       /* 4. 実績 (B) */
.support-messages-section,   /* 6. 応援メッセージ (B) */
.company-section {           /* 8. 会社概要 (B) */
    background: var(--bg-secondary) !important;
}

/* コンセプトムービーセクションは親のコンセプトセクション内なので同じA背景 */
.concept-movie-section {
    background: transparent !important; /* 親セクションの背景を継承 */
}

/* 企業の歩みセクションは実績セクション内なので同じB背景 */
.company-timeline-section {
    background: transparent !important; /* 親セクションの背景を継承 */
}

/* PHR深層理解セクションは事業の将来性セクション内なので同じA背景 */
.phr-insight-section {
    background: transparent !important; /* 親セクションの背景を継承 */
}

/* === 旧システム無効化（統一クラスのみ使用） === */
/* 重要: 以下の個別設定は統一クラスによって上書きされます */
.value-item,
.business-item,
.integration-item,
.hospital-item,
.message-item,
.contact-method,
.outlook-item,
.viewer-content,
.oem-content,
.client-achievements,
.implementation-item,
.oem-feature {
    /* 個別背景設定は!importantで上書きされる */
    opacity: var(--opacity-full);
}

/* === 個別設定無効化通知 === */
/*
※ 重要なルール ※
1. すべてのパネルは統一クラスを使用すること
2. 個別背景設定は禁止
3. 一つを修正したら全体に反映されるように!importantで保証

統一クラス一覧:
- panel-in-white-section: 白背景セクション内のメインパネル
- panel-in-gray-section: グレー背景セクション内のメインパネル
- sub-panel-in-gray-section: グレー背景セクション内の子パネル
- sub-panel-in-white-section: 白背景セクション内の子パネル
*/

/* ホバー時の統一効果 */
.value-item:hover,
.business-item:hover,
.integration-item:hover,
.hospital-item:hover,
.message-item:hover,
.contact-method:hover,
.outlook-item:hover,
.viewer-content:hover,
.oem-content:hover,
.client-achievements:hover,
.implementation-item:hover,
.oem-feature:hover {
    opacity: var(--opacity-full); /* ホバー時も完全に不透明を維持 */
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
    transform: translateY(-2px);
}

/* 全体的なテキスト色の確実な適用 */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* 段落と見出しの基本色設定 */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
}

.section-title {
    color: var(--text-primary);
}

.section-subtitle {
    color: var(--secondary-teal);
}

/* === 企業理念セクション === */
.about-message {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-accent) 100%);
    border: 1px solid var(--neutral-gray-200);
}

.about-message h3 {
    color: var(--primary-blue);
}

.about-message p {
    color: var(--text-primary);
}

.business-intro {
    color: var(--text-primary);
}

/* === 事業内容パネル統一背景 === */
.business-item {
    background: var(--bg-primary);
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.business-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.1);
    transform: translateY(-2px);
}

.business-item.featured {
    background: var(--bg-primary);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
}

.business-item.featured:hover {
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.15);
}

.business-icon {
    color: var(--primary-blue);
}

.business-info h3 {
    color: var(--text-primary);
}

.business-info p,
.business-description {
    color: var(--text-secondary);
}

.business-highlights .highlight-item {
    background: var(--bg-primary);
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
}

.business-highlights .highlight-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
}

.highlight-icon {
    background: var(--bg-secondary);
    border: 2px solid var(--primary-blue-light);
    color: var(--primary-blue);
}

.highlight-content h4 {
    color: var(--text-primary);
}

.highlight-content p {
    color: var(--text-muted);
}

.business-ecosystem {
    /* 個別背景設定を無効化 - 統一クラスで上書き */
    /* background: var(--bg-accent); */
    /* border: 1px solid var(--secondary-teal-light); */
    color: var(--text-secondary);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}

/* === QOLMSプラットフォームセクション === */
.qolms-catchphrase {
    text-align: center;
    margin-bottom: 4rem;
    padding: 3rem 2rem;
}

.catchphrase-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.qolms-concept {
    text-align: center;
    margin-bottom: 3rem;
}

.qolms-concept h3 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.value-item {
    background: var(--bg-secondary);
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
}

.value-item:hover {
    border-color: var(--secondary-teal-light);
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.1);
}

.value-icon {
    background: var(--bg-primary);
    border: 2px solid var(--secondary-teal-light);
    color: var(--secondary-teal);
}

.value-item h4 {
    color: var(--text-primary);
}

.value-item p {
    color: var(--text-secondary);
}

/* === コンセプトムービーセクション === */

.movie-title {
    color: var(--primary-blue);
}

.movie-intro {
    color: var(--text-primary);
}

.movie-vision {
    color: var(--text-secondary);
}

/* === 事業内容詳細セクション === */
.service-category {
    background: transparent; /* 親セクションの背景を継承 */
    margin-bottom: 3rem;
}

.category-title {
    color: var(--text-primary);
}

.category-title i {
    color: var(--primary-blue);
}

.hospital-item {
    background: var(--bg-primary); /* 統一されたカード背景 */
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
}

.hospital-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.1);
}

.hospital-item.featured {
    border-color: var(--secondary-teal);
    background: var(--bg-primary); /* 統一されたカード背景 */
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.15); /* 代わりにシャドウで強調 */
}

.hospital-info h4 {
    color: var(--text-primary);
}

.hospital-location {
    color: var(--secondary-teal);
    font-weight: 600;
}

.hospital-description {
    color: var(--text-secondary);
}

.case-study-badge {
    background: var(--success-green);
    color: var(--text-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.case-study-badge:hover {
    background: var(--secondary-teal);
    transform: translateY(-1px);
}

/* === QOLMS Viewer、OEM、詳細実績セクション === */
.viewer-description,
.oem-description,
.detailed-achievements {
    background: transparent; /* 親セクションの背景を継承 */
    margin-bottom: 2rem;
}

.viewer-content {
    background: var(--bg-secondary); /* 白背景セクションのパネルはグレー */
    border: 1px solid var(--neutral-gray-200);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.oem-content {
    background: var(--bg-primary); /* グレー背景セクションのパネルは白 */
    border: 1px solid var(--neutral-gray-200);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.viewer-content:hover,
.oem-content:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
}

.viewer-content h4,
.oem-content h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.viewer-content p,
.oem-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.viewer-implementations {
    background: transparent; /* コンテナは透明 */
    margin-bottom: 1rem;
}

.implementation-item {
    background: var(--bg-primary); /* 子アイテムは白背景で統一 */
    border: 1px solid var(--neutral-gray-200);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.implementation-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
}

.implementation-icon {
    background: var(--bg-secondary);
    border: 2px solid var(--primary-blue-light);
    color: var(--primary-blue);
}

.implementation-content h5 {
    color: var(--text-primary);
}

.implementation-content p {
    color: var(--text-secondary);
}

/* === 詳細導入実績関連要素 === */
.client-achievements {
    background: var(--bg-primary); /* 統一されたカード背景 */
    border: 1px solid var(--neutral-gray-200);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.client-achievements:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
}

.client-header {
    background: transparent;
    border-bottom: 1px solid var(--neutral-gray-200);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.client-logo {
    background: var(--bg-secondary);
    border: 2px solid var(--primary-blue-light);
    color: var(--primary-blue);
}

.client-info h4 {
    color: var(--text-primary);
}

.client-location {
    color: var(--secondary-teal);
}

.achievement-list {
    background: transparent;
}

.achievement-item {
    background: var(--bg-secondary); /* リストアイテムは軽いグレー */
    border: 1px solid var(--neutral-gray-200);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.achievement-item:hover {
    border-color: var(--primary-blue-light);
    background: var(--bg-primary);
    transform: translateX(4px);
}

.achievement-item i {
    color: var(--primary-blue);
    margin-right: 0.5rem;
}

.achievement-item span {
    color: var(--text-primary);
}

/* === OEM機能関連要素 === */
.oem-feature {
    background: var(--bg-primary); /* 統一されたカード背景 */
    border: 1px solid var(--neutral-gray-200);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.oem-feature:hover {
    border-color: var(--primary-blue-light);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.oem-feature i {
    color: var(--primary-blue);
    margin-right: 0.5rem;
}

.oem-feature span {
    color: var(--text-primary);
}

/* === 連携システムセクション === */
.integration-intro h3 {
    color: var(--primary-blue);
}

.integration-intro p {
    color: var(--text-primary);
}

.integration-item {
    background: var(--bg-secondary); /* 白背景セクションのパネルはグレー */
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
}

.integration-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.15);
    transform: translateY(-2px);
}

.integration-icon {
    background: var(--bg-secondary);
    border: 2px solid var(--primary-blue-light);
    color: var(--primary-blue);
}

.integration-info h4 {
    color: var(--text-primary);
}

.integration-info p {
    color: var(--text-secondary);
}

/* === 応援メッセージセクション === */
.message-item {
    background: var(--bg-primary);
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
}

.message-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
}

.vision-highlights .highlight-item {
    background: var(--bg-secondary); /* 白背景セクションのパネルはグレー */
    border: 1px solid var(--neutral-gray-200);
}

.vision-highlights .highlight-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
}

/* === PHRビジネス深層理解セクション（パネルなし） === */
.phr-insight-section {
    margin-top: 4rem;
    padding: 2rem 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.phr-insight-header {
    text-align: center;
    margin-bottom: 2rem;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.phr-insight-header h3 {
    color: var(--primary-blue);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    background: none !important;
}

.phr-insight-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    background: none !important;
}

.phr-insight-text {
    max-width: 800px;
    margin: 0 auto;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.phr-insight-text p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
    background: none !important;
    border: none !important;
    padding: 0.5rem 0 !important;
    box-shadow: none !important;
}

.phr-insight-text strong {
    color: var(--text-primary);
    background: none !important;
}

/* PHRボタンの修正 */
.phr-detail-link {
    text-align: center;
    margin-top: 2rem;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.phr-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
    color: var(--text-white);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none !important;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.2);
}

.phr-detail-btn:hover {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
}

.detail-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
    background: none !important;
    border: none !important;
}

/* === PHRビジネス深層理解パネル === */
.phr-insight-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    background: none !important;
}

.phr-insight-item {
    background: var(--bg-secondary); /* 白背景セクションのパネルはグレー（統一ルール適用） */
    border: 1px solid var(--neutral-gray-200);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.phr-insight-item:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
    transform: translateY(-2px);
}

.phr-insight-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
    color: var(--text-white);
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.phr-insight-content {
    flex: 1;
}

.phr-insight-content h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.phr-insight-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .phr-insight-panels {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .phr-insight-item {
        padding: 1.25rem;
    }
    
    .phr-insight-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

.outlook-item {
    background: var(--bg-secondary); /* 白背景セクションのパネルはグレー */
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
}

.outlook-item:hover {
    border-color: var(--secondary-teal-light);
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.1);
}

.outlook-icon {
    background: var(--bg-secondary);
    border: 2px solid var(--secondary-teal-light);
    color: var(--secondary-teal);
}

.outlook-content h4 {
    color: var(--text-primary);
}

.outlook-content p {
    color: var(--text-secondary);
}

/* === 会社概要セクション === */
.company-table {
    background: var(--bg-primary);
    border: 1px solid var(--neutral-gray-200);
}

.company-table th {
    background: var(--bg-accent);
    color: var(--text-primary);
    border-bottom: 1px solid var(--neutral-gray-300);
}

.company-table td {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--neutral-gray-200);
}

.certification-text {
    color: var(--text-primary);
}

.organization-item {
    color: var(--text-secondary);
}

.organization-item i {
    color: var(--primary-blue);
}

.contact-intro {
    color: var(--text-secondary);
}

.contact-method {
    background: var(--bg-secondary);
    border: 1px solid var(--neutral-gray-200);
    transition: all 0.3s ease;
}

.primary-method {
    background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-secondary) 100%);
    border-color: var(--primary-blue-light);
}

.contact-method:hover {
    border-color: var(--primary-blue-light);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.1);
}

.method-icon {
    background: var(--bg-primary);
    border: 2px solid var(--primary-blue-light);
    color: var(--primary-blue);
}

.method-title h3 {
    color: var(--text-primary);
}

.method-subtitle {
    color: var(--secondary-teal);
}

.method-description {
    color: var(--text-secondary);
}

.feature-item {
    background: var(--bg-primary);
    border: 1px solid var(--neutral-gray-300);
    color: var(--text-muted);
}

.btn-contact {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);
    color: var(--text-white);
}

.btn-contact:hover {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.25);
}

.phone-number {
    color: var(--primary-blue);
}

.phone-hours {
    color: var(--text-secondary);
}

.contact-notices {
    background: var(--bg-accent);
    border: 1px solid var(--neutral-gray-300);
}

.notices-title {
    color: var(--text-primary);
}

.notice-icon.warning {
    background: var(--bg-primary);
    border-color: var(--warning-orange);
    color: var(--warning-orange);
}

.notice-icon.info {
    background: var(--bg-primary);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.notice-content h5 {
    color: var(--text-primary);
}

.notice-content p {
    color: var(--text-secondary);
}

/* === アクセント要素 === */
.external-note {
    color: var(--text-muted);
}

.business-features li i {
    color: var(--success-green);
}

/* === レスポンシブ対応 === */
@media (max-width: 768px) {
    .hero {
        background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-contact {
        width: 100%;
        justify-content: center;
    }
}

/* === フォーカス・アクセシビリティ === */
.btn-primary:focus,
.btn-secondary:focus,
.btn-contact:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* === アニメーション効果 === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.highlight-item,
.value-item,
.hospital-item,
.integration-item,
.message-item,
.outlook-item {
    animation: fadeInUp 0.6s ease-out;
}