/*モーダルブロック*/
    .ModalBlock{
      position:relative;
      margin:0 auto;
      display:block;
      padding:30px 0;
      background:#dff1fb;
    }
    /*件数表示*/
    .NumberCase{
      display:flex;
      align-items: center;
      position:absolute;
      top:-20px;
      left:10px;
    }
    .NumberCase.Active{
      position:absolute;
      top:-80px;
      right:10px;
      left:auto;
    }
    .NumberCase span{
      
    }
    .NumberCase .Main{
      margin-right:10px;
      font-size:75%;
    }
    .NumberCase .Num{
      color:red;
      font-size:120%;
    }
    .NumberCase .Ken{
      font-size:90%;
    }
    
    /*一覧兼ボタン*/
    .ModalSearchItem{
      border: 1px solid #ccc;
      border: 1px solid #0087ff;
      box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
      border-radius: 4px;
      margin: 20px auto;
      line-height: 1;
      padding: 20px 20px 20px 15px;
      vertical-align: middle;
      max-width: 95%;
      font-size: 1.1em;
      border-radius:6px;
      background:#fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+96,ededed+100 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 96%,rgba(237,237,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

      position:relative;
    }

    .ModalSearchItem::after{
      position:absolute;
      right:10px;
      top:20px;
      content: '\f105';
      color:#0087ff;
      font-family: "picticon";
      font-size:1.2em;
    }
    .ModalSearchItem.KeySearch{
      padding-bottom:10px;
    }
    .ModalSearchItem.KeySearch .ParagraphHeader .Sub{
      font-size: 12px;
      color: #aaa;
      display: inline;
      margin-left: 10px;
      display: inline-block;
      vertical-align: middle;
    }
    .ModalSearchItem.KeySearch input[type="text"]{
      width:100%;
      max-width:99%;
    }
    
    .ModalSearchItem.KeySearch::after{
      display:none;
    }
    .ModalSearchItem .ModalSearchListTitle{
      color: #422d16;
      font-weight:600;
    }
    input[type="text"]::placeholder {
      font-size: 12px;
    }
      
    
    
    .ModalSearchItem .ModalSearchListTitle span{
      font-size:70%;
      font-size: 12px;
      color:#aaa;
      display:inline;
      margin-left:10px;
      display:inline-block;
      vertical-align:middle;
    }
     /*.ModalSearchItem .ModalSearchListTitle:after{
      content: 'で絞る';
      font-size:80%;
      display:inline-block;
      vertical-align:bottom;
      color:#333;
      margin:0 5px;
    }*/
    .ModalSearchItem .ModalSearchResultList{
      margin-top:5px;
      font-size:90%;
      color:Blue;
    }
    
    
    /* モーダル背景 */
    .ModalItem {
        display: none;
        position: fixed;
        position:absolute;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, 0.5);
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* モーダル表示状態 */
    .ModalItem.active {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    /* jQuery UIのカレンダー(datepicker)がモーダル(.ModalItem, z-index:100)の
       背面に隠れてしまうのを防ぐため、モーダルより手前に表示させる。
       css/format-s.css の `body .ui-widget.ui-widget-content { z-index:50!important; }`
       （詳細度: body+2クラス）が、単純な `.ui-datepicker` 指定より詳細度が高く
       優先されてしまうため、同等以上の詳細度のセレクタで上書きする。 */
    body .ui-datepicker.ui-widget.ui-widget-content {
        z-index: 1000 !important;
    }

    /* モーダルの中身*/
    .modal-content {
        background: #fff;
        padding: 1rem;
        border-radius: 10px;
        width: 90%;
        max-width: 1045px;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        position: relative;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.3s ease;
    }
    
    
/*767+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width: 768px) {

    /*モーダルブロック*/
    .ModalBlock{

      padding-top:50px;
      padding-bottom:20px;
     }
    /*件数表示*/
    .NumberCase{
      position:absolute;
      top:10px;
      left:10px;
    }

}

    /*モーダルブロック*/
     body.rsbp-under-bp3 .ModalBlock{
      position:static;
      padding-top:0;
      margin-top: -50px;
      margin-bottom: -50px;
     }



/*767+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width: 767px) {

    /*モーダルブロック*/
    .ModalBlock{
      position:static;
      padding-top:0;
      /*margin-top: -50px;
      margin-bottom: -50px;*/
     }
     
    .NumberCase{
      position:static;
      padding:5px;
    }
    .NumberCase.Active {
      position: fixed;
      top: 110px;
      right: 60px;
      z-index:110;
    }

    /* モーダル表示状態 */
    .ModalItem.active {
        display: flex;
        opacity: 1;
        position:fixed;
        pointer-events: auto;
        height:100%;

    }

     
     
    /* モーダルの中身*/
    .modal-content {
        background: #fff;
        padding: 1rem;
        border-radius: 0;
        width: 100%;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        position: relative;
        height:calc(100% - 100px);
        margin-top:100px;
        margin-bottom: auto;
    }
     .MemberIn  .modal-content  {
        height:calc(100% - 142px);
        margin-top:142px;
     }
    
    
    
    .ModalItem .modal-content .ParagraphHeader{
      min-width:10px;
      margin-bottom:8px;
      max-width:calc(100% - 180px);
      background: #05557d;
      border-radius:3px;
      padding: 2px 5px;
    }
    .ModalItem .modal-content .ParagraphHeader .Main{
      width: auto;
      color: #fff;
      vertical-align: middle;

    }
    .ModalItem .modal-content .ParagraphContents{
      overflow-y:auto;
      height:80vh;
      height:calc(100vh - 200px);

    }
    .SearchArea .BlockFooter {
      /* z-index:130; */
    }

}/*767++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    
    .ModalSearchItem .SearchModalTable{
      border:none;
    }
    .SearchModalTable .Paragraph{
      display:flex;
      flex-flow: column;
    }
    .ModalItem .SearchModalTable .Paragraph .ParagraphHeader{
      text-align:left;
      /*border-bottom: 1px solid #ccc;*/
      border:none;
    }
    .ModalItem .SearchModalTable .Paragraph .ParagraphContents{
      border-top:1px solid #ccc;
      text-align:left;
    }




    /* アニメーション*/
    .modal.active .modal-content {
        animation: fadeInScale 0.4s ease forwards;
    }

    @keyframes fadeInScale {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    .close-btn{
      background:#222;
      border-radius:50%;
      width:40px;
      height:40px;
      corsor:pointer;
      position:absolute;
      top:-20px;
      right:-20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    .close-btn:hover{
      background:#0080ff;
    }
    .close-btn .Icon.ImageCloseIcon{
      background: url(../shinsotsu/img/common/icon/image_close.png)no-repeat 50% 50%;
      background-size:30px;
      width:100%;
      height:100%;
     corsor:pointer;
    }
    
/*767+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width: 767px) {


    .close-btn{
      background:#222;
      border-radius:0;
      width:36px;
      height:36px;
      corsor:pointer;
      position:absolute;
      top:15px;
      right:10px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

}

/*500+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width: 500px) {


  body.rsbp-under-bp3 .SearchArea .BlockFooter {
      background: #fff;
      margin-top:30px;
      padding-top:20px;
      /*position: -webkit-sticky!important;
      position: sticky !important;
      position: fixed !important;
      bottom: 0;
      bottom: 50px;
      padding-top: 0px;
      text-align: left;
      background: #fff;*/
      /*z-index:130;*/
  }

}