/**
 * Sections - ZeroDX Theme
 * セクションコンポーネント
 */

/* セクション共通スタイル */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xxxl);
    color: var(--secondary-color);
    font-weight: 700;
}

/* DX理解促進セクション */
.dx-understanding-section {
    padding: var(--spacing-section) 0;
    background: var(--light-bg);
}

.dx-explanation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    margin-bottom: 60px;
}

.explanation-visual, .manga-area {
    min-height: 300px;
}

.challenge-checklist {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.challenge-checklist h3 {
    font-size: var(--font-size-xxxl);
    color: var(--primary-color);
    margin-bottom: var(--spacing-xl);
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.checklist-item {
    background: var(--pale-blue);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    text-align: left;
    border: 2px solid transparent;
    transition: border-color var(--transition-normal);
}

.checklist-item:hover {
    border-color: var(--primary-color);
}

.checklist-item input[type="checkbox"] {
    margin-right: var(--spacing-sm);
    transform: scale(1.2);
}

.checklist-item label {
    font-size: var(--font-size-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.checklist-cta {
    font-size: 1.3rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: var(--spacing-xl);
}

/* コンテンツ紹介セクション */
.content-intro-section {
    padding: var(--spacing-section) 0;
    background: var(--pale-blue);
}

.content-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
}

/* 成功体験セクション */
.success-stories-section {
    padding: var(--spacing-section) 0;
    background: #fff;
}

.case-studies, .before-after-stats, .testimonials {
    margin-bottom: 60px;
}

.success-cta {
    text-align: center;
    background: var(--pale-blue);
    padding: var(--spacing-xxl);
    border-radius: var(--border-radius-xl);
    margin-top: 60px;
}

.success-cta h3 {
    font-size: var(--font-size-xxxl);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.success-cta p {
    font-size: var(--font-size-lg);
    margin-bottom: 25px;
    color: var(--dark-gray);
}

/* 診断ツールセクション */
.diagnostic-section {
    padding: var(--spacing-section) 0;
    background: var(--alt-bg);
    scroll-margin-top: var(--spacing-section);
}

.diagnostic-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.diagnostic-intro h3 {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

.diagnostic-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xxxl);
}

/* 最新記事セクション */
.latest-posts-section {
    padding: var(--spacing-section) 0;
    background: #fff;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxxl);
}

/* サインアップセクション */
.signup-section {
    padding: var(--spacing-section) 0;
    background: var(--primary-color);
    color: #fff;
    text-align: center;
}

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

.signup-description {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xxxl);
    opacity: 0.9;
}

.signup-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xxxl);
    max-width: 800px;
    margin: 0 auto;
}

.email-form {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.email-form input {
    padding: 12px var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-md);
    flex: 1;
    max-width: 250px;
}

/* ページネーション */
.pagination {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.pagination .nav-links {
    display: inline-block;
}

.pagination .page-numbers {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 3px;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-color);
}

.pagination .current {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.pagination a.page-numbers:hover {
    background-color: var(--light-gray);
}

/* アーカイブページ */
.page-header {
    margin-bottom: var(--spacing-xl);
}

.page-title {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.8rem;
}

.archive-description {
    font-size: var(--font-size-base);
    color: var(--dark-gray);
}