*{
    box-sizing: border-box;
}
body {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template: 
        "header header header  " 30px
        "nav    nav    nav     " 60px
        "main   main   article " auto
        "footer footer footer  " 50px
        /900px 1fr 300px;
}
a{
    text-decoration: none;
}
ul ,li{
    list-style-type: none;
}
header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    line-height: 30px;
}
header h1{
    color: var(--body);
}
header p{
    font-weight: normal;
    font-size: 13px;
    color: var(--body);
    padding-right: 20px;
}
nav{
    grid-area: nav;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 3;
}
nav ul {
    display: flex;
    justify-content: center;
    padding-top: 7px;
    margin-bottom: -8px;
}
nav ul li {
    width: 130px;
    text-align: center;
    margin-bottom: 3px;
    border-right: 1px solid #313131;
}
nav ul li:first-child {
    background: none;
}
nav li a {
    color: var(--body);
    transition: 0.3;
}
nav li a:hover {
    color: #e6a8d6;
    transition: 0.3;
}
.navi img {
    margin-top: 1px;
}

.navi img {
    padding-top: 3px;
}
.navi.btn {
    background: #f1f3f8;
}
main{
    grid-area: main;
    display: grid;
    grid-template: 
        "item     item      Presen   Presen   Presen   Presen  " 500px
        "box      box       box      box      box      box     " 280px
        "gallery  gallery   gallery  gallery  gallery  gallery" auto
        /150px    150px     150px    150px    150px    150px
    ;
    background-color: #fff;
}
.item {
    grid-area: item;
    text-align: center;
}
.item h2 {
    font-size: 16px;
    padding-top: 210px;
    color: var(--body);
}
span {
    font-size: 13px;
    color: var(--body);
    margin-left: 15px;
}
.item p {
    font-size: 12px;
}
.Presen {
    grid-area: Presen;
    display: grid;
    place-items: center;
    position: relative;
}
.Presen .about {
    position: absolute;
    font-size: 12px;
        color: #3b3b3b;
    text-align: center;
    z-index: 2;
}
.Presen p {
    padding-bottom: 2px;
}
.contentsbox {
    grid-area: box;
    display: grid;
    grid-template: 
        "softpers softpers dejipers dejipers handpers handpers" 120px
        "first    first    partner  partner  partner  partner " 120px
        /150px    130px     150px    150px    150px    130px
    ;
    margin-left: 22px;
}
.contentsbox h3 {
    font-weight: normal;
    color: var(--body);
    font-size: 13px;
    border-left: 8px solid #80cbd4;
    border-bottom: 1px solid #666;
    padding-left: 5px;
    margin-left: 5px;
    margin-bottom: 8px;
}
.contentsbox h4 {
    font-weight: normal;
    color: var(--body);
    font-size: 13px;
    border-left: 8px solid #b2d484;
    border-bottom: 1px solid #666;
    padding-left: 5px;
    margin-left: 5px;
    margin-bottom: 8px;
}
.contentsbox p {
    font-size: 12px;
    color: var(--body);
    padding-left: 5px;
}
.softpers {
    grid-area: softpers;
}
.dejipers {
    grid-area: dejipers;
}
.dejipers img {
    padding: 0 4px 4px 5px;
}
.handpers {
    grid-area: handpers;
}
.first {
    grid-area: first;
}
.partner {
    grid-area: partner;
}
.partner img {
    padding-top: 15px;
    padding-right: 3px;
}
.gallery {
    grid-area: gallery;
    text-align: center;
}
.gallery img {
    margin: 20px 0 5px 0;
}
.gallery p {
    font-size: 11px;
    padding-bottom: 5px;
}
article {
    grid-area: article;
    height: auto;
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center;
    color: var(--body);
    background-color: #fff;
}
.side_contentsde {
    border-left: 1px solid #898989;
}
.side_contents h2 {
    font-size: 16px;
    padding-top: 5px;
}
.side_contents h3 {
    font-size: 12px;
    font-weight: normal;
    padding-top: 10px;
}
.side_contents p {
    font-size: 12px;
}
.side_contents div {
    margin: 225px 0 0 0;
}
footer{
    grid-area: footer;
}