/* ==========================================================================
   products/index.php のページ固有CSS
   出典: 元HTMLの <style> をそのまま外部化したもの。値の統合・整理はしていない。
   ========================================================================== */

    body {
        color: #2B2B2B;
        background-color: #FFFFFF;
        font-family: 'Noto Sans JP', sans-serif;
        line-height: 1.8;
        -webkit-font-smoothing: antialiased;
    }
    
    /* Focus Outline Accessibility */
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
        outline: 2px solid #3F6654;
        outline-offset: 2px;
    }

    /* Image Fade-in Animation */
    .img-fade-in {
        animation: fadeIn 0.35s ease-in-out;
    }

    /*
     * メイン画像は正方形枠に収める。chrome.css の img { height: auto } と
     * 縦長写真が重なると overflow で下端が切れるため、ID指定で上書きする。
     */
    #main-product-img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        object-fit: contain;
        object-position: center;
    }
    .thumbnail-btn img,
    [id^="feature-img-"] {
        object-fit: contain;
        object-position: center;
    }
    @keyframes fadeIn {
        from { opacity: 0.5; transform: scale(0.99); }
        to { opacity: 1; transform: scale(1); }
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #F7F8F6;
    }
    ::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #3F6654;
    }