@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	動画視聴ページ

//////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	header

------------------------------------------------------------------------------*/

#content > header {
	padding: 60px 0;
	background-color: rgba(var(--main-color),1);
}

#content > header .site_column h1 {
	font-size: 2.5em;
	font-weight: bold;
	text-align: center;
	color: #FFF;
}

#content > header .site_column h1 span {
	display: block;
}

#content > header .site_column h1 span:first-of-type {
	margin-bottom: .3em;
	font-size: 70%;
}

@media screen and (max-width: 767px) {

#content > header {
	padding: 8vw 0;
}

#content > header .site_column h1 {
	font-size: 5.5vw;
}
	
}


/*------------------------------------------------------------------------------

	main

------------------------------------------------------------------------------*/

main #download .site_column .group,
main #download section .list {
	display: flex;
	flex-wrap: wrap;
}

main #download .site_column .group {
	justify-content: space-between;
}

main #download .group > section {
	flex: 1;
}

main #download .group .document {
	width: 54%;
	margin-left: 4%;
}

main #download section .button a {
	display: block;
	text-align: center;
	padding: 1.5em 1em;
	line-height: 1.2;
}

main #download .group .document section:first-child {
	margin-bottom: 50px;
}

main #download .group .document section:first-child a {
	width: 48%;
}

main #download section .list .button {
	width: 48%;
	margin: 4% 4% 0 0;
}

main #download section .list .button:nth-child(-n+2) {
	margin-top: 0;
}

main #download section .list .button:nth-child(2n) {
	margin-right: 0;
}

main #download section .list .button a span {
	display: block;
}	

@media screen and (max-width: 1200px) {

main #download .group .document section:first-child a {
	width: 100%;
}	
	
main #download section .list .button {
	width: 100%;
}

main #download section .list .button:nth-child(2) {
	margin-top: 4%;
}

main #download section .list .button {
	margin-right: 0;
}
	
main #download section .list .button a span {
	display: inline;
}	
	
}


@media screen and (max-width: 767px) {

main #download .group section,
main #download .group .document	{
	width: 100%;
}

main #download .group .document {
	margin-left: 0;
}	
	
main #download .group section:first-child {
	margin-bottom: 10vw;
}	
	
}