.contact-page { color: var(--ink, #434e60); }
.contact-hero { padding: 20px 20px 0; }
.contact-hero__inner { min-height: 484px; display: flex; align-items: center; justify-content: space-between; padding: 0 80px; position: relative; border-radius: 16px; isolation: isolate; overflow: hidden; }
.contact-hero__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.contact-hero__illustration { flex: 0 1 480px; width: 480px; height: 320px; object-fit: contain; min-width: 0; }
.contact-hero__heading { text-align: right; flex-shrink: 0; }
.contact-hero__heading h1 { margin: 0; font: 600 80px/1 Inter, sans-serif; letter-spacing: .04em; background: linear-gradient(90deg, #00a5dd, #54c7ee); color: transparent; -webkit-background-clip: text; background-clip: text; }
.contact-hero__heading p { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin: 16px 0 0; font-size: 20px; font-weight: 600; }
.contact-hero__heading p img { width: 32px; height: 1px; }
.contact-content { padding: 200px 80px 208px; }
.contact-content__inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; }
.contact-introduction { font-weight: 500; font-size: 16px; line-height: 2.2; margin: 0; }
.contact-form { display: flex; flex-direction: column; gap: 40px; margin: 0; }
.contact-form__fields { display: flex; flex-direction: column; gap: 24px; }
.contact-field { display: flex; flex-direction: column; gap: 8px; }
.contact-field label { display: flex; gap: 8px; font-size: 16px; line-height: 2.2; font-weight: 500; }
.contact-field--furigana label { line-height: 1.7; }
.contact-field input, .contact-field select, .contact-field textarea { box-sizing: border-box; width: 100%; height: 40px; border: 0; border-radius: 0; padding: 6px 12px; background: var(--pale, #e2f1f6); font: inherit; color: inherit; letter-spacing: inherit; }
.contact-field textarea { height: 120px; min-height: 120px; resize: vertical; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: 2px solid var(--blue, #00a5dd); outline-offset: 2px; }
.contact-field__select { position: relative; }
.contact-field__select select { appearance: none; padding-right: 48px; cursor: pointer; }
.contact-field__select img { position: absolute; right: 21px; top: 14px; width: 7px; height: 12px; transform: rotate(90deg); pointer-events: none; }
.contact-form__action { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.contact-consent { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; line-height: 2.2; }
.contact-consent input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue, #00a5dd); flex-shrink: 0; }
.contact-consent a { color: #087a9e; text-decoration: underline; text-underline-offset: 4px; }
.contact-submit { box-sizing: border-box; width: 440px; max-width: 100%; height: 120px; padding: 40px; border: 0; border-radius: 8px; background: linear-gradient(90deg, #00a5dd, #54c7ee); color: #fff; font: inherit; font-size: 24px; line-height: 1.7; font-weight: 600; letter-spacing: inherit; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; transition: filter .2s ease; }
.contact-submit:hover { filter: brightness(1.06); }
.contact-submit img { width: 40px; height: 40px; flex-shrink: 0; }
.contact-review { width: min(700px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 16px; color: var(--ink, #434e60); box-shadow: 0 24px 100px #122b3f38; }
.contact-review::backdrop { background: #16344db3; }
.contact-review__inner { padding: 40px; }
.contact-review h2 { margin: 0 0 20px; font-size: 24px; }
.contact-review p { margin: 0 0 28px; line-height: 1.8; }
.contact-review__values { margin: 0 0 32px; display: grid; grid-template-columns: 160px 1fr; gap: 18px; font-size: 15px; }
.contact-review__values dt { font-weight: 600; }
.contact-review__values dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.contact-review__close { display: block; margin: 0 auto; font: inherit; padding: 12px 32px; background: var(--blue, #00a5dd); border: 0; border-radius: 5px; color: white; cursor: pointer; }
@media (max-width: 1100px) {
  .contact-hero__inner { padding: 0 40px; min-height: 390px; }
  .contact-hero__illustration { width: 43%; height: auto; aspect-ratio: 3/2; flex-basis: 43%; }
  .contact-hero__heading h1 { font-size: clamp(42px, 7vw, 72px); }
  .contact-content { padding: 120px 40px 128px; }
}
@media (max-width: 600px) {
  .contact-hero { padding: 12px 12px 0; }
  .contact-hero__inner { min-height: 300px; padding: 28px 24px; flex-direction: column-reverse; align-items: stretch; justify-content: center; gap: 12px; }
  .contact-hero__illustration { width: 240px; max-width: 80%; height: 160px; flex-basis: auto; align-self: flex-start; }
  .contact-hero__heading h1 { font-size: clamp(35px, 10vw, 46px); }
  .contact-hero__heading p { margin-top: 8px; font-size: 18px; gap: 12px; }
  .contact-content { padding: 80px 24px 88px; }
  .contact-content__inner { gap: 48px; }
  .contact-introduction { font-size: 16px; line-height: 2.1; overflow-wrap: anywhere; }
  .contact-form__fields { gap: 22px; }
  .contact-field label { font-size: 17px; flex-wrap: wrap; }
  .contact-field input, .contact-field select, .contact-field textarea { min-width: 0; font-size: 16px; }
  .contact-field input, .contact-field select { height: 50px; }
  .contact-field textarea { min-height: 160px; }
  .contact-field__select img { top: 19px; }
  .contact-form__action { gap: 16px; }
  .contact-consent { font-size: 15px; line-height: 1.8; align-items: flex-start; }
  .contact-consent input { width: 18px; height: 18px; margin-top: 4px; }
  .contact-consent span { min-width: 0; overflow-wrap: anywhere; }
  .contact-submit { height: auto; min-height: 92px; padding: 24px 28px; font-size: 24px; }
  .contact-review__inner { padding: 28px 24px; }
  .contact-review p { font-size: 16px; }
  .contact-review__values { grid-template-columns: 1fr; gap: 8px; font-size: 16px; }
  .contact-review__values dd { margin-bottom: 14px; }
}

.contact-recruit-route{margin-top:20px!important;padding-top:20px;border-top:1px solid #d7e9f0;font-size:15px}
.contact-recruit-route a{color:#007ca7;text-decoration:underline;text-underline-offset:4px;font-weight:600}
.contact-preview-note{margin-top:16px!important;font-size:13px;color:#637789;line-height:1.8}
.contact-submit:disabled{opacity:.55}
@media(max-width:600px){.contact-submit{font-size:clamp(18px,5vw,24px);letter-spacing:.02em;gap:16px}.contact-submit img{width:30px;height:30px}}

/* 送信できるとき（html[data-forms=live]）だけ確認画面に出る部品 */
.form-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-review__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.contact-review__values[hidden]{display:none}
.contact-review h2,.contact-review p{word-break:keep-all;overflow-wrap:anywhere}
/* 長い入力でも送信ボタンが常に見えるよう、確認画面の下に貼り付ける */
.contact-review:not(.is-sent) .contact-review__actions{position:sticky;bottom:0;z-index:1;padding:14px 0 6px;background:#fff;box-shadow:0 -10px 12px -10px #122b3f40}
.contact-review__actions .contact-review__close{margin:0;min-height:48px}
.contact-review__send{min-height:48px;padding:12px 32px;border:0;border-radius:5px;background:linear-gradient(90deg,#00a5dd,#54c7ee);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.contact-review:not(.is-sent) .contact-review__actions .contact-review__close{background:#fff;color:#007ca7;box-shadow:inset 0 0 0 1px currentColor}
.contact-review__send:disabled,.contact-review__actions .contact-review__close:disabled{opacity:.6;cursor:progress}
.contact-review p.contact-review__status{margin:16px 0 0;font-size:14px;text-align:center}
.contact-review p.contact-review__status:empty{display:none}
.contact-review__status.is-error{color:#b42318}
@media(max-width:600px){.contact-review__actions{flex-direction:column;align-items:stretch}.contact-review__actions button{width:100%}}