@charset "UTF-8";
/*-----------------------------------------------------------------

	style.css

-----------------------------------------------------------------*/
body {
	min-width: 1000px;
	-webkit-print-color-adjust: exact;
}
#pageContainer {
	overflow: hidden;
	font-family: 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	background: #fff;
}
#pageContainer * {
	box-sizing: border-box;
}
#pageContainer img {
	width: 100%;
	vertical-align: bottom;
}
/*#pageContainer .sp {
	display: none;
}*/
#pageContainer .inner {
	width: 940px;
	margin: 0 auto;
}
/* .sns
-----------------------------------------------------------------*/
.toolBox01 {
	background-color: #003a7b;
}
.btnBrand01 > span {
	color: #756650;
}
#container .function01 {
	display: none;
}

.slick-slide {
	transition-delay: 0.5s !important;
}

/* -------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 769px), print {
	/* -------------------------------------------------------------------------------------------------------*/
	#pageContainer .sp {
		display: none !important;
	}
	#pageContainer .over a:hover img {
		opacity: 0.7;
	}
	#pageContainer a:hover img {
		opacity: 0.7;
	}
	#TmLMv {
		height: 580px;
		background: url("/-/Media/com/tonemylip/top/200715/bg_mv01.jpg") no-repeat center;
		position: relative;
	}
	#TmLMv p {
		width: 236px;
		position: absolute;
		left: calc(50% - 426px);
		top: 36px;
	}
	#TmLMv h1 {
		width: 206px;
		position: absolute;
		right: calc(50% - 478px);
		bottom: 7px;
	}


	#TmLAnchor .inner ul {
		width: 600px;
		margin: 0 auto;
		display: flex;
	}
	#TmLAnchor .inner ul li a {
		padding: 18px 0 20px;
		display: block;
	}
	#TmLAnchor .inner ul li img {
		border-left: 1px solid #dbdbdb;
	}
	#TmLAnchor .inner ul li:last-child img {
		border-right: 1px solid #dbdbdb;
	}

	#concept {
		background: url("/-/Media/com/tonemylip/top/200715/bg_concept.jpg") no-repeat center bottom;
		height: 782px;
		color: #737272;
		text-align: center;
	}
	#concept .inner {
		padding: 80px 0 80px;
		position: relative;
	}
	#concept .inner > * {
		transition: 1s ease;
		opacity: 0;
		position: relative;
	}
	#concept .inner.animate > * {
		opacity: 1;
	}
	#concept h2 {
		width: 181px;
		margin: 0 auto 30px;
		opacity: 1!important;
	}
	#concept p {
		font-size: 18px;
		line-height: 1.888;
		letter-spacing: 0.025em;
	}
	#concept p + p {
		margin-top: 0.8em;
	}
	#concept .logo {
		width: 277px;
		margin: 30px auto 0;
	}


	#lineup .inner {
		padding: 80px 0;
	}
	#lineup h2 {
		width: 136px;
		margin: 0 auto 40px;
		padding-top: 20px;
		position: relative;
	}
	#lineup h2 span {
		position: absolute;
		width: 244px;
		top: -28px;
		right: -204px;
	}
	#lineup .carousel{
		width:100%;
		margin:0px auto;
		position: relative;
		display: flex;
		padding: 0;
		flex-wrap: wrap;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	#lineup #slideNav {
		line-height: 0;
		position: relative;
		width: 102px;
		margin: 0;
		padding: 47px 20px 0;
		z-index: 1;
		border-left: 1px solid #dbdbdb;
		border-right: 1px solid #dbdbdb;
	}
	#lineup #slideNav li {
		width: 60px;
		height: 60px;
	}
	#lineup #slideNav li + li {
		margin-top: 15px;
	}
	#lineup #slideNav li a {
		display: block;
		width: 60px;
		height: 60px;
		transition: 0.3s;
		position: relative;
		cursor: pointer;
	}
	#lineup #slideNav li a:hover {
		opacity: 0.7;
	}
	#lineup #slideNav li a:hover img {
		opacity: 1;
	}
	#lineup #slideNav li a > * {
		position: absolute;
		top: 0;
		left: 0;
		width: 60px;
		height: 60px;
	}
	#lineup #slideNav li img {
		z-index: 1;
	}
	#lineup #slideNav li a svg {
		opacity: 0;
		transition: 0.4s;
	}
	#lineup #slideNav li a svg.active02 {
		opacity: 1;
	}
	#lineup .slide {
		position: relative;
		width: 810px;
		margin: 0;
		padding: 0;
	}
	#lineup .slide .slick-list {
		width: 100%;
		margin: 0;
	}
	#lineup .lineupItem {
		display: flex;
	}
	#lineup .lineupItem figure + div {
		width: 360px;
		text-align: left;
		margin-left: 30px;
		position: relative;
		padding-bottom: 80px;
	}
	#lineup .lineupItem .copy {
		font-size: 16px;
		color: #737272;
		margin-bottom: 20px;
	}
	#lineup .lineupItem .tag {
		font-size: 0;
		margin-bottom: 20px;
	}
	#lineup .lineupItem .tag li {
		font-size: 15px;
		line-height: 1;
		background: #737272;
		color: #fff;
		display: inline-block;
		padding: 8px 10px;
		margin-right: 10px;
	}
	#lineup .lineupItem .level {
		display: flex;
		align-items: center;
		margin-bottom: 19px;
	}
	#lineup .lineupItem .level span {
		font-size: 15px;
		line-height: 1;
		color: #fff;
		display: inline-block;
		padding: 8px 10px;
		margin-right: 10px;
	}
	#lineup .lineupItem .level figure {
		width: 100px;
	}
	#lineup .lineupItem dt {
		padding-bottom: 7px;
		margin-bottom: 5px;
		border-bottom: 1px solid #dbdbdb;
		font-size: 16px;
	}
	#lineup .lineupItem dd {
		color: #737272;
		font-size: 18px;
	}
	#lineup .lineupItem .btn a {
		color: #fff;
		text-align: center;
		width: 100%;
		height: 60px;
		display: block;
		line-height: 60px;
		font-size: 16px;
		margin: 0 auto;
		padding: 0 30px;
		background: #ffb9b3;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: 0.3s;
	}
	#lineup .lineupItem .btn a:hover {
		text-decoration: none;
		background: #f2958d;
	}
	#lineup .lineupItem .btn a:after {
		content: "";
		background: url("/-/Media/com/tonemylip/top/200715/icon_arrow_w.svg") no-repeat center;
		background-size: 100%;
		width: 8px;
		height: 14px;
		display: block;
		position: absolute;
		right: 20px;
		top: 50%;
		margin-top: -7px;
	}


	#lineup #product01 .lineupItem .level span {
		background: #d95d5a;
	}
	#lineup #product01 .lineupItem dt {
		color: #d95d5a;
	}
	#lineup #product02 .lineupItem .level span {
		background: #d874a3;
	}
	#lineup #product02 .lineupItem dt {
		color: #d874a3;
	}
	#lineup #product03 .lineupItem .level span {
		background: #c99d3c;
	}
	#lineup #product03 .lineupItem dt {
		color: #c99d3c;
	}
	#lineup #product04 .lineupItem .level span {
		background: #78ac7e;
	}
	#lineup #product04 .lineupItem dt {
		color: #78ac7e;
	}


	#point {
		background: #fcf8f8;
	}
	#point .inner {
		padding: 80px 0;
	}
	#point h2 {
		width: 141px;
		margin: 0 auto 40px;
	}
	#point .twoRows {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
	}
	#point .twoRows .pointBox {
		width: 450px;
	}
	#point .pointBox {
		background: #fff;
		-webkit-box-shadow: 0px 0px 40px 0px rgba(255,145,145,0.1);
		-moz-box-shadow: 0px 0px 40px 0px rgba(255,145,145,0.1);
		box-shadow: 0px 0px 40px 0px rgba(255,145,145,0.1);
		padding: 30px 40px 40px;
		position: relative;
	}
	#point .pointBox h3 {
		font-size: 20px;
		font-weight: 700;
	}
	#point .pointBox * {
		color: #737272;
	}
	#point .pointBox.point01 {
		background: url(/-/Media/com/tonemylip/top/200715/icon_point01.png) #fff no-repeat left 40px center;
	}
	#point .pointBox.point01 h3 {
		margin-bottom: 7px;
	}

	#point .pointBox.point01 {
		padding: 50px 40px 40px 155px;
	}
	#point .pointBox.point02 h3 {
		margin-bottom: 20px;
		padding: 20px 0 20px 115px;
		background: url(/-/Media/com/tonemylip/top/200715/icon_point02.png) no-repeat left 0 center;
	}
	#point .pointBox.point02 h3 + p {
		margin: 0 0 30px 20px;
		padding-left: 20px;
		background: url(/-/Media/com/tonemylip/top/200715/icon_circle.svg) no-repeat left 0 center;
	}
	#point .pointBox.point02 li {
		display: flex;
		margin: 0 20px;
	}
	#point .pointBox.point02 li + li {
		margin-top: 20px;
	}
	#point .pointBox.point02 li figure {
		width: 100px;
		margin-right: 15px;
	}
	#point .pointBox.point02 li dl {
		margin-top: 5px;
	}
	#point .pointBox.point02 li dt {
		border-bottom: 1px solid #e5e5e5;
		margin-bottom: 7px;
		padding-bottom: 7px;
	}
	#point .pointBox.point03 h3 {
		margin-bottom: 25px;
		padding: 20px 0 20px 115px;
		background: url(/-/Media/com/tonemylip/top/200715/icon_point03.png) no-repeat left 0 center;
	}
	#point .pointBox.point03 > ul {
		padding-left: 55px;
	}
	#point .pointBox.point03 > ul > li + li {
		margin-top: 17px;
	}
	#point .pointBox.point03 p {
		font-size: 18px;
		margin: 0 0 5px -36px;
		padding-left: 36px;
	}
	#point .pointBox.point03 > ul > li:first-child p {
			background: url(/-/Media/com/tonemylip/top/200715/img_point03_1.svg) no-repeat left 0 top 2px;
			background-size: 27px;
	}
	#point .pointBox.point03 > ul > li:nth-child(2) p {
			background: url(/-/Media/com/tonemylip/top/200715/img_point03_2.svg) no-repeat left 0 top 2px;
			background-size: 27px;
	}
	#point .pointBox.point03 > ul > li:nth-child(3) p {
			background: url(/-/Media/com/tonemylip/top/200715/img_point03_3.svg) no-repeat left 0 top 2px;
			background-size: 27px;
	}
	#point .pointBox.point03 .ingredient {
		font-size: 0;
	}
	#point .pointBox.point03 .ingredient li {
		font-size: 14px;
		color: #7e7d7d;
		display: inline-block;
		line-height: 1;
		padding: 5px 7px;
		margin: 0 5px 5px 0;
		border: 1px solid #e5e5e5;
	}






}
/* -------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	/* -------------------------------------------------------------------------------------------------------*/
	body {
		min-width: inherit;
		overflow-x: hidden;
	}
	#pageContainer .pc {
		display: none !important;
	}
	#pageContainer .inner {
		width: auto;
		/*max-width: 375px;*/
	}
	
	#TmLMv {
		height: 135vw;
		background: url("/-/Media/com/tonemylip/top/200715/bg_mv01_sp.jpg") no-repeat center top;
		background-size: cover;
		position: relative;
	}
	#TmLMv p {
		width: 37.4vw;
		position: absolute;
		left: 4.93vw;
		top: 5.63vw;
	}
	#TmLMv h1 {
		width: 33vw;
		position: absolute;
		right: 3vw;
		bottom: 1vw;
	}
	
	#TmLAnchor .inner {
		margin: 0 5.34vw;
	}
	#TmLAnchor .inner ul {
		width: 100%;
		margin: 0 auto;
		display: flex;
	}
	#TmLAnchor .inner ul li {
		width: 33.33%;
	}
	#TmLAnchor .inner ul li a {
		padding: 2.5vw 0;
		display: block;
	}
	#TmLAnchor .inner ul li img {
		border-left: 1px solid #dbdbdb;
	}
	#TmLAnchor .inner ul li:last-child img {
		border-right: 1px solid #dbdbdb;
	}

	
	#concept {
		background: url("/-/Media/com/tonemylip/top/200715/bg_concept_sp.jpg") no-repeat center bottom;
		background-size: cover;
		height: 161.6vw;
		color: #737272;
		text-align: center;
	}
	#concept .inner {
		padding: 12vw 0;
		position: relative;
	}
	#concept .inner > * {
		transition: 1s ease;
		opacity: 0;
	}
	#concept .inner.animate > * {
		opacity: 1;
	}
	#concept h2 {
		margin: 0 auto 5vw;
	}
	#concept p {
		font-size: 3.75vw;
		line-height: 1.857;
		letter-spacing: 0.025em;
	}
	#concept p + p {
		margin-top: 0.8em;
	}
	#concept .logo {
		margin: 5.38vw auto 0;
	}
	
	#lineup .inner {
		padding: 14vw 0 12vw;
	}
	#lineup h2 {
		margin: 0 auto 6vw;
		position: relative;
	}
	#lineup h2 span {
		position: absolute;
		width: 42vw;
		top: -9vw;
		right: 4vw;
	}
	#lineup .carousel{
		width:100%;
		margin:0px auto;
		position: relative;
		padding: 0;
	}
	#lineup #slideNav {
		line-height: 0;
		position: relative;
		margin: 0 5.34vw 4vw;
		padding: 3.8vw;
		z-index: 1;
		border-top: 1px solid #dbdbdb;
		border-bottom: 1px solid #dbdbdb;
		display: flex;
		justify-content: center;
	}
	#lineup #slideNav li {
		position: relative;
		width: 60px;
		height: 60px;
		cursor: pointer;
	}
	#lineup #slideNav li + li {
		margin-left: 10px;
	}
	#lineup #slideNav li a > * {
		position: absolute;
		top: 0;
		left: 0;
		width: 60px;
		height: 60px;
	}
	#lineup #slideNav li img {
		z-index: 1;
	}
	#lineup #slideNav li a svg {
		opacity: 0;
		transition: 0.4s;
	}
	#lineup #slideNav li a svg.active02 {
		opacity: 1;
	}
	#lineup .slide {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#lineup .slide .slick-list {
		width: 100%;
		margin: 0;
	}
	#lineup .lineupItem {
		width: 100%;
		padding: 0 5.34vw;
	}
	#lineup .lineupItem figure + div {
		width: 100%;
		text-align: left;
		margin-top: 2.67vw;
		position: relative;
	}
	#lineup .lineupItem .copy {
		font-size: 3.6vw;
		color: #737272;
		margin-bottom: 3vw ;
	}
	#lineup .lineupItem .tag {
		font-size: 0;
		margin-bottom: 3.6vw;
	}
	#lineup .lineupItem .tag li {
		font-size: 3.47vw;
		line-height: 1;
		background: #737272;
		color: #fff;
		display: inline-block;
		padding: 2vw 2.6vw;
		margin-right: 1.6vw;
	}
	#lineup .lineupItem .level {
		display: flex;
		align-items: center;
		margin-bottom: 3.6vw;
	}
	#lineup .lineupItem .level span {
		font-size: 3.2vw;
		line-height: 1;
		color: #fff;
		display: inline-block;
		padding: 2vw 2.6vw;
		margin-right: 2.67vw;
	}
	#lineup .lineupItem .level figure {
		height: 5.8vw;
	}
	#lineup .lineupItem .level figure img {
		width: auto;
		height: 100%;
	}
	#lineup .lineupItem dt {
		padding-bottom: 1.75vw;
		margin-bottom: 1.75vw;
		border-bottom: 1px solid #dbdbdb;
		font-size: 3.7vw;
	}
	#lineup .lineupItem dd {
		color: #737272;
		font-size: 4.05vw;
	}
	#lineup .lineupItem .btn {
		width: 78.7vw;
		margin: 6.5vw auto 0;
		position: relative;
	}
	#lineup .lineupItem .btn a {
		color: #fff;
		text-align: center;
		width: 100%;
		height: 13vw;
		display: block;
		line-height: 13vw;
		font-size: 4.05vw;
		margin: 0 auto;
		padding: 0 8vw;
		background: #ffb9b3;
	}
	#lineup .lineupItem .btn a:after {
		content: "";
		background: url("/-/Media/com/tonemylip/top/200715/icon_arrow_w.svg") no-repeat center;
		background-size: 100%;
		width: 1.334vw;
		height: 2.667vw;
		display: block;
		position: absolute;
		right: 5.334vw;
		top: 50%;
		margin-top: -1.334vw;
	}

	#lineup #product01 .lineupItem .level span {
		background: #d95d5a;
	}
	#lineup #product01 .lineupItem dt {
		color: #d95d5a;
	}
	#lineup #product02 .lineupItem .level span {
		background: #d874a3;
	}
	#lineup #product02 .lineupItem dt {
		color: #d874a3;
	}
	#lineup #product03 .lineupItem .level span {
		background: #c99d3c;
	}
	#lineup #product03 .lineupItem dt {
		color: #c99d3c;
	}
	#lineup #product04 .lineupItem .level span {
		background: #78ac7e;
	}
	#lineup #product04 .lineupItem dt {
		color: #78ac7e;
	}

	#point {
		background: #fcf8f8;
	}
	#point .inner {
		padding: 12vw 0;
	}
	#point h2 {
		margin: 0 auto 6vw;
	}
	#point .pointBox {
		background: #fff;
		-webkit-box-shadow: 0px 0px 40px 0px rgba(255,145,145,0.1);
		-moz-box-shadow: 0px 0px 40px 0px rgba(255,145,145,0.1);
		box-shadow: 0px 0px 40px 0px rgba(255,145,145,0.1);
		padding: 27.5vw 5.34vw 5.34vw;
		margin: 0 5.34vw 6vw;
		position: relative;
	}
	#point .pointBox h3 {
		font-size: 4.13vw;
		font-weight: 700;
		margin-bottom: 2.5vw;
		text-align: center;
	}
	#point .pointBox * {
		color: #737272;
	}
	#point .pointBox.point01 {
		background: url(/-/Media/com/tonemylip/top/200715/icon_point01_sp.png) #fff no-repeat top 2vw center;
		background-size: 20vw;
	}
	#point .pointBox.point01 p {
		text-align: center;
	}
	
	#point .pointBox.point02 {
		background: url(/-/Media/com/tonemylip/top/200715/icon_point02_sp.png) #fff no-repeat top 2vw center;
		background-size: 20vw;
	}
	#point .pointBox.point02 h3 + p {
		font-size: 2.94vw;
		margin: 0 0 3.6vw 0;
		padding-left: 20px;
		background: url(/-/Media/com/tonemylip/top/200715/icon_circle.svg) no-repeat left 0 center;
	}
	#point .pointBox.point02 li {
		display: flex;
		align-items: center;
		margin: 0 auto;
	}
	#point .pointBox.point02 li + li {
		margin-top: 4vw;
	}
	#point .pointBox.point02 li figure {
		width: 36vw;
		margin-right: 4vw;
	}
	#point .pointBox.point02 li dl {
		width: 60vw;
		font-size: 3.47vw;
	}
	#point .pointBox.point02 li dt {
		border-bottom: 1px solid #e5e5e5;
		margin-bottom: 1vw;
		padding-bottom: 1vw;
	}
	#point .pointBox.point03 {
		background: url(/-/Media/com/tonemylip/top/200715/icon_point03_sp.png) #fff no-repeat top 2vw center;
		background-size: 20vw;
	}
	#point .pointBox.point03 > ul {
		padding-left: 9.34vw;
	}
	#point .pointBox.point03 > ul > li + li {
		margin-top: 6.5vw;
	}
	#point .pointBox.point03 p {
		font-size: 4.27vw;
		margin: 0 0 1.34vw -9.34vw;
		padding-left: 9.34vw;
	}
	#point .pointBox.point03 > ul > li:first-child p {
			background: url(/-/Media/com/tonemylip/top/200715/img_point03_1.svg) no-repeat left 0 top 0.6vw;
			background-size: 7vw;
	}
	#point .pointBox.point03 > ul > li:nth-child(2) p {
			background: url(/-/Media/com/tonemylip/top/200715/img_point03_2.svg) no-repeat left 0 top 0.6vw;
			background-size: 7vw;
	}
	#point .pointBox.point03 > ul > li:nth-child(3) p {
			background: url(/-/Media/com/tonemylip/top/200715/img_point03_3.svg) no-repeat left 0 top 0.6vw;
			background-size: 7vw;
	}
	#point .pointBox.point03 .ingredient {
		font-size: 0;
	}
	#point .pointBox.point03 .ingredient li {
		font-size: 3.47vw;
		color: #7e7d7d;
		display: inline-block;
		line-height: 1;
		padding: 1.5vw 2.6vw;
		margin: 0 2vw 2vw 0;
		border: 1px solid #e5e5e5;
	}


}
/* -------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 481px) and (max-width: 768px) {
	/* -------------------------------------------------------------------------------------------------------*/
}
/* -------------------------------------------------------------------------------------------------------*/
@media print {
	/* -------------------------------------------------------------------------------------------------------*/
	.top #gnav.fixed {
		position: absolute;
		top: 0;
	}
}