@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;
    }

/*トップ画像*/
.hero-section {
    height: 300px;
    & .hero-content {
        gap: 24px;
        .hero-caption {
            font-size: 12px;
        }
        .hero-imag {
            width: 120px;
        }
    }
}

.hero-section-2 {
    margin: var(--block-margin-sp);
    .hero-caption{
        padding: 0;
    }
}

/*商品一覧*/
    .product-section{
        margin: var(--block-margin-sp);
        .product-list {
            align-items: normal;
            .product-item {
                max-width: 80px;
                margin: 8px 0px;
                p{
                    margin: 8px 0px 0px 0px;
                    font-size: small;
                    width: 120px;
                }
            }
        }
    }
/*ボタン*/
    .link_button {
        .button {
            padding: 8px 16px;
            font-size: larger;
        }
    }
/* 特徴 */
    .Details {
        margin: var(--block-margin-sp); 
        .explanation_dox {
            height: 400px;
            justify-content: center;
            padding: 4px;
            article {
                gap: 24px;
                flex-wrap: wrap;
                justify-content: center;
                margin-top: 8px;
                align-content: center;
                .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);
    }

/*FAQ*/
    .faq-section {
        .faq-question {
            height: 80px;
            h2 {
                font-size: large;
            }
        }
    }

/*フッダー*/
    .lp-footer {
        .footer-content {
            .title{
                h1 {
                    margin: 8px 0;
                }
            }
            .footer-bottom{
                margin: 0;
            }
        }
    }
}