@charset "utf-8";

/*----------------------------
	concept
------------------------------*/

.concept .contArea {
	overflow: hidden;
}
.concept .inner {
	max-width: calc((1065 / 16) * 1rem);
	margin: 0 auto;
	padding: 0 calc((30 / 16) * 1rem);
}

/* conceptHero */
.concept .conceptHero {
	position: relative;
	min-height: calc((854 / 16) * 1rem);
	padding: calc((140 / 16) * 1rem) 0 calc((100 / 16) * 1rem);
}
.concept .conceptHeroBg {
	position: absolute;
	inset: 0;
	opacity: 0.8;
	overflow: hidden;
}
.concept .conceptHeroBg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom center;
}
.concept .conceptHeroBg img.sp {
	display: none;
}
.concept .conceptHeroWave {
	position: absolute;
	left: 0;
	top: 11%;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: multiply;
}
.concept .conceptHeroWave img {
	display: block;
	position: relative;
	left: 50%;
	width: max(100%, calc((1440 / 16) * 1rem));
	max-width: none;
	height: auto;
	transform: translateX(-50%);
}
.concept .conceptHeroWave img.sp {
	display: none;
}
.concept .conceptHeroInner {
	position: relative;
	z-index: 2;
	max-width: calc((1065 / 16) * 1rem);
	margin: 0 auto;
	padding: 0 calc((30 / 16) * 1rem);
}
.concept .conceptHero .en {
	font-size: calc((14 / 16) * 1rem);
	font-family: "Zen Old Mincho", serif;
	letter-spacing: calc((2 / 16) * 1rem);
	color: var(--greenColor);
}
.concept .conceptHero h1 {
	margin-top: calc((20 / 16) * 1rem);
	font-size: calc((48 / 16) * 1rem);
	font-family: "Zen Old Mincho", serif;
	line-height: 1.46;
	letter-spacing: calc((2.4 / 16) * 1rem);
}
.concept .conceptHero .lead {
	margin-top: calc((20 / 16) * 1rem);
	line-height: 2.5;
	letter-spacing: calc((0.8 / 16) * 1rem);
}
@media (min-width: 1500px) {
	.concept .conceptHeroWave {
		top: -15%;
	}
}
@media (max-width: 768px) {
	.concept .inner {
		max-width: 100%;
		padding: 0 5.13%;
	}
	.concept .conceptHero {
		min-height: calc((760 / 16) * 1rem);
		padding: calc((76 / 16) * 1rem) 0 calc((80 / 16) * 1rem);
	}
	.concept .conceptHeroBg img.sp {
		display: block;
	}
	.concept .conceptHeroBg img.pc {
		display: none;
	}
	.concept .conceptHeroWave {
		top: auto;
		bottom: -10%;
	}
	.concept .conceptHeroWave img {
		left: 0;
		width: 100%;
		transform: none;
	}
	.concept .conceptHeroWave img.sp {
		display: block;
	}
	.concept .conceptHeroWave img.pc {
		display: none;
	}
	.concept .conceptHeroInner {
		max-width: 100%;
		padding: 0 5.13%;
	}
	.concept .conceptHero .en {
		font-size: calc((12 / 16) * 1rem);
	}
	.concept .conceptHero h1 {
		margin-top: calc((20 / 16) * 1rem);
		font-size: calc((30 / 16) * 1rem);
		line-height: 1.5;
		letter-spacing: calc((1.6 / 16) * 1rem);
	}
	.concept .conceptHero .lead {
		margin-top: calc((50 / 16) * 1rem);
		max-width: 100%;
		line-height: 2.86;
		letter-spacing: calc((0.7 / 16) * 1rem);
	}
}

/* conceptCol (2カラム共通) */
.concept .conceptCol {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 8%;
}
.concept .conceptTxt {
	width: calc((415 / 16) * 1rem);
}
.concept .conceptTxt h2 {
	font-size: calc((24 / 16) * 1rem);
	font-family: "Zen Old Mincho", serif;
	letter-spacing: calc((1.2 / 16) * 1rem);
	line-height: 1.25;
}
.concept .conceptTxt p {
	margin-top: calc((40 / 16) * 1rem);
	line-height: 2.25;
}
.concept .conceptVisual {
	width: calc((500 / 16) * 1rem);
}
.concept .conceptVisual img {
	display: block;
	width: 100%;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.concept .conceptCol {
		display: block;
	}
	.concept .conceptTxt {
		width: 100%;
	}
	.concept .conceptTxt h2 {
		font-size: calc((24 / 16) * 1rem);
		letter-spacing: calc((1 / 16) * 1rem);
	}
	.concept .conceptTxt p {
		margin-top: calc((30 / 16) * 1rem);
		font-size: calc((14 / 16) * 1rem);
		line-height: 2.14;
	}
	.concept .conceptVisual {
		width: 80%;
		margin: calc((50 / 16) * 1rem) auto 0;
	}
}

/* conceptAbout */
.concept .conceptAbout {
	padding: calc((100 / 16) * 1rem) 0 0;
}
@media (max-width: 768px) {
	.concept .conceptAbout {
		padding: calc((60 / 16) * 1rem) 0 0;
	}
}

/* conceptLogo */
.concept .conceptLogo {
	position: relative;
	padding: calc((150 / 16) * 1rem) 0 calc((150 / 16) * 1rem);
}
.concept .conceptLogoWave {
	position: absolute;
	left: 0;
	bottom: calc((-175 / 16) * 1rem);
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	mix-blend-mode: multiply;
}
.concept .conceptLogoWave img {
	display: block;
	position: relative;
	left: 50%;
	width: max(100%, calc((1440 / 16) * 1rem));
	max-width: none;
	height: auto;
	transform: translateX(-50%);
}
.concept .conceptLogoWave img.sp {
	display: none;
}
.concept .conceptLogo .inner {
	position: relative;
	z-index: 1;
}
.concept .conceptLogo .conceptVisual {
	width: calc((446 / 16) * 1rem);
}
@media (min-width: 1441px) {
	.concept .conceptLogoWave {
		bottom: -45%;
	}
}
@media (max-width: 768px) {
	.concept .conceptLogo {
		padding: calc((60 / 16) * 1rem) 0 calc((100 / 16) * 1rem);
	}
	.concept .conceptLogoWave {
		bottom: -15%;
	}
	.concept .conceptLogoWave img {
		left: 0;
		width: 100%;
		transform: none;
	}
	.concept .conceptLogoWave img.sp {
		display: block;
	}
	.concept .conceptLogoWave img.pc {
		display: none;
	}
	.concept .conceptLogo .conceptVisual {
		width: 71.8%;
	}
}