/* 自動生成: 上流 index.html の <style> */

      *, ::before, ::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background-color: #f0f4f3;
      }

      :root {
        --lux-ease: cubic-bezier(0.16, 1, 0.3, 1);
        --lux-duration: 1.5s;
        --lux-duration-slow: 2.3s;
        --lux-rise: 40px;
        --lux-slide: 68px;
      }

      html.js .lux-section .lux-item {
        opacity: 0;
        transition:
          opacity var(--lux-duration) var(--lux-ease),
          transform var(--lux-duration) var(--lux-ease);
        transition-delay: calc(var(--lux-i, 0) * 180ms);
        will-change: opacity, transform;
      }

      html.js .lux-section .lux-item[data-lux-dir="up"] {
        transform: translate3d(0, var(--lux-rise), 0);
      }

      html.js .lux-section .lux-item[data-lux-dir="left"] {
        transform: translate3d(calc(var(--lux-slide) * -1), 0, 0);
      }

      html.js .lux-section .lux-item[data-lux-dir="right"] {
        transform: translate3d(var(--lux-slide), 0, 0);
      }

      html.js .lux-section .lux-item[data-lux-dir="fade"] {
        transition-duration: var(--lux-duration-slow);
        transform: none;
      }

      html.js .lux-section.lux-inview .lux-item {
        opacity: 1 !important;
        transform: none !important;
      }

      @keyframes luxKenBurnsScale {
        from { transform: scale(1); }
        to { transform: scale(1.08); }
      }

      .lux-ken-burns {
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        transform-origin: center center;
        animation: luxKenBurnsScale 22s var(--lux-ease) forwards;
      }

      [data-pencil-name^="News 20"],
      [data-pencil-name="Onsen Block"],
      [data-pencil-name="Rooms Block"] {
        overflow: hidden;
      }

      .lux-image-hover {
        transition: transform 0.75s var(--lux-ease);
        transform-origin: center;
      }

      [data-pencil-name="Onsen Block"]:hover .lux-image-hover,
      [data-pencil-name="Rooms Block"]:hover .lux-image-hover,
      [data-pencil-name^="News 20"]:hover .lux-image-hover {
        transform: scale(1.045);
      }

      @media (prefers-reduced-motion: reduce) {
        html.js .lux-section .lux-item {
          opacity: 1 !important;
          transform: none !important;
          transition: none !important;
        }

        .lux-ken-burns {
          animation: none !important;
        }

        .lux-image-hover {
          transition: none !important;
        }
      }

      [data-fade-slider] .media-cover {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      @media (min-width: 768px) {
        [data-pencil-name="Cuisine Banner Fade"] .cuisine-banner-slide-img--close {
          transform: scale(1.2);
          transform-origin: center center;
        }
      }

      .pen-fade-dots {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        z-index: 10;
        display: flex;
        gap: 8px;
      }

      @media (min-width: 768px) {
        .pen-fade-dots {
          right: 80px;
          bottom: 24px;
        }
      }

      .pen-fade-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      .pen-fade-dot.is-active {
        background-color: #ffffff;
      }

      @media (prefers-reduced-motion: reduce) {
        [data-fade-slider] [data-fade-stage],
        [data-fade-slider] [data-fade-slide],
        [data-fade-caption] {
          transition: none !important;
        }
      }