@use "sass:math";
img {
  width: 100%;
  height: auto; }

.l_container_2__bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; }

body {
  min-height: 100dvh;
  height: auto;
  background: url("../img/bg.webp") no-repeat center center/cover; }

footer.g_footer_1 {
  position: sticky;
  top: 100%; }

.main {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center; }

.container {
  width: 100%;
  position: relative; }
  .container__inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 16px;
    padding-top: 200px;
    padding-bottom: 200px; }
    @media (max-width: 1280px) {
      .container__inner {
        font-size: 1.25vw;
        padding-top: 15.625%;
        padding-bottom: 15.625%; } }
    @media (max-width: 750px) {
      .container__inner {
        padding-top: 26.6666666667%;
        padding-bottom: 26.6666666667%; } }

.pageTitle {
  font-size: 1.125em;
  text-align: center;
  width: 25%;
  margin: 0 auto; }
  @media (max-width: 750px) {
    .pageTitle {
      width: 42.6666666667%; } }

.contentsTitle {
  text-align: center;
  width: 60%;
  margin: 0 auto;
  margin-top: 8.828125%; }
  @media (max-width: 750px) {
    .contentsTitle {
      width: 50.8%;
      margin-top: 15.0666666667%; } }

.generated_contentsWrapper {
  width: 67.1875%;
  margin: 0 auto;
  margin-top: 7.421875%; }
  .generated_contentsWrapper.isVideo .generated_img {
    display: none; }
  .generated_contentsWrapper.isVideo .generated_video {
    display: block; }
  @media (max-width: 750px) {
    .generated_contentsWrapper {
      width: 95%;
      margin-top: 12.6666666667vw; } }

.generated_img {
  width: 100%; }
  .generated_img img {
    border: 10px solid #fff;
    box-sizing: border-box; }

.generated_video {
  display: none;
  width: 95%;
  margin: 0 auto; }
  .generated_video video {
    width: 100%;
    box-sizing: border-box;
    border: 10px solid #fff; }
    @media (max-width: 750px) {
      .generated_video video {
        border-width: 1.3333333333vw; } }

.note {
  text-align: center;
  font-size: 1.25em;
  margin-top: 1em; }
  @media (max-width: 750px) {
    .note {
      font-size: 3.4vw; } }

.downloadBtn {
  width: 41.8604651163%;
  margin: 0 auto;
  margin-top: 5.5813953488%; }
  @media (max-width: 750px) {
    .downloadBtn {
      width: 90%;
      margin-top: 6.4%; } }

.snsWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10% 0; }
  @media (max-width: 750px) {
    .snsWrapper {
      margin: 11.4666666667% 0; } }

.snsWrapper__txt {
  font-size: 1.5em;
  color: #fff;
  letter-spacing: .1em; }
  @media (max-width: 750px) {
    .snsWrapper__txt {
      font-size: 3.2vw; } }

.snsItems {
  display: flex;
  align-items: center;
  margin-left: -1em; }
  @media (max-width: 750px) {
    .snsItems {
      margin-left: -3em; } }
  .snsItems .snsItem {
    list-style: none; }
    .snsItems .snsItem + .snsItem {
      margin-left: 3em; }
    .snsItems .snsItem.snsItem--x {
      width: 2em; }
      @media (max-width: 750px) {
        .snsItems .snsItem.snsItem--x {
          width: 4.6666666667vw; } }
    .snsItems .snsItem.snsItem--instagram {
      width: 2.4em; }
      @media (max-width: 750px) {
        .snsItems .snsItem.snsItem--instagram {
          width: 6.1333333333vw; } }

.copyRight {
  text-align: center;
  font-size: 1em;
  color: #fff; }
  @media (max-width: 750px) {
    .copyRight {
      font-size: 2.1333333333vw; } }

.note {
  text-align: center;
  font-size: 0.7777777778em;
  margin-top: 1em;
  color: #000;
  font-family: 'Noto Sans JP', sans-serif; }
  @media (max-width: 750px) {
    .note {
      font-size: 2.4vw; } }