/* ==========================================================
   Services カード（unique-card）スタイル
   ========================================================== */
html,body,h1,h2,h3,h4,h5,h6,p,div,span,a,li,ul{
  font-family:"Montserrat",sans-serif;
}
.unique-card{position:relative;cursor:pointer;overflow:hidden}
.unique-card::before{position:absolute;content:"";width:100%;height:100%;transition:.6s;z-index:0;background-color:#0d47a1}
.unique-card:hover{box-shadow:.063rem .063rem 1.25rem .375rem rgba(0,0,0,.53)}
.unique-card:nth-child(1)::before{bottom:0;right:0;clip-path:circle(calc(6.25rem + 7.5vw) at 100% 100%)}
.unique-card:nth-child(2)::before{bottom:0;left:0;clip-path:circle(calc(6.25rem + 7.5vw) at 0% 100%)}
.unique-card:nth-child(3)::before{top:0;right:0;clip-path:circle(calc(6.25rem + 7.5vw) at 100% 0%)}
.unique-card:nth-child(4)::before{top:0;left:0;clip-path:circle(calc(6.25rem + 7.5vw) at 0% 0%)}
.unique-card p{transition:.8s}
.unique-card:hover::before{clip-path:circle(110vw at 100% 100%)}
.unique-card:hover p{color:#fff}

.unique-circle{position:absolute;width:100%;height:100%;object-fit:cover;z-index:0}
.unique-card:nth-child(1) .unique-circle{bottom:0;right:0;clip-path:circle(calc(6.25rem + 7.5vw) at 100% 100%)}
.unique-card:nth-child(2) .unique-circle{bottom:0;left:0;clip-path:circle(calc(6.25rem + 7.5vw) at 0% 100%)}
.unique-card:nth-child(3) .unique-circle{top:0;right:0;clip-path:circle(calc(6.25rem + 7.5vw) at 100% 0%)}
.unique-card:nth-child(4) .unique-circle{top:0;left:0;clip-path:circle(calc(6.25rem + 7.5vw) at 0% 0%)}
@media(max-width:639px){.unique-circle{display:none}}

.fade-in{opacity:0;animation:fadeInAnimation 1s ease forwards}
@keyframes fadeInAnimation{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.unique-card.fade-in:nth-child(1){animation-delay:.2s}
.unique-card.fade-in:nth-child(2){animation-delay:.4s}
.unique-card.fade-in:nth-child(3){animation-delay:.6s}
.unique-card.fade-in:nth-child(4){animation-delay:.8s}

/* ==========================================================
   Modal & ダッシュボード スタイル
   ========================================================== */
/* --- モーダル個別背景 -------------------------------------------------- */
#modalMech .modal-content {
  background:url('http://nng2692600.xsrv.jp/wp-content/uploads/2025/06/kikai1.jpg') center/cover no-repeat;
}
#modalSoft .modal-content {
  background:url('http://nng2692600.xsrv.jp/wp-content/uploads/2025/06/soft.jpg') center/cover no-repeat;
}
#modalDigital .modal-content {
  background:url('http://nng2692600.xsrv.jp/wp-content/uploads/2025/06/ddd.jpg') center/cover no-repeat;
}

/* --- オーバーレイ & モーダル ----------------------------------------- */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0d1117;justify-content:center;align-items:center;padding:20px;overflow:auto;opacity:0;transition:opacity .4s ease-out;z-index:999}
.modal.open{display:flex;opacity:1}

.modal-content{
  border:1px solid #64b5f6;border-radius:20px;
  width:98vw;max-width:1600px;max-height:90vh;overflow:auto;
  position:relative;padding-bottom:280px;
  box-shadow:0 30px 60px rgba(13,28,45,.4);
  opacity:0;transform-origin:top center;
  transform:rotateX(-45deg) scale(.7) translateY(-40px);
  z-index:2;margin-top:170px;transition:opacity .6s ease .35s;
}
/* 背景画像上の半透明マスク */
.modal-content::before{
  content:'';position:absolute;top:80px;left:0;width:100%;height:50%;
  background:rgba(13,17,23,.55);backdrop-filter:blur(4px);
  transform:translateY(var(--blur-offset,0px));z-index:-1;transition:opacity .3s ease .1s;
}
.modal.open .modal-content{animation:fadeInModal 1s cubic-bezier(.25,.8,.25,1) forwards}
@keyframes fadeInModal{
  0%{opacity:0;transform:rotateX(-45deg) scale(.7) translateY(-40px)}
  60%{opacity:1;transform:rotateX(15deg) scale(1.05) translateY(20px)}
  100%{opacity:1;transform:rotateX(0deg) scale(1) translateY(0)}
}

.modal-close{
  position:sticky;top:0;left:0;background:#0d47a1;border:2px solid #90caf9;
  width:44px;height:44px;border-radius:50%;font-size:1.5rem;font-weight:700;line-height:40px;
  color:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(13,71,161,.4);
  transition:transform .25s,background .25s,opacity .25s;z-index:1001
}
.modal-close:hover{transform:rotate(90deg);background:#1565c0}

/* --- コンテンツ & 見出し --------------------------------------------- */
.b2b-content{padding:10px 48px 48px;transition:opacity .35s ease}
.section-header{margin:32px 0 28px;display:flex;align-items:center;gap:14px}
.section-header::before{content:"";width:10px;height:36px;background:#0d47a1;border-radius:4px;position:relative;top:-4px;}
.section-header .section-title{font-size:2rem;font-weight:700;color:#fff;letter-spacing:.02em}

.glass-box{background:#ffffff;border:1px solid #bbdefb;border-radius:14px;padding:26px 32px;color:#0d47a1}
.glass-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.info-card{background:#ffffff;border:2px solid #90caf9;border-radius:14px;padding:20px 22px;box-shadow:0 6px 20px rgba(13,71,161,.2)}
.info-card:hover{transform:none}
.info-card h3{font-size:1.1rem;font-weight:600;color:#1565c0;margin-bottom:8px}
.info-card p,.info-card li{font-size:.93rem;line-height:1.8;color:#0d47a1;margin-bottom:.65rem;text-align:justify}
#modalDigital .info-card h3{font-size:.93rem}

.section-animate{opacity:0;transform:translateY(30px);animation:fadeSlide .9s ease-out forwards}
@keyframes fadeSlide{to{opacity:1;transform:translateY(0)}}

/* --- 歯車背景（gear-container）--------------------------------------- */
.gear-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.gear{
  position:absolute;opacity:.9;filter:drop-shadow(0 0 4px rgba(13,71,161,.35));
  background:conic-gradient(#bbdefb 0deg,#42a5f5 120deg,#0d47a1 240deg,#bbdefb 360deg);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);
}

/* --- Typography 微調整 --------------------------------------------- */
.modal-content p,
.modal-content li{
  font-size:.95rem;line-height:1.8;text-align:justify;margin-bottom:.65rem;
}
.modal-content .section-title{margin-bottom:.85rem;}
.modal-content h3{margin-bottom:.45rem;}
.modal-content ul{padding-left:1.4rem;}
.modal-content li:last-child,
.modal-content p:last-child{margin-bottom:0;}

/* --- Responsive ------------------------------------------------------- */
@media (max-width:768px){
  .modal-content{width:95vw;padding-bottom:280px;margin-top:170px;}
  .b2b-content{padding:100px 24px 24px;}
  .section-header{margin:24px 0 20px;gap:10px;}
  .section-header .section-title{font-size:1.5rem;}
  .glass-box{padding:20px 24px;}
  .glass-grid{grid-template-columns:1fr;}
  .info-card{padding:16px 18px;}
  .info-card h3{font-size:1rem;margin-bottom:6px;}
  .info-card p,.info-card li{font-size:.85rem;}
}
@media (max-width:480px){
  .modal-content{width:100vw;padding-bottom:280px;margin-top:170px;}
  .b2b-content{padding:80px 16px 16px;}
  .section-header{margin:20px 0 16px;gap:8px;}
  .section-header .section-title{font-size:1.25rem;}
  .glass-box{padding:16px 16px;}
  .info-card{padding:12px 14px;}
  .info-card h3{font-size:.95rem;margin-bottom:5px;}
  .info-card p,.info-card li{font-size:.8rem;}
}

/* --- 1 秒間 背景のみ表示 --------------------------------------------- */
.modal-content.intro::before{opacity:0 !important;}
.modal-content.intro .b2b-content,
.modal-content.intro .modal-close{opacity:0 !important;pointer-events:none;}

/* --- タイトルを強制 1 行化（Soft カード／モーダル）------------------- */
@media (max-width:768px){
  #triggerSoft .section-title,
  #modalSoft .section-header .section-title{font-size:1.25rem;white-space:nowrap;}
}
@media (max-width:480px){
  #triggerSoft .section-title,
  #modalSoft .section-header .section-title{font-size:1.15rem;white-space:nowrap;}
}