@charset "UTF-8";
/* CSS Document */

/* ルートの文字サイズを10pxに設定 */

/*font-weight*//*
Regular　400
Medium　 500
Bold　   700
*/

html {
font-size: 62.5%;
}

body{
  margin: 0;
  padding: 0;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem; /*16px*/
  line-height: 1.8;
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
#page_menu{
  display: none;
}

/*----------ヘッダ----------*/
#header-wrap{
  font-weight: 700;
  letter-spacing: 0.08rem;
  width: 100%;
  height: 10rem;
  padding: 0 4rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  background: rgba(255,255,255);
  z-index: 100;
}

 /*グローバルナビゲーション*/
  .gnavi{
  }
    .gnavi ul{
      display: flex;
    }
      .gnavi ul li{
        /*margin: 0 3rem 0 0;*/
        padding: 0 1.5rem;
        line-height: 2.5;
        font-weight: 700;
      }
        .gnavi li a{
          display: block;
          text-decoration: none;
          color: #000000;
           font-weight: 700;
          letter-spacing: 0.1em;
        }
    /*中心から外に線が伸びる*/
    .gnavi li a{
	    position: relative;/*線の基点とするためrelativeを指定*/
    }
    .gnavi li.current a,
    .gnavi li a:hover{
    	color:#000000;
    }
    .gnavi li a::after {
      content: '';
      position: absolute;/*絶対配置で線の位置を決める*/
      bottom: 0;
      left: 0;
      /*線の形状*/
      width: 100%;
      height: 2px;
      background:#000000;
      /*アニメーションの指定*/
      transition: all .3s;
      transform: scale(0, 1);/*X方向0、Y方向1*/
      transform-origin: center top;/*上部中央基点*/
    }

    /*現在地とhoverの設定*/
    .gnavi li.current a::after,
    .gnavi li a:hover::after {
      transform: scale(1, 1);/*X方向にスケール拡大*/
    }

  /*ハンバーガーメニュー*/
  .openbtn{
	  /*ボタン内側の基点となるためrelativeを指定。
    追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	  position: relative;
  	cursor: pointer;
    width: 30px;
    height:30px;
    z-index: 99999;
  }
    /*ボタン内側*/
    .openbtn span{
      display: inline-block;
      transition: all .4s;/*アニメーションの設定*/
      position: absolute;
      left: 0;
      height: 1px;
    	background: #000000;
    	width: 100%;
    }
    .openbtn span:nth-of-type(1) {
    	top:6px;	
    }
    .openbtn span:nth-of-type(2) {
    	top:14px;
    }
    .openbtn span:nth-of-type(3) {
    	top:22px;
    }
    /*activeクラスが付与されると線が回転して×に*/
    .openbtn.active span:nth-of-type(1) {
      top: 8px;
      left: 0;
      transform: translateY(6px) rotate(-45deg);
      width: 100%;
    }
    .openbtn.active span:nth-of-type(2) {
    	opacity: 0;/*真ん中の線は透過*/
    }
    .openbtn.active span:nth-of-type(3){
      top: 20px;
      left: 0;
      transform: translateY(-6px) rotate(45deg);
      width: 100%;
    }


  /*ハンバーガーメニュー内グローバルナビゲーション*/
  #g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 99;
    /*ナビのスタート位置と形状*/
	  top:-300%;
    left:0;
	  width:100%;
    height: 100vh;/*ナビの高さ*/
	  background:#FFFFFF;
    /*動き*/
	  transition: all 0.6s;
  }
    /*アクティブクラスがついたら位置を0に*/
      #g-nav.panelactive{
        top: 0;
      }
      /*ナビゲーションの縦スクロール*/
      #g-nav.panelactive #g-nav-list{
      /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 99; 
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      #g-nav .g-nav-wrap{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width: 122rem;
        
      }
      #g-nav .g-nav-inner{
        margin: 12rem 4rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
      }

/*ナビゲーション*/
#g-nav ul{
  width: 55rem;
  border-top: #B3B3B3 1px solid;
}
  #g-nav li{
    list-style: none;
    border-bottom: #B3B3B3 1px solid;
  }
  #g-nav li span{
    font-size: 1.4rem;
    margin: 0 0 0 1rem;
    display: inline-block;
  }
  #g-nav li a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  	color: #000000;
  	text-decoration: none;
    font-size: 3.6rem;
    line-height: 1;
    font-weight: 700;
     padding: 4rem 0 4.5rem 1.5rem;
  }
  #g-nav ul ul.business{
    border: none;
    margin: -3.5rem 0 3.2rem;
  }
    #g-nav ul ul.business li{
      border: none;
    }
    #g-nav ul ul.business li span{
      font-size: 1.4rem;
      margin: 0 0 0 1rem;
      display: inline-block;
    }
     #g-nav ul ul.business li a{
       display: flex;
       align-items: center;
       justify-content: flex-start;
       color: #000000;
       text-decoration: none;
       font-size: 2.8rem;
       padding: 0.7rem 0 0.7rem 3.5rem;
      }

/*サイドメニュー *-- COMPANY / SUSTAINABILITY --*/
aside{
  position: sticky;
  right: 0;
  width: 22.9rem;
  height: 100%;
  top: 15rem;
  padding: 0 0 0 5rem;
  box-sizing: border-box;
  text-align: left;
}
  .with-side-wrap  aside ul{
    width: 22.9rem;
  }
    .with-side-wrap  aside ul li{
    margin: 0 0 3.4rem;
    }
    .with-side-wrap  aside ul li a{
      font-size: 1.6rem;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-decoration: none;
      color: #999999;
      display: inline-block;
    }
    .with-side-wrap  aside ul li a span{
      font-size: 1.3rem;
      line-height: 1.5;
      font-weight: 400!important;
      letter-spacing: 0;
      text-decoration: none;
      color: #999999;
      display: inline-block;
      margin: 0.5rem 0 0 ;
    }
  .with-side-wrap  aside ul li.current a,
  .with-side-wrap  aside ul li.current a span,
  .with-side-wrap  aside ul li a:hover,
  .with-side-wrap  aside ul li a:hover span{
    color: #000000;
  }

main{
  padding: 10rem 0 0;
  margin: 0;
}

/*----------ページタイトル・パンくず枠----------*/
#main-head{
  margin: 0 3.9063%;
}
  /*ページタイトル*/
  #main-head .main-ttl{
    display: table-cell;
    vertical-align: middle;
    display: block;
  }
  #main-head .main-ttl h2{
    margin: 5.4025% 0 3.072%; 
    text-align: left;
  }
    #main-head .main-ttl h2 span.en{
      display: block;
      font-size: clamp(4.8rem, (100vw - 1024px) * 42 / 896 + 4.8rem, 9rem);
      line-height: 1;
      margin: 0 0 1.9068%;
    }
    #main-head .main-ttl h2 span.jp{
      display: block;
      font-size: clamp(1.8rem, (100vw - 1024px) * 16 / 896 + 1.8rem, 3.4rem);
      line-height: 1;
    }

  /*----------パンくずリスト枠----------*/
  #main-head .breadcrumb{
    font-family: specter, sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0.06rem;
    line-height: 1;
  }
    #main-head .breadcrumb ul{
      display: flex;
      justify-content: flex-end;
    }
    #main-head .breadcrumb ul li{
      display: flex;
      align-items: center;
      letter-spacing: 0.06rem;
    }
    #main-head .breadcrumb ul li a{
      text-decoration: none;
      color: #999;
    }
      #main-head .breadcrumb ul li:not(:last-of-type)::after{
        content: '';
        display: block;
        width: 1rem;
        height: 1px;
        background-color: #000;
        margin: 0 0.9rem;
      }
/*----------フッターお問い合わせ----------*/
#foot-con{
  box-sizing: border-box;
  width: 100%;
}
  #foot-con a{
    text-decoration: none;
  }
  #foot-con .f-con-wrap{
    display: flex;
    /*justify-content: space-between;
    align-items: center;*/
    overflow: hidden;
    position: relative;
    height: 29.2969%;
    margin: 7.8125% 0 0;
    padding: 11.2305% 0;
    background: #1D50A2;
    color: #fff;
  }
.business-margin{
  margin: -7.8125% 0 0;
}
  #foot-con .f-con-wrap::before {
    transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition-property: transform,opacity;
    transform: scale(1.05);
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../img/contact_bg.jpg") no-repeat center center;
    background-size: cover;
    opacity: 0;
    }
#foot-con .f-con-wrap:hover::before {
  opacity: 1;
  cursor: pointer;
}
    #foot-con .f-con-wrap h3.con{
      color: #FFF;
      margin: 0 0 0 9.7656%;
      text-align: left;
      position: relative;
      z-index: 1;
    }
      #foot-con .f-con-wrap h3.con span.en{
        display: block;
        font-weight: 700;  
        font-size: clamp(3.8rem, (100vw - 1024px) * 33 / 896 + 3.8rem, 7.1rem);
        line-height: 1;
        margin: 0 0 1.4648%;
      }
      #foot-con .f-con-wrap h3.con span.jp{
        display: block;
        font-weight: 700;  
        font-size: clamp(1.4rem, (100vw - 1024px) * 12 / 896 + 1.4rem, 2.6rem);
        line-height: 1;
      }

/*----------フッター----------*/
footer{
}
  footer .footer-wrap{
    padding: 5rem 2rem;
    text-align: center;
    color: #FFFFFF;
    background: #1D50A2;
    border-top: rgba(255,255,255,0.5) solid 1px;
  }
    footer .footer-wrap .inner{
      margin: 4rem auto;
      max-width: 94.4rem;
      width: 100%;
      display: flex;
      text-align: justify;
    }
      footer .footer-wrap .inner .f-l{
        border-right: rgba(255,255,255,0.5) solid 1px;
        display: flex;
        flex-wrap: wrap;
        width: 58.8983%;/*55.6rem*/
      }
        footer .footer-wrap .inner ul{
          font-size: 1.5rem;
          line-height: 1;
          padding: 0 4.2373% 0 0;/*0 4rem 0 0*/
        }
        footer .footer-wrap .inner ul li{
          margin: 0 0 1.5rem 2rem;
          list-style: initial;
        }
        footer .footer-wrap .inner ul li a{
          text-decoration: none;
          color: #FFFFFF;
        }
      footer .footer-wrap .inner .f-l-cr{
        display: flex;
        width: 100%;/*55.6rem*/
        font-size: 1.4rem;
        margin: 2rem 0 0;
      }
      footer .footer-wrap .inner .f-l-cr p{
        width: 85.6115%;/*47.6rem*/
      }
      footer .footer-wrap .inner .f-l-cr .sns{
        display: inline;
        width: 22.6619%;
      }
      footer .footer-wrap .inner .f-l-cr .sns img{
        display: inline;
      }
      footer .footer-wrap .inner .f-l-cr .sns img:last-child{
        margin: 0 0 0 6.9767%;/* 0 0 0 3rem*/
      }
      footer .footer-wrap .inner .f-r{
        margin: 0 0 0 5rem;
        font-size: 1.4rem;
        width: 29.8rem;
        display: flex;
        flex-wrap: wrap;
      }
      footer .footer-wrap .inner .f-r .address{
        margin: 0 0 2.5rem; 
      }
      footer .footer-wrap .inner .f-r .isms-logo{
        margin: 0 1.5rem 0 0;
      }
      footer .footer-wrap .inner .f-r .isms-txt{
        font-size: 1.2rem;
        line-height: 1.5;
        width: 14.5rem;
      }
     /*スマホ表示コピーライト＆snsロゴ*/
      footer .footer-wrap .inner .cr-sp{
        display: none;
      }

/*----------ボタン----------*/
.circle-btn {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 20.3rem; /* ボタンの最大幅 */
  padding: 1em 3.5em 1em 4.5em;
  color: #1D50A2; /* 文字色 */
  transition: 0.3s ease-in-out;
  font-weight: 500;
  font-size: 1.8rem;
  text-decoration: none;
}
.circle-btn::before, .circle-btn::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}
.circle-btn::before {
  width: 0.5em;
  height: 0.5em;
  left: 1.3em;
  border-top: solid 2px #fff; /* 矢印の色 */
  border-right: solid 2px #fff; /* 矢印の色 */
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}
.circle-btn::after {
  left: 0;
  background: #1D50A2; /* 背景色 */
  z-index: 1;
  width: 3.3em;
  height: 3.3em;
  border-radius: 3.3em;
  transform: translateY(-50%);
  transition: all 0.5s;
}
.circle-btn span {
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}
/* マウスオーバーした際のデザイン */
.circle-btn:hover span {
  color: #fff; /* 文字色 */
}
.circle-btn:hover:before {
  left: 3rem;
}
.circle-btn:hover:after {
  right: 0;
  width: 100%;
}

/*----------無限ループテキスト----------*/
.loop{
  overflow: hidden;
}
.loop-box {
  display: flex;
  width: 100vw;
}
.loop-item {
  flex: 0 0 auto;
  font-family: specter, sans-serif;
  font-weight: bold;
  font-size: clamp(13rem, (100vw - 1024px) * 120 / 896 + 13rem, 25rem);
  line-height: 1;
  white-space: nowrap;
  padding-right: 25px;
  padding-left: 25px;
  color: #F0F0F0;
}
.loop-item:nth-child(odd) {
    animation: loop 50s -25s linear infinite;
}
.loop-item:nth-child(even) {
    animation: loop2 50s linear infinite;
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}

/*----------改行----------*/
.br-sp{
  display: none;
}
.br-pc{
  display: block;
}



@media screen and (min-width: 1921px){
  #main-head .main-ttl h2 span.en{
     margin: 0 0 3.2rem;
  }
}
@media screen and (max-width: 1023px){
/*グローバルナビゲーション*/
  .gnavi{
    display: none;
  }
}
@media screen and (min-width:769px) and ( max-width:1220px) {
  /*ハンバーガーメニュー内グローバルナビゲーション*/
  #g-nav .g-nav-wrap{
     width: 100%;
   }
  #g-nav .g-nav-inner{
    margin: 12rem 4rem;
  }

/*ナビゲーション*/
#g-nav ul{
  width: 48.2456%;
}
  #g-nav li span{
    font-size: 1.4rem;
    font-size: clamp(1.0rem, (100vw - 769px) * 4 / 451 + 1.0rem, 1.4rem);
    margin: 0 0 0 1.8182%;
    display: inline-block;
  }
  #g-nav li a{
    font-size: clamp(2.2rem, (100vw - 769px) * 12 / 451 + 2.2rem, 3.6rem);
    line-height: 1;
    font-weight: 700;
    padding: 7.2727% 0 8.1818% 2.7273%;
  }
  /*ナビゲーション/business*/
  #g-nav ul ul.business{
    border: none;
    margin: -6.3636% 0 5.8182%;
    width: auto;
  }
    #g-nav ul ul.business li span{
      font-size: clamp(1.0rem, (100vw - 769px) * 4 / 451 + 1.0rem, 1.4rem);
      margin: 0 0 0 1.8182%;
    }
     #g-nav ul ul.business li a{
       font-size: clamp(1.7rem, (100vw - 769px) * 11 / 451 + 1.7rem, 2.8rem);
       padding: 1.2727% 0 1.2727% 6.3636%;
      }
}

@media screen and (max-width: 768px){
  /*----------ヘッダ----------*/
  #header-wrap{
    height: 6rem;
    padding: 0 2.4rem;
    align-items: center;
  }
  #header-wrap h1 img{
    width: 60%;
    vertical-align: middle;
  }
  main{
  padding: 6rem 0 0;
}
    /*ハンバーガーメニュー内グローバルナビゲーション*/
      /*ナビゲーションの縦スクロール*/
      #g-nav.panelactive #g-nav-list{
      /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 99; 
        width: 100%;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      #g-nav .g-nav-wrap{
        top:0;
        left:0;
        transform: translate(0,0);
        width: 100%;
      }
      #g-nav .g-nav-inner{
        margin: 10rem 2.4rem;
        display: block;
        justify-content: space-between;
      }

/*ナビゲーション*/
#g-nav ul{
  width: auto;
  border-top: #B3B3B3 1px solid;
}
  #g-nav ul:nth-of-type(2){
    border: none;
  }
  #g-nav li{
    border-bottom: #B3B3B3 1px solid;
  }
  #g-nav li span{
    font-size: 1.1rem;
    margin: 0.7rem 0 0;
    display: block;
  }
  #g-nav li a{
    display: block;
    align-items: center;
    justify-content: flex-start;
  	color: #000000;
  	text-decoration: none;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
     padding: 2rem 0 2rem 0.5rem;
  }
  /*ナビゲーション/business*/
  #g-nav ul ul.business{
    border: none;
    margin: 0 0 3.2rem;
  }
    #g-nav ul ul.business li{
      border: none;
    }
    #g-nav ul ul.business li span{
      font-size: 1.1rem;
      margin: 0.7rem 0 0;
      display: block;
    }
     #g-nav ul ul.business li a{
       display: block;
       align-items: center;
       justify-content: flex-start;
       color: #000000;
       text-decoration: none;
       font-size: 1.8rem;
       padding: 0.7rem 0 0.7rem 2rem;
      }
  
  /*----------ページタイトル・パンくず枠----------*/
  #main-head{
    margin: 0 2.4rem;
  }
  #main-head .main-ttl h2{
    margin: 3.8rem 0;
  }
  #main-head .main-ttl h2 span.en{
    font-size: clamp(3.3rem, (100vw - 375px) * 15 / 393 + 3.3rem, 4.8rem);
    }
  #main-head .main-ttl h2 span.jp{
    font-size: clamp(1.4rem, (100vw - 375px) * 4 / 393 + 1.4rem, 1.8rem);
    }
  /*----------パンくずリスト----------*/
  #main-head .breadcrumb{
    display: none;
  }
  /*----------フッターお問い合わせ----------*/
  #foot-con .f-con-wrap{
    padding: 12rem 0;
  }
  #foot-con .f-con-wrap h3.con span.en{
    font-size: clamp(3.3rem, (100vw - 375px) * 15 / 393 + 3.3rem, 4.8rem);
     margin: 0 0 0.8rem 0;
  }
  #foot-con .f-con-wrap h3.con span.jp{
    font-size: clamp(1.4rem, (100vw - 375px) * 4 / 393 + 1.4rem, 1.8rem);
  }
  
  /*----------フッター----------*/
  footer{
  }
  footer .footer-wrap{
    padding: 5rem 2.4rem;
  }
    footer .footer-wrap .inner{
      max-width: 76.8rem;
      width: 100%;
      box-sizing: border-box;
      display: block;
    }
      footer .footer-wrap .inner .f-l{
        border-right:none;
        border-bottom: rgba(255,255,255,0.5) solid 1px;
        display: block;
        width: 100%;
        padding: 0 0 5rem 0;
      }
        footer .footer-wrap .inner ul{
          padding: 0;
        }
        footer .footer-wrap .inner ul li{
        }
        footer .footer-wrap .inner ul li a{
          text-decoration: none;
          color: #FFFFFF;
        }
      footer .footer-wrap .inner .f-l-cr{
        display: none;
      }
      footer .footer-wrap .inner .f-r{
        margin: 5rem 0 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      footer .footer-wrap .inner .f-r .address{
        margin: 0 0 2.5rem; 
        width: 100%;
      }
      footer .footer-wrap .inner .f-r .isms-logo{
        margin: 0 1.5rem 0 0;
      }
      footer .footer-wrap .inner .f-r .isms-txt{
        width: 44%;
      }
      /*スマホ表示コピーライト＆snsロゴ*/
      footer .footer-wrap .inner .cr-sp{
        display: flex;
        justify-content: space-between;
        margin: 5rem 0 0;
        width: 100%;
      }
        footer .footer-wrap .inner .cr-sp p{
          font-size: 1.4rem;
          margin: 0 3rem 0 0;
        }
        footer .footer-wrap .inner .cr-sp div img{
          margin: 0 1.5rem 0 0;
        }
  
  /*----------ボタン----------*/
.circle-btn {
  max-width: 14.6rem; /* ボタンの最大幅 */
  padding: 1em 2em 1em 4em;
  font-size: 1.4rem;
}
  
  /*----------無限ループテキスト----------*/
  .loop-item {
    font-size: 10rem;
  }
  
  /*----------改行----------*/
  .br-sp{
    display: block;
  }
  .br-pc{
    display: none;
  }
}

/*===================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
    opacity: 0;
}

/*==================================================
ディレイスクロール
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/
.delay-box{
	opacity: 0;
}
/*動かしたい動き（” ふわっ”）*/
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*===================================
背景色が伸びて出現（左から右）
===================================*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
  }
}
/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700; 
}
@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
  }
}
/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 75%;
    background-color: #000;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

/*===================================
メイン画像（左から右）
===================================*/
.mv-animation {
  overflow: hidden;
  position: relative;
}

.mv-animation:before {
  animation: mv-animation 1s cubic-bezier(.4, 0, .2, 1) 0.7s forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes mv-animation {
  100% {
    transform: translateX(100%);
  }
}