/* アニメーションjs用記述 ここから */
/* ------------------
フェードイン設定
--------------------- */
@keyframes fadeInUpsmall {
  0% {
    opacity: 0;
    transform: translate3d(0, 20%, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInUpsmall {
  animation-name: fadeInUpsmall
}

@keyframes fadeInDownsmall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10%, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInDownsmall {
  animation-name: fadeInDownsmall
}

@keyframes fadeInRightsmall {
  0% {
    opacity: 0;
    transform: translate3d(10%, 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRightsmall {
  animation-name: fadeInRightsmall
}

@keyframes fadeInLeftsmall {
  0% {
    opacity: 0;
    transform: translate3d(-10%, 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInLeftsmall {
  animation-name: fadeInLeftsmall
}

/* SP
----------------------------------*/
section {
  max-width: 768px;
  margin: 0 auto 10%;
  background: #f1ede2;
  font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Helvetica", "Arial", sans-serif;
  font-size: 62.5%;
  /* font-sizeは16pxの62.5%の10px */
  -webkit-text-size-adjust: 100%;
}

/*main movie*/
.pi_mv {
  text-align: center;
  margin: 0 auto 5%;
}

/*lead area*/
.pi_inner {
  margin: 40px auto;
  color: #353535;
  line-height: 1;
}

.pi_lead_tx {
  margin: 15% auto 0;
  text-align: center;
}

/*流れる文字*/
.flowing {
	width: 0;
	margin: 0;
	font-size: 3.7vw;
  line-height: 1.7;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	animation: flowing-anim 2.5s forwards linear;
}

.flowing:nth-child(2) {
	animation-delay: 1s;
}

.flowing:nth-child(3) {
	animation-delay: 2s;
}

@keyframes flowing-anim {
  0%{
     width: 0%;
     margin:0 auto;
   }
100%{
     width: 100%;
     margin:0 auto;
   }
}




/*アイテム*/
.item{
  width: 100%;
  margin: 10% auto 15%;
  text-align: center;
  clear: both;
}
.item_ttl{
  width: 36%;
  text-align: center;
  margin: 10% auto 5%;
}
.item_ttl img{
  width: 100%;
}
.item_parts{
  width: 50%;
  float: left;
  margin-bottom: 15%;
}
.item_parts img{
  width: 100%;
}





/*スクロール縦線*/
p.scroll {
  margin: 40px auto;
  display: inline-block;
  overflow: hidden;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  width: 100%;
  height: 50px;
  position: relative;
}

p.scroll::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 50px;
  background: #353535;
}

p.scroll::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  35% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  70%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}





/*各コンテンツ*/
.pi_content{
  width: 100%;
  padding: 75px 0;
}
.pi_content01{
  padding-top: 0;
}
.pi_content06{
  padding-bottom: 50px;
}
.bg_fff{
  background: #f1ede2;
}

/*タイトル*/
.pi_ttl{
  width: 75%;
  margin: 0 auto 25px;
}
.pi_ttl img{
  width: 100%;
}


.pi_staff{
  width: 90%;
	position: relative;
  margin: 0 auto;
	font-size: 18px;
  font-family: futura-pt,sans-serif;
  font-weight: 400;
  font-style: normal;
}
.pi_staff img{
  vertical-align: bottom;
}

/*動くボーダー*/
.border_anim{
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 3px #353535;
	animation: border_anim 3s linear forwards;
}

@keyframes border_anim {
	0%{
		width: 0%;

	}
	100%{
		width: 100%;
	}
}




/*スタッフ詳細*/
.pi_staff_name{
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 2.5px;
}
.pi_staff_name span{
  display: block;
  width: 35%;
  margin-bottom: 5px;
}

/*ボタン*/
.pi_btn a{
  display: block;
  width: 80%;
  margin: 50px auto 0;
  padding: 23px 0;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
  letter-spacing: 3px;
  background: #353535;
}

.pi_background {
  background-color: #f1ede2;
}






/* PC
----------------------------------*/
@media screen and (min-width: 768px) {
  .pc_width {
    margin: 0 auto;
    width: 500px;
    /* PC表示の幅を変えたいときはここを変更する */
  }

.flowing {
    font-size: 1.4rem;
  }

  .pi_mv {
    font-size: 0px;
    text-align: center;
    margin: 0px auto 40px;
    padding: 40px 0px 0px 0px;
    width: 100%;
  }

}