.box2 { /*【div】囲み枠部分*/
  position: relative; /*必須*/
  margin: 56px 16px 32px; /*外側の余白*/
  padding: 40px 16px 16px; /*内側の余白*/
  border: 6px double #ff99cc; /*枠線*/
  background: fff; /*背景色*/
  color: #999; /*テキスト色*/
  box-shadow: 5px 5px 0 #ffaadd; /*囲み枠に影を付ける*/
}
.box2 .box-title { /*【span】タイトル部分*/
  position: absolute; /*必須*/
  top: -24px;  /*囲み枠の上を基準として外側（上）に24px移動*/
  left: 16px; /*囲み枠の左を基準として内側（右）に16px移動*/
  line-height:48px; /*行の高さ*/
  padding: 0 12px; /*左右の余白*/
  background: #ffeecc; /*背景色*/
  border-radius: 40px; /*角丸*/
  color: #448866; /*テキスト色*/
}
.box2 p { /*【p】本文部分*/
  margin: 0;
  padding: 0;
}
.box3 { /*【div】囲み枠部分*/
  position: relative; /*必須*/
  margin: 56px 16px 32px; /*外側の余白*/
  padding: 40px 16px 16px; /*内側の余白*/
  border: 6px double #ffcc99; /*枠線*/
  background: fff; /*背景色*/
  color: #999; /*テキスト色*/
  box-shadow: 5px 5px 0 #ffddaa; /*囲み枠に影を付ける*/
}
.box3 .box-title { /*【span】タイトル部分*/
  position: absolute; /*必須*/
  top: -24px;  /*囲み枠の上を基準として外側（上）に24px移動*/
  left: 16px; /*囲み枠の左を基準として内側（右）に16px移動*/
  line-height:48px; /*行の高さ*/
  padding: 0 12px; /*左右の余白*/
  background: #ffeecc; /*背景色*/
  border-radius: 40px; /*角丸*/
  color: #884466; /*テキスト色*/
}
.box3 p { /*【p】本文部分*/
  margin: 0;
  padding: 0;
}