@charset "utf-8";
/* CSS Document */
/*.top-bg{
	background: #faf5ee url("img/main-bg.jpg") no-repeat top center;
	background-size: cover;
}*/

.btn_floating3 {
	position: fixed;
	bottom: 20px;
	right: 2.5vw;
	z-index: 10;
	width: 120px;
}

.btn_floating3 {
	width: auto;
}
.btn_floating3 a:hover img {
	content: url(/item/powder/img/btn_floating_cp_ro.png);
}

img.gentei{
	margin-top:20px;
}

@media only screen and (max-width: 991px) {
    .btn_floating3 img
	 {
			width: 87.5%;
			float: right;
	}
	img.gentei{
		width: 50%;
		margin-top:-20px;
	}
}

.top-bg {
  position: relative;
  background: #faf5ee;   
  max-height: 1730px;   
  z-index: 1;
}

@media screen and (min-width: 992px) {
	img.mt-20{
		margin-top:-60px;
	}
}


/* 画像部分（高さ1000px） */

.top-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1200px;  /* ← ここまで画像を表示 */
  background: url("img/main-bg.jpg") no-repeat top center;
  background-size: cover;
  z-index: -1;
}

@media screen and (max-width:991px) {
	.top-bg {
		background:#fff;
	}
	
	.top-bg::before {
		background-size: 100%;
background-position: top;
background-repeat: no-repeat;
	}
}

.plus{
	position: relative;
	z-index: 1000;
}

@media screen and (min-width:992px) {
	.powder_inner{
	max-width: 1200px;
	  margin: 0px auto;
		position: relative;
	}
	
	.second-bg{
	background: url("img/main_btm2_bg.jpg") no-repeat top center;
	background-size: cover;
	}
}
@media screen and (max-width:991px) {
	.powder_inner{
		padding: 10px;
	}
}


.mv-pink{
	background-color: rgba(226,120,166,.8);
	padding: 20px 20px 60px;
}

@media only screen and (max-width: 991px) {
	.mv-pink{
		padding: 20px 10px 10px;
	}
}

@media screen and (min-width:992px) {
	.main-img-layout{
		position: relative;
  		top: -30px;
	}
	
	.off-img-layout{
		position: relative;
  		top: -100px;
	}
	
		.txt-layout{
		position: relative;
  		top: -200px;
	}
}
.main-img {
  background-color: #FFFDF4;
  background-size: cover;
  background-position: center right;
  padding-bottom: 50px;
}

.pre-txt{
	color: #502a22;
	font-weight: bold;
	font-size: 20px;
}

.main-img3 p {
  color: #502a22;
  font-weight: bold;
  font-size: 24px;
  line-height: 170%;
}
.main-img3 p.txt2 {
  margin-top: 20px;
  color: #67403a;
  font-size: 20px;
}
p.txt3 {
  color: #502a22 !Important;
  font-size: 22px;
  line-height: 170%;
  font-weight: bold;
}
.beige_bg {
  background-color: #f8f7f1;
  background-size: cover;
}

.items_detail_s3{
	background: none;
	padding-top: 0;
}


.tea_w_woman {
  position: absolute;
  top: 55%;
  transform: translateY(-55%);
  left: 48%;
}
ul.riyou li {
  list-style: disc outside;
  font-size: 20px;
  font-weight: bold;
	color: #67403a;
	margin-bottom: 10px;
	margin-left: 20px;
	line-height: 120%;
}
.main-img__inner {
  width: 100%;
}
.bg-pink {
  margin-right: calc(50% - 50vw) !Important;
  margin-left: calc(50% - 50vw) !Important;
  padding-right: calc(50vw - 50%) !Important;
  padding-left: calc(50vw - 50%) !Important;
  background-color: #e45599;
  color: white;
  font-weight: bold;
  font-size: 30px;
  padding: 20px 50px;
  text-align: center;
  line-height: 120%;
  text-align: center;
}
.bs-container {
  width: 100%;
  max-width: 1140px; /* Bootstrap 4 の container-lg 相当 */
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.container {
  max-width: 100% !important;
}
@media screen and (max-width:991px) {
  .bg-pink {
    font-size: 24px;
  }
}
.pc-hidden {
  display: block;
}
.sp-hidden {
  display: none;
}
@media screen and (min-width:992px) {
  .sp-hidden {
    display: block;
  }
  .pc-hidden {
    display: none;
  }
}
.customer__inner {
  padding-top: 50px !Important;
}
.item_detail .intro {
  background-image: none !Important;
	padding-top: 30px;
}
.items_detail_s4:before {
  content: none !Important;
}
span.price {
  font-size: 18px;
}
@media screen and (min-width: 992px) {
  .items_detail_s4 {
    padding: 60px 0 50px !Important;
  }
  .items_detail_s3 .item_detail_table2 {
    width: 1000px !Important;
  }
}
.items_detail_s3 .item_detail_table2 table tr td:nth-child(2) {
  background: none !Important;
}
.items_detail_s3 table tr td:last-child {
  color: #d95965 !Important;
}
@media only screen and (max-width: 991px) {
  .items_detail_s3 .item_detail_table2 {
    width: 100%;
    padding: .5em 5px;
  }
  span.price {
    font-size: 14px !Important;
  }
  .item_detail .info {
    padding-bottom: 0;
  }
  .items_detail_s3 .item_detail_table2 table tr:not(.first) td:last-child {
    padding: 5px;
  }
}
.speechBubble {
  position: relative;
  display: inline-block;
  margin-left: 40px;
  padding: 20px 5vw;
  border: 5px solid #e3dcd6;
  border-radius: 20px;
  background-color: #ffffff;
  text-align: left;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  color: #db2f85;
}
.speechBubble::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 0;
  border-style: solid;
  border-width: 20px 40px 20px 0;
  border-color: transparent #e3dcd6 transparent transparent;
  translate: -100% -50%;
}
.speechBubble::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 0;
  border-style: solid;
  border-width: 14.4px 28.8px 14.4px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
}
@media only screen and (max-width: 767px) {
  .speechBubble {
    font-size: 20px;
    padding: 20px;
    margin-left: 0;
  }
  .speechBubble::after, .speechBubble::before {
    /*content:none;*/
  }
}
.speechBubble2 {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding: 16px;
  border: 2px solid #d95965;
  border-radius: 8px;
  background-color: #d95965;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
}
/* 内側の白い点線枠 */
.speechBubble2::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 2px dotted #ffffff;
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}
/* 吹き出しの三角マーク */
.speechBubble2::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #d95965 transparent transparent transparent;
}


@media screen and (max-width:991px) {
	img.centering2 {
		display: block;
		margin: 0px auto;
		max-width: 100% ! Important;
		height: auto;
	}	
}

.img-hover-scale {
  transition: transform 0.4s ease;
  display: block;
}

.img-hover-scale:hover {
  transform: scale(1.05);
}

@media screen and (min-width: 992px) {
	.items_detail_s6 table{
		margin-top:50px;
	}
}

select{
	height: 40px;
}
 .hidden-select {
    display: none;
  }



.yellow-marker{
	background:linear-gradient(transparent 50%, #FFFF00 50%);
	padding:0 5px 0 7px;
}

.yellow-marker2{
	background:linear-gradient(transparent 50%, #FFFF00 50%);
}

.purple-marker{
	background:linear-gradient(transparent 50%, #e0c1ff 50%);
	padding:0 5px 0 7px;
}

p.p-set{
	font-size: 90%;
}

@media only screen and (max-width: 991px) {
	p.p-set{
	font-size: 70%;
	}
}

p.date{
	color:#502a22!Important; margin-top:-10px;
}

@media only screen and (max-width: 991px) {
	p.date{font-size:80%; margin-top:0;}
}


.img-top-left {
	position: absolute;
	top: -30px;
	left: 30px;
	z-index: 1; /* 重なり対策 */
}

img.img-top-left{
	width: 10%;
}

@media only screen and (max-width: 991px) {
	.img-top-left {
		top:10px;
		left:5px;
	}
	img.img-top-left{
		width: 20%;
	}
}