html, body 
{
    height: 100%;
    margin: 0;
    padding: 0;
}


@media screen and (max-width: 800px) 
{
    html
    {
        
        font-size: 16px;
    }

    body 
    {
        font-size: 16px;
    }
}

@media screen and (min-width: 800px) 
{
    html
    {
        
        font-size: 20px;
    }

    body 
    {
        font-size: 20px;
    }
}

body 
{
    margin-top: max(calc((96 / 1440) * 100vw), 50px);
    font-family: 'Noto Sans JP', sans-serif;
    /* font-size: 20px; */
    color: #333;
}

a:hover
{
    text-decoration: none;
}

.area-margin
{
    margin-top: calc((235 / 1440) * 100vw);
}


/* ナビゲーションバー */
.navbar-fixed-top 
{
    height: calc((96 / 1440) * 100vw);
    min-height: 50px;
}




.navbar-custom
{
    
    
}



.navbar
{
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    display: flex;
}


.navbar-default
{
    width: 100%;
    background-color: #F5F5F5;
    padding-left: calc((96 / 1440) * 100vw);
    padding-right: calc((96 / 1440) * 100vw);
    border: none;
}






.navLeft
{
    
    color: #333;
    margin: auto 0;
    font-size: 1.6rem;
}

.navLeft:hover
{
    color: #666;
}


.navRight
{
    width: fit-content;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.navbar-default .navbar-nav > li > a 
{
    color: #333;
    font-size: 1.2rem;
    
}

.navbar-default .navbar-nav > li > a:hover
{
    color: #666;
}

.top-image
{
    width: 100%;
}

/* Profile */
.main-profile
{   
    margin-bottom: 4%; 
    width: 100%;
    background-color: #F5F5F5;
}

.profile-padding
{
    padding: calc((39 / 1440) * 100vw) 0;
}

.main-title
{
    width: fit-content;

    margin-left: calc((62 / 1440) * 100vw);
    font-weight: bold;
    font-size: 1.6rem;
}

.profile-row
{
    display: flex;
    width: 100%;
    /* height: 10%; */
}

.profile-name
{
    /* width: 20vw;
    min-width: fit-content; */
    font-weight: bold;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: calc((202 / 1440) * 100vw);
    font-size: 1.6rem;
}


.profile-img
{
    margin-left: calc((192 / 1440) * 100vw);
    width: calc((256 / 1440) * 100vw);
    min-width: 64px;
}

@media screen and (max-width: 1000px) 
{
    .sub-profile-max1000
    {
        margin-left: calc((62 / 1440) * 100vw);
        /* margin-right: calc((192 / 1440) * 100vw); */
        margin-bottom: calc((15 / 1440) * 100vw);
        display: flex;
    }

    

    .sub-profile-title
    {
        /* width: 6vw; */
        margin-right: calc((48 / 1440) * 100vw);
        min-width: 80px;
        font-weight: bold;
    }

    .sub-profile-body
    {
        /* width: calc((402 / 1440) * 100vw); */
    }
}
@media screen and (min-width: 1000px) 
{
    .sub-profile-min1000
    {
        margin-left: calc((192 / 1440) * 100vw);
        margin-right: calc((192 / 1440) * 100vw);
        margin-bottom: calc((15 / 1440) * 100vw);
        display: flex;
    }

    .sub-profile-max1000
    {
        display: flex;
    }

    .sub-profile-title
    {
        /* width: 6vw; */
        margin-right: calc((48 / 1440) * 100vw);
        min-width: 80px;
        font-weight: bold;
    }

    .sub-profile-body
    {
        width: calc((402 / 1440) * 100vw);
    }
}

.sub-profile
{
    margin-left: calc((192 / 1440) * 100vw);
    margin-right: calc((192 / 1440) * 100vw);
    margin-bottom: calc((15 / 1440) * 100vw);
    display: flex;
}



/* .area2
{
    margin-top: calc((235 / 1440) * 100vw);
} */

.skills-margin
{
    margin-bottom: calc((52 / 1440) * 100vw);
}

.skills-row
{
    display: flex;
    margin: 0 calc((62 / 1440) * 100vw);
}

.icon
{
    /* width: calc((64 / 1440) * 100vw); */
    margin-right: calc((32 / 1440) * 100vw);
    text-align: center;
}

.icon-image
{
    width: calc((64 / 1440) * 100vw);
    min-width: 32px;
    
}

.skills-name
{
    text-align: center;
}

/* Works */

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

    .works-margin
    {
        margin-bottom: calc((52 / 1440) * 100vw);
    }

    .works-row
    {
        /* display: flex; */
    }

    .hoge
    {
        width: calc(2 * ((700 / 1440) * 100vw));
        margin-left: calc((20 / 1440) * 100vw);
        position: relative;
    }



    .works-image
    {
        width: calc(2 * ((700 / 1440) * 100vw));
        
    }



    .works-gradation
    {
        width: calc(2 * ((700 / 1440) * 100vw));
        position: absolute;
        bottom: 0;
    }

    .works-rect
    {
        width: calc(2 * ((700 / 1440) * 100vw));
        margin-left: calc((20 / 1440) * 100vw);
        margin-bottom: calc((20 / 1440) * 100vw);
        background-color: #F5F5F5;
        
    }

    .works-title
    {
        width: fit-content;
        padding-top: calc((33 / 1440) * 100vw);
        padding-bottom: calc((33 / 1440) * 100vw);
        margin-left: auto;
        margin-right: auto;
        font-weight: bold;
        font-size: 1.6rem;
    }

    .works-body
    {
        width: fit-content;
        padding-bottom: calc((33 / 1440) * 100vw);
        margin-left: auto;
        margin-right: auto;
    }
}


@media screen and (min-width: 600px)
{

    .works-margin
    {
        margin-bottom: calc((52 / 1440) * 100vw);
    }

    .works-row
    {
        display: flex;
    }

    .hoge
    {
        width: calc((690 / 1440) * 100vw);
        margin-left: calc((20 / 1440) * 100vw);
        position: relative;
    }



    .works-image
    {
        width: calc((690 / 1440) * 100vw);
        
    }



    .works-gradation
    {
        width: calc((690 / 1440) * 100vw);
        position: absolute;
        bottom: 0;
    }

    .works-rect
    {
        width: calc((690 / 1440) * 100vw);
        margin-left: calc((20 / 1440) * 100vw);
        margin-bottom: calc((20 / 1440) * 100vw);
        background-color: #F5F5F5;
        
    }

    .works-title
    {
        width: fit-content;
        padding-top: calc((33 / 1440) * 100vw);
        padding-bottom: calc((33 / 1440) * 100vw);
        margin-left: auto;
        margin-right: auto;
        font-weight: bold;
        font-size: 1.6rem;
    }

    .works-body
    {
        width: fit-content;
        padding-bottom: calc((33 / 1440) * 100vw);
        margin-left: auto;
        margin-right: auto;
    }
}

/* .works-margin
{
    margin-bottom: calc((52 / 1440) * 100vw);
}

.works-row
{
    display: flex;
}

.works-row > a
{
    width: calc((690 / 1440) * 100vw);
    margin-left: calc((20 / 1440) * 100vw);
    position: relative;
}



.works-image
{
    width: calc((690 / 1440) * 100vw);
    
}



.works-gradation
{
    width: calc((690 / 1440) * 100vw);
    position: absolute;
    bottom: 0;
}

.works-rect
{
    width: calc((690 / 1440) * 100vw);
    margin-left: calc((20 / 1440) * 100vw);
    margin-bottom: calc((20 / 1440) * 100vw);
    background-color: #F5F5F5;
    
}

.works-title
{
    width: fit-content;
    margin-top: calc((33 / 1440) * 100vw);
    margin-bottom: calc((33 / 1440) * 100vw);
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 1.6rem;
}

.works-body
{
    width: fit-content;
    margin-bottom: calc((33 / 1440) * 100vw);
    margin-left: auto;
    margin-right: auto;
} */

/* .area3 */
/* { */
    /* margin-top: calc((235 / 1440) * 100vw); */
    /* padding-bottom: 10%; */
    /* width: 100%; */
/* } */
/* Events */
.events-margin
{
    margin-left: calc((192 / 1440) * 100vw);
    margin-bottom: calc((21 / 1440) * 100vw);
}

.year
{
    width: 64px;
    margin-top: calc((134 / 1440) * 100vw);
    font-size: 1.2rem;
    text-align: center;
}



.line
{
    width: 64px;
}

.line > div
{
    width: 2px;
    height: 32px;
    margin: 0 auto;
    background-color: #306FDB;
}

.events-row
{
    display: flex;
    font-size: 1rem;
}

.month
{
    width: 64px;
    padding: 15px 0;
    /* white-space: nowrap; */
    color: #fff;
    background-color: #306FDB;
    border-radius: 9999px;
    text-align: center;
}

.events-body
{
    width: calc((900 / 1440) * 100vw);
    height: 1rem;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: calc((64 / 1440) * 100vw);
}