@import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2&family=Calligraffitti&display=swap');

body{

    margin:0;
    text-align:center;
    background:seashell;
    overflow-x:hidden;

    
   
}

*{
    box-sizing:border-box;
      margin:auto;
      font-family:"Quicksand", sans-serif;
        margin: 0;
    
        padding: 0;


    
}
   
.catfood{
width:250px;
margin-left:800px;
}   
.cover{
 overflow:hidden;
 position:relative;
}   

.top-fix{
margin-top:-400px;    
}
 

p{
font-size:20px;
text-align:justify;  
font-family:"Quicksand", sans-serif;
color:#4e454a;
padding:0.7em;
}

html {
  padding:0px;
 min-height:100%;
  line-height:1.7;
  font-size:0.9rem;
  font-family:"Quicksand", sans-serif;
  overflow-x:hidden;
}

li{
list-style:none;    
}

header{
width:100%;
height:auto;
background:  #c1d8ac;
color:white;
font-size:20px;  
}

.headerspecial{
width:100%;
height:auto;
margin-top:10px;
background:  #c1d8ac;
color:white;
font-size:20px;  
}

.whychooseusbox{
width:100%;
height:auto;
color:#4e454a;
overflow:hidden;
margin-top:-8px;

}


.whychooseusbox h1{
color:black;
padding-top:30px;
font-size:40px;
text-align:center;
padding-top:50px;
margin-bottom:20px;
margin-left:50px;
}

.whychooseusbox ul li{
text-align:justify;   
color:#79c06e;
font-size:30px;
padding:1em;
font-weight:900;
}

.whychooseusbox ul{
margin-bottom:50px;
}

.whychooseusbox p{
color:#4e454a;
font-size:20px;
padding:0.8em;
}

footer{
background:seashell;
width:100%;
height:auto;
margin-top:0px;    
}

.top-logo{
width:200px;
height:auto;   
}
.box1{
width:500px;
height:500px;
background: white;
border:tan 2px solid;
z-index: 2;
border-radius:5px;
opacity:60%;
padding:0.6em;
position:relative;
margin-top:-650px;
margin-left:200px;
margin-bottom:500px;
display:none;
}

.box1 p{
font-size:25px;
color:#946c45;
padding:0.3em;
text-align:justify;
}


.box2{
    width:300px;     
    height:100px;
    background:transparent;
    padding:1em;
    z-index:2;
    position:relative;
    margin-top:50px;
    margin-left:10px;
    margin-bottom:200px;

	background: repeating-linear-gradient(-45deg, #e9dacb
    , #e9dacb    5px, #fff 0, #fff 10px);
    border:tan 2px solid;
    border-radius:5px;

}
    

.box2 p{
    color:#4e454a;
    font-weight:bold;
    font-size:20px;
    animation:nekko 5s linear 1;
    font-family: 'Calligraffitti', cursive;

   
}

@keyframes nekko{
    
}


    
a{
text-decoration:none;
color:#946c45;    
}

a:hover{
color:brown; 
transition:2s;  
}

.firstpics{
width:100%;
height:auto; 
margin-top:0px;   
}

.header1{
background:seashell;
width:100%;
height:auto;
margin-top:-30px;
}    

.hamburger{
    width:40px;
    height:25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
 right:20px;
  z-index: 100;/* 重なり順を一番上に*/
  cursor: pointer;
  margin-top:50px;
  margin-right:-500px;
}

.hamburger span{
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  margin-top:-200px;
  margin-right:1000px;


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

.hamburger span:nth-of-type(2) {/* second border */
    top: 50%;
}

.hamburger span:last-of-type {/* third border */
    top: 100%;
    transform: translateY(6px);
}

.slide-menu{
  background-color:seashell;
  top: 65px;
  width: 100%;
  height:auto;
  left: 0;
  color:black;
  transform: translateX(100%); /* added */
  transition: .5s;/* added */ 
  
  position:relative;
  z-index:110;
  flex-direction:column;
}
.slide-menu li{
  color:black;
  line-height: 300%;
  font-size:20px;
  text-align:justify;
  font-weight:bold;
  padding-left:10px;
}

.slide-menu a{
 color:#e29676;
}

.slider-menu a:hover{
border-bottom:3px #e29676 solid;    
}

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


}

.adoptionbtn{
width:300px;
height:300px;
font-size:20px;
font-weight:900;
height:auto;
margin-top:10px;
color:#946c45;
border:dotted #946c45 2px;   
background:transparent; 
padding:0.8em;
padding-top:1.5em;
padding-bottom:20px;
border-radius:50px;

}

.donationbtn{
    width:300px;
    height:300px;
    font-size:20px;
    font-weight:900;
    height:auto;
    color:#946c45;
    border:dotted #946c45 2px;   
    background:transparent; 
    padding:1em;
    margin-top:40px;
    border-radius:50px;
}

.donationbtn:hover{
background:white;
}

.slider {
    margin-top:-634px;
    position:relative;
	z-index: 1;

	height: 100vh;
}
/*　背景画像設定　*/

.slider-item01 {
    background:url("downloads/Untitled design-19.png");
    opacity:50%;
  
}

.slider-item02 {
    background:url('downloads/Untitled design-23.png');
    opacity:50%;
}

.slider-item03 {
    background:url("downloads/Untitled design-24.png");
    opacity:50%;
}

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

}

/*矢印の設定*/

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

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

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    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:10px;
    height:10px;
    display:block;
    border-radius:50%;
    border:#946c45 0.5px solid;
    background:#ccc;
    pointer-events: auto; /* こうしないとクリックできない */

}

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

#words{
    z-index:6;
    font-size:40px;
    position:relative;
    text-align:right;
    font-weight:900px;
    padding-right:30px;
   top:0;
   left:0;
  color:#4e454a;
  padding-top:18px;;
}

.container1{
width:100%;
height:auto;
padding-left:1em; 
margin-top:2px;
margin-bottom:100px;
}

.container1 h1{
margin-top:20px;    
font-size:40px;
margin-bottom:50px;
}

.container1 p{
text-align:justify;    
padding:0.8em;
}

.container2{
width:100%;
height:auto;
background:white;
}

	.container2::after {
		position:absolute;
		top:-150%;
		left:-50%;
		border-radius:50% 50% / 50% 70%;
		width:200%;
		height:200%;
		content:"";
		background-color:#3168dd;
}

.container1 p{
font-size:20px;
padding-top:5px;
padding:1.5em;
text-align:justify;
}
   
  .container1 h1{
    margin-top:40px;  
  }


.topmatome{
 display:flex;
 margin:0px;

}   


.toppicsbox{
display:flex; 
gap:20px;
margin-left:500px;
}


.toppicsitem{
width:200px;
height:200px;
margin-top:120px;
border:8px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
position:relative;
}

.toppicsitem:nth-child(1){
transform:rotate(10deg);
}

.toppicsitem:nth-child(2){
transform:rotate(40deg);
}


.toppicsitem:nth-child(3){
margin-top:150px;
margin-right:200px;
transform:rotate(20deg);
}


.toppicsitem:nth-child(4){

transform:rotate(150deg);
margin-left:-200px;
margin-top:100px;
    
}

.toppicsitem:nth-child(5){
transform:rotate(50deg);
margin-left:-500px;
margin-top:400px;
}
.container3{
width:100%;
height:auto;
background-image: linear-gradient(90deg, rgba(253, 219, 146, 1), rgba(209, 253, 254, 1));
margin-top:50px;
}    

.newsletter{
width:250px;
height:50px;
background:#9fc24d;
color:transparent;
	-webkit-text-stroke: 0.02em rgb(255, 255, 255);
border:#9fc24d 2px solid;
border-radius: 0.3rem;
border-bottom: 1px solid green;
margin-top:300px;
z-index:50;
position:relative;
font-size:20px;
font-weight:900;
}    

.newsletter:hover{
 opacity:80%;
 border-bottom:none;
 transform:translateY(4px);
}   

.container3 p{
text-align:center;
font-size:30px;    
padding:2em;
}

.beenadopted{
color:white;
font-weight:900;
margin-top:-90px;
font-family:"Quicksand", sans-serif;
}
　
.kittens{
 margin-bottom:20px;
 width:300px;
 height:auto;
}

.email{
z-index:50;
border-radius:5px;
margin-top:-200px;
position:relative;
}

.email2{
border:tan solid 2px; 
border-radius:5px;  
width:400px;
height:50px;
font-size:20px;
margin-left:-740px;
margin-top:-200px;
}


.joinus{
 font-size:25px;
margin-bottom:-300px;
z-index: 50;
color:#6b3f31;
position:relative;
margin-left:-1050px;

}

.footer-logo{
width:250px;  
  
}
  
 
.contactinfobox{
display:flex;
margin-top:0px;
}

.contactinfoitem{
 text-align:justify;
 color:#4e454a;
 font-size:20px;
}

.contactinfoitem th{
border-bottom:#89c997 2px solid;
}

.contactinfoitem:nth-child(1){
    padding:2em;
    padding-top:2em;
}

.contactinfoitem:nth-child(2){
padding:2em;
padding-top:2em;
}

.contactinfoitem:nth-child(3){
    width:200px;
    text-align:center;
    }      




.back-to-top {

    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 100%;
    line-height: 1.5rem;
    color: #6b3f31;
    padding: 0 0 0 35px;
    margin-right:100px;
    margin-top:-100px;
    z-index:300;
    animation:2s shake linear infinite;
}

@keyframes shake {
  0% , 100%{
    transform: rotate(10deg);
}
50%{
    transform: rotate(-10deg);
}
}


.back-to-top::before {
    content:url(downloads/bengal.png);
    position: absolute;
    display:block;
    top: -1px;
    left: 0px;
    transform:scale(0.3);
    transform-origin: left top;
    }
    
.catcontainerbox{
display:flex;   
margin-top:800px;
background:green;
width:100%;
height:auto;
}

.catcontaineritem{
width:100%;
height:auto;
padding:1em;

}    

.catoftheweek{
width:100%;
height:auto;
background-image:linear-gradient(90deg, rgba(253, 177, 170, 1), rgba(240, 226, 226, 1));
margin-right:200px;
margin-top:-5px;

}    

.catoftheweek img{
width:800px;
height:800px;
border-radius:500px;
z-index: 100;
position:relative;

  }


.catoftheweek h2{
 font-family:"Quicksand", sans-serif;
color:white;
font-size:50px;
margin-bottom:50px;
padding-top:50px;
}    

.catoftheweek h3{
color:#6b3f31;
font-size:20px;
z-index:5;
font-size:30px;
position:relative;
}    

.catoftheweek h3 span{
border-bottom:#6b3f31 2px solid;
}

.catoftheweek h4{
color:plum;
 font-size:30px;
 transform:rotate(20deg);  
 right:10px;
 top:-580px;
 left:70px;
 margin-top:40px;
 position:relative;
 z-index:100;
 font-weight:bold;
animation:bounce 2s ease-out infinite;
}

.catoftheweek h4 span{
    color:white;
     }

@keyframes bounce {
    0%, 40%, 60%, 80% {
      transform: rotate(20deg) scale(1.0);
    
    }
    50%, 70% {
     transform: rotate(20deg) scale(0.95);
      
    }
  }

/* 画像の親要素のスタイル */
.catpicbox {
    cursor: pointer;
    height: 500px;
    margin-inline: auto;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    width: 500px;
    margin-bottom:10px;
  }
  /* 画像のスタイル */
  .catpicbox img {
    height: auto;
    left: 0;
    position: absolute;
    width: 100%;
    z-index:50;
  }
  /* 2枚目の画像は最初上に隠す */
  .catpicbox img:last-of-type {
    top: -100%;
    transition: top .7s;
    z-index:50;
  }
  /* hoverすると2枚目の画像が下がる */
  .catpicbox:hover img {
    top: 0;
  }

.availablecats{
width:300px;
height:50px;
border:white dotted 1px;
margin-bottom:0px;
font-size:15px;
border-radius:50px;
margin-left:20px;
z-index: 5;
position:relative;
margin-top:200px;
color:white;
font-weight:900;
background:transparent;

}    

.availablecats:hover{
background:white;
opacity:50%;
color:hotpink;
border:hotpink dotted 1px;
transition:2s;
}



@keyframes maru {
0%{ transform: rotate(0deg); }

100%{ transform: rotate(360deg); }

}

.circle2{
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width:250px;
	height:250px;
	border-radius: 100%;
	background:orange;
    top:-1150px;
    right:-300px;
    opacity:30%;
    z-index:20;
    transform-origin: center bottom;
  margin: 0 auto;
  z-index:10;
  margin-left:700px;
 
}

.circle2::before {
	position: absolute;
	bottom: -150%;
	left: -50%;
	border-radius: 50% 50% / 50% 70%;
	width: 200%;
	height: 200%;
	content: "";
	 background-image: linear-gradient(90deg, rgba(253, 146, 146, 0.49), rgba(221, 253, 223, 1));
	animation: wave-anime linear 6s infinite;
	z-index:10;
}
@keyframes wave-anime {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

.seal{
width:150px;
height:50px;
background:transparent;
border-left:dotted 4px rgba(0,0,0,.1);
border-right:dotted 4px rgba(0,0,0,.1);
background-image:url("downloads/Untitled design-183.png");
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
opacity:50%;
padding:1em;
transform:rotate(20deg);
margin-left:500px;
margin-top:-500px;
margin-bottom:500px;
z-index:3;
position:relative;
}

.seal:nth-child(7){
margin-left:800px;
margin-top:-300px;
}

.seal:nth-child(8){ /* ichiban migi */
margin-left :500px;
margin-top:-530px;
}



.container4{
margin-bottom:260px;
width:100%;
height:100%;
background-image: linear-gradient(90deg, rgba(251, 213, 251, 1), rgba(149, 233, 243, 1));
}

.container4 p{
text-align:center;
color:cornflowerblue;
}   

.container4 a{
color:cornflowerblue;
border-bottom:1px white solid;
animation:nobiru 10s ease-in-out infinite forwards;
animation-direction:alternate;
}   

@keyframes nobiru{
0%{border-bottom:white solid 1px;}
50%{border-bottom:pink solid 1px;}
100%{border-bottom:cadetblue solid 1px;}
}
.container4 h1{
    font-size:40px;
    color:white;
    margin-top:0px;
font-family:"Quicksand", sans-serif;
    padding-top:50px;
    }
    
.container4box{
display:flex; 
gap:20px;
justify-content:center;
}

    
.container4item{
    width: 250px;
    height: 250px;
    border-top: #fff solid 0.4em;
    border-right: #fff solid 0.4em;
    border-bottom: #fff solid 2em;
    border-left: #fff solid 0.4em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-top: 100px;
    opacity:0.8;
    position: relative;
    z-index:1;

}



.insta{
font-size:60px;
  background: linear-gradient(#405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

}

.nav-menu{
margin-bottom:0px;
}

.menu-listspecial{
 display:flex;
justify-content: center;
margin-top:-10px;
}

.menu-list {
display:flex;
justify-content: center;
}

.menu-list a:hover{
color:brown;    
}

.menu-item{
border-left: 1px solid transparent;
position:relative;    
z-index:50;
}

.menu-item:last-child{
 border-right:1px solid transparent;
}

.menu-item:hover .drop-menu-list{
visibility: visible;
}

.menu-item a {
align-items:center;
font-family:"Quicksand", sans-serif;
color:#946c45;
display:flex;
height:50px;
text-decoration:none;
width:120px;  
text-align:justify;
font-weight:900;
z-index: 50;
position:relative;
padding:1em;
}

.menu-item a span{
border-bottom:#946c45 solid 1px;
}    

.menu-item a:hover{
color:tan;    
}

.drop-menu{
position:relative; 
text-align:justify; 

}

.drop-menu-list{
  background: repeating-linear-gradient(-45deg, #c1d8ac
  , #c1d8ac    5px, #fff 0, #fff 10px);
 left:0;
 position:absolute;
 top:100%;
 visibility:hidden;
 width:max-content;
 z-index:1;  

}

.cameracat{
width:800px;
height:auto;
margin-top:20px;
}    

/*レイアウト用CSS*/

.wrapper{
    overflow: hidden;
    }
    
 
    /* fadeUp */
    
    .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    z-index:2;
    position:relative;
    }
    
    @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    
    to {
     opacity: 1;
    transform: translateY(0);
    }
    }
    
    .copyright{
    border-top:#ffe4c4 1px solid;
    text-align:center;    
    color:black;
    font-size:15px;
}    

.catbio{
width:100%;
height:auto;
background:white;
padding:3em;
border-radius:50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}  

.quotationmark{
color:hotpink;
font-size:30px;
}  


.catbio{
width:100%;
height:auto;
background:white;
padding:3em;
border-radius:50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}  

.quotationmark{
color:hotpink;
font-size:30px;
}  

.catlistbox{
display:flex; 
justify-content: space-around; 
flex-wrap:wrap;
gap:20px;
margin:10px;
margin-bottom:5px;
}



.catlistitem{
width:270px;
height:270px;
flex-wrap: wrap;
margin-top:10px;
border:white 10px solid;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}  



.catlistbox :nth-child(1){


  }  



.catlistbox :nth-child(2){

}  

.catlistbox :nth-child(3){

  }  

  .catlistbox :nth-child(4){
    }   

  
  .box{
  width:300px;
  height:300px;
  color:black;
  font-weight:900;
  opacity:80%;
  background:transparent;
  position:relative;
  }
  
  .box:before{
    left:0;
    top:0;
    content:"Kitten";
    color:black;
    padding:0.2em;
    position:absolute;
    background:pink;
    width:60px;
    transform:rotate(20deg);
     border-left:dotted 4px rgba(0,0,0,.1);
border-right:dotted 4px rgba(0,0,0,.1);
    background:radial-gradient(#7bded9 30%, transparent 30%);
  background-size: 20px 20px;
  background-color:white;
  opacity:80%;
  }

  .box-2{
  width:300px;
  height:300px;
  color:black;
  font-weight:900;
  opacity:80%;
  background:transparent;
  position:relative;
  }
  
  .box-2:before{
    left:0;
    top:0;
    content:"Young";
    color:black;
    width:60px;
    padding:0.2em;
    position:absolute;
    transform:rotate(20deg);
    border-left:dotted 4px rgba(0,0,0,.1);
border-right:dotted 4px rgba(0,0,0,.1);
    background:radial-gradient(#bee0c2 30%, transparent 30%);
  background-size: 20px 20px;
  background-color:white;
  opacity:80%;
  }
  .box-3{
  width:300px;
  height:300px;
  color:black;
  font-weight:900;
  opacity:80%;
  background:transparent;
  position:relative;
 
  }
  
  .box-3:before{
    left:0;
    top:0;
    content:"Adult";
    color:black;
    padding:0.2em;
    position:absolute;
    width:60px;
        transform:rotate(20deg);
         border-left:dotted 4px rgba(0,0,0,.1);
border-right:dotted 4px rgba(0,0,0,.1);
    background:radial-gradient(#d1bada 30%, transparent 30%);
  background-size: 20px 20px;
  background-color:white;
  opacity:80%;
  }
  
   .box-4{
  width:300px;
  height:300px;
  color:black;
  font-weight:900;
  background:transparent;
  position:relative;
  z-index:10;
  opacity:50%;
 
  }
  
 .box-4:before{
    left:0;
    top:0;
    content:"Adult";
    color:black;
    padding:0.2em;
    position:absolute;
    width:60px;
        transform:rotate(20deg);
         border-left:dotted 4px rgba(0,0,0,.1);
border-right:dotted 4px rgba(0,0,0,.1);
    background:radial-gradient(#d1bada 30%, transparent 30%);
  background-size: 20px 20px;
  background-color:white;
 
  }


.box-4:after{
right:0;
top:0;
position:absolute;
background:rgba(255,0,0);
width:100px;
height:30px;
color:white;
content:"Adopted ✨";
border-radius:50px;
padding-top:0.5em;
z-index:30;
}


                 
  

.availablecat{
font-size:50px;  
margin-bottom:50px;
color:#946c45;
}

.adoptablepage{
background:seashell;
}


.availablecat{
font-size:50px;  
margin-bottom:50px;
margin-top:50px;
color:#946c45;
}

.welook{
padding:0.8em;
margin-top:50px;
margin-bottom:30px;
}  

.applicationsubmit{
width:300px;
height:80px;
background:#a1d8e2;
border-radius:50px;
border-bottom: #409ecc 2px solid;  
font-size:20px;
padding-top:0.9em;
color:white;
margin-left:550px;
margin-bottom:50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);

}

.applicationsubmit:hover{
  opacity:80%;
  border-bottom:none;
  transform:translateY(4px);
  color:#946c45;
  animation:5s nekobtn linear forwards; 
}   

@keyframes nekobtn{
0%{background:#a1d8e2; opacity:80%;}
50%{background:#89c997;}
100%{background:#a1d8e2;}  
}

.adoptablepage{
background:seashell;
}
.pricebox{
font-size:20px;
text-align:justify; 
border:#946c45 solid 2px;
color:#946c45;
border-radius:10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
opacity:80%;
margin-left:20px;
width:300px;
height:300px;
margin-bottom:50px;
margin-left:550px;
margin-top:100px;
}

.pricebox td{
 color:brown; 

}  

.pricebox th{
padding-left:1em;

}  

.accordion{
    margin-top: 10px;
  }
  
  .accordion__container {
    width: 800px;
    margin-bottom:300px;
  }
  
  .accordion__title {
    border: 1px solid transparent;
    color: grey;
    font-size: 25px;
    padding: .620em .620em .620em 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
    text-align:left;
    border-radius:30px;
  }
  
  .accordion__title::before, .accordion__title::after {
    content: '';
    display: block;
    background-color: transparent;
    position: absolute;
    top: 50%;
    width: 15px;
    height: 2px;
    right: 25px;
  }
  
  .accordion__title::after {
    transform: rotate(90deg);
    transition-duration: .3s;
  }
  
  .accordion__title:hover,
  .accordion__title:active,
  .accordion__title.is-active { 
    background-color:transparent;
  }
  
  .accordion__title.is-active::before {
    opacity: 0;
  }
  
  .accordion__title.is-active::after {
    transform: rotate(0);
  }
  
  .accordion__content {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding: 0 1.5em;
    line-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    font-size:20px;
    color: grey;
    text-align:justify;
  
    transition-duration: .3s;
  }
  
  .accordion__content.is-open {
    padding: .625em 1.5em;
    line-height: normal; /* change to number*/
    height: auto;
    opacity: 1;
  }
  
   
  
  .accordion{
    margin-top: 10px;
  }
  
  .accordion__container {
    width: 800px;
    margin: 0 auto;
  }
  
  .accordion__title {
    background-color: transparent;
    color: #4e454a;
    font-size: 1.25em;
    position: relative;
    cursor: pointer;
    user-select: none;
    text-align:left;
  }
  
    .accordion__title span {
    border-bottom:dotted 1px grey;
    padding-top:5px;
    }
  
  
  .accordion__title::before, .accordion__title::after {
    content: '';
    display: block;
    background-color: black;
    position: absolute;
    top: 50%;
    width: 15px;
    height: 2px;
    right: 25px;
  }
 
  
  .accordion__title::after {
    transition-duration: .3s;
  }
  
  .accordion__title:hover{

  } 
  .accordion__title:active,
  .accordion__title.is-active { 
    background-color:transparent;
  }
  
  .accordion__title.is-active::before {
    opacity: 0;
  }
  
  .accordion__title.is-active::after {
    transform: rotate(0);
  }
  
  .accordion__content {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding: 0 1.5em;
    line-height: 0;
    font-size:20px;
    
    height: 0;
    overflow: hidden;
    opacity: 0;
    color: #4e454a;
    text-align:justify;
  
    transition-duration: .3s;
  }
  
  .accordion__content.is-open {
    padding: .625em 1.5em;
    line-height: 1.6em;
    height: auto;
    opacity: 1;
    color:#4e454a;
  
  }
  
  .text span{
  display: inline-block;
  opacity: 0;
  transform: translateX(-100px);
  transition: all .3s ease .65s;
  z-index:50;
  position:relative;
}
.is-act .text span{
  opacity: 1;
  transform: translateX(0);
}
.text >strong{
  position: relative;
  display: inline-block;
  font-size: 6.3vw;
  transform: scale(0);
}
.is-act .text >strong{
  -webkit-text-stroke-color: transparent;
  -webkit-text-fill-color: #000;
  -webkit-text-stroke-width: 1px;
  animation: zoom 0.5s ease-in both;
  animation-delay: 1.5s;
}
.text >strong::before,
.text >strong::after {
  content: 'but it will change the world for one cat.';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50%;
  width: 100%;
  height: 150%;
  opacity: 0;
  will-change: transform, opacity;
}
.is-act .text >strong::before,
.is-act .text >strong::after{
  opacity: 0.5;
  color: #000;
}
.is-act .text >strong::before{
  animation: wave 0.5s ease-in 0.5s both;
  animation-delay: 1.5s;
}
.is-act .text >strong::after{
  animation: wave 0.5s ease-in 0.05s both;
  animation-delay: 1.8s;
}
@keyframes zoom {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes wave {
  0% {
    opacity: 0.5;
    transform: translateZ(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateZ(0) scale(1.3);
  }
}

.processcontainer{
display:flex;
justify-content:space-around;
}

.processbox{
width:400px;
height:300px;
background:transparent;
border:transparent 2px dotted;
border-radius:50px;
}

.borderspecial{
    background: -webkit-linear-gradient(left,  #f9c89b 50%, transparent 50%);
    background: -moz-linear-gradient(left, #f9c89b 50%, transparent 50%);
    background: linear-gradient(left, 　#f9c89b 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.borderspecial{
    background-position: 0% .5em;
}
padding:1.3em;
}



.processbox p{
color:#4e454a;  
font-size:18px;
}

.processbox:nth-child(2){
padding:1.3em;
}

.processbox:nth-child(3){
padding:1.3em;
height:300px;
}

.catlaptop{
width:100%;
height:auto;
border-radius:50%;
margin-top:30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
opacity:80%;
}

.highmainbox{
padding:2em;
 background-image: linear-gradient(90deg, rgba(157, 241, 253, 0.5), rgba(191, 234, 191, 1));
border:transparent 5px solid;
width:800px;
height:380px;
margin-left:320px;
border-radius:50px;
margin-bottom:100px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.highmainbox p{
color:#4e454a;
}

.highmainbox h1{
color:#409ecc;
padding-bottom:50px;
}

.applicationsubmit2{
width:300px;
height:80px;
background:#a1d8e2;
border-radius:50px;
border-bottom: #409ecc 2px solid;  
font-size:20px;
padding-top:0.9em;
color:white;
margin-left:550px;
margin-bottom:50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);

}

.applicationsubmit2:hover{
  opacity:80%;
  border-bottom:none;
  transform:translateY(4px);
  color:#946c45;
  animation:5s nekobtn linear forwards; 
}   

@keyframes nekobtn{
0%{background:#a1d8e2; opacity:80%;}
50%{background:#89c997;}
100%{background:#a1d8e2;}  
}

.mouse{
width:200px;
margin-right:-800px;
margin-top:-1200px;
animation:nezumi 8s linear infinite;
animation-direction:alternate;
}

@keyframes nezumi{
  0% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(50px, 10px, 0); }
  80% { transform: translate3d(-50px, 10px, 0); }
  100% { transform: translate3d(0, -40px, 0); }
}    


.celebrate {
 margin-left:500px;
  position: relative;
  border-radius: 6px;
  background:transparent;
  width: 200px;
  height: 200px;
}

.celebrate > span {
  display: block;
  position: absolute;
  opacity: 0;
}

.celebrate> span > span {
  display: block;
  width: 100%;
  height: 100%; }

.celebrate > span > span > span {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.movingpaw{
animation:pawpaw 2s ease infinite;
animation-fill-mode: forwards;
animation-direction: alternate;
}

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

.privacypolicyp{
padding:0.8em;    
}

.milo{
position:relative;    
}

.milo:after{
right:0;
top:0;
position:absolute;
background:orange;
width:100px;
height:50px;
color:white;
}

.catlady{
width:800px;
height:800px;
opacity:80%;
border-radius:50px;
margin-bottom:100px;
}

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