@charset "utf-8";

@media (max-width: 768px) {
    main {
        margin: 0 8%;
    }

    .nav-menu, .cta{
        display: none;
    }

/*スマホのメニュー*/
    .phone-nav-menu {
        display: flex;
        gap: 8px;
        a{
            display: block;
        }
        .material-symbols-outlined {
            font-size: 40px;
            color: white;
        }
        .sub-nav-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 70%;
            height: 100%;
            background-color: #333;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: right 0.3s ease;
            z-index: 999;
            a {
                color: white;
                text-decoration: none;
                font-size: x-large;
                padding: 24px 0;
                border-bottom: 1px solid #444;
                width: 100%;
                text-align: center;
            }
            .close-icon {
                color: white;
                position: absolute;
                top: 40px;
                right: 20px;
                cursor: pointer;
            }
        }
        .sub-nav-menu.active {
            right: 0; /* メニューが表示される時の位置 */
        }
    }

    article{
        gap: 0;
    }

    .explanation_text {
        margin-left: 8px;
    }
/*4つの画像*/
    .image-grid {
        position: relative;
        width: 100%;
        height: 210px;
        overflow: hidden;
        .image-item {
            position: absolute;
            width: 100%;
            height: auto;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            animation-duration: 0s; 
            animation-fill-mode: none; 
            .image-item img {
                width: 100%;
                height: auto;
                display: block;
                object-fit: cover;
            }
        }
        .image-item.active {
            opacity: 1;
        }
    }
/*トップ画像*/
    .main-background{
        margin: var(--block-margin-sp);
        height: 210px;
        .main-text {
            font-size: medium;
        }
    }
/*商品一覧*/
    .product-section{
        margin: var(--block-margin-sp);
        .product-list {
            align-items: normal;
            .product-item {
                max-width: 80px;
                p{
                    margin: 8px 0px 0px 0px;
                    font-size: medium;
                    width: 120px;
                }
            }
        }
    }
/*ボタン*/
    .link_button {
        .button {
            padding: 8px 16px;
            font-size: larger;
        }
    }
/* 特徴 */
    .Details {
        margin: var(--block-margin-sp); 
        .explanation_dox {
            height: 330px;
            justify-content: center;
            padding: 0px;
            article {
                gap: 0;
                flex-wrap: wrap;
                justify-content: center;
                margin-top: 8px;
                .box_image {
                    img {
                        height: 120px;
                    }
                }
            }
            .explanation_text {
                h2 {
                    font-size: small;
                }
                p {
                    margin: 8px 0 0;
                    line-height: normal;
                    font-size: small;
                }
            }
        }
    }
/*動画*/
    .movie {
        margin: var(--block-margin-sp);
    }
/*表の非表示*/
    .performance{
        display: none;
    }
/*フッダー*/
    .lp-footer {
        .footer-content {
            .title{
                h1 {
                    margin: 8px 0;
                }
            }
            .footer-bottom{
                margin: 0;
            }
        }
    }
}