* {
/*	border : 1px solid #ed0d27; */
	position : relative;
}
html, body {
	margin : 0px;
	padding : 0px;
	height : 100%;
}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	border : 1px solid gray;
}

body {
	display : flex;
	flex-direction : column;

	font-family: Verdana, Roboto, "Droid Sans", "���S�V�b�N", YuGothic, "���C���I", Meiryo, "�q���M�m�p�S ProN W3", "Hiragino Kaku Gothic ProN", "�l�r �o�S�V�b�N", sans-serif;
}

form {
	font-size : 14pt;
}
label {
	display : block;
	margin : 24px 0px;
}
input,textarea {
	width : 98%;
	display : block;
	font-size : 16pt;
	padding : 6px 8px;
	margin : 2px auto;
}

textarea {
	resize: none;
	height : 240px;
}

h1 {
	width : 666px;
	margin-left : auto;
	margin-right : auto;
	text-align : center;
	padding : 16px;
	background-color : #ed0d27;
	color  : white;
	border-radius : 8px;
}

h2 {
	text-align : center;
	text-decoration : underline;
	font-size : 20pt;
	margin-top : 24px;
	margin-bottom : 12px;
	color : rgb(24,16,16);
}

#header {
	background-color : #ed0d27;
	padding : 8px;
}

#footer {
	background-color : #ed0d27;
	padding : 8px;
	padding-bottom : 16px;
	color : white;;
}

#contents {
	width : 100%;
	flex : 1 0 auto;
}

#drag-drop-area {
	width : 640px;
	height : 400px;

	border:5px dashed rgb(128,128,128);

	background-color : lightgray;
	text-align : center;

	margin : 0px auto;

	background-image : url('../img/selectimage.png');
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}

#overlay {
	display : none;
	position : fixed;
	top : 0px;
	left : 0px;
	width : 100%;
	height : 150%;
	background-color : rgba(0,0,0,0.3);
	z-index : 200;
}

#overlay-message {
	display : block;
	position : absolute;
	width : 560px;
	height : 130px;
	margin : 0px auto;
	padding : 64px 16px 48px 16px ;
	background-color : rgb(240,240,240);
	border : 1px solid lightgray;
	border-radius : 8px;
	text-align : center;
	font-size : 18pt;
}

#other_question {
	display : none;
}

.flex {
	display :flex;
}

.container {
	width : 1024px;
	margin : 0px auto;
}
@media screen and (max-width:1024px) { 
	.container {
		width : 740px;
		margin : 0px auto;
	}
}


.question_box {
	margin : 8px auto;
	border-radius : 8px;
	width : 700px;
	border : 1px solid lightgray;
	padding-top : 16px;
	padding-bottom : 16px;
}

.question_image {
	display : block;
	border-radius : 8px;
	border : 1px solid lightgray;
	margin : 8px auto;

//	min-width : 640px;
	max-width : 640px;
	max-height : 400px;
}

.question_text, .question_choices, .question_choices2, .question_choices3, .question_choices4, .question_choices5, .question_video, .question_next {
	display : block;
	margin : 8px auto;
	border-radius : 8px;
	padding : 16px;
}

.question_text{
	width : 608px;
	border : 1px solid lightgray;
	font-size : 16pt;
}
.question_choices, .question_choices2, .question_choices3, .question_choices4, .question_choices5, .question_video, .question_next {
	width : 574px;
	padding : 16px 32px;
	margin-top : 12px;
	font-size : 18pt;
	font-weight : bold;
}

.question_choices, .question_choices5, .question_next {
	border : 2px solid #4169e1;
	background-color : #4169e1;
	color : white;;
	cursor : pointer;
	transition: all 300ms 0s ease;
}
.question_choices:hover, .question_next:hover {
	background-color : white;
	color : #4169e1;
	transition: all 300ms 0s ease;
}

.question_choices2 {
	border : 2px solid gray;
	color : gray;

	background-color : lightgray;
	cursor : default;
}

.question_choices3 {
	border : 2px solid gray;
	color : white;

	background-color : gray;
	cursor : default;
}
.question_choices3::after, .question_choices4::after {
	content: "";
	display :block;
	position : absolute;
	width : 128px;
	height : 128px;
	z-index : 10;
//	border : 1px solid lightgray;
	top : -32px;
	right : 0px;
}
.question_choices3::after {
	background-image : url('../img/mark_1.png');
}
.question_choices4::after {
	background-image : url('../img/mark_0.png');
}


.question_choices4 {
	border : 2px solid mediumspringgreen;
	color : black;

	background-color : mediumspringgreen;
	cursor : default;
}



.question_contributer {
	display : flex;
	justify-content : flex-end;
	width : 100%;
	right : 32px;
	text-align : right;
	font-size : 14pt;
	margin-top : 16px;
	margin-bottom : 8px;
}
.contributer_link {
	color : blue;
	font-weight : bold;
	text-decoration : none;
}
.contributer_link:hover {
	text-decoration : underline;
	transition: all 300ms 0s ease;
}

.question_video {
	border : 2px solid #ed0d27;
	background-color : #ed0d27;
	color : white;
	text-decoration : none;
	text-align : center;
	transition: all 300ms 0s ease;
}
.question_video:hover {
	color : #ed0d27;
	background-color : white;
	transition: all 300ms 0s ease;
}

.question_next {
	display : none;
	text-align : center;
	text-decoration : none;
}

.ad_336_280 {
	width : 336px;
	height : 280px;
//	background-color : lightgray;
//	border-radius : 4px;
//	overflow : hidden;
}

.ad_300_600 {
	width : 300px;
	height : 600px;
//	background-color : lightgray;
	border-radius : 4px;
	overflow : hidden;
}

.ad_728_90 {
	display : none;
	width : 728px;
	height : 90px;
//	background-color : lightgray;
	border-radius : 4px;
	overflow : hidden;
	margin : -12px auto 32px auto ;
}
.ad_970_90 {
	display : block;
	width : 970px;
	height : 90px;
//	background-color : lightgray;
	border-radius : 4px;
	overflow : hidden;
	margin : -12px auto 32px auto ;
}

@media screen and (max-width:1024px) { 
	.ad_728_90 {
		display : block;
	}
	.ad_970_90 {
		display : none;
	}

}




.header_logo {
	display : block;
	margin : 8px 24px;;
	width : 648px;
}
@media screen and (max-width:1024px) { 
	.header_logo {
		display : block;
		margin : 8px 24px;;
		width : 480px;
	}
	.header_logo img {
		width : 480px;
	}
}

.submit_form {
	margin-bottom : 32px;
}
input[type='submit'], .submit_link {
	border-style: none;
	cursor : pointer;
	background-color : #ed0d27;
	border-radius : 6px;
	color : white;
	border : 2px solid #ed0d27;
	font-size : 22pt;
	font-weight : bold;
	text-decoration : none;
	text-align : center;
//	width : 46%;
}
.submit_link {
	padding : 6px;
	display : block;
	width : 640px;
	margin : 16px auto;
}
input[type='submit']:hover, .submit_link:hover {
	color : #ed0d27;
	background-color : white;
}

.question_box_list {
	display : block;
	width : 340px;
	width : 334px;
	max-height : 380px;
	margin-bottom : 8px;
//	margin : 8px auto;
	border-radius : 8px;
	border : 1px solid lightgray;
	overflow: hidden;
	text-decoration : none;
	color : black;
/*	padding-top : 16px;
	padding-bottom : 16px; */
	transition: all 300ms 0s ease;
}

.question_box_list:hover {
	background-color : rgb(248,252,255);
	box-shadow: 0px 0px 15px 1px rgb(128,160,192);
	transition: all 300ms 0s ease;
}

.question_box_list .question_image {
//	width : 334px;

	max-width : 334px;
	max-height : 209px;

	margin : 0px auto;

	border : none;
	border-bottom-right-radius : 0px;
	border-bottom-left-radius : 0px;
}

@media screen and (max-width:1024px) { 
	.question_box_list {
		display : block;
		width : 360px;
	}
	.question_box_list .question_image {
		max-width : 360px;
		max-height : 225px;

/*
		max-width : 360px;
		width : 360px;
		height : auto;
*/
	}
}

.category_box_list {
	width : 500px;
	height : 120px;
	background-position : left center;
	background-size : cover;
	background-repeat : no-repeat;
	border-radius : 8px;
	border : 1px solid gray;
	margin : 4px;
	overflow : hidden;
	text-decoration : none;
}
.category_box_list:hover {
	box-shadow: 0px 0px 15px 1px rgb(128,160,192);
	transition: all 300ms 0s ease;
}

@media screen and (max-width:1024px) { 
	.category_box_list {
		width : 100%;
		height : 120px;
	}
}

.category_name {
	background-color : rgba(0,0,0,0.6);
	margin : 0px;
	width : 100%;
	height : 100%;
	padding-top : 38px;
	color : white;
	text-align : center;
	font-weight : bold;
	font-size : 15pt;
}
.category_name:hover {
	background-color : rgba(0,0,0,0.4);
	text-decoration : underline;
}
@media screen and (max-width:1024px) { 
	.category_name {
		font-size : 20pt;
	}
}




.question_box_list .question_text {
	width : 316px;
	font-size : 14pt;
	border : none;
	padding : 0px;
	margin-bottom : 8px;

	overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.fwrap {
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
}

.radio {
	display : none;
}
.radio + .category {
	padding : 6px 12px;
	font-size : 14pt;
	border : 1px solid gray;
	border-radius : 8px;
	background-color : lightgray;
	color : gray;
	margin : 2px;
//	flex : 1 0 auto;
	transition: all 300ms 0s ease;
	text-decoration : none;
}

.radio + .category:hover {
	border : 1px solid rgb(224,64,64);
	background-color : rgb(224,64,64);
	color : white;
	transition: all 300ms 0s ease;
}
.radio:checked + .category {
	border : 1px solid #ed0d27;
	background-color : #ed0d27;
	color : white;
}
.f_wrap{
	display : flex;
	flex-wrap : wrap;
}

.add_category {
	text-decoration : none;
	color : blue;
	font-weight : bold;
	font-size : 13pt;
}
.add_category:hover {
	text-decoration : underline;
}
.TwitterLink{
	display : block;
	width : 64px;
	height : 64px;
	border-radius : 4px;
	background-size : cover;
	background-position : center center;
	background-image : url('../img/TwitterLogo.png');
	background-color : #00aced;
	margin : -8px auto 8px auto;
}
.TwitterLink:hover {
	background-color : #10bcfd;
}
.user_profile {
	margin : 8px 0px;
	display : flex;
	width : 520px;
}

.TwitterFollowLink {
	display : block;
	width : 220px;
//	height : 48px;
	border-radius : 4px;
	background-size : contain;
	background-position : 4px center;
	background-image : url('../img/TwitterLogo.png');
	background-repeat : no-repeat;

	padding : 2px 16px 4px 52px;
	background-color : #00aced;
	margin : 0px auto 16px auto;
	font-size : 14pt;
	color : white;
	text-decoration : none;
}
.TwitterFollowLink:hover {
	background-color : #10bcfd;
	text-decoration : underline;
}

.box_follow {
	border : 1px solid lightgray;
	width : 640px;
	margin : 12px auto;
	text-align : center;
	padding-bottom : 16px;
}


.profile_block1 {
	margin-left : 16px;
}
.profile_image {
	width : 96px;
	height : 96px;
	background-position : center  center;
	background-size : cover;
	border-radius : 50%;
	margin : 8px 24px;;
}
.profile_caption {
	margin : 0px;
	margin-bottom : 4px;
	font-size : 13pt;
}
.profile_name {
	margin : 0px;
	margin-left : 24px;
	color : blue;
	text-decoration : none;
	font-size : 18pt;
}
.profile_name:hover {
	text-decoration : underline;
}

.user_info {
	display : flex;
	flex-direction : row;
	margin : 16px 24px 8px 24px;;
}

.info_block{
	flex : 1 1 auto;
}

.info {
	margin : 0px 48px 0px 16px;
	display : flex;
	flex-direction : row;
	font-size : 17pt;
	justify-content : space-between;
}
.info_caption {
	width : 240px;
	margin : 0px;
	margin-left : 8px;
}
.info_data {
	width : 140px;
	text-align : right;
	margin : 0px;
}
.info_caption:after {
//	content : ": ";
}

.category_link {
	padding : 6px 12px;
	font-size : 14pt;
	border : 1px solid rgb(80,80,80);
	border-radius : 8px;
	background-color : white;
	color : rgb(80,80,80);
	margin : 2px;
	transition: all 300ms 0s ease;
	text-decoration : none;
}
.category_link:hover {
	text-decoration : underline;
	border : 1px solid black;
	background-color : rgb(256,240,240);
	background-color : rgb(248,252,255);
	color : black;
}

.edit_button {
//	opacity : 0;
	position : absolute;
	top : 4px;
	right : 4px;

	width : 48px;
	height : 48px;

	border : 1px solid lightgray;
	border-radius : 4px;
	background-color : white;
	background-image : url('../img/ico_edit00.png');
	background-position : center center;
	background-repeat : no-repeat;
	background-size : 40px;

	z-index : 100;
	transition: all 300ms 0s ease;
}
.edit_button:hover {
	transition: all 300ms 0s ease;
	background-image : url('../img/ico_edit01.png');
	background-color : #ed0d27;
	border : 1px solid #ed0d27;
}

.retry_challenge, .retry_challenge2 {
	display : block;
	width : 600px;
	margin : 16px auto;
	padding : 16px;
	text-align : center;
	text-decoration : none;
	border-radius : 8px;
	border : 8px;
	font-size : 18pt;
	font-weight : bold;
	transition: all 300ms 0s ease;
}
.retry_challenge {
	color :white;
	background-color : #4169e1;
	border : 2px solid #4169e1;
}
.retry_challenge2 {
	color :white;
	background-color : #55acee;
	border : 2px solid #55acee;
}
.retry_challenge:hover {
	background-color : white;
	color :#4169e1;
	transition: all 300ms 0s ease;
}
.retry_challenge2:hover {
	background-color : white;
	color :#55acee;
	transition: all 300ms 0s ease;
}

.result_rate {
	width : 560px;
	margin : 4px auto;
	text-align : center;
	font-size : 22pt;
	font-weight : bold;
}
.result_comment {
	width : 540px;
	margin : 16px auto;
	margin-top : 32px;
	font-size : 20pt
}

.reset_link, .delete_link {
	display : block;
	border-style: none;
	color : white;
	cursor : pointer;
	border-radius : 6px;
	font-weight : bold;
	text-align : center;
	text-decoration : none;
	flex : 1 1 auto;
	padding : 7px 0px;;
	width : 98%;
	margin : 16px auto;
	transition: all 300ms 0s ease;
}
.delete_link {
	background-color : gray;
	border : 2px solid gray;
}
.delete_link:hover {
	background-color : white;
	border : 2px solid gray;
	color : gray;
}
.reset_link {
	background-color : #008000;
	border : 2px solid #008000;
}
.reset_link:hover {
	background-color : white;
	color : #008000;
	transition: all 300ms 0s ease;
}

#switch_image {
	font-size : 14pt;
	padding : 4px 16px;;
	background-color : blue;
	color : white;
}

.btn_link, .btn_link2 {
	display : block;
	width : 260px;
	border-style: none;
	color : white;
	cursor : pointer;
	border-radius : 6px;
	font-size : 18pt;
	font-weight : bold;
	text-align : center;
	text-decoration : none;
	flex : 1 0 auto;
	padding : 7px 16px;
	margin : 16px auto;
	transition: all 300ms 0s ease;
}
@media screen and (max-width:1024px) {
	.btn_link, .btn_link2 {
		width : 180px;
		flex : 1;
		margin : 0px 4px;
	}
}
.btn_link {
	background-color : #4169e1;
	border : 2px solid #4169e1;
}
.btn_link2 {
	background-color : #3cb371;
	border : 2px solid #3cb371;
}




.btn_link:hover {
	background-color : white;
	color : #4169e1;
	transition: all 300ms 0s ease;
}

.btn_link2:hover {
	background-color : white;
	color : #3cb371;
	transition: all 300ms 0s ease;
}

.login_link {
	display : block;
	width : 120px;
	height : 32px;

	color : #ed0d27;

	border-radius : 64px;
	font-size : 16pt;
	font-weight : bold;
	text-align : center;
	text-decoration : none;
//	flex : 1 1 auto;
	padding : 7px 16px;
	margin : 16px auto;
	transition: all 300ms 0s ease;
	background-color : white;
	border : 2px solid white;
}

.login_link:hover {
	text-decoration : underline;
	transition: all 300ms 0s ease;
}

.f_between {
	justify-content : space-between;
	align-items: center;
}

.user_icon {
	display : block;
	width : 64px;
	height : 64px;
	border-radius : 64px;
	border : 5px solid white;
	margin : 0px auto 4px auto;
}

.user_link {
	display : block;
	text-align : center;
	color : white;
	text-decoration : none;
	margin-right : 64px;
	font-weight : bold;
}
.user_link:hover {
	text-decoration : underline;
}

.cancel_link {
	display : block;
	width : 160px;
	font-size : 16pt;
	font-weight : bold;
	text-decoration : none;
	text-align : center;
	margin : 8px auto;
	color : gray;
}
.cancel_link:hover {
	color : blue;
	text-decoration : underline;
}


.checkbox {
	display : none;
}
.checkbox + .ico_check {
	width : 48px;
	height : 48px;
	background-position : center center;
	background-size : cover;
	background-image : url('../img/ico_check00.png');
}
.checkbox:checked + .ico_check {
	background-image : url('../img/ico_check01.png');
}
.checkbox_area {
	display : flex;
	width : 480px;
	align-items: center;
	margin : 6px auto;
}
.checkbox_area p {
//	color : blue;
	text-decoration : none;
	font-size : 18pt;
}
.checkbox_area p:hover {
	color : blue;
	text-decoration : underline;
}

.text_info {
	margin : 32px auto;
	width : 720px;

	font-size : 18pt;
	line-height : 27pt;
}
.text_info ul li {
	font-size : 16pt;
	margin-bottom : 12px;
}

.top_text {
	margin : 32px auto 24px auto;
	text-align : center;
	font-size : 24pt;
	line-height : 36pt;
	
}

.user_box {
	display : flex;
	flex-direction : row;
	margin-bottom : 32px;
}
@media screen and (max-width:1024px) { 
	.user_box {
		display : flex;
		flex-direction : column;
	}
}

@media screen and (max-width:1024px) { 
	.user_control {
		display : flex;
		flex-direction : row;
		justify-content : space-around;
		align-items : center;
	}
}
.please_login {
	font-size : 20pt;
	margin : 32px auto;
	width : 720px;
}

.TweetQuestion {
	display : block;
	font-size : 11pt;
	color : white;
	border-radius : 4px;
	padding : 4px 16px 4px 32px;
	background-color : #00aced;
	width : 120px;
	text-decoration : none;

	background-size : contain;
	background-repeat : no-repeat;
	background-position : 4px center;
	background-image : url('../img/TwitterLogo.png');

	margin-left : 6px;
}
.TweetQuestion:hover {
	text-decoration : underline;
	background-color : #10bcfd;
}

.mark_requred, .mark_any {
	display : inline-block;
	padding : 4px 12px 0px 12px;
	font-size : 9pt;
	font-weight : bold;
	color : rgba(255,255,255,0.9);
	border-radius : 4px;
	text-align : center;
	margin-left : 4px;
}
.mark_requred {
	background-color : #dc143c;
}
.mark_any {
	background-color : #9acd32;
}

.control_caption {
	display : flex;
	margin : 8px 0px;;
	align-items ; center;
}

.control_caption p {
	padding : 0px;
	margin : 0px;
}

.favorites {
	display : block;
	font-size : 14pt;
	color : black;
	border-radius : 4px;
	padding : 6px 4px 2px 34px;
	background-color : white;
	width : 82px;
	height : 27px;
	border : 1px solid lightgray;

	text-decoration : none;

	background-size : 26px;;
	background-repeat : no-repeat;
	background-position : 8px center;
	background-image : url('../img/ico_favorites01.png');
	text-align : center;
	margin-left : 6px;
}
.favorites:hover {
	text-decoration : underline;
}

input[type="checkbox" ]:checked + .favorites {
	background-color : orange;
	color : white;
	background-image : url('../img/ico_favorites00.png');
	border : 1px solid orange;
}

.q_status {
	font-size : 12pt;
	color : black;
	border-radius : 4px;
	border : 1px solid lightgray;
	padding : 4px 4px 4px 8px;
	background-color : white;;
	width : 164px;
	height : 27px;

	text-decoration : none;

	text-align : left;
	margin-left : 6px;

}

.material {
	width : 320px;
	height : 200px;
	margin : 8px;
}
@media screen and (max-width:1024px) { 
	.material {
		width : 354px;
		height : 221px;
		margin : 8px;
	}
}

.result_challenge {
	margin : -1px -1px 0px 0px;
	width : 82px;
//	height : 48px;
	font-size : 17pt;
	border : 1px solid gray;
	text-align : center;
	padding : 4px 0px;
}


#block_category {
	border : 1px solid lightgray;
	border-top-left-radius : 8px;
	border-top-right-radius : 8px;
	padding-top : 4px;
	max-height : 94px;
	overflow : hidden;

	transition: all 300ms 0s ease;
}

#tab_category {
	position : relative;
	right : 0px;
	border : 1px solid gray;
	background-color :gray;
	border-bottom-left-radius : 12px;
	border-bottom-right-radius : 12px;
//	width : 96px;
	width : 100%;
//	height : 24px;
	text-align : center;
//	padding : 1px 0px;
	color : white;
	cursor : pointer;
}
#tab_category:hover {
	text-decoration : underline;
	border : 1px solid lightgray;
	background-color :lightgray;
}

#check_tab_category {
	display : none;
}

.tab {
	border : 1px solid lightgray;
	width : 100%;
	text-align : center;
	font-size : 18pt;
	font-weight : bold;
	padding : 8px 0px;
	background-color :lightgray;
	color : white;
}
.tab:hover {
	text-decoration : underline;
}

input[type="radio"]:checked +.tab {
	border : 1px solid gray;
	background-color :white;
	color : black;
}

#check_frame, #check_background {
	display : none;
}

#tab_frame, #tab_background {
	border : 1px solid gray;
	margin-top : -25px;
	margin-bottom : 16px;
	width : 100%;
}

.pagenation, .pagenation_off, .pagenation_on {
	padding : 8px 0px;
	font-size : 16pt;
	text-align : center;
	border : 1px solid lightgray;
	background-color : rgb(240,240,240);
	flex : 2;
	margin:4px;
	border-radius : 8px;
	color : black;
	text-decoration : none;
	font-weight : bold;
}
.pagenation:hover {
	text-decoration : underline;
}
.pagenation_on {
	color : white;
	background-color : rgb(224,64,64);
	border : 1px solid rgb(200,32,32);
}
.pagenation_off {
	color : rgb(192,192,192);
	background-color : gray;
	border : 1px solid gray;
}

.mobile_none {
	display : block;
}
.mobile_exist {
	display : none;
}
@media screen and (max-width:1024px) { 
	.mobile_none {
		display : none;
	}
	.mobile_exist {
		display : block;
	}
}



.video_title {
	width:302px;
	background-color:rgb(64,64,64);
	padding:4px 16px;
	color:white;
	font-size:16pt;
	height : 64px;
	max-height : 64px;
}

.video_image {
	width:334px;
	height:auto;
	margin-bottom:-4px;
}

.video_info {
	width:302px;
	background-color:rgb(64,64,64);
	text-align:right;
	padding:4px 16px;
	color:white;
	font-size:12pt;
}

@media screen and (max-width:1024px) { 
	.video_image {
		width:360px;
	}
	.video_title, .video_info {
		width:334px;
	}
}