:root {
    --colorOne: hsl(340 50% 80%);
    --colorTwo: hsl(210 50% 80%);
    --colorThree: hsl(110 50% 80%);
    --colorFour: hsl(60 50% 80%);
}

body {
    /* padding-top: calc(1vh + 10px); */

    header {
        overflow-x: hidden;

        background-image: url("/images/general/teeth2.svg");
        background-size: contain;
        background-repeat: no-repeat;

        /* background: #80aba9; */

        .headerFilter {
            width: 100vw;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.8);
            background-color: rgba(25, 25, 112, 0.07);
            background-image: url("/images/general/teeth2.svg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            position: absolute;
            z-index: 2;
            top: 0;
        }

        h1 {
            font-size: calc(1.5vw + 24px);
            font-weight: bold;
            letter-spacing: 0.1em;
            width: calc(15vw + 180px);
            width: 100vw;
            text-align: center;
            padding: 0;
            margin: 0;
            height: 13vh;
            line-height: 13vh;
            font-family: "Zen Maru Gothic", sans-serif;
        }



        height: 100vh;

        article {
            width: calc(50vw + 200px);
            max-width: 100vw;
            /* background: rgba(255, 255, 255, 0.7); */
            position: absolute;
            top: 50vh;
            left: 50vw;
            transform: translate(-50%, -50%);
            z-index: 3;
            padding: 3vw;

            span,
            p {
                /* background: lemonchiffon; */
                line-height: 2;
                font-size: calc(0.7vw + 18px);
            }

            .f {
                margin-top: calc(18vh - 80px);
                margin-bottom: calc(5vh + 0px);
            }
        }

        .container {
            display: none;
        }




    }

    main {

        h3 {
            text-align: center;
            font-weight: bold;
            padding: calc(8vh + 20px) 0 calc(2vh + 20px);
            letter-spacing: 0.1em;
            font-size: calc(0.7vw + 18px);
            font-family: "Zen Maru Gothic", sans-serif;
        }

        h4 {
            text-align: center;
            font-weight: bold;
            padding: calc(8vh + 20px) 0 calc(2vh + 20px);
            letter-spacing: 0.05em;
            font-size: calc(0.6vw + 17px);
            font-family: "Zen Maru Gothic", sans-serif;
        }





        article {
            width: calc(50vw + 200px);
            max-width: 93vw;
            margin: 0 auto;



            .dentureDialog {
                width: 100%;
                height: 100%;
                max-width: none;
                max-height: none;
                opacity: 0;
                scale: 0.75;
                position: fixed;
                top: 0;
                padding: calc(2vw + 2vh);
                transition: .4s;
                /* padding: calc(2vw + 2vh) calc(4vw + 4vh); */

                section {
                    width: calc(60vw + 80px);
                    padding: 0 calc(2vw + 2vh);
                    margin: 0 auto;
                }
            }

            .dentureDialog[open] {
                opacity: 1;
                scale: 1;
            }

            .dentureDialog.is-closing {
                scale: 0.75;
                opacity: 0;
                animation: fadeOut 0.3s ease forwards;
            }



            @starting-style {
                .dentureDialog[open] {
                    opacity: 0;
                    scale: 0.75;
                }
            }


            .dentureCloseButton {
                position: fixed;
                z-index: 999;
                z-index: 999999999;
                top: calc(var(--clickPosition) + 10px);
                left: calc(100vw - var(--clicksize) - calc(var(--clickPosition)));
                width: var(--clicksize);
                height: var(--clicksize);

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: transparent;


                transition: background-color 2s ease;
                transform: rotate(0deg);
                outline: none;
            }

            .dentureCloseButton::before,
            .dentureCloseButton::after {
                content: "";
                width: var(--linewidth);
                height: var(--linethickness);
                background: black;
                border-radius: 999px;

                position: absolute;
                top: 50%;
                left: 50%;

                transform: translate(-50%, -50%);

                transition: transform 0.4s ease;
            }

            .dentureCloseButton.clickCross {
                box-shadow: none;
            }

            .dentureCloseButton::before {
                transform: translate(-50%, calc(-50% - var(--linespacing) / 2));
                transform: translate(-50%, -50%) rotate(45deg);
            }

            .dentureCloseButton::after {
                transform: translate(-50%, calc(-50% + var(--linespacing) / 2));
                transform: translate(-50%, -50%) rotate(-45deg);
            }





            .dentureImages {
                margin-top: calc(5vh + 30px);
                width: 100%;
                width: calc(50vw + 200px);
                height: calc(12.5vw + 50px);
                display: flex;


                li {
                    list-style: none;
                    width: 25%;
                    transition: all 0.4s;
                    overflow: hidden;

                    .dice {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                        transform-style: preserve-3d;

                        img,
                        button {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            backface-visibility: hidden;
                            display: block;
                        }

                        img {
                            transform: rotateX(0deg) translateZ(100px);
                            object-fit: cover;
                            padding: 10%;
                        }

                        button {
                            transform: rotateX(-180deg) translateZ(100px);
                            cursor: pointer;
                            text-align: center;
                            font-weight: bold;
                            letter-spacing: 0.1em;
                            font-family: "Zen Maru Gothic", sans-serif;
                        }
                    }

                    /* .dice:hover {
                        transform: rotateX(-180deg);
                    } */

                }

                li:hover .dice {
                    transform: rotateX(-180deg);
                }

                li:active .dice {
                    transform: rotateX(-180deg);
                }


                li:nth-child(1) {
                    background: var(--colorOne);
                }

                li:nth-child(2) {
                    background: var(--colorTwo);
                }

                li:nth-child(3) {
                    background: var(--colorThree);
                }

                li:nth-child(4) {
                    background: var(--colorFour);
                }

                /* li:nth-child(1):hover {
                    background: var(--colorOne);
                }

                li:nth-child(2):hover {
                    background: var(--colorTwo);
                }

                li:nth-child(3):hover {
                    background: var(--colorThree);
                }

                li:nth-child(4):hover {
                    background: var(--colorFour);
                } */


            }

            h2 {
                padding: calc(10vh + 20px) 0 calc(7vh + 20px);
                font-size: calc(1.5vw + 19px);
                text-align: center;
                font-weight: bold;
                font-family: "Noto Sans JP", sans-serif;
                font-family: "Noto Serif JP", sans-serif;
                font-family: "Zen Maru Gothic", sans-serif;
            }

            p {
                line-height: 1.9;
            }

            span {
                background: linear-gradient(to top, moccasin 25%, transparent 25%);
                font-weight: bold;
            }

            img {
                width: 49%;
                display: inline;
            }
        }

        .dentureTable1 {
            width: 100%;
            margin-top: calc(5vh + 30px);

            thead,
            tbody {
                tr {

                    th,
                    td {
                        /* font-weight: bold; */
                        border: solid 1.5px black;
                        padding: 10px;
                        text-align: center;
                    }
                }
            }

            .oo {
                background: hsl(200, 100%, 98%);

            }

            .o {
                background: hsl(100, 100%, 98%);
            }

            .d {

                background: hsl(30, 100%, 98%);
            }

            .x {
                background: hsl(100, 100%, 95%);
                background: hsl(300, 100%, 98%);
            }
        }

        thead {
            /* color: white;
            background: cornflowerblue; */
            font-weight: normal;
        }

    }
}