/* =====================================================================
   Contact page - section styles.
   Shared chrome (reset, header, breadcrumb, lead, footer) lives in
   assets/css/main.css. This file holds only the form-step indicator,
   the contact form, and the .ct-* form helpers.
   ===================================================================== */

/* ---- form helpers (from inline <style>) ---- */
.ct-field { font-family: 'Noto Sans JP', system-ui, sans-serif; }
    .ct-input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid #E3E7EE; border-radius: 6px; background: #fff;
      font-family: 'Noto Sans JP', system-ui, sans-serif; font-size: 15px; color: #1A1A1A; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
    .ct-input:focus { border-color: #0C2D5E; box-shadow: 0 0 0 3px #F4F7FC; }
    .ct-input::placeholder { color: #9AA3AF; }
    textarea.ct-input { height: auto; padding: 14px 16px; line-height: 1.7; resize: vertical; }
    select.ct-input { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 10 6' fill='none' stroke='%23C8102E' stroke-width='1.8'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
    .ct-btn-primary { transition: background .18s ease, transform .15s ease; }
    .ct-btn-primary:hover { background: #061629; }
    .ct-btn-ghost { transition: border-color .15s ease, color .15s ease; }
    .ct-btn-ghost:hover { border-color: #0C2D5E; color: #0C2D5E; }

/* ---------- Form steps ---------- */

.steps__box {
  max-width: 820px;
  margin: 0px auto;
  padding: 32px 24px 0px;
}

.steps__box-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  flex-wrap: wrap;
}

/* A progress readout, not a control - it used to be a <button> with a pointer
   cursor and a title tooltip, which offered a click that led nowhere. */
.steps__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  padding: 0px;
  cursor: default;
}

.steps__label {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgb(12, 45, 94);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(12, 45, 94);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.steps__label-2 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgb(6, 22, 41);
  white-space: nowrap;
}

.steps__label-3 {
  width: 36px;
  height: 1px;
  background: rgb(227, 231, 238);
  margin: 0px 14px;
}

.steps__label-4 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgb(255, 255, 255);
  color: rgb(107, 114, 128);
  border: 1px solid rgb(227, 231, 238);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.steps__label-5 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgb(107, 114, 128);
  white-space: nowrap;
}

/* ---------- Contact form ---------- */

.form__box {
  background: rgb(255, 255, 255);
  padding-bottom: 64px;
}

.form__box-2 {
  max-width: 820px;
  margin: 0px auto;
  padding: 36px 24px 8px;
}

.form__box-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.form__label {
  width: 22px;
  height: 2px;
  background: rgb(200, 16, 46);
}

.form__heading {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: rgb(6, 22, 41);
  margin: 0px;
}

.form__box-4 {
  margin-bottom: 22px;
}

.form__label-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form__label-3 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: rgb(12, 45, 94);
}

.form__label-4 {
  color: rgb(200, 16, 46);
  font-size: 13px;
  font-weight: 700;
}

.form__select {
  color: #1A1A1A; /* a chosen value shows full-strength, not faded */
}
/* Only the "please choose..." placeholder (empty-value option) reads as faded -
   the moment a real option is selected the field text is solid. */
.form__select:has(option[value=""]:checked) {
  color: #9AA3AF;
}
.form__select option {
  color: #1A1A1A;
}

.form__box-5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}

.form__label-5 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: rgb(107, 114, 128);
}

.form__label-6 {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  margin-bottom: 18px;
}

.form__input {
  width: 18px;
  height: 18px;
  accent-color: rgb(12, 45, 94);
  cursor: pointer;
}

.form__label-7 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 13.5px;
  color: rgb(58, 58, 58);
}

.form__link {
  color: rgb(12, 45, 94);
  font-weight: 600;
}

.form__box-6 {
  height: 70px;
  width: 300px;
  max-width: 100%;
  border: 1px dashed rgb(227, 231, 238);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  color: rgb(107, 114, 128);
  background: rgb(248, 250, 252);
  margin-bottom: 26px;
}

.form__box-7 {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.form__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 6px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: initial;
  background: rgb(12, 45, 94); /* active by default; faded only while the form is invalid (below) */
  color: rgb(255, 255, 255);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Fade the primary submit only while a required field is still empty/invalid.
   `:has()` re-evaluates live as the user fills the form, so the button lights
   up the moment everything required is complete. */
.ct-form:has(:invalid) .form__btn {
  background: rgb(194, 201, 212);
  cursor: not-allowed;
}

.form__btn-2 {
  padding: 15px 26px;
  border-radius: 6px;
  border: 1px solid rgb(227, 231, 238);
  background: rgb(255, 255, 255);
  color: rgb(58, 58, 58);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.form__label-8 {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 12px;
  color: rgb(107, 114, 128);
  margin-left: auto;
}

.form__label-9 {
  color: rgb(200, 16, 46);
}

/* =====================================================================
   MOBILE / RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
  /* Paired fields stack - except the name, whose two halves are a few characters
     each and read as one question. Stacking that pair alone added a whole row to
     a form that is already a long scroll. */
  .form__box-5 { grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
  .form__box-5--name { grid-template-columns: 1fr 1fr; gap: 12px; }

  .form__box-4 { margin-bottom: 16px; }
  .form__label-2 { margin-bottom: 6px; }

  /* 16px is the floor: below it iOS zooms the page in when a field takes focus,
     and the form is left scrolled sideways. */
  .ct-input { font-size: 16px; }

  /* --- Form steps: keep the sequence on one line ---------------------
     Four numbered steps, their labels and three 36px connectors are wider than
     a phone, so the row wrapped - and a progress indicator that wraps stops
     reading as one run of steps. Tighten the parts instead of letting it break:
     smaller circles, shorter rules, smaller labels. */
  .steps__box { padding-left: 12px; padding-right: 12px; }
  .steps__box-2 { flex-wrap: nowrap; }
  .steps__btn { gap: 5px; min-width: 0; }
  .steps__label,
  .steps__label-4 {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .steps__label-2,
  .steps__label-5 { font-size: 10.5px; }
  .steps__label-3 {
    flex: 0 0 auto;
    width: 8px;
    margin: 0 5px;
  }
}

/* Narrowest phones: the labels are what break the line, so they go and the
   numbered circles carry the sequence on their own. The full label survives as
   each button's title, and as the heading of the step you are on. */
@media (max-width: 400px) {
  .steps__label-2,
  .steps__label-5 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .steps__label-3 { width: 14px; margin: 0 7px; }
}

/* ---- confirmation step (内容確認) - built by assets/js/contact.js ---- */
.ct-review { font-family: 'Noto Sans JP', system-ui, sans-serif; }
    .ct-review__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #0C2D5E; }
    .ct-review__note { margin: 0 0 24px; font-size: 14px; color: #5A6472; }
    .ct-review__list { display: grid; grid-template-columns: 200px 1fr; gap: 0; margin: 0 0 28px;
      border-top: 1px solid #E3E7EE; }
    .ct-review__label { display: flex; align-items: center; padding: 16px; margin: 0; font-size: 14px; font-weight: 600;
      color: #0C2D5E; background: #F4F7FC; border-bottom: 1px solid #E3E7EE; }
    .ct-review__value { display: flex; align-items: center; padding: 16px; margin: 0; font-size: 15px; color: #1A1A1A;
      border-bottom: 1px solid #E3E7EE; word-break: break-word; }
    .ct-review__value--email { color: #C8102E; font-weight: 600; }        /* email highlighted per spec */
    .ct-review__value--long { white-space: pre-wrap; align-items: flex-start; line-height: 1.7; }
    .ct-review__actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .ct-review__send { min-width: 220px; }

@media (max-width: 768px) {
  .ct-review__list { grid-template-columns: 1fr; }
  .ct-review__label { border-bottom: none; }
  .ct-review__send { width: 100%; }
}

/* ---- honeypot ----
   A field only a script will fill in. Kept out of the layout without
   display:none, which some bots read as "skip this one". */
.ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- outcome notices (完了 / エラー) ----
   Shown when the visitor comes back from a submission: the confirmation panel
   replaces the form, the error line sits above it. */
.ct-notice {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  padding: 20px 24px;
  margin: 0 0 24px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.9;
}
  .ct-notice p { margin: 0; }

.ct-notice--error {
  color: #A8232A;
  background: #FDF2F3;
  border: 1px solid #F3D3D6;
  font-weight: 600;
}

/* =====================================================================
   Thank-you page (page-thanks.php)
   The last step of the contact flow, so it reuses this file's chrome:
   the same .steps__* indicator, the same 820px .form__box-2 card, the
   same .form__btn / .form__btn-2 buttons. Only the pieces below are new.
   ===================================================================== */

/* The confirmation itself is centred - it is an announcement, not a form -
   while the list of what happens next stays left-aligned so it reads as steps. */
.thanks__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 8px auto 22px;
  border-radius: 50%;
  background: #0C2D5E;
  box-shadow: 0 0 0 8px #F4F7FC;
}

.thanks__heading {
  margin: 0 0 14px;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: #0C2D5E;
  text-align: center;
}

.thanks__text {
  max-width: 620px;
  margin: 0 auto 36px;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: #5A6472;
  text-align: center;
}

/* ---- この後の流れ ---- */
.thanks__next {
  padding: 26px 28px 8px;
  margin: 0 0 32px;
  border: 1px solid #E3E7EE;
  border-radius: 8px;
  background: #F8FAFC;
}

.thanks__next-heading {
  margin: 0;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0C2D5E;
}

.thanks__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.thanks__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 0 22px;
}

/* Numbered to match the step indicator's circles, one size down. */
.thanks__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E3E7EE;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #C8102E;
}

.thanks__item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}

.thanks__item-label {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0C2D5E;
}

.thanks__item-text {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #5A6472;
}

/* The form's button row is left-aligned; here there is no form to align to. */
.thanks__actions {
  justify-content: center;
  padding-bottom: 8px;
}

@media (max-width: 768px) {
  .thanks__mark { width: 56px; height: 56px; margin-bottom: 18px; }
  .thanks__heading { font-size: 21px; }
  .thanks__text { margin-bottom: 28px; }
  .thanks__next { padding: 22px 20px 4px; }
  /* Full-width buttons stack more predictably than a wrapped centred row. */
  .thanks__actions { flex-direction: column; align-items: stretch; }
  .thanks__actions .form__btn,
  .thanks__actions .form__btn-2 { justify-content: center; }
}

/* ---- 送信 (the sending moment) ----
   While the POST is in flight the confirm button says so and stops accepting
   clicks, and the indicator sits on step 3. Reuses the same grey the form's
   own submit button wears when it is not actionable. */
.ct-review__send:disabled,
.ct-review__edit:disabled {
  cursor: default;
}

.ct-review__send:disabled {
  background: rgb(194, 201, 212);
}

.ct-review__edit:disabled {
  opacity: 0.55;
}