/**
 * 狐弥夢クリエイティブ レスポンシブスタイルシート
 */

/* ===================================
   ブレイクポイント定義
   - デスクトップ: 1200px以上
   - タブレット: 768px - 1199px
   - モバイル: 767px以下
   - 小型モバイル: 480px以下
=================================== */

/* ===================================
   大画面デスクトップ (1400px以上)
=================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .section-title {
        font-size: 3.5rem;
    }
    
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===================================
   デスクトップ (1200px以上)
=================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .hide-lg {
        display: none !important;
    }
    
    .col-lg-1 { width: 8.333%; }
    .col-lg-2 { width: 16.666%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.333%; }
    .col-lg-5 { width: 41.666%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.333%; }
    .col-lg-8 { width: 66.666%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.333%; }
    .col-lg-11 { width: 91.666%; }
    .col-lg-12 { width: 100%; }
}

/* ===================================
   タブレット横向き (992px - 1199px)
=================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .section-title {
        font-size: 2.8rem;
    }
    
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   タブレット縦向き (768px - 991px)
=================================== */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .hide-md {
        display: none !important;
    }
    
    .show-md {
        display: block !important;
    }
    
    /* ヘッダー調整 */
    .site-header {
        padding: 12px 20px;
    }
    
    .site-title {
        font-size: 1.3rem;
    }
    
    /* ナビゲーション */
    .main-navigation ul {
        gap: 20px;
    }
    
    /* セクションタイトル */
    .section-title {
        font-size: 2.3rem;
    }
    
    /* グリッド調整 */
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* サイドナビゲーション */
    .koyume-side-nav {
        width: 240px;
    }
    
    /* フォーム調整 */
    .form-group {
        margin-bottom: 20px;
    }
    
    .col-md-1 { width: 8.333%; }
    .col-md-2 { width: 16.666%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333%; }
    .col-md-5 { width: 41.666%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333%; }
    .col-md-8 { width: 66.666%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.333%; }
    .col-md-11 { width: 91.666%; }
    .col-md-12 { width: 100%; }
}

/* ===================================
   モバイル (767px以下)
=================================== */
@media (max-width: 767px) {
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .hide-sm {
        display: none !important;
    }
    
    .show-sm {
        display: block !important;
    }
    
    /* ヘッダー */
    .site-header {
        padding: 10px 15px;
    }
    
    .site-logo {
        font-size: 1.2rem;
    }
    
    .site-title {
        font-size: 1.1rem;
    }
    
    /* モバイルメニュー */
    .menu-toggle {
        display: block;
    }
    
    .main-navigation {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(255, 255, 255, 0.98);
        transition: left 0.3s ease;
        z-index: 999;
    }
    
    .main-navigation.active {
        left: 0;
    }
    
    .main-navigation ul {
        flex-direction: column;
        padding: 30px;
        gap: 15px;
    }
    
    .main-navigation a {
        font-size: 1.1rem;
        padding: 12px 0;
        display: block;
    }
    
    /* セクションタイトル */
    .section-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .page-title {
        font-size: 2.2rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    /* グリッド */
    .grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .service-grid {
        grid-template-columns: 1fr;
    }
    
    .speciality-grid {
        grid-template-columns: 1fr;
    }
    
    /* カード */
    .card {
        padding: 20px;
    }
    
    .service-card {
        padding: 25px 20px;
    }
    
    /* サイドナビゲーション */
    .koyume-side-nav {
        transform: translateX(-100%);
        width: 280px;
    }
    
    .koyume-side-nav.active {
        transform: translateX(0);
    }
    
    .mobile-nav-toggle {
        display: block;
    }
    
    /* フォーム */
    .contact-form-wrapper {
        padding: 30px 20px;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    /* ボタン */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    /* フッター */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* FAQナビゲーション */
    .faq-nav {
        position: static;
    }
    
    .faq-nav ul {
        flex-direction: column;
        gap: 10px;
    }
    
    .faq-nav a {
        width: 100%;
        text-align: center;
    }
    
    /* タイムライン */
    .flow-timeline::before {
        left: 20px;
    }
    
    .flow-number {
        left: 20px;
    }
    
    .flow-content {
        width: calc(100% - 70px);
        margin-left: 60px !important;
    }
    
    /* テーブル */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* パディング調整 */
    section {
        padding: 60px 0;
    }
    
    .business-header {
        padding: 60px 0;
    }
    
    .col-sm-1 { width: 8.333%; }
    .col-sm-2 { width: 16.666%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.333%; }
    .col-sm-5 { width: 41.666%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.333%; }
    .col-sm-8 { width: 66.666%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.333%; }
    .col-sm-11 { width: 91.666%; }
    .col-sm-12 { width: 100%; }
}

/* ===================================
   小型モバイル (480px以下)
=================================== */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hide-xs {
        display: none !important;
    }
    
    .show-xs {
        display: block !important;
    }
    
    /* ヘッダー */
    .site-header {
        padding: 8px 10px;
    }
    
    .site-logo .fox-icon {
        font-size: 1.5rem;
    }
    
    .site-title {
        font-size: 1rem;
    }
    
    /* タイトル */
    .section-title {
        font-size: 1.7rem;
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .page-subtitle {
        font-size: 0.9rem;
    }
    
    /* スライダー */
    .welcome-title {
        font-size: 1.8rem;
    }
    
    .welcome-subtitle {
        font-size: 1rem;
    }
    
    .fox-icon-large {
        font-size: 3rem;
    }
    
    /* カード */
    .card {
        padding: 15px;
        border-radius: 10px;
    }
    
    .service-card {
        padding: 20px 15px;
    }
    
    /* フォーム */
    .form-section-title {
        font-size: 1.3rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.95rem;
        padding: 10px 12px;
    }
    
    /* ボタン */
    .btn-primary,
    .btn-secondary {
        padding: 12px 25px;
        font-size: 0.95rem;
    }
    
    /* FAQ */
    .faq-category-title {
        font-size: 1.4rem;
    }
    
    .faq-question {
        font-size: 0.95rem;
        padding: 12px;
    }
    
    .faq-answer {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    /* パディング調整 */
    section {
        padding: 40px 0;
    }
    
    .business-header {
        padding: 40px 0;
    }
    
    /* マージン調整 */
    h2 {
        margin-bottom: 20px;
    }
    
    h3 {
        margin-bottom: 15px;
    }
    
    p {
        margin-bottom: 15px;
    }
    
    /* サイドナビゲーション */
    .koyume-side-nav {
        width: 90%;
    }
    
    .nav-item {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
    
    /* ページトップボタン */
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
        font-size: 1.2rem;
    }
}

/* ===================================
   極小画面 (360px以下)
=================================== */
@media (max-width: 360px) {
    .site-title {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .page-title {
        font-size: 1.6rem;
    }
    
    .btn-primary,
    .btn-secondary {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* ===================================
   横向き対応
=================================== */
@media (orientation: landscape) and (max-height: 500px) {
    .koyume-slider-container {
        height: 100vh;
    }
    
    .slide-content {
        padding: 20px;
    }
    
    .welcome-title {
        font-size: 2rem;
    }
    
    .swiper-pagination {
        bottom: 10px !important;
    }
}

/* ===================================
   印刷対応
=================================== */
@media print {
    .no-print,
    .menu-toggle,
    .mobile-nav-toggle,
    .back-to-top,
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
    }
    
    .site-header {
        position: static;
    }
    
    .koyume-side-nav {
        display: none;
    }
}