@charset "utf-8";
/* CSS Document */
/* ---------------------------------------------------------------- */
/* reset */
/* ---------------------------------------------------------------- */
body,
div,
ul,ol,li,
di,dt,dd,
h1,h2,h3,h4,h5,h6,
pre,
form,fieldset,input,textarea,
p,blockquote,
th,td, dl, dt, dd{
	margin:0;
	padding:0;
}
ul, ol, li{ list-style: none;}
img{ border:none; vertical-align: bottom; }

.clf:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	font-size: 0;
	visibility:hidden;
}

/* ---------------------------------------------------------------- */
/* common */
/* ---------------------------------------------------------------- */
body{
	/*font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	color: #000000;
	font-size: 14px;
}
.tagbox,
.tagbox ifreme{
	height: 0;
	font-size: 0;
	line-height: 0;
}
/* web-font */
/*@font-face {
	font-family: "Hannari";
	src: url('/assets/beauty/refa/font/hannari.eot') format('embedded-opentype');
	src: url('/assets/beauty/refa/font/hannari.eot?#iefix') format('embedded-opentype'),
		 url('/assets/beauty/refa/font/hannari.woff') format('woff'),
		 url('/assets/beauty/refa/font/hannari.woff2') format('woff2'),
		 url('/assets/beauty/refa/font/hannari.ttf') format('truetype');
}
*/
/*.fnt-hannari { font-family: 'Hannari'; }*/
body .fnt-hannari { font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; }
/*
@font-face {
	font-family: "Noto Sans";
	font-weight: 900;
	src: url('/assets/beauty/refa/font/notosansbold.eot') format('embedded-opentype');
	src: url('/assets/beauty/refa/font/notosansbold.eot?#iefix') format('embedded-opentype'),
		 url('/assets/beauty/refa/font/notosansbold.woff') format('woff'),
		 url('/assets/beauty/refa/font/notosansbold.woff2') format('woff2'),
		 url('/assets/beauty/refa/font/notosansbold.ttf') format('truetype');
}
@font-face {
	font-family: "Noto Sans";
	font-weight: normal;
	src: url('/assets/beauty/refa/font/notosansregular.eot') format('embedded-opentype');
	src: url('/assets/beauty/refa/font/notosansregular.eot?#iefix') format('embedded-opentype'),
		 url('/assets/beauty/refa/font/notosansregular.woff') format('woff'),
		 url('/assets/beauty/refa/font/notosansregular.woff2') format('woff2'),
		 url('/assets/beauty/refa/font/notosansregular.ttf') format('truetype');
}
@font-face {
	font-family: "Noto Sans UI";
	font-weight: 900;
	src: url('/assets/beauty/refa/font/notosansuibold.eot') format('embedded-opentype');
	src: url('/assets/beauty/refa/font/notosansuibold.eot?#iefix') format('embedded-opentype'),
		 url('/assets/beauty/refa/font/notosansuibold.woff') format('woff'),
		 url('/assets/beauty/refa/font/notosansuibold.woff2') format('woff2'),
		 url('/assets/beauty/refa/font/notosansuibold.ttf') format('truetype');
}
@font-face {
	font-family: "Noto Sans UI";
	font-weight: normal;
	src: url('/assets/beauty/refa/font/notosansui.eot') format('embedded-opentype');
	src: url('/assets/beauty/refa/font/notosansui.eot?#iefix') format('embedded-opentype'),
		 url('/assets/beauty/refa/font/notosansui.woff') format('woff'),
		 url('/assets/beauty/refa/font/notosansui.woff2') format('woff2'),
		 url('/assets/beauty/refa/font/notosansui.ttf') format('truetype');
}
*/
.fnt-notosan { font-family: 'Noto Sans'; }
.fnt-notosanui { font-family: 'Noto Sans UI'; }

/* width */
.l-inner{ max-width: 960px; width: 100%; margin-right: auto; margin-left: auto; }
@media screen and (max-width: 767px) {
	.l-inner{ width: 100%; }
}

/* pc--sp */
.pcnone-inline, .pcnone{ display: none; }
.spnone-inline{ display: inline-block; }
.spnone{ display: block; }
@media screen and (max-width: 960px) {
	.spnone-inline, .spnone{ display: none; }
	.pcnone-inline{ display: inline-block; }
	.pcnone{ display: block; }
}
@media screen and (max-width: 767px) {
	.spnone-inline, .spnone{ display: none; }
	.pcnone-inline{ display: inline-block; }
	.pcnone{ display: block; }
}

.ftw130{
	display: inline-block;
	
	/*-moz-transform: scale(1.3,1); */ /* Firefox※ */
	/*-webkit-transform: scale(1.3,1);*/  /* Chrome,Safari */
	/*-o-transform: scale(1.3,1); */ /* 旧Opera※ */
	/*-ms-transform: scale(1.3,1);*/  /* IE */
	/*transform: scale(1.3,1); */ /* CSS3 */
}
_::-webkit-full-page-media, _:future, :root .ftw130 {
   -webkit-transform: scale( 1.25, 1 );  /* Chrome,Safari */
}

.trf_topleft{
	-moz-transform-origin: left top; /* Firefox※ */
	-webkit-transform-origin: left top; /* Chrome,Safari */
	-o-transform-origin: left top; /* 旧Opera※ */
	-ms-transform-origin: left top; /* IE */
	transform-origin: left top; /* CSS3 */
}
/*
.ltsp-2{ letter-spacing: -0.2em; }
.ltsp-23{ letter-spacing: -0.21em; }
*/
.ov07{
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	opacity:1;
	filter: alpha(opacity=1);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=1)";  /* ie 8 */
}
.ov07:hover{
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
}
.wrapper_ {
    padding-top: 0;
}


/* ---------------------------------------------------------------- */
/* ヘッダー */
/* ---------------------------------------------------------------- */
#header_wrap{ max-width: 100%; background: #dcdddc; }
#header_wrap > .l-inner{
	padding: 10px 0;
	font-size: 0;
}
@media screen and (max-width: 767px) {
	#header_wrap{ min-width: 100%; }
	#header_wrap > .l-inner{ padding: 1.3% 0; }
	#header_wrap > .l-inner img{
		width: 17%;
		padding-left: 1.6%;
	}
}

/* ---------------------------------------------------------------- */
/* CUSTOMER SUPPORT カスタマーサポート */
/* ---------------------------------------------------------------- */
#cs_wrap {
	/*min-width: 1050px;*/
    min-width: 768px;
	background: #f1f1f1;
    border-top: 1px solid #EAEAEA;
}
#cs_wrap > .l-inner { padding:90px 0 30px;}
@media screen and (max-width: 960px) {
    #cs_wrap > .l-inner {
        padding:90px 0.7rem 30px;
    }
}
/*#cs_wrap .l-inner .l_box {
	width: 48%;
	float: left;
}
#cs_wrap .l-inner .r_box {
	width: 48%;
	float: right;
}*/
#cs_wrap h4 {
	font-size: 32px;
	font-weight: normal;
	color: #554e4e;
	margin-bottom: 55px;
	line-height: 1.2;
}
#cs_wrap h3 {
	font-size: 15px;
	font-weight: normal;
	border-bottom: 1px solid #bfbfbf;
	padding-bottom: 4px;
	margin-bottom: 14px;
}

#cs_wrap .f-inner{
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}

#cs_wrap .morebox {
	margin-bottom: 45px;
    position: relative;
  flex-basis:460px;
}

#cs_wrap .f-inner .morebox.od01 {
order: 1;
}
#cs_wrap .f-inner .morebox.od02 {
order: 2;
}
#cs_wrap .f-inner .morebox.od03 {
order: 3;
}
#cs_wrap .f-inner .morebox.od04 {
order: 4;
}
#cs_wrap .f-inner .morebox.od05 {
order: 5;
}
#cs_wrap .f-inner .morebox.od06 {
order: 6;
}
@media screen and (max-width: 960px) {
#cs_wrap .morebox {
  flex-basis:48% !important;
}
  }

#cs_wrap p {
	font-size: 13px;
    color: #333333;
}
#cs_wrap a {
	color: #06c;
	text-decoration: none;
}
#cs_wrap a:hover {
	text-decoration: underline;
}
#cs_wrap a:hover img {
	filter:alpha(opacity=75);
   -moz-opacity: 0.75;
   opacity: 0.75;
}
#cs_wrap .img01 {
	width: 199px;
	height: 85px;
}
#cs_wrap .img02 {
	width: 146px;
	height: 34px;
}

#cs_wrap table {
	width: 100%;
	border: 1px solid #e5e5e5;
	border-collapse: collapse;
	border-spacing: 0;
}
#cs_wrap table th {
	border: 1px solid #e5e5e5;
	background:  #434343;
	color: #fff;
	font-size: 12px;
	padding: 3px;
	font-weight: normal;
}
#cs_wrap table td {
	border: 1px solid #e5e5e5;
	background:  #fff;
	color: #333;
	font-size: 13px;
	text-align: center;
	padding: 5px;
}

.fs75 { font-size: 75%;}
.fs85 { font-size: 85%;}
/* ls 
.ls03 {letter-spacing: -0.03em;}
*/
.mb10 { margin-bottom: 10px;}
.mb20 { margin-bottom: 20px;}


/*----------- for sp ----------*/
@media screen and (max-width: 767px) {
	#cs_wrap{ min-width: 100%; }
	#cs_wrap .l-inner{
		width: 84%;
		padding: 45px 0 0;
	}
	#cs_wrap .l-inner .l_box, #cs_wrap .l-inner .r_box  {
		width: 100%;
		float: none;
	}
	#cs_wrap h4 {
		font-size: 5.3vw;/*40px*/
		text-align: center;
		margin-bottom: 45px;
	}
	#cs_wrap h3 {
		font-size: 3.7vw;/*28px*/
		text-align: center;
	}
	#cs_wrap h3.btn-more02:after {
		position: absolute;
        content: "";
        right: 0;
        left: 90%;
        top: 1vw;
        margin: auto;
        width: 3.7vw;
        height: 3.7vw;
        background-color: transparent;
        border-right: 1px solid #cccccc;
        border-top: 1px solid #cccccc;
        -ms-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
	}
	#cs_wrap h3.btn-more02.btnactive:after {
        top: 3.5vw;
		-ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
	}
	#cs_wrap .morebox_area {
	display: none;
	margin-bottom: 40px;
	}
	#cs_wrap p {font-size: 3.2vw;}
	#cs_wrap .img01 {
	width: 234px;
	height: 100px;
	}
	#cs_wrap table th {font-size: 2.2vw;}
	#cs_wrap table td {font-size: 2.7vw;}
	
	/* ls 
	.ls03 {letter-spacing: 0;}
	*/
  #cs_wrap .f-inner{
  display: block;
}
}

/* ---------------------------------------------------------------- */
/* フッター footer*/
/* ---------------------------------------------------------------- */
footer p { text-align: center;}
#footer_wrap { /*max-width: 1050px;*/ background: #fff;}
#footer_wrap > .l-inner{}
#footer_wrap #tel_box {
	float: left;
	width: 293px;
	padding: 30px 0 0 1rem;
}
#footer_wrap #tel_box img { width:293px;}

#footer_wrap #mtg_box {
	float: right;
	width: 48%;
	padding: 40px 0 30px;
	text-align: center;
}
#footer_wrap #mtg_box img { width:243px;}
#footer_wrap #mtg_box p.link {
	margin-top: 20px;
	background: #eee;
	color: #575757;
	padding: 9px;
	font-size: 13px;
}
#footer_wrap #mtg_box p.link a {
	color: #575757;
	text-decoration: none;
}
#footer_wrap #mtg_box p.link a:hover {
	color: #575757;
	text-decoration: underline;
}
footer #copyright {
	width: 100%;
	background: #626262;
	color: #fff;
	padding: 20px;
	font-size: 11px;
}

@media screen and (max-width: 767px) {
	footer p { text-align: center;}
	#footer_wrap{
		min-width: 100%;
	}
	#footer_wrap #tel_box {
	float: none;
	width: 100%;
	padding: 30px 0 20px;
	text-align: center;
	}
	#footer_wrap #tel_box img { width:71.2%;}/*267px*/

	#footer_wrap #mtg_box {
	float: none;
	width: 100%;
	padding: 35px 0 20px;
	text-align: center;
	background: #f1f1f1;
	}
	#footer_wrap #mtg_box img { width:52%;}
	#footer_wrap #mtg_box p.link {
	margin-top: 5px;
	background: none;
	color: #575757;
	font-size: 3.2vw;
	}
	footer #copyright {
	min-width: 92%;
	padding: 4%;
	font-size: 2.9vw;
	}

}

/* ---------------------------------------------------------------- */
/* cart-btn */
/* ---------------------------------------------------------------- */
.box-bnr-cart {
 position:fixed;
 background:#b71254;
 bottom:0;
 right:0;
 width:100px;
 height:100px;
 text-align:center;
 z-index:99
}
@media screen and (max-width: 769px) {
 .box-bnr-cart {
  width:60px;
  height:60px
 }
}
@media screen and (width: 768px) {
 .box-bnr-cart {
  width:80px;
  height:80px
 }
}
.box-bnr-cart>a {
 display:block;
 font-size:14px;
 color:#fff;
 margin-top:10px;
 line-height:1.2
}
@media screen and (max-width: 769px) {
 .box-bnr-cart>a {
  font-size:8px;
  margin-top:5px;
  line-height:1.2
 }
}
@media screen and (width: 768px) {
 .box-bnr-cart>a {
  font-size:12px;
  margin-top:10px;
  line-height:1.2
 }
}
.box-bnr-cart>a:before {
 position:relative;
 left:-4px;
 display:block;
 content:"";
 background:url(/assets/beauty/refa/images/i_cart_floatng.svg) no-repeat;
 background-size:contain;
 width:40px;
 height:40px;
 margin:5px auto 10px
}
@media screen and (max-width: 769px) {
 .box-bnr-cart>a:before {
  width:28px;
  height:28px;
  left:-2px;
  margin:0 auto 4px
 }
}
@media screen and (width: 768px) {
 .box-bnr-cart>a:before {
  width:32px;
  height:32px
 }
}


