@charset "UTF-8";

/* =========================================
   Contact Form 7 Styles
   ========================================= */
.wpcf7-form p {
  margin-bottom: 1rem;
}

/* CF7の自動整形で意図せず入るpタグ対策 
   親要素(.flex)の直下にあるpタグに display: contents を指定することで、
   そのpタグ自体はボックス生成を行わず、子要素（ボタン等）が親(.flex)の
   フレックスアイテムとして振る舞うようになります。
*/
.wpcf7-form .flex > p {
  display: contents;
}

.wpcf7-not-valid-tip {
  font-size: 0.8rem;
  color: #ef4444; /* red-500 */
  margin-top: 0.25rem;
}

.wpcf7-response-output {
  border: none !important;
  padding: 1rem !important;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* フォームのローディングスピナー調整 */
.wpcf7-spinner {
  margin: 0 auto;
}

/* =========================================
   Visual Effects (Dark Theme)
   ========================================= */

/* スキャンライン効果 */
.scanline-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(255, 159, 28, 0.02) 51%,
    transparent 51%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 0;
}
.scanline-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 159, 28, 0.1),
    transparent
  );
  animation: scanline 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* グラスモーフィズム（ガラス風） */
.glass-effect {
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 159, 28, 0.1);
}
.glass-effect-light {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* テックグリッド背景 */
.tech-overlay {
  background-image: radial-gradient(
    rgba(255, 159, 28, 0.15) 1px,
    transparent 1px
  );
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
}

/* サイバーパンク風の区切り線 */
.cyber-separator {
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff9f1c, transparent);
  position: relative;
}
.cyber-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #ff9f1c;
  box-shadow: 0 0 10px #ff9f1c;
}

/* グラデーションテキスト */
.text-gradient {
  background: linear-gradient(to right, #ff9f1c, #ffcb70, #ff9f1c);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
}

/* =========================================
   Animations
   ========================================= */
@keyframes shine {
  to {
    background-position: 200% center;
  }
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* フェードインアニメーション */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =========================================
   Responsive Tables
   ========================================= */
.responsive-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.responsive-table th,
.responsive-table td {
  white-space: nowrap;
}

.grecaptcha-badge {
  z-index: 9999;
}