@charset "utf-8";


/******************************************************************************************************************************

	TOP PAGE


*/
@media screen and (min-width:641px){

#visual {width:100%;padding-top:50.16%;background: url(/images/bnr-new_classics_plus.jpg) no-repeat; position: relative; /*background-position:50% 46px; */ background-size: 100%;}

#visual .tic {height: 46px; line-height: 46px; color: #fff; font-size: 13px; background: #292929; position:absolute; left:0; top: 0; width: 100%; z-index: 100;}
#visual .tic .wrap {}
#visual .tic .item {float: left;}
#visual .tic a{color: #fff; text-decoration: underline;}
#visual .tic a:hover {text-decoration: none;}
#visual .tic time {display: inline-block; color: #f4dc24; padding: 0 15px; vertical-align: top;}
#visual .tic p {display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top;}
#visual .tic .slick-prev,#visual .tic .slick-next {display: none !important;}

#visual ul.sns {top: 66px; left:3%; position: absolute; z-index: 10;}
#visual ul.sns img {width: 48px; height: auto; transition:opacity 0.5s;}
#visual ul.sns a:hover img {opacity: 0.7;}
#visual ul.sns li {display: inline-block; padding: 0 0 0 14px;}

#visual h1 {position: absolute; left: 0; top: 0; width: 100%; text-align: center; padding: 99px 0 0; z-index: 0; opacity: 0; transition: 1s;}
#visual h1.show {opacity: 1;}

/*
#visual .artist {position: absolute; top: 128px; right: 26px; width: 211px; transition: 1s; opacity: 0;}
#visual .artist.show {opacity: 1;}
#visual .artist a{display: inline-block; transition: 0.5s;}
#visual .artist a:hover {opacity: 0.7;}
#visual .artist a.illust {position: relative;}
#visual .artist a.illust:after {content: ''; background: url(/images/artist-click.png) left bottom no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#visual .artist .next {font-size: 13px; color: #fff; font-weight: bold; background: #313131; width: 210px; height: 28px; line-height: 28px; text-align: center;}
*/

#visual .official, #visual .download {position: absolute; z-index: 20;}
#visual .official {top: 364px; right: 899px; width: 280px;}
#visual .download {top: 496px; left: 34px; width: 443px;}
#visual .download::after {content: ""; display: block; clear: both;}
#visual .appstore {float: left; width: 46%;}
#visual .googleplay {float: right; width: 54%;}





#visual_limit {height: 666px; background: url(/images/bg-mv.jpg) center 146px no-repeat; position: relative;}
#visual_limit .tic {height: 146px; line-height: 46px; color: #fff; font-size: 13px; background: #292929; position:absolute; left:0; top: 0; width: 100%; z-index: 100;}
#visual_limit .tic .wrap {}
#visual_limit .tic .item {float: left;}
#visual_limit .tic a{color: #fff; text-decoration: underline;}
#visual_limit .tic a:hover {text-decoration: none;}
#visual_limit .tic time {display: inline-block; color: #f4dc24; padding: 0 15px; vertical-align: top;}
#visual_limit .tic p {display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top;}
#visual_limit .tic .slick-prev,#visual_limit .tic .slick-next {display: none !important;}

#visual_limit ul.sns {padding: 166px 0 0 3px; position: relative; z-index: 10;}
#visual_limit ul.sns img {width: 48px; height: auto; transition:opacity 0.5s;}
#visual_limit ul.sns a:hover img {opacity: 0.7;}
#visual_limit ul.sns li {display: inline-block; padding: 0 0 0 14px;}

#visual_limit h1 {position: absolute; left: 0; top: 0; width: 100%; text-align: center; padding: 199px 0 0; z-index: 0; opacity: 0; transition: 1s;}
#visual_limit h1.show {opacity: 1;}
#visual_limit .artist {position: absolute; top: 228px; right: 26px; width: 211px; transition: 1s; opacity: 0;}
#visual_limit .artist.show {opacity: 1;}
#visual_limit .artist a{display: inline-block; transition: 0.5s;}
#visual_limit .artist a:hover {opacity: 0.7;}
#visual_limit .artist a.illust {position: relative;}
#visual_limit .artist a.illust:after {content: ''; background: url(/images/artist-click.png) left bottom no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#visual_limit .artist .next {font-size: 13px; color: #fff; font-weight: bold; background: #313131; width: 210px; height: 28px; line-height: 28px; text-align: center;}



#slideBnr {height: 278px; text-align: center; margin-top: 0px; position: relative; opacity: 0; transition: 0.5s; z-index: 25;}
.windowloaded #slideBnr{opacity: 1;}
#slideBnr .item {display: inline-block; vertical-align: top; height: 321px; margin: 0 5px;}
#slideBnr .item img {-webkit-backface-visibility: hidden;}
#slideBnr .slick-prev {position: absolute; left: 50%; bottom: 122px; width: 34px; height: 34px; background: url(/common/images/arr-left.png) left top no-repeat; font-size: 0; line-height: 1; padding: 0; border: none; 
 margin-left: -394px; z-index: 30;}
#slideBnr .slick-next {position: absolute; right: 50%; bottom: 122px; width: 34px; height: 34px; background: url(/common/images/arr-right.png) left top no-repeat; font-size: 0; line-height: 1; padding: 0; border: none; 
 margin-right: -394px; z-index: 30;}



#history { border-bottom: 2px solid #686868; margin: -46px 0 0; z-index: 30; position: relative; overflow: hidden; height: 362px; opacity: 0; transition: 0.5s;}
.windowloaded #history{opacity: 1;}
#history:after{content: ''; clear: both; display: block;}
#history .historywrap {width: 9999px; position: relative;}
#history .inner {position: absolute; left:0; top: 0;}
#history .item {float: left; margin-bottom: 0; vertical-align:bottom; position: relative;}
#history .item img + img {position: absolute; left: 50%; bottom: 0; margin-left: -20px;}
#history .item + .item {padding-left: 32px;}
#history .item + .item.line {padding: 0 0 0 90px;}
#history a{transition: 0.5s;}
#history a:hover{opacity: 0.7;}
#history .item.first{padding-left: 90px !important;}
#history .item.first img + img {margin-left: 15px;}

main .contents{background: url(/common/images/bg.png) center -0 repeat; padding: 85px 0 82px; text-align: center;}
main .contents .retweet{text-align: center;}
main .contents .retweet a{transition: 0.5s; text-align: center; display: block;}
main .contents .retweet a img{transition: 0.5s; margin: 0 auto;}
main .contents .retweet a:hover img{opacity:0.7;}
main .contents .bnr-b{text-align: center; margin: 20px 0 0 0;}
main .contents .bnr-b a{transition: 0.5s; text-align: center; display: block;}
main .contents .bnr-b a img{transition: 0.5s; margin: 0 auto;}
main .contents .bnr-b a:hover img{opacity:0.7;}

.archives {font-size: 0; line-height: 1;}
.archives .item {display:inline-block; width: 278px; height: 352px; background: url(/images/bg-arhives-item.png) left bottom no-repeat; vertical-align: top; text-align: left; margin: 0 8px; transition: 0.5s; position: relative; text-decoration: none;}
.archives .item:hover{opacity: 0.7;}
.archives .item img {margin-bottom: 22px;}
.archives .item p {margin: 0 25px; font-size: 14px; line-height: 26px; color: #fff; letter-spacing: 0.1em;}
.archives .item p img {margin: 0;}
.archives .item.goods p {line-height: 18px;}
.archives .item p b{font-size: 16px; font-weight: bold;}

.archives .item .schedule {border-top:1px solid #9d9d9d; padding: 12px 0 0; position: absolute; left; bottom: 15px; width: 228px; line-height: 13px; height: 30px; letter-spacing:inherit;}
.archives .item .schedule strong {color: #ffde00; position: relative; padding: 0 2em 0 0;}
.archives .item .schedule strong:after{content: '≫'; color: #9f9f9f; position: absolute; right: 0.5em; top: 0;}
.archives .item .schedule small {font-size: 10px;}

.archives .item .next {border-top:1px solid #9d9d9d; padding: 12px 0 0; position: absolute; left; bottom: 15px; width: 228px; line-height: 1; height: 30px;}
.archives .item .next strong {color: #ffde00; position: relative; padding: 0 2em 0 0;}
.archives .item .next strong:after{content: '≫'; color: #9f9f9f; position: absolute; right: 0.5em; top: 50%; margin-top: -0.5em;}

.retweet + .archives,
.archives + .retweet {margin-top: 28px;}

#siteFooter {margin-top: 0; padding-top: 0;}

#float_btn {position:absolute; top:0px; left:0px; width:100%; padding-top:50.16%}

/* fc-icon */
.fc-icon {animation: vertical 1.5s cubic-bezier(0, 0, 1, 1) infinite alternate; position: absolute; top: 62px; left: 10px; z-index: 999; width: 11%; cursor: pointer;}
@keyframes vertical {0% { transform:translateY(0px); } 100% { transform:translateY(-8px); }}

}

@media screen and (min-width:1201px){
#visual .official {top: 30.1vw; right: 74.7vw; width: 23.6%;}
#visual .download {top: 41.6vw; left: 3vw; width: 36.7vw;}
}

@media screen and (min-width:1921px){
#visual {background-size: 100% auto;}
#visual_limit {background-size: 100% auto;}
}

/* popup */
#popup {visibility: hidden; opacity : 0; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; transition: .4s; }
#popup .popup-bg {width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);}
#popup .popup-wrapper {width: 85%; max-width: 760px;}
#popup .popup-wrapper {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);  -webkit-transform:translate(-50%,-50%); -o-webkit-transform:translate(-50%,-50%);  -ms-webkit-transform:translate(-50%,-50%);}
#popup .popup-header {width: 100%;}
#close-btn {width: 8%; max-width: 40px; padding-bottom: 10px; float: right; cursor: pointer;}
#popup .popup-wrapper img {width: 100%; cursor: pointer;}
.is-show {visibility: visible!important; opacity : 1!important;}
.clearfix::after {content: ""; display: block; clear: both;}


/*
	SP
**********************/

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

#siteHeader ul li:nth-child(1):after{opacity: 1;}

#visual .wrap.mv{background: url(/images/sp/bnr-new_classics_plus.jpg) center top no-repeat; background-size:100% auto; height: 130.6166vw; padding-top: 9.0625vw;}

#visual h1 {background: url(/images/sp/mv.png) center top no-repeat; background-size: 100% auto; height: 54.6875vw; transition: 1s; opacity: 0;}
#visual h1.show {opacity: 1;}
#visual h1 img {display: none;}


//#visual ul.sns {z-index: 10; position: absolute; left: 0; bottom: 10vw; width: 100%;}
//#visual ul.sns img {width: 12.5vw; height: auto;}
//#visual ul.sns li {display: inline-block; padding: 0 1.875vw 0;}

#visual ul.sns {display: none;}
#visual .artist {display: none;}

#visual .tic {color: #fff; font-size: 3.125vw; line-height: 4.53125vw; background: #292929;}
#visual .tic:after{content: ''; clear: both; display: block;}
#visual .tic .item {float: left; text-align: left; display: table; width: 100%; padding: 3.75vw 3.125vw 3.75vw 0; -webkit-backface-visibility: hidden;}
#visual .tic a{color: #fff; text-decoration: underline;}
#visual .tic time {display:table-cell; color: #f4dc24; padding: 0 3.125vw; vertical-align: middle;}
#visual .tic p {display:table-cell; vertical-align: middle}
#visual .tic .slick-prev,#visual .tic .slick-next {display: none !important;}

#visual .official {position: absolute; z-index: 999999;}
#visual .official {top: 54.4vw; left: 0.8vw; width: 31.8%;}





#visual_limit .wrap.mv{background: url(/images/sp/bg-mv.jpg) center top no-repeat; background-size:100% auto; height: 89.6875vw; padding-top: 9.0625vw;}

#visual_limit h1 {background: url(/images/sp/mv.png) center top no-repeat; background-size: 100% auto; height: 54.6875vw; transition: 1s; opacity: 0;}
#visual_limit h1.show {opacity: 1;}
#visual_limit h1 img {display: none;}

#visual_limit ul.sns {z-index: 10; position: absolute; left: 0; bottom: 10vw; width: 100%;}
#visual_limit ul.sns img {width: 12.5vw; height: auto;}
#visual_limit ul.sns li {display: inline-block; padding: 0 1.875vw 0;}

#visual_limit .artist {display: none;}

#visual_limit .tic {color: #fff; font-size: 3.125vw; line-height: 4.53125vw; background: #292929;}
#visual_limit .tic:after{content: ''; clear: both; display: block;}
#visual_limit .tic .item {float: left; text-align: left; display: table; width: 100%; padding: 3.75vw 3.125vw 3.75vw 0;}
#visual_limit .tic a{color: #fff; text-decoration: underline;}
#visual_limit .tic time {display:table-cell; color: #f4dc24; padding: 0 3.125vw; vertical-align: middle;}
#visual_limit .tic p {display:table-cell; vertical-align: middle}
#visual_limit .tic .slick-prev,#visual_limit .tic .slick-next {display: none !important;}






#slideBnr {height: 33.4375vw; margin-top: 0vw; position: relative; left: 4.6875vw; width: 100vw;}
/* #slideBnr {height: 33.4375vw; margin-top: -2.1875vw; position: relative; left: 4.6875vw; width: 100vw;} ★あとけし */
#slideBnr:after{content: ''; clear: both; display: block;}
#slideBnr .item {display: inline-block; vertical-align: top; height: 33.4375vw; margin: 0 5px; }
#slideBnr .item img {width: 100%; height: auto; width: 90.625vw; -webkit-backface-visibility: hidden;}
#slideBnr .slick-prev {position: absolute; left: 50%; bottom: 13.21875vw; width: 6.5625vw; height: 6.5625vw; background: url(/common/images/sp/arr-left.png) left top no-repeat; font-size: 0; line-height: 1; padding: 0; border: none; margin-left: -53.4375vw; z-index: 30; background-size: 100% auto;}
#slideBnr .slick-next {position: absolute; right: 50%; bottom: 13.21875vw; width: 6.5625vw; height: 6.5625vw; background: url(/common/images/sp/arr-right.png) left top no-repeat; font-size: 0; line-height: 1; padding: 0; border: none; margin-right: -44.0625vw; z-index: 30; background-size: 100% auto;}


#slideBnr_new {height: 33.4375vw; margin-top: -2.1875vw; position: relative; left: 4.6875vw; width: 100vw;}
#slideBnr_new:after{content: ''; clear: both; display: block;}
#slideBnr_new .item {display: inline-block; vertical-align: top; height: 33.4375vw;}
#slideBnr_new .item img {width: 100%; height: auto; width: 90.625vw;}
#slideBnr_new .slick-prev {position: absolute; left: 50%; bottom: 11.71875vw; width: 6.5625vw; height: 6.5625vw; background: url(/common/images/sp/arr-left.png) left top no-repeat; font-size: 0; line-height: 1; padding: 0; border: none; margin-left: -53.4375vw; z-index: 30; background-size: 100% auto;}
#slideBnr_new .slick-next {position: absolute; right: 50%; bottom: 11.71875vw; width: 6.5625vw; height: 6.5625vw; background: url(/common/images/sp/arr-right.png) left top no-repeat; font-size: 0; line-height: 1; padding: 0; border: none; margin-right: -44.0625vw; z-index: 30; background-size: 100% auto;}



#history { border-bottom: 2px solid #686868; margin: -2.34375vw 0 0; z-index: 30; position: relative; overflow: hidden; height: 37.625vw;}
#history:after{content: ''; clear: both; display: block;}
#history .historywrap {width: 9999px; position: relative;}
#history .inner {position: absolute; left:0; top: 0;}
#history .item {float: left; margin-bottom: 0; vertical-align:bottom; position: relative; padding-bottom: 2vw;}
#history .item:after{content: ''; width: 0; height: 0; border-style: solid; border-width: 0 1.09375vw 1.875vw 1.09375vw; border-color: transparent transparent #686868 transparent; position: absolute; left: 50%; bottom: 1.1vw; margin-left: 2.6vw;}
#history .item img {height: 36.625vw; width: auto;}
#history .item.first{padding-left: 14.0625vw !important;}
#history .item + .item {padding-left: 32px;}
#history .item + .item.line {padding: 0 0 0 14.0625vw;}
#history .item img + img {position: absolute; left: 50%; bottom: -1vw; margin-left: 0; width: 7.5vw; height: auto;}
#history .item + .item.line:after{display: none;}
#history .item.first img + img {margin-left: 3vw;}
#history .item.first:after {margin-left: 5.9vw;}
/*#history .item * {-webkit-backface-visibility:hidden; backface-visibility:hidden;}*/

main .contents {background: url(/common/images/sp/bg.png) center -12.5vw repeat-y; background-size: 100% auto; padding: 6.25vw 0 12.03125vw;}

main .contents .retweet {padding: 0 4.6875vw;}
main .contents .retweet img{width: 100%; height: auto;}
main .contents .bnr-b {padding: 0 4.6875vw; margin-top:4.6875vw; }
main .contents .bnr-b img{width: 100%; height: auto;}

.archives {font-size: 0; line-height: 1;}
.archives .item {width: 43.4375vw; height: 69.625vw; background: url(/images/sp/bg-arhives-item.png) left bottom no-repeat; background-size: 100% auto; text-align: left; margin: 0 1.875vw; position: relative; display: inline-block; vertical-align: top; text-decoration: none;}
.archives .item:nth-child(n+3) {margin-top: 6.40625vw;}
.archives .item img {width:100%; height: auto; margin-bottom: 5.4875vw;}
.archives .item.goods img {margin-bottom: 3.90625vw;}
.archives .item p {margin: 0 3.125vw; font-size: 3.125vw; line-height: 4.6875vw; color: #fff;}
.archives .item p img {margin: 0;}

.archives .item.goods p b{font-weight: bold;}
.archives .item.special p img {width: 37.1875vw; height: auto;}

.archives .item .schedule {border-top:1px solid #9d9d9d; padding: 2.1875vw 0 0; margin-top: 2.1875vw;}
.archives .item .schedule strong {color: #ffde00; position: relative; display: block;}
.archives .item .schedule small {font-size: 2.5vw;}
.archives .item .schedule span {display: block; position: relative; padding-left: 1.2em;}
.archives .item .schedule span:after{content: '≫'; color: #9f9f9f; position: absolute; left:0; top: 0;}

.archives .item .next {border-top:1px solid #9d9d9d; padding: 2.1875vw 0 0; margin-top: 2.1875vw;}
.archives .item .next strong {color: #ffde00; position: relative; padding: 0 2em 0 0;}
.archives .item .next span{display: block; position: relative; padding-left: 1.2em;}
.archives .item .next span:after{content: '≫'; color: #9f9f9f; position: absolute; left:0; top: 0;}

.retweet + .archives,
.archives + .retweet {margin-top: 7.03125vw;}

#float_btn {position:absolute; top:0px; left:0px; width:100%; padding-top:69.56%}

/* fc-icon */
.fc-icon {animation: vertical 1.5s cubic-bezier(0, 0, 1, 1) infinite alternate; position: absolute; top: 3.2vw; left: 2.8vw; z-index: 999; width: 25%; cursor: pointer;}
@keyframes vertical {0% { transform:translateY(0px); } 100% { transform:translateY(-8px);}}

/* popup */
.popup-wrapper {width: 85%;}
}