/* ============================================
   和風スタイルテンプレート - レスポンシブスタイル
   Japanese Wafu Style Template - Responsive Styles
   ============================================ */

/* --------------------------------------------------
   1. スマートフォン（縦向き）
   -------------------------------------------------- */
@media (max-width: 575.98px) {
    /* 基本設定 */
    html {
        font-size: 14px;
    }
    
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* ヘッダー */
    .header-top {
        padding: 6px 0;
    }
    
    .utility-nav {
        gap: 10px;
        font-size: 0.8rem;
    }
    
    .site-logo img {
        max-height: 50px;
    }
    
    .logo-text {
        font-size: 0.8rem;
    }
    
    .action-icon {
        font-size: 1.2rem;
    }
    
    .action-text {
        font-size: 0.7rem;
    }
    
    /* ヒーローセクション */
    .hero-section {
        padding: 60px 0;
        margin-bottom: 20px;
    }
    
    .hero-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
    .btn-hero {
        width: 100%;
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* セクション */
    .section-title {
        font-size: 1.4rem;
        padding: 0 10px;
    }
    
    .section-title::before,
    .section-title::after {
        width: 20px;
    }
    
    /* 商品グリッド */
    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .product-image-container {
        height: 200px;
    }
    
    .product-info {
        padding: 15px;
    }
    
    .product-name {
        font-size: 1rem;
        height: auto;
        -webkit-line-clamp: 3;
    }
    
    .current-price {
        font-size: 1.1rem;
    }
    
    .product-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .add-to-cart-btn {
        width: 100%;
    }
    
    /* 商品詳細 */
    .product-detail-page {
        padding: 20px;
    }
    
    .product-title {
        font-size: 1.4rem;
    }
    
    .current-price-large {
        font-size: 1.6rem;
    }
    
    .old-price-large {
        font-size: 1.1rem;
    }
    
    .product-actions-detail {
        flex-direction: column;
    }
    
    .btn-add-to-cart-large {
        width: 100%;
        min-width: auto;
    }
    
    .product-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    /* タブ */
    .tabs-navigation {
        flex-direction: column;
        border-bottom: none;
    }
    
    .tab-link {
        border-bottom: 1px solid var(--wafu-light-gray);
        border-radius: 4px;
        margin-bottom: 5px;
    }
    
    .tab-link.active {
        border-bottom: 2px solid var(--wafu-red);
    }
    
    /* 買い物かご */
    .cart-page {
        padding: 20px;
    }
    
    .cart-title {
        font-size: 1.4rem;
    }
    
    .cart-table {
        display: block;
        overflow-x: auto;
    }
    
    .cart-table th,
    .cart-table td {
        white-space: nowrap;
        padding: 10px 8px;
    }
    
    .cart-item-image {
        width: 60px;
        height: 60px;
    }
    
    .cart-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .cart-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* チェックアウト */
    .checkout-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .step {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
    }
    
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .checkout-steps::before {
        display: none;
    }
    
    .checkout-form {
        padding: 20px;
    }
    
    .section-title {
        font-size: 1.2rem;
    }
    
    /* フッター */
    .footer-content {
        gap: 30px;
    }
    
    .footer-title {
        font-size: 1.1rem;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-btn {
        width: 100%;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* ユーティリティ */
    .mobile-hidden {
        display: none;
    }
    
    .mobile-flex {
        display: flex;
    }
    
    .mobile-block {
        display: block;
    }
}

/* --------------------------------------------------
   2. スマートフォン（横向き）& 小型タブレット
   -------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .product-detail-main {
        grid-template-columns: 1fr;
    }
    
    .checkout-steps {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .step {
        flex: 0 0 calc(50% - 10px);
    }
}

/* --------------------------------------------------
   3. タブレット（縦向き）
   -------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .header-content {
        grid-template-columns: 1fr 2fr;
    }
    
    .header-actions {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 15px;
    }
    
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    
    .checkout-steps {
        gap: 15px;
    }
    
    .step-label {
        font-size: 0.85rem;
    }
    
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------
   4. タブレット（横向き）& 小型デスクトップ
   -------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------
   5. デスクトップ
   -------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container {
        max-width: 1140px;
    }
}

/* --------------------------------------------------
   6. 大型デスクトップ
   -------------------------------------------------- */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .product-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------
   7. 縦向きデバイス
   -------------------------------------------------- */
@media (orientation: portrait) {
    .hero-section {
        min-height: 50vh;
    }
    
    .product-image-container {
        aspect-ratio: 1 / 1;
    }
}

/* --------------------------------------------------
   8. 横向きデバイス
   -------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        min-height: 100vh;
    }
    
    .main-navigation {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    .header-main {
        position: sticky;
        top: 0;
        z-index: 1001;
    }
}

/* --------------------------------------------------
   9. タッチデバイス
   -------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* ホバー効果の無効化 */
    .product-item:hover {
        transform: none;
    }
    
    .menu-link:hover::before {
        width: 0;
    }
    
    /* タッチフレンドリーなサイズ */
    .menu-link,
    .btn,
    .action-btn,
    .qty-btn,
    .filter-option,
    .color-swatch,
    .size-option {
        min-height: 44px;
        min-width: 44px;
    }
    
    .search-button {
        width: 44px;
        height: 44px;
    }
    
    /* スクロールバーの表示 */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 4px;
    }
    
    ::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    /* タップハイライト */
    * {
        -webkit-tap-highlight-color: rgba(199, 62, 58, 0.3);
    }
}

/* --------------------------------------------------
   10. マウスデバイス
   -------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* ホバー効果の強化 */
    .product-item:hover {
        z-index: 10;
    }
    
    /* スクロールバーの非表示 */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.4);
    }
}

/* --------------------------------------------------
   11. 高解像度ディスプレイ
   -------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi) {
    .logo-text {
        font-weight: 300;
    }
    
    .hero-title {
        font-weight: 700;
    }
}

/* --------------------------------------------------
   12. 低帯域幅環境
   -------------------------------------------------- */
@media (prefers-reduced-data: reduce) {
    * {
        background-image: none !important;
    }
    
    .hero-section {
        background: var(--wafu-black) !important;
    }
    
    .lazy {
        opacity: 1 !important;
    }
}

/* --------------------------------------------------
   13. 動きの制限
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------
   14. 印刷
   -------------------------------------------------- */
@media print {
    @page {
        margin: 0.5cm;
    }
    
    .no-print {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    a {
        text-decoration: underline;
        color: #000 !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }
    
    .product-detail-page,
    .cart-page,
    .checkout-form {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .btn {
        border: 1px solid #000 !important;
        background: none !important;
        color: #000 !important;
    }
}