@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);}

.merch-explanation {background: linear-gradient(to right, #e4e2e3, #f7f7f7); color: #222}
.merch-explanation-inner {display: flex; justify-content: space-between;}
.merch-explanation-content {padding: 7.5rem 0;}
.merch-explanation-title-st {font-weight: 500;}
.merch-explanation-title-line {display: inline-block; border-top: 1px solid #222; height: 0px; width: 6.88rem; margin: 1.2rem 1rem 0.8rem;}
.merch-explanation-desc {display: flex; flex-direction: column; gap: 1.25rem; margin-top: 3.88rem;}
.merch-explanation-desc-p {font-weight: 300;}
.merch-explanation-img-wrap {align-self: center; width: 28rem}
.merch-explanation-img {display: block; width: 100%; height: 100%; object-fit: cover;}

.merch-type{padding:7.5rem 0}
.merch-type-list{display:flex; column-gap:2rem; margin:5.625rem 0 0 0}
.merch-type-item{position:relative; display:flex; flex-direction:column; border-radius:15px; overflow:hidden; box-shadow:0 0 1rem 0 rgba(0,0,0,.1)}
div.merch-type-item-img{width:100%}
img.merch-type-item-img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.merch-type-item-text{display:flex; flex-direction:column; justify-content:center; align-items:center; padding:2rem 0}
.merch-type-item-no{color:#3422FA; font-size:1.125rem; font-weight:300; text-align:center}
.merch-type-item-title{margin:0.2rem 0 0.1rem 0; font-size:1.6875rem; font-weight:400; text-align:center}
.merch-type-item-desc{font-size:1.125rem; font-weight:300; text-align:center; white-space:pre-line}
.merch-type-item-info-list{margin-top:1rem; font-size:1.125rem}
.merch-type-item-info-item{position:relative; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; margin:0 0 0.4rem 0; line-height:1.6em; text-align:center}
.merch-type-item-info-item:last-child{margin:0}
.merch-type-item-info-item:before{content:''; display:block; width:6px; height:6px; margin:0 0.6rem 0 0; border-radius:50%; background-color:#3422FA}

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

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

	.merch-type{padding: 4rem 3vw}
	.merch-type-list{flex-wrap:wrap; gap:2vw}
	.merch-type-item-text{padding:1rem}
	.merch-type-item-no{font-size:1rem}
	.merch-type-item-title{font-size:1.3rem}
	.merch-type-item-desc{font-size:1rem}
	.merch-type-item-info-list{margin-top:1.5rem; font-size:0.94rem}
	.merch-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;}
	.merch-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:321px) and (max-width:360px){
	.intro-title {font-size: 1.8rem;}
	.merch-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:361px) and (max-width:428px){
	.intro-title {font-size: 1.8rem;}
	.merch-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:429px) and (max-width:767px){
	.merch-type-item{width:calc(50% - 1vw)}
}
@media screen and (min-width:768px) and (max-width:1024px){
	.merch-type-item{width:calc(50% - 1vw)}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	.merch-type-item{width:calc(25% - 1.5vw)}
}