/* YOUSEI HOME top page enhancements
 * Extracted from MT main/test templates on 2026-08-10.
 * Scope: hero, Event, Flat House, Works, Room Tour and mobile titles.
 */

@media(max-width:767px){
      #hiraya_top{
        padding:42px 0 56px;
      }

      #hiraya_top .hiraya_panel{
        width:100%;
        max-width:none;
        padding:0;
      }

      #hiraya_top .hiraya_head{
        width:min(372px,calc(100% - 32px));
        margin-left:auto;
        margin-right:auto;
      }

      #hiraya_top .hiraya_head{
        margin-bottom:22px;
      }

      #hiraya_top .hiraya_subtitle{
        font-size:clamp(21px,5.8vw,28px);
      }

      #hiraya_top .hiraya_lead{
        font-size:14px;
      }

      #hiraya_top .hiraya_slider{
        left:0;
        width:100%;
        max-width:none;
        margin:16px auto 0;
      }

      #hiraya_top .hiraya_row{
        margin-bottom:12px;
      }

      #hiraya_top .hiraya_track .slick-track{
        gap:0;
      }

      #hiraya_top .hiraya_slide{
        padding:0 1px;
      }

      #hiraya_top .slick-dots{
        display:none!important;
      }
    }
    @media (max-width:767px){
      .yh-room-tour{padding:48px 0 62px}
      .yh-room-tour__inner{width:min(100%,calc(100% - 14px))}
      .yh-room-tour__lead{margin:18px 0 28px;font-size:14px}
      .yh-room-tour__list{grid-auto-columns:250px;gap:4px;scroll-snap-type:x mandatory}
      .yh-room-tour__item{scroll-snap-align:center}
      .yh-room-tour__scroller{overscroll-behavior-inline:contain}
    }
    @media (max-width:767px){
      #main > #event .ttl_en,
      #main > #hiraya_top .ttl_en,
      #main > .yh-room-tour .ttl_en,
      #main > #works .ttl_en,
      #main > .haikei #calendar_top .ttl_en,
      #main > #diary .ttl_en,
      #main > #news .ttl_en,
      #main > #plan .ttl_en,
      #main > #pickup .ttl_en,
      #main > #message .ttl_en{
        font-size:clamp(26px,6.8vw,30px);
        line-height:1.1;
        letter-spacing:.08em;
      }
    }
  
    @media (max-width:767px){
      #main > #event .ttl_en::before,
      #main > #hiraya_top .ttl_en::before,
      #main > .yh-room-tour .ttl_en::before,
      #main > #works .ttl_en::before,
      #main > .haikei #calendar_top .ttl_en::before,
      #main > #diary .ttl_en::before,
      #main > #news .ttl_en::before,
      #main > #plan .ttl_en::before,
      #main > #pickup .ttl_en::before,
      #main > #message .ttl_en::before{
        font-size:clamp(26px,6.8vw,30px);
      }
    }

    @media (max-width:767px){
      #main > #event .ttl_en,
      #main > #hiraya_top .ttl_en,
      #main > .yh-room-tour .ttl_en,
      #main > #works .ttl_en,
      #main > .haikei #calendar_top .ttl_en,
      #main > #diary .ttl_en,
      #main > #news .ttl_en,
      #main > #plan .ttl_en,
      #main > #pickup .ttl_en,
      #main > #message .ttl_en{
        font-size:clamp(17px,4.6vw,20px);
        line-height:1.35;
        border-bottom:0!important;
        padding-bottom:0;
      }
    }

    @media (max-width:767px){
      #main > #works .yh-works-flow{
        --yh-works-card-width:68vw;
        --yh-works-gap:10px;
        --yh-works-speed:96s;
        padding:34px 0 48px;
      }
      #main > #works .yh-works-flow__inner{
        width:calc(100% - 40px);
      }
      #main > #works .yh-works-flow__lead{
        max-width:360px;
        margin-bottom:28px;
      }
      #main > #works .yh-works-flow__catch{
        margin-bottom:18px;
        font-size:20px;
        line-height:1.5;
      }
      #main > #works .yh-works-flow__text{
        margin-bottom:8px;
        font-size:13px;
        line-height:1.85;
      }
      #main > #works .yh-works-flow__button-wrap{
        margin-top:16px;
      }
      #main > #works .yh-works-flow__rows{
        gap:12px;
      }
    }

    @media (max-width:767px){
      .yh-room-tour__scroller{
        scroll-behavior:auto!important;
        overflow-anchor:none;
        will-change:scroll-position;
      }
      .yh-room-tour__list{
        scroll-snap-type:none!important;
        scroll-behavior:auto!important;
      }
      .yh-room-tour__item{
        scroll-snap-align:none;
      }
    }

    @media (max-width:767px){
      #main .yh-room-tour .yh-room-tour__scroller{
        scroll-snap-type:none!important;
      }
      #main .yh-room-tour .yh-room-tour__list{
        scroll-snap-type:none!important;
      }
      #main .yh-room-tour .yh-room-tour__item{
        scroll-snap-align:none!important;
      }
    }

    html:has(#show.yh-video-hero-test){
      overflow-y:auto!important;
      overflow-x:clip!important;
    }
    body.yh-video-hero-test-page:not(.on):not(.layon){
      overflow-y:visible!important;
      overflow-x:clip!important;
    }
    #show.yh-video-hero-test{
      height:260vh!important;
      min-height:260vh!important;
      max-height:none!important;
      overflow:visible!important;
      z-index:0!important;
    }
    #show.yh-video-hero-test .yh-video-hero-test__media{
      position:sticky!important;
      top:0!important;
      right:0!important;
      bottom:auto!important;
      left:0!important;
      width:100%!important;
      height:100vh!important;
      min-height:100svh!important;
      overflow:hidden!important;
      z-index:0!important;
    }
    #show.yh-video-hero-test .yh-video-hero-test__video{
      position:absolute!important;
      inset:0!important;
      width:100%!important;
      height:100%!important;
      will-change:opacity;
    }
    #show.yh-video-hero-test::after{
      opacity:var(--yh-video-hero-fade-overlay,.20);
      transition:none!important;
    }
    #show.yh-video-hero-test .yh-video-hero-test__loading{
      height:100vh!important;
      max-height:100vh!important;
    }
    #show.yh-video-hero-test .yh-video-hero-test__scroll-guide{
      position:fixed;
      right:0;
      bottom:44px;
      left:0;
    }

    #main:has(#show.yh-video-hero-test){
      overflow:visible!important;
    }

/* ---- next original style block ---- */

@media (max-width: 767px) {
  #show.yh-video-hero-test > h3 {
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    bottom: auto !important;
    left: 20px !important;
    width: auto !important;
    margin: 0 !important;
    transform: translate3d(0, -50%, 0) scale(calc(0.985 + (var(--yh-title-opacity, 0) * 0.015))) !important;
    opacity: var(--yh-title-opacity, 0) !important;
    transition: opacity 0.12s linear, transform 0.12s linear !important;
    will-change: opacity, transform;
  }
}

/* ---- next original style block ---- */

#show.yh-video-hero-test > h3 {
  position: fixed !important;
  top: 50% !important;
  right: 20px !important;
  bottom: auto !important;
  left: 20px !important;
  width: auto !important;
  margin: 0 !important;
  text-align: center !important;
  transform: translate3d(0, -50%, 0) scale(calc(0.985 + (var(--yh-title-opacity, 0) * 0.015))) !important;
  opacity: var(--yh-title-opacity, 0) !important;
  transition: opacity 0.12s linear, transform 0.12s linear !important;
  will-change: opacity, transform;
  pointer-events: none !important;
}

/* ---- next original style block ---- */

#event {
  margin-top: -900px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ---- next original style block ---- */

#main .yh-room-tour .yh-room-tour__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  cursor: grab;
}
#main .yh-room-tour .yh-room-tour__scroller.is-yh-room-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
  user-select: none;
}
#main .yh-room-tour .yh-room-tour__item {
  scroll-snap-align: center;
  scroll-snap-stop: normal;
}
#main .yh-room-tour .yh-room-tour__item img,
#main .yh-room-tour .yh-room-tour__item video {
  -webkit-user-drag: none;
  user-select: none;
}
@media (max-width: 767px) {
  #main .yh-room-tour .yh-room-tour__scroller {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-right: calc((100% - 68vw) / 2);
    padding-left: calc((100% - 68vw) / 2);
  }
  #main .yh-room-tour .yh-room-tour__list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 68vw !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: max-content !important;
    min-width: max-content !important;
  }
  #main .yh-room-tour .yh-room-tour__item {
    width: 68vw !important;
    min-width: 68vw !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main .yh-room-tour .yh-room-tour__scroller {
    scroll-behavior: auto !important;
  }
}
