@charset "utf-8";
/* =========================================================================================
Layout
=========================================================================================*/
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
MAIN VISUAL
=========================================================================================*/
.main-visual {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin-top: 115px;
}
.main-visual .swiper-wrapper {
	aspect-ratio:3780/1800;
	max-width:100%;
}
.main-visual .swiper-slide img{width:100%;height:100%;object-fit:contain;display:block;}

.main-visual::before {
	content: "";
	width: 100%;
	max-width: 50vw;
	height: 100%;
	background: url(../images/main_visual_flower.webp) no-repeat left / cover;
	position: absolute;
	top: 40%;
	right: 0;
	translate: 0 -50%;
	z-index: 2;
}
.main-visual .inner {
	width: fit-content;
	position: absolute;
	z-index: 10;
	right: 3%;
	top: 30%;
}
.main-visual .inner .catchphrase {
	color: #343434;
	font-size: clamp(0.875rem, calc(-0.115rem + 3.383vw), 2rem); /* min: 14px, max: 32px */;
	font-weight: var(--weight-bold);
	line-height: 1.6;
	width: fit-content;
	padding: 40px 60px 40px 40px;
	position: relative;
	z-index: 5;
}
.main-visual .inner .catchphrase::before {
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: -1;
	-ms-filter: blur(30px);
	filter: blur(30px);
	opacity: 0.9;
}
.swiper-button-next,
.swiper-button-prev {
	cursor: pointer;
	color: var(--color-main)!important;
	background-color: rgba(255, 255, 255, 0.9);
	width: 50px!important;
	height: 50px!important;
	border-radius: 100px;
}
.swiper-button-prev::after {
	margin-right: 5px!important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
	font-size: 22px !important;
	font-weight: var(--weight-bold);
}
.swiper-pagination-bullet {
  border-radius: 10px!important;
  width: 8px!important;
  height: 8px!important;
  background-color: var(--color-main)!important;
  opacity: 0.3!important;
  outline: unset!important;
  margin: 0 8px!important;
}
.swiper-pagination-bullet-active {
  background: var(--color-main)!important;
  opacity: 1!important
}
@media only screen and (max-width: 1200px) {
	.main-visual .inner {
}
	.main-visual {
		margin-top: 85px;
	}
}
@media only screen and (max-width: 820px) {
	.swiper-button-next,
	.swiper-button-prev {
		width: 30px !important;
		height: 30px !important;
	}
	.swiper-button-next::after,
	.swiper-button-prev::after {
		font-size: 15px !important;
	}
	.swiper-button-prev::after {
		margin-right: 2px!important;
	}
	.swiper-button-next::after {
		margin-left: 2px!important;
	}
	.main-visual::before {
		display: none;
	}
	.swiper-pagination {
		display: none;

	}
	.main-visual .inner .catchphrase {
		padding: 20px 0px 20px 40px;
	}

	.main-visual .inner .catchphrase::before {}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Contact
=========================================================================================*/
section.contact {
	background: var(--color-gray);
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Service
=========================================================================================*/
section.service .inner > p {
	width: 100%;
	text-align: center;
	margin-inline: auto;
	margin-bottom: 2.5em;
}
section.service .box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px 3.5%;
}
section.service .item {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 3px solid var(--color-main);
	border-radius: 10px;
	padding: 0;
}
section.service .item h3 {
	font-size: clamp(1.25rem, calc(1.039rem + 0.899vw), 1.5rem); /* min: 20px, max: 24px */
	text-align: center;
	line-height: 1.3;
	min-height: 75px;
	border-radius: 10px 10px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent);
	padding: 0.75em 1em 0.75em 80px;
	position: relative;
}
section.service .item h3::before {
	content: "";
	width: 80px;
	aspect-ratio: 1 / 1;
	border-radius: 0 0 40px 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
section.service .item.system h3::before {
	background: var(--color-main) url(../images/common/navi_icon_system.svg) no-repeat top 40% left 50% / 55%;
}
section.service .item.service h3::before {
	background: var(--color-main) url(../images/common/navi_icon_service.svg) no-repeat top 50% left 45% / 60%;
}
section.service .item.other h3::before {
	background: var(--color-main) url(../images/common/navi_icon_other.svg) no-repeat top 40% left 45% / 62%;
}
section.service .item .text {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 25px 30px;
}
section.service .item .text li {
	border-bottom: 1px dashed var(--color-main);
	padding-bottom: 0.5em;
	margin-block: 0.5em;
}
@media only screen and (max-width: 820px) {
	section.service .inner>p {
		text-align: left;
	}
}
@media only screen and (max-width: 468px) {
	section.service .box {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
}

/* =========================================================================================
About
=========================================================================================*/
section.about {
	background: url(../images/about_bg.webp) no-repeat center / cover;
}
section.about .inner {
	max-width: var(--contents-width-small);
}
section.about h2 {
	font-size: clamp(1.75rem, calc(1.118rem + 2.697vw), 2.5rem); /* min: 28px, max: 40px */
	font-weight: var(--weight-bold);
	text-align: center;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 1em;
}
section.about h2 .sub {
	font-size: 1rem;
	font-weight: var(--weight-normal);
}
section.about p {
	margin-bottom: 1.5em;
}
section.about .btn {
	width: 100%;
	padding-block: 1em;
}
@media only screen and (max-width: 820px) {
	section.about {
		background-position: top 50% left 65%;
	}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Inquiry
=========================================================================================*/
section.inquiry {
	background: var(--color-gray);
	margin: 100px 0;
}
section.inquiry .inner {
	max-width: var(--contents-width-small);
}
section.inquiry .inner > p {
	width: 100%;
	text-align: center;
	margin-inline: auto;
	margin-bottom: 2.5em;
}
@media only screen and (max-width: 820px) {
	section.inquiry .inner > p {
		text-align: left;
	}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
News
=========================================================================================*/
section.news {
	padding-bottom: 150px;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}