@charset "utf-8";

/* ==========================================================================================================

	 1.トップ
 
============================================================================================================*/

#topBg_1 {
	height: 100%;
	width: 100%;
	z-index: 60;
}
#topBg_1 img {
	width: 100%;
}
#topBg_2 {
	height: 100%;
	width: 100%;
	z-index: 60;
	position: relative;
}
#topBg_2 img {	
	position: absolute;
	bottom: 0px;
	width: 100%;
}
#logoTop {
	width: 100%;
	height: 300px;
	color: #FFF;
	z-index: 200;
	background: url(../images/logoBg.png) repeat-x;
	padding-left: 5%;
	border-top: 1px solid #6b5510;
	border-bottom: 1px solid #6b5510;
	padding-top: 40px;
}
h1 {
	width: 40%;
	margin-bottom: 1%;
}
#ladyTop {
	width: 100%;
	height: 120%;
	z-index: 300;
	position: relative;
}
#ladyTop img {
	width: 70%;
	z-index: 300;
	position: absolute;
	top: 30%;
	right: 0px;
}
#hana_1 {
	height: 100%;
	z-index: 100;
}
#hana_1 img { width: 100%; }
#hana_2 {
	height: 100%;
	z-index: 100;
	position: relative;
}
#hana_2 img {
	position: absolute;
	bottom: 0px;
	width: 100%; }

#kumo_1 {
	height: 100%;
	z-index: 70;
}
#kumo_1 img { width: 100%; }

#kumo_2 {
	width: 100%;
	height: 100%;
	z-index: 80;
}
#kumo_2 img { width: 100%; }


#scroll1 {
	width: 25%;
	height: 100%;
	position: relative;
}

#scroll1 img {
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 1000;
}

#scroll2 {
	width: 25%;
	height: 100%;
	position: relative;
}

#scroll2 img {
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 1000;
}
/* ==========================================================================================================

	 2.カーテン
 
============================================================================================================*/

#curtainBg {
	width: 100%;
	height: 130%;
	background: url(../images/curtainBg.jpg) repeat-x;
	z-index: 30;
}
#curtain {
	width: 352px;
	height: 1200px;
	z-index: 50;
}
#curtainLady {
	width: 100%;
	height: 100%;
	z-index: 40;
}
#curtainLady img {
	margin-top: 10%;
	width: 40%;
	z-index: 40;
}
#philosophy {
	height: 140px;
	width: 350px;
	z-index: 80;
	color: #FFF;
}
#philosophyH2 {
	width: 38%;
	z-index: 3000;
}
#philosophyH2 img.title {
	width: 100%;
	margin-bottom: -10%;
	z-index: 3000;
}
#philosophyH2 img {
	z-index: 3000;
}

#philosophyH2 div#sns-icon {
	z-index: 3000;
	float:right;
	margin:55px 5px 0px 0px;}

#philosophyH2 img#sns {
	z-index: 3000;
	float:left;
	margin-top:35px;

}
#philosophyH2 img#youtube {
	z-index: 3000;
	margin-left:15px;
}

#philosophyH2 a.twitter-youtube
{float:left;
z-index: 3000;
}




/* ==========================================================================================================

	 3.ギャラリー
 
============================================================================================================*/
#garellyBg_1 {
	height: 100%;
	width: 100%;
	z-index: 60;
}
#garellyBg_1 img {
	width: 100%;
}
#garellyBg_2 {
	height: 100%;
	width: 100%;
	z-index: 60;
	position: relative;
}
#garellyBg_2 img {	
	position: absolute;
	bottom: 0px;
	width: 100%;
}
#garellyCloud_1 {
	height: 100%;
	width: 100%;
	z-index: 100;
}
#garellyCloud_1 img {
	width: 100%;
}
#garellyCloud_2 {
	height: 100%;
	width: 100%;
	z-index: 100;
	position: relative;
}
#garellyCloud_2 img {	
	position: absolute;
	bottom: 0px;
	width: 100%;
}
#garelly {
	width: 100%;
	height: 100%;
	z-index: 100;
}
#garelly h2 {
	display: block;
	width: 563px;
	height: 259px;
	background: url(../images/garellyTitle.png);
	margin: 20px auto 50px;
	text-indent: -300em;
}


#scroll6 {
	width: 25%;
	height: 100%;
	position: relative;
}

#scroll6 img {
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 1000;
}



#slides_1 {
	width: 100%;
	height: 50%;
	z-index: 1000;
}
#slides_1 ul {
	list-style: none;
	width: 100%;
}
#slides_1 li {
	width: 22%;
	float: left;
	list-style: none;
	margin-right: 3%;
}
#slides_1 li img {
	width: 100%;
}

#slides_2 {
	width: 100%;
	height: 50%;
	z-index: 1000;
}
#slides_2 ul {
	list-style: none;
	width: 100%;
}
#slides_2 li {
	width: 22%;
	float: left;
	list-style: none;
	margin-right: 3%;
}
#slides_2 li img {
	width: 100%;
}
#slides_3 {
	width: 100%;
	height: 50%;
	z-index: 1000;
}
#slides_3 ul {
	list-style: none;
	width: 100%;
}
#slides_3 li {
	width: 22%;
	float: left;
	list-style: none;
	margin-right: 3%;
}
#slides_3 li img {
	width: 100%;
}

#slides_4 {
	width: 100%;
	height: 50%;
	z-index: 1000;
	text-align: center;
}
#slides_4 img {
	margin-top: 25%;
	width: 70%;
	z-index: 1000;
	text-align: center;
}


#garellyDragon {
	width: 130%;
	height: 100%;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	layout-grid-line:100%;
}
#garellyDragon img {
	width: 100%;
	z-index: 30;
	vertical-align:middle;
}

#garellyLogo {
	width: 700px;
	height: 251px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	position: relative;
}
#garellyLogo img {
	width: 100%;
	z-index: 50;
	vertical-align:middle;
}

#scroll3 {
	width: 25%;
	height: 100%;
	position: relative;
}

#scroll3 img {
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 1000;
}




/* ==========================================================================================================

	 4.ショップ
 
============================================================================================================*/

#shop {
	background: #FFF;
	width: 100%;
	height: 1700px;
	z-index: 50;
}
#shopLady {
	z-index: 90;
	width: 110%;
	height: 100%;
	position: relative;
}
#shopLady img {
	z-index: 90;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
#shopTitle {
	width: 100%;
	height: 100%;	
	z-index: 70;
	text-align: center;
}
#shopTitle img {
	width: 90%;
	z-index: 70;
}
#shopBt {
	width: 100%;
	height: 100%;
	z-index: 100;
	position: relative; 
}
#shopBt img {
	width: 20%;
	z-index: 100;
	margin-top: 51%;
	margin-left: 18.2%;
}
#shopTag {
	width: 100%;
	height: 100%;
	z-index: 50;
}
#shopTag img {
	width: 87%;
	z-index: 50;
}
#karasu {
	z-index: 70;
}
#karasuHane1 {
	z-index: 70;
}
#karasuHane2 {
	z-index: 70;
}

#scroll4 {
	width: 25%;
	height: 100%;
	position: relative;
}

#scroll4 img {
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 1000;
}

/* ==========================================================================================================

	 5.ブログ
 
============================================================================================================*/

#blogBg_1 {
	width: 100%;
	height: 100%;
}
#blogBg_1 img {
	width: 100%;
	z-index: 30;
}
#blogBg_2 {
	width: 100%;
	height: 100%;
	position: relative;
}
#blogBg_2 img {
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 30;
}

#cat {
	z-index: 45;
	width: 100%;
	height: 100%;
}
#cat img {
	height: 50%;
}

#dog {
	z-index: 45;
	width: 100%;
	height: 100%;
	position: relative;
}
#dog img {
	height: 45%;
	position: absolute;
	right: 0px;
	bottom: 0px;

}
#blogH2 {
	width: 100%;
	height: 432px;
	z-index: 40;
	background: url(../images/blogBg.png) repeat-x left top;
	text-align: center;
}
#blogLink {
	width: 100%;
	padding-top: 20%;
	height: 20%;
	z-index: 120;
	position:relative;
	text-align: center;
}
#blogLink p {
	text-align: center;
}
#blogLink img {
	width: 35%;
	margin: auto;
}
#blogH2 h2{
	display: block;
	background: url(../images/blogTitle.png);
	height: 242px;
	width: 509px;
	margin: auto;
	text-indent: -300em;
	z-index: 50;
}
#blogH2 img {
	width: 40%;
	z-index: 100;
}

#scroll5 {
	width: 25%;
	height: 100%;
	position: relative;
}

#scroll5 img {
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 1000;
}
/* ==========================================================================================================

	 6.ショップリスト
 
============================================================================================================*/

#listBg {
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index: 60;
	text-align: center;
}
#map {
	width: 100%;
	height: 100%;
	z-index: 70;
}
#map table {
	width: 100%;
	height: 100%;
}
#map img {
	width: 90%;
	z-index: 70;
}
#list {
	z-index: 90;
	width: 82%;
	height: 220%;
	background: url(../images/listBg.png) repeat;
}
#list p {
	margin: 15px 0px;
	text-align: center;
}
#list ul {
	margin: 4%;
}
#list li {
	margin-bottom: 4%;
	position: relative;
}
#list li img {
	width: 90%;
}
#list li a img {
	width: 15%;
	position: absolute;
	right: 0px;
	top: 5px;
}

#bird1 {
	width: 100%;
	height: 30%;
	z-index: 80;
	position:relative;
}
#bird1 img{
	position:absolute;
	right: 0;
	top: 100;
	height:100%;
	z-index: 80;
}
#bird2 {
	width: 100%;
	height: 30%;
	z-index: 80;
}
#bird2 img{
	height:100%;
	z-index: 80;
}
#bird3 {
	width: 100%;
	height: 30%;
	z-index: 80;
	position:relative;
}
#bird3 img{
	position:absolute;
	right: 0;
	top: 100;
	height:100%;
	z-index: 80;
}
/* ==========================================================================================================

	 6.コンタクト
 
============================================================================================================*/

#contactBg {
	width: 100%;
	height: 1200px;
	background: #000;
	z-index: 60;
}
#contactDragon {
	z-index: 70;
}

#contactCroud {
	z-index: 80;
}
#contactH2 {
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 200;
}
#contactH2 img {
	width: 60%;
	z-index: 200;
}
#contactLady {
	width: 100%;
	height: 100%;
	z-index: 100;
	position: relative;
	text-align: center;
}
#contactLady table{
	width: 100%;
	height: 100%;
	z-index: 100;
}
#contactLady img {
	width: 75%;
	z-index: 100;
}


#null  {
	width: 100%;
	padding-top: 0%;
	height: 20%;
	z-index: 120;
}
#null  img {
	width: 1%;
	margin: auto;
}