/* General Reset / Base */
body,
h1,
h2,
p,
button,
figure,
main,
section,
header,
footer {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  line-height: 1.6;
  color: #333; /* Default text color */
}

/* Main Container */
.main-container {
  min-height: 100vh;
  background: linear-gradient(to bottom right, white, #eff6ff); /* from-white to-blue-50 */
  padding-bottom: 5rem; /* pb-20 */
}

/* Header */
.site-header {
  width: 100%;
  background-color: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
  padding: 1rem 1.5rem; /* py-4 px-6 */
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-content {
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-text {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700; /* font-bold */
  color: #1d4ed8; /* text-blue-700 */
}

/* Hero Section */
.hero-section {
  position: relative;
  background-color: #dbeafe; /* bg-blue-100 */
  padding-top: 5rem; /* pt-20 */
  padding-bottom: 10rem; /* pb-40 */
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem; /* px-6 */
  text-align: center;
  overflow: hidden;
}

.hero-text-content {
  max-width: 64rem; /* max-w-5xl */
  margin-left: auto;
  margin-right: auto;
}

.hero-title {
  font-size: 3rem; /* text-5xl */
  font-weight: 700; /* font-bold */
  line-height: 1.2; /* leading-tight */
  margin-bottom: 1.5rem; /* mb-6 */
  color: #1f2937; /* A common dark text color */
}

.hero-subtitle {
  font-size: 1.25rem; /* text-xl */
  color: #374151; /* text-gray-700 */
  margin-bottom: 2rem; /* mb-8 */
}

.hero-button-wrapper {
  /* This div exists in React for motion.div, can be kept for structure or removed if not needed for specific CSS targeting */
}

.hero-button {
  margin: 0 16px;
  background-color: #2563eb; /* bg-blue-600 */
  color: white;
  font-size: 1.125rem; /* text-lg */
  padding: 1rem 2rem; /* px-8 py-4 */
  border-radius: 9999px; /* rounded-full */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow */
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.hero-button:hover {
  background-color: #1d4ed8; /* hover:bg-blue-700 */
  transform: scale(1.05); /* Replicates whileHover={{ scale: 1.05 }} */
}

.hero-image-wrapper {
  margin-top: 3rem; /* mt-12 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow (Tailwind's default shadow) */
}

/* Features Section */
.features-section {
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem; /* px-6 */
  margin-top: 3rem; /* mt-12 */
}

.features-section > .feature-item + .feature-item {
  margin-top: 6rem; /* space-y-24 */
}

.feature-item {
  text-align: center;
  opacity: 0; /* Initial state for animation */
}

.feature-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem; /* mb-4 */
}

.icon {
  /* SVG width/height are set inline in HTML, stroke-width in SVG path */
}
.icon-blue {
  color: #3b82f6;
  stroke: #3b82f6;
} /* text-blue-500 */
.icon-green {
  color: #10b981;
  stroke: #10b981;
} /* text-green-500 */
.icon-purple {
  color: #8b5cf6;
  stroke: #8b5cf6;
} /* text-purple-500 */
.icon-pink {
  color: #ec4899;
  stroke: #ec4899;
} /* text-pink-500 */
.icon-yellow {
  color: #f59e0b;
  stroke: #f59e0b;
} /* text-yellow-500 */
.icon-red {
  color: #ef4444;
  stroke: #ef4444;
} /* text-red-500 */

.feature-title {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem; /* mb-4 */
  color: #1f2937; /* A common dark text color */
}

.feature-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 画像のアスペクト比を保ちつつ、コンテナに収まるようにする */
  border-radius: 0.75rem; /* 親要素の角丸(rounded-xl)に合わせる */
}

.feature-description {
  color: #374151; /* text-gray-700 */
  line-height: 1.625; /* leading-relaxed */
  font-size: 1rem; /* text-base */
  white-space: pre-line; /* whitespace-pre-line */
}

/* Footer */
.site-footer-bottom {
  text-align: center;
  font-size: 0.875rem; /* text-sm */
  color: #6b7280; /* text-gray-500 */
  margin-top: 5rem; /* mt-20 */
  padding-top: 2rem; /* py-8 */
  padding-bottom: 2rem; /* py-8 */
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTextAppear {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-hero-text {
  animation: heroTextAppear 1s ease forwards;
}

.animate-hero-image {
  animation: heroImageAppear 1.2s 0.4s ease forwards; /* duration 1.2s, delay 0.4s */
}

.animate-feature {
  animation: fadeInUp 0.6s ease forwards;
  /* animation-delay is set via inline style on HTML elements for staggered effect */
}

/* style.css */

/* Add these styles for the image modal */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
  /* For centering content */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
}

/* Modal Content (image) */
.modal-content {
  display: block;
  max-width: 90vw; /* Max width relative to viewport width */
  max-height: 90vh; /* Max height relative to viewport height */
  width: auto;
  height: auto;
  /* Animation */
  animation-name: zoom;
  animation-duration: 0.6s;
}

/* Add Animation */
@keyframes zoom {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* The Close Button */
.close-modal {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1001; /* Ensure close button is above the image if they overlap */
}

.close-modal:hover,
.close-modal:focus {
  color: #bbb;
  text-decoration: none;
}

/* Style for images within feature placeholders to indicate they are clickable */
.feature-image-placeholder img {
  cursor: pointer; /* Already handled by JS, but good for CSS too */
  transition: opacity 0.2s ease-in-out;
}

.feature-image-placeholder img:hover {
  opacity: 0.85;
}

/* Table column width adjustment */
.features-section table th[scope='row'],
.features-section table thead th:first-child {
  min-width: 80px; /* Adjust this value to your preferred width */
  text-align: left; /* Align text to the left if desired */
}

/* Table styling for grid lines and general appearance */
.features-section table {
  border-collapse: collapse;
  width: 95%; /* Adjust as needed. Works with inline margin:auto for centering. */
  margin-top: 1rem; /* Add some space above the table */
  margin-bottom: 1rem; /* Add some space below the table */
}

.features-section table th,
.features-section table td {
  border: 1px solid #e0e0e0; /* Light gray border for grid lines */
  padding: 10px 15px; /* Padding inside cells (top/bottom, left/right) */
  font-size: 0.9rem; /* Adjust font size for table content */
  text-align: left; /* Align text to the left for all data cells */
}

/* Styling for all table header cells (in thead) */
.features-section table thead th {
  background-color: #f7f7f7; /* Light background for header cells */
  font-weight: bold; /* Bold font for header */
  text-align: left; /* Align text to the left for all header cells */
}

/* Override for the first header cell in thead ("書籍コード") to be left-aligned */
.features-section table thead th:first-child {
  text-align: left;
}

/* Styling for row headers (th with scope="row") in tbody */
.features-section table tbody th[scope='row'] {
  background-color: #fdfdfd; /* Slightly different background for row headers, optional */
  text-align: left; /* Ensure row headers are left-aligned */
  font-weight: normal; /* Normal font weight for data-like row headers */
}

/* Responsive adjustments for smaller screens if needed */
@media only screen and (max-width: 700px) {
  .modal-content {
    /* Adjust max-width if necessary for very small screens,
           though 90vw should generally be fine. */
  }
  .close-modal {
    font-size: 30px;
    top: 15px;
    right: 25px;
  }
}