.elementor-33 .elementor-element.elementor-element-1d488eb{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.8;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33 .elementor-element.elementor-element-1d488eb::before, .elementor-33 .elementor-element.elementor-element-1d488eb > .elementor-background-video-container::before, .elementor-33 .elementor-element.elementor-element-1d488eb > .e-con-inner > .elementor-background-video-container::before, .elementor-33 .elementor-element.elementor-element-1d488eb > .elementor-background-slideshow::before, .elementor-33 .elementor-element.elementor-element-1d488eb > .e-con-inner > .elementor-background-slideshow::before, .elementor-33 .elementor-element.elementor-element-1d488eb > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF00;--background-overlay:'';}.elementor-33 .elementor-element.elementor-element-003623d{width:var( --container-widget-width, 90% );max-width:90%;--container-widget-width:90%;--container-widget-flex-grow:0;bottom:0%;z-index:100;}body:not(.rtl) .elementor-33 .elementor-element.elementor-element-003623d{left:5%;}body.rtl .elementor-33 .elementor-element.elementor-element-003623d{right:5%;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body:not(.rtl) .elementor-33 .elementor-element.elementor-element-8c08644{left:0px;}body.rtl .elementor-33 .elementor-element.elementor-element-8c08644{right:0px;}.elementor-33 .elementor-element.elementor-element-8c08644{bottom:0vh;z-index:10;}.elementor-33 .elementor-element.elementor-element-8c08644 img{width:30vw;}.elementor-33 .elementor-element.elementor-element-42acd22{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;padding:0% 0% 0% 0%;bottom:0vh;z-index:10;}body:not(.rtl) .elementor-33 .elementor-element.elementor-element-42acd22{right:0px;}body.rtl .elementor-33 .elementor-element.elementor-element-42acd22{left:0px;}.elementor-33 .elementor-element.elementor-element-42acd22 img{width:32.5vw;}.elementor-33 .elementor-element.elementor-element-e3d2d25{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33 .elementor-element.elementor-element-e3d2d25:not(.elementor-motion-effects-element-type-background), .elementor-33 .elementor-element.elementor-element-e3d2d25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wondertree.co.jp/wp-content/uploads/2025/05/fv_trunk-1.svg");background-position:50% 110%;background-repeat:no-repeat;background-size:50vw auto;}.elementor-33 .elementor-element.elementor-element-a2bbb2d{--display:flex;--position:absolute;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;top:0px;--z-index:0;}body:not(.rtl) .elementor-33 .elementor-element.elementor-element-a2bbb2d{left:0px;}body.rtl .elementor-33 .elementor-element.elementor-element-a2bbb2d{right:0px;}@media(max-width:1366px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-33 .elementor-element.elementor-element-e3d2d25:not(.elementor-motion-effects-element-type-background), .elementor-33 .elementor-element.elementor-element-e3d2d25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:50vw auto;}}@media(max-width:1200px){.elementor-33 .elementor-element.elementor-element-e3d2d25:not(.elementor-motion-effects-element-type-background), .elementor-33 .elementor-element.elementor-element-e3d2d25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:50% 100%;}}@media(max-width:1023px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-33 .elementor-element.elementor-element-e3d2d25:not(.elementor-motion-effects-element-type-background), .elementor-33 .elementor-element.elementor-element-e3d2d25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:50% 100%;background-size:140vw auto;}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}body:not(.rtl) .elementor-33 .elementor-element.elementor-element-8c08644{left:0%;}body.rtl .elementor-33 .elementor-element.elementor-element-8c08644{right:0%;}.elementor-33 .elementor-element.elementor-element-8c08644 img{width:40vw;}body:not(.rtl) .elementor-33 .elementor-element.elementor-element-42acd22{right:0%;}body.rtl .elementor-33 .elementor-element.elementor-element-42acd22{left:0%;}.elementor-33 .elementor-element.elementor-element-42acd22{bottom:0vh;}.elementor-33 .elementor-element.elementor-element-42acd22 img{width:40vw;}.elementor-33 .elementor-element.elementor-element-e3d2d25:not(.elementor-motion-effects-element-type-background), .elementor-33 .elementor-element.elementor-element-e3d2d25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:60% 100%;background-size:200vw auto;}}/* Start custom CSS for html, class: .elementor-element-003623d *//* ── 共通スタイル ───────────────────────── */
.tagline{
	color:#000;
	position:relative;
}
.tagline path{
  fill:currentColor;
}

/* 初期状態の明示（ちらつき防止）*/
.tagline.wt-reveal-ready .bg-rect { transform: scaleX(0); }

/* 表示開始（ここで初めて伸長アニメ）*/
.tagline.is-visible .bg-rect { transform: scaleX(1); }


/* SVGでも左から伸ばすのを強制 */
.bg-rect{
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(.5,0,.2,1);
}

/* ←このブロックを .bg-rect の“後ろ”に必ず置く（勝ち順を保証）*/
.tagline.is-visible svg .bg-rect{
  transform: scaleX(1);
}

/* 既存 */
.tagline{ color:#000; position:relative; }
.tagline path{ fill:currentColor; }
.logo-pc,.logo-sp{ width:100%; height:auto; display:block; margin-bottom:5vh; }
@media (max-width:600px){ .tagline{ width:90%; } .logo-pc{ display:none } }
@media (min-width:601px){ .tagline{ width:60%; } .logo-sp{ display:none } }

/* 視覚的に隠すテキスト */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8c08644 */.elementor-33 .elementor-element.elementor-element-8c08644 img {
    margin-bottom: -30%;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-42acd22 */.elementor-33 .elementor-element.elementor-element-42acd22 img {
    margin-bottom: -40%;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1d488eb *//* ===== カスタム変数 ===== */
:root{
	--slide-interval : 6s;  /* 画像切替間隔 */
	--max-scale      : 2.8; /* スクロールし切った時の倍率 */
	--base-scale     : 0.6; /* ← 初期サイズ */
}

/* ---------------- モバイル縦 ---------------- */
@media (max-width: 1024px){
	:root{
		--base-scale : 0.6;
	}
}

@media (max-width: 400px){
	:root{ --base-scale : 0.6; }
}

/* ===== レイアウト ===== */
.hero-wrap {height:200vh;position:relative}

.hero {
    position:sticky;
    top:0;
    width:100vw;
    height:100vh;
}

/* 木の背景 */
@media (min-width: 1024px){
.hero::before {
    content: "";
    background: url('http://wondertree.co.jp/wp-content/uploads/2025/05/fv_bg_top.svg') no-repeat 60% 32.5%;
    background-size: 80vmax;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}
}

/* ===== マスク付きボックス ===== */
.mask-wrapper{
	position:absolute;
	top:40%;left:50%;
	width:100vmax; 
	aspect-ratio:979/630;          /* 元の比率（横:縦） */
	transform:translate(-50%,-50%) scale(var(--scale,1));
	transform-origin:center;
	clip-path:url(#cloudMask);
	-webkit-clip-path:url(#cloudMask); /* Safari */
    pointer-events: none;
    --scale:var(--base-scale,0.6);
}

/* ===== スライドショー ===== */
.slideshow {
    --inv:calc(1/var(--base-scale,0.6));
	position:relative;
	width:100%;height:100%;
	transform:scale(var(--inv,1));      /* マスク拡大を相殺 */
	transform-origin:center;
}
.slide{
	position:absolute;
	inset:0;
	width:100%;
	height:100% !important;
	object-fit:cover;
	opacity:0;
	transition:opacity .8s ease;
    filter: brightness(1.1) contrast(0.9);
}
.slide.show{opacity:1}


/* モバイル向け調整*/
@media (max-width:1023px){
    .mask-wrapper {top:30%;width:auto;height:100vh;}
    .slide {
        height: 100% !important;
    }
}


/* ---------------- 
  FV 動くテキスト
---------------- */
#fv_flow_title {
    width:100%;
    height:16vw;
    overflow:hidden;
    position:relative;
  }

.marquee {
    display:flex;
    width:max-content;
    white-space:nowrap;
    animation: fv-flow-scroll var(--speed, 20s) linear infinite;
}

.marquee span {
    display:inline-block;
    padding-right:1em;
    font-size:15vw;
    color: rgba(255,255,255,0.5);
    font-family: "Rubik", sans-serif;
    font-weight: 900;
    line-height: 1;
}


/* 文字サイズ調整 */
@media (max-width:1023px){
    #fv_flow_title {height:27vw;}
    .marquee span {font-size: 25vw;}
}

@keyframes fv-flow-scroll{
0%   {transform:translateX(0);}
100% {transform:translateX(-50%);}
}/* End custom CSS */