@charset "utf-8";

/*--[about]--*/

#wrapper .about{
	background-color:#fff;
	padding:5px 10px;
	text-align:center;
}
#wrapper .about img{
	margin:0 auto;
	max-width:384px;
	width:100%;
}

/*--[topics]--*/

#wrapper .menu>ul>li.topics{
	background: linear-gradient(bottom, #ffedee, #FFF);
	background: -o-linear-gradient(bottom, #ffedee, #FFF);
	background: -moz-linear-gradient(bottom, #ffedee, #FFF);
	background: -webkit-gradient(linear, center bottom, center top, from(#ffedee), to(#FFF));
}

#wrapper .menu>ul>li.topics>a>span{color:#d70c19;}
#wrapper .menu>ul>li.topics>a.accordion{background-image:url(../images/nav-topics-close.png);}
#wrapper .menu>ul>li.topics>a.open{background-image:url(../images/nav-topics-open.png);}

#wrapper .menu li.topics ul li{
	background-color:#ffedee;
	color:#d70c19;
	line-height:1.4;
	text-shadow:#fff 0 1px 1px;
}
#wrapper .menu li.topics ul li a{
	background:url(../images/nav-topics-child.png) center right no-repeat #ffedee;
	background-size:17px 12px;
	-webkit-background-size:17px 12px;

	color:#d70c19;
	padding:10px 22px 10px 10px;
	text-decoration:none;
}
#wrapper .menu li.topics ul li .no-link{
	padding:10px;
}
#wrapper .menu li.topics ul li a,
#wrapper .menu li.topics ul li .no-link{
	border-top:1px solid #c8c5c4;
	display:block;
}

/*--[youtube]--*/

#wrapper .movie{
	background-color:#cc181e;
}
#wrapper .youtube-wrapper{
	padding:15px 4%;
	max-width:92%;
	width:480px;
}
#wrapper .youtube{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
#wrapper .youtube iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}






#wrapper .movie_index{
	padding: 10px 0 10px;
	background: #BD0B17;
	background: url(https://www.htb.co.jp/yumechika/common/images/youtube.png) center center repeat;
	max-width: 100%;

	width: calc(80vh * 16 / 9);
	max-height: 80vh;
	margin: 0 auto;
}
#wrapper .movie_box {
	position: relative;
	padding-top: calc(9 / 16 * 100%);
}
#wrapper .movie_box video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}
#wrapper .movie_index_info {
	position: relative;
	top: 0;
	left: 0;
	font-size: 110%;
	color: #FFF;
	padding: 0px 10px 10px;
}
#wrapper .movie_index_info dt {
	font-size: 140%;
	font-weight: bold;
}

#wrapper #movie_banner {
	text-align: center;
	margin: auto;
}

#wrapper #movie_banner img {
	width: 100%;
	height: auto;
}
#wrapper .movie_index_info dd a {
	color: #FFF;
	text-decoration: underline;
}
#wrapper .movie_index_info dd a:hover {
	text-decoration: none;
}