@charset "utf-8";

div.cont6-img{display: flex; justify-content: center}
div.cont6-img img{max-width:100%}
ul.cont6-boxlist{display: flex; flex-wrap: wrap}
li.cont6-boxlist{position:relative; box-sizing: border-box; background: var(--color-background-secondary)}
span.cont6-boxlist{position: absolute; display: flex; background: var(--color-background-primary); color: #fff; justify-content: center; align-items: center}
p.cont6-boxlist{color: var(--color-text-light); line-height: 170%; white-space: pre-line; font-weight: 300}

@media screen and (max-width:1280px){
	div.cont6-boxlist{margin-top: 50px}
	li.cont6-boxlist{width: 100%; padding: 2rem 1rem}
	span.cont6-boxlist{top: -1rem; width: 2rem; height: 2rem}
	h5.cont6-boxlist{font-size: 1.07rem; margin-bottom: 1rem}
}
@media screen and (max-width:428px){
}
@media screen and (min-width:429px) and (max-width:767px){
	li.cont6-boxlist{width: calc((100% - (1rem * 2)) / 2); flex: 1 1 auto}
}
@media screen and (max-width:767px){
	ul.cont6-boxlist{gap: 2rem 1rem}
}
@media screen and (min-width:768px) and (max-width:1280px){
	ul.cont6-boxlist{gap: 1rem}
	li.cont6-boxlist{flex: 1}
	
}
@media screen and (min-width:1281px){
	div.cont6-boxlist{margin-top: 5rem}
	ul.cont6-boxlist{gap: 1.25rem}
	li.cont6-boxlist{padding: 3.12rem 1.25rem; flex: 1}
	span.cont6-boxlist{top: -1.56rem; width: 3.12rem; height: 3.12rem}
	h5.cont6-boxlist{font-size: 1.25rem; margin-bottom: 1.25rem}
}

span.product-text{display: block; text-align: center; margin-bottom: 20px; color: var(--color-primary); font-weight: 700}
@media screen and (max-width:1280px){
	span.product-text{font-size: 1.07rem}
}
@media screen and (min-width:1281px){
	span.product-text{font-size: 1.13rem}
}

section#section1 {
    margin-bottom: 0;
}
div.cont1-text h4.subTitle{text-align: center}
div.cont1-text p.subTitle{text-align: center; color:var(--color-text-light)}
@media screen and (max-width:1280px){
	div.cont1-text h4.subTitle{margin-bottom: 10px}
}
@media screen and (min-width:1281px){
	div.cont1-text h4.subTitle{margin-bottom: 0.94rem}
}


div.cont.cont2{display: flex}
div.cont2-list{width: 100%}
ul.cont2-list{display: flex; flex-wrap:wrap}
li.cont2-list{display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--color-background-secondary)}

div.cont2-list-icon svg{fill: var(--color-icon-fill-secondary)}
p.cont2-list-text{font-weight: 700}
table.cont2-table{width: 100%}
th.cont2-table{background-color: var(--color-background-primary); color: #fff; border: 1px solid var(--color-primary)}
td.cont2-table{color: var(--color-text-light); text-align: center; border: 1px solid var(--color-border)}
@media screen and (max-width:767px){
	li.cont2-list{width: calc((100% - 10px) / 2)}
}
@media screen and (min-width:768px) and (max-width:1280px){
	li.cont2-list{width: calc((100% - (10px * 3)) / 4)}
}
@media screen and (max-width:1280px){
	section#section2{margin-top: 3.33rem}
	div.cont.cont2{gap: 2rem; flex-direction: column;}
	ul.cont2-list{gap: 10px}
	li.cont2-list{padding: 2rem 0}
	
	div.cont2-list-icon{width: 2.67rem;}
	p.cont2-list-text{margin-top: 10px}

	div.cont2-table{flex: 1 1 auto}
	th.cont2-table{padding: 10px}
	td.cont2-table{padding: 10px}
}
@media screen and (min-width:1281px){
	section#section2{margin-top: 6.25rem}
	div.cont.cont2{gap: 3.12rem}
	div.cont2-list{max-width: 31.25rem}
	ul.cont2-list{gap: 1.25rem; height: 100%}
	li.cont2-list{width: calc((100% - 1.25rem) / 2)}

	div.cont2-list-icon{width: 2.5rem;}
	p.cont2-list-text{margin-top: 10px}

	div.cont2-table{flex: 1 1 auto}
	th.cont2-table{padding: 0.94rem}
	td.cont2-table{padding: 10px}
}

div.cont3-text h4.subTitle{text-align: center}
div.cont3-text p.subTitle{text-align: center; color:var(--color-text-light)}

div.cont3-img{display: flex; justify-content: center}
div.cont3-img img{max-width:100%}
	
div.cont3-list{display: flex; justify-content: center}
div.cont3-list-box{display: flex; align-items: center}

p.cont3-list-box{line-height: 160%; white-space: pre-line; color: var(--color-text-light)}
div.cont3-list-round{aspect-ratio: 1 / 1; border-radius: 50%; display: flex; justify-content: center; flex-direction: column; align-items: center; border: 2px solid var(--color-primary)}
div.cont3-list-icon svg{fill: var(--color-icon-fill-primary)}
p.cont3-list-text{font-weight: 700; color: var(--color-primary); white-space: pre-line}
@media screen and (max-width:428px){
	div.cont3-list-round{width: 100%}
	div.cont3-list{gap: 1.43rem}
	div.cont3-list-icon svg{height: 20px}
}
@media screen and (min-width:429px) and (max-width:1280px){
	div.cont3-list-round{width: 130px}
	div.cont3-list{gap: 2rem}
	div.cont3-list-icon svg{height: 35px}
}
@media screen and (max-width:1280px){
	div.cont3-text{margin-bottom: 40px}
	div.cont3-text h4.subTitle{margin-bottom: 10px}

	div.cont3-img{margin: 30px 0}
	
	div.cont3-list-box{width: calc((100% - (30px * 2)) / 3); flex-direction: column}
	p.cont3-list-box{text-align: center; margin-top:20px; font-size: 14px}
	p.cont3-list-text{font-size: 1rem; margin-top: 10px}
}
@media screen and (min-width:1281px){
	div.cont3-text h4.subTitle{margin-bottom: 0.94rem}
	
	div.cont3-img{margin-top: 60px}
	
	div.cont3-list{margin: -260px 0 0; gap: 60px}

	div.cont3-list-box.box1{flex-direction: row-reverse; position:relative}
	div.cont3-list-box.box1:after{content: ''; width: 219px; height: 1px; background-color: var(--color-primary); display: block; position: absolute; right: -257px}
	div.cont3-list-box.box2{flex-direction: column; margin-top: 590px; position:relative}
	div.cont3-list-box.box2:before{content: ''; display: block; width: 1px; height: 100px; background-color: var(--color-primary); transform: rotate(-45deg); position: absolute; left: -20%; top: -30%}
	div.cont3-list-box.box2:after{content: ''; display: block; width: 1px; height: 100px; background-color: var(--color-primary); transform: rotate(45deg); position: absolute; right: -20%; top: -30%}
	p.cont3-list-box{font-size: 1.13rem}
	div.cont3-list-round{width: 162px}
	div.cont3-list-icon svg{height: 45px}
	p.cont3-list-text{font-size: 1.13rem; margin-top: 10px}
	div.cont3-list-box.box1 p.cont3-list-box {text-align: right; margin-right: 30px}
	div.cont3-list-box.box2 p.cont3-list-box{text-align: center; margin-top: 30px}
	div.cont3-list-box.box3 p.cont3-list-box{margin-left: 30px}
}