解説14：④Skillhubメソッド～特徴まで

<section class="method">
    <div class="container px-0">
        <h2 class="col-10 col-sp-12 mx-auto text-center">
            初心者からでもプロ並みのWebサービス作成、収益化を可能にするSkillhubメソッド
        </h2>
        <p class="text-center col-sp-12">
            「まったくの初心者ですが大丈夫かな？」.....

/* ---------------------- */
/* Skillhubメソッド
/* ---------------------- */
.method-icon{
    width: 200px;
}

.method-num{
    font-size: 42px;
}

.method .material-icons-outlined {
    padding-top: 20px;
    font-size: 96px;
}

.method-ttl{
    font-size: 18px;
}

.method-arrow{
    transform: rotate(90deg);
}

.method-content .bg-white{
    padding: 1rem 0;
}

.method-content-img {
    margin-top: 1rem;
}

.method{
    padding-top: 4rem;
    padding-bottom: 2rem;
    background-size: 120px auto, 210px auto;
}

.mbg-left,
.mbg-right{
    background-size: auto 100px;
}

.col-sp-6{
    flex: 0 0 auto;
    width: calc(100% / 12 * 6);
}

<li class="col-4 col-sp-6 flow-item position-relative">
    <span class="flow-item-step bg-yellow">STEP1</span>
    <div class="flow-item-arrow position-absolute"></div>
    <div class="text-center">
        <h3>目標の決定</h3>
        <img src="images/flow1@2x-8.png" alt="目標の決定" class="w-max100">
    </div>  
    <p>
        「何を目標」にするのか、それは「いつまでに達成するのか」を決定します。例えば「6月までにサービスをローンチする」や「今年中にユーザーを1000人獲得する」などなんでも構いません。
    </p>
</li>
<!-- 他のliタグも同様に、col-sp-6クラスを追加 -->

/* ---------------------- */
/* 学習フロー
/* ---------------------- */
.flow-item:nth-child(3)::after{
    border-right: 1px solid #4D4D4D;
}

.flow-item:nth-child(even)::after,
.flow-item:nth-child(5)::after{
    content: none;
}

/* ---------------------- */
/* 卒業生の声
/* ---------------------- */
.testimonial-photo{
    width: 246px;
}

.testimonial-photo-mask{
    height: 200px;
}

.testimonial-photo-circle{
    width: 246px;
    height: 246px;
}

.testimonial-img{
    width: 220px;
    height: 220px;
}

.testimonial-text{
    padding: 2rem 1rem 1rem;
}

/* ---------------------- */
/* 特徴
/* ---------------------- */
.features{
    padding-top: 4rem;
    background-size: 160px auto, 160px auto;
}

<h2>
    <span class="marker-pink">SkIllhubアントレの特徴</span>
</h2>
<p class="col-10 col-sp-12 mx-auto">
    スキルハブでは担任制を採用しています。一人のコーチが最初から最後まで学習をサポート、あなたの力を最大限に伸ばします。 「就転職のためには何が必要なのか？」「フリーランスとして仕事のとりかたは？」「成功する起業は？」など「結果を出すための超実践的なスキル」を直に教えてもらうことができます。
</p>

<!-- 代表紹介 -->
<div class="teacher col-10 col-sp-12 px-0 mx-auto mt-5rem bg-white round-border">

.teacher.bg-white.round-border{
    margin-left: 0;
    margin-right: 0;  
}

.teacher .col{
    padding-left: 0;
}