/* 記事を書くところ */
td.article-area {
  width: 800px;
  text-align: center; vertical-align: top;
}

/* 一つの記事 */
div.article {
  width: 800px;
  border: solid 1px lightgreen;
  text-align: left;
}

/* 記事のタイトル    common-designに同じ */
h2 {
}

/* 著者 */
.writer {
  text-align: center;
}

/* 記事の目次 */
table.article-index {
  margin: 5px;  padding: 10px;
  border: solid 2px green;
  font: small;
  float: right;
}

/* 章 */
h4 {
  margin: 0.8em 0 0.4em 0.5em;
  color: navy;
  font: bold medium;
  text-align: left;
}

/* 小章 */
h5 {
  margin: 0.5em 0 0.4em 0.8em;
  color: darkgreen;
  font: bold medium;
  text-align: left;
}

/* 文章 */
p.sentence {
  text-indent: 1em;
  margin: 0.5em;
  text-align: left;
  line-height: 1.3em;
}

/* 定義リストの定義語は太く */
dt {
  margin: 0.3em 0 0 1em;
  font-weight: bold;
}

/* 定義リストの定義文の書式 */
dd {
  margin: 0 0 0 2em;
  text-indent: 1em;
  line-height: 1.2em;
}

/* 箇条書きの条毎に間を空ける */
li {
  margin: 0.3em 0em 0.3em 10m;
  line-height: 1.2em;
}

/* 左寄せの図
     <div class="fig-left" style="width: px;">                      <!---　左寄せの図　/--->
      <a href="2005fig/fig1.jpg" target="_photo"><img src="2005fig/fig1-s.jpg" alt="">
      <p class="caption">左寄せの図</p></a>
      <p class="caption-note">左寄せの図のサンプル</p>
     <cite>出典情報</cite>
    </div>
*/
.fig-left {
  float: left;
  margin: 10px;  padding: 5px;
  border: solid 1px lightgreen;
  text-align: center;
}
.fig-long-caption img {
  float: left;
}

/* 右寄せの図 
    <div class="fig-right" style="width: px;">                      <!---　右寄せの図　/--->
      <a href="2005fig/fig3.jpg" target="_photo"><img src="2005fig/fig3-s.jpg" alt="">
      <p class="caption">右寄せの図</p></a>
      <p class="caption-note">右寄せの図のサンプル</p>
      <cite>出典</cite>
    </div>
*/
.fig-right {
  float: right;
  margin: 10px;  padding: 5px;
  border: solid 1px lightgreen;
  text-align: center;
}

/* 横幅一杯の図
   <span class="float-clear"></span>                            <!---　フロート・文章中断　/--->
    <div class="center">
      <div class="fig-wide">                               <!---　横一杯の図　/--->
        <a href="2005fig/fig2.jpg" target="_photo"><img src="2005fig/fig2-s.jpg" alt="">
        <p class="caption">横一杯の図</p></a>
        <p class="caption-note">横一杯ぶったぎりの図．</p>
        <cite>出典</cite>
      </div>
    </div>

*/
.fig-wide {
  width: 550px;
  margin: 10px;  padding: 5px;
  border: solid 1px lightgreen;
  text-align: center;
}

/* 横幅一杯,左に写真右に長い解説の図
   <span class="float-clear"></span>
    <div class="center">                            <!---　文章中断　/--->
      <div class="fig-long-caption">                               <!---　右に長い解説の図　/--->
        <a href="2005fig/fig2.jpg" target="_photo"><img src="2005fig/fig2-s.jpg" alt="">
        <p class="long-caption">横一杯の図</p></a>
        <p class="caption-note">横一杯ぶったぎりの図．</p>
        <cite>出典</cite>
      </div>
    </div>

*/
.fig-long-caption {
  width: 550px;
  margin: 10px;  padding: 5px;
  border: solid 1px lightgreen;
  text-align: center;
}

    <div class="center">                            <!---　文章中断　/--->
     <div class="fig-left" style="width: px;">       <!---　（左寄せ）枠をつける/--->
      <table class="fig-line">                       <!---　横並びの図　/--->
        <tr>
          <td><a href="2005fig/top-051031pho1.jpg" target="_photo"><img src="2005fig/top-051031pho1-s.jpg" alt=""></a></td>
          <td><a href="2005fig/top-051031pho2.jpg" target="_photo"><img src="2005fig/top-051031pho2-s.jpg" alt=""></a></td>
        </tr>
        <tr>
          <td style="width:200px;"><p class="caption"></p>
              <p class="caption-note"></p>
              <cite>出典</cite></td>
          <td style="width:200px;"><p class="caption"></p>
              <p class="caption-note"></p>
              <cite>出典</cite></td>
        </tr>
      </table>
     </div>
    </div>

table.fig-line {
  border: solid 1px lightgreen;
  border-collapse: separate;
  border-spacing: 1em;
  vertical-align: top;
}

table.fig-line td {
  vertical-align: top;
  text-align: center;
  padding: 5px; 
}

table.fig-line img {
  vertical-align: middle;
}

.line-space {
  height:15px;
}


/* 沢山の写真一覧
    <div class="center">                            <!---　文章中断　/--->
      <div class="photo-list">                       <!---　写真一覧　/--->
        <a href="920519-pyloF/920519-pyloF1.jpg" target="_photo"><img src="920519-pyloF/920519-pyloF1.jpg" alt=""></a>
      </div>
    </div>
*/
div.photo-list img {
  float: left;
  margin: 2px;
  height: 90px;
}

/* 図のキャプション 　中央揃え　*/
.caption {
  margin:0.1em;
  vertical-align: top;
  text-align: center;
  font: bold;
}

/* 図の長いキャプション 　左寄せ　*/
.long-caption {
  margin:0.5em;
  text-align: left;
  font: bold;
}

/* 図のキャプションの説明文 */
.caption-note {
  margin: 0em;
  text-indent: 1em;
  text-align: left;
  font: normal;
  font-size: 90%;
}

/* 出典情報 */
cite {
  margin: 0 2 0 -0.1em;
  text-align: right;
  font: normal;
  font-size: 85%;
}

/* 日付 */
.date {
  text-align: right;
  font-size: 90%;
}


/* QandA　の　Q */
.Q {
  font:large bold;
  color:royalblue;
}

/* QandA　の　A */
.A {
  font:large bold;
  color:darkmagenta;
  display: block;
  float: left;
}