@charset "utf-8";

*{
	margin:0;
	padding:0;
}

body{
	font: 13px/1.4 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	/* [disabled]color:#181818; */	/*background: url(images/bg1.png) repeat-x left top;*/
}

body#toppage{
	background:url(images/bgTop1.png) repeat-x left top;
}

a{color:#009;text-decoration:none;}
a:hover{color:#00C;}
a:visited{color:#06F;}
a:active, a:focus {outline: 0;}

img{border:0;}

.clear{
	clear:both;
	margin:0;
	}

.mg0{
	margin:0;
}

/*************

全体

*************/

#wrapper{
margin: 0 auto;
padding: 0 20px;
width: 910px;
}

/*************

/* ヘッダー

*************/

#header{
	margin:0;
	padding:0 0 45px 0;
}

#header h1 {
padding:5px 0 10px 0;
font-size: 10px;
color:#6699CC;
}

#header .headlogo {
	float:left;
}

#header .btn_mail{
	float:right;
	padding:5px 0 0 0;
}

/*************

/* トップナビゲーション

*************/

ul#topnav{
	margin:20px 0 0 0;
	padding:0;
	width: 910px;
	height: 46px;
	background:url(images/topnav.png) no-repeat left top;
}

ul#topnav li{
	margin:0;
	padding:0;
	float:left;
	list-style:none;
	width:130px;
}

ul#topnav a{
	text-indent: -9999px;
	text-decoration: none;
	display: block;
	width: 130px;
	height: 46px;
	background:url(images/topnav.png) no-repeat left top;
}

ul#topnav a#home{background-position:0 0;}
ul#topnav a#method{background-position:-130px 0;}
ul#topnav a#material{background-position:-260px 0;}
ul#topnav a#lesson{background-position:-390px 0;}
ul#topnav a#training{background-position:-520px 0;}
ul#topnav a#manual{background-position:-650px 0;}
ul#topnav a#faq{background-position:-780px 0;}

ul#topnav a#home:hover, ul#topnav li.active a#home{background-position:0 -46px;}
ul#topnav a#method:hover, ul#topnav li.active a#method{background-position:-130px -46px;}
ul#topnav a#material:hover, ul#topnav li.active a#material{background-position:-260px -46px;}
ul#topnav a#lesson:hover, ul#topnav li.active a#lesson{background-position:-390px -46px;}
ul#topnav a#training:hover, ul#topnav li.active a#training{background-position:-520px -46px;}
ul#topnav a#manual:hover, ul#topnav li.active a#manual{background-position:-650px -46px;}
ul#topnav a#faq:hover, ul#topnav li.active a#faq{background-position:-780px -46px;}

/**
li.active a#home{background-position:0 -42px;}
li.active a#guide{background-position:-213px -42px;}
li.active a#faq{background-position:-429px -42px;}
li.active a#mp{background-position:-573px -42px;}
**/

/*************

メイン（右側）コンテンツ

*************/

#wrapper #main {
	float: right;
	width: 618px;
	padding: 20px 0;
	display: inline;
	position:relative;
}

#main .bannerM img{
	padding-right: 10px;
	padding-bottom: 15px;
}
#main .bannerM img.last{
	padding-right:0;
	}

#main h2{
	margin:0 0 10px 0;
	padding:2px 10px 0 35px;
	line-height:35px;
	font-size: 13px;
	color: #fff;
	background: url(images/heading.png) no-repeat left top;
}

.font20{
	font-size: 20px;
}

.font9{
	font-size: 9px;
}

.font9red{
	font-size: 9px;
		color:#F00;
}

.font12red{
	font-size: 12px;
	color:#F00;
}

.font14blue{
	font-size: 14px;
	font-weight:bold;
	color:#009;
	padding:15px 0 0 0;
}

.font14red{
	font-size: 14px;
	font-weight:bold;
	color:#F00;
}

.mouse{
	width: 200px;
	margin: 0;
	padding: 0;
	position:absolute;
	top:21px;
	right:-3px;
}

.mouse p{
	float:left;
}

#main h3 {
	font-size: 13px;
	font-weight: normal;
	line-height: 30px;
	padding-left: 15px;
	margin-top: 10px;
	letter-spacing: 0.2em;
	color: #484848;
	border-bottom: 1px solid #cccccc;
}

/*
#main p {
	padding: 15px 15px 15px 20px;
}*/

.samplebtn{
margin:0;
padding:0 0 20px 0;
text-align:center;
}

.samplebtn_sb{
	margin:0;
	padding:20px 0 0 0;
	text-align:center;
}

.sampleaudio{
	background:url(images/text.gif) no-repeat left 1px;
	background-color:#FFC;
	border-top:#CC9 2px dotted;
	border-bottom:#CC9 2px dotted;
	padding-left:20px;
}

.sampleaudio2{
	background:url(images/music1.gif) no-repeat left 5px;
	background-color:#FFC;
	border-bottom:#CC9 2px dotted;
	border-top:#CC9 2px dotted;
	padding-left:20px;
}

.sampleaudio4{
	background:url(images/gift.gif) no-repeat left 5px;
	background-color:#FFC;
	border-bottom:#CC9 2px dotted;
	border-top:#CC9 2px dotted;
	padding-left:20px;
}

.catch{
	text-align:center;
	font-size:20px;
	line-height:180%;
}

#date {
text-align: right;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 10px;
font-weight:bold;
color:#484848;
}

#next {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}


/* ----------------------

中央リスト

---------------------- */

#main .list{
	margin:0;
	position:relative;
}

#main ul.type{
	margin:0 0 10px 0;
	padding:0 10px 0 0;
	float:left;
	display:block;
	list-style:none;

}
#main ul.type li.normal{
	margin:0;
	padding:5px 0 10px 35px;
	line-height:180%;
	width:390px;
	border-bottom:1px dotted #ccc;
	background:url(images/check.png) no-repeat left 5px;
}
#main ul.type li.last{
	margin:0;
	padding:5px 0 10px 35px;
	line-height:180%;
	border-bottom:1px dotted #ccc;
	background:url(images/check.png) no-repeat left 5px;
}

#main .red12{
	color:#F00;
	font-size:12px;
}

#main ul{
margin-left: 20px;
padding: 10px 0;
}

#main li{
margin: 0 10px 10px 5px;
list-style: none;
border-bottom: 1px solid #efefef;
}

#main ul.audio li{
	margin:0;
	padding:5px 0 10px 35px;
	line-height:180%;
}

.sample{
	line-height:180%;
}

.sample p{
	text-indent:1em;
}

/* 画像を右に回りこみ */

#main p.withImage{
width: 170px;
margin:0;
position:absolute;
top:10px;
left:445px;
}

/* ----------------------

紹介下の部分

---------------------- */

.box{
float: left;
width: 195px;
margin-top:0;
margin-left:0;
}

.mgRight{margin-right:16px;}
.mgBottom{margin-bottom:10px;}

h4{
	text-align: center;
	padding:7px 0 0 0;
	margin:0;
	height:25px;
	background: url(images/button.png) no-repeat left top;
}

h4 a{
	color:#FF3;text-decoration:none;
}

h4 a:hover{
	color:#888;
}

h4 a:visited{
	color:#FF3;
}
	
h4 a:active, a:focus {
	/* [disabled]outline: 0; */
}

.boxmoji{
	margin:0;
	padding:10px;
	line-height:180%;	
}

.box ul{
	margin:0;
	padding:0 10px;
	list-style: none;
}

.box ul li{
	margin: 0;
	padding:0 0 5px 15px;
	background: url(images/list.png) no-repeat left top;
}

.box ul li a{
margin:0;
padding:0;
}

.box_btn{
	float:left;
	margin-top:4px;
}

.forum_oct{
	background-color:#F33;
	color:#FFF;
}

/* メインとフッターのリスト位置調節 
#main ul, #footer ul{margin-left: 20px;}
#main li, #footer li{margin-bottom: 3px;}*/


/*************

サイド（左側）コンテンツ

*************/

#sidebar {
	float: left;
	width: 265px;
	padding: 20px 0;
}

#sidebar p{
	margin-bottom: 20px;
}

html body dl.list dd div{
   display:inline-block;
}

.banner_mini{
	margin:0;
	padding:0;
}

.mini_l{
	margin:0;
	float:left;
	border:#F60 1px dotted;
}

.mini_r{
	margin:0;
	float:right;
	border:#F60 1px dotted;
}

.mini_l a:hover img{
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.mini_r a:hover img{
	opacity: 0.6;
	filter: alpha(opacity=60);
}

#information .bnr_info{
	margin:0;
	padding:0;
}

#information{
	margin:0 0 20px 0;
}

#information a{
	color:#009;
	text-decoration:underline;
	font-weight:bold;
	}

#information .list{
	height:230px;
	overflow-y:scroll;
	border-right:1px solid #999;
	border-left:1px solid #999;
}

dl.list {
   border-bottom:1px solid #999;
}

dl.list dt {
   float:left;
   width:4em;
   border-top:1px solid #999;
   padding-top:5px;
   padding-bottom:0;
   padding-right:0;
}

dl.list dd {
   margin-left:4em;
   padding-top:5px;
   padding-bottom:5px;
   padding-right:5px;
   border-top:1px solid #999;
}

.marker{
	background-color:#FC0;
}

.center{
	margin: auto;
	text-align: center;
}

#sidebar h3{
margin: 5px 0 0 0;
padding:2px 10px 0 35px;
line-height:35px;
font-size: 13px;
color: #fff;
background: url(images/heading2.png) no-repeat left top;
}

.sidemenu ul{
margin-left: 5px;
padding: 10px 0;
}

.sidemenu li{
margin: 0 10px 10px 5px;
list-style: none;
border-bottom: 1px solid #efefef;
}

.sidemenu li a{
background: url(images/list.png) no-repeat 0 50%;
display: block;
padding-left:16px;
}

.sidemenu li.book a{
background: url(images/book1.gif) no-repeat 0 50%;
display: block;
padding-left:20px;
}

.sidemenu li a:hover{background-position: 3px 50%;}

.marker_l{
	background-color:#FC0;
	font-weight:bold;
	border-left:solid 5px #C90;
	border-right:solid 5px #C90;
	border-top:solid 2px #C90;
	border-bottom:solid 2px #C90;
	text-shadow:#FFF;
	text-align:center;
	letter-spacing:1em;
}

.marker_h{
	background-color:#9C6;
	width:120px;
	text-align:center;
	border-left:solid 5px #360;
	float:left;
}

#menber{
	background-color:#FFC;
	border-bottom:#F30 3px dotted;
	border-top:#F30 3px dotted;
	margin:0 0 20px 0;
}

.menber_txt{
	background:url(images/person.gif) no-repeat left 2px;
	padding-left:20px;
	font-size:14px;
}

.attention{
	background:url(images/info.gif) no-repeat left 2px;
	background-color:#FFC;
	border-bottom:#F30 3px dotted;
	border-top:#F30 3px dotted;
	padding-left:20px;
	font-size:9px;
}

.movie{
	padding-left:20px;
	font-size:14px;
	background: url(images/movie2.gif) no-repeat left 2px;
	background-color:#FFC;
}

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/*************

/* フッター

*************/

#footer{
	clear:both;
	padding: 30px 0 10px 0;
	background:url(images/bgBottom1.png) repeat-x left top;
}

#footer #inner{
	margin:0 auto;
	width:940px;
}

/*
#footer .inner{
overflow: hidden;
}

* html #footer .inner{height:1%;}
*/

#inner ul.footbox{
	margin:0 0 10px 16px;
	padding:0;
	width: 195px;
	float:left;
	list-style: none;
}

#inner ul.footbox li{
	margin:0;
	padding:0;
}

#inner ul.footbox li a{
	background: url(images/list2.png) no-repeat left center;
	display: block;
	padding:5px 0 5px 20px;
	color:#fff;
}

#inner ul.footbox li a:hover{
	color:#ccc;
}

#inner .logo{
	float:left;
	padding: 10px 10px 0 0;
	width: 281px;
}

address{
padding:5px 0 0 0;
color:#fff;
text-align: center;
font-style:normal;
font-size: 12px;
clear:both;
display:block;
}