{% require_css %}
<style>
  {% scope_css %}
  
  /* 
  Base Styles
  */
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

  body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif !important;
  }

  .tour_section {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
  }

  .tour_item {
    margin: 0;
    padding: 0;
    aspect-ratio: 2/1;
    width: 33.33%;
    height: auto;
    cursor: pointer;
    object-fit: cover;
    overflow: hidden;
    position: relative;
    animation: SlideIn 1.6s;
  }

  .tour_item_img {
    overflow: hidden;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .8s ease; 
  }

  .tour_item:hover img {
    transform: scale(1.07);
    transition: transform 1.5s ease; 
  }

  /* Caption Container */
  .tour_item_caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 2; /* FIX: Guarantees the text always sits on top of the image */
    pointer-events: none;
  }
  
  /* Fixes styling for Rich Text output */
  .tour_item_caption,
  .tour_item_caption p,
  .tour_item_caption span {
    font-family: 'Noto Sans JP', sans-serif !important;
    color: #ffffff !important; /* Forces text to white so it doesn't disappear into dark images */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Adds contrast */
  }

  /* FIX: Only apply the hover effect on Desktop */
  @media screen and (min-width: 834px) {
    .tour_item:hover .tour_item_caption {
      opacity: 1;
    }
  }

  /* 画面比率 (Mobile) */
  @media screen and (max-width: 833px) {
    body {
      margin: 0;
      padding: 0;
      font-family: 'Noto Sans JP', sans-serif !important;
    }
    
    .tour_section {
      margin: 0;
      padding: 0;
      border: 0;
      display: block;
    }
    
    .tour_item {
      margin: 0;
      padding: 0;
      width: 100%;
      position: relative;
    }
    
    .tour_item_img {
      width: 105%;
      height: 105%;
      margin: 0;
      padding: 0;
      aspect-ratio: 2/1;
      object-fit: cover;
      transform: none !important;
      transition: unset !important;
    }
    
    .tour_item_caption {
      position: absolute;
      bottom: 20px;
      left: 20px;
      margin: 0;
      padding: 0;
      opacity: 1 !important; /* FIX: Forces visibility on mobile unconditionally */
    }
  }

  /* アニメーション (Animation) */
  @keyframes SlideIn {
    0% {
      opacity: 0;
      transform: translateY(64px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  {% end_scope_css %}
</style>
{% end_require_css %}