/* CSS-Reset
-------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}
nav ul,ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select {
    vertical-align: middle;
}


/* common
-------------------- */
body {
	text-align: justify;
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3",'Meiryo',"ＭＳ Ｐゴシック","Osaka", sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	background: #AFD4D0;
}
body,
#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: #000;
	text-decoration: none;
}
img {
	width: 100%;
}
.sp {
	display: none;
}
.wrap {
	max-width: 1000px;
	padding-left: 12px;
	padding-right: 12px;
	margin: 0 auto;
}
.flex {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 896px) {
	body {
		min-width: 0;
		font-size: 0.938em;
		line-height: 1.688em;
	}
	.wrap {
		padding-left: 5px;
		padding-right: 5px;
		margin: 0 10px;
	}
	.flex {
		display: block;
	}
}
@media screen and (max-width: 480px) {
	.sp {
		display: block;
	}
}


/* header
---------------------------------------------------------- */
header {
	padding: 1em 0;
}
header .flex {
	align-items: center;
}
header h1 img {
	width: 300px;
}
header .infoUnit {
	font-weight: 500;
	text-align: center;
}
header .infoUnit span {
	font-size: 2.75em;
	line-height: 1.2em;
	letter-spacing: 1px;
}

@media screen and (min-width: 768px) {
	header .flex {
		display: flex;
		justify-content: space-between;
	}
}
@media screen and (max-width: 767px) {
	header h1 {
		text-align: center;
	}
	header .infoUnit {
		margin-top: 5px;
	}
}
@media screen and (max-width: 480px) {
	header h1 img {
		width: 100%;
	}
}
@media screen and (max-width: 320px) {
	header .infoUnit {
		font-size: 0.938em;
	}
	header .infoUnit span {
		font-size: 2.4em;
	}
}


/* nav
---------------------------------------------------------- */
nav {
	background: #fff;
}
nav .inner {
	max-width: 1024px;
	margin: 0 auto;
	text-align: center;
}
nav ul {
	display: flex;
	justify-content: space-around;
	font-size: 1.375em;
	line-height: 1.5em;
	font-weight: 700;
}
nav a {
	display: block;
	margin: .5em 0;
	padding: .5em 1em;
}
nav a:hover,
nav a.stay {
	background: #E1610D;
	color: #fff;
	border-radius: 10px;
}

@media screen and (max-width: 896px) {
	nav .inner {
		width: 100%;
	}
	nav ul {
		flex-wrap: wrap;
	}
	nav ul li {
		flex-basis: 49.8%;
		border-right: 2px solid #AFD4D0;
		border-bottom: 2px solid #AFD4D0;
	}
	nav ul li:nth-child(2),
	nav ul li:nth-child(4) {
		border-right: none;
	}
	nav ul li:nth-child(3),
	nav ul li:nth-child(4) {
		border-bottom: none;
	}
	nav a {
		margin: 0;
		padding: .5em 1em;
	}
	nav a:hover,
	nav a.stay {
		border-radius: 0;
	}
}
@media screen and (max-width: 567px) {
	nav ul li {
		flex-basis: 49.7%;
	}
}
@media screen and (max-width: 320px) {
	nav ul {
		font-size: 1.3em;
	}
	nav ul li {
		flex-basis: 49.6%;
	}
}


/* imgUnit
---------------------------------------------------------- */
#imgUnit {
	position: relative;
	min-height: 340px;
	background: url(images/bg.png) repeat-x center bottom;
}
#imgUnit h1 {
	color: #E1610D;
	font-size: 2.625em;
	letter-spacing: .2em;
	padding-top: 1em;
	text-align: center;
	text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

#imgUnit .wrap img {
	width: 68px;
}
#imgUnit .car_l {
	position: absolute;
	right: 0;
	bottom: -4px;
}
#imgUnit .car_r {
	position: absolute;
	left: -70px;
	bottom: -4px;
}
@keyframes drive_l {
	0% {
		transform: translate(0,0);
    }
	100% {
		transform: translate(-1000px,0);
	}
}
@keyframes drive_r {
	0% {
		transform: translate(0,0);
	}
	100% {
		transform: translate(1000px,0);
	}
}
.car_l {
	animation-name: drive_l;
	animation-duration: 12s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.car_r {
	animation-name: drive_r;
	animation-duration: 12s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 15s;
}

@media screen and (min-width: 1025px) {
	@keyframes drive_l {
		100% {
			transform: translate(-1920px,0);
		}
	}
	@keyframes drive_r {
		100% {
			transform: translate(1920px,0);
		}
	}
}
@media screen and (max-width: 896px) {
	#imgUnit {
		min-height: 300px;
	}
	#imgUnit h1 {
		font-size: 2.5em;
	}
	#imgUnit .wrap img {
		width: 54px;
	}
}
@media screen and (max-width: 514px) {
	#imgUnit {
		background-size: 98%;
		min-height: 180px;
	}
	#imgUnit h1 {
		font-size: 1.8em;
	}
	#imgUnit .car_l {
		bottom: -6px;
	}
	#imgUnit .car_r {
		bottom: -6px;
	}
	@keyframes drive_l {
		100% {
			transform: translate(-800px,0);
		}
	}
	@keyframes drive_r {
		100% {
			transform: translate(800px,0);
		}
	}
}
@media screen and (max-width: 420px) {
	#imgUnit {
		/*min-height: 160px;*/
	}
	#imgUnit h1 {
		font-size: 1.6em;
	}
	#imgUnit .wrap img {
		width: 46px;
	}
}
@media screen and (max-width: 374px) {
	#imgUnit {
		min-height: 130px;
	}
	#imgUnit h1 {
		font-size: 1.3em;
	}
	#imgUnit .wrap img {
		width: 38px;
	}
}


/* cntUnit
---------------------------------------------------------- */
#cntUnit {
	padding: 1em 0;
}
#cntUnit .mainSide {
	flex-basis: 66%;
	background: #fff;
	border-radius: 10px;
	padding: 1em;
}
#cntUnit .mainSide .flex {
	justify-content: space-around;
}
#cntUnit .mainSide h2.newsTtl {
	padding: .5em 0;
	margin: 1em 0 .5em;
	font-size: 20px;
	letter-spacing: .1em;
	border-top: solid 3px #E1610D;
	border-bottom: solid 3px #E1610D;
	text-align: center;
}
#cntUnit .mainSide .flex p {
	flex-basis: 48%;
	text-align: center;
	margin-bottom: 1em;
}
#cntUnit .mainSide a {
	display: block;
	background: #e1610d;
	background: -moz-linear-gradient(top,  #e1610d 0%, #f1b289 50%, #e1610d 100%);
	background: -webkit-linear-gradient(top,  #e1610d 0%,#f1b289 50%,#e1610d 100%);
	background: linear-gradient(to bottom,  #e1610d 0%,#f1b289 50%,#e1610d 100%);
	border: 3px solid #E1610D;
	font-size: 34px;
	border-radius: 10px;
	padding: 1em 0;
}
#cntUnit .mainSide a:hover {
	background: #e1610d;
	background: -moz-linear-gradient(top,  #f1b289 0%, #e1610d 50%, #f1b289 100%);
	background: -webkit-linear-gradient(top,  #f1b289 0%,#e1610d 50%,#f1b289 100%);
	background: linear-gradient(to bottom,  #f1b289 0%,#e1610d 50%,#f1b289 100%);
}

#cntUnit .barSide {
	flex-basis: 26%;
	background: #fff;
	border-radius: 10px;
	padding: .5em 1em 1em;
	font-weight: 500;
	text-align: center;
}
#cntUnit .barSide p.tel {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}
#cntUnit .barSide .inr {
	border-bottom: 1px dashed #000;
	padding: .5em 0;
}
#cntUnit .barSide p:last-child {
	margin-top: .5em;
	font-size: 14px;
}

#cntUnit .small {
	font-size: 14px;
}


@media screen and (max-width: 896px) {
	#cntUnit .barSide {
		margin-top: 2em;
	}
}

@media screen and (min-width: 768px) {
	#cntUnit .mainSide .flex {
		display: flex;
	}
}
@media screen and (max-width: 767px) {
	header h1 {
		font-size: 28px;
	}
}




/* lower
---------------------------------------------------------- */
.lower {
	/*margin-top: 80px;*/
}
.lower .mainSide {
	font-weight: 500;
}
.lower .mainSide h1 {
	background: #84BEE8;
	box-shadow: 0px 0px 0px 5px #84BEE8;
	border: dashed 2px #fff;
	padding: .3em .5em;
	margin-bottom: .8em;
	font-size: 24px;
	line-height: 32px;
	text-shadow: 1px 1px 0 #eaeaea;
	color: #2e2e2e;
}
.lower .mainSide h2 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #ccc;
	margin-bottom: .8em;
}
.lower .mainSide h2::before {
	position: absolute;
	left: -6px;
	bottom: 0;
	content: '';
	width: 6px;
	height: 50%;
	background-color: #3498db;
}
.lower .mainSide h2::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 2px solid #ccc;
}

.lower .mainSide .txtunit {
	margin-bottom: 2em;
	font-size: 18px;
	line-height: 24px;
}
.lower .mainSide .txtunit li {
	margin-left: .5em;
	padding-bottom: .2em;
}
.lower .mainSide .txtunit p {
	margin-top: .5em;
}
.lower .mainSide .txtunit:last-child {
	margin-bottom: 0;
}
.lower .mainSide .txtunit:last-child p {
	margin-left: 0;
	margin-right: 0;
}

@media screen and (max-width: 896px) {
	.lower .mainSide .indent {
		padding-left: 1.2em;
		text-indent: -0.6em;
	}
}


/* fee
---------------------------------------------------------- */
.fee .mainSide .txtunit p,
.fee .mainSide .txtunit ul {
	margin-left: 1em;
	margin-right: 1em;
}
.fee .mainSide .price {
	color: #EEE939;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .1em;
	text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
}


/* about
---------------------------------------------------------- */
.about .mainSide img {
	border-radius: 20px;
}
.about .mainSide .txtunit dl {
	flex-basis: 50%;
	text-align: center;
}
.about .mainSide .txtunit dd {
	font-size: 28px;
	margin-top: .2em;
}

.about .mainSide .flex p {
	margin-bottom: 0 !important;
}

@media screen and (max-width: 896px) {
	.about .mainSide .txtunit ul {
		margin-top: 1em;
	}
}


/* footer
-------------------- */
footer {
	margin-top: auto;
	background-color: #3e3a39;
	color: #fff;
	padding: 20px 0;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
footer p.copy {
	text-align: center;
	padding-top: 0;
	letter-spacing: .05rem;
}
footer div.wrap::after {
	content: '';
}

@media screen and (max-width: 650px) {
    footer .sp {
        display: block;
    }
    body footer {
        padding: 20px 0px 30px;
    }
    footer div.wrap {
        display: flex;
        justify-content: space-between;
        flex-flow: column nowrap;
        /*margin: 0 10px;*/
    }
    footer div p {
        font-size: .75rem;
        text-align: left;
    }
    footer p.copy {
        padding-top: 0;
        text-align: center;
        line-height: 1.7em;
        font-size: .7rem;
    }
}
