@charset "shift_jis";


/*---------- ページ全体の指定 ----------*/

body {
  font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #333;
  background-image: url(images/bg.gif);
  background-repeat: repeat;
  background-position: center top;
}

a:link {
  color: #583822;
  font-size: 12px;
}

a:hover {
  color: #765c47;
  font-size: 12px;
}

a:visited {
  color: #765c47;
  font-size: 12px;
}

p {
  margin: 18px 0 18px 0;
  line-height: 190%;
  letter-spacing: 1px;
}

.space15 {
	padding-bottom: 15px;

}

.red {
	font-size: 16px;
	font-weight: bold;
	color: #C33;
}

.alignRight{
	text-align: right;
}



/*---------- メイン ----------*/

#main {
	margin: 0px auto;
	padding: 0;
	background-image: url(images/foot.jpg);
	background-repeat: repeat-x;
	background-position: bottom;

}

#main h1 {
	margin: 0;
	padding: 0px;
	font-weight: normal;
	text-align: right;
	font-size: 9px;
	color: #FFFFFF;
	background-color: #006600;


}


/*---------- コンテンツ ----------*/

#container {
	margin: 0px auto;
	padding: 0px;
	width: 880px;

}


/*---------- メインコンテンツ ----------*/

#contents {
  float: right;
  margin: 0;
  padding: 0px;
  line-height: 190%;
  width: 620px;
}

#contents h2 {
	margin: 0;
	padding: 10px 0px 0px;
	line-height: 110%;
	font-size: 12px;
	color: #ffffff;

}

#contents .head_photo {
  margin: 10px 0 10px 0;
}

#contents .photo {
  float: left;
  margin: 0px 0px 20px 0;
}

/*-横に写真が2列並んだ時の右側-*/

#contents img.photo_r {
	margin-left: 20px;

}



#contents .titleimg {
	margin-bottom: 15px;

}


#contents p {
	margin: 0px 0 18px;
	line-height: 190%;
	letter-spacing: 1px;
	padding: 10px;


}

#contents .box1 {
	background-color: #FFFFFF;

}


#contents .box1 img {
	float: left;
	padding: 0px;
	margin-right: 15px;


}

#contents p.topics {
	margin: 0px ;
	letter-spacing: 1px;
	padding: 10px;


}


#contents .box1 dl.topics {
	padding: 0px 20px;
	margin: 0px;


}

#contents .box1 dl.topics dt {
	background-image: url(images/arrow1.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 15px;
	font-weight: bold;
	color: #666600;




}

#contents .box1 dl.topics dd {
	padding-bottom: 5px;
}


/*concept 店主あいさつ　余白なし*/
#contents .box2 {
	background-color: #FFFFFF;
	margin-bottom: 15px;


}

#contents .box2 h2 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #006600;
	margin-left: 15px;
	margin-bottom: 20px;
	margin-right: 15px;
}



/*ページ全般　余白あり*/
#contents .box3 {
	background-color: #FFFFFF;
	margin-bottom: 15px;


}

#contents .box3 h2 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #006600;
	margin-left: 15px;
	margin-bottom: 20px;
	margin-right: 15px;
	padding-bottom: 25px;


}

#contents .box3 h3 {
	background-color: #F7F6EF;
	margin-right: 15px;
	margin-left: 15px;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-image: url(images/arrow2.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#contents .box3 h3.new {
	background-image: url(images/menu_new.gif);
	padding-left: 90px;

}



#contents .box3 p {
	margin-left: 10px;
}


#contents .box3 img {
	float: left;
	margin-bottom: 15px;

}


#contents .box3 table {
	width: 580px;
	margin-left: 20px;
	margin-bottom: 20px;
}

#contents .box3 table td {
	padding: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
}


#contents .box3 table td.left {
	background-color: #EFEDE0;
}

#contents .box3 table td.right {
	background-color: #F7F6EF;
}

/*- 幅半分のdiv -*/
.halfbox {
	width: 290px;
	float: left;

}

#contents .box4 {
	background-color: #FFFFFF;
	margin-bottom: 15px;
	padding-bottom: 2px;
	clear: both;
	height: auto;


}

#contents .box4 h2 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #006600;
	margin-left: 15px;
	margin-bottom: 20px;
	margin-right: 15px;
	padding-bottom: 25px;


}

#contents .box4 h3 {
	background-color: #F7F6EF;
	margin-right: 15px;
	margin-left: 15px;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-image: url(images/arrow2.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

#contents .box4 p {
	margin-left: 10px;
}


#contents .box4 img {
	float: left;
	margin-bottom: 15px;

}


#contents .box4 table {
	margin-left: 20px;
	margin-bottom: 20px;
	width: 250px;




}

#contents .box4 table td {
	padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
}



/*- スタッフ幅半分のdiv -*/
.staffbox {
	width: 270px;
	float: left;
	background-image: url(images/staff_bg.jpg);
	background-repeat: repeat;
	margin-left: 20px;
	margin-bottom: 20px;
	padding-top: 15px;
	padding-bottom: 15px;

}

.staffbox img {
	text-align: center;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 0px;
	padding: 0px;
	clear: both;



}

.staffbox p.name {
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #330000;
	width: 230px;

}

/*- item説明 -*/
#contents .box3 .itembox {
	float: left;
	margin: 0px;
	padding: 15px;


}

#contents .box3 h4 {
	font-size: 14px;
	font-weight: bold;
	color: #666600;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #666600;
	margin-bottom: 5px;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;


}




#contents .box3 .itembox p {
	line-height: normal;
	padding: 0px 10px;




}

#contents .box3 .itembox img {
	float: left;
	margin-right: 10px;



}

#contents .box3 .detail {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #7FB27F;
	width: 200px;
	float: left;
	text-align: center;
	padding: 20px;
	font-size: 14px;

}





/*胎毛筆*/
#contents .box5 {
	background-color: #FFFFFF;
	margin-bottom: 15px;


}

#contents .box5 h2 {
	margin-left: 15px;
	margin-bottom: 20px;
	margin-right: 15px;
	padding-bottom: 25px;


}


#contents .box5 p {
	margin-left: 10px;
}




#contents .box5 table {
	width: 580px;
	margin-left: 20px;
	margin-bottom: 20px;
}


/*求人*/

#contents .box6 {
	background-color: #FFFFFF;
	margin-bottom: 15px;
	padding-top: 15px;
	padding-bottom: 15px;




}

#contents .box6 h2 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #006600;
	margin-left: 15px;
	margin-bottom: 20px;
	margin-right: 15px;
	padding-bottom: 25px;


}

#contents .box6 h3 {
	background-color: #F7F6EF;
	margin-right: 15px;
	margin-left: 15px;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-image: url(images/arrow2.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

#contents .box6 h4 {
	font-size: 14px;
	font-weight: bold;
	color: #666600;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #666600;
	margin-bottom: 5px;
	margin-top: 0px;
	margin-left: 20px;
	margin-right: 20px;

}

#contents .box6 p {
	margin-left: 10px;
}


#contents .box6 img {
	float: left;
	margin-bottom: 15px;

}


#contents .box6 table {
	width: 580px;
	margin-left: 20px;
	margin-bottom: 20px;
}

#contents .box6 table td {
	padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
}


#contents .box6 table td.left {
	background-color: #EFEDE0;
	width: 200px;

}

#contents .box6 table td.right {
	background-color: #F7F6EF;
}



/*-キャンペーン-*/

.camp_box{
	color: #FFFFFF;
	background-color: #3B6632;
	padding: 20px;
	margin-right: 20px;
	margin-left: 20px;
	font-size: 14px;
}

#contents .box3 h5 {
	font-size: 14px;
	color: #FF3300;
	padding-left: 20px;
	border: 1px solid #FFCC00;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 0px;


}

.camp img {
	margin-left: 10px;


}


/*-- サイトマップページ --*/

.sitemap{
	padding-left: 100px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.sitemap a:link {
	color: #006600;
}

.sitemap a:visited {
	color: #99CC00;
}
.sitemap a:hover {
	color: #330000;
}


.sitemap p{
	color: #7FB27F;
}


.sitemap ul{
	list-style-type: none;
	line-height: 40px;
}



.sitemap li li{
	width: 300px;
	list-style-position: inside;
	list-style-image: url(images/arrow3.gif);
	padding-bottom: 0px;
	padding-top: 10px;
	line-height: 20px;
}

/*-リンク-*/

.link ul {
	margin-left: 20px;

}

.link li {
	list-style-position: inside;
	list-style-image: url(images/arrow4.gif);
	padding-bottom: 10px;


}


/*---------- サイド ----------*/

#menu {
	float: left;
	margin: 0 0 20px;
	width: 240px;
	bottom: 0;
	text-align: left;
	background-color: #FFFFFF;
	padding: 5px;
	height: auto;
	background-repeat: repeat;
	background-image: url(images/white.gif);
}

#menu h2 {
	text-align: center;
}

#menu .bn {
	text-align: center;
	margin-left: 15px;
}


.menulist {
	text-align: left;
	margin-bottom: 15;
	margin-left: 15px;
	margin-top: 0px;



}

.menulist h2 {
}

.menulist a{
 }

.menulist a:hover{
}


.menu_free {
	margin: 15px 0px 15px 15px;
	width: 210px;
	text-align: left;
	border: 1px solid #333333;
	background-color: #F7F6EF;
	padding-top: 10px;
	padding-bottom: 10px;
}

.menu_free h2 {
	margin: 0;
	padding: 6px 0 6px 0px;
	line-height: 110%;
	font-size: 12px;
	color: #fffffc;
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #000000;
}

.menu_free a{
  color: #583822;
  font-size: 12px;
 }

.menu_free a:hover{
  color: #765c47;
  background-color: #f3f3f2;
}

.menu_free p.orange{
	text-align: center;


}

#menu p {
  margin: 10px 4px 0 8px;
  line-height: 150%;
}

.menu_free2 {
	width: 210px;
	text-align: left;
	border: 1px solid #333333;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 15px;
	margin-left: 15px;
	margin-bottom: 15px;
}

.menu_free2 h2 {
	margin: 0;
	padding: 6px 0 6px 0px;
	line-height: 110%;
	font-size: 12px;
	color: #fffffc;
	text-align: center;

}

.menu_free2 a{
  color: #583822;
  font-size: 12px;
 }

.menu_free2 a:hover{
  color: #765c47;
  background-color: #f3f3f2;
}




/*---------- フッター ----------*/

#footer {
	clear: both;
	margin: 0;
	padding: 20px 0 0px 10px;
	text-align: center;
	font-size: 10px;
	color: #333333;

}

#footer p {
	margin: 10px 0px 0px;
	padding: 0px;

}

#footer a {
  color: #333333;
  font-size: 12px;
 }

#footer a:hover {
  color: #333333;
}



/*slide*/
.cp_cssslider {
	width: 620px;
	height: 300px;
	overflow: hidden;
	margin: 0 auto;
	/*border: 10px solid #ffffff;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);*/
}
.cp_slide_item {
	width: 620px;
	height: 300px;
	float: left;
	position: relative;
}
.cp_slidewrapper {
	width: 400%;/* slideの枚数×100% */
	position: relative;
	left: 0;
	animation: slider 20s infinite ease;/* スピード */
}
@-webkit-keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	25% {
	-webkit-transform: translateX(-620px);
	transform: translateX(-620px);
	}
	50% {
	-webkit-transform: translateX(-1240px);
	transform: translateX(-1240px);
	}
	75% {
	-webkit-transform: translateX(-1860px);
	transform: translateX(-1860px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}
@keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	25% {
	-webkit-transform: translateX(-620px);
	transform: translateX(-620px);
	}
	50% {
	-webkit-transform: translateX(-1240px);
	transform: translateX(-1240px);
	}
	75% {
	-webkit-transform: translateX(-1860px);
	transform: translateX(-1860px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}

/*-------------------------------------------
mobile
------------------------------------------*/

@media screen and (max-width:600px)  {

#main,
#container,
#contents,
#menu,
#footer	{
	width:100%;
	}

img {
	max-width:100%;
	height:auto;
	}

#main{
	padding-top:70px;
}

#contents{
	float: none;
}
#contents .photo img{
	margin-bottom:10px;
	}
#contents img.photo_r {
    margin-left: 0;
}

#menu{
	float: none;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}

#menu .sitelogo {
	position: absolute;
	top: 0px;
	left:0;
}

#footer{padding: 0 5px;
}

#contents .box3 .itembox img {
     float: none; 
}


.cp_cssslider {
    width: 100%;
}
}