@charset "UTF-8";
/* ============================================================
   GROW UP SYSTEMS — about.css
   会社概要・事業内容ページ専用スタイル
   ============================================================ */

/* ---- 全体を左右中央揃え ----------------------------------- */
.about-page { text-align: center; }
.about-page .breadcrumb { justify-content: center; }
.about-page .page-head p { margin-left: auto; margin-right: auto; }
.about-page .section-lead { max-width: 820px; margin-left: auto; margin-right: auto; }
.about-page .info-table { max-width: 920px; margin-left: auto; margin-right: auto; }
.about-page .case-grid,
.about-page .tech-cats { max-width: 960px; margin-left: auto; margin-right: auto; }
.about-page .tech-cat h3 { justify-content: center; }
.about-page .tag-grid { justify-content: center; }
.about-page .message-full {
  max-width: 920px; margin-left: auto; margin-right: auto;
  border-left: 3px solid var(--accent);
  padding-left: clamp(20px, 3vw, 36px);
}
/* 代表メッセージ本文のみ左揃え（他の説明文は中央揃え） */
.about-page .message-body { text-align: left; }

/* ---- Company info table ----------------------------------- */
.info-table { width: 100%; border-collapse: collapse; max-width: 760px; }
.info-table th, .info-table td {
  text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.info-table th {
  width: 180px; font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.info-table td { color: var(--ink); }
@media (max-width: 600px) {
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { border-bottom: none; padding-bottom: 4px; }
  .info-table td { padding-top: 4px; padding-bottom: 18px; }
}

/* ---- Service detail / cases ------------------------------- */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 8px; }
.case-card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 26px 24px;
  position: relative;
}
.case-card .case-no { font-family: var(--font-mono); font-size: 15px; color: var(--accent); display: block; margin-bottom: 14px; }
.case-card p { font-size: 15px; }
@media (max-width: 680px) { .case-grid { grid-template-columns: 1fr; } }

/* ---- Tech categories -------------------------------------- */
.tech-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tech-cat {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 26px 24px;
}
.tech-cat h3 {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: 0.04em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.tech-cat h3::before { content: "//"; color: var(--accent); }
.tech-cat .tag-grid { margin-bottom: 0; }
@media (max-width: 680px) { .tech-cats { grid-template-columns: 1fr; } }

.tag-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 16px; background: var(--bg);
}

/* ---- Marker highlight（蛍光ペン風・スクロールで描画） ----- */
.marker {
  background-image: linear-gradient(
    transparent 58%, rgba(255, 224, 56, 0.55) 58%, rgba(255, 224, 56, 0.55) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.marker.is-drawn {
  animation: markerDraw 1s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes markerDraw {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}

/* ---- Representative message (full) ------------------------ */
.message-full { max-width: 760px; }
.message-head { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }
.message-head .avatar-circle {
  width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-glow);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 26px;
  flex-shrink: 0;
}
.message-head .role { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.message-head .name { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.message-body p { margin-bottom: 24px; line-height: 2.05; }
.message-body p:last-child { margin-bottom: 0; }
/* 本文の行長を読みやすい幅に制限（リード文は1行表示のため対象外） */
.message-body p:not(.lead-line) { max-width: 760px; }
.message-body .lead-line {
  font-family: var(--font-display); font-size: clamp(16px, 1.9vw, 20px); font-weight: 500; line-height: 1.7;
  color: var(--ink); margin-bottom: 28px;
}
/* 広い画面では1行に収める */
@media (min-width: 980px) {
  .message-body .lead-line { white-space: nowrap; }
}

/* ---- Access ----------------------------------------------- */
.access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.access-card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 26px 24px;
}
.access-card h3 { font-size: 16px; margin-bottom: 10px; }
.access-card .label { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 12px; display: block; }
.access-card p { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 680px) { .access-grid { grid-template-columns: 1fr; } }