.ec-layoutRole {
	padding-top:0;
}

.ec-blockBtn--action {
	background-color:#0cd1f7;
}

/* --- toppage header --- */

header.f_header {
	background:none;
}

header.f_header .header_link li a {
	color:#fff;
}

header.f_header .ec-cartNavi .ec-cartNavi__badge {
	background-color:#fff;
	color:#000;
}

header.f_header .ec-headerNav .ec-headerNav__itemLink,
header.f_header .ec-headerNav .ec-headerNav__itemIcon,
header.f_header .ec-cartNavi .ec-cartNavi__icon {
	color:#fff;
}

header.f_header .hamburger span {
	background:#fff;
}

header.f_header .hamburger.active span {
	background:#000;
}
header.f_header .hamburger h4 {
    color: #fff;
}

header.f_header .hamburger.active h4 {
    color: #000;
}

/* --- /toppage header --- */


/* --- f view --- */
#f_view {
	width:100%;
	position:relative;
	padding:0;
	max-width:100%;
	margin:0px auto 0;
}

.item.slick-slide {
	position:relative;
	width:100%;
	height:100vh;
	min-height:820px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.bg_slider {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:0;
}

.bg_slider::after {
	content:"";
	display: block;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.24);
	position:absolute;
	left:0;
	top:0;
}

/* --- キャンペーンバナー ---*/
/* メディカルニードル新春キャンペーン
.item_campaign figure {
	background:url(../img/top/19_1campaign_bg.jpg) no-repeat center / cover;
}
*/
/* おきゅう缶プレゼント */
.item_campaign figure {
	background:url(../img/top/okyucan_bg.svg) no-repeat center / cover;
	padding:0 5%;
}


.item_campaign img {
	width:auto;
	max-height:650px;
}

.item_campaign figure img.pc_none {
	display: none!important;
}

.item_campaign .bg_slider::after {
	display:none;
}
/* 赤色ボタン
.item_campaign .btn2 span {
	color:#db0015;
}

.item_campaign .btn2::after {
	background:url(../img/common/arrow_red.svg) no-repeat center / contain;
}
*/

/* --- fin キャンペーンバナー ---*/

.slide_txt {
	position:relative;
}

.slide_txt {
	/*
	margin:-11% 0 0px 22%;
	*/
	margin:-4% 0 0px 22%;
}

.item.slick-slide.item_okyu .slide_txt {
	margin:-11% 16% 0 auto;
}

.slide_txt h1 {
	font-size:3.2rem;
	margin-bottom:3.6em;
	font-weight:bold;
	letter-spacing: 0.1rem;
}

.slide_txt h1 span {
	display: block;
	font-size:23rem;
	margin-bottom:0.2em;
	font-weight:900;
	line-height:1em;
	margin-left:-0.25em;
}

.slide_txt h2,
.slide_txt .ten_list li {
	color:#fff;
	font-size:1.8rem;
}

.slide_txt h2 {
	margin-bottom:1em;
	line-height:1.5em;
	font-size:2rem;
}

.slide_txt .ten_list li {
	line-height:1.5em;
	margin-bottom:0;
}

.item.slick-slide .btn2 {
	position:absolute;
	right:8%;
	bottom:8%;
	z-index: 2;
}

.slick-slider {
	margin-bottom: 0px;
	position:relative;
	z-index:2;
}

.slick-dots {
	position: absolute;
	bottom: 20px;
	display: block;
	width: 100%;
	padding: 0;
	list-style: none;
	text-align: center;
}

.slick-dots li {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 5px;
	padding: 0;

	cursor: pointer;
}

.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 20px;
	height: 20px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
	outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
	opacity: 1;
}

.slick-dots li button:before {
	content: " ";
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height:10px;
	text-align: center;
	opacity: .25;
	background-color: black;
	border-radius: 50%;

}

.slick-dots li.slick-active button:before {
	opacity: .75;
	background-color: black;
}

.slick-dots li button.thumbnail img {
	width: 0;
	height: 0;
}


/* --- slide dermaroller --- */

.slide_derma .bg_slider::after {
	background: rgba(0,0,0,0.14);
}

.slide_derma img.pc_none {
	display: none;
}

.slide_derma .df_txt {
	position:absolute;
	top:120px;
	left: 5%;
	z-index: 10;
	margin-top:0;
}


.slide_derma .derma_monitor_link {
	top:150px;
	right:70px;
}

.slide_derma .btn2 .c_derma {
	text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
	-2px 2px 0 #FFF, 2px -2px 0 #FFF,
	0px 2px 0 #FFF,  0 -2px 0 #FFF,
	-2px 0 0 #FFF, 2px 0 0 #FFF;
}

.slide_derma.item.slick-slide .btn2 {
	bottom:15%;
	display: none;
}

.slide_derma .btn2:hover span {
	color:#f7ab00;
}

.slide_derma .btn2::after {
	background:url(../img/common/arrow_derma.svg) no-repeat center / contain;
}

.slide_derma .btn2:hover::after {
	background:url(../img/common/arrow_orange.svg) no-repeat center / contain;
}

.slide_derma h1 {
	width:100%;
	background:rgba(255,255,255,0.75);
	position:absolute;
	left:0;
	bottom:7%;
	font-size:3.2rem;
	text-align: center;
	line-height:1.25;
	font-weight:bold;
	border-top:4px solid #AEDFDD;
	border-bottom:4px solid #AEDFDD;
	padding:40px 50px;
	margin-top:10%;
	transition:background .3s, color .3s, border .3s;
}

.slide_derma .dermalink:hover h1 {
	background:rgba(119,193,188,0.85);
	color:#fff;
	border-color:#fff;
}

.slide_derma::before {
	content:"";
	display: block;
	width:430px;
	height:106px;
	background:url(../img/dermaroller/foryourskin.png) no-repeat center / contain;
	position:absolute;
	bottom:19%;
	right:2%;
	z-index: 5;
}

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

	.slide_derma h1 {
		font-size:2.6rem;
	}

	.slide_derma .derma_monitor_link {
		top:80px;
	}
	
}

/* --- slide new --- */

.slide_new img.pc_none {
	display: none;
}

.slide_new.item.slick-slide .btn2::after {
	transform:scale(1) rotate(90deg);
}

.slide_new.item.slick-slide .btn2:hover::after {
	transform:scale(1.4) rotate(90deg);
}


/* --- featured トップページ特集 --- */

.featured {
	width:100%;
	margin:0px auto 50px;
	/* padding-top:185px; */
	padding-top:35px;
}

.featured .inner {
	max-width:1625px;
}

.featured .h_title {
	margin-bottom:1.2em;
}

.fe_wrap {
	margin-left:50px;
}

.fe_block {
	position:relative;
	padding:40px 0 0 0;
	margin:0 90px 150px 0;
}

.fe_block::before {
	content:"";
	display:block;
	width:252px;
	height:314px;
	background:#e9e9e9;
	position:absolute;
	left:0;
	top:40px;
	z-index:-1;
}

.fe_block h2 {
	font-size:7.2rem;
	position:absolute;
	top:0;
	left:200px;
	font-weight:600;
	line-height:1em;
}

.fe_block3 {
	margin-right:160px;
}

.fe_block3 h2,
.fe_block4 h2,
.fe_block5 h2 {
	left:150px;
	font-size:5.4rem;
	white-space: nowrap;
	top:20px;
}

.fe_block3 h2 {
	letter-spacing: -0.1em;
}

.fe_block h3 span {
	font-size:1.8rem;
	margin-bottom:0.4em;
	display: block;
}

.fe_block h3 {
	font-size:1.6rem;
	margin:0 0 1em 0px;
}

.fe_txt {
	margin:116px 0 0 150px;
}

.fe_block .price {
	font-size:2rem;
	font-weight:bold;
	letter-spacing: 0.2rem;
	font-family: 'Lato', sans-serif;
}


.fe_block:hover .more {
	color:#0CD1F7;
}

.fe_block:hover .more::after {
	background:url(../img/common/more_blue.svg) no-repeat center / contain;
	transform:scale(1.4);
}

.fe_block figure {
	position:absolute;
}

.fe_block1 figure {
	top:-80px;
	left:0;
}

.fe_block2 figure {
	top:-40px;
	left:-56px;
}

.fe_block3 figure {
	top:-36px;
	left:-52px;
}

.fe_block4 figure {
	top:0px;
	left:-80px;
}

.fe_block5 figure {
	top:0px;
	left:-80px;
}

/* --- topics --- */

.topics {
	margin-bottom:0;
}

/* --- contact --- */

.contact_freedial {
	margin-top:0;
	border-top:none;
}

/* --- attention medical --- */

.attention_medical {
	width:100%;
	height:100vh;
	position:fixed;
	left:0;
	top:0;
	margin:0;
	overflow:hidden;
	background:rgba(0,0,0,0.4);
	z-index:999;
	opacity:0;
}

.attention_medical .inner {
	max-width:480px;
	margin:0;
	padding:0;
	background:#fff;
}

.attention_medical h2,
.attention_medical p {
	text-align:center;
}

.attention_medical h2 span {
	font-size:1.8rem;
	border-bottom:1px solid #f7ab00;
}

.attention_medical h2 {
	padding:2em 1em 0.5em;
}

.attention_medical p {
	font-size:1.4rem;
	padding:1em 1em 0.5em;
}

.ybtn_wrap {
	margin-top:2em;
}

.ybtn_wrap button {
	cursor:pointer;
	display: block;
	width:50%;
	height:56px;
	line-height:54px;
	font-size:1.8rem;
	text-align:center;
	font-weight:600;
	transition:background .4s, color .4s;
}

.ybtn_wrap button.y_yes {
	background:#0CD1F7;
	color:#fff;
	border:1px solid #0cd1f7;
}

.ybtn_wrap button.y_yes:hover {
	background:#fff;
	color:#0cd1f7;
}

.ybtn_wrap button.y_no {
	background:#fff;
	color:#000;
	border:1px solid #ccc;
}

.ybtn_wrap button.y_no:hover {
	background:#000;
	color:#fff;
}


/* --- ver sp --- */

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

	#f_view .slick-slider,
	.slick-slider .slick-track, .slick-slider .slick-list {
		height:100%;
	}

	.item.slick-slide {
		min-height:auto;
		height:100%;
	}

	.item.slick-slide .btn2 {
		right:5vw;
		bottom:15vw;
	}

	.item.slick-slide .btn2 span {
		font-size:6vw;
	}

	.slide_txt h1 {
		font-size:7vw;
		margin-bottom:10vw;
	}

	.slide_txt h1 span {
		font-size:25vw;
		margin-left:0;
	}

	.slide_txt,
	.item.slick-slide.item_okyu .slide_txt {
		margin:-11vw 0 0 0vw;
		padding:0 4vw;
	}

	.slick-dots li {
		width:2.5vw;
		height:2.5vw;
		margin:0 2.5vw;
	}

	.slide_txt h2, .ten_list li {
		font-size:4vw;
	}

	.slick-dots li button {
		width:2.5vw;
		height:2.5vw;
		padding:0;
	}

	.slick-dots li button:before {
		width:2.5vw;
		height:2.5vw;
		line-height:2.5vw;
	}

	.slick-dots {
		bottom:5vw;
	}

/* --- キャンペーンバナー ---*/
/* 新春キャンペーン
.item_campaign figure {
	background:url(../img/top/19_1campaign_bg_sp.jpg) no-repeat center / cover;
}
*/

.item_campaign figure {
	background:url(../img/top/okyucan_bg_sp.svg) no-repeat center / cover;
}

.item_campaign.item.slick-slide .btn2 {
	bottom:4vw;
}

.item_campaign figure img.sp_none {
	display: none!important;
}

.item_campaign figure img.pc_none {
	display: block!important;
}

/* ipad 縦のみ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	.item_campaign figure {
		background:url(../img/top/19_1campaign_bg_ipad.jpg) no-repeat center / cover;
	}
}


/* --- featured トップページ特集 --- */

.featured {
	width:100%;
	margin:0px auto 15vw;
	/* padding-top:25vw; */
	padding-top:0vw;
}

.featured .inner {
	max-width:100%;
	padding:0 5vw;
}

.featured .h_title {
	margin-bottom:10vw;
}

.fe_wrap {
	margin-left:0px;
}

.fe_block {
	position:relative;
	padding:10vw 0 0 0;
	margin:0 0 30vw 0;
}

.fe_block::before {
	content:"";
	display:block;
	width:55.5vw;
	height:80vw;
	top:10vw;
	right:0;
	margin:0 auto;
}

.fe_block h2 {
	font-size:18vw;
	left:52vw;
	top:14vw;
}

.fe_block3 {
	margin-right:0;
}

.fe_block3 h2,
.fe_block4 h2 {
	left:37.5vw;
	font-size:9.5vw;
	top:17vw;
}

.fe_block5 h2 {
	left:37.5vw;
	font-size:9.5vw;
	top:14vw;
}


.fe_block h3 span {
	font-size:4.5vw;
}

.fe_block h3 {
	font-size:4vw;
}

.fe_txt {
	margin:29vw 0 0 41vw
}

.fe_block .price {
	font-size:4.5vw;
}


.fe_block1 figure {
	top:4vw;
	left:0;
}

.fe_block1 figure img {
	width:40vw;
	height:83.75vw;
}

.fe_block2 figure {
	top:16vw;
	left:-3vw;
}

.fe_block2 figure img {
	width:50vw;
	height:66.75vw;
}

.fe_block3 figure {
	top:10vw;
	left:-3vw;
}

.fe_block3 figure img {
	width:40vw;
	height:88.75vw;
}

.fe_block4 figure {
	top:19px;
	left:-10vw;
}

.fe_block4 figure img {
	width:50vw;
	height:64.5vw;
}

.fe_block4 figure {
	top:19px;
	left:-10vw;
}

/* derma */
.fe_block5 figure {
	top:6vw;
	left:-5vw;
}

.fe_block5 figure img {
	width:40vw;
	height:81.75vw;
}

/* --- attention medical --- */


.attention_medical .inner {
	max-width:100%;
	width:90vw;
}

.attention_medical h2 span {
	font-size:4.5vw;
	line-height:1.5em;
}

.attention_medical h2 {
	padding:2em 5vw 0.5em;
}

.attention_medical p {
	font-size:3.5vw;
	padding:1em 5vw 0.5em;
}

.ybtn_wrap button {
	height:14vw;
	line-height:13.5vw;
	font-size:4.5vw;
}

/* 検索窓 + お気に入りボックス */


.search_favorite .ec-headerNaviRole__search {
	display: block;
}

.search_favorite .ec-headerNaviRole__nav {
	margin-top:4vw;
}

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

.focus_link {
	top:18vw;
	bottom:auto;
	left:auto;
	right:0;
}

/* --- slide dermaroller --- */

.slide_derma img.pc_none {
	display: block;
}

.slide_derma img.sp_none,
.slide_derma .bg_slider::after {
	display: none;
}

.slide_derma .df_txt {
    top:auto;
	bottom:30.75vw;
	left: 0;
	width:100%;
    padding: 2.75vw 2.75vw 2.5vw;
}

.slide_derma .df_txt_logo01 {
	width:11.5vw;
}

.slide_derma .df_txt h2 {
	font-size:4.5vw;
}


.slide_derma .derma_monitor_link {
	top:34vw;
	left:5vw;
	right: auto;
	z-index: 18;
}

.slide_derma h1 {
	font-size:5vw;
	text-align: center;
	border-width:1vw;
	padding:2.5vw 5vw 2vw;
	line-height:1.25;
	border-top:none;
	bottom:13vw;
}

.slide_derma::before {
	width:26.75vw;
	height:6.75vw;
	background:url(../img/dermaroller/foryourskin_white.png) no-repeat center / contain;
	position:absolute;
	bottom:41vw;
	right:3vw;
	z-index: 12;
}

/* --- slide new --- */

.slide_new img.pc_none {
	display: block;
}

.slide_new img.sp_none {
	display: none;
}

} /* end 768px */