@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf{display: inline-block;}

/* Hides from IE Mac \*/
* html .cf {height: 1%;}
.cf{display:block;}
/* End Hack */






/* CSS ここから */

body {
	/*font-family: TBUDGothic R, sans-serif;*/
	font-family: こぶりなゴシック W3 JIS2004, sans-serif;
    -webkit-text-size-adjust: 100%;
	font-size: 12px;
	line-height: 1;

}

header {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;

}
nav {
	float: right;
	margin-top: 80px;
}



nav ul li {
    float: left;
    /*margin-left: 25px;*/

}

nav ul li :last-child{
    margin-right: 15px;
}

nav ul li a {
    color: #555555;
    text-decoration: none;
    font-size: 12px;

}
nav ul li.selected  a{
    color: #CC0000;
    text-decoration: none;
    font-size: 12px;

}
nav ul li a:hover {
    color: #000000;
    text-decoration: none;
    font-size: 12px;

}

#logo {
	float: left;
	padding: 40px 0 20px 10px;
}
@media screen and (max-width: 640px){
	#logo {
		float: none;
		text-align: center;
		padding: 80px 0 0 0;
	}		
}
#logo img {
	width: 100%;
	padding: 0 30px 0 30px;
	height: auto;
}

@media screen and (max-width: 640px){
	#logo img{
		width:80%;
		height:auto;
	}
}

#container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto 100px;
	box-sizing: border-box;
	padding: 15px;
}
#about {
	width: 100%;
	margin: 20px 0 5px 5px;
	text-align: left;
	color: #333;
	letter-spacing: 0.08em;
}

#about h2 {
	font-size: 16px;
	line-height: 30px;
	color: #CC0000;
	margin-bottom: 40px;
	text-align: center;
}
#about h3 {
	font-size: 14px;
	font-weight: bold;
	margin-right: 30px;
	margin-left: 20px;
	margin-bottom: 25px;

}
#about p {
	font-size: 13px;
	line-height: 2.5em;
	margin-bottom: 30px;
	margin-right: 30px;
	margin-left: 30px;

}
#about h4 {
	font-size: 13px;
	margin-right: 30px;
	margin-left: 40px;
	margin-bottom: 25px;
	line-height: 18px;

}
/* nami slideshow starts */
.w3-container:after,.w3-panel:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after
{content:"";display:table;clear:both}
.w3-container{padding:0.01em 16px}
.w3-content{width: 100%;max-width: 960px;margin:auto}
.w3-display-container{position:relative}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-center{text-align:center!important}
.w3-section{margin-top:16px!important;margin-bottom:16px!important}
.w3-large{font-size:18px!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-left{float:left!important}
.w3-padding-left{padding-left:16px!important}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-right{float:right!important}
.w3-padding-right{padding-right:16px!important}
.w3-badge,.w3-tag,.w3-sign{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}
.w3-badge{border-radius:50%}
.w3-transparent{background-color:transparent!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.mySlides {width: 100%;display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:8px;width:8px;padding:0}
/* nami slideshow ends */





@media screen and (max-width: 768px){
.w3-badge {height:4px;width:4px;padding:0}
}



#service {
	width: 100%;
	margin: 60px auto;
}


#service h2 {
	font-size: 16px;
	margin-bottom: 10px;
	font-weight: bold;
}
#service p {
	font-size: 14px;
	line-height: 1.5em;
	color: #666;
}
#service li {
	float: left;
	margin-right: 1.5625%;
	width: 48.958333333333%;
	/* 4700px / 全体の横幅(960) * 100 */

}

#service li img {
	width: 100%;
}

@media screen and (max-width: 640px){
	#service li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
		float: none;
	}
}

#service li:last-child {
	margin-right: 0;
}

#service li a {
	text-decoration: none;
	color: #000000;
	display: block;
    outline: none;
}
#service li a:hover {
	opacity: 0.7;
}
#service .title {
	font-size: 14px;
	font-weight: bold;
	margin: 2px 0;
	text-align: left;
}
#service .text {
	font-size: 12px;
	text-align: left;
	line-height: 1.58;
	margin-bottom: 15px;
	letter-spacing: 0.1em;
}
#contact {
	width: 100%;
	margin: 20px 0 5px 5px;
	text-align: left;
	color: #333;
	letter-spacing: 0.08em;
}



#contact h2 {
	font-size: 14px;
	margin-right: 30px;
	margin-left: 20px;
	margin-bottom: 25px;
	font-weight: bold;

}

#contact p {
	font-size: 13px;
	line-height: 1.5em;
	margin-bottom: 5px;
	margin-right: 30px;
	margin-left: 110px;
	font-weight: bold;
}
#contact h3 {
	font-size: 13px;
	margin-right: 30px;
	margin-left: 120px;
	margin-bottom: 5px;
	line-height: 18px;
	font-weight: bold;

}
#contact h4 {
	font-size: 13px;
	margin-right: 30px;
	margin-left: 130px;
	margin-bottom: 5px;
	line-height: 18px;

}

#contact h5 {
	font-size: 13px;
	margin-right: 30px;
	margin-left: 130px;
	line-height: 18px;
	margin-bottom: 10px;
}

@media screen and (max-width: 640px) {
	#contact p, #contact h3, #contact h4, #contact h5,{
		float: none;

	}


#contact p {
	font-size: 13px;
	line-height: 2.5em;
	margin-bottom: 5px;
	margin-right: 30px;
	margin-left: 30px;
	font-weight: bold;
}
#contact h3 {
	font-size: 13px;
	margin-right: 30px;
	margin-left: 40px;
	margin-bottom: 5px;
	line-height: 18px;
	font-weight: bold;

}
#contact h4 {
	font-size: 13px;
	margin-right: 30px;
	margin-left: 50px;
	margin-bottom: 5px;
	line-height: 18px;

}
#contact h5 {
	font-size: 13px;
	margin-right: 30px;
	margin-left: 50px;
	margin-bottom: 10px;
	line-height: 18px;

}
}


#content-bottom {
	width: 100%;
	margin: 0 auto;
}

#contact_left {
	float: left;
	margin-left: 20%; 
	width: 15%;
	font-weight: bold;
	line-height: 2em;
	margin-bottom: 5px;
}

#contact_right {
	width: 55%;
	float: left;
	line-height: 2em;
	margin-bottom: 5px;
}
#contact_right a{
	text-decoration: none;
	font-size: 12px;
	text-align: center;
	color: #555555;
}
#contact_right a:hover {
	text-decoration: none;
	font-size: 12px;
	text-align: center;
	color: #CC0000;
}
@media screen and (max-width: 640px) {
	#contact_left, #contact_right {
		float: none;

	}
	#contact_left {
		margin-bottom: 10px;
		margin-left: 40px;
		margin-right: 0;
				width: 100%;

	}
	#contact_right{
		margin-bottom: 10px;
		margin-right: 15px;
		margin-left: 40px;
		width: 90%;
	}
}

#bus_left {
	float: left;
	margin-left: 20%; 
	width: 15%;
	line-height: 2em;
	margin-bottom: 5px;
}

#bus_right {
	width: 55%;
	float: left;
	line-height: 2em;
	margin-bottom: 5px;
}

@media screen and (max-width: 640px) {
	/*#bus_left, #bus_right {
		float: none;

	}*/
	#bus_left {
		margin-bottom: 1px;
		margin-left: 15%;
		margin-right: 0;
		width: 12%;

	}
	#bus_right{
		margin-bottom: 1px;
		margin-right: 0;
		margin-left: 1%;
		width: 60%;
	}
}

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: 100%;
}
/* ========================================
	footer
========================================= */

footer {
	width: 100%;
	height: auto;
	background-color: #eeeeee;
	margin-top: 50px;
   	position: fixed;
    bottom: 0;
}

div#footer_inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto 0 auto; /*全体幅から横を引いた余白を左右自動に振り分ける設定*/
	position: relative; /* ボックスの基準を設定してpagetopの場所を指定*/
	padding: 20px 0;
}

p#pagetop a {
	width: 78px;
	height: 20px;
	background-color: #eeeeee;
	text-align: center;
	color: #555555;
	display: block; /*aタグをブロックにしてボックスを選択させる*/
	text-decoration: none;
	line-height: 20px;
	position: absolute;
	top: -20px; /*footerの上に表示させる*/
 	right: 0;
}

p#footer_logo {
	float: left;
}

p#copy {
	float: right;
	font-size: 10px;
}

@media screen and (max-width: 640px){
	p#copy{
		float: none;
		text-align: center;
	}
}

footer ul {
	float: right;
	margin-top: 24px; 
}

footer ul li {
	float: left;
	margin-left: 20px;

}

footer ul li a {
	color: #555555;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;

}


.gearhouse a {
	display: block;
	width: 400px;
	margin:  20px auto 0;
	background-color: #f9ba08;
color:  #000;
text-align: center;
padding:  20px;
font-size:  20px;
font-weight: bold;
	text-decoration: none;
}




.gearhouse .small {
font-size:  14px;
margin-top: 10px;
}


.gearhouse a:hover {
	opacity:  0.9;
}




.discount a {
	display: block;
	width: 400px;
	margin:  20px auto 0;
	background-color: #000;
color:  #fff;
text-align: center;
padding:  20px;
font-size:  20px;
font-weight: bold;
	text-decoration: none;
}




.discount .small {
font-size:  14px;
margin-top: 10px;
}

.discount div {
	display:  inline-block;
}

.discount .text {
font-size:  14px;
line-height:  22px;
margin-top: 10px;
text-align: left;
margin:  10px 0 0 auto;
font-weight: normal;
}


.discount a:hover {
	opacity:  0.9;
}

@media screen and (max-width: 640px){
	.gearhouse a {
	display: block;
	width: 90%;
	margin:  0 auto;
	background-color: #f9ba08;
color:  #000;
text-align: center;
padding:  10px;
font-size:  18px;
font-weight: bold;
	text-decoration: none;
}




.gearhouse .small {
font-size:  11px;
margin-top: 10px;
}

.discount a {
	display: block;
	width: 90%;
	margin:  20px auto 15px;
	background-color: #000;
color:  #fff;
text-align: center;
padding:  20px;
font-size:  16px;
font-weight: bold;
	text-decoration: none;
	padding:  10px;
}




.discount .small {
font-size:  14px;
margin-top: 10px;
}

.discount div {
	display:  inline-block;
}

.discount .text {
font-size:  12px;
line-height:  22px;
margin-top: 10px;
text-align: left;
margin:  10px 0 0 auto;
font-weight: normal;
}


.discount a:hover {
	opacity:  0.9;
}

}