@charset "UTF-8";

/*****************************
    topスライド
*****************************/
.topsec-firstview{
background: url(../images/coommon/teaser_main_handsome.webp) no-repeat center / cover;
margin: 0 auto;
position: relative;
height: 100vh;
}

@media only screen and (max-width: 1450px) {
    .topsec-firstview{
        background: none;
    }
}
@media only screen and (max-width: 1450px) {
    .teaserimg {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .teaser_style{
      position: relative;
    }
}
/*****************************
画像変更
*****************************/
@media only screen and (max-width: 767px) {
    .teaserimg {
        display: block;
        position: absolute;
        top: 0%;
        transform: translateY(0%);
        width: 100%;
        height: 100%;
    }
    .teaser_style{
      position: relative;
    }
}

.teaserlogo{
    position: absolute;
    width: 52%;
    top: 5%;
    left: 3%;
    margin: 0;
}
@media screen and (max-width: 1024px) {
.teaserlogo {
    position: absolute;
    width: 65%;
    top: -13%;
    left: 3%;
    margin: 0;
}
}
/*****************************
画像変更
*****************************/
@media screen and (max-width: 767px) {
.teaserlogo {
  position: absolute;
  width: 100%;
  top: 103vw;
  left: 0%;
  margin: 0;
}
}

.teasertext{
    position: absolute;
    width: 58%;
    bottom: 0%;
    right: 3%;
    margin: 0;
}
@media screen and (max-width: 1024px) {
.teasertext{
    position: absolute;
    width: 70%;
    bottom: -13%;
    right: 3%;
    margin: 0;
}
}
/*****************************
画像変更
*****************************/
@media screen and (max-width: 767px) {
.teasertext{
  position: absolute;
  width: 100%;
  top: 140vw;
  left: 0%;
  margin: 0;
}
}
.teaserbtn{
  position: absolute;
  display: flex;
  width: 16%;
  top: 5%;
  right: 5%;
  flex-direction: row;
  align-items: center;
}
@media screen and (max-width: 1024px) {
.teaserbtn{
position: absolute;
  display: flex;
  width: 20%;
  top: 5%;
  right: 5%;
  flex-direction: row;
  align-items: center;
}
}

/*****************************
画像変更
*****************************/
@media only screen and (max-width: 767px) {
.teaserbtn{
  position: absolute;
  display: flex;
  width: 30%;
  top: 3%;
  right: 8%;
  flex-direction: row;
  align-items: center;
}
}

.teaserbtn li{
  display: inline-block;
}
.teaserbtn li .img01_style {
width: 45%;
}

.teaserbtn li .img02_style{
width: 95%;
}
/*****************************
画像変更
*****************************/
@media only screen and (max-width: 767px) {
  .teaserbtn li{
  display: inline-block;
}
.teaserbtn li .img01_style {
width: 60%;
}
.teaserbtn li .img02_style{
width: 100%;
}
}

/*****************************
  画像切り替え
*****************************/
.pcimg { display: block !important; }
.spimg { display: none !important; }
@media only screen and (max-width: 767px) {
    .pcimg { display: none !important; }
    .spimg { display: block !important; }
}
/*****************************
ポップアップ関係
*****************************/

.popsec{
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  transition: .5s;
  height: 100vh;
  width: 100%;
}
.popsec.popopen{
  opacity: 1;
  pointer-events: all;
  z-index: 1000;
}
.popsec .popbg{
  background: rgba(0, 0, 0, .65);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.popsec .popcontent{
  background: #000;
  max-width: 1300px;
  overflow-y: auto;
  padding: 10rem 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80vh;
  width: 68.75%;
}
.popsec .popcontent::-webkit-scrollbar {
  background: #404040;
  width: 10px;
}
.popsec .popcontent::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 10px;
}
.popsec .popclose{
  background: url(../images/common/cross.svg) no-repeat center / contain;
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
}
@media only screen and (max-width: 1180px) {
  .popsec .popcontent{
    padding: 8rem 2rem;
    width: 80%;
  }
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .popsec .popcontent {
    padding: 5rem 2rem 8rem;
    height: 70vh;
    width: calc(80% - 2rem);
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .mainbody{
    overflow: auto;
    height: auto;
  }
  .popsec{
    opacity: 1;
    padding: 9rem 0 0;
    pointer-events: all;
    position: relative;
    height: auto;
  }
  .popsec .popbg,
  .popsec .popclose{
    display: none;
  }
  .popsec .popcontent{
    padding: 0;
    position: static;
    transform: none;
    height: auto;
    width: 100%;
  }
}
/*****************************
  ポップアップ関係 sec-trailer
*****************************/
.sec-trailer .popcontent{
  aspect-ratio: 16/9;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  max-width: 800px;
  padding: 5rem 0 0;
  height: auto;
}
.sec-trailer .mov{
  margin: 0 auto;
  width: 100%;
}
.sec-trailer .mov iframe{
  aspect-ratio: 16/9;
  height: auto;
  width: 100%;
}


@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .sec-trailer{
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: fixed;
    transition: .5s;
    height: 100vh;
  }
  .sec-trailer.popopen{
    opacity: 1;
    pointer-events: all;
  }
  .sec-trailer .popbg,
  .sec-trailer .popclose{
    display: block;
  }
  .sec-trailer .popcontent{
    padding: 5rem 2rem;
    position: absolute;
    transform: translate(-50%,-50%);
    height: auto;
    width: 100%;
  }
}