@charset "utf-8";

/*----------------------------------------*----------------------------------------
composition
----------------------------------------*----------------------------------------*/

html { font-size: 10px; }
body {
	font-family: "Open Sans", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 1.5rem;
	line-height: 1.5;
	color: #563630;
}

/*----------------------------------------*----------------------------------------
header-tape
----------------------------------------*----------------------------------------*/

@media screen and (min-width: 768px) {
	#header-tape {
		font-size: 1.1rem;
		background: #a3dee6;
		line-height: 3rem;
	}
}

/*----------------------------------------
description
----------------------------------------*/

@media screen and (max-width: 767px) {
	#header-tape .description { display: none; }
}

@media screen and (min-width: 768px) {
	#header-tape .description { text-align:center; }
}

/*----------------------------------------*----------------------------------------
header
----------------------------------------*----------------------------------------*/

#header .container { position: relative; }

@media screen and (max-width: 767px) {
	#header .container {
		padding-left: 0;
		padding-right: 0;
	}
}
@media screen and (min-width: 768px) {
	#header {
		height: 99px;
		padding-top: 9px;
		position: sticky;
		top: 0;
		z-index: 1000;
		background: #fff;
	}
	#header .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 1200px;
	}  
}

/*----------------------------------------
logo
----------------------------------------*/

#header .logo a{ 
  background: #fff url(../../common/img/logo.png) no-repeat center center;
  text-align: left;
}

@media screen and (max-width: 767px) {
	#header .logo a{
		height: 63px;
		background-size: 244px 59px;
	}
}

@media screen and (min-width: 768px) {
	#header .logo {
		flex-grow: 0;
	}
	#header .logo a {    
		width: 524px;
		height: 86px;
	background-size: contain;
	}
}

/*----------------------------------------
tel
----------------------------------------*/

@media screen and (max-width: 767px) {
	#header .tel {
		background: #a3dee6;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#header .help { font-size:1.2rem; text-align:center; }
}

@media screen and (min-width: 768px) {
	#header .tel {
		flex-grow: 99;
		text-align: right;
	}
}

/*----------------------------------------
header-contact
----------------------------------------*/

#header .header-contact .btn:after {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	content: "";
	border: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  #header .header-contact .btn {
		display: block;
  }
  #header .header-contact .btn:before {
    font-family: "FontAwesome";
    content: "\f105" !important;
		margin-right: .5em;
		position: static;
  }
}

@media screen and (min-width: 768px) {
	#header .header-contact {
		flex-grow: 0;
		margin-left: 20px;
	}
	#header .header-contact .btn {
    border-radius: 5px;
		padding: 10px 20px;
	}
}

/*----------------------------------------
recruit
----------------------------------------*/

#header .recruit .btn:after {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	content: "";
	border: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  #header .recruit .btn {
		display: block;
  }
  #header .recruit .btn:before {
    font-family: "FontAwesome";
    content: "\f105" !important;
		margin-right: .5em;
		position: static;
  }
}

@media screen and (min-width: 768px) {
	#header .recruit {
		flex-grow: 0;
		margin-left: 20px;
	}
	#header .recruit .btn {
    border-radius: 5px;
		padding: 10px 20px;
	}
}

/*----------------------------------------*----------------------------------------
footer
----------------------------------------*----------------------------------------*/

#footer {
	background: #60c1bd;
	color: #fff;
}

@media screen and (max-width: 767px) {
	#footer { padding: 20px 0; }
	#footer .col-sp-12 {text-align: center !important; }
}

@media screen and (min-width: 768px) {
	#footer {
		padding: 40px 0;
	}
}

/* address */

#footer .address { margin-bottom: 10px; }
#footer .btn-border { color: #fff; border-color: #fff; }
#footer .btn-border:before { color: #fff; }
#footer .btn-border:hover,
#footer .btn-border:active {
	background: #eb5785;
}

@media screen and (max-width: 767px) {
	#footer .footer-info { margin-bottom: 20px; }
}

/* tel */

#footer .tel { margin-bottom: 20px; }

@media screen and (max-width: 767px) {
	#footer .contact { margin-bottom: 20px; }
	#footer .contact-tel { font-size:2.5rem; margin-bottom: 5px; }
	#footer .contact-tel,
	#footer .contact-tel a {
		color: #ff0;
		font-weight: bold;
		line-height: 1;
	}
	#footer .contact-tel a { font-size: 2.5rem; }
	#footer .contact-help { font-size: 1.3rem; }
}

@media screen and (min-width: 768px) {
	#footer .footer-contact { text-align: right; }
}

/* copyright */

#copyright {
	padding: 20px;
	font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
	#copyright {
		padding: 10px;
	}
}

/* nav */

#footer .nav a {
	color: #fff;
}
#footer .nav a i {
	font-size: 1.2rem;
	margin-right: 10px;
}

/*----------------------------------------*----------------------------------------
back_to_top
----------------------------------------*----------------------------------------*/

#back_to_top {
	bottom: 20px;
	position: fixed;
	right: 20px;
}
#back_to_top a {
	background: url(../img/back_to_top.png) no-repeat left top;
	height: 50px;
	width: 50px;
}

/*----------------------------------------*----------------------------------------
page-header
----------------------------------------*----------------------------------------*/

#page-header {
	background: #cceee6 url(../img/ht_bg.png) no-repeat center center;
	padding: 30px 0;
	margin-bottom: 15px;
}
#page-header h1 {
	color: #00ab84;
	font-size: 2.2rem;
	text-align: center;
	line-height: 1;
	font-weight: normal;
	background:;
}

@media screen and (max-width: 767px) {
	#page-header { padding: 15px 0; }
}

@media screen and (min-width: 768px) {
	#page-header { padding: 30px 0; }
}

/*----------------------------------------*----------------------------------------
breadcrumb
----------------------------------------*----------------------------------------*/

@media screen and (max-width: 767px) {
	#breadcrumb { display: none; }
}

@media screen and (min-width: 768px) {
	#breadcrumb {
		letter-spacing: -.4em;
		font-size: 1.3rem;
		margin-bottom: 40px;
	}
	#breadcrumb li {
		letter-spacing: normal;
		display: inline;
	}
	#breadcrumb li:before {
		font-family: "FontAwesome";
		content: "\f105";
		margin: 0 10px;
	}
	#breadcrumb li:first-child:before {
		content:"";
		margin: 0;
	}
	#breadcrumb a {
		color: #665c47;
		text-decoration: none;
	}
	#breadcrumb a:hover,
	#breadcrumb a:active { text-decoration: underline; }
}