@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* ======================================

  "LVPro. SUPER HARD" Styles

====================================== */
body {
  color: #ffffff;
  background-color: #000000;
}

/*
  Main Visual
====================================== */
.main-visual {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: calc(9 / 16 * 100%);
  overflow: hidden;
}
.main-visual video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

/*
  Guide Intro
====================================== */
.guide-intro {
  font-family: "Noto Serif JP", serif;
  font-size: max(calc(58 / 1920 * 100vw), 21px);
  font-weight: 300;
  letter-spacing: .05em;
  display: grid;
}
.guide-intro > * { grid-area: 1 / 1; }
.guide-intro > .inner {
  width: 90%;
  display: grid;
  place-content: center;
}
.guide-intro h2 {
  font-weight: 300;
  text-align: center;
  margin: 0 0 calc(150 / 1920 * 100%);
}
.guide-intro dl dt {
  font-size: max(calc(72 / 58 * 1em), 27px);
  text-align: center;
  margin: 0 0 calc(150 / 1920 * 100%);
}
.guide-intro dl dd { line-height: 1.5; }
.guide-intro > figure img {
  width: 100%;
  height: auto;
  opacity: .21;
}

/*
  Guide Summary
====================================== */
.guide-summary > div {
  font-weight: 300;
  display: grid;
  padding: 5% 0 0;
}
.guide-summary > div > * { grid-area: 1 / 1; }
.guide-summary > div > .inner {
  position: relative;
  z-index: 1;
  width: 86%;
  place-content: center;
}
.guide-summary > div small { font-size: .85em; }
.guide-summary > div dl {
  font-size: max(calc(42 / 1920 * 100vw), 16px);
  margin: 0 0 1em;
}
.guide-summary > div dl dt { margin: 0 0 .5em; }
.guide-summary > div dl dd ul li {
  text-indent: -1em;
  padding: 0 0 0 1em;
  line-height: 1.5;
}
.guide-summary > div dl dd ul li::before { content: "・"; }
.guide-summary > div p {
  font-size: max(calc(36 / 1920 * 100vw), 14px);
  line-height: 1.5;
}
.guide-summary > div p:last-of-type { margin: 1em 0 0; }
.guide-summary > div figure img {
  width: 100%;
  height: auto;
  opacity: .21;
}

@media screen and (max-width:768px) {
  .guide-summary > div > .inner { width: 90%; }
}

/*
  Inquiry
====================================== */
#inquiry { color: #342a27; }
#inquiry .heading { font-weight: 400; }