@charset "utf-8";

/* ■■■共通部分の設定■■■ */
body {
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.7;
  margin: 0 auto;
  padding: 0;
  display:flex;
  flex-direction:column;
  min-height: 100vh;
  background-image: url('./images/background.png');
  background-size: contain;
}

main {
  flex: auto;
}

footer{
  margin-top: 5em;
}

/* ■共通画像の設定■ */
img {
  max-width: 100%;
  transition: filter 1.0s;
  vertical-align: middle;
}

@media (min-width:800px) {
  div#contents {
    width: 60%;
    margin: 0 auto;
  }
}

#wrapper {
  width: 80%;
  margin: 0 auto;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* justify-content: start; */
  padding: 0;
}


li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: 22%;
  /* margin: 0 auto; */
}

/* li:nth-child(2) {
  margin: 0 5%;
} */

.iconinstagram{
  background-color: #0f46b9;
  border-radius: 2em;
}

.iconline{
  /* background-color: #3161c4; */
}
.icontwitter{
  background-color: #469be9;
  border-radius: 2em;
}

.iconx {
  background-color: #000000;
  border-radius: 2em;
}

#imgreserve {
  margin: 2em auto;
  -webkit-filter:drop-shadow(0.5em 0em 0em rgba(78, 152, 238, 1));
  -moz-filter:drop-shadow(0.5em 0.5em 0em rgba(78, 152, 238, 1));
  -ms-filter:drop-shadow(0.5em 0.5em 0em rgba(78, 152, 238, 1));
  filter:drop-shadow(0.5em 0.5em 0em rgba(78, 152, 238, 1));    
}

.dropshadow{
  -webkit-filter:drop-shadow(0.5em 0.5em 0.2em rgba(185, 203, 238, 1));
  -moz-filter:drop-shadow(0.5em 0.5em 0.2em rgba(185, 203, 238, 1));
  -ms-filter:drop-shadow(0.5em 0.5em 0.2em rgba(185, 203, 238, 1));
  filter:drop-shadow(0.5em 0.5em 0.2em rgba(185, 203, 238, 1));  
}