:root {
  --white: #fff;
  --black: #111;
  --gray: #e8e8e8;
  --light-gray: #fafafa;

  --main-text-color: var(--white);
  --main-bg-color: var(--black);

  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    "Meiryo", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic",
    sans-serif;

  color-scheme: light dark;
  color: var(--main-text-color);
  background-color: var(--main-bg-color);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

.content {
  img {
    width: 100%;
    height: auto;
  }

  .tg-main {
    background-image: url(../../common/img/bg.png);
    background-size: auto;

    > section {
      max-width: 1600px;
      width: 100%;
      padding-top: 7vw;
      padding-bottom: 7vw;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      > h2 {
        margin-bottom: 50px;
      }
    }
  }

  .divider {
    width: 86%;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 60px;
    background-color: var(--key-color);
  }

  .col2 {
    display: flex;

    > * {
      width: 50%;
      padding-left: 1vw;
      padding-right: 1vw;
    }

    > div:first-child {
      border-right: 1px solid var(--key-color);
    }
  }

  /* MOVIE */

#tg-movie {
    h2 {
        width: 24vw;
    }

    .player {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 1200px;
        width: 100%; /* 親要素の幅を確保 */
        margin-left: 120px;
        margin-right: 120px;
        background-color: var(--key-color);
        border: 4px solid var(--key-color);
        padding: 1px;
    }

    .player iframe {
        width: 1200px;  /* 横幅を固定 */
        height: 675px;  /* 16:9比率 (1200px × 9 ÷ 16) */
        max-width: 100%; /* 画面幅に応じて縮小可 */
    }

    @media (max-width: 1300px) {
        .player {
            margin-left: auto;
            margin-right: auto;
        }
        .player iframe {
            width: 100%; 
            height: auto;
            aspect-ratio: 16 / 9; /* スマホでは比率を維持 */
        }
    }
}


  /* HOWTO */

  .content {
    #tg-howto {
      background-image: url(../img/bg@3x.png);
    }
  }

  #tg-howto {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-width: none;

    h2 {
      width: 43vw;
    }

    .visual {
      width: 60vw;
    }
  }

  /* FEATURE */

  #tg-feature {
    h2 {
      width: 30vw;
    }

    .f-01 {
      width: 41vw;
    }

    .f-02 {
      width: 30vw;
    }

    .f-03 {
      width: 36vw;
    }

    .v-01 {
      width: 60vw;
    }

    .v-02 {
      width: 27vw;
      mix-blend-mode: screen;
    }

    .v-03 {
      width: 30vw;
      mix-blend-mode: screen;
    }
  }

  .tg-feature-item {
    margin: 0 auto;
    padding: 60px;
    padding-top: 20px;
    padding-bottom: 40px;
    h3 {
      margin-bottom: 30px;
    }

    > * {
      margin: 0 auto;
    }
  }

  /* OPTION */

  #tg-option,
  #tg-mall {
    padding-top: 0;
    h2 {
      width: 20vw;
    }

    .btn-list {
      width: 30vw;
    }

    .btn {
      transition: all 0.3s ease-in-out;
    }

    .btn:hover {
      opacity: 0.8;
    }
  }

  /* MALL */

  #tg-mall {
    .product-detail {
      margin-left: 100px;
      margin-right: 100px;
      .btn-area {
        text-align: center;
        background-color: var(--key-color);
        padding: 10%;
      }
    }
  }

  /* FOOTER */

  #tg-footer {
    .key-color-line {
      background-color: var(--key-color);
      width: 100%;
      height: 30px;
    }

    .caution {
      background-color: var(--main-bg-color);
      width: 100%;
      padding-top: 24px;
      padding-bottom: 24px;
      text-align: center;
      img {
        display: inline !important;
        width: 40%;
      }
    }
  }
}

@media (max-width: 767px) {
  .content {
    #tg-movie {
      .player {
        width: 70vw;
        height: 40vw;
      }
    }

    .col2 {
      display: block;

      > * {
        width: 100%;
        border: none;
      }

      > div:first-child {
        border: none;
        border-bottom: 1px solid var(--key-color);
      }
    }

    .divider {
      width: calc(41vw * var(--ratio));
      margin-bottom: 0px;
    }

    /* FEATURE */

    .tg-feature-item {
      padding: 6vw;
    }

    #tg-feature {
      --ratio: 1.5;

      .f-01 {
        width: calc(41vw * var(--ratio));
      }

      .f-02 {
        width: calc(30vw * var(--ratio));
      }

      .f-03 {
        width: calc(36vw * var(--ratio));
      }

      .v-01 {
        width: calc(30vw * var(--ratio));
        > img {
          padding-bottom: 30px;
          margin-bottom: 30px;
          border-bottom: 1px dashed var(--light-gray);
        }

        > img:last-child {
          border: none;
          padding-bottom: 0;
          margin-bottom: 0;
        }
      }

      .v-02 {
        width: calc(27vw * var(--ratio));
        mix-blend-mode: screen;
      }

      .v-03 {
        width: calc(30vw * var(--ratio));
        mix-blend-mode: screen;
      }
    }

    /* OPTION */

    #tg-option {
      padding-bottom: 40px;

      .btn-list {
        width: 66.6vw;
      }
    }

    #tg-mall {
      .btn {
        width: 50%;
      }
    }

    /* FOOTER */

    #tg-footer {
      .key-color-line {
        height: 2vw;
      }

      .caution {
        background-color: var(--main-bg-color);
        width: 100%;
        text-align: center;
        img {
          width: 80%;
        }
      }
    }
  }
}