@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, picture,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	background: #fff;
	box-sizing: border-box;
	overflow-x: hidden;
	font-feature-settings: "palt";
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display: block;
}
a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ul, ol {
	list-style: none;
}
picture {
	display: block;
}


/************************************************
common
************************************************/
.wrapper {
	width: 100%;
	margin: 0;
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
	font-weight: 500;
	overflow: clip;
}
.wrapper .inner {
	width: 100%;
	margin: 0 auto;
	max-width: 1000px;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
@media screen and (max-width: 767px) {
	.wrapper .inner {
		padding: 0;
	}
}
.wrapper img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.onlyPC {
	display: none;
}
.pbg {
	display: none;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:140vh;
	transition: .8s ease;
}
.active .pbg {
	display: block;
}


/************************************************
swiper
************************************************/
.slide {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.swiper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}
.swipe-prev,
.swipe-next {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_mv_arrow.png") left top / auto 100% no-repeat;
	width: calc( 50 / 750 * 100vw );
	height: calc( 80/ 750 * 100vw );
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: calc( -25 / 750 * 100vw );
	z-index: 20;
}
.swipe-prev {
	right: auto;
	left: 0;
	transform: rotate(180deg);
}
.slide .swiper-button-disabled {
	display: none;
}
.swiper .swiper-slide {
	position: relative;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}
.slide .swiper-pagination {
	position: relative;
	width: 100%;
	height: calc( 20 / 750 * 100vw );
	top: 0;
	line-height: 0.1;
	margin: calc( 43 / 750 * 100vw ) auto calc( 20 / 1920 * 100% );
}
.slide .swiper-pagination .swiper-pagination-bullet {
	width: calc( 14 / 750 * 100vw );
	height: calc( 14 / 750 * 100vw );
	transform: rotate(45deg);
	border-radius: 0;
	background: #a5abb4;
	opacity: 1;
	margin: 0 calc( 13 / 750 * 100vw );
}
.slide .swiper-pagination .swiper-pagination-bullet-active {
	background: #f7806e;
}


/************************************************
header
************************************************/
#header {
	background: #f2f5f9;
	padding-bottom: calc( 70 / 750 * 100vw );
}
#header .inner::after {
	content: "";
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_mv_ttl.png") left top / 100% auto no-repeat;
	width: calc( 623 / 750 * 100vw );
	height: 0;
	position: absolute;
	left: calc( 64 / 750 * 100vw );
	top: calc( 130 / 750 * 100vw );
	z-index: 100;
	transition: all 1.2s ease;
}
#header.slide00 .inner::after {
	height: calc( 50 / 750 * 100vw );
}
#header.slide01 .inner::after,
#header.slide02 .inner::after,
#header.slide03 .inner::after,
#header.slide04 .inner::after {
	height: calc( 347 / 750 * 100vw );
}
#header .swipe-prev,
#header .swipe-next {
	display: none;
	top: calc( 634 / 750 * 100vw );
	margin-top: 0;
}
#header .slide .fkds {
	width: calc( 59 / 750 * 100vw );
	position: absolute;
	left: 50%;
	top: -1px;
	margin-left: calc( -30 / 750 * 100vw );
	line-height: .1;
	z-index: 100;
}
#header .slide .fkds path,
#header .slide .fkds svg {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
#header .slide .fkds path {
	transition: all 1.2s ease;
}
#header.slide00 .slide .fkds path {
	fill: #1289da;
}
#header.slide01 .slide .fkds path {
	fill: #f78675;
}
#header.slide02 .slide .fkds path {
	fill: #f9c100;
}
#header.slide03 .slide .fkds path {
	fill: #f38707;
}
#header.slide04 .slide .fkds path {
	fill: #eb85ae;
}
#header .slide {
	transition: all 1.2s ease;
}
#header.slide00 .slide {
	border-top: #1289da solid calc( 90 / 750 * 100vw );
}
#header.slide01 .slide {
	border-top: #f78675 solid calc( 90 / 750 * 100vw );
}
#header.slide02 .slide {
	border-top: #f9c100 solid calc( 90 / 750 * 100vw );
}
#header.slide03 .slide {
	border-top: #f38707 solid calc( 90 / 750 * 100vw );
}
#header.slide04 .slide {
	border-top: #eb85ae solid calc( 90 / 750 * 100vw );
}
#header ul {
	display: flex;
	justify-content: center;
	margin: 0 calc( -7 / 750 * 100vw );
}
#header ul li {
	width: calc( 193 / 750 * 100vw );
}
#header ul li + li {
	margin-left: calc( -49 / 750 * 100vw );
}
#header p.atte {
	color: #616161;
	font-size: calc( 15 / 750 * 100vw );
	line-height: 1;
	letter-spacing: 0.075em;
	text-align: center;
	margin: calc( 14 / 750 * 100vw ) 0 calc( 37 / 750 * 100vw );
}
#header dl {
	position: relative;
	width: calc( 710 / 750 * 100vw );
	margin: 0 auto;
}
#header dl dd a {
	width: calc( 648 / 750 * 100vw );
	position: absolute;
	left: calc( 46 / 750 * 100vw );
	bottom: calc( 58 / 750 * 100vw );
	animation: btnslide 3s ease 0s infinite;
}
#header p.result {
	margin: calc( 70 / 750 * 100vw ) auto 0;
}


/************************************************
authority
************************************************/
.wrapper .authority {
	position: relative;
}
.authority .pbg {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_authority_bg.jpg") 50% 100% / cover no-repeat;
}
.authority .inner {
}
.authority h2 {
	clip-path: polygon(0 0, 100% 0, 100% calc( 100% - ( 160 / 750 * 100vw )), 0 100%);
	margin-bottom: calc( -65 / 750 * 100vw );
	background: #000;
}
.authority h2 + p {
	padding-bottom: calc( 120 / 750 * 100vw );
	margin-bottom: calc( -160 / 750 * 100vw );
}
.authority::before,
.authority::after {
	content: "";
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_authority_scroll.png") left top / 100% auto no-repeat;
	width: calc( 7 / 750 * 100vw );
	height: calc( 144 / 750 * 100vw );
	position: absolute;
	left: 50%;
	bottom: calc( 770 / 750 * 100vw );
	margin: 0 0 0 calc( -3.5 / 750 * 100vw );
	z-index: 101;
}
.authority::after {
	bottom: calc( -160 / 750 * 100vw );
}


/************************************************
sns
************************************************/
.sns {
	clip-path: polygon( 0 calc( 160 / 750 * 100vw ), 100% 0, 100% 100%, 0 100% );
	padding-top: calc( 160 / 750 * 100vw );
	background: #fff;
	position: relative;
	z-index: 100;
}
.sns h2 {
}
.sns h2 + div {
	background: #f7f6f4;
	padding: calc( 46 / 750 * 100vw ) 0 calc( 60 / 750 * 100vw );
}


/************************************************
reason
************************************************/
.reason {
	background: #fff;
}
.reason .cnt {
	background: #eaf3f8;
	padding-bottom: calc( 40 / 750 * 100vw );
}
.reason h2 {
	margin: 0 auto calc( -111 / 750 * 100vw );
}
.reason dl {
	position: relative;
	margin: 0 auto calc( 50 / 750 * 100vw );
}
.reason dl.reason01 dd,
.reason dl.reason03 {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_reason03_btm.png") left bottom / 100% auto no-repeat;
	position: relative;
	padding-bottom: calc( 80 / 750 * 100vw );
}
.reason dl.reason01 dd {
	padding: calc( 50 / 750 * 100vw ) 0 calc( 44 / 750 * 100vw ) calc( 40 / 750 * 100vw );
}
.reason dl.reason01 dd img {
	width: calc( 630 / 750 * 100vw );
	margin: 0 auto 0 0;
}
.reason dl.reason03 dd {
	width: calc( 710 / 750 * 100vw );
}
.reason dl.reason03 dd + dd {
	margin-top: calc( 78 / 750 * 100vw );
}
.reason dl.reason04 dd + dd {
	margin-top: calc( 95 / 750 * 100vw );
}


/************************************************
recommend
************************************************/
.recommend {
	position: relative;
}
.recommend .pbg {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_recommend_bg.jpg") 0% 100% / cover no-repeat;
	height:120vh;
	border-top: #e2e9f2 solid 15vh;
}
.recommend h2 {
	background: #fff;
}
.recommend p {
	padding-bottom: calc( 136  / 750 * 100vw );
}
.recommend::after {
	content: "";
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_authority_scroll.png") left top / 100% auto no-repeat;
	width: calc( 7 / 750 * 100vw );
	height: calc( 144 / 750 * 100vw );
	position: absolute;
	left: 50%;
	bottom: calc( 20 / 750 * 100vw );
	margin: 0 0 0 calc( -3.5 / 750 * 100vw );
	z-index: 101;
}
.recommend ul li {
	position: absolute;
	left: calc( 200 / 750 * 100vw );
	top: calc( 945 / 750 * 100vw );
	width: calc( 301 / 750 * 100vw );
}
.recommend ul li.check02 {
	width: calc( 400 / 750 * 100vw );
	padding-top: calc( 157 / 750 * 100vw );
}
.recommend ul li.check03 {
	width: calc( 450 / 750 * 100vw );
	padding-top: calc( 316 / 750 * 100vw );
}


/************************************************
recommend02
************************************************/
.recommend02 {
	position: relative;
	clip-path: polygon( 0 calc( 160 / 750 * 100vw ), 100% 0, 100% 100%, 0 100% );
	z-index: 100;
	margin-top: calc( -160 / 750 * 100vw );
}
.recommend02 .cnt {
	background: #f8fcff;
	padding-top: calc( 160  / 750 * 100vw );
}
.recommend02 dl {
	position: relative;
}
.recommend02 dl dd {
	width: calc( 707 / 750 * 100vw );
	position: absolute;
	right: 0;
	top: calc( 158 / 750 * 100vw );
}


/************************************************
aroma
************************************************/
.aroma {
	position: relative;
	background: #fff;
	padding-bottom:  calc( 60 / 750 * 100vw );
}
.aroma h2 {
	width: calc( 644 / 750 * 100vw );
	padding: calc( 79 / 750 * 100vw ) 0 0;
	margin: 0 auto;
}
.aroma dl {
	position: relative;
	margin-bottom: calc( 68 / 750 * 100vw );
}
.aroma dl dd.aroma01 {
	width: calc( 209 / 750 * 100vw );
	position: absolute;
	left: calc( 38 / 750 * 100vw );
	bottom: calc( 67 / 750 * 100vw );
}
.aroma dl dd.aroma02 {
	width: calc( 222 / 750 * 100vw );
	position: absolute;
	left: calc( 260 / 750 * 100vw );
	bottom: calc( 65 / 750 * 100vw );
}
.aroma dl dd.aroma03 {
	width: calc( 221 / 750 * 100vw );
	position: absolute;
	left: calc( 493 / 750 * 100vw );
	bottom: calc( 64 / 750 * 100vw );
}
.aroma dl dd.animated img {
	animation-name: float;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}
@keyframes float {
	50% {
			transform: translateY(-10px); 
	} 
	100% {
			transform: translateY(0px); 
	} 
}
.aroma .slide {
}
.aroma .swiper .swiper-slide {
	position: relative;
	width: calc( 650 / 750 * 100vw );
	padding: 0 calc( 10 / 750 * 100vw );
	box-sizing: border-box;
	transition: all .5s ease;
}
.aroma .swiper .swiper-slide.swiper-slide-prev,
.aroma .swiper .swiper-slide.swiper-slide-next {
}

/************************************************
qa
************************************************/
.qa {
	background: #e6f0f6;
}
.qa .cnt {
	padding: calc( 98 / 1000 * 100% ) 0 calc( 130 / 1000 * 100% );
}
.qa h2 {
	margin: 0 auto calc( 67 / 750 * 100vw );
}
.qa dl {
	max-width: calc( 710 / 750 * 100vw );
	margin: 0 auto 2px;
}
.qa dl dt {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_qa_icn01.png") calc( 30 / 750 * 100vw ) center / calc( 60 / 750 * 100vw ) auto no-repeat #fff;
	color: #5e606e;
	font-size: calc( 26 / 750 * 100vw );
	line-height: calc( 36 / 750 * 100vw );
	letter-spacing: 0.1em;
	font-weight: bold;
	padding: calc( 30 / 750 * 100vw ) calc( 70 / 750 * 100vw ) calc( 30 / 750 * 100vw ) calc( 110 / 750 * 100vw );
	position: relative;
  min-height: calc( 120 / 750 * 100vw );
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.qa dl dt::after {
	content: "";
	display: block;
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_qa_icn04.png") center center / 100% auto no-repeat;
	width: calc( 26 / 750 * 100vw );
	height: calc( 26 / 750 * 100vw );
	position: absolute;
	right: calc( 28 / 750 * 100vw );
	top: 50%;
	margin-top: calc( -13 / 750 * 100vw );
}
.qa dl dt.active::after {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_qa_icn03.png") center center / 100% auto no-repeat;
}
.qa dl dd {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_qa_icn02.png") calc( 30 / 750 * 100vw ) calc( 32 / 750 * 100vw ) / calc( 60 / 750 * 100vw ) auto no-repeat;
	color: #5e606e;
	font-size: calc( 26 / 750 * 100vw );
	line-height: calc( 44 / 750 * 100vw );
	letter-spacing: 0.1em;
	padding: calc( 40 / 750 * 100vw ) calc( 40 / 750 * 100vw ) calc( 35 / 750 * 100vw ) calc( 110 / 750 * 100vw );
	display: none;
}
.qa dl dd span {
	display: inline-block;
	font-size: calc( 18 / 750 * 100vw );
	line-height: calc( 30 / 750 * 100vw );
	letter-spacing: 0.075em;
	margin-top: 0.5em;
}
#b_net02 .qa .hide,
#b_net03 .qa .hide {
	display: none;
}


/************************************************
howto
************************************************/
.howto {
	background: url("../../../../shopping/images/pub/skicle_all/b_net01/sp_howto_bg.jpg") left top / calc( 50 / 750 * 100vw ) auto repeat;
}
.howto .cnt {
	padding-bottom: calc( 107 / 750 * 100vw );
}
.howto h2 {
	margin-bottom: calc( 68 / 750 * 100vw );
}
.howto h3 {
	margin-bottom: calc( 65 / 750 * 100vw );
}
.howto dl {
	position: relative;
}
.howto dl dd {
	position: absolute;
	left: 0;
	top: calc( 264 / 750 * 100vw );
	width: 100%;
}
.howto .swiper .swiper-slide {
	position: relative;
	width: calc( 660 / 750 * 100vw );
	padding: 0 calc( 15 / 750 * 100vw );
	box-sizing: border-box;
}
.howto .slide .swiper-pagination {
	margin-top: calc( 100 / 750 * 100vw );
}


/************************************************
reviews
************************************************/
.reviews {
	background: #f7f6f4;
}
.reviews h2 + div {
	padding: calc( 40 / 750 * 100vw ) 0;
}


/************************************************
message
************************************************/
.message {
	background: #efdfe6;
}


/************************************************
CV
************************************************/
.cv {
	background: #fff;
	padding: 0 0 calc( 70 / 750 * 100vw );
}
.cv .panel {
	margin: 0 auto calc( 70 / 750 * 100vw );
	overflow: hidden;
}
.cv h2 {
	margin: 0 auto calc( 36 / 750 * 100vw );
}
.cv .slide {
	margin-bottom: calc( 50 / 750 * 100vw );
}
.cv .swiper .swiper-slide {
	position: relative;
	width: calc( 630 / 750 * 100vw );
	padding: 0 calc( 10 / 750 * 100vw );
	box-sizing: border-box;
	transition: all .5s ease;
}
.cv .swiper .swiper-slide dd.cv-btn-new {
	width: calc( 542 / 750 * 100vw );
	position: absolute;
	left: calc( 55 / 750 * 100vw );
	bottom: calc( 108 / 750 * 100vw );
	animation: btnslide 3s ease 0s infinite;
}
#b_net02 .cv .swiper .swiper-slide dd.cv-btn-new,
#b_net03 .cv .swiper .swiper-slide dd.cv-btn-new {
	bottom: calc( 38 / 750 * 100vw );
}
.cv .swiper .swiper-slide dd.cv-btn-member {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: calc( 77 / 750 * 100vw );
	text-align: center;
}
.cv .swiper .swiper-slide dd.cv-btn-member a {
	color: #f6ae00;
	font-size: calc( 24 / 750 * 100vw );
	line-height: 1;
	letter-spacing: 0.075em;
}
.cv .swiper .swiper-slide dl.orange a {
	color: #f38707;
}
.cv .swiper .swiper-slide dl.rose a {
	color: #eb85ae;
}
.cv .swiper .swiper-slide dl.limited a {
	color: #2a6db6;
}
.cv .swiper .swiper-slide.swiper-slide-prev,
.cv .swiper .swiper-slide.swiper-slide-next {
}
.cv .cv-service {
	margin: 0 auto;
}
.cv p.atte {
	color: #585d5e;
	font-size: calc( 18 / 750 * 100vw );
	line-height: calc( 30 / 750 * 100vw );
	letter-spacing: 0.05em;
	width: calc( 670 / 750 * 100vw );
	margin: 0 auto;
}
.cv p.atte strong {
	color: #d15058;
}
	#b_net02 .cv dd.cv-btn-member,
	#b_net03 .cv dd.cv-btn-member,
	#b_net02 .cv p.atte strong,
	#b_net03 .cv p.atte strong {
		display: none;
	}
.cv .cv-service {
	width: calc( 670 / 750 * 100vw );
	margin: 0 auto;
}
.cv .cv-service + p.atte {
	width: calc( 670 / 750 * 100vw );
	margin: calc( 25 / 750 * 100vw ) auto 0;
}
@keyframes btnslide {
	0% {
		transform: translateX(0);
	}
	5% {
		transform: translateX(10px);
	}
	10% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(0);
	}
}

/************************************************
message
************************************************/
.float {
  background-color: rgba( 255, 255, 255, 0.7 );
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: calc( 30 / 750 * 100vw ) 0 0 calc( 60 / 750 * 100vw );
  text-align: center;
  z-index: 9999;
  overflow: hidden;
  height: calc( 160 / 750 * 100vw );
  box-sizing: border-box;
  display: none;
}
.float a {
  display: block;
  width: calc( 648 / 750 * 100vw );
  margin: 0 auto 0 0;
}


/************************************************
footer
************************************************/
#footer {
	background-color: #5b626c;
	padding: calc( 50 / 750 * 100vw ) 0 0;
}
#footer ul {
	list-style: none;
	text-align: center;
	font-size: 0;
	padding-bottom: calc( 50 / 750 * 100vw );
}
#footer ul li {
	display: inline-block;
	padding: 0 calc( 16 / 750 * 100vw );
	position: relative;
	line-height: 1.1;
}
#footer ul li + li {
	border-left: 1px solid #fff;
}
#footer ul li:nth-child(4n) {
	border: 0;
}
#footer ul li a {
	font-size: calc( 20 / 750 * 100vw );
	line-height: calc( 36 / 750 * 100vw );
	text-decoration: none;
	color: #fff;
}
#footer p {
	display: block;
	background: #464a4f;
	color: #fff;
	text-align: center;
	font-size: calc( 18 / 750 * 100vw );
	line-height: 1;
	padding: calc( 22 / 750 * 100vw ) 0 calc( 21 / 750 * 100vw );
}


/************************************************
limited_cv
************************************************/
#header .limited_cv {
	width: calc(710 / 750 * 100vw);
	margin: calc(37 / 750 * 100vw) auto 0;
}
#header .limited_cv p.atte {
	text-align: left;
}