@charset "UTF-8";

.mainvisual-wrap {
    position: relative;
}
.mainvisual-wrap h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1.8rem, (100vw - 1080px) * 4 / 320 + 18px, 2.2rem);
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-shadow: 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 7px rgba(255, 255, 255, 1), 0px 0px 7px rgba(255, 255, 255, 1);
}
.mainvisual-wrap .slide-box {
	display: flex;
}
.mainvisual-wrap .slide-box li {
	position: relative;
	top: 0;
	left: 0;
	width: 50%;
	text-align: center;
}
.mainvisual-wrap .slide-box li p {
	position: absolute;
	top: 35px;
	left: 50%;
	transform: translateX(-50%);
}

@media screen and (max-width: 768px) {

	.mainvisual-wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 113.333333vw;
	}
	.mainvisual-wrap .slide-box li p {
		position: absolute;
		top: -6.666667vw;
		left: 50%;
		width: 36.4vw;
		transform: translateX(-50%);
	}
	.mainvisual-wrap .slide-box li:last-child p {
		width: 36.666667vw;
	}

}

/*================================================

　concept

=================================================*/
.concept {
	max-width: 1300px;
	margin: auto;
	padding: 50px 0 0;
	text-align: center;
}
.concept h2 {
	margin-bottom: 25px;
}
.concept h3 {
	position: relative;
	width: 560px;
	margin: 0 auto 35px;
	padding: 0;
	text-align: center;
}
.concept h3:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 15px;
	width: 100%;
	height: 1px;
	background: #000;
}
.concept h3 span {
	display: block;
	width: 440px;
	position: relative;
	margin: 0 auto;
	padding: 0;
	background: #FFF;
}
.concept .concept-box {
	width: 100%;
	margin: 35px auto 25px;
	padding: 35px 0 0;
	background: url("../images/top/arrow.svg") top center / 36px auto no-repeat;
}
.concept .concept-box p {
	margin-top: 1.5em;
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 320 + 12px, 1.5rem);
	line-height: 2.1;
}

@media screen and (max-width: 768px) {

	.concept {
		padding: 6.666667vw 0 0;
	}
	.concept h2 {
		margin-bottom: 3.333333vw;
	}
	.concept h2 img {
		width: 22.460938vw;
		max-width: 115px;
	}
	.concept h3 {
		width: 74.666667vw;
		margin: 0 auto 4.666667vw;
	}
	.concept h3:before {
		bottom: 2vw;
	}
	.concept h3 span {
		width: 58.666667vw;
	}
	.concept h3 span img {
		width: 51.866667vw;
	}
	.concept .concept-box {
		margin: 4.666667vw auto 3.333333vw;
		padding: 4.666667vw 0 0;
	}
	.concept .concept-box p {
		font-size: clamp(1.2rem, (100vw - 1080px) * 3 / 320 + 12px, 1.5rem);
	}

}

/*================================================

　works

=================================================*/
.works {
	max-width: 1300px;
	margin: 0 auto;
	padding: 190px 0 0;
	text-align: center;
}
.works h2 {
	position: relative;
	margin-bottom: 30px;
}
.works h2::after {
	content: "";
	position: absolute;
	top: -190px;
	left: 50%;
	width: 1px;
	height: 160px;
	background: #000;
}
.works p {
	margin-bottom: 20px;
	font-size: clamp(1rem, (100vw - 1080px) * 3 / 320 + 10px, 1.3rem);
}
.works-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: auto;
}
.works-box li {
	width: 48%;
	margin-bottom: 50px;
}

@media screen and (max-width: 1079px) {

	.works {
		padding: 17.6088971vw 0 0;
	}
	.works h2 {
		margin-bottom: 2.780352vw;
	}
	.works h2::after {
		top: -17.6088971vw;
		height: 14.828545vw;
	}
	.works-box li {
		margin-bottom: 4.6339203%;
	}

}

@media screen and (max-width: 768px) {

	.works h2 img {
		width: 17.382813vw;
		max-width: 89px;
	}

}
@media screen and (max-width: 576px) {

	.works-box li {
		width: 100%;
	}

}

/*================================================

　columns

=================================================*/
.columns {
	max-width: 1300px;
	margin: 0 auto 50px;
	padding: 190px 0 0;
	text-align: center;
}
.columns h2 {
	position: relative;
	margin-bottom: 40px;
}
.columns h2::after {
	content: "";
	position: absolute;
	top: -190px;
	left: 50%;
	width: 1px;
	height: 160px;
	background: #000;
}
.columns ul {
	overflow: hidden scroll;
	max-width: 1000px;
	height: 380px;
	margin: 0 auto;
}
.columns ul li {
	display: flex;
	align-items: flex-start;
	padding: 30px 10px;
	font-size: clamp(1.4rem, (100vw - 1080px) * 2 / 320 + 14px, 1.6rem);
	line-height: 1.5;
	border-bottom: 1px solid #000;
}
.columns ul li:first-child {
	border-top: 1px solid #000;
}
.columns ul li time {
	padding: 3px 0;
	text-align: left;
}
.columns ul li p {
	padding: 3px 0 5px 2em;
	text-align: left;
}
.columns ul li span {
	margin-left: 0.5em;
	color: #FF4F02;
	font-weight: 700;
}

@media screen and (max-width: 1079px) {

	.columns {
		margin: 0 auto 4.63392vw;
		padding: 17.6088971vw 40px 0;
	}
	.columns h2 {
		margin-bottom: 3.707136vw;
	}
	.columns h2::after {
		top: -17.6088971vw;
		height: 14.828545vw;
	}
	.columns ul {
		height: 380px;
	}
	.columns ul li {
		padding: 2.780352vw 10px;
	}

}

@media screen and (max-width: 768px) {

	.columns {
		padding: 17.6088971vw 0 0;
	}
	.columns h2 img {
		width: 23.4375vw;
		max-width: 120px;
	}
	.columns ul li {
		font-size: 1.2rem;
	}
	.columns ul li p {
		padding-left: 1em;
	}

}


/*================================================

　business

=================================================*/
.business {
	max-width: 1300px;
	margin: 0 auto 100px;
	padding: 190px 0 0;
	text-align: center;
}
.business h2 {
	position: relative;
	margin-bottom: 40px;
}
.business h2::after {
	content: "";
	position: absolute;
	top: -190px;
	left: 50%;
	width: 1px;
	height: 160px;
	background: #000;
}
.business ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: auto;
}
.business ul li {
	position: relative;
	width: 48.07%;
	padding: 35px 0;
	text-align: center;
	border: 0.5px solid #000;
}
.business ul li::before,
.business ul li::after {
	content: "";
	position: absolute;
	top: -1px;
	right: 115px;
	width: 90px;
	height: 1px;
	background-color: #FFF;
}
.business ul li::after {
	top: auto;
	right: auto;
	left: 50px;
	bottom: -1px;
	width: 200px;
}
.business ul li a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}
.business ul li figure {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
}
.business ul li p {
	margin-top: 25px;
	text-align: center;
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1.6rem, (100vw - 1080px) * 4 / 320 + 16px, 2rem);
	font-weight: 700;
	line-height: 1.6;
}

@media screen and (max-width: 1079px) {

	.business {
		margin: 0 auto 9.26784059%;
		padding: 17.6088971vw 0 0;
	}
	.business h2 {
		margin-bottom: 3.707136vw;
	}
	.business h2::after {
		top: -17.6088971vw;
		height: 14.828545vw;
	}
	.business ul li {
		padding: 3.2437744vw 0;
	}
	.business ul li::before,
	.business ul li::after {
		right: 10.658017vw;
		width: 8.341057vw;
	}
	.business ul li::after {
		left: 4.63392vw;
		width: 18.535681vw;
	}
	.business ul li:first-child figure img {
		width: 11.121409vw;
	}
	.business ul li:last-child figure img {
		width: 21.130677vw;
	}

}

@media screen and (max-width: 768px) {

	.business {
		margin: 0 auto 4.26784059%;
	}
	.business h2 img {
		width: 21.484375vw;
		max-width: 110px;
	}
	.business ul li {
		width: 100%;
		margin-bottom: 6.944444vw;
		padding: 6vw 0;
	}
	.business ul li::before,
	.business ul li::after {
		right: 10.658017vw;
		width: 16.682114vw;
	}
	.business ul li::after {
		left: 4.63392vw;
		width: 39.071362vw;
	}

	.business ul li:first-child figure img {
		width: 22.242818vw;
		max-width: 120px;
	}
	.business ul li:last-child figure img {
		width: 42.261354vw;
		max-width: 228px;
	}
	.business ul li p {
		margin-top: 3.255208vw;
		font-size: 1.2rem;
		font-size: clamp(1.2rem, (100vw - 375px) * 4 / 393 + 12px, 1.6rem);
	}

}