.note h1 {
  position: relative;
  text-align: left;
top: -20px;
}
.note h1 span {
  position: relative;
  display: inline-block;
  padding: 0 0.5em;
  color: #474b42;
  background-color: #fff;
}
.note h1::before {
  content: '';
  width: 100%;
  border-top: 4px solid #f0908d;
  position: absolute;
  top: 50%;
  left: 0;
}
.note p {
margin: -10px 0px 0px;
  padding: 0px 20px 20px 20px;
  border-bottom: 4px solid #f0908d;
}


div[class^="box"] {
width:700px;
border: 4px solid #da4033;
border-radius: 4px;
margin: 2em 0　0px 0;
padding: 0.6em;
position: relative;
}

div[class^="box"] ::before {
    background-color: #fff;
    color: #c9171e;
    font-weight: bold;
    font-size: 20px;
    left: 20em;
    padding: 0 .5em;
    position: absolute;
    top: -0.8em;
}

div.box-1 ::before {
    content: "書きやすい14金のペン";
}

div.box-2 ::before {
    content: "宮島の鹿の角を使用";
}

div.box-3 ::before {
    content: "高級感漂う霧箱入り";
}

div.box-4 ::before {
    content: "西陣織　筆入れ";
}
div.box-5 ::before {
    content: "オリジナル鹿角筆置き";
}

table.box td{
font-size: 15px;
padding: 5px 10px;
border: 10px;
}