@charset "UTF-8";
@import url(reset.css);
@import url(root.css);
/* ===============================================
 全体共通
=============================================== */
/* reCAPTCHAバッジを非表示にする
------------------------------*/
.grecaptcha-badge {
  visibility: hidden;
}

/* PC/SP振り分け用
------------------------------*/
@media screen and (min-width: 768px) {
  .pc-none {
    display: none !important;
  }
  a[href^="tel:"] {
    pointer-events: none;
  }
}
@media screen and (max-width: 767px) {
  .sp-none {
    display: none !important;
  }
}
/* wrapper
------------------------------*/
#wrapper {
  width: 100%;
  min-width: 1200px;
  margin-inline: auto;
  background: var(--white-color);
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  #wrapper {
    min-width: 100%;
  }
}

/* ===============================================
 Typography settings
=============================================== */
html {
  /* 1rem = 10px にする*/
  font-size: 62.5%;
  _font-size: 62.5%;
  *font-size: 62.5%;
  /*ウェブフォント用*/
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(clamp(75px, 5.8479532164vw, 100px) + 2rem);
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2vw;
    scroll-padding-top: 0px;
  }
}

body {
  font-size: var(--font-size-16);
  font-family: var(--font-kaku);
  font-weight: var(--font-medium);
  color: var(--main-color);
}

/*============================
  Header styles
============================*/
#header {
  width: 100%;
  padding-top: 2rem;
  position: relative;
  z-index: 10;
}
#header .header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96.875vw;
  max-width: 1860px;
  padding-inline: 3rem;
  margin-inline: auto;
  background: var(--gray-bg);
  border-radius: 100vh;
  box-shadow: var(--box-shadow);
}
#header .header__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
}
@media screen and (min-width: 768px) {
  #header {
    font-size: clamp(1.2rem, 0.9356725146vw, 1.6rem);
    position: sticky;
    left: 0;
    top: 0;
  }
  #header .header__inner {
    min-width: 1180px;
    min-height: 6.25em;
    padding-block: 0.75em;
  }
  #header .header__logo img {
    height: 6.25em;
  }
  #header .header__right {
    -moz-column-gap: 1em;
         column-gap: 1em;
  }
  #header .header__info .header__tel {
    font-size: 2.375em;
  }
  #header .header__info .header__tel::before {
    width: calc(1em - 2px);
  }
  #header .header__info .header__time {
    font-size: 0.9375em;
  }
  #header .header__btn {
    width: 19.375em;
    height: 4.0625em;
    min-height: 50px;
    font-size: 1em;
  }
  #header .header__btn > span {
    font-size: 1.375em;
  }
  #header .header__btn.btn--mail {
    -moz-column-gap: 0.625em;
         column-gap: 0.625em;
  }
  #header .header__btn.btn--mail::before {
    width: 1.3125em;
  }
  #header .header__btn.btn--line {
    -moz-column-gap: max(10px, 0.9375em);
         column-gap: max(10px, 0.9375em);
  }
  #header .header__btn.btn--line::before {
    width: max(20px, 1.8125em);
  }
}
@media screen and (max-width: 767px) {
  #header {
    padding-top: 4vw;
  }
  #header .header__inner {
    height: 14.4vw;
    padding-inline: 4.8vw;
  }
  #header .header__logo img {
    height: 13.8vw;
  }
  #header .header__right {
    width: 100%;
    height: clamp(80px, 9.6rem, 120px);
    justify-content: center;
    width: 100%;
    background: var(--gray-bg);
    box-shadow: 0 -0.6rem 1.5rem rgba(0, 0, 0, 0.15);
    -moz-column-gap: max(20px, 3rem);
         column-gap: max(20px, 3rem);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
  }
  #header .header__info {
    row-gap: min(10px, 1rem);
  }
  #header .header__tel {
    font-size: clamp(20px, 7.2vw, 40px);
  }
  #header .header__tel::before {
    width: calc(1em - 2px);
  }
  #header .header__time {
    font-size: clamp(12px, 1.2rem, 15px);
  }
  #header .header__btn {
    width: auto;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  #header .header__btn span {
    display: none;
  }
  #header .header__btn.btn--mail::before {
    width: clamp(30px, 3.6rem, 50px);
  }
  #header .header__btn.btn--line::before {
    width: clamp(40px, 4.8rem, 60px);
  }
}

/*============================
  Footer styles
============================*/
.footer__copyright {
  text-align: center;
  font-size: var(--font-size-12);
  font-weight: var(--font-bold);
  color: var(--white-color);
  line-height: 1;
  letter-spacing: 0;
  background: var(--green-color);
  padding-block: 1.15rem;
}
@media screen and (max-width: 767px) {
  .footer {
    margin-bottom: clamp(80px, 9.6rem, 120px);
  }
}

/*============================
  Visual styles
============================*/
.visual {
  height: clamp(490px, 40.625vw, 780px);
  background: url(../../assets/images/visual/bg.svg) no-repeat center bottom;
  background-size: max(1920px, 100%) clamp(217px, 18.0729166667vw, 347px);
  overflow: hidden;
  position: relative;
}
.visual__main, .visual__sub {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: clamp(20px, 1.5625vw, 30px);
  height: 100%;
  padding-bottom: 1rem;
  position: relative;
  z-index: 3;
}
.visual__catch {
  width: clamp(640px, 53.3854166667vw, 1025px);
}
.visual__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(4px, 0.3125vw, 6px);
}
.visual__item {
  width: clamp(130px, 10.7291666667vw, 206px);
}
.visual__image {
  filter: var(--drop-shadow);
  position: absolute;
  z-index: 0;
}
.visual__image--lt {
  width: clamp(310px, 25.6770833333vw, 493px);
  top: clamp(27px, 2.1875vw, 42px);
  left: max(50% - 922px, 1.9792%);
}
.visual__image--rt {
  width: clamp(230px, 19.1145833333vw, 367px);
  top: clamp(32px, 2.6041666667vw, 50px);
  right: max(50% - 784px, 9.167%);
  z-index: 1;
}
.visual__image--lb {
  width: clamp(260px, 21.6666666667vw, 416px);
  left: max(50% - 979px, -0.9896%);
  bottom: clamp(45px, 3.75vw, 72px);
}
.visual__image--rb {
  width: clamp(257px, 21.3541666667vw, 410px);
  right: max(50% - 939px, 1.09375%);
  bottom: clamp(45px, 3.75vw, 72px);
}
@media screen and (max-width: 767px) {
  .visual {
    height: auto;
    background-size: 120%;
  }
  .visual__main, .visual__sub {
    padding: 36vw 0 16vw;
  }
  .visual__catch {
    width: 90vw;
  }
  .visual__catch img {
    width: 100%;
  }
  .visual__list {
    gap: 0.5rem;
    padding-inline: 3rem;
  }
  .visual__item {
    width: 25vw;
  }
  .visual__image--lt {
    width: 40vw;
    top: 4.8vw;
    left: 2vw;
  }
  .visual__image--rt {
    width: 30vw;
    top: 5vw;
    right: 3vw;
    z-index: 1;
  }
  .visual__image--lb {
    width: 40vw;
    left: -7vw;
    bottom: 10vw;
  }
  .visual__image--rb {
    width: 48vw;
    right: 1vw;
    bottom: 3vw;
  }
}

/*===============================================
  main#container
===============================================*/
#container {
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-min);
  overflow: hidden;
  background: var(--gray-bg);
  position: relative;
}
#container > section {
  position: relative;
}
#container > section > * {
  position: relative;
  z-index: 5;
}

/*============================
  main共通
============================*/
.section {
  padding-block: 10rem;
}

.inner {
  width: 1080px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .inner {
    width: 90%;
  }
}

/* 電話番号・営業時間
------------------------------*/
.add_info {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
  letter-spacing: 0;
  row-gap: 0.2rem;
}

/* 電話番号 */
.tel {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-38);
  font-weight: var(--font-black);
}
.tel::before {
  content: "";
  display: block;
  width: 3.6rem;
  aspect-ratio: 1;
  background: url(../../assets/images/common/tel_ic.svg) no-repeat center/contain;
  margin-right: 0.8rem;
}
.tel span {
  display: block;
  letter-spacing: var(--letter-spacing-base);
  margin: -0.08em calc(var(--letter-spacing-base) * -1) -0.02em 0;
}
.tel--white {
  color: var(--white-color);
}
.tel--white::before {
  background-image: url(../../assets/images/common/tel_ic-white.svg);
}

/* 営業時間 */
.time {
  font-size: var(--font-size-15);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-spacing-min);
  margin-right: calc(var(--letter-spacing-min) * -1);
}
.time--white {
  color: var(--white-color);
}

/* ボタン
------------------------------*/
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-spacing-min);
  outline: solid 1px;
  outline-offset: -1px;
  background: var(--white-color);
  border-radius: 100vh;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.btn--mail {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  outline-color: var(--blue-color);
  color: var(--blue-color);
  box-shadow: 0 0.4rem 0.4rem rgba(0, 153, 221, 0.35);
}
.btn--mail::before {
  content: "";
  display: block;
  width: 2.1rem;
  aspect-ratio: 1;
  background: url(../../assets/images/common/mail_ic.png) no-repeat center/contain;
}
.btn--mail:hover {
  background: color-mix(in srgb, var(--blue-color) 12%, var(--white-color));
}
.btn--line {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  outline-color: var(--orange-color);
  color: var(--orange-color);
  box-shadow: 0 0.4rem 0.4rem rgba(255, 153, 0, 0.35);
}
.btn--line::before {
  content: "";
  display: block;
  width: 2.9rem;
  aspect-ratio: 1;
  background: url(../../assets/images/common/LINE_ic.png) no-repeat center/contain;
}
.btn--line:hover {
  background: color-mix(in srgb, var(--orange-color) 12%, var(--white-color));
}

/* テーブル
------------------------------*/
.table {
  line-height: 2;
}
.table table {
  width: 100%;
}
.table tr {
  border-bottom: solid 1px var(--gray-color);
}
.table tr th {
  text-align: left;
  vertical-align: middle;
  width: 25rem;
  font-weight: var(--font-bold);
  color: var(--green-color);
  padding: 2rem 0 2.5rem;
}
.table tr td {
  text-align: left;
  vertical-align: top;
  padding: 2rem 0 2.5rem;
}
.table tr:first-child th,
.table tr:first-child td {
  padding-top: 0;
}
@media screen and (max-width: 767px) {
  .table {
    font-size: max(12px, var(--font-size-16));
  }
  .table tr th {
    width: 8em;
    padding: 1.5em 0;
  }
  .table tr td {
    padding: 1.5em 0;
  }
}

/*フォーム部品
-----------------------------*/
.form table {
  width: 100%;
}
.form tr th {
  text-align: left;
  vertical-align: top;
  font-weight: var(--font-bold);
  width: 30.8rem;
  padding: 1.8rem 2.8rem 1.8rem 0;
}
.form tr th span {
  display: inline-block;
  width: 5.3rem;
  text-align: center;
  letter-spacing: 0;
  float: right;
}
.form tr th span.required {
  color: var(--white-color);
  background: var(--red-color);
}
.form tr th span.optional {
  color: var(--white-color);
  background: var(--gray-color);
}
.form tr td {
  font-weight: var(--font-bold);
  padding: 13px 0 12px;
}
.form tr td .wpcf7-checkbox .wpcf7-list-item {
  margin-right: 1em;
}
.form tr td .wpcf7-checkbox .wpcf7-list-item:last-of-type {
  margin-right: 0;
}
.form tr:first-child th {
  padding-top: 5px;
}
.form tr:first-child td {
  padding-top: 0;
}
.form tr:last-child th,
.form tr:last-child td {
  padding-bottom: 0;
}
.form--table tr {
  border-bottom: solid 1px var(--gray-color);
}
.form--table tr th {
  padding: 2rem 4rem 2rem 0;
}
.form--table tr td {
  line-height: 1.5;
  padding: 2rem 0;
}
.form--table tr:last-child th,
.form--table tr:last-child td {
  padding-bottom: 2rem;
}
.form select,
.form textarea,
.form input[type=tel],
.form input[type=text],
.form input[type=email] {
  width: 100%;
  font-size: var(--font-size-16);
  font-family: var(--font-kaku);
  font-weight: var(--font-bold);
  line-height: 1.5;
  letter-spacing: 0;
  border: 1px solid var(--gray-color);
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(150, 150, 150, 0.1) inset;
  box-sizing: border-box;
  padding: 5px;
}
.form input[name=your-age] {
  width: 6em;
  font-size: var(--font-size-16);
  line-height: 1.5;
  padding: 5px;
}
.form textarea {
  width: 100%;
}
.form input::-moz-placeholder, .form textarea::-moz-placeholder {
  color: #a9a9a9;
}
.form input::placeholder,
.form textarea::placeholder {
  color: #a9a9a9;
}
.form .wpcf7-list-item {
  margin: 0;
}
.form .wpcf7-radio .wpcf7-list-item {
  display: block;
  margin-bottom: 1rem;
}
.form .wpcf7-radio .wpcf7-list-item:nth-child(4){
  margin-bottom: 0;
}
.form .wpcf7-radio .wpcf7-list-item:last-child {
  visibility: hidden;
}
.form button,
.form input[type=submit] {
  display: block;
  width: 32.5rem;
  height: 7.5rem;
  text-align: center;
  font-size: var(--font-size-20);
  font-family: var(--font-kaku);
  font-weight: var(--font-bold);
  color: #fff;
  letter-spacing: var(--letter-spacing-min);
  background: var(--blue-color);
  border: none;
  border-radius: 100vh;
  -webkit-appearance: none;
  transition: all 0.4s ease;
  margin: 4.5rem auto 0;
}
.form button:hover,
.form input[type=submit]:hover {
  background: var(--main-color);
}
.form-submit__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding-top: 4.5rem;
}
.form-submit__wrap button,
.form-submit__wrap input[type=submit] {
  margin: 0;
}
.form-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 80px 0 30px;
}
.form-text p:first-child {
  margin-top: -0.25em;
}
.form-text p:last-child {
  margin-bottom: -0.25em;
}
.form-text a {
  color: var(--blue-color);
  text-decoration: underline;
}
.form-text a:hover {
  color: var(--main-color);
}
@media screen and (max-width: 767px) {
  .form {
    font-size: max(13px, var(--font-size-16));
  }
  .form table,
  .form table tbody,
  .form table tr,
  .form table th,
  .form table td {
    display: block;
    width: 100%;
  }
  .form tr {
    margin-bottom: 3rem;
  }
  .form tr:last-of-type {
    margin-bottom: 0;
  }
  .form tr th {
    font-size: max(14px, var(--font-size-20));
    padding: 0;
    margin-bottom: 1em;
  }
  .form tr th span {
    font-size: var(--font-size-16);
    line-height: 1.875;
  }
  .form tr td {
    padding: 0;
  }
  .form tr td .wpcf7-checkbox .wpcf7-list-item {
    display: block;
    margin: 0 0 1rem;
  }
  .form tr td .wpcf7-checkbox .wpcf7-list-item:last-of-type {
    margin-bottom: 0;
  }
  .form--table tr {
    padding-bottom: 2.4rem;
  }
  .form--table tr th {
    padding: 0 !important;
  }
  .form--table tr td {
    padding: 0 !important;
  }
  .form select,
  .form textarea,
  .form input[type=tel],
  .form input[type=text],
  .form input[type=email],
  .form input[type=url] {
    width: 100%;
    font-size: 1em;
    line-height: 1.6;
    padding: 1rem;
  }
  .form textarea {
    width: 100%;
  }
  .form-text {
    padding: 6rem 0 2rem;
  }
  .form-text p:first-child {
    margin-top: calc((1em - 1lh) / 2);
  }
  .form-text p:last-child {
    margin-bottom: calc((1em - 1lh) / 2);
  }
}

/*テキスト
-----------------------------*/
.text .mb {
  margin-bottom: 1lh;
}
@media screen and (max-width: 767px) {
  .text br {
    display: none;
  }
}

/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
.title01 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: var(--font-size-50);
  font-weight: var(--font-bold);
  line-height: var(--line-height-title);
  letter-spacing: 0;
  color: var(--green-color);
  margin-bottom: 5rem;
  position: relative;
  z-index: 3;
}
.title01 > span {
  display: block;
  letter-spacing: var(--letter-spacing-min);
  margin-right: calc(var(--letter-spacing-min) * -1);
}
@media screen and (max-width: 767px) {
  .title01 {
    font-size: var(--font-size-36);
  }
  .title01 > span {
    word-break: keep-all;
  }
}

/*中タイトル
-----------------------------*/
.title02 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  font-size: var(--font-size-60);
  font-weight: var(--font-bold);
  color: var(--white-color);
  line-height: var(--line-height-title);
  letter-spacing: 0;
  margin-inline: auto;
  position: relative;
  z-index: 3;
}
.title02 > span {
  display: block;
  letter-spacing: var(--letter-spacing-min);
  margin-right: calc(var(--letter-spacing-min) * -1);
  text-shadow: var(--text-shadow);
}
.title02 .b {
  font-size: var(--font-size-70);
  color: var(--yellow-color);
}
@media screen and (max-width: 767px) {
  .title02 {
    font-size: var(--font-size-40);
  }
  .title02 .b {
    font-size: var(--font-size-50);
  }
}

/* ===============================================
 こんなお悩みの方へ
=============================================== */
.trouble {
  padding-top: 11rem;
}
.trouble__inner {
  display: grid;
  grid-template: auto 1fr/570px auto;
  justify-content: space-between;
  align-items: flex-start;
}
.trouble__title {
  color: var(--white-color);
  background: var(--orange-color);
  border-radius: 100vh;
  padding: 1.2rem 2rem;
  margin-bottom: 4.6rem;
}
.trouble__title::after {
  content: "";
  width: 2rem;
  aspect-ratio: 2/1;
  background: var(--orange-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 1px);
  z-index: -1;
}
.trouble__image {
  filter: var(--drop-shadow);
  grid-row: span 2;
}
.trouble__item {
  font-size: var(--font-size-24);
  font-weight: var(--font-bold);
  line-height: 2.3;
  letter-spacing: var(--letter-spacing-min);
  padding-left: 5rem;
  position: relative;
  z-index: 0;
}
.trouble__item::before {
  content: "";
  width: 3.9rem;
  height: 2.3em;
  background: url(../../assets/images/trouble/check.png) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .trouble {
    padding-top: 8rem;
  }
  .trouble__inner {
    display: block;
  }
  .trouble__image {
    text-align: center;
    margin-bottom: 4rem;
  }
  .trouble__image img {
    width: 24rem;
  }
  .trouble__item {
    font-size: var(--font-size-20);
    line-height: 1.5;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
  }
  .trouble__item:last-of-type {
    margin-bottom: 0;
  }
  .trouble__item::before {
    width: 2rem;
    height: 1.5em;
  }
}

/* ===============================================
 撤去・処分・取付・工事保証すべて込み
 最低価格69,300円（税込）～
=============================================== */
.service {
  padding: 3.6rem 0 7rem;
}
.service::before {
  content: "";
  width: calc(100% - 50px);
  max-width: 1280px;
  height: 100%;
  background: url(../../assets/images/service/bg.svg) no-repeat center bottom/100%;
  background-color: var(--green-color);
  outline: solid 0.2rem var(--green-color);
  outline-offset: -0.2rem;
  border-radius: 3rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 0;
}
.service__inner {
  display: grid;
  grid-template-columns: 1fr 337px;
  align-items: flex-end;
  row-gap: 4rem;
}
.service__title {
  margin-bottom: 0.7rem;
}
.service__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem 6.7rem;
  grid-column: span 2;
}
.service__heading {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 94rem;
  box-shadow: 0 0 0 1px var(--green-color) inset;
  border-radius: 100vh;
  background: var(--white-color);
  padding: 1.2rem 2rem;
  margin-bottom: 1.2rem;
}
.service__heading > span {
  letter-spacing: -0.06em;
  margin-right: 0.06em;
}
@media screen and (max-width: 767px) {
  .service {
    padding-top: 6rem;
  }
  .service::before {
    width: calc(100% + 0.4rem);
    border-radius: 0;
    background-size: 125rem;
  }
  .service__inner {
    display: block;
  }
  .service__title {
    margin-bottom: 2.4rem;
  }
  .service__image {
    width: 30rem;
    margin-inline: auto;
  }
  .service__list {
    padding-top: 6rem;
    gap: 3rem 4rem;
  }
  .service__heading {
    min-width: 100%;
    font-size: var(--font-size-32);
    margin-bottom: 1rem;
  }
  .service__heading > span {
    letter-spacing: 0;
    margin-right: 0;
    word-break: keep-all;
  }
  .service__logo img {
    height: 4.2rem;
  }
}

/* ===============================================
 給湯の匠が選ばれる理由
=============================================== */
.reason {
  padding-top: 8.5rem;
}
.reason__title .label {
  display: inline-block;
  padding: 0.5rem 1.7rem;
  color: var(--white-color);
  letter-spacing: 0;
  background: var(--orange-color);
  border-radius: 100vh;
  margin-right: 1.3rem;
}
.reason__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 3rem;
  padding-top: 0.5rem;
  counter-reset: num 0;
}
.reason__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: 1rem;
  width: 34rem;
  background: var(--white-color);
  box-shadow: 0 0 0 1px var(--green-color) inset;
  padding: 2rem 1.8rem 2.6rem;
  border-radius: 3rem;
}
.reason__item::before {
  counter-increment: num 1;
  content: counter(num, decimal-leading-zero);
  display: block;
  font-size: var(--font-size-35);
  font-weight: var(--font-black);
  line-height: 1.3;
  letter-spacing: 0.03em;
  order: 1;
}
.reason__image {
  width: 100%;
  order: 0;
}
.reason__image img {
  width: 100%;
  aspect-ratio: 1.504950495;
  -o-object-fit: cover;
     object-fit: cover;
}
.reason__image img {
  border-radius: 1.7rem;
}
.reason__heading {
  order: 2;
}
@media screen and (max-width: 767px) {
  .reason__title .label {
    padding-inline: 1.5rem;
    margin-right: 0.5rem;
  }
  .reason__list {
    gap: 2rem;
  }
  .reason__item {
    width: 100%;
  }
  .reason__image img {
    width: 100%;
    aspect-ratio: 1.7777777778;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .reason__heading img {
    width: 32rem;
  }
}

/* ===============================================
 まずは無料で見積もり依頼！
=============================================== */
.bnr {
  padding: 7.1rem 0 9.3rem;
  background: url(../../assets/images/common/bg-img.png) no-repeat center/cover;
  background-color: var(--green-color);
}
.bnr__inner {
  width: calc(100% - 50px);
  max-width: 1280px;
}
.bnr__title {
  margin-bottom: 4.4rem;
}
.bnr__title::before {
  content: "";
  width: 100%;
  height: 2.8rem;
  background: var(--white-color);
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  z-index: -2;
  opacity: 0.3;
}
.bnr__items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
}
@media screen and (max-width: 1400px) {
  .bnr__info {
    margin-inline: calc(50% - 17.5rem);
  }
}
.bnr__tel {
  font-size: var(--font-size-44);
}
.bnr__tel::before {
  width: 1em;
}
.bnr__time {
  font-size: 16px;
}
.bnr__btn {
  width: 38.5rem;
  height: 10.2rem;
  font-size: var(--font-size-28);
}
.bnr__btn.btn--mail::before {
  width: 2.8rem;
}
.bnr__btn.btn--line {
  -moz-column-gap: 1.7rem;
       column-gap: 1.7rem;
}
.bnr__btn.btn--line::before {
  width: 3.3rem;
}
@media screen and (max-width: 767px) {
  .bnr {
    padding-block: 6rem;
  }
  .bnr__inner {
    width: 90%;
  }
  .bnr__title {
    max-width: 32rem;
    margin-bottom: 5rem;
  }
  .bnr__info {
    row-gap: 1rem;
    margin-inline: 0 !important;
    padding-bottom: 1rem;
  }
  .bnr__tel {
    font-size: clamp(35px, 4.4rem, 55px);
  }
  .bnr__time {
    font-size: clamp(15px, 1.5rem, 18px);
  }
  .bnr__btn {
    width: 100%;
    height: clamp(82px, 9.8rem, 122px);
  }
  .bnr__btn.btn--mail::before {
    width: 3.6rem;
  }
  .bnr__btn.btn--line {
    -moz-column-gap: clamp(20px, 2rem, 30px);
         column-gap: clamp(20px, 2rem, 30px);
  }
  .bnr__btn.btn--line::before {
    width: clamp(40px, 4rem, 60px);
  }
}

/* ===============================================
 セクション名
=============================================== */
.voice {
  background: var(--white-color);
}
.voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.voice__item {
  display: grid;
  grid-template: auto 1fr/1fr 11.6rem;
  align-items: flex-end;
  row-gap: 1.5rem;
  padding: 0 2rem 2rem;
  position: relative;
  z-index: 0;
}
.voice__item::before {
  content: "";
  width: 100%;
  height: calc(100% - 4rem);
  background: var(--white-color);
  border-radius: 3rem;
  box-shadow: 0 0 0 1px var(--green-color) inset;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -2;
}
.voice__icon {
  font-size: 1rem;
  order: 1;
}
.voice__icon img {
  width: 100%;
  aspect-ratio: 0.935483871;
  -o-object-fit: contain;
     object-fit: contain;
}
.voice__icon img {
  -o-object-position: center bottom;
     object-position: center bottom;
}
.voice__heading {
  font-size: var(--font-size-26);
  font-weight: var(--font-bold);
  color: var(--green-color);
  line-height: 1.3;
  order: 0;
  margin-right: -1em;
}
.voice__body {
  text-align: justify;
  line-height: 1.45;
  align-self: flex-start;
  order: 2;
  grid-column: span 2;
}
.voice__body p {
  display: inline;
}
@media screen and (max-width: 767px) {
  .voice__list {
    display: block;
  }
  .voice__item {
    grid-template: auto 1fr/1fr 12rem;
    padding-inline: 2.5rem;
    margin-bottom: 2rem;
  }
  .voice__item:last-of-type {
    margin-bottom: 0;
  }
  .voice__icon img {
    width: 100%;
    aspect-ratio: 0.9230769231;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .voice__heading {
    font-size: var(--font-size-32);
    padding-bottom: 1rem;
  }
  .voice__body {
    font-size: max(15px, var(--font-size-16));
  }
}

/* ===============================================
 主な対応エリア
=============================================== */
.area__inner {
  display: grid;
  grid-template: auto 1fr/55.4rem 1fr;
  align-items: flex-start;
  -moz-column-gap: 2.7rem;
       column-gap: 2.7rem;
}
.area__title {
  color: var(--white-color);
  background: var(--orange-color);
  border-radius: 100vh;
  padding: 1.2rem 2rem;
  margin-bottom: 4.6rem;
  order: 1;
}
.area__title::after {
  content: "";
  width: 2rem;
  aspect-ratio: 2/1;
  background: var(--orange-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 1px);
  z-index: -1;
}
.area__image {
  order: 2;
}
.area__cards {
  order: 0;
  grid-row: span 2;
}
.area__card {
  background: var(--white-color);
  padding: 2rem;
  margin-bottom: 0.6rem;
}
.area__card:last-of-type {
  margin-bottom: 0;
}
.area__heading {
  font-size: var(--font-size-28);
  font-weight: var(--font-bold);
  color: var(--green-color);
  letter-spacing: 0;
  padding-left: 4.4rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 0;
}
.area__heading::before {
  content: "";
  width: 2.9rem;
  height: 1.5em;
  background: url(../../assets/images/area/ic.png) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.area__items {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.area__items::after {
  content: "etc...";
  margin-left: 0.25em;
}
.area__item::after {
  content: "・";
}
.area__item:last-of-type::after {
  display: none;
}
@media screen and (max-width: 767px) {
  .area__inner {
    display: block;
  }
  .area__image {
    text-align: center;
    margin-bottom: 3rem;
  }
  .area__image img {
    width: 30rem;
  }
  .area__heading {
    font-size: var(--font-size-24);
    padding-left: 3.6rem;
  }
  .area__heading::before {
    width: 1em;
  }
  .area__items, .area__text {
    font-size: max(15px, var(--font-size-16));
  }
}

/* ===============================================
 お問い合わせからの流れ
=============================================== */
.flow {
  background: var(--white-color);
  padding-top: 9rem;
}
.flow__title {
  margin-bottom: 6rem;
}
.flow__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: calc((100% - 100rem) / 3);
  counter-reset: num 0;
}
.flow__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 1rem;
  width: 25rem;
  min-height: 25.6rem;
  font-size: var(--font-size-22);
  font-weight: var(--font-bold);
  padding: 2rem;
  box-shadow: 0 0 0 1px var(--green-color) inset;
  border-radius: 3rem;
  position: relative;
  z-index: 0;
}
.flow__item::before {
  counter-increment: num 1;
  content: "STEP." counter(num);
  display: block;
  color: var(--orange-color);
  letter-spacing: 0;
}
.flow__item::after {
  content: "";
  width: 1.2rem;
  aspect-ratio: 12/13;
  background: url(../../assets/images/flow/arrow.svg) no-repeat center/contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + (26.6666666667px - 1.2rem) / 2);
}
.flow__item:last-of-type::after {
  display: none;
}
.flow__icon {
  width: 14.5rem;
}
.flow__icon img {
  width: 100%;
  aspect-ratio: 1.380952381;
  -o-object-fit: contain;
     object-fit: contain;
}
.flow__heading {
  text-align: center;
  line-height: 1.3;
  padding-inline: 1em;
}
.flow__heading > span {
  display: block;
  word-break: keep-all;
}
@media screen and (max-width: 767px) {
  .flow__title {
    margin-bottom: 4rem;
  }
  .flow__list {
    gap: 2rem;
  }
  .flow__item {
    width: 100%;
  }
  .flow__item::after {
    display: none;
  }
}

/* ===============================================
 セクション名
=============================================== */
.qa {
  padding-top: 9rem;
}
.qa__title {
  margin-bottom: 6rem;
}
.qa__item {
  line-height: 1.6;
  margin-bottom: 3rem;
}
.qa__item:last-of-type {
  margin-bottom: 0;
}
.qa__heading {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: var(--font-size-20);
  font-weight: var(--font-bold);
  color: var(--white-color);
  padding: 1.5rem calc(2.5rem + 1.6em) 1.5rem 1.5rem;
  background: var(--green-color);
  border-radius: 0.5rem 0.5rem 0 0;
  position: relative;
  cursor: pointer;
}
.qa__heading::before {
  content: "Q.";
  margin-right: 0.25em;
  flex-shrink: 0;
}
.qa__heading::after {
  content: "＋";
  font-size: 1.6em;
  line-height: 1;
  letter-spacing: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.5rem;
}
.qa__heading.active::after {
  content: "－";
}
.qa__body {
  background: var(--white-color);
  padding: 1rem 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 0 0 1px var(--gray-color) inset;
}
@media screen and (max-width: 767px) {
  .qa__body {
    font-size: max(15px, var(--font-size-16));
  }
  .qa__body br {
    display: none;
  }
}

/* ===============================================
 お問い合わせ
=============================================== */
.contact {
  padding-bottom: 9rem;
  background: url(../../assets/images/common/bg-img.png) no-repeat center/cover;
  background-color: var(--green-color);
}
.contact__title {
  width: 100%;
  max-width: 94rem;
  color: var(--green-color);
  background: var(--white-color);
  border-radius: 100vh;
  padding-bottom: 0.7rem;
  margin-bottom: 6.5rem;
}
.contact__title .b {
  color: var(--orange-color);
}
.contact__title::before {
  content: "";
  width: calc(100% + 13rem);
  height: 15rem;
  background: url(../../assets/images/cta/title_deco-left.png) no-repeat left bottom/contain, url(../../assets/images/cta/title_deco-right.png) no-repeat right bottom/contain;
  position: absolute;
  left: calc(50% - 2rem);
  bottom: 0;
  z-index: -1;
  transform: translateX(-50%);
}
.contact__title::after {
  content: "";
  width: 2rem;
  aspect-ratio: 2/1;
  background: var(--white-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 1px);
  z-index: -1;
}
.contact__cards {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4rem 9rem;
}
.contact__card {
  width: 38.2rem;
}
.contact__card-title {
  text-align: center;
  font-size: var(--font-size-22);
  font-weight: var(--font-bold);
  color: var(--green-color);
  background: var(--white-color);
  border-radius: 100vh;
  padding: 0.85rem 2rem;
  margin-bottom: 2rem;
}
.contact__info {
  height: 7rem;
  margin-inline: auto;
}
.contact__tel {
  font-size: var(--font-size-44);
}
.contact__tel::before {
  width: 1em;
}
.contact__time {
  font-size: 16px;
}
.contact__btn {
  height: 7rem;
  font-size: var(--font-size-28);
}
.contact__btn.btn--line {
  -moz-column-gap: 1.7rem;
       column-gap: 1.7rem;
}
.contact__btn.btn--line::before {
  width: 3.3rem;
}
.contact__box {
  padding-top: 7rem;
}
.contact__heading {
  text-align: center;
  font-size: var(--font-size-36);
  font-weight: var(--font-bold);
  color: var(--white-color);
  line-height: 1.5;
  padding: 1.3rem 2rem;
  background: var(--blue-color);
}
.contact__items {
  background: var(--white-color);
  padding: 5rem 3.2rem;
}
.contact__item {
  margin-bottom: 3.6rem;
}
.contact__item:last-of-type {
  margin-bottom: 0;
}
.contact__item:has(.contact__image) {
  display: grid;
  grid-template-columns: 1fr 38rem;
  align-items: flex-start;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
}
.contact__item:has(.contact__image) .contact__item-title {
  grid-column: span 2;
}
.contact__item-title {
  font-size: var(--font-size-20);
  font-weight: var(--font-bold);
  line-height: 1.5;
  border-left: solid 0.5rem var(--blue-color);
  padding-left: 1rem;
  margin-bottom: 2rem;
}
.contact__item-title--oth {
  border-left-color: #1c2e69;
}
.contact__privacy {
  text-align: center;
  padding-top: 3rem;
  line-height: 1.4375;
}
.contact__privacy a {
  color: var(--blue-color);
  text-decoration: underline;
}
.contact__privacy .wpcf7-list-item-label {
  display: none !important;
}
.contact__privacy .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
}
.contact__privacy span:not([class*=wpcf7-]) {
  display: inline-block;
  width: 5.3rem;
  text-align: center;
  letter-spacing: 0;
}
.contact__privacy span:not([class*=wpcf7-]).required {
  color: var(--white-color);
  background: var(--red-color);
}
.contact__privacy span:not([class*=wpcf7-]).optional {
  color: var(--white-color);
  background: var(--gray-color);
}
@media screen and (max-width: 767px) {
  .contact {
    padding-bottom: 0.5rem;
  }
  .contact .inner {
    width: 100%;
  }
  .contact__title {
    max-width: 40rem;
  }
  .contact__title::before {
    width: calc(100% + 12rem);
  }
  .contact__cards {
    padding-inline: 5%;
  }
  .contact__card {
    width: 100%;
  }
  .contact__card-title {
    font-size: var(--font-size-24);
  }
  .contact__info {
    height: auto;
    row-gap: 1rem;
  }
  .contact__tel {
    font-size: clamp(35px, 4.4rem, 55px);
  }
  .contact__time {
    font-size: clamp(15px, 1.5rem, 18px);
  }
  .contact__btn {
    height: clamp(82px, 9.8rem, 122px);
  }
  .contact__btn.btn--line {
    -moz-column-gap: clamp(20px, 2rem, 30px);
         column-gap: clamp(20px, 2rem, 30px);
  }
  .contact__btn.btn--line::before {
    width: clamp(40px, 4rem, 60px);
  }
  .contact__heading {
    font-size: var(--font-size-32);
    padding-block: 2rem;
  }
  .contact__items {
    padding: 3rem 5%;
  }
  .contact__item {
    margin-bottom: 4rem;
  }
  .contact__item:has(.contact__image) {
    display: block;
  }
  .contact__item-title {
    font-size: max(16px, var(--font-size-24));
  }
  .contact__image {
    padding-top: 2rem;
  }
  .contact__image img {
    width: 100%;
  }
  .wpcf7-list-item-label{
    font-size: 15px;
  }
  .contact__privacy{
    font-size: 15px;
  }
  .contact__privacy span:not([class*=wpcf7-]) {
    font-size: var(--font-size-16);
    line-height: 1.875;
  }
}

/* モーダルウィンドウ
------------------------------*/
.modal__item {
  padding-top: 4rem;
}
.modal__heading {
  font-size: var(--font-size-20);
  font-weight: var(--font-bold);
  line-height: 1.5;
  border-left: solid 0.5rem var(--blue-color);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
.modal__list {
  padding-top: 1rem;
}
.modal__list li::before {
  content: "・";
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: var(--green-color) !important;
}

.modaal-container {
  border-radius: 0.5rem !important;
}

.modaal-content-container {
  padding: 3rem !important;
}

/* ===============================================
 運営概要
=============================================== */
.info {
  padding-block: 9rem;
  background: var(--white-color);
}
.info__title {
  margin-bottom: 6rem;
}
/*============================
  お探しのページは
  見つかりませんでした。
============================*/
.error__text {
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: 2;
}
.error__text p {
  word-break: keep-all;
}
.error__text-link {
  color: var(--blue-color);
  text-decoration: underline;
}
.error__text-link:hover {
  color: var(--main-color);
}
@media screen and (max-width: 767px) {
  .error__title .main {
    word-break: keep-all;
  }
}

/*============================
  お問い合わせ確認
============================*/
.confirm {
  padding-bottom: 9rem;
  background: url(../../assets/images/common/bg-img.png) no-repeat center/cover;
  background-color: var(--green-color);
}
@media screen and (max-width: 767px) {
  .confirm {
    padding-block: 0;
  }
  .confirm .inner {
    width: 100%;
  }
}

/*============================
  送信完了ページ
============================*/
.thanks__text {
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: 2;
}
.thanks__text p {
  word-break: keep-all;
}
.thanks__link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--font-size-20);
  font-weight: var(--font-bold);
  color: var(--blue-color);
  line-height: 2;
  border-bottom: solid 1px var(--blue-color);
  margin: 4rem auto 0;
  transition: all 0.12s;
}
.thanks__link:hover {
  color: var(--main-color);
  border-bottom-color: var(--main-color);
}
@media screen and (max-width: 767px) {
  .thanks__title .main {
    word-break: keep-all;
  }
}

.PageTop{
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999;
}

@media screen and (max-width: 767px) {
  .PageTop {
    width: 35px;
    right: 10px;
    bottom: 90px;
  }
}