.star {
    color: #FF0000;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

h3 {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

img {
    width: 100%;
}

header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem;
    background: linear-gradient(0deg, #ffffff00, #33333399);
    backdrop-filter: blur(5px);
    color: #fff;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    p {
        font-size: 1.5rem;
        font-weight: bold;
    }
    nav::after {
        display: block;
        content: "≡";
        font-size: 2rem;
        cursor: pointer;
    }
    nav > ul {
        display: none;
    }
}


main {
    #hero-visual {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        height: 100vh;
        width: 100vw;
        background-image: url('../resources/hero.jpg');
        background-size: cover;
        background-position: center;
        color: #fff;
        font-size: 2rem;
        padding-left: 3rem;
        h1 {
            font-weight: bold;
            .jp {
                display: block;
                line-height: 8rem;
            }
        }
    }

    #welcome {
        display: flex;
        flex-flow: column wrap;
        width: 90vw;
        gap: 3rem;
        justify-content: center;
        margin: 0 auto;
        text-align: center;
        padding: 50px 0;
        p {
            word-break: normal;
            padding: 50px;
            width: 90%;
            margin: 0 auto;
            text-align: left;
            border-radius: 10px;
            border: #E7EAED 2px solid;
        }
    }

    #concept {
        display: flex;
        flex-flow: column wrap;
        gap: 3rem;
        >div {
            display: flex;
            flex-flow: column wrap;
            width: fit-content;
            justify-content: center;
            margin: 0 auto;
            width: 90%;
            >div {
                display: flex;
                flex-flow: column wrap;
                justify-content: space-between;
                padding: 3rem;
                border-radius: 0 0 10px 10px;
                border: #E7EAED 2px solid;
                background-color: #F6F7F8;
            }
        }
        >div:nth-child(3) {
            flex-direction: row-reverse;
        }
        .concept-img {
            overflow: hidden;
            border-radius: 10px 10px 0 0;
            border: #E7EAED 2px solid;
            background-color: #F6F7F8;
        }
        section {
            display: flex;
            flex-flow: column wrap;
            gap: 3rem;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            padding: 50px 0;
            p {
                padding: 50px;
                margin: 0 auto;
                text-align: left;
                border-radius: 10px;
                border: #E7EAED 2px solid;
                background-color: #F6F7F8;
            }
        }
    }

    #usage {
        ol {
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            width: 90%;
            margin: 0 auto;
            gap: 3rem;
            padding: 50px 0;
            li {
                display: flex;
                flex-flow: column wrap;
                justify-content: center;
                align-items: center;
                gap: 1rem;
                padding: 1rem;
                border-radius: 10px;
                border: #E7EAED 2px solid;
                background-color: #F6F7F8;

                &::after {
                    content: '';
                    background-size: contain;
                    background-repeat: no-repeat;
                    display: flex;
                    flex-flow: column wrap;
                    justify-content: center;
                    width: 10rem;
                    height: 10rem;
                }

                &:first-child::after {
                    background-image: url('../resources/drink.png');
                }

                &:nth-child(2)::after {
                    background-image: url('../resources/touch.png');
                }

                &:last-child:after {
                    background-image: url('../resources/check.png');
                }
            }
        }
    }

    /* 見やすさのため分離 */
    #usage { 
        >table {
            width: 90%;
            margin: 0 auto;
            border-collapse: separate;
            background-color: #F6F7F8;
            border: #E7EAED 2px solid;
            border-radius: 10px;
            text-align: center;

            & > tbody > tr > td {
                display: flex;
                justify-content: end;
                padding: 2rem 3rem;
            }

            th, td {
                padding: 10px;
                vertical-align: middle;
            }

            .point {
                font-size: 0.8rem;
            }

            .amount {
                text-align: right;
            }
        }
    }

    #foods {
        display: flex;
        flex-flow: column wrap;
        gap: 3rem;
        padding: 50px 0;

        div {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            gap: 4rem;
            >div {
                display: flex;
                flex-flow: column wrap;
                justify-content: space-between;
                gap: 2rem;
                padding: 2rem;
                width: 90%;
                border-radius: 10px;
                border: #E7EAED 2px solid;
                background-color: #F6F7F8;
            }
        }
    }

    #access {
        margin: 0 auto;
        display: flex;
        flex-flow: column wrap;
        gap: 3rem;
        padding: 50px 0;

        >div {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            gap: 3rem;
            margin: 0 auto;
            div {
                display: flex;
                flex-flow: column wrap;
                justify-content: space-between;
                width: 90%;
                gap: 1rem;
                padding: 3rem;
                border-radius: 10px;
                border: #E7EAED 2px solid;
                background-color: #F6F7F8;
            }
            iframe {
                display: block;
                width: 90%;
                height: 30rem;
                border-radius: 10px;
                border: #E7EAED 2px solid;
            }
        }
    }
}

footer {
    text-align: center;
    padding: 2rem;
    background-color: #F6F7F8;
}