@charset "UTF-8";
body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
  background: #fff;
  color: #333;
  background: url("../img/bg.jpg") center top repeat;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #333;
  text-decoration: none;
}

/*////////////////
common
////////////////*/
@media screen and (min-width: 600px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block;
  }
}

@media screen and (max-width: 599px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block;
  }
}

img {
  vertical-align: top;
}

#container {
  margin: 0 auto;
  text-align: center;
  position: relative;
  width: 100%;
  overflow-x: hidden;
  background: url("../img/bg_main.jpg") center top repeat-y;
}

.inner {
  display: block;
  clear: both;
  width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.btn a:hover {
  opacity: .8;
}

.chara {
  position: absolute;
  display: inline-block;
}

.colA {
  color: #69ad55;
}

.colB {
  color: #28a8c2;
}

.colR {
  color: #c52319;
}

.line {
  background: linear-gradient(transparent 60%, #f6f052 60%);
}

@media screen and (min-width: 600px) {
  #container {
    min-width: 1200px;
  }
  .inner {
    width: 1100px;
  }
}

@media screen and (max-width: 599px) {
  #container {
    min-width: 100%;
    font-size: 3.6vw;
    background-size: 180% auto;
  }
  .inner {
    width: 100%;
    padding: 0 3vw;
  }
  .fit {
    width: 100%;
    height: auto;
  }
}

/* ========================================
    MAIN
======================================== */
#main {
  padding-top: 90px;
  position: relative;
}

#main #logo {
  width: 150px;
  position: absolute;
  top: 70px;
  left: 50%;
  margin-left: -75px;
  z-index: 1;
}

#main .chara1 {
  top: 35px;
  right: 65px;
}

#main .chara2 {
  top: 225px;
  left: 110px;
}

#main .programBadge {
  margin-top: 95px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
}

#main .programBadge .badge {
  width: 416px;
  margin: 0 15px;
  padding: 10px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

#main .programBadge .badge dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
}

#main .programBadge .badge dl:before, #main .programBadge .badge dl:after {
  content: "";
  width: 100%;
  height: 2px;
  background: url("../img/dot.png") left top repeat-x;
  position: absolute;
  left: 0;
}

#main .programBadge .badge dl:before {
  top: 0;
}

#main .programBadge .badge dl:after {
  bottom: 0;
}

#main .programBadge .badge dl dt {
  width: 35%;
  padding-right: 10px;
}

#main .programBadge .badge dl dt img {
  width: 100%;
  height: auto;
}

#main .programBadge .badge dl dd {
  width: 65%;
  padding: 25px 0;
  position: relative;
}

#main .programBadge .badge dl dd:after {
  content: "";
  width: 2px;
  height: calc(100% - 20px);
  background: url("../img/dot.png") left top repeat-y;
  position: absolute;
  top: 10px;
  left: 0;
}

#main .programBadge .badge .date {
  display: block;
  font-size: 24px;
  margin-top: 15px;
}

#main .programBadge .badge .time {
  display: block;
  font-size: 17px;
}

#main .programBadge .badge.badge1 {
  background-color: #c4e6ba;
}

#main .programBadge .badge.badge2 {
  background-color: #d5e6e6;
}

@media screen and (max-width: 599px) {
  #main {
    padding-top: 20vw;
  }
  #main #logo {
    width: 25%;
    top: 10vw;
    left: 37.5%;
    margin-left: 0;
  }
  #main .chara1 {
    top: -6vw;
    right: 0;
    width: 20%;
  }
  #main .chara2 {
    top: 45vw;
    left: 0;
    width: 24%;
  }
  #main .programBadge {
    margin-top: 18vw;
  }
  #main .programBadge .badge {
    width: 45%;
    margin: 0 2%;
    padding: 2vw;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
  #main .programBadge .badge dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
  }
  #main .programBadge .badge dl dt {
    width: 100%;
    padding: 2vw 8vw;
  }
  #main .programBadge .badge dl dd {
    width: 100%;
    padding: 3vw 2vw;
    position: relative;
  }
  #main .programBadge .badge dl dd:after {
    content: "";
    width: 50%;
    height: 2px;
    background: url("../img/dot.png") left top repeat-x;
    position: absolute;
    top: 0;
    left: 25%;
  }
  #main .programBadge .badge .date {
    font-size: 4vw;
    margin-top: 2vw;
  }
  #main .programBadge .badge .time {
    font-size: 3vw;
    margin-top: 2vw;
  }
  #main .programBadge .badge.badge1 {
    margin: 0 3% 0 0;
  }
  #main .programBadge .badge.badge2 {
    margin: 0 0 0 3%;
  }
}

/* ========================================
    ABOUT
======================================== */
#about {
  margin-top: 45px;
  min-height: 800px;
  background: url("../img/about_bg.png") center top no-repeat;
}

#about .secTitle {
  position: absolute;
  top: 70px;
  left: 260px;
}

#about .aboutContent {
  padding-top: 180px;
  text-align: left;
}

#about .aboutContent .detail {
  position: relative;
}

#about .aboutContent .detail .text {
  line-height: 1.8;
  font-size: 20px;
}

#about .aboutContent .detail .text.text1 {
  width: 56%;
  padding-left: 80px;
}

#about .aboutContent .detail .text.text2 {
  position: absolute;
  top: 140px;
  right: 40px;
  width: 36%;
}

#about .aboutContent .detail .btnBox {
  position: absolute;
  bottom: -200px;
  width: 466px;
  text-align: center;
  left: 50%;
  margin-left: -233px;
}

#about .aboutContent .detail .btnBox .chara3 {
  top: -73px;
  right: 15px;
}

#about .aboutContent .detail .btnBox .chara4 {
  bottom: -76px;
  left: -58px;
}

@media screen and (max-width: 599px) {
  #about {
    margin-top: 6vw;
    min-height: auto;
    background: url("../img/about_bg_sp.png") center top no-repeat;
    background-size: 100% auto;
    padding-bottom: 10vw;
  }
  #about .secHead {
    text-align: center;
    padding-top: 10vw;
  }
  #about .secTitle {
    display: inline-block;
    position: relative;
    top: auto;
    left: auto;
    width: 25%;
  }
  #about .aboutContent {
    padding-top: 5vw;
  }
  #about .aboutContent .detail {
    position: relative;
  }
  #about .aboutContent .detail .text {
    line-height: 1.8;
    font-size: 4.2vw;
    text-align: center;
  }
  #about .aboutContent .detail .text.text1 {
    width: 100%;
    padding-left: 0;
  }
  #about .aboutContent .detail .text.text2 {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
  }
  #about .aboutContent .detail .btnBox {
    position: relative;
    bottom: auto;
    width: 80%;
    text-align: center;
    left: auto;
    margin: 0 auto;
    padding: 14vw 0;
  }
  #about .aboutContent .detail .btnBox .chara3 {
    top: 2vw;
    right: -1vw;
    width: 17%;
  }
  #about .aboutContent .detail .btnBox .chara4 {
    bottom: 1vw;
    left: -11vw;
    width: 22%;
  }
}

/* ========================================
    PLAYLIST
======================================== */
#playlist {
  margin-top: 80px;
}

#playlist .secHead .headText {
  font-size: 20px;
  margin-top: 30px;
  line-height: 1.6;
}

#playlist .chara5 {
  top: -40px;
  left: 50%;
  margin-left: 274px;
}

#playlist .chara6 {
  top: 145px;
  left: 0;
}

#playlist .programInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 110px;
}

#playlist .programInfo .program {
  width: 520px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  margin: 0 15px;
  padding: 10px;
}

#playlist .programInfo .program .boxInner {
  position: relative;
  padding: 20px 10px;
}

#playlist .programInfo .program .boxInner:before, #playlist .programInfo .program .boxInner:after {
  content: "";
  width: 100%;
  height: 4px;
  background: url("../img/dot.png") left top repeat-x;
  position: absolute;
  left: 0;
}

#playlist .programInfo .program .boxInner:before {
  top: 0;
}

#playlist .programInfo .program .boxInner:after {
  bottom: 0;
}

#playlist .programInfo .program h3 {
  display: inline-block;
  width: 134px;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -67px;
}

#playlist .programInfo .program h3:before {
  content: "";
  width: 194px;
  border-radius: 50%;
  height: 150px;
  position: absolute;
  top: -30px;
  left: -30px;
  z-index: 0;
}

#playlist .programInfo .program h3 img {
  position: relative;
  z-index: 1;
}

#playlist .programInfo .program dl dt {
  position: absolute;
  top: 25px;
  left: 15px;
}

#playlist .programInfo .program dl dd {
  position: relative;
  z-index: 2;
  padding-top: 40px;
  line-height: 1.8;
}

#playlist .programInfo .program .personality {
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
}

#playlist .programInfo .program .personality li {
  width: 35%;
  margin: 0 5%;
}

#playlist .programInfo .program#onemorning {
  background-color: #c4e6ba;
}

#playlist .programInfo .program#onemorning h3:before {
  background-color: #c4e6ba;
}

#playlist .programInfo .program#skyrocket {
  background-color: #d5e6e6;
}

#playlist .programInfo .program#skyrocket h3:before {
  background-color: #d5e6e6;
}

#playlist .playlistFrame {
  margin-top: 55px;
  position: relative;
}

#playlist .chara7 {
  bottom: -76px;
  left: 0;
}

@media screen and (max-width: 599px) {
  #playlist {
    margin-top: 10vw;
  }
  #playlist .secHead h2 {
    padding: 0 8vw;
  }
  #playlist .secHead .headText {
    font-size: 4.2vw;
    margin-top: 10vw;
  }
  #playlist .chara5 {
    top: -1vw;
    left: auto;
    margin-left: 0;
    right: 0;
    width: 16%;
  }
  #playlist .chara6 {
    top: 58vw;
    left: 1vw;
    width: 15%;
  }
  #playlist .programInfo {
    padding-top: 30vw;
  }
  #playlist .programInfo .program {
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 3vw;
  }
  #playlist .programInfo .program .boxInner {
    position: relative;
    padding: 5vw 3vw;
  }
  #playlist .programInfo .program h3 {
    display: inline-block;
    width: 34%;
    position: absolute;
    top: -12vw;
    left: 33%;
    margin-left: 0;
  }
  #playlist .programInfo .program h3 img {
    width: 80%;
  }
  #playlist .programInfo .program h3:before {
    content: "";
    width: 130%;
    height: 35vw;
    position: absolute;
    top: -5vw;
    left: -5vw;
    z-index: 0;
  }
  #playlist .programInfo .program dl dt {
    width: 25%;
    top: 2vw;
    left: 0;
  }
  #playlist .programInfo .program dl dd {
    padding-top: 8vw;
    font-size: 4vw;
  }
  #playlist .programInfo .program .personality {
    margin-top: 3vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
  }
  #playlist .programInfo .program .personality li {
    width: 35%;
    margin: 0 5%;
  }
  #playlist .programInfo .program#skyrocket {
    margin-top: 20vw;
  }
  #playlist .playlistFrame {
    margin-top: 10vw;
  }
  #playlist .chara7 {
    width: 17%;
    bottom: -14vw;
  }
}

/* ========================================
    PRESENT
======================================== */
#present {
  margin-top: 110px;
}

.presentBox {
  background-color: #fbf9e7;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  max-width: 860px;
  border: 3px solid #FFF;
  border-radius: 10px;
  margin: 50px auto 0 auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 30px 10px;
}

.presentBox .img {
  width: 40%;
}

.presentBox .detail {
  width: 60%;
}

.presentBox .detail .text {
  text-align: left;
  line-height: 2;
  padding: 0 20px;
}

.presentBox .detail .att {
  margin-top: 5px;
  font-size: 12px;
}

.presentBox .detail .btn {
  margin-top: 20px;
}

@media screen and (max-width: 599px) {
  #present {
    margin-top: 20vw;
  }
  .presentBox {
    margin: 10vw auto 0 auto;
    padding: 5vw 3vw;
  }
  .presentBox .img {
    width: 65%;
  }
  .presentBox .detail {
    width: 100%;
  }
  .presentBox .detail .text {
    line-height: 1.6;
    padding: 2vw;
    font-size: 3.4vw;
  }
  .presentBox .detail .att {
    margin-top: 2vw;
    font-size: 2.8vw;
  }
  .presentBox .detail .btn {
    margin-top: 20px;
  }
}

/* ========================================
    TWITTER LIVE
======================================== */
#twitterlive {
  background-color: #f8eeb4;
  margin-top: 110px;
  padding: 25px 0 80px 0;
  position: relative;
}

#twitterlive:before {
  content: "";
  width: 100%;
  height: 7vw;
  display: block;
  background: url(../img/twitterlive_bg_csn.png) center bottom no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: -6.9vw;
  left: 0;
}

#twitterlive .secHead {
  margin-bottom: 25px;
}

#twitterlive .badge {
  margin-bottom: 45px;
}

#twitterlive .eventTitle {
  margin-bottom: 30px;
}

#twitterlive .text {
  font-size: 23px;
  line-height: 1.9;
  margin-bottom: 60px;
}

#twitterlive .bnr {
  margin: 60px auto;
}

@media screen and (max-width: 599px) {
  #twitterlive {
    margin-top: 20vw;
    padding: 10vw 0 15vw 0;
  }
  #twitterlive:before {
    background-size: auto 7vw;
  }
  #twitterlive .secHead {
    margin-bottom: 5vw;
    padding: 0 16vw;
  }
  #twitterlive .badge {
    margin-bottom: 5vw;
    padding: 0 20vw;
  }
  #twitterlive .eventTitle {
    margin-bottom: 5vw;
    padding: 0 10vw;
  }
  #twitterlive .text {
    font-size: 4vw;
    margin-bottom: 5vw;
  }
  #twitterlive .btn {
    padding: 0 5vw;
  }
  #twitterlive .bnr {
    margin: 8vw auto 0 auto;
    padding: 0 10vw;
  }
}

/* ========================================
    FOOTER
======================================== */
#footer {
  background-color: #d8a758;
  padding: 50px 0 10px 0;
}

#footer .snsList {
  margin-bottom: 50px;
}

#footer .snsList ul li {
  display: inline-block;
  margin: 0 20px;
}

#footer .copyright {
  font-size: 12px;
}

@media screen and (max-width: 599px) {
  #footer {
    padding: 10vw 0 5vw 0;
  }
  #footer .snsList {
    margin-bottom: 5vw;
  }
  #footer .snsList ul li {
    display: inline-block;
    margin: 0 3vw;
    width: 12%;
  }
  #footer .copyright {
    font-size: 3vw;
  }
}

.multi {
  background: #FFF;
  padding-bottom: 30px;
}

@media (min-width: 768px) and (max-width: 1243px) {
  .multi {
    padding-bottom: 0px;
  }
}

@media (max-width: 767px) {
  .multi {
    padding-bottom: 0px;
  }
}

/* -- UTILITY -- */
/* 共通フッター用 もしくはブレイクポイントごとの表示指定 */
.pcDetail {
  display: block;
}

.spDetail {
  display: none;
}

.pc {
  display: block;
}

.tb {
  display: none;
}

.sp {
  display: none;
}

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

@media (max-width: 767px) {
  .pcDetail {
    display: none;
  }
  .spDetail {
    display: block;
  }
  .pc {
    display: none;
  }
  .tb {
    display: none;
  }
  .sp {
    display: block !important;
  }
}


/* ========================================
    REMODAL
======================================== */
.remodal-close {left:auto!important;right:0!important;}
#playlist .programInfo .program .comment {
    margin-top:15px;
}
#playlist .programInfo .program .comment span {
    display:inline-block;
    color:#FFF;
    padding:5px 20px;
    position: relative;
    letter-spacing:2px;
    cursor: pointer;
}

#playlist .programInfo .program#onemorning .comment span {background-color:#69ad55;}
#playlist .programInfo .program#skyrocket .comment span {background-color:#28a8c2;}
#playlist .programInfo .program .comment span::before{
    content:"";
    position: absolute;
    top:50%;
    margin-top:-4px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.remodal {max-width:1000px!important;}
.remodal.onemodal {background-color:#c4e6ba;}
.remodal.skymodal {background-color:#d5e6e6;}

.mdWrap {
    display: flex;
    flex-wrap: wrap;
    border-bottom:2px dashed #FFF;
    padding-bottom:20px;
    margin-bottom:20px;
}
.mdWrap:nth-last-of-type(1) {border-bottom:0;margin-bottom:0;}
.mdWrap .photo {width:20%;}
.mdWrap .photo img {margin:0 auto;text-align: center;}
.mdWrap .songlist {width:80%;text-align: left;}
.mdWrap .songlist dt {display:inline-block;font-size:20px;margin-bottom:10px;font-weight:500;}
.remodal.onemodal .mdWrap .songlist dt {background:linear-gradient(transparent 60%, #afd59a 60%);}
.remodal.skymodal .mdWrap .songlist dt {background:linear-gradient(transparent 60%, #c2d6d8 60%);}
.mdWrap .songlist dt:before {content:"♪";margin-right:5px;}
.mdWrap .songlist dd {margin-bottom:15px;padding-left:15px;font-weight:400;}
.mdWrap .songlist dd:nth-last-of-type(1) {margin-bottom:0;}

@media screen and (max-width: 599px) {
    .remodal {padding:3vw!important;}
    .mdWrap .photo {width:100%;margin-bottom:3vw;} 
    .mdWrap .photo img {width:40%;}
    .mdWrap .songlist {width:100%;}
    .remodal.onemodal .mdWrap .songlist dt {display:block;background-color:#afd59a;}
    .remodal.skymodal .mdWrap .songlist dt {display:block;background-color:#c2d6d8;}
    .mdWrap .songlist dd {
        padding-left:0;
    }
}