@charset "utf-8";
/* =============================================================================
   page
   ========================================================================== */
      /* page-module 開演時間部分等のブロック */
      .pm-block{         
         border: 1px solid #e5e5e5;
         background: #fff;
         padding: calc(40/1920*100vw);
         margin: 0 auto calc(30/1920*100vw);
      }
      .pm-blockItem{
         background-color: #eeece7;
         padding: calc(40/1920*100vw);
      }
      .pm-blockItemText{
         font-size: 16px;
      }
      .pm-blockItemNote{
         font-size: 14px;
      }
      @media only screen and (max-width: 1280px) {
      }
      @media only screen and (max-width: 768px) {
         .pm-block{
            padding: calc(40/750*100vw);
            margin: 0 auto calc(30/750*100vw);
         }
         .pm-blockItem{
            padding: calc(40/750*100vw);
         }
      }

   /* top ----------------------*/
   /* story */
   .p-top__story{
      width: calc(1710/1920*100vw);
      margin: calc(40/1920*100vw) auto  calc(120/1920*100vw);
      background: url(../../assets/images/top/story_header.jpg);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: contain;
   }
   .p-top__storyWrap{
      -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     width: calc(1340/1920*100vw);
   }
   .p-top__storyText{
      width: calc(640/1340*100%);
   }

   .p-top__storyTextTitle{
      display: block;
      color: #fff;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      font-size: calc(41/1920*100vw);
      font-weight: bold;
      line-height: 1.2em;
      padding: 0 5px;
      margin: calc(170/1920*100vw) auto calc(50/1920*100vw);
      text-align: center;
      width: 90%;
   }
   .p-top__storyTextText{
      display: block;
      background: rgba(255, 255, 255, .8);
      padding: calc(55/640*100%);
      font-size: calc(24/1920*100vw);
   }
   .p-top__storyTextText p{
      padding-bottom: 20px;
   }
   .p-top__storyImg{
      display: block;
      width: calc(640/1340*100%);
      margin-top: calc(440/1920*100vw);
   }
   .p-top__storyImgAppearance{
      width: 100%;
      text-align: left;
   }
   @media only screen and (max-width: 1024px) {
      .p-top__story{
         width: 90%;
         /* margin: calc(40/1024*100vw) auto  calc(120/1024*100vw); */
      }
      .p-top__storyWrap{
         -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 90%;
      }
   
      .p-top__storyText{
         width: calc(500/1024*100%);
      }
   
      .p-top__storyTextTitle{
         font-size: calc(30/1024*100vw);
         margin: calc(40/1024*100vw) auto calc(10/1024*100vw);
      }
      .p-top__storyTextText{
         font-size: calc(20/1024*100vw);
      }
   }


   @media only screen and (max-width: 768px) {
      .p-top__story{
         background-size: auto 340px;
         width: 100%;;
         margin-top: calc(40/768*100vw);
      }
      .p-top__storyWrap{width: 90%;}
      .p-top__storyText{width: 100%;}
      .p-top__storyTextTitle{
         margin-top: 50px;
         margin-bottom: 50px;
         font-size: calc(41/750*100vw);
      }
      .p-top__storyTextText{
         margin: 0 10px;
         font-size: calc(24/750*100vw);
      }
      .p-top__storyImg{
         width: 100%;
         margin-top: 10px;
      }
      .p-top__storyImg img{
      }
      .p-top__storyImgAppearance{}
      .p-top__storyImgAppearance img{
         width: auto;
      }
   }

   /* nav */
   .p-top__nav{
      width: calc(1280/1920*100vw);
      max-width: 1280px;
      margin: 0 auto calc(100/1920*100vw);
   }
   .p-top__navBtn{
      width: calc(540/1280*100%);
   }
   @media only screen and (max-width: 768px) {
      .p-top__nav{
         width: calc(650/750*100%);
         max-width: unset;
      }
      .p-top__navBtn{
         width: 100%;
         margin-bottom: 20px;
      }
      .p-top__navBtn img{width: 100%;}
   }

    /* precincts */
   .p-top__precincts{}
   .p-top__precinctsList{
      width: calc(1710/1920*100vw);
      margin: 0 auto 65px;
   }
   .p-top__precinctsListItem{
      display: block;
      width: calc(525/1920*100vw);
   }
   .p-top__precinctsListItem img{
      width: calc(525/1920*100vw);
   }
   .p-top__precinctsListItem p{
      text-align: left;
   }
   @media only screen and (max-width: 768px) {
      .p-top__precinctsList{
         width: calc(650/750*100%);
      }
      .p-top__precinctsListItem{width: 100%;}
      .p-top__precinctsListItem img{width: 100%;}
   }




  /* Hours of Operation */
   .p-top__open{
      margin: 0 auto 65px;
      text-align: center;
      max-width: 1280px;
      width: calc(1280/1920*100vw);
   }
   .p-top__openTime{
      border: 1px solid #e5e5e5;
      background: #faf9f7;
      padding: 10px 0;
      margin: 0 auto 30px;
   }
   .p-top__openTimeList{
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
         align-items: stretch;
 
   }
   .p-top__openTimeListItem{
      border-right: 1px solid #e5e5e5;
      width: 50%;
      margin-left: calc(100/1920*100vw);
      padding-right: calc(50/1920*100vw);
      justify-content: center;
      align-items: center;
   }
   .p-top__openTimeListItem:last-child{
      border-right: none;
   }
   .p-top_openTimeListTitle{
      background: #eeece7;
      width: 50%;
      font-size: calc(20/1920*100vw);
      vertical-align: middle;
      padding: 10px 0;
   }
   .p-top_openTimeListData{
      font-weight: bold;
      width: 50%;
      font-size: calc(22/1920*100vw);
      vertical-align: middle;
      padding: 10px;
   }
   .p-top__openNote{
      color: #4d4d4d;
      text-align: left;
      margin-bottom: 20px;
      font-size: calc(16/1920*100vw);
      line-height: 1.2em;
   }
   .p-top__openNoteTitle{
      color: #4d4d4d;
      font-weight: bold;
      text-align: left;
      font-size: calc(16/1920*100vw);
      line-height: 1.2em;
   }
   @media only screen and (max-width: 1024px) {
      .p-top_openTimeListTitle{
         font-size: calc(20/1024*100vw);
      }
      .p-top_openTimeListData{
         font-size: calc(22/1024*100vw);
      }
      .p-top__openNote{
         font-size: calc(16/1024*100vw);
      }
      .p-top__openNoteTitle{
         font-size: calc(16/1024*100vw);
      }
   }
   @media only screen and (max-width: 768px) {
      .p-top__open{width: calc(650/750*100%);}
      .p-top__openTime{
         padding: 20px;
      }
      .p-top__openTimeListItem{
         border-right: none;
         width: 100%;
         margin-left: 0;
         padding-right: 0;
      }
   
      .p-top_openTimeListTitle{
         width: 100%;
         margin-left: 0;
         font-size: calc(30/750*100vw);
         height: calc(65/750*100vw);
         line-height: calc(65/750*100vw);
         padding: 0;
      }
      .p-top_openTimeListData{
         width: 100%;
         border-right: none;
         font-size: calc(37/750*100vw);
         height: calc(90/750*100vw);
         line-height: calc(90/750*100vw);
         padding: 0;
      }
      .p-top__openNote{
         font-size: 16px;
      }
      .p-top__openNoteTitle{
         font-size: 16px;
      }
   }








   /* fees */
   .p-top__fees{
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      max-width: 1280px;
      width: calc(1280/1920*100vw);
   }
   .p-top__feesTable{
      width: 100%;
   }
   .p-top__feesTable td,
   .p-top__feesTable th{
      padding: calc(25/1920*100vw);
      font-size: 18px;
      width: 25%;
   }
   .p-top__feesTable tr{
      border-left: 1px solid #e5e5e5;
      border-right: 1px solid #e5e5e5;
   }

   .p-top__feesTrHead{
      border: 1px solid #e5e5e5;
      background: #eeece7;
   }
   .p-top__feesTh{
      border: 1px solid #e5e5e5;
      border-right: 1px dotted #c2c2c2;
      border-left: 1px dotted #c2c2c2;
      font-weight: normal;
   }
   .p-top__feesTrData{
      border: 1px solid #e5e5e5;
      border-right: 1px dotted #c2c2c2;
      border-left: 1px dotted #c2c2c2;
   }
   .p-top__feesTd{
      border: 1px solid #e5e5e5;
      border-right: 1px dotted #c2c2c2;
      border-left: 1px dotted #c2c2c2;
   }

   .p-top__feesLine{
      border-right: 1px solid #e5e5e5;
   }
   @media only screen and (max-width: 768px) {
      .p-top__fees{width: calc(650/750*100%);}
      .p-top__feesTable td,
      .p-top__feesTable th{
         padding: calc(15/750*100vw);
         font-size: 18px;
      }
   }







   /* Address Inquiries */
   .p-top__addin{
      max-width: 1280px;
      width: calc(1280/1920*100vw);
      -webkit-box-align: stretch;
     -ms-flex-align: stretch;
        align-items: stretch;
   }
   .p-top__addinWrap{
      max-width: 600px;
      width: calc(600/1920*100vw);
      text-align: center;
   }
   .p-top__addinTitle{
   }
   .p-top__addinItem{
      /* height: 60%; */
   }
   .p-top__addinItem div{
      height: 100%;
   }

   .p-top__addinItem div p{}
   @media only screen and (max-width: 768px) {
      .p-top__addin{
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         max-width: unset;
         width: calc(650/750*100%);
      }
      .p-top__addinWrap{
         max-width: unset;
         width: 100%;
         margin-bottom: calc(110/750*100%);
      }   
      .p-top__addinWrap:last-child{
         margin-bottom: 0;
      }   
   }






   /* location */
   .p-top__location{
      height: calc(340/1920*100vw);
      background: url(../../assets/images/top/location_bg.jpg);
      background-repeat: no-repeat;
      background-position: top center;
      background-size: contain;
      position: relative;
   }
   .p-top__locationBtn{
      width: calc(353/1920*100vw);
      height: calc(92/1920*100vw);
      background: url(../../assets/images/top/location_button_bg.jpg);
      background-repeat: no-repeat;
      background-position: top center;
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
   }
   .p-top__locationBtn::after{
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 20px;
      margin: auto;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      width: calc(18/1920*100vw);
      height: calc(18/1920*100vw);
      border-top: 1px solid #333;
      border-right: 1px solid #333;
   }
   .p-top__locationBtnText{
      width: calc(140/1920*100vw);
      height: calc(36/1920*100vw);
      font-size: calc(27/1920*100vw);
      font-weight: bold;
      line-height: calc(36/1920*100vw);
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
   }
   @media only screen and (max-width: 768px) {
      .p-top__location{
         background: url(../../assets/images/top/location_bg_sp.jpg);
         height: calc(355/750*100vw);
         background-size: cover;
      }
      .p-top__locationBtn{
         width: calc(520/750*100vw);
         height: calc(115/750*100vw);
         background-size: cover;
      }
      .p-top__locationBtn::after{
         right: 10px;
         width: 12px;
         height: 12px;
      }
      .p-top__locationBtnText{
         width: calc(250/750*100vw);
         height: calc(45/750*100vw);
         font-size: calc(50/750*100vw);
         line-height: calc(45/750*100vw);
      }
   }