コンテンツにスキップ
Science Tokyo
デザインシステム

カルーセル／Carousel

左右のボタンによってコンテンツの位置を左右にスライドさせることができるコンポーネントです。
内部の要素は同じ種類のコンポーネントが繰り返されます。

<section  class="splide c-carousel c-carousel--default" aria-label="カルーセルの概要" data-js-carousel="1" data-js-carousel-auto="true" data-js-carousel-loop="true" data-js-carousel-pagination="true"><div class="splide__track">
    <ul class="splide__list"><li class="splide__slide"><figure class="c-image c-image--fullWidth">
    <picture>
      <img
        src="/images/sample.webp"
        width="1600"
        height="900"
        alt="Placeholder Image"
      />
    </picture>
  </figure></li><li class="splide__slide"><figure class="c-image c-image--fullWidth">
    <picture>
      <img
        src="/images/sample.webp"
        width="1600"
        height="900"
        alt="Placeholder Image"
      />
    </picture>
  </figure></li></ul>
  </div>
  <div class="c-carousel__controller">
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z"/></svg>
      </button>
    </div>
    <div class="splide__controls"><button class="splide__toggle is-active"
              type="button"
              aria-controls="toggle-track"
              aria-label="Pause autoplay">
        <svg class="splide__toggle__play"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
          <path d="m22 12-20 11v-22l10 5.5z"></path>
        </svg>
        <svg class="splide__toggle__pause"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg">
          <path d="m2 1v22h7v-22zm13 0v22h7v-22z"></path>
        </svg>
      </button>
      <ul class="splide__pagination"></ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z"/></svg>
      </button>
    </div>
  </div>
</section>

原則

  • 「ヒーロー画像」タイプは、ヒーロー画像を複数設定することができます。
    • 複数の画像を設定する場合にはコントローラーを表示します。
    • 「見出し h1」の代わりに利用する「ヒーロー画像」コンポーネントとは別物です。
    • カルーセルの「ヒーロー画像」タイプを利用する場合、必ずページ内に「見出し h1」が別途設置されていることを確認してください。
  • 「イベント」タイプは、イベント情報ページを開催日ごとに表示するコンポーネントを内包します。
  • 「メディア」タイプは、ニュースやイベントなどのメディア情報ページを投稿日ごとに表示するコンポーネントを内包します。
  • 「イベント」タイプと「メディア」タイプは、最初のカードが表示されているときは「戻る」ボタンは非表示、最後のカードが表示されているときは「次へ」ボタンが非表示になります。

パターン

ヒーロー画像

ヒーロー画像をカルーセルで表示することができます。

<section class="splide c-carousel c-carousel--hero" aria-label="" data-js-carousel="1" data-js-carousel-auto="true" data-js-carousel-loop="true" data-js-carousel-pagination="true">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <a class="c-hero" href="https://www.google.com"
          ><div class="c-hero__body">
            <div class="container">
              <div class="grid grid--justifyStart sm:grid--justifyCenter">
                <div class="grid__col grid__col--span8">
                  <div class="c-hero__title">
                    <p class="c-hero__heading">タイトル1文字列</p>
                    <p class="c-hero__shoulder">ショルダーテキスト1</p>
                  </div>
                  <div class="c-hero__description">
                    <p class="c-paragraph">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-hero__image">
            <div class="c-image c-image--fullWidth">
              <picture>
                <img src="/images/sample.webp" width="1600" height="900" alt="画像のalt" />
              </picture>
            </div></div
        ></a>
      </li>
      <li class="splide__slide">
        <a class="c-hero" href="https://www.google.com" target="_blank"
          ><div class="c-hero__body">
            <div class="container">
              <div class="grid grid--justifyStart sm:grid--justifyCenter">
                <div class="grid__col grid__col--span8">
                  <div class="c-hero__title">
                    <p class="c-hero__heading">タイトル2文字列</p>
                    <p class="c-hero__shoulder">ショルダーテキスト2</p>
                  </div>
                  <div class="c-hero__description">
                    <p class="c-paragraph">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-hero__image">
            <div class="c-image c-image--fullWidth">
              <picture>
                <img src="/images/sample.webp" width="1600" height="900" alt="画像のalt" />
              </picture>
            </div></div
        ></a>
      </li>
      <li class="splide__slide">
        <a class="c-hero" href="https://www.google.com"
          ><div class="c-hero__body">
            <div class="container">
              <div class="grid grid--justifyStart sm:grid--justifyCenter">
                <div class="grid__col grid__col--span8">
                  <div class="c-hero__title">
                    <p class="c-hero__heading">タイトル3文字列</p>
                    <p class="c-hero__shoulder">ショルダーテキスト3</p>
                  </div>
                  <div class="c-hero__description">
                    <p class="c-paragraph">説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-hero__image">
            <div class="c-image c-image--fullWidth">
              <picture>
                <img src="/images/sample.webp" width="1600" height="900" alt="画像のalt" />
              </picture>
            </div></div
        ></a>
      </li>
    </ul>
  </div>
  <div class="c-carousel__controller">
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" /></svg>
      </button>
    </div>
    <div class="splide__controls">
      <button class="splide__toggle is-active" type="button" aria-controls="toggle-track" aria-label="Pause autoplay">
        <svg class="splide__toggle__play" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="m22 12-20 11v-22l10 5.5z"></path>
        </svg>
        <svg class="splide__toggle__pause" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="m2 1v22h7v-22zm13 0v22h7v-22z"></path>
        </svg>
      </button>
      <ul class="splide__pagination"></ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" /></svg>
      </button>
    </div>
  </div>
</section>

イベント

イベント情報をカルーセルで表示することができます。

<section class="splide c-carousel c-carousel--tile" aria-label="" data-js-carousel="3" data-js-carousel-auto="false" data-js-carousel-loop="false" data-js-carousel-pagination="false">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com"
          ><div class="c-card__body">
            <p class="c-card__title"><span class="c-card__titleLabel">イベントタイトル1 タイトルテキストタイトルテキストタイトルテキスト</span></p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31"><span class="c-card__dateStartYear">2024年</span>12月31日（月）</time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              〇〇キャンパス(開催場所のテキスト)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">タグ1</span></span>
              <span class="c-label"> <span class="c-label__text">タグ2</span></span>
            </div>
          </div></a
        >
      </li>
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com"
          ><div class="c-card__body">
            <p class="c-card__title"><span class="c-card__titleLabel">イベントタイトル2 タイトルテキストタイトルテキストタイトルテキスト</span></p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31"><span class="c-card__dateStartYear">2024年</span>12月31日（月）</time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              〇〇キャンパス(開催場所のテキスト)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">タグ1</span></span>
              <span class="c-label"> <span class="c-label__text">タグ2</span></span>
            </div>
          </div></a
        >
      </li>
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com" target="_blank"
          ><div class="c-card__body">
            <p class="c-card__title">
              <span class="c-card__titleLabel">イベントタイトル3 タイトルテキストタイトルテキストタイトルテキスト</span
              ><svg class="icon c-card__titleIcon" role="img" aria-label="新しいウインドウで開く">
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31"><span class="c-card__dateStartYear">2024年</span>12月31日（月）</time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              〇〇キャンパス(開催場所のテキスト)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">タグ1</span></span>
              <span class="c-label"> <span class="c-label__text">タグ2</span></span>
            </div>
          </div></a
        >
      </li>
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com" target="_blank"
          ><div class="c-card__body">
            <p class="c-card__title">
              <span class="c-card__titleLabel">イベントタイトル3 タイトルテキストタイトルテキストタイトルテキスト</span
              ><svg class="icon c-card__titleIcon" role="img" aria-label="新しいウインドウで開く">
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31"><span class="c-card__dateStartYear">2024年</span>12月31日（月）</time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              〇〇キャンパス(開催場所のテキスト)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">タグ1</span></span>
              <span class="c-label"> <span class="c-label__text">タグ2</span></span>
            </div>
          </div></a
        >
      </li>
    </ul>
  </div>
  <div class="c-carousel__controller">
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" /></svg>
      </button>
    </div>
    <div class="splide__controls">
      <ul class="splide__pagination"></ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" /></svg>
      </button>
    </div>
  </div>
</section>

英語表示

<!-- en -->
<section class="splide c-carousel c-carousel--tile" aria-label="" data-js-carousel="3" data-js-carousel-auto="false" data-js-carousel-loop="false" data-js-carousel-pagination="false">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com">
          <div class="c-card__body">
            <p class="c-card__title"><span class="c-card__titleLabel">Event title text title text title text title text title text</span></p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31">Mon, Dec. 31<span class="c-card__dateStartYear">2024</span></time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              XXXX Campus (Location text)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
            </div>
          </div>
        </a>
      </li>
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com">
          <div class="c-card__body">
            <p class="c-card__title"><span class="c-card__titleLabel">Event title text title text title text title text title text</span></p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31">Mon, Dec. 31<span class="c-card__dateStartYear">2024</span></time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              XXXX Campus (Location text)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
            </div>
          </div>
        </a>
      </li>
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com" target="_blank">
          <div class="c-card__body">
            <p class="c-card__title">
              <span class="c-card__titleLabel">Event title text</span>
              <svg class="icon c-card__titleIcon" role="img" aria-label="Open in a new window">
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31">Mon, Dec. 31<span class="c-card__dateStartYear">2024</span></time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              XXXX Campus (Location text)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
            </div>
          </div>
        </a>
      </li>
      <li class="splide__slide">
        <a class="c-card c-card--event" href="https://www.google.com" target="_blank">
          <div class="c-card__body">
            <p class="c-card__title">
              <span class="c-card__titleLabel">Event title text</span>
              <svg class="icon c-card__titleIcon" role="img" aria-label="Open in a new window">
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </p>
            <p class="c-card__date">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#calendar"></use>
              </svg>
              <time class="c-card__dateStart" datetime="2024-12-31">Mon, Dec. 31<span class="c-card__dateStartYear">2024</span></time>
            </p>
            <p class="c-card__place">
              <svg class="icon c-card__bodyIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#location"></use>
              </svg>
              XXXX Campus (Location text)
            </p>
            <div class="c-card__tag">
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
              <span class="c-label"> <span class="c-label__text">Tag text</span></span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="c-carousel__controller">
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" /></svg>
      </button>
    </div>
    <div class="splide__controls">
      <ul class="splide__pagination"></ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21"><path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" /></svg>
      </button>
    </div>
  </div>
</section>

メディア

ニュースや記事などのメディア情報をカルーセルで表示することができます。

<section class="splide c-carousel c-carousel--tile" aria-label="カルーセルの概要" data-js-carousel="3" data-js-carousel-auto="false" data-js-carousel-loop="false" data-js-carousel-pagination="false">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel"> メディア情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト </span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2024-12-31">
                <span class="c-card__dateStartYear">2024年</span> 01月01日 </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">タグテキスト1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">タグテキスト2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel"> メディア情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト </span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2024-12-31">
                <span class="c-card__dateStartYear">2024年</span> 01月01日 </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">タグテキスト1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">タグテキスト2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel"> メディア情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト </span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2024-12-31">
                <span class="c-card__dateStartYear">2024年</span> 01月01日 </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">タグテキスト1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">タグテキスト2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel"> メディア情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト </span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2024-12-31">
                <span class="c-card__dateStartYear">2024年</span> 01月01日 </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">タグテキスト1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">タグテキスト2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
    </ul>
  </div>
  <div class="c-carousel__controller">
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
          <path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" />
        </svg>
      </button>
    </div>
    <div class="splide__controls">
      <ul class="splide__pagination"></ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
          <path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" />
        </svg>
      </button>
    </div>
  </div>
</section>

英語表示

<!-- en -->
<section class="splide c-carousel c-carousel--tile" aria-label="カルーセルの概要" data-js-carousel="3" data-js-carousel-auto="false" data-js-carousel-loop="false" data-js-carousel-pagination="false">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel">Media title text</span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2024-12-31">
                December 31,
                <span class="c-card__dateStartYear">2024</span>
              </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">Tag text1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">Tag text2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel">Media title text</span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2025-01-01">
                January 1,
                <span class="c-card__dateStartYear">2025</span>
              </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">Tag text1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">Tag text2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel">Media title text</span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2024-12-31">
                December 31,
                <span class="c-card__dateStartYear">2024</span>
              </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">Tag text1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">Tag text2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
      <li class="splide__slide"><a class="c-card c-card--media" href="#">
          <div class="c-card__body">
            <h3 class="c-card__title">
              <span class="c-card__titleLabel">Media title text</span>
            </h3>
            <p class="c-card__date">
              <time class="c-card__dateStart" datetime="2025-01-01">
                January 1,
                <span class="c-card__dateStartYear">2025</span>
              </time>
            </p>
            <div class="c-card__tag">
              <span class="c-label">
                <span class="c-label__text">Tag text1</span>
              </span>
              <span class="c-label">
                <span class="c-label__text">Tag text2</span>
              </span>
            </div>
          </div>
          <div class="c-card__image">
            <div class="c-image">
              <picture>
                <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
              </picture>
            </div>
          </div>
        </a></li>
    </ul>
  </div>
  <div class="c-carousel__controller">
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
          <path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" />
        </svg>
      </button>
    </div>
    <div class="splide__controls">
      <ul class="splide__pagination"></ul>
    </div>
    <div class="splide__arrows">
      <button class="splide__arrow splide__arrow--next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
          <path d="m16.84 10.91-6.838-6.838-1.484 1.463 4.332 4.333H3.333v2.083h9.517l-4.332 4.332 1.484 1.463 6.837-6.837Z" />
        </svg>
      </button>
    </div>
  </div>
</section>