@charset "utf-8";

/*------------------CSSリセット------------------*/

 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, 
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
}

img{
	border: none;
	vertical-align: bottom;
}

 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
 
 
blockquote, q {
    quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
input, textarea,{
    margin: 0;
    padding: 0;
}
 
ol, ul{
    list-style:none;
}
 
table{
    border-collapse: collapse; 
    border-spacing:0;
}
 
caption, th{
    text-align: left;
}
 
a:focus {
    outline:none;
}
 
.clearfix { zoom: 100%;}
.clearfix:after { 
	content: ".";
	display: block; 
	height: 0; 
	visibility: hidden; 
	clear: both; 
}
 
.both{
    clear:both;
}
 
.inline_block {  
    display: inline-block;  
    *display: inline;  
    *zoom: 1;  
}
 
/*------------------よく使うCSS------------------*/
 
img {
    max-width:100%;
}
 
table {
    width:100%;
}
 
a,a:hover {
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}
 
a img:hover {
    filter: alpha(opacity=75);
    -moz-opacity:0.75;
    opacity:0.75;
}


body{
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
 

/*------------------wrapper------------------*/

#wrapper {
	/*background-color:#F03;*/
	width: 1190px;
	margin-left: auto;
	margin-right: auto;
}

/*------------------header------------------*/

#header{
	height: 50px;
	padding: 70px 0 30px 0;
	}
	
h1 {
	width: 240px;
	float: left;
	padding: 0 0 0 50px;
}

#top_icon{
	width: 150px;
	float: right;
	padding: 40px 10px  0 0;
}




/*------------------nav------------------*/

#nav {
	width: 110px;
	position: fixed;
	top: 150px;
	margin-left: 70px;
	float: left;
}

#nav li a {
	display: block;
	height: 38px;
}

#nav .workshop {
	background: url(../../img/nav_icn.png) no-repeat center left        ;
	
	-webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
	animation-duration: 1.5s;
	
	-webkit-animation-name: 1.5s;
    -moz-animation-name: 1.5s;
    -o-animation-name: 1.5s;
	animation-name: nav_active;
	
	}
	
@keyframes nav_active{
		0%{background-position:top left;
		opacity: 0.1;}
		100%{background-position: center left;}
		}

#nav li a:hover {
	background: url(../../img/nav_icn.png) no-repeat center left        ;
}


	


/*------------------content------------------*/

#content {
	/*background-color: #666666;*/
	width: 960px;
	padding-right: 50px;

	float: right;
	
}


#main_img{
	width: 960px;
}


/*------------------lesson------------------*/

#lesson {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

#lesson_left {
	width: 650px;
	float:left;
	margin: 0 20px 0 20px;
	
}

#lesson_right {
	width: 260px;
	float:right;
	margin: 10px 10px 0 0;
	
}

#lesson dt {
	text-align: center;
	padding: 0 0 30px 0;
}

.center_img{
	text-align: center;
}

 
.ls_text{
	width:600px;
	padding: 30px 0 0 0;
	font-size:12px;
	line-height: 1.6;
	color: #211f21;
	margin-left: auto;
	margin-right: auto;
}


.ls_rt_text{
	width:300px;
	padding: 0 0 10px 50px;
	font-size:12px;
	line-height: 1.6;
	color: #4267B2;
	margin-left: auto;
	margin-right: auto;
}


.ls_link{
	text-align:center;
	font-size:11px;
	line-height: 50px;
	color: #211f21;
}



#lesson a:link {
	color: #333;
}

#lesson a:visited {
	color: #333;
}

#lesson table {
	width: 460px;
	margin:0 0 0 15px;
	text-align:center;
}

hr {
	padding: 0 0 15px 0;
	border:none;
	border-top: dashed 1px #b5b1b1
}


/*------------------footer------------------*/

#footer {
}



#footer p {
	text-align: right;
	padding-right:150px;
	line-height: 100px;
	font-size: 10px;
	color:#463d3a;
}


#scrollUp {
    background-image: url(../../img/gotop.png);
    bottom: 50px;
    right: 100px;
    width: 40px;   
    height: 40px; 
}