/**
 * 洋服詳細ページのスマホ最適化用追加CSS
 * 
 * 縦積みレイアウトで表示される洋服詳細コンテンツのモバイル表示を最適化
 *
 * @package collemi
 */

/**
 * 洋服詳細ページのモバイル最適化
 */
@media (max-width: 767px) {
    /* セクションコンテナの調整 */
    body .section-container {
        gap: 25px;
        margin-bottom: 30px;
    }
    
    /* 各項目の縦幅調整 */
    body .detail-item {
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
    }
    
    /* 詳細情報のラベルと値 */
    body .product-info-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #666;
        display: block;
        margin-bottom: 4px;
    }
    
    body .product-info-value {
        font-size: 0.95rem;
    }
    
    /* 価格情報 */
    body .price-info .price {
        font-size: 1.1rem;
    }
    
    body .price-info .price small {
        font-size: 0.75rem;
    }
    
    /* 芸能人情報エリア */
    body .celebrity-info {
        display: flex;
        align-items: center;
        padding: 10px 0;
    }
    
    body .celebrity-icon {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    
    body .celebrity-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    body .celebrity-details {
        font-size: 0.9rem;
    }
    
    /* 着用シーンボタン */
    body .wearing-scene {
        margin: 5px 0 10px;
    }
    
    body .view-scene-btn {
        padding: 8px 15px;
        font-size: 0.7rem;
        width: 88%;
        max-width: 250px;
    }
    
    /* アフィリエイトボタン */
    body .affiliate-buttons {
        flex-direction: column;
        gap: 12px;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    
    body .affiliate-button {
        padding: 12px 15px;
        min-width: auto;
        width: 100%;
        font-size: 0.9rem;
    }
    
    /* 免責事項 */
    body .affiliate-disclaimer {
        margin-top: 20px;
        padding: 12px;
        font-size: 0.75rem;
    }
    
    body .affiliate-disclaimer p {
        margin-bottom: 0;
    }
}

/**
 * さらに小さい画面サイズ向け調整
 */
@media (max-width: 575px) {
    /* セクション見出し */
    body .section-heading {
        font-size: 1.2rem;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }
    
    /* 埋め込みコンテナ */
    body .embed-container {
        margin: 15px auto;
    }
    
    /* 商品情報のラベルと値 */
    body .product-info-label {
        font-size: 0.8rem;
    }
    
    body .product-info-value {
        font-size: 0.9rem;
    }
    
    /* モーダルコンテンツ */
    body .modal-content h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }
}