@charset "utf-8";
/* ------------------------------------------------------------ common */
.container,
#wrapper,
#header,
#nav,
#view,
#body,
#footer { width: 100%; width: 960px; margin: 0 auto; }

span.img { display: block; background: gray; text-align: center; }

/* ------------------------------------------------------------ common */
#wrapper { background: #efefef; }
#header { padding: 0 0; }

#lead { padding: 20px 20px 10px; }

.left-side,
.right-side { width: 50%; float: left; }

body {background-color: #E9F9FD; background-image: url(/images/head_back.gif);  background-repeat:repeat-x; }
#body .contents { padding: 10px; }
#body .contents .articles a { display: block; margin: 10px 5px; background: #fff; padding: 10px; box-sizing: border-box; border: 1px solid #eaeaea; border-bottom: 2px solid #ccc; }
#body .contents .articles a:hover { background: #ebffeb; border-top: 2px solid #ccc; border-bottom: 1px solid #eaeaea; }
#body .contents .articles a img,
#body .contents .articles a div { float: left; }
#body .contents .articles a div { width: 300px; margin: 0 0 0 10px; }
#body .contents .articles a div h3 { font-size: 14px; text-decoration: underline; }
#body .contents .articles a div p { font-size: 12px; color: #333; }
#body .ad { text-align: center; }

#view { background: #ccc; }

#links { padding: 10px 0; }
#links h3 { background: #0069b7; color: #fff; padding: 5px 20px; }
#links h4 { padding: 10px 20px 0; }
#links ul { padding: 10px 20px; }
#links ul li { float: left; font-size: 12px; }

#old_contents h3 { background: #0069b7; color: #fff; padding: 5px 20px; }
#old_contents ul { float: left; width: 21%; margin: 2%; box-sizing: border-box; }
#old_contents ul li { font-size: 12px; }

#copyright { background: #1facf5; color: #fff; text-align: center; font-size: 12px; }

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

.container,
#wrapper,
#header,
#nav,
#view,
#body,
#box-share,
#footer { width: auto; }

#header h1 { text-align: center; }
#header h1 img { width: 100%; height: auto; }
#nav li { width: 50%; }

#body .contents { padding: 0; }
#body .contents .articles a { margin: 2%; }
#body .contents .articles a div { width: 75%; margin: 0; }
#body .contents .articles a img { width: 23%; height: 23%; margin: 0 2% 0 0; }
#body .contents .articles a div h3 { line-height: 120%; padding: 0 0 5px; }
#body .contents .articles a div p { line-height: 160%; }

#body .left-side,
#body .right-side { width: 100%; float: none; max-width: none; margin: 0 0 2%; }

#links h4 { padding: 10px 0; }
#links h4 img { width: auto; margin: 0 2%; }
#links ul { padding: 0 2%; }

#old_contents ul { width: 96%; margin: 2%; float: none; }
#old_contents ul li { display: inline; }
#old_contents ul li.title { display: block; }

.space img { width: 100%; height: auto; }


}