@charset "utf-8";

.first-view-slider,
.first-view-slider-item  {
  height: calc(100vh - 65px);
}
@media screen and (min-width: 1024px) {
}

/* ------------------------------------------
  Food Showcase
------------------------------------------ */
.food-hero::before {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  content: "";
}

.food-hero-bg {
  height: 541px;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

.food-panel-wrap {
  z-index: 2;
}

.food-panel-text{
  width: 225px;
}

.food-panel-content {
  inset: 0;
}

/*.food-panel-decor {
  right: 15px;
  bottom: 90px;
  width: 90px;
}*/

.food .ui-media-zoom-trigger {
  border-radius: 7px 35px 7px 7px;
}

@media screen and (min-width: 1024px) {
  .food-hero-bg {
    height: 570px;
  }

  .food-panel {
    width: 670px;
  }

  .food-panel > picture img{
    width: 670px;
  }

  .food-panel-text{
    width: 375px;
  }

  .food-panel-decor {
    right: 72px;
    bottom: 59px;
    width: 136px;
  }

  .food-panel-content {
    padding: 80px 0 110px;
  }

  .food-deco{
    width: 136px;
    right: -160px;
    bottom: -20px;
  }
}

/* ------------------------------------------
  Sightseeing Showcase
------------------------------------------ */
.section-title-en,
.sightseeing-more {
  letter-spacing: 0.1em;
}

/* ------------------------------------------
  Activity Showcase
------------------------------------------ */
.activity::after{
  content: '';
  position: absolute;
  top: 80px;
  left: 0;
  width: 89.33vw;
  height: calc(100% - 80px);
  background-color: var(--color-base4);
  border-radius: 0 95px 95px 0;
  z-index: 0;
}
.activity-section-label {
  opacity: .45;
  color: #D7CEC7;
  margin-bottom: -15px;
}
.activity-others .activity-section-label {
  margin-left: 0;
}

.activity-pickup-label {
  top: 10px;
  right: 10px;
}

.activity-pickup-label-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.2em;
}

.activity-scroll-track::after {
  position: absolute;
  top: calc(50% + 12px);
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid #146639;
  /*border-right: 1px solid #146639;*/
  content: "";
  transform: translateY(-50%) rotate(30deg);
}

.activity-scroll-bike {
  width: 45px;
  left: 0;
  bottom: 0;
  animation: motion-activity-bike 5s ease-out infinite;
}

.activity-scroll-label {
  top: calc(50%);
  right: 30px;
  transform: translateY(-50%);
  width: 55px;
}

@keyframes motion-activity-bike {
  0% {
    opacity: 0;
    left: 0;
  }

  18% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    left: calc(100% - 140px);
  }
}

@media screen and (min-width: 1024px) {
  .activity-section-label,
  .activity-others .activity-section-label {
    margin-left: auto;
  }
  .activity-pickup-label {
    top: 15px;
    right: 15px;
  }
  .activity-pickup-more-wrap{
    display: none;
  }
  .activity-scroll-bike {
    animation: motion-activity-bike 4s ease-out infinite;
  }
  .activity-scroll-label{
    width: 85px;
    right: 60px;
  }
  .activity-scroll-track::after{
    top: calc(50% + 15px);
  }
  .activity-scroll {
    width: 360px;
    position: absolute;
    right: 14.23vw;
    bottom: 0;
  }

  @keyframes motion-activity-bike {
    0% {
      opacity: 0;
      left: 0;
    }

    18% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      left: calc(100% - 200px);
    }
  }
}

/* ------------------------------------------
  Event Showcase
------------------------------------------ */
.event-title-icon {
  opacity: .4;
  margin-right: -14px;
  margin-top: -18px;
}

.event-card-date {
  background-color: #faf4f0;
}

.event-card-status {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 19px;
}

@media screen and (min-width: 1024px) {
  .event-title-text::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 100px;
    height: 100px;
    display: block;
    background-image: url(/img/icon-event.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: .2;
  }

  .event-slide,
  .event-card {
    overflow: visible;
  }

  .event-card-visual {
    transform-origin: center top;
    transition: transform .4s ease;
  }

  .event-card-body {
    transition: padding-top .4s ease;
  }

  .event-slide.swiper-slide-active {
    z-index: 2;
    margin-right: 45px !important;
  }

  .event-slide.swiper-slide-active .event-card-visual {
    transform: scale(1.1769);
  }

  .event-slide.swiper-slide-active .event-card-body {
    padding-top: 37px;
  }
  .event-slide:not(.swiper-slide-active) {
    margin-top: 20px;
    transition: margin-top .4s ease;
  }
}

/* ------------------------------------------
  Toyooka Marche
------------------------------------------ */
.marche-catch{
  margin-left: -0.5em;
}
@media screen and (min-width: 1024px) {
  .marche::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--color-base);
    z-index: 0;
  }
}

/* ------------------------------------------
  About Showcase
------------------------------------------ */
.about-heading{
  letter-spacing: .1em;
}
.about-button-solid::after {
  background-color: #fff;
}

@media screen and (min-width: 1024px) {
  /*.about-content{
    padding-left: max(
      var(--space-l),
      calc((100vw - (var(--container-s) + var(--space-l) * 2)) / 2 + var(--space-l))
    );
  }*/
}

/* ------------------------------------------
  Gallery Showcase
------------------------------------------ */
.gallery-instagram-item:nth-child(even){
  margin-top: 20px;
}
.gallery-movie-overlay {
  opacity: .45;
}