/* 背景色と全体のコンテナ設定（必要に応じて親要素に適用してください） */
body {
  background-color: #e6ecee; /* 画像の背景に近い薄いブルーグレー */
  font-family: sans-serif;
  margin: 0;
}

/* グリッドレイアウトの親要素 */
.supportGrid {
  display: grid;
  /* 全体を6等分し、アイテムごとに割り当てるスパンを変えることで 3列と2列 を実現します */
  grid-template-columns: repeat(6, 1fr);
  gap: 24px; /* カード間の余白 */
  max-width: 1200px; /* 全体の最大幅 */
  margin: 0 auto; /* 中央寄せ */
}

/* カード共通のスタイル */
.supportCard {
  background-color: #ffffff;
  border-radius: 16px; /* 角丸 */
  width:100%;
  padding: 30px 20px;
  display: flex;
  flex-direction: column; /* 子要素を縦並びに */
}

/* 上段の3つのカード（1〜3番目）：6マスのうち2マス分を使用（3等分） */
.supportCard:nth-child(1),
.supportCard:nth-child(2),
.supportCard:nth-child(3) {
  grid-column: span 2;
}

/* 下段の2つのカード（4〜5番目）：6マスのうち3マス分を使用（2等分） */
.supportCard:nth-child(4),
.supportCard:nth-child(5) {
  grid-column: span 3;
}

/* 見出しのスタイル */
.supportCard h3 {
  color: #3b8e8f; /* テキストの青緑色 */
  text-align: center;
  font-size: clamp(1.125rem, 0.825rem + 0.75vw, 1.5rem);
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 20px;
}

/* テキスト（段落）のスタイル */
.supportCard p {
  color: #333333;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 30px;
  text-align: left;
}

/* 画像のスタイル */
.supportCard img {
  width: auto;
  max-width:100%;
  max-height:160px;
  height: auto;
  /* margin-top: auto を指定することで、テキスト量に関わらず画像をカードの最下部に押しやります */
  margin: auto auto 0 auto; 
  display: block;
}
.supportCard:last-of-type{
  position:relative;
  .supportCardCircle{
    width:20%;
    aspect-ratio:1/1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-weight:bold;
    font-size:clamp(1rem, 0.6rem + 1vw, 1.5rem);
    background-color:var(--orange);
    position:absolute;
    right:16px;
    bottom:16px;
    line-height:1;
  }
}

/* スマートフォン向けのレスポンシブ対応（画面幅が768px以下の場合） */
@media (max-width: 768px) {
  .supportGrid {
    grid-template-columns: 1fr; /* 1列にする */
  }
  
  .supportCard:nth-child(n) {
    grid-column: span 1; /* 全てのカードが1列幅になるように上書き */
  }
}


.newPlanArea{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:24px;
  background-color:#f5cfb2;
  border-radius:24px;
  @media (width > 768px){
    padding:32px;
  }
}


p.planCaution{text-align:right;margin:-8px 10px 16px;@media (width>768px){margin:-16px 16px 16px;}}
.site-footer{
  position:relative;
}
.topReturn{
  width:60px;
  aspect-ratio:1/1;
  display:block;
  background-color:#f5cfb2;
  border:1px solid #fff;
  border-radius:50%;
  position:fixed;
  left:auto;
  right:16px;
  bottom:16px;
  cursor:pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;/* 表示状態のクラス */
  &.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* フッター到達時のクラス（footer直上に留まる） */
  &.is-bottom {
    position: absolute;
    bottom: calc(100% + 10px); /* footerのすぐ上に配置 */
    right: 5px; /* 元のCSSの指定に合わせる */
  }
  &:hover {
    opacity: 0.8;
    transform: translateY(-3px); /* 軽く浮く演出 */
  }
  &::before{
    content:'';
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform:rotate(-45deg);
    width:16px;
    aspect-ratio:1/1;
    display:block;
    position:absolute;
    margin:auto;
    top:60%;
    bottom:40%;
    left:0;
    right:0;
  }
}