/* ==========================================================================
   About page (Figma node 9:10 "03_ABOUT")
   ========================================================================== */

/* 本文カラムは最大960px(+左右ガター)。
   先方指示(docs/リンク修正指示0919.pdf p.4「左右最長のところに合わせて画面センターに
   なる感じで全体を右にずらしたい」)により、画面中央に寄せる。
   最も広い要素である写真ブロック(960px)が画面センターに来る配置。
   ※2026-09-13に一度これを左寄せへ変更したが、先方FBで中央寄せへ戻した。
     他ページ(.container基準の左寄せ)とは意図的に揃えていない。 */
.about-hero {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  padding-top: 24px;
  padding-bottom: clamp(32px, 5vw, 56px);
}

.about-hero__kicker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 36px);
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: rgba(0, 0, 0, 0.75);
  /* Figma: kicker 2行目のink上端→titleのink上端 = 99px */
  margin-bottom: 40px;
  max-width: 30em;
}

.about-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.25;
  letter-spacing: -0.05em;
  margin: 0;
}

.about-story {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: clamp(40px, 6vw, 72px);
}

/* Figmaでは1文=1行で、行間は全行34px均等(段落間の余白はない) */
.about-story p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 34px;
  margin: 0;
}

.about-story p.about-story__question {
  font-size: 24px;
  line-height: 34px;
  /* Figma: 直前の行のink上端から65.5px = 1行分の空行 */
  margin-top: 33px;
}

/* Figma: 写真ブロックは 960 x 536 のモザイク画像1枚 */
.about-photos {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.about-photos__image {
  width: 100%;
  max-width: 960px;
  height: auto;
}

.about-stats {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: clamp(32px, 5vw, 56px);
}

.about-stats__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.5;
  letter-spacing: -0.05em;
  margin-bottom: 24px;
}

.about-stats__body {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.7;
  max-width: 42em;
}

.about-logos {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: clamp(32px, 5vw, 56px);
}

.about-logos__group {
  /* Figma: ロゴ行の下端→次のラベル上端 = 約53px */
  margin-bottom: 52px;
}

.about-logos__group:last-child {
  margin-bottom: 0;
}

.about-logos__group-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.7px;
  color: rgba(0, 0, 0, 0.3);
  margin-bottom: 18px;
}

.about-logos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
}

/* 素材PNGごとに余白量が違うため、行ごとにgapを調整してFigmaの行幅に合わせる */
.about-logos__group:nth-child(1) .about-logos__row { gap: 34px; }
.about-logos__group:nth-child(2) .about-logos__row { gap: 56px; }

/* Figmaでは各ロゴが固有のサイズを持つ(高さ揃えではない)。
   値は「Figma上のロゴ実体の幅 × (素材PNGの幅 ÷ 素材の実体幅)」で算出 */
.about-logos__row img {
  height: auto;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.about-logos__row .logo--mcdonalds   { width: 64px; }
.about-logos__row .logo--mccafe      { width: 105px; }
.about-logos__row .logo--honda       { width: 148px; }
.about-logos__row .logo--avon        { width: 134px; }
.about-logos__row .logo--toshiba     { width: 156px; }
.about-logos__row .logo--tokyo2020   { width: 148px; }
.about-logos__row .logo--tmg         { width: 179px; }
.about-logos__row .logo--dentsu      { width: 143px; }
.about-logos__row .logo--zenrin      { width: 127px; }
.about-logos__row .logo--nitto       { width: 166px; }
.about-logos__row .logo--bdo         { width: 80px; }
.about-logos__row .logo--yomiuri     { width: 74px; }
.about-logos__row .logo--mazdaspeed  { width: 183px; }

/* Figma: 区切り線は本文カラム幅 950px。
   他ブロックと同じ列に乗せるため、幅と中央寄せを揃える。 */
.about-divider-wrap {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  padding-block: 0;
}

.about-divider {
  max-width: 950px;
  margin-inline: 0;
}

.about-why {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  /* Figma: リンクのink上端→BACKGROUNDのink上端 = 149px */
  padding-bottom: clamp(40px, 9vw, 127px);
}

.about-why__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.25;
  margin-bottom: 24px;
}

.about-why p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 30px;
  margin: 0 0 30px; /* Figma: 段落間は空行1行分(=30px)ぶん空く */
}

.about-why .about-why__emphasis {
  font-weight: 600;
}

/* Figma: 本文最終行のink上端→リンクのink上端 = 134px */
.about-why .link-arrow {
  margin-top: 76px;
}

.about-background {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  /* Figma: BACKGROUND最終行のink上端→クロージングのink上端 = 113.5px */
  padding-bottom: clamp(40px, 6vw, 79px);
}

.about-background__label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 4px;
  color: rgba(0, 0, 0, 0.59);
  /* Figma: BACKGROUNDのink上端→氏名のink上端 = 56.5px */
  margin-bottom: 29px;
}

/* Figmaでは見出し(24px)と本文(20px)が段落余白なしで連続して流れる */
.about-background__name,
.about-background__block-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 35px;
  margin: 0;
}

.about-background__role,
.about-background__block-body {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 30px;
  margin: 0;
}

.about-background__block {
  margin: 0;
}

.about-closing {
  max-width: calc(960px + var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.about-closing p {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.5;
  max-width: 22em;
}