h1{
font-size: 2em;
font-weight:bold;
}

h2{
font-size: 1.8em;
font-weight:bold;
border-bottom:4px solid gold;
position: relative;
padding: 10px;
margin:20px 0;
}
 
h2:before{
content:"";
display:block;
width:20%;
border-bottom:4px solid darkorange;
position:absolute;
bottom:0;
margin: 0 0 -4px -10px;
}

.btn-flat-horizontal-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 1em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #ff7f7f;
  transition: .4s;
}

.btn-flat-horizontal-border > span {
  border-bottom: solid 2px #FFF;
  border-top: solid 2px #FFF;
}

.btn-flat-horizontal-border:hover span {
  padding: 0.1em 0;
}


.btn-real-dent {
  /*周りの凹み*/
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: rgba(3, 169, 244, 0.54);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  background: #f7f7f7;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}
.btn-real-dent i {
  /*ボタン自体*/
  position: absolute;
  content: '';
  width: 80px;
  height: 80px;
  line-height: 80px;
  vertical-align: middle; 
  left: 10px;
  top: 9px;
  border-radius: 50%;
  font-size: 40px;
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #b5b5b5;
}
  
.btn-real-dent .fa:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: solid 2px #d8d8d8;
}





/* ▼▼▼▼▼▼▼▼▼▼Version「標準」▼▼▼▼▼▼▼▼▼▼ */
/* 吹き出し本体 */
.balloon{
  position: relative;
  padding: 10px 20px;
  margin-bottom: 30px;
  background-color: #85d970;
  border-radius: 5px;
}

/* アイコンを下に表示 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #85d970;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}



/* ▼▼▼▼▼▼▼▼▼▼Version「心の声」▼▼▼▼▼▼▼▼▼▼ */
/* 吹き出し本体 */
.balloon-heart{
  position: relative;
  padding: 20px;
  background-color: #ade0ff;
  border-radius: 30px;
}
/* 大きい丸 */
.balloon-heart::before{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -35px;
  bottom: 15px;
  width: 30px;
  height: 30px;
}
/* 小さい丸 */
.balloon-heart::after{
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ade0ff;
  left: -55px;
  bottom: 10px;
  width: 15px;
  height: 15px;
}


/* ▼▼▼▼▼▼▼▼▼▼Version「Left」▼▼▼▼▼▼▼▼▼▼ */
.balloon-left {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0 1.5em 15px;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #FFF;
 	border: solid 3px #555;
 	box-sizing: border-box;
    border-radius: 5px;
}

.balloon-left:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
 	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
 	z-index: 2;
}

.balloon-left:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #555;
 	z-index: 1;
}

.balloon-left p {
	margin: 0;
	padding: 0;
}