@charset "UTF-8";
@import url("grid.css?1");
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

img {max-width:100%;height: auto;}
*,*:before,*:after {-webkit-box-sizing: inherit;box-sizing: inherit;}
html {scroll-padding-top: 300px;scroll-behavior: smooth;}

h2.work {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 3.0rem;
  font-weight: 600;
  margin: 30px 0;
}
h2.work:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 3px;
}
h2.work:before {left:0;}

.tb {color:#228FBF;}
.tb:before {background-color: #228FBF}
.tbl {color: #000;}
.tbl:before {background-color: #000;}

h2.title {
  color: #364e96;/*文字色*/
  padding: 0.4em 0;/*上下の余白*/
  margin: 70px auto 40px auto;
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
  font-size: 3.0rem;
  width: 70%;
  text-align: center;
}

.desc {width: 90%;margin: 10px auto;}
.mt {font-size: 2.4rem;}
.ore {color: #ED7E33;font-weight: 600;}
.red {color: #C51A18;font-weight: 600;}
.red_border {border-bottom: solid 10px #C51A18;}

/**********     ファーストビュー     **********/

.head_txt {
    width: 84%;
    margin: 30px auto;
    font-size: 2.5rem;
}

.head_flex {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 50px auto;
}
.h_img {width: 17%;}
.h_txt {
    width: 80%;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
}

/**********     標的     **********/
.hyo_flex {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 50px auto;
}
.hyo_l {width: 30%;}
.hyo_r {
    width: 67%;
    margin: 0 0 0 3%;
    display: flex;
    align-items: center;
}

/**********     実情     **********/
ul.check {padding:20px 0 60px 30px;}
ul.check li {
    list-style-type:none;
    background-image:url(../img/c.png);
    background-repeat:no-repeat;
    background-position:left center;
    padding:10px 0 5px 45px;
    font-size:1.9rem;
}
/**********     解決     **********/
img.kai {
    width: 40%;
    margin: 40px 30% 60px;
}
.nds_flex {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 20px auto;
}
.logo {
    width: 24%;
    margin: 0 4% 40px 0;
    display: flex;
    align-items: center;
}
.nds_r {width: 72%;}
p.nds {
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 45px;
    padding-left: 20px;
    letter-spacing: 3px;
}
p.nds_t {font-size: 2.8rem;letter-spacing: 3px;}

/**********     特徴     **********/
.toku_flex {
    width: 90%;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
}

.toku_icon {
    width: 18%;
    margin: 0 0 25px 0;
}

.toku_tit {
    width: 15%;
    margin-right: 2%;
    font-size: 2.8rem;
    font-weight: 600;
    color: #C51A18;
    display: grid;
    place-items: center;
}

.toku_txt {
    width: 55%;
    display: flex;
    align-items: center;
}

/**********     おまかせ     **********/
ul.om {
    list-style: none;
    padding-left: 0;
    margin: 30px 0 20px 50px;
}

ul.om li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  font-size: 2.4rem;
}

ul.om li::before {
  content: '◆'; /* ひし形に見える記号（文字） */
  /* または、content: ''; position: absolute; などで図形を描画 */
  position: absolute;
  left: 0;
  top: 0;
  color: #333; /* マーカーの色 */
  font-size: 2.4rem; /* マーカーの大きさ */
  /* transform: rotate(45deg); ← 文字をひし形にする場合 */
}

/**********     導入効果     **********/
.dou {
    width: 100%;
    margin: 0 auto;
}
.bf_af {
    width: 700px;
    position: relative;
    margin:0 auto ;
}
.kasa1{
    border:solid 8px #ffc000 ;
    margin: 0;
    padding: 20px;
    width: 370px;
    height: 240px;
    z-index: 10;
    font-size: 2.0rem;
}
.kasa2{
    border: 8px solid #00b0f0;
    margin: -150px 0 70px 320px;
    padding: 20px;
    width: 370px;
    height: 240px;
    z-index: 20;
    background: #fff;
    font-size: 2.1rem;
    font-weight: 600;
}
.bf {
    position: relative;
    top:285px;
    left:0px;
    color: #ffc000;
    font-size: 3.3rem;
}
.af {
    position: absolute;
    top: 94px;
    right: 25px;
    color: #00b0f0;
    font-size: 3.3rem;
}


@media screen and (max-width:820px){
    .bf_af {margin-left: 10px;}
}

/**********     無料体験     **********/

.free_flex {
    width: 95%;
    margin: 50px auto 25px;
    display: flex;
    flex-wrap: wrap;
}

.free_img {
    width: 25%;
}

.free_img img {
    width: 80%;
    margin: 0 10%;
}

.free_txt {
    text-align: center;
    font-size: 1.9rem;
    //margin: 5px 0 50px 0;
}

.last_flex {
    width: 85%;
    margin: 70px auto;
    display: flex;
    flex-wrap: wrap;
}

.last_l {
    width: 42%;
    margin: 0 5% 0 0;
}
.last_r {
    width: 53%;
}

.anno {
    font-size: 1.6rem;
    color: #888;
    margin-bottom: 100px;
}
/**********     CTA     **********/

.btn_flex {
    display: flex;
    width: 55%;
    margin: 20px 0 20px 45%;
}
.btn_l {width: 14%;}
.btn_r {
    width: 80%;
    display: flex;
    align-items: center;
}

.btn_r p {
    position: absolute;
    top: 50%;
    left: 45%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
    color:#fff;
    font-size:2.0rem;
    font-weight:700;
}

/*問い合わせ-------------------------------------*/

.note {
    max-width: 1000px;
    margin: 20px auto 0;
    font-size: 1.7rem;
    line-height: 2.1;
}

@media screen and (max-width:768px){
    h2.title    {font-size: 2.2rem;}
    h2.work     {font-size: 2.1rem;}
    h4          {font-size: 2.2rem;}
    .desc       {width: 98%;}
    .mt         {font-size: 1.7rem;}
    .note       {font-size: 1.5rem;line-height:1.8;}
    .head       {margin: 20px 0 0 0;}
    .head_txt   {width: 98%;font-size: 2.0rem;}
    .head_flex  {width: 98%;}
    .h_img      {width: 14%;}
    .h_txt      {width: 86%;font-size: 1.8rem;}
    .btn_flex   {width: 85%;margin-left:15%;}
    .btn_r      {width: 85%;}
    .hyo_flex   {width: 98%;}
    .hyo_l      {width: 70%;margin: 0 15% 10px;}
    img.kai     {width: 70%;margin: 15px 15% 10px;}
    .hyo_r      {width: 90%;margin: 15px auto 5px;}
    ul.check    {padding:20px 0 40px 5px;}
    ul.check li {font-size: 1.7rem;}
    .nds_flex   {width: 98%;}
    .logo       {width: 90%;margin: 50px auto 0px;}
    .nds_r      {width: 100%;margin: 10px auto 50px;}
    p.nds       {display: none;}
    p.nds_t     {font-size: 2.2rem;text-align: center;padding: 0;}
    .toku_flex  {width: 98%;}
    .toku_icon  {width: 90%;margin: 15px auto 0;}
    .toku_tit   {width: 90%;margin: 15px auto;text-align: center;}
    .toku_txt   {width: 90%;margin: 0 auto 15px;}
    ul.om       {margin: 30px 0 20px 10px;}
    ul.om li    {font-size: 1.8rem;}
    ul.om li::before {font-size: 1.8rem;}
    .free_img    {width: 48%;margin: 10px auto;}
    .free_txt   {font-size: 1.6rem;}
    .last_flex  {width: 98%;}
    .last_l     {width: 80%;margin: 10px auto;}
    .last_r     {width: 100%;}
    .anno       {font-size: 1.3rem;}

    .kasa1,.kasa2 {
        width: 98%;
        height: auto;
        margin: 0 auto 50px;
        padding: 15px 1%;
        font-size: 1.7rem;
    }
    .bf_af {width: 100%;}
    .bf {position: static;font-size: 2.5rem;}
    .af {position: static;font-size: 2.5rem;}
}