●見出し

● class="hh11"

.hh11 {
position: relative;
padding: 0.6em;
background: #e0edff;
}

.hh11:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

● class="hh12"

.hh12 {
position: relative;
padding: 0.6em;
background: #ffe4b5;
}

.hh12:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffe4b5;
width: 0;
height: 0;
}

● class="hh14"

.hh14 {
position: relative;
padding: 0.6em;
background: lightpink;
}

.hh14:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid lightpink;
width: 0;
height: 0;
}

● class="hh15"

.hh15 {
position: relative;
padding: 0.6em;
background: pink;
}

.hh15:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid pink;
width: 0;
height: 0;
}

● class="hh16"

● class="hh21"

.hh21 {
padding: 0.5em;/*文字周りの余白*/
color: #010101;/*文字色*/
background: #eaf3ff;/*背景色*/
border-bottom: solid 3px #516ab6;/*下線*/
}

● class="hh31"

.hh31 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}

● class="hh32"

.hh32 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #eaf3ff;/*背景色*/
border-left: solid 5px #516ab6;/*左線(実線 太さ 色)*/
}

● class="hh33"

.hh33 {
padding: 0.5em;/*文字周りの余白*/
margin: 3em 0;
color: #494949;/*文字色*/
background: white;/*背景色*/
border-left: solid 7px maroon;/*左線(実線 太さ 色)*/
}

● class="hh34"

.hh34 {
padding: 0.5em;/*文字周りの余白*/
margin: 3em 0;
color: #494949;/*文字色*/
background: white;/*背景色*/
border-left: solid 7px maroon;/*左線(実線 太さ 色)*/
}

● class="hh35"

.hh33 {
padding: 0.5em;/*文字周りの余白*/
margin: 3em 0;
color: #494949;/*文字色*/
background: white;/*背景色*/
border-left: solid 7px maroon;/*左線(実線 太さ 色)*/
}

● class="hh36"

.hh36 {
margin: 3em 0;
padding: 1.0em;/*文字周りの余白*/
color: black;/*文字色*/
background: #fcfff9;/*背景色*/
border-left: solid 10px darkgreen;/*左線(実線 太さ 色)*/
}

● class="hh51"

.hh51 {
background: #eaf3ff;/*背景色*/
padding: 0.5em;/*文字まわり(上下左右)の余白*/
}

● class="hh52"

.hh52 {
background: #fffaf4;/*背景色*/
padding: 0.5em;/*文字まわり(上下左右)の余白*/
}

● class="hh53"

.hh53 {
background: #ffe4b5;/*背景色*/
padding: 0.5em;/*文字まわり(上下左右)の余白*/
}





● class="hh61"



.hh61 {
  color: #800080;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #800080;/*上線*/
  border-bottom: solid 3px #800080;/*下線*/
}




● class="hh62"



.hh62 {
  color: #800080;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #800080;/*上線*/
  border-bottom: solid 3px #800080;/*下線*/
}