@charset "UTF-8";

/*-----------------------------------------------------------------

	共通

-----------------------------------------------------------------*/

body {
	min-width: 940px;
	-webkit-print-color-adjust: exact;
}
#pageContainer {
	overflow: hidden;
}
#pageContainer img {
	display: inline-block;
}
#pageContainer .inner {
	width: 940px;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	position: relative;
}
#contentsWrap {
	text-align: center;
	padding: 70px 0 0;
	position: relative;
	color: #222;
}
#pageContainer .sp {
	display: none;
}
.brand-btn-cart {
	background: #ba9026;
	border-color: #fff!important;
}


/* .sns
-----------------------------------------------------------------*/
.toolBox01{
	background-color: #19238a;
}
#contentsWrap .btnBrand01 > span{
	color: #fff;
}


/* #mv
-----------------------------------------------------------------*/
#mv {
	position: relative;
}
#mv h1 {
	font-size: 0;
	position: absolute;
}
#mv .slide01 ,
#mv .limited {
	position: relative;
	overflow: hidden;
	text-align: center;
}
#mv .slide01 .inner {
	position: relative;
	z-index: 1;
}
#mv .limited {
	margin: 0 auto;
}
#mv .limited:before,
#mv .limited:after {
	content: "";
	top: 0;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: -1;
}
#mv .limited:before {
	background-image: url(/-/Media/com/meltycreamlip/top/20190718/bg_mv02_left.jpg);
	background-repeat: repeat-x;
	background-size: contain;
	left: 0;
}
#mv .limited:after {
	background-image: url(/-/Media/com/meltycreamlip/top/20190718/bg_mv02_right.jpg);
	background-repeat: repeat-x;
	background-size: contain;
	right: 0;
}
#mv .kanna {
	margin: 0 auto;
	background: #c8d9e0;
	position: relative;
	height: 640px;
	overflow: hidden;
}
#mv .kanna img {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -683px;
	max-width: inherit;
}
#mv .premium {
	margin: 0 auto;
	background: #dcd4d2;
	position: relative;
	height: 640px;
	overflow: hidden;
}
#mv .premium img {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -683px;
	max-width: inherit;
}
#mv .deco {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1000px;
	margin-left: -1000px;
	width: 2000px;
	height: 1944px;
}
#mv div.name {
	position: absolute;
	right: 208px;
	bottom: 55px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	color: #ba9026;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
#mv div.name span {
	display: inline-block;
}

#mv .bx-wrapper {
	margin-bottom: 0;
}
#mv .bx-wrapper img:hover {
	opacity: 1;
}
#mv .bx-wrapper .bx-pager,
#mv .bx-wrapper .bx-controls-auto {
	bottom: 13px;
	line-height: 1;
}
#mv .bx-wrapper .bx-pager.bx-default-pager a {
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 12px;
	margin: 0 10px 0 0;
}
#mv .bx-wrapper .bx-pager.bx-default-pager a.active,
#mv .bx-wrapper .bx-pager.bx-default-pager a:hover {
	height: 12px;
	background: #19238a;
	margin: 0 10px 0 0;
}


/* #gnav
-----------------------------------------------------------------*/
#gnav {
	position: absolute;
	top: 0;
	width: 100%;
	min-width: 960px;
	height: 70px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_nav.png) left top repeat-x;
	background-size: contain;
	z-index: 100;
}
#gnav.fixed {
	position: fixed;
	top: 50px;
	left: 0!important;
	margin-top: 0;
}
#gnav ul {
	position: relative;
	width: 394px;
	margin: 0 auto;
}
#gnav ul li {
	float: left;
	position: relative;
}
#gnav ul li a {
	display: block;
	width: 100%;
}
#gnav ul li a.current {
	background-color: rgba(186,144,38,0.2);
}

/* #bnr
-----------------------------------------------------------------*/
#bnr {
	padding: 40px 0;
	text-align: center;
}
#bnr ul {
	display: inline-block;
}
#bnr ul li {
	display: inline-block;
}
#bnr ul li + li {
	margin-left: 20px;
}
#bnr ul li img {
	width: 380px;
}

/* #beginning
-----------------------------------------------------------------*/
#beginning {
	position: relative;
	/* margin-top: 60px; */
	padding-top: 90px;
	padding-bottom: 110px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_beginning.png) left top repeat-x;
	background-size: contain;
}
#beginning .lead {
	padding: 38px 0 0;
}
#beginning:before  {
	position: absolute;
	top: -60px;
	left: 50%;
	margin-left: -1000px;
	display: block;
	content:"";
	width: 2000px;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20200708/bg_beginning_top.png) left top no-repeat;
	z-index: 10;
	display: none;
}
#beginning:after  {
	position: absolute;
	bottom: -60px;
	left: 50%;
	margin-left: -1000px;
	display: block;
	content:"";
	width: 2000px;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_beginning_btm.png) left top no-repeat;
	z-index: 10;
}
#beginning .movie {
	transition: 0.2s ease-in;
	display: inline-block;
	margin-top: 40px;
}
#beginning .movie:hover {
	opacity: 0.8;
}
#beginning .movie a {
	position: relative;
	display: block;
	cursor: pointer;
}
#beginning .movie a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.15);
	cursor: pointer;
}
#beginning .movie .iconPlay {
	display: inline-block;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 120px;
	height: 120px;
	border: 2px solid #FFF;
	margin-top: -60px;
	margin-left: -60px;
}
#beginning .movie .iconPlay:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent #FFF;
	position: absolute;
	top: 50%;
	left: 50%;
	border-width: 20px 0 20px 30px;
	margin-top: -20px;
	margin-left: -15px;
}
#beginning .movieTtl {
	padding-top: 10px;
	color: #fff;
}

/* #lineup
-----------------------------------------------------------------*/
#lineup {
	position: relative;
	background: #fcfbf8;
}
#lineup .inner {
	padding-bottom: 60px;
	overflow: hidden;
}
#lineup .lineupList {
	overflow: hidden;
}
#lineup h4 {
	padding: 131px 0 0 ;
}
#lineup dl {
	float: left;
}
#lineup dt + dd {
	margin-top: -50px;
}
#lineup dd {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	color: #ba9026;
	font-size: 13px;
	font-weight: bold;
}
#lineup dd p {
	display: inline-block;
}
#lineup dd p.item {
	margin-bottom: 10px;
}
#lineup dd span {
    font-size: 10px;
    display: inline-block;
    line-height: 1;
    padding: 3px 8px 2px 10px;
    border: 1px solid #dcc792;
    border-radius: 25px;
    font-weight: 500;
    text-align: center;
    margin-right: 5px;
    vertical-align: top;
}
#lineup .btn {
	margin-top: 27px;
}
#lineup .bnr {
	margin-top: 70px;
	background-color: #fff;
}

#lineup:after {
	position: absolute;
	bottom: -60px;
	left: 50%;
	margin-left: -1000px;
	display: block;
	content:"";
	width: 2000px;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_lineup_btm.png) left top no-repeat;
	z-index: 10;
}


/* #feature
-----------------------------------------------------------------*/
#feature {
	position: relative;
	background: url(/-/Media/com/meltycreamlip/top/20210722/bg_feature.jpg) no-repeat top center #fefbf4;
}
#feature .inner {
	overflow: hidden;
	padding-bottom: 77px;
}
#feature h4 {
	padding: 131px 0 0 ;
}
#feature .point {
	margin-top: 60px;
}
#feature .point li + li {
	margin-top: 40px;
}


/* #secret
-----------------------------------------------------------------*/
#secret {
	position: relative;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_secret.png) left top no-repeat;
	background-size: cover;
}
#secret .inner {
	padding-bottom: 130px;
}
#secret h4 {
	padding: 138px 0 0 ;
}
#secret dl {
	padding-top: 58px;
}
#secret dd {
	padding-top: 32px;
}
#secret figure {
	padding-top: 40px;
}
#secret figure img + img {
	padding-left: 57px;
}


/* #tvcm
-----------------------------------------------------------------*/
#tvcm {
	position: relative;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_tvcm.png) center 60px no-repeat;
	padding-top: 60px;
	margin-top: -60px;
}
#tvcm .inner {
	padding-bottom: 91px;
}
#tvcm h4 {
	padding: 30px 0 0 ;
}
#tvcm figure {
	padding-top: 49px;
}
#tvcm:after {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -1000px;
	display: block;
	content:"";
	width: 2000px;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_tvcm_top.png) center bottom no-repeat;
	z-index: 10;
	margin-bottom:  -60px;
}
#tvcm h5 {
	text-align: center;
	padding-top: 49px;
	margin-bottom: -39px;
}
#tvcm figure a:focus{
	outline: none;
}
#colorbox, #cboxOverlay, #cboxWrapper {
	overflow: visible;
}
#cboxClose {
	width: 30px;
	height: 30px;
	background-image: url(/-/Media/com/meltycreamlip/top/20200914/modal_close.png);
	top: 0;
	right: -30px;
	transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
#cboxClose:hover {
	opacity: 0.5;
}

/* #product
-----------------------------------------------------------------*/
#product {
	background: #fcfbf8;
	position: relative;
	padding-top: 123px;
}
#product .inner {
	position: relative;
}
#product:before {
	content: "";
	width: 3000px;
	height: 711px;
	background: url(/-/Media/com/meltycreamlip/top/20210722/bg_product.png) no-repeat center;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#product .catch {
	margin-top: 60px;
	display: flex;
}
#product .catch li {
	width: 50%;
}
#product .tab {
	margin-top: 20px;
	display: flex;
}
#product .tab li {
	width: 50%;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
}
#product .tab li.is-active {
	z-index: 2;
}
#product .tab li.is-active:after {
	opacity: 0;
}
#product .tab li.tab01 {
	background: #4f4541;
}
#product .tab li.tab01:before {
	content: "";
	width: 100vw;
	height: 100px;
	background: #4f4541;
	position: absolute;
	top: 0;
	left: calc(-100vw + 1px);
}
#product .tab li.tab01:after {
	content: "";
	width: 20px;
	height: 100px;
	background: #4f4541;
	position: absolute;
	top: 0;
	right: -19px;
}
#product .tab li.tab01.is-active {
	border-radius: 0 10px 0 0;
	background: #1f1513;
}
#product .tab li.tab01.is-active:before {
	background: #1f1513;
}
#product .tab li.tab02 {
	background: #f2eddd;
}
#product .tab li.tab02:before {
	content: "";
	width: 100vw;
	height: 100px;
	background: #f2eddd;
	position: absolute;
	top: 0;
	right: calc(-100vw + 1px);
}
#product .tab li.tab02:after {
	content: "";
	width: 20px;
	height: 100px;
	background: #f2eddd;
	position: absolute;
	top: 0;
	left: -19px;
}
#product .tab li.tab02.is-active {
	border-radius: 10px 0 0 0;
	background: #fcfbf8;
}
#product .tab li.tab02.is-active:before {
	background: #fcfbf8;
}
#product .tab li a {
	width: 100%;
	display: block;
}
#product .tabCont {
	position: relative;
	display: none;
}
#product .tabCont.is-show {
	display: block;
}
#product .tabCont:before,
#product .tabCont:after {
	content: "";
	width: 100vw;
	height: 100%;
	background: #1f1513;
	position: absolute;
	top: 0;
	left: calc(-100vw + 1px);
}
#product .tabCont:after {
	left: auto;
	right: calc(-100vw + 1px);
}
#product .tabCont h5 {
	padding-bottom: 45px;
}
#product .tabCont .bnrArea {
	margin-top: 80px;
	padding: 0 2px;
	display: flex;
	justify-content: center;
}
#product .tabCont .bnrArea li {
	width: 460px;
}
#product .tabCont .bnrArea li a {
	display: block;
}
#product .tabCont .bnrArea li a img {
	transition: 0.2s ease-in;
}
#product .tabCont .bnrArea li a:hover img {
	opacity: 0.8;
}
/* tabCont.tab01 */
#product .tabCont.tab01 {
	background: #1f1513;
	padding: 40px 0 180px;
}
#product .tabCont.tab01 .feature {
	margin-top: 50px;
}
#product .tabCont.tab01 .lineup {
	margin-top: 50px;
	padding-bottom: 0;
	border-bottom: none;
}
#product .tabCont.tab01 .lineup ul {
	display: flex;
	justify-content: center;
}
#product .tabCont.tab01 .lineup ul li {
	padding: 0 55px;
	height: 652px;
}
#product .tabCont.tab01 .lineup ul li + li {
	background: url(/-/Media/com/meltycreamlip/top/20210722/img_product_tabcont01_line.png) no-repeat top left;
}
#product .tabCont.tab01 .lineup ul li .btn {
	margin-top: 30px;
}
#product .tabCont.tab01 .lineup ul li .btn a {
	background-color: transparent!important;
}
/* tabCont.tab02 */
#product .tabCont.tab02 {
	background: #fcfbf8;
	padding: 40px 0 180px;
}
#product .tabCont.tab02:before,
#product .tabCont.tab02:after {
	background: #fcfbf8;
}
#product .tabCont.tab02 .concept .bnr {
	margin-top: 30px;
}
#product .tabCont.tab02 .lineup {
	margin-top: 50px;
	padding-bottom: 0;
	border-bottom: none;
}
#product .tabCont.tab02 .lineup .bnr {
	margin-bottom: 80px;
}
#product .tabCont.tab02 .lineup .lineupList {
	position: relative;
	overflow: hidden;
	margin-top: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#product .tabCont.tab02 .lineup .lineupList .label {
	position: absolute;
	top: 21px;
	left: 46px;
}
#product .tabCont.tab02 .lineup dl {
	float: left;
}
#product .tabCont.tab02 .lineup dt + dd {
	margin-top: -50px;
}
#product .tabCont.tab02 .lineup dd {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	color: #ba9026;
	font-size: 13px;
	font-weight: bold;
}
#product .tabCont.tab02 .lineup dd p {
	display: inline-block;
}
#product .tabCont.tab02 .lineup dd p.item {
	margin-bottom: 10px;
}
#product .tabCont.tab02 .lineup dd span {
    font-size: 10px;
    display: inline-block;
    line-height: 1;
    padding: 3px 8px 2px 10px;
    border: 1px solid #dcc792;
    border-radius: 25px;
    font-weight: 500;
    text-align: center;
    margin-right: 5px;
    vertical-align: top;
}
#product .tabCont.tab02 .lineup .btn {
	margin-top: 27px;
}




/* -------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 769px){

/* -------------------------------------------------------------------------------------------------------*/

#pageContainer .over a {
	background-color: #fff;
}
#pageContainer .over a:hover img {
	opacity: 0.7;
}
#gnav ul li a:hover {
	background-color: rgba(186,144,38,0.2);
}

#tvcm figure a{
	display: block;
	width: 584px;
	height: 322px;
	margin: 0 auto;
	position: relative;
}

#tvcm figure a::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
	position: absolute;
	top: 0;
	left: 0;
}

#tvcm figure a:hover::after{
	background: rgba(0, 0, 0, 0);
}

#tvcm figure a::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 582px;
	height: 320px;
	border: 2px solid #19238a;
	opacity: 0;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

#tvcm figure a:hover::before{
	opacity: 1;
}
	
#tvcm figure a img{
	width: 100%;
	height: auto;
	display: block;
	
}

}

/* -------------------------------------------------------------------------------------------------------*/

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

/* -------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------

	共通

-----------------------------------------------------------------*/
body {
	min-width: inherit;


	overflow-x: hidden;
}
#pageContainer .pc {
	display: none;
}
#pageContainer .sp {
	display: block;
}
#pageContainer .inner {
	width:  auto;
	max-width: 450px;
}
#contentsWrap {
	overflow: hidden;
	padding: 95px 0 0;
}
#contentsWrap section h4 {
	width: 100%;
}

/* #gnav
-----------------------------------------------------------------*/
#gnav {
	background: none;
	min-width: inherit;
	height: auto;
}
#gnav.fixed {
	top: 0;
}
#gnav ul {
	width: 100%;
	display: flex;
	background-image: linear-gradient( 180deg, rgb(255,255,255) 0%, rgb(244,237,222) 100%);
}
#gnav ul:after {
	display: none;
}
#gnav ul li {
	width: calc(100% / 2);
}
#gnav ul li + li {
	border-left: 1px solid #eee3c9;
}
/*#gnav ul li.last {
	width: 100%;
}*/

#gnav ul li:before {
	display: none;
}
/* #gnav ul li a {
	height: 61px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_nav_sp.png) left top repeat-x;
	background-size: contain;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-left: 1px solid #eee3c9;
	border-bottom: 1px solid #eee3c9;
}
#gnav ul li:nth-child(1) a,
#gnav ul li:nth-child(3) a,
#gnav ul li:nth-child(5) a{
	border-left: none;
} */
#gnav ul li a.current {
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_nav_current_sp.png) left top repeat-x;
}
/*#gnav ul li.last a {
	background: url(/-/Media/com/meltycreamlip/top/20181116/bg_nav02_sp.png) left top repeat-x;
	background-size: contain;
	border-bottom: 0;
}*/
#gnav ul li a img {
	width: auto;
	height: 95px;
	margin: 0 auto;
}
/* #gnav.fixed ul li a {
	height: 41px;
	overflow: hidden;
}
#gnav.fixed ul li a img {
	height: 60px;
	position: relative;
	top: -11px;
} */

/* #mv
-----------------------------------------------------------------*/
#pageContainer #mv .inner {
	max-width: 100%;
}
#mv .deco {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -500px;
	margin-left: -500px;
	width: 1000px;
	height: 1000px;
}
#mv .deco img {
	width: 100%;
}
#mv img {
	margin: 0 auto;
}
#mv .limited:before,
#mv .limited:after {
	content: "";
	top: 0;
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: -1;
}
#mv .limited:before {
	background-image:url(/-/Media/com/meltycreamlip/top/20190718/bg_mv02_left_sp.jpg);
	background-repeat: repeat-x;
	background-size: contain;
	left: 0;
}
#mv .limited:after {
	background-image: url(/-/Media/com/meltycreamlip/top/20190718/bg_mv02_right_sp.jpg);
	background-repeat: repeat-x;
	background-size: contain;
	right: 0;
}
#mv .kanna {
	height: auto;
}
#mv .kanna img {
	position: relative;
	top: inherit;
	left: inherit;
	margin: 0;
	max-width: 100%;
}
#mv .premium {
	height: auto;
}
#mv .premium img {
	position: relative;
	top: inherit;
	left: inherit;
	margin: 0;
	max-width: 100%;
}
#mv div.name {
	right: 27vw;
	bottom: 13%;
	font-size: 10px;
	margin-right: -55px;
}
#mv div.name span {
	display: inline-block;
}

#mv .bx-wrapper {
	padding: 0;
}
#mv .bx-controls-direction {
	display: none;
}
#mv .bx-wrapper .bx-pager,
#mv .bx-wrapper .bx-controls-auto {
	bottom: 7px;
	font-size: 0;
}
#mv .bx-wrapper .bx-pager.bx-default-pager a {
	width: 5px;
	height: 5px;
	border-radius: 12px;
	margin: 0 2px 0 2px;
}
#mv .bx-wrapper .bx-pager.bx-default-pager a.active,
#mv .bx-wrapper .bx-pager.bx-default-pager a:hover {
	height: 5px;
	margin: 0 2px 0 2px;
}


/* #bnr
-----------------------------------------------------------------*/
#bnr {
	padding: 25px 0;
}
#bnr ul {
	padding: 0 15px;
}
#bnr ul li {
	display: block;
}
#bnr ul li + li {
	margin-left: 0;
	margin-top: 20px;
}
#bnr ul li img {
	width: 100%;
}

/* #beginning
-----------------------------------------------------------------*/
#beginning {
	padding-top: 60px;
	/* margin-top: 10%; */
	padding-bottom: 40px;
}
#beginning:before {
	top: -10%;
	left: 0;
	margin-left: 0;
	width: 100%;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20200708/bg_beginning_top_sp.png) left bottom no-repeat;
	background-size: 100%;
	display: none;
}
#beginning:after {
	top: 99%;
	left: 0;
	margin-left: 0;
	width: 100%;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_beginning_btm_sp.png) left top no-repeat;
	background-size: 100%;
}
#beginning .inner {
	padding-bottom: 18px;
	width: 320px;
}
#beginning .lead {
	padding: 28px 0 0;
}
#beginning .movie .iconPlay {
	width: 15.625vw;
	height: 15.625vw;
	border: 0.2604166667vw solid #FFF;
	margin-top: -7.8125vw;
	margin-left: -7.8125vw;
}
#beginning .movie .iconPlay:before {
	border-width: 2.6vw 0 2.6vw 3.90625vw;
	margin-top: -2.6041666667vw;
	margin-left: -1.953125vw;
}

/* #lineup
-----------------------------------------------------------------*/
#lineup:after {
	top: 100%;
	left: 0;
	margin-left: 0;
	width: 100%;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_lineup_btm_sp.png) left top no-repeat;
	background-size: 100%;
}
#lineup .inner {
	padding-bottom: 22px;
	
}
#lineup .lineupList {
	overflow: hidden;
}
#lineup h4 {
	padding: 18% 0 0;
}
#lineup .bnr {
	margin-top: 25px;
}
#lineup .bnr {
	width: 100%;
	height: auto;
}

/* #feature
-----------------------------------------------------------------*/
#feature {
	background: url(/-/Media/com/meltycreamlip/top/20210722/bg_feature_sp.jpg) no-repeat top center / cover;
	padding-bottom: 40px;
}
#feature h4 {
	padding: 18% 0 0;
}

/* #secret
-----------------------------------------------------------------*/
#secret {
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_secret_sp.png) center top no-repeat;
	background-size: 100%;
}
#secret .inner {
	padding-bottom: 13%;
}
#secret h4 {
	padding: 18% 0 0;
}
#secret dl {
	padding-top: 40px;
}
#secret dd {
	padding-top: 20px;
}
#secret figure {
	padding: 29px 15px 0;
}
#secret figure img {
	display: block;
	width: 100%;
}
#secret figure img + img {
	padding-left: 0;
}
#secret figure img:last-child {
	padding-top: 20px;
}
	
	
/* #tvcm
-----------------------------------------------------------------*/
#tvcm {
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_tvcm_sp.png) center 30px no-repeat;
	background-size: 100%;
	padding-top: 40px;
	margin-top: -10px;
}
#tvcm .inner {
	padding-bottom: 54px;
}
#tvcm h4 {
	padding: 6% 0 0;
}
#tvcm figure {
	padding: 22px 10px 0;
}
#tvcm:after {
	bottom: 100%;
	left: 0;
	margin-left: 0;
	width: 100%;
	height: 60px;
	background: url(/-/Media/com/meltycreamlip/top/20170807/bg_tvcm_top_sp.png) center bottom no-repeat;
	background-size: 100%;
	margin-bottom:  -30px;
}
#tvcm h5 {
	text-align: center;
	padding-top: 22px;
	margin-bottom: -12px;
}
#tvcm figure a{
	width: 100%;
	height: auto;
}

#tvcm figure a img{
	width: 100%;
	height: auto;
}

#colorbox {
	transform: translateY(-18vh);
}
#colorbox.boxMovie #cboxLoadedContent {
	height: 0 !important;
	position: relative;
	padding-bottom: 56%;
}
#colorbox.boxMovie #cboxLoadedContent iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
#cboxClose {
	top: -30px;
	right: 0;
}

/* #product
-----------------------------------------------------------------*/
#product {
	background: #fcfbf8;
	position: relative;
	padding-top: 75px;
}
#product .inner {
	position: relative;
}
#product:before {
	content: "";
	width: 100%;
	height: 100vw;
	background: url(/-/Media/com/meltycreamlip/top/20210722/bg_product_sp.png) no-repeat center top / 100%;
	position: absolute;
	top: -30px;
}
#product .tab li {
	height: 93px;
}
#product .tab li.tab01.is-active {
	border-radius: 0 15px 0 0;
}
#product .tab li.tab02.is-active {
	border-radius: 15px 0 0 0;
}
#product .tab li img {
	width: auto;
	height: 93px;
	margin: 0 auto;
}
#product .lineup:after {
	display: none;
}
#product .tabCont {
	margin-top: -2px;
}
#product .tabCont h5 {
	padding-bottom: 10px;
}
#product .tabCont .bnrArea {
	display: block;
	margin-top: 60px;
	padding: 0 20px;
}
#product .tabCont .bnrArea li {
	width: auto;
	margin-top: 15px;
}
#product .tabCont.tab01 {
	padding: 30px 0 80px;
}
#product .tabCont.tab01 .lineup {
	padding: 0;
}
#product .tabCont.tab01 .lineup h5 {
	padding-bottom: 15px;
}
#product .tabCont.tab01 .lineup ul li {
	padding: 0;
	height: auto;
}
#product .tabCont.tab01 .lineup ul li .btn {
	width: 86px;
	margin: 20px auto 0;
}
#product .tabCont.tab02 {
	padding: 30px 0 80px;
}
#product .tabCont.tab02 .lineup {
	padding: 0;
}
#product .tabCont.tab02 .lineup .bnr {
	padding: 0 20px;
	margin: 15px 0 0;
}
#product .tabCont.tab02 .lineup .lineupList {
	margin-top: 15px;
}
#product .tabCont.tab02 .lineup .lineupList .label {
	position: absolute;
	width: 17%;
	top: 0.7%;
	left: 1.3%;
}
#product .tabCont.tab02 .lineup dl {
	width: 50%;
}
#product .tabCont.tab02 .lineup dl dt img.sp {
	width: 100%;
}

#product .tabCont.tab02 .lineup dt + dd {
	margin-top: -75px;
}
#product .tabCont.tab02 .lineup dt + dd.mgnTop-45 {
	margin-top: -45px;
}
#product .tabCont.tab02 .lineup dd {
	font-size: 12px;
}
#product .tabCont.tab02 .lineup dd p.item {
    margin-bottom: 15px;
}
#product .tabCont.tab02 .lineup dd span {
	font-size: 10px;
	margin-bottom: 5px;
}
#product .tabCont.tab02 .lineup .btn {
	margin-top: 14px;
	padding: 0 35px;
	display: inline-block;
}


}



/* -------------------------------------------------------------------------------------------------------*/

@media (max-width: 768px) and (min-width: 376px){
	
/* -------------------------------------------------------------------------------------------------------*/
#lineup h4 {
	padding: 28% 0 0;
}
#feature h4 {
	padding: 28% 0 0;
}
#secret h4 {
	padding: 28% 0 0;
}
#tvcm h4 {
	padding: 10% 0 0;
}
}


.relation {
  margin-top: -9.3333333333vw;
  padding: 17.3333333333vw 7.4666666667vw 18.6666666667vw;
  background: url(/-/Media/com/meltycreamlip/top/20230714/relation_bg_01_sp.png) no-repeat center top/100%;
  position: relative;
  z-index: 2;
}
@media print, screen and (min-width: 768px) {
  .relation {
    margin-top: -90px;
    padding: 150px 0 85px;
    background: url(/-/Media/com/meltycreamlip/top/20230714/relation_bg_01_pc.png) no-repeat center top/2000px;
  }
}
@media print, screen and (min-width: 2000px) {
  .relation {
    background-size: 100%;
  }
}
@media print, screen and (min-width: 768px) {
  .relation a {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .relation a:hover {
    opacity: 0.8;
  }
}
.relation sup {
  font-size: 60%;
}
@media print, screen and (min-width: 768px) {
  .relation__inner {
    max-width: 940px;
    margin: 0 auto;
  }
}
.relation__sect {
  margin-bottom: 10.6666666667vw;
}
@media print, screen and (min-width: 768px) {
  .relation__sect {
    max-width: 690px;
    margin: 0 auto 50px;
  }
}
.relation__sect-ttl {
  text-align: center;
  font-size: 3.7333333333vw;
  margin-bottom: 1.5em;
}
@media print, screen and (min-width: 768px) {
  .relation__sect-ttl {
    font-size: 24px;
    margin-bottom: 1em;
  }
}
.relation__sect-ttl b {
  display: table;
  color: #007367;
  font-weight: 400;
  margin: 0 auto;
  padding: 0 0.4em 0.2em;
  border-bottom: 1px dotted #007367;
}
@media print, screen and (min-width: 768px) {
  .relation__sect-ttl b {
    line-height: 1.2;
  }
}
.relation__sect-ttl b + b {
  margin-top: 0.5em;
}
.relation__sect-ttl strong {
  font-weight: 700;
}
.relation__sect-ttl span {
  display: block;
  margin-top: 0.5em;
  margin-bottom: -0.5em;
  font-size: 2.6666666667vw;
  color: #666;
}
@media print, screen and (min-width: 768px) {
  .relation__sect-ttl span {
    font-size: 14px;
  }
}
.relation__sect-bnr {
  display: block;
  margin: 0 -3.4666666667vw;
}
@media print, screen and (min-width: 768px) {
  .relation__sect-bnr {
    margin: 0 -20.8px;
  }
}
.relation__lead {
  margin-top: 16vw;
  margin-bottom: 13.3333333333vw;
}
@media print, screen and (min-width: 768px) {
  .relation__lead {
    max-width: 662px;
    margin: 10px auto 50px;
  }
}
.relation__movie {
  margin-top: 13.3333333333vw;
  padding-top: 13.3333333333vw;
  border-top: 1px solid #ccc;
}
@media print, screen and (min-width: 768px) {
  .relation__movie {
    margin-top: 50px;
    padding-top: 50px;
  }
}
.relation__movie-ttl {
  margin-bottom: 6.6666666667vw;
}
@media print, screen and (min-width: 768px) {
  .relation__movie-ttl {
    max-width: 638px;
    margin: 0 auto 40px;
  }
}
@media print, screen and (min-width: 768px) {
  .relation__movie-video {
    max-width: 638px;
    margin: 0 auto;
  }
}
.relation__movie-video img {
  box-shadow: 0px 2.6666666667vw 2.6666666667vw 0px rgba(51, 51, 51, 0.2);
}
@media print, screen and (min-width: 768px) {
  .relation__movie-video img {
    box-shadow: 0px 10px 10px 0px rgba(51, 51, 51, 0.2);
  }
}
.relation__movie-video b {
  display: block;
  font-size: 2.9333333333vw;
  margin-top: 1em;
  text-align: center;
  font-weight: 400;
  color: #666;
}
@media print, screen and (min-width: 768px) {
  .relation__movie-video b {
    font-size: 22px;
  }
}
.relation__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 16vw;
  margin-top: 8vw;
  border-radius: 8vw;
  background: #fff;
  border: 0.2666666667vw solid #007367;
  color: #007367 !important;
  font-weight: 500;
  font-size: 3.4666666667vw;
  line-height: 1.5;
  position: relative;
  text-align: center;
}
@media print, screen and (min-width: 768px) {
  .relation__btn {
    max-width: 560px;
    height: 80px;
    margin: 60px auto 0;
    border-radius: 40px;
    border: 2px solid #007367;
    font-size: 20px;
  }
}
.relation__btn::after {
  content: "";
  display: block;
  width: 4.5333333333vw;
  height: 3.3333333333vw;
  background: url(/-/Media/com/meltycreamlip/top/20230714/ico_blank_01.png) no-repeat center/cover;
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
}
@media print, screen and (min-width: 768px) {
  .relation__btn::after {
    width: 19px;
    height: 14px;
    right: 70px;
  }
}


body.state-modal .modal {
  left: 0;
  padding: 0 0 0;
}
body.state-modal .modal::after {
  opacity: 0.5;
}
body.state-modal .modal-bg {
  left: 0;
}

.modal {
  position: relative;
  position: absolute;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
  left: -200%;
}
.modal::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: #000;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.modal-bg {
  position: fixed;
  display: block;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  opacity: 0;
  z-index: 2;
  left: -100%;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.modal-box {
  width: 864px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 5;
}

.modal-box-movie {
  position: relative;
  padding-bottom: 56.25%;
  background: #000;
}
.modal-box-movie iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.modal-close {
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  top: -60px;
  right: 0px;
  z-index: 5;
}
.modal-close a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/-/Media/com/repairone/top/20220725/icon_modal_close.png) 0 0 no-repeat;
  background-size: 100% auto;
  -webkit-transition: opacity 0.3s 0s ease;
  -moz-transition: opacity 0.3s 0s ease;
  -ms-transition: opacity 0.3s 0s ease;
  -o-transition: opacity 0.3s 0s ease;
  transition: opacity 0.3s 0s ease;
}
@media screen and (min-width: 1024px) {
  .modal-close a:hover {
    opacity: 0.7;
    -webkit-transition: opacity 0.2s 0s ease;
    -moz-transition: opacity 0.2s 0s ease;
    -ms-transition: opacity 0.2s 0s ease;
    -o-transition: opacity 0.2s 0s ease;
    transition: opacity 0.2s 0s ease;
  }
}

@media screen and (max-width: 768px) {
  .modal-box {
    width: 90%;
  }

  .modal-close {
    width: 40px;
    height: 40px;
    top: -54px;
  }
}


/* -------------------------------------------------------------------------------------------------------*/

@media print{

/* -------------------------------------------------------------------------------------------------------*/
#gnav.fixed {
 position: absolute;
 top: 0;
}

}