/* =========================
   About（私たちについて）
   - コンテンツ幅は1100px（左右padding 16px）
   - line-height は倍率で指定する。高さをそろえる必要がある箇所だけ
     padding で差分を補う（各箇所のコメントに内訳を記載）
   - 「Wisaを知る」以降のSPの値は、PCを縦積みにした調整値（※印のコメント）
========================= */
.page-about {
  background: var(--color-white);
}

.about {
  position: relative;
  padding-top: calc(var(--header-top) + var(--header-height) + 144px);
  padding-bottom: 200px;

  @media (max-width: 768px) {
    /* タイトルの上端をページ上端から160pxにする（SPヘッダーは top:0 / height:80px） */
    padding-top: 160px;
    padding-bottom: 100px;
  }
}

/* .about-inner の定義は css/sub-page.css（project-detail-innerと共通化） */

/* 本文は固定ページのブロック（inc/patterns/about.php）。ブロックが付けるレイアウト用の余白は使わず、
   余白は下の各クラスで指定する（このルールは詳細度0のため、各クラスの指定が優先される） */
.about :where(.wp-block-group, .wp-block-table) > * {
  margin-block: 0;
}

/* グレーの画像プレースホルダ */
.about-ph {
  display: block;
  width: 100%;
  background: #cbcbcb;
}

/* =========================
   ページ上部（タイトル・目次）
========================= */
.about-eyebrow {
  margin: 0;
  /* 高さを100pxにそろえる（文字80px + 上下10px） */
  padding-block: 10px;
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text);

  @media (max-width: 960px) {
    padding-block: 6px;
    font-size: 48px;
  }

  @media (max-width: 768px) {
    /* 高さを60pxにそろえる（文字48px + 上下6px） */
    padding-block: 6px;
    font-size: 48px;
  }
}

.about-kana {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  /* 高さを19pxにそろえる（文字16px + 上下1.5px） */
  padding-block: 1.5px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);

  .title-sircle {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }
}

/* 目次（ページ内リンク） */
.about-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 100px 0 0;

  a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 高さを17pxにそろえる（文字14px + 上下1.5px） */
    padding-block: 1.5px;
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #858585;

    &::before {
      content: "";
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #858585;
    }

    &::after {
      content: "";
      flex-shrink: 0;
      width: 24px;
      height: 12px;
      background: url("../assets/arrow-down.svg") center / contain no-repeat;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* 背景装飾の位置指定は css/decor.css に集約（.page-about 用の上書きもそちら） */

/* =========================
   リード
========================= */
.about-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: 60px;
  text-align: center;

  @media (max-width: 768px) {
    gap: 28px;
    margin-top: 60px;
  }
}

.about-lead-catch {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-blue);

  @media (max-width: 768px) {
    font-size: 24px;
  }
}

.about-lead-text {
  width: 100%;
  max-width: 572px;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

/* =========================
   共通パーツ（見出し）
========================= */
/* 青＋ピンクの丸が付く見出し（H2） */
.about-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  /* 高さを38pxにそろえる（文字32px + 上下3px） */
  padding-block: 3px;
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  scroll-margin-top: calc(var(--header-top) + var(--header-height) + 32px);

  @media (max-width: 960px) {
    font-size: 24px;
  }

  /* 2行になった時、丸は1行目に揃える */
  @media (max-width: 768px) {
    align-items: flex-start;
    font-size: 24px;
    scroll-margin-top: 100px;
  }
}

.about-heading::before {
  content: "";
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  background: url("../assets/h4_deco.svg") center / contain no-repeat;
}

/* 左のピンク線＋グレー帯（H3） */
.about-h3 {
  margin: 0;
  /* 高さを66pxにそろえる（文字22px + 上下22px） */
  padding: 22px 20px;
  border-left: 4px solid var(--color-pink);
  border-radius: 4px;
  background: #fafafa;
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);

  @media (max-width: 768px) {
    /* 高さを46pxにそろえる（文字18px + 上下14px） */
    padding: 14px 20px;
    font-size: 18px;
  }
}

/* 下線（H4） */
.about-h4 {
  margin: 0;
  /* 高さを34pxにそろえる（文字18px + 下余白12px + 行間差分） */
  padding: 2px 0 14px;
  border-bottom: 2px solid #cbcbcb;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);

  /* ※ project-detail の H4(SP) に合わせて16px */
  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.about-text {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

/* =========================
   デジタルユースワークを知る
========================= */
.about-digital {
  margin-top: 120px;

  @media (max-width: 768px) {
    margin-top: 100px;
  }
}

.about-digital-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 40px;

  @media (max-width: 768px) {
    gap: 32px;
    margin-top: 28px;
  }
}

/* =========================
   Wisaを知る
   ※ SPの余白は上のセクションの PC→SP 比率に合わせる
     （PC 120→SP 100 / PC 80→SP 32 / PC 40→SP 28）
========================= */
.about-wisa {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 120px;

  @media (max-width: 768px) {
    gap: 32px;
    margin-top: 100px;
  }
}

.about-wisa-lead {
  margin: 40px 0 0;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);

  @media (max-width: 768px) {
    margin-top: 28px;
  }
}

/* 活動の3つの柱（直径320pxの円） */
.about-pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-top: 28px;
  }
}

.about-pillar {
  --pillar-color: var(--color-yellow);
  --pillar-label-color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--pillar-color);
  border-radius: 50%;
  background: var(--color-white);
  text-align: center;

  &.is-development {
    --pillar-color: var(--color-pink);
    --pillar-label-color: var(--color-white);
  }

  &.is-creation {
    --pillar-color: var(--color-blue);
    --pillar-label-color: var(--color-white);
  }
}

/* イラスト 100×100。本文のブロックには環境ごとの画像URLを保存しないため、CSS で出す */
.about-pillar::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  background: var(--pillar-icon) center / contain no-repeat;
}

.about-pillar.is-research {
  --pillar-icon: url("../assets/Research-icon.svg");
}

.about-pillar.is-development {
  --pillar-icon: url("../assets/Development-icon.svg");
}

.about-pillar.is-creation {
  --pillar-icon: url("../assets/Creation-icon.svg");
}

.about-pillar-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 12px 0 0;
  padding: 4px 32px;
  border-radius: 50px;
  background: var(--pillar-color);
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pillar-label-color);
}

.about-pillar-text {
  width: 239px;
  max-width: calc(100% - 40px);
  margin: 12px 0 0;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

/* Vision / Mission / Value */
.about-vmv {
  display: flex;
  flex-direction: column;
  gap: 68px;
  margin: 0;

  @media (max-width: 768px) {
    gap: 40px;
  }
}

.about-vmv-head {
  display: flex;
  flex-direction: column;
  color: #000000;
}

.about-vmv-en {
  margin: 0;
  font-family: var(--font-en);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
}

.about-vmv-ja {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.about-vmv-text {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #000000;

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

/* メンバーを知る */
.about-members {
  display: grid;
  /* 214px × 4列を1100px幅に均等配置、行間60px */
  grid-template-columns: repeat(4, minmax(0, 214px));
  justify-content: space-between;
  gap: 60px 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;

  /* 列は 4列（961px以上）・3列（769〜960px）・2列（768px以下） */
  @media (max-width: 960px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
    margin-top: 28px;
  }
}

.about-member {
  display: block;
  /* 214px より大きくしない。列の幅が広い（3列・2列）ときは列の中で中央に置く */
  width: 100%;
  max-width: 214px;
  justify-self: center;
}

/* SP も列に並べるので、写真は列の幅いっぱいにする（css/sub-page.css の SP の幅 214px 固定を上書き。プロジェクト詳細は 214px のまま） */
@media (max-width: 768px) {
  .about-member-photo-wrap {
    width: auto;
  }
}

/* 閉じているとき（.is-open なし）は2行分まで（4列 8人・3列 6人・2列 4人）。区切りは上の .about-members の列と合わせる
   「View more」は、ここで隠れるメンバーがいるときだけ js/main.js が出す
   閉じている途中（.is-closing）は、縮み終わるまで全員を出したままにする */
.about-members:not(.is-open, .is-closing) > li:nth-child(n + 9) {
  display: none;
}

@media (max-width: 960px) {
  .about-members:not(.is-open, .is-closing) > li:nth-child(n + 7) {
    display: none;
  }
}

@media (max-width: 768px) {
  .about-members:not(.is-open, .is-closing) > li:nth-child(n + 5) {
    display: none;
  }
}

/* 開閉中（js/main.js が高さを指定する間）は、高さをなめらかに変えてはみ出しを隠す */
.about-members.is-animating {
  overflow: hidden;
  transition: height 0.5s ease;
}

/* 開いたときに出てくるメンバーは、少し下からふわっと出す */
.about-members.is-open > li:nth-child(n + 9) {
  animation: about-member-in 0.5s ease both;
}

@media (max-width: 960px) {
  .about-members.is-open > li:nth-child(n + 7) {
    animation: about-member-in 0.5s ease both;
  }
}

@media (max-width: 768px) {
  .about-members.is-open > li:nth-child(n + 5) {
    animation: about-member-in 0.5s ease both;
  }
}

@keyframes about-member-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-members.is-animating {
    transition: none;
  }

  .about-members.is-open > li {
    animation: none !important;
  }
}

/* .about-member-card（カード全体がクリック可能なボタン）の定義は
   css/sub-page.css（project-member-cardと共通化） */

/* .about-member-photo-wrap / .about-member-photo の定義は
   css/sub-page.css（project-member-photo-wrap/photoと共通化） */

/* 4列の市松模様で円形（1行目 2・4列目 / 2行目 1・3列目） */
.about-members > li:is(:nth-child(8n + 2), :nth-child(8n + 4), :nth-child(8n + 5), :nth-child(8n + 7)) .about-member-photo-wrap {
  border-radius: 50%;
}

/* 960px以下は3列になるため、4列基準の市松模様パターンが
   列とズレる。列数が奇数(3)の市松模様は位置の偶数/奇数と一致するため、
   そのまま奇数=四角・偶数=丸で上書きする */
@media (max-width: 960px) {
  .about-members > li:nth-child(odd) .about-member-photo-wrap {
    border-radius: 8px;
  }

  .about-members > li:nth-child(even) .about-member-photo-wrap {
    border-radius: 50%;
  }
}

/* 768px以下は2列。1行目 四角・丸 / 2行目 丸・四角 の繰り返し（4つで1周） */
@media (max-width: 768px) {
  .about-members > li:is(:nth-child(4n + 1), :nth-child(4n)) .about-member-photo-wrap {
    border-radius: 8px;
  }

  .about-members > li:is(:nth-child(4n + 2), :nth-child(4n + 3)) .about-member-photo-wrap {
    border-radius: 50%;
  }
}

.about-member-role {
  display: block;
  /* 写真→役職 20px + 行間差分1px */
  margin-top: 21px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #000000;
  text-align: center;
}

.about-member-name {
  display: block;
  /* 役職→名前 12px + 行間差分2px */
  margin-top: 14px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #000000;
  text-align: center;
}

/* 数字から知る */
.about-number {
  margin-top: 40px;

  @media (max-width: 768px) {
    margin-top: 28px;
  }
}

.about-number-text {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

.about-number-media {
  display: grid;
  /* 540 × 330 の画像を2枚、間20pxで並べる */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;

  @media (max-width: 768px) {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }
}

.about-number-ph {
  aspect-ratio: 540 / 330;
  border-radius: 12px;
}

/* 画像ブロック。画像が未設定の間はグレーの枠だけを出す */
.about-number-media .wp-block-image {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 540 / 330;
  border-radius: 12px;
  background: #cbcbcb;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  img:not([src]),
  img[src=""] {
    display: none;
  }
}

/* 団体概要（表ブロック。.about-profile-table は外側の figure に付く） */
.about-profile-table {
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
  border-collapse: collapse;
  font-family: var(--font-jp);
  font-size: 15px;
  text-align: left;
  color: #000000;

  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }

  /* コアの表ブロックの枠線(.wp-block-table td, th)を打ち消す */
  th,
  td {
    padding: 20px 0;
    border: 0;
    border-top: 1px solid #cbcbcb;
    vertical-align: top;
  }

  tr:last-child th,
  tr:last-child td {
    border-bottom: 1px solid #cbcbcb;
  }

  th {
    width: 260px;
    padding-right: 24px;
    font-weight: 700;
    line-height: 1;
  }

  td {
    font-weight: 400;
    line-height: 1.5;
  }

  /* ※ project-detail の表(SP)と同じ縦積み */
  @media (max-width: 768px) {
    display: block;
    margin-top: 28px;

    table,
    tbody,
    tr,
    th,
    td {
      display: block;
      width: auto;
    }

    tr {
      padding: 20px 0;
      border-top: 1px solid #cbcbcb;
    }

    tr:last-child {
      border-bottom: 1px solid #cbcbcb;
    }

    th,
    td,
    tr:last-child th,
    tr:last-child td {
      padding: 0;
      border: none;
    }

    td {
      margin-top: 8px;
    }
  }
}

/* メンバーを知る:「View more」で残りのメンバーを開閉する（js/main.js）。
   余白は css/home.css の .view-more-wrap と同じ値（このファイル冒頭のブロック用リセットより後で指定する） */
.about-members-block {
  /* 「Close」で閉じたときにここまで戻す。ヘッダーに隠れないよう見出しと同じだけ空ける */
  scroll-margin-top: calc(var(--header-top) + var(--header-height) + 32px);

  @media (max-width: 768px) {
    scroll-margin-top: 100px;
  }
}

.about-members-block .view-more-wrap {
  margin-top: 60px;

  @media (max-width: 768px) {
    margin-top: 40px;
  }
}