/* アニメーションjs用記述 ここから */
/* ------------------
フェードイン設定
--------------------- */
@keyframes fadeInUpsmall {
  0% {
    opacity: 0;
    transform: translate3d(0, 10%, 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
}
/* アニメーションjs用記述 ここまで */


/* SP
----------------------------------*/
a:hover img.linkimg{
	 opacity:0.7;
	 filter:alpha(opacity=70);
	 -ms-filter: "alpha( opacity=70 )";
	 background:none!important;
	}
	.pi_main {
		margin: auto;
	  text-align: center;
	  font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","Helvetica","Arial",sans-serif;
		color: #4b4b4b;
	}
	.mv {
		margin-bottom: 8%;
	}
	.lead {
	 margin-bottom: 10%;
	}
	.title {
	 font-size: 1.6rem;
   font-weight: bold;
	 line-height: 2.5rem;
	 margin-bottom: 4%;
	}
	.title span {
		font-size: 1.4rem;
		font-weight: normal;
    display: block;
    margin-top: 2%;
	}
	.anchor-flex-box {
		display: flex;
		margin: auto;
		text-align: center;
		margin-bottom: 15%;
	}
	.anchor-1st-low {
		margin-bottom: 6%;
	}
	.anchor-last-img {
		width: 40%;
		text-align: left;
		margin-left: 20px;
	}
	.anchor-flex-box p{
		margin: auto;
		text-align: center;
		font-family: futura-pt,sans-serif;
    font-weight: 400;
    font-style: normal;
		font-size: 1.3rem;
		letter-spacing: 0.06em;
	}
	.anchor-flex-box img{
   width: 83%;
	 margin-bottom: 8%;
	}
	.content {
	 width: 315px;
	 height: 480px;
	 text-align: center;
	 margin: 0 auto;
	}
	.flex-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 6% 0% 5%;
	}
	.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: #e8b2a9;
  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%;
 }
 .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%, #fddfda 50%); /* ポイント下の背景色 */
 	width: 125px; /* ポイント下の背景色の横幅 */
 	text-align: center;
 	margin: 0 auto 4%;
 }
 .point-text {
	width: 350px;
 	margin: 0 auto 12%;
 	text-align: left;
 	font-size: 1.2rem;
 	line-height: 2.2rem;
 	letter-spacing: 0.02em;
  }
	/* スタイリング解説動画 */
	.youtube-text {
		text-align: center;
		font-weight: 600;
		font-size: 1.5rem;
		margin-bottom: 3%;
	}
	.pi_youtube {
		background-color: #fbf4f4;
		padding: 10% 0 10% 0;
		width: 100%;
		margin: 0 auto 13%;
	}
	.youtube_movie {
		width: 89.3333333333333333vw;
		margin: 0 auto;
		text-align: center;
		height: 50.25vw;
		top: 21.333333333333333vw;
	}
	.youtube_movie iframe {
		width: 100% !important;
		height: 100% !important;
	}
	/* スタイリング解説動画 */
 .btn2 {
  width: 315px;
  padding: 15px 60px;
  background: #e8b2a9;
  text-align: center;
  color: #fff;
  font-size: 1.3rem;
 }
 .pi_line {
	 border-bottom:1px solid #f3d8d4;
	 margin: 15% 0 13% 0;
	}
 .prf {
	text-align: center;
 	margin: 20% auto 20%;
 	width: 315px;
  color: #4b4b4b;/*文字色*/
  padding: 3em 0;/*上下の余白*/
  border-top: solid 1px #4b4b4b;/*上線*/
  border-bottom: solid 1px #4b4b4b;/*下線*/
 }
 .prf-img {
 	text-align: center;
	margin-bottom: 6%;
 }
 .prf-title {
 	display: flex;
	justify-content: center;
 	align-items: center;
	font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 	font-style: normal;
 	font-size: 1.9rem;
 	letter-spacing: 0.05em;
 	margin-bottom: 4%;
 }
 .prf-title img {
 	margin-right: 2%;
	width: 17px;
 }
 .prf-text {
  text-align: center;
	margin: 0 auto;
 	font-size: 1.2rem;
 	line-height: 2rem;
 	letter-spacing: -0.05em;
  }


	/* 画像スライド */
	.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;	//選択されていないボタンの色変更
	}
	*/

	/* 画像スライド終わり */










/* PC
----------------------------------*/
@media screen and (min-width: 768px){

  .pc_bgcolor {
    background-color: #fff; /* PC表示の際の全体に背景色をつけたいときはここを変更する */
  }

  .pc_width {
    margin: 0 auto;
    width: 500px; /* PC表示の幅を変えたいときはここを変更する */
  }

  .youtube_movie {
    width: 450px;
    margin: 0 auto;
    text-align: center;
    height: 240px;
    top: 21.333333333333333vw;
  }

}
