@charset "UTF-8";
/*
	BASE
*******************************/

* {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	font-feature-settings: "palt";
	line-height:1;
}

.font_min {
	font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

html {
	font-size:62.5%;
	line-height:1;
	body {
		font-size:1.6rem;
		font-weight:500;
		img {
			-webkit-backface-visibility: hidden;
			vertical-align:bottom;
			line-height:0;
			max-width: 100%;
			height: auto;
		}
		p,th,td,dt,dd,li,h1,h2,h3,h4,h5,h6,label {
			color:#333333;
		}
		a {
			color:#333333;
			text-decoration:none;
			outline:none;
			border:none;
			img {
				outline:none;
				border:none;
				-webkit-backface-visibility: hidden;
			}
		}
		area {
			border:none;
			outline:none;
		}
		.clear { clear:both;}
	} 
}

:root {
	--color_def: #333333;
	--color_main: #00A454;
	--color_main_f: brightness(0) saturate(100%) invert(35%) sepia(54%) saturate(4747%) hue-rotate(138deg) brightness(101%) contrast(103%);
	--color_sub: #B22A52;
	--color_sub_f: brightness(0) saturate(100%) invert(28%) sepia(23%) saturate(5705%) hue-rotate(318deg) brightness(80%) contrast(92%);
	--color_white: #FFFFFF;
	--color_bg1: #F8FFFB;
	--color_bg2: #FEEDF2;
	--color_bg3: #F6F1EA;
	--color_bg4: #FFF9F4;
}


.fancybox__backdrop {
	background:rgba(255,255,255,.8);
}
#modal_contact,
#modal_contact2 {
	display:none;
	padding:40px 80px;
	border-radius:15px;
	background: url(../img/common/modal_bg.jpg) no-repeat center center/cover;
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	.is-close-button {
		top: 10px;
		right:10px;
		svg {
			color: var(--color_sub);
		}
	}
	dl {
		width:min(90vw,500px);
		text-align:center;
		dt {
			font-size:2.8rem;
			font-weight:400;
			border-bottom:1px solid #333333;
			padding-bottom:.75em;
			margin-bottom:.75em;
			letter-spacing:.05em;
		}
		dd {
			text-align:center;
			font-size:1.8rem;
			p {
				font-weight:400;
				margin-bottom:1.5em;
				letter-spacing:.05em;
			}
			a {
				display:grid;
				justify-items:center;
				grid-row-gap:.8em;
				letter-spacing:.1em;
				border:1px solid var(--color_sub);
				background-color:#FEEDF2;
				border-radius:.5em;
				padding:1em;
				max-width:420px;
				margin:0 auto;
				span {
					font-family:inherit;
					font-size:2.8rem;
					display:grid;
					grid-template-columns:.66em auto;
					grid-column-gap:.5em;
					align-items:center;
					span {
						font:inherit;
					}
				}
			}
		}
	}
}

.fixbnr {
	background-color:var(--color_sub);
	position:sticky;
	left:0;
	bottom:0;
	display:grid;
	grid-template-columns:repeat(2,auto);
	align-items:center;
	justify-content:center;
	padding:10px;
	grid-column-gap:80px;
	.tel {
		display:grid;
		grid-template-columns:.75em auto;
		align-items:center;
		justify-items:center;
		grid-column-gap:.2em;
		grid-row-gap:.33em;
		color:var(--color_white);
		font-size:3.0rem;
		letter-spacing:.033em;
		span {
			font-size:1.6rem;
			grid-area:2/1/3/3;
		}
	}
	.mail {
		font-size:2.0rem;
		letter-spacing:.03em;
		background-color:var(--color_main);
		display:grid;
		grid-template-columns:1.1em auto .55em;
		grid-column-gap:.5em;
		align-items:center;
		color:var(--color_white);
		height:2.2em;
		padding:0 1.5em;
		border-radius:6px;
		box-shadow:0 2px 4px rgba(0,0,0,.5);
		border:1px solid var(--color_main);
		&::after {
			content:'';
			aspect-ratio:1;
			border-right:2px solid var(--color_white);
			border-bottom:2px solid var(--color_white);
			transform:rotate(-45deg);
		}
	}
}


/*//////////////////////////////////////////////////////////////////////////*/

/*
	BASE LAYOUT
******************/

.wrap {
	.contents {
		max-width:1140px;
		width: calc(100% - 60px);
		margin:0 auto;
		.ttl_h2 {
			font-size:4.0rem;
			font-weight:500;
			text-align:center;
			line-height:1.5;
			margin-bottom:.33em;
			span {
				font-size:1.3em;
				font-family:inherit;
				font-weight:600;
			}
			& + p {
				text-align:center;
				font-size:1.8rem;
				line-height:1.8;
				margin-bottom:3em;
			}
		}
		p {
			font-size: 1.6rem;
			line-height: 2.2;
		}
		.green {
			color:var(--color_main);
		}
		.red {
			color:var(--color_sub);
		}
	}
}

#contact {
	.wrap {
		padding:100px 0;
		background:url(../img/common/contact_bg.jpg) no-repeat center center/cover;
		.contents {
			.ttl_h2 {
				font-size:min(3.2vw,4.0rem);
				font-weight:500;
				text-align:center;
				line-height:1.5;
				margin-bottom:1em;
				span {
					font-size:1.3em;
					font-family:inherit;
					font-weight:600;
				}
			}
			.contents_inner {
				background:url(../img/common/contact_bg2.jpg) no-repeat center center/cover;
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:5%;
				padding:70px 70px 40px;
				border-radius:15px;
				box-shadow:0 4px 25px rgba(0,0,0,.2);
				li {
					a {
						display:grid;
						background-color:var(--color_white);
						align-content:start;
						overflow:hidden;
						border-radius:10px;
						height:100%;
						box-shadow:0 4px 15px rgba(0,0,0,.15);
						.img {
							overflow: hidden;
							img {
								display:block;
							}
						}
						.detail {
							padding:1.5em;
							h3 {
								font-size:2.0rem;
								margin-bottom:.66em;
								
							}
							.item {
								display:grid;
								grid-template-columns:auto 2.2em;
								align-items:center;
								grid-row-gap:.3em;
								p {
									line-height:1.5;
									color:#777777;
									&.tel {
										display:flex;
										flex-wrap:wrap;
										align-items:center;
										img {
											width:.8em;
											margin-right:.33em;
										}
										span {
											font:inherit;
											display:inset-block;
											padding-left:1em;
										}
									}
								}
								&:has(.tel) {
									& > img {
										grid-area:1/2/3/3;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media ( hover:hover) {

	a {
		transition: .3s;
		&:hover {
			text-decoration: none;
			opacity: .75;
		}
	}

	#modal_contact,
	#modal_contact2 {
		dl {
			dd {
				a {
					&:hover {
						opacity: 1;
						filter: brightness(1.2);
					}
				}
			}
		}
	}

	.fixbnr {
		.tel {
			img {
				transition: .3s;
			}
			&:hover {
				opacity: 1;
				color:var(--color_main);
				filter: brightness(1.5);
				img {
					filter: var(--color_main_f);
				}
			}
		}
		.mail {
			&::after,img {
				transition: .3s;
			}
			&:hover {
				opacity: 1;
				background-color: var(--color_bg1);
				color:var(--color_main);
				img {
					filter: var(--color_main_f);
				}
				&::after {
					border-color: var(--color_main);
					transform: translateX(3px) rotate(-45deg);
				}
			}
		}
	}

	#contact {
		.wrap {
			.contents {
				.contents_inner {
					li {
						a {
							.img {
								img {
									transition: .3s;
								}
							}
							.detail {
								.item {
									& > img {
										transition:.3s;
									}
								}
							}
							&:hover {
								opacity: 1;
								background-color: var(--color_bg1);
								box-shadow: 0 4px 25px rgba(0,0,0,.3);
								.img {
									img {
										transform: scale(1.03);
									}
								}
								.detail {
									.item {
										& > img {
											transform: translateX(3px);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}


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

	.wrap {
		.contents {
			width: calc(100% - 50px);
		}
	}


	#contact {
		.wrap {
			.contents {
				.contents_inner {
					padding:40px;
				}
			}
		}
	}
	
}

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

	.wrap {
		.contents {
			width: calc(100% - 40px);
			p {
				font-size: 1.4rem;
				line-height: 1.8;
			}
		}
	}


	#contact {
		.wrap {
			padding:50px 0;
			.contents {
				.ttl_h2 {
					display:grid;
					font-size:min(5.3vw,3.0rem);
				}
				.contents_inner {
					grid-template-columns:1fr;
					grid-row-gap:20px;
					border-radius:10px;
					padding:min(30px,7vw);
					max-width:500px;
					margin:0 auto;
					li {
						a {
							.detail {
								padding:1.0em;
								h3 {
									font-size:1.8rem;
								}
								.item {
									p {
										font-size:min(3.8vw,1.6rem);
									}
								}
							}
						}
					}
				}
			}
		}
	}


	#modal_contact,
	#modal_contact2 {
		padding:40px 30px;
		max-width:90vw;
		dl {
			dt {
				font-size:min(6vw,2.8rem);
			}
			dd {
				font-size:min(4.5vw,1.8rem);letter-spacing:.05em;
				a {
					span {
						font-size:min(7vw,2.8rem);
					}
				}
			}
		}
	}
	
	.fixbnr {
		grid-column-gap:3%;
		.tel {
			font-size:min(6.2vw,3.0rem);
			span {
				font-size:min(4.0vw,1.6rem);
				grid-area:2/1/3/3;
			}
		}
		.mail {
			font-size:min(5vw,2.2rem);
			padding:0 .75em;
		}
	}

}


@media screen and (max-width:1024px) {
    .pcOnly2 {
    	display:none !important;
    }
}
@media screen and (max-width:768px) {
    .pcOnly {
    	display:none !important;
    }
    .tbOnly {
    	display:none !important;
    }
}
@media screen and (min-width:1025px) {
    .tbOnly {
    	display:none !important;
    }
    .sptbOnly {
    	display:none !important;
    }
}
@media screen and (min-width:769px) {
    .spOnly {
    	display:none !important;
    }
}