@charset "UTF-8";


#jp-cmp-mobile-main{
  width: 1030px;
  float: none;
  margin-top: 20px;
}



  #jp-cmp-mobile-main .jp-cmp-h3-001{
    margin: 0 0 14px 10px;
  }


  #jp-cmp-mobile-main strong{
    font-weight: bold;
  }
  #jp-cmp-mobile-main small{
    font-size: 80%;
  }

  #jp-cmp-mobile-main .text-center{
    text-align: center;
  }
  #jp-cmp-mobile-main .text-left{
    text-align: left;
  }
  #jp-cmp-mobile-main .text-right{
    text-align: right;
  }


  #jp-cmp-mobile-main .screenshot{
    text-align: center;
    font-size: 0;
  }
    #jp-cmp-mobile-main .screenshot img{
      margin: 5px;
      vertical-align: top;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
    #jp-cmp-mobile-main .screenshot img.portrait{
      max-width: 237px;
      height: auto;
      max-height: none;
    }
    #jp-cmp-mobile-main .screenshot img.landscape{
      max-width: none;
      width: auto;
      max-height: 237px;
    }

#jp-cmp-mobile-main .area-youtube{
  width: 100%;
  max-width: 560px;
  margin: 10px auto;
}
  #jp-cmp-mobile-main .area-youtube .embed-youtube{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%; /* 16:9の比率の場合 */
    overflow: hidden;
  }
      #jp-cmp-mobile-main .area-youtube .embed-youtube iframe,
      #jp-cmp-mobile-main .area-youtube .embed-youtube object,
      #jp-cmp-mobile-main .area-youtube .embed-youtube embed{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
      }


  #jp-cmp-mobile-main .area-text{
    margin: 0 10px 20px 10px;
  }
    #jp-cmp-mobile-main .area-text ul{
      list-style: disc;
      padding-left: 1.5em;
    }
    #jp-cmp-mobile-main .area-text dl{
    }
      #jp-cmp-mobile-main .area-text dl dt{
        font-weight: bold;
        font-size: 14px;
      }
      #jp-cmp-mobile-main .area-text dl dd{
        margin: 0 0 10px 1em;
      }
    #jp-cmp-mobile-main .area-text p{
      margin-bottom: 1em;
    }


    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .title{
      margin: 10px;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .title h1 {
        margin: 0;
        padding: 0;
        font-size: 24px;
        line-height: 26px;
        font-weight: bold;
        color: #000;
      }
    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .summary{
      display: flex;
      width: 620px;
      margin: 10px;
      float: left;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .summary img{
        display: block;
        width: 100px;
        height: 100px;
        flex-shrink:0;
      }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .summary p{
        margin: 0 0 0 5px;
        font-size: 18px;
        line-height: 28px;
      }

    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail{
      display: flex;
      flex-wrap: wrap;
      width: 350px;
      margin: 10px;
      float: right;
    }

    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin: 0;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store > li{
        width: 173px;
        margin: 0 0 5px 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
      }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store > li:nth-last-child(1),
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store > li:nth-last-child(2){ margin-bottom: 0; }
        #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store > li a{
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          width: 100%;
          background: #e4e4e4;
          color: #1e1e37;
          padding: 8px 5px;
          border-radius: 3px;
          font-size: 12px;
          line-height: 16px;
        }
        #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store > li a:before{
          display: inline-block;
          content: "";
          width: 0;
          height: 0;
          border: 3px solid transparent;
          border-left: 4px solid #1e1e37;
          margin: 0 2px 0 2px;
        }

  #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-site{
    display: block;
    width: 100%;
    margin: 5px 0;
  }
    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-site > li{
      width: 100%;
      margin: 0;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-site > li a{
        display: block;
        background: #fe9900;
        color: #fff;
        text-align: center;
        padding: 8px 5px;
        border-radius: 3px;
        font-size: 12px;
        line-height: 16px;
      }

  #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-device{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    margin: 5px 0 0 0;
    padding: 5px 0 0 0;
    border-top: 1px solid #e3e3e3;
  }
    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-device > li{
      font-size: 11px;
      line-height: 14px;
      color: #666;
    }
    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-device > li:not(:last-child):after{
      content: "/";
      padding: 0 2px;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-device > li .fa{
        margin: 0 2px 0 0;
      }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-device > li .fa-mobile{
        font-size: 14px;
      }

    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head ul.note {
      display: block;
      clear: both;
      margin: 0 10px;
      padding: 10px 0;
      font-size: 10px;
      color: #666;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head ul.note li{
        text-indent: -1em;
        margin-left: 1em;
      }


    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .jp-cmp-list-social-001{
      clear: both;
      text-align: right;
    }


  #jp-cmp-mobile-main ul.list-banner-1col{
    display: block;
  }
    #jp-cmp-mobile-main ul.list-banner-1col li{
      width: 100%;
      margin: 0 0 5px 0;
      text-align: center;
    }
      #jp-cmp-mobile-main ul.list-banner-1col li a{
        display: inline-block;
      }
        #jp-cmp-mobile-main ul.list-banner-1col li a img{
        }


  #jp-cmp-mobile-main ul.list-banner-2col{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: -10px 5px 0 5px;
  }
    #jp-cmp-mobile-main ul.list-banner-2col li{
      width: 49%;
      margin: 10px 5px 0 5px;
      text-align: center;
    }
      #jp-cmp-mobile-main ul.list-banner-2col li a{
        display: block;
      }
        #jp-cmp-mobile-main ul.list-banner-2col li a img{
          width: 100%;
          height: auto;
        }


  #jp-cmp-mobile-main .acbox-001{
  }
    #jp-cmp-mobile-main .acbox-001 .acbox-001-title{
      padding-bottom: 0;
      cursor: pointer;
    }
      #jp-cmp-mobile-main .acbox-001 .acbox-001-title:after{
        content: "";
        display: block;
        float: right;
        width: 10px;
        height: 10px;
        margin-top:5px;
        margin-right: 5px;
        border-top: 2px solid #999999;
        border-right: 2px solid #999999;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
      }
      #jp-cmp-mobile-main .acbox-001.open .acbox-001-title:after{
        margin-top:10px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

    #jp-cmp-mobile-main .acbox-001 .acbox-001-content{
      display: none;
      margin-top:14px;
    }
      #jp-cmp-mobile-main .acbox-001.open .acbox-001-content{
        display: block;
      }

  #jp-cmp-mobile-main .acbox-002{
    margin: 10px 0;
    border: 2px solid #e7e7e7;
    box-sizing: border-box;
  }
    #jp-cmp-mobile-main .acbox-002 .acbox-002-title{
      padding: 10px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
    }
      #jp-cmp-mobile-main .acbox-002 .acbox-002-title:after{
        content: "";
        display: block;
        float: right;
        width: 10px;
        height: 10px;
        margin-top:5px;
        margin-right: 5px;
        border-top: 2px solid #999999;
        border-right: 2px solid #999999;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
      }
      #jp-cmp-mobile-main .acbox-002.open .acbox-002-title:after{
        margin-top:10px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

    #jp-cmp-mobile-main .acbox-002 .acbox-002-content{
      display: none;
      width: 98%;
      margin: 0 auto;
      padding: 20px 0;
      border-top: 1px solid #dadada;
      box-sizing: border-box;
    }
      #jp-cmp-mobile-main .acbox-002.open .acbox-002-content{
        display: block;
      }





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

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

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

  #jp-cmp-mobile-main .screenshot{
  }
    #jp-cmp-mobile-main .screenshot img.portrait{
      max-width: 46%;
    }
    #jp-cmp-mobile-main .screenshot img.landscape{
      max-width: 92%;
    }

  #jp-cmp-mobile-main #jp-cmp-mobile-detail-head{}

    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .summary{
      width: auto;
      margin: 0;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .summary img{
        width: 64px;
        height: 64px;
      }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .summary p{
        font-size: 12px;
        line-height: 17px;
      }

    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .title{
      margin: 10px 0;
    }
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .title h1{
        font-size: 18px;
      }

  #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail{
    width: 100%;
    margin: 10px 0;
  }

  #jp-cmp-mobile-main ul.list-banner-1col{
    margin: 0 10px;
  }
  #jp-cmp-mobile-main ul.list-banner-2col{
    margin: -10px 10px 0 10px;
  }
    #jp-cmp-mobile-main ul.list-banner-2col li{
      width: 100%;
      margin: 10px 0 0 0;
    }




  #jp-cmp-mobile-main .acbox-001{}
    #jp-cmp-mobile-main .acbox-001 .acbox-001-title{
      margin-bottom: 0;
    }
    #jp-cmp-mobile-main .acbox-001.open .acbox-001-title {
      margin-bottom: 10px;
    }
    #jp-cmp-mobile-main .acbox-002 .acbox-002-content{
      width: 95%;
    }

    #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store{}
      #jp-cmp-mobile-main #jp-cmp-mobile-detail-head .detail ul.list-store > li{
        width: 49%;
      }


}