/*
    標準の変更
*/
/* ブラウザごとの余白をリセットする */
/* 全称セレクタ * { } による指定は使用中止
   IE6 で名前を付けて保存すると * が消されてしまいレイアウトが壊れる */
h1,h2,h3,h4,h5,h6,
ul,ol,dl,dt,dd,li,
table,tbody,thead,tfoot,tr,td,caption,
hr,p,area,em,strong,abbr,acronym,
img,a,address,cite,q,blockquote,
div,span,
html,body {
  margin : 0px;
  padding : 0px;
}

/*
    IE6 で横スクロールバーを表示させない設定
    Star HTML Hack を使って IE6 以下だけに適用させる
使用中止
* html {
  overflow-x : hidden;
}
*/

body {
  line-height : 150%;
  padding : 5px 10px;
  /* margin だと IE6 で印刷時にヘッダ右端が切れる */
}

em {
  font-weight : bold;
  font-style : normal;
  color : red;
}

/* em の文字色 */
em.blue {
  color : blue;
}

em.black {
  color : black;
}

em.pink {
  color : #ff00ff;
}

/* IE8 では <q> によって「」が挿入されるため
   <q>「...」</q> というソースが IE8 では
   「「...」」と表示されてしまう。
   <q> の使用をやめて <em class="q"> に替える */
em.q {
  font-weight : bold;
  font-style : normal;
  color : #880000;
}

q {
  font-weight : bold;
  font-style : normal;
  color : #880000;
}

blockquote {
  margin-left : 4em;
  font-size : small;
}

blockquote.bothmargin {
  margin-left : 4em;
  margin-right : 4em;
  font-size : small;
}

/* font-style : italic; であることを前提として */
cite {
  margin-right : 0.5em;
}


/*
    float 指定・解除
    使い方は pickup.html を参照
    contents 領域内での回り込み制御を想定
    写真の横に文章を回り込ませたものを、
    写真ごとに縦に積み上げた形を作るもの
*/
.floatright {
  float : right;
}

.floatleft {
  float : left;
}

/* Netscape7.1 などで不具合があるので廃止
.floatl2left {  clear : left;  float : left;}
.floatl2right {  clear : left;  float : right;}
.floatr2left {  clear : right;  float : left;}
.floatr2right {  clear : right;  float : right;}
*/

.clearleft {
  clear : left;
}

.clearright {
  clear : right;
}

.clearboth {
  clear : both;
}

/*
    <a> 関係
*/
a {
  text-decoration : none;
}

a:link {
  color : blue;
}

a:visited {
  color : purple;
}

/* hover は visited の後で設定すること */
a:hover {
  text-decoration : underline;
  color : red;
/*  background-color : #ffecec; */
/*  背景色を付けると透過画像でのリンクの扱いが面倒 */
}

a img {
  border : none;
}


/*
    表示関係
*/
.hidden {
  display : none;
}

.center {
  text-align : center;
  margin-left : auto;
  margin-right : auto;
}

/*
   IE8 で互換表示でない場合に
     <div class="center">
       <table>〜</table>
     </div>
   がセンタリングしないことへの対応
*/
div.center table {
  margin-left : auto;
  margin-right : auto;
}

.left {
  text-align : left;
  margin-right : auto;
  margin-left : 0px;
}

.right {
  text-align : right;
  margin-left : auto;
  margin-right : 0px;
}

/* top と bottom の使い方 (news20101201.html)
   <p class="imagebox">
   <span class="top"><img ...></span>
   <img ...>
   <span class="bottom"><img ...></span>
   </p>
*/
.top {
  vertical-align : top;
}

.bottom {
  vertical-align : bottom;
}

.middle {
  vertical-align : middle;
}

.sup {
  vertical-align : super;
  font-size : small;
}

.sub {
  vertical-align : sub;
  font-size : small;
}

.small {
  font-size : small;
}

.small75 {
  font-size : 75%;
  line-height : 120%;
}

.medium {
  font-size : medium;
}

.large {
  font-size : large;
}

.large150 {
  font-size : 150%;
}

.large200 {
  font-size : 200%;
}

.bold {
  font-weight : bold;
}

.normal {
  font-weight : normal;
}

.nowrap {
  white-space : nowrap;
}

/* ブロック要素を行内に並べて表示する */
.inlineblock {
  display : inline-block;
}


/*
    色の指定
*/
.black {
  color : black;
}

.blue {
  color : blue;
}

.red {
  color : red;
}

.pink {
  color : #ff00ff;
}


/*
    ルビの疑似表示
    <ruby> は IE独自仕様なので使用しない

    <span class="ruby">○○○○<span class="rp">(</span><span 
    class="rt">△△</span><span class="rp">)</span></span>
*/
span.ruby {
  display : inline;
  position : relative;
  top : 0;
  bottom : 0;
  padding : 0;
  line-height : 1em;
}

span.rp {
  display : none;
}

span.rt {
  display : inline;
  position : absolute;
  top : -1.5em;
  left : 0;
  font-size : 50%;
  line-height : 1.5em;
  white-space : nowrap;
  text-indent : 0;
  /* ルビの文字数×２（ルビの幅は本体の50%）が本体文字数より少ない場合は
     直接 span に style 指定で left, letter-spacing を設定すること
     （group01.html を参照）

    <span class="ruby">○○<span class="rp">(</span><span class="rt" 
     style="left : 0.5em; letter-spacing : 1em;">△△</span><span 
    class="rp">)</span></span>

    <span class="ruby">○○○<span class="rp">(</span><span class="rt" 
     style="left : 0.5em;>△△</span><span class="rp">)</span></span>
  */
}

a:link span.rt {
  text-decoration : none;
}

a:visited span.rt {
  text-decoration : none;
}

/* ルビを使用している p に指定する */
p.rubypara {
  line-height : 1.8em;  /* default は body で定義 */
}


/* ---------------------------------
   header
   ヘッダー領域
   ページ最上部に配置
------------------------------------ */

#header {
  width : 100%;
  padding-left : 5px;
  font-size : 12px;     /* 固定サイズ */
}

#header h1 {
  float : left;
}

#headerright {
  float : right;
  text-align : right;
  padding-right : 5px;
}

/* サイト検索　Google Search */
#headerright form {
  margin : 0px;
  padding : 0px;
}

#headerright ul {
  list-style-type : none;
}

#headerright ul li {
  display : inline;
  white-space : nowrap;
}

#headerright ul li img {
  margin-left : 2em;
  margin-right : 5px;
}

hr#titleborder {
  clear : both;
  background-color : blue;
  height : 5px;
  border : none;
}

/* ---------------------------------
   ddmenu
   ドロップダウンメニュー
------------------------------------ */
#ddmenu {
  height : 32px;        /* #dropmenu の height 24px + 8px とする */
  margin-left : 0%;
  margin-right : 0%;
}

* html #ddmenu {
  /* IE6 ではサブメニューを表示しないため表示させない */
  display : none;
}

*:first-child+html #ddmenu {
  /* IE7 では直上にある hr との間隔を打ち消す */
  margin-top : -8px;
}

#dropmenu {
  list-style-type: none;
  height : 24px;        /* #dropmenu li a の line-height */
  margin : 0;
  padding : 0;
  border-bottom : solid 1px #000099;  /* h4 に合わせた */
}

#dropmenu li {
  position : relative;
  width : 14%;          /* 100÷項目数＝100%/7項目=14% */
  float : left;
  margin : 0;
  padding : 0;
  text-align : center;
  white-space : nowrap;
}

#dropmenu > li:last-child {
  width : 16%;          /* 100-14*(7-1)=16% */
}

#dropmenu li a {
  display : block;
  margin : 0;
  padding : 6px 0px;
  color : #000099;  /* h4 に合わせた */
  font-size : 12px;
  font-weight : normal;
  line-height : 1;      /* 上下のpadding＋font-size の大きさ 12+12=24px */
  text-decoration : none;
  background-color : #f3f3f3;  /* h4 に合わせた */
}

#dropmenu li:hover > a {
  color : red;
  text-decoration : underline;
  background-color : #ffecec;
  border-left : solid 1px #000099;   /* h4 に合わせた */
  border-right : solid 1px #000099;  /* h4 に合わせた */
}

/*
  サブメニュー
*/
#dropmenu li ul {
  list-style : none;
  position : absolute;  /* #dropmenu li に対して位置決め */
  top : 100%;           /* #dropmenu li の直下に表示する */
  left : 0;
  margin : 0;
  padding : 0;
  z-index : 2;          /* これがないとルビが上に透けて見える */
  /* #dropmenu li ul li に対する width 指定が */
  /* li 要素が１つの場合に効果がないため、    */
  /* ここにも width 指定が必要                */
  width : 100%;
}

#dropmenu li ul li {
/*  display : none;  display による表示切り替えは transition 効果がない */
  width : 100%;         /* メインメニューの幅 */
  overflow : hidden;    /* 初期状態を非表示に */
  height : 0;           /* 初期状態を非表示に */
/*  color : white;*/
  /* transition でオンマウス時の変化に動きをつける */
  -moz-transition : 0.2s;
  -webkit-transition : 0.2s;
  -o-transition : 0.2s;
  -ms-transition : 0.2s;
  transition : 0.2s;
}

#dropmenu li ul li a {
  padding : 10px 10px;
  background-color : #f3f3f3;  /* h4 に合わせた */
  text-align : left;
  font-size : 12px;
  border : 1px solid #000099;  /* h4 に合わせた */
  color : #000099;  /* h4 に合わせた */
}

#dropmenu li:hover ul li {
/* display : block;  display による表示切り替えは transition 効果がない */
  overflow : visible;
  height : 32px; /* #dropmenu li ul li a の上下の padding＋font-size=10*2+12 */
}

/* ---------------------------------
   mainaera
   メインの領域
------------------------------------ */
#mainaera {
  /* ここに margin を指定しても無効 */
}

/* ---------------------------------
   topicpath
   いわゆる「パンくずリスト」の領域
   mainarea の上部に配置
------------------------------------ */
#topicpath {
  clear : both;
  margin-left : 10%;
  margin-right : 10%;
}

#topicpath p {
  font-size : 80%;
}

/* ---------------------------------
   contents
   本文領域
   mainarea の下部に配置
------------------------------------ */
#contents {
  margin-left : 10%;
  margin-right : 10%;
}

#contents h3 {
  line-height : 160%;
  font-size : 120%;
  margin-top : 0.5em;
  margin-bottom : 1.5ex;
  padding : 1px 1ex 0px 1ex;
  border-bottom : solid #000099 1px;
  color : #000099;
  background : #e1fcff;
  background : url(h3bg.jpg) repeat-x left bottom;
  /* IE6 では印刷されない */
}

#contents h4 {
  font-size : 100%;
  margin-top : 1em;
  margin-bottom : 1.5ex;
  padding : 1px 1ex 0px 1ex;
  border-left : solid #000099 8px;
  border-bottom : solid #000099 1px;
  background-color : #f3f3f3;
  color : black;
}

#contents h5 {
  font-size : 100%;
  color : black;
  margin-top : 1em;
  margin-bottom : 1.5ex;
  padding : 1px 1ex 0px 1ex;
  border-bottom : solid black 1px;
}

#contents h6 {
  font-size : 100%;
  color : black;
  margin-top : 1em;
  margin-bottom : 1.5ex;
  padding : 1px 1ex 0px 1em;
/*  border : solid black 1px;*/
}

/* h6 を使う場合は
   indent_h6 クラスの div で囲む */
#contents div.indent_h6 {
  margin-left : 1em;
}

#contents p {
  margin : 0.5em 2ex 0.5em 2ex;
/*  text-indent : 1em; */
/*  基本を 0em とし必要に応じて各ページで 1em とする */
}

#contents .textindent {
  text-indent : 1em;
}

/* 囲み */
#contents div.border {
  border : solid black 1px;
}

#contents div.borderpadding {
  border : solid black 1px;
  padding : 1ex;
}

#contents span.border {
  border : solid black 1px;
}

#contents span.borderpadding {
  border : solid black 1px;
  padding : 1ex;
}

#contents .border {
  border : solid black 1px;
}

#contents .border-top {
  border-top : solid black 1px;
}

#contents .border-bottom {
  border-bottom : solid black 1px;
}

#contents .border-right {
  border-right : solid black 1px;
}

#contents .border-left {
  border-left : solid black 1px;
}

/*
    画像の回り込みは
      <p><img class="floatxxxx" ...>
      文章</p>
    のように、画像と（最初の段落の）文章を同じ p に入れる
*/
div#contents p img.floatleft {
  margin : 0.5em 1.5em 0.5em 2ex;
}

div#contents p img.floatright {
  margin : 0.5em 2ex 0.5em 1.5em;
}

/* 枠付き画像 */
div#contents .borderimg img {
  border : 1px solid black;
}

/*
    画像を並べて中央配置する
    横幅によって自動改行する
    使用上の注意は news.html を参照
*/
#contents p.imagebox {
  clear : both;
  text-align : center;
  text-indent : 0em;
  margin-top : 0.5em;
  margin-bottom : 0.5em;
}

#contents p.imagebox img {
  margin : 0.5em;
  vertical-align : middle;
}

#contents table {
  margin-top : 1em;
  margin-bottom : 1em;
  border-collapse: collapse;
/*  border-collapse: separate;*/
  empty-cells: show;
  /* separate の場合は無効 */
}

#contents th {
  border : 1px solid #808080;
  padding : 0.5ex 1ex 0.5ex 1ex;
  white-space : nowrap;
  font-weight : normal;
  background : #fef8e4;
}

#contents td {
  border : 1px solid #808080;
  padding : 0.5ex 1ex 0.5ex 1ex;
  background : #fffcf4;
}

#contents td.numcell {
  white-space : nowrap;
  text-align : right;
  padding-right : 1em;
  padding-left : 1em;
}

/*
    背景と境界のない table
*/
#contents table.noback th {
  background : none;
  border : none;
}

#contents table.noback td {
  background : none;
  border : none;
}

#contents table.nobacknopadding th {
  background : none;
  padding : 0.5ex 1ex 0ex 1ex;
  border : none;
}

#contents table.nobacknopadding td {
  background : none;
  padding : 0.5ex 1ex 0ex 1ex;
  border : none;
}

#contents table.nobacknopaddingnomargin {
  margin : 0px;
}

/* center クラスの div 中では table を中央表示させる */
#contents div.center table.nobacknopaddingnomargin {
  margin : 0px auto 0px auto;
}

#contents table.nobacknopaddingnomargin th {
  background : none;
  padding : 0.5ex 1ex 0ex 1ex;
  border : none;
}

#contents table.nobacknopaddingnomargin td {
  background : none;
  padding : 0.5ex 1ex 0ex 1ex;
  border : none;
}

/*
    境界あり
*/
#contents table.nobacknopaddingborder th {
  background : none;
  padding : 0.5ex 1ex 0ex 1ex;
  border : 1px solid black;
}

#contents table.nobacknopaddingborder td {
  background : none;
  padding : 0.5ex 1ex 0ex 1ex;
  border : 1px solid black;
}


/*
    画像にキャプションを付けて表示する
　　１つの画像に対して１つの table を使う
*/
#contents table.capimage {
  display : inline-table;
  vertical-align : top;
  margin : 0.5em;
}

#contents table.capimage td {
  text-align : center;
  border : none;
  background : none;
}

#contents table.capimage td.caption {
  font-size : small;
  text-align : center;
  line-height : 120%;
}

/* 通常の table で画像の下にキャプションを置く場合 */
/* news20130820.html 参照                          */
#contents table td.bottomcaption {
  padding-bottom : 1em;
  font-size : small;
  text-align : center;
}


/*
    表の中身を上揃えで表示し右に寄せる

　　　【△△】　○○○○○○○○○○○○
　　　　　　　　○○○○○○○○。

    ※ news20100126.html 参照。
*/
#contents div.top-right table {
  margin-left : auto;
  margin-right : 0pt;
}

#contents div.top-right table th {
  vertical-align : top;
  border : none;
  background : none;
  white-space : nowrap;
}

#contents div.top-right table td {
  vertical-align : top;
  border : none;
  background : none;
}

/*
    <ul> の中で <li> に続けて <table> を配置する

　　　・△△　○○○○
　　　　　　　○○○○

    ※ group21.html 参照。
*/
#contents div.li-table table {
  display : inline;
  vertical-align : top;
  margin : 0px;
}

#contents div.li-table table th {
  vertical-align : top;
  border : none;
  background : none;
  white-space : nowrap;
}

#contents div.li-table table td {
  vertical-align : top;
  border : none;
  background : none;
}

/* 両側にマージンをとる */
#contents div.bothmargin2em {
  margin-left : 2em;
  margin-right : 2em;
}

#contents div.bothmargin4em {
  margin-left : 4em;
  margin-right : 4em;
}


/* 連続する p の中の ul などはもう１文字下げる
   それに続く p はインデントなしとする

     <p>文の始まり</p> インデントあり
     <div class="moreindent">
       <ul>リスト</ul>   インデント＋
       <p>文の続き</p>   インデントなし
       <ul>リスト</ul>   インデント＋
       <p>文の終わり</p> インデントなし
     </div>

   使用例は kurayasu.html を参照
*/
#contents div.moreindent {
  margin-left : 1em;
/* text-indent : 1em は不可 */
}

#contents div.moreindent p {
  text-indent : 0em;
  margin-left : 0em;
  /* 上記での設定を解除 */
}

/* インデントの調整

     <div class="moreindent2">
     <div class="moreindent">
       :  ←　３文字インデントされる
     </div>
     </div>
*/
#contents div.moreindent2 {
  margin-left : 2em;
/* text-indent : 2em は不可 */
}

#contents ul {
  margin : 1em 2ex 1em 5ex;
}

#contents ul li {
  margin : 0.5em 0px;
}

#contents ul li p {  /* p の定義を上書き */
  margin-left : 0px;
  margin-right : 0px;
}

#contents ol {
  margin : 1em 2ex 1em 5ex;
}

#contents ol li {
  margin : 0.5em 0px;
}

#contents ol li p {  /* p の定義を上書き */
  margin-left : 0px;
  margin-right : 0px;
}

#contents dl {
  margin : 1em 2ex 1em 5ex;
}

#contents dt {
  font-weight : bold;
}

#contents dd {
  margin-left : 2em;
}

/*
    アイコン付きリンク表示
*/
#contents p.golink {
  text-align : right;
  font-size : small;
  margin-bottom : 2ex;
  vertical-align : middle;
}

#contents p.golink img {
  margin-right : 5px;
}

#contents p.goback {
  text-align : left;
  font-size : small;
  margin-bottom : 2ex;
  vertical-align : middle;
}

#contents p.goback img {
  margin-right : 5px;
}

#contents p.gotop {
  text-align : right;
  font-size : small;
  margin : 0em 2ex 0em 0ex;
}

/*
    記事・写真の文責表示
    記事の更新日表示
    pickup.html, news.html
*/
#contents p.writer {
  clear : both;
  text-align : right;
  font-size : 80%;
  margin : 1em 2ex 0em 0ex;
}

#contents p.updatedate {
  clear : both;
  text-align : right;
  font-size : 80%;
  color : #808080;
  margin : -0.5em 2ex 0em 0ex;
}

#contents p.topiclink {
  clear : both;
  text-align : center;
  font-size : small;
  margin : 1.5em 0ex 0em 0ex;
  vertical-align : middle;
}

#contents p.topiclink img {
  margin-left : 5px;
  margin-right : 5px;
}

#contents .click {
  font-size : small;
}

#contents img.pdficon {
  vertical-align : middle;
  margin-right : 1em;
}


/* ---------------------------------
   footer
   フッター領域
   ページ最下部に配置
------------------------------------ */
#footer {
  font-size : small;
  clear : both;
  margin-top : 1em;
}

#createdate {
  line-height : 100%;
  text-align : right;
  padding-right : 5px;
  color : #808080;
}

#copyright {
  text-align : center;
  background-color : blue;
  color : white;
}