@charset "UTF-8";

/*index*/
/*メニューボタン */
button.home,.menu-bth{
  position:fixed;
  top:1px;
  left:1px;
font-size: 14px;
  border-radius:6px;
  padding:5px 5px;
  border:1px solid #5E454B;
  background-color:#F3F0D7;
  box-shadow: inset 1px 1px 1px #fff;
  background: linear-gradient(to bottom, #F3F0D7 0%, #D8B384 100%);
  color:rgb(26, 19, 19);
  z-index:2;
  cursor:pointer;
}
button.home{
   top:2px;
  left:5px

}

input{
  display:block;
  width:40px;
  margin-right:10px;
  margin-left:auto;
}
.sector{
  background:radial-gradient(at 20% 20%,white, #F3F0D7 20%,#D8B384);
  box-shadow:4px -4px 20px white inset;
margin-top:-300px;
width:300px;
height:300px;
border-bottom-right-radius:100%;
overflow:hidden;
transform:rotate(-90deg);

 }
/*index end*/
/*image slider*/
.dataid{
  position:relative;
  top:80px;
  left:250px;
}


div#slider{
 overflow:hidden;
 margin:0 auto;
 display:flex;
 flex-direction:column;
 width:320px;
background-color:#FFF;
height:800px;
}


#years img{
  
  display:inline-block;
  width:320px;
  object-fit:cover;
  opacity:1;
   
}
#years img:first-of-type{
  margin-top:-480px;/*高さ*/
}
img:first-of-type.move{
  animation:move linear 1 forwards;
}

@keyframes move{

100%{width:0;
opacity:0;
}

}


/*imageslider end*/
body{
  margin:0px;
  
  background-color:rgba(243, 240, 215,0.6);
}

.btn_set{
  width:210px;
  margin-top: 10px;
  margin-left:auto;
  margin-right:1px;
}
button{
  padding:5px 10px;
  font-size: 20px;
  border-radius:6px;
  cursor:pointer;
}
button:hover{
  background-color:lightgoldenrodyellow;
  opacity:0.6;
  color:red;
}
footer{
  position:sticky;
  bottom:0;
  font-size: 14px;
  width:100%;
  height:20px;
  background-color:rgba(94, 69, 75,0.6);
}
footer>small{
  padding-top: 2px;
  color:white;
  display:block;
  width:120px;
  margin:0 auto;
}