@charset "utf-8";

/* ---------------------------------------------------------
 レイアウト定義
--------------------------------------------------------- */
HTML { padding: 0; margin: 0; }
BODY { padding: 0; margin: 0; }
DIV { padding: 0; margin: 0; }

/* ----- #footer ----- */
#footer:after { content: ""; display: block; clear: both; }
#footer > DIV { margin: 0 10px; }
#footer > DIV.copyright { float: left; }
#footer > DIV.link { float: right; }

/* ---------------------------------------------------------
 装飾
--------------------------------------------------------- */
/* ----- element ----- */
TABLE { border-collapse: collapse; empty-cells: show; }

/* ----- class ----- */
.clear { clear: both; }
.hidden { display: none; }
.plus { font-size: 0.7em; line-height: 0.7; margin-right: -0.2em; vertical-align: super; } /* +one の "+" 用*/
.required { color: #f00; font-size: 0.8em; }
.info { background-color: #cff; border: 1px dashed #99f; color: #00f; font-size: 0.8em; padding: 5px; }
.error { background-color: #fcc; border: 1px dashed #f99; color: #f00; font-size: 0.8em; padding: 5px; }

/* ----- #container ----- */
#container { /* none */ }

/* ----- #header ----- */
#header { background-color: #fff; line-height: 0; }
#header #logo { margin: 5px 10px; }
#header #auth-area { float: right; font-size: 0.8em; line-height: 1.5; margin: 0 10px; text-align: right; }

/* ----- #content ----- */
#content { /* none */ }

/* リボン風見出し */
.ribbon { background: #ccf; /* old browsers */ background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#ccf 100%); /* W3C */ text-shadow:1px 1px 2px #fff; box-shadow:0 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 50px rgba(0, 0, 0, 0.1) ; position:relative; }
.ribbon:before, .ribbon:after { content: ""; position: absolute; z-index: -1; width: 40%; height: 20px; left: 4px; bottom:7px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7); background-color: #transparent; transform: rotate(-2deg); }
.ribbon:before, .ribbon:after { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); }
.ribbon:after { transform: rotate(2deg); right: 10px; left: auto; }
.ribbon:after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); }

/* ボタン */
.button { background-color: #3D95B7; background: linear-gradient(top, #BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC); border: 1px solid #09c; border-radius: 4px; color: #fff; padding: 5px 20px; text-shadow: 0px 0px 3px rgba(0,0,0,0.5); }
.button { background: -webkit-linear-gradient(top, #BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC); background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC); }
.button:hover { color: #ccc; cursor: pointer; }

/* ----- #main ----- */
#main { color: #333; font-size: 0.9em; line-height: 1.7; }

/* 見出し */
#main > DIV > DIV.chapter { background-color: #3cf; color: #669; line-height: 1.5em; margin: 10px 0 20px; padding: 5px; }
#main > DIV > DIV.chapter > H1 { font-size: 1.0em; border-left: 5px solid #f90; padding-left: 7px; margin: 0; }
#main > DIV > DIV.section { line-height: 1.7; }
#main > DIV > DIV.section > H2 { font-size: 1.0em; border-left: 5px solid #f90; border-bottom: 1px dotted #666; padding-left: 7px; }

/* テーブル */
#main TABLE { background-color: #eff; border: 1px solid #ddd; } /* テーブル共通 */
#main TABLE TR > TH { background-color: #eee; border: 1px solid #ddd; font-weight: bold; white-space: nowrap; }
#main TABLE THEAD TH { text-align: center; }
#main TABLE TBODY TH { padding-left: 0.5em; text-align: left; }
#main TABLE TR > TD { font-size:0.9em; line-height:1.2; padding: 5px; }
/* 一葉形式テーブル */
#main TABLE.page {}
#main TABLE.page TR {}
#main TABLE.page TR > TH {}
#main TABLE.page TR > TD { border: 1px solid #ddd; }
/* 一覧形式テーブル */
#main TABLE.list {}
#main TABLE.list TR {}
#main TABLE.list TR:nth-child(odd) { background-color: #dfd; }
#main TABLE.list TR:nth-child(even) { background-color: #dff; }
#main TABLE.list TR > TH {}
#main TABLE.list TR > TD { border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

/* ----- #sub ----- */
#sub { color: #333; font-size: 0.9em; }
#sub DIV.title { background-color: #3cf; color: #669; line-height: 1.5em; padding: 5px; }
#sub DIV.title > H1 { font-size: 1.0em; border-left: 5px solid #f90; padding-left: 7px; margin: 0; }
#sub DIV.title > H1 > A { color: inherit; text-decoration: none; }
#sub > DIV > UL > LI { list-style: none; list-style-position: outside; }
#sub > .widget > UL { line-height: 1.5em; }
#sub > .banner > UL > LI { float:left; margin: 0 5px 5px 0; }
#sub > .banner > UL > LI > A > IMG { border: 1px solid #ccc; }

/* ----- #footer ----- */
#footer { background-color: #00bfff; color: #eef; font-size: 0.7em; }
#footer A { color: #eef; }