/*
Theme Name: la fontaine

color
#ddd
#e73828 red
#73a726 green
#0095FF blue
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
*{
	margin: 0px;
	padding: 0px;
}
html{
	min-height: 100%;
	font-size: 16px;
}

body {
	-webkit-text-size-adjust: 100%;
	color: #444;
	width: 100%
	min-width: 100%;
	height: 100%;
	min-height: 100vh;
	font-family: 'Noto Serif JP', serif, "游明朝", -apple-system, BlinkMacSystemFont;
	margin: 0 auto;
	position: relative;
}
h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,form,blockquote,pre,address {
	margin : 0;
	padding : 0;
}
ul,ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
a {
	color: #444;
	text-decoration: none;
}
a:hover img {
	filter: opacity(75%);
}

.free {
	color: #e73828;
	font-weight: normal;
}
.clear {
	clear: both;
}
.hl {
	font-weight: bold;
}
	.link_box {
		text-align: center;
		width: 300px;
		margin: 0 auto;
	}
		.link_box a {
			display: block;
			width: 300px;
			height: 60px;
			line-height: 60px;
			vertical-align: middle;
			margin: 40px auto;
			color: #333;
			padding: 4px;
			border-top: solid 1px #444;
			border-bottom: solid 1px #444;
		}
		.link_box a:hover {
			background: rgba(17, 17, 17, 0.2);
		}


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

@media (min-width: 768px) {
	body {
	}
	h1 {
		font-size: 42px;
		font-weight: bold;
		margin: 0;
		text-align: center;
		color: #221c11;
	}
	p {
		font-size: 18px;
		line-height: 180%;
	}
	span.button {
		display: block;
		position: absolute;
		bottom: 4px;
		right: 14px;
		padding: 4px 10px 4px 10px;
		text-align: center;
		background: #f8f8f8;
		color: #333;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.1),1px 1px 1px rgba(255,255,255,1);
		-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.1),1px 1px 1px rgba(255,255,255,1);
		transition: all 0.4s;
	}
	span.button:after {
		text-align: right;
		content: ' »';
	}
	span.button:hover {
		background: #ddd;
	}

	#contactus {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 5;
		opacity: 0.95;
		height: 60px;
		background: #333;
	}
		#contactus ul {
			font-size: 0;
		}
		#contactus li {
			float: left;
		}
			#contactus li a {
				display: block;
				height: 60px;
				line-height: 60px;
				vertical-align: middle;
			}
			#contactus li.tel_box {
				display: none;
			}
			#contactus li.tel_box a {
				pointer-events: none;
				cursor: default;
				text-decoration:none;
			}
			#contactus li.tel_box img {
				height: 60px;
				vertical-align: middle;
			}
			#contactus .contact a, #contactus #backtotop a {
				width: 60px;
				height: 60px;
			}
				#contactus .contact a img, #contactus #backtotop a img {
					width: 60px;
					height: 60px;
				}


	header {
		display: block;
		min-width: 1080px;
		height: 80px;
		margin: 0 auto;
		position: relative;
	}
		#menu_btn {
			display: none;
		}
	header #header_left {
		position: relative;
		width: 160px;
		height: 80px;
		margin-left: 10px;
		overflow: hidden;
	}
		header #header_left #logo {
			position: absolute;
			top: 10px;
			width: 120px;
			height: 60px;
		}
		header #header_left #logo a {
			display: block;
			width: 120px;
			height: 60px;
			font-size: 14px;
			text-indent: -100em;
			text-align: center;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			background-image: url(./images/hd_logo2.png);
		}
	header #header_menu {
		position: absolute;
		top: 0;
		right: 0px;
	}
		header #header_menu .menu {
			margin: 0;
		}
		header #header_menu .menu ul {
			margin: 0;
			width: 100%;
			height: 80px;
			overflow: hidden;
			font-size: 0;
		}
		header #header_menu .menu ul li {
			min-width: 80px;
			height: 80px;
			display: inline-block;
			vertical-align: top;
			font-size: 14px;
		}
		header #header_menu .menu ul li.common a {
			display: block;
			line-height: 80px;
			padding: 0 20px;
			vertical-align: middle;
			text-align: center;
			transition: all 0.4s;
		}
		header #header_menu .menu ul li a:hover {
			background: rgba(200, 200, 200, 0.3);
		}

/* footer */
	footer {
		width: 100%;
		border-top: solid 0px #ddd;
		margin-top: 80px;
		padding-bottom: 120px;
		font-size: 14px;
		background-color: #f8f8f8;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#footer {
		margin: 0 auto 0 auto;
		width: 1080px;
		padding-top: 20px;
	}
	#footer div {
		vertical-align: top;
	}
	#footer_content {
		display: inline-block;
		width: 100%;
		background: url("./images/hd_logo2.png") no-repeat;
		background-position: center 20px;
		background-size: 20vw;
		padding-top: 120px;
		padding-left: 0px;
		font-size: 18px;
	}
		#footer_content dl#footer_prof {
			width: 540px;
			margin: 0 auto;
		}
			#footer_content dl#footer_prof dt {
			}
			#footer_content dl#footer_prof dd {
				margin-bottom: 1em;
			}
		#footer_content .tel_box {
				display: none !important;
			}
			#footer_content h2 {
				margin: 40px 0;
				text-align: center;
			}
			#footer_content h3 {
				font-size: 22px;
				margin: 20px 0 10px 0;
				text-align: center;
			}
			#footer_content p {
				font-size: 18px;
				margin: 0;
				text-align: center;
			}
		#footer_bottom {
			width: 1080px;
			margin-top: 20px;
			font-size: 12px;
			text-align: center;
		}

		#footer #map {
			width: 100%;
			height: 420px;
			margin: 40px auto;
			font-size: 0;
		}
.footer_bottom {
		width: 100%;
	}
	.footer_bottom .copyright {
		width: 1080px;
		margin: 0 auto;
		text-align: center;
		font-size: 12px;
		color: #fff;
		padding: 20px 0;
	}

	main {
		margin: 0 auto;
	}
	.link_arrow {
		margin: 40px auto;
		width: 30%;
		text-align: center;
	}
		.link_arrow a {
			display: block;
			width: 100%;
			background-image: url(images/arrow_bk.png);
			background-repeat: no-repeat;
			background-size: 60px;
			background-position: center top;
			padding-top: 64px;
				transition: all 0.4s;
		}
		.link_arrow a:hover {
			transform: scale(1.1);
		}


	.contactbox {
		width: 100%;
		height: 270px;
		background-image: url(images/contactbox_bg.png);
		background-position: left center;
		background-repeat: no-repeat;
		background-color: #ddd;
		position: relative;
		margin-bottom: 80px;
	}
		.contactbox ul {
			width: 810px;
			overflow: hidden;
			position: absolute;
			right: 10px;
			bottom: 10px;
		}
			.contactbox ul li {
				width: 270px;
				height: auto;
				float: left;
				overflow: hidden;
			}
				.contactbox ul li a {
					width: 100%;
					display: block;
					transition: all 0.4s;
				}
				.contactbox li a:hover {
					transform: scale(1.08);
					z-index: +1;
				}
				.contactbox ul li img {
					width: 270px;
					height: auto;
					border: 0;
					vertical-align: bottom;
					filter: none;
				}
	main {
		width: 1160px;
		min-width: 1160px;
	}
	section {
		margin-bottom: 40px;
	}
		section h1 {
			margin: 1em 0;
			padding: 0;
			text-align: center;
			font-size: 42px;
			font-weight: normal;
		}
	
/*
*/
}
/****************************************************************/
@media (max-width: 767px) {
	body {
		width: 100%;
		position: relative;
	}
	h1 {
		font-weight: bold;
		margin: 1em 0;
		text-align: center;
		color: #221c11;
	}
	p {
		font-size: 18px;
		line-height: 180%;
	}
	span.button {
		display: block;
		position: absolute;
		bottom: 4px;
		right: 14px;
		padding: 4px 10px 4px 10px;
		text-align: center;
		background: #f8f8f8;
		color: #333;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		-moz-box-shadow: -1px -1px 1px rgba(000,000,000,0.1),1px 1px 1px rgba(255,255,255,1);
		-webkit-box-shadow: -1px -1px 1px rgba(000,000,000,0.1),1px 1px 1px rgba(255,255,255,1);
		transition: all 0.4s;
	}
	span.button:after {
		text-align: right;
		content: ' »';
	}
	span.button:hover {
		background: #ddd;
	}


	header {
		width: 100vw;
		height: 60px;
		z-index: 10;
		background: rgba(255, 255, 255, 0.6);
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		overflow: visible;
	}
		#menu_btn {
			display: block;
		}
	header #header_left {
		position: relative;
		width: 240px;
		height: 60px;
		margin-left: 0;
		overflow: hidden;
	}
		header #header_logo {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 240px;
			height: 60px;
			padding: 0;
			z-index: 11;
		}
			header #logo a {
				display: block;
				width: 240px;
				height: 60px;
				font-size: 14px;
				text-indent: -100em;
				text-align: center;
				background-repeat: no-repeat;
				background-position: left top;
				background-size: 120px;
				background-image: url(./images/hd_logo2.png);
			}
		header #menu_btn {
			display: block;
			position: absolute;
			top: 5px;
			right: 5px;
			z-index: 11;
		}
		header #header_menu {
			display: none;
			position: fixed;
			top: 60px;
			left: 0;
			bottom: 0;
			right: 0;
			overflow-y: scroll;
			width: 100%;
			max-width: 100%;
			z-index: 11;
			-webkit-overflow-scrolling: touch;
			padding-top: constant(safe-area-inset-top);
			padding-right: constant(safe-area-inset-right);
			padding-bottom: constant(safe-area-inset-bottom);
			padding-left: constant(safe-area-inset-left);
			background: rgba(0, 0, 0, 0.8);
		}
				header #header_menu ul {
					position: relative;
					width: 100%;
					margin-left: 10px;
					margin-bottom: 160px;
				}
				header #menu li {
					border-bottom: solid 1px #888;
				}
				header #header_menu li>a {
					display: block;
					color: #fff;
					padding: 10px 20px;
					font-size: 16px;
				}
				header #header_menu>li>a:hover {
					height: 100%;
					background: #333;
				}
				header #header_menu .menu ul li.contact {
					float: left;
					padding: 10px 0;
				}
				header #header_menu li.contact>a {
					padding: 20px 0;
				}
/* footer */
	footer {
		width: 100%;
		border-top: solid 0px #eee;
		margin-top: 0;
		padding-bottom: 90px;
		font-size: 18px;
		background-size: cover;
		background-repeat: repeat;
	}
	#footer {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-top: 40px;
	}
	#footer div {
		vertical-align: top;
	}
	#footer_content {
		background: url("./images/hd_logo2.png") no-repeat;
		background-position: center 20px;
		background-size: 40vw;
		padding-top: 30vw;
	}
		#footer_content h2 {
			margin: 40px 0 20px 0;
			text-align: center;
		}
		#footer_content ul#footer_menu {
			margin: 0;
			padding-left: 4vw;
		}
		#footer_content ul#footer_menu li {
			margin: 1vw 0;
		}
		#footer_content ul#footer_prof {
			width: 80vw;
			margin: 0 auto;
		}
			#footer_content ul#footer_prof li {
				margin-bottom: 1em;
			}
			#footer_content h3 {
			font-size: 22px;
			margin: 4vw 0 2vw 0;
			text-align: center;
		}
			#footer_content p {
				font-size: 18px;
				margin: 0;
				text-align: center;
			}
		#footer_bottom {
			width: 100%;
			margin-top: 20px;
			font-size: 12px;
			text-align: center;
		}
		#footer #map {
			width: 100%;
			height: 100vw;
			margin: 40px auto;
			font-size: 0;
		}

		.footer_bottom {
			width: 100%;
		}
		.footer_bottom .copyright {
			margin: 0 auto;
			text-align: center;
			font-size: 12px;
			padding: 20px 0;
		}
	#contactus {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.5);
		padding: 0;
		height: 60px;
	}
			#contactus ul {
				position: absolute;
				right: 0;
			}
			#contactus li {
				width: auto;
				vertical-align: top;
				float: left;
			}
			#contactus .tel_box a {
				display: block;
				height: 60px;
				padding-right: 20px;
			}
				#contactus .tel_box a img {
					width: 200px !important;
					height: 40px !important;
					margin: 10px 0;
				}
			#contactus .contact a, #contactus #backtotop a {
				display: block;
				width: 60px;
				height: 60px;
			}
				#contactus .contact a img, #contactus #backtotop a img {
					width: 60px;
					height: 60px;
				}


	main {
		width: 100vw;
		margin: auto;
	}
	.link_arrow {
		text-align: center;
		margin: 5vw 0;
	}
		.link_arrow a {
			display: block;
			background-image: url(images/arrow_bk.png);
			background-repeat: no-repeat;
			background-size: 10vw;
			background-position: center top;
			padding-top: 11vw;
			transition: all 0.4s;
		}
		.link_arrow a:hover {
			transform: scale(1.1);
		}



	.contactbox {
		width: 100%;
		height: 45vw;
		background-image: url(images/contactbox_bg.png);
		background-position: left 20px top 10px;
		background-size: 90%;
		background-repeat: no-repeat;
		background-color: #ddd;
		position: relative;
		margin-bottom: 80px;
	}
		.contactbox ul {
			width: 90vw;
			overflow: hidden;
			position: absolute;
			right: 5vw;
			bottom: 2vw;
		}
			.contactbox ul li {
				width: 30vw;
				height: auto;
				float: left;
				overflow: hidden;
			}
				.contactbox ul li a {
					width: 100%;
					display: block;
					transition: all 0.4s;
				}
				.contactbox li a:hover {
					transform: scale(1.08);
					z-index: +1;
				}
				.contactbox ul li img {
					width: 30vw;
					height: auto;
					border: 0;
					vertical-align: bottom;
					filter: none;
				}

	section {
		margin-bottom: 20vw;
	}
		section h1 {
			padding: 0 0 3vw 0;
			text-align: center;
		}
}