/* ==========================================================================
   CREATERIUM — inner pages (services / about / contact / diagnosis)
   Loads after style.css and uses its tokens. The masthead speaks the same
   grammar as the home hero: spark eyebrow, one large gothic statement,
   an ink-2 lead, warm paper.

   01 Masthead   02 Contact form   03 Contact aside   04 Responsive
   ========================================================================== */


/* 01 Masthead
   ========================================================================== */

/* Page hooks on <main>: .services-page, .about-page, .diagnosis-page and
   .contact-page only scope the few page-specific rules below. */
.inner-hero {
  padding-top: var(--sp-32);
  padding-bottom: clamp(48px, 6.7vw, 96px);      /* 96px at 1440 */
  border-bottom: 1px solid var(--line);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--sp-12);
  margin: 0 0 clamp(40px, 5vw, 72px);
  color: var(--ink-3);
  font-size: .8125rem;
  line-height: 1.6;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;                 /* 「ホーム」 alone is 39px wide */
  min-height: 44px;
  margin-left: -3px;
  text-decoration: underline var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.breadcrumb a:hover { color: var(--ink); text-decoration-color: var(--ink); }

.breadcrumb [aria-hidden="true"] { color: var(--line-strong); }

.breadcrumb [aria-current="page"] { color: var(--ink-2); }

.inner-hero h1 { margin-bottom: var(--sp-32); }

/* 「・」 separates two things in these headings; "palt" would squeeze it into
   a fat bullet (see style.css, 03 Typography). The /services/ H1 keeps
   "palt": its 「・」 ends the first line, where it should tuck against 善. */
.inquiry-form-panel > h2,
.inquiry-contact-card h2 { font-feature-settings: normal; }

/* Heat belongs to the word 熱量 only; inner-page second lines stay ink. */
.inner-hero h1 .heat { color: inherit; }

.inner-intro {
  max-width: 40em;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: 1.9;
}

.inner-hero .hero-actions { margin-top: var(--sp-48); }

/* The masthead already carries the hairline; the band under it starts clean. */
.inner-hero:has(+ .usecases),
.inner-hero:has(+ .philosophy) { border-bottom-color: transparent; }

/* The markup repeats the masthead inside the first or last section. Shown
   once, kept for assistive technology:
   /services/   「サービス / Services」 eyebrow twice within one screen;
   /about/      the company section repeats the masthead's eyebrow and H1;
   /diagnosis/  the use cases repeat the masthead's lead one screen below it
                (the process section's H2 also echoes the H1, two screens on:
                it stays — a section headed by an eyebrow alone reads broken);
   /contact/    the aside repeats the masthead's eyebrow. */
.services-page .inner-hero + .services .section-heading .eyebrow,
.about-page .company .eyebrow,
.about-page .company h2,
.diagnosis-page .inner-hero + .usecases .section-heading > p,
.contact-page .inquiry-contact-card .eyebrow {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* With its heading shown once (above), the lead's first baseline sits level
   with the table's first row: row padding + hairline, less what the larger
   type adds above its baseline (19px at 1440). */
.about-page .company-intro {
  margin-top: calc(var(--sp-24) + 1px + 1.5 * (1rem - var(--fs-lead)));
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.8;
}


/* 02 Contact form
   ========================================================================== */

.contact-form-section {
  padding-top: clamp(48px, 6.7vw, 96px);
  padding-bottom: var(--section-y);
}

/* Same 12 columns as style.css: form on 1–6, aside on 8–12. */
.inquiry-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}

.inquiry-form-panel {
  grid-column: 1 / span 6;
  min-width: 0;
}

.inquiry-form-panel > h2 {
  margin-bottom: var(--sp-16);
  font-size: 1.75rem;
}

.form-description {
  max-width: 40em;
  margin: 0 0 var(--sp-48);
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.9;
}

.required-label,
.optional-label {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-8);
  border-radius: var(--radius-s);
  font-size: var(--fs-legal);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .04em;
  vertical-align: middle;
  white-space: nowrap;
}

.required-label { background: var(--heat-tint);  color: var(--heat-strong); }   /* 6.1:1 */
.optional-label { background: var(--chip); color: var(--ink-2); font-weight: 500; }

.inquiry-form { position: relative; }

.form-field { margin-bottom: var(--sp-32); }

.form-field > label {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-8);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}

.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 56px;
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;              /* 16px: no zoom on iOS */
  line-height: 1.75;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field textarea { min-height: 208px; resize: vertical; }

/* A drawn chevron instead of the UA one: two 1.5px strokes ( \ and / ) in ink,
   in the same line language as the arrows elsewhere. */
.form-field select {
  padding-right: var(--sp-48);
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 41%, var(--ink) 41%, var(--ink) 59%, transparent 59%),
    linear-gradient(135deg, transparent 41%, var(--ink) 41%, var(--ink) 59%, transparent 59%);
  background-position: right 24px top 53%, right 17px top 53%;
  background-size: 7px 7px;
  background-repeat: no-repeat;
  cursor: pointer;
}

@media (forced-colors: active) {
  .form-field select {
    forced-color-adjust: none;
    border-color: FieldText;
    background-color: Field;
    background-image:
      linear-gradient(45deg,  transparent 41%, FieldText 41%, FieldText 59%, transparent 59%),
      linear-gradient(135deg, transparent 41%, FieldText 41%, FieldText 59%, transparent 59%);
    color: FieldText;
  }
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--ink); }

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--struct);
  outline: 2px solid var(--struct);
  outline-offset: 2px;
}

.field-hint,
.form-privacy-note {
  margin: 0 0 var(--sp-12);
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.8;
}

.form-privacy-note { margin-bottom: var(--sp-32); }

.form-honeypot {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Server responses */
.form-status {
  margin: 0 0 var(--sp-32);
  padding: var(--sp-24) var(--sp-32);
  border-left: 2px solid;
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  overflow-wrap: anywhere;
  scroll-margin-top: var(--sp-16);     /* the redirect lands on #contact-result: keep it (and its focus ring) clear of the sticky header */
}

.form-status h3 { margin: 0 0 var(--sp-8); font-size: 1.125rem; }

.form-status p { margin: var(--sp-8) 0 0; font-size: .9375rem; line-height: 1.9; }

.form-status a {
  display: inline-block;
  margin: calc(-1 * var(--sp-12)) 0;   /* 44px target, line rhythm unchanged */
  padding: var(--sp-12) 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.form-status-success { background: var(--chip); border-color: var(--struct);       color: var(--ink); }
.form-status-success h3 { color: var(--struct); }
.form-status-error   { background: var(--heat-tint);  border-color: var(--heat-strong); color: var(--ink); }
.form-status-error h3   { color: var(--heat-strong); }
/* An error never speaks in the brand vermilion alone: 深緋 + a warning sign + the wording. */
.form-status-error h3::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: var(--sp-8);
  vertical-align: -.18em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 22 20.5H2Z'/%3E%3Cpath d='M12 10v4.5M12 17.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 22 20.5H2Z'/%3E%3Cpath d='M12 10v4.5M12 17.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) {
  .form-status-error h3::before { forced-color-adjust: none; background: CanvasText; }
}


/* 03 Contact aside — a sheet (surface + sumi top rule: style.css, 08)
   ========================================================================== */

.inquiry-contact-card {
  grid-column: 8 / -1;
  position: sticky;
  top: calc(var(--header-h) + var(--adminbar-h) + var(--sp-32));
  padding: var(--sp-40);
}

.inquiry-contact-card h2 {
  margin: 0 0 var(--sp-16);
  font-size: 1.5rem;
  line-height: 1.55;
}

.inquiry-contact-card > p:not(.eyebrow) {
  margin: 0;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.9;
  text-wrap: balance;          /* keeps 「運用について」 whole (segmenter reads に|ついて) */
}

.inquiry-contact-card dl { margin: var(--sp-32) 0 0; }

.inquiry-contact-card dl > div {
  padding: var(--sp-16) 0 var(--sp-8);
  border-top: 1px solid var(--line);
}

.inquiry-contact-card dt {
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
}

.inquiry-contact-card dd {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.inquiry-contact-card dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.inquiry-contact-card dd a:hover { text-decoration-color: var(--ink); }

.inquiry-contact-card > .inquiry-company {
  padding-top: var(--sp-24);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.9;
}


/* 04 Responsive — same breakpoints as style.css, one block each
   ========================================================================== */

@media (max-width: 1100px) {
  .inquiry-form-panel { grid-column: 1 / span 7; }
  .inquiry-contact-card { padding: var(--sp-32); }
}

@media (max-width: 900px) {
  .inner-hero { padding-top: var(--sp-16); }
  .inquiry-layout { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-64); }
  .inquiry-form-panel,
  .inquiry-contact-card { grid-column: 1 / -1; max-width: 640px; }   /* one measure: fields and sheet end on the same edge */
  .inquiry-contact-card { position: static; }
  .about-page .company-intro { margin-top: 0; }
}

@media (max-width: 650px) {
  .inner-hero { padding-top: var(--sp-8); }
  /* The page H1 leads the section H2s on phones too (33px against 28px at
     390): as large as the longest first line, 「「何から始める？」から、」 — 10.6em
     with its brackets — allows, up to the 2.5rem of the scale. */
  .inner-hero h1 { margin-bottom: var(--sp-24); font-size: min(2.5rem, calc((100vw - 40px) / 10.6)); }
  .inner-intro { font-size: 1.0625rem; line-height: 1.8; }
  .contact-page .inner-intro { max-width: 15.5em; }
  .inner-hero .hero-actions { margin-top: var(--sp-32); }

  .inquiry-form-panel > h2 { font-size: 1.5rem; }
  .form-description { margin-bottom: var(--sp-32); }
  .form-field { margin-bottom: var(--sp-24); }
  .form-submit { width: 100%; }
  .form-status { padding: var(--sp-24); }
  .inquiry-layout { row-gap: var(--sp-48); }
  .inquiry-contact-card { padding: var(--sp-24) var(--sp-20); }   /* text starts 20px in, like every sheet */
}

@media (max-width: 360px) {
  .inner-intro { font-size: 1rem; }
  .form-status p { text-wrap: balance; }               /* keeps 「お問い合わせください」 whole (segmenter reads お問い|合わせ) */
  .about-page .inner-intro { font-size: .9375rem; }    /* the home lead's text, at the home lead's size */
  .inquiry-contact-card { padding: var(--sp-20); }
  .inquiry-contact-card h2 { font-size: 1.375rem; }    /* 「メールでも、お気軽に。」 on one line */
}


/* Imagery — a wide still life closes each inner-page masthead: 12:5 from 651px up, 16:9 on
   phones. Each page has its own scene, and each scene its own vertical anchor so that the
   subject is whole inside the 12:5 cut (the sources are 3:2, 1200w + a 2048w 2x candidate). */
.inner-hero-media {
  margin: clamp(32px, 4.4vw, 64px) 0 0;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--paper-2);
}
.inner-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.services-page  .inner-hero-media img { object-position: 50% 56%; }   /* glass plates: the whole stack and its caustics */
.about-page     .inner-hero-media img { object-position: 50% 42%; }   /* ring: the crown clears the top edge */
.contact-page   .inner-hero-media img { object-position: 50% 30%; }   /* two cups; the pen stays outside the cut */
.diagnosis-page .inner-hero-media img { object-position: 50% 50%; }   /* the process map */

@media (max-width: 650px) {
  .inner-hero-media { aspect-ratio: 16 / 9; border-radius: var(--radius-s); }
  .inner-hero-media img { object-position: 50% 56%; }                 /* 16:9 shows 85% of the height: one anchor fits all */
  .diagnosis-page .inner-hero-media img { object-position: 50% 50%; }
}