/* CSS Document */
*{
	font-family: yu-gothic-pr6n, sans-serif;

}
.lp-wrap {
  /* 0.5秒かけてふわっと表示させるアニメーション */
  transition: opacity 0.5s ease-in-out;
}

.pagetop{
	display: none;
}

main{
	background: #fffcf7;
}

sup{
	vertical-align: revert;
    font-size: 0.9rem;
}


.l-contents{
	    margin-top: -24px;
}

.relative{
	position: relative;
}

.lp-fv.-pc{
	display: none;
}


.lp-wrap{
	width: 100%;
}

.content01{
	    background: #000;
    color: #fff!important;
    text-align: center;
	overflow: visible !important; 
}

.expandable-title{
	font-family: shippori-mincho, sans-serif;
    font-size: 6.2vw;
}


.content01 > .next-content{
	font-family: shippori-mincho, sans-serif;
    font-size: 1.6rem;
    margin-left: 3%;
}

.content-cta{
	    padding: 15% 0;
	text-align: center;
}

.content-cta p:nth-child(1){
	border: 1px #fff solid;
    width: fit-content;
    margin: 0 auto 2%;
	    padding: 0% 3%;
}

.content-cta p:nth-child(2){
font-size: 2.5rem;
    font-family: cochin-lt-pro, sans-serif;
    letter-spacing: 0.15rem;
    line-height: 1;
}

.content-cta span{
	font-size: 1.6rem;
}

.content-cta p:nth-child(2){
    font-size: 2.5rem;
}

.content-cta-d-cart img{
	    width: 60%;
    margin: 3% auto;
}


.lp-product-junp{
	    display: flex;
    justify-content: center;
}

.lp-product-junp a{
	    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    color: #fff;
}

.lp-product-junp-img {
	    width: 8%;
    margin-left: 11%;
    margin-top: 4%;
}


/*
.lp-content{
	margin: 10% 0 20%;
}
*/


.content01-title{
	padding: 25% 0;
}

.contents-voice{
	margin-bottom: 10%;
}

.contents-voice h3{
	text-align: center;
    padding: 10% 0 5%;
    font-family: cochin-lt-pro, sans-serif;
    font-size: 2rem;
    font-weight: 100;
    color: #333;
}

.contents-voice p{
	text-align: center;
    margin-bottom: 5%;
}


.contents-voice h3::after{
	    content: "";
    border-bottom: 1px solid #333;
    width: 20px;
    display: block;
    margin: 0 auto;
}

.content02{
	position: relative;
}

.content02 h3{
	    text-align: center;
    margin: 10%;
}

.content02 h3::after{
    content: "";
    width: 5%;
    border-bottom: 1px solid #333;
    height: 1px;
    display: block;
    margin: 6% auto;
}

.content02 p{
	text-align: center;
	    letter-spacing: 0.1rem;
    line-height: 1.8;
}

.content02 img{
	    width: 95%;
    margin: 5% auto 7%;
}

.content02 span{
	text-align: right;
    display: block;
    padding-right: 15px;
    font-size: 1rem;
    padding: 1% 15px 0 0;
}


.content02 h3{
    text-align: center;
    margin: 10%;
    font-family: shippori-mincho, sans-serif;
    font-size: 2.5rem;
    font-weight: 100;
    line-height: 1.4;
}

.content02 h4{
	text-align: center;
    margin: -9% 0 2% 3%;
    font-size: 2.5rem;
    font-family: shippori-mincho, sans-serif;
    font-weight: 100;
}

.content-cta.-cta02 p:nth-child(3){
	    font-family: cochin-lt-pro, sans-serif;
	font-size: 2rem;
}

.content-cta.-cta02 p:nth-child(2){
	font-size: 1rem;
    font-family: yu-gothic-pr6n, sans-serif;
    color: #fff;
    background: #333;
    width: fit-content;
    letter-spacing: 0;
    padding: 1% 2%;
    margin: 3% auto;
}

.-cta02 > .lp-product-junp a,.-cta03 > .lp-product-junp a{
	    color: #333;
}

.content03 h3,.content04 h3,.content05 h3{
    text-align: left;
    margin: -9% 5% 3%;
    font-size: 2rem;
    font-family: shippori-mincho, sans-serif;
    font-weight: 100;
    border-bottom: 1px solid #750605;
    padding: 0%;
    color: #750605;
}

.content04{
	margin-bottom: 30%;
}
.content05{
/*	margin-bottom: 20%;	*/
}

.img-03{
	    width: 25%;
    margin: 10% auto 0;
}

.img-03.-cream{
	    width: 55%;
    margin: 20% auto 0;
}

.img-05,.img-06,.img-07{
	width: 90%;
    margin: 10% auto 20%;
}

.img-06-video{
width: 100%;
    position: absolute;
}

.img-08,.img-09{
	    width: 90%;
    margin: 8% auto;
}


.common-01{
    width: 90%;
    margin: 10% auto 0%;
}

.common-02{
	    background: #750605;
    color: #fff;
    padding: 7%;
}

.common-02 h3{
    text-align: center;
    padding-bottom: 8%;
    font-family: cochin-lt-pro, sans-serif;
    font-size: 2rem;
    font-weight: normal;
}

.common-02 p{
	    margin: 7% 2%;
    text-align: justify;
    line-height: 2;
}

.common-02 a img{
	    background: #750605;
    color: #fff;
    padding: 0% 7% 15%;
}



.-cta02 > .lp-product-junp{
	color: #333;
}

.-cta02.-cream > .lp-drug, .content-cta.-cream > .lp-drug{
	display: flex;
    align-items: center;
    justify-content: center;
    margin: 1% 0;
}

.-cta02.-cream > .lp-drug span,.content-cta.-cream > .lp-drug span{
	    font-size: 1.1rem;
    background: #e5e5e5;
    padding: 0% 1%;
    margin-right: 3%;
}

.content-cta.-cream > .lp-drug span{
	color: #333;
}

.-cta03-img{
	width: 95%;
    margin: 0 auto 10%;
}

.img-01.-pc{
	display: none;
}
.ukomiInstaCarousel-wrap{
	max-width: 50%;
}

.lp-text-attention{
	    font-size: 1rem;
    text-align: right;
    display: block;
    margin: 2% 5% 0 0;
	padding-bottom: 4%;
}



@media screen and (min-width: 768px) {
	
	.expandable-title{
		font-size: 3rem;
	}
	.lp-fv.-pc{
	display: block;
}
	.lp-fv.-sp{
	display: none;
}
	
	.expandable-title{
		font-size: 3rem;
	}
	.content01 > .next-content{
		margin-left: 0;
	}
	
	.content-cta{
		padding: 5% 0;
	}
	
	.content-cta-d-cart img {
width: 19%;
        margin: 1% auto 1%;
	}
	.lp-product-junp-img {
    width: 4%;
    margin-left: 7%;
    margin-top: 1%;
}
	.img-01.-pc{
		display: block;
	}
	.img-01.-sp{
		display: none;
	}
	.lp-wrap-02{
		width: 700px;
		margin:0 auto;
	}
	
	.lp-wrap-03{
		width: 500px;
		margin:0 auto;		
	}
	.content-cta.-cta02 p:nth-child(2) {
		    font-size: 1.5rem;
		    padding: 1% 2%;
    margin: 6% auto 2%;
	}
	.content-cta.-cta02 p:nth-child(3){
		font-size: 2.4rem;
	}
	
	.-cta02 > .content-cta-d-cart img{
		        width: 40%;
        margin: 5% auto 1%;
	}
	
	.content-cta.-cta02{
		margin-bottom: 20%;
	}
	.-cta03 > .content-cta-d-cart img{
		width: 60%;
	}
	.content-cta.-cta03{
		    margin-bottom: 30%;
	}
	.common-02-flex{
		display: flex;
        gap: 4%;
        align-items: flex-start;
        width: 100%;
	}
	
	.common-02-flex img{
		    width: 45%;
	}
	.common-02-flex div p{
		    width: 80%;
    margin: 0% auto 4%;
	}
	
	.common-02-flex a img{
		    width: 63%;
        margin: 0 auto;
	}
	
	
		
}



/* ------------------ふわっと出現・動き-----------------*/
.down.move {
    transform: translateY(0px);
    opacity: 1;
}

.down{
	transition: 0.6s;
    transform: translateY(-20px);
    opacity: 0;
}

.move{
	transform: translateY(0px);
    opacity: 1;
}

/*パララクス*/
/* スクロール区間 */
.expandable-wrapper {
  position: relative;
  height: 150vh; /* スクロール量の調整 */
  background: #000;
}

/* 固定ではなく、普通のブロックにしておく */
.sticky-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* テキストはデフォルト非固定 */
.expandable-title-container {
  text-align: center;
  width: 100%;
}

/* 固定用クラス */
.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	width: 100%;
}

.expandable-title-container {
  text-align: center;
	width: 100%;
  transition: opacity 0.8s ease; /* ふわっと消える */
  opacity: 1;
}

.expandable-title-container.fade-out {
  opacity: 0;
}