@charset "utf-8";
@import url(https://fonts.bunny.net/css?family=andika:400);


/* ベース設定 */
body {
  background-color: rgb(213, 192, 230);
  color: rgb(52, 16, 81);
  font-family: Georgia;
  font-size: 17px;
  line-height: 2;
  margin: 0;
}

.wrap {
  max-width: 900px;
  background-color: rgba(79, 164, 193, .8);
  margin-left: auto;
  margin-right: auto;
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}


/* ヘッダー */
.header {
  font-family: Century, 'Franklin Gothic Medium', sans-serif;
  font-size: 40px;
  padding: 20px 48px;
  background-color: rgb(175, 211, 243);
  text-align: center;
  position: sticky;
}

.title {
  letter-spacing: .3em;
}


/* ヘッダーメニュー */
.menu {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}

.menu .item {
  background-color: rgb(230, 249, 241);
  color: rgb(32, 101, 135);
  text-decoration: none;
  font-size: 24px;
  padding: .5em 1.2em;
  border-radius: 6px;
  transition: background-color .2s, color .2s;
  &:hover {
    /* background-color: rgb(213, 227, 221);
    color: rgb(0, 0, 0); */
    background-color: rgb(44, 125, 165);
    color: rgb(213, 227, 221);
  }
}

.menu .item.v2 {
  /* padding: 0; */
  box-sizing: border-box;
  height: 72px;
}

.menu .item.v2 img {
  display: block;
  height: 100%;
}

.menu .img-item {
  position: relative;
  display: flex;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
  .img-item-img {
    height: 72px;
    vertical-align: bottom;
    pointer-events: none;
  }
  .img-item-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    inset: 0;
    background-color: rgba(44, 125, 165, 0);
    transform: scale(1.2) rotate(5deg);
    color: transparent;
    transition: background-color .2s, color .2s, transform ease-out .2s;
  }

  &:hover .img-item-overlay {
    background-color: rgba(44, 125, 165, .5);
    color: white;
    transform: scale(1);
  }
 
}
 .menu .img-item-img {
    position: relative;
    display: flex;
    height: 72px;
    border-radius: 6%;
    overflow: hidden;
    user-select: none;

  }

/* フッター */
.footer {
  padding: 20px 20px;
  background-color: rgb(213, 192, 230)
}

.footer .footer-wrap {
  /* 革スタイル */
  /* background-color: rgb(72, 66, 64);
  color: rgb(165, 160, 160); */
  background-color: rgb(77, 100, 123);
  color: rgb(255, 255, 255, .5);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 20px;
  border-radius: 10px;
}

.footer .footer-wrap p {
  margin: 0;
  margin-bottom: 36px;
  font-size: 14px;
}

/* メイン */
.main {
  padding: 20px 40px;
  padding-bottom: 60px;
  /* background-color: rgb(158, 98, 98); */
  background-image: url('/background\ drive.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.main h1 {
  font-size: 40px;
  margin-top: 0;
  border-bottom: 2px solid white;
}


/* その他 */
.button {
  background-color: rgb(208, 217, 255);
  color: rgb(208, 46, 149);
  display: block;
  width: 8em;
  text-align: center;
  border-radius: .25em;
  text-decoration: none;
  font-size: 1.5em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}

.top-button {
  background-color: azure;
  color: black;
  display: rgb(46, 166, 102);
  font-size: 1.5em;
  position: fixed;
  bottom: 0;
  right: 2em;
  padding: 1em 2em;
  text-decoration: none;
  font-weight: bold;
}

.photo img {
  display: block;
  width: 100%;
}

.gallery {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
}

.gallery a {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  user-select: none;
}

.gallery a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.gallery a:hover img {
  filter: brightness(0.7);
}

@media (max-width: 640px) {
  main h1 {
    font-size: 36px;
  }

  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

.gallery img {
  display: block;
  width: 100%;
}

@media (max-width: 320px) {
  main h1 {
    font-size: 24px;
  }

  .gallery {
    grid-template-columns: 1fr;
  }
}
.sekine {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.sawak {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.one {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.two {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.three {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.four {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.five {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.six {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.seven {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}
.eight {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.nine {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.ten {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.eleven {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}

.twelve {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}
.thirteen {
 background-color: #509bb7;
 
 color: white;
 text-align: center;
}