@charset "UTF-8";

/* ========================================
	friends
======================================== */
.p-friends_wrap{
	width: 100%;
	overflow: hidden;
	background:#fff url(../images/friends/mv_bg.jpg) no-repeat top center;
}
.p-friends_tl{
	position: relative;
	width: 51.40625%; /* 987 / 1920 * 100 */
	z-index: 10;
}
.p-friends-mv{
	position: relative;
	width: 100%;
	padding-bottom: 10%;
}
@media screen and (min-width: 1921px) {
	.p-friends_wrap{
		background-size: 100% auto;
	}
}
.p-friends-mv_in{
	position: relative;
	width: 66.66666666%; /* 1280 / 1920 * 100 */
	min-width: 960px;
	margin: 0 auto;
}
.p-friends-mv_lead{
	width: 62%; /* 1035 / 1280 * 100 */
	margin: -2% auto 2%;
	position: relative;
	z-index: 100;
}
.mv_star_l{
	position: absolute;
	width: 4.921875%; /* 63 / 1280 * 100 */
	left: -12.109375%; /* 155 / 1280 * 100 */
	top: 60.5%;
}
.mv_star_r{
	position: absolute;
	width: 26.71875%; /* 342 / 1280 * 100 */
	left: 75.390625%; /* 965 / 1280 * 100 */
	top: -105%;
}
.mv_star_r02{
	position: absolute;
	width: 8.046875%; /* 103 / 1280 * 100 */
	right: -25%; 
	top: 105%;
}
.is-tablet .p-friends-mv{
	padding-bottom: 11%;
}
.is-tablet .p-friends-heart{
	margin-top: -10.8%;
}

/* ========================================
	friends heart
======================================== */
.p-friends-heart{
	position: relative;
	margin-top: -9.8%;
	padding-bottom: 200px;
	background: url(../images/friends/friends_heart_bg.png) no-repeat top center;
	background-size: cover;
}
/**line01**/
.p-friends-line01{
	width: 100%;
	text-align: right;
	padding-top: 10.5%;
	position: relative;
	z-index: 15;
}
.p-friends-line01 img{
	/* width: 53.515625%; 685 / 1280 * 100 */
  width: 40%;
  margin-top: 1%;
  margin-right: 12%;
}
.p-friends-line02 img {
  width: 70%;
  margin-top: 8%;
}
.p-friends-Inner{
	position: relative;
	width: 66.66666666%; /* 1280 / 1920 * 100 */
	min-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.p-friends-heart_chara01{
	position: absolute;
	width: 21.875%; /* 280 / 1280 * 100 */
	top: -8%;
	left: -0.78%; /* 10 / 1280 * 100 */
	z-index: 15;
}
.p-friends-heart_chara02{
	position: absolute;
	width: 37.109375%; /* 475 / 1280 * 100 */
	top: -17%;
	left: 24.140625%; /* 309 / 1280 * 100 */
	z-index: 10;
}
.p-friends-heart_chara03{
	position: absolute;
	width: 48.359375%; /* 619 / 1280 * 100 */
	top: 140%;
	left: 58.125%; /* 744 / 1280 * 100 */
	z-index: 10;
}
.p-friends-heart_chara01{
	opacity: 0;
	transform: translate(-40px, 20px);
	transition: opacity 150ms, transform 300ms;
}
.p-friends-heart_chara02{
	opacity: 0;
	transform: translate(40px, 20px);
	transition: opacity 150ms 200ms, transform 300ms 200ms;
}
.p-friends-heart_chara03{
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 150ms, transform 300ms;
}
.no-js .p-friends-heart_chara01,
.p-friends-heart_chara01.is-animation{
	opacity: 1;
	transform: translate(0, 0);
}
.no-js .p-friends-heart_chara02,
.p-friends-heart_chara02.is-animation{
	opacity: 1;
	transform: translate(0, 0);
}
.no-js .p-friends-heart_chara03,
.p-friends-heart_chara03.is-animation{
	opacity: 1;
	transform: translateY(0);
}
.p-friends-heart_chara03_ico{
	position: absolute;
	width: 14.0625%; /* 180 / 1280 * 100 */
	top: 281%;
	right: -12.8125%; /* 164 / 1280 * 100 */
	z-index: 1;
}
.p-friends-heart_arr01{
	position: absolute;
	width: 20.15625%; /* 258 / 1280 * 100 */
	top: 125%;
	left: 53.125%; /* 680 / 1280 * 100 */
	z-index: 100;
}
.p-friends-heart_arr02{
	position: absolute;
	width: 21.40625%; /* 274 / 1280 * 100 */
	top: 303%;
	left: 39.6875%; /* 508 / 1280 * 100 */
	z-index: 100;
}
/**line02**/
.p-friends-line02{
	position: absolute;
	width: 56.328125%; /* 721 / 1920 * 100 */	
	top: 233%;
	left: 0; /* 115 / 1280 * 100 */
	z-index: 10;
}
.p-friends-star_l{
	position: absolute;
	width: 14.0625%; /* 180 / 1280 * 100 */	
	top: 180%;
	left: -21.25%; /* 272 / 1280 * 100 */
}
.p-friends-star_r{
	position: absolute;
	width: 14.84375%; /* 190 / 1280 * 100 */	
	top: 380%;
	right: -22.34375%; /* 286 / 1280 * 100 */
}
.p-friends-Inner{
	min-width: 815px;
}

/* ========================================
	friends four
======================================== */
.p-friends-four{
	width: 100%;
	height: 100%;
	margin-top:55%;
}
.p-friends-four_lead{
	width: 36%; /* 660 / 1280 * 100 */
	float: left;
	vertical-align: top;
}
/**Movie**/
.p-friends-four_movie{
	position: relative;
	float: right;
	width: 48.4375%; /* 620 / 1280 * 100 */
	height: 100%;
	vertical-align: top;
}
.p-friends-four_movie .mov_wrap{
	position: relative;
	width: 100%;
	height: 0px;
	padding-bottom: 56.25%;
	border-radius: 20px;
  z-index: 1;
  overflow: hidden;
}
.p-friends-four_movie .mov{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.p-friends-four_movie_btn {
	position: absolute;
	width: 100%;
  z-index: 2;
  border-radius: 20px;
  cursor: pointer;
	overflow: hidden;
}
.p-friends-four_movie_in{
	position: relative;
  width: 100%;
  height: 100%;
  border: 10px solid #2fcdd1;
  border-radius: 30px;
	background-color: #2fcdd1;
}
.p-friends-four_movie_btn:before,
.p-friends-four_movie_btn:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.p-friends-four_movie_btn:before {
	background: transparent;
}
.no-js .p-friends-four_movie_btn:before {
	background: transparent;
}
.player_wrap{
	display: block;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.yt_player{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

/* ========================================
	helper
======================================== */
.p-friends-helper{
	position: relative;
	background: url(../images/friends/helper_bg.png) no-repeat top center;
	margin-top: -9%;
}
@media screen and (max-width: 1360px) {
	.p-friends-helper{
		margin-top: -12%;
	}
}
@media screen and (min-width: 1921px) {
	.p-friends-helper{
		background-size: 100% auto;
	}
}
.p-friends-helper_in{
	position: relative;
	width: 66.66666666%; /* 1280 / 1920 * 100 */
	min-width: 700px;
	margin: 0 auto;
}
.is-tablet .p-friends-helper{
	margin-top: -15%;
}

.p-friends-helper_h{
	margin: 0% auto;
  width: 32%;
  padding-top: 15%;
}
.p-friends-helper_chara01{
	position: absolute;
	width: 28.515625%; /* 365 / 1280 * 100 */
	top: -50%;
	left: -25%; /* 320 / 1280 * 100 */
	z-index: 20;
}
.p-friends-helper_chara01_ico{
	position: absolute;
	width: 14.0625%; /* 180 / 1280 * 100 */
	top: 63%;
	left: -8.046875%; /* 103 / 1280 * 100 */
	z-index: 10;
}
.p-friends-helper_chara02_ico{
	position: absolute;
	width: 14.0625%; /* 180 / 1280 * 100 */
	top: 18%;
	left: 88.125%; /* 1128 / 1280 * 100 */
	z-index: 2;
}
.p-friends-helper_chara02{
	position: absolute;
	width: 28.4375%; /* 364 / 1280 * 100 */
	top: 20%;
	right: -25%; /* 320 / 1280 * 100 */
	z-index: 5;
}
.p-friends-bg_b{
	display: block;
	position: relative;
	z-index: 100;
}
.p-friends-helper-star_l{
	position: absolute;
	width: 23.28125%; /* 298 / 1280 * 100 */	
	top: 208%;
	left: -21.09375%; /* 270 / 1280 * 100 */
}
.p-friends-helper-star_r{
	position: absolute;
	width: 4.921875%; /* 63 / 1280 * 100 */	
	top: 203%;
	right: -14%;
}

/* ========================================
	slide
======================================== */
.p-friends-slide_wrap{
	width: 92%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	padding:25px 0 2% 0;
}
.slick-list{
	overflow: visible !important;
}
.p-friends-slide{
	width: 100%;
	z-index: 10;
}
.p-friends-slide-item .slide-item{
	-webkit-transform: scale(0.75);
	-ms-transform: scale(0.075);
	transform: scale(0.75);
	-webkit-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.p-friends-slide-item{
	pointer-events: none;
}
.p-friends-slide-item.slick-current{
	z-index: 100;
	pointer-events: auto;
}
.p-friends-slide-item.slick-current .slide-item{
	width: 100%;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
.slick-current .p-friends-slide_mv{
	cursor: pointer;
}
.slide-item{
	width: 100%;
	position: relative;
}
.p-friends-slide_lead{
	display: none !important;
}
.slick-current .p-friends-slide_lead{
	display: block !important;
	margin-top: 1.6%;
	width: 100%;
}

.p-friends-slide_shadow{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 30;
}
.slick-current .p-friends-slide_shadow{
	display: none;
}
.p-friends-slide_nv{
	width: 48.6976217%; /* 860 / 1766 * 100 */
	margin:  0 auto;
	height: 112px;
	position: absolute;
	left: 0;
	right: 0;
	top: 28%;
	z-index: 100;
	overflow: hidden;
	pointer-events: none;
}
.p-friends-slide_nv button{
	display: none;
}
.p-friends-slide_nv .slick-prev,
.p-friends-slide_nv .slick-next {
	overflow: hidden;
	width: 11.6279069%;/* 100 / 860 * 100 */
	height: 112px;
	max-width: 100px;
	font-size:0;
  border: none;
	cursor: pointer;
	pointer-events: auto;
}
.p-friends-slide_nv li{
	display: none;
}
.p-friends-slide_nv .slick-prev {
	background: url(../images/common/ico_prev.png) no-repeat 0 0;
	background-size: 200% auto;
	position: absolute;
	top:0;
	left: 0;
}
.p-friends-slide_nv .slick-next {
	background: url(../images/common/ico_next.png) no-repeat 0 0;
	background-size: 200% auto;
	position: absolute;
	top:0;
	right: 0;
}
.p-friends-slide_nv .slick-prev:hover,
.p-friends-slide_nv .slick-next:hover {
	background-position: 100% 0;
}
.slick-prev:before, .slick-next:before {
  content:"";
}
/**Movie**/
.slide-item{
	position: relative;
	width: 100%;
	height: 100%;
	/*overflow: hidden;*/
}
.slide-item_in{
	position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;	
	box-sizing:border-box;
}
.slide-bl{
	border: 9px solid #1c1a93;
	background-color: #1c1a93;
}
.slide-lb{
	border: 9px solid #225eae;
	background-color: #225eae;
}
.slide-pi{
	border: 9px solid #fb81c0;
	background-color: #fb81c0;
}
.slide-gr{
	border: 9px solid #2fcdd1;
	background-color: #2fcdd1;
}
.slide-h{
	position: absolute;
	top:95%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	width: 80%;
	z-index: 10;
}
.slide-item .mov_wrap{
	width: 100%;
	padding-bottom: 56.25%;
	height: 0px;
	position: relative;
	box-sizing:border-box;
	border-radius: 20px;
  z-index: 1;
  overflow: hidden;
}
.slide-item iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.slide-mv_btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	vertical-align: top;
	border-radius: 20px;
  z-index: 10;
  overflow: hidden;
}
.slide-mv_btn img{
	vertical-align: top;
	-webkit-background-size: auto;
	background-size: auto;
}
.slide-mv_btn:before,
.slide-mv_btn:after {
	content: '';
	display: block;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.slide-mv_btn:before {
	background: transparent;
}
.no-js .slide-mv_btn:before {
	background: transparent;
}
.player_wrap{
	display: block;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.yt_player{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}
