/* =========================================================
   nanoTRACK contact page
   Extends style.css — reuses its CSS variables, .container,
   .reveal-up etc. Only page-specific components live here.
   Base styles are written for PC and overridden inside a
   single `@media (max-width: 768px)` block for SP, matching
   the convention used in style.css.

   NOTE: The actual contact form was not part of the Figma
   design (the "contact" layer was empty). Per the client's
   instruction, this page only provides an empty placeholder
   box (.contact-form-box) — the real form markup/JS will be
   inserted later by the client's own team.
========================================================= */

/* ---------- page hero (title) ---------- */

.page-hero {
  padding: calc(var(--header-h) + clamp(32px, 6vw, 74px)) 0 clamp(32px, 5vw, 56px);
}

.page-hero__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 0.4rem + 6.5vw, 6rem); /* 28px～96px */
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--text);
}

.page-hero__lead {
  margin: clamp(12px, 2vw, 20px) 0 0;
  font-size: var(--fs-18);
  font-weight: 500;
}

/* ---------- breadcrumb ---------- */

.breadcrumb {
  padding: clamp(16px, 3vw, 36px) 0;
}

.breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: var(--fs-18);
  font-weight: 500;
}

.breadcrumb__inner a,
.breadcrumb__inner .breadcrumb__sep {
  white-space: nowrap;
}

.breadcrumb__inner a {
  text-decoration: underline;
}

.breadcrumb__sep {
  opacity: 0.6;
}

/* ---------- contact form placeholder ---------- */

.contact-form-section {
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px);
}

.contact-form-box {
  background: rgba(255, 255, 255, 0.8);
  min-height: clamp(320px, 40vw, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
}

.contact-form-box__placeholder {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.4);
}

/* ---------- confirm screen buttons (MailformPro) ---------- */

#mfp_button_send,
#mfp_button_cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 32px;
  margin: 0 8px;
  background: var(--black);
  color: #fff;
  border: none;
  border-radius: 0;
  text-shadow: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-18);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#mfp_button_send:hover,
#mfp_button_cancel:hover {
  opacity: 0.85;
  box-shadow: none;
}

/* ---------- thanks (page-contact-thanks.php only) ---------- */

.contact-form-box--thanks {
  align-items: flex-start;
  padding-top: clamp(32px, 6vw, 64px);
}

.mfp_thanks {
  width: 100%;
  text-align: center;
}

#mfp_thanks {
  font-size: var(--fs-24);
  font-weight: 500;
}

#mfp_thanks strong {
  font-size: var(--fs-36);
  font-weight: 700;
  color: var(--green);
}

.mfp-thanks__back {
  margin: clamp(24px, 4vw, 40px) 0 0;
  text-align: center;
}

.mfp-thanks__back-link {
  display: inline-block;
  font-size: var(--fs-18);
  font-weight: 500;
  background-image: linear-gradient(to right, var(--green) 50%, var(--text) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.4s ease;
}

.mfp-thanks__back-link:hover {
  background-position: 0 0;
}

@supports not (background-clip: text) {
  .mfp-thanks__back-link {
    background: none;
    color: var(--text);
    -webkit-text-fill-color: unset;
  }

  .mfp-thanks__back-link:hover {
    color: var(--green);
  }
}

/* ---------- form field width (MailformPro) ---------- */
/* MailformPro's own text inputs have no CSS width at all — they rely on
   the HTML `size="60"` attribute, which is a browser/font-dependent
   legacy value that only applies when nothing in CSS targets the
   element's width (per MDN: "If CSS targets the element with properties
   impacting the width, CSS takes precedence"). That's why these inputs
   never lined up with the checkbox rows below, no matter how the
   checkbox rows themselves were sized. Giving both the same explicit
   `width: min(100%, 560px)` — MDN's own documented pattern for
   responsive form control sizing — makes them match at every viewport
   width with no media query needed. */
#mailformpro dd.mfp input[type="text"],
#mailformpro dd.mfp input[type="email"] {
  width: min(100%, 560px) !important;
  box-sizing: border-box;
}

/* ---------- checkbox rows (MailformPro) ---------- */
/* MailformPro's own CSS sets `label { white-space: nowrap; display:
   inline-block }`, which pushes long checkbox labels (お問い合わせの種類
   etc.) off the right edge instead of wrapping. display:block and
   position:absolute overrides (tried first) fought MailformPro's own
   inline layout and produced various broken results, so the checkbox
   and text are split into explicit flex items instead. `min-width: 0`
   on the text item is what stops CJK text (no spaces to break on) from
   collapsing to one character per line, which is what happens to an
   unconstrained flex item by default (CSS Flexbox §4.5); `overflow-wrap:
   break-word` is MDN's own paired recommendation for the same case.
   Deliberately NOT scoped to a mobile media query: the PC layout's dt
   column (270px, floated) leaves dd too narrow for these long sentence
   labels at plenty of in-between widths (confirmed overflowing again at
   800px wide), not just below the 768px SP breakpoint. This rule stays
   a single line when there's room and only wraps when there isn't, so
   it's safe at every width instead of guessing a threshold. Uses the
   same width: min(100%, 560px) as the text inputs above so the two
   line up exactly instead of just looking similar. */
#mailformpro dd.mfp label {
  display: flex !important;
  align-items: center;
  white-space: normal !important;
  width: min(100%, 560px);
  box-sizing: border-box;
  margin: 6px 0;
}

#mailformpro dd.mfp label input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0 6px 0 0;
}

#mailformpro dd.mfp label .mfp-check-text {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  line-height: 1.5; /* dd.mfp's own line-height is 3em on PC and only
                        drops to 1.5em inside MailformPro's own
                        @media(max-width:800px) block, so a row that
                        wraps above 800px inherited the loose 3em value.
                        Set explicitly instead of depending on that
                        breakpoint. */
  overflow-wrap: break-word;
}

/* ---------- SP ---------- */

@media (max-width: 768px) {
  .page-hero {
    padding: calc(var(--header-h) + 32px) 0 32px;
  }

  .contact-form-section {
    padding: 32px 0 64px;
  }
}