@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: Chango;
    src: url(../font/Chango/Chango-Regular.ttf);
}

@font-face {
    font-family: Zen_Kurenaido;
    src: url(../font/Zen_Kurenaido/ZenKurenaido-Regular.ttf);
}

/* 背景アニメーション */

    /* ここから泡 */
        .bubble-background {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        /* 泡の見た目 */
            .bubble {
                position: absolute;
                bottom: -50px;
                background-color: transparent;
                border-radius: 50%;
                pointer-events: none;
                box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
                animation: bubble 12s linear infinite;
            }

        /* 泡の一番明るい部分を疑似要素で表現 */
            .bubble::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                transform: scale(0.25) translate(-70%, -70%);
                background: radial-gradient(rgba(255,255,255, 0.5), transparent);
                border-radius: 50%;
            }

        /* 泡が上に浮かび上がっていくアニメーション */
            @keyframes bubble {
            0% {
                transform: translatY(0);
                opacity: 1;
            }
            99% {
                opacity: 1;
            }
            100% {
                transform: translateY(-200vh);
                opacity: 0;
            }
            }
    /* ここまで泡 */

    /* ここから星 */

        /* 星空の背景のスタイル */
            .stars {
            position: relative;
            width: 100%; /* 星空の横幅 */
            overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
            }

        /* 星のスタイル */
            .star {
                position: absolute;
                display: block;
                background-color: #fff; /* 星の色 */
                border-radius: 50%;
                box-shadow: 0 0 4px 2px rgba(#fff, 0.2); /* 星の影 */
                opacity: 0;
                animation: twinkle 7s infinite;
                
            }

        /* 星がキラキラ光るアニメーション */
            @keyframes twinkle {
            0% {
                opacity: 0;
            }

            50% {
                transform: scale(1.1);
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: scale(1);
            }
            }

    /* ここまで星 */

/* 背景アニメーション */


body {
    background: linear-gradient(180deg, rgba(5, 71, 94, 1) 41%, rgba(12, 36, 45, 1) 56%, rgba(16, 16, 16, 1) 70%);
}

/* ここかヘッダー */

    header {
        display: flex;
        width: 100%;
        top: 0;
        font-family: Chango;
        font-weight: 10;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        border-bottom: 0.1vw solid rgba(255, 255, 255, 0.7);
    }

        header h1 {
            width: 7%;
            margin-left: 5%;
        }

            header h1 a img {
                width: 100%;
            }

        header nav ul {
            display: flex;
            list-style-type: none;
            width: 100%;
            margin-top: 3.5%;
            margin-left: 90%;
        }

            header nav ul li {
                padding-right: 5%;
            }

                header nav ul li a {
                    display: block;
                    line-height: 3;
                    text-decoration: none;
                    width: 10vw;
                    text-align: center;
                    color: #006284;
                    /* 縹色 */
                    font-size: 1.2vw;
                    font-family: Chango;
                    border-top: 0.1vw solid #006284;
                    border-bottom: 0.1vw solid #006284;
                    transition: 1s;
                    /* background-color: antiquewhite; */
                }

                header nav ul li a:hover {
                    color: #FFB11B;
                    border-top: 0.1vw solid #FFB11B;
                    border-bottom: 0.1vw solid #FFB11B;
                    /* 山吹色 */
                    transition: 0.6s;
                }

/* ここまでヘッダー */

/* ここからメイン */

    main {
        z-index: 1;
        padding-top: 5%;
    }

    main section {
        z-index: 2;
        width: 88%;
        margin-top: 6%;
        margin-left: auto;
        margin-right: auto;
        padding: 2%;

        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    }

        main section a {
            display: block;
            width: 95%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 3.5%;
            padding: 1%;

            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }

            main section a img {
                width: 100%;
            }

        /* 説明欄 */
        main section .section-flex {
            display: flex;
            width: 95%;
            margin-left: auto;
            margin-right: auto;
            color: #fff;
        }

            /* 左側 */
            main section .section-flex .section-left {
                width: 45%;
            }

                /* 作品名とカラー */
                main section .section-flex .section-left .color {
                    display: flex;
                    margin-bottom: 2%;
                }

                    main section .section-flex .section-left h2 {
                        padding-top: 1%;
                        font-size: 1.7vw;
                    }

                    main section .section-flex .section-left .color .color1 {
                        width: 4%;
                        margin-left: 7%;
                        margin-right: 2%;
                        padding: 2%;
                        background-color: #e5e1dc;
                        border-radius: 4vw;
                        border: 0.2vw solid rgba(255, 255, 255, 0.3);
                        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                    }

                    main section .section-flex .section-left .color .color2 {
                        width: 4%;
                        margin-right: 2%;
                        padding: 2%;
                        background-color: #5f6527;
                        border-radius: 4vw;
                        border: 0.2vw solid rgba(255, 255, 255, 0.3);
                        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                    }

                    main section .section-flex .section-left .color .color3 {
                        width: 4%;
                        margin-right: 2%;
                        padding: 2%;
                        background-color: #ba8b3f;
                        border-radius: 4vw;
                        border: 0.2vw solid rgba(255, 255, 255, 0.3);
                        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                    }

                    main section .section-flex .section-left .color .color4 {
                        width: 4%;
                        padding: 2%;
                        background-color: #4e4449;
                        border-radius: 4vw;
                        border: 0.2vw solid rgba(255, 255, 255, 0.3);
                        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                    }

                 main section .section-flex .section-left h3 {
                    padding-top: 7%;
                    margin-bottom: 2%;
                    font-size: 1.7vw;
                 }    

            


            /* 右側 */
            main section .section-flex .section-right {
                width: 50%;
            }


            main section .section-flex .section-right h3 {
                padding-top: 1%;
                font-size: 1.7vw;
            } 

    

/* ここまでメイン */

/* ここからフッター */



/* ここまでフッター */