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


/* content
--------------------------------------------------*/
.lpbox , #lpfooter {
  font-size: 18px;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:#303030;
  line-height:1.5em;
}
.lpbox a , #lpfooter a{
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}
.lpbox a:hover, #lpfooter a:hover{
  text-decoration: underline;
}
.lpbox span, #lpfooter span {
  font-size: inherit;
  font-weight: inherit;
}
.lpbox img ,
#lpfooter img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
.lpbox img.img-t ,
#lpfooter img.img-t {
  vertical-align: top;
}
/* cart css reset */

.lpbox header ,
.lpbox h1 ,
.lpbox h2 ,
.lpbox h3 ,
.lpbox p ,
.lpbox dl ,
.lpbox dt ,
.lpbox dd ,
.lpbox div ,
.lpbox section ,
.lpbox span {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter footer ,
#lpfooter div,
#lpfooter p {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter ul,
#lpfooter li {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}


/*******************
 LP style
********************/
html {
  min-width: 1100px;
  margin: 0 auto;
}
.lpbox .hover{
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
.lpbox .hover:hover{
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
/*
横幅の大きい画像を設定した最小幅でトリミング
デフォルトの設定は最小1100px、画像幅1500pxなので適宜調整してください
*/
.lpbox .ovf__area{
  text-align: center;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 1100px;
}
.lpbox .ovf__box {
  display: block;
  text-align: center;
  position: relative;
  top: 0;
  left: 50%;
  width: 1800px;
  -webkit-transform: translate3d(-50% , 0 , 0);
  -ms-transform: translate3d(-50% , 0 , 0);
  -o-transform: translate3d(-50% , 0 , 0);
  transform: translate3d(-50% , 0 , 0);
  z-index: 5;
  margin: 0;
}


/*-- fv -------------------------------------*/
.lpbox .fv {
  text-align: center;
  overflow: hidden;
  position: relative;
  margin:0 auto;
  width: 100%;
}
.lpbox:after {
  content: "";
  display: block;
  position: fixed;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: calc(100vw - calc(100vw - 100%));
  height: 100vh;
  background: url("../img/fv_bg.jpg") no-repeat center bottom;
  background-size: cover;
  z-index: -2;
}
.lpbox .fv .fv__box{
  padding-top: 30px;
  position: relative;
  width: 1200px;
}
.lpbox .fv .fv__item--01,.lpbox .fv .fv__item--02,
.lpbox .fv .fv__item--03,.lpbox .fv .fv__item--04{
  position: absolute;
}
.lpbox .fv .fv__item--01{
  top:320px;
  left:-3%;
}
.lpbox .fv .fv__item--02{
  top:350px;
  left:-5%;
}
.lpbox .fv .fv__item--03{
  bottom: -190px;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.lpbox .fv .fv__item--04{
  top: 395px;
  right: 4%;
  transform-origin: center bottom;
}
.lpbox .fv .fv__effect{
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.lpbox .fv .fv__effect p:nth-child(1),.lpbox .fv .fv__effect p:nth-child(2){
  position: absolute;
  mix-blend-mode: screen;
  z-index: 5;
}
.lpbox .fv .fv__effect p:nth-child(1){
  top: -280px;
  left: -30%;
}
.lpbox .fv .fv__effect p:nth-child(2){
  top: -700px;
  right: -22%;
}
.lpbox .fv .fv__sub{
  margin: 200px 0 40px 0;
}
/*- cta -------------------------------------------*/
.cta{
  position: relative;
  width: 628px;
}
.cta .cta__float{
  position: absolute;
  top: -10px;
  right: -20px;
  filter: drop-shadow(10px 10px 5px rgba(69,69,69,0.50)) ;
}
.cta .cta__float a:hover{
opacity: 1;
}
.cta .cta__btn{
  margin:0 auto;
}
/*- 社長メッセージ/message -------------------------------------------*/
.lpbox .message {
  position: relative;
  margin-top: 40px;
  padding-top: 20px;
}
.lpbox .message .message__item--01,.lpbox .message .message__item--02{
  position: absolute;
}
.lpbox .message .message__item--01{
  top: -20px;
  right: 22%;
}
.lpbox .message .message__item--02{
  bottom: 300px;
  left: 12%;
}
/*- プレイバック/playback -------------------------------------------*/
.lpbox .playback{
  overflow:hidden;
  position: relative;
  width: 100%;
  margin-top: 50px;
}
.lpbox .playback:before{
  content: "";
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  height: 100%;
  display: block;
  background:url("../img/playback_bg.png")
  no-repeat center 0px,
  url("../img/business_bg.jpg")
  repeat center top;
  background-size: 100%, auto;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 6%, rgba(0,0,0,1) 15%);
          mask-image: linear-gradient(rgba(0,0,0,0) 6%, rgba(0,0,0,1) 15%);
}
.lpbox .playback .playback__item--01,.lpbox .playback .playback__item--02{
  position: absolute;
}
.lpbox .playback .playback__item--01{
  top: 90px;
  left: 18%;
}
.lpbox .playback .playback__item--02{
  top: 200px;
  right: 14%;
  z-index: 5;
}
/*- ビジネス/business -------------------------------------------*/
.lpbox .business {
  position: relative;
  width: 100%;
  margin-top: -280px;
}
.lpbox .business .business__lamp{
  position: relative;
  width: 1100px;
  margin: 0 auto;
}
.lpbox .business .business__lamp p:nth-child(1),.lpbox .business .business__lamp p:nth-child(3),
.lpbox .business .business__lamp p:nth-child(5){
  position: absolute;
  z-index: 5;
}
.lpbox .business .business__lamp p:nth-child(1){
  top: 400px;
  left: -30%;
}
.lpbox .business .business__lamp p:nth-child(3){
  top: 1040px;
  right: -32%;
}
.lpbox .business .business__lamp p:nth-child(5){
  top: 1880px;
  left: -30%;
}
.lpbox .business .business__lamp p:nth-child(2),.lpbox .business .business__lamp p:nth-child(4),
.lpbox .business .business__lamp p:nth-child(6){
  position: absolute;
  mix-blend-mode: screen;
  z-index: 5;
}
.lpbox .business .business__lamp p:nth-child(2){
  top: 300px;
  left: -40%;
}
.lpbox .business .business__lamp p:nth-child(4){
  top: 930px;
  right: -42%;
}
.lpbox .business .business__lamp p:nth-child(6){
  top: 1770px;
  left: -40%;
}
.lpbox .business .business__box{
  position: relative;
}

/* .lpbox .business .business__item--02,
.lpbox .business .business__item--03,
.lpbox .business .business__item--04,
.lpbox .business .business__item--05,
.business__item--06{
  position: absolute;
}
.business__spin{
  position: relative;
  margin: 0 auto;
  width: 203px;
  height: 290px;
}
.business__item{
  position: relative;
  transform-style: preserve-3d;
  transform:rotateZ(-25deg);
}
.business__item p {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-backface-visibility:hidden;
    backface-visibility: hidden;
}
.business__item p:nth-child(3){
  transform: rotateY(180deg);
} */

.lpbox .business .business__item--01,.lpbox .business .business__item--02,
.lpbox .business .business__item--03,.lpbox .business .business__item--04,
.lpbox .business .business__item--05,.business__item--06{
  position: absolute;
}
.lpbox .business .business__item--01{
  top: 80px;
  left: 7%;
  transform:rotate(-25deg);
  transform-origin:0 0;
  margin-bottom:4em;
}
.lpbox .business .business__item--02{
  top: 350px;
  right: -28%;
  width: 100%;
}
.lpbox .business .business__item--03{
  top: 880px;
  left: 12%;
}
.lpbox .business .business__item--04{
  top: 1600px;
  right: -30%;
  width: 100%;
}
.lpbox .business .business__item--05{
  top: 2100px;
  left: 11.5%;
}
.lpbox .business .business__item--06{
  top: 2450px;
  right: 10%;
  transform:rotate(25deg);
  transform-origin:0 0;
  margin-bottom:4em;
}
/*- パーソナル/personal -------------------------------------------*/
.lpbox .personal{
  content: "";
  display: block;
  background:url("../img/personal_bg_01.png")
  no-repeat center top,
  url("../img/personal_bg_02.png")
  repeat center top;
  background-size: 100%, auto;
}
.lpbox .personal .personal__box--01{
  position: relative;
  padding-top: 500px;
}
.lpbox .personal .personal__box--02{
  position: relative;
  margin-bottom: 68px;
}
.lpbox .personal .personal__boxitem--01,.lpbox .personal .personal__boxitem--02,
.lpbox .personal .personal__boxitem--04,.lpbox .personal .personal__boxitem--03,
.lpbox .personal .personal__boxitem--05 {
  position: absolute;
}
.lpbox .personal .personal__boxitem--01{
  top: 12%;
  left: 19%;
  overflow: hidden;
  background:url("../img/personal_boxitem_01.png")no-repeat;
  display: block;
  background-size: 100%;
  width: 275px;
  height: 408px;
}
.lpbox .personal .personal__boxitem--01 a{
  background:url("../img/personal_boxitem_01.png")no-repeat;
  display: block;
  background-size: 100%;
  width: 275px;
  height: 408px;
  cursor: pointer;
  transition : 1s;
}
.lpbox .personal .personal__boxitem--01 a:hover{
  background:url("../img/personal_boxitem_01_hover.png");
}
.lpbox .personal .personal__boxitem--02{
  top: 80px;
  left:38%;
}
.lpbox .personal .personal__boxitem--03{
  top: 120px;
  right: 15%;
}
.lpbox .personal .personal__boxitem--03 a{
  background:url("../img/personal_boxitem_03.png")no-repeat;
  display: block;
  background-size: 100%;
  width: 275px;
  height: 408px;
  cursor: pointer;
  transition : 1s;
}
.lpbox .personal .personal__boxitem--04{
  top: 1000px;
  right: -28%;
  width: 100%;
}
.lpbox .personal .personal__boxitem--05{
  top: 80px;
  left: 10%;
}
.lpbox .personal .personal__inner{
  position: relative;
  width: 1100px;
  margin: 0 auto;
}
.lpbox .personal .personal__inneritem--01,.lpbox .personal .personal__inneritem--02,
.lpbox .personal .personal__inneritem--03,.lpbox .personal .personal__inneritem--04,
.lpbox .personal .personal__inneritem--05,.lpbox .personal .personal__effect{
  position: absolute;
}
.lpbox .personal .personal__inneritem--01{
  top: 10px;
  left: -17%;
}
.lpbox .personal .personal__inneritem--02{
  top: -90px;
  left: 30%;
}
.lpbox .personal .personal__inneritem--03{
  top: -50px;
  right: 14%;
  z-index: -5;
}
.lpbox .personal .personal__inneritem--04{
  top: 220px;
  right: -5%;
  overflow: hidden;
  background:url("../img/personal_inneritem_04.png")no-repeat;
  display: block;
  background-size: 100%;
  width: 195px;
  height: 210px;
}
.lpbox .personal .personal__inneritem--04 a{
  background:url("../img/personal_inneritem_04.png")no-repeat;
  display: block;
  background-size: 100%;
  width: 195px;
  height: 210px;
  cursor: pointer;
  transition : 1s;
}
.lpbox .personal .personal__inneritem--04 a:hover{
  background:url("../img/personal_inneritem_04_hover.png")no-repeat;
}
.lpbox .personal .personal__inneritem--05{
  top: 260px;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.lpbox .personal .personal__effect{
  mix-blend-mode: screen;
}
.lpbox .personal .personal__inner p:nth-child(6){
  top: 260px;
  left: 33%;
}
.lpbox .personal .personal__inner p:nth-child(7){
  top: 328px;
  left: 38.5%;
}
.lpbox .personal .personal__inner p:nth-child(8){
  top: 400px;
  right: 42%;
}
.lpbox .personal .personal__inner p:nth-child(9){
  top: 260px;
  right: 38.5%;
}
/*- パートナー/partner -------------------------------------------*/
.lpbox .partner {
  overflow:hidden;
  position: relative;
  margin: auto;
}
.lpbox .partner .partner__title{
  margin: 100px 0 700px;
}
.lpbox .partner .partner__item--01::before,.lpbox .partner .partner__item--01,
.lpbox .partner .partner__item--02,.lpbox .partner .partner__item--03{
  position: absolute;
}
.lpbox .partner .partner__item--01 {
  top:350px;
  left: 12%;
  z-index: 5;
}
.lpbox .partner .partner__item--02 {
  top:600px;
  right: 18%;
  filter: drop-shadow(14px 21px 18px rgba(6,21,32,0.50)) ;
}
.lpbox .partner .partner__item--03 {
  top:470px;
  right: 17%;
}
.lpbox .partner .partner__effect{
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.lpbox .partner .partner__effect p:nth-child(1),.lpbox .partner .partner__effect p:nth-child(2){
  position: absolute;
  mix-blend-mode: screen;
}
.lpbox .partner .partner__effect p:nth-child(1){
  top: -2600px;
  left: -20%;
  z-index: 5;
}
.lpbox .partner .partner__effect p:nth-child(2){
  top: -3000px;
  right: -27%;
  z-index: 5;
}
/*- まとめ/greeting -------------------------------------------*/
.lpbox .greeting {
  position: relative;
}
.lpbox .greeting__title{
  margin-bottom: 50px;
}
.lpbox .greeting__item--01,.lpbox .greeting__item--02,
.lpbox .greeting__item--03,.lpbox .greeting__item--04,
.lpbox .greeting__item--05,.lpbox .greeting__item--06,
.greeting__item--07{
  position: absolute;
}
.lpbox .greeting__item--03,.lpbox .greeting__item--05,
.lpbox .greeting__item--06{
}
.lpbox .greeting__item--01{
  bottom: 100px;
  left: 23%;
}
.lpbox .greeting__item--02{
  bottom: 7px;
  left: 42.5%;
}
.lpbox .greeting__item--03{
  bottom: -3px;
  left: 49%;
}
.lpbox .greeting__item--04{
  bottom: 20px;
  right: 30%;
}
.lpbox .greeting__item--05{
  bottom: 320px;
  right: 18.7%;
}
.lpbox .greeting__item--06{
  bottom: 330px;
  right: 19%;
}
.lpbox .greeting__item--07{
  bottom: 250px;
  right: 12%;
  z-index: -1;
}
/*- フッター/footer -------------------------------------------*/
#lpfooter .footer__link {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 2em;
  width: 100%;
}
#lpfooter #copy {
  text-align: center;
  width: 100%;
  padding: 18px 0;
  background-image: url(../img/footer_bg.jpg);
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
}

/*- cssアニメーション -------------------------------------------*/
.flash01{
  animation: flash 2s linear infinite;
}
@keyframes flash {
  0%,100% {opacity: 1;}
  50% {opacity: 0.3;}
}
.flash02{
  animation: flash 4s linear infinite;
}
@keyframes flash {
  0%,100% {opacity: 1;}
  50% {opacity: 0.3;}
}
.fuwafuwa01{
  animation: fuwafuwa01 2s infinite;
}
@keyframes fuwafuwa01 {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(0px);}
}
.fuwafuwa02{
  animation: fuwafuwa02 2s infinite;
}
@keyframes fuwafuwa02 {
  0% {transform: translateY(0px);}
  50% {transform: translateY(50px);}
  100% {transform: translateY(0px);}
}
.fuwafuwa03{
  animation: fuwafuwa03 3.5s infinite;
}
@keyframes fuwafuwa03 {
  0% {transform: translateY(0px);}
  50% {transform: translateY(50px);}
  100% {transform: translateY(0px);}
}
.yurayura{
  animation: yurayura 2.5s linear infinite;
}
@keyframes yurayura {
  0% , 100%{transform: rotate(5deg);}
  50%{transform: rotate(-5deg);}
}
.swing{
  animation: swing 3s linear infinite;
  transform-origin: top;
}
@keyframes swing {
  0%{transform: rotate(0deg);}
  25%{transform: rotate(5deg);}
  50%{transform: rotate(0deg);}
  75%{transform: rotate(-5deg);}
  100%{transform: rotate(00deg);}
}
.buruburu {
    animation: hurueru .1s  infinite;
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.poyon {
  animation: poyon 1.6s linear 0s 1;
  animation-iteration-count: infinite;
}
@keyframes poyon {
  0%   { transform: scale(0.9, 1.0) translate(0%, -10%); }
  10%  { transform: scale(0.9, 1.0) translate(0%, -5%); }
  20%  { transform: scale(1.0, 0.6) translate(0%, 15%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -60%); }
  40%  { transform: scale(0.95, 1.0) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.0) translate(0%, -10%); }
  60%  { transform: scale(1.0, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.spin {
  animation: cardimage 3s ease-in-out infinite alternate;
}
@keyframes cardimage {
  0%  {transform: rotateY(0deg);}
  100%  {transform: rotateY(360deg);}
}
/* .lpbox .animitem {
  display: block;
  -webkit-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  transition: all 1.2s ease;
}
.lpbox .fadein {
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
} */