/*本文のレイアウトを定義*/
 body{
  background: #eeeeee;
  font-family: Meiryo;
  text-align: center; 
 }
   
 h1{font-size: 14pt; color: red;}

#header{
  background: #ffffff;
  width: 500px;
  padding: 10px; /*上下左右10pxずつ*/
  text-align: center;
  border: 1px solid #cccccc;
  margin: 30px auto;
 }

 .Atomic_table, .table_heavy1, .table_heavy2{
  align: center;
  margin-left:auto;
  margin-right:auto;
  empty-cells: hide; /*要素が無い場合は表示しない*/
  border: 5px solid gray; /* tableの外枠を定義 */
  border-collapse: separate; /* 表の線と線の間を空ける */
  border-spacing: 5px; /* 表の線と線の間の幅 */
 }

 .Atomic_table th{
  padding: 15px; /*上下左右15pxずつ*/
  background-color: #aaa;
 }

 .Atomic_table th, .table_heavy1 th, .table_heavy2 th{
  padding: 15px; /*上下左右15pxずつ*/
 }

 .Atomic_table td:nth-child(5){color: #bbb;} /* 特定のカラムを一括変換 */

 .Atomic_table td, .table_heavy1 td, .table_heavy2 td{
  border: 1px solid gray; /* tableの各要素の境界線を定義 */
  width: 50px;
  height: 50px;
  margin: 0em 0em 0em 1em;
/*  padding: 0.5em 0.0em; /* 余白を上下に0.6文字分・左右に1文字分*/
  cursor: pointer; /* popup表示可能な要素のマウスカーソルはポインター形状 */
 }

/* マウスカーソルへの反応を定義 */
 td:hover{
  background-color: #ffcc33; /* on カーソル時の背景色はオレンジ色 */
 }

 .data_table{ /* 各元素を選択した時に表示される測定データの表示枠 */
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
 }

 .Atomic_table tbody tr td label #popup .data_table thead th{
  background-color: #333;
  text-align: center;
  color: #fff;
  cursor: default; /* popup表示可能な要素のマウスカーソルはポインター形状 */
 }

 .Atomic_table tbody tr td label #popup .data_table tbody th{
  background-color: #ccffcc;
  cursor: default; /* popup表示可能な要素のマウスカーソルはポインター形状 */
  color: #f00;
 }

 .Atomic_table tbody tr td label #popup .data_table tbody th:nth-of-type(2){ /* 2番目の要素 */
  background-color: #ffffcc;
  cursor: default; /* popup表示可能な要素のマウスカーソルはポインター形状 */
  color: #f00;
 }

 #heavy1{
  background-color: #99CC00;
 }

 #heavy2{
  background-color: #CCBB99;
 }

 .data_table td{ /* 各元素を選択した時に表示される測定データリストの各要素 */
  width: 250px;
  border: 1px solid gray; /* tableの各要素の境界線を定義 */
  margin: 0em 0em 0em 1em;
  padding: 1.0em 1.0em; /* 余白を上下に1.0文字分・左右に1文字分*/
 }

 .data_table td:hover{ /* 表示される測定データリストの各要素のマウスカーソルへの反応 */
  background-color: #ffcc33; /*  on カーソル時の背景色 */
 }

/*popup表示されるコンテンツのレイアウト*/
 #popup{ /* ポップアップ画面の背景に半透過の暗い画面を準備 */
  width:100%; /* 幅を指定する */
  height:100%; /* 高さを指定する */
  background:rgba(0,0,0,0.4); /* 背景の不透過度合いを 0.4に */
  padding:0 4%;
  box-sizing:content-box;
  display:none; /* 要素（元素）をクリックするまで非表示 */
  position:fixed; /* ポップアップ画面のアウターとして要素の位置を固定 */
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%); /* ベンダープレフィックス */
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
  font-size: small; /* 小さなフォントに変更 */
 }

 label{
  display:block;
  background-color: #88ff88; /* on カーソル時の背景色 */
  cursor: pointer; /* popup表示可能な要素のマウスカーソルはポインター形状 */
  padding: 1.0em 0em; /* 内側の余白量を上下に拡げてセル全体をクリック対象にする */
}

 label:before{
  color: red;
  content: attr(Atomic_symbol)""; /* Atomic_symbol に記載された文字を出力 */
 }

 input[type="checkbox"]{
  display:none; /* チェックボックスに通用表示される☑記号を非表示にする */
 }

 input[type="checkbox"]:checked + #popup{
  display:block;
  transition:.2s;
 }