@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');

html{
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro', 'Noto Sans JP' ,sans-serif;
    color:#4b3d12;
    letter-spacing:0.06rem;
    padding:0;
    margin:0;
}
body{
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro', 'Noto Sans JP' ,sans-serif;
    color:#231815;
    letter-spacing:0.06rem;
    padding:0;
    margin:0;
    overflow-x: hidden;
}


a:link,
a:visited,
a:active{
    text-decoration:none;   
}
a:hover{
    text-decoration:none;   
}
p {
    font-size: 13px;
}
ul{
    list-style:none;
    margin:0;
    padding:0;   
}
li {
    font-size: 14px;
}

.start {
	background: #ffe400;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 45%;
	display: none;
	z-index: 9999;
	width: 260px;
	margin:0 0 0 -130px;
	text-align:center;
}
.start p img{
    width:100%;
    height:auto;   
}
header {
    background: #ffe400;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 4rem);
    margin: 0 auto;
    padding: 30px 2rem 50px;
}
h1.logo{
    width:160px;   
    margin:0;
}
h1.logo img{
    width:100%;
    height:auto;   
}
header ul{
    display:flex;   
}
header ul li a {
    display: block;
    background: #fff;
    border-radius: 20px;
    padding: 11px 24px 13px 53px;
    margin: 0 0 0 19px;
    color: #4b3d12;
    font-weight: bold;
    line-height: 1;
}
header ul li.login a {
    background: #fff url(../img/cart.png) 24px 11px no-repeat;
    background-size: 19px auto;
    padding: 13px 24px 13px 47px;
    margin: 0 19px 0 0px;
}
header ul li.contact a{
    background:#fff url(../img/contact.png) 22px 11px no-repeat;
    background-size:25px auto;   
}
header ul li.instagram a {
    display: block;
    border-radius: 0px;
    padding: 0;
    margin: 0 0 0 10px;
    border-radius: 50%;
    padding: 9px;
    width: 23px;
}
header ul li.instagram a img {
    width: 20px;
    height: auto;
    margin: 0 auto;
    display: block;
}
.lang {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.lang::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.lang select {
    appearance: none;
    min-width: 130px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #ffffff;
    border-radius: 25px;
    background-color: #fff;
    color: #333333;
    cursor: pointer;
    font-size: 14px;
font-weight: bold;
}
.container{
    width:100%;
    margin:0;
    padding:0px;   
}
.mainvisual {
    background: #ffe400 url(../img/bg.png) left bottom no-repeat;
    background-size: 100% auto;
    position: relative;
    min-height: 75vw;
}
.mainvisual img{
    width:100%;
    height:auto;   
}
.shine01 {
    width: 20vw;
    position: absolute;
    left: 14vw;
    top: 0;
}
.cheers {
    width: 20vw;
    position: absolute;
    left: 39vw;
    top: -3vw;
}
.shine02 {
    width: 20vw;
    position: absolute;
    left: 64vw;
    top: 1vw;
}
.lady01 {
    width: 20vw;
    position: absolute;
    left: 12vw;
    top: 27vw;
}
.lady01 .image,
.lady02 .image{
    position:absolute;
    top:0;
    left:0;	
}
.lady01 .image:nth-of-type(1){
opacity: 0;
	animation: change-img-anim 5s infinite;	
}
.lady01 .image:nth-of-type(2){
opacity: 0;
	animation: change-img-anim2 5s infinite;	
}
.lady02 .image:nth-of-type(1) {
opacity: 0;
	animation: change-img-anim 5s infinite;	
}
.lady02 .image:nth-of-type(2) {
opacity: 0;
	animation: change-img-anim2 5s infinite;	
}

.image:nth-of-type(1) {
	animation-delay: 0s;
}
.image:nth-of-type(2) {
	animation-delay: 0s;
}
@keyframes change-img-anim {
	0%{ opacity: 1;}
	10%{ opacity: 1;}
	11%{ opacity: 0}
	39%{ opacity: 0}
	40%{ opacity: 1}
	100%{ opacity: 1;}
}
@keyframes change-img-anim2 {
	0%{ opacity: 0;}
	10%{ opacity: 0;}
	11%{ opacity: 1;}
	39%{ opacity: 1;}
	40%{ opacity: 0}
	100%{ opacity: 0;}
}
.lady02 {
    width: 20vw;
    position: absolute;
    left: 67vw;
    top: 28.8vw;
}
.baloon01 {
    width: 17vw;
    position: absolute;
    left: 14vw;
    top: 16vw;
}
.baloon02 {
    width: 17vw;
    position: absolute;
    left: 68vw;
    top: 16vw;
}
.copy {
    width: 30vw;
    position: absolute;
    left: 34.5vw;
    top: 20vw;
}
.momo {
    width: 30vw;
    position: absolute;
    left: 36vw;
    top: 39vw;
}
.shine01,.cheers,.shine02,.baloon01,.baloon02,
.copy,.lady01,.lady02,.momo{opacity:0;transition:1s ease-out;
    transform: translateY(20px);}
.shine01.ready, .cheers.ready, .shine02.ready, .baloon01.ready, .baloon02.ready, .copy.ready, .lady01.ready, .lady02.ready, .momo.ready {
    opacity: 1;
    transform: translateY(0px);
}
.recommend {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 3rem;
}
.recommend h2 {
    width: 560px;
    margin: 30px auto 50px;
}
.recommend img {
    width: 100%;
    height: auto;
}
.recommend ul {
    display:flex;
}
.recommend ul li:first-child{
  margin-top:60px;
    margin-right:6%;
    width:29%;   
}
.recommend ul li:first-child img {
    animation-name:updown1;
    animation-delay:0s; 
    animation-duration: 3s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
}
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
.recommend ul li:nth-child(2){
    width:32%;   
}
.recommend ul li:nth-child(2) img {
    animation-name:updown2;
    animation-delay:0s; 
    animation-duration: 3s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
}
@keyframes updown2 {
  0% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-5px);
  }
}
.recommend ul li:last-child{
    margin-top:60px;
    margin-left:4%;
    width:29%;   
}
.recommend ul li:last-child img {
    animation-name:updown3;
    animation-delay:0s; 
    animation-duration: 3s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
}
@keyframes updown3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.baloon01 {
    animation-name:baloon1; 
    animation-delay:0s; 
    animation-duration: 3s;  
    animation-timing-function: ease-in-out;     animation-iteration-count: infinite; 
}
 
@keyframes baloon1 {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
.baloon02 {
    animation-name:baloon2; 
    animation-delay:0s; 
    animation-duration: 3s;  
    animation-timing-function: ease-in-out;     animation-iteration-count: infinite; 
}
 
@keyframes baloon2 {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
.warp__placeholder{
	position: absolute;
	color: transparent;
	font-size: .1px;
}
            
.warp {
	display: block;
	position: relative;
	width: 322px;
	height: 148px;
	font: normal 41px/1 notosans;
	margin:0 auto
}          
.warp_zh {
	display: block;
	position: relative;
	width: 232px;
	height: 148px;
	font: normal 41px/1 notosans;
	margin:0 auto
}
[class*='warp__'] {
	display: block;
	position: absolute;
}
.warp__0 {
	transform-origin: 50% 34px;
	transform: translate(13.837299999999999px,68.8372px) rotate(-0.485136rad);
}
.warp__1 {
	transform-origin: 50% 34px;
	transform: translate(48.5878px,56.1405px) rotate(-0.268805rad);
}
.warp__2 {
	transform-origin: 50% 34px;
	transform: translate(79.5137px,50.9486px) rotate(-0.038237rad);
}
.warp__2_zh {
	transform-origin: 50% 34px;
	transform: translate(85.5137px,50.9486px) rotate(-0.038237rad);
}
            
.warp__3 {
	transform-origin: 50% 34px;
	transform: translate(116.8749px,52.9422px) rotate(0.141387rad);
}
.warp__4 {
	transform-origin: 50% 34px;
	transform: translate(147.4289px,60.240700000000004px) rotate(0.242424rad);
}
.warp__5 {
	transform-origin: 50% 34px;
	transform: translate(188.357px,70.972px) rotate(0.253766rad);
}
.warp__6 {
	transform-origin: 50% 34px;
	transform: translate(229.7485px,80.306px) rotate(0.177158rad);
}
.warp__7 {
	transform-origin: 50% 34px;
	transform: translate(271.6396px,85.0198px) rotate(0.039123rad);
}
.about .cnt {
    text-align: center;
    padding: 0 3rem;
    font-size: 17px;
    margin: 11px 0 30px;
    font-weight: 500;
}
.about .partition {
    width: 100%;
    margin: 60px 0 0px;
}
.about .txt {
    width: calc(100% - 8rem);
    margin: 45px auto 10px;
    border-radius: 11px;
    padding: 0px 4rem;
    line-height: 2.8;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 6px;
    text-decoration-color: #f2b2ae;
}
.about{
    background:#f2b2ae url(../img/bg3.png) bottom left no-repeat;
    background-size:100% auto;
    padding:60px 3rem 30px;
    margin:60px 0 0;   
}
.about .block {
    border-radius: 17px;
    max-width: 600px;
    margin: 0 auto 40px;
    padding: 10px 0 60px;
    background: #fff;
}
.about .txt span {
    font-size: 20px;
    font-weight: bold;
    margin: 0 2px;
    word-wrap: break-word;
    word-break: break-all;
    letter-spacing: 0;
    color: #e85e17;
}
.aboutphoto ul.better {
    max-width: 1100px;
    padding: 0 3rem;
    display: flex;
    margin: 0 auto;
}
.aboutphoto .better li:first-child {
    width: 31%;
    margin-right:2%
}
.aboutphoto .better li:nth-child(2) {
    width: 31%;
}
.aboutphoto .better li:last-child {
    width: 31%;
    margin-left:2%;
}
.aboutphoto ul li img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}
.better li {
    background: #fff;
    border-radius: 10px;
    position:relative;
}
.better li h4 {
    position: absolute;
    top: -49px;
    left: 23%;
    background: url(../img/baloon04.png) 0 0 no-repeat;
    background-size: 164px auto;
    width: 164px;
    height: 75px;
    text-align: center;
    padding: 12px 0 0 0;
}
.aboutphoto {
    background: #73d5cd;
    padding: 100px 0 70px;
    margin: 0;
}
.better li p {
    padding: 22px 20px 23px;
    margin: 0;
    line-height: 1.7;
}
.product {
    position: relative;
}
.product svg {
    width: 100vw;
    position: absolute;
    left: 0;
    z-index: -2;
    height: 150px;
    bottom: 0;
}
.product .horizon {
    display: flex;
    max-width: 710px;
    margin: 0px auto;
    padding: 100px 0 30px;
}
.product .horizon img{
 width:335px;
 height:auto; 
 margin:0 50px 0 0; 
    border: 6px solid #15c9ee;
    align-self: center;
    border-radius: 15px;
}
.product {
    color: #4b3d12;
    padding: 0 3rem;
    overflow-x:hidden;
}
.product .info {
    width: 100%;
}
.product h2 {
    font-size: 27px;
    padding: 0 0 0 2px;
    margin-top: 50px;
}
.product h2 span {
    font-size: 14px;
    display: block;
    font-weight: normal;
    margin: 0 0 0 -8px;
}
.product ul {
    display: flex;
    margin: 18px 0 40px;
}
.product ul li {
    margin-right: 12px;
    background: #15c9ee;
    color: #fff;
    text-align: center;
    padding: 10px 13px;
    line-height: 1;
}
.product .price {
    font-size: 30px;
    font-family: "Nunito";
    margin: 28px 0 0 0;
}
.product .price span {
    font-size: 14px;
    /* font-weight: normal; */
    font-family: '小塚ゴシック Pro','Kozuka Gothic Pro', 'Noto Sans JP' ,sans-serif;
    margin-left: 3px;
    color: #555;
}
.product p {
    font-size: 12px;
    margin: 2px 0 15px;
    color: #555;
}
.product a.btn {
    background: #952b8c;
    color: #fff;
    border-radius: 21px;
    padding: 10px 30px;
    display: block;
    text-align: center;
    margin: 55px 0 0 0;
    font-weight: bold;
    font-size: 14px;
}
.product h3 {
    font-size: 16px;
    line-height: 1.7;
}
.img {
    background: #ffd4dc;
    padding-top: 80px;
    margin: -1px 0 0 0;
}
.img img{
    width:100%;
    height:auto;   
}
.warp9 span {
    color: #fff;
}
.warp9 span#warp-label {
    color: transparent;
}
.voice {
    background: #ffd4dc;
    padding: 0 3rem 10px;
}
.voice ul {
    max-width: 1100px;
    margin: -1px auto;
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
}
.voice ul li {
    border-radius: 50% 61% 66% 69%;
    background: #fff;
    padding: 0;
    width: calc(92% / 4);
    margin-right: 2%;
    margin-bottom: 2%;
}
.voice ul li p {
    padding: 40px 55px;
    line-height: 1.8;
}
.voice ul li.voice01 {
  background: #fff url(../img/voice01.jpg) center center no-repeat;
  background-size:cover;
}
.voice ul li.voice02 {
  background: #fff url(../img/voice02.jpg) center center no-repeat;
  background-size:cover;
}
.voice ul li.illustvoice01 {
  background: #fff url(../img/voice01.png) center center no-repeat;
  background-size:100%;
}
.voice ul li.illustvoice02 {
  background: #fff url(../img/voice02.png) center center no-repeat;
  background-size:100%;
}
.carousel-wrapper {
  position: relative;
}
.carousel {
  margin-bottom: 3em;
}
.item {
    padding: 0;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.8;
    display: flex;
    align-items: flex-start;
    justify-content: left;
}
.item .name {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: 60px;
}

.item__white {
    background: #fff;
    color: #585858;
    border-radius: 10px;
}
.swiper-slide {
    margin-bottom: 40px;
    margin: 0 60px 40px 60px;
}
.swiper-slide .voiceThumb {
    width: 40%;
    height: 40vw;
    margin: 0 50px 0 0;
    position: relative;
}
.voiceText {
    width: calc(60% - 80px);
    padding: 0 60px 0 20px;
}
.voiceText em {
    font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui Symbol;
    font-style: normal;
}
.swiper-slide .voiceThumb span {
    position: absolute;
    color: #fff;
    left: 15px;
    top: 35px;
    font-size: 25px;
    line-height: 20px;
    align-items: baseline;
}
.swiper-slide .voiceThumb em {
    position: absolute;
    font-size: 50px;
    vertical-align: bottom;
    line-height: 0px;
    -webkit-text-stroke: 1px #fff;
    color: transparent;
}
.voiceThumb .copyP {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: flex-start;
}
.voiceThumb .copyP p {
    writing-mode: vertical-rl;
    padding: 10px 5px;
    background: #ffd4dcff;
    display: inline;
    line-height: 1.5;
    font-size: 18px;
    margin: 0 6px;
    height: auto;
    width: auto;
    color: #fff;
    border: 1px solid #ffe9ef;
    letter-spacing: 0.1rem;
}

.voiceThumb .copyP p:nth-child(1) {
    margin-top: 40px;
}
.swiper-wrapper .swiper-slide:nth-child(2) .voiceThumb .copyP {
    right: auto;
    left: 21px;
    top: 50px;
}
.swiper-wrapper .swiper-slide:nth-child(2) .voiceThumb .copyP.copyP_zh {
    right: auto;
    left: 21px;
    top: 90px;
}
.swiper-wrapper .swiper-slide:nth-child(3) .voiceThumb .copyP {
    right: 20px;
}
.swiper-wrapper .swiper-slide:nth-child(4) .voiceThumb .copyP {
    right: auto;
    left: 21px;
    top: 80px;
}
.swiper-wrapper .swiper-slide:nth-child(5) .voiceThumb .copyP {
    right: 20px;
}
.swiper-wrapper .swiper-slide:nth-child(6) .voiceThumb .copyP {
    right: auto;
    left: 21px;
    top: 40px;
}
.swiper-slide .voiceThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px 0 0 10px;
}
.item img div:nth-child(2) {
    padding: 50px 50px 30px 30px;
}
.warp9 {
    display: block;
    position: relative;
    width: 220px;
    height: 62px;
    font: normal 41px/1 notosans;
    margin: -1px auto 30px;
    padding: 80px 0 0;
}
[class*='warp9__'] {
    display: block;
    position: absolute;
}
.warp9__0 {
    transform-origin: 50% 34px;
    transform: translate(-0.6359999999999992px,7.863999999999997px) rotate(-0.220719rad);
}
.warp9__1 {
    transform-origin: 50% 34px;
    transform: translate(40.0981px,1.4129999999999967px) rotate(-0.102721rad);
}
.warp9__2 {
    transform-origin: 50% 34px;
    transform: translate(81.484px,-1.0581999999999994px) rotate(-0.019829rad);
}
.warp9__3 {
    transform-origin: 50% 34px;
    transform: translate(122.542px,-0.37129999999999797px) rotate(0.053619rad);
}
.warp9__4 {
    transform-origin: 50% 34px;
    transform: translate(163.6891px,3.628px) rotate(0.19rad);
}
.moringa{
    max-width:1100px;
    margin:70px auto 60px;
    padding: 0 3rem;   
}
.warp2 {
    display: block;
    position: relative;
    width: 374px;
    height: 148px;
    font: normal 41px/1 notosans;
    margin:0 auto;
}
.warp6,.warp7{
    display:none;
}         
[class*='warp2__'] {
    display: block;
    position: absolute;
}
            
.warp2__0 {
    transform-origin: 50% 34px;
    transform: translate(17.320500000000003px,79.1775px) rotate(0.010513rad);
}
            
.warp2__1 {
    transform-origin: 50% 34px;
    transform: translate(59.688100000000006px,77.2534px) rotate(-0.095001rad);
}
            
.warp2__2 {
    transform-origin: 50% 34px;
    transform: translate(101.9924px,71.5984px) rotate(-0.165064rad);
}
            
.warp2__3 {
    transform-origin: 50% 34px;
    transform: translate(143.7951px,63.721500000000006px) rotate(-0.202123rad);
}
            
.warp2__4 {
    transform-origin: 50% 34px;
    transform: translate(185.3765px,54.980900000000005px) rotate(-0.206574rad);
}
            
.warp2__5 {
    transform-origin: 50% 34px;
    transform: translate(226.8986px,46.851px) rotate(-0.172844rad);
}
            
.warp2__6 {
    transform-origin: 50% 34px;
    transform: translate(268.9586px,41.1704px) rotate(-0.084304rad);
}
            
.warp2__7 {
    transform-origin: 50% 34px;
    transform: translate(311.0132px,40.94px) rotate(0.092091rad);
}
.moringa h3 {
    margin: 50px 0 40px;
    font-size: 20px;
}
.moringa .horizon {
    display: flex;
    margin-bottom:60px;
}
.moringa .info {
    width: calc(100% - 530px);
}
.moringa .horizon:first-child .shape,
.moringa .horizon:nth-child(3) .shape,
.moringa .horizon:nth-child(5) .shape,
.moringa .horizon:nth-child(7) .shape{
    align-self:flex-start;
    width:500px;
    height:auto;
    margin-right:50px;
}
.moringa .horizon:nth-child(2) .shape,
.moringa .horizon:nth-child(4) .shape,
.moringa .horizon:nth-child(6) .shape,
.moringa .horizon:nth-child(8) .shape{
    align-self:flex-start;
    width:500px;
    height:auto;
    margin-left:50px;
}
.moringa .horizon:nth-child(2) .shape,
.moringa .horizon:nth-child(4) .shape,
.moringa .horizon:nth-child(6) .shape,
.moringa .horizon:nth-child(8) .shape{
    order:2;
}
.moringa ul {
    margin-top: 40px;
}
.moringa .info p {
    line-height: 2.5;
    letter-spacing: 0.1rem;
    font-size:14px;
}
.moringa p {
    line-height: 2.5;
    letter-spacing: 0.1rem;
    font-size:15px;
}
.moringa .cnt{
    text-align:center;   
}
.secret{
    max-width:1100px;
    margin:80px auto 40px;
    padding:0 3rem;   
}
.warp3 {
    display: block;
    position: relative;
    width: 502px;
    height: 72px;
    font: normal 41px/1 notosans;
    margin:0;
}
            
[class*='warp3__'] {
    display: block;
    position: absolute;
}
            
.warp3__0 {
    transform-origin: 50% 34px;
    transform: translate(10.5275px,22.6378px) rotate(-0.232584rad);
}
            
.warp3__1 {
    transform-origin: 50% 34px;
    transform: translate(47.2547px,16.363500000000002px) rotate(-0.149326rad);
}
            
.warp3__2 {
    transform-origin: 50% 34px;
    transform: translate(78.1261px,12.113999999999997px) rotate(-0.101953rad);
}
            
.warp3__3 {
    transform-origin: 50% 34px;
    transform: translate(115.1935px,9.377899999999997px) rotate(-0.05812rad);
}
            
.warp3__4 {
    transform-origin: 50% 34px;
    transform: translate(146.1795px,8.1772px) rotate(-0.006181rad);
}
.warp4 {
    display: block;
    position: relative;
    width: 502px;
    height: 72px;
    font: normal 41px/1 notosans;
    margin:-15px 0 40px 17px;
}
            
[class*='warp4__'] {
    display: block;
    position: absolute;
}
            
.warp4__0 {
    transform-origin: 50% 34px;
    transform: translate(3.4231000000000016px,24.5218px) rotate(-0.24039rad);
}
            
.warp4__1 {
    transform-origin: 50% 34px;
    transform: translate(44.219899999999996px,17.051499999999997px) rotate(-0.130407rad);
}
            
.warp4__2 {
    transform-origin: 50% 34px;
    transform: translate(85.5682px,13.210099999999997px) rotate(-0.05978rad);
}
            
.warp4__3 {
    transform-origin: 50% 34px;
    transform: translate(126.8794px,11.773699999999998px) rotate(-0.012772rad);
}
            
.warp4__4 {
    transform-origin: 50% 34px;
    transform: translate(168.1182px,11.945500000000003px) rotate(0.019029rad);
}
            
.warp4__5 {
    transform-origin: 50% 34px;
    transform: translate(209.602px,13.206499999999998px) rotate(0.040169rad);
}
            
.warp4__6 {
    transform-origin: 50% 34px;
    transform: translate(250.7887px,15.147199999999998px) rotate(0.052726rad);
}
            
.warp4__7 {
    transform-origin: 50% 34px;
    transform: translate(292.2695px,17.471600000000002px) rotate(0.058048rad);
}
            
.warp4__8 {
    transform-origin: 50% 34px;
    transform: translate(333.6115px,19.863500000000002px) rotate(0.056356rad);
}
            
.warp4__9 {
    transform-origin: 50% 34px;
    transform: translate(375.416px,22.0557px) rotate(0.047073rad);
}
            
.warp4__10 {
    transform-origin: 50% 34px;
    transform: translate(417.1532px,23.674599999999998px) rotate(0.028767rad);
}
            
.warp4__11 {
    transform-origin: 50% 34px;
    transform: translate(458.219px,24.292900000000003px) rotate(-0.000951rad);
}
.secret .horizon {
    display: flex;
    margin-bottom:60px;
}
.secret .info {
    width: calc(100% - 530px);
}
.secret .horizon:first-child .shape{
    align-self:flex-start;
    width:500px;
    height:auto;
    margin-right:50px;
}
.secret .horizon:last-child .shape{
    align-self:flex-start;
    width:500px;
    height:auto;
    margin-left:50px;
}
.secret .horizon:last-child .shape{
    order:2;
}
.secret ul {
    margin-top: 40px;
}
.secret .info p {
    line-height: 2.5;
    letter-spacing: 0.1rem;
    font-size: 14px;
    margin: 60px 30px 0;
}
.secret .info img{
    width:128px;
    height:auto;
    margin-left:auto;   
}
.secret .info img {
    width: 128px;
    height: auto;
    margin: 0 50px 0 auto;
    display: block;
    margin-left: auto;
}
.effect{
 max-width:810px;
 margin:80px auto 40px;
 padding:0 3rem;   
}
.effect ul {
    margin-top: 40px;
}
.effect .horizon {
    display: flex;
    margin-bottom:60px;
}
.effect .info {
    width: calc(100% - 320px);
}
.effect .horizon:first-child .shape{
    align-self:flex-start;
    width:320px;
    height:auto;
    margin-right:10px;
}
.effect .info p {
    line-height: 2.5;
    letter-spacing: 0.1rem;
    font-size: 14px;
    margin: 60px 0px 0 20px;
}

.warp5 {
    display: block;
    position: relative;
    width: 274px;
    height: 72px;
    font: normal 41px/1 notosans;
    margin:0 auto;
}
            
[class*='warp5__'] {
    display: block;
    position: absolute;
}
            
.warp5__0 {
    transform-origin: 50% 34px;
    transform: translate(3.630600000000001px,24.879600000000003px) rotate(-0.2682rad);
}
            
.warp5__1 {
    transform-origin: 50% 34px;
    transform: translate(39.2543px,17.471200000000003px) rotate(-0.179302rad);
}
            
.warp5__2 {
    transform-origin: 50% 34px;
    transform: translate(69.1995px,12.9103px) rotate(-0.096912rad);
}
            
.warp5__3 {
    transform-origin: 50% 34px;
    transform: translate(105.5041px,10.960999999999999px) rotate(-0.021244rad);
}
            
.warp5__4 {
    transform-origin: 50% 34px;
    transform: translate(135.6626px,11.519100000000002px) rotate(0.050932rad);
}
            
.warp5__5 {
    transform-origin: 50% 34px;
    transform: translate(176.8281px,15.113100000000003px) rotate(0.119988rad);
}
            
.warp5__6 {
    transform-origin: 50% 34px;
    transform: translate(217.5832px,20.894px) rotate(0.148172rad);
}


.contain{
 background:#;   
}
.warp8 {
    display: block;
    position: relative;
    width: 354px;
    height: 62px;
    font: normal 41px/1 notosans;
    margin: 75px auto 20px;
}
            
[class*='warp8__'] {
    display: block;
    position: absolute;
}
            
.warp8__0 {
    transform-origin: 50% 34px;
    transform: translate(3.5764999999999993px,13.305100000000003px) rotate(0.117528rad);
}
            
.warp8__1 {
    transform-origin: 50% 34px;
    transform: translate(44.77290000000001px,15.1207px) rotate(-0.003995rad);
}
            
.warp8__2 {
    transform-origin: 50% 34px;
    transform: translate(85.8548px,13.969900000000003px) rotate(-0.045943rad);
}
            
.warp8__3 {
    transform-origin: 50% 34px;
    transform: translate(126.9043px,11.673200000000001px) rotate(-0.063037rad);
}
            
.warp8__4 {
    transform-origin: 50% 34px;
    transform: translate(168.5445px,8.9373px) rotate(-0.066098rad);
}
            
.warp8__5 {
    transform-origin: 50% 34px;
    transform: translate(209.712px,6.3637000000000015px) rotate(-0.05649rad);
}
            
.warp8__6 {
    transform-origin: 50% 34px;
    transform: translate(250.75510000000003px,4.523299999999999px) rotate(-0.029216rad);
}
            
.warp8__7 {
    transform-origin: 50% 34px;
    transform: translate(291.8914px,4.492899999999999px) rotate(0.038981rad);
}
.contain ul {
    max-width: 910px;
    margin: 60px auto 20px;
    padding: 0 3rem;
    display: flex;
    flex-wrap: wrap;
}
.contain ul li {
    width: calc(97% / 4);
    margin-right: 1%;
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    margin-top:20px;
}
.contain ul li:nth-child(4),
.contain ul li:nth-child(8),
.contain ul li:nth-child(12){
    margin-right:0;   
}
.contain ul li img {
    width: 70%;
    height: auto;
    display: block;
    border-radius: 50%;
    margin: 0 auto 0px;
    border: 4px solid #f1eedf;
}
.contain ul li div {
    position: absolute;
    top: -15px;
    background: #f1eedf;
    padding: 6px 14px;
    border-radius: 17px;
    font-size: 13px;
    right: 0;
    color: #666;
}
.contain ul li div span{
 font-weight:bold;
 font-size:18px;   
}
.contain ul li p {
    margin: 5px 0 30px 0;
    font-size: 16px;
    font-weight: bold;
    color: #9c9884;
}
.company{
    background:#4ac0ea;   
    padding:40px 3rem;
}
.company ul {
    max-width: 762px;
    padding: 40px 3rem;
    margin: 40px auto 50px;
    background: #fff;
    border-radius: 17px;
    color: #13aadf;
}
.company ul li {
    margin-bottom: 20px;
    border-bottom: 1px dashed #4ac0ea;
    padding: 15px 10px 10px 10px;
    font-size: 16px;
    letter-spacing: 0.1rem;
}
.company ul li span {
    display: inline-block;
    margin-right: 20px;
    width: 120px;
}
.warp10 {
    display: block;
    position: relative;
    width: 175px;
    height: 62px;
    font: normal 41px/1 notosans;
    margin:20px auto;
    color:#fff;
}
[class*='warp10__'] {
    display: block;
    position: absolute;
}
            
.warp10__0 {
    transform-origin: 50% 34px;
    transform: translate(-0.5545000000000009px,7.918900000000001px) rotate(-0.211068rad);
}
            
.warp10__1 {
    transform-origin: 50% 34px;
    transform: translate(40.3497px,2.6311000000000035px) rotate(-0.053779rad);
}
            
.warp10__2 {
    transform-origin: 50% 34px;
    transform: translate(81.6176px,3.0259px) rotate(0.069128rad);
}
            
.warp10__3 {
    transform-origin: 50% 34px;
    transform: translate(122.4281px,8.185099999999998px) rotate(0.184782rad);
}
section.contact{
    padding:0 3rem;
    max-width:710px;
    margin:40px auto;
}
.warp11 {
    display: block;
    position: relative;
    width: 249px;
    height: 62px;
    font: normal 41px/1 notosans;
    margin: 70px auto 40px;
}
            
            [class*='warp11__'] {
                display: block;
                position: absolute;
            }
            
            .warp11__0 {
                transform-origin: 50% 34px;
                transform: translate(-0.5919999999999987px,8.2485px) rotate(-0.192288rad);
            }
            
            .warp11__1 {
                transform-origin: 50% 34px;
                transform: translate(40.3042px,2.886899999999997px) rotate(-0.08311rad);
            }
            
            .warp11__2 {
                transform-origin: 50% 34px;
                transform: translate(81.4296px,0.7719999999999985px) rotate(-0.023692rad);
            }
            
            .warp11__3 {
                transform-origin: 50% 34px;
                transform: translate(122.51830000000001px,0.7477000000000018px) rotate(0.021571rad);
            }
            
            .warp11__4 {
                transform-origin: 50% 34px;
                transform: translate(163.9139px,2.5955000000000013px) rotate(0.069711rad);
            }
            
            .warp11__5 {
                transform-origin: 50% 34px;
                transform: translate(204.9847px,7.082799999999999px) rotate(0.169755rad);
            }
.mailform {
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    background: #faf8f5;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 20px;
}
.mailform dt {
    width: 190px;
    padding: 15px 10px 10px 20px;
    line-height: 1.7;
    letter-spacing: 0.1rem;
    color: #7e7e7e;
}
.mailform dd{
    width:calc(100% - 280px);   
    padding:10px;
}
.mailform span.must {
    color: #d07258;
    font-size: 11px;
    display: inline-block;
    margin: 0 0 0 7px;
    border: 1px solid #e8b9ac;
    padding: 3px 4px;
    border-radius: 3px;
    line-height: 1;
    background: #fff;
}
.mailform input, .mailform textarea {
    padding: 6px 10px;
    font-size: 15px;
    width: calc(100% - 20px);
    border: 1px solid #f6f1e6;
    line-height: 1.6;
}
input:placeholder{
 color:#e8b9ac   
}
.btn-submit {
    background: #15c9ee;
    border: 0;
    padding: 10px 40px;
    text-align: center;
    color: #fff;
    font-size: 17px;
    letter-spacing: .2rem;
    border-radius: 22px;
    display: block;
    margin: 25px auto 60px;
}


svg.pink path#wave{fill:#ffd4dc;}
    .swiper-container {
    position: relative;
    overflow: hidden;
    padding-bottom: 2rem;
}
.swiper-container:focus,
 .swiper-cards:focus,
 .swiper-cards::selection,
 .swiper-container::selection {
background-color: transparent;
color: transparent;
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
    .swiper-container.visible {
      overflow: visible;
    }
    .swiper-cards {
      margin: 0 50px;
    }
footer{
    background:#ffe400;
    width:100%;   
}
footer div {
    max-width: 1300px;
    margin: 0px auto;
    display: flex;
    padding: 30px 3rem;
}
footer img {
    width: 130px;
    height: auto;
    margin: 0 30px 30px 0;
    align-self:flex-start;
}
footer ul {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
footer ul li a {
    display: block;
    background: #fff;
    border-radius: 20px;
    padding: 13px 24px 13px 53px;
    margin: 0 0 0 19px;
    color: #4b3d12;
    font-weight: bold;
    line-height: 1;
    font-size:12px;
}
footer ul li.login a {
    background: #fff url(../img/cart.png) 24px 11px no-repeat;
    background-size: 19px auto;
    padding: 13px 24px 13px 47px;
}
footer ul li.contact a{
    background:#fff url(../img/contact.png) 22px 11px no-repeat;
    background-size:25px auto;   
}
footer ul li.instagram a {
    display: block;
    border-radius: 0px;
    padding: 0;
    margin: 0 0 0 10px;
    border-radius: 50%;
    padding: 9px;
    width: 23px;
}
footer ul li.instagram a img {
    width: 20px;
    height: auto;
    margin: 0 auto;
    display: block;
}

@media screen and (min-width: 1200px) {	
.swiper-slide .voiceThumb {
width: 380px;
height: 455px;
margin: 0 50px 0 0;
position: relative;
}
.item .name {
font-size: 25px;
}
.item {
font-size: 17px;
font-weight: normal;
line-height: 2;
}
}

@media screen and (max-width: 1100px) {	
    .moringa .horizon:first-child .shape,
    .moringa .horizon:nth-child(2) .shape,
    .moringa .horizon:nth-child(3) .shape,
    .moringa .horizon:nth-child(4) .shape,
    .moringa .horizon:nth-child(5) .shape,
    .moringa .horizon:nth-child(6) .shape,
    .moringa .horizon:nth-child(7) .shape,
    .moringa .horizon:nth-child(8) .shape,
    .secret .horizon:last-child .shape,
    .secret .horizon:first-child .shape {
        width: 40vw;
        margin-left: 3vw;
    }   
    .swiper-slide {
    margin-bottom: 40px;
    margin: 0 0px 40px 0px;
}
.voiceThumb .copyP p{font-size:15px;}
.swiper-cards {
    margin: 0 20px;
}
    .secret .info,
    .moringa .info {
        width: calc(100% - 40vw);
    }
    .voice ul li {
        width: calc(92% / 3);
    }
    .voiceThumb .copyP {
    right: 3px;
}
.swiper-wrapper .swiper-slide:nth-child(2) .voiceThumb .copyP {
    right: 3px;
    left: auto;
    top: 0px;
}
.swiper-wrapper .swiper-slide:nth-child(3) .voiceThumb .copyP {
    right: 0px;
}
.swiper-wrapper .swiper-slide:nth-child(4) .voiceThumb .copyP {
    left: 5px;
}
.swiper-wrapper .swiper-slide:nth-child(5) .voiceThumb .copyP {
    right: 5px;
}
.voice {
    padding: 0 2rem 10px;
}
}
@media screen and (max-width: 860px) {	
.swiper-slide .voiceThumb {
    height: 60vw;
}
}

@media screen and (max-width: 768px) {	
	.start p {
		width: 200px;
		margin:0 0 0 -100px;
	}
	.recommend h2 {
		width: 400px;
	}
	.swiper-slide img {
        width: 130px;
        align-self: flex-start;
        margin-top: 30px;
    }
    .item {
      align-items: flex-start;
       display:block;
    }
    .swiper-slide .voiceThumb {
    width: 100%;
    height: 100vw;
}
.voiceText {
    width: calc(100% - 100px);
    padding: 0 50px 30px 50px;
}
.item .name {
    margin-top: 30px;
}
.voiceThumb .copyP {
right: 20px;
}
.swiper-wrapper .swiper-slide:nth-child(2) .voiceThumb .copyP {
right: 20px;
}
.swiper-wrapper .swiper-slide:nth-child(3) .voiceThumb .copyP {
right: 20px;
}
.swiper-wrapper .swiper-slide:nth-child(4) .voiceThumb .copyP {
left: 20px;
top: 90px;
}
.swiper-wrapper .swiper-slide:nth-child(5) .voiceThumb .copyP {
right: 20px;
}
.swiper-wrapper .swiper-slide:nth-child(6) .voiceThumb .copyP {
top: 70px;
}
    .swiper-slide img {
width: 130px;
align-self: flex-start;
margin: 0 auto 20px;
display: block;
}
	.cheers {
		width: 31vw;
		position: absolute;
		left: 34vw;
		top: -3vw;
	}
	.shine01 {
		width: 27vw;
		position: absolute;
		left: 6vw;
		top: 0;
	}
	.shine02 {
	width: 27vw;
		position: absolute;
		left: 68vw;
		top: 1vw;
	}
	.lady01 {
		width: 26vw;
		position: absolute;
		left: 5vw;
		top: 33vw;
	}
	.baloon01 {
		width: 24vw;
		position: absolute;
		left: 3vw;
		top: 18vw;
	}
	.lady02 {
		width: 26vw;
		position: absolute;
		left: 70vw;
		top: 34.8vw;
	}
	.baloon02 {
		width: 24vw;
		position: absolute;
		left: 68vw;
		top: 18vw;
	}
	.copy {
		width: 38vw;
		position: absolute;
		left: 31.5vw;
		top: 29vw;
	}
	.momo {
		width: 38vw;
		position: absolute;
		left: 32vw;
		top: 52vw;
	}
	.lang select {
    height: 2.5em;
    padding: .3em calc(.8em + 30px) .3em .8em;
    font-size:12px;
}
	.mainvisual {
		min-height: 89vw;
	}
	header ul li.login a {
background: #fff url(../img/cart.png) 17px 9px no-repeat;
background-size: 16px auto;
font-size: 12px;
line-height: 14px;
padding: 9px 20px 11px 38px;
}
	header ul li.contact a {
		background: #fff url(../img/contact.png) 17px 9px no-repeat;
		background-size: 22px auto;
		padding: 9px 20px 13px 45px;
		font-size: 12px;
		line-height: 12px;
	}
	header ul li a {
		margin: 0 0 0 15px;
	}
	.aboutphoto ul.better{
        display:block   
	}
	.aboutphoto .better li:first-child,
	.aboutphoto .better li:nth-child(2),
	.aboutphoto .better li:last-child {
        width: 96%;
        margin: 0 auto 60px;
    }
    .aboutphoto .better li{
        display:flex;   
    }
    .aboutphoto .better li div{
        width:calc(100% - 33vw);
    }
    .aboutphoto ul li img {
        width: 33vw;
        border-radius: 10px 0 0 10px;
        align-self: flex-start;
        height: 156px;
    }
    .better li h4{
        left:7%;   
    }
    .aboutphoto {
        padding: 100px 0 20px;
        margin-bottom: 50px;
    }
    .product .horizon img {
        width: 35vw;
    }
    .img {
        padding-top: 80px;
    }
    .moringa h3 {
        margin: 20px 0 20px;
       font-size: 16px;
    }
    .effect .horizon:first-child .shape {
        width: 40vw;
        margin-right: 1vw;
    }
    .effect .info {
        width: calc(100% - 40vw);
    }
    .effect .info p {
        line-height: 2;
        margin: 20px 0px 0 20px;
    }
	footer ul li.login a {
background: #fff url(../img/cart.png) 21px 7px no-repeat;
background-size: 19px auto;
font-size: 12px;
line-height: 14px;
padding: 9px 20px 11px 45px;
}
style.css:1513
	footer ul li.contact a {
		background: #fff url(../img/contact.png) 17px 9px no-repeat;
		background-size: 22px auto;
		padding: 9px 20px 13px 45px;
		font-size: 12px;
		line-height: 12px;
	}
	footer ul li a {
		margin: 0 0 0 15px;
	}
	footer div{
	 display:block;   
	}
	footer ul {
    display: block;
    }
    footer ul li.login a,footer ul li.contact a {
        margin: 0px 0 20px 0;
    }
	.warp {
        width: 258px;
        height: 72px;
        font: normal 34px/1 Noto Sans CJK JP;
        margin: 20px auto 35px;
    }
	.warp {
        width: 190px;
        height: 72px;
        font: normal 34px/1 Noto Sans CJK JP;
        margin: 20px auto 35px;
    }
    .warp__0 {
        transform-origin: 50% 28px;
        transform: translate(2.1007999999999996px,28.539299999999997px) rotate(-0.418785rad);
    }
    .warp__1 {
        transform-origin: 50% 28px;
        transform: translate(31.363999999999997px,21.273899999999998px) rotate(-0.140154rad);
    }
    .warp__2 {
        transform-origin: 50% 28px;
        transform: translate(56.782300000000006px,19.6441px) rotate(0.007811rad);
    }
    .warp__3 {
        transform-origin: 50% 28px;
        transform: translate(86.7916px,21.029200000000003px) rotate(0.08446rad);
    }
    .warp__4 {
        transform-origin: 50% 28px;
        transform: translate(111.93379999999999px,24.195999999999998px) rotate(0.121924rad);
    }
            
.warp__5 {
        transform-origin: 50% 28px;
        transform: translate(146.042px,28.4863px) rotate(0.12056rad);
    }
            
    .warp__6 {
                transform-origin: 50% 28px;
                transform: translate(180.3083px,31.8585px) rotate(0.064341rad);
    }
            
    .warp__7 {
                transform-origin: 50% 28px;
                transform: translate(214.4089px,31.7832px) rotate(-0.094531rad);
    }
    .warp2 {
                width: 296px;
                height: 72px;
                font: normal 34px/1 notosans;
    }
    .warp2__0 {
                transform-origin: 50% 28px;
                transform: translate(3.0806000000000004px,29.3733px) rotate(0.048969rad);
    }
            
    .warp2__1 {
                transform-origin: 50% 28px;
                transform: translate(37.4972px,29.768900000000002px) rotate(-0.025038rad);
    }
            
    .warp2__2 {
                transform-origin: 50% 28px;
                transform: translate(71.9062px,27.7568px) rotate(-0.089412rad);
    }
            
    .warp2__3 {
                transform-origin: 50% 28px;
                transform: translate(105.9477px,23.8714px) rotate(-0.1335rad);
    }
            
    .warp2__4 {
                transform-origin: 50% 28px;
                transform: translate(139.8729px,19.030700000000003px) rotate(-0.142405rad);
    }
            
    .warp2__5 {
                transform-origin: 50% 28px;
                transform: translate(173.8666px,14.8234px) rotate(-0.090914rad);
    }
            
    .warp2__6 {
                transform-origin: 50% 28px;
                transform: translate(208.1278px,13.9649px) rotate(0.061469rad);
    }
            
    .warp2__7 {
                transform-origin: 50% 28px;
                transform: translate(241.77730000000003px,20.496499999999997px) rotate(0.339929rad);
    }
    .warp3 {
                width: 162px;
                height: 62px;
                font: normal 34px/1 notosans;
    }
    .warp3__0 {
                transform-origin: 50% 28px;
                transform: translate(8.0713px,17.7553px) rotate(-0.321554rad);
    }
            
    .warp3__1 {
                transform-origin: 50% 28px;
                transform: translate(37.2471px,10.847000000000001px) rotate(-0.19334rad);
    }
            
    .warp3__2 {
                transform-origin: 50% 28px;
                transform: translate(62.1623px,6.915199999999999px) rotate(-0.094004rad);
    }
            
    .warp3__3 {
                transform-origin: 50% 28px;
                transform: translate(92.3295px,5.5991px) rotate(-0.000826rad);
    }
            
    .warp3__4 {
                transform-origin: 50% 28px;
                transform: translate(117.4597px,7.150500000000001px) rotate(0.108456rad);
    }
    .warp4 {
                width: 430px;
                height: 62px;
                font: normal 34px/1 notosans;
    }
    .warp4__0 {
                transform-origin: 50% 28px;
                transform: translate(7.991299999999999px,17.133699999999997px) rotate(-0.293275rad);
    }
            
.warp4__1 {
                transform-origin: 50% 28px;
                transform: translate(41.9782px,10.573799999999999px) rotate(-0.107966rad);
}
            
.warp4__2 {
                transform-origin: 50% 28px;
                transform: translate(76.3675px,8.731900000000003px) rotate(-0.008687rad);
}
            
.warp4__3 {
                transform-origin: 50% 28px;
                transform: translate(110.5617px,9.474600000000002px) rotate(0.046866rad);
}
            
.warp4__4 {
                transform-origin: 50% 28px;
                transform: translate(145.0303px,11.677399999999999px) rotate(0.077354rad);
}
            
.warp4__5 {
                transform-origin: 50% 28px;
                transform: translate(178.9845px,14.570999999999998px) rotate(0.090219rad);
}
            
.warp4__6 {
                transform-origin: 50% 28px;
                transform: translate(213.6912px,17.734900000000003px) rotate(0.089405rad);
}
            
.warp4__7 {
                transform-origin: 50% 28px;
                transform: translate(247.74509999999998px,20.594px) rotate(0.076039rad);
}
            
.warp4__8 {
                transform-origin: 50% 28px;
                transform: translate(282.5887px,22.8151px) rotate(0.048843rad);
}
            
.warp4__9 {
                transform-origin: 50% 28px;
                transform: translate(316.8186px,23.810200000000002px) rotate(0.006347rad);
}
            
.warp4__10 {
                transform-origin: 50% 28px;
                transform: translate(350.8522px,23.027500000000003px) rotate(-0.056289rad);
}
            
.warp4__11 {
                transform-origin: 50% 28px;
                transform: translate(384.907px,19.633699999999997px) rotate(-0.148137rad);
}
	.warp5 {
                width: 224px;
                height: 72px;
                font: normal 34px/1 notosans;
}
.warp5__0 {
                transform-origin: 50% 28px;
                transform: translate(3.532px,31.669199999999996px) rotate(-0.285997rad);
}
            
.warp5__1 {
                transform-origin: 50% 28px;
                transform: translate(33.1298px,24.6871px) rotate(-0.216382rad);
}
            
.warp5__2 {
                transform-origin: 50% 28px;
                transform: translate(57.9811px,19.8063px) rotate(-0.13453rad);
}
            
.warp5__3 {
                transform-origin: 50% 28px;
                transform: translate(88.2615px,17.3669px) rotate(-0.038287rad);
}
            
.warp5__4 {
                transform-origin: 50% 28px;
                transform: translate(113.61529999999999px,17.936700000000002px) rotate(0.078098rad);
}
            
.   warp5__5 {
        transform-origin: 50% 28px;
        transform: translate(147.3438px,22.8307px) rotate(0.203791rad);
    }
            
    .warp5__6 {
        transform-origin: 50% 28px;
        transform: translate(180.6578px,29.8544px) rotate(0.120384rad);
    }
    .warp8 {
        width: 286px;
        height: 62px;
        font: normal 34px/1 notosans;
    }
    .warp8__0 {
        transform-origin: 50% 28px;
        transform: translate(-0.33970000000000056px,23.102800000000002px) rotate(0.149443rad);
    }
            
    .warp8__1 {
        transform-origin: 50% 28px;
        transform: translate(34.0186px,24.976300000000002px) rotate(-0.013324rad);
    }
            
    .warp8__2 {
        transform-origin: 50% 28px;
        transform: translate(68.4173px,23.298099999999998px) rotate(-0.074247rad);
    }
            
    .warp8__3 {
        transform-origin: 50% 28px;
        transform: translate(102.6243px,20.361600000000003px) rotate(-0.091831rad);
    }
            
    .warp8__4 {
        transform-origin: 50% 28px;
        transform: translate(136.9114px,17.2857px) rotate(-0.083401rad);
    }
            
    .warp8__5 {
        transform-origin: 50% 28px;
        transform: translate(170.9535px,14.880600000000001px) rotate(-0.054335rad);
    }
            
    .warp8__6 {
        transform-origin: 50% 28px;
        transform: translate(205.2916px,13.8142px) rotate(-0.004012rad);
    }
            
    .warp8__7 {
        transform-origin: 50% 28px;
        transform: translate(239.26819999999998px,14.865200000000002px) rotate(0.070441rad);
    } 
    .contain ul li {
        width: calc(98% / 3);
    }
    .contain ul li:nth-child(3), .contain ul li:nth-child(6), .contain ul li:nth-child(9) {
        margin-right: 0;
    }
    .contain ul li:nth-child(4), .contain ul li:nth-child(8) {
        margin-right: 1%;
    }
    
    .voice ul li {
        width: calc(92% / 2);
       margin-right: 4%;
      margin-bottom: 4%;
    }
    .voice ul li.illustvoice01 {
        background: #fff url(../img/voice01.png) center center no-repeat;
        background-size: cover;
    }
    .voice ul li.illustvoice02 {
        background: #fff url(../img/voice02.png) center center no-repeat;
        background-size: cover;
    }
    .warp9 {
        width: 185px;
        height: 62px;
        font: normal 34px/1 notosans;
        margin:-1px auto 20px;
    }
    .warp9__0 {
        transform-origin: 50% 28px;
        transform: translate(-0.2483000000000004px,14.534599999999998px) rotate(-0.235949rad);
    }
    .warp9__1 {
        transform-origin: 50% 28px;
        transform: translate(33.6015px,8.6006px) rotate(-0.11615rad);
    }
    .warp9__2 {
        transform-origin: 50% 28px;
        transform: translate(67.6732px,6.3292px) rotate(-0.019532rad);
    }
    .warp9__3 {
        transform-origin: 50% 28px;
        transform: translate(101.9302px,7.1843px) rotate(0.069546rad);
    }
    .warp9__4 {
        transform-origin: 50% 28px;
        transform: translate(135.8946px,11.2851px) rotate(0.180109rad);
    }
    .company ul li span {
        display: block;
        margin: 0 auto 10px;
        text-align: center;
        padding: 0;
        font-weight: bold;
    }
    .company ul li {
        font-size: 16px;
    }
    .warp10 {
        width: 147px;
        height: 62px;
        font: normal 34px/1 notosans;
    }
    .warp10__0 {
        transform-origin: 50% 28px;
        transform: translate(-0.5451000000000015px,14.521500000000003px) rotate(-0.243862rad);
    }
    .warp10__1 {
        transform-origin: 50% 28px;
        transform: translate(32.9792px,8.741px) rotate(-0.093761rad);
    }
    .warp10__2 {
        transform-origin: 50% 28px;
        transform: translate(67.002px,8.395000000000003px) rotate(0.07569rad);
    }
    .warp10__3 {
        transform-origin: 50% 28px;
        transform: translate(100.5424px,13.869599999999998px) rotate(0.244505rad);
    }
    .company ul li {
        margin-bottom: 15px;
        padding: 10px 10px 20px 10px;
        text-align: center;
    }
    .mailform{
     display:block;   
     padding:8px 20px;
    }
    .mailform dt{
     width:100%;   
    }
    .mailform dd {
    width: 100%;
    margin: 0;
}
.warp11 {
                width: 213px;
                height: 62px;
                font: normal 34px/1 notosans;
            }
            .warp11__0 {
                transform-origin: 50% 28px;
                transform: translate(-0.2527000000000008px,14.768px) rotate(-0.214874rad);
            }
            
            .warp11__1 {
                transform-origin: 50% 28px;
                transform: translate(33.3548px,9.6051px) rotate(-0.100556rad);
            }
            
            .warp11__2 {
                transform-origin: 50% 28px;
                transform: translate(67.4036px,7.504800000000003px) rotate(-0.02658rad);
            }
            
            .warp11__3 {
                transform-origin: 50% 28px;
                transform: translate(101.7295px,7.640999999999998px) rotate(0.033514rad);
            }
            
            .warp11__4 {
                transform-origin: 50% 28px;
                transform: translate(135.8591px,9.822899999999997px) rotate(0.096595rad);
            }
            
            .warp11__5 {
                transform-origin: 50% 28px;
                transform: translate(169.6174px,14.757199999999997px) rotate(0.216991rad);
            }
}

@media screen and (max-width: 736px) {
header .login {
width: 120px;
margin-left: auto;
}
 .lang select {
margin-bottom: 11px;
}
.lang::after{top:15px;}
.language .select {
    text-align: right;
}
    header ul {
        display: block;
    }
    header ul li.login a{margin-right:0;}
.lang select {
margin-bottom: 11px;
min-width: 115px;
padding: 9px 13px 9px 40px;
height: auto;
margin-top: 0px;
}
    header ul li.login a,
    header ul li.contact a{
        margin-bottom:12px;	
    }
    header ul li.instagram a{
     margin:0 0 0 auto;   
    }
}

@media screen and (max-width: 620px) {
.voice {
padding: 0 1rem 10px;
}
.swiper-slide img {
width: auto;
height: 150px;
}
.item__pink,
.item__grey{background:#fff;}

}

@media screen and (max-width: 570px) {
    .start p {
	    width: 150px;
    	margin:0 0 0 -75px;
    }
       .recommend ul {
        display: block;
    }
    .recommend ul li:first-child {
        margin: 20px auto 20px;
        width: 51%;
    }
    .recommend ul li:nth-child(2) {
        width: 59%;
        margin: 0 auto;
    }
    .recommend ul li:last-child {
        width: 51%;
        margin: 20px auto;
    }
    .recommend h2 {
        width: 100%;
    }
    .warp {
        width: 210px;
        height: 72px;
        font: normal 26px/1 notosans;
    }
    .warp_zh {
        width: 150px;
        height: 72px;
        font: normal 26px/1 notosans;
    }
    .warp__0 {
        transform-origin: 50% 21px;
        transform: translate(7.697700000000001px,36.8333px) rotate(-0.425905rad);
    }
            
    .warp__1 {
                transform-origin: 50% 21px;
                transform: translate(29.675400000000003px,30.372px) rotate(-0.199783rad);
    }
            
    .warp__2 {
                transform-origin: 50% 21px;
                transform: translate(48.7464px,28.3615px) rotate(0.000998rad);
    }
            
    .warp__3 {
                transform-origin: 50% 21px;
                transform: translate(71.8035px,29.9589px) rotate(0.138997rad);
    }
            
    .warp__4 {
                transform-origin: 50% 21px;
                transform: translate(90.5015px,34.0411px) rotate(0.212563rad);
    }
            
    .warp__5 {
                transform-origin: 50% 21px;
                transform: translate(116.13990000000001px,39.7517px) rotate(0.210525rad);
    }
            
    .warp__6 {
                transform-origin: 50% 21px;
                transform: translate(141.8798px,44.202px) rotate(0.115932rad);
    }
            
    .warp__7 {
                transform-origin: 50% 21px;
                transform: translate(168.1484px,44.918099999999995px) rotate(-0.077346rad);
    }
    .warp2 {
                width: 232px;
                height: 62px;
                font: normal 26px/1 notosans;
    }
    .warp2__0 {
                transform-origin: 50% 21px;
                transform: translate(7.203600000000002px,25.5987px) rotate(0.078926rad);
    }
            
    .warp2__1 {
                transform-origin: 50% 21px;
                transform: translate(33.5876px,26.2947px) rotate(-0.025492rad);
    }
            
    .warp2__2 {
                transform-origin: 50% 21px;
                transform: translate(59.6974px,24.456200000000003px) rotate(-0.108737rad);
    }
            
    .warp2__3 {
                transform-origin: 50% 21px;
                transform: translate(85.8003px,21.093600000000002px) rotate(-0.135056rad);
    }
            
    .warp2__4 {
                transform-origin: 50% 21px;
                transform: translate(111.7744px,18.099200000000003px) rotate(-0.081112rad);
    }
            
    .warp2__5 {
                transform-origin: 50% 21px;
                transform: translate(138.1394px,17.4407px) rotate(0.038571rad);
    }
            
    .warp2__6 {
                transform-origin: 50% 21px;
                transform: translate(164.0729px,20.238500000000002px) rotate(0.175624rad);
    }
            
    .warp2__7 {
                transform-origin: 50% 21px;
                transform: translate(189.8037px,26.4974px) rotate(0.297144rad);
    }
    .warp3 {
                width: 122px;
                height: 62px;
                font: normal 26px/1 notosans;
    }
    .warp3__0 {
                transform-origin: 50% 21px;
                transform: translate(8.1829px,25.8044px) rotate(-0.358193rad);
    }
            
    .warp3__1 {
                transform-origin: 50% 21px;
                transform: translate(30.3298px,19.581200000000003px) rotate(-0.242615rad);
    }
            
    .warp3__2 {
                transform-origin: 50% 21px;
                transform: translate(48.9752px,15.6038px) rotate(-0.140783rad);
    }
            
.warp3__3 {
                transform-origin: 50% 21px;
                transform: translate(71.9955px,13.555399999999999px) rotate(-0.056709rad);
}
            
.warp3__4 {
                transform-origin: 50% 21px;
                transform: translate(91.0406px,13.092500000000001px) rotate(0.012178rad);
}
 .warp4{display:none;}
           .warp6 {
width: 206px;
height: 62px;
font: normal 26px/1 Noto Sans CJK JP;
margin: -20px 0 0 0;
display:block;
}
            [class*='warp6__'] {
                display: block;
                position: absolute;
}
.warp6__0 {
                transform-origin: 50% 21px;
                transform: translate(8.264299999999999px,25.760800000000003px) rotate(-0.3147rad);
}
            
.warp6__1 {
                transform-origin: 50% 21px;
                transform: translate(33.7177px,19.4291px) rotate(-0.171238rad);
}
            
    .warp6__2 {
        transform-origin: 50% 21px;
        transform: translate(59.771100000000004px,16.8399px) rotate(-0.029198rad);
    }
    .warp6__3 {
        transform-origin: 50% 21px;
        transform: translate(85.7637px,17.6327px) rotate(0.082734rad);
    }
    .warp6__4 {
        transform-origin: 50% 21px;
        transform: translate(111.6113px,20.6132px) rotate(0.134047rad);
    }
    .warp6__5 {
        transform-origin: 50% 21px;
        transform: translate(137.6916px,23.786700000000003px) rotate(0.088219rad);
    }
    .warp6__6 {
        transform-origin: 50% 21px;
        transform: translate(163.886px,23.999899999999997px) rotate(-0.098033rad);
    }
    .warp7 {
        width: 158px;
        height: 62px;
        font: normal 26px/1 notosans;
        display: block;
        margin: -17px 0 0 10px;
    }
    .secret ul {
        margin-top: 20px;
    }
    [class*='warp7__'] {
        display: block;
        position: absolute;
}
    .warp7__0 {
        transform-origin: 50% 21px;
        transform: translate(8.251000000000001px,25.6836px) rotate(-0.326748rad);
    }
    .warp7__1 {
        transform-origin: 50% 21px;
        transform: translate(33.4658px,18.7305px) rotate(-0.209368rad);
    }
    .warp7__2 {
        transform-origin: 50% 21px;
        transform: translate(59.34310000000001px,14.915999999999997px) rotate(-0.082221rad);
    }
    .warp7__3 {
        transform-origin: 50% 21px;
        transform: translate(85.4919px,14.454300000000003px) rotate(0.045839rad);
    }
    .warp7__4 {
        transform-origin: 50% 21px;
        transform: translate(111.5522px,17.1169px) rotate(0.148611rad);
    }
    .warp5 {
        width: 170px;
        height: 72px;
        font: normal 26px/1 notosans;
    }
    .warp5__0 {
        transform-origin: 50% 21px;
        transform: translate(2.777799999999999px,37.681px) rotate(-0.444978rad);
    }
    .warp5__1 {
        transform-origin: 50% 21px;
        transform: translate(24.6622px,30.158099999999997px) rotate(-0.282218rad);
    }
    .warp5__2 {
        transform-origin: 50% 21px;
        transform: translate(43.3705px,25.7213px) rotate(-0.143869rad);
    }
    .warp5__3 {
        transform-origin: 50% 21px;
        transform: translate(66.6218px,23.9388px) rotate(-0.026877rad);
    }
    .warp5__4 {
        transform-origin: 50% 21px;
        transform: translate(85.8341px,24.557000000000002px) rotate(0.07855rad);
    }
    .warp5__5 {
        transform-origin: 50% 21px;
        transform: translate(111.8462px,28.0323px) rotate(0.185569rad);
    }
    .warp5__6 {
        transform-origin: 50% 21px;
        transform: translate(137.2331px,34.2544px) rotate(0.303186rad);
    }
    .effect .horizon {
        display: block;
    }
    .effect .horizon:first-child .shape {
        width: 74%;
        margin: 0 auto;
        display: block;
    }
    .effect .info {
    width: 100%;
    }
    .product .horizon {
        display: block;
        padding: 0px 0 30px;
    }
    .product .horizon img {
        width: 64%;
        display: block;
        margin: 0 auto;
    }
    .product .info {
        text-align: center;
    }
    .product h2 {
        margin-top: 30px;
    }
    .product ul {
        justify-content: center;
    }
    .product a.btn {
        padding: 16px 30px;
        font-size: 4vw;
    }
    .moringa .horizon {
        display: block;
    }
    .moringa .horizon:first-child .shape, .moringa .horizon:nth-child(2) .shape, .moringa .horizon:nth-child(3) .shape, .moringa .horizon:nth-child(4) .shape, .moringa .horizon:nth-child(5) .shape, .moringa .horizon:nth-child(6) .shape, .moringa .horizon:nth-child(7) .shape, .moringa .horizon:nth-child(8) .shape, .secret .horizon:last-child .shape, .secret .horizon:first-child .shape {
        width: 90%;
        margin: 0 auto;
        display: block;
    }
    .moringa ul {
        margin-top: 10px;
    }
    .secret .info, .moringa .info {
        width: 90%;
        margin: 0 auto;
    }
    .secret .horizon {
        display: block;
        width: 100%;
    }
    .secret .info p {
        margin: 30px 0px 0;
    }
    .moringa .cnt {
        text-align: left;
        width: calc(90% - 60px);
        margin: 0 auto;
        font-size: 14px;
        padding: 0 30px;
    }
    .secret .info, .moringa .info {
        width: calc(90% - 60px);
        margin: 0 auto;
        padding: 10px 30px 0;
    }
    .aboutphoto .better li {
        display: block;
    }
    .aboutphoto ul li img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    .aboutphoto .better li div {
        width: 90%;
        margin: 0 auto;
    }
    .better li h4 {
        left: 45%;
    }
    .about .txt {
        width: calc(100% - 6rem);
        padding: 0px 3rem;
        line-height: 2;
        font-size: 14px;
    }
    .about .txt span {
    font-size: 18px;
    }
    .secret .info img {
        width: 100px;
        margin: 0 0px 0 auto;
    }
    .warp8 {
        width: 220px;
        height: 62px;
        font: normal 26px/1 notosans;
    }
    .warp8__0 {
        transform-origin: 50% 21px;
        transform: translate(0.2845999999999993px,28.045299999999997px) rotate(0.110552rad);
    }
    .warp8__1 {
        transform-origin: 50% 21px;
        transform: translate(26.467799999999997px,29.471400000000003px) rotate(-0.002738rad);
    }
    .warp8__2 {
        transform-origin: 50% 21px;
        transform: translate(52.684799999999996px,28.016199999999998px) rotate(-0.101981rad);
    }
    .warp8__3 {
        transform-origin: 50% 21px;
        transform: translate(78.4719px,24.6736px) rotate(-0.144045rad);
    }
    .warp8__4 {
        transform-origin: 50% 21px;
        transform: translate(104.3855px,21.129600000000003px) rotate(-0.117797rad);
    }
    .warp8__5 {
        transform-origin: 50% 21px;
        transform: translate(130.4729px,18.893300000000004px) rotate(-0.049184rad);
    }
    .warp8__6 {
        transform-origin: 50% 21px;
        transform: translate(156.8767px,18.647100000000002px) rotate(0.030267rad);
    }
    .warp8__7 {
        transform-origin: 50% 21px;
        transform: translate(183.3602px,20.436300000000003px) rotate(0.102744rad);
    }
    .contain ul li {
        width: calc(98% / 2);
    }
    .contain ul li:nth-child(2), .contain ul li:nth-child(4), .contain ul li:nth-child(6) , .contain ul li:nth-child(8) , .contain ul li:nth-child(10) {
        margin-right: 0;
    }
    .contain ul li:nth-child(3), .contain ul li:nth-child(9) {
        margin-right: 1%;
    }
   .voice ul li {
        width: 91%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 10%;
        min-height: 180px;
        display: flex;
    }
    .voice ul li p {
        align-self: center;
        font-size:16px;
        padding:40px 33px;
    }
    .company ul {
        padding: 40px 1rem;
    }
    .company {
        padding: 40px 2rem 20px;
    }
    section.contact{
     padding:0 2rem;   
    }
}

@media screen and (max-width: 440px) {
    h1.logo {
       width: 140px;
       margin: 0 auto;
    }
    .voiceText {
width: calc(100% - 60px);
padding: 0 30px 30px 30px;
}
    .swiper-slide .voiceThumb {
height: 400px;
}
    header{
        display:block;	
        padding: 30px 2rem 35px;
    }
    header ul {
display: flex;
margin-top: 20px;
justify-content: center;
flex-wrap: wrap;
}
header .login {
width: 100%;
margin-left: auto;
margin-bottom: 15px;
}
    .item {
font-size: 14px;
line-height: 1.8;
}
    header {
        padding: 30px 1rem 25px;
        width: calc(100% - 2rem);
        position:relative;
    }
    header ul li.login a {
        margin-left: 0;
    } 
    header ul li.login a {
background: #fff url(../img/cart.png) 19px 9px no-repeat;
background-size: 18px auto;
padding: 10px 13px 13px 40px;
display: block;
width: 62px;
margin: 0 auto;
}
    header ul li.contact a{
	background: #fff url(../img/contact.png) 14px 9px no-repeat;
        background-size: 22px auto;
        padding: 10px 13px 13px 40px;
        display: block;
    }
    header ul li.instagram a {
margin: 0 0 0 auto;
position: absolute;
right: 17px;
top: 29px;
    }
    .recommend ul li:first-child {
        margin: 0px auto 20px;
        width: 60%;
    }
    .recommend ul li:nth-child(2) {
        width: 71%;
        margin: 20px auto 0;
    }
    .recommend ul li:last-child {
        width: 61%;
        margin: 30px auto;
    }
    .recommend {
        padding: 10px 1rem;
    }
    .recommend h2 {
        margin: 30px auto 30px;
    }
    .mainvisual {
        min-height: 100vw;
    }
    .warp {
        width: 154px;
        height: 62px;
        font: normal 20px/1 Noto Sans CJK JP;
        margin: -10px auto 25px;
    }
    .warp_zh {
        width: 114px;
        height: 62px;
        font: normal 20px/1 Noto Sans CJK JP;
        margin: -10px auto 25px;
    }
    .warp__0 {
    transform-origin: 50% 16px;
    transform: translate(7.637599999999999px,42.2457px) rotate(-0.487067rad);
    }
    .warp__1 {
        transform-origin: 50% 16px;
        transform: translate(24.7581px,37.2043px) rotate(-0.162225rad);
    }
    .warp__2 {
        transform-origin: 50% 16px;
        transform: translate(38.9256px,36.6327px) rotate(0.068307rad);
    }
    .warp__3 {
        transform-origin: 50% 16px;
        transform: translate(56.7996px,38.6728px) rotate(0.169169rad);
    }
    .warp__4 {
        transform-origin: 50% 16px;
        transform: translate(70.6826px,41.7554px) rotate(0.178167rad);
    }
    .warp__5 {
        transform-origin: 50% 16px;
        transform: translate(90.5017px,44.6795px) rotate(0.101941rad);
    }
    .warp__6 {
        transform-origin: 50% 16px;
        transform: translate(110.6066px,45.4095px) rotate(-0.037264rad);
    }
    .warp__7 {
        transform-origin: 50% 16px;
        transform: translate(130.5403px,42.9897px) rotate(-0.206461rad);
    }
    .about .cnt {
        padding: 0 2rem;
        font-size: 12px;
    }
    .about .txt {
        width: calc(100% - 4rem);
        padding: 0px 2rem;
        font-size: 12px;
    }
    .about .txt span {
        font-size: 16px;
    }
    .about .block {
        padding: 10px 0 30px;
    }
    .aboutphoto ul li img {
        height: 180px;
    }
    .better li h4 {
        left: 28%;
    }
    .secret .info, .moringa .info {
        width: 90%;
        margin: 0 auto;
        padding: 10px 0px 0;
    }
    .moringa .cnt {
        width: 90%;
        padding: 0;
    }
    .contain ul {
        padding: 0 2rem;
    }
    .contain ul li div {
        top: -20px;
        padding: 6px 10px;
        font-size: 11px;
        left: 50%;
        width: 76%;
        margin-left: -44%;
    }
    .contain ul li {
        width: calc(98% / 2);
        padding-top: 10px;
        margin-bottom: 25px;
    }
}