@charset "Shift_JIS";
/* 以下は亡備メモ
/* 参考 URL : http://www.stylish-style.com/csstec/base/write.html
#xxx はID、.xxxはクラス
#dai3-midashi -> IDがdai3-midashiのみ適用
.han-midashi -> 全要素のクラスで適用可能
h1 , h2 -> h1とh2に同じ属性を設定
h2.sub-midashi -> h2要素のクラスで適用可能
h2#dai2-midashi -> IDがdai2-midashiのみ適用
セレクタがダブったら？
div.menu{
width:150px;
height:85px;
background-color:#FFFFFF;
}
ul.menu{
background-color:#FF0000;
}
.（ピリオド）の前に適用したいタグの記述するだけです。 HTMLでは次のように書きます
こうするとclass名は同じですが、ちゃんと表示はちがって見えます
まとめ書き
ul#menu{
color:#993300;
border:#006699 solid 2px;
}
#menu li{
font-size:medium;
}
この場合、回の場合はID="menu"の中にある（子孫要素である）liに対するスタイルを指定。
*/
/* p:first-letter -> ブロックレベル要素の先頭一文字にスタイル適用 */
/* 全体の設定。ここでborder:noneに設定すると画像が拡大されなくなる。
*/
* {
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
margin: 0;
padding-bottom: 0px;
}
#my_body {
width: 850px;
overflow: inherit;
background-color: #FFFFFF;
}
h1 { margin: 0; padding: 0 }
/* p { color: navy } */
.main {
color: black;
font-size: smaller;
background-color: #ffc;
margin-top: 0px;
margin-left: 190px;
width: 680px;
padding-bottom: 10px;
height: auto;
}
.main h1 { color: #666666; font: bold 1.5em arial; text-align: left; text-indent: 0; margin: 1px 10px 10px 0; padding: 5px 2px 2px 10px; width: 80%; border-style: solid; border-width: 0 0 2px 15px; border-color: #cccccc #cccccc #cccccc #39c }
.main h2 { color: #666666; font: bold 1.2em arial; text-align: left; text-indent: 0; margin: 1px 10px 10px 5px; padding: 5px 2px 2px 10px; width: 80%; border-style: solid; border-width: 0 thin 1px 10px; border-color: #cccccc #cccccc #cccccc #699 }
.blueback2 {
background-color: #39c;
}
.main h3 { color: #666666; font: bold 1em arial; text-align: left; text-indent: 0; margin: 5px 10px 10px; padding: 5px 2px 2px 10px; border-style: solid; border-width: 0 medium 1px 10px; border-color: #cccccc #cccccc #cccccc #8080ff }
.main h4 { color: #666666; font: bold 0.9em arial; text-align: left; text-indent: 0; margin: 1px 10px 10px 15px; padding: 5px 2px 2px 10px; width: 80%; border-style: solid; border-width: 0 medium 1px 10px; border-color: #cccccc #cccccc #cccccc #8080ff }
.main h5{ padding:5px 2px 2px 10px ;border-top: 0px solid #cccccc ; border-bottom: 1px solid #cccccc; border-right: px solid #cccccc; margin: 1px 10px 10px; font: bold 0.8em 'arial' color: #666666; text-indent: 0px; text-align left width: 80%; border-left: 10px solid #8080ff}
.main GoTop { color: black; font-size: small; font-weight: bold; background-image: none; list-style-type: disc; margin: 0 }
/* Menuエリアの定義 匿名IDになってしまうので、#menuも作った？*/
#menu {
visibility: visible;
position: absolute;
left: 1px;
width: 160px;
top: 139px;
height: 385px;
}
.blueback {
background-color: #9cc;
}
.menu { font-size: 80%; font-weight: bold; line-height: 1; position: absolute; left: 0; width: 160px }
.menu h2 { color: #666666; font: bold 1.2em arial; text-align: left; text-indent: 0; padding: 5px 2px 2px 10px; border-style: solid; border-width: 0 thin 1px 10px; border-color: #cccccc #cccccc #cccccc #8080ff }
.menu h3 { color: #666666; font: bold 1em arial; text-align: left; text-indent: 0; padding: 5px 2px 2px 10px; border-style: solid; border-width: 0 thin 1px 10px; border-color: #cccccc #cccccc #cccccc #8080ff }
.menu img { background-color: white; background-position: 180px 0 }
/* FireFoxdでは、以下の定義はうまくいかない。上位の定義が継承されていないのでは。再定義が必要。*/
.largemenu { color: #666666; font: bold 1em arial; text-align: left; text-indent: 0; display: block; margin: 1px 0 0; padding: 5px 2px 2px 10px; height: 25px; border-style: solid; border-width: 0 medium 1px 10px; border-color: #cccccc #cccccc #cccccc #8080ff }
a.largemenu { color: #666666; font: bold 1em arial; background-color: #cff; text-align: left; text-indent: 0; display: block; margin: 1px 0 0; padding: 5px 2px 2px 10px; width: 160px; height: 25px; border-style: solid; border-width: 0 thin 1px 10px; border-color: #cccccc #8080ff }
a:hover.largemenu { background-color: #fcc }
a:active.largemenu { background-color: #0000ff; border-color: black #ffffff #ffffff black }
.smallmenu { color: #666666; font: bold 1em arial; text-align: left; text-indent: 0; display: block; margin: 1px 0 0; padding: 5px 2px 2px 10px; height: 20px; border-style: solid; border-width: 0 medium 1px 10px; border-color: #cccccc #cccccc #cccccc #3c6 }
a.smallmenu { color: #666666; font: bold 1em arial; background-color: #cff; text-align: left; display: block; margin: 1px 0 0; padding: 5px 2px 2px 10px; width: 160px; height: 25px; border-style: solid; border-width: 0 1px 1px 15px; border-color: #cccccc #3c6 }
a:hover.smallmenu { background-color: #c6c }
a:active.smallmenu { background-color: #0000ff; border-color: black #ffffff #ffffff black }
#headline .main { color: black; font-weight: bold; background-color: fuchsia; margin-left: 190px }
#buttomline {
color: navy;
font-weight: bold;
background-color: #9cc;
text-align: center;
position: relative;
left: 189px;
width: 680px;
top: inherit;
}
/*html*#body{
font-size:smaller;
}*/
/*
---- HTML --------
この技はアンカータグの中にimgタグで２つの画像を埋め込んであります。２つの画像にはsmallとzoomの２つの違ったクラスを指定してあり、通常はzoomの画像をdisplay:none;で非表示にし、マウスが乗った時に display:block;で表示するようにしてあります。
*/
/*画像の拡大表示*/
/*.imgmag{} */
.imgmag a:link img.zoom,
.imgmag a:visited img.zoom,
.imgmag a:active img.zoom,
.imgmag a:focus img.zoom{
display:none;
border-style:none;
}
.imgmag a:hover{background-color:transparent;}
.imgmag a:hover img.zoom{
border-style:none;
display:block;
}
.imgmag a:link img.small,
.imgmag a:visited img.small,
.imgmag a:active img.small,
.imgmag a:focus img.zoom{
border-style:none;
display:block;
}
.imgmag a:hover img.small{
border-style:none;
display:none;
}
.imgmag h5 { text-align: center }
/*
.imgmag img { margin: 0; padding: 0 }
a:hover.imgmag {;display: block ;width="600";height="300";style="zoom:1.5;"}
*/
/*;style="zoom: 2.0;" } */
/*
address { font-style: normal; text-align: center; margin: 2em 1em 1em }
a:link, a:visited { text-decoration: none }
*/
/*logoエリア これがないと画像が２段になってしまう */
.logo { position: absolute; top: 10px }
#leftlogo { left: 0 }
#rightlogo { text-align: center; left: 190px; width: 680px }
/* #rogo_pr_pr2 { left: 650px; width: 100px } */
/* 空のDIVでくくった */
#top { }