@charset "utf-8";                           /* 文字ｺｰﾄﾞの指定 */

body          {                             /* HTML文書のｺﾝﾃﾝﾂを入れる要素の書式 */
               width: 500px ;               /* 全体の幅を500pxに指定し中央に配置 */
               padding: 0px auto;           /* 要素の内側の余白を0pxに指定し中央に配置 */
               border: 0px;                 /* 要素の境界線の幅を0pxに指定 */
               margin: 0px auto;            /* 要素の外側の余白を0pxに指定し中央に配置 */
              }

header        {                             /* ﾍｯﾀﾞｰ */
               margin-top: 4px;             /* 要素の外側の上余白を4pxに指定 */
               color: brack;                /* 文字色を黒色に指定 */
               font-weight: 900;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 18px;             /* ﾌｫﾝﾄｻｲｽﾞを18pxに指定 */
               line-height: 1.0;            /* 行の高さを1.0に指定 */
               font-family: serif;          /* ﾌｫﾝﾄを明朝系に指定 */
     	         text-align: center;          /* 水平方向の中央揃え */
               background: aqua;            /* ﾍｯﾀﾞｰの背景色をｱｸｱに指定 */
              }

footer        {                             /* ﾌｯﾀｰ */
               color: brack;                /* 文字色を黒色に指定 */
               font-weight: 500;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 16px;             /* ﾌｫﾝﾄｻｲｽﾞを16pxに指定 */
               line-height: 1.2;            /* 行の高さを1.2に指定 */
               font-family: serif;          /* ﾌｫﾝﾄを明朝系に指定 */
               text-align: center;          /* 水平方向の中央揃え */
               background: violet;          /* ﾌｯﾀｰの背景色を青紫色に指定 */
              }

#contents     {                             /* 段の配置方向 */
               display: flex;               /* 要素を横並びに配置 */
              }

main          {                             /* ﾒｲﾝの段 */
               order: 2;                    /* 中央に配置 */
               width: 80% ;                 /* 横幅を80%に指定 */
               color: black;                /* 文字色を黒色に指定 */
               background: mintcream;       /* 背景色をﾐﾝﾄｸﾘｰﾑに指定 */
              }

#sub1         {                             /* ｻﾌﾞ1の段 */
               order: 1;                    /* ｻﾌﾞ1の段を左側に配置 */
               width: 10% ;                 /* 横幅を10%に指定 */
               color: black;                /* 文字色を黒色に指定 */
               font-size: 14px;             /* ﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               background: gold;            /* 背景色を金色に指定 */
              }

#sub2         {                             /* ｻﾌﾞ2の段 */
               order: 3;                    /* ｻﾌﾞ2の段を右側に配置 */
               width: 10% ;                 /* 横幅を10%に指定 */
               color: black;                /* 文字色を黒色に指定 */
               font-size: 14px;             /* ﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               background: mediumseagreen;  /* 背景色をﾐﾃﾞｨｱﾑｼｰｸﾞﾘｰﾝに指定 */
              }

h1            {                             /* ﾒｲﾝの大見出しの書式 */
               margin: 3px;                 /* 要素の外側の余白を3pxに指定 */
               color: brack;                /* 文字色を黒に指定 */
               font-weight: 500;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 16px;             /* ﾌｫﾝﾄｻｲｽﾞを16pxに指定 */
               line-height: 1.0;            /* 行の高さを1.0に指定 */
               font-family: sans-serif;     /* ﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
              }

h2            {                             /* ﾒｲﾝの中見出しの書式 */
               margin: 3px;                 /* 要素の外側の余白を3pxに指定 */
               color: brack;                /* 文字色を黒に指定 */
               font-weight: 400;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 14px;             /* ﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               line-height: 1.4;            /* 行の高さを1.4に指定 */
               font-family: sans-serif;     /* ﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
              }

h3            {                             /* ｻﾌﾞの見出しの書式 */
               margin: 2px;                 /* 要素の外側の余白を2pxに指定 */
               color: brack;                /* 文字色を黒に指定 */
               font-weight: 100;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 14px;             /* ﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               line-height: 1.0;            /* 行の高さを1.0に指定 */
               font-family: sans-serif;     /* ﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
              }

h4            {                             /* ﾍｯﾀﾞｰの中見出しの書式 */
               margin: 3px;                 /* 要素の外側の余白を3pxに指定 */
               color: brack;                /* 文字色を黒に指定 */
               font-weight: 400;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 14px;             /* ﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               line-height: 1.5;            /* 行の高さを1.5に指定 */
               font-family: sans-serif;     /* ﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
              }

h5            {                             /* ﾒｲﾝの注釈の書式 */
               margin: 3px;                 /* 要素の外側の余白を3pxに指定 */
               color: red;                  /* 文字色を赤に指定 */
               font-weight: 900;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は900) */
               font-size: 14px;             /* ﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               line-height: 1.4;            /* 行の高さを1.4に指定 */
               font-family: sans-serif;     /* ﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
              }

p             {                             /* 段落の書式 */
               margin: 3px;                 /* 要素の外側の余白を3pxに指定 */
               color: black;                /* 文字色を黒に指定 */
               font-weight: 400;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 14px;             /* ﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               line-height: 1.5;            /* 行の高さを1.5に指定 */
               font-family: sans-serif;     /* ﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
              }

nav ul        {
               display: flex;               /* ul要素に｢display: flex;｣を指定 */
               color: black;                /* 各行の文字色を指定 */
               font-weight: 400;            /* 各行のﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 14px;             /* 各行のﾌｫﾝﾄｻｲｽﾞを14pxに指定 */
               font-family: sans-serif;     /* 各行のﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
              }

nav li        {
               display: block;              /* li要素に｢display: block;｣を指定 */
               width: 110px;                /* 各li要素の幅を110pxに指定 */
              }

nav a         {
               color: #fff;                 /* 各項目内のa要素の文字色を指定 */
               font-size: 12px;             /* ﾌｫﾝﾄｻｲｽﾞを12pxに指定 */
               background: #69e;            /* 各項目内のa要素の背景色を指定 */
               display: block;              /* a要素に｢display: block;｣を指定 */
               line-height: 1.4;            /* 行の高さを1.4に指定 */
               padding: 6px 0;              /* ﾊﾟﾃﾞｨﾝｸﾞを6pxに指定 */
               border-left: 1px solid #fff; /* 各項目の左側に白いﾎﾞｰﾀﾞｰを表示 */
               text-align: left;            /* ﾃｷｽﾄを左端揃えに指定 */
               text-decoration: none;       /* 下線の消去 */
              }

nav a:visited {
               background: purple;          /* ﾘﾝｸ先をすでに見た状態のとき背景色を変更する指定 */
              }

nav a:hover   {
               background: #f6d;            /* ｶｰｿﾙが上にある状態のとき背景色を変更する指定 */
              }

nav a:active  {
               background: yellow;          /* ﾏｳｽのﾎﾞﾀﾝなどが押されている状態のとき背景色を変更する指定 */
              }

table         {                             /* 表の書式 */
               margin:3px;                  /* 要素の余白を3pxに指定 */
               color: brack;                /* 文字色を黒色に指定 */
               font-weight: 100;            /* ﾌｫﾝﾄの太さを指定(100～900,標準は400) */
               font-size: 12px;             /* ﾌｫﾝﾄｻｲｽﾞを12pxに指定 */
               line-height: 1.0;            /* 行の高さを1.0に指定 */
               font-family: sans-serif;     /* ﾌｫﾝﾄをｺﾞｼｯｸ系に指定 */
               border: 2px solid black;     /* 外側の境界線の幅を2px,実線の黒色に指定 */
               border-collapse: collapse;   /* 隣り合うセル同士の境界線は重ねて奇麗に表示 */
              }

th,td         {                             /* Table HeaderとTable Dataの書式 */
               width: 125px;                /* 各要素の幅を125pxに指定 */
               padding: 2px;                /* 要素の内側の余白を2pxに指定 */
               border: 2px solid black;     /* 各要素の境界線の幅を2px,実線の黒色に指定 */
               text-align: left;            /* 文字を左寄せに指定 */
              }
