div#pagebody {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}


body,td,th {
	font-size: 100%;
	color: #3a1d1d;
	line-height: 1.22;
}
a {
	text-decoration: none;
}
a:link, a:visited {
	color: #1122cc;
}
a:hover {
	color: #dd0000;
	text-decoration: underline;
}
h1 {
	font-size: 300%;
	font-family: monospace;
}
h2 {					 /* 見出し */
	font-size: 140%;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-color: #800080;
}
h3 {					/* 四角 */
	padding: .50em 0 .50em .75em;
	border: 1px solid #ccc; 
	border-color: #ccccff;
	background-color:#e0e0ff;
}
h4 {					/* 各項目 */
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #ccc;
	border-color: #800080;
}

ol {
    display: block;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 20px;
}
ul {
    display: block;
    -webkit-margin-start: 20px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 20px;
}
ul li{
	padding-bottom: 10px;
}
ol li{
	padding-bottom: 10px;
}

/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 100%);
  color: #ffffff;
}
/* グラデーションの開始の色に合わせた三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #b3dced;
  border-left: 15px solid transparent;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 100%);
  color: #ffffff;
}
/* グラデーションの終了の色に合わせた三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #29b8e5;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #800080;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #800080;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}



ol.toplist {
  padding: 0;
}

ol.toplist li {
  color: black;
  position:relative;
  background: #f1f8ff;/*バーの色*/
  line-height: 1.5;
  padding: 0.5em;
  margin-bottom: 4px;
  border-left : solid 35px #5c9ee7;/*先の色＝アイコン裏の色*/
  list-style-type: none!important;
}

ol.toplist li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  position: absolute;
  display: block;
  padding: 0.5em;
  width: 1.2em;
  color: white; /*アイコン色*/
  font-weight: normal;/*アイコンは太字にしない*/
  text-align: center;
  left : -35px; /*左端からのアイコンまでの距離*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

ol.list2 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
ol.list2 li {
  position: relative;
  padding: 0.5em;
  line-height: 1.5em;
  background: #f1f8ff;
  border-left : solid 35px #5c9ee7;
  margin-bottom: 5px;
}
ol.list2 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}

ul.none {}