/* =======================================================================
 * Page 4472 – 全スタイル（省略なし）
 * =====================================================================*/

/* ---------- Barba コンテナ補正 ---------- */
main[data-barba-namespace="page4472"],
#page-4472 {
  transform: none !important;
  transition: none !important;
}

/* ---------- Services セクション ---------- */
#services-app { font-family: "Montserrat", sans-serif; }
#services-app h2 { font-family: "Montserrat", sans-serif; font-weight: 400; }
.unique-card--gradient-blue { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); }
.unique-card--no-wrap       { white-space: nowrap; }

#services-app .unique-card { position: relative; overflow: hidden; cursor: pointer; }
#services-app .unique-card::before {
  position: absolute; content: ""; width: 100%; height: 100%;
  transition: .6s; z-index: 0; background-color: #4f46e5;
}
#services-app .unique-card:hover       { box-shadow: .063rem .063rem 1.25rem .375rem rgba(0,0,0,.53); }
#services-app .unique-card p           { transition: .8s; }
#services-app .unique-card:hover::before { clip-path: circle(110vw at 100% 100%); }
#services-app .unique-card:hover p       { color: #fff; }

/* 4 枚のカードそれぞれの円マスク位置 */
#services-app .unique-card:nth-child(1)::before { bottom: 0; right: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%); }
#services-app .unique-card:nth-child(2)::before { bottom: 0; left: 0;  clip-path: circle(calc(6.25rem + 7.5vw) at 0%   100%); }
#services-app .unique-card:nth-child(3)::before { top: 0;    right: 0; clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0% ); }
#services-app .unique-card:nth-child(4)::before { top: 0;    left: 0;  clip-path: circle(calc(6.25rem + 7.5vw) at 0%   0% ); }

/* カード内背景画像（大円） */
#services-app .unique-circle      { display: none; }
@media (min-width: 1000px) {
  #services-app .unique-circle    {
    display: block; position: absolute; width: 100%; height: 100%;
    z-index: 0; object-fit: cover;
  }
  #services-app .unique-card:nth-child(1) .unique-circle { bottom: 0; right: 0;  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%); }
  #services-app .unique-card:nth-child(2) .unique-circle { bottom: 0; left: 0;   clip-path: circle(calc(6.25rem + 7.5vw) at 0%   100%); }
  #services-app .unique-card:nth-child(3) .unique-circle { top: 0;    right: 0;  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0% ); }
  #services-app .unique-card:nth-child(4) .unique-circle { top: 0;    left: 0;   clip-path: circle(calc(6.25rem + 7.5vw) at 0%   0% ); }
}

/* カードフェードイン */
#services-app .fade-in { opacity: 0; animation: svcFadeIn 1s ease forwards; }
@keyframes svcFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#services-app .unique-card.fade-in:nth-child(1){ animation-delay: .2s; }
#services-app .unique-card.fade-in:nth-child(2){ animation-delay: .4s; }
#services-app .unique-card.fade-in:nth-child(3){ animation-delay: .6s; }
#services-app .unique-card.fade-in:nth-child(4){ animation-delay: .8s; }

/* ---------- Nng モーダル ---------- */
#nng-app *           { margin: 0; padding: 0; box-sizing: border-box; }
#nng-app             { width: 100%; font-family: "Poppins", sans-serif; background: #fafafa; color: #333; }
#nng-app a           { color: inherit; text-decoration: none; transition: .3s; }
#nng-app a:hover     { opacity: .8; }

/* モーダル・オーバーレイ */
#nng-app .modal      {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.8); justify-content: center; align-items: center;
  padding: 20px; overflow: hidden; opacity: 0; transition: opacity .3s ease-out;
  z-index: 999;
}
#nng-app .modal.open     { display: flex; opacity: 1; }
#nng-app .modal.closing  { animation: fadeOutOverlay .3s forwards; }
@keyframes fadeOutOverlay { to { opacity: 0; } }

/* モーダル内容 */
#nng-app .modal-content  {
  background: #fff; border-radius: 8px; width: 95vw; max-width: 95vw; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 4px 30px rgba(0,0,0,.3); position: relative;
  padding-bottom: 80px; margin-top: 80px; animation: cloudIn .8s ease-out forwards;
}
@keyframes cloudIn { from { opacity: 0; transform: scale(1.1) blur(20px); } to { opacity: 1; transform: scale(1) blur(0); } }

/* クローズボタン */
#nng-app .modal-close {
  position: sticky; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  font-size: 1.5rem; font-weight: 700; line-height: 40px;
  background: #1e3a8a; color: #fff; cursor: pointer; z-index: 1001;
  box-shadow: 0 4px 12px rgba(13,71,161,.4);
}
#nng-app .modal-close:hover { background: #273a72; }

/* ダッシュボードレイアウト */
#nng-app .b2b-dashboard    { display: flex; min-height: 100vh; }
#nng-app .b2b-sidebar      { width: 260px; background: #fff; padding: 30px; box-shadow: 2px 0 20px rgba(0,0,0,.1); }
#nng-app .b2b-sidebar-header h2 { font-size: 1.2rem; color: #0056b3; font-weight: bold; white-space: nowrap; }
#nng-app .b2b-nav-links    { list-style: none; }
#nng-app .b2b-nav-link-item{ margin-bottom: 20px; }
#nng-app .b2b-nav-link     {
  display: flex; align-items: center; padding: 12px 16px;
  border-radius: 6px; transition: .3s; color: #333; font-weight: 500;
}
#nng-app .b2b-nav-link-item.active .b2b-nav-link,
#nng-app .b2b-nav-link:hover { background: #0056b3; color: #fff; }
#nng-app .b2b-nav-link i   { margin-right: 10px; font-size: 1.2rem; }

#nng-app .b2b-content      { flex: 1; padding: 40px; }
#nng-app .b2b-section      { display: none; }
#nng-app .b2b-section.active{ display: block; }

/* テーブル & リスト装飾 */
#nng-app .section-table          { width: 100%; margin-bottom: 20px; }
#nng-app .section-table td       { padding: 16px; border: 1px solid #0056b3; }
#nng-app .section-title          { font-weight: bold; background: #e8f1ff; }
#nng-app .biz-list               { list-style: none; }
#nng-app .biz-list > li          { margin-bottom: 1rem; }
#nng-app .biz-list > li > ul     { margin-top: .5rem; list-style: none; padding-left: 1.5rem; }
#nng-app .biz-list li ul li      { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
#nng-app .biz-list li ul li::before {
  content: "\f111"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 0; top: .35rem; color: #0056b3; font-size: .5rem;
}

/* 技術領域テーブル */
#nng-app .tech-table       { width: 100%; border-collapse: collapse; margin: 0 auto; }
#nng-app .tech-table td    { padding: 8px; border: 1px solid #0056b3; text-align: center; }

/* Bottom ナビ（モバイル） */
#nng-app .b2b-bottom-nav   { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; }
#nng-app .b2b-bottom-nav ul{ display: flex; list-style: none; }
#nng-app .b2b-bottom-nav li{ flex: 1; text-align: center; padding: 10px 0; border-top: 1px solid #d1d5db; }
#nng-app .b2b-bottom-nav li a { font-size: 1.6rem; color: #374151; }
#nng-app .b2b-bottom-nav li.active a { color: #0056b3; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 992px) {
  #nng-app .b2b-dashboard       { flex-direction: column; }
  #nng-app .b2b-sidebar         { width: 100%; display: none; }
  #nng-app .b2b-content         { padding: 16px; }
  #nng-app .modal-content       { padding-bottom: 120px; }
  #nng-app .b2b-bottom-nav      { display: block; }
}
@media (max-width: 576px) {
  #nng-app .b2b-content         { padding: 12px; }
  #nng-app .modal-close         { width: 40px; height: 40px; font-size: 1.3rem; }
  #nng-app .b2b-bottom-nav li a { font-size: 1.4rem; }
}