:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Noto Sans JP', sans-serif;
}
.hero-section {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%), url('https://readdy.ai/api/search-image?query=modern%20office%20environment%20with%20blue%20accents%2C%20professional%20workspace%2C%20clean%20design%2C%20minimalist%20corporate%20setting%2C%20natural%20light%2C%20business%20atmosphere%2C%20high-quality%20professional%20photography%2C%20soft%20lighting%2C%20no%20people&width=1920&height=1080&seq=12345&orientation=landscape');
background-size: cover;
background-position: center right;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #0056b3;
transition: width 0.3s;
}
.nav-link:hover::after {
width: 100%;
}
input:focus, textarea:focus {
outline: none;
border-color: #0056b3;
}
.custom-checkbox {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 4px;
outline: none;
cursor: pointer;
position: relative;
}
.custom-checkbox:checked {
background-color: #0056b3;
border-color: #0056b3;
}
.custom-checkbox:checked::after {
content: '';
position: absolute;
top: 3px;
left: 6px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.top-0{
    top:10px !important
}
.left-0{
    left:10px !important
}
.right-0{
    right:10px !important
}
body,
body.dark-news,
body:not(.dark-news) {
  transition:
    background 0.7s cubic-bezier(.77,0,.18,1),
    color 0.7s cubic-bezier(.77,0,.18,1);
}

body.dark-news {
  background: #1a2233 !important;
  color: #e8eaf1 !important;
}
body.dark-news header {
  background: rgba(23,28,48,0.86) !important;
  border-bottom: 1.5px solid rgba(80,80,120,0.24) !important;
  transition:
    background 0.7s cubic-bezier(.77,0,.18,1),
    border-color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news section, 
body.dark-news .service-card, 
body.dark-news .bg-white,
body.dark-news .bg-gray-50,
body.dark-news #contact > div,
body.dark-news .max-w-3xl {
  background: transparent !important;
  color: #e8eaf1 !important;
  box-shadow: none !important;
  transition: background 0.7s cubic-bezier(.77,0,.18,1), color 0.7s cubic-bezier(.77,0,.18,1), box-shadow 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .text-gray-700,
body.dark-news .text-gray-800,
body.dark-news .text-gray-600,
body.dark-news .text-primary,
body.dark-news label,
body.dark-news th,
body.dark-news td,
body.dark-news *[class~="text-gray-700"],
body.dark-news *[class~="text-gray-800"],
body.dark-news *[class~="text-gray-600"],
body.dark-news *[class~="text-primary"] {
  color: #e8eaf1 !important;
  transition: color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .service-card,
body.dark-news .shadow-lg,
body.dark-news .rounded,
body.dark-news .rounded-lg {
  background: rgba(32,40,60,0.95) !important;
  border: 1px solid rgba(100,120,170,0.08) !important;
  transition: background 0.7s cubic-bezier(.77,0,.18,1), border-color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .border-gray-200,
body.dark-news .border-gray-300 {
  border-color: #334155 !important;
  transition: border-color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news input,
body.dark-news textarea,
body.dark-news select {
  background: #202737 !important;
  color: #fff !important;
  border-color: #334155 !important;
  transition:
    background 0.7s cubic-bezier(.77,0,.18,1),
    color 0.7s cubic-bezier(.77,0,.18,1),
    border-color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news a {
  color: #89bcff !important;
  transition: color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .bg-blue-100,
body.dark-news .bg-green-100,
body.dark-news .bg-purple-100,
body.dark-news .bg-orange-100 {
  background: #243350 !important;
  color: #fbc2eb !important;
  transition: background 0.7s cubic-bezier(.77,0,.18,1), color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .bg-primary {
  background-color: #2563eb !important;
  transition: background-color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .bg-secondary {
  background-color: #e58f2a !important;
  transition: background-color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .rounded,
body.dark-news .rounded-lg,
body.dark-news .rounded-button {
  border-radius: 16px !important;
}
body.dark-news .hover\:bg-primary:hover {
  background-color: #3757b2 !important;
  color: #fff !important;
  transition: background-color 0.7s cubic-bezier(.77,0,.18,1), color 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news footer {
  background: linear-gradient(135deg, #0f172a 60%, #232b44 100%) !important;
  transition: background 0.7s cubic-bezier(.77,0,.18,1);
}
body.dark-news .service-card i.text-primary {
  color: #2563eb !important;
}

body.dark-news #system,
body.dark-news #system * {
  background: transparent !important;
  color: #e8eaf1 !important;
  border-color: #334155 !important;
}

body.dark-news #system .service-card,
body.dark-news #system .rounded,
body.dark-news #system .shadow-lg {
  background: rgba(32,40,60,0.95) !important;
  color: #e8eaf1 !important;
  border: 1.5px solid #334155 !important;
  box-shadow: none !important;
}

body.dark-news #system .service-card a,
body.dark-news #system .service-card i,
body.dark-news #system .service-card h3 {
  color: #89bcff !important;
}
body.dark-news #system .service-card .text-primary {
  color: #2563eb !important;
}
body.dark-news #system .bg-blue-50,
body.dark-news #system .bg-blue-100,
body.dark-news #system .bg-purple-100,
body.dark-news #system .bg-green-100,
body.dark-news #system .bg-orange-100 {
  background: #243350 !important;
  color: #fbc2eb !important;
}
body.dark-news #system .text-gray-600,
body.dark-news #system .text-gray-700,
body.dark-news #system .text-gray-800 {
  color: #e8eaf1 !important;
}
body.dark-news #system .border-primary {
  border-color: #3757b2 !important;
}