.flexbox {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap; }
  .flexbox--between {
    justify-content: space-between; }
  .flexbox--left {
    justify-content: left; }

body {
  text-align: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 0px;
  font-family: helvetica;
  background-image: url("../img/top/top_bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative; }

#wrapper {
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden; }

#effect {
  position: absolute;
  width: 100%;
  height: 100vh; }

#effect p {
  margin-top: 10px;
  font-size: 30px;
  color: #F79F81; }

#curtain1 {
  top: 0px;
  position: absolute;
  left: 0px;
  width: 50%;
  height: 100vh;
  z-index: 9999; }

#curtain2 {
  top: 0px;
  position: absolute;
  width: 50%;
  height: 100vh;
  right: 0px;
  z-index: 9999; }

#curtain_buttons input[type="button"] {
  margin-top: 20px;
  width: 150px;
  height: 45px;
  border-radius: 2px;
  color: white;
  background-color: #B43104;
  border: none;
  border-bottom: 6px solid #8A2908; }

.top_roll {
  width: 400px;
  height: auto;
  position: absolute;
  bottom: -200px;
  left: -200px;
  overflow: hidden;
  z-index: 10; }
  @media screen and (min-width: 1000px) {
    .top_roll {
      width: 720px;
      bottom: -360px;
      left: -360px; } }
  @media (max-width: 449.98px) {
    .top_roll {
      bottom: calc(30vh - 200px); } }

.top_roll img {
  width: 100%;
  overflow: hidden;
  transform-origin: 50% 50%;
  -webkit-animation: reload-roll 5s linear infinite;
  animation: reload-roll 5s linear infinite; }

@-webkit-keyframes reload-roll {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes reload-roll {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
.film {
  list-style: none;
  width: clamp(115px, 27vw, 333px);
  z-index: 1;
  -webkit-animation: 10s linear infinite slider;
  animation: 10s linear infinite slider; }
  @media (max-width: 991.98px) {
    .film {
      padding-left: 2rem; } }
  .film li {
    width: clamp(115px, 27vw, 333px);
    height: clamp(95px, 24vw, 301px);
    background: url(../img/top/film.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: relative; }
    .film li figure {
      width: 80%;
      height: clamp(70px, 16vw, 265px);
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      top: clamp(12px, 3.8vw, 48px); }
      .film li figure img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover; }

@-webkit-keyframes slider {
  100% {
    transform: translateY(-50%); } }
@keyframes slider {
  100% {
    transform: translateY(-50%); } }
article {
  padding-top: 4rem;
  z-index: 1000; }
  @media (max-width: 991.98px) {
    article {
      padding-top: 7rem; } }
  @media (max-width: 449.98px) {
    article {
      padding-top: 25vw; } }
  article #youtube {
    width: 58vw;
    min-width: 17rem;
    height: 40vw;
    min-height: 15rem;
    margin: 0 auto; }

.drawer-menu-fp {
  position: absolute;
  right: 50px;
  bottom: 50px;
  z-index: 100; }
  @media (max-width: 449.98px) {
    .drawer-menu-fp {
      position: fixed;
      width: 100vw;
      bottom: 0;
      right: 0;
      left: 0;
      text-align: center;
      background: #fffff1;
      padding: 3rem 5vw;
      box-sizing: border-box; } }
  .drawer-menu-fp h1 span {
    display: block;
    font-size: 80%; }
  @media (max-width: 991.98px) {
    .drawer-menu-fp h1 {
      font-size: clamp(1.8rem, 5vw, 2.2rem); } }
  .drawer-menu-fp ul li {
    display: inline-block;
    padding: 5px 8px;
    border-bottom: 3px solid orangered;
    font-weight: bold; }
    .drawer-menu-fp ul li span {
      display: block;
      font-size: 80%; }

main {
  height: 100vh;
  display: flex; }
  main .left-container {
    flex: 0 0 15%; }
    @media (max-width: 991.98px) {
      main .left-container {
        flex: 0 0 30%; } }
  main .right-container {
    flex: 0 0 70%; }
    @media (max-width: 991.98px) {
      main .right-container {
        position: relative; } }
    @media (max-width: 449.98px) {
      main .right-container {
        flex: 0 0 90%; } }
    @media (max-width: 991.98px) {
      main .right-container article {
        position: absolute;
        text-align: center;
        padding-right: 0; } }
    @media (max-width: 449.98px) {
      main .right-container article {
        left: -6.6rem; } }

@media (min-width: 897px) {
  .home .drawer-menu {
    background: none;
    border-bottom: none; } }

/*# sourceMappingURL=frontpage.css.map */