.contact-page {
  color: #1e1e1e;
  font-family: Inter, "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-synthesis: none;
}

.contact-page .site-header{position:relative;background:#fff;color:#111}
.contact-page .header-logo{mix-blend-mode:normal}
.contact-page .header-logo img{display:block;width:264px;height:29px;object-fit:fill;filter:none;opacity:1}
.contact-page .global-nav>a:not(.nav-doc):not(.nav-contact){color:#070505}

.contact-page * { box-sizing: border-box; }

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

body.contact-page {
  margin: 0;
  background: #fff;
}

.contact-page button, .contact-page input, .contact-page select, .contact-page textarea { font: inherit; }

.contact-page .page-shell {
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 38px 50px 32px;
  display: flex;
  flex-direction: column;
}

.contact-page .brand {
  display: block;
  width: 259px;
  height: 28px;
}

.contact-page .brand img { display: block; width: 100%; height: 100%; }

.contact-page .contact-grid {
  width: 860px;
  margin: 49px auto 0;
  display: grid;
  grid-template-columns: 385px 388px;
  gap: 90px;
}

.contact-page h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: -0.022em;
  white-space: nowrap;
}

.contact-page .lead {
  margin: -4px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.019em;
}

.contact-page .description {
  margin-top: 38px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.625;
  letter-spacing: 0.05em;
}

.contact-page .description p { margin: 0 0 20px; }

.contact-page .contact-form { margin-top: -15px; }

.contact-page .field { margin-bottom: 16px; }

.contact-page .field label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.05em;
}

.contact-page .required {
  display: inline-grid;
  place-items: center;
  min-width: 41px;
  height: 22px;
  border: 1px solid #c1001a;
  border-radius: 3px;
  color: #c1001a;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

.contact-page input, .contact-page select, .contact-page textarea {
  display: block;
  width: 100%;
  border: 1px solid #5c5c5c;
  border-radius: 0;
  background: #fdfdfd;
  color: #1e1e1e;
  padding: 11px 19px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.contact-page input, .contact-page select { height: 51px; }

.contact-page select {
  appearance: none;
  background: #1e1e1e;
  color: #d3d3d3;
}

.contact-page textarea {
  height: 252px;
  resize: vertical;
}

.contact-page ::placeholder { color: #d3d3d3; opacity: 1; }

.contact-page input:focus, .contact-page select:focus, .contact-page textarea:focus {
  border-color: #1e1e1e;
  box-shadow: 0 0 0 2px rgba(30, 30, 30, .15);
}

.contact-page .field.invalid input, .contact-page .field.invalid select, .contact-page .field.invalid textarea { border-color: #c1001a; }

.contact-page .error {
  display: none;
  margin-top: 4px;
  color: #c1001a;
  font-size: 12px;
}

.contact-page .field.invalid .error { display: block; }

.contact-page .submit-button {
  width: 384px;
  height: 88px;
  margin: 10px 0 0 3px;
  padding: 0 18px;
  border: 0;
  border-radius: 5px;
  background: #ffe500;
  color: #000;
  display: grid;
  grid-template-columns: 20px 1fr 13px;
  align-items: center;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}

.contact-page .submit-button span { font-size: 22px; font-weight: 600; }
.contact-page .submit-button img { display: block; width: 100%; max-height: 20px; }
.contact-page .submit-button:hover { filter: brightness(.96); transform: translateY(-1px); }
.contact-page .submit-button:active { transform: translateY(0); }
.contact-page .submit-button:focus-visible { outline: 3px solid #1e1e1e; outline-offset: 3px; }
.contact-page .submit-button:disabled { cursor: wait; opacity: .7; }
.contact-page .submit-error { margin: 14px 0 0; color: #c1001a; font-size: 14px; font-weight: 700; line-height: 1.6; }

.contact-page .complete-view {
  width: 850px;
  flex: 1;
  margin: 49px auto 0;
}

.contact-page .complete-message {
  margin-top: 60px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.625;
  letter-spacing: .05em;
}

.contact-page .complete-message p { margin: 0 0 20px; }



@media (max-width: 800px) {
  .contact-page .site-header{position:relative}
  .contact-page .header-logo,.contact-page .header-logo img{width:190px;height:21px}
  .contact-page .menu-button{color:#111}
  .contact-page .menu-button span{background:#111}
  .contact-page .global-nav>a:not(.nav-doc):not(.nav-contact){color:#fff}
  .contact-page .page-shell { padding: 24px 20px 28px; }
  .contact-page .brand { width: 210px; height: auto; }
  .contact-page .contact-grid, .contact-page .complete-view { width: 100%; margin-top: 45px; }
  .contact-page .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .contact-page h1 { font-size: clamp(24px, 7.4vw, 36px); }
  .contact-page .description { margin-top: 32px; }
  .contact-page .contact-form { margin-top: 0; }
  .contact-page .submit-button { width: 100%; margin-left: 0; }
  .contact-page .complete-message { margin-top: 48px; }
  
}