@charset "utf-8";

/* 【サイト制作時共通設定】
・デフォルト設定初期化
・リンク標準書式
--------------------------------------*/
@import url("../css/default.css");

/* ◆目次◆
・レイアウト大枠設定
・ヘッダ（基本・ナビ・タイトル）
・サイド（メニュー・リンクボタン）
・ページトップへのリンク（最下部）
・フッダ
・メイン共通
　（テキスト書式・画像配置等）

・個別ページオリジナル書式
--------------------------------------*/

/* ■レイアウト大枠設定
--------------------------------------*/
body {
	font-size:80%; 
	font-family: "メイリオ", Meiryo, Osaka, 
				"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.6;
	color: #333;
	background: url(../images/body_base.jpg);
	text-align: center;
}
#wrapper {
	background: url(../images/back_base.jpg) repeat-y center;
	width: 820px;
	text-align: center;
	margin: 0px auto;
}
#container {
	width: 800px;
	text-align: left;
	margin: 0px auto;
	position: relative;
}
#header {
	background: url(../images/header/header_base.jpg) repeat-x top;
	height: 165px;
	position: relative;
}
#main {
	float: left;
	width: 555px;
	margin-top: 20px;
	padding-left: 20px;
}
#side {
	float: right;
	width: 200px;
	margin-top: 20px;
	padding-bottom:20px;
	position: relative;
	border-left: 1px solid #999;
}
#footer {
	background: #999;
	clear: both;
	height: 45px;
	position: relative;
}

/* ■ヘッダ

--------------------------------------*/
/*　▽サイト基本情報表示部
--------------------------------------*/
/* ロゴ部
--------------------------------------*/
#header h1 {
	height: 50px;
	width: 110px;
	position: absolute;
	top: 3px;
	left: 20px;
}
/* 注記（取り下げ）
--------------------------------------*/
#header .notice{
	font-size:90%;
	text-align:right;
	width: 600px;
	position: absolute;
	top:5px;
	right: 20px;
}
/*　▽グローバルナビ（floatによる横ﾘｽﾄ）
（hover時の設定は、smartRollover.jsにて）
--------------------------------------*/
#gNavi,#gNavi li,#gNavi li a {
	display: block;
	height: 36px;
}
#gNavi {
	width: 800px;
	position: absolute;
	top: 54px;
}
#gNavi li {
	float: left;
	width: 160px;
}
/*　▽カテゴリータイトル(h2)
--------------------------------------*/
#titleArea {
	height: 75px;
	width: 800px;
	position: relative;
	top: 90px;
	background: url(../images/header/title_base.jpg) repeat-y;
}
#header h2{
	font-size:125%;
	line-height: 1.3;
	letter-spacing: 0.2em;
	height: 50px;
	width: 500px;
	position: absolute;
	top: 15px;
	left: 40px;
	padding-left: 10px;
	color: #17372C;
}
#header h2 strong{
	font-size:130%;
	font-weight: bold;
	color: #1E4839;
	letter-spacing: 0.4em;
}
.titleImage {
	height: 75px;
	width: 120px;
	position: absolute;
	right: 40px;
}

/* ■サイド
--------------------------------------*/
/*　▽メニュー（縦ﾘｽﾄ）
--------------------------------------*/
#menuArea {
	width:180px;
	margin-top: 10px;
	padding-left: 10px;
	margin-bottom: 25px;
}
.menu li {
	font-weight:bold;
	background: url(../images/menu_icon.jpg) no-repeat left 10px;
	line-height: 1.2;
	margin-bottom: 10px;
	padding-left: 15px;
	border-top: 1px solid #666;
	padding-top: 10px;
}
.menu li a {
	color: #3A2D12;
	text-decoration:none;
}
.menu li a:hover{
	color:#144140;
	text-decoration:underline;
}
/*　▽メニュー分類（新規設置検討中）
--------------------------------------*/
.menuCategory{
	font-size: 110%;
	font-weight:bold;
	color: #000;
	background: #D7E8DB;
	padding-left:10px;
	border-top: 2px solid #59432B;
}

/*　▽リンクボタン
--------------------------------------*/
.yuzenLink {
	background: url(../images/link_button.jpg) no-repeat 0px 0px;
	height: 50px;
	width: 170px;
	display: block;
	margin-top: 10px;
	margin-left: 5px;
}
#side .yuzenLink {
	margin-top: 50px;
}
.yuzenLink a {
	text-indent: -9999px;
	height: 50px;
	overflow: hidden;
	display: block;
}
.yuzenLink a:hover {
	background: url(../images/link_button_f2.jpg) no-repeat 0px 0px;
}

/* ■フッタ
--------------------------------------*/
/* ▽フッダサブナビ
--------------------------------------*/
#footer .subNavi {
	position: absolute;
	right: 10px;
	top: 2px;
}
#footer .subNavi li {
	font-size: 95%;
	background: url(../images/bar_gray.gif) no-repeat left center;
	display: inline;
	padding-right: 10px;
	padding-left: 5px;
}
#footer .subNavi li a {
	color: #333;
	text-decoration: none;
}
#footer .subNavi li a:hover {
	color: #993300;
	text-decoration: underline;
}
/* ▽コピーライト表示
--------------------------------------*/
#footer address {
	font-size: 95%;
	font-style: normal;
	line-height: 1.6em;
	color: #BBB;
	background: #555;
	text-align: center;
	height: 1.6em;
	width: 800px;
	position: absolute;
	bottom: 0px;
}
#footer address a {
	color: #BBB;
}
#footer address a:hover {
	color: #ECE8B5;
	text-decoration: none;
}

/* ■メイン共通
--------------------------------------*/
/*　▼ページ内リンク
--------------------------------------*/
.pageTop {
	font-size: 95%;
	text-align: right;
	border-top: 2px dotted #666;
	clear: both;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top:10px;
}
.pageTop ul {
	list-style: url(../images/triangle.gif);
}
.pageTop a {
	color:#555;
	text-decoration:none;
}
.pageTop a:hover {
	color: #333;
	text-decoration:underline;
}
/* ▼ページ送り書式（利用取り下げ）
--------------------------------------*/
.page{
	clear:both;
	border-top: 2px dotted #666;
	margin-top: 10px;
}
.beforPage{
	width:250px;
	float:left;
	text-align:left;
	margin-top: 15px;
}
.thisPage{
	width:55px;
	float:left;
	text-align:center;
	margin-top: 15px;
}
.nextPage{
	width:250px;
	float:right;
	text-align:right;
	margin-top: 15px;
}

/*　▼テキスト書式
--------------------------------------*/
/*　▽タイトル（h3/h4/h5)
--------------------------------------*/
#main h3  {
	font-size: 150%;
	font-weight: bold;
	color: #371C15;
	letter-spacing: 0.5em;
	line-height: 1.4;
	border-left: 8px solid #361C12;
	padding-left: 0.8em;
	margin-bottom:10px;
}
#main h3 .h3sub  {
	font-size: 90%;
	font-weight:normal;
	color: #3F2C27;
	letter-spacing: 0.1em;
	padding-left: 0.1em;
}
#main h4 {
	font-size:125%;
	font-weight: bold;
	color: #311F15;
	letter-spacing: 0.3em;
	background: url(../images/subtitle_base.jpg);
	clear: both;
	display: block;
	line-height: 1.2;
	width:465px;
	margin-top: 30px;
	margin-bottom:10px;
	padding-left: 15px;
	padding-top:5px;
	padding-bottom:5px;
}
#main h4 .h4sub  {
	font-size: 90%;
	font-weight:normal;
	color: #3F2C27;
	letter-spacing: 0.1em;
	padding-left: 0.1em;
}
#main h5 {
	font-size:115%;
	font-weight: bold;
	color:#000;
	letter-spacing: 0.1em;
	background: url(../images/base_gray.gif);
	clear: both;
	padding-left: 15px;
	padding-top:2px;
	padding-bottom:2px;
	margin-top: 20px;
	margin-bottom:5px
}
#main h5 .h5sub  {
	font-size: 90%;
	font-weight:normal;
	letter-spacing: 0.1em;
	padding-left: 0.1em;
}
/*　▽強調コメント（concept）
--------------------------------------*/
.concept{
	font-size:110%;
	font-weight:bold;
	color:#512F1C;
	margin-left:10px;
}
/*　▽強調ポイント（point）
--------------------------------------*/
.point{
	font-size:115%;
	font-weight:bold;
	color:#592013;
}
/*　▽色表示（colBlue、colRed・・）
--------------------------------------*/
.colBlue{
	font-weight:bold;
	color:#1E205E;
}
.colRed{
	font-weight:bold;
	color:#632718;
}
.colYellow{
	font-weight:bold;
	color: #61501D;
}
.colGreen{
	font-weight:bold;
	color: #314E30;
}
/*　▽画像タイトル （imageCaption）
--------------------------------------*/
#main .imageCaption {
	font-size: 105%;
	font-weight: bold;
	color: #222;
	background: url(../images/point.gif) no-repeat left 0.5em;
	margin-top: 10px;
	padding-left:12px;
}
/*　▽画像補足 （imageNote）
--------------------------------------*/
#main .imageNote {
	font-size: 95%;
	color: #555;
}

/*　▼リスト書式
--------------------------------------*/
/*　▽リスト標準書式（ulBase）
--------------------------------------*/
.ulBase {
	margin-left:15px;
}
.ulBase li {
	color:#274E41;
	background: url(../images/point.gif) no-repeat left 0.5em;
	padding-left: 10px;
	line-height: 1.9;
}
.ulBase li a {
	color:#274E41;
	text-decoration:none;
}
.ulBase li a:hover{
	color:#555;
	text-decoration:underline;
}
/*　▽定義リスト並列表示（dlPara）
Profile/career
--------------------------------------*/
.dlPara {
	margin-left: 15px;
}
.dlPara dt {
	font-size:110%;
	color: #166361;
	background: url(../images/point.gif) no-repeat left 0.5em;
	padding-left: 10px;
	margin-bottom: 5px;
}
.dlPara dd {
	padding-left: 15px;
	margin-left: 11em;
	margin-top: -2em;
	margin-bottom: 5px;
}
/*　▽定義リスト改行表示（dlBr）
--------------------------------------*/
.dlBr {
	margin-left: 10px;
}
.dlBr dt {
	font-size:110%;
	font-weight:bold;
	color: #0D3C3A;
	letter-spacing:0.1em;
	background: url(../images/point.gif) no-repeat left 0.5em;
	padding-left: 10px;
	margin-top: 20px;
	border-top: 1px solid #999;
}
.dlBr dd {
	background: url(../images/arrow_s.gif) no-repeat left 0.5em;
	padding-left: 25px;
	margin-left: 15px;
	margin-bottom: 10px
}

/*　▼画像配置
--------------------------------------*/
/* W120 右1画像 （imageRs）
--------------------------------------*/
.imageRs  {
	float: right;
	width: 120px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 25px;
}
/* W150 右1画像 （imageR）
--------------------------------------*/
.imageR  {
	float: right;
	width: 150px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 25px;
}
/* W200 右1画像 （imageRm）
--------------------------------------*/
.imageRm {
	float: right;
	width: 200px;
	margin-bottom: 15px;
	margin-left: 20px;	
}
/* W300 右1画像（imageRl）
--------------------------------------*/
.imageRl  {
	float: right;
	width: 300px;
	margin-bottom: 20px;
	margin-left: 20px;	
}
/* W400 右1画像（imageRll）
--------------------------------------*/
.imageRll  {
	float: right;
	width: 400px;
	margin-bottom: 10px;
	margin-left: 20px;	
}

/*　▼エリア設定
--------------------------------------*/
/* 中央配置　　（imageCenter）
--------------------------------------*/
.imageCenter{
	text-align: center;
	margin-top: 10px;
}
/*　全巾エリア（imageWarea）
--------------------------------------*/
.imageWarea  {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 15px;
	position: relative;
}
/*　２列画像コメント配置 （imageBox）
--------------------------------------*/
.imageBox  {
	float: left;
	width: 260px;
	margin-bottom: 20px;
	padding-left: 15px;
	position: relative;
}

/* ■個別ページオリジナル書式
--------------------------------------*/

/*　▼system/api
ＡＰＩサンプルapi_result.jsによる表示
--------------------------------------*/
#apiSample{
	font-size:105%;
	margin: 10px;
	border-top: 1px solid #666;
}
.apiPage{
	text-align: center;
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
}
.apiBox {
	float: left;
	width: 165px;
	margin-top: 5px;
	margin-right: 18px;
	text-align: left;
}
.apiName {
	font-size:105%;
	color:#274E41;
	padding-left: 5px;
	margin-top: 15px;
	margin-bottom:5px;
	border-left: 4px solid #274E41;
	display: block;
	width: 180px;
}
.apiName a {
	color:#274E41;
}
.apiMemo {
	font-size:90%;
}

/*　▼support/photo（写真サンプル表示枠）
--------------------------------------*/
.textBorder{
	width: 500px;
	text-align: center;
	padding: 7px 3px;
	margin:10px auto;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px dashed #999;
	border-left: 1px solid #999;
}

/*　▼profile/index（プロフィール）
--------------------------------------*/
.yurai {
	margin: 10px 0px;
}
#profilePhoto{
	background: url(../%E6%8E%A7%E3%81%88/profile/images/index_face.jpg) no-repeat;
	float: right;
	height: 167px;
	width: 120px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 20px;
}

/*　▼contact（お問い合わせ）
--------------------------------------*/
#contact{
	width: 560px;
	margin: 20px auto;
	padding-left: 20px;
}
#contact table {
	width: 520px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#contact th {
	width:8em;
	background: #DFE6E8;
	margin-top: 5px;
	margin-right: 5px;
	padding-left: 5px;
	border-top: 2px solid #FFF;
}

/*　▼study/web/web_textbook（教本情報）
--------------------------------------*/
.bookinfo {
	font-size:90%;
	margin-top:7px;
	margin-left:50px;
	margin-bottom:12px;
}
/*　▼study/system/editor（ツールアイコン）
--------------------------------------*/
.icon  {
	float: left;
	width: 65px;
	margin: 10px;	
}