/*　スタイルシートファイル：ファイル名：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;
 }
 
/* ボディ */
#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>
//-->