@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body {
  font-family: 'Inter', sans-serif;
  color: rgba(51, 51, 51, 0.8);
  line-height: 1.6;
}
.section-title {
  position: relative;
  font-size: 3rem;
  font-weight: 800;
  margin-top: 1rem;
  margin-bottom: 4.5rem;
  text-align: center;
  color: #1a202c;
  letter-spacing: -0.025em;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 100px;
  height: 6px;
  background-color: #3b82f6;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
}
.gradient-bg {
  background: linear-gradient(to right, #60a5fa, #3b82f6);
}
.btn-primary {
  @apply inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-blue-600 hover: bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105;
}
.feature-icon {
  @apply text-blue-500 text-5xl mb-4;
}
.card {
  @apply bg-white rounded-lg shadow-xl p-6 transition duration-300 ease-in-out transform hover: scale-105 hover:shadow-2xl border border-blue-200;
}
.header-main-nav {
  background-color: #213c6b;
  color: white;
  padding: 1rem 0;
}
.header-nav-link {
  font-size: 0.8rem;
  @apply text-white hover: text-blue-300 font-medium transition duration-200 whitespace-nowrap;
}
.header-nav-link.active {
  @apply bg-blue-600 text-white font-bold px-3 py-1.5 rounded-full;
}
.header-contact-btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-white text-sm font-medium rounded-full text-white hover: bg-white hover:text-blue-800 transition duration-300 ease-in-out;
}
.video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.3); /* ←ここが透過の実体 */
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  position: relative;
  background-color: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 1000px;
  width: 90%;
  max-height: 90%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background-color: #000;
}
.modal-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-close-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1001;
}
.problem-entry {
  @apply flex items-start p-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover: scale-[1.01] hover:shadow-xl;
}
.icon-circle {
  @apply w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mr-6;
}
.problem-entry .feature-icon {
  @apply text-blue-600 text-4xl;
}
.feature-card-item {
  @apply bg-white p-6 rounded-xl shadow-lg flex flex-col items-center text-center transition duration-300 ease-in-out transform hover: scale-105 hover:shadow-xl border border-blue-200;
}
.feature-card-item img {
  @apply rounded-lg shadow-md mb-4;
}
.phone-mockup {
  width: 200px;
  height: 350px;
  background-color: #E0F2FE;
  border: 1px solid #3B82F6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #3B82F6;
  font-weight: bold;
  text-align: center;
  flex-shrink: 0;
}
.feature-grid-item {
  @apply flex flex-col md: flex-row items-center bg-white p-6 rounded-xl shadow-lg transition duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-xl border border-blue-200;
}
.feature-grid-item .text-content {
  @apply md: ml-6 text-left;
}
.feature-grid-item .icon-wrapper {
  @apply w-20 h-20 flex items-center justify-center flex-shrink-0 mb-4 md: mb-0;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}
.animate-scale-in {
  animation: scaleIn 0.6s ease-out forwards;
}
.animated-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}
.animated-item.show {
  opacity: 1;
  transform: translateY(0);
}
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}
.faq-answer.open {
  max-height: 500px;
  opacity: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transform: translateY(0);
}
.rotate-180 {
  transform: rotate(180deg);
}
/* Floating button specific styles */
.floating-button {
  position: fixed;
  right: 1rem; /* Adjust as needed */
  bottom: 2rem; /* Adjust as needed */
  z-index: 999; /* Ensure it stays on top */
  display: flex;
  flex-direction: row; /* Changed to row for horizontal layout */
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #3b82f6, #60a5fa); /* Blue gradient */
  color: white;
  padding: 0.75rem 1.5rem; /* Adjusted padding for horizontal */
  border-radius: 9999px; /* Fully rounded */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow */
  transition: all 0.3s ease-in-out;
  text-align: center;
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  font-size: 1rem; /* Adjusted font size for horizontal text */
  width: auto; /* Auto width for horizontal text */
  height: auto; /* Auto height */
  min-height: auto; /* Removed min-height */
  white-space: nowrap; /* Keep text on one line */
}
.floating-button:hover {
  transform: translateY(-5px) scale(1.05); /* Lift and slightly enlarge on hover */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4);
}
.floating-button .text-horizontal { /* Changed class name for clarity */
  /* Removed vertical-rl and text-orientation */
  margin-left: 0.5rem; /* Space between icon and text */
}
.floating-button i {
  font-size: 1.5rem; /* Icon size */
  margin-right: 0.5rem; /* Space between icon and text */
  margin-bottom: 0; /* Removed bottom margin */
}
/* Responsive adjustments for the floating button */
@media (max-width: 768px) {
  .floating-button {
    right: 0.5rem;
    bottom: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  .floating-button i {
    font-size: 1.2rem;
  }
}
/* Styles for the new logo carousel */
.logo-carousel-container {
  overflow: hidden;
  width: 100%;
  margin-top: 3rem; /* Add some spacing */
  padding: 1rem 0;
  background-color: #f8fafc; /* Light background for the carousel */
  border-radius: 0.75rem;
/*   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); */
}
.logo-carousel-track {
  display: flex;
  white-space: nowrap;
  animation: scroll-left 40s linear infinite; /* Adjust duration as needed */
}
.logo-carousel-track:hover {
  animation-play-state: paused; /* Pause on hover */
}
.logo-carousel-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem; /* Spacing between logos */
  flex-shrink: 0; /* Prevent items from shrinking */
  width: 200px; /* Adjust based on logo size + padding */
/*   height: 100px;  */
}
.logo-carousel-item img {
  max-width: 100%;
/*   max-height: 80px; 
  filter: grayscale(100%);
  opacity: 0.6;  */
  transition: all 0.3s ease-in-out;
}
.logo-carousel-item img:hover {
  filter: grayscale(0%); /* Color on hover */
  opacity: 1; /* Full opacity on hover */
  transform: scale(1.05);
}
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%); /* Scroll half the track width (one full set of logos) */
  }
}
/* New styles for improved step design */
.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem; /* Space between steps */
}
/* Modified step-number-circle for oval shape and "STEP" text */
.step-number-oval {
  @apply px-4 py-2 flex items-center justify-center bg-blue-600 text-white rounded-full font-bold text-lg flex-shrink-0 mr-4 shadow-md;
  min-width: 90px; /* Ensure enough width for "STEP X" */
  text-align: center;
}
.step-content {
  flex-grow: 1;
}
.step-title {
  @apply font-semibold text-xl text-gray-900 mb-1;
}
.step-description {
  @apply text-gray-700 text-base space-y-1;
}

/* 7.30 */
.introbox-item{
	display: flex;
    align-items: center;
    gap: 20px;
	margin-bottom: 20px;
}
.imgbox01 img {
	border-radius: 50%;
    background: #fff;
    width: 120px;
    height: 120px;
    object-fit: contain;
}
.introbox-item-text {
	font-size: 20px;
}

.introbox-item-text span {
	font-size: 16px;
	color: #4b5563;
}

.imgbox02 {
	margin: auto;
    max-width: 150px;
    margin-bottom: 20px;
}
.flex-box {
	display: flex;
/*     align-items: center; */
    gap: 10px;
}
.flex-box .imgbox03 {
	min-width: 100px;
	max-width: 100px;
}
@media (max-width: 768px) {
/* 	.imgbox01 {
		margin: auto;
		max-width: 150px;
		margin-bottom: 20px;
	} */
	.imgbox02 {
		margin: auto;
		max-width: 100px;
		margin-bottom: 20px;
	}
	.flex-box {
		flex-direction: column;
	}
	.flex-box .imgbox03 {
		min-width: 100px;
		max-width: 100px;
		margin: auto;
	}
}
@media screen and (max-width: 768px) {
  .sp {
	  display:none;
  }
}