@charset "UTF-8";

/* ------------------------------------------
common
------------------------------------------ */
/* .sp {
  display: none;
}

.pc {
  display: block;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
} */
.txt_center{
  text-align: center;
}
.strong {
  font-weight: bold;
}

.block {
  display: block;
}

/* .mgm_20-0{
  margin: 20px 0;
}

.mgm-top_50{
  margin: 50px 0 0 0;
}*/

/* .y-5px{
  transform: translateY(5px);
}
.y-10px{
  transform: translateY(10px);
}
.tr-Y_15{
  transform: translateY(15px);
}
.tr-Y_30{
  transform: translateY(30px);
} */

/* ------------------------------------------
color
------------------------------------------ */

:root {
  --bs-red: #dd2c00;
  --bs-wt: #fff;
  --bs-brown: #3b1410;
  --bk-beige: #f8f4f4;

  /* 修正時に色追加 */
  --bs-red_2: #e44d3c;
  --bs-orange: #f88102;
  --bs-gray: #777;
  --bs-pink: #ffc2b5;
  --bs-beige_2: #fce9d3;
  --bk-pink_2: #fff7f7;
  /* tool-design用 */
  --bs-orange_2: #ff5400;  
  --bs-beige_3: #f8e9ce;
  --bk-yellow: #fef9e9;
  --bk-gray: #efefef;
  --bk-gray_flow: #f5f5f5;
  --bs-yellow: #ffcd00;
  --bs-bk: #3c3c3c;
  --bs-txt-bk:#222;
  --bk-item-pink:#fff7f7;
  --bs-txt-yellow: #ffc639;
 /* estimation02用 */
  --bk-orange_ttl: #fe704e;
  --bs-red_txt: #df3a2a;
  --bs-red_btn-hover:#d70000;
  --bk-orange_btn-hover:#fff6f4;
  --bs-gray_btn:#dadada;
  --bs-blue: #377cbc;
}



/* mv周辺 ------------------ */
.mgn-btm_40{
  margin-bottom: 40px;
} 

/* 20250818 add */
.inner_btn_2box .btn {
    color: #FE552E !important;
    border: 1px solid #FE552E;
}
.inner_btn_2box .btn:before {
    border-bottom: 2px solid #FE552E;
    border-right: 2px solid #FE552E;
}
/* hover */
.inner_btn_2box a.btn:hover {
    color: var(--bs-red_btn-hover) !important;
    border: 1px solid var(--bs-red_btn-hover);
    background: var(--bk-orange_btn-hover);
}
@media screen and (max-width: 767px) {
  .inner_btn_2box a.btn:hover {
    color: #FE552E !important;
    border: 1px solid #FE552E;
    background: none;
  }
}
 /* 20250818 add end */

@media screen and (max-width: 767px) {
  .mgn-btm_40{
  margin-bottom: 20px;
  } 
}

/* step ------------ */
.step__wrapper{
  background-color: var(--bk-gray_flow);
  width: 100%;
}
.step-ttl{
  width: 100%;
  padding: 20px 20px;
  color: var(--bs-wt);
  background-color: var(--bs-blue);
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px;
}
@media screen and (max-width: 767px) {
  .step-ttl{
  width: 100%;
  padding: 12px 10px;
  color: var(--bs-wt);
  background-color: var(--bs-blue);
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px;
  }
  .step-ttl_space{
    display: inline-block;
    width: 30px;
  }
  .step-ttl_space-2{
    display: inline-block;
    width: 40px;
  }
  
}

.step-ttl span.step-num{
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--bs-blue);
  background-color: var(--bs-wt);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  /* padding: 3px; */
  padding: 2px 4px 3px 4px;
  margin: 0 0px 0 20px;
}
@media screen and (max-width: 767px) {
  .step-ttl span.step-num{
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--bs-blue);
  background-color: var(--bs-wt);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 2px;
  margin: 0 5px 0 5px;
  }
}

/*  テンポス法人ドットコム部分のリンク */
a.step1-link{
  color: var(--bs-wt);
  text-decoration: underline;
  display: inline-block;
  margin-right: 5px;
}
a.step1-link:visited{
  color: var(--bs-wt);
  text-decoration: underline;
}
a.step1-link:hover{
  color: rgba(255, 255, 255, 0.7);
}

@media screen and (max-width: 767px) {
  a.step1-link:hover{
  color: rgba(255, 255, 255, 1);
  }
}
/*  テンポス法人ドットコム部分のリンク end */

.estimate02 .step__wrapper{
  gap: 0px;
}
.estimate02 .step__wrapper .step__box{
  padding: 10px 80px 30px;
  line-height: 2;
}

.tr-X_-10{
  transform: translateX(-10px);
}

.estimate02 p.item-txt{
  margin: 0 0 10px;
}
.estimate02 p.step-txt_red{
  color: var(--bs-red_txt);
  margin: 0 0 30px;
}

.estimate02 .link-box{
  margin: 60px 0 0 ;
}
@media screen and (max-width: 767px) {
  .estimate02 .link-box{
  margin: 35px 0 0 ;
  }
}

.estimate02 .link-box a{
  margin: 0px 0 20px ;
  width: 53%;
  padding: 20px 30px;
  text-align: center;
  font-size: 22px;
}
@media screen and (max-width: 767px) {
  .estimate02 .step__wrapper .step__box{
  padding: 10px 10px 30px;
  line-height: 1.7;
  }
  .step-img{
    text-align: center;
  }
  .step-img img{
    display: block;
  }

  .tr-X_-10{
  transform: translateX(0px);
  margin: 0 auto;
  }
  
  .estimate02 p.item-txt{
  margin: 0 0 20px;
  text-align: justify;
  width: 100%;
  font-size: 13px;
  line-height: 1.8;
  padding: 0 5px;
  }
  
  .estimate02 p.step-txt_red{
  color: var(--bs-red_txt);
  margin: 20px 0 20px;
  }

  .estimate02 .link-box p{
  margin: 0px 0 15px ;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  }

  .estimate02 .link-box a{
  margin: 0px 0 20px ;
  width: 90%;
  padding: 15px 30px;
  text-align: center;
  font-size: 18px;
  } 
}

.step-btn_ico{
  position: relative;  
  display: inline-block;
  transform: translateX(-15px);
}
.step-btn_ico::after{
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url("https://tools.itembox.design/item/category/order/estimation02/img/img_estimation02_step-btn_ico.png") no-repeat center center/contain;
  position: absolute;
  right: -20px;
  top: 6px;
}

@media screen and (max-width: 767px) {
  .step-btn_ico{
  position: relative;  
  display: inline-block;
  transform: translateX(-0px);
  }
  .step-btn_ico::after{
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url("https://tools.itembox.design/item/category/order/estimation02/img/img_estimation02_step-btn_ico.png") no-repeat center center/contain;
  position: absolute;
  right: 18%;
  top: 30px;
  }
  
}


/* btn hover ------------ */
.estimate02 .button_wrap .button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff !important;
  background-color: #d00010 !important;
  border-radius: 2px;
  line-height: 1;
  letter-spacing: 0.1em;
}

.estimate02 .button_wrap .button:hover {
  background-color: #94010e !important;
}

.estimate02 .link a {
  display: block;
  background: #FE552E;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 30px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
}

.estimate02 .link a:hover {
  background: #ca4325;
}

@media screen and (max-width: 767px) {
  .estimate02 .button_wrap .button:hover {
    background-color: #d00010  !important;
  }

  .estimate02 .link a:hover {
    background: #FE552E;
  }
  
}

/* Q&A hover ------------ */
.estimate02 .QandA_box li:hover {
    background: var(--bk-orange_btn-hover);
}
/* .estimate02 .QandA_box li div.qa-hover{
  background: var(--bs-wt);
  transform: translateX(-28px);
  width: calc(100% + 56px);
  padding: 0 28px;
}

.estimate02 .QandA_box li div.qa-hover ul li{
  background: var(--bs-wt);
  transform: translateX(-20px);
  width: 100%;
  padding: 0 28px;
} */

@media screen and (max-width: 767px) {
  .estimate02 .QandA_box li:hover {
    background: none;
  }
}