html {
    font-family: 'Noto Sans JP', 'Noto Sans Mono', monospace, sans-serif;
    overflow-wrap: break-word;
}   

h1 {
    font-size: 2em;
}

a {
    text-decoration: none;
}

p {
    font-size:large;
}

a:link, a:visited, a:hover, a:active {
    color: black;
}

table {
    width: 100%;
}

table th {
    position: relative;
    text-align: left;
    font-size:large;
    width: 15%;
    padding-bottom: 3%;
}

table td {
    text-align: left;
    font-size:large;
    width: 85%;
    padding-bottom: 3%;
}

li {
    list-style:none;
    font-size:large;
}

.works li {
    list-style:circle;
}


.page-detail li a {
    text-decoration:underline; 
}

.page-detail ul a {
    text-decoration:underline; 
}

/*
============================
layout
============================
*/
body {
    height:100vh;
    
    /* 
    background-image: url("icon_logo.png");
    background-size: 50%;
    background-position:top;
    background-repeat: no-repeat;
    background-blend-mode:lighten;
    */

    padding-top: 1%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 1%;
    position: fixed;
    background-color:rgba(250, 250, 255, 0.8);
    display: grid;
    grid-template:
    "header" 10vh
    "main" 80vh
    "footer" 10vh ;
}

header {
    grid-area: header;
    display: grid;
    grid-template:
    "logo nav" 10vh
    / 1fr 2fr;
}

.logo {
    grid-area: logo;
    display: flex;
    justify-content: left;
    align-items: center;
}

.logo img {
    width: 80%;
}

.nav {
    grid-area: nav;
    display:flex;
    justify-content: right;
    align-items: center;
}

.nav__item {
    padding-left: 4%;
    font-size: x-large;
}

main {
    grid-area: main;
    display: grid;
    grid-template:
    "page-title page-detail" 80vh
    / 1fr 1fr 
    ;
}

#page-top {
    grid-area: main;
    display: grid;
    grid-template:
    "page-title" 80vh
    / 1fr;
}

#page-top h1 {
    font-size: 3em;
}

.page-title {
    grid-area: page-title;
    display:flex;
    justify-content: center;
    align-items: center;
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

.linefeed {
    display: none;
}

.page-detail {
    grid-area: page-detail;
    display:flex;
    justify-content: left;
    align-items: center;
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

.message {
    display:flex;
    flex-direction: column;
}

#message {
    font-size: 92%;
}

#signature {
    text-align: right;
    font-size: 92%;
}

@keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

.page-detail p {
    text-align: justify;
    font-size:large;
}

footer {
    grid-area: footer;
    display:flex;
    text-align: center;
    flex-flow: column;
}

#copyright {
    font-size:small;
}

/*
============================
Responsive design
============================
*/
@media screen and (min-width:600px) and (max-width:1480px){
    body {
        padding-top: 1%;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 1%;
        position: fixed;
        background-color:rgba(255,255,255,0.8);
        display: grid;
        grid-template:
        "header" 1fr
        "main" 1fr
        "footer" 0.3fr ;
    }

    header {
        grid-area: header;
        display: grid;
        grid-template:
        "logo " 0.5fr
        "nav" 0.5fr
        ;
    }

    .logo {
        grid-area: logo;
        display: block;
        margin-left: auto;
        margin-right: auto;
    
    }

    .logo img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
    
    .nav {
        grid-area: nav;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .nav__item {
        padding-bottom: 0.3%;
        font-size: medium;
        padding-left: 0%;

    }

    main {
        overflow: auto;
        grid-area: main;
        display: grid;
        grid-template:
        "page-title" 0.5fr
        "page-detail" 0.5fr
        ;
    }

    #page-top {
        grid-area: main;
        display: grid;
        grid-template:
        "page-title" 1fr
        / 1fr;
    }

    .page-title {
        grid-area: page-title;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    .linefeed {
        display: none;
    }

    .page-detail {
        grid-area: page-detail;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    table {
        width: 100%;
    }

    table th {
        width:100%;
        display:block;
    }

    table td {
        width:100%;
        display:block;
    }

    .page-detail p {
        text-align: justify;
        font-size:large;
    }
                
    #copyright {
        font-size:small;
    }
}

@media screen and (max-width: 600px) {
    body {
        padding-top: 1%;
        padding-left: 5%;
        padding-right: 5%;
        position: fixed;
        background-color:rgba(255,255,255,0.8);
        display: grid;
        grid-template:
        "header" 1fr
        "main" 1fr
        "footer" 0.35fr ;
    }

    header {
        grid-area: header;
        display: grid;
        grid-template:
        "logo " 0.5fr
        "nav" 0.5fr
        ;
    }

    .logo {
        grid-area: logo;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .logo img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
    .nav {
        grid-area: nav;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .nav__item {
        padding-bottom: 2%;
        font-size: medium;
        padding-left: 0%;

    }

    main {
        overflow: auto;
        grid-area: main;
        display: grid;
        grid-template:
        "page-title" 0.5fr
        "page-detail" 0.5fr
        ;
    }

    #page-top {
        grid-area: main;
        display: grid;
        grid-template:
        "page-title" 1fr
        / 1fr;
        text-align: center;
    }

    .page-title {
        grid-area: page-title;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    .linefeed {
        display:block;
    }

    .page-detail {
        grid-area: page-detail;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    table {
        width: 100%;
    }

    table th {
        width:100%;
        display:block;
    }

    table td {
        width:100%;
        display:block;
    }

    .page-detail p {
        text-align: justify;
        font-size:large;
    }
                
    #copyright {
        font-size:small;
    }
    
}