@charset "UTF-8";

/*----------------------------------------
 SLIDER
----------------------------------------*/
.offer {
	position: relative;
	background: #f5f5f5;
	overflow: hidden;
}
.offer .item_offer_slide {
	margin: min(13.3vw, 66.5px) auto 0;
	width: 100%;
	max-width: 640px;
	transform: none;
	height: auto;
	display: block;
	opacity: 0;
}
.item_offer_slide.slick-initialized {
	opacity: 1;
}
.item_offer_slide .slick-slide {
	width: 100%;
	height: auto;
}
.sub_slide {
	margin: 1.7em auto .5rem;
	padding: 0 1.4rem;
	max-width: 640px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.sub_slide > div {
	width: 31.7%;
}
.sub_slide.sp_view {
	display: flex;
}
.sub_slide > .sub_slide1,
.sub_slide > .sub_slide2,
.sub_slide > .sub_slide3 {
	margin-bottom: .6rem;
}
.sub_slide a {
	position: relative;
	display: inline-block;
}
.sub_slide .on a:after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .1;
}
.slick-arrow {
	position: absolute;
	top: 50%;
	width: 3%;
	z-index: 99;
}
.slick-arrow.prev {
	left: 4%;
	transform: translate(0,-50%);
	cursor: pointer;
}
.slick-arrow.next {
	right: 4%;
	transform: translate(0,-50%) scale(-1, 1);
	cursor: pointer;
}
.slick-arrow img {
	width: 100%;
}

/*----------------------------------------
 CART
----------------------------------------*/
.item_right {
	margin: 0 auto;
	max-width: 640px;
	width: 100%;
	padding:0 1.2rem 3rem;
	background: #f5f5f5;
	font-size: .75rem;
	letter-spacing: .08rem;
	line-height: 1.8;
	transition: font-size .6s ease;
}
.site_name {
	padding-top: 0;
	font-size: 1em;
	letter-spacing: .09rem;
}
.offer_title {
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: .07rem;
}
.msg{
	text-align: center;
	padding: 10px 0 20px;
}
.checkSelect ul::after {
	content: "";
	display: block;
	clear: both;
}
.checkSelect li{
	border:1px solid #ccc;
	border-radius:10px;
	width:48%;
	padding:4% 2.5%;
	text-align:center;
	letter-spacing: 0;
	cursor: pointer;
}
.checkSelect li.light {
	float:left;
}
.checkSelect li.natural {
	float: right;
}
.checkSelect li p::before{
	content:"";
	display:block;
	margin:0 auto 5px;
	width:30px;
	height:30px;
	border-radius:50%;
}
.checkSelect li.light p::before {
	background-color:#ffd3a3;
}
.checkSelect li.natural p::before {
	background-color:#f8b173;
}
.checkSelect li.select {
	border-color:#000;
}
.checkSelect span {
	color: #f00;
	text-align: center;
	padding: 1.5rem 0 0;
	font-size: .8rem;
	display: block;
}
.btn_box {
	display: block;
	margin-bottom: 0;
}
div.btn {
	position: relative;
	width: 100%;
}
div.btn.large {
	margin:0 auto;
}
.btn2{
	background: #ccc;
	color: #fff;
	padding: 1em 0;
	width: 100%;
	font-size: 1.2em;
	text-align: center;
	margin: .8em 0;
	display: inline-block;
}
.btn .btn {
	margin: .8em 0;
	padding: 1em 0;
	width: 100%;
	font-size: 1.2em;
	letter-spacing: .1rem;
	background: #000;
	color: #fff;
	text-align: center;
}
.offer_title2 {
	display: flex;
	margin: 3.8em 0 .7em;
}
.offer_title2 .in_japan {
	display: inline-block;
	padding: 0 .7em;
	border: 1px solid #000;
	margin-left: 1.5em;
}
.offer_text .tip {
	font-size: .7em;
	vertical-align: top;
	margin: 0 .3em 0 0;
}
.offer_text .tip:last-child {
	margin-left: -10px;
}
.offer_text2 {
	margin-top: 1em;
	color: #9a9a9a;
	font-size: .9em;
}

@media (min-width: 769px) {
	.item_right {
		font-size: 1rem;
		transition: font-size .6s ease;
	}
	.checkSelect span {
		padding: 30px 0 0;
		font-size: 1rem;
	}
	.offer_text .tip {
		font-size: 10px;
		margin: 0 3px;
	}
	.offer_text2 {
		font-size: 14px;
	}
	.btn_box {
		margin-bottom: 60px;
	}
}

/*----------------------------------------
 LIGHT BEIGE & NATURAL BEIGE
----------------------------------------*/
.section > div {
	margin: 0 auto;
}
.section.color_images_box {
	margin: 0 auto;
	max-width: 640px;
	width: 100%;
	padding: 2.2rem 0 0;
	clear: both;
	display: flex;
}
.section .sec1,
.section .sec2 {
	width: 100%;
	max-width: 2000px;
	clear: both;
}
.section .sec2 {
	margin-top: 0;
}
.sec1 .section_name_box {
	left: 0;
	top: 0;
}
.sec2 .section_name_box {
	right: 0;
	top: 0;
}
.section_name_box h2 {
	margin: 0 1.1rem;
	padding-bottom: .3em;
	font-size: 1.2em;
	letter-spacing: 1px;
	border-bottom: 1px solid #000;
	text-align: left;
	transition: font-size .6s ease;
}
.section_name_box h2 span {
	font-size: .6em;
	margin-left: .5em;
}
.section_name_box p {
	text-align: left;
	margin: 1em 1.2rem 0;
	font-size: .8rem;
	letter-spacing: 1px;
	transition: font-size .6s ease;
}
.section_image_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 2rem 1.1rem;
	width: auto;
}
.section_image_box .image1 {
	width: 100%;
}
.section_image_box .image2,
.section_image_box .image3 {
	width: 47.8%;
	margin: 0 0 1rem;
}
.section_image_box img {
	width: 100%;
	height: auto;
}

@media (min-width: 769px) {
	.section_name_box h2 {
		font-size: 1.6em;
		transition: font-size .6s ease;
	}
	.section_name_box p {
		font-size: 1.1rem;
		transition: font-size .6s ease;
	}
	.section_image_box {
		margin-bottom: 2.5rem;
	}
	.section_image_box .image2,
	.section_image_box .image3 {
		width: 48.2%;
		margin-bottom: 1.4rem;
	}
}

/*----------------------------------------
 FEATURE
----------------------------------------*/
.section.sec3_wrap {
	margin: 0 auto;
	max-width: 640px;
	width: 100%;
	background: #e7eff2;
	padding: 3rem 0;
	transition: .6s ease;
}
.section .sec3 {
	max-width: 100%;
	width: 100%;
}
.in_text_head {
	text-align: center;
	height: min(7.2vw, 36px);
}
.in_text_head img {
	height: 100%;
	width: auto;
}
.sec3 .in_text_head2 {
	text-align: center;
	font-size: 1.1rem;
	margin: .3rem 0 1rem;
	transition: .6s ease;
}
.sec3 .in_box {
	background: #fff;
	padding: 2.2rem;
}
.grad_wrap {
	line-height: 1;
	padding-bottom: 1.5rem;
	position: relative;
}
.grad_wrap img {
	max-width: 405px;
	width: 100%;
	height: auto;
}
.in_text1 .glay_tips {
	margin-top: .9rem;
}
.grad_wrap:after {
	content: "";
	display: block;
	height: 3px;
	width: 100%;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	 background: rgb(122,166,208);
	background: -moz-linear-gradient(50deg, rgba(122,166,208,1) 0%, rgba(85,139,194,1) 100%);
	background: -webkit-linear-gradient(50deg, rgba(122,166,208,1) 0%, rgba(85,139,194,1) 100%);
	background: linear-gradient(50deg, rgba(122,166,208,1) 0%, rgba(85,139,194,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7aa6d0",endColorstr="#558bc2",GradientType=1);
}
.glay_tips {
	color: #b0b0b0;
	font-size: .7rem;
	letter-spacing: 1px;
	line-height: 2;
	transition: font-size .6s ease;
}
.sec3_it1 {
	background-image: url(https://uuuni-cosmetics.com/wp-content/themes/uuuni/assets/img/item/sec3_it1.png);
	background-size: auto 100%;
	margin: .7rem 0 2rem;
	padding: 0rem 0 0rem 31%;
	background-size: min(28%, 125px) auto;
	background-repeat: no-repeat;
	background-position: left center;
	font-size: min(3.2vw, 1rem);
	letter-spacing: .04rem;
	line-height: 2.1;
	height: auto;
	transition: font-size .6s ease;
}
.in_text2 .glay_tips {
	position: absolute;
	bottom: 1em;
	right: 0;
}
.grad_h3 {
	background: rgb(190,175,160);
	background: -moz-linear-gradient(50deg, rgba(190,175,160,1) 0%, rgba(170,151,131,1) 100%);
	background: -webkit-linear-gradient(50deg, rgba(190,175,160,1) 0%, rgba(170,151,131,1) 100%);
	background: linear-gradient(50deg, rgba(190,175,160,1) 0%, rgba(170,151,131,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#beafa0",endColorstr="#aa9783",GradientType=1);
	color: #fff;
	text-align: center;
	padding: .5rem 0;
	font-size: .8rem;
	line-height: 1;
	letter-spacing: 2px;
	margin-top: .6rem;
	transition: .6s ease;
}
.grad_h3 span {
	font-size: 1.3em;
	line-height: 1;
	vertical-align: baseline;
}
.seibun_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 1.6;
	margin: 1.5rem 0 0;
	font-size: .8rem;
	letter-spacing: .1rem;
}
.seibun_list li span {
	display: block;
	text-align: center;
	margin-top: .8em;
}
.in_text3 {
	padding-top: 1.5rem;
}
.in_text3 .seibun_list li img,
.in_text4 .seibun_list li img {
	width: 100%;
	height: auto;
}
.in_text3 .seibun_list li{
	margin: 0 2.3% 1rem 0;
	width: 31%;
}
.in_text3 .seibun_list li:nth-child(3n) {
	margin-right: 0;
}
.in_text4 .seibun_list li {
	width: 44%;
	margin-bottom: 1em;
	padding: 0 .4rem;
}
.blue_seibun li {
	padding: 0;
	background: rgb(105,124,158);
	background: -moz-linear-gradient(50deg, rgba(105,124,158,1) 0%, rgba(73,87,129,1) 100%);
	background: -webkit-linear-gradient(50deg, rgba(105,124,158,1) 0%, rgba(73,87,129,1) 100%);
	background: linear-gradient(50deg, rgba(105,124,158,1) 0%, rgba(73,87,129,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#697c9e",endColorstr="#495781",GradientType=1);
	color: #fff;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	font-size: .75rem;
	text-align: center;
	line-height: 2;
	transition: .6s ease;
}
.blue_seibun {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin: .7em 0;
}
.blue_seibun li:not(:last-child) {
	margin-right: 1em;
}
.blue_seibun .tip {
	font-size: .6rem;
	vertical-align: top;
}
.in_text5 .glay_tips {
	text-align: right;
	line-height: 1;
}
.blue_seibuns.sp_view {
	margin: 1em 0 .5em;
}
.in_text6 .border_h3 {
	position: relative;
	text-align: center;
}
.border_h3 span {
	display: inline-block;
	background: #fff;
	font-size: .9rem;
	font-weight: bold;
	padding: 0 1em;
	position: relative;
	z-index: 5;
	letter-spacing: 1px;
	line-height: 1;
}
.in_text6 {
	margin: 2rem 0 .7rem;
}
.black_seibun {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin: .7em 0;
}
.black_seibun li {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	text-align: center;
	font-size: .75rem;
	line-height: 2;
	background: #000;
	color: #fff;
	transition: .6s ease;
}
.black_seibun li:not(:last-child) {
	margin-right: 1em;
}
.in_text6 .blue_box {
	background: #e7eff2;
	text-align: center;
	font-size: .8rem;
	padding: .4rem 0 .6rem;
	line-height: 1.5rem;
	letter-spacing: 1px;
	margin-top: 1.2rem;
	transition: .6s ease;
}
.in_text6 .blue_box span {
	background: #fff;
	display: inline-block;
	font-size: .6rem;
	color: #333;
	padding: 0 2em;
	transition: .6s ease;
}
.section.color_images_box.sec2_wrap {
	padding: 0 0 2rem;
}
.section.sec4_wrap {
	padding: 4rem 2.2rem 0;
	margin: 0 auto;
	max-width: 640px;
	width: 100%;
}
.sec4 .in_text_head {
	margin-bottom: 2.7rem;
}

@media (min-width: 769px) {
	.section.sec3_wrap {
		padding-top: 4rem;
		transition: .6s ease;
	}
	.sec3 .in_text_head2 {
		font-size: 1.3rem;
		transition: .6s ease;
	}
	.sec3 .in_box {
		padding: 2.4rem 0 3.8rem;
	}
	.in_text1 .glay_tips {
		margin-top: 30px;
	}
	.grad_wrap {
		padding-bottom: 40px;
	}
	.sec3_it1 {
		padding-left: 25%;
		background-size: 22% auto;
		transition: .6s ease;
	}
	.glay_tips {
		font-size: .9rem;
		transition: font-size .6s ease;
	}
	.in_text3 {
		padding-top: .5rem;
	}
	.grad_h3 {
		font-size: 1.1rem;
		margin-top: 2.5rem;
		padding: .6rem 0 .8rem;
		transition: .6s ease;
	}
	.seibun_list {
		font-size: 1.1rem;
	}
	.in_text4 .seibun_list li {
		padding: 0 .6rem;
	}
	.blue_seibun li {
		font-size: 1rem;
		transition: .6s ease;
	}
	.blue_seibun .tip {
		font-size: 12px;
	}
	.border_h3 span {
		font-size: 1.3rem;
		transition: .6s ease;
	}
	.black_seibun li {
		font-size: 1rem;
		transition: .6s ease;
	}
	.in_text6 {
		margin: 55px 0 0;
	}
	.in_text6 .blue_box {
		padding: 1rem 0;
		font-size: 1.1rem;
		transition: .6s ease;
	}
	.in_text6 .blue_box span {
		font-size: .75rem;
		transition: .6s ease;
	}
	.section.color_images_box.sec2_wrap {
		padding-bottom: 2.4rem;
	}
	.section.sec4_wrap {
		padding-left: 2.4rem;
		padding-right: 2.4rem;
	}
}

/*----------------------------------------
 HOW TO
----------------------------------------*/
.how_to_images {
	display: block;
	margin-bottom: 5%;
}
.how_to_images > div:not(:last-child) {
	position: relative;
	text-align: center;
}
.how_to_images > div:not(:last-child):after {
	content: "";
	display: block;
	background-image: url(https://uuuni-cosmetics.com/wp-content/themes/uuuni/assets/img/item/sec4_arrow.png);
	margin: 0 auto;
	width: 1.7rem;
	height: 5.5rem;
	background-repeat: no-repeat;
	background-size: 80% 80%;
	background-position: center;
	transform: rotate(90deg);
}
.how_to_images img {
	width: 100%;
}
.how_to_images p {
	margin: .5em 0 0;
	font-size: .8rem;
	text-align: center;
	line-height: 1.7;
}
.cation {
	padding: 2rem 0;
}
.cation_h3 {
	margin-bottom: .5em;
	padding-bottom: .5em;
	text-align: center;
	font-size: 1rem;
	border-bottom: 1px solid #000;
	line-height: 2.2;
	transition: .6s ease;
}
.cation p {
	margin: 1em 0;
	font-size: .7rem;
	letter-spacing: 1px;
	transition: .6s ease;
}
.all_seibun {
	position: relative;
}
.all_seibun h3 label {
	display: block;
	background: #000;
	color: #fff;
	font-size: 1.1rem;
	text-align: center;
	padding: .5em 0;
}
.all_seibun_in {
	background: #eee;
	padding: 1.3rem;
	font-size: .7em;
	line-height: 2;
}
.all_seibun.open .all_seibun_in {
	display: none;
}
.all_seibun h3 label:after {
	content: "－";
	position: absolute;
	right: 1em;
}
.all_seibun.open h3 label::after {
	content: "＋";
}

@media (min-width: 769px) {
	.how_to_images > div:not(:last-child):after {
		background-size: 100% 100%;
	}
	.how_to_images p {
		font-size: 1.1rem;
	}
	.cation_h3 {
		font-size: 1.4rem;
		transition: .6s ease;
	}
	.cation p {
		font-size: .9rem;
		transition: .6s ease;
	}
	.all_seibun h3 label {
		font-size: 1.4rem;
	}
	.all_seibun_in {
		font-size: .9rem;
	}
}

/*----------------------------------------
 休業案内画像
----------------------------------------*/
.closed-image {
	margin-top: 10%;
	width: 100%;
	border: 1px solid #e1e1e1;
}
@media (min-width: 769px) {
	.closed-image {
		margin-top: 0;
	}
}

/*----------------------------------------
 リサーチコンテンツ
----------------------------------------*/
.research-block {
	margin: 0 auto;
	max-width: 640px;
	width: 100%;
}
.research-img {
	margin-top: 10%;
	width: 100%;
}
@media (min-width: 769px) {
	.research-img {
		margin-top: 70px;
	}
}