body{
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Noto Sans JP', 'Hiragino Mincho ProN',  cursive;
    
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../static_images/background1.jpg");
    background-size: cover;
    background-position: top center;
    z-index: -200;
    content: "";
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP','Hiragino Sans', 'メイリオ', sans-serif;
}

.bordered {
    border-bottom: 1px solid #888888;
}

div {
    margin: 0px;
    padding: 0px;
}

.fullwidth {
    width: stretch;
    width: -webkit-fill-available;
    width: -moz-available;
}

.logo {
    position: fixed;
    z-index: -100;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

@media screen and (min-width:950px) { 
    .header {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100vw; /* ビューポート幅に合わせる */
        background-color: #ffffff;

        display: grid;
        grid-template-columns: 70px 1fr 2fr;
        grid-auto-columns: auto;
        grid-template-areas:
            "home nav-blank nav";
    }
}

@media screen and (max-width:949px) { 
    .header {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100vw; /* ビューポート幅に合わせる */
        background-color: #ffffff;

        display: grid;
        grid-template-columns: 70px 1px 1fr;
        grid-auto-columns: auto;
        grid-template-areas:
            "home nav-blank nav";
    }
}

.home {
    grid-area: home;
    height: 50px;
    background-image: url("../static_images/home.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.home a {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 100%;    
}

.nav-blank {
    grid-area: nav-blank;
    width: stretch;
    width: -webkit-fill-available;
    width: -moz-available;
}

.nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: 1fr;
    grid-template-areas:
        "news company service careers contact";
}

.nav a {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 100%;    
}

.news {
    grid-area: news;
    background-image: url("../static_images/news.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.company {
    grid-area: company;
    background-image: url("../static_images/company.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.service {
    grid-area: service;
    background-image: url("../static_images/service.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.careers {
    grid-area: careers;
    background-image: url("../static_images/careers.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.contact {
    grid-area: contact;
    background-image: url("../static_images/contact.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.home:hover {
    background-color: #88ddff;
}
.news:hover {
    background-color: #88ddff;
}
.company:hover {
    background-color: #88ddff;
}
.service:hover {
    background-color: #88ddff;
}
.careers:hover {
    background-color: #88ddff;
}
.contact:hover {
    background-color: #88ddff;
}

.container {
    margin-top: 100px;
    width: stretch;
    width: -webkit-fill-available;
    width: -moz-available;
    z-index: 0;
    min-height: 100%;

    display: grid;
    grid-template-columns: 1fr 9fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "side content";
}

.side {
    width: 10vw;
    min-width: 70px;
    min-height: 100%;
    grid-area: side;
}

.side-inner-block {
    margin: 15px;
}

.content {
    width: stretch;
    width: -webkit-fill-available;
    width: -moz-available;
    min-height: 100%;
    grid-area: content;
    overflow-y: auto;
    overflow-x: hidden;
}

.content-logo {
    position: fixed;
    width:70px;
    background-repeat: no-repeat;
    z-index: 100;
}

.content-inner-block {
    width: 85vw;
    padding: 15px;
}


.description {
    width: 70%;
}

.image {
    width: 30%;
}