@charset "utf-8";

/* ------------------------------------------------------------ common */

#magazine { padding: 30px 0 0; }
#body { padding: 35px 0 80px; }
#main { width: 700px; float: left; }
#aside { width: 280px; padding: 0 0 0 20px; float: left; }

/* ------------------------------------------------------------ aside */

#aside #blog-nav { padding: 0 0 10px; margin-left: -10px; }
#aside #blog-nav li { width: 135px; padding: 0 0 10px 10px; float: left; }

#aside #pickup { background: #faf8f6; margin: 0 0 20px; }
#aside #pickup h3 { background: url(../../images/magazine/common/wall_01.gif); text-align: center; font-size: 18px; font-weight: bold; height: 50px; line-height: 50px; }
#aside #pickup ul { padding: 0 15px; }
#aside #pickup li { border-bottom: 1px solid #dcc7a9; padding: 15px 0; }
#aside #pickup li img { float: left; }
#aside #pickup li div { padding: 0 0 0 95px; }
#aside #pickup li span { display: inline-block; *display: inline; *zoom: 1; font-size: 12px; color: #fff; padding: 0 12px; }
#aside #pickup li p { font-size: 13px; line-height: 160%; padding: 5px 0 0; }
#aside #pickup li small { display: block; font-size: 13px; color: #acacac; text-align: right; }
#aside #pickup .more a { display: block; text-align: center; color: #48403b; font-size: 16px; padding: 20px 0; }

/* ----------------------------------------------------------------------------------------------------------- */
/* ------- mobile -------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

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

/* ------------------------------------------------------------ common */

#body { padding: 35px 0 50px; }
#main { width: 100%; float: none; }
#aside { width: 100%; padding: 0; float: none; }

/* ------------------------------------------------------------ aside */

#aside #blog-nav { padding: 0 0 10px; margin-left: -3%; }
#aside #blog-nav li { width: 47%; padding: 0 0 10px 3%;}
#aside #blog-nav li img { width: 100%; height: auto;}

#aside #pickup { background: #faf8f6; margin: 0 0 20px; }
#aside #pickup h3 { background: url(../../images/magazine/common/wall_01.gif); text-align: center; font-size: 18px; font-weight: bold; height: 50px; line-height: 50px; }
#aside #pickup ul { padding: 0 15px; }
#aside #pickup li { border-bottom: 1px solid #dcc7a9; padding: 15px 0; }
#aside #pickup li img { float: left; }
#aside #pickup li div { padding: 0 0 0 95px; }
#aside #pickup li span { display: inline-block; *display: inline; *zoom: 1; font-size: 12px; color: #fff; padding: 0 12px; }
#aside #pickup li p { font-size: 13px; line-height: 160%; padding: 5px 0 0; }
#aside #pickup li small { display: block; font-size: 13px; color: #acacac; text-align: right; }
#aside #pickup .more a { display: block; text-align: center; color: #48403b; font-size: 16px; padding: 20px 0; }

}