html {
  height: 100%;
  overflow-x: hidden;
}
 
@font-face {
font-family: 'myfont';
src: url(font/font3.otf);
}

body {
 height: 100%;
  margin: 0;
font-family: 'myfont';
}

h1 {
  font-size: 50px;
   font-weight: normal;
}

h2
  font-size:40px;
}


p {
  color: #ffffee;
  font-size: 15px;
}

header {
  background-color: #333333;
  color: #ffffff;
font-size: 30px;
padding :20px;
 position: relative;
text-align: center;
}

header.tab {
padding: 10px 0 5px;
position: fixed;
bottom: 0;
  left: 0;
  right: 0;
z-index: 9;
background-color: rgb(30 30 30 / 0.7);
border-radius: 50px;
margin:10px;
backdrop-filter: blur(5px);
}

img.tab{
width: 15%;
max-width: 100px;
}

ul li, ol li {
 padding: 0px;
  list-style-type: none!important;
}

hr {
height: 2px;
background-color: #666;
 border: none;
margin:30px 0;
}

.btn{
padding: 10px;margin: 15px 0;
text-align: center;
background-color: #fff;
border-radius: 100vh;
display: block;
color: #333;
font-size: 30px;
text-decoration: none;
}


.nadeshiko {
  background-color:#ffb7d2;
  color: #fff;
  padding: 20px;
}


.buildlist{
  display: grid;
  column-gap: 20px;
  row-gap: 20px;
}

.img{
width:100%;
border-radius:15px;
}