/* ============================================================
   会社概要（/company）ページ固有スタイル
   共通: ../../css/{tokens,base,components}.css
   方針：ブラウン基調・全ゴシック・掛軸の縦線あしらい。
   会社概要は定義リスト型のプロフィール表（所在地は3拠点カード）、
   企業理念は放射グラデのパネルで主役化、ロゴ由来は2カラム。
   ============================================================ */

/* ---- 1. ページタイトル（中央・掛軸のあしらい） ---- */
.page-hero { padding-block: var(--space-1600) var(--space-1200); }
.page-hero__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-600); padding-top: var(--space-800);
}
/* タイトル上の縦の細線（掛軸のモチーフ） */
.page-hero__inner::before { content: ""; width: 1px; height: 56px; background: var(--color-primary); }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-200);
  font: 500 14px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .12em;
}
.page-hero__eyebrow .icon { font-size: 18px; color: var(--color-primary); }
.page-hero__title {
  font: 700 56px/1.3 var(--font-display); letter-spacing: .12em; color: var(--color-primary-deep);
}
.page-hero__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-300);
}
.page-hero__chips li {
  display: inline-flex; align-items: center;
  padding: var(--space-150) var(--space-400);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-full);
  background: #fff;
  font: 700 13px/1 var(--font-base); letter-spacing: .08em; color: var(--color-primary-deep);
}

/* ---- 2. 会社概要（プロフィール表） ---- */
.profile-section { gap: var(--space-800); padding-inline: var(--page-gutter); }
.profile {
  width: 100%; max-width: 880px;
  background: #fff;
  border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  box-shadow: 0 12px 30px rgba(63, 63, 63, .04);
  overflow: hidden;
}
.profile__row {
  display: grid; grid-template-columns: 200px 1fr;
}
.profile__row + .profile__row { border-top: 1px solid var(--color-grey); }

/* 左ラベル（ブラウン・アイコン付き・淡い面／上揃え） */
.profile__label {
  display: flex; align-items: flex-start; gap: var(--space-300);
  padding: var(--space-600) var(--space-800);
  background: var(--color-grey);
  border-right: 1px solid var(--color-secondary);
  font: 700 16px/1.6 var(--font-display); letter-spacing: .04em;
  color: var(--color-primary-deep);
}
.profile__label .icon { font-size: 22px; flex: none; color: var(--color-primary); }

/* 右の値 */
.profile__value {
  display: flex; flex-direction: column; gap: var(--space-400);
  padding: var(--space-600) var(--space-800);
}
.profile__company { font: 700 19px/1.6 var(--font-base); color: var(--color-text); }
.profile__rep { font: 700 19px/1.6 var(--font-base); letter-spacing: .12em; color: var(--color-text); }
.profile__text { font: 400 15px/1.95 var(--font-base); color: var(--color-text-soft); }

/* 加盟団体バナー */
.profile__banner {
  align-self: flex-start;
  padding: var(--space-300) var(--space-400);
  background: #fff; border: 1px solid var(--color-grey); border-radius: var(--radius-200);
}
.profile__banner img { width: 234px; max-width: 100%; height: auto; }

/* 所在地：3拠点カード */
.office-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-400);
}
.office-card {
  display: flex; flex-direction: column; gap: var(--space-300);
  padding: var(--space-600);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-200);
}
.office-card__name {
  position: relative; padding-left: var(--space-400);
  font: 700 17px/1.4 var(--font-display); letter-spacing: .06em; color: var(--color-primary-deep);
}
.office-card__name::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1em; background: var(--color-primary);
}
.office-card__addr { font: 400 14px/1.8 var(--font-base); color: var(--color-text); }
.office-card__contact {
  margin-top: auto;
  display: flex; flex-direction: column; gap: var(--space-150);
  padding-top: var(--space-300); border-top: 1px solid var(--color-grey);
}
.office-card__line { display: flex; align-items: center; gap: var(--space-200); }
.office-card__line dt {
  display: inline-flex; align-items: center; gap: var(--space-150);
  flex: none; color: var(--color-text-soft);
}
.office-card__line dt .icon { font-size: 16px; color: var(--color-primary); }
.office-card__key { font: 700 11px/1 var(--font-base); letter-spacing: .1em; }
.office-card__line dd { font: 700 14px/1.4 var(--font-base); color: var(--color-text); white-space: nowrap; }
.office-card__line dd a { color: inherit; transition: color .2s ease; }

/* 事業内容：◆マーカーの箇条書き */
.biz-list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-200) var(--space-600);
}
.biz-list li {
  position: relative; padding-left: var(--space-400);
  font: 500 15px/1.8 var(--font-base); color: var(--color-text);
}
.biz-list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; background: var(--color-primary); transform: rotate(45deg);
}
.biz-license {
  display: flex; flex-direction: column; gap: var(--space-300);
  padding-top: var(--space-400); border-top: 1px dashed var(--color-secondary);
}
.biz-license__label { font: 700 13px/1 var(--font-base); letter-spacing: .08em; color: var(--color-text-soft); }
.biz-license__tags .tag { color: var(--color-primary-deep); }

/* ---- 3. 企業理念（放射グラデのパネルで主役化） ---- */
.creed { display: flex; justify-content: center; }
.creed__statement {
  position: relative; isolation: isolate;
  max-width: 820px; width: 100%;
  padding: var(--space-1200) var(--space-800);
  text-align: center;
  font: 700 27px/2 var(--font-display); letter-spacing: .08em;
  color: var(--color-primary-deep);
  background: linear-gradient(180deg, var(--color-bg-soft), #fff);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  box-shadow: 0 16px 40px rgba(63, 63, 63, .05);
}
.creed__statement::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: var(--radius-400);
  background: radial-gradient(64% 100% at 50% 0%, rgba(155, 135, 89, .12), transparent 68%);
}

/* ---- 4. ロゴマークの由来（2カラム） ---- */
.logo-origin {
  display: grid; grid-template-columns: 200px 1fr; align-items: center;
  gap: var(--space-1200);
  max-width: 760px;
}
.logo-origin__mark {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-800);
  background: #fff; border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  box-shadow: 0 12px 30px rgba(63, 63, 63, .05);
}
.logo-origin__mark img { width: auto; height: 120px; }
.logo-origin__body { display: flex; flex-direction: column; gap: var(--space-400); }
.logo-origin__text { font: 500 18px/2.1 var(--font-base); color: var(--color-text); }
.logo-origin__em { font-weight: 700; color: var(--color-primary-deep); }

/* ---- レスポンシブ ---- */
@media (max-width: 760px) {
  .page-hero__title { font-size: 40px; }
  .profile__row { grid-template-columns: 1fr; }
  .profile__label { border-right: none; border-bottom: 1px solid var(--color-grey); }
  .office-list { grid-template-columns: 1fr; }
  .office-card__line dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .biz-list { grid-template-columns: 1fr; }
  .creed__statement { font-size: 21px; padding: var(--space-800) var(--space-600); }
  .logo-origin { grid-template-columns: 1fr; gap: var(--space-800); justify-items: center; text-align: center; }
  .br-pc { display: none; }
}

/* ============================================================
   ブラッシュアップ：上品な微インタラクション
   faq/guide の作法に合わせ、ブラウン基調を維持。
   見せ場は「企業理念パネルの出現」1点に集中。
   prefers-reduced-motion を尊重（自動再生はガード）。
   ============================================================ */

/* ① ヒーローに淡いブラウンの放射グラデ */
.page-hero { position: relative; isolation: isolate; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 78% at 50% 0%, rgba(155, 135, 89, .12), transparent 70%);
}

/* ② 拠点カードのホバー：微浮き＋枠線プライマリ＋影、電話番号点灯 */
.office-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.office-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: 0 16px 30px rgba(63, 63, 63, .08);
}
.office-card__line .icon { transition: transform .3s ease; }
.office-card:hover .office-card__line dt .icon { transform: scale(1.1) rotate(-8deg); }
.office-card__line dd a:hover { color: var(--color-primary); }

/* ③ ロゴマーク：ホバーでカードを温める */
.logo-origin__mark { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.logo-origin__mark:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: 0 18px 36px rgba(63, 63, 63, .08);
}

@media (prefers-reduced-motion: no-preference) {
  /* ④ 初回ロード：プロフィール各行を少しずつフェードアップ */
  .profile__row { opacity: 0; animation: company-rise .5s ease forwards; }
  .profile__row:nth-child(1) { animation-delay: .05s; }
  .profile__row:nth-child(2) { animation-delay: .11s; }
  .profile__row:nth-child(3) { animation-delay: .17s; }
  .profile__row:nth-child(4) { animation-delay: .23s; }
  .profile__row:nth-child(5) { animation-delay: .29s; }
  @keyframes company-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ⑤【主役】企業理念パネルはスクロールで静かに浮き上がる
        （JS不要のため、初回ロードのフェードイン＆スライドで表現） */
  .creed__statement { animation: creed-reveal .9s ease .15s both; }
  @keyframes creed-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}