@charset "UTF-8";
* {                             /* すべての要素に対する共通設定。初期化用途で使う。 */
 box-sizing:border-box;         /* ブロック要素のサイズ指定をする時、誤差を無くすためのおまじない。 */
 line-height:1.5em;             /* 行間を1.5文字分に設定 */
}
html { height:100%; }
body { height:100%; position:relative; margin:0; padding:0; }
#pagebody {
 width:700px;
 margin: 0 auto;                /* margin や padding などに２つの値を与えると、それぞれ上下 左右 方向の距離に対応する。 */
 padding:0;
 background-color:white;
 box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); /* 影をつける(ドロップシャドウ) */
}
#header {
 position:fixed; /* 画面上の位置を固定する。画面をスクロールさせても常に同じ位置に表示される。 */
 top:0px;
 width:700px;
 height:40px;
 margin: 0 auto;
 padding:0.5em;
 border-bottom:solid 4px #448822; /* 下部に太めの線を引く */
 color:#448822;
 background:white;
 background:linear-gradient(to bottom,#d4fc79,#96e6a1); /* 背景にグラデーションを描画 */
}

#submenu {
 position:fixed; /* 画面上の位置を固定する。 */
 top:40px;
 width:200px;
 padding:0.5em;
 border-right:solid 1px #aaaaaa;
 border-bottom:solid 1px #aaaaaa;
 background:white;
}
#content {
 width:100%;
 padding:0.5em;
 padding-top:50px;
 padding-left:210px;
 background:white;
}
#footer {
 bottom:0px;
 width:700px;
 height:40px;
 margin: 0 auto;
 padding:0.5em;
 border-top:solid 1px #aaaaaa;
 background:white;
 color: #666666;
 font-size:0.9em;     /* 文字サイズを少し小さくする(0.9文字分) */
 text-align:right;    /* 右詰め */
}

/* 見出しのデザイン */
h1 {
  font-size:1.5em;
  color:#448822;
  background: #ddeedd;
  background: linear-gradient(to bottom,#ddeedd,#cceecc); /* 薄くグラデーションをかける */
  border: solid 1px #bbeebb;
  border-radius: 4px;                /* 少し角を丸くする */
  margin: 0.5em 0;
  padding:4px 4px 4px 8px;           /* margin や padding などに４つの値を与えると、それぞれ上 右 下 左(時計回り)方向の距離に対応する。 */
}
h2{
  font-size:1.3em;
  color:#448822;
  border-bottom: solid 2px #448822;
  margin: 0.5em 0;
  padding:4px 4px 4px 0px;

}
h3{
  font-size:1.1em;
  color:#448822;
  /* border-left: solid 8px #448822; */
  margin: 0.5em 0;
  padding:4px 4px 4px 0px;

}

/* コラム欄のデザイン */
.column {
  margin:0.5em 0px;
  padding:1em;
  border:solid 1px #aaaaaa;
  border-radius: 0.5em; /* 罫線を角丸にする */
}