/* ==========================================================================
   About / 会社概要 page (Figma: 0929更新 / About, 1440 x 4121 incl. footer)
   Depends on css/style.css for tokens, header, footer and css/sp.css for the SP header.
   ========================================================================== */

.page--about {
  --about-col-left: 480px;   /* heading column (x 120 → 600) */
  --about-col-right: 720px;  /* content column (x 600 → 1320) */
  --about-body-size: 16px;
  --about-body-lh: 26px;
}

/* ---------- hero: "Our Company" marquee + 会社概要 ---------- */

.about-hero {
  position: relative;
  height: 588px;
}
.about-hero__marquee {
  position: absolute;
  left: -924px; top: 173.5px;
  width: 200%;
  color: var(--color-red);
  pointer-events: none;
}
.about-hero__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.about-hero__track span {
  display: block;
  padding-right: 70px;   /* gap between repeats */
}
.about-hero__track svg { width: 1607.4px; height: 204.5px; }
.about-hero__title {
  position: absolute;
  left: 0; right: 0; top: 421px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
}

/* ---------- shared two-column section ---------- */

.about-sec {
  display: grid;
  grid-template-columns: var(--about-col-left) var(--about-col-right);
  align-items: start;
  padding: 0 var(--gutter);
}
.about-sec__head {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -0.04em;
}
.about-sec__en {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.about-catch {
  font-size: 40px;
  line-height: 59px;
  letter-spacing: -0.04em;
}

.about-divider {
  width: 1200px;
  height: 8px;
  margin: 101px auto 97px;
}

/* ---------- Mission ---------- */

.about-mission__catch { margin-top: -3px; }
.about-mission__text {
  margin-top: 20px;
  font-size: var(--about-body-size);
  line-height: 35px;
  letter-spacing: 0.05em;
}

/* ---------- Vision ---------- */

.about-vision .about-sec__head { margin-top: 3px; }
.vision { margin-top: 1.5px; }
.about-vision { padding-bottom: 1.5px; }
.vision__item {
  position: relative;
  height: 74px;
}
.vision__item + .vision__item { margin-top: 59.5px; }
.vision__title {
  font-family: var(--font-en);
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 0.03em;
}
.vision__text {
  margin-top: 10px;
  font-size: var(--about-body-size);
  line-height: var(--about-body-lh);
  letter-spacing: 0.05em;
}
.vision__icon {
  position: absolute;
  color: var(--color-red);
  overflow: visible;
}
.vision__item--yourself .vision__icon { left: 455px; top: -63.5px; width: 97.3px; height: 96.8px; }
.vision__item--side .vision__icon     { left: -145px; top: 32.5px; width: 92px; height: 96px; }
.vision__item--smiles .vision__icon   { left: 409px; top: -13.5px; width: 92px; height: 91px; }

/* ---------- CEO Message ---------- */

.about-ceo { row-gap: 66px; }
.about-ceo .about-sec__head { grid-column: 1 / -1; }
.about-ceo__photo {
  width: 360px; height: 480px;
  object-fit: cover;
}
.about-ceo__catch {
  margin-top: -3px;
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -0.04em;
}
.about-ceo__text {
  margin-top: 32px;
  font-size: var(--about-body-size);
  line-height: var(--about-body-lh);
  letter-spacing: 0.05em;
}
.about-ceo__text p + p { margin-top: var(--about-body-lh); }
.about-ceo__sign {
  margin-top: 32px;
  font-size: var(--about-body-size);
  line-height: var(--about-body-lh);
  text-align: right;
}
.about-ceo__sign span { margin-left: 1.2em; }

/* ---------- Company Information ---------- */

.about-info { padding-bottom: 161px; }   /* footer overlaps by 40px (style.css) */
.info { margin: 1.5px 0 0; }
.info__row {
  display: flex;
  padding: 16px 0;
  border-top: 1px solid var(--color-white);
  font-size: var(--about-body-size);
  line-height: var(--about-body-lh);
}
.info__row:last-child { border-bottom: 1px solid var(--color-white); }
.info dt { flex: none; width: 180px; }
.info dd { margin: 0; font-family: var(--font-en), var(--font-ja);  }
.info__list { list-style: decimal inside; }
.info dd a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--duration-normal) var(--ease-out-expo);
}
.info dd a:hover { background-size: 100% 1px; }
.info dd a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ==========================================================================
   Smartphone (390px canvas, scaled by --page-scale; see css/sp.css)
   No SP frame in Figma — sizes follow the TOP SP / Members SP type scale.
   ========================================================================== */

@media (max-width: 767px) {
  html[data-sp] .page--about { --about-body-size: 14px; --about-body-lh: 24px; }

  html[data-sp] .about-hero { height: 316px; }
  html[data-sp] .about-hero__marquee { left: -432px; top: 98px; }
  html[data-sp] .about-hero__track span { padding-right: 31.5px; }
  html[data-sp] .about-hero__track svg { width: 723.3px; height: 92px; }
  html[data-sp] .about-hero__title { top: 214px; font-size: 28px; }

  html[data-sp] .about-sec { display: block; padding: 0 30px; }
  html[data-sp] .about-sec__head { gap: 14px; font-size: 24px; line-height: 34px; letter-spacing: -0.04em; }
  html[data-sp] .about-sec__en { font-size: 12px; }
  html[data-sp] .about-sec__body { margin-top: 24px; }
  html[data-sp] .about-catch { font-size: 24px; line-height: 34px; letter-spacing: -0.04em; }

  html[data-sp] .about-divider { width: 330px; height: 6px; margin: 60px auto 56px; }

  html[data-sp] .about-mission__catch { margin-top: 0; }
  html[data-sp] .about-mission__text { margin-top: 18px; line-height: 25px; letter-spacing: 0.05em; }
  html[data-sp] .vision { margin-top: 24px; }
  html[data-sp] .about-vision { padding-bottom: 0; }
  html[data-sp] .vision__text { letter-spacing: 0.05em; }

  html[data-sp] .vision__item { height: auto; }
  html[data-sp] .vision__title { padding-right: 72px; }
  html[data-sp] .vision__item + .vision__item { margin-top: 34px; }
  html[data-sp] .vision__title { font-size: 26px; line-height: 30px; }
  html[data-sp] .vision__text { margin-top: 8px; }
  html[data-sp] .vision__item .vision__icon { left: auto; right: 0; top: -2px; }
  html[data-sp] .vision__item--yourself .vision__icon { width: 58px; height: 58px; top: -12px; }
  html[data-sp] .vision__item--side .vision__icon     { width: 52px; height: 54px; }
  html[data-sp] .vision__item--smiles .vision__icon   { width: 54px; height: 53px; }

  html[data-sp] .about-ceo__photo { width: 330px; height: 440px; margin-top: 24px; }
  html[data-sp] .about-ceo__body { margin-top: 32px; }
  html[data-sp] .about-ceo__catch { font-size: 24px; line-height: 34px; }
  html[data-sp] .about-ceo__text { margin-top: 20px; letter-spacing: 0.05em; }
  html[data-sp] .about-ceo__sign { margin-top: 24px; }

  html[data-sp] .about-info { padding-bottom: 90px; }   /* SP footer overlaps by 20px */
  html[data-sp] .info__row { padding: 14px 0; font-size: 13px; }
  html[data-sp] .info dt { width: 96px; }
  html[data-sp] .info dd { flex: 1; min-width: 0;  overflow-wrap: anywhere; }
}