@charset "utf-8";

/* ========================================
   モバイルベース最適化 - 全ページ共通
   フォントサイズ・タップ領域・行間の最適化
   ======================================== */

/* ========================================
   1. ベースフォントサイズ - iOS自動ズーム防止
   ======================================== */
@media screen and (max-width: 767px) {
    /* body要素のベースフォントサイズを16px以上に設定 */
    body {
        font-size: 16px !important;
        line-height: 1.8 !important;
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    /* すべてのテキスト要素で16px最小保証 + 行間調整 */
    p, span, div, li, td, th, dt, dd, label {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
    
    /* 段落の余白を追加 */
    p {
        margin-bottom: 1em !important;
    }
    
    /* リストの行間 */
    ul, ol {
        line-height: 1.8 !important;
    }
    
    li {
        margin-bottom: 0.5em !important;
        line-height: 1.8 !important;
    }
    
    /* 見出しは相対的に大きく + 上下余白 */
    h1 { 
        font-size: 28px !important;
        line-height: 1.4 !important;
        margin-top: 1.2em !important;
        margin-bottom: 0.8em !important;
    }
    
    h2 { 
        font-size: 24px !important;
        line-height: 1.5 !important;
        margin-top: 1.2em !important;
        margin-bottom: 0.8em !important;
    }
    
    h3 { 
        font-size: 20px !important;
        line-height: 1.6 !important;
        margin-top: 1em !important;
        margin-bottom: 0.6em !important;
    }
    
    h4 { 
        font-size: 18px !important;
        line-height: 1.6 !important;
        margin-top: 1em !important;
        margin-bottom: 0.6em !important;
    }
    
    h5, h6 { 
        font-size: 16px !important;
        line-height: 1.8 !important;
        margin-top: 0.8em !important;
        margin-bottom: 0.4em !important;
    }
    
    /* 小さいテキストも16px以上を保証 */
    small, .small {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
    
    /* テーブル内のテキスト */
    table {
        font-size: 16px !important;
    }
    
    table td, table th {
        font-size: 16px !important;
        line-height: 1.8 !important;
        padding: 12px !important;
    }
}

/* ========================================
   2. タップターゲットサイズ - 48px以上
   ======================================== */
@media screen and (max-width: 767px) {
    /* すべてのボタン - より具体的に（スライダードットを除外） */
    button.btn:not(.slick-dots button),
    .ec-blockBtn,
    .ec-inlineBtn,
    input[type="submit"].btn,
    input[type="button"].btn,
    input[type="reset"].btn,
    a.ec-blockBtn,
    a.ec-inlineBtn {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
        touch-action: manipulation !important;
    }
    
    /* スライダードットボタンは元のスタイルを維持 */
    ul.slick-dots,
    ul.product-dots {
        line-height: 0 !important;
        font-size: 0 !important;
    }
    
    ul.slick-dots li,
    ul.product-dots li {
        vertical-align: baseline !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    
    ul.slick-dots button,
    ul.slick-dots li button,
    ul.slick-dots li button:hover,
    ul.slick-dots li button:focus,
    ul.product-dots button,
    ul.product-dots li button,
    ul.product-dots li button:hover,
    ul.product-dots li button:focus {
        min-height: 10px !important;
        min-width: 10px !important;
        max-height: 10px !important;
        max-width: 10px !important;
        padding: 0 !important;
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        display: inline-block !important;
        margin: 0 4px !important;
        transform: none !important;
        outline: none !important;
        box-sizing: border-box !important;
        vertical-align: baseline !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }
    
    /* アクティブなドットも同じスタイル */
    ul.slick-dots .slick-active,
    ul.product-dots .slick-active {
        vertical-align: baseline !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    
    ul.slick-dots .slick-active button,
    ul.slick-dots .slick-active button:hover,
    ul.slick-dots .slick-active button:focus,
    ul.product-dots .slick-active button,
    ul.product-dots .slick-active button:hover,
    ul.product-dots .slick-active button:focus {
        display: inline-block !important;
        transform: none !important;
        min-height: 10px !important;
        min-width: 10px !important;
        max-height: 10px !important;
        max-width: 10px !important;
        width: 10px !important;
        height: 10px !important;
        margin: 0 4px !important;
        padding: 0 !important;
        outline: none !important;
        box-sizing: border-box !important;
        vertical-align: baseline !important;
        line-height: 0 !important;
        font-size: 0 !important;
    }
    
    /* リンクのタップ領域 - テキストリンクのみ（パンくずリストを除外） */
    .ec-categoryNaviRole a:not(.breadcrumb a),
    .ec-footerNavi a {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* パンくずリストは元のスタイルを維持 */
    .breadcrumb {
        font-size: 14px !important;
        line-height: 1.5 !important;
        align-items: baseline !important;
    }
    
    /* パンくずリストのアイテムの垂直位置を修正 */
    .breadcrumb-item {
        font-size: 14px !important;
        line-height: 1.5 !important;
        align-self: baseline !important;
    }
    
    /* パンくずリストのリンクの垂直位置を揃える */
    .breadcrumb-item a,
    .breadcrumb a {
        font-size: 14px !important;
        line-height: 1.5 !important;
        vertical-align: baseline !important;
        text-decoration: none !important;
    }
    
    /* パンくずリストのspanも同様に */
    .breadcrumb-item span,
    .breadcrumb span {
        vertical-align: baseline !important;
    }
    
    /* チェックボックス・ラジオボタンのタップ領域拡大 */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        margin: 12px !important;
        cursor: pointer !important;
    }
    
    /* チェックボックス・ラジオボタンのラベル - フォーム内のみ */
    form input[type="checkbox"] + label,
    form input[type="radio"] + label,
    form label input[type="checkbox"],
    form label input[type="radio"] {
        min-height: 44px !important;
        padding: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        cursor: pointer !important;
        font-size: 16px !important;
    }
    
    /* セレクトボックス - フォーム内のみ */
    form select,
    .ec-select select {
        min-height: 48px !important;
        padding: 12px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* テキスト入力フィールド - フォーム内のみ */
    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form input[type="number"],
    form input[type="password"],
    form input[type="search"],
    form input[type="url"],
    form textarea {
        min-height: 48px !important;
        padding: 12px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }
    
    /* テキストエリア - フォーム内のみ */
    form textarea {
        min-height: 120px !important;
        padding: 12px !important;
        resize: vertical !important;
    }
    
    /* アイコンボタン */
    .ec-icon,
    .icon,
    [class*="icon-"] {
        min-width: 48px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* カートナビゲーション - バッジ表示のためにposition: relativeを確保 */
    .ec-cartNavi__icon {
        position: relative !important;
    }
    
    /* カートバッジ - 元のスタイルを維持 */
    .ec-cartNavi__badge {
        display: inline-block !important;
        position: absolute !important;
        font-size: 10px !important;
        line-height: 0.7 !important;
    }
    
    /* ページネーション */
    .pagination a,
    .pagination span,
    .ec-pager li a,
    .ec-pager li span {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
    }
    
    /* タブ */
    .nav-tabs a,
    .tab a,
    [role="tab"] {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
    
    /* ドロップダウンメニュー */
    .dropdown-item,
    .dropdown a {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* ========================================
   3. フォーカス・アクティブ状態の視覚化
   ======================================== */
@media screen and (max-width: 767px) {
    /* フォーカス時のアウトライン - 操作要素のみ */
    button:focus,
    .btn:focus,
    a.ec-blockBtn:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #4A90E2 !important;
        outline-offset: 2px !important;
    }
    
    /* アクティブ状態の視覚フィードバック - ボタンのみ */
    button:active,
    .btn:active,
    .ec-blockBtn:active,
    .ec-inlineBtn:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
}

/* ========================================
   4. 読みやすさの向上
   ======================================== */
@media screen and (max-width: 767px) {
    /* 段落間の余白 */
    article p + p,
    .ec-layoutRole p + p {
        margin-top: 1em !important;
    }
    
    /* リスト項目の余白 */
    article li + li,
    .ec-layoutRole li + li {
        margin-top: 0.5em !important;
    }
    
    /* 定義リストの余白 */
    dt {
        font-weight: bold !important;
        margin-top: 1em !important;
        margin-bottom: 0.5em !important;
    }
    
    dd {
        margin-left: 0 !important;
        margin-bottom: 1em !important;
    }
}

/* ========================================
   5. 特定要素の最適化
   ======================================== */
@media screen and (max-width: 767px) {
    /* 商品タイトル */
    .ec-shelfGrid__title,
    .ec-productRole__title {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 0.5em !important;
    }
    
    /* 価格表示 */
    .ec-price,
    .price {
        font-size: 18px !important;
        line-height: 1.5 !important;
        font-weight: bold !important;
    }
    
    /* エラーメッセージ */
    .error,
    .alert,
    .ec-errorMessage {
        font-size: 16px !important;
        line-height: 1.8 !important;
        padding: 12px !important;
    }
    
    /* ヘルプテキスト */
    .help-text,
    .hint,
    .ec-input .help {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-top: 0.5em !important;
    }
}