@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 * *  modal popup CSS
 * ===============================================================
*/


/** ハンバーガーメニュー
 [参考]
 http://www.webopixel.net/javascript/1060.html
**/

/* Toggle Button */
#nav-toggle {
  display: none;
  position: absolute;
  right: 12px;
  top: 22px;
  width: 34px;
  height: 36px;
  cursor: pointer;
  z-index: 102;
}

#nav-toggle div {
  position: relative;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #333;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}

  /* -- >>> styles for narrow layout ----- */
  @media screen and (max-width: 599px) {

  }

  /* -- >>> styles for medium layout ----- */
  @media screen and (max-width: 959px) {
    #pc-nav{
      display: none;
    }
      #global-nav {
          position: absolute;
          /* 開いてないときは画面外に配置 */
          top: -595px;
          background: #FFF;
          width: 100%;
          text-align: center;
          -webkit-transition: .5s ease-in-out;
          -moz-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
      }
      #nav-toggle {
          display: block;
      }
      /* #nav-toggle 切り替えアニメーション */
      .open #nav-toggle span:nth-child(1) {
          top: 11px;
          -webkit-transform: rotate(315deg);
          -moz-transform: rotate(315deg);
          transform: rotate(315deg);
      }
      .open #nav-toggle span:nth-child(2) {
          width: 0;
          left: 50%;
      }
      .open #nav-toggle span:nth-child(3) {
          top: 11px;
          -webkit-transform: rotate(-315deg);
          -moz-transform: rotate(-315deg);
          transform: rotate(-315deg);
      }
      /* #global-nav スライドアニメーション */
      .open #global-nav {
          /* #global-nav top + #mobile-head height */
          -moz-transform: translateY(656px);
          -webkit-transform: translateY(656px);
          transform: translateY(656px);
      }
  }
  /* -- >>> styles for wide layout ----- */
  @media screen and (min-width: 960px) {

  }


	/*/// hover action ///*/
    .hvr-float {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px transparent;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
    .hvr-float:hover, .hvr-float:focus, .hvr-float:active {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }




/**	Shutter Out Horizontal hover
 [参考]
http://ianlunn.github.io/Hover/
**/
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  			font-weight: bold;
  			font-size: 2.0rem;
			padding: 5px 70px;
			margin: 10px 0 0 0;
}

.hvr-shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #c0c0c0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
  color: white;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/**	スクロールでふわっと表示
 [参考]
 https://theorthodoxworks.com/web-design/scrollanimation/
**/

/* animation */
	#animation {
	margin: 50px 0;
	font-size: 40px;
	}

	.fadeInDown {
	 -webkit-animation-fill-mode:both;
	 -ms-animation-fill-mode:both;
	 animation-fill-mode:both;
	 -webkit-animation-duration:1s;
	 -ms-animation-duration:1s;
	 animation-duration:1s;
	 -webkit-animation-name: fadeInDown;
	 animation-name: fadeInDown;
	 visibility: visible !important;
	}
	@-webkit-keyframes fadeInDown {
	 0% { opacity: 0; -webkit-transform: translateY(-20px); }
	 100% { opacity: 1; -webkit-transform: translateY(0); }
	}
	@keyframes fadeInDown {
	 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	}


/**	移動＋フェードイン表示
 [参考]
 http://www.north-geek.com/entry/js-scroll#移動フェードイン表示
**/

/* animation */
.list-mv07{
	transition: .8s;
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


/**	回転表示
 [参考]
http://www.north-geek.com/entry/js-scroll#回転
**/

/* animation */
.list-mv03{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.mv03{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}