:root {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(to right,
            #2f3d54 0%,
            #1e243d 10%,
            #101528 30%,
            #101528 70%,
            #1e243d 90%,
            #2f3d54 100%);
    color: #dde;
}

#scroll_to_top_button {
    display: flex;
    align-items: end;
    position: fixed;
    bottom: 5vw;
    right: 0px;
    height: 100px;
    width: 70px;
    background-size: cover;
    background-image: url(./images/item_2.png);
    background-position: 80% 50%;
    filter: drop-shadow(0 0 5px #000c);
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;

}

header {
    /*左辺プロパティ: 右辺値;、display: non;で非表示にできる*/
    display: flex;
    /*->親要素の中の子要素のflex(1次元・横並びの配置)を操作しますよ*/
    justify-content: space-between;
    /*どう操作するか->間にスペースつけます*/
    padding: 0.8rem;

    @media screen and (max-width: 520px) {
        flex-direction: column;
        align-items: center;
        font-size: 0.8em;
    }
}


h2 {
    text-align: center;
    font-size: 2rem;
    /*remはrootで指定した値の何倍かという相対的なサイズ単位*/

    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;

}

#main_visual_wrapper {
    position: relative;

    #main_visual {
        max-height: calc(100vh - 48px);
        width: 100%;
        object-fit: cover;
        object-position: 50% 35%;
    }

    >div {
        position: absolute;
        top: 4%;
        left: 50%;
        transform: translateX(-50%);
        line-height: 1.4;
        filter: drop-shadow(0 0 5px #0005);
        font-family: "Zen Kaku Gothic Antique", sans-serif;
        width: 100%;
    }

    h2 {
        font-size: 9vw;
        letter-spacing: 2rem;
        padding-left: 2rem;
    }

    span {
        text-align: center;
        display: block;
        font-size: 3vw;
        letter-spacing: 0.1rem;
        padding-left: 0.1rem;
    }

}


#about {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;

    h2 {
        letter-spacing: 1rem;
        padding-left: 0.4rem;
        margin-bottom: 1rem;
    }

    p {
        width: 21rem;
        max-width: 90%;
        margin-top: 1rem;
    }
}

#contents {
    margin-top: 6rem;

    h2 {
        letter-spacing: 0.4rem;
        padding-left: 0.4rem;

    }

    div {
        margin: 2rem auto 0;
        width: 80%;
        max-width: 800px;
    }

    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* repeat(3,1fr)1 は 1fr 1fr 1fr 、係数みたいだ*/
        /* 一行目がおわったら同じ指定で次の列も繰り返す */
        /* frはfraction(比・分数) */
        grid-auto-rows: 210px;
        gap: 1.5rem 1.5rem;

        li {
            border-left: 8px dashed #dde6;
            border-right: 8px dashed #dde6;
            padding: 1rem;

            span {
                display: block;
                font-weight: 700;
                font-size: 1.2em;
                margin-bottom: 0.5em;

            }
        }
    }

    >div>p {
        text-align: right;
        font-size: 1.2rem;
        margin-top: 1rem;
        font-family: "League Spartan", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
    }

    @media screen and (max-width: 650px) {
        ul {
            grid-template-columns: repeat(1, 1fr);
        }

    }


}

#products {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6rem;

    h2 {
        letter-spacing: 0.4rem;
        padding-left: 0.4rem;
    }

    #products_wrapper {
        width: 80%;
        max-width: 800px;
        margin: 2rem auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9em;
        gap: 2rem;
        /* column-gap はすきまをつくるよ。 gap,row-gapのおともだち*/

        img {
            object-fit: contain;
            border-radius: 2px;
        }

        >* {
            width: 50%;
        }

        #image_wrapper {
            display: flex;
            justify-content: flex-end;
        }

        #products_info {
            display: flex;
            flex-direction: column;
            row-gap: 1em;
        }

        h3 {
            font-size: 3em;
            line-height: 1.2;
        }

        #note {
            font-size: 0.6em;
        }
    }

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

        /* @media screen は、端末やウィンドウの表示幅が狭い場合にはこうしてね♡という条件付きの指示だよ */
        #products_wrapper {
            flex-direction: column;

            >* {
                /* アスタリスクは、直下の全ての要素に！という全体化魔法や */
                width: 75%;
            }

            #image_wrapper {
                justify-content: center;
            }

            #products_info {
                text-align: center;
            }
        }
    }
}

#planner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6rem;

    h2 {
        letter-spacing: 0.6rem;
        padding-left: 0.6rem;
    }

    a {
        text-decoration: underline;
    }

    #planner_wrapper {
        width: 80%;
        max-width: 800px;
        margin: 2rem auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9em;
        gap: 2rem;

        img {
            object-fit: contain;
            border-radius: 50%;
            box-shadow: 3px 5px 0 #f66
        }

        >* {
            width: 50%;
        }

        #icon_wrapper {
            display: flex;
            justify-content: flex-end;
        }

        #planner_info {
            display: flex;
            flex-direction: column;
            row-gap: 1em;
        }

        h3 {
            font-size: 2em;
            line-height: 1.2;
        }
    }

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

        #planner_wrapper {
            flex-direction: column;

            >* {
                width: 75%;
            }

            #icon_wrapper {
                justify-content: center;
            }

            #planner_info {
                text-align: center;
            }
        }
    }
}

footer {
    text-align: center;
    margin-top: 12rem;
    overflow: hidden;
    padding-bottom: 0.7em;
    font-size: 2.2vw;
    /* vw は、画面幅を100vwをした時のサイズ */

    small {
        display: block;
        letter-spacing: 1.2em;
        margin-right: -1.2em;
        text-wrap: nowrap;
    }
}