@charset "utf-8";

body {
	width: 1440px;
	height: 860px;
	font-family:Arial, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Roboto, "Droid Sans", "游ゴシチE��", YuGothic, sans-serif;
	font-size: 12px;
    line-height: 1.4;
    color: #333;
    background-color: #fff;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
section, div, span, a {box-sizing: border-box;}
a {color: inherit; outline:none; text-decoration: none;}
a:hover {text-decoration: none;}
img {width: 100%; border: none;}
.wrapper {
	display:flex;
	flex-flow: row nowrap;
	width: 100%;
    height: 100%;
	position: relative;
	margin: 0;
	padding: 0;
}
/* left block */
.leftBlock {
	width: 380px;
	height: 100%;
	background-color: var(--baseColor);
}
.leftBlock .header {
	display:flex;
	flex-flow: column;
	justify-content:space-between;
	height: 80px;
}
.leftBlock .header .inner {
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-between;
	align-items: flex-end;
	padding: 12px 20px 0;
}
#headerTitle {display:inline-block; width: auto; font-size: 24px; font-weight: bold;}
#headerToHome {display:inline-block; width: auto; font-size: 16px; cursor: pointer;}
#headerToHome:hover {text-decoration: underline;}
#rightTitle {
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
	padding-right: 20px;
}
.leftBlock .menus {
	display: flex;
	flex-flow: column nowrap;
	/*justify-content: space-between;*/
	width: 330px;
	height: 680px;
	margin: 50px auto 0 50px;
	overflow-y: auto;
}
.leftBlock .menus .menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 280px;
	/*height: 64px;*/
	min-height: 64px;
	font-size: 16px;
	color: #333;
	text-align: center;
	background-color: var(--mainColor);
	/*border-radius: 4px;*/
	cursor: pointer;
	margin: 24px 0 0;
	padding: 8px;
}
.leftBlock .menus .menu:hover {color: #fff; background: var(--selectedColor);}
.leftBlock .menus .menu.current {
	color: #fff;
	background: var(--selectedColor);
	cursor: default;
	pointer-events: none;
}
.leftBlock .menus .menu.current:hover {background: var(--selectedColor);}
/*.leftBlock .menus .menu.current::before {
	content: '';
	position: absolute;
	top: 14px;
	right: -18px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 0 18px 18px;
	border-color: transparent transparent transparent var(--selectedColor);
}*/

/* right block*/
.rightBlock {
	width: 1060px;
	height: 100%;
}
.rightBlock .submenus {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-end;
	width: 960px;
	height: 86px;
	margin: 0 auto;
}
.rightBlock .submenus .submenu {
	display: block;
	width: 230px;
	height: 36px;
	font-size: 16px;
	line-height: 36px;
	text-align: center;
	color: #333;
	background-color: #fff;
	border: solid 1px #333;
}
.rightBlock .submenus .submenu:hover {color: #fff; background-color: var(--selectedColor); border: solid 1px var(--selectedColor);}
.rightBlock .submenus .submenu.current {
	display: block;
	width: 230px;
	height: 36px;
	color: #fff;
	background-color: var(--selectedColor);
	border: solid 1px var(--selectedColor);
	cursor: default;
}
.rightBlock .contents {
	position: relative;
	width: 960px;
	height: 740px;
	margin: 12px auto 0;
	background-color: var(--baseColor);
}

/* movie */
.vjs-picture-in-picture-control {display:none !important}
.vjs-text-track-cue {
	text-align: left!important;
	font-size: 24px !important;
	inset: auto 0 0 0 !important;
	height: auto !important;
}
.vjs-text-track-cue div {background-color: rgba(0,0,0,0.5) !important;}

/* 2023/08/10追加 */
body{
    letter-spacing: normal;
    overflow: scroll;
}