@charset "UTF-8";

html,body{
	overflow-x: hidden;
}


.cta{
	background: #fe9dc1;
	padding:10px 15px 0;
}
.cta .note{
	color: #fff;
	font-size: 10px;
	line-height: 1.3;
	margin: 0 0 15px;
}
.cta-content{
	z-index: 2;
	position: relative;
	background: #fff;
	box-shadow: 0px 0px 15px -5px #777777;

}
.cta-title{
	position: relative;
	z-index: 2;
}
.cta-title img{
	width: 100%;
}
.cta-title .icon{
	position: absolute;
	right: -3px;
	top: 12vw;
	zoom: .6;
}
.cta-inner{
	padding: 15px;
}
.cta .prd01{
	text-align: center;
	margin: 0 0 10px;
}
.cta .set-group{
	border:2px solid #c0094d;
	margin: 0 0 15px;
}
.cta .set-title{
	background: #c0094d;
	text-align: center;
	padding: 4px 0;
}
.cta .set-prd{
	margin: 0 0 10px;
}
.cta .set-inner{
	text-align: center;
	padding: 15px;
}
.cta .img img{
	width: 100%;
}
.cta .img{
	position: relative;
	margin: -72vw -15px 0;
}
.cta .img .img02{
	position: absolute;
	bottom: -1vw;
}
.voice1{
	background: url(/template/default/img/sp/dsm/voice_bg01.jpg) no-repeat;
	background-size:cover;	
	padding: 0 0 20px;
}
.voice1-title{
	margin-top: -6vw;
}
.voice1 .item{
	margin-top: -5vw;
}
.voice1 .item:first-child{
	margin-top: 0;
}
.point1{
	background: url(/template/default/img/sp/dsm/point1_bg01.jpg) no-repeat;
	background-size:cover;
	padding: 20px 0 80px;
}
.point1-title{
	margin: 0 0 15px;
}
.point1 .item{
	position: relative;
	margin-top: -8vw;
}
.point1 .item:first-child{
	z-index: 5;
	margin-top: 0;
}
.point1 .item:nth-child(2){
	z-index:4;
}
.point1 .item:nth-child(3){
	z-index:3;
	margin-top: -5vw;
}
.point1 .item:last-child{
	z-index: 2;
	margin-top: -6.3vw;
}
.point2{
	background: url(/template/default/img/sp/dsm/point2_bg01.png) no-repeat;
	background-size:cover;
	padding: 9vw 0 40px;
	margin-top: -22vw;
}
.point2 .item{
	position: relative;
}
.point2 .squeeze{
	position: absolute;
	left: 0;
    width: 93vw;
    top: 36vw;
}
.movie-area{
	background: url(/template/default/img/sp/dsm/movie_bg01.jpg) no-repeat;
	background-size:cover;
	padding: 20px 0 0;
}
.movie-title{
	margin: 0 0 10px;
}
.movie-content{
	border:3px solid #fff;
	width: 91%;
	margin: auto;
}
.movie-img{
	margin-top: -10vw;
}

.voice2{
	background: url(/template/default/img/sp/dsm/voice2_bg01.jpg) no-repeat;
	background-size:cover;	
	margin-top: -30vw;
	padding:23vw 0 35px;
}
.voice2-title{
	margin: 0 0 20px;	
}
.voice2 .item{
	margin-bottom: 20px;
}
.howto{
	background: url(/template/default/img/sp/dsm/howto_bg01.jpg) no-repeat;
	background-size:cover;	
	padding: 45px 0;
}
.howto-title{
	margin: 0 0 40px;
}
.howto video{
	border:3px solid #fff;
	width: 100%;
}
.howto-content{
	width: 91%;
	margin: auto;	
}
.howto .heading{
	font-weight: bold;
	text-align: center;
	font-size: 2.6rem;
	margin:24px 0;
	line-height: 1.3;
}
.howto .desc{
	font-size: 1.7rem;
	line-height: 1.5;
}
.howto .note{
	color: #888;
	font-size: 10px;
}
.ingredients{
	border:3px solid #c6a27b;
	background: #fff;
	padding:40px 25px 0;
	margin: 35px 0 0;
}
.ingredients-title{
	text-align: center;
	margin: 0 0 20px;
}
.ingredients .title-text{
	display: block;
	font-size: 1.6rem;
	margin: 12px 0 0
}



.faq {
	padding: 10px 0 40px;
}
.faq-title{
	margin: 0 0 30px;
}
.faq .title-text{
	text-align: center;
	display: block;
	font-size: 1.6rem;
	margin: 12px 0 0
}

.faq .faq__group{
	border-top:1px solid #eee;
}
.faq .faq__group:last-child{
	border-bottom:1px solid #eee;
}

.faq .q{
    text-align: left;
	position: relative;
	display: flex;
	align-items: center;
    padding:17px 15px 15px;
}
.faq .q p{
	font-weight: bold;
	margin:0 0 0 15px;
	line-height: 1.4;
    width: 78%;
    color: #222;
    font-size: 1.7rem;
}
.faq .a{

	background: #fafafa;
    text-align: left;
	display: none;
    padding: 15px;
}
.faq .a-inner{
	display: flex;
}
.faq .icon{
	flex-shrink: 0;
	zoom:.6;
}
.faq .a p{
	color: #222;
	margin: 0;
	padding: 0 15px;
	    font-size: 1.5rem;

}
.faq .plus{
	display: inline-block;
    margin: 0 0 0 30px;
}
.faq .plus::before,
.faq .plus::after {
    content: '';
    display: block;
    width: 15px;
    height: 1px;
    background: #340016;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.faq .plus::after {
    transform: translateY(-50%) rotate(90deg);
    transition: 0.5s;
}
 
.faq .active .plus::after {
    transform: rotate(0);
    transition: 0.5s;
}
.fadeInRight,
.fadeInLeft,
.fadeIn {
	animation-duration:3s;

}
.fadeInRight {
    -webkit-animation-name: fadeInRight2;
    animation-name: fadeInRight2;
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft2;
    animation-name: fadeInLeft2;
}
@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@media(min-width:750px){
.dsm{
	max-width: 750px;
	margin:0 auto 100px;
	box-shadow: 0px 0px 15px -5px #777777;
}
.point2 .squeeze {
    width: 90.9vw;
}	
.cta .img {
    margin: -400px -15px 0;
}
	
.howto .heading {
    font-size: 4.6rem;
}
.howto .desc {
    font-size: 2.2rem;
    line-height: 1.5;
}
.faq{
	margin-top: 50px;
}
}

@media(min-width:922px){
.point2 .squeeze {
	width: 697px;
    top: 250px;
}
.cta-title .icon {
    position: absolute;
    right: -3px;
    top: 60px;
    zoom: 1;
}	
.voice1-title {
    margin-top: -4vw;
}
.voice1 .item {
    margin-top: -3vw;
}
.point1 {

    padding: 20px 0 150px;
}
.point1 .item {
    position: relative;
    margin-top: -5vw;
}
.point1 .item:nth-child(3) {
    margin-top: -4vw;
}
.point1 .item:last-child {
    margin-top: -4.5vw;
}
.point2 {
    padding: 6vw 0 40px;
    margin-top: -12vw;
}
.movie-img {
    margin-top: -3vw;
}
.voice2{
	padding: 16vw 0 35px;
}
}


.dsm_sticky {
	width: 750px;
	position: fixed;
	bottom: 0;
	z-index: 10;
}
@media (max-width: 640px) {
  .dsm_sticky {
	width: 100%;
  }
}