/* ============================================================
   MIRAI お問い合わせフォーム
   参照 .contact-layout{max-width:730px;margin:65px auto;padding:0 25px}
        .contact-layout label{display:block;margin:22px 0 8px}
        .contact-layout input,select,textarea{width:100%;padding:14px;border:1px solid #a4c5d7;border-radius:0;background:white}
        .contact-layout textarea{min-height:150px}
        .contact-options{display:grid;gap:20px;margin-bottom:35px}
   ============================================================ */
.mj-contact {
  background-color: rgb(var(--color-background));
}

.mj-contact__layout {
  max-width: 730px;
  margin-inline: auto;
  padding-inline: 25px;
}

.mj-contact__heading {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.8;
  margin-block: 0 16px;
}

.mj-contact__body {
  margin-block-end: 10px;
}

.mj-contact__body > :last-child {
  margin-block-end: 0;
}

/* 参照 .contact-options a{border:1px solid var(--line);padding:25px}
        strong{font:26px Georgia;display:block;margin:10px 0}
        small,span{display:block;font-size:14px;color:var(--muted)} */
.mj-contact__options {
  display: grid;
  gap: 20px;
  margin-block-end: 35px;
}

.mj-contact__option {
  border: 1px solid var(--mj-line);
  padding: 25px;
  color: inherit;
  text-decoration: none;
  display: block;
}

.mj-contact__option:hover {
  background: var(--mj-mist);
}

.mj-contact__option small,
.mj-contact__option span {
  display: block;
  font-size: 14px;
  color: var(--mj-muted);
}

.mj-contact__option strong {
  display: block;
  font-family: var(--mj-font-figure);
  font-size: 26px;
  font-weight: 400;
  margin-block: 10px;
}

/* 入力欄 */
.mj-contact label {
  display: block;
  margin-block: 22px 8px;
}

.mj-contact input[type="text"],
.mj-contact input[type="email"],
.mj-contact input[type="tel"],
.mj-contact select,
.mj-contact textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #a4c5d7;
  border-radius: 0;
  background: #fff;
  color: var(--mj-ink);
  font: inherit;
}

.mj-contact textarea {
  min-height: 150px;
}

.mj-contact__required {
  color: #934438;
  margin-inline-start: 6px;
  font-size: 13px;
}

/* 参照 .check{display:flex;gap:12px;align-items:baseline;font-size:14px} .check input{width:auto} */
.mj-contact__check {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  margin-block-start: 26px;
}

.mj-contact__check input[type="checkbox"] {
  width: auto;
  flex: none;
}

.mj-contact__check a {
  text-decoration: underline;
  color: var(--mj-brand);
}

.mj-contact__check p {
  margin: 0;
  display: inline;
}

.mj-contact__submit {
  margin-block-start: 28px;
}

/* 参照 .form-status{padding:25px;background:var(--mist);margin-top:25px} */
.mj-contact__status {
  padding: 25px;
  background: var(--mj-mist);
  margin-block: 0 25px;
}

.mj-contact__status--error {
  background: #fff3f3;
  color: #982746;
}

.mj-contact__status > :last-child {
  margin-block-end: 0;
}

.mj-contact__note {
  margin-block-start: 25px;
  font-size: 12px;
  color: var(--mj-muted);
}

.mj-contact__note > :last-child {
  margin-block-end: 0;
}

.mj-contact [hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .mj-contact__option strong { font-size: 23px; }
}
