@charset "UTF-8";
/**********************************************************************
Style CSS
design by Naoki Kaga
**********************************************************************/


#btn_next,
#btn_prev {
	height: 40vh;
	line-height: 40vh;
	background: #c8c8cb;
	border-radius: 30px;
}
#btn_next img,
#btn_prev img {
	vertical-align: baseline;
}
#btn_prev {
	left: 1%;
	width: 6%;
	padding: 1%;
}
#btn_next {
	right: 1%;
	width: 6%;
	padding: 1%;
}


.menu {
	font-size: 2vw;
}
#videoBox{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	padding: 5%;
	display: flex;
	align-content: center;
	justify-content: center;
}
#videoBox video{
	max-width: 100%;
	max-height: 100%;
	width: calc(100%);
}


/* streaming用 */
#videoBox iframe{
    position: relative !important;
	width: 100%;
	height: auto;
}

.slideBox .modalEnd {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.slideBox ul {
	position: fixed;
	z-index: 15;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	padding: 5% 8%;
	display: flex;
	align-content: center;
	justify-content: center;
}
.slideBox ul li{
	max-width: 100%;
	max-height: 100%;
	width: calc(100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.slideBox li:not(.cr) {
	display: none;
}

.slideBox .currentBox {
	position: fixed;
	z-index: 20;
	left: 50%;
	bottom: 10px;
	display: inline-block;
	border-radius: 20px;
	background: rgba(255,255,255,.8);
	font-size: 24px;
	padding: 5px 10px;
	box-shadow: 0 0 3px rgba(0, 0, 0, .1);
	transform: translateX(-50%);
}


/* .thumbMenu
------------------------------------------- */
.thumbMenu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 20px 0 ;
}
.thumbMenu li {
	width: 40%;
	margin: 0 5% 60px;
	padding: 10px;
	box-shadow: 0px 8px 10px 5px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}
.thumbMenu:not(.voiceMenu) li:active {
	opacity: 0.5;
}
.thumbMenu li .thumbnail {
	display: inline-block;
	position: relative;
	width: 100%;
}
.thumbMenu:not(.voiceMenu) li .thumbnail:before {
	content:"";
	display: inline-block;
	position: absolute;
	left: calc(50% - 5vw / 2);
	top: calc(50% - 5vw / 2);
	width: 5vw;
	height: 5vw;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0,0,0,.4) url(../../img/btn/btn_play.png) no-repeat left top;
	background-size: contain;
	background-position: center;
	margin-bottom: 10px;
}
.thumbMenu.slideMenu li .thumbnail:before {
	background: rgba(0,0,0,.4) url(../../img/icon/i.svg) no-repeat left top;
	background-size: contain;
	background-position: center;
}
.thumbMenu.menu li > a{
	color:rgba(0,0,0,.8);
}

/* 縦向きの場合のスタイル */
@media screen and (orientation: portrait) {
	.menu {
		font-size: 4vw;
	}
	.thumbMenu li {
		width: 100%;
		margin: 0 0 40px;
	}
	.thumbMenu:not(.voiceMenu) li .thumbnail:before {
		left: calc(50% - 10vw / 2);
		top: calc(50% - 10vw / 2);
		width: 10vw;
		height: 10vw;
	}
}



/* .textMenu
------------------------------------------- */
.textMenu {
	padding: 20px 5%;
}
.textMenu li {
	margin-bottom: 30px;
	padding: 10px 10px 6px;
	background: #c8c8cb;
	border-radius: 16px;
	border-bottom: 4px solid #c8c8cb;
	transition: border 0.5s;
	cursor: pointer;
}
.textMenu li:hover {
	border-bottom: 4px solid #35a16b;
}

.textMenu li a {
    display: block;
    width: 100%; 
    color: rgba(0,0,0,.8);;
}

/* 縦向きの場合のスタイル */
@media screen and (orientation: portrait) {
	.textMenu {
		padding: 0;
	}
}



/* .voiceMenu
------------------------------------------- */
.voiceMenu {
	padding: 0 5%;
}
.voiceMenu:not(.thumbMenu) li {
	margin-bottom: 30px;
	padding: 10px 10px 6px;
	background: #c8c8cb;
	border-radius: 16px;
	border-bottom: 4px solid #c8c8cb;
	transition: border 0.2s;
	display: flex;
	flex-wrap: wrap;
}
.voiceMenu li .audioBtn {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	display: inline-block;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s;

}
.voiceMenu li .audioBtn.play {
	background: url(../../img/btn/btn_play.png) no-repeat left top;
	background-size: contain;
	background-position: center;
	background-color: #35a16b;
}
.voiceMenu li .audioBtn.pause {
	background: url(../../img/btn/btn_pause.png) no-repeat left top;
	background-size: contain;
	background-position: center;
	background-color: #f36011;
}
.voiceMenu li .audioBtn.stop {
	background: url(../../img/btn/btn_stop.png) no-repeat left top;
	background-size: contain;
	background-position: center;
	background-color: #7f878f;
}
.voiceMenu li .audioBtn:active {
	transform: scale(0.9);
}
.voiceMenu.thumbMenu li {
	padding: 10px 10px 6px;
	border-bottom: 4px solid #fff;
	position: relative;
	cursor: default;
}
.voiceMenu.thumbMenu li .audioBtn {
	position: absolute;
	bottom: 5px;
}
.voiceMenu.thumbMenu li .play,
.voiceMenu.thumbMenu li .pause {
	left: 5px;
}
.voiceMenu.thumbMenu li .stop {
	left: 55px;
}

.voiceMenu li.nowplay {
	border-bottom: 4px solid #f36011;
}
.voiceMenu li.nowplay .play {
	background-color: #f36011;
}
.voiceMenu li span {
	align-self: center;

}

/* 縦向きの場合のスタイル */
@media screen and (orientation: portrait) {
	.voiceMenu {
		padding: 0;
	}
}






#contents .ccText{
	padding: 0 5%;
}
#videoBox .ccText{
	position:absolute;
	left: 0;
	bottom: 20px;
	width: 100%;
	color: #fff;
	text-align: center;
}
.ccText .eigo{
	display: none;
}
.eigo .ccText .eigo,
.jeigo .ccText .eigo,
.econe .ccText .eigo,
.ectwo .ccText .eigo,
.ecthree .ccText .eigo,
.vq .ccText .eigo{
	display: inline;
}