.consultation-page {
  background: var(--color-sub);
}

.consultation-page.is-modal-open {
  overflow: hidden;
}

/* =========================================================
   HERO
========================================================= */

.consultation-hero {
  padding: calc(var(--header-height) + 88px) 0 88px;

  color: #fff;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(216, 121, 67, 0.22),
      transparent 30%
    ),
    linear-gradient(135deg, #10282e, #17363d 58%, #0d2328);
}

.consultation-hero__inner,
.consultation-section__inner {
  width: var(--content-width);
  margin: 0 auto;
}

.consultation-hero__inner,
.consultation-section__inner--narrow {
  max-width: 860px;
}

.consultation-hero .section-kicker,
.consultation-heading--light .section-kicker {
  color: #f0a06f;
}

.consultation-hero h1,
.consultation-heading h2 {
  font-family: var(--font-serif);
  line-height: 1.35;
}

.consultation-hero h1 {
  margin: 12px 0 20px;

  font-size: clamp(2.4rem, 5vw, 5rem);
}

.consultation-hero p:last-child {
  margin: 0;

  color: rgba(255, 255, 255, 0.76);
}

/* =========================================================
   SECTION
========================================================= */

.consultation-section {
  padding: clamp(72px, 9vw, 120px) 0;
}

.consultation-section--process {
  color: #fff;
  background: var(--color-main-dark);
}

.consultation-section--form {
  background: #ebe7df;
}

.consultation-heading {
  max-width: 760px;
  margin-bottom: 42px;
}

.consultation-heading h2 {
  margin: 8px 0 16px;

  font-size: clamp(2rem, 4vw, 3.6rem);
}

.consultation-heading > p:last-child {
  margin: 0;
  color: var(--color-text-light);
}

.consultation-heading--light > p:last-child {
  color: rgba(255, 255, 255, 0.68);
}

/* =========================================================
   ESTIMATE SUMMARY
========================================================= */

.consultation-summary[hidden],
.consultation-empty[hidden],
.consultation-modal[hidden] {
  display: none;
}

.consultation-summary {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}

.consultation-summary__group,
.consultation-summary__totals {
  padding: clamp(22px, 3vw, 34px);

  background: #fff;

  border: 1px solid rgba(23, 54, 61, 0.12);

  box-shadow: 0 16px 42px rgba(16, 40, 46, 0.06);
}

.consultation-summary__group h3,
.consultation-summary__totals h3 {
  margin: 0 0 18px;
  padding-bottom: 12px;

  color: var(--color-main);

  font-family: var(--font-serif);

  border-bottom: 1px solid rgba(23, 54, 61, 0.14);
}

.consultation-summary__row {
  display: flex;

  justify-content: space-between;

  gap: 24px;

  margin: 0;
  padding: 11px 0;

  border-bottom: 1px solid rgba(23, 54, 61, 0.08);
}

.consultation-summary__row:last-child {
  border-bottom: 0;
}

.consultation-summary__row span {
  min-width: 0;
  color: var(--color-text-light);
}

.consultation-summary__row strong {
  flex: 0 0 auto;
  text-align: right;
}

.consultation-summary__row.is-included strong,
.consultation-summary__row.is-support strong {
  color: #287259;
}

.consultation-summary__row.is-warning strong {
  color: #a4512d;
}

/* 合計 */

.consultation-summary__totals {
  grid-column: 1 / -1;

  color: #fff;
  background: var(--color-main-dark);
}

.consultation-summary__totals h3,
.consultation-summary__totals .consultation-summary__row strong {
  color: #fff;
}

.consultation-summary__totals h3,
.consultation-summary__totals .consultation-summary__row {
  border-color: rgba(255, 255, 255, 0.12);
}

.consultation-summary__totals .consultation-summary__row span {
  color: rgba(255, 255, 255, 0.7);
}

.consultation-summary__initial-total {
  display: grid;

  grid-template-columns: 1fr auto;

  align-items: end;

  gap: 4px 24px;

  padding-bottom: 24px;
  margin-bottom: 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.consultation-summary__initial-total > span {
  grid-row: 1 / 3;
  align-self: center;

  color: rgba(255, 255, 255, 0.7);
}

.consultation-summary__initial-total del {
  color: rgba(255, 255, 255, 0.46);

  text-align: right;
}

.consultation-summary__initial-total strong {
  font-family: var(--font-serif);

  font-size: clamp(2.5rem, 6vw, 5rem);

  font-weight: 500;
  line-height: 1;

  text-align: right;
}

/* データなし */

.consultation-empty {
  padding: clamp(26px, 5vw, 48px);

  background: #fff;

  border: 1px solid rgba(23, 54, 61, 0.12);

  box-shadow: var(--shadow);
}

.consultation-empty strong {
  display: block;
  margin-bottom: 8px;

  color: var(--color-main);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.consultation-empty p {
  margin: 0 0 20px;

  color: var(--color-text-light);
}

.consultation-back-link,
.consultation-edit-link {
  display: inline-block;

  color: var(--color-main);
  font-weight: 700;

  border-bottom: 1px solid currentColor;
}

.consultation-edit-link {
  margin-top: 26px;
}

/* =========================================================
   PROCESS
========================================================= */

.consultation-process {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1px;

  margin: 0;
  padding: 1px;

  list-style: none;

  background: rgba(255, 255, 255, 0.12);
}

.consultation-process li {
  display: grid;

  grid-template-columns: auto 1fr;

  gap: 20px;

  padding: clamp(24px, 4vw, 40px);

  background: var(--color-main-dark);
}

.consultation-process li > span {
  color: var(--color-accent);

  font-family: var(--font-serif);
  font-size: 1.4rem;
}

.consultation-process h3 {
  margin: 0 0 10px;

  font-family: var(--font-serif);
  line-height: 1.5;
}

.consultation-process p {
  margin: 0;

  color: rgba(255, 255, 255, 0.66);

  font-size: 0.94rem;
}

/* =========================================================
   FORM
========================================================= */

.consultation-form {
  display: grid;
  gap: 26px;

  padding: clamp(26px, 5vw, 48px);

  background: #fff;

  border: 1px solid rgba(23, 54, 61, 0.12);

  box-shadow: var(--shadow);
}

.consultation-form__field {
  display: grid;
  gap: 10px;
}

.consultation-form__field label {
  display: flex;

  justify-content: space-between;

  gap: 16px;

  color: var(--color-main);
  font-weight: 700;
}

.consultation-form__field label small {
  padding: 3px 9px;

  color: #fff;
  background: var(--color-accent);

  font-size: 0.72rem;
}

.consultation-form__field input,
.consultation-form__field textarea {
  width: 100%;

  padding: 15px 16px;

  color: var(--color-text);
  background: #faf9f6;

  border: 1px solid rgba(23, 54, 61, 0.22);

  border-radius: 0;
  outline: 0;
}

.consultation-form__field textarea {
  min-height: 250px;
  resize: vertical;
}

.consultation-form__field input:focus,
.consultation-form__field textarea:focus {
  background: #fff;
  border-color: var(--color-accent);

  box-shadow: 0 0 0 3px rgba(216, 121, 67, 0.14);
}

.consultation-form__field > p {
  margin: 0;

  color: var(--color-text-light);
  font-size: 0.84rem;
}

.consultation-form__submit {
  min-height: 64px;

  color: #fff;
  background: var(--color-accent);

  border: 0;

  cursor: pointer;

  font-weight: 700;
  letter-spacing: 0.06em;
}

.consultation-form__submit:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.consultation-form__submit:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* =========================================================
   CONFIRM MODAL
========================================================= */

.consultation-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 3000;

  display: grid;
  place-items: center;

  padding: 20px;

  background: rgba(7, 20, 24, 0.76);

  backdrop-filter: blur(10px);
}

.consultation-modal__panel {
  width: min(520px, 100%);

  padding: clamp(28px, 5vw, 48px);

  background: #fff;

  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);

  outline: 0;
}

.consultation-modal__panel h2 {
  color: var(--color-main);
  font-family: var(--font-serif);
}

.consultation-modal__panel > p:last-of-type {
  color: var(--color-text-light);
}

.consultation-modal__actions {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-top: 30px;
}

.consultation-modal__actions button {
  min-height: 54px;

  cursor: pointer;
  font-weight: 700;
}

.consultation-modal__edit {
  color: var(--color-main);
  background: transparent;

  border: 1px solid rgba(23, 54, 61, 0.28);
}

.consultation-modal__send {
  color: #fff;
  background: var(--color-accent);

  border: 1px solid var(--color-accent);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 820px) {
  .consultation-summary,
  .consultation-process {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .consultation-hero {
    padding: calc(var(--header-height) + 48px) 0 58px;
  }

  .consultation-section {
    padding: 64px 0;
  }

  .consultation-summary__row {
    display: grid;
    gap: 4px;
  }

  .consultation-summary__row strong {
    text-align: left;
  }

  .consultation-summary__initial-total {
    grid-template-columns: 1fr;
  }

  .consultation-summary__initial-total > span {
    grid-row: auto;
  }

  .consultation-summary__initial-total del,
  .consultation-summary__initial-total strong {
    text-align: left;
  }

  .consultation-process li {
    grid-template-columns: 1fr;
  }

  .consultation-form {
    padding: 24px 18px;
  }

  .consultation-modal__actions {
    grid-template-columns: 1fr;
  }
}