.elementor-1245 .elementor-element.elementor-element-1dd29884{--display:grid;--min-height:120vh;--e-con-grid-template-columns:40% 60%;--e-con-grid-template-rows:repeat(1, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;--padding-top:10vh;--padding-bottom:0;--padding-left:0;--padding-right:0;--z-index:0;}.elementor-1245 .elementor-element.elementor-element-1dd29884:not(.elementor-motion-effects-element-type-background), .elementor-1245 .elementor-element.elementor-element-1dd29884 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-7ddbdc4 );}.elementor-1245 .elementor-element.elementor-element-1f84179c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1245 .elementor-element.elementor-element-31e092da{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:1em 1em;--row-gap:1em;--column-gap:1em;--padding-top:20%;--padding-bottom:2%;--padding-left:2%;--padding-right:2%;}.elementor-1245 .elementor-element.elementor-element-8a28173{--display:flex;}body:not(.rtl) .elementor-1245 .elementor-element.elementor-element-1723225{left:0px;}body.rtl .elementor-1245 .elementor-element.elementor-element-1723225{right:0px;}.elementor-1245 .elementor-element.elementor-element-1723225{top:0px;}.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 );}.elementor-1245 .elementor-element.elementor-element-0e99d30{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-1245 .elementor-element.elementor-element-0e99d30:not(.elementor-motion-effects-element-type-background), .elementor-1245 .elementor-element.elementor-element-0e99d30 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-17f5d83 );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-weight );font-style:var( --e-global-typography-primary-font-style );text-transform:var( --e-global-typography-primary-text-transform );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );color:var( --e-global-color-primary );}.elementor-1245 .elementor-element.elementor-element-7bdf9973 .elementor-heading-title{font-family:"Noto Sans JP", Sans-serif;font-size:2.5vw;font-weight:900;font-style:normal;text-transform:none;text-decoration:none;line-height:1.2em;letter-spacing:0px;word-spacing:0em;color:var( --e-global-color-text );}.elementor-1245 .elementor-element.elementor-element-9784ac9 .elementor-heading-title{font-family:"Noto Sans JP", Sans-serif;font-size:1.5vw;font-weight:700;font-style:normal;text-transform:none;text-decoration:none;line-height:1.8em;letter-spacing:0px;word-spacing:0em;color:var( --e-global-color-text );}.elementor-widget-text-editor{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 );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1245 .elementor-element.elementor-element-0c81a7c{text-align:justify;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-weight );font-style:var( --e-global-typography-accent-font-style );text-transform:var( --e-global-typography-accent-text-transform );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button{background-color:#FFFFFF00;font-family:"Rubik", Sans-serif;font-size:1rem;font-weight:400;font-style:normal;text-transform:uppercase;text-decoration:none;line-height:1.3em;letter-spacing:0px;word-spacing:0em;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:3px 3px 3px 3px;border-color:var( --e-global-color-secondary );border-radius:100px 100px 100px 100px;padding:3% 10% 3% 10%;}.elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button:hover, .elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-17f5d83 );border-color:var( --e-global-color-primary );}.elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button .elementor-button-content-wrapper{gap:1em;}.elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button:hover svg, .elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button:focus svg{fill:var( --e-global-color-17f5d83 );}@media(min-width:768px){.elementor-1245 .elementor-element.elementor-element-1dd29884{--width:80vw;}.elementor-1245 .elementor-element.elementor-element-0e99d30{--width:100%;}}@media(max-width:1366px){.elementor-1245 .elementor-element.elementor-element-1dd29884{--grid-auto-flow:row;}.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-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-text-editor{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-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-weight );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}}@media(max-width:1200px){.elementor-1245 .elementor-element.elementor-element-1dd29884{--grid-auto-flow:row;}}@media(max-width:1023px){.elementor-1245 .elementor-element.elementor-element-1dd29884{--min-height:1vh;--e-con-grid-template-columns:1fr;--grid-auto-flow:row;--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;}.elementor-1245 .elementor-element.elementor-element-31e092da{--padding-top:2%;--padding-bottom:30%;--padding-left:2%;--padding-right:2%;}.elementor-1245 .elementor-element.elementor-element-8a28173{--padding-top:10%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-1245 .elementor-element.elementor-element-1723225{width:100%;max-width:100%;top:50%;}.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-1245 .elementor-element.elementor-element-6a3f5de img{width:45vw;height:45vw;object-fit:cover;object-position:center center;border-radius:100% 100% 100% 100%;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-1245 .elementor-element.elementor-element-7bdf9973 .elementor-heading-title{font-size:25px;}.elementor-1245 .elementor-element.elementor-element-9784ac9 .elementor-heading-title{font-size:25px;}.elementor-widget-text-editor{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-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-weight );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-1245 .elementor-element.elementor-element-297cf8b{margin:0em 0em calc(var(--kit-widget-spacing, 0px) + 2em) 0em;}.elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button{font-size:1rem;padding:3% 10% 3% 10%;}}@media(max-width:767px){.elementor-1245 .elementor-element.elementor-element-1dd29884{--e-con-grid-template-columns:1;--grid-auto-flow:row;}.elementor-1245 .elementor-element.elementor-element-8a28173{--padding-top:15%;--padding-bottom:10%;--padding-left:0%;--padding-right:0%;}.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-1245 .elementor-element.elementor-element-6a3f5de img{width:70vw;height:70vw;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-1245 .elementor-element.elementor-element-7bdf9973 .elementor-heading-title{font-size:20px;}.elementor-1245 .elementor-element.elementor-element-9784ac9 .elementor-heading-title{font-size:20px;}.elementor-widget-text-editor{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-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-weight );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-1245 .elementor-element.elementor-element-297cf8b .elementor-button{font-size:1rem;padding:7% 7% 7% 7%;}}/* Start custom CSS for heading, class: .elementor-element-7bdf9973 */.elementor-1245 .elementor-element.elementor-element-7bdf9973 { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: keep-all; line-break: strict; /* 禁則処理を厳格に適用 */ }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-9784ac9 */.elementor-1245 .elementor-element.elementor-element-9784ac9 { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: keep-all; line-break: strict; /* 禁則処理を厳格に適用 */ }/* End custom CSS */ /* Start custom CSS *//* ===== カスタム変数 ===== */ :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; overflow: hidden; } /* 木の背景 */ @media (min-width: 1024px){ .hero::before { content: ""; background: url('https://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; } /* ===== スライドショー ===== */ .slideshow { 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; } .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:15vw; overflow:hidden; position:relative; } .marquee { display:flex; width:max-content; white-space:nowrap; animation: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: "Montserrat", sans-serif; font-weight: 900; line-height: 1; } /* 文字サイズ調整 */ @media (max-width:1023px){ #fv_flow_title {height:25vw;} .marquee span {font-size: 25vw;} } @keyframes scroll{ 0% {transform:translateX(0);} 100% {transform:translateX(-50%);} } /* ============================================================= 落下する果実 ----------------------------------------------------------- */ /* 画像ごとに --half-offset を定義 */ #fruit { --half-offset: 4vw; } #concept-image { --half-offset: 0; } /* ———————————————— ２）キーフレーム定義 ———————————————— */ /* 上から落ちつつフェードイン */ @keyframes dropIn { from { top: -20%; transform: translateY(0); opacity: 0; } to { top: calc(50% - var(--half-offset)); transform: translateY(-50%); opacity: 1; } } /* フェードアウトだけ */ @keyframes fadeOut { from { top: calc(50% - var(--half-offset)); transform: translateY(-50%); opacity: 1; } to { top: calc(50% - var(--half-offset)); transform: translateY(-50%); opacity: 0; } } .fruit-container { position: fixed; top: calc(50% - var(--half-offset)); width: 8vw; height: 0; margin: 0 auto; transform: translateY(-50%); opacity: 0; } /* ———————————————— ３）enter／exit クラスでアニメーション付与 ———————————————— */ #fruit.enter-news { animation: dropIn 1.5s ease-out forwards; } #fruit.exit-news { animation: fadeOut 1.2s ease-out forwards; } /* ============================================================= 1. 外側の固定円 (#fixed_circle) ----------------------------------------------------------- */ #fixed_circle{ /* 画面中央に固定 */ position: fixed; top: 50%; left: 17%; transform: translateY(-50%); width: 20vw; height: 20vw; border-radius: 50%; overflow: hidden; } /* ============================================================= 2. 内側コンテナ (#concept-image) - 白い円。ここに .hero-img を重ねる ----------------------------------------------------------- */ #concept-image{ width: 100%; /* 親 #fixed_circle と同寸 */ height: 100%; border-radius: 50%; background: #fff; opacity: 0; /* 初期は透明 */ transition: opacity .6s ease; } /* JS で付く汎用フェードイン用クラス */ #concept-image.show{ opacity: 1; } /* 旧 enter / exit クラス（互換用に残す） */ @keyframes conceptFadeIn{ from{opacity:0;} to{opacity:1;} } @keyframes fadeOut { from{opacity:1;} to{opacity:0;} } #concept-image.enter-concept{ animation: conceptFadeIn 1.5s ease-in forwards; } #concept-image.exit-concept { animation: fadeOut 1.2s ease-out forwards; } #concept-image img.hero-img.show { position:absolute; top:50%; left:50%; object-fit: contain; width: 85%; height: auto; padding: 0 7.5% 0 7.5%; } /* ============================================================= 3. hero-img ― セクションごとに切り替える画像 ----------------------------------------------------------- */ .hero-img{ position:absolute; inset:0; /* #concept-image 内で全面に重ねる */ width:100%; height:100% !important; top: 50%; left: 50%; object-fit:cover; opacity:0; transform:translate(-50%,-50%) scale(.8); transition: opacity .6s ease, transform .6s ease; pointer-events:none; } .hero-img.show{ opacity:1; transform:translate(-50%,-50%) scale(1); z-index:1; }/* End custom CSS */