@charset "utf-8";
/* CSS Document */

.container {
	max-width: 1280px;
	padding: 0 40px;
	margin: auto;
}
a.link {
	color: #FFF;
	font-size: 16px;
	line-height: 1.3;
	background: #005953;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	max-width: 300px;
	/*min-height: 44px;*/
	padding: 0.75em 0; /*ie バグ対応*/
	border-radius: 8px;
	margin: auto;
}
a.tel {
	display: inline-block;
	line-height: 3.2em;
	margin: -1.1em 0;
	position: relative;
	z-index: 1;
}
a.link:hover {
	background: #40827e;
}
header h1 {
	width: 100%;
	overflow: hidden;
}
header h1 img {
	border-radius: 0;
}
header ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
header ul li:first-child {
	margin-right: 1em;
}
header ul li a {
	font-size: 16px;
	line-height: 1.3;
    display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	/*min-height: 44px;*/
	padding: 0.75em 0; /*ie バグ対応*/
}
header ul li a:hover {
	text-decoration: underline;
}
header ul li a:before {
	content: "≫";
}
main {
	padding-bottom: 60px; /*footer fixed のスペース確保*/
}
#preface {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
#preface h2 {
	color: #FFF;
	font-size: 200%;
	line-height: 1.3;
	background: #005953;
	text-align: center;
	width: 100%;
	padding: 0.1em 0.5em;
}
#preface #slide {
	width: 25%;
}
#preface > .text {
	padding-left: 30px;
	flex: 1;
}
#preface .use_car {
	text-align: center;
	margin: 2em 0;
}
#preface .use_car .wrap {
	background-image: url(../img/use_car-bg.png);
	background-size: 100px 100px;
	max-width: 600px;
	padding: 20px 15px;
	margin: auto;
	border: 10px solid rgba(243, 153, 69, 0.25);
}
#preface .use_car h3 {
	color: #f6ae6a;
	font-size: 150%;
	line-height: 1.3;
	margin: -0.15em 0;
}
#preface .use_car p {
	font-size: 125%;
	line-height: 1.5;
	margin: 0.25em 0 -0.25em;
}
#preface aside {
	width: 100%;
	text-align: center;
	background: #ffb6c1;
	padding: 40px;
}
aside strong {
	font-size: 125%;
	line-height: 1.5;
}
aside img.presnt {
	display: inline-block;
	width: 192px;	
}
#preface .visited {
	background-image: url(../img/guide1-bg.png);
	background-size: 100% 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
	webkit-align-items: flex-start;
	align-items: flex-start;
	width: 100%;
	padding: 40px;
}
#preface .visited .text {
	width: 400px;
	margin-right: 40px;
}
#preface .visited .text h4 {
	color: #928178;
	background: #FFF;
	font-size: 200%;
	line-height: 1;
	text-align: center;
    display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	height: 60px;
	border: solid 4px;
	border-radius: 30px;
	position: relative;
}
#preface .visited .text h4,
#preface .visited ol li {
	margin-bottom: 40px;	
}
/* の吹き出し */
#preface .visited .text h4:before,
#preface .visited .text h4:after {
	content: "";
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 20px 15px 0 15px;
	position: absolute;
	right: 0;
	left: 0;
}
#preface .visited .text h4:before {
	border-color: #928178 transparent transparent transparent;	
	bottom: -24px;
}
#preface .visited .text h4:after {
	border-color: #fff transparent transparent transparent;	
	bottom: -17px;
}
#preface .visited .text ol {
	background: url(../img/ol-bk.png) center center repeat-y;
	background-size: 20px 100px;
}
#preface .visited ol li:last-child {
	padding-bottom: 0;
}
#preface .visited ol a {
	color: #FFF;
	font-size: 125%;
	line-height: 1.3;
	background: #928178;
	text-align: center;
	border-radius: 6px;
    display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	/*min-height: 44px;*/
	padding: 0.45em 0.25em;
}
#preface .visited ol a:hover {
	background: #ada09a;
}
#preface .visited #google_map {
	flex: 1;
	order: -1;
	height: 480px;
}
section {
	padding-top: 90px; /* section h3の高さに応じて変更 */
	position: relative;
}
section h3 {
	color: #928178;
	font-size: 200%;
	line-height: 1.3;
	background: url(../img/next-bk.png) left center no-repeat;
    background-size: 120px 120px;
    display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	height: 120px;
	width: 100%;
	padding: 0 0 20px 140px;
	position: absolute;
	top: 0;
	left: 0;
}
section .wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	padding: 40px;
}
section .text {
	width: 71%;
	padding-left: 30px;
}
section .contact {
	background: #fff;
	padding: 30px 20px;
	margin-top: 2em;
}
section p span.caution,
#details p span.caution {
	color: #F00;
	text-align: right;
	display: block;
}
section .contact h5 {
	line-height: 1;
	margin-bottom: 1em;
}
section .contact p+p {
	margin-top: 1em;
}
section .contact a.link {
	margin-top: 0.5em;
}
section ul.images {
	width: 300px;
	width: 29%;
	margin: -10px;
}
section ul.images li {
	padding: 10px;
}
section ol.gallery,
#details ul.gallery {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	margin: -15px;
}
section ol.gallery li,
#details ul.gallery li {
	font-size: 14px;
	line-height: 1.5;
	width: 25%;
	padding: 15px;
}
section ol.gallery img,
#details ul.gallery img {
	margin-bottom: 0.25em;
}
section#guide1 .wrap,
section#guide4 .wrap {
	background: url(../img/guide1.png) repeat;
    background-size: 200px 200px;
	border: solid 10px rgba(250, 219, 218, 0.5);
}
section#guide2 .wrap,
section#guide5 .wrap {
	background: url(../img/guide2.png) repeat;
    background-size: 200px 200px;
	border: solid 10px rgba(213, 234, 216, 0.5);
}
section#guide3 .wrap,
section#guide6 .wrap {
	background: url(../img/guide3.png) repeat;
    background-size: 200px 200px;
	border: solid 10px rgba(213, 234, 216, 0.5);
}
#details {
	padding-top: 90px; /* section h3の高さに応じて変更 */
	position: relative;
}
#details .cotnents {
	padding: 40px;
	border: solid 10px #005953;
	border-radius: 20px;
}
#details h3 {
	color: #005953;
	font-size: 200%;
	line-height: 1.3;
	background: url(../img/h2-bk.png) left center no-repeat;
    background-size: 120px 120px;
    display: -webkit-flex;
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	height: 120px;
	width: 100%;
	padding: 0 0 40px 140px;
	position: absolute;
	top: 0;
	left: 0;
}
#details h4 {
	font-size: 200%;
	line-height: 1.3;
	text-align: center;
	margin: -0.15em 0 0.85em;
}
#details h4 img.logo {
	display: block;
	max-width: 400px;
	margin: 0 auto 0.5em;
	border-radius: 0;
}
#details p.image {
	max-width: 800px;
	margin: 0 auto;
}
#details .car_shop {
	background: url("../img/car_shop-bg.png") center center;
	background-size: 80px 80px;
	text-align: center;
	max-width: 640px;
	padding: 20px;
	margin: auto;
}
#details .car_shop p {
	line-height: 1.5;
	margin: -0.25em 0;
}
#details .car_shop a.link {
	width: 100%;
	margin: 0.25em auto;
}
article > span.caution {
	font-size: 12px;
	line-height: 1.5;
	color: #F00;
	display: block;
	text-indent: -1em;
	margin: -0.25em 0 -0.25em 1em;
}
article > aside {
	text-align: center;
	padding: 40px;
	border: solid 10px #F00;
}
article > aside h4 {
	font-size: 125%;
	line-height: 1.5;
	margin: -0.25em 0;
}
article > aside li {
	color: #F00;
	line-height: 1.5;
	padding-bottom: 1em;
}
article > aside li em {
	color: #333;
	display: block;
	padding: 0.5em 0;
	border-top: dotted 2px #F00;
	border-bottom: dotted 2px #F00;
	margin-bottom: 1em;
}
article > aside li img {
	display: inline-block;
	max-width: 300px;
}
footer {
	background: #fff5e0;
	width: 100%;
	box-shadow:0px 4px 12px 0px #000000;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}
footer .container,
footer .container ul {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	height: 60px;
}
footer .container p {
	line-height: 1.5;
	margin-right: auto;
}
footer .container ul li {
	width: 100px;
	margin-left: 5px;
}
footer a {
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	background: #fad8be;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	height: 44px;
	padding: 0 0.5em;
	border-radius: 22px;
}
footer a:hover {
    background: #fbe2ce;
}
.space-s {margin-bottom: 20px !important;}
.space-m {margin-bottom: 40px !important;}
.space-l {margin-bottom: 80px !important;}

/* ============================================================【tablet・sp】*/
@media screen and (max-width: 959px) {
	.container {
		padding: 0 30px;
	}
	header h1 img {
		width: 110%;
		margin-left: -5%;
	}
	#preface > .text {
		width: 100%;
		flex: none; /* ie */
		padding-left: 0;
	}
	#preface h2,
	#preface > .text,
	#preface .use_car {
		order: -1;
	}	
	#preface #slide {
		width: 100%;
	}
    #preface #slide ul li {
		width: 300px !important;
	}
	#preface .visited {
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 30px;
	}
	#preface .visited .text h4,
	#preface .visited ol li {
		margin-bottom: 30px;	
	}
	#preface .visited #google_map {
		flex: none; /* ie */
		order: 0;
		width: 100%;
		height: 320px;
	}
	#preface .visited .text {
		width: 100%;
		max-width: 600px;
		margin: auto;
	}	
	section .wrap {
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 30px;
	}
	section ul.images {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
		width: 100%;
	}
	section ul.images li {
		width: 50%;
	}
	section .text {
		flex: none; /* ie */
		width: 100%;
		padding-left: 0;
	}	
	section .contact {
		max-width: 600px;
		margin: 2em auto 0;
	}
	section ul.images {
		max-width: 620px; /* 600px */
		margin: auto;
	}
	section ol.gallery,
	#details ul.gallery {
		margin: -10px;
	}
	section ol.gallery li,
	#details ul.gallery li {
		width: 33.33%;
		padding: 10px;
	}
	#details .cotnents {
		padding: 30px;
	}
	#details h4 {
		font-size: 150%;
	}
	#preface aside,
	article > aside {
		padding: 30px;
	}
	footer a.top {
		right: 15px;
		bottom: 15px;
	}
	.space-s {margin-bottom: 15px !important;}
	.space-m {margin-bottom: 30px !important;}
	.space-l {margin-bottom: 60px !important;}
}
	/* ====================================================================【sp】*/
	@media screen and (max-width: 639px) {
		body {
			font-size: 14px;
		}
		a.tel {
			text-decoration: underline;
		}
		span.sp-br:after {
			content: "\A";
			white-space: pre;
		}
		.container {
			padding: 0 20px;
		}
		header h1 img {
			width: 120%;
			margin-left: -10%;
		}
		header ul li {
			width: 100%;
		}
		header ul li a {
			-webkit-justify-content: flex-end;
			justify-content: flex-end;
		}
		header ul li:first-child {
			margin-right: 0;
		}
		main {
			padding-bottom: 72px; /*footer fixed のスペース確保*/
		}
		#preface h2,
		#preface .visited .text h4,
		section h3,
		#details h3,
		#details h4 {
			font-size: 150%;
		}
		#preface #slide ul li {
			width: 200px !important;
		}
		#preface .use_car .wrap {
			padding: 15px 10px;
		}
		#preface .visited {
			padding: 20px;
		}
		#preface .visited .text h4 {
			height: 40px;
			border: solid 2px;
			border-radius: 20px;
		}
		/* の吹き出し */
		#preface .visited .text h4:before,
		#preface .visited .text h4:after {
			border-width: 15px 12px 0 12px;
		}
		#preface .visited .text h4:before {
			bottom: -15px;
		}
		#preface .visited .text h4:after {
			bottom: -11px;
		}
		section,
		#details {
			padding-top: 60px; /* section h3の高さに応じて変更 */
		}
		section h3,
		#details h3 {
			background-size: 80px 80px;
			height: 80px;
			padding: 0 0 15px 90px;
		}
		section .wrap {
			padding: 20px;
		}
		section .contact {
			padding: 20px 15px;
		}
		section ul.images li {
			padding: 5px;
		}
		section ol.gallery,
		#details ul.gallery {
			margin: -5px;
		}
		section ol.gallery li,
		#details ul.gallery li {
			font-size: 12px;
			padding: 5px;
		}
		#details .cotnents {
			padding: 20px;
		}
		#details .car_shop {
			padding: 15px;
		}
		#preface aside,
		article > aside {
			padding: 25px 20px;
		}
		article > span.caution {
			font-size: 10px;
		}
		footer .container {
			-webkit-flex-direction: column;
			flex-direction: column;
			height: 72px;
		}
		footer .container p {
			font-size: 12px;
			line-height: 1;
			margin: -4px 0;
			order: 1;
		}
		footer .container ul li {
			margin: 0 2px;
		}
		.space-s {margin-bottom: 10px !important;}
		.space-m {margin-bottom: 20px !important;}
		.space-l {margin-bottom: 40px !important;}
	}
		/* ====================================================================【sp】*/
		@media screen and (max-width: 449px) {
			.container {
				padding: 0 15px;
			}
			#preface .use_car .wrap {
				padding: 10px;
			}
			#preface .visited {
				padding: 15px;
			}
			#preface .visited .text h4,
			#preface .visited ol li {
				margin-bottom: 20px;
			}
			section .wrap {
				padding: 15px;
			}
			section .contact {
				line-height: 1.5;
				padding: 15px;
			}
			section .contact h5 {
				margin-bottom: 0.75em;
			}
			section .contact p {
				margin: -0.25em 0;
			}
			section ol.gallery li,
			#details ul.gallery li {
				width: 50%;
			}
			#details .cotnents {
				padding: 15px;
			}
			#details h4,
			section h3 {
				font-size: 125%;
			}
			#preface aside,
			article > aside {
				padding: 15px 10px;
			}
			.space-m {margin-bottom: 15px !important;}
			.space-l {margin-bottom: 30px !important;}
		}