.wrapper {position: relative;height: 450px;}
.banner-wrapper-fixed {position: fixed;top: 0;left: 0;width: 100%;height: 450px;background-image:none;}
.foreground{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.0);background-image: url('../imgs/main/sp-undermain-works.jpg');background-position: center;background-size: cover;transition: all 0.1s ease 0s;background-repeat: no-repeat;}
.foreground img{width:auto;height:600px;}

.mainvis{display:flex;width:100%;position:relative;overflow:hidden;height:450px;}
.mainvis img{width:auto;height:100%;object-fit: cover;font-family: 'object-fit: cover;';}
.mainvis div.h1box{position:absolute;top:48%;left:50%;transform: translate(-50%,-52%)!important;width:100%;padding:0 .45em;z-index:900;}
.mainvis h1{letter-spacing:2px;font-size:1.4rem;font-weight:700;color:#fff;line-height:1.5;z-index:10;text-align:center;font-family: 'Noto Serif CJK JP', 'Noto Serif JP', sans-serif;}
/* .mainvis p{letter-spacing:2px;font-size:.8rem;font-weight:300;color:#fff;text-align:center;fdisplay:block;line-height:1.9;padding-top:.75em;font-family: 'Noto Serif CJK JP', 'Noto Serif JP', sans-serif;} */
.mainvis p.keisai{font-size:.6rem;padding:2em 0 0 1em;}

@keyframes slideInUp {
from {opacity: 0;transform: translateY(150px);}  
to {opacity: 1;transform: translateX(0);}
}
@keyframes slideInbk {
from {opacity: 0;}  
to {opacity: 1;}
}

/* @media screen and (max-width:320px){
} */
.mainvis .mainnavi{position:absolute;bottom:0;right:0;width:37.5%;padding:1em;}
.mainvis .mainnavi p{text-align:right;font-size:.7rem;font-weight:700;line-height:1;letter-spacing:3px;margin-bottom:1em;}
.mainvis .mainnavi ul{width:100%;display: flex; justify-content: flex-end;padding-right:.1em;}
.mainvis .mainnavi li{background-color:#ccc;width:8px;height:8px;border-radius:50%;margin-left:.6em}
.mainvis .mainnavi li.current{background-color:#1a1a1a;}

.white h1,.white p{animation: scrollh1 2s both;}
.white .swiper-container{animation: scrollswiper 8s both;}

@keyframes scrollh1 {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes scrollswiper {
0% {opacity: 1}
100% {opacity: 0;}
}

/* .brandwrap{background:#efefef;padding:1em;} */
.brandwrap ul{
    margin: 1em 0 0;
}
.brandwrap li{
    margin-bottom: 3em;
}
.brandwrap li .infobox{
    /* display:flex;
    flex-wrap:wrap;
    align-items: center; */
    position:relative;}

/* .brandwrap li .infobox div.logo{
    width: 60%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7em;
    margin: 0 auto;
} */
.logo {
    width: 55%;
    height: fit-content;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}
.works-logo {
    filter: var(--filter-w);
}

.brandwrap li .infobox div.text{
    width:100%;
    position:absolute;
    right:0;
    bottom: 4em;
}
.works-txt{
  font-size: 1.3em;
  font-weight: 500;
  color: #979797;
  /* padding: 0 0 0.5em 0; */
  margin: .3em 0 .6em;
  text-align: left;
  line-height: 1.2em;
}

.brandwrap ul.brand li{
    width:47%;background:none;margin-bottom:1em;
}
.brandwrap ul.brand li .infobox{display:block;padding-top:.35em;}
.brandwrap ul.brand li .infobox div.logo{
    width:70%;padding:0 0;background:none;position:static;display:block;margin:0 auto;}

.brandwrap ul.company li{width:47%;border:1px solid #000;background:none;margin-bottom:1em;}
.brandwrap ul.company li .infobox{display:block;padding-top:0;}
.brandwrap ul.company li .infobox div.logo{
    width:70%;padding:1em 0;background:none;position:static;display:block;margin:0 auto;}

.brandimage {
  position: relative;
  display: inline-block;
}
.brandimage_wrap {
    position: relative;
}
.brand-img {
  opacity: .6;
}
.brand-img-box {
    background-color: black;
}
.brandimage_txt{
  /* position: absolute; */
  left: 0;
  top: 0;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  display: block;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* background-color: rgba(0, 0, 0 , .8); */
  background-color: rgba(121,121,121,.1);
  font-size: 1.1em;
  line-height: 1.7;
  padding: 1.2em ;
  /* opacity: 0; */
  /* transition: opacity .3s; */
  /* visibility: hidden; */
  /* border-bottom: 1px solid #ccc; */
}
.brandimage_txt_inn{
  display: block;
  /* width: 80%; */
  height: fit-content;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: .2em;
  /* color: #fff; */
}
.brandimage_list_box:last-child .brandimage_txt{
  border-bottom: none;
}

.news-post-wrap{
    overflow:hidden;
}
.news-post-wrap h1{
    padding-bottom: 3em;
    font-size:1rem;
    line-height:1.7;
    text-align:center;
    /* margin-bottom:1.75em; */
    font-weight:bold;
  }
  .news-post-wrap h1 img{
    width:70%;
    margin:0 auto 0!important;
    display:block;
    filter: var(--filter-b);
  }
.news-post-box {
    font-size: 1.2em;
    line-height: 2em;
    text-align: center;
}

.sec_ttl .en {
    font-size: 3.8em;
    font-weight: 500;
}


@media screen and (min-width:768px){
	
    .wrapper {position: relative;height: 950px;}
    .banner-wrapper-fixed {height:950px;}
    .foreground {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.0);}
    .mainvis img{width:100%;height:auto;object-fit: cover;font-family: 'object-fit: cover;';}
	
    .mainvis div.h1box{position:fixed;top:48%;left:50%;transform: translate(-50%,-52%)!important;width:100%;padding:0 .45em;z-index:900;}
    .mainvis h1{font-size:2.2rem;}
    .mainvis p{font-size:1.2rem;padding-top:.75em;font-family: 'Noto Serif JP', sans-serif!important;}
    .mainvis p.keisai{font-size:1rem;padding-top:1.5em;}	
	
    .mainvis .mainnavi{padding: 1.5em;}
    .mainvis .mainnavi p{font-size: 1rem;letter-spacing: 5px;}
    .mainvis .mainnavi ul{padding-right: .3em;}
    .mainvis .mainnavi li{margin-left: 1em;width: 10px;height: 10px;}
	
    /* .brandwrap{padding:2em;} */
    .brandwrap ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 2%;
    }
    .brandwrap li{
        width: 32%;
        margin-bottom: 1.5em;
    }
    .brandwrap li .infobox div.logo{
        left: 4.4em;
        bottom: 6em;
    }
    .brandwrap li .infobox div.text h3{
        font-size: 1.2em;
        color: #fff;
        text-align: center;
    }
	
    .brandwrap ul.brand li{width:31%;background:none;margin-bottom:1em;}
    .brandwrap ul.brand li .infobox{display:block;padding-top:.35em;}
    .brandwrap ul.brand li .infobox div.logo{width:70%;padding:0 0;background:none;position:static;display:block;margin:0 auto;}

    .brandwrap ul.company:before{content:"";display: block;width:31%;order:1;}
    .brandwrap ul.company:after{content:"";display: block;width:31%;}
    .brandwrap ul.company li{width:31%;border:1px solid #000;background:none;margin-bottom:1em;}
    .brandwrap ul.company li .infobox{display:block;padding-top:0;}
    .brandwrap ul.company li .infobox div.logo{width:70%;padding:1em 0;background:none;position:static;display:block;margin:0 auto;}
	
    div.newspostslider ul li img {
      height: 30em;
      width: 50em;
      object-fit: cover;
    }

    .news-post-wrap h1{
      font-size:1.2em;
      /* padding-:0 2em; */
      line-height:2;
    }
    .news-post-wrap h1 img{
      width:30%;
      margin:0 auto;
    }
    
    .news-post-box {
    font-size: 1.1em;
    line-height: 2.2;
    padding: 2em 2.5em 0;
    }
    .news-post-box .logo img{width:30%;margin:0 auto .5em!important;}
    /* .news-post-box p{margin-top:1em;}	 */
    .news-post-bt a{font-size:.9rem;padding:1em 2.5em 1em 2.8em;margin-top:2em;}

  .works-txt {
    font-size: 1.4em;
    text-align: center;
    color: #fff;
    margin-top: 0;
  }
  .brandimage_txt{
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0 , .8);
    font-size: .85em;
    line-height: 1.7;
    padding: .8em 0;
    opacity: 0;
    transition: opacity .3s;
    visibility: hidden;
    border-bottom: 0;
  }
  .brandimage_txt{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .85em;
  }
  .brandimage_txt_p{
    width: 80%;
    /* width: fit-content; */
  }
  .brandimage_txt_inn{
    color: #fff;
    line-height: 1.5;
    margin-bottom: 0;
  }
  .brandimage_list_box:hover .brandimage_txt{
    opacity: 1;
    visibility:visible;
  }  

}/*  */

@media screen and (min-width: 960px){

    .wrapper {position: relative;height: 80vh;}
    .banner-wrapper-fixed {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-image:none;background-position: center;background-size: cover;transition: all 0.1s ease 0s;}
    .foreground {position: absolute;top: 0;left: 0;width: 100%;height: 80vh;background-color: rgba(0,0,0,0.0);background-image: url('../imgs/main/pc-undermain-works.jpg');}
    .mainvis img{width:100%!important;}
    .white .swiper-container{animation: scrollswiper 2s both;}

    .mainvis div.h1box{position:absolute;}
    .mainvis h1{letter-spacing:2px;font-size:1.8rem;}
    /* .mainvis p{letter-spacing:2px;font-size:1rem;font-weight:300;color:#fff;text-align:center;fdisplay:block;line-height:1.9;padding-top:.75em;font-family: 'Noto Serif JP', sans-serif!important;} */
    .mainvis p.keisai{font-size:.8rem;padding-top:1.5em;}	

    .brandwrap{padding:3em;}
    .brandwrap ul{
        padding: 2em 2em 0em;
    }
    .brandwrap ul:before{content:"";display: block;width:31%;order:1;}
    .brandwrap ul:after{content:"";display: block;width:31%;}
    /* .brandwrap li{width:31%;margin-bottom:2em;} */

    .brandwrap li .infobox div.logo{
        width: 55%;
        left: 5.4em;
        bottom: 6.2em;
    }
    .brandwrap ul.brand:before{content:"";display: block;width:23%;order:1;}
    .brandwrap ul.brand:after{content:"";display: block;width:23%;}	
    .brandwrap ul.brand li{width:23%;background:none;margin-bottom:2em;}
    .brandwrap ul.brand li .infobox{display:block;padding-top:.35em;}
    .brandwrap ul.brand li .infobox div.logo{width:50%;padding:0 0;background:none;position:static;display:block;margin:0 auto;}

    .brandwrap ul.company:before{content:"";display: block;width:18%;order:1;}
    .brandwrap ul.company:after{content:"";display: block;width:18%;}
    .brandwrap ul.company li{width:18%;border:1px solid #000;background:none;margin-bottom:1em;}
    .brandwrap ul.company li .infobox{display:block;padding-top:0;}
    .brandwrap ul.company li .infobox div.logo{width:70%;padding:1em 0;background:none;position:static;display:block;margin:0 auto;}		

    div.newspostslider ul li img {
        height: 30em;
        width: 55em;
        object-fit: cover;
    }

    .news-post-wrap h1{
        /* font-size:1.4rem; */
        padding-bottom: 4em;
        /* margin-bottom:2em; */
        line-height: 2;
      }

      .news-post-box {
        line-height: 2.0;
    }

    .news-post-box .logo img{width:17%;margin:0 auto .5em!important;}
    
}

@media screen and (min-width: 1500px){
    .news-post-box {
        padding: 2em 10em 0;
        }
}