*{padding: 0;margin: 0 auto;}#space{margin-right: 20px;margin-left: 20px;}#page{width: 1000px;}#header{margin-bottom: 40px;}#header h1{text-align: center;margin: 30px 0;}#header ul{overflow: hidden;width: 1000px;}#header ul li:nth-child(-n+3){float: left;list-style: none;color: #ffffff;width: 249px;text-align: center;padding: 10px 0;background-color: #1d4000;border-top: solid 1px black;border-bottom: solid 1px black;border-left: solid 1px black;}#header ul li:nth-child(4){float: left;list-style: none;color: white;width: 248px;text-align: center;padding: 10px 0;background-color: #1D4000;border: solid 1px black;}#contents{overflow: hidden;}#main{width: 620px;float: left;}#main h2{font-weight: lighter;border-left: solid 2px #000000;padding-left: 20px;margin-bottom: 10px;}#main img{margin-bottom: 15px;}#main p{margin-bottom: 20px;}#side{float: right;width: 300px;}#side h3{font-weight: lighter;margin-bottom: 5px;}#side img{margin-bottom: 10px;}#side p{margin-bottom: 20px;}#footer{clear: both;color: #ffffff;font-size: 0.8em;text-align: center;background-color: #000000;padding: 20px 0;}@media screen and (max-width: 420px){*{padding: 0;margin: 0 auto;}all{ /*追加*/max-width: 100%;}#space{margin-right: 10px; /*変更*/margin-left: 10px; /*変更*/}#page{width: 400px; /*変更*/}#header{margin-bottom: 40px;}img{max-width: 100%; /*変更*/}#header h1{text-align: center;margin: 30px 0;}#header ul{overflow: hidden;width: 400px; /*変更*/}#header ul li:nth-child(1){ /*追加*/float: left;list-style: none;color: #ffffff;width: 198px;text-align: center;padding: 10px 0;background-color: #1d4000;border-top: solid 1px black;border-right: solid 1px black;border-bottom: solid 1px black;border-left: solid 1px black;}#header ul li:nth-child(2){ /*追加*/float: left;list-style: none;color: white;width: 199px;text-align: center;padding: 10px 0;background-color: #1d4000;border-top: solid 1px black;border-right: solid 1px black;border-bottom: solid 1px black;border-left: solid 0 black;}#header ul li:nth-child(3){ /*追加*/float: left;list-style: none;color: white;width: 198px;text-align: center;padding: 10px 0;background-color: #1d4000;border-top: solid 0 black;border-right: solid 1px black;border-bottom: solid 1px black;border-left: solid 1px black;}#header ul li:nth-child(4){ /*追加*/float: left;list-style: none;color: white;width: 199px;text-align: center;padding: 10px 0;background-color: #1d4000;border-top: solid 0 black;border-right: solid 1px black;border-bottom: solid 1px black;border-left: solid 0 black;}#contents{overflow: hidden;}#main{width: 400px; /*変更*/float: none; /*変更*/}#main h2{font-weight: lighter;border-left: solid 2px #000000;padding-left: 20px;margin-bottom: 10px;}#main img{width: 100%; /*追加*/margin-bottom: 15px;}#main p{margin-bottom: 20px;}#side{float: left; /*変更*/width: 300px;}#side h3{font-weight: lighter;margin-bottom: 5px;}#side img{margin-bottom: 10px;}#side p{width: 400px; /*追加*/margin-bottom: 20px;}#footer{clear: both;color: #ffffff;font-size: 0.8em;text-align: center;background-color: #000000;padding: 20px 0;}}
*{
返信削除padding: 0;
margin: 0 auto;
}
#space{
margin-right: 20px;
margin-left: 20px;
}
#page{
width: 1000px;
}
#header{
margin-bottom: 40px;
}
#header h1{
text-align: center;
margin: 30px 0;
}
#header ul{
overflow: hidden;
width: 1000px;
}
#header ul li:nth-child(-n+3){
float: left;
list-style: none;
color: #ffffff;
width: 249px;
text-align: center;
padding: 10px 0;
background-color: #1d4000;
border-top: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;
}
#header ul li:nth-child(4){
float: left;
list-style: none;
color: white;
width: 248px;
text-align: center;
padding: 10px 0;
background-color: #1D4000;
border: solid 1px black;
}
#contents{
overflow: hidden;
}
#main{
width: 620px;
float: left;
}
#main h2{
font-weight: lighter;
border-left: solid 2px #000000;
padding-left: 20px;
margin-bottom: 10px;
}
#main img{
margin-bottom: 15px;
}
#main p{
margin-bottom: 20px;
}
#side{
float: right;
width: 300px;
}
#side h3{
font-weight: lighter;
margin-bottom: 5px;
}
#side img{
margin-bottom: 10px;
}
#side p{
margin-bottom: 20px;
}
#footer{
clear: both;
color: #ffffff;
font-size: 0.8em;
text-align: center;
background-color: #000000;
padding: 20px 0;
}
@media screen and (max-width: 420px){
*{
padding: 0;
margin: 0 auto;
}
all{ /*追加*/
max-width: 100%;
}
#space{
margin-right: 10px; /*変更*/
margin-left: 10px; /*変更*/
}
#page{
width: 400px; /*変更*/
}
#header{
margin-bottom: 40px;
}
img{
max-width: 100%; /*変更*/
}
#header h1{
text-align: center;
margin: 30px 0;
}
#header ul{
overflow: hidden;
width: 400px; /*変更*/
}
#header ul li:nth-child(1){ /*追加*/
float: left;
list-style: none;
color: #ffffff;
width: 198px;
text-align: center;
padding: 10px 0;
background-color: #1d4000;
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;
}
#header ul li:nth-child(2){ /*追加*/
float: left;
list-style: none;
color: white;
width: 199px;
text-align: center;
padding: 10px 0;
background-color: #1d4000;
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 0 black;
}
#header ul li:nth-child(3){ /*追加*/
float: left;
list-style: none;
color: white;
width: 198px;
text-align: center;
padding: 10px 0;
background-color: #1d4000;
border-top: solid 0 black;
border-right: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;
}
#header ul li:nth-child(4){ /*追加*/
float: left;
list-style: none;
color: white;
width: 199px;
text-align: center;
padding: 10px 0;
background-color: #1d4000;
border-top: solid 0 black;
border-right: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 0 black;
}
#contents{
overflow: hidden;
}
#main{
width: 400px; /*変更*/
float: none; /*変更*/
}
#main h2{
font-weight: lighter;
border-left: solid 2px #000000;
padding-left: 20px;
margin-bottom: 10px;
}
#main img{
width: 100%; /*追加*/
margin-bottom: 15px;
}
#main p{
margin-bottom: 20px;
}
#side{
float: left; /*変更*/
width: 300px;
}
#side h3{
font-weight: lighter;
margin-bottom: 5px;
}
#side img{
margin-bottom: 10px;
}
#side p{
width: 400px; /*追加*/
margin-bottom: 20px;
}
#footer{
clear: both;
color: #ffffff;
font-size: 0.8em;
text-align: center;
background-color: #000000;
padding: 20px 0;
}
}