@charset "utf-8";
.page_visual{
  background: url(../img/page_visual.png) no-repeat center / cover;
}

img{
  max-inline-size: fit-content;
  block-size: auto;
}

.main_block{
  position: relative;
  padding: 97px 0;
}
.text_left{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.main_block::before{
  position: absolute;
  content: "";
  background: transparent linear-gradient(180deg, #000000 0%, #828282 100%) 0% 0% no-repeat padding-box;
  height: 100%;
  width: calc(50% - 354px);
  bottom: 0;
  left: 0;
  z-index: 1;
}
.main_block_text h2{
  font-size: 3.0rem;
  font-weight: bold;
  letter-spacing: 6px;
  text-align: left;
}
.main_block_text p{
  margin-top: 38px;
}
.main_block_inner{
  max-width: 1024px;
  width: 100%;
  margin: auto;
  position: relative;
  z-index: 3;
}
.main_block_flex{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px 40px;
}

.explain{
  background: #F4F4F4;
  padding: 62px 0 66px;
}
.explain h2{
  font-size: 3.2rem;
  letter-spacing: 6.4px;
  text-align: center;
}
.explain_box{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1013px;
  margin: auto;
  margin-top: 90px;
}
.eb_text {
  margin: 38px 0;
}
.eb_video{
  width: 100%;
}


.cont_red{
  max-width: 430px;
  width: 100%;
  margin: 58px auto 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  font-weight: bold;
  background: transparent linear-gradient(97deg, #CC0000 0%, #FF0000 100%) 0% 0% no-repeat padding-box;
  color: #FFFFFF;
}
.cont_red::before{
  position: relative;
  content: url(../img/red_cont_btn.svg);
  top: 3px;
}
.btn_box{
  padding: 0 5%;
}

.intro {
  margin-top: 123px;
}
.intro h2{
  font-size: 3.2rem;
  letter-spacing: 6.4px;
  text-align: center;
}
.intro_contents{
  max-width: 1013px;
  margin: 36px auto 0;
  border-top: 3px solid #FF0000;
  background: #EEEEEE;
}
.ic_inner{
  padding: 101px 85px 119px;
}
.ic_inner_flex{
  display: flex;
  flex-wrap: wrap;
  gap: 55px;
}
.gap_18{
  gap: 18px;
}
.intro_box p{
  margin-top: 18px;
}
.frame_inner{
  display: flex;
  justify-content: center;
}
.frame_box{
  max-width: 706px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  img{
    max-inline-size: 100%;
  }
  .main_block {
    padding: 48px 0;
  }
  .main_block::before{
    width: calc(50% - 80px);
  }
  .text_left img {
    width: 50%;
  }
  .main_block_inner{
    max-width: calc(50% + 60px);
    margin: 0 0 0 auto;
    padding-right: 5%;
  }
  .main_block_flex{
    flex-direction: column;
  }
  .main_block_text h2 {
    font-size: 2.6rem;
    letter-spacing: 3.2px;
    text-align: left;
  }
  .main_block_text p {
    margin-top: 20px;
  }
  .explain {
    padding: 30px 0;
  }
  .explain_inner{
    padding: 0 5%;
  }
  .explain h2 {
    font-size: 2.6rem;
    letter-spacing: 2px;
  }
  .explain_box {
    margin-top: 40px;
  }
  .eb_text {
    margin: 20px 0;
  }
  .explain_box_inner {
    position: relative;
    z-index: 2;
  }
  .explain_box_flex{
    flex-direction: column;
  }
  .explain_box_text h3 {
  font-size: 2.6rem;
  letter-spacing: 3.2px;
  }
  .explain_box_text p {
    margin-top: 20px;
  }
  .cont_red{
    padding: 0 5%;
  }

  .intro {
    margin-top: 60px;
  }
  .intro_inner{
    padding: 0 5%;
  }
  .intro h2{
    font-size: 2.6rem;
    letter-spacing: 2px;
  }
  .ic_inner{
    padding: 30px 5%;
  }
  .ic_inner_flex {
    gap: 20px 10px;
}
  .intro_box{
    width: calc(50% - 5px);
  }
  .intro_box p{
    margin-top: 10px;
  }
  .img_flex{
    flex-direction: column;
    gap: 40px;
  }
  .frame_box{
    width: 100%;
  }
}