/* ===================================
   home.css — トップページ専用
   =================================== */

/* --- Hero --- */
.hero {
  background: linear-gradient(170deg, #FFF3E8 0%, #FFFAF5 60%, #FFF8F0 100%);
  padding: var(--sp-xl) 0 var(--sp-lg);
  text-align: center;
}

.hero__icon {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin: 0 auto var(--sp-md);
}

.hero__title {
  font-size: 1.8rem;
  color: var(--c-heading);
  margin-bottom: var(--sp-xs);
}

.hero__subtitle {
  font-size: 1.1rem;
  color: var(--c-text-light);
  margin-bottom: var(--sp-md);
}

.hero__description {
  max-width: 560px;
  margin: 0 auto var(--sp-md);
  font-size: 1rem;
  color: var(--c-text);
}

.hero__cta {
  margin-top: var(--sp-md);
}

@media (min-width: 768px) {
  .hero { padding: var(--sp-xl) 0; }
  .hero__icon { width: 140px; height: 140px; }
  .hero__title { font-size: 2.2rem; }
  .hero__subtitle { font-size: 1.25rem; }
}

/* --- Concept --- */
.concept {
  padding: var(--sp-lg) 0;
}

.concept__text {
  max-width: var(--max-content);
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 2;
}

/* --- Features --- */
.features {
  padding: var(--sp-lg) 0;
  background: var(--c-bg-warm);
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--sp-sm);
}

.feature-card {
  background: var(--c-bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feature-card__img {
  width: 100%;
  /* 1:2前後の縦長スクショでも、どんなウィンドウ幅でも縦サイズの80%以上が表示される比率 */
  aspect-ratio: 4 / 7;
  object-fit: cover;
  object-position: top;
}

.feature-card__body {
  padding: var(--sp-md);
}

.feature-card__title {
  font-size: 1.1rem;
  color: var(--c-heading);
  margin-bottom: var(--sp-xs);
}

.feature-card__desc {
  font-size: 0.95rem;
  color: var(--c-text-light);
  margin-bottom: 0;
}

@media (min-width: 560px) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- AI Section --- */
.ai-section {
  padding: var(--sp-lg) 0;
}

.ai-section__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  text-align: center;
}

.ai-section__icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-sm);
}

.ai-section__text {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: var(--sp-sm);
}

.ai-section__note {
  font-size: 0.9rem;
  color: var(--c-text-light);
  background: var(--c-bg-warm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* --- About / Safety --- */
.about-section {
  padding: var(--sp-lg) 0;
  background: var(--c-bg-warm);
}

.about-section__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

.about-section__text {
  font-size: 1rem;
  margin-bottom: var(--sp-sm);
}

/* --- Download CTA --- */
.download-cta {
  padding: var(--sp-lg) 0;
  text-align: center;
}

.download-cta__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}

/* --- Links Section --- */
.links-section {
  padding: var(--sp-lg) 0;
  background: var(--c-bg-warm);
}

.links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--sp-sm);
}

.links-grid__item {
  background: var(--c-bg-white);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  box-shadow: var(--shadow-sm);
}

.links-grid__item a {
  font-weight: 600;
  text-decoration: none;
  color: var(--c-primary);
}
.links-grid__item a:hover {
  text-decoration: underline;
}

.links-grid__item p {
  font-size: 0.9rem;
  color: var(--c-text-light);
  margin-bottom: 0;
  margin-top: 0.25rem;
}

@media (min-width: 560px) {
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}