@import url("https://fonts.googleapis.com/css2?family=Shippori+Antique&family=Shippori+Mincho+B1:wght@400;700&display=swap");
* {
  --base-width: min(1200px, 90vw);
  --half-width: min(1000px, 75vw);
  --short-width: min(800px, 60vw);
  --very-short-width: min(600px, 45vw);
  --font-gothic: "Shippori Antique", sans-serif;
  --font-mincho: "Shippori Mincho B1", serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  overflow-x: hidden;
  background-color: rgb(22, 16, 23);
  font-family: var(--font-mincho);
  line-height: 1.8;
}

html {
  font-size: max(7pt + 1vw, 18px);
}

a {
  text-decoration: none;
}

.parallax {
  position: relative;
  height: 100vh;
  perspective: 1px;
  perspective-origin: 50% 100%;
  overflow-x: hidden;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform-origin: center;
}

.parallax__layer--back {
  background-image: url("./r/background.png");
  transform: translateZ(-2px) scale(3) translateY(-40dvh); /* Slowest scroll */
}

.parallax__layer--clouds {
  background-image: url("./r/clouds.png");
  transform: translateZ(-1.5px) scale(2.5) translateY(-20dvh); /* Medium speed scroll */
}

.parallax__layer--objects {
  background-image: url("./r/objects.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateZ(-1px) scale(2); /* Medium speed scroll */
}

.parallax__layer--base {
  transform: translateZ(0) translateY(50dvh);
  height: auto;
}

.content {
  position: relative;
  text-align: center;
  top: 40%;
  color: white;
  width: 100%;
}
.content > img {
  width: var(--base-width);
  margin: 0 auto;
  display: block;
}
.content > section {
  margin-bottom: 5rem;
}
.content > section h2 {
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
}
.content > section p {
  margin: 0 auto;
  font-size: 0.9rem;
  text-align: center;
}
.content > section > p {
  width: var(--very-short-width);
}
.content > section.two-block {
  display: flex;
}
.content > section.two-block > * {
  width: 50%;
  margin: 0;
}
.content > section.two-block > div:first-child {
  width: min(45%, 600px);
  margin-left: calc(50% - min(45%, 600px));
}
.content > section.two-block > div:nth-child(2) > img {
  width: 80%;
  margin-left: 20%;
}
.content > section.two-block > div:nth-child(2).one-image {
  margin-top: 5rem;
}
.content > section > dl {
  width: var(--half-width);
  margin: 0 auto;
  border-bottom: 1px solid white;
  padding: 2rem 0;
  display: flex;
  justify-content: flex-start;
  font-size: 0.9rem;
}
.content > section > dl > dt {
  width: 10rem;
  text-align: left;
}
.content > section > dl > dd {
  width: calc(100% - 10rem);
  text-align: left;
}
.content > section > p.larger {
  font-size: 1.8rem;
  margin-top: 1rem;
}
.content > section#participation > dl > dt {
  width: 50%;
}
.content > section#participation > dl > dd {
  text-align: right;
  width: 50%;
}
.content > section#organizer > dl > dt {
  width: 50%;
}
.content > section#organizer > dl > dd {
  width: 50%;
}
.content > section > a {
  color: white;
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}
.content > section > a.cta {
  border-radius: 2rem;
  width: 10rem;
  background-color: rgb(135, 46, 36);
  padding: 0.5rem 0;
  margin-left: auto;
  margin-right: auto;
}
.content > section > iframe {
  border: 0;
  width: var(--base-width);
  height: calc(var(--base-width) * 0.5);
}
.content > section > img { /* access */
  width: var(--short-width);
  display: block;
  margin: 0 auto 4rem auto;
}
.content > h1 {
  font-size: 2.2rem;
  width: 100vw;
  height: 20vw;
  display: block;
  text-align: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  margin-bottom: 5rem;
}
.content > h1#contents-title {
  background-image: url("./r/bg-contents.png");
}
.content > h1#outline-title {
  background-image: url("./r/bg-outline.png");
}
.content > h1#participation-title {
  background-image: url("./r/bg-participation.png");
}
.content > h1#access-title {
  background-image: url("./r/bg-access.png");
}
.content > h1 > div {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}

.float {
  position: absolute;
  right: 5rem;
  bottom: 10rem;
  background-color: rgba(135, 46, 36, 0.8);
  width: 6rem;
  height: 6rem;
  border-radius: 3rem;
  text-align: center;
}
.float > a {
  color: white;
  font-size: 0.8rem;
  transform: translateY(-50%);
  top: 50%;
  position: absolute;
  width: 100%;
  left: 0;
}

/*=========Maximum 980px ===========*/
/*=========Maximum 768px ===========*/
@media screen and (max-width: 768px) {
  html {
    font-size: 16pt;
  }
  .content > img {
    margin-bottom: 50dvh;
  }
  .content > section > h2 {
    width: 90%;
    margin-left: 5%;
    text-align: center;
  }
  .content > section > p {
    width: 90%;
  }
  .content > section.two-block {
    flex-wrap: wrap;
  }
  .content > section.two-block > div:first-child, .content > section.two-block div:nth-child(2) {
    width: 90%;
    margin-left: 5%;
  }
  .content > section.two-block > div:nth-child(2) {
    margin-top: 5rem;
  }
  .content > section.two-block > div:nth-child(2) > img {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }
  .content > section > dl {
    padding: 0.5rem 0;
  }
  .content > section > a, .content > section img {
    width: 90%;
    margin-left: 5%;
  }
  .float {
    right: 10px;
    bottom: 10px;
  }
}
/*=========Maximum 576px ===========*/
@media screen and (max-width: 576px) {
  html {
    font-size: 14pt;
  }
}
/*=========Maximum 460px ===========*/
@media screen and (max-width: 460px) {
  html {
    font-size: 12pt;
  }
}
/*=========Maximum 375px ===========*/
@media screen and (max-width: 375px) {
  html {
    font-size: 11pt;
  }
}/*# sourceMappingURL=style.css.map */