/* 
 * TGM Wood Factory - モバイル統合レスポンシブデザイン
 * Mobile-First アプローチによる統一された設計
 * 
 * 統合ファイル:
 * - mobile-optimization.css
 * - mobile-background-fix.css  
 * - access-mobile-fix.css
 * - gallery-simple-fix.css (モバイル部分)
 */

/* =============== 基本モバイル設定 =============== */

/* 基本的な背景色・レイアウト設定 */
html, body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* セクション背景の統一設定 */
.section {
    background-color: inherit;
    position: relative;
    z-index: 1;
    padding: 40px 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 明示的な背景色設定 - セクション別 */
.about, .custom, .gallery, .contact {
    background-color: #ffffff;
}

.products, .workshop, .access {
    background-color: #f9f4ef;
}

.footer {
    background-color: var(--color-dark);
}

/* =============== レイアウト・グリッド =============== */

/* モバイル用基本レイアウト */
.container {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* フレックスボックス調整 */
.about-content,
.custom-content,
.workshop-content,
.tech-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* グリッドレイアウト - モバイルファースト */
.gallery-grid,
.products-grid,
.type-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* =============== タッチターゲット最適化 =============== */

.btn,
.nav-link,
.contact-btn,
button,
input[type="button"],
input[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* =============== ボタングループ - モバイル2列表示 =============== */

/* モバイルでボタンを2列表示 */
@media (max-width: 768px) {
    .hero-buttons,
    .products-buttons,
    .custom-buttons,
    .workshop-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;  /* 2列表示 */
        gap: 0.75rem;
        width: 100%;
    }

    .hero-buttons .btn,
    .products-buttons .btn,
    .custom-buttons .btn,
    .workshop-buttons .btn {
        width: 100%;  /* グリッドセル内で100% */
        white-space: normal;  /* テキストの改行を許可 */
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;  /* フォントサイズを少し小さく */
        text-align: center;
        line-height: 1.3;
        min-height: 44px;  /* タッチターゲットサイズ確保 */
    }
}

/* =============== 一枚板セクション - モバイル表示順序の変更 =============== */

@media (max-width: 768px) {
    /* 全体のコンテナをflexコンテナに */
    .products.section .container {
        display: flex;
        flex-direction: column;
    }

    /* セクションヘッダーを最初に配置 */
    .products .section-header {
        order: 0;
    }

    /* products-content-newを展開（子要素を親レベルに） */
    .products-content-new {
        display: contents;
    }

    /* products-infoも展開（孫要素を親レベルに） */
    .products-info {
        display: contents;
    }

    /* 表示順序を設定 */
    .products-text {
        order: 1;  /* 1番目：テキスト */
    }

    .products-gallery {
        order: 2;  /* 2番目：4つの画像 */
    }

    .products-buttons {
        order: 3;  /* 3番目：3つのボタン */
    }

    .products .shipping-inline-banner {
        order: 4;  /* 4番目：配送について */
    }
}

.nav-link {
    padding: 12px 16px;
}

/* フォーム要素の最適化 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    min-height: 44px;
    font-size: 16px;
    padding: 12px;
}

/* =============== タイポグラフィ =============== */

.hero-title {
    font-size: 1.8rem;
    line-height: 1.3;
}

.section-title {
    font-size: 1.5rem;
}

body {
    font-size: 16px;
    line-height: 1.6;
}

p {
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.1rem;
}

/* =============== ギャラリー・画像最適化 =============== */

/* ギャラリー画像の統一設定 */
.gallery-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-caption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    padding: 0 0.25rem;
    display: block;
}

/* 画像サイズ調整 */
img {
    max-width: 100%;
    height: auto;
}

/* ヒーロー画像は全画面表示のため制限なし */
.hero-image {
    object-fit: cover;
}

/* その他の画像は400px制限を維持 */
.about-image,
.workshop-image {
    max-height: 400px;
    object-fit: cover;
}

/* =============== アクセス情報のモバイル対応 =============== */

.access-info {
    width: 100%;
    margin-bottom: 1.5rem;
}

.address-block,
.contact-compact-row,
.access-building {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-compact-row {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.contact-compact-item {
    white-space: normal;
    margin-right: 0;
    padding: 0.25rem 0;
    font-size: 1rem;
}

/* =============== パフォーマンス最適化 =============== */

/* アニメーション軽量化 */
.animated, .transition {
    animation-duration: 0.2s;
    transition-duration: 0.2s;
}

/* 重いエフェクトを削減 */
.hero-overlay,
.product-category:hover {
    transform: none;
}

/* ボックスシャドウの簡素化 */
.card,
.gallery-item,
.workshop-card {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* =============== レスポンシブブレークポイント（Mobile-First） =============== */

/* スマートフォン（横向き） - 480px以上 */
@media (min-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .gallery-caption {
        font-size: 0.85rem;
        padding: 0 0.25rem;
    }
}

/* 小型タブレット - 600px以上 */
@media (min-width: 600px) {
    .section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

/* タブレット - 768px以上 */
@media (min-width: 768px) {
    .container {
        width: 90%;
        max-width: 750px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .type-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-caption {
        font-size: 0.95rem;
        padding: 0 0.5rem;
    }
    
    /* タブレットでのフレックスボックス調整 */
    .about-content,
    .workshop-content {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }
    
    .about-image,
    .about-text,
    .workshop-image,
    .workshop-text {
        flex: 1;
    }
    
    /* アクセス情報の調整 */
    .contact-compact-row {
        flex-direction: row;
        gap: 1rem;
        align-items: center;
    }
    
    .contact-compact-item {
        margin-right: 1rem;
        padding: 0.5rem;
        font-size: 1rem;
    }
    
    /* パフォーマンス設定をリセット */
    .animated, .transition {
        animation-duration: 0.3s;
        transition-duration: 0.3s;
    }
    
    .hero-overlay:hover,
    .product-category:hover {
        transform: scale(1.02);
    }
    
    .gallery-item:hover .gallery-img {
        transform: scale(1.1);
    }
}

/* 大型タブレット・小型デスクトップ - 992px以上 */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    .section {
        padding: 80px 0;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .type-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* デスクトップ - 1200px以上 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .section {
        padding: 100px 0;
    }
}

/* 大型デスクトップ - 1400px以上 */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* =============== デバイス・ユーザー設定対応 =============== */

/* 動作を軽くしたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none;
        transition: none;
    }
}

/* ホバーエフェクトをタッチデバイスでは無効化 */
@media (hover: none) {
    .btn:hover,
    .gallery-item:hover,
    .workshop-card:hover {
        transform: none;
    }
}

/* タッチデバイスでのインタラクション改善 */
@media (pointer: coarse) {
    .close-button,
    .modal-close {
        min-width: 44px;
        min-height: 44px;
    }
    
    .slider-prev,
    .slider-next {
        width: 50px;
        height: 50px;
    }
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
    .section {
        border-top: 1px solid;
        border-bottom: 1px solid;
    }
}

/* ダークモード対応（将来的な拡張用） */
@media (prefers-color-scheme: dark) {
    /* ダークモード用のスタイルをここに追加予定 */
}

/* =============== iOS Safari特有の問題対応 =============== */

/* iOS Safari対応 */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: -webkit-fill-available;
    }
    
    .section {
        background-color: #ffffff;
    }
    
    .section.bg-light,
    .products, .workshop, .access {
        background-color: #f9f4ef;
    }
}

/* iPhoneのノッチ対応 */
@supports (padding: max(0px)) {
    .header,
    .footer {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}

/* 横向き時の調整 */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-content {
        padding: 20px 0;
    }
    
    .section {
        padding: 30px 0;
    }
}

/* =============== アクセシビリティ向上 =============== */

/* フォーカス表示の改善 */
:focus {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

/* より具体的なセレクタでアクセス情報の背景を確保 */
.access-content .access-info .contact-info-compact .address-block,
.access-content .access-info .contact-info-compact .contact-compact-row,
.access-content .access-info .access-building {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}