@charset "utf-8";


.mode_pc { display:block; }
.mode_pcs { display:block; }
.mode_sp { display:none;visibility:hidden; }
.mode_sps { display:none;visibility:hidden; }
.nsbr { white-space:nowrap; }
.urlstr { word-break:break-all !important;word-wrap:break-word; overflow-wrap:break-word; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* ---------- basic area ---------- */
.cols11, .cols11f { width:100%;clear:both; }
.cols21, .cols21f { width:50%;float:left;margin:0; }
.cols31, .cols31f { width:33.2%;float:left;margin:0; }
.cols32 { width:66.4%;float:left;margin:0; }
.cols41, .cols41f { width:25%;float:left;margin:0; }
.cols43 { width:75%;;float:left;margin:0; }


.igmap { position: relative; padding-top: 75%; height: 0; overflow: hidden; }
.igmap iframe, .igmap object, .igmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* -------------------- Universal -------------------- */
#pagecontents {
	width:100%;
	margin:0 auto;
	max-width:1260px;
	font-size:100%;
	color:#707070;
}

#pagecontents p { line-height:1.8;margin:0 0 1em 0; font-size:100%; }


h1.pagetitle {
	font-size:200%;
	padding:0;
	margin:40px 10px;
	letter-spacing:0.25em;
	text-align:center;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
}

.section_pg_title {
    text-align: center;
    font-size: 140%;
    color: #707070;
    padding: 70px 10px 40px 10px;
    margin:0;
}
.section_pg_title span {
    padding-bottom: 2px;
    border-bottom: 1px #707070 solid;
}


a.txt_banner {
	padding:5px 30px 5px 20px;
/*	background:url('../images/common/txt_arrow_w.png') right center no-repeat #9fa0a0;	*/
	font-size:100%;
	color:#ffffff;
	text-decoration:none;
	border-radius:2px;
}
a.txt_banner:hover {
/*	background:url('../images/common/txt_arrow_w.png') right center no-repeat #82B6BD;	*/
}

.page_bottom_link {
	padding-top:40px;
	padding-bottom:30px;
}


#colorbox, #cboxContent, #cboxLoadedContent {
	box-sizing:content-box !important;
}

.photo_img_cols>a>img:hover {
	opacity:0.8;
}
.photo_img_cols span.caption {
	position:absolute;
	right:0;
	bottom:0;
	text-align:right;
	padding:5px;
	color:#707070;
	font-size:80%;
	text-shadow:1px 1px 1px #ffffff, -1px -1px 1px #ffffff,1px -1px 1px #ffffff, -1px 1px 1px #ffffff;
}

.youtube_wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 2px;
	height: 0;
	overflow: hidden;
}

.youtube_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.backbt_line {
	text-align:center;
	margin:80px auto 80px auto !important;
}
/* -------------------- /Universal -------------------- */


#fixnavi {
	position:fixed;
	display:block;
	width:54px;
	right:0;
	top:260px;
	margin:0;padding:0;
	z-index:320;
	transition-duration:0.5s;
}
#fixnavi ul { margin:0;padding:0; list-style:none; }
#fixnavi ul li a {
	display:block;
	width:52px; height:240px;
	border-left:1px #929292 solid;
	border-top:1px #929292 solid;
	background-repeat:no-repeat;
	background-position:center center;
	text-indent:-9999px;
	background-color:#fafafa;
	opacity:0.8;
	transition-duration:0.2s;
}
#fixnavi ul li:last-child a { border-bottom:1px #929292 solid; }
#fixnavi ul li a:hover { background-color:#ffffff; opacity:1.0; }
.vtxt_shop { background-image:url('../images/common/vtext_shop.png'); }



/* --------- dl table ------ */
dl.dl_table, dt, dd { margin: 0; padding: 0; }
dl.dl_table { background: #f7f7f7; border: 1px solid #aaaaaa; border-top: none; }
dl.dl_table dt, dl.dl_table dd { padding: 6px; line-height:1.5; }
dl.dl_table dt { border-top: 1px solid #aaaaaa; clear: both; float: left; width: 148px; }
dl.dl_table dd { background: #fff; border-left: 1px solid #aaaaaa; border-top: 1px solid #aaaaaa; margin-left: 160px; }


/* ------- rwd table ------ */
.std_table, .std_table_fix { width:100%; margin-top:20px; }
.std_table caption, .std_table_fix caption { font-size:110% !important; color:#003399; }
.std_table th, .std_table td, .std_table_fix th, .std_table_fix td { padding:6px 6px; border:1px #ffffff solid; font-size:90%; line-height:1.5; vertical-align:top; }
.std_table th, .std_table_fix th { background-color:#e0e0e0; text-align:left; font-weight:normal; }
.std_table td, .std_table_fix td { background-color:#f0f0f0; text-align:left; }


/* ----- pagination ----- */
.pmove_navi { clear: both; font-size: 80%; margin: 20px auto 0 auto; text-align: center; width: 100%; }
.pmove_navi_prev { color: #333333; float: left; text-align: left; width: 15%; }
.pmove_navi_prev a { color: #333333; text-decoration: none; }
.pmove_navi_no { float: left; text-align: center; width: 70%; }
.pmove_navi_no a { color: #333366; text-decoration: none; }
.pmove_navi_next { float: left; text-align: right; width: 15%; }
.pmove_navi_next a { color: #333333; text-decoration: none; }
.pmove_navi_dis { color: #cccccc; }
.pmove_navi_this { color: #cc0000; }
.pmove_pos { clear: both; color: #333333; padding: 10px; text-align: center; }
.pmove_nolist { padding: 100px 0; text-align: center; }




noscript p { display:block; color:#ff0000; margin:0; padding:10px; background-color:#FFFFCC; text-align:center; }
.getadobereader { border: 1px solid #888888; border-radius: 10px; display: block; font-size: 90%; margin: 50px auto; width:80%; padding: 18px 24px; }
.getadobereader p { margin-bottom: 1em; }
.sp-pageTop { padding:0; background-color:#BBE2E8; text-align:center; }
.sp-pageTop a, .sp-pageTop a:hover { display:block; font-size:90%; text-decoration:none; color:#231815 !important; padding:16px 0; }



/* add cate menu */
#menunavi {
	position:relative;
	max-width:1280px;
	margin:16px auto;
	text-align:center;
}

.skincarecate { margin:0; padding:0; display:flex; }
.skincarecate>li {
	flex:1 1 20%;
	box-sizing:border-box;
	margin:0;
	border-right:1px #cccccc solid;
	color:#707070;
	font-size:125%;
	list-style:none
}
.skincarecate>li:last-child { border-right:none; flex:0 0 100px }
.skincarecate li span, .skincarecate li a {
	cursor:pointer;
	display:block;
	padding:8px; 
	transition-duration:0.2s;
	text-decoration:none;
	color:#707070
}
.skincarecate li span.active, .gvcate li span:hover { background-color:#e8e8e8; }
.skincarecate li ul.gvitem {
	position:absolute !important;
	left:0;top:38px;
	width:100%;
	margin:0;
	padding:20px 0;
	display:none;
	text-align:center;
	background-color:#ffffff;
	z-index:150;
	box-shadow:3px 3px 8px #707070;
	display:flex; justify-content:center; flex-wrap:wrap;
}
.skincarecate li.skincare_cate_sns a { display:inline-block; padding:3px 3px; line-height:1; }
.skincarecate li.skincare_cate_sns img { display:inline-block; height:30px; }

.gvitem li { flex:0 0 12.5%; list-style:none;}
.gvitem li:hover { opacity:0.7; }
.gvitem li a { display:block;width:148px; text-decoration:none; color:#717171; }
.gvitem li a span.navi_item_name { font-size:0.75rem; line-height:1.2; text-align:center;background-color:#ffffff;padding:0 5px !important; }
.gvitem li a img { height:120px; padding:10px 10px 0 10px;}
.gvitem_close {
	position:absolute;
	top:10px;right:30px;
	cursor:pointer;
}



.buyline { position:absolute !important; bottom:0px; padding:0; margin:0; width:100%; text-align:center; background-color:rgb(255,255,255,0.25); line-height:0; }
.buyline a {
	font-size:1.0rem; text-decoration:none; line-height:1.2; font-weight:bold;
	display:inline-block; margin:0; padding:8px; color:#D45C8A;
	text-shadow:1px 1px 1px rgb(255,255,255,0.8),1px -1px 1px rgb(255,255,255,0.8),-1px 1px 1px rgb(255,255,255,0.8),-1px -1px 1px rgb(255,255,255,0.8);
}
.buyline a:after { content:' ＞'; }
.buyline a:hover { color:#B9161C; }




/* # vertical button Reserve
========================================================================================= */
@media only screen and (max-width: 1300px) {
	.common_page { padding:0 60px; }
}

/* # Small PC 960-1260px
========================================================================================= */
@media only screen and (max-width: 1260px) {



}

/* # Tablet 600-960px
========================================================================================= */
@media only screen and (max-width: 960px) {

	#pagecontents { min-width:320px;width:100%;/* font-size:90%; */}
	.common_page { padding:0 40px 0 10px; }


	.mode_pc { display:none;visibility:hidden; }
	.mode_sp { display:block !important;visibility:visible; }
	.mode_pcs { display:block;visibility:visible; }
	.mode_sps { display:none !important;visibility:hidden; }
	.spacer_pc { display:none; }



	h1.pagetitle {
		font-size:160%;
		padding:0;
		margin:20px 10px;
		letter-spacing:0;
	}



	#menunavi { margin:10px auto; }

	#menunavi.nav_fixed {
		position: fixed;
		top: 60px;
		left: 0;
		width:100%;
		padding-bottom:10px;
		z-index:500;
		background-color:#fff;
		padding:5px 0 5px 0;
		margin-top:0;
	}
	.skincarecate li ul.gvitem { left:0;top:39px; }
	#menunavi.nav_fixed .skincarecate li ul.gvitem { left:0;top:44px; }


	/* --------- dl table ------ */
	dl.dl_table dl,dt,dd {
		margin: 0;
		padding: 0;
	}
	dl.dl_table {
		background: #ffffff;
		border: none;
		border-bottom: 1px solid #aaaaaa;
	}
	dl.dl_table dt, dl.dl_table dd {
		padding: 1%;
		line-height:1.4;
	}
	dl.dl_table dt {
		background-color:#f0f0f0;
		padding-bottom:0;
		font-weight:bold;
	}
	dl.dl_table dt {
		border-top: 1px solid #aaaaaa;
		clear: both;
		float: none;
		width: 98%;
	}
	dl.dl_table dd {
		background: #fff;
		border-left: none;
		border-top: none;
		margin-left: 5%;
	}


	/* ---------- rwd table ---------- */
	.std_table th {
		box-sizing:border-box;
		display:block;
		clear:both;
		width:100%;
	}
	.std_table th a {
		box-sizing:border-box;
		color:inherit;
	}
	.std_table td {
		box-sizing:border-box;
		display:block;
		width:100%;
		float:left;
		text-align:left;
		padding:6px 4px 6px 20px !important;
	}


	#fixnavi { width:40px; bottom:20px; top:auto; display:block !important; }
	#fixnavi ul li a { width:40px; height:150px; background-size:contain; }
	#fixnavi ul li a:hover { background-color:#ffffff; opacity:1.0; }
	
}



/* # Mobile Landscape 480-600px
========================================================================================= */   
@media only screen and (max-width: 767px) {	/* old 600*/


	.mode_pcs { display:none !important;visibility:hidden; }
	.mode_sps { display:block !important;visibility:visible; }
		
	/* ---------- basic area ---------- */
	.cols21 { width:100%;float:none; margin:0px; }
	.cols31 { width:100%;float:left; margin:0px; }
	.cols32 { width:100%;float:left; margin:0px; }
	.cols41 { width:50%;float:left; margin:0px; }
	.cols43 { width:50%;float:left; margin:0px; }


	.skincarecate>li { font-size:95%; }
	.gvitem li { flex:0 0 33%; list-style:none;}
	.gvitem li a { display:block;width:100%; text-decoration:none; color:#717171; }
	.gvitem li a img { height:80px;}
	.gvitem li a span.navi_item_name { font-size:0.65rem;  }

	.skincarecate li ul.gvitem { left:0;top:34px; }
	#menunavi.nav_fixed .skincarecate li ul.gvitem { left:0;top:39px; }


	.skincarecate>li { flex:1 1 auto; }
	.skincarecate>li:last-child { flex:0 0 90px }
	.skincarecate li.skincare_cate_sns a { padding:2px 3px; }
	.skincarecate li.skincare_cate_sns img { height:26px; }

	.buyline a { font-size:0.8rem; }

}

/* # Mobile 320-480px
========================================================================================= */   
@media only screen and (max-width: 480px) {


	.mode_pcc { display:none !important;visibility:hidden; }
	.mode_spc { display:block !important;visibility:visible; }

	/* ---------- basic area ---------- */
	.cols21 { width:100%;float:none; margin:0px; }
	.cols31 { width:100%;float:none; margin:0px; }
	.cols32 { width:100%;float:none; margin:0px; }
	.cols41 { width:50%;float:left; margin:0px; }
	.cols43 { width:50%;float:left; margin:0px; }

	.skincarecate li span, .skincarecate li a { padding:8px 0; }
	.skincarecate>li { font-size:65%; }

	.gvitem li a img { height:70px;}
	.gvitem li a span.navi_item_name { font-size:0.55rem;  }

	.skincarecate li ul.gvitem { left:0;top:28px; }
	#menunavi.nav_fixed .skincarecate li ul.gvitem { left:0;top:33px; }


	.skincarecate>li:last-child { flex:0 0 55px }
	.skincarecate li.skincare_cate_sns a { padding:2px 0 0 0; }
	.skincarecate li.skincare_cate_sns img { height:22px; }


}