/* D005 layout and provisional media. Cards, buttons and FAQ use TOP 3bbc8be. */
.office-skip { position: fixed; inset: 1rem auto auto 1rem; z-index: 100; padding: .75rem 1rem; background: white; transform: translateY(-200%); }
.office-skip:focus { transform: none; }
.office-page { font-size: var(--font-size-body); }
.office-page [id] { scroll-margin-block-start: 1.5rem; }
.company-breadcrumb { padding-block: var(--space-lg); font-size: var(--font-size-small); }
.company-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.company-breadcrumb li + li::before { content: '›'; margin-inline-end: var(--space-sm); color: var(--color-text-secondary); }
.company-breadcrumb a { text-underline-offset: .25em; }
.company-hero { position: relative; isolation: isolate; max-width: var(--container-visual-max); margin-inline: auto; padding-block: var(--space-4xl); border-end-start-radius: clamp(3rem, 6vw, 6rem); }
.company-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 min(0px, calc((var(--container-visual-max) - 100vw) / 2)) 0 min(0px, max(-5vw, calc((var(--container-visual-max) - 100vw) / 2))); background: var(--background-section-gradient); border-radius: inherit; pointer-events: none; }
.company-hero h1 { margin: 0 0 var(--space-lg); font-size: clamp(2.125rem, calc(1.5rem + 1vw), 2.75rem); line-height: 1.4; }
.company-hero__lead { max-width: 56rem; margin: 0; font-size: var(--font-size-base); line-height: 2; }
#projects { background: var(--color-surface-base); }
.office-section--soft { background: var(--color-surface-light-gray); }
.office-page .section-heading__support > p { white-space: normal; }
.office-support-line { display: block; }
@media (min-width: 960px) {
  #service-area .section-heading--split { grid-template-columns: auto minmax(0, 1fr); }
  #service-area .section-heading--split > * { grid-column: auto; }
}
#services { padding-block: var(--space-2xl) var(--section-padding-standard); }
/* Adopted office services proposal A: image and copy in horizontal rows. */
.office-service-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--space-lg) * 2); padding: var(--space-lg); background: var(--color-surface-base); border-radius: var(--radius-medium); box-shadow: var(--shadow-medium); }
.office-page .office-service-card { position: relative; display: grid; grid-template-columns: 35% minmax(0, 1fr); min-width: 0; gap: var(--space-lg); padding: 0; border: 0; }
/* Center dividers in the gaps so each side has the same 24px clearance. */
.office-service-card:not(:first-child)::before { content: ""; position: absolute; inset-inline: 0; top: calc(-1 * var(--space-lg)); height: 1px; background: var(--color-border-default); pointer-events: none; }
@media (min-width: 960px) {
  .office-service-card:nth-child(2)::before { content: none; }
  .office-service-grid::before { content: ''; position: absolute; inset-block: var(--space-lg); left: 50%; width: 1px; background: var(--color-border-default); pointer-events: none; }
}
.office-service-card__media { height: 12.25rem; overflow: hidden; border-radius: .625rem; background: var(--color-surface-soft); }
.office-service-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.office-page .office-service-card__heading { margin: 0 0 .75rem; color: var(--color-brand-green-darker); font-size: 1.25rem; line-height: 1.6; }
.office-service-card__body { min-width: 0; align-self: center; }
.office-service-card p { margin: 0; font-size: .875rem; line-height: 1.9; }
@media (max-width: 480px) {
  .office-page .office-service-card { grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--space-md); }
  .office-service-card__media { height: 8rem; }
  .office-page .office-service-card__heading { font-size: 1.0625rem; }
  .office-service-card p { font-size: .8125rem; }
}
.office-area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.office-area-grid h3 { margin: 0 0 var(--space-md); color: var(--color-brand-green-darker); font-size: 1.25rem; }
.office-area-grid h3:not(:first-of-type) { margin-block-start: var(--space-xl); }
/* Map frame reused from F009-01 (A001 f99ea74). */
.office-area-map { width: 100%; margin: 0 0 var(--space-lg); overflow: hidden; background: var(--color-surface-soft); border: 1px solid color-mix(in srgb, var(--color-brand-green-dark) 12%, transparent); border-radius: var(--radius-small); }
.office-area-map img { display: block; width: 100%; height: auto; }
.office-area-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.office-area-list li { padding: .45rem .75rem; background: white; border: 1px solid var(--color-border-default); border-radius: var(--radius-small); }
.office-area-list li.is-base { color: white; background: var(--color-brand-green-dark); border-color: var(--color-brand-green-darker); font-weight: 700; }
.office-distance table { width: 100%; border-collapse: collapse; line-height: 1.8; }
.office-distance th, .office-distance td { padding: var(--space-md); text-align: left; border-block-end: 1px solid var(--color-border-muted); }
.office-distance thead th { color: white; background: var(--color-brand-green-dark); }
.office-distance td:nth-child(n+2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.office-note { margin: var(--space-lg) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.8; }
.office-staff-card dl, .office-subsidy-card dl { display: grid; gap: .4rem; margin: 0; }
.office-staff-card dl > div, .office-subsidy-card dl > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); }
.office-staff-card dt, .office-subsidy-card dt { color: var(--color-text-muted); }
.office-staff-card dd, .office-subsidy-card dd { margin: 0; }
.office-page .office-draft-label { display: inline-flex; align-self: flex-start; margin: 0; padding: .25rem .6rem; color: var(--color-brand-green-darker); background: var(--color-surface-mint); border-radius: var(--radius-pill); font-size: var(--font-size-caption); font-weight: 700; }
.office-staff-card .office-draft-label, .office-subsidy-card .office-draft-label { margin-block-end: var(--space-md); }
.office-placeholder { display: grid; place-items: center; align-content: center; gap: var(--space-xs); color: var(--color-text-muted); background: var(--color-surface-soft); border: 1px dashed var(--color-border-strong); text-align: center; }
.office-page .office-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--color-surface-base); }
.office-page .office-staff-card { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: start; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-surface-base); border: 0; border-radius: 0; box-shadow: none; }
.office-page .office-staff-card:nth-child(odd) { border-inline-end: 1px solid var(--color-border-default); }
.office-page .office-staff-card:nth-child(n + 3) { border-block-start: 1px solid var(--color-border-default); }
.office-staff-photo { display: block; width: 10rem; height: 10rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-small); }
.office-staff-card .reason-card__content { min-width: 0; padding: 0; }
.office-page .office-staff-card h3 { margin: 0 0 .75rem; font-size: 1.125rem; line-height: 1.5; }
.office-staff-card dl { gap: .4rem; font-size: .9375rem; line-height: 1.75; }
.office-staff-card dl > div { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-xs); }
.office-pending { color: var(--color-text-muted); }
.office-subsidy-card dl > div { grid-template-columns: 7rem minmax(0, 1fr); padding-block: var(--space-sm); border-block-end: 1px solid var(--color-border-muted); }
.office-nearby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.office-page .contact-cta-copy h2 { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 959px) {
  .office-nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .office-page .office-staff-grid { grid-template-columns: 1fr; }
  .office-page .office-staff-card:nth-child(odd) { border-inline-end: 0; }
  .office-page .office-staff-card:nth-child(n + 2) { border-block-start: 1px solid var(--color-border-default); }
  .office-service-grid { grid-template-columns: 1fr; }
  .office-area-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .office-page .office-staff-card { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); }
  .office-staff-photo { width: 5rem; height: 5rem; }
  .company-hero { padding-block: var(--space-3xl); }
  .office-nearby { grid-template-columns: 1fr; }
  .office-distance { overflow-x: auto; }
}
/* 追従CTAの実測高さは legacy-cta.js が --fixed-cta-clearance へ入れる。変数が無い場合は従来値。 */
@media (max-width: 645px) { body.office-page { padding-bottom: var(--fixed-cta-clearance, calc(27.3037vw + .25rem)); } }
@media (prefers-reduced-motion: reduce) { .office-page { scroll-behavior: auto; } }

/* T-118: photo-free staff variant; keep source photos for later reuse. */
.office-page .office-staff-card--without-photo { grid-template-columns: minmax(0, 1fr); }
.office-staff-card--without-photo .office-staff-photo { display: none; }

/* Photo-free staff details use two columns where the card has room. */
@media (min-width: 768px) {
  .office-staff-card--without-photo dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
}