/*
↓これはclear:bothを書ける箱がない時用に
疑似要素で箱作ってそれにclear:both書いてる
clearfix手法というやつです
使わないとclearできないシチュエーションでお使い下さい
*/

.clearfix:after{
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
/*↑ここまで */

/* 箱の名前表示 */
#header:before{
content:'PCサイズの時のheader';
font-size:2em;
}

#leftbox:before{
content:'PCサイズの時のleftbox';
font-size:2em;
}

#rightbox:before{
content:'PCサイズの時のrightbox';
font-size:2em;
}


/*↑ここまで */

#container {
width:80%;
max-width:900px;
margin:0 auto;
}

#header {
width:100%;
height:200px;
background-color:pink;
}
#nav {
width:100%;
background-color:yellow;
}
#main {
width:100%;
background-color:#7DE4F2;
}

#footer {
width:100%;
height:60px;
background-color:#1D2DC1;
}

#leftbox {
width:30%;
height:700px;
background-color:#F49A61;
margin:0;
padding:0;
float:left;
}

#rightbox {
width:70%;
height:700px;
background-color:#72EF56;
margin:0;
padding:0;
float:left;
}

/* ここからナビゲーション */
#nav ul{
margin:0;
padding:0;
list-style-type:none;
}

#nav li a{
text-decoration:none;
float:left;
display:block;
width:20%;
/* width:calc(20% - 1px); */
text-align:center;
line-height:40px;/*垂直方向ど真ん中表示 */
border-right:1px solid #000;
box-sizing:border-box;
}

#nav li:last-child a{
border-right:none;
}

/* ここまでナビゲーション */

/* ここからレスポンシブル */
@media screen and (max-width: 880px) {
#container{
width:100%;


}
}

@media screen and (max-width: 600px) {
#header:before{
content:'タブレットの時のheaderだよ';
}

#leftbox:before{
content:'タブレットの時のleftboxだよ';
}

#rightbox:before{
content:'タブレットの時のrightboxだよ';

}

#container{
width:100%;

}


#leftbox {
float:none;
width:100%;
}



#rightbox {
float:none;
width:100%;
}

#nav li a {
width:calc(100% / 2 - 1px );
border-bottom:1px solid #000;
}


/*２番目の子と4番目の子の右のボーダーをなくす*/
#nav li:nth-child(2) a,#nav li:nth-child(4) a {
border-right:none;
}

#nav li:last-child a {
border-bottom:none;
border-right:1px solid #000;
}

/* ここからスマホサイズ */
@media screen and (max-width: 400px) {
#nav li a {
float:none;
width:100%;
border-right:none;
}

#nav li:last-child a{
border-right:none;
}


}