@charset "utf-8";

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font-family: YakuHanJP_Noto, 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: justify;
  word-break: break-all;
  overflow-wrap: break-word;
  background-image: url(images/bg.webp);
  background-size: cover;
  background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Dela Gothic One", sans-serif;
  font-size: 2.6rem;
  text-align: center;
}
h2 {
  border-bottom: 5px solid #000;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.photo {
  text-align: center;
}

video {
  max-width: 100%;
  height: auto;
  display: block;
}

.contentsWrap {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.4);
  max-width: 1000px;
  margin: auto;
}

header {
  background-color: black;
  color: white;
  padding: 1.0em;
}

nav ul {
  text-align: center;
  display: flex;
  justify-content: space-between;
}

main {
  padding: 2.0rem;
  display: grid;
  gap: 3.0rem;
}
main article {
  display: grid;
  gap: 1.2rem;
}
main article#about .aboutSection {
  grid-template-columns: repeat(auto-fit, minmax(256.5px, 1fr));
  gap: 2.0rem;
}
main article#about div {
  display: grid;
  gap: 0.8rem;
  align-self: flex-start;
}

footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 2.0rem;
}

footer div {
  max-width: 1000px;
  margin: auto;
  display: grid;
  gap: 1.2rem;
}

footer div .snsLink {
  display: flex;
  justify-content: space-evenly;
}

/* Show ==================== */
#show .showSection {
  display: grid;
  gap: 2.0rem;
  grid-template-columns: repeat(auto-fit, minmax(256.5px, 1fr));;
}
#show .showSection section h3 {
  font-family: YakuHanJP_Noto, 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 1.0rem;
  text-align: left;
}
#show .showSection section h3 time::after {
  content: " || ";
}
#show .showSection section a {
  transition: 0.7s;
  display: block;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}
#show .showSection section a:hover {
  filter: brightness(130%);
  transform: scale(1.04);
}
#show .showSection section .btn {
  text-align: center;
  background-color: black;
  color: white;
  padding: 0.5em;
}
#show .showSection section:last-child {
  text-align: right;
  align-self: end;
  font-size: 2.0em;
}
/* New */
#show .showSection section.new a {
  position: relative;
}
#show .showSection section.new a::before {
  content: "New";
  font-weight: bold;
  font-size: 2.4rem;
  display: grid;
  padding: 0.3em;
  border-radius: 50%;
  text-align: center;
  align-items: center;
  background-color: #e6007f;
  color: white;
  border: 4px solid yellow;
  position: absolute;
  right: -8px;
  top: -16px;
  animation: purun 1.0s linear 0s infinite;
}
@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

main {
  position: relative;
}
#schedule .loop {
  font-size: 2.8rem;
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  max-width: 1004px;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.8);
  z-index: 9999;
}
#schedule .loop.l01 {
  bottom: 130px;
  transform: skewY(-4deg);
}
#schedule .loop.l02 {
  bottom: 160px;
  transform: skewY(6deg);
}
.loop p {
  white-space: nowrap;
  padding: 0.2em 0;
}
.loop.l01 p {
  animation:
  loop 40s linear infinite,
  ten 2s linear infinite
  ;
}
.loop.l02 p {
  animation:
  loop 30s linear infinite,
  ten 4s linear infinite
  ;
  animation-direction: reverse;
}
@keyframes loop {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ten {
  0% {
    background-color: black;
    color: yellow;
  }
  50% {
    background-color: yellow;
    color: black;
  }
  100% {
    background-color: black;
    color: yellow;
  }
}


@media ( width > 800px ) {
  body {
    font-size: 2.0rem;
  }
  nav ul {
    max-width: 600px;
    margin: auto;
  }
  main {
    padding: 5.0rem;
    gap: 5.0rem;
  }
}