@charset "utf-8";

body {background: #fff;}
main {color: #222;}

.intro-inner {padding: 10rem 0;}
.intro-title {line-height: 132%; margin-top: 1.89rem;}
.intro-title-st {font-weight: 500;}
.intro-feature {display: flex; flex-wrap: wrap; column-gap: 1.88rem; row-gap: 3.76rem; margin-top: 5rem;}
.intro-feature-content {width: calc(100% / 2 - 1.88rem / 2); position:relative; padding: 1.88rem 2.5rem; box-sizing: border-box; border-radius: 1.25rem; background: var(--color-background-secondary); flex: 1 1 auto;}
.intro-feature-no {position: absolute; top: 0.625rem; left: 0.625rem; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; font-size: 1.25rem; background: var(--color-secondary); color: #fff; font-weight: 700; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.intro-feature-title {font-size: 1.38rem;}
.intro-feature-desc {font-size: 1.1rem; margin-top: 0.75rem; color: var(--color-tertiary);}

.ai-explanation {background: #dbceb6; color: #222}
.ai-explanation-inner {display: flex; justify-content: space-between;}
.ai-explanation-content {padding: 7.5rem 0;}
.ai-explanation-title-st {font-weight: 500;}
.ai-explanation-title-line {display: inline-block; border-top: 1px solid #222; height: 0px; width: 6.88rem; margin: 1.2rem 1rem 0.8rem;}
.ai-explanation-desc {display: flex; flex-direction: column; gap: 1.25rem; margin-top: 3.88rem;}
.ai-explanation-desc-p {font-weight: 300;}
.ai-explanation-img-wrap {align-self: flex-end; width: 40rem}
.ai-explanation-img {display: block; width: 100%; height: 100%; object-fit: cover;}

.ai-type{padding:7.5rem 0}
.ai-type-list{display:flex; flex-wrap:wrap; gap:2.4rem; margin:5.625rem 0 0 0}
.ai-type-item{position:relative; display:flex; flex-wrap:nowrap; width:calc(50% - 1.2rem); border-radius:15px; overflow:hidden}
.ai-type-item-mask{position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid rgba(0,0,0,.1); border-radius:15px}
div.ai-type-item-img{width:15.4rem}
img.ai-type-item-img{display:block; width:100%; object-fit:cover}
.ai-type-item-text{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; flex:1; padding:2rem}
.ai-type-item-no{color:#3422FA; font-size:1.125rem; font-weight:300}
.ai-type-item-title{margin:0.2rem 0 0.1rem 0; font-size:1.6875rem; font-weight:400}
.ai-type-item-desc{font-size:1.125rem; font-weight:300}
.ai-type-item-info-list{margin-top:2.25rem; font-size:1.125rem}
.ai-type-item-info-item{position:relative; padding-left:1.25rem; margin:0 0 0.4rem 0; line-height:1.6em}
.ai-type-item-info-item:last-child{margin:0}
.ai-type-item-info-item:before{content:''; position:absolute; top:calc(0.8em - 3px); left:0; width:6px; height:6px; border-radius:50%; background-color:#3422FA}

@media screen and (max-width:1280px){
	.intro-inner {padding: 4rem 3vw;}

	.ai-explanation-inner {flex-direction: column;}
	.ai-explanation-content {padding: 4rem 3vw 2rem;}
	.ai-explanation-img-wrap {margin: 0; align-self: center; width:30rem; max-width: 100%;}

	.ai-type{padding: 4rem 3vw}
	.ai-type-list{gap:2vw}
	.ai-type-item-text{padding:1rem}
	.ai-type-item-no{font-size:1rem}
	.ai-type-item-title{font-size:1.3rem}
	.ai-type-item-desc{font-size:1rem}
	.ai-type-item-info-list{margin-top:1.5rem; font-size:0.94rem}
	.ai-type-item-info-item{position:relative; padding-left:1rem; margin:0 0 0.3rem 0; line-height:1.6em}
}
@media screen and (max-width:320px){
	.intro-title {font-size: 1.8rem;}
	.ai-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:321px) and (max-width:360px){
	.intro-title {font-size: 1.8rem;}
	.ai-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:361px) and (max-width:428px){
	.intro-title {font-size: 1.8rem;}
	.ai-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:429px) and (max-width:767px){
	.ai-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:768px) and (max-width:1024px){
	.ai-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	.ai-type-item{width:calc(50% - 1vw)}
}