@charset "utf-8";

/* Panel */
.header_panel{
	position:absolute;
	text-align:center;
	visibility:collapse;
}

.title_img{
	position: absolute;
	margin-right: 0;
	margin-left: 0;
}

.title_panel{
	width:100%;
	padding-bottom: calc(100%*832/1000);
	background-size: 100% auto;
	background-image:url(../img/top/pc/yorimashi_top.png);
	background-position: top;background-size:contain;
	background-repeat:no-repeat;
}

.interview_panel{
	width:100%;
	padding-bottom: calc(100%*1083/1000);
	background-size: 100% auto;
	background-image:url(../img/top/pc/Message_back.png);
	background-position: top;
	background-size:contain;
	background-repeat:no-repeat;
	position:relative;
}

.videoview_panel{
	width:75%;
	padding-bottom: auto;
	background-image:url("../img/top/makimono.png");
	background-position: top;
	background-size:contain;
	background-repeat:no-repeat;
	position: absolute;
	top: 52.5%;
	left: 53%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	text-align: center;
}

.mainview_panel{
	width:100%;
	padding-bottom: calc(100%*769/1000);
	background-size: 100% auto;
	background-image:url(../img/top/yorimashi_mainstory.png);
	background-position: top;
	background-size:contain;
	background-repeat:no-repeat;
	position:relative;
	text-align: center;
}

.videoview_main_panel{
	width:75%;
	height: 60%;
	padding-bottom: auto;
	background-image:url("../img/top/mainstory_makimono.png");
	background-position: top;
	background-size:contain;
	background-repeat:no-repeat;
	position: absolute;
	top: 15.0%;
	left: 14.0%;
	text-align: center;
}

.contentslist
{
	display: inline-block;
	position: absolute;
	width:90%;
	left:5%;
	top:70%;
}

.contentslist ul{
	width: 100%;
	list-style: none;
}

.contentslist ul li{
	width: 31%;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
	height: auto;
	padding: 1%;
	display: inline-block;
}

.contentslist ul li img{
	padding:0px;
	width:100%;
	height:auto;
}

.contentslist .contents_selected{
	background-color: rgba(88,88,0,0.5);	
}

.contentslist ul li div{
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	padding:10px 0px 5px;
}

/*
.videoview_main_panel{
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.videoview_main_panel .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.videoview_main_panel .inner iframe{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
*/

.player_main_panel{
	position: relative;
	margin: 5% 0% 5% 8.4% ;
	width: 82%;
	height: auto;
	/*padding-bottom: cal(82.5% * 56.25%);*/
}

.movie_image{
	margin: 5% 10% ;
	width: 80%;
}

.load_btn{
	width:15%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}

.profile_panel{
	width:100%;
	padding-bottom: calc(100%*882/1000);
	background-size: 100% auto;
	background-image:url("../img/top/pc/artist_image.png");
	background-position: top;background-size:contain;
	background-repeat:no-repeat;
	position:relative;
	text-align: center;
}

.title_profile_img{
	width:48%;
	left:27%;
	margin-top:3%;
}

.profile_btn_panel{
	position:absolute;
	left:0px;
	width:100%;
	top:85%;
	margin:0 auto;
	text-align: center;
}

.profile_btn_panel ul li{
  display: inline-block;
}

.story_panel{
	position:relative;
	width:100%;
	padding-bottom: calc(100%*476/1000);
	background-size: 100% auto;
	background-image:url(../img/top/pc/beginning_back.png);
	background-position: top;
	background-size:contain;
	background-repeat:no-repeat;
	text-align:center;
}

.title_story_img{
	position: absolute;
	width:20%;
	left:40%;
	margin-top:3%;
}

.story_string
{
	width:100%;
	top: 25%;
	position: absolute;
	margin-top:10px;
	display:block;
	color:#4d2801;
	font-size:1.2em;
	font-weight:bold;
	line-height: 2.5;
}

.story_btn_panel{
	position:relative;
	left:0px;
	width:100%;
	margin:10% auto 0;
}

.special_campaign_panel{
	position:relative;
	width:100%;
	padding-bottom: calc(100%*695/1000);
	background-size: 100% auto;
	background-image:url("../img/top/pc/specialevents_back.png");
	background-position:top;
	background-size:contain;
	background-repeat:no-repeat;
	text-align: center;
}

.campaign_img{
	position: absolute;
	top:20%;
	left:5%;
	width:90%;
}

.title_special_campaign_img{
	position: absolute;
	width:30%;
	left:35%;
	top:5.7%;
}

.creatores_panel{
	position: relative;
	width:100%;
	background-size: 100% auto;
	/*background-image:url(../img/top/top_creatores.png);*/
	background-color:white;
	background-position:top;
	background-size:contain;
	background-repeat:no-repeat;
	text-align: center;
}

.title_creatores_img{
	position: absolute;
	width:30%;
	left:35%;
	margin-top:5%;
}

.category_wrap_ul{
	width:100%;
	margin: 0px auto 0px;
	padding-top:180px;
}

.category_wrap_ul li{
	display: inline-block;
	width:33%;
	padding:0px 5%;
}

.category_wrap_ul li a{
	width:80%;
}

.category_wrap_ul li a img{
	width:100%;
	height: auto;
}

.sns_img_list{
	height: 50px;
	position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
	margin-top:10px;
	margin-bottom:10px;
}

.sns_img_list li{
	width:100%;
	padding:0px 5px;
	height: auto;
}
.sns_img_list li a img{
	width:100%;
	height:auto;
	margin:0 auto;
}

.footer_panel{
	width:100%;
	padding-bottom: calc(100%*111/1000);
	background-size: 100% auto;
	background-image:url(../img/top/footer.png);
	background-position:top;
	background-size:contain;
	background-repeat:no-repeat;
}


.btn_li{
	width:48%;
	margin-right:1%
}

.btn_img{
	position:relative;
	width:100%;
	max-width:450px;
	min-width:320px;
	margin:0 auto;
}

#player{
	width:100%;
}

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
}

.modal-content{
	position: absolute;
	background-color: white;
	width: 75%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}


/*----ブレークポイント----*/
@media only screen and (max-width:750px){

	.title_panel{
		padding-bottom: calc(100%*1500/750);
		background-image:url(../img/top/m/top_image.png);
	}
	
	.title_img{
		width:75%;
		margin: 5% auto 0;
	}


	.interview_panel{
		position:relative;
		width:100%;
		padding-bottom: calc(100%*1258/750);
		background-image:url("../img/top/m/Messege_back.png");
	}

	.videoview_panel{
		width:90%;
		top: 57.5%;
		left: 55%;
	}

	.mainview_panel{
		position:relative;
		width:100%;
		padding-bottom: calc(100%*1014/750);
		background-image:url("../img/top/m/yorimashi_mainstory.png");
	}

	.videoview_main_panel{
		width:90%;
		height: auto;
		top: 25.5%;
		left: 8%;
	}
	
	.contentslist{
		display: inline-block;
		position: absolute;
		width:95%;
		left:2.5%;
		top:63%;
	}
	.contentslist ul li{
		width: 45%;
		margin-top:10px;
		height: auto;
	}

	.profile_panel{
		position:relative;
		width:100%;
		padding-bottom: calc(100%*847/750);
		background-image:url(../img/top/m/artist_image.png);
	}
	
	.title_profile_img{
		width:70%;
		left:15%;
	}

	.story_panel{
		position:relative;
		width:100%;
		padding-bottom: 60px;
		padding-bottom: calc(100%*750/750);
		background-repeat: repeat;
		background-image:url(../img/top/m/Beginning_back.png);
	}
	
	.title_story_img{
		position: absolute;
		width:45%;
		left:27.25%;
	}	

	.story_string{
		margin-top:15px;
		display:block;
		color:#4d2801;
		font-size:1.0em;
		font-weight:bold;
		line-height: 2.5;
	}
	
	.special_campaign_panel{
		position:relative;
		width:100%;
		padding-bottom: calc(100%*950/750);
		background-image:url("../img/top/m/specialevents_back.png");
		background-size: auto;
	}
	
	.title_special_campaign_img{
		top:0%;
		width:55%;
		left:22.5%;
	}
	
	.campaign_img{
		top:18%;
		left:1.5%;
		width:97%;
	}
	
	.creatores_panel{
		position:relative;
		width:100%;
	}
	
	.title_creatores_img{
		width:60%;
	}
	
	.footer_panel{
		position:relative;
		width:100%;
		padding-bottom: calc(100%*171/750);
		background-image:url("../img/top/m_footer.png");
	}
	
	.profile_btn_panel{
		top:70%;
	}
	
	.title_special_campaign_img{
		width:55%;
	}
	
	.btn_li{
		width:100%;
		margin-right:0%
	}
	

	.title_creatores_img{
		position: absolute;
		width:60%;
		left:20%;
		margin-top:5%;
	}

	.category_wrap_ul{
		width:100%;
		margin: 0px auto 0px;
		padding-top:180px;
	}

	.category_wrap_ul li{
		display: inline-block;
		width:50%;
		padding:0px 5%;
	}

	.category_wrap_ul li a{
		width:100%;
	}

	.category_wrap_ul li a img{
		width:100%;
		height: auto;
	}

	.sns_img_list{
		width:200%;
		margin: -50%;
		height: 100px;
		position: relative;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: center;
		margin-top:10px;
		margin-bottom:10px;
		list-style: none;
	}

	.sns_img_list li{
		padding-left: 0px;
		width:100%;
		padding-right:20px;
		height: auto;
	}
	.sns_img_list li a img{
		width:100%;
		height:auto;
		margin:0 auto;
	}
}

.drop-shadow {
    -webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,.8));
}