@charset "UTF-8";

@media screen and (width >= 769px) {
.is-sp {
display: none;
}
}
@media screen and (width <= 768px) {
.is-sp {
display: block;
}
}

@media screen and (width >= 769px) {
.is-pc {
display: block;
}
}
@media screen and (width <= 768px) {
.is-pc {
display: none;
}
}

@media screen and (width <= 768px) {
br.is-pc {
display: contents;
}
}
@media screen and (width >= 769px) {
br.is-sp {
display: contents;
}
}

.pc-only {
display: none;
}
@media screen and (width >= 769px) {
.pc-only {
display: block;
}
}

.sp-only {
display: none;
}
@media screen and (width <= 768px) {
.sp-only {
display: block;
}
}


/* 
-------------------------------------------------- */
.p-top-mv-gallery {
--radius: 120vw;
position: absolute;
top: -90vw;
left: 50%;
height: 100%;
transform: translateX(-50%);
}
@media screen and (width <= 768px) {
.p-top-mv-gallery {
--radius: 150vw;
top: -60vw;
}
}
.p-top-mv-gallery__inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
width: calc(var(--radius) * 2);
height: 100%;
height: calc(var(--radius) * 2);
border-radius: 50%;
}
.p-top-mv-gallery__image {
position: absolute;
z-index: 1;
transform: scale(0);
transform-origin: center;
translate: var(--x) var(--y);
--angle2: calc(var(--angle) * 1deg - 90deg);
--x: calc(cos(var(--angle2)) * var(--radius) * 1);
--y: calc(sin(var(--angle2)) * var(--radius) * 1);
}
.p-top-mv-gallery__image img {
width: 100%;
height: auto;
object-fit: contain;
}
.p-top-mv-gallery__image.size-ss {
width: 7.96875vw;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__image.size-ss {
width: 21.7948717949vw;
}
}
.p-top-mv-gallery__image.size-s {
width: 10.625vw;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__image.size-s {
width: 29.2307692308vw;
}
}
.p-top-mv-gallery__image.size-m {
width: 15.3125vw;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__image.size-m {
width: 42.0512820513vw;
}
}
.p-top-mv-gallery__image.size-l {
width: 24.375vw;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__image.size-l {
width: 66.6666666667vw;
}
}
.p-top-mv-gallery__image.delay-1 {
animation-delay: 0ms;
}
.p-top-mv-gallery__image.delay-1-2 {
animation-delay: 375ms;
}
.p-top-mv-gallery__image.delay-1-3 {
animation-delay: 750ms;
}
.p-top-mv-gallery__image.delay-1-4 {
animation-delay: 1125ms;
}
.p-top-mv-gallery__image.delay-2 {
animation-delay: 1500ms;
}
.p-top-mv-gallery__image.delay-2-2 {
animation-delay: 1875ms;
}
.p-top-mv-gallery__image.delay-2-3 {
animation-delay: 2250ms;
}
.p-top-mv-gallery__image.delay-2-4 {
animation-delay: 2625ms;
}
.p-top-mv-gallery__image.delay-3 {
animation-delay: 3000ms;
}
.p-top-mv-gallery__image.delay-3-2 {
animation-delay: 3375ms;
}
.p-top-mv-gallery__image.delay-3-3 {
animation-delay: 3750ms;
}
.p-top-mv-gallery__image.delay-3-4 {
animation-delay: 4125ms;
}
.p-top-mv-gallery__image.delay-4 {
animation-delay: 4500ms;
}
.p-top-mv-gallery__image.delay-4-2 {
animation-delay: 4875ms;
}
.p-top-mv-gallery__image.delay-4-3 {
animation-delay: 5250ms;
}
.p-top-mv-gallery__image.delay-4-4 {
animation-delay: 5625ms;
}
.p-top-mv-gallery__image.delay-5 {
animation-delay: 6000ms;
}
.p-top-mv-gallery__image.delay-5-2 {
animation-delay: 6375ms;
}
.p-top-mv-gallery__image.delay-5-3 {
animation-delay: 6750ms;
}
.p-top-mv-gallery__image.delay-5-4 {
animation-delay: 7125ms;
}
.p-top-mv-gallery__image.delay-6 {
animation-delay: 7500ms;
}
.p-top-mv-gallery__image.delay-6-2 {
animation-delay: 7875ms;
}
.p-top-mv-gallery__image.delay-6-3 {
animation-delay: 8250ms;
}
.p-top-mv-gallery__image.delay-6-4 {
animation-delay: 8625ms;
}


@keyframes top-mv-gallery-root {
0% {
z-index: 24;
filter: blur(24px);
opacity: 0;
transform: scale(0.7);
}
40% {
filter: blur(12px);
opacity: 0;
transform: scale(1);
}
53% {
filter: blur(0);
opacity: 1;
}
60% {
filter: blur(0);
opacity: 1;
}
90% {
filter: blur(6px);
opacity: 1;
}
95% {
filter: blur(12px);
opacity: 1;
transform: scale(0);
}
100% {
filter: blur(24px);
z-index: 0;
opacity: 0;
transform: scale(0);
translate: 0 0;
}
}

@keyframes top-mv-gallery-root-blur {
0% {
z-index:24;
filter:blur(72px);
opacity: 0;
transform: scale(0.7);
}
50% {
filter:blur(36px);
opacity: 0;
transform: scale(1);
}
53% {
filter:blur(24px);
opacity: 1;
}
60% {
filter:blur(12px);
opacity: 1;
}
75% {
filter:blur(0px);
opacity: 1;
}
90% {
opacity: 1;
filter: blur(0px);
}
95% {
filter: blur(0px);
opacity: 1;
transform: scale(0);
}
100% {
filter: blur(0);
z-index: 0;
opacity: 0;
transform: scale(0);
translate: 0 0;
}
}


.p-top-mv-gallery__root1 {
--angle: 50;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root1 {
--angle: 30;
}
}
.p-top-mv-gallery__root1--blur {
--angle: 50;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root1--blur {
--angle: 30;
}
}
.p-top-mv-gallery__root1--polygon {
--angle: 50;
animation: top-mv-gallery-root1-polygon 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root1--polygon {
--angle: 30;
}
}
@keyframes top-mv-gallery-root1-polygon {
0% {
filter: blur(24px);
opacity: 0;
transform: scale(3) rotate(0);
}
30% {
filter: blur(15px);
opacity: 1;
}
50% {
filter: blur(10px);
}
60% {
filter: blur(0);
opacity: 1;
}
95% {
opacity: 1;
filter: blur(0);
transform: scale(0) rotate(-240deg);
}
100% {
filter: blur(0px);
opacity: 0;
transform: scale(0) rotate(-240deg);
translate: 0 0;
}
}
.p-top-mv-gallery__root2 {
--angle: 70;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root2 {
--angle: 60;
}
}
.p-top-mv-gallery__root2--blur {
--angle: 70;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root2--blur {
--angle: 60;
}
}
.p-top-mv-gallery__root3 {
--angle: 90;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
.p-top-mv-gallery__root3--blur {
--angle: 90;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
.p-top-mv-gallery__root3--polygon {
--angle: 90;
animation: top-mv-gallery-root3-polygon 9s linear infinite;
animation-direction: reverse;
}



.p-top-mv-gallery__root4 {
--angle: 100;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root4 {
--angle: 120;
}
}
.p-top-mv-gallery__root4--blur {
--angle: 100;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root4--blur {
--angle: 120;
}
}
.p-top-mv-gallery__root5 {
--angle: 120;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root5 {
--angle: 150;
}
}
.p-top-mv-gallery__root5--blur {
--angle: 120;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root5--blur {
--angle: 150;
}
}
.p-top-mv-gallery__root5--inside {
--angle: 120;
translate: var(--x) var(--y);
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
--angle2: calc(var(--angle) * 1deg - 90deg);
--x: calc(cos(var(--angle2)) * calc(var(--radius) * 0.2) * 1);
--y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.2) * 1);
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root5--inside {
--angle: 150;
--y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
}
}
.p-top-mv-gallery__root5--polygon {
--angle: 120;
animation: top-mv-gallery-root5-polygon 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root5--polygon {
--angle: 150;
}
}

.p-top-mv-gallery__root6 {
--angle: 180;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
.p-top-mv-gallery__root7 {
--angle: 240;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root7 {
--angle: 210;
}
}
.p-top-mv-gallery__root7--blur {
--angle: 240;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root7--blur {
--angle: 210;
}
}
.p-top-mv-gallery__root7--polygon {
--angle: 240;
animation: top-mv-gallery-root7-polygon 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root7--polygon {
--angle: 210;
}
}

.p-top-mv-gallery__root8 {
--angle: 250;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root8 {
--angle: 240;
}
}
.p-top-mv-gallery__root8--blur {
--angle: 250;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root8--blur {
--angle: 240;
}
}
.p-top-mv-gallery__root9 {
--angle: 270;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
.p-top-mv-gallery__root9--blur {
--angle: 260;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root9--blur {
--angle: 270;
}
}
.p-top-mv-gallery__root10 {
--angle: 290;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root10 {
--angle: 300;
}
}
.p-top-mv-gallery__root10--blur {
--angle: 290;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root10--blur {
--angle: 300;
}
}
.p-top-mv-gallery__root10--polygon {
--angle: 290;
animation: top-mv-gallery-root10-polygon 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root10--polygon {
--angle: 300;
}
}

.p-top-mv-gallery__root11 {
--angle: 310;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root11 {
--angle: 330;
}
}
.p-top-mv-gallery__root11--blur {
--angle: 310;
animation: top-mv-gallery-root-blur 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root11--blur {
--angle: 330;
}
}
.p-top-mv-gallery__root11--inside {
--angle: 310;
translate: var(--x) var(--y);
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
--angle2: calc(var(--angle) * 1deg - 90deg);
--x: calc(cos(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
--y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root11--inside {
--angle: 330;
}
}
.p-top-mv-gallery__root11--polygon {
--angle: 310;
animation: top-mv-gallery-root11-polygon 9s linear infinite;
animation-direction: reverse;
}
@media screen and (width <= 768px) {
.p-top-mv-gallery__root11--polygon {
--angle: 330;
}
}
@keyframes top-mv-gallery-root11-polygon {
0% {
filter: blur(5px);
opacity: 0;
transform: scale(1.6) rotate(0);
}
30% {
filter: blur(5px);
opacity: 1;
}
50% {
filter: blur(5px);
}
60% {
filter: blur(0);
opacity: 1;
}
95% {
opacity: 1;
transform: scale(0) rotate(-240deg);
}
100% {
filter: blur(15px);
opacity: 0;
transform: scale(0) rotate(-240deg);
translate: 0 0;
}
}
.p-top-mv-gallery__root12 {
--angle: 360;
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
}
.p-top-mv-gallery__root12--inside {
--angle: 360;
translate: var(--x) var(--y);
animation: top-mv-gallery-root 9s linear infinite;
animation-direction: reverse;
--angle2: calc(var(--angle) * 1deg - 90deg);
--x: calc(cos(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
--y: calc(sin(var(--angle2)) * calc(var(--radius) * 0.4) * 1);
}

/* --------------------------------------------------
トップ > MV
-------------------------------------------------- */
.p-top-mv {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #FFF;
background-image: url("../images/com/bg_noise.png");
background-repeat: repeat;
background-position: center;
background-size: cover;
}
@media screen and (width <= 768px) {
.p-top-mv {
background-image: url("images/com/bg_noise_sp.png");
}
}
.p-top-mv__logo {
position: absolute;
top: 32px;
right: 40px;
width: 14.84375vw;
height: 5.546875vw;
}
.p-top-mv__logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-top-mv__bg-circle1 {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 23.75vw;
aspect-ratio: 1/1;
transform: translate(-50%, -50%);
}
@media screen and (width <= 768px) {
.p-top-mv__bg-circle1 {
width: 78.9743589744vw;
}
}
.p-top-mv__bg-circle1 img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-top-mv__bg-circle2 {
position: absolute;
top: -7.8125vw;
right: -7.8125vw;
z-index: -1;
width: 30.234375vw;
aspect-ratio: 1/1;
}
@media screen and (width <= 768px) {
.p-top-mv__bg-circle2 {
top: -38.4615384615vw;
right: -30.7692307692vw;
width: 102.5641025641vw;
}
}
.p-top-mv__bg-circle2 img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-top-mv__bg-circle3 {
position: absolute;
top: 6.25vw;
left: 15.625vw;
z-index: -1;
width: 27.578125vw;
aspect-ratio: 1/1;
}
@media screen and (width <= 768px) {
.p-top-mv__bg-circle3 {
top: 10.2564102564vw;
left: -15.3846153846vw;
width: 64.358974359vw;
}
}
.p-top-mv__bg-circle3 img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-top-mv__bg-circle4 {
position: absolute;
top: 27.34375vw;
left: -15.625vw;
z-index: -1;
width: 70.3125vw;
aspect-ratio: 564/374;
}
@media screen and (width <= 768px) {
.p-top-mv__bg-circle4 {
top: 76.9230769231vw;
left: -61.5384615385vw;
width: 179.4871794872vw;
}
}
.p-top-mv__bg-circle4 img {
width: 100%;
height: 100%;
object-fit: contain;
}