.elementor-1242 .elementor-element.elementor-element-7cbb6127{--display:flex;--min-height:90vh;--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;--padding-top:15vh;--padding-bottom:0;--padding-left:0;--padding-right:0;--z-index:0;}.elementor-1242 .elementor-element.elementor-element-7cbb6127:not(.elementor-motion-effects-element-type-background), .elementor-1242 .elementor-element.elementor-element-7cbb6127 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF5E8;}.elementor-1242 .elementor-element.elementor-element-0a355ac{--display:flex;}.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-1242 .elementor-element.elementor-element-2bd7fc5{text-align:center;}.elementor-1242 .elementor-element.elementor-element-2bd7fc5 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:6.5vw;font-weight:900;font-style:normal;text-transform:uppercase;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0em;}.elementor-1242 .elementor-element.elementor-element-0ac0a12{--display:flex;}body:not(.rtl) .elementor-1242 .elementor-element.elementor-element-9d78a65{left:0px;}body.rtl .elementor-1242 .elementor-element.elementor-element-9d78a65{right:0px;}.elementor-1242 .elementor-element.elementor-element-9d78a65{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-1242 .elementor-element.elementor-element-2906448e{--display:grid;--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;}.elementor-1242 .elementor-element.elementor-element-325a42c6{--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-1242 .elementor-element.elementor-element-7b714c75{--display:flex;--gap:1em 1em;--row-gap:1em;--column-gap:1em;--padding-top:2%;--padding-bottom:10%;--padding-left:2%;--padding-right:2%;}.elementor-1242 .elementor-element.elementor-element-6b8819d{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-1242 .elementor-element.elementor-element-6b8819d:not(.elementor-motion-effects-element-type-background), .elementor-1242 .elementor-element.elementor-element-6b8819d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-17f5d83 );}.elementor-1242 .elementor-element.elementor-element-cb609e1 .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-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-1242 .elementor-element.elementor-element-3eafc9f{text-align:justify;font-family:"Noto Sans JP", Sans-serif;font-size:1rem;font-weight:500;text-decoration:none;line-height:1.8em;letter-spacing:0px;word-spacing:0em;}.elementor-1242 .elementor-element.elementor-element-79221992{--display:grid;--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;}.elementor-1242 .elementor-element.elementor-element-73b3db6f{--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-1242 .elementor-element.elementor-element-2c3fadcf{--display:flex;--gap:1em 1em;--row-gap:1em;--column-gap:1em;--padding-top:5%;--padding-bottom:10%;--padding-left:2%;--padding-right:2%;}.elementor-1242 .elementor-element.elementor-element-db3ace1{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-1242 .elementor-element.elementor-element-db3ace1:not(.elementor-motion-effects-element-type-background), .elementor-1242 .elementor-element.elementor-element-db3ace1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-17f5d83 );}.elementor-1242 .elementor-element.elementor-element-bd3e089 .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-1242 .elementor-element.elementor-element-88f2e1d{text-align:justify;}.elementor-1242 .elementor-element.elementor-element-5bbf1b16{--display:grid;--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;}.elementor-1242 .elementor-element.elementor-element-79f38b77{--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-1242 .elementor-element.elementor-element-2741a35f{--display:flex;--gap:1em 1em;--row-gap:1em;--column-gap:1em;--padding-top:5%;--padding-bottom:10%;--padding-left:2%;--padding-right:2%;}.elementor-1242 .elementor-element.elementor-element-29ab830{--display:flex;--border-radius:30px 30px 30px 30px;--margin-top:0%;--margin-bottom:5%;--margin-left:0%;--margin-right:0%;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-1242 .elementor-element.elementor-element-29ab830:not(.elementor-motion-effects-element-type-background), .elementor-1242 .elementor-element.elementor-element-29ab830 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-17f5d83 );}.elementor-1242 .elementor-element.elementor-element-5a3294a .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-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-1242 .elementor-element.elementor-element-1a04418 .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-1242 .elementor-element.elementor-element-1a04418 .elementor-button:hover, .elementor-1242 .elementor-element.elementor-element-1a04418 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-17f5d83 );border-color:var( --e-global-color-primary );}.elementor-1242 .elementor-element.elementor-element-1a04418 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-1242 .elementor-element.elementor-element-1a04418 .elementor-button .elementor-button-content-wrapper{gap:1em;}.elementor-1242 .elementor-element.elementor-element-1a04418 .elementor-button:hover svg, .elementor-1242 .elementor-element.elementor-element-1a04418 .elementor-button:focus svg{fill:var( --e-global-color-17f5d83 );}@media(max-width:1366px){.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-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-1242 .elementor-element.elementor-element-2906448e{--grid-auto-flow:row;}.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-1242 .elementor-element.elementor-element-79221992{--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-5bbf1b16{--grid-auto-flow:row;}.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-1242 .elementor-element.elementor-element-2906448e{--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-79221992{--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-5bbf1b16{--grid-auto-flow:row;}}@media(max-width:1023px){.elementor-1242 .elementor-element.elementor-element-7cbb6127{--padding-top:15vh;--padding-bottom:0;--padding-left:0;--padding-right:0;}.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-1242 .elementor-element.elementor-element-2bd7fc5 .elementor-heading-title{font-size:10vw;line-height:1em;}.elementor-1242 .elementor-element.elementor-element-0ac0a12{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:5%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-1242 .elementor-element.elementor-element-9d78a65{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-1242 .elementor-element.elementor-element-acec23c img{width:45vw;height:45vw;object-fit:cover;object-position:center center;border-radius:100% 100% 100% 100%;}.elementor-1242 .elementor-element.elementor-element-2906448e{--e-con-grid-template-columns:1fr;--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-7b714c75{--padding-top:2%;--padding-bottom:2%;--padding-left:2%;--padding-right:2%;}.elementor-1242 .elementor-element.elementor-element-cb609e1 .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-1242 .elementor-element.elementor-element-3eafc9f{font-size:14px;}.elementor-1242 .elementor-element.elementor-element-79221992{--e-con-grid-template-columns:1fr;--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-2c3fadcf{--padding-top:2%;--padding-bottom:2%;--padding-left:2%;--padding-right:2%;}.elementor-1242 .elementor-element.elementor-element-bd3e089 .elementor-heading-title{font-size:25px;}.elementor-1242 .elementor-element.elementor-element-5bbf1b16{--e-con-grid-template-columns:1fr;--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-2741a35f{--padding-top:2%;--padding-bottom:20%;--padding-left:2%;--padding-right:2%;}.elementor-1242 .elementor-element.elementor-element-5a3294a .elementor-heading-title{font-size:25px;}.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-1242 .elementor-element.elementor-element-1a04418{margin:0em 0em calc(var(--kit-widget-spacing, 0px) + 2em) 0em;}.elementor-1242 .elementor-element.elementor-element-1a04418 .elementor-button{font-size:1rem;padding:3% 10% 3% 10%;}}@media(max-width:767px){.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-1242 .elementor-element.elementor-element-2bd7fc5 .elementor-heading-title{font-size:15vw;line-height:1.1em;}.elementor-1242 .elementor-element.elementor-element-0ac0a12{--padding-top:10%;--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-1242 .elementor-element.elementor-element-acec23c img{width:70vw;height:70vw;}.elementor-1242 .elementor-element.elementor-element-2906448e{--e-con-grid-template-columns:1;--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-cb609e1 .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-1242 .elementor-element.elementor-element-79221992{--e-con-grid-template-columns:1;--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-bd3e089 .elementor-heading-title{font-size:20px;}.elementor-1242 .elementor-element.elementor-element-5bbf1b16{--e-con-grid-template-columns:1;--grid-auto-flow:row;}.elementor-1242 .elementor-element.elementor-element-5a3294a .elementor-heading-title{font-size:20px;}.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-1242 .elementor-element.elementor-element-1a04418 .elementor-button{font-size:1rem;padding:7% 7% 7% 7%;}}@media(min-width:768px){.elementor-1242 .elementor-element.elementor-element-7cbb6127{--width:80vw;}.elementor-1242 .elementor-element.elementor-element-6b8819d{--width:100%;}.elementor-1242 .elementor-element.elementor-element-db3ace1{--width:100%;}.elementor-1242 .elementor-element.elementor-element-29ab830{--width:100%;}}/* Start custom CSS for heading, class: .elementor-element-2bd7fc5 */.elementor-1242 .elementor-element.elementor-element-2bd7fc5 small { display: block; font-size: clamp(12px, 1.2vw, 20px); line-height: 2em; color: #A6A6A6; font-weight: 500; font-family: "Noto Sans JP", Sans-serif; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-cb609e1 */.elementor-1242 .elementor-element.elementor-element-cb609e1 .elementor-heading-title { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ position: relative; padding-left: 1em; } .elementor-1242 .elementor-element.elementor-element-cb609e1 .elementor-heading-title::before { content: ""; width: 0.7em; height: 0.7em; background: #A1CF87; border-radius: 100%; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-bd3e089 */.elementor-1242 .elementor-element.elementor-element-bd3e089 .elementor-heading-title { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ position: relative; padding-left: 1em; } .elementor-1242 .elementor-element.elementor-element-bd3e089 .elementor-heading-title::before { content: ""; width: 0.7em; height: 0.7em; background: #A1CF87; border-radius: 100%; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-5a3294a */.elementor-1242 .elementor-element.elementor-element-5a3294a .elementor-heading-title { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ position: relative; padding-left: 1em; } .elementor-1242 .elementor-element.elementor-element-5a3294a .elementor-heading-title::before { content: ""; width: 0.7em; height: 0.7em; background: #A1CF87; border-radius: 100%; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; }/* 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 */