/*----------------------------------------
 main_v
----------------------------------------*/

.main_v_wrap{
width: 100%;
height: 100vh;
position: relative;
opacity: 0;
overflow: hidden;
}

.main_v_bg {
transition: background-color 0.8s ease-in-out;
}

.main_v_text{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: -1;
}

.main_v_text01 {
 display:flex;
  place-items:center;
  overflow:hidden;
  text-wrap:nowrap;
}

.main_v_text02 {
 display:flex;
  place-items:center;
  overflow:hidden;
  text-wrap:nowrap;
}

.main_v_text p{
display: inline-block;
font-size: 20vw;
line-height: 2;
font-weight: 800;
color: rgba(249, 230, 205, 0.5);
white-space: nowrap;
font-style: oblique;
}

@keyframes loop-text1 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes loop-text2 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.main_v {
width: 100%;
height: 100%;
line-height: 0;
font-size: 40px;
}

.main_v_img{
width: 100%;
height: 100vh;
position: relative;
}

.main_v01 .main_v_img_01,
.main_v03 .main_v_img_01,
.main_v05 .main_v_img_01{
position: absolute;
top: -3.8%;
left: 38.7%;
width: 35%;
opacity: 0;
}

.main_v02 .main_v_img_01,
.main_v04 .main_v_img_01{
position: absolute;
top: 1.2%;
left: 10.6%;
width: 35%;
opacity: 0;
}

.main_v_img_01.current_amime{
animation: 0.5s Current_anime ease-in-out forwards;
}

.main_v_img_01.current_amime_first{
animation: 0.5s Current_anime ease-in-out forwards;
animation-delay: 1s;
}

@keyframes Current_anime {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.main_v01 .main_v_img_02,
.main_v03 .main_v_img_02,
.main_v05 .main_v_img_02{
width: 35%;
opacity: 0;
transform: translate(24.5%, 80.5%);
}

.main_v02 .main_v_img_02,
.main_v04 .main_v_img_02{
width: 35%;
opacity: 0;
transform: translate(127%, 72%);
}

.main_v01 .main_v_img_02.current_amime,
.main_v03 .main_v_img_02.current_amime,
.main_v05 .main_v_img_02.current_amime{
animation: 0.3s Current_anime2_1 ease-in-out forwards;
animation-delay: 0.1s;
}

.main_v02 .main_v_img_02.current_amime,
.main_v04 .main_v_img_02.current_amime{
animation: 0.3s Current_anime2_2 ease-in-out forwards;
animation-delay: 0.2s;
}

.main_v01 .main_v_img_02.current_amime_first{
animation: 0.3s Current_anime2_1 ease-in-out forwards;
animation-delay: 1.1s;
}

@keyframes Current_anime2_1 {
    0% {
        transform: translate(24.5%, 80.5%) scale(0.7);
        opacity: 0;
    }
    100% {
        transform: translate(24.5%, 80.5%) scale(1);
        opacity: 1;
    }
}

@keyframes Current_anime2_2 {
    0% {
        transform: translate(127%, 72%) scale(0.7);
        opacity: 0;
    }
    100% {
        transform: translate(127%, 72%) scale(1);
        opacity: 1;
    }
}



.main_v_img_01.current_amime img{
animation: 6s Current_anime_img ease-in-out infinite;
animation-delay: 0.5s;
}

.main_v_img_01.current_amime_first img{
animation: 6s Current_anime_img ease-in-out infinite;
animation-delay: 1.5s;
}

@keyframes Current_anime_img {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.95) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}



.main_v_img_02.current_amime img{
animation: 6s Current_anime_img2 ease-in-out infinite;
animation-delay: 0.5s;
}

.main_v_img_02.current_amime_first img{
animation: 6s Current_anime_img2 ease-in-out infinite;
animation-delay: 1.5s;
}

@keyframes Current_anime_img2 {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(0.95) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}


.main_v_circle{
border-radius: 50%;
}

.main_v_anime.amime div.pop{
animation: 0.5s Anime01 ease forwards;
}

@keyframes Anime01 {
    0% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(0.7);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.main_v01_3{
position: absolute;
bottom: 5%;
left: 68%;
width: 15%;
animation-delay: 1.2s !important;
transform: scale(0);
}

.main_v01_4{
position: absolute;
top: 40%;
left: 5%;
width: 12%;
animation-delay: 1.2s !important;
transform: scale(0);
}

.main_v01_5{
position: absolute;
top: 35%;
left: 60%;
width: 8%;
animation-delay: 1.4s !important;
transform: scale(0);
}

.main_v01_6{
position: absolute;
top: 22%;
left: 15%;
width: 12%;
animation-delay: 1.5s !important;
transform: scale(0);
}

.main_v01_7{
position: absolute;
bottom: 10%;
left: 55%;
width: 15%;
animation-delay: 1.7s !important;
transform: scale(0);
}

.main_v02_3{
position: absolute;
bottom: -10%;
left: 75%;
width: 15%;
animation-delay: 1s !important;
transform: scale(0);
}

.main_v02_4{
position: absolute;
bottom: 10%;
left: 20%;
width: 12%;
animation-delay: 1.3s !important;
transform: scale(0);
}

.main_v02_5{
position: absolute;
top: 5%;
left: 50%;
width: 15%;
animation-delay: 1.2s !important;
transform: scale(0);
}

.main_v02_6{
position: absolute;
bottom: 0;
left: 5%;
width: 15%;
animation-delay: 1.2s !important;
transform: scale(0);
}

.main_v02_7{
position: absolute;
top: 20%;
left: 70%;
width: 8%;
animation-delay: 1.1s !important;
transform: scale(0);
}

.main_v03_3{
position: absolute;
top: 20%;
left: 15%;
width: 15%;
animation-delay: 1s !important;
transform: scale(0);
}

.main_v03_4{
position: absolute;
top: -5%;
left: 67%;
width: 15%;
animation-delay: 1.3s !important;
transform: scale(0);
}

.main_v03_5{
position: absolute;
bottom: 5%;
left: 50%;
width: 15%;
animation-delay: 1.2s !important;
transform: scale(0);
}

.main_v03_6{
position: absolute;
bottom: 0;
left: 70%;
width: 25%;
animation-delay: 1.3s !important;
transform: scale(0);
}

.main_v03_7{
position: absolute;
top: 10%;
left: 10%;
width: 12%;
animation-delay: 1.3s !important;
transform: scale(0);
}


.main_v04_3{
position: absolute;
top: 40%;
left: 5%;
width: 10%;
animation-delay: 1s !important;
transform: scale(0);
}

.main_v04_4{
position: absolute;
bottom: 24%;
left: 10%;
width: 10%;
animation-delay: 1.2s !important;
transform: scale(0);
}

.main_v04_5{
position: absolute;
bottom: 10%;
left: 20%;
width: 10%;
animation-delay: 1.1s !important;
transform: scale(0);
}

.main_v04_6{
position: absolute;
bottom: 5%;
left: 5%;
width: 10%;
animation-delay: 1.1s !important;
transform: scale(0);
}

.main_v04_7{
position: absolute;
top: 5%;
right: 25%;
width: 20%;
animation-delay: 1.1s !important;
transform: scale(0);
}

.main_v05_3{
position: absolute;
top: 15%;
left: 10%;
width: 15%;
animation-delay: 1s !important;
transform: scale(0);
}

.main_v05_4{
position: absolute;
top: 5%;
left: 25%;
width: 15%;
animation-delay: 1.3s !important;
transform: scale(0);
}

.main_v05_5{
position: absolute;
bottom: 15%;
left: 55%;
width: 15%;
animation-delay: 1.2s !important;
transform: scale(0);
}

.main_v05_6{
position: absolute;
bottom: 10%;
left: 70%;
width: 10%;
animation-delay: 1.3s !important;
transform: scale(0);
}

.main_v05_7{
position: absolute;
bottom: 30%;
left: 68%;
width: 8%;
animation-delay: 1.4s !important;
transform: scale(0);
}

.main_v_title{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -20%;
width: 40%;
}


.main_v_circle_loading {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -31.5%;
width: 53%;
}

.main_v_circle_loading svg {
width: 100%;
height: 100%;
}

.circle_loading {
fill: transparent;
stroke: #ff9d8d;
stroke-width: 1;
stroke-dasharray: 282.6;
stroke-dashoffset: 180;
transition: stroke-dashoffset 7s;
}

.circle_loading2 {
fill: transparent;
stroke: #2978a8;
stroke-width: 1;
stroke-dasharray: 282.6;
stroke-dashoffset: 180;
transition: stroke-dashoffset 8s;
}

.main_v_anime.amime .circle_loading,
.main_v_anime.amime .circle_loading2{
animation: Circle_load 8s ease-out forwards;
}


@keyframes Circle_load {
  from {
    stroke-dashoffset: 180;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}


/*--　サムネイル --*/

.main_v_thumb_wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -25%;
width: 40%;
}

.main_v_thumb_wrap_inner{
width: 100%;
position: relative;
}

.main_v_thumb{
width: 100%;
transition: transform 0.4s ease;
transform-origin: center;
}


.main_v_thumb .slick-list,
.main_v_thumb .slick-track{
width: 100%;
}

.main_v_thumb .slick-track:before {
content: "";
display: block;
padding-top: 100%;
}

.main_v_thumb li{
width: 100%;
cursor: pointer;
height: auto !important;
position: relative;
}

.main_v_thumb li img{
opacity: 0.4;
transition : all 0.5s ease 0s;
}

.main_v_thumb li:hover img{
opacity: 1;
}

.main_v_thumb .slick-slide{
position: absolute;
width: 50% !important;
top: 0; 
left: 25%;
clip-path: polygon(0 0, 100% 0, 100% 8%, 80% 25%, 20% 25%, 0 8%);
}

.main_v_thumb .slick-current li img{
opacity: 1;
}

.main_v_thumb .slick-current{
pointer-events: none;
}

/*--　円 --*/

.mv_circle_box {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}

.circle_box_01,
.circle_box_02,
.circle_box_03 {
width: 100%;
position: relative;
}

.circle_wrap {
  width: 60%;
  position: absolute;
  top: 0;
  left: 20%;
  transform-origin: 50% 50%;
}

.circle_inner {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}

.circle_inner svg {
  width: 100%;
  height: 100%;
  transform-box: fill-box;
  overflow: visible;
}


/*----------------------------------------
 sp
----------------------------------------*/

@media screen and (max-width : 896px) {

.main_v_text p{
font-size: 50vw;
}


.main_v01 .main_v_img_01,
.main_v03 .main_v_img_01,
.main_v05 .main_v_img_01{
position: absolute;
top: 11.2%;
left: 38%;
width: 58%;
}

.main_v02 .main_v_img_01,
.main_v04 .main_v_img_01{
position: absolute;
top: 15.85%;
left: -18%;
width: 58%;
}

.main_v01 .main_v_img_02,
.main_v03 .main_v_img_02,
.main_v05 .main_v_img_02{
width: 58%;
transform: translate(-32.5%, 107.5%);
opacity: 0;
}

.main_v02 .main_v_img_02,
.main_v04 .main_v_img_02{
width: 58%;
transform: translate(78%, 107.5%);
opacity: 0;
}

@keyframes Current_anime2_1 {
    0% {
        transform: translate(-32.5%, 107.5%) scale(0.7);
        opacity: 0;
    }
    100% {
        transform: translate(-32.5%, 107.5%) scale(1);
        opacity: 1;
    }
}

@keyframes Current_anime2_2 {
    0% {
        transform: translate(78%, 107.5%) scale(0.7);
        opacity: 0;
    }
    100% {
        transform: translate(78%, 107.5%) scale(1);
        opacity: 1;
    }
}

.main_v01_3{
bottom: 20%;
left: 68%;
width: 30%;
}

.main_v01_4{
top: auto;
bottom: 35%;
left: 30%;
width: 30%;
}

.main_v01_5{
top: 37%;
left: 80%;
width: 20%;
}

.main_v01_6{
top: 15%;
left: 5%;
width: 25%;
}

.main_v01_7{
bottom: 30%;
left: 55%;
width: 30%;
}

.main_v02_3{
bottom: 20%;
left: 68%;
width: 30%;
}

.main_v02_4{
top: auto;
bottom: 30%;
left: 18%;
width: 30%;
}

.main_v02_5{
top: 20%;
left: 80%;
width: 20%;
}

.main_v02_6{
bottom: 15%;
left: 0;
width: 25%;
}

.main_v02_7{
top: 10%;
left: 60%;
width: 25%;
}


.main_v03_3{
top: 20%;
left: 10%;
width: 25%;
}

.main_v03_4{
top: 40%;
left: 70%;
width: 25%;
}

.main_v03_5{
bottom: 25%;
left: auto;
right: 40%;
width: 25%;
}

.main_v03_6{
bottom: 30%;
left: auto;
right: 0;
width: 40%;
}

.main_v03_7{
top: 10%;
left: 10%;
width: 20%;
}

.main_v04_3{
top: 42%;
left: 5%;
width: 22%;
}

.main_v04_4{
bottom: 33%;
left: 15%;
width: 22%;
}

.main_v04_5{
bottom: 35%;
left: 35%;
width: 22%;
}

.main_v04_6{
bottom: 25%;
left: 0;
width: 22%;
}

.main_v04_7{
top: 12%;
right: 10%;
width: 40%;
}

.main_v05_3{
top: 10%;
left: 10%;
width: 25%;
}

.main_v05_4{
top: 60%;
left: 25%;
width: 25%;
}

.main_v05_5{
bottom: 40%;
left: 52%;
width: 25%;
}

.main_v05_6{
bottom: 20%;
left: 70%;
width: 30%;
}

.main_v05_7{
bottom: 35%;
left: 70%;
width: 22%;
}


.main_v_title{
position: absolute;
top: auto;
bottom: -52%;
transform: translateY(0) rotate(90deg);
right: -20%;
width: 140%;
}

.main_v_circle_loading {
top: auto;
bottom: -52%;
transform: translateY(0);
right: -20%;
width: 140%;
}

/*--　サムネイル --*/

.main_v_thumb_wrap{
position: absolute;
top: auto;
bottom: -40%;
transform: translateY(0);
right: 0 !important;
width: 100% !important;
}

.main_v_thumb_wrap_inner{
width: 100%;
position: relative;
}

/*--　円 --*/

.circle_box_01,
.circle_box_02,
.circle_box_03 {

}


.circle_wrap {
width: 80%;
left: 10%;
top: 100px;
}

}


/* iPad 縦向き用スタイル */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {


.main_v01 .main_v_img_01,
.main_v03 .main_v_img_01,
.main_v05 .main_v_img_01{
position: absolute;
top: 6%;
left: 35%;
width: 48%;
}

.main_v02 .main_v_img_01,
.main_v04 .main_v_img_01{
position: absolute;
top: 10%;
left: -3%;
width: 48%;
}

.main_v01 .main_v_img_02,
.main_v03 .main_v_img_02,
.main_v05 .main_v_img_02{
width: 48%;
}

.main_v02 .main_v_img_02,
.main_v04 .main_v_img_02{
width: 48%;
}


.main_v_thumb_wrap{
position: absolute;
top: auto;
bottom: -41%;
transform: translateY(0);
right: 10% !important;
width: 80% !important;
}

.main_v_title{
position: absolute;
top: auto;
bottom: -58%;
transform: translateY(0) rotate(90deg);
right: -10%;
width: 120%;
}

.main_v_circle_loading {
top: auto;
bottom: -58%;
transform: translateY(0);
right: -10%;
width: 120%;
}



}