<!-- tpcms-form: {
  "label": "04_マップ（近くの観光地）",
  "category": "03_コンテンツ",
  "fields": [
    { "key": "LINK", "type":"text", "label": "メニューのリンク先にする場合（メニューのスラッグを入力）" },
    { "key":"H2", "type":"text", "label":"大見出し"},
    { "key":"H2_HOSOKU", "type":"text", "label":"大見出しの補足・英語表記など"},
    { "key":"H2_TEXT", "type":"textarea", "label":"説明文が必要ならここに入力して下さい。"},
    { "type": "file", "key": "FILE", "label": "地図画像をアップロードします", "image_max_width": 1920, "image_quality": 82 }
  ],
  "repeaters": [
    {
      "key": "ROWS",
      "label": "観光地",
      "sort": true,
      "fields": [
        { "key": "TITLE", "type": "text", "label": "タイトル" },
        { "key": "POSITION_TOP", "type": "text", "label": "上からの配置" },
        { "key": "POSITION_LEFT", "type": "text", "label": "左からの配置" },
        { "key": "LINK_URL", "type": "text", "label": "リンク先URL（空ならリンクなし）", "link_picker": true }
      ]
    }
  ]
} -->

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

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

{{#IF_H2_TEXT}}<p>{{H2_TEXT}}</p>{{/IF_H2_TEXT}}

<div class="image-map-container">

<img src="./uploads/{{FILE}}" alt="" class="base-image">

{{#ROWS}}

<div class="pin-item" style="top: {{POSITION_TOP}}; left: {{POSITION_LEFT}};">
<span class="pin-marker"><i class="fa-solid fa-location-dot"></i></span>
<span class="pin-label">{{#IF_LINK_URL}}<a href="{{LINK_URL}}">{{/IF_LINK_URL}}{{TITLE}}{{#IF_LINK_URL}}</a>{{/IF_LINK_URL}}</span>
</div>

{{/ROWS}}

</div>

</section>
