:root {
    --brakets-max-width: 2175px;
    --contents-max-width: 1600px;
    --common-margin: 20px;
    --menu-padding: 20px;
    --header-height: 100px;
    --header-height-pc: 110px;
    --frame-border-weight: 15px;
    --frame-border: var(--frame-border-weight) var(--main-color) solid;
    --section-width: 87%;
    --section-margin: 80px;
    --h2-base-size: 4rem;
    --infomaion-content-width: 87.5%;
    /* colors */
    --white: #fff;
    --black: #5a5a5a;
    --pure-black: #000;
    --main-color: #92B0FF;
    --sub-color: #FFF849;
    --accent-color: #F5BA23;
    --filter-gradient: linear-gradient(160deg, rgba(251, 213, 251, .6), rgba(149, 233, 243, .6));
}

/*!
 * "honokaMincho" is lisenced under the SIL Open Font License 1.1
 * by https://font.gloomy.jp/honoka-mincho-dl.html
 */
 @font-face {
    font-family: "honokaMincho";
    src: url("./font/Honoka_Shin_Mincho_L.woff2") format("woff2"),
        url("./font/Honoka_Shin_Mincho_L.otf") format("opentwoffype");
}

*,
.san-serif,
.san-serif * {
    font-family: "Hind Siliguri", sans-serif;
}

.serif,
.serif * {
    font-family: "honokaMincho", serif;
}

html {
    color: var(--black);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) * 0.25);

    @media (960px < width) {
        scroll-padding-top: calc(var(--header-height-pc) * 0.25);
    }
}

*, body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
    text-decoration: none;
}

h2 {
    font-size: clamp(67px, calc(100vw /15), 7rem);
    font-weight: 700;
    font-style: normal;
    color: var(--sub-color);
    line-height: 100px;
    white-space: nowrap;
    margin-bottom: 15px;
}

ul {
    list-style: none;
}

body {
    header {
        position: fixed;
        width: 100%;
        height: var(--header-height);
        z-index: 10;

        nav, ul {
            display: flex;
            transition: .3s;
        }

        nav {
            justify-content: end;
            align-items: end;
            width: calc(100% - (var(--common-margin) * 2));
            margin: 0 auto;

            label {
                position: absolute;
                top: 0;
                width: 50px;
                height: 45px;
                padding: 5px;
                margin-top: 20px;
                transition: .3s;
                z-index: 20;

                input {
                    display: none;
                }

                .menu-btn {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-flow: column;
                    justify-content: space-around;
                    align-items: center;

                    span {
                        width: 80%;
                        height: 2.25px;
                        margin: 0 auto;
                        background-color: var(--pure-black);
                        transform-origin: left center;
                        transition: .4s;
                    }

                    &:hover {
                        cursor: pointer;
                    }
                }
            }

            label:has(input:checked) {
                .menu-btn {
                    position: relative;
                    top: 0;
                    left: 5px;

                    span:first-child,
                    span:last-child {
                        width: 82.5%;
                    }

                    span:first-child {
                        transform: rotate(45deg);
                    }

                    span:nth-child(2) {
                        opacity: 0;
                    }

                    span:last-child {
                        transform: rotate(-45deg);
                    }
                }
            }

            ul {
                position: absolute;
                top: 0;
                right: -110%;
                flex-direction: column;
                justify-content: center;
                gap: 30px;
                width: 100vw;
                margin: 0 calc(50% - 50vw);
                height: 100svh;
                background: var(--main-color);
                opacity: 1;

                li {
                    text-align: center;
                    width: auto;
                    padding: 0 var(--menu-padding);
                    transform: skewX(145deg);
                    transition: .3s;

                    a {
                        font-size: 2rem;
                        color: var(--pure-black);
                        transition: .3s;

                        &:hover {
                            color: var(--white);
                        }
                    }

                    &:last-child {
                        border: none;
                    }

                    a {
                        display: block;
                        transform: skewX(-145deg);
                    }
                }
            }

            ul.open {
                right: 0%;
                transition: 0.5s;
            }
            
            ul.hide {
                opacity: 0;
            }
        }
    }

    main, .container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    main {
        overflow: hidden;

        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column;

            .top-image {
                position: relative;
                width: 100%;
                height: 80svh;
                margin: var(--header-height) auto;
                background: url(../img/top.jpg), var(--filter-gradient);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                background-blend-mode: screen;
                z-index: -1;

                .effect {
                    position: relative;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    backdrop-filter: blur(4px);
                    z-index: -2;
                }

                .brackets {
                    position: relative;
                    width: 85vw;
                    max-width: calc(var(--brakets-max-width) + (var(--frame-border-weight) * 2));
                    height: 90svh;
                    top: calc(-80svh - 65px);
                    left: 0;
                    margin: 0 auto;

                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        display: inline-block;
                        width: calc(100% - (var(--frame-border-weight) * 2));
                        height: calc(100% - (var(--frame-border-weight) * 2));
                        max-width: 150px;
                        max-height: 150px;
                        z-index: -1;
                    }

                    &::before {
                        border-top: var(--frame-border);
                        border-left: var(--frame-border);
                        top: 0;
                        left: 0;
                    }

                    &::after {
                        border-bottom: var(--frame-border);
                        border-right: var(--frame-border);
                        bottom: calc(-1 * (50px - var(--frame-border-weight)));
                        right: 0;
                    }

                    @media (960px < width) {
                        &::before,
                        &::after {
                            max-width: 400px;
                            max-height: 400px;
                        }

                        &::after {
                            bottom: 0;
                        }
                    }
                }

                img,
                h1 .img {
                    position: absolute;
                    display: block;
                    object-fit: contain;
                    z-index: 1;
                }

                img.logo {
                    top: -1rem;
                    right: 0;
                    width: min(65%, 1000px);

                    @media (960px < width) {
                        top: -2.5rem;
                        right: 6rem;
                    }
                }

                img.welcome {
                    left: 3rem;
                    bottom: -25px;
                    width: min(65%, 900px);
                    filter: drop-shadow(2px 0 0  var(--white));
                    /* transform: rotate(-10.6deg); */
                }

                @media (960px < width) {
                    img.welcome {
                        bottom: -45px;
                        left: 6rem;
                    }
                }
            }

            div.sub {
                margin: var(--section-margin) auto;

                p {
                    text-align: center;
                    font-size: clamp(35px, calc(100vw /20), 5.5rem);
                    span {
                        font-size: clamp(15px, calc(100vw /20), 2rem);
                    }

                    @media (960px < width) {
                        span {
                            font-size: clamp(15px, calc(100vw /40), 3rem);
                        }
                    }
                }
            }

            section {
                width: var(--section-width);
                max-width: var(--contents-max-width);
                margin: 0 auto;
                overflow: hidden;
                margin-top: var(--section-margin);
                overflow: visible;

                div.section-content {
                    position: relative;
                    top: 0;
                    left: 0;
                    width: 100%;
                    min-height: 100px;
                    padding: 1% 3%;

                    p {
                        font-size: 1.3rem;
                    }
                }
            }

            .infomation {
                margin-top: 0;

                .news {
                    ul {
                        display: flex;
                        flex-flow: column;
                        flex-wrap: wrap;
                        align-items: end;
                        gap: 10px;

                        li {
                            position: relative;
                            top: 0;
                            right: calc(-1 * 5svw);
                            width: 88svw;
                            height: 150px;
                            background: var(--main-color);
                            transition: 0.3s;

                            &:hover {
                                filter: brightness(80%);
                            }

                            .news-item {
                                width: auto;
                                margin: 25px;
                                font-family: "Hind Siliguri", sans-serif;
                                font-weight: 300;
                                color: var(--white);
                                font-size: 18px;

                                &:hover {
                                    cursor: pointer;
                                }

                                .date {
                                    font-size: 1.2rem;
                                    margin-bottom: 10px;
                                }

                                p.news-title {
                                    width: 97%;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    text-overflow: ellipsis;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                }
                            }
                        }
                    }
                }

                .sns {
                    margin-top: var(--section-margin);
                    display: flex;
                    height: 595px;

                    .sns-container {
                        width: auto;
                        height: 480px;
                        position: relative;
                        top: 0;
                        left: calc(-1 * 2svw);
                        display: flex;
                        justify-content: end;
                        align-items: end;

                        div.input-area {
                            position: relative;
                            align-self: stretch;
                            flex-shrink: 0;
                            left: 0px;

                            div.embedded {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                overflow: hidden;
                                z-index: 1;

                                .instagram-media {
                                    height: 100%;
                                }
                            }

                            div.current {
                                z-index: 5;
                            }
                        }

                        .sns-select {
                            width: auto;
                            display: flex;
                            flex-direction: column-reverse;
                            gap:7.5px;

                            .marker {
                                display: grid;
                                place-content: center;
                                height: 62px;
                                background: #5a5a5a6d;
                                color: var(--white);
                                padding: 5px 10px;
                                border-radius: 0 5px 5px 0;

                                &:hover {
                                    cursor: pointer;
                                }

                                &:has(input:checked) {
                                    background: var(--accent-color);
                                    color: var(--pure-black);
                                }
                            }
                        }
                    }
                        
                    @media (960px < width) {
                        .sns-container {
                            left: 0;
                            
                            div.input-area {
                                flex-shrink: 1;
                            }
                        }
                     }
                }
            }

            .introduction {
                div.section-content:nth-child(2) {
                    background: url(../img/intoro-bg.jpg), var(--filter-gradient);
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-blend-mode: screen;
                    width: 100vw;
                    margin: 0 calc(50% - 50vw);
                    padding: 80px 0;
                    clip-path: polygon(15% 0, 100% 0, 100% 60%, 90% 100%, 0 100%, 0 40%);

                    &::before,
                    &::after {
                        position: absolute;
                        color: #000;
                        font-size: clamp(3.5rem, calc(100vw /20), 5.5rem);
                        mix-blend-mode: soft-light;
                        z-index: -2;
                    }

                    &::before {
                        content: "先輩は、確かにいたんだ。";
                        white-space: nowrap;
                        top: 0;
                        left: 0;
                    }

                    &::after {
                        content: "どうして誰も覚えて\Aいないの？";
                        white-space: pre;
                        bottom: 0;
                        right: 0.5rem;
                        text-align: right;
                    }

                    p.charactor-text {
                        padding: 10px;
                        color: var(--white);
                        text-shadow: 0 0 5px var(--black);
                        text-align: center;
                        font-size: clamp(28px, calc(100vw /14), 4rem);
                    }

                    div.embeddings {
                        width: 70%;
                        max-width: 750px;
                        margin: 20px auto;
                        height: 80%;

                        .scenario {
                            font-family: "Hind Siliguri", sans-serif;
                            backdrop-filter: blur(3px);
                        }
                        
                        @media (960px < width) {
                            min-height: 600px;
                        }
                    }
                }
            }

            @media (960px < width) {
                .introduction {
                    div.section-content {
                        clip-path: polygon(11% 0, 100% 0, 100% 30%, 91% 100%, 0 100%, 0 70%);

                        div.embeddings {
                            width: 100%;
                            max-width: calc(var(--contents-max-width) * 0.75);
                            margin-top: -6rem;
                        }
                    }
                }
            }

            .schedule {
                div.section-content {
                    display: flex;
                    justify-content: center;

                    img {
                        width: 95%;
                        object-fit: contain;
                    }
                }
            }

            @media (960px < width) {
                .infomation {
                    display: flex;
                    overflow: hidden;

                    section {
                        width: 50%;
                    }

                    .news,
                    .sns {
                        width: 50%;
                        > div {
                            max-width: 645px;
                        }

                        .sns > div {
                            margin-right: auto;
                        }
                    }

                    .news {
                        overflow: hidden;
                        margin-right: 50px;
                        display: flex;
                        align-items: end;

                        ul {
                            li {
                                right: 0;
                                width: var(--infomaion-content-width);

                                .news-item p.news-title {
                                    width: 100%;
                                }

                                &:hover {
                                    color: var(--main-color);
                                }
                            }
                            
                        }
                    }
                    .sns {
                        margin-top: 0;
                    }
                }

                .schedule {
                    img {
                        max-width: 500px;
                    }
                }
            }
        }
    }

    /* PC menu style */
    @media (960px < width) {
        header {
            position: sticky;
            top: 40px;
            left: 0;
            height: auto;
            margin-top: calc((var(--header-height-pc) * 0.75) - 1rem);
            nav {
                label {
                    display: none;
                }

                ul {
                    position: relative;
                    right: 0;
                    height: auto;
                    width: 65%;
                    min-width: 700px;
                    margin: 0;
                    justify-content: end;
                    align-items: end;
                    gap: 0;
                    flex-direction: row;
                    background: transparent;

                    li {
                        text-align: center;
                        width: auto;
                        padding: 0 var(--menu-padding);
                        border-right: var(--black) 1px solid;
                        transform: skewX(145deg);
                        transition: .3s;

                        a {
                            font-size: 1rem;
                            color: var(--pure-black);
                            transition: .3s;

                            &:hover {
                                color: var(--main-color);
                            }
                        }

                        &:last-child {
                            border: none;
                        }

                        a {
                            display: block;
                            transform: skewX(-145deg);
                        }
                    }
                }
            }
        }

        main {
            margin-top: calc(-1 * (var(--header-height-pc) * 0.75));
            .container .top-image {
                margin-top: var(--header-height-pc);
            }
        }
    }

    footer {
        height: 35px;
        margin-top: var(--common-margin);

        small {
            display: grid;
            place-items: center;
        }
    }
}