@import url("https://fonts.googleapis.com/css2?family=Hina+Mincho&family=Kiwi+Maru&display=swap");
body {
  text-align: center;
  margin: 0;
  font-family: "Kiwi Maru", sans-serif;
}
header {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0.5vh;
  box-shadow: 0 0.5vh 0.5vh 0 gray;
}
#main {
  box-shadow: 0 0.5vh 0.5vh 0 gray;
  margin-bottom: 0.5vh;
}
footer {
  background-color: #ccc;
}
.slide-container {
  overflow: hidden;
  width: 100%;
  display: inline-block;
  position: relative;
}
.slide {
  object-fit: contain;
  position: absolute;
  left: 50%;
  animation: slide 70s infinite both;
  height: 100%;
}
#counter {
  margin: auto;
}
#items {
  display: flex;
  margin:0 1vw;
}
.pic_exp{
  margin:0.5vw
}
#item_exp > p{
  margin-bottom: 0;
}
@keyframes slide {
  0% {
    transform: translateX(-250%);
    filter: blur(10px);
    display: none;
  } /*0s*/
  12.86% {
    display: initial;
    transform: translateX(-250%);
    filter: blur(10px);
  } /*9s*/
  15.71% {
    transform: translateX(-150%);
    filter: blur(10px);
  } /*11s*/
  27.14% {
    transform: translateX(-150%);
    filter: blur(10px);
  } /*19s*/
  30% {
    transform: translateX(-50%);
    filter: blur(0);
  } /*21s*/
  41.43% {
    transform: translateX(-50%);
    filter: blur(0);
  } /*29s*/
  44.29% {
    transform: translateX(50%);
    filter: blur(10px);
  } /*31s*/
  55.71% {
    transform: translateX(50%);
    filter: blur(10px);
  } /*39s*/
  58.57% {
    transform: translateX(150%);
    filter: blur(10px);
  } /*41s*/
  58.58% {
    display: none;
  }
  100% {
    display: none;
  }
}

@media (max-aspect-ratio: 1/1) {
  body {
    font-size: 3vw;
  }
  header {
    height: calc(200vw / 7);
    font-size: 10vw;
    background-image: url("img/header_mobile.jpg");
    background-position-y: 60%;
  }
  h1 {
    font-size: 4.46vw;
  }
  #firstLine {
    position: relative;
    right: 5vw;
  }
  #secondLine {
    position: relative;
    left: 5vw;
  }
  .slide-container {
    height: 50vh;
  }
  .X {
    width: 10vw;
    margin: 10vw;
  }
  .Instagram {
    width: 10vw;
    margin: 10vw;
  }
  #copyright {
    font-size: 2vw;
  }
  #image {
    font-size: 2vw;
  }
  #items{
    flex-flow: column;
    justify-content: center;
  }
  #items img {
    width:93vw;
  }
  #item_exp > p{
    padding-bottom: 3vw;
  }
}
@media (min-aspect-ratio: 1/1) {
  body {
    font-size: 1.5vw;
  }
  header {
    height: calc(100vw / 7);
    font-size: 5vw;
    background-image: url("img/header.png");
  }
  h1 {
    font-size: 2.23vw;
  }
  br.mobile {
    display: none;
  }
  .slide-container {
    height: 100vh;
  }
  .X {
    width: 5vw;
    margin: 5vw;
  }
  .Instagram {
    width: 5vw;
    margin: 5vw;
  }
  #copyright {
    font-size: 1vw;
  }
  #image {
    font-size: 1vw;
  }
  #items{
    justify-content: center;
  }
  #items img {
    width: calc(95vw / 3);
  }
  #item_exp > p{
    padding-bottom: 1.5vw;
  }
}