@charset "UTF-8";
@import url(cmn.css);
@import url(base.css);

/*----------------------------
mv
----------------------------*/
#mv{
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 1;
    background: url("../images/mv-bg.webp");
    background-position: bottom center;
    background-size: cover;
    text-align: center;
    background-repeat: no-repeat;
}
#mv h1{
    padding:50px;
}

#mv .inner{
    padding-right:50px;
    padding-left:50px;
    width:auto;
}
#mv p img{
    margin-bottom:30px;
}
@media screen and (max-width: 768px){
    #mv{
    background: #fff,url("../images/mv-bg.webp") ;
    background-position:50% 0;
    background-size: auto 100% ;
    }
    #mv .wrapper,
    #mv .inner{
     padding-left:0px;
     padding-right:0px;
    }
    #mv h1{
    padding:30px 0 20px 0;
    }
    #mv h1 img{
    max-width:200px;
    }
    #mv p img{
    max-width:100%;
    }
}
/*----------------------------
main
----------------------------*/
#trouble{
    background:url("../images/trouble-bg.webp");
    background-size: cover;
    color:var(--white);
}
#trouble h1{
    background:url("../images/trouble-h2.webp") no-repeat;
    background-position: top center;
    padding-top:50px;
    
}
#trouble ul{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin-top:30px;
}
#trouble ul li{
    text-align: left;
    width:calc(33% - 30px);
    position:relative;
    padding-left:30px;
    margin:10px 0;
}
#trouble ul li:before{
    position:absolute;
    left:0;
    top:calc(50% - 12.5px);
    content:"";
    width:25px;
    height:25px;
    background:url("../images/trouble-img.webp") no-repeat;
}
#trouble ul li:last-of-type:before{
    display: none;
}
.trouble2{
    width: 90vw;
    margin: 0 calc(50% - 45vw);
    justify-content: space-around;
    display: flex;
}
.trouble2 div{
    width:25vw;
}
.trouble2 div h2{
    margin-bottom:20px;
}
.trouble2 div h2{
    color:#978d58;
}
.trouble2 div:nth-child(2) h2{
    color:#c16244;
}
.trouble2 div:last-of-type h2 {
    color:#8E80AC;
}
#trouble2 .tsumari img{
    margin-bottom:30px;
}

@media screen and (max-width: 1080px){
    #trouble ul li{
        width:50%;
    }
    .trouble2{
        flex-direction: column;
        width:auto;
    }
    .trouble2 div{
        width:100%;
        margin-bottom:calc(var(--spacer)*2);
    }
    #trouble2 .tsumari img{
    max-width:80%;
    }
}
@media screen and (max-width: 768px){
    #trouble ul li{
        width:100%;
    }
    #trouble2 .tsumari img{
    max-width:50%;
    }
}
#because{
    background:url("../images/because-bg.webp") no-repeat;
    background-position: top center;
    background-size:cover;
    text-align: center;
}

#feature .flex{
    margin-bottom:calc(var(--spacer)*10);
}
#feature .flex:last-child{
    margin-bottom:0;
}
#feature .flex:nth-child(even) {
    flex-direction:row-reverse;
}
#feature .flex figure{
    width:56%;
    margin-bottom:20px;
}
#feature .flex div{
    width:40%;
}
#feature .flex div h2{
    text-align: left;
}
@media screen and (max-width: 768px){
   #feature .flex{
    margin-bottom:calc(var(--spacer)*5);
    }
}

#effect{
    background:url("../images/effect-bg.webp") no-repeat;
    background-position: top center;
    background-size:100% 25vw;
}
#effect .inner{
    background:var(--white);
    padding:calc(var(--spacer)*5);
}
#effect .flex{
    flex-direction:row-reverse;
}
#effect .flex div{
    width:56%;
}
#effect .flex figure{
    width:40%;
}
#effect-slider {
  position: relative;
  cursor: pointer;
}
#effect-slider .slick-list{
	padding-top:20px;
}
#effect-slider .pointer{
	z-index: 2;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 1080px){
    #effect{
        background-size:100% 60vw;
    }
}
@media screen and (max-width: 768px){
    #effect{
        background-size:100% 50vw;
    }
    #effect .inner{
    padding:calc(var(--spacer)*1);
    }
    #effect-slider .pointer{
    bottom: -50px;
    }
}
.chosen-bg{
    background:url("../images/chosen-bg.webp") no-repeat;
    background-position: top center;
    background-size:cover;
    padding: calc(var(--spacer)*7) 0 calc(var(--spacer)*5) 0;
}
.chosen-bg h1{
    margin-bottom:0;
}
#chosen .flex div{
    width:56%;
    margin-bottom:20px;
}
#chosen .flex figure{
    width:40%;
}

.headspa-bg{
    background:url("../images/headspa-bg.webp") no-repeat;
    background-position: top center;
    background-size:100% auto;
}

#headspa h1{
    color:var(--white);
    padding-top:calc(var(--spacer)*7) ;
}
#howto.flex>*{
    width:50%;
    text-align: center;
}
#howto h3{
    margin-top:30px;
}
#selfmassage.parallax{
    background:url("../images/selfmassage-bg.webp");
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
#selfmassage div{
    background:rgba(255,255,255,.6);
    padding:20px;
}


@media screen and (max-width: 1080px){
    .headspa-bg{
    background-size:100% 40vw;
    }
    #headspa h1{
    padding-top:calc(var(--spacer)*5) ;
    }
}
@media screen and (max-width: 768px){
  .headspa-bg{
    background-size:100% 70vw;
    }
    #headspa p{
        text-align: left;
    }
    #selfmassage h4{
        text-align: left;
    }
    #selfmassage h4 br{
        display: none;
    }
}


.item{
    background:url("../images/item-bg.webp") no-repeat;
    background-position: bottom center;
    background-size:cover;
}
.item section{
   padding-bottom:0;
}

.item .flex{
    max-width:850px;
    margin:50px auto 0;
    align-items: center;
}
.item .flex>div{
    width:60%;
}
.item .flex>figure{
    width:40%;
}
.item .btn a{
    margin-top:20px;
    width:100%;
    padding: 25px 0;
    font-size: calc(var(--font-size-base)*2);
    text-shadow: 0 4px 0 rgba(0,0,0,0.3);
    border-bottom:3px solid #ff771c;
}

.item2{
    max-width:900px;
    margin:0 auto;
    text-align: center;
    background:rgba(255,255,255,.6);
    border:1px solid var(--body);
    padding:20px;
}
@media screen and (max-width: 768px){
    .item .btn a{
    width:90%;
    }
    .item h1 {
    margin-bottom: calc(var(--spacer)*2);
    }
    .item section{
    padding-bottom:calc(var(--spacer)*4);
    }
    .item .btn a{
    padding: 15px 0;
    font-size: calc(var(--font-size-base)*1.5);
}
        
}
#voice article{
    background:#fff;
    position:relative;
    padding:30px;
    margin-bottom:50px;
}

#voice article:after{
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent #ffffff transparent transparent;
    left:calc(50% - 30px);
    bottom:-30px;
}
#voice .cap{
    font-size:calc(var(--font-size-base)*.875);
    text-align: right;
}
#pro{
    background:url("../images/pro-bg.webp") ,#f9fbff;
    background-repeat: no-repeat;
    background-position: top center;
    background-size:100% auto;
}
#pro .flex,
#concept .flex{
    margin-top:calc(var(--spacer)*5);
}
#pro .flex > div,
#concept .flex > div{
    width:50%;
}
#pro .flex>figure,
#concept .flex > figure{
    margin-bottom:20px;
    width:45%;
}
#pro .flex h6,#pro .flex h2,
#concept .flex h6,#concept .flex h2{
    text-align: left!important;
}
#pro .flex p,#concept .flex p{
    margin-top:20px;

}
#topic .flex>*{
    width:48%;
}
#topic h2{
    padding-top:10px;
    padding-bottom:20px;
}

@media screen and (max-width: 768px){
	#topic .flex div:first-child{
    margin-bottom:40px;
}
}
@media screen and (max-width: 390px){

}
#ending{
    background:url("../images/ending-bg.webp"),#e5e8ef;
    background-repeat: none;
    background-position: top center;
}