<!-- tpcms-form: {
  "label": "04_★ご利用の流れ",
  "category": "03_コンテンツ",
  "fields": [
    { "key": "LINK", "type":"text", "label": "アンカーリンク（メニュー設定のスラッグと合わせる。わからない場合はそのままで。）" },
    { "key":"H2", "type":"text", "label":"大見出し"},
    { "key":"H2_HOSOKU", "type":"text", "label":"大見出しの補足・英語表記など"}
  ],
  "repeaters": [
    {
      "key": "ROWS",
      "label": "繰り返しブロック",
      "sort": true,
      "fields": [
        { "key": "STEP", "type": "text", "label": "ステップ（「Step01」など）" },
        { "key": "TITLE", "type": "text", "label": "ステップ見出し" },
        { "key": "TITLE_HOSOKU", "type": "text", "label": "ステップ見出しの補足" },
        { "key": "TITLE_SUB", "type": "text", "label": "本文見出し" },
        { "key": "TEXT", "type": "textarea","label": "説明" },
        { "key": "LIST1", "type": "text","label": "枠入りステップ１（必要があれば）" },
        { "key": "LIST2", "type": "text","label": "枠入りステップ２（必要があれば）" },
        { "key": "LIST3", "type": "text","label": "枠入りステップ３（必要があれば）" },
        { "key": "LIST4", "type": "text","label": "枠入りステップ４（必要があれば）" },
        { "key": "LIST5", "type": "text","label": "枠入りステップ５（必要があれば）" }
      ]
    }
  ]
} -->

<section id="{{LINK}}">

<h2 class="c">
<span class="fade-in-text">{{H2}}</span>
{{#IF_H2_HOSOKU}}<span class="small">{{H2_HOSOKU}}</span>{{/IF_H2_HOSOKU}}
</h2>

{{#ROWS}}

<div class="flow-box up">
{{#IF_STEP}}<span class="step-num">{{STEP}}</span>{{/IF_STEP}}
<div class="title">
<h3>
{{TITLE}}
{{#IF_TITLE_HOSOKU}}<span>{{TITLE_HOSOKU}}</span>{{/IF_TITLE_HOSOKU}}
</h3>
</div>
<div class="text">
{{#IF_TITLE_SUB}}<h3>{{TITLE_SUB}}</h3>{{/IF_TITLE_SUB}}
<p>{{TEXT}}</p>
<ul class="step">
{{#IF_LIST1}}<li>{{LIST1}}</li>{{/IF_LIST1}}
{{#IF_LIST2}}<li>{{LIST2}}</li>{{/IF_LIST2}}
{{#IF_LIST3}}<li>{{LIST3}}</li>{{/IF_LIST3}}
{{#IF_LIST4}}<li>{{LIST4}}</li>{{/IF_LIST4}}
{{#IF_LIST5}}<li>{{LIST5}}</li>{{/IF_LIST5}}
</ul>
</div>
</div>

{{/ROWS}}

</section>
