/* ============================================================
 * Company Pages — sundayfolk-child
 *
 * 会社案内 4ページ（ハブ + overview / history / message）の共通スタイル。
 * HTML/company*.html のインライン CSS + top-orange-navy.css の
 * .company-link-nav / .company-link-card を抽出。
 *
 * 経営理念 page-company-philosophy.php も company-link-nav を使うため、
 * このファイルは philosophy ページにも load される。重複定義となる
 * event-page-header / split-slide / philosophy-kicker は
 * Step 10-9 で sf-base.css / sf-components.css 集約時に整理する。
 * ============================================================ */

.company-page,
.company-overview-page,
.company-history-page,
.company-message-page {
  --c-orange: #e05531;
  --c-orange-dk: #c44420;
  --c-navy: #1e2f4d;
  --c-navy-dk: #131f34;
  --c-text: #2c3e50;
  --c-sub: #6b7280;
  --c-bg: #ffffff;
  --c-bg-alt: #f8f8f8;
  --c-border: rgba(0, 0, 0, .07);
  --max-w: 1440px;
  --sec-pad: 100px;
  font-family: 'Montserrat', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-weight: 600;
  color: var(--c-text);
}

.company-page {
  background: linear-gradient(180deg, #fbf6ef 0, #ffffff 420px, #fafaf8 100%);
}
.company-overview-page,
.company-history-page,
.company-message-page {
  background: linear-gradient(180deg, #fbf6ef 0, #ffffff 420px, #fafaf8 100%);
}

.company-main {
  overflow: hidden;
}
.company-main .container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 48px;
}

.company-page #hero,
.company-page #about,
.company-page #contact,
.company-overview-page #hero,
.company-overview-page #about,
.company-overview-page #contact,
.company-history-page #hero,
.company-history-page #about,
.company-history-page #contact,
.company-message-page #hero,
.company-message-page #about,
.company-message-page #contact {
  scroll-margin-top: 120px;
}

/* event-page-header / split-slide-line / philosophy-kicker は
 * sf-components.css に集約（Step 10-9 パス1b）。 */

/* ============================================================
 * data-scroll-reveal (汎用フェードイン)
 * ============================================================ */
.company-page [data-scroll-reveal],
.company-overview-page [data-scroll-reveal],
.company-history-page [data-scroll-reveal],
.company-message-page [data-scroll-reveal] {
  opacity: 0;
  transform: translate3d(0, 54px, 0);
  transition:
    opacity .72s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.company-page [data-scroll-reveal].is-visible,
.company-overview-page [data-scroll-reveal].is-visible,
.company-history-page [data-scroll-reveal].is-visible,
.company-message-page [data-scroll-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ============================================================
 * Hub: company-hero-image / company-about / company-intro
 * ============================================================ */
.company-hero-image {
  width: 100%;
  background: #fff;
}
.company-hero-image__img {
  display: block;
  width: 100%;
  height: clamp(260px, 38vw, 560px);
  object-fit: cover;
}
.company-about {
  padding: var(--sec-pad) 0;
  background: #fff;
}
.company-page .company-about .container {
  max-width: var(--max-w);
}

.company-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  margin-bottom: clamp(58px, 7vw, 96px);
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition:
    opacity .7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
html.intro-ready .company-page .company-intro {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.company-intro__title {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--c-navy);
}
.company-intro__title span {
  color: var(--c-orange);
}
.company-intro__copy {
  display: grid;
  gap: 18px;
  color: rgba(38, 49, 67, 0.84);
  line-height: 2.05;
}
.company-intro__copy p {
  margin: 0;
}

.company-about__head {
  margin-bottom: 34px;
}
.company-about__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.3;
  color: var(--c-navy);
}

/* ============================================================
 * Sub pages: company-section / company-data / company-download
 * ============================================================ */
.company-section {
  padding: var(--sec-pad) 0;
  background: #fff;
}
.company-section__head {
  max-width: 880px;
  margin-bottom: 42px;
}
.company-section__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.3;
  color: var(--c-navy);
}

/* Overview: 会社データ dl/dt/dd */
.company-data {
  border-top: 1px solid rgba(30, 47, 77, 0.12);
}
.company-data__row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 58px);
  padding: 26px 0;
  border-bottom: 1px solid rgba(30, 47, 77, 0.12);
}
.company-data__term {
  margin: 0;
  color: var(--c-navy);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.company-data__desc {
  margin: 0;
  color: rgba(38, 49, 67, 0.84);
  line-height: 1.95;
}
.company-data__desc p {
  margin: 0;
}
.company-data__desc p + p,
.company-data__list + .company-data__list {
  margin-top: 12px;
}
.company-data__desc a {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.company-data__desc a i {
  margin-left: 6px;
  font-size: 0.85em;
}
.company-data__list {
  margin: 0;
  padding-left: 1.2em;
}
.company-data__list li + li {
  margin-top: 6px;
}

/* PDFダウンロードボタン */
.company-download {
  margin-top: 42px;
  text-align: center;
}
.company-download__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 0 42px;
  border-radius: 4px;
  background: var(--c-yellow, #f5b937);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(245, 185, 55, 0.28);
  transition: transform .28s ease, box-shadow .28s ease;
}
.company-download__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(245, 185, 55, 0.34);
  color: #fff;
}

/* History: タイムライン */
.company-timeline {
  position: relative;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(30, 47, 77, 0.12);
}
.company-timeline__item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding: 26px 0;
  border-bottom: 1px solid rgba(30, 47, 77, 0.12);
}
.company-timeline__date {
  font-family: "Oswald", sans-serif;
  font-size: inherit; /* 本文(.company-timeline__text)と同サイズ */
  font-weight: 600;
  line-height: 1.95; /* 本文と行高を揃え、1行目の位置を合わせる */
  color: rgba(238, 114, 53, 0.88);
  padding-left: 16px; /* PCのみ年月の左に余白（SP は767px以下で解除） */
}
.company-timeline__text {
  margin: 0;
  color: rgba(38, 49, 67, 0.84);
  line-height: 1.95;
}

/* Message: 役員写真 + 本文 */
.company-leader-list {
  display: grid;
  gap: clamp(54px, 7vw, 96px);
}
.company-leader {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.company-leader--reverse .company-leader__visual {
  grid-column: 2;
}
.company-leader--reverse .company-leader__body {
  grid-column: 1;
  grid-row: 1;
}
.company-leader__photo {
  display: flex;
  aspect-ratio: 690 / 1000;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(30, 47, 77, 0.1);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(238, 114, 53, 0.09) 0%, rgba(30, 47, 77, 0.06) 100%);
  color: rgba(12, 24, 44, 0.38);
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  overflow: hidden;
}
.company-leader__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.company-leader__photo--image {
  border: 0;
  background: none;
}
.company-leader__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-orange);
  text-transform: uppercase;
}
.company-leader__title {
  margin: 0 0 22px;
  font-size: clamp(25px, 3.2vw, 42px);
  line-height: 1.4;
  color: var(--c-navy);
}
.company-leader__text {
  margin: 0 0 18px;
  color: rgba(38, 49, 67, 0.84);
  line-height: 2;
}
.company-leader__text:last-of-type {
  margin-bottom: 0;
}
.company-leader__name {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  justify-content: flex-end;
  margin-top: 26px;
  color: var(--c-navy);
  font-weight: 700;
  text-align: right;
}
.company-leader__role {
  color: var(--c-orange);
  font-size: 14px;
}

/* ============================================================
 * Company Link Nav (4枚カード共通、子ページ末尾)
 * ※ top-orange-navy.css L3331-3441 から抽出。
 * 経営理念ページにも load されるため、変数はフォールバック値併記。
 * ============================================================ */
.company-link-nav {
  padding: var(--sec-pad, 100px) 0;
  background: var(--c-bg-alt, #f8f8f8);
}
.company-link-nav .container {
  max-width: var(--max-w, 1440px);
  margin: 0 auto;
  padding: 0 48px;
}
.company-link-nav__head {
  margin-bottom: 34px;
}
.company-link-nav__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.3;
  color: var(--c-navy, #1e2f4d);
}
.company-link-nav__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.company-link-card {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 36px 32px;
  border-radius: 24px;
  text-decoration: none;
  touch-action: manipulation;
  isolation: isolate;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.company-link-card::before,
.company-link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
}
.company-link-card::before {
  background: #fff;
  border: 1px solid rgba(30, 47, 77, 0.08);
  z-index: -1;
  transition: transform 0.3s ease;
}
.company-link-card::after {
  background: var(--c-navy, #1e2f4d);
  transform: translate(8px, 8px);
  z-index: -2;
}
.company-link-card > * {
  position: relative;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.3s ease;
}
.company-link-card__en {
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--c-sub, #6b7280);
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.company-link-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.4;
  color: var(--c-navy, #1e2f4d);
  font-weight: 700;
  transition: color 0.3s ease;
}
.company-link-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
  color: var(--c-yellow, #f5b937);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.company-link-card__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-yellow, #f5b937);
  color: #fff;
  transition: all 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  a.company-link-card:hover::before {
    transform: translate(4px, 4px);
  }
  a.company-link-card:hover > * {
    transform: translate(4px, 4px);
  }
  a.company-link-card:hover .company-link-card__cta {
    color: var(--c-orange, #e05531);
  }
  a.company-link-card:hover .company-link-card__cta-icon {
    background: var(--c-orange, #e05531);
    color: #fff;
    transform: translateX(4px);
  }
}

/* CURRENT (SERVICE 下層 .sf-related-card--current と統一。自分自身のカードは非リンク) */
.company-link-card--current {
  cursor: default;
}
.company-link-card--current::before {
  border-color: rgba(224, 85, 49, 0.45);
  box-shadow: 0 18px 40px -24px rgba(224, 85, 49, 0.5);
}
.company-link-card--current::after {
  background: var(--c-orange, #e05531);
}
.company-link-card--current .company-link-card__cta {
  color: var(--c-orange, #e05531);
}
.company-link-card--current .company-link-card__cta-icon {
  background: var(--c-orange, #e05531);
  color: #fff;
  transform: none;
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* event-page-header / split-slide の reduced-motion は sf-components.css に集約（パス1b） */
  .company-page .company-intro,
  .company-page [data-scroll-reveal],
  .company-overview-page [data-scroll-reveal],
  .company-history-page [data-scroll-reveal],
  .company-message-page [data-scroll-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 1100px) {
  .company-intro,
  .company-leader,
  .company-leader--reverse .company-leader__body,
  .company-leader--reverse .company-leader__visual {
    grid-template-columns: 1fr;
    grid-column: auto;
    grid-row: auto;
  }
  .company-link-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  /* event-page-header の SP 調整は sf-components.css に集約（パス1b） */
  .company-about,
  .company-section,
  .company-link-nav {
    padding: 72px 0;
  }
  .company-main .container,
  .company-link-nav .container {
    padding: 0 20px;
  }
  .company-data__row,
  .company-timeline__item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .company-timeline__date {
    padding-left: 0; /* SP は1カラムなので左余白を解除（PCのみ） */
  }
  .company-leader__photo {
    min-height: 260px;
  }
  .company-link-nav__grid {
    grid-template-columns: 1fr;
  }
}