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

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

.videochatMainColumn{
  width: 100%;
}
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: #389538;
  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: #389538;
  font-weight: bold;
  font-size: 22px;
  display: inline-block;
  background: linear-gradient(transparent 60%, #ff0 0%);
}

/*チェックする項目*/
.checkBlock{position: relative;}
.checkBlock img{
  width: 100%;
  position: relative;
}
.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: 40px 0 25px;
  margin-bottom: 20px;
  color: #006000;
  font-weight: bold;
  font-size: 24px;
}
.checkBlock{
  padding: 20px 0 0;
  position: relative;
}
.checkBlock p span{
  color: #cc0000;
}
.checkBlockInner{
  font-weight: bold;
  font-size: 15px;
  position: absolute;
  bottom: 88px;
  left: 192px;
  line-height: 1.6em;
}

/*メリット*/
.meritBlock{
  background: url(img/videochat/bg_merit_title.png) no-repeat 0 0;
  background-size: 100%;
}
.meritBlock img{width: 100%;}
.meritBlock h4{
  text-align: center;
  color: #fb8400;
  font-weight: bold;
  font-size: 24px;
}
.meritBlock ul{
  overflow: hidden;
  margin: -12px 0 0;
}
.meritBlock ul li{
  float: left;
  width: 49%;
  margin-bottom: 1%;
  min-height: 192px;
}
.meritBlock ul li h5{
  padding: 22px 10px 8px 63px;
  font-size: 15px;
  color: #FFF;
}
.meritBlock ul li p{
  font-size: 12px;
  padding: 11px 0px 5px 15px;
  text-align: justify;
  width: 200px;
}
.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 10px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 24px;
  color: #8a2000;
  font-weight: bold;
  border-bottom: 2px solid #8a2000;
}
.flowBlock ul{
  overflow: hidden;
}
.flowBlock ul li{
  float: left;
  width: 28%;
  position: relative;
  margin-bottom: 20px;
}
.flowBlock ul li img{
  width: 100%;
}
.flowBlock ul li p{
  position: absolute;
  top: 175px;
  left: 0px;
  font-size: 13px;
  font-weight: bold;
padding: 0 15px 0 0;
  text-align: justify;
}
.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: 100%;
  min-height: 200px;
}

.contactBlock .btnIframe{
  width: 282px;
  position: absolute;
  top: 94px;
  left: 116px;
}
.contactBlock .btnIframe:hover{
  cursor:pointer;
}

.contactBlock .btnTel{
  width: 246px;
  position: absolute;
  top: 92px;
  left: 413px;
}

#manual{}
#manual a img{
  width: 520px;
  display: block;
  margin: 0 auto 50px;
}
/*マニュアル詳細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;
}
.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: 98%;
    margin: 0 1%;
  }
  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: 4.8vw;
  }
  .videochatMainColumn .readBlock .orageTxt{
    font-size: 3.3vw;
    width: 70%;
    line-height: 2.3em;
  }
  .videochatMainColumn .readBlock p{
    padding: 3vw 19vw 0 0;
    font-size: 3.3vw;
    margin-bottom: 0;
  }
  .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;
  }
  .checkBlockInner {
    font-weight: bold;
    font-size: 1.6vw;
    position: absolute;
    bottom: 10.5vw;
    padding-right: 6vw;
    left: 26vw;
    line-height: 2em;
  }
  .checkBlock p {
    font-weight: bold;
    font-size: 2.8vw;
  }
  .meritBlock ul {
    overflow: hidden;
    margin: -3.5vw 0 0;
  }
  .meritBlock h4{
    font-size: 5vw;
  }
  .meritBlock ul li{
    float: none;
    width: 100%;
    min-height: 54vw;
  }
  .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{margin-bottom: 20vw;}
  .flowBlock ul{
    position: relative;
    overflow: visible;
  }
  .flowBlock ul li{
    position: absolute;
    left: 43vw;
    font-size: 3.4vw;
    width: 52vw;
    text-align: justify;
  }
  .flowBlock ul li:nth-child(1){top:5vw;}
  .flowBlock ul li:nth-child(2){top:45vw;}
  .flowBlock ul li:nth-child(3){top:85vw;}
  .flowBlock ul li img{width: 40%;}
  .flowBlock ul li span {
    font-size: 2.4vw;
    display: block;
  }
  .flowBlock h4{
    background: none;
    margin: 5% 0;
    padding: 2% 0 2%;
    text-align: center;
    font-size: 5vw;
  }
  .flowBlock ul li.list03{margin: 0 0 10%;}
  .flowBlock img.flowFull{
    width: 40%;
  }

  .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: 90%;
    position: absolute;
    top: 43vw;
    left: 5vw;
  }
  .contactBlock .btnTel{
    width: 85%;
    position: absolute;
    top: 79vw;
    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;
  }
  .manualDetail .imgArea {
    float: none;
    width: 100%;
    padding: 2% 2%;
    box-sizing: border-box;
  }
  .manualDetail img {
    width: 60%;
    display: block;
    margin: 0 auto;
  }
  .manualDetail .textArea {
    float: none;
    width: 100%;
    padding: 2% 2%;
    box-sizing: border-box;
  }
}