@charset "utf-8";

/* ---------------------------------------------------------
 レイアウト定義
--------------------------------------------------------- */
/* ----- 全体 ----- */
BODY { margin: 0 15px; }
#container{ max-width: 1200px; min-width: 800px; margin: 0 auto; }
#header { width: 100%; }
#content { padding-right: 320px; }
#main { float: left; margin-right: -320px; /* = #sub width(negative) */ border-right: 320px solid transparent; /* = #sub width and color */ width: 100%; }
#sub { float: left; margin-right: -320px; /* = width(negative) */ width: 320px; /* = #main margin */}
#footer { clear: both; }

/* ----- #header ----- */
#header #logo { height: 60px; }

/* ----- #main ----- */
#main > DIV { margin: 10px 10px 20px; }
#main > DIV > * { margin: 10px; }
#main > DIV > * TABLE { margin: 10px 0; } /* table 幅指定対策: table width=100% を指定しても突き抜けないようにするため、外側に wrapper をかませる前提で横マージンを0に。 */

/* ----- #sub ----- */
#sub > DIV { width: 300px; margin: 10px 10px 20px; }
#sub > DIV > UL { padding: 0; margin: 10px; }

/* ---------------------------------------------------------
 装飾
--------------------------------------------------------- */
/* ----- #container ----- */
#container { box-shadow: 5px 0 10px #ccc, -2px 0 3px #ccc; }

/* ----- #header ----- */

/* ----- #main ----- */

/* ----- #footer ----- */
#footer { line-height: 2.5; }
#footer A { text-decoration: none; }
#footer A:hover { text-decoration: underline; }