#mv {
  padding-top: 96px;
  padding-bottom: 0;
  background-color: #f8f6ec;
  overflow: hidden;
}
#mv .c-inner {padding-bottom: 120px;}
#mv .p-bgIllust > * {position: absolute;}
#mv .p-bgIllust > *:nth-child(1) {
  left: -32px;
  bottom: -8px;
}
#mv .p-bgIllust > *:nth-child(2) {
  right: -32px;
  bottom: -8px;
}
#mv .c-heading {text-align: center;}
#mv .c-heading > span {
  display: block;
  letter-spacing: 0.1em;
}
#mv .c-heading > span:nth-of-type(1) {
  font-size: 3.2rem;
  color: var(--color-2nd);
}
#mv .c-heading > span:nth-of-type(2) {
  font-size: 2.4rem;
  color: var(--color-2nd);
}
#mv .p-lead p {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-1st);
  text-align: center;
  letter-spacing: 0.1em;
  margin-top: .5em;
}
#list {
  top: -48px;
  padding-top: 0;
  padding-bottom: 64px;
  background-color: transparent;
}
#list .p-switch-tab > .c-flex > * {
  width: 240px;
  height: 48px;
  font-family: var(--font-family-1st);
  font-weight: bold;
  color: var(--color-2nd);
  text-align: center;
  line-height: 48px;
  margin: 0 .5em;
  background-color: #d6d6d6;
  border: 1px solid #d6d6d6;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
}
#list .p-switch-tab > .c-flex > *.is-active {
  background-color: #fff;
  cursor: auto;
}
#list .p-switch-tab > .c-flex > *.is-active::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  content: '';
  z-index: 100;
}
#list .p-switch-cont {
  padding-top: 64px;
  border-top: 1px solid #d6d6d6;
}
#list .p-switch-cont > .c-inner > .c-flex {display: none!important;}
#list .p-switch-cont > .c-inner > .c-flex.is-active {display: flex!important;}
#list .p-switch-cont > .c-inner > .c-flex > * {
  width: calc( (100% - (32px * 2)) / 3);
  margin-right: 32px;
  margin-top: 32px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 0 20px #b7b7b7;
}
#list .p-switch-cont > .c-inner > .c-flex > *:nth-child(3n) {margin-right: 0;}
#list .p-switch-cont > .c-inner > .c-flex > *:not(.is-comingsoon):hover {transform: translateY(-16px);}
#list .p-switch-cont > .c-inner > .c-flex > *.is-comingsoon {background-color: var(--color-2nd);}
#list .p-switch-cont > .c-inner > .c-flex > *.is-comingsoon p {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  font-family: var(--font-family-1st);
  font-size: 18px;
  color: #fff;
  text-align: center;
  transform: translateY(-50%);
}
#list .p-switch-cont .c-movie img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%!important;
  height: 100%!important;
}
#list .p-detail {
  display: block;
  padding: 24px 24px 0;
}
#list .p-detail-category {
  font-size: 12px;
  color: #a5a5a5;
}
#list .p-detail-message {
  font-size: 18px;
  min-height: calc(3em * 1.6);
  margin-top: .25em;
  margin-bottom: 1em;
}
#list .p-detail-name > .c-flex > * {
  width: 50%;
  font-family: var(--font-family-1st);
  font-size: 12px;
  color: var(--color-2nd);
}
#list .p-detail figure {
  border-top: 2px solid #ccc;
  padding-top: 8px;
}
#list .p-bottom {
  font-family: var(--font-family-1st);
  font-size: 12px;
  color: #fff;
  text-align: right;
  padding: 0.5em 0.75em;
  background-color: var(--color-2nd);
}
#list .p-bottom i {margin-left: .75em;}
#docdl .p-btn .c-btn span {color: #fff8da;}
#docdl .p-btn .c-btn:hover span {color: var(--color-2nd);}
@media screen and (max-width: 980px) {
  #mv {
    padding-top: 8vw;
  }
  #mv .c-inner {padding-bottom: 12vw;}
  #mv .p-bgIllust > *:nth-child(1) {
    left: -2vw;
    bottom: -1vw;
  }
  #mv .p-bgIllust > *:nth-child(2) {
    right: -2vw;
    bottom: -1vw;
  }
  #mv .c-heading > span:nth-of-type(1) {font-size: 4vw;}
  #mv .c-heading > span:nth-of-type(2) {font-size: 3vw;}
  #mv .p-lead p {font-size: 2vw;}

  #list {
    top: -6.4vw;
    padding-bottom: 5vw;
  }
  #list .p-switch-tab > .c-flex > * {
    width: 34vw;
    height: 6.4vw;
    font-size: 2vw;
    line-height: 6.4vw;
  }
  #list .p-switch-cont {padding-top: 4.8vw;}
  #list .p-switch-cont > .c-inner {width: calc(100% - 10vw);}
  #list .p-switch-cont > .c-inner > .c-flex > * {
    width: calc( (100% - (5vw * 1)) / 2);
    margin-right: 5vw;
    margin-top: 5vw;
  }
  #list .p-switch-cont > .c-inner > .c-flex > *.is-comingsoon {display: none;}
  #list .p-switch-cont > .c-inner > .c-flex > *:nth-child(3n) {margin-right: 5vw;}
  #list .p-switch-cont > .c-inner > .c-flex > *:nth-child(2n) {margin-right: 0;}
  #list .p-detail {padding: 2.8vw 2.8vw 0;}
  #list .p-detail-category {font-size: 1.6vw;}
  #list .p-detail-message {font-size: 2.4vw;}
  #list .p-detail-name > .c-flex > * {font-size: 1.6vw;}
  #list .p-bottom {font-size: 1.6vw;}

}
@media screen and (max-width: 640px) {
  #mv .c-heading > span:nth-of-type(1) {font-size: 5.6vw;}
  #mv .c-heading > span:nth-of-type(2) {font-size: 4.2vw;}
  #mv .p-lead p {font-size: 3vw;}

  #list {top: -8vw}
  #list .p-switch-tab > .c-flex > * {
    height: 8vw;
    font-size: 2.8vw;
    line-height: 8vw;
  }
  #list .p-switch-cont > .c-inner {width: calc(100% - 24vw);}
  #list .p-switch-cont > .c-inner > .c-flex > * {
    width: calc( (100% - (8vw * 0)) / 1);
    margin-right: 8vw;
    margin-top: 8vw;
  }
  #list .p-switch-cont > .c-inner > .c-flex > *:nth-child(2n) {margin-right: 8vw;}
  #list .p-switch-cont > .c-inner > .c-flex > *:nth-child(1n) {margin-right: 0;}
  #list .p-detail {padding: 4.8vw 4.8vw 0;}
  #list .p-detail-category {font-size: 2.4vw;}
  #list .p-detail-message {font-size: 4vw;}
  #list .p-detail-name > .c-flex > * {font-size: 3.2vw;}
  #list .p-bottom {font-size: 2.4vw;}

}
