<!-- tpcms-form: {
  "label": "スライドショー",
  "category": "03_コンテンツ",
  "fields": [
    { "key": "LINK", "type":"text", "label": "アンカーリンク（メニュー設定のスラッグと合わせる。もし変更した場合、元々の見た目が一部反映されない場合があります。）" },
    { "key":"H2", "type":"text", "label":"大見出し"},
    { "key":"H2_HOSOKU", "type":"text", "label":"大見出しの補足・英語表記など"},
    { "key": "BG", "type": "file", "label": "背景画像（大きな画面で見た場合に両サイドに見える画像）" },
    { "key": "MAINIMG1", "type": "file", "label": "１枚目の画像", "image_max_width": 1000, "image_quality": 82 },
    { "key": "MAINIMG1_TEXT", "type": "text", "label": "１枚目の画像下部に入れるテキスト" },
    { "key": "MAINIMG2", "type": "file", "label": "２枚目の画像", "image_max_width": 1000, "image_quality": 82 },
    { "key": "MAINIMG2_TEXT", "type": "text", "label": "２枚目の画像下部に入れるテキスト" },
    { "key": "MAINIMG3", "type": "file", "label": "３枚目の画像", "image_max_width": 1000, "image_quality": 82 },
    { "key": "MAINIMG3_TEXT", "type": "text", "label": "３枚目の画像下部に入れるテキスト" }
  ]
} -->

<style>
#{{LINK}}::before {
	background: url('./uploads/{{BG}}') no-repeat center center / cover;
}
</style>

<section id="{{LINK}}" class="section">
<div class="contents">

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

<div class="slide5">

<div class="slide img1">
<img src="./uploads/{{MAINIMG1}}" alt="">
{{#IF_MAINIMG1_TEXT}}<p class="text">{{MAINIMG1_TEXT}}</p>{{/IF_MAINIMG1_TEXT}}
</div>

<div class="slide">
<img src="./uploads/{{MAINIMG2}}" alt="">
{{#IF_MAINIMG2_TEXT}}<p class="text">{{MAINIMG2_TEXT}}</p>{{/IF_MAINIMG2_TEXT}}
</div>

<div class="slide">
<img src="./uploads/{{MAINIMG3}}" alt="">
{{#IF_MAINIMG3_TEXT}}<p class="text">{{MAINIMG3_TEXT}}</p>{{/IF_MAINIMG3_TEXT}}
</div>

<!-- インジケーターボタン（現在表示中ボタン） -->
<div class="slide-indicators"></div>

</div>
<!-- /.slide5 -->

</div>
</section>
