@charset "UTF-8";
/* ==============================================
  TOP ファーストビュー
  PC: Figma 1080px幅 / SP: Figma 375px幅（vw換算）
============================================== */
.top_fv {
  background: #fff;
}
.top_fv_inner {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 17px 0;
}
.top_fv_body {
  flex: 0 0 495px;
  padding: 38px 0 0 45px;
}
.takatori_container .top_fv_catch {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.21;
  letter-spacing: 0;
  font-feature-settings: normal;
  text-align: left;
  color: #000;
}
.top_fv_catch .lg {
  font-size: 40px;
}

/* 工事項目 */
.top_fv_tags {
  display: grid;
  grid-template-columns: repeat(3, 160px);
  margin: 24px 0 0 1px;
}
.takatori_container .top_fv_tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 0.5px solid #e0e0e0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  color: #000;
}

/* CTAボタン */
.top_fv_btns {
  display: flex;
  gap: 15.08px;
  margin: 23.57px 0 0 1px;
}
.top_fv_btn {
  display: block;
  position: relative;
  width: 20.07em;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  transition: opacity .3s;
}
a.top_fv_btn:hover {
  opacity: .7;
}
.top_fv_btn_lead {
  display: block;
  position: relative;
  height: 1.638em;
  line-height: 1.638em;
  text-align: center;
  white-space: nowrap;
  font-size:12px;
}
.top_fv_btn_lead::before,
.top_fv_btn_lead::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 1.825em;
  background: currentColor;
}
.top_fv_btn_lead::before {
  left: 12.25%;
  transform: translate(-50%, -50%) rotate(-30.25deg);
}
.top_fv_btn_lead::after {
  left: 88.65%;
  transform: translate(-50%, -50%) rotate(30.25deg);
}
.top_fv_btn_box {
  display: block;
  height: 6em;
  margin-top: .431em;
  border-radius: 1.123em;
}

.top_fv_btn--tel,
a.top_fv_btn--tel:link,
a.top_fv_btn--tel:visited {
  color: #ef6d01;
  font-weight: 600;
  text-decoration: none;
}
.top_fv_btn--tel .top_fv_btn_box {
  padding-top: .702em;
  background: #ef6d01;
}
.top_fv_btn--tel .top_fv_btn_box img {
  display: block;
  width: 72%;
  margin-left: 12.59%;
}
.top_fv_btn_time {
  display: block;
  margin-top: .1em;
  text-align: center;
  color: #fff;
}

.top_fv_btn--line,
a.top_fv_btn--line:link,
a.top_fv_btn--line:visited {
  color: #06c755;
  font-weight: 600;
  text-decoration: none;
}
.top_fv_btn--line .top_fv_btn_box {
  display: flex;
  align-items: center;
  gap: .974em;
  padding-left: 13.34%;
  border: 1px solid #06c755;
  background: #fff;
}
.top_fv_btn--line .top_fv_btn_box img {
  width: 2.677em;
}
.top_fv_btn_txt {
  font-size: 1.4em;
  white-space: nowrap;
}

/* メイン画像（左端を白でフェード） */
.top_fv_img {
  flex: 0 1 585px;
  position: relative;
  min-width: 0;
  height: 366px;
}
.top_fv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top_fv_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, .71) 13px, rgba(255, 255, 255, 0) 40px);
}

@media only screen and (max-width: 767px) {
  .top_fv_inner {
    display: block;
    padding: calc(52 / 375 * 100vw) 0 calc(53 / 375 * 100vw);
  }
  .top_fv_body {
    padding: 0 0 0 calc(20 / 375 * 100vw);
  }
  .takatori_container .top_fv_catch {
    font-size: calc(27.879 / 375 * 100vw);
  }
  .top_fv_catch .lg {
    font-size: calc(32.088 / 375 * 100vw);
  }

  .top_fv_tags {
    grid-template-columns: repeat(3, calc(111.828 / 375 * 100vw));
    margin: calc(22.4 / 375 * 100vw) 0 0 calc(.93 / 375 * 100vw);
  }
  .takatori_container .top_fv_tags li {
    height: calc(23.897 / 375 * 100vw);
    font-size: calc(9 / 375 * 100vw);
  }

  .top_fv_btns {
    gap: calc(14.02 / 375 * 100vw);
    margin: calc(37.8 / 375 * 100vw) 0 0 calc(8 / 375 * 100vw);
  }
  .top_fv_btn {
    font-size: calc(7.64 / 375 * 100vw);
  }
  .top_fv_btn_lead::before,
  .top_fv_btn_lead::after {
    display: none;
  }

  .top_fv_img {
    width: calc(329 / 375 * 100vw);
    height: calc(206 / 375 * 100vw);
    margin: calc(22.1 / 375 * 100vw) 0 0 calc(20 / 375 * 100vw);
  }
  .top_fv_img::before {
    width: 100%;
    height: calc(32 / 375 * 100vw);
    background: linear-gradient(to bottom, #fff 21.635%, rgba(255, 255, 255, .71) 47.115%, rgba(255, 255, 255, 0) 100%);
  }
}