body {
position: relative;
}

body.top_header::before {
background: linear-gradient(rgba(228, 228, 228, 0.9) 50%, rgba(228, 228, 228, 0));
    opacity: 0;
}

/*---------------------------------------------
  LOADING
---------------------------------------------*/
.loading {
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100vh;
background-color: #fff;
  transition: opacity 300ms;

  display: flex;
  justify-content: center;
  align-items: center;
}

.loading .loading_logo {
width: 160px;
}

.loading.hide {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
.loading .loading_logo {
width: 260px;
}
}

/*---------------------------------------------
  HEADER
---------------------------------------------*/

body.top_header header.navbar {
/*padding-top: 28px;*/
}

@media screen and (min-width: 1200px) {
body.top_header header.navbar {
padding-top: 48px;
}

}



/*---------------------------------------------
  MAIN
---------------------------------------------*/

.top-fv {
/*min-height: 55svh;*/
margin-top: 86px;
    position: relative;
overflow: hidden;
}

.top-main-visual {
margin: auto;
    position: relative;
/*max-height: 552px;*/
aspect-ratio: 187 / 233;
padding-right:20px;
padding-left: 20px;
width: calc(100% - 40px);
}
.top-main-visual .parts_logo {
    position: absolute;
right: 0;
bottom: 0;
width: 89%;
height: auto;
aspect-ratio: 647 / 517;
}

.top-main-visual .parts_circle_color {
    position: absolute;
left: -36%;
bottom: 0;
width: 63%;
aspect-ratio: 456 / 244;
}

.top-main-visual .parts_circle_white {
    position: absolute;
right: -21%;
bottom: 30%;
width: 74%;
aspect-ratio: 541 / 244;
}

.top-main-visual .parts_zigzag_short {
    position: absolute;
aspect-ratio: 75 / 14;
}

.top-main-visual .parts_star8 {
position: absolute;
right: -2%;
bottom: 20%;
max-width: 12%;
animation: rotateAnimation 5s linear infinite;
}

.top-main-visual [class^="parts_"] img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.top-main-visual .illustration {
    position: absolute;
left: auto;
right: 3px;
top: 0;
aspect-ratio: 592 / 501;
max-width: 486px;
width: 76.2%;
/*background-color: rgba(71, 255, 40, 0.2);*/
}

.top-main-visual .illustration .image_parts_really {
    position: absolute;
aspect-ratio: 128 / 95;
width: 52.5%;
max-width: none;
}

.top-main-visual-animation {
    position: absolute;
width: 100%;
top: 0;
aspect-ratio: 324 / 517;
margin-top: 86px;
}

.top-main-visual-animation .parts_star8 {
    position: absolute;
display: none;
animation: rotateAnimation 5s linear infinite;
}


.top-main-visual-animation .parts_star4-l {
    position: absolute;
display: block;
width: 10.2%;
top: 13.5%;
left: 10%;
animation: rotateAnimation 3s linear infinite;
}


.top-main-visual-animation .parts_star4-r {
    position: absolute;
display:none;
animation: rotateAnimation 3s linear infinite;
}



@media (min-width: 768px) {
.top-fv {
/*min-height: calc(100svh - 96px);*/
min-height: auto;
margin-top: 96px;
overflow-x: hidden;
overflow-y: clip;
}

.top-main-visual {
aspect-ratio: 503 / 304;
padding-right:30px;
padding-left: 30px;
width: calc(100% - 60px);
}

.top-main-visual .parts_logo {
width: 64%;
}

.top-main-visual .parts_circle_color {
left: 0;
width: 45.5%;
}

.top-main-visual .parts_circle_white {
right: -15.5%;
bottom: 44.4%;
width: 53.6%;
}

.top-main-visual .parts_zigzag_short {
bottom: 2%;
right: -9%;
width: 13.6vw;
}

.top-main-visual .illustration {
aspect-ratio: 6 / 5;
max-width: none;
width: 50%;
left: 0;
right: auto;
}
.top-main-visual .illustration .image_parts_really {
width: 51.4%;
}
.top-main-visual .parts_star8 {
right: 0;
bottom: 34%;
max-width: 6.7%;
}

.top-main-visual-animation {
aspect-ratio: 721 / 517;
margin-top: 96px;
}

.top-main-visual-animation .parts_star8 {
display: block;
left: 2%;
bottom: 10%;
width: 15.6%;
}

.top-main-visual-animation .parts_star4-l {
display: none;
}

.top-main-visual-animation .parts_star4-r {
display: block;
width: 38px;
top: 0%;
right: 27%;
}

}


@media screen and (min-width: 1281px) {
.top-fv {
margin-top: 135px;
margin-right:0;
margin-left: 0;
max-height: 608px;
}

.top-main-visual {
max-width: 1006px;
max-height: 608px;
height: 100%;
padding-right:0;
padding-left: 0;
width: 100%;
}

.top-main-visual .parts_logo {
max-width: 646px;
}

.top-main-visual .parts_circle_color {
max-width: 458px;
}

.top-main-visual .parts_circle_white {
right: -160px;
bottom: 44.4%;
}

.top-main-visual .parts_zigzag_short {
bottom: 19px;
right: -100px;
width: 150px;
}

.top-main-visual .illustration {
aspect-ratio: 500 / 417;
max-width: 500px;
}
.top-main-visual .illustration .image_parts_really {
max-width: 256px;
}
.top-main-visual .parts_star8 {
right: 0;
bottom: 31%;
max-width: 68px;
}

.top-main-visual-animation {
margin-top: 135px;
aspect-ratio: 45 / 19;
max-height: 608px;
}

.top-main-visual-animation .parts_star8 {
left: 32px;
top: 217px;
bottom: auto;
width: 130px;
}

.top-main-visual-animation .parts_star4-l {
display: block;
width: 42px;
max-width: auto;
top: 530px;
bottom: 0;
left: 110px;
}

.top-main-visual-animation .parts_star4-r {
right: 40px;
width: 43px;
}
}


/* Animation */
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* フェードとシェイクアニメーション */
.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.shake {
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}



/*---------------------------------------------
  TOP
---------------------------------------------*/

.top-main-contents {
	overflow:hidden;
position: relative;
}




/*---------------------------------------------
  TOP CONTENTS
---------------------------------------------*/

.top-main-contents .container {
	padding: 50px 30px 16px 30px;
z-index: 1;
position: relative;
}


.top-main-contents .container h2 {
margin: 0;
font-size: 48px;
}

.top-main-contents #fanclub .container h2,
.top-main-contents #news .container h2 {
position: absolute;
top: -50px;
line-height: 0.84;
}

.top-main-contents .more {
	text-align:center;
	margin-top:32px;
padding: 0 15px 0 15px;
}


.top-main-contents .registrations {
max-width: 1030px;
margin: auto;
justify-content: center;
}

.top-main-contents #fanclub+.registrations,
.top-main-contents #contents-prev .registrations {
padding-top: 60px;
}

.top-main-contents .registrations a.btn {
  background-color: transparent;
max-width: 300px;
border: 12px solid #28C3FF;
border-radius: 9999px;
padding: 1px 24px 4px;
font-size: 24px;
font-weight: 900;
color: #231815;
transition: border 0.3s;
margin: 0 6px;
}

.top-main-contents .registrations a.btn:hover {
  background-color: transparent;
border: 12px solid #26a1d0;
color: #231815;
}

.top-main-contents .registrations+p {
font-size: 12px;
}


@media (min-width: 768px) {
.top-main-contents .container h2 {
font-size: 64px;
}

.top-main-contents .container {
	padding:20px 60px 26px 60px;
}
.top-main-contents .registrations a.btn {
margin: 0 6px;
}

}

@media (min-width: 1281px) {
.top-main-contents .container {
	padding: 20px 15px 36px 15px;
}

.top-main-contents .registrations a.btn {
font-size: 26px;
}

}

/*FANCLUB*/
.fanclub-content {
margin-top: 0px;
}

.fanclub-content img {
border-radius: 8px;
}

@media (min-width: 768px) {
.fanclub-content {
margin-top: 9px;
}
.fanclub-content img {
border-radius: 12px;
}
}

/* fadein */
.scroll-in {
/*  opacity: 0;*/
  visibility: hidden;
}
.scroll-in.is-show {
/*  opacity: 1;*/
  visibility: visible;
animation-name: bounceZoomOut;
}

.ca__fx-bounceZoomOut {
  animation-name: bounceZoomOut;
}
@keyframes bounceZoomOut {
  0%,
  25%,
  55%,
  85%,
  100% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }

  41%,
  44% {
    animation-timing-function: ease-in;
    transform: scale(0.3);
  }

  70% {
    animation-timing-function: ease-in;
    transform: scale(0.5);
  }

  90% {
    transform: scale(0.9);
  }
}



/* NEWS */
.top-main-contents #news {
background-color: #fff;
position: relative;
}
.top-main-contents #news::before {
position: absolute;
content: "";
background-image: url(../images/bgparts_weve.svg);
background-size: cover;
width: 100%;
aspect-ratio: 187 / 19;
top: 0;
margin-top: calc(-100vw * 0.048);
}

.top-main-contents #news::after {
position: absolute;
content: "";
background-image: url(../images/bgparts_weve.svg);
background-size: cover;
width: 100%;
aspect-ratio: 187 / 19;
bottom: 0;
margin-bottom: calc(-100vw * 0.048);
}

.top-main-contents #news .container {
position: relative;
/*top: -70px;*/
margin-top: 87px;
}

.top-main-contents #news h2 {
margin-bottom: 18px;
}

.top-main-contents #news .post-item-type_a1:last-child {
margin-bottom: 20px;
}

.top-main-contents #news a.btn {
  background-color: transparent;
max-width: 200px;
border: 12px solid #979392;
border-radius: 9999px;
padding: 0 30px;
margin: 20px auto 0;
display: block;
font-size: 24px;
font-weight: 900;
color: #231815;
transition: border 0.3s;
}

.top-main-contents #news a.btn:hover {
  background-color: transparent;
border: 12px solid #807b79;
color: #231815;
}

@media (min-width: 768px) {



.top-main-contents #news::before {
background-image: url(../images/bgparts_weve_long.svg);
aspect-ratio: 256 / 13;
top: calc(-100vw * 0.0125);
margin-top: calc(-100vw * 0.0125);
}
.top-main-contents #news::after {
background-image: url(../images/bgparts_weve_long.svg);
aspect-ratio: 256 / 13;
bottom: calc(-100vw * 0.0125);
margin-bottom: calc(-100vw * 0.0125);
}
}


/* CONTENTS */
.top-main-contents #contents-prev {
margin-top: 10px;
padding-bottom: 62px;
}

.top-main-contents #contents-prev h2 {
position: relative;
}
.top-main-contents #contents-prev h2:after {
content: "";
position: absolute;
background-image: url(../images/top/bgparts_zigzag_round.svg);
aspect-ratio: 135 / 19;
top: 50%;
left: 275px;
transform: translateY(-50%);
width: 270px;
height: auto;
}

.top-main-contents .contents-main {
justify-content: center;
}

.top-main-contents .contents-frame {
max-width: 439px;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left:15px;
transition: opacity 0.3s;
}

.top-main-contents .contents-frame a:hover {
opacity: 0.8;
}

.top-main-contents .contents-frame a:not([href]):not([tabindex]):hover {
opacity: 1;
}


.top-main-contents .contents-thmb {
    border: 40px solid;
    border-radius: 9999px;
    overflow: hidden;
    box-sizing: border-box;
    aspect-ratio: 49/30;
position: relative;
}

.top-main-contents .contents-thmb img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: top;
    max-width: none;
    max-height: none;
    min-width: 101%;
    min-height: 101%;
}

.top-main-contents .contents-thmb a:hover img {}

.top-main-contents .position-relative:after {
content: "";
position: absolute;
width: 28px;
height: 28px;
background-image: url(../images/top/parts_star4.svg);
background-size: contain;
top: 15%;
left: 12%;
}

.top-main-contents .position-relative:hover:after {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.top-main-contents .contents-thmb.contents-eventlive {
border-color: #28C3FF;
}

.top-main-contents .contents-thmb.contents-wallpaper {
border-color: #78E6F0;
}

.top-main-contents .contents-thmb.contents-special {
border-color: #50A0F0;
}

.top-main-contents .contents-thmb.contents-reward {
border-color: #8FA7BF;
}

.top-main-contents .contents-name {
color: #fff;
font-size: 20.9px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}

@media (min-width: 768px) {
.top-main-contents {
margin-top: 40px;
padding-bottom: 60px;
}
.top-main-contents #contents-prev h2:after {
left: 374px;
}
.top-main-contents .contents-thmb {
    border: 60px solid;
}

.top-main-contents .position-relative:after {
width: 42px;
height: 42px;
top: 15%;
left: 12%;
}

.top-main-contents .contents-name {
font-size: 32px;
top: 0;
}

}

@media (min-width: 1281px) {
.top-main-contents {
padding-bottom: 60px;
}

.top-main-contents .contents-main {
justify-content: flex-start;
}

.top-main-contents .contents-frame {
max-width: none;
flex: 0 0 50%;
}
}


/*-----------------------------
  FANCLUB
-----------------------------*/
.top-main-contents #fanclub {
margin-top: 20px;
}

#fanclub p.lead {
/*font-size: 14px;*/
font-size: clamp(0.875rem, 0.277rem + 2.55vw, 1.5rem);
position: relative;
padding-top: 32px;
margin-bottom: 10px;
z-index: 0;
}

#fanclub p.lead::before,
#fanclub p.lead::after {
background-image: url(../images/top/main_parts_zigzag_long.svg);
aspect-ratio: 297 / 16;
max-width: 594px;
width: 111.2%;
background-size: contain;
position: absolute;
z-index: -1;
}

#fanclub p.lead::before {
content: "";
top: 0;
right: 50%;
transform: translateX(50%);
}

#fanclub p.lead::after {
content: none;
}




.top-main-contents #fanclub .fanclub-plan {
background-color: #fff;
position: relative;
margin-top: 70px;
}
.top-main-contents #fanclub .fanclub-plan::before {
position: absolute;
content: "";
background-image: url(../images/bgparts_weve.svg);
background-size: cover;
width: 100%;
aspect-ratio: 187 / 19;
top: 0;
margin-top: calc(-100vw * 0.048);
}

.top-main-contents #fanclub .fanclub-plan::after {
position: absolute;
content: "";
background-image: url(../images/bgparts_weve.svg);
background-size: cover;
width: 100%;
aspect-ratio: 187 / 19;
bottom: 0;
margin-bottom: calc(-100vw * 0.048);
}


.top-main-contents #fanclub details.talent {
margin: 20px auto 0;
border: solid 12px #979392;
padding: 0 18px;
border-radius: 9999px;
transition: height 0.3s, width 0.3s, border 0.3s;
width:276px;
}

.top-main-contents #fanclub details.talent:hover {
border: 12px solid #807b79;
}

.top-main-contents #fanclub details.talent[open] {
width:100%;
border-radius: 32px;
padding-bottom:14px;
background-color: #E4E4E4;
}

.top-main-contents #fanclub details.talent summary {
font-size: 24px;
text-align: center;
list-style: none;
}

summary::-webkit-details-marker,
details summary::-webkit-details-marker,
details summary::marker {
  display: none;
}

.top-main-contents #fanclub details.talent summary span {
position: relative;
}

.top-main-contents #fanclub details.talent summary span:before,
.top-main-contents #fanclub details.talent summary span:after {
position: relative;
display: inline-block;
content: "\e313";
font-family: 'Material Symbols Outlined';
font-weight: 600;
font-style: normal;
line-height: 1;
margin: 0 2.5px;
transition: rotate 0.3s;
top: 4px;
}

.top-main-contents #fanclub details.talent[open] summary span:before,
.top-main-contents #fanclub details.talent[open] summary span:after {
transform: rotate(180deg);
}

.top-main-contents #fanclub details.talent ul.talent-list {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
column-gap: 7px;
row-gap: 7px;
}

.top-main-contents #fanclub details.talent ul.talent-list li {
aspect-ratio: 1/1;
width: calc((100% - 35px) / 6);
border-radius: 9999px;
overflow: hidden;
}


@media screen and (min-width: 768px) {
.top-main-contents #fanclub {
margin-top: 30px;
}

#fanclub p.lead {
font-size: 24px;
margin-bottom: 20px;
}

.top-main-contents #fanclub .fanclub-plan::before {
background-image: url(../images/bgparts_weve_long.svg);
aspect-ratio: 256 / 13;
top: calc(-100vw * 0.0125);
margin-top: calc(-100vw * 0.0125);
}
.top-main-contents #fanclub .fanclub-plan::after {
background-image: url(../images/bgparts_weve_long.svg);
aspect-ratio: 256 / 13;
bottom: calc(-100vw * 0.0125);
margin-bottom: calc(-100vw * 0.0125);
}

.top-main-contents #fanclub details.talent ul.talent-list {
column-gap: 20px;
row-gap: 20px;
}

.top-main-contents #fanclub details.talent ul.talent-list li {
max-width: none;
width: calc((100% - 140px)/8);
}

}


@media (min-width: 1281px) {
#fanclub p.lead {
padding-top: 0;
}

#fanclub p.lead::before {
top: 50%;
transform: translateY(-50%);
right: calc((100vw + 505px) / 2);
}

#fanclub p.lead::after {
content: "";
top: 50%;
transform: translateY(-50%);
/*right: -151px;*/
left: calc((100vw + 505px) / 2);
}

.top-main-contents #fanclub .fanclub-plan {
margin-top: 80px;
}

.top-main-contents #fanclub details.talent ul.talent-list {
column-gap: 18px;
row-gap: 18px;
}
.top-main-contents #fanclub details.talent ul.talent-list li {
width: calc((100% - 216px)  / 13);
}
}






/*-----------------------------
  fadein
-----------------------------*/
.fadein {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}