@charset "utf-8";
/**
 * Seminar Banner ver 1.0 (サンプル)
 * by Digital Aid 2011
 * セミナーの開催を告知し、申し込みページへ誘導します
 * https://www.digital-aid.co.jp/tool/seminar-banner/
 */
 
/* --- seminarArea --- */
#seminarArea {
	bottom: 10px;
	display: flex;
	font-family:"メイリオ",Meiryo,Osaka,"MS Pゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	font-size: 12px;
	height: auto;
	line-height: 1.4;
	padding: 0;
	position: fixed;
	right: 0;
	text-align: center;
	z-index: 100;
}

/* frameArea */
#sb_frame {
	background: #eaecef;
	border: 10px solid #bec3cf;
	color: black;
	text-align: left;
	padding: 1rem 0.5rem 0;
}
#sb_frame h1, #sb_frame h2 {
	text-align: center;
}
#sb_frame h1 {
	font-size: 1.8rem;
	font-weight: bold;
}
#sb_frame h2 {
	border-bottom: none;
	font-size: 1.6rem;
	padding-left: 1rem;
}
.sb_flex {
	display: flex;
	padding-left: 1rem;
}
.sb_nowrap {
	white-space: nowrap;
}
#sb_copy {
	height: auto;
	text-align: left;
	margin-top: 2rem;
}
#sb_note {
	margin: 1rem 0 2rem;
}
#sb_btn {
	background: #a1a9ba;
	border-radius: 20px;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	height: 44px;
	line-height:2.8;
	margin: 1rem -1rem 0;
	text-align: center;
	width: calc(100%+2rem);
}
#sb_btn:hover, #sb_left:hover, #sb_right:hover, .default .sb_btn2 { /* .default .sb_btn2 */
	background:#7a85a5;
}
#sb_btn > a {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

/* ボタン、スイッチ */
.sb_switch {
	cursor: pointer;
	font-size: 1.8rem;
	font-weight: bold;
	height: 100%;
	width: 44px;
}
#sb_left, #sb_right {
	background: #a1a9ba;
	color: #fff;
	line-height: 4.6;
	height: 88px;
	width: 44px;
}
#sb_left {
	border-radius: 44px 0 0 44px;
}
#sb_right {
	border-radius: 0 44px 44px 0;
}
.sb_invisible {
	visibility: hidden;
}
.sb_hide {
	display: none;
}
.sb_w0 {
	width: 0px;
}

/* --- カラーバリエーション --- */
/* 赤 (.red .sb_btn, .red .sb_btn2, .red .sb_frame, .red .sb_bg) */
.red > #sb_frame {
	background: #fee1eb;
	border-color: #ea4470; 
}
.red > #sb_frame > #sb_btn, 
.red > .sb_switch > #sb_left, 
.red > .sb_switch > #sb_right,
.red .sb_btn {
	background: #d9073d;
}
.red > #sb_frame > #sb_btn:hover, 
.red > .sb_switch > #sb_left:hover, 
.red > .sb_switch > #sb_right:hover,
.red .sb_btn2 {
	background: #b70049;
}
.red .sb_frame {
	background: #ea4470;
}
.red .sb_bg {
	background: #fee1eb;
}

/* 橙 */
.orange > #sb_frame {
	background: #fceee3;
	border-color: #d19564; 
}
.orange > #sb_frame > #sb_btn, 
.orange > .sb_switch > #sb_left, 
.orange > .sb_switch > #sb_right,
.orange .sb_btn {
	background: #e8822a;
}
.orange > #sb_frame > #sb_btn:hover, 
.orange > .sb_switch > #sb_left:hover, 
.orange > .sb_switch > #sb_right:hover,
.orange .sb_btn2 {
	background: #84502f;
}
.orange .sb_frame {
	background: #d19564;
}
.orange .sb_bg {
	background: #fceee3;
}

/* 黄 */
.yellow > #sb_frame {
	background: #fff9e5;
	border-color: #ffc147; 
}
.yellow > #sb_frame > #sb_btn, 
.yellow > .sb_switch > #sb_left, 
.yellow > .sb_switch > #sb_right,
.yellow .sb_btn {
	background: #f4aa09;
}
.yellow > #sb_frame > #sb_btn:hover, 
.yellow > .sb_switch > #sb_left:hover, 
.yellow > .sb_switch > #sb_right:hover,
.yellow .sb_btn2 {
	background: #d6ae57;
}
.yellow .sb_frame {
	background: #ffc147;
}
.yellow .sb_bg {
	background: #fff9e5;
}

/* 緑 */
.green > #sb_frame {
	background: #e4f7e3;
	border-color: #3caa34; 
}
.green > #sb_frame > #sb_btn,
.green > .sb_switch > #sb_left, 
.green > .sb_switch > #sb_right,
.green .sb_btn {
	background: #2b8225;
}
.green > #sb_frame > #sb_btn:hover, 
.green > .sb_switch > #sb_left:hover, 
.green > .sb_switch > #sb_right:hover,
.green .sb_btn2 {
	background: #356829;
}
.green .sb_frame {
	background: #3caa34;
}
.green .sb_bg {
	background: #e4f7e3;
}

/* 青 */
.blue > #sb_frame {
	background: #e5edff;
	border-color: #719ced; 
}
.blue > #sb_frame > #sb_btn, 
.blue > .sb_switch > #sb_left, 
.blue > .sb_switch > #sb_right,
.blue .sb_btn {
	background: #039;
}
.blue > #sb_frame > #sb_btn:hover, 
.blue > .sb_switch > #sb_left:hover, 
.blue > .sb_switch > #sb_right:hover,
.blue .sb_btn2 {
	background: #0e417f;
}
.blue .sb_frame {
	background: #719ced;
}
.blue .sb_bg {
	background: #e5edff;
}

/* 紫 */
.purple > #sb_frame {
	background: #eae0ef;
	border-color: #754689; 
}
.purple > #sb_frame > #sb_btn, 
.purple > .sb_switch > #sb_left, 
.purple > .sb_switch > #sb_right,
.purple .sb_btn {
	background: #871687;
}
.purple > #sb_frame > #sb_btn:hover, 
.purple > .sb_switch > #sb_left:hover, 
.purple > .sb_switch > #sb_right:hover,
.purple .sb_btn2 {
	background: #674c77;
}
.purple .sb_frame {
	background: #754689;
}
.purple .sb_bg {
	background: #eae0ef;
}

/* default */
.default .sb_btn {
	background: #a1a9ba;
}
.default .sb_frame {
	background-color: #bec3cf;
}
.default .sb_bg {
	background-color: #eaecef;
}

#table2 th {
	background: none;
	border-bottom: 1px solid #555;
}
#table2 th:first-child {
	border-top: 1px solid #555;
}
#table2 td, .sb_btn {		/* サンプル .sb_btn */
	color: #fff;
	text-align: center;
}
#table2 td:last-child {
	color: #000;
}

/* ====== 中型ディスプレイ ====== 600px以上 */
@media only screen and (min-width: 600px) {
	#seminarArea {
		font-size: 14px;
	}
	#sb_frame {
		padding: 1rem 1rem 0;
		width: 550px;
	}
}