/*------------------------------------------------------------------------------
  PC or ALL 
------------------------------------------------------------------------------*/
.header-nav{
	.en{
		font-family: "Zen Kaku Gothic New", serif;
		font-weight: 700;
		font-style: normal;
		letter-spacing: 0.08em;
	}
}
.mainvisual{
	padding-left: calc((32 / 192) * 100vw);
	.mainvisual-catch{
		color: #009e40;
		font-size: 4.6rem;
		font-weight: 700;
		.sub-text{
			margin-top: calc((5 / 192) * 100vw);
			ul{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: calc((1 / 192) * 100vw);
				li{
					width: calc((20 / 192) * 100vw);
				}
			}
		}
	}
	.swiper-slide{
		img{
			-webkit-border-top-left-radius: calc((5 / 192) * 100vw);
			-webkit-border-top-right-radius: 0;
			-webkit-border-bottom-right-radius: 0;
			-webkit-border-bottom-left-radius: calc((5 / 192) * 100vw);
			-moz-border-radius-topleft: calc((5 / 192) * 100vw);
			-moz-border-radius-topright: 0;
			-moz-border-radius-bottomright: 0;
			-moz-border-radius-bottomleft: calc((5 / 192) * 100vw);
		}
	}
}

.title-type02, .title-type04 {
	.en{
		color: #009e40;
		font-size: 4.2rem;
	}
	.ja{
		font-size: 1.8rem !important;
		opacity: 1 !important;
	}
	&::before{
		display: none;
	}
}
.main-blog{
	margin-bottom: 110px;
	.title-type04 {
		padding-top: 135px;
		&::before{
			display: block;
			content: "";
			bottom: auto;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
			width: 133px;
			height: 101px;
			background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-blog-illust.png) no-repeat center center / cover;
		}
	}
	.blog-type01{
		ul{
			li{
				.image{
					img{
						-webkit-border-radius: 8px;
						-moz-border-radius: 8px;
						border-radius: 8px;
					}
				}
				.text{
					.date{
						color: #009e40;
					}
				}
			}
		}
	}
	.btn{
		a{
			color: #009e40;
		}
	}
}

.main-about{
	margin-bottom: 0;
	.image{
		margin: 0 auto;
		max-width: 1124px;
		position: relative;
		z-index: 10;
	}
	.text{
		margin: -100px  auto 0;
		padding: 50px 40px 120px;
		max-width: 1000px;
		background: #009e40;
		position: relative;
		z-index: 20;
		-webkit-border-top-left-radius: 20px;
		-webkit-border-top-right-radius: 20px;
		-webkit-border-bottom-right-radius: 0;
		-webkit-border-bottom-left-radius: 0;
		-moz-border-radius-topleft: 20px;
		-moz-border-radius-topright: 20px;
		-moz-border-radius-bottomright: 0;
		-moz-border-radius-bottomleft: 0;
		.box-h3{
			position: relative;
			height: 50px;
			line-height: 50px;
			display: inline-block;
			font-size: 4.2rem;
			&::before,
			&::after{
				display: block;
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				width: 50px;
				height: 50px;
			}
			&::before{
				left: -80px;
				background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-about-illust01.png) no-repeat center center / cover;
			}
			&::after{
				right: -80px;
				background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-about-illust02.png) no-repeat center center / cover;
			}
		}
		.copy{
			font-size: 1.8rem;
			margin-bottom: 3.0em;
		}
	}
	&::before{
		display: block;
		content: '';
		position: absolute;
		top: 246px;
		right: 0;
		left: 0;
		bottom: 0;
		background: #009e40;
	}
}

.main-strength{
	padding: 60px 0 120px;
	background: #fffde3;
	.title-type04{
		padding-top: 80px;
		&::before{
			display: block;
			content: "";
			bottom: auto;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
			width: 50px;
			height: 50px;
			background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-strength-illust01.png) no-repeat center center / cover;
		}
	}
	.box.row.row-2{
		margin: 0 auto 90px;
		max-width: 1124px;
	}
	.lead-type01{
		margin: 0 auto;
		max-width: 1124px;
		.texts{
			display: flex;
			justify-content: space-between;
			gap: 120px;
			.copy{
				-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
				color: #009e40;
				font-size: 3.6rem;
				position: relative;
				text-align: left;
				display: inline-block;
				margin: 0;
				height: 375px;
				&::before{
					display: block;
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 117px;
					height: 99px;
					background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-strength-illust02.png) no-repeat center center / cover;
				}
			}
			.text{
				text-align: left;
				line-height: 1.8;
			}
		}
	}
}

.main-service{
	.title-type04{
		padding-top: 80px;
		&::before{
			display: block;
			content: "";
			bottom: auto;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
			width: 50px;
			height: 50px;
			background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-service-illust.png) no-repeat center center / cover;
		}
	}
	.banner-type02{
		margin-bottom: 40px;
		ul{
			li{
				-webkit-border-radius: calc((2 / 192) * 100vw);
				-moz-border-radius: calc((2 / 192) * 100vw);
				border-radius: calc((2 / 192) * 100vw);
				overflow: hidden;
				.text{
					h3{
						text-align: center;
						font-size: 3.2rem;
					}
					.btn{
						a{
							background: #ffd800;
							color: #009e40;
						}
					}
				}
			}
		}
	}
}

.main-reviews{
	.image-bg-type02{
		.image{
			position: relative;
		}
		.text{
			margin: -100px auto 0;
			max-width: 740px;
			padding: 40px 60px;
			background: #fff;
			position: relative;
			z-index: 10;
			-webkit-border-top-left-radius: 20px;
			-webkit-border-top-right-radius: 20px;
			-webkit-border-bottom-right-radius: 0;
			-webkit-border-bottom-left-radius: 0;
			-moz-border-radius-topleft: 20px;
			-moz-border-radius-topright: 20px;
			-moz-border-radius-bottomright: 0;
			-moz-border-radius-bottomleft: 0;
			text-align: left;
			background: #fff url(/mwp/wp-content/themes/mwp-theme/assets/images/main-reviews-illust.png) no-repeat top 40px right 50px;
			h3{
				color: #009e40;
				font-size: 3.2rem;
			}
			.copy{
				color: #333;
				font-size: 4.8rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap :15px;
			}
			p{
				color: #333;
				font-size: 1.6rem;
				font-weight: 400;
			}
			.btn{
				text-align: center;
				a{
					color: #009e40;
				}
			}
		}
	}
}

.main-banner{
	margin-bottom: 130px;
	ul{
		li{
			.image{
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
				overflow: hidden;
			}
			.text{
				a{
					padding: 110px 50px;
					.en{
						color: #009e40;
						font-size: 3.6rem;
					}
					.ja{
						color: #333;
						font-size: 1.8rem;
					}
				}
			}
		}
	}
}

.main-works{
	padding: 60px 13px;
	position: relative;
	&::before{
		display: block;
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: calc((42 / 192) * 100vw);
		background: #009e40;
	}
	.title-type04{
		position: relative;
		z-index: 10;
		padding-top: 64px;
		h2{
			.en,.ja{
				color: #fff;
			}
		}
		&::before{
			display: block;
			content: "";
			bottom: auto;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
			width: 50px;
			height: 50px;
			background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-works-illust.png) no-repeat center center / cover;
		}
	}
	.blog-type04{
		position: relative;
		z-index: 10;
		.image{
			img{
				-webkit-border-radius: calc((1 / 192) * 100vw);
				-moz-border-radius: calc((1 / 192) * 100vw);
				border-radius: calc((1 / 192) * 100vw);
			}
		}
		.box-h3{
			font-size: 3rem !important;
			margin-bottom: .5em !important;
		}
		.caption{
			font-size: 2.2rem;
			font-weight: 700;
			margin-bottom: 1.0em;
			&:empty{
				display: none;
			}
		}
		.btn{
			text-align: center;
			a{
				color: #009e40;
			}
		}
	}
}

.main-greeting{
	padding: 120px 0 80px;
	background: #fffde3;
	.title-type04{
		&::before{
			display: block;
			content: "";
			bottom: auto;
			left: 50%;
			transform: translateX(-50%);
			top: -160px;
			width: 137px;
			height: 128px;
			background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-greeting-illust.png) no-repeat center center / cover;
		}
	}
	.image-text-type03 {
		margin: 0 aito;
		max-width: 1124px;
		padding: 15px 15px 15px 50px;
		background: #fff;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		justify-content: space-between;
		.image{
			width: 450px;
			height: 450px;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}
		.text{
			text-align: left;
			width: 570px;
			margin: 0 !important;
			padding: 40px 0 0 !important;
			h3{
				max-width: unset;
				color: #009e40;
				font-size: 3.2rem;
			}
			p{
				max-width: unset;
			}
			.btn{
				max-width: unset;
				a{
					color: #009e40;
				}
			}
			&::before{
				display: none;
			}
		}
	}
}


.main-news{
	.title-type04{
		padding-top: 80px;
		&::before{
			display: block;
			content: "";
			bottom: auto;
			left: 50%;
			transform: translateX(-50%);
			top: 0;
			width: 50px;
			height: 50px;
			background: url(/mwp/wp-content/themes/mwp-theme/assets/images/main-news-illust.png) no-repeat center center / cover;
		}
	}
	.btn{
		max-width: unset;
		a{
			color: #009e40;
		}
	}
}

.footer-contact{
	margin-bottom: 0;
	color: #333;
	.title{
		.en{
			color: #009e40;
			font-size: 4.2rem;
		}
		.ja{
			color: #333;
			font-size: 1.8rem;
		}
	}
	.tel,.datetime{
		color: #333;
	}
	.btn{
		max-width: unset;
		a{
			color: #009e40;
		}
	}
}

.footer-area{
	background: #009e40;
	height: 250px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.footer{
	background: #fffde3;
	.logo{
		width: auto;
	}
}
.fixed-footer{
	background: #009e40;
	color: #fff;
	.contact{
		a{
			background: #ffd800;
			color: #009e40;
			&::before{
				color: #fff;
			}
		}
	}
}

.fixed-footer .tel a:before{
	color: #efdb02;
}

.page-title{
	background: #009e40;
	h1{
		color: #fff;
	}
}

/* 20241121 added by Fabo */
.mt-s { margin-top: 4vh !important;}
.mt-m { margin-top: 7vh !important;}
.mt-l { margin-top: 10vh !important;}

.mb-s { margin-bottom: 4vh !important;}
.mb-m { margin-bottom: 7vh !important;}
.mb-l { margin-bottom: 10vh !important;}

.mt-0 { margin-top: 0 !important;}
.mb-0 { margin-bottom: 0 !important;}

.page-content h2:not([class]),
.page-content h3:not([class]),
.page-content h4:not([class]) {
margin-bottom: 3vh;
}

.box-color {
    margin: 0 0 6vh;
    padding: 35px;
    background: #e2e8e4;
}
.box-color :first-child {
    margin-top: 0 !important;
}
.box-color :last-child {
    margin-bottom: 0 !important;
}

.align-center {
    text-align: center;
}

.btn-color {
  color: #009e40 !important;
}
/*------------------------------------------------------------------------------
  TABLET and SHONE
------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
.mainvisual{
	padding: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	.mainvisual-catch {
		.sub-text{
			ul{
				justify-content: center;
				li{
					width: 30vw;
				}
			}
		}
	}

}
.main-strength{
	padding: 6vw 4vw;
	.lead-type01{
		.texts{
			gap: 6vw;
		}
	}
}
.main-reviews {
	.image-bg-type02 {
		.text{
			max-width: 80vw;
			padding: 4vw;
			background: #fff url(/mwp/wp-content/themes/mwp-theme/assets/images/main-reviews-illust.png) no-repeat top 25vw right 0;
			-webkit-background-size: 15.75vw 26.85vw;
			background-size: 15.75vw 26.85vw;
			h3{
				font-size: 6vw;
			}
			.copy{
				font-size: 6vw;
				img{
					width: 40vw;
				}
			}
		}
	}
}
.main-service{
	.banner-type02{
		ul{
			li{
				-webkit-border-radius: 4vw;
				-moz-border-radius: 4vw;
				border-radius: 4vw;
			}
		}
	}
}

.main-works{
	&::before{
		height: 90vw;
	}
}
.main-greeting {
	.image-text-type03{
		padding: 4vw;
		.image,
		.text{
			width: 100% !important;
		}
	}
}

.footer-area{
	padding: 6vw 4vw;
}

/*------------------------------------------------------------------------------
  TABLET ONLY
------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
}

/*------------------------------------------------------------------------------
  SPHONE ONLY
------------------------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}