/* ==========================================================================
   About page — Figma: 門倉商店について / ABOUT US (18354-9125)
   Handoff: 制作仕様 / Developer handoff (18354-9127)

   Desktop canvas 1440px, content column 1284px, gutter 78px, section
   spacing 104px. Section headings reuse the shared .section-head component;
   catch phrases are always separate text below it, never the title itself.
   ========================================================================== */

.page-about {
  /* Figma raw hexes with no existing token. */
  --about-body: #284c5a;      /* body copy on light grounds */
  --about-caption: #587380;   /* photo captions */
  --about-desc: #38474d;      /* service card description */
  --about-reasons-bg: #f2fafc;
  --about-services-mid: #f4fcfe;
  --about-card-border: rgba(202, 234, 244, 0.9);
  --about-badge-border: #bee6f2;

  background: var(--c-white);
}

/* The 1284px content column every section sits in. */
.about-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-w, 1440px));
  margin-inline: auto;
  padding-inline: var(--page-gutter, 78px);
}

/* Sections clip their own decoration so a wave can never widen the page. */
.about-message,
.about-philosophy,
.about-reasons,
.about-services {
  position: relative;
  overflow: hidden;
}

/* Rotating stamps. Direction and duration come from the handoff:
   Services 22s clockwise, Access 28s counter-clockwise. */
.about-stamp {
  animation: about-stamp-spin 22s linear infinite;
}
.about-stamp--reverse {
  animation-duration: 28s;
  animation-direction: reverse;
}
@keyframes about-stamp-spin {
  to { transform: rotate(360deg); }
}

/* The 1440px design canvas, used as a clipping window for decoration.
   Figma's wave layers are named "width 1440 crop": they are drawn wider than
   the canvas on purpose and their flat edges are meant to fall outside it.
   Positioning decoration inside this box lets Figma's own x/y values be used
   verbatim and keeps those edges hidden at any viewport width. */
.about-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--page-w, 1440px));
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* main.css:233-242 sets img { max-width: 100%; height: auto } site-wide. The
   decoration is deliberately wider than the canvas, so it has to opt out —
   otherwise the wave is squeezed to 1440px and its flat edge lands in view. */
.about-canvas > img {
  position: absolute;
  display: block;
  max-width: none;
}

.about-reasons__wave {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Brand waves drift at most 8px, per the handoff. */
.about-reasons__wave,
.about-services__wave {
  animation: about-wave-drift 12s ease-in-out infinite alternate;
}
@keyframes about-wave-drift {
  to { transform: translateX(8px); }
}

/* --------------------------------------------------------------------------
   03 / ご挨拶 — Figma 18442:9505
   -------------------------------------------------------------------------- */

.about-message {
  padding-block: 104px;
  background: var(--c-white);
}

.about-message__body {
  display: flex;
  gap: 64px;
  align-items: center;
  margin-top: 48px;
}

.about-message__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 1 644px;
}

.about-message__catch {
  margin: 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-32);
  line-height: 48px;
  color: var(--color-heading);
}

.about-message__text p {
  margin: 0 0 34px;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 34px;
  color: var(--about-body);
}
.about-message__text p:last-child {
  margin-bottom: 0;
}

.about-message__sign {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 32px;
  color: var(--color-heading);
}

.about-message__figure {
  flex: 0 0 576px;
  margin: 0;
}
.about-message__figure img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 32px;
}
.about-message__figure figcaption {
  margin-top: 16px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 29px;
  color: var(--about-caption);
}

/* --------------------------------------------------------------------------
   04 / 私たちの想い — Figma 18358:9208
   -------------------------------------------------------------------------- */

.about-philosophy {
  padding-block: 112px;
  background: var(--c-white);
}

/* Figma 18358:9215 — x 1210, y -60 on the 1440 canvas; the right side is
   cropped by .about-canvas, exactly as the design shows it. */
.about-philosophy__circle {
  top: -60px;
  left: 1210px;
  width: 320px;
  height: 320px;
}

.about-philosophy__inner {
  display: flex;
  gap: 64px;
  align-items: center;
}

.about-philosophy__figure {
  flex: 0 0 576px;
  margin: 0;
}
.about-philosophy__figure img {
  display: block;
  width: 100%;
  height: 490px;
  object-fit: cover;
  border-radius: 32px;
}

.about-philosophy__story {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 1 644px;
}

.about-philosophy__catch {
  margin: 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-32);
  line-height: 48px;
  color: var(--color-heading);
}

.about-philosophy__text {
  margin: 0;
  max-width: 600px;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 34px;
  color: var(--about-body);
}

/* --------------------------------------------------------------------------
   05 / 選ばれる理由 — Figma 18360:9208
   -------------------------------------------------------------------------- */

.about-reasons {
  padding-block: 104px;
  background: var(--about-reasons-bg);
}

.about-reasons__wave {
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
}

.about-reasons__catch {
  margin: 32px 0 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-32);
  line-height: 48px;
  text-align: center;
  color: var(--color-heading);
}

.about-reasons__lead {
  margin: 40px 0 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 33px;
  text-align: center;
  color: var(--about-body);
}

.about-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.about-reasons__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--c-white);
  border-radius: 24px;
}

.about-reasons__img {
  display: block;
  width: 100%;
  height: 218px;
  object-fit: cover;
  border-radius: 16px;
}

.about-reasons__num {
  margin: 0;
  font-family: var(--ff-jost);
  font-size: 46px;
  font-weight: 500;
  line-height: 48px;
  color: var(--color-heading);
}

.about-reasons__title {
  margin: 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-28);
  font-weight: 400;
  line-height: 43px;
  color: var(--color-heading);
}

.about-reasons__text {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 30px;
  color: var(--about-body);
}

/* --------------------------------------------------------------------------
   06 / 事業紹介 — Figma 18364:9208
   -------------------------------------------------------------------------- */

.about-services {
  padding-block: 104px;
  background: linear-gradient(
    to bottom,
    var(--c-white) 0%,
    var(--about-services-mid) 52%,
    var(--c-white) 100%
  );
}

/* Figma 18531:10981 — x -366, y 46, 1808px wide on the 1440 canvas. The SVG
   carries preserveAspectRatio="none", so stretching it to the section's real
   height keeps its flat bottom edge below the fold of the crop window however
   the copy reflows. */
.about-services__wave {
  top: 46px;
  left: -366px;
  width: 1808px;
  height: calc(100% - 46px);
  min-height: 811px;
}

/* Figma 18505:10885 — x 1210, y 138 on the 1440 canvas. */
.about-services__stamp {
  top: 138px;
  left: 1210px;
  width: 163px;
  height: 164px;
}

.about-services__catch {
  margin: 32px 0 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-32);
  line-height: 48px;
  text-align: center;
  color: var(--color-heading);
}

.about-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.about-services__item {
  display: flex;
}

.about-services__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden; /* Figma overflow-clip: rounds the photo's top corners. */
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--about-card-border);
  border-radius: 22px;
  box-shadow: 0 4px 30px rgba(26, 28, 33, 0.05);
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.about-services__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 34px rgba(26, 28, 33, 0.1);
}
.about-services__card:focus-visible {
  outline: 2px solid var(--c-teal-900);
  outline-offset: 4px;
}

/* The zoom is clipped by __frame, not by __media, so the icon badge can hang
   below the photo's bottom edge without being cut off. The card itself clips
   (Figma overflow-clip), which is what rounds the photo's top corners. */
.about-services__media {
  position: relative;
  display: block;
  height: 160px;
}

.about-services__frame {
  display: block;
  height: 160px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
}

.about-services__photo {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 200ms ease;
}
.about-services__card:hover .about-services__photo {
  transform: scale(1.035);
}

.about-services__badge {
  position: absolute;
  right: 24px;
  bottom: -29px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: var(--c-white);
  border: 1px solid var(--about-badge-border);
  border-radius: 29px;
  box-shadow: 0 5px 14px rgba(7, 78, 106, 0.12);
}
.about-services__badge img {
  display: block;
  width: 30px;
  height: 30px;
}

.about-services__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 22px 24px;
}

.about-services__label {
  font-family: var(--ff-jost);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color: var(--color-brand);
  white-space: pre-wrap;
}

.about-services__name {
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: 22px;
  line-height: 32px;
  color: var(--color-heading);
}

.about-services__arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 200ms ease;
}
.about-services__card:hover .about-services__arrow {
  transform: translateX(4px);
}

.about-services__desc {
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 28px;
  color: var(--about-desc);
}

/* --------------------------------------------------------------------------
   07 / 保有施設・設備への導線 — Figma 18367:9208
   -------------------------------------------------------------------------- */

.about-teaser {
  position: relative;
  padding-bottom: 104px;
  background: var(--c-white);
}

.about-teaser__banner {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: 48px;
  background: var(--color-heading);
  border-radius: 32px;
}

.about-teaser__decor {
  position: absolute;
  top: -175px;
  left: 980px;
  width: 420px;
  height: 420px;
  pointer-events: none;
}
.about-teaser__decor img {
  display: block;
  max-width: none;
  width: 420px;
  height: 420px;
}

.about-teaser__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 1 566px;
  position: relative;
  z-index: 1;
}

.about-teaser__catch {
  margin: 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-32);
  line-height: 48px;
  color: var(--c-white);
}

.about-teaser__text {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 33px;
  color: var(--c-white);
}

.about-teaser__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  min-width: 338px;
  height: 56px;
  padding: 12px 24px;
  background: var(--c-white);
  border: 1px solid var(--page-nav-border, #d7ebf0);
  border-radius: 999px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.1em;
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.about-teaser__btn:hover {
  background: var(--c-teal-900);
  color: var(--c-white);
}
.about-teaser__btn:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
}
.about-teaser__arrow {
  transition: transform 200ms ease;
}
.about-teaser__btn:hover .about-teaser__arrow {
  transform: translateX(4px);
}

.about-teaser__photo {
  position: relative;
  z-index: 1;
  flex: 0 0 582px;
  width: 582px;
  height: 390px;
  object-fit: cover;
  border-radius: 24px;
}

/* The block title sits on the navy banner and on the dark history section. */
.section-head--on-dark .section-head__title {
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   08 / 会社概要 — Figma 18368:9211
   -------------------------------------------------------------------------- */

.about-company {
  position: relative;
  overflow: hidden;
  padding-block: 104px;
  background: linear-gradient(
    to bottom,
    var(--c-white) 0%,
    var(--about-services-mid) 72%,
    var(--c-white) 100%
  );
}

.about-company__wave {
  top: 105px;
  left: -321px;
  width: 2138px;
  height: calc(100% - 105px);
  min-height: 1043px;
  animation: about-wave-drift 13s ease-in-out infinite alternate;
}

.about-company__circle {
  top: 760px;
  left: -210px;
  width: 440px;
  height: 440px;
}

.about-company__inner {
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

.about-company__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 0 300px;
  /* Desktop sticky, per the Figma layer name. Clears the header + anchor row. */
  position: sticky;
  top: 194px;
}

.about-company__lead {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 33px;
  color: var(--about-body);
}

.about-company__list {
  flex: 1 1 912px;
  margin: 0;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--page-nav-border, #d7ebf0);
  border-radius: 24px;
}

.about-company__row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px;
  background: var(--c-white);
}
.about-company__row:nth-child(odd) {
  background: var(--about-reasons-bg);
}

.about-company__row dt {
  flex: 0 0 176px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 30px;
  color: var(--color-heading);
}

.about-company__row dd {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 30px;
  color: var(--about-body);
}
.about-company__row dd a {
  color: inherit;
}

.about-company__clients-intro {
  margin: 0;
}

/* Inline disclosure — Figma state 18405:9464 is a preview of this same
   content expanded, not a separate view. */
.about-company__clients summary {
  display: flex;
  align-items: center;
  min-height: 44px; /* handoff: tap targets stay at least 44px */
  cursor: pointer;
  list-style: none;
  color: var(--color-heading);
  font-weight: 500;
}
.about-company__clients summary::-webkit-details-marker {
  display: none;
}
.about-company__clients summary:focus-visible {
  outline: 2px solid var(--c-teal-900);
  outline-offset: 4px;
}
.about-company__clients-close {
  display: none;
}
.about-company__clients[open] .about-company__clients-open {
  display: none;
}
.about-company__clients[open] .about-company__clients-close {
  display: inline;
}

.about-company__clients-body p {
  margin: 16px 0 0;
}
.about-company__clients-body b {
  font-weight: 500;
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   09 / 沿革 — Figma 18442:9506
   -------------------------------------------------------------------------- */

.about-history {
  position: relative;
  overflow: hidden;
  padding-block: 104px;
  background: linear-gradient(
    to right,
    #063e56 0%,
    var(--color-heading) 52%,
    #0b5c74 100%
  );
}

.about-history__wave {
  top: -125px;
  left: -321px;
  width: 2138px;
  height: 1043px;
  animation: about-wave-drift 14s ease-in-out infinite alternate;
}

.about-history__circle {
  top: -130px;
  left: 1130px;
  width: 480px;
  height: 480px;
}

.about-history__inner {
  display: flex;
  gap: 32px;
  align-items: center;
}

.about-history__heading {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 260px;
}

.about-history__lead {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 34px;
  color: var(--c-white);
}

.about-history__list {
  flex: 1 1 600px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-history__item {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: center;
  padding-block: 16px;
}

/* The connector is drawn in CSS rather than from the exported 112px asset:
   it has to span between rows whose height depends on how the event copy
   wraps, which a fixed-length image cannot do. Figma 1.5px dashed #21AED9,
   6/6 dash pattern. It stays static, per the handoff. */
.about-history__item + .about-history__item::before {
  content: "";
  position: absolute;
  left: 139px;
  bottom: 50%;
  height: 100%;
  border-left: 1.5px dashed var(--color-brand);
}

.about-history__year {
  flex: 0 0 auto;
  min-width: 99px;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-40);
  line-height: var(--lh-base);
  letter-spacing: 0.1em;
  color: var(--c-white);
}

.about-history__dot {
  position: relative;
  z-index: 1;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: var(--color-brand);
  border-radius: 50%;
}

.about-history__event {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: var(--lh-base);
  letter-spacing: 0.1em;
  color: var(--c-white);
}

.about-history__gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 360px;
}

.about-history__pair {
  display: flex;
  gap: 16px;
}

.about-history__photo {
  width: 172px;
  height: 304px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
}

.about-history__photo--wide {
  width: 360px;
  height: 390px;
  border-radius: 22px;
}

/* --------------------------------------------------------------------------
   10 / 許認可・登録情報 — Figma 18371:9211
   -------------------------------------------------------------------------- */

.about-permits {
  position: relative;
  overflow: hidden;
  padding-block: 104px;
  background: linear-gradient(
    to bottom,
    var(--about-reasons-bg) 0%,
    #fbfeff 55%,
    #f0fafd 100%
  );
}

.about-permits__wave {
  top: 383px;
  left: -321px;
  width: 2138px;
  height: 1043px;
  animation: about-wave-drift 12s ease-in-out infinite alternate;
}

.about-permits__circle {
  top: -170px;
  left: 1110px;
  width: 440px;
  height: 440px;
}

.about-permits__lead {
  margin: 32px 0 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 33px;
  text-align: center;
  color: var(--about-body);
}

.about-permits__group {
  margin-top: 32px;
  padding: 32px;
  background: var(--c-white);
  border-radius: 24px;
}
.about-permits__group--slim {
  padding: 28px;
  border-radius: 20px;
}

.about-permits__group summary {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px; /* handoff: tap targets stay at least 44px */
  cursor: pointer;
  list-style: none;
}
.about-permits__group summary::-webkit-details-marker {
  display: none;
}
.about-permits__group summary:focus-visible {
  outline: 2px solid var(--c-teal-900);
  outline-offset: 4px;
}

.about-permits__group-name {
  font-family: var(--ff-jp);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 36px;
  color: var(--color-heading);
}
.about-permits__group--slim .about-permits__group-name {
  font-size: var(--fs-20);
}

/* ＋ / − marker, matching the design's plain glyphs. */
.about-permits__mark::before {
  content: "＋";
  font-family: var(--ff-jp);
  font-size: var(--fs-24);
  line-height: 36px;
  color: var(--color-heading);
}
.about-permits__group[open] .about-permits__mark::before {
  content: "−";
}

.about-permits__rows {
  margin: 24px 0 0;
}

.about-permits__row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px;
  background: var(--c-white);
}
.about-permits__row:nth-child(odd) {
  background: var(--about-reasons-bg);
}

.about-permits__row dt {
  flex: 0 0 280px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 30px;
  color: var(--color-heading);
}

.about-permits__row dd {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 30px;
  color: var(--about-body);
}

.about-permits__body p {
  margin: 24px 0 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 30px;
  color: var(--about-body);
}
.about-permits__body b {
  font-weight: 500;
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   11 / 事業所・アクセス — Figma 18374:9211
   -------------------------------------------------------------------------- */

.about-access {
  position: relative;
  overflow: hidden;
  padding-block: 104px;
  background: linear-gradient(
    to bottom,
    var(--c-white) 0%,
    #f0fbfe 46%,
    #fbfeff 100%
  );
}

.about-access__wave {
  top: 507px;
  left: -321px;
  width: 2138px;
  height: 1043px;
  animation: about-wave-drift 13s ease-in-out infinite alternate;
}

.about-access__stamp {
  top: 250px;
  left: 70px;
  width: 163px;
  height: 164px;
}

.about-access__lead {
  margin: 32px 0 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 33px;
  text-align: center;
  color: var(--about-body);
}

.about-access__cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}

.about-access__card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid rgba(202, 234, 244, 0.92);
  border-radius: 24px;
  box-shadow: 0 4px 30px rgba(26, 28, 33, 0.05);
}
.about-access__card--reverse {
  flex-direction: row-reverse;
}

.about-access__media {
  position: relative;
  flex: 0 0 460px;
}
.about-access__media img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}

/* The pin sits on the seam between photo and info panel. */
.about-access__pin {
  position: absolute;
  top: 31px;
  right: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--c-white);
  border: 1px solid var(--about-badge-border);
  border-radius: 28px;
  box-shadow: 0 5px 14px rgba(7, 78, 106, 0.14);
}
.about-access__card--reverse .about-access__pin {
  right: auto;
  left: -28px;
}
.about-access__pin img {
  width: 24px;
  height: 24px;
  min-height: 0;
}

.about-access__caption {
  position: absolute;
  right: 12px;
  bottom: 26px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 24px;
  color: var(--color-heading);
}

.about-access__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  flex: 1 1 auto;
  padding: 28px 40px;
  background: linear-gradient(to right, #f2fbfd, var(--c-white));
}
.about-access__card--reverse .about-access__info {
  background: linear-gradient(to right, var(--c-white), #f2fbfd);
}

.about-access__label {
  margin: 0;
  font-family: var(--ff-jost);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 24px;
  color: var(--color-brand);
  white-space: pre-wrap;
}

.about-access__name {
  margin: 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-28);
  font-weight: 400;
  line-height: 42px;
  color: var(--color-heading);
}

.about-access__details {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.about-access__addr {
  flex: 0 1 360px;
}
.about-access__addr p {
  margin: 0 0 8px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 28px;
  color: var(--about-desc);
}
.about-access__addr p:last-child {
  margin-bottom: 0;
}

/* Its own line in the card, so it can take the padding needed to reach the
   handoff's 44px tap target without disturbing the surrounding copy. */
.about-access__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ff-jost);
  font-weight: 500;
  color: inherit;
  white-space: pre-wrap;
}

.about-access__route {
  flex: 0 1 360px;
  margin: 0;
  padding: 14px;
  background: #ecf9fd;
  border-radius: 16px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 28px;
  color: var(--about-desc);
}

/* Shared pill action, reused by the group card and the visitor dialog. */
.about-access__btn,
.visit-dialog__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 56px;
  padding: 12px 24px;
  background: var(--color-heading);
  border: 0;
  border-radius: 999px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.1em;
  color: var(--c-white);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.about-access__btn:hover,
.visit-dialog__action:hover {
  background: var(--c-teal-900);
}
.about-access__btn:focus-visible,
.visit-dialog__action:focus-visible {
  outline: 2px solid var(--c-teal-900);
  outline-offset: 4px;
}
.about-access__btn span {
  transition: transform 200ms ease;
}
.about-access__btn:hover span {
  transform: translateX(4px);
}

.about-access__guide {
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding: 32px;
  background: var(--about-reasons-bg);
  border-radius: 24px;
}

.about-access__guide-title {
  margin: 0 0 12px;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-24);
  line-height: 36px;
  color: var(--color-heading);
}

.about-access__guide-text {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 30px;
  color: var(--about-body);
}

.about-access__btn--guide span {
  transition: none;
}
.about-access__btn--guide:hover span {
  transform: none;
}

/* --- Visitor guidance dialog — Figma 18404:9461 --------------------------- */

.visit-dialog {
  width: min(840px, calc(100vw - 40px));
  max-height: 90dvh;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}
.visit-dialog::backdrop {
  background: rgba(7, 54, 68, 0.55);
}

.visit-dialog__panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 90dvh;
  padding: 40px;
  background: var(--c-white);
  border: 1px solid var(--page-nav-border, #d7ebf0);
  border-radius: 28px;
}

.visit-dialog__head {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.visit-dialog__title {
  margin: 0;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-32);
  font-weight: 400;
  line-height: 48px;
  color: var(--color-heading);
}

.visit-dialog__close {
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 44px;
  color: var(--color-heading);
  cursor: pointer;
}
.visit-dialog__close:focus-visible {
  outline: 2px solid var(--c-teal-900);
  outline-offset: 4px;
}

/* Internal scroll area, so a long list never pushes the dialog off screen. */
.visit-dialog__body {
  overflow-y: auto;
  min-height: 0;
}
.visit-dialog__body p {
  margin: 0 0 24px;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  line-height: 30px;
  color: var(--about-body);
}
.visit-dialog__body p:last-child {
  margin-bottom: 0;
}
.visit-dialog__body b {
  font-weight: 500;
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   12 / 門倉グループ — Figma 18442:9507
   -------------------------------------------------------------------------- */

.about-group {
  position: relative;
  overflow: hidden;
  padding-block: 104px;
  background: linear-gradient(
    to right,
    #f2fbfd 0%,
    #fbfeff 56%,
    #f0fafd 100%
  );
}

.about-group__wave {
  top: 84px;
  left: -366px;
  width: 1808px;
  height: 811px;
  animation: about-wave-drift 14s ease-in-out infinite alternate;
}

.about-group__circle {
  top: -145px;
  left: 1180px;
  width: 440px;
  height: 440px;
}

.about-group__lead {
  margin: 40px 0 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 34px;
  text-align: center;
  color: var(--about-body);
}

.about-group__card {
  display: flex;
  align-items: stretch;
  margin-top: 40px;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid rgba(190, 230, 242, 0.92);
  border-radius: 28px;
  box-shadow: 0 4px 30px rgba(26, 28, 33, 0.05);
}

.about-group__visual {
  position: relative;
  flex: 0 0 420px;
  overflow: hidden;
  background: linear-gradient(113.63deg, #074e6a 4.35%, #0a6c8d 53.04%, #21aed9 91.3%);
}
.about-group__visual-label {
  position: absolute;
  top: 30px;
  left: 40px;
  margin: 0;
  font-family: var(--ff-jost);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
/* The survey illustration stays static, per the handoff. */
.about-group__visual img {
  position: absolute;
  top: 56px;
  left: 40px;
  width: 340px;
  height: 340px;
}

.about-group__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
  padding: 40px;
}

.about-group__label {
  margin: 0 0 10px;
  font-family: var(--ff-jost);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 27px;
  color: var(--color-brand);
}

.about-group__name {
  margin: 0 0 10px;
  font-family: var(--ff-kosugi, 'Kosugi Maru', sans-serif);
  font-size: var(--fs-40);
  font-weight: 400;
  line-height: 60px;
  color: var(--color-heading);
}

.about-group__services {
  margin: 0;
  font-family: var(--ff-jp);
  font-size: 22px;
  font-weight: 500;
  line-height: 37px;
  color: var(--color-heading);
}

.about-group__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  background: var(--about-badge-border);
  border: 0;
}

.about-group__contact {
  display: flex;
  gap: 24px;
  align-items: center;
}

.about-group__details {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  line-height: 34px;
  color: var(--about-body);
}

/* --------------------------------------------------------------------------
   Responsive — handoff §05
   1024px: three-item groups become two columns.
   768px:  one column, 20px page padding, 64px section spacing.
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .about-message__body,
  .about-philosophy__inner {
    gap: 40px;
  }
  .about-reasons__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-philosophy__circle,
  .about-services__stamp,
  .about-teaser__decor {
    display: none;
  }
  .about-teaser__banner {
    gap: 32px;
    padding: 32px;
  }
  .about-teaser__photo {
    flex: 0 1 420px;
    width: 100%;
  }
  .about-company__inner {
    gap: 40px;
  }
  .about-history__inner {
    flex-wrap: wrap;
    gap: 40px;
  }
  .about-history__gallery {
    flex: 1 1 100%;
    flex-direction: row;
  }
  .about-history__photo--wide {
    flex: 1 1 auto;
    width: auto;
  }
  .about-permits__circle,
  .about-access__stamp,
  .about-group__circle {
    display: none;
  }
  .about-access__media {
    flex: 0 0 320px;
  }
  .about-access__details {
    flex-direction: column;
    gap: 12px;
  }
  .about-access__addr,
  .about-access__route {
    flex: 1 1 auto;
    width: 100%;
  }
  .about-group__card {
    flex-direction: column;
  }
  .about-group__visual {
    flex: 0 0 260px;
  }
  .about-group__visual img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
  }
}

@media (max-width: 48rem) {
  .about-message,
  .about-philosophy,
  .about-reasons,
  .about-services {
    padding-block: 64px;
  }
  .about-wrap {
    padding-inline: 20px;
  }

  /* Greeting order becomes title -> message -> signature -> photograph, which
     is the DOM order already, so the row simply stacks. */
  .about-message__body,
  .about-philosophy__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .about-message__copy,
  .about-message__figure,
  .about-philosophy__figure,
  .about-philosophy__story {
    flex: 1 1 auto;
  }
  .about-message__figure img {
    height: auto;
    aspect-ratio: 576 / 420;
  }
  .about-philosophy__figure img {
    height: auto;
    aspect-ratio: 576 / 490;
  }
  /* Photo below the story on mobile, per the greeting order rule. */
  .about-philosophy__inner {
    flex-direction: column-reverse;
  }

  .about-message__catch,
  .about-philosophy__catch,
  .about-reasons__catch,
  .about-services__catch {
    font-size: var(--fs-24);
    line-height: 1.6;
  }
  .about-message__text p,
  .about-philosophy__text,
  .about-reasons__lead {
    font-size: var(--fs-16);
    line-height: 1.9;
  }

  .about-reasons__grid,
  .about-services__grid {
    grid-template-columns: 1fr;
  }
  .about-reasons__title {
    font-size: var(--fs-24);
    line-height: 1.6;
  }

  .about-teaser {
    padding-bottom: 64px;
  }
  .about-teaser__banner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    border-radius: 24px;
  }
  .about-teaser__photo {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 582 / 390;
  }
  .about-teaser__btn {
    min-width: 0;
    width: 100%;
  }
  .about-teaser__catch,
  .about-teaser__text {
    font-size: var(--fs-16);
    line-height: 1.9;
  }
  .about-teaser__catch {
    font-size: var(--fs-24);
  }

  /* Company label/value pairs stack; the heading stops sticking. */
  .about-company__inner {
    flex-direction: column;
    gap: 32px;
  }
  .about-company__heading {
    position: static;
    flex: 1 1 auto;
  }
  .about-company__row {
    flex-direction: column;
    gap: 4px;
  }
  .about-company__row dt {
    flex: 1 1 auto;
  }

  /* History title above its timeline; no milestone is hidden. */
  .about-history__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .about-history__heading,
  .about-history__list,
  .about-history__gallery {
    flex: 1 1 auto;
  }
  .about-history__item {
    gap: 16px;
  }
  .about-history__year {
    min-width: 72px;
    font-size: var(--fs-28);
  }
  .about-history__event {
    font-size: var(--fs-16);
  }
  .about-history__item + .about-history__item::before {
    left: 84px;
  }
  .about-history__gallery {
    flex-direction: column;
  }
  .about-history__photo,
  .about-history__photo--wide {
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 390;
  }
  .about-history__pair .about-history__photo {
    aspect-ratio: 172 / 304;
  }

  .about-permits__group,
  .about-permits__group--slim {
    padding: 20px;
  }
  .about-permits__group-name,
  .about-permits__group--slim .about-permits__group-name {
    font-size: var(--fs-18);
    line-height: 1.6;
  }
  .about-permits__row {
    flex-direction: column;
    gap: 4px;
    padding: 16px;
  }
  .about-permits__row dt {
    flex: 1 1 auto;
  }
  .about-permits__lead,
  .about-access__lead,
  .about-group__lead {
    font-size: var(--fs-16);
    line-height: 1.9;
  }

  /* Address and contact stack; the photo sits above the details. */
  .about-access__card,
  .about-access__card--reverse {
    flex-direction: column;
  }
  .about-access__media {
    flex: 1 1 auto;
  }
  .about-access__media img {
    min-height: 0;
    height: auto;
    aspect-ratio: 460 / 400;
  }
  .about-access__pin,
  .about-access__card--reverse .about-access__pin {
    right: 20px;
    left: auto;
    bottom: -28px;
    top: auto;
  }
  .about-access__info,
  .about-access__card--reverse .about-access__info {
    padding: 40px 20px 24px;
    background: linear-gradient(to bottom, #f2fbfd, var(--c-white));
  }
  .about-access__btn {
    width: 100%;
  }
  .about-access__guide {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 24px;
  }

  .visit-dialog__panel {
    gap: 16px;
    padding: 24px;
    border-radius: 20px;
  }
  .visit-dialog__title {
    font-size: var(--fs-24);
    line-height: 1.5;
  }

  .about-group__contact {
    flex-direction: column;
    align-items: stretch;
  }
  .about-group__info {
    padding: 24px 20px;
  }
  .about-group__name {
    font-size: var(--fs-28);
    line-height: 1.5;
  }
  .about-group__services {
    font-size: var(--fs-18);
  }
  .about-group__details {
    font-size: var(--fs-16);
    line-height: 1.9;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — handoff §03: content visible immediately, stamps, waves
   and images static.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .about-stamp,
  .about-reasons__wave,
  .about-services__wave,
  .about-company__wave,
  .about-history__wave,
  .about-permits__wave,
  .about-access__wave,
  .about-group__wave {
    animation: none;
  }
  .about-teaser__btn,
  .about-teaser__arrow,
  .about-access__btn,
  .about-access__btn span {
    transition: none;
  }
  .about-teaser__btn:hover .about-teaser__arrow,
  .about-access__btn:hover span {
    transform: none;
  }
  .about-services__card,
  .about-services__photo,
  .about-services__arrow {
    transition: none;
  }
  .about-services__card:hover {
    transform: none;
  }
  .about-services__card:hover .about-services__photo {
    transform: none;
  }
  .about-services__card:hover .about-services__arrow {
    transform: none;
  }
}