/**
 * Japanese About Page - Japanese Market Style
 * 日本語会社概要ページ - 日本市場スタイル
 * 
 * Design: Indigo color scheme matching Japanese product and solution pages
 * Target: .lang-ja body class on about page
 * 
 * This stylesheet applies Japanese market indigo color scheme to the about page
 * maintaining visual consistency with other Japanese pages.
 */

/* ============================================================================
   日本市場デザインシステム - Japanese Market Design System
   ============================================================================ */

/* 日本市場の配色 - Japanese Market Deep Blue Color Palette (Unified) */
body.lang-ja.page-template-template-about {
    /* 主色調 - 深蓝色系 (Deep Blue Color Scheme - Matching Homepage) */
    --jp-primary-dark: #1e3c72;        /* 深蓝 - Deep Blue (Hero) */
    --jp-primary-dark-rgb: 30, 60, 114;
    
    --jp-primary: #1e88e5;             /* 主蓝 - Primary Blue */
    --jp-primary-rgb: 30, 136, 229;
    
    --jp-primary-light: #42a5f5;       /* 浅蓝 - Light Blue */
    --jp-primary-light-rgb: 66, 165, 245;
    
    --jp-primary-pale: #e3f2fd;        /* 极浅蓝 - Pale Blue */
    --jp-primary-pale-rgb: 227, 242, 253;
    
    /* 中性色 - Neutral Colors */
    --jp-text-primary: #2C3E50;        /* 主要テキスト - Primary Text */
    --jp-text-secondary: #5A6C7D;      /* 二次テキスト - Secondary Text */
    --jp-text-light: #95A5A6;          /* 辅助文字 - Light Text */
    
    /* 背景色 - Background Colors */
    --jp-bg-white: #FFFFFF;            /* 白背景 - White Background */
    --jp-bg-light: #F8F9FA;            /* 明るい背景 - Light Background */
    --jp-bg-gray: #ECF0F1;             /* 灰色背景 - Gray Background */
    
    /* 边框色 - Border Colors */
    --jp-border-light: #D5DBDB;        /* ボーダー - Border */
    
    /* 阴影效果 - Shadow Effects */
    --jp-shadow-sm: 0 2px 8px rgba(46, 64, 87, 0.08);
    --jp-shadow-md: 0 4px 16px rgba(46, 64, 87, 0.12);
    --jp-shadow-lg: 0 8px 24px rgba(46, 64, 87, 0.16);
}

/* ============================================================================
   Banner Section - バナーセクション
   ============================================================================ */

/* Banner 背景渐变 - 深蓝色系 (Matching Homepage) */
body.lang-ja.page-template-template-about .page-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
}

body.lang-ja.page-template-template-about .page-header-overlay {
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.85) 0%, rgba(42, 82, 152, 0.85) 100%) !important;
}

/* Banner 标题 */
body.lang-ja.page-template-template-about .page-header h1,
body.lang-ja.page-template-template-about .page-title {
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    letter-spacing: 0.03em !important;
}

/* Banner 面包屑导航 */
body.lang-ja.page-template-template-about .breadcrumb,
body.lang-ja.page-template-template-about .breadcrumb a {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.lang-ja.page-template-template-about .breadcrumb a:hover {
    color: #42a5f5 !important;
}

/* ============================================================================
   Company Introduction Section - 会社紹介セクション
   ============================================================================ */

/* Section 背景 */
body.lang-ja.page-template-template-about .company-intro {
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%) !important;
}

/* Section 标题 */
body.lang-ja.page-template-template-about .section-title,
body.lang-ja.page-template-template-about .company-intro h2 {
    color: #1e3c72 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    letter-spacing: 0.03em !important;
}

/* Section 标题下划线 */
body.lang-ja.page-template-template-about .section-title::after,
body.lang-ja.page-template-template-about .company-intro h2::after {
    background: linear-gradient(90deg, #1e88e5 0%, #42a5f5 100%) !important;
}

/* Section 图标 */
body.lang-ja.page-template-template-about .section-icon {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    box-shadow: 0 8px 24px rgba(30, 136, 229, 0.35) !important;
    color: #ffffff !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
}

body.lang-ja.page-template-template-about .section-icon .dashicons {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    color: #ffffff !important;
}

/* ============================================================================
   Company Stats Section - 企業データセクション
   ============================================================================ */

/* Stats 容器 */
body.lang-ja.page-template-template-about .company-stats {
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%) !important;
    border-top: 4px solid #1e88e5 !important;
}

/* Stat 卡片 */
body.lang-ja.page-template-template-about .stat-card {
    background: #ffffff !important;
    border: 2px solid #e8eaed !important;
    border-radius: 14px !important;
    box-shadow: var(--jp-shadow-md) !important;
}

body.lang-ja.page-template-template-about .stat-card:hover {
    border-color: #1e88e5 !important;
    box-shadow: 0 12px 40px rgba(30, 136, 229, 0.15) !important;
}

/* Stat 数字 */
body.lang-ja.page-template-template-about .stat-number {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Stat 图标 */
body.lang-ja.page-template-template-about .stat-icon {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3) !important;
    color: #ffffff !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

body.lang-ja.page-template-template-about .stat-icon .dashicons {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    color: #ffffff !important;
}

/* ============================================================================
   Timeline Section - タイムラインセクション
   ============================================================================ */

/* Timeline 容器 */
body.lang-ja.page-template-template-about .timeline-section {
    background: #ffffff !important;
}

/* Timeline 标题 */
body.lang-ja.page-template-template-about .timeline-section h2 {
    color: #1e3c72 !important;
}

/* Timeline 项目 */
body.lang-ja.page-template-template-about .timeline-item {
    border-left: 4px solid #1e88e5 !important;
}

/* Timeline 年份标记 */
body.lang-ja.page-template-template-about .timeline-year {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(46, 64, 87, 0.3) !important;
}

/* Timeline 内容卡片 */
body.lang-ja.page-template-template-about .timeline-content {
    background: var(--jp-bg-light) !important;
    border: 2px solid #e8eaed !important;
    border-radius: 10px !important;
}

body.lang-ja.page-template-template-about .timeline-content:hover {
    border-color: #42a5f5 !important;
    box-shadow: var(--jp-shadow-md) !important;
}

/* Timeline 点标记 */
body.lang-ja.page-template-template-about .timeline-dot {
    background: #1e88e5 !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.2) !important;
}

/* ============================================================================
   Values Section - 企業価値セクション
   ============================================================================ */

/* Values 容器 */
body.lang-ja.page-template-template-about .company-values {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%) !important;
}

/* Value 卡片 */
body.lang-ja.page-template-template-about .value-card {
    background: #ffffff !important;
    border: 2px solid #e8eaed !important;
    border-radius: 14px !important;
    border-left: 4px solid #1e88e5 !important;
}

body.lang-ja.page-template-template-about .value-card:hover {
    border-left-color: #1565c0 !important;
    box-shadow: 0 12px 40px rgba(30, 136, 229, 0.15) !important;
}

/* Value 图标 */
body.lang-ja.page-template-template-about .value-icon {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3) !important;
    color: #ffffff !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

body.lang-ja.page-template-template-about .value-icon .dashicons {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    color: #ffffff !important;
}

/* Value 标题 */
body.lang-ja.page-template-template-about .value-title {
    color: #1e3c72 !important;
    font-weight: 600 !important;
}

/* ============================================================================
   Standards/Certifications Section - 認証・規格セクション
   ============================================================================ */

/* Standards 容器 */
body.lang-ja.page-template-template-about .standards-section {
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%) !important;
    border-top: 4px solid #1e88e5 !important;
}

/* Standard 卡片 */
body.lang-ja.page-template-template-about .standard-card {
    background: #ffffff !important;
    border: 2px solid #e8eaed !important;
    border-radius: 10px !important;
}

body.lang-ja.page-template-template-about .standard-card:hover {
    border-color: #1e88e5 !important;
    box-shadow: 0 12px 40px rgba(30, 136, 229, 0.15) !important;
}

/* Standard 徽章 */
body.lang-ja.page-template-template-about .standard-badge {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* ============================================================================
   Team Section - チームセクション
   ============================================================================ */

/* Team 容器 */
body.lang-ja.page-template-template-about .team-section {
    background: #ffffff !important;
}

/* Team 成员卡片 */
body.lang-ja.page-template-template-about .team-member {
    background: var(--jp-bg-light) !important;
    border: 2px solid #e8eaed !important;
    border-radius: 14px !important;
}

body.lang-ja.page-template-template-about .team-member:hover {
    border-color: #42a5f5 !important;
    box-shadow: var(--jp-shadow-md) !important;
}

/* Team 成员头像边框 */
body.lang-ja.page-template-template-about .team-member-avatar {
    border: 4px solid #1e88e5 !important;
}

/* Team 成员职位 */
body.lang-ja.page-template-template-about .team-member-role {
    color: #1e88e5 !important;
}

/* ============================================================================
   CTA Section - CTAセクション
   ============================================================================ */

/* CTA 容器 */
body.lang-ja.page-template-template-about .about-cta,
body.lang-ja.page-template-template-about .cta-section {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    border-radius: 14px !important;
}

/* CTA 标题 */
body.lang-ja.page-template-template-about .about-cta h2,
body.lang-ja.page-template-template-about .about-cta h3,
body.lang-ja.page-template-template-about .cta-section h2,
body.lang-ja.page-template-template-about .cta-section h3 {
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    letter-spacing: 0.03em !important;
}

/* CTA 文本 */
body.lang-ja.page-template-template-about .about-cta p,
body.lang-ja.page-template-template-about .cta-section p {
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.8 !important;
    letter-spacing: 0.02em !important;
}

/* CTA 按钮 */
body.lang-ja.page-template-template-about .about-cta .btn,
body.lang-ja.page-template-template-about .about-cta .btn-primary,
body.lang-ja.page-template-template-about .cta-section .btn,
body.lang-ja.page-template-template-about .cta-section .btn-primary {
    background: #ffffff !important;
    color: #1e3c72 !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border: none !important;
}

body.lang-ja.page-template-template-about .about-cta .btn:hover,
body.lang-ja.page-template-template-about .about-cta .btn-primary:hover,
body.lang-ja.page-template-template-about .cta-section .btn:hover,
body.lang-ja.page-template-template-about .cta-section .btn-primary:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* CTA 图标 */
body.lang-ja.page-template-template-about .cta-icon {
    width: 80px !important;
    height: 80px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

body.lang-ja.page-template-template-about .cta-icon .dashicons {
    font-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
    color: #ffffff !important;
}

/* ============================================================================
   General Elements - 一般要素
   ============================================================================ */

/* 所有按钮 */
body.lang-ja.page-template-template-about .btn-primary:not(.about-cta .btn-primary):not(.cta-section .btn-primary) {
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

body.lang-ja.page-template-template-about .btn-primary:not(.about-cta .btn-primary):not(.cta-section .btn-primary):hover {
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
    box-shadow: 0 8px 20px rgba(30, 136, 229, 0.4) !important;
}

/* 链接颜色 */
body.lang-ja.page-template-template-about a:not(.btn) {
    color: #1e88e5 !important;
}

body.lang-ja.page-template-template-about a:not(.btn):hover {
    color: #1565c0 !important;
}

/* 卡片通用样式 */
body.lang-ja.page-template-template-about .card {
    border: 2px solid #e8eaed !important;
    border-radius: 10px !important;
}

body.lang-ja.page-template-template-about .card:hover {
    border-color: #42a5f5 !important;
    box-shadow: var(--jp-shadow-md) !important;
}

/* ============================================================================
   Responsive Design - レスポンシブデザイン
   ============================================================================ */

@media (max-width: 768px) {
    body.lang-ja.page-template-template-about .section-title,
    body.lang-ja.page-template-template-about .company-intro h2 {
        font-size: 24px !important;
    }
    
    body.lang-ja.page-template-template-about .section-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }
    
    body.lang-ja.page-template-template-about .section-icon .dashicons {
        font-size: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 640px) {
    body.lang-ja.page-template-template-about .section-title,
    body.lang-ja.page-template-template-about .company-intro h2 {
        font-size: 20px !important;
        letter-spacing: 0.02em !important;
    }
    
    body.lang-ja.page-template-template-about .section-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }
    
    body.lang-ja.page-template-template-about .section-icon .dashicons {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }
}