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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');


body::before {
    width: 100%;
    height: 100vh;
    background:  url("../images/music_parade/main_background.jpg") no-repeat;
    background-position: center bottom;
    background-size: cover;
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    }


/*body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    }

body.fixed-ios {position: relative!important;}*/


body{
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    }

img{max-width: 100%;}
p,li{font-size: 1em; line-height: 1.6em; letter-spacing: 1px; color: #FFF;}
a{outline: none; text-decoration: none;}
.bold{font-weight: bold;}

main :hover,footer :hover{
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all  0.8s ease;
	}

@media only screen and (max-width: 480px) {p,li{font-size: 0.9em;}}


/*---------loader---------*/
.loader-wrap{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #000;
    background: -webkit-linear-gradient(top,  rgba(42,53,64,1) 0%,rgba(56,42,64,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(42,53,64,1) 0%,rgba(56,42,64,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }

.loader {
    width: 1em;
    height: 1em;
    color: #FFF;
    font-size: 15px;
    margin: 100px auto;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load 1.3s infinite linear;
    animation: load 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    }

@-webkit-keyframes load {
    0%,100% {box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;}
    12.5% {box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;}
    25% {box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;}
    37.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;}
    50% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;}
    62.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;}
    75% {box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;}
    87.5% {box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;}
    }

@keyframes load {
    0%,100% {box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;}
    12.5% {box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;}
    25% {box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;}
    37.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;}
    50% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;}
    62.5% {box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;}
    75% {box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;}
    87.5% {box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;}
    }


/*----------header------------*/
header{
    width: 100%;
	background: url("../images/music_parade/gradation_background.jpg");
	position: fixed;
	z-index: 999;
    }

header > div{margin-bottom: 1px; background: #000;}
header ul{margin: 0; padding: 0; background: #000;}
header ul,header li{list-style: none;}

#nav {
    width: 100%;
	max-width: 880px;
	margin-left: auto;
	margin-right: 2.5%;
	}

#nav > a {display: none;}
#nav li {position: relative;}
#nav li a {
	color: #FFF;
	display: block;
	}

#nav > ul {
	display: flex;
	align-items: center;
	}

#nav > ul > li {flex: 0 1 16.6%;}

#nav > ul > li > a {
	padding: 1em 0.35em;
	font-size: 1.0em;
	text-align: center;
	}

#nav > ul > li > a:hover{
    background: url("../images/music_parade/navi_on.png") no-repeat center;
    background-size: 50%;
    }

    /*#nav > ul > li:nth-child(4) > a:hover{background: none; cursor: default;}*/


#nav > ul > li > a > span{
	width: auto;
	height: 0;
	padding-top: 30px;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
	background-position: center;
	}

	li.menu01 span{background-image: url("../images/music_parade/app_title.png");}
	li.menu02 span{background-image: url("../images/music_parade/world_title.png");}
	li.menu03 span{background-image: url("../images/music_parade/music_title.png");}
	li.menu04 span{background-image: url("../images/music_parade/navi_special.png");}
	li.menu05 span{background-image: url("../images/music_parade/navi_news.png");}
	li.menu06 span{background-image: url("../images/music_parade/navi_top.png");}

	li.menu01 a:hover span{background-image: url("../images/music_parade/navi_app_on.png");}
	li.menu02 a:hover span{background-image: url("../images/music_parade/navi_world_on.png");}
	li.menu03 a:hover span{background-image: url("../images/music_parade/navi_music_on.png");}
	li.menu04 a:hover span{background-image: url("../images/music_parade/navi_special_on.png");}
	li.menu05 a:hover span{background-image: url("../images/music_parade/navi_news_on.png");}
	li.menu06 a:hover span{background-image: url("../images/music_parade/navi_top_on.png");}

    #nav li:last-child{display: none;}



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

header{background: none;}
header > div{margin-bottom: 0; background: none;}
	
#nav > a {
	width: 3.125em;
	height: 3.125em;
    margin: 10px 10px 0 auto;
	text-align: left;
	text-indent: -9999px;
    background-image: url("../images/music_parade/navi_sp_bg.png");
	position: relative;
	z-index: 999;
    border-radius: 10px;
	}
	
#nav > a:before, #nav > a:after {
	position: absolute;
	border: 2px solid #fff;
	top: 35%;
	left: 25%;
	right: 25%;
	content: '';
	}
	
#nav > a:after {top: 60%;}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
	

#nav > ul {
	margin-top: -4.125em;
	padding-top: 4.125em;
	height: 100vh;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	background: #000;
	}
	
#nav:target > ul {display: block;}

#nav > ul > li {width: 100%;}
	
#nav > ul > li > a {
	padding: 0.75em;
	height: auto;
	font-size: 1.1em;
	line-height: 1.8em;
	text-align: center;
	}
    
#nav > ul > li > a:hover{background-size: 65px;}
#nav > ul > li:last-child > a:hover{background: none;}

#nav li:last-child{
    margin-top: 2em;
    padding-top: 2em;
    display: block;
    background: url("../images/music_parade/title_underline.png") no-repeat top;
    background-size: contain;
    }

#nav li:last-child img{max-width: 80%;}
}

@media only screen and (max-width: 480px) {#nav li:last-child img{max-width: 100%;}}



/*----------main------------*/
main{padding: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0) 100%);}
#WorldContainer main,#MusicContainer main,#SpecialContainer main,#NewsLog main{padding-top: 8%;}


div.contents,.HA_lead{width: 92%; max-width: 1480px; margin: auto; padding: 0 4%;}
.anniversary div.contents{width: 92%; max-width: 1200px; margin: auto; padding: 0 4%;}

div.contents section,.HA_lead{
    padding-top: 4.8%;
    background: url("../images/music_parade/title_background.png") no-repeat;
    background-position: top center;
    background-size: 65%;
    }
    section.dlLink,section.entryPresent,section#NewsArea,section#SPEC,section#shareBox,#CP_Container section:first-child,#E_Container section:first-child,#common section{background: none!important;}
    #CP_Container section:first-child,#E_Container section:first-child{padding-top: 14%;}
    .princess section:first-child{padding-top: 7%!important;}
    .HA_lead{background: none!important;}
    .anniversary section:first-child{padding-top: 7%!important;}
    .fes2021 section:first-child{padding-top: 0!important;}
    #NewsLog section:first-child{padding-bottom: 10%;}


.colorFrame{
    padding: 2px;
    border-radius: 15px;
    background: url("../images/music_parade/gradation_background.jpg") no-repeat;
    background-size: cover;
    }

    .HA .colorFrame{
        padding: 3px;
        border-radius: 0;
        background: url("../images/music_parade/gradation_background02.jpg") no-repeat;
        background-size: cover;
        }

.colorFrame article{
    padding: 1em 2em;
    height: 95.25%;
    border-radius: 15px;
    box-shadow: 0px 0px 10px 4px #374e89 inset;
    background-image: url("../images/music_parade/world_popup_bg.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-color: #000;
    }
    
    .NEWS article{background-size: contain;}
    .SS article{padding: 1em!important;}
    .entryLink .colorFrame article,.dlLink .colorFrame article{background-size: cover!important;}
    #CP_Container .colorFrame article{background-size: contain;}
    .HA .colorFrame article{border-radius: 0; box-shadow: none; background-image: none;}

    div.game_video{max-width: 314px;}
    .game_video article{max-width: 310px; padding: 1em;}

@media only screen and (max-width: 860px) {
    div.contents section{padding-top: 5.6%; background-size: 86%;}
    .colorFrame article{padding: 1em;}
    .HA_lead{background-size: 90%; padding-top: 7.2%;}
    .anniversary section:first-child{padding-top: 10%!important;}
    .fes2021 section:first-child{padding-top: 0!important;}
    }
@media only screen and (max-width: 480px) {
    div.contents section{background-size: contain;}
    .SS article{padding: 0.5em 0.5em 0.3em!important;}
    }


/*mainVisual*/
.mainVisual{
    margin-bottom: 10%;
    padding: 10% 0 18%;
    background-image: url("../images/music_parade/mainvisual.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    }

.mainVisual > div{width: 50%; margin: 0; padding: 2.5% 0;}
.anniversary .mainVisual{margin-bottom: 0!important;}

.announcement .mainVisual{padding: 12% 0 18%;}
.announcement .mainVisual > div{width: 50%; margin: 0; padding: 0;}


h1{
	width: auto;
    margin: 0 0 5%;
	height: 0;
	padding-top: 30%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
    background-image: url("../images/music_parade/music_parade_logo.png");
	background-position: center;
    }

    #CP_Container h1{margin: 0 0 10%; padding-top: 20%;}
    .anniversary h1{margin: 0 0 5%!important; padding-top: 30%!important;}
    #E_Container h1{margin: 0 0 5%; padding-top: 20%;}

h1 + p{
	width: auto;
    margin: 0;
	height: 0;
	padding-top: 11.5%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
    background-image: url("../images/music_parade/mainvisual_release_20210122.png");
	background-position: center;
    }

/*.date{background-image: url("../images/music_parade/mainvisual_release_20210119.png");}*/

.mainVisual section{width: 50%; margin: 1.5% auto 0; display: flex; justify-content: center;}
.mainVisual section p{flex: 0 1 auto; margin: 0.5em;}

section.noticeLink{width: 76%!important; padding-top: 1.5em; display: block!important;}
section.noticeLink p{text-align: center;}

h1 + p.date{background-image: url("../images/music_parade/mainvisual_release_20210119.png");}

.catch{
    width: auto;
    margin: 0 0 3%;
	height: 0;
	padding-top: 6.5%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
    background-image: url("../images/music_parade/mainvisual_copy.png");
	background-position: center;
    }

@media only screen and (max-width: 860px) {
    .mainVisual{background-size: contain;}
    .mainVisual > div{width: 45%; padding: 2.5% 0 0;}
    .announcement .mainVisual{padding: 4% 0 10%;}
    h1 + p{padding-top: 16%;}
    h1{padding-top: 35%; margin: 0 0 3.5%;}
    .catch{padding-top: 8.5%;}
    .mainVisual section{width: 65%;}
    section.noticeLink{padding-top: 0;}
    }

@media only screen and (max-width: 580px) {
    .mainVisual,.announcement .mainVisual{
        margin-bottom: 20%;
        padding: 135% 0 0;
        background-image: url("../images/music_parade/mainvisual_sp.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top center;
        }
    
    .mainVisual > div{width: 96%; margin: 0 auto; padding: 0;}
    .announcement .mainVisual > div{width: 96%; margin: 0 auto; padding: 0;}
    section.noticeLink{}
    
    
}


/*title*/
div.contents h2{
	width: auto;
    margin: 0;
	height: 0;
	padding-top: 4.6%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
	background-position: center;
    }

	#CBT h2{margin-top: -1.25em; padding-top: 9%; background-image: url("../images/music_parade/cbt_title.png");}
	.entryLink h2{background-image: url("../images/music_parade/entry_title.png");}
	.entryPresent h2{padding-top: 6.5%!important; background-image: url("../images/music_parade/entry_presents_title.png");}
	#App h2{background-image: url("../images/music_parade/app_title.png");}
	#World h2{background-image: url("../images/music_parade/world_title.png");}
	#Music h2{background-image: url("../images/music_parade/music_title.png");}
	#Special h2.movie{background-image: url("../images/music_parade/special_movie_title.png");}
	#Special .wp h2{background-image: url("../images/music_parade/special_wallpaper_title.png");}
	#NewsLog section:first-child h2{background-image: url("../images/music_parade/news_title.png");}

	#World h2 + p,#Music h2 + p,.wp h2 + p,.anniversary h2 + p{text-align: center;}



@media only screen and (max-width: 860px) {div.contents h2{padding-top: 7.6%;} #CBT h2{padding-top: 12%;} .entryPresent h2{padding-top: 10%!important;}}
@media only screen and (max-width: 480px) {div.contents h2{padding-top: 10%;} #CBT h2{margin-top: -0.85em; padding-top: 18%;} .entryPresent h2{padding-top: 14%!important;}}


/*cbt_entry*/
#CBT{padding-bottom: 12%;}
.cbt_link{text-align: center;}
.cbt_link a:hover img{opacity: 0.7;}

@media only screen and (max-width: 480px) {.cbt_link{width: 50%; margin: 1em auto 0;}}


/*entry_download*/
.entryLink{padding-bottom: 3%;}
.dlLink{padding-top: 0!important; padding-bottom: 3%;}
.bottom{padding-bottom: 10%!important;}

.entryLink .colorFrame,.dlLink .colorFrame{max-width: 840px; margin: 2em auto 0;}
.entryLink article,.dlLink article{padding-bottom: 1.25em;}

.entryLink h3{
	width: auto!important;
    margin: 1em 0!important;
	height: 0!important;
    padding: 21px 0 0 0!important;
	background-repeat: no-repeat!important;
	background-size: contain!important;
    background-position: center!important;
	overflow: hidden!important;
	display: block!important;
    background-image: url("../images/music_parade/entry_link_title.png")!important;
    }

.dlLink h3{
	width: auto!important;
    margin: 1em 0!important;
	height: 0!important;
    padding: 21px 0 0 0!important;
	background-repeat: no-repeat!important;
	background-size: contain!important;
    background-position: center!important;
	overflow: hidden!important;
	display: block!important;
    background-image: url("../images/music_parade/download_link_title.png")!important;
    }


.entryLink a:hover img,.dlLink a:hover img{opacity: 0.7;}

.dlLink h3 + div{background: url( "../images/music_parade/world_title_underline.png") no-repeat top center; background-size: 100% 2px;}

.storelink{display: flex; flex-wrap: wrap; padding-top: 1.5em;}
.storelink p{flex: 0 1 32%; margin: 0 auto; padding-bottom: 0.5em;}
.storelink p:first-child{flex: 0 1 44%; margin: 0 auto; text-align: right;}
.storelink p:nth-child(2){flex: 0 1 52%; margin: 0 auto;}



/*.storelink p:nth-child(3),.storelink p:nth-child(5){opacity: 0.3;}
.storelink p:nth-child(3):hover img,.storelink p:nth-child(5):hover img{opacity: 1!important;}*/


.entryPresent{padding-bottom: 12%;}
.entryPresent article{
    max-width: 1280px;
    margin: 1em auto 2em;
    padding-top: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: url("../images/music_parade/world_title_underline.png") no-repeat;
    background-position: top center;
    background-size: 60% 2px;
    }
.entryPresent article p{flex: 0 1 48%; margin: 0 auto;}

.entryPresent .LinkButton{max-width: 1240px; margin: auto;}

@media only screen and (max-width: 860px) {.entryPresent{padding: 5% 0 12%;} .entryPresent article{background-size: 80% 2px;}}
@media only screen and (max-width: 480px) {
    .entryLink{padding-bottom: 8%;}
    .entryPresent article{display: block; background-size: 90% 1px;}
    .entryPresent article p{margin: 0 auto 0.5em;}
    }


/*App*/
.point_01,.point_02,.point_03,.point_04,.SS{margin: 8% 0; display: flex; align-items: center;}
.point_01 div,.point_02 div,.point_03 div,.point_04 div,.SS p{flex: 0 1 48%; margin: auto;}
.point_02 div:first-child,.point_04 div:first-child{order: 2;}
.point_02 div:last-child,.point_04 div:first-child{order: 1;}

.point_01 h3,.point_02 h3,.point_03 h3,.point_04 h3{
	width: auto;
    margin: 0 0 1.5em;
	height: 0;
	background-repeat: no-repeat;
	background-size: contain!important;
    background-position: left center;
	overflow: hidden;
	display: block;
    }

    .point_01 h3,.point_02 h3{padding-top: 26%;}
    .point_03 h3,.point_04 h3{padding-top: 16%;}

	.point_01 h3{background-image: url("../images/music_parade/app_attraction_title.png");}
	.point_02 h3{background-image: url("../images/music_parade/app_musicride_title.png");}
	.point_03 h3{background-image: url("../images/music_parade/app_stage_title.png");}
	.point_04 h3{background-image: url("../images/music_parade/app_partymode_title.png");}

#App h3 + p{padding-top: 1.5em; border-top: solid 1.5px #ffe96a;}

@media only screen and (max-width: 860px) {
    .point_01{width: 86%; padding: 1em 0 3em; margin: auto; display: block;}
    .point_02,.point_03,.point_04{width: 86%; margin: auto; padding: 2em 0; display: block;}
    .point_01 div,.point_02 div,.point_03 div,.point_04 div{margin: 1em auto 0;}
    }
@media only screen and (max-width: 480px) {.point_01,.point_02,.point_03,.point_04{width: 92%;}}


/*Twitter_NEWS*/
#NewsArea .colorFrame article{height: 94%;}

#NewsArea{display: flex; padding-bottom: 12.5%;}
#NewsArea div{flex: 0 1 48%; margin: 0 auto;}

#NewsArea h2{
    width: auto;
    margin: 0.5em 0;
	height: 0;
    padding-top: 9%;
	background-repeat: no-repeat;
	background-size: contain!important;
    background-position: center;
	overflow: hidden;
	display: block;
    }

	.Twitter h2{background-image: url("../images/music_parade/twitter_title.png");}
	.NEWS h2{background-image: url("../images/music_parade/news_title.png");}

#NewsArea h2 + div{background: url( "../images/music_parade/world_title_underline.png") no-repeat top center; background-size: 100% 2px;}
    .Twitter div{padding-top: 1em;}
    .NEWS div{padding-top: 2em;}

#NewsArea .NEWS ul{height: 315px; padding: 0 1em; overflow-y: scroll;}
.NEWS ul{margin: 0; padding: 0;}
.NEWS li{margin: 0; padding: 0; list-style: none; border-bottom: dotted 3px #FFF;}
.NEWS ul p{margin: 0;}
.NEWS ul p:first-child{margin: 0 0 0.5em;}

.NEWS a{padding: 1.25em 1.5em; display: block;}
.NEWS a:hover{background: rgba(5,0,180,0.2);}

#NewsLog .NEWS{max-width: 1140px; margin: 2em auto;}


.LinkButton{}
.LinkButton a{
    padding: 0.5em;
    border: solid 2px #FFF;
    border-radius: 20px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    display: block;
    }
.LinkButton a:hover{color: #000; background: #FFF;}

/*newslog*/
#NewsLog .LinkButton{max-width: 420px; margin: auto;}

/*campaign*/
.cp_detail .LinkButton{max-width: 600px; margin: 2em 0 0;}
.cp_detail .LinkButton a{color: #FFF!important;}
.cp_detail .LinkButton a:hover{color: #2861c1!important;}


@media only screen and (max-width: 860px) {#NewsArea h2{padding-top: 16%;}}
@media only screen and (max-width: 480px) {#NewsArea{display: block;} #NewsArea > div{width: 90%; margin: 0 auto 2em;} #NewsArea h2{padding-top: 13%;}}



/*SNS*/
#shareBox {
	width: 100%;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
        top: 0;
		bottom: 0;
		left: calc(47.5% - 75px);
		display: flex;
		justify-content: space-between;
		width: 240px;
		height: auto;
		margin: 0px auto;
		padding: 0 0 35px;
		clear: none;
		z-index: 888;
		}

	.shareButtons > div> a {
		display: block;
		width: 45px;
		height: 45px;
        margin: 0 1em;
		background-size: contain;
		background: no-repeat top center;
		}

	.shareButtons>div.fbBtn a {background-image: url("../images/sns_ico_01_fb.svg");}
	.shareButtons>div.tweetBtn a {background-image: url("../images/sns_ico_02_tw.svg");}
	.shareButtons>div.lineBtn a {background-image: url("../images/sns_ico_03_line.svg");}

@media only screen and (max-width: 860px) {#shareBox {margin: 12.5% 0;} .shareButtons {left: calc(44% - 75px);}}
@media only screen and (max-width: 480px) {#shareBox {margin: 16.5% 0;} .shareButtons {left: calc(39% - 75px);}}


/*SPEC*/
#SPEC ul{margin: 5% 0 15% 15%; padding: 0; display: flex; flex-wrap: wrap;}
#SPEC li{
    flex: 0 1 30%;
    margin: 0;
    padding: 20px 0 20px 170px;
    list-style: none;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 156px 40px;
    }

#SPEC li.Genre{background-image: url("../images/music_parade/spec_genre.png");}
#SPEC li.Price{background-image: url("../images/music_parade/spec_price.png");}
#SPEC li.OS{background-image: url("../images/music_parade/spec_os.png");}
#SPEC li.Release{background-image: url("../images/music_parade/spec_release.png");}

#SPEC p{text-align: center; font-size: 0.8em;}


@media only screen and (max-width: 1200px) {#SPEC ul{margin: 5% 0 15% 5%;}}
@media only screen and (max-width: 1000px) {#SPEC ul{width: 60%; margin: 5% auto 15%; display: block;}}
@media only screen and (max-width: 860px) {#SPEC ul{width: 70%;}}
@media only screen and (max-width: 480px) {#SPEC ul{width: 100%; margin: 5% auto 30%;}}



/*WORLD*/
.WorldList{padding: 5% 0 10%;}
.WorldList,.worldDetail,.world_inner{display: flex; flex-wrap: wrap;}
.WorldList > article{flex: 0 1 48%; margin: 0.5em 1%;}

.worldDetail > div,.world_inner > div{flex: 0 1 48%; margin: 0 1%;}


@media only screen and (max-width: 860px) {.worldDetail{display: block;} .worldDetail > div:first-child{margin: 0 1% 3em;}}
@media only screen and (max-width: 600px) {.WorldList{display: block;}}

@media only screen and (max-width: 860px) {.popup_wrap .colorFrame article{height: 83vh!important; overflow-y: scroll;}}
@media only screen and (max-width: 380px) {.popup_wrap .colorFrame article{height: 81vh!important;}}
@media only screen and (max-height: 950px) {.popup_wrap .colorFrame article{height: 88vh; overflow-y: auto;}}



/*WORLD_Pop up*/
.popup_wrap input {display: none; -webkit-overflow-scrolling: touch;}

.popup_overlay {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background: #000;
	/*background: rgba(0, 0, 0, 0.7);*/
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
	}

.popup_trigger {width: 100%; height: 100%; position: absolute;}

.popup_content {
	width: 90%;
	max-width: 1280px;
	padding: 3% 0;
	position: fixed;
	align-self: top center;
	box-sizing: border-box;
	line-height: 1.4em;
	transition: 0.5s;
    }

.popup_content h3{
    padding: 0.5em 1em 1.5em;
    background-image: url("../images/music_parade/world_title_underline.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    }

.worldDetail h4{
    width: auto;
    margin: 1em 0 1em 2%;
	height: 0;
    padding-top: 25px;
	background-repeat: no-repeat;
	background-size: contain!important;
    background-position: left center;
    overflow: hidden;
	display: block;
    }

    .worldDetail div:first-child h4{background-image: url("../images/music_parade/world_music_title.png");}
    .worldDetail div:last-child h4{background-image: url("../images/music_parade/world_musicride_title.png");}

.worldDetail h5{margin: 0; padding: 0;}

.worldDetail div p{margin: 0;}
.musicTXT{padding-top: 0.5em; font-size: 0.8em; border-top: solid 1px #744665;}
.musicLink{text-align: center;}
.musicLink img:hover{opacity: 0.7;}

.close_btn {
	position: absolute;
    padding-top: 10px;
    right: 10px;
	cursor: pointer;
	}

.popup_wrap input:checked ~ .popup_overlay {opacity: 1; transform: scale(1); transition: opacity 0.5s;}


@media only screen and (max-width: 860px) {.popup_content h3{margin-bottom: 2em;}}
@media only screen and (max-width: 480px) {
    .popup_content h3{margin: 0.25em 0 1.25em; padding: 0.5em 1em 1em 0.25em;}
    .popup_content h3 img{width: auto; height: 26px;}
    .worldDetail h4{padding-top: 20px;}
    .close_btn {width: 45px;}
    .musicLink{max-width: 220px; margin: 3em auto 2em;}
    }


/*Pop up Button*/
.open_btn{
    width: 90%;
    padding: 2em 5%;
    margin-bottom: 1em;
    border: solid 2px #453e94;
    border-radius: 15px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
    background: #000;
    cursor: pointer;
    background-image: url("../images/music_parade/overlay.png"),url("../images/music_parade/world_popup_bg.jpg");
    background-position: bottom center, top center;
    background-size: cover;
    background-repeat: no-repeat;
	}

@media only screen and (max-width: 860px) {.open_btn img{width: auto; height: 30px;} .kana_w img{width: auto; height: 27px!important;}}
@media only screen and (max-width: 600px) {
    .open_btn img{width: auto; height: 24px;}
    .open_btn{padding: 1.25em 5% 1em;}
    .kana_w img{width: auto; height: 22px!important;}
    }



/*MUSIC*/
#Music{padding-bottom: 5%;}
#Music h2 + p{padding-bottom: 3em;}

#MusicContainer h3{
    padding: 1.3em 1em 1em;
    text-align: center;
    background-image: url("../images/music_parade/world_title_underline.png"), url("../images/music_parade/world_title_underline.png"), url("../images/music_parade/overlay.png"),url("../images/music_parade/world_popup_bg.jpg");
    background-position: top center,bottom center,bottom center,top center;
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px, contain, cover;
    }

    .music_list h3 img{width: auto; height: 26px;}
    .kana h3 img{width: auto; height: 24px!important;}
    .kana_s h3 img{width: auto; height: 22px!important;}
    .kana_l h3 img{width: auto; height: 32px!important;}
    .kana_2 h3 img{width: auto; height: 24px!important;}


.music_list{max-width: 1100px; margin: auto; padding-bottom: 4em; display: flex;}
.music_list div{flex: 0 1 48%; margin: 0 1%;}


.music_list ul{margin: 1em; padding: 0;}
.music_list li{
    margin-bottom: 1.5em;
    padding-left: 2em;
    list-style-type: none;
    font-weight: bold;
    background-image: url("../images/music_parade/music_listmark.png");
    background-repeat: no-repeat;
    background-position: left top 2px;
    background-size: 20px auto;
    }

div.m_New{
    width: auto;
    margin: 0 0 0 0.25em;
	height: 0;
    padding-top: 17px;
	background-repeat: no-repeat;
	background-size: contain!important;
    background-position: left center;
    overflow: hidden;
	display: inline-block;
    background-image: url("../images/music_parade/special_movie_new.png");
    }

h3 > div.m_New{margin: 0 0.5em 2px 0; padding-top: 20px;}
.open_btn > div.m_New{width: 56px; margin: 0 1em 0 0; padding-top: 35px;}
.kana_l div.m_New{margin: 0 0.5em 5px 0; padding-top: 20px;}

@media only screen and (max-width: 860px) {.open_btn > div.m_New{width: 50px; padding-top: 26px;}}
@media only screen and (max-width: 480px) {#MusicContainer h3{margin-bottom: 1.5em;} .music_list{display: block;} .kana_2 h3 img{width: auto; height: 22px!important;}}


/*SPECIAL*/
#Special h4{
    margin: 0.5em 0 0;
    padding: 0;
    font-size: 0.9em;
    color: #FFF;
    font-weight: normal;
    text-align: right;
    }

p.New{
    width: auto;
    margin: 0 0 0.5em;
	height: 0;
    padding-top: 23px;
	background-repeat: no-repeat;
	background-size: contain!important;
    background-position: left center;
    overflow: hidden;
	display: block;
    background-image: url("../images/music_parade/special_movie_new.png");
    }

.pv{
	width:100% !important;
	margin: 0 !important;
	padding-bottom:56.25%;
	position:relative;
	}

.pv iframe{
	width:100%;
	height:100%;
	top:0;
	right:0;
	position:absolute;
	}

.pv + h4{font-size: 0.8em;}


h2.movie + div{width: 100%; max-width: 900px; margin: 1em auto 0; padding-bottom: 3em;}
.pv_log{display: flex; flex-wrap: wrap;}
.pv_log div{flex: 0 1 31%; margin: auto 1% 1em;}

.wp .colorFrame{max-width: 1280px; margin: 2em auto auto;}
.download{display: flex; flex-wrap: wrap; }
.download div{flex: 0 1 48%; margin: auto 1%; padding: 1em 0;}


@media only screen and (max-width: 860px) {
    p.New{padding-top: 19px;}
    #Special h4{font-size: 0.8em;}
    .pv_log .pv + h4{text-align: left!important;}
    .pv_log div{flex: 0 1 48%;}
    .download .musicLink{width: 200px; margin: auto;}
    }

@media only screen and (max-width: 480px) {p.New{padding-top: 16px;} .download{display: block;}}


/*CAMPAIGN Entry*/
.mainImage{padding: 0.5em 0 1em; text-align: center;}

.cp,.entry_notes{max-width: 1280px; margin: auto auto 7em;}
.cp_detail{padding: 2em 2em 3em!important;}

.cp_detail h2{
    height: auto!important;
    margin: 0.5em 0 1.5em!important;
    padding: 1.2em 1em!important;
    display: block!important;
    font-size: 1.1em!important;
    line-height: 1.6em!important;
    text-align: center;
    background-image: url("../images/music_parade/world_title_underline.png"),url("../images/music_parade/world_title_underline.png"),url("../images/music_parade/overlay.png");
    background-repeat: no-repeat;
    background-position: top center,bottom center,bottom center!important;
    background-size: 100% 1px,100% 1px,cover;
    background-color: rgba(0,0,0,0.2);
    }

    .cp_detail h2 br{display: none;}
    .princess h2{margin: 10% 0 1.5em!important;}
    .princess h2.top{margin: 0.5em 0 1.5em!important;}

.entry_notes h2{
    height: auto!important;
    margin: 0 0 1.5em!important;
    padding: 0.35em 0.5em!important;
    display: block!important;
    font-size: 1.1em!important;
    line-height: 1.6em!important;
    text-align: center;
    color: #FFF;
    border-radius: 30px;
    background-color: #2861c1;
    }

.cp_detail h3,.entry_notes h3{
    margin: 0;
    padding: 3em 0.5em 0.5em;
    font-size: 1.1em;
    border-bottom: dotted 3px #2861c1;
    }

    .princess h2 + h3{padding: 0 0.5em 0.5em;}


.cp_detail h4,.entry_notes h4{margin: 3em 0.5em 1em; padding-left: 0.5em; border-left: solid 8px #2861c1;}
.cp_detail h3 + h4,.entry_notes h3 + h4{margin: 1.5em 0.5em 1em;}
.cp_detail h2,.cp_detail h3,.cp_detail h4,.entry_notes h2,.entry_notes h3,.entry_notes h4{color: #FFF;}
.cp_detail h5{margin: 0.25em; padding: 0 0 0.5em; text-align: center; color: #FFF; border-bottom: solid 1px #7e77c9;}

.cp_detail p,.entry_notes p{margin: 0.5em 0.5em 0;}

.cp_detail ul,.entry_notes ul{margin: 0; padding: 0 1.35em 0 2.75em;}
.cp_detail h3 + ul,.cp_detail p + ul,.entry_notes h3 + ul,.entry_notes p + ul{margin: 1em 0 0;}

.cp_detail li,.entry_notes li{margin-bottom: 0.75em;}
.cp_detail li > ul,.entry_notes li > ul{margin: 1em 0 0 1.25em; padding: 0 0 0.1em;}
.entry_notes li > ul{margin: 1em 0 0 0; padding: 0 0 0.1em; list-style-type: none;}
.cp_detail li > p,.entry_notes li > p{margin: 0.5em 0 -0.5em;}

#CP_Container a,#E_Container a{color: #7ecef4;}
#CP_Container a:hover,#E_Container a:hover{color: #8febec;}

.small{font-size: 0.9em; line-height: 1.6em;}
.cp_detail .musicLink{margin: 3em auto 0;}

.cp_flex{display: flex; flex-wrap: wrap;}
.fragrance{padding-top: 1em;}
.fragrance div{flex: 0 1 24%; margin: 0.5em 0.5%;}
#voteList{padding-top: 10px; margin-top: -10px;}
.vote div:first-child{flex: 0 1 28.25%; margin: 0.5em 0.6%;}
.vote div{flex: 0 1 23%; margin: 0.5em 0.25%;}
.vote a{display:block;}
.voteLinks{display: flex; margin: 0.5em!important;}
.voteLinks p{flex: 0 1 42%; margin: 0 auto;}
.ListAnker{max-width: 274px; margin: 1.5em auto!important;}
.ListAnker a:hover img, .vote a:hover img{opacity: 0.7;}

.snow_white div:last-child{flex: 0 1 100%; margin-top: -0.5em;}
.sw_notes p{max-width: 590px; padding: 1em; border: solid 1px #FFF; font-size: 0.9em;}

.result{padding: 0 0 25%; display: flex; flex-wrap: wrap;}
.result div{flex: 0 1 44%; margin: 0 3% 1em;}

@media only screen and (max-width: 860px) {.sw_notes p{max-width: 680px;}}

@media only screen and (max-width: 480px) {
    .cp_detail h2{padding: 0.75em 1em!important;}
    .cp_detail h2 br{display: block;}
    .cp_detail ul,.entry_notes ul{margin: 0; padding: 0 0 0 1.5em;}
    .fragrance div{flex: 0 1 49%; margin: 0.5em 0.5%;}
    .vote div:first-child{flex: 0 1 96%; margin: 0.5em 2%;}
    .vote div{flex: 0 1 49.5%; margin: 0.5em 0.25%;}
    .sw_notes p{font-size: 0.8em;}
    .result{display: block;}
    .result div{width: 90%; margin: 0 auto 1em;}

    }


/*----------footer------------*/
footer{
	width: 100%;
	padding: 2.5em 0;
	color: #FFF;
	display: block;
	background: rgba(0,0,0,0.8);
	}

footer > div{
	max-width: 1560px;
	margin: auto;
	padding: 0 2em 1em;
	}

	/*タイトーリンク*/
	ul.taitoLink{margin: 0; padding: 0 0 1.5em;}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #FFF!important; text-decoration: none;}
	ul.taitoLink a:hover{color: #7ecef4!important;}

footer p:last-child{
	padding-top: 2.5em;
	font-size: 0.8em;
	color: #FFF;
	text-align: center;
    border-top: solid 1px #313131;
	}

@media only screen and (max-width: 480px) {footer img{width: auto; height: 30px;} footer > div{padding: 0 1em 1em} ul.taitoLink li{font-size: 0.8em;}}



/*HALF ANNIVERSARY*/
.anniversary .colorFrame{margin-bottom: 1em;}
.anniversary .contents section:first-child .colorFrame:last-child{margin-bottom: 15%;}
.anniversary .cp_detail{padding: 0 0 0.5em!important;}

.cp_box *, .cp_box *:before, .cp_box *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}
.cp_box {position: relative;}

.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 60px;
	cursor: pointer;
	text-align: center;
	background: #000;
    }

.cp_box input:checked + label {background: inherit;}
.cp_box label:after {
    font-size: 0.8em;
	line-height: 2rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 11.5rem;
	content: '続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 20px;
	background-color: rgba(27, 37, 56, 1);
    }

.cp_box input {display: none;}

.cp_box .cp_container {
	overflow: hidden;
	height: 60px; 
	transition: all 0.5s;
    }

.cp_box input:checked + label:after {content: '閉じる';}
.cp_box input:checked ~ .cp_container {height: auto; padding-bottom: 70px; transition: all 0.5s;}

.ss_box{display: flex; flex-wrap: wrap;}
.ss_box p{flex: 0 1 48%; margin: 1em 1% 0; text-align: center;}
.pattern p:first-child, .pattern p:last-child{flex: 0 1 53%;}
.pattern p:nth-child(2){flex: 0 1 41.35%;}
.ride p:first-child{flex: 0 1 29%;}
.ride p:last-child{flex: 0 1 67%;}

.calendar{padding-top: 5%;}

@media only screen and (max-width: 480px) {
    .anniversary .contents section:first-child .colorFrame:last-child{margin-bottom: 20%;}
    .cp_box label {height: 30px;}
    .cp_box label:after {bottom: 8px;}
    .cp_box .cp_container {height: 30px;}
    
    .ss_box{display: block;}
    }


.cp_container{max-width: 1200px; margin: auto; padding: 0 1.5em;}
.cp_container > div{padding-bottom: 1em;}
    
.HA_lead h2{
	width: auto;
    margin: 0;
	height: 0;
	padding-top: 11.5%;
	background-repeat: no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
	background-position: center;
    background-image: url("../images/music_parade/campaign_HA2021_h2.png");
    }

    .DL_play h2{
        padding-top: 14%;
        background-image: url("../images/music_parade/campaign_DL250_h2.png");
        }

.HA_lead h2 + p{max-width: 740px; margin: 0 auto;}
.DL_play h2 + p{max-width: 860px; margin: 0 auto;}

.HA_lead .musicLink{margin: 1em auto 0;}

.top_ha > .HA_lead{margin-top: -5%; padding-top: 0!important; padding-bottom: 10%;}
.top_ha > .HA_lead h2{padding-top: 13%!important;}
.top_ha > .HA_lead h2 + p{max-width: 900px; margin: 0 auto;}
.top_ha > .HA_lead a{display: block;}

@media only screen and (max-width: 860px) {.HA_lead h2{padding-top: 20%;} .top_ha > .HA_lead h2{padding-top: 20%!important;}}
@media only screen and (max-width: 480px) {.HA_lead .musicLink{max-width: 280px; margin: 1em auto 2em;} .top_ha > .HA_lead{margin-top: -10%;}}


.HA_menu{
    max-width: 1200px;
    margin: auto;
    padding: 5% 4% 0;
    display: flex;
    flex-wrap: wrap;
    }

.HA_menu p{flex: 0 1 18%; margin: 0 1%;}
.HA_menu a{display: block; transition-duration: 0.5s;}
.HA_menu a:hover{transform: translateY(-5px); transition-duration: 0.5s;}

.anniversary .cp_detail h2 + p{margin: 0em 0.5em 1em!important;}

@media only screen and (max-width: 480px) {
    .HA_menu p:first-child{flex: 0 1 48%; margin: 0 26% 0.75em;}
    .HA_menu p{flex: 0 1 23%;}
    
    .first .HA_menu p:nth-child(2){flex: 0 1 48%; margin: 0 26% 0.75em;}
    .first .HA_menu p:first-child{flex: 0 1 23%; margin: 0 1%;}
    
    .first .HA_menu p:nth-child(1){order: 2;}
    .first .HA_menu p:nth-child(2){order: 1;}
    .first .HA_menu p:nth-child(3){order: 3;}
    .first .HA_menu p:nth-child(4){order: 4;}
    .first .HA_menu p:nth-child(5){order: 5;}
    
    .second .HA_menu p:nth-child(3){flex: 0 1 48%; margin: 0 26% 0.75em;}
    .second .HA_menu p:first-child{flex: 0 1 23%; margin: 0 1%;}
    
    .second .HA_menu p:nth-child(1){order: 2;}
    .second .HA_menu p:nth-child(2){order: 3;}
    .second .HA_menu p:nth-child(3){order: 1;}
    .second .HA_menu p:nth-child(4){order: 4;}
    .second .HA_menu p:nth-child(5){order: 5;}
    
    .third .HA_menu p:nth-child(4){flex: 0 1 48%; margin: 0 26% 0.75em;}
    .third .HA_menu p:first-child{flex: 0 1 23%; margin: 0 1%;}
    
    .third .HA_menu p:nth-child(1){order: 2;}
    .third .HA_menu p:nth-child(2){order: 3;}
    .third .HA_menu p:nth-child(3){order: 4;}
    .third .HA_menu p:nth-child(4){order: 1;}
    .third .HA_menu p:nth-child(5){order: 5;}
    
    .fourth .HA_menu p:nth-child(5){flex: 0 1 48%; margin: 0 26% 0.75em;}
    .fourth .HA_menu p:first-child{flex: 0 1 23%; margin: 0 1%;}
    
    .fourth .HA_menu p:nth-child(1){order: 2;}
    .fourth .HA_menu p:nth-child(2){order: 3;}
    .fourth .HA_menu p:nth-child(3){order: 4;}
    .fourth .HA_menu p:nth-child(4){order: 5;}
    .fourth .HA_menu p:nth-child(5){order: 1;}
    }

.anniversary .cp_detail h2{
    margin: 0 0 0.25em!important;
    padding: 0!important;
    background: none!important;
    }

h2.deco{height: auto!important; background: none;}

p.DL_Category{padding: 0.75em; font-size: 1.4em; text-align: center; color: #FFF; background: #e00016;}

.anniversary .cp_detail h3{padding: 1.8em 0.5em 0.5em;}

.Disney{max-width: 400px; margin:auto;}
.Disney a{display: block; transition-duration: 0.5s;}
.Disney a:hover{transform: translateY(-5px); transition-duration: 0.5s;}

.Profile{display: flex;}
.Profile p:first-child{flex: 0 1 23%; margin: 0 1%;}
.Profile p:last-child{flex: 0 1 73%; margin: 0 1%;}

.DL250_notes{margin: 0; padding-bottom: 1em; font-size: 0.8em; text-align: center;}

.FlexBox{display: flex;}
.outbox{padding: 1em;}

@media only screen and (max-width: 480px) {
    .fes2021 .cp_detail h2{margin: 0 0 1em!important;}
    .Profile{display: block;}
    .Profile p:first-child{width: 80%; margin: 0 auto 1em;}
    .if p{margin: 0;}
    }