@charset "UTF-8";
.spOnly{display: none;}
.pcOnly{display: block;}

.spbr{display: none;}
.pcbr{display: block;}

.videochatMainColumn{
  width: 700px;
}
img.videoTitle{
  width: 680px;
  margin: 0 0 15px;
}
.videochatMainColumn .readBlock{
  background: url(../img/videochat/bg_read.png) no-repeat 0 0;
  background-size: 100%;
  padding: 10px 100px 20px 10px;
}
.videochatMainColumn .readBlock p{
  font-size: 13px;
  line-height: 1.9em;
  margin-bottom: 20px;
  padding-right: 90px;
}
.videochatMainColumn .readBlock .orageTxt{
  color: #fb8400;
  line-height: 2em;
  font-size: 18px;
  padding-right: 0px;
  letter-spacing: 1px;
  text-shadow:
  1px 1px 1px #FFF,
  1px -1px 1px #FFF,
  -1px 1px 1px #FFF,
  -1px -1px 1px #FFF;
}
.videochatMainColumn .readBlock .orageTxt span{
  color: #fb8400;
  font-weight: bold;
  font-size: 22px;
  display: inline-block;
  background: linear-gradient(transparent 60%, #ff0 0%);
}

/*チェックする項目*/
.checkBlock{position: relative;}
.checkBlock img{
  width: 100%;
  z-index: 10;
  position: relative;
  margin-bottom: 30px;
}
.checkBlock img.person{
  position: absolute;
  width: 130px;
  top: 20px;
  right: 20px;
  z-index: 1;
}
.checkBlock h4{
  background: url(../img/videochat/bg_h4_merit.png) no-repeat 0 0;
  background-size: 100%;
  text-align: center;
  padding: 25px 0 20px;
  color: #fb8400;
  font-weight: bold;
  font-size: 24px;
}
.checkBlock p{
  font-weight: bold;
  font-size: 16px;
  padding: 20px 0;
}
.checkBlock p span{
  color: #cc0000;
}

/*メリット*/
.meritBlock{

}
.meritBlock h4{
  background: url(../img/videochat/bg_merit_title.png) no-repeat 0 0;
  background-size: 100%;
  text-align: center;
  padding: 45px 0 30px;
  color: #fb8400;
  font-weight: bold;
  font-size: 24px;
}
.meritBlock ul{
	overflow: hidden;
}
.meritBlock ul li{
  float: left;
  width: 49%;
  margin-bottom: 1%;
  min-height: 192px;
}
.meritBlock ul li h5{
  padding: 20px 10px 10px 60px;
  font-size: 15px;
  color: #FFF;
}
.meritBlock ul li p{
  font-size: 12px;
  padding: 6px 0px 5px 12px;
  width: 220px;
}
.meritBlock ul li.list01{
  background: url(../img/videochat/bg_list_01.png) no-repeat 0 0;
  background-size: 100%;
}
.meritBlock ul li.list02{
  background: url(../img/videochat/bg_list_02.png) no-repeat 0 0;
  background-size: 100%;
  margin-left: 2%;
}
.meritBlock ul li.list03{
  background: url(../img/videochat/bg_list_03.png) no-repeat 0 0;
  background-size: 100%;
}
.meritBlock ul li.list04{
  background: url(../img/videochat/bg_list_04.png) no-repeat 0 0;
  background-size: 100%;
  margin-left: 2%;
}
.meritBlock ul li.list05{
  background: url(../img/videochat/bg_list_05.png) no-repeat 0 0;
  background-size: 100%;
}
.meritBlock ul li.list06{
  background: url(../img/videochat/bg_list_06.png) no-repeat 0 0;
  background-size: 100%;
  margin-left: 2%;
}

/*流れ*/

.flowBlock h4{
  background: url(../img/videochat/bg_h4_flow.png) no-repeat 0 0;
  background-size: 100%;
  margin-top: 20px;
  padding: 12px 0 20px;
  text-align: center;
  font-size: 24px;
  color: #8a2000;
  font-weight: bold;
}
.flowBlock ul{
	overflow: hidden;
}
.flowBlock ul li{
  float: left;
  width: 28%;
  position: relative;
  margin-bottom: 40px;
}
.flowBlock ul li img{
  width: 100%;
}
.flowBlock ul li p{
  position: absolute;
  top: 175px;
  left: 0px;
  font-size: 13px;
  font-weight: bold;
}
.flowBlock ul li p span{font-size: 10px; display: block;}
.flowBlock ul li.list03{width: 44%;}

/*問い合わせフォームへ*/
.contactBlock{
  background: url(../img/videochat/bg_contact.png) no-repeat 0 0;
  background-size: 100%;
  position: relative;
  width: 700px;
  min-height: 200px;
}

.contactBlock .btnIframe{
  width: 282px;
  position: absolute;
  top: 94px;
  left: 116px;
}
.contactBlock .btnTel{
  width: 216px;
  position: absolute;
  top: 95px;
  left: 424px;
}

/*マニュアル詳細css*/
body#manualDetail{margin: 0;}
.manualDetail{

}
.manualDetail h3{
  background-color: #ff8e01;
  width: 100%;
  display: block;
  padding: 2% 0;
  margin: 0;
  text-align: center;
  color: #FFF;
}

#manual a img {
  width: 520px;
  display: block;
  margin: 0 auto 50px;
}

.manualDetail img{
  width: 100%;
  display: block;
  margin: 0 auto;
}
.manualDetail .inner{
  padding: 2%;
  overflow: hidden;
}
.manualDetail .imgArea{
  float: left;
  width: 48%;
  padding: 2% 2%;
  box-sizing: border-box;
}
.manualDetail .textArea{
  float: right;
  width: 48%;
  padding: 2% 2%;
  box-sizing: border-box;
}
.manualDetail .textArea .btnNext{
  display: block;
  padding:2% 0;
  background-color: #3575a2;
  text-align: center;
  width: 100%;
}
.manualDetail .textArea .btnBack{
  display: block;
  padding:2% 0;
  background-color: #ce4e4e;
  text-align: center;
  width: 100%;
}
.manualDetail .textArea .btnNext,
.manualDetail .textArea .btnBack{
  margin: 15px 0;
}
.manualDetail .textArea .btnNext a{
  color: #fff;
  display: block;
}
.manualDetail .textArea .btnBack a{
  color: #fff;
  display: block;
}
.manualDetail .textArea a{
  color: #ff8e01;
}

@media screen and (max-width: 641px) {
  .spOnly{display: block;}
  .pcOnly{display: none;}

  .spbr{display: block;}
  .pcbr{display: none;}

  .videochatMainColumn{width: 100%;}
  img.videoTitle{width: 100%;}

  .videochatMainColumn .readBlock{
    background: url(../img/videochat/bg_read_sp.png) no-repeat right bottom;
    background-size: 53%;
    width: 100%;
    padding: 0;
  }
  .videochatMainColumn .readBlock .orageTxt span{
    font-size: 5vw;
  }
  .videochatMainColumn .readBlock .orageTxt{
    font-size: 2.8vw;
    width: 70%;
    line-height: 2.7em;
  }
  .videochatMainColumn .readBlock p{
    padding: 0;
    font-size: 3.3vw;
  }
  .checkBlock h4{
    padding: 2% 0 4% 19%;
    font-size: 4.5vw;
  }
  .checkBlock img.person {
    position: absolute;
    width: 28%;
    top: 10%;
    right: 0px;
    z-index: 1;
    margin: 0;
  }
  .checkBlock p {
    font-weight: bold;
    font-size: 3.8vw;
    padding: 2% 0 5%;
    width: 75%;
  }
  .meritBlock h4{
    font-size: 5vw;
    padding: 3% 0 5%;
  }
  .meritBlock ul li{
    float: none;
    width: 100%;
    min-height: 52vw;
  }
  .meritBlock ul li.list02,.meritBlock ul li.list04,.meritBlock ul li.list06{
    margin-left: 0%;
  }
  .meritBlock ul li h5 {
      padding: 6% 2% 2% 19%;
      font-size: 4.3vw;
      color: #FFF;
  }
  .meritBlock ul li p {
      font-size: 3.2vw;
      padding: 3% 0% 0% 4%;
      width: 63%;
  }
  .flowBlock ul li,
  .flowBlock ul li.list03{
    float: none;
    width: 100%;
    margin: 0;
  }
  .flowBlock ul li img{width: 40%;}
  .flowBlock ul li p {
    position: absolute;
    top: 3vw;
    left: 38vw;
    font-size: 3vw;
    font-weight: bold;
  }
  .flowBlock ul li p span {
    font-size: 2.4vw;
    display: block;
  }
  .flowBlock h4{
    background: url(../img/videochat/bg_h4_flow.png) no-repeat 0 bottom;
    background-size: 100%;
    margin: 5% 0;
    padding: 2% 0 2%;
    text-align: center;
    font-size: 5vw;
  }
  .flowBlock ul li.list03{margin: 0 0 10%;}

  .contactBlock{
    background: url(../img/videochat/bg_contact_sp.png) no-repeat 0 0;
    background-size: 100%;
    position: relative;
    width: 100%;
    min-height: 105vw;
  }
  .contactBlock .btnIframe{
    width: 75%;
    position: absolute;
    top: 43vw;
    left: 11vw;
  }
  .contactBlock .btnTel{
    width: 70%;
    position: absolute;
    top: 75vw;
    left: 5vw;
  }
  #modal-iframe{margin-top: 55px;}

  /*ビデオチャットに関する汎用デザインcss*/
  .videochatArea p{
    font-size: 13px;
    padding: 0 0 10px;
  }
  h4.titleCommonDesign01{
    font-size: 18px;
    font-weight: bold;
    color: #df4e00;
    line-height: 1em;
    margin-bottom: 10px;
    padding-bottom: 0px;
    border-bottom: 4px solid #fed220;
  }
  .sidebar .sidebarBnrSpecial{width: 100%;}

  #manual a img{
    width: 100%;
    display: block;
    margin: 0 auto 10%;
  }
  .manualDetail img {
    width: 60%;
    display: block;
    margin: 0 auto;
  }
  .manualDetail .imgArea {
    float: none;
    width: 100%;
    padding: 2% 2%;
    box-sizing: border-box;
  }
  .manualDetail .textArea {
    float: none;
    width: 100%;
    padding: 2% 2%;
    box-sizing: border-box;
  }
}