@charset "UTF-8";

/* ---------------
共通
 --------------- */
:root {
  --bg:#f6fcfe;
  --water: #eef8fd;
  --blue: #008cd6;
  --lblue: #1da2e7;
  --dblue: #05479b;
  --orange: #f76d47;
  --yellow: #fffb98;
}

/* h2 見出し -
------------------------*/
.note-h2{
  text-align: center;
  font-size: 2.4rem;
  font-weight: bold;
}


/*---------------------------------
FV SP
-----------------------------------*/
.fv-wrap{
  padding: 9rem 0 0;
  background: var(--bg);
  position: relative;
}
.fv-wrap section{
  width: auto;
  padding: 3rem 0 0;
  position: relative;
}
.fv-wrap section h2{
  width: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.fv-wrap section h2 span{  
  display: block;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

/* FV メインイメージ SP 
---------------------- */
.fv-pc{
  display: none;
}
.fv-sp{
  display: block;
}


/* FV ポイント SP 
---------------------- */
.fv-point{
  height: 14rem;
  background: #dcf1fc;
  position: relative;
}
.fv-point-no{
  width: 100%;
  position: absolute;
  top: -15px;
  left: 0;
}
.fv-point-no-content{
  margin: 0 0.5rem;
  padding: 0.5rem;
  border-radius: 1rem;
  background: #dcf1fc;
  overflow:hidden;
}

/* 背景白 dl 包み SP ------------- */
.fv-point-no-bg{
  display: flex;
  max-width: 64rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.5rem;
  position: static;
}
.fv-point-no-bg dl{
  width: 33.3%;
  padding:0.8rem 1.5rem 1.2rem;
  font-weight: bold;
  border-right: 1px solid #ccc;
  position: static;
}
.fv-point-no-bg dl:last-child{
  border-right: none;
}
.fv-point-no-bg dl dt{
  text-align: center;
  font-size: 1.8rem;
}
.fv-point-no-bg dl dd{
  line-height: 1.5;
  font-size: 1.4rem;
}
.fv-point-no-bg dl dd span{
  color: var(--orange);
}
.fv-point-no-bg dl dd small{
  padding: 0 0.2rem;
  font-size: 1.1rem;
}
.fv-point-no-bg dl dd br.fvp-br1{display: none;}
.fv-point-no-bg dl dd br.fvp-br2{display: block;}


/*３社ロゴと注意事項
---------------------------*/
.fv-conmapny{
  max-width: 65rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.fv-conmapny ul{
  display: flex;
  padding: 0 0 1.5rem;
}
.fv-conmapny ul li{
  padding: 0 1rem 0 0;
}
.fv-conmapny ul li:last-child{
  padding: 0;  
}

.fv-conmapny ol li{
  font-size: 1.2rem;
}


/*-------------------------
CTA 共通 SP
---------------------------*/
.cta-wrap{
  padding: 3rem 1.5rem;
  background: var(--blue);  
}

ul.cta-common{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 60rem;
  margin: 0 auto;
}
ul.cta-common li{
  width: auto;
  margin: 0 0 1.5rem;
}
ul.cta-common li:last-child{
  margin: 0;  
}

/*-------------------------
CTA イラスト付 SP
---------------------------*/
.cta-content{
  background: var(--lblue);
}

/* 導入 SP
---------------------- */
.cta-ttl{
  height: 23rem;  
  background: #eef8fd;
  position: relative;
}
.cta-ttl p{
  display: block;
  width: 100%;
  position: absolute;
  top: -10px;
  left: 0;
}
.cta-ttl p picture{
  display: block;
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  position: relative;
}

/* 内容 SP
---------------------- */
.cta-content-in{
  display: flex;
  flex-direction: column;
  background: url(../img/bg-arrow.svg) no-repeat center top;
  background-size: 8rem;
  position: relative;
}
.cta-content-in section{
  width: auto;
  margin: 0;
  padding: 6rem 1.5rem 0;
}

/* h2 + 無料見積 SP ---------------------- */
.cta-content-note{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  border-bottom:0;
}
.cta-content-in section h2{
  width: 30rem;
  margin: 0 auto 3.5rem;
  padding: 0 0 3rem;
  background: url(../img/icon-triangle-black.svg) no-repeat center bottom;
  background-size: 20px;
}
.cta-content-in section h2 span{
  display: block;
  text-align: center;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}

/* 無料見積 SP ------- */
.cta-free{
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
  border-radius: 1rem;
  background: #000;
}
.cta-free a{
  display: block;
  width: 23rem;
  margin: 0 auto;
  color: #ff0;
  letter-spacing: 1px;
  font-size: 3.6rem;
  font-weight: 700;
  position: relative;
}
.cta-free a::after{
  display: block;
  width: 11rem;
  content: url('../img/img-light.svg');
  position: absolute;
  top: -40px;
  left: 25%;
}
/* 無料見積下テキスト SP ---------------------- */
.cta-post{
  line-height: 2;
  padding: 3rem 0;
  color: #fff;
  background: url(../img/problem-ill-post.svg) no-repeat 97% 15px;
  background-size: 65px; 
  font-size: 1.8rem;
  font-weight: 700;
}

/* ボタン SP ---------------------- */
.cta-content ul{
  padding: 0 0 3rem;
}
/* イラスト SP ---------------------- */
.cta-content-ill{
  padding: 0 2rem;
  position: static;
}


/*----------------------------------------------------
スマホ用 600
----------------------------------------------------*/
@media screen and (min-width:600px) {

  /* FV ポイント SP 600 
  ---------------------- */
  .fv-point{
    height: 12rem;
  }  

}

/*----------------------------------------------------
タブレット用 750
----------------------------------------------------*/
@media screen and (min-width:750px) {

  /*---------------------------------
  FV TB
  -----------------------------------*/
  .fv-wrap section h2 span{  
    display: block;
    max-width: 58rem;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }

  /* FV ポイント TB 
  ---------------------- */
  .fv-point{
    height: 11rem;
  }
  .fv-point-no{
    top: -25px;
  }   
  .fv-point-no-content{
    margin: 0 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: #dcf1fc;
    overflow:hidden;
  }
  /* 背景白 dl 包み TB ------------- */
  .fv-point-no-bg{
    max-width: 90rem;
  }
  .fv-point-no-bg dl{
    padding:1rem 3rem 1.5rem;
  }
  .fv-point-no-bg dl dt{
    text-align: center;
    font-size: 2.1rem;
  }
  .fv-point-no-bg dl dd{
    line-height: 1.5;
    font-size: 1.6rem;
  }
  .fv-point-no-bg dl dd small{
    font-size: 1.2rem;
  }
  .fv-point-no-bg dl dd br.fvp-br2{display:none;}

  /*-------------------------
  CTA 共通 TB
  ---------------------------*/
  ul.cta-common{
    flex-direction: row;
    max-width: 140rem;
  }
  ul.cta-common li{
    width: 32%;
    margin: 0;
  }

  /*-------------------------
  CTA イラスト付 750
  ---------------------------*/
  /* 導入 TB
  ---------------------- */
  .cta-ttl{
    height: 18rem;  
  }
  .cta-ttl p{
    top: -30px;
    left: 0;
  }
  .cta-ttl p picture{
    max-width: 110rem;
    padding: 0 2%;
  }

  /* 内容 TB
  ---------------------- */
  .cta-content-in{
    flex-direction: row;
  }
  .cta-content-in section{
    width: 56%;
    margin: 0 0 0 auto;
    padding: 6rem 1.5rem 4rem 0;
  }

  /* h2 + 無料見積 TB ------- */
  .cta-content-note{
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0 0 1rem;
    border-bottom: 1px solid #fff;
  }
  .cta-content-in section h2{
    width: 55%;
    margin: 0;    
    padding: 0 1.5rem 0 0;
    background: url(../img/icon-triangle-black90.svg) no-repeat 92% center;
    background-size: 10px;
  }
  .cta-content-in section h2 span{
    text-align: left;
    border-bottom: 0;
    font-size: 2rem;
  }

  /* 無料見積 TB ---------------------- */
  .cta-free{
    width: 42%;
    margin: 0;
    padding: 0.5rem 0;
  }
  .cta-free a{
    width: auto;
    font-size: 1.8rem;
  }
  .cta-free a::after{
    width: 8rem;
    top: -35px;
    left: 28%;
  }
  /* 無料見積下テキスト TB ---- */
  .cta-post{    
    padding: 1.5rem 0;
  }


  /* ボタン TB ---------------------- */
  .cta-content ul{
    padding: 0;
  }
  .cta-content ul li{
    width: 48%;
  }

  /* イラスト TB ---------------------- */
  .cta-content-ill{
    width: 44%;
    position: absolute;
    left: 0;
    bottom: 0;
  }


}


/*----------------------------------------------------
PC 1000- 
----------------------------------------------------*/
@media screen and (min-width:1000px) {

  /* h2 見出し 1000 -----*/
  .note-h2{
    font-size: 3rem;
  }

  /*---------------------------------
  FV 1000
  -----------------------------------*/
  .fv-wrap{
    padding: 9rem 0 0;
    background: var(--bg);
  }
  .fv-wrap section{
    width: 48%;
    padding: 0;
  }
  .fv-wrap section h2{
    position: static;
  }
  .fv-wrap section h2 span{  
    max-width: 52rem;
    padding:0 3rem 2rem;
  }


  /* FV メインイメージ 1000 
  ---------------------- */
  .fv-sp{
    display: none;
  }
  .fv-pc{
    display: block;
    width: 52%;
    position: absolute;
    right: 0;
    top: 5rem;
  }

  /* FV ポイント 1000 
  ---------------------- */
  .fv-point{
    height: auto;
  }
  .fv-point-no{
    padding:3rem 0 2rem;
    position: static;
  }
  .fv-point-no-content{
    margin: 0;
    padding: 0 2rem;
    overflow: visible;
  }
  /* 背景白 dl 包み 1000 ------------- */
  .fv-point-no-bg{
    max-width: 64rem;
    border-radius: 1rem;
  }
  .fv-point-no-bg dl{
    padding:2rem 1rem 1.5rem;
    position: relative;
  }
  .fv-point-no-bg dl dt{
    text-align: center;
    width: 100%;
    font-size: 1.8rem;
    position: absolute;
    top: -15px;
    left: 0;
  }
  .fv-point-no-bg dl dd{
    font-size: 1.4rem;
  }
  .fv-point-no-bg dl dd br.fvp-br1{display: block;}
  .fv-point-no-bg dl dd br.fvp-br2{display: block;}


  /*３社ロゴと注意事項 1000
  ---------------------------*/
  .fv-conmapny{
    padding: 2rem 2rem 2.5rem;
  }
  .fv-conmapny ul li{
    padding: 0 1rem 0 0;
  }
  .fv-conmapny ol{
    padding: 0;
  }

  /*-------------------------
  CTA イラスト付 1000
  ---------------------------*/
  /* 導入 1000
  ---------------------- */
  .cta-ttl{
    height: 25rem;  
  }

  /* 内容 1000
  ---------------------- */
  .cta-content-in section{
    width: 65%;
    padding: 7.5rem 1.5rem 4rem 0;
  }
  .cta-content-in section h2 span{
    font-size: 3rem;
  }

  /* 無料見積 1000 ---------------------- */
  .cta-free a{
    font-size: 3rem;
  }
  .cta-free a::after{
    top: -40px;
    left: 28%;
  }
  /* 無料見積下テキスト SP ---------------------- */
  .cta-post{
    background: url(../img/problem-ill-post.svg) no-repeat 97% 15px;
    background-size: 94px; 
    font-size: 2rem;
  }

  /* イラスト 1000 ---------------------- */
  .cta-content-ill{
    width: 36%;
  }

}


/*----------------------------------------------------
PC 1200- 
----------------------------------------------------*/
@media screen and (min-width:1200px) {
  .fv-wrap section{width:36%;}
  .fv-pc{width: 64%;}
}

/*----------------------------------------------------
PC 1400- 
----------------------------------------------------*/
@media screen and (min-width:1400px) {
  .fv-wrap section{width:39%;}
  .fv-pc{width: 61%;}

  /*-------------------------
  CTA イラスト付 1400
  ---------------------------*/
  .cta-ttl{
    height: 27rem;  
  }
  .cta-content-in section h2 span{
    font-size: 4.6rem;
  }

  /* 内容 1400
  ---------------------- */
  .cta-content-in section{
    width: 63%;
    padding: 7rem 0 4rem;
  }
  .cta-content-in section h2{
    background: url(../img/icon-triangle-black90.svg) no-repeat 92% center;
    background-size: 20px;
  }

  /* 無料見積 1000 ---------------------- */
  .cta-free a{
    font-size: 4.6rem;
  }
  .cta-free a::after{
    display: block;
    width: 13.8rem;
    content: url('../img/img-light.svg');
    position: absolute;
    top: -60px;
    left: 32%;
  }

  /* 無料見積下テキスト SP ---------------------- */
  .cta-post{
    padding: 2rem 0 3.5rem;
    background: url(../img/problem-ill-post.svg) no-repeat 97% 10px;
    background-size: 94px; 
    font-size: 2.6rem;
  }

  /* イラスト 1000 ---------------------- */
  .cta-content-ill{
    width: 38%;
  }


}


/*----------------------------------------------------
PC 1600- 
----------------------------------------------------*/
@media screen and (min-width:1600px) {
  .fv-wrap section{width:40%;}
  .fv-pc{width: 58%;}

  /* 背景白 dl 包み 1600 ------------- */
  .fv-point-no-bg dl{
    padding:2.5rem 3rem 1.5rem;
  }
  .fv-point-no-bg dl dt{
    font-size: 2rem;
    top: -20px;
    left: 0;
  }
  .fv-point-no-bg dl dd{
    font-size: 1.6rem;
  }

}

/*----------------------------------------------------
PC 1700- 
----------------------------------------------------*/
@media screen and (min-width:1700px) {
  .fv-wrap section{width:42%;}
  .fv-pc{width: 56%;}
}

/*----------------------------------------------------
PC 1800- 
----------------------------------------------------*/
@media screen and (min-width:1800px) {

  .fv-wrap section{width:40%;}
  .fv-pc{width: 60%;}

  .fv-wrap{
    padding: 13rem 0 0;
  }
  .fv-wrap section h2 span{  
    padding:0 3rem 3rem;
  }

  /* 背景白 dl 包み 1800 ------------- */
  .fv-point-no-bg dl{
    padding:3rem 2rem 2.5rem;
  }
  .fv-point-no-bg dl dt{
    font-size: 2.4rem;
  }
  .fv-point-no-bg dl dd{
    font-size: 2rem;
  }


  /*３社ロゴと注意事項 1800
  ---------------------------*/
  .fv-conmapny{
    padding: 3rem 0;
  }
  .fv-conmapny ul li{
    padding: 0 1.5rem 0 0;
  }
  .fv-conmapny ol{
    padding: 0;
  }
  .fv-conmapny ol li{
    font-size: 1.3rem;
  }

  /*-------------------------
  CTA 共通 SP
  ---------------------------*/
  .cta-wrap{
    padding: 4rem 0 2rem;
  }


}

/*----------------------------------------------------
PC 1600- 
----------------------------------------------------*/
@media screen and (min-width:1900px) {

  .fv-wrap section{width:42%;}
  .fv-pc{width:58%;}


}