/******************************************************************************
/* 字幕表示設定
******************************************************************************/


video::cue {
	background-image: linear-gradient(to bottom, dimgray, lightgray);
	color: papayawhip;
	opacity: 0;
}

video::cue(b) {
	color: peachpuff;
}



#display {
	margin: 0px auto 0px auto;
	width: 100%;
	height:120px;
	background-color: #F0F0F0;
	font-size: 100%;
	padding:10px;
	font-weight: 700;
	text-align: left;
}



/******************************************************************************
/* アコーディオンボックス
******************************************************************************/

/* アコーディオンメニュー全体のサイズ・位置 */
.ac {
	width: 100%;
	margin: -10px auto 30px auto;
}
/* クリック領域 */
.ac-parent2 {
	height: 35px;
	background-color: #46608A;
	color: #fff;
	text-align: center;
	line-height: 35px;
	cursor: pointer;

}

/* クリックしたら表示される領域 */
.ac-child2 {
	display: none;
	padding: 0px;
	text-align: center;
}


#btn{
	margin:0px auto 0 auto;
	padding:10px;
	cursor:pointer;
	background: #8BC34A;
	color: #ffffff;
	text-align: right;
	font-weight: 700;

}


#btn2{
	margin:0px auto 0 auto;
	padding:10px;
	cursor:pointer;
	background: #46608A;
	color: #ffffff;
	text-align: right;
	font-weight: 700;

}



/******************************************************************************
/* コントロール設定
******************************************************************************/



.movie_button {
	position: relative;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #FFF;
	background: #fd9535;/*背景色*/
	border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
	border-radius: 8px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 80%;
	font-weight: 700;
	outline: none;
}

.movie_button:active {
	border-bottom: solid 2px #fd9535;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.movie_button2 {
	position: relative;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #FFF;
	background: #1AA3B7;/*背景色*/
	border-bottom: solid 2px #116C7A;/*少し濃い目の色に*/
	border-radius: 8px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 80%;
	font-weight: 700;
	outline: none;
}

.movie_button2:active {
	border-bottom: solid 2px #0B4851;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.movie_button3 {
	position: relative;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #FFF;
	background: #426DB2;/*背景色*/
	border-bottom: solid 2px #2C4876;/*少し濃い目の色に*/
	border-radius: 8px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 80%;
	font-weight: 700;
	outline: none;
}

.movie_button3:active {
	border-bottom: solid 2px #1C304E;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}




.movie_button4 {
	position: relative;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #FFF;
	background: #E9727E;/*背景色*/
	border-bottom: solid 2px #2C4876;/*少し濃い目の色に*/
	border-radius: 8px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 80%;
	font-weight: 700;
	outline: none;
}

.movie_button4:active {
	border-bottom: solid 2px #9A4C54;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}



.movie_button5 {
	position: relative;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #FFF;
	background: #4B9953;/*背景色*/
	border-bottom: solid 2px #2C4876;/*少し濃い目の色に*/
	border-radius: 8px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 80%;
	font-weight: 700;
	outline: none;
}

.movie_button5:active {
	border-bottom: solid 2px #326637;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}








.movie_area {
	margin: 0 auto 0 auto;
	width: 100%;
}

.movie_area_left {
	float: left;
	width: 49%;
	margin-right: 2%;
}

.movie_area_right {
	float: right;
	margin: 0 auto 0 auto;
	width: 49%;
}

.movie_area_title {
	margin: 0 auto 30px auto;
	width: 100%;
	padding: 10px;
	background-color :#E9727E;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
}


.movie_area_ctitle {
	margin: 10px auto 2px auto;
	width: 100%;
	font-size: 80%;
	padding: 0px;
	color: #000000;
	font-weight: bold;
	text-align: left;
}

.movie_area_button {
	margin: 0px auto 5px auto;
	padding-bottom: 5px;
}

.movie_area_button2 {
	margin: 0px auto 50px auto;
	padding-bottom: 50px;
}

.movie_area_button_left {
	float: left;
	width: 50%;
}

.movie_area_button_right {
	float: right;
	width: 50%;
}


.iphone_area {
	display: inline-block;
}



.mac .iphone_area {
	display: none;
}


.iphone .iphone_area {
	display: none;
}

.ipad .iphone_area {
	display: none;
}


.logbox{
	 border: solid 0px #808080;
	 width: 100%;
	 height: auto;
	 padding: 5px;
	 overflow: auto;
	margin-bottom:50px;
}

.logbox p{
         color: #008000;
}


.tabs{
         display: none;
}





/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/* 601 - 1200用（タブレット用）の記述 */
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/


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


/******************************************************************************
/* 表示切り替え設定
******************************************************************************/





}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/* 600px - 100px用（スマートフォン用）の記述 */
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/


@media screen and (min-width: 100px) and (max-width: 600px)  {

/******************************************************************************
/* 表示切り替え設定
******************************************************************************/


.movie_area_left {
	float: left;
	width: 100%;
	margin-right: 0%;
}

.movie_area_right {
	float: left;
	margin: 30px auto 0px auto;
	width: 100%;
}


.movie_area_button_left {
	float: left;
	width: 100%;
}

.movie_area_button_right {
	float: left;
	width: 100%;
}



#display {
	margin: 0px auto 0px auto;
	width: 100%;
	height:110px;
	font-size: 100%;
	padding:10px;
	font-weight: 700;
	background-color: #F0F0F0;
	text-align: left;
}




.mac .iphone_area {
	display: none;
}


.iphone .iphone_area {
	display: none;
}

.ipad .iphone_area {
	display: none;
}


.tabs{
         display: block;
}


.movie_area_button{
         display: none;
}

.movie_area_button2{
         display: none;
}


/******************************************************************************
/* アコーディオンボックス
******************************************************************************/

/* アコーディオンメニュー全体のサイズ・位置 */
.ac {
	width: 100%;
	margin: -9px auto 20px auto;
}



/******************************************************************************
/* タブ切り替え設定
******************************************************************************/


/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 0px;
	padding-bottom: 0px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 20px auto 0 auto;
}

/*タブのスタイル*/
.tab_item {
	width: calc(100%/4);
	height: 40px;
	border-bottom: 3px solid #5ab4bd;
	background-color: #d9d9d9;
	line-height: 38px;
	font-size: 80%;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
.tab_item:hover {
	opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 0px 0px 0px 15px;
	clear: both;
	overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/

#speed:checked ~ #speed_content,
#volume:checked ~ #volume_content,
#moji-color:checked ~ #moji-color_content,
#back-ground:checked ~ #back-ground_content {
	display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
	background-color: #5ab4bd;
	color: #fff;
}


}