/* ========================================
   TOP PAGE STYLES
   ======================================== */

/* ページ全体の幅を制限 */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 固定ヘッダー分のスクロール余白 */
#mbnbrowser,
#light-plan,
#erp,
#pricing,
#pricing-content,
#faq,
#requirements,
#supply,
#problem-solving {
    scroll-margin-top: 120px;
}

/* ========================================
   COMMON STYLES
   ======================================== */

/* 税抜表記のフォントサイズを少し小さく */
.tax-excluded {
    font-size: 0.55em;
}

/* ========================================
   1. HERO SECTION
   ======================================== */
.hero-section {
    background: url('../image/hero_background.png') top center/cover no-repeat !important;
    padding: 190px 0 90px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 400px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width:860px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 0;
}

.hero-content {
    max-width: 800px;
    margin:auto;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
    visibility: visible;
    display: block;
    color: #000000;
}

.hero-content h1,
.hero-content p,
.hero-content h2,
.hero-content p3 {
    opacity: 1;
}

.hero-content p {
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    min-height: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.6;
    text-shadow: 2px 0 0 rgba(255, 255, 255, 1), -2px 0 0 rgba(255, 255, 255, 1), 0 2px 0 rgba(255, 255, 255, 1), 0 -2px 0 rgba(255, 255, 255, 1), 2px 2px 0 rgba(255, 255, 255, 1), -2px -2px 0 rgba(255, 255, 255, 1), 2px -2px 0 rgba(255, 255, 255, 1), -2px 2px 0 rgba(255, 255, 255, 1);
}

.hero-content h2 {
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    min-height: 1.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 1.8;
    margin-top: 12px;
    text-shadow: 2px 0 0 rgba(255, 255, 255, 1), -2px 0 0 rgba(255, 255, 255, 1), 0 2px 0 rgba(255, 255, 255, 1), 0 -2px 0 rgba(255, 255, 255, 1), 2px 2px 0 rgba(255, 255, 255, 1), -2px -2px 0 rgba(255, 255, 255, 1), 2px -2px 0 rgba(255, 255, 255, 1), -2px 2px 0 rgba(255, 255, 255, 1);
}

.hero-content p3 {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    min-height: 1.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 1.8;
    margin-top: 12px;
    text-shadow: 2px 0 0 rgba(255, 255, 255, 1), -2px 0 0 rgba(255, 255, 255, 1), 0 2px 0 rgba(255, 255, 255, 1), 0 -2px 0 rgba(255, 255, 255, 1), 2px 2px 0 rgba(255, 255, 255, 1), -2px -2px 0 rgba(255, 255, 255, 1), 2px -2px 0 rgba(255, 255, 255, 1), -2px 2px 0 rgba(255, 255, 255, 1);
}

.hero-inline-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0 2px;
    font-weight: 700;
    font-size: 24px;
    color: #000000;
    text-decoration: none;
    transition: all 0.25s ease;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 1), 1px 1px 3px rgba(255, 255, 255, 1),0 0 3px rgba(255, 255, 255, 1), -1px -1px 3px rgba(255, 255, 255, 1), -2px -2px 3px rgba(255, 255, 255, 1), -3px -3px 3px rgba(255, 255, 255, 1), 2px 2px 3px rgba(255, 255, 255, 1), 2px 2px 3px rgba(255, 255, 255, 1), 2px 2px 3px rgba(255, 255, 255, 1), 2px 2px 3px rgba(255, 255, 255, 1), 2px 2px 3px rgba(255, 255, 255, 1), 2px 2px 3px rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(14, 165, 233, 0.4);
}

.hero-inline-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #0ea5e9;
    transition: width 0.3s ease;
}

.hero-inline-link:hover,
.hero-inline-link:focus-visible {
    color: #0284c7;
    border-bottom-color: rgba(14, 165, 233, 0.6);
}

.hero-inline-link:hover::after,
.hero-inline-link:focus-visible::after {
    width: 100%;
}

.hero-inline-link:focus-visible {
    outline: 2px solid rgba(14, 165, 233, 0.6);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ヒーローセクションの機能ボタン */
.hero-feature-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    margin: 0 4px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background: linear-gradient(120deg, #6366f1, #22d3ee);
    border: none;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    text-shadow: none;
}

.hero-feature-button:hover,
.hero-feature-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
    background: linear-gradient(120deg, #4f46e5, #06b6d4);
}

.hero-feature-button:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.6);
    outline-offset: 2px;
}

/* ヒーローセクションの機能ボタンコンテナ */
.hero-feature-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto;
    flex-wrap: wrap;
    width: 80%;
}

.hero-feature-buttons .hero-feature-button {
    margin: 0;
    flex-shrink: 0;
}

.hero-content h1 {
    font-size: 54px;
    font-weight: bold;
    margin: 0 0 20px;
    color: #000000;
    position: relative;
    text-align: center;
    width: 100%;
    min-height: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 2px 0 0 rgba(255, 255, 255, 1), -2px 0 0 rgba(255, 255, 255, 1), 0 2px 0 rgba(255, 255, 255, 1), 0 -2px 0 rgba(255, 255, 255, 1), 2px 2px 0 rgba(255, 255, 255, 1), -2px -2px 0 rgba(255, 255, 255, 1), 2px -2px 0 rgba(255, 255, 255, 1), -2px 2px 0 rgba(255, 255, 255, 1);
}

/* 管理機能ボタン */
.hero-management-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    margin: 50px 50px ;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
}

.hero-management-buttons.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.management-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 30px;
    min-width: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(14, 165, 233, 0.4);
    border-radius: 999px;
    text-decoration: none;
    color: #1a1a1a;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.management-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(37, 99, 235, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.management-btn:hover::before,
.management-btn:focus-visible::before {
    opacity: 1;
}

.management-btn:hover,
.management-btn:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(14, 165, 233, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4);
    color: #0a0a0a;
}

.management-icon {
    position: relative;
    z-index: 1;
    color: #0ea5e9;
    transition: color 0.3s ease, transform 0.3s ease;
}

.management-btn:hover .management-icon,
.management-btn:focus-visible .management-icon {
    color: #0284c7;
    transform: scale(1.1);
}

.management-text {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 16px rgba(14, 165, 233, 0.8);
    }
}

/* フローティング要素のアニメーション */
@keyframes floatSlow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translate(30px, -40px) scale(1.1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-25px, -60px) scale(0.9);
        opacity: 0.8;
    }
    75% {
        transform: translate(40px, -30px) scale(1.05);
        opacity: 0.85;
    }
}

.management-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.7);
    outline-offset: 4px;
}

/* 販売管理ボタン - インディゴ/シアンのテーマ */
.management-btn.sales-btn {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(34, 211, 238, 0.9));
    border-color: rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.management-btn.sales-btn::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(34, 211, 238, 0.2));
}

.management-btn.sales-btn:hover,
.management-btn.sales-btn:focus-visible {
    background: linear-gradient(135deg, rgba(99, 102, 241, 1), rgba(34, 211, 238, 1));
    border-color: rgba(99, 102, 241, 0.8);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-4px) scale(1.05);
}

.management-btn.sales-btn .management-icon {
    color: #ffffff;
}

.management-btn.sales-btn:hover .management-icon,
.management-btn.sales-btn:focus-visible .management-icon {
    color: #ffffff;
}

.management-btn.sales-btn .management-text {
    color: #ffffff;
}

/* 財務管理ボタン - 緑のテーマ */
.management-btn.finance-btn {
    background: linear-gradient(135deg, rgba(24, 165, 59, 0.9), rgba(125, 194, 78, 0.9));
    border-color: rgba(24, 165, 59, 0.4);
    color: #ffffff;
}

.management-btn.finance-btn::before {
    background: linear-gradient(135deg, rgba(24, 165, 59, 0.2), rgba(125, 194, 78, 0.2));
}

.management-btn.finance-btn:hover,
.management-btn.finance-btn:focus-visible {
    background: linear-gradient(135deg, rgba(24, 165, 59, 1), rgba(125, 194, 78, 1));
    border-color: rgba(24, 165, 59, 0.8);
    box-shadow: 0 8px 32px rgba(24, 165, 59, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-4px) scale(1.05);
}

.management-btn.finance-btn .management-icon {
    color: #ffffff;
}

.management-btn.finance-btn:hover .management-icon,
.management-btn.finance-btn:focus-visible .management-icon {
    color: #ffffff;
}

.management-btn.finance-btn .management-text {
    color: #ffffff;
}

/* 給与管理ボタン - オレンジのテーマ */
.management-btn.salary-btn {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.9), rgba(255, 184, 77, 0.9));
    border-color: rgba(255, 149, 0, 0.4);
    color: #ffffff;
}

.management-btn.salary-btn::before {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), rgba(255, 184, 77, 0.2));
}

.management-btn.salary-btn:hover,
.management-btn.salary-btn:focus-visible {
    background: linear-gradient(135deg, rgba(255, 149, 0, 1), rgba(255, 184, 77, 1));
    border-color: rgba(255, 149, 0, 0.8);
    box-shadow: 0 8px 32px rgba(255, 149, 0, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-4px) scale(1.05);
}

.management-btn.salary-btn .management-icon {
    color: #ffffff;
}

.management-btn.salary-btn:hover .management-icon,
.management-btn.salary-btn:focus-visible .management-icon {
    color: #ffffff;
}

.management-btn.salary-btn .management-text {
    color: #ffffff;
}



/* ========================================
   2. HEADING BAR SECTION
   ======================================== */
.heading-bar-section {
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    padding: 30px 0 20px 0;
    text-align: center;
    color: #fff;
}

.heading-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.heading-bar-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.heading-bar-text {
    /* デフォルトで縦並びになるので、特別なFlexbox設定は不要 */
    display: block;
}

.heading-bar-title {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

.heading-bar-text h3 {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
}

/* ========================================
   3. CLIENT LOGOS SECTION
   ======================================== */

.client-logos-section {
    background-color: #fff;
    overflow: hidden;
}

.client-logos-section .section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.1em;
}

.logos-slider {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    position: relative;
}

.logos-track {
    display: flex;
    animation: scroll 30s linear infinite;
    width: fit-content;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logo-item {
    flex-shrink: 0;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 30px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.logo-item:hover img {
    filter: grayscale(0%);
}

/* アニメーション一時停止（ホバー時） */
.logos-slider:hover .logos-track {
    animation-play-state: paused;
}

/* ========================================
   4. PROBLEM SOLVING SECTION
   ======================================== */

.problem-solving-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.problem-solving-section .section-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #444;
    margin-bottom: 60px;
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 0 auto 60px;
}

.problem-item {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.problem-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.problem-image {
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.problem-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.problem-item h3 {
    font-size: 20px;
    font-weight: bold;
    color: #444;
    margin-bottom: 15px;
    line-height: 1.5;
}

.problem-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.arrow-down {
    font-size: 32px;
    color: #6366f1;
    margin: 20px 0;
}

.solution {
    background-color: #e6f7ff;
    padding: 5px 20px 20px 20px;
    border-radius: 8px;
    border-left: 4px solid #6366f1;
}

.solution-label {
    font-size: 14px;
    font-weight: bold;
    color: #6366f1;
    margin-bottom: 8px;
}

.solution-detail {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

.problem-solution {
    text-align: center;
    margin-top: 60px;
}

.solution-text {
    font-size: 24px;
    color: #444;
    font-weight: 500;
}

.solution-text strong {
    color: #6366f1;
    font-weight: 700;
}


/* ========================================
   5. INTRODUCTION SECTION
   ======================================== */
.introduction-section {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.introduction-section .section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 30px;
    line-height: 1.3;
    position: relative;
    display: inline-block;
}

.introduction-section .section-title::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #22d3ee);
    border-radius: 2px;
}

.intro-header {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 40px auto 60px;
}

.introduction-section .section-subtitle {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.8;
    max-width: 600px;
    margin: 0;
    text-align: left;
    flex: 1;
}

.introduction-section .section-subtitle-heading {
    display: inline-block;
    padding: 6px 18px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(125, 211, 252, 0.35));
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.22);
    letter-spacing: 0.04em;
}

.intro-text-content {
    flex: 1;
}

.intro-logo {
    flex-shrink: 0;
}

.intro-logo img {
    width: 180px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.introduction-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: none !important;
    transform: none !important;
}

.introduction-content:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transform: none !important;
}

/* システムカードのヘッダー */
.system-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 3px solid #dee2e6;
    text-decoration: none;
    color: inherit;
}

.system-card.system-sales .system-header {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-bottom-color: #2196f3;
}

.system-card.system-finance .system-header {
    background: linear-gradient(135deg, #ddff9f 0%, #c8e6c9 100%);
    border-bottom-color: #4caf50;
}

.system-card.system-salary .system-header {
    background: linear-gradient(135deg, #fde6a2 0%, #ffe0b2 100%);
    border-bottom-color: #ff9800;
}

.system-card.system-groupware .system-header {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-bottom-color:#9c27b0 ;
}

.system-icon {
    font-size: 36px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.system-header .feature-title {
    flex: 1;
    margin: 0;
    font-size: 28px;
    color: #1a202c;
}

.system-badge{
    margin: 40px auto;
    text-align: center;
    font-size: 18px;
    color: #1a202c;
}

.system-badge-name {
    font-weight: 600;
    color: #1a202c;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0 6px;
}

.system-badge-name:hover,
.system-badge-name:focus-visible {
    color: #2563eb;
}

.system-badge-name:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.3);
    outline-offset: 2px;
}

.system-sep {
    margin: 0 8px;
    color: rgba(148, 163, 184, 0.9);
    font-weight: 500;
}

.system-badge-tag {
    display: inline-block;
    padding: 6px 16px;
    background: #ffffff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #dee2e6;
}

.system-card.system-sales .system-badge-tag {
    background: #2196f3;
    color: #ffffff;
    border-color: #1976d2;
}

.system-card.system-finance .system-badge-tag {
    background: #2cd478;
    color: #ffffff;
    border-color: #1e851a;
}

.system-card.system-salary .system-badge-tag {
    background: #f8b160;
    color: #ffffff;
    border-color: #e75d26;
}

.system-card.system-groupware .system-badge-tag {
    background: #9c27b0;
    color: #ffffff;
    border-color: #751f63;
}

.introduction-main {
    padding: 40px;
}

.introduction-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.introduction-sub-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 90%;
    margin: 0 auto 50px auto;
}

.introduction-image {
    width: 120px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.introduction-description {
    flex: 1;
    min-width: 0;
}

.introduction-description p {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 20px;
    }

.introduction-sub-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 28px 32px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(237, 242, 247, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    text-decoration: none;
}

.introduction-sub-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(125, 211, 252, 0.12));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.introduction-sub-text:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.35);
    text-decoration: none;
}

.introduction-sub-text:hover::before {
    opacity: 1;
}

.feature-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 18px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.feature-title::before {
    content: '';
    display: block;
    width: 6px;
    height: 36px;
    border-radius: 4px;
    background: linear-gradient(180deg, #2563eb, #38bdf8);
}

.introduction-sub-text h4 {
    color: #1e3a8a;
}

.introduction-sub-text p {
    position: relative;
    font-size: 16px;
    line-height: 1.75;
    color: #334155;
    margin: 0;
    z-index: 1;
}

.introduction-sub-note {
    width: 100%;
    color: #1e3a8a;
    margin: 0 0 10px 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
}

.note {
    font-size: 12px;
    color: #e53e3e;
    background: #fed7d7;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 500;
}

.introduction-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    transition: none;
}

/* ========================================
   6. CTA SECTION
   ======================================== */
.call-to-action-section {
    background: linear-gradient(135deg, #6366f1, #22d3ee);
    text-align: center;
    color: #fff;
    padding: 60px 0;
}

.cta-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.cta-text {
    font-size: 40px;
    font-weight: bold;
    vertical-align: middle;
}

.cta-arrow {
    font-size: 50px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    animation: bounce 2s infinite;
    cursor: pointer;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(10px);
    }
    60% {
        transform: translateX(5px);
    }
}

.cta-download-btn {
    background-color: #FFC107;
    color: #444;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 20px;
}

.cta-download-btn:hover {
    background-color: #e0a800;
    transform: translateY(-3px);
}

.download-count {
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 20px;
    margin-bottom: 5px;
}

/* ========================================
   7. LIGHT PLAN SECTION
   ======================================== */
.light-plan-section {
    padding: 60px 0 100px 0;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.light-plan-content {
    max-width: 1200px;
    margin: 0 auto;
}

.light-plan-intro {
    margin-bottom: 50px;
}

.light-plan-title {
    font-size: 36px;
    font-weight: bold;
    color: #444;
    margin: 0 0 20px 0;
}

.light-plan-price {
    font-size: 36px;
    color: #FFC107;
    font-weight: bold;
}

.light-plan-description {
    font-size: 18px;
    line-height: 1.8;
    color: #666;
    max-width: 900px;
    margin: 0 auto;
}

.light-plan-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.light-plan-feature-item {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.light-plan-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.light-plan-feature-image {
    margin-bottom: 20px;
    text-align: center;
}

.light-plan-feature-image img {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-name {
    font-size: 24px;
    font-weight: bold;
    color: #444;
    margin: 0 0 15px 0;
}

.feature-price {
    font-size: 28px;
    font-weight: bold;
    color: #FFC107;
    margin: 0 0 20px 0;
}

.feature-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

.light-plan-cta {
    margin-top: 40px;
}

.light-plan-cta-text {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

.light-plan-cta-button {
    display: inline-block;
    background-color: #FFC107;
    color: #444;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.light-plan-cta-button:hover {
    background-color: #e0a800;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ========================================
   8. ERP SECTION
   ======================================== */
.erp-section {
    padding: 50px 0 100px 0;
    text-align: center;
    background-color: #fff;
}

.erp-title {
    font-size: 36px;
    font-weight: bold;
    color: #444;
    margin: 0;
}

.erp-subtitle {
    font-size: 36px;
    color: #f00;
    font-weight: bold;
}

.erp-box-blue {
    background-color: #33b6ee;
    color: #fff;
    padding: 30px;
    width: 70%;
    margin: 30px auto;
        text-align: center;
}

.erp-box-blue p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

.erp-image img {
    max-width: 60%;
    height: auto;
    margin-top: 50px;
}

/* ========================================
   9. PRICING SECTION
   ======================================== */
.pricing-section {
    padding: 100px 0 120px;
    background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%);
    text-align: center;
}



.pricing-section-subtitle {
    max-width: 720px;
    margin: 0 auto 56px;
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
}

.pricing-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(246, 248, 255, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.2);
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-sizing: border-box;
    width: 100%;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 70px rgba(79, 70, 229, 0.18);
    text-decoration: none;
}

.plan-free {
    background: linear-gradient(160deg, rgba(244, 247, 255, 0.92), rgba(250, 252, 255, 0.95));
}

.plan-light {
    background: linear-gradient(150deg, rgba(232, 241, 255, 0.95), rgba(208, 228, 255, 0.95));
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.plan-business {
    background: linear-gradient(155deg, rgba(237, 247, 252, 0.95), rgba(241, 245, 255, 0.92));
}

.plan-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    background: rgba(148, 163, 184, 0.15);
    margin-bottom: 20px;
    align-self: flex-start;
}

.plan-comparison-trigger {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.plan-comparison-trigger:hover,
.plan-comparison-trigger:focus {
    color: #1d4ed8;
    outline: none;
}

.plan-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.plan-status.recommended {
    background: rgba(129, 140, 248, 0.18);
    color: #4338ca;
}

.plan-status.option {
    background: rgba(129, 140, 248, 0.18);
    color: #6d28d9;
}

.plan-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.plan-name {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #0f172a;
    width: 100%;
    flex-wrap: wrap;
    min-width: 0;
    box-sizing: border-box;
}

.plan-price-prefix {
    font-size: 18px;
    font-weight: 600;
    color: #475569;
}

.plan-price-amount {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 1;
    min-width: 0;
}

.plan-price-caption {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}

.plan-feature-box {
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.25);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plan-feature-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: #1e293b;
}

.plan-feature-label {
    font-size: 16px;
}

.plan-feature-badge {
    font-size: 14px;
    font-weight: 700;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
    padding: 4px 10px;
    border-radius: 999px;
}

.plan-feature-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

.plan-description {
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
    margin: -12px 0 0;
}

.plan-option-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-option:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 18px 35px rgba(99, 102, 241, 0.15);
}

.option-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
}

.option-indicator {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 2px solid rgba(99, 102, 241, 0.45);
    box-shadow: inset 0 0 0 4px rgba(99, 102, 241, 0.45);
}

.option-price {
    font-size: 15px;
    font-weight: 600;
    color: #4338ca;
    background: rgba(99, 102, 241, 0.12);
    padding: 6px 12px;
    border-radius: 999px;
}

.plan-current-badge {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    background: rgba(15, 23, 42, 0.08);
    padding: 4px 12px;
    border-radius: 999px;
}

.plan-footer {
    margin-top: 32px;
    display: flex;
}

.plan-footer-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    background: rgba(148, 163, 184, 0.15);
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-footer-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(148, 163, 184, 0.22);
}

.plan-footer-button.accent {
    color: #fff;
    background: linear-gradient(120deg, #6366f1, #22d3ee);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.25);
}

.plan-footer-button.accent:hover {
    box-shadow: 0 24px 48px rgba(79, 70, 229, 0.32);
}

.plan-footer-button.disabled {
    cursor: default;
    background: rgba(148, 163, 184, 0.35);
    color: rgba(15, 23, 42, 0.45);
    box-shadow: none;
}

.plan-footer-button.disabled:hover {
    transform: none;
}

.pricing-card.plan-light {
    transform: scale(1.02);
}

.pricing-card.plan-light:hover {
    transform: scale(1.02) translateY(-6px);
}

.pricing-card.plan-light .plan-footer-button.accent {
    background: linear-gradient(120deg, #60a5fa, #38bdf8);
}

.pricing-card.plan-light .option-indicator {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: inset 0 0 0 4px rgba(96, 165, 250, 0.6);
}

.plan-business .plan-feature-box {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(148, 163, 184, 0.35);
}

.plan-business .plan-feature-desc {
    color: #1f2937;
    font-weight: 500;
}

.plan-business .plan-price-amount {
    color: #0f172a;
}

.plan-business .plan-footer-button.disabled {
    background: rgba(148, 163, 184, 0.25);
}

.plan-note-wrapper {
    text-align: center;
    margin-top: 100px;
}

.plan-note {
    display: inline-block;
    text-align: left;
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.plan-note a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s ease;
}

.plan-note a:hover,
.plan-note a:focus-visible {
    color: #1d4ed8;
    text-decoration: underline;
}

.plan-note a:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.3);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ========================================
   10. PRICING COMPARISON SECTION
   ======================================== */
.pricing-comparison-section {
    padding: 100px 0 ;
    text-align: center;
    background-color: #e6f7ff;
    scroll-margin-top: -120px;
}

.pricing-comparison-section .section-title {
    font-size: 32px;
    margin-bottom: 20px;
    color: #2196f3;
}

.point-text {
    font-size: 18px;
    color: #fff;
    margin: 0;
    font-weight: bold;
}

.comparison-title {
    font-size: 28px;
    font-weight: bold;
    color: #444;
    margin-top: 50px;
    margin-bottom: 20px;
}

.comparison-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    table-layout: fixed;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    border: 1px solid #ddd;
    text-align: center;
    width: auto;
}

.comparison-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.comparison-table tr {
    transition: background-color 0.3s ease;
}

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

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    font-weight: bold;
    width: 50%;
}

.comparison-table th:not(:first-child),
.comparison-table td:not(:first-child) {
    width: 16.66%;
}

/* ========================================
   11. SUPPLY DISCOUNT SECTION
   ======================================== */
.supply-discount-section {
    padding: 50px 0;
    text-align: center;
    background-color: #f7f9fc;
}

.section-lead-text {
    font-size: 18px;
    color: #444;
    margin-bottom: 20px;
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ddd;
    margin: 0 auto 20px;
}

.discount-box {
    display: flex;
    justify-content: center;
    align-items: stretch;
    max-width: 700px;
    margin: 0 auto;
    border: 2px solid #99c039;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.discount-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.discount-box:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(153, 192, 57, 0.3);
    border-color: #7ba030;
}

.discount-box:hover::before {
    left: 100%;
}

.discount-box:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 15px rgba(153, 192, 57, 0.2);
}

.discount-left,
.discount-right {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.discount-left p,
.discount-right p {
    margin: 0;
}

.discount-left {
    text-align: right;
}

.discount-initial-purchase {
    font-size: 20px;
    font-weight: bold;
}

.discount-center {
    font-size: 60px;
    font-weight: bold;
    color: #f00;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.discount-box:hover .discount-center {
    transform: none;
    animation: none;
}

.discount-center span {
    font-size: 80px;
}

.discount-right {
    text-align: left;
    background-color: #99c039;
    color: #fff;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: background-color 0.3s ease;
}

.discount-box:hover .discount-right {
    background-color: #7ba030;
}

.discount-right .discount-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.discount-right .discount-details {
    font-size: 16px;
}

/* ========================================
   12. SYSTEM REQUIREMENTS SECTION
   ======================================== */
.system-requirements-section {
    padding: 80px 0;
    background-color: #e6f7ff;
    text-align: center;
}

.system-requirements-section .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.system-requirements-section .section-title {
    font-size: 36px;
    margin-bottom: 20px;
    color: #2196f3;
}

.system-requirements-section .section-subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 50px;
}

.system-requirements-section .requirements-content {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 40px;
    text-align: left;
}

.system-requirements-section .requirements-content h3 {
    font-size: 1.8em;
    color: #3f51b5;
    margin-top: 30px;
    margin-bottom: 25px;
    border-bottom: 2px solid #2196f3;
    display: inline-block;
    padding-bottom: 5px;
}

.system-requirements-section .requirements-content h3:first-of-type {
    margin-top: 0;
}

.system-requirements-section .requirements-table {
        width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
    background-color: #fff;
}

.system-requirements-section .requirements-table th,
.system-requirements-section .requirements-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
}

.system-requirements-section .requirements-table th {
    background-color: #e3f2fd;
    font-weight: bold;
    color: #444;
    width: 25%;
    min-width: 100px;
}

.system-requirements-section .requirements-table td {
    color: #444;
    line-height: 1.6;
}

.system-requirements-section .notes-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 40px;
    color: #444;
    font-size: 1.0em;
    line-height: 1.8;
}

.system-requirements-section .notes-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
}

.system-requirements-section .notes-list li::before {
    content: '※';
    color: #f44336;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.system-requirements-section .contact-info {
    font-size: 1.1em;
    color: #2196f3;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
}

/* ========================================
   13. FAQ SECTION
   ======================================== */
.faq-section {
    padding: 80px 0;
    text-align: center;
    background-color: #f9f9f9;
}

.faq-section .container {
    max-width: 900px;
    margin: 0 auto;

}

.faq-section .section-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: #444;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.faq-item.is-hidden {
    display: none;
}

.faq-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

.faq-controls .faq-more,
.faq-controls .faq-less {
    margin: 0;
}

.faq-more,
.faq-less {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto 40px;
    padding: 12px 28px;
    border: 1.5px solid #2563eb;
    background: #ffffff;
    color: #2563eb;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.faq-more:hover,
.faq-more:focus-visible,
.faq-less:hover,
.faq-less:focus-visible {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
    transform: translateY(-2px);
}

.faq-more:focus-visible,
.faq-less:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
}

.faq-less {
    display: none;
}

.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    transition: background-color 0.3s ease;
}

.faq-item:hover {
    background-color: #f8f9fa;
}

.faq-question-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    flex: 1;
}

.faq-toggle {
    font-size: 28px;
    font-weight: normal;
    background: none;
    border: none;
    cursor: pointer;
    color: #2196f3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-toggle:hover {
    background-color: #f0f0f0;
    border-radius: 50%;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
    color: #666;
}

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

/* ========================================
   MOBILE CONTACT BUTTON
   ======================================== */

/* デスクトップでは非表示 */
.mobile-contact-btn {
    display: none;
}


/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* ========================================
   1. Extra Small Mobile (480px and below)
   ======================================== */
@media (max-width: 480px) {

    /* 1. Hero Section */
    .hero-section {
        aspect-ratio: 16 / 9;
        min-height: 350px;
        padding-top: 160px;
    }

    .hero-section .container {
        margin-top: 20px;
        max-width: 800px;
        gap: 15px;
    }

    .hero-content {
        max-width: 450px;
        width: 100%;
        margin: 0 auto;
    }

    .hero-content h1 {
        margin: 0;
        font-size: 22px;
    }

    .hero-content p {
        font-size: 16px;
    }
    
    .hero-content h2 {
        margin: 0;
        font-size: 0.8rem;
    }

    .hero-content p3 {
        font-size: 0.6rem;
    }

    .hero-feature-buttons {
        width: 100%;
        gap: 10px;
    }

    .hero-feature-buttons .hero-feature-button {
        margin: 0;
        font-size: 14px;
        padding: 6px;
    }

    .hero-management-buttons {
        margin: 10px;
    }

    .management-btn {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 6px 8px;
        margin: 5px;
        border-radius: 8px;
        width: 80%;
        min-width: auto;
    }

    .management-icon {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .management-icon svg {
        width: 28px;
        height: 28px;
    }

    .management-text {
        font-size: 12px;
        text-align: left;
    }


    /* 2. Heading Bar Section */
    .heading-bar-content {
        flex-direction: column;
        gap: 5px;
    }

    .heading-bar-title {
        font-size: 24px;
    }

    .heading-bar-icon {
        width: 30px;
        height: 30px;
    }

    /* 3. Client Logos Section */
    /* (スタイルなし) */

    /* 4. Problem Solving Section */
    .problem-solving-section {
        padding: 40px 20px 20px 20px;
    }

    .problem-solving-section .section-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .problem-solving-section .problems-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        padding: 0 10px;
        margin: 0 auto 20px;
    }

    .problem-item {
        padding: 25px 15px;
    }

    .problem-item h3 {
        font-size: 16px;
    }

    .problem-image {
        max-width: 120px;
        margin: 10px auto;
    }

    .solution-text {
        font-size: 18px;
    }

    /* Heading Bar Section */
    .heading-bar-section {
        margin-top: 0;
    }

    /* 5. Introduction Section */

    .introduction-section {
        opacity: 1 !important;
        transform: none !important;
        overflow-x: hidden;
        text-align: center;
        padding: 40px 0;
        margin: 0;
    }

    .introduction-section .container {
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 440px !important;
        width: 95% !important;
    }

    .introduction-section .section-title {
        font-size: 24px;
        margin-bottom: 0;
    }

    .introduction-section .intro-header {
        flex-direction: column;
        margin: 30px auto 0 auto;
        padding: 0;
        gap: 0;
        text-align: left;
    }

    .introduction-section .section-subtitle-heading {
        font-size: 14px;
        line-height: 1.6;
        margin: 0 auto;
        width: 100%;
        padding: 0;
    }

    .intro-logo img {
        width: 120px; 
    }

    .system-header {
        margin: 0 ;
        padding: 12px 15px;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .system-icon {
        font-size: 20px;
        width: 32px;
        height: 32px;
    }
    
    .system-header .feature-title {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .system-badge-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    /* Introduction Content */
    .introduction-section .introduction-content {
        margin: 15px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 12px;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .introduction-section .introduction-main {
        padding: 20px 5px;
    }

    .introduction-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .introduction-image {
        width: 100%;
        max-width: 120px;
        margin: 0 auto 8px;
    }

    .introduction-image img {
        width: 100%;
        height: auto;
    }

    .introduction-description {
        width: 100%;
        text-align: left;
    }

    .introduction-description p {
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
        color: #4a5568;
    }

    .introduction-sub-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        padding: 0;
        justify-items: stretch;
        box-sizing: border-box;
    }

    .introduction-sub-text {
        display: flex !important;
        flex-direction: column;
        justify-self: stretch;
        text-align: left;
        margin: 0;
        width: 100% !important;
        min-width: 0;
        height: 100%;
        max-width: none !important;
        box-sizing: border-box;
    }

    .introduction-sub-text h4 {
        font-size: 16px;
        margin-bottom: 8px;
        line-height: 1.4;
        text-align: center;
    }

    .introduction-sub-text p {
        font-size: 12px;
        line-height: 1.7;
        margin: 0;
        text-align: left;
        margin-bottom: 0;
    }

    .introduction-content .introduction-sub-note {
        width: 90%;
        margin: 10px 0 0 0;
        font-size: 11px;
        padding: 8px 12px;
        line-height: 1.5;
    }

    .section-subtitle-heading {
        font-size: 16px;
        padding: 4px 12px;
        margin-bottom: 15px;
        text-align: left;
    }

    .system-badge {
        display: none;
    }

    .system-badge-name {
        padding: 4px 8px;
        font-size: 13px;
    }

    .system-sep {
        display: none;
    }

    .introduction-section h2.section-title,
    .introduction-section .section-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .introduction-section {
        font-size: 0.7rem;
    }

    .features-item-container {
        flex-direction: column;
        text-align: center;
    }

    .features-item-container p {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.7;
    }

    /* 6. CTA Section */
    .cta-text {
        font-size: 30px;
    }

    .cta-arrow {
        display: none;
    }

    .cta-content {
        flex-direction: column;
        gap: 20px;
    }

    .cta-download-btn {
        font-size: 20px;
        padding: 15px 30px;
    }

    .download-count {
        font-size: 18px;
    }

    /* 7. Light Plan Section */
    /* (スタイルなし) */

    .light-plan-section h2.light-plan-title {
        font-size: 24px;
        line-height: 1.2;
    }

    /* 8. ERP Section */

    .erp-section h2.erp-title {
        font-size: 24px;
        line-height: 1.2;
    }

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

    .erp-box-blue {
        padding: 20px;
    }

    /* 9. Pricing Section */

    .pricing-section .container {
    padding:0 ;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        box-sizing: border-box;
    }

    .pricing-card {
        width: 100%;
        max-width: 100%;
        padding: 24px;
        box-sizing: border-box;
    }

    .plan-footer-button {
        font-size: 14px;
        padding: 12px 16px;
    }

    .plan-note-wrapper {
        margin-top: 60px;
        padding: 0 20px;
    }

    .plan-note {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* 10. Pricing Comparison Section */
    .pricing-comparison-section {
        padding: 40px 0;
    }

    .point-box {
        padding: 10px;
        margin-bottom: 10px;
    }

    .point-text {
        font-size: 16px;
    }

    .comparison-title {
        font-size: 22px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    
    .comparison-table {
        width: 100%;
        max-width: 100%;
        table-layout: auto;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px;
        font-size: 14px;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        overflow-wrap: break-word;
    }
    
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        width: auto;
        min-width: 0;
        max-width: 40%;
    }
    
    .comparison-table th:not(:first-child),
    .comparison-table td:not(:first-child) {
        width: auto;
        min-width: 0;
    }

    /* 11. Supply Discount Section */
    .discount-box {
        flex-direction: column;
        align-items: center;
        border: 2px solid #99c039;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .discount-box:hover {
        transform: translateY(-3px) scale(1.01);
    }

    .discount-left,
    .discount-right {
        text-align: center;
        width: 100%;
        border: 2px solid #99c039;
    }

    .discount-left {
        border-bottom: none;
    }

    .discount-center {
        font-size: 40px;
        padding: 10px;
    }

    .discount-center span {
        font-size: 60px;
    }

    .discount-right {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* 12. System Requirements Section */
    .system-requirements-section {
        padding: 40px 0;
    }

    .system-requirements-section .section-title {
        font-size: 28px;
    }
    
    .system-requirements-section .requirements-content {
        padding: 20px 10px;
        box-sizing: border-box;
        overflow-x: auto;
    }
    
    .system-requirements-section .requirements-table {
        width: 100%;
        max-width: 100%;
        table-layout: auto;
        border-collapse: collapse;
        box-sizing: border-box;
    }
    
    .system-requirements-section .requirements-table th,
    .system-requirements-section .requirements-table td {
        padding: 8px 10px;
        font-size: 12px;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
    
    .system-requirements-section .requirements-table th {
        width: auto;
        min-width: 0;
        max-width: 30%;
    }
    
    .system-requirements-section .requirements-table td {
        width: auto;
        min-width: 0;
    }

    /* 13. FAQ Section */
    /* (スタイルなし) */
    .faq-section h2.section-title {
        font-size: 24px;
        line-height: 1.2;
    }

    /* 14. Mobile Contact Button */
    .mobile-contact-btn {
        bottom: 15px;
        right: 15px;
    }

    .mobile-contact-link {
        width: 50px;
        height: 50px;
    }

    .mobile-contact-link svg {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   2. Mobile / Tablet (768px and below)　以下
   ======================================== */
@media (max-width: 768px) {
    /* 481px以上 768px以下の場合のみ適用 */
    @media (min-width: 481px) and (max-width: 768px) {
        /* ========================================
           共通スタイル
           ======================================== */
        .introduction-section .animate-element .animate-in {
            width: 100% !important;
        }

        /* ========================================
           1. Hero Section
           ======================================== */
        .hero-section {
            margin-top: -10px;
            aspect-ratio: 16 / 9;
            min-height: 300px;
        }

        .hero-section .container {
            flex-direction: column;
            gap: 20px;
            margin: 15px;
        }

        .hero-content {
            max-width: none;
            text-align: left;
            width: 100%;
        }

        .hero-content h1 {
            font-size: 32px;
            margin-bottom: 0;
        }

        .hero-content p {
            font-size: 30px;
        }
        
        .hero-content h2 {
            font-size: 16px;
        }

        .hero-content p3 {
            font-size: 0.6rem;
        }

        .hero-feature-buttons {
            gap: 20px;
        }

        .hero-feature-buttons .hero-feature-button {
            font-size: 14px;
            padding: 8px 20px;
        }

        .hero-management-buttons {
            margin: 10px 10px;
        }

        .management-btn {
            gap: 10px;
            padding: 20px 25px;
        }

        .management-text {
            font-size: 12px;
        }

        .management-icon {
            width: 34px;
            height: 34px;
        }

        .management-icon svg {
            width: 34px;
            height: 34px;
        }

        /* ========================================
           2. Heading Bar Section
           ======================================== */
        /* (スタイルなし) */

        /* ========================================
           3. Client Logos Section
           ======================================== */
        /* (メディアクエリ外で定義) */

        /* ========================================
           4. Problem Solving Section
           ======================================== */
        .problem-solving-section {
            padding: 60px 0;
        }

        .problem-solving-section .section-title {
            font-size: 28px;
            margin-bottom: 40px;
        }

        .problems-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            max-width: 100%;
        }

        .problem-item {
            padding: 30px 20px;
        }

        .problem-image {
            max-width: 150px;
            margin: 15px auto;
        }

        .problem-item h3 {
            font-size: 18px;
        }

        .solution-text {
            font-size: 20px;
        }

        /* ========================================
           5. Introduction Section
           ======================================== */
        .introduction-section .section-title {
            font-size: 28px;
            margin-bottom: 40px;
            display: inline-block;
            position: relative;
        }

        .introduction-section .intro-header {
            flex-direction: column;
            gap: 0;
            margin: 0;
            padding: 0;
            text-align: left;
        }

        .introduction-section .section-subtitle {
            font-size: 15px;
            line-height: 1.8;
            margin: 0;
            max-width: 100%;
        }

        .introduction-section .section-subtitle-heading {
            padding: 6px 18px;
            margin-bottom: 0;
        }

        .intro-logo img {
            width: 150px;
        }
        
        .introduction-section .container {
            max-width: 100%;
            padding: 0 10px;
            margin: 0 auto;
        }

        .introduction-section .introduction-content {
            margin: 30px 20px;
            margin-bottom: 40px;
            border-radius: 10px;
            max-width: 100%;
        }

        .introduction-content .introduction-sub-note {
            width: 90%;
            margin: 10px 0 0 0;
            font-size: 11px;
            padding: 8px 12px;
            line-height: 1.5;
        }
        
        .system-header {
            flex-wrap: wrap;
            padding: 20px;
            gap: 10px;
        }
        
        .system-icon {
            font-size: 28px;
            width: 40px;
            height: 40px;
        }
        
        .system-header .feature-title {
            font-size: 22px;
            flex: 1 1 100%;
            order: 2;
        }
        
        .system-badge {
            display: none;
        }
        
        .system-badge-tag {
            font-size: 14px;
            padding: 4px 12px;
            order: 3;
        }
        
        .introduction-main {
            padding: 30px 20px;
        }
        
        .introduction-content-wrapper {
            flex-direction: column;
            gap: 25px;
            align-items: center;
        }
        
        .introduction-image {
            width: 100%;
            max-width: 250px;
        }

        .pricing-section .pricing-card {
            width: 100%;
            max-width: 100%;
            padding: 24px;
            box-sizing: border-box;
        }
        
        .introduction-sub-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            width: 95% !important;
            max-width: 95% !important;
            margin: 10px auto !important;
            padding: 0;
            justify-items: stretch;
            box-sizing: border-box;
        }

        .introduction-sub-text {
            display: flex !important;
            flex-direction: column;
            justify-self: stretch;
            text-align: left;
            margin: 0;
            width: 100% !important;
            min-width: 0;
            height: 100%;
            max-width: none !important;
            box-sizing: border-box;
            padding: 25px 20px;
        }

        .introduction-sub-text h4 {
            font-size: 16px;
            margin-bottom: 8px;
            line-height: 1.4;
            text-align: center;
        }

        .introduction-sub-text p {
            font-size: 12px;
            line-height: 1.7;
            margin: 0;
            text-align: left;
            margin-bottom: 0;
        }
        
        .feature-title {
            font-size: 24px;
            margin-bottom: 15px;
        }
        
        .feature-title::before {
            height: 24px;
        }
    }

    /* 2. Heading Bar Section */
    /* (スタイルなし) */

    /* 3. Client Logos Section */
    .client-logos-section {
        padding: 40px 0;
    }

    .client-logos-section .section-title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .logo-item {
        width: 150px;
        height: 80px;
        margin: 0 15px;
        padding: 15px;
    }

    .logos-track {
        animation: scroll 20s linear infinite;
    }

    /* 6. CTA Section */
    /* (スタイルなし) */

    /* 7. Light Plan Section */
    /* (スタイルなし) */

    /* 8. ERP Section */
    /* (スタイルなし) */

    /* 9. Pricing Section */
    /* (スタイルなし) */

    /* 10. Pricing Comparison Section */
    /* (スタイルなし) */

    /* 11. Supply Discount Section */
    /* (スタイルなし) */

    /* 12. System Requirements Section */
    /* (スタイルなし) */

    /* 13. FAQ Section */
    /* (スタイルなし) */

    /* 14. Mobile Contact Button */
    /* (スタイルなし) */
}


/* ========================================
   3. Tablet (769px以上 1024px以下)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
        /* 1. Hero Section */
        .hero-section {
            aspect-ratio: 16 / 9;
            min-height: 350px;
            padding-top: 160px;
        }

        .hero-section .container {
            margin-top: 20px;
            max-width: 700px;
            gap: 15px;
        }

        .hero-content {
            max-width: 700px;
            width: 90%;
            margin: 0 auto;
        }

        .hero-content h1 {
            font-size: 34px;
        }

        .hero-content p {
            font-size: 35px;
        }
        
        .hero-content h2 {
            font-size: 16px;
        }

        .hero-content p3 {
            font-size: 14px;
        }

        .hero-feature-buttons {
            gap: 20px;
        }

        .hero-feature-buttons .hero-feature-button {
            font-size: 26px;
            padding: 6px 30px;
        }

        .hero-management-buttons {
            margin: 20px;
        }

        .management-btn {
            gap: 20px;
            padding: 20px 30px;
        }

        .management-icon {
            width: 48px;
            height: 48px;
        }

        .management-icon svg {
            width: 48px;
            height: 48px;
        }

    /* 2. Heading Bar Section */
    /* (スタイルなし) */

    /* 3. Client Logos Section */
    /* (スタイルなし) */

    /* 4. Problem Solving Section */
    /* (スタイルなし) */

    /* 5. Introduction Section */
    .introduction-section {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .introduction-section .intro-header {
        flex-direction: row;
        gap: 30px;
        text-align: left;
        align-items: flex-start;
    }
    
    .introduction-section .intro-text-content {
        flex: 1;
    }

    /* 6. CTA Section */
    /* (スタイルなし) */

    /* 7. Light Plan Section */
    /* (スタイルなし) */

    /* 8. ERP Section */
    /* (スタイルなし) */

    /* 9. Pricing Section */
    .pricing-card.plan-light {
        transform: none;
    }

    .pricing-card.plan-light:hover {
        transform: translateY(-6px);
    }

    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        gap: 24px;
        width: 100%;
        box-sizing: border-box;
    }

    .pricing-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 10. Pricing Comparison Section */
    /* (スタイルなし) */

    /* 11. Supply Discount Section */
    /* (スタイルなし) */

    /* 12. System Requirements Section */
    /* (スタイルなし) */

    /* 13. FAQ Section */
    /* (スタイルなし) */

    /* 14. Mobile Contact Button */
    /* (スタイルなし) */
}

/* ========================================
   4. 10-inch PC / Small Desktop (1025px以上 1280px以下)
   ======================================== */
@media (min-width: 1025px) and (max-width: 1280px) {
        /* 1. Hero Section */
        .hero-section {
            aspect-ratio: 16 / 9;
            min-height: 350px;
            padding-top: 160px;
        }

        .hero-section .container {
            margin-top: 20px;
            max-width: 800px;
            gap: 15px;
        }

        .hero-content {
            max-width: 800px;
            width: 90%;
            margin: 0 auto;
        }

        .hero-content h1 {
            font-size: 45px;
        }

        .hero-content p {
            font-size: 46px;
        }
        
        .hero-content h2 {
            font-size: 20px;
        }

        .hero-content p3 {
            font-size: 18px;
        }

        .hero-feature-buttons {
            gap: 20px;
        }

        .hero-feature-buttons .hero-feature-button {
            font-size: 26px;
            padding: 6px 30px;
        }

        .management-btn {
            gap: 20px;
            padding: 30px 40px;
        }

        .management-icon {
            width: 48px;
            height: 48px;
        }

        .management-icon svg {
            width: 48px;
            height: 48px;
        }

    /* 2. Heading Bar Section */
    .heading-bar-content {
        gap: 12px;
    }

    .heading-bar-title {
        font-size: 28px;
    }

    .heading-bar-text h3 {
        font-size: 16px;
    }

    .heading-bar-icon {
        width: 45px;
        height: 45px;
    }

    /* 3. Client Logos Section */
    .logo-item {
        width: 180px;
        height: 90px;
        margin: 0 25px;
        padding: 18px;
    }

    /* 4. Problem Solving Section */
    .problem-solving-section {
        padding: 60px 20px;
    }

    .problem-solving-section .section-title {
        font-size: 32px;
        margin-bottom: 50px;
    }

    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 800px;
        padding: 0 20px;
    }

    .problem-item {
        padding: 35px 25px;
    }

    .problem-item h3 {
        font-size: 18px;
    }

    .problem-image {
        max-width: 250px;
    }

    .solution-text {
        font-size: 22px;
    }

    /* 5. Introduction Section */
    .introduction-section {
        padding: 80px 40px;
    }
    
    .introduction-section .container {
        margin-left: auto;
        margin-right: auto;
    }

    .intro-header {
        flex-direction: row;
        gap: 30px;
        max-width: 900px;
        margin: 35px auto 55px;
        text-align: left;
        align-items: flex-start;
    }
    
    .intro-text-content {
        flex: 1;
    }

    .introduction-section .section-subtitle {
        font-size: 15px;
        max-width: 550px;
    }

    .intro-logo img {
        width: 140px;
    }

    .introduction-content {
        max-width: 1000px;
        padding: 35px;
        margin-left: auto;
        margin-right: auto;
    }

    .introduction-main {
        padding: 40px;
    }

    .introduction-content-wrapper {
        gap: 18px;
    }

    .introduction-image {
        width: 180px;
    }

    .introduction-description p {
        font-size: 15px;
    }

    .introduction-sub-text {
        width: 90%;
        padding: 20px;
        margin-bottom: 40px;
    }

    .feature-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .introduction-sub-text h4 {
        font-size: 18px;
    }

    .introduction-sub-text p {
        font-size: 14px;
    }

    /* 6. CTA Section */
    .call-to-action-section {
        padding: 50px 20px;
    }

    .cta-content {
        gap: 25px;
    }

    .cta-text {
        font-size: 36px;
    }

    .cta-arrow {
        font-size: 45px;
    }

    .cta-download-btn {
        font-size: 18px;
        padding: 10px 18px;
    }

    .download-count {
        font-size: 18px;
    }

    /* 7. Light Plan Section */
    .light-plan-section {
        padding: 40px 20px 80px 20px;
    }

    .light-plan-title {
        font-size: 28px;
    }

    .light-plan-price {
        font-size: 28px;
    }

    .light-plan-description {
        font-size: 16px;
    }

    .light-plan-features {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .light-plan-feature-item {
        padding: 30px 20px;
    }

    .light-plan-feature-image img {
        max-height: 150px;
    }

    .feature-icon {
        font-size: 40px;
    }

    .feature-name {
        font-size: 20px;
    }

    .feature-price {
        font-size: 24px;
    }

    .feature-desc {
        font-size: 14px;
    }

    .light-plan-cta-button {
        font-size: 16px;
        padding: 12px 30px;
    }

    /* 8. ERP Section */
    .erp-section {
        padding: 40px 20px 80px 20px;
    }

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

    .erp-subtitle {
        font-size: 32px;
    }

    .erp-box-blue {
        width: 80%;
        padding: 25px;
    }

    .erp-box-blue p {
        font-size: 15px;
    }

    .erp-image img {
        max-width: 70%;
        margin-top: 40px;
    }

    /* 9. Pricing Section */
    .pricing-section {
        padding: 40px 20px 80px 20px;
    }

    .pricing-section .section-title {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .pricing-section-subtitle {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        gap: 24px;
        width: 100%;
        box-sizing: border-box;
    }

    .pricing-card {
        padding: 28px;
    }

    .plan-price-amount {
        font-size: 36px;
    }

    .plan-option {
        padding: 14px 16px;
    }

    .plan-footer-button {
        font-size: 14px;
        padding: 12px 16px;
    }

    .plan-note-wrapper {
        margin-top: 80px;
    }

    .plan-note {
        font-size: 0.88rem;
    }

    /* 10. Pricing Comparison Section */
    .pricing-comparison-section {
        padding: 10px 20px 60px 20px;
    }

    .comparison-title {
        font-size: 26px;
        margin-top: 40px;
    }

    .comparison-table {
        max-width: 750px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px;
        font-size: 14px;
    }

    /* 11. Supply Discount Section */
    .supply-discount-section {
        padding: 40px 20px;
    }

    .section-lead-text {
        font-size: 17px;
    }

    .discount-box {
        max-width: 650px;
    }

    .discount-initial-purchase {
        font-size: 18px;
    }

    .discount-center {
        font-size: 55px;
    }

    .discount-center span {
        font-size: 75px;
    }

    .discount-right .discount-header {
        font-size: 17px;
    }

    .discount-right .discount-details {
        font-size: 15px;
    }

    /* 12. System Requirements Section */
    .system-requirements-section {
        padding: 60px 20px;
    }

    .system-requirements-section .container {
        max-width: 850px;
    }

    .system-requirements-section .section-title {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .system-requirements-section .section-subtitle {
        font-size: 1.05em;
        margin-bottom: 45px;
    }

    .system-requirements-section .requirements-content {
        padding: 35px;
    }

    .system-requirements-section .requirements-content h3 {
        font-size: 1.7em;
        margin-top: 25px;
        margin-bottom: 22px;
    }

    .system-requirements-section .requirements-table th,
    .system-requirements-section .requirements-table td {
        padding: 11px 14px;
        font-size: 14px;
    }

    .system-requirements-section .notes-list {
        font-size: 0.95em;
        margin-bottom: 35px;
    }

    .system-requirements-section .notes-list li {
        padding-left: 23px;
        margin-bottom: 11px;
    }

    .system-requirements-section .contact-info {
        font-size: 1.05em;
        margin-top: 35px;
    }

    /* 13. FAQ Section */
    .faq-section {
        padding: 60px 20px;
    }

    .faq-section .section-title {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .faq-list {
        max-width: 750px;
    }

    .faq-item {
        padding: 18px 0;
    }

    .faq-question {
        font-size: 17px;
    }

    .faq-toggle {
        font-size: 26px;
        width: 38px;
        height: 38px;
    }

    /* 14. Mobile Contact Button */
    /* (スタイルなし) */
}

/* ========================================
   5. Medium Desktop (1281px以上 1600px以下)
   ======================================== */
@media (min-width: 1281px) and (max-width: 1600px) {
        /* 1. Hero Section */
        .hero-section {
            aspect-ratio: 16 / 9;
            min-height: 400px;
            padding-top: 150px;
        }

        .hero-section .container {
            max-width: 1400px;
        }

        .hero-content {
            max-width: 1400px;
            width: 70%;
            margin: 0 auto 20px auto;
        }

        .hero-content h1 {
            font-size: 54px;
        }

        .hero-content p {
            font-size: 42px;
        }

        .hero-content h2 {
            font-size: 26px;
        }

        .hero-content p3 {
            font-size: 16px;
        }

        .hero-feature-buttons {
            gap: 36px;
        }

        .hero-feature-buttons .hero-feature-button {
            font-size: 24px;
            padding: 6px 30px;
        }

        .hero-management-buttons {
            margin: 30px;
        }

        .management-btn {
            gap: 18px;
            padding: 36px 46px;
        }

        .management-icon {
            width: 48px;
            height: 48px;
        }

        .management-icon svg {
            width: 48px;
            height: 48px;
        }

        /* 2. Heading Bar Section */
        /* (スタイルなし) */

        /* 3. Client Logos Section */
        /* (スタイルなし) */

        /* 4. Problem Solving Section */
        /* (スタイルなし) */

        /* 5. Introduction Section */
        .introduction-section {
            padding-left: 40px;
            padding-right: 40px;
        }
        
        .introduction-section .container {
            margin-left: auto;
            margin-right: auto;
        }
        
        .introduction-section .intro-header {
            flex-direction: column;
            gap: 20px;
            text-align: left;
        }
        
        .introduction-content {
            margin-left: auto;
            margin-right: auto;
        }

        /* 6. CTA Section */
        /* (スタイルなし) */

        /* 7. Light Plan Section */
        /* (スタイルなし) */

        /* 8. ERP Section */
        /* (スタイルなし) */

        /* 9. Pricing Section */
        .pricing-grid {
            grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
            gap: 24px;
            width: 100%;
            box-sizing: border-box;
        }

        .pricing-card {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* 10. Pricing Comparison Section */
        /* (スタイルなし) */

        /* 11. Supply Discount Section */
        /* (スタイルなし) */

        /* 12. System Requirements Section */
        /* (スタイルなし) */

        /* 13. FAQ Section */
        /* (スタイルなし) */

        /* 14. Mobile Contact Button */
        /* (スタイルなし) */
}

/* ========================================
   6. Large Desktop (1601px and above)
   ======================================== */
@media (min-width: 1601px) {
    /* 1. Hero Section */
    .hero-section {
        aspect-ratio: 16 / 9;
        min-height: 500px;
    }

    .hero-section .container {
        max-width: 1500px;
    }
    
    .hero-content {
        max-width: 1500px;
        width: 80%;
        margin: 0 auto;
    }

    .hero-content h1 {
        font-size: 60px;
    }
    
    .hero-content p {
        font-size: 46px;
    }
    
    .hero-content h2 {
        font-size: 30px;
    }

    .hero-content p3 {
        font-size: 20px;
    }

    .hero-feature-buttons {
        gap: 50px;
    }

    .hero-feature-buttons .hero-feature-button {
        font-size: 26px;
        padding: 6px 30px;
    }

    .management-btn {
        gap: 20px;
        padding: 50px 60px;
    }

    .management-icon {
        width: 48px;
        height: 48px;
    }

    .management-icon svg {
        width: 48px;
        height: 48px;
    }

    /* 2. Heading Bar Section */
    /* (スタイルなし) */

    /* 3. Client Logos Section */
    /* (スタイルなし) */

    /* 4. Problem Solving Section */
    .problems-grid {
        max-width: 1200px;
        gap: 40px;
    }
    
    .problem-item {
        padding: 35px;
    }
    
    .problem-item h3 {
        font-size: 22px;
    }
    
    .solution-text {
        font-size: 18px;
    }

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

    /* 5. Introduction Section */
    .introduction-section {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .introduction-section .container {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .introduction-section .intro-header {
        flex-direction: row;
        gap: 30px;
        text-align: left;
        align-items: flex-start;
    }
    
    .introduction-section .intro-text-content {
        flex: 1;
    }
    
    .introduction-content {
        margin-left: auto;
        margin-right: auto;
    }
    
    .introduction-content-wrapper {
        gap: 50px;
    }
    
    .introduction-sub-text {
        padding: 35px 40px;
    }
    
    .feature-title {
        font-size: 28px;
    }
    
    .introduction-sub-text h4 {
        font-size: 22px;
    }
    
    .introduction-sub-text p {
        font-size: 18px;
    }

    /* 6. CTA Section */
    /* (スタイルなし) */

    /* 7. Light Plan Section */
    /* (スタイルなし) */

    /* 8. ERP Section */
    /* (スタイルなし) */

    /* 9. Pricing Section */
    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        max-width: 100%;
        width: 100%;
        gap: 40px;
        box-sizing: border-box;
    }
    
    .pricing-card {
        padding: 40px;
    }

    /* 10. Pricing Comparison Section */
    /* (スタイルなし) */

    /* 11. Supply Discount Section */
    /* (スタイルなし) */

    /* 12. System Requirements Section */
    .system-requirements-section .container {
        max-width: 1200px;
    }
    
    .system-requirements-section .requirements-content {
        padding: 50px;
    }
}

/* ========================================
   7. Desktop (1025px and above)
   ======================================== */
@media (min-width: 1025px) {
    .introduction-section {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .introduction-section .container {
        margin-left: auto;
        margin-right: auto;
    }
    
    .introduction-section .intro-header {
        flex-direction: row;
        gap: 30px;
        text-align: left;
        align-items: flex-start;
    }
    
    .introduction-section .intro-text-content {
        flex: 1;
    }
    
    .introduction-section .introduction-content {
        margin: 60px auto;
        max-width: 1200px;
    }
    
    .system-requirements-section .requirements-content h3 {
        font-size: 2em;
    }

    /* 13. FAQ Section */
    .faq-list {
        max-width: 1000px;
    }
    
    .faq-item {
        padding: 25px 0;
    }
    
    .faq-question {
        font-size: 20px;
    }

    /* 14. Mobile Contact Button */
    /* (スタイルなし) */
}