/* ==================================================
   富士梱包 企業情報ページ STYLES
   トップ／採用ページのデザイン言語（大英字ウォーターマーク・影付きカード＋ホバー・
   3色グラデ見出し・スクロール演出）に揃えて刷新（2026-07-08）
   ================================================== */

/* ---------- Global (company-page) ---------- */
.company-page *, .company-page *::before, .company-page *::after {
  box-sizing: border-box;
}
.company-page { margin: 0; padding: 0; background: #fff; }
.company-page ul  { list-style: none; margin: 0; padding: 0; }
.company-page a   { text-decoration: none; color: inherit; }
.company-page img { display: block; max-width: 100%; }
.company-page p   { margin: 0; }
.company-page h1, .company-page h2, .company-page h3 { margin: 0; }

/* Header（内部ページは Navy Black 背景） */
.company-page .top-header {
  background: rgba(0, 12, 33, .9);
}

/* 共通トークン（このページ内） */
.company-page {
  --co-soft: #f4f7fb;
  --co-line: rgba(10, 40, 91, .08);
  --co-card-shadow: 0 10px 30px rgba(10, 40, 91, .06);
  --co-card-shadow-hover: 0 22px 46px rgba(10, 40, 91, .14);
  --co-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==================================================
   PAGE HEADER（business-header と同パターン）
   ================================================== */
.company-header {
  background: #000c21;
  width: 100%;
  position: relative;
  overflow: hidden;
}
/* ヘッダーにも薄い大英字 */
.company-header::after {
  content: "Company";
  position: absolute;
  right: -10px;
  bottom: -30px;
  font-family: var(--font-deco);
  font-weight: 600;
  font-size: clamp(120px, 20vw, 300px);
  line-height: .8;
  color: rgba(255, 255, 255, .04);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.company-header__title {
  position: relative;
  z-index: 1;
  padding: 100px 40px 60px;
  display: flex;
  align-items: flex-end;
  min-height: 250px;
}

.company-header__title-inner {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.company-title-group {
  display: flex;
  align-items: stretch;
  gap: 30px;
  flex-shrink: 0;
}

.company-title-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.company-title-en {
  font-family: var(--font-deco, 'Helvetica Neue', 'Arial', sans-serif);
  font-weight: 600;
  font-size: 60px;
  line-height: 1;
  letter-spacing: .01em;
}

.company-title-ja {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2.4px;
}

.company-title-sep {
  width: 5px;
  background: var(--color-red, #ca242e);
  align-self: stretch;
}

/* ==================================================
   SECTIONS（英字ウォーターマーク＋交互の背景でリズム）
   ================================================== */
.company-section {
  position: relative;
  overflow: hidden;
  padding: 100px 40px;
}
.company-section--message    { background: #fff; }
.company-section--philosophy { background: var(--co-soft); }
.company-section--profile    { background: #fff; }
.company-section--history    { background: var(--co-soft); }
.company-section--governance { background: #fff; }
.company-section--access     { background: var(--co-soft); }

/* 大英字ウォーターマーク（各セクション右上に薄く） */
.company-section__wm {
  position: absolute;
  top: 30px;
  right: -8px;
  font-family: var(--font-deco);
  font-weight: 600;
  font-size: clamp(66px, 12vw, 180px);
  line-height: .8;
  letter-spacing: .01em;
  color: rgba(10, 40, 91, .05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.company-section__container {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 46px;
}

/* ---- トップメッセージ ---- */
.company-message {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}

.company-message__lead {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 2.4px;
  line-height: 1.8;
  color: var(--color-text, #3e3e3e);
}
.company-message__lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-blue, #0050d1), var(--color-red, #ca242e));
}

.company-message__body p {
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: .8px;
  line-height: 2.25;
  color: var(--color-text, #3e3e3e);
  margin-bottom: 1.2em;
}
.company-message__body p:last-child { margin-bottom: 0; }

.company-message__sign {
  margin-top: 6px;
  padding-top: 26px;
  border-top: 1px solid var(--co-line);
  font-family: var(--font-mincho, 'Noto Serif JP', serif);
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 1.9;
  color: var(--color-text, #3e3e3e);
  text-align: right;
}
.company-message__sign span {
  font-weight: 700;
  font-size: 19px;
}

/* ==================================================
   企業理念 / 品質（共通カード：ゴースト番号＋上グラデ＋ホバー浮き）
   ================================================== */
.company-philosophy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  counter-reset: phi;
}

.company-philosophy__item {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--co-line);
  border-radius: 16px;
  padding: 42px 32px 34px;
  box-shadow: var(--co-card-shadow);
  transition: transform .4s var(--co-ease), box-shadow .4s ease;
}
/* 上の3色アクセント */
.company-philosophy__item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-blue, #0050d1) 0 64%, var(--color-red, #ca242e) 64% 100%);
}
/* 右上のゴースト番号 */
.company-philosophy__item::after {
  counter-increment: phi;
  content: "0" counter(phi);
  position: absolute;
  top: 12px;
  right: 20px;
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  color: rgba(10, 40, 91, .06);
  pointer-events: none;
}
/* タッチ端末では一度タップすると :hover が残り、カードが浮いたまま固まる。
   マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
  .company-philosophy__item:hover {
    transform: translateY(-6px);
    box-shadow: var(--co-card-shadow-hover);
  }
}

.company-philosophy__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-en, 'Poppins', sans-serif), var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: .02em;
  color: var(--color-blue, #0050d1);
  margin-bottom: 16px;
}

.company-philosophy__text,
.company-philosophy__list li {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 15px;
  line-height: 2;
  color: var(--color-text, #3e3e3e);
}

.company-philosophy__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.company-philosophy__list li {
  padding-left: 1.4em;
  position: relative;
}
.company-philosophy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  background: var(--color-blue, #0050d1);
  transform: rotate(45deg);
}

/* ==================================================
   会社概要（カード＋洗練テーブル）
   ================================================== */
.company-profile-card {
  background: #fff;
  border: 1px solid var(--co-line);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
  overflow: hidden;
}

.company-profile-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  color: var(--color-text, #3e3e3e);
}

.company-profile-table th,
.company-profile-table td {
  text-align: left;
  vertical-align: top;
  padding: 20px 30px;
  border-bottom: 1px solid var(--co-line);
  line-height: 1.9;
}

.company-profile-table th {
  width: 210px;
  background: var(--co-soft);
  color: #16325c;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  white-space: nowrap;
  border-right: 1px solid var(--co-line);
}
.company-profile-table td { font-size: 15.5px; }

.company-profile-table tr:last-child th,
.company-profile-table tr:last-child td { border-bottom: none; }

/* ==================================================
   沿革（縦タイムライン）
   ================================================== */
/* 順序のある年表なので <ol> のままだが、数字（1. 2. …）は出さない。
   丸いノードが年の目印になっており、番号が付くと二重に見えるため。 */
.company-timeline {
  position: relative;
  max-width: 780px;
  padding: 4px 0;
  margin: 0;
  list-style: none;
}
.company-timeline__item {
  position: relative;
  padding: 0 0 42px 46px;
  margin-left: 7px;
  border-left: 2px solid var(--co-line);
}
.company-timeline__item:last-child {
  padding-bottom: 4px;
  border-left-color: transparent;
}
.company-timeline__item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--color-blue, #0050d1);
  box-shadow: 0 0 0 5px rgba(0, 80, 209, .1);
}
.company-timeline__year {
  display: block;
  font-family: var(--font-en, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .03em;
  color: var(--color-blue, #0050d1);
  margin-bottom: 8px;
}
.company-timeline__year-unit {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 14px;
  font-weight: 500;
  margin: 0 2px;
}
.company-timeline__text {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text, #3e3e3e);
}

/* ==================================================
   アクセス（カード＋ホバー浮き）
   ================================================== */
.company-access-cards {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.company-access-card {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--co-line);
  border-radius: 16px;
  box-shadow: var(--co-card-shadow);
  overflow: hidden;
  transition: transform .4s var(--co-ease), box-shadow .4s ease;
}
/* タッチ端末では一度タップすると :hover が残り、カードが浮いたまま固まる。
   マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
  .company-access-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--co-card-shadow-hover);
  }
}

/* 本文側。padding をここに集約し、地図との間に必ず余白が残るようにしている
   （旧実装は各要素の margin 頼みで、実測すると本文と地図の隙間が 0px だった） */
.company-access-card__body {
  padding: 30px 30px 26px;
}

/* 拠点名。EN のキッカー＋和名の組みは、セクション見出し・設備一覧・採用ページと
   同じ組み方に揃えた。以前の「赤い縦棒」はサイト内で浮いていたため、
   見出し直下の 2 色アクセントバー（section-heading__bar の縮小版）に置き換えている。 */
.company-access-card__office {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.6px;
  line-height: 1.4;
  color: #000c21;
}
.company-access-card__office-en {
  font-family: var(--font-en, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-blue, #0050d1);
}
.company-access-card__accent {
  display: block;
  width: 46px;
  height: 3px;
  margin: 14px 0 18px;
  background: linear-gradient(
    to right,
    var(--color-blue, #0050d1) 0 60%,
    var(--color-red, #ca242e) 60% 100%
  );
}

/* 住所・TEL・FAX。ラベルと値を2列に分けて、番号だけを目で拾えるようにする */
.company-access-info {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
}
.company-access-info dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 2.2;
  color: rgba(10, 40, 91, .5);
}
.company-access-info dd {
  margin: 0;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.75;
  color: var(--color-text, #3e3e3e);
}
/* TEL はスマホでそのまま発信できるようリンクにしてある。
   .company-page a{color:inherit} が効くので色は明示する */
.company-access-info__tel {
  font-family: var(--font-en, 'Poppins', sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-blue, #0050d1);
  transition: opacity .25s;
}
.company-access-info__tel:hover { opacity: .7; text-decoration: underline; }

.company-access-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-blue, #0050d1);
}
.company-access-card__link-arw {
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: background .25s, color .25s;
}
/* 別タブで開く外部リンクなので、矢印は右上向き（↗）にする。
   ::before が斜めの軸、::after が矢じり。 */
.company-access-card__link-arw::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.company-access-card__link-arw::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.company-access-card__link:hover .company-access-card__link-arw {
  background: var(--color-blue, #0050d1);
  color: #fff;
}

.company-access-card__map {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: auto;
  background: var(--co-soft);
  border-top: 1px solid var(--co-line);
}
.company-access-card__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* CONTACT帯の青背景版（.company-contact）は 2026-10-07 に削除。全ページでトップと同じ白地のデザインに統一（top.css .top-contact） */

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 999px) {
  .company-philosophy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .company-header__title {
    padding: 90px 20px 40px;
    min-height: 180px;
  }
  .company-title-en { font-size: 40px; }

  .company-section { padding: 60px 20px; }
  .company-section__container { gap: 34px; }
  .company-section__wm { font-size: 56px; top: 22px; }

  .company-message__lead { font-size: 22px; padding-left: 18px; }

  .company-philosophy { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .company-philosophy__item { padding: 34px 24px 28px; }
  .company-philosophy__label { font-size: 21px; }

  /* テーブルは縦積み（ラベル→値） */
  .company-profile-table th,
  .company-profile-table td {
    display: block;
    width: 100%;
    border-right: none;
  }
  .company-profile-table th {
    padding: 14px 20px 8px;
    border-bottom: none;
  }
  .company-profile-table td {
    padding: 0 20px 16px;
  }
  .company-profile-table tr { display: block; border-bottom: 1px solid var(--co-line); }
  .company-profile-table tr:last-child { border-bottom: none; }

  .company-timeline__item { padding-left: 34px; }
  .company-access-card__body { padding: 24px 22px 22px; }
  .company-access-card__office { font-size: 18px; }
  .company-access-info { grid-template-columns: 60px minmax(0, 1fr); gap: 8px 12px; }
}

/* ==================================================
   品質・情報管理：カード4枚化＋品質方針ブロック
   （2026-08-28 旧サイト fujikon.jp/case から正文を反映）
   ================================================== */
.company-section--governance .company-philosophy {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-policy {
  margin-top: 28px;
  background: var(--co-soft);
  border-left: 4px solid var(--color-blue, #0050d1);
  padding: 34px 38px;
}
.company-policy__title {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 1.6px;
  color: var(--color-text, #3e3e3e);
  margin-bottom: 18px;
}
.company-policy__list {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.company-policy__list li {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 15px;
  letter-spacing: .6px;
  line-height: 1.95;
  color: var(--color-text, #3e3e3e);
}
.company-policy__list li::marker {
  color: var(--color-blue, #0050d1);
  font-weight: 700;
}
.company-policy__sign {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--co-line);
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--color-text, #3e3e3e);
  text-align: right;
}

@media (max-width: 767px) {
  .company-section--governance .company-philosophy { grid-template-columns: minmax(0, 1fr); }
  .company-policy { padding: 26px 22px; }
  .company-policy__title { font-size: 17px; }
  .company-policy__list li { font-size: 14px; }
  .company-policy__sign { text-align: left; }
}

/* ==================================================
   モバイル改修 v3（2026-09-02）
   飾り英字が画面幅に収まらず、端で文字が切れていたのを修正。
   PC(768px超)の見た目は変更しない。
   ================================================== */
@media (max-width: 767px) {
  /* ヒーローの "Company"。clamp の下限120pxが効いて幅547pxになり、
     390px幅の画面で両端が切れて「mpany」と読めてしまっていた。 */
  .company-header::after {
    font-size: 56px;
    right: 0;
    bottom: -12px;
  }
  /* 各セクションの飾り英字。right:-8px のぶん右端が切れていた */
  .company-section__wm { right: 0; }
}

/* ==================================================
   総点検 2026-10-07
   ・トップメッセージ：明朝体は「代表メッセージ専用の表現」として残す。
     本文の左端を見出しに揃え（以前は max-width 840px の中央寄せで右に寄っていた）、
     サイズ・行間は本文ルール（16px）に寄せる
   ・会社概要「施設」を拠点＞フロアの箇条書きに
   ・ページヘッダーは共通部品（top.css .page-head）。旧 .company-header 系は未使用
   ================================================== */
.company-message { margin: 0; }
.company-message__body p {
  font-size: 16px;
  line-height: 2;
  letter-spacing: .06em;
}
@media (max-width: 767px) {
  .company-message__body p { font-size: 15px; line-height: 1.9; }
  .company-message__lead { font-size: 20px; }
}
.company-facility__office {
  font-weight: 700;
  margin: 0;
}
.company-facility__office + .company-facility__list { margin-bottom: 8px; }
.company-page .company-facility__list li {
  position: relative;
  padding-left: 1em;
}
.company-page .company-facility__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ---------- セクションの大英字（Message・Profile など）：PCのサイズを統一（2026-10-07） ----------
   トップ・採用ページの大英字と同じ比率（1920px で約163px）。位置は従来どおり。 */
@media (min-width: 1100px) {
  .company-section__wm { font-size: clamp(120px, 8.5vw, 165px); }
}

/* トップメッセージのリード「「モノを届ける」のすべてを、確かな品質で。」左のグラデーションの縦棒を削除（2026-10-07 ユーザー指示）。
   棒のぶん空けていた左の余白も戻し、本文と左端を揃える */
.company-message__lead { padding-left: 0; }
.company-message__lead::before { display: none; }
@media (max-width: 767px) {
  .company-message__lead { padding-left: 0; }
}

/* アクセスの拠点名の下の小さなバーも、コンテンツバーに合わせて赤一色に（2026-10-07） */
.company-access-card__accent { background: var(--cbar-red, var(--color-red)); height: 4px; }

/* ---------- 2026-10-08（10/7ミーティング修正）：トップメッセージの署名 ----------
   肩書（代表取締役）は名前の天地中央に置き、肩書と名前の間は全角アキ。名前は1字ずつ半角アキ。 */
.company-message__sign .company-message__sign-line {
  display: inline-flex;
  align-items: center;
  gap: 1em; /* 全角アキ（名前の文字サイズ基準） */
  font-size: 19px;
  font-weight: 700;
}
.company-message__sign .company-message__sign-title {
  font-size: 14px;
  font-weight: 400;
}
.company-message__sign .company-message__sign-name {
  font-size: 19px;
  letter-spacing: .5em;
  margin-right: -.5em; /* 最後の字の後ろの字間を打ち消して右端を揃える */
}

/* ---------- 2026-10-08：会社概要「主な設備」（拠点別。「・」の後ろでだけ折り返す） ---------- */
.company-page .company-equipment__items { margin: 0 0 8px; }
.company-page .company-equipment__items:last-child { margin-bottom: 0; }