解説04：結果セクション～CTAの作成

<section class="solution">
    <div class="bg-yellow">
        <div class="container">
            <h2 class="text-center">
                SkillHub アントレなら<br>
                Web起業を成功へ導く技術と知識、ぜんぶ教えます
            </h2>
            <p class="col-10 mx-auto text-center">
                起業家に必要なのは「必要最低限のWeb技術」です。本格的なデザイナーやプログラマーになる必要はありません。 このプランではあなたを成功に導くためのWeb技術を学びます。広く浅く、ミニマムな技術を身に着けます。
            </p>
        </div>
    </div><!-- /.bg-yellow -->

</section>

<section class="solution">
    <div class="solution-title position-relative bg-yellow">
        <div class="container">
         以下略

.solution-title{
  margin-bottom: calc(120px + 6rem); /* ::afterの高さ + 余白 */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.solution-title::after{
  content: "";
  position: absolute;
  bottom: -120px;
  right: 0;
  border-style: solid;
  border-width: 120px 50vw 0 50vw;
  border-color: #FFE20D transparent transparent transparent;
}

<h2 class="text-center">
    SkillHub アントレなら<br>
    <span class="marker-white">
        Web起業を成功へ導く<span class="text-pink">技術</span>と<span class="text-pink">知識</span>、ぜんぶ教えます
    </span>
</h2>

/* それぞれ似たクラスの並びに追加してください */
.text-pink{
  color: #FF0069;
}

.marker-white{
  background: linear-gradient(transparent 75%, #FFFFFF 75%);
}

/* 新規追加 */
p{ 
  line-height: 1.65;
}

.problem .col-4{
  margin-bottom: 0.75em;
}

.solution-title h2{
  margin-bottom: 1.5em;
}

/* 既存分の調整 */
.problem::after {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 7rem; /* col-4のmargin追加に合わせて調整 */
  background-color: #FFE20D;
}

<div class="container">
    <div class="row">
        <div class="col-4">
            <img src="images/solutions1@2x-8.png" alt="01-Web制作技術">
        </div>
        <div class="col-8">
            <h3 class="mt-0">
                楽しみながら、Web技術を習得していただきます
            </h3>
            <p>
                多くの人は面白さを味わう前に挫折してしまいます。例えばHTMLタグやCSSのプロパティをすべて覚えてからや、延々とプログラミングの基礎を学ぶなどしていると、どうしても苦しさばかりが先に来ます。Skillhubの学習方法は「プロジェクト・ベースド・ラーニング」という形をとります。簡単に言うと「作りながら学ぼう」ということです。
            </p>
            <p>
                驚くかもしれませんが、このプランではWebサービスをいきなり作ります！さらに作るだけではなく、それをローンチ（公開）します。そして、その過程で必要になった技術を学ぶというスタイルなので、楽しみながら技術を習得することを可能にします。
            </p>
        </div>
    </div><!-- /.row -->

</div><!-- /.container -->

<img src="images/solutions1@2x-8.png" alt="01-Web制作技術" class="w-max100">

<h3 class="mt-0">
    <span class="marker-pink">楽しみながら、Web技術を習得していただきます</span>
</h3>

.w-max100{
  max-width: 100%;
  height: auto;
}

.marker-pink{
  background: linear-gradient(transparent 75%, rgba(255, 0, 105, 0.7) 75%);
    /* h3に直接指定したい場合は display: inline; も必要 */
}

.fsize-14{
  font-size: 14px;
}

.mt-10rem{
  margin-top: 10rem;
}

<!-- ============================
/ CTA
/============================= -->  
<section class="mt-10rem bg-yellow position-relative">
    <h2 class="position-absolute  round-border">
        Web起業したい方、まずはご相談ください！
    </h2>
    <div class="container text-center">
        <p>
            SkillHubアントレに関する資料をオンラインでお送りいたします。
        </p>
        <p class="my-0">
            ５万人以上を指導してきた代表の吉田による、無料Zoomカウンセリングやメール相談も実施中。
        </p>
        <p class="mt-0 fsize-14">
            ※無料カウンセリングは毎月5名様限定となっております。詳しくはお問い合わせください。
        </p>

    </div>
</section>

/* ---------------------- */
/* CTA
/* ---------------------- */
.cta {
  padding-top: 40px;
}

.cta-baloon {
  width: 700px;
  max-width: calc(100% - 30px);
  /* 左右15pxずつ開ける */
  top: -30px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 5px 5px 7px;
  font-size: 28px;
  color: #FFF;
  text-align: center;
  background-color: #FFAB00;
}

.cta-baloon::after {
  position: absolute;
  content: "";
  bottom: -15px;
  left: calc(50% - 10px);
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: #FFAB00 transparent transparent transparent;
}

<p class="cta-toptext">
    SkillHubアントレに関する資料をオンラインでお送りいたします。
</p>

.cta-toptext {
  font-size: 21px;
  margin: 0.5em 0;
}

.cta-btns{
  display: flex;
  justify-content: space-between;
  width: 600px;
  max-width: 100%;
  margin: 2rem auto 0 auto;
}

/*=========== 以下、共通クラスに追加 ===========*/
.bg-black{
  background-color: #000000;
}

.btn.bg-white{
  border: 2px solid #000;
}

.btn.bg-black{
  border: 2px solid #FFF;
}

.cta {
  padding-top: 3rem;
  padding-bottom: 4rem;
}