@charset "utf-8";

:root {
  --f-1: "Zen Maru Gothic", serif;
}

body {
  background-image: url(../img/mimi/bg2.gif);
  background-color: rgb(222, 254, 240);
  color: #000618;
}

/* ヘッダー */
header {
  text-align: center;
  background-image: url(../img/mimi/bg.gif);
  background-repeat: repeat-x;
  background-position-y: -4px;
  padding-top: 90px;
}


h1 {
  margin: 0 auto;
  width: 450px;
  max-width: 93vw;
  transition-duration: 0.1s;
}

h1:hover {
  filter: brightness(1.06);
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 10px;
  justify-content: center;
  text-transform: uppercase;
  font-family: var(--f-1);
}

header nav ul {
  margin: 2rem auto 3rem;
}

section nav ul {
  margin: 0 auto;
  text-align: center;
}

nav ul li {
  cursor: pointer;
}

nav ul li div {
  box-shadow: 0 0 4px rgb(158, 158, 158);
  width: 60px;
  padding: 6px 0;
  border-radius: 100px;
  transition-duration: .2s;
}

nav ul li img {
  height: 18px;
  margin: 0 auto;
}

nav ul li:nth-child(1) div {
  background-color: rgb(235, 255, 230);
}

nav ul li:nth-child(2) div {
  background-color: rgb(255, 245, 230);
}

nav ul li:nth-child(3) div {
  background-color: rgb(230, 255, 254);
}

/* header nav ul li:nth-child(4) div {
  background-color: rgb(255, 255, 230);
} */

nav ul li:nth-child(4) div {
  background-color: rgb(254, 230, 255);
}

nav ul li:hover div {
  filter: brightness(1.1);
}

/* メイン */
.emoji {
  font-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* フッター */
footer {
  border-top: 5px dashed rgb(222, 254, 240);
  margin-top: 100px;
  padding: 66px 0 0.5em;
  font-size: small;
  background-color: #FFB2CC;
}

footer article {
  width: 970px;
  max-width: 93%;
  margin-left: auto;
  margin-right: auto;
}
footer h5{
  width: 400px;
  margin: 44px auto 50px;
  max-width: 93vw;
  transition-duration: 0.1s;
}
footer h5:hover {
  filter: brightness(1.3);
}
.okareco {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  margin: auto 0;
  opacity: 0.6;
}

.okareco a:hover {
  opacity: 0.7;
}

@media (max-width: 800px) {

  .okareco {
    display: block;
    text-align: center;
  }
}