@charset "utf-8";

/* 参加者IDの桁数変更 */
.login li span {
	width: auto; /* 実際の文字数の70％程度を目安に調整してください */
}

/* ======================================================

	色味変更

========================================================= */
/* 背景色指定（クラスの最後につける） */
.header {
	background: url("../images/online_bg.jpg") no-repeat bottom right;
	background-size: cover;
}
.bg01 { background-color: #3E6EB3!important;}/*濃い色*/

.bg02 { background-color: #ACD1EB!important;}/*中間の色*/
.header::after { background: none!important;}

.bg03 { background-color: #E4F5F9!important;}/*薄い色*/

.bg04, .sp_gnavArea { background-color: #A76FA2!important;}/*ポイントカラー１（濃）*/

.bg05, .copyright { background-color: #C5A5C8!important;}/*ポイントカラー２（薄）*/

.bg06, .sp_btn span { background-color: #BEE6E7!important;}/*ポイントカラー３（薄）*/

.bg07 { background-color: ivory!important;}/*ポイントカラー４（ごく薄）*/



/* 下層ページタイトル （背景は画像に変更してもよいかと思います） */
.sub_ttl {
	color: #fff;
	border-top: solid 5px #BEE6E7;
	border-bottom: solid 5px #7FAADD;
	background: linear-gradient(to top, #BEE6E7, #7FAADD);
}
/* 背景を画像にした場合（模様の繰り返し） */
/*.sub_ttl { background: url("../images/ttl_bg.png") repeat bottom;}*/

/* 背景を画像にした場合（繰り返し無し＋画像引き延ばし） */
/*.sub_ttl { background: url("../images/ttl_bg2.png") no-repeat center center; background-size: cover;}*/

/* 背景を画像にした場合（繰り返し無し＋短い方に画像を合わせる） */
/*.sub_ttl { background: url("../images/ttl_bg2.png") no-repeat center center; background-size: contain;}*/

.ttl_type01 {
	color: #A76FA2;
	background: #F0E8F1;
	border-color: #C5A5C8;
}

.res_q label { color: #3E6EB3;}
.q_txt1 span.txtorange { color: #A76FA2;}
.q_li li a.iframe { background: #BEE6E7;}
.q_li li a.iframe:hover { background: #3E6EB3;}
.res_q .res_q_box { border-color: #C5A5C8;}

.table_type02 th, .table_type03 th {
	background-color: #BEE6E7;
}

/* テキスト色
========================================== */
.txtcolor01 { color: #3E6EB3!important;}/*ポイントカラー１（濃）*/
.txtcolor02, .list_type01 > li::before, .list_type02 > li::before, .prg_prs h5 { color: #C5A5C8!important;}/*ポイントカラー２（薄）*/
.sp_gnavArea h2 a { color: #fff;}
.sp_btn div::after { color: #BEE6E7;}

.txtRed { color:#f00;}
.txtblue { color: #0988BE;}
.txtgreen { color: Green;}
.txtorange { color: orangered;}

.headerArea h2, .welcome { color: #3E6EB3;}/* ログイン・トップページのテーマテキスト色 */
.headerArea h3 { color: #A76FA2;}
.ttl_type03 span::before, .ttl_type03 span::after { background-color: #BEE6E7;}/* ログイン・トップページ見出し色 */
.main_menu ul > li a { color: #5A4D5C;}
.ttl_type03 { color: #504B53;}

/* ボーダー色
========================================== */
.bd01 { border-color: #3E6EB3!important;}/*濃い色*/
.bd02 { border-color: #F0E8F1!important;}/*中間の色*/

.bd03 { border-color: #A76FA2!important;}/*ポイントカラー１（濃）*/
.bd04 { border-color: #C5A5C8!important;}/*ポイントカラー２（薄）*/

.main_menu ul > li a { border-color: #F0E8F1;}

.login_box input:focus {border: 2px solid #005782;}

/* Link
========================================== */
a:link {color: #3E6EB3;}
a:visited {color: #3E6EB3;}
a:hover {color: #A76FA2; text-decoration: none;}/*ポイントカラー１（濃）*/
.btn_detail a {color: #fff;}


/* ボタン
========================================== */
.login_btn input, .logout_btn input, .h_btn .contact a, .mbox_btn a, .btn_detail a,
.bn_link a:hover, .top_prgrm_btn dt a:hover, .btn_color01 a:hover, .btn_color02 a {
	border-color: #A76FA2;/*ポイントカラー１（濃）*/
	background: #A76FA2;/*ポイントカラー１（濃）or ポイントカラー２（薄）*/
	color: #fff;
}
.login_btn input:hover, .logout_btn input:hover, .h_btn .contact a:hover, .mbox_btn a:hover, .btn_detail a:hover,
.bn_link a, .top_prgrm_btn dt a, .btn_color01 a, .btn_color02 a:hover {
	border-color: #A76FA2;/*ポイントカラー１（濃）*/
	background: #fff;
	color: #A76FA2;/*ポイントカラー１（濃）*/
}
.back_btn li a, .dl_btn li a, .btn_detail a:hover { background-color: #BEE6E7;}/*ポイントカラー3（薄）*/
.back_btn li a:hover, .dl_btn li a:hover {
	background-color: #fff;
	color: #C5A5C8;/*ポイントカラー２（薄）*/
	border-color: #C5A5C8;/*ポイントカラー２（薄）*/
}

/* メインプログラム・一般演題・WSリストボタン */
.program_list li {
	border-color: #F0E8F1;/*中間の色*/
}
.program_list li:hover {
	border-color: #3E6EB3;/*濃い色*/
	background: #fef8ff;/*薄い色*/
}
.program_list li a::before { color: #F0E8F1;}/*中間の色*/

/* 配布資料ボタン */
.shiryou a {
	border-color: #C5A5C8;/*ポイントカラー２（薄）*/
	background-color: #fff;
	color: #C5A5C8;/*ポイントカラー２（薄）*/
}
.shiryou a:hover {
	border-color: #C5A5C8;/*ポイントカラー２（薄）*/
	background-color: #C5A5C8;/*ポイントカラー２（薄）*/
	color: #fff;
}

/* いいね吹き出し */
.res li:first-child span.cheering {
	background-color: #C5A5C8;/*ポイントカラー２（薄）*/
}
.res li:first-child span.cheering::before {
	border-color: transparent #C5A5C8 transparent transparent;/*ポイントカラー２（薄）*/
}


/* ======================================================

	メニュー

========================================================= */

/* PCメニュー背景変更（不要なほうはコメントアウトしてください。画像にしてもよいかと思います）
========================================== */
/* 画像背景 */
.main_menu {
	/*模様繰り返し*/
	/*background: url("../images/menu_bg.png") repeat;*/
	
	/*繰り返しなし*/
	/*background: url("../images/menu_bg2.jpg") no-repeat;
	background-size: cover;*/ /*画像引き延ばしの場合*/
	/*background-size: contain;*/ /*画像を縦横短いほうに合わせた場合*/
}

/* 横ストライプ */
/*.main_menu {
	background-color: #fef8ff;
	background-image:
	 linear-gradient(#e5e5e5 50%, transparent 50%, transparent);
	background-size: 10px 10px;
}*/

/* レクタングル ※色変更をするときは置き換えをするといいと思います */
/*.main_menu {
	background-image: repeating-linear-gradient(45deg, #fef8ff 25%, transparent 25%, transparent 75%, #fef8ff 75%, #fef8ff),
		repeating-linear-gradient(45deg, #fef8ff 25%, #e5e5e5 25%, #e5e5e5 75%, #fef8ff 75%, #fef8ff);
	background-position: 0 0, 20px 20px;
	background-size: 40px 40px;
}
*/
/* PCメニュー下線色変更
========================================== */
.main_menu li a:hover, .main_menu li.current a {
	border-bottom-color: #A76FA2;/*ポイントカラー１（濃）*/
}

/* スマホメニュー下線色変更
========================================== */
.sp_gnav {
	background-color: rgba(255,255,255,0.95);/* RGBカラーチャートから数値を入力してください。初期値は白95%にしてあります。 */
}

/* 色調整ではありませんが、スマホ時メニューの数が奇数の時のみコメントアウトを解除してください */
@media screen and (max-width:835px){
	/*.sp_gnav li:last-child, .fnav li:last-child {
		width: 100%;
	}*/
}

.flex_other {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
@media screen and (max-width: 700px) {
	.flex_other li {
		width: 100%;
		text-align: center;
	}
}