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

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

.calendar-type{padding:7.5rem 0}
.calendar-type-list{display:flex; column-gap:1.5rem; margin:5.625rem 0 0 0}
.calendar-type-item{position:relative; display:flex; flex-direction:column; width:calc((100% - 1.5rem) / 4)}
div.calendar-type-item-img{width:100%}
img.calendar-type-item-img{display:block; width:100%; aspect-ratio:382/276; object-fit:cover}
.calendar-type-item-text{display:flex; flex-direction:column; justify-content:center; padding:1.8rem}
.calendar-type-item-title{font-size:1.375rem; font-weight:600}
.calendar-type-item-desc{margin:0.75rem 0 0 0; font-size:1rem; font-weight:400}
.calendar-type-item-mask{position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid rgba(0,0,0,.1)}

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

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

	.calendar-type{padding: 4rem 3vw}
	.calendar-type-list{flex-wrap:wrap; gap:2vw}
	.calendar-type-item-text{padding:1rem}
	.calendar-type-item-no{font-size:1rem}
	.calendar-type-item-title{font-size:1.3rem}
	.calendar-type-item-desc{font-size:1rem}
}
@media screen and (max-width:320px){
	.intro-title {font-size: 1.8rem;}
	.calendar-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:321px) and (max-width:360px){
	.intro-title {font-size: 1.8rem;}
	.calendar-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:361px) and (max-width:428px){
	.intro-title {font-size: 1.8rem;}
	.calendar-type-item{width:calc(100% - 1vw)}
}
@media screen and (min-width:429px) and (max-width:767px){
	.calendar-type-item{width:calc(50% - 1vw)}
}
@media screen and (min-width:768px) and (max-width:1024px){
	.calendar-type-item{width:calc(50% - 1vw)}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	.calendar-type-item{width:calc(25% - 1.5vw)}
}