/* ========================================
   Reset & Base Styles
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   Typography
======================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* ========================================
   Header
======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #0066CC;
}

.logo i {
    font-size: 28px;
}

.nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav a {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: #0066CC;
}

.nav-cta {
    background: #FF6B35;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 5px;
}

.nav-cta:hover {
    background: #E55A2B;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    transition: right 0.3s ease;
    padding: 20px;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 60px;
}

.mobile-nav a {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}

/* ========================================
   Hero Section
======================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #003D7A 0%, #0066CC 100%);
    color: #fff;
    padding: 120px 0 80px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 25px;
    opacity: 0.95;
}

.hero-description {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
    opacity: 0.9;
}

.hero-description strong {
    font-weight: 700;
    color: #FFD700;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.hero-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.hero-feature:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.hero-feature i {
    font-size: 32px;
    color: #FFD700;
}

.hero-feature span {
    font-size: 14px;
    font-weight: 500;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* ========================================
   Buttons
======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: #FF6B35;
    color: #fff;
}

.btn-primary:hover {
    background: #E55A2B;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.btn-secondary {
    background: #FF6B35;
    color: #fff;
}

.btn-secondary:hover {
	background: #E55A2B;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* ========================================
   Section Styles
======================================== */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 36px;
    font-weight: 900;
    color: #003D7A;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35, #0066CC);
    border-radius: 2px;
}

.section-description {
    font-size: 16px;
    color: #1F3B64;
    max-width: 700px;
    margin: 20px auto 0;
    line-height: 1.8;
	font-weight: 600; /* or 700 */
}

/* ========================================
   Challenges Section
======================================== */
.challenges {
    padding: 100px 0;
    background: #F8F9FA;
}

.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.challenge-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

.challenge-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.challenge-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
}

.challenge-title {
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
}

.challenge-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

/* ========================================
   Solutions Section
======================================== */
.solutions {
    padding: 100px 0;
    background: #fff;
}

.solutions-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.solution-item {
    display: flex;
    gap: 30px;
    background: #F8F9FA;
    padding: 40px;
    border-radius: 20px;
    border-left: 6px solid #0066CC;
    transition: all 0.3s ease;
}

.solution-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.solution-number {
    font-size: 48px;
    font-weight: 900;
    color: rgba(0, 102, 204, 0.2);
    line-height: 1;
    min-width: 80px;
}

.solution-content {
    flex: 1;
    display: flex;
    gap: 30px;
}

.solution-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    flex-shrink: 0;
}

.solution-text {
    flex: 1;
}

.solution-title {
    font-size: 22px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
}

.solution-description {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

.solution-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.solution-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
}

.solution-features i {
    color: #0066CC;
    font-size: 16px;
}

/* ========================================
   Merits Section
======================================== */
.merits {
    padding: 100px 0;
    background: linear-gradient(135deg, #003D7A 0%, #0066CC 100%);
    color: #fff;
}

.merits .section-title {
    color: #fff;
}

.merits .section-title::after {
    background: #FFD700;
}

.merits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.merit-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.merit-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.merit-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 60px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
}

.merit-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD700;
    font-size: 36px;
}

.merit-title {
    font-size: 28px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 10px;
}

.merit-subtitle {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    opacity: 0.9;
    margin-bottom: 20px;
}

.merit-description {
    font-size: 15px;
    line-height: 1.8;
    opacity: 0.9;
    text-align: center;
    margin-bottom: 30px;
}

.merit-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.merit-stat {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.merit-stat-value {
    font-size: 32px;
    font-weight: 900;
    color: #FFD700;
    margin-bottom: 8px;
}

.merit-stat-label {
    font-size: 13px;
    opacity: 0.9;
}

/* ========================================
   Specs Section
======================================== */
.specs {
    padding: 100px 0;
    background: #F8F9FA;
}

.specs-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.specs-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 30px;
    text-align: center;
}

.specs-table-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table thead {
    background: linear-gradient(135deg, #003D7A, #0066CC);
    color: #fff;
}

.specs-table th {
    padding: 20px;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
}

.specs-table tbody tr {
    border-bottom: 1px solid #E8E8E8;
    transition: background 0.2s ease;
}

.specs-table tbody tr:hover {
    background: #F8F9FA;
}

.specs-table td {
    padding: 20px;
    font-size: 15px;
}

.specs-table td:first-child {
    font-weight: 600;
    color: #003D7A;
    width: 35%;
}

.specs-table td:first-child i {
    margin-right: 10px;
    color: #0066CC;
}

.custom-options {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.custom-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #F8F9FA;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.custom-item:hover {
    background: #E8F4FF;
    transform: translateX(5px);
}

.custom-item i {
    color: #0066CC;
    font-size: 20px;
}

.custom-item span {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.structure-image {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.structure-diagram {
    background: linear-gradient(135deg, #F8F9FA 0%, #E8F4FF 100%);
    padding: 40px;
    border-radius: 15px;
    border: 2px dashed #0066CC;
}

.structure-components {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.structure-component {
    text-align: center;
}

.component-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0066CC;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.component-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.component-label small {
    font-size: 11px;
    font-weight: 400;
    color: #666;
    display: block;
    margin-top: 5px;
}

/* ========================================
   Use Cases Section
======================================== */
.use-cases {
    padding: 100px 0;
    background: #fff;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.use-case-card {
    background: #F8F9FA;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.use-case-card:hover {
    border-color: #0066CC;
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.use-case-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
}

.use-case-title {
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
}

.use-case-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

/* ========================================
   Case Study Section
======================================== */
.case-study {
    padding: 100px 0;
    background: #F8F9FA;
}

.case-card {
    background: #F8F9FA;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.case-header {
    background: linear-gradient(135deg, #003D7A, #0066CC);
    color: #fff;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.case-company {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 24px;
    font-weight: 700;
}

.case-company i {
    font-size: 32px;
}

.case-industry {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.case-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.case-section {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    border-left: 4px solid #0066CC;
}

.case-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
}

.case-section-title i {
    color: #0066CC;
}

.case-text {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
}

.case-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.case-result {
    text-align: center;
    padding: 25px;
    background: #E8F4FF;
    border-radius: 12px;
}

.case-result-value {
    font-size: 32px;
    font-weight: 900;
    color: #0066CC;
    margin-bottom: 10px;
}

.case-result-label {
    font-size: 14px;
    color: #666;
}

.case-quote {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    border: 2px solid #E8E8E8;
    position: relative;
    margin-top: 20px;
}

.case-quote i {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 32px;
    color: rgba(0, 102, 204, 0.2);
}

.case-quote p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    font-style: italic;
    padding-left: 50px;
    margin-bottom: 15px;
}

.case-quote-author {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #003D7A;
}

/* ========================================
   FAQ Section
======================================== */
.faq {
    padding: 100px 0;
    background: #F8F9FA;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: #F8F9FA;
}

.faq-question > i:first-child {
    color: #0066CC;
    font-size: 24px;
}

.faq-question h3 {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: #003D7A;
}

.faq-toggle {
    color: #999;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 30px 30px 70px;
    font-size: 15px;
    color: #666;
    line-height: 1.8;
}

.faq-answer strong {
    color: #0066CC;
}

/* ========================================
   Contact Section
======================================== */
.contact {
    padding: 100px 0;
    background: #fff;
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.contact-option {
    background: #F8F9FA;
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.contact-option:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-10px);
}

.contact-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
}

.contact-title {
    font-size: 22px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
}

.contact-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
    background: #F8F9FA;
    border-radius: 15px;
}

.contact-info-item i {
    font-size: 28px;
    color: #0066CC;
    margin-top: 5px;
}

.contact-info-item strong {
    display: block;
    font-size: 16px;
    color: #003D7A;
    margin-bottom: 8px;
}

.contact-info-item p {
    font-size: 15px;
    color: #666;
}

/* ========================================
   Footer
======================================== */
.footer {
    background: #003D7A;
    color: #fff;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 300px));
	justify-content: center;
    gap: 40px;
    margin: 0 auto 40px;
    max-width: 700px; /* ← これを追加 */
}

.footer-section {
}

.footer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-title i {
    font-size: 24px;
}

.footer-description {
    font-size: 14px;
    opacity: 0.8;
    line-height: 1.7;
}

.footer-heading {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #FFD700;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    font-size: 14px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    opacity: 1;
    padding-left: 5px;
}

.footer-contact {
    list-style: none;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 14px;
    opacity: 0.8;
}

.footer-contact i {
    color: #FFD700;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 14px;
    opacity: 0.7;
}

/* 上段ブランド（フッター上部） */
.footer-brand-top {
    text-align: center;
    margin-bottom: 30px;
}

.footer-brand-top .footer-title {
    justify-content: center; /* アイコン＋文字を中央寄せ */
}

.footer-brand-top .footer-description {
    max-width: 700px;
    margin: 10px auto 0;
}

/* ========================================
   Scroll to Top Button
======================================== */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #FF6B35;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: #E55A2B;
    transform: translateY(-5px);
}

/* ========================================
   Strengths Section (Top Page)
======================================== */
.strengths {
    padding: 100px 0;
    background: #fff;
}

.strengths-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.strength-item {
    display: flex;
    gap: 30px;
    background: #F8F9FA;
    padding: 40px;
    border-radius: 20px;
    border-left: 6px solid #0066CC;
    transition: all 0.3s ease;
}

.strength-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.strength-number {
    font-size: 48px;
    font-weight: 900;
    color: rgba(0, 102, 204, 0.2);
    line-height: 1;
    min-width: 80px;
}

.strength-content {
    flex: 1;
    display: flex;
    gap: 30px;
}

.strength-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    flex-shrink: 0;
}

.strength-text {
    flex: 1;
}

.strength-title {
    font-size: 22px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 8px;
}

.strength-subtitle {
    font-size: 14px;
    color: #0066CC;
    font-weight: 600;
    margin-bottom: 15px;
}

.strength-description {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

.strength-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.strength-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
}

.strength-features i {
    color: #0066CC;
    font-size: 16px;
}

/* ========================================
   Applications Section (Top Page)
======================================== */
.applications {
    padding: 100px 0;
    background: #F8F9FA;
}

.applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}

.application-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.application-card:hover {
    border-color: #0066CC;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.application-card.featured {
    border-color: #FFD700;
}

.application-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    color: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.application-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
}

.application-title {
    font-size: 22px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
    text-align: center;
}

.application-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: center;
}

.application-features {
    list-style: none;
    margin-bottom: 25px;
}

.application-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.application-features i {
    color: #0066CC;
    font-size: 14px;
}

.application-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0066CC;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}

.application-link:hover {
    color: #003D7A;
    gap: 12px;
}

/* ========================================
   Technology Section
======================================== */
.technology {
    padding: 100px 0;
    background: #fff;
}

.technology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.technology-card {
    background: #F8F9FA;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.technology-card:hover {
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.technology-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
}

.technology-title {
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
}

.technology-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

/* ========================================
   Features Section
======================================== */
.features {
    padding: 100px 0;
    background: linear-gradient(135deg, #003D7A 0%, #0066CC 100%);
    color: #fff;
}

.features .section-title {
    color: #fff;
}

.features .section-title::after {
    background: #FFD700;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-align: center;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD700;
    font-size: 32px;
}

.feature-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.feature-description {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.9;
}

/* ========================================
   Process Section
======================================== */
.process {
    padding: 100px 0;
    background: #F8F9FA;
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 40px;
    bottom: 40px;
    width: 4px;
    background: linear-gradient(180deg, #0066CC, #003D7A);
    border-radius: 2px;
}

.process-step {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
}

.process-step:last-child {
    margin-bottom: 0;
}

.process-step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
    z-index: 1;
}

.process-step-content {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.process-step-title {
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 12px;
}

.process-step-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

/* ========================================
   Comparison Section
======================================== */
.comparison {
    padding: 100px 0;
    background: #fff;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-bottom: 40px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    overflow: hidden;
}

.comparison-table thead {
    background: linear-gradient(135deg, #003D7A, #0066CC);
    color: #fff;
}

.comparison-table th {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.comparison-table th.highlight {
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
}

.comparison-table tbody tr {
    border-bottom: 1px solid #E8E8E8;
}

.comparison-table tbody tr:hover {
    background: #F8F9FA;
}

.comparison-table td {
    padding: 20px;
    text-align: center;
    font-size: 15px;
}

/* ★追加：ratingがtdに付いている場合の崩れ対策 */
.comparison-table td.rating {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.comparison-table td:first-child {
    font-weight: 600;
    color: #003D7A;
    text-align: left;
}

.comparison-table td.highlight {
    background: #FFF8F0;
    font-weight: 600;
    color: #0066CC;
}

.comparison-table i.fa-star {
    color: #FFD700;
    margin-right: 5px;
}

.comparison-note {
    background: #E8F4FF;
    padding: 25px 30px;
    border-radius: 15px;
    border-left: 4px solid #0066CC;
    display: flex;
    gap: 15px;
}

.comparison-note i {
    color: #0066CC;
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 3px;
}

.comparison-note p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

.comparison-note strong {
    color: #003D7A;
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 768px) {
    .nav {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-cta {
        flex-direction: column;
    }

    .section-title {
        font-size: 28px;
    }

    .challenges-grid,
    .merits-grid {
        grid-template-columns: 1fr;
    }

    .solution-item,
    .strength-item {
        flex-direction: column;
        padding: 30px 20px;
    }

    .solution-content,
    .strength-content {
        flex-direction: column;
    }

    .specs-table-wrapper,
    .custom-options,
    .structure-image {
        padding: 20px;
    }

    .specs-table {
        font-size: 13px;
    }

    .specs-table th,
    .specs-table td {
        padding: 12px;
    }

    .case-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .case-content {
        padding: 20px;
    }

    .contact-options {
        grid-template-columns: 1fr;
    }

    .footer-content {
        /* grid-template-columns: 1fr; */
		grid-template-columns: repeat(2, 1fr);
    }

    /* Top Page Specific */
    .applications-grid {
        grid-template-columns: 1fr;
    }

    .technology-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .process-timeline::before {
        left: 20px;
    }

    .process-step {
        gap: 20px;
    }

    .process-step-number {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .comparison-table {
        font-size: 13px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        padding: 100px 0 60px;
    }

    .hero-title {
        font-size: 26px;
    }

    .section-title {
        font-size: 24px;
    }

    .btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .specs-table td:first-child {
        width: 40%;
    }

    .scroll-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }
}

/* ========================================
   Technical Article Page Styles
   (agv-battery-guide.html)
======================================== */

/* Hero Article Variant */
.hero-article {
    background: linear-gradient(135deg, #003D7A 0%, #0066CC 100%);
}

/* Table of Contents */
.toc-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.toc-card {
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.toc-title {
    font-size: 28px;
    color: #003D7A;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.toc-title i {
    color: #FF6B35;
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.toc-item a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.toc-item a:hover {
    border-color: #0066CC;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
    transform: translateX(5px);
}

.toc-number {
    font-size: 24px;
    font-weight: 700;
    color: #0066CC;
    min-width: 40px;
}

.toc-text {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

/* Content Section */
.content-section {
    padding: 80px 0;
}

.section-gray {
    background-color: #f8f9fa;
}

.section-number {
    display: inline-block;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 25px;
    margin-bottom: 15px;
}

/* Article Content */
.article-content {
    max-width: 900px;
    margin: 0 auto;
}

.article-lead {
    font-size: 18px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 40px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 5px solid #0066CC;
}

.article-lead p {
    margin: 0;
}

.article-text {
    font-size: 16px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 40px;
}

.article-text h3 {
    font-size: 24px;
    color: #003D7A;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #0066CC;
}

.article-text h4 {
    font-size: 20px;
    color: #0066CC;
    margin: 30px 0 15px;
}

.article-text p {
    margin-bottom: 20px;
}

.article-text ul,
.article-text ol {
    margin: 20px 0 20px 25px;
}

.article-text li {
    margin-bottom: 12px;
    line-height: 1.8;
}

/* Info Box */
.info-box {
    display: flex;
    gap: 20px;
    padding: 30px;
    border-radius: 10px;
    margin: 40px 0;
}

.info-box-primary {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-left: 5px solid #0066CC;
}

.info-box-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: #0066CC;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}

.info-box-content {
    flex: 1;
}

.info-box-title {
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
}

.info-box-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.info-box-list li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.info-box-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0066CC;
    font-weight: 700;
}

/* Battery Types Grid */
.battery-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.battery-type-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.battery-type-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.battery-type-recommended {
    border: 3px solid #FFD700;
}

.battery-type-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #003D7A;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.battery-type-header {
    padding: 40px 30px 30px;
    color: #fff;
    text-align: center;
}

.battery-type-lead {
    background: linear-gradient(135deg, #78909C, #546E7A);
}

.battery-type-nmc {
    background: linear-gradient(135deg, #5E35B1, #7E57C2);
}

.battery-type-lfp {
    background: linear-gradient(135deg, #0066CC, #003D7A);
}

.battery-type-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.battery-type-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.battery-type-subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.battery-type-body {
    padding: 30px;
}

.battery-type-overview,
.battery-type-features,
.battery-type-use {
    margin-bottom: 25px;
}

.battery-type-overview h4,
.battery-type-features h4,
.battery-type-use h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

.battery-type-overview p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

.battery-type-use ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.battery-type-use li {
    padding: 8px 0 8px 25px;
    position: relative;
    font-size: 15px;
    color: #555;
}

.battery-type-use li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #0066CC;
    font-weight: 700;
}

/* Feature List */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    padding: 8px 0;
}

.feature-item i {
    font-size: 18px;
    flex-shrink: 0;
}

.feature-pro i {
    color: #4CAF50;
}

.feature-con i {
    color: #F44336;
}

/* Selection Guide */
.selection-guide {
    max-width: 1000px;
    margin: 0 auto;
}

.selection-intro {
    font-size: 18px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 50px;
    text-align: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
}

.selection-criteria {
    display: grid;
    gap: 30px;
    margin-bottom: 60px;
}

.criteria-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.criteria-header {
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.criteria-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.criteria-title {
    font-size: 22px;
    font-weight: 700;
}

.criteria-body {
    padding: 30px;
}

.criteria-check,
.criteria-recommend {
    margin-bottom: 25px;
}

.criteria-check:last-child,
.criteria-recommend:last-child {
    margin-bottom: 0;
}

.criteria-check h4,
.criteria-recommend h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.criteria-check h4::before {
    content: "📋";
    font-size: 20px;
}

.criteria-recommend h4::before {
    content: "💡";
    font-size: 20px;
}

.criteria-check ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.criteria-check li {
    padding: 8px 0 8px 25px;
    position: relative;
    font-size: 15px;
    color: #555;
}

.criteria-check li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: #0066CC;
    font-weight: 700;
    font-size: 20px;
}

.recommend-item {
    background: #f8f9fa;
    border-left: 4px solid #0066CC;
    padding: 15px 20px;
    margin-bottom: 12px;
    border-radius: 5px;
}

.recommend-item:last-child {
    margin-bottom: 0;
}

.recommend-item strong {
    display: block;
    color: #003D7A;
    margin-bottom: 5px;
    font-size: 16px;
}

.recommend-item p {
    margin: 0;
    font-size: 15px;
    color: #555;
}

.highlight-lfp {
    color: #0066CC;
    font-weight: 700;
}

.highlight-nmc {
    color: #5E35B1;
    font-weight: 700;
}

.highlight-lead {
    color: #78909C;
    font-weight: 700;
}

/* Decision Flow Chart */
.decision-flow {
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.flow-title {
    font-size: 24px;
    color: #003D7A;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.flow-title i {
    color: #FF6B35;
}

.flow-chart {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flow-step {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    border: 2px solid #e0e0e0;
}

.flow-question {
    font-size: 18px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
    text-align: center;
}

.flow-branches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.flow-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.flow-answer {
    font-size: 16px;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 25px;
    color: #fff;
}

.flow-yes {
    background: #4CAF50;
}

.flow-no {
    background: #F44336;
}

.flow-next {
    font-size: 24px;
    color: #0066CC;
}

.flow-result {
    background: #fff;
    border: 3px solid;
    border-radius: 10px;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-lead {
    border-color: #78909C;
    color: #78909C;
}

.flow-nmc {
    border-color: #5E35B1;
    color: #5E35B1;
}

.flow-lfp {
    border-color: #0066CC;
    color: #0066CC;
}

/* System Overview */
.system-overview {
    max-width: 1000px;
    margin: 0 auto;
}

.system-intro {
    font-size: 18px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 50px;
    text-align: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
}

.system-diagram {
    margin-bottom: 60px;
}

.system-component-main {
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);
}

.system-component-main .component-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.system-component-main .component-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.system-component-main .component-subtitle {
    font-size: 16px;
    opacity: 0.9;
}

.system-components-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.system-component {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.system-component:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.system-component .component-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
}

.system-component .component-title {
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 15px;
    text-align: center;
}

.system-component .component-description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.component-specs {
    border-top: 2px solid #e0e0e0;
    padding-top: 15px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.spec-item:last-child {
    border-bottom: none;
}

.spec-label {
    font-weight: 700;
    color: #0066CC;
    font-size: 14px;
    flex-shrink: 0;
}

.spec-value {
    font-size: 14px;
    color: #555;
    text-align: right;
}

/* BMS Details */
.bms-details {
    background: #fff;
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 60px 0;
}

.bms-title {
    font-size: 28px;
    color: #003D7A;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.bms-title i {
    color: #FF6B35;
    font-size: 32px;
}

.bms-intro {
    font-size: 16px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 40px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.bms-functions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.bms-function {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    border-left: 4px solid #0066CC;
}

.function-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.function-header i {
    color: #0066CC;
    font-size: 24px;
}

.function-header h4 {
    font-size: 18px;
    color: #003D7A;
    margin: 0;
}

.function-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.function-list li {
    padding: 8px 0 8px 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

.function-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: 700;
}

/* BMS Comparison */
.bms-comparison {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
}

.comparison-title {
    font-size: 20px;
    color: #003D7A;
    margin-bottom: 25px;
    text-align: center;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.comparison-card {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.comparison-label {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.comparison-domestic {
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
}

.comparison-overseas {
    background: linear-gradient(135deg, #78909C, #546E7A);
    color: #fff;
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    padding: 10px 0 10px 30px;
    position: relative;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

.comparison-list li i {
    position: absolute;
    left: 0;
    top: 12px;
}

.comparison-list li i.fa-check {
    color: #4CAF50;
}

.comparison-list li i.fa-times {
    color: #F44336;
}

/* Configuration Example */
.config-example {
    margin-top: 60px;
}

.config-title {
    font-size: 28px;
    color: #003D7A;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.config-title i {
    color: #FF6B35;
}

.config-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.config-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.config-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.config-header {
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    padding: 25px;
    text-align: center;
}

.config-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.config-body {
    padding: 25px;
}

.config-spec {
    margin-bottom: 20px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-key {
    font-weight: 600;
    color: #0066CC;
    font-size: 14px;
}

.spec-value {
    font-size: 14px;
    color: #555;
}

.config-use {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Comparison Table */
.comparison-table-container {
    overflow-x: auto;
    margin-top: 50px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.comparison-table thead {
    background: linear-gradient(135deg, #003D7A, #0066CC);
}

.comparison-header {
    padding: 20px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.comparison-header:first-child {
    text-align: left;
}

.battery-lead {
    background: linear-gradient(135deg, #78909C, #546E7A) !important;
}

.battery-nmc {
    background: linear-gradient(135deg, #5E35B1, #7E57C2) !important;
}

.battery-lfp {
    background: linear-gradient(135deg, #0066CC, #003D7A) !important;
}

.comparison-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease;
}

.comparison-table tbody tr:hover {
    background-color: #f8f9fa;
}

.comparison-label {
    padding: 20px;
    font-weight: 600;
    color: #003D7A;
    text-align: left;
}

.comparison-table td {
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #555;
}

.rating {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.rating-excellent {
    background: #E8F5E9;
    color: #2E7D32;
}

.rating-good {
    background: #FFF9C4;
    color: #F57F17;
}

.rating-poor {
    background: #FFEBEE;
    color: #C62828;
}

.comparison-summary {
    background: #f8f9fa;
    font-weight: 700;
}

.comparison-summary td {
    padding: 25px 20px;
    font-size: 15px;
}

.comparison-notes {
    margin-top: 30px;
}

.note-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: #FFF3E0;
    border-left: 4px solid #FF6B35;
    border-radius: 8px;
}

.note-box i {
    color: #FF6B35;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.note-box p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.7;
}

/* Responsive Design for Article Page */
@media (max-width: 768px) {
    .toc-grid {
        grid-template-columns: 1fr;
    }

    .battery-types-grid {
        grid-template-columns: 1fr;
    }

    .flow-branches {
        grid-template-columns: 1fr;
    }

    .system-components-grid {
        grid-template-columns: 1fr;
    }

    .bms-functions {
        grid-template-columns: 1fr;
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .config-cards {
        grid-template-columns: 1fr;
    }

    .comparison-table {
        font-size: 12px;
    }

    .comparison-header,
    .comparison-label,
    .comparison-table td {
        padding: 12px 8px;
    }

    .article-lead,
    .selection-intro,
    .system-intro {
        font-size: 16px;
    }

    .bms-details {
        padding: 30px 20px;
    }
}

/* ========================================
   AMR Battery & BMS Technical Article Styles
   (amr-battery-bms.html)
======================================== */

/* Comparison Cards for Tech Specs */
.comparison-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.comparison-card-tech {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.comparison-card-tech:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.comparison-card-header {
    padding: 25px;
    color: #fff;
    text-align: center;
}

.comparison-header-agv {
    background: linear-gradient(135deg, #78909C, #546E7A);
}

.comparison-header-amr {
    background: linear-gradient(135deg, #0066CC, #003D7A);
}

.comparison-card-header h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.comparison-card-body {
    padding: 30px;
}

.tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    line-height: 1.7;
}

.tech-list li:last-child {
    border-bottom: none;
}

.tech-list i {
    color: #0066CC;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Requirement Grid */
.requirement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.requirement-item {
    text-align: center;
    padding: 20px 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.requirement-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.requirement-text {
    font-size: 14px;
    font-weight: 600;
    color: #003D7A;
}

/* Technical Comparison Table */
.tech-comparison-table {
    margin: 40px 0;
    overflow-x: auto;
}

/* Reason Cards */
.reason-cards {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 40px 0;
}

.reason-card {
    display: flex;
    gap: 25px;
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.reason-card:hover {
    transform: translateX(5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.reason-number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
}

.reason-content {
    flex: 1;
}

.reason-title {
    font-size: 20px;
    color: #003D7A;
    margin-bottom: 12px;
}

.reason-description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

.reason-detail {
    padding: 12px 20px;
    background: #FFF3E0;
    border-left: 4px solid #FF6B35;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

/* BMS Function Cards */
.bms-functions {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 40px 0;
}

.bms-function-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.function-header {
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.function-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.function-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.function-body {
    padding: 35px;
}

.function-description {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.sub-title {
    font-size: 18px;
    color: #003D7A;
    margin: 30px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066CC;
}

/* Algorithm Cards */
.algorithm-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    border-left: 4px solid #0066CC;
}

.algorithm-recommended {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-left-color: #FFD700;
    border-left-width: 5px;
}

.algorithm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.algorithm-label {
    font-size: 18px;
    font-weight: 700;
    color: #003D7A;
}

.algorithm-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.badge-basic {
    background: linear-gradient(135deg, #78909C, #546E7A);
}

.badge-intermediate {
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
}

.badge-advanced {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #003D7A;
}

.algorithm-content p {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

.tech-note {
    margin-top: 15px;
    padding: 12px 20px;
    background: #fff;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

/* SOH Methods */
.soh-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.soh-method {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    border-left: 4px solid #0066CC;
}

.soh-recommended {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-left-color: #FFD700;
    border-left-width: 5px;
}

.method-title {
    font-size: 16px;
    color: #003D7A;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.method-title i {
    color: #0066CC;
}

.soh-method > p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
}

.method-note {
    padding: 10px 15px;
    background: #fff;
    border-radius: 5px;
    font-size: 13px;
    color: #555;
}

/* Balancing Comparison */
.balancing-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.balancing-method {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    border: 2px solid #e0e0e0;
}

.balancing-recommended {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-color: #0066CC;
    border-width: 3px;
}

.balancing-title {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.balancing-title i {
    color: #0066CC;
}

.balancing-content p {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.method-use {
    margin-top: 15px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

.method-use-recommended {
    background: #FFF9E6;
    border-left: 3px solid #FFD700;
}

/* Tech Note Box */
.tech-note-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: #FFF3E0;
    border-left: 4px solid #FF6B35;
    border-radius: 8px;
    margin-top: 25px;
}

.tech-note-box i {
    color: #FF6B35;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tech-note-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

/* Protection Grid */
.protection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.protection-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.protection-item:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
    transform: translateY(-3px);
}

.protection-icon {
    font-size: 36px;
    margin-bottom: 15px;
}

.protection-item h5 {
    font-size: 16px;
    color: #003D7A;
    margin-bottom: 10px;
}

.protection-item p {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

/* Communication Protocols */
.communication-protocols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.protocol-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    border-left: 4px solid #0066CC;
}

.protocol-primary {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-left-color: #0066CC;
    border-left-width: 5px;
}

.protocol-title {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.protocol-title i {
    color: #0066CC;
}

.protocol-specs {
    margin-bottom: 20px;
}

.protocol-data {
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
}

.protocol-data ul {
    margin: 10px 0 0 20px;
}

.protocol-data li {
    margin-bottom: 5px;
    font-size: 13px;
    color: #555;
}

.protocol-note {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

/* Config Notation */
.config-notation {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    margin: 30px 0;
}

.notation-title {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notation-title i {
    color: #0066CC;
}

.notation-example {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notation-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #fff;
    border-radius: 8px;
    flex-wrap: wrap;
}

.notation-label {
    font-size: 24px;
    font-weight: 700;
    color: #0066CC;
    font-family: 'Courier New', monospace;
}

.notation-arrow {
    font-size: 20px;
    color: #FF6B35;
}

.notation-description {
    font-size: 15px;
    color: #555;
}

/* Config Example Cards */
.config-examples {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.config-example-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.config-example-header {
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.config-example-header h4 {
    font-size: 20px;
    margin: 0;
}

.config-badge {
    padding: 6px 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.config-example-body {
    padding: 30px;
}

.config-specs {
    margin-bottom: 20px;
}

.config-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.config-spec-item:last-child {
    border-bottom: none;
}

.config-use-case {
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 14px;
    color: #555;
}

/* Caution Cards */
.caution-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.caution-card {
    display: flex;
    gap: 20px;
    background: #FFF3E0;
    border-radius: 10px;
    padding: 25px;
    border-left: 4px solid #FF6B35;
}

.caution-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.caution-content {
    flex: 1;
}

.caution-title {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 12px;
}

.caution-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
}

.caution-detail {
    padding: 10px 15px;
    background: #fff;
    border-radius: 5px;
    font-size: 13px;
    color: #555;
}

/* Thermal Management */
.thermal-importance {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 35px;
    margin: 40px 0;
}

.thermal-title {
    font-size: 22px;
    color: #003D7A;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.thermal-title i {
    color: #FF6B35;
    font-size: 26px;
}

.thermal-effects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.thermal-effect-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    border: 3px solid;
}

.thermal-optimal {
    border-color: #4CAF50;
}

.thermal-warning {
    border-color: #FF9800;
}

.thermal-danger {
    border-color: #F44336;
}

.effect-temp {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.thermal-optimal .effect-temp {
    color: #4CAF50;
}

.thermal-warning .effect-temp {
    color: #FF9800;
}

.thermal-danger .effect-temp {
    color: #F44336;
}

.effect-label {
    font-size: 14px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 8px;
}

.effect-description {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

/* Cooling Methods */
.cooling-methods {
    margin: 50px 0;
}

.cooling-title {
    font-size: 22px;
    color: #003D7A;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 3px solid #0066CC;
}

.cooling-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.cooling-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.cooling-card:hover {
    border-color: #0066CC;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
}

.cooling-recommended {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-color: #0066CC;
    border-width: 3px;
}

.cooling-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.cooling-header i {
    font-size: 28px;
    color: #0066CC;
}

.cooling-header h4 {
    font-size: 18px;
    color: #003D7A;
    margin: 0;
}

.cooling-body ul {
    margin: 8px 0 8px 20px;
}

.cooling-body li {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.cooling-pros,
.cooling-cons,
.cooling-application {
    margin-bottom: 15px;
}

.cooling-application {
    padding: 12px 15px;
    background: #fff;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

/* Thermal Design Points */
.thermal-design-points {
    margin: 50px 0;
}

.design-title {
    font-size: 22px;
    color: #003D7A;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.design-title i {
    color: #FF6B35;
    font-size: 24px;
}

.design-points {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.design-point {
    display: flex;
    gap: 25px;
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.point-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.point-content {
    flex: 1;
}

.point-content h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 10px;
}

.point-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
}

.point-detail {
    padding: 12px 15px;
    background: #f8f9fa;
    border-left: 3px solid #0066CC;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

/* Conclusion Section */
.conclusion-content {
    max-width: 900px;
    margin: 0 auto;
}

.conclusion-intro {
    font-size: 18px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 40px;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
    text-align: center;
}

.key-points {
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.key-points-title {
    font-size: 24px;
    color: #003D7A;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.key-points-title i {
    color: #4CAF50;
    font-size: 28px;
}

.key-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.key-point-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.key-point-item:hover {
    background: #E3F2FD;
    transform: translateX(5px);
}

.key-point-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.key-point-text h4 {
    font-size: 16px;
    color: #003D7A;
    margin-bottom: 6px;
}

.key-point-text p {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.final-message {
    padding: 30px;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-radius: 10px;
    border-left: 5px solid #0066CC;
}

.final-message p {
    font-size: 16px;
    line-height: 1.8;
    color: #003D7A;
    margin-bottom: 15px;
}

.final-message p:last-child {
    margin-bottom: 0;
}

/* Responsive for AMR Technical Article */
@media (max-width: 768px) {
    .comparison-cards,
    .reason-cards,
    .soh-methods,
    .balancing-comparison,
    .protection-grid,
    .communication-protocols,
    .config-examples,
    .caution-cards,
    .thermal-effects,
    .cooling-cards,
    .key-points-grid {
        grid-template-columns: 1fr;
    }

    .reason-card,
    .design-point {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .reason-number,
    .point-number {
        margin-bottom: 15px;
    }

    .notation-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   Glass Coating Page - About Highlights
   写真風3カードハイライト表現
======================================== */

/* About Section - Highlights */
.about-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.highlight-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 102, 204, 0.05) 0%, transparent 70%);
    transition: all 0.6s ease;
    opacity: 0;
}

.highlight-card:hover::before {
    opacity: 1;
    transform: scale(1.1);
}

.highlight-card:nth-child(1) {
    border-top: 4px solid #0066CC;
}

.highlight-card:nth-child(2) {
    border-top: 4px solid #FF6B35;
}

.highlight-card:nth-child(3) {
    border-top: 4px solid #FFD700;
}

.highlight-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 102, 204, 0.3);
}

.highlight-card:nth-child(1):hover {
    border-color: #0066CC;
}

.highlight-card:nth-child(2):hover {
    border-color: #FF6B35;
}

.highlight-card:nth-child(3):hover {
    border-color: #FFD700;
}

.highlight-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #0066CC;
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.highlight-card:nth-child(1) .highlight-icon {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    color: #0066CC;
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
}

.highlight-card:nth-child(2) .highlight-icon {
    background: linear-gradient(135deg, #FFE8E0 0%, #FFD4C4 100%);
    color: #FF6B35;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.15);
}

.highlight-card:nth-child(3) .highlight-icon {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFEDB3 100%);
    color: #FF8C00;
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.15);
}

.highlight-card:hover .highlight-icon {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 12px 30px rgba(0, 102, 204, 0.25);
}

.highlight-card:nth-child(1):hover .highlight-icon {
    box-shadow: 0 12px 30px rgba(0, 102, 204, 0.3);
}

.highlight-card:nth-child(2):hover .highlight-icon {
    box-shadow: 0 12px 30px rgba(255, 107, 53, 0.3);
}

.highlight-card:nth-child(3):hover .highlight-icon {
    box-shadow: 0 12px 30px rgba(255, 215, 0, 0.3);
}

.highlight-content {
    position: relative;
    z-index: 1;
}

.highlight-value {
    font-size: 36px;
    font-weight: 900;
    color: #003D7A;
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #0066CC 0%, #003D7A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.highlight-card:nth-child(2) .highlight-value {
    background: linear-gradient(135deg, #FF6B35 0%, #FF4500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.highlight-card:nth-child(3) .highlight-value {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.highlight-card:hover .highlight-value {
    transform: scale(1.05);
}

.highlight-label {
    font-size: 16px;
    font-weight: 500;
    color: #666;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.highlight-card:hover .highlight-label {
    color: #333;
}

/* Fade-in animation for highlight cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.highlight-card {
    animation: fadeInUp 0.6s ease-out forwards;
}

.highlight-card:nth-child(1) {
    animation-delay: 0.1s;
    opacity: 0;
}

.highlight-card:nth-child(2) {
    animation-delay: 0.2s;
    opacity: 0;
}

.highlight-card:nth-child(3) {
    animation-delay: 0.3s;
    opacity: 0;
}

/* Responsive for About Highlights */
@media (max-width: 968px) {
    .about-highlights {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .highlight-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .about-highlights {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .highlight-card {
        padding: 35px 25px;
    }
    
    .highlight-card:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }
    
    .highlight-icon {
        width: 80px;
        height: 80px;
        font-size: 36px;
    }
    
    .highlight-value {
        font-size: 32px;
    }
    
    .highlight-label {
        font-size: 15px;
    }
}

/* ========================================
   AGV LFP Selection Guide Page - Specific Styles
   AGV用LFPバッテリー選定ガイド専用スタイル
======================================== */

/* Problems Alert Section */
.problems-alert {
    padding: 60px 0;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
}

.alert-card {
    display: flex;
    gap: 30px;
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-left: 6px solid #FF6B35;
}

.alert-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-size: 24px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 25px;
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.problem-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #FFF3E0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.problem-item:hover {
    background: #FFE0B2;
    transform: translateX(5px);
}

.problem-item i {
    font-size: 24px;
    color: #FF6B35;
}

.problem-item span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

/* Communication Section */
.communication-section {
    margin: 50px 0;
}

.sub-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #003D7A;
    margin: 40px 0 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid #0066CC;
}

.sub-section-title i {
    color: #0066CC;
    font-size: 24px;
}

.communication-basics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.basic-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.basic-card:hover {
    border-color: #0066CC;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
}

.basic-card h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 15px;
}

.basic-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
}

.basic-card ul {
    margin: 10px 0 0 20px;
}

.basic-card li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}

.speed-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.speed-option {
    padding: 15px 20px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.speed-option:hover {
    border-color: #0066CC;
}

.speed-recommended {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-color: #0066CC;
    border-width: 3px;
}

.speed-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 5px;
}

.speed-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #0066CC;
    margin-bottom: 8px;
}

.speed-note {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Data Design */
.data-design {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.data-category {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.data-category h4 {
    font-size: 20px;
    color: #003D7A;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066CC;
}

.data-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.data-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.data-item:hover {
    background: #E3F2FD;
    transform: translateX(5px);
}

.data-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.data-content {
    flex: 1;
}

.data-content strong {
    display: block;
    font-size: 16px;
    color: #003D7A;
    margin-bottom: 5px;
}

.data-content p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Enclosure Points */
.enclosure-points {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.enclosure-point {
    display: flex;
    gap: 25px;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.enclosure-point .point-number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
}

.enclosure-point .point-content {
    flex: 1;
}

.enclosure-point .point-content h4 {
    font-size: 20px;
    color: #003D7A;
    margin-bottom: 15px;
}

.point-description {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

.material-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.material-option {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.material-option:hover {
    border-color: #0066CC;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
}

.material-option h5 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066CC;
}

.material-option p {
    font-size: 14px;
    font-weight: 700;
    color: #003D7A;
    margin: 15px 0 8px;
}

.material-option ul {
    margin: 0 0 15px 20px;
}

.material-option li {
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
    line-height: 1.6;
}

.ip-rating {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.ip-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    background: #E3F2FD;
    border-radius: 8px;
    border-left: 4px solid #0066CC;
}

.ip-label {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0066CC;
    min-width: 60px;
}

.ip-description {
    font-size: 14px;
    color: #333;
}

.point-detail {
    padding: 15px 20px;
    background: #FFF3E0;
    border-left: 4px solid #FF6B35;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
    margin-top: 15px;
}

.point-detail strong {
    color: #FF6B35;
}

/* Checklist Sections */
.checklist-intro {
    padding: 25px 30px;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-radius: 10px;
    border-left: 5px solid #0066CC;
    margin-bottom: 40px;
}

.checklist-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: #003D7A;
    margin: 0;
}

.checklist-sections {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.checklist-section {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.checklist-title {
    font-size: 20px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 3px solid #0066CC;
}

.checklist-title i {
    color: #0066CC;
    font-size: 24px;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checklist-item {
    position: relative;
}

.checklist-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.checklist-item label {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.checklist-item label:hover {
    background: #E3F2FD;
    border-color: #0066CC;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #0066CC;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.checklist-item input[type="checkbox"]:checked + label .checkbox-custom {
    background: #0066CC;
}

.checklist-item input[type="checkbox"]:checked + label .checkbox-custom::after {
    content: '✓';
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.checklist-item input[type="checkbox"]:checked + label {
    background: #E3F2FD;
    border-color: #0066CC;
}

.checklist-item input[type="checkbox"]:checked + label .checkbox-text {
    color: #0066CC;
    text-decoration: line-through;
}

.checkbox-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

/* Responsive for AGV Selection Guide */
@media (max-width: 768px) {
    .alert-card {
        flex-direction: column;
        padding: 30px 20px;
    }
    
    .alert-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
        margin: 0 auto;
    }
    
    .alert-title {
        font-size: 20px;
        text-align: center;
    }
    
    .problems-grid {
        grid-template-columns: 1fr;
    }
    
    .communication-basics,
    .material-comparison {
        grid-template-columns: 1fr;
    }
    
    .enclosure-point {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .enclosure-point .point-number {
        margin-bottom: 15px;
    }
    
    .data-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ========================================
   CAN Battery BMS Tech Page - Specific Styles
   CAN通信×バッテリー×BMS技術記事専用スタイル
======================================== */

/* Frame Structure Diagram */
.frame-structure-diagram {
    margin: 40px 0;
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.frame-parts {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 20px 10px;
}

.frame-part {
    flex: 1;
    min-width: 100px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.frame-part:hover {
    border-color: #0066CC;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.15);
}

.frame-highlight {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-color: #0066CC;
    border-width: 3px;
}

.part-header {
    font-size: 16px;
    font-weight: 700;
    color: #003D7A;
    margin-bottom: 10px;
}

.part-detail {
    font-size: 14px;
    color: #0066CC;
    font-weight: 600;
    margin-bottom: 8px;
}

.part-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Flow Diagram */
.flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 40px 0;
}

.flow-step {
    display: flex;
    gap: 20px;
    align-items: center;
    background: #fff;
    border: 2px solid #0066CC;
    border-radius: 10px;
    padding: 25px 30px;
    width: 100%;
    max-width: 700px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.flow-step:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.15);
}

.flow-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.flow-content {
    flex: 1;
}

.flow-content h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 8px;
}

.flow-content p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}

.flow-arrow {
    font-size: 32px;
    color: #0066CC;
    font-weight: 700;
    margin: 5px 0;
}

/* Protection Grid */
.protection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.protection-item {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.protection-item:hover {
    border-color: #0066CC;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
    transform: translateY(-5px);
}

.protection-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}

.protection-content {
    flex: 1;
}

.protection-content h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 12px;
}

.protection-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
}

/* Trouble Cases */
.trouble-cases {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.trouble-case {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.trouble-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 30px;
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    border-bottom: 3px solid #FF6B35;
}

.trouble-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}

.trouble-title {
    font-size: 20px;
    color: #003D7A;
    margin: 0;
}

.trouble-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.trouble-causes,
.trouble-solutions {
    flex: 1;
}

.trouble-causes h4,
.trouble-solutions h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066CC;
}

.trouble-causes ul,
.trouble-solutions ul {
    margin: 0 0 0 20px;
}

.trouble-causes li,
.trouble-solutions li {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 10px;
}

.trouble-solutions li strong {
    color: #0066CC;
    margin-right: 5px;
}

/* Best Practice Grid */
.best-practice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.best-practice-item {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.best-practice-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.bp-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #003D7A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.bp-content {
    flex: 1;
}

.bp-content h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 10px;
}

.bp-content p {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 12px;
}

.bp-detail {
    padding: 12px 15px;
    background: #f8f9fa;
    border-left: 3px solid #FFD700;
    border-radius: 5px;
    font-size: 13px;
    color: #555;
}

.bp-detail strong {
    color: #FF8C00;
}

/* Comparison Grid for CAN Tech Page */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.comparison-card {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.comparison-card:hover {
    border-color: #0066CC;
    box-shadow: 0 5px 15px rgba(0, 102, 204, 0.1);
}

.comparison-card h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066CC;
}

.comparison-card ul {
    margin: 0 0 0 20px;
}

.comparison-card li {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
}

.comparison-card li strong {
    color: #003D7A;
}

/* Responsive for CAN Battery BMS Tech Page */
@media (max-width: 768px) {
    .frame-parts {
        flex-direction: column;
    }
    
    .frame-part {
        min-width: auto;
    }
    
    .flow-step {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .flow-step:hover {
        transform: translateY(-5px);
    }
    
    .flow-arrow {
        transform: rotate(90deg);
    }
    
    .protection-grid,
    .best-practice-grid,
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .protection-item,
    .best-practice-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .trouble-header {
        flex-direction: column;
        text-align: center;
    }
    
    .trouble-body {
        padding: 20px;
    }
}

/* ========================================
   Backup Power Battery Comparison Page - Specific Styles
   バックアップ電源バッテリー比較技術記事専用スタイル
======================================== */

/* Requirements Grid */
.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.requirement-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.requirement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.req-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.req-content {
    flex: 1;
}

.req-title {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 10px;
}

.req-description {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 12px;
}

.req-detail {
    padding: 12px 15px;
    background: #E3F2FD;
    border-left: 3px solid #0066CC;
    border-radius: 5px;
    font-size: 13px;
    color: #003D7A;
}

.req-detail strong {
    color: #0066CC;
}

/* Reason Calculation */
.reason-calculation {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-top: 15px;
}

.reason-calculation h5 {
    font-size: 16px;
    color: #003D7A;
    margin-bottom: 12px;
}

.reason-calculation ul {
    margin: 0 0 0 20px;
}

.reason-calculation li {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
}

.reason-calculation strong {
    color: #0066CC;
}

/* Reason Example */
.reason-example {
    padding: 15px 20px;
    background: #E3F2FD;
    border-left: 4px solid #0066CC;
    border-radius: 5px;
    font-size: 14px;
    color: #003D7A;
    margin-top: 15px;
}

.reason-example strong {
    color: #0066CC;
}

/* Reason Comparison */
.reason-comparison {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.reason-comp-item {
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

.reason-comp-item strong {
    color: #003D7A;
}

/* Reason Features */
.reason-features {
    margin-top: 15px;
}

.reason-features ul {
    margin: 0 0 0 20px;
}

.reason-features li {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
}

.reason-features i {
    color: #0066CC;
    margin-right: 5px;
}

/* Reason Safety */
.reason-safety {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.safety-item {
    padding: 12px 15px;
    background: #FFF3E0;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

.safety-highlight {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border: 2px solid #0066CC;
    font-weight: 600;
    color: #003D7A;
}

.safety-item strong {
    color: #FF6B35;
}

.safety-highlight strong {
    color: #0066CC;
}

/* Considerations List */
.considerations-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.consideration-item {
    display: flex;
    gap: 25px;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.consideration-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #FF6B35, #FF8C5A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
}

.consideration-content {
    flex: 1;
}

.consideration-title {
    font-size: 20px;
    color: #003D7A;
    margin-bottom: 12px;
}

.consideration-description {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 15px;
}

.consideration-checklist {
    margin: 15px 0 15px 20px;
}

.consideration-checklist li {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
}

.consideration-checklist strong {
    color: #0066CC;
}

.consideration-solution {
    padding: 15px 20px;
    background: #E3F2FD;
    border-left: 4px solid #0066CC;
    border-radius: 5px;
    font-size: 14px;
    color: #003D7A;
}

.consideration-solution strong {
    color: #0066CC;
}

/* Config Examples */
.config-examples {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.config-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.config-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-bottom: 3px solid #0066CC;
}

.config-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0066CC, #003D7A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
}

.config-title {
    flex: 1;
    font-size: 22px;
    color: #003D7A;
    margin: 0 0 0 20px;
}

.config-badge {
    padding: 8px 15px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #003D7A;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
}

.config-body {
    padding: 30px;
}

.config-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 5px;
}

.spec-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.spec-value {
    font-size: 14px;
    color: #003D7A;
    font-weight: 700;
}

.config-features {
    margin-bottom: 25px;
}

.config-features h4 {
    font-size: 18px;
    color: #003D7A;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066CC;
}

.config-features ul {
    margin: 0 0 0 20px;
}

.config-features li {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
}

.config-features i {
    color: #0066CC;
    margin-right: 5px;
}

.config-result {
    padding: 15px 20px;
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    border-left: 4px solid #FF6B35;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

.config-result strong {
    color: #FF6B35;
}

/* Hero Subtitle Inline */
.hero-subtitle-inline {
    display: inline-block;
    font-size: 0.7em;
    color: #FF6B35;
}

/* Responsive for Backup Power Comparison Page */
@media (max-width: 768px) {
    .requirements-grid {
        grid-template-columns: 1fr;
    }
    
    .requirement-card,
    .consideration-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .req-number,
    .consideration-icon {
        margin-bottom: 15px;
    }
    
    .config-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .config-title {
        margin: 0;
    }
    
    .config-specs {
        grid-template-columns: 1fr;
    }
    
    .reason-calculation,
    .reason-comparison,
    .reason-safety {
        margin-top: 10px;
    }
}