@charset "UTF-8";
/* =======================================
contact
 ======================================= */
#contact {
}
#contact .title {
  line-height: 1.5;
}

.contact-wrap {
  padding: 0px 0px;
  background-color: #fff;
}
/*==================================================
 入力フィールド
================================================== */

select,
textarea,
input[type="tel"],
input[type="text"],
input[type="email"],
input[type="url"] {
  font-family: "Noto Sans JP", sans-serif;
  max-width: 100%;
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(150, 150, 150, 0.1) inset;
  box-sizing: border-box;
}
::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  font-family: "Noto Sans JP", sans-serif;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-family: "Noto Sans JP", sans-serif;
}
::placeholder {
  /* Others */
  font-family: "Noto Sans JP", sans-serif;
}
.length-full {
  width: 100%;
}
.length-half {
  width: 45%;
}
textarea {
  width: 100%;
  min-height: 140px;
}

/* ボタン
-------------------------------------------------- */
.contact-submits-wrap {
  margin-top: var(--h3-fz);
  display: flex;
  justify-content: space-around;
}

#contact button,
input[type="button"],
input[type="submit"] {
  display: block;
  width: fit-content;
  background-color: var(--clr-main);
  padding: 3vw 5vw;
  border-radius: 10vw;
  color: var(--clr-white);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--bold);
  letter-spacing: 0.08em;
  font-size: 4vw;
  transition: 0.3s;
  box-sizing: border-box;
  border: var(--clr-main) 1px solid;
  box-shadow: 0px 4px 12px rgba(46, 46, 46, 0.2);

}
input[type="submit"] {
  background-color: #ff544b;
  border: #ff544b 1px solid;
}

#contact button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  opacity: 1;
  color: var(--clr-main);
  background-color: var(--clr-white);
  cursor: pointer;
}

input[type="submit"]:hover {
  color: #ff544b;
  background-color: var(--clr-white);
}

input[type="button"][disabled],
input[type="submit"][disabled] {
  opacity: 0.7;
  pointer-events: none;
}

/* チェックボックス・ラジオボタン
-------------------------------------------------- */

input[type="radio"],
input[type="checkbox"] {
  display: inline-block;
  margin-right: 6px;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  line-height: 30px;
  cursor: pointer;
  line-height: 1.5;
}

input[type="radio"],
input[type="checkbox"] {
  display: none;
  margin: 0;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  margin-bottom: 5px;
  padding: 0 0 0 30px;
}

input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: #fff;
}

input[type="radio"] + label::before {
  border: 2px solid #ccc;
  border-radius: 30px;
}

input[type="checkbox"] + label::before {
  border: 2px solid #ccc;
}

input[type="radio"]:checked + label::after,
input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  top: 50%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}

input[type="radio"]:checked + label::after {
  left: 5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #e74c3c;
  border-radius: 8px;
}

input[type="checkbox"]:checked + label::after {
  left: 3px;
  width: 16px;
  height: 8px;
  margin-top: -8px;
  border-left: 3px solid #e74c3c;
  border-bottom: 3px solid #e74c3c;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* reCAPTCHA
-------------------------------------------------- */
.contact-recaptcha-wrap {
  text-align: center;
  margin: 0 auto;
  display: table;
}
.contact-recaptcha-wrap .g-recaptcha {
}

/* 個別フォームスタイル
-------------------------------------------------- */
.contact-hed {
  text-align: center;
  margin-bottom: var(--h6-fz);
}
.contact-hed .chushaku {
  margin-top: 8px;
  display: block;
  font-size: var(--h6-fz);
  font-weight: var(--bold);
  color: var(--clr-main);
}
.form_flow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: var(--h3-fz);
  padding-bottom: var(--h3-fz);
  border-bottom: 1px solid var(--clr-main);
}
.form_flow li:not(.form_flow_t) {
  width: 3vw;
  text-align: center;
}
.form_flow li:not(.form_flow_t) img {
  width: 100%;
}
.form_flow_t {
  padding: 4px 0;
  text-align: center;
  color: var(--clr-main);
  width: 20vw;
  border: 1px solid var(--clr-main);
  font-size: 3.5vw;
  font-weight: var(--bold);
}
.form_flow_t.active {
  background-color: var(--clr-main);
  color: #fff;
}

/* テーブルスタイル */
.contact-form-table {
  margin-bottom: var(--h3-fz);
  /* padding-bottom: var(--h3-fz);
  border-bottom: 1px solid var(--clr-main); */
}
.contact-form_content .agree{
  line-height: 1.5;
}

.contact-form_content {
  display: block;
  margin-bottom: 16px;
}
.contact-form_content .ttl {
  font-weight: var(--bold);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-1);

  margin-bottom: 8px;
}

.contact-form_content .ttl label,
.contact-form_content .ttl span {
  display: block;
  width: fit-content;
}

.contact-form_content .cont {
}
.contact-form_content .cont.cont-survey {
    margin-top: var(--sp-5);
  padding: var(--sp-3);
  border-top: 1px solid var(--clr-black);
  border-bottom: 1px solid var(--clr-black);
}
.contact-form_content .cont a {
  color: var(--clr-main);
  font-weight: var(--bold);
  text-decoration: underline;
}

.contact-form_content .cont-div_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-form_content .cont-div {
  width: 100%;
  margin-bottom: 8px;
}
.contact-form_content .cont-div .cont-div_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.contact-form_content .cont-div .cont-div_item span {
  display: block;
  margin-right: 8px;
}
.contact-form_content .cont-div .cont-div_item span::after {
  content: "：";
}

/* エラーテキスト */
.error-text {
  color: #ff544b;
  margin-bottom: 5px;
  font-weight: var(--bold);
}

.sec-error-text {
  line-height: 2;
  text-align: center;
}
.sec-error-link {
  margin-top: 2em;
}

/* 必須マーク */
.required-mark {
  background-color: #ff544b;
  color: #fff;
  font-size: var(--small-fz);
  font-weight: var(--regular);
  padding: 2px 5px;
  margin-right: 0.5em;
  border-radius: var(--sp-05);
}
.optinal-mark {
  background-color: #b1b1b1;
  color: #fff;
  font-size: var(--small-fz);
  padding: 2px 5px;
  margin-right: 0.5em;
}

/* プライバシーポリシー */
.contact-privacy-wrap {
  margin-top: var(--h3-fz);
}

.contact-privacy-wrap .ttl {
  justify-content: center;
  margin-bottom: var(--h4-fz);
}
.contact-privacy-wrap .cont {
  text-align: center;
}

/*==================================================
 確認画面
================================================== */
#contact .cmn_table tr th {
  width: 45%;
}
#contact .cmn_table tr td {
  width: 55%;
}
.submit-text {
  display: block;
  width: fit-content;
  margin: 0 auto;
  margin-top: var(--sp-2);
  color: #ff544b;
  font-size: var(--small-fz);
  font-weight: var(--bold);
}