/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* ----------------------------------------------- 全体 ---------------------------------------------------------------- */
body {
	background-color:#f5f5dc;
	color: #666666;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ ゴシック", "MS Gothic", Arial, sans-serif;
}
.frame {
	padding: 1em 1em 1em 1em;
}
.exclamation {
	font-size: 12px;
	color: #CC6666;
}
.bigfont {
	font-size: 1.5em;
}
.smallfont {
	font-size: 0.8em;
}
/* ----------------------------------------------- 汎用flexbox-----------*/
.flexbox_wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

/* ----------------------------------------------- ボタン-----------*/
.Button-style {
	font-size: 0.8em;
	display: inline-block;
	padding: 0.2em 1em 0.2em;
	color: #666666;
	text-decoration: none;
	border-radius: 25px;
	background-color: #f5f5dc;
	border: none;
	cursor: pointer;
}
.Button-style a{
	color: #666666;
	text-decoration: none;
}
/* ----------------------------------------------- ヘッダー --------------------------------------- */
#header {
   background-color: #dbe3c8;
   color: #809261;
   padding: 0.5em 0.5em 0.5em 0.5em;
   margin: 0.5em 0em 0.5em 0em;
   text-align: left;
}

/* ------------------------------------------------ 本体 ------------------------------------------ */
/* ------------------------------------------------ 左側 ------------------- */
/* ---------------------------------- 受講者名 ----------*/
.ki {
	float:right;
	position:static;
	margin-top:0.5em;
}
/* ---------------------------------- 動画リスト ----------*/
.video_row {
	position: relative;
}
.video_left {
	background-color:#4C4C4C;
	padding: 5px 5px 5px 5px;
	width: 100px;
}
.video_left img {
	width: 100px;
}
.video_right {
	background-color:#ffffff;
	padding: 5px 5px 5px 5px;
	border: 1px solid #becca2;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}
.video_row a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/* ---------------------------------- 提出物 ------------*/
.submission_left {
	border: 1px solid #becca2;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}
.submission_left p {
	padding: 0 1em;
	-webkit-margin-before: 0.3em;
	        margin-block-start: 0.3em;
	-webkit-margin-after: 0em;
	        margin-block-end: 0em;
	font-size: 0.8em;
	margin: 3px 0px 3px 0px;
}
.submission_left p img{
	height: 1.2em;
}
.submission_right {
	border: 1px solid #becca2;
	text-align: center;
	width: 5em;
}
.submission_right p {
	-webkit-margin-before: 0.2em;
	        margin-block-start: 0.2em;
	-webkit-margin-after: 0.2em;
	        margin-block-end: 0.2em;
	margin: 3px 0px 3px 0px;
}
.submission_right p img{
	height: 1.6em;
}
.submission_right a img{
	height: 1.6em;
}

.grayout {
	-webkit-filter: grayscale(1); /* Webkit */
	filter: gray; /* IE6-9 */
	filter: grayscale(1); /* W3C */
	background-color: #c0c0c0c0;
	cursor: default;
}

/* ----------------------------- ログアウトボタン ------*/
.logout_button {
	margin:0.5em 1.5em;
	text-align: right;
}

/* ----------------------------- ダイアログ ------*/
#dialog {
    display:none;
}
#dialogBackground {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
}
#dialogContent {
    position: absolute;
    left: 60px;
    top: 50%;
    width: 300px;
    height: 250px;
    margin-left: 0px;
    margin-top: -100px;
    background-color: #ffffff;
    text-align: center;
    border: solid 1px;
}

/* ------------------------------------------------ 右側 ------------------- */
/* ----------------------------- YouTubeサイズ調整---------- */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ------------------------------------------------ フッター -------------------------------------- */
#footer {
   background-color: #dbe3c8;
   padding: 0.5em 0.5em 0.5em 0.5em;
   margin: 0.5em 0.5em 0.5em 0em;
   color: #809261;
   font-size: 13px;
   text-align: center;
   color: #809261;
   border-radius: 10px;/*角の丸み*/
}

/* -------------------------------------------------------------------------------------------------- モバイル用スタイル -------------------*/
@media (max-width: 767px)
{
/* --------------------------------- ヘッダー ----------------------------------------------------- */
#header {
   margin: 0.5em 0em 0.5em 0em;
   border-radius: 5px;/*角の丸み*/
}
img.title {
	max-width: 90%;
}
#header-right {
}
/* ----------------------- メニュー ---------------------- */
#menu {
  list-style: none;
  font-size: 0;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  text-align: center;
}
#menu ul {
    -webkit-margin-before: 0em;
            margin-block-start: 0em;
    -webkit-margin-after: 0em;
            margin-block-end: 0em;
    -webkit-padding-start: 0px;
            padding-inline-start: 0px;
}
#menu li {
  width: 18%;
  text-align: center;
  background-color: #f5f5dc;
  display: inline-block;
  font-size: 3vw;
  border:1px solid #a6937c;
  padding: 0.5em 0em 0.3em 0em;
}

#menu li a {
  text-decoration: none;
  color: #666633;
  font-weight: bold;
}
#menu li a span {
    display: block;
  font-size: 2vw;
}
/* ----------------------- コピーライト ------------------- */
#copyright {
	display:none;
}

/* ------------------------------------------------ 本体 ------------------------------------------ */
/* ------------------------------------------------ 左側 ------------------- */
#side_left {
	max-width: 100%;
	padding: 0.5em 0.5em 0.5em 0.5em;
	color: #805B5B;
	background-color: #becca2;
    border-radius: 5px;/*角の丸み*/
}
/* ---------------------------------- 受講者名 ----------*/
.username {
	margin-bottom: 1em;
}
/* ----------------------- アコーディオンメニュー ------ */
.cp_actab {
	position: relative;
	overflow: hidden;
	width: 90%;
	margin: 0em auto;
}
.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab label {
	font-weight: bold;
	line-height: 2;
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	cursor: pointer;
	margin: 0 0 1px 0;
   background-color: #dbe3c8;
}
.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	-o-transition: max-height 0.35s;
	transition: max-height 0.35s;
	background: #ffffff;
}
.cp_actab .cp_actab-content .submission_left {
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 30em;
}
/* Icon */
.cp_actab label::after {
	line-height: 2;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	-o-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
	content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotate(315deg);
	    -ms-transform: rotate(315deg);
	        transform: rotate(315deg);
}

.video_right {
	width: 60%;
}
/* ----------------------------------------------- 右側 -------------------- */
#side_right {
	margin-top: 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	background-color: #ffffff;
    border: solid 3px #BDCCA3;/*線*/
    border-radius: 5px;/*角の丸み*/
}

.videoctl {
}
.videoctl_left {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:end;
	    -ms-flex-pack:end;
	        justify-content:flex-end;
	margin-top:0em;
	margin-bottom:0em;
}
.videoctl_right {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:end;
	    -ms-flex-pack:end;
	        justify-content:flex-end;
	margin-top:0em;
	margin-bottom:0.5em;
}
.videoctl_right img {
	vertical-align: middle;
	width: 22px;
	height: 22px;
}

}
/* -------------------------------------------------------------------------------------------------- タブレット、PC用スタイル -----------*/
@media (min-width: 768px)
{
/* --------------------------------- ヘッダー ------------------------------------------------------ */
#header {
   height: 100px;
   color: #809261;
   margin: 0.5em 0.5em 0.5em 0em;
   border-radius: 10px;/*角の丸み*/
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between; /* 左右均等分布 */
}
img.title {
	height: 90px;
}
/* ----------------------- 右側 --------------------------- */
#header-right {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end; /* 上下下揃え */
}
/* ----------------------- コピーライト ------------------- */
#copyright {
	display:inline;
    margin: 0.5em 1em 0px 0px;  /* メニューの位置 */
}

/* ----------------------- メニュー ---------------------- */
/* リスト全体 */
ul.menu {
    width:550px;             /* リスト全体の幅 */
    height:50px;             /* リスト全体の高さ */
    list-style:none;         /* リストマークを無しにする */
}

/* 各項目 */
#menu {
/*    float:right; */
/*    margin: 25px 1em 0px 0px;  /* メニューの位置 */
}

ul.menu li {
    width:110px;             /* 項目の幅 */
    height:50px;             /* 項目の高さ */
    float:left;              /* 各項目を左側から回り込み */
    text-decoration:none;     /* リストの下線を表示しない */
    list-style:none;
    border:none;
    padding: 0 0 0 0;
}

ul.menu li a {
    display:block;            /* リンク範囲をブロックに変換 */
    width:100%;               /* リンク範囲（幅）をリスト項目範囲全て */
    height:100%;              /* リンク範囲（高さ）をリスト項目範囲全て */
}
ul.menu li a span {
  display:none; padding:5px; margin:55px 0px 0px 10px; width:150px;
  border:1px solid #cccccc; color:#000033;background-color:#ffffff;
  font-size:12px; text-align:center;
 }

/* リンク部分 */
li.menu_home a { background:url(./image/menu3.gif) 0 0 no-repeat; }
li.menu_home a:hover { background:url(./image/menu3.gif) 0 -50px no-repeat; }
li.menu_home:hover a span { display:inline; positio	n:absolute; }

li.menu_blog a { background:url(./image/menu3.gif) -110px 0 no-repeat; }
li.menu_blog a:hover { background:url(./image/menu3.gif) -110px -50px no-repeat; }
li.menu_blog:hover a span { display:inline; position:absolute; }

li.menu_twitter a { background:url(./image/menu3.gif) -220px 0 no-repeat; }
li.menu_twitter a:hover { background:url(./image/menu3.gif) -220px -50px no-repeat; }
li.menu_twitter:hover a span { display:inline; position:absolute; }

li.menu_support a { background:url(./image/menu3.gif) -330px 0 no-repeat; }
li.menu_support a:hover { background:url(./image/menu3.gif) -330px -50px no-repeat; }
li.menu_support:hover a span { display:inline; position:absolute; }

li.menu_support2 a { background:url(./image/menu3.gif) -440px 0 no-repeat; }
li.menu_support2 a:hover { background:url(./image/menu3.gif) -440px -50px no-repeat; }
li.menu_support2:hover a span { display:inline; position:absolute; }

/* リンク部分(Save)
li.menu_home a { background:url(./image/menu.gif) 0 0 no-repeat; }
li.menu_home a:hover { background:url(./image/menu.gif) 0 -50px no-repeat; }
li.menu_home:hover a span { display:inline; position:absolute; }

li.menu_blog a { background:url(./image/menu.gif) -110px 0 no-repeat; }
li.menu_blog a:hover { background:url(./image/menu.gif) -110px -50px no-repeat; }
li.menu_blog:hover a span { display:inline; position:absolute; }

li.menu_twitter a { background:url(./image/menu.gif) -220px 0 no-repeat; }
li.menu_twitter a:hover { background:url(./image/menu.gif) -220px -50px no-repeat; }
li.menu_twitter:hover a span { display:inline; position:absolute; }

li.menu_support a { background:url(./image/menu.gif) -330px 0 no-repeat; }
li.menu_support a:hover { background:url(./image/menu.gif) -330px -50px no-repeat; }
li.menu_support:hover a span { display:inline; position:absolute; }
*/
/* ------------------------------------------------ 本体 ------------------------------------------- */
.wrapper {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
/* ------------------------------------------------ 左側 ------------------- */
#side_left {
	width: 350px;
	margin-left: 0.5em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	color: #805B5B;
	background-color: #becca2;
    border-radius: 10px;/*角の丸み*/
}
table,tr,td.submission {
	width: 320px;
	background-color: #ffffff;
	padding: 0.2em 0.2em 0.2em 0.2em;
	border-collapse: collapse;
	border: 1px solid #333;
}

/* ----------------------- アコーディオンメニュー --------------------------- */
.cp_actab {
	position: relative;
	overflow: hidden;
	padding:1em 0.5em 0.5em 0.5em;
}
.cp_actab label {

	font-weight: bold;
}
.cp_actab input {
	display: none;
}

.cp_actab .cp_actab-content {
	background: #ffffff;
}

div#subimission.cp_actab-content {
	border: 1px solid #333;
}

.video_right {
	width: 195px;
}

.video_left:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}
.video_right:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

/* ------------------------------------------------ 右側 ------------------- */
#side_right {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	margin-right: 0.5em;
/*	margin-left: 0.5em; */
	padding: 0.5em 0.5em 0.5em  0.5em;
	background-color: #ffffff;
    border: solid 5px #BDCCA3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.videoctl {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	margin-top:0.3em;
	margin-bottom:0.5em;
}
.videoctl_right {
	-ms-flex-item-align: end;
	    align-self: flex-end;
}
.videoctl_right img {
	vertical-align: middle;
	width: 22px;
	height: 22px;
}
/* ------------------------------------------------ web講座内左右分割 ------*/
#webjuku_content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width:100%;
	overflow:hidden;
	border: thin solid #becca2;
}
#webjuku_left {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	border-right: thin solid #becca2;
}
#webjuku_right {
	width:200px;
}

}