html {
  scroll-behavior: smooth;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ------------------------------------------
color
------------------------------------------ */
:root {
  --bs-wt: #fff;
  --bs-bk: #000;
  --bs-blue: #0055bd;
  --bk-blue: #eaf0ff;
  --bs-yellow-btn: #f5e100;
  --bs-yellow-txt: #ffec00;  
  --bs-orange-btn: #e88e00;
  --bs-orange-txt: #ff7b00;
  --bk--blue-arrow: #b2cceb;
  --bk-gray: #f2f3f3;
  --bs-gray-line: #d8d9d9;
  /* ↑　how-to ドットライン用 */
  --bk-gray-btn: #848484;
  --bk-red-form: #e10012;
  --bs-gray-form: #757575;
}
/* ▼使用例
background: var(--bs-bk_ttl); */


/* ------------------------------------------
common
------------------------------------------ */
* {
      box-sizing: border-box;
      /* ← これを追加してpadding込みで幅を計算 */
      margin: 0;
      padding: 0;
    }

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

/* for PC */
.pc{
  display: block;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

/* for sp */
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

.wrapper {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .wrapper {
    max-width: 100%;
  }
}

/* ------------------------------------------
mv
------------------------------------------ */
.mv {
  position: relative;
  margin: 0 auto 40px;
  height: 740px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_mv_bk.png) no-repeat top center/contain; 
  background-color: var(--bk-gray);
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .mv {
  height: 70vw;
  }
}
.mv__inner {
  width: 100%;
  position: relative;  
  color: var(--bs-wt);
  text-align: center;
}
.mv_txt01{
  position: absolute;
  top: 30px;
  left: 10px;
  font-size: 5rem;
  font-weight: bold;
  text-align: left;
  font-style: italic;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .mv_txt01{
  top: 20px;
  font-size: 3.5rem;
  }
}
.mv__inner h2{
  position: absolute;
  width: 90%;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5rem;
  font-weight: bold;
  line-height: 6rem;
  margin: 0.67em 0;
}
.h2_small{
  display: inline-block;
  font-size: 1.8rem;
  font-weight: normal;
  transform: translateY(-20px);
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .mv__inner h2{
    top: 150px;
  font-size: 5.5rem;
  line-height: 5rem;
  margin: 0.20px 0;
  }
  .h2_small{
  font-size: 1.5rem;
  transform: translateY(-30px);
  }
}
.mv_icon{
  position: absolute;
  top: 360px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .mv_icon{
  top: 280px;
  transform: translateX(-50%) scale(0.7);
  }
}
.mv_txt02{
  position: absolute;
  top: 580px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  width: 90%;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .mv {
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_mv_bk_tab.png) no-repeat top center/contain; 
  background-color: var(--bk-gray);
  }
  .mv_txt02{
  top: 490px;
  }
}
@media screen and (max-width: 767px) {
  .mv {
  width: 100%;

  position: relative;
  margin: 0 auto 40px;
  height: 440px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_mv_bk_sp.png) no-repeat top center/contain; 
  background-color: var(--bk-gray);
  }
  .mv_txt01{
  top: 10px;
  left: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  }
  .mv__inner h2{
  position: absolute;
  width: 90%;
  top: 30px;
  font-size: 3.5rem;
  line-height: 4.5rem;
  }
  .h2_small{
  font-size: 1rem;
  transform: translateY(-20px);
  }
  .mv_icon{
  position: absolute;
  top: 155px;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  }
  .mv_txt02{
  top: 330px;
  font-size: 1rem;
  width: 95%;
  }
}


/* btn */
.mv_btn{
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .mv_btn{
  top: 400px;
  }
}
.btn_cont{
  display: flex;
  gap: 50px;
  text-align: center;
}
.btn_cont a{
  width: 430px;
  height: 70px;
  border-radius: 10px;
  padding: 10px 0 0 0;
  font-size: 2rem;
  font-weight: bold;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .btn_cont a{
  width: 350px;
  }
}
.btn_cont a:hover{
  text-decoration: none;
  filter: drop-shadow(1px 1px 3px rgba(255,255,255,1.0));
  padding: 11px 1px 0 0;
}
.btn_cont .btn_l{
  background: var(--bs-orange-btn);
  color: var(--bs-yellow-btn);
}
.btn_cont .btn_r{
  background: var(--bs-yellow-btn);
  color: var(--bs-orange-btn);
}

@media screen and (max-width: 767px) {
  .mv_btn{
  top: 230px;
  }
  .btn_cont{
  display: block;
  }
  .btn_cont a{
    display: inline-block;
  width: 300px;
  height: 40px;
  border-radius: 5px;
  margin: 0 0 10px 0;
  padding: 7px 0 0 0;
  font-size: 1.2rem;
  }
  /* .btn_cont a:hover{
  text-decoration: none;
  filter: drop-shadow(1px 1px 3px rgba(255,255,255,1.0));
  padding: 11px 1px 0 0;
  }
  .btn_cont .btn_l{
  background: var(--bs-orange-btn);
  color: var(--bs-yellow-btn);
  }
  .btn_cont .btn_r{
  background: var(--bs-yellow-btn);
  color: var(--bs-orange-btn);
  } */

}



/* ------------------------------------------
nayami  -こんな悩みにお応えします!
------------------------------------------ */
#nayami{
  padding-top: 30px;
  margin-top: -30px;
}
.nayami__inner{
  width: 100%;
  /* background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_entrust_bk.png) no-repeat top -150px center/contain;  */
  background-color: var(--bk-gray);
  height: 980px;
  /* border: 1px solid yellowgreen; */
}
.nayami__inner h2{
  text-align: center;
  color: var(--bs-blue);
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 6.5rem;
  position: relative;
}
.nayami__inner h2 .nayami_h2_txt{
  display: block;
  font-size: 3.8rem;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .nayami__inner h2{
  font-size: 2.2rem;
  line-height: 4.5rem;
  }
  .nayami__inner h2 .nayami_h2_txt{
  font-size: 3.3rem;
  }
}
.nayami__inner h2::before{
  position: absolute;
  content: "";
  display: inline-block;
  width: 230px;
  height: 300px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_nayami01.png) no-repeat top center/contain; 
  left: -20px;
  top: -45px;
}
.nayami__inner h2::after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 200px;
  height: 220px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_nayami02.png) no-repeat top center/contain; 
  right: -15px;
  top: -10px;
}
@media screen and (max-width: 767px) {
  .nayami__inner{
  width: 100%;
  background-color: var(--bk-gray);
  height: 1580px;
  /* border: 1px solid yellowgreen; */
  }
  .nayami__inner h2{
  font-size: 2rem;
  line-height: 3rem;
  }
  .nayami__inner h2 .nayami_h2_txt{
  font-size: 2rem;
  }
  .nayami__inner h2::before{
  width: 100px;
  height: 200px;
  /* background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_nayami01.png) no-repeat top center/contain;  */
  left: -10px;
  top: 50px;
  }
  .nayami__inner h2::after{
  width: 80px;
  height: 200px;
  /* background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_nayami02.png) no-repeat top center/contain;  */
  right: -5px;
  top: 60px;
  }
}
/* nayami_cont */
.nayami_cont{
  margin-top: 15px;  
}
.nayami_cont ul{
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
  flex-wrap: wrap;
  gap: 20px;
  /* border: 1px solid yellowgreen; */
}
.nayami_cont ul li{
  width: calc((100% - 40px)/3);
  background-color: var(--bs-wt);
  filter: drop-shadow(3px 3px 2px var(--bk-gray-btn));
  height: 350px;
}

.nayami_cont ul li dl dt{
  height: 120px;
  margin: 15px 0 0;
  text-align: center;
}
/* icon */
.nayami_cont ul li:first-child dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami01.png) no-repeat top left 60%/contain; 
}
.nayami_cont ul li:nth-child(2) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami02.png) no-repeat center center/contain; 
background-size: 30%;
}
.nayami_cont ul li:nth-child(3) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami03.png) no-repeat top 65% center/contain; 
background-size: 60%;
}
.nayami_cont ul li:nth-child(4) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami04.png) no-repeat top 65% left 45%/contain; 
background-size: 40%;
}
.nayami_cont ul li:nth-child(5) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami05.png) no-repeat top 55% left 60%/contain; 
background-size: 50%;
}
.nayami_cont ul li:nth-child(6) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami06.png) no-repeat center left 50%/contain; 
background-size: 60%;
}

.nayami_cont ul li dl dd{
  text-align: center;
  padding: 5px 2px 20px;
  font-size: 1.65rem;
  font-weight: bold;
  color: var(--bs-orange-txt);
  line-height: 2.2rem;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .nayami_cont ul li dl dd{
  font-size: 1.2rem;
  line-height: 1.8rem;
  }
}
.nayami_txt{
  display: block;
  text-align: left;
  color: var(--bs-bk);
  padding: 15px 20px 10px;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 2rem;
  text-align: justify;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .nayami_txt{
  font-size: 1.1rem;
  line-height: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .nayami_cont{
  margin-top: 45px;  
  }
  .nayami_cont ul{
  list-style: none;
  width: 100%;
  display: block;
  padding: 0 0px;
  /* border: 1px solid yellowgreen; */
  }
  .nayami_cont ul li{
  width: 100%;
  height: 220px;
  }

  .nayami_cont ul li dl dt{
  height: 70px;
  transform: translateY(15px);
  }
  /* icon */
  .nayami_cont ul li:first-child dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami01.png) no-repeat top 20% left 55%/contain; 
  }
  .nayami_cont ul li:nth-child(2) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami02.png) no-repeat center center/contain; 
  background-size: 20%;
  }
  .nayami_cont ul li:nth-child(3) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami03.png) no-repeat top 65% center/contain; 
  background-size: 45%;
  }
  .nayami_cont ul li:nth-child(4) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami04.png) no-repeat top 65% left 45%/contain; 
  background-size: 25%;
  }
  .nayami_cont ul li:nth-child(5) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami05.png) no-repeat top 55% left 60%/contain; 
  background-size: 35%;
  }
  .nayami_cont ul li:nth-child(6) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/icon_estimate_nayami06.png) no-repeat center left 50%/contain; 
  background-size: 45%;
  }

  .nayami_cont ul li dl dd{
  padding: 25px 2px 10px;
  font-size: 1.3rem;
  line-height: 1.8rem;
  }
  .nayami_txt{
  padding: 10px 20px 10px;
  font-size: 1rem;
  line-height: 1.5rem;
  }
}



/* ------------------------------------------
entrust  -テンポスにお任せください!
------------------------------------------ */
.wrapper > section.entrust__inner{
  width: 100%;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_entrust_bk.png?2026) no-repeat top -35px center/contain; 
  height: 630px;
  padding: 0 0 !important;
  /* border: 1px solid yellowgreen; */
}
.entrust__inner h2{
  text-align: center;
  color: var(--bs-blue);
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 6.5rem;
  padding: 80px 0 0 ;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .wrapper > section.entrust__inner{
  width: 100%;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_entrust_bk.png?2026) no-repeat top -35px center/contain; 
  height: 1700px;
  padding: 0 0 !important;
  /* border: 1px solid yellowgreen; */
  }
  .entrust__inner h2{
  font-size: 2rem;
  line-height: 3.5rem;
  padding: 50px 0 20px ;
  }
}

.entrust_cont{
  width: 100%;
}

.entrust_cont ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.entrust_cont ul li{
  width: calc((100% - 60px) /5);
  height: 425px;
  background-color: var(--bk-blue);
  padding: 10px 10px 10px;
  /* border: 1px solid red; */
}
.entrust_cont ul dt{
  height: 320px;
}
.entrust_ttl{
  color: var(--bs-orange-txt);
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.8rem;
  padding: 0 0 10px ;
  /* height: 50px; */
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .entrust_ttl{
  font-size: 1rem;
  line-height: 1.3rem;
  }
}
.entrust_cont ul dt span{
  text-align: justify;
  line-height: 1.3rem;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .entrust_cont ul dt img{
    width: 60px;
    height: auto;
  }
  .entrust_cont ul dt span{
  font-size: 0.9rem;
  letter-spacing: -1px;
  }
}

.entrust_cont ul.entrust_check{
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
}
.entrust_cont ul.entrust_check li{
  width: 100%;
  height: 25px;
  position: relative;
  font-size: 0.9rem;
  padding: 0 0 0 10px;
}
.entrust_check li::before{
  position: absolute;
  content: "";
  display: inline-block;
  width: 22px;
  height: 20px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_entrust_check.png) no-repeat top center/contain; 
  left: -15px;
  top: -0px;
  /* border: 1px solid yellowgreen; */
}
@media screen and (max-width: 767px) {
  /* .entrust_cont{
  width: 100%;
  } */

  .entrust_cont ul{
  /* list-style: none; */
  display: block;
  /* justify-content: space-between;
  gap: 15px; */
  }

  .entrust_cont ul li{
  width: calc((100% - 30px));
  height: 300px;
  /* background-color: var(--bk-blue); */
  padding: 0px 10px 10px;
  margin: 0 15px 15px ;
  }
  .entrust_cont ul dt{
  height: 200px;
  /* border: 1px solid yellowgreen; */
  }
  .entrust_cont ul dt img{
  transform: translate(-5px, 5px) scale(0.7);
  }
  .entrust_ttl{
  color: var(--bs-orange-txt);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 2rem;
  padding: 0 0 10px ;
  /* height: 50px; */
  }
  .entrust_cont ul dt span{
  text-align: justify;
  line-height: 1.1rem;
  font-size: 0.9rem;
  }

  .entrust_cont ul.entrust_check{
  width: 100%;
  display: block;
  padding: 0 0 0 5px;
  }
  .entrust_cont ul.entrust_check li{
  width: 95%;
  height: 15px;
  /* position: relative;
  font-size: 0.9rem;
  padding: 0 0 0 10px; */
  }
  .entrust_check li::before{
  position: absolute;
  content: "";
  display: inline-block;
  width: 22px;
  height: 20px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_entrust_check.png) no-repeat top center/contain; 
  left: -15px;
  top: -0px;
  }
}



/* ------------------------------------------
reason  -テンポスが選ばれる理由
------------------------------------------ */
.wrapper > section.reason__inner{
  width: 100%;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason_bk.png) no-repeat top 0px center/contain; 
  height: 950px;
  /* padding: 0 0 !important; */
  /* border: 1px solid yellowgreen; */
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .wrapper > section.reason__inner{
  background-color: var(--bs-blue);
  }
}
.reason__inner h2{
  text-align: center;
  color: var(--bs-wt);
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 3rem;
  padding: 110px 0 0 ;
}
.reason__inner h2 span{
  display: inline-block;
  text-align: center;
  /* color: var(--bs-wt); */
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 2.5rem;
  padding: 35px 0 0 ;
}
@media screen and (max-width: 767px) {
  .wrapper > section.reason__inner{
  width: 100%;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason_bk_sp_3.png?2026) no-repeat top 0px center/contain; 
  height: 1250px;
  /* border: 1px solid red; */
  }
  .reason__inner h2{
  font-size: 2.3rem;
  line-height: 3rem;
  padding: 60px 0 0 ;
  }
  .reason__inner h2 span{
  font-size: 1.1rem;
  line-height: 1.6rem;
  padding: 15px 10px 0 ;
  }
}
.reason_cont ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 25px 25px;/*縦方向,横方向の余白*/
  margin: 20px 25px 0 ;
}

.reason_cont ul li{
  width: calc((100% - 50px) /3);
  height: 240px;
  background: var(--bs-wt);
  border-radius: 15px;
}

.reason_cont ul li dl dt{
  height: 100px;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .reason_cont ul li{
  height: 260px;
  }
  .reason_cont ul li dl dt{
  height: 70px;
  }
}

.reason_cont ul li dl dd{
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  color: var(--bs-blue);
}
.reason_txt{
  text-align: left;
  padding: 5px 25px 0;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: justify;
  color: var(--bs-bk);
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .reason_txt{
  padding: 5px 15px 0;
  font-size: 1.1rem;
  }
}
@media screen and (max-width: 767px) {
  .reason_cont ul{
  /* list-style: none; */
  display: block;
  margin: 20px 10px 0 ;
  }

  .reason_cont ul li{
  width: 100%;
  height: 150px;
  border-radius: 10px;
  margin: 0 0 15px;
  }

  .reason_cont ul li dl dt{
  height: 70px;
  }

  .reason_cont ul li dl dd{
  font-size: 1.3rem;
  }
  .reason_txt{
  padding: 5px 25px 0;
  font-size: 0.9rem;
  }
}
/* icon */
.reason_cont ul li:first-child dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason01.png) no-repeat top 70% center/contain; 
background-size: 15%;
}
.reason_cont ul li:nth-child(2) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason02.png) no-repeat top 70% center/contain; 
background-size: 15%;
}
.reason_cont ul li:nth-child(3) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason03.png) no-repeat top 70% center/contain; 
background-size: 18%;
}
.reason_cont ul li:nth-child(4) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason04.png) no-repeat top 60% center/contain; 
background-size: 15%;
}
.reason_cont ul li:nth-child(5) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason05.png) no-repeat top 55% center/contain; 
background-size: 18%;
}
.reason_cont ul li:nth-child(6) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason06.png) no-repeat top 70% left 50%/contain; 
background-size: 15%;
}

@media screen and (max-width: 767px) {

}


/* ------------------------------------------
flow  -ご利用の流れ
------------------------------------------ */
.wrapper > section.flow__inner{
  width: 100%;
  /* background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason_bk.png) no-repeat top 0px center/contain;  */
  height: 430px;
  padding: 0 0 !important;
}
.flow__inner h2{
  text-align: center;
  color: var(--bs-blue);
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 3rem;
  padding: 10px 0 0 ;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .flow__inner h2{
  padding: 30px 0 0 ;
  }
}
@media screen and (max-width: 767px) {
  .wrapper > section.flow__inner{
  /* width: 100%; */
  height: 730px;
  padding: 0 0 !important;
  }
  .flow__inner h2{
  font-size: 2.2rem;
  line-height: 2.5rem;
  padding: 50px 0 0 ;
  }
}
.flow_cont ul{
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 35px;/*縦方向,横方向の余白*/
  margin: 35px 0px 0 ;
}

.flow_cont ul li{
  width: calc((100% - 105px) /4);
  height: 270px;
  background: var(--bs-blue);
  position: relative;
}
.flow_cont ul li::after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 35px;
  height: 67px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow_arrow.png) no-repeat top center/contain; 
  right: -35px;
  top: 38%;
  /* border: 1px solid yellowgreen; */
}
.flow_cont ul li:last-child::after{
  position: absolute;
  content: "";
  display: none;
}
.flow_cont ul li dl dt{
  height: 110px;
  /* border: 1px solid yellowgreen; */
}

.flow_cont ul li dl dd{
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  color: var(--bs-wt);
  /* padding: 0 20px; */
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .flow_cont ul li dl dd{
  font-size: 1.3rem;
  line-height: 1.8;
  }
}
.flow_cont ul li dl dd span{
  display: block;
  font-size: 1rem;
  font-weight: normal;
}

@media screen and (max-width: 767px) {
  .flow_cont ul{
  display: block;
  margin: 25px 15px 0 ;
  }

  .flow_cont ul li{
  width: 100%;
  height: 125px;
  background: var(--bs-blue);
  position: relative;
  margin: 0 0 25px 0;
  }
  .flow_cont ul li::after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 50px;
  height: 40px;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow_arrow_sp.png) no-repeat top center/contain; 
  left: 50%;
  transform: translateX(-50%);
  top: 120px;
  z-index: -;
  /* border: 1px solid yellowgreen; */
  }
  .flow_cont ul li:last-child::after{
  position: absolute;
  content: "";
  display: none;
  }
  .flow_cont ul li dl dt{
  height: 70px;
  /* border: 1px solid yellowgreen; */
  }

.flow_cont ul li dl dd{
  font-size: 1.3rem;
  }
  .flow_cont ul li dl dd span{
  font-size: 0.9rem;
  }
}
/* icon */
.flow_cont ul li:first-child dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow01.png) no-repeat top 70% left 60%/contain; 
background-size: 35%;
}
.flow_cont ul li:nth-child(2) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow02.png) no-repeat top 70% left 55%/contain; 
background-size: 20%;
}
.flow_cont ul li:nth-child(3) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow03.png) no-repeat top 70% left 50%/contain; 
background-size: 35%;
}
.flow_cont ul li:nth-child(4) dl dt{
background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow04.png) no-repeat top 60% left 50%/contain; 
background-size: 20%;
}
@media screen and (max-width: 767px) {
  /* icon */
  .flow_cont ul li:first-child dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow01.png) no-repeat top 70% left 55%/contain; 
  background-size: 15%;
  }
  .flow_cont ul li:nth-child(2) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow02.png) no-repeat top 70% left 50%/contain; 
  background-size: 10%;
  }
  .flow_cont ul li:nth-child(3) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow03.png) no-repeat top 70% left 50%/contain; 
  background-size: 18%;
  }
  .flow_cont ul li:nth-child(4) dl dt{
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_flow04.png) no-repeat top 60% left 50%/contain; 
  background-size: 13%;
  }
}
/* ------------------------------------------
how-to  -お好きな形式で今すぐ見積依頼
------------------------------------------ */
.wrapper > section.how-to__inner{
  width: 100%;
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_how-to_bk.png) no-repeat top 0px center/contain; 
  height: 1280px;
  /* padding: 0 0 !important; */
  /* border: 1px solid yellowgreen; */
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .wrapper > section.how-to__inner{
  background-color: var(--bk-gray);
  }
}
.how-to__inner h2{
  text-align: center;
  color: var(--bs-blue);
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 3rem;
  padding: 80px 0 0 ;
  letter-spacing: 1px;
  margin: 0 0 30px ;
}

@media screen and (max-width: 767px) {
  .wrapper > section.how-to__inner{
  /* width: 100%; */
  background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_how-to_bk_sp_3.png) no-repeat top 0px center/contain; 
  height: 1280px;
  }
  .how-to__inner h2{
  font-size: 2.3rem;
  line-height: 3rem;
  padding: 80px 0 0 ;
  letter-spacing: 0px;
  margin: 0 0 0px ;
  }
}
.how-to_cont dl{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 20px;/*縦方向,横方向の余白*/
  margin: 35px 50px 45px ;
}

.how-to_cont dl dt{
  width: 25%;
  height: 290px;
  position: relative;
  /* background: var(--bs-blue);
  position: relative; */
  /* border: 1px solid yellowgreen; */
}
.how-to_cont dl dt p{
  /* back */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 240px;
  height: 240px;
  background-color: var(--bs-wt);
  border: 1px solid var(--bs-blue);
  border-radius: 50%;
  /* font */
  color: var(--bs-blue);
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 100px 0 0 ;
  line-height: 1.9rem;
}
.how-to_cont dl:first-child dt p{
  padding: 90px 0 0 ;
}
.how-to_cont dl dt p span{
  font-size: 1.3rem;
  font-weight: normal;
}
.how-to_cont dl dd{
  width: 70%;
  display: grid;
  place-content: center start;
  /* place-items: center start; */
  /* place-items: start center; */
  /* border: 1px solid red; */
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .how-to_cont dl{
  margin: 35px 15px 45px ;
  }
  .how-to_cont dl dt{
  width: 25vw;
  }
  .how-to_cont dl dd{
  width: 60vw;
  }
}
.how-to_cont dl dd ul{
  list-style: none;
  /* height: 200px; */
  /* background: var(--bs-blue);
  position: relative; */
}
.how-to_cont dl dd ul li{
  position: relative;
  margin: 0 0 15px 45px;
  font-size: 1.5rem;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .how-to_cont dl dd ul li{
  font-size: 1.3rem;
  }
}
.how-to_cont dl dd ul li::before{
  position: absolute;
  content: "1";
  display: inline-block;
  width: 35px;
  height: 35px;
  left: -29px;
  top: 0px;
  font-weight: bold;
  font-size: 1.5rem;
  z-index: 1;
  color: var(--bs-wt);
  /* color: red; */
  /* border: 1px solid yellowgreen; */
}
/* 数字 */
/* .how-to_cont dl dd ul li:first-child::before{
  content: "1";
} */
.how-to_cont dl dd ul li:nth-child(2)::before{
  content: "2";
}
.how-to_cont dl dd ul li:nth-child(3)::before{
  content: "3";
}
.how-to_cont dl dd ul li:nth-child(4)::before{
  content: "4";
}
/* 青丸 */
.how-to_cont dl dd ul li::after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  left: -40px;
  top: -0px;
  background-color: var(--bs-blue);
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .how-to_cont dl{
  display: block;
  margin: 30px 0px 30px ;
  }

  .how-to_cont dl dt{
  width: 100%;
  height: 140px;
  position: relative;
  }
  .how-to_cont dl dt p{
  /* back */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 130px;
  /* font */
  font-size: 1.3rem;
  padding: 55px 0 0 ;
  line-height: 1.3rem;
  }
  .how-to_cont dl:first-child dt p{
  padding: 50px 0 0 ;
  }
  .how-to_cont dl dt p span{
  font-size: 0.9rem;
  font-weight: normal;
  }
  .how-to_cont dl dd{
  width: 100%;
  display: grid;
  place-content: center start;
  padding: 0 10px 0 5px;
  }
  .how-to_cont dl dd ul{
  list-style: none;
  }
  .how-to_cont dl dd ul li{
  /* position: relative; */
  margin: 0 0 7px 30px;
  font-size: 1.15rem;
  }
  .how-to_cont dl dd ul li::before{
  width: 25px;
  height: 25px;
  left: -25px;
  top: 0px;
  font-size: 1.2rem;
  z-index: 1;
  }
  .how-to_cont dl dd ul li:nth-child(2)::before{
  content: "2";
  }
  .how-to_cont dl dd ul li:nth-child(3)::before{
  content: "3";
  }
  .how-to_cont dl dd ul li:nth-child(4)::before{
  content: "4";
  }
  /* 青丸 */
  .how-to_cont dl dd ul li::after{
  width: 26px;
  height: 26px;
  left: -33px;
  top: -0px;
  }
}

/* 註釈 */
span.how-to_txt-s{
  display: inline-block;
  padding: 0 0 0 0px;
  font-size: 1rem;
  line-height: 1.5rem;
}
p.how-to_txt-s{
  /* width: 100%; */
  width: 670px;
  font-size: 1.3rem;
  line-height: 2rem;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  p.how-to_txt-s{
  width: 95%;
  font-size: 1.1rem;
  }
}
.how-to_txt-s span{
  display: block;
  border-bottom: 1px solid var(--bs-bk);
  padding: 0 0 5px 0;
  width: 90%;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .how-to_txt-s span{
  width: 50vw;
  }
}
@media screen and (max-width: 767px) {
  /* 註釈 */
  span.how-to_txt-s{
  display: inline-block;
  padding: 0 0 0 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  }
  p.how-to_txt-s{
  width: 93vw;
  font-size: 1rem;
  line-height: 1.5rem;
  }
  .how-to_txt-s span{
  display: block;
  border-bottom: 1px solid var(--bs-bk);
  padding: 5px 0 5px 0;
  width: 95%;
  }
}

/* ------------------------------------------
form  -メールフォーム
------------------------------------------ */
#form{
  padding-top: 30px;
  margin-top: -30px;
}
.wrapper > section.form__inner{
  width: 100%;
  height: 1750px;
  padding: 0 0 !important;
  /* border: 1px solid yellowgreen; */
}
/* .form__inner h2{
  text-align: center;
  color: var(--bs-blue);
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 3rem;
  padding: 10px 0 0 ;
} */
@media screen and (max-width: 767px) {
  .wrapper > section.form__inner{
  height: 1450px;
  }
}

.form_cont{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 60px 50px;/*縦方向,横方向の余白*/
  margin: 35px 50px 45px ;
}
.form_cont dl{
  width: calc((100% - 50px) / 2);
}
.form_cont dl.form_textarea{
  width: 100%;
}

.form_cont dl dt{
  font-size: 1.7rem;
  font-weight: bold;
  color: var(--bs-blue);
  width: 100%;
  padding: 0 0 5px 0 ;
}
span.required{
  /* width: 80px; */
  padding: 2px 8px;
  background: var(--bk-red-form);
  color: var(--bs-wt);
  font-size: 1.2rem;
  font-weight: normal;
  display: inline-block;
  margin: 0 0 0 10px;
  transform: translateY(-2px);
}
.form_cont dl dd input,
.form_cont dl dd select,
.form_cont dl dd textarea{
  font-size: 1.5rem;
  font-weight: bold;
  /* color: var(--bk-gray-btn); */
  color: var(--bs-gray-form);
  width: 100%;
  height: 115px;
  padding: 5px 20px;
}
.form_cont dl dd textarea{
  height: 300px;
  /* color: #aaa; */
  padding: 20px;
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .form_cont{
  display: block;
  margin: 35px 15px 45px ;
  }
  .form_cont dl{
  width: 100%;
  margin: 0 1px 20px 1px;
  }
  .form_cont dl.form_textarea{
  width: 100%;
  }

  .form_cont dl dt{
  font-size: 1.2rem;
  padding: 0 0 5px 0 ;
  }
  span.required{
  padding: 1px 8px 2px;
  font-size: 1rem;
  margin: 0 0 0 5px;
  transform: translateY(-2px);
  }
  .form_cont dl dd input,
  .form_cont dl dd select,
  .form_cont dl dd textarea{
  font-size: 1.2rem;
  width: 100%;
  height: 55px;
  padding: 5px 20px;
  }
  .form_cont dl dd textarea{
  height: 300px;
  /* color: #aaa; */
  padding: 20px;
  line-height: 1.3;
  }
}

.form-btn{
  width: 100%;
  margin: 20px 0;
  text-align: center;
}
.form-btn input{
  width: 38%;
  height: 80px;
  background: var(--bk-red-form);
  color: var(--bs-wt);
  font-size: 2.2rem;
  padding: 0px 0px 0 0;
  border: none;
  letter-spacing: 3px;
}
.form-btn span{
  position: relative;
}
.form-btn span::before{
  position: absolute;
  content: "▼";
  display: inline-block;
  right: 23px;
  top: -65%;
  border-radius: 50%;
  transform: rotate(-90deg);
  width: 40px;
  height: 40px;

  color: var(--bk-red-form);
  font-size: 1.8rem;
  z-index: 1;
  background: var(--bs-wt);
  /* border: 1px solid var(--bs-orange-btn); */
}
.form-btn span:hover{
  opacity: 0.8;
  filter: drop-shadow(1px 1px 3px rgba(100, 100, 100, 0.8));
}
@media screen and (max-width: 767px) {
  .form-btn{
  width: 100%;
  margin: 50px 0;
  text-align: center;
  }
  .form-btn input{
  width: 310px;
  height: 50px;
  font-size: 1.5rem;
  padding: 0px 0px 0 0;
  }
  .form-btn span::before{
  right: 23px;
  top: -20%;
  width: 25px;
  height: 25px;
  font-size: 1.3rem;
  }
}



/* ------------------------------------------
qa  -よくあるご質問
------------------------------------------ */
.wrapper > section.qa__inner{
  width: 100%;
  background: var(--bk-gray);
  /* height: 1495px; */
  height: 1400px;
  padding: 0 0 !important;
}
.qa__inner h2{
  text-align: center;
  color: var(--bs-blue);
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 3rem;
  padding: 40px 0 0 ;
}

@media screen and (max-width: 767px) {
  .wrapper > section.qa__inner{
  /* height: 1495px; */
  height: 1400px;
  }
  .qa__inner h2{
  font-size: 2rem;
  line-height: 3rem;
  padding: 40px 0 0 ;
  }
}
.qa_cont{
  margin: 35px auto 20px;
  width: 90%;
}
.qa_cont dl dt{
  position: relative;
  padding: 8px 8px 8px 70px;

  font-size: 2.1rem;
  font-weight: bold;
  color: var(--bs-orange-txt);
  background: var(--bs-wt);
  border: 1px solid var(--bs-orange-txt);
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .qa_cont dl dt{
  font-size: 1.8rem;
  }
}
/* ？ 部分 */
.qa_cont dl dt::before{
  position: absolute;
  content: "？";
  display: inline-block;
  left: 13px;
  top: 1px;
  border-radius: 50%;

  color: var(--bs-wt);
  font-size: 2.8rem;
  z-index: 1;
}
.qa_cont dl dt::after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  left: 10px;
  top: 9px;
  background-color: var(--bs-orange-txt);
  border-radius: 50%;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .qa_cont dl dt::before{
  font-size: 2.4rem;
  }
  .qa_cont dl dt::after{
  width: 42px;
  height: 42px;
  }
}
@media screen and (max-width: 767px) {
  .qa_cont{
  margin: 35px auto 20px;
  width: 90%;
  }
  .qa_cont dl dt{
  padding: 8px 8px 8px 50px;
  font-size: 1.6rem;
  }
  /* ？ 部分 */
  .qa_cont dl dt::before{
  content: "？";
  left: 15px;
  top: 6px;

  font-size: 2rem;
  }
  .qa_cont dl dt::after{
  width: 35px;
  height: 35px;
  left: 10px;
  top: 9px;
  }
}
.qa_cont dl dd{
  padding: 20px 5px 40px 65px;

  font-size: 1.4rem;
  font-weight: bold;
}
@media screen and (min-width:768px) and (max-width:1100px) {
  .qa_cont dl dd{
  font-size: 1.2rem;
  }
}
.btn_cont-2{
  text-align: center;
}
.btn_cont-2 a{
  position: relative;
  background: var(--bk-gray-btn);
  color: var(--bs-wt);
  display: inline-block;
  padding: 18px 0 5px ;
  width: 360px;
  height: 75px;
  border-radius: 10px;

  font-size: 1.6rem;
  font-weight: bold;
}
.btn_cont-2 a::after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 342px;
  height: 60px;
  left: 7px;
  top: 6px;
  border-radius: 8px;
  border: 3px solid var(--bs-wt);
  border-radius: 8px;
}
.btn_cont-2 a:hover{
   text-decoration: none;
  filter: drop-shadow(1px 1px 5px rgba(245, 255, 0, 0.5));
  padding: 18px 1px 0 0;
  color: var(--bs-yellow-txt);
}
.qa_btn{
  margin: 56px auto 10px;
}
@media screen and (max-width: 767px) {
  .qa_cont dl dd{
  padding: 10px 5px 40px 15px;
  font-size: 1.1rem;
  font-weight: bold;
}
.btn_cont-2{
  text-align: center;
}
.btn_cont-2 a{
  padding: 15px 0 5px ;
  width: 340px;
  height: 55px;
  font-size: 1.2rem;
}
.btn_cont-2 a::after{
  width: 322px;
  height: 38px;
  left: 7px;
  top: 6px;
}
/* .btn_cont-2 a:hover{
   text-decoration: none;
  filter: drop-shadow(1px 1px 5px rgba(245, 255, 0, 0.5));
  padding: 18px 1px 0 0;
  color: var(--bs-yellow-txt);
} */
  .qa_btn{
  margin: 0px auto 10px;
  }
}

.space_01{
  display: inline-block;
  margin: 0 0 0 45px;
}
@media screen and (max-width: 767px) {
  .space_01{
  display: inline-block;
  margin: 0 0 0 25px;
  }
}
/* ------------------------------------------
info  -今ある資料で、今すぐ見積もり
------------------------------------------ */
.wrapper > section.info__inner{
  width: 100%;
  /* background: url(https://tools.itembox.design/item/category/lp-estimate/img/img_estimate_reason_bk.png) no-repeat top 0px center/contain;  */
  background: var(--bs-blue);
  height: 345px;
  padding: 0 0 !important;
  /* border: 1px solid red; */
}
.info__inner h2{
  text-align: center;
  color: var(--bs-yellow-txt);
  font-size: 2.7rem;
  font-weight: bold;
  line-height: 3.3rem;
  padding: 15px 0 0 ;
}
@media screen and (max-width: 767px) {
  .wrapper > section.info__inner{
  height: 320px;
  padding: 0 0 !important;
  }
  .info__inner h2{
  font-size: 1.95rem;
  line-height: 3.5rem;
  padding: 15px 0 0 ;
  }
}

.info_txt-1,
.info_txt-2{
  display: block;
  color: var(--bs-wt);
  text-align: center;
}
.info_txt-1{
  font-size: 2rem;
  font-weight: bold;
}
.info_txt-2{
  font-size: 1.6rem;
}

/* btn */
.info_cont{
  position: relative;
}
.info_btn{
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  /* border: 1px solid red; */
}
.info_txt-3{
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.7rem;
  color: var(--bs-wt);
}

@media screen and (max-width: 767px) {
  .info_txt-1,
  .info_txt-2{
  display: block;
  color: var(--bs-wt);
  text-align: center;
  }
  .info_txt-1{
  font-size: 2rem;
  font-weight: bold;
  }
  .info_txt-2{
  font-size: 1.6rem;
  }

  /* btn */
  .info_cont{
  position: relative;
  }
  .info_btn{
  font-size: 1.2rem;
  }
  .info_txt-3{
  font-size: 1.2rem;
  }
}


/* ------------------------------------------
btn　今すぐ見積依頼ボタン
------------------------------------------ */
.btn_fix{
  display: none;/*最初は隠す*/
  position: fixed;
  bottom: 180px;
  right: 100px;
  /* background: var(--bs-yellow-txt);
  border: 1px solid red; */
}
/* 色･形 ここから　---------------- */
/* .mv_btn{
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
} */
/* .btn_cont{
  display: flex;
  gap: 50px;
  text-align: center;
} */
.btn_cont_fix a{
  width: 230px;
  height: 60px;
  border-radius: 10px;
  padding: 10px 0 0 0;
  font-size: 1.5rem;
  /* font-weight: bold; */
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}
.btn_cont a:hover{
  text-decoration: none;
  /* filter: drop-shadow(1px 1px 3px rgba(255,255,255,1.0)); */
  padding: 11px 1px 0 0;
  opacity: 0.95;
  color: var(--bs-wt);
}
.btn_cont .btn_l{
  background: var(--bs-orange-btn);
  color: var(--bs-yellow-btn);
}
/* 色･形 ここまで　---------------- */

@media screen and (max-width: 767px) {
  .btn_fix{
  display: none;
  }
}


/* ------------------------------------------
h1タグ  -位置調整
------------------------------------------ */
/* .c-h1{
  padding-left: 0;
} */
h1{
  transform: translateX(-25px);
}
@media screen and (max-width: 767px) {
  /* .c-h1{
  padding-left: 1rem;
  } */
  h1{
  transform: translateX(0px);
  }
}

/* ------------------------------------------
タブレットサイズ調整  
------------------------------------------ */
@media screen and (min-width:768px) and (max-width:1100px) {
  .tablet-off{
  display: none;
  }
  .tablet-on{
  display: block;
  }
}