.heading {
 color:#FF4F02;
 font-size:1.2em;
 font-weight:bold;
 align-items: center; /* 横線を上下中央 */
 display: flex; /* 文字と横線を横並び */
 justify-content: center; /* 文字を中央寄せ */
}

.heading::before,
.heading::after {
  background-color:#FF4F02; /* 横線の色 */
  content: "";
  height: 2px; /* 横線の高さ */
  width: 40px; /* 横線の長さ */
}

.heading::before {
  margin-right: 15px; /* 文字との余白 */
}

.heading::after {
  margin-left: 15px; /* 文字との余白 */
}

.hachi0-wrapper{
 text-align:center;
        }

 .h-circle {	
position: relative;
display: inline-block;
width: 110px;
height: 110px;
border-radius: 50%;
font-weight:bold;
color:#FF4F02;
background-color:#FFFF00;
border:1px solid #FF4F02;
box-shadow:2px 2px 0px #FF4F02;
}

#h-maru{
 position: absolute;
 display: inline-block;
 left: 0;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 width :110px;
 text-align:center;
 font-size:1.1em;
}

@media screen and (min-width:390px){

.h-circle {	
width: 120px;
height: 120px;
}

#h-maru{
 width :120px;
}
}

@media screen and (min-width:429px){

.h-circle {	
width: 130px;
height: 130px;
}

#h-maru{
 width :130px;
}
}

@media screen and (min-width:768px){

 .h-circle {	
width: 120px;
height: 120px;
}

#h-maru{
 width :120px;
 font-size:1em;
}
}

@media screen and (max-width:320px){

.h-circle {	
width: 90px;
height: 90px;
}

#h-maru{
 width :90px;
}
}

@media screen and (max-width:280px){

.h-circle {	
width: 80px;
height: 80px;
}

#h-maru{
 width :80px;
}
}