/**
 * レスポンシブデザイン用CSS
 */
 
@import url('/assets/css/variables.css');

/* タブレット向け（768px以下） */
@media (max-width: 1023px) {
    .main-nav .container {
        justify-content: flex-start;
    }
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* ヘッダー */
    .header-top {
        padding: var(--spacing-sm) 0;
    }
    
    .logo img {
        max-width: 200px;
    }
    
    /* ハンバーガーメニュー */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: var(--font-size-xl);
        color: var(--color-text);
        cursor: pointer;
        padding: var(--spacing-sm);
        margin-right: calc(-1 * var(--spacing-sm));
        position: relative;
        z-index: 100;
    }
    
    .nav-list {
        position: fixed;
        top: 0;
        right: -280px; /* 画面外に配置 */
        width: 280px;
        height: 100vh;
        background-color: var(--color-info);
        box-shadow: -5px 0 15px var(--color-overlay-light);
        z-index: 99;
        display: flex;
        flex-direction: column;
        padding: 60px 0 var(--spacing-xl);
        transition: right var(--transition-normal);
        overflow-y: auto;
    }
    
    .nav-list.active {
        right: 0;
    }
    
    .nav-list li {
        width: 100%;
        border-bottom: 1px solid var(--color-gray);
    }
    
    .nav-list li a {
        padding: var(--spacing-md) var(--spacing-xl);
        display: block;
        width: 100%;
        text-align: left;
    }
    
    /* モバイルメニューが開いている時の背景オーバーレイ */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-overlay);
        z-index: 98;
    }
    
    .menu-overlay.active {
        display: block;
    }
    
    /* 閉じるボタン（モバイル時のみ表示） */
    .nav-close-item {
        display: block;
        text-align: right;
        padding: var(--spacing-xs) var(--spacing-md);
        border-bottom: none !important;
    }
    
    .nav-close-btn {
        background: none;
        border: none;
        color: var(--color-text);
        font-size: var(--font-size-xl);
        cursor: pointer;
        padding: var(--spacing-sm);
        width: 40px;
        height: 40px;
        border-radius: var(--border-radius-circle);
        transition: all var(--transition-normal);
    }
    
    .nav-close-btn:hover {
        background-color: var(--color-bg-light);
        color: var(--color-error);
    }
    
    /* セクション */
    .section {
        padding: var(--spacing-xl) 0;
    }
    
    .section-title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-xl);
    }
    
    /* スライダー */
    .slider {
        height: 400px;
    }
    
    .slider-content {
        max-width: 90%;
    }
    
    .slider-title {
        font-size: var(--font-size-xl);
    }
    
    .slider-description {
        font-size: var(--font-size-base);
    }
    
    /* グリッド */
    .services-grid,
    .category-grid,
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .logistics-container {
        grid-template-columns: 1fr;
    }
    
    /* コンテンツページ */
    .about-intro,
    .service-content {
        grid-template-columns: 1fr;
    }
    
    .team-members,
    .mission-values {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ニュースページ */
    .news-item {
        grid-template-columns: 1fr;
    }
    
    .news-related-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* お問い合わせフォーム */
    .contact-container {
        grid-template-columns: 1fr;
    }
    
    /* チェックアウト */
    .checkout-container {
        grid-template-columns: 1fr;
    }
    
    .order-summary,
    .cart-summary {
        position: static;
        margin-top: var(--spacing-xl);
    }
    
    /* フッター */
    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }

    /* =================================
   モバイル用サブメニューCSS - responsive.css に追記
   タブレット向け（768px以下）のセクション内に追加
   ================================= */

/* タブレット向け（768px以下）のセクション内に以下を追加 */
@media (max-width: 1023px) {
    /* 既存のスタイルの後に追加 */
    
    /* サブメニュー付きナビアイテムのスタイル */
    .nav-list .nav-item {
        position: relative;
    }
    
    .nav-list .nav-item > a {
        position: relative;
        padding-right: 50px; /* トグルボタン用のスペース確保 */
    }
    
    .submenu-toggle {
        position: absolute;
        right: var(--spacing-md);
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--nav-color);
        font-size: var(--font-size-md);
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform var(--transition-normal);
        z-index: 10;
    }
    
    .submenu-toggle::before {
        content: '+';
        font-weight: var(--font-weight-bold);
        transition: transform var(--transition-normal);
    }
    
    .submenu-toggle.active::before {
        content: '−';
        transform: rotate(180deg);
    }
    
    .submenu {
        max-height: 0;
        overflow: hidden;
        background-color: rgba(29, 53, 87, 0.9); /* より暗い背景 */
        transition: max-height var(--transition-normal), padding var(--transition-normal);
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .submenu.active {
        max-height: 300px; /* 必要に応じて調整 */
        padding: var(--spacing-xs) 0;
    }
    
    .submenu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .submenu li:last-child {
        border-bottom: none;
    }
    
    .submenu a {
        display: block;
        color: var(--nav-color);
        text-decoration: none;
        padding: var(--spacing-sm) var(--spacing-xl);
        transition: background-color var(--transition-normal);
        font-size: var(--font-size-sm);
        line-height: 1.4;
        padding-left: calc(var(--spacing-xl) + var(--spacing-md)); /* より多くのインデント */
    }
    
    .submenu a:hover,
    .submenu a:focus {
        background-color: var(--nav-hover-bg);
        color: var(--nav-hover-color);
    }
}
}
/* =================================
   モバイル用サブメニューCSS - responsive.css に追記
   タブレット向け（768px以下）のセクション内に追加
   ================================= */

/* タブレット向け（768px以下）のセクション内に以下を追加 */
@media (max-width: 1023px) {
    /* 既存のスタイルの後に追加 */
    
    /* サブメニュー付きナビアイテムのスタイル */
    .nav-list .nav-item {
        position: relative;
    }
    
    .nav-list .nav-item > a {
        position: relative;
        padding-right: 50px; /* トグルボタン用のスペース確保 */
    }
    
    .submenu-toggle {
        position: absolute;
        right: var(--spacing-md);
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--nav-color);
        font-size: var(--font-size-md);
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform var(--transition-normal);
        z-index: 10;
    }
    
    .submenu-toggle::before {
        content: '+';
        font-weight: var(--font-weight-bold);
        transition: transform var(--transition-normal);
    }
    
    .submenu-toggle.active::before {
        content: '−';
        transform: rotate(180deg);
    }
    
    .submenu {
        max-height: 0;
        overflow: hidden;
        background-color: rgba(29, 53, 87, 0.9); /* より暗い背景 */
        transition: max-height var(--transition-normal), padding var(--transition-normal);
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .submenu.active {
        max-height: 300px; /* 必要に応じて調整 */
        padding: var(--spacing-xs) 0;
    }
    
    .submenu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .submenu li:last-child {
        border-bottom: none;
    }
    
    .submenu a {
        display: block;
        color: var(--nav-color);
        text-decoration: none;
        padding: var(--spacing-sm) var(--spacing-xl);
        transition: background-color var(--transition-normal);
        font-size: var(--font-size-sm);
        line-height: 1.4;
        padding-left: calc(var(--spacing-xl) + var(--spacing-md)); /* より多くのインデント */
    }
    
    .submenu a:hover,
    .submenu a:focus {
        background-color: var(--nav-hover-bg);
        color: var(--nav-hover-color);
    }
}

/* スマートフォン向け（480px以下） */
@media (max-width: 480px) {
    /* ヘッダー */
    .header-top {
        flex-direction: column;
        align-items: center;
    }
    
    .search-cart {
        width: 100%;
        justify-content: center;
    }
    
    .search-form {
        flex-grow: 1;
    }
    
    .search-form input {
        width: 100%;
    }
    
    /* スライダー */
    .slider {
        height: 350px;
    }
    
    .slider-content {
        padding: var(--spacing-md);
    }
    
    .slider-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-sm);
    }
    
    .slider-description {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-md);
    }
    
    /* グリッド */
    .services-grid,
    .category-grid,
    .news-grid,
    .team-members,
    .mission-values {
        grid-template-columns: 1fr;
    }
    
    .news-related-list {
        grid-template-columns: 1fr;
    }
    
    /* カード */
    .product-card,
    .category-card,
    .team-member,
    .mission-card {
        max-width: 100%;
    }
    
    /* 商品詳細 */
    .product-detail {
        grid-template-columns: 1fr;
    }
    
    .product-image-main {
        height: 300px;
    }
    
    .product-actions {
        flex-direction: column;
    }
    
    .quantity-control {
        width: 100%;
        margin-bottom: var(--spacing-md);
        margin-right: 0;
    }
    
    /* ボタン */
    .btn {
        width: 100%;
        text-align: center;
    }
    
    /* フォーム要素 */
    .form-group input,
    .form-group textarea,
    .form-group select,
    .form-actions {
        width: 100%;
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* カート */
    .cart-container {
        grid-template-columns: 1fr;
    }
    
    .cart-table {
        display: block;
        overflow-x: auto;
    }
    
    .cart-table th,
    .cart-table td {
        padding: var(--spacing-sm);
    }
    
    .product-col {
        min-width: 150px;
    }
    
    /* フッター */
    .footer-widgets {
        grid-template-columns: 1fr;
    }
}

/* スマートフォン超小型（320px以下） */
@media (max-width: var(--breakpoint-xs)) {
    /* 全体的にフォントサイズを小さく */
    body {
        font-size: var(--font-size-sm);
    }
    
    .slider {
        height: 300px;
    }
    
    .slider-content {
        width: 100%;
        padding: var(--spacing-sm);
    }
    
    .slider-title {
        font-size: var(--font-size-md);
    }
    
    .slider-description {
        font-size: var(--font-size-xs);
    }
    
    .nav-list {
        width: 250px;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
    }
}