@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url("../images/bg.jpg") top center repeat;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 640px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
}

/* -----------------COMMON----------------- */
.circle img{
	border-radius: 25%;
}

.bg04-bg06{
	background: url("../images/bg02.jpg") center repeat;
	padding: 40px 0;
}


@media screen and ( max-width: 640px ){
	.bg04-bg06{
		padding: 0;
	}
}

.bg02, .bg08, .bg10 {
	background: url("../images/bg02.jpg") center repeat;
}


.bg08 .hightlight ul, .bg10 .hightlight ul{
	background: url("../images/boxcolor-p.jpg") repeat;
	border-radius: 30px;
}

.scene .font p{
	color: #fff;
}
/* -----------------H2----------------- */

.bg01 .titleR h2, .bg03 .titleR h2, .bg07 .titleR h2, .bg09 .titleR h2, .bg11 .titleR h2{
	background: url("../images/h2bg01.png") center no-repeat;
	height: 81px;
	padding: 15px 0 0 ;
	color: #18398a;
}

.bg02 .titleR h2, .bg08 .titleR h2, .bg10 .titleR h2{
	background: url("../images/h2bg02.png") center no-repeat;
	height: 81px;
	padding: 15px 0 0 ;
	color: #fff;
}

@media screen and ( max-width: 640px ){
	.bg01 .titleR h2, .bg03 .titleR h2, .bg07 .titleR h2, .bg09 .titleR h2, .bg11 .titleR h2{
		background: url("../images/h2bg01_m.png") center no-repeat;
		background-size: 95vw;
		height: 81px;
		padding: 6vw 0 0 ;
		color: #ff5c5c;
	}
	
	.bg02 .titleR h2, .bg08 .titleR h2, .bg10 .titleR h2{
		background: url("../images/h2bg02_m.png") center no-repeat;
		background-size: 95vw;
		height: 81px;
		padding: 6vw 0 0 ;
	}
	
}

.bg04 .titleR h2, .bg05 .titleR h2, .bg06 .titleR h2{
	background: url("../images/boxcolor-y.jpg") repeat;
	width: 600px;
	margin: 0 auto;
	padding: 17px 0;
	border-radius: 50px;
}

@media screen and ( max-width: 640px ){
	.bg04 .titleR h2, .bg05 .titleR h2, .bg06 .titleR h2{
		width: 90vw;
		padding: 22px 0;
	}
	
}

/* -----------------bg01----------------- */

.bg01{
	padding: 40px 0;
}

.bg01 .bg01box{
	background: url("../images/boxcolor-p.jpg");
	margin: 0 auto;
	padding: 20px 0 5px 0;
	border-radius: 30px;
	max-width: 1180px;
}

.bg01 .titleR h2{
	margin: 0 auto 20px;
}

@media screen and ( max-width: 640px ){
	.bg01{
		background: url("../images/boxcolor-p.jpg");
		padding: 5vw 0;
	}

	.bg01 .bg01box{
		padding: 0;
		border-radius: 0;
	}

	.bg01 .titleR h2{
		margin: 0 auto 3vw;
		padding: vw 0 0 0;
	}
	
}

/* -----------------bg02----------------- */

.bg02{
	padding: 40px 0 1px;
}

.bg02 .titleR h2{
	margin: 0 auto 20px;
}

@media screen and ( max-width: 640px ){
	.bg02{
		padding: 5vw 0;
	}

	.bg02 .titleR h2{
		margin: 0 auto 3vw;
	}
	
}


/* -----------------bg03----------------- */

.bg03{
	padding: 40px 0 0;
}


@media screen and ( max-width: 640px ){
	.bg03{
		padding: 5vw 0 8vw;
	}

	.bg03 .titleR h2{
		margin: 0 auto 1vw;
	}
	
}
/* -----------------bg04----------------- */

.bg04 {
	background: url("../images/boxcolor-p.jpg") repeat;
	max-width: 1180px;
	padding: 20px 0 5px 0;
	margin: 0 auto 40px;
	border-radius: 30px;
}

.bg04 .titleR h2{
	color: #ff5c5c;
}

@media screen and ( max-width: 640px ){
	.bg04 {
		padding: 8vw 0 5vw;
		margin: 0 auto;
		border-radius: 0;
	}
}

/* -----------------bg05----------------- */

.bg05 {
	background: url("../images/boxcolor-g.jpg") repeat;
	max-width: 1180px;
	padding: 20px 0 5px 0;
	margin: 0 auto 40px;
	border-radius: 30px;
}

@media screen and ( max-width: 640px ){
	.bg05 {
		padding: 8vw 0 5vw;
		margin: 0 auto;
		border-radius: 0;
	}
}

.bg05 .titleR h2{
	color: #599e85;
}


/* -----------------bg06----------------- */

.bg06 {
	background: url("../images/boxcolor-o.jpg") repeat;
	max-width: 1180px;
	padding: 20px 0 5px 0;
	margin: 0 auto;
	border-radius: 30px;
}

@media screen and ( max-width: 640px ){
	.bg06 {
		padding: 8vw 0 5vw;
		margin: 0 auto;
		border-radius: 0;
	}
}

.bg06 .titleR h2{
	color: #ff8416;
}


/* -----------------bg07----------------- */

.bg07{
	padding: 40px 0 0;
}

@media screen and ( max-width: 640px ){
	.bg07{
		padding: 5vw 0 5vw;
	}
}

/* -----------------bg08----------------- */

.bg08{
	padding: 40px 0 5px;
}

.bg08 .hightlight .scene span .price {
	text-align: right;
	font-size: 1.2rem;
	color: #fff;
}

.bg08 .hightlight .scene span .price big{
	color: #f7ff77;
}

@media screen and ( max-width: 640px ){
	.bg08{
		background: url("../images/boxcolor-p.jpg") repeat;
		padding: 5vw 0;
	}

	.bg08box .half ul{
		padding: 0;
	}

	.bg08 .titleR h2{
		background: url("../images/h2bg01_m.png") center no-repeat;
		background-size: 90vw;
		color: #ff5c5c;
	}
}

/* -----------------bg09----------------- */

.bg09{
	padding: 40px 0 1px;
}

@media screen and ( max-width: 640px ){
	.bg09{
		padding: 5vw 0;
	}
}

/* -----------------bg10----------------- */

.bg10{
	padding: 40px 0 5px;
}

@media screen and ( max-width: 640px ){
	.bg10{
		background: url("../images/boxcolor-p.jpg") repeat;
		padding: 5vw 0;
	}

	.bg10box .half ul{
		padding: 0;
	}

	.bg10 .titleR h2{
		background: url("../images/h2bg01_m.png") center no-repeat;
		background-size: 90vw;
		color: #ff5c5c;
	}
}

/* -----------------bg11----------------- */

.bg11{
	padding: 40px 0 1px;
}

.bg11 .circle img{
	object-fit: contain;
	padding: 10px;
}

@media screen and ( max-width: 640px ){
	.bg11{
		padding: 5vw 0 0;
	}

	.bg11 .circle img{
		padding: 0.5vw;
	}
}


/* -----------------版頭----------------- */

.title01{
	position: absolute;
	top: 153px;
	left: 370px;
}
.title02{
	position: absolute;
	top: 280px;
	left: 468px;
}
.sale{
	position: absolute;
	top: 385px;
	left: 323px;
}
.earring{
	position: absolute;
	top: 175px;
	left: 20px;
}
.beauty{
	position: absolute;
	top: 80px;
	right: 30px;
}
.bag{
	position: absolute;
	top: 385px;
	right: 150px;
}










/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 640px ){
	#gotop {bottom: 2vw;right: 0;margin: 2vw;	}
	}