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

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,600,700&display=swap');

body {margin:0;padding:0;overflow-x: hidden;-webkit-text-size-adjust: 100%;word-break: break-all;}
ol,ul,li {list-style:none;margin:0;padding:0;}
dl,dt,dd {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;padding:0;}
p {margin:0;padding:0;}
a , a img { overflow: hidden; color:#6697f2;text-decoration: none;border:none;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}
a:hover,a:active { color: #3663b6;outline:none;}
a:hover img , a:active img {opacity:.7;border:none;outline:none;}

h1 {font-weight:normal;}
h2 {font-weight:normal;}
h3 {font-weight:bold;}
img {max-width: 100%;width:auto;height: auto;display:block;}
* {box-sizing:border-box;}
main:after,
article:after,
section:after,
div:after,
ul:after,
ol:after,
li:after,
dl:after {
  content: "";
  display: block;
  clear: both;
}

.pc {display:none;}


body {font-size:3.7vw;line-height:1.8;color:#fff;background:#000;font-family: 'Noto Serif JP', sans-serif;}
body {background: url(../images/bg2.jpg) no-repeat center 0 fixed;background-size: cover;}

.header {position:relative;}
.mainimg {background:url(../images/mainimg_sp.jpg) no-repeat center 0;background-size:cover;padding-top:140%;width:100%;}
.header h1 {position: absolute;top: 0;left: 0;z-index: 1;padding: 5%;}

.headtitle {margin:2em 0 0;}
.headtitle .catchcopy {text-align: center;font-size: 1.2em;font-weight: 700;line-height: 1.5;}
.headtitle .title {font-size:1.8em;font-weight: 900;line-height: 1.4;color:#fff;text-align:center;margin:.5em 0 0;}
.headtitle .title span {display:block;}
.headtitle .title i {color:#eda409;font-style:normal;}

.sharearea {position:fixed;bottom:0;left:0;width:100%;background:#000;padding:1em 0;text-align:center;z-index:10;}
.sharearea h3 , .sharearea .share_btn {display:inline-block;vertical-align:middle;line-height: 1;}
.sharearea h3 {margin-right:.8em;}
.share_btn li {display:inline-block;vertical-align:top;letter-spacing:normal;width:auto;margin:0 .3em;}
.share_btn li a:before {content:"";background-repeat:no-repeat;background-position:center;background-size:contain;width:2em;height:2em;display:block;}
.share_btn li.tw a:before {background-image:url(../images/icon_tw.png);}
.share_btn li.fb a:before {background-image:url(../images/icon_fb.png);}
.share_btn li.line a:before {background-image:url(../images/icon_line.png);}


.area {padding:10% 4%;}

.contents01 h2 {text-align:center;font-size:1.6em;font-weight:900;color:#d01704;margin-left: -.5em;}
.contents01 h2 small {color:#fff;margin-left: -.3em;font-size:.7em;}
.contents01 p {margin-top:1.2em;}

.badge {padding:0 5%;text-align:center;}
.badge .big_badge {padding:0 1%;margin-bottom:1em;}
.badge ul {letter-spacing:-.4em;width:102%;margin-left:-1%;}
.badge li {width:33.33%;display:inline-block;vertical-align:top;letter-spacing:normal;padding:3% 1%;}

.gsc {background:rgba(0,0,0,.6);padding:10% 4%;margin:6% 4% 0;border:1px solid #fff;}
.gsc h2 {text-align: center;font-size: 1.5em;font-weight: 700;line-height: 1.5;}
.gsc h2 + p {text-align: center;font-size: 1.5em;font-weight: 700;line-height: 1;margin:.6em 0 1em;color:#d01704;}
.gsc .jacket {padding:0;margin-bottom:2em;}
.gsc .jacket span {display:block;background:url(../images/gsc_jacket.jpg) no-repeat center 0;background-size:contain;padding-top: 87%;}
.gsc .text ol {counter-reset: number 0;}
.gsc .text li {position:relative;padding-left:1.7em;margin:1em 0;}
.gsc .text li:before {counter-increment: number 1;content: counter(number,decimal-leading-zero) ".";position:absolute;top:0;left:0;}
.gsc .text li i {display:block;font-size:.8em;color:#999;font-style:normal;}

.contents02 h2 {text-align:center;font-size:1.6em;font-weight:900;line-height:1.4;}
.contents02 h2 i {color:#eda409;font-style:normal;}
.contents02 p {margin-top:1.2em;}

.message {border:1px solid #fff;padding:4%;margin:0 4% 14%;}
.message h2 {text-align:center;font-size:1.2em;font-weight:700;line-height:1;margin:1em 0;}
.message h2 {font-size:1.1em;}
.message p {margin:1.2em 0;}
.message .artist_photo span {display:block;background:url(../images/artist_photo.jpg) no-repeat center;background-size:cover;padding-top:70%;}
.artist_photo {margin-bottom:1em;}

.contents03 {background:#fff;color:#000;}
.contents03 h2 {text-align:center;font-size:1.6em;font-weight:900;line-height:1.4;}
.contents03 h2 i {color:#eda409;font-style:normal;}
.contents03 h2 span {display:block;color:#d01704;}
.contents03 .period {font-size:1.3em;font-weight:700;color:#000;text-align:center;margin:1em 0;line-height:1.6;}
.contents03 .period a {color:#d01704;text-decoration:underline;}
.contents03 .period a:hover {color:#b41303;}
.contents03 .box h3 {font-size:1.2em;font-weight:700;text-align:center;line-height: 1.5;}
.contents03 .box h3 i {font-style:normal;color:#1679ce;}
.contents03 .box h3 + p {text-align:center;margin:1em 0;}
.contents03 .box h3 a {text-decoration:underline;color:#d01704;display:block;}
.contents03 .box h3 a:hover {color:#b41303;}
.contents03 .box p {margin:1em 0 0;}

.contents03.sub {border-top:1px dotted #aaa;}
.contents03.sub a:hover img {opacity:1;}
.contents03.sub h2 {margin-bottom:.8em;}
.contents03.sub .box.pc {max-width: 960px;margin: 0 auto;border:1px solid #eee;}

.thankstext {text-align:center;font-weight:700;font-size:1.2em;margin:2em auto;border: 2px solid #d01704;padding: 1em;color: #d01704;max-width:30em;}
.voting {text-align:center;}
.voting h4 {text-align:center;font-size:1.2em;font-weight:700;line-height:1;margin:1em 0;}
.voting ul {margin-bottom:1.2em;text-align: left;} 
.voting ul + p {text-align:left;}
.voting li {list-style:disc;margin-left:1.5em;}

.linkbtn {margin:2.5em 0;}
.linkbtn a {background:#d01704;color:#fff;font-size:1.2em;line-height:4;text-align:center;display:block;font-weight:700;position:relative;}
.linkbtn a span {display:block;position:relative;z-index:1;}
.linkbtn a:after {content:"\f3d3";font-family:'ionicons';position:absolute;right:1em;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.linkbtn a:before {position: absolute;top: 0;right: 0;bottom: 0; left: 0;z-index: 0;content: '';background: #000;transform-origin: right top;transform: scale(0, 1);transition: transform .3s;display:block;}
.linkbtn a:hover:before {transform-origin: left top;transform: scale(1, 1);}

.buylink {margin:1em 0;}
.buylink a {background:#444;color:#fff;font-size:1em;line-height:3;text-align:center;display:block;font-weight:700;position:relative;}
.buylink a:after {content:"\f3d3";font-family:'ionicons';position:absolute;right:1em;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.buylink a:hover {background:#d01704;}

.footer {padding: 0 0 4em;}
.footer_btn {padding:2em 0;text-align:center;max-width: 25em;margin: 0 auto;}
.footer_btn li {margin:1.5em 0; letter-spacing: .1rem;}
.footer_btn li a {display:block;}
.footer .copy {font-size:.8em;text-align:center;opacity:.7;padding-bottom:2em;}

.remodal-wrapper {padding: 0 4%;}
.remodal-overlay {background: rgba(0,0,0,.9);}

.remodal {padding:10% 0;background:none;max-width: 900px;}
.remodal-close {top: 2.5%;left: 2%;}
.remodal .remodal_in {padding:0;text-align:left;background:none;color:#fff;}
.remodal .remodal_in .close_btn {background:none;border:1px solid #fff;color:#fff;padding:.8em 4em;font-size:1em;margin:3em auto 0;display:table; cursor:pointer;text-decoration:none;}
.remodal .remodal_in .close_btn:hover {background:none;border:1px solid #fff;background:#fff;color:#000;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}

.fadein {
  opacity: 0;
  transition : all 1000ms;
}
.fadein.scrollin{
  opacity: 1;
}


/*楽曲投票*/
.page_header {position:relative;}
.page_header_bg {background:url(../images/page_head.jpg) no-repeat 0 0;background-size:cover;padding-top:30%;width:100%;}
.page_header h1 {position: absolute;top: 0;left: 0;z-index: 1;padding: 5%;}

.page_contents h2 {text-align:center;font-size:1.6em;font-weight:900;line-height:1.4;}
.page_contents h2 i {color:#eda409;font-style:normal;}
.page_contents .period {font-size:1.1em;font-weight:700;color:#d01704;text-align:center;margin:1em 0;}
.page_contents .period span {font-weight:normal;line-height: 1.6;font-size: .8em !important;display: block;margin-top: .5em;}
.page_contents h4 {text-align:center;font-size:1.1em;font-weight:700;line-height:1;margin:0;line-height:3;position:relative;}
.page_contents h4:after {content:"\f3d0";font-family:'ionicons';position:absolute;right:1em;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.page_contents h4.active:after {content:"\f3d8";}
.page_contents h4 + div {display:none;padding:0 5% 5%;}
.page_contents ul {margin-bottom:1.2em;} 
.page_contents li {list-style:disc;margin-left:1.5em;}
.page_contents .method {color: #fff; background:#333;cursor:pointer;}

.tracklist {padding:1em 4%;}
.tracklist h3 {font-weight:900;font-size:1.3em;color:#069bdc;margin-bottom:.6em;line-height: 1.4;}
.tracklist li {margin:.7em 0;}

.tracklist li label {cursor:pointer;}
.tracklist li label input[type="checkbox"]{display:none;vertical-align: middle;outline:none;}
.tracklist li label.locked {opacity: 0.5;color: #999;}
.elem_check + span {display:block;border:1px solid #222;padding:.6em .8em .9em;background:rgba(0,0,0,.6);}
.elem_check:checked + span {background:#fff;color:#000;}
.elem_check + span i {display:block;font-style:normal;font-size:.8em;opacity:.6;line-height: 1.6;}
.elem_check + span b {font-size:1.05em;}

.free .elem_check + span {position: relative;margin-right: 5px;border: none;background: none;padding: 0;width: 100%;padding-left:2.5em;}
.free .elem_check + span:before {content: "\f371";font-family: ionicons;color: #fff;font-size: 1.8em;line-height: 1;position: absolute;top: .25em;left: 0;}
.free .elem_check:checked + span:before {content: "\f374";font-family: ionicons;color: #fff;}
.tracklist li label.locked input[type="text"] {color: #999;}
.tracklist.free li label.locked .elem_check + span:before{color:#999;}
.free input[type="text"] {border:1px solid #666;background:#000;color:#fff;}

.sendarea {margin: 10% 4%;padding:8% 4%;background: rgba(21,21,21,.8);}
.sendarea .box {margin:1.5em 0;}
.sendarea .box:first-child {margin-top:0;}
.sendarea .box div:first-child {font-weight:700;margin-bottom:.5em;}
.sendarea .box div:first-child:before {}
.sendarea .box div:first-child span {color:#d01704;}

input[type="text"],input[type="email"], textarea {background: rgba(255,255,255,1);border: 1px solid #333;padding: .8em 1em;font-size: 1em;width:100%;box-sizing:border-box;}
input[type="checkbox"] {margin: 0; margin-top: -.3em;vertical-align: middle;border: none;}
input[type="submit"],
input:-webkit-autofill , select:-internal-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
input:focus {outline:none;}
input[type="text"]:focus {background:#fff;color:#000;}
textarea {height:8em;}

.sendbutton {margin-bottom:1.5em;text-align:center;width: 102%;margin-left: -1%;}
.sendbutton div {width:49%;display:inline-block;vertical-align:top;padding:0 1%;letter-spacing:normal;}
.sendbutton button[type="submit"] ,
.sendbutton button[type="reset"],
.sendbutton button.back {border:none;color:#fff;padding:0;text-align:center;font-size:1em;line-height:3; cursor:pointer;outline:none;width:100%;transition: all 0.2s;}
.sendbutton button[type="submit"]:hover ,
.sendbutton button[type="reset"]:hover,
.sendbutton button.back:hover {opacity:.7;}
.sendbutton button[type="submit"] {background:#d01704;}
.sendbutton button[type="reset"] , .sendbutton button.back {background:#666;}

select {outline: none;text-indent: 0.01px;text-overflow: '';background: none transparent;vertical-align: middle;font-size: inherit;color: inherit;-webkit-appearance: button;-moz-appearance: button;appearance: button;border: none;padding:.2em;}
select option{background-color: #fff;color: #333;}
select::-ms-expand {display: none;}
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #828c9a;}

.select-wrap {position: relative;background: #fff;display: inline-block;border-radius: 2px;color: #000;padding: .2em .5em .5em;}

.radio_wrap span {margin-right:1em;}
.radio {display: none;}
.radio + .radio-icon {font-style:normal;display: inline-block;vertical-align: middle;}
.radio + .radio-icon:before {content: "\f401";font-family: ionicons;color: #fff;font-size: 1.3em;line-height: 1;margin-right:.2em;margin-top:.2em;}
.radio:checked + .radio-icon:before {content: "\f400";}

input[type="radio"] {display: inline-block;vertical-align: middle;margin: 0 .4em 0 0;-webkit-transform: scale(1.4);transform: scale(1.4);border:none;}


.formError .formErrorContent {
    width: 100%;
    background: #d01704;
    position: relative;
    color: #fff;
    min-width: 120px;
    font-size: 11px;
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    padding: 4px 10px 4px 10px;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
}
.formError .formErrorArrow div {
    border-left: none;
    border-right: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    font-size: 0px;
    height: 1px;
    background: #d01704;
    margin: 0 auto;
    line-height: 0;
    font-size: 0;
    display: block;
}
.votetrack {padding:0 4% 2em;text-align: center;}
.votetrack h3 {font-size: 1.2em;width: 5.5em;line-height: 5.5em;border-radius: 50%;margin: 0 auto 1em;background:#eda409;}
.votetrack li {margin: .8em 0;font-size: 1.2em;font-weight: 600;line-height: 1.5;}
.check .sendarea {margin-top:0;}
.check .sendarea .box div:first-child {float:left;}
.check .sendarea .box div:last-child {padding-left:9em;}
.check .sendarea .box {padding: 1em 0;border-bottom: 1px dotted #aaa;margin: 0;}
.check .sendarea .box:first-child {margin-top: 0;padding-top: 0;}
.check .sendarea .box div:first-child {margin-bottom:0;}
.check_text {margin:2em 0;text-align:center;}

.thanks {padding: 3em 4%;text-align: center;font-size: 1.2em;}
.backbtn a {display:block;width:8em;margin:2em auto;text-align:center;color:#fff;line-height:3;background:#333;font-size:.9em;}

@media screen and (max-height:414px) {
}

@media screen and (min-width:667px) {
}

@media screen and (min-width:768px) {
.pc {display:block;}
.sp {display:none;}

body {font-size:15px;}

.mainimg {background:url(../images/mainimg.jpg) no-repeat center 0;background-size:cover;padding-top:50%;width:100%;}
.header h1 {padding: 0;width: 50%;left: 5%;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.header .catchcopy {background: none;padding: 0;position:absolute;left:6%;bottom:10%;text-shadow:0 0 10px #2aa1dd;font-size:2vw;line-height:1;}
.header .catchcopy:before , .header .catchcopy:after {content:"ー";display:inline-block;vertical-align:top;}
.header .catchcopy br {display:none;}

.area {padding: 60px 3%;}

.headtitle {margin-top:60px;}
.headtitle .catchcopy {font-size:1.3em;}
.headtitle .catchcopy br {display:none;}
.headtitle .title {font-size:2em;margin-top:.3em;}

.contents01 {padding-top:30px;}
.contents01 h2 {font-size:1.8em;}

.badge {padding: 0;text-align: center;}
.badge .big_badge {padding:0;max-width:550px;margin:0 auto;}
.badge ul {width: 80%;margin-left: 0;margin: 2em auto 0;}
.badge li { width: 25%;}

.gsc {padding: 50px 30px;margin: 60px 3% 0;}
.gsc h2 {font-size:1.7em;}
.gsc h2 br {display:none;}
.gsc h2 + p {font-size: 1.7em;}
.gsc .jacket {padding: 0;margin-bottom: 0;width: 40%;float: left;}
.gsc .text {float: right;width: 60%;padding-left: 4%;}
.gsc .text li {margin: 0 0 .5em 0;}

.contents02 h2 {font-size: 1.8em;}

.message {padding: 40px 30px;margin: 0 3% 80px;}
.message h2 {font-size: 1.5em;margin: .5em 0 1.5em 0;}
.message .artist_photo {width: 50%;margin: 0 auto;}

.contents03 h2 {font-size: 1.8em;}
.contents03 .period {font-size: 1.4em;}
.contents03 .box h3 {font-size: 1.4em;}
.contents03 h2 span {}
.contents03 .box p br.pc {display:none;}
.voting h4 {font-size:1.3em;}
.voting li {list-style:none;margin:0;}
.voting li:before {content:"・";}
.voting ul {text-align: center;} 
.voting ul + p {text-align:center;}

.linkbtn {margin: 2.5em auto;max-width: 24em;}


.footer_btn { padding: 50px 0;}
.footer .copy {padding-bottom: 40px;}

/*投票*/
.page_header h1 {padding: 0;width: 55%;left: 5%;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);max-width: 500px;}
.page_header_bg {background: url(../images/page_head.jpg) no-repeat right 0;background-size: cover;padding-top: 180px;width: 100%;}

.page_contents h2 {font-size:1.8em;}
.page_contents .period {font-size: 1.2em;}
.page_contents .period span {font-size: 13px !important;}
.page_contents .method {max-width: 600px;margin: 0 auto;font-size: .9em;text-align:left !important;}
.page_contents .method h4 + div {padding: 0 20px 20px;}

.tracklist h3 {font-size:1.4em;}

input[type="radio"] {margin-top:-.1em;}

.sendarea {margin: 60px 4% 0;padding: 40px;background: rgba(21,21,21,.8);}
.sendbutton {width: 100%;margin-left: 0;max-width: 400px;margin: 0 auto;}

.check .area {padding-bottom:30px;}
}


@media screen and (min-width:1024px) {

.headtitle .title {font-size:2.2em;}
.headtitle .title span {display:inline-block;vertical-align:top;}

.contents01 p {text-align: center;}
.contents01 p {text-align: left;width: 50em;margin: 1em auto;}

.badge li { width: 20%;}

.contents02 p {text-align: left;width: 48em;margin: 1em auto 0;}

.contents03 .box h3 a {display: inline-block;vertical-align: top;}
.contents03 .box p {text-align: left;width: 55em;margin: 1em auto;}
.contents03 .box p br.pc {display:block;}

.message .artist_photo {float:left;width:40%;}
.message .text {float:right;width:58%;margin-top: 0;font-size: .95em;}
.message .text p:first-child {margin-top:0;}

.thankstext {font-size: 1.4em;border: 3px solid #d01704;}
}


@media screen and (min-width:1280px) {
body {font-size:16px;}

.headtitle .catchcopy {font-size:1.4em;margin:3em 0 0;}
.headtitle .title {font-size:2.8em;}

.contents01 {padding-top:60px;}
.contents01 h2 {font-size: 2.4em;}
.contents01 p {line-height: 2;}

.badge ul {width: 90%;max-width: 1200px;}
.badge li {width: 14.285%;padding: 0 10px;}

.gsc {margin: 60px auto 0;max-width: 1200px;}
.gsc .text li i {display: inline-block;vertical-align: middle;}
.gsc h2 {font-size: 2em;}
.gsc h2 + p {font-size: 2em;}
.gsc .jacket {width:35%;}
.gsc .text {padding-left: 30px;font-size: .95em;width:65%;}

.contents02 h2 {font-size: 2.4em;}

.message {margin: 0 auto 80px;max-width: 1200px;}
.message .artist_photo + p {width: 58%;}

.contents03 h2 {font-size: 2.4em;}
.contents03 .period {font-size: 1.6em;}
.contents03 .box h3 {font-size: 1.6em;}

.voting {text-align:center;font-size: .9em;}

.sharearea {bottom:auto;right:0;left:auto;top:0;width: 4.5em;font-size:.9em;}
.sharearea h3, .sharearea .share_btn {display:block;}
.sharearea h3 {margin: 1em 0 1.2em;text-align:center;}
.share_btn li {display:block;margin:1em auto;}
.share_btn li a:before {margin:0 auto;}
.share_btn li.tw a:before {width:1.95em;height:1.95em;}

/*投票*/
.page_header h1 {max-width: 650px;}
.page_header_bg {padding-top: 220px;}

.page_contents h2 {font-size:2.4em;}
.page_contents .period {font-size: 1.6em;}
.page_contents .method {font-size: .8em;}

.formarea {max-width:1200px;margin:0 auto;}
/*
.tracklist ul {width:101%;margin-left:-1%;}
.tracklist li {margin: 0;width: 50%;float: left;padding: .5%;}
*/
.tracklist ul {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap;width:101%;margin-left:-1%;}
.tracklist li {margin: 0;width: 49%;float: left;margin: .5%;}

.elem_check + span {background: rgba(0,0,0,.8);height:100%;}
.free .elem_check + span:before {font-size: 1.7em;left: .3em;}

input[type="radio"] {margin-top:-.5em;margin-right:.8em;-webkit-transform: scale(1.2);transform: scale(1.2);} 

.votetrack {padding: 0 4% 50px;font-size: 1.1em;}
.votetrack h3 {margin-bottom:1.5em;}
}
@media screen and (min-width:1600px) {
body {font-size:17px;}
}

@media only screen and (min-device-width:320px) and (max-device-width:1366px) {
body {background:none;}
body:before {
content: "";
background: url(../images/bg2.jpg) no-repeat center 0;
background-size: cover;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
}