.lottie-animation-container {
position: relative;
width: 900px;
max-width: 100%;
overflow-y: hidden;
}
.map-bg {
display: block;
width: calc(var(--base-w) * 1px);
}
.lottie-city {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Let clicks pass through if needed */
}
.lottie-ferris {
pointer-events: none;
}
.lottie-animation-container {
position: relative;
width: 900px;
overflow-y: hidden;
/* Adjust height based on aspect ratio of map or content, for now let it scale */
/* Assuming map needs to be visible */
}
.lottie-animation__inner {
position: relative;
min-width: 900px;
}
.lottie-icon-map-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
transition: opacity 0.3s ease, visibility 0.3s ease;
cursor: pointer;
}
/* Hidden state for clicked icon */
.lottie-icon-map-container.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.lottie-icon-anim-wrapper {
width: 60px;
max-width: 100%;
transform: translateX(24%);
/* Floating Animation */
animation: float 2s ease-in-out infinite;
transform-origin: center bottom;
}
.lottie-icon-map {
width: 100%;
/* Hover Effect (Boyon) Support */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: center bottom;
}
/* Hover Effect (Boyon) - Scale Only */
.lottie-icon-map-container:hover .lottie-icon-map {
animation: jelly 0.6s ease forwards;
}
.lottie-icon-map-shadow {
width: 20px;
max-width: 50%;
animation: shadow-scale 2s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateX(24%) translateY(0);
}
50% {
transform: translateX(24%) translateY(-10px);
}
}
@keyframes shadow-scale {
0%,
100% {
transform: scale(1);
opacity: 0.6;
}
50% {
transform: scale(0.8);
opacity: 0.3;
}
}
@keyframes jelly {
0% {
transform: scale(1);
}
30% {
transform: scale(1.25);
}
40% {
transform: scale(0.75);
}
50% {
transform: scale(1.15);
}
65% {
transform: scale(0.95);
}
75% {
transform: scale(1.05);
}
100% {
transform: scale(1.2);
}
}
.lottie-stage {
/* 1. 数値を一括管理 */
--base-w: 1200;
--base-h: 806;
--theme-color: #49A99C;
/* 2. 横幅の設定：最大900px、画面が狭ければ100% */
width: 100%;
max-width: calc(var(--base-w) * 1px);
position: relative;
overflow-x: auto;
overflow-y: hidden;
margin: 0 auto;
margin-top: 100px;
/* 中央寄せにする場合 */
}
.lottie-stage.is-zoomed,
.lottie-stage.is-video-visible {
overflow: hidden;
}
.c-lottie-player {
position: absolute;
/* 親から継承した変数を使って計算 */
width: calc(var(--lt-w) / var(--base-w) * 100%);
height: calc(var(--lt-h) / var(--base-h) * 100%);
top: calc(var(--lt-top) / var(--base-h) * 100%);
left: calc(var(--lt-left) / var(--base-w) * 100%);
}
/* Zoom Transition Support */
.lottie-animation__inner {
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
transform-origin: center center;
will-change: transform;
}
/* UI Overlay defaults (hidden) */
.map-back-btn,
.map-info-bar,
.map-info-img,
.map-video-embed {
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
/* Visible State */
.is-zoomed .map-back-btn,
.is-zoomed .map-info-bar,
.is-zoomed.is-img-visible .map-info-img {
opacity: 1;
pointer-events: auto;
}
/* Back Button */
.map-back-btn {
display: flex;
align-items: center;
gap: 6px;
position: absolute;
top: 20px;
right: 20px;
padding: 6px;
border: 1px solid #707070;
background: #fff;
cursor: pointer;
font-weight: bold;
z-index: 200;
font-size: 14px;
border-radius: 18px;
line-height: 1;
transition: opacity 0.3s ease;
}
/* ホバーはPCのみ（スマホでは解除） */
@media (min-width: 1025px) {
.map-back-btn:hover {
opacity: 0.7;
}
}
.map-back-btn::before {
content: '';
display: block;
width: 23px;
aspect-ratio: 1;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
}
.map-info-img {
position: absolute;
top: 80px;
left: 98px;
width: 400px;
aspect-ratio: 1;
background-color: #fff;
border: 9px solid #77C266;
box-shadow: 0px 3px 6px 0px #77c266;
max-width: 100%;
border-radius: 100vh;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* YouTube Video Embed (small, no border/radius/shadow) */
.map-video-embed {
position: absolute;
top: 106px;
left: 48px;
width: 604px;
max-width: 100%;
aspect-ratio: 524 / 295;
background-color: #000;
z-index: 100;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.map-video-embed iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* Info Bar */
.map-info-bar {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
/* 背景をぼかして明るくする */
backdrop-filter: blur(16px) brightness(140%);
-webkit-backdrop-filter: blur(16px) brightness(140%);
/* 指定の色 #655B5B を適用（不透明度 0.2 の例） */
background-color: rgba(255, 255, 255, 0.6);
display: grid;
grid-template-columns: 196px 1fr;
padding: 22px 14px 22px 42px;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.map-info-bar__left {
display: flex;
align-items: center;
flex-direction: column;
gap: 14px;
}
.map-info-bar__title {
margin: 0;
font-size: 20px;
font-weight: bold;
letter-spacing: 0;
color: var(--theme-color);
}
.map-info-bar__nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.map-nav-btn {
width: 24px;
height: 24px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.map-info-bar__right {
flex: 1;
margin-left: 40px;
}
.map-info-bar__text {
margin: 0;
font-size: 13px;
line-height: 1.846;
}
.map-info-bar__button {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
text-decoration: none;
color: var(--theme-color);
background-color: #fff;
font-size: 0.9rem;
font-weight: bold;
border: 1px solid var(--theme-color);
border-radius: 48px;
padding: 9px 10px;
font-size: 14px;
min-width: 145px;
box-sizing: border-box;
transition: opacity 0.3s ease;
}
.map-info-bar__button:hover {
opacity: 0.7;
}
.map-info-bar__button::after {
content: "";
display: block;
width: 24px;
aspect-ratio: 1;
background: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: center;
background-color: var(--theme-color);
border-radius: 50%;
background-color: var(--theme-color);
border: 1px solid #fff;
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.16);
}
/* Interactive Icon */
#lottie-icon-click {
cursor: pointer;
/* transition: transform 0.3s ease; Removing old transition to avoid conflict with animation */
}
/* Removed old hover scale on container to move it to the icon inner element */
/* #lottie-icon-click:hover {
transform: scale(1.1);
} */
/* Dynamic Icon Color Override */
.is-video-visible .map-video-overlay,
.is-video-visible .map-back-btn {
opacity: 1;
pointer-events: auto;
}
.map-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 150;
background: #000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.map-video-overlay img,
.map-video-overlay iframe {
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width:1200px) {
.map-info-img {
top: 4vw;
left: 7vw;
width: 6vw;
min-width: 180px;
}
.map-video-embed {
top: 6vw;
left: 7vw;
width: 40vw;
min-width: 180px;
}
}
@media screen and (max-width: 768px) {
.map-video-overlay img,
.map-video-overlay iframe {
height: 50%;
width: 100%;
}
.map-info-bar__right {
margin-left: 0px;
}
.map-info-bar__title {
font-size: 18px;
}
.map-info-bar__text {
font-size: 12px;
line-height: 1.5;
}
.map-info-bar__button {
padding: 6px 10px;
font-size: 14px;
min-width: 130px;
order: 1;
}
.map-info-bar__left {
display: contents;
}
.map-info-bar {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
}
.map-info-img {
top: 35px;
left: 16px;
width: 180px;
border-width: 4px;
}
.map-video-embed {
top: 75px;
left: 16px;
width: 200px;
}
}