/* 背景コンテナ */
.bg-container {
  position: relative;
  height: auto;
  /*background-color: #C5E2FF;  指定の背景色 */
	background: linear-gradient(to bottom, rgba(197,226,255,1) 0%,rgba(255,255,255,1) 100%); 
  overflow: hidden;
	width: 100vw;
}
/* 円の中心を右上端に固定するために、
   幅・高さを大きめに設定し、左と上の位置を調整。
   ここでは幅・高さを 200vw とし、要素の中心が (100vw, 0) になるように top と left を設定 */
/* 既存の設定はそのままで、アニメーションは .bg-container.start-animation の下で発動 */
.diagonal-circle {
  position: absolute;
  width: 200vw;
  height: 150vw;  /* 縦幅を調整済み */
  top: -100vw;
  left: 0;
  background-color: #fff;
  border-radius: 50%;
  transform-origin: center;
  transform: scale(0);
  /* ここでは animation は設定しない */
  z-index: 1;
}

/* .bg-container に start-animation クラスが付与されたらアニメーション開始 */
.bg-container.start-animation .diagonal-circle {
  animation: circleExpand 2s ease forwards;
}

@keyframes circleExpand {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.main-content {
  position: relative;
  z-index: 2; /* 円より前面に表示 */
  color: #333;
  margin: 0 auto;
}

.main-content h1 {
  font-size: 3rem;
  color: #7b97b9;
  margin: 0;
}

.main-content p {
  margin-top: 1rem;
  line-height: 1.6;
}

.main-content button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #265485;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* アニメーション定義：scaleのみで拡大（位置は固定） */
@keyframes circleExpand {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}


/* 左上からくり抜くバージョン */
.bg-container2 {
  position: relative;
  height: auto;
  /*background-color: #C5E2FF;  指定の背景色 */
	background: linear-gradient(to bottom, rgba(197,226,255,1) 0%,rgba(255,255,255,1) 100%); 
  overflow: hidden;
}
@media screen and (min-width:641px){
	  .bg-container2{
		  width: 100vw;
	}
}
.diagonal-circle2 {
  position: absolute;
  width: 200vw;
  height: 150vw;
  top: -100vw;
  right: 0; /* 右上ではなく左上にするため、rightを0に */
  background-color: #fff;
  border-radius: 50%;
  transform-origin: center;
  transform: scale(0);
  z-index: 1;
}

/* .bg-container2 に start-animation クラスが付与されたらアニメーション開始 */
.bg-container2.start-animation .diagonal-circle2 {
  animation: circleExpand 2s ease forwards;
}