@charset "utf-8";

/*=====================================================================================
	
	Document : top.css
 
=====================================================================================*/

/*---------------------------------------------------------------------------

   Visual slider

---------------------------------------------------------------------------*/

.visual {
	max-height:500px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	position:relative;
}

.visual h1 {
	width:38.59375%;
	position:absolute;
	right:20px;
	bottom:20px;
	z-index:5;
}

.main-slider {
	width:100%;
	
}

#slider,
#slider img {
	z-index:4 !important;
}


/*---------------------------------------------------------------------------

   Menu

---------------------------------------------------------------------------*/

.menu {
	width:92%;
	padding-bottom:30px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

@media screen and (max-width:640px) {
	.menu {
		padding-bottom:6%;
	}
}

.menu h2 {
	padding:30px 0 20px 0;
}

@media screen and (max-width:640px) {
	.menu h2 {
		padding:7% 0 4% 0;
	}
}

.menu ul {
	list-style:none;
}

.menu ul,
.menu li {
	display:-moz-inline-box;
	display:inline-block;
	/display:inline;
	/zoom:1;
}

.menu li {
	width:30%;
}

.menu li:nth-child(2) {
	margin-left:2.5%;
	margin-right:2.5%;
}

.menu li img {
	margin-bottom:5px;
}


/*---------------------------------------------------------------------------

   Info

---------------------------------------------------------------------------*/

.info {
	background:url(../../image/bg-washi.jpg) repeat center top;
}

.info > .inner {
	background:url(../image/top/info/bg.png) no-repeat left top;
	-moz-background-size:100% auto;
	background-size:100% auto;
	padding:30px 0;
}

.info h3 {
	padding-bottom:10px;
}

.info ul {
	padding:2.5% 2.5% 25px 2.5%;
	list-style:none;
}

@media screen and (max-width:640px) {
	.info > .inner {
		padding:6% 0;
	}
	
	.info h3 {
		padding-bottom:2%;
	}

	.info ul {
		padding-bottom:5%;
	}
}

.info li {
	background-color:#fff;
	text-align:left;
	margin-top:2px;
	
}

.info li .imgLiquid {
	width:120px;
	height:90px;
	overflow:hidden;
	float:left;
	margin-right:15px;
}

@media screen and (max-width:480px) {
	.info li .imgLiquid {
		width:100px;
		height:75px;
	}
}

.info li a {
	padding:15px 50px 15px 15px;
	display:block;
	background:url(../image/lmR15.png) no-repeat center right;
}

.info li a:after {
	content:"";
	display:block;
	height:0;
	clear:both;
}

.info li a,
.info li a:visited,
.info li a:hover { text-decoration:none; }

.info li .title {
	text-decoration:underline;
}
.info li a:hover .title {
	text-decoration:none;
}


/*---------------------------------------------------------------------------

   Media

---------------------------------------------------------------------------*/

.media {
  background-color:#0f0f0f;
  padding-bottom:6%;
}

.media h4 {
  padding:7% 0 6% 0;
}


/*---------------------------------------------------------------------------

   Shop info

---------------------------------------------------------------------------*/

.shopinfo {
	-moz-background-size:100% auto;
	background-size:100% auto;
	position:relative;
}

.shopinfo a {
	display:block;
	padding:30px 20px 40px 20px;
}

@media screen and (max-width:480px) {
	.shopinfo a {
		display:block;
		padding:6% 4% 8% 4%;
	}
}

.shopinfo a,
.shopinfo a:visited,
.shopinfo a:hover { text-decoration:none; }

.shopinfo h4 {
	text-decoration:underline;
}
.shopinfo a:hover h4 {
	text-decoration:none;
}

.shopinfo p {
	padding-top:5px;
	padding-bottom:25px;
}

@media screen and (max-width:480px) {
	.shopinfo p {
		padding-top:2%;
		padding-bottom:5%;
	}
}

.shopinfo > a > .photo {
	width:70.625%;
}

.shopinfo01 {
	background:url(../image/top/shopinfo/bg-counter.png) no-repeat left bottom;
	z-index:5;
}

.shopinfo02 {
	background:url(../image/top/shopinfo/bg-privateroom.png) no-repeat left bottom;
	z-index:4;
}

.shopinfo > a > .cut {
	position:absolute;
}

.shopinfo01 > a > .cut {
	width:23.90625%;
	left:0;
	bottom:-5%;
}

.shopinfo02 > a > .cut {
	width:21.5625%;
	right:0;
	bottom:0;
}


/*---------------------------------------------------------------------------

   Quality

---------------------------------------------------------------------------*/

.quality {
	background:url(../image/top/quality/bg.png) no-repeat left bottom;
	-moz-background-size:100% auto;
	background-size:100% auto;
	text-align:left;
	padding-bottom:30px;
}

.quality p {
	padding-left:48.5%;
	padding-right:5%;
}

.quality p .bt-gray {
	width:100%;
	margin-top:8%;
}


@media screen and (max-width:640px) {
	.quality {
		padding-bottom:6%;
	}
}

@media screen and (max-width:380px) {
	.quality p {
		padding-left:40%;
	}
}