body{
　　background-color: lightyellow;
}
header {
　　height: 300px;
　　position: relative;
}
h1,h2 {
　　margin: 0;
　　padding: 1em 0;
　　text-align: center;
　　color: #ddd;
}
.spaser{
　　height: 100px;
}
.top-image-area{
　　width: 100%;
　　height: 100%;
　　background-image: url("../img/topimage.jpg");
　　background-position: 50% 20%;
　　background-size: cover;
}
.logo-container{
　　width: 70px;
　　height: 70px;
　　margin-left: 10px;
}
.logo-container img{
　　height: 100%;
　　width: 100%;
}

.slanting {
　　position: relative;
　　height: 200px;
　　background: #ddd;
}
svg {
　　position: absolute;
　　bottom: 0;
　　width: 100%;
　　height: 200px;
　　fill: #5f5f5f;
}
.contents {

}

.footer{
　　height: 200px;
　　background: black;
　　color: #fff;
　　clear: both;
}
.main-contents, .left-navi, .right-navi {
　　height: 100%;
}
.main-contents {
　　float: left;
　　width: 80%;
}
.left-navi {
　　background-color: blue;
　　color: #fff;
　　width: 20%;
　　float: right;
　　height: 400px;
}
.right-navi {
　　background-color: blueviolet;
　　color: #fff;
　　float: right;
　　width: 20%;
　　height: 400px;
}
.main{
　　width: 80%;
　　float: right;
}

@media screen and (max-width: 600px){
　　.main, .left-navi,.main-contents, .right-navi{
　　width: 100%;
}
}