/* フォントファイルの定義 */
@font-face {
  font-family: 'KsoKaisho';
  src: url('../../assets/fonts/ksokaishon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'EnKaiSho';
  src: url('../../assets/fonts/DF-EnKaiSho-W10.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
}

.contents_top {
  width: 90%;
  max-width: 980px;
  margin: 30px auto;
  font-family: 'KsoKaisho', sans-serif;
  h2 {
    text-align: center;
    font-size: 64px;
  }
  h1 {
    text-align: center;
    font-size: 300px;
    font-weight: 500;
    color: #E70012;
  }
  .top_img {
    margin: 20px auto;
    text-align: center;
    img {
      width: 90%;
    }
  }
}

.contents_original {
  width: 90%;
  max-width: 980px;
  margin: 30px auto;
  font-family: 'KsoKaisho', sans-serif;
  display: flex;
  .left_box {
    width: 50%;
    text-align: center;
    h3 {
      position: relative;
      display: inline-block;
      font-size: 4rem;
      font-weight: 400;
      -webkit-text-stroke: 0.8px #ffffff;
      z-index: 1;
      span {
        font-size: 3.5rem;
      }
      &::before {
        content: '';
        position: absolute;
        bottom: -30;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 1em;
        background: url('../img/dengushi/red_line.png') no-repeat center;
        background-size: contain;
        z-index: -1;
      }
    }
    .box_items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30px auto;
      .item_img {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .item_right {
        width: 68%;
        .item_title {
          font-size: 3rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          .number {
            position: relative;
            display: inline-block;
            width: 3rem;
            height: 3rem;
            line-height: 3rem;
            text-align: center;
            background-color: #E70012;
            color: white;
            border-radius: 50%;
            margin-right: 0.5rem;
          }
        }
        .item_text {
          font-family: 'noto sans jp', sans-serif;
          font-weight: bold;
          text-align: left;
          span {
            color: #E70012;
          }
        }
        .yellow {
          color: #D3A000;
        }
        .orange {
          color: #E3730F;
        }
        .orange2 {
          color: #DF4711;
          letter-spacing: -0.5rem;
          font-size: 2.8rem;
        }
        .orange3 {
          color: #B9202A;
          letter-spacing: -0.2rem;
          font-size: 2.8rem;
        }
      }
    }
  }
  .right_box {
    width: 50%;
    text-align: center;
    h3 {
      position: relative;
      display: inline-block;
      font-size: 4rem;
      font-weight: 400;
      -webkit-text-stroke: 0.8px #ffffff;
      z-index: 1;
      text-align: center;
      span {
        font-size: 3.5rem;
      }
      &::before {
        content: '';
        position: absolute;
        bottom: -30;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 1em;
        background: url('../img/dengushi/red_line.png') no-repeat center;
        background-size: contain;
        z-index: -1;
      }
    }
    .box_items {
      width: 90%;
      margin: 30px auto;
      border-bottom: 1px solid gray;
      padding-bottom: 10px;
      .item_center {
        .item_title {
          font-size: 3rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          .number {
            position: relative;
            display: inline-block;
            width: 6rem;
            height: 6rem;
            // line-height: 2.2rem; /* 数字を中央に配置 */
            // text-align: center;
            background-color: #E70012;
            color: white;
            border-radius: 50%;
            margin-right: 0.5rem;
            span {
              font-size: 1rem;
            }
            .last {
              font-size: 0.8rem;
            }
          }
          .title {
            text-align: left;
            font-size: 2.8rem;
            .top {
              font-size: 2.3rem;
            }
            .under {
              color: #E70012;
            }
            .sec {
              font-size: 2.2rem;
            }
          }
        }
      }
      .text {
        font-size: 2.8rem;
        &::before {
          content: '';
          position: absolute;
          bottom: -30;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          height: 1em;
          background: url('../img/dengushi/black_line.png') no-repeat center;
          background-size: contain;
          z-index: -1;
        }
      }
    }
    .text-container {
      position: relative;
      display: inline-block;
      .text-with-line {
        position: relative;
        display: inline-block;
        font-size: 3rem; /* フォントサイズを調整 */
        font-weight: bold;
        color: #d32b27; /* テキストの色を設定 */
        z-index: 1;
        transform: rotate(-5deg); /* テキストを斜めにする */
        margin: 10px 0;
        -webkit-text-stroke: 0.2px #ffffff;
        letter-spacing: -0.5rem;
        &::before {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(-2deg); /* テキストと同じ角度に回転 */
          width: 100%; /* 幅を調整 */
          height: 60%; /* 高さを調整 */
          background: url('../img/dengushi/black_line.png') repeat-x center;
          background-size: contain; /* 画像をコンテナに収める */
          z-index: -1; /* テキストの後ろに配置 */
        }
      }
    }
  }
}

.contents_imitation {
  width: 90%;
  max-width: 980px;
  margin: 30px auto;
  .imitation_ban {
    width: 90%;
    max-width: 1080px;
    margin: 20px auto;
    font-family: "Noto Sans JP", sans-serif;
    h3 {
      font-family: "Noto Serif JP", serif;
      font-optical-sizing: auto;
      font-size: 5rem;
      font-weight: bold;
      margin: auto;
      text-align: center;
      letter-spacing: 1rem;
      color: #ffffff;
      background-color: #063190;
      border-radius: 10px;
      width: 90%;
    }
    h4 {
      font-size: 3rem;
      font-weight: bold;
      text-align: center;
      margin: auto;
      text-align: center;
    }
    .imitation_box {
      width: 90%;
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      text-align: center;
      .imitation_items {
        flex: 1 1 calc(45% - 10px);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        color: #ffffff;
        background-color: #E70012;
        -webkit-text-stroke: 1px #ffffff;
        letter-spacing: 0.2rem;
        border-radius: 5px;
        padding: 2px;
        position: relative;
        &:nth-child(4) {
          background-color: #008000; /* 緑色の背景色を設定 */
        }
        p {
          flex: 1;
          margin: 0;
          // padding: 10px;
          position: relative;
        }
        .separator {
          flex: 1;
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 60%;
            background-color: #ffffff;
            transform: translateY(-50%);
          }
        }
        span {
          font-size: 1.5rem;
        }
      }
      .font {
        font-size: 1.2rem;
      }
      .blue {
        background-color: #063190;
      }
    }
    .customer_box {
      width: 90%;
      max-width: 1080px;
      margin: 20px auto;
      border: 1px solid #E70012;
      padding: 10px 0;
      .title {
        text-align: center;
        color: #E70012;
        font-weight: bold;
        font-size: 1.3rem;
        margin: 0;
        padding-bottom: 10px;
      }
      .text {
        width: 80%;
        margin: auto;
        font-size: 1.2rem;
      }
    }
    .infringement_box {
      width: 90%;
      // height: 280px;
      max-width: 1080px;
      margin: 20px auto;
      // overflow: scroll;
      .infringement_items {
        .title {
          color: #E70012;
          font-size: 1rem;
          font-weight: bold;
          border-bottom: 1px solid #E70012;
        }
        .text {
          font-size: 0.9rem;
          span {
            color: #E70012;
          }
        }
        .sub_text {
          font-size: 0.9rem;
          span {
            font-weight: bold;
          }
        }
      }
    }
  }
}

.contents_movie {
  width: 90%;
  max-width: 980px;
  margin: 60px auto;
  .movie_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    iframe {
      width: 45%;
    }
  }
}



@media (max-width: 768px) {
.contents_top {
  margin: 100px auto 30px auto;
  h2 {
    font-size: 25px;
  }
  h1 {
    font-size: 100px;
  }
}

.contents_original {
  display: block;
  .left_box {
    width: 100%;
    h3 {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem;
      -webkit-text-stroke: 0.5px #ffffff;
      span {
        font-size: 2.5rem;
      }
      &::before {
        bottom: -20;
      }
    }
    .box_items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30px auto;
      .item_img {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .item_right {
        width: 68%;
        .item_title {
          font-size: 2rem;
          .number {
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
          }
        }
        .item_text {
          font-size: 0.7rem;
          span {
            color: #E70012;
          }
        }
        .yellow {
          color: #D3A000;
        }
        .orange {
          color: #E3730F;
        }
        .orange2 {
          color: #DF4711;
          letter-spacing: -0.1rem;
          font-size: 1.8rem;
        }
        .orange3 {
          color: #B9202A;
          letter-spacing: -0.1rem;
          font-size: 1.8rem;
        }
      }
    }
  }
  .right_box {
    width: 100%;
    text-align: center;
    h3 {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem;
      -webkit-text-stroke: 0.5px #ffffff;
      span {
        font-size: 2.5rem;
      }
      &::before {
        bottom: -20;
      }
    }
    .box_items {
      width: 90%;
      margin: 30px auto;
      .item_center {
        .item_title {
          font-size: 2rem;
          .number {
            width: 4rem;
            height: 4rem;
            span {
              font-size: 1rem;
            }
          }
          .title {
            font-size: 1.8rem;
            .top {
              font-size: 1.5rem;
            }
            .under {
              color: #E70012;
            }
            .sec {
              font-size: 1.5rem;
            }
          }
        }
      }
    }
    .text-container {
      .text-with-line {
        font-size: 1.8rem;
      }
    }
  }
}

.contents_imitation {
  padding: 10px 0;
  .imitation_ban {
    width: 100%;
    h3 {
      font-size: 2rem;
      letter-spacing: 0.5rem;
      border-radius: 3px;
    }
    h4 {
      font-size: 1.2rem;
      padding: 5px 0;
    }
    .imitation_box {
      .imitation_items {
        font-size: 0.6rem;
        letter-spacing: 0.2rem;
        span {
          font-size: 0.5rem;
        }
      }
      .font {
        font-size: 0.4rem;
      }
    }
    .customer_box {
      .title {
        font-size: 0.9rem;
      }
      .text {
        width: 90%;
        font-size: 0.7rem;
      }
    }
    .infringement_box {
      width: 90%;
      // height: 280px;
      max-width: 1080px;
      margin: 20px auto;
      // overflow: scroll;
      .infringement_items {
        .title {
          color: #E70012;
          font-size: 0.8rem;
        }
        .text {
          font-size: 0.7rem;
        }
        .sub_text {
          font-size: 0.7rem;
        }
      }
    }
  }
}

.contents_movie {
  width: 90%;
  max-width: 980px;
  margin: 30px auto;
  .movie_box {
    display: block;
    text-align: center;
    iframe {
      width: 90%;
      margin: 20px auto;
      height: auto;
    }
  }
}

}