@charset "UTF-8";

/* ========== Company Page ========== */
.company-contents {
  width: calc(100% - 60px);
  max-width: 1200px;
  margin: 0 auto;
}

.company-page .section-label {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #111;
  margin-bottom: 10px;
}

.company-page .section-label::before {
  content: "●";
  margin-right: 6px;
  color: var(--blue);
  font-size: .7em;
  line-height: 1;
}

/* ---- HERO ---- */
.company-hero {
  padding: clamp(56px, 8vw, 120px) 0 0;
}

.company-hero__title {
  font-family: "Poppins", "Zen Kaku Gothic Antique", system-ui, sans-serif;
  font-weight: 800;
  color: var(--blue);
  font-size: clamp(44px, 8vw, 140px);
  line-height: 1.1;
  letter-spacing: .02em;
  margin: 0 0 .4em;
}

.company-hero__lead {
  color: var(--blue);
  font-weight: 800 !important;
  font-size: clamp(22px, 3.2vw, 48px);
  line-height: 1.7;
  letter-spacing: .04em;
  margin-bottom: clamp(8px, 1.6vw, 12px);
  margin-bottom: 40px;
}

.company-hero__text {
  font-size: 1.6rem;
  font-size: var(--fs-16);
  line-height: 1.9;
  color: #333;
}

.company-hero__partners {
  display: flex;
  justify-content: center;
  /* デザイン位置：中央 */
  align-items: center;
  margin: 80px auto;
}

/* 囲み要素をフレックス化して横幅は中身にフィット */
.company-hero__partners figure {
  display: flex;
  align-items: center;
  margin: 0;
  /* figureのデフォルト余白をリセット */
  max-width: 100%;
}

/* ベースの高さ（clampで自動縮尺）。SVGでも崩れない指定 */
:root {
  --partners-h: clamp(200px, 4.0vw, 76px);
}

.company-hero__partners img {
  height: var(--partners-h);
  width: auto;
  margin: 40px auto;
}

/* 余白の微調整（必要なら） */
@media (max-width: 480px) {
  :root {
    --partners-h: 180px;
  }

  /* 小さい端末で見やすく */
  .company-hero__partners {
    margin-top: 18px;
  }
}

.company-hero__cross {
  font-size: 3.2rem;
  font-size: var(--fs-32);
  color: #999;
  line-height: 1;
}

/* ---- VISION ---- */
.company-vision {
  padding: clamp(40px, 7vw, 80px) 0;
}

.company-vision__head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.company-vision__head img {
  height: 350px;
  width: auto;
  margin: 40px auto;
}

.s-meanings {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.s-meanings li {
  font-size: 14px;
  color: #0f172a;
}

.s-meanings .en {
  font-weight: 800;
  color: var(--blue);
  margin-right: 4px;
}

.company-vision__text {
  font-size: 1.6rem;
  font-size: var(--fs-16);
  line-height: 1.9;
  color: #333;
  margin-top: 10px;
}

/* ---- 概要テーブル ---- */
/* セクションの上下余白を少し広げる */
.company-about {
  padding: clamp(56px, 8vw, 120px) 0;
}


.about-table {
  width: min(100%, 820px);
  margin: 14px auto 0;
  border-collapse: collapse;
  border: 0;
  /* 上線などは無し */
}

/* セルの線を消して、行（tr）にだけ下線を引く */
.about-table th,
.about-table td {
  border: 0;
  /* 既存のセル境界線を無効化 */
  padding: 32px 32px;
  line-height: 1.9;
  font-size: 1.6rem;
  font-size: var(--fs-16);
}

/* 下線は行単位でテーブル幅いっぱいに1本だけ */
.about-table tr {
  border-bottom: 1px solid #e5e7eb;
}

/* 見出しセルの調整（任意） */
.about-table th {
  white-space: nowrap;
  width: clamp(160px, 28%, 220px);
  padding-right: 18px;
}

/* モバイル微調整 */
@media (max-width:640px) {
  .about-table {
    width: 100%;
    margin-top: 12px;
  }

  .about-table th,
  .about-table td {
    padding: 12px 10px;
  }

  .about-table th {
    width: 36%;
  }
}

/* ---- 沿革 ---- */

:root {
  --blue: #135ba4;
  /* fallback */
  --red: #d82a2a;
  --white: #fff;
  --rv-ease: cubic-bezier(.2, .6, .2, 1);
}

.reveal {
  /* デフォルトの移動量・スケール（data-reveal で上書き） */
  --rv-x: 0px;
  --rv-y: 12px;
  --rv-scale: 1;
  --rv-delay: 0ms;

  opacity: 0;
  transform: translate(var(--rv-x), var(--rv-y)) scale(var(--rv-scale));
  transition:
    opacity .7s var(--rv-ease) var(--rv-delay),
    transform .7s var(--rv-ease) var(--rv-delay);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 方向指定（任意）：data-reveal="up|down|left|right|zoom" */
[data-reveal="up"] {
  --rv-y: 12px;
}

[data-reveal="down"] {
  --rv-y: -12px;
}

[data-reveal="left"] {
  --rv-x: 12px;
}

[data-reveal="right"] {
  --rv-x: -12px;
}

[data-reveal="zoom"] {
  --rv-y: 0px;
  --rv-scale: .96;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== 長文対応パッチ（HTMLは既存のまま） ===== */

/* 1) li を2カラムグリッド化： [年カラム] [本文カラム]  */
.timeline {
  --year-w: 7.6em;
  /* 年カラムの固定幅（和暦＋波ダッシュ対策） */
  --col-gap: 18px;
  /* 年と本文の間隔 */
}

/* 正光印刷（右カラム）は年表示が長いので少し広めに */
.history-grid>.history-col:nth-child(2) .timeline {
  --year-w: 8.6em;
}

/* li をグリッドに（左のパディング・軸は既存のまま使います） */
.tl__item {
  display: grid;
  grid-template-columns: var(--year-w) 1fr;
  column-gap: var(--col-gap);
  align-items: start;
  /* 読みやすさのために行間の下マージンを少し伸ばす */
  margin-bottom: clamp(14px, 0.6em + 6px, 22px);
}

/* 年はグリッドの1列目に収めて右寄せ（幅指定は不要に） */
.tl__item time {
  width: auto;
  /* 以前の width:7em を上書き */
  justify-self: end;
  text-align: right;
}

/* 本文は折り返し強化：長い住所や数字の連続も途中で折る */
.tl__item span {
  min-width: 0;
  /* グリッド内でのはみ出し防止（重要） */
  overflow-wrap: anywhere;
  /* 長いトークンを強制折返し可 */
  word-break: break-word;
  /* 旧ブラウザ向けフォールバック */
  line-break: strict;
  /* 日本語の禁則を厳しめに */
  text-wrap: pretty;
  /* 対応ブラウザで見た目良く（任意） */
}

:root {
  --blue: #135ba4;
  --red: #d82a2a;
  --white: #fff;
  --rv-ease: cubic-bezier(.2, .6, .2, 1);
}

.reveal {
  --rv-x: 0px;
  --rv-y: 12px;
  --rv-scale: 1;
  --rv-delay: 0ms;
  opacity: 0;
  transform: translate(var(--rv-x), var(--rv-y)) scale(var(--rv-scale));
  transition: opacity .7s var(--rv-ease) var(--rv-delay),
    transform .7s var(--rv-ease) var(--rv-delay);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal="up"] {
  --rv-y: 12px;
}

[data-reveal="down"] {
  --rv-y: -12px;
}

[data-reveal="left"] {
  --rv-x: 12px;
}

[data-reveal="right"] {
  --rv-x: -12px;
}

[data-reveal="zoom"] {
  --rv-y: 0;
  --rv-scale: .96;
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   History（会社沿革） — 完全版CSS
   ========================================= */

/* セクション余白 */
.company-history {
  padding: clamp(40px, 7vw, 96px) 0;
}

/* 左右2カラム */
.history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

@media (max-width:900px) {
  .history-grid {
    grid-template-columns: 1fr;
  }
}

/* タイムライン本体 */
.timeline {
  /* 位置・見た目トークン */
  --line-x: 12px;
  /* 左端から縦軸まで */
  --item-pad: 36px;
  /* 各行テキストの左余白 */
  --axis-color: var(--blue);
  /* 列のテーマ色（後で左右で上書き） */
  --pin-size: 12px;
  /* 丸の直径 */
  --pin-offset: .95em;
  /* 丸の中心の縦位置（liからの距離） */

  /* 長文対応（2カラム行） */
  --year-w: 7.6em;
  /* 年カラム幅（和暦＋波ダッシュ想定） */
  --col-gap: 18px;
  /* 年と本文の間隔 */

  position: relative;
  list-style: none;
  margin: 8px 0 0;
  padding-left: 0;
}

/* 薄い補助線：上下キャップ=丸の中心位置（はみ出し防止） */
.timeline::before {
  content: "";
  position: absolute;
  left: var(--line-x);
  top: var(--pin-offset);
  bottom: var(--pin-offset);
  width: 2px;
  background: rgba(0, 0, 0, .08);
}

/* 本線：丸の中心から中心まで。伸長は scaleY で */
.timeline::after {
  content: "";
  position: absolute;
  left: var(--line-x);
  top: var(--pin-offset);
  bottom: var(--pin-offset);
  width: 2px;
  background: var(--axis-color);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.2s var(--rv-ease, cubic-bezier(.2, .6, .2, 1)) var(--rv-delay, 0ms);
}

.timeline.is-visible::after {
  transform: scaleY(1);
}

/* 各行（2カラム行＋リビール） */
.tl__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--year-w) 1fr;
  column-gap: var(--col-gap);
  align-items: start;

  padding-left: var(--item-pad);
  margin: 0 0 clamp(14px, 0.6em + 6px, 22px);

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--rv-ease, cubic-bezier(.2, .6, .2, 1)),
    transform .6s var(--rv-ease, cubic-bezier(.2, .6, .2, 1));
}

/* 段階表示 */
.timeline.is-visible .tl__item {
  opacity: 1;
  transform: none;
}

.timeline.is-visible .tl__item:nth-child(1) {
  transition-delay: .06s;
}

.timeline.is-visible .tl__item:nth-child(2) {
  transition-delay: .12s;
}

.timeline.is-visible .tl__item:nth-child(3) {
  transition-delay: .18s;
}

.timeline.is-visible .tl__item:nth-child(4) {
  transition-delay: .24s;
}

.timeline.is-visible .tl__item:nth-child(5) {
  transition-delay: .30s;
}

.timeline.is-visible .tl__item:nth-child(6) {
  transition-delay: .36s;
}

.timeline.is-visible .tl__item:nth-child(7) {
  transition-delay: .42s;
}

/* 塗りつぶし丸（線のど真ん中に通す） */
.timeline .tl__item::before {
  content: "";
  position: absolute;
  left: var(--line-x);
  top: var(--pin-offset);
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 50%;
  background: var(--axis-color);
  border: none;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* 線より前面 */
}

.timeline .tl__item::after {
  content: none;
}

/* 内側ドット不要 */

/* ===== 最終調整：丸×線のセンター一致／年と本文の先頭行を揃える ===== */

/* 1) 行の行間を統一（年・本文とも同じ line-height に） */
.tl__item time,
.tl__item span {
  line-height: 1.9;
  /* ← ここで両者の“高さの基準”を揃える */
}

/* 2) 丸の中心位置をトークン化して、線と丸で“共有”する */
.timeline {
  --row-lh: 1.9;
  /* 1) と同じ値を置いておく */
  --pin-size: 14px;
  /* 丸の直径（必要に応じて変更可） */
  --pin-offset: calc(0.5em * var(--row-lh));
  /* 行の“真ん中”=丸の中心 */
}

/* 3) 補助線／本線は、上下を丸の中心までに “キャップ” する（はみ出し防止） */
.timeline::before {
  top: var(--pin-offset);
  bottom: var(--pin-offset);
  height: auto;
}

.timeline::after {
  top: var(--pin-offset);
  bottom: var(--pin-offset);
  height: auto;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.2s var(--rv-ease, cubic-bezier(.2, .6, .2, 1)) var(--rv-delay, 0ms);
}

.timeline.is-visible::after {
  transform: scaleY(1);
}

/* 4) 丸は行の“真ん中”に。線のど真ん中を貫くように X もセンター合わせ */
.timeline .tl__item::before {
  top: var(--pin-offset);
  /* ← 行の中央 */
  left: var(--line-x);
  width: var(--pin-size);
  height: var(--pin-size);
  background: var(--axis-color);
  border: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* ← X=線の中心に合わせる */
  z-index: 2;
}

.timeline .tl__item::after {
  content: none;
}

/* 5) 年カラムと本文カラムの先頭行を“上揃え”（念のため明示） */
.tl__item {
  align-items: start;
}

.tl__item time {
  align-self: start;
}

.tl__item span {
  align-self: start;
}

/* 6) 視認性向上（任意）：丸の外周に白縁を足すと背景上でも線のはみ出しが見えない */
.timeline .tl__item::before {
  box-shadow: 0 0 0 2px #fff;
}

/* 7) 右列（正光印刷）の年幅とセンタリングの微調整（必要なら値だけ調整） */
.history-grid>.history-col:nth-child(2) .timeline {
  --year-w: 8.6em;
}


/* モバイル調整 */
@media (max-width:600px) {
  .timeline {
    --line-x: 10px;
    --item-pad: 30px;
    --year-w: 6.6em;
  }
}

/* ===== 列ごとのテーマ色（左=青 / 右=赤） ===== */
.history-grid>.history-col:nth-child(1) .timeline {
  --axis-color: var(--blue);
}

.history-grid>.history-col:nth-child(2) .timeline {
  --axis-color: var(--red);
}

/* ===== 正光印刷（右カラム）は年が長い想定で少し広め ===== */
.history-grid>.history-col:nth-child(2) .timeline {
  --year-w: 8.6em;
}