サービス紹介LP構成(課題→解決→料金→FAQ)

<div class="lp01-11-02">
          <div class="sec hd">サービス名</div>
          <div class="sec problem">
            <span class="ttl">こんなお悩みありませんか？</span>
            <div class="cards"><i></i><i></i><i></i></div>
          </div>
          <div class="sec solve">
            <span class="ttl">解決策</span>
            <div class="arrow">課題 → 解決 → 効果</div>
          </div>
          <div class="sec price">
            <span class="ttl">料金プラン</span>
            <div class="plans"><b>¥980</b><b>¥2,980</b><b>¥5,980</b></div>
          </div>
          <div class="sec faq">
            <span class="ttl">よくある質問</span>
            <div class="qa">Q. 期間は？</div>
            <div class="qa">Q. 解約は？</div>
          </div>
        </div>

.d01-11-02{padding:0;display:block}
        .lp01-11-02{width:100%;height:100%;display:flex;flex-direction:column;font-size:9px;background:#fff}
        .lp01-11-02 .sec{padding:7px 9px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:4px}
        .lp01-11-02 .hd{background:#0f766e;color:#fff;font-size:9px;font-weight:bold;padding:6px 9px}
        .lp01-11-02 .ttl{font-size:8px;font-weight:bold;color:#0f766e}
        .lp01-11-02 .cards{display:flex;gap:4px}
        .lp01-11-02 .problem .cards i{flex:1;height:16px;background:#fee2e2;border-radius:3px}
        .lp01-11-02 .arrow{font-size:8px;background:#ecfdf5;padding:5px;border-radius:3px;text-align:center;color:#065f46}
        .lp01-11-02 .plans{display:flex;gap:5px;justify-content:center}
        .lp01-11-02 .plans b{font-size:9px;background:#f0fdfa;border:1px solid #0f766e;border-radius:3px;padding:3px 6px;color:#0f766e}
        .lp01-11-02 .qa{font-size:7.5px;color:#555;background:#f7f7f7;padding:3px 5px;border-radius:2px}