mekuma-inc
12/30/2019 - 3:53 AM

Pricing Plan #3

<div class="row justify-content-center no-gutters">
    <div class="col-sm-6 col-md-4 col-lg-3 g-hidden-sm-down g-mr-minus-30 g-mb-50">
        <!-- Pricing -->
        <div class="u-shadow-v28 g-bg-white rounded g-px-30 g-pt-40 g-pb-40">
            <ul class="list-unstyled g-color-gray-dark-v4 mb-0">
                <li class="g-brd-bottom g-brd-gray-light-v4 g-color-black g-font-weight-600 g-py-15">
                    タイプ
                </li>
                <li class="g-brd-bottom g-brd-gray-light-v4 g-color-black g-font-weight-600 g-py-15">
                    料金
                </li>
                <li class="g-brd-bottom g-brd-gray-light-v4 g-py-15">
                    機能A
                </li>
                <li class="g-brd-bottom g-brd-gray-light-v4 g-py-15">
                    機能B
                </li>
                <li class="g-brd-bottom g-brd-gray-light-v4 g-py-15">
                    機能C
                </li>
                <li class="g-py-15">
                    機能D
                </li>
            </ul>
        </div>
        <!-- End Pricing -->
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3 g-mb-50">
        <!-- Pricing -->
        <div class="u-shadow-v29 g-bg-primary text-left text-md-center rounded g-pos-rel g-z-index-1 g-mt-minus-30 g-px-30 g-py-60">
            <h2 class="h5 g-color-white-opacity-0_9 g-font-weight-400 mb-2">マルチ
                <span class="g-hidden-md-up">ライセンス</span>
            </h2>
            <div class="d-block g-mb-23">
                <span class="align-top g-color-white">¥</span>
                <span class="g-color-white g-font-weight-700 g-font-size-40">125.</span>
                <span class="g-color-white">00</span>
            </div>

            <ul class="list-unstyled g-color-main mb-0">
                <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-white-opacity-0_1 g-py-15">
                    <span class="g-hidden-md-up mr-3">機能A</span>
                    <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"></path>
                    </svg>
                </li>
                <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-white-opacity-0_1 g-py-15">
                    <span class="g-hidden-md-up mr-3">機能B</span>
                    <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"></path>
                    </svg>
                </li>
                <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-white-opacity-0_1 g-py-15">
                    <span class="g-hidden-md-up mr-3">機能C</span>
                    <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"></path>
                    </svg>
                </li>
                <li class="d-flex d-md-block justify-content-between justify-content-start g-py-15">
                    <span class="g-hidden-md-up mr-3">機能D</span>
                    <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"></path>
                    </svg>
                </li>
            </ul>
        </div>
        <!-- End Pricing -->
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3 g-ml-minus-30--md g-mb-50">
        <!-- Pricing -->
        <div class="u-shadow-v28 g-bg-white text-left text-md-center rounded g-px-30 g-py-40">
            <h2 class="h5 g-color-gray-dark-v4 g-font-weight-400 mb-2">シングル
                <span class="g-hidden-md-up">License</span>
            </h2>
            <div class="d-block mb-3">
                <span class="align-top g-color-black">¥</span>
                <span class="g-color-black g-font-weight-700 g-font-size-40">25.</span>
                <span class="g-color-black">00</span>
            </div>

            <ul class="list-unstyled mb-0">
                <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-gray-light-v4 g-py-15">
                    <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">機能A</span>
                    <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"></path>
                    </svg>
                </li>
                <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-gray-light-v4 g-py-15">
                    <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">機能B</span>
                    <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"></path>
                    </svg>
                </li>
                <li class="d-flex d-md-block justify-content-between justify-content-start g-brd-bottom g-brd-gray-light-v4 g-py-15">
                    <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">機能C</span>
                    <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"></path>
                    </svg>
                </li>
                <li class="d-flex d-md-block justify-content-between justify-content-start g-py-15">
                    <span class="g-hidden-md-up g-color-gray-dark-v4 mr-3">機能D</span>
                    <svg width="14" height="14" id="close" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z" fill="#bbb"></path>
                    </svg>
                </li>
            </ul>
        </div>
        <!-- End Pricing -->
    </div>
</div>