@charset "utf-8";
.swiper_w1084 {
  min-width: 1084px;
  position: relative;
}
@media screen and (max-width: 736px) {
  .swiper_w1084 {
    min-width: inherit;
  }
}
.swiper_wrap_wrap_sl_margin {
  margin-top: -98px;
}
@media screen and (max-width: 1440px) {
  .swiper_wrap_wrap_sl_margin {
    margin-top: 0px!important;
  }
}
.swiper_wrap_wrap_sl {
  position: relative;
  width: 84.3%;
  height: 100%;
  margin-left: auto;
  border-radius: 5rem 0 0 5rem;
  overflow: hidden;
}
@media screen and (max-width: 736px) {
  .swiper_wrap_wrap_sl {
    width: 92%;
  }
}
.swiper_wrap_wrap_sl .swiper-button-next,
.swiper_wrap_wrap_sl .swiper-rtl .swiper-button-prev {
  right: -40px;
}
@media screen and (max-width: 736px) {
  .swiper_wrap_wrap_sl .swiper-button-next,
  .swiper_wrap_wrap_sl .swiper-rtl .swiper-button-prev {
    right: -30px;
  }
}
.swiper_wrap_wrap_sl .swiper-button-prev,
.swiper_wrap_wrap_sl .swiper-rtl .swiper-button-next {
  left: -40px;
}
@media screen and (max-width: 736px) {
  .swiper_wrap_wrap_sl .swiper-button-prev,
  .swiper_wrap_wrap_sl .swiper-rtl .swiper-button-next {
    left: -30px;
  }
}
.swiper_wrap_wrap_sl .swiper-button-next,
.swiper_wrap_wrap_sl .swiper-button-prev {
  --swiper-navigation-color: #858585;
}
.swiper_wrap_wrap_sl .swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
}
@media screen and (min-width: 1440px) {
  .swiper_wrap_wrap_sl .swiper-slide {
    height: 635px;
  }
}
.swiper_wrap_wrap_sl .swiper-slide img {
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  object-fit: cover;
}
@media screen and (max-width: 1440px) {
  .swiper_wrap_wrap_sl .swiper-slide img {
    aspect-ratio: 100 / 52.9;
  }
}
@media screen and (max-width: 736px) {
  .swiper_wrap_wrap_sl .swiper-slide img {
    aspect-ratio: 111 / 100;
  }
}
@media screen and (max-width: 736px) {
  .sl_text_wrap {
    position: relative;
    margin-top: -124px;
    margin-left: 6%;
  }
}
.in_logo_text {
  position: absolute;
  bottom: 33%;
  line-height: 1.2;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 72px;
  z-index: 1;
  margin-left: 6%;
  transition-delay: 300ms;
  text-shadow: 2px 2px 12px rgba(255, 255, 255, 0.4), -2px 2px 12px rgba(255, 255, 255, 0.4), 2px -2px 12px rgba(255, 255, 255, 0.4), -2px -2px 12px rgba(255, 255, 255, 0.4);
}
@media screen and (max-width: 1084px) {
  .in_logo_text {
    font-size: 60px;
  }
}
@media screen and (max-width: 736px) {
  .in_logo_text {
    font-size: 40px;
    margin-left: 0%;
    position: relative;
    display: inline;
    background: #ffffff80;
  }
}
.in_catch_box {
  position: absolute;
  bottom: 13%;
  z-index: 1;
  margin-left: 6%;
  font-size: 24px;
  padding: 12px;
  background: #ffffff95;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition-delay: 1000ms;
}
@media screen and (max-width: 736px) {
  .in_catch_box {
    font-size: 16px;
    margin-left: 0%;
    position: relative;
    padding: 12px 0;
  }
}
.in_catch_box.on {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
.right_mask_in2 {
  overflow: hidden;
  position: relative;
}
.right_mask_in2.inview::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transform: translateX(0%);
  transition: transform ease 1s;
  transition-delay: 300ms;
  z-index: 1;
}
.right_mask_in2.inview.on::after {
  transform: translateX(100%);
}
.left_mask_in2 {
  overflow: hidden;
}
.left_mask_in2.inview::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transform: translateX(0%);
  transition: transform ease 1s;
  transition-delay: 1000ms;
  opacity: 0;
}
.left_mask_in2.inview.on::after {
  transform: translateX(100%);
  opacity: 1;
}
.wrapper_tegaki {
  margin-left: -1%;
  margin-top: -3%;
  z-index: 1;
  position: absolute;
  width: 100%;
  text-align: right;
  /*SVGのサイズ*/
}
@media screen and (max-width: 736px) {
  .wrapper_tegaki {
    left: 50%;
    margin-left: 0;
    top: 98px;
    filter: drop-shadow(0px 3px 3px rgba(255, 255, 255, 0.9));
    text-align: left;
  }
}
.wrapper_tegaki .tegaki_in {
  width: 24%;
  display: inline-block;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition-delay: 2000ms;
}
@media screen and (max-width: 736px) {
  .wrapper_tegaki .tegaki_in {
    width: 50%;
  }
}
.wrapper_tegaki .tegaki_in.on {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
.wrapper_tegaki .tegaki_in .svg1984 {
  width: 100%;
  min-width: 240px;
  /*SVGタグの横幅*/
  max-width: 480px;
  height: auto;
  filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.4)) drop-shadow(-1px 1px 3px rgba(255, 255, 255, 0.4)) drop-shadow(1px -1px 3px rgba(255, 255, 255, 0.4)) drop-shadow(-1px -1px 3px rgba(255, 255, 255, 0.4));
}
@media screen and (max-width: 736px) {
  .wrapper_tegaki .tegaki_in .svg1984 {
    min-width: 180px;
    /*SVGタグの横幅*/
  }
}
.wrapper_tegaki svg {
  min-width: 240px;
  /*SVGタグの横幅*/
  max-width: 480px;
  width: 24%;
  /* レスポンシブ対応にするため100%を指定*/
  height: auto;
}
@media screen and (max-width: 736px) {
  .wrapper_tegaki svg {
    min-width: 180px;
    /*SVGタグの横幅*/
  }
}
#mask .cls-1 {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 24;
  /*線の太さを指定する*/
}
.video-wrap {
  position: relative;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1440px) {
  .video-wrap {
    height: 635px;
  }
}
.pattern {
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url(/wp-content/themes/less_BG/bg_2025/yokojima_10.svg);
  background-size: 1px 3px;
  background-repeat: repeat;
  position: absolute;
  z-index: 2;
  filter: opacity(60%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
@media screen and (max-width: 736px) {
  .pattern {
    background-image: url(/wp-content/themes/less_BG/bg_2025/yokojima_mob.png);
    filter: opacity(100%);
    background-repeat: repeat;
  }
}
.video-wrap video,
.video-wrap img {
  width: 100%;
  height: 100%;
  object-position: 0% 50%;
  object-fit: cover;
  margin-bottom: -0.5%;
}
@media screen and (max-width: 736px) {
  .video-wrap video,
  .video-wrap img {
    aspect-ratio: 111 / 100;
    object-position: 40% 50%;
  }
}
@media screen and (max-width: 736px) {
  .video-wrap video,
  .video-wrap img {
    margin-bottom: -1.5%;
  }
}