@charset "utf-8";

/* --------------------------------------------


index


---------------------------------------------- */
body {
  background-image: url('../image/index/bk.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* --------------------------------------------
  トップページ:レイアウト
-------------------------------------------- */
.main-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.container {
  width: 88%;
  margin: 0 auto;
  container-type: inline-size;
}

/* --------------------------------------------
    メインメニュー(カード)
-------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.card-item {
  border-radius: 8px;
  background-color: var(--c-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: clamp(20px, 2vw, 40px) 16px clamp(10px, 2vw, 28px);
  color: var(--c-blue);
  font-weight: bold;
  text-align: center;
}

.card-link.text-red {
  color: var(--c-red);
}

.card-link.text-green {
  color: var(--c-green);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(60px, 6cqw, 130px);
  height: clamp(60px, 6cqw, 130px);
  margin-bottom: 12px;
}

.card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
}

/* --------------------------------------------
  主なコンテンツへのリンク
-------------------------------------------- */
.sub-links-title {
  margin-bottom: 2rem;
  color: var(--c-blue);
  font-size: var(--fz-xl);
  font-weight: bold;
  text-align: center;
}


@media (max-width: 1020px) {
  .container {
    width: 96%;
  }
}

@media (max-width: 900px) {
  .card-grid {
    gap: 12px;
  }

  .card-link {
    padding: 20px 8px;
  }

  .pill-btn {
    padding: 10px 12px;
  }

  .pill-btn .arrow {
    right: 10px;
  }
}

@media (min-width: 850px) and (max-width: 1380px) {
  .sub-links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-item {
    transition: none;
  }

  .card-item:hover {
    transform: none;
  }
}