html, body{
	width: 100%;
	height:100%;
}

body {
	color: #111111;
	font-family:"Century Gothic", Calibri, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #f9f9f9;
}



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}

.clearfix:after {
	clear: both;
}

.codrops-header,
.codrops-top {
	font-family: 'Lato', Arial, sans-serif;
}

.codrops-header {
	margin: 0 auto 3em;
	padding: 3em;
	text-align: center;
}

.codrops-header h1 {
	margin: 0;
	font-weight: 300;
	font-size: 2.625em;
	line-height: 1.3;
}

.codrops-header span {
	display: block;
	padding: 0 0 0.6em 0.1em;
	font-size: 60%;
	color: #aca89a;
}

/* To Navigation Style */
.codrops-top {
	width: 100%;
	text-transform: uppercase;
	font-size: 0.69em;
	line-height: 2.2;
	font-weight: 400;
	background: rgba(255,255,255,0.3);
}

.codrops-top a {
	display: inline-block;
	padding: 0 1em;
	text-decoration: none;
	letter-spacing: 0.1em;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.4);
	color: #333;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	display: block;
	float: left;
}

.codrops-icon:before {
	margin: 0 4px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

.main {
	margin: 0 auto;
}

#st-trigger-effects {
	z-index: 9999;
	bottom: 15px;
	position: fixed;
	left: 30px;
}

.column:nth-child(2) {
	text-align: left;
	box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.column p {
	font-weight: 300;
	font-size: 2em;
	padding: 0 0 0.5em;
	margin: 0;
	line-height: 1.5;
}

button {
	border: none;
	padding: 0;
	color: #fff;
	font-size: 1em;
	cursor: pointer;
	display: block;
	width: 50px;
	height: 50px;
	outline: none;
	position: absolute;
	left: 0;
	bottom: 0;
}

button:hover {
	background: #2c774b;
}

.info {
	text-align: center;
	font-size: 1.5em;
	margin-top: 3em;
	clear: both;
	padding: 3em 0;
	opacity: 0.7;
	color: #aca89a;
}

.info a {
	font-weight: 700;
	font-size: 0.9em;
}

@media screen and (max-width: 46.0625em) {
	.column {
		width: 100%;
		min-width: auto;
		min-height: auto;
		padding: 2em; 
		text-align: center;
	}

	.column p {
		font-size: 1.5em;
	}

	.column:nth-child(2) {
		text-align: center;
		box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
	}
}

@media screen and (max-width: 25em) {

	.codrops-header {
		font-size: 80%;
	}

	.codrops-top {
		font-size: 120%;
	}

	.codrops-icon span {
		display: none;
	}

}



.script{
	font-family: 'Great Vibes', cursive;
}


/* -----画像相対指定------ */
img.rpi {
    max-width: 100%;
    width:100%;
    height: auto;
    width: auto\9; /* ie8 */
}




/* 初回表示
-------------------------------------------------- */
#first{
position: fixed;
z-index: 99999;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
}

#first p{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 750px;
	height: 421px;
	margin-left: -375px;
	margin-top: -210px;
	display: block;
	}
#first p img {
	position: absolute;
	top: -20px;
	right: -20px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}




/* link
-------------------------------------------------- */

a{
	color: #000;
	text-decoration: underline;
}
a:hover {
	color: #F00000;
}

a:visited {
	color: #999;
}
a, a:hover, a:focus {
	outline: none;
}





/* sideNav
-------------------------------------------------- */
h1{
	margin: 0;
}

aside#title{
	position: fixed;
	top: 0;
	left: 0;
	width: 115px;
	background-color: #FFF;
	height: 100%;
	z-index: 100;
	
}
aside#title h1{
	width: 67px;
	height: auto;
	position: absolute;
	top: 24px;
	left: 23px;
}
aside#title p{
	font-size: 11px;
	position: absolute;
	left: -140px;
	top: 164px;
	-webkit-transform: rotate(90deg);
	   -moz-transform: rotate(90deg);
	    -ms-transform: rotate(90deg);
	     -o-transform: rotate(90deg);
	        transform: rotate(90deg);
	        letter-spacing: 0.1em;
	        line-height: 1;
	        width: 310px;
	        height: 1em;
}




/* page
-------------------------------------------------- */
li#wrap01, li#wrap02, li#wrap03, li#wrap04, li#wrap05, li#wrap06, li#wrap07, li#wrap08, li#wrap09, li#wrap10, li#wrap11, li#wrap12, li#wrap13, li#wrap14 {
	position:relative;
	width: 100%;
	height:1200px;
	display:inline-block;
	_display:inline;
	_zoom:1;
	z-index:2;;
}



/* logo
-------------------------------------------------- */
.logo{
	width: 186px;
	height: auto;
	position: absolute;
	top: 10%;
	z-index: 101;
	left: 10%;
	margin-top: 49px;
	margin-left: 914px;
}


/* movie
-------------------------------------------------- */
#movieWrap {
position: absolute;
z-index: 100;
width: 350px;
height: 192px;
overflow: hidden;
margin-left: 830px;
left: 10%;
margin-top: 380px;
}
#movieWrap iframe {
height: 100% ;
width: 100% ;
}


/* webstore
-------------------------------------------------- */
#webStore{
	position: absolute;
	margin-left: 15%;
	width: 460px;
	height: auto;
	right: -3%;
	margin-top: 16%;
	top: 400px;
	z-index: 10;
}


/* collection
-------------------------------------------------- */
.colWrap {
	position:absolute;
	z-index:1;
	line-height:1;
}


/* page1 News
-------------------------------------------------- */
#col00 {
	height:auto;
	width:814px;
	margin-left:70px;
	margin-top:3%;
	left:5%;
}
	#col00 small p{
		display: block;
		padding-right: 0;
		margin: 0.5em 0 0.5em 0;
	}


#newsWrap {
	width: 600px;
	height: 360px;
	overflow: auto;
	background-color: transparent;
	position: absolute;
	top: 593px;
	left: 300px;
	z-index: 11;
	padding-right: 20px;
}

#newsWrap h2{
	letter-spacing: 0.2em;
}

#newsWrap article {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 2px dotted #111;
}
#newsWrap article:last-child {
	border-bottom: none;
}

#newsWrap article h1 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0.5em;
	line-height: 1.4;
}
#newsWrap article strong {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 1em;
	line-height: 1.4;
}
#newsWrap article p {
	font-size: 11px;
	line-height: 1.6;
}




/* Page2 */
#col01 {
	left:50%;
	height:auto;
	width:276px;
	margin-left:-46%;
	top:-5%;
	margin-top:10%;
}
#col02 {
	height:auto;
	width:642px;
	left:5%;
	margin-left:300px;
}
#col02_2 {
	height:auto;
	margin-top:483px;
	width:431px;
	left:400px;
	margin-left:24%;
}
	#col02_2 small{
		position: absolute;
		top: -88px;
		right: 0;
		text-align: right;
	}
	#col02_2 small p{
		display: block;
		padding-right: 0;
		margin: 0.5em 0 0.5em 0;
	}

#mylm{
	position: absolute;
	width: 467px;
	height: auto;
	top: 410px;
	margin-top: 10%;
	left: -90px;
	margin-left: 24%;
}


/* Page3 */
#col03 {
	left:5%;
	height:auto;
	width:520px;
	margin-left:0;
	margin-top:3%;
}

#col04 {
	height:auto;
	width:400px;
	right:0;
	top:540px;
	z-index:2;
}
#col05 {
	height:auto;
	width:300px;
	left:3%;
	margin-left:841px;
	z-index:3;
	top:-2%;
}
#col06 {
	height:auto;
	width:694px;
	z-index:2;
	left:3%;
	top:-3%;
	margin-top:6%;
}
#thelike {
	position: absolute;
	z-index: 2;
	margin: 6% 0 0 704px;
	top: -3%;
	width: 126px;
	left: 3%;
}


/* Page4 */
#col07 {
	height:auto;
	margin-left:-43%;
	top:17%;
	left:50%;
}
	#col07 p{
		width:60%;
		height: auto;
	}
	#col07 small{
		position: absolute;
		bottom:37px;
		z-index: 3;
		left: 18px;
	}


/* page6 shoplist
-------------------------------------------------- */
#col08 {
	height:auto;
	width:300px;
	left:710px;
	top:0;
	margin-top:10%;
	margin-left:15%;
}
#shoplistWrap{
	font-size: 10px;
	line-height: 1;
	position: absolute;
	left:50%;
	background-color: rgba(255,255,255,0.9);
	padding: 1% 2% 1% 3%;
	margin-left: 60px;
	z-index: 3;
	margin: 0 0 0 -48%;
	top: 1.5%;
}
#shoplistWrap section {
	margin-bottom:40px;
}
#shoplistWrap section:last-child {
	margin-bottom:0;
}
	#shoplistWrap section section {
		margin-bottom: 0;
		margin-left: 1em;
	}
#shoplistWrap h4 {
	font-size: 12px;
	letter-spacing: 0.5em;
}

#japanWrap {
	float: left;
	width: 377px;
}
	#japanWrap ul li{
	margin:0 0 1em 0;
	}
#overseaWrap {
	float: left;
width: 400px;
height: auto;
margin-left: 30px;
}
	#overseaWrap #scroll {
		overflow: auto;
height: 657px;
	}

#shoplistWrap ul {
	padding: 0;
	padding-left:1em;
	padding-bottom:4em;
}
#shoplistWrap dl {
	padding: 0;
	padding-left:1em;
}
	#shoplistWrap dl dt{
	display:inline;
	}
	#shoplistWrap dl dd{
		float:right;
	}
	#shoplistWrap dl dd a {
		color: #111;
		border:1px solid #999;
		padding:0 5px
	}
	#shoplistWrap dl dd a:hover {
		color: #f00;
		border:1px solid #f00;
	}
#shoplistWrap h6 {
	margin-bottom:0;	
}



/* Page6 contact
-------------------------------------------------- */

#contactWrap {
	font-size: 10px;
	line-height: 1.7;
	width: 540px;
	left: -280px;
	margin-left: 28%;
	z-index: 3;
	position: absolute;
	top: -2%;
	margin-top: 4%;
}
#blogBtn{
	position:absolute;
	right:0;
	top:0;
	z-index:2;
	margin:0;
}
#contactWrap h2{
	margin-left:4%;
}
#contactWrap p {
	margin-bottom: 20px;
}

.whiteWrap{
	padding: 3% 5%;
	background-color: rgba(255,255,255,0.9);
}
#col09 {
	left:50%;
	height:auto;
	width:461px;
	margin-left:-44%;
	margin-top:38%;
	top:-12%;
}

#col10 {
	height:auto;
	width:466px;
	margin-top:16%;
	top:0;
	right:-200px;
	margin-right:26%;
}




/* Page7 */
#col11 {
	left:0;
	height:auto;
	width:761px;
	margin-top:5%;
}
	#col11 small{
		position: relative;
		top: -10px;
		left: 130px;
		width: 430px;
		display: block;
	}
	#col11 small p {
		display: block;
	margin: 0.5em 0 0.5em 0;
	}

#col12 {
	height:auto;
	width:633px;
	right:0;
}
	#col12 small{
		position: absolute;
		right: 10px;
		text-align: right;
	}
	#col12 small p{
		display: block;
		padding-right: 0;
		margin: 0.5em 0 0.5em 0;
	}


/* Page8 */
#col13 {
	left:50%;
	height:auto;
	width:395px;
	margin-left:-13%;
	margin-top:3%;
}

#snap1{
	position: absolute;
	left: 50%;
	margin-left: -47%;
	top: -270px;
	margin-top: 35%;
}

#snidelgirlBtn{
	position:absolute;
	margin-left:-1%;
	top:-200px;
	margin-top:29%;
	z-index:2;
	left:80%;
}



/* Page9 links
-------------------------------------------------- */
#wrap08img{
	position: absolute;
	left:50%;
	margin-left: -558px;
	top: 180px;
	margin-top: 13%;
}

#col14 {
	height:auto;
	margin-left:360px;
	width:382px;
	z-index:3;
}

#col15 {
	height:auto;
	width:368px;
	margin-left:742px;
}
#col16 {
	left:0;
	height:auto;
	width:366px;
}

#linksWrap {
	font-size: 12px;
	margin:2% auto 0 auto;
	position: relative;
	height: 410px;
	width: 835px;
	z-index: 4;
}

#linksWrap h2{
	text-align: center;
}

#fashionWrap{
	position: absolute;
	left: 3%;
}
	#fashionWrap p {
		padding: 0.5em 0 0.5em 0;
}

#cosmeWrap {
	position: absolute;
	left: 390px;
}

#foodWrap{
	position: absolute;
	left: 390px;
	top:242px;
}

#linksWrap dl dd {
	margin-left:1em;
}

#linksWrap .whiteWrap {
	padding:3% 3% 1.5% 3%;
}



/* Page10 */
#col17 {
	left:50%;
	height:auto;
	width:640px;
	margin-left:-38%;
	z-index:2;
}
	#col17 small{
		position: absolute;
		top: 286px;
		right: -150px;
	}
	#col17 small p{
		display: block;
		padding-right: 0;
	}

#col18 {
	left:50%;
	height:auto;
	width:901px;
	margin-left:-43%;
	margin-top:337px;
	z-index:1;
}
	#col18 small{
		position: absolute;
		top: 0;
		right: -150px;
	}
	#col18 small p{
		display: block;
		padding-right: 0;
	}





/* page11 recruit
-------------------------------------------------- */
#wrap10 {
	font-size: 10px;
	letter-spacing: 0.1em;
	width: 100%;
}
#wrap10 h2 {
	position: absolute;
	top: 380px;
	left: 37px;
	margin-top: 20%;
}
#wrap10 h3 {
font-size: 14px;
margin-left: 3%;
margin-top: 3%;
}

#wrap10 h4 {
font-size: 12px;
}
#wrap10 h5 {
margin-bottom: 0.5em;
}
#wrap10 #recruit1{
	width: 480px;
	background-color:rgba(255,255,255,0.9);
	padding:1.5% 2.5% 2% 2.5%;
	margin-right:5%;
	position:absolute;
	left:3%;;
	
}
#wrap10 #recruit2{
	width: 640px;
	padding:1.5% 2.5% 2% 2.5%;
	background-color:rgba(255,255,255,0.9);
	position:absolute;
	left:3%;
	margin-left:500px;
	margin-top:3%;
}

#wrap10 strong {
	float: left;
	border:1px solid #999999;
	padding: 0 5px;
	margin-right:1em;
}

.recruitEntry a {
	color: #f00;
	font-size: 12px;
}

div#snap2 {
position: absolute;
right: 0;
top: 0;
z-index: 3;
}



/* page11 */
#col19 {
	left:5%;
	height:auto;
	width:364px;
	top:5%;
}
	#col19 small{
			position: absolute;
			top: 104px;
			right: -135px;
		}
		#col19 small p{
			display: block;
		}
#col20 {
	left:85%;
	height:auto;
	width:394px;
	margin-left:-25%;
}


/* page11 snaps
-------------------------------------------------- */

div#snap3 {
position: absolute;
left: -18%;
margin-left: 20%;
width: 383px;
margin-top: 29%;
}
div#snap4 {
position: absolute;
left: 50%;
margin-left: -17%;
width: 334px;
}
div#snap5 {
position: absolute;
width: 401px;
right: -20%;
margin-right: 20%;
top: -20%;
margin-top: 22%;
}

#snap3 .txt{
	padding-left:150px;
	position:absolute;
	right:-140px;
	top:130px;
}
#snap4 .txt{
	position:absolute;
	left:-240px;
	top:40px;
}
#snap5 .txt{
}





/* page12 */
#col21 {
	left:50%;
	height:auto;
	width:981px;
	margin-left:-490px;
	margin-top:13%;
	top:-10%;
}
	#col21 small{
		position: relative;
		top: -10px;
	}



/* credit */

.colWrap img {
	position:relative;
	z-index:1;
}

.colWrap small{
	font-size:10px;	
}
	.colWrap small p{
	display: inline;
	line-height: 1;
	padding-right: 1em;
	}

.colWrap small em{
	color: #999;
}

.colWrap small strong{
display:block;
font-size: 14px;
padding-top: 0.5em;
}
#col00 small {
	position: absolute;
	top: 0;
	left:0;
	width: 800px;
	margin-top: 540px;
}


ul.tips {
	position:absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
}
	ul.tips li{
		position: absolute;
		background-color: rgba(255,0,0,0.5);
		display: block;
		z-index: 10;
		left: 340px;
		top: 300px;;
	}
	ul.tips li a {
		width: 100px;
		height: 100px;
		display: block;
	}





/* page13 last
-------------------------------------------------- */

#wrap14 #snap6 {
	
}

#snap6 {
	font-size: 10px;
	width: 63%;
	left: 50%;
	margin-left: -31.5%;
	top: -10%;
	margin-top: 24%;
	position: absolute;
	
}

#snap6 img {
	float: left;
	width: 37%;
	display: block;
}

#snap6 div {
	float: right;
background-color: rgba(255,255,255,0.9);
	padding:3% 4% 2% 4%;
	width: 60%;
	margin-left: 3%;
	line-height: 1.8;
}
#snap6 div strong {
	font-size: 18px;
	line-height: 1.2;
}

/* footer
-------------------------------------------------- */

footer {
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:10000;

}
footer small {
	font-size: 9px;
	text-align: right;
	display: block;
	padding-top: 5px;
}