@charset "utf-8";


div.cont.cont1{display: flex; flex-wrap:wrap}
div.cont1-img img{border: 1px solid rgb(0 0 0 / 15%)}
p.cont1-text{color: var(--color-text-light); line-height: 160%}
@media screen and (max-width:767px){
	div.cont.cont1{gap: 2.14rem; flex-direction: column-reverse;}
	div.cont.cont1 h4.subTitle{text-align: center}
	p.cont1-text{text-align: center}
}
@media screen and (min-width:768px) and (max-width:1280px){
	div.cont.cont1{gap: 3.12rem; align-items: center}
	div.cont1-img{width: calc((100% - 3.12rem) / 2)}
	div.cont1-text{width: calc((100% - 3.12rem) / 2)}
	p.cont1-text{white-space: pre-line}
}
@media screen and (max-width:1280px){
	div.cont1-img img{width: 100%}
	p.cont1-text{font-size: 1rem; margin-top: 1rem; white-space: pre-line}
}
@media screen and (min-width:1281px){
	div.cont.cont1{gap: 6.25rem; align-items: center}
	div.cont1-img{width: calc((100% - 6.25rem) / 2)}
	div.cont1-img img{max-width: 100%}

	div.cont1-text{width: calc((100% - 6.25rem) / 2)}
	p.cont1-text{font-size: 1.13rem; margin-top: 1.25rem; white-space: pre-line}
}

div.cont2-text h4.subTitle{text-align: center}
p.cont2-text{font-size: 1.13rem; color: var(--color-text-light); text-align: center}
div.cont2-img{display: flex; flex-wrap:wrap}
div.cont2-img img{max-width:100%}
div.cont2-img-left{display: flex; justify-content: center; align-items: center; box-sizing: border-box}
div.cont2-img-left div.img{height: 100%; display: flex; justify-content: center; align-items: center}
div.cont2-img-right{display: flex; align-items: center}
@media screen and (max-width:1280px){
	div.cont2-text{margin-bottom: 2rem}
	div.cont2-text h4.subTitle{margin-bottom: 1.33rem}
	p.cont2-text{font-size: 1rem}
	div.cont2-img{gap: 1.33rem}
	div.cont2-img-left{width: 100%; padding:2rem 10px}
	div.cont2-img-right{justify-content: center; width: 100%; gap: 10px}
}
@media screen and (min-width:1281px){
	div.cont2-text{margin-bottom: 3.12rem}
	div.cont2-text h4.subTitle{margin-bottom: 1.87rem}
	p.cont2-text{font-size: 1.13rem}
	div.cont2-img{gap: 3.12rem}
	div.cont2-img-left{width: calc((100% - 3.12rem) / 2); background-color: var(--color-background-secondary)}
	div.cont2-img-right{width: calc((100% - 3.12rem) / 2); gap: 1.25rem}
}

section#section3{background: url(/image/system/cont3_backimg.jpg) no-repeat 50% 0; background-size: cover}
div.cont3-text h4.subTitle{color: #fff}
ul.cont3-list{display: flex; flex-wrap: wrap}
div.cont3-list-in{display: flex; align-items: center}
i.cont3-list-icon{display: flex; justify-content: center; aspect-ratio: 1 / 1; border-radius: 50%; background-color: rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 15%)}
i.cont3-list-icon svg{fill: #fff}
span.cont3-list-text{display: block; color: var(--color-primary); font-weight: 700}
p.cont3-list-text{color: #fff; font-weight: 600}
@media screen and (max-width:767px){
	div.cont3-text h4.subTitle{text-align: center}
	ul.cont3-list{gap: 20px}
	li.cont3-list{width:100%}
	div.cont3-list-in{flex-direction: column; gap: 1rem;}
	i.cont3-list-icon{width: 60px}
	i.cont3-list-icon svg{width: 18px}
	span.cont3-list-text{text-align: center}
}
@media screen and (min-width:768px) and (max-width:1280px){
	ul.cont3-list{gap: 1rem}
	li.cont3-list{width: calc((100% - 1rem) / 2)}
	div.cont3-list-in{gap: 2rem}
	i.cont3-list-icon{width: 5.33rem}
	i.cont3-list-icon svg{width: 1.73rem}
}
@media screen and (max-width:1280px){
	section#section3{padding: 5.33rem 0}
	div.cont3-text h4.subTitle{margin-bottom: 2rem}
	span.cont3-list-text{font-size: 1.6rem; margin-bottom: 0.67rem}
	p.cont3-list-text{font-size: 1.13rem}
}
@media screen and (min-width:1281px){
	section#section3{padding: 9.37rem 0}
	div.cont3-text h4.subTitle{margin-bottom: 3.12rem}
	ul.cont3-list{gap: 1.25rem}
	li.cont3-list{width: calc((100% - 1.25rem) / 2)}
	div.cont3-list-in{gap: 3.12rem}
	i.cont3-list-icon{width: 7.5rem}
	i.cont3-list-icon svg{width: 2.12rem}
	span.cont3-list-text{font-size: 1.87rem; margin-bottom: 10px}
	p.cont3-list-text{font-size: 1.25rem}
}

div.cont4-text h4.subTitle{text-align: center}
div.cont4-text p.subTitle{text-align: center; color:var(--color-text-light)}
div.cont4-list{margin-top: 80px}
ul.cont4-list{display: flex; flex-wrap: wrap}
li.cont4-list{box-sizing: border-box}
div.cont4-list-in{display: flex; flex-direction: column; align-items: center}
i.cont4-list-icon{aspect-ratio: 1 / 1; background-color: var(--color-background-secondary); border-radius: 50%; display: flex; justify-content: center; align-items: center}
i.cont4-list-icon svg{fill: var(--color-icon-fill-primary)}
h2.cont4-list-text{text-align: center}
p.cont4-list-text{text-align: center; line-height: 180%; color: var(--color-text-lighter)}
@media screen and (max-width:767px){
	li.cont4-list{width: calc((100% - 2rem) / 2)}
}
@media screen and (min-width:768px) and (max-width:1280px){
	div.cont4-text h4.subTitle{white-space: pre-line}
	li.cont4-list{width: calc((100% - (2rem * 3)) / 4)}
}
@media screen and (max-width:1280px){
	div.cont4-text h4.subTitle{margin-bottom: 2rem}
	div.cont4-list{margin-top: 3.33rem}
	ul.cont4-list{gap: 2rem}
	i.cont4-list-icon{width: 5.33rem}
	i.cont4-list-icon svg{width: 2rem}
	h2.cont4-list-text{font-size: 1.13rem; margin: 1.33rem 0 1rem}
}
@media screen and (min-width:1281px){
	div.cont4-text h4.subTitle{white-space: pre-line}
	div.cont4-text h4.subTitle{margin-bottom: 3.12rem}
	div.cont4-list{margin-top: 5rem}
	ul.cont4-list{gap: 1.25rem}
	li.cont4-list{width: calc((100% - (1.25rem * 3)) / 4)}
	i.cont4-list-icon{width: 8.75rem}
	i.cont4-list-icon svg{width: 2.69rem}
	h2.cont4-list-text{font-size: 1.5rem; margin: 1.87rem 0 1.25rem}
	p.cont4-list-text{white-space: pre-line}
}