@media screen and (max-width: 991px) {
  /* common
  -------------------- */
  .masthead .logotitle {
    width: 80%; }
    .masthead .logotitle .logocopy {
      padding: 40px 65px; }
  .masthead .play-date {
    margin-top: 100px;
    margin-left: 38%; }

  /* hader
  -------------------- */
  #logo {
    width: 258px;
    height: 40px; }

  /* top
  -------------------- */
  .mds {
    font-size: 2.8rem; }

  .programbox .organization {
    flex-wrap: wrap; } }
@media screen and (max-width: 767px) {
  /* common
  -------------------- */
  .section {
    padding-top: 10%;
    padding-bottom: 10%; }

  .masthead .logotitle {
    width: 80%; }
    .masthead .logotitle .logocopy {
      padding: 4% 6%; }
    .masthead .logotitle .logomark {
      font-size: 2.1rem; }
    .masthead .logotitle .logomark br {
      display: inline; }
    .masthead .logotitle .logomark img {
      width: auto;
      height: auto; }
  .masthead .play-date {
    background-color: #dd6890;
    color: #fff;
    width: 140px;
    height: 140px;
    margin-top: 60%;
    margin-left: 0;
    padding-top: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .masthead .play-date .text {
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.2; }
    .masthead .play-date .textdate {
      font-size: 2.4rem;
      line-height: 1.2; }

  .masthead.subhead {
    min-height: 160px;
    margin-top: 100px; }
    .masthead.subhead .logotitle {
      top: 20px; }
    .masthead.subhead .logotitle .logomark img {
      width: 200px;
      height: 200px; }

  .slide .headimg {
    height: calc(100vh - 51px); }

  .slide01 {
    background: transparent url(../img/mainimage2.jpg) no-repeat 50% 50%; }

  .sm-mt-40 {
    margin-top: 40px; }

  /* parts
  -------------------- */
  .title {
    align-items: start; }

  /* nav
  -------------------- */
  .navbar-toggler {
    color: #fff; }

  #mainNav .navbar-brand {
    padding: 1rem 0; }

  #mainNav li {
    margin: 0 1.6rem; }

  #mainNav.navbar-shrink li {
    margin: 0 1.6rem; }

  #mainNav ul ul {
    visibility: visible;
    opacity: 1.0;
    position: static; }

  .navbar-nav {
    background-color: #f8f8f8;
    margin-bottom: 1rem;
    padding: 1rem; }
    .navbar-nav li {
      border-bottom: 1px solid #ccc; }
    .navbar-nav .nav-link {
      padding-right: 10px;
      padding-left: 10px; }

  .nav-item a {
    display: block;
    padding: 20px; }
  .nav-item a:link, .nav-item a:visited {
    color: black; }
  .nav-item a:hover {
    color: #f5c70d; }

  .navbar-toggler {
    font-size: 1.8rem; }
    .navbar-toggler span {
      display: block;
      font-size: 1.3rem; }

  /* top
  -------------------- */
  .programbox h2 > .aux {
    margin-top: 10px; }
  .programbox .cat {
    font-size: 1.3rem; }
  .programbox .viewing h4 {
    padding: 5px 20px; }
  .programbox .staff {
    margin-bottom: 20px; }

  .onlineprogram {
    padding: 10% 5%; }

  /* backto
  -------------------- */
  #backto {
    bottom: 85px; }

  /* footer
  -------------------- */
  footer #copyright {
    margin-bottom: 85px;
    padding: 40px 0; } }
@media screen and (max-width: 575px) {
  .masthead.subhead {
    height: auto; }
    .masthead.subhead .logotitle .logomark img {
      width: 120px;
      height: 120px; } }