@charset "utf-8";

div.cont.cont1{position: relative}
div.cont1-img1 img{max-width: 100%}
@media screen and (max-width:1280px){
	div.cont.cont1{display: flex; flex-direction: column-reverse}
	div.cont1-img1{margin-top: 3.33rem}
	div.cont1-img2{display: none}
}
@media screen and (min-width:1281px){
	div.cont1-text{margin: 7.5rem 0 0; padding: 0 0 1.25rem}
	div.cont1-img2{position: absolute; bottom: 0; right: -3.33rem; width: 50%; display: flex; justify-content: flex-end}
}

section#section2{position: relative; overflow: hidden}

div.cont2_round{display: flex}

div.cont2_round > div{display: flex; flex-direction: column; justify-content: center; align-items: center}

div.cont2_round-in{display: flex; justify-content: center; align-items: center; flex-direction: column; aspect-ratio: 1 / 1; border-radius: 50%; position:relative}
div.cont2_round1 div.cont2_round-in, div.cont2_round3 div.cont2_round-in{background-color: var(--color-background-secondary)}

div.cont2_round1 h3.cont2_round, div.cont2_round3 h3.cont2_round{color: var(--color-primary)}

span.cont2_round{display: block}
div.cont2_round1 span.cont2_round, div.cont2_round3 span.cont2_round{color: var(--color-text-light)}

div.cont2_round2 div.cont2_round-in{background-color: var(--color-primary)}
div.cont2_round2 h3.cont2_round{color: #fff}
div.cont2_round2 span.cont2_round{color: #fff}

div.cont2-text h2.subTitle{text-align: center}
div.cont2-text h3.subTitle{text-align: center}
div.cont2-text p.subTitle{color:var(--color-text-light); text-align: center}
@media screen and (max-width:1280px){
	div.cont.cont2{display: flex; flex-direction: column-reverse}
	div.cont2_round{width: 100%; max-width: 40rem; margin: 3.33rem auto 0; justify-content: center; margin-bottom: 3.33rem; gap: 2rem}
	div.cont2_round > div{width: calc((100% - (2rem * 2)) / 3)}

	div.cont2_round-in{width: 100%}

	h3.cont2_round{font-size: 1.47rem; margin-bottom: 0.67rem}

	span.cont2_round{font-size: 1.07rem}
}
@media screen and (min-width:1281px){
	section#section2:before{content: ''; display: block; position: absolute; width: 120%; aspect-ratio: 1 / 1; border: 1px solid var(--color-primary); border-radius: 50%; top: 200px; left: 50%; transform: translate(-50%, 0)}
	
	div.cont.cont2{margin: 12rem 0 0}
	
	div.cont2_round{justify-content: space-between}
	div.cont2_round-in{width: 19.37rem; border: 20px solid #fff}

	h3.cont2_round{font-size: 1.87rem; margin-bottom: 10px}

	span.cont2_round{font-size: 1.13rem}

	div.cont2_round2{margin-top: -20rem}
	div.cont2_round2 div.cont2_round-in:after{content: ''; width: 10rem; aspect-ratio: 1 / 1; position: absolute; background: rgb(193 39 45 / 30%); top: -2.5rem; left: -3.75rem; border-radius: 50%; border: 1px solid #fff}
	div.cont2_round2 div.cont2_round-in:before{content: ''; width: 21.87rem; aspect-ratio: 1 / 1; position: absolute; border: 1px solid var(--color-primary); border-radius: 50%}

}
