@charset "utf-8";
/*
--------------------------------------------------------------------------------
プログラミング講座スタイルシート
作成者：山室千尋
作成日：2008/08/11
--------------------------------------------------------------------------------
目次：
・基本構造（ページ全体のフレーム構造やデフォルト指定などを作成）
・リンク（リンクのマウスオーバーや挙動等の指定）
・ヘッダ（ヘッダのレイアウト指定）
・ナビゲーション（メニューのマウスオーバー、挙動、レイアウト等の指定）
・タイトル（ページタイトルのレイアウト指定）
・サイドバー（サイドバーのレイアウト指定）
・メインコンテンツ（メインコンテンツのレイアウト指定）
・フォーム（フォームのレイアウト指定）
・フッター（フッターのレイアウト指定）
・その他（上記に含められないCSS）
--------------------------------------------------------------------------------
注意事項：
■CSSの名称は、小文字だけにして下さい。
■ページの構造は、横幅760px（サイドバー250px／コンテンツ760px）で作成。
　レイアウトに合わせて適時変更して下さい。
■基本フォントサイズは、.pageで14pxに指定しています。
■ひとまず、ページ固有のCSSなども上記構造内に書いて下さい。
　全ページ共有のサイドサイドバー指定と、固有ページだけのサイドバー指定などは、
　後ほど切り分けのテクニックで分類を検討します。
■印刷用のCSS、クロスブラウザ用のCSSについては、別に作成してインポートする予定。
--------------------------------------------------------------------------------
*/


/* =基本構造（ページ全体のフレーム構造やデフォルト指定などを作成）
-------------------------------------------------------------------------------- */
body
{
	margin: 0; /* 複数の異なるブラウザの初期設定値に対応設定 */
  	padding: 0; /* 複数の異なるブラウザの初期設定値に対応設定 */
  	text-align: center; /* IE 5* ブラウザ用の中央揃え指定（.pageの指定が優先される） */
  	/* background: #A9ACB9; RGB242灰色 ENdoSnipeと同様の色 */
	background:#f2f4f4 url(../img/basic/background.gif) repeat-y top center;
	text-align:center;
}

.page
{
	font-size:15px;
	width: 700px;
	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります（モダンブラウザ設定） */
	text-align: left; /* この設定は body エレメントの text-align: center より優先される */
	background:  url(../img/background.gif);
	font-family: Arial, Helvetica, sans-serif;
 }

.Aheader
{
  	width: 700px;
}

.main_img
{
	background-image:url(../img/main_img.gif);
  	width: 700px;
	height:350px;
}

.content
{
  	width: 690px;
}

.content .contentmain
{
	float: right;
	width: 480px;
}

.content .index
{
	float: left;
	width: 195px;
}



.content .contentmain .info
{
	background-color:#FFFFFF;
	font-size:14px;
	padding-left:10px;
}

.content .contentmain .note
{
	background-color:#FFFFFF;
	width:480;
}


.content .contentmain .button
{
	width: 480px;
	text-align:right;
}

.content .contentmain .jatsbanner
{
	float: left;
	width: 213px;
}

.content .contentmain .endosnipebanner
{
	float: left;
	width: 213px;
	margin-left:10px;
}

h1
{
  font-size:20px;
}

/* =リンク（リンクのマウスオーバーや挙動等の指定）
-------------------------------------------------------------------------------- */

a
{
	
}

a:link
{
}

a:visited
{
}

a:hover
{
 	 color: #FF0000;
  	text-decoration: underline;
}

a:active
{
}

/* パンくずリンクの設定 */
.page .pan-link
{
  	margin-top: 5px;
  	margin-bottom: 5px;
  	margin-left: 5px;
  	font-size: 12px;
}

.page .pan-link .here
{
  	font-weight: bold;
}

/* =ヘッダ（ヘッダのレイアウト指定）
-------------------------------------------------------------------------------- */
.page .header .page-header
{
	background:url(../img/devcast_common_header.gif);
	height:130px;
}



/* 例 */
  /* .header .page-header
     {
       background: url(../common/page.gif); 背景を指定する
       height: 30px;
     } */

/* =ナビゲーション（メニューのマウスオーバー、挙動、レイアウト等の指定）
-------------------------------------------------------------------------------- */


/* =タイトル（ページタイトルのレイアウト指定）
-------------------------------------------------------------------------------- */

/* 例 */
	/* ページ固有のタイトル画像設定 */
	/*#aisatsu .title { background: url(../aisatsu/img/title-aisatsu.gif); }*/


/* =サイドバー（サイドバーのレイアウト指定）
-------------------------------------------------------------------------------- */

/* =メインコンテンツ（メインコンテンツのレイアウト指定）
-------------------------------------------------------------------------------- */

/* 例 */
	/* ページ固有のページ背景色設定 */
	/*#aisatsu .content2{ background-color: #AAD269; }*/


/* エスエムジー株式会社 SMGトップページ固有設定
------------------------------------------------------------ */


#smg-top .page .main_img
{
  	width: 700px;	
}

#smg-top .page .menubar
{
	width:700px;
}


/* -- メインのボタン部分 -- */
#smg-top .page .content .contentmain
{
	width:480px;
	float:right;
	margin-left:0px;
}

#smg-top .page .content .index
{
	width:195px;
	height:806px;
	float:left;
	margin-top:0px;
	margin-left:5px;
	background-image:url(../img/index.png);
}

#smg-top .page .content .contentmain .link
{
	margin-top:10px;
}


/* side menu*/
.page .content .index .side-top {
	margin-top:0px;
	margin-left:10px;
}
.page .content .index h1 {
	font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size:14px;
	margin-top:30px;
	margin-left:10px;
}
.page .content .index h2 {
	font-size:12px;
	text-indent:1em;
	margin-left:15px;
	margin-top:-15px;
	margin-bottom:-15px;
}
.page .content .index .side-middle {
	margin-top:-12px;
	margin-left:10px;
}
.page .content .index ul{
	list-style-image: url(../img/icon.gif); 
	font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size:12px;
	margin-left:20px;
}

/* 詳細文章設定 */
.page .content .contentmain .note .chapter
{
	font: bold 24px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	text-decoration: underline;
	text-align: center;
}

.page .content .contentmain .note .section
{
	font: 18px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

.page .content .contentmain .note h3
{
	font: 16px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

.page .content .contentmain .note P
{ font: 14px/1.25em "ＭＳ Ｐ明朝", 細明朝体, "ヒラギノ明朝 Pro W3"; 
}

.page .content .contentmain .note .list
{
	font: 14px/1.25em "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	list-style: none;
}

.page .content .contentmain .note .diagram-chart
{
	font-size:12px;
}

/* =フォーム（フォームのレイアウト指定）
-------------------------------------------------------------------------------- */

/* =フッター（フッターのレイアウト指定）
-------------------------------------------------------------------------------- */

.footer
{
	height: 30px;
	width:760px;
	background: url(../img/top/footer.gif);
}

/* =その他（上記に含められないCSS）
-------------------------------------------------------------------------------- */

/* clear
------------------------------------------------------------ */
.clear
{
	clear: both;
}

/* clearfix
------------------------------------------------------------ */
.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}

.clearfix
{
	display: inline-block;
}

.red
{
	color:red;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */