@charset "utf-8";

body {
	background-color: #08070b;
	color: #FFF;
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

a {
	color: #FFC;
	display: inline;
}
a:link, a:hover, a:visited {
	color: #FFC;
	text-decoration: underline;
}

.button {
	width: 80%;
	margin: 10px auto;
	text-align: center;
	border-radius: 10px;
	background: #FF0000 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#B30000)); 
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	display: block;
}
.button a {
	display: block;
	padding: 8px;
	color: #FFF;
	font-weight: bold;
	text-shadow: 0 -1px 1px #666;
	text-decoration: none;
}

.button2 {
	width: 90%;
	margin: 10px auto;
	text-align: center;
	border-radius: 5px;
	background: #DDD -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#BBB)); 
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	display: block;
}
.button2 a {
	display: block;
	padding: 6px 0 3px;
	color: #666;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0 -1px 1px #999;
	text-decoration: none;
}

.button3 {
	width: 94%;
	margin: 5px auto;
	text-align: center;
	border-radius: 5px;
	background: #FFFFBB -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFCC), to(#FFFF99)); 
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	display: block;
}
.button3 a {
	display: block;
	padding: 8px;
	color: #666;
	font-weight: bold;
	text-shadow: 0 -1px 1px #BBB;
	text-decoration: none;
}
.button3 .trigger {
	color: #666;
	font-size: 14px;
	font-weight: bold;
}
.button3 .acordion_tree {
	color: #666;
	font-size: 12px;
	line-height: 1.4;
}


.txt {
	color: #FFF;
	margin: 10px 10px 0;
}

.txt_bx {
	background-color: #98dae2;
	color: #035;
	width: 78%;
	margin: 0 auto 10px;
	padding: 8px;
}
.txt_bx a:link, .txt_bx a:hover, .txt_bx a:visited {
	color: #038;
	text-decoration: underline;
}


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

#top_container {
	width: 100%;
}

header {
	margin: 0;
}

h1 {
	margin: 0;
	padding: 0;
}

h1 img {
	width: 100%;
}

#top_container header {
	line-height: 0;
}

#top_container header img {
	width: 100%;
}

#top_ex {
	color: #666;
	margin: 5px 10px;
}

#top_ex dt {
	text-align: center;
	text-shadow: 0 -1px 1px #ccc;
}

#top_ex .trigger {
	color: #666;
	font-size: 14px;
	font-weight: bold;
}

#top_ex .acordion_tree {
	color: #666;
	font-size: 12px;
	line-height: 1.4;
}

#top_ex a,
#top_ex a:link,
#top_ex a:hover,
#top_ex a:visited {
	color: #f96;
	text-decoration: underline;
}

#top_ex .button a,
#top_ex .button a:link,
#top_ex .button a:hover,
#top_ex .button a:visited {
	color: #FFF;
	text-decoration: none;
	width: 90%;
}

#top_button .button {
	width: 94%;
	margin: 5px auto;
	border-radius: 5px;
	background: #FF6666 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF6666), to(#df3333)); 
}

#top_button .button .trigger {
	color: #666;
	font-size: 14px;
	font-weight: bold;
}

#top_button .button .acordion_tree {
	color: #666;
	font-size: 12px;
	line-height: 1.4;
}

#profile {
	margin: 20px 10px 0;
	font-size: 11px;
}

#profile h2 {
	font-size: 15px;
	color: #FC9;
	line-height: 1.8;
}

#profile img {
	width: 45%;
	float: left;
	margin: 5px 8px 5px 0;
}

#form {
	margin: 10px;
	padding: 12px 10px;
	color: #666;
	border-radius: 10px;
	background-color: #FFF;
}

#form dt {
	margin-top: 12px;
	color: #620;
}

footer {
	margin: 10px 0 0;
	padding: 8px;
	background-color: #222;
	color: #FFF;
	font-size: 11px;
}

footer p {
	font-size: 14px;
	line-height: 1.4;
}

footer p small {
	font-size: 11px;
}


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

#lesson_list {
	 margin-top: 15px;
}

#lesson_list li {
	 margin: 8px 0;
}

#oubo {
	color: #FFF;
	margin: 0 10px 0;
}

#oubo h2 {
	color: #FCC;
	margin: 20px 0 3px;
	font-size: 110%;
}



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

#code {
	width: 97%;
	overflow: hidden;
	margin: 0 auto;
}

#code li {
	width: 32%;
	margin: 0 1px;
	float: left;
}

#code img {
	width: 100%;
}

#code_container {
	background-color: #FFF;
	color: #666;
}

#code1 {
	background: #FFF url(/images/event/katahirarina/201306mv/lesson_web/code1.png) no-repeat;
	background-size: contain;
	width: 100%;
	height: 1560px;
}

#code2 {
	background: #FFF url(/images/event/katahirarina/201306mv/lesson_web/code2.png) no-repeat;
	background-size: contain;
	width: 100%;
	height: 1600px;
}

#code3 {
	background: #FFF url(/images/event/katahirarina/201306mv/lesson_web/code3.png) no-repeat;
	background-size: contain;
	width: 100%;
	height: 1580px;
}