@charset "UTF-8";

body { background: rgba(33,184,206,0.5); color: #036; font-size: clamp(0.9rem,1.6vw,1rem); position: fixed; }

.logo_wrap { width: 26rem; box-sizing: border-box; z-index: 1000; animation: bg_tr0 2s 0.75s forwards; position: absolute; top:calc(35vh - clamp(5rem,12vw,7.5rem)); left:calc(50% - clamp(6.5rem,20vw,13rem)); }
@keyframes bg_tr0 { 
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); }
80% { top:9rem; }
100% { top:9rem; }
}

@media (max-width: 1024px) {
.logo_wrap { animation: img_tr1 3s forwards;  left:calc(50% - clamp(6.5rem,50vw,13rem)); }
}
@keyframes img_tr1 { 
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); }
80% { top:25rem; }
100% { top:25rem; }
}

@media (max-width: 768px) {
.logo_wrap { animation: img_tr2 3s forwards; width: 18rem; left:calc(50% - clamp(4.5rem,50vw,9rem));}
}
@keyframes img_tr2 { 
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem));  }
80% { top:calc(33.3vw + 9rem); }
100% { top:calc(33.3vw + 9rem); }
}

@media (max-width: 640px) {
.logo_wrap { animation: img_tr2 3s forwards; }
}
@keyframes img_tr2 { 
30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); }
80% { top:calc(33.3vw + 9rem); }
100% { top:calc(33.3vw + 9rem); }
}

.logo_wrap img {transition: 0.15s; width:clamp(10rem,24vw,15rem);  margin: 0 auto 1rem auto; }
.logo_wrap #logoImg:hover { transform: scale(1.2); object-position: center; transition: 0.15s; }
.logo_02 { width:clamp(10rem,24vw,15rem); opacity:0; }
.logo_02 img {}
.rotating { animation: spin 5s linear infinite; }
	

.ripple { position: absolute; border: 2vw solid transparent; border-radius: 50%; width: 10rem; height: 10rem; background: conic-gradient(from 0deg, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.3) 70%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px)); animation: rippleEffect 10s ease-out infinite; z-index: 100; }
@keyframes rippleEffect {
 0% { transform: scale(0); opacity: 0.5; }
 100% { transform: scale(14); opacity: 0; }
}
.delay-0 { animation-delay: 0s, 0s; }
.delay-1 { animation-delay: 1.25s, 1.25s; }
.delay-2 { animation-delay: 2.5s, 2.5s; }
.delay-3 { animation-delay: 3.75s, 3.75s; }
.delay-4 { animation-delay: 5s, 5s; }
.delay-5 { animation-delay: 6.25s, 6.25s; }
	
.ripple_base { position: absolute; width:90vw; min-width: 30rem; height:90vw; min-height: 30rem; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 15%, rgba(255,255,255,0) 60%); border-radius:50%; }


.photo { position: absolute; aspect-ratio:1; z-index: 200; }
.photo .inner { border-radius: 50%; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition:0.3s; }
.photo01 { top:1vw; left:clamp(5rem,16vw,10rem); width:clamp(6rem,19vw,12rem); z-index: 10; animation: p01_move 2s ease-out forwards; }
.photo02 { top:calc(50vh - clamp(6rem,19vw,12rem)); right:1rem; width:clamp(9rem,24vw,18rem); z-index: 10; animation: p02_move 2s ease-out forwards;}
.photo03 { top:-1vw; right:clamp(1rem,10vw,10rem); width:clamp(6rem,19vw,12rem); animation: p03_move 2s ease-out forwards; }
.photo04 { top:calc(50vh - clamp(5rem,16vw,10rem)); left:1rem; width:clamp(9rem,24vw,18rem); animation: p04_move 2s ease-out forwards; }
.photo05 { top:calc(102vh - clamp(7rem,23vw,14rem)); left:clamp(3rem,10vw,6rem); width:clamp(7rem,23vw,14rem); animation: p05_move 2s ease-out forwards; }
.photo06 { top:calc(97vh - clamp(7rem,22vw,14rem)); right:clamp(3rem,10vw,6rem); border-radius:0; width:clamp(7rem,22vw,14rem); z-index: 20; animation: p06_move 2s ease-out forwards; }
.photo:hover img { transform: scale(1.2); object-position: center; }

.photo::after { content:""; position: absolute; top:0; left:0; border-radius: 50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 70%); animation: photo_re 3s ease-out infinite; z-index: -1; }
@keyframes photo_re {
 0% { transform: scale(1); opacity: 1; }
 100% { transform: scale(2); opacity: 0; }
}

@keyframes p01_move {
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); left:calc(50% - clamp(5rem,12vw,7.5rem)); width:clamp(10rem,24vw,15rem); opacity: 0; transform: rotate(180deg);}
100% { top:1vw; left:clamp(5rem,16vw,10rem); width:clamp(6rem,19vw,12rem); opacity: 1; transform: rotate(0deg); }
}
@keyframes p02_move {
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); right:calc(50% - clamp(5rem,12vw,7.5rem)); width:clamp(10rem,24vw,15rem); opacity: 0; transform: rotate(-180deg); }
100% { top:calc(50vh - clamp(6rem,19vw,12rem)); right:1rem; width:clamp(9rem,24vw,18rem); opacity: 1; transform: rotate(0deg); }
}
@keyframes p03_move {
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); right:calc(50% - clamp(5rem,12vw,7.5rem)); width:clamp(10rem,24vw,15rem); opacity: 0; transform: rotate(-180deg); }
100% { top:-1vw; right:clamp(1rem,10vw,10rem); width:clamp(6rem,19vw,12rem); opacity: 1; transform: rotate(0deg); }
}
@keyframes p04_move {
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); left:calc(50% - clamp(5rem,12vw,7.5rem)); width:clamp(10rem,24vw,15rem); opacity: 0; transform: rotate(180deg); }
100% { top:calc(50vh - clamp(5rem,16vw,10rem)); left:1rem; width:clamp(9rem,24vw,18rem); opacity: 1; transform: rotate(0deg); }
}
@keyframes p05_move {
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); left:calc(50% - clamp(5rem,12vw,7.5rem)); width:clamp(10rem,24vw,15rem); opacity: 0; transform: rotate(180deg); }
100% { top:calc(102% - clamp(7rem,23vw,14rem)); left:clamp(3rem,10vw,6rem); width:clamp(7rem,23vw,14rem); opacity: 1; transform: rotate(0deg); }
}
@keyframes p06_move {
0%, 30% { top:calc(35vh - clamp(5rem,12vw,7.5rem)); right:calc(50% - clamp(5rem,12vw,7.5rem)); width:clamp(10rem,24vw,15rem); opacity: 0; transform: rotate(-180deg); }
100% { top:calc(97vh - clamp(7rem,22vw,14rem)); right:clamp(3rem,10vw,6rem); width:clamp(7rem,23vw,14rem); opacity: 1; transform: rotate(0deg); }
}


.text_box { opacity: 0; animation: text_tr0 1.5s 2s forwards; }
@media (max-width: 1024px) { .text_box { opacity: 0; animation: text_tr1 1.5s 2s forwards; } }
@media (max-width: 768px) { .text_box { opacity: 0; animation: text_tr2 1.5s 2s forwards; } }
@media (max-width: 640px) { .text_box { opacity: 0; animation: text_tr3 1.5s 2s forwards; } }
@keyframes text_tr0  {  0% { opacity:0; } 100% { opacity:1; } }
@keyframes text_tr1  {  0% { opacity:0; } 100% { opacity:1; } }
@keyframes text_tr2  {  0% { opacity:0; } 100% { opacity:1; } }
@keyframes text_tr3  {  0% { opacity:0; } 100% { opacity:1; } }

.slogan { color:#21b8ce; mix-blend-mode: multiply; }


@media (max-width: 1024px) {
.ripple_base { width:150vw; height:150vw; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 70%); border-radius:50%; }
.photo_sp { height: auto !important; animation: p_sp_tr 1s 1s forwards; opacity:0; }
.photo01, .photo02, .photo03 { width:33.3%; }
.photo04, .photo05 { width:30%; }
}
@keyframes p_sp_tr { 
50% { opacity:0; }
100% { opacity:1; }
}


.b_top {  display: block; background: rgba(255,255,255,0.8); max-width: 10rem; border-radius: 3rem; padding: 0.5rem 1rem; text-align: center; margin: auto;  }
.b_top:hover { background: rgba(255,255,255,1); }