@charset "utf-8";
/* CSS Document */

#Main {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    background: #ed1e79;
}

.main-kv_logo{ background: #fff; padding: 7% 12%;}

#main-kv_left {
    width: 23%;
    left: 0;
    top: 0;
    max-height: calc(100vh - 10px);
    position: sticky;
}

.main-kv_logo_sp{display: none;}

.main_kv_menu{
    background: url("../image/common/logo_under.png");
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 15% 0;
font-weight: 700;}

.main_kv_image {
    width: 77%;
    margin-left: auto;
    position: relative;
}

.lum-lightbox {
    z-index: 10000;
}

.mainLeftmenu{}
.mainLeftmenu li{font-size: 1.4vw; width: 94%;}
.mainLeftmenu li a{display: block;transition: 0.2s;padding: 0.8vh 0; border-radius: 0 50px 50px 0; padding-left: 15%;position: relative;}
.mainLeftmenu li a:hover{background: #fff; color: #ed1e79;}

.mainLeftmenu li a::before {
  content: "";
    display: inline-block;
    width: 0.8999em;
    height: 0.8999em;
    margin-right: 0.5em;
    background-image: url(../image/common/menuIcon.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.mainLeftmenu li a:hover::before{background-image: url(../image/common/menuIcon_on.png);}

.h2title{width: 86%; max-width: 800px; margin: 0 auto;}

#news{width: 96%; max-width: 1600px; margin: 0 auto;padding: 4% 2%;}
.News-cont-wrap{display: flex; flex-wrap:wrap; justify-content:flex-start; gap:2%; margin: 3% 3% 1% 3%;}
.News-cont{border-radius:8px; border: 1px solid #fff; position: relative;width: 23.3%;background: #fff;overflow: hidden;box-shadow: 0px 2px 10px 6px rgba(135, 219, 213, 0.5);box-sizing: border-box; margin-bottom: 2%;}
.News-cont-txt{padding: 4% 6%; color: #ed1e79; font-size:clamp(13px, 2vw, 16px); font-weight: 600; line-height: 140%;transition: 0.4s;}
.News-cont-date{background: #ed1e79;color: #fff; text-align: right; font-size: 13px; width: 97%; padding-right: 4%;}
.News-cont-img{position: relative;border-bottom: 1px solid #dcdcdc;overflow: hidden;line-height: 0;}

.News-cont a{display: block;height: 100%;}

.News-cont-img img{width: 100%; object-fit: cover;transition: 0.4s;}
.News-cont a:hover .News-cont-img img{transform:scale(1.2);}
.News-cont a:hover .News-cont-txt{color: #fff;}
.News-cont:hover{background:#ed1e79;opacity: 1!important;}
.News-cont a:hover{opacity: 1!important;}


.music-cont-wrap{display: flex; flex-wrap:wrap; justify-content: center; gap:2%; margin: 3% 3%;}
.music-cont{ border: 1px solid #fff; position: relative;width: 23.3%;background: #fff;overflow: hidden;box-shadow: 0px 2px 10px 6px rgba(135, 219, 213, 0.5);box-sizing: border-box;}
.music-cont-txt{padding: 4% 6%; color: #ed1e79; font-size:clamp(13px, 2vw, 16px); font-weight: 600; line-height: 140%;transition: 0.4s;}
.music-cont-img{position: relative;border-bottom: 1px solid #dcdcdc;overflow: hidden;line-height: 0;}

.music-cont-img img{transition: 0.4s;}
.music-cont a:hover .music-cont-img img{transform:scale(1.2);}
.music-cont a:hover .music-cont-txt{color: #fff;}
.music-cont:hover{background:#ed1e79;opacity: 1!important;}
.music-cont a:hover{opacity: 1!important;}


.lum-lightbox-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex!important;
    justify-content: center;
}



.lum-previous-button{display:none;}
.lum-next-button{display:none;}

.soukanzu{width: 40%;margin: 0 auto;position: relative;}

.soukanzu::before {
  content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url(../image/common/zoom.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    right: 0;
    bottom: 0;
    z-index: 1;
}


.btn001{width:70%; max-width: 390px; margin: 0 auto;}
.btn001 a{
    font-size:clamp(14px, 1.5vw, 19px);
    font-weight: 500;
    display: inline-block;
    border: 2px solid;
    position: relative; z-index: 2;
    background: #ed1e79;
    color: #fff;
    overflow: hidden;
    padding: 1rem 1.3rem;
    transition: all .3s;
    border-radius: 50px;
text-align: center;
box-sizing: border-box;
width: 100%;
transition: .3s;}

.btn001 a:hover{background: #fff;
    color: #ed1e79;}

.btn001 a:hover:before {border-top: solid 2px #ed1e79;
    border-right: solid 2px #ed1e79;}

.btn001 a:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    width: 7px;
    height: 7px;
   right: 1.5rem;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    z-index: 2;
    transform: translateY(-50%) rotate(45deg);
    transition: all .3s;
}



#anime{position: relative;width: 100%; margin: 0 auto;padding:0;}
.anime_top{
    position: relative;
    background: url(../image/anime_bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 7% 0;
    margin-top: -2%;
z-index: 3;}
.anime_bottom{
    position: relative;
    background: url(../image/anime_bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 10% 0;
    margin-top: -8%;
    z-index: 3;}
.anime_about{position: relative;margin-top: -8%; padding: 10% 4%;}
.movieWrap{overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;}
.movie_over{background: rgba(238,207,221,0.85); width: 100%; height: 100%;position: absolute;top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;z-index: -1;}

.videoWrap{
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: -2;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;}

.videoWrap video{
    width: 130%;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;}

.video-sp{display: none!important;}

.anime_about p{text-align: center; font-size:clamp(13.6px, 1.4vw, 20px); color: #fff; font-weight: 600;position: relative; z-index: 2;
    text-shadow:rgb(237, 30, 121) 2px 2px 3px, rgb(237, 30, 121) -2px 2px 3px, rgb(237, 30, 121) -2px -2px 3px, rgb(237, 30, 121) 2px -2px 3px, rgb(237, 30, 121) -2px 2px 3px, rgb(237, 30, 121) 1px -3px 7px, rgb(237, 30, 121) 3px 4px 5px; line-height: 165%;}
.anime_about p .PY{ color: #fff000; font-size: 135%;}

.p_mg30{margin-bottom: 50px;}
.p_mg50{margin-bottom: 50px;}


.about_txt{width: 100%; max-width: 1100px; margin: 0 auto; position: relative;}
.mini_chara01{position: absolute;
    background: url("../image/minichara01.png") no-repeat;
    background-size: contain;
    padding: 8.5% 6%;
    right: 7%;
    bottom: -28%;
    z-index: 4;
animation: fluffy 3s infinite;}
.mini_chara02{position: absolute;
    background: url("../image/minichara02.png") no-repeat;
    background-size: contain;
        padding: 8% 6%;
    right: 6%;
    top: 10%;
    z-index: 4;
animation: fluffy2 3s infinite;}
.mini_chara03{position: absolute;
    background: url("../image/minichara03.png") no-repeat;
    background-size: contain;
    padding: 8% 6%;
   left: 10%;
    top: -10%;
    z-index: 4;
animation: fluffy 3s infinite;}
.mini_chara04{position: absolute;
    background: url("../image/minichara04.png") no-repeat;
    background-size: contain;
    padding: 8.5% 6%;
    left: 7%;
    bottom: -28%;
    z-index: 4;
animation: fluffy2 3s infinite;}
.mini_chara05{position: absolute;
    background: url("../image/minichara05.png") no-repeat;
    background-size: contain;
    padding: 7.5% 5%;
    left: 5%;
    top: 30%;
    z-index: 4;
animation: fluffy 3s infinite;}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fluffy2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

#comics{width: 96%; max-width: 1600px; margin: 0 auto;padding: 4% 2%;}
#character{margin: 0 auto;padding: 5% 0;}
#music{width: 96%; max-width: 1600px; margin: 0 auto;padding: 2% 0 5% 0;}
#products{width: 100%; margin: 0 auto;padding: 4% 0%; overflow: hidden;}
#events{width: 96%; max-width: 1600px; margin: 0 auto;padding: 4% 2% 8% 2%;}

.bnrs{max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2%;
    margin: 3% auto;}
.bnrs li{border: 1px solid #fff; position: relative;width: 48.5%;background: #fff;box-shadow: 0px 2px 10px 6px rgba(135, 219, 213, 0.5);box-sizing: border-box;}

.Slide{margin: 2% auto;}
.topSlideWrap01 {
    background: #fff;
    height: 470px;
    overflow: hidden;
    padding: 30px 0 8px 0;
}

.topSlide01 {
    width: 960px;
    margin: 0 auto;
}

.topSlide01 .slick-slide {
    opacity: 0.4;
}

.topSlide01 .slick-current.slick-active {
    opacity: 1;
}

.topSlide01 .slick-prev:before,
.topSlide01 .slick-next:before {
	content: none !important;
}

.topSlide01 .slick-next{
	width: 44px !important;
    height: 252px !important;
	background:url("../image/common/arrow_right.png") center center no-repeat;
	background-size:100%;
}

.topSlide01 .slick-prev{
	width: 44px !important;
    height: 252px !important;
	background:url("../image/common/arrow_left.png") center center no-repeat;
	background-size:100%;
	z-index:10 !important;
}

.topSlide01 .slick-dots li button:before{
	width:25px !important;
	height:5px !important;
	background:#fff;
}

@media screen and (max-width: 768px) {
    
    .lum-lightbox-image-wrapper {
    display: table-cell!important;
}
    
    .soukanzu{width: 65%;margin: 0 auto;position: relative;}
    
    #events{padding: 4% 2% 18% 2%;}
    
    .main_kv_image {width: 100%;}
    #main-kv_left{display: none;}
    
    .anime_about video {width: 190vw;}
    .video-sp{display: flex!important;}
    .video-pc{display: none!important;}
    
    .main_kvcover{position: relative;}
    .main_kvcover::before{
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        padding-bottom: 13vw;
        background-image: url(../image/common/logo_top_sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
        z-index: 2;}
    
    .main-kv_logo_sp{display:block;background: #fff; padding: 5% 18%;}
    
    .News-cont-wrap{margin: 5% 3%; gap:3%;}
    .News-cont {width: 48%; margin-bottom: 3%;}
    .News-cont-date{font-size: 11px;}
    .News-cont-img img {}
    
    .music-cont-wrap{margin: 5% 3%; gap:3%;}
    .music-cont {width: 48%; margin-bottom: 3%;}
    
    #news {padding: 9% 2%;}
    
    #anime {padding: 0 0 2% 0;}
    .anime_about {
    margin-top: -8%;
    padding: 17% 4%;}
    .anime_top{
    background: url(../image/anime_bg2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 12% 0;
    margin-top: -2%;
z-index: 3;}
.anime_bottom{
    background: url(../image/anime_bg2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 19% 0;
    margin-top: -8%;
    z-index: 3;}
    .mini_chara01 {
    right: 7%;
    bottom: -14%;}
    .mini_chara02 {
    right: 1%;
    top: 30%;}
    .mini_chara03 {
    left: 2%;
    top: -11%;}
    .mini_chara04 {
    left: 7%;
    bottom: -12%;}
    .mini_chara05 {
    left: 3%;
    top: 33%;}
    
    .bnrs{width: 92%;margin: 5% auto;}
    .Slide{margin: 4% auto;}
    
        .topSlideWrap01 {
        height: 50vw;
    }
        .topSlide01 {
        width: auto;
        margin: 0 auto;
    }
    
    .topSlide01 .slick-prev,
	.topSlide01 .slick-next{
		display:none;
	}
}