/* ============================================
   About Us ページ固有スタイル
   ============================================ */

/* Figma node-id=432-4354（Frame 44：パンくず＋見出し）*/
.about-header {
  background: var(--color-bg);
  border-bottom: 1px solid #e2e2e2;
  padding: 100px 90px 60px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breadcrumb-item {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.68px;
  text-decoration: none;
}

.breadcrumb-item--home {
  color: #323232;
}

.breadcrumb-item--current {
  color: #7a7a7a;
}

.breadcrumb-caret {
  display: flex;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.breadcrumb-caret img {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.55;
}

.page-heading {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.page-heading-sub {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 2.66px;
  color: #3b3e40;
}

.page-heading-title {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 48px;
  letter-spacing: 3.84px;
  color: #321100;
}

@media (max-width: 640px) {
  .about-header {
    /* 上余白(60px→30px)・見出しから区切り線(border-bottom)までの余白(40px→20px)をSPのみ半分に */
    padding: 30px 20px 20px;
    gap: 32px;
  }

  .breadcrumb-item {
    font-size: 12px;
  }

  .page-heading {
    /* 「私たちについて」→「About Us」の余白をSPのみ半分に(16px→8px) */
    gap: 8px;
  }

  .page-heading-sub {
    font-size: 15px;
    letter-spacing: 2px;
  }

  .page-heading-title {
    font-size: clamp(32px, 10vw, 48px);
    letter-spacing: 2px;
  }
}

/* ============================================
   About Us 本文セクション（Figma node-id=432-4257）
   ============================================ */

/* about.htmlのみ読み込むファイルなので、ここでの上書きは他ページ（index.html等）の
   .content-columnには影響しない */
.content-column {
  background: var(--color-bg);
}

.about-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 80px 39px 160px;
  background: var(--color-bg);
}

/* ---------- セクション共通見出し（EN大文字＋JP、中央揃え） ---------- */
.about-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.about-section-heading-en {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 48px;
  letter-spacing: 3.84px;
  color: #321100;
  line-height: 1;
}

.about-section-heading-jp {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 2.88px;
  color: var(--color-black);
  line-height: 1.8;
}

/* ---------- Greeting（会社紹介） ---------- */
.about-greeting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 1088px;
}

/*
 * SP専用／PC専用の改行切り替え（index.htmlの.greeting-copy br.sp-breakと同じ仕組み）。
 * PCは常にpc-breakのみ有効（＝元の改行のまま）、SP（768px以下）はsp-breakのみ有効。
 */
br.pc-break {
  display: inline;
}

br.sp-break {
  display: none;
}

@media (max-width: 768px) {
  br.pc-break {
    display: none;
  }

  br.sp-break {
    display: inline;
  }

  /*
   * SP版のみ、通常の改行ではなく「段落間と同じ余白」を作るためのマーカー。
   * .about-greeting-body の実際の段落間gap（20px、下の@media内で指定）と
   * 同じ高さのブロックにすることで、段落を分けなくても見た目上同じ余白になる。
   */
  br.sp-break.sp-para-gap {
    display: block;
    height: 20px;
  }
}

.about-greeting-photo {
  width: 100%;
  aspect-ratio: 1088 / 544;
  border: 1px solid var(--color-black);
  border-radius: 12px;
  overflow: hidden;
}

.about-greeting-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-greeting-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 756px;
  text-align: center;
  font-family: var(--font-jp);
  color: var(--color-black);
}

.about-greeting-title {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 2.88px;
  line-height: 1.8;
}

.about-greeting-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 16px;
  letter-spacing: 1.92px;
  line-height: 1.8;
}

.about-greeting-body p {
  margin: 0;
}

/* ---------- STRONG POINTS ---------- */
.about-strongpoints {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

.about-strongpoints-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 1088px;
}

.about-strongpoint {
  display: flex;
  align-items: center;
  gap: 40px;
}

.about-strongpoint--reverse {
  flex-direction: row-reverse;
}

.about-strongpoint-photo {
  flex: none;
  width: 436px;
  height: 300px;
  border: 1px solid var(--color-black);
  border-radius: 12px;
  overflow: hidden;
}

.about-strongpoint-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-strongpoint-body {
  flex: 1;
  min-width: 0;
  max-width: 612px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-strongpoint-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.about-strongpoint-num {
  flex: none;
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: #686e71;
}

.about-strongpoint-head h3 {
  flex: 1;
  min-width: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 2.88px;
  line-height: 1.8;
  color: var(--color-black);
}

.about-strongpoint-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 8px;
  font-family: var(--font-jp);
  font-size: 16px;
  letter-spacing: 1.92px;
  line-height: 1.8;
  color: var(--color-black);
}

.about-strongpoint-text p {
  margin: 0;
}

/* ---------- Message（代表メッセージ） ---------- */
.about-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

.about-message-inner {
  display: flex;
  /* PC（768px超、下の@media(max-width:768px)で縦積みに切り替わるまで）では
     左の画像ブロックを右のテキストブロックの高さに合わせて伸ばす */
  align-items: stretch;
  gap: 40px;
  width: 100%;
  max-width: 1088px;
}

.about-message-photo-col {
  flex: none;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-message-photo {
  width: 100%;
  height: 350px;
  border: 1px solid var(--color-black);
  border-radius: 12px;
  overflow: hidden;
}

.about-message-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 元画像は頭上に余白があるため、topだと余白ごと表示され人物が下寄りに見える。
     少し下（25%）を基準点にすることで余白を詰め、人物を上寄りに見せる */
  object-position: center 25%;
  display: block;
}

.about-message-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 16px;
  font-family: var(--font-jp);
}

.about-message-name {
  font-size: 20px;
  letter-spacing: 2.4px;
  color: var(--color-black);
}

.about-message-name-en {
  font-size: 14px;
  letter-spacing: 1.92px;
  color: #7d7d7d;
}

.about-message-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: var(--font-jp);
  color: var(--color-black);
}

.about-message-lead {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2.88px;
  line-height: 1.8;
}

.about-message-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 16px;
  letter-spacing: 1.92px;
  line-height: 1.8;
}

.about-message-text p {
  margin: 0;
}

/* ---------- Members ---------- */
.about-members {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

.about-members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 8px;
  width: 100%;
  max-width: 1088px;
}

.about-member-card {
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.about-member-photo {
  width: 100%;
  height: 216px;
  position: relative;
}

.about-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/*
 * B.Nさんのみ：元画像の人物が上寄り・大きめのため、他カードより顔が大きく
 * 頭頂部が上端に接してしまう。画像を上端基準で90%に縮小して顔の大きさと
 * 頭上の余白を他カードに揃える。縮小後も下端が枠に届くよう、高さは
 * あらかじめ 100% / 0.9 にしておく。左右にできる隙間は元画像の背景色で埋める。
 */
.about-member-photo--bn {
  background-color: #fbf6ea;
  overflow: hidden;
}

.about-member-photo--bn img {
  height: calc(100% / 0.9);
  object-position: center 8%;
  transform: scale(0.9);
  transform-origin: center top;
}

/*
 * 画像未準備のメンバー用フォールバック。<img>のonerrorでこのクラスを
 * 付与しつつ画像要素自体は非表示にし、他の「写真なし」表示
 * （.review-avatar--placeholder）と同じ人型アイコンを表示する。
 * 実ファイルが同じパスに配置され次第、onerrorが発火しなくなり
 * 自動的に写真表示へ切り替わる（HTML側の変更は不要）。
 */
.about-member-photo.is-photo-missing {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9c9c2'%3E%3Cpath d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.68-10 5v3h20v-3c0-3.32-6.67-5-10-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72px;
}

.about-member-role {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: #434343;
  color: var(--color-white);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.48px;
  padding: 4px 16px;
  border-radius: 2px;
}

.about-member-info {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-member-name {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.32px;
  color: #2d2d2d;
}

.about-member-name-en {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28px;
  color: #2d2d2d;
}

/* ---------- Company（会社概要） ---------- */
.about-company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

.about-company-table {
  width: 100%;
  max-width: 1088px;
  border-top: 1px solid #e7e7e7;
}

.about-company-row {
  display: flex;
  gap: 80px;
  padding: 32px 28px;
  border-bottom: 1px solid #e7e7e7;
  font-family: var(--font-jp);
  font-size: 16px;
  letter-spacing: 0.32px;
  line-height: 1.6;
  color: var(--color-black);
}

.about-company-row dt {
  flex: none;
  width: 200px;
  font-weight: 500;
}

.about-company-row dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: justify;
}

.about-company-row dd p {
  margin: 0;
}

/* ---------- Access（アクセス） ---------- */
.about-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 57px;
  width: 100%;
}

.about-access-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1088px;
}

.about-access-map {
  position: relative;
  width: 100%;
  height: 400px;
  background: var(--color-bg);
  border: 1px solid var(--color-black);
  border-radius: 12px;
  overflow: hidden;
}

.about-access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.about-access-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}

.about-access-map-link:hover {
  opacity: 0.7;
}

.about-access-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-jp);
  font-size: 16px;
  letter-spacing: 0.32px;
  line-height: 1.6;
  color: var(--color-black);
}

.about-access-text p {
  margin: 0;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1024px) {
  .about-members-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .about-body {
    gap: 72px;
    /* 区切り線からメインビジュアル画像までの上余白をSPのみ半分に(56px→28px) */
    padding: 28px 24px 100px;
  }

  .about-section-heading-en {
    font-size: 34px;
    letter-spacing: 2px;
  }

  .about-section-heading-jp {
    font-size: 19px;
    letter-spacing: 1.5px;
  }

  /* 「ASKの3つの強み」見出しのみSP版でさらに縮小する（他セクションの見出しは19pxのまま） */
  .about-strongpoints .about-section-heading-jp {
    font-size: 18px;
  }

  .about-greeting,
  .about-strongpoints,
  .about-message,
  .about-members,
  .about-company,
  .about-access {
    gap: 48px;
  }

  /*
   * SP版のみ、街並み写真を.about-bodyの左右padding（24px）に少し食い込ませて
   * 一回り大きく見せる（本文テキストの幅・余白はそのまま）。
   * aspect-ratioで高さは横幅に応じて自動追従、border-radius/borderも維持される。
   */
  .about-greeting-photo {
    width: calc(100% + 28px);
    height: 240px;
    margin: 0 -14px;
  }

  .about-greeting-title {
    font-size: 19px;
    letter-spacing: 1.5px;
  }

  .about-greeting-body {
    font-size: 14px;
    letter-spacing: 1px;
    gap: 20px;
  }

  .about-strongpoint,
  .about-strongpoint--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .about-strongpoint-photo {
    width: 100%;
    height: 210px;
  }

  .about-strongpoint-head h3 {
    font-size: 19px;
    letter-spacing: 1.5px;
  }

  /*
   * 「」（かぎ括弧）は字形の左側に余白を持つグリフのため、行頭に来ると
   * 他の行より少し内側から始まって見える。SPでは改行位置の都合で
   * 括弧が行頭に来るため、視覚的に左端を揃うよう少し左に寄せる。
   */
  .about-strongpoint-bracket {
    margin-left: -0.3em;
  }

  .about-strongpoint-num {
    font-size: 28px;
  }

  .about-strongpoint-text {
    font-size: 14px;
    letter-spacing: 1px;
    padding: 0;
  }

  .about-message-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .about-message-photo-col {
    width: 100%;
  }

  /*
   * SP版のみ、名前・見出し・本文のテキストブロックの幅を300pxに制限し、
   * ブロックごと親要素の中央に配置する（写真自体は対象外＝width:100%のまま）。
   * テキスト自体の左揃えはブロック内でそのまま維持される（index.htmlの
   * .greeting-copyと同じ300px方針だが、こちらは名前ブロックと本文ブロックが
   * DOM上別要素のため個別に指定）。
   */
  .about-message-name-row,
  .about-message-body {
    max-width: 300px;
    margin: 0 auto;
  }

  /*
   * PC用のpadding: 0 16px（写真の縁からの余白目的）がSPでは見出し・本文と
   * 左端16pxずれる原因になっていたため、SPのみ0にして左端を揃える。
   */
  .about-message-name-row {
    padding: 0;
  }

  .about-message-name {
    font-size: 16px;
  }

  .about-message-lead {
    font-size: 19px;
    letter-spacing: 1.5px;
  }

  .about-message-text {
    font-size: 14px;
    letter-spacing: 1px;
  }

  /*
   * SP版は2カラム固定（PC/タブレットの4・3カラムには影響しない）。
   * gapで適度な余白を確保しつつ、カード幅が狭くなる分カード内部
   * （余白・文字サイズ・役職バッジ）も縮小して可読性を保つ。
   * 人数が奇数の場合も、gridの余りセルは自動的に空くだけでレイアウトは崩れない。
   */
  .about-members-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
  }

  /* SP版は画像エリアの高さを変更前と同じ180pxのまま維持する（PC版のみ216pxに拡大） */
  .about-member-photo {
    height: 180px;
  }

  .about-member-info {
    padding: 12px 12px 14px;
    gap: 6px;
  }

  .about-member-name {
    font-size: 14px;
    letter-spacing: 0.2px;
  }

  .about-member-name-en {
    font-size: 12px;
    letter-spacing: 0.2px;
  }

  .about-member-role {
    left: 6px;
    bottom: 6px;
    font-size: 10px;
    letter-spacing: 0.3px;
    padding: 3px 10px;
  }

  .about-company-row {
    flex-direction: column;
    gap: 8px;
    padding: 20px 4px;
  }

  .about-company-row dt {
    width: auto;
    font-weight: 700;
  }

  .about-access-map {
    height: 240px;
  }
}