@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Document */
body {
    background-color: #FFFFFF;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
}



.header {
    width: 100%;
}

.h-box {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-inline: auto;
    padding: 1rem 0;
}

.header-nav {
    display: flex;
    justify-content: flex-end;

}

.header-nav ul {
    display: flex;


    li {
        list-style: none;
        margin: auto 0;

        a {
            text-decoration: none;
            margin-left: 61.2px;
            font-size: 16px;
        }
    }
}

.main-img {
    width: 100%;
    height: 100vh;
    background-image: url(../images/Mask\ group.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

main h2 {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 36px;
    font-weight: 450;
}

.pickup {
    padding-top: 130px;
    margin-bottom: 146px;
}


.f-box {
    width: min(100%, 1209px);
    margin-inline: auto;
}

.item-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 27px;
    list-style: none;
    margin-bottom: 10rem;

    li {
        box-shadow: 0px 0px 8px 4px #CCCCCC;
    }

    dl {
        padding: 30px;

        dt {
            margin-bottom: 20px;
            font-size: 12px;

            dd {
                margin-bottom: 20px;
                font-size: 14.4px;
            }
        }
    }

    p {
        padding-top: 20px;
        text-align: right;
    }

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

.item8 {
    grid-row: 3 / 4;
    grid-column: 2 / 4;

    img {
        height: 257px;
        object-fit: cover;
    }
}

.item9 {
    display: none;
}

/* .item8 {
    grid-column: span 2;
} */
.map {
    width: min(100%, 968px);
    height: auto;
    margin: auto auto;
    margin-bottom: 194px;

    p {
        font-size: 14.4px;
    }

}

.m-box {
    iframe {
        width: 100%;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
    }
}

.footer {
    background-image: url(../images/f-img.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;

}

.ft-box {
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    height: 350px;
    text-align: center;

    margin: auto 0;
}

.b-box {
    padding-top: 95.5px;

    h2 {
        margin-bottom: 24px;
        font-size: 24px;
    }

    button {
        cursor: pointer;
        background-color: #F13C68;
        font-size: 20px;
        border: none;
        padding: 16px 20px;
        color: #FFFFFF;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 16px;

    }
}

.black {
    background-color: black;
    width: 100%;
    height: 45px;

    p {
        color: #FFFFFF;
        text-align: center;
        padding-top: 10px;
    }
}

@media(max-width: 769px) {
    .h-box {
        margin-inline: auto;
        padding: 20px 0;
        width: 100%;

        img {
            margin-left: 16px;
        }
    }


    .header-nav {
        display: none;
    }

    .main-img {
        width: 100%;
        height: 100vh;
        background-image: url(../images/Mask\ group2.jpg);
        /* background-position: center;
        background-repeat: no-repeat;
        background-size: cover; */
    }

    main h2 {
        text-align: center;
        margin-bottom: 20px;
        font-size: 24px;
    }

    .pickup {
        padding-top: 79px;
        margin-bottom: 100px;
    }

    .item-list {
        width: 100%;
        display: block;
        margin-bottom: 10rem;
        padding: 0 16px;

        li {
            box-shadow: 0px 0px 8px 4px #CCCCCC;
            margin-bottom: 26px;
        }

        dl {
            padding: 30px;

            dt {
                margin-bottom: 20px;
                font-size: 12px;

                dd {
                    margin-bottom: 20px;
                    font-size: 14.4px;
                }
            }
        }

        p {
            padding-top: 20px;
            text-align: right;
        }

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

        :nth-child(4) {
            margin-bottom: 100px;
        }
    }

    .item9 {
        display: block;
    }

    .map {
        margin-bottom: 75px;

        h2 {
            font-size: 36px;
        }

        p {
            font-size: 14.4px;
            font-weight: 600;
            margin-left: 18px;
        }
    }

    .m-box {

        iframe {
            width: 100%;
            height: auto;
            aspect-ratio: 16/9;
        }
    }

    .footer {
        background-image: url(../images/f-img.jpg);
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}