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

 .back-dark-blue { 
	background: #1E5F97;
color: #FFFFFF;
	 margin-top: 200px;
	 padding: 100px 0;
		  
}

@media only screen and (max-width: 767px) {
 .back-dark-blue { 
	 margin-top: 50px;		  
}
}
	  
 .back-right-blue { 
	background: #E0F0FF;
	 margin-top: 200px;
	 padding: 100px 0;
		  
}

@media only screen and (max-width: 767px) {
 .back-right-blue { 
	 margin-top: 50px;		  
}
}
	  
		  
	  
	  
.circle__content {
  position: absolute;
  inset: 0;
  z-index: 1;

  /* 上寄せコントロール（数値を小さくするほど上に） */
  --content-top: 22%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--content-top);
  gap: .5rem;
  text-align: center;
}

		.circle__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 12%;
}


		.circle__content2 {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 12%;
padding-left: 3%
}

/* テキスト初期値（必要に応じて微調整） */
.circle__num   { font-weight: 600; line-height: 1; font-size: 2.95rem; letter-spacing: .02em; }
.circle__title { font-weight: 500; line-height: 1.35; font-size: 2rem; letter-spacing: .04em; }
.circle__icon  { width: 200px; height: auto; }
.circle__icon2  { width: 150px; height: 200px; margin-top: -20px}

/* --- SP（〜575.98px）：1列、大きめに表示 --- */
@media (max-width: 575.98px) {
  .circle { width: 64vw; min-width: 0; }    /* 画面比で拡大 */
  .circle__content { --content-top: 26%; padding-top: 16%;}  /* 少しだけ下げる→必要なら数値調整 */
		.circle__icon  { width: 220px; margin-top: 20px}
	.circle__title { font-weight: 500; line-height: 1.35; font-size: 2rem; letter-spacing: .04em; }
}

/* --- タブレット（576px〜767.98px）：3列レイアウトの前段階（見栄え調整） --- */
@media (min-width: 576px) and (max-width: 1024px) {
  .circle { width: 38vw; min-width: 0; }    /* 2列〜3列に遷移する帯の見やすさ用 */
  .circle__content { --content-top: 4%; padding-top: 10%;}
	.circle__icon  { width: 180px; margin-top: -10px}
}

/* --- md以上（768px〜）：3列固定／PCも3列 --- */
@media (min-width: 1024px) {
  .circle { width: 100%; }
  .circle__content { --content-top: 12%; padding-top: 20%;}
	.circle__icon  { width: 280px; margin-top: 0px}
}




/* --- SP（〜575.98px）：1列、大きめに表示 --- */
@media (max-width: 575.98px) {
  .circle { width: 64vw; min-width: 0; }    /* 画面比で拡大 */
  .circle__content2 { --content-top: 16%; }  /* 少しだけ下げる→必要なら数値調整 */
}

/* --- タブレット（576px〜767.98px）：3列レイアウトの前段階（見栄え調整） --- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .circle { width: 38vw; min-width: 0; }    /* 2列〜3列に遷移する帯の見やすさ用 */
  .circle__content2 { --content-top: 4%; }
}

/* --- md以上（768px〜）：3列固定／PCも3列 --- */
@media (min-width: 768px) {
  .circle { width: 100%; }
  .circle__content2 { --content-top: 5%; }
}



/* 文字や間隔をもう少し詰めたい場合の例（任意）
.circle__title { font-size: .95rem; }
.circle__icon  { width: 180px; } 
*/
		
		
		.circles-wrap {
  gap: 0; /* デフォルト余白をなくす */
}

.circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

.circle__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


		

		
		/* md以上で “前の列に20px重ねる” */
@media (min-width: 768px) {


  /* 見栄え：真ん中を最前面にしたい場合など */
  .circles-row > li { position: relative; }
  .circles-row > li:nth-child(1) { z-index: 1; }
  .circles-row > li:nth-child(2) { z-index: 2; } /* 真ん中を上に */
  .circles-row > li:nth-child(3) { z-index: 1; }
}



@media (min-width: 1100px) {
.u-text-title-m {
    font-size: 6.2rem;
  }
}

.u-text-title-m {
  font-style: normal;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 160%;
  letter-spacing: 0em;
}


@media (min-width: 1100px) {
.u-text-title-m {
    font-size: 6.2rem;
  }
}



.u-text-display-l {
  font-style: normal;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 150%;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
	
	.u-text-display-l {
  font-size: 2rem;
}
	}
	
.u-text-title-h3 {
    font-size: 1.6rem;
	margin-bottom: 80px;
	padding-left: 10px;
	font-weight: 600;
	margin-top: -5px;
  }


@media (min-width: 1100px) {
.u-text-title-h3 {
    font-size: 1.6rem;
	margin-bottom: 80px;
	padding-left: 10px;
	font-weight: 600
  }
}
.u-text-title-h4 {
    font-size: 1.8rem;
	margin-bottom: 20px;
	font-weight: 600;
  }


.text-14 {
  font-size: 1.4rem;
}
.circle__num2   { font-weight: 600; line-height: 1; font-size: 2rem; letter-spacing: .02em; }



.value-ex-box {
  margin: 50px;
}