@charset "utf-8";

/*
2つ以上指定する場合、
<span class="○ ○"></span>と半角スペース空けることを忘れずに。
*/

/* 文字サイズ */

.f8pt {
font-size: 8pt;
}

.f9pt {
font-size: 9pt;
}

.f10pt {
font-size: 10pt;
}

.f12pt {
font-size: 12pt;
}

.f14pt {
font-size: 14pt;
}

.f16pt {
font-size: 16pt;
}

.f16pt {
font-size: 16pt;
}

.f18pt {
font-size: 18pt;
}

.f20pt {
font-size: 20pt;
}

.f22pt {
font-size: 22pt;
}

/* 文字太さ */

.b {
font-weight: bold;
}

/* 文字スタイル */

.italic {
font-style: italic;
}

/* 文字カラー */

.red {
color: #f00;
}

.blue {
color: #00f;
}

.green {
color: #390;
}

.orange {
color: #f60;
}




/* テキストや画像位置の調整 */

.a-c {
text-align: center;
}

.a-l {
text-align: left;
}

.a-r {
text-align: right;
}

/* 画像回り込み位置の調整 */

.f-r {
float:right;
margin-left: 10px;
}

.f-l {
float: left;
margin-right: 10px;
}

/* 調整 */

.noborder {
border: 0!important;
}

.nopadding {
padding: 0!important;
}






/* デフォルト */

* {
font-size: 100%;
font-style: normal;
margin: 0;
padding: 0;
}

/* html */

body {
font-family: Verdana
ＭＳ Ｐゴシック
sans-serif;
color: #333;
text-align: center;
background: #fff;
}

html {
overflow-y:scroll;
}

img {
border: 0px;
}

ul
ol {
list-style-type: none;
}

a {
color: #008cd6;
text-decoration: underline;
}

a:hover {
color: #008cd6;
text-decoration: none;
}

/* 共通レイアウト */

#header

#navi

#contents {
width: 800px;
}

#header

#navi

#contents

#main-contents h2

#main-contents .m-section

#main-contents .about
#side-contents h3

#side-contents .s-section

#side-contents .about

#footer {
clear: both;
}

/*
#header

#navi

#contents {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
*/

#navi

#contents {
background-color: #fff;
}

/* サイト全体 */

#container {
width: 800px;	
margin: 0 auto 0 auto;
}

/* ヘッダー */

#header {
height: 100px;
_height: 101px;
border-bottom: 1px dotted #ccc;
background: #fff;
}

#header h1 {
font-size: 150%;
float:left;
text-align: center;
margin: 38px 0 0 0;
}

#header p {
font-size: 80%;
float:right;
text-align: right;
line-height: 1.2em;
margin: 28px 0 0 0;
}

/* ナビ */

#navi {
height: 30px;
_height: 31px;
border-bottom: 1px dotted #ccc;
}

#navi p {
font-size: 60%;
float:left;
margin-left: 10px;
line-height: 3em;
}

/* コンテンツ */

#contents {
padding-top: 10px;
}

/* メインコンテンツ */

#main-contents {
width: 590px;
float: left;
text-align: left;
letter-spacing: 1px;
overflow: hidden;
}

#main-contents h2 {
font-size: 100%;
padding: 0.3em 5px 0.3em 5px;
margin-bottom: 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #eee;
}

#main-contents .m-section {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #f3f3f3;
background: #fff;
}

#main-contents .m-section p {
font-size: 80%;
line-height: 1.6em;
}

#main-contents .u-a li {
font-size: 80%;
line-height: 1.8em;
padding-left: 23px;
background: url(../images/main-contents-u-a-li-bg.gif) 0px 4px no-repeat;
}

#main-contents .u-b li {
font-size: 80%;
line-height: 1.8em;
padding-left: 23px;
background: url(../images/main-contents-u-b-li-bg.gif) 0px 4px no-repeat;
}

#main-contents .d-a dt {
font-size: 80%;
font-weight: bold;
padding: 5px 5px 5px 23px;
border-bottom: 1px dotted #e4e4e4;
background: url(../images/main-contents-d-a-dt-bg.gif) 0px 4px no-repeat;
}

#main-contents .d-a dd {
font-size: 80%;
line-height: 1.8em;
padding: 5px;
margin-bottom: 5px;
}

#main-contents .d-b dt {
font-size: 80%;
font-weight: bold;
padding: 5px 5px 5px 23px;
border-bottom: 1px dotted #e4e4e4;
background: url(../images/main-contents-d-b-dt-bg.gif) 0px 4px no-repeat;
}

#main-contents .d-b dd {
font-size: 80%;
line-height: 1.8em;
padding: 5px;
margin-bottom: 5px;
}

#main-contents .about {
margin-bottom: 10px;
}

#main-contents .example {
padding: 10px;
margin: 10px;
border: 1px dotted #ccc;
background-color: #f9f9f9;
line-height: 1.6em;
}

#main-contents .line {
height: 0;
clear: both;
visibility: hidden;
}

#main-contents .line hr {
height: 0;
border: 0;
clear: both;
visibility: hidden;
}

/* サイドメニュー */

#side-contents {
width:190px;
float: right;
text-align: left;
overflow: hidden;
}

#side-contents h3 {
font-size: 80%;
padding: 0.3em 5px 0.3em 5px;
margin-bottom: 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #eee;
}

#side-contents .s-section {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #f3f3f3;
background: #fff;
}

#side-contents .s-section p {
font-size: 80%;
line-height: 1.4em;
}

#side-contents li {
font-size: 80%;
line-height: 1.6em;
padding-left: 18px;
background: url(../images/side-contents-li-bg.gif) 0px 4px no-repeat;
}

#side-contents dt {
font-size: 80%;
line-height: 1.4em;
font-weight: bold;
padding-bottom: 3px;
border-bottom: 1px dotted #e4e4e4
}

#side-contents dd {
font-size: 80%;
line-height: 1.4em;
padding-top: 3px;
margin-bottom: 5px;
}

#side-contents .about {
margin-bottom: 10px;
}

/* フッター */

#footer {
width: 800px;
padding: 10px 0 10px 0;
border-top: 1px dotted #ccc;
background: #fff;
}

#footer address {
font-size: 80%;
line-height: 1.4em;
}

#footer p {
font-size: 80%;
line-height: 1.4em;
}

#footer p.ft {
font-size: 60%;
}

