@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 共通設定スタイル
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

#mailform {
 width: 100%;
}



.mb30 {
 margin-bottom: 30px;
}

#contact-add2 {
 display: block;
}

/* お申し込みフォーム */

.wsWrap {
 font-family: メイリオ, "Hiragino Kaku Gothic Pro", Meiryo, "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;
 margin: 0 auto;

}

.contact_block p {
 line-height: 1.5;
}

span.star {
 margin-left: 0.2em;
 color: red;
 font-size: 0.8em;
 vertical-align: super;
}

.red {
 color: red;
}

.wsWrap dl {
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 width: 100%;
 padding-bottom: 1em;
}

.wsWrap dl dt {
 width: 240px;
 display: flex;
 justify-content: flex-start;
 align-items: center;
 white-space: nowrap;
 color: var(--black, #646464);
 text-align: center;
 font-size: 15px;
 font-weight: 600;
 letter-spacing: 0.03em;
 margin-right: 20px;
}

.wsWrap dl dt span {
 display: flex;
 width: fit-content;
 padding: 3px 5px;
 justify-content: center;
 align-items: center;
 border-radius: 3px;
 background-color: #A0A4A6;
 white-space: nowrap;
 color: #fff;
 text-align: center;
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.03em;
 margin-left: 5px;
}

.wsWrap dl dt span.indis {
 background-color: #FF7557;
}

.wsWrap dl dd {

 text-align: left;
 flex: 1;
}

.wsWrap input:not([type=checkbox]),
.wsWrap textarea,
.wsWrap from select {
 padding: 8px 15px;
 border: 1px solid rgb(205, 205, 205);
 border-radius: 5px;
 font-size: 16px;
 width: 100%;
 color: var(--black);
}

.wsWrap input::placeholder,
.wsWrap textarea::placeholder,
.wsWrap select.is-placeholder {
 color: rgba(0, 0, 0, 0.247);
 font-size: 14px;
}



.wsWrap select {
 padding: 8px 15px;
 border: 1px solid rgb(205, 205, 205);
 /* background-color: #f1f1f1; */
 border-radius: 5px;
 appearance: auto;
 width: 100%;
 color: var(--black);
}

.wsWrap .custom-select {
 position: relative;
}

.wsWrap .custom-select select {
 appearance: none;
}

.wsWrap .custom-select::after {
 content: "";
 width: 0.8em;
 height: 0.8em;
 border-right: 1px solid rgba(0, 0, 0, 0.3);
 border-top: 1px solid rgba(0, 0, 0, 0.3);
 transform: translateY(-50%) rotate(135deg);
 transform-origin: center;
 top: 5px;
 bottom: 0;
 right: 1em;
 margin: auto;
 display: block;
 position: absolute;
}

.wsWrap .checkboxwrap {
 width: 100%;
 display: flex;
 justify-content: flex-start;
 align-items: center;
}

dd.privacy p {
 font-size: 14px;
 font-weight: 400;
 letter-spacing: 0.03em;
}

.ex {
 color: #00CC99 !important;
}

dd.privacy p.ex {
 font-size: 11px;
}

.underline {
 text-decoration: underline;
}

.wsWrap .checkboxwrap p.privacy_p {
 font-weight: 600;
 margin-left: 0.5em;
 margin-block: 0.8em;
 color: var(--black);
}





.wsWrapBt.innerWrap {
 margin-top: 3rem;
 margin-bottom: 1rem;
}

.wsWrapBt ul {
 margin: 0;
 padding: 0;
}

.wsWrapBt ul li {
 list-style-type: none;
}

.wsWrapBt ul li a {
 margin: 0 auto;
 width: 345px;
 font-size: 20px;
 font-weight: 600;
 background-color: rgba(0, 204, 153, 0.5);
 text-align: center;
 line-height: 1;
 color: white;
 border-radius: 5px;
 padding-top: 10px;
 padding-bottom: 12px;
 display: block;
 text-decoration: none;
 pointer-events: none;
}

.ok .wsWrapBt ul li a {
 pointer-events: all;
 background-color: rgba(0, 204, 153, 1);
}

p.error {
 margin-bottom: 3em;
 color: #FF7557;
 font-size: 14px;
 font-weight: 600;
 display: none;
}

.validation p.error {
 display: block;
}


/* バリデーション */
/* NGなら赤くする */
.validation input:required:invalid:not([type="checkbox"]),
.validation textarea:required:invalid,
.validation select:required:invalid {
 border: #FF7557 1px solid;
}


/* OKなら、その他のテキストボックス以外を緑にする */
form input:valid:not(:last-child) {
 /* border: seagreen 2px solid; */
}

form .invalid2 {
 display: none;
}

.validation form .invalid2 {
 display: block;
 margin-bottom: 0;
}

p.catch {
 font-size: 200%;
}

.thanks {
 margin-bottom: 6rem;
}

.wsWrapBt p {
 text-align: center;

 margin-bottom: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.validation .wsWrapBt p {
 color: red;
}

.wsWrapBt input[type=checkbox] {
 width: 16px;
 height: 16px;
}

@media (max-width:767px) {
 .contact_block {
  padding: 0 !important;
 }

 #mailform {
  padding: 0 !important;
 }


 .wsWrap dl {
  display: block;
  padding-bottom: 30px;
 }

 .contact_check .wsWrap dl {
  padding-bottom: 20px;
 }

 .wsWrap dl dt,
 .wsWrap dl dd {
  width: 100%;
  text-align: left;
 }

 .wsWrap dl dt {
  margin-bottom: 0.5em;

 }

 .wsWrapBt.innerWrap {
  margin-top: 40px;
  margin-bottom: 0;
 }


 .wsWrap .checkboxwrap p.privacy_p {
  font-size: 14px;
 }

 p.ex {
  font-size: 11px;
 }
}

.checkboxwrap input[type="checkbox"] {
 cursor: pointer;
 position: relative;
 background: none;
 border: none;
 border-radius: 0;
 outline: none;
 appearance: none !important;
 display: block;
 position: relative;
 padding-left: 30px;
}


.checkboxwrap input[type="checkbox"]::before {
 background-color: transparent;
 border-radius: 0%;
 border: 1px solid #666464 !important;
 content: "";
 display: block;
 width: 20px !important;
 height: 20px !important;
 transform: translateY(-50%);
 position: absolute;
 top: 50%;
 left: 0;
 border-radius: 5px;
}

.checkboxwrap input[type="checkbox"]::after {
 border-bottom: 4px solid var(--black);
 border-left: 4px solid var(--black);
 opacity: 0;
 height: 12px;
 width: 18px;
 transform: rotate(-45deg);
 position: absolute;
 top: -10px;
 left: 0px;
 content: "";
}

.validation.off .checkboxwrap input[type="checkbox"]::after {
 opacity: 0;
}

.checkboxwrap input[type=checkbox]:checked::after {
 opacity: 1;
}

.validation.off .checkboxwrap input[type="checkbox"]::before {
 border: 1px solid #FF7557 !important;
}

p.privacy_p label {
 font-weight: 600;
 font-size: 14px;
}

.validation.off p.privacy_p label {
 color: #FF7557;
}

.sendwrap {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.wsWrapBt button {
 width: 345px;
 font-size: 20px;
 font-weight: 600;
 background-color: rgba(0, 204, 153, 1);
 text-align: center;
 line-height: 1;
 color: white;
 border-radius: 5px;
 padding-top: 10px;
 padding-bottom: 12px;
 display: block;
 text-decoration: none;
}

.wsWrapBt .btn-back {
 background-color: #D9D9D9;
}

.checkwrap button {
 margin-inline: auto;
}

.contact_check #mailform .innerWrap:first-of-type {
 border: 1px solid rgba(0, 0, 0, 0.3);
 border-radius: 5px;
 margin-top: 50px;
 padding: 75px;
}

.contact_top #mailform .innerWrap:first-of-type {
 margin-top: 50px;
}

button {
 transition: 0.3s;
}

button:hover {
 opacity: 0.8;
}

.checkwrap button {
 background-color: rgba(0, 204, 153, 0.5);
 pointer-events: none;
 margin-inline: auto;
}

.ok .checkwrap button {
 pointer-events: all;
 background-color: rgba(0, 204, 153, 1);
}

a.back-realestate {
 margin: 0 auto;
 width: min(345px, 100%);
 font-size: 18px;
 font-weight: 600;
 background-color: #00CC99;
 text-align: center;
 line-height: 1;
 color: white;
 border-radius: 5px;
 padding-top: 10px;
 padding-bottom: 12px;
 display: block;
 text-decoration: none;
 transition: 0.3s;
}

.contact_thanks .lead-wrap {
 text-align: center;
}

.contact_thanks .lead-wrap h2 {
 display: block;
}

a.back-realestate:hover {
 opacity: 0.8;
}

@media (max-width:767px) {
 .contact_check #mailform .innerWrap:first-of-type {
  margin-top: 40px;
  padding: 25px;
 }

 .wsWrap input:not([type=checkbox]),
 .wsWrap textarea,
 .wsWrap from select {
  padding: 15px 15px;
 }

 .sendwrap {
  display: block;
 }

 .sendwrap button {
  width: 100%;
 }

 .sendwrap button:first-child {
  margin-bottom: 30px;
 }
}