/* カスタマイズ用CSS */

/* PCの場合 */
@media ( min-width : 768px ) {
	.spOnly { display:none !important; }	/* PCでは非表示 */
	
	.pc_br:before { content:"\A"; white-space:pre; }	/* PCでは改行 */
	
	/* フロート解除 */
	.clearfix-pc:before, .clearfix-pc:after { content:""; display:table; }
	.clearfix-pc:after { clear:both; }
	/* For IE 6/7 (trigger hasLayout) */
	.clearfix-pc { zoom:1; }
	
	.flexbox-pc{
		display:-webkit-flex;	/*--- Safari,iOS,android ---*/
		display:flex;
		-webkit-flex-direction:row;	/*--- Safari,iOS,android ---*/
		flex-direction:row;	/*--- 左から右に水平方向に配置 ---*/
	}
	.flex-wrap-pc{ -webkit-flex-wrap:wrap; flex-wrap:wrap; }	/*--- 横複数行(折り返し有り)の配置 ---*/
	.flex-space-between-pc{ -webkit-justify-content:space-between; justify-content:space-between; }	/*--- 最初と最後は端に、残りは等間隔 ---*/
	.flex-center-pc{ -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }	/*--- 中央配置 ---*/
	
	.mt5,  .mt5-10,.mt5-20,.mt5-30,.mt5-40,.mt5-50,.mt5-60,.mt5-70,.mt5-80,.mt5-90,.mt5-100{ margin-top: 5px !important;}
	.mt10, .mt10-5,.mt10-20,.mt10-30,.mt10-40,.mt10-50,.mt10-60,.mt10-70,.mt10-80,.mt10-90,.mt10-100{ margin-top: 10px !important;}
	.mt20, .mt20-5,.mt20-10,.mt20-30,.mt20-40,.mt20-50,.mt20-60,.mt20-70,.mt20-80,.mt20-90,.mt20-100{ margin-top: 20px !important;}
	.mt30, .mt30-5,.mt30-10,.mt30-20,.mt30-40,.mt30-50,.mt30-60,.mt30-70,.mt30-80,.mt30-90,.mt30-100{ margin-top: 30px !important;}
	.mt40, .mt40-5,.mt40-10,.mt40-20,.mt40-30,.mt40-50,.mt40-60,.mt40-70,.mt40-80,.mt40-90,.mt40-100{ margin-top: 40px !important;}
	.mt50, .mt50-5,.mt50-10,.mt50-20,.mt50-30,.mt50-40,.mt50-60,.mt50-70,.mt50-80,.mt50-90,.mt50-100{ margin-top: 50px !important;}
	.mt60, .mt60-5,.mt60-10,.mt60-20,.mt60-30,.mt60-40,.mt60-50,.mt60-70,.mt60-80,.mt60-90,.mt60-100{ margin-top: 60px !important;}
	.mt70, .mt70-5,.mt70-10,.mt70-20,.mt70-30,.mt70-40,.mt70-50,.mt70-60,.mt70-80,.mt70-90,.mt70-100{ margin-top: 70px !important;}
	.mt80, .mt80-5,.mt80-10,.mt80-20,.mt80-30,.mt80-40,.mt80-50,.mt80-60,.mt80-70,.mt80-90,.mt80-100{ margin-top: 80px !important;}
	.mt90, .mt90-5,.mt90-10,.mt90-20,.mt90-30,.mt90-40,.mt90-50,.mt90-60,.mt90-70,.mt90-80,.mt90-100{ margin-top: 90px !important;}
	.mt100,.mt100-5,.mt100-10,.mt100-20,.mt100-30,.mt100-40,.mt100-50,.mt100-60,.mt100-70,.mt100-80,.mt100-90{ margin-top: 100px !important;}
	
	.mb5,  .mb5-10,.mb5-20,.mb5-30,.mb5-40,.mb5-50,.mb5-60,.mb5-70,.mb5-80,.mb5-90,.mb5-100{ margin-bottom: 5px !important;}
	.mb10, .mb10-5,.mb10-20,.mb10-30,.mb10-40,.mb10-50,.mb10-60,.mb10-70,.mb10-80,.mb10-90,.mb10-100{ margin-bottom: 10px !important;}
	.mb20, .mb20-5,.mb20-10,.mb20-30,.mb20-40,.mb20-50,.mb20-60,.mb20-70,.mb20-80,.mb20-90,.mb20-100{ margin-bottom: 20px !important;}
	.mb30, .mb30-5,.mb30-10,.mb30-20,.mb30-40,.mb30-50,.mb30-60,.mb30-70,.mb30-80,.mb30-90,.mb30-100{ margin-bottom: 30px !important;}
	.mb40, .mb40-5,.mb40-10,.mb40-20,.mb40-30,.mb40-50,.mb40-60,.mb40-70,.mb40-80,.mb40-90,.mb40-100{ margin-bottom: 40px !important;}
	.mb50, .mb50-5,.mb50-10,.mb50-20,.mb50-30,.mb50-40,.mb50-60,.mb50-70,.mb50-80,.mb50-90,.mb50-100{ margin-bottom: 50px !important;}
	.mb60, .mb60-5,.mb60-10,.mb60-20,.mb60-30,.mb60-40,.mb60-50,.mb60-70,.mb60-80,.mb60-90,.mb60-100{ margin-bottom: 60px !important;}
	.mb70, .mb70-5,.mb70-10,.mb70-20,.mb70-30,.mb70-40,.mb70-50,.mb70-60,.mb70-80,.mb70-90,.mb70-100{ margin-bottom: 70px !important;}
	.mb80, .mb80-5,.mb80-10,.mb80-20,.mb80-30,.mb80-40,.mb80-50,.mb80-60,.mb80-70,.mb80-90,.mb80-100{ margin-bottom: 80px !important;}
	.mb90, .mb90-5,.mb90-10,.mb90-20,.mb90-30,.mb90-40,.mb90-50,.mb90-60,.mb90-70,.mb90-80,.mb90-100{ margin-bottom: 90px !important;}
	.mb100,.mb100-5,.mb100-10,.mb100-20,.mb100-30,.mb100-40,.mb100-50,.mb100-60,.mb100-70,.mb100-80,.mb100-90{ margin-bottom: 100px !important;}
	
	.mr5,  .mr5-10,.mr5-20,.mr5-30,.mr5-40,.mr5-50,.mr5-60,.mr5-70,.mr5-80,.mr5-90,.mr5-100{ margin-right: 5px !important;}
	.mr10, .mr10-5,.mr10-20,.mr10-30,.mr10-40,.mr10-50,.mr10-60,.mr10-70,.mr10-80,.mr10-90,.mr10-100{ margin-right: 10px !important;}
	.mr20, .mr20-5,.mr20-10,.mr20-30,.mr20-40,.mr20-50,.mr20-60,.mr20-70,.mr20-80,.mr20-90,.mr20-100{ margin-right: 20px !important;}
	.mr30, .mr30-5,.mr30-10,.mr30-20,.mr30-40,.mr30-50,.mr30-60,.mr30-70,.mr30-80,.mr30-90,.mr30-100{ margin-right: 30px !important;}
	.mr40, .mr40-5,.mr40-10,.mr40-20,.mr40-30,.mr40-50,.mr40-60,.mr40-70,.mr40-80,.mr40-90,.mr40-100{ margin-right: 40px !important;}
	.mr50, .mr50-5,.mr50-10,.mr50-20,.mr50-30,.mr50-40,.mr50-60,.mr50-70,.mr50-80,.mr50-90,.mr50-100{ margin-right: 50px !important;}
	
	.ml5,  .ml5-10,.ml5-20,.ml5-30,.ml5-40,.ml5-50,.ml5-60,.ml5-70,.ml5-80,.ml5-90,.ml5-100{ margin-left: 5px !important;}
	.ml10, .ml10-5,.ml10-20,.ml10-30,.ml10-40,.ml10-50,.ml10-60,.ml10-70,.ml10-80,.ml10-90,.ml10-100{ margin-left: 10px !important;}
	.ml20, .ml20-5,.ml20-10,.ml20-30,.ml20-40,.ml20-50,.ml20-60,.ml20-70,.ml20-80,.ml20-90,.ml20-100{ margin-left: 20px !important;}
	.ml30, .ml30-5,.ml30-10,.ml30-20,.ml30-40,.ml30-50,.ml30-60,.ml30-70,.ml30-80,.ml30-90,.ml30-100{ margin-left: 30px !important;}
	.ml40, .ml40-5,.ml40-10,.ml40-20,.ml40-30,.ml40-50,.ml40-60,.ml40-70,.ml40-80,.ml40-90,.ml40-100{ margin-left: 40px !important;}
	.ml50, .ml50-5,.ml50-10,.ml50-20,.ml50-30,.ml50-40,.ml50-60,.ml50-70,.ml50-80,.ml50-90,.ml50-100{ margin-left: 50px !important;}
	
	#news{
	width: 800px;
	margin: 0 auto 30px;
	}

	#news h2{
		font-size: 18px;
		font-weight: 700;
		text-align: center;
	}

	#news p{
		margin: 20px 0 0 0;
		font-size: 14px;
		line-height: 1.2;
	}

	#news dl{
		margin: 30px 0 0 0;
		background-color: #F1F1F1;
	    padding: 20px;
	    box-sizing: border-box;
	}

	#news dl dt{
	    font-weight: 700;
	    font-size: 16px;
	}

	#news dl dd{
		margin: 10px 0 0 0;
	    font-size: 14px;
	}
}


/* スマホの場合 */
@media ( max-width : 767px ) {
	.pcOnly { display:none !important; }	/* スマホでは非表示 */
	
	.sp_br:before { content:"\A"; white-space:pre; }	/* SPでは改行 */
	
	/* フロート解除 */
	.clearfix-sp:before, .clearfix-sp:after { content:""; display:table; }
	.clearfix-sp:after { clear:both; }
	
	.flexbox-sp{
		display:-webkit-flex;	/*--- Safari,iOS,android ---*/
		display:flex;
		-webkit-flex-direction:row;	/*--- Safari,iOS,android ---*/
		flex-direction:row;	/*--- 左から右に水平方向に配置 ---*/
	}
	.flex-wrap-sp{ -webkit-flex-wrap:wrap; flex-wrap:wrap; }	/*--- 横複数行(折り返し有り)の配置 ---*/
	.flex-space-between-sp{ -webkit-justify-content:space-between; justify-content:space-between; }	/*--- 最初と最後は端に、残りは等間隔 ---*/
	.flex-center-sp{ -webkit-box-pack:center; justify-content:center; }	/*--- 中央配置 ---*/
	
	.mt5,.mt10-5,.mt20-5,.mt30-5,.mt40-5,.mt50-5,.mt60-5,.mt70-5,.mt80-5,.mt90-5,.mt100-5 { margin-top: 5px !important;}
	.mt10,.mt5-10,.mt20-10,.mt30-10,.mt40-10,.mt50-10,.mt60-10,.mt70-10,.mt80-10,.mt90-10,.mt100-10 { margin-top: 10px !important;}
	.mt20,.mt5-20,.mt10-20,.mt30-20,.mt40-20,.mt50-20,.mt60-20,.mt70-20,.mt80-20,.mt90-20,.mt100-20 { margin-top: 20px !important;}
	.mt30,.mt5-30,.mt10-30,.mt20-30,.mt40-30,.mt50-30,.mt60-30,.mt70-30,.mt80-30,.mt90-30,.mt100-30 { margin-top: 30px !important;}
	.mt40,.mt5-40,.mt10-40,.mt20-40,.mt30-40,.mt50-40,.mt60-40,.mt70-40,.mt80-40,.mt90-40,.mt100-40 { margin-top: 40px !important;}
	.mt50,.mt5-50,.mt10-50,.mt20-50,.mt30-50,.mt40-50,.mt60-50,.mt70-50,.mt80-50,.mt90-50,.mt100-50 { margin-top: 50px !important;}
	.mt60,.mt5-60,.mt10-60,.mt20-60,.mt30-60,.mt40-60,.mt50-60,.mt70-60,.mt80-60,.mt90-60,.mt100-60 { margin-top: 60px !important;}
	.mt70,.mt5-70,.mt10-70,.mt20-70,.mt30-70,.mt40-70,.mt50-70,.mt60-70,.mt80-70,.mt90-70,.mt100-70 { margin-top: 70px !important;}
	.mt80,.mt5-80,.mt10-80,.mt20-80,.mt30-80,.mt40-80,.mt50-80,.mt60-80,.mt70-80,.mt90-80,.mt100-80 { margin-top: 80px !important;}
	.mt90,.mt5-90,.mt10-90,.mt20-90,.mt30-90,.mt40-90,.mt50-90,.mt60-90,.mt70-90,.mt80-90,.mt100-90 { margin-top: 90px !important;}
	.mt100,.mt5-100,.mt10-100,.mt20-100,.mt30-100,.mt40-100,.mt50-100,.mt60-100,.mt70-100,.mt80-100,.mt90-100 { margin-top: 100px !important;}
	
	.mb5,.mb10-5,.mb20-5,.mb30-5,.mb40-5,.mb50-5,.mb60-5,.mb70-5,.mb80-5,.mb90-5,.mb100-5 { margin-bottom: 5px !important;}
	.mb10,.mb5-10,.mb20-10,.mb30-10,.mb40-10,.mb50-10,.mb60-10,.mb70-10,.mb80-10,.mb90-10,.mb100-10 { margin-bottom: 10px !important;}
	.mb20,.mb5-20,.mb10-20,.mb30-20,.mb40-20,.mb50-20,.mb60-20,.mb70-20,.mb80-20,.mb90-20,.mb100-20 { margin-bottom: 20px !important;}
	.mb30,.mb5-30,.mb10-30,.mb20-30,.mb40-30,.mb50-30,.mb60-30,.mb70-30,.mb80-30,.mb90-30,.mb100-30 { margin-bottom: 30px !important;}
	.mb40,.mb5-40,.mb10-40,.mb20-40,.mb30-40,.mb50-40,.mb60-40,.mb70-40,.mb80-40,.mb90-40,.mb100-40 { margin-bottom: 40px !important;}
	.mb50,.mb5-50,.mb10-50,.mb20-50,.mb30-50,.mb40-50,.mb60-50,.mb70-50,.mb80-50,.mb90-50,.mb100-50 { margin-bottom: 50px !important;}
	.mb60,.mb5-60,.mb10-60,.mb20-60,.mb30-60,.mb40-60,.mb50-60,.mb70-60,.mb80-60,.mb90-60,.mb100-60 { margin-bottom: 60px !important;}
	.mb70,.mb5-70,.mb10-70,.mb20-70,.mb30-70,.mb40-70,.mb50-70,.mb60-70,.mb80-70,.mb90-70,.mb100-70 { margin-bottom: 70px !important;}
	.mb80,.mb5-80,.mb10-80,.mb20-80,.mb30-80,.mb40-80,.mb50-80,.mb60-80,.mb70-80,.mb90-80,.mb100-80 { margin-bottom: 80px !important;}
	.mb90,.mb5-90,.mb10-90,.mb20-90,.mb30-90,.mb40-90,.mb50-90,.mb60-90,.mb70-90,.mb80-90,.mb100-90 { margin-bottom: 90px !important;}
	.mb100,.mb5-100,.mb10-100,.mb20-100,.mb30-100,.mb40-100,.mb50-100,.mb60-100,.mb70-100,.mb80-100,.mb90-100 { margin-bottom: 100px !important;}
	
	.mr5,.mr10-5,.mr20-5,.mr30-5,.mr40-5,.mr50-5,.mr60-5,.mr70-5,.mr80-5,.mr90-5,.mr100-5 { margin-right: 5px !important;}
	.mr10,.mr5-10,.mr20-10,.mr30-10,.mr40-10,.mr50-10,.mr60-10,.mr70-10,.mr80-10,.mr90-10,.mr100-10 { margin-right: 10px !important;}
	.mr20,.mr5-20,.mr10-20,.mr30-20,.mr40-20,.mr50-20,.mr60-20,.mr70-20,.mr80-20,.mr90-20,.mr100-20 { margin-right: 20px !important;}
	.mr30,.mr5-30,.mr10-30,.mr20-30,.mr40-30,.mr50-30,.mr60-30,.mr70-30,.mr80-30,.mr90-30,.mr100-30 { margin-right: 30px !important;}
	.mr40,.mr5-40,.mr10-40,.mr20-40,.mr30-40,.mr50-40,.mr60-40,.mr70-40,.mr80-40,.mr90-40,.mr100-40 { margin-right: 40px !important;}
	.mr50,.mr5-50,.mr10-50,.mr20-50,.mr30-50,.mr40-50,.mr60-50,.mr70-50,.mr80-50,.mr90-50,.mr100-50 { margin-right: 50px !important;}
	
	.ml5,.ml10-5,.ml20-5,.ml30-5,.ml40-5,.ml50-5,.ml60-5,.ml70-5,.ml80-5,.ml90-5,.ml100-5 { margin-left: 5px !important;}
	.ml10,.ml5-10,.ml20-10,.ml30-10,.ml40-10,.ml50-10,.ml60-10,.ml70-10,.ml80-10,.ml90-10,.ml100-10 { margin-left: 10px !important;}
	.ml20,.ml5-20,.ml10-20,.ml30-20,.ml40-20,.ml50-20,.ml60-20,.ml70-20,.ml80-20,.ml90-20,.ml100-20 { margin-left: 20px !important;}
	.ml30,.ml5-30,.ml10-30,.ml20-30,.ml40-30,.ml50-30,.ml60-30,.ml70-30,.ml80-30,.ml90-30,.ml100-30 { margin-left: 30px !important;}
	.ml40,.ml5-40,.ml10-40,.ml20-40,.ml30-40,.ml50-40,.ml60-40,.ml70-40,.ml80-40,.ml90-40,.ml100-40 { margin-left: 40px !important;}
	.ml50,.ml5-50,.ml10-50,.ml20-50,.ml30-50,.ml40-50,.ml60-50,.ml70-50,.ml80-50,.ml90-50,.ml100-50 { margin-left: 50px !important;}
	
	#news{
	width: 90%;
	margin: 0 auto 30px;
}

#news h2{
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

#news p{
	margin: 20px 0 0 0;
	font-size: 12px;
	line-height: 1.2;
}

#news dl{
	margin: 20px 0 0 0;
	background-color: #F1F1F1;
    padding: 10px;
    box-sizing: border-box;
}

#news dl dt{
    font-weight: 700;
    font-size: 14px;
}

#news dl dd{
	margin: 10px 0 0 0;
    font-size: 12px;
}
}

body
{
    /*font-family: 'Noto Serif TC', serif !important;*/
    font-family: 'Noto Serif', serif !important;
    background: white !important;
}

.ec-productRole__description{
    font-family: 'Noto Serif', serif !important;
}

a:hover {
	opacity: 0.7;
}


.ec-headerNav {
    text-align: right;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.ec-headerNaviRole
{
    /* padding-top: 50px; */
    max-width: 1280px;
}

.ec-footerRole .container-fluid
{
     text-align: left;
    max-width: 1100px;
    margin: 0 auto;
}

.col-xs-6{
        line-height: 1.8em;
        font-size: 14px;
    }

.ec-footerRole .footer_address
{
    line-height: 1.8em;
    font-size: 14px;
}

.ec-headerNav__item
{
    margin-right: 20px;
}

.ec-headerSearch .ec-headerSearch__keyword-div
{
    position: relative;
    border: 1px solid black;
    border-radius: 30px;
}

.ec-headerSearch .ec-headerSearch__keyword-div input[type="search"]
{
    width: 100%;
    height: 38px;
    /* font-size: 1.2rem; */
    border: 0 none;
    padding: 0.5em 50px 0.5em 1em;
    box-shadow: none;
    background: none;
    box-sizing: border-box;
    margin-bottom: 0;
}

.ec-headerSearch .ec-headerSearch__keyword-div button[type="submit"]
{
    border: 0;
    background: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-55%);
    display: block;
    white-space: nowrap;
    z-index: 1;
}

.ec-headerSearch .ec-headerSearch__keyword-div button[type="submit"] .ec-icon
{
    width: 28px;
    height: 75%;
}

.ec-footerRole .container-fluid .row .col-md-3 li
{
    text-align: left;
    text-decoration: none;
    color: white;
    list-style: none;
    font-size: 18px;
}

.ec-headerNav .ec-headerNav__item
{
    font-size: unset;
}

.ec-headerNav .header-icon
{
    font-size: 42px;
}

.header_logo
{
    max-width: 375px !important;
    min-width: 150px;
    margin-top: 7px;
    
}

.aff_main_body
{
    /* height: 100%; */
    width: 100%;
}

.login_header
{
    margin-top: 7.5vh;
    text-align: center;
}

.login_body
{
    margin-top: 7.5vh;
    width: 100%;
    height: 100%;
    /*padding: 100px 75px;*/
    background-repeat: no-repeat;
    background: center;
    background-size: cover;
}

.login_body-form
{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 150px 200px;
    background-color: rgb(255, 255, 255, 0.7);
    color: black;
}

.login_body-login__input .login_body-login_btn
{
    background-color: rgb(241, 180, 62);
    font-size: 14px;
    font-weight: bold;
    width: 240px;
    height: 60px;
    border-radius: 45px;
    border-color: transparent;
}

.login_footer
{
    background-color: rgb(0, 0, 0);
    width: 100%;
    /* height: 250px; */
    text-align: center;
    padding-bottom: 20px;
}

.login_logo_footer
{
    margin-top: 75px;
    margin-bottom: 75px;
}

.copyright_text
{
    color: white;
    font-size: 12px;
    vertical-align: text-bottom;
}

        body
        {
            font-family: "Noto Sans Japanese", "EB Garamond";
        }

        /* div.ec-eyecatchRole
        {
            margin-bottom: 0;
            height: 640px !important;
            background-image: url('/html/user_data/assets/img/common/woman_hair_bg.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        } */

        div.text
        {
            text-align: center;
            height: fit-content;
            margin-top: 150px;
            margin-left: 625px;
            padding: 30px 10px;
            background: rgb(255, 255, 255, 0.65);
        }

/*  new_item.twig 記載  */

        body
        {
            font-family: "Noto Sans Japanese", "EB Garamond";
        }

        div.divTitle
        {
            text-align: center;
            font-size: 150%;
            /* background: rgb(246, 244, 239); */
            padding: 20px;
            color: black;
        }

        div.divTitle h1
        {
            margin: 0;
            color: #000;
            font-family: 'Noto Serif TC', serif !important;
        }

        div.divTitle b
        {
            font-size: 36px;
        }

        div.divTitle p
        {
            margin-top: 10px;
            font-size: 14px;
            color: #000;
        }
		
		
		div.divTitle .selector_pro_five_logo,
		div.divTitle .youness_logo{
		    margin: 30px 0 0 0;
		}
		
        li.ec-shelfGrid__item
        {
            width: 33% !important;
            text-align: center;
        }

        a.categoryBtn,
        .categoryBtn
        {
            text-decoration: none;
            color: black;
            background: white;
            padding: 3px 12px;
            border: 1px solid black;
			margin: 0;
        }

        p.ec-newItemRole__listItemPrice
        {
            margin-top: 10px;
        }
        
        a.detailsBtn
        {
            margin-top: 16px;
            text-decoration: none;
            color: black;
            background: rgb(255, 204, 102);
            padding: 12px 12px;
            border: 1px solid transparent;
            border-radius: 25px;  
            font-family: 'Noto Serif TC', serif !important;  
        }

		div.ec-eyecatchRole div.youness
        {
            width: 100% !important;
            background-image: url(/html/user_data/assets/img/toppage/top_youness_image.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

/*  add 2023 02  */

.brand_bnr{
	width:70%;
	margin: 0 auto;
}

.ec-newItemRole__listItemTitle{
    margin: 10px 0 0 0;
    font-size: 14px;
}

.ec-newItemRole__listItemPrice{
     font-size: 14px;
}

.ec-eyecatchRole div.text {
	font-weight:bold;}


.ec-eyecatchRole div.text {
	font-size:80%;}

.ec-shelfGrid .ec-shelfGrid__item img {
	margin-bottom:20px;}


div.col-md-3 a {
    font-size: 90%;}

.ec-shelfGrid__item a.detailsBtn {
    background: rgb(219 192 139)!important;
	max-width:200px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	display:block;
	font-size: 14px;
	}

.ec-drawerRole {
    right:0;
	left:inherit;
    transform: translateX(300px);}

.ec-shelfGrid__item a.categoryBtn,
.ec-shelfGrid__item .categoryBtn
 {
    font-size: 80%;
	}

.ec-drawerRole.is_active {
	left:inherit!important;
	right:0!important;}

.ec-drawerRoleClose.is_active {
	left:inherit!important;
	right:270px!important;}

.login_body-input{
    max-width: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;}

.ec-eyecatchRole__introTitle {
	font-size: 60px !important;}
.ec-eyecatchRole__introDescriptiron {
	font-size: 36px !important;
	line-height: inherit;}


.ec-layoutRole {
    background: #ffffff;}

.ec-headerNav__item
{
    display: inline-block;
	text-align: center;
}

.ec-headerNav__item.icon{
    /*border: 1px solid black;*/
    border-radius: 30px;
    padding: 0;
}

.ec-headerNav__item.icon i{
    font-size: 28px;
}

.ec-headerNav .ec-headerNav__itemLink
{
    margin: 0;
}

.ec-headerNav__item.icon .ec-headerNav__itemLink
{
    vertical-align: unset;
}

@media screen and (max-width:768px) {

.ec-headerNaviRole .ec-headerNaviRole__left {
    width: calc(100% / 2);
}
    
.ec-eyecatchRole .ec-eyecatchRole__introTitle[style] {
	font-size:32px!important;}

.ec-eyecatchRole div.text {
	margin-left:auto!important;
	margin-right:auto!important;
	width:96%;
	margin-top:80px!important;}

.ec-role {
	padding-left:0;
	padding-right:0;}


.parts-lineup-btn {
	margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 250px;
    padding: 0px 36px!important;
    background: rgb(219 192 139)!important;}

.ec-eyecatchRole__intro {
    margin-top: 128px;
    padding: 0 20px;}

div.ec-eyecatchRole.beautiful_hair_care {
    height: 550px !important;
    background-position: top;}

.ec-eyecatchRole__introDescriptiron {
    margin-top: 110px;}

div.ec-eyecatchRole {
    background-size: contain;
	background-position:top;}

img.line-up-img {
    object-fit: cover;}

li.ec-shelfGrid__item {
    width: 50% !important;}


.ec-shelfGrid__item a.categoryBtn,
.ec-shelfGrid__item .categoryBtn  {
    font-size: 75%;}

.ec-shelfGrid__item a.detailsBtn {
    background: rgb(219 192 139)!important;
    width: 60%;
    font-size: 11px;
    padding: 7px 3px;
    letter-spacing: 2px;
    font-family: 'Noto Serif TC', serif !important;}

/*
.ec-footerRole .container-fluid {
    padding: 0;}
*/

.ec-footerRole .footer_address
{
    text-align: center;
    margin-top: 20px;
    line-height: 1.8em;
    font-size: 14px;
     margin-left: -3%;
}

.col-xs-6{
        line-height: 1.8em;
        font-size: 14px;
    }
   
.ec-footerRole{
        padding-bottom: 10px;
    }

.ec-footerRole .container-fluid .row .col-md-3 ul {
	padding:0;
	width:55%;}

.ec-footerRole .container-fluid .row .col-md-3 li {
    font-size: 16px;
    width: 100%;
    display: block;
	vertical-align:top;
	line-height:1.5;}

.ec-footerRole .container-fluid .row .col-md-3+.col-md-3+.col-md-3+.col-md-3{
	margin-left:auto;
	margin-right:auto;}

.ec-footerRole .container-fluid .row .col-md-3+.col-md-3+.col-md-3+.col-md-3 ul {
	width:100%;}

.ec-footerRole .container-fluid .row .col-md-3+.col-md-3+.col-md-3+.col-md-3 li {
	display:block;
	width:100%;}

.ec-footerRole .container-fluid .row .col-md-3+.col-md-3+.col-md-3+.col-md-3 {
	padding:0 15%;}

.ec-headerSearch {
	display:none;}

.ec-drawerRole.is_active .ec-headerSearch {
	display:block;}

.ec-headerNaviRole {
    padding-top: 20px;}

.ec-headerNavSP .fas {
    font-size: 200%;}

.ec-headerNavSP i.fas.fa-bars
{
    margin-left: 4.5px;
    margin-top:-4px;
}
/*
.ec-headerNavSP {
	left:inherit;
	right: 10px;
	background:none;
    width: unset;
    height: unset;
    top: 20px;
    padding: 0;
}
*/
.ec-headerNavSP {
	left:inherit;
	background:none;
    width: unset;
    height: unset;
    top: 30px;
    padding: 0;
    position: absolute;
    right: 1%;
    margin:0;
    padding: 0;
}

.ec-headerNavSP .ec-headerNav__item a{
    color: black;
}

.ec-headerNav__item .header-icon{
    font-size: 22px;
} 

.ec-headerNav .ec-headerNav__itemLink {
    display: inline-block;}

.login_body-form {
    padding: 30px 2%;
	background-color:rgb(255,255,255,0.7);}

.login_header {
    margin-top: 4vh;}

/* .login_footer {
	height:200px;} */

.login_logo_footer {
    margin-top: 4vh;
    margin-bottom: 4vh;}

.login_body {
    /*padding: 15% 2%;*/
	margin-top:4vh;}

.login_body-login__input {
	width:100%;
	display:block;
	padding:0;}

.haircare1 {
	display:block;}
.haircare2 {
    display: block;
    margin-left: auto;
    width: 7.5em;
    margin-top: -1em;}

.ec-eyecatchRole__introDescriptiron {
    font-size: 22px !important;
	font-weight:bold;}

.ec-layoutRole .ec-layoutRole__main
{
    width: 98%;
    margin: auto;
}

.ec-headerNav
{
    display: none;
}

.ec-headerNav .header-icon {
    font-size: 35px;}

.ec-headerNav__item {
    margin-right: 7.5px;}

.ec-headerNaviRole .ec-headerNaviRole__right {
    width: calc(100% / 2);
    display: block;
    margin-left: auto;
    /* margin-right: 30px; */
    margin-top: -20px;}

div.ec-eyecatchRole {
	height:inherit!important;}

.ec-role .divTitle h1 b {
    font-size: 28px!important;
    font-family: 'Noto Serif TC', serif !important;}

.ec-role .divTitle h1 p {
	font-size:13px;}

.ec-shelfRole {
    background: #ffffff;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;}

img.line-up-img {
    height: 200px;}

.ec-footerRole .container-fluid
{
    text-align: left;
}


}

@media screen and (max-width:320px) {
    .ec-headerNav__item
    {
        margin-right: 2.5px !important;
    }

    .ec-headerNav__item i
    {
        font-size: 24px !important;
    }

    .ec-headerNav__item img
    {
        height: 42.19px;
    }
}