@charset "utf-8";
/* CSS Document */

/* --■■■■■■■■■■■■■■■■■　TAB　■■■■■■■■■■■■■■■■■--*/
/* TAB */
@media screen and (max-width: 1059px) and (min-width: 767px) {

}

/* --■■■■■■■■■■■■■■■■■　SP　■■■■■■■■■■■■■■■■■--*/
/* SP */
@media screen and (max-width: 767px) and (min-width: 0px) {
  .svg{width:240px;height:40px;position:relative;margin-top: -10px;margin: 0 auto;}
  
  body{font-size: 3.5vw;font-size: 3.0vw;}
  /* body{ font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Helvetica, Arial, sans-serif;} */
  .HdMgn{display: none;}
  
  .fs14{font-size: 3.5vw!important;}
  .fs20{font-size:  4.5vw!important;}
  .fs24{font-size:  5.5vw!important;}
  .fs30{font-size: 6.5vw!important;}
  .fs36{font-size: 7.0vw!important;}
  .fs40{font-size: 7.5vw!important;}
  .fs44{font-size: 8.0vw!important;}
  
  .wrapFlex > ul.col3 li{width: 100%; margin-right: 0%;}
  .wrapFlex > ul.col4 li{width: 100%; margin-right: 0%;}
  
  .view-pc{display: none;}
  .view-sp{display: block;}
  .pc_hide {display: block;}	
  .sp_hide {display: none;}
  
  h1 {font-size: 8.0vw;font-weight: 700;line-height: 1.2;}
  h2 {font-size: 6.0vw;font-weight: 700;line-height: 1.4;}
  h3 {font-size: 4.8vw;font-weight: 700;line-height: 1.4;}
  h4 {font-size: 3.8vw;font-weight: 700;line-height: 1.4;}
  
  #wrap{min-width: auto;}
  .wrapTable {overflow: auto;}	
  #header { max-width: 767px;}
  .ch-logo{width: 240px;}
  
  .inner{margin: 0 2vw; }
  
  #pageHead{padding-top: 5vw;padding-bottom: 3.5vw;}
  #pageHead .fig{max-width: 680px;margin: 0 auto;}
  #pageHead .fig img{margin-bottom: -12vw;}
  #pageHead .copy h1{margin-bottom: 3vw;}
  #pageHead .copy p{margin-bottom: 5vw;}
  /* 問い合わせ・料金・FAQ　ページタイトル　H1 */
  #contact #pageHead .copy h1,
  #price #pageHead .copy h1,
  #faq #pageHead .copy h1 {font-size: 5.5vw;margin-bottom: 1vw;}
  
  #header .inner {width: 100%;margin: 0 auto;text-align: center;padding: 2% 0;}
  #menu .btnHead a{font-size: 5vw;}
  
  .tel,
  .tel.fs30{font-size: 8.5vw !important;}
  .tel:before,
  #menu .tel:before {font-size: 6.8vw;}
  #menu .tel{ margin-right: 0;}
    
  #footer{background: #f3f5f6;padding: 20px 0;}
  #footer .ftInner{text-align: center;}
  #footer .ftInner .kslogo{float:none;width:50%;margin:0 auto;margin-bottom:20px;}
  #footer .ftInner .telnum{float:none;width:100%;margin:0 auto;margin-left:0;margin-bottom:10px;}
  #footer .ftInner .address{float:none;width:auto;font-size: 3.0vw;line-height:1.3;}
	
  .btnCv {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-size: 20px auto;
    background: -moz-linear-gradient(#57af01, #93d100 50% , #57af01 100%);
    background: -webkit-linear-gradient(#57af01, #93d100 50% , #57af01 100%);
    background: linear-gradient(to bottom, #93d100 0%, #57af01 100%);
    text-shadow: 0 1px 0 #509300;
    border-radius: 7vw;
    font-feature-settings: "palt";
    color: #fff;
    height: 14vw;
    font-size: 4.6vw;
    font-weight: 900;
    line-height: 1.2;
    padding: 2% 0;
    text-decoration: none;
  }
  
  a.btnCv:hover{
    /* opacity: .6; */
    transition-duration:.3s;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
  }
  
  .big{font-size: 105%;}
  .mini{font-size: 75%;}
  
  .bigPrice{font-size: 8.5vw;font-weight: 700;}
  .bBtn {text-align: center;padding:8vw 0 ;}
  .bBtn h2{font-size: 5.5vw;}
  .bBtn a.btn-c{font-size: 5.5vw;}
  
  .btn-wrap {margin: 40px 0;}
  a.btn-c {
    padding: 0.1em 1em;
    /* font-size: 1.2rem; */	
  }

/* form */
  .table--mailform fieldset, .table--mailform input, .table--mailform textarea, .table--mailform select
  {font-size: 1.6rem}
  .table--mailform .sub-text>div:nth-child(1){width: 100%;}
  .table--mailform ul.label-side li{width: 49.5%;}

  #inquiry{padding: 0;}
  
  #inquiry h2{font-size: 5.6vw; color: #00afb9;     margin-bottom: 2%;    line-height: 1;}
  #inquiry .lead{margin-bottom: 5%; text-align: left;}
  
  #inquiry #wrapForm{background-color: #d60039;padding: 1rem}
  #inquiry #wrapForm .required{
  background: #F45400;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 2.6vw;
  padding: .5vw;
  line-height: 3.2vw;
  }
  
  #inquiry #wrapForm table{width: 100%; border-collapse: collapse;}
  #inquiry #wrapForm table tr {}
  #inquiry #wrapForm table tr:last-child td{border:none;}
  
  #inquiry #wrapForm table tr:first-child th{border-radius: 2vw 2vw 0 0;}
  #inquiry #wrapForm table tr:last-child td{border-radius: 0 0 2vw 2vw;}
  
  .selcted_form_crosslist{position: relative;}
  .selcted_form_crosslist > li{position: relative; margin-bottom: 2%;}    
  .selcted_form_crosslist > li:last-child{margin-bottom: 0;}
  
  #inquiry #wrapForm .ulFormBtn{margin: 5% auto 0; width: 100%;}
  #inquiry #wrapForm .ulFormBtn > li{width: 80%;margin: 0 auto 3%;}
  #inquiry #wrapForm .ulFormBtn > li:last-child{margin-bottom: 0;}
  
  #inquiry #wrapForm iframe {width: 100%;background: #fff;border: 2px solid #c0c0c0;    border-radius: 0.5vw; font-size: 3vw; }
  #inquiry h2{margin-bottom: 20px;}
  #inquiry h2{margin-bottom: 20px;}
	 
  .form-table th,
  .form-table td {
    display: block;
    width: 100%;
    border-bottom: none;
  }
	
  /*input[type="text"],textarea#f21freetext{height:8vw;}*/
  input[type="text"],input[type="tel"],input[type="email"],textarea { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: none;
    border: 2px solid #c0c0c0;
    border-radius: 0.5vw;
    padding: 2%;
    box-sizing:border-box;
    /*color: #bbbbbb;*/
    font-weight: normal;
  }
  input[type="text"] { line-height: 1;  vertical-align:middle;}
  textarea { line-height: 1.4;  vertical-align:middle;border: 2px solid #c0c0c0;    border-radius: 0.5vw;}
  input[type="text"].sw{width:50px;}
  input[type="text"].date{width:65%;}
  
  select, 
  textarea {
    width: 100%;
    padding: 2%;
    border: 2px solid #c0c0c0;
    border-radius: 0.5vw;
  }
  
  /* TOP */
  #top #wrapMainvisual .mv {display: none;}
  #top #wrapMainvisual .cc{position: relative;}
  #top #wrapMainvisual img.mv-sp{
    width: 85vw;
    right: 0;
    bottom: -6vw;
    position: absolute;}
  #top #wrapMainvisual #kw{padding: 1vw 0 ;width: 100%;position: relative;}
  #top #wrapMainvisual .cc{padding: 2vw 2vw 38vw;}
  #top #wrapMainvisual .cc h1 img {margin-bottom: 20px;}
  #top #wrapMainvisual .cc h1 {font-size: 12vw;color: #df1f3d;font-weight: 900;}
  #top #wrapMainvisual .cc h1 span{
    font-size: 13vw;
    font-family: 'Noto Sans Japanese', Hiragino Kaku Gothic Pro, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";
  }
  #top #wrapMainvisual .cc h2{font-size: 7.0vw;font-weight: 700;}
  #top #wrapMainvisual .cc p {font-size: 4vw;}
  #top #wrapMainvisual .toContact h2{padding-bottom: 10px;}
  #top #mainvisual{height: 120vw;padding-bottom: 120vw;background-size: auto;}
  #top #mainvisualpol{height: 75vw;width: 100%;}
  #top #mainvisual2{margin-bottom: 5vw;}
  #top #mainvisual2 img.bgCopy01 {}
  #top #mainvisual2 h3{letter-spacing: 0em;margin-top: -60px;font-size: 5vw;font-weight: 500;margin-bottom: 1.0em;}
  #top #mainvisual2 h3 span{font-size: 9.0vw;display: block;font-weight: 400;}
    
  #top #mainpoint{padding: 20px 0 ;}
  #top .mainBox01 h3, .mainBox02 h3, .mainBox03 h3 {color: #df1f3d;font-size: 8vw;margin-top: 4vw;margin-bottom: 2vw;}

  #top #function{background: #e9f0f2;padding-top: 3vw;}
  
  /* おじどうさんRPA */
  #about #pageHead{padding-bottom: 0;}
  #about #pageHead .fig{}
  #about #point {padding-top: 10vw;margin-bottom: 10vw;}
  #about #point .wrapFlex{padding-top: 2vw;}
  #about #point .wrapFlex ul li:nth-child(1) .box,
  #about #point .wrapFlex ul li:nth-child(2) .box {margin:0 2vw 2vw;}
  #about #point .wrapFlex ul li .box img {right: 10vw;top: 30%;}
  #about #point .pointTxt{line-height: 1.2;font-size: 3.5vw;l}
  #about #work h3.cTitle {font-size: 5.5vw;line-height: 1.4;}
  #about #work h2.cTitle{font-size: 6.5vw;}
  #about #work .pointBox {padding-bottom: 10vw;}
  #about #work .pointBox li h3 {font-size: 5.5vw;padding: 5vw 0 3vw;}
  #about #work .wrapFlex > ul li{margin-bottom: 1vw}
  #about #merit {padding-top: 2vw;margin-bottom: 10vw;}
  #about #merit h2.cTitle{font-size: 6.5vw;padding: 5vw;}
  #about #merit .wrapFlex{margin-top: 5vw;}
  #about #merit .wrapFlex > ul li{margin-bottom: 1vw}
  #about #merit .meritBox li img {right: 10vw;top: 30%;}
  #about #merit .meritBox li h3{font-size: 5.5vw;padding: 5vw 0 3vw;}
  #about #case {padding-bottom: 5vw;}
  #about #case h2.cTitle{font-size: 6.0vw;padding: 10vw 0 0;}
  #about #case img.bgCopy{width: 75vw;margin: 0 auto ;}
  #about #case .box{padding:  0;display: block;}
  #about #case .box h2{
    color: #d60039;
    font-size: 6.0vw;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 1em;}
  #about #case .box h3{
    font-size: 5.0vw;
    font-weight: 700;
    margin-bottom: 0.6em;
    text-align: center;}
  #about #case .title{
    position: relative;
    text-align: center;
    display: inline-block;
    padding: 0.1em 1em;
    margin-bottom: 1em;
    color: #fff;
    background: #d60039;
    border: 2px solid #d60039;
    font-size: 2.0rem;
    border-radius: 2em;
    letter-spacing: 0.1em;}
  #about #case .inner{padding: 0 10px;}
  #about #case p,
  #about #case .pBox{margin: 0 auto;text-align: left;border-radius: 6px;}
  #about #case .pBox{background-color: #fee9e9;padding: 20px;}
  #about #case img.bgCopy{position: relative;}
  #about #case img.bgCopy01 {top: 0;margin-left: 20vw;}
  #about #case img.bgCopy02 {top: 0;margin-left: -30vw;}
  #about #case img.bgCopy03 {top: 0;margin-right: -30vw;}
  #about #case img.bgCopy04 {top: 0;margin-left: -20vw;}
  #about #case .box {margin-top: 5vw;margin-bottom: 20vw;}
  
  /* 製品・サポート */
  #service #point {padding-top: 5vw;margin-bottom: 5vw;padding-bottom: 10vw;}
  #service #point .box {padding: 20vw 5vw 5vw;margin-bottom: 5vw;}
  #service #point .box img.num{max-width: 12vw;}
  #service #point .box h2{font-size: 6.5vw;}
  #service #point .box p{font-size: 3.0vw;}
  #service #point .wrapFlex ul li:nth-child(1) .box,
  #service #point .wrapFlex ul li:nth-child(2) .box{margin-left: 0;margin-right: 0;margin-bottom: 3vw;}

  #service #point .wrapFlex .fullBox{margin-top: 0;padding: 0 3vw 3vw;}
  #service #point .wrapFlex ul li .box ul{margin: 24px 0 0;font-size: 3.0vw;}
  #service #point .wrapFlex .fullBox > ul li{width: 100%;}
  #service #point .wrapFlex .fullBox > ul li:nth-child(1) .box,
  #service #point .wrapFlex .fullBox > ul li:nth-child(2) .box{margin-bottom: 0;padding-bottom: 0;padding-left: 0;}
  #service #point .wrapFlex .fullBox > ul li:nth-child(2) .box{
  padding-top: 0;}
  #service #suport  ul{position: relative;}
  #service #suport li{background: #fff;margin-bottom: 1rem;border-radius: 6px;padding: 1rem;padding-left: 16vw;min-height: 100px;font-size: 3.5vw;}
  #service #suport li img{position: absolute;left: 0;width: 14vw}
  #service #suport li:last-child{margin-bottom: 10px;}
  #service #suport li h3{
    color: #d60039;
    font-size: 4.6vw;
    font-weight: 600;
    padding: 0 0 0.2rem;
    text-align: left;}
  
  #service #security ul{
    margin--bottom: 0;}
  #service #security li{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 3vw;}
  
  /* 利用シーン */
  #use fig img{max-width: 100%;}
  #use #scene01,
  #use #scene02,
  #use #scene03 {
    padding-top: 10vw;
    padding-bottom: 10vw;}
  
  #use h2{font-size: 6.0vw;}
  #use .scene .wrapFlex ul {margin-bottom: 10vw;}
  #use .scene .wrapFlex ul li:nth-child(2){text-align: center;width: 100%;padding: 3vw;}
  #use .scene .wrapFlex ul li:nth-child(2) img{transform: rotate(90deg);}
  
  #use .scene .movie,
  #use .scene .movie .movie-in,
  #use .scene .movie iframe{width: 100%;}
  
  /* 料金 */
  #price #priceBox {margin-top: 5vw;}
  #price .wrapTable table{line-height: 1.4;}
  #price .wrapTable table td{letter-spacing: 0;font-size: 3.0vw;line-height: 1.1;}
  #price .wrapTable table td.bgRed{font-size: 4.0vw;}
  
  /* FAQ */
  #faq #faqBox {margin-top: 5vw;}
  #faq #faqBox h3 {font-size: 4.6vw;}
  #faq #faqBox dt, #faq #faqBox dd {padding: 1em 1em 1em 3.5em;}
  #faq #faqBox dt::before, #faq #faqBox dd::before {
      top: calc(((3em * 1.2) - 32px) / 2);
      left: calc(((3em * 1.2) - 32px) / 2);}
  #faq #faqBox .wrapFlex > ul li:nth-child(1),
  #faq #faqBox .wrapFlex > ul li:nth-child(2){width: 100%;margin-left: 0;}
  #faq #faqBox .wrapFlex > ul li.subCol{margin-bottom: 10vw;}
  #faq #faqBox .linkBlock a {font-size: 4vw;padding: 3vw 6vw;}
  #faq #faqBox .linkBlock::before {top: 4.0vw;left: 2vw;}
  #faq #faqBox .kanren a {line-height: 2.8;}
  
  #download li {width: 100%;}
  #contact #download h2 {font-size: 6.0vw;}

.btn-document .doc__item {
      width: 180px
  }

}