@charset "UTF-8";
@import url(cmn.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+Antique&display=swap');
/*----------------------------link etc--------------------------------*/

a,
input,
button{
	outline: 0;
}
input::-moz-focus-inner,
button::-moz-focus-inner{
	border: 0;
}

a:link, a:visited{
	text-decoration: none;
	color: #666;
}

a:hover{
	color: #999;
}

/*----------------------------load-----------------------------------*/

#load{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
}
#load div:nth-of-type(1){
	height: 100%;
	width: 100%;
	background: #f1ece7;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.8s ease-in-out;
}
#load .loader {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px solid #282828;
	border-radius: 50%;
	animation: spin 0.75s infinite linear;
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	display: block;
	box-sizing: content-box;
}
#load .loader::before,
#load .loader::after {
	left: -2px;
	top: -2px;
	display: none;
	position: absolute;
	content: '';
	width: inherit;
	height: inherit;
	border: inherit;
	border-radius: inherit;
}
#load .loader,
#load .loader::before {
	display: inline-block;
	border-color: transparent;
	border-top-color: #282828;
}
#load .loader::before {
	animation: spin 1.5s infinite ease;
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/*----------------------------fadeInUp-----------------------------------*/
.fadeinup,
.fadeinup-Parent> *{
    visibility:hidden;
}

.ani-fadeInUp {
    -webkit-animation: ani-fadeInUp 1.5s ease 0s both 1 normal;
    animation: ani-fadeInUp 1.5s ease 0s both 1 normal;
    visibility: visible !important;
}
@-webkit-keyframes ani-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes ani-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } 
}
/*----------------------------delay-----------------------------------*/

.delay{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px);
	transition: 0.8s ease-in-out;
}
.delayActive{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	transition: 0.8s ease-in-out;
}

/*----------------------------layout-----------------------------------*/
body{
    background:#f1ece7;
}

img{
    image-rendering: -webkit-optimize-contrast;
}
img[height]{
	height: auto;
}

header,main,aside,footer{
    max-width:830px;
    margin:auto;
    width:100%;
}

body p{
    font-size:2.0rem;
}

.wrapper{
    max-width:790px;
    width:100%;
    margin:0 auto;
    padding-right:20px;
    padding-left:20px;
}
.inner{
    max-width:670px;
    margin:0 auto;
    padding-right:20px;
    padding-left:20px;
}
.al,
.al *{
	text-align: left;
}
.ac,
.ac *{
	text-align: center;
}
.ar,
.ar *{
	text-align: right;
}
.pb50{
    padding-bottom:50px;
}
.pb100{
     padding-bottom:100px;
}
.btn{
	text-align: center;
}
.btn a,
.wpcf7-form-control.wpcf7-submit/*contactform7*/{
	display: inline-block;
	text-align: center;
	font-weight: 600;
	color: #fff !important;
	background: #000;
	border-radius: 3px;
	padding: 5px 20px;
	min-width: 180px;
	letter-spacing: 0.1rem;
	transition: 0.2s;
	margin: 2px 5px;
	font-size: 1.55rem;
}
.wpcf7-form-control.wpcf7-submit/*contactform7*/{
	display: block;
	width: 180px;
	margin: 0 auto;
	border: none;
	cursor: pointer;
	transition: 0.2s;
}
.btn a:hover,
.wpcf7-form-control.wpcf7-submit:hover/*contactform7*/{
	background: #ed1c23;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

hr{
	border: none;
	border-bottom: 1px dashed #c4b6a1;
	margin: 0;
	display: block;
}
@media screen and (max-width: 830px){
    body p{
    font-size:4vw;
    }
    .pb50{
    padding-bottom:6vw;
    }
    .pb100{
     padding-bottom:8.3vw;
    }
    }
@media screen and (max-width: 400px){
}
/*----------------------------header--------------------------------*/
#mv{
    background:url("../images/mv-bg.png") ,#d3d4d6;
    background-repeat: no-repeat;
    text-align: center;
    background-size:100% auto;
    background-position: center bottom;
    position: relative;
    width: 100%;
}

#mv:before {
  content: "";
  display: block;
  padding-top: 146%;
}

.mv-inner{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#mv h1{
    margin:40px auto 85px;
}
@media screen and (max-width: 830px){
    #mv h1{
    margin:20px auto 40px;
    }
}
@media screen and (max-width: 410px){
    #mv h1{
    margin:20px auto 0px;
    }
}

/*----------------------------lineup--------------------------------*/
.lineup .wrapper{
       position: relative; 
}
.lineup .inner{
    background:#fff;
    margin:50px auto;
}
.lineup .wrapper:before{
    content:"";
    background:#f1ece7;
    height:20px;
    width:100%;
    top:0;
    left:0;
    display: block;
    position:absolute;
}
.lineup h2{
    position: relative;
}
.lineup h3{
    padding:40px 0;
}
.lineup .btn{
    text-align: center;
    padding-bottom:50px;
}
.btn a{
	display: inline-block;
	text-align: center;
	font-weight: 700;
	color: #fff !important;
	background: #974333;
	border-radius: 12px;
	padding: 25px;
    max-width:580px;
    width:90%;
	letter-spacing: 0.1rem;
	transition: 0.2s;
	margin: 2px 5px;
	font-size: 4.2rem;
    border-bottom:8px solid #7e3123;
    text-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.btn a:hover{
	background: #7e3123;
}
.btn.mint a{
    background:#80b7b5;
    border-bottom:8px solid #69a19e;
}
.btn.mint a:hover{
	background: #69a19e;
}
@media screen and (max-width: 830px){
    .lineup .wrapper{
    padding:0;
    }
    .lineup .inner{
    background:#fff;
    margin:25px auto;
    padding:0;
    }
    .lineup h3{
    padding:20px 0;
    }
    .lineup .btn{
    padding-bottom:25px;
    }
    .btn a{
    font-size: 4vw;
    padding: 25px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.2);
    }
}
@media screen and (max-width: 410px){
   .btn a{
    border-radius: 6px;
    font-size: 6vw;
    padding: 15px;
    border-bottom:3px solid #7e3123;
    }
    .btn.mint a{
    border-bottom:3px solid #69a19e;
    }
}

/*----------------------------trouble01--------------------------------*/
#trouble01{
    background:url("../images/trouble01-bg.png") ;
    background-repeat: no-repeat;
    background-size:100% auto;
    background-position: center bottom;
    text-align: center;
    height:650px;
    margin-bottom:50px;
}
#trouble01 h2{
    padding-top:20px;
}
@media screen and (max-width: 830px){
    #trouble01{
        height:80vw;
        margin-bottom:6vw;
    }
}
/*----------------------------trouble01--------------------------------*/
#trouble02{
    background:#fff;
}
#trouble02 h2{
    padding:50px 0;
}
#trouble02 h3{
    text-align: center;
    margin-bottom:20px;
    margin-top:50px;
}

#trouble02 ul li{
    padding-top:150px;
    margin-bottom:50px;
}
#trouble02 ul li:nth-of-type(1){
    background:url("../images/trouble02-img02.png");  
    background-repeat: no-repeat;
    background-position: center top;
        background-size:100% auto;
}
#trouble02 ul li:nth-of-type(2){
    background:url("../images/trouble02-img03.png");  
    background-repeat: no-repeat;
    background-position: center top;
        background-size:100% auto;
}
#trouble02 ul li:nth-of-type(3){
    background:url("../images/trouble02-img04.png");  
    background-repeat: no-repeat;
    background-position: center top;
        background-size:100% auto;
}
@media screen and (max-width: 830px){
    #trouble02 h2{
    poadding:25px 0;
}
    #trouble02 ul li{
    padding-top:18vw;
    margin-bottom:6vw;
}
}
/*----------------------------trouble03--------------------------------*/
#trouble03{
    background:url("../images/trouble03-bg.png") ,#fff;
    background-repeat: no-repeat;
    background-size:100% auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height:714px;
    background-position: bottom;
}
@media screen and (max-width: 830px){
    #trouble03{
        height:86.02vw;
    }
}
/*----------------------------headspa01--------------------------------*/
#headspa01{
    background:url("../images/headspa01-bg.png") ,#d5e1e9;
    background-repeat: no-repeat;
    background-size:100% auto;
    text-align: center;
    height:819px;
    background-position: bottom;
}
@media screen and (max-width: 830px){
    #headspa01{
        height:98vw;
    }
}
/*----------------------------headspa01--------------------------------*/
#headspa02{
    background:url("../images/headspa02-bg.png") no-repeat;
    background-size:100% auto;
    text-align: center;
    height:694px;
    position:relative;
}
#headspa02 h2{
    position:absolute;
    top:-20%;
    max-width: 670px;
    padding-right: 20px;
    padding-left: 20px;
    margin:0 auto;
}
@media screen and (max-width: 830px){
    #headspa02{
        height:83vw;
    }
}
/*----------------------------headspa02-2--------------------------------*/
#headspa02-2{
    position:relative;
    height:189px;
    text-align: center;
}
#headspa02-2 h2{
    position:absolute;
    top:-125px;
    max-width: 670px;
    padding-right: 20px;
    padding-left: 20px;
    margin:0 auto;
}
@media screen and (max-width: 830px){
    #headspa02-2{
    height:26vw;
    }
    #headspa02-2 h2{
    top:-14vw;
    }
}
/*----------------------------headspa03--------------------------------*/
#headspa03{
    text-align: center;
    padding:70px 0;
}
#headspa03 p{
    text-align: left;
    padding:20px 0;
}
@media screen and (max-width: 830px){
    #headspa03{
    padding:8vw 0;
    }
    #headspa02-2 h2{
    }
}
/*----------------------------reason01--------------------------------*/
#reason01{
    background:url("../images/reason-bg.png") ,#fff;
    background-repeat: no-repeat;
    background-size:100% auto;
    padding-top:75px;
}
h2.reason{
    padding-bottom:45px;
}


@media screen and (max-width: 830px){
    #reason01{
    padding-top:9vw;   
    }
    h2.reason{
    padding-bottom:4vw;
    }
}

#reason02{
    background:url("../images/reason02-bg.png") ,#f1f1f4;
    background-repeat: no-repeat;
    background-size:100% auto;
    padding-top:55px;
    background-position: top center;
}
@media screen and (max-width: 830px){
    #reason02{
    padding-top:6vw;   
    }

}
#reason03{
    background:#fff;
    background-repeat: no-repeat;
    background-size:100% auto;
    background-position: top center;
}

#reason04{
    background:url("../images/reason04-bg.png") no-repeat;
    background-repeat: no-repeat;
    background-size:100% auto;
    height:814px;
    background-position: top center;
    padding-top:170px;
}
#reason05{
    padding:50px 0;
}

#reason06{
    background:url("../images/reason05-bg.png") ,#fff;
    background-repeat: no-repeat;
    background-size:100% auto;
    background-position: bottom center;
    padding:40px 0 130px;
}
@media screen and (max-width: 830px){
    #reason04{
    height:98vw;
    padding-top:20vw;
    }
    #reason05{
    padding:4vw 0 8vw 0;
    }
    #reason06{
    padding:8vw 0 15vw 0;
    }
}

/*----------------------------houto--------------------------------*/

#houto h3{
    text-align: center;
    font-size:3rem;
    padding:30px 0;
 }
@media screen and (max-width: 830px){
    #houto h3{
    font-size: 4.2vw;
     padding:15px 0;
     }
}
/*----------------------------selfmassage--------------------------------*/
#selfmassage{
    background:url("../images/selfmassage-bg.png") ,#fff;
    background-repeat: no-repeat;
    background-size:100% auto;
    background-position: top center;
}

#selfmassage ul{
    background:#f7f7f7;
}
#selfmassage ul li{
    padding:0 20px;
}
#selfmassage ul li p{
    padding:20px 0;
}
#selfmassage ul li:first-child P{
    border-bottom:1px dotted #CCC;
}
/*----------------------------pro--------------------------------*/
#pro{
    background:url("../images/pro-bg.png") ,#fff;
    background-repeat: no-repeat;
    background-size:100% auto;
    padding:80px 0;
    background-position: top center;
}
#pro h3{
    margin:70px auto;
}
#pro p{
    border-bottom:1px solid #ccc;
}
#pro p:last-child{
    border-bottom:none;
}
@media screen and (max-width: 830px){
    #pro{
    padding:9vw 0;
    }
    #pro h3{
    margin:8vw auto;
    }    
}
/*----------------------------voice--------------------------------*/
#voice{
    padding:100px 0;
}

#voice h2{
    margin-bottom:30px;
}
#voice article{
    max-width:780px;
    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:10%;
    bottom:-30px;
}

#voice article:nth-child(odd){
  margin-left:auto;
}

#voice article:nth-child(odd):after{
    transform: scale(-1, 1);
    right:10%;
    left:auto;
}
#voice article p.cap{
     margin-top:20px;
}
@media screen and (max-width: 830px){
    #voice{
    padding:12vw 0;
}
    #voice article{
        padding:20px;
    }
    #voice h2{
    margin-bottom:3vw
}
}
@media screen and (max-width: 600px){
        #voice article{
        padding:20px;
    }
}
/*----------------------------magazine--------------------------------*/
#magazine{
    background:url("../images/magazine-bg.png") no-repeat;
     background-size:cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height:1018px;
}
@media screen and (max-width: 830px){
    #magazine{
        height:122vw;
    }
}
/*----------------------------kuchikomi--------------------------------*/
#kuchikomi{
    background:url("../images/kuchikomi-bg.png") no-repeat;
     background-size:cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height:720px;
}
@media screen and (max-width: 830px){
    #kuchikomi{
        height:86vw;
    }
}

/*----------------------------concept--------------------------------*/
#concept{
    background:#fff;

}
#concept01{
    background:url("../images/concept-bg.png") ;
    background-repeat: no-repeat;
    background-size:100% auto;
    text-align: center;
    height:1032px;
    background-position: top;
}
@media screen and (max-width: 830px){
    #concept01{
    height:124vw;
    }
}
/*----------------------------faq--------------------------------*/
#faq{
    padding:30px 0;
}

#faq h2{
    text-align: center;
    font-size:38px;
    font-weight: 400;
}

#faq h3{
    background:#282828;
    padding:10px 20px;
    color:#fff;
    font-size:28px;
    font-weight: 400;
    margin: 20px auto;
}
.faq dl{
    margin-bottom:10px;
   
}
.faq dt{
    display:block;
    cursor:pointer;
    background:#fff;
    padding:20px 40px;
    position:relative;
    border-radius: 10px;
}

.faq dt::before,
.faq dt::after {
  content: '';
  display: block;
  width: 20px;
  height:1px;
  background: #333;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
  
.faq dt:after {
  background: #333;
  transform: translateY(-50%) rotate(90deg);
  transition: 0.8s;
}

.faq dt.active::after {
  transform: rotate(0);
  transition: 0.8s;
}

.faq dt p{
    position:relative;
    padding-left:50px;
    padding-right:20px;
}

.faq dt p:before{
    content:"Q";
    position:absolute;
    font-size:3.0rem;
    left:0;
    top:0;
    line-height: 1;
    font-weight: 400;
    font-family: 'Zen Kaku Gothic Antique';
    color:#80b7b5;
}
.faq dd{
    padding:10px 40px 20px 40px;
    position:relative;
    display:none;
}
.faq dd p{
    position:relative;
    padding-left:50px;
    padding-top:20px;
}
.faq dd p:before{
    content:"A";
    position:absolute;
    font-size:3.0rem;
    left:0;
    top:20px;
    line-height: 1;
    font-weight: 400;
    color:#80b7b5;
}
@media screen and (max-width: 830px){
    #faq h2{
        font-size:5vw;
    }
    #faq h3{
        font-size:4.2vw;
    }
    .faq dt{
        padding:10px 20px;
        position:relative;
    }
    .faq dd{
    padding:5px 20px 10px 20px;
    }
    .faq dt p,
    .faq dd p{
    padding-left:30px;
    }
    .faq dt p:before,
    .faq dd p:before{
    font-size:2.4rem;
}

}
/*----------------------------faq--------------------------------*/
#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;

}
/*----------------------------delivery--------------------------------*/
#delivery{
    background:#fff;
}

/*----------------------------edeing--------------------------------*/
#ending{
    background:#e3e4e6;
}

/*----------------------------faq--------------------------------*/
footer{
    background:#fff;
    padding-top:30px;
}
footer nav ul{
    margin:20px auto;
}
footer nav li{
    border-bottom:1px solid #948f87;
    padding:10px 0;
}
footer nav li:first-child{
    border-top:1px solid #948f87;
}
footer nav li a{
    position: relative;
    padding-left:12px;
}

footer nav li a:before{
    position:absolute;
    content:"";
    left: 0px;
    top:calc(50% - 4px);
    width: 4px;
    height: 4px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
footer h1 img{
    display: block;
    margin: auto;
    max-width:25%;
}
footer p.cp{
    font-weight: 400;
    text-align: center;
    padding:20px 0;
    font-size:1.6rem;
}
@media screen and (max-width: 830px){
    footer h1 img{
        max-width:25%;
    }
    footer p.cp{
    padding:10px 0 20px;
    font-size:3vw;
    }
}

/*----------------------------Slider-----------------------------------*/
/*--slide設定--*/

p.slick-slide{
    text-align: center;
}
.slider{
	position: relative;
}
.slider .slick-list{
	position: relative;
	display: block;
	overflow: hidden;
}
.slider{
	cursor: pointer;
}
.slider .slick-track{
	position: relative;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider .slick-arrow{
	display: block;
	text-indent: -10000px;
	outline:none;
	line-height:1px;
	font-size:1px;
	height: 30px;
	width: 30px;
	cursor: pointer;
	position: absolute;
	top: calc(50% - 15px);
	left: 0;
	z-index: 1;
	border: none;
}
.slider .slick-arrow{
	left: auto;
	left: 0;
}
.slider .slick-next{
	left: auto;
	right: 0;
}
.slider .slick-arrow:before{
	content: "";
	display: block;
	width:15px;
	height: 15px;
	position: absolute;
	top: calc(50% - 15px);
	border-top: 3px solid #80b7b5;
	border-left: 3px solid #80b7b5;
	opacity: .8;
}
.slider .slick-prev:before{
	transform: rotate(-45deg);
	left: calc(50% - 0px);
}
.slider .slick-next:before{
	transform: rotate(135deg);
	left: calc(50% - 15px);
}


.slider .pointer{
	display: table;
	margin: 20px auto 0;
}
.slider .pointer li{
	display: table-cell;
	padding: 0 3px;
}
.slider .pointer li button{
	display: block;
	text-indent: -10000px;
	outline:none;
	line-height:1px;
	font-size:1px;
	background-color: #fff;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	border: none;
	cursor: pointer;
}
.slider .pointer .slick-active button{
	background-color: #80b7b5;
}