@charset "UTF-8";

/* screens smaller than 768---------------------------------------------------------- */
@media only screen and (max-width:768px) {

#wrapper {
	width: 100%;
	/*min-width: 100%;*/
	/*height: 100%;*/
	margin: 0 auto;
}
#container {
	width: 100%;
	/*min-width: 100%;*/
	/*height: 100%;*/
	margin: 0 auto;
}





/* header */
/*------------------------------------------------------------------------------*/
header {
	width: 100%;
	background: url(../image/common/header_bg.jpg) no-repeat top left;
}
header #headerMain{
	width: 100%;
	background: url(../image/common/header_cloud_bg.png) repeat-x;
	animation: moveBg 200s infinite linear;
}
@keyframes moveBg{
	0%    { background-position: 0 0; }
	100%  { background-position: 0px 0; }
}
header #headerMain #headerMainInner {
	width: 100%;
	height: 90px;
	margin: 0 auto;
	padding: 0 2%;
}
header #headerMain #headerMainInner:after {
	content: "";
	display: block;
	clear: both;
}
header #headerMain #headerMainInner #headerLogoArea {
	display: table;
	width: 25%;
	height: 100%;
	float: left;
}
header #headerMain #headerMainInner #headerLogoArea h1 {
	display: table-cell;
	vertical-align: middle;
}
header #headerMain #headerMainInner #headerLogoArea h1 a {
	display: inline-block;
	transition: all 0.2s;
}
header #headerMain #headerMainInner #headerLogoArea h1 a:hover {
	opacity: 1;
}
header #headerMain #headerMainInner #headerLogoArea h1 a img {
	width: 100%;
	height: auto;
}
header #headerMain #headerMainInner #headerContactArea {
	display: table;
	height: 100%;
	float: right;
}
header #headerMain #headerMainInner #headerContactArea > div {
	display: table-cell;
	vertical-align: middle;
}
header #headerMain #headerMainInner #headerContactArea #headerTel {
	background: url(../image/common/icon_tel.png) no-repeat center left;
	background-size: 20px 32px;
	padding: 0 1.5em 0 2.5em;
}
header #headerMain #headerMainInner #headerContactArea #headerTel .text {
	font-size: 1.1em;
	color: #5b4542;
}
header #headerMain #headerMainInner #headerContactArea #headerTel .num a {
	font-size: 2em;
	font-weight: bold;
	color: #5b4542;
}
header #headerMain #headerMainInner #headerContactArea #headerMail a {
	display: table-cell;
	width: 50%;
	height: auto;
	text-align: center;
	vertical-align: middle;
	background: url(../image/common/header_contact_bg.png) no-repeat;
	background-size: contain;
	transition: all 0.2s;
	padding: 1.5em 1.5em;
}
header #headerMain #headerMainInner #headerContactArea #headerMail a:hover {
	opacity: 1;
}
header #headerMain #headerMainInner #headerContactArea #headerMail a span {
	display: inline-block;
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	line-height: 1;
	background: url(../image/common/icon_mail.png) no-repeat center left;
	background-size: 14px 10px;
	padding: 0 0 0 1.4em;
}

header #headerMain #headerMainInner #headerContactArea #tabMenu {
	display: table-cell!important;
	width: 20%;
	text-align: center;
	vertical-align: middle;
	padding: 0 0 0 1.5em;
}
header #headerMain #headerMainInner #headerContactArea #tabMenu > a {
	display: block;
	background-color: #74D6D6;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	padding: 0 1em;
}
header #headerMain #headerMainInner #headerContactArea #tabMenu > a > span {
	display: block;
}
header #headerMain #headerMainInner #headerContactArea #tabMenu > a > span.imgBox {
	height: 60%;
	padding: 5px 0 2px 0;
}
header #headerMain #headerMainInner #headerContactArea #tabMenu > a > span.imgBox img {
	width: auto;
	height: 16px;
}
header #headerMain #headerMainInner #headerContactArea #tabMenu > a > span.textBox {
	font-size: 1.2em;
	font-weight: bold;
	color: #5B4542;
}

header #spHeaderMenu {
	display: none;
}

header  div.animalBox {
	display: none;
}





/* globalnavArea */
/*------------------------------------------------------------------------------*/
#globalnavArea {
	display: none;
	width: 100%;
	background-color: rgba(112,214,215,0.95);
	padding: 2%;
	position: absolute;
	z-index: 490;
}
#globalnav {
	width: 100%;
	height: 100px;
	margin: 0 auto;
}
#globalnav:after {
	content: "";
	display: none;
	clear: both;
}

#globalnav > div#navHome {
	width: 20%;
	height: 100%;
	float: left;
}
#globalnav > div#navHome > a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
}
#globalnav > div#navHome > a > span.imgBox {
	display: block;
	height: 60%;
	text-indent: -9999px;
	background: url(../image/common/icon_home.png) no-repeat 50% 70%;
	border-left: none;
	border-right: none;
	transition: all 0.2s;
}
#globalnav > div#navHome > a:hover > span.imgBox,
#globalnav > div#navHome.current > a > span.imgBox {
	background: url(../image/common/icon_home_on.png) no-repeat 50% 70%;
}
#globalnav > div#navHome > a > span.textBox {
	display: block;
	font-size: 1.6em;
	font-weight: bold;
	color: #5b4542;
	text-align: center;
}
#globalnav > div#navHome > a:hover > span.textBox,
#globalnav > div#navHome.current > a > span.textBox {
	color: #FBA565;
}

#globalnav > ul {
	display: block;
	width: 77%;
	height: 100%;
	float: right;
}
#globalnav > ul > li {
	display: block;
	width: 48%;
	height: 40%;
	float: left;
}
#globalnav > ul > li:nth-of-type(even) {
	float: right;
}
#globalnav > ul > li:nth-of-type(n+3) {
	margin: 3.5% 0 0 0;
}
#globalnav > ul > li > a {
	display: table;
	width: 100%;
	height: 100%;
}
#globalnav > ul > li > a > span.inner {
	display: table-cell;
	height: auto;
	font-size: 1.6em;
	font-weight: bold;
	color: #5b4542;
	text-align: left;
	vertical-align: middle;
	background-color: #fff;
	border-right: none;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	transition: all 0.2s;
	padding: 0 1em;
}
#globalnav > ul > li > a:hover > span.inner {
	color: #5b4542;
}
#globalnav > ul > li.current > a > span.inner {
	color: #FBA565;
}





/* footer */
/*------------------------------------------------------------------------------*/
footer {
	width: 100%;
	min-height: 286px;
	background: url(../image/common/footer_bg.png) no-repeat top center #fff;
	position: relative;
	min-width:0;
}
footer #footerMain {
	width: 100%;
	position: absolute;
	bottom: 0;
}
footer #footerMain #footerMainInner {
	width: 100%;
	margin: 0 auto;
	padding: 0 3% 25px 3%;
}
footer #footerMain #footerMainInner:after {
	content: "";
	display: block;
	clear: both;
}
footer #footerMain #footerMainInner > div {
	height: 100%;
}
footer #footerMain #footerMainInner > div#footerLogoArea {
	float: left;
}
footer #footerMain #footerMainInner > div#footerLogoArea h2 {
	width: 147px;
	margin: 0 0 1.5em 0;
}
footer #footerMain #footerMainInner > div#footerLogoArea h2 a {
	display: inline-block;
	transition: all 0.2s;
}
footer #footerMain #footerMainInner > div#footerLogoArea h2 a:hover {
	opacity: 1;
}
footer #footerMain #footerMainInner > div#footerLogoArea h2 img {
	width: 100%;
	height: auto;
}
footer #footerMain #footerMainInner > div#footerLogoArea p {
	font-size: 14px;
	color: #5A4541;
}
footer #footerMain #footerMainInner > div#footerCopyArea {
	display: table;
	float: right;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner {
	display: table-cell;
	vertical-align: bottom;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner ul {
	display: table;
	width: 100%;
	margin: 0 0 0.5em 0;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner ul li {
	display: table-cell;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner ul li.privacy {
	text-align: center;
	border-left: 1px solid #5A4541;
	border-right: 1px solid #5A4541;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner ul li.contact {
	text-align: right;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner ul li a {
	font-size: 14px;
	color: #5A4541;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner ul li a:hover {
	text-decoration: underline;
}
footer #footerMain #footerMainInner > div#footerCopyArea #footerCopyAreaInner p small {
	font-size: 13px;
	color: #5A4541;
}









/*------------------------------------------------------------------------------*/
}