/* ========================================
   Page: 私たちについて (page-about)
   ABOUT US
   ======================================== */
:root {
  --color-gray-bg: #ececec;
  --color-gray-border: #e0e0e0;
  --color-gray-600: #8e8e8e;
}

.page-about {
  background: var(--color-white);
  overflow-x: hidden;
}
.page-about img { display: block; max-width: 100%; }

/* ----- 共通：セクション見出し ----- */
.about-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 56px;
}
.about-head__en {
  font-family: var(--font-futura);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-black);
}
.about-head__en .is-mark {
  background: linear-gradient(to bottom, transparent 58%, var(--color-yellow) 58%);
}
.about-head__jp {
  font-family: var(--font-zen);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 2.4px;
  color: var(--color-black);
}
.about-head--center { align-items: center; text-align: center; }
.about-head--white .about-head__en,
.about-head--white .about-head__jp { color: var(--color-white); }

/* ----- 共通：セクション枠 ----- */
.about-sec {
  padding: 140px var(--content-padding);
}
.about-sec__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.about-sec--dark {
  background: var(--color-black);
  color: var(--color-white);
}
.about-sec--gray { background: var(--color-gray-bg); }

/* ========================================
   First View（ヒーロー：2カラム）
   ======================================== */
.page-about .about-hero { padding: 84px var(--content-padding) 96px; background: var(--color-white); }
.page-about .about-hero__inner {
  display: flex; justify-content: space-between; align-items: center; gap: 56px;
  max-width: 1120px; margin: 0 auto;
}
.page-about .about-hero__left { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.page-about .about-hero__titlewrap { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; }

/* 見出し（既存 page-title スタイルを流用） */
.page-about .page-title__en-highlight {
  background: linear-gradient(to bottom, transparent 50%, var(--color-yellow) 50%);
  display: inline-block;
}
.page-about .page-title__en {
  font-family: var(--font-futura);
  font-size: 76px; font-weight: 500; line-height: 1;
  color: var(--color-black); text-transform: uppercase;
}
.page-about .page-title__deco { position: relative; width: 93px; height: 54px; flex-shrink: 0; }
.page-about .about-hero__deco { margin-top: 14px; }
.page-about .page-title__deco-block { position: absolute; display: block; }
.page-about .page-title__deco-block--y1 { background: var(--color-yellow); top: 81.48%; left: 0; right: 57.65%; bottom: 0; }
.page-about .page-title__deco-block--y2 { background: var(--color-yellow); top: 44.44%; left: 29.41%; right: 35.29%; bottom: 37.04%; }
.page-about .page-title__deco-block--b1 { background: var(--color-black); top: 62.96%; left: 64.71%; right: 0; bottom: 18.52%; }
.page-about .page-title__deco-block--b2 { background: var(--color-black); top: 0; left: 9.41%; right: 55.29%; bottom: 81.48%; }
.page-about .page-title__deco-block--b3 { background: var(--color-black); top: 0; left: 44.71%; right: 23.53%; bottom: 90.74%; }

.page-about .about-hero__jp {
  font-family: var(--font-zen); font-weight: 700; font-size: 22px; letter-spacing: 4px;
  color: var(--color-black); margin-top: 30px;
}
.page-about .about-hero__lead {
  font-family: var(--font-zen); font-weight: 700; font-size: 26px; line-height: 1.7; letter-spacing: 1.5px;
  color: var(--color-black); margin-top: 26px;
}
.page-about .about-hero__lead .is-mark {
  background: linear-gradient(to bottom, transparent 60%, var(--color-yellow) 60%);
}
.page-about .about-hero__text {
  font-family: var(--font-zen); font-weight: 500; font-size: 16px; line-height: 2.1; letter-spacing: 1.2px;
  color: var(--color-dark-text); margin-top: 24px;
}
.page-about .about-hero__anchor { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.page-about .about-hero__anchor a {
  display: inline-flex; align-items: center; gap: 12px; background: var(--color-black); color: #fff;
  font-family: var(--font-zen); font-weight: 500; font-size: 13px; letter-spacing: 1px;
  padding: 12px 22px; border-radius: 999px; transition: opacity .25s ease, transform .25s ease;
}
.page-about .about-hero__anchor a:hover { opacity: .85; transform: translateY(-2px); }
.page-about .about-hero__anchor-arrow {
  width: 6px; height: 6px; border-right: 1.5px solid var(--color-yellow); border-bottom: 1.5px solid var(--color-yellow);
  transform: rotate(45deg); margin-top: -2px;
}
.page-about .about-hero__photo {
  position: relative; width: 660px; max-width: 48%; aspect-ratio: 3 / 2; flex-shrink: 0;
  overflow: hidden; border-radius: 4px; background: #0d0d0d; box-shadow: 24px 24px 0 0 var(--color-yellow);
}
.page-about .about-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-about .about-hero__photo-badge {
  position: absolute; left: 0; bottom: 0; background: var(--color-black); color: #fff;
  font-family: var(--font-futura); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 12px 22px;
}
/* 固定ヘッダー分のアンカー位置調整 */
#vision, #work-style { scroll-margin-top: 90px; }

/* ========================================
   MESSAGE（代表メッセージ）
   ======================================== */
.about-message { background: var(--color-white); padding: 120px var(--content-padding) 140px; }
.about-message__inner { max-width: 1080px; margin: 0 auto; display: flex; gap: 64px; align-items: flex-start; }
.about-message__photo { width: 380px; flex-shrink: 0; position: relative; }
.about-message__photo::before {
  content: ''; position: absolute; left: -20px; top: -20px;
  width: 120px; height: 120px; background: var(--color-yellow); z-index: 0;
}
.about-message__photo img { position: relative; z-index: 1; width: 100%; height: 480px; object-fit: cover; }
.about-message__body { flex: 1; padding-top: 8px; }
.about-message__title {
  font-family: var(--font-zen); font-weight: 700;
  font-size: 28px; line-height: 1.7; letter-spacing: 1.5px;
  color: var(--color-black); margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 2px solid var(--color-black);
}
.about-message__text { font-size: 16px; line-height: 2.2; letter-spacing: 0.8px; color: var(--color-dark-text); }
.about-message__name {
  margin-top: 32px; font-family: var(--font-zen); font-weight: 700;
  font-size: 18px; letter-spacing: 1.5px; color: var(--color-black);
}
.about-message__name span { font-size: 14px; font-weight: 500; color: var(--color-gray-text); margin-right: 12px; }
/* アコーディオン */
.about-acc { margin-top: 28px; border: 1px solid var(--color-gray-border); }
.about-acc__btn {
  width: 100%; background: #f7f7f7; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; font-family: var(--font-noto); font-weight: 700;
  font-size: 15px; letter-spacing: 1px; color: var(--color-black); text-align: left;
}
.about-acc__btn-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.about-acc__btn-icon::before,
.about-acc__btn-icon::after { content: ''; position: absolute; background: var(--color-black); transition: transform .3s ease; }
.about-acc__btn-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.about-acc__btn-icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.about-acc.is-open .about-acc__btn-icon::after { transform: scaleY(0); }
.about-acc__panel { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.about-acc__panel-inner { padding: 24px; font-size: 14px; line-height: 2; letter-spacing: 0.6px; color: var(--color-dark-text); }
.about-acc__panel-inner dl { display: flex; flex-wrap: wrap; gap: 4px 0; }
.about-acc__panel-inner dt { width: 120px; font-weight: 700; color: var(--color-black); }
.about-acc__panel-inner dd { width: calc(100% - 120px); margin: 0; }

/* ========================================
   VISION
   ======================================== */
.about-vision { text-align: center; }
.about-vision__formula {
  font-family: var(--font-futura);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.2; letter-spacing: 4px;
  color: var(--color-white); margin: 24px 0 48px;
}
.about-vision__formula .is-y { color: var(--color-yellow); }
.about-vision__formula .inf { font-size: 1.2em; vertical-align: -0.05em; }
.about-vision__tags {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 56px;
}
.about-vision__tag {
  border: 1px solid #3e3e3e; padding: 18px 32px; min-width: 220px;
  font-family: var(--font-zen); font-weight: 700; font-size: 18px; line-height: 1.6;
  letter-spacing: 1.5px; color: var(--color-white); white-space: pre-line;
}
.about-vision__tag--y { background: var(--color-yellow); color: var(--color-black); border-color: var(--color-yellow); }
.about-vision__text {
  max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 2.2;
  letter-spacing: 0.8px; color: #d8d8d8;
}

/* ========================================
   VALUE（3つの価値）
   ======================================== */
.about-value__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.about-value__card {
  border: 1px solid var(--color-gray-border); padding: 48px 32px; text-align: center;
  position: relative; transition: box-shadow .3s ease, transform .3s ease; background: var(--color-white);
}
.about-value__card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(-4px); }
.about-value__card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: var(--color-yellow);
}
.about-value__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%;
  background: rgba(232,196,0,.12); color: #E8C400;
}
.about-value__icon svg { width: 40px; height: 40px; display: block; }
.about-value__jp {
  font-family: var(--font-zen); font-weight: 700; font-size: 32px;
  letter-spacing: 3px; color: var(--color-black); margin-bottom: 4px;
}
.about-value__en {
  font-family: var(--font-futura); font-size: 15px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--color-gray-600); margin-bottom: 16px;
}
.about-value__en::after {
  content: ''; display: block; width: 32px; height: 2px;
  background: #E8C400; margin: 16px auto 0;
}
.about-value__desc { font-size: 15px; line-height: 2; letter-spacing: 0.6px; color: var(--color-dark-text); }

/* ========================================
   DIGITAL & AI
   ======================================== */
.about-digital__lead {
  max-width: 880px; font-size: 16px; line-height: 2.2; letter-spacing: 0.8px;
  color: #d8d8d8; margin-bottom: 72px;
}
.about-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 64px; }
.about-roadmap__step {
  position: relative; padding: 32px 28px; border: 1px solid #3e3e3e;
}
.about-roadmap__step + .about-roadmap__step { border-left: none; }
.about-roadmap__year {
  font-family: var(--font-futura); font-size: 15px; letter-spacing: 2px;
  color: var(--color-yellow); margin-bottom: 6px;
}
.about-roadmap__tag { font-family: var(--font-zen); font-weight: 700; font-size: 22px; letter-spacing: 1px; color: var(--color-white); margin-bottom: 20px; }
.about-roadmap__phase { font-weight: 700; font-size: 14px; color: var(--color-white); margin-bottom: 4px; }
.about-roadmap__phase-sub { font-size: 13px; line-height: 1.8; color: #b5b5b5; }
.about-roadmap__step:last-child { background: rgba(255,255,0,.06); }

.about-aitype { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-aitype__card { background: #1f1f1f; border-left: 3px solid var(--color-yellow); padding: 24px 28px; }
.about-aitype__name { font-family: var(--font-zen); font-weight: 700; font-size: 17px; color: var(--color-white); margin-bottom: 6px; }
.about-aitype__name span { display: block; font-family: var(--font-futura); font-size: 12px; letter-spacing: 1px; color: var(--color-yellow); margin-top: 4px; }
.about-aitype__desc { font-size: 13px; line-height: 1.9; color: #c4c4c4; }

/* ========================================
   TEAMS
   ======================================== */
.about-teams__lead { font-size: 16px; line-height: 2.2; letter-spacing: 0.8px; color: var(--color-dark-text); max-width: 820px; margin-bottom: 48px; }
.about-teams__chips { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 56px; }
.about-teams__chip {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--color-black); padding: 16px 28px;
  font-family: var(--font-zen); font-weight: 700; font-size: 18px; letter-spacing: 1.5px; color: var(--color-black);
}
.about-teams__chip::before { content: ''; width: 10px; height: 10px; background: var(--color-yellow); border: 1px solid var(--color-black); }
.about-teams__photo { border-radius: 4px; overflow: hidden; }
.about-teams__photo img { width: 100%; height: 460px; object-fit: cover; }

/* ========================================
   3 POINT
   ======================================== */
.about-point__group + .about-point__group { margin-top: 72px; }
.about-point__label {
  display: inline-block; font-family: var(--font-zen); font-weight: 700;
  font-size: 20px; letter-spacing: 2px; color: var(--color-black);
  border-left: 6px solid var(--color-yellow); padding-left: 16px; margin-bottom: 32px;
}
.about-point__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.about-point__card { background: var(--color-white); border: 1px solid var(--color-gray-border); padding: 40px 28px; text-align: center; }
.about-point__num {
  font-family: var(--font-futura); font-weight: 500; font-size: 56px; line-height: 1;
  color: var(--color-black); letter-spacing: 1px;
}
.about-point__num .is-plus { color: var(--color-yellow); -webkit-text-stroke: 1px var(--color-black); }
.about-point__cap { margin-top: 16px; font-family: var(--font-zen); font-weight: 700; font-size: 16px; letter-spacing: 1px; color: var(--color-dark-text); }

/* ========================================
   MIND
   ======================================== */
.about-mind__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-mind__card { background: #1f1f1f; padding: 32px 28px; border-top: 4px solid var(--color-yellow); }
.about-mind__num { font-family: var(--font-futura); font-size: 28px; color: var(--color-yellow); line-height: 1; margin-bottom: 14px; }
.about-mind__title { font-family: var(--font-zen); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--color-white); margin-bottom: 10px; }
.about-mind__desc { font-size: 14px; line-height: 1.9; color: #c4c4c4; }

/* ========================================
   GROUP
   ======================================== */
.about-group__lead { font-size: 16px; line-height: 2.2; letter-spacing: 0.8px; color: var(--color-dark-text); max-width: 860px; margin-bottom: 48px; }
.about-group__label {
  font-family: var(--font-zen); font-weight: 700; font-size: 18px; letter-spacing: 2px;
  color: var(--color-black); border-left: 6px solid var(--color-yellow); padding-left: 14px;
  margin: 0 0 24px;
}
.about-group__row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
.about-group__card {
  flex: 1; min-width: 240px; border: 1px solid var(--color-gray-border); background: var(--color-white);
  padding: 24px 28px; font-family: var(--font-zen); font-weight: 700; font-size: 17px;
  letter-spacing: 1px; color: var(--color-black); display: flex; align-items: center;
}
.about-group__card--sub { background: #f7f7f7; font-weight: 500; font-size: 15px; }

/* ========================================
   OFFICE
   ======================================== */
.about-office__lead { font-size: 16px; line-height: 2.2; letter-spacing: 0.8px; color: #d8d8d8; max-width: 860px; margin-bottom: 40px; }
.about-office__places { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.about-office__place { border: 1px solid #3e3e3e; padding: 10px 22px; font-family: var(--font-zen); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; color: var(--color-white); }
/* 7拠点 写真グリッド（仮：既存拠点写真を流用） */
.about-office__locations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
.about-office__loc { margin: 0; display: block; text-decoration: none; color: inherit; }
.about-office__loc-photo { position: relative; border-radius: 4px; overflow: hidden; }
.about-office__loc-photo img { width: 100%; height: 160px; object-fit: cover; transition: transform .5s ease; }
.about-office__loc:hover .about-office__loc-photo img { transform: scale(1.06); }
.about-office__loc-name { margin-top: 12px; font-family: var(--font-zen); font-weight: 700; font-size: 16px; letter-spacing: 1.5px; color: var(--color-white); display: flex; align-items: center; gap: 8px; }
.about-office__loc-name::before { content: ''; width: 8px; height: 8px; background: var(--color-yellow); flex-shrink: 0; }
.about-office__subhead { font-family: var(--font-zen); font-weight: 700; font-size: 18px; letter-spacing: 1.5px; color: var(--color-white); border-left: 6px solid var(--color-yellow); padding-left: 14px; margin: 64px 0 28px; }
.about-office__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.about-office__item { position: relative; border-radius: 4px; overflow: hidden; }
.about-office__item img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s ease; }
.about-office__item:hover img { transform: scale(1.05); }
.about-office__cap {
  position: absolute; left: 0; bottom: 0; background: var(--color-yellow); color: var(--color-black);
  font-family: var(--font-zen); font-weight: 700; font-size: 13px; letter-spacing: 1px; padding: 6px 16px;
}

/* ========================================
   NUMBERS
   ======================================== */
.about-numbers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.about-numbers__card { border: 1px solid var(--color-gray-border); padding: 40px 24px; text-align: center; background: var(--color-white); }
.about-numbers__value { font-family: var(--font-futura); font-weight: 500; font-size: 52px; line-height: 1; color: var(--color-black); letter-spacing: 1px; }
.about-numbers__label { margin-top: 14px; font-family: var(--font-zen); font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--color-dark-text); }
.about-numbers__charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-chart { border: 1px solid var(--color-gray-border); padding: 28px 24px; background: #fafafa; }
.about-chart__title { font-family: var(--font-zen); font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--color-black); margin-bottom: 20px; }
/* 棒グラフ（プレースホルダ） */
.about-chart__bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; }
.about-chart__bar { flex: 1; background: linear-gradient(to top, var(--color-black), #444); position: relative; }
.about-chart__bar:last-child { background: var(--color-yellow); }
.about-chart__bar span { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font-family: var(--font-futura); font-size: 12px; color: var(--color-gray-text); }
.about-chart__xlabels { display: flex; gap: 14px; margin-top: 8px; }
.about-chart__xlabels span { flex: 1; text-align: center; font-size: 11px; color: var(--color-gray-600); }
/* ドーナツ */
.about-chart__donut { width: 130px; height: 130px; border-radius: 50%; margin: 0 auto; }
.about-chart__legend { display: flex; justify-content: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.about-chart__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-dark-text); }
.about-chart__legend i { width: 12px; height: 12px; display: inline-block; }
.about-numbers__note { margin-top: 28px; font-size: 12px; color: var(--color-gray-600); letter-spacing: 0.5px; }

/* ========================================
   WORK STYLE
   ======================================== */
.about-ws__lead { font-size: 16px; line-height: 2.2; letter-spacing: 0.8px; color: var(--color-dark-text); max-width: 820px; margin-bottom: 56px; }
.about-ws__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.about-ws__card { display: block; background: var(--color-white); border: 1px solid var(--color-gray-border); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease; }
.about-ws__card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.1); transform: translateY(-4px); }
.about-ws__photo { height: 200px; overflow: hidden; }
.about-ws__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-ws__body { padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.about-ws__name { font-family: var(--font-zen); font-weight: 700; font-size: 19px; letter-spacing: 1.5px; color: var(--color-black); }
.about-ws__name small { display: block; font-family: var(--font-futura); font-size: 12px; letter-spacing: 1px; color: var(--color-gray-600); margin-top: 4px; }
.about-ws__arrow { width: 36px; height: 36px; border-radius: 50%; background: var(--color-black); position: relative; flex-shrink: 0; }
.about-ws__arrow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 1.5px solid #fff; border-top: 1.5px solid #fff; transform: translate(-60%,-50%) rotate(45deg); }

/* ========================================
   VOICES
   ======================================== */
.about-voices__inner { display: flex; gap: 64px; align-items: center; }
.about-voices__photo { flex: 1; border-radius: 4px; overflow: hidden; }
.about-voices__photo img { width: 100%; height: 420px; object-fit: cover; }
.about-voices__body { flex: 1; }
.about-voices__lead { font-size: 16px; line-height: 2.2; letter-spacing: 0.8px; color: #d8d8d8; margin-bottom: 40px; }
.about-voices__btns { display: flex; flex-direction: column; gap: 16px; }
.about-voices__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--color-yellow); color: var(--color-black); padding: 22px 28px;
  font-family: var(--font-zen); font-weight: 700; font-size: 18px; letter-spacing: 1.5px;
  box-shadow: 6px 6px 0 0 rgba(255,255,255,.15); transition: transform .3s ease;
}
.about-voices__btn:hover { transform: translate(-2px,-2px); }
.about-voices__btn-arrow { width: 40px; height: 18px; background: var(--color-black); border-radius: 20px; position: relative; flex-shrink: 0; }
.about-voices__btn-arrow::after { content: ''; position: absolute; top: 50%; left: 55%; width: 8px; height: 5px; border-right: 1.5px solid #fff; border-top: 1.5px solid #fff; transform: translate(-50%,-50%) rotate(45deg); }

/* ========================================
   SDGs
   ======================================== */
.about-sdgs__block + .about-sdgs__block { margin-top: 48px; }
.about-sdgs__label {
  font-family: var(--font-zen); font-weight: 700; font-size: 18px; letter-spacing: 2px;
  color: var(--color-black); border-left: 6px solid var(--color-yellow); padding-left: 14px; margin-bottom: 20px;
}
.about-sdgs__text { font-size: 16px; line-height: 2.2; letter-spacing: 0.8px; color: var(--color-dark-text); }
.about-sdgs__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.about-sdgs__card { background: #f7f7f7; border-top: 4px solid var(--color-yellow); padding: 32px 28px; }
.about-sdgs__card-title { display: flex; align-items: center; gap: 14px; font-family: var(--font-zen); font-weight: 700; font-size: 18px; color: var(--color-black); margin-bottom: 14px; }
.about-sdgs__icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--color-yellow); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.about-sdgs__icon svg { width: 26px; height: 26px; }
.about-sdgs__card-text { font-size: 14px; line-height: 1.95; color: var(--color-dark-text); }

/* ========================================
   FUTURE
   ======================================== */
.about-future { text-align: left; }
.about-future__title {
  font-family: var(--font-zen); font-weight: 700; font-size: 28px; line-height: 1.7;
  letter-spacing: 1.5px; color: var(--color-white); margin-bottom: 28px;
  padding-left: 20px; border-left: 6px solid var(--color-yellow);
}
.about-future__text { font-size: 16px; line-height: 2.3; letter-spacing: 0.8px; color: #d8d8d8; max-width: 900px; }

/* ========================================
   CTA（共通流用：about版）
   ======================================== */
.about-cta { background-color: var(--color-gray-bg); padding: 0 100px; }
.about-cta__bg {
  background-image: linear-gradient(rgba(10,10,10,.55), rgba(10,10,10,.55)), url('../images/about-hero.jpg');
  background-size: cover; background-position: center; background-attachment: fixed;
  padding: 160px 80px; text-align: center;
}
.about-cta__title { font-family: var(--font-futura); font-size: clamp(48px,7vw,88px); letter-spacing: 4px; color: var(--color-white); text-transform: uppercase; line-height: 1; margin-bottom: 24px; }
.about-cta__heading { font-family: var(--font-zen); font-weight: 700; font-size: clamp(24px,3vw,34px); line-height: 1.6; letter-spacing: 2px; color: var(--color-white); margin-bottom: 48px; }
.about-cta__btns { display: inline-flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.about-cta__btn {
  display: inline-flex; align-items: center; gap: 24px; padding: 22px 40px;
  font-family: var(--font-zen); font-weight: 700; font-size: 18px; letter-spacing: 1.5px;
  box-shadow: 8px 8px 0 0 var(--color-black); transition: transform .3s ease;
}
.about-cta__btn:hover { transform: translate(-2px,-2px); }
.about-cta__btn--primary { background: var(--color-yellow); color: var(--color-black); }
.about-cta__btn--line { background: var(--color-white); color: var(--color-black); }
.about-cta__btn-arrow { width: 45px; height: 21px; background: var(--color-black); border-radius: 20px; position: relative; }
.about-cta__btn-arrow::after { content: ''; position: absolute; top: 50%; left: 52%; width: 10px; height: 6px; border-right: 1.5px solid #fff; border-top: 1.5px solid #fff; transform: translate(-50%,-50%) rotate(45deg); }

/* ========================================
   Breadcrumb
   ======================================== */
.page-about .breadcrumb { background: var(--color-white); padding: 28px var(--content-padding); }
.page-about .breadcrumb__list { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; list-style: none; font-size: 13px; letter-spacing: 1px; color: var(--color-gray-text); }
.page-about .breadcrumb__list li + li::before { content: '＞'; margin: 0 12px; color: var(--color-gray-600); }
.page-about .breadcrumb__list a { color: var(--color-gray-text); text-decoration: none; }
.page-about .breadcrumb__list a:hover { text-decoration: underline; }

/* ========================================
   Responsive (SP)
   ======================================== */
@media (max-width: 768px) {
  .about-sec { padding: 80px 24px; }
  .about-head__en { font-size: 40px; }
  .about-head__jp { font-size: 19px; }
  .about-head { margin-bottom: 36px; }

  .page-about .about-hero { padding: 40px 20px 48px; }
  .page-about .about-hero__inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .page-about .about-hero__left { max-width: none; }
  .page-about .page-title__en { font-size: 52px; }
  .page-about .about-hero__deco { width: 48px; height: 28px; margin-top: 6px; }
  .page-about .about-hero__jp { font-size: 18px; margin-top: 22px; }
  .page-about .about-hero__lead { font-size: 21px; margin-top: 20px; }
  .page-about .about-hero__text { font-size: 15px; margin-top: 18px; }
  .page-about .about-hero__anchor { margin-top: 28px; }
  .page-about .about-hero__photo { width: 100%; max-width: 100%; box-shadow: 12px 12px 0 0 var(--color-yellow); }

  .about-message { padding: 100px 24px 80px; }
  .about-message__inner { flex-direction: column; gap: 36px; }
  .about-message__photo { width: 100%; }
  .about-message__photo img { height: 380px; }
  .about-message__title { font-size: 22px; }

  .about-vision__tags { gap: 14px; }
  .about-vision__tag { min-width: 0; width: 100%; }

  .about-value__grid,
  .about-roadmap,
  .about-aitype,
  .about-point__grid,
  .about-mind__grid,
  .about-office__grid,
  .about-numbers__grid,
  .about-numbers__charts,
  .about-ws__grid,
  .about-sdgs__cards { grid-template-columns: 1fr; }

  .about-roadmap__step + .about-roadmap__step { border-left: 1px solid #3e3e3e; border-top: none; }

  .about-office__locations { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .about-office__loc-photo img { height: 130px; }
  .about-office__subhead { margin: 48px 0 24px; font-size: 16px; }

  .about-teams__photo img { height: 260px; }
  .about-group__row { flex-direction: column; }
  .about-group__card { min-width: 0; }

  .about-voices__inner { flex-direction: column; gap: 36px; }
  .about-voices__photo img { height: 260px; }

  .about-cta { padding: 0; }
  .about-cta__bg { padding: 90px 24px; background-attachment: scroll; }
  .about-cta__btns { flex-direction: column; width: 100%; }
  .about-cta__btn { justify-content: center; width: 100%; }

  .about-intro__visual,
  .about-cta__bg { background-attachment: scroll; }

  .page-about .breadcrumb { padding: 24px; }
}