body{
  width: 400px;
  color:#333;
}
/* ①枠のあるリスト */
.list1 ul{
  margin: 1rem 0;
  padding: 1rem 1.5rem;
  border: solid 1px #D3D6Db;
}
.list1 ul li{
  list-style:none;
}
.list1 ul li:before {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:100%;
  content:'';
  background: #EEB1C0;
  margin-right: 10px;
}
.list1 ol{
  margin: 1rem 0;
  padding: 1rem 1.5rem;
  border: solid 1px #D3D6Db;
  counter-reset:number;
  list-style-type: none;
}
.list1 ol li:before {
	counter-increment: number;
  content: counter(number) ".";
  margin-right: 5px;
  color: #EEB1C0
}

/* ②背景色のあるリスト */
.list2 ul{
  margin: 1rem 0;
  padding: 1rem 1.5rem;
  background:#FDF2F3;
  border: solid 1px #F198A4;
  border-radius:10px;
  list-style:none;
}
.list2 ul li:before {
  content: '＊';
  color: #F198A4;
  margin-right: 5px;
}

.list2 ol{
  margin: 1rem 0;
  padding: 1rem 1.5rem;
  background:#FDF2F3;
  border: solid 1px #F198A4;
  border-radius:10px;
  counter-reset:number;
  list-style-type: none;
}
.list2 ol li:before {
	counter-increment: number;
  content: counter(number) ".";
  margin-right: 5px;
  color: #F198A4;
}

/* ③リストにタイトルをつける */
.list3 {
  position: relative;
	margin: 2rem auto;
	border: solid 1px #9CA5AA;
	border-radius:5px;
}
.list3 .title{
  position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 0.5rem;
	background: #FFF;
	font-size:0.9rem;
	color: #F3A7A9;  
}

.list3 ul{
  color:#9CA5AA;
  padding:0px 1rem;
}
.list3 ul li{
  list-style: none;
}
.list3 ul li:before{
  color:#F3A7A9;
  content:"❤︎ "
}

.list3 ol{
  color:#9CA5AA;
  padding:0px 1rem;
  list-style-type: none;
  counter-reset:number;
}
.list3 ol li:before{
  color:#F3A7A9;
  content: counter(number)". ";
	counter-increment: number;  
}
/* ④チケットっぽいリスト */
.list4 ul{
  padding:0px 1rem;
  list-style: none;
}
.list4 ul li{
  background:#F9E9Df;
  color:#F3A7A9;
  border:1px dashed #F3A7A9;
  margin:3px 0px;
  padding:5px 10px;
}
.list4 ul li:before{
  color:#F3A7A9;
  content:"● "
}

.list4 ol{
  padding:0px 1rem;
  list-style-type: none;
  counter-reset:number;
}
.list4 ol li{
  background:#F3A7A9;
  color:#FFFFFF;
  margin:3px 0px;
  padding:5px 10px;
}
.list4 ol li:before{
  color:#FFFFFF;
  content : "0" counter(number) " |";
	counter-increment: number;  
  margin-right:10px;
}
/* 丸の番号リスト */
.list5 ol{
  margin: 1rem 0;
  padding: 1rem;
  list-style-type: none;
  counter-reset:number;
}
.list5 ol li{
  color:#fe94af;
  margin:0 0 10px 0;
}
.list5 ol li:before{
  content : counter(number);
	counter-increment: number;  
  color:#FFFFFF;
  width:30px;
  height:30px;
  padding:6px 8px;
  text-align:center;
  margin-right:5px;
  background:#fe94af;
  border-radius:50%;
}
/* ⑥四角の番号リスト */
.list6 ol{
  margin: 1rem;
  padding: 0;
  list-style-type: none;
  counter-reset:number;
}
.list6 ol li{
  margin:5px 0px;
  position:relative;
  line-height:30px;
  border: 1px solid #EEB1C0;
  padding-left:40px;
}
.list6 ol li:before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  left:0;
  width:30px;
  height:30px;
  line-height:30px;
  margin-right:40px;
  text-align:center;
  color: #FFFFFF;
  background:#EEB1C0;
  border-right: 1px solid #EEB1C0;
}

/* ⑦番号のフォントを考える */
.list7 ol{
  margin: 1rem 0;
  padding: 1rem 1.5rem;
  counter-reset:number;
  list-style-type: none;
}
.list7 ol li:before {
  font-family:'Rochester', cursive;
  font-size:20px;
  color: #139F6B;
  margin-right: 10px;
  counter-increment: number;
  content: counter(number) ".";
}
/* ⑧間に線を入れる */
.list8 ul{
  margin:1rem;
  padding:0rem;
  list-style-type:none;
  border-radius:5px;
}
.list8 ul li{
  line-height:1.6;
  padding:6px 0;
  margin:5px 0px;
}
.list8 ul li:not(:last-child){
  border-bottom:1px dashed #5AA0D6;
  margin-bottom:0;
}
.list8 ul li:before{
  content:'◆';
  padding:10px;
  font-weight:900;
  color:#5AA0D6;
}
/* ⑨アイコンを使ったリストスタイル */
.list9 ul{
  margin:1rem;
  padding:0rem;
  list-style-type:none;
}
.list9 ul li{
  background:#FFFDE3;
  border:1px solid #FFDC00;
  border-radius:5px;
  line-height:2;
  margin:5px 0px;
}
.list9 ul li:before{
  font-family: "Font Awesome 5 Free";
  content:'\f521';
  padding:10px;
  font-weight:900;
  color:#FFDC00;
}

/* ⑩アイコンを使ったリストスタイル */
.list10 ul{
  margin:1rem;
  padding:0rem;
  list-style:none;
}
.list10 ul li:before{
  font-family: "Font Awesome 5 Free";
  content:'\f3a5';
  padding:10px;
  font-weight:400;
  color:#FCB2A9;
}