.elementor-1239 .elementor-element.elementor-element-1da1c97{--display:grid;--min-height:70vh;--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:1;}.elementor-1239 .elementor-element.elementor-element-1da1c97:not(.elementor-motion-effects-element-type-background), .elementor-1239 .elementor-element.elementor-element-1da1c97 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-0228210 );}.elementor-1239 .elementor-element.elementor-element-6d298aeb{--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-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-1239 .elementor-element.elementor-element-340c019{background-color:var( --e-global-color-17f5d83 );}body:not(.rtl) .elementor-1239 .elementor-element.elementor-element-79052640{left:0px;}body.rtl .elementor-1239 .elementor-element.elementor-element-79052640{right:0px;}.elementor-1239 .elementor-element.elementor-element-79052640{top:0px;}.elementor-1239 .elementor-element.elementor-element-5b02fced{--display:flex;--gap:1em 1em;--row-gap:1em;--column-gap:1em;--padding-top:5%;--padding-bottom:30%;--padding-left:2%;--padding-right:2%;--z-index:10;}.elementor-1239 .elementor-element.elementor-element-3736721{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:30px 30px 30px 30px;--margin-top:-10vh;--margin-bottom:0;--margin-left:0;--margin-right:0;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;--z-index:10;}.elementor-1239 .elementor-element.elementor-element-3736721:not(.elementor-motion-effects-element-type-background), .elementor-1239 .elementor-element.elementor-element-3736721 > .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-1239 .elementor-element.elementor-element-ae5b650{width:100%;max-width:100%;}.elementor-1239 .elementor-element.elementor-element-ae5b650 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:1rem;font-weight:900;font-style:normal;text-transform:uppercase;text-decoration:none;line-height:1.8em;letter-spacing:0px;word-spacing:0em;color:var( --e-global-color-secondary );}.elementor-1239 .elementor-element.elementor-element-1874fc9{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 1rem) 0rem;}.elementor-1239 .elementor-element.elementor-element-1874fc9 .elementor-heading-title{font-family:"Noto Sans JP", Sans-serif;font-size:3vw;font-weight:900;font-style:normal;text-transform:none;text-decoration:none;line-height:1.5em;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-1239 .elementor-element.elementor-element-08e6d77{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;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-1239 .elementor-element.elementor-element-8019d7f{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;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-1239 .elementor-element.elementor-element-3287b85{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;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-1239 .elementor-element.elementor-element-f528e71{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;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-1239 .elementor-element.elementor-element-e49c7b0{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;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-1239 .elementor-element.elementor-element-803990f{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 3rem) 0rem;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-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-1239 .elementor-element.elementor-element-d236dae .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-1239 .elementor-element.elementor-element-d236dae .elementor-button:hover, .elementor-1239 .elementor-element.elementor-element-d236dae .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-17f5d83 );border-color:var( --e-global-color-primary );}.elementor-1239 .elementor-element.elementor-element-d236dae .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-1239 .elementor-element.elementor-element-d236dae .elementor-button .elementor-button-content-wrapper{gap:1em;}.elementor-1239 .elementor-element.elementor-element-d236dae .elementor-button:hover svg, .elementor-1239 .elementor-element.elementor-element-d236dae .elementor-button:focus svg{fill:var( --e-global-color-17f5d83 );}@media(min-width:768px){.elementor-1239 .elementor-element.elementor-element-1da1c97{--width:80vw;}.elementor-1239 .elementor-element.elementor-element-3736721{--width:100%;}}@media(max-width:1366px){.elementor-1239 .elementor-element.elementor-element-1da1c97{--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-1239 .elementor-element.elementor-element-1da1c97{--grid-auto-flow:row;}}@media(max-width:1023px){.elementor-1239 .elementor-element.elementor-element-1da1c97{--e-con-grid-template-columns:1fr;--e-con-grid-template-rows:1fr;--grid-auto-flow:row;}.elementor-1239 .elementor-element.elementor-element-6d298aeb{--padding-top:13%;--padding-bottom:13%;--padding-left:5%;--padding-right:5%;}.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-1239 .elementor-element.elementor-element-340c019{padding:8% 8% 8% 8%;border-radius:100% 100% 100% 100%;}.elementor-1239 .elementor-element.elementor-element-340c019 img{width:30vw;height:30vw;object-fit:contain;object-position:center center;}.elementor-1239 .elementor-element.elementor-element-79052640{width:100%;max-width:100%;top:50%;}.elementor-1239 .elementor-element.elementor-element-5b02fced{--padding-top:0%;--padding-bottom:10%;--padding-left:2%;--padding-right:2%;}.elementor-1239 .elementor-element.elementor-element-3736721{--margin-top:0;--margin-bottom:0;--margin-left:0;--margin-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-1239 .elementor-element.elementor-element-ae5b650 .elementor-heading-title{font-size:14px;}.elementor-1239 .elementor-element.elementor-element-1874fc9 .elementor-heading-title{font-size:5vw;}.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-1239 .elementor-element.elementor-element-08e6d77{font-size:14px;}.elementor-1239 .elementor-element.elementor-element-8019d7f{font-size:14px;}.elementor-1239 .elementor-element.elementor-element-3287b85{font-size:14px;}.elementor-1239 .elementor-element.elementor-element-f528e71{font-size:14px;}.elementor-1239 .elementor-element.elementor-element-e49c7b0{font-size:14px;}.elementor-1239 .elementor-element.elementor-element-803990f{font-size:14px;}.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-1239 .elementor-element.elementor-element-d236dae{margin:0em 0em calc(var(--kit-widget-spacing, 0px) + 2em) 0em;}.elementor-1239 .elementor-element.elementor-element-d236dae .elementor-button{font-size:1rem;padding:3% 10% 3% 10%;}}@media(max-width:767px){.elementor-1239 .elementor-element.elementor-element-1da1c97{--e-con-grid-template-columns:1;--e-con-grid-template-rows:50vh 1fr;--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-1239 .elementor-element.elementor-element-340c019{padding:8% 8% 8% 8%;border-radius:100% 100% 100% 100%;}.elementor-1239 .elementor-element.elementor-element-340c019 img{width:50vw;max-width:100%;height:50vw;object-fit:contain;object-position:center center;}.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-1239 .elementor-element.elementor-element-1874fc9 .elementor-heading-title{font-size:7vw;}.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-1239 .elementor-element.elementor-element-d236dae .elementor-button{font-size:1rem;padding:7% 7% 7% 7%;}}/* Start custom CSS for html, class: .elementor-element-64f41a83 *//* ============================================================= 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 */ /* Start custom CSS for html, class: .elementor-element-79052640 *//* ============================================================= orbit 周回する輪っか ----------------------------------------------------------- */ .orbit { position: fixed; top: calc(50% - 12vw); left: 15vw; transform: rotate(0deg); /* 初期状態は回転なし */ width: 24vw; height: 24vw; } /* 軌道上に配置する円 */ .orbit .orbiting-circle { position: absolute; width: 22vw; height: 22vw; border-radius: 50%; } /* 1つ目の軌道（円-2）：中心から150px離す */ .orbit.orbit-1 .orbiting-circle { border: 2px solid rgba(255,255,255,0.8); filter: opacity(40%); transform: translateX(10px); } /* 2つ目の軌道（円-3）：中心から250px離す */ .orbit.orbit-2 .orbiting-circle { border: 2px solid rgba(255,255,255,0.8); filter: opacity(40%); transform: translateX(20px); } @media (max-width:1023px){ .orbit { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50vw; height: 50vw; } .orbit .orbiting-circle { position: absolute; width: 48vw; height: 48vw; } } @media (max-width:767px){ .orbit { width: 80vw; height: 80vw; } .orbit .orbiting-circle { position: absolute; width: 77vw; height: 77vw; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-ae5b650 */.elementor-1239 .elementor-element.elementor-element-ae5b650 { position: relative; } .elementor-1239 .elementor-element.elementor-element-ae5b650 .elementor-heading-title { background: white; padding: 5px 5px 0 0; } .elementor-1239 .elementor-element.elementor-element-ae5b650::before { content: ""; width: 100%; height: 3px; background: #A1CF87; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; z-index: -1; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-1874fc9 */.elementor-1239 .elementor-element.elementor-element-1874fc9 { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: keep-all; line-break: strict; /* 禁則処理を厳格に適用 */ }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3736721 */.elementor-1239 .elementor-element.elementor-element-3736721 p {margin: 0 auto 1em;}/* 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 */