:root{
  /* 必要に応じて上書き */
  --primary: #0e2a3f;
  --secondary: #6b88a0;
  --accent: #036EB8;
  --text-on-grad: #ffffff;
  --skyblue: #F6FAFF;
}

/* ==== section ==== */
.toc-features{
  position: relative;
  padding: 100px 0 0 0;
  background: var(--skyblue);
}

/* 背景パターン */
.toc-features::before{
  content:"";
  position:absolute; inset:0;  opacity:.3;
  pointer-events:none;
}

.toc-features__container{
  max-width:1440px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
  min-height: 700px;
}

.toc-features__title{
  margin:0 0 80px;
  font: 700 23px/1.2 "Noto Sans JP", system-ui, sans-serif;
  text-align:center;
  background: linear-gradient(90deg, rgba(122,200,240,1) 0%, rgba(0,123,199,1) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==== cards grid ==== */
.toc-features__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:60px;
  max-width:1000px;
  margin:0 auto;
  padding:0; list-style:none;
}

.toc-features__card {
  display: flex;
  flex-direction: column;  /* 縦並び */
  align-items: center;     /* 横方向中央寄せ */
  justify-content: center; /* 高さがあるなら縦方向中央寄せ */
  text-align: center;      /* テキスト中央揃え */
}

.toc-features__card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 16px; /* 画像とテキストの間に余白 */
}

.toc-features__heading {
  margin: 0;
}
.toc-features__circle:hover{
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(45,94,163,.2);
}

.toc-features__circle:hover::before{
  transform: rotate(-45deg) translate(50%, 50%);
}

.toc-features__label{
  font: 400 14px/1 "Noto Sans JP", system-ui, sans-serif;
  color: var(--secondary);
  margin-bottom:8px;
  position:relative; z-index:1;
}

.toc-features__number{
  margin-bottom:16px;
  font: 700 48px/1 "Noto Sans JP", system-ui, sans-serif;
  background: linear-gradient(90deg, rgba(122,200,240,1) 0%, rgba(0,123,199,1) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative; z-index:1;
}

.toc-features__heading{
  margin:0;
  font: 700 20px/1.4 "Noto Sans JP", system-ui, sans-serif;
  color: var(--accent);
  position:absolute; z-index:1;
}

.toc-features__heading .highlight {
  font-size: 1.3em;
}

/* 下部SVG */
.feature-bottom-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding-top: 48px;
}

.feature-bottom-svg img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== responsive ===== */
@media (max-width: 768px){
  .toc-features{ padding: 80px 0; }
  .toc-features__grid{ grid-template-columns:1fr; gap:40px; }
  .toc-features__container{
    min-height: 1000px;
  }
}