@charset "UTF-8";
.w{
  position: relative;
  width:100%;
  max-width:1400px;
  margin: 0 auto;
  padding:0 50px;
  z-index:5;
}
@media screen and (max-width: 760px){
  .w{
    padding:0 25px;
  }
}
@media screen and (max-width: 680px){
  .w{
    padding:0 15px;
  }
}
/* ------------main------------- */
main{
  position: relative;
  width:100%;
  padding:0px 0;
}
main::before{
  position: absolute;
  content:"";
  width:100%;
  height:100%;
  left:0;
  top:0;
  background: url(../images/sbg.png) 50% 0 repeat-y;
  background-size: 100% auto;
  z-index:1;
}
@media screen and (max-width:1330px){
  main::before{
    background-size: 110% auto;
  }
}
/* ------------content------------- */
.content{
  display:block;
  width:100%;
  max-width:1920px;
  margin:0 auto;
}
/* ------------kv------------- */
#kv{
  position: relative;
  width:100%;
  z-index:1;
}
#kv .kv_inner{
  position: relative;
}
#kv .kv_inner .img{
  overflow: hidden;
}
#kv .kv_inner .img,
#kv .kv_inner img{
  position: relative;
  width: 100%;
  height: 100%;
  z-index:2;
}
#kv .kv_inner img{
  object-fit: cover;
}
#kv .kv_inner .cover{
  position: absolute;
  bottom:-21px;
  left:0;
  width:100%;
  padding:0 70px;
  z-index:3;
}
#kv .kv_inner .cover img{
  display:block;
  width:100%;
  max-width:1800px;
  margin:0 auto;
}

@media screen and (max-width:980px){
  #kv .kv_inner img{
    position: relative;
    width: 116%;
    max-width:2300px;
    margin-left: -8%;
    height: auto;
  }
  #kv .kv_inner .cover{
    bottom:0px;
    padding:0 50px;
  }
}
@media screen and (max-width:480px){
  #kv .kv_inner img{
    width: 130%;
    margin-left: -15%;
  }
  #kv .kv_inner .cover{
    bottom:5px;
    padding:0 15px;
  }
}

/*-------------nav---------------*/
#nav{
  padding:50px 0;
}
#nav ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
}
@media screen and (max-width:860px){
  #nav{
    padding:50px 0 20px;
  }
}
@media screen and (max-width:760px){
  #nav ul{
    grid-column-gap: 20px;
  }
}
@media screen and (max-width:480px){
  #nav{
    padding:20px 0 0px;
  }
  #nav ul{
    grid-column-gap: 7px;
  }
}
/* ------------boxinner------------- */
.boxinner{
  position: relative;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto 80px;
  z-index:7;
}
.boxinner::after{
  position: absolute;
  content:"";
  top:8px;
  right:-8px;
  width:100%;
  height:100%;
  border-radius: 15px;
  background: #42210b;
  z-index:6;
}
.boxinner .inner{
  position: relative;
  width: 100%;
  border: 8px solid #42210b;
  border-radius: 15px;
  z-index:7;
  padding:10px 0px;
  background: #fff;
}
.boxinner.v2::after{
  background: #006837;
}
.boxinner.v2 .inner{
  border-color: #006837;
}
@media screen and (max-width:480px){
  .boxinner{
    margin: 0 auto 40px;
  }
  .boxinner::after{
    top:5px;
    right:-5px;
  }
  .boxinner .inner{
    border-width: 5px;
    z-index:7;
    padding:10px 5px;
  }
}
/* ------------s1------------- */
#s1{
  position: relative;
  width:100%;
  padding:30px 0 80px;
}
#s1 h2{
  padding:0 15px;
}
#s1 h2 img{
  display:block;
  width:100%;
  max-width:1400px;
  margin:0 auto;
}
#s1 .lom{
  width:100%;
  padding:0 110px;
}
#s1 .carbox{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 50px;
}
#s1 .carbox article{
  margin-bottom: 60px;
}
#s1 .carbox article img{
  display:block;
  width:100%;
  max-width:860px;
  margin:0 auto;
}
@media screen and (max-width:860px){
  #s1 .lom{
    padding:0 50px;
  }
  #s1 .carbox{
    grid-column-gap: 30px;
  }
}
@media screen and (max-width:760px){
  #s1 .carbox{
    grid-template-columns:1fr;
    grid-column-gap: 0px;
  }
  #s1 .carbox article img{
    max-width:460px;
  }
}
@media screen and (max-width:500px){
  #s1 .lom{
    padding:0 25px;
  }
}
@media screen and (max-width:480px){
  #s1{
    padding:30px 0 40px;
  }
  #s1 .carbox article{
    width:100%;
    margin-bottom: 40px;
  }
}
/* ------------btn------------- */
.btn{
  width:100%;
  margin-bottom: 100px;
}
.btn.mrb{
  margin-bottom: 60px;
}
.btn a{
  display:block;
  width:100%;
  max-width:870px;
  margin: 0 auto;
}
.btn a img{
  display:block;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}
.btn a:hover img{
  filter:alpha(opacity=90);-moz-opacity: 0.9;opacity: 0.9;
}
.capt{
  display:block;
  width:100%;
  max-width:1030px;
  margin: 0 auto;
  font-size: 14px;
}
.capt span{
  color:#f51e2d;
}
@media screen and (max-width:760px){
  .btn.mrb{
    margin-bottom: 40px;
  }
}
@media screen and (max-width:480px){
  .btn{
    margin-bottom: 60px;
  }
  .btn.mrb{
    margin-bottom: 30px;
  }
  .capt{
    font-size: 12px;
  }
}
/* ------------s2------------- */
#s2{
  position: relative;
  width:100%;
  padding:30px 0 80px;
}
#s2 h2{
  padding:0 15px;
}
#s2 h2 img{
  display:block;
  width:100%;
  max-width:1400px;
  margin:0 auto;
}
#s2 .d{
	width:100%;
  padding:0 15px;
}
#s2 .d img{
  display:block;
  width:100%;
  max-width:1070px;
  margin:0 auto 50px;
}
#s2 h3{
  padding:15px 15px;
  background: #006837;
  margin-bottom: 40px;
}
#s2 h3 img{
  display:block;
  width:100%;
  max-width:980px;
  margin:0 auto;
}
#s2 .dsc{
  width:100%;
  max-width:860px;
  margin:0 auto 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 50px;
  padding:0 15px;
}
@media screen and (max-width:480px){
  #s2{
    padding:30px 0 40px;
  }
  #s2 .dsc{
    margin:0 auto 20px;
    grid-column-gap: 20px;
  }
}


/* ------------s3------------- */
#s3{
  position: relative;
  width:100%;
  padding:0px 0 80px;
}
#s3 h2 img{
  display:block;
  width:100%;
  max-width:1230px;
  margin:0 auto;
}

@media screen and (max-width:480px){
  #s3{
    padding:30px 0 40px;
  }
}
.copy{
  text-align: center;
  padding:30px 0;
  font-size: 12px;
}
/*----------------------------delay-----------------------------------*/

.delay{
	opacity: 0;
	transform: translate(0,60px);
	transition: 0.8s ease-in-out;
}
.delay1{
	opacity: 0;
	transform: translate(-60px,0);
	transition: 0.8s ease-in-out;
}
.delay1-2{
	opacity: 0;
	transform: translate(-150px,0);
	transition: 1s ease-in-out;
}
.delay1-3{
	opacity: 0;
	transform: translate(-200px,0);
	transition: 1.2s ease-in-out;
}
.delay2{
	opacity: 0;
	transform: translate(60px,0);
	transition: 0.8s ease-in-out;
}
.delay2-2{
	opacity: 0;
	transform: translate(150px,0);
	transition: 0.8s ease-in-out;
}
.delay2-3{
	opacity: 0;
	transform: translate(200px,0);
	transition: 0.8s ease-in-out;
}
.delay3{
	opacity: 0;
	transform: translate(0,120px);
	transition: 0.8s ease-in-out;
}

.delay-up1{
	opacity: 0;
	transform: translate(0,80px);
	transition: 0.8s ease-in-out;
}
.delay-up2{
	opacity: 0;
	transform: translate(0,120px);
	transition: 0.8s ease-in-out;
}
.delay-up3{
	opacity: 0;
	transform: translate(0,160px);
	transition: 0.8s ease-in-out;
}
.delay-up4{
	opacity: 0;
	transform: translate(0,200px);
	transition: 0.8s ease-in-out;
}
.delay-blur{
  opacity: 0;
  filter: blur(10px);
  transition: 0.8s ease-in-out;
}

.delayActive{
	opacity: 1.0;
	transform: translate(0,0);
  filter: blur(0);
	transition: 1s ease-in-out;
}

.delay-inv1{
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 1.0s ease-out;
  will-change: transform, opacity;
}
.delay-inv1.is_on{
  opacity: 1;
  animation: zoominv 0.8s ease-out forwards;
}
@keyframes zoominv {
  0% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}