/* ===== RESPONSIVE DESIGN ===== */
/* モバイル最適化: タップ領域48px以上、フォント14px以上、横スクロール防止 */

/* Extra Large devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-stats {
        gap: 40px;
    }
    
    .process-steps {
        gap: 30px;
    }
    
    .faq-quick {
        gap: 30px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    /* Header adjustments */
    .header-content {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }
    
    .nav ul {
        gap: 20px;
    }
    
    /* Hero section */
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    /* モバイルでのCTAボタン最適化 */
    #startDiagnosisBtn {
        font-size: 1.1rem !important;
        min-width: 240px !important;
        padding: 1rem 2rem !important;
    }
    
    #viewHistoryBtn {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem !important;
    }
    
    .hero-stats {
        gap: 30px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    /* Process section */
    .process-steps {
        flex-direction: column;
        gap: 40px;
    }
    
    .step::after {
        display: none;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    /* Form adjustments */
    .form-container {
        padding: 30px;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 15px;
    }
    
    /* FAQ quick section */
    .faq-quick {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Guide styles */
    .guide-section {
        padding: 20px;
    }
    
    .step-detailed {
        flex-direction: column;
        text-align: center;
    }
    
    .step-detailed .step-number {
        margin: 0 auto 20px;
    }
    
    /* Spec styles */
    .table-of-contents ol {
        columns: 1;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
    .container {
        max-width: 540px;
        padding: 0 15px;
    }
    
    /* Typography adjustments - 最小14px */
    .page-header h1 {
        font-size: 2rem;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    /* Header - タップ領域48px以上 */
    .header-content {
        padding: 15px 0;
    }
    
    .logo h1 {
        font-size: 1.2rem;
    }
    
    .nav ul {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
    
    .nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px 16px;
    }
    
    /* Hero section */
    .hero-section {
        min-height: 80vh;
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    /* Buttons - タップ領域48px以上 */
    .hero-actions .btn {
        width: 100%;
        max-width: 300px;
        min-height: 48px;
    }
    
    /* スマホでのCTAボタン最適化 */
    #startDiagnosisBtn {
        font-size: 1rem !important;
        min-width: 90% !important;
        max-width: 320px !important;
        padding: 1.2rem 2rem !important;
        margin-bottom: 0.5rem;
        min-height: 56px !important;
    }
    
    #viewHistoryBtn {
        font-size: 0.875rem;
        padding: 0.75rem 1rem !important;
        margin-top: 0.5rem;
        min-height: 48px !important;
    }
    
    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
        min-height: 48px;
    }
    
    .btn-xl {
        padding: 16px 32px;
        font-size: 1.1rem;
        min-height: 52px;
    }
    
    .btn {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 1rem;
    }
    
    /* Sections */
    .section {
        padding: 40px 0;
    }
    
    .features-section,
    .process-section,
    .clubs-preview-section,
    .cta-section,
    .faq-section {
        padding: 60px 0;
    }
    
    /* Features grid */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .feature-card {
        padding: 30px 20px;
    }
    
    /* Clubs grid */
    .clubs-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* CTA section */
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-features {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    /* Form - タップ領域48px以上 */
    .form-container {
        padding: 20px;
        margin: 0 10px;
    }
    
    .radio-group,
    .checkbox-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .radio-group label,
    .checkbox-group label {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px;
    }
    
    .quiz-option {
        min-height: 56px;
        padding: 16px;
        cursor: pointer;
        touch-action: manipulation;
    }
    
    .result-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .result-actions .btn {
        width: 100%;
        min-height: 48px;
    }
    
    /* Legal documents */
    .legal-document {
        padding: 0 10px;
    }
    
    .article {
        padding: 15px;
    }
    
    /* Contact form */
    .pre-contact-section {
        padding: 20px;
        margin: 0 10px 30px;
    }
    
    .support-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-details {
        grid-template-columns: 1fr;
    }
    
    /* Guide sections */
    .checklist-item {
        flex-direction: column;
        text-align: left;
    }
    
    .checklist-item .check-icon {
        margin-bottom: 10px;
    }
    
    /* Spec document */
    .spec-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .perf-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-categories {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .container {
        padding: 0 12px;
    }
    
    /* Typography - 最小14px */
    .page-header h1 {
        font-size: 1.8rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .cta-content h2 {
        font-size: 1.8rem;
    }
    
    /* Header - mobile menu style - タップ領域48px以上 */
    .header-content {
        align-items: flex-start;
    }
    
    .nav {
        width: 100%;
    }
    
    .nav ul {
        flex-direction: column;
        width: 100%;
        gap: 4px;
    }
    
    .nav li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #ECF0F1;
    }
    
    .nav a {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 14px 16px;
        font-size: 1rem;
    }
    
    /* Logo */
    .logo {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    
    .logo img {
        width: 35px;
        height: 35px;
    }
    
    .logo h1 {
        font-size: 1.1rem;
    }
    
    /* Hero adjustments */
    .hero-section {
        min-height: 70vh;
        padding: 40px 0;
    }
    
    .hero-content {
        padding: 0 10px;
    }
    
    /* Form adjustments */
    .form-container {
        padding: 15px;
        margin: 0 5px;
    }
    
    .question input,
    .question select,
    .question textarea {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    /* Button adjustments - タップ領域48px以上、フォント14px以上 */
    .btn {
        padding: 14px 24px;
        font-size: 1rem;
        min-height: 48px;
    }
    
    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
        min-height: 52px;
    }
    
    /* Card adjustments */
    .feature-card {
        padding: 25px 15px;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
    }
    
    .feature-icon img {
        width: 30px;
        height: 30px;
    }
    
    /* Step adjustments */
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    /* Legal and guide documents */
    .legal-section,
    .guide-section,
    .spec-section {
        padding: 15px;
    }
    
    .article {
        padding: 12px;
    }
    
    /* Table of contents for small screens */
    .table-of-contents {
        padding: 20px;
    }
    
    /* Contact support grid */
    .support-info-section .support-grid {
        gap: 20px;
    }
    
    .support-card {
        padding: 15px;
    }
    
    /* FAQ adjustments - タップ領域48px以上 */
    .faq-question {
        padding: 16px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-height: 48px;
        cursor: pointer;
        touch-action: manipulation;
    }
    
    .faq-toggle {
        align-self: flex-end;
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 横スクロール防止 */
    body {
        overflow-x: hidden;
    }
    
    .container {
        overflow-x: hidden;
    }
    
    /* テーブルをカード形式に変換 */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 画像の横スクロール防止 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 選択肢カードのタップ領域最適化 */
    .quiz-option {
        min-height: 64px;
        padding: 18px 16px;
        margin-bottom: 12px;
    }
    
    /* ヘルプアイコンのタップ領域 */
    .help-icon {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        touch-action: manipulation;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
        padding: 20px 0;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .hero-stats {
        margin-top: 20px;
    }
}

/* High density displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .feature-icon img,
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .hero-section,
    .cta-section,
    .loading-overlay,
    .btn,
    .nav,
    .language-switcher {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .section {
        padding: 20px 0;
    }
    
    .page-header {
        background: none;
        color: #000;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .legal-document,
    .guide-section,
    .spec-section {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .feature-card,
    .club-card,
    .btn {
        transition: none;
        animation: none;
    }
    
    .spinner {
        animation: none;
        border: 5px solid #2ECC71;
    }
    
    .progress {
        transition: none;
    }
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles would go here when implemented */
    /* This is prepared for future dark mode feature */
}

/* Container query support for modern browsers */
@supports (container-type: inline-size) {
    .feature-card {
        container-type: inline-size;
    }
    
    @container (max-width: 300px) {
        .feature-card {
            padding: 20px 15px;
        }
        
        .feature-card h3 {
            font-size: 1.2rem;
        }
    }
}

/* Grid support fallback */
@supports not (display: grid) {
    .features-grid,
    .clubs-grid,
    .metrics-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .feature-card,
    .club-card,
    .metric-item {
        flex: 1;
        min-width: 280px;
    }
}

/* Flexbox fallback for older browsers */
@supports not (display: flex) {
    .header-content,
    .hero-actions,
    .hero-stats,
    .process-steps,
    .footer-content {
        display: block;
        text-align: center;
    }
    
    .header-content > * {
        display: inline-block;
        vertical-align: middle;
        margin: 10px;
    }
}

/* ===== モバイルメニューアニメーション ===== */
/* ハンバーガーメニューボタンのアニメーション */
#mobileMenuButton {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    touch-action: manipulation;
}

#mobileMenuButton:hover {
    background-color: rgba(46, 204, 113, 0.1);
    border-radius: 8px;
}

#mobileMenuButton:active {
    transform: scale(0.95);
}

/* ハンバーガーアイコンのアニメーション */
#mobileMenuButton i {
    transition: transform 0.3s ease;
}

#mobileMenuButton.menu-open i {
    transform: rotate(90deg);
}

/* モバイルサイドバーのスライドアニメーション */
#mobileSidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobileSidebar.sidebar-open {
    transform: translateX(0) !important;
}

/* サイドバー背景オーバーレイ */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ===== モバイル専用テーブルカードスタイル ===== */
@media (max-width: 768px) {
    /* 比較テーブルをカード形式に変換 */
    .comparison-table-container table {
        display: block;
    }
    
    .comparison-table-container thead {
        display: none;
    }
    
    .comparison-table-container tbody {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .comparison-table-container tr {
        display: grid;
        gap: 12px;
        background: white;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .comparison-table-container td {
        display: block;
        padding: 8px 0;
        border: none;
    }
    
    .comparison-table-container td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: #059669;
        font-size: 0.875rem;
    }
    
    /* クラブ一覧テーブルのカード化 */
    .clubs-table {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .clubs-table thead {
        display: none;
    }
    
    .clubs-table tbody {
        display: contents;
    }
    
    .clubs-table tr {
        display: grid;
        background: white;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        gap: 12px;
    }
    
    .clubs-table td {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border: none;
        min-height: 32px;
    }
    
    .clubs-table td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 8px;
        color: #059669;
        font-size: 0.875rem;
        min-width: 80px;
    }
}

/* ===== モバイル最適化: 余白調整 ===== */
@media (max-width: 768px) {
    /* セクション間の余白 */
    .section {
        padding: 48px 0;
    }
    
    /* カード内の余白 */
    .card-premium {
        padding: 20px 16px;
        margin-bottom: 16px;
    }
    
    /* フォームグループの余白 */
    .form-group,
    .question-group {
        margin-bottom: 24px;
    }
    
    /* ボタングループの余白 */
    .button-group,
    .form-actions {
        gap: 12px;
        margin-top: 24px;
    }
    
    /* グリッドアイテムの余白 */
    .grid {
        gap: 16px;
    }
    
    /* リストアイテムの余白 */
    .space-y-4 > * + * {
        margin-top: 16px;
    }
    
    /* 診断選択肢の余白最適化 */
    .quiz-option + .quiz-option {
        margin-top: 12px;
    }
}

/* ===== タッチデバイス最適化 ===== */
@media (hover: none) and (pointer: coarse) {
    /* タッチデバイス用のホバー効果を無効化 */
    .btn:hover,
    .quiz-option:hover {
        transform: none;
    }
    
    /* タッチ時のアクティブ状態を強調 */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .quiz-option:active {
        transform: scale(0.99);
        background-color: #ecfdf5;
    }
    
    /* タッチスクロールの最適化 */
    .scroll-container {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* ===== モバイルでの入力フィールド最適化 ===== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important; /* ズーム防止 */
        min-height: 48px;
        padding: 14px 16px;
        border-radius: 8px;
    }
    
    select {
        background-size: 16px;
        padding-right: 40px;
    }
    
    textarea {
        min-height: 120px;
        resize: vertical;
    }
}

/* ===== モバイルナビゲーション強化 ===== */
@media (max-width: 1024px) {
    .nav a {
        font-size: 1rem;
        padding: 12px 16px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* モバイルサイドバーの項目 */
    #mobileSidebar a {
        font-size: 1rem;
        padding: 14px 16px;
        min-height: 52px;
        display: flex;
        align-items: center;
        transition: all 0.2s ease;
    }
    
    #mobileSidebar a:active {
        background-color: #ecfdf5;
        transform: translateX(4px);
    }
}