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

.main-image
{
    width: 100%;
}

.gradation
{
    width: 100%;
    position: relative;
}

.gradation::before
{
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255,255,255,0), 98%, #ffffff);
    position: absolute;
}








.area1
{
    margin: calc((96 / 1440) * 100vw) calc((192 / 1440) * 100vw) 0 calc((192 / 1440) * 100vw);
}

.title
{
    font-weight: bold;
    font-size: 1.6rem;
}
    
.year
{
    margin: calc((23 / 1440) * 100vw) 0 calc((95 / 1440) * 100vw) 0;
}

@media screen and (max-width: 1000px)
{
    .list-margin
    {
        margin-top: calc((75 / 1440) * 100vw);
    }

    .list
    {
        display: flex;
        width: calc((1052 / 1440) * 100vw);
        /* min-width: fit-content; */
        border-top: 1px solid #aaa;
        /* margin-left: calc((75 / 1440) * 100vw); */
    }

    .main-body
    {
        width: calc((1052 / 1440) * 100vw);
    }

    .sub-title
    {
        width: calc((145 / 1440) * 100vw);
        min-width: 6.4rem;
        margin: calc((26 / 1440) * 100vw) 0 calc((26 / 1440) * 100vw) calc((16 / 1440) * 100vw);
        font-weight: bold;
    }

    .sub-body
    {
        /* width: calc((881 / 1440) * 100vw); */
        margin: calc((26 / 1440) * 100vw) 0;
    }
}

@media screen and (min-width: 1000px)
{
    .main-row
    {
        display: flex;
    }

    .list
    {
        display: flex;
        width: calc((336 / 1440) * 100vw);
        /* min-width: fit-content; */
        border-top: 1px solid #aaa;
        margin-left: calc((75 / 1440) * 100vw);
    }

    .main-body
    {
        width: calc((455 / 1440) * 100vw);
    }

    .sub-title
    {
        width: calc((145 / 1440) * 100vw);
        min-width: 6.4rem;
        margin: calc((26 / 1440) * 100vw) 0 calc((26 / 1440) * 100vw) calc((16 / 1440) * 100vw);
        font-weight: bold;
    }

    .sub-body
    {
        width: calc((175 / 1440) * 100vw);
        margin: calc((26 / 1440) * 100vw) 0;
    }
}


        



            





.area2
{
    margin-left: calc((27 / 1440) * 100vw);
    margin-right: calc((27 / 1440) * 100vw);
    margin-top: calc((33 / 1440) * 100vw);
    padding-bottom: 10%;
}

.video
{
    width: calc((1387 / 1440) * 100vw);
    height: calc((726 / 1440) * 100vw);
}

.sub-image-row
{
    display: flex;
}

.sub-image
{
    margin-top: calc((27 / 1440) * 100vw);
    width: calc((681 / 1440) * 100vw);
    margin-right: calc((27 / 1440) * 100vw);
}