【サイトの作成】投稿記事のデザインとkuratotoの中で決めているルール

/*アイコン付ラインボックス*/
.iconline-box{
   background: #f4fbf9; /* 背景色 */
   border-radius: 3px;
   max-width: 800px; /* 横幅 */
   padding: 2em 2em 2em ;
}
@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット */
}
}
.iconline-box-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    border-bottom-color: #40210f;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 8px;
    line-height: 1.5;
}

.list-line{
   list-style: none;
   padding:0;
   margin:0;
}
.list-line li { 
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom-color: #bcb2a4;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  position: relative;
 }
.list-line li:before {
 font-family: "Font Awesome 5 Free";
 content: "\f058";
 color: #d0c67c; /* 色 */
 font-size: 18px;
 margin: 0 3px 0 0;
 font-weight: bold;
}

/*数字付ラインボックス*/
.numberline-box{
   background: #f4fbf9; /* 背景色 */
   border-radius: 3px;
   max-width: 800px; /* 横幅 */
   padding: 2em 2em 2em ;
}
@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット */
}
}
.numberline-box-title {
    font-weight: 700;
    text-align: center;
	margin-bottom: 8px;
    border-bottom-color: #40210f;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 10px;
    line-height: 1.5;
}

.number-line{
  counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0;
}
.number-line li { 
   border-bottom:1px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   padding: 0.8em 0.9em 0.9em 1.8em;
 }
.number-line li:before {
 counter-increment: number;
   content: counter(number);
   background-color: #AA8E86; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 12px;
   border-radius: 50%;
   left: 0;
   top:1.3em;
   width: 20px;
   height: 20px;
   line-height: 20px;
   text-align: center;
}

/*タイトルボックス*/
.daimeibox{
margin: 2em auto; /* ボックス余白 */
background-color: #fff; /* ボックス背景色 */
padding: 5em 2em 2em; /* ボックス内側余白 */
position:relative; /*配置*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
}
.daimeibox .daimei {
background-color: #8B9B9D; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff; /* タイトル文字色 */
padding:10px;/*タイトル余白*/
text-align: center;	/* タイトル中央寄せ */
position:absolute;	/* 配置 */
top:0;	/*上から(0px)に配置 */
left:0; /*左から(0px)に配置 */
width:100%;/*横幅最大幅 */
}

/*めくれ枠*/
.mekure {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#f9fbf9;/*背景色*/
position:relative;
}
.mekure:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff  #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.kadomaru {
margin: 2em auto;
padding:2em;/*内側余白*/
border-radius:10px;/*丸みを調整*/
background-color:#EDF0E7;
}

.borderbox{
margin: 2em auto;
padding:2em;
background:linear-gradient(-45deg,transparent 25%,#EFEDED 25%,#EFEDED 50%,transparent 50%,transparent 75%,#EFEDED 75%,#EFEDED);
background-size: 4px 4px;
border-bottom: 4px double #C0C6C9;
border-top: 4px double #C0C6C9;
border-left: 4px double #C0C6C9;
border-right: 4px double #C0C6C9;	
background-clip: padding-box;
}

.icon::before {
 font-family: "Font Awesome 5 Free";
 content: "\f058";/* ユニコード */
 color: #d0c67c; /* 色 */
 font-weight: bold;/* 太さ */
}