/* =========================================
   BASIC RESET
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    background: #2d2d2f;

    color: #ffffff;

    font-family:
        "BD Caramel",
        sans-serif;
}


/* =========================================
   TOP PAGE
========================================= */

.top-page {

    position: relative;

    width: min(100%, 1920px);

    min-height: 100vh;

    margin: 0 auto;

    overflow: hidden;

    background-color: #2d2d2f;


    /* グリッド背景 */

    background-image:

        linear-gradient(
            rgba(113, 111, 112, 100) 3px,
            transparent 3px
        ),

        linear-gradient(
            90deg,
            rgba(113, 111, 112, 100) 3px,
            transparent 3px
        );

    background-size: 64px 64px;
}


/* =========================================
   HEADER
========================================= */

.site-header {

    position: absolute;

    top: 20px;

    left: 50%;

    transform:
        translateX(-50%);

    width:
        calc(100% - 120px);

    max-width: 1680px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 20;
}


/* =========================================
   LOGO
========================================= */

.site-logo {

    display: block;

    width: 240px;

    transition:
        transform 0.2s ease;
}


.site-logo img {

    display: block;

    width: 100%;

    height: auto;
}


.site-logo:hover {

    transform:
        scale(1.05);
}


/* =========================================
   NAVIGATION
========================================= */

.navigation {

    display: flex;

    align-items: center;

    gap: 16px;

    transform:
        translate(30px, -30px);
}


/* =========================================
   NAV BUTTON
========================================= */

.nav-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 145px;

    height: 52px;

    text-decoration: none;

    transition:
        transform 0.15s ease;
}


.nav-button img {

    display: block;

    width: 100%;

    height: auto;
}


.nav-button:hover {

    transform:
        translateY(-3px);
}


.nav-button:active {

    transform:
        translateY(1px);
}


/* =========================================
   TOP MAIN
========================================= */

.top-main {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 80px;
}


/* =========================================
   TABLET AREA
========================================= */

.tablet-area {

    position: relative;

    width: 1000px;

    height: 1000px;

    margin-top: -100px;
}


/* =========================================
   YOUTUBE SCREEN
========================================= */

.youtube-screen {

    position: absolute;

    /*
       ★新しいタブレットの画面位置
    */

    left: 9.7%;

    top: 25%;

    width: 80%;

    height: 50%;

    overflow: hidden;

    border-radius: 6%;

    background: #000;

    z-index: 1;
}


.youtube-screen iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;
}


/* =========================================
   TABLET IMAGE
========================================= */

.tablet-image {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    z-index: 2;

    pointer-events: none;
}


/* =========================================
   PEN
========================================= */

.pen {

    position: absolute;

    top: 25%;

    left: 65%;

    width: 600px;

    height: auto;

    z-index: 5;

    pointer-events: none;

    transform:
        translate(0, 0)
        rotate(0deg);
}


/* =========================================
   FOOTER
========================================= */

.site-footer {

    background: #1f1f20;

    padding: 25px;

    text-align: center;

    font-size: 13px;
}


.site-footer p {

    margin: 0;
}


/* =========================================
   TABLET
========================================= */

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

    .site-header {

        width:
            calc(100% - 60px);
    }


    .navigation {

        gap: 8px;
    }


    .nav-button {

        width: 115px;

        height: auto;
    }


    .tablet-area {

        width: 650px;

        height: 650px;
    }


    .pen {

        width: 190px;
    }

}


/* =========================================
   MOBILE
========================================= */

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

    .top-page {

        min-height: auto;

        background-size:
            45px 45px;
    }


    /* =====================================
       HEADER
    ===================================== */

    .site-header {

        position: relative;

        top: auto;

        left: auto;

        transform: none;

        width:
            calc(100% - 30px);

        margin:
            20px auto 0;

        flex-direction: column;

        gap: 20px;
    }


    .site-logo {

        width: 140px;
    }


    /* =====================================
       NAVIGATION
    ===================================== */

    .navigation {

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 8px;

        transform: none;
    }


    .nav-button {

        width: 100%;

        height: auto;
    }


    /* =====================================
       TOP MAIN
    ===================================== */

    .top-main {

        min-height:
            calc(100vh - 180px);

        padding-top: 60px;
    }


    /* =====================================
       TABLET
    ===================================== */

    .tablet-area {

        width:
            min(
                92vw,
                600px
            );

        height:
            min(
                92vw,
                600px
            );

        margin-top: 30px;
    }


    /* =====================================
       PEN
    ===================================== */

    .pen {

        width:
            24vw;

        max-width:
            170px;
    }


    /* =====================================
       FOOTER
    ===================================== */

    .site-footer {

        padding: 20px;

        font-size: 12px;
    }

}