.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/community-s/main-comminity-sp.jpg.webp');background-position: center; background-size: cover;
  transition: all 0.1s ease 0s; background-repeat: no-repeat;
}
.no-webp .foreground{
  background-image: url('../imgs/community-s/main-comminity-sp.jpg');
}
.foreground img{width:auto;height:600px;}
body.studio-news .foreground{background-image: url('../imgs/main/sp-undermain-news-studio.jpg')!important;}
body.school-news .foreground{background-image: url('../imgs/main/sp-undermain-news-school.jpg')!important;}
body.food-news .foreground{background-image: url('../imgs/main/sp-undermain-news-food.jpg')!important;}
body.other-news .foreground{background-image: url('../imgs/main/sp-undermain-news-other.jpg')!important;}

.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; display: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;}
}

.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;}
}
.kv_txt_box2 {
  position: absolute;
  top: 35%;
  left: 6%;
}

/* CONTENTS ===========================================================
===================================================================== */
.comm-contents{
  /* background-color: #fff; */
  padding: 6em 0;
}
.top-comm-box{
  background:#fff; width:100%; position:relative; 
  padding:0 0 6em;
}
.top-comm-ttl{
  /* margin-bottom: .7em; */
  margin: 0 auto;
  padding-bottom: 0.8em;
  width: 70%;
}
/* .top-comm-ttl img{
  width: 160px;
  margin: 0 auto;
} */
.top-comm-ttl-jp{
  font-size: 15px;
  font-weight: bolder;
  letter-spacing: .1em;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1em;
}
.comm-desc{
  font-size: 14px;
  text-align: justify;
  margin-bottom: 1em;
  padding: 0 2em;
}
.section{
  margin-bottom: 60px;
}
.sec-wrapper{
  padding-bottom: 2em;
}

.comm-contents h2 .jp, .comm-contents h3 .jp{
  display: block;
  font-weight: bold;
  font-size: .8em;
  letter-spacing: .1em;
}
.comm-contents h2{
  font-size: 1.6rem;
  margin: 0 auto 3em;
  text-align: center;
}
.comm-contents h2 .jp{
  border-top: 1px solid;
  margin: .2em auto 0;
  padding-top: .3em;
  width: 12em;
}
.comm-contents h3 {
  font-size: 1.5rem;
  letter-spacing: .25em;
  padding-bottom: 1em;
  text-align: center;
}

/* アイコン部分 */
.sdgs-icon{
  width: 280px;
  padding: 10px;
  background-color: #f1f1f1;
  margin: 0 auto;
}
.sdgs-icon-ttl{
  font-size: 14px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
}
.sdgs-icon-ttl span{
  display: inline-block;
  margin-right: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #0098d8;
}
.sdgs-icon img{
  width: 260px;
  height: 80px;
  margin: 0 auto;
  object-fit: cover;
}
.sdgs-icon-1 img{
  object-position: top center;
}
.sdgs-icon-2 img{
  object-position: center;
}
.sdgs-icon-3 img{
  object-position: bottom center;
}

/* イメージ部分 */
.sec-img{
  width: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
}

.img-wrapper{
  position: relative;
}
.img-wrapper-1::after{
display: block;
content: "";
width: 140px;
height: 30px;
background-image: url(/imgs/community-s/brand-logo-solar-thumb-300xauto-5993.png);
background-size: cover;
background-position: center left;
background-color: #fff;
position: absolute;
bottom: 0;
right: 0;
}
.img-wrapper-3::after{
  display: block;
  content: "";
  width: 80px;
  height:60px;
  background-image: url(/imgs/community-s/brand-logo-ecomusic-thumb-300xauto-6005.png);
  background-size: cover;
  background-position: center center;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
}
.comm-efforts .en {
  letter-spacing: .1em;
  font-size: 1.1em;
}

/* 600以上=================================================
========================================================== */
@media screen and (min-width: 540px){
    .sec-wrapper{
      padding: 0 0 1em;
    }
    .comm-contents{
      padding: 50px 100px;
    }
}/* 600 end */


/* 768以上=================================================
========================================================== */
  @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;}

  .comm-contents{
    padding: 50px 0;
  }
  .top-comm-ttl img{
    width: 360px;
    margin: 1em auto;
  }
  .comm-desc{
    max-width: 480px;
    margin: 0 auto 2em;
    padding: 0;
  }
  .section{
    max-width: 960px;
    margin: 0 auto 60px;
  }
  .sec-inner{
    display: flex;
    justify-content: space-between;
  }

  .sec-wrapper,
  .sec-recycle .sec-wrapper{
    width: 50%;
    padding: 0 3em;
  }
  .sec-recycle .sec-inner{
    flex-flow: row-reverse;
  }
  /* .sec-recycle .sec-wrapper{
    width: 50%;
    padding: 0 1.5em 1em 1em;
  } */
  .img-wrapper{
    width: 50%;
  }

  .sec-img{
    height: 100%;
    min-height: 280px;
  }
  /* .sdgs-icon {
    margin: 0 auto 0 0;
  } */
  br.sp{
    display: none;
  }

  .img-wrapper-1::after{
    width: 180px;
    height: 40px;
    background-position: center left;
  }
  .img-wrapper-3::after{
    width: 100px;
    height:80px;
    background-position: center center;
  }
  h3 {
    padding: 1em 0 3em;
  }


}/* mq 768 end */

/* 960以上=================================================
========================================================== */
@media screen and (min-width: 1024px){

  .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/community-s/main-comminity-pc.jpg.webp');}
  .foreground {background-image: url('/imgs/community-s/main-comminity-pc.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; display: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;}

  /* .comm-contents{
    padding: 100px 0;
  } */
  .top-comm-box{
    padding:0 1em 4em;
  }
  .top-comm-ttl{
    margin-bottom: 1em;
  }
  .top-comm-ttl img{
    width: 480px;
    margin: 0 auto;
  }
  .top-comm-ttl-jp{
    font-size: 18px;
  }
  .comm-desc{
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto 1em;
  }
  .comm-contents h2{
    font-size: 2rem;
    margin-bottom: 2.5em;
  }
  .comm-contents h2 .jp{
    border-top: 1px solid;
    margin: .2em auto 0;
    padding-top: .3em;
  }
  .comm-contents h3 {
    font-size: 1.7rem;
    /* margin-bottom: 1em; */
    text-align: center;
  }
  .section{
    margin: 0 auto 100px;
  }

  .sec-wrapper,
  .sec-recycle .sec-wrapper{
    padding: 0 2.5em 0em
  }
  .img-wrapper{
    height: 340px;
  }

  /* .section .comm-desc{
    letter-spacing: 1px;
  } */

  /* アイコン部分 */
  .sdgs-icon{
    width: 100%;
    padding: 2em;
  }
  .sdgs-icon-ttl{
    font-size: 15px;
    margin-bottom: .8em;
    font-weight: bold;
  }
  .sdgs-icon img{
    width: 360px;
    height: 112px;
    /* margin: 0.5em auto 0.5em 2em; */
  }
  .comm-btn{
    margin: 2em auto 0;
  }

}/* mq 1024 end */


/* 1280以上=================================================
========================================================== */
@media screen and (min-width: 1280px){

  .mainvis h1{letter-spacing:2px;font-size:1.9rem;}
  .mainvis p{letter-spacing:2px;font-size:1.0rem;}

}/* mq 1280 end */

/* 1440以上=================================================
========================================================== */
@media screen and (min-width: 1440px){

  .mainvis p.keisai{font-size:.9rem;padding-top:1.5em;}	
  .banner-wrapper-fixed {height: 100vh;transition: all 0.1s ease 0s;}	
  .mainvis h1{letter-spacing:2px;font-size:2.4em;}
  .mainvis p{letter-spacing:2px;font-size:1.1em;}	

}

/* 1600以上=================================================
========================================================== */
@media screen and (min-width: 1600px){

  .mainvis p.keisai{font-size:.9em;padding-top:1.5em;}	

}