:root {
    --orange: 233, 153, 38;
    --red: 225, 120, 120;
    --blue: 120, 190, 200;
    --pink: 230, 150, 165;
	}


#main{
	overflow: hidden;
	}
	#main section{
		display: grid;
		}

#passion{
	padding-top: clamp(48px, 9.6vw, 64px);
	}
	#passion>*>*{
		width: var(--wrap);
		margin: 0 auto;
		}
	#passion h2+p{
		margin-top: clamp(24px, 7.2vw, 48px);
		max-width: 760px;
		font-family: var(--font-min);
		}

#passion section{
	position: relative;
	z-index: 10;
	}
	#passion section:before{
		content: "";
		position: absolute;
		top: 50%;
		left: -100px;
		right: -100px;
		height: 180px;
		z-index: -10;
		}
		#passion section:nth-of-type(odd):before{
			transform: translateY(-50%) rotate(-20deg);
			}
		#passion section:nth-of-type(even):before{
			transform: translateY(-50%) rotate(20deg);
			}
	#passion section>div{
		display: grid;
		align-content: space-between;
		column-gap: clamp(24px, 7.2vw, 48px);
		padding: clamp(48px, 9.6vw, 64px) 0;
		}
		#ceo>div,
		#ceo figure+div{
			display: grid;
			grid-row-gap: clamp(24px, 3.2vw, 32px);
			}
	#passion section h3{
		font-size: clamp(24px, 3.2vw, 32px);
		font-family: var(--font-min);
		font-weight: 500;
		display: grid;
		grid-gap: 8px;
		}
		#passion section h3:after{
			content: attr(data-title);
			font-family: var(--font-en);
			font-size: 12px;
			font-weight: bold;
			display: block;
			}
	#passion section p{
		order: -2;
		font-size: clamp(20px, 3.2vw, 32px);
		font-family: var(--font-min);
		font-weight: 500;
		}
	#passion section div div:has(h3){
		display: flex;
		flex-direction: column;
		font-weight: 500;
		}
	#passion section strong{
		order: -1;
		}
	#passion section dl{
		display: grid;
		row-gap: 8px;
		}
	#passion section dt{
		font-weight: bold;
		}
	#passion section dl+{
		font-weight: bold;
		}
	@media (max-width: 767.98px){
		#passion section>div,
		#passion section figure+div{
			display: grid;
			grid-row-gap: clamp(24px, 3.2vw, 32px);
			}
		#passion section figure:has(.profile){
			order: -1;
			position: relative;
			height: max(100%, 250px);
			aspect-ratio: 1 / 1;
			overflow: hidden;
			}
		#passion img.profile{
			position: absolute;
			top: -10%;
			}
		#passion section p{
			text-align: center;
			}
		}
	@media (max-width: 575.98px) {
		#aboutFeature dl:before{
			width: 36px;
			height: 36px;
			position: absolute;
			left: 0;
			margin-top: 5px;
			}
		#aboutFeature dt{
			margin-left: 50px;
			}
		}
	@media (min-width: 768px) {
		#passion>*>* {
			max-width: 840px;
			}
		#passion h2+p{
			text-align: center;
			}
		#passion section figure{
			grid-row: 1 / 4;
			}
		#passion section figure+div{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			}
			#passion section:nth-of-type(odd)>div>*{
				grid-column: 1;
				}
			#passion section:nth-of-type(odd) figure{
				grid-column: 2;
				}
			#passion section:nth-of-type(even)>div>*{
				grid-column: 2;
				}
			#passion section:nth-of-type(even) figure{
				grid-column: 1;
				}
		#passion section img.profile{
			aspect-ratio: 1 / 2;
			object-fit: cover;
			max-width: 385px;
			}
		}

#passion section:nth-of-type(1){}
	#passion section:nth-of-type(1):before{
		background: rgba(var(--orange), 0.25);
		}
	#passion section:nth-of-type(1) h3:after{
		color: rgb(var(--orange));
		}
	#passion section:nth-of-type(1) p{
		color: rgb(var(--orange))
		}
#passion section:nth-of-type(2){}
	#passion section:nth-of-type(2):before{
		background: rgba(var(--red), 0.25);
		}
	#passion section:nth-of-type(2) h3:after{
		color: rgb(var(--red));
		}
	#passion section:nth-of-type(2) p{
		color: rgb(var(--red))
		}
#passion section:nth-of-type(3){}
	#passion section:nth-of-type(3):before{
		background: rgba(var(--blue), 0.25);
		}
	#passion section:nth-of-type(3) h3:after{
		color: rgb(var(--blue));
		}
	#passion section:nth-of-type(3) p{
		color: rgb(var(--blue))
		}
#passion section:nth-of-type(4){}
	#passion section:nth-of-type(4):before{
		background: rgba(var(--pink), 0.25);
		}
	#passion section:nth-of-type(4) h3:after{
		color: rgb(var(--pink));
		}
	#passion section:nth-of-type(4) p{
		color: rgb(var(--pink))
		}

#passion section>div+div{
	text-align: center;
	padding: clamp(48px, 10.2vw, 78px) 0;
    width: 100%;
    max-width: 100%;
    display: block;
	}
	#passion section:nth-of-type(1)>div+div{
		background: rgb(var(--orange));
		}
	#passion section:nth-of-type(2)>div+div{
		background: rgb(var(--red));
		}
	#passion section:nth-of-type(3)>div+div{
		background: rgb(var(--blue));
		}
	#passion section:nth-of-type(4)>div+div{
		background: rgb(var(--pink));
		}
	#passion section>div+div h4{
		margin-bottom: 1em;
		color: #fff;
		}
	#passion section>div+div>div{
		margin: 0 24px;
		}