ラインナップのセクションをステージごとに区切る場合にのみ使用されます。

ステージカテゴリはタイムテーブル上で複数のステージをまとめて一列に表示したい場合に使用します。
その際、ヘッダ部分の色はステージカテゴリで指定した色が、
タイムテーブルのセルの色はそれぞれのステージの色が適用されます。

フェスを楽しむための必要機能を網羅！<br><br><ul><li>出演アーティスト情報</li><li>マイタイムテーブル</li><li>フェス飯リスト</li><li>現在地のわかるエリアアップ</li><li>最新ニュース、ガイド情報</li></ul>

公式アプリ

アーティスト詳細

混雑状況

ページが見つかりません

コインが足りません。チャージしますか？

ヘルプ

ホーム

タイムテーブル

インフォメーション

アカウントを削除

五十音

地域

サイズ

ステージ

ラインナップ

指定したスポット

メディア

ギャラリー

縦型

簡単な説明など

セクション1

セクション2

オフィシャルグッズ

送り先住所を変更したい方は、お問い合わせまでご連絡ください

簡単な説明
改行あり
改行あり

Tシャツ1

Tシャツ2

Tシャツ3

マイタイムテーブル

ニュース詳細

ニュース一覧

ニュース

当日のお知らせ

通知一覧

心と身体が "ととのう" 体験を提供するリゾート音楽フェスティバル

フェスプリウェブ

更新中...

決済処理中です。アプリを終了させたり、サスペンドさせたりしないでください。

QRコードをスキャン

サブクエスト達成！

「{title}」の報酬を受け取れます！ミッション一覧から完了ボタンをタップしてコインを獲得しましょう🎉


レディクエ達成！

設定

主催

パートナー

後援

あとで設定から変更することができます。

会場を選択

チケット第1次先行販売開始！

チケット購入

スライドして入場

キャンセル済み

使用できるチケットがありません。

公演終了

スライドして入場（公演日に有効）

{value} 枚 {value} 使用済み

入場します

{ref_number}

シリアルコード

購入完了

確認

チケット {value}

チケット注文詳細

開催1週間前を目処に「公式アプリ」にて受取

アプリで受取

受け取り方法

チケットを端末にダウンロードします

クローク

簡単な説明

マイチケット

チケット

注文

購入

すでに購入済みの方

入場チケット購入済の方へ

アップデートのお知らせ

利用規約に同意

通知をオンに

<body>


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    :root {
        --color-day1: #4D7ABC;
        --color-day2: #DB7C96;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background-color: #f4f4f4;
    }

    /* バナー */
    .banner-container {
        width: 100%;
        text-align: center;
        background: #fff;
    }
    .banner-container img {
        width: 100%;
        max-width: 500px;
        display: block;
        margin: 0 auto;
    }

    /* タブ部分（以前のデザインを継承） */
    .tabs-wrapper {
        padding: 20px 0;
        text-align: center;
        background: #fff;
    }
    .date-title {
        display: inline-block;
        padding: 10px 25px;
        color: white;
        font-weight: bold;
        font-size: 1.1em;
        border-radius: 30px;
        cursor: pointer;
        margin: 0 5px;
        border: none;
        transition: opacity 0.3s, transform 0.2s;
    }
    .date-title-0509 { background-color: var(--color-day1); }
    .date-title-0510 { background-color: var(--color-day2); }
    .date-title:hover { opacity: 0.8; transform: translateY(-2px); }
    .date-title.inactive { background-color: #ccc; }

    /* コンテンツ表示エリア */
    .content-section { display: none; }
    .content-section.active { display: block; }

    /* 画像：横幅いっぱい表示 */
    .full-image-link {
        display: block;
        width: 100%;
        cursor: zoom-in; /* 拡大できることを示すカーソル */
        margin-bottom: 10px;
    }
    .full-image-link img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 拡大表示用オーバーレイ (Lightbox風) */
    #overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.95);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        cursor: zoom-out;
    }
    #overlay img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    #overlay .close-btn {
        position: absolute;
        top: 20px; right: 20px;
        color: white;
        font-size: 30px;
        font-weight: bold;
    }
</style>



<div class="banner-container">
    <a href="https://mawaloop.link.fespli.com/timetable?tenant=mawaloop2026" target="_blank">
        <img src="https://static.fespli.com/mawaloop2026/appbanner" alt="MAWALOOP 2026">
    </a>
</div>

<div class="tabs-wrapper">
    <button id="btn-0509" class="date-title date-title-0509" onclick="toggleDay('day1')">5.9（土）</button>
    <button id="btn-0510" class="date-title date-title-0510 inactive" onclick="toggleDay('day2')">5.10（日）</button>
</div>

<div id="day1" class="content-section active">
    <div class="full-image-link" onclick="openModal('https://static.fespli.com/mawaloop2026/ML26TT_0509')">
        <img src="https://static.fespli.com/mawaloop2026/ML26TT_0509" alt="5/9 TT">
    </div>
    <div class="full-image-link" onclick="openModal('https://static.fespli.com/mawaloop2026/ML26TT_0509GOODS')">
        <img src="https://static.fespli.com/mawaloop2026/ML26TT_0509GOODS" alt="5/9 GOODS">
    </div>
</div>

<div id="day2" class="content-section">
    <div class="full-image-link" onclick="openModal('https://static.fespli.com/mawaloop2026/ML26TT_0510')">
        <img src="https://static.fespli.com/mawaloop2026/ML26TT_0510" alt="5/10 TT">
    </div>
    <div class="full-image-link" onclick="openModal('https://static.fespli.com/mawaloop2026/ML26TT_0510GOODS')">
        <img src="https://static.fespli.com/mawaloop2026/ML26TT_0510GOODS" alt="5/10 GOODS">
    </div>
</div>

<div id="overlay" onclick="closeModal()">
  <span class="close-btn">×</span>
  <img id="modal-img" src="" alt="拡大表示">
</div>

<script>
 // タブ切り替え
 function toggleDay(dayId) {
   document.querySelectorAll('.content-section').forEach(el => el.classList.remove('active'));
   document.getElementById(dayId).classList.add('active');

   // ボタンの色の明暗を切り替え
   if(dayId === 'day1') {
     document.getElementById('btn-0509').classList.remove('inactive');
     document.getElementById('btn-0510').classList.add('inactive');
   } else {
     document.getElementById('btn-0510').classList.remove('inactive');
     document.getElementById('btn-0509').classList.add('inactive');
   }
 }

 // 拡大表示ロジック
 function openModal(src) {
   const overlay = document.getElementById('overlay');
   const modalImg = document.getElementById('modal-img');
   modalImg.src = src;
   overlay.style.display = 'flex';
   // スクロール禁止
   document.body.style.overflow = 'hidden';
 }

 function closeModal() {
   const overlay = document.getElementById('overlay');
   overlay.style.display = 'none';
   // スクロール再開
   document.body.style.overflow = 'auto';
 }
</script>



</body>

script_test

スクリプトテスト

info


 // タブ切り替え
 function toggleDay(dayId) {
   document.querySelectorAll('.content-section').forEach(el => el.classList.remove('active'));
   document.getElementById(dayId).classList.add('active');

   // ボタンの色の明暗を切り替え
   if(dayId === 'day1') {
     document.getElementById('btn-0509').classList.remove('inactive');
     document.getElementById('btn-0510').classList.add('inactive');
   } else {
     document.getElementById('btn-0510').classList.remove('inactive');
     document.getElementById('btn-0509').classList.add('inactive');
   }
 }

 // 拡大表示ロジック
 function openModal(src) {
   const overlay = document.getElementById('overlay');
   const modalImg = document.getElementById('modal-img');
   modalImg.src = src;
   overlay.style.display = 'flex';
   // スクロール禁止
   document.body.style.overflow = 'hidden';
 }

 function closeModal() {
   const overlay = document.getElementById('overlay');
   overlay.style.display = 'none';
   // スクロール再開
   document.body.style.overflow = 'auto';
 }
