@charset "UTF-8";
/* CSS Document */




.section-top {
	background-color: #fff;
	margin-bottom: 20px;
}
.section-top__image{
  height: 300px;
  background-image: url("../images/review/photo_030.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}
.section-top__image h1 {
 line-height: 50px;
  font-size: 3.0rem;
  text-shadow: 2px 2px 3px #b3b3b3, -2px 2px 3px #b3b3b3, 2px -2px 3px #b3b3b3, -2px -2px 3px #b3b3b3;
  font-weight: 600;
  margin-bottom: 40px;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media(min-width:850px){
.section-top__image{
  height: 500px;
  background-image: url("../images/review/photo_030.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}
.section-top__image h1 {
 line-height: 50px;
  font-size: 3.6rem;
  text-shadow: 2px 2px 3px #b3b3b3, -2px 2px 3px #b3b3b3, 2px -2px 3px #b3b3b3, -2px -2px 3px #b3b3b3;
  font-weight: 600;
  margin-bottom: 40px;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
}
.section-review__container {
	margin: 0 auto;
}
.section-review {
	background-color: #fff;
	margin: 20px auto;
	padding-top: 50px;
	padding-bottom: 60px;
}
/* 囲み線 */
.box{
  display: inline-block;	
  border-top: 2px solid #ADA091;
  border-bottom: 2px solid #ADA091;
  padding: 10px 20px;
  position: relative;
  margin-bottom: 20px;	
}

.box:before, .box:after{
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #ADA091;
}

.box:before {
  left: 10px;
}

.box:after {
  right: 10px;
}

.box p {
	text-align: left;
	font-size: 1.5rem;

}
/* 囲み線 */
/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000;
  background-color: #D9C8B1;
  margin-left: 110px;          /* 左に余白を設ける */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #D9C8B1;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
/* 吹き出し終わり */
/*　吹き出し顔　*/
.balloon1 img {
	height: 84px;
	width: 84px;
	transform: scale(-1, 1);
}
.balloon1 p {
	text-align: left;
}

/* 吹き出し本体 */
.balloon2{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color: #D9C8B1;
  margin-right: 110px;          /* 右に余白を設ける */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon{
  position: absolute;
  right: -110px;
  top: 0;
op: 0;
}
/* 三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #D9C8B1;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.balloon2 img {
	height: 84px;
	width: 84px;
}
.balloon2 p {
	text-align: left;
}

@media(min-width:850px){
	.section-review__container {
	margin: 0 auto;
		max-width: 1040px;
}
	.section-review {
	background-color: #fff;
	margin: 20px auto;
	padding: 50px;
}
}

.section-before-after__container{
	background-color: #fff;
	margin: 10px;
}