/* =================================
	CSS
================================= */



/*	background
============================== */


/*	copyright
============================== */



/*	cover
============================== */


@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*	header
============================== */
div.cover > header {
	/**/
	display:flex;
	justify-content: center;
	align-items: center;
	/**/
	height:6em;
}
div.cover > header h1 {
}
@media all and (min-width: 768px) {
}
@media all and (max-width: 767px) {
}

/*	main
============================== */
main {
}
@media all and (min-width: 768px) {
}
@media all and (max-width: 767px) {
}

/*	YouTube
============================== */
div.mov-inner {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-color:#000;
}
div.mov-inner iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
}
@media all and (max-width: 767px) {
}

/*	article.unit
============================== */
article.unit {
	text-align:left;
}
article.unit > header {
	text-align:center;
}

article.unit > header h2 {
	line-height:1.5;
	/* margin-bottom:1em; */
}
article.unit div.mov-cover {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
article.unit div.mov-cover div.mov-outer {
	width:calc((100% - 10px)/2);
}

article.unit ul.txt {
	margin-bottom:2em;
}
article.unit ul.txt li:not(:last-child) {
	margin-bottom:0.5em;
}
article.unit ul.txt li a {
	display:block;
	color:#000;
	font-weight:bold;
	text-decoration:none;
	background-color:#ffea00;
	padding:0.5em 0.75em;
	line-height:1.5;
}
article.unit ul.txt li a:hover {
	background-color:#fc0;
}

article.unit ul.btn {
	display:flex;
	justify-content: center;
}
article.unit ul.btn li {
	width:calc((100% - 6px*2)/3);
}
article.unit ul.btn li:not(:last-child) {
	margin-right:6px;
}
article.unit ul.btn li a,
article.unit ul.btn li a span,
article.unit ul.btn li a img {
	display:block;
}
article.unit ul.btn li a:hover {
	opacity:0.7;
}
article.unit ul.btn li a span {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-size:cover;
}
article.unit ul.btn li a img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
article.unit {
	max-width:1080px;
	padding:0 30px;
	margin:0 auto 60px;
}
}
@media all and (max-width: 767px) {
article.unit {
	padding:0 3.125vw;
	margin-bottom:40px;
}
}


/*	article.plylist
============================== */

article.plylist nav.yt-playlist-btn ul {
	width:100%;
	background-color:hsla(351,100%,73%,0.4);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:8px;
	padding:8px;
}
article.plylist nav.yt-playlist-btn ul li a {
	display:block;
}
article.plylist nav.yt-playlist-btn ul li a {
	text-decoration:none;
	color:#0c467c;
	background-color:#fff;
	padding:0.75em;
	line-height:1.5;
	position:relative;
	text-align:center;
}
article.plylist nav.yt-playlist-btn ul li a.yt-playing {
	background-color:#186e84;
}
article.plylist nav.yt-playlist-btn ul li a.yt-playing {
	font-weight:bold;
	color:#ffe0f4;
}
article.plylist nav.yt-playlist-btn ul li a.yt-playing:after {
	content:"NOW PLAYING";
	background-color:yellow;
	/**/
	/**/
	color:#000;
	display:inline-block;
	line-height:1.25;
	font-size:75%;
	padding:0.2em 0.25em;
	position:absolute;
	top:-4px;
	right:-4px;
}
@media all and (min-width: 768px) {
article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 8*2px)/3);
}
article.plylist nav.yt-playlist-btn ul li a {
	font-size:112.5%;
}
}
@media all and (max-width: 767px) {
article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 8px)/2);
}
article.plylist nav.yt-playlist-btn ul li a {
	font-size:83%;
}
}



/*	article.tatelist
============================== */
/*
div.mov-inner-tate {
	position:relative;
	height:0;
	padding-top: -webkit-calc(16 / 9 * 100%);
	padding-top: calc(16 / 9 * 100%);
	background-color:#000;
}
div.mov-inner-tate iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
*/
div.mov-inner-tate {
	width:39.375vh;
	background-color:#000;
}
div.mov-inner-tate iframe {
	width:39.375vh;
	height:70vh;
}
article.tatelist nav ul li a span, article.tatelist nav ul li a span img {
	display:block;
}
article.tatelist nav ul li a span {
	position:relative;
	height:0;
	padding-top: -webkit-calc(16 / 9 * 100%);
	padding-top: calc(16 / 9 * 100%);
	background-size:cover;
	background-position:center center;
}
article.tatelist nav ul li a span img {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
article.tatelist div.tate-inner {
	display:flex;
	align-items:stretch;
	gap:16px;
	height:70vh;
}
article.tatelist div.tate-inner div.mov-outer {
	width:calc(75% - 8px);
}
article.tatelist div.tate-inner nav {
	width:calc(25% - 8px);
	height:70vh;
	overflow:auto;
}
@media all and (min-width: 768px) {
article.tatelist  {
	margin:0 auto;
}
@media all and (max-width: 767px) {
}