@charset "UTF-8";

/* 沿革タイムライン（history timeline）
   strengths ページ 03 ブロックの沿革図。元は ph_history.png という 1 枚画像だった。
   2026-09-01 作成 / 加賀美
   - クラスはすべて gh- 始まり。common.css / strength.css とは衝突しない
   - 他ページで使う場合は、この CSS と history-timeline.js を読み込み、
     マークアップ（section.gh）をコピーすれば動く
   - 色・寸法は元画像 ph_history.png からの実測値 */

/* ===== 03 を「左に本文／右に沿革タイムライン」の 2 カラムにする =====
   元は右カラムが position:absolute の画像枠で中身の高さを持たなかった。
   タイムラインは画像より縦に長いので flex に置き換えるが、位置は 02・04 の画像と同じ
   （1331px以上: left:700px / top:80px、769〜1330px: left:58% / top:155px）。
   セレクタは 03 のブロックに限定してあり、他ブロック・他ページには影響しない。 */
.strengthspoints-block-03{display:flex;align-items:flex-start}
.strengthspoints-block-03 .strengthspoints-block-inner{width:53%;flex:0 0 auto}
.strengthspoints-block-03 > .gh{width:495px;flex:0 0 auto;margin-left:80px;padding-top:80px}
@media screen and (min-width:769px) and (max-width:1330px){
  .strengthspoints-block-03 > .gh{width:40%;margin-left:5%;padding-top:155px}
}
@media screen and (max-width:768px){
  .strengthspoints-block-03{display:block}
  .strengthspoints-block-03 .strengthspoints-block-inner{width:100%}
  .strengthspoints-block-03 > .gh{width:100%;margin-left:0;padding-top:22px}
}

/* =============================================================
   ギャプライズ沿革タイムライン
   - 画像1枚だった沿革（ph_history.png）を HTML / CSS / JS で再構築
   - 色・寸法はすべて元画像からの実測値
       濃いオレンジ #ea5504 … 年号・タグ・節点のリング
       薄いオレンジ #f5af7e … 縦の軸・横罫線・末尾のドット
       黒 #000        … 本文・起点/終点ラベル
       節点 外径12px（リング3px＋内側の白6px）／軸4px／罫線2px
   - .gh セクションごとコピーすれば既存ページに移植可能
   ============================================================= */

:root{
  --gh-orange:#ea5504;                      /* 年号・タグ・節点リング */
  --gh-orange-light:#f5af7e;                /* 軸・罫線・ドット */
  --gh-orange-faint:rgba(245,175,126,.34);  /* 軸のうち、まだ読み進めていない部分 */
  --gh-ink:#000;
  --gh-black:#000;
  --gh-white:#fff;

  --gh-max:920px;               /* タイムラインの最大幅 */
  --gh-axis-w:4px;              /* 縦の軸の太さ */
  --gh-rule-w:2px;              /* 横罫線の太さ */
  --gh-node:12px;               /* 節点の外径 */
  --gh-node-ring:3px;           /* 節点のリングの太さ */
  --gh-pad:30px;                /* 軸からテキストまでの余白 */
  --gh-ms-half:25px;            /* 起点・終点ラベルの高さの半分 */
  --gh-progress:1;              /* 軸の描画進捗。JS 有効時のみ 0→1 に更新 */
}

/* box-sizing はタイムラインの中だけに限定する。
   ページ全体に * で当てると、既存サイト（content-box 前提。例: .strengthspoints-title は
   width:550px + padding-left:95px）のテキスト領域が padding の分だけ縮み、見出しが切れる。 */
.gh,.gh *,.gh *::before,.gh *::after{box-sizing:border-box}


/* ---------- セクション ---------- */
.gh{padding:0;container-type:inline-size}
.gh__inner{max-width:var(--gh-max);margin:0 auto}
.gh__title{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- タイムライン本体 ---------- */
.gh-timeline{position:relative}

/* 縦の軸。起点ラベルの中心から終点ラベルの中心まで */
.gh-axis{
  position:absolute;
  top:var(--gh-ms-half);bottom:var(--gh-ms-half);
  left:50%;width:var(--gh-axis-w);margin-left:calc(var(--gh-axis-w) / -2);
  background:var(--gh-orange-faint);
  z-index:0;
}
.gh-axis__fill{
  display:block;width:100%;height:100%;
  background:var(--gh-orange-light);
  transform:scaleY(var(--gh-progress));
  transform-origin:top center;
}

/* 起点・終点の黒ラベル。軸がラベルの中心を貫く */
.gh-milestone{
  position:relative;z-index:2;
  width:fit-content;margin:0 auto;
  padding:12px 30px;
  background:var(--gh-black);color:var(--gh-white);
  font-size:15px;font-weight:700;line-height:1.6;letter-spacing:.06em;
  border-radius:3px;
}

/* 終点ラベルの下のドット。「この先も続く」ことを示す */
.gh-tail{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  margin-top:10px;
}
.gh-tail span{
  width:5px;height:5px;border-radius:50%;
  background:var(--gh-orange-light);
}

/* ---------- 年代ブロックの並び ---------- */
/* 2 列グリッド。各ブロックを 2 行ぶん占有させ、1 行ずつずらして
   配置することで、元画像と同じ「左右が半分ずつ重なるジグザグ」を作る。
   内容の量が変わっても崩れない。 */
.gh-list{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:0;row-gap:0;align-items:start;
  list-style:none;margin:0;padding:44px 0 48px;
  position:relative;z-index:1;min-width:0;
}
.gh-entry:nth-child(1){grid-row:1 / span 2}
.gh-entry:nth-child(2){grid-row:2 / span 2}
.gh-entry:nth-child(3){grid-row:3 / span 2}
.gh-entry:nth-child(4){grid-row:4 / span 2}
.gh-entry:nth-child(5){grid-row:5 / span 2}
.gh-entry:nth-child(6){grid-row:6 / span 2}
.gh-entry:nth-child(7){grid-row:7 / span 2}
.gh-entry:nth-child(8){grid-row:8 / span 2}

.gh-entry{position:relative;padding-bottom:28px;min-width:0}
.gh-entry:nth-child(odd){grid-column:2}   /* 奇数番目 → 軸の右 */
.gh-entry:nth-child(even){grid-column:1}  /* 偶数番目 → 軸の左 */

/* 軸側の余白。罫線だけは軸まで伸ばすので、中身にだけ効かせる */
.gh-entry:nth-child(odd) .gh-entry__period,
.gh-entry:nth-child(odd) .gh-entry__body{padding-left:var(--gh-pad)}
.gh-entry:nth-child(even) .gh-entry__period,
.gh-entry:nth-child(even) .gh-entry__body{padding-right:var(--gh-pad)}
.gh-entry:nth-child(even) .gh-entry__period{text-align:right}

/* ---------- 見出し・罫線・節点 ---------- */
.gh-entry__head{position:relative}

.gh-entry__period{
  position:relative;z-index:1;
  margin:0 0 12px;
  font-size:clamp(1.75rem,1.25rem + 1.7vw,2.375rem);
  font-weight:700;line-height:1.1;letter-spacing:.01em;
  color:var(--gh-orange);
  white-space:nowrap;
}

/* 罫線は節点の外側から始める（節点に重ねない） */
.gh-entry__rule{
  display:block;height:var(--gh-rule-w);
  width:calc(100% - var(--gh-node) / 2);
  background:var(--gh-orange-light);
}
.gh-entry:nth-child(odd) .gh-entry__rule{
  margin-left:calc(var(--gh-node) / 2);transform-origin:left center;
}
.gh-entry:nth-child(even) .gh-entry__rule{
  margin-right:calc(var(--gh-node) / 2);margin-left:auto;transform-origin:right center;
}

.gh-entry__node{
  position:absolute;bottom:0;z-index:2;
  width:var(--gh-node);height:var(--gh-node);
  border:var(--gh-node-ring) solid var(--gh-orange);border-radius:50%;
  background:var(--gh-white);
}
.gh-entry:nth-child(odd) .gh-entry__node{left:0;transform:translate(-50%,50%)}
.gh-entry:nth-child(even) .gh-entry__node{right:0;transform:translate(50%,50%)}

/* ---------- タグ・本文 ---------- */
.gh-entry__body{padding-top:18px}

.gh-entry__tags{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:0 0 16px;padding:0;
}
.gh-entry__tags li{
  padding:5px 15px;
  background:var(--gh-orange);color:var(--gh-white);
  border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.02em;
  white-space:nowrap;
}

.gh-entry__text{
  margin:0;
  font-size:15px;line-height:2.2;letter-spacing:.02em;color:var(--gh-ink);
}

/* =============================================================
   出現アニメーション
   既定（JS 無効／未実行）は完成状態。html.gh-js が付いたときだけ
   :not(.is-visible) で出現前の状態を作るので、JS が動かなくても
   内容はそのまま読める。
   ============================================================= */
.gh-entry__period,
.gh-entry__tags li,
.gh-entry__text{transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.gh-entry__rule{transition:transform .75s cubic-bezier(.22,1,.36,1)}
.gh-entry__node{transition:transform .5s cubic-bezier(.34,1.56,.64,1) .38s}
.gh-milestone,.gh-tail span{transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}

.gh-entry__period{transition-delay:.06s}
.gh-entry__tags li:nth-child(1){transition-delay:.34s}
.gh-entry__tags li:nth-child(2){transition-delay:.40s}
.gh-entry__tags li:nth-child(3){transition-delay:.46s}
.gh-entry__tags li:nth-child(4){transition-delay:.52s}
.gh-entry__text{transition-delay:.46s}
.gh-tail span:nth-child(1){transition-delay:.10s}
.gh-tail span:nth-child(2){transition-delay:.22s}
.gh-tail span:nth-child(3){transition-delay:.34s}

.gh-js .gh-entry:not(.is-visible) .gh-entry__rule{transform:scaleX(0)}
.gh-js .gh-entry:not(.is-visible) .gh-entry__tags li,
.gh-js .gh-entry:not(.is-visible) .gh-entry__text{opacity:0;transform:translateY(10px)}
.gh-js .gh-entry:not(.is-visible) .gh-entry__period{opacity:0}
.gh-js .gh-entry:nth-child(odd):not(.is-visible) .gh-entry__period{transform:translateX(-16px)}
.gh-js .gh-entry:nth-child(even):not(.is-visible) .gh-entry__period{transform:translateX(16px)}
.gh-js .gh-entry:nth-child(odd):not(.is-visible) .gh-entry__node{transform:translate(-50%,50%) scale(0)}
.gh-js .gh-entry:nth-child(even):not(.is-visible) .gh-entry__node{transform:translate(50%,50%) scale(0)}
.gh-js .gh-milestone:not(.is-visible){opacity:0;transform:translateY(-10px)}
.gh-js .gh-tail:not(.is-visible) span{opacity:0;transform:translateY(-6px)}

/* ---------- レスポンシブ（SP は軸を左端に寄せた 1 カラム） ---------- */
@media screen and (max-width:768px){
  .gh-timeline{--gh-pad:24px}

  /* 軸は左端。ただし節点の丸が左に半分はみ出すので、半径ぶん内側に寄せる */
  .gh-timeline{padding-left:calc(var(--gh-node) / 2)}
  .gh-axis{left:calc(var(--gh-node) / 2);margin-left:calc(var(--gh-axis-w) / -2)}

  .gh-list{grid-template-columns:1fr;row-gap:38px;padding:34px 0 38px}
  .gh-entry{grid-column:1 !important;grid-row:auto !important;padding-bottom:0}
  .gh-entry:nth-child(even) .gh-entry__period{text-align:left}
  .gh-entry:nth-child(even) .gh-entry__period,
  .gh-entry:nth-child(even) .gh-entry__body{padding-right:0;padding-left:var(--gh-pad)}
  .gh-entry:nth-child(even) .gh-entry__rule{
    margin-right:0;margin-left:calc(var(--gh-node) / 2);transform-origin:left center;
  }
  .gh-entry:nth-child(even) .gh-entry__node{right:auto;left:0;transform:translate(-50%,50%)}
  .gh-js .gh-entry:nth-child(even):not(.is-visible) .gh-entry__period{transform:translateX(-16px)}
  .gh-js .gh-entry:nth-child(even):not(.is-visible) .gh-entry__node{transform:translate(-50%,50%) scale(0)}

  /* 軸はラベルの背面を通す。ラベルを軸の左端まで広げないと軸が数px はみ出して見える */
  .gh-milestone{margin:0 0 0 calc(var(--gh-axis-w) / -2);font-size:15px;padding:12px 24px}
  .gh-tail{align-items:flex-start;padding-left:calc(var(--gh-node) / 2)}
  .gh-tail span{margin-left:-2.5px}

  .gh-entry__period{font-size:1.75rem}
  .gh-entry__text{font-size:12.5px;line-height:2}
  .gh-entry__tags li{font-size:10px;padding:5px 11px}
}

/* ---------- 置き場所の幅に合わせた段階変化（コンテナクエリ） ----------
   ビューポートではなく「タイムラインを置いた枠の幅」で切り替わる。
   ページの右カラム（約480px）に入れても、元画像と同じ左右ジグザグを保つ。 */

/* 中くらいの枠（ページの右カラムなど）＝ 元画像とほぼ同じ寸法に詰める */
@container (max-width:700px){
  /* 横幅を増やせない置き場所なので、縦は余白を詰めて短くする */
  .gh-timeline{--gh-pad:24px;--gh-node:12px;--gh-axis-w:4px;--gh-ms-half:19px}
  .gh-list{padding:22px 0 24px}
  .gh-entry{padding-bottom:30px}
  .gh-entry__period{font-size:24px;margin-bottom:7px}
  .gh-entry__body{padding-top:9px}
  .gh-entry__tags{gap:6px;margin-bottom:12px}
  .gh-entry__tags li{font-size:10px;padding:4px 9px;font-weight:700}
  .gh-entry__text{font-size:12px;line-height:1.75}
  .gh-milestone{font-size:12px;padding:9px 18px;letter-spacing:.04em}
  .gh-tail{gap:4px;margin-top:7px}
  .gh-tail span{width:4px;height:4px}
}

/* 枠がさらに狭いとき（スマホ幅）＝ 軸を左端に寄せた 1 カラム */
@container (max-width:430px){
  .gh-timeline{--gh-pad:20px;--gh-node:10px;--gh-axis-w:3px;--gh-ms-half:19px;
    padding-left:calc(var(--gh-node) / 2)}
  .gh-axis{left:calc(var(--gh-node) / 2);margin-left:calc(var(--gh-axis-w) / -2)}

  .gh-list{grid-template-columns:1fr;row-gap:28px;padding:20px 0 22px}
  .gh-entry{grid-column:1 !important;grid-row:auto !important;padding-bottom:0}
  .gh-entry:nth-child(even) .gh-entry__period{text-align:left}
  .gh-entry:nth-child(even) .gh-entry__period,
  .gh-entry:nth-child(even) .gh-entry__body{padding-right:0;padding-left:var(--gh-pad)}
  .gh-entry:nth-child(even) .gh-entry__rule{
    margin-right:0;margin-left:calc(var(--gh-node) / 2);transform-origin:left center;
  }
  .gh-entry:nth-child(even) .gh-entry__node{right:auto;left:0;transform:translate(-50%,50%)}
  .gh-js .gh-entry:nth-child(even):not(.is-visible) .gh-entry__period{transform:translateX(-16px)}
  .gh-js .gh-entry:nth-child(even):not(.is-visible) .gh-entry__node{transform:translate(-50%,50%) scale(0)}

  .gh-milestone{margin:0 0 0 calc(var(--gh-axis-w) / -2);font-size:12px;padding:10px 16px}
  /* 点々は .gh-timeline の外にあり --gh-node を継承しないので、ここで揃える */
  .gh-tail{align-items:flex-start;gap:5px;margin-top:10px;
    --gh-node:10px;padding-left:calc(var(--gh-node) / 2)}
  .gh-tail span{width:4px;height:4px;margin-left:-2px}

  .gh-entry__period{font-size:19px;margin-bottom:9px}
  .gh-entry__body{padding-top:14px}
  .gh-entry__text{font-size:12.5px;line-height:2}
  .gh-entry__tags{gap:6px;margin-bottom:12px}
  .gh-entry__tags li{font-size:10px;padding:5px 11px}
}

/* ---------- モーションを抑える設定・印刷 ---------- */
@media (prefers-reduced-motion:reduce){
  .gh-entry *,.gh-milestone,.gh-tail span{transition:none !important;animation:none !important}
}
@media print{
  .gh-axis__fill,.gh-entry__rule{transform:none !important}
  .gh-entry__period,.gh-entry__tags li,.gh-entry__text,
  .gh-milestone,.gh-tail span{opacity:1 !important;transform:none !important}
  .gh-entry:nth-child(odd) .gh-entry__node{transform:translate(-50%,50%) !important}
  .gh-entry:nth-child(even) .gh-entry__node{transform:translate(50%,50%) !important}
  .gh-entry__tags li,.gh-milestone,.gh-tail span{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}