/* ══════════════════════════════════════════
   about.css
   About ページ固有スタイル（共通は shared.css 参照）
══════════════════════════════════════════ */


/* ══════════════════════════════════════════
   実績数値バンド
══════════════════════════════════════════ */

/* ── 数値バンド レイアウト ── */
#numbers { background: var(--black); padding: 72px 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid #333; position: relative; overflow: hidden; }
#numbers::before { content: 'PRESTIGE'; font-family: 'Bebas Neue', sans-serif; font-size: clamp(60px, 10vw, 120px); font-weight: 400; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.04); position: absolute; right: 40px; bottom: -20px; letter-spacing: .1em; pointer-events: none; white-space: nowrap; }
.num-item { padding: 32px; border-right: 1px solid #333; display: flex; flex-direction: column; gap: 6px; }
.num-item:last-child { border-right: none; }
.num-val { font-family: 'Bebas Neue', sans-serif; font-size: 52px; font-weight: 400; color: var(--white); line-height: 1; letter-spacing: .02em; }
.num-val span { font-size: 22px; }
.num-unit { font-size: 10px; letter-spacing: .16em; color: var(--accent); margin-top: 2px; }
.num-label { font-size: 12px; font-weight: 300; color: var(--mg); letter-spacing: .06em; }


/* ══════════════════════════════════════════
   ミッション
══════════════════════════════════════════ */

/* ── ミッション テキスト ── */
.mission-wrap { text-align: center; }
.mission-en { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px,5vw,72px); font-weight: 400; color: var(--lg); line-height: 1; letter-spacing: .06em; margin-bottom: -6px; }
.mission-jp { font-family: 'Noto Sans JP', sans-serif; font-size: clamp(18px,1.8vw,24px); font-weight: 300; letter-spacing: .06em; margin-bottom: 28px; line-height: 1.7; }
.mission-desc { font-size: 14px; color: var(--dg); line-height: 2.4; max-width: 640px; margin: 0 auto; }

/* ── ミッション セクション装飾 ── */
#mission { position: relative; overflow: hidden; }
#mission::after {
  content: 'MISSION';
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.04);
  position: absolute;
  right: 40px; bottom: 0px;
  letter-spacing: .1em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}


/* ══════════════════════════════════════════
   バリュー
══════════════════════════════════════════ */

/* ── バリュー グリッド ── */
.values-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--lg); border: 1px solid var(--lg); }
.val-card { background: var(--white); padding: 48px 40px; display: flex; flex-direction: column; gap: 14px; transition: background .25s; position: relative; overflow: hidden; }
.val-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 100%; height: 2px; background: var(--accent); transition: right .35s; }
.val-card:hover { background: var(--off); }
.val-card:hover::after { right: 0; }
.val-num { font-family: 'Bebas Neue', sans-serif; font-size: 48px; font-weight: 400; color: var(--lg); line-height: 1; }
.val-title { font-size: 16px; font-weight: 500; letter-spacing: .06em; }
.val-desc { font-size: 13px; font-weight: 300; color: var(--dg); line-height: 2; }


/* ══════════════════════════════════════════
   沿革
══════════════════════════════════════════ */
.history-item { display: grid; grid-template-columns: 100px 1fr; gap: 0; align-items: baseline; border-bottom: 1px solid var(--lg); padding: 22px 0; }
.history-item:first-child { border-top: 1px solid var(--lg); }
.history-year { font-family: 'Bebas Neue', sans-serif; font-size: 20px; font-weight: 400; color: var(--accent); }
.history-text { font-size: 13px; font-weight: 300; color: var(--dg); line-height: 1.9; }


/* ══════════════════════════════════════════
   会社概要
══════════════════════════════════════════ */

/* ── 2カラムレイアウト ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }

/* ── 会社概要 セクション装飾 ── */
#overview { position: relative; overflow: hidden; }
#overview::after {
  content: 'OVERVIEW';
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(50px, 8vw, 100px);
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.04);
  position: absolute;
  right: 40px; bottom: 0px;
  letter-spacing: .1em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* ── 会社概要 縦2枚並び写真 ── */
.overview-photos { display: flex; flex-direction: column; gap: 12px; }
.overview-photo-item { position: relative; overflow: hidden; }
.overview-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overview-photo-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 20px 18px; background: linear-gradient(to top, rgba(16,16,14,.72) 0%, transparent 100%); display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.overview-photo-overlay-sub { font-family: 'Bebas Neue', sans-serif; font-size: 10px; letter-spacing: .22em; color: rgba(255,255,255,.55); line-height: 1; }
.overview-photo-overlay-title { font-size: 15px; font-weight: 500; letter-spacing: .1em; color: var(--white); line-height: 1.4; display: flex; align-items: center; gap: 10px; }
.overview-photo-overlay-title em { font-style: normal; font-family: 'Bebas Neue', sans-serif; font-size: 11px; letter-spacing: .14em; color: var(--gold); background: rgba(184,149,90,.15); border: 1px solid rgba(184,149,90,.4); padding: 2px 8px; line-height: 1.6; }
.overview-photo-item:hover .overview-photo-overlay { background: linear-gradient(to top, rgba(16,16,14,.82) 0%, transparent 100%); }


/* ══════════════════════════════════════════
   ページヒーロー デコSVG
══════════════════════════════════════════ */
.page-hero-deco { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; pointer-events: none; overflow: hidden; opacity: .5; }
.page-hero-deco svg { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); }


/* ══════════════════════════════════════════
   レスポンシブ
══════════════════════════════════════════ */

/* ══ レスポンシブ: 1024px以下 ══ */
@media (max-width: 1024px) {
  #numbers { grid-template-columns: repeat(3, 1fr); padding: 56px 48px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 48px; }
  .overview-photos { grid-template-columns: 1fr 1fr; }
  .page-hero-deco { width: 35%; opacity: .3; }
}

/* ══ レスポンシブ: 768px以下 ══ */
@media (max-width: 768px) {
  #numbers { padding: 32px 16px; gap: 0; grid-template-columns: repeat(3,1fr); }
  .num-item { padding: 18px 10px; border-right: 1px solid #333; }
  .num-item:nth-child(2) { border-right: 1px solid #333; }
  .num-item:nth-child(3) { border-top: none; grid-column: auto; }
  .num-val { font-size: 34px; white-space: nowrap; }
  .num-val span { font-size: 16px; }
  .num-label { font-size: 11px; }
  .mission-jp { font-size: clamp(16px, 4vw, 20px); line-height: 1.7; }
  .mission-desc { font-size: 13px; }
  .values-grid { grid-template-columns: 1fr; gap: 12px; }
  .val-card { padding: 24px 20px; }
  .history-item { grid-template-columns: 60px 1fr; gap: 16px; padding: 20px 0; }
  .history-year { font-size: 14px; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .overview-photos { grid-template-columns: 1fr; gap: 12px; }
  .overview-photo-item { aspect-ratio: 16/9; }
  .overview-photo-overlay-title { font-size: 13px; }
  .page-hero-deco { display: none; }
}

/* ══ レスポンシブ: 480px以下 ══ */
@media (max-width: 480px) {
  #numbers { padding: 24px 12px; }
  .num-item { padding: 16px 8px; }
  .num-val { font-size: 26px; }
  .num-val span { font-size: 14px; }
  .num-unit { font-size: 9px; }
  .val-card { padding: 20px 16px; }
  .history-item { grid-template-columns: 52px 1fr; gap: 12px; }
  .history-year { font-size: 13px; }
  .history-text { font-size: 12px; }
  .mission-desc { font-size: 12px; }
}