body { /* 背景 */
	background: linear-gradient(180deg, rgba(0,255,150,1) 0%, rgba(10,190,20,1) 35%, rgba(0,20,5,1) 100%);
	height: 100%;
	background-attachment: fixed;
	margin: 0;
	font-family: sans-serif;
}
.box div { /* 背景の◇の基本設定 */
	height: 80px;
	width: 80px;
	position: fixed;
	top: 8%;
	left: 8%;
	animation: animate 5s linear infinite;
	background: transparent;
	border:solid 3px rgba(255,255,255,0.8);
	z-index: 500;
}
.box div:nth-child(1) { /* 背景の◇1の設定 */
	top: 18%;
	left: 18%;
	animation: animate 15s linear infinite;
}
.box div:nth-child(2) { /* 背景の◇2の設定 */
	top: 27%;
	left: 87%;
	animation: animate 10s linear infinite;
}
.box div:nth-child(3) { /* 背景の◇3の設定 */
	top: 80%;
	left: 90%;
	animation: animate 5s linear infinite;
}
.box div:nth-child(4) { /* 背景の◇4の設定 */
	top: 60%;
	left: 70%;
	animation: animate 9s linear infinite;
}
.box div:nth-child(5) { /* 背景の◇5の設定 */
	top: 88%;
	left: 12%;
	animation: animate 9s linear infinite;
}
.box div:nth-child(6) { /* 背景の◇6の設定 */
	top: 70%;
	left: 33%;
	animation: animate 8s linear infinite;
}
.box div:nth-child(7) { /* 背景の◇7の設定 */
	top: 33%;
	left: 66%;
	animation: animate 8s linear infinite;
}
.box div:nth-child(8) { /* 背景の◇8の設定 */
	top: 70%;
	left: 60%;
	animation: animate 16s linear infinite;
}
.box div:nth-child(9) { /* 背景の◇9の設定 */
	top: 26%;
	left: 53%;
	animation: animate 7s linear infinite;
}
.box div:nth-child(10) { /* 背景の◇10の設定 */
	top: 45%;
	left: 15%;
	animation: animate 12s linear infinite;
}
@keyframes animate { /* 背景のアニメーション設定 */
0% {
	transform: scale(0) translateY(0) rotate(0);
	opacity:1;
}
100% {
	transform: scale(1.5) translateY(-90px) rotate(360deg);
	opacity:0;
}
}

h2 { /* ルビ付の目次の設定 */
	border-left: 5px solid #e31010;
	background: #8f8f8f;
	margin: 10px 0 10px;
	padding: 14px 15px 1px;
	font-size: 16px;
	color: #000000;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
}

h3 { /* ルビ無しの目次の設定 */
	border-left: 5px solid #e31010;
	background: #8f8f8f;
	margin: 10px 0 10px;
	padding: 3px 15px 1px;
	font-size: 16px;
	color: #000000;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
}

header { /* ヘッダーの基本設定 */
  z-index: 100;
	height: 64px;
  position: fixed;
  background-color: #333333;
  width: 100%;
  text-align: center;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.75);
}
.header-ul {
	overflow: hidden;
	list-style:none;
	margin: 0 auto;
	z-index: 200;
  color: #ffffff;
}
.header-li {
  display: inline-block;
  padding: 22px 20px 20px 10px;
}
.header-li:hover {
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1)
}

.ac-label { /* 目次の折り畳み部(アコーディオン)の基本設定 */
  background: #454545;
  color: #ffffff;
	cursor: pointer;
  display: block;
  margin-bottom: 1px;
  padding: 5px 3%;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
	border: 3px solid #040a29;
}
.ac-content {
  border: 3px solid #454545;
	background: rgba(238,238,238,0.5);
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: 0.5s;
  visibility: hidden;
}
.ac-check:checked + .ac-label + .ac-content {
  height: auto;
  opacity: 1;
  padding: 5px 10px;
  visibility: visible;
}

.li-contents { /* 目次のリスト部分の追番の基本設定 */
  list-style-type: none;
  list-style-position: inside;
}
ol.first-layer {
  counter-reset: num_f;
}
.first-layer li {
  counter-increment: num_f;
}
.first-layer li:before {
  display: marker;
  content: counter(num_f)". ";
}
ol.second-layer {
  counter-reset: num_s;
}
.second-layer li {
  counter-increment: num_s;
}
.second-layer li:before {
  display: marker;
  content: counter(num_f)'-' counter(num_s)". ";
}
ol.third-layer {
  counter-reset: num_t;
}
.third-layer li {
  counter-increment: num_t;
}
.third-layer li:before {
  display: marker;
  content: counter(num_f)'-' counter(num_s)"-" counter(num_t)'. ';
}

.footer { /* フッターの基本設定 */
  background: #333333;
  color: #ffffff;
  clear: both;
}

.btn1 { /* 語録コピー用ボタンのレイアウト設定 */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	background-image: linear-gradient(65deg, #464b5c 50%, #040a29 50%);
	width: 152px;
  height: 30px;
	margin: 0 0 10px;
	border: 3px solid #040a29;
	transition: 0.25s;
}
.btn1 a {
	float: right;
	margin-right: 5px;
	font-size: 12px;
	color: #ffffff;
}
.btn1:hover {
	box-shadow: 0 5px 50px 0 #15f4ee inset, 0 5px 50px 0 #15f4ee,
	 						0 5px 50px 0 #15f4ee inset, 0 5px 50px 0 #15f4ee;
	border: 3px solid #00b3bd;
}

.btn4 { /* ヘッダー用ボタンのレイアウト設定 */
  text-align: center;
  position: relative;
  text-decoration: none;
  display:inline-block;
}
.btn4::before { /* ヘッダー用ボタンにマウスカーソルを重ねた場合の設定 */
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #3367ff;
  display: block;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
}
.btn4:hover::before { /* ヘッダー用ボタンからマウスカーソルを離した場合の設定 */
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
}

.box2 { /* コンテンツ用の枠の設定 */
  padding: 10px 15px;
  margin: 0 25%;
  border: double 8px #000000;
  background: rgba(238,238,238,0.5);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}

.box3 { /* あとがき用の枠の設定 */
	margin: 0 25%;
	padding: 1em;
  border: double 8px #000000;
  background: rgba(238,238,238,0.5);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}
.box3-text1 {
	text-align: center;
	padding: 1em 0;
	font-size: 14px
}
.box3-text2 {
	text-align: right;
}

#page-top { /* 追従するページ最上層へ戻るボタンのレイアウト設定 */
  position: fixed;
  right: 2.5%;
  bottom: 11%;
  font-size: 2rem;
  line-height: 2rem;
  background: rgba(238,238,238,0.5);
  color: #34eb61;
  padding: 20px;
  border: solid 2px;
  border-radius: 25%;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,0.2);
	transition: 0.3s;
}
#page-top:hover { /* 追従するページ最上層へ戻るボタンからマウスカーソルを離した場合の設定 */
  background: #666666;
  color: #ffffff;
}

#page-bottom { /* 追従するページ最下層へ戻るボタンのレイアウト設定 */
  position: fixed;
  right: 2.5%;
  bottom: 2.5%;
  font-size: 2rem;
  line-height: 2rem;
  background: rgba(238,238,238,0.5);
  color: #34eb61;
  padding: 20px;
  border: solid 2px;
  border-radius: 25%;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,0.2);
	transition: 0.3s;
}
#page-bottom:hover { /* 追従するページ最下層へ戻るボタンからマウスカーソルを離した場合の設定 */
  background: #666666;
  color: #ffffff;
}

.edit-solid-icon { /* 語録コピーボタン内のアイコン用の基本設定 */
  color: #ffffff;
  position: absolute;
  margin-left: 5px;
  margin-top: 6px;
  width: 7px;
  height: 2px;
  border-radius: 1px;
  border: solid 1px currentColor;
  background-color: currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.edit-solid-icon:before {
  content: '';
  position: absolute;
  left: -12px;
  top: -1px;
  width: 0px;
  height: 0px;
  border-left: solid 5px transparent;
  border-right: solid 5px currentColor;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
}