body {
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Sans-Serif;
}

/* background */
.header {
background-color: #00b050;
}

.main {
background-color: #ffffff;
}

.side {
background-color: #00b050;
}

/* basic style */


/* これが重要 */
.inner1 {
padding: 10px 30px;
}

.inner2 {
padding: 10px 30px;
width: 98%;
}

.inner3 {
padding: 10px 30px;
}

.wrap {
margin: 0 auto;
width: 100vw;
}

.contents {
overflow: hidden;
width: 100vw;
float: left;
}


.side ul {
margin-left: 0;
padding: 0;
}


.wi {
	color : white;
}

a:link { color: #0000ff; }
a:visited { color: #0000ff; }


li a:link {
color : white;
}

li a:visited {
color : white;
}


H1{
	padding: 10px; /* paddingのほうがよさそう */
	color : white;

}

h2{
	background-color : #ff8000;
	border-top : 3px dotted #ffffff;
	border-bottom : dotted;border-bottom-width : 3px;
	padding: 10px;
color : white;
}


.main {
float: right;
min-height: 500px;
width: 80vw;
}

.side {
float: left;
min-height: 500px;
width: 20vw;
}




img{
    max-width: 100% !important;
    height: auto !important;
    float: left;
}



#socialbuttons div {
  float: left;
}


@media screen and (max-width: 800px) {


.main {
float: left;
width: 100%;
text-align: left;
}

.wrap {
margin: 0 auto;
width: 100%;
}

.contents {
overflow: hidden;
width: 100%;
float: left;
}

.side {
width: 100vw;
background-color: #00b050;
overflow: hidden;
text-align: left;
}
.inner1{
margin: 2px;
padding: 2px;
}

.inner2{
margin: 2px;
padding: 2px;
}

.inner3{
padding: 10px 30px;
}

img { float : none ; }


}