## Category

## Tag

## All Colors

## formProgress

/src/assets2/scss/_components.scss

- app-item
- app-form

1. 1. ログイン方法について
2. 2. 決済方法選択
3. 3. 登録完了

    <div class="CG2-formProgress">
      <ol>
        <li>1. ログイン方法について</li>
        <li class="CG2-formProgress__item--current">2. 決済方法選択</li>
        <li>3. 登録完了</li>
      </ol>
    </div>

## signupFrom

/src/assets2/scss/_components.scss

- app-item
- app-form

購読料は月額800円（税抜）
PayPal払いなら30日間無料

支払い処理中にエラーが発生しました

お手数ですがもう一度手続きをおこなってください。

利用規約に同意する

- 再度支払い手続きをおこなう

※CodeGridの購読にはGoogleアカウントが必要です。Googleアカウント作成

- PayPalで支払う

- WebMoney 1ヶ月分
- WebMoney 1年分

※CodeGridの購読にはGoogleアカウントが必要です。Googleアカウント作成

再度エラーになる場合は以下よりお問い合わせください。

    <div class="CG2-signupFrom">

      <div class="CG2-signupFrom__lead">
        購読料は月額800円（税抜）
        <div class="CG2-signupFrom__leadSub">
          PayPal払いなら30日間無料
        </div>
      </div>

      <div class="CG2-signupFrom__information">
        <p>支払い処理中にエラーが発生しました</p>
      </div>

      <div class="CG2-signupFrom__text">
        <p>お手数ですがもう一度手続きをおこなってください。</p>
      </div>

      <div class="CG2-signupFrom__check">
        <label><input type="checkbox">利用規約に同意する</label>
      </div>

      <div class="CG2-signupFrom__buttonContainer">
        <ul>
          <li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>
        </ul>
        <div class="CG2-signupFrom__buttonContainerText">
          <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>
        </div>
      </div>

      <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
        <ul>
          <li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>
        </ul>
        <ul>
          <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>
          <li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>
        </ul>
        <div class="CG2-signupFrom__buttonContainerText">
          <p>※CodeGridの購読にはGoogleアカウントが必要です。　<a href="#">Googleアカウント作成</a></p>
        </div>
      </div>

      <div class="CG2-signupFrom__annotation">
        <p>再度エラーになる場合は以下よりお問い合わせください。</p>
      </div>
    </div>

## paymentTable

/src/assets2/scss/_components.scss

- app-item
- app-form
- www-item

購読料 （税込金額） | 月額 800 円 （税込864円） | 月払い 800 円 （税込864円） 年払い 9,600 円 （税込10,368円）
購読料 | 自動継続 | 随時購入
無料購読期間 | 無料購読期間 30 日 | 無料購読期間 なし

    <div class="CG2-paymentTable">
      <table>
        <thead>
          <tr>
            <th></th>
            <th><img src="/build/assets2/img/logos/paypal.svg" alt="PayPal" width="100" height="25"></th>
            <th><img src="/build/assets2/img/logos/webmoney.png" alt="WebMoney" width="156" height="30"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>購読料<br><span class="CG2-paymentTable__annotation">（税込金額）</span></th>
            <td>
              <div class="CG2-paymentTable__priceList">
                <ul>
                  <li>
                    <div class="CG2-paymentTable__priceLabel">月額</div>
                    <div class="CG2-paymentTable__priceValue">800</div>
                    <div class="CG2-paymentTable__priceUnit">円</div>
                    <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>
                  </li>
                </ul>
              </div>
            </td>
            <td>
              <div class="CG2-paymentTable__priceList">
                <ul>
                  <li>
                    <div class="CG2-paymentTable__priceLabel">月払い</div>
                    <div class="CG2-paymentTable__priceValue">800</div>
                    <div class="CG2-paymentTable__priceUnit">円</div>
                    <div class="CG2-paymentTable__priceAnnotation">（税込864円）</div>
                  </li>
                  <li>
                    <div class="CG2-paymentTable__priceLabel">年払い</div>
                    <div class="CG2-paymentTable__priceValue">9,600</div>
                    <div class="CG2-paymentTable__priceUnit">円</div>
                    <div class="CG2-paymentTable__priceAnnotation">（税込10,368円）</div>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <th>購読料</th>
            <td>自動継続</td>
            <td>随時購入</td>
          </tr>
          <tr>
            <th>無料購読期間</th>
            <td>
              <div class="CG2-paymentTable__valueList">
                <ul>
                  <li>
                    <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
                    <span class="CG2-paymentTable__value">30</span>
                    <span class="CG2-paymentTable__valueUnit">日</span>
                  </li>
                </ul>
              </div>
            </td>
            <td>
              <div class="CG2-paymentTable__valueList">
                <ul>
                  <li>
                    <span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
                    <span class="CG2-paymentTable__valueText">なし</span>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>