@charset "UTF-8";
label.th-title,
.td-content {
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 13.33px;
}

label.th-title {
  padding-bottom: 0px;
  text-align: left;
  width: 30%;
  vertical-align: top;
}
@media only screen and (max-width: 993px) {
  label.th-title {
    width: 100%;
  }
}

.td-content {
  padding-left: 20px;
  width: 70%;
  position: relative;
}
@media only screen and (max-width: 993px) {
  .td-content {
    width: 100%;
    border-top: none;
    padding-left: 0;
    display: block;
  }
}

span.smallfont {
  font-size: 13px;
}

select,
input[type=number],
input[type=text],
input[type=email],
input[type=tel],
textarea {
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #CCC;
  border-radius: 3px;
  padding: 3px 8px;
  margin: 2px;
  vertical-align: middle;
  font-size: 13.33px;
}

input[type=number] {
  padding-right: 0;
}

select {
  padding-right: 30px;
}
@media only screen and (min-width: 992px) {
  select {
    max-width: 329px;
  }
}

input[type=file]::file-selector-button {
  padding: 10px 15px;
  background-color: #091429;
  overflow: hidden;
  transition: .2s;
  color: #fff;
  border: none;
  font-weight: bold;
  position: relative;
  width: 145px;
  height: 48px;
  margin-right: 20px;
}
input[type=file]::file-selector-button:hover {
  cursor: pointer;
  color: #091429;
  background-color: #ff3;
}

input[type=file]::-webkit-file-upload-button {
  padding: 10px 15px;
  border-radius: 0.2em;
  background-color: #091429;
  overflow: hidden;
  transition: .2s;
  color: #fff;
  border: none;
  font-weight: bold;
  margin-right: 20px;
}
input[type=file]::-webkit-file-upload-button:hover {
  cursor: pointer;
  color: #091429;
  background-color: #ff3;
}

.file-wrap {
  margin-top: 20px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.file-wrap input[type=file] {
  width: 100%;
}

.file-wrap input[type=file]:hover {
  cursor: pointer;
  background-color: #ff3;
}

select[disabled] + i {
  color: #848484;
}

.checkbox-label {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create the checkmark/indicator (hidden when not checked) */
}
@media only screen and (max-width: 768px) {
  .checkbox-label {
    font-size: 15px;
  }
}
.checkbox-label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox-label .checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  transform: translateY(-50%);
  border-radius: 4px;
}
@media only screen and (max-width: 575px) {
  .checkbox-label .checkmark {
    top: 25%;
  }
}
.checkbox-label .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-label:hover input ~ .checkmark {
  background-color: #fff;
  border: 1px solid #ccc;
}

.checkbox-label input:checked ~ .checkmark {
  background-color: #fff;
  border: 1px solid #0082c3;;
}

/* Show the checkmark when checked */
.checkbox-label input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-label .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #0082c3;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.radio-label {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Create the checkmark/indicator (hidden when not checked) */
}
@media only screen and (max-width: 768px) {
  .radio-label {
    font-size: 15px;
  }
}
.radio-label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radio-label .checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  transform: translateY(-50%);
  border-radius: 100%;
}
.radio-label .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-label:hover input ~ .checkmark {
  background-color: #fff;
  border: 1px solid #ccc;
}

.radio-label input:checked ~ .checkmark {
  background-color: #fff;
  border: 1px solid #091429;
}

/* Show the checkmark when checked */
.radio-label input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.radio-label .checkmark:after {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  background: #091429;
  border-radius: 100%;
}

.select-label-wrap {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .select-label-wrap {
    max-width: 329px;
  }
}
.select-label-wrap i {
  position: absolute;
  right: 10px;
  top: 14px;
}
@media only screen and (max-width: 768px) {
  .select-label-wrap i {
    top: 13px;
  }
}
@media only screen and (max-width: 575px) {
  .select-label-wrap i {
    top: 10px;
  }
}

#estimateCrientInfoSection .estimateItemLeft p,
.detailtemWrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
@media only screen and (max-width: 993px) {
  #estimateCrientInfoSection .estimateItemLeft p,
.detailtemWrap {
    display: block;
  }
}

#estimateCrientInfoSection .estimateItemLeft p .smallfont {
  position: absolute;
  left: 25%;
  bottom: 0;
}
@media only screen and (max-width: 993px) {
  #estimateCrientInfoSection .estimateItemLeft p .smallfont {
    left: 0;
  }
}

#estimateCrientInfoSection .estimateItemLeft + .heading04 {
  margin-top: 64px;
}

#estimateCrientInfoSection .itemErrorMessage {
  position: absolute;
  left: 25%;
  bottom: 0;
}
@media only screen and (max-width: 993px) {
  #estimateCrientInfoSection .itemErrorMessage {
    left: 0;
  }
}

.kirimojiViewer {
  margin-bottom: 64px;
}

.kirimojiText {
  line-height: 1em;
}

.detailSet,
#estimateCrientInfoSection .estimateItemRight,
#mailInfoSection #estimateData,
#estimateFormSection #estimateData {
  padding: 40px;
  border-radius: 25px;
  border: 4px solid #091429;
  margin-bottom: 64px;
}
@media only screen and (max-width: 408px) {
  .detailSet,
#estimateCrientInfoSection .estimateItemRight,
#mailInfoSection #estimateData,
#estimateFormSection #estimateData {
    padding: 20px;
  }
}

.detailSet {
  padding-bottom: 0px;
}

#detailItems .removeDetailBtn {
  transform: translateY(50%);
  background: #091429;
  border-radius: 100%;
}

#addDetailBtn {
  border-radius: 100%;
  background: #E58D00;
}

.btnEstimate .btn-round_arrow_05,
#estimateCrientInfoSection .btn-round_arrow_05 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 550px;
  padding: 30px 0;
  margin: 30px auto;
  text-align: center;
  background: url(../img/icon-mail.svg) no-repeat left 30px center, url(../img/icon-arrow04.svg) no-repeat right 20px center, #091429;
  background-size: 35px auto;
  color: #fff;
  font-size: 20px !important;
  line-height: 1.8em !important;
  font-weight: 500;
  letter-spacing: .2em;
  border-radius: 0;
}

#mailFormSubmitBtn.btn-round_arrow_05,
#sendMailButton.btn-round_arrow_05 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 550px;
  padding: 30px 0;
  margin: 30px auto;
  text-align: center;
  background: url(../img/icon-mail.svg) no-repeat left 30px center, url(../img/icon-arrow04.svg) no-repeat right 20px center, #091429;
  background-size: 35px auto;
  color: #fff;
  font-size: 20px !important;
  line-height: 1.8em !important;
  font-weight: 500;
  letter-spacing: .2em;
  border-radius: 0;
}

#sumPricewrap {
  color: #0082c3;
  font-size: 30px;
  font-weight: bold;
  text-align: left;
  align-items: center;
  display: flex;
}
@media only screen and (max-width: 575px) {
  #sumPricewrap {
    width: fit-content;
  }
}
#sumPricewrap .li-count-02 {
  margin-top: 30px;
}

.hideStepMsg,
.itemErrorMessage {
  color: #0082c3;
}

#step1 {
  padding-left: 0;
  padding-right: 0;
}

#step1 + section {
  margin-bottom: 64px;
}
#step1 + section + section {
  margin-bottom: 64px;
}

#sumPrice {
  text-align: left;
  margin-left: 10px;
}
#sumPrice:before {
  content: "¥";
  position: relative;
  display: inline-block;
}

#estimateCrientInfoSection .estimateItemRight table,
#mailInfoSection #estimateData table,
#estimateFormSection #estimateData table,
#mailFormSection table {
  width: 100%;
}
#estimateCrientInfoSection .estimateItemRight table tr th,
#mailInfoSection #estimateData table tr th,
#estimateFormSection #estimateData table tr th,
#mailFormSection table tr th {
  width: 293px;
  background: #f1f1f1;
}
#estimateCrientInfoSection .estimateItemRight table tr td,
#mailInfoSection #estimateData table tr td,
#estimateFormSection #estimateData table tr td,
#mailFormSection table tr td {
  width: 70%;
}
#estimateCrientInfoSection .estimateItemRight table tr th,
#estimateCrientInfoSection .estimateItemRight table tr td,
#mailInfoSection #estimateData table tr th,
#mailInfoSection #estimateData table tr td,
#estimateFormSection #estimateData table tr th,
#estimateFormSection #estimateData table tr td,
#mailFormSection table tr th,
#mailFormSection table tr td {
  border-top: 0;
  border-bottom: solid 1px #e9e9ea;
  border-right: none;
  border-left: 0;
  text-align: left;
  vertical-align: middle;
  padding: 10px;
  padding-left: 40px;
  box-sizing: border-box;
  font-size: 15px;
}
@media only screen and (max-width: 768px) {
  #estimateCrientInfoSection .estimateItemRight table tr th,
#estimateCrientInfoSection .estimateItemRight table tr td,
#mailInfoSection #estimateData table tr th,
#mailInfoSection #estimateData table tr td,
#estimateFormSection #estimateData table tr th,
#estimateFormSection #estimateData table tr td,
#mailFormSection table tr th,
#mailFormSection table tr td {
    padding-left: 20px;
    width: 100%;
    display: block;
  }
}
#estimateCrientInfoSection .estimateItemRight table .detailFirstTr th:first-of-type,
#mailInfoSection #estimateData table .detailFirstTr th:first-of-type,
#estimateFormSection #estimateData table .detailFirstTr th:first-of-type,
#mailFormSection table .detailFirstTr th:first-of-type {
  width: 30px;
  padding-left: 10px;
  border-right: solid 1px #e9e9ea;
}
@media only screen and (max-width: 768px) {
  #estimateCrientInfoSection .estimateItemRight table .detailFirstTr th:first-of-type,
#mailInfoSection #estimateData table .detailFirstTr th:first-of-type,
#estimateFormSection #estimateData table .detailFirstTr th:first-of-type,
#mailFormSection table .detailFirstTr th:first-of-type {
    width: 100%;
    padding-left: 20px;
    display: block;
  }
}

#estimateCrientInfoSection .estimateItemRight table tbody:last-of-type tr:last-of-type th,
#mailInfoSection #estimateData table tbody:last-of-type tr:last-of-type th,
#estimateFormSection #estimateData table tbody:last-of-type tr:last-of-type th {
  background: #ff3;
  text-align: center;
  font-size: 30px;
  color: #091429;
  padding-left: 10px;
}
#estimateCrientInfoSection .estimateItemRight table tbody:last-of-type tr:last-of-type th span,
#mailInfoSection #estimateData table tbody:last-of-type tr:last-of-type th span,
#estimateFormSection #estimateData table tbody:last-of-type tr:last-of-type th span {
  margin-right: 20px;
  font-size: 15px;
  vertical-align: middle;
}

.detailToggleBtn_toHide,
.detailToggleBtn_toShow {
  background-color: #091429;
}
.detailToggleBtn_toHide:before,
.detailToggleBtn_toShow:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.detailToggleBtn_toHide:before {
  background: url(../img/icon-cancel.png) no-repeat;
  background-size: contain;
  background-position: center center;
}

.detailToggleBtn_toShow:before {
  background: url(../img/icon-plus.png) no-repeat;
  background-size: contain;
}

#estimateClientForm #estimateData table tbody:nth-of-type(3) .detailToggleBtn_toHide:before {
  display: none;
}

#estimateClientForm {
  margin-top: 64px;
}

#reCaptcha {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #DBDBDB;
}

input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}

div.description {
  text-align: center;
}
@media only screen and (max-width: 575px) {
  div.description {
    text-align: left;
  }
}

.required:before {
  margin-right: 0;
}

#autoestimateForm select + i,
#autoestimateForm br + i {
  position: relative;
  top: 13px;
  left: -20px;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm select + i,
#autoestimateForm br + i {
    position: absolute;
    top: 92px;
    left: auto;
    right: 11px;
  }
}
@media only screen and (max-width: 570px) {
  #autoestimateForm select + i,
#autoestimateForm br + i {
    top: 88px;
  }
}
@media only screen and (max-width: 993px) {
  #autoestimateForm br + i {
    top: 124px;
  }
}
@media only screen and (max-width: 570px) {
  #autoestimateForm br + i {
    top: 113px;
  }
}
#autoestimateForm .contents {
  margin-bottom: 64px;
}
#autoestimateForm .detailtemWrap {
  position: relative;
  border-top: 1px solid #DBDBDB;
  padding: 30px 0 60px;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm .detailtemWrap {
    padding: 30px 0;
  }
}
#autoestimateForm .detailtemWrap h3 {
  width: 30%;
  font-size: 15px;
  margin-right: 30px;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm .detailtemWrap h3 {
    margin-bottom: 20px;
    margin-right: 0;
    width: 100%;
  }
}
#autoestimateForm .detailtemWrap .required {
  position: absolute;
  left: 30%;
  width: fit-content;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm .detailtemWrap .required {
    left: auto;
    right: 0;
    top: 30px;
  }
}
#autoestimateForm .detailtemWrap .required:before {
  width: max-content;
}
@media only screen and (min-width: 992px) {
  #autoestimateForm .detailtemWrap .smallfont {
    position: absolute;
    top: 75px;
    left: calc(30% + 30px);
  }
}
#autoestimateForm .heading04 {
  margin-top: 64px;
}
#autoestimateForm #step1 + section + section + section .inputItems {
  padding: 10px 40px;
  background: #f4f9fd;
}
@media only screen and (min-width: 992px) {
  #autoestimateForm #step1 + section + section + section .inputItems .smallfont {
    position: absolute;
    top: 75px;
    left: calc(30% + 30px);
  }
}
#autoestimateForm #step1 + section + section + section .inputItems .detailtemWrap {
  border-top: none;
  padding: 0;
}
#autoestimateForm #step1 + section + section + section .inputItems #sumPrice {
  border: none;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm #step1 + section + section + section .inputItems {
    padding: 20px;
  }
}
#autoestimateForm .detailSet {
  padding-bottom: 0px;
  display: flex;
  flex-direction: column;
}
#autoestimateForm .detailSet .removeDetailBtn {
  order: 3;
}
#autoestimateForm .detailSet .estimateItemLeft {
  order: 2;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm .detailSet .estimateItemLeft .detailtemWrap input[type=number] {
    max-width: 100%;
  }
}
#autoestimateForm .detailSet .estimateItemLeft .detailtemWrap:nth-of-type(2) {
  flex-wrap: wrap;
}
@media only screen and (min-width: 992px) {
  #autoestimateForm .detailSet .estimateItemLeft .detailtemWrap:nth-of-type(2) {
    padding-bottom: 101px;
  }
}
@media only screen and (min-width: 992px) {
  #autoestimateForm .detailSet .estimateItemLeft .detailtemWrap:nth-of-type(2) .smallfont {
    top: 120px;
  }
}
#autoestimateForm .detailSet .estimateItemLeft .detailtemWrap:nth-of-type(2) input + br + span {
  position: absolute;
  left: calc(30% + 30px);
  top: 79px;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm .detailSet .estimateItemLeft .detailtemWrap:nth-of-type(2) input + br + span {
    position: relative;
    left: auto;
    top: auto;
  }
}
#autoestimateForm .detailSet .estimateItemLeft .detailtemWrap:nth-of-type(2) input:nth-of-type(2) {
  position: absolute;
  left: calc(30% + 135px);
  top: 75px;
}
@media only screen and (max-width: 993px) {
  #autoestimateForm .detailSet .estimateItemLeft .detailtemWrap:nth-of-type(2) input:nth-of-type(2) {
    position: relative;
    left: auto;
    top: auto;
  }
}
#autoestimateForm .detailSet .estimateItemRight {
  order: 1;
}

#estimatesSection #estimates {
  margin: 40px auto 30px;
}

#estimateClientForm .estimateItemLeft p {
  position: relative;
  border-top: 1px solid #DBDBDB;
  padding: 30px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
@media only screen and (max-width: 993px) {
  #estimateClientForm .estimateItemLeft p {
    display: block;
  }
}
#estimateClientForm .estimateItemLeft p label {
  width: 30%;
  font-size: 15px;
  margin-right: 20px;
}
@media only screen and (max-width: 993px) {
  #estimateClientForm .estimateItemLeft p label {
    margin-bottom: 20px;
    width: 100%;
    margin-right: 0;
  }
}

#mailForm .contents h2 {
  font-size: 15px;
  margin-top: 64px;
  margin-bottom: 40px;
  text-align: center;
}
@media only screen and (max-width: 575px) {
  #mailForm .contents > h2 {
    text-align: left;
  }
}
#mailForm .contents .inner .li-dots {
  line-height: 2em;
}
#mailForm .contents .inner .li-dots li {
  margin-top: 20px;
}
#mailForm .contents .inner .li-dots li:first-of-type {
  margin-top: 0;
}
#mailForm .contents .inner .tel {
  margin: 0 auto 15px;
  width: fit-content;
}
#mailForm .contents .inner .tel + P {
  text-align: center;
}
@media only screen and (max-width: 575px) {
  #mailForm .contents .inner .tel .icon-tel-wrap svg {
    width: 25px;
  }
}
@media only screen and (max-width: 575px) {
  #mailForm .contents .inner .tel .icon-tel-wrap span {
    font-size: 25px;
  }
}
#mailForm .contents .inner .tel .icon-tel-wrap + p {
  margin-left: 0;
}
#mailForm .contents .inner .btn-line {
  background: #06C755;
  color: #fff;
  font-weight: 500;
  display: flex;
  max-width: 216px;
  height: 50px;
  align-items: center;
  justify-content: center;
  margin: 15px auto 0;
  border-radius: 10px;
}
#mailForm .contents .inner .btn-line svg {
  margin-right: 10px;
}
@media only screen and (min-width: 768px) {
  #mailForm .contents .inner {
    display: flex;
    justify-content: space-between;
  }
  #mailForm .contents .inner .text-box {
    width: calc((100% - 40px) / 2);
  }
}
@media only screen and (min-width: 768px) and (max-width: 993px) {
  #mailForm .contents .inner .tel .icon-tel-wrap svg {
    width: 32px;
  }
  #mailForm .contents .inner .tel .icon-tel-wrap span {
    font-size: 32px;
  }
}
@media only screen and (max-width: 993px) {
  #mailForm .contents .inner .text-box {
    margin-top: 40px;
  }
}
#mailForm .contents .inner + .blockA {
  margin-bottom: 40px;
}
#mailForm .floatR {
  margin-top: 64px;
}

#orderBox,
#publishProduct {
  border-top: solid 1px #e9e9ea;
}

#publishProduct {
  padding-top: 20px;
}

@media only screen and (max-width: 768px) {
  #thanks .contanier {
    padding-bottom: 0;
  }
}/*# sourceMappingURL=style.css.map */