html, body {
	height: 100%;
	margin: 0;
}
.page {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 画面の高さいっぱいを確保 */
  padding: 0 0 0 5;
//  color: #333333;
//  background-color: #F2E6D6;
}

.header {
  flex-shrink: 0; /* 中身に応じた高さのまま、縮まないようにする */
}
.content {
  flex: 1; /* 残りのスペースをすべて埋める */
  overflow: auto; /* 中身が多い場合はここだけスクロールさせる */
}

.footer {
  flex-shrink: 0; /* 同上 */
  background-color: lightGray;
}
.toc-field{
	margin: 5px 5px 5px 0px;
	font-size: 150%;
	width: 50%;
}
.entry-field{
	margin: 5px 5px 5px 0px;
	font-size: 150%;
	width: 50%;
}
.cancel-button {
  font-size: 150%;
  margin: 5px 5px 5px 0px;
}
.buttons{
	width: 48%;
	min-width: 100px;
	max-width: 260px;
	margin: 5px 5px 5px 0px;
	padding: 5px 8px 5px 8px;
	font-size: 150%;
	box-sizing: border-box;
	border: 1px solid #68779a;
	background: #cbe8fa;
	cursor: pointer;
}
.buttons:active {
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
	transform: translateY(2px);
}
#HimaLink{
	font-size: 100%;
}
.item {
	cursor: pointer;
}
table {
	border-collapse: collapse; 
	width: 90%;
}

th, td {
	border: 1px solid #ccc;
	padding: 8px 12px;
	text-align: left;
	background-color: #ffffff;
}

th {
	background-color: #f4f4f4;
}

.center {
	text-align: center;
}

  .checkbox-wrapper .tgl {
    display: none;
  }
  .checkbox-wrapper .tgl,
  .checkbox-wrapper .tgl:after,
  .checkbox-wrapper .tgl:before,
  .checkbox-wrapper .tgl *,
  .checkbox-wrapper .tgl *:after,
  .checkbox-wrapper .tgl *:before,
  .checkbox-wrapper .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .checkbox-wrapper .tgl::-moz-selection,
  .checkbox-wrapper .tgl:after::-moz-selection,
  .checkbox-wrapper .tgl:before::-moz-selection,
  .checkbox-wrapper .tgl *::-moz-selection,
  .checkbox-wrapper .tgl *:after::-moz-selection,
  .checkbox-wrapper .tgl *:before::-moz-selection,
  .checkbox-wrapper .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper .tgl::selection,
  .checkbox-wrapper .tgl:after::selection,
  .checkbox-wrapper .tgl:before::selection,
  .checkbox-wrapper .tgl *::selection,
  .checkbox-wrapper .tgl *:after::selection,
  .checkbox-wrapper .tgl *:before::selection,
  .checkbox-wrapper .tgl + .tgl-btn::selection {
    background: none;
  }
  .checkbox-wrapper .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 6em;
    height: 2em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .checkbox-wrapper .tgl + .tgl-btn:after,
  .checkbox-wrapper .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
  }
  .checkbox-wrapper .tgl + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper .tgl + .tgl-btn:before {
    display: none;
  }
  .checkbox-wrapper .tgl:checked + .tgl-btn:after {
    left: 50%;
  }

  .checkbox-wrapper .tgl-flip + .tgl-btn {
    padding: 2px;
    transition: all 0.2s ease;
    font-family: sans-serif;
    perspective: 100px;
  }
  .checkbox-wrapper .tgl-flip + .tgl-btn:after,
  .checkbox-wrapper .tgl-flip + .tgl-btn:before {
    display: inline-block;
    transition: all 0.4s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 4px;
  }
  .checkbox-wrapper .tgl-flip + .tgl-btn:after {
    content: attr(data-tg-on);
    background: #02C66F;
    transform: rotateY(-180deg);
  }
  .checkbox-wrapper .tgl-flip + .tgl-btn:before {
    background: #FF3A19;
    content: attr(data-tg-off);
  }
  .checkbox-wrapper .tgl-flip + .tgl-btn:active:before {
    transform: rotateY(-20deg);
  }
  .checkbox-wrapper .tgl-flip:checked + .tgl-btn:before {
    transform: rotateY(180deg);
  }
  .checkbox-wrapper .tgl-flip:checked + .tgl-btn:after {
    transform: rotateY(0);
    left: 0;
    background: #7FC6A6;
  }
  .checkbox-wrapper .tgl-flip:checked + .tgl-btn:active:after {
    transform: rotateY(20deg);
  }