/*---------st-mybox------*/
.st-mybox-class ul li:before,.snaf-box ul li:before {
  color: orange;
  font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
  content: "\f138"!important;
  position: absolute;
  left: 1em;
}

.st-mybox-class ul li,.snaf-box ul li{
    list-style: none;
}

.st-mybox-class ul,.snaf-box ul li{
  padding-left: 15px!important;
}

.small .st-in-mybox p{
  font-size:1.3rem;
}
/*---------st-mybox ここまで------*/

.snaf-pointbox {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px #FFC007;
  border-radius: 8px;
  background: #FEFBF4;
}

.snaf-pointbox .snaf-box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 110%;
  background: #FFF;
  color: orange;
  font-weight: bold;
}
.snaf-pointbox p {
  margin: 0;
  padding: 0;
}


.snaf-slideborder{
  border: solid 1px #f1f1f1;
  border-radius: 2px;
}

.snaf-box-container.has-boxtitle{
  position: relative;
  margin: 30px 0!important;
}

.snaf-box ul {
  margin: 0px!important;
  padding: 10px 10px!important;
}

  /****snaf-slidebox****/
  div.snaf-slidebox{
    margin: 30px 0 40px 0!important;
    padding: 0;
  }
  
  div.snaf-slidebox .st-in-mybox{
    padding: 5px 0 0 0!important;
  }
  /*プラグイン側でHTML STYLEでも指定*/
  
  /****Girls2カラー****/
  .girls2{
    border-color: #66C1BF;
  }

  .girls2.box-title{
    border-color: #66C1BF;
  }
  
  .girls2.box{
    border-color: #66C1BF;
  }
  .girls2 .box-title{
    background: #66C1BF;
  }

  .girls2 .st-mybox-title:not(dummy){
    color: white!important;
    background-color: #66C1BF!important;
  }
  
  /****ファントミカラー****/
  .phanmira,.phantomi{
    border-color: #C03980!important;
  }
  
  .phanmira .st-mybox-title,.phantomi .st-mybox-title{
    background-color: #C03980!important;
    color: white!important;
  }

  span.boxtitle {
    position: absolute; z-index: 1;
    left: 0;
    top: -1.0em;
    margin-left: 1em;
    padding: 0.2em 0.5em;
    background: #0094D6;
    color: #FFF;
    display: inline-block;
    border-radius: 5px;
  }

  /**********共通（適用順を考慮して、下に記述）***************/
  @media screen and (max-width:640px){
    /*640px以下で適用*/
    div.snaf-slidebox {
      border-right-color: white!important;
  }
  }

  /*-------------- スマホのみ横スライド ---------------*/
  /* パソコンではタイル型で表示 */
  .slide-wrap {
    display: flex;
    margin: 0 auto;
    max-width: 1080px;
    width: 100%;
    padding: 10px 0;
  }
  .my-slide-box{
    height: auto;
    margin-right: 3%;
    width: 24%;
    font-weight: bold;
  }
  /* サムネイルとタイトルのスタイル調整 */
  .my-slide-box a{
    background-color: #fff;
    display: block;
    text-decoration: none;
  }

  .my-slide-box img{
    display: block;
    height: auto;
    width: 100%;
  }

  .my-slide-box p{
    font-weight: bold;
    padding: 10px;
  }

  @media screen and (max-width: 479px) {
  /* スマホではスライダーで表示 */
    .slide-wrap {
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    
    /**不要だと思われる**/
    div.slide-wrap div.medium{
      flex: 0 0 38%;
    }
      /**----不要ここまで---**/
    
     /**サムネイル画像のサイズ調整**/
    div ul.my-slide-box li{
      width: 40%;
      padding: 6px 4px;
    }
    
    div.slide-wrap ul.my-slide-box{
      display: -webkit-inline-box!important;
      padding: 0!important;
    }
  }
  /*-------------- スマホのみ横スライド ここまで ---------------*/