@charset "utf-8";

/* ここから　3ページ同じどころ */
html {
    scroll-behavior: smooth;
}

.spslider,
#spslider {
    display: none;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    line-height: 1.8;
    max-width: 100%;
    font-family: "Shippori Mincho", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* header start */
header {
    >p {
        width: 80px;
        position: absolute;
        left: 80px;
        top: 15px;
    }

    >h1 {
        font-size: 30px;
        font-weight: bold;
        margin: 0 200px;
    }

    /* header nav stsrt */
    >nav {
        background-color: #D9D9D9;
        /* position: fixed;
        z-index: 1; */
        padding: 10px;

        >ul {
            display: flex;
            justify-content: space-evenly;

            >li {
                font-size: 20px;
                font-weight: bold;

                >a:hover {
                    text-decoration: underline double;
                }
            }

        }
    }

}

/* ここまで同じどころ */

main {

    h2 {
        font-size: 20px;
        font-weight: bold;
        margin: 20px;
    }

    >.textarea {
        background-image: url(../images/topimageback.jpg);
        display: flex;
        justify-content: center;


        >section {
            background-color: #D9D9D9;
            text-align: center;
            display: grid;
            grid-template-columns: 40% 60%;
            margin: 100px 0;
            padding: 20px 0;
            width: 100%;

            >img {
                margin: auto;
            }

            >div {
                margin: auto 40px;

                >h2 {
                    text-align: center;

                    >.onlySP {
                        display: none;
                    }

                }

                >p {
                    text-align: center;
                    font-size: 15px;
                    margin-bottom: 20px;

                }

            }

        }
    }

    >.news {
        display: grid;
        grid-template-columns: 40% 58%;
        gap: 2%;
        margin: 20px;
        max-width: 100%;

        & section {
            background-color: #D9D9D9;

            >ul {
                text-align: left;
                margin: 0 20px;

                & span:hover {
                    font-size: 20px;
                    text-decoration: underline double;
                }
            }

            & .bag-link {
                color: #ffffff;
                display: inline-block;
                height: 347px;
                width: 100%;
                background-image: url(../images/topimageshop.jpg);
                /* background-size: cover; */
                background-repeat: no-repeat;
            }

            & .bag-link:hover {
                transform: scale(1.05);

            }

        }
    }

    article {
        margin: 0 20px;

        >div {
            display: grid;
            gap: 40px;
            padding: 20px;

            >.menuPhoto {
                display: flex;
                justify-content: space-around;
                margin: 20px 0;

                & img:hover {
                    transform: scale(1.2);
                }
            }

            >li,
            p {
                text-align: center;
            }
        }
    }

}

footer {
    text-align: center;
    margin: 30px 0;
}

/* ここからレスポンシブ対応デザイン */

@media screen and (max-width: 393px) {

    main .textarea section {

        display: block;

    }

    .pcslider,
    #pcslider {
        display: none;
    }

    .spslider,
    #spslider {
        display: block;
    }

    header nav {
        width: 100%;
    }

    header h1 img,
    header .slider img,
    /* main .textarea section img, */
    main article {
        width: 100%;
    }

    main .news {
        display: block;
    }

    body {
        font-size: 16px
    }

    main h2 {
        font-size: 25px;
        margin-bottom: 20px;

    }

    main article div .menuPhoto {
        display: block;


    }

    main .textarea section div h2 .onlySP {
        display: block;
    }












    /* スマホここまで */

}