@charset "UTF-8";

#mapster_wrap_0{
    margin-left: auto;
margin-right: auto;
max-width: 1000px;
}


.scroll {
    overflow: auto;
    /*tableをスクロールさせる*/
    white-space: nowrap;
    /*tableのセル内にある文字の折り返しを禁止*/
  }
  .scroll::-webkit-scrollbar {
    /*tableにスクロールバーを追加*/
    height: 5px;
  }
  .scroll::-webkit-scrollbar-track {
    /*tableにスクロールバーを追加*/
    background: #F1F1F1;
  }
  .scroll::-webkit-scrollbar-thumb {
    /*tableにスクロールバーを追加*/
    background: #BCBCBC;
  }



  .pc { display: block !important; }
.sp { display: none !important; }
 


  @media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }


    .bn632-hover {
        width: 60px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        margin: 10px;
        height: 35px;
        text-align:center;
        border: none;
        background-size: 300% 100%;
        border-radius: 5px;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        display: table-cell;
        vertical-align: middle;
        
      }
      
      .bn632-hover:hover {
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
      }
      
      .bn632-hover:focus {
        outline: none;
      }
      
      .bn632-hover.bn21 {
        background-image: linear-gradient(
          to right,
          #25aae1,
          hsl(206, 100%, 53%),
          hwb(212 0% 0%),
          hsl(198, 100%, 50%));
        box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
      }

      .margin{
        margin-top: 20px;
      }
      .center{
        text-align: center;
      }
      .table{
        display: table;
        border-collapse: separate;
    border-spacing: 7px 0;
      }


      .bn633-hover {
        width: 60px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        margin: 10px;
        height: 35px;
        text-align:center;
        border: none;
        background-size: 300% 100%;
        border-radius: 5px;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        display: table-cell;
        vertical-align: middle;
        
      }
      
      .bn633-hover:hover {
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
      }
      
      .bn633-hover:focus {
        outline: none;
      }
      
      .bn633-hover.bn21 {
        background-image: linear-gradient(
          to right,
          #e85a19
          ,
          #e43603,
    #fa7199,
    #f5ce62);
        box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
      }

}