/*
 * シスナビ — style.css (Tailwind補完用・最小限)
 */

/* ===== Google Fonts ===== */
.font-serif-jp { font-family: 'Noto Serif JP', serif; }
.font-sans-jp  { font-family: 'Noto Sans JP', sans-serif; }

/* ===== clamp() フォントサイズ ===== */
.text-hero-h1    { font-size: clamp(28px, 4vw,   50px); }
.text-hero-brand { font-size: clamp(36px, 5.5vw, 66px); }
.text-hero-copy  { font-size: clamp(13px, 1.6vw, 16px); }
.text-sec-title  { font-size: clamp(26px, 3.5vw, 40px); }

/* ===== ヒーロー背景グリッドドット ===== */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* ===== 非対称グリッド（hero内テキスト+カード列） ===== */
.hero-inner-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 68px);
}
@media (max-width: 960px) {
  .hero-inner-grid { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
}

/* ===== スクロールリビール ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.tq.reveal { transform: translateX(-16px); }
.tq.reveal.visible { opacity: 1; transform: translateX(0); }

/* ===== @keyframes ===== */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulseDot {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: .6; }
}
@keyframes stepIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.anim-fade-down { animation: fadeInDown .7s ease both; }
.anim-fade-up-1 { animation: fadeInUp   .7s .1s ease both; }
.anim-fade-up-2 { animation: fadeInUp   .7s .2s ease both; }
.anim-fade-up-3 { animation: fadeInUp   .7s .3s ease both; }
.anim-fade-up-4 { animation: fadeInUp   .7s .4s ease both; }
.anim-card-1    { opacity: 0; animation: cardIn .6s .5s ease forwards; }
.anim-card-2    { opacity: 0; animation: cardIn .6s .7s ease forwards; }
.anim-card-3    { opacity: 0; animation: cardIn .6s .9s ease forwards; }
.anim-badge-dot { animation: pulseDot 2s ease infinite; }

/* ===== ウィザードステップ表示切り替え ===== */
/* ★ display:none は modal.blade.php の <style> で管理。ここでは animation のみ */
.wstep.active { animation: stepIn .3s ease; }

/* ===== モーダル開閉トランジション ===== */
/* ★ is-open クラスで opacity と pointer-events を切り替える */
.modal-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
#modalBox {
  transform: scale(.94) translateY(16px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.is-open #modalBox {
  transform: scale(1) translateY(0);
}

/* ===== フロートCTA表示切り替え ===== */
.float-cta {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.float-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== :has() チェックボックス選択ハイライト ===== */
.check-item:has(input:checked) {
  border-color: #0d2b4e !important;
  background-color: #eef2f8 !important;
}

/* ===== モーダルbodyスクロールバー ===== */
.modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: #e4e7ef transparent;
}

/* ===== プログレスバーグラデーション ===== */
.prog-fill-gradient {
  background: linear-gradient(90deg, #0d2b4e, #4a90d9);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* ===== ヘッダーナビアンダーラインホバー ===== */
.gnav-link { position: relative; }
.gnav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: #0d2b4e;
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.gnav-link:hover::after { width: 100%; }

/* ===== navi-bubble チャット吹き出し特殊角丸 ===== */
.bubble-radius { border-radius: 0 14px 14px 14px; }

/* ===== hl-brand アンダーライン ===== */
.hl-brand-line {
  border-bottom: 3px solid #0d2b4e;
  padding-bottom: 1px;
}

/* ===== header stuck shadow ===== */
.hd.stuck { box-shadow: 0 8px 36px rgba(13,43,78,.12); }