body{
    margin:0;
    padding:0;
    text-align:center;

    overflow-x:hidden;
    font-family:"Playfair Display", serif;

    line-height:1.5;
   
background-repeat:no-repeat;
background-size:cover;
}

footer{
background:black;
color:white;
}

footer{
background:black;
width:100%;
height:auto;
color:white;
}
footer a{
color:white;    
}

header{
width:100%;
height:auto;
background:black;
color:white;
z-index:105;
position:relative;
top:0;
margin-top:-24px;
 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

header p{
animation:nagareru 20s linear infinite;
animation-direction:alternate;
}

@keyframes naareru{
0%{transform:translate(100%)}
100%{transform:translate(-100%)}
}
 
html{
overflow-x:hidden;    
}


th{
text-align:justify;
z-index:90;
position:relative;

}

td{
text-align:justify;  
border-bottom:#778899 1px solid;   
padding-left:1em;  
z-index:90;
position:relative;
}

li{
list-style:none;
}


a{ 
	transition: 1s;
	text-decoration:none;
}

a:hover {
	text-shadow:
		0 0 7px #fff,
		0 0 10px #fff,
		0 0 20px #fff,
		0 0 40px #fff,
		0 0 80px #fff,
		0 0 90px #fff;
		color:#e29676;
}

table{
width:700px;
height:auto;
background:transparent;
padding:1.2em;
font-size:16px;
margin-left:20px;

}






*{
    box-sizing:border-box;
      margin:auto;
        margin: 0;
    
     padding: 0;


    
}
    
p{
font-size:20px; 
}



.top-logo{
z-index: 101;
position:relative;
width:300px;
height:auto;
top:-100px;
}




.copyright{
    color:#9e9478;
    font-size:15px;
    font-weight:900;
  

}



  
   
.cover{
 overflow:hidden;
 position:relative;
}      

.text{
z-index:100;
position:relative;    
}

.menu-list{
display:flex;
font-size:30px;
gap:20;
left:0;
top:50px;
z-index:106;
position:relative;
}    

.footer-logo{
z-index:120;
position:relative;  
width:250px;
height:auto;
left:-40px;
}

.menu-list li{
font-size:30px;  
text-decoration:none;
list-style:none;
padding:0;
margin:10px;
text-align:right;
}

.menu-list a{
 text-decoration:none;  
 color:black ;
 font-weight:900;
 text-align:center;
}

.menu-list a:hover{
 color:  #e29676; 
}

.menu-list2{
    display:flex;
    z-index:100;
    position:relative;
    font-size:30px;
    text-align:justify;
    padding-top:10px;
    

    }    
    
    .menu-list2 li{
    font-size:30px;  
    text-decoration:none;
    list-style:none;
    padding:0;
    margin:10px;
    text-align:right;
    }
    
    .menu-list2 a{
     text-decoration:none;  
     color:black ;
     font-weight:900;
     text-align:center;
    }
    
    .menu-list2 a:hover{
     color:  #e29676; 
  
    }

.slider {

	z-index:100;
	height: 100vh;
	font-size:0;
    line-height:1;
    top:0;
    margin-top:-489px;
    position:relative;
}
/*　背景画像　*/

.slider-item01 {
   background:url('video.mp4'); 
opacity:80%;
  
}

.slider-item02 {
    background:url('video1.mp4');
    opacity:80%;
}

.slider-item03 {
    background:url("downloads/Untitled design-249.png");
   opacity:80%;
}
.slider-item04 {
    background:url("downloads/Untitled design-250.png");
    opacity:80%;
   
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-position:center;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-size:cover;

}



/*戻る、次へ矢印の位置*/
.slick-prev1, 
.slick-next1 {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid transparent;/*矢印の色*/
    border-right: 2px solid transparent;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev1 {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next1 {/*次へ矢印の位置と形状*/
    right:2.5px;
    transform: rotate(45deg);
}

/*ドットナビ*/
.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    cursor:pointer;
    width:8px;
    height:8px;
    display:block;
    border-radius:50%;
    border:black 0.5px solid;
    background:tan;
    pointer-events: auto; /* こうしないとクリックできない*/

}

.slick-dots .slick-active button{
    background:#9d8e87;/*ドットボタンの現在地表示の色*/
}


svg {
    position: absolute;
    width: 100%; height: 100%;
    z-index:102;
    overflow:hidden;
   margin:0;
   padding:0;
   top:-30px;
   left:-200px;
    
  }
  svg text{
    font-family: "Abril Fatface", serif;
    animation: strokeanimation 5s infinite alternate;
    stroke-width: 2;
    stroke:#ab6953;
    font-size: 50px;
     text-transform: uppercase;
     opacity:90%;

  }
  @keyframes strokeanimation {
    0%   {
      fill:#9d8e87; stroke: #eee9e6     ;
      stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
    }
    70%  {fill: #9d8e87; stroke:#eee9e6
    }
    80%  {fill:#9d8e87; stroke: #eee9e6  ; stroke-width: 3; }
    100% {
      fill:#9d8e87; stroke: #eee9e6    ;
      stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
    }
  }

  .shakingheart{
  animation:yureruheart  2s linear infinite;
  animation-direction: alternate;
  }

  @keyframes yureruheart{
  0%{transform:rotate(10deg)}
  100%{transform:rotate(-10deg)}  
  }

  .serum{
  width:100%;
  height:auto;
  margin-top:-1000px;
  }

  .cater{
  z-index:102;
  position:relative;
  text-align:justify;  
  width:700px;
  height:auto;
  height:auto;
  margin-left:20px;
 margin-top:270px;
  line-height:1.6;
  background:trasnparent;
  
  height:auto;

  top:-200px;

  }
  
  .cater p{
    line-height:1.6;
    font-size:16px;
  }




  .serum2{
  width:300px;
  height:auto;
  left:-450px;
 z-index:108;
 top:-600px;
opacity:80%;
 position:relative;
 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  }

  .floating{
    height: auto;
    transition: transform .6s ease; 
    background:none;
  }

      .stars{
	position:relative;
	font-size:20px;
	line-height:1em;
	letter-spacing:-.2em;
	color:grey;
	margin:0;
	padding:0;
}
.stars:before{
	content:"★★★★★";
	position:absolute;
	color:orange;
	width:calc( 4.3em - .2 * ( 3.5em - .5em ) );
	overflow:hidden;
	white-space:nowrap;
	top:4px;
}

/*Back＆Next矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #e29676;/*arrow color*/
    border-right: 2px solid #e29676;/*arrow color*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*Back矢印の位置と形*/
    left:2.5%;
    transform: rotate(-135deg);
} 

.slick-next {/*Next矢印の位置と形*/
    right:241px;
    transform: rotate(45deg);
}

.btn{
margin-left:200px;
margin-bottom:10px;


}

.btn li{
	cursor: pointer;
	outline: none;
list-style:none;
background:#333;
}

.btn li img{
	opacity: 40%;
	width:100%;
	height:auto;
	transition:2s;

}

.btn li img:hover{
opacity:100%;
}



.btn li.slick-current img{
	opacity: 1;/*選択されてる場合、透明にならない。*/
}

.pics{
margin-left:290px;
margin-top:100px;
margin-bottom:100px;
}

.flexbox{
display:flex;
background-repeat:no-repeat;
background-size:cover;
opacity:75%;
position:relative;
margin-top:50px;
border-radius:100%;
z-index:100;
}

.orderbtn{
width:180px;
height:50px;
background:#ef857d;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
color:white;
opacity:80%;
padding:0.8em;
margin-left:620px;
border-radius:5px;
}

.orderbtn a{
color:white;  
}
.orderbtn a:hover{
opacity:100%;    
}

.hamburger{
    width:40px;
    height:25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
 right:20px;
  z-index: 112;/
  cursor: pointer;
  overflow:visible;
 margin-top:50px;
}

.hamburger span{
  position: absolute;
  width: 100%;
  height: 2px;
  background-color:black;
 z-index:112;
 cursor:pointer;

}

.hamburger span:hover{
   background-color:#e29676;
}

.hamburger span:first-of-type {/* hamburger menu 1st border */
    top: 0;
    margin-top:3px;
    transform: translateY(5px); 
}
.hamburger span:nth-of-type(2) {

    transform: translateY(5px);

}

.hamburger span:last-of-type {
    top: 100%;
    transform: translateY(1px);
}



.slide-menu{

  width: 100%;
  opacity:80%;
  height:auto;
  right:0;
  top:65px;
  color:black;
  transform: translateX(100%); 
  transition: .5s;
  display:flex;
  position:relative;
  z-index:110;
}
.slide-menu li{
  color:black;
  line-height: 300%;
  text-align:justify;
  font-weight:bold;
  padding-left:10px;
}

.slide-menu a{
    font-size:30px;
 color:black;
}

.slider-menu a:hover{
color:  #e29676; 
}

.slide-menu.active{
  transform: translateX(0); 


}


.certified{
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;  
width:300px;
height:80px;
border:transparent 0px solid;
background-image:url('downloads/Untitled design-258.png');
background-size:cover;
color:white;
font-weight:900;
font-size:30px;
padding-top:0.4em;
margin-left:550px;
margin-top:100px;
transform:rotate(20deg);
margin-bottom:100px;
font-family:"smooch", sans-serif;
opacity:50%;
transition:2s;
}

.certified.is-active{
    border-radius:20px;
transform:rotate(0deg); 
opacity:70%;
}

.certified.is-active::before{
left:0;
top:0;
content:'🌿';    
}

.pen-animation{
    background: -webkit-linear-gradient(left, #bbe2f1 50%, transparent 50%);
    background: -moz-linear-gradient(left, #bbe2f1 50%, transparent 50%);
    background: linear-gradient(left, #bbe2f1  50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.pen-animation.is-active{
    background-position: 0% .5em;
}

.word-animation{
color:black;    
transition:linear 0.5s;
font-size:40px;
}

.word-animation.is-active{
color:#736d71;


    
}

.word-bold{
font-weight:lighter;
transition:linear 1s;
}

.word-bold.is-active{
font-weight:900;
font-style:italic;
}

.color-changing{
color:pink;
transition:2s;
}

.color-changing.is-active{
color:blue;    
}


.movingbg{
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.movingbg h1{
color:rgba(171,134,78,0.1);
  font-size: 80px;
  font-weight: 700;
  background-image: url(downloads/leaf.png);
  background-size:1000px;
  font-family:"Abril Fatface", serif;
  -webkit-background-clip: text;
  animation: background-text-animation 15s linear infinite;
}
@keyframes background-text-animation {
  0%{
    background-position: left 0px top 50%;
  }
  50%{
    background-position: left 1500px top 50%;
  }
  100%{
    background-position: left 0px top 50%;
  }
}

.experience{
font-size:18px;
  font-family:"Abril Fatface", serif;
  color:#e29676;
  margin-top:200px;
}

.inspired{
z-index:200;
position:relative;
top:0;
bottom:0;
margin-top:50px;

}

.span1 {
  color: transparent;
  animation: blur 10s ease-out infinite;
  -webkit-animation: blur 10s ease-out infinite;
}

.span1:nth-child(1) {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
}
.span1:nth-child(2) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.span1:nth-child(3) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.span1:nth-child(4) {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.span1:nth-child(5) {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.span1:nth-child(6) {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.span1:nth-child(7) {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}

@keyframes blur {
  0%    {text-shadow:  0 0 100px #fff; opacity:0;}
  5%    {text-shadow:  0 0 90px #fff;}
  15%   {opacity: 1;}
  20%   {text-shadow:  0 0 0px #fff;}
  80%   {text-shadow:  0 0 0px #fff;}
  85%   {opacity: 1;}
  95%   {text-shadow:  0 0 90px #fff;}
  100%  {text-shadow:  0 0 100px #fff; opacity:0;}
}

@-webkit-keyframes blur {
  0%    {text-shadow:  0 0 100px #fff; opacity:0;}
  5%    {text-shadow:  0 0 90px #fff;}
  15%   {opacity: 1;}
  20%   {text-shadow:  0 0 0px #fff;}
  80%   {text-shadow:  0 0 0px #fff;}
  85%   {opacity: 1;}
  95%   {text-shadow:  0 0 90px #fff;}
  100%  {text-shadow:  0 0 100px #fff; opacity:0;}
}

.random{
transition:2s;
color:green;
}

.random.is-active{
color:#eaeea2;
}

.back-to-top {

    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 100%;
    line-height: 1.5rem;
    color: #8f6552;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}
    
    
      
    @media screen and (max-width: 478px) {
   .back-to-top{
    font-size:20px;   
   }}
    
    .baek-to-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
    }
    
    
    @media screen and (max-width: 478px) {
      .back-to-top::before {
    width:50px;
    height:50px;
      }
    }


.area{

   margin-top:100px;
    background:transparent;
    width: 100%;
   height:100vh;
    
   
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      border-radius:100%;

   background-image: linear-gradient(90deg, rgba(253, 206, 170, 1), rgba(255, 221, 221, 1));;
    overflow: hidden;
}

.circles li{

    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background:rgba(255, 245, 213, 0.8);
    animation: animate 25s linear infinite;
    bottom: -150px;
    clip-path: circle(50%);
　　opacity:70%;
}
    

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    border-radius:20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}

.video{
width:100%;
height:auto;
margin-top:-1000px;
}

.footerwords{
font-size:18px;
padding:24px;
margin-top:10px;
text-align:justify;
}



.timesen h2{
color:red;
width:100%;
font-size:20px;
height:auto;
}

#timer{
width:100%; 
height:auto;
background:#ee7800;
font-weight:900;
}