@charset "utf-8";

/* position: sticky使いたいとき */
.body_wrapper {
  overflow: inherit !important;
}
.footer-outer{
  display: none;
}
.header{
  z-index: 999;
  position: relative;
}

.fixed {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: 111;

  }
footer{
  margin: 0 auto !important;
}
#sp-footer{
  z-index: 2;
  position: relative;
  background-color: #fff;
}
#pc-footer{
  z-index: 1;
  position: relative;
}
.sns-area {
  margin: 0 auto !important;
  padding: 5rem;
  z-index: 1;
  position: relative;
  background-color: #fff;
}
#pc-footer .sns-area{
  background-color: inherit;
}

footer .copyright {
  border-bottom: 10px solid #fff;
  margin: 10px 0 0 !important;
}
@media (min-width: 769px){
.copyright {
    height: 70px !important;
}
}
@media (max-width: 768px){
  .sns-area {
   
  }
  footer .copyright {
    margin: 0 !important;
    padding: 30px 0;
  }
}


.header-main, .sp-header, .header {
  background-color: #fff !important;
}

.sp {
  display: none;
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}


body{
  opacity: 0;
  animation: fadeIN 1.5s 1s forwards;
 }
 @keyframes fadeIN {
  100% {
  opacity: 1;
  }
  }
  @keyframes fadeOUT {
    100% {
    opacity: 0;
    }
    }
.lp-main {
  line-height: 1.8;
}

.lp-main img{
  max-width: 100%;
  height: auto;
}

.inner{
  max-width: 900px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.lp-main{
  position: relative;
}

.mv_img{
  height: 100vh;
  position: sticky;
  top: 0;
}
.mv_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  vertical-align: bottom;
}



.grdBG{
  transition:  1s 0.5s;
  background: linear-gradient(45deg, #00456642,#9844b736,#206434ad);
  animation: bggradient 8s ease infinite;
  background-size: 200% 200%;
  position: sticky;
  top: 0;
}

@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.grdBG.on{
  opacity: 1;
  
}

.lead{
  position: sticky;
  top: 0;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 18px;
  line-height: 2;
  width: 100%;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.lead__inner{
  padding: 320px 0 0;
}

.mv_img{
  opacity: 0;
  animation: fadeIN  3.5s 5s forwards;
}

.mv_logo{
  max-width: 280px;
  width: 50%;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  padding: 20px 0;
}


.mv_logo_n{
  /* opacity: 0; */
  /* animation: fadeIN 1.5s 2.5s forwards; */
}

.mv_logo_n::after{
    content:"";
    height:100%;
    width:30px;
    position:absolute;
    top:0;
    left:0;
    background-color: #fff;
    opacity:0;
    -webkit-transform: rotate(45deg);
    -webkit-animation:reflection 2.5s 1s ease-in-out forwards;
}

.mv_logo_w{
  opacity: 0;
  animation: fadeIN  8s 4s forwards;
}


@keyframes reflection {
  0% {transform: scale(0) rotate(45deg); opacity: 0; }
  26% {transform: scale(0) rotate(45deg); opacity: 0.5; }
  27% {transform: scale(4) rotate(45deg); opacity: 1; }
  30% {transform: scale(50) rotate(45deg); opacity: 0; }
  }


.sec1 {
  transition: 1s;
  position: sticky;
  top: 0;
}
.sec1.off{
  opacity: 0;
}

.sec_point,
.sec_dia{
  position: sticky;
  top: 0;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  
}

.sec_point{
/* padding: 180px 0;*/
text-align: center; 
line-height: 2;
 color: #fff;
 font-size: 13px;
 padding: 60px 0 120px;
}

.point__link {
  display: table;
  margin: 80px auto 0;
  border-bottom: 1px solid;
  color: #fff;
}

.point__link + p {
  margin-top: 10px;
  font-size: 12px;
}

.sec_point h2{
  font-size: 3.6rem;
  text-align: center;
  color: #fff;
  font-weight: 300;
  letter-spacing: 5px;
  margin-bottom: 40px;
}

.sec_point h2 span{
  font-size: 130%;
}

@media (max-width: 768px) {

.mv_logo {
  padding: 20px 0 80px;
}
  
.lead__inner{
  font-size: 16px;
  padding: 75% 10px 0;
}
  .sec_point h2{
    font-size: 20px;
  }
}

.sec_dia{
  /* padding: 0 0 180px; */
  background-color: rgba(233, 233, 233, 0.5);
  transition: 2s;
  padding: 80px 0;
}


.sec_dia.on{
  background-color:#fff;
}

.sec_dia .inner{
  display: flex;
  /* background: #fff; */
  padding: 50px 100px;
  max-width: 1200px;
  align-items: center;
}

.dia_img{
  width: 60%;
}
.dia_ss{
  width: 40%;
  padding-left: 80px;
}
.dia_logo{
  position: relative;
}

.slide .slick-list{
  border-radius: 50%;
  box-shadow: 0px 0px 10px -5px #777777;
  overflow: hidden;
  margin: 50px auto 0;
  width: 80%;
}

@media (max-width: 768px) {
  .sec_dia .inner{
    flex-direction: column;
    padding: 30px 0 80px;
  }

  .dia_img{
    width: 100%;
  }
  .dia_ss{
    width: 100%;
    padding-left: 0;
  }
  .dia_logo {
    position: relative;
    margin: -30px 0 0 50px;
}
}

.slick-dots li{
  margin: 0;
  width: 15px;
}
.slick-dots li button {
  width: 15px;
}

/* .slick-dots li button:before {
  font-size: 18px
} */


.slide_txt{
  text-align: center;
  margin: 30px 0 0;
}
.item_txtWrap span{
  font-size: 10px;
}
.item_txtWrap p:nth-of-type(2){
  font-size: 80%;
}
.item_txtWrap a{
  display: block;
  color: #613478;
  font-size: 12px;
  font-weight: bold;
}

.item_txtWrap a i{
  margin: 0 0 0 5px;
}

.on .reflection{
/* display:inline-block; */
overflow:hidden;
}
 
.on .reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
/* -webkit-animation: reflection 7s ease-in-out infinite; */
animation: reflection_op 2s ease-in-out infinite;
}
 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
86% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
87% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.lp-products-button a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 21px 58px;
  border: 1px solid #613478;
  color: #fff;
  background: #613478;
  text-align: center;
  border-radius: 50px;
  font-size: 16px;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
  /* color: #613478; */
 
}



.lp-sec-bnr{
  text-align: center;
  padding: 0px 0 100px;
  background-color: #fff;
  position: relative;
  display: none;
}

@media (max-width: 768px) {
  .lp-products-button a {
        padding: 10px 58px;
  }
}