@charset "utf-8";
/* メニューが２段になる境界(３段以降は考慮しない) */
@media (max-width: 725px) {
}

/* iPhone6 縦 */
@media only screen and (max-device-width: 640px),
 only screen and (max-device-width: 667px),
 only screen and (max-width: 480px) and (orientation : portrait){

  a:link, a:visited {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 10px 0;
  }

  #mobileMenuItems > a:link, #mobileMenuItems > a:visited {
    color: #fff;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 10px 0;
  }

  #mobileMenuWrapper {
    z-index: 1;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
  }
  .openMobileMenu {
    margin: 10px;
    width: 100px;
    height: 100px;
  }
  #mobileMenuItems {
    z-index: 1;
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 24px;
  }
  .mobile_menu_logo {
    margin: 5px 0;
    width: 234px;
  }
  .mobile_menu_news {
    margin: 5px 0;
    width: 142px;
  }
  .mobile_menu_trailer {
    margin: 5px 0;
    width: 202px;
  }
  .mobile_menu_introduction {
    margin: 5px 0;
    width: 366px;
  }
  .mobile_menu_story {
    margin: 5px 0;
    width: 166px;
  }
  .mobile_menu_cast_and_staff {
    margin: 5px 0;
    width: 294px;
  }
  .mobile_menu_theatre {
    margin: 5px 0;
    width: 224px;
  }
  .mobile_menu_credit {
    margin: 5px 0;
    width: 184px;
  }
  .mobile_menu_contact {
    margin: 5px 0;
    width: 234px;
  }

  .modal_section {
    width: 100vw;
  }
  .pcmode {
    display: none !important;
  }
  .spmode {
    display: block !important;
  }
  body {
    width: 100vw;
  }
  #menuWrapper {
    display: none;
  }

  #top {
    width: 100vw;
  }
  #trailer {
    display: block;
  }
  #introduction {
    display: block;

  }
  #story {
    display: block;

  }
  #cast_and_staff {
    display: block;

  }
  #theatre {
    display: block;

  }
  #credit {
    display: block;

  }
  
  .newsIndexItems {
    width: 90% !important;
    margin-top: 30px;
    display: inline-block;
    font-size: 3.0rem;
    color: #545454;
    padding-top: 30px;
  }
  .newsIndexItemWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
    /* margin-left: 28px; */
    line-height: 3.0rem;
    margin-bottom: 1.5rem;
  }
  .newsIndexItem {
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 0.7em;
    /* color: #fff; */
  }
  .newsIndexTitle {
    width: 100%;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 0.8em;
    /* color: #fff; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .menu_news_more {
    font-size: 2.0rem;
  }
  .trailerItems {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
  }
  .trailerFrameWrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .trailerItem {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 26px;
  }
  .trailerItem iframe {
    width: 100% !important;
    height: 100% !important;
    border: 2px solid #c19d5d;
  }
  .trailerTitle {
    margin: 20px;
    font-size: 2.5rem;
    /* 游明朝体 */
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  }
  .introductionItems {
    /* order 変更 */
    padding-top: 60px;
  }
  .introductionItems.header-img {
    order: 1 !important;
  }
  .introduction-header {
    order: 2 !important;
  }
  .introduction-images {
    order: 3 !important;
    width: 95%;
  }  
  .introduction-detail {
    order: 4 !important;
    width: 95% !important;
    font-size: 2.3rem;
  }
  .introductionItems.header-img {
    transform: scale(1.5);
  }

  /* storyItems */
  .storyItems {
    padding-top: 60px;
  }
  .story-detail {
    width: 95% !important;
    font-size: 2.3rem;
    padding-bottom: 1rem;
  }
  .cast_and_staff-img {
    transform: scale(1.5);

  }
  .castAndStaffSection {
    flex-direction: column;
    display: flex;
    justify-content: center;
    }
  .castAndStaffSectionItem {
    display: flex;
    flex-direction: row;
    padding: 0 80px;
  }
  .castAndStaffSectionItem img {
    /* width: 35%;
    height: 35%; */
    width: 240px;
    height: 240px;
    /* transform: scale(1.32); */
  }
  .castAndStaffSectionItemDetail {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    margin-left: 2rem;
  }
  .castAndStaffContainer {
    
  }
  #inlinewrap1 , #inlinewrap2, #inlinewrap3, #inlinewrap4, #inlinewrap5, #inlinewrap6, #inlinewrap7, #inlinewrap8, #inlinewrap9 {
    margin: 2rem 90px;
    height: 600px;
  }
  #inlinewrap1 img, #inlinewrap2 img, #inlinewrap3 img, #inlinewrap4 img, #inlinewrap5 img, #inlinewrap6 img, #inlinewrap7 img, #inlinewrap8 img, #inlinewrap9 img {
    width: 100%;
  }

  #inlinewrap10,
  #inlinewrap11,
  #inlinewrap12,
  #inlinewrap13,
  #inlinewrap14,
  #inlinewrap15,
  #inlinewrap16,
  #inlinewrap17,
  #inlinewrap18,
  #inlinewrap19,
  #inlinewrap20 {
    cursor: pointer;
    margin: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;  
  }

  .dli-plus {
    top: -70px;
    width: 5em;
}
  .cast_and_staff_text1 {
    font-size: 2.5rem;
    margin: 1rem 0;
  }
  .cast_and_staff_text2 {
    font-size: 3rem;
    margin: 1rem 0;
  }
  .cast_and_staff_text3 {
    font-size: 3rem;
    margin: 1rem 0;
  }
  .cast_and_staff_text1.small {
    color: #82bcdd;
    font-size: 2.0rem;
    margin: 5px 0;
    text-align: left;
  }
  .cast_and_staff_text2.small {
    font-size: 2.2rem;
    margin: 5px 0;
    text-align: left;
  }
  .cast_and_staff_text3.small {
    font-size: 1.7rem;
    text-align: left;
  }
  .castAndStaffSection img.photo {
    width: 240px;
    height: 240px;
  }
  .cast_and_staff_text4 {
    color: #82bcdd;
    font-size: 3.0rem;
    margin-bottom: 1rem;
  }
  .cast_and_staff_text4>.name {
    color: #000000;
    font-size: 3.0rem;
    margin-top: 1rem;
  }
  .cast_and_staff_text5 {
    font-size: 2.25rem;
    line-height: 3.5rem;
    margin: 0;
  }
  .cast_and_staff_text6 {
    margin-top: 2.0rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 1.0rem;
  }
  .order1 {
    order: 1;
  }
  .order2 {
    order: 2;
  }
  .order3 {
    order: 3;
  }
  .order4 {
    order: 4;
  }
  .order5 {
    order: 5;
  }
  /* theatreItems */
  .theatreItems {
    /* width: 90% !important; */
    display: inline-block;
    font-size: 3.0rem;
    color: #545454;
    padding-top: 60px;
  }
  .theatre {
    font-size: 2.0rem;
  }
  .theatre-date {
    width: 250px;
  }
  img.header-img {
    transform: scale(1.5);
    margin-bottom: 40px;
  }
  .extraItem {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  .extraItem img {
    width: 85%;
  }
  .contact_mobile {
    margin-top: 1rem;
    font-size: 1.1rem;
    margin-left: 25px;
    line-height: 22px;
    text-align: left;
    color: #878787;
    /* 游明朝体 */
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .contents.contents-content {
    background:#fff;
    padding-top: 30px;
    padding-bottom: 3.0rem;
  }
  .contents.contents-story {
    margin-bottom: 0;
  }
  .inline-contents1 {
    flex-direction: column;
    width: 85%;
  }
  .inline-contents1 > .image {
    text-align: center;
  }
  .inline-contents1 > .image > img {
    width: 80%;
    text-align: center;
  }
  .inline-contents2 {
    flex-direction: column;
    width: 85%;
  }
  .inline-contents2 > .image {
    text-align: center;
  }
  .inline-contents2 > .image > img {
    width: 80%;
    text-align: center;
  }
  .inline-contents3 {
    flex-direction: column;
    width: 85%;
  }
  .inline-contents3 > .image {
    text-align: center;
  }
  .inline-contents3 > .image > img {
    width: 80%;
    text-align: center;
  }
  .inline-contents4 {
    flex-direction: column;
    width: 85%;
  }
  .inline-contents4 > .image {
    text-align: center;
  }
  .inline-contents4 > .image > img {
    width: 80%;
    text-align: center;
  }


  .inline-contents4,
  .inline-contents5,
  .inline-contents6,
  .inline-contents7,
  .inline-contents8,
  .inline-contents9 {
    flex-direction: column;
    width: 85%;
  }

  .inline-contents4 > .image,
  .inline-contents5 > .image,
  .inline-contents6 > .image,
  .inline-contents7 > .image,
  .inline-contents8 > .image,
  .inline-contents9 > .image {
      text-align: center;
  }

  .inline-contents4 > .image > img,
  .inline-contents5 > .image > img,
  .inline-contents6 > .image > img,
  .inline-contents7 > .image > img,
  .inline-contents8 > .image > img,
  .inline-contents9 > .image > img {
    width: 50%;
    text-align: center;
  }



  .inlineContentsItem {
    align-items: center;
  }

  .inline-contents {
    width: 90%;
    margin-left: 25px;
  }
  .inline-contents.name {
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
    line-height: 3rem;
  }
  .inline-contents.name_kana {
    font-size: 2.0rem;
    line-height: 4rem;
    color: #000;
  }
  .inline-contents.detail {
    font-size: 2.1rem;
    line-height: 2.8rem;
    color: #000;
  }
  
  .creditItems {
    /* background-color: #A4CACC; */
    /* background-image: linear-gradient(0deg, #A4CACC 0%, #FEFEFE 100%); */
  }
  .creditItems img {
    transform: scale(1.5);
  }
  .creditItems img.spmode {
    transform: scale(1.3);
  }
  .creditItem {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.7em;
    margin-bottom: 30px;
    color: #fff;
    margin: 2rem;
  }
  .contents.contents-credit {
    background-color: #003366;
    margin-bottom: 0;
  }
  .copyright {
    /* background: #669999; */
    font-size: 2.0rem;
    padding: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #mailformpro {
    /* width: 100vw; */
  }
  .mailform {
    flex-direction: column;
    width: 95%;
    font-size: 2.5rem;
    /* margin: 30px; */
  }
  dt {
    width: 90%;
    padding-left: 0;
  }
  dd {
    margin-bottom: 5rem;
  }
  .must {
    font-size: 2.0rem;
  }
  .any {
    font-size: 2.0rem;
  }
  .modal-body iframe {
    height: 50vh;
  }
  .mfp_col5 input {
    border-radius: 5px;
    border: 1px solid #000;
    font-size: 2.5rem;
    padding: 15px;
  }
  .mfp_col10 input {
    border-radius: 5px;
    border: 1px solid #000;
    font-size: 2.5rem;
    padding: 15px;
  }
  .mfp_col10 textarea {
    border-radius: 5px;
    border: 1px solid #000;
    font-size: 2.5rem;
    padding: 15px;
  }
  .mfp-close-btn-in .mfp-close {
    color: #333;
    font-size: 6rem !important;
    position: absolute;
    right: 2rem;
    top: 0;
  }
  .modal-title img.header-img {
    margin: 2rem 0 1rem 0;
  }
  .mfp_button {
    font-size: 2.5rem;
    padding: 1rem 2rem;
  }
  .contactItems img.header-img {
    transform: scale(2.5);
  }
  .creditItems img.header-img {
    transform: scale(2.5);
    margin-top: 40px;
  }
  .contents-news img.header-img {
    transform: scale(2.5);
  }
  .contents.contents-trailer,
  .contents.contents-introduction,
  .contents.contents-story,
  .contents.contents-theatre {
    padding-top: 0px;
  }
  .contents.contents-extra,
  .contents.contents-content,
  .contents.contents-credit,
  .contents.contents-cast_and_staff {
    padding-top: 0px;
  }
  .castAndStaffItems {
    margin-top: 40px;
  }

}