/* アニメーション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: #ffffff;
  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%;
}

/* 画像スライド */
.sec_inner {
  width: 100%;
  height: 100%;
  margin: 0 auto 10%;
}

/*-----------height調整----------*/
.slick-slide {
  height: auto !important;
}

/*------------------------------*/
/*
.slick-dots li.slick-active button:before
{
    color: #c00!important;	//選択したボタンの色変更
}
.slick-dots li button:before
{
    color: #c00!important;	//選択されていないボタンの色変更
}
*/
/* 画像スライド終わり */
/*main movie*/
.pi_mv {
  text-align: center;
  margin: 0 auto 5%;
}

/*lead area*/
.pi_inner1 {
  margin: 40px auto;
  text-align: center;
  color: #333333;
  line-height: 1;
  letter-spacing: 2px;
}

.pi_lead_tx1 {
  margin: 0 auto 5%;
  font-size: 1rem;
  line-height: 2;
}

.pi_lead_tx2 {
  margin: 0 auto 3%;
  font-size: 1.7rem;
  font-weight: bold;
}

.pi_lead_tx3 {
  margin: 0px auto 4%;
  font-size: 2.5rem;
  font-weight: bold;
}

.pi_lead_tx4 {
  line-height: 1.5;
  font-size: 1.3rem;
}

/*流れる文字*/
 .flowing {
  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 5%;
  }

  100% {
    width: 100%;
    margin: 0 auto 5%;
  }
}

/*スクロール縦線*/
p.scroll1 {
  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.scroll1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 50px;
  background: #1d5037;
}

p.scroll1::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,
.pi_content07 {
  padding-bottom: 0px;
}

.bg_beige {
  background: #f4f1ec;
}

/*タイトル*/
.pi_ttl {
  width: 40%;
  margin: 0 auto 25px;
}
.pi_ttl2 {
  width: 45%;
  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;
}

/*スタッフ詳細*/
.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: 24%;
  margin-bottom: 5px;
}

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

/*バナーリンク*/
.pi_bnr_link {
  width: 70%;
  margin: 0 auto 50px;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  text-align: center;
}

.pi_bnr_link a {
  text-decoration: underline;
}

.pi_bnr_link span {
  display: block;
  margin-top: 7px;
}

 /* ryoka.css */
 .pi_main {
	margin: auto;
	text-align: center;
	font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","Helvetica","Arial",sans-serif;
		font-color: #4b4b4b;
}
	.flex-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 6% 0% 10%;
	}
	.item {
	 margin-right: 1.5%;
	}
	.item2 {
	 margin-left: 1.5%;
	}
	.item img{
		width: 118px;
		text-align: left;
	}
	.item2 img{
		width: 118px;
		text-align: right;
	}
	.item-title {
		margin: 0 0 10%;
		text-align: center;
		font-family: futura-pt,sans-serif;
    font-weight: 400;
    font-style: normal;
		font-size: 1.9rem;
		line-height: 2.1rem;
    letter-spacing: 0.08em;
	}
	.btn {
	display: inline-block;
  text-decoration: none;
  background: #7b7a81;
  color: #FFF;
	font-family: futura-pt,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  transition: .4s;
 }
 .btn_2 {
 display: inline-block;
  text-decoration: none;
  background: #5a5a5a;
  color: #FFF;
 font-family: futura-pt,sans-serif;
 font-weight: 400;
 font-style: normal;
 font-size: 1.5rem;
 letter-spacing: 0.04em;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  transition: .4s;
 }
 .btn:hover {
  background: #676767;
 }
 .point {
	margin-bottom: 0%;
	margin-top: 10%;
	
 }
 .point-title {
 	font-family: futura-pt,sans-serif;
 	font-weight: 400;
 	font-style: normal;
 	font-size: 1.7rem;
 	letter-spacing: 0.04em;
 	background: linear-gradient(transparent 50%, #cccad6 50%); /* ポイント下の背景色 */
 	width: 110px; /* ポイント下の背景色の横幅 */
 	text-align: center;
 	margin: 0 auto 4%;
 }

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

  .flowing {
    font-size: 1.4rem;
  }
}