/* =============================
   ファーストビュー
============================= */
.hero {
  display: flex;
  justify-content: space-between;
  text-align:center;
  align-items: center;
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  gap: 40px;
}

.hero-content h1 {
  font-size: 32px;
  color: #1D3557;
}

.hero-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.btn-primary {
  background: #457B9D;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: #1D3557;
}

.mockup {
  height: 600px;
  width: auto;
}

/* =============================
   特徴セクション
============================= */
.features {
  background: #F9FAFB;
  text-align: center;
  padding: 60px 20px;
}

.features h2 {
  font-size: 26px;
  margin-bottom: 40px;
}

.feature-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.top-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 235px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.top-card:hover {
  transform: translateY(-4px);
}

.top-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

/* 個別の色設定 */
.top-card .fa-book {
  color: #3B82F6;
}

.top-card .fa-calendar-days {
  color: #EF4444;
}

.top-card .fa-bell {
  color: #F59E0B;
}

.top-card .fa-chart-line {
  color: #10B981;
}

.top-card .fa-mobile-screen-button {
  color: #8B5CF6;
}

/* =============================
   画面紹介
============================= */
.top-screens {
  text-align: center;
  padding: 60px 20px;
}

.top-screen-block {
  text-align: center;
}

.top-screen-block p {
  max-width: 300px;
}

.top-screens-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px;
  margin-top: 30px;
}

.top-screen-img {
  height: 560px;
  width: auto;
}

.top-screens-row {
  display: flex;
  flex-direction: row;  
  gap: 100px;
  flex-basis: 100%;
  justify-content: center;
}

.top-screen-caption {
  margin-top: 12px;
  font-size: 16px;
  color: #4B5563;
}

/* =============================
   利用シーン
============================= */
.use-cases {
  background: #F1FAEE;
  text-align: center;
  padding: 60px 20px;
}

.use-cases h2 {
  margin-bottom: 10px;
}

.use-cases ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  font-size: 18px;
  line-height: 2;
  display: inline-block;
  text-align: left;
}

.use-cases .fa-layer-group {
  color: #3B82F6;
}

.use-cases .fa-comment-dots {
  color: #F59E0B;
}

.use-cases .fa-eye {
  color: #10B981;
}

/* =============================
   CTA
============================= */
.cta {
  text-align: center;
  padding: 80px 20px;
  background: #A8DADC;
  color: #003049;
}

.cta h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.cta p {
  margin-bottom: 20px;
  font-size: 18px;
}