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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #2d2d2f;

    color: #ffffff;

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


/* =========================================
   ABOUT PAGE
========================================= */

.about {

    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: 10;
}


/* =========================================
   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);
}


/* =========================================
   PAGE TITLE
========================================= */

.page-title {

    margin: 0;

    padding-top: 130px;

    display: flex;

    justify-content: center;
}


/*
   ABOUT画像
*/

.page-title img {

    display: block;

    width: 160px;

    height: auto;
}


/* =========================================
   PROFILE
========================================= */

.profile {

    position: relative;

    width: min(
        1100px,
        calc(100% - 120px)
    );

    margin: 65px auto 0;

    display: flex;

    align-items: center;

    gap: 70px;
}


/* =========================================
   LEFT CHARACTER
========================================= */

.profile-character {

    flex: 0 0 330px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.profile-character img {

    display: block;

    width: 100%;

    max-width: 300px;

    height: auto;
}


/* =========================================
   PROFILE TEXT
========================================= */

.profile-text {

    flex: 1;

    text-align: left;
}


.profile-text h2 {

    margin: 0 0 10px;

    font-family:
        "Natsuzemi Maru Gothic",
        sans-serif;

    font-size: 38px;

    font-weight: 900;
}


.profile-job {

    margin: 0 0 42px;

    font-family:
        "Natsuzemi Maru Gothic",
        sans-serif;

    font-size: 17px;

    font-weight: 700;
}

.profile-text {

    flex: 1;

    text-align: left;

    transform: translateX(-60px);
}


/* =========================================
   PROFILE NAME ROW
========================================= */

.profile-name-row {

    display: flex;

    align-items: center;

    gap: 18px;
}


/* =========================================
   PROFILE LINKS
========================================= */

.profile-links {

    display: flex;

    align-items: center;

    gap: 12px;

    /*
       ★リンクボタン全体の上下左右位置★

       左右 → translateX
       上下 → translateY
    */

    transform:
        translate(0px, 0px);
}


.profile-links a {

    display: block;

    /*
       ★ボタンサイズ★
    */

    width: 90px;

    transition:
        transform 0.2s ease;
}


.profile-links a img {

    display: block;

    width: 100%;

    height: auto;
}


.profile-links a:hover {

    transform:
        translateY(-4px)
        scale(1.05);
}

.profile-links a:nth-child(1) {
    transform: translate(0px, 0px);
}

.profile-links a:nth-child(2) {
    transform: translate(-30px, 0px);
}


/* =========================================
   PROFILE DESCRIPTION
========================================= */

.profile-description {

    font-family:
        "Natsuzemi Maru Gothic",
        sans-serif;

    font-size: 17px;

    line-height: 2;

    font-weight: 600;
}


.profile-description p {

    margin: 0 0 14px;
}


/* =========================================
   BOTTOM CHARACTER
========================================= */

.character-bottom {

    position: absolute;

    right: 20%;

    bottom: 120px;

    width: 320px;
}


.character-bottom img {

    display: block;

    width: 100%;

    height: auto;
}


/* =========================================
   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;
    }


    .profile {

        gap: 40px;
    }


    .profile-character {

        flex-basis: 280px;
    }


    .character-bottom {

        right: 5%;
    }

}


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

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


    .about {

        min-height: auto;

        padding-bottom: 100px;

        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;
    }


    .nav-button {

        width: 100%;

        height: auto;
    }


    /* TITLE */

    .page-title {

        padding-top: 45px;
    }


    .page-title img {

        width: 180px;
    }


    /* PROFILE */

    .profile {

        width:
            calc(100% - 40px);

        margin-top: 40px;

        flex-direction: column;

        gap: 30px;

        align-items: center;
    }


    .profile-character {

        flex-basis: auto;

        width: 220px;
    }


    .profile-text {

        width: 100%;

        text-align: center;
    }


    .profile-text h2 {

        font-size: 22px;
    }


    .profile-job {

        margin-bottom: 30px;

        font-size: 15px;
    }


    /* =====================================
       PROFILE LINKS
    ===================================== */

    .profile-links {

        justify-content: center;

        margin-bottom: 25px;

        gap: 12px;
    }


    .profile-links a {

        width: 50px;
    }


    .profile-description {

        font-size: 14px;

        line-height: 1.9;
    }


    /* BOTTOM CHARACTER */

    .character-bottom {

        position: relative;

        right: auto;

        bottom: auto;

        width: 180px;

        margin:
            40px 20px 0 auto;
    }

}