@charset "UTF-8";

/*
--------------------------------------

sample template
ver.1

creation date : 2016/10/25
latest update : 2016/10/25

--------------------------------------
*/

/*
--------------------------------------

common

--------------------------------------
*/
body {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	/* font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
}

/*
--------------------------------------

contents

--------------------------------------
*/
.btn>div, .contact .submit .btn>div, .fullpage-wrapper>.section, .fullpage-wrapper>.section>div, .hero .box>div, .hero .box>div .img, .hero .content, .wrapper {
	transition: all .6s cubic-bezier(.28,.76,.37,.99);
}

.wrapper {
	position: relative;
	overflow: hidden;
	transition-duration: .3s;
}

.fullpage-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  perspective: 3000px;
  transform-style: preserve-3d
}

.fullpage-wrapper _::-webkit-full-page-media, .fullpage-wrapper _:future, :root .fullpage-wrapper {
  perspective: none
}

@media screen and (max-width:768px) {
  .fullpage-wrapper {
    perspective: none
  }
}

.fullpage-wrapper>.section {
  transform-origin: center center 150px;
  transform: rotateX(90deg);
  transition-duration: 1.2s;
  padding: 40px;
  display: block!important
}

@media screen and (max-width:768px) {
  .fullpage-wrapper>.section {
    padding: 20px
  }
}

.fullpage-wrapper>.section _::-webkit-full-page-media, .fullpage-wrapper>.section _:future, :root .fullpage-wrapper>.section {
  transform: rotateX(0)!important
}

@media screen and (max-width:768px) {
  .fullpage-wrapper>.section {
    transform: rotateX(0)!important
  }
}

.fullpage-wrapper>.section>div {
  display: block;
  height: 100%!important;
  outline: 4px solid #fff;
  transition-delay: .3s
}

.show .fullpage-wrapper>.section>div {
  outline: 4px solid #111
}

@media screen and (max-width:768px) {
  .show .fullpage-wrapper>.section>div {
    outline-width: 2px
  }
}

.fullpage-wrapper>.section:first-of-type {
  transform: rotateX(90deg)
}

.fullpage-wrapper>.section:nth-of-type(n+2) {
  opacity: 0;
  transition-duration: 0s
}

.show .fullpage-wrapper>.section:nth-of-type(n+2) {
  opacity: 1;
  transition-duration: 1.2s
}

.fullpage-wrapper>.section.active {
  transform: rotateX(0)
}

.fullpage-wrapper>.section.active+.section {
  transform: rotateX(-90deg)
}