@charset "UTF-8";



#jp-cmp-mobile-main{
  width: 770px;
  min-width: 300px;
  float: left;
  margin: 0 0 20px 0;
  padding: 0;
}
#jp-cmp-mobile-side{
  width: 250px;
  float: right;
  margin: 0 0 20px 0;
  padding: 0;
}
#jp-cmp-mobile-footer{
  width: 1030px;
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
}


.box-white{
  margin: 0 0 20px 0;
  padding: 10px;
  background: #fff;
  -ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.box-clear{
  margin: 0 0 20px 0;
  padding: 0;
}



#jp-cmp-mobile-side{
}
  #jp-cmp-mobile-side ul.list-banner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
    #jp-cmp-mobile-side ul.list-banner > li{
      width: 100%;
      max-width: 250px;
      margin: 0 0 5px 0;
      text-align: center;
    }
      #jp-cmp-mobile-side ul.list-banner li a{
        display: block;
      }
        #jp-cmp-mobile-side ul.list-banner li a img{
          width: 100%;
          height: auto;
        }



#jp-cmp-mobile-footer{
  width: 100%;
  clear: both;
}
  #jp-cmp-mobile-footer ul.note{
    margin: 10px;
    font-size: 10px;
    color: #666;
  }
    #jp-cmp-mobile-footer ul.note li{
      text-indent: -1em;
      margin-left: 1em;
    }





/* タブレット以下 */
@media screen and (min-width: 768px) and (max-width: 1070px) {
}

/* スマホ以下 */
@media screen and (min-width: 0px) and (max-width: 767px) {

.box-white{
  margin: 0 10px 19px 10px;
}

.box-clear{
  margin: 0 10px 20px 10px;
  padding: 0;
}

  #jp-cmp-mobile-main{
    width: auto;
    float: none;
  }

  #jp-cmp-mobile-side{
    width: auto;
    float: none;
    margin: 0 auto;
  }

    #jp-cmp-mobile-side ul.list-banner{}
      #jp-cmp-mobile-side ul.list-banner li{
        max-width: 80%;
      }


/*アンカーリンク調整用*/
.anchor-adjust[id]{
  display: block;
  width: 0;
  height: 0;
  margin-top: -60px;  /* header 49 + 11 px */
  padding-top: 60px;
}

}