@charset "utf-8";

*{box-sizing: border-box;}
h1,h2,h3,h4,h5,p,span{
  word-break: keep-all;
}

.page-con{
  width: 100%;
  max-width: 1430px;
  padding: 0 15px;
  margin: 0 auto;
}

.page-top{
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #323232;
  position: relative;
}

.greet-tit{
  width: 100%;
  padding: 0 15px;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.greet-tit > h3{
  font-size: 60px;
  font-weight: 900;
  margin-bottom: 1.5rem;
}
.greet-tit > p{
  font-size: 18px;
  font-weight: 400;
}

.scroll{width: 100%; text-align: center; padding: 0 15px; position: absolute; left: 0; bottom: 0;}
.scroll > p{font-size: 16px; color: #fff;}
.sr-line{width: 1px; height: 100px; background-color: rgba(255, 255, 255, 0.2); margin: 10px auto 0; position: relative; overflow: hidden;}
.sr-line::after{content: ""; width: 1px; height: 100%; position: absolute; top: -100%; left: 0; background-color: #fff; animation: line 5s infinite ease-in-out;}

@keyframes line{
    0%{top: -100%;}
    100%{top: 100%;}
}

.about-section{
  padding: 200px 0 300px;
  background-color: #fff;
  position: relative;
}
.about-wrap{
  width: 100%;
  display: flex;
}
.about-img{
  width: 45%;
  display: flex;
}
.about-img img{
  width: 100%;
}
.about-caption{
  width: 55%;
  padding: 3rem 0 0 3rem;
}
.about-caption > .about-tit{
  color: #000;
}
.about-tit > h5{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.about-tit > h3{
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 2rem;
}
.about-tit > p{
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}

.about-mq{
  width: 3840px; 
  display: flex; 
  transform: translate(0,0); 
  animation: 20s mqtxt infinite linear; 
  position: absolute; left: 0; bottom: 5rem;
}
.about-mq > li{
  flex: 0 0 auto; 
  margin-right: 3rem; 
  font-size: 140px; 
  line-height: 1; 
  font-weight: 900; 
  color: rgba(0, 0, 0, 0.1);
}
@keyframes mqtxt{
	0%{transform: translate(0,0);}
	100%{transform: translate(-1280px,0);}
}

.ab-section{
  padding: 70px 0;
  position: relative;
}
.ab-section .page-con{
  position: relative;
  z-index: 3;
}
.ab-section .about-tit{
  color: #fff;
  margin-bottom: 3rem;
}
.ab-bg{
  width: 100%;
  height: 800px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.ab-wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.ab-lt{
  width: 70%;
}
.ab-rt{
  width: 28%;
}
.ab-img{
  display: flex;
}
.ab-img img{
  width: 100%;
}
.ab-caption{
  color: #000;
  margin: 3rem 0;
}
.ab-caption > p{
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}
.ab-sign{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ab-sign img{
  display: inline-block;
  margin-bottom: 1rem;
  border-radius: 30px;
}
.ab-sign > h5{
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.mv-section{padding: 100px 0 200px; overflow: hidden; background-color: #000; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover;}
.mv-tit{position: relative; display: inline-block; width: 50%; z-index: 7; color: #fff; padding-top: 100px; overflow: hidden;}
.mv-tit > h2{font-size: 60px; margin-bottom: 1.5rem; line-height: 1; font-weight: 500;}
.mv-tit > p{font-size: 20px; font-weight: 400; line-height: 1.6;}
.mv-tit.ani{transform: translateX(100px); opacity: 0; transition: .7s;}
.mv-tit.ani.act{transform: translateX(0); opacity: 1;}
.mv-wrap > li{position: relative; text-align: right; margin-top: -260px;}
.mv-wrap > li > .mv-box{display: inline-block; text-align: left; width: 43.5%; transition: .5s;}
.mv-wrap > li .mv-img{margin-bottom: 1.5rem;}
.mv-wrap > li .mv-img img{width: 100%; }
.mv-txt{padding-left: 1rem;}
.mv-txt > h3{position: relative; display: inline-block; font-size: 30px; margin-bottom: .8rem; color: #fff; font-weight: 500; position: relative;}
.mv-txt > h3::after{content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; right: -15px; top: 0; background-color:#00AF19;}
.mv-txt > p{font-size: 18px; color: #fff;}
.mv-wrap > li:nth-child(1){z-index: 6; margin-top: -230px;}
.mv-wrap > li:nth-child(2){z-index: 5; text-align: left;}
.mv-wrap > li:nth-child(3){z-index: 4;}
.mv-wrap > li:nth-child(4){z-index: 3; text-align: left;}
.mv-wrap > li:nth-child(5){z-index: 2; }
.mv-wrap > li:nth-child(6){z-index: 1; text-align: left;}
.mv-wrap > li.ani{transform: translateY(50px); opacity: 0; transition: .8s;}
.mv-wrap > li.ani.act{transform: translateY(0); opacity: 1;}

.mv-caption{
  width: 100%;
  padding: 0 130px;
  position: absolute;
  bottom: 130px;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: #fff;
}
.mv-caption > h3{
  font-size: 60px;
  font-weight: 900;
}
.mv-caption > p{
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  padding-left: 3rem;
  text-align: right;
  position: relative;
}
.mv-caption > p::after{
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0;
  left: 0;
}

.pm-section{
  padding: 100px 0;
  background-color: #fff;
}
.pm-wrap{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4rem;
}
.pm-wrap:last-child{
  margin-bottom: 0;
}
.pm-box{
  width: 48%;
}
.pm-img{
  display: flex;
  width: 100%;
  position: relative;
}
.pm-img img{
  width: 100%;
}
.pm-caption{
  width: 100%;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.60);
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
}
.pmc-box{
  width: 50%;
  color: #fff;
}
.pmc-box > h5{
  font-size: 24px;
  font-weight: 400;
}
.pmc-box > h5 > span{
  font-weight: 800;
  display: inline-block;
  margin-right: 8px;
}
.pmc-box > p{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* media-query */

@media(min-width:1200px){
  .d-lg-block{display: block;}
  .d-lg-none{display: none;}

  .ani.up.delay{
    transition: 1s opacity 0.2s, 1s transform 0.2s;
  }
  .ani.up.delay2{
      transition: 1s opacity 0.5s, 1s transform 0.5s;
  }
  .ani.up.delay3{
      transition: 1s opacity 0.8s, 1s transform 0.8s;
  }

  .pm-caption{
    min-height: 116px;
  }
}

@media(max-width:1399px){
  .page-con{
    padding: 0 75px;
  }
  .mv-caption{
    padding: 0 75px;
  }
  
}
@media(max-width:1199px){
  .d-block{display: block;}
  .d-none{display: none;}

  .page-con{
    padding: 0 15px;
  }
  .mv-caption{
    padding: 0 15px;
  }

  .greet-tit > h3{
    font-size: 26px;
    margin-bottom: 1rem;
    line-height: 1.3;
  }
  .greet-tit > p{
    font-size: 14px;
    line-height: 1.5;
  }
  .scroll > p{
    font-size: 14px;
  }

  .about-section{
    padding: 70px 0 140px;
  }
  .about-wrap{
    flex-direction: column;
  }
  .about-img{
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .about-caption{
    width: 100%;
    padding: 0;
  }
  .about-tit > h5{
    font-size: 16px;
    margin-bottom: 5px;
  }
  .about-tit > h3{
    font-size: 30px;
    margin-bottom: 1.5rem;
  }
  .about-tit > p{
    font-size: 16px;
    line-height: 1.6;
  }

  .about-mq{
    animation: 40s mqtxt infinite linear;
    bottom: 2.5rem;
  }
  .about-mq > li{
    font-size: 70px;
    margin-right: 1.5rem;
  }

  .ab-section{
    padding: 50px 0;
  }
  .ab-section .about-tit{
    margin-bottom: 2rem;
  }
  .ab-wrap{
    flex-direction: column;
  }
  .ab-lt{
    width: 100%;
    margin-bottom: 1rem;
  }
  .ab-rt{
    width: 100%;
  }
  .ab-caption{
    margin: 2rem 0;
  }
  .ab-caption > p{
    font-size: 16px;
    line-height: 1.6;
  }

  .mv-section{
    padding: 50px 0 100px;
  }
  .mv-caption{
    flex-direction: column;
    bottom: 40px;
  }
  .mv-caption > h3{
    font-size: 30px;
    text-align: right;
  }
  .mv-caption > p{
    font-size: 16px;
    padding-left: 0;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }
  .mv-caption > p::after{
    display: none;
  }
  .mv-caption > p::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
  }
  .mv-tit{width: 100%; padding: 10px 15px 0; }
	.mv-tit > h2{font-size: 30px; margin-bottom: 1rem;}
	.mv-tit > p{font-size: 16px;}
	.mv-wrap > li{margin-top: 5vh;}
	.mv-wrap > li:nth-child(1){margin-top: 5vh;}
	.mv-wrap > li > .mv-box{width: 75%;}
	.mv-wrap > li .mv-img{margin-bottom: 1rem;}
	.mv-txt{padding: 0 15px;}
	.mv-txt > h3{font-size: 22px; margin-bottom: .3rem;}
	.mv-txt > p{font-size: 14px;}

  .pm-section{
    padding: 70px 0;
  }
  .pm-wrap{
    flex-direction: column;
    margin-bottom: 0;
  }
  .pm-box{
    width: 100%;
    margin-bottom: 2rem;
  }
  .pm-caption{
    flex-direction: column;
  }
  .pmc-box{
    width: 100%;
  }
  .pmc-box:first-child{
    margin-bottom: 1rem;
  }
  .pmc-box > h5{
    font-size: 20px;
  }
  .pmc-box > p{
    font-size: 14px;
    line-height: 1.3;
  }
}
@media(max-width:600px){
  
}

/* animation */

.ani.up{
  transform: translateY(100px);
  opacity: 0;
  transition: 1s;
}

.ani.up.act{
  transform: translateY(0);
  opacity: 1;
}