@charset "utf-8";

.for_sp {
	display: none;
}
@media screen and (max-width: 767px) {
	.for_pc {
		display: none;
	}
	.for_sp {
		display: block;
	}
}

/*Other*/

#ProductWrap .tokyo-handcream .other-tokyo-koji {
	position: relative;
  background: url(../../images/tokyo-handcream/other_bg.png) 50% 0 / cover no-repeat;
  margin-top: -10.5%;
  margin-bottom: -5%;
  padding: 10% 0 12%;
  z-index: 1;
}
#ProductWrap .tokyo-handcream .heading .ttl {
  width: auto;
  max-width: 100%;
  height: 25px;
  margin: 0 auto 40px;
}
#ProductWrap .tokyo-handcream .other-tokyo-koji .heading .bar {
  display: block;
  width: 11px;
  margin: 0 auto 40px;
}
#ProductWrap .tokyo-handcream .other-tokyo-koji .heading .ttl {
  margin-bottom: 40px;
}
#ProductWrap .tokyo-handcream .other-tokyo-koji .item a {
  display: block;
  width: 577px;
  margin: 0 auto;
}
#ProductWrap .tokyo-handcream #bottom {
  margin-top: -12%;
}
#ProductWrap .tokyo-handcream #bottom .box_area {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
	#ProductWrap .tokyo-handcream .other-tokyo-koji {
    background-image: url(../../images/tokyo-handcream/other_bg_sp.png);
    padding: 75px 0 100px;
  }
  #ProductWrap .tokyo-handcream .heading .ttl {
  	width: 100%;
  	height: auto;
  	margin: 0 auto;
  }
  #ProductWrap .tokyo-handcream .other-tokyo-koji .heading .bar {
  	margin-bottom: 50px;
  }
	#ProductWrap .tokyo-handcream .other-tokyo-koji .item a {
    width: 100%;
  }
}

#ProductWrap .other-tokyo-tsubaki {
	position: relative;
	background: url(../../images/tokyo/other_bg.jpg) center center no-repeat;
	background-size: cover;
	padding: 100px 0 15%;
	z-index: 1;
}

#ProductWrap .other-tokyo-tsubaki .for_sp {
	display: none;
}

#ProductWrap .other_heading {
	width: 292px;
	margin: 0 auto 50px;
}

#ProductWrap .other_item {
	width: 650px;
	margin: 0 auto;
}

#ProductWrap .other_heading img,
#ProductWrap .other_item img {
	display: block;
	width: 100%;
}

@media screen and (max-width: 767px) {
	#ProductWrap .other-tokyo-tsubaki {
		background-image: url(../../images/tokyo/other_bg_sp.jpg);
	}

	#ProductWrap .other-tokyo-tsubaki .for_pc {
		display: none;
	}

	#ProductWrap .other-tokyo-tsubaki .for_sp {
		display: block;
	}

	#ProductWrap .other_heading {
		width: 215px;
	}
	
	#ProductWrap .other_item {
		width: 100%;
		max-width: 375px;
		margin: 0 auto;
	}
}


/*-----------------------------------------------------*/
/* handcream */
/*-----------------------------------------------------*/
.mv-area {
	position: relative;
  padding: 120px 40px 0;
  background: url(../../images/tokyo-handcream/mv_bg_pc.png) 50% 50% / cover no-repeat;
  z-index: 3;
}
.mv-txt {
	width: 80%;
	max-width: 860px;
	margin: 0 auto;
	transform: translateY(30px);
}
.sec-wrap.sec1 {
  position: relative;
  padding: 15px 40px 180px;
  background: url(../../images/tokyo-handcream/sec1_bg_pc.png) 50% 50% / cover no-repeat;
  z-index: 1;
  overflow: hidden;
}
.sec-wrap.sec1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	width: calc(100% - 30px);
	height: 100%;
	background: url(../../images/tokyo-handcream/sec1_item1_pc.png) 0 50% / auto 100% no-repeat;
	pointer-events: none;
}
.sec-wrap.sec1::after {
	content: "";
	position: absolute;
	top: 0;
	right: 30px;
	width: calc(100% - 30px);
	height: 100%;
	background: url(../../images/tokyo-handcream/sec1_item2_pc.png) 100% 50% / auto 100% no-repeat;
	pointer-events: none;
}
.sec1_item {
	position: relative;
  width: 95%;
  max-width: 833px;
  margin: 0 auto;
  z-index: 1;
}
.sec-wrap.sec2 {
  display: block;
  padding-bottom: 45%;
  margin-bottom: -15%;
  background: url(../../images/tokyo-handcream/sec2_bg_pc.png) 50% 100% / cover no-repeat;
}
.sec-wrap.sec3 {
  padding: 220px 40px;
  background: url(../../images/tokyo-handcream/sec3_bg_pc.png) 50% 0 / cover no-repeat;
}
.sec3_title {
  max-width: 833px;
  margin: 0 auto 180px;
}
.sec3_ing.ing1 {
  width: 100%;
  padding-right: 2%;
  margin: 0 auto 158px;
}
.sec3_ing.ing2 {
  width: 88%;
  padding-left: 12%;
  margin: 0 auto 80px;
}
.sec3_ing.ing3 {
  width: 100%;
  padding-right: 3%;
}
.sec-wrap.sec4 {
  position: relative;
  padding: 10% 40px 24%;
  margin: -10% auto -15%;
  background: url(../../images/tokyo-handcream/sec4_bg_pc.png) 50% 0 / cover no-repeat;
  z-index: 1;
  overflow: hidden;
}
.sec-wrap.sec4::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 40px;
	width: calc(100% - 40px);
	height: 70%;
	background: url(../../images/tokyo-handcream/sec4_item2_pc.png) 0 0 / auto 100% no-repeat;
}
.sec-wrap.sec4::after {
	content: "";
	position: absolute;
	top: 10%;
	right: 40px;
	width: calc(100% - 40px);
	height: 70%;
	background: url(../../images/tokyo-handcream/sec4_item3_pc.png) 100% 0 / auto 100% no-repeat;
}
.sec4_title {
	position: relative;
  width: 50%;
  max-width: 500px;
  margin: 0 auto 84px;
  z-index: 1;
}
.sec4_product {
  position: relative;
  display: flex;
  padding-right: 36px;
  justify-content: center;
  align-items: center;
  gap: 0 100px;
  z-index: 1;
}
.product_name {
  margin-bottom: 54px;
}
.product_more {
  display: flex;
  justify-content: center;
}
.more_btn {
  display: block;
  font-size: 0;
  cursor: pointer;
}
.more_btn:hover {
	opacity: 0.8;
}

@media screen and (max-width: 767px) {
	.mv-area {
  	padding: 33px 40px 36px;
  	background-image: url(../../images/tokyo-handcream/mv_bg_sp.png)
	}
	.mv-txt {
    transform: none;
  }

  .sec-wrap.sec1 {
  	padding: 38px 40px 56px;
  	background-image: url(../../images/tokyo-handcream/sec1_bg_sp.png);
	}
	.sec-wrap.sec1::before {
	  left: 13px;
	  width: calc(100% - 13px);
	  background-image: url(../../images/tokyo-handcream/sec1_item1_sp.png);
	}
	.sec-wrap.sec1::after {
	  right: 13px;
	  width: calc(100% - 13px);
	  background-image: url(../../images/tokyo-handcream/sec1_item2_sp.png);
	}

	.sec-wrap.sec2 {
		background-image: url(../../images/tokyo-handcream/sec2_bg_sp.png);
	}

	.sec-wrap.sec3 {
  	padding: 75px 40px 128px;
  	background-image: url(../../images/tokyo-handcream/sec3_bg_sp.png);
	}
	.sec3_title {
  	width: 95%;
  	margin-bottom: 55px;
	}
	.sec3_ing.ing1 {
	  width: calc(100% + 40px);
	  padding: 0;
  	margin: 0 -20px 75px;
	}
	.sec3_ing.ing2 {
	  width: calc(100% + 10px);
	  padding: 0;
	  margin-bottom: 80px;
	}
	.sec3_ing.ing3 {
	  width: calc(100% + 35px);
	  padding: 0;
	  margin: 0 -17px;
	}

	.sec-wrap.sec4 {
		padding: 16vw 40px 34.66vw;
  	margin: -16vw 0;
  	background-image: url(../../images/tokyo-handcream/sec4_bg_sp.png);
	}
	.sec4_title {
  	width: calc(100% + 40px);
  	max-width: calc(100% + 40px);
  	margin: 0 -20px 40px;
	}
	.sec-wrap.sec4::before {
  	top: 38vw;
  	left: 14px;
  	height: calc(100% - 50vw);
  	background-image: url(../../images/tokyo-handcream/sec4_item2_sp.png);
	}
	.sec-wrap.sec4::after {
  	top: 38vw;
  	right: 14px;
  	height: calc(100% - 50vw);
  	background-image: url(../../images/tokyo-handcream/sec4_item3_sp.png);
	}
	.sec4_product {
		padding: 0;
  	flex-wrap: wrap;
  	justify-content: center;
  	gap: 30px 0;
	}
	.product_img {
  	width: 47%;
	}
	.product_info {
  	width: 62%;
  	order: 1;
	}
	.product_name {
  	margin-bottom: 16px;
	}
	.product_more {
  	width: 56%;
  	margin: 0 auto;
	}
}