.top_fv{
  display: flex;
  gap: 6rem;
}

{# left #}
.top_fv__content{
  width: 50%;
}

.top_fv--seatouch{
  color: var(--main-color);
  position: relative;
  letter-spacing: 5px;
}
.top_fv--seatouch::before{
  content: "シータッチ";
  font-size: 1.2rem;
  letter-spacing: 2rem;
  position: absolute;
  left: 50%;
  width: 100%;
  bottom: 120%;
  transform: translateX(-50%);
  line-height: 100%;
  text-align: center;
}

.top_fv__content--h1{
  font-size: 3.2rem;
  line-height: 200%;
  font-weight: 600;
  color: var(--main-black);
}

.top_fv__content--p{
  font-size: 1.6rem;
  color: var(--main-black);
  font-weight: 300;
  line-height: 200%;
}

.top_fv--st{
  font-size: 2.4rem;
}

.top_fv__content--cta{
  margin-top: 2rem;
}

{# right #}
.top_fv__movie{
  width: 50%;
}

.top_fv__movie--copy{
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  color: var(--main-black);
  line-height: 200%;
}

.top_fv__movie--video{
  background: var(--sub-color);
  border-radius: 8px;
  padding: 1.6rem 1.6rem 0.8rem 1.6rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.top_fv__movie--video--text{
  color: var(--main-black);
  font-size: 1.4rem;
  line-height: 200%;
  font-weight: 300;
  margin-top: 0.8rem;
}

.top_fv__movie--copy > span:nth-child(1){
  border-left: solid 1px var(--main-color);
  border-right: solid 2px var(--main-color);
  height: 3.6rem;
  width: 5px;
  display: inline-block; 
  transform: skew(20deg, 0deg) translateY(7px);
  margin-right: 1.6rem;
}
.top_fv__movie--copy > span:nth-child(3){
  border-right: solid 1px var(--main-color);
  border-left: solid 2px var(--main-color);
  height: 3.6rem;
  width: 5px;
  display: inline-block; 
  transform: skew(-20deg, 0deg) translateY(7px);
  margin-left: 1.6rem;
}


@media(max-width: 1100px){
  .top_fv__movie--copy{
    font-size: 1.8rem;
  }
  .top_fv__movie--copy > span:nth-child(1){
    height: 3rem;
  }
  .top_fv__movie--copy > span:nth-child(3){
    height: 3rem;
  }
}

@media(max-width: 1020px){
  .top_fv{
    display: block;
  }
  .top_fv__content{
    width: 80%;
  }
  .top_fv__movie{
    width: 80%;
    margin: 0 auto;
    margin-top: 3.2rem;
  }
  .top_fv__movie--copy{
    font-size: 2rem;
  }
}

@media(max-width: 768px){
  .top_fv{
    display: block;
  }
  .top_fv__content{
    width: 100%;
  }
  .top_fv__movie{
    width: 100%;
    margin: 0 auto;
    margin-top: 3rem;
  }
  .top_fv__movie--copy{
    font-size: 1.8rem;
  }
}








/*動画表示のモーダルの余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}