@charset "utf-8";
/* base
==================================*/
	h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,li,ol,dl,dd,tr {
		font-size: 14px;
	}
	.pc {
		display:none !important;
	}
	input {
		-webkit-border-radius : 0;
		-webkit-appearance : none;
		-webkit-tap-highlight-color : rgba(0,0,0,0);
	}
  #AllBox{
    position: relative;
  }
  .logo_identity{
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    z-index: 888;
    width: 92.62500%;
    margin: 0 auto;
  }
  .logo_identity a{
    display: inline-block;
    width: 109px;
  }
  .logo_identity img{
    width: 100%;
  }
  main{
    display: block;
  }

/* footer
==================================*/
	footer {
    background: #000;
    /* padding: 25px 0 30px; */
    padding: 18px 0 15px;
	}
	footer .logo{
		text-align: center;
  }
  footer .logo img{
    width: 72px;
    height: 67px;
  }
	footer .pageTop{
		opacity: 0;
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 999;
    transition: .3s;
	}
  footer .pageTop.active{
    opacity: 1;
  }
	footer .pageTop a{
		display: block;
		background: #fff;
		width: 46px;
		height: 46px;
		transition: .3s;
	}
	footer .pageTop a::after{
		position: absolute;
    top: 20px;
    left: 18px;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);
	}

/* btn
==================================*/
	p.btn{
  	position: relative;
  	box-sizing: border-box;
  	width: 152px;
  	height: 30px;
  	margin: 38px auto 0;
  	padding: 0 10px 0 0;
  	border: 1px solid #ababab;
  	border-radius: 2px;
  	font-size: 11px;
  	line-height: 28px;
  	letter-spacing: 0.15em;
  	text-align: center;
  	transition: .5s ease;
  }
  p.btn:hover{
  	color: #000;
  }
  p.btn::before{
  	position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  z-index: -1;
	  content: '';
	  background: #fff;
	  transform-origin: left top;
	  transform: scale(0, 1);
	  transition: .3s ease;
  }
  p.btn:hover::before{
	  transform: scale(1, 1);
  }
  p.btn::after{
    position: absolute;
    top: 10px;
    right: 29px;
    content: "";
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    transition: .3s;
  }
  p.btn:hover::after{
  	right: 26px;
  	border-top: 1px solid #000;
    border-right: 1px solid #000;
  }

/* animation
==================================*/
  .c-anim-load{
  	opacity: 0;
  	transition: 3s;
  }
  .c-anim-load02,
  .c-anim-load03,
  .c-anim-load04,
  .c-anim-up-load,
  .c-anim-up,
  .c-anim-up02,
  .c-anim-up03{
	  opacity: 0;
	  transform: translate(0, 50px);
	  transition: 1.5s ease;
	}
	.c-anim-show{
		opacity: 0;
		transition: 3s;
	}
	.c-anim-show.move{
		opacity: 1;
	}


	/*----top----*/
	.t-anim01{
		transition: 1s;
	}
  .t-anim01.move{
  	opacity: 0;
  }
  .cover01,.cover03{
  	transform-origin: right;
  	transition: .8s;
  }
  .cover01.move,
  .cover03.move{
  	transform: scale(0,1);
  }
  .cover02{
  	transform-origin: bottom;
  	transition: .3s;
  }
  .cover02.move{
  	transform: scale(1,0);
  }

  .historyList .text h3.move{
  	transform: translate(0,0);
  }

  #last .ad img.show{
    transform: translate(0, -50px);
    opacity: 0;
    transition: 1s ease;
  }
  #last .ad img.concept{
    transform: translate(-40px, 0);
    opacity: 0;
    transition: 1s ease;
  }
  #last .ad img.models{
    transform: translate(1px,30px);
    opacity: 0;
    transition: 1s ease;
  }
  #last .ad img.show.move,
  #last .ad img.concept.move{
  	transform: translate(0, 0);
  	opacity: 1;
  }
  #last .ad img.models.move{
  	transform: translate(1px,-1px);
  	opacity: 1;
  }

  .t-anim-up01,
  .t-anim-up02,
  .t-anim-up03,
  .t-anim-up04{
  	opacity: 0;
	  transform: translate(0, 50px);
	  transition: 1.5s ease;
  }

  /*----history----*/
  .chronology ol > li .ad img{
    transform: translateX(-200px);
    transition: 1s;
  }
  .chronology ol > li .ad.move img{
    transform: translateX(0);
  }

  /*----concept----*/
  .concept .intro .ph .upper{
    transform: translate(0, -30px);
    opacity: 0;
    transition: 1.5s ease-out;
  }
  .concept .intro .ph .lower{
    transform: translate(0, 10px);
    opacity: 0;
    transition: 1.3s ease-out;
  }
  .concept .intro .text_wrap{
    transform: translate(0, 30px);
    opacity: 0;
    transition: 1s ease;
  }
  .concept .intro .ph .upper.move,
  .concept .intro .ph .lower.move,
  .concept .intro .text_wrap.move{
    transform: translate(0, 0);
	  opacity: 1;
  }

  .c-anim-prior{
    transform: translate(-50px, 0);
    opacity: 0;
    transition: 1s ease;
  }
  .c-anim-prior2{
    transform: translate(50px, 0);
    opacity: 0;
    transition: 1s ease;
  }
  .c-anim-later{
    transform: translate(30px, 0);
    opacity: 0;
    transition: 1s ease;
  }
  .c-anim-later2{
    transform: translate(-30px, 0);
    opacity: 0;
    transition: 1s ease;
  }

  /*----common move----*/
  .move{
	  transform: translate(0, 0);
	  opacity: 1;
  }

