/* about.css — ページ固有スタイル（共通は common.css） */

/* 代表メッセージ */
#message { background: var(--white); padding-block: 120px; }

.message-inner { display: grid; grid-template-columns: 1fr 260px; gap: 6rem; align-items: start; }

.message-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: var(--black); line-height: 1.3; letter-spacing: -.02em; margin-block-end: 2.5rem; }

.message-text { font-size: .92rem; color: var(--g700); line-height: 2; margin-block-end: 1.5rem; font-weight: 400; }
.message-text strong { color: var(--black); font-weight: 600; }

.message-highlight {
  margin-block: 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--off-white);
  border-inline-start: 2px solid var(--black);
  font-size: .9rem; color: var(--g700); line-height: 2; font-weight: 400;
}
.message-highlight strong { color: var(--black); font-weight: 600; }

.message-cta { font-size: .92rem; color: var(--g700); line-height: 2; font-weight: 400; }
.message-cta strong { color: var(--black); font-weight: 600; }

.message-sign { margin-block-start: 3rem; padding-block-start: 2rem; border-block-start: 1px solid var(--g100); }
.message-sign-role { font-size: .75rem; color: var(--g500); letter-spacing: .06em; margin-block-end: .4rem; }
.message-sign-name { font-size: 1.1rem; font-weight: 600; color: var(--black); }

/* 写真カラム */
.photo-col { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 100px; }

.photo-frame {
  width: 100%; aspect-ratio: 3 / 4;
  overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: .75rem; color: var(--g300); }
.photo-placeholder svg { width: 44px; height: 44px; }
.photo-placeholder span { font-size: .78rem; letter-spacing: .05em; }

.photo-caption { border-block-start: 1px solid var(--g100); padding-block-start: 1.25rem; }
.photo-caption-name { font-size: .95rem; font-weight: 600; color: var(--black); margin-block-end: .2rem; }
.photo-caption-role { font-size: .75rem; color: var(--g500); letter-spacing: .04em; }

.photo-stats { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--g100); }
.photo-stat { padding: 1.25rem 1rem; text-align: center; border-inline-end: 1px solid var(--g100); }
.photo-stat:last-child { border-inline-end: none; }
.photo-stat-num { font-family: var(--font-en); font-size: 1.8rem; font-weight: 700; color: var(--black); line-height: 1; margin-block-end: .3rem; letter-spacing: -.03em; }
.photo-stat-num span { font-size: .9rem; font-weight: 400; color: var(--g500); }
.photo-stat-label { font-size: .7rem; color: var(--g500); letter-spacing: .04em; }

/* 会社概要テーブル */
#company-info { background: var(--off-white); padding-block: 120px; }
.info-inner { max-width: 860px; }
.info-head { margin-block-end: 4rem; }
.info-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--black); margin-block-end: .6rem; letter-spacing: -.02em; }
.info-desc { font-size: .88rem; color: var(--g500); font-weight: 400; }

.info-table { width: 100%; border-collapse: collapse; }
.info-table tr { border-block-end: 1px solid var(--g100); }
.info-table tr:first-child { border-block-start: 1px solid var(--g100); }
.info-table th { width: 160px; padding: 1.5rem 1.5rem 1.5rem 0; font-size: .78rem; font-weight: 500; color: var(--g500); text-align: left; vertical-align: top; white-space: nowrap; letter-spacing: .05em; }
.info-table td { padding: 1.5rem 0; font-size: .92rem; color: var(--black); line-height: 1.85; vertical-align: top; font-weight: 400; }
.info-table td a { color: var(--black); border-block-end: 1px solid var(--g300); transition: border-color var(--tr); }
.info-table td a:hover { border-block-end-color: var(--black); }

/* CTA */
#cta { background: var(--black); padding-block: 100px; }
.cta-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; flex-wrap: wrap; border-block-start: 1px solid rgba(255,255,255,.08); padding-block-start: 4rem; }
.cta-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--white); line-height: 1.3; letter-spacing: -.02em; }
.cta-desc { font-size: .88rem; color: rgba(255,255,255,.8); line-height: 1.9; margin-block-start: 1rem; font-weight: 400; }
.btn-cta {
  display: inline-flex; align-items: center; gap: .75rem; flex-shrink: 0;
  background: var(--white); color: var(--black); padding: 1rem 2.25rem;
  font-size: .88rem; font-weight: 600; letter-spacing: .03em;
  transition: background var(--tr), transform var(--tr);
}
.btn-cta:hover { background: var(--off-white); transform: translateY(-1px); }
.btn-cta svg { transition: transform var(--tr); }
.btn-cta:hover svg { transform: translateX(3px); }

/* レスポンシブ */
@media (max-width: 960px) {
  .message-inner { grid-template-columns: 1fr; gap: 4rem; }
  .photo-col { position: static; display: grid; grid-template-columns: 200px 1fr; gap: 2rem; }
  .photo-frame { aspect-ratio: 3 / 4; }
}
@media (max-width: 768px) {
  .info-table th { width: 100px; font-size: .75rem; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  #message, #company-info, #cta { padding-block: 80px; }
}
@media (max-width: 600px) {
  .photo-col { grid-template-columns: 1fr; }
  .photo-frame { max-width: 280px; }
}