@charset "utf-8";

/*==================================================
reset
================================================== */
#suntory_contents #hall_contents a {
	box-sizing:border-box;
}
#suntory_contents #hall_contents ul {
	list-style:none;
}
#suntory_contents #hall_contents img {
	vertical-align: bottom;
}

/*==================================================
pc sp common
================================================== */
#suntory_contents .mvContainer .mv .movie a {
	display: block;
}
#suntory_contents .mvContainer .mv .movie a:hover {
	opacity:0.7;
}
#suntory_contents .mvContainer .mv .movie a img {
	width: 100%;
}
#suntory_contents .mvContainer h3.videoTitle a {
	display: block;
	width: 100%;
	font-weight: normal;
	color: #881133;
	text-decoration: none;
	overflow: hidden;
}
#suntory_contents .mvContainer h3.videoTitle a:hover {
	color: #bb0044;
	text-decoration: underline;
}

@media screen and (max-width:767px){
	/*sp================================================== */

/*==================================================
container [sp] layout
================================================== */
#suntory_contents #contents {
	width: 100%;
	margin: 0;
	padding: 4vw 4vw 8vw;
}
#suntory_contents #contents section {
	margin-top: 4vw;
}

#suntory_contents #contents .text_box{
	margin: 6vw 0;
}

#suntory_contents #contents .text_box .annotation_text{
	font-size: 0.73em;
	color: #881133;
}


/*------------------------------------------------------------
[SP] banner
------------------------------------------------------------ */
#suntory_contents .moviearea .banner {
	margin: 0;
}
#suntory_contents .moviearea .banner a {
	display: block;
	width: 34.66666667vw;
	height: 12vw;
	margin: 0 0 0 auto;
	background: url(https://www.suntory.com/culture-sports/suntoryhall/movies/assets2019/img/banner_30th_sp.png) no-repeat right top;
	background-size: 34.66666667vw;
	box-shadow: 0 0.53333333vw 1.06666667vw 0 rgba(0,0,0,0.15);
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*------------------------------------------------------------
[SP] moviearea
------------------------------------------------------------ */
#suntory_contents .mvContainer {
	min-height: 90vw;
	margin: 0 auto 8vw;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

/*------------------------------------------------------------
[SP] mv
------------------------------------------------------------ */
#suntory_contents .mvContainer .mv {
	width: 100%;
	height: 100%;
	margin: 8vw 0 0;
	padding: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
#suntory_contents .mvContainer .mv .movie{
	position: relative;
	padding-bottom: calc(50% * 9 / 16);
	height: 0;
	width: 50%;
	overflow: hidden;
	margin: 0;
}
#suntory_contents .mvContainer h3.videoTitle {
	width: 50%;
	overflow: hidden;
}
#suntory_contents .mvContainer h3.videoTitle a {
	font-size: 4vw;
	line-height: 1.5;
	padding: 0 2.4vw 0 4vw;
	height: 100%;
}

/*------------------------------------------------------------
[SP] btn_more
------------------------------------------------------------ */
#suntory_contents .btn_more {
	margin: 0 auto 8vw;
	width: 48vw;
	height: 12vw;
}
#suntory_contents .btn_more a {
	width: 100%;
	height: 100%;
	display: block;
	background: #f6f1e4;
	border-radius: 6vw;
	font-size: 5.06666667vw;
	font-weight: bold;
	line-height: 12vw;
	color: #881133;
	text-align: center;
	text-decoration: none;
}
#suntory_contents .btn_more a:hover {
	background:#ede4cc ;
}


}
@media print, screen and (min-width:768px){
	/*pc================================================== */

/*==================================================
container [pc] layout
================================================== */
#suntory_contents #contents {
	width: 100%;
	max-width: 1160px;
	margin: 50px auto 110px;
	padding: 0 40px;
}
#suntory_contents #contents section {
	margin-top: 40px;
}

#suntory_contents #contents .text_box{
	margin: 30px 0;
}

#suntory_contents #contents .text_box .annotation_text{
	font-size: 0.81em;
	color: #881133;
}

/*------------------------------------------------------------
[PC] banner
------------------------------------------------------------ */
#suntory_contents .moviearea .banner {
	width: 100%;
	margin: 0 0 50px;
}
#suntory_contents .moviearea .banner a {
	display: block;
	width: 340px;
	height: 50px;
	margin: 0 0 0 auto;
	background: url(https://www.suntory.com/culture-sports/suntoryhall/movies/assets2019/img/banner_30th.png) no-repeat right top;
	box-shadow: 0 3px 4px 0px rgba(0,0,0,0.15);
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#suntory_contents .moviearea .banner a:hover {
	background-position: right bottom;
}

/*------------------------------------------------------------
[PC] moviearea
------------------------------------------------------------ */
#suntory_contents .mvContainer {
	min-height: 250px;
	margin: 30px auto 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}

/*------------------------------------------------------------
[PC] mv
------------------------------------------------------------ */
#suntory_contents .mvContainer .mv {
	width: 255px;
	height: 100%;
	margin: 0 20px 50px 0;
	padding: 0;
}
#suntory_contents .mvContainer .mv:nth-child(4n) {
	margin-right: 0;
}
#suntory_contents .mvContainer .mv .movie{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	width: 100%;
	overflow: hidden;
	margin: 0 0 10px;
}
#suntory_contents .mvContainer h3.videoTitle {
	width: 100%;
	overflow: hidden;
}
#suntory_contents .mvContainer h3.videoTitle a {
	font-size: 15px;
	line-height: 1.5;
}

/*------------------------------------------------------------
[PC] btn_more
------------------------------------------------------------ */
#suntory_contents .btn_more {
	margin: 0 auto 50px;
	width: 180px;
	height: 46px;
}
#suntory_contents .btn_more a {
	width: 100%;
	height: 100%;
	display: block;
	background: #f6f1e4;
	border-radius: 23px;
	font-size: 19px;
	font-weight: bold;
	line-height:46px;
	color: #881133;
	text-align: center;
	text-decoration: none;
}
#suntory_contents .btn_more a:hover {
	background:#ede4cc ;
}


}