/* ==========================================================================
   SECT rebuild — shared components
   ========================================================================== */

/* Heading ---------------------------------------------------------------- */
.c-heading {
  display: grid;
  gap: var(--s-1);
  margin: 0 0 var(--s-6);
  color: var(--c-ink);
}

.c-heading__label {
  font-family: var(--ff-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bd);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.c-heading__title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bd);
  letter-spacing: var(--ls-base);
  line-height: var(--lh-tight);
}

.c-heading--center {
  justify-items: center;
  text-align: center;
}

.c-heading--light,
.c-heading--light .c-heading__label,
.c-heading--light .c-heading__title {
  color: var(--c-paper);
}

.c-heading--accent .c-heading__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.c-heading--accent .c-heading__label::before {
  width: var(--s-6);
  border-top: 1px solid currentColor;
  content: "";
}

/* Buttons ---------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  min-width: 18rem;
  min-height: 5.2rem;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bd);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.c-btn:focus-visible {
  outline: 0.3rem solid var(--c-accent);
  outline-offset: 0.3rem;
}

.c-btn--primary {
  border-color: var(--c-ink);
  background: var(--c-accent);
  box-shadow: var(--shadow-offset) var(--c-ink);
}

.c-btn--ghost {
  border-color: currentColor;
  color: var(--c-paper);
}

.c-btn--arrow::after {
  content: "→";
  font-family: var(--ff-en);
  font-size: var(--fs-lg);
  line-height: 1;
  transition: translate var(--dur-fast) var(--ease);
}

.c-btn--arrow:hover::after {
  translate: var(--s-1) 0;
}

.c-btn--pill {
  min-width: auto;
  min-height: 4rem;
  padding-inline: var(--s-3);
  border-color: var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-paper);
}

.c-btn--line {
  border-color: var(--c-ink);
  background: var(--c-paper);
}

.c-btn--entry {
  min-width: 22rem;
  background: var(--c-ink);
  color: var(--c-paper);
  letter-spacing: var(--ls-wide);
}

.c-btn--primary:hover,
.c-btn--line:hover,
.c-btn--pill:hover {
  background: var(--c-ink);
  color: var(--c-paper);
}

.c-btn--ghost:hover,
.c-btn--entry:hover {
  background: var(--c-accent);
  color: var(--c-ink);
}

/* Cards ------------------------------------------------------------------ */
.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--bd);
  background: var(--c-paper);
  color: var(--c-ink);
}

.c-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-canvas);
}

.c-card__media img {
  width: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--dur-base) var(--ease);
}

.c-card:hover .c-card__media img {
  scale: 1.03;
}

.c-card__eyebrow {
  margin: 0;
  color: var(--c-ink-70);
  font-family: var(--ff-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bd);
  letter-spacing: var(--ls-wide);
}

.c-card__title {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
}

.c-card__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.c-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
}

.c-card--work {
  padding: 0 0 var(--s-4);
  border-width: 0 0 1px;
}

.c-card--work .c-card__media {
  aspect-ratio: 16 / 9;
}

.c-card--vision {
  border-color: var(--c-ink);
  box-shadow: var(--shadow-offset) var(--c-accent);
}

.c-card--vision::before {
  width: var(--s-7);
  border-top: 0.6rem solid var(--c-accent);
  content: "";
}

.c-card--step {
  padding-top: var(--s-7);
  counter-increment: step;
}

.c-card--step::before {
  position: absolute;
  top: var(--s-2);
  left: var(--s-4);
  content: counter(step, decimal-leading-zero);
  color: var(--c-line);
  font-family: var(--ff-en);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bd);
  line-height: 1;
}

.c-card--person {
  text-align: center;
}

.c-card--person .c-card__media {
  width: 14rem;
  margin-inline: auto;
  border-radius: var(--r-pill);
  aspect-ratio: 1;
}

.c-card--info {
  display: grid;
  grid-template-columns: minmax(10rem, 0.3fr) 1fr;
  align-items: start;
  border-width: 0 0 1px;
}

/* Accordion -------------------------------------------------------------- */
.c-accordion {
  border-top: var(--bd);
}

.c-accordion__item {
  border-bottom: var(--bd);
}

.c-accordion__summary {
  position: relative;
  display: flex;
  min-height: 6.4rem;
  align-items: center;
  padding: var(--s-3) var(--s-7) var(--s-3) 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bd);
  line-height: var(--lh-base);
  list-style: none;
  cursor: pointer;
}

.c-accordion__summary::-webkit-details-marker {
  display: none;
}

.c-accordion__summary::before,
.c-accordion__summary::after {
  position: absolute;
  top: 50%;
  right: var(--s-2);
  width: var(--s-4);
  border-top: 0.2rem solid currentColor;
  content: "";
  transition: rotate var(--dur-fast) var(--ease);
}

.c-accordion__summary::after {
  rotate: 90deg;
}

.c-accordion__item[open] .c-accordion__summary::after {
  rotate: 0deg;
}

.c-accordion__summary:focus-visible {
  outline: 0.3rem solid var(--c-accent);
  outline-offset: -0.3rem;
}

.c-accordion__content {
  padding: 0 var(--s-7) var(--s-4) 0;
  color: var(--c-ink-70);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* Navigation: shared ----------------------------------------------------- */
.c-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-nav a {
  color: inherit;
  text-decoration: none;
}

.c-nav a:focus-visible {
  outline: 0.3rem solid var(--c-accent);
  outline-offset: 0.3rem;
}

/* Global navigation ------------------------------------------------------ */
.c-nav--global .c-nav__list {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-right: 0.8rem;
}

.c-nav--global .menu-item > a {
  display: flex;
  min-height: 4.3rem;
  align-items: center;
  color: #333;
  font-family: "M PLUS 1", var(--ff-base);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
}

.c-nav__toggle {
  display: none;
  width: 3.6rem;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  border: 0;
  background: var(--c-paper);
  color: #333;
  cursor: pointer;
}

.c-nav__toggle:focus-visible {
  outline: 0.3rem solid var(--c-accent);
  outline-offset: 0.2rem;
}

.c-nav__toggle-lines,
.c-nav__toggle-lines::before,
.c-nav__toggle-lines::after {
  display: block;
  width: 2rem;
  border-top: 1px solid currentColor;
  content: "";
  transition: rotate var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}

.c-nav__toggle-lines::before { translate: 0 -0.5rem; }
.c-nav__toggle-lines::after { translate: 0 0.4rem; }
.c-nav__toggle[aria-expanded="true"] .c-nav__toggle-lines { border-color: transparent; }
.c-nav__toggle[aria-expanded="true"] .c-nav__toggle-lines::before { rotate: 45deg; translate: 0 0; }
.c-nav__toggle[aria-expanded="true"] .c-nav__toggle-lines::after { rotate: -45deg; translate: 0 -0.1rem; }

/* Page navigation -------------------------------------------------------- */
.c-nav--page {
  padding: var(--s-4);
  border: var(--bd);
  background: var(--c-paper);
}

.c-nav--page .c-nav__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
}

.c-nav--page a {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding-block: var(--s-1);
  font-size: var(--fs-sm);
}

.c-nav--page a::before {
  content: "↓";
  color: var(--c-line);
  font-family: var(--ff-en);
}

/* Footer navigation ------------------------------------------------------ */
.c-nav--footer {
  display: grid;
  grid-template-columns: 17.8rem 17.8rem 19.6rem;
  gap: 3.5rem;
}

.site-footer__nav-group h2 {
  margin: 0 0 1.6rem;
  color: #f7e730;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.8;
}

.site-footer__nav-group ul { display: grid; gap: 1.6rem; }
.site-footer__nav-group a {
  display: block;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.8;
  white-space: nowrap;
}

/* Site chrome ------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: var(--z-header);
  background: #fff;
}

.site-header__inner {
  display: flex;
  width: 100%;
  height: 7.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 5rem;
}

.site-header__logo {
  position: relative;
  z-index: calc(var(--z-drawer) + 1);
  display: inline-flex;
  width: 17rem;
  flex: 0 0 17rem;
  align-items: center;
  text-decoration: none;
}

.site-header__logo picture,
.site-header__logo img { display: block; width: 100%; height: auto; }
.site-header .c-nav__panel { display: flex; height: 4.3rem; align-items: center; gap: 1.6rem; }
.site-header .c-btn { width: 17rem; min-width: 17rem; min-height: 4.3rem; height: 4.3rem; padding: 1.2rem 3rem; border: 0.5px solid #000; color: #333; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; }
.site-header .c-btn--consult { background: #f7e730; }
.site-header .c-btn--entry { background: #fff; }
.site-header .c-btn--arrow::after { width: 1.5rem; flex: 0 0 1.5rem; border-top: 1px solid currentColor; content: ""; }

.site-footer {
  height: 53.9rem;
  padding: 10rem 5rem 2.4rem;
  background: #333;
  color: #fff;
}

.site-footer__inner {
  display: flex;
  width: 100%;
  height: 36.2rem;
  justify-content: space-between;
  gap: 3.5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid #989898;
}

.site-footer__company-block { display: flex; width: 60.9rem; flex: 0 0 60.9rem; gap: 2.4rem; }
.site-footer__company-image { display: block; width: 31.1rem; height: 31.1rem; flex: 0 0 31.1rem; }
.site-footer__company-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-footer__company-image iframe { display: block; width: 100%; height: 100%; border: 0; }
.site-footer__company-copy { display: flex; width: 27.4rem; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.site-footer__logo { display: block; width: 14.3rem; height: 3.1rem; }
.site-footer__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-footer__catch,
.site-footer__address { margin: 0; font-family: var(--ff-base); font-size: 1.6rem; font-weight: 500; letter-spacing: 0.15em; line-height: 1.8; }
.site-footer__catch { color: #f3f4f6; }
.site-footer__address { color: #fff; font-style: normal; }
.site-footer__address a { color: inherit; text-decoration: none; }
.site-footer a { position: relative; z-index: 1; pointer-events: auto; }
.site-footer .u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.site-footer a:hover { color: #f7e730; }
.site-footer a:focus-visible { outline: 0.3rem solid #f7e730; outline-offset: 0.3rem; }
.site-footer__copyright { height: 2.9rem; margin: 2.4rem 0 0; color: #fff; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.15em; line-height: 1.8; text-align: center; }
.site-footer__copyright small { font-size: inherit; }

/* Tablet ---------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1365px) {
  .c-heading__title { font-size: var(--fs-2xl); }
  .site-header__inner { padding-inline: 2rem; }
  .site-header__logo { width: 11rem; flex-basis: 11rem; }
  .site-header .c-nav__panel { gap: 0.8rem; }
  .c-nav--global .c-nav__list { gap: 1rem; margin-right: 0; }
  .c-nav--global .menu-item > a { min-height: 4.3rem; font-size: 1rem; letter-spacing: 0.04em; }
  .site-header .c-btn { width: 8.5rem; min-width: 8.5rem; padding-inline: 0.6rem; font-size: 1rem; letter-spacing: 0.04em; }
  /* Keep the 1366px canonical footer geometry through tablet widths.
     The route-level root rem scale already maps 1366 design units to the viewport. */
}

@media (min-width: 768px) {
  .site-footer__catch,
  .site-footer__address,
  .roadmap-footer__tagline,
  .roadmap-footer__address { white-space: nowrap; }
}

/* Smartphone ------------------------------------------------------------ */
@media (max-width: 767px) {
  .c-heading { margin-bottom: var(--s-5); }
  .c-heading__title { font-size: var(--fs-2xl); }
  .c-btn { width: 100%; }
  .c-btn--pill { width: auto; }
  .c-card--info { grid-template-columns: 1fr; }

  .site-header__inner { height: 5.9rem; padding: 0.8rem 1.6rem; }
  .site-header__logo { width: 10rem; flex-basis: 10rem; }
  .site-header .c-nav__panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: flex;
    height: auto;
    overflow-y: auto;
    flex-direction: column;
    justify-content: center;
    padding: 8rem var(--gutter-sp) var(--s-6);
    background: var(--c-paper);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
  }
  .site-header .c-nav__panel.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
  .c-nav__toggle { position: relative; z-index: calc(var(--z-drawer) + 1); display: inline-flex; }
  .c-nav--global .c-nav__list { display: grid; width: 100%; align-items: stretch; gap: 0; margin: 0; border-top: var(--bd); }
  .c-nav--global .menu-item > a { min-height: 5.6rem; border-bottom: var(--bd); font-size: var(--fs-md); }
  .site-header .c-btn { width: 100%; min-width: 0; }
  .site-header .c-btn--entry { margin-top: var(--s-4); }
  body.is-nav-open { overflow: hidden; }

  .site-footer { height: 124.5rem; padding: 8rem 1.6rem 2.4rem; }
  .site-footer__inner { height: 108.8rem; flex-direction: column; justify-content: flex-start; gap: 3.5rem; padding-bottom: 5rem; }
  .site-footer__company-block { width: 34.3rem; flex: 0 0 64.9rem; flex-direction: column; gap: 2.4rem; }
  .site-footer__company-copy { order: -1; width: 32.7rem; flex: 0 0 28.2rem; }
  .site-footer__company-image { width: 34.3rem; height: 34.3rem; flex-basis: 34.3rem; }
  .site-footer__catch { width: 32.7rem; letter-spacing: 0.14em; }
  .site-footer__pc-break { display: none; }
  .c-nav--footer { width: 34.3rem; height: 35.3rem; grid-template-columns: 14.9rem 14.9rem; grid-template-rows: 15.9rem 15.9rem; gap: 3.5rem 4.5rem; }
  .site-footer__nav-group h2 { margin-bottom: 1.6rem; }
  .site-footer__nav-group a { font-size: 1.4rem; letter-spacing: 0.1em; line-height: 1.8; }
  .site-footer__copyright { text-align: center; }
  .c-nav--page .c-nav__list { grid-template-columns: 1fr; }

  /* Galaxy's system Japanese font is wider than the webfont fallback frame. */
  .c-nav--footer { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .site-footer__nav-group:nth-child(3) { grid-column: 1 / -1; }
  .site-footer__nav-group h2 { line-height: 1.5; letter-spacing: .12em; }
  .site-footer__nav-group a {
    font-family: var(--ff-base);
    font-size: 1.25rem;
    line-height: 1.65;
    letter-spacing: .06em;
    white-space: nowrap;
    word-break: keep-all;
  }
  .site-footer__copyright { height: auto; line-height: 1.5; white-space: nowrap; }
}

/* Contact's later page stylesheet still carries the retired generic-footer rules.
   This higher-specificity shared contract keeps the canonical component authoritative. */
body.contact-fresh > .site-footer.site-footer { height: 53.9rem; padding: 10rem 5rem 2.4rem; }
body.contact-fresh > .site-footer.site-footer .site-footer__inner { width: 100%; max-width: none; height: 36.2rem; margin: 0; gap: 3.5rem; padding-bottom: 5rem; }
@media (max-width: 767px) {
  body.contact-fresh > .site-footer.site-footer { height: 124.5rem; padding: 8rem 1.6rem 2.4rem; }
  body.contact-fresh > .site-footer.site-footer .site-footer__inner { height: 108.8rem; flex-direction: column; gap: 3.5rem; padding-bottom: 5rem; }
  .site-footer .site-footer__company-image { max-width: 100%; }
  body.contact-fresh > .site-footer.site-footer .site-footer__company-block,
  body.contact-fresh > .site-footer.site-footer .site-footer__company-image,
  body.contact-fresh > .site-footer.site-footer .site-footer__company-image img,
  body.contact-fresh > .site-footer.site-footer .site-footer__company-image iframe { max-width: calc(100vw - 3.2rem); }
  body.contact-fresh > .site-footer.site-footer .site-footer__company-image { width: calc(100vw - 3.2rem); height: auto; flex-basis: auto; aspect-ratio: 1; }
  body.contact-fresh > .site-footer.site-footer .site-footer__company-image img,
  body.contact-fresh > .site-footer.site-footer .site-footer__company-image iframe { width: calc(100vw - 3.2rem) !important; height: auto !important; aspect-ratio: 1; }
}

/* The canonical 1366px footer is wider than intermediate viewports. Keep its
   component geometry intact and stack its two regions until both fit side by side. */
@media (min-width: 768px) and (max-width: 1365px) {
  .site-footer,
  body.contact-fresh > .site-footer.site-footer {
    height: auto;
    padding: 8rem 5rem 2.4rem;
  }

  .site-footer__inner,
  body.contact-fresh > .site-footer.site-footer .site-footer__inner {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5rem;
    padding-bottom: 5rem;
  }

  .site-footer__company-block,
  .c-nav--footer {
    max-width: 100%;
  }

  .site-footer__company-block {
    flex-basis: auto;
  }

  .site-footer__copyright {
    height: auto;
    line-height: 1.5;
    white-space: nowrap;
  }
}