body{
    width: 100%;
    max-width: 900px;
    margin: auto;
}
h1 {
  background:#4d4012;/*背景色*/
  color: white;
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}
.example {/*親div*/
  position: relative;/*相対配置*/
}
.example img {
    display: flex;
    justify-content: center;
    max-width: 100%;
    height: auto;
}
.example li {
     position: absolute;
     list-style:  none;/* デフォルトのアイコンを消す */
dd {
	float: left ;
	margin-left: 0em ;
}
.btn-circle-flat {
  display: inline-block;
  text-decoration: none;
  background: #87befd;
  color: #FFF;	
  width: 30px;
  height: 30px;
  line-height: 30px;/* 円内の文字の高さ  */
  transform: translate(-100%,-100%);
  border-radius: 50%;
  text-align: center;/* 円画像内の文字の横位置  */
  overflow: hidden;
  transition: .4s;
}