main{
	width: 100%;
  overflow-x: hidden;
  background: #FFF;
  position: relative;
}
section{
  margin-bottom: 10em!important;
}
.brand-list{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.brand-list a{
  display: block;
  width: 17%;
  padding: 1em;
}
.brand-list a::after{
  display: none;
}
.brand-list a img{
  width: 100%;
}
#hidden-data{

}
.bg-realization{
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);

  opacity: 0;
  transition-duration: 0s;
  width: 100%;
  height: 100%;
  
  color:#FFF;
  z-index: -99999;
}

.bg-realization .content{
  margin-top: 10vh;
  margin-left: 10vw;
  width: 80vw;
  display: flex;
  transition-duration: .3s;
}
.bg-realization .content .box{
  width: 70%;
  height: 80vh;
  padding: 1.5em;
}
.bg-realization .content .box:nth-child(n2){
  width: 30%;
}
.bg-realization .content .box iframe{

}
.close-button{
  background-image: url('/front/images/close-ico.svg');
  background-size: cover;
  width: 2em;
  height: 2em;
  position: fixed;
  top: 1em;
  right: 1.5em;

}
.close-button::after{
  display: none;
}
.bg-realization .content .pc{
  width: 1920px;
  height: 1080px;
  transform: scale(0.65, 0.65) translate(-40%, -32.5%);
  background-color: #FFF;
}
.bg-realization .content .mobile{
width: 440px;
    height: calc(80vh *1.1);
    transform: scale(1, 1) translate(35%, -5%);
    background-color: #FFF;
}
.frame-switcher{
    position: fixed;
    top: 2vh;
    left: 27vw;
    width: 8em;
    display: flex;
    /* text-align: center; */
    justify-content: space-around;
}
.frame-switcher a{
  color:#FFF;
  font-size: 2em;
}
.frame-switcher a::after{
  display: none;
}
.see-link-page{
  color:#FFF;
  padding: .5em;
  border: solid .1em #FFF;
  border-radius: 2em;
  display: inline-block;
  margin-top: .5em;
  transition-delay: 0s;
}
.see-link-page:hover{
  background: #FFF;
  color:rgba(0, 0, 0, 0.7);
}
.see-link-page::after{
  display: none;
}
@media (max-width: 1900px){
  .bg-realization .content .pc{
    transform: scale(0.55, 0.55) translate(-55%, -43%);
  }
  .bg-realization .content .mobile{
  width: 440px;
      height: 950px;
      transform: scale(.9, .9) translate(15%, -5%);
  }
}
@media (max-width: 1550px){
  .bg-realization .content .pc{
    transform: scale(0.45, 0.45) translate(-77%, -65%);
  }
  .bg-realization .content .mobile{
  width: 440px;
      height: 950px;
      transform: scale(.9, .9) translate(0%, -5%);
  }
}
@media (max-width: 1280px){
  .bg-realization .content .pc{
    transform: scale(0.35, 0.35) translate(-110%, -100%);
  }
}
@media (max-width: 1024px){
  .bg-realization .content .pc{
    transform: scale(0.30, 0.30) translate(-135%, -130%);
  }
  .bg-realization .content .mobile{
  width: 440px;
      height: 950px;
      transform: scale(.8, .8) translate(-15%, -15%);
  }
}

@media (max-width: 767px){
  .brand-list{
    flex-direction: column;
  }
  .brand-list a{
    width: 100%;
    margin-bottom: 2em;
    box-sizing: border-box;
  }
  .bg-realization .content{
    flex-direction: column;
  }

  .bg-realization .content .box{
    width: 100%;
    box-sizing: border-box;
    height: 70vh;
    padding: .5em;
  }
  .bg-realization .content .pc{
    transform: scale(0.30, 0.30) translate(-115%, -120%);
  }
  .bg-realization .content .box:first-child{
    height: 50vh;
  }
  .bg-realization .content .box:last-child{
    overflow-x: scroll;
    height: 35vh;
  }
  .bg-realization .content .mobile{
    ` width: 440px;
      height: 950px;
      transform: scale(.5, .5) translate(20%, -55%);
  }
}
@media (max-width: 667px){
  .bg-realization .content .pc{
    transform: scale(0.25, 0.25) translate(-160%, -140%);
  }
  .bg-realization .content .mobile{
  width: 440px;
      height: 950px;
      transform: scale(.5, .5) translate(0%, -55%);
  }
}
@media (max-width: 567px){
  .bg-realization .content .pc{
    transform: scale(0.2, 0.2) translate(-210%, -180%);
  }
  .bg-realization .content .mobile{
  width: 440px;
      height: 950px;
      transform: scale(.35, .35) translate(-50%, -95%);
  }
}