@charset "utf-8";
/* CSS Document */


/*===== トップイメージ =====*/
h2{
	margin-bottom:20px;
}

h3{
	font-family: var(--font-ja);

}

.fv-lower-img {
  width: 100%;
  height: clamp(80px, 32vw, 300px);
  object-fit: cover;
  display: block;

  /* 上下左右ぼかし */
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;

  mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

/*===== メインコンテンツ =====*/
/* 数字 */
.number {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  color: #fff;
  background-color: var(--main);
  border-radius: 50%;
  margin: 0 auto 4px;
}

/* ===== future3 ===== */
.future3 .contents{
	gap:0;
}

.future3-card{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
}

/* 画像 100px */
.future3-card img{
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* 2番目だけアイテムの並びを逆に（画像が右、テキストが左） */
.contents .future3-card:nth-child(2){
  flex-direction: row-reverse;
}

/* ===== 500px以上 ===== */
@media (min-width: 550px){
.future3 .contents{
	max-width: 700px;
	  width: 100%;
    flex-direction: row;        /* コンテンツ同士は横並び */
    justify-content: space-around;
    align-items: flex-start;
  }

  .future3-card{
    flex-direction: column;     /* アイテム縦並び */
    align-items: center;
    text-align: center;
  }

  /* 画像 150px */
  .future3-card img{
    width: 150px;
    height: 150px;
  }

  /* 500px以上では2番目の“逆並び”を解除（縦並びに統一） */
  .contents .future3-card:nth-child(2){
    flex-direction: column;
  }
}