@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Noto+Sans+JP:wght@100..900&display=swap');

html, body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family: "Kaisei Decol", serif;
 }

body{
  background-color: whitesmoke;
}

header{
  width: 100%;
  height: 200px;
  background: #007F89;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  z-index: 1000;
}


.menu-img{
  display: inline-block;
  background-size: cover;
  width: 192px;
  height: 108px;
}

.m1{
  background-image: url(../img/menu/profile.png);
}

.m2{
  background-image: url(../img/menu/gallery.png);
}

.m3{
  background-image: url(../img/menu/contact.png);
}



h2{
  border-bottom: 3px dotted #007F89;
}

.profile a{
  text-decoration: none;
}

main{
  margin: 0;
  padding:50px 150px 150px;
}

a{
  color: blueviolet;
}

section{
  margin: auto;
  padding: 50px 50px 0;
  max-width: 100%;
  text-align: center;
}

h2{
  padding-top: 200px;
}

.profile{
  display:flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 50px;
}

.prof-text{
  text-align: left;
}

.icon{
  background-image: url(../img/profile.png);
  width: 250px;
  height: 250px;
  border-radius:50%;
  background-size: cover;
}

.gallery{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:10px;
}

.thumbnail{
  width: 135px;
  height: 135px;
  background-size: cover;
  background-position: center;
}

.t001{
  background-image: url("../img/thumb/001.png");
}

.t002{
  background-image: url("../img/thumb/002.png");
}


.t003{
  background-image: url("../img/thumb/003.png");
}


.t004{
  background-image: url("../img/thumb/004.png");
}


.t005{
  background-image: url("../img/thumb/005.png");
}


.t006{
  background-image: url("../img/thumb/006.png");
}

.t007{
  background-image: url("../img/thumb/007.png");
}

.t008{
  background-image: url("../img/thumb/008.png");
}


.flyer{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 50px;
  gap:10px;
}

.mini{
  width: 256px;
  height: 144px;
  background-size: cover;
  background-position: center;
}


.f001{
  background-image: url("../img/f001.png");
}

.f002{
  background-image: url("../img/f002.png");
}

.f003{
  background-image: url("../img/f003.png");
}

.f004{
  background-image: url("../img/f004.png");
}


.footer{
  margin: auto;
  padding: 10px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  background: #007F89;
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.menu-img{
  height:192px;
  width:108px;
}



@media screen and (max-width: 768px) {
  body{
    font-size: 24px;
  }
    
  header{
  height: 300px;
}

.menu-img{
  width: 288px;
  height: 162px;
}


  main{
    width: 100%;
    padding:50px 0 150px;
  }
  

  .profile{
    flex-flow: column;  
    justify-content: center;
    align-items: center;
  }


  .menu-img{
    height:320px;
    width:180px;
  }
  
  }

@media screen and (max-width: 685px) {
  

icon{
  width: 250px;
  height: 250px;
  border-radius:50%;
}

}