@charset "UTF-8";
/* =========================================================
   front-page.php 用の追加スタイル
   ---------------------------------------------------------
   common.css/.scss には手を入れない（mega-menu.cssと同じ理由：
   両者が既に乖離しており、これ以上cssを直接編集すると
   scssを再コンパイルしたときに変更が消える危険が増すため）。
   無効化したい場合は header.php の link 行を1行消すだけでよい。
   ========================================================= */

/* 1. SERVICE見出し「SERVICE」の文字色が黒のまま白にならないバグの修正
   （common.cssでは h2.ttl1.wh の本体テキストに color:#fff が
   指定されておらず、後から読み込まれる .ttl1{color:var(--color-secondary)}
   と同じ詳細度のため、そちらが勝って黒文字のまま表示されていた） */
.ttl1.wh {
  color: #fff;
}

/* 2. グループ企業セクション（PG GROUP）
   ---------------------------------------------------------
   COMPANYとCONTACTの間に新設。PGグループ3社
   （Play Ground・PG Lab・PG Asset）の役割分担を示し、
   組織立って運営していることを伝えるための構成。 */

#group {
  background: #f7f7f7;
}

.group-lead {
  max-width: 760px;
  margin: 0 auto 3em;
  text-align: center;
  line-height: 2;
}

.group-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.group-item {
  width: 280px;
  background: #fff;
  border-radius: 12px;
  padding: 2.5em 1.5em 2em;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.group-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.group-item.is-current {
  border: 2px solid var(--color-primary);
}

.group-logo {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
  margin: 0 auto 1.4em;
}

.group-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 .5em;
  line-height: 1.5;
}

.group-role {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.8;
}

.group-item.is-current .group-role {
  color: var(--color-primary);
}

.group-badge {
  display: inline-block;
  margin-top: 0.6em;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.group-link {
  display: inline-block;
  margin-top: 1.2em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), .4);
  transition: border-color .2s ease-out, opacity .2s ease-out;
}
.group-link:hover {
  border-color: var(--color-primary);
  opacity: .75;
}

@media screen and (max-width: 768px) {
  .group-list {
    flex-direction: column;
    align-items: center;
  }

  .group-item {
    width: 100%;
    max-width: 320px;
  }
}


/* 3. 沿革タイムライン（PG GROUPセクション内、45番で追加） */

.group-history {
  margin: 4em auto 0;
}

.group-history-heading {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 2.5em;
  letter-spacing: 0.05em;
}

.group-history-list {
  display: flex;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
}

.group-history-list li {
  flex: 1;
  position: relative;
  padding: 0 14px;
  text-align: center;
}

.group-history-list li::before {
  content: '';
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #ddd;
  z-index: 0;
}

.group-history-list li:first-child::before {
  display: none;
}

.group-history-year {
  display: inline-block;
  position: relative;
  z-index: 1;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 1.2em;
}

.group-history-body {
  font-size: 0.82rem;
  line-height: 1.9;
  text-align: left;
  color: #555;
}

.group-history-body strong {
  display: block;
  color: var(--color-secondary);
  margin-bottom: 0.4em;
  font-size: 0.92rem;
}

@media screen and (max-width: 768px) {
  .group-history-list {
    flex-direction: column;
    gap: 2em;
  }

  .group-history-list li {
    padding: 0;
  }

  .group-history-list li::before {
    display: none;
  }

  .group-history-body {
    text-align: center;
  }
}


/* 4. フッターナビが3グループ構成になった際に2行に折り返される問題の修正
   （common.cssの.footer-nav{max-width:700px}は元々2グループ用のサイズで、
   3グループ目「グループ企業」を追加した結果、幅が足りず2行目に
   折り返されてしまっていた。3グループが1行に収まる幅へ拡張する） */
footer .footer-nav {
  max-width: 900px;
}


/* ヘッダーロゴ 2枚重ねクロスフェード（暗いヒーロー上=白ロゴ→スクロールで背景が明るくなったら黒ロゴ）*/
.header-logo .trans{position:relative;display:block;line-height:0;}
.header-logo-img{transition:ease-out 1.2s all;}
.header-logo-img.logo-on-light{position:absolute;top:0;left:0;opacity:0;}
header.headerwrap.fixed .header-logo-img.logo-on-dark{opacity:0;}
header.headerwrap.fixed .header-logo-img.logo-on-light{opacity:1;}

/* COMPANYセクション：建物写真を削除したのでテキスト列を単独中央寄せに */
.company-info-solo{width:100% !important;max-width:800px;margin:0 auto !important;float:none !important;}


/* 5. SERVICEカード：写真を撤去し、フラットな配色ブロック＋大きい番号のみの
   ミニマルな構成に変更（2026-08-28）。
   「事業内容の画像と文章を1:1で律儀に対応させなくていい」という指摘を受け、
   写真は完全に廃止。common.cssの.cont-list1 li はimg-area前提の
   flex 2カラムレイアウトのため、img-areaが無くなった状態に合わせて
   1カラム化し、代わりにホバー時の左アクセントバーで動きを出す。
   参考: https://www.dentsusoken.com/ のような、写真に頼らず
   タイポグラフィと余白だけで見せるスタイル。 */
#service .cont-list1 li{
  display: block;
  position: relative;
  padding-left: 4px;
  border-left: 4px solid transparent;
  transition: border-color .2s ease-out, background-color .2s ease-out;
}
#service .cont-list1 li:nth-child(odd){ background: #faf9f5; }
#service .cont-list1 li:nth-child(even){ background: #ffffff; }
#service .cont-list1 li:hover{
  border-left-color: var(--color-primary);
  background: #f5f1e6;
}
#service .cont-list1 li .text-area{
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 2.4em 2em;
}
@media screen and (max-width: 768px){
  #service .cont-list1 li .text-area{ padding: 1.6em 1.2em; }
}

/* 6. スクロール出現アニメーションを短く・軽快に（きびきび動くように）。
   common.cssの.scroll_upはtransition:0.8s ease-in-outで少し間延びして
   見えるため、同名セレクタを後読みして0.45s・ease-outカーブに短縮。
   （詳細度は同じだが、後から読み込まれるこのファイルが勝つ） */
.scroll_up{
  transition: .45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* 7. ヘッダーロゴ：ホーム以外のページでは白ロゴが見えなくなるバグの修正
   （2026-08-28）。
   logo-on-dark/logo-on-lightの明暗切り替えは「トップページの暗いヒーロー画像の上」
   を前提にしていたため、ヒーローの無い内部ページ（サービス詳細・COMPANYページ等）
   では、未スクロール時の透明ヘッダーの下に白い本文が直接見え、白ロゴが
   背景に同化して消えてしまっていた。
   ホーム以外（body.home が付かないページ）では、スクロール状態に関係なく
   常に黒ロゴ（logo-on-light）を表示するようにする。 */
body:not(.home) .header-logo-img.logo-on-dark{ opacity: 0; }
body:not(.home) .header-logo-img.logo-on-light{ opacity: 1; }


/* 13. ヒーローCTAボタン：最も関心が高いと思われる「無料経営診断」への導線を
   ヒーロー内に常設し、スクロールせずに見えるようにする（2026-08-28）。
   .service-more-link は既定でボーダー・文字色に var(--color-secondary)（濃色）
   を使っており、暗いヒーロー背景の上では見えなくなるため、
   .hero-cta修飾クラスで白系に上書きする。 */
.hero-cta-wrap{ margin: 1.6em 0 0; }
.hero-cta.service-more-link{
  color: #fff;
  border-color: #fff;
}
.hero-cta.service-more-link:hover{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
@media screen and (max-width: 768px){
  .hero-cta-wrap{ margin-top: 1.2em; }
  .hero-cta.service-more-link{ font-size: .85rem; padding: 10px 20px; }
}


/* 14. ヘッダーの縦幅を少し縮める（2026-08-28）。
   ロゴの最大幅とヘッダーの上下パディングをわずかに縮小。 */
header.headerwrap{ padding: 8px 5vw; }
header.headerwrap .header-logo img{ width: 13vw; max-width: 200px; }
header.headerwrap.fixed{ padding: 5px 5vw; }
header.headerwrap.fixed .header-logo img{ width: 9vw; max-width: 130px; }

/* 15. グローバルナビ：英語表記の下に小さく日本語を添えて統一感を出す */
.gnav .nav-item > a,
.gnav .nav-item > .nav-group-toggle{
  flex-direction: column;
  line-height: 1.3;
  gap: 2px;
}
.gnav .nav-en{ font-size: 0.92rem; }
.gnav .nav-jp{
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .68;
}

/* 16. SERVICEメガメニューの幅を画面幅いっぱいから適度な幅に制限 */
.nav-mega{
  max-width: 620px;
  margin: 0 auto;
  border-radius: 0 0 12px 12px;
}

/* 17. モバイル：ヒーロー内ロゴ（.splide .logo）がheight属性のせいで
   実際の見た目より縦長のボックスになり、object-fit:containで中央寄せされた
   結果ハンバーガーメニューと視覚的にズレて見えるバグを修正。
   幅に対して高さを自動計算させることで、ボックスと見た目を一致させる。 */
.splide .logo img{ height: auto; }


/* 18. （撤回）フッターロゴは19番でコピーライト帯（黒背景）に移動したため削除 */


/* 19. ヘッダーロゴが実質172px（HTML height属性のまま）になっており、
   ヘッダー全体が異常に縦長になっていたバグを修正（getBoundingClientRectで
   実測して確認済み）。幅だけでなく高さもCSSで自動計算させる。 */
header.headerwrap .header-logo img{ height: auto; }

/* 20. フッターロゴをゴールドの帯からコピーライト（黒帯）に移動。
   黒背景に白ロゴなので背景プレートのハックは不要になった。 */
.footer-copyright-logo{
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto 12px;
}
footer .copyright{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 21. フッターのnav見出し（MENU/SERVICE/GROUP）を、ヘッダーと同じ
   「英語＋小さい日本語」の2行表記に統一する */
.footer-nav-heading-jp{
  display: block;
  margin-top: 4px;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(0,0,0,.5);
}

/* 22. モバイルの沿革（group-history）：中央寄せをやめて左寄せにし、
   年バッジ同士を縦の線でつないで時系列であることを視覚化する */
@media screen and (max-width: 768px){
  .group-history-list{
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .group-history-list li{
    display: flex;
    align-items: flex-start;
    gap: 22px;
    position: relative;
    text-align: left;
    padding: 0;
    margin-bottom: 2.6em;
  }
  .group-history-list li:last-child{ margin-bottom: 0; }
  .group-history-list li::before{ display: none; }
  .group-history-list li::after{
    content: '';
    position: absolute;
    top: 30px;
    left: 34px;
    width: 2px;
    height: calc(100% + 2.6em - 30px);
    background: #ddd;
    z-index: 0;
  }
  .group-history-list li:last-child::after{ display: none; }
  .group-history-year{
    flex: 0 0 68px;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }
  .group-history-body{ text-align: left; flex: 1; min-width: 0; }
}

/* 23. モバイルのAPPROACHマトリクス：横スクロールすると行見出し（領域名）や
   列見出し（フェーズ名）が画面外に流れてしまい、今どのセルを見ているか
   分からなくなる問題を修正。行見出しは左に、列見出しは上に固定する。 */
.matrix-table-wrap{ overflow-y: hidden; }
.matrix-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;
}
.matrix-table tbody th{
  position: sticky;
  left: 0;
  z-index: 2;
}
.matrix-table thead th.matrix-corner{
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
}

/* 24. 本文の文字色：純粋な黒(#000)だとコントラストが強すぎるとの指摘。
   見出し等で既に使っている --color-secondary（#4d4d4d、落ち着いたグレー）
   を本文にも流用し、サイト全体でトーンを統一する。 */
body{ color: var(--color-secondary); background: #faf9f6; }

/* 25. SERVICEセクション：common.cssの #service{background:var(--color-primary)}
   がセクション全体をビビッドなゴールドで塗りつぶしていたのを、
   他の白背景セクションとの「切り替わり」がきつすぎないよう
   ごく薄いクリーム色のトーンに変更。見出しは他セクションと同じ
   （common.cssの.wh指定を外したのでデフォルトの濃グレー＋ゴールド下線に戻る）。 */
section#service{ background: #faf9f6; }

/* 26. フッターナビがスマホ幅で2列に折り返ったとき、3番目（GROUP）だけが
   単独の行になり、justify-content:centerのせいで中央に浮いて見える問題を修正。
   （以前#groupセクションで発生したのと同じ「flexの折り返し単独行が
   中央寄せになる」パターン）折り返した行も左揃えにして、MENU/SERVICEの
   下にGROUPがきれいに並ぶようにする。 */
@media screen and (max-width: 768px){
  footer .footer-nav{ justify-content: flex-start; }
}


/* 27. 「ビビッドな黄色を全面に塗るのは下品、アクセントとしてだけ使うべき」
   という指摘を受け、24〜25番の対応を見直し。#faf3e0でもまだ
   「ゴールドを全面に敷いた」印象が残っていたため、SERVICEセクションの
   背景は完全にニュートラルな色（他の白背景セクションと同じ）に統一し、
   ゴールドはボタン・下線・番号・バッジなどの小さなアクセントだけで使う方針に戻す。
   あわせて、白背景（#fff）そのものも「白すぎてコントラストが強い」との
   指摘を受け、body全体の背景を「色がついているかどうか分からないくらい」
   ごく薄いウォームグレーに変更。SERVICEの背景もこれと同じ色にして、
   セクションごとに色を切り替えるのではなくサイト全体を統一トーンにした。 */

/* 28. ヘッダー：27番の考え方に合わせて、スクロール後の半透明背景も
   純白ベースからごく薄いウォームグレーベースに変更 */
header.headerwrap.fixed{ background: rgba(250, 249, 246, 0.6); }

/* 29. フッターのメニュー：余白が窮屈という指摘。ロゴを撤去した分の
   上部の空きが無くなっていたため、上側の余白を大きく取り直し、
   カラム間の余白も広げる */
footer .footer-nav{
  padding: 56px 24px 40px;
  gap: 48px 72px;
}


/* 30. モバイルのヒーロー文字が小さすぎるとの指摘。
   common.cssの @media(max-width:768px) 内で
   .splide_lead p, .splide_lead h1 { font-size: 1.25rem }
   .splide_lead p.lead-sub { font-size: 1rem }
   となっていたのを拡大する。 */
@media screen and (max-width: 768px){
  .splide_lead p,
  .splide_lead h1{ font-size: 2.3rem; line-height: 1.45; }
  .splide .splide_lead p.lead-sub{ font-size: 1.1rem; }
}

/* 31. PG GROUPセクション：#group直下の.innerにはpaddingが無く
   （他セクションの.inner-area100のような左右パディング用ラッパーが
   このセクションだけ存在しない）、本文・沿革が画面端に張り付いていた。
   左右の余白を追加する。 */
#group .inner{ padding: 0 20px; }


/* 32. フッターの文字色：ゴールド系の背景に対して黒文字はコントラストが強すぎ、
   かつ視認性も悪いとの指摘。少し抑えた白（完全な白ではなく、わずかに
   落としたコントラストの白）に統一する。common.cssの
   footer .footer-nav-heading a{color:#000}、.footer-nav-group a{color:#333}
   を上書き。GROUPの見出しのように<a>を持たないテキストも合わせて対応。 */
footer .footer-nav .footer-nav-heading,
footer .footer-nav .footer-nav-heading a{ color: rgba(255,255,255,.92); }
footer .footer-nav-group a{ color: rgba(255,255,255,.78); }
.footer-nav-heading-jp{ color: rgba(255,255,255,.55); }
footer .footer-nav-heading{ border-bottom-color: rgba(255,255,255,.4); }

/* 33. PG GROUPカード：カード全体を<a>で包む構成をやめ、各カードに
   会社名テキスト（株式会社を含むフルネーム）と、明示的な
   「公式サイトはこちら／会社概要はこちら」テキストリンクを
   個別に配置する構成に変更（2026-08-28）。
   カード自体はもうリンクではないため、カーソルを分かりやすくする。 */
.group-item{ cursor: default; }

/* 34. マトリクスのPG Lab支援内容：別出しパネル方式（クリックして下に表示）
   だと領域を取って見づらいとの指摘。マトリクス上にホバー／タップで
   浮かせるツールチップ方式に変更（js/matrix.js, css/matrix.css参照）。
   このファイル側では対応不要（旧.matrix-detail関連のCSSは
   matrix.css側から削除済み）。 */


/* 35. TOPページのDIAGNOSISセクションをPRODUCTセクションに拡張（2026-09-02）。
   自社で使える「経営診断ツール」に加えて「AI経営秘書（line-hisho.pg-lab.jp）」も
   並べて掲載するため、SERVICE（人が伴走するコンサルティング）とは別に、
   自社プロダクトをまとめる区分としてPRODUCTを新設した。
   既存の.diagnosis-points/.diagnosis-cta（common.css）はそのまま2つの
   プロダクトで共用し、見出し用の.product-item-ttlだけを追加する。 */
.product-item:first-of-type{ margin-top: 40px; padding-top: 40px; border-top: 1px solid #e5e5e5; }
.product-item-ttl{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-align: center;
  margin: 0 0 1em;
}
.product-item + .product-item{
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid #e5e5e5;
}
@media screen and (max-width: 768px){
  .product-item + .product-item{ margin-top: 48px; padding-top: 40px; }
}

/* 36. スマホのハンバーガーメニューが「浮いている」見え方の修正＋
   ヒーローの明暗にあわせたアイコン色の切り替え（2026-09-07）。
   これまでモバイルはcommon.cssの header.headerwrap{background:none} が
   常時適用され、ヘッダーに面としての背景がまったくなく、ハンバーガー
   ボタン（ゴールドの四角）だけが単独で浮いて見えていた。
   ロゴの明暗クロスフェード（.logo-on-dark/.logo-on-light、7番）と
   同じ考え方で、ヘッダー自体にもうっすら背景を持たせて土台を作り、
   アイコンの線の色もヒーローの明暗にあわせて白⇄黒を切り替える。
   ホーム以外のページ（ヒーローが無い）は常に黒アイコンにする。 */
@media screen and (max-width: 768px) {
  header.headerwrap {
    background: rgba(0, 0, 0, 0.18) !important;
  }
  header.headerwrap.fixed {
    background: rgba(250, 249, 246, 0.85) !important;
    backdrop-filter: blur(10px);
  }
  body:not(.home) header.headerwrap {
    background: rgba(250, 249, 246, 0.85) !important;
    backdrop-filter: blur(10px);
  }

  .menu-icon {
    background: transparent;
  }

  .navicon,
  .navicon:before,
  .navicon:after {
    background: #fff;
  }
  header.headerwrap.fixed .navicon,
  header.headerwrap.fixed .navicon:before,
  header.headerwrap.fixed .navicon:after,
  body:not(.home) .navicon,
  body:not(.home) .navicon:before,
  body:not(.home) .navicon:after {
    background: #000;
  }
  /* メニューを開いた状態（白いパネルが全画面に開く）は常に黒いバツ印にする */
  .gnav-icon:checked ~ .menu-icon .navicon:before,
  .gnav-icon:checked ~ .menu-icon .navicon:after {
    background: #000;
  }
}

/* 37. 画面右下に追従していた「トップへ戻る」ボタンを、無料経営診断への
   常設CTAボタンに差し替え（2026-09-07、footer.phpのHTMLも変更済み）。
   要素ID・表示/非表示のJS制御（#backtotopのbottom/opacity切り替え、
   common.js側は変更なし）はそのまま流用し、見た目だけアイコン円形
   ボタンからテキスト入りのピルボタンに変更する。 */
#backtotop {
  width: auto;
  height: auto;
  right: 20px;
}
#backtotop a {
  display: block;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  text-decoration: none;
}
#backtotop a:hover {
  opacity: 0.88;
}
@media screen and (max-width: 768px) {
  #backtotop {
    right: 12px;
  }
  #backtotop a {
    font-size: 0.78rem;
    padding: 12px 16px;
  }
}