/* 会社概要・代表紹介
   共通の書体・色・ヘッダー・初回相談はstyle.cssを使用。
   他ページに影響させず、このページの配置のみを調整します。 */
.company-page .site-nav [aria-current="page"] { color: var(--green); }
.company-breadcrumb { display: flex; align-items: center; gap: 12px; padding-block: 18px; font-size: 13px; color: #697a89; }
.company-breadcrumb a { color: var(--navy); }
.company-breadcrumb a:hover { text-decoration: underline; }

/* 導入：明るい写真の左側にコピー */
.company-hero { position: relative; overflow: hidden; }
.company-hero-inner { position: relative; min-height: 370px; display: flex; align-items: center; padding-block: 60px; }
.company-hero-copy { width: 620px; max-width: 75%; }
.company-hero h1 { font-size: 50px; line-height: 1.4; margin-bottom: 22px; }
.company-intro { font-size: 18px; line-height: 1.9; color: var(--navy); }
.company-intro-line { display: block; white-space: nowrap; }
.company-jump-nav { display: flex; gap: 40px; align-items: center; padding-block: 28px; }
.company-jump-nav a { display: inline-flex; gap: 18px; align-items: center; min-height: 44px; color: var(--navy); font-size: 15px; font-weight: 700; }
.company-jump-nav svg { width: 18px; height: 18px; transform: rotate(90deg); color: var(--green); }
.company-jump-nav a:hover { color: var(--green); }

/* 会社情報：細い罫線と余白のある表 */
.company-section { padding-block: 80px 90px; }
.company-information { padding-top: 48px; }
.company-section-heading .eyebrow { font-size: 13px; margin-bottom: 12px; }
.company-section-heading h2 { font-size: 32px; }
.company-information-grid, .company-experience-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 72px; align-items: start; }
.company-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 18px; }
.company-field-column { width: 148px; }
.company-table tr { border-bottom: 1px solid var(--line); }
.company-table tr:first-child { border-top: 1px solid var(--line); }
.company-table th, .company-table td { padding: 22px 0; vertical-align: top; text-align: left; }
.company-table th { width: 148px; color: var(--navy); font-size: 16px; font-weight: 700; padding-right: 24px; }
.address-line { display: block; }

/* 代表紹介：本人写真を左に大きく、紹介文を右に配置 */
.company-representative { background: var(--mist); }
.company-representative > .section-shell > .company-section-heading { margin-bottom: 36px; }
.company-representative-grid { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 72px; align-items: start; }
.company-portrait { width: 100%; height: auto; aspect-ratio: 1385 / 1771; object-fit: cover; border-radius: 3px; }
.company-representative-role { color: var(--navy); font-size: 14px; margin-bottom: 10px; }
.company-representative-name { font-size: 36px; line-height: 1.5; letter-spacing: .08em; }
.company-biography { margin-block: 28px; font-size: 18px; line-height: 1.9; }
.company-biography p + p { margin-top: 20px; }
.company-biography .company-message-lead { color: var(--navy); font-size: 24px; font-weight: 700; line-height: 1.7; margin-block: 24px; }
.company-representative-copy .text-link { min-height: 44px; }

/* 経験：3つの段階を線でつなぐ。囲みを重ねず読み順を明確に */
.experience-timeline > li { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 28px; }
.experience-timeline > li:not(:last-child) { padding-bottom: 42px; }
.experience-timeline > li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 1px; background: #c3d8cd; }
.experience-marker { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #eaf3ee; color: var(--green); font-size: 14px; font-weight: 700; }
.experience-copy { padding-top: 5px; }
.experience-copy h3 { font-size: 24px; line-height: 1.6; margin-bottom: 14px; }
.experience-copy p { font-size: 18px; line-height: 1.9; }
.experience-copy p + p { margin-top: 16px; }
.experience-copy .experience-award { border-left: 2px solid #72ad94; padding: 6px 0 6px 18px; color: var(--navy); font-weight: 700; }
.experience-award span { display: block; font-size: 12px; color: var(--green); margin-bottom: 4px; }

@media (min-width: 821px) and (max-width: 1160px) {
  .company-information-grid, .company-experience-grid { grid-template-columns: .65fr 1.35fr; gap: 40px; }
  .company-representative-grid { grid-template-columns: 300px minmax(0,1fr); gap: 40px; }
  .company-section-heading h2 { font-size: 30px; }
  .company-table th { width: 122px; }
  .company-field-column { width: 122px; }
}

/* スマートフォン：導入の文字と写真、会社情報、本人写真と紹介文を縦に */
@media (max-width: 820px) {
  .company-breadcrumb { padding-block: 14px; font-size: 12px; }
  .company-hero { display: flex; flex-direction: column; }
  .company-hero .hero-photo { position: static; order: 2; height: 220px; object-position: 65% 65%; }
  .company-hero .hero-overlay { display: none; }
  .company-hero-inner { order: 1; min-height: 0; padding-block: 36px 32px; background: #f8fafb; }
  .company-hero-copy { width: 100%; max-width: 100%; }
  .company-hero .eyebrow { font-size: 12px; margin-bottom: 12px; }
  .company-hero h1 { font-size: 36px; margin-bottom: 18px; }
  .company-intro { font-size: 17px; }
  .company-intro-line { display: inline; white-space: normal; }
  .company-jump-nav { max-width: 680px; gap: 0; flex-direction: column; align-items: stretch; padding-block: 16px; }
  .company-jump-nav a { gap: 12px; min-height: 50px; padding-block: 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
  .company-jump-nav svg { margin-left: auto; }
  .company-section { padding-block: 56px 64px; }
  .company-information { padding-top: 40px; }
  .company-section > .section-shell { max-width: 680px; }
  .company-information-grid, .company-experience-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .company-section-heading h2 { font-size: 28px; }
  .company-section-heading .eyebrow { font-size: 12px; margin-bottom: 10px; }
  .company-table { font-size: 17px; }
  .company-table th { font-size: 14px; width: 110px; padding-right: 20px; }
  .company-field-column { width: 110px; }
  .company-table th, .company-table td { padding-block: 20px; }
  .company-representative > .section-shell > .company-section-heading { margin-bottom: 28px; }
  .company-representative-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .company-portrait { max-width: 340px; margin-inline: auto; }
  .company-representative-role { font-size: 13px; }
  .company-representative-name { font-size: 30px; }
  .company-biography { font-size: 17px; margin-block: 24px; }
  .company-biography .company-message-lead { font-size: 22px; }
  .company-message-break { display: none; }
  .experience-timeline > li { grid-template-columns: 40px minmax(0,1fr); gap: 18px; }
  .experience-timeline > li:not(:last-child) { padding-bottom: 32px; }
  .experience-timeline > li:not(:last-child)::before { left: 19px; top: 40px; }
  .experience-marker { width: 40px; height: 40px; font-size: 12px; }
  .experience-copy { padding-top: 2px; }
  .experience-copy h3 { font-size: 22px; margin-bottom: 12px; }
  .experience-copy p { font-size: 17px; }
}
@media (max-width: 520px) {
  .company-hero .hero-photo { height: 180px; }
  .company-hero h1 { font-size: 34px; }
  .company-table th { width: 86px; padding-right: 12px; }
  .company-field-column { width: 86px; }
}