:root {
  --cl_brown: #6f3222;
  --cl_red: #e60f0f;
}

html {
  overflow-x: hidden;
}

html.noScroll {
  overflow: hidden;
}

.main {
  font-family: "Zen Maru Gothic", sans-serif;
  position: relative;
  overflow-x: hidden;
}

.noto {
  font-family: 'Noto Sans JP', serif;
}

.mv {
  background-color: var(--cl_red);
}

.mv_contents {
  display: block;
  max-width: 1010px;
  margin: 0 auto;
  position: relative;
  width: 94%;
}

.floating_btn {
  position: absolute;
  top: 85px;
  right: -114px;
  max-width: 309px;
  width: 100%;
}

.floating_btn.is_fixed {
  position: fixed;
  top: unset;
  right: 2%;
  bottom: 2%;
  z-index: 10;
}

.howto {
  background-image: url("../img/howto_bg.jpg");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  padding: 138px 0 200px;
}

.container {
  max-width: 1010px;
  margin: 0 auto;
  width: 94%;
}

.collaboration {
  background-color: var(--cl_red);
  padding: 140px 0 330px;
  position: relative;
}

.collaboration::before {
  background-image: url("../img/collaboration_bg_top.png");
  background-size: 1920px;
  background-repeat: repeat-x;
  background-position: center;
  content: "";
  position: absolute;
  right: 0;
  top: -64px;
  left: 0;
  margin: auto;
  height: 91px;
  width: 100%;
}

.collaboration::after {
  background-image: url("../img/collaboration_bg_bottom.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: repeat-x;
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  margin: auto;
  height: 233px;
  width: 100%;
}

.collaboration_mov {
  border: 2px solid #fff;
  position: relative;
  margin: 0 auto;
  width: 75%;
}

.collaboration_mov:before {
  content:'';
  display: block;
  padding-top: 56.25%;
}

.collaboration_mov iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.collaboration_btn {
  display: block;
  margin: 0 auto 8.8%;
  width: 66.337%;
}

.interview {
  position: relative;
  width: 100%;
}

.interview_btn {
  display: block;
  position: absolute;
  right: 0;
  bottom: 17%;
  left: 0;
  margin: auto;
  width: 28.12%;
}

.drama {
  background-color: var(--cl_red);
  padding: 140px 0 223px;
  position: relative;
}

.drama::after {
  background-image: url("../img/drama_bg_bottom.jpg");
  background-size: 1920px;
  background-position: center;
  background-repeat: repeat-x;
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  margin: auto;
  height: 80px;
  width: 100%;
}

.drama_head {
  margin: 0 0 10%;
}

.drama_lists {
  display: flex;
  justify-content: space-between;
  display: none;
}

.campaign {
  background-color: #ffe4e1;
  padding: 100px 0 120px;
}

.application {
  background-image: url("../img/howto_bg.jpg");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  padding: 116px 0 190px;
  position: relative;
}

.application::after {
  background-image: url("../img/original_bg_head.png");
  background-size: 1920px;
  background-position: center;
  background-repeat: repeat-x;
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  margin: auto;
  height: 93px;
  width: 100%;
}

.application_item {
  position: relative;
}

.application_btn {
  display: block;
  position: absolute;
  right: 0;
  bottom: 6%;
  left: 0;
  margin: auto;
  width: 67.328%;
}

.original {
  background-color: #ffe4e1;
  padding: 100px 0 120px;
}

.original_head {
  display: none;
}

.original_img {
  display: none;
}

.original_package {
  display: block;
  position: relative;
  width: 100%;
}

.original_btn {
  position: absolute;
  right: 0;
  bottom: 2%;
  left: 0;
  margin: auto;
  width: 33.664%;
}

.modal {
  background-color: rgb(0 0 0 / .8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  height: 100%;
  width: 100%;
  z-index: 190;
}

.modal.is_active {
  opacity: 1;
  visibility: visible;
}

.modal_container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  width: 94%;
}

.modal_inner {
  background-color: #fff;
  border-radius: 70px;
  box-sizing: border-box;
  height: 82vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px;
}

.modal_contents {
  border: 2px solid var(--cl_red);
  border-radius: 64px;
  padding: 100px 40px 80px;
  position: relative;
  overflow: hidden;
}

.modal_profile {
  display: flex;
}

.modal_profile_contents {
  width: 32.305936073%;
}

.modal_profile_texts {
  width: 67.12328767%;
}

.modal_sns_lists {
  display: flex;
  align-items: center;
  gap: 8%;
  margin: 0 0 7%;
}

.modal_sns_lists > li:nth-of-type(1) {
  width: 14%;
}

.modal_sns_lists > li:nth-of-type(2) {
  width: 15.2%;
}

.modal_sns_lists > li:nth-of-type(3) {
  width: 14.85%;
}

.modal_link_buttons {
  display: flex;
  gap: 4%;
  margin: 0 0 8%;
}

.modal_weblink_btn {
  display: block;
  width: 39.631423%;
}

.modal_dl_btn {
  display: block;
  width: 52.35317%;
}

.modal_link_head {
  margin: 0 0 4%;
  width: 75%;
}

.modal_link_btn {
  display: block;
  width: 40%;
}

.modal_close_icon {
  position: absolute;
  top: -44px;
  right: 0;
  width: 4.2%;
}

.modal_close_btn {
  position: absolute;
  right: 0;
  bottom: 1.4%;
  left: 0;
  margin: auto;
  width: 11%;
}

@media screen and (max-width: 1280px) {
  .mv_contents {
    max-width: 78.90625vw;
  }
  
  .floating_btn {
    top: 6.640625vw;
    right: -8.90625vw;
    max-width: 24.140625vw;
  }
  
  .howto {
    padding: 10.78125vw 0 15.625vw;
  }
  
  .container {
    max-width: 78.90625vw;
  }
  
  .collaboration {
    padding: 10.9375vw 0 25.78125vw;
  }
  
  .collaboration::before {
    background-size: 150vw;
  }
  
  .collaboration::after {
    bottom: -0.078125vw;
    height: 18.203125vw;
  }
  
  .drama {
    padding: 10.9375vw 0 17.421875vw;
  }
  
  .drama::after {
    background-size: 150vw;
    bottom: -0.078125vw;
    height: 6.25vw;
  }
  
  .campaign {
    padding: 7.8125vw 0 9.375vw;
  }
  
  .application {
    padding: 9.0625vw 0 14.84375vw;
  }
  
  .application::after {
    background-size: 150vw;
    bottom: -0.15625vw;
    height: 7.265625vw;
  }
  
  .original {
    padding: 7.8125vw 0 9.375vw;
  }

  .modal_container {
    max-width: 78.125vw;
  }
  
  .modal_inner {
    border-radius: 5.46875vw;
    padding: 1.5625vw;
  }
  
  .modal_contents {
    border: 0.15625vw solid var(--cl_red);
    border-radius: 5vw;
    padding: 7.8125vw 3.125vw 6.25vw;
  }

  .modal_close_icon {
    position: absolute;
    top: -3.4375vw;
    right: 0;
    width: 4.2%;
  }
}

@media screen and (max-width: 768px) {
  .mv_contents {
    max-width: 100%;
    width: 100%;
  }

  .floating_btn,
  .floating_btn.is_fixed {
    position: fixed;
    top: unset;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    z-index: 100;
  }

  .floating_btn.no_display {
    display: none;
  }

  .howto {
    background-image: url("../img/howto_bg_sp.jpg");
    padding: 14% 0 24%;
    background-position: center top;
  }

  .container {
    max-width: 100%;
    width: 90%;
  }

  .collaboration {
    padding: 18% 0 44%;
  }

  .collaboration::before {
    background-image: url("../img/collaboration_bg_top_sp.png");
    background-size: 100%;
    top: -2%;
    height: 8vw;
    width: 100vw;
  }

  .collaboration::after {
    background-image: url("../img/collaboration_bg_bottom_sp.jpg");
    background-size: 100%;
    bottom: -0.078125vw;
    height: 26vw;
    width: 100vw;
  }

  .collaboration_mov {
    width: 100%;
  }

  .collaboration_btn {
    margin: 0 auto 10%;
    width: 100%;
  }

  .interview_btn {
    bottom: 15%;
    width: 31.3%;
  }

  .drama {
    padding: 16% 0 12%;
  }

  .campaign {
    padding: 18% 0 18%;
  }

  .application {
    background-image: url("../img/howto_bg_sp.jpg");
    padding: 14% 0 24%;
    background-position: center top;
  }

  .application::after {
    background-image: url("../img/original_bg_head_sp.png");
    background-size: 100%;
    bottom: 0%;
    height: 8vw;
    width: 100vw;
  }

  .application_btn {
    bottom: 6%;
    width: 90%;
  }

  .original {
    padding: 8% 0;
  }

  .original .container {
    width: 100%;
  }

  .modal_container {
    max-width: 100%;
    width: 90%;
  }

  .modal_inner {
    border-radius: 9.333333vw;
    padding: 3%;
    height: 86vh;
  }

  .modal_contents {
    border: 0.266667vw solid var(--cl_red);
    border-radius: 8vw;
    padding: 16% 4%;
  }

  .modal_profile {
    flex-direction: column;
  }

  .modal_profile_contents {
    width: 100%;
  }

  .modal_sns_lists {
    justify-content: center;
    gap: 6%;
    margin: 0 0 8%;
  }

  .modal_sns_lists > li:nth-of-type(1) {
    width: 11.814%;
  }
  
  .modal_sns_lists > li:nth-of-type(2) {
    width: 13.204%;
  }

  .modal_sns_lists > li:nth-of-type(3) {
    width: 13.03%;
  }

  .modal_link_buttons {
    justify-content: center;
    gap: 4%;
    margin: 0 0 6%;
  }

  .modal_weblink_btn {
    width: 32.012%;
  }

  .modal_dl_btn {
    width: 41.35317%;
  }

  .modal_profile_contents {
    margin: 0 0 12%;
    width: 100%;
  }

  .modal_profile_texts {
    width: 100%;
  }

  .modal_link {
    display: flex;
    align-items: center;
    gap: 2%;
    width: 90%;
    margin: 0 auto;
  }

  .modal_link_head {
    margin: 0;
    width: 68%;
  }

  .modal_link_btn {
    width: 31%;
  }

  .modal_close_icon {
    position: absolute;
    top: -5%;
    right: 0;
    width: 8.2%;
  }

  .modal_close_btn {
    bottom: .7%;
    width: 24.3%;
  }
}