どりーみー

#pagewrap {
width: 960px;
max-width: 94%;
margin: 30px auto 0;
}
body {
text-align : center;
}
.box {
display: none; /* hide menu icon initially *//* boxの中身ここでは非表示 */

}
div#container {
max-width:960px;
width:100%; /* コンテンツ幅を100%に設定 */
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
border : 0px solid red;
}
div#header {
max-width:958px;
width:100%;
border : 1px solid #ccc;
}
div#wrapper {
float : left; /* ラッパー（mainカラム＋leftカラム）を左側に回り込ませる */
max-width : 640px; /* 幅を max-width 640px（430px＋200px）+10pxに設定 */
width:100%;
border : 0px solid pink;
}
div#main {
float : right; /* mainカラム（記事等）を右側に回り込ませる */
max-width : 430px; /* max-widthを430pxに設定 */
width:100%;
border : 1px solid #ccc;
}
div#left {
float : left; /* leftカラム（メニュー等）を左側に回り込ませる */
width : 200px; /* 幅を200pxに設定 */
border : 1px solid #ccc;
}
div#right {
float : right; /* rightカラム（掲示板等）を右側に回り込ませる */
width : 310px; /* 幅を310pxに設定 */
border : 1px solid #ccc;
}
div#footer {
clear : both; /* 全ての回り込みの解除 */
border : 1px solid #ccc;
}

#nav-wrap {
margin-top: 20px;
display: none; /* hide menu icon initially *//*ここでは非表示 */
}

/* menu icon*/
#menu-icon {
display: none; /* hide menu icon initially *//*アイコンもここでは非表示 */
}

/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}

#nav li:hover > ul {
display: block; /* show dropdown on hover */
}

/******************************
MOBILE PC表示サイズ↑のカラム合計幅　960pxが切れるときブルタウンメニューに設定しました。
*******************************/
@media screen and (max-width: 960px) {
body {
text-align : center;
}
.box {
display: block;　　/* boxの中身ここでは表示 */
}
div#container {
max-width : 600px;
width: 100%; /* コンテンツ幅を100%に設定 */
margin-left : auto; /* 左側のマージンを自動算出 */
margin-right : auto; /* 右側のマージンを自動算出 */
text-align : left; /* body要素で指定したセンタリングを戻す */
border : 0px solid #ccc;
}
div#header {
max-width : 600px;
width: 100%;
border : 1px solid #ccc;
}
h1 {
float: right;
}
div#wrapper {
float : left;
max-width : 600px;
width: 100%;
border : 0px solid #ccc;
}
div#main {
float : left;
max-width : 600px;
width: 100%;
border : 1px solid #ccc;
}
div#left {
display: none; /* hide dropdown *//*ここでは非表示 */
}
div#right {
display: none; /* hide dropdown *//*ここでは非表示 */
}
div#footer {
clear : both; /* 全ての回り込みの解除 */
border : 1px solid #ccc;
max-width : 600px;
width: 100%;
}
/* nav-wrap */
#nav-wrap {
position: relative;
display: block;　　　　/*ここでは表示する */
}

/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #f0f8ff url(menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon *//*ここでは表示する */
}
#menu-icon:hover {
background-color: #fff0f5;
}
#menu-icon.active {
background-color: #fff5ee;
}

/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 290px;

overflow: scroll;
z-index: 10000;
padding: 5px;
background: #f0f8ff;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}

/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}

}

@media screen and (min-width: 960px) {

/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}

}