/*
* breakpoint : 1024でSP
* vwの算出　PC : 値 / 1920 * 100vw  SP : 値 / 1024 * 100vw
*/
.calendarWrap{
  width: 83.33vw; /* 1600px */
  margin: 0 auto;
  padding: 2.08vw 0.52vw; /* 40px 10px */
  background: #212229;
}
@media screen and (max-width: 1024px) {
  .calendarWrap{
    width: 92.19vw; /* 1024px */
    padding: 7.81vw 0 5.47vw; /* 80px 0 56px */
  }
  .calendarContent{
    padding: 0 2.93vw 0 0; /* 0 30px 0 0 */
  }
}


/*-------------------------------------------------------------------*/
/* calendarDate(年月) */
/*-------------------------------------------------------------------*/
.calendarDate{
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendarDate.top{
  margin-bottom: 1.67vw; /* 32px */
}
@media screen and (max-width: 1024px) {
  .calendarDate.top{
    margin-bottom: 7.81vw; /* 80px */
  }
}
.calendarDate.bottom{
  margin: 2.6vw 0 1.04vw; /* 50px 0 20px */
}
@media screen and (max-width: 1024px) {
  .calendarDate.bottom{
    margin: 9.77vw 0 1.95vw; /* 100px 0 20px */
  }
}
.calendarDate span{
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 5.4rem;
  color: #fff;
  letter-spacing: .1em;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .calendarDate span{
    font-size: 10.0rem;
  }
}
.calendarPrev,
.calendarNext{
  width: 2.4vw; /* 46px */
  height: 2.4vw; /* 46px */
  background: #fff;
  border-radius: 50%;
  display: block;
  position: relative;
  transform: translateY(2px);
}
@media screen and (max-width: 1024px) {
  .calendarPrev,
  .calendarNext{
    width: 7.42vw; /* 76px */
    height: 7.42vw; /* 76px */
  }
}
.calendarPrev svg,
.calendarNext svg{
  width: 0.63vw; /* 12px */
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.83vw; /* 16px */
}
@media screen and (max-width: 1024px) {
  .calendarPrev svg,
  .calendarNext svg{
    width: 1.95vw; /* 20px */
    left: 2.54vw; /* 26px */
  }
}
.calendarPrev{
  margin-right: 2.08vw; /* 40px */
}
@media screen and (max-width: 1024px) {
  .calendarPrev{
    margin-right: 5.86vw; /* 60px */
  }
}
.calendarNext{
  margin-left: 2.08vw; /* 40px */
  transform: scaleX(-1);
}
@media screen and (max-width: 1024px) {
  .calendarNext{
    margin-left: 5.86vw; /* 60px */
  }
}

/*-------------------------------------------------------------------*/
/* calendarHead(曜日) */
/*-------------------------------------------------------------------*/
.calendarHead{
  margin-bottom: 1.04vw; /* 20px */
  display: grid;
  grid-template-columns: repeat(
    7,
    1fr
  );
  column-gap: 0.52vw; /* 10px */
  row-gap: 0;
}
@media screen and (max-width: 1024px) {
  .calendarHead{
    display: none;
  }
}
.calendarHeadItem{
  padding-bottom: 0.83vw; /* 16px */
  font-weight: 700;
  font-size: 1.8rem;
  color: #fff;
  text-align: center;
  box-shadow: 0 -2px 0 0 #696B7B inset;
}
.calendarHeadItem.sunday{
  color: #EB3344;
  box-shadow: 0 -2px 0 0 #EB3344 inset;
}
.calendarHeadItem.saturday{
  color: #33A7FF;
  box-shadow: 0 -2px 0 0 #33A7FF inset;
}


/*-------------------------------------------------------------------*/
/* calendarRow(行) */
/*-------------------------------------------------------------------*/
.calendarRow{
  min-height: 11.35vw; /* 218px */
  display: grid;
  grid-template-columns: repeat(
    7,
    1fr
  );
  column-gap: 0.52vw; /* 10px */
  row-gap: 0;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .calendarRow{
    height: auto !important;
    display: block;
  }
}
.calendarCell + .calendarRow,
.calendarRow + .calendarRow{
  margin-top: 0.52vw; /* 10px */
}
@media screen and (max-width: 1024px) {
  .calendarCell + .calendarRow,
  .calendarRow + .calendarRow{
    margin-top: 1.95vw; /* 20px */
  }
}

/*-------------------------------------------------------------------*/
/* calendarCell(セル) */
/*-------------------------------------------------------------------*/
.calendarCell{
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .calendarCell{
    height: auto;
    display: flex;
  }
  .calendarCell + .calendarCell{
    margin-top: 1.95vw; /* 20px */
  }
}
.calendarCellDay{
  display: none;
}
@media screen and (max-width: 1024px) {
  .calendarCellDay{
    width: 8.79vw; /* 90px */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 3.8rem;
    letter-spacing: .04em;
    color: #fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    box-shadow: -0.2vw 0 0 0 #696B7B inset;
  }
  .calendarCellDay.sunday{
    color: #EB3344;
    box-shadow: -0.2vw 0 0 0 #EB3344 inset;
  }
  .calendarCellDay.saturday{
    color: #33A7FF;
    box-shadow: -0.2vw 0 0 0 #33A7FF inset;
  }
}
.calendarCellContent{
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .calendarCellContent{
    width: 100%;
    height: auto;
  }
}
.calendarCell > .calendarCellContent{
  padding: 0.52vw; /* 10px */ 
  background: #fff;
}
@media screen and (max-width: 1024px) {
  .calendarCell > .calendarCellContent{
    padding: 2.44vw 2.93vw 3.42vw; /* 25px 30px 35px */
  }
}
.calendarCellDate{
  font-weight: 900;
  font-size: 1.6rem;
  color: #08020F;
  letter-spacing: .04em;
}
@media screen and (max-width: 1024px) {
  .calendarCellDate{
    font-size: 4.2rem;
  }
}
/* notCurrent(当日の場合) */
.calendarCell.current .calendarCellContent{
  box-shadow: 0 0 0 4px #FF2BF0 inset;
}
@media screen and (max-width: 1024px) {
  .calendarCell.current .calendarCellContent{
    box-shadow: 0 0 0 0.78vw #FF2BF0 inset; /* 8px */
  }
}
.calendarCell.notCurrent .calendarCellDate{
  color: #CACACA;
}
/* notCurrent(その月の日じゃない場合) */
.calendarCell.notCurrent .calendarCellContent{
  background: #393A43;
}
.calendarCell.notCurrent .calendarCellDate{
  color: #CACACA;
}


/*-------------------------------------------------------------------*/
/* calendarBelt(PC用) */
/*-------------------------------------------------------------------*/
.calendarBelt{
  position: absolute;
  top: 1.98vw; /* 38px */
  z-index: 1;
}
.calendarBeltItem{
  position: absolute;
}
.calendarBeltItem[date-span="1"]{
  width: 10.31vw; /* 198px */
}
.calendarBeltItem[date-span="2"]{
  width: 22.14vw; /* 425px */
}
.calendarBeltItem[date-span="3"]{
  width: 33.96vw; /* 652px */
}
.calendarBeltItem[date-span="4"]{
  width: 45.78vw; /* 879px */
}
.calendarBeltItem[date-span="5"]{
  width: 57.6vw; /* 1106px */
}
.calendarBeltItem[date-span="6"]{
  width: 69.43vw; /* 1333px */
}
.calendarBeltItem[date-span="7"]{
  width: 81.25vw; /* 1560px */
}

.calendarBeltItem[start-span="0"]{
  margin-left: 0.52vw; /* 10px */
}
.calendarBeltItem[start-span="1"]{
  margin-left: 12.34vw; /* 237px */
}
.calendarBeltItem[start-span="2"]{
  margin-left: 24.17vw; /* 464px */
}
.calendarBeltItem[start-span="3"]{
  margin-left: 35.99vw; /* 691px */
}
.calendarBeltItem[start-span="4"]{
  margin-left: 47.81vw; /* 918px */
}
.calendarBeltItem[start-span="5"]{
  margin-left: 59.64vw; /* 1145px */
}
.calendarBeltItem[start-span="6"]{
  margin-left: 71.46vw; /* 1372px */
}

.calendarBeltItem[fill-plan="1"]{
  /* 25px 5px */
  margin-top: calc((1.3vw * 1) + (0.26vw * 1)); 
}
.calendarBeltItem[fill-plan="2"]{
  margin-top: calc((1.3vw * 2) + (0.26vw * 2));
}
.calendarBeltItem[fill-plan="3"]{
  margin-top: calc((1.3vw * 3) + (0.26vw * 3));
}
.calendarBeltItem[fill-plan="4"]{
  margin-top: calc((1.3vw * 4) + (0.26vw * 4));
}
.calendarBeltItem[fill-plan="5"]{
  margin-top: calc((1.3vw * 5) + (0.26vw * 5));
}
.calendarBeltItem[fill-plan="6"]{
  margin-top: calc((1.3vw * 6) + (0.26vw * 6));
}
.calendarBeltItem[fill-plan="7"]{
  margin-top: calc((1.3vw * 7) + (0.26vw * 7));
}
.calendarBeltItem[fill-plan="8"]{
  margin-top: calc((1.3vw * 8) + (0.26vw * 8));
}
.calendarBeltItem[fill-plan="9"]{
  margin-top: calc((1.3vw * 9) + (0.26vw * 9));
}
.calendarBeltItem[fill-plan="10"]{
  margin-top: calc((1.3vw * 10) + (0.26vw * 10));
}
.calendarBeltItem[fill-plan="11"]{
  margin-top: calc((1.3vw * 11) + (0.26vw * 11));
}
.calendarBeltItem[fill-plan="12"]{
  margin-top: calc((1.3vw * 12) + (0.26vw * 12));
}
.calendarBeltItem[fill-plan="13"]{
  margin-top: calc((1.3vw * 13) + (0.26vw * 13));
}
.calendarBeltItem[fill-plan="14"]{
  margin-top: calc((1.3vw * 14) + (0.26vw * 14));
}
.calendarBeltItem[fill-plan="15"]{
  margin-top: calc((1.3vw * 15) + (0.26vw * 15));
}
.calendarBeltItem[fill-plan="16"]{
  margin-top: calc((1.3vw * 16) + (0.26vw * 16));
}
.calendarBeltItem[fill-plan="17"]{
  margin-top: calc((1.3vw * 17) + (0.26vw * 17));
}
.calendarBeltItem[fill-plan="18"]{
  margin-top: calc((1.3vw * 18) + (0.26vw * 18));
}
.calendarBeltItem[fill-plan="19"]{
  margin-top: calc((1.3vw * 19) + (0.26vw * 19));
}
.calendarBeltItem[fill-plan="20"]{
  margin-top: calc((1.3vw * 20) + (0.26vw * 20));
}
.calendarBeltItem[fill-plan="21"]{
  margin-top: calc((1.3vw * 21) + (0.26vw * 21));
}
.calendarBeltItem[fill-plan="22"]{
  margin-top: calc((1.3vw * 22) + (0.26vw * 22));
}
.calendarBeltItem[fill-plan="23"]{
  margin-top: calc((1.3vw * 23) + (0.26vw * 23));
}
.calendarBeltItem[fill-plan="24"]{
  margin-top: calc((1.3vw * 24) + (0.26vw * 24));
}
.calendarBeltItem[fill-plan="25"]{
  margin-top: calc((1.3vw * 25) + (0.26vw * 25));
}
.calendarBeltItem[fill-plan="26"]{
  margin-top: calc((1.3vw * 26) + (0.26vw * 26));
}
.calendarBeltItem[fill-plan="27"]{
  margin-top: calc((1.3vw * 27) + (0.26vw * 27));
}
.calendarBeltItem[fill-plan="28"]{
  margin-top: calc((1.3vw * 28) + (0.26vw * 28));
}
.calendarBeltItem[fill-plan="29"]{
  margin-top: calc((1.3vw * 29) + (0.26vw * 29));
}
.calendarBeltItem[fill-plan="30"]{
  margin-top: calc((1.3vw * 30) + (0.26vw * 30));
}

.calendarBeltItem .calendarItem{
  margin-top: 0;
}


/*-------------------------------------------------------------------*/
/* calendarItem(項目) */
/*-------------------------------------------------------------------*/
.calendarItem{
  margin-top: 0.52vw; /* 10px */
  /* padding: 0.26vw 0.52vw; */
  padding: 0.13vw 0.52vw;
  /* 6px 10px */
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: .04em;
  line-height: 1.28571;
  border-radius: 0.31vw; /* 6px */
  display: block;
}
@media print, screen and (min-width:1025px) {
  .calendarItem{
    transition: opacity .3s;
  }
  .calendarItem:hover{
    opacity: .6;
  }
}


.calendarItem.info{
  background-color: #53BCC8;
}


.calendarItem.live-event{
  background-color: #FFC42B;
}


.calendarItem.media{
  background-color: #FF8743;
}

.calendarItem.discography{
  background-color: #FFA2D4;
}


@media screen and (max-width: 1024px) {
  .calendarItem{
    margin-top: 1.37vw; /* 14px */
    padding: 3.32vw 2.93vw; /* 34px 30px */
    font-size: 3.2rem;
    line-height: 1.3125;
    border-radius: 0.59vw;
  }
  .calendarItem + .calendarItem{
    margin-top: 0.59vw;
  }
}



/*-------------------------------------------------------------------*/
/* calendarCategory(スケジュールページ用カテゴリ) */
/*-------------------------------------------------------------------*/
.calendarCategory{
  width: 83.33vw; /* 1600px */
  margin: 0 auto 4.17vw;
}
@media print, screen and (max-width:1024px) {
  .calendarCategory {
    width: 83.3984375vw;
    margin: 0 auto 9.67vw;
  }
}
.calendarCategory > ul {
  margin: 0 -.5208333333vw -1.0416666666vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}
@media print, screen and (max-width:1024px) {
  .calendarCategory > ul {
    margin: 0 -1.46484375vw -2.9296875vw;
  }
}
.calendarCategory > ul li {
  margin: 0 .5208333333vw 1.0416666666vw
}
@media print, screen and (max-width:1024px) {
  .calendarCategory > ul li {
    margin: 0 1.46484375vw 2.9296875vw
  }
}
.calendarCategory > ul li a {
  height: 2.7083333333vw;
  padding: 0 1.5625vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: Barlow, sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2em;
  position: relative
}
@media print, screen and (max-width:1024px) {
  .calendarCategory > ul li a {
    height: 10.3515625vw;
    padding: 0 2.9296875vw;
    font-size: 32px;
    font-size: 3.2rem
  }
}
.calendarCategory > ul li a:after {
  content: "";
  width: 100%;
  height: 0;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: #fff
}
.calendarCategory > ul li a > p {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  z-index: 1
}
.calendarCategory > ul li a > p:after {
  content: "";
  width: 100%;
  height: .1041666667vw;
  min-height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: #fff;
  z-index: -1
}
@media print, screen and (max-width:1024px) {
  .calendarCategory > ul li a > p:after {
    height: .390625vw
  }
}
@media print, screen and (min-width:1025px) {
  .calendarCategory > ul li a:after {
    -webkit-transition: .3s;
    transition: .3s
  }
  .calendarCategory > ul li a > p {
    -webkit-transition: .3s;
    transition: .3s
  }
  .calendarCategory > ul li a > p:after {
    -webkit-transition: width .2s .3s;
    transition: width .2s .3s
  }
  .calendarCategory > ul li a:hover {
    color: #000!important
  }
  .calendarCategory > ul li a:hover:after {
    width: 100%;
    height: 100%;
    -webkit-transition-delay: .2s;
    transition-delay: .2s
  }
  .calendarCategory > ul li a:hover > p {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
  }
  .calendarCategory > ul li a:hover > p:after {
    -webkit-transition: width .2s, -webkit-transform .2s;
    transition: width .2s, -webkit-transform .2s;
    transition: width .2s, transform .2s;
    transition: width .2s, transform .2s, -webkit-transform .2s;
    width: calc(100% + ((30 / 1920) * 100vw))
  }
}


.calendarCategory > ul li.info a {
  color: #53BCC8
}
.calendarCategory > ul li.info a:after {
  background: #53BCC8
}
@media print, screen and (min-width:1025px) {
  .calendarCategory > ul li.info a:hover:after {
    background: #53BCC8
  }
}
.calendarCategory > ul li.info a > p:after {
  background: #53BCC8
}


.calendarCategory > ul li.live-event a {
  color: #FFC42B
}
.calendarCategory > ul li.live-event a:after {
  background: #FFC42B
}
@media print, screen and (min-width:1025px) {
  .calendarCategory > ul li.live-event a:hover:after {
    background: #FFC42B
  }
}
.calendarCategory > ul li.live-event a>p:after {
  background: #FFC42B
}


.calendarCategory > ul li.media a {
  color: #FF8743
}
.calendarCategory > ul li.media a:after {
  background: #FF8743
}
@media print, screen and (min-width:1025px) {
  .calendarCategory > ul li.media a:hover:after {
    background: #FF8743
  }
}
.calendarCategory > ul li.media a>p:after {
  background: #FF8743
}


.calendarCategory > ul li.discography a {
  color: #FFA2D4
}
.calendarCategory > ul li.discography a:after {
  background: #FFA2D4
}
@media print, screen and (min-width:1025px) {
  .calendarCategory > ul li.discography a:hover:after {
    background: #FFA2D4
  }
}
.calendarCategory > ul li.discography a>p:after {
  background: #FFA2D4
}


.calendarCategory > ul li.current a {
  color: #000!important
}
.calendarCategory > ul li.current a:after {
  height: 100%
}