/*　スタイルシートファイル：ファイル名：style.css　*/

/* ID */
/* centering */
#SPC {
	text-align:center;
	width:100%;
}

/* ドキュメントの配置枠 */
#DOC {
	text-align: center;
	WIDTH: 620px;
	MARGIN: 0 auto;
	color: Black;
	font-size: 11pt;
	font-weight: normal;
	font-style: normal;
}
  
/* トップ */
#head {
	BACKGROUND-COLOR: GreenYellow; 
	background-color: LightYellow;
	/* FLOAT: left; */
	text-align: center;
	MARGIN: 0;
}
 
/* ヘッドライン */
#headline {
	background-color: #EEFFAA;
	background-color: FLORALWHITE;
	background-color: Snow;
	background-color: MintCream;
	/* Line-height: 1.2em; */
	/* height: 1.1em; */
	color: orange;
	font-size: 16pt;
	font-weight: bold;
	BORDER-TOP: gold SOLID 2px;
	BORDER-RIGHT: NONE;
	BORDER-BOTTOM: gold SOLID 2px;
	BORDER-LEFT: NONE;
}

/* ナビゲーション */
.navi {
/* BACKGROUND-COLOR: GreenYellow; */
/* background-color: LightYellow; */
/* background-color: Ivory; */
/* text-align: center; */
/* position:relative; */
 BORDER: none;
 WIDTH: 620px;
 MARGIN: 0 auto;
 }
.navi a {
 display: block;
 background: #FFFFFF url (img/navi_off.gif);
 width: 120px;
 height: 31px;
 margin: 0px;
 padding:3px 0px 3px 0px;
}
.navi a:link {
 background: #F8F8F8 url (img/navi_off.gif);
}
.navi a:hover {
 background: #FFFFFF url (img/navi_on.gif);
}
.navi a:active {
 background: #DDDDDD url (img/navi_click.gif);
}
.navi a:visited {
 /* background: #F8F8F8 url (img/navi_off.gif); */
} 
 
/* ボディ */
#bdy {
	/* BACKGROUND-COLOR: GreenYellow; */
	/* background-color: LightYellow; */
	/* background-color: Ivory; */
	/* text-align: center; */
	position:relative;
	BORDER: none;
	WIDTH: 620px;
	MARGIN: 0;
}
 
#main {
	/* BACKGROUND-COLOR: AliceBlue; */
	FLOAT: left;
	TEXT-ALIGN: left;
	WIDTH: 450px;
	MARGIN: 0;
	position:relative;
	BORDER: none;
	font-size: 11pt;
}

#main_clr {
	WIDTH: 450px;
	MARGIN: 0;
	background-color: #ffffff;
	position:absolute;
	top:0;
	left:0;
	filter: Alpha(opacity=60); /* IE系 */
	opacity: 0.60; /* Mozzila系 */
}

#side-l {
	/* BACKGROUND-COLOR: LightYellow; */
	/* BACKGROUND-COLOR: HoneyDew; */
	FLOAT: left;
	text-align: left;
	WIDTH: 170px;
	MARGIN: 0;
	position:relative;
	BORDER: NONE;
	font-size: 10pt;
}
 
#side-r {
	/* BACKGROUND-COLOR: LightYellow; */
	/* BACKGROUND-COLOR: HoneyDew; */
	FLOAT: right;
	text-align: left;
	WIDTH: 170px;
	MARGIN: 0;
	position: relative;
	BORDER: NONE;
	font-size: 10pt;
}
 
#left {
	width:610px;
	margin:0;
	position:absolute;
	top:0;
	left:0;
	filter: Alpha(opacity=75); /* IE系 */
	opacity: 0.75; /* Mozzila系 */
}
#right {
	width:170px;
	margin:0;
	position:absolute;
	top:0;
	left:0;
	filter: Alpha(opacity=75); /* IE系 */
	opacity: 0.75; /* Mozzila系 */
}

/* フッタ */
#foot {
	BACKGROUND-COLOR: GreenYellow; 
	background-color: LightYellow;
	/* FLOAT: left; */
	text-align: center;
	BORDER: none;
	WIDTH: 620px;
	MARGIN: 0;
}
 
/* copy right */
#copy {
	FLOAT: right;
	text-align: right;
	color: darkblue;
	font-size: 9pt;
	font-weight: normal;
	font-style: italic;
}

/* クラス */

/* 半透明背景の設定 */
.side_clr {
	width:170px;
	margin:0;
	position:absolute;
	top:0;
	left:0; 
	filter: Alpha(opacity=70); /* IE系 */
	opacity: 0.70; /* Mozzila系 */
}

.clr_bg {
	background-color: #ffffff;
	filter: Alpha(opacity=75); /* IE系 */
	opacity: 0.75; /* Mozzila系 */
	
}

/* ラッピング */
.wrapper {
	margin: 2px 4px;
}

/* スペース調整 */
.spacer {
	width:620px;
	position:relative;
	top:0;
	left:0;
}

/* メニュー */
.menu {
	border:solid 1px grey;
	float:left;
}

/* 汎用ブロック */

.full-r {
	/* BACKGROUND-COLOR: LemonChiffon; */
	FLOAT: center;
	text-align: right;
	BORDER: NONE;
	WIDTH: 620px;
	MARGIN: 0;
}

.full-c {
	/* BACKGROUND-COLOR: LemonChiffon; */
	FLOAT: center;
	text-align: center;
	BORDER: NONE;
	WIDTH: 620px;
	MARGIN: 0;
}

/* ブロック */
.1by4 {
	BACKGROUND-COLOR: LemonChiffon; 
	BORDER: NONE;
	WIDTH: 112px;
	MARGIN: 0;
}
 
.1by2 {
	BACKGROUND-COLOR: SpringGreen; 
	BACKGROUND-COLOR: AliceBlue; 
	BORDER: NONE;
	WIDTH: 225px;
	MARGIN: 0;
}

.3by4 {
	BACKGROUND-COLOR: SpringGreen; 
	BACKGROUND-COLOR: AliceBlue; 
	BORDER: NONE;
	WIDTH: 337px;
	MARGIN: 0;
}

.1by3 {
	BACKGROUND-COLOR: SpringGreen; 
	BACKGROUND-COLOR: AliceBlue; 
	BORDER: NONE;
	WIDTH: 150px;
	MARGIN: 0;
}

.2by3 {
	BACKGROUND-COLOR: SpringGreen; 
	BACKGROUND-COLOR: AliceBlue; 
	BORDER: NONE;
	WIDTH: 300px;
	MARGIN: 0;
}

/* ブロックの回り込み回避 */
.clr { clear: both; }
 
/* タグ  表示・表現形式 */
A:link {
   color: blue;
}
A:visited {
   color: mediumvioletred;
}
A:active {
   color: red;
}
A:hover {
   color: orangered;
}

BODY {
	BACKGROUND-COLOR: #005511;
	BACKGROUND-COLOR: Snow;
	BACKGROUND-COLOR: ForestGreen;
	background-color: FLORALWHITE;
	BACKGROUND-COLOR: Ivory;
	background-image: URL("tsg21_yel.gif"); 
	TEXT-ALIGN: center;
	color: marron;
}

h1 {
	background-color: FLORALWHITE;
	background-color: SnowWhite;
	background-color: MintCream;
	text-align: center;
	/* Line-Height: 1.2em */
	font-size : 18pt;
	font-family : "HGP行書体", "ＭＳ 明朝", "Osaka", "Serif";
	font-family : "HG正楷書体-PRO", "ＭＳ 明朝", "Osaka", "Serif";
	font-family : "HGP創英角ﾎﾟｯﾌﾟ体", "ＭＳ ゴシック", "Osaka", "Serif";
	font-weight : bold;
	color: mediumblue;
	color: DEEPPINK;
	margin : 0;
	Padding: 4px 0 4px 0;
}

h2 {
	font-size : 16pt;
	font-family : "ＭＳ 明朝", "Osaka", "Serif";
	font-family : "ＭＳ ゴシック", "Osaka", "Serif";
	font-weight : bold;
	background-color: MintCream;
	background-color: SnowWhite;
	background-color: FLORALWHITE;
	background-color: Ivory; /* */
	margin : 0;
	Padding: 4px 0 4px 0;
}

h3 {
	font-size : 14pt;
	font-family : "ＭＳ 明朝", "Osaka", "Serif";
	font-family : "ＭＳ ゴシック", "Osaka", "Serif";
	font-weight : bold;
	color:#000044;
	margin : 0;
	Padding: 2px 0 2px 0;
}

h4 {
	font-size : 12pt;
	font-family : "ＭＳ 明朝", "Osaka", "Serif";
	font-family : "ＭＳ ゴシック", "Osaka", "Serif";
	font-weight : bold;
	color:#000044;
	margin : 0;
	Padding: 2px 0 2px 0;
}

h5 {
	font-size : 11pt;
	font-family : "ＭＳ 明朝", "Osaka", "Serif";
	font-family : "ＭＳ ゴシック", "Osaka", "Serif";
	font-weight : bold;
	color:#000044;
	margin : 0;
	Padding: 2px 0 2px 0;
}

h6 {
	font-size : 10pt;
	font-family : "ＭＳ 明朝", "Osaka", "Serif";
	font-family : "ＭＳ ゴシック", "Osaka", "Serif";
	font-weight : bold;
	color:#000044;
	margin : 0;
}

p {
	margin: 2px 4px;
	font-size: 11pt;
}

em {
	color: Red;
	font-size: 10pt;
	font-weight : normal;
	font-style: normal;
}

i {
	font-weight : bold;
	font-style: italic;
}

strong {
	color: Red;
	font-weight: bold;
}

b {
	font-weight: bold;
}
dt {
	font-size:11pt;
}
dd {
	font-size:10pt;
}

/* 角丸背景 */
.round {
	margin:4px;
	/* background:ivory; */
	background:white; /*  */
	//filter: Alpha(opacity=70); /* IE系 */
	//opacity: 0.7; /* Mozzila系 */
	/* color:#fff; */
}
.round i.itop, .round i.ibottom {
	display:block;
	background:#c8c8c8;
	/*
	background:#e0e0e0;
	background:lightgrey;
	*/
	//filter: Alpha(opacity=70); /* IE系 */
	//opacity: 0.7; /* Mozzila系 */
}
.round i.itop i, .round i.ibottom i {
	display:block;
	height:1px;
	overflow:hidden;
	/* background:ivory; */
	background:white;
	//filter: Alpha(opacity=70); /* IE系 */
	//opacity: 0.7; /* Mozzila系 */
}
.round i.i1 {
	margin:0 5px;
}
.round i.i2 {
	margin:0 3px;
}
.round i.i3 {
	margin:0 2px;
}
.round i.itop i.i4, .round i.ibottom i.i4 {
	margin:0 1px;
	height:2px;
}

/*
<div class="round">
<!-- フタ -->
<i class="itop">
<i class="i1"></i><i class="i2"></i><i class="i3"></i><i class="i4"></i>
</i>
<!-- フタ -->
<!-- 中身 -->
<p>ブロック要素に角丸を使うことができれば、デザインの幅も広がります。でも画像を使うのは面倒だし・・・悩んでいていろいろ調べてみたらCSSのみで角丸を実現する方法が書いていたんです。ということで、備忘録代わりにここに記すことにします。いやー、スタイルシートって奥が深い。こんな方法思いつかなかったよ。でも<span>の中は空っぽなのでHTMLの文法的にはアウトかもしれませんね（汗</p>
<!-- 中身 -->
<!-- 底 -->
<i class="ibottom">
<i class="i4"></i><i class="i3"></i><i class="i2"></i><i class="i1"></i>
</i>
<!-- 底 -->
</div>
*/

-->
/* </style> */

<!-- ＨＴＭＬのヘッダ記述およびスタイルシートの呼び出し

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Language" content="ja">
<meta name="KEYWORD" content="Word1, Word2, Word3, ...">
<meta name="DESCRIPTION" content="ホームページの説明文">
<META name="robots" content="none | noindex | nofollow | index | all ←どれか１つにする">
<TITLE>
タイトル
</TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
<link rel=stylesheet href="style.css" type="text/css">
</HEAD>
//-->