#27  お客様の声のセクション【ポートフォリオ作成】

<!-- お客様の声 -->
<div class="review">
    <div class="review__inner">
        <h2 class="review__headline">
            <span class="review__headline-en">Works</span>
            <span class="review__headline-jp">実績のご紹介</span>
        </h2>
        <div class="review__wrap">
            <div class="review__each">
                <p class="review__comment">はじめてのWEBサイト制作の依頼でしたが、わからないことがいくつあっても、嫌な顔ひとつせず対応してくださいました。
                <br>まるで自分のWEBサイトを作るような熱量を持って作成していただき、とても満足のいくものができたと思います。
                <br>はじめてで不安が多い方にこそオススメしたいです。</p>
                <div class="review__author">
                    <img class="review__icon" src="img/review__icon01.png" alt="山田 花子様">
                    <p class="review__name"><span>飲食店経営</span>山田 花子様</p>
                </div>
            </div>
            <div class="review__each">
                <p class="review__comment">私がデザインしかできないため、コーディング業務を定期的に行っていただけるパートナーとしてお仕事をお願いしています。
                <br>いつも私が作成したデザインを綺麗にページに再現してくれるので、お客様から修正がほとんど発生せず気持ちよく仕事ができています。
                <br>これからも末長くお付き合いしていきたいです。</p>
                <div class="review__author">
                    <img class="review__icon" src="img/review__icon02.png" alt="山田 花子様">
                    <p class="review__name"><span>WEBデザイナー</span>山田 太郎様</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /お客様の声 -->

/* ===========================

お客様の声

=========================== */

.review{
  padding: 130px;
  background-color: #F9F9FF;
}

.review__inner{
  max-width: 1140px;
  margin:0 auto;
}

.review__headline{
  margin-bottom: 60px;
}

.review__headline-en{
  font-family: 'Montserrat';
  font-weight: 700;
  font-size: 20px;
  color: #7768ED;
  display: block;
  margin-bottom: 10px;
}

.review__headline-jp{
  font-weight: 700;
  font-size: 32px;
}

.review__wrap{
  display: flex;
  justify-content: space-between;
}

.review__each{
  flex-basis: calc(50% - 40px);
}

.review__comment{
  padding-left: 20px;
  border-left: solid 10px #DDD9FF;
  line-height: 200%;
  margin-bottom: 20px;
}

.review__author{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.review__icon{
  margin-right: 10px;
}

.review__name span{
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}