@charset "UTF-8";

/*
 * Fuyo custom hero v2
 * PC/tablet: TCD #index_header_content_wrap (layout_type2) equivalent
 * Mobile:   TCD #index_header_content_wrap (layout_type1) equivalent
 */

.fuyo-hero,
.fuyo-hero * {
  box-sizing: border-box;
}

body.page-id-19 {
  --tcd-index_slider_catch_bottom_font_size-pc: 40px;
  --tcd-index_slider_catch_bottom_font_size-sp: 18px;
}

body.page-id-19 .fuyo-hero{
    z-index: 1;
}

.fuyo-hero__slider.splide.is-initialized,
.fuyo-hero__slider.splide.is-rendered {
    padding: 0;
    background: transparent;
}

/* The TCD hero is retained only as a reference and must not be shown twice. */
body:has(.fuyo-hero) #index_header_content_wrap {
  display: none;
}

/*
 * Remove Content Builder restrictions.
 * #free_space_150 currently outputs style="max-width:0px"; !important is
 * required to override that inline value.
 */
#free_space_150,
.cb_free:has(.fuyo-hero) {
  padding: 0;
  overflow: visible;
}

#free_space_150 .cb_free_content,
.cb_free:has(.fuyo-hero) .cb_free_content {
  width: 100% !important;
  max-width: none !important;
}

#free_space_150 .tcdce-body,
.cb_free:has(.fuyo-hero) .tcdce-body {
  width: 100%;
}

/* Correct selector: .design_headline.vertical, not .design_headline vertical. */
#free_space_150 .design_headline.vertical,
.cb_free:has(.fuyo-hero) .design_headline.vertical {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

body:has(.fuyo-hero) #contents_builder::before {
  display: none;
}

/* #index_header_content_wrap equivalent. */
.fuyo-hero {
  aspect-ratio: 1250 / 600;
  position: relative;
  left: 50%;
  z-index: 1000;
  width: 100vw;
  height: 100svh;
  margin-top: -100px;
  margin-right: 0;
  margin-bottom: -100px;
  margin-left: -50vw;
  overflow: hidden;
  background: #fff;
  /* clip-path: inset(0 round 0); */
  clip-path: inset(100px round 15px);
  /* transition: clip-path 0.8s ease 0.7s; */
  transition: clip-path 0.8s ease;
}

/*
 * TCD applies :is(.tcdce-body, ...) *:first-child { margin-top:0 }.
 * This selector has equal specificity and is loaded later, restoring the
 * negative margin used by the original type2 hero.
 */
.tcdce-body > .fuyo-hero {
  margin-top: -100px;
}

body.start_first_animation .fuyo-hero {
  clip-path: inset(100px round 15px);
}

/* #index_header_content equivalent. */
.fuyo-hero__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.fuyo-hero.active .fuyo-hero__stage {
  will-change: transform;
}

/* #index_header_content .content .logo_image equivalent. */
.fuyo-hero__logo {
  position: absolute;
  top: 140px;
  right: 140px;
  z-index: 4;
  line-height: 0;
  pointer-events: none;
}

.fuyo-hero__logo > br {
  display: none;
}

.fuyo-hero__logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--tcd-index-logo-image-size-pc, 140px);
}

.fuyo-hero__logo-image--sp {
  display: none;
}

/* #index_header_slider and its Splide descendants. */
.fuyo-hero__slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: visible;
}

.tcdce-body .fuyo-hero__slider .splide__track,
.tcdce-body .fuyo-hero__slider .splide__list,
.tcdce-body .fuyo-hero__slider .fuyo-hero__slide {
  width: 100%;
  height: 100%;
}

.tcdce-body .fuyo-hero__slider .splide__list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.tcdce-body .fuyo-hero__slider .fuyo-hero__slide {
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
}

/* Before Splide mounts, show only the first slide. */
.fuyo-hero__slider:not(.is-initialized) .fuyo-hero__slide {
  display: none;
}

.fuyo-hero__slider:not(.is-initialized) .fuyo-hero__slide:first-child {
  display: block;
}

/*
 * Equivalent to #index_header_slider .item .bg_image img.
 * The extra .tcdce-body class and !important height defeat the Classic
 * Editor rule :is(.tcdce-body, ...) img { height:auto }.
 */
.tcdce-body .fuyo-hero__image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none !important;
  height: 100% !important;
  margin: 0;
  object-fit: cover;
  object-position: 50% -45%;
}

/* Defensive cleanup if Classic Editor inserts paragraph wrappers. */
.fuyo-hero__slide > p:has(> .fuyo-hero__image) {
  display: contents;
  padding: 0 !important;
  margin: 0 !important;
}

.fuyo-hero__slider > p:empty,
.fuyo-hero__stage > p:empty {
  display: none !important;
}

/* #index_header_content .catch_bottom equivalent. */
.tcdce-body .fuyo-hero__caption {
  position: absolute;
  right: 140px;
  bottom: 130px;
  left: 140px;
  z-index: 2;
  width: auto;
  padding: 0;
  margin: 0 !important;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: var(--tcd-index_slider_catch_bottom_font_size-pc, 18px);
  font-weight: 600;
  line-height: 1.6;
  text-align: right;
}

.fuyo-hero__tablet-break {
  display: none;
}

@media (max-width: 1200px) and (min-width: 768px) {
  .fuyo-hero,
  .tcdce-body > .fuyo-hero {
    margin-top: -60px;
    margin-bottom: -60px;
  }
  body .fuyo-hero {
    clip-path: inset(60px round 15px);
  }

  body.start_first_animation .fuyo-hero {
    clip-path: inset(60px round 15px);
  }

  .fuyo-hero__logo {
    top: 100px;
    right: 100px;
  }

  .tcdce-body .fuyo-hero__caption {
    right: 120px;
    bottom: 100px;
    left: 120px;
    font-size: calc(
      (
        var(--tcd-index_slider_catch_bottom_font_size-pc, 18px) +
        var(--tcd-index_slider_catch_bottom_font_size-sp, 16px)
      ) / 2
    );
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .tcdce-body .fuyo-hero__caption {
    text-align: left;
  }

  .fuyo-hero__tablet-break {
    display: block;
  }
}

/* 767px and below: the customized TCD layout_type1 equivalent. */
@media (max-width: 767px) {
  .fuyo-hero,
  .tcdce-body > .fuyo-hero {
    left: auto;
    width: calc(100% - 40px);
    height: auto;
    min-height: 240px;
    aspect-ratio: 1250 / 600;
    margin: 0 auto;
    border-radius: 15px;
    clip-path: none;
    transition: none;
  }

  .fuyo-hero__logo {
    top: 20px;
    right: 20px;
  }

  .fuyo-hero__logo-image--pc {
    display: none;
  }

  .fuyo-hero__logo-image--sp {
    display: block;
    max-height: var(--tcd-index-logo-image-size-sp, 90px);
  }

  .tcdce-body .fuyo-hero__caption {
    right: 20px;
    bottom: 20px;
    left: 20px;
    width: auto;
    font-size: 18px;
    line-height: 1.25;
    text-align: right;
  }

  .fuyo-hero__tablet-break {
    display: block;
  }

  body.home:has(.fuyo-hero) #header_logo img {
    filter: none;
  }

  body.home:has(.fuyo-hero):not(.open_drawer_menu) #drawer_menu_button span {
    background: #000;
  }
  .tcdce-body .fuyo-hero__image{
    object-position: 50% 50%;
  }
}

#free_space{
    padding: 120px 0;
    overflow: hidden;
}

@media (max-width: 1200px) {
    #free_space{
        padding: 100px 60px;
    }
}

@media (max-width: 767px) {
    #free_space{
        padding: 50px 20px;
    }
    body.start_first_animation .fuyo-hero {
        clip-path: inset(0 0 0 0);
    }

}

#contents_builder #side_button .cb_free_content,
#contents_builder #side_button .tcdce-body,
#contents_builder #side_button p {
    display: contents;
}

#contents_builder #side_button .cb_free {
    padding: 0;
}