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

/* --■■■■■■■■■■■■■■■■■　TAB　■■■■■■■■■■■■■■■■■--*/
/* DUMMY */
@media screen and (min-width: 768px) {
  /* body#top{background-image: url(../../images/dummy/index.png);}
  body#about{background-image: url(../../images/dummy/about.png);}
  body#price{background-image: url(../../images/dummy/price.png);}
  body#case{background-image: url(../../images/dummy/case.png);}
  body#case001{background-image: url(../../images/dummy/case-post.png);}
  
  body#report{background-image: url(../../images/dummy/report.png);}
  body#faq{background-image: url(../../images/dummy/faq.png);}
  body#download{background-image: url(../../images/dummy/download.png);}
  body#partner{background-image: url(../../images/dummy/partner.png);}
  body#casestudy{background-image: url(../../images/dummy/casestudy.png);}
  body{
    background-position: center top;
    background-size: auto;
    background-repeat: no-repeat;
    background-blend-mode:lighten;}*/
} 
/* body{background-color:rgba(255,255,255,1.0);} */
#wrap{opacity: 1.5;}
.fixedShadow{}

.feature-extend {
    z-index: 2000;
}

.feature-extend {
    position: fixed;
    right: 0;
    top: 30vh;
    width: 3em;
    z-index: 2;
}

.feature-extend .feature-extend_inner .ico-doc:before {
    margin-bottom: 0.4rem;
}
.ico-doc:before {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    content: "\f15c";
    color: #ffe511;
    font-size: 2rem;
    font-weight: normal;
}

.feature-extend .feature-extend_inner {
    width: 70px;
    height: 265px;
    width: 3em;
    height: auto;
    background-color: #459ADB;
    border-radius: 9px 0px 0px 9px;
    border: 2px solid #fff;
    text-align: center;
    position: relative;
    -webkit-transition: background-color 0.1s ease;
    transition: background-color 0.1s ease;
    overflow: hidden;
}

.feature-extend .feature-extend_inner a {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 1.6em 0.8em;
  color: #ffe511;
  line-height: 1.0;
  letter-spacing: 0;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    /* text-orientation: upright; */
    letter-spacing: 0.2em;
}


.feature-extend .feature-extend_inner:hover{
  background-color: #aee0f5;
  
}
.feature-extend .feature-extend_inner a:hover .ico-doc:before,
.feature-extend .feature-extend_inner a:hover{
    color: #009de1;
}
    
body,
h1, h2, h3, h4, h5, h6 {letter-spacing: 0;margin-bottom: 0;}
.breadcrumb {padding: 0;}
hr {
    display: block;
    margin: 0;
    border: none;
}
.c-hr {
    width: 100%;
    margin: 50px 0 50px 0;
    border: none;
    border-top: 1px dotted #009de1;
    -webkit-transform: translateX(-0%);
    transform: translateX(-0%);
}
.c-figure .c-ta-right{text-align: center;margin-top: 1rem;}

.hide{display: none;}

*{box-sizing: border-box;}
img{max-width: 100%;}
#wrap{position: relative;overflow: hidden;}
#wrap,
.footer .footer_in{min-width: 1200px;}
/* #wrap{min-width: 1160px;} */
.HdMgn{display: block;height: 0;}
.HdMgn{
  height: 0;
  /* transition: height 0.3s linear; */
  display: none;
}
.c-list-dot>li {
    padding-left: 1em;
    position: relative;
}
.c-list-dot>li:before {
    content: "・";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

/* 文字の上に点 */
.dots {-webkit-text-emphasis: filled;text-emphasis: filled;  }

/*------------------------------
  フェードイン
------------------------------*/
.l-to-r {opacity: 0.1;transform: translateX(-40px); transition: all 1s;}
.l-to-r.scrollin { opacity: 1;  transform: translate(0);}
.r-to-l { opacity: 0.1;  transform: translateX(40px);  transition: all 1s;}
.r-to-l.scrollin { opacity: 1;  transform: translate(0);}
.b-to-t { opacity: 0.1;  transform: translateY(40px);  transition: all 1s;}
.b-to-t.scrollin { opacity: 1;  transform: translateY(0);}
.t-to-b { opacity: 0.1;  transform: translateY(-40px);  transition: all 1s;}
.t-to-b.scrollin { opacity: 1;  transform: translateY(0);}

.wrapTable table.price{border-radius: 10px;}
.wrapTable table {width: 100%;border-collapse: collapse;overflow: hidden;}

.wrapTable table tr{border-bottom: 2px solid #fff; }
.wrapTable table th{font-size: 20px;color: #fff; padding: 15px; background:#999999; text-align: center;border-right: 2px solid #fff;vertical-align: middle;}
.wrapTable table th.bgBlue{background-color: #323f5b;}
.wrapTable table th.bgSkyBlue{background-color: #D8F2FC;} 
.wrapTable table th.bgRed{background-color: #df1f3d; color: #fff; }
.wrapTable table td.bgRed{background-color: #df1f3d; color: #fff; }
.wrapTable table td.bgBlue{background-color: #323f5b; color: #fff;letter-spacing: 0.1em;}
.wrapTable table td.bgPink{background-color: #ffcdcd; }
.wrapTable table td.bgSkyBlue{background-color: #D8F2FC;} 
.wrapTable table th.bgGreen{background-color: #618937; color: #fff;}
.wrapTable table td.bgGreen{background-color: #52c123; color: #fff;}

.wrapTable table thead th{font-weight: 900; }
.wrapTable table td .emNum{font-size: 40px; }
.wrapTable table th.none,{background: #fff;}
.wrapTable table th.em{background: #cfcfcf; color: #222;}
.wrapTable table th img{max-width: 70%;}    
.wrapTable table td{font-size: 20px;padding: 12px; background: #eee;text-align: center; vertical-align: middle;border-right: 2px solid #fff;font-weight: 500;}
.wrapTable table td:last-child{border-right:none;}
.wrapTable table tbody tr.price td{font-weight: 900; padding: 30px 15px; position: relative;}
.wrapTable table tbody tr.price td .img-imanara{position: absolute;top:-5%; right: 10px; width: 25%;}
.wrapTable .note{text-align: left; margin-top: 5px;}
.wrapTable table.half td{width: 50%;}

  #inquiry {position: relative;overflow: visible;padding: 30px 0;}
  #inquiry .lead{font-size: 27px;font-weight: 900;line-height: 1.4;margin-bottom: 40px;}
  #inquiry .lead .em{font-weight: 900;}
  #inquiry{border-radius: 6px;background-color: #009de1;}
  #inquiry .table--mailform a{color: #fff;}
  #inquiry .table--mailform a:hover{text-decoration: none;}
  #inquiry .lead{margin-bottom: 40px;}
  #inquiry #wrapForm{padding: 0 3em;}
  .table--mailform .f_c_red{color: #FBEB5D}
  .table--mailform .flex-box {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;}
  .flex-box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-item-align: stretch;
      align-self: stretch;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;}
  .table--mailform {width: 100%;border-spacing: 0}
  .table--mailform tr:not(:last-child) {}
  .table--mailform td,.table--mailform th {
      line-height: 1.4;
      text-align: left;
      padding: 0;
      display: block;
      color: #fff;}
  .table--mailform td {
      width: 70%;
      width: 100%;}
  .table--mailform th {
      width: 30%;
      width: 100%;
      padding: 3rem 0 0.5rem;
      vertical-align: top}
  .table--mailform th .flex-box {
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start}
  .table--mailform fieldset {letter-spacing: -.4em}
  .table--mailform fieldset,.table--mailform input,.table--mailform textarea,.table--mailform select {
      padding: 0;
      margin: 0;
      border: none;
      font-size: 14px;
      font-size: 1.4rem;}
  .table--mailform input:not([type="checkbox"]):not([type="radio"]),.table--mailform select {
      padding: 1.0em;}
  .table--mailform ul.input-small input:not([type="checkbox"]) {
      width: 100%;
      max-width: 100px}
  .table--mailform label {padding: 0 .5rem 0 0}
  .table--mailform input[type="checkbox"] {
    position: relative;
    width: 2rem;
    height: 2rem;
    border: 1px solid #fff;
    border-radius: 0.2rem;
    vertical-align: -0.5rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;}
  .table--mailform input[type="checkbox"]:checked:before {
    position: absolute;
    top: 0;
    left: 0.3rem;
    transform: rotate(50deg);
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: '';}
  .table--mailform textarea {
      width: 100%;
      min-height: 125px;
      padding: .6rem;
      display: block;
      background: #fff;}
  .table--mailform .sub-text>div {
      vertical-align: middle;
      display: inline-block;
      *display: inline;
      zoom:1}
  .table--mailform .sub-text>div:nth-child(1) {width: 40%}
  .table--mailform .sub-text>div:nth-child(2) {
      font-size: 12px;
      font-size: 1.2rem;
      margin-left: 3%}
  .table--mailform .sub-text input:not([type="checkbox"]):not([type="radio"]) {width: 100%}
  .table--mailform .label {width: calc(100% - 50px - 1rem)}
  .table--mailform .mark {
      width: 50px;
      margin: 0 1rem 0 0;
      padding: .0rem .5rem;
      color: #fff;
      font-size: 12px;
      font-size: 1.2rem;
      font-weight: bold;
      text-align: center;
      letter-spacing: .1rem;
      border-radius: 3px}
  .table--mailform .mark__red { background: #cafffe;color: #b52149; }
  .table--mailform .mark__gray {background: #eee;color:#666 }
  .table--mailform .ifpersonal iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      margin-bottom: 1rem;}
  .table--mailform .item-select {width: 100%}
  .table--mailform .item-select li {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start}
  .table--mailform .item-select li:not(:first-child) {margin: .5rem 0 0}
  .table--mailform ul.label-side {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start}
  .table--mailform ul.label-side li {width: 43.5%}
  .table--mailform ul.label-side li:not(:last-child) {padding: 0 3% 0 0}
  .table--mailform ul.label-side input:not([type="checkbox"]),.table--mailform ul.label-side textarea,.table--mailform ul.label-side select {width: 100%}
  
  #cvBtnArea {margin: 2rem 0 4rem;}
  #cvBtnArea .buttonYellow {
      max-width: 400px;
      margin: 0 auto;
      display: block;
      padding: 1.5rem 3rem;
      font-size: 18px;
      background: #FBEB5D;
      border: 1px solid #FBEB5D;
      border-radius: 3.0rem;}
  #cvBtnArea .buttonYellow:hover { background: #fbf6c6;}
  a.buttonYellow, a.buttonYellow:hover {color: #CF0037;text-decoration: none;}

  /* #inquiry #wrapForm table{width: 100%; }
  #inquiry #wrapForm table tr {border-bottom: solid 2px #fff;}
  #inquiry #wrapForm table tr:last-child{border:none;}
  #inquiry #wrapForm table th{width: 40%; background: #0099D6; color: #fff; font-size: 16px; text-align: left; font-weight: normal; padding: 15px; vertical-align: top;border-right: solid 2px #fff;}
  #inquiry #wrapForm table td{background: #eee; font-size: 16px; text-align: left;padding: 15px; vertical-align: middle; position: relative;}
  
  #inquiry #wrapForm table tr:first-child th{border-radius: 10px 0 0 0;}
  #inquiry #wrapForm table tr:last-child th{border-radius: 0 0 0 10px;}
  #inquiry #wrapForm table tr:first-child td{border-radius: 0 10px 0 0;}
  #inquiry #wrapForm table tr:last-child td{border-radius: 0 0 10px 0;}
  
  .selcted_form_crosslist{position: relative;}
  .selcted_form_crosslist > li{position: relative; margin-bottom: 10px;}    
  .selcted_form_crosslist > li:last-child{margin-bottom: 0;}

  #inquiry #wrapForm .ulFormBtn{display: flex; margin: 40px auto 0; width: 100%;}
  #inquiry #wrapForm .ulFormBtn > li{width:512px; margin: 0 auto;}
  #inquiry #wrapForm iframe {width: 100%;background: #fff;border: none;    border-radius: 5px; font-size: 14px; } */
  
#footer{background: #f3f5f6;padding: 40px 0;color: #333;font-family:'ヒラギノ角ゴ ProN','メイリオ';width: 100%}
#footer .ftInner{max-width:980px;margin:0 auto;}
#footer .ftInner .kslogo{float:left;width:184px;}
#footer .ftInner .telnum{float:right;width:272px;margin-left:15px;}
#footer .ftInner .address{float:right;width:auto;font-size:13px;line-height:1.3;color:#555;}
  
/* FORM */
select, 
textarea {
    color: #000;
    font-size: 16px;
    padding: 4px;
  border: 1px solid #999;
}
table input{ font-size: 16px; }
.errm,
.ymderrm { color: #FF0000!important; display: none; }
.errm.on,
.ymderrm.on { display: block;} 
select{ line-height: 1; vertical-align: middle; padding: 6px; width: 468px; background: #f9f9f9; border: 2px solid #c0c0c0;    border-radius: 5px; }
select.ymd { width: auto; }

input[type="text"]  { line-height: 1;  vertical-align:middle; padding: 6px; width: 100%; border: none; border-radius: 3px;} 
    input[type="text"].w40{width: 40%; position: absolute; right: 30px;}
textarea { line-height: 1.4;  vertical-align:middle; padding: 6px; width: 100%;border: none; border-radius: 5px;}
input[type="text"].sw{width:50px;}
input[type="text"].date{width:80%;}
input[type="checkbox"]{border: 2px solid #c0c0c0; border-radius: 5px;}
label { display: inline-block; padding-left: 5px; margin-bottom:3px; }
label input { margin-left: -5px; vertical-align: top; margin-top: 6px;}
.boxTextarea{padding:20px;border:1px #eaeaea solid; margin-bottom:0px;}
#check .boxTextarea{padding:30px;border:1px #eaeaea solid; margin-bottom:0px;}
#btnArea{position: relative; overflow: hidden;padding:30px 0 0;}
.btn{padding:30px 0 0; text-align:center; margin:0 auto;}

  /* チェックボックス */	
/*
  .choice li label{
    color: #fff;
    padding: 20px;
    border-radius: 6px;
    width: 100%;
  }
  .choice li label input{
    margin-left:0;
  }
  .choice input[type="checkbox"] {
      border: 2px solid #000 !important;
      border-radius: 2px;
  }
*/

.btnSubmit{
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  
  text-align: center;
  display: inline-block;
  padding: 1em 2em;
  padding: 10px 40px;
  color: #fff;
  background-color: #FF316C;
  font-size: 1.5em;
  border-radius: 2em;
  text-decoration: none;
  
}

.btnSubmit:hover{
/* 	opacity: 90%; */
}
    
.btnCancel{
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  
  background-size: 20px auto;
  background: -moz-linear-gradient(#8a8a8a, #a0a0a0 50% , #8a8a8a 100%);
  background: -webkit-linear-gradient(#8a8a8a, #a0a0a0 50% , #8a8a8a 100%);
  background: linear-gradient(#8a8a8a, #a0a0a0 50% , #8a8a8a 100%);
    
  border-radius: 40px;
  font-feature-settings: "palt";
  color: #fff;
  height: 80px;
  font-size: 24px;
  font-weight: 900;
  line-height: 80px;
  text-decoration: none;}
    
.btnSubmit::after{
content: '';
    position: absolute;
    top: 25%;
    right: 4%;
    /* margin-top: -4.5px; */
/*     background: url(../../images/arrow-btn-right.png); */
    background-repeat: no-repeat;
    /* background-position: center center; */
    width: 42px;
    height: 42px;
    background-size: 100% auto;}

.tel{color: #df1f3d;font-size: 2.4rem; font-weight: 500;vertical-align: middle; }
.tel:before{
  content: '\f095';
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  position: absolute;
  font-size: 20px;
  margin-left: -1.15em;
  margin-top: 0.5em;
  webkit-transform: rotate(110deg);
  transform: rotate(110deg);}

#menu{padding: 16px 0 12px;font-size: 12px;}
#menu .tel{ margin-right: 0.6em;}
#menu .tel:before{  font-size: 20px;}
#menu .btnHead{margin: 6px 0 0; }
#menu .btnHead a{
  text-align: center;
  display: inline-block;
  padding: 0.5em 2em;
  padding: 0.8em 3.5em;
  color: #fff;
  background-color: #D7003A;
  border: 2px solid #fff;
  font-size: 16px;
  border-radius: 28px;
  text-decoration: none;
  line-height: 1.0;
  margin-left: 1.0em;}
#menu .btnHead a:hover{
  color: #D7003A;
  background-color: #fff;
  border: 2px solid #D7003A;}

.btn,
a.btn,
button.btn {
  font-size: 1.2rem;
  font-weight: 700;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.01em;
  color: #212529;
  border-radius: 0.5rem;}
.btn-wrap {margin: 60px 0;}
a.btn-c {
  position: relative;
  text-align: center;
  display: inline-block;
  padding: 0.3em 5em;
  color: #fff;
  border: 2px solid #fff;
  background: none;
  font-weight: 600;
  font-size: 2.4rem;
  border-radius: 2em;
  text-decoration: none;}
a.btn-c span {
  font-size: 1.4rem;
  position: absolute;
  top: -10px;
  left: calc(50% - 250px);
  display: block;
  width: 500px;
  padding: 0.2rem 0;}
a.btn-c:hover {
  color: #009de1;
  border: 2px solid #009de1;
  background: #fff;}
a.btn-c:hover:before {left: 2rem;}
.bBtn {
  /* padding: 60px 0; */
}
.bBtn a.btn-c {
  color: #fff;
  background: #009de1;
  border: 2px solid #009de1;
  padding: 0.2em 1em;
  font-size: 1.8rem;
  min-width: 280px;
}
.bBtn a.btn-c:hover {
  color: #009de1;
  background: #fff;
}

.bBtn a.green.btn-c{
  border: 2px solid #03a65b;
  background-color: #03a65b;
  background: -webkit-gradient(linear, left top, left bottom, from(#03a65b), to(#03a65b));
  background: linear-gradient(to bottom, #03a65b 0%, #03a65b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#03a65b', EndColorStr='#03a65b');
}
.bBtn a.green.btn-c:hover {
  color: #03a65b;
  background: #fff;
  border: 2px solid #fff;}

#top #wrapMainvisual .bBtn a.btn-c:hover {color: #009de1;}
#top #wrapMainvisual .bBtn a.green.btn-c:hover {color: #03a65b;}



/* INDEX共通 */
#top #mainvisual{
  background-image: url(../../images/mvbg.png);
  background-size: cover;
  height: 600px;
  width: 100%;}
  
#top #wrapMainvisual,
#top #lead,
#top #topics{background: #eefafa;}

#top #lead{padding: 105px 0;}
#top #lead h3{color: #009de1;font-weight: 600;font-size: 3.6rem;line-height: 1.7;}

#top #topics{position: relative;padding-bottom: 110px;}
#top #topics .txtBox h3{font-size: 2.4rem;font-weight: 700;color:#009de1;line-height: 1.4;margin-bottom: 40px;}
#top #topics .txtBox p{font-size: 1.6rem;line-height: 1.7;letter-spacing: 0.02em;margin-bottom: 40px;}
#top #topics .mainBox01Wrap{padding: 0;position: relative;}
#top #topics .mainBox01{height: 600px;}
#top #topics .mainBox01 .boxFig img{position: absolute;left: 80px;top: -35px;}
#top #topics .mainBox01 .boxFig.p02 img{left: 130px;top: 365px;}
#top #topics .mainBox01 .inner .txtBox{position: absolute;max-width: 670px;right: 80px;top: 10px;padding: 50px;background: #fff;border-radius: 5px;box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2);}
#top #topics .mainBox02Wrap{padding: 0;position: relative;}
#top #topics .mainBox02{margin-top: 100px;height: 670px;}
#top #topics .mainBox02 .boxFig img{position: absolute;right: 80px;top: -50px;}
#top #topics .mainBox02 .boxFig.p02 img{right: 80px;top: 445px;}
#top #topics .mainBox02 .inner .txtBox{position: absolute;max-width: 670px;padding: 50px;background: #fff;border-radius: 5px;box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2);}
#top #topics .mainBox03Wrap{padding: 0;position: relative;}
#top #topics .mainBox03{margin-top: 115px;height: 490px;}
#top #topics .mainBox03 .boxFig img{position: absolute;left: 80px;top: -35px;}
#top #topics .mainBox03 .inner .txtBox{position: absolute;max-width: 670px;right: 80px;top: 10px;padding: 50px;background: #fff;border-radius: 5px;box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2);}
#top #topics .mainBox04Wrap{padding: 0;position: relative;}
#top #topics .mainBox04{margin-top: 75px}
#top #topics .mainBox04 .inner .txtBox{text-align: center;}
#top #topics .mainBox04 .boxFig img{max-width: 500px;margin-top: -30px;}

#top #case{
  padding-top: 120px;
  padding-bottom: 40px;
}

#top #case .title{
  text-align: center;
}

#top #case .title h2{
  color: #009de1;
  font-size: 3.6rem;
  font-weight: 600;
  margin-bottom: 20px;
}
#top #case .title h3{
  background: #009de1;
  color: #fff;
  font-size: 2.1rem;
  padding: 4px 2rem;
  border-radius: 8px;
  display: inline-block;
}
#top #case h3{
  letter-spacing: 0;
  margin-bottom: 0;
}

#top #case .caseBoxWrap{padding-top: 80px;padding-bottom: 80px;}
#top #case .caseBoxWrap.bgGray{background: #eef2fa;}
#top #case .caseBox .inner{display: flex;}
#top #case .caseBox .boxFig{width: 50%;}
#top #case .caseBox .inner .txtBox{width: 50%;padding-left: 20px}
#top #case .caseBox .inner .txtBox h3{
  border: 3px solid #009de1;
  color: #444444;
  border-radius: 8px;
  font-size: 1.8rem;
  font-weight: 500;
  display: inline-block;
  padding: 4px 12px 4px 0px;
  margin-bottom: 20px;
}
#top #case .caseBox .inner .txtBox h3 span{
  background: #009de1;
  color: #fff;
  border-radius: 8px 0 0 8px;
  font-size: 1.8rem;
  padding: 4px 8px;
  margin-right: 1rem;
  margin-left: -3px;
}
#top #case .caseBox .inner .txtBox h2{
  color: #009de1;
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 40px;
  line-height: 1.6;
}
#top #case .caseBox .inner .txtBox p{
  line-height: 1.6;
  margin-bottom: 3rem;
}
#top #case .caseBox .inner .txtBox .bBtn{margin-top: 50px;}


#trialBlock .blue{
  background-color: #009de1;
  color: #fff;
  padding-top: 100px;
  padding-bottom: 50px;
  position: relative;
}

#trialBlock .blue .wrap{display: flex;width: 90%;}
#trialBlock .blue .wrap .copyBox,
#trialBlock .blue .wrap .btnBox{width: 50%;z-index: 1;}

#trialBlock .blue h3{
  font-weight: 600;
  font-size: 2.5rem;
  margin-bottom: 40px;
}
#trialBlock .blue h3 span{
  color: #ffe511;
}
#trialBlock .blue ul{
  margin-bottom: 4rem;
}


#trialBlock .blue .wrap .btnBox img{
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
#trialBlock .blue .wrap .btnBox .bBtn a.btn-c {
    color: #ffe511;
    background: #009de1;
    border: 2px solid #fff;
}
#trialBlock .blue .wrap .btnBox .bBtn a.btn-c:hover {
  color: #009de1;
  background: #fff;
}

#trialBlock .contents{
  padding: 40px 75px 105px;
  position: relative;
}
#trialBlock .contents h3{
  color: #009de1;
  font-weight: 600;
  font-size: 2.4rem;
  margin-bottom: 50px;
}
#trialBlock .contents h4{
  width: 260px;
  margin-bottom: 30px;
}
#trialBlock .contents h5{
  font-size: 2.0rem;
  letter-spacing: 0.2em;
}
#trialBlock .contents h5 .big{
  color: #fe0000;
  font-size: 4.6rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height: 1;

}
#trialBlock .contents .price{
  margin-bottom: 4rem;
}

#trialBlock .boxFig img{
  position: absolute;
  /* right: 110px; */
  right: calc(110vw / 12.8);
  top: 40px;
  max-width: 640px;
}

#top #trialBlock .blue{padding-top: 120px;}
#top #trialBlock .contents .boxFig img{position: absolute;right: -90px;top: -170px;max-width: none;}


/* 機能・特徴 */

#about{}

#about .c-localnav{
  max-width: 880px;
  margin:0 auto;
}
#about .c-localnav .c-localnav-list{
  display: flex;
  border-radius: 8px;
  overflow: hidden;
}
#about .c-localnav .c-localnav-list li.c-localnav-item{
  width: 20%;
  height: 5rem;
  align-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.5em;
  margin-right: 1px;
  font-weight: bold;
}
#about .c-localnav .c-localnav-list li.c-localnav-item a{
  text-decoration: none;
  background: #6fcbf3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#about .c-localnav .c-localnav-list li.c-localnav-item a:hover,
#about .c-localnav .c-localnav-list li.c-localnav-item span{
  background: #009de1;
  color: #ffe511;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#about .mainBox{
  padding: 80px 0;
  text-align: center;

}
#about .mainBox h3{
  color: #009de1;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.5em;
  margin-bottom: 50px;
}
#about .c-anchor-icon{
  max-width: 820px;
  width: 100%;
  margin:30px auto 0;
  display: flex;
}
#about .c-anchor-icon .c-anchor-icon-item{
  position:relative;
  width: 100%;
}

#about .c-anchor-icon .c-anchor-icon-item a{
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  display: block;
}
#about .c-anchor-icon .c-anchor-icon-item a:hover{
  color: #009de1;
}


#about .c-anchor-icon .c-anchor-icon-item a:before,
#about .c-anchor-icon .c-anchor-icon-item a:hover:before{
  content: '';
  background-image: url(../../images/c-anchor01.png);
  background-repeat: no-repeat;
  background-position: center top;
  margin-block: 10px;
  height: 96px;
  display: block;
}


#about .c-anchor-icon .c-anchor-icon-item:nth-child(1) a:before{background-image: url(../../images/c-anchor01.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(2) a:before{background-image: url(../../images/c-anchor02.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(3) a:before{background-image: url(../../images/c-anchor03.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(4) a:before{background-image: url(../../images/c-anchor04.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(5) a:before{background-image: url(../../images/c-anchor05.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(6) a:before{background-image: url(../../images/c-anchor06.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(1) a:hover:before{background-image: url(../../images/c-anchor01-on.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(2) a:hover:before{background-image: url(../../images/c-anchor02-on.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(3) a:hover:before{background-image: url(../../images/c-anchor03-on.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(4) a:hover:before{background-image: url(../../images/c-anchor04-on.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(5) a:hover:before{background-image: url(../../images/c-anchor05-on.png);}
#about .c-anchor-icon .c-anchor-icon-item:nth-child(6) a:hover:before{background-image: url(../../images/c-anchor06-on.png);}


#about .about-bg{
  background: #eefafa;
  padding-top: 20px;
  padding-top: 60px ;
  padding-bottom: 60px;
}
#about #talk{
}

#about .c-anchor-point{
  background: #fff;
  /* margin-top: 60px; */
  margin-bottom: 60px;
  padding: 50px;
}
#about .c-anchor-point h3{
  color: #009de1;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1.2;
  margin-bottom: 50px;
  text-align: center;
}
#about .c-anchor-point h3 small{
  display: block;
  font-size: 2.0rem;
}
#about .c-anchor-point h3:after{
  display: block;
  content: '';
  background-color: #009de1;
  height: 4px;
  width: 80px;
  margin: 30px auto 0;
  
}

#about .aboutBox .inner{display: flex;align-items: flex-start;}
#about .aboutBox  .boxFig{
  width: 32%;
  border: 2px solid #009de1;
  border-radius: 12px;
  overflow: hidden;
}
#about .aboutBox  .inner .txtBox{
  width: 70%;
  padding-right: 40px;
}

#about .aboutBox  .inner .txtBox h4{
  color: #009de1;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.6;
  display: flex;
  align-items: center;
}
#about .aboutBox  .inner .txtBox h4 img{
  margin-right:2.4rem;
}


#about .aboutTbl table{
  border-collapse: inherit;
  border-spacing: 5px;
  display: table;
  /* width: 100%; */
}

#about .aboutTbl th,
#about .aboutTbl td{
  padding: 1em;
  font-size: 1.4rem;
  border-bottom: 1px dotted #009de1
}

#about .aboutTbl th{
  text-align: right;
  /* font-weight: normal; */
  white-space: nowrap;
}


/* 料金 */

#price #price-table{background: #a4e0fa;}
#price .priceTable{
  max-width: 960px;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 120px;
  margin: 0 auto;}
#price .priceTable table{
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
   border-spacing:1px;
}
#price .priceTable table th,
#price .priceTable table td{
  width: 25%;
}

#price .priceTable table th:nth-child(1){background: #fb980b;border-radius: 8px 0 0;}
#price .priceTable table th:nth-child(2){background: #71b02a;}
#price .priceTable table th:nth-child(3){background: #009de1;}
#price .priceTable table th:nth-child(4){background: #e14000;border-radius: 0 8px 0 0;}

#price .priceTable table td:nth-child(1) h3{color: #fb980b;}
#price .priceTable table td:nth-child(2) h3{color: #71b02a;}
#price .priceTable table td:nth-child(3) h3{color: #009de1;}
#price .priceTable table td:nth-child(4) h3{color: #e14000;}

#price .priceTable table th{
  font-size: 2.0rem;
  line-height: 1;
  padding: 0.6em;
  vertical-align: middle;
  color: #fff;
  font-weight: bold;
}
#price .priceTable table th:nth-child(4){font-size: 1.8rem;}
#price .priceTable table th span{font-size: 1.4rem;}
#price .priceTable table td{
  background: #fff;
  padding: 1.0em;
  text-align: center;
  vertical-align: middle;
}
#price .priceTable table td h3{
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
}

#price .priceTable table td h4{
  font-weight: 700;
  font-size: 1.6rem;
}
#price .priceTable table td li{
  margin-left: 1.0em;
  line-height: 1.3;
  margin-top: 0.6em;
}
#price .priceTable table td li:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #444;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    margin-right: 0.5em;
    margin-left: -1.0em;
}

#price .priceTable table tr.top td{
  vertical-align: top;
text-align: left;
line-height: 1.8}


#price #function{
  background: #ebf4fa;
  background-image: url(../../images/gray-bg.png);
  padding: 120px 0 70px;
  padding: 140px 0 70px;
  text-align: center;
}

#price #function h3 {
    color: #009de1;
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0.5em;
    margin-bottom: 20px;
}
#price #function  h4{
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 80px;
}

#price #function  ul{display: flex;}
#price #function ul li{
  position: relative;
  width: 20%;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 60px 10px 70px;
  background: #fff;
  border-radius: 8px;
  border: 2px solid #009de1;
  vertical-align: bottom;}
#price #function ul li:nth-child(5){  margin-right: 0;}
#price #function ul li img{display: block;margin: 0 auto;}
#price #function ul li h5{
  position: absolute;
  display: block;
  width: 90%;
  text-align: center;
  bottom: 10px;
  line-height: 1.1;
  font-size: 1.4rem;
  height: 2em;
  align-items: center;
  display: grid;
}
#price #function .bBtn{margin-top: 30px;} 

#price #manage{
  background: #fff;
  padding: 90px 0 80px;
  text-align: center;
}

#price #manage h3 {
    color: #009de1;
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0.5em;
    margin-bottom: 80px;
}

#price #manage  ul{display: flex;}
#price #manage ul li{
  position: relative;
  width: 25%;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 18px 10px;
  background: #fff;
  border-radius: 8px;
  border: 2px solid #009de1;
  vertical-align: bottom;}
#price #manage ul li:nth-child(4){  margin-right: 0;}
#price #manage ul li{
  line-height: 1.1;
  font-size: 1.4rem;
  font-weight: 600;}
#price #manage .bBtn{margin-top: 30px;}

#price #option{
  background: #ebf4fa;
  background-image: url(../../images/gray-bg.png);
  padding: 90px 0 120px;
  text-align: center;
}

#price #option h3 {
    color: #009de1;
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0.5em;
    margin-bottom: 20px;
}
#price #option  h4{
  color: #009de1;
  font-size: 2.0rem;
  font-weight: 700;
  margin-bottom: 30px;
}

#price #option  ul{display: flex;justify-content: center;}
#price #option ul li{
  position: relative;
  width: 25%;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 18px 10px;
  background: #fff;
  border-radius: 8px;
  border: 2px solid #009de1;
  vertical-align: bottom;}
#price #option ul li:nth-child(2){  margin-right: 0;}
#price #option ul li{
  line-height: 1.1;
  font-size: 1.4rem;
  font-weight: 600;}
#price #option .bBtn{margin-top: 30px;}

#price #step{
  padding: 120px 0 0;
  text-align: center;
}

#price #step h3 {
    color: #009de1;
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1;
    margin-bottom: 80px;
}
#price #step h4 {
  font-size: 2.4rem;
  margin-bottom: 45px;
}

#price #step .saas,
#price #step .onpre{
  color: #fff;
  padding: 60px 50px;
  text-align: center;
  margin-bottom: 80px;
  border-radius: 8px;}
#price #step .saas{background: #009de1;}
#price #step .onpre{background: #e14000;}

#price #step .saas ol.c-step{display: flex;}
#price #step .saas ol.c-step li{
  width: 33%;
  border-radius: 8px;
  margin-right: 60px;
  padding: 10px 20px;
  background: #fff;
  color: #252525;
  position: relative}
#price #step .saas ol.c-step li::after{
  content: '';
  background-image: url(../../images/c-step-arrow.svg);
  background-repeat: no-repeat;
  height: 33px;
  width: 55px;
  display: block;
  position: absolute;
  right: -55px;
  top: 45%;}

#price #step h4.c-step-ttl{
  font-size: 2.6rem;
  font-weight: bold;
  color: #009de1;
  margin-bottom: 30px;
}
#price #step .c-step-item img{
  max-height: 60px;
  margin-bottom: 20px;
}


#price #step .c-step-text{
text-align: left;
}

#price #step .saas ol.c-step li:nth-child(3){
  margin-right: 0;
}
#price #step .saas ol.c-step li:nth-child(3):after{
  display: none;
}



#casestudy {}
#casestudy .c-pc{display: block}
#casestudy .c-sp{display: none;}
/* #casestudy .contentsW{background-color: #fff;} */


#casestudy .inner .box{
  padding: 60px 90px ;
}

#casestudy .contents h3 {
    color: #009de1;
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0.5em;
    /* padding-top: 60px; */
    margin-bottom: 60px;
    text-align: center;
    padding-left: 0.25em;
}
#casestudy .contents h4 {
    /* color: #009de1; */
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0;
  /* margin-bottom: 30px; */
  text-align: center;
}

#casestudy .box h2 {
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 30px;
  text-align: center;
}
#casestudy .box h3 {
    /* color: #009de1; */
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 30px;
  text-align: center;
}
#casestudy .box h4 {
    /* color: #009de1; */
  font-weight: 600;
  font-size: 2.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 0;
  text-align: center;
}


#casestudy .category ul li {
  border: 2px solid #009de1;
  border-radius: 8px;
  text-align: center;
  overflow: visible;
}
#casestudy .category ul li h4{
  position: relative;
  background-color: #009de1;
  color: #fff;
  font-size: 2.4rem;
  padding: 0.6rem;
}
#casestudy .category ul li h4 span,
#casestudy .block h4 span{
  display: inline-grid;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  left: -10px;;
  background: #fff;
  color: #009de1;
  border: 2px solid #009de1;
  border-radius: 8px;
  height: 2em;
  width: 2em;
}
#casestudy .category ul li p{
  padding-bottom: 24px;
  font-size: 2.0rem;
  font-weight: bold;
}
#casestudy .category ul li img{
  max-height: 70px;
  margin-bottom: 14px;
}
#casestudy .block{
  margin-top: 80px;
  text-align: left;
  display: block;
  position: relative;
}
#casestudy .block h4{
  text-align: left;
  border-radius: 8px;
  background-color: #009de1;
  color: #fff;
  font-size: 2.4rem;
  padding: 0.6rem 1.6rem 0.6rem 6.6rem;
  display: block;
  margin: 0;
}
#casestudy .block h3{
  text-align: left;
  color: #333;
  font-size: 2.4rem;
  display: block;
  padding: 24px 0 ;
  margin: 0;
}
#casestudy .block p{
  margin-bottom: 1em;
}
#casestudy .block .blockborder {
  border-radius: 8px;
  border: 2px solid #009de1;
  padding: 30px 30px 10px;
}
#casestudy .block .blockbox {
  background: #f5f5f5;
  padding: 20px;
  margin-bottom: 20px;
}

#casestudy .block .blockbox h4{
  background: none;
  color: #009de1;
  font-size: 2.4rem;
  text-align: center;
  padding: 0 0 20px;
}
#casestudy .block .blockbox h4 span{
  display: inline;
      align-content: normal ;
      justify-content: normal ;
      position: relative;
      top: 0;
      left: 0;
      background: none;
      
      border: none;
      border-radius: 0;
      height: auto;
      width: auto;
}

#casestudy .block .blockbox .wrapFlex{display: flex;}

#casestudy .block .blockbox .wrapFlex figure{margin: 0}
#casestudy .block .blockbox .wrapFlex div{
  display: block;
  width: 48%;
  padding: 0;
  margin-right: 4%;
  position: relative;
  overflow: hidden;}
#casestudy .block .blockbox .wrapFlex div:nth-child(2){margin-right: 0}

#casestudy .block .blockbox .wrapFlex .bBtnBox{width: 100%;text-align: center;margin-top: 2em;}
#casestudy .block .blockbox .wrapFlex .bBtnBox a{font-size: 1.6rem;padding: 0.2em 1.6em;}

#casestudy .c-case{}
#casestudy .case_index{
  padding: 60px 60px;
  background: #fff;
  margin: 30px -60px 30px -60px;}
#casestudy .case_index_bg{padding-bottom: 60px;}
#casestudy .case_index .fig {
  padding: 0 20px 0 0;
  width: 40%;}
#casestudy .case_index .fig img{border-radius: 8px;}
#casestudy .case_index h2{
  color: #009de1;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 1.0em;}
#casestudy .case_index p{margin-bottom: 1.0em;}
#casestudy .case_index h2 a{color: #009de1;}
#casestudy .created{
  display: bloxk;
  text-align: center;
  margin-bottom: 90px;}
#casestudy #c-case{
  padding-top: 60px;
  background: #eefafa;}
#casestudy .c-case-index-pic{border-bottom: 1px solid #eee;}
#casestudy .c-case-card-item{background: #fff;}
#casestudy .c-case-index-body {padding: 25px;}
#casestudy .c-case-card-item a:hover  {background: #d1f1ff;}
#casestudy .c-case-index-ttl {
 font-size: 1.8rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 10px;}
#casestudy .c-case-index-name {font-size: 1.4rem;}


  
#case .c-pc{display: block}
#case .c-sp{display: none;}
#case h3 {
    color: #009de1;
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0.5em;
    margin-bottom: 60px;
    text-align: center;
}

#case .c-case{
  
}

#case .case_index{
  padding: 60px 60px;
  background: #fff;
  margin: 30px -60px 30px -60px;
}
#case .case_index_bg{
  padding-bottom: 60px;
}

#case .case_index .fig {
  padding: 0 20px 0 0;
  width: 40%;
}
#case .case_index .fig img{border-radius: 8px;}
#case .case_index h2{
  color: #009de1;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 1.0em;
}
#case .case_index p{margin-bottom: 1.0em;}

#case .case_index h2 a{color: #009de1;}

#case #c-case-card{
  padding: 100px 0;
  background: #ebf4fa;
}
#case .c-case-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -48px -24px 0;
}
#case .c-case-card h3{
  font-size: 1.6rem;
  color: #252525;
  text-align: left;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: 0;
}
#case .c-case-card-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 33%;
    width: 29%;
    margin: 48px 24px 0;
    padding: 0;
}
#case .c-hover {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
#case .c-case-card-link {
    color: #1d2a4d;
    display: block;
    text-decoration: none;
    width: 100%;
    border: 1px solid #d0dee2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


#case #c-case{
  padding-top: 60px;
  background: #eefafa;
  }

#case .c-case-index-pic{
  border-bottom: 1px solid #eee;
}
#case .c-case-card-item{
  background: #fff;
}
#case .c-case-index-body {
    padding: 25px;
}
#case .c-case-card-item a:hover  {
  background: #d1f1ff;
}

#case .c-case-index-ttl {
 font-size: 1.8rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 10px;
}
#case .c-case-index-name {
    font-size: 1.4rem;
}

#case-download #pageHead h2 {
  color: #000;
}

#caseDownloadBody {
  margin: 90px 0;
}
#caseDownloadBody .c-case-card-item {
  display: block;
  text-align: center;
  margin: 80px 24px 0;
}
#caseDownloadBody .c-case-card h3{
  text-align: center;
  margin-bottom: 10px;
  /* color: #009de1; */
  font-size: 2.0rem;
  font-weight: 700;
}

.toCaseDownload{
  text-align: center;
  padding: 60px 0 60px;
}
.toCaseDownload .bBtn a.btn-c{
  color: #ffe511;
  padding: 0.5em 1em;
}
.toCaseDownload .bBtn a.btn-c:hover{
  color: #009de1;
}

.c-figure{
  max-width: none;
  margin: 2rem 0;
  text-align: center;
}
.c-figure-caption{
  margin-top: 0;
}
#case .c-case-eyecatch{
  background: #e6f8fc;
  background: url(../../images/case/case-title-bg.png);
  min-height: 300px;
  display: flex;
  align-items: center;
}
#case div.c-figure-caption{
  background: #2fb3d0;
  color: #fff;
  position: relative;
  text-align: center;
}

#case .c-lh-2 {
    line-height: 1.6;
}

#case .c-case-heading-info{
  position: absolute;
  bottom: 30px;
  background: #fff;
  color: #252525;
  width: 350px;
  padding: 20px;
  border-radius: 8px;
}
.c-case-info {
    background: none;
    padding: 0;
}
.c-case-info-inner {
 padding: 0;
}
#case .c-figure-caption .c-case-info-name{
  margin-bottom: 1rem;
  font-weight: 600;
}
#case .c-case-heading-person{
  padding: 2rem 0 2rem 380px;
  text-align: left;
  font-size: 1.4rem;
}

#case .c-case-heading-text h3{
  color: #2fb3d0;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin-top: 60px;
  margin-bottom: 20px;
  text-align: left;
}

#case .c-case-eyecatch img{
  max-width: 920px;
  margin: 0 auto;
  display: block;
}

#case .c-case-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 4rem;
}
#case .c-case-heading-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}




.c-case-info-dl {
    font-size: 12px;
    font-size: 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0
}

.c-case-info-dl>dt {
    width: 30%;
    padding: 2px 0
}

.c-case-info-dl>dd {
    width: 70%;
    padding: 2px 0;
    text-align: left;
}

.c-case-info-note {
    font-size: 10px;
    font-size: 1rem;
    margin: 1rem 0 0
}

.c-case-solution-body {
    font-size: 1.5rem;
    margin-left: 20px
}


#case .c-icon-blank:after {
    content: "";
    display: inline-block;
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%20x%3D%220px%22%20y%3D%220px%22%3E%20%3Cpath%20fill%3D%22%230060b0%22%20d%3D%22M14.667%200L9.333%200%209.333%201.301%2013.333%201.301%2013.333%202.699%2014.667%202.699%2014.667%206.699%2016%206.699%2016%201.301%2016%200zM14.667%2014.699L1.334%2014.699%201.334%201.301%206.667%201.301%206.667%200%201.334%200%200%200%200%201.301%200%2014.699%200%2016%201.334%2016%2014.667%2016%2016%2016%2016%2014.699%2016%209.301%2014.667%209.301z%22%2F%3E%20%3Cpath%20fill%3D%22%230060b0%22%20d%3D%22M8%206.701H9.333V8.001999999999999H8zM6.667%208.002H8V9.303H6.667zM12%202.699H13.333V4H12zM10.667%204H12V5.301H10.667zM9.333%205.301H10.667V6.7010000000000005H9.333z%22%2F%3E%3C%2Fsvg%3E);
    background-size: 100%;
    width: 12px;
    height: 12px;
    margin-left: 5px;
}

#case .c-interview {
  position: relative;
}

#case .c-interview p{
  margin-bottom: 1.0rem;
}

#case .c-interview-ttl:before {
    content: "";
    display: block;
    background: #001d36;
    width: 35px;
    height: 1px;
    margin: auto;
    position: absolute;
    top: 12px;
    top: 1.2rem;
    left: 0;
}
#case .c-interview-ttl:before {
    width: 45px;
    top: 1.5rem;
}

#case .c-case-solution-ttl>span {
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
    background: #b5c4c9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    letter-spacing: .2em;
    width: 100%;
    height: 50px;
    border-radius: 50%;
}

#case .c-case-solution-ttl>span {
    font-size: 1.5rem;
    height: 72px;
}
#case .c-case-solution-ttl.mod-strong>span {
    background: #fc0;
}

#case .c-case-solution-ttl {
    width: 50px;
}
#case .c-case-solution-ttl {
    width: 72px;
}

#case .c-case-solution-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 25px 0 0;
}

#case .c-case-solution-item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px;
}

#case .c-case-solution {
    max-width: 820px;
    margin: auto;
}

#case .c-case-solution {
    max-width: 100%;
}


#case .c-cl-primary {
    color: #009de1;
}
#case .c-h4 {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left;
    letter-spacing: 0;
}
#case .c-h4 {
    font-size: 2.4rem;
    margin-bottom: 40px;
}
#case .c-section {
    margin-top: 70px;
}
#case .c-interview-ttl {
    margin-bottom: 35px;
    padding-left: 60px;
}


#case .case-header-box img{margin: 0 auto;}
.bg-osaka-u-hospital {background-color: #E0DFDD;}

#case .case-main-box {
    display: block;
    background-color: #F8F8F8;
    margin: 0 auto;
    margin-bottom: 30px;
    /* height: 100%; */
    height: auto;
}

#case .case-main-box .logo-box {
    margin-top: -100px;
    display: block;
    width: 29.5%;
    margin-right: 1%;
    position: relative;
}
#case .case-main-box .lead-box {
    font-size: 1.6rem;
    line-height: 3.0rem;
    font-weight: bold;
    color: #009de1;
    padding: 40px;
    display: block;
    width: 69.5%;
    margin-right: 0;
    position: relative;
}

#case .case-main-box .logo-box img {
    vertical-align: bottom;
    max-width: 100%;
}


#case .c-container {
    max-width: 1180px;
    margin: auto;
    padding: 0 15px;
    margin-bottom: 60px;
}
#case .case-main-box div {
    display: flex;
}


#case .case-box, #case .company-box {
    display: flex;
    width: 100%;
    /* max-width: 990px; */
    margin: 0 auto;
}
#case .case-box ul, #case .case-box dl {
    margin-bottom: 0;
}
#case .case-box dd {
    border-left: 7px solid #009de1;
    padding: 0 20px;
    margin-bottom: 40px;
}
#case .case-body h3 {
    font-weight: bold;
    font-size: 2.0rem;
    color: #009de1;
    letter-spacing: .15em;
        margin-bottom: 1em;
        line-height: 1.4;
        text-align: left;
}
#case .case-box ul.dotList {
    display: block;
    list-style: disc;
    padding-left: 1rem;
}


#case .case-wrap, #case .case-wrap2 {
   
    width: 100vw;
    margin-bottom: 60px;
}
#case .case-wrap ul, #case .case-wrap2 ul {
    display: flex;
}
#case .case-wrap2 ul li.right {
    padding-right: calc((100vw - 1180px) / 2);
}
#case .case-wrap ul li.left {
    padding-left: calc((100vw - 1180px) / 2);
}

#case .case-wrap2 ul li.right .inner {
    max-width: 45.7vw;
    margin: 0 0 0 20px;
}
#case .case-wrap ul li.left .inner {
    max-width: 45.7vw;
    margin: 0 20px auto auto;
}

#case .case-wrap.company-box  {
  
}

#case .c-inner {
    max-width: none;
}
#case .c-inner.mod-990 {
    max-width: 990px;
    margin: 0 auto;
}
#case .company-box {
    background-color: #eee;
}
#case .company-box .logo {
    padding: 20px;
    text-align: center;
}

.company-box .text {
    height: 100%;
    display: table;
    width: 100%;
}
.company-box .text p {
    display: table-cell;
    vertical-align: middle;
}

.case-body .answer {
    margin: 20px 0;
}

#case #case-carousel{
  margin-bottom: 60px;
}

#case #case-carousel li {
}
#case #case-carousel .c-case-index-body {
    padding: 10px;
    background: #fff;
    min-height: 9em;
}

#case #case-carousel a:hover .c-case-index-body {
background: #d1f1ff;
}
#case #case-carousel .c-case-index-body h3{
  color: #222;
  text-align: left;
  line-height: 1.2;
  letter-spacing: 0;
}

#faq #faqBody{
  background: #ebf4fa;
  /* background-image: url(../../images/gray-bg.png); */
}

#faq .c-anchor-inline-item {
  border: none;
  width: calc(100% / 6);
  text-align: center;
}
#faq .c-anchor-inline .c-anchor-inline-item a{
  letter-spacing: 0;
  display: block;
}
#faq .c-anchor-inline .c-anchor-inline-item a::before{
  content: '';
  background-repeat: no-repeat;
  background-position: center top;
  margin-bottom: 10px;
  height: 70px;
  display: block;
}
#faq .c-anchor-inline .icon01 a::before{background-image: url(../../images/icon-faq01.svg);} 
#faq .c-anchor-inline .icon02 a::before{background-image: url(../../images/icon-faq02.svg);}
#faq .c-anchor-inline .icon03 a::before{background-image: url(../../images/icon-faq03.svg);}
#faq .c-anchor-inline .icon04 a::before{background-image: url(../../images/icon-faq04.svg);}
#faq .c-anchor-inline .icon05 a::before{background-image: url(../../images/icon-faq05.svg);}
#faq .c-anchor-inline .icon06 a::before{background-image: url(../../images/icon-faq06.svg);}








#faq .contents {
  padding-bottom: 60px;
}

#faq .c-container {
    max-width: 980px;
}

.c-anchor-inline {
    line-height: 1.2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.c-anchor-inline {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    margin: 0 0 70px;
    border: none;
    -webkit-transform: none;
    transform: none
}

.c-anchor-inline-item {
    width: auto;
    border-top: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc
}

.c-anchor-inline-item:not(:first-child) {
    margin-left: -1px
}

.c-anchor-inline-item>a {
    font-size: 1.4rem;
    display: inline-block;
    padding: 0 10px
}

.c-anchor-btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 40px 0 60px
}

.c-anchor-btn-item {
    width: auto;
    padding: 0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc
}

.c-anchor-btn-item:not(:first-child) {
    margin-left: -1px
}

.c-anchor-btn-item>a {
    color: #1d2a4d;
    font-size: 1.4rem;
    font-weight: 400;
    display: inline-block;
    padding: 0 10px;
    border: none;
    border-radius: 0
}






#download #downloadBox{
  background: #ebf4fa;
}

#download #downloadBox .contents {
  padding-bottom: 60px;
  max-width: 960px;
}
#download #downloadBox .inner{
}
#download .contents h3 {
    color: #009de1;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.2em;
  margin-bottom: 60px;
  text-align: center;
}
#download .contents h4 {
    color: #009de1;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 30px;
  text-align: center;
}
#download .contents h4.sub {
    color: #009de1;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 10px;
  margin-top: 30px;
  text-align: center;
}
#download #appBox {
  margin-bottom: 30px;
  max-width: 960px;
}
#download #appBox li{
  margin: 0 30px;
  padding: 20px;
  background: #009de1;
  color: #fff;
  text-align: center;
}
#download #appBox {
  margin-top: 30px;
}
#download #appBox .col1 li{
  margin: 0 auto;
}



#download #appBox h5{
  font-size: 2.4rem;
  margin-bottom: 20px;
  
}
#download #appBox li img{
  max-width: 180px;
  margin-bottom: 20px;
}

#download #appBox li a:hover img{
  opacity: 0.6;
}


#partner  h3 {
    color: #009de1;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.2em;
  margin-bottom: 40px;
  text-align: center;
}
#partner  h4 {
    color: #009de1;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 30px;
  text-align: center;
}

#partner #partnerdBox{
  background: #ebf4fa;
  text-align: center;
  padding-bottom: 60px;
}
#partner #partnerdBox .bBtn{
  padding: 30px 0;
}

#partner .contents p.telnum {
    font-weight: 600;
    color: #009de1;
    font-size: 4.2rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}


#footerContact{
  background: #e0eeff;
  padding: 80px 0;
  text-align: center;
}
#footerContact .contents h3{
  color: #009de1;
  font-weight: 600;
  font-size: 2.4rem;
  margin-bottom: 30px;
}
#footerContact .contents .bBtn{
  margin-bottom: 50px;
}
#footerContact .contents .bBtn a.btn-c {
    color:#ffe511; 
    padding: 0.5em 1em;
    margin-right: 1.0rem;
}
#footerContact .contents .bBtn a:hover.btn-c {
  color: #009de1;
  border: 2px solid #fff;
}


#footerContact .contents h4{
  font-size: 2.0rem;
  font-weight: 600;
}
#footerContact .contents p{
  font-size: 1.4rem;
}
#footerContact .contents p.telnum{
  font-weight: 600;
  color: #009de1;
  font-size: 4.2rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
}


#footerCompany{
  background: #eceff3;
  padding: 70px 0;
}
#footerCompany h3{
  text-align: center;
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 40px;
}
#footerCompany .contents{
  max-width: 1000px;
  min-width: auto;
  margin: 0 auto;
}

#footerCompany .companyTable {
  margin-bottom: 30px;
}




#footerCompany .companyTable .table__normal {
    width: 100%;
    border-collapse: inherit;
    border-spacing: 5px;
}
#footerCompany .companyTable .table__normal th {
    width: 10%;
    font-weight: normal;
    border-bottom: 1px dotted #6d6e6f;
    text-align: left;
}

#footerCompany .companyTable .table__normal td {
    border-bottom: 1px dotted #6d6e6f;
}
#footerCompany .companyTable .table__normal th,
#footerCompany .companyTable .table__normal td {
    padding: 3px 8px;
    font-size: 1.6rem;
    line-height: 1.5;
    vertical-align: text-top ;
}




/* 矢印リンク */

#trialBlock .blue p a,
#trialBlock .contents p a,
#footerCompany .contents p a{
  text-decoration: none;
  position: relative;
  font-weight: 600;
  padding-left: 2rem;
}
#trialBlock .blue p a{ color: #fff;}

#trialBlock .blue p a::before{background: url(../../images/yellowArrow.svg);}
#trialBlock .contents p a::before{background: url(../../images/blueArrow.svg);}
#footerCompany .contents p a::before{background: url(../../images/blueArrow.svg);}

#top #trialBlock .blue p a::before,
#trialBlock .contents p a::before,
#footerCompany .contents p a::before{
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0rem;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}






/* PAGE共通 */
#pageHead{
  background-color: #009de1;
  color: #fff;
  position: relative;}



/*--■■■■■■■■■■■■■■■■■■　PC　■■■■■■■■■■■■■■■■■--*/


@media screen and (min-width: 768px) {
  .svg{width:240px;height:100%;position:absolute;margin-top: -10px;}
  
  .fs14{font-size: 1.4rem!important;}
  .fs20{font-size: 2.0rem!important;}
  .fs24{font-size: 2.4rem!important;}
  .fs30{font-size: 3.0rem!important;}
  .fs36{font-size: 3.6rem!important;}
  .fs40{font-size: 4.0rem!important;}
  .fs44{font-size: 4.4rem!important;}
  
  .wrapFlex {margin: 0 auto }
  .wrapFlex ul {display: flex;}
  .wrapFlex > ul li{
    display: block;width: 58.5%;
    margin-right: 1%; position: relative;border-radius: 6px;overflow: hidden;}
  .wrapFlex > ul.col3 li{width: 32%; margin-right: 2%; position: relative;}
  .wrapFlex > ul.col4 li{width: 24.6%; margin-right: 0.2%; position: relative;}
  .wrapFlex > ul li.col70{width: 70%; margin-right: 0; position: relative;}
  .wrapFlex > ul li.col30{width: 30%; margin-right: 0; position: relative;}
  .wrapFlex > ul li:last-child{margin-right: 0;}
  .wrapFlex .full > ul li{width: 100%;margin-right: 0}
  .wrapFlex .auto > ul li {width: auto;}
  
  .view-pc{display: block;}
  .view-sp{display: none;}
  .pc_hide {display: none;}	
  .sp_hide {display: block;}
  
  h1 {font-size: 6.0rem;font-weight: 900;line-height: 1;}
  h2 {font-size: 1.8rem;font-weight: 400;line-height: 1;}
  h3 {font-size: 20px;font-weight: 400;line-height: 1;}
  h4 {font-size: 30px;font-weight: 400;line-height: 1;}
  
  .contents{max-width: 1280px; margin: 0 auto; }
  .contents{max-width: 1200px; min-width: 1160px;}
  .inner{max-width: 1120px; margin: 0 auto; }
  /* #top .inner{max-width: 1160px; margin: 0 auto; } */
  #pageHead .inner{max-width: 1120px; margin: 0 auto; }
  
  #contentsHeader{min-width: 1200px;}




  /* TOP */
  #top #wrapMainvisual .mv {
      position: absolute;
      width: 100vw;
      min-width: 1160px;
      text-align: right;}
  #top #wrapMainvisual .mv img {
      max-width: 750px;
      width: 750px;
      max-width: 660px;
      width: 660px;
      margin-top: 57px;
      margin-top: 120px;
      margin-right: -85px;
      margin-right: 45px;
      margin-right: 4vw;
      height: auto;}
  #top #wrapMainvisual .mcopy {
    width: 563px;
    max-width: 563px;
    padding-bottom: 1.8rem;
  }
  #top #wrapMainvisual .cc {
    position: relative;
    padding-top: 120px;
    padding-top: 60px;
    padding-left: 80px;}
  #top #wrapMainvisual .cc h1 {
    text-align: center;
    line-height: 1.4;
    font-size: 4.5rem;
    font-size: 3.6rem;
    font-weight: 900;
    color: #009de1;
    text-shadow: 0 0 6px #fff;
    margin-bottom: 1.8rem;
  }
  #top #wrapMainvisual .cc h2 {
    text-align: center;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 1.2rem;}
  #top #wrapMainvisual .cc p {
    line-height: 1.8;
    margin-top: 12px;
    font-weight: 700;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
    letter-spacing: 0em;}
  #top #wrapMainvisual .bBtn {
    margin-top: 1rem;
    max-width: 563px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
  }
  #top #wrapMainvisual .bBtn a.btn-c{width: 215px;padding: 0.8rem 0;
    min-width: auto;
    margin-right: 1.0rem;
  }
  
  #top #mainvisual2 .contents{
    background: #24abe5;
    max-width: 840px;
    min-width: auto;
    margin-top: -70px;
    border-radius: 8px;
    padding: 50px 0;
  }
  
  #top #mainvisual2 .contents h2,
  #top #mainvisual2 .contents h3{
    color: #fff;
  }
  #top #mainvisual2 .contents h2{
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 2.4rem;
  }
  #top #mainvisual2 .contents h3{
    font-size: 1.65rem;
    margin-bottom: 3.0rem;
  }
  #top #mainvisual2 .contents a.btn-c{
    font-size: 1.8rem;
    padding: 0.3em 3em;
  }
  #top #mainvisual2 .contents p{
    line-height: 1.2;
  }
  
  #top #mainvisual2 .contents .wrapFlex.point > ul{
    margin: 0 50px;
    background: #fff;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.2);
  }
  #top #mainvisual2 .contents .wrapFlex > ul li{border-radius: 0;margin-right: 0;}
  #top #mainvisual2 .contents .wrapFlex > ul li:nth-child(1) {
    width: 32%;
    min-width: 240px;
    min-height: 207px;
    overflow: hidden;
  }
  #top #mainvisual2 .contents .wrapFlex > ul li:nth-child(2) {
    width: 68%;
    padding: 20px 30px;}
  #top #mainvisual2 .contents .wrapFlex > ul li:nth-child(1) img{
    /* height: 100%;
    width:auto; */
  }
  #top #mainvisual2 .contents .wrapFlex > ul li:nth-child(2) h4{
    color: #fff;
    background:  #000;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
    padding: 0.3em 1.0em;
    /* border-radius: 2em; */
  }
  #top #mainvisual2 .contents .wrapFlex > ul li:nth-child(2) h3{
    color: #009de1;
    font-weight: 600;
    font-size: 3.0rem;
    line-height: 1;
    padding: 10px 0;
    margin: 0
  }
  
  #top #mainvisual2 .contents .bBtn {
    width: auto;
    display: flex;
    justify-content: center;
  }
  #top #mainvisual2 .contents .bBtn a.btn-c{
    color: #fff;
    /* border-radius: 0; */
    padding: 0.2em 5em;
    width: auto;
  }
  #top #mainvisual2 .contents .bBtn a.btn-c:hover{
    color: #009de1;
  }
  
  /* PAGE HEADER */
  #pageHead{
    height: 370px;
    margin-bottom: 80px;
  }
  #pageHead .copy{
    padding-top: 80px;
    max-width: 540px;}
  #pageHead .copy h1{
    line-height: 1;
    font-size: 4.2rem;
    font-weight: 500;
    margin-bottom: 3.0rem;}
  #pageHead .copy h1 span{
    font-size: 2.0rem;
    margin-left: 2rem;
    letter-spacing: 0.15em;
  }
    
  #pageHead .copy h2{
    font-size: 2.54rem; 
    margin-bottom: 1.8rem;}
  #pageHead .copy p{
    font-size: 1.6rem;
    line-height: 1.8;}
  #pageHead .fig{
    max-width: 540px;
    position: absolute;
    right: 4vw;
    bottom: 0;
  }

  #price #pageHead{height: 255px; margin-bottom: 0;}

#casestudy #pageHead,
#case #pageHead{margin-bottom: 0;}

#contact #pageHead,
  #faq #pageHead,
  #download #pageHead,
  #case-download #pageHead,
  #partner #pageHead{
    height: 200px;
    margin-bottom: 0;
    background: none;
    background: #ebf4fa;
    /* background-image: url(../../images/gray-bg.png); */
    color: #24abe5;
    text-align: center;
  }
  
  #contact #pageHead .copy ,
  #faq #pageHead .copy ,
  #download #pageHead .copy ,
  #case-download #pageHead .copy ,
  #partner #pageHead .copy {
      max-width: none;
  }
  
  #contact #pageHead .copy h1,
  #faq #pageHead .copy h1,
  #download #pageHead .copy h1,
  #case-download #pageHead .copy h1,
  #partner #pageHead .copy h1{
    font-weight: bold;
  }
 
  #faq .c-anchor-inline a::before  {
      color: #fff;
  margin-left: calc(50% - 35px);
  margin-top: 0;
  content: '';
  width: 70px;
  height: 70px;
  display: block;
  background-size: cover;
  background-position: center top;
  background: #222;
  }
  #faq .c-anchor-inline a:hover::before{
    background: #009de1;
    transition-duration:.3s;
    -webkit-transition-duration:.3s;
    -moz-transition-duration:.3s;
  }
  
  
  #faq .c-anchor-inline .icon01 a::before  {
    mask: url(../../images/icon-faq01.svg);
    -webkit-mask: url(../../images/icon-faq01.svg) ;
  }
  #faq .c-anchor-inline .icon02 a::before  {
    mask: url(../../images/icon-faq02.svg);
    -webkit-mask: url(../../images/icon-faq02.svg) ;
  }
  #faq .c-anchor-inline .icon03 a::before  {
    mask: url(../../images/icon-faq03.svg);
    -webkit-mask: url(../../images/icon-faq03.svg) ;
  }
  #faq .c-anchor-inline .icon04 a::before  {
    mask: url(../../images/icon-faq04.svg);
    -webkit-mask: url(../../images/icon-faq04.svg) ;
  }
  #faq .c-anchor-inline .icon05 a::before  {
    mask: url(../../images/icon-faq05.svg);
    -webkit-mask: url(../../images/icon-faq05.svg) ;
  }
  #faq .c-anchor-inline .icon06 a::before  {
    mask: url(../../images/icon-faq06.svg);
    -webkit-mask: url(../../images/icon-faq06.svg) ;
  } 
  
  
  
  #footer{background: #ffffff;padding: 40px 0;color: #333;}
  #footer .ftInner{max-width:1280px;margin:0 auto;max-width: 90vw;}
  #footer .ftInner .kslogo{float:left;width:180px;}
  #footer .ftInner .telnum{float:right;width:272px;margin-left:15px;}
  #footer .ftInner .address{float:right;width:auto;font-size:13px;line-height:1.3;color:#555;}
  
  #menu .btnHead{text-align: right;padding: 8px 0;font-size: 14px;}
  
  .btnCv {
    display: block;
    position: relative;
    width: 512px;
    margin: 0 auto;
    text-align: center;
    background: -moz-linear-gradient(#03a65b, #93d100 50% , #03a65b 100%);
    background: -webkit-linear-gradient(#03a65b, #93d100 50% , #03a65b 100%);
    background: linear-gradient(to bottom, #93d100 0%, #03a65b 100%);
    /* text-shadow: 0 1px 0 #509300; */
    border-radius: 40px;
    font-feature-settings: "palt";
    color: #fff;
    height: 80px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    padding: 10px 0;
    text-decoration: none;
  }
  
  .biggest{font-size: 250%;}
  .bigger{font-size: 180%;}
  .big{font-size: 150%;}
  .mid{font-size: 120%;}
  .mini{font-size: 75%;}
  
  .bigPrice{font-size: 3.8rem;line-height: 1.0;margin: 0;padding: 0;}
  .bgRed .mini{display: block;}
  
  .bpluslist li .fcOrange{margin: 20px 0;display: block;}

}
@media screen and (min-width: 1280px) {
  .contents {max-width: 1280px;}
}

@media screen and (max-width: 1280px)  and (min-width: 769px) {
  .contents{padding: 0 10px;}
  #top #topics .mainBox01 .boxFig img {
  left: 0;
  max-width: 50vw;}
  
  /* .txtBox .bBtn {padding: calc(60/1280*100vw) 0;}
  #top .mainBox01 {height: calc(460/1280*100vw);margin-top: calc(80/1280*100vw);}
  #top .mainBox01 h3, #top .mainBox02 h3, #top .mainBox03 h3 {font-size: calc(40/1280*100vw);}
  #top .mainBox01 p, #top .mainBox02 p, #top .mainBox03 p ,
  #top .mainBox01 li, #top .mainBox02 li, #top .mainBox03 li {font-size: calc(16/1280*100vw);}
  #top .mainBox01 .boxFig img {
    left: calc(580/1280*100vw);
    max-width: calc(811/1280*100vw);}
  #top .mainBox01 .inner .txtBox {max-width: calc(560/1280*100vw);}
  #top .mainBox02 {height: calc(602/1280*100vw);}
  #top .mainBox02 .boxFig img{width: calc(775/1280*100vw);left: calc(-125/1280*100vw);}
  #top .mainBox02 .inner .txtBox{max-width: none;width: auto;right: 5vw;left: 60vw;margin-top: calc(125/1280*100vw);}
  #top .mainBox03 {height: calc(666/1280*100vw);}
  #top .mainBox03 .boxFig img {width: calc(775/1280*100vw);}
  #top .mainBox03 .boxFig .bgGlay{max-width: calc(795/1280*100vw);width: 100%;right: 5vw;left: 40vw}
  #top .mainBox03 .inner .txtBox {max-width: calc(420/1280*100vw);padding-top: calc(125/1280*100vw);} */
  
  #top #wrapMainvisual .mv img {margin-right: 0;}
  #top #wrapMainvisual .cc {padding-left: 30px;}

}


/* 共通 */

a{color: #000}
a:hover{color: #0099D6;}
a{text-decoration: none;}

a { 
  opacity: 1;
  transition-duration:.3s;
  -webkit-transition-duration:.3s;
  -moz-transition-duration:.3s;}
a:hover{ 
  /* opacity: .6; */
  transition-duration:.3s;
  -webkit-transition-duration:.3s;
  -moz-transition-duration:.3s;}
a.ctBtn {
    display: inline-block;
    text-decoration: none;
    margin: 6px auto;
    text-align: center;
    background: -moz-linear-gradient(#f20b67, #fc3182 50% , #f20b67 100%);
    background: -webkit-linear-gradient(#f20b67, #fc3182 50% , #f20b67 100%);
    background: linear-gradient(#f20b67, #fc3182 50% , #f20b67 100%);
    border-radius: 4px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    padding: 5px 16px;}
a.ctBtnBlack { background: #333; }
a.ctBtnBlue { 
    border: 1px solid #0992c8;
    background-color: #0099D6;
    background: -webkit-gradient(linear, left top, left bottom, from(#51c2ee), to(#0099D6));
    background: linear-gradient(to bottom, #51c2ee 0%, #0099D6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#51c2ee', EndColorStr='#0099D6');
    text-shadow: 0px 1px 0px #0099D6;}
a.ctBtnOrange { 
   border: 1px solid #e66100;
    background-color: #FF6C00;
    background: -webkit-gradient(linear, left top, left bottom, from(#FF6C00), to(#e66100));
    background: linear-gradient(to bottom, #FF6C00 0%, #e66100 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#FF6C00', EndColorStr='#e66100');
        text-shadow: 0px 1px 1px #995a00}
a.ctBtnGreen { 
    border: 1px solid #438400;
    background-color: #03a65b;
    background: -webkit-gradient(linear, left top, left bottom, from(#93d100), to(#03a65b));
    background: linear-gradient(to bottom, #93d100 0%, #03a65b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#93d100', EndColorStr='#03a65b');
    text-shadow: 0px 1px 0px #509300;}
a.ctBtnPnk { 
    border: 1px solid #bc001d;
    background-color: #df1f3d;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8526c), to(#df1f3d));
    background: linear-gradient(to bottom, #f8526c 0%, #df1f3d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#f8526c', EndColorStr='#df1f3d');
    text-shadow: 0px 1px 0px #7f0014;}
    
/* FORM */
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
input::-moz-placeholder,
textarea::-webkit-input-placeholder,
textarea:-ms-input-placeholder,
textarea::-moz-placeholder,
select::-webkit-input-placeholder,
select:-ms-input-placeholder,
select::-moz-placeholder{
  color: #bbbbbb;
  font-weight: normal;
}
.arrowD-Green,
.arrowD-LiteGreen,
.arrowD-Blue,
.arrowD-Orange,
.arrowD-Glay,
.arrowD-Red, 
.arrowD-Black {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 32px 32px 0 32px;
    margin: 0 auto;}
.arrowD-Green {border-color: #71BC51 transparent transparent transparent;}
.arrowD-LiteGreen {border-color: #ECFFE3 transparent transparent transparent;}
.arrowD-Blue {border-color: #0099D6 transparent transparent transparent;}
.arrowD-Orange {border-color: #FF8900 transparent transparent transparent;}
.arrowD-Glay {border-color: #efefef transparent transparent transparent;}
.arrowD-Red {border-color: #CB003E transparent transparent transparent;}
.arrowD-Black {border-color: #5b5b5b transparent transparent transparent;}

.w10{width: 10%;}
.w20{width: 20%;}
.w30{width: 30%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}

.h60p{height: 60px;}

.bgWhite{background-color: #ffffff;}
.bgGray{background-color: #efefef;}
.bgGray2{background-color: #f3f5f6;}
.bgBlue{background-color: #007BC3;}
.bgGreen{background-color: #52c123;}
.bgGreen2{background-color: #00b0aa;}
.bgSkyBlue{background-color: #D8F2FC;}
.bgLiteGreen{background-color: #ECFFE3;}
.bgDeepBlue{background-color: #004E9C;}
.bgOrange{background-color: #FF8900;}
.bgYellow{background-color: #FCD73F;}
.bgPink{background-color: #fff0f4;
  background-image: url(../../images/bgPink.png);}
.bgPink2{background-color: #ffe3e3;
  background-image: url(../../images/bgPink2.png);}
.bgOrange{background-color: #fce9cd;
  background-image: url(../../images/bgOrange.png);}
.bgBlue{background-color: #ebf4ff;
  background-image: url(../../images/bgBlue.png);}

.fcOrange{color: #F45400;}
.fcRed{color:#df1f3d;}
.fcGreen{color: #52c123;}
.fcPink{color:#FF316C;}
.fcPink{color:#f20b67;}
.fcBlue{color:#0099D6;}
.fcDeepBlue{color:#004E9C;}
.fcGray{color:#737373;}
.fcWhite{color:#ffffff;}

.ffNormal{font-family:'ヒラギノ角ゴ ProN','メイリオ';font-weight: normal;}
.fontS,.fsS{font-size:80%;}
.err{color: #be270a !important; font-size: 80% !important;}

.ulPink{border-bottom: 8px solid #fc3182;padding-bottom: 8px;}
.whiteBox{background-color: #fff;}
.roundBox{border-radius: 10px;}

.sup{
  font-size: 60%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
  font-weight: normal !important;}

.fade-up {
  transition: opacity 0.7s,transform 0.7s;
  -webkit-transition: opacity 0.7s,transform 0.7s;
  opacity: 0;
  transform: translateY(60px);
  -webkit-transform: translateY(60px);}
.pop-up {
  transition: opacity 0.7s,transform 0.7s;
  -webkit-transition: opacity 0.7s,transform 0.7s;
  opacity: 0;
  transform: translateY(20px) scale(0.6);
  -webkit-transform: translateY(20px) scale(0.6);}

/*-popup-*/
.popup {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 250px;
  height: 300px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .5s;
  background-color: #222;}
.popup.is-show {
  opacity: 1;
  visibility: visible;}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 6px;
  background-color: #ddd;
  z-index: 2;}
.popup-inner img {width: 100%;}

.close-btn {
  position: absolute;
  right: 0;
  top: -40px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;}
.close-btn i {
  font-size: 20px;
  color: #333;}



/* おじどうさんRPA */
#about #point{padding-top: 120px;margin-bottom: 90px;}
#about #point .wrapFlex{padding-top: 60px;background-color: #fffafa;}
#about #point .wrapFlex ul li .box{padding: 24px;position: relative;}
#about #point .wrapFlex ul li:nth-child(1) .box{margin-left: 60px;margin-right: 10px;background-color: #ffe1e1;}
#about #point .wrapFlex ul li:nth-child(2) .box{margin-right: 60px;margin-left: 10px;background-color: #ededff;}
#about #point .wrapFlex ul li .box h3{font-size: 2.4rem;font-weight: 500;}
#about #point .wrapFlex ul li:nth-child(1) .box {color: #df1f3d;}
#about #point .wrapFlex ul li:nth-child(2) .box {color: #060a5d;}
#about #point .wrapFlex ul li .box ul{margin: 24px;display: block;font-size: 1.8rem;}
#about #point .wrapFlex ul li .box img{position: absolute;right: 65px;top: 80px;max-width: 120px;}
#about #point h3.cTitle{font-size: 2.4rem;font-weight: 500;padding: 30px 0 0;}
#about #point .pointTxt{padding: 24px 0;font-size: 1.8rem;line-height: 1.8}
#about #work h3.cTitle{font-size: 2.8rem;font-weight: 500;line-height: 1.8;padding: 0 0 30px;}
#about #work .point {margin-bottom: 24px;}
#about #work .wrapFlex > ul li {min-width: 32%;margin-right: 1%;}
#about #point .wrapFlex ul li:nth-child(3),
#about #point .wrapFlex ul li:nth-child(6) {margin-right: 0;}
#about #work h2.cTitle{font-size: 3.2rem;color: #df1f3d;font-weight: 500;padding: 10px 0 30px;}
#about #work .pointBox {padding-bottom: 120px;}
#about #work .pointBox ul{margin-bottom: 1%;}
#about #work .pointBox li{border-radius: 0;background-color: #fff;text-align: center;padding: 45px 24px 0;}
#about #work .pointBox li:nth-child(3),
#about #work .pointBox li:nth-child(6) {margin-right: 0;}
#about #work .pointBox li h3{padding: 45px 0 18px;font-weight: 400;color: #df1f3d;}
#about #work .pointBox li p{text-align: left;line-height: 1.4;padding-bottom: 10px;}
#about #work .pointBox li p span{ color: #df1f3d;}
#about #merit{padding-top: 120px;}
#about #merit h2.cTitle{font-size: 3.6rem;color: #df1f3d;font-weight: 500;padding: 10px 0 40px;}
#about #merit .meritBox{margin-top: 60px;}
#about #merit .meritBox ul{margin-bottom: 1%;}
#about #merit .meritBox li{border-radius: 0;background-color: #fff;text-align: center;padding: 35px 0 0;}
#about #merit .meritBox li:nth-child(5),
#about #merit .meritBox li:nth-child(10) {margin-right: 0;}
#about #merit .meritBox li img{height: 54px;width: auto;} 
#about #merit .meritBox li h3{padding: 45px 0 18px;font-weight: 400;color: #df1f3d;}
#about #merit .meritBox li p{ line-height: 1.4;padding-bottom: 10px;}
#about #case h2.cTitle{font-size: 2.8rem;font-weight: 500;padding: 70px 0 20px;}
#about #case .inner{padding: 10px 30px ;}
#about #case .box{position: relative;margin-top: 35px;margin-bottom: 90px;}
#about #case .box h2{color: #df1f3d;font-size: 3.0rem;line-height: 1.2;font-weight: 500;margin-bottom: 0.8em;}
#about #case .box h3{font-size: 2.2rem;font-weight: 700;margin-bottom: 0.6em;text-align: center;}
#about #case .box.mb10{margin-bottom: 30px;}

#about #case img.bgCopy{position: absolute;width: 24.6vw;max-width: 320px;}
#about #case img.bgCopy01 {top: 7em;left: 0;top: 8em;left: -2em;}
#about #case img.bgCopy02 {top: -2em;right: 0;top: -1em;right: -4em;}
#about #case img.bgCopy03 {top: 0.5em;left: -49px;left: -20px;top: 1.5em;left: -5em;}
#about #case img.bgCopy04 {top: -8em;right: 0;top: -6em;right: -3em;}
#about #case .title{
  position: relative;
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
  margin-bottom: 30px;
  color: #fff;
  background: #df1f3d;
  border: 2px solid #df1f3d;
  font-size: 2.2rem;
  border-radius: 2em;
  letter-spacing: 0.1em;}
#about #case p,
#about #case .pBox{
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
  border-radius: 6px;}
#about #case .pBox{background-color: #fee9e9;padding: 20px;}
#about #case .pBox h3{color: #df1f3d;}

/* 製品・サポート紹介 */
#service #point{padding-top: 120px;padding-bottom: 130px;}
#service #point .box{
  background-color: #fffafa;
  position: relative;
  padding: 60px 56px;
  margin-bottom: 80px;
}
#service #point .box.mb0{margin-bottom: 0;}
#service #point .box img.num{
  position: absolute;
  top: 10px;
  right: 10px; 
  
}
#service #point .box h2{
    color: #df1f3d;
    font-size: 3.6rem;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 0.8em;
}
#service #point .box p{
  text-align: center;
  margin-bottom: 50px;
}

#service #point .wrapFlex{}
#service #point .wrapFlex .fullBox,
#service #point .wrapFlex ul li .box{padding: 24px 20px 10px;position: relative;margin-bottom: 0;}
#service #point .wrapFlex .fullBox{margin-top: 30px;}
#service #point .wrapFlex .fullBox > ul li {width: 49.5%;}
#service #point .wrapFlex ul li:nth-child(1) .box{margin-right: 10px;background-color: #ffe1e1;}
#service #point .wrapFlex ul li:nth-child(2) .box{margin-left: 10px;background-color: #ededff;}
#service #point .wrapFlex .fullBox > ul li .box{background: none;padding-right: 0;}
#service #point .wrapFlex .fullBox h3,
#service #point .wrapFlex ul li .box h3{font-size: 2.4rem;font-weight: 500;color: #fff;padding: 0.5rem 0.8rem;border-radius: 5px;}
#service #point .wrapFlex ul li:nth-child(1) .box h3{background-color: #df1f3d;}
#service #point .wrapFlex ul li:nth-child(2) .box h3{background-color: #060a5d;}
#service #point .wrapFlex .fullBox h3{background-color: #227e09;}
#service #point .wrapFlex ul li .box ul{margin: 24px 24px 0;display: block;font-size: 1.8rem;line-height: 1.55;}
#service #point .wrapFlex .fullBox ul li .box ul {margin: 0;}
#service #point .wrapFlex .fullBox ul li .box ul li{width: 100%;}
#service #point .wrapFlex ul li .box img{position: absolute;right: 65px;top: 80px;max-width: 120px;}
#service #point h3.cTitle{font-size: 2.4rem;font-weight: 500;padding: 30px 0 0;}
#service #point .pointTxt{padding: 24px 0;font-size: 1.8rem;line-height: 1.8}

#service #suport .mb0{margin-bottom: 0;}
#service #suport  ul{margin-bottom: 20px;}
#service #suport li{
  background: #fff;
  border-radius: 6px;
  margin-right: 20px;
  padding: 24px;
  font-size: 1.6rem;}
#service #suport li:last-child{margin-right: 0;}
#service #suport li h3{
  color: #df1f3d;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 0.8em 0;}
#service #point .box #suport li p{text-align: left;margin-bottom: 0; }
#service #security .mb0{margin-bottom: 0;}
#service #security  ul{margin-bottom: 20px;}
#service #security li{
  background: #fff;
  border-radius: 6px;
  margin-right: 20px;
  padding: 40px 24px;
  font-size: 1.6rem;}
#service #security li:last-child{margin-right: 0;}
#service #security li h3{
  color: #df1f3d;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 40px 0 0.8em;}
#service #point .box #security li p{text-align: left;margin-bottom: 0; }

/* 利用シーン */
#use #scene01,
#use #scene02,
#use #scene03{padding-top: 120px;padding-bottom: 130px;text-align: center;}

#use h2{color: #df1f3d;font-size: 3.6rem;font-weight: 500;margin-bottom: 0.8em;}
#use h3{font-size: 2.0rem;font-weight: 500;margin-bottom: 0.8em;}
#use h4{color: #df1f3d;font-size: 2.0rem;font-weight: 400;margin-bottom: 0.8em;}
#use .contents .inner p{margin-bottom: 3.0em;}
#use fig img{max-width: 480px;}

#use .scene .wrapFlex ul {align-items: center;margin-bottom: 5em;}
#use .scene .wrapFlex ul li:nth-child(2){width: 16%;}

/* 料金 */
#price #priceBox {margin-top: 40px;margin-bottom: 40px;}

/* FAQ */
#faq #faqBox {margin-top: 120px;}
#faq #faqBox {margin-top: 60px;}
#faq #faqBox .wrapFlex > ul li:nth-child(1){width: 77%;}
#faq #faqBox .wrapFlex > ul li:nth-child(2){width: 20%;margin-left: 3%;}


#faq .c-anchor-point .c-faq-item{
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

.c-faq-q:after {
    background: url(../../images/c-faq-q-open.svg) no-repeat 50% 50%;
    background-image: url(../../images/c-faq-q-open.svg);
}

.c-faq-q.is-active:after {
    background: url(../../images/c-faq-q-close.svg) no-repeat 50% 50%;
    background-image: url(../../images/c-close-q-open.svg);
}



/* 非表示 */
#faq #faqBox .wrapFlex > ul li:nth-child(1){width: 100%;}
#faq #faqBox .wrapFlex > ul li:nth-child(2){display: none;}

#faq #faqBox h3{
  font-size: 2.4rem;
  font-weight: 700;
  position: relative;
  line-height: 1.6;
  border-bottom: 2px solid #000;
  margin-bottom: 3rem;}
#faq #faqBox h3:before {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 20%;
  height: 2px;
  content: '';
  background: #df1f3d;}
#faq #faqBox dt,
#faq #faqBox dd{
  position: relative;
  padding: 2.5rem 2.5rem 2.5rem 6.5rem;}
#faq #faqBox dt{background-color: #f8f6dd;font-weight: 700;}
#faq #faqBox dt::before{background: url(../..//images/icon-q.svg);}
#faq #faqBox dd::before{background: url(../..//images/icon-a.svg);}
#faq #faqBox dt::before,
#faq #faqBox dd::before{
  content: '';
  position: absolute;
  top: 2.2rem;
  left: 2.2rem;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;}
#faq #faqBox .linkBlock{
  position: relative;
  border: 2px solid #df1f3d;
  background: #df1f3d;
  border-radius: 5px;
  margin-bottom: 4rem;}
#faq #faqBox .linkBlock::before{
  content: '';
  background: url(../..//images/icon-pol.svg);
  position: absolute;
  top: 2.9rem;
  left: 0.5rem;
  background-repeat: no-repeat;
  width: 10.4px;
  height: 9px;}

#faq #faqBox .linkBlock:hover{background: #fff;}
#faq #faqBox .linkBlock:hover::before{background: url(../..//images/icon-pol-red.svg);}
#faq #faqBox .linkBlock a{
  padding: 1.0rem 0.5rem 0.5rem 2.5rem;
  text-decoration: none;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 500;
  display: block;
  width: 100%;
  height: 100%;}
#faq #faqBox .linkBlock a:hover{color: #df1f3d;}
#faq #faqBox h4{
  font-size: 2.0rem;
  font-weight: 500;
  border-left: 5px solid #df1f3d;
  line-height: 1;
  padding-left: 1rem;
  margin-bottom: 2rem;}
#faq #faqBox .kanren{
  background-color: #f6f6f6;
  padding: 10px 0;
  border-radius: 5px;}
#faq #faqBox .kanren a{line-height: 1.8;}
#faq #faqBox .wrapFlex ul.linkList {display: block;}
#faq #faqBox .wrapFlex ul.linkList li{width: 100%;position: relative;padding-left: 2.5rem;margin: 0}
#faq #faqBox .wrapFlex ul.linkList li::before{
  content: '';
  background: url(../..//images/li-pol.svg);
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-repeat: no-repeat;
  width: 8px;
  height: 7px;}