* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'MS PMincho', serif;
}
/* 
html {
    scroll-behavior: smooth;
    scroll-padding-top: 25px;
    height: 100%;
    width: 100%;
    background-image: url(URL);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}
 */


body {
    background-color: #000;
    color: white;
    overflow-x: hidden;
}

header {
    
}

main {
    div.spacer {
        height: 100vh;
        background-color: #111;
        justify-content: center;
        justify-items: center;
        text-align: center;
        align-content: center;
        
        img.logo {
            width: 10%;
            opacity: 0;
            transform: calc(1.05);
            transition: opacity 1.8s ease, transform 2s ease;
        }

        img.logo.show {
            opacity: 1;
            transform: scale(1);
        }
    }
    section.hero {
        position: relative;
        height: 200vh;
        background-color: #111;
        div.sticky-area {
            position: sticky;
            top: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;

            img.hero-img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: 1;
                filter: brightness(0.8);
            }

            div.overlay {
                position: absolute;
                inset: 0;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.15);
            }

            div.text {
                position: absolute;
                z-index: 3;
                opacity: 0;
                transform: translateY(40px);
                transition: opacity 1s ease, transform 1s ease;
                color: white;
                text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
                pointer-events: none;
                padding: 1%;
                background-color: #000;
            }

            div.text.show {
                opacity: 1;
                transform: translateY(0);
            }

            div.text-ai {
                top: 1%;
                left: 15%;
                font-size: clamp(3rem, 15vw, 3.25rem);
                font-weight: 700;
                letter-spacing: 0.1em;
            }

            div.text-quality {
                top: 14%;
                left: 15%;
                writing-mode: vertical-lr;
                text-orientation: upright;
                font-size: clamp(1rem, 5vw, 2.75rem);
                font-weight: 700;
                letter-spacing: 0.15em;
                line-height: 1.8;
            }

            div.text-city {
                bottom: 10%;
                right: 13%;
                writing-mode: vertical-lr;
                text-orientation: upright;
                font-size: clamp(2rem, 5vw, 4rem);
                font-weight: 900;
                letter-spacing: 0.2em;
                line-height: 1.6;
            }
        }
    }
    section.after-content {
        min-height: 100vh;
        background-color: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #ccc;
    }
}

footer {
    
}

/* phone */
@media ( max-width: 768px ) {
    
    main {
        
        div.spacer {
            
            img.logo {
                width: 25%;
            }
        }

        section.hero {
            div.sticky-area {
                div.text-ai {
                    top: 12%;
                    left: 7%;
                }

                div.text-quality {
                    top: 25%;
                    left: 7%;
                    height: 35%;
                    font-size: clamp(1rem, 4vw, 2.25rem);
                }

                div.text-city {
                    bottom: 10%;
                    right: 8%;
                    height: 50%;
                    font-size: clamp(4rem, 5vw, 1.5rem);
                }
            }
        }
    }
}

/* tablet */
@media ( max-width: 992px ) {

}

/* pc */
@media ( min-width: 1200px ) {
    
}