.inputColInner--offset {
    margin-left: 230px !important;
}

.mainContents.contact {
  padding: 0 22px
}

@media screen and (min-width: 751px) {
  .mainContents.contact {
    padding: 0 50px
  }
}

@media screen and (min-width: 1024px) {
  .mainContents.contact {
    max-width: 345px;
    padding: 0
  }
}

.mainContents.contact h1 {
  margin: 0 0 32px;
  letter-spacing: .1em;
  text-align: center;
}

@media screen and (min-width: 751px) {
  .mainContents.contact h1 {
    margin: 0 0 50px
  }
}

.mainContents.contact .contact-inner {
  width: 100%;
  font-size: 1.4rem;
  max-width: none;
  margin: auto
}

@media screen and (min-width: 751px) {
  .mainContents.contact .contact-inner {
    max-width: 700px;
    padding: 0 0 32px
  }
}

.mainContents.contact .contact-inner .attention {
  font-size: 12px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: bold;
}

@media screen and (min-width: 751px) {
  .mainContents.contact .contact-inner .attention {
    margin-bottom: 48px;
    font-size: 13px
  }
}

.mainContents.contact .contact-inner .attention .required-text {
  font-size: 12px;
  font-weight: bold;
}

.mainContents.contact .contact-inner .attention br.hidden {
  display: inline
}

@media screen and (min-width: 751px) {
  .mainContents.contact .contact-inner .attention br.hidden {
    display: none
  }
}

.mainContents.contact .contact-inner span.must {
  color: red
}

.mainContents.contact .contact-inner input[name=name],
.mainContents.contact .contact-inner input[name=mail],
.mainContents.contact .contact-inner input[name=tel_number],
.mainContents.contact .contact-inner input[name=store_name],
.mainContents.contact .contact-inner input[name=store_address],
.mainContents.contact .contact-inner input[name=store_url],
.mainContents.contact .contact-inner select[name=contact_kbn],
.mainContents.contact .contact-inner textarea[name=message],
.mainContents.contact .contact-inner input[name=tel],
.mainContents.contact .contact-inner input[name=order_number] {
  font-size: 1.4rem
}

.mainContents.contact .contact-inner input[name=name].must[name=name],
.mainContents.contact .contact-inner input[name=mail].must[name=name],
.mainContents.contact .contact-inner input[name=tel_number].must[name=name],
.mainContents.contact .contact-inner input[name=store_name].must[name=name],
.mainContents.contact .contact-inner input[name=store_address].must[name=name],
.mainContents.contact .contact-inner input[name=store_url].must[name=name],
.mainContents.contact .contact-inner select[name=contact_kbn].must[name=name],
.mainContents.contact .contact-inner textarea[name=message].must[name=name] {
  background-position: top 11px left 50px
}

.mainContents.contact .contact-inner input[name=name].must[name=mail],
.mainContents.contact .contact-inner input[name=mail].must[name=mail],
.mainContents.contact .contact-inner input[name=tel_number].must[name=mail],
.mainContents.contact .contact-inner input[name=store_name].must[name=mail],
.mainContents.contact .contact-inner input[name=store_address].must[name=mail],
.mainContents.contact .contact-inner input[name=store_url].must[name=mail],
.mainContents.contact .contact-inner select[name=contact_kbn].must[name=mail],
.mainContents.contact .contact-inner textarea[name=message].must[name=mail] {
  background-position: top 11px left 55px
}

.mainContents.contact .contact-inner input[name=name].must[name=contact_kbn],
.mainContents.contact .contact-inner input[name=mail].must[name=contact_kbn],
.mainContents.contact .contact-inner input[name=tel_number].must[name=contact_kbn],
.mainContents.contact .contact-inner input[name=store_name].must[name=contact_kbn],
.mainContents.contact .contact-inner input[name=store_address].must[name=contact_kbn],
.mainContents.contact .contact-inner input[name=store_url].must[name=contact_kbn],
.mainContents.contact .contact-inner select[name=contact_kbn].must[name=contact_kbn],
.mainContents.contact .contact-inner textarea[name=message].must[name=contact_kbn] {
  background-position: top 11px left 40px
}

.mainContents.contact .contact-inner input[name=name].must[name=message],
.mainContents.contact .contact-inner input[name=mail].must[name=message],
.mainContents.contact .contact-inner input[name=tel_number].must[name=message],
.mainContents.contact .contact-inner input[name=store_name].must[name=message],
.mainContents.contact .contact-inner input[name=store_address].must[name=message],
.mainContents.contact .contact-inner input[name=store_url].must[name=message],
.mainContents.contact .contact-inner select[name=contact_kbn].must[name=message],
.mainContents.contact .contact-inner textarea[name=message].must[name=message] {
  background-position: top 11px left 70px
}

.mainContents.contact .contact-inner input.must+label:after,
.mainContents.contact .contact-inner select.must+label:after,
.mainContents.contact .contact-inner label.must:after,
.mainContents.contact .contact-inner .select-wrap label.must:after {
	padding-left: 3px;
	color: #b94a48;
	content: "*";
	font-size: 13px;
	line-height: 1px;
	position: absolute;
	left: -10px;
}

.mainContents.contact .contact-inner textarea.must+label:after {
	color: #b94a48;
	content: "*";
	font-size: 13px;
	line-height: 1px;
	position: absolute;
	left: -5px;
	top: 4px;
}

.mainContents.contact .contact-inner select.must {
  background-image: url(../img/base/required.png) !important;
  background-repeat: no-repeat;
  background-position: top 0px left 0px !important;
  background-size: 6px;
}

.mainContents.contact .contact-inner input:not(:placeholder-shown)+label,
.mainContents.contact .contact-inner .ty-control-group select:valid+label,
.mainContents.contact .contact-inner textarea:not(:placeholder-shown)+label {
  opacity: 0;
  pointer-events: none
}

select {
  background: unset;
}

.field-error-message {
  margin-top: 5px;
  font-size: 12px;
  color: #b94a48 !important;
  line-height: 1.4;
}

.field-error-message .error-text {
  display: block;
  margin-bottom: 2px;
}

@media screen and (min-width: 751px) {
  .field-error-message {
    font-size: 13px;
  }
}

/* Force required asterisk for select label - try all possible selectors */
.ty-control-group.select-wrap label.must:after,
.select-wrap .ty-control-group__title.must:after,
.ty-control-group__title.must:after {
  padding-left: 3px !important;
  color: #b94a48 !important;
  content: "*" !important;
  font-size: 13px !important;
  line-height: 1px !important;
  display: inline !important;
}

.mainContents.contact .contact-inner input[name=name],
.mainContents.contact .contact-inner input[name=mail],
.mainContents.contact .contact-inner input[name=tel_number],
.mainContents.contact .contact-inner input[name=store_name],
.mainContents.contact .contact-inner input[name=store_address],
.mainContents.contact .contact-inner input[name=store_url],
.mainContents.contact .contact-inner select[name=contact_kbn] {
  height: 40px
}

.mainContents.contact .contact-inner select[name=contact_kbn]:valid {
  background-image: none
}

.mainContents.contact .contact-inner .buttonArea .row {
  padding: 0
}

.mainContents.contact .contact-inner .buttonArea .row .mypage-btn .button {
  max-width: 250px;
  margin: auto;
  height: 40px;
  width: 100%;
  font-size: 1.2rem;
  border-radius: unset;
  margin-top: 10px;
  border-radius: unset;
}

@media screen and (min-width: 751px) {
  .mainContents.contact .contact-inner .buttonArea .row .mypage-btn .button {
    height: 40px;
    font-size: 1.2rem;
  }
}

.mainContents.contact .contact-inner .ty-control-group {
  margin: 0;
  position: relative
}

@media screen and (min-width: 751px) {
  .mainContents.contact .contact-inner .ty-control-group {
    margin: 0 0 23px
  }
}

.mainContents.contact .contact-inner .ty-control-group .ty-control-group__title {
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #999;
  letter-spacing: .08em;
  pointer-events: none;
  cursor: text
}

@media screen and (min-width: 751px) {
  .mainContents.contact .contact-inner .ty-control-group .ty-control-group__title {
    font-size: 16px
  }
}

.mainContents.contact .contact-inner .ty-control-group .ty-input-text,
.mainContents.contact .contact-inner .ty-control-group .ty-form-builder__select {
  height: 40px
}

@media screen and (min-width: 751px) {

  .mainContents.contact .contact-inner .ty-control-group .ty-input-text,
  .mainContents.contact .contact-inner .ty-control-group .ty-form-builder__select {
    height: 50px
  }
}

.mainContents.contact .contact-inner .ty-control-group label {
  display: inline-block;
  transition: opacity .1s;
  opacity: 1;
}

.mainContents.contact .contact-inner .ty-control-group+.ty-control-group {
  margin: 30px 0 0
}

.mainContents.contact .contact-inner .select-wrap {
  position: relative;
}

.mainContents.contact .contact-inner .select-wrap:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 20px;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center/contain;
  pointer-events: none
}

/* Select label - normal positioning like other fields */
.mainContents.contact .contact-inner .select-wrap label {
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #999;
  letter-spacing: .08em;
  transition: opacity .1s;
  pointer-events: none;
}

.custom-input {
  box-shadow: none !important;
}

.ty-form-builder__select, .ty-form-builder__textarea {
  border: 1px solid #545358;
}

.custom-input:focus {
	outline: none;
	box-shadow: none;
	background-color: #fff;
}

@media screen and (min-width: 751px) {
  .mainContents.contact .contact-inner .select-wrap label {
    font-size: 16px;
  }
}

/* Hide label when select has value */
.mainContents.contact .contact-inner .select-wrap select:valid + label {
  opacity: 0;
  pointer-events: none;
}

/* Style the default option to look like placeholder */
.mainContents.contact .contact-inner .select-wrap select:invalid,
.mainContents.contact .contact-inner .select-wrap select option[value=""] {
  color: #999;
}

.mainContents.contact .contact-inner .select-wrap select:valid {
  color: #333;
}

.form-contact-kbn-focused + .ty-control-group__title {
  display: none;
}

.button-confirm-back {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: unset !important;
}

.button-confirm-back:hover {
  opacity: 0.4 !important;
  background-color: #fff !important;
  color: #000 !important;
}

@media (max-width: 750px) {
	.mainContents {
		margin-top: 38px;
	}
}

.custom-input {
	font-family: Yu Mincho, YuMincho !important;
}